diff --git a/cache.json b/cache.json index 97f9691..3cedca9 100644 --- a/cache.json +++ b/cache.json @@ -102,13 +102,40 @@ "feedUrl": "https://css-tricks.com/feed/", "siteUrl": "https://css-tricks.com", "articles": [ + { + "id": "https://css-tricks.com/?p=340991", + "author": "Chris Coyier", + "description": "Stefan Judis, two days before I mouthed off about using (X, X, X, X) for talking about specificity, has a great blog post not only using that format, but advocating that browser DevTools should show us that value by …\nThe post Should DevTools teach the CSS cascade? appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://www.stefanjudis.com/blog/should-devtools-teach-the-css-cascade/", + "publishedOn": "2021-05-21T23:22:54.000Z", + "wordCount": 1166, + "title": "Should DevTools teach the CSS cascade?" + }, + { + "id": "https://css-tricks.com/?p=340825", + "author": "Adam Rackis", + "description": "This post is an accelerated introduction to Svelte from the point of view of someone with solid experience with React. I’ll provide a quick introduction, and then shift focus to things like state management and DOM interoperability, among other things. …\nThe post Svelte for the Experienced React Dev appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/svelte-for-the-experienced-react-dev/", + "publishedOn": "2021-05-21T14:30:59.000Z", + "wordCount": 3256, + "title": "Svelte for the Experienced React Dev" + }, + { + "id": "https://css-tricks.com/?p=340919", + "author": "Chris Coyier", + "description": "Collection of common CSS mistakes, and how to fix them\nFrom Stefánia Péter. \nClever idea for a site! Some of them are little mind-twisters that could bite you, and some of them are honing in on best practices that …\nThe post CSS Hell appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://csshell.dev/", + "publishedOn": "2021-05-21T14:29:16.000Z", + "wordCount": 295, + "title": "CSS Hell" + }, { "id": "https://css-tricks.com/?p=340599", "author": "Chris Coyier", "description": "Jonathan Neal tweeted a heck of a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. Valid values for custom properties are quite liberal! So this looks for a CSS rule (e.g. a …\nThe post JSON in CSS appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/json-in-css/", "publishedOn": "2021-05-20T22:29:53.000Z", - "wordCount": 631, + "wordCount": 929, "title": "JSON in CSS" }, { @@ -117,7 +144,7 @@ "description": "Ooo look at this mighty SEO flex from Google: Learn CSS! Well deserved — this is great content. Twenty-three chapters taking you through all the fundamentals of CSS with extra content, like relevant podcasts, interactive examples, and even quizzes to …\nThe post Learn CSS! appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://web.dev/learn/css/", "publishedOn": "2021-05-20T21:51:43.000Z", - "wordCount": 991, + "wordCount": 1040, "title": "Learn CSS!" }, { @@ -126,7 +153,7 @@ "description": "If you follow new developments in CSS, you’ve likely heard of the impending arrival of container queries. We’re going to look at the basics here, but if you’d like another look, check out Una’s “Next Gen CSS: @container” article. …\nThe post Can We Create a “Resize Hack” With Container Queries? appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/can-we-create-a-resize-hack-with-container-queries/", "publishedOn": "2021-05-20T14:24:12.000Z", - "wordCount": 1691, + "wordCount": 1725, "title": "Can We Create a “Resize Hack” With Container Queries?" }, { @@ -153,7 +180,7 @@ "description": "SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external …\nThe post svg-loader: A Different Way to Work With External SVG appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/svg-loader-a-different-way-to-work-with-external-svg/", "publishedOn": "2021-05-19T14:28:19.000Z", - "wordCount": 1558, + "wordCount": 1606, "title": "svg-loader: A Different Way to Work With External SVG" }, { @@ -189,7 +216,7 @@ "description": "I see you. In the back there, behind JavaScript and React and PHP and all those “real” programming languages, I see you. And I appreciate you.\nThe post A Love Letter to HTML & CSS appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/a-love-letter-to-html-css/", "publishedOn": "2021-05-17T14:27:22.000Z", - "wordCount": 2661, + "wordCount": 2908, "title": "A Love Letter to HTML & CSS" }, { @@ -209,33 +236,6 @@ "publishedOn": "2021-05-14T20:34:49.000Z", "wordCount": 2298, "title": "Auto-Generated Social Media Images" - }, - { - "id": "https://css-tricks.com/?p=340343", - "author": "Nathan Babcock", - "description": "!default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. Consider this code snippet:\n$variable: 'test' !default;\nTo the Sass compiler, this line …\nThe post Creating Stylesheet Feature Flags With Sass !default appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://css-tricks.com/creating-stylesheet-feature-flags-with-sass-default/", - "publishedOn": "2021-05-14T14:14:34.000Z", - "wordCount": 1344, - "title": "Creating Stylesheet Feature Flags With Sass !default" - }, - { - "id": "https://css-tricks.com/?p=340403", - "author": "Chris Coyier", - "description": "Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It’s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about …\nThe post HTML Boilerplates appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://css-tricks.com/html-boilerplates/", - "publishedOn": "2021-05-14T14:13:07.000Z", - "wordCount": 781, - "title": "HTML Boilerplates" - }, - { - "id": "https://css-tricks.com/?p=340490", - "author": "Chris Coyier", - "description": "Chen Hui Jing covers some recent movement in DevTools:\nFirefox’s grid inspector was pretty full-featured from the get-to and released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a basic grid inspector \n…\nThe post DevTools for CSS layouts 2021 edition appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/#%F0%9F%9A%B2", - "publishedOn": "2021-05-13T23:22:45.000Z", - "wordCount": 1594, - "title": "DevTools for CSS layouts 2021 edition" } ] }, @@ -244,6 +244,15 @@ "feedUrl": "https://www.smashingmagazine.com/feed/", "siteUrl": "https://www.smashingmagazine.com/", "articles": [ + { + "id": "https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/", + "author": "hello@smashingmagazine.com (Shalabh Vyas)", + "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": 9398, + "title": "Building A Rich Text Editor (WYSIWYG) From Scratch" + }, { "id": "https://smashingmagazine.com/2021/05/new-online-workshops-front-end-ux/", "author": "hello@smashingmagazine.com (Iris Lješnjanin)", @@ -265,7 +274,7 @@ { "id": "https://smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/", "author": "hello@smashingmagazine.com (Vitaly Friedman)", - "description": "Do we need mega-dropdown hover menus in 2021? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better UX.", + "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": 4986, @@ -468,15 +477,6 @@ "publishedOn": "2021-04-22T14:00:00.000Z", "wordCount": 1764, "title": "Web Design Done Well: The Ordinary Made Extraordinary (Part 1)" - }, - { - "id": "https://smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/", - "author": "hello@smashingmagazine.com (Lee Robinson)", - "description": "Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more.", - "link": "https://smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/", - "publishedOn": "2021-04-21T13:55:00.000Z", - "wordCount": 1929, - "title": "A Complete Guide To Incremental Static Regeneration (ISR) With Next.js" } ] }, @@ -485,6 +485,15 @@ "feedUrl": "https://www.freecodecamp.org/news/rss/", "siteUrl": "https://www.freecodecamp.org/news", "articles": [ + { + "id": "6098ce302cd0545b5e944d0b", + "author": "", + "description": "In programming, an array is a collection of elements or items. Arrays store data as elements and retrieve them back when you need them. The array data structure is widely used in all programming languages that support it. In this handbook, I'll teach you all about arrays in JavaScript. You'll", + "link": "https://www.freecodecamp.org/news/the-javascript-array-handbook/", + "publishedOn": "2021-05-21T15:33:45.000Z", + "wordCount": 4309, + "title": "The JavaScript Array Handbook – JS Array Methods Explained with Examples" + }, { "id": "60a6b3ab906c5207e3a7f5fa", "author": "", @@ -565,15 +574,6 @@ "publishedOn": "2021-05-18T17:12:59.000Z", "wordCount": 1973, "title": "Freelance Development Pricing Guide – Should Freelancers Bill by the Hour?" - }, - { - "id": "6068f146d5756f080ba9402d", - "author": "", - "description": "Yes, you can learn to code for free, from the convenience of your own home, and at your own pace. I'm going to show you 101 courses where you can learn computer science and programming for free. The freeCodeCamp courses are completely free and some of them include a free", - "link": "https://www.freecodecamp.org/news/coding-programs-101-ways-to-learn-to-code-for-free/", - "publishedOn": "2021-05-18T16:50:36.000Z", - "wordCount": 3309, - "title": "Coding Programs – 101 Ways to Learn to Code for Free" } ] } diff --git a/feed.atom b/feed.atom index 030ff03..8559a77 100644 --- a/feed.atom +++ b/feed.atom @@ -1,10 +1,68 @@ - urn:2021-05-21T00:45:49.383Z + urn:2021-05-22T00:45:15.383Z osmos::feed - 2021-05-21T00:45:49.383Z + 2021-05-22T00:45:15.383Z osmosfeed 1.7.2 + + <![CDATA[Should DevTools teach the CSS cascade?]]> + https://css-tricks.com/?p=340991 + + 2021-05-21T23:22:54.000Z + + + Chris Coyier + + + + <![CDATA[The JavaScript Array Handbook – JS Array Methods Explained with Examples]]> + 6098ce302cd0545b5e944d0b + + 2021-05-21T15:33:45.000Z + + + + + + + <![CDATA[Svelte for the Experienced React Dev]]> + https://css-tricks.com/?p=340825 + + 2021-05-21T14:30:59.000Z + + + Adam Rackis + + + + <![CDATA[CSS Hell]]> + https://css-tricks.com/?p=340919 + + 2021-05-21T14:29:16.000Z + + + Chris Coyier + + + + <![CDATA[Building A Rich Text Editor (WYSIWYG) From Scratch]]> + https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/ + + 2021-05-21T11:30:00.000Z + + + hello@smashingmagazine.com (Shalabh Vyas) + + <![CDATA[JSON in CSS]]> https://css-tricks.com/?p=340599 @@ -172,7 +230,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]> https://smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/ 2021-05-19T11:40:00.000Z - + hello@smashingmagazine.com (Vitaly Friedman) @@ -210,16 +268,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> - - <![CDATA[Coding Programs – 101 Ways to Learn to Code for Free]]> - 6068f146d5756f080ba9402d - - 2021-05-18T16:50:36.000Z - - - - - <![CDATA[How to Create Neon Text With CSS]]> https://css-tricks.com/?p=340420 @@ -340,32 +388,6 @@ Thank you @tianheg, @onnyyonn]]> 2021-05-14T20:34:49.000Z - - Chris Coyier - - - - <![CDATA[Creating Stylesheet Feature Flags With Sass !default]]> - https://css-tricks.com/?p=340343 - - 2021-05-14T14:14:34.000Z - - - Nathan Babcock - - - - <![CDATA[HTML Boilerplates]]> - https://css-tricks.com/?p=340403 - - 2021-05-14T14:13:07.000Z - Chris Coyier @@ -381,20 +403,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> hello@smashingmagazine.com (Átila Fassina) - - <![CDATA[DevTools for CSS layouts 2021 edition]]> - https://css-tricks.com/?p=340490 - - 2021-05-13T23:22:45.000Z - - - Chris Coyier - - <![CDATA[Frustrating Design Patterns That Need Fixing: Birthday Picker]]> https://smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/ @@ -661,14 +669,4 @@ Chore: Refactored parameter passing for enrich step.]]> hello@smashingmagazine.com (Frederick O’Brien) - - <![CDATA[A Complete Guide To Incremental Static Regeneration (ISR) With Next.js]]> - https://smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/ - - 2021-04-21T13:55:00.000Z - - - hello@smashingmagazine.com (Lee Robinson) - - \ No newline at end of file diff --git a/index.html b/index.html index 236ec97..c116cea 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,92 @@ +
+

+ +

  • @@ -381,7 +456,7 @@ You can support CSS-Tricks by being an MVP Supporter. A Love Letter to HTML & CSS
    - (9 min) + (10 min) I see you. In the back there, behind JavaScript and React and PHP and all those “real” programming languages, I see you. And I appreciate you. The post A Love Letter to HTML & CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter. @@ -491,34 +566,6 @@ Thank you @tianheg, @onnyyonn (8 min) I’ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You’re essentially leaving money on the table without them, because they … The post Auto-Generated Social Media Images appeared first on CSS-Tricks. -You can support CSS-Tricks by being an MVP Supporter. -
    -     - - -
    -
    - Creating Stylesheet Feature Flags With Sass !default - -
    - (4 min) - !default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. Consider this code snippet: -$variable: 'test' !default; -To the Sass compiler, this line … -The post Creating Stylesheet Feature Flags With Sass !default appeared first on CSS-Tricks. -You can support CSS-Tricks by being an MVP Supporter. -
    -     -
    -
    -
    -
    - HTML Boilerplates - -
    - (3 min) - Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It’s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about … -The post HTML Boilerplates appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
    @@ -545,32 +592,6 @@ You can support CSS-Tricks by being an MVP Supporter.
    • -
    -

    - -

    -
    -

    - -