diff --git a/cache.json b/cache.json index f11a636..dab3e7a 100644 --- a/cache.json +++ b/cache.json @@ -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: \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's What I'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'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" } ] } diff --git a/feed.atom b/feed.atom index a093048..38da696 100644 --- a/feed.atom +++ b/feed.atom @@ -1,10 +1,132 @@ - urn:2021-11-17T00:42:07.370Z + urn:2021-11-18T00:42:58.777Z osmos::feed - 2021-11-17T00:42:07.370Z + 2021-11-18T00:42:58.777Z osmosfeed 1.11.3 + + <![CDATA[Zero Trickery Custom Radios and Checkboxes]]> + https://css-tricks.com/?p=356895 + + 2021-11-18T00:16:17.000Z + + + Chris Coyier + + + + <![CDATA[I Got My First Developer Job – Here's What I've Learned So Far]]> + 617a6ef033422e07df3667f4 + + 2021-11-18T00:08:02.000Z + + + freeCodeCamp.org + + + + <![CDATA[What do you get for using a search input type?]]> + https://css-tricks.com/?p=356885 + + 2021-11-17T23:09:46.000Z + +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.]]> + + Chris Coyier + + + + <![CDATA[How to Set Up Serverless Online Payments with Netlify and Stripe]]> + 618fda8c11d3cb08287a5a51 + + 2021-11-17T20:54:10.000Z + + + freeCodeCamp.org + + + + <![CDATA[Why You Should Start Using Docker Right Now]]> + 618eaede11d3cb08287a51c8 + + 2021-11-17T20:42:19.000Z + + + freeCodeCamp.org + + + + <![CDATA[Ethernet Doesn't Have a Valid IP Configuration – How to Fix Invalid Connection in Windows 10]]> + 6194a7d111d3cb08287a7a03 + + 2021-11-17T18:40:14.000Z + + + freeCodeCamp.org + + + + <![CDATA[A Guide To Modern CSS Colors With RGB, HSL, HWL, LAB and LCH]]> + https://smashingmagazine.com/2021/11/guide-modern-css-colors/ + + 2021-11-17T16:00:00.000Z + + + hello@smashingmagazine.com (Michelle Barker) + + + + <![CDATA[Cherry-Picking Commits in Git]]> + https://css-tricks.com/?p=356700 + + 2021-11-17T15:28:22.000Z + + + Tobias Günther + + + + <![CDATA[The Gap (Design Engineering)]]> + https://css-tricks.com/?p=357023 + + 2021-11-17T15:27:19.000Z + + + Chris Coyier + + + + <![CDATA[AWS Certified Cloud Practitioner Study Course – Pass the Exam With This Free 13-Hour Course]]> + 61912f8811d3cb08287a6037 + + 2021-11-17T14:13:55.000Z + + + freeCodeCamp.org + + + + <![CDATA[A Clever Sticky Footer Technique]]> + https://css-tricks.com/?p=357053 + + 2021-11-17T00:49:00.000Z + + + Chris Coyier + + <![CDATA[Coding Interview Prep – Free Resources to Help You Ace Your Interviews]]> 618f31ff11d3cb08287a562a @@ -98,16 +220,6 @@ The post Jamstack TV appeared first on CSS-Tricks. You can support CSS-Tricks by freeCodeCamp.org - - <![CDATA[Infrastructure as Code - Full Course]]> - 615a6c014aa03507d94125a3 - - 2021-11-16T15:02:13.000Z - - - freeCodeCamp.org - - <![CDATA[Color Alpha Anywhere]]> https://css-tricks.com/?p=356611 @@ -119,46 +231,6 @@ The post Color Alpha Anywhere appeared first on CSS-Tricks. You can support CSS- Chris Coyier - - <![CDATA[How to Use Props in React]]> - 619140bc11d3cb08287a60d4 - - 2021-11-15T23:48:49.000Z - - - freeCodeCamp.org - - - - <![CDATA[Improve Your C++ Skills by Building an Audio Plugin (3-Band Compressor)]]> - 6194240311d3cb08287a7709 - - 2021-11-15T21:47:00.000Z - - - freeCodeCamp.org - - - - <![CDATA[What is IPTV? IPTV Service Guide]]> - 618216148bcfae07ca4e072f - - 2021-11-15T20:45:25.000Z - - - freeCodeCamp.org - - - - <![CDATA[External Hard Drive Not Showing Up? Disk Management in Windows 10 Tutorial]]> - 61923fda11d3cb08287a65ef - - 2021-11-15T20:37:30.000Z - - - freeCodeCamp.org - - <![CDATA[Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library]]> https://css-tricks.com/?p=355894 @@ -257,66 +329,6 @@ The post Quickly Get Alerted to Front-End Errors and Performance Issues appeared hello@smashingmagazine.com (Adam Fard) - - <![CDATA[Don’t Snore on CORS]]> - https://css-tricks.com/?p=356058 - - 2021-11-10T22:38:05.000Z - - - Chris Coyier - - - - <![CDATA[Quick and Dirty Bootstrap Overrides at Runtime]]> - https://css-tricks.com/?p=355649 - - 2021-11-10T15:00:29.000Z - - - Meredith Matthews - - - - <![CDATA[cleanup.pictures]]> - https://css-tricks.com/?p=356208 - - 2021-11-10T14:55:26.000Z - - - Chris Coyier - - - - <![CDATA[Detecting Specific Text Input with HTML and CSS]]> - https://css-tricks.com/?p=356142 - - 2021-11-09T22:53:45.000Z - - - Chris Coyier - - - - <![CDATA[VideoPress for WordPress]]> - https://css-tricks.com/?p=356370 - - 2021-11-09T22:53:18.000Z - - - Chris Coyier - - <![CDATA[Localizing Your Next.js App]]> https://smashingmagazine.com/2021/11/localizing-your-nextjs-app/ @@ -507,24 +519,4 @@ The post VideoPress for WordPress appeared first on CSS-Tricks. You can support hello@smashingmagazine.com (Paul Scanlon) - - <![CDATA[Smashing Podcast Episode 42 With Jeff Smith: What Is DevOps?]]> - https://smashingmagazine.com/2021/10/smashing-podcast-episode-42/ - - 2021-10-19T10:00:00.000Z - - - hello@smashingmagazine.com (Drew McLellan) - - - - <![CDATA[Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)]]> - https://smashingmagazine.com/2021/10/nextjs-ecommerce-cls-case-study/ - - 2021-10-18T14:00:00.000Z - - - hello@smashingmagazine.com (Arijit Mondal) - - \ No newline at end of file diff --git a/index.html b/index.html index 3b92d1a..1ecc2d6 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,179 @@ +
+

+ +
+
+

+ +

  • @@ -184,56 +346,6 @@ The post Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library appe
    • -
  • -
    -

    freeCodeCamp.org

    -
    - - - - -
    -

  • Articles on Smashing Magazine — For Web Designers And Developers

    @@ -371,91 +483,9 @@ The post Quickly Get Alerted to Front-End Errors and Performance Issues appeared
    • -
    -

    - -

    -
    -
    -

    -