From 08363554de8b709a8af239f0afe7d5360b3585e3 Mon Sep 17 00:00:00 2001 From: chuanqisun Date: Fri, 14 May 2021 00:47:46 +0000 Subject: [PATCH] deploy: f25fe2fce936010274b84035a04484a21fd3f2d1 --- cache.json | 180 ++++++++++++++----------------- feed.atom | 209 ++++++++++++++++-------------------- index.html | 308 +++++++++++++++++++++++------------------------------ 3 files changed, 306 insertions(+), 391 deletions(-) diff --git a/cache.json b/cache.json index 8180c6e..3a232ab 100644 --- a/cache.json +++ b/cache.json @@ -102,13 +102,49 @@ "feedUrl": "https://css-tricks.com/feed/", "siteUrl": "https://css-tricks.com", "articles": [ + { + "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" + }, + { + "id": "https://css-tricks.com/?p=340573", + "author": "Chris Coyier", + "description": "My friends at Sparkbox are doing a survey on design systems, as they do each year. Go ahead and fill it out if you please. Here are the results from last year. In both 2019 and 2020, the vibe was …\nThe post 2021 Design Systems (Survey/Courses) appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/2021-design-systems-survey-courses/", + "publishedOn": "2021-05-13T22:55:35.000Z", + "wordCount": 557, + "title": "2021 Design Systems (Survey/Courses)" + }, + { + "id": "https://css-tricks.com/?p=340036", + "author": "Temani Afif", + "description": "When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks though that I want to talk about that might help make things easier, while staying in …\nThe post Advanced CSS Animation Using cubic-bezier() appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/advanced-css-animation-using-cubic-bezier/", + "publishedOn": "2021-05-13T14:24:42.000Z", + "wordCount": 2717, + "title": "Advanced CSS Animation Using cubic-bezier()" + }, + { + "id": "https://css-tricks.com/?p=340118", + "author": "Chris Coyier", + "description": "Building animations can get complicated, particularly compelling animations where you aren’t just rolling a ball across the screen, but building a scene where many things are moving and changing in concert. When compelling animation is the goal, a timeline GUI …\nThe post SVGator 3.0 Reshapes the Way You Create and Animate SVG With Extensive New Features appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", + "link": "https://css-tricks.com/svgator-3-0-reshapes-the-way-you-create-and-animate-svg-with-extensive-new-features/", + "publishedOn": "2021-05-13T14:24:35.000Z", + "wordCount": 925, + "title": "SVGator 3.0 Reshapes the Way You Create and Animate SVG With Extensive New Features" + }, { "id": "https://css-tricks.com/?p=339960", "author": "Sandrina Pereira", "description": "Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled.\nThere are lots of …\nThe post Making Disabled Buttons More Inclusive appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/making-disabled-buttons-more-inclusive/", "publishedOn": "2021-05-12T14:31:07.000Z", - "wordCount": 2554, + "wordCount": 2700, "title": "Making Disabled Buttons More Inclusive" }, { @@ -144,7 +180,7 @@ "description": "Like Jamstack, Netlify is coining this term.\nIf your reaction is: great, a new thing I need to know about and learn, know that while Distributed Persistent Rendering (DPR) does involve some new things, this is actually a push …\nThe post Distributed Persistent Rendering (DPR) appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/distributed-persistent-rendering-dpr/", "publishedOn": "2021-05-11T14:33:10.000Z", - "wordCount": 1369, + "wordCount": 1441, "title": "Distributed Persistent Rendering (DPR)" }, { @@ -162,7 +198,7 @@ "description": "I find build tooling endlessly interesting, especially right now as we’re in a juicy next-gen transitional period with players like Vite, wmr, Snowpack, and esbuild. Hugh Haworth has a good run-down of the new players, and we’ve chatted on …\nThe post Migrating from Parcel to Snowpack appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://benfrain.com/migrating-from-parcel-to-snowpack-build-tool-comparison/", "publishedOn": "2021-05-10T21:13:23.000Z", - "wordCount": 2954, + "wordCount": 2950, "title": "Migrating from Parcel to Snowpack" }, { @@ -171,7 +207,7 @@ "description": "I recently came across an interesting problem. I had to implement a grid of cards with a variable (user-set) aspect ratio that was stored in a --ratio custom property. Boxes with a certain aspect ratio are a classic problem in …\nThe post Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/", "publishedOn": "2021-05-10T14:13:12.000Z", - "wordCount": 3117, + "wordCount": 3158, "title": "Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal" }, { @@ -180,7 +216,7 @@ "description": "I have a real distaste for this question. It might seem like a fun question to dig into on the surface, but the way it enters public discourse rarely seems to be in good faith. There are ulterior motives at …\nThe post Is CSS a Programming Language? appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://css-tricks.com/is-css-a-programming-language/", "publishedOn": "2021-05-07T13:56:17.000Z", - "wordCount": 3601, + "wordCount": 3693, "title": "Is CSS a Programming Language?" }, { @@ -198,44 +234,8 @@ "description": "While I’m 85% certain you’ve seen and used Can I Use…, I bet there is only a 13% chance that you’ve seen and used Can I Email…. It’s the same vibe—detailed support information for web platform features—except instead …\nThe post Can I Email… appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", "link": "https://www.caniemail.com/", "publishedOn": "2021-05-07T02:38:56.000Z", - "wordCount": 324, + "wordCount": 326, "title": "Can I Email…" - }, - { - "id": "https://css-tricks.com/?p=340015", - "author": "Chris Coyier", - "description": "Route53 is DNS management service by AWS. DNS is absolutely not a database, and yet here’s Nicholas Martin writing up some very clever trickery originally done by Corey Quinn:\nWhen you think about it, DNS configuration is actually a \n…\nThe post Apparently, You Can Use Route53 as a Blazingly Fast Database appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://betterprogramming.pub/apparently-you-can-use-route53-as-a-blazingly-fast-database-dd416b56b005", - "publishedOn": "2021-05-06T20:03:26.000Z", - "wordCount": 1523, - "title": "Apparently, You Can Use Route53 as a Blazingly Fast Database" - }, - { - "id": "https://css-tricks.com/?p=339936", - "author": "Geoff Graham", - "description": "It’s easy to forget that, as a search engine, Google doesn’t just compare keywords to generate search results. Google knows that if people don’t enjoy their experience on a web page, they won’t stay on the page long enough to …\nThe post What Google’s New Page Experience Update Means for Images on Your Website appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://css-tricks.com/what-googles-new-page-experience-update-means-for-images-on-your-website/", - "publishedOn": "2021-05-06T19:57:40.000Z", - "wordCount": 2599, - "title": "What Google’s New Page Experience Update Means for Images on Your Website" - }, - { - "id": "https://css-tricks.com/?p=339586", - "author": "Šime Vidas", - "description": "There is an increasing number of “custom” features on the web platform. We have custom properties (--my-property), custom elements (<my-element>), and custom events (new CustomEvent('myEvent')). At one point, we might even get custom media …\nThe post Custom State Pseudo-Classes in Chrome appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://css-tricks.com/custom-state-pseudo-classes-in-chrome/", - "publishedOn": "2021-05-06T14:28:53.000Z", - "wordCount": 1166, - "title": "Custom State Pseudo-Classes in Chrome" - }, - { - "id": "https://css-tricks.com/?p=339563", - "author": "Chris Coyier", - "description": "You can’t even look at code or documentation for Astro (publicly) yet — it’s an in-progress idea — but you can watch a video of Fred showing it off to Feross. \nI gotta admit: it looks awesome. I’m bullish …\nThe post Astro appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.", - "link": "https://css-tricks.com/astro/", - "publishedOn": "2021-05-05T21:49:23.000Z", - "wordCount": 1029, - "title": "Astro" } ] }, @@ -468,24 +468,6 @@ "publishedOn": "2021-04-15T10:30:00.000Z", "wordCount": 967, "title": "From Cats With Love: New Navigation, Guides And Workshops" - }, - { - "id": "https://smashingmagazine.com/2021/04/css-overflow-issues/", - "author": "hello@smashingmagazine.com (Ahmad Shadeed)", - "description": "In this article, we will explore the causes of overflow issues and how to solve them. We will also explore how modern features in the developer tools (DevTools) can make the process of fixing and debugging easier.", - "link": "https://smashingmagazine.com/2021/04/css-overflow-issues/", - "publishedOn": "2021-04-14T11:00:00.000Z", - "wordCount": 1917, - "title": "Overflow Issues In CSS" - }, - { - "id": "https://smashingmagazine.com/2021/04/building-video-streaming-app-nuxtjs-node-express/", - "author": "hello@smashingmagazine.com (Deven Rathore)", - "description": "In this article, we’ll be building a video streaming app using Nuxt.js and Node.js. Specifically, we’ll build a server-side Node.js app that will handle fetching and streaming videos, generating thumbnails for your videos, and serving captions and subtitles.", - "link": "https://smashingmagazine.com/2021/04/building-video-streaming-app-nuxtjs-node-express/", - "publishedOn": "2021-04-13T14:00:00.000Z", - "wordCount": 3154, - "title": "Building A Video Streaming App With Nuxt.js, Node And Express" } ] }, @@ -494,14 +476,50 @@ "feedUrl": "https://www.freecodecamp.org/news/rss/", "siteUrl": "https://www.freecodecamp.org/news", "articles": [ + { + "id": "609414f32cd0545b5e943526", + "author": "", + "description": "If you manage a large community, chances are you need a way to communicate updates to your members quickly and efficiently. An email newsletter can be a very effective way to do so. In this article, I am going to provide some tips and suggestions for maximizing the impact and", + "link": "https://www.freecodecamp.org/news/how-to-create-an-email-newsletter-design-layout-send/", + "publishedOn": "2021-05-13T21:19:40.000Z", + "wordCount": 1733, + "title": "How to Create an Email Newsletter [2021 Tutorial] – Design, Layout, Send" + }, + { + "id": "609952396008950828b3ea8d", + "author": "", + "description": "Software development and testing go hand in hand. And in the era of agile software development, with quick releases of small iterations, you should do testing more and more frequently. In order to perform effective testing, you need to know about the different types of testing and when you should", + "link": "https://www.freecodecamp.org/news/types-of-software-testing/", + "publishedOn": "2021-05-13T19:27:45.000Z", + "wordCount": 1826, + "title": "What is Software Testing? The 10 Most Common Types of Tests Developers Use in Projects" + }, + { + "id": "609bcc6a62ab9107fe5a9f08", + "author": "", + "description": "Handling multiple checkboxes in React is completely different from how you use regular HTML checkboxes. So in this article, we'll see how to work with multiple checkboxes in React. You will learn: How to use a checkbox as a Controlled Input in ReactHow to use the array map and reduce", + "link": "https://www.freecodecamp.org/news/how-to-work-with-multiple-checkboxes-in-react/", + "publishedOn": "2021-05-13T18:17:49.000Z", + "wordCount": 1775, + "title": "React Tutorial – How to Work with Multiple Checkboxes" + }, + { + "id": "609ccb0d62ab9107fe5aa0ce", + "author": "", + "description": "I was a corporate lawyer for 12 years. I never thought I'd be working at Google as a software engineer, but now I am. And I'm going to share with you ten important lessons I learned during this career transition. I finished law school in Bangalore, India, a year before", + "link": "https://www.freecodecamp.org/news/from-lawyer-to-google-engineer/", + "publishedOn": "2021-05-13T16:25:03.000Z", + "wordCount": 4002, + "title": "From Lawyer to Engineer at Google – How to Switch Careers and Learn New Skills" + }, { "id": "5fde208ae6787e09839407c3", "author": "", - "description": "In this guide, we will build two simple projects and deploy them on Netlify. We will use Vue.js as our front-end framework, and use different technologies to build our projects. If you follow this tutorial to the end, you will build a simplified version of Twitter and a single", + "description": "In this free book, we will build two simple projects and deploy them on Netlify. We will use Vue.js as our front-end framework, and use different technologies to build our projects. If you follow this tutorial to the end, you will build a simplified version of Twitter and a", "link": "https://www.freecodecamp.org/news/build-a-portfolio-with-vuejs/", "publishedOn": "2021-05-12T20:53:20.000Z", - "wordCount": 25100, - "title": "How to Build and Deploy a Portfolio with Vue.JS, Axios, the GitHub REST API, and Netlify" + "wordCount": 25080, + "title": "How to Build and Deploy a Portfolio with Vue.js Axios, the GitHub REST API, and Netlify" }, { "id": "609c215862ab9107fe5a9fa9", @@ -547,42 +565,6 @@ "publishedOn": "2021-05-11T17:29:13.000Z", "wordCount": 1373, "title": "How to Get a Job by Building Relationships – Advice from a Senior Software Engineer" - }, - { - "id": "60856789dd38b9088c2bf4ff", - "author": "", - "description": "Hash Tables are a data structure that allow you to create a list of paired values. You can then retrieve a certain value by using the key for that value, which you put into the table beforehand. A Hash Table transforms a key into an integer index using a hash", - "link": "https://www.freecodecamp.org/news/javascript-hash-table-associative-array-hashing-in-js/", - "publishedOn": "2021-05-11T15:24:00.000Z", - "wordCount": 2519, - "title": "JavaScript Hash Table – Associative Array Hashing in JS" - }, - { - "id": "60977de12cd0545b5e944661", - "author": "", - "description": "In this article, I'll talk about what ChakraUI is and why you should use it. Chakra UI is a component-based library. It's made up of basic building blocks that can help you build the front-end of your web application. It is customizable and reusable, and most importantly it supports ReactJs,", - "link": "https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/", - "publishedOn": "2021-05-11T15:22:27.000Z", - "wordCount": 1680, - "title": "Why You Should Start Using Chakra UI" - }, - { - "id": "60998ee76008950828b3ed10", - "author": "", - "description": "Typography is one of the most important aspects of good design. It is especially important for web designers. We just released a course on the freeCodeCamp.org YouTube channel that will teach you all you need to know about creating good typography as a UX Designer. Hope Armstrong developed this", - "link": "https://www.freecodecamp.org/news/how-to-design-good-typography/", - "publishedOn": "2021-05-11T12:56:14.000Z", - "wordCount": 413, - "title": "How to Design Good Typography - Free Treehouse Course" - }, - { - "id": "605cf4879618b008528a77e2", - "author": "", - "description": "\"It's not about what you know, it's about whom you know.\" \"70-80% of jobs are found via someone's network.\" Most of us have heard cliches and stats like the above. And I think most of us intuitively know that having a network of people that can help us find opportunities", - "link": "https://www.freecodecamp.org/news/networking-for-aspiring-developers/", - "publishedOn": "2021-05-11T01:38:36.000Z", - "wordCount": 3119, - "title": "How to Get Your First Developer Job through Intelligent, Genuine Networking" } ] } diff --git a/feed.atom b/feed.atom index 0154f84..9909f96 100644 --- a/feed.atom +++ b/feed.atom @@ -1,16 +1,106 @@ - urn:2021-05-13T00:45:51.964Z + urn:2021-05-14T00:47:45.927Z osmos::feed - 2021-05-13T00:45:51.964Z + 2021-05-14T00:47:45.927Z osmosfeed 1.6.0 - <![CDATA[How to Build and Deploy a Portfolio with Vue.JS, Axios, the GitHub REST API, and Netlify]]> + <![CDATA[DevTools for CSS layouts 2021 edition]]> + https://css-tricks.com/?p=340490 + + 2021-05-13T23:22:45.000Z + + + Chris Coyier + + + + <![CDATA[2021 Design Systems (Survey/Courses)]]> + https://css-tricks.com/?p=340573 + + 2021-05-13T22:55:35.000Z + + + Chris Coyier + + + + <![CDATA[How to Create an Email Newsletter [2021 Tutorial] – Design, Layout, Send]]> + 609414f32cd0545b5e943526 + + 2021-05-13T21:19:40.000Z + + + + + + + <![CDATA[What is Software Testing? The 10 Most Common Types of Tests Developers Use in Projects]]> + 609952396008950828b3ea8d + + 2021-05-13T19:27:45.000Z + + + + + + + <![CDATA[React Tutorial – How to Work with Multiple Checkboxes]]> + 609bcc6a62ab9107fe5a9f08 + + 2021-05-13T18:17:49.000Z + + + + + + + <![CDATA[From Lawyer to Engineer at Google – How to Switch Careers and Learn New Skills]]> + 609ccb0d62ab9107fe5aa0ce + + 2021-05-13T16:25:03.000Z + + + + + + + <![CDATA[Advanced CSS Animation Using cubic-bezier()]]> + https://css-tricks.com/?p=340036 + + 2021-05-13T14:24:42.000Z + + + Temani Afif + + + + <![CDATA[SVGator 3.0 Reshapes the Way You Create and Animate SVG With Extensive New Features]]> + https://css-tricks.com/?p=340118 + + 2021-05-13T14:24:35.000Z + + + Chris Coyier + + + + <![CDATA[How to Build and Deploy a Portfolio with Vue.js Axios, the GitHub REST API, and Netlify]]> 5fde208ae6787e09839407c3 2021-05-12T20:53:20.000Z - + @@ -122,26 +212,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> - - <![CDATA[JavaScript Hash Table – Associative Array Hashing in JS]]> - 60856789dd38b9088c2bf4ff - - 2021-05-11T15:24:00.000Z - - - - - - - <![CDATA[Why You Should Start Using Chakra UI]]> - 60977de12cd0545b5e944661 - - 2021-05-11T15:22:27.000Z - - - - - <![CDATA[Next Gen CSS: @container]]> https://css-tricks.com/?p=339138 @@ -177,16 +247,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> hello@smashingmagazine.com (Stephanie Eckles) - - <![CDATA[How to Design Good Typography - Free Treehouse Course]]> - 60998ee76008950828b3ed10 - - 2021-05-11T12:56:14.000Z - - - - - <![CDATA[The Conference Platform We Use For Our Online Events: Hopin]]> https://smashingmagazine.com/2021/05/smashingconf-conference-platform-hopin/ @@ -197,16 +257,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> hello@smashingmagazine.com (Amanda Annandale) - - <![CDATA[How to Get Your First Developer Job through Intelligent, Genuine Networking]]> - 605cf4879618b008528a77e2 - - 2021-05-11T01:38:36.000Z - - - - - <![CDATA[Topframe]]> https://css-tricks.com/?p=340020 @@ -341,44 +391,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> Chris Coyier - - <![CDATA[Apparently, You Can Use Route53 as a Blazingly Fast Database]]> - https://css-tricks.com/?p=340015 - - 2021-05-06T20:03:26.000Z - - - Chris Coyier - - - - <![CDATA[What Google’s New Page Experience Update Means for Images on Your Website]]> - https://css-tricks.com/?p=339936 - - 2021-05-06T19:57:40.000Z - - - Geoff Graham - - - - <![CDATA[Custom State Pseudo-Classes in Chrome]]> - https://css-tricks.com/?p=339586 - - 2021-05-06T14:28:53.000Z - - - Šime Vidas - - <![CDATA[Improving The Performance Of Shopify Themes (Case Study)]]> https://smashingmagazine.com/2021/05/improving-performance-shopify-themes-case-study/ @@ -389,19 +401,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]> hello@smashingmagazine.com (Carson Shold) - - <![CDATA[Astro]]> - https://css-tricks.com/?p=339563 - - 2021-05-05T21:49:23.000Z - - - Chris Coyier - - <![CDATA[Reducing HTML Payload With Next.js (Case Study)]]> https://smashingmagazine.com/2021/05/reduce-data-sent-client-nextjs/ @@ -665,24 +664,4 @@ Fixed: Item…]]> hello@smashingmagazine.com (Vitaly Friedman) - - <![CDATA[Overflow Issues In CSS]]> - https://smashingmagazine.com/2021/04/css-overflow-issues/ - - 2021-04-14T11:00:00.000Z - - - hello@smashingmagazine.com (Ahmad Shadeed) - - - - <![CDATA[Building A Video Streaming App With Nuxt.js, Node And Express]]> - https://smashingmagazine.com/2021/04/building-video-streaming-app-nuxtjs-node-express/ - - 2021-04-13T14:00:00.000Z - - - hello@smashingmagazine.com (Deven Rathore) - - \ No newline at end of file diff --git a/index.html b/index.html index 352800b..d4a602d 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,133 @@ +
+

+ +
+ +

@@ -390,7 +469,7 @@ You can support CSS-Tricks by being an MVP Supporter. Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal
- ( 10 min ) + ( 11 min ) I recently came across an interesting problem. I had to implement a grid of cards with a variable (user-set) aspect ratio that was stored in a --ratio custom property. Boxes with a certain aspect ratio are a classic problem in … The post Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter. @@ -533,57 +612,6 @@ You can support CSS-Tricks by being an MVP Supporter.

- -
-

- -
- - -
-

- -
-