From 714c795bfbe8ee1033983f769e1e6f36901a36f7 Mon Sep 17 00:00:00 2001 From: chuanqisun Date: Sat, 12 Jun 2021 00:34:09 +0000 Subject: [PATCH] deploy: 1f5684a2ae67184fc44cacebc2a14d1ec87ed0f6 --- cache.json | 218 ++++++++++++++++++++++---------------------- feed.atom | 208 +++++++++++++++++++++--------------------- index.html | 263 +++++++++++++++++++++++++---------------------------- 3 files changed, 339 insertions(+), 350 deletions(-) diff --git a/cache.json b/cache.json index 746160b..669afba 100644 --- a/cache.json +++ b/cache.json @@ -75,13 +75,40 @@ "feedUrl": "https://css-tricks.com/feed/", "siteUrl": "https://css-tricks.com", "articles": [ + { + "id": "https://css-tricks.com/?p=342429", + "author": "Chris Coyier", + "description": "There’s a 33-minute video (and resources) over on apple.com covering the upcoming Safari changes we saw in the WWDC keynote this year in much more detail. Look who’s got a little cameo in there:\nPerhaps the most noticeable thing there …\nThe post Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo! appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/safari-15-new-ui-theme-colors-and-a-css-tricks-cameo/", + "publishedOn": "2021-06-11T21:38:48.000Z", + "wordCount": 689, + "title": "Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo!" + }, + { + "id": "https://css-tricks.com/?p=342237", + "author": "Chris Coyier", + "description": "That’s the one word that isn’t an adjective in the acronym RSS. \nReally Simple Syndication.\nRSS isn’t just about RSS readers. Even though, gosh if I don’t love RSS readers. It’s about putting content in a format that is …\nThe post The Possibilities of Syndication appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/the-possibilities-of-syndication/", + "publishedOn": "2021-06-11T21:25:56.000Z", + "wordCount": 614, + "title": "The Possibilities of Syndication" + }, + { + "id": "https://css-tricks.com/?p=342164", + "author": "Joel Olawanle", + "description": "Why would we need to apply shadows to SVG?\nShadows are a common design feature that can help elements, like icons, stand out. They could be persistent, or applied in different states (e.g. :hover, :focus, or :active) \n…\nThe post Adding Shadows to SVG Icons With CSS and SVG Filters appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/", + "publishedOn": "2021-06-11T14:30:29.000Z", + "wordCount": 2375, + "title": "Adding Shadows to SVG Icons With CSS and SVG Filters" + }, { "id": "https://css-tricks.com/?p=342050", "author": "Chris Coyier", "description": "One thing that can be just a smidge funky about the
element is that, when open, it’s not always 100% clear what is inside that element and what isn’t. I’m not saying that always matters or that it’s a …\nThe post Put a Background on Open Details Elements appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/put-a-background-on-open-details-elements/", "publishedOn": "2021-06-11T00:16:28.000Z", - "wordCount": 535, + "wordCount": 630, "title": "Put a Background on Open Details Elements" }, { @@ -90,7 +117,7 @@ "description": "As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed.\nLet’s break those two down and see how they work together.\nThe post Equal Columns With Flexbox: It’s More Complicated Than You Might Think appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/", "publishedOn": "2021-06-10T14:34:22.000Z", - "wordCount": 4303, + "wordCount": 4490, "title": "Equal Columns With Flexbox: It’s More Complicated Than You Might Think" }, { @@ -99,7 +126,7 @@ "description": "In this tutorial, we will learn and use headless CMS, Fauna, and Vercel functions to build a blogging platform, Blogify After that, you can easily build any web application using a headless CMS, Fauna and Vercel functions.\nThe post Building a Headless CMS with Fauna and Vercel Functions appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/building-a-headless-cms-with-fauna-and-vercel-functions/", "publishedOn": "2021-06-10T14:26:47.000Z", - "wordCount": 2892, + "wordCount": 2972, "title": "Building a Headless CMS with Fauna and Vercel Functions" }, { @@ -108,7 +135,7 @@ "description": "I don’t know about y’all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on …\nThe post A Cornucopia of Container Queries appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/a-cornucopia-of-container-queries/", "publishedOn": "2021-06-09T20:37:00.000Z", - "wordCount": 1534, + "wordCount": 1539, "title": "A Cornucopia of Container Queries" }, { @@ -117,7 +144,7 @@ "description": "Does that make your eye twitch a little bit? Like… it’s a typo. It should be target=\"_blank\" with an underscore to start the value. As in…\n:has, A Native CSS Parent Selector (And More)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/89aef48d-9be9-45df-a7f4-775168deb8dd/has-native-css-parent-selector.jpg", @@ -279,7 +293,7 @@ "description": "In this guide, we’ll be taking a general look at the concepts of forward geocoding and reverse geocoding, and will build a mini-app that applies these concepts to display specific locations, using Mapbox and Vue.js 2.6.11 to achieve this.", "link": "https://smashingmagazine.com/2021/06/building-geocoding-app-vue-mapbox/", "publishedOn": "2021-06-07T11:00:00.000Z", - "wordCount": 2247, + "wordCount": 2240, "title": "How To Build A Geocoding App In Vue.js Using Mapbox", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20dc2361-e5a5-4a78-b380-2f5942ecfba8/building-geocoding-app-vue-mapbox.jpg", @@ -293,7 +307,7 @@ "description": "Modern browsers provide good support for JavaScript modules, but module bundlers such as webpack stay a critical part of the JavaScript toolchain. Let’s take a deep dive into what webpack is and how to use it in your development workflow.", "link": "https://smashingmagazine.com/2021/06/getting-started-webpack/", "publishedOn": "2021-06-04T10:00:00.000Z", - "wordCount": 4167, + "wordCount": 4172, "title": "Getting Started With Webpack", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/66ba7a41-2a37-471b-9c60-66a3162d8f05/webpack-dependency-graph-opt.png", @@ -307,7 +321,7 @@ "description": "Writing large-scale Vue applications can be a challenge. In this article, Shawn Wildermuth dives into the pros and cons of approaches like factories, shared objects, and using Vuex. He also explains what is coming in Vuex 5.0 that might change how we all use shared state in Vue 3.", "link": "https://smashingmagazine.com/2021/06/managing-shared-state-vue3/", "publishedOn": "2021-06-03T10:30:00.000Z", - "wordCount": 3538, + "wordCount": 3542, "title": "Managing Shared State In Vue 3", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0a70815d-28e5-44af-8306-0e992e99593a/managing-shared-state-vue3.jpg", @@ -335,7 +349,7 @@ "description": "Getting a good performance score from Google is hard for any website — but doing so for an online store is even harder. We achieved green scores — even several for mobile. Here is how we did it.", "link": "https://smashingmagazine.com/2021/06/front-end-performance-online-store-jewellerybox/", "publishedOn": "2021-06-02T10:30:00.000Z", - "wordCount": 5413, + "wordCount": 5421, "title": "Improving The Performance Of An Online Store (Case Study)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a350bf5-9114-420c-b587-fee03ea4acb6/jewellerybox-uk-online-store-scipioerp.jpg", @@ -377,7 +391,7 @@ "description": "What could be a better way to welcome June than with some colorful inspiration? Well, we might have something for you: wallpapers created with love by artists and designers from across the globe.", "link": "https://smashingmagazine.com/2021/05/desktop-wallpaper-calendars-june-2021/", "publishedOn": "2021-05-31T11:30:00.000Z", - "wordCount": 2518, + "wordCount": 2516, "title": "Happy June Vibes For Your Screen (2021 Desktop Wallpapers Edition)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png", @@ -391,7 +405,7 @@ "description": "In this article, we’ll be re-using the foundational WYSIWYG Editor built in the first article to build a commenting system for a WYSIWYG Editor that enables users to select text inside a document and share their comments on it. Let’s dig in!", "link": "https://smashingmagazine.com/2021/05/commenting-system-wysiwyg-editor/", "publishedOn": "2021-05-28T11:00:00.000Z", - "wordCount": 10208, + "wordCount": 10254, "title": "Adding A Commenting System To A WYSIWYG Editor", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec39e154-d3d3-4a12-91fd-f0c068cd5247/commenting-system-wysiwyg-editor.jpg", @@ -405,7 +419,7 @@ "description": "Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developer’s workflow along the way. With auto log messages, auto code formatting, file utils, file labels, code snippets, highlight brackets, tags, indents and workspaces, onboarding and remote SSH.", "link": "https://smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/", "publishedOn": "2021-05-27T13:30:00.000Z", - "wordCount": 3773, + "wordCount": 3781, "title": "Useful VS Code Extensions For Front-End Developers", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c5dbb73-94e1-486f-9daa-351699faaa2d/peacock-extension.png", @@ -433,7 +447,7 @@ "description": "Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers.", "link": "https://smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/", "publishedOn": "2021-05-26T13:20:00.000Z", - "wordCount": 1579, + "wordCount": 1581, "title": "Accessible SVGs: Perfect Patterns For Screen Reader Users", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35bf2e3a-ae5b-49a3-843a-318b4c81f5af/accessible-svg-patterns.jpg", @@ -447,7 +461,7 @@ "description": "Mistakes. These cruel villains do not even stop at the beautiful world of software development. But although we cannot avoid making mistakes, we can learn to undo them! This post will show the right tools for your daily work with Git.", "link": "https://smashingmagazine.com/2021/05/undoing-mistakes-git-part2/", "publishedOn": "2021-05-25T14:00:00.000Z", - "wordCount": 2111, + "wordCount": 2151, "title": "A Guide To Undoing Mistakes With Git (Part 2)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/211042ae-7a72-42ba-804e-9f8132815200/undoing-mistakes-git-part1.jpg", @@ -461,7 +475,7 @@ "description": "Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts.", "link": "https://smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/", "publishedOn": "2021-05-25T09:30:00.000Z", - "wordCount": 2108, + "wordCount": 2106, "title": "A New Way To Reduce Font Loading Impact: CSS Font Descriptors", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f0c69413-365e-4c39-9ee8-ad1d2b44e56b/reduce-font-loading-impact-css-descriptors.jpg", @@ -517,7 +531,7 @@ "description": "A step-by-step tutorial on adding authentication and authorization to your Next.js apps, with Auth0. We’ll be using a Next.js SDK to connect our application to the Auth0 API and will create the dynamic API route for React.", "link": "https://smashingmagazine.com/2021/05/implement-authentication-nextjs-auth0/", "publishedOn": "2021-05-20T11:00:00.000Z", - "wordCount": 1990, + "wordCount": 1996, "title": "How To Implement Authentication In Next.js With Auth0", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3e905cbf-b17b-47da-aec4-15c9701bf4bf/implement-authentication-nextjs-auth0.jpg", @@ -573,7 +587,7 @@ "description": "Google’s “Page Experience Update” will start rolling out in June. At first, sites that meet Core Web Vitals thresholds will have a minor ranking advantage in mobile search for all browsers. Search is important to any business, and this is the story of how Beau Hartshorne and his team at Instant Domain Search improved their Core Web Vitals scores.", "link": "https://smashingmagazine.com/2021/05/core-web-vitals-case-study/", "publishedOn": "2021-05-17T11:30:00.000Z", - "wordCount": 2989, + "wordCount": 2979, "title": "How We Improved Our Core Web Vitals (Case Study)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b68aa1ba-94b7-4e70-83e5-5f58b37bf7cd/core-web-vitals-case-study.jpg", @@ -587,27 +601,13 @@ "description": "“Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects.", "link": "https://smashingmagazine.com/2021/05/tree-shaking-reference-guide/", "publishedOn": "2021-05-14T10:30:00.000Z", - "wordCount": 2466, + "wordCount": 2470, "title": "Tree-Shaking: A Reference Guide", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e27a101-d2e0-4661-9e12-b53b68051dbf/tree-shaking-reference-guide.jpg", "length": "0", "type": "image/jpg" } - }, - { - "id": "https://smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/", - "author": "hello@smashingmagazine.com (Vitaly Friedman)", - "description": "In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives, along with plenty of examples to keep in mind when building or designing one. Let’s start with an infamous birthday picker.", - "link": "https://smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/", - "publishedOn": "2021-05-12T12:42:00.000Z", - "wordCount": 3516, - "title": "Frustrating Design Patterns That Need Fixing: Birthday Picker", - "enclosure": { - "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f773d7bb-df56-409f-a3fb-aa1e6e0eea09/4-birthday-picker.jpg", - "length": "0", - "type": "image/jpg" - } } ] }, @@ -616,6 +616,51 @@ "feedUrl": "https://www.freecodecamp.org/news/rss/", "siteUrl": "https://www.freecodecamp.org/news", "articles": [ + { + "id": "60b72d5facb62507dd1d777b", + "author": null, + "description": "If you're in the world of tech, you will inevitably run into a work-related disaster now and then. These setbacks come in many forms such as cyber-attacks, theft, leaks, and corruption. And every business must be ready to face these things and plan for them. Sir Benjamin Franklin famously said,", + "link": "https://www.freecodecamp.org/news/disaster-recovery-plan-what-are-rto-and-rpo/", + "publishedOn": "2021-06-11T22:56:56.000Z", + "wordCount": 1569, + "title": "What is a Disaster Recovery Plan? How to Use RTO and RPO to Protect your Business" + }, + { + "id": "6063b9189618b008528a9d81", + "author": null, + "description": "Today I'm gonna show you how you can center and align your content with CSS. Along the way, we'll look at various alignment techniques. So, let's get started! 🥇 Table of Contents -> How to Use Flexbox to center anything horizontally center anything vertically center both horizontally & Vertically How", + "link": "https://www.freecodecamp.org/news/how-to-center-objects-using-css/", + "publishedOn": "2021-06-11T20:40:17.000Z", + "wordCount": 1427, + "title": "How to Center Anything in CSS Using Flexbox and Grid ✨" + }, + { + "id": "5f9c97e9740569d1a4ca1768", + "author": null, + "description": "How you can design an inclusive and accessible org chart experience and solutions to common development challenges you will face.", + "link": "https://www.freecodecamp.org/news/designing-keyboard-accessibility-for-complex-react-experiences/", + "publishedOn": "2021-06-11T19:10:00.000Z", + "wordCount": 2180, + "title": "How to Design Keyboard Accessibility for Complex React Experiences" + }, + { + "id": "60bc0444acb62507dd1d9a31", + "author": null, + "description": "Knowing how to ask effective technical questions is an essential skill every software engineer should have. You may be stuck with a bug, unable to figure out why your program isn't working correctly, or you might be having trouble learning how to implement a certain algorithm. In all of these", + "link": "https://www.freecodecamp.org/news/how-to-ask-good-technical-questions/", + "publishedOn": "2021-06-11T17:39:28.000Z", + "wordCount": 2143, + "title": "How to Ask Good Technical Questions – the Ultimate Guide" + }, + { + "id": "60c24cf8d3126007592d61d5", + "author": null, + "description": "Do you write conditionals correctly within your React applications? Good conditionals are an essential part of any React application. We use conditionals to show or hide elements or components in our applications. In short – to be an effective React developer, you must know how to write good conditionals. Let's go", + "link": "https://www.freecodecamp.org/news/learn-react-conditionals/", + "publishedOn": "2021-06-11T16:04:46.000Z", + "wordCount": 1323, + "title": "How to Level Up Your React Conditionals" + }, { "id": "60b93afaacb62507dd1d8915", "author": null, @@ -655,56 +700,11 @@ { "id": "60bfa4d4d3126007592d5160", "author": null, - "description": "Throughout this post we’ll deploy your freeCodeCamp front end project using various services on AWS like S3, ElasticBeanstalk, and Lambda.", + "description": "One night in June, 2017 I stumbled across a website called freecodecamp.org. I was a teacher at the time who was looking for a career change. But I assumed being a programmer was out of my reach. After all, I didn’t consider myself a math whiz, never went", "link": "https://www.freecodecamp.org/news/how-to-deploy-your-freecodecamp-project-on-aws/", "publishedOn": "2021-06-08T23:47:43.000Z", "wordCount": 9491, "title": "How to Deploy Your freeCodeCamp Project on AWS – A Beginner's Guide to the Cloud" - }, - { - "id": "60bfd986d3126007592d53a1", - "author": null, - "description": "Arduino is an open-source electronics platform based on easy-to-use hardware and software. Arduino boards are able to read inputs - light on a sensor, a finger on a button, or a Twitter message - and turn it into an output - activating a motor, turning on an LED, publishing something", - "link": "https://www.freecodecamp.org/news/create-your-own-electronics-with-arduino-full-course/", - "publishedOn": "2021-06-08T21:05:13.000Z", - "wordCount": 639, - "title": "Create Your Own Electronics With Arduino - Full Course" - }, - { - "id": "60b23b8911ffb70827ef954e", - "author": null, - "description": "If you're trying to implement CRUD operations using API endpoints, you might find that it's hard to manage data across multiple components. Or maybe you have a modal, but you want to trigger it from a different component. Wrapping your head around how to tackle these scenarios can be difficult.", - "link": "https://www.freecodecamp.org/news/pass-data-between-components-in-react/", - "publishedOn": "2021-06-08T16:17:32.000Z", - "wordCount": 1205, - "title": "How to Pass Data and Events Between Components in React" - }, - { - "id": "60be6a3cd3126007592d4a03", - "author": null, - "description": "Today we're going to learn CSS Grid properties so that you can make your own responsive websites. I'll explain how each of Grid's properties work along with a CheatSheet that covers everything you can do with Grid. Let's go. 🎖️ Table of Contents: CSS Grid Architecture CSS Grid Chart Grid Parent", - "link": "https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/", - "publishedOn": "2021-06-08T16:02:45.000Z", - "wordCount": 2548, - "title": "Complete CSS Grid Tutorial with Cheat Sheet 🎖️" - }, - { - "id": "60bbd28eacb62507dd1d99fb", - "author": null, - "description": "Learn how to build full stack serverless apps with Supabase and Next.js.", - "link": "https://www.freecodecamp.org/news/the-complete-guide-to-full-stack-development-with-supabas/", - "publishedOn": "2021-06-07T23:33:30.000Z", - "wordCount": 3567, - "title": "Full Stack Development with Next.js and Supabase – The Complete Guide" - }, - { - "id": "60be863cd3126007592d4c36", - "author": null, - "description": "OpenCV is a popular Python library for real-time computer vision. We just released a new OpenCV course on the freeCodeCamp.org YouTube channel. This course comes directly from the creators of OpenCV and is the perfect course for beginners. You will learn how to use OpenCV for Computer Vision and", - "link": "https://www.freecodecamp.org/news/how-to-use-opencv-and-python-for-computer-vision-and-ai/", - "publishedOn": "2021-06-07T20:54:41.000Z", - "wordCount": 439, - "title": "How to Use OpenCV and Python for Computer Vision and AI" } ] } diff --git a/feed.atom b/feed.atom index 10039ce..219b60d 100644 --- a/feed.atom +++ b/feed.atom @@ -1,10 +1,111 @@ - urn:2021-06-11T00:38:40.688Z + urn:2021-06-12T00:34:08.833Z osmos::feed - 2021-06-11T00:38:40.688Z + 2021-06-12T00:34:08.833Z osmosfeed 1.10.2 + + <![CDATA[What is a Disaster Recovery Plan? How to Use RTO and RPO to Protect your Business]]> + 60b72d5facb62507dd1d777b + + 2021-06-11T22:56:56.000Z + + + freeCodeCamp.org + + + + <![CDATA[Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo!]]> + https://css-tricks.com/?p=342429 + + 2021-06-11T21:38:48.000Z + + + Chris Coyier + + + + <![CDATA[The Possibilities of Syndication]]> + https://css-tricks.com/?p=342237 + + 2021-06-11T21:25:56.000Z + + + Chris Coyier + + + + <![CDATA[How to Center Anything in CSS Using Flexbox and Grid ✨]]> + 6063b9189618b008528a9d81 + + 2021-06-11T20:40:17.000Z + How to Use Flexbox to center anything horizontally center anything vertically center both horizontally & Vertically How]]> + + freeCodeCamp.org + + + + <![CDATA[How to Design Keyboard Accessibility for Complex React Experiences]]> + 5f9c97e9740569d1a4ca1768 + + 2021-06-11T19:10:00.000Z + + + freeCodeCamp.org + + + + <![CDATA[How to Ask Good Technical Questions – the Ultimate Guide]]> + 60bc0444acb62507dd1d9a31 + + 2021-06-11T17:39:28.000Z + + + freeCodeCamp.org + + + + <![CDATA[How to Level Up Your React Conditionals]]> + 60c24cf8d3126007592d61d5 + + 2021-06-11T16:04:46.000Z + + + freeCodeCamp.org + + + + <![CDATA[Web Design Done Well: Making Use Of Audio]]> + https://smashingmagazine.com/2021/06/web-design-done-well-audio/ + + 2021-06-11T15:00:00.000Z + + + hello@smashingmagazine.com (Frederick O’Brien) + + + + <![CDATA[Adding Shadows to SVG Icons With CSS and SVG Filters]]> + https://css-tricks.com/?p=342164 + + 2021-06-11T14:30:29.000Z + + + Joel Olawanle + + <![CDATA[Put a Background on Open Details Elements]]> https://css-tricks.com/?p=342050 @@ -144,17 +245,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]> 60bfa4d4d3126007592d5160 2021-06-08T23:47:43.000Z - - - freeCodeCamp.org - - - - <![CDATA[Create Your Own Electronics With Arduino - Full Course]]> - 60bfd986d3126007592d53a1 - - 2021-06-08T21:05:13.000Z - + freeCodeCamp.org @@ -171,26 +262,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> Todd Libby - - <![CDATA[How to Pass Data and Events Between Components in React]]> - 60b23b8911ffb70827ef954e - - 2021-06-08T16:17:32.000Z - - - freeCodeCamp.org - - - - <![CDATA[Complete CSS Grid Tutorial with Cheat Sheet 🎖️]]> - 60be6a3cd3126007592d4a03 - - 2021-06-08T16:02:45.000Z - - - freeCodeCamp.org - - <![CDATA[CSS-Trickz: An Experiment with Netlify’s On-Demand Builders]]> https://css-tricks.com/?p=341884 @@ -214,26 +285,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> hello@smashingmagazine.com (Vitaly Friedman) - - <![CDATA[Full Stack Development with Next.js and Supabase – The Complete Guide]]> - 60bbd28eacb62507dd1d99fb - - 2021-06-07T23:33:30.000Z - - - freeCodeCamp.org - - - - <![CDATA[How to Use OpenCV and Python for Computer Vision and AI]]> - 60be863cd3126007592d4c36 - - 2021-06-07T20:54:41.000Z - - - freeCodeCamp.org - - <![CDATA[Links on Accessibility]]> https://css-tricks.com/?p=341805 @@ -318,19 +369,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> Temani Afif - - <![CDATA[Monitoring Lighthouse Scores and Core Web Vitals with DebugBear]]> - https://css-tricks.com/?p=341494 - - 2021-06-03T14:25:19.000Z - - - Chris Coyier - - <![CDATA[Managing Shared State In Vue 3]]> https://smashingmagazine.com/2021/06/managing-shared-state-vue3/ @@ -341,34 +379,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> hello@smashingmagazine.com (Shawn Wildermuth) - - <![CDATA[Debugging iOS Safari]]> - https://css-tricks.com/?p=341724 - - 2021-06-02T21:15:28.000Z - - - Chris Coyier - - - - <![CDATA[A Crash Course in WordPress Block Filters]]> - https://css-tricks.com/?p=341442 - - 2021-06-02T13:35:53.000Z - - - Dmitry Mayorov - - <![CDATA[How To Fix Cumulative Layout Shift (CLS) Issues]]> https://smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/ @@ -650,14 +660,4 @@ Thank you @tianheg, @onnyyonn]]> hello@smashingmagazine.com (Átila Fassina) - - <![CDATA[Frustrating Design Patterns That Need Fixing: Birthday Picker]]> - https://smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/ - - 2021-05-12T12:42:00.000Z - - - hello@smashingmagazine.com (Vitaly Friedman) - - \ No newline at end of file diff --git a/index.html b/index.html index c10a29d..b431511 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,50 @@

CSS-Tricks

+ + +
Put a Background on Open Details Elements @@ -37,6 +81,84 @@ You can support CSS-Tricks by being an MVP Supporter.
+
  • +
    +

    freeCodeCamp.org

    +
    + + + + + +
    +
    • +
  • +
    +

    Articles on Smashing Magazine — For Web Designers And Developers

    +
    + +
    +
    • @@ -51,7 +173,7 @@ You can support CSS-Tricks by being an MVP Supporter. Equal Columns With Flexbox: It’s More Complicated Than You Might Think
    - (14 min) + (15 min) As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed. Let’s break those two down and see how they work together. The post Equal Columns With Flexbox: It’s More Complicated Than You Might Think appeared first on CSS-Tricks. @@ -112,7 +234,7 @@ You can support CSS-Tricks by being an MVP Supporter. Three Front-End Auditing Tools I Discovered Recently
    - (2 min) + (3 min) Building a faster website can be a rocket task these days. There are so many things to consider, so it’s challenging to get everything right. Here are some less-known tools that might help you get there.
    @@ -264,40 +386,7 @@ You can support CSS-Tricks by being an MVP Supporter.
    (32 min) - Throughout this post we’ll deploy your freeCodeCamp front end project using various services on AWS like S3, ElasticBeanstalk, and Lambda. -
    -     -
    - -
    -
    - Create Your Own Electronics With Arduino - Full Course - -
    - (2 min) - Arduino is an open-source electronics platform based on easy-to-use hardware and software. Arduino boards are able to read inputs - light on a sensor, a finger on a button, or a Twitter message - and turn it into an output - activating a motor, turning on an LED, publishing something -
    -     -
    -
    -
    -
    - How to Pass Data and Events Between Components in React - -
    - (4 min) - If you're trying to implement CRUD operations using API endpoints, you might find that it's hard to manage data across multiple components. Or maybe you have a modal, but you want to trigger it from a different component. Wrapping your head around how to tackle these scenarios can be difficult. -
    -     -
    -
    -
    -
    - Complete CSS Grid Tutorial with Cheat Sheet 🎖️ - -
    - (8 min) - Today we're going to learn CSS Grid properties so that you can make your own responsive websites. I'll explain how each of Grid's properties work along with a CheatSheet that covers everything you can do with Grid. Let's go. 🎖️ Table of Contents: CSS Grid Architecture CSS Grid Chart Grid Parent + One night in June, 2017 I stumbled across a website called freecodecamp.org. I was a teacher at the time who was looking for a career change. But I assumed being a programmer was out of my reach. After all, I didn’t consider myself a math whiz, never went
    @@ -359,34 +448,6 @@ You can support CSS-Tricks by being an MVP Supporter.
    -
  • -
    -

    freeCodeCamp.org

    -
    - - -
    -

  • Articles on Smashing Magazine — For Web Designers And Developers

    @@ -478,20 +539,6 @@ You can support CSS-Tricks by being an MVP Supporter. (17 min) A little while back, Chris shared this nice hexagonal grid. And true to its name, it’s using —wait for it — CSS Grid to form that layout. It’s a neat trick! Combining grid columns, grid gaps, and creative clipping … The post Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries appeared first on CSS-Tricks. -You can support CSS-Tricks by being an MVP Supporter. - - - - -
    -
    - Monitoring Lighthouse Scores and Core Web Vitals with DebugBear - -
    - (4 min) - DebugBear takes just a few seconds to start using. You literally point it at a URL you want to watch, and it’ll start watching it. You install nothing. -It’ll start running tests, and you’ve immediately got performance charts you can … -The post Monitoring Lighthouse Scores and Core Web Vitals with DebugBear appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
    @@ -521,42 +568,6 @@ You can support CSS-Tricks by being an MVP Supporter.

    -
    -

    - -