mirror of
https://github.com/osmoscraft/osmosfeed-template.git
synced 2026-03-11 14:44:24 +00:00
deploy: 1f5684a2ae
This commit is contained in:
chuanqisun
parent
808e1bcaf2
commit
0730be2c7d
3 changed files with 202 additions and 205 deletions
102
cache.json
102
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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
124
feed.atom
124
feed.atom
|
|
@ -1,10 +1,68 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<id>urn:2021-05-21T00:45:49.383Z</id>
|
||||
<id>urn:2021-05-22T00:45:15.383Z</id>
|
||||
<title>osmos::feed</title>
|
||||
<updated>2021-05-21T00:45:49.383Z</updated>
|
||||
<updated>2021-05-22T00:45:15.383Z</updated>
|
||||
<generator>osmosfeed 1.7.2</generator>
|
||||
<link rel="alternate" href="index.html"/>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Should DevTools teach the CSS cascade?]]></title>
|
||||
<id>https://css-tricks.com/?p=340991</id>
|
||||
<link href="https://www.stefanjudis.com/blog/should-devtools-teach-the-css-cascade/"/>
|
||||
<updated>2021-05-21T23:22:54.000Z</updated>
|
||||
<summary type="html"><![CDATA[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 …
|
||||
The post Should DevTools teach the CSS cascade? appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Chris Coyier</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[The JavaScript Array Handbook – JS Array Methods Explained with Examples]]></title>
|
||||
<id>6098ce302cd0545b5e944d0b</id>
|
||||
<link href="https://www.freecodecamp.org/news/the-javascript-array-handbook/"/>
|
||||
<updated>2021-05-21T15:33:45.000Z</updated>
|
||||
<summary type="html"><![CDATA[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]]></summary>
|
||||
<author>
|
||||
<name/>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Svelte for the Experienced React Dev]]></title>
|
||||
<id>https://css-tricks.com/?p=340825</id>
|
||||
<link href="https://css-tricks.com/svelte-for-the-experienced-react-dev/"/>
|
||||
<updated>2021-05-21T14:30:59.000Z</updated>
|
||||
<summary type="html"><![CDATA[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. …
|
||||
The post Svelte for the Experienced React Dev appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Adam Rackis</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[CSS Hell]]></title>
|
||||
<id>https://css-tricks.com/?p=340919</id>
|
||||
<link href="https://csshell.dev/"/>
|
||||
<updated>2021-05-21T14:29:16.000Z</updated>
|
||||
<summary type="html"><![CDATA[Collection of common CSS mistakes, and how to fix them
|
||||
From Stefánia Péter.
|
||||
Clever 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 …
|
||||
The post CSS Hell appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Chris Coyier</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Building A Rich Text Editor (WYSIWYG) From Scratch]]></title>
|
||||
<id>https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/</id>
|
||||
<link href="https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/"/>
|
||||
<updated>2021-05-21T11:30:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[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.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Shalabh Vyas)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[JSON in CSS]]></title>
|
||||
<id>https://css-tricks.com/?p=340599</id>
|
||||
|
|
@ -172,7 +230,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<id>https://smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/</id>
|
||||
<link href="https://smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/"/>
|
||||
<updated>2021-05-19T11:40:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[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.]]></summary>
|
||||
<summary type="html"><![CDATA[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.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Vitaly Friedman)</name>
|
||||
</author>
|
||||
|
|
@ -210,16 +268,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name/>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Coding Programs – 101 Ways to Learn to Code for Free]]></title>
|
||||
<id>6068f146d5756f080ba9402d</id>
|
||||
<link href="https://www.freecodecamp.org/news/coding-programs-101-ways-to-learn-to-code-for-free/"/>
|
||||
<updated>2021-05-18T16:50:36.000Z</updated>
|
||||
<summary type="html"><![CDATA[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]]></summary>
|
||||
<author>
|
||||
<name/>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[How to Create Neon Text With CSS]]></title>
|
||||
<id>https://css-tricks.com/?p=340420</id>
|
||||
|
|
@ -340,32 +388,6 @@ Thank you @tianheg, @onnyyonn]]></summary>
|
|||
<updated>2021-05-14T20:34:49.000Z</updated>
|
||||
<summary type="html"><![CDATA[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.]]></summary>
|
||||
<author>
|
||||
<name>Chris Coyier</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Creating Stylesheet Feature Flags With Sass !default]]></title>
|
||||
<id>https://css-tricks.com/?p=340343</id>
|
||||
<link href="https://css-tricks.com/creating-stylesheet-feature-flags-with-sass-default/"/>
|
||||
<updated>2021-05-14T14:14:34.000Z</updated>
|
||||
<summary type="html"><![CDATA[!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.]]></summary>
|
||||
<author>
|
||||
<name>Nathan Babcock</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[HTML Boilerplates]]></title>
|
||||
<id>https://css-tricks.com/?p=340403</id>
|
||||
<link href="https://css-tricks.com/html-boilerplates/"/>
|
||||
<updated>2021-05-14T14:13:07.000Z</updated>
|
||||
<summary type="html"><![CDATA[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.]]></summary>
|
||||
<author>
|
||||
<name>Chris Coyier</name>
|
||||
|
|
@ -381,20 +403,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
|||
<name>hello@smashingmagazine.com (Átila Fassina)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[DevTools for CSS layouts 2021 edition]]></title>
|
||||
<id>https://css-tricks.com/?p=340490</id>
|
||||
<link href="https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/#%F0%9F%9A%B2"/>
|
||||
<updated>2021-05-13T23:22:45.000Z</updated>
|
||||
<summary type="html"><![CDATA[Chen Hui Jing covers some recent movement in DevTools:
|
||||
Firefox’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
|
||||
…
|
||||
The post DevTools for CSS layouts 2021 edition appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
|
||||
<author>
|
||||
<name>Chris Coyier</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Frustrating Design Patterns That Need Fixing: Birthday Picker]]></title>
|
||||
<id>https://smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/</id>
|
||||
|
|
@ -661,14 +669,4 @@ Chore: Refactored parameter passing for enrich step.]]></summary>
|
|||
<name>hello@smashingmagazine.com (Frederick O’Brien)</name>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[A Complete Guide To Incremental Static Regeneration (ISR) With Next.js]]></title>
|
||||
<id>https://smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/</id>
|
||||
<link href="https://smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/"/>
|
||||
<updated>2021-04-21T13:55:00.000Z</updated>
|
||||
<summary type="html"><![CDATA[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.]]></summary>
|
||||
<author>
|
||||
<name>hello@smashingmagazine.com (Lee Robinson)</name>
|
||||
</author>
|
||||
</entry>
|
||||
</feed>
|
||||
181
index.html
181
index.html
|
|
@ -15,6 +15,92 @@
|
|||
|
||||
<body>
|
||||
<!-- %after-body-begin.html% -->
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-05-21">2021-05-21</time></h2>
|
||||
<ul class="sources card">
|
||||
<li class="source">
|
||||
<section>
|
||||
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
|
||||
<section class="articles-per-source">
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Should DevTools teach the CSS cascade?</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.stefanjudis.com/blog/should-devtools-teach-the-css-cascade/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>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 …
|
||||
The post Should DevTools teach the CSS cascade? appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Svelte for the Experienced React Dev</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/svelte-for-the-experienced-react-dev/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(11 min)</span>
|
||||
<span>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. …
|
||||
The post Svelte for the Experienced React Dev appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">CSS Hell</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://csshell.dev/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(1 min)</span>
|
||||
<span>Collection of common CSS mistakes, and how to fix them
|
||||
From Stefánia Péter.
|
||||
Clever 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 …
|
||||
The post CSS Hell appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
<li class="source">
|
||||
<section>
|
||||
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
|
||||
<section class="articles-per-source">
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">The JavaScript Array Handbook – JS Array Methods Explained with Examples</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/the-javascript-array-handbook/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(14 min)</span>
|
||||
<span>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</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
<li class="source">
|
||||
<section>
|
||||
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
|
||||
<section class="articles-per-source">
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Building A Rich Text Editor (WYSIWYG) From Scratch</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(31 min)</span>
|
||||
<span>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.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-05-20">2021-05-20</time></h2>
|
||||
<ul class="sources card">
|
||||
|
|
@ -27,7 +113,7 @@
|
|||
<summary class="article-expander__title">JSON in CSS</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/json-in-css/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(2 min)</span>
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span>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 …
|
||||
The post JSON in CSS appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
|
|
@ -240,7 +326,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(17 min)</span>
|
||||
<span>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.</span>
|
||||
<span>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.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
|
|
@ -311,17 +397,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Coding Programs – 101 Ways to Learn to Code for Free</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/coding-programs-101-ways-to-learn-to-code-for-free/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(11 min)</span>
|
||||
<span>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</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
<li class="source">
|
||||
|
|
@ -381,7 +456,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
<summary class="article-expander__title">A Love Letter to HTML & CSS</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/a-love-letter-to-html-css/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(9 min)</span>
|
||||
<span class="article-reading-time">(10 min)</span>
|
||||
<span>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.</span>
|
||||
|
|
@ -491,34 +566,6 @@ Thank you @tianheg, @onnyyonn</span>
|
|||
<span class="article-reading-time">(8 min)</span>
|
||||
<span>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.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">Creating Stylesheet Feature Flags With Sass !default</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/creating-stylesheet-feature-flags-with-sass-default/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(4 min)</span>
|
||||
<span>!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.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">HTML Boilerplates</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/html-boilerplates/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(3 min)</span>
|
||||
<span>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.</span>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -545,32 +592,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
|
|||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-05-13">2021-05-13</time></h2>
|
||||
<ul class="sources card">
|
||||
<li class="source">
|
||||
<section>
|
||||
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
|
||||
<section class="articles-per-source">
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">DevTools for CSS layouts 2021 edition</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/#%F0%9F%9A%B2">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(5 min)</span>
|
||||
<span>Chen Hui Jing covers some recent movement in DevTools:
|
||||
Firefox’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
|
||||
…
|
||||
The post DevTools for CSS layouts 2021 edition appeared first on CSS-Tricks.
|
||||
You can support CSS-Tricks by being an MVP Supporter.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-05-12">2021-05-12</time></h2>
|
||||
<ul class="sources card">
|
||||
|
|
@ -1050,31 +1071,9 @@ Chore: Refactored parameter passing for enrich step.</span>
|
|||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="daily-content">
|
||||
<h2 class="daily-heading"><time datatime="2021-04-21">2021-04-21</time></h2>
|
||||
<ul class="sources card">
|
||||
<li class="source">
|
||||
<section>
|
||||
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
|
||||
<section class="articles-per-source">
|
||||
<article>
|
||||
<details class="article-expander">
|
||||
<summary class="article-expander__title">A Complete Guide To Incremental Static Regeneration (ISR) With Next.js</summary>
|
||||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/">
|
||||
<div class="article-summary-box-inner">
|
||||
<span class="article-reading-time">(6 min)</span>
|
||||
<span>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.</span>
|
||||
</div>
|
||||
</a>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<time id="build-timestamp" datetime="2021-05-21T00:45:49.366Z">2021-05-21T00:45:49.366Z</time>
|
||||
<time id="build-timestamp" datetime="2021-05-22T00:45:15.361Z">2021-05-22T00:45:15.361Z</time>
|
||||
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.7.2</a></span>
|
||||
</footer>
|
||||
<script src="index.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue