From da064f4098b4c6ff3f799636709c79ccc0623467 Mon Sep 17 00:00:00 2001 From: chuanqisun Date: Tue, 3 Aug 2021 00:44:14 +0000 Subject: [PATCH] deploy: 1f5684a2ae67184fc44cacebc2a14d1ec87ed0f6 --- cache.json | 104 ++++++++++++++++++++++++-------------------- feed.atom | 81 +++++++++++++++++++---------------- index.html | 123 ++++++++++++++++++++++++++++++++--------------------- 3 files changed, 179 insertions(+), 129 deletions(-) diff --git a/cache.json b/cache.json index 47f5bdc..f27c4ec 100644 --- a/cache.json +++ b/cache.json @@ -11,6 +11,24 @@ "feedUrl": "https://css-tricks.com/feed/", "siteUrl": "https://css-tricks.com", "articles": [ + { + "id": "https://css-tricks.com/?p=345756", + "author": "Chris Coyier", + "description": "They are actually called “CSS Module Scripts” and are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class name identifiers in both HTML and CSS. \nNative CSS Modules are …\nThe post CSS Modules (The Native Ones) appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/css-modules-the-native-ones/", + "publishedOn": "2021-08-02T18:28:28.000Z", + "wordCount": 838, + "title": "CSS Modules (The Native Ones)" + }, + { + "id": "https://css-tricks.com/?p=345178", + "author": "Bret Cameron", + "description": "With a little knowledge of music theory, we can use regular HTML, CSS and JavaScript — without any libraries or audio samples — to create a simple digital instrument. Let’s put that into practice and explore one method for creating …\nThe post How to Code a Playable Synth Keyboard appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/how-to-code-a-playable-synth-keyboard/", + "publishedOn": "2021-08-02T14:36:09.000Z", + "wordCount": 2817, + "title": "How to Code a Playable Synth Keyboard" + }, { "id": "https://css-tricks.com/?p=345628", "author": "Chris Coyier", @@ -26,7 +44,7 @@ "description": "The CSS Paint API (part of the magical Houdini family) opens the door to an exciting new world of design in CSS. Using the Paint API, we can create custom shapes, intricate patterns, and beautiful animations — all with a …\nThe post Conjuring Generative Blobs With The CSS Paint API appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/conjuring-generative-blobs-with-the-css-paint-api/", "publishedOn": "2021-07-30T14:54:36.000Z", - "wordCount": 5641, + "wordCount": 5804, "title": "Conjuring Generative Blobs With The CSS Paint API" }, { @@ -53,7 +71,7 @@ "description": "I’d wager to say that most websites that are business-minded have accounts. A way to log into them. Social media sites, eCommerce sites, CMS systems, you name it, having accounts people log into is at the heart of them. So… …\nThe post Developer-Friendly Passwordless Auth appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/developer-friendly-passwordless-auth/", "publishedOn": "2021-07-29T14:47:47.000Z", - "wordCount": 1196, + "wordCount": 1395, "title": "Developer-Friendly Passwordless Auth" }, { @@ -116,7 +134,7 @@ "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": 4317, + "wordCount": 4351, "title": "How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust" }, { @@ -127,24 +145,6 @@ "publishedOn": "2021-07-26T14:36:04.000Z", "wordCount": 550, "title": "Slinkity" - }, - { - "id": "https://css-tricks.com/?p=344019", - "author": "Farai Gandiya", - "description": "As the web gets more and more capable, developers are able to make richer online experiences. There are times, however, where some new web capabilities may not work as you would expect in the interest of usability, security and privacy.…\nThe post Web Features That May Not Work As You’d Expect appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.", - "link": "https://css-tricks.com/web-features-that-may-not-work-as-youd-expect/", - "publishedOn": "2021-07-23T15:12:11.000Z", - "wordCount": 2365, - "title": "Web Features That May Not Work As You’d Expect" - }, - { - "id": "https://css-tricks.com/?p=345209", - "author": "Chris Coyier", - "description": "Dave:\npetite-vue is a new cut of the Vue project specifically built with progressive enhancement in mind. At 5kb, petite-vue is a lightweight Alpine (or jQuery) alternative that can be “sprinkled” over your project requiring no extra bundling steps \n…\nThe post My petite-vue review appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.", - "link": "https://daverupert.com/2021/07/petite-vue-review/", - "publishedOn": "2021-07-23T15:10:08.000Z", - "wordCount": 1060, - "title": "My petite-vue review" } ] }, @@ -153,13 +153,27 @@ "feedUrl": "https://www.smashingmagazine.com/feed/", "siteUrl": "https://www.smashingmagazine.com/", "articles": [ + { + "id": "https://smashingmagazine.com/2021/08/refactoring-css-strategy-regression-testing-maintenance-part2/", + "author": "hello@smashingmagazine.com (Adrian Bece)", + "description": "In this article, we’ll take a deep dive into the refactoring process itself, and cover incremental refactoring strategy, visual regression testing, and maintaining the refactored codebase.", + "link": "https://smashingmagazine.com/2021/08/refactoring-css-strategy-regression-testing-maintenance-part2/", + "publishedOn": "2021-08-02T11:00:00.000Z", + "wordCount": 5987, + "title": "Refactoring CSS: Strategy, Regression Testing And Maintenance (Part 2)", + "enclosure": { + "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1005065b-5daf-4b21-8ac6-89b91effa5b9/refactoring-css-strategy-regression-testing-maintenance-part2.jpg", + "length": "0", + "type": "image/jpg" + } + }, { "id": "https://smashingmagazine.com/2021/07/desktop-wallpaper-calendars-august-2021/", "author": "hello@smashingmagazine.com (Cosima Mielke)", "description": "New month, new wallpapers! In this post, you’ll find unique and inspiring wallpapers for August 2021. Created with love by the community for the community, they come in versions with and without a calendar for the month.", "link": "https://smashingmagazine.com/2021/07/desktop-wallpaper-calendars-august-2021/", "publishedOn": "2021-07-31T07:15:00.000Z", - "wordCount": 2514, + "wordCount": 2512, "title": "Good Vibes In August (2021 Desktop Wallpapers Edition)", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/44276d4d-0b57-4f7a-91cd-c6f3708d09d7/aug-21-cowabunga-preview-opt.png", @@ -173,7 +187,7 @@ "description": "Having an e-commerce store is crucial for any store owner as more and more customers are turning to online shopping. In this tutorial, we shall go through how to create an e-commerce site with Angular 11. The site will use the Commerce Layer as a headless e-commerce API and use Paypal to process payments.", "link": "https://smashingmagazine.com/2021/07/ecommerce-angular11-headless-paypal/", "publishedOn": "2021-07-30T11:00:00.000Z", - "wordCount": 12532, + "wordCount": 12529, "title": "How To Build An E-Commerce Site With Angular 11, Commerce Layer And Paypal", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/959013b7-26f7-4620-af11-f26f306c1512/ecommerce-angular11-headless-paypal.jpg", @@ -187,7 +201,7 @@ "description": "What are absolute units? What are the differences between relative and absolute units, and how do we create accurate sizes on the web? In this article, Elad Shechter explains why CSS absolute units aren’t so absolute.", "link": "https://smashingmagazine.com/2021/07/css-absolute-units/", "publishedOn": "2021-07-29T10:30:00.000Z", - "wordCount": 2945, + "wordCount": 2948, "title": "There Is No Such Thing As A CSS Absolute Unit", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ee35630-bbe1-486c-8877-dacdd4b12869/css-absolute-units.jpg", @@ -201,7 +215,7 @@ "description": "Dialogs are everywhere in modern interface design (for good or for bad), and yet many of them are not accessible to assistive technologies. In this article, we will dig into how to create a short script to create accessible dialogs.", "link": "https://smashingmagazine.com/2021/07/accessible-dialog-from-scratch/", "publishedOn": "2021-07-28T11:00:00.000Z", - "wordCount": 3086, + "wordCount": 3071, "title": "Creating An Accessible Dialog From Scratch", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4ef51448-125a-4906-98f1-11af0e3fad58/accessible-dialog-from-scratch.jpg", @@ -215,7 +229,7 @@ "description": "Next.js has strong opinions about how to organize JavaScript but not CSS. How can we develop patterns that encourage best CSS practices while also following the framework’s logic? The answer is surprisingly simple — to write well-structured CSS that balances global and local styling concerns.", "link": "https://smashingmagazine.com/2021/07/global-local-styling-nextjs/", "publishedOn": "2021-07-27T11:00:00.000Z", - "wordCount": 3554, + "wordCount": 3558, "title": "Global vs. Local Styling In Next.js", "enclosure": { "url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a1756133-541e-429d-82dd-fb6f3988ef56/global-local-styling-nextjs.jpg", @@ -229,7 +243,7 @@ "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": 3083, + "wordCount": 3076, "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", @@ -271,7 +285,7 @@ "description": "Do you need a little inspiration boost? We’ve collected some useful color tools and resources that we’ve discovered lately — to help you get the most out of your creativity. We’ve 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": 3057, + "wordCount": 3054, "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", @@ -299,7 +313,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": 4488, + "wordCount": 4478, "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", @@ -313,7 +327,7 @@ "description": "Web app accessibility appears difficult because it seems that there is little information on the subject available online. Let’s 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": 4787, + "wordCount": 4785, "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", @@ -355,7 +369,7 @@ "description": "Too often dealing with filters can be frustrating. Let’s 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. Here’s why.", "link": "https://smashingmagazine.com/2021/07/frustrating-design-patterns-broken-frozen-filters/", "publishedOn": "2021-07-14T13:30:00.000Z", - "wordCount": 5305, + "wordCount": 5303, "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", @@ -369,7 +383,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": 3256, + "wordCount": 3261, "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", @@ -411,7 +425,7 @@ "description": "Accessibility is often overlooked or bolted on to the end of a project. Let’s 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": 2954, + "wordCount": 2948, "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", @@ -425,7 +439,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, we’re 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": 4786, + "wordCount": 4788, "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", @@ -439,7 +453,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. Let’s 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": 4057, + "wordCount": 4046, "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", @@ -482,6 +496,15 @@ "feedUrl": "https://www.freecodecamp.org/news/rss/", "siteUrl": "https://www.freecodecamp.org/news", "articles": [ + { + "id": "61082bc93306a507d1bfc7b9", + "author": null, + "description": "The internet is a part of our daily life and we use it constantly. But how does it actually work? We just released a course on the freeCodeCamp.org YouTube channel that will teach you how the internet works and basic networking principles. Ian Frost teaches this course. He is", + "link": "https://www.freecodecamp.org/news/how-does-the-internet-work/", + "publishedOn": "2021-08-02T17:39:24.000Z", + "wordCount": 362, + "title": "How does the internet work?" + }, { "id": "6053023028094f59be257c79", "author": null, @@ -551,7 +574,7 @@ "description": "Dockerizing an app makes it simpler to deploy. We just published a full course on the freeCodeCamp.org YouTube channel that will teach you how to deploy 12 apps to 3 popular hosting services. Scalable Scripts developed this course. They create courses on all sorts of languages and frameworks on", "link": "https://www.freecodecamp.org/news/learn-how-to-deploy-12-apps-to-aws-azure-google-cloud/", "publishedOn": "2021-07-29T15:52:57.000Z", - "wordCount": 4836, + "wordCount": 10161, "title": "Learn How to Deploy 12 Apps to AWS, Azure, & Google Cloud" }, { @@ -562,15 +585,6 @@ "publishedOn": "2021-07-29T15:35:00.000Z", "wordCount": 4719, "title": "Visual Basic Excel Tutorial – How to Automate Repetitive Tasks in a Spreadsheet" - }, - { - "id": "61018d5c3306a507d1bfa74a", - "author": null, - "description": "There are many cases where you don't want all of your code to be executed in your programs. Instead, you might want certain code to run only when a specific condition is met, and a different set of code to run when the condition is not satisified. That's where conditional", - "link": "https://www.freecodecamp.org/news/python-if-else-statement-conditional-statements-explained/", - "publishedOn": "2021-07-29T15:32:30.000Z", - "wordCount": 1406, - "title": "Python If Else Statement – Conditional Statements Explained" } ] } diff --git a/feed.atom b/feed.atom index c5aeb7f..9d529f7 100644 --- a/feed.atom +++ b/feed.atom @@ -1,10 +1,53 @@ - urn:2021-08-02T00:39:25.829Z + urn:2021-08-03T00:44:13.673Z osmos::feed - 2021-08-02T00:39:25.829Z + 2021-08-03T00:44:13.673Z osmosfeed 1.11.0 + + <![CDATA[CSS Modules (The Native Ones)]]> + https://css-tricks.com/?p=345756 + + 2021-08-02T18:28:28.000Z + + + Chris Coyier + + + + <![CDATA[How does the internet work?]]> + 61082bc93306a507d1bfc7b9 + + 2021-08-02T17:39:24.000Z + + + freeCodeCamp.org + + + + <![CDATA[How to Code a Playable Synth Keyboard]]> + https://css-tricks.com/?p=345178 + + 2021-08-02T14:36:09.000Z + + + Bret Cameron + + + + <![CDATA[Refactoring CSS: Strategy, Regression Testing And Maintenance (Part 2)]]> + https://smashingmagazine.com/2021/08/refactoring-css-strategy-regression-testing-maintenance-part2/ + + 2021-08-02T11:00:00.000Z + + + hello@smashingmagazine.com (Adrian Bece) + + <![CDATA[Good Vibes In August (2021 Desktop Wallpapers Edition)]]> https://smashingmagazine.com/2021/07/desktop-wallpaper-calendars-august-2021/ @@ -150,16 +193,6 @@ The post GitHub Explains the Open Graph Images appeared first on CSS-Tricks. You freeCodeCamp.org - - <![CDATA[Python If Else Statement – Conditional Statements Explained]]> - 61018d5c3306a507d1bfa74a - - 2021-07-29T15:32:30.000Z - - - freeCodeCamp.org - - <![CDATA[So you want to self-publish books and courses on programming]]> https://css-tricks.com/?p=344993 @@ -312,30 +345,6 @@ The post Slinkity appeared first on CSS-Tricks. You can support CSS-Tricks by be hello@smashingmagazine.com (Paul Scanlon) - - <![CDATA[Web Features That May Not Work As You’d Expect]]> - https://css-tricks.com/?p=344019 - - 2021-07-23T15:12:11.000Z - - - Farai Gandiya - - - - <![CDATA[My petite-vue review]]> - https://css-tricks.com/?p=345209 - - 2021-07-23T15:10:08.000Z - - - Chris Coyier - - <![CDATA[A Guide To Attracting Clients To Your Agency]]> https://smashingmagazine.com/2021/07/guide-attracting-clients-agency/ diff --git a/index.html b/index.html index aa3f2c0..e1395de 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,76 @@ +
+

+ +

  • @@ -419,7 +478,7 @@ The post Demystifying styled-components appeared first on CSS-Tricks. You can su How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust
    - (14 min) + (15 min) 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.
    @@ -462,38 +521,6 @@ The post Slinkity appeared first on CSS-Tricks. You can support CSS-Tricks by be