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-18 00:42:59 +00:00
parent 0d7effb422
commit 97dbb1dc56
3 changed files with 423 additions and 448 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

264
cache.json
View file

@ -11,13 +11,58 @@
"feedUrl": "https://css-tricks.com/feed/",
"siteUrl": "https://css-tricks.com",
"articles": [
{
"id": "https://css-tricks.com/?p=356895",
"author": "Chris Coyier",
"description": "I feel like half of all “custom-designed radio buttons and checkboxes” do two things:\nMake them bigger\nColorize them\nI always think of SurveyMonkey for having big chunky radios and checkboxes. And indeed, just poking at their interface quickly, even …\nThe post Zero Trickery Custom Radios and Checkboxes appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/zero-trickery-custom-radios-and-checkboxes/",
"publishedOn": "2021-11-18T00:16:17.000Z",
"wordCount": 632,
"title": "Zero Trickery Custom Radios and Checkboxes"
},
{
"id": "https://css-tricks.com/?p=356885",
"author": "Chris Coyier",
"description": "Like this: <input type=\"search\">\nYou get an extra-round-y appearance in Safari, which at one time matched the macOS look for search inputs, but not really anymore. I don’t hate the look, except…\nSafari totally ignores the font-size you set on \n…\nThe post What do you get for using a search input type? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/what-do-you-get-for-using-a-search-input-type/",
"publishedOn": "2021-11-17T23:09:46.000Z",
"wordCount": 638,
"title": "What do you get for using a search input type?"
},
{
"id": "https://css-tricks.com/?p=356700",
"author": "Tobias Günther",
"description": "In part 5 of this series, we looked at rebasing and merging. Although there are a couple of differences between git merge and git rebase, both commands have the same goal: they integrate changes from one branch into another.\nThe post Cherry-Picking Commits in Git appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/cherry-picking-commits-in-git/",
"publishedOn": "2021-11-17T15:28:22.000Z",
"wordCount": 1350,
"title": "Cherry-Picking Commits in Git"
},
{
"id": "https://css-tricks.com/?p=357023",
"author": "Chris Coyier",
"description": "Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey) developer implements the change exactly as requested—but really what was required was both a bug …\nThe post The Gap (Design Engineering) appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/the-gap-design-engineering/",
"publishedOn": "2021-11-17T15:27:19.000Z",
"wordCount": 647,
"title": "The Gap (Design Engineering)"
},
{
"id": "https://css-tricks.com/?p=357053",
"author": "Chris Coyier",
"description": "Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element.\nThat’s not quite what I’m talking …\nThe post A Clever Sticky Footer Technique appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/a-clever-sticky-footer-technique/",
"publishedOn": "2021-11-17T00:49:00.000Z",
"wordCount": 846,
"title": "A Clever Sticky Footer Technique"
},
{
"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,
"wordCount": 1005,
"title": "Line length revisited: following the research"
},
{
@ -44,7 +89,7 @@
"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,
"wordCount": 832,
"title": "Color Alpha Anywhere"
},
{
@ -62,7 +107,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": 1058,
"wordCount": 1106,
"title": "Other Looks at the Conditional Border Radius Trick"
},
{
@ -71,7 +116,7 @@
"description": "Interactive Rebase is the Swiss Army knife of Git commands: lots of use cases and lots of possibilities! It's really a great addition to any developer's tool chain, because it lets you revise your local commit history—before you share your work with the rest of the team. Let's see what you can do with an interactive rebase and then look at some practical examples.\nThe post Interactive Rebase: Clean up your Commit History appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/interactive-rebase-clean-up-your-commit-history/",
"publishedOn": "2021-11-12T15:16:24.000Z",
"wordCount": 1888,
"wordCount": 1893,
"title": "Interactive Rebase: Clean up your Commit History"
},
{
@ -100,51 +145,6 @@
"publishedOn": "2021-11-11T15:22:31.000Z",
"wordCount": 1151,
"title": "Quickly Get Alerted to Front-End Errors and Performance Issues"
},
{
"id": "https://css-tricks.com/?p=356058",
"author": "Chris Coyier",
"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": 731,
"title": "Don’t Snore on CORS"
},
{
"id": "https://css-tricks.com/?p=355649",
"author": "Meredith Matthews",
"description": "Oh, Bootstrap, that old standard web library that either you hate or you spend all your time defending as “it’s fine, it’s not that bad.” Regardless of what side you fall on, it’s a powerful UI framework that’s everywhere, …\nThe post Quick and Dirty Bootstrap Overrides at Runtime appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/quick-and-dirty-bootstrap-overrides-at-runtime/",
"publishedOn": "2021-11-10T15:00:29.000Z",
"wordCount": 2161,
"title": "Quick and Dirty Bootstrap Overrides at Runtime"
},
{
"id": "https://css-tricks.com/?p=356208",
"author": "Chris Coyier",
"description": "Nice domain, eh? Does just what it says on the tin: cleans up pictures. You draw over areas of the image you want cleaned up, and it does its best using weird science. It’s like Photoshop’s Spot Healing Brush…\nThe post cleanup.pictures appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/cleanup-pictures/",
"publishedOn": "2021-11-10T14:55:26.000Z",
"wordCount": 364,
"title": "cleanup.pictures"
},
{
"id": "https://css-tricks.com/?p=356142",
"author": "Chris Coyier",
"description": "Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:\nYou have to press a special combination of keys on a keyboard.\nThen type a secret password.\nFrom there, a special message pops …\nThe post Detecting Specific Text Input with HTML and CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/detecting-specific-text-input-with-html-and-css/",
"publishedOn": "2021-11-09T22:53:45.000Z",
"wordCount": 459,
"title": "Detecting Specific Text Input with HTML and CSS"
},
{
"id": "https://css-tricks.com/?p=356370",
"author": "Chris Coyier",
"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": 1108,
"title": "VideoPress for WordPress"
}
]
},
@ -153,6 +153,20 @@
"feedUrl": "https://www.smashingmagazine.com/feed/",
"siteUrl": "https://www.smashingmagazine.com/",
"articles": [
{
"id": "https://smashingmagazine.com/2021/11/guide-modern-css-colors/",
"author": "hello@smashingmagazine.com (Michelle Barker)",
"description": "In this article, we’ll take a look at the best ways to handle colors in CSS today, some tips for using them in a design system, and what we can expect from our colors in the not-too-distant future.",
"link": "https://smashingmagazine.com/2021/11/guide-modern-css-colors/",
"publishedOn": "2021-11-17T16:00:00.000Z",
"wordCount": 3460,
"title": "A Guide To Modern CSS Colors With RGB, HSL, HWL, LAB and LCH",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b424cd2e-1e44-4ca2-8506-4e45a5bdb570/guide-modern-css-colors.jpg",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/11/touch-design-pre-release/",
"author": "hello@smashingmagazine.com (Vitaly Friedman)",
@ -173,7 +187,7 @@
"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": 2155,
"wordCount": 2154,
"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",
@ -187,7 +201,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": 10259,
"wordCount": 10262,
"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",
@ -201,7 +215,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": 4305,
"wordCount": 4303,
"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",
@ -215,7 +229,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": 1916,
"wordCount": 1920,
"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",
@ -243,7 +257,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": 1538,
"wordCount": 1524,
"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",
@ -257,7 +271,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": 6207,
"wordCount": 6202,
"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",
@ -285,7 +299,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": 3398,
"wordCount": 3401,
"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",
@ -299,7 +313,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": 3625,
"wordCount": 3621,
"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",
@ -313,7 +327,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": 5965,
"wordCount": 5951,
"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",
@ -327,7 +341,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": 2388,
"wordCount": 2370,
"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",
@ -341,7 +355,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": 2519,
"wordCount": 2518,
"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",
@ -355,7 +369,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": 3161,
"wordCount": 3163,
"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",
@ -369,7 +383,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": 3504,
"wordCount": 3506,
"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",
@ -397,7 +411,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": 2036,
"wordCount": 2033,
"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",
@ -411,7 +425,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": 4911,
"wordCount": 4918,
"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",
@ -453,7 +467,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": 5054,
"wordCount": 5038,
"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",
@ -467,41 +481,13 @@
"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": 2534,
"wordCount": 2525,
"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",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/10/smashing-podcast-episode-42/",
"author": "hello@smashingmagazine.com (Drew McLellan)",
"description": "In this episode, we’re talking about DevOps. What is it, and is it a string to add to your web development bow? Drew McLellan talks to expert Jeff Smith to find out.",
"link": "https://smashingmagazine.com/2021/10/smashing-podcast-episode-42/",
"publishedOn": "2021-10-19T10:00:00.000Z",
"wordCount": 9120,
"title": "Smashing Podcast Episode 42 With Jeff Smith: What Is DevOps?",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4f30e407-6c98-4abf-80f3-8d312ac20eb2/smashing-podcast-episode-42.jpg",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/10/nextjs-ecommerce-cls-case-study/",
"author": "hello@smashingmagazine.com (Arijit Mondal)",
"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": 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",
"length": "0",
"type": "image/jpg"
}
}
]
},
@ -510,6 +496,51 @@
"feedUrl": "https://www.freecodecamp.org/news/rss/",
"siteUrl": "https://www.freecodecamp.org/news",
"articles": [
{
"id": "617a6ef033422e07df3667f4",
"author": null,
"description": "In this article, I'm going to share with you what I've learned so far at my first programming job as a junior full-stack developer. Ever since my developer career began in July, 2021 I've been learning constantly. And I'm gonna share some tips from my experiences so that you can",
"link": "https://www.freecodecamp.org/news/what-ive-learned-at-my-first-developer-job/",
"publishedOn": "2021-11-18T00:08:02.000Z",
"wordCount": 1971,
"title": "I Got My First Developer Job – Here&#x27;s What I&#x27;ve Learned So Far"
},
{
"id": "618fda8c11d3cb08287a5a51",
"author": null,
"description": "One of the first steps many young startups take is setting up a static web page, perhaps with an email newsletter, to help them build an audience. As the weeks go by and the MVP is getting further along, the subject of how to handle payments will eventually emerge. From",
"link": "https://www.freecodecamp.org/news/serverless-online-payments/",
"publishedOn": "2021-11-17T20:54:10.000Z",
"wordCount": 1327,
"title": "How to Set Up Serverless Online Payments with Netlify and Stripe"
},
{
"id": "618eaede11d3cb08287a51c8",
"author": null,
"description": "About a year back, I was just about ready to release Caer, a Computer Vision library in Python that would be publicly available on PyPi. But first, I decided to send it to a friend in Alberta to tinker around with it. A few days later, I found that he",
"link": "https://www.freecodecamp.org/news/why-you-should-start-using-docker-now/",
"publishedOn": "2021-11-17T20:42:19.000Z",
"wordCount": 982,
"title": "Why You Should Start Using Docker Right Now"
},
{
"id": "6194a7d111d3cb08287a7a03",
"author": null,
"description": "Every computer or device that you can use to surf the web has an IP address assigned to it. This IP address allows the device to be identified on the internet or within a local area network. But sometimes, you might get an error that says your Ethernet doesn't have",
"link": "https://www.freecodecamp.org/news/ethernet-doesnt-have-a-valid-ip-configuration-how-to-fix-invalid-connection-in-windows-10/",
"publishedOn": "2021-11-17T18:40:14.000Z",
"wordCount": 871,
"title": "Ethernet Doesn&#x27;t Have a Valid IP Configuration – How to Fix Invalid Connection in Windows 10"
},
{
"id": "61912f8811d3cb08287a6037",
"author": null,
"description": "Passing the AWS Certified Cloud Practitioner Exam is one of the first steps to a career in cloud development. And freeCodeCamp just published my free 12-hour course that will help you prepare for the exam. This exam mostly deals with cloud computing concepts. Even if you are new to coding,",
"link": "https://www.freecodecamp.org/news/aws-certified-cloud-practitioner-certification-study-course-pass-the-exam/",
"publishedOn": "2021-11-17T14:13:55.000Z",
"wordCount": 841,
"title": "AWS Certified Cloud Practitioner Study Course – Pass the Exam With This Free 13-Hour Course"
},
{
"id": "618f31ff11d3cb08287a562a",
"author": null,
@ -554,51 +585,6 @@
"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,
"description": "In this tutorial, we'll talk about an important concept in React – props. I'll show you how to use them to keep the flow of data in your app dynamic. PrerequisitesIn other to follow along with this tutorial, you will need: A React app.Additionally, I assume that you already understand:",
"link": "https://www.freecodecamp.org/news/how-to-use-props-in-react/",
"publishedOn": "2021-11-15T23:48:49.000Z",
"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,
"description": "IPTV stands for Internet Protocol Television. It's a service you can use to watch your favorite TV shows without needing to sign up for cable. But how does it work exactly? In this article, I will break down the different types of IPTV services including free and paid services. What",
"link": "https://www.freecodecamp.org/news/what-is-iptv-ip-tv-service-guide/",
"publishedOn": "2021-11-15T20:45:25.000Z",
"wordCount": 923,
"title": "What is IPTV? IPTV Service Guide"
},
{
"id": "61923fda11d3cb08287a65ef",
"author": null,
"description": "External hard drives let you back up your files. With external drives, you can also easily move files from one computer to another - especially when you get a new computer. But sometimes when you're trying to back up or retrieve files from an external hard drive, the drive might",
"link": "https://www.freecodecamp.org/news/external-hard-drive-not-showing-up-disk-management-in-windows-10-tutorial/",
"publishedOn": "2021-11-15T20:37:30.000Z",
"wordCount": 935,
"title": "External Hard Drive Not Showing Up? Disk Management in Windows 10 Tutorial"
}
]
}

256
feed.atom
View file

@ -1,10 +1,132 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>urn:2021-11-17T00:42:07.370Z</id>
<id>urn:2021-11-18T00:42:58.777Z</id>
<title>osmos::feed</title>
<updated>2021-11-17T00:42:07.370Z</updated>
<updated>2021-11-18T00:42:58.777Z</updated>
<generator>osmosfeed 1.11.3</generator>
<link rel="alternate" href="index.html"/>
<entry>
<title type="html"><![CDATA[Zero Trickery Custom Radios and Checkboxes]]></title>
<id>https://css-tricks.com/?p=356895</id>
<link href="https://css-tricks.com/zero-trickery-custom-radios-and-checkboxes/"/>
<updated>2021-11-18T00:16:17.000Z</updated>
<summary type="html"><![CDATA[I feel like half of all “custom-designed radio buttons and checkboxes” do two things:
Make them bigger
Colorize them
I always think of SurveyMonkey for having big chunky radios and checkboxes. And indeed, just poking at their interface quickly, even …
The post Zero Trickery Custom Radios and Checkboxes 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[I Got My First Developer Job – Here&#x27;s What I&#x27;ve Learned So Far]]></title>
<id>617a6ef033422e07df3667f4</id>
<link href="https://www.freecodecamp.org/news/what-ive-learned-at-my-first-developer-job/"/>
<updated>2021-11-18T00:08:02.000Z</updated>
<summary type="html"><![CDATA[In this article, I'm going to share with you what I've learned so far at my first programming job as a junior full-stack developer. Ever since my developer career began in July, 2021 I've been learning constantly. And I'm gonna share some tips from my experiences so that you can]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What do you get for using a search input type?]]></title>
<id>https://css-tricks.com/?p=356885</id>
<link href="https://css-tricks.com/what-do-you-get-for-using-a-search-input-type/"/>
<updated>2021-11-17T23:09:46.000Z</updated>
<summary type="html"><![CDATA[Like this: <input type="search">
You get an extra-round-y appearance in Safari, which at one time matched the macOS look for search inputs, but not really anymore. I don’t hate the look, except…
Safari totally ignores the font-size you set on
…
The post What do you get for using a search input type? 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 Set Up Serverless Online Payments with Netlify and Stripe]]></title>
<id>618fda8c11d3cb08287a5a51</id>
<link href="https://www.freecodecamp.org/news/serverless-online-payments/"/>
<updated>2021-11-17T20:54:10.000Z</updated>
<summary type="html"><![CDATA[One of the first steps many young startups take is setting up a static web page, perhaps with an email newsletter, to help them build an audience. As the weeks go by and the MVP is getting further along, the subject of how to handle payments will eventually emerge. From]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Why You Should Start Using Docker Right Now]]></title>
<id>618eaede11d3cb08287a51c8</id>
<link href="https://www.freecodecamp.org/news/why-you-should-start-using-docker-now/"/>
<updated>2021-11-17T20:42:19.000Z</updated>
<summary type="html"><![CDATA[About a year back, I was just about ready to release Caer, a Computer Vision library in Python that would be publicly available on PyPi. But first, I decided to send it to a friend in Alberta to tinker around with it. A few days later, I found that he]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Ethernet Doesn&#x27;t Have a Valid IP Configuration – How to Fix Invalid Connection in Windows 10]]></title>
<id>6194a7d111d3cb08287a7a03</id>
<link href="https://www.freecodecamp.org/news/ethernet-doesnt-have-a-valid-ip-configuration-how-to-fix-invalid-connection-in-windows-10/"/>
<updated>2021-11-17T18:40:14.000Z</updated>
<summary type="html"><![CDATA[Every computer or device that you can use to surf the web has an IP address assigned to it. This IP address allows the device to be identified on the internet or within a local area network. But sometimes, you might get an error that says your Ethernet doesn't have]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[A Guide To Modern CSS Colors With RGB, HSL, HWL, LAB and LCH]]></title>
<id>https://smashingmagazine.com/2021/11/guide-modern-css-colors/</id>
<link href="https://smashingmagazine.com/2021/11/guide-modern-css-colors/"/>
<updated>2021-11-17T16:00:00.000Z</updated>
<summary type="html"><![CDATA[In this article, we’ll take a look at the best ways to handle colors in CSS today, some tips for using them in a design system, and what we can expect from our colors in the not-too-distant future.]]></summary>
<author>
<name>hello@smashingmagazine.com (Michelle Barker)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Cherry-Picking Commits in Git]]></title>
<id>https://css-tricks.com/?p=356700</id>
<link href="https://css-tricks.com/cherry-picking-commits-in-git/"/>
<updated>2021-11-17T15:28:22.000Z</updated>
<summary type="html"><![CDATA[In part 5 of this series, we looked at rebasing and merging. Although there are a couple of differences between git merge and git rebase, both commands have the same goal: they integrate changes from one branch into another.
The post Cherry-Picking Commits in Git appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Tobias Günther</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[The Gap (Design Engineering)]]></title>
<id>https://css-tricks.com/?p=357023</id>
<link href="https://css-tricks.com/the-gap-design-engineering/"/>
<updated>2021-11-17T15:27:19.000Z</updated>
<summary type="html"><![CDATA[Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey) developer implements the change exactly as requested—but really what was required was both a bug …
The post The Gap (Design Engineering) 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[AWS Certified Cloud Practitioner Study Course – Pass the Exam With This Free 13-Hour Course]]></title>
<id>61912f8811d3cb08287a6037</id>
<link href="https://www.freecodecamp.org/news/aws-certified-cloud-practitioner-certification-study-course-pass-the-exam/"/>
<updated>2021-11-17T14:13:55.000Z</updated>
<summary type="html"><![CDATA[Passing the AWS Certified Cloud Practitioner Exam is one of the first steps to a career in cloud development. And freeCodeCamp just published my free 12-hour course that will help you prepare for the exam. This exam mostly deals with cloud computing concepts. Even if you are new to coding,]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[A Clever Sticky Footer Technique]]></title>
<id>https://css-tricks.com/?p=357053</id>
<link href="https://css-tricks.com/a-clever-sticky-footer-technique/"/>
<updated>2021-11-17T00:49:00.000Z</updated>
<summary type="html"><![CDATA[Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element.
That’s not quite what I’m talking …
The post A Clever Sticky Footer Technique 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[Coding Interview Prep – Free Resources to Help You Ace Your Interviews]]></title>
<id>618f31ff11d3cb08287a562a</id>
@ -98,16 +220,6 @@ The post Jamstack TV appeared first on CSS-Tricks. You can support CSS-Tricks by
<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>
@ -119,46 +231,6 @@ The post Color Alpha Anywhere appeared first on CSS-Tricks. You can support CSS-
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Use Props in React]]></title>
<id>619140bc11d3cb08287a60d4</id>
<link href="https://www.freecodecamp.org/news/how-to-use-props-in-react/"/>
<updated>2021-11-15T23:48:49.000Z</updated>
<summary type="html"><![CDATA[In this tutorial, we'll talk about an important concept in React – props. I'll show you how to use them to keep the flow of data in your app dynamic. PrerequisitesIn other to follow along with this tutorial, you will need: A React app.Additionally, I assume that you already understand:]]></summary>
<author>
<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>
<link href="https://www.freecodecamp.org/news/what-is-iptv-ip-tv-service-guide/"/>
<updated>2021-11-15T20:45:25.000Z</updated>
<summary type="html"><![CDATA[IPTV stands for Internet Protocol Television. It's a service you can use to watch your favorite TV shows without needing to sign up for cable. But how does it work exactly? In this article, I will break down the different types of IPTV services including free and paid services. What]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[External Hard Drive Not Showing Up? Disk Management in Windows 10 Tutorial]]></title>
<id>61923fda11d3cb08287a65ef</id>
<link href="https://www.freecodecamp.org/news/external-hard-drive-not-showing-up-disk-management-in-windows-10-tutorial/"/>
<updated>2021-11-15T20:37:30.000Z</updated>
<summary type="html"><![CDATA[External hard drives let you back up your files. With external drives, you can also easily move files from one computer to another - especially when you get a new computer. But sometimes when you're trying to back up or retrieve files from an external hard drive, the drive might]]></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>
@ -257,66 +329,6 @@ The post Quickly Get Alerted to Front-End Errors and Performance Issues appeared
<name>hello@smashingmagazine.com (Adam Fard)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Don’t Snore on CORS]]></title>
<id>https://css-tricks.com/?p=356058</id>
<link href="https://css-tricks.com/dont-snore-on-cors/"/>
<updated>2021-11-10T22:38:05.000Z</updated>
<summary type="html"><![CDATA[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.
The main …
The post Don’t Snore on CORS 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[Quick and Dirty Bootstrap Overrides at Runtime]]></title>
<id>https://css-tricks.com/?p=355649</id>
<link href="https://css-tricks.com/quick-and-dirty-bootstrap-overrides-at-runtime/"/>
<updated>2021-11-10T15:00:29.000Z</updated>
<summary type="html"><![CDATA[Oh, Bootstrap, that old standard web library that either you hate or you spend all your time defending as “it’s fine, it’s not that bad.” Regardless of what side you fall on, it’s a powerful UI framework that’s everywhere, …
The post Quick and Dirty Bootstrap Overrides at Runtime appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Meredith Matthews</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[cleanup.pictures]]></title>
<id>https://css-tricks.com/?p=356208</id>
<link href="https://css-tricks.com/cleanup-pictures/"/>
<updated>2021-11-10T14:55:26.000Z</updated>
<summary type="html"><![CDATA[Nice domain, eh? Does just what it says on the tin: cleans up pictures. You draw over areas of the image you want cleaned up, and it does its best using weird science. It’s like Photoshop’s Spot Healing Brush…
The post cleanup.pictures 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[Detecting Specific Text Input with HTML and CSS]]></title>
<id>https://css-tricks.com/?p=356142</id>
<link href="https://css-tricks.com/detecting-specific-text-input-with-html-and-css/"/>
<updated>2021-11-09T22:53:45.000Z</updated>
<summary type="html"><![CDATA[Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:
You have to press a special combination of keys on a keyboard.
Then type a secret password.
From there, a special message pops …
The post Detecting Specific Text Input with HTML and CSS 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[VideoPress for WordPress]]></title>
<id>https://css-tricks.com/?p=356370</id>
<link href="https://css-tricks.com/videopress-for-wordpress/"/>
<updated>2021-11-09T22:53:18.000Z</updated>
<summary type="html"><![CDATA[(This is a sponsored post.)
The 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 …
The post VideoPress for WordPress 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[Localizing Your Next.js App]]></title>
<id>https://smashingmagazine.com/2021/11/localizing-your-nextjs-app/</id>
@ -507,24 +519,4 @@ The post VideoPress for WordPress appeared first on CSS-Tricks. You can support
<name>hello@smashingmagazine.com (Paul Scanlon)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Smashing Podcast Episode 42 With Jeff Smith: What Is DevOps?]]></title>
<id>https://smashingmagazine.com/2021/10/smashing-podcast-episode-42/</id>
<link href="https://smashingmagazine.com/2021/10/smashing-podcast-episode-42/"/>
<updated>2021-10-19T10:00:00.000Z</updated>
<summary type="html"><![CDATA[In this episode, we’re talking about DevOps. What is it, and is it a string to add to your web development bow? Drew McLellan talks to expert Jeff Smith to find out.]]></summary>
<author>
<name>hello@smashingmagazine.com (Drew McLellan)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)]]></title>
<id>https://smashingmagazine.com/2021/10/nextjs-ecommerce-cls-case-study/</id>
<link href="https://smashingmagazine.com/2021/10/nextjs-ecommerce-cls-case-study/"/>
<updated>2021-10-18T14:00:00.000Z</updated>
<summary type="html"><![CDATA[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.]]></summary>
<author>
<name>hello@smashingmagazine.com (Arijit Mondal)</name>
</author>
</entry>
</feed>

351
index.html
View file

@ -15,6 +15,179 @@
<body>
<!-- %after-body-begin.html% -->
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-11-18">2021-11-18</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">Zero Trickery Custom Radios and Checkboxes</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/zero-trickery-custom-radios-and-checkboxes/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>I feel like half of all “custom-designed radio buttons and checkboxes” do two things:
Make them bigger
Colorize them
I always think of SurveyMonkey for having big chunky radios and checkboxes. And indeed, just poking at their interface quickly, even …
The post Zero Trickery Custom Radios and Checkboxes 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">I Got My First Developer Job – Here&#x27;s What I&#x27;ve Learned So Far</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-ive-learned-at-my-first-developer-job/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(7 min)</span>
<span>In this article, I&#x27;m going to share with you what I&#x27;ve learned so far at my first programming job as a junior full-stack developer. Ever since my developer career began in July, 2021 I&#x27;ve been learning constantly. And I&#x27;m gonna share some tips from my experiences so that you can</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-11-17">2021-11-17</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">What do you get for using a search input type?</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/what-do-you-get-for-using-a-search-input-type/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Like this:
You get an extra-round-y appearance in Safari, which at one time matched the macOS look for search inputs, but not really anymore. I don’t hate the look, except…
Safari totally ignores the font-size you set on
…
The post What do you get for using a search input type? 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">Cherry-Picking Commits in Git</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/cherry-picking-commits-in-git/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>In part 5 of this series, we looked at rebasing and merging. Although there are a couple of differences between git merge and git rebase, both commands have the same goal: they integrate changes from one branch into another.
The post Cherry-Picking Commits in Git 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">The Gap (Design Engineering)</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/the-gap-design-engineering/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey) developer implements the change exactly as requested—but really what was required was both a bug …
The post The Gap (Design Engineering) 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">A Clever Sticky Footer Technique</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/a-clever-sticky-footer-technique/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element.
That’s not quite what I’m talking …
The post A Clever Sticky Footer Technique 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">How to Set Up Serverless Online Payments with Netlify and Stripe</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/serverless-online-payments/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>One of the first steps many young startups take is setting up a static web page, perhaps with an email newsletter, to help them build an audience. As the weeks go by and the MVP is getting further along, the subject of how to handle payments will eventually emerge. From</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Why You Should Start Using Docker Right Now</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/why-you-should-start-using-docker-now/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>About a year back, I was just about ready to release Caer, a Computer Vision library in Python that would be publicly available on PyPi. But first, I decided to send it to a friend in Alberta to tinker around with it. A few days later, I found that he</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Ethernet Doesn&#x27;t Have a Valid IP Configuration – How to Fix Invalid Connection in Windows 10</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/ethernet-doesnt-have-a-valid-ip-configuration-how-to-fix-invalid-connection-in-windows-10/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>Every computer or device that you can use to surf the web has an IP address assigned to it. This IP address allows the device to be identified on the internet or within a local area network. But sometimes, you might get an error that says your Ethernet doesn&#x27;t have</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">AWS Certified Cloud Practitioner Study Course – Pass the Exam With This Free 13-Hour Course</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/aws-certified-cloud-practitioner-certification-study-course-pass-the-exam/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>Passing the AWS Certified Cloud Practitioner Exam is one of the first steps to a career in cloud development. And freeCodeCamp just published my free 12-hour course that will help you prepare for the exam. This exam mostly deals with cloud computing concepts. Even if you are new to coding,</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">A Guide To Modern CSS Colors With RGB, HSL, HWL, LAB and LCH</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/11/guide-modern-css-colors/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(12 min)</span>
<span>In this article, we’ll take a look at the best ways to handle colors in CSS today, some tips for using them in a design system, and what we can expect from our colors in the not-too-distant future.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-11-16">2021-11-16</time></h2>
<ul class="sources card">
@ -131,17 +304,6 @@ The post Color Alpha Anywhere appeared first on CSS-Tricks. You can support CSS-
</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">
@ -184,56 +346,6 @@ The post Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library appe
</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 Use Props in React</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-use-props-in-react/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>In this tutorial, we&#x27;ll talk about an important concept in React – props. I&#x27;ll show you how to use them to keep the flow of data in your app dynamic. PrerequisitesIn other to follow along with this tutorial, you will need: A React app.Additionally, I assume that you already understand:</span>
</div>
</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>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-iptv-ip-tv-service-guide/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>IPTV stands for Internet Protocol Television. It&#x27;s a service you can use to watch your favorite TV shows without needing to sign up for cable. But how does it work exactly? In this article, I will break down the different types of IPTV services including free and paid services. What</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">External Hard Drive Not Showing Up? Disk Management in Windows 10 Tutorial</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/external-hard-drive-not-showing-up-disk-management-in-windows-10-tutorial/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>External hard drives let you back up your files. With external drives, you can also easily move files from one computer to another - especially when you get a new computer. But sometimes when you&#x27;re trying to back up or retrieve files from an external hard drive, the drive might</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>
@ -371,91 +483,9 @@ The post Quickly Get Alerted to Front-End Errors and Performance Issues appeared
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-11-10">2021-11-10</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">Don’t Snore on CORS</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/dont-snore-on-cors/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>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.
The main …
The post Don’t Snore on CORS 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">Quick and Dirty Bootstrap Overrides at Runtime</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/quick-and-dirty-bootstrap-overrides-at-runtime/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(7 min)</span>
<span>Oh, Bootstrap, that old standard web library that either you hate or you spend all your time defending as “it’s fine, it’s not that bad.” Regardless of what side you fall on, it’s a powerful UI framework that’s everywhere, …
The post Quick and Dirty Bootstrap Overrides at Runtime 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">cleanup.pictures</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/cleanup-pictures/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(1 min)</span>
<span>Nice domain, eh? Does just what it says on the tin: cleans up pictures. You draw over areas of the image you want cleaned up, and it does its best using weird science. It’s like Photoshop’s Spot Healing Brush…
The post cleanup.pictures appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-11-09">2021-11-09</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">Detecting Specific Text Input with HTML and CSS</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/detecting-specific-text-input-with-html-and-css/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:
You have to press a special combination of keys on a keyboard.
Then type a secret password.
From there, a special message pops …
The post Detecting Specific Text Input with HTML and 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">VideoPress for WordPress</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/videopress-for-wordpress/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>(This is a sponsored post.)
The 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 …
The post VideoPress for WordPress 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>
@ -845,46 +875,13 @@ 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">Smashing Podcast Episode 42 With Jeff Smith: What Is DevOps?</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/smashing-podcast-episode-42/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(30 min)</span>
<span>In this episode, we’re talking about DevOps. What is it, and is it a string to add to your web development bow? Drew McLellan talks to expert Jeff Smith to find out.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-10-18">2021-10-18</time></h2>
<ul class="sources card">
<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">Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/nextjs-ecommerce-cls-case-study/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(7 min)</span>
<span>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.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<footer>
<time id="build-timestamp" datetime="2021-11-17T00:42:07.351Z">2021-11-17T00:42:07.351Z</time>
<time id="build-timestamp" datetime="2021-11-18T00:42:58.755Z">2021-11-18T00:42:58.755Z</time>
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.11.3</a></span>
</footer>
<script src="index.js"></script>