prehistoric-systems/osmosfeed-template
1
0
Fork 0
mirror of https://github.com/osmoscraft/osmosfeed-template.git synced 2026-03-11 14:44:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

deploy: 1f5684a2ae

Browse source
This commit is contained in:
chuanqisun 2021-11-17 00:42:08 +00:00
parent 34899ca2ce
commit 0d7effb422
3 changed files with 425 additions and 387 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

262
cache.json
View file

@ -11,6 +11,42 @@
"feedUrl": "https://css-tricks.com/feed/",
"siteUrl": "https://css-tricks.com",
"articles": [
{
"id": "https://css-tricks.com/?p=356849",
"author": "Geoff Graham",
"description": "Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that shorter lines do not necessarily lead to faster reading. If you’re looking for a definitive answer …\nThe post Line length revisited: following the research appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/line-length-revisited-following-the-research/",
"publishedOn": "2021-11-16T21:35:39.000Z",
"wordCount": 950,
"title": "Line length revisited: following the research"
},
{
"id": "https://css-tricks.com/?p=356491",
"author": "Hilman Ramadhan",
"description": "Jamstack has been in the website world for years. Static Site Generators (SSGs) — which often have content that lives right within a GitHub repo itself — are a big part of that story. That opens up the idea of …\nThe post Generate a Pull Request of Static Content With a Simple HTML Form appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/generate-a-pull-request-of-static-content-with-a-simple-html-form/",
"publishedOn": "2021-11-16T15:37:50.000Z",
"wordCount": 1784,
"title": "Generate a Pull Request of Static Content With a Simple HTML Form"
},
{
"id": "https://css-tricks.com/?p=356805",
"author": "Chris Coyier",
"description": "That’s the name of Netlify’s YouTube Channel. Love that. I linked up Rich’s talk the other day, which was a part of this past JamstackConf, but now all the talks are up on there. Rich got to talk …\nThe post Jamstack TV appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/jamstack-tv/",
"publishedOn": "2021-11-16T15:35:36.000Z",
"wordCount": 424,
"title": "Jamstack TV"
},
{
"id": "https://css-tricks.com/?p=356611",
"author": "Chris Coyier",
"description": "In my “Different Degrees of Custom Property Usage” article, I noted a situation about colors and CSS custom properties where I went “too far” with breaking up HSL color values. Breaking every single color into its H, S, and L parts …\nThe post Color Alpha Anywhere appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/color-alpha-anywhere/",
"publishedOn": "2021-11-16T01:03:32.000Z",
"wordCount": 906,
"title": "Color Alpha Anywhere"
},
{
"id": "https://css-tricks.com/?p=355894",
"author": "Michael Michlin",
@ -26,7 +62,7 @@
"description": "Remember when Ahmad Shadeed wrote about that border-radius “toggle” he found in Facebook’s CSS? It was interesting! I covered it. A few weeks after that surge of linkage, a couple of articles came out digging into it a little deeper. …\nThe post Other Looks at the Conditional Border Radius Trick appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/other-looks-at-the-conditional-border-radius-trick/",
"publishedOn": "2021-11-12T23:54:00.000Z",
"wordCount": 908,
"wordCount": 1058,
"title": "Other Looks at the Conditional Border Radius Trick"
},
{
@ -53,7 +89,7 @@
"description": "I was working on a large React application for a startup, and aside from just wanting some good strategies to keep our styles organized, I wanted to give this whole “dark mode” thing a shot. With the huge ecosystem around …\nThe post Easy Dark Mode (and Multiple Color Themes!) in React appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/easy-dark-mode-and-multiple-color-themes-in-react/",
"publishedOn": "2021-11-11T15:28:04.000Z",
"wordCount": 2614,
"wordCount": 2632,
"title": "Easy Dark Mode (and Multiple Color Themes!) in React"
},
{
@ -71,7 +107,7 @@
"description": "Whatever, I just needed a title. Everyone’s favorite web security feature has crossed my desk a bunch of times lately and I always feel like that is a sign I should write something because that’s what blogging is. \nThe main …\nThe post Don’t Snore on CORS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/dont-snore-on-cors/",
"publishedOn": "2021-11-10T22:38:05.000Z",
"wordCount": 697,
"wordCount": 731,
"title": "Don’t Snore on CORS"
},
{
@ -107,44 +143,8 @@
"description": "(This is a sponsored post.)\nThe leade here is that VideoPress makes video on WordPress way better. VideoPress is a part of Jetpack. And now, if VideoPress is the only thing you care about from the Jetpack world, you …\nThe post VideoPress for WordPress appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/videopress-for-wordpress/",
"publishedOn": "2021-11-09T22:53:18.000Z",
"wordCount": 1195,
"wordCount": 1108,
"title": "VideoPress for WordPress"
},
{
"id": "https://css-tricks.com/?p=356187",
"author": "Adam Rackis",
"description": "Suspense is React’s forthcoming feature that helps coordinate asynchronous actions—like data loading—allowing you to easily prevent inconsistent state in your UI. I’ll provide a better explanation of what exactly that means, along with a quick introduction of Suspense, and then …\nThe post React Suspense: Lessons Learned While Loading Data appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/react-suspense-lessons-learned-while-loading-data/",
"publishedOn": "2021-11-09T15:20:10.000Z",
"wordCount": 2425,
"title": "React Suspense: Lessons Learned While Loading Data"
},
{
"id": "https://css-tricks.com/?p=356204",
"author": "Chris Coyier",
"description": "Bonafide CSS trick alert! Nelson Menezes figured out a new way (that only works in Firefox for now) that is awfully clever.\nPerhaps you know that CSS cannot animate to auto dimensions, which is super unfortunate. Animating from …\nThe post CSS Grid Can Do Auto Height Transitions appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/css-grid-can-do-auto-height-transitions/",
"publishedOn": "2021-11-08T19:01:31.000Z",
"wordCount": 590,
"title": "CSS Grid Can Do Auto Height Transitions"
},
{
"id": "https://css-tricks.com/?p=322098",
"author": "Ana Tudor",
"description": "I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time …\nThe post Icon Glassmorphism Effect in CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/icon-glassmorphism-effect-in-css/",
"publishedOn": "2021-11-08T14:57:42.000Z",
"wordCount": 8199,
"title": "Icon Glassmorphism Effect in CSS"
},
{
"id": "https://css-tricks.com/?p=356134",
"author": "Chris Coyier",
"description": "Just ran across îles, a new static site generator mostly centered around Vue. The world has no particular shortage of static site generators, but it’s interesting to see what this “next generation” of SSGs seem to focus on or …\nThe post Does the Next Generation of Static Site Generators Make Building Sites Better? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/does-the-next-generation-of-static-site-generators-make-building-sites-better/",
"publishedOn": "2021-11-08T14:56:23.000Z",
"wordCount": 1346,
"title": "Does the Next Generation of Static Site Generators Make Building Sites Better?"
}
]
},
@ -153,13 +153,27 @@
"feedUrl": "https://www.smashingmagazine.com/feed/",
"siteUrl": "https://www.smashingmagazine.com/",
"articles": [
{
"id": "https://smashingmagazine.com/2021/11/touch-design-pre-release/",
"author": "hello@smashingmagazine.com (Vitaly Friedman)",
"description": "Meet “Touch Design for Mobile Interfaces”, our brand-new guide on designing for mobile with proven, universal, human-centric standards. 400 pages. Shipping starting late-December.",
"link": "https://smashingmagazine.com/2021/11/touch-design-pre-release/",
"publishedOn": "2021-11-16T16:00:00.000Z",
"wordCount": 2170,
"title": "Meet Touch Design For Mobile Interfaces, A New Smashing Book By Steven Hoober",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b41ae541-7618-44f2-81cd-cc681c64d0d0/touch-design-for-mobile-interfaces-header.png",
"length": "0",
"type": "image/png"
}
},
{
"id": "https://smashingmagazine.com/2021/11/powerful-terminal-commandline-tools-modern-web-development/",
"author": "hello@smashingmagazine.com (Louis Lazaris)",
"description": "What’s your favorite command-line tool? In this post, Louis Lazaris shares a collection of relevant command-line apps and utilities that he has personally come across in the past few years. If there’s a useful one that hasn’t been mentioned and one you use regularly, please do share it in the comments.",
"link": "https://smashingmagazine.com/2021/11/powerful-terminal-commandline-tools-modern-web-development/",
"publishedOn": "2021-11-15T13:00:00.000Z",
"wordCount": 2140,
"wordCount": 2155,
"title": "Powerful Terminal And Command-Line (CLI) Tools For Modern Web Development",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2d3081a-5a36-4763-9b94-13bf7d1cb5d6/powerful-terminal-commandline-tools-modern-web-development.jpg",
@ -173,7 +187,7 @@
"description": "The React team introduced several hooks in React 16.8 which you can use from third-party providers in your application, or even create your own custom hook. In this tutorial, we’ll take a look at some of the most useful hooks in React and how to use them.",
"link": "https://smashingmagazine.com/2021/11/useful-react-hooks/",
"publishedOn": "2021-11-12T10:00:00.000Z",
"wordCount": 10261,
"wordCount": 10259,
"title": "Useful React Hooks That You Can Use In Your Projects",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ad5f8d5b-6da6-4441-a6f7-466c79e7fb0d/useful-react-hooks.jpg",
@ -187,7 +201,7 @@
"description": "Dribbbleshots just might be the hotbed of questionable dashboards. Striking visuals, little context, and no research: all recipes for mediocrity. Mediocrity won’t do. We’ll pursue greatness. And in that pursuit, we’ll cover research, decluttering, and data visualization.",
"link": "https://smashingmagazine.com/2021/11/dashboard-design-research-decluttering-data-viz/",
"publishedOn": "2021-11-11T14:00:00.000Z",
"wordCount": 4313,
"wordCount": 4305,
"title": "From Good To Great In Dashboard Design: Research, Decluttering And Data Viz",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/835f0cba-e214-437a-a025-e69ba7691997/dashboard-design-research-decluttering-data-viz.jpg",
@ -201,7 +215,7 @@
"description": "Internationalized routing is not exactly a new feature on Next.js. In this article, we are not only checking what we get from this feature, but also how to leverage such functionalities to achieve the best user experience and a smooth developer experience as well.",
"link": "https://smashingmagazine.com/2021/11/localizing-your-nextjs-app/",
"publishedOn": "2021-11-09T13:00:00.000Z",
"wordCount": 1918,
"wordCount": 1916,
"title": "Localizing Your Next.js App",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/12e7620f-0e7b-4b95-a1b6-cd2f25ccac52/localizing-your-nextjs-app.jpg",
@ -229,7 +243,7 @@
"description": "A great commerce experience is not a Lighthouse score or a set of Core Web Vitals figures (although both are important inputs), but it’s also a trilemma that carefully balances competing needs of delivering a great customer experience, dynamic storefront capabilities and long-term business objectives.",
"link": "https://smashingmagazine.com/2021/11/hydrogen-react-framework-dynamic-contextual-personalized-ecommerce/",
"publishedOn": "2021-11-08T14:30:00.000Z",
"wordCount": 1527,
"wordCount": 1538,
"title": "Meet Hydrogen: A React Framework For Dynamic, Contextual And Personalized E-Commerce",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ee33395f-684a-40e5-bf72-56d9e9e4d975/hydrogen-react-framework-dynamic-contextual-personalized-ecommerce.jpg",
@ -243,7 +257,7 @@
"description": "Concept testing ideas before moving into a detailed design is good UX practice. In this article, Victor Yocco presents details on how and when to engage in concept testing, as well as case studies providing details on the insights gained in two very different settings.",
"link": "https://smashingmagazine.com/2021/11/concept-testing-part-of-product-design/",
"publishedOn": "2021-11-05T11:00:00.000Z",
"wordCount": 6198,
"wordCount": 6207,
"title": "The Value Of Concept Testing As Part Of Product Design",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ca39dbc3-101c-4973-9dce-debb1ab283ff/concept-testing-part-of-product-design.jpg",
@ -271,7 +285,7 @@
"description": "Within the last decade, technologies like GraphQL have changed how we build web apps and how they communicate with each other. GraphQL provides certain benefits over REST APIs — let’s find out what they are.",
"link": "https://smashingmagazine.com/2021/11/graphql-frontend-react-apollo/",
"publishedOn": "2021-11-04T11:30:00.000Z",
"wordCount": 3399,
"wordCount": 3398,
"title": "GraphQL On The Front-End (React And Apollo)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb584488-c16f-4409-a992-993ce92d4b51/graphql-frontend-react-apollo.jpg",
@ -285,7 +299,7 @@
"description": "Serverless UI is simply a free, open-source command-line utility for quickly building and deploying serverless applications on the AWS platform. In this article, we will learn and cover everything needed on using Serverless UI to deploy our projects or serverless applications to cloud services providers.",
"link": "https://smashingmagazine.com/2021/11/deep-dive-into-serverless-ui-typescript/",
"publishedOn": "2021-11-03T11:30:00.000Z",
"wordCount": 3627,
"wordCount": 3625,
"title": "A Deep Dive Into Serverless UI With TypeScript",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aff46dfe-164d-4bf7-8e14-057470001b41/deep-dive-into-serverless-ui-typescript.jpg",
@ -299,7 +313,7 @@
"description": "This article sheds the spotlight on Magento PWAs and explains why business owners are getting them (often instead of native applications). Alex Husar introduces ways of how progressive web applications can be developed on Magento, as well as go over the major pros and cons of each development path.",
"link": "https://smashingmagazine.com/2021/11/magento-pwa-customizing-themes-coding/",
"publishedOn": "2021-11-02T12:00:00.000Z",
"wordCount": 5968,
"wordCount": 5965,
"title": "Creating A Magento PWA: Customizing Themes vs. Coding From Scratch",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/77155632-96bd-44a8-af99-50ebad7534e6/magento-pwa-customizing-themes-coding.jpg",
@ -313,7 +327,7 @@
"description": "November is just around the corner, and with it, a new collection of desktop wallpapers to celebrate the beginning of the month. Designed by creatives from all across the globe, they come in versions with and without a calendar. Let’s make November colorful!",
"link": "https://smashingmagazine.com/2021/10/desktop-wallpaper-calendars-november-2021/",
"publishedOn": "2021-10-31T08:20:00.000Z",
"wordCount": 2376,
"wordCount": 2388,
"title": "A Splash Of Color For Misty Days (November 2021 Desktop Wallpapers Edition)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7a2a341f-4f72-4716-91c6-ed6da6add2fd/nov-21-no-shave-november-preview-opt.png",
@ -327,7 +341,7 @@
"description": "Stop wasting time and effort writing copy that falls flat. Raise your copywriting game and boost your powers of persuasion with these rich and informative online resources.",
"link": "https://smashingmagazine.com/2021/10/resources-tools-turbocharge-copywriting-skills/",
"publishedOn": "2021-10-29T10:00:00.000Z",
"wordCount": 2506,
"wordCount": 2519,
"title": "50 Resources And Tools To Turbocharge Your Copywriting Skills",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/376436ee-7e40-4d99-ad14-e934df9f92c9/resources-tools-turbocharge-copywriting-skills.jpg",
@ -341,7 +355,7 @@
"description": "The wealth of data that Amazon holds can make a huge difference when you’re designing a product or hunting for a bargain. But, how can a developer get that data? Simple, by using a web scraper. Here’s how to build your data extraction bot with Node.js.",
"link": "https://smashingmagazine.com/2021/10/building-amazon-product-scraper-nodejs/",
"publishedOn": "2021-10-28T11:00:00.000Z",
"wordCount": 3163,
"wordCount": 3161,
"title": "How To Build An Amazon Product Scraper With Node.js",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/069a1796-0f8d-4936-bfc0-4aa988ef0594/building-amazon-product-scraper-nodejs.jpg",
@ -355,7 +369,7 @@
"description": "Thanks to technology, eye-tracking has become more accessible to UX research as it allows researchers to get insights about users ’visual attention. This article explores the latest trends in the eye-tracking market and how the methodology can be included in the UX researcher’s toolbox.",
"link": "https://smashingmagazine.com/2021/10/eye-tracking-mobile-ux-research/",
"publishedOn": "2021-10-27T10:00:00.000Z",
"wordCount": 3505,
"wordCount": 3504,
"title": "Eye-Tracking In Mobile UX Research",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3012986b-e407-4c49-8186-13a99528ef13/eye-tracking-mobile-ux-research.jpg",
@ -369,7 +383,7 @@
"description": "Nx is a build framework that facilitates optimization, efficient scaling of applications, and other features such as shared libraries and components. In this article, we will be looking at how we can effectively scale Next.js applications by using Nx.",
"link": "https://smashingmagazine.com/2021/10/optimizing-nextjs-applications-nx/",
"publishedOn": "2021-10-26T10:00:00.000Z",
"wordCount": 3035,
"wordCount": 3027,
"title": "Optimizing Next.js Applications With Nx",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/32b5517f-415c-43ed-98a6-70215d408f7a/optimizing-nextjs-applications-nx.jpg",
@ -383,7 +397,7 @@
"description": "In this article, we will go through how `object-fit` and `background-size` work, when we can use them, and why, along with some practical use cases and recommendations. Let’s dive in.",
"link": "https://smashingmagazine.com/2021/10/object-fit-background-size-css/",
"publishedOn": "2021-10-25T13:00:00.000Z",
"wordCount": 2033,
"wordCount": 2036,
"title": "A Deep Dive Into object-fit And background-size In CSS",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/19e7f717-46d5-4949-96f4-671f4744d0e1/object-fit-background-size-css.jpg",
@ -397,7 +411,7 @@
"description": "Quasar is an open-source Vue.js-based cross-platform framework that allows you, as a developer, to easily build apps for both desktop and mobile using technologies such as Cordova and Electron and writing your code once. The app we’ll build will store and get its data from Firebase, meaning that we will also be seeing how to use Firebase in Quasar.",
"link": "https://smashingmagazine.com/2021/10/introduction-quasar-framework-cross-platform-applications/",
"publishedOn": "2021-10-23T11:00:00.000Z",
"wordCount": 4914,
"wordCount": 4911,
"title": "An Introduction To Quasar Framework: Building Cross-Platform Applications",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e64d5e62-7c13-430a-90c6-f21b1c0325fe/introduction-quasar-framework-cross-platform-applications.jpg",
@ -411,7 +425,7 @@
"description": "This article highlights the process, technical decisions and lessons learned behind building the real-time game Autowuzzler. Learn how to share game state across multiple clients in real-time with Colyseus, do physics calculations with Matter.js, store data in Supabase.io and build the front-end with SvelteKit.",
"link": "https://smashingmagazine.com/2021/10/real-time-multi-user-game/",
"publishedOn": "2021-10-22T09:30:00.000Z",
"wordCount": 4628,
"wordCount": 4626,
"title": "How To Build A Real-Time Multi-User Game From Scratch",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f27da7cf-e0e3-4ed4-a845-6fd61fdb0e70/real-time-multi-user-game.jpg",
@ -425,7 +439,7 @@
"description": "The `prefers-reduced-motion` media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why there’s no reason not to use it today to make your sites more accessible.",
"link": "https://smashingmagazine.com/2021/10/respecting-users-motion-preferences/",
"publishedOn": "2021-10-21T10:30:00.000Z",
"wordCount": 2878,
"wordCount": 2881,
"title": "Respecting Users’ Motion Preferences",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/df53065e-5b99-4a67-ad0c-2cd67b07dc2a/respecting-users-motion-preferences.jpg",
@ -439,7 +453,7 @@
"description": "Back in January 2020, Ben Holmes set out to do what just about every web developer does each year: rebuild his personal site. In this article, he shares his story of how he set out to build his own build pipeline from absolute ground zero and created “Slinkity”.",
"link": "https://smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/",
"publishedOn": "2021-10-20T11:00:00.000Z",
"wordCount": 5037,
"wordCount": 5054,
"title": "Building The SSG I’ve Always Wanted: An 11ty, Vite And JAM Sandwich",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1ff6275f-bf33-480f-bdd4-690e94f96314/building-ssg-11ty-vite-jam-sandwich.jpg",
@ -453,7 +467,7 @@
"description": "In this tutorial, Paul Scanlon explains how to build an API by using Gatsby Functions and what you need to keep in mind when deploying it to Gatsby Cloud.",
"link": "https://smashingmagazine.com/2021/10/building-api-gatsby-functions/",
"publishedOn": "2021-10-19T14:00:00.000Z",
"wordCount": 2531,
"wordCount": 2534,
"title": "Building An API With Gatsby Functions",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/110c2aa7-7744-48d6-a234-9e67e903cbe5/building-api-gatsby-functions.jpg",
@ -481,7 +495,7 @@
"description": "Cumulative Layout Shift is one of the hardest core web vital to debug. In this article, we go through different tools to investigate CLS, when to use them(and when not), and solutions to some of the CLS issues we faced in our Next.js-based e-commerce website.",
"link": "https://smashingmagazine.com/2021/10/nextjs-ecommerce-cls-case-study/",
"publishedOn": "2021-10-18T14:00:00.000Z",
"wordCount": 2140,
"wordCount": 2126,
"title": "Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e522651-eaf2-45e7-a544-9da7beb7b23e/nextjs-ecommerce-cls-case-study.jpg",
@ -496,6 +510,60 @@
"feedUrl": "https://www.freecodecamp.org/news/rss/",
"siteUrl": "https://www.freecodecamp.org/news",
"articles": [
{
"id": "618f31ff11d3cb08287a562a",
"author": null,
"description": "In the words of RealToughCandy, everyone wants a \"one-stop shop\" when it comes to learning. She uses this term to describe Educative.io, but Educative.io costs $60 a month unless you choose to commit to its annual plan. So it's not a free resource, which means it's not available",
"link": "https://www.freecodecamp.org/news/coding-interview-preparation/",
"publishedOn": "2021-11-16T23:50:43.000Z",
"wordCount": 1907,
"title": "Coding Interview Prep – Free Resources to Help You Ace Your Interviews"
},
{
"id": "618216468bcfae07ca4e073f",
"author": null,
"description": "A mailto link allows users to send emails straight from a website using the user's default email client. But how do you create a mailto link in HTML? In this article, I will walk you through how to create a mailto link in HTML using example code. Basic mailto link",
"link": "https://www.freecodecamp.org/news/mailto-link-how-to-make-an-html-email-link-example-code/",
"publishedOn": "2021-11-16T22:58:22.000Z",
"wordCount": 709,
"title": "Mailto Link – How to Make an HTML Email Link [Example Code]"
},
{
"id": "618d64b411d3cb08287a49e3",
"author": null,
"description": "Every single computing device has a CPU. You may have heard of this tech term before, but what is it exactly? What is a CPU and how does it work? In this beginner-friendly article you'll learn the basics on what a CPU actually is, and I'l give you an overview",
"link": "https://www.freecodecamp.org/news/what-is-cpu-meaning-definition-and-what-cpu-stands-for/",
"publishedOn": "2021-11-16T22:53:22.000Z",
"wordCount": 1382,
"title": "What is CPU? Meaning, Definition, and What CPU Stands For"
},
{
"id": "618211678bcfae07ca4e072b",
"author": null,
"description": "If you are interested in creating a website that requires no coding at all, then you can use a free website builder. In this article, I will provide you with a list of four free website builders you can choose from when creating your websites. Here is the complete list.",
"link": "https://www.freecodecamp.org/news/how-to-create-a-website-free-of-cost-website-builder-platform-guide/",
"publishedOn": "2021-11-16T15:53:09.000Z",
"wordCount": 897,
"title": "How to Create a Website Free of Cost – Website Builder Platform Guide"
},
{
"id": "6190f90f11d3cb08287a5fb1",
"author": null,
"description": "React Todo applications are generally very basic – in fact, they're a great exercise if you're a React beginner and want to work on building up your skills. But have you ever built a Todo application where a user can add todos using voice commands? This makes it a bit more",
"link": "https://www.freecodecamp.org/news/build-a-voice-based-weather-application-using-react-and-alan-ai/",
"publishedOn": "2021-11-16T15:32:00.000Z",
"wordCount": 3106,
"title": "How to Build a Voice-Based Todo App using React, Firebase, and Alan AI"
},
{
"id": "615a6c014aa03507d94125a3",
"author": null,
"description": "What is Infrastructure as Code? In this article you will learn all about Infrastructure as Code. I will start with an overview of the general concepts, and then I will show you how to implement Infrastructure as Code with three different labs. The labs use Python and AWS but the",
"link": "https://www.freecodecamp.org/news/what-is-infrastructure-as-code/",
"publishedOn": "2021-11-16T15:02:13.000Z",
"wordCount": 6827,
"title": "Infrastructure as Code - Full Course"
},
{
"id": "619140bc11d3cb08287a60d4",
"author": null,
@ -505,6 +573,15 @@
"wordCount": 1438,
"title": "How to Use Props in React"
},
{
"id": "6194240311d3cb08287a7709",
"author": null,
"description": "Plugins for applications are commonly written in C++ and writing a plugin program can be a great way to improve your programming skills. We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use modern C++ to code a 3-Band Compressor with Spectrum",
"link": "https://www.freecodecamp.org/news/improve-your-cpp-skills-by-building-an-audio-plugin/",
"publishedOn": "2021-11-15T21:47:00.000Z",
"wordCount": 455,
"title": "Improve Your C++ Skills by Building an Audio Plugin (3-Band Compressor)"
},
{
"id": "618216148bcfae07ca4e072f",
"author": null,
@ -522,69 +599,6 @@
"publishedOn": "2021-11-15T20:37:30.000Z",
"wordCount": 935,
"title": "External Hard Drive Not Showing Up? Disk Management in Windows 10 Tutorial"
},
{
"id": "6171abc8d48e1707b6d79990",
"author": null,
"description": "Let's say you need to completely restructure the directories of your codebase. You need to move some folders higher, move some other folders lower, and move lots of files into some new folders you're going to create. You start shifting the code around, checking that everything works, and adding some",
"link": "https://www.freecodecamp.org/news/what-is-gitkeep/",
"publishedOn": "2021-11-15T18:07:41.000Z",
"wordCount": 613,
"title": "What is .gitkeep? How to Track and Push Empty Folders in Git"
},
{
"id": "6190f0c811d3cb08287a5f96",
"author": null,
"description": "For the freeCodeCamp Back End Development and APIs certification, you can do all of the challenges locally and submit the local server link. But how does that work exactly? In this article, I will walk you through step by step how to setup the backend challenges on your local computer",
"link": "https://www.freecodecamp.org/news/how-to-run-the-freecodecamp-backend-challenges-locally/",
"publishedOn": "2021-11-15T17:31:48.000Z",
"wordCount": 629,
"title": "How to Run the freeCodeCamp Backend Challenges Locally"
},
{
"id": "61870b688bcfae07ca4e31f5",
"author": null,
"description": "If you're relatively new to coding, you surely have some questions – how should you get started, what should you learn first, what does \"front-end development\" really mean...? In this article, I've shared 7 questions I had when I first started learning to code about 20 years ago (man, now I",
"link": "https://www.freecodecamp.org/news/questions-new-developers-ask-when-learning-how-to-code/",
"publishedOn": "2021-11-15T17:14:32.000Z",
"wordCount": 3063,
"title": "7 Questions New Developers Ask When Learning How to Code"
},
{
"id": "618e548011d3cb08287a4e09",
"author": null,
"description": "If you're building an Android app, you should consider adding animations. They can improve your app's user experience and increase retention. These days, if you see an app that has no animation, it can feel odd and out-dated. And since interactive experiences are kind of the new norm, you'll want",
"link": "https://www.freecodecamp.org/news/add-swipe-animations-to-a-card-view-in-android-app/",
"publishedOn": "2021-11-15T16:09:53.000Z",
"wordCount": 2558,
"title": "How to Add Swipe Animations to a CardView in an Android App"
},
{
"id": "618deac811d3cb08287a4ba3",
"author": null,
"description": "We are often in a hurry to commit our changes in Git and so we write something random in our commit messages. In fact, I have seen people putting the date and time or even something like commit 1, commit 2 in their messages. This is not a good practice,",
"link": "https://www.freecodecamp.org/news/how-to-use-commitlint-to-write-good-commit-messages/",
"publishedOn": "2021-11-12T20:11:06.000Z",
"wordCount": 1917,
"title": "How to Write Good Commit Messages with Commitlint"
},
{
"id": "618e136011d3cb08287a4c71",
"author": null,
"description": "When you're using your Windows machine, your WiFi might unexpectedly disconnect. This might be caused by various problems such as an outdated network adapter driver, outdated router software, and optimized power management in Windows 10. If your WiFi keeps disconnecting and you're looking for a solution, you've come to the",
"link": "https://www.freecodecamp.org/news/why-does-my-wifi-keep-disconnecting-solved-on-windows-10-pc/",
"publishedOn": "2021-11-12T17:47:24.000Z",
"wordCount": 635,
"title": "Why Does my WiFi Keep Disconnecting? [Solved on Windows 10 PC]"
},
{
"id": "618b035411d3cb08287a3f7d",
"author": null,
"description": "Hey, how are you doing? In this article, I'm going to show you how you can install Laravel 8 on your phone. To get the most out of this guide, you should have some knowledge of PHP and you should know what Laravel is. But if you don't, don't worry",
"link": "https://www.freecodecamp.org/news/how-to-setup-laravel-8-on-android-phone/",
"publishedOn": "2021-11-11T16:34:04.000Z",
"wordCount": 946,
"title": "How to Set Up Laravel 8 on Your Android Phone"
}
]
}

243
feed.atom
View file

@ -1,10 +1,124 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>urn:2021-11-16T00:42:31.955Z</id>
<id>urn:2021-11-17T00:42:07.370Z</id>
<title>osmos::feed</title>
<updated>2021-11-16T00:42:31.955Z</updated>
<updated>2021-11-17T00:42:07.370Z</updated>
<generator>osmosfeed 1.11.3</generator>
<link rel="alternate" href="index.html"/>
<entry>
<title type="html"><![CDATA[Coding Interview Prep – Free Resources to Help You Ace Your Interviews]]></title>
<id>618f31ff11d3cb08287a562a</id>
<link href="https://www.freecodecamp.org/news/coding-interview-preparation/"/>
<updated>2021-11-16T23:50:43.000Z</updated>
<summary type="html"><![CDATA[In the words of RealToughCandy, everyone wants a "one-stop shop" when it comes to learning. She uses this term to describe Educative.io, but Educative.io costs $60 a month unless you choose to commit to its annual plan. So it's not a free resource, which means it's not available]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Mailto Link – How to Make an HTML Email Link [Example Code]]]></title>
<id>618216468bcfae07ca4e073f</id>
<link href="https://www.freecodecamp.org/news/mailto-link-how-to-make-an-html-email-link-example-code/"/>
<updated>2021-11-16T22:58:22.000Z</updated>
<summary type="html"><![CDATA[A mailto link allows users to send emails straight from a website using the user's default email client. But how do you create a mailto link in HTML? In this article, I will walk you through how to create a mailto link in HTML using example code. Basic mailto link]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What is CPU? Meaning, Definition, and What CPU Stands For]]></title>
<id>618d64b411d3cb08287a49e3</id>
<link href="https://www.freecodecamp.org/news/what-is-cpu-meaning-definition-and-what-cpu-stands-for/"/>
<updated>2021-11-16T22:53:22.000Z</updated>
<summary type="html"><![CDATA[Every single computing device has a CPU. You may have heard of this tech term before, but what is it exactly? What is a CPU and how does it work? In this beginner-friendly article you'll learn the basics on what a CPU actually is, and I'l give you an overview]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Line length revisited: following the research]]></title>
<id>https://css-tricks.com/?p=356849</id>
<link href="https://css-tricks.com/line-length-revisited-following-the-research/"/>
<updated>2021-11-16T21:35:39.000Z</updated>
<summary type="html"><![CDATA[Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that shorter lines do not necessarily lead to faster reading. If you’re looking for a definitive answer …
The post Line length revisited: following the research appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Geoff Graham</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Meet Touch Design For Mobile Interfaces, A New Smashing Book By Steven Hoober]]></title>
<id>https://smashingmagazine.com/2021/11/touch-design-pre-release/</id>
<link href="https://smashingmagazine.com/2021/11/touch-design-pre-release/"/>
<updated>2021-11-16T16:00:00.000Z</updated>
<summary type="html"><![CDATA[Meet “Touch Design for Mobile Interfaces”, our brand-new guide on designing for mobile with proven, universal, human-centric standards. 400 pages. Shipping starting late-December.]]></summary>
<author>
<name>hello@smashingmagazine.com (Vitaly Friedman)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Create a Website Free of Cost – Website Builder Platform Guide]]></title>
<id>618211678bcfae07ca4e072b</id>
<link href="https://www.freecodecamp.org/news/how-to-create-a-website-free-of-cost-website-builder-platform-guide/"/>
<updated>2021-11-16T15:53:09.000Z</updated>
<summary type="html"><![CDATA[If you are interested in creating a website that requires no coding at all, then you can use a free website builder. In this article, I will provide you with a list of four free website builders you can choose from when creating your websites. Here is the complete list.]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Generate a Pull Request of Static Content With a Simple HTML Form]]></title>
<id>https://css-tricks.com/?p=356491</id>
<link href="https://css-tricks.com/generate-a-pull-request-of-static-content-with-a-simple-html-form/"/>
<updated>2021-11-16T15:37:50.000Z</updated>
<summary type="html"><![CDATA[Jamstack has been in the website world for years. Static Site Generators (SSGs) — which often have content that lives right within a GitHub repo itself — are a big part of that story. That opens up the idea of …
The post Generate a Pull Request of Static Content With a Simple HTML Form appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Hilman Ramadhan</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Jamstack TV]]></title>
<id>https://css-tricks.com/?p=356805</id>
<link href="https://css-tricks.com/jamstack-tv/"/>
<updated>2021-11-16T15:35:36.000Z</updated>
<summary type="html"><![CDATA[That’s the name of Netlify’s YouTube Channel. Love that. I linked up Rich’s talk the other day, which was a part of this past JamstackConf, but now all the talks are up on there. Rich got to talk …
The post Jamstack TV appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Build a Voice-Based Todo App using React, Firebase, and Alan AI]]></title>
<id>6190f90f11d3cb08287a5fb1</id>
<link href="https://www.freecodecamp.org/news/build-a-voice-based-weather-application-using-react-and-alan-ai/"/>
<updated>2021-11-16T15:32:00.000Z</updated>
<summary type="html"><![CDATA[React Todo applications are generally very basic – in fact, they're a great exercise if you're a React beginner and want to work on building up your skills. But have you ever built a Todo application where a user can add todos using voice commands? This makes it a bit more]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Infrastructure as Code - Full Course]]></title>
<id>615a6c014aa03507d94125a3</id>
<link href="https://www.freecodecamp.org/news/what-is-infrastructure-as-code/"/>
<updated>2021-11-16T15:02:13.000Z</updated>
<summary type="html"><![CDATA[What is Infrastructure as Code? In this article you will learn all about Infrastructure as Code. I will start with an overview of the general concepts, and then I will show you how to implement Infrastructure as Code with three different labs. The labs use Python and AWS but the]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Color Alpha Anywhere]]></title>
<id>https://css-tricks.com/?p=356611</id>
<link href="https://css-tricks.com/color-alpha-anywhere/"/>
<updated>2021-11-16T01:03:32.000Z</updated>
<summary type="html"><![CDATA[In my “Different Degrees of Custom Property Usage” article, I noted a situation about colors and CSS custom properties where I went “too far” with breaking up HSL color values. Breaking every single color into its H, S, and L parts …
The post Color Alpha Anywhere appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Use Props in React]]></title>
<id>619140bc11d3cb08287a60d4</id>
@ -15,6 +129,16 @@
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Improve Your C++ Skills by Building an Audio Plugin (3-Band Compressor)]]></title>
<id>6194240311d3cb08287a7709</id>
<link href="https://www.freecodecamp.org/news/improve-your-cpp-skills-by-building-an-audio-plugin/"/>
<updated>2021-11-15T21:47:00.000Z</updated>
<summary type="html"><![CDATA[Plugins for applications are commonly written in C++ and writing a plugin program can be a great way to improve your programming skills. We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use modern C++ to code a 3-Band Compressor with Spectrum]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What is IPTV? IPTV Service Guide]]></title>
<id>618216148bcfae07ca4e072f</id>
@ -35,46 +159,6 @@
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What is .gitkeep? How to Track and Push Empty Folders in Git]]></title>
<id>6171abc8d48e1707b6d79990</id>
<link href="https://www.freecodecamp.org/news/what-is-gitkeep/"/>
<updated>2021-11-15T18:07:41.000Z</updated>
<summary type="html"><![CDATA[Let's say you need to completely restructure the directories of your codebase. You need to move some folders higher, move some other folders lower, and move lots of files into some new folders you're going to create. You start shifting the code around, checking that everything works, and adding some]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Run the freeCodeCamp Backend Challenges Locally]]></title>
<id>6190f0c811d3cb08287a5f96</id>
<link href="https://www.freecodecamp.org/news/how-to-run-the-freecodecamp-backend-challenges-locally/"/>
<updated>2021-11-15T17:31:48.000Z</updated>
<summary type="html"><![CDATA[For the freeCodeCamp Back End Development and APIs certification, you can do all of the challenges locally and submit the local server link. But how does that work exactly? In this article, I will walk you through step by step how to setup the backend challenges on your local computer]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[7 Questions New Developers Ask When Learning How to Code]]></title>
<id>61870b688bcfae07ca4e31f5</id>
<link href="https://www.freecodecamp.org/news/questions-new-developers-ask-when-learning-how-to-code/"/>
<updated>2021-11-15T17:14:32.000Z</updated>
<summary type="html"><![CDATA[If you're relatively new to coding, you surely have some questions – how should you get started, what should you learn first, what does "front-end development" really mean...? In this article, I've shared 7 questions I had when I first started learning to code about 20 years ago (man, now I]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Add Swipe Animations to a CardView in an Android App]]></title>
<id>618e548011d3cb08287a4e09</id>
<link href="https://www.freecodecamp.org/news/add-swipe-animations-to-a-card-view-in-android-app/"/>
<updated>2021-11-15T16:09:53.000Z</updated>
<summary type="html"><![CDATA[If you're building an Android app, you should consider adding animations. They can improve your app's user experience and increase retention. These days, if you see an app that has no animation, it can feel odd and out-dated. And since interactive experiences are kind of the new norm, you'll want]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library]]></title>
<id>https://css-tricks.com/?p=355894</id>
@ -107,26 +191,6 @@ The post Other Looks at the Conditional Border Radius Trick appeared first on CS
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Write Good Commit Messages with Commitlint]]></title>
<id>618deac811d3cb08287a4ba3</id>
<link href="https://www.freecodecamp.org/news/how-to-use-commitlint-to-write-good-commit-messages/"/>
<updated>2021-11-12T20:11:06.000Z</updated>
<summary type="html"><![CDATA[We are often in a hurry to commit our changes in Git and so we write something random in our commit messages. In fact, I have seen people putting the date and time or even something like commit 1, commit 2 in their messages. This is not a good practice,]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Why Does my WiFi Keep Disconnecting? [Solved on Windows 10 PC]]]></title>
<id>618e136011d3cb08287a4c71</id>
<link href="https://www.freecodecamp.org/news/why-does-my-wifi-keep-disconnecting-solved-on-windows-10-pc/"/>
<updated>2021-11-12T17:47:24.000Z</updated>
<summary type="html"><![CDATA[When you're using your Windows machine, your WiFi might unexpectedly disconnect. This might be caused by various problems such as an outdated network adapter driver, outdated router software, and optimized power management in Windows 10. If your WiFi keeps disconnecting and you're looking for a solution, you've come to the]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Interactive Rebase: Clean up your Commit History]]></title>
<id>https://css-tricks.com/?p=355658</id>
@ -159,16 +223,6 @@ The post Semantic menu context appeared first on CSS-Tricks. You can support CSS
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Set Up Laravel 8 on Your Android Phone]]></title>
<id>618b035411d3cb08287a3f7d</id>
<link href="https://www.freecodecamp.org/news/how-to-setup-laravel-8-on-android-phone/"/>
<updated>2021-11-11T16:34:04.000Z</updated>
<summary type="html"><![CDATA[Hey, how are you doing? In this article, I'm going to show you how you can install Laravel 8 on your phone. To get the most out of this guide, you should have some knowledge of PHP and you should know what Laravel is. But if you don't, don't worry]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Easy Dark Mode (and Multiple Color Themes!) in React]]></title>
<id>https://css-tricks.com/?p=355683</id>
@ -263,17 +317,6 @@ The post VideoPress for WordPress appeared first on CSS-Tricks. You can support
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[React Suspense: Lessons Learned While Loading Data]]></title>
<id>https://css-tricks.com/?p=356187</id>
<link href="https://css-tricks.com/react-suspense-lessons-learned-while-loading-data/"/>
<updated>2021-11-09T15:20:10.000Z</updated>
<summary type="html"><![CDATA[Suspense is React’s forthcoming feature that helps coordinate asynchronous actions—like data loading—allowing you to easily prevent inconsistent state in your UI. I’ll provide a better explanation of what exactly that means, along with a quick introduction of Suspense, and then …
The post React Suspense: Lessons Learned While Loading Data appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Adam Rackis</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Localizing Your Next.js App]]></title>
<id>https://smashingmagazine.com/2021/11/localizing-your-nextjs-app/</id>
@ -294,40 +337,6 @@ The post React Suspense: Lessons Learned While Loading Data appeared first on CS
<name>hello@smashingmagazine.com (Leonardo Losoviz)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[CSS Grid Can Do Auto Height Transitions]]></title>
<id>https://css-tricks.com/?p=356204</id>
<link href="https://css-tricks.com/css-grid-can-do-auto-height-transitions/"/>
<updated>2021-11-08T19:01:31.000Z</updated>
<summary type="html"><![CDATA[Bonafide CSS trick alert! Nelson Menezes figured out a new way (that only works in Firefox for now) that is awfully clever.
Perhaps you know that CSS cannot animate to auto dimensions, which is super unfortunate. Animating from …
The post CSS Grid Can Do Auto Height Transitions appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Icon Glassmorphism Effect in CSS]]></title>
<id>https://css-tricks.com/?p=322098</id>
<link href="https://css-tricks.com/icon-glassmorphism-effect-in-css/"/>
<updated>2021-11-08T14:57:42.000Z</updated>
<summary type="html"><![CDATA[I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time …
The post Icon Glassmorphism Effect in CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Ana Tudor</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Does the Next Generation of Static Site Generators Make Building Sites Better?]]></title>
<id>https://css-tricks.com/?p=356134</id>
<link href="https://css-tricks.com/does-the-next-generation-of-static-site-generators-make-building-sites-better/"/>
<updated>2021-11-08T14:56:23.000Z</updated>
<summary type="html"><![CDATA[Just ran across îles, a new static site generator mostly centered around Vue. The world has no particular shortage of static site generators, but it’s interesting to see what this “next generation” of SSGs seem to focus on or …
The post Does the Next Generation of Static Site Generators Make Building Sites Better? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Meet Hydrogen: A React Framework For Dynamic, Contextual And Personalized E-Commerce]]></title>
<id>https://smashingmagazine.com/2021/11/hydrogen-react-framework-dynamic-contextual-personalized-ecommerce/</id>

307
index.html
View file

@ -15,6 +15,154 @@
<body>
<!-- %after-body-begin.html% -->
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-11-16">2021-11-16</time></h2>
<ul class="sources card">
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">Line length revisited: following the research</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/line-length-revisited-following-the-research/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that shorter lines do not necessarily lead to faster reading. If you’re looking for a definitive answer …
The post Line length revisited: following the research appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Generate a Pull Request of Static Content With a Simple HTML Form</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/generate-a-pull-request-of-static-content-with-a-simple-html-form/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(6 min)</span>
<span>Jamstack has been in the website world for years. Static Site Generators (SSGs) — which often have content that lives right within a GitHub repo itself — are a big part of that story. That opens up the idea of …
The post Generate a Pull Request of Static Content With a Simple HTML Form appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Jamstack TV</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/jamstack-tv/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(1 min)</span>
<span>That’s the name of Netlify’s YouTube Channel. Love that. I linked up Rich’s talk the other day, which was a part of this past JamstackConf, but now all the talks are up on there. Rich got to talk …
The post Jamstack TV appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Color Alpha Anywhere</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/color-alpha-anywhere/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>In my “Different Degrees of Custom Property Usage” article, I noted a situation about colors and CSS custom properties where I went “too far” with breaking up HSL color values. Breaking every single color into its H, S, and L parts …
The post Color Alpha Anywhere appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">Coding Interview Prep – Free Resources to Help You Ace Your Interviews</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/coding-interview-preparation/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(6 min)</span>
<span>In the words of RealToughCandy, everyone wants a &quot;one-stop shop&quot; when it comes to learning. She uses this term to describe Educative.io, but Educative.io costs $60 a month unless you choose to commit to its annual plan. So it&#x27;s not a free resource, which means it&#x27;s not available</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Mailto Link – How to Make an HTML Email Link [Example Code]</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/mailto-link-how-to-make-an-html-email-link-example-code/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>A mailto link allows users to send emails straight from a website using the user&#x27;s default email client. But how do you create a mailto link in HTML? In this article, I will walk you through how to create a mailto link in HTML using example code. Basic mailto link</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">What is CPU? Meaning, Definition, and What CPU Stands For</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-cpu-meaning-definition-and-what-cpu-stands-for/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>Every single computing device has a CPU. You may have heard of this tech term before, but what is it exactly? What is a CPU and how does it work? In this beginner-friendly article you&#x27;ll learn the basics on what a CPU actually is, and I&#x27;l give you an overview</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Create a Website Free of Cost – Website Builder Platform Guide</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-create-a-website-free-of-cost-website-builder-platform-guide/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>If you are interested in creating a website that requires no coding at all, then you can use a free website builder. In this article, I will provide you with a list of four free website builders you can choose from when creating your websites. Here is the complete list.</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Build a Voice-Based Todo App using React, Firebase, and Alan AI</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/build-a-voice-based-weather-application-using-react-and-alan-ai/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(10 min)</span>
<span>React Todo applications are generally very basic – in fact, they&#x27;re a great exercise if you&#x27;re a React beginner and want to work on building up your skills. But have you ever built a Todo application where a user can add todos using voice commands? This makes it a bit more</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Infrastructure as Code - Full Course</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-infrastructure-as-code/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(23 min)</span>
<span>What is Infrastructure as Code? In this article you will learn all about Infrastructure as Code. I will start with an overview of the general concepts, and then I will show you how to implement Infrastructure as Code with three different labs. The labs use Python and AWS but the</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">Meet Touch Design For Mobile Interfaces, A New Smashing Book By Steven Hoober</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/11/touch-design-pre-release/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(7 min)</span>
<span>Meet “Touch Design for Mobile Interfaces”, our brand-new guide on designing for mobile with proven, universal, human-centric standards. 400 pages. Shipping starting late-December.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-11-15">2021-11-15</time></h2>
<ul class="sources card">
@ -51,6 +199,17 @@ The post Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library appe
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Improve Your C++ Skills by Building an Audio Plugin (3-Band Compressor)</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/improve-your-cpp-skills-by-building-an-audio-plugin/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Plugins for applications are commonly written in C++ and writing a plugin program can be a great way to improve your programming skills. We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use modern C++ to code a 3-Band Compressor with Spectrum</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">What is IPTV? IPTV Service Guide</summary>
@ -73,50 +232,6 @@ The post Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library appe
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">What is .gitkeep? How to Track and Push Empty Folders in Git</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-gitkeep/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Let&#x27;s say you need to completely restructure the directories of your codebase. You need to move some folders higher, move some other folders lower, and move lots of files into some new folders you&#x27;re going to create. You start shifting the code around, checking that everything works, and adding some</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Run the freeCodeCamp Backend Challenges Locally</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-run-the-freecodecamp-backend-challenges-locally/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>For the freeCodeCamp Back End Development and APIs certification, you can do all of the challenges locally and submit the local server link. But how does that work exactly? In this article, I will walk you through step by step how to setup the backend challenges on your local computer</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">7 Questions New Developers Ask When Learning How to Code</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/questions-new-developers-ask-when-learning-how-to-code/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(10 min)</span>
<span>If you&#x27;re relatively new to coding, you surely have some questions – how should you get started, what should you learn first, what does &quot;front-end development&quot; really mean...? In this article, I&#x27;ve shared 7 questions I had when I first started learning to code about 20 years ago (man, now I</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Add Swipe Animations to a CardView in an Android App</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/add-swipe-animations-to-a-card-view-in-android-app/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(9 min)</span>
<span>If you&#x27;re building an Android app, you should consider adding animations. They can improve your app&#x27;s user experience and increase retention. These days, if you see an app that has no animation, it can feel odd and out-dated. And since interactive experiences are kind of the new norm, you&#x27;ll want</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
@ -150,7 +265,7 @@ The post Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library appe
<summary class="article-expander__title">Other Looks at the Conditional Border Radius Trick</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/other-looks-at-the-conditional-border-radius-trick/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span class="article-reading-time">(4 min)</span>
<span>Remember when Ahmad Shadeed wrote about that border-radius “toggle” he found in Facebook’s CSS? It was interesting! I covered it. A few weeks after that surge of linkage, a couple of articles came out digging into it a little deeper. …
The post Other Looks at the Conditional Border Radius Trick appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
@ -171,34 +286,6 @@ The post Interactive Rebase: Clean up your Commit History appeared first on CSS-
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Write Good Commit Messages with Commitlint</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-use-commitlint-to-write-good-commit-messages/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(6 min)</span>
<span>We are often in a hurry to commit our changes in Git and so we write something random in our commit messages. In fact, I have seen people putting the date and time or even something like commit 1, commit 2 in their messages. This is not a good practice,</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Why Does my WiFi Keep Disconnecting? [Solved on Windows 10 PC]</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/why-does-my-wifi-keep-disconnecting-solved-on-windows-10-pc/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>When you&#x27;re using your Windows machine, your WiFi might unexpectedly disconnect. This might be caused by various problems such as an outdated network adapter driver, outdated router software, and optimized power management in Windows 10. If your WiFi keeps disconnecting and you&#x27;re looking for a solution, you&#x27;ve come to the</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
@ -265,23 +352,6 @@ The post Quickly Get Alerted to Front-End Errors and Performance Issues appeared
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Set Up Laravel 8 on Your Android Phone</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-setup-laravel-8-on-android-phone/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>Hey, how are you doing? In this article, I&#x27;m going to show you how you can install Laravel 8 on your phone. To get the most out of this guide, you should have some knowledge of PHP and you should know what Laravel is. But if you don&#x27;t, don&#x27;t worry</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
@ -384,18 +454,6 @@ The post VideoPress for WordPress appeared first on CSS-Tricks. You can support
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">React Suspense: Lessons Learned While Loading Data</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/react-suspense-lessons-learned-while-loading-data/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(8 min)</span>
<span>Suspense is React’s forthcoming feature that helps coordinate asynchronous actions—like data loading—allowing you to easily prevent inconsistent state in your UI. I’ll provide a better explanation of what exactly that means, along with a quick introduction of Suspense, and then …
The post React Suspense: Lessons Learned While Loading Data appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
@ -431,49 +489,6 @@ The post React Suspense: Lessons Learned While Loading Data appeared first on CS
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-11-08">2021-11-08</time></h2>
<ul class="sources card">
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">CSS Grid Can Do Auto Height Transitions</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/css-grid-can-do-auto-height-transitions/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Bonafide CSS trick alert! Nelson Menezes figured out a new way (that only works in Firefox for now) that is awfully clever.
Perhaps you know that CSS cannot animate to auto dimensions, which is super unfortunate. Animating from …
The post CSS Grid Can Do Auto Height Transitions appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Icon Glassmorphism Effect in CSS</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/icon-glassmorphism-effect-in-css/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(27 min)</span>
<span>I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time …
The post Icon Glassmorphism Effect in CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Does the Next Generation of Static Site Generators Make Building Sites Better?</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/does-the-next-generation-of-static-site-generators-make-building-sites-better/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>Just ran across îles, a new static site generator mostly centered around Vue. The world has no particular shortage of static site generators, but it’s interesting to see what this “next generation” of SSGs seem to focus on or …
The post Does the Next Generation of Static Site Generators Make Building Sites Better? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
@ -869,7 +884,7 @@ The post Does the Next Generation of Static Site Generators Make Building Sites
</section>
<footer>
<time id="build-timestamp" datetime="2021-11-16T00:42:31.929Z">2021-11-16T00:42:31.929Z</time>
<time id="build-timestamp" datetime="2021-11-17T00:42:07.351Z">2021-11-17T00:42:07.351Z</time>
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.11.3</a></span>
</footer>
<script src="index.js"></script>