diff --git a/cache.json b/cache.json index bb61b5b..746160b 100644 --- a/cache.json +++ b/cache.json @@ -75,6 +75,33 @@ "feedUrl": "https://css-tricks.com/feed/", "siteUrl": "https://css-tricks.com", "articles": [ + { + "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, + "title": "Put a Background on Open Details Elements" + }, + { + "id": "https://css-tricks.com/?p=341894", + "author": "Kevin Powell", + "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, + "title": "Equal Columns With Flexbox: It’s More Complicated Than You Might Think" + }, + { + "id": "https://css-tricks.com/?p=342182", + "author": "Ikeh Akinyemi", + "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, + "title": "Building a Headless CMS with Fauna and Vercel Functions" + }, { "id": "https://css-tricks.com/?p=340967", "author": "Geoff Graham", @@ -90,7 +117,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", @@ -251,7 +279,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": 2240, + "wordCount": 2247, "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", @@ -265,7 +293,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": 4126, + "wordCount": 4167, "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", @@ -279,7 +307,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": 3544, + "wordCount": 3538, "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", @@ -349,7 +377,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": 2478, + "wordCount": 2518, "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", @@ -363,7 +391,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": 10246, + "wordCount": 10208, "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", @@ -377,7 +405,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": 3781, + "wordCount": 3773, "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", @@ -405,7 +433,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": 1582, + "wordCount": 1579, "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", @@ -419,7 +447,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": 2150, + "wordCount": 2111, "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", @@ -447,7 +475,7 @@ "description": "CSS Container queries bring media queries closer to the target elements themselves and enables them to adapt to virtually any given container or layout. In this article, we’re going to cover CSS container query basics and how to use them today with progressive enhancement or polyfills.", "link": "https://smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/", "publishedOn": "2021-05-24T11:30:00.000Z", - "wordCount": 2736, + "wordCount": 2738, "title": "CSS Container Queries: Use-Cases And Migration Strategies", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d6d809b-0c1a-4074-9eeb-8509dc4d383f/css-container-queries-use-cases-migration-strategies.jpg", @@ -461,7 +489,7 @@ "description": "Let’s build a rich text, WYSIWYG-editor that supports rich text, images, links and some nuanced features from word processing apps. We will use SlateJS to build the shell of the editor and then add a toolbar and custom configurations.", "link": "https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/", "publishedOn": "2021-05-21T11:30:00.000Z", - "wordCount": 9463, + "wordCount": 9467, "title": "Building A Rich Text Editor (WYSIWYG)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bafdd817-038e-4e70-a830-de0f5da659c4/building-wysiwyg-editor-javascript-slatejs.jpg", @@ -489,7 +517,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": 1997, + "wordCount": 1990, "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", @@ -503,7 +531,7 @@ "description": "Everything to keep in mind when designing and building a mega-dropdown, common pitfalls, hover entry/exit delays, trajectory triangle technique and SVG path exit areas.", "link": "https://smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/", "publishedOn": "2021-05-19T11:40:00.000Z", - "wordCount": 5060, + "wordCount": 5059, "title": "Frustrating Design Patterns: Mega-Dropdown Hover Menus", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7c233470-63c3-4557-93c0-a8cc6709b6dd/13-mega-dropdown-hover-menus.png", @@ -559,7 +587,7 @@ "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": 2472, + "wordCount": 2466, "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", @@ -580,34 +608,6 @@ "length": "0", "type": "image/jpg" } - }, - { - "id": "https://smashingmagazine.com/2021/05/little-smashing-stories/", - "author": "hello@smashingmagazine.com (Vitaly Friedman)", - "description": "Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes.", - "link": "https://smashingmagazine.com/2021/05/little-smashing-stories/", - "publishedOn": "2021-05-12T08:00:00.000Z", - "wordCount": 1993, - "title": "Little Smashing Stories", - "enclosure": { - "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b820c735-621c-4e60-8a3f-accb3f66d312/smashing-newsletter-banner.png", - "length": "0", - "type": "image/png" - } - }, - { - "id": "https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/", - "author": "hello@smashingmagazine.com (Stephanie Eckles)", - "description": "A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.", - "link": "https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/", - "publishedOn": "2021-05-11T13:30:00.000Z", - "wordCount": 4908, - "title": "A Primer On CSS Container Queries", - "enclosure": { - "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a2c88b2c-ef73-44e3-885c-2c5c322fb781/smashing-articles-original.png", - "length": "0", - "type": "image/png" - } } ] }, @@ -616,6 +616,15 @@ "feedUrl": "https://www.freecodecamp.org/news/rss/", "siteUrl": "https://www.freecodecamp.org/news", "articles": [ + { + "id": "60b93afaacb62507dd1d8915", + "author": null, + "description": "You can learn everything you need to know to earn the Azure Data Fundamentals certification by completing this free 4.5 hour course. What is the Azure Data Fundamentals Certification?The Azure Data Fundamentals Certification is for those seeking a data-related role such as Data Analyst, Data Engineer, or Data", + "link": "https://www.freecodecamp.org/news/azure-data-fundamentals-certification-dp-900-pass-the-exam-with-this-free-4-5-hour-course/", + "publishedOn": "2021-06-10T11:35:00.000Z", + "wordCount": 583, + "title": "Azure Data Fundamentals Certification (DP-900) – Pass the Exam With This Free 4.5-Hour Course" + }, { "id": "60b357ad11ffb70827ef9a90", "author": null, @@ -637,10 +646,10 @@ { "id": "60c10a1dd3126007592d5988", "author": null, - "description": "Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. We just released a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website. Patrick Muriungi developed this course.", + "description": "Bootstrap is one of the most popular CSS frameworks and Sass is one of the most popular preprocessors for CSS. We just published a course on the freeCodeCamp.org YouTube channel that will teach you about Bootstrap 5 and Sass by building a portfolio website. Patrick Muriungi developed this course.", "link": "https://www.freecodecamp.org/news/learn-bootstrap-5-and-sass-by-building-a-portfolio-website/", "publishedOn": "2021-06-09T18:43:07.000Z", - "wordCount": 336, + "wordCount": 339, "title": "Learn Bootstrap 5 and SASS by Building a Portfolio Website" }, { @@ -696,15 +705,6 @@ "publishedOn": "2021-06-07T20:54:41.000Z", "wordCount": 439, "title": "How to Use OpenCV and Python for Computer Vision and AI" - }, - { - "id": "5ff625967af2371468bb8645", - "author": null, - "description": "Closures are a confusing JavaScript concept to learn, because it's hard to see how they're actually used. Unlike other concepts such as functions, variables, and objects, you don't always use closures conscientiously and directly. You don't say: Oh! Here I will use a closure as a solution. But at the", - "link": "https://www.freecodecamp.org/news/closures-in-javascript/", - "publishedOn": "2021-06-07T18:18:01.000Z", - "wordCount": 1597, - "title": "How to Use Closures in JavaScript – A Beginner's Guide" } ] } diff --git a/feed.atom b/feed.atom index 276df4e..10039ce 100644 --- a/feed.atom +++ b/feed.atom @@ -1,10 +1,77 @@ - urn:2021-06-10T00:41:28.854Z + urn:2021-06-11T00:38:40.688Z osmos::feed - 2021-06-10T00:41:28.854Z + 2021-06-11T00:38:40.688Z osmosfeed 1.10.2 + + <![CDATA[Put a Background on Open Details Elements]]> + https://css-tricks.com/?p=342050 + + 2021-06-11T00:16:28.000Z + 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 … +The post Put a Background on Open Details Elements appeared first on CSS-Tricks. +You can support CSS-Tricks by being an MVP Supporter.]]> + + Chris Coyier + + + + <![CDATA[Useful Front-End Boilerplates And Starter Kits]]> + https://smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/ + + 2021-06-10T15:00:00.000Z + + + hello@smashingmagazine.com (Cosima Mielke) + + + + <![CDATA[Equal Columns With Flexbox: It’s More Complicated Than You Might Think]]> + https://css-tricks.com/?p=341894 + + 2021-06-10T14:34:22.000Z + + + Kevin Powell + + + + <![CDATA[Building a Headless CMS with Fauna and Vercel Functions]]> + https://css-tricks.com/?p=342182 + + 2021-06-10T14:26:47.000Z + + + Ikeh Akinyemi + + + + <![CDATA[Azure Data Fundamentals Certification (DP-900) – Pass the Exam With This Free 4.5-Hour Course]]> + 60b93afaacb62507dd1d8915 + + 2021-06-10T11:35:00.000Z + + + freeCodeCamp.org + + + + <![CDATA[Three Front-End Auditing Tools I Discovered Recently]]> + https://smashingmagazine.com/2021/06/three-frontend-auditing-tools/ + + 2021-06-10T11:15:00.000Z + + + hello@smashingmagazine.com (Stefan Judis) + + <![CDATA[From the Slums of Mumbai to a Rented Apartment – My 30-Year Developer Journey]]> 60b357ad11ffb70827ef9a90 @@ -42,7 +109,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]> 60c10a1dd3126007592d5988 2021-06-09T18:43:07.000Z - + freeCodeCamp.org @@ -180,16 +247,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> Chris Coyier - - <![CDATA[How to Use Closures in JavaScript – A Beginner's Guide]]> - 5ff625967af2371468bb8645 - - 2021-06-07T18:18:01.000Z - - - freeCodeCamp.org - - <![CDATA[VS Code Extensions for HTML]]> https://css-tricks.com/?p=340390 @@ -312,18 +369,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> Dmitry Mayorov - - <![CDATA[Are Custom Properties a “Menu of What Will Change”?]]> - https://css-tricks.com/?p=341572 - - 2021-06-02T13:35:40.000Z - - - Chris Coyier - - <![CDATA[How To Fix Cumulative Layout Shift (CLS) Issues]]> https://smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/ @@ -344,30 +389,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> hello@smashingmagazine.com (Jennifer Brehm) - - <![CDATA[Code blocks, but better]]> - https://css-tricks.com/?p=341720 - - 2021-06-01T22:08:48.000Z - - - Chris Coyier - - - - <![CDATA[Front-End Testing is For Everyone]]> - https://css-tricks.com/?p=341342 - - 2021-06-01T14:17:43.000Z - - - Evgeny Klimenchenko - - <![CDATA[Smashing Podcast Episode 38 With Ivan Akulov: Why Is My React App Slow?]]> https://smashingmagazine.com/2021/06/smashing-podcast-episode-38/ @@ -639,24 +660,4 @@ Thank you @tianheg, @onnyyonn]]> hello@smashingmagazine.com (Vitaly Friedman) - - <![CDATA[Little Smashing Stories]]> - https://smashingmagazine.com/2021/05/little-smashing-stories/ - - 2021-05-12T08:00:00.000Z - - - hello@smashingmagazine.com (Vitaly Friedman) - - - - <![CDATA[A Primer On CSS Container Queries]]> - https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/ - - 2021-05-11T13:30:00.000Z - - - hello@smashingmagazine.com (Stephanie Eckles) - - \ No newline at end of file diff --git a/index.html b/index.html index 7a89435..c10a29d 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,113 @@ +
+

+ +
+
+

+ +

@@ -278,17 +385,6 @@ You can support CSS-Tricks by being an MVP Supporter. -
-
- How to Use Closures in JavaScript – A Beginner's Guide - -
- (5 min) - Closures are a confusing JavaScript concept to learn, because it's hard to see how they're actually used. Unlike other concepts such as functions, variables, and objects, you don't always use closures conscientiously and directly. You don't say: Oh! Here I will use a closure as a solution. But at the -
- -
-
  • @@ -454,19 +550,6 @@ You can support CSS-Tricks by being an MVP Supporter. (14 min) Blocks in WordPress are great. Drop some into the page, arrange them how you like, and you’ve got a pretty sweet landing page with little effort. But what if the default blocks in WordPress need a little tweaking? Like, what … The post A Crash Course in WordPress Block Filters appeared first on CSS-Tricks. -You can support CSS-Tricks by being an MVP Supporter. - - - - -
    -
    - Are Custom Properties a “Menu of What Will Change”? - -
    - (4 min) - PPK laid out an interesting situation in “Two options for using custom properties” where he and Stefan Judis had two different approaches for doing the same thing with custom properties. In one approach, hover and focus styles for a … -The post Are Custom Properties a “Menu of What Will Change”? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
    @@ -507,38 +590,6 @@ You can support CSS-Tricks by being an MVP Supporter.

    -
    -
    - Little Smashing Stories - -
    - (7 min) - Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes. -
    -     -
    -
    - -
    • - - -
    -

    -