This commit is contained in:
chuanqisun 2021-07-27 00:41:35 +00:00
parent d33bd90d94
commit e17b4da476
3 changed files with 308 additions and 253 deletions

View file

@ -11,6 +11,33 @@
"feedUrl": "https://css-tricks.com/feed/",
"siteUrl": "https://css-tricks.com",
"articles": [
{
"id": "https://css-tricks.com/?p=345297",
"author": "Chris Coyier",
"description": "Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey. \nstyled-components seems like the biggest player in the CSS-in-React market. Despite being in that world, I havent yet been fully compelled by it. Im …\nThe post Demystifying styled-components appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://www.joshwcomeau.com/react/demystifying-styled-components/",
"publishedOn": "2021-07-27T00:17:01.000Z",
"wordCount": 2758,
"title": "Demystifying styled-components"
},
{
"id": "https://css-tricks.com/?p=344653",
"author": "Luke Edwards",
"description": "At Cloudflare, we have a great product called Workers KV which is a key-value storage layer that replicates globally. It can handle millions of keys, each of which is accessible from within a Worker script at exceptionally low latencies, …\nThe post How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/how-i-built-a-cross-platform-desktop-application-with-svelte-redis-and-rust/",
"publishedOn": "2021-07-26T14:36:13.000Z",
"wordCount": 4189,
"title": "How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust"
},
{
"id": "https://css-tricks.com/?p=345288",
"author": "Chris Coyier",
"description": "Perhaps the #1 reason I love Astro is that it brings the JavaScript component authoring experience to the Static Site Generator world with zero JavaScript (except bits you very specifically opt-in to). That HTML-first approach is also why I like …\nThe post Slinkity appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://slinkity.dev/",
"publishedOn": "2021-07-26T14:36:04.000Z",
"wordCount": 550,
"title": "Slinkity"
},
{
"id": "https://css-tricks.com/?p=344019",
"author": "Farai Gandiya",
@ -44,7 +71,7 @@
"description": "Were going to walk through the technical process of hooking into Google Drives API to source content on a website. Well examine the step-by-step implementation, as well as how to utilize server-side caching to avoid the major pitfalls to avoid …\nThe post Using Google Drive as a CMS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/using-google-drive-as-a-cms/",
"publishedOn": "2021-07-22T14:44:26.000Z",
"wordCount": 3094,
"wordCount": 3227,
"title": "Using Google Drive as a CMS"
},
{
@ -62,7 +89,7 @@
"description": "Remember Tyler Halls personal story of a UX moment where the popup sharing context menu on iOS had no visible indication that the content inside was scrollable? The thing his mom wanted to do seemed impossible because it was out …\nThe post Yet Another Mobile Context Menu With No Indication it Can Scroll appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/yet-another-mobile-context-menu-with-no-indication-it-can-scroll/",
"publishedOn": "2021-07-21T21:08:17.000Z",
"wordCount": 557,
"wordCount": 579,
"title": "Yet Another Mobile Context Menu With No Indication it Can Scroll"
},
{
@ -98,7 +125,7 @@
"description": "Eric doesnt mince words, especially in the title, but also in the conclusion:\nIn modern web design and development, displaying an image is a highly intentional act. Alternate descriptions allow us to explain the content of the image, and in \n…\nThe post Your Image Is Probably Not Decorative appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/",
"publishedOn": "2021-07-20T20:02:06.000Z",
"wordCount": 1643,
"wordCount": 1640,
"title": "Your Image Is Probably Not Decorative"
},
{
@ -118,33 +145,6 @@
"publishedOn": "2021-07-19T20:51:07.000Z",
"wordCount": 970,
"title": "Images are hard."
},
{
"id": "https://css-tricks.com/?p=343893",
"author": "Bramus Van Damme",
"description": "The Scroll-Linked Animations specification is an upcoming and experimental addition to CSS. Thanks to the @scroll-timeline at-rule and animation-timeline property this specification provides, you can control the time position of regular CSS Animations by scrolling.\nIn this post, well take …\nThe post Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/",
"publishedOn": "2021-07-19T14:43:29.000Z",
"wordCount": 2213,
"title": "Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines"
},
{
"id": "https://css-tricks.com/?p=344217",
"author": "Chris Coyier",
"description": "We sent out an email the other week that ultimately had a <video> in the HTML markup. We send the newsletter by creating it here in the WordPress block editor, which is fetched through RSS-to-Mailchimp. Mailchimp dutifully sent it out, …\nThe post WordPress Admin Warnings in the Block Editor appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/wordpress-admin-warnings-in-the-block-editor/",
"publishedOn": "2021-07-16T20:27:46.000Z",
"wordCount": 714,
"title": "WordPress Admin Warnings in the Block Editor"
},
{
"id": "https://css-tricks.com/?p=344147",
"author": "Mate Marschalko",
"description": "Lets build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then well convert it into a “digital” clock as well. All this with no JavaScript!\nHeres a quick look at the clocks …\nThe post Of Course We Can Make a CSS-Only Clock That Tells the Current Time! appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/of-course-we-can-make-a-css-only-clock-that-tells-the-current-time/",
"publishedOn": "2021-07-16T14:43:01.000Z",
"wordCount": 5143,
"title": "Of Course We Can Make a CSS-Only Clock That Tells the Current Time!"
}
]
},
@ -153,13 +153,27 @@
"feedUrl": "https://www.smashingmagazine.com/feed/",
"siteUrl": "https://www.smashingmagazine.com/",
"articles": [
{
"id": "https://smashingmagazine.com/2021/07/gatsby-serverless-functions-international-space-station/",
"author": "hello@smashingmagazine.com (Paul Scanlon)",
"description": "Gatsby recently announced the launch of “functions”. In this article, Paul Scanlon explains how to get the current location of the International Space Station (ISS) as it orbits the Earth in real-time using [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions/) and then display it on a 3D interactive globe using [React Three Fibre](https://github.com/pmndrs/react-three-fiber).",
"link": "https://smashingmagazine.com/2021/07/gatsby-serverless-functions-international-space-station/",
"publishedOn": "2021-07-26T10:30:00.000Z",
"wordCount": 3092,
"title": "Gatsby Serverless Functions And The International Space Station",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c07c5052-399e-4aee-aa83-706eb1f0c1b6/gatsby-serverless-functions-international-space-station.jpg",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/07/guide-attracting-clients-agency/",
"author": "hello@smashingmagazine.com (Paul Boag)",
"description": "Many web design agencies consider it a badge of honor that they win work exclusively through word-of-mouth recommendations. In this article, Paul Boag explains why that is entirely the wrong attitude and what to do about it.",
"link": "https://smashingmagazine.com/2021/07/guide-attracting-clients-agency/",
"publishedOn": "2021-07-23T11:00:00.000Z",
"wordCount": 3409,
"wordCount": 3391,
"title": "A Guide To Attracting Clients To Your Agency",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1d72d311-2839-48d2-8d23-dbe8951c4ab5/guide-attracting-clients-agency.jpg",
@ -187,7 +201,7 @@
"description": "Do you need a little inspiration boost? Weve collected some useful color tools and resources that weve discovered lately — to help you get the most out of your creativity. Weve also just recently covered [CSS auditing tools](https://www.smashingmagazine.com/2021/03/css-auditing-tools/), [CSS generators](https://www.smashingmagazine.com/2021/03/css-generators/), [accessible front-end components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/), [front-end boilerplates](https://www.smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/) and [VS code extensions](https://www.smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/) — you might find them useful, too.",
"link": "https://smashingmagazine.com/2021/07/color-tools-resources/",
"publishedOn": "2021-07-21T13:00:00.000Z",
"wordCount": 3064,
"wordCount": 3060,
"title": "Color Tools And Resources",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17380a77-f247-450e-be45-2b2e139f7a33/cool-backgrounds.png",
@ -215,7 +229,7 @@
"description": "By adding visual elements to your tests, you can gain more options to add meaningful ways in maintaining a high level of quality for your app. Colby Fayock explains how.",
"link": "https://smashingmagazine.com/2021/07/maintaining-end-to-end-quality-visual-testing/",
"publishedOn": "2021-07-19T10:30:00.000Z",
"wordCount": 4483,
"wordCount": 4490,
"title": "Maintaining End-To-End Quality With Visual Testing",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/565523e3-0845-4042-9cd1-b3e48c75519d/maintaining-end-to-end-quality-visual-testing.jpg",
@ -229,7 +243,7 @@
"description": "Web app accessibility appears difficult because it seems that there is little information on the subject available online. Lets take a closer look at the accessible use of framework features, concrete Vue.js traits, as well as community initiatives and vetted patterns.",
"link": "https://smashingmagazine.com/2021/07/three-insights-vuejs-accessibility/",
"publishedOn": "2021-07-16T13:00:00.000Z",
"wordCount": 4794,
"wordCount": 4788,
"title": "Three Insights I Gained While Researching Vue.js Accessibility",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c3908803-4ddc-4820-8f4e-85e11b4ebbb7/three-insights-vuejs-accessibility.jpg",
@ -243,7 +257,7 @@
"description": "There are two strategies for incrementally building websites that are growing in popularity: Incremental Static Regeneration and Distributed Persistent Rendering. Whats the difference? Lets figure it out.",
"link": "https://smashingmagazine.com/2021/07/isr-dpr-explained/",
"publishedOn": "2021-07-15T14:00:00.000Z",
"wordCount": 1072,
"wordCount": 1079,
"title": "ISR vs DPR: Big Words, Quick Explanation",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8e4090b9-8bd9-4d5a-aaed-5177c46a6803/isr-dpr-explained.jpg",
@ -271,7 +285,7 @@
"description": "Too often dealing with filters can be frustrating. Lets get them right. That means never freeze the UI on a single input, provide text input fallback and never auto-scroll users on a single input. Heres why.",
"link": "https://smashingmagazine.com/2021/07/frustrating-design-patterns-broken-frozen-filters/",
"publishedOn": "2021-07-14T13:30:00.000Z",
"wordCount": 5307,
"wordCount": 5308,
"title": "Frustrating Design Patterns: Broken Filters",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0c5f2df3-3d78-4563-a599-8c924604e84a/7-frustrating-design-patterns.png",
@ -285,7 +299,7 @@
"description": "In JavaScript, attaching an event listener to constantly fire a callback on scroll can be performance-intensive. But there is a better way with Intersection Observer.",
"link": "https://smashingmagazine.com/2021/07/dynamic-header-intersection-observer/",
"publishedOn": "2021-07-13T12:00:00.000Z",
"wordCount": 3255,
"wordCount": 3259,
"title": "Building A Dynamic Header With Intersection Observer",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/67cc7303-3dc9-4d67-b0f4-b6f77783380f/dynamic-header-intersection-observer.jpg",
@ -327,7 +341,7 @@
"description": "Accessibility is often overlooked or bolted on to the end of a project. Lets figure out how to implement and advocate for accessibility from the inception of a project to the release or handoff and beyond.",
"link": "https://smashingmagazine.com/2021/07/strong-case-for-accessibility/",
"publishedOn": "2021-07-09T10:30:00.000Z",
"wordCount": 2953,
"wordCount": 2957,
"title": "Making A Strong Case For Accessibility",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9c226eaa-3251-4d02-9ade-96a88ad759fc/strong-case-for-accessibility.jpg",
@ -341,7 +355,7 @@
"description": "Even though Vue.js claims to have an approachable minimalist framework that can be incrementally adaptable, it can be a little bit overwhelming when starting as a Vue.js newbie. In this article, were looking at ways to make writing Vue.js a breeze.",
"link": "https://smashingmagazine.com/2021/07/tools-practices-speed-up-vuejs-development-process/",
"publishedOn": "2021-07-08T11:00:00.000Z",
"wordCount": 4780,
"wordCount": 4789,
"title": "Tools And Practices To Speed Up The Vue.js Development Process",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/83768020-8004-41f2-b9a9-14b86c18eb4d/tools-practices-speed-up-vuejs-development-process.jpg",
@ -355,7 +369,7 @@
"description": "Interactive Components in Figma allows designers to create a component with states (hover, active, clicked, focus) and make it interactive so that every copy of the component will inherit those same interactions by default. Lets explore how it can reduce the time and effort needed to create interactions for your mock-ups.",
"link": "https://smashingmagazine.com/2021/07/introduction-figma-interactive-components/",
"publishedOn": "2021-07-07T11:00:00.000Z",
"wordCount": 4065,
"wordCount": 4051,
"title": "An Introduction To Figma Interactive Components",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1a8390d0-26c0-4476-bc00-19e8c89b60c5/introduction-figma-interactive-components.jpg",
@ -383,7 +397,7 @@
"description": "In this article, Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects.",
"link": "https://smashingmagazine.com/2021/07/hsl-colors-css/",
"publishedOn": "2021-07-05T10:30:00.000Z",
"wordCount": 1588,
"wordCount": 1587,
"title": "Using HSL Colors In CSS",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/73607a1e-fe7f-47ea-aada-df79342d823a/hsl-colors-css.jpg",
@ -411,7 +425,7 @@
"description": "When writing front-end tests, youll find a lot of pitfalls along the way. Lets explore common mistakes developers make, and how to avoid them. Testing doesnt need to be painful, after all.",
"link": "https://smashingmagazine.com/2021/07/frontend-testing-pitfalls/",
"publishedOn": "2021-07-01T12:30:00.000Z",
"wordCount": 4765,
"wordCount": 4759,
"title": "Its A (Front-End Testing) Trap! Six Common Testing Pitfalls And How To Solve Them",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc1434b9-70c3-4fb2-821e-2128e3373246/frontend-testing-pitfalls.jpg",
@ -425,7 +439,7 @@
"description": "The web is single-threaded. This makes it increasingly hard to write smooth and responsive apps. Workers have a bad rep, but can be an important and useful tool in any web developer's toolbelt for these kinds of problems. Lets get up to speed on Workers on the Web!",
"link": "https://smashingmagazine.com/2021/06/web-workers-2021/",
"publishedOn": "2021-06-30T12:00:00.000Z",
"wordCount": 4734,
"wordCount": 4748,
"title": "The State Of Web Workers In 2021",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/379e4510-b4ab-4fde-9a5d-122738be19b2/web-workers-2021.jpg",
@ -439,7 +453,7 @@
"description": "Lets welcome July with some fresh desktop wallpapers. Designed by artists and designers from around the world, they are available with and without a calendar. Enjoy!",
"link": "https://smashingmagazine.com/2021/06/desktop-wallpaper-calendars-july-2021/",
"publishedOn": "2021-06-30T09:30:00.000Z",
"wordCount": 3712,
"wordCount": 3709,
"title": "The Many Shades Of July (2021 Desktop Wallpapers Edition)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/814b3b6e-1510-4c12-8504-433157173355/july-21-against-the-current-preview-opt.png",
@ -496,6 +510,42 @@
"feedUrl": "https://www.freecodecamp.org/news/rss/",
"siteUrl": "https://www.freecodecamp.org/news",
"articles": [
{
"id": "60fc070722b0e2078fcd0ae1",
"author": null,
"description": "The homepage for the Google Search engine is the most viewed webpage in the world. People conduct billions of searches every day. When you land on the page, right above the search box, you'll see Google's logo. On many occassions the logo will be different and accompanied by what's called",
"link": "https://www.freecodecamp.org/news/google-doodle-games-baseball-pacman-and-more/",
"publishedOn": "2021-07-26T23:01:30.000Z",
"wordCount": 2250,
"title": "Google Doodle Games Baseball, PacMan, and More"
},
{
"id": "60f746ee1d2b080797b807f6",
"author": null,
"description": "Working from home can have its challenges but there are also many benefits. A lot of employees enjoy the flexible schedule, and you can save money from not having to eat out or drive to work. I have curated a list of 25 sites for remote work. Whether you are",
"link": "https://www.freecodecamp.org/news/how-to-find-remote-jobs/",
"publishedOn": "2021-07-26T21:46:24.000Z",
"wordCount": 1095,
"title": "How to Find Remote Jobs 25 Websites To Help You Work from Home Online"
},
{
"id": "60fa671e1d2b080797b81cd4",
"author": null,
"description": "If you're working with React, it can be quite difficult to understand and implement API Requests. So in this article, we'll learn how it all works by implementing CRUD Operations using React, React Hooks, React Router, and Axios. Let's dive in. How to Install Node and npmFirst of all, let's",
"link": "https://www.freecodecamp.org/news/how-to-perform-crud-operations-using-react/",
"publishedOn": "2021-07-26T21:41:00.000Z",
"wordCount": 3761,
"title": "How to Perform CRUD Operations using React, React Hooks, and Axios"
},
{
"id": "60fe9a5222b0e2078fcd154f",
"author": null,
"description": "You might be wondering what pseudocode is and why it's so useful for writing computer programs. But before we jump into pseudocode, let's refresh our memories about what programming and coding are, in the simplest sense. Programming is the manifestation of logic. A program is a set of instructions that",
"link": "https://www.freecodecamp.org/news/what-is-pseudocode-in-programming/",
"publishedOn": "2021-07-26T19:23:37.000Z",
"wordCount": 1468,
"title": "What is Pseudocode? How to Use Pseudocode to Solve Coding Problems"
},
{
"id": "60faae4d1d2b080797b82046",
"author": null,
@ -549,42 +599,6 @@
"publishedOn": "2021-07-22T16:33:55.000Z",
"wordCount": 1861,
"title": "How to Use Webmentions with Gatsby.js A Beginner&#x27;s Guide"
},
{
"id": "60f245ca66c61b07d458e512",
"author": null,
"description": "Understanding CSS Flexbox is super helpful if you want to make your websites responsive. Flexbox is a powerful responsive web design tool that's built right into CSS itself. And we just published a CSS Flexbox crash course on the freeCodeCamp.org YouTube channel. James Maxwell created this course. Not only",
"link": "https://www.freecodecamp.org/news/learn-css-flexbox/",
"publishedOn": "2021-07-22T13:58:50.000Z",
"wordCount": 4843,
"title": "Learn CSS Flexbox in This Crash Course"
},
{
"id": "60f55f3e66c61b07d458ee8c",
"author": null,
"description": "The cascading nature of CSS sometimes makes it tough to understand and use. Developers at all levels often struggle while trying to figure out how to use certain features, and you'll often find yourself googling or asking a colleague for help. So when you're having issues dealing with CSS, don",
"link": "https://www.freecodecamp.org/news/10-css-tricks-for-your-next-coding-project/",
"publishedOn": "2021-07-21T22:39:42.000Z",
"wordCount": 1315,
"title": "CSS Cheat Sheet 10 Tricks to Improve Your Next Coding Project"
},
{
"id": "60f5ecb966c61b07d458f479",
"author": null,
"description": "You use EditorConfig to define formatting conventions for textual files in a project. It's great because it's widely supported, and it's not tied to any particular language, framework, or code editor. EditorConfig on its own is just a vendor-agnostic configuration file. It relies on third-party tools or integrations to implement",
"link": "https://www.freecodecamp.org/news/how-to-use-editorconfig-to-standardize-code-styles/",
"publishedOn": "2021-07-21T21:28:55.000Z",
"wordCount": 1654,
"title": "Why You Should Use EditorConfig to Standardize Code Styles"
},
{
"id": "60f81c021d2b080797b80d44",
"author": null,
"description": "You might have heard of about:blank but don't understand what it is. Or you've seen it appear when you first load up a fresh new session in the Chrome browser just an empty white page with about:blank showing in your address bar. You might even see it when",
"link": "https://www.freecodecamp.org/news/what-is-about-blank-chrome-blank-homepage-guide/",
"publishedOn": "2021-07-21T21:02:54.000Z",
"wordCount": 1132,
"title": "What is about:blank? Chrome Blank Homepage Guide"
}
]
}

163
feed.atom
View file

@ -1,10 +1,94 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>urn:2021-07-26T00:38:44.884Z</id>
<id>urn:2021-07-27T00:41:34.707Z</id>
<title>osmos::feed</title>
<updated>2021-07-26T00:38:44.884Z</updated>
<updated>2021-07-27T00:41:34.707Z</updated>
<generator>osmosfeed 1.11.0</generator>
<link rel="alternate" href="index.html"/>
<entry>
<title type="html"><![CDATA[Demystifying styled-components]]></title>
<id>https://css-tricks.com/?p=345297</id>
<link href="https://www.joshwcomeau.com/react/demystifying-styled-components/"/>
<updated>2021-07-27T00:17:01.000Z</updated>
<summary type="html"><![CDATA[Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey.
styled-components seems like the biggest player in the CSS-in-React market. Despite being in that world, I havent yet been fully compelled by it. Im …
The post Demystifying styled-components 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[Google Doodle Games Baseball, PacMan, and More]]></title>
<id>60fc070722b0e2078fcd0ae1</id>
<link href="https://www.freecodecamp.org/news/google-doodle-games-baseball-pacman-and-more/"/>
<updated>2021-07-26T23:01:30.000Z</updated>
<summary type="html"><![CDATA[The homepage for the Google Search engine is the most viewed webpage in the world. People conduct billions of searches every day. When you land on the page, right above the search box, you'll see Google's logo. On many occassions the logo will be different and accompanied by what's called]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Find Remote Jobs 25 Websites To Help You Work from Home Online]]></title>
<id>60f746ee1d2b080797b807f6</id>
<link href="https://www.freecodecamp.org/news/how-to-find-remote-jobs/"/>
<updated>2021-07-26T21:46:24.000Z</updated>
<summary type="html"><![CDATA[Working from home can have its challenges but there are also many benefits. A lot of employees enjoy the flexible schedule, and you can save money from not having to eat out or drive to work. I have curated a list of 25 sites for remote work. Whether you are]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Perform CRUD Operations using React, React Hooks, and Axios]]></title>
<id>60fa671e1d2b080797b81cd4</id>
<link href="https://www.freecodecamp.org/news/how-to-perform-crud-operations-using-react/"/>
<updated>2021-07-26T21:41:00.000Z</updated>
<summary type="html"><![CDATA[If you're working with React, it can be quite difficult to understand and implement API Requests. So in this article, we'll learn how it all works by implementing CRUD Operations using React, React Hooks, React Router, and Axios. Let's dive in. How to Install Node and npmFirst of all, let's]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What is Pseudocode? How to Use Pseudocode to Solve Coding Problems]]></title>
<id>60fe9a5222b0e2078fcd154f</id>
<link href="https://www.freecodecamp.org/news/what-is-pseudocode-in-programming/"/>
<updated>2021-07-26T19:23:37.000Z</updated>
<summary type="html"><![CDATA[You might be wondering what pseudocode is and why it's so useful for writing computer programs. But before we jump into pseudocode, let's refresh our memories about what programming and coding are, in the simplest sense. Programming is the manifestation of logic. A program is a set of instructions that]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust]]></title>
<id>https://css-tricks.com/?p=344653</id>
<link href="https://css-tricks.com/how-i-built-a-cross-platform-desktop-application-with-svelte-redis-and-rust/"/>
<updated>2021-07-26T14:36:13.000Z</updated>
<summary type="html"><![CDATA[At Cloudflare, we have a great product called Workers KV which is a key-value storage layer that replicates globally. It can handle millions of keys, each of which is accessible from within a Worker script at exceptionally low latencies, …
The post How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Luke Edwards</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Slinkity]]></title>
<id>https://css-tricks.com/?p=345288</id>
<link href="https://slinkity.dev/"/>
<updated>2021-07-26T14:36:04.000Z</updated>
<summary type="html"><![CDATA[Perhaps the #1 reason I love Astro is that it brings the JavaScript component authoring experience to the Static Site Generator world with zero JavaScript (except bits you very specifically opt-in to). That HTML-first approach is also why I like …
The post Slinkity 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[Gatsby Serverless Functions And The International Space Station]]></title>
<id>https://smashingmagazine.com/2021/07/gatsby-serverless-functions-international-space-station/</id>
<link href="https://smashingmagazine.com/2021/07/gatsby-serverless-functions-international-space-station/"/>
<updated>2021-07-26T10:30:00.000Z</updated>
<summary type="html"><![CDATA[Gatsby recently announced the launch of “functions”. In this article, Paul Scanlon explains how to get the current location of the International Space Station (ISS) as it orbits the Earth in real-time using [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions/) and then display it on a 3D interactive globe using [React Three Fibre](https://github.com/pmndrs/react-three-fiber).]]></summary>
<author>
<name>hello@smashingmagazine.com (Paul Scanlon)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Clear Search History Delete All Browsing Data in Chrome]]></title>
<id>60faae4d1d2b080797b82046</id>
@ -134,16 +218,6 @@ The post Hashnode: A Blogging Platform for Developers appeared first on CSS-Tric
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Learn CSS Flexbox in This Crash Course]]></title>
<id>60f245ca66c61b07d458e512</id>
<link href="https://www.freecodecamp.org/news/learn-css-flexbox/"/>
<updated>2021-07-22T13:58:50.000Z</updated>
<summary type="html"><![CDATA[Understanding CSS Flexbox is super helpful if you want to make your websites responsive. Flexbox is a powerful responsive web design tool that's built right into CSS itself. And we just published a CSS Flexbox crash course on the freeCodeCamp.org YouTube channel. James Maxwell created this course. Not only]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Adding Time To Your Schedule As A Professional]]></title>
<id>https://smashingmagazine.com/2021/07/time-schedule-professional-trafft/</id>
@ -154,26 +228,6 @@ The post Hashnode: A Blogging Platform for Developers appeared first on CSS-Tric
<name>hello@smashingmagazine.com (Matthew Talebi)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[CSS Cheat Sheet 10 Tricks to Improve Your Next Coding Project]]></title>
<id>60f55f3e66c61b07d458ee8c</id>
<link href="https://www.freecodecamp.org/news/10-css-tricks-for-your-next-coding-project/"/>
<updated>2021-07-21T22:39:42.000Z</updated>
<summary type="html"><![CDATA[The cascading nature of CSS sometimes makes it tough to understand and use. Developers at all levels often struggle while trying to figure out how to use certain features, and you'll often find yourself googling or asking a colleague for help. So when you're having issues dealing with CSS, don]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Why You Should Use EditorConfig to Standardize Code Styles]]></title>
<id>60f5ecb966c61b07d458f479</id>
<link href="https://www.freecodecamp.org/news/how-to-use-editorconfig-to-standardize-code-styles/"/>
<updated>2021-07-21T21:28:55.000Z</updated>
<summary type="html"><![CDATA[You use EditorConfig to define formatting conventions for textual files in a project. It's great because it's widely supported, and it's not tied to any particular language, framework, or code editor. EditorConfig on its own is just a vendor-agnostic configuration file. It relies on third-party tools or integrations to implement]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Yet Another Mobile Context Menu With No Indication it Can Scroll]]></title>
<id>https://css-tricks.com/?p=344950</id>
@ -198,16 +252,6 @@ The post ECMAScript proposal: JSON modules appeared first on CSS-Tricks. You can
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[What is about:blank? Chrome Blank Homepage Guide]]></title>
<id>60f81c021d2b080797b80d44</id>
<link href="https://www.freecodecamp.org/news/what-is-about-blank-chrome-blank-homepage-guide/"/>
<updated>2021-07-21T21:02:54.000Z</updated>
<summary type="html"><![CDATA[You might have heard of about:blank but don't understand what it is. Or you've seen it appear when you first load up a fresh new session in the Chrome browser just an empty white page with about:blank showing in your address bar. You might even see it when]]></summary>
<author>
<name>freeCodeCamp.org</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[A Step-By-Step Process for Turning Designs Into Code]]></title>
<id>https://css-tricks.com/?p=344337</id>
@ -287,18 +331,6 @@ The post Images are hard. appeared first on CSS-Tricks. You can support CSS-Tric
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines]]></title>
<id>https://css-tricks.com/?p=343893</id>
<link href="https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/"/>
<updated>2021-07-19T14:43:29.000Z</updated>
<summary type="html"><![CDATA[The Scroll-Linked Animations specification is an upcoming and experimental addition to CSS. Thanks to the @scroll-timeline at-rule and animation-timeline property this specification provides, you can control the time position of regular CSS Animations by scrolling.
In this post, well take …
The post Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Bramus Van Damme</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Maintaining End-To-End Quality With Visual Testing]]></title>
<id>https://smashingmagazine.com/2021/07/maintaining-end-to-end-quality-visual-testing/</id>
@ -309,29 +341,6 @@ The post Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Tim
<name>hello@smashingmagazine.com (Colby Fayock)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[WordPress Admin Warnings in the Block Editor]]></title>
<id>https://css-tricks.com/?p=344217</id>
<link href="https://css-tricks.com/wordpress-admin-warnings-in-the-block-editor/"/>
<updated>2021-07-16T20:27:46.000Z</updated>
<summary type="html"><![CDATA[We sent out an email the other week that ultimately had a <video> in the HTML markup. We send the newsletter by creating it here in the WordPress block editor, which is fetched through RSS-to-Mailchimp. Mailchimp dutifully sent it out, …
The post WordPress Admin Warnings in the Block Editor 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[Of Course We Can Make a CSS-Only Clock That Tells the Current Time!]]></title>
<id>https://css-tricks.com/?p=344147</id>
<link href="https://css-tricks.com/of-course-we-can-make-a-css-only-clock-that-tells-the-current-time/"/>
<updated>2021-07-16T14:43:01.000Z</updated>
<summary type="html"><![CDATA[Lets build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then well convert it into a “digital” clock as well. All this with no JavaScript!
Heres a quick look at the clocks …
The post Of Course We Can Make a CSS-Only Clock That Tells the Current Time! appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Mate Marschalko</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Three Insights I Gained While Researching Vue.js Accessibility]]></title>
<id>https://smashingmagazine.com/2021/07/three-insights-vuejs-accessibility/</id>

View file

@ -15,6 +15,132 @@
<body>
<!-- %after-body-begin.html% -->
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-07-27">2021-07-27</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">Demystifying styled-components</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.joshwcomeau.com/react/demystifying-styled-components/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(9 min)</span>
<span>Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey.
styled-components seems like the biggest player in the CSS-in-React market. Despite being in that world, I havent yet been fully compelled by it. Im …
The post Demystifying styled-components 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-07-26">2021-07-26</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">How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/how-i-built-a-cross-platform-desktop-application-with-svelte-redis-and-rust/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(14 min)</span>
<span>At Cloudflare, we have a great product called Workers KV which is a key-value storage layer that replicates globally. It can handle millions of keys, each of which is accessible from within a Worker script at exceptionally low latencies, …
The post How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust 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">Slinkity</summary>
<a class="article-summary-link article-summary-box-outer" href="https://slinkity.dev/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>Perhaps the #1 reason I love Astro is that it brings the JavaScript component authoring experience to the Static Site Generator world with zero JavaScript (except bits you very specifically opt-in to). That HTML-first approach is also why I like …
The post Slinkity 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">Google Doodle Games Baseball, PacMan, and More</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/google-doodle-games-baseball-pacman-and-more/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(8 min)</span>
<span>The homepage for the Google Search engine is the most viewed webpage in the world. People conduct billions of searches every day. When you land on the page, right above the search box, you&#x27;ll see Google&#x27;s logo. On many occassions the logo will be different and accompanied by what&#x27;s called</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Find Remote Jobs 25 Websites To Help You Work from Home Online</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-find-remote-jobs/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>Working from home can have its challenges but there are also many benefits. A lot of employees enjoy the flexible schedule, and you can save money from not having to eat out or drive to work. I have curated a list of 25 sites for remote work. Whether you are</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Perform CRUD Operations using React, React Hooks, and Axios</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-perform-crud-operations-using-react/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(13 min)</span>
<span>If you&#x27;re working with React, it can be quite difficult to understand and implement API Requests. So in this article, we&#x27;ll learn how it all works by implementing CRUD Operations using React, React Hooks, React Router, and Axios. Let&#x27;s dive in. How to Install Node and npmFirst of all, let&#x27;s</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">What is Pseudocode? How to Use Pseudocode to Solve Coding Problems</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-pseudocode-in-programming/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>You might be wondering what pseudocode is and why it&#x27;s so useful for writing computer programs. But before we jump into pseudocode, let&#x27;s refresh our memories about what programming and coding are, in the simplest sense. Programming is the manifestation of logic. A program is a set of instructions that</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">Gatsby Serverless Functions And The International Space Station</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/07/gatsby-serverless-functions-international-space-station/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(10 min)</span>
<span>Gatsby recently announced the launch of “functions”. In this article, Paul Scanlon explains how to get the current location of the International Space Station (ISS) as it orbits the Earth in real-time using [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions/) and then display it on a 3D interactive globe using [React Three Fibre](https://github.com/pmndrs/react-three-fiber).</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-07-23">2021-07-23</time></h2>
<ul class="sources card">
@ -123,7 +249,7 @@ The post Organize your CSS declarations alphabetically appeared first on CSS-Tri
<summary class="article-expander__title">Using Google Drive as a CMS</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/using-google-drive-as-a-cms/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(10 min)</span>
<span class="article-reading-time">(11 min)</span>
<span>Were going to walk through the technical process of hooking into Google Drives API to source content on a website. Well examine the step-by-step implementation, as well as how to utilize server-side caching to avoid the major pitfalls to avoid …
The post Using Google Drive as a CMS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
</div>
@ -192,17 +318,6 @@ The post Hashnode: A Blogging Platform for Developers appeared first on CSS-Tric
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Learn CSS Flexbox in This Crash Course</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/learn-css-flexbox/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(16 min)</span>
<span>Understanding CSS Flexbox is super helpful if you want to make your websites responsive. Flexbox is a powerful responsive web design tool that&#x27;s built right into CSS itself. And we just published a CSS Flexbox crash course on the freeCodeCamp.org YouTube channel. James Maxwell created this course. Not only</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
@ -271,45 +386,6 @@ The post A Step-By-Step Process for Turning Designs Into Code appeared first on
</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">CSS Cheat Sheet 10 Tricks to Improve Your Next Coding Project</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/10-css-tricks-for-your-next-coding-project/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>The cascading nature of CSS sometimes makes it tough to understand and use. Developers at all levels often struggle while trying to figure out how to use certain features, and you&#x27;ll often find yourself googling or asking a colleague for help. So when you&#x27;re having issues dealing with CSS, don</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Why You Should Use EditorConfig to Standardize Code Styles</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-use-editorconfig-to-standardize-code-styles/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(6 min)</span>
<span>You use EditorConfig to define formatting conventions for textual files in a project. It&#x27;s great because it&#x27;s widely supported, and it&#x27;s not tied to any particular language, framework, or code editor. EditorConfig on its own is just a vendor-agnostic configuration file. It relies on third-party tools or integrations to implement</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">What is about:blank? Chrome Blank Homepage Guide</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-about-blank-chrome-blank-homepage-guide/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>You might have heard of about:blank but don&#x27;t understand what it is. Or you&#x27;ve seen it appear when you first load up a fresh new session in the Chrome browser just an empty white page with about:blank showing in your address bar. You might even see it when</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>
@ -416,19 +492,6 @@ The post Images are hard. appeared first on CSS-Tricks. You can support CSS-Tric
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(7 min)</span>
<span>The Scroll-Linked Animations specification is an upcoming and experimental addition to CSS. Thanks to the @scroll-timeline at-rule and animation-timeline property this specification provides, you can control the time position of regular CSS Animations by scrolling.
In this post, well take …
The post Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines 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">
@ -453,37 +516,6 @@ The post Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Tim
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-07-16">2021-07-16</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">WordPress Admin Warnings in the Block Editor</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/wordpress-admin-warnings-in-the-block-editor/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(2 min)</span>
<span>We sent out an email the other week that ultimately had a in the HTML markup. We send the newsletter by creating it here in the WordPress block editor, which is fetched through RSS-to-Mailchimp. Mailchimp dutifully sent it out, …
The post WordPress Admin Warnings in the Block Editor 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">Of Course We Can Make a CSS-Only Clock That Tells the Current Time!</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/of-course-we-can-make-a-css-only-clock-that-tells-the-current-time/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(17 min)</span>
<span>Lets build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then well convert it into a “digital” clock as well. All this with no JavaScript!
Heres a quick look at the clocks …
The post Of Course We Can Make a CSS-Only Clock That Tells the Current Time! 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.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
@ -857,7 +889,7 @@ The post Of Course We Can Make a CSS-Only Clock That Tells the Current Time! app
</section>
<footer>
<time id="build-timestamp" datetime="2021-07-26T00:38:44.868Z">2021-07-26T00:38:44.868Z</time>
<time id="build-timestamp" datetime="2021-07-27T00:41:34.690Z">2021-07-27T00:41:34.690Z</time>
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.11.0</a></span>
</footer>
<script src="index.js"></script>