diff --git a/cache.json b/cache.json
index 582601a..55e86ee 100644
--- a/cache.json
+++ b/cache.json
@@ -5,6 +5,15 @@
       "feedUrl": "https://github.com/osmoscraft/osmosfeed/releases.atom",
       "siteUrl": "https://github.com/osmoscraft/osmosfeed/releases",
       "articles": [
+        {
+          "id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.0",
+          "author": null,
+          "description": "Added: templating system. Demo | Source | Docs\nChore: rendering logic refactoring. Adopting functional paradigm.",
+          "link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.0",
+          "publishedOn": "2021-05-15T09:35:54.000Z",
+          "wordCount": 286,
+          "title": "v1.7.0"
+        },
         {
           "id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.4.0",
           "author": null,
@@ -17,10 +26,10 @@
         {
           "id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.6.0",
           "author": null,
-          "description": "Added: Link from the title of a subscription to its website.\nAdded: Store feedUrl and siteUrl for each source in cache.\nAdded: Semantic element (<time>) for timestamp on the UI.\nAdded: Semantic API for theming the default template. Demo | Source | Docs\nChanged: Moved feed metadata from article level to feed level in cache.\nFixed: Any html-like text was stripped from title. Fixed with encoded text.\nRemoved: href for each source in cache. The value was never used so it's not a breaking change.",
+          "description": "Added: Link from the title of a subscription to its website.\nAdded: Store feedUrl and siteUrl for each source in cache.\nAdded: Semantic element (<time>) for timestamp on the UI.\nAdded: Semantic API for theming the default template. Demo | Source | Docs\nChanged: Moved feed metadata from article level to feed level in cache.\nFixed: Any html-like text was stripped from title. Fixed with encoded text.\nRemoved: href for each source in cache. The value was never used so it's not a breaking change.",
           "link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.6.0",
           "publishedOn": "2021-05-10T08:15:20.000Z",
-          "wordCount": 356,
+          "wordCount": 352,
           "title": "v1.6.0"
         },
         {
@@ -85,15 +94,6 @@
           "publishedOn": "2021-05-05T05:18:27.000Z",
           "wordCount": 278,
           "title": "v1.1.1"
-        },
-        {
-          "id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.0",
-          "author": null,
-          "description": "Added: MIT license\nAdded: cache.json is stamped with the version of the builder. This allows future builder with breaking change to ignore incompatible cache.\nAdded: Feed source retry on fetch error (3 times total, 15 seconds timeout).\nAdded: Item enrichment retry on fetch error (3 times total, 15 seconds timeout).\nAdded: Console log for cache restore and update behavior.\nAdded: npx command: npx osmosfeed\nChanged: Improved console log that breaks down rendered item count into \"new\" and \"cached\".\nFixed: Item…",
-          "link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.0",
-          "publishedOn": "2021-05-05T05:17:37.000Z",
-          "wordCount": 353,
-          "title": "v1.1.0"
         }
       ]
     },
@@ -105,16 +105,16 @@
         {
           "id": "https://css-tricks.com/?p=340136",
           "author": "Chris Coyier",
-          "description": "I&#8217;ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You&#8217;re essentially leaving money on the table without them, because they &#8230;\nThe post Auto-Generated Social Media Images appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "description": "I’ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You’re essentially leaving money on the table without them, because they …\nThe post Auto-Generated Social Media Images appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
           "link": "https://css-tricks.com/auto-generated-social-media-images/",
           "publishedOn": "2021-05-14T20:34:49.000Z",
-          "wordCount": 1881,
+          "wordCount": 1934,
           "title": "Auto-Generated Social Media Images"
         },
         {
           "id": "https://css-tricks.com/?p=340343",
           "author": "Nathan Babcock",
-          "description": "!default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. Consider this code snippet:\n$variable: 'test' !default;\nTo the Sass compiler, this line &#8230;\nThe post Creating Stylesheet Feature Flags With Sass !default appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "description": "!default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. Consider this code snippet:\n$variable: 'test' !default;\nTo the Sass compiler, this line …\nThe post Creating Stylesheet Feature Flags With Sass !default appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
           "link": "https://css-tricks.com/creating-stylesheet-feature-flags-with-sass-default/",
           "publishedOn": "2021-05-14T14:14:34.000Z",
           "wordCount": 1344,
@@ -123,7 +123,7 @@
         {
           "id": "https://css-tricks.com/?p=340403",
           "author": "Chris Coyier",
-          "description": "Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It&#8217;s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about &#8230;\nThe post HTML Boilerplates appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "description": "Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It’s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about …\nThe post HTML Boilerplates appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
           "link": "https://css-tricks.com/html-boilerplates/",
           "publishedOn": "2021-05-14T14:13:07.000Z",
           "wordCount": 749,
@@ -132,7 +132,7 @@
         {
           "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&#160;released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a&#160;basic grid inspector \n&#8230;\nThe post DevTools for CSS layouts 2021 edition appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "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,
@@ -141,7 +141,7 @@
         {
           "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 &#8230;\nThe post 2021 Design Systems (Survey/Courses) appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "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": 605,
@@ -150,7 +150,7 @@
         {
           "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 &#8230;\nThe post Advanced CSS Animation Using cubic-bezier() appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "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": 2745,
@@ -159,16 +159,16 @@
         {
           "id": "https://css-tricks.com/?p=340118",
           "author": "Chris Coyier",
-          "description": "Building animations can get complicated, particularly compelling animations where you aren&#8217;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 &#8230;\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.",
+          "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": 986,
+          "wordCount": 942,
           "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. &#60;button disabled&#62; ) to mark a button as disabled.\nThere are lots of &#8230;\nThe post Making Disabled Buttons More Inclusive appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "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": 2771,
@@ -177,7 +177,7 @@
         {
           "id": "https://css-tricks.com/?p=340359",
           "author": "Chris Coyier",
-          "description": "Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is equally clever and much easier. I particularly like the steps() animation function&#8230;\nThe post CSS Pie Timer Re-Revisited appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "description": "Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is equally clever and much easier. I particularly like the steps() animation function…\nThe post CSS Pie Timer Re-Revisited appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
           "link": "https://css-tricks.com/css-pie-timer-re-revisited/",
           "publishedOn": "2021-05-11T22:00:29.000Z",
           "wordCount": 441,
@@ -186,7 +186,7 @@
         {
           "id": "https://css-tricks.com/?p=340186",
           "author": "Geoff Graham",
-          "description": "How many times have you heard that (or even uttered it under your own breath)? I know I&#8217;ve heard it in conversations. I also know I&#8217;ve wondered the same thing about a product or two — hey, the idea here &#8230;\nThe post I could build this during the weekend appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "description": "How many times have you heard that (or even uttered it under your own breath)? I know I’ve heard it in conversations. I also know I’ve wondered the same thing about a product or two — hey, the idea here …\nThe post I could build this during the weekend appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
           "link": "https://world.hey.com/joaoqalves/i-could-build-this-during-the-weekend-aa093c5e",
           "publishedOn": "2021-05-11T21:04:32.000Z",
           "wordCount": 1416,
@@ -195,7 +195,7 @@
         {
           "id": "https://css-tricks.com/?p=339138",
           "author": "Una Kravets",
-          "description": "Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to &#8230;\nThe post Next Gen CSS: @container appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "description": "Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to …\nThe post Next Gen CSS: @container appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
           "link": "https://css-tricks.com/next-gen-css-container/",
           "publishedOn": "2021-05-11T14:36:10.000Z",
           "wordCount": 1419,
@@ -204,7 +204,7 @@
         {
           "id": "https://css-tricks.com/?p=340106",
           "author": "Chris Coyier",
-          "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 &#8230;\nThe post Distributed Persistent Rendering (DPR) appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "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": 1446,
@@ -213,7 +213,7 @@
         {
           "id": "https://css-tricks.com/?p=340020",
           "author": "Chris Coyier",
-          "description": "This is extremely fun. Jeff Lindsay has created Topframe, and writes:\nAnybody that knows how to mess around with HTML can now mess around with their desktop computing experience.&#160;Topframe&#160;is an open source tool that lets you \n&#8230;\nThe post Topframe appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "description": "This is extremely fun. Jeff Lindsay has created Topframe, and writes:\nAnybody that knows how to mess around with HTML can now mess around with their desktop computing experience. Topframe is an open source tool that lets you \n…\nThe post Topframe appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
           "link": "https://css-tricks.com/topframe/",
           "publishedOn": "2021-05-10T21:14:15.000Z",
           "wordCount": 727,
@@ -222,7 +222,7 @@
         {
           "id": "https://css-tricks.com/?p=340208",
           "author": "Chris Coyier",
-          "description": "I find build tooling endlessly interesting, especially right now as we&#8217;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&#8217;ve chatted on &#8230;\nThe post Migrating from Parcel to Snowpack appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
+          "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": 2953,
@@ -231,7 +231,7 @@
         {
           "id": "https://css-tricks.com/?p=339203",
           "author": "Ana Tudor",
-          "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 &#8230;\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.",
+          "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": 3158,
@@ -283,7 +283,7 @@
         {
           "id": "https://smashingmagazine.com/2021/05/smashingconf-conference-platform-hopin/",
           "author": "hello@smashingmagazine.com (Amanda Annandale)",
-          "description": "At the beginning of 2020, the SmashingConf team was ready for a new year. We had so many things that excited us. New speakers, new workshops, new cities, new attendees, new experiences. And as we all know, 2020 had other ideas. With so many people working from home, we thought we would bring our [Smashing workshops](https://smashingconf.com/online-workshops/) from our home offices to yours &mdash; but how?",
+          "description": "At the beginning of 2020, the SmashingConf team was ready for a new year. We had so many things that excited us. New speakers, new workshops, new cities, new attendees, new experiences. And as we all know, 2020 had other ideas. With so many people working from home, we thought we would bring our [Smashing workshops](https://smashingconf.com/online-workshops/) from our home offices to yours — but how?",
           "link": "https://smashingmagazine.com/2021/05/smashingconf-conference-platform-hopin/",
           "publishedOn": "2021-05-11T10:00:00.000Z",
           "wordCount": 1958,
@@ -391,7 +391,7 @@
         {
           "id": "https://smashingmagazine.com/2021/04/bake-layers-accessibility-testing-process/",
           "author": "hello@smashingmagazine.com (Kate Kalcevich & Mike Gifford)",
-          "description": "Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to \"layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early &mdash; when it’s easier and cheaper to fix them.",
+          "description": "Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to \"layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early — when it’s easier and cheaper to fix them.",
           "link": "https://smashingmagazine.com/2021/04/bake-layers-accessibility-testing-process/",
           "publishedOn": "2021-04-26T11:00:00.000Z",
           "wordCount": 3279,
@@ -450,15 +450,6 @@
           "publishedOn": "2021-04-19T08:30:00.000Z",
           "wordCount": 7206,
           "title": "An In-Depth Guide To Measuring Core Web Vitals"
-        },
-        {
-          "id": "https://smashingmagazine.com/2021/04/mistakes-technical-interviews/",
-          "author": "hello@smashingmagazine.com (Emma Bostian)",
-          "description": "It’s no secret that the technical interview process leaves something to be desired; it’s often riddled with anxiety and stress. In this article, we’ll take a look at seven of the most common mistakes candidates make in their technical interviews and explore ways you can avoid them.",
-          "link": "https://smashingmagazine.com/2021/04/mistakes-technical-interviews/",
-          "publishedOn": "2021-04-16T09:00:00.000Z",
-          "wordCount": 2912,
-          "title": "Seven Mistakes To Avoid In Your Technical Interviews"
         }
       ]
     },
@@ -524,10 +515,10 @@
         {
           "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",
+          "description": "I was a corporate lawyer for 12 years. I never thought I'd be working at Google as a software engineer, but that's what I have been doing for the past year. I'm working remotely until COVID subsides and we can move to San Francisco.  In this article I'm going to",
           "link": "https://www.freecodecamp.org/news/from-lawyer-to-google-engineer/",
           "publishedOn": "2021-05-13T16:25:03.000Z",
-          "wordCount": 4002,
+          "wordCount": 4024,
           "title": "From Lawyer to Engineer at Google – How to Switch Careers and Learn New Skills"
         },
         {
@@ -536,7 +527,7 @@
           "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": 25080,
+          "wordCount": 24536,
           "title": "How to Build and Deploy a Portfolio with Vue.js Axios, the GitHub REST API, and Netlify"
         },
         {
@@ -560,5 +551,5 @@
       ]
     }
   ],
-  "cliVersion": "1.6.0"
+  "cliVersion": "1.7.0"
 }
\ No newline at end of file
diff --git a/feed.atom b/feed.atom
index 6092e82..a881009 100644
--- a/feed.atom
+++ b/feed.atom
@@ -1,16 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom">
-    <id>urn:2021-05-15T00:44:24.615Z</id>
+    <id>urn:2021-05-16T00:48:59.944Z</id>
     <title>osmos::feed</title>
-    <updated>2021-05-15T00:44:24.615Z</updated>
-    <generator>osmosfeed 1.6.0</generator>
+    <updated>2021-05-16T00:48:59.944Z</updated>
+    <generator>osmosfeed 1.7.0</generator>
     <link rel="alternate" href="index.html"/>
+    <entry>
+        <title type="html"><![CDATA[v1.7.0]]></title>
+        <id>https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.0</id>
+        <link href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.0"/>
+        <updated>2021-05-15T09:35:54.000Z</updated>
+        <summary type="html"><![CDATA[Added: templating system. Demo | Source | Docs
+Chore: rendering logic refactoring. Adopting functional paradigm.]]></summary>
+        <author>
+            <name>Release notes from osmosfeed</name>
+        </author>
+    </entry>
     <entry>
         <title type="html"><![CDATA[Auto-Generated Social Media Images]]></title>
         <id>https://css-tricks.com/?p=340136</id>
         <link href="https://css-tricks.com/auto-generated-social-media-images/"/>
         <updated>2021-05-14T20:34:49.000Z</updated>
-        <summary type="html"><![CDATA[I&#8217;ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You&#8217;re essentially leaving money on the table without them, because they &#8230;
+        <summary type="html"><![CDATA[I’ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You’re essentially leaving money on the table without them, because they …
 The post Auto-Generated Social Media Images appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -54,7 +65,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <updated>2021-05-14T14:14:34.000Z</updated>
         <summary type="html"><![CDATA[!default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. Consider this code snippet:
 $variable: 'test' !default;
-To the Sass compiler, this line &#8230;
+To the Sass compiler, this line …
 The post Creating Stylesheet Feature Flags With Sass !default appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -66,7 +77,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=340403</id>
         <link href="https://css-tricks.com/html-boilerplates/"/>
         <updated>2021-05-14T14:13:07.000Z</updated>
-        <summary type="html"><![CDATA[Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It&#8217;s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about &#8230;
+        <summary type="html"><![CDATA[Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It’s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about …
 The post HTML Boilerplates appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -89,8 +100,8 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <link href="https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/#%F0%9F%9A%B2"/>
         <updated>2021-05-13T23:22:45.000Z</updated>
         <summary type="html"><![CDATA[Chen Hui Jing covers some recent movement in DevTools:
-Firefox’s grid inspector was pretty full-featured from the get-to and&#160;released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a&#160;basic grid inspector 
-&#8230;
+Firefox’s grid inspector was pretty full-featured from the get-to and released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a basic grid inspector 
+…
 The post DevTools for CSS layouts 2021 edition appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -102,7 +113,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=340573</id>
         <link href="https://css-tricks.com/2021-design-systems-survey-courses/"/>
         <updated>2021-05-13T22:55:35.000Z</updated>
-        <summary type="html"><![CDATA[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 &#8230;
+        <summary type="html"><![CDATA[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 …
 The post 2021 Design Systems (Survey/Courses) appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -144,7 +155,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>609ccb0d62ab9107fe5aa0ce</id>
         <link href="https://www.freecodecamp.org/news/from-lawyer-to-google-engineer/"/>
         <updated>2021-05-13T16:25:03.000Z</updated>
-        <summary type="html"><![CDATA[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]]></summary>
+        <summary type="html"><![CDATA[I was a corporate lawyer for 12 years. I never thought I'd be working at Google as a software engineer, but that's what I have been doing for the past year. I'm working remotely until COVID subsides and we can move to San Francisco.  In this article I'm going to]]></summary>
         <author>
             <name/>
         </author>
@@ -154,7 +165,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=340036</id>
         <link href="https://css-tricks.com/advanced-css-animation-using-cubic-bezier/"/>
         <updated>2021-05-13T14:24:42.000Z</updated>
-        <summary type="html"><![CDATA[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 &#8230;
+        <summary type="html"><![CDATA[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 …
 The post Advanced CSS Animation Using cubic-bezier() appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -166,7 +177,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=340118</id>
         <link href="https://css-tricks.com/svgator-3-0-reshapes-the-way-you-create-and-animate-svg-with-extensive-new-features/"/>
         <updated>2021-05-13T14:24:35.000Z</updated>
-        <summary type="html"><![CDATA[Building animations can get complicated, particularly compelling animations where you aren&#8217;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 &#8230;
+        <summary type="html"><![CDATA[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 …
 The post SVGator 3.0 Reshapes the Way You Create and Animate SVG With Extensive New Features appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -198,8 +209,8 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=339960</id>
         <link href="https://css-tricks.com/making-disabled-buttons-more-inclusive/"/>
         <updated>2021-05-12T14:31:07.000Z</updated>
-        <summary type="html"><![CDATA[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. &#60;button disabled&#62; ) to mark a button as disabled.
-There are lots of &#8230;
+        <summary type="html"><![CDATA[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.
+There are lots of …
 The post Making Disabled Buttons More Inclusive appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -241,7 +252,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=340359</id>
         <link href="https://css-tricks.com/css-pie-timer-re-revisited/"/>
         <updated>2021-05-11T22:00:29.000Z</updated>
-        <summary type="html"><![CDATA[Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is equally clever and much easier. I particularly like the steps() animation function&#8230;
+        <summary type="html"><![CDATA[Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is equally clever and much easier. I particularly like the steps() animation function…
 The post CSS Pie Timer Re-Revisited appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -253,7 +264,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=340186</id>
         <link href="https://world.hey.com/joaoqalves/i-could-build-this-during-the-weekend-aa093c5e"/>
         <updated>2021-05-11T21:04:32.000Z</updated>
-        <summary type="html"><![CDATA[How many times have you heard that (or even uttered it under your own breath)? I know I&#8217;ve heard it in conversations. I also know I&#8217;ve wondered the same thing about a product or two — hey, the idea here &#8230;
+        <summary type="html"><![CDATA[How many times have you heard that (or even uttered it under your own breath)? I know I’ve heard it in conversations. I also know I’ve wondered the same thing about a product or two — hey, the idea here …
 The post I could build this during the weekend appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -265,7 +276,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=339138</id>
         <link href="https://css-tricks.com/next-gen-css-container/"/>
         <updated>2021-05-11T14:36:10.000Z</updated>
-        <summary type="html"><![CDATA[Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to &#8230;
+        <summary type="html"><![CDATA[Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to …
 The post Next Gen CSS: @container appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -278,7 +289,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <link href="https://css-tricks.com/distributed-persistent-rendering-dpr/"/>
         <updated>2021-05-11T14:33:10.000Z</updated>
         <summary type="html"><![CDATA[Like Jamstack, Netlify is coining this term.
-If 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 &#8230;
+If 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 …
 The post Distributed Persistent Rendering (DPR) appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -300,7 +311,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://smashingmagazine.com/2021/05/smashingconf-conference-platform-hopin/</id>
         <link href="https://smashingmagazine.com/2021/05/smashingconf-conference-platform-hopin/"/>
         <updated>2021-05-11T10:00:00.000Z</updated>
-        <summary type="html"><![CDATA[At the beginning of 2020, the SmashingConf team was ready for a new year. We had so many things that excited us. New speakers, new workshops, new cities, new attendees, new experiences. And as we all know, 2020 had other ideas. With so many people working from home, we thought we would bring our [Smashing workshops](https://smashingconf.com/online-workshops/) from our home offices to yours &mdash; but how?]]></summary>
+        <summary type="html"><![CDATA[At the beginning of 2020, the SmashingConf team was ready for a new year. We had so many things that excited us. New speakers, new workshops, new cities, new attendees, new experiences. And as we all know, 2020 had other ideas. With so many people working from home, we thought we would bring our [Smashing workshops](https://smashingconf.com/online-workshops/) from our home offices to yours — but how?]]></summary>
         <author>
             <name>hello@smashingmagazine.com (Amanda Annandale)</name>
         </author>
@@ -311,8 +322,8 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <link href="https://css-tricks.com/topframe/"/>
         <updated>2021-05-10T21:14:15.000Z</updated>
         <summary type="html"><![CDATA[This is extremely fun. Jeff Lindsay has created Topframe, and writes:
-Anybody that knows how to mess around with HTML can now mess around with their desktop computing experience.&#160;Topframe&#160;is an open source tool that lets you 
-&#8230;
+Anybody that knows how to mess around with HTML can now mess around with their desktop computing experience. Topframe is an open source tool that lets you 
+…
 The post Topframe appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -324,7 +335,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=340208</id>
         <link href="https://benfrain.com/migrating-from-parcel-to-snowpack-build-tool-comparison/"/>
         <updated>2021-05-10T21:13:23.000Z</updated>
-        <summary type="html"><![CDATA[I find build tooling endlessly interesting, especially right now as we&#8217;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&#8217;ve chatted on &#8230;
+        <summary type="html"><![CDATA[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 …
 The post Migrating from Parcel to Snowpack appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <author>
@@ -336,7 +347,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <id>https://css-tricks.com/?p=339203</id>
         <link href="https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/"/>
         <updated>2021-05-10T14:13:12.000Z</updated>
-        <summary type="html"><![CDATA[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 &#8230;
+        <summary type="html"><![CDATA[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.]]></summary>
         <author>
@@ -370,7 +381,7 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
         <updated>2021-05-10T08:15:20.000Z</updated>
         <summary type="html"><![CDATA[Added: Link from the title of a subscription to its website.
 Added: Store feedUrl and siteUrl for each source in cache.
-Added: Semantic element (&lt;time&gt;) for timestamp on the UI.
+Added: Semantic element (<time>) for timestamp on the UI.
 Added: Semantic API for theming the default template. Demo | Source | Docs
 Changed: Moved feed metadata from article level to feed level in cache.
 Fixed: Any html-like text was stripped from title. Fixed with encoded text.
@@ -489,23 +500,6 @@ Chore: Refactored parameter passing for enrich step.]]></summary>
             <name>Release notes from osmosfeed</name>
         </author>
     </entry>
-    <entry>
-        <title type="html"><![CDATA[v1.1.0]]></title>
-        <id>https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.0</id>
-        <link href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.0"/>
-        <updated>2021-05-05T05:17:37.000Z</updated>
-        <summary type="html"><![CDATA[Added: MIT license
-Added: cache.json is stamped with the version of the builder. This allows future builder with breaking change to ignore incompatible cache.
-Added: Feed source retry on fetch error (3 times total, 15 seconds timeout).
-Added: Item enrichment retry on fetch error (3 times total, 15 seconds timeout).
-Added: Console log for cache restore and update behavior.
-Added: npx command: npx osmosfeed
-Changed: Improved console log that breaks down rendered item count into "new" and "cached".
-Fixed: Item…]]></summary>
-        <author>
-            <name>Release notes from osmosfeed</name>
-        </author>
-    </entry>
     <entry>
         <title type="html"><![CDATA[A Guide To Undoing Mistakes With Git]]></title>
         <id>https://smashingmagazine.com/2021/05/undoing-mistakes-git-part1/</id>
@@ -581,7 +575,7 @@ Fixed: Item…]]></summary>
         <id>https://smashingmagazine.com/2021/04/bake-layers-accessibility-testing-process/</id>
         <link href="https://smashingmagazine.com/2021/04/bake-layers-accessibility-testing-process/"/>
         <updated>2021-04-26T11:00:00.000Z</updated>
-        <summary type="html"><![CDATA[Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to "layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early &mdash; when it’s easier and cheaper to fix them.]]></summary>
+        <summary type="html"><![CDATA[Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to "layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early — when it’s easier and cheaper to fix them.]]></summary>
         <author>
             <name>hello@smashingmagazine.com (Kate Kalcevich &amp; Mike Gifford)</name>
         </author>
@@ -646,14 +640,4 @@ Fixed: Item…]]></summary>
             <name>hello@smashingmagazine.com (Barry Pollard)</name>
         </author>
     </entry>
-    <entry>
-        <title type="html"><![CDATA[Seven Mistakes To Avoid In Your Technical Interviews]]></title>
-        <id>https://smashingmagazine.com/2021/04/mistakes-technical-interviews/</id>
-        <link href="https://smashingmagazine.com/2021/04/mistakes-technical-interviews/"/>
-        <updated>2021-04-16T09:00:00.000Z</updated>
-        <summary type="html"><![CDATA[It’s no secret that the technical interview process leaves something to be desired; it’s often riddled with anxiety and stress. In this article, we’ll take a look at seven of the most common mistakes candidates make in their technical interviews and explore ways you can avoid them.]]></summary>
-        <author>
-            <name>hello@smashingmagazine.com (Emma Bostian)</name>
-        </author>
-    </entry>
 </feed>
\ No newline at end of file
diff --git a/styles.css b/index.css
similarity index 95%
rename from styles.css
rename to index.css
index 779ac5c..30fbb7f 100644
--- a/styles.css
+++ b/index.css
@@ -1,194 +1,194 @@
-:root {
-  /**
-   * Palette
-   * Gruvbox dark, medium
-   * Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox)
-   */
-  --base00: #282828; /* ---- */
-  --base01: #3c3836; /* --- */
-  --base02: #504945; /* -- */
-  --base03: #665c54; /* - */
-  --base04: #bdae93; /* + */
-  --base05: #d5c4a1; /* ++ */
-  --base06: #ebdbb2; /* +++ */
-  --base07: #fbf1c7; /* ++++ */
-  --base08: #fb4934; /* red */
-  --base09: #fe8019; /* orange */
-  --base0A: #fabd2f; /* yellow */
-  --base0B: #b8bb26; /* green */
-  --base0C: #8ec07c; /* aqua/cyan */
-  --base0D: #83a598; /* blue */
-  --base0E: #d3869b; /* purple */
-  --base0F: #d65d0e; /* brown */
-
-  /**
-   * Typograph
-   */
-  --font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
-    "Helvetica Neue", sans-serif;
-  --font-size-scaler: 62.5%; /* 1rem = 10px */
-  --font-size-m: 1.4rem;
-  --font-size-s: 1.2rem;
-
-  /**
-   * Components
-   */
-  --body-color: var(--base04);
-  --body-bg: var(--base00);
-
-  --daily-heading-color: var(--base04);
-
-  --source-name-color: var(--base0A);
-  --source-name-hover-color: var(--base0A);
-
-  --article-title-color: var(--base05);
-  --article-title-hover-color: var(--base07);
-  --article-summary-color: var(--base04);
-  --article-summary-hover-color: var(--base07);
-
-  --accordion-content-rail-color: var(--base03);
-  --accordion-content-hover-rail-color: var(--base04);
-  --accordion-title-marker-color: var(--base03);
-  --accordion-title-hover-marker-color: var(--base04);
-
-  --card-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
-  --card-bg: var(--base01);
-  --card-radius: 4px;
-
-  --footer-color: var(--base04);
-  --footer-link-hover-color: var(--base07);
-}
-
-/**
- * Internals below
- *
- * If you can't create a specific look and feel with the configuration above,
- * you might have reached the customization limit of the template.
- *
- * Options:
- * 1. File an issue with the template.
- * 2. Target specific elements and write your own CSS. A future change in HTML may break your style.
- * 3. (Coming soon...) Write your own template with Template Extensibility API.
- */
-html {
-  font-size: var(--font-size-scaler);
-}
-
-body {
-  background-color: var(--body-bg);
-  font-family: var(--font-family-default);
-  color: var(--body-color);
-  margin: 0;
-  gap: 24px;
-  padding: 16px;
-  display: grid;
-}
-
-:not(:focus-visible) {
-  outline: none;
-}
-
-.card {
-  border-radius: var(--card-radius);
-  box-shadow: var(--card-shadow);
-  background: var(--card-bg);
-}
-
-.sources {
-  padding: 12px 16px;
-  list-style: none;
-  margin: 0;
-  display: grid;
-  gap: 16px;
-}
-
-.daily-heading {
-  font-size: var(--font-size-s);
-  font-weight: 600;
-  margin: 0 0 8px 0;
-  padding-left: 16px;
-  color: var(--daily-heading-color);
-}
-
-.source {
-  display: grid;
-  gap: 4px;
-}
-
-.source-name {
-  font-size: var(--font-size-s);
-  font-weight: 400;
-  margin: 0;
-}
-.source-name__link {
-  color: var(--source-name-color);
-  text-decoration: none;
-}
-.source-name__link:hover {
-  color: var(--source-name-hover-color);
-  text-decoration: underline;
-}
-
-.article-expander {
-  padding: 2px 4px;
-  border-radius: 4px;
-}
-
-.article-expander__title {
-  color: var(--article-title-color);
-  font-size: var(--font-size-m);
-  font-weight: 600;
-}
-.article-expander__title:hover {
-  cursor: pointer;
-  color: var(--article-title-hover-color);
-}
-.article-expander__title::marker {
-  color: var(--accordion-title-marker-color);
-}
-.article-expander__title:hover::marker {
-  color: var(--accordion-title-hover-marker-color);
-}
-
-.article-summary-link {
-  color: var(--article-summary-color);
-  font-size: var(--font-size-m);
-  text-decoration: none;
-}
-
-.article-summary-link:hover {
-  color: var(--article-summary-hover-color);
-  --accordion-content-rail-color: var(--accordion-content-hover-rail-color);
-}
-
-.article-summary-box-outer {
-  display: block;
-  padding: 4px 8px 8px 4px;
-}
-
-.article-summary-box-inner {
-  padding-left: 8px;
-  border-left: 1px solid var(--accordion-content-rail-color);
-}
-
-.article-reading-time {
-  font-weight: 600;
-}
-
-footer {
-  color: var(--footer-color);
-  font-size: var(--font-size-s);
-  display: flex;
-  padding: 0 16px;
-  justify-content: space-between;
-}
-
-.footer-link {
-  color: var(--footer-link-text);
-  text-decoration: none;
-}
-
-.footer-link:hover {
-  color: var(--footer-link-hover-color);
-  text-decoration: underline;
-}
+:root {
+  /**
+   * Palette
+   * Gruvbox dark, medium
+   * Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox)
+   */
+  --base00: #282828; /* ---- */
+  --base01: #3c3836; /* --- */
+  --base02: #504945; /* -- */
+  --base03: #665c54; /* - */
+  --base04: #bdae93; /* + */
+  --base05: #d5c4a1; /* ++ */
+  --base06: #ebdbb2; /* +++ */
+  --base07: #fbf1c7; /* ++++ */
+  --base08: #fb4934; /* red */
+  --base09: #fe8019; /* orange */
+  --base0A: #fabd2f; /* yellow */
+  --base0B: #b8bb26; /* green */
+  --base0C: #8ec07c; /* aqua/cyan */
+  --base0D: #83a598; /* blue */
+  --base0E: #d3869b; /* purple */
+  --base0F: #d65d0e; /* brown */
+
+  /**
+   * Typograph
+   */
+  --font-family-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif;
+  --font-size-scaler: 62.5%; /* 1rem = 10px */
+  --font-size-m: 1.4rem;
+  --font-size-s: 1.2rem;
+
+  /**
+   * Components
+   */
+  --body-color: var(--base04);
+  --body-bg: var(--base00);
+
+  --daily-heading-color: var(--base04);
+
+  --source-name-color: var(--base0A);
+  --source-name-hover-color: var(--base0A);
+
+  --article-title-color: var(--base05);
+  --article-title-hover-color: var(--base07);
+  --article-summary-color: var(--base04);
+  --article-summary-hover-color: var(--base07);
+
+  --accordion-content-rail-color: var(--base03);
+  --accordion-content-hover-rail-color: var(--base04);
+  --accordion-title-marker-color: var(--base03);
+  --accordion-title-hover-marker-color: var(--base04);
+
+  --card-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+  --card-bg: var(--base01);
+  --card-radius: 4px;
+
+  --footer-color: var(--base04);
+  --footer-link-hover-color: var(--base07);
+}
+
+/**
+ * Internals below
+ *
+ * If you can't create a specific look and feel with the configuration above,
+ * you might have reached the customization limit of the template.
+ *
+ * Options:
+ * 1. File an issue with the template.
+ * 2. Target specific elements and write your own CSS. A future change in HTML may break your style.
+ * 3. (Coming soon...) Write your own template with Template Extensibility API.
+ */
+html {
+  font-size: var(--font-size-scaler);
+}
+
+body {
+  background-color: var(--body-bg);
+  font-family: var(--font-family-default);
+  color: var(--body-color);
+  margin: 0;
+  gap: 24px;
+  padding: 16px;
+  display: grid;
+}
+
+:not(:focus-visible) {
+  outline: none;
+}
+
+.card {
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
+  background: var(--card-bg);
+}
+
+.sources {
+  padding: 12px 16px;
+  list-style: none;
+  margin: 0;
+  display: grid;
+  gap: 16px;
+}
+
+.daily-heading {
+  font-size: var(--font-size-s);
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  padding-left: 16px;
+  color: var(--daily-heading-color);
+}
+
+.source {
+  display: grid;
+  gap: 4px;
+}
+
+.source-name {
+  font-size: var(--font-size-s);
+  font-weight: 400;
+  margin: 0;
+}
+.source-name__link {
+  color: var(--source-name-color);
+  text-decoration: none;
+}
+.source-name__link:hover {
+  color: var(--source-name-hover-color);
+  text-decoration: underline;
+}
+
+.article-expander {
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.article-expander__title {
+  color: var(--article-title-color);
+  font-size: var(--font-size-m);
+  font-weight: 600;
+}
+.article-expander__title:hover {
+  cursor: pointer;
+  color: var(--article-title-hover-color);
+}
+.article-expander__title::marker {
+  color: var(--accordion-title-marker-color);
+}
+.article-expander__title:hover::marker {
+  color: var(--accordion-title-hover-marker-color);
+}
+
+.article-summary-link {
+  color: var(--article-summary-color);
+  font-size: var(--font-size-m);
+  text-decoration: none;
+}
+
+.article-summary-link:hover {
+  color: var(--article-summary-hover-color);
+  --accordion-content-rail-color: var(--accordion-content-hover-rail-color);
+}
+
+.article-summary-box-outer {
+  display: block;
+  padding: 4px 8px 8px 4px;
+}
+
+.article-summary-box-inner {
+  padding-left: 8px;
+  border-left: 1px solid var(--accordion-content-rail-color);
+}
+
+.article-reading-time {
+  font-weight: 600;
+}
+
+footer {
+  color: var(--footer-color);
+  font-size: var(--font-size-s);
+  display: flex;
+  padding: 0 16px;
+  justify-content: space-between;
+}
+
+.footer-link {
+  color: var(--footer-link-text);
+  text-decoration: none;
+}
+
+.footer-link:hover {
+  color: var(--footer-link-hover-color);
+  text-decoration: underline;
+}
diff --git a/index.html b/index.html
index 4dc8c27..b096941 100644
--- a/index.html
+++ b/index.html
@@ -1,1171 +1,1022 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>osmos::feed</title>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="robots" content="noindex, nofollow" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-    <link rel="alternate" type="application/rss+xml" title="osmos::feed" href="feed.atom" />
-    <link href="styles.css" rel="stylesheet" />
-    <!-- %before-head-end.html% -->
-  </head>
-  <body>
-    <!-- %after-body-begin.html% -->
-    
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-14">2021-05-14</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">Auto-Generated Social Media Images</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;auto&#45;generated&#45;social&#45;media&#45;images&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;6 min&#8202;)</span>
-                      <span>I&#8217;ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You&#8217;re essentially leaving money on the table without them, because they &#8230;
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>osmos::feed</title>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="robots" content="noindex, nofollow" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+  <link rel="alternate" type="application/rss+xml" title="osmos::feed" href="feed.atom" />
+  <link href="index.css" rel="stylesheet" />
+  <!-- %before-head-end.html% -->
+</head>
+
+<body>
+<!-- %after-body-begin.html% -->
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-15">2021-05-15</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.7.0</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.0">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Added: templating system. Demo | Source | Docs
+Chore: rendering logic refactoring. Adopting functional paradigm.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-14">2021-05-14</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">Auto-Generated Social Media Images</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/auto-generated-social-media-images/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(6 min)</span>
+                    <span>I’ve been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or iMessage. You’re essentially leaving money on the table without them, because they …
 The post Auto-Generated Social Media Images appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">Creating Stylesheet Feature Flags With Sass !default</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;creating&#45;stylesheet&#45;feature&#45;flags&#45;with&#45;sass&#45;default&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;4 min&#8202;)</span>
-                      <span>!default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. Consider this code snippet:
-$variable: 'test' !default;
-To the Sass compiler, this line &#8230;
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Creating Stylesheet Feature Flags With Sass !default</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/creating-stylesheet-feature-flags-with-sass-default/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(4 min)</span>
+                    <span>!default is a Sass flag that indicates conditional assignment to a variable — it assigns a value only if the variable was previously undefined or null. Consider this code snippet:
+$variable: &#x27;test&#x27; !default;
+To the Sass compiler, this line …
 The post Creating Stylesheet Feature Flags With Sass !default appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">HTML Boilerplates</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;html&#45;boilerplates&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;2 min&#8202;)</span>
-                      <span>Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It&#8217;s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about &#8230;
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">HTML Boilerplates</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/html-boilerplates/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(2 min)</span>
+                    <span>Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It’s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about …
 The post HTML Boilerplates appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-
-          <li class="source">
-            <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">Tree-Shaking: A Reference Guide</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;tree&#45;shaking&#45;reference&#45;guide&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;8 min&#8202;)</span>
-                      <span>“Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-
-          <li class="source">
-            <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">What is SendGrid? SMTP Email Newsletter Tutorial</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;what&#45;is&#45;sendgrid&#45;smpt&#45;email&#45;newsletter&#45;tutorial&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;4 min&#8202;)</span>
-                      <span>You may have heard of the term SMTP before, and wondered what it is. SMTP is a common method for handling email messages. Today I am going to explain what SMTP is, and how to use an SMTP provider such as SendGrid to send emails from your address. What Is</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">React for Beginners: Complete React Cheatsheet for 2021</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;react&#45;for&#45;beginners&#45;cheatsheet&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;11 min&#8202;)</span>
-                      <span>Welcome to the React for Beginners guide. It's designed to teach you all the core React concepts that you need to know to start building React applications in 2021. I created this resource to give you the most complete and beginner-friendly path to learn React from the ground up. By</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">Web Development for Beginners – Learn Basic HTML and CSS to Build Your First Web Page</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;web&#45;development&#45;for&#45;beginners&#45;basic&#45;html&#45;and&#45;css&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;5 min&#8202;)</span>
-                      <span>Have you ever wondered how websites are built and designed? Do you want to learn the art of web development but you're not that tech savvy – yet? Well, then this tutorial is for you. It's an introduction to Web Development for beginners so you can learn the basics even if</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-13">2021-05-13</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
-            <section class="articles-per-source">
-              
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">DevTools for CSS layouts 2021 edition</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;chenhuijing.com&#47;blog&#47;devtools&#45;for&#45;css&#45;layouts&#45;2021&#45;edition&#47;&#35;&#37;F0&#37;9F&#37;9A&#37;B2">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;5 min&#8202;)</span>
-                      <span>Chen Hui Jing covers some recent movement in DevTools:
-Firefox’s grid inspector was pretty full-featured from the get-to and&#160;released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a&#160;basic grid inspector 
-&#8230;
+                  </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">What is SendGrid? SMTP Email Newsletter Tutorial</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-sendgrid-smpt-email-newsletter-tutorial/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(4 min)</span>
+                    <span>You may have heard of the term SMTP before, and wondered what it is. SMTP is a common method for handling email messages. Today I am going to explain what SMTP is, and how to use an SMTP provider such as SendGrid to send emails from your address. What Is</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">React for Beginners: Complete React Cheatsheet for 2021</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/react-for-beginners-cheatsheet/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(11 min)</span>
+                    <span>Welcome to the React for Beginners guide. It&#x27;s designed to teach you all the core React concepts that you need to know to start building React applications in 2021. I created this resource to give you the most complete and beginner-friendly path to learn React from the ground up. By</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Web Development for Beginners – Learn Basic HTML and CSS to Build Your First Web Page</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/web-development-for-beginners-basic-html-and-css/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(5 min)</span>
+                    <span>Have you ever wondered how websites are built and designed? Do you want to learn the art of web development but you&#x27;re not that tech savvy – yet? Well, then this tutorial is for you. It&#x27;s an introduction to Web Development for beginners so you can learn the basics even if</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">Tree-Shaking: A Reference Guide</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/tree-shaking-reference-guide/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(8 min)</span>
+                    <span>“Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-13">2021-05-13</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">DevTools for CSS layouts 2021 edition</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/#%F0%9F%9A%B2">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(5 min)</span>
+                    <span>Chen Hui Jing covers some recent movement in DevTools:
+Firefox’s grid inspector was pretty full-featured from the get-to and released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a basic grid inspector 
+…
 The post DevTools for CSS layouts 2021 edition appeared first on CSS-Tricks.
 You can support CSS-Tricks by being an MVP Supporter.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">2021 Design Systems (Survey/Courses)</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;2021&#45;design&#45;systems&#45;survey&#45;courses&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;2 min&#8202;)</span>
-                      <span>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 &#8230;
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">2021 Design Systems (Survey/Courses)</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/2021-design-systems-survey-courses/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(2 min)</span>
+                    <span>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 …
 The post 2021 Design Systems (Survey/Courses) 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">Advanced CSS Animation Using cubic-bezier()</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;advanced&#45;css&#45;animation&#45;using&#45;cubic&#45;bezier&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;9 min&#8202;)</span>
-                      <span>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 &#8230;
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Advanced CSS Animation Using cubic-bezier()</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/advanced-css-animation-using-cubic-bezier/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(9 min)</span>
+                    <span>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 …
 The post Advanced CSS Animation Using cubic-bezier() 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">SVGator 3.0 Reshapes the Way You Create and Animate SVG With Extensive New Features</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;svgator&#45;3&#45;0&#45;reshapes&#45;the&#45;way&#45;you&#45;create&#45;and&#45;animate&#45;svg&#45;with&#45;extensive&#45;new&#45;features&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;3 min&#8202;)</span>
-                      <span>Building animations can get complicated, particularly compelling animations where you aren&#8217;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 &#8230;
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">SVGator 3.0 Reshapes the Way You Create and Animate SVG With Extensive New Features</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/svgator-3-0-reshapes-the-way-you-create-and-animate-svg-with-extensive-new-features/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(3 min)</span>
+                    <span>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 …
 The post SVGator 3.0 Reshapes the Way You Create and Animate SVG With Extensive New Features 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">
-            <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">How to Create an Email Newsletter [2021 Tutorial] – Design, Layout, Send</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;how&#45;to&#45;create&#45;an&#45;email&#45;newsletter&#45;design&#45;layout&#45;send&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;6 min&#8202;)</span>
-                      <span>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</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">What is Software Testing? The 10 Most Common Types of Tests Developers Use in Projects</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;types&#45;of&#45;software&#45;testing&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;6 min&#8202;)</span>
-                      <span>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</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">React Tutorial – How to Work with Multiple Checkboxes</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;how&#45;to&#45;work&#45;with&#45;multiple&#45;checkboxes&#45;in&#45;react&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;6 min&#8202;)</span>
-                      <span>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</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">From Lawyer to Engineer at Google – How to Switch Careers and Learn New Skills</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;from&#45;lawyer&#45;to&#45;google&#45;engineer&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;13 min&#8202;)</span>
-                      <span>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</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-12">2021-05-12</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">Making Disabled Buttons More Inclusive</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;making&#45;disabled&#45;buttons&#45;more&#45;inclusive&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;9 min&#8202;)</span>
-                      <span>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. &#60;button disabled&#62; ) to mark a button as disabled.
-There are lots of &#8230;
+                  </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">How to Create an Email Newsletter [2021 Tutorial] – Design, Layout, Send</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-create-an-email-newsletter-design-layout-send/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(6 min)</span>
+                    <span>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</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">What is Software Testing? The 10 Most Common Types of Tests Developers Use in Projects</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/types-of-software-testing/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(6 min)</span>
+                    <span>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</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">React Tutorial – How to Work with Multiple Checkboxes</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-work-with-multiple-checkboxes-in-react/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(6 min)</span>
+                    <span>Handling multiple checkboxes in React is completely different from how you use regular HTML checkboxes. So in this article, we&#x27;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</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">From Lawyer to Engineer at Google – How to Switch Careers and Learn New Skills</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/from-lawyer-to-google-engineer/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(13 min)</span>
+                    <span>I was a corporate lawyer for 12 years. I never thought I&#x27;d be working at Google as a software engineer, but that&#x27;s what I have been doing for the past year. I&#x27;m working remotely until COVID subsides and we can move to San Francisco.  In this article I&#x27;m going to</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-12">2021-05-12</time></h2>
+    <ul class="sources card">
+      <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">Making Disabled Buttons More Inclusive</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/making-disabled-buttons-more-inclusive/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(9 min)</span>
+                    <span>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.  ) to mark a button as disabled.
+There are lots of …
 The post Making Disabled Buttons More Inclusive 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">
-            <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">Frustrating Design Patterns That Need Fixing: Birthday Picker</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;frustrating&#45;design&#45;patterns&#45;birthday&#45;picker&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;11 min&#8202;)</span>
-                      <span>In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives, along with plenty of examples to keep in mind when building or designing one. Let’s start with an infamous birthday picker.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">Little Smashing Stories</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;little&#45;smashing&#45;stories&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;7 min&#8202;)</span>
-                      <span>Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-
-          <li class="source">
-            <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">How to Build and Deploy a Portfolio with Vue.js Axios, the GitHub REST API, and Netlify</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;build&#45;a&#45;portfolio&#45;with&#45;vuejs&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;84 min&#8202;)</span>
-                      <span>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</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">Use the Kivy Python Library to Create Games and Mobile Apps</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;use&#45;the&#45;kivy&#45;python&#45;library&#45;to&#45;create&#45;games&#45;and&#45;mobile&#45;apps&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;2 min&#8202;)</span>
-                      <span>Kivy is a free and open source Python framework for developing mobile apps and games with a natural user interface. We just released a 5-hour Kivy course on the freeCodeCamp.org YouTube channel. In this Kivy course, you will learn to create games and applications with Python for every platform</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-11">2021-05-11</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">CSS Pie Timer Re-Revisited</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;css&#45;pie&#45;timer&#45;re&#45;revisited&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is equally clever and much easier. I particularly like the steps() animation function&#8230;
+                  </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">How to Build and Deploy a Portfolio with Vue.js Axios, the GitHub REST API, and Netlify</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/build-a-portfolio-with-vuejs/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(82 min)</span>
+                    <span>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</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Use the Kivy Python Library to Create Games and Mobile Apps</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/use-the-kivy-python-library-to-create-games-and-mobile-apps/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(2 min)</span>
+                    <span>Kivy is a free and open source Python framework for developing mobile apps and games with a natural user interface. We just released a 5-hour Kivy course on the freeCodeCamp.org YouTube channel. In this Kivy course, you will learn to create games and applications with Python for every platform</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">Frustrating Design Patterns That Need Fixing: Birthday Picker</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(11 min)</span>
+                    <span>In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives, along with plenty of examples to keep in mind when building or designing one. Let’s start with an infamous birthday picker.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Little Smashing Stories</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/little-smashing-stories/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(7 min)</span>
+                    <span>Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-11">2021-05-11</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">CSS Pie Timer Re-Revisited</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/css-pie-timer-re-revisited/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is equally clever and much easier. I particularly like the steps() animation function…
 The post CSS Pie Timer Re-Revisited 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">I could build this during the weekend</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;world.hey.com&#47;joaoqalves&#47;i&#45;could&#45;build&#45;this&#45;during&#45;the&#45;weekend&#45;aa093c5e">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;5 min&#8202;)</span>
-                      <span>How many times have you heard that (or even uttered it under your own breath)? I know I&#8217;ve heard it in conversations. I also know I&#8217;ve wondered the same thing about a product or two — hey, the idea here &#8230;
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">I could build this during the weekend</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://world.hey.com/joaoqalves/i-could-build-this-during-the-weekend-aa093c5e">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(5 min)</span>
+                    <span>How many times have you heard that (or even uttered it under your own breath)? I know I’ve heard it in conversations. I also know I’ve wondered the same thing about a product or two — hey, the idea here …
 The post I could build this during the weekend 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">Next Gen CSS: @container</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;next&#45;gen&#45;css&#45;container&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;5 min&#8202;)</span>
-                      <span>Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to &#8230;
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Next Gen CSS: @container</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/next-gen-css-container/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(5 min)</span>
+                    <span>Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to …
 The post Next Gen CSS: @container 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">Distributed Persistent Rendering (DPR)</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;distributed&#45;persistent&#45;rendering&#45;dpr&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;5 min&#8202;)</span>
-                      <span>Like Jamstack, Netlify is coining this term.
-If 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 &#8230;
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Distributed Persistent Rendering (DPR)</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/distributed-persistent-rendering-dpr/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(5 min)</span>
+                    <span>Like Jamstack, Netlify is coining this term.
+If 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 …
 The post Distributed Persistent Rendering (DPR) 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">
-            <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
-            <section class="articles-per-source">
-              
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">A Primer On CSS Container Queries</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;complete&#45;guide&#45;css&#45;container&#45;queries&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;16 min&#8202;)</span>
-                      <span>A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">The Conference Platform We Use For Our Online Events: Hopin</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;smashingconf&#45;conference&#45;platform&#45;hopin&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;7 min&#8202;)</span>
-                      <span>At the beginning of 2020, the SmashingConf team was ready for a new year. We had so many things that excited us. New speakers, new workshops, new cities, new attendees, new experiences. And as we all know, 2020 had other ideas. With so many people working from home, we thought we would bring our [Smashing workshops](https://smashingconf.com/online-workshops/) from our home offices to yours &mdash; but how?</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-
-          <li class="source">
-            <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">How to Use Selenium and Python to Scrape Websites More Effectively</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;improve&#45;web&#45;scraping&#45;with&#45;selenium&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;5 min&#8202;)</span>
-                      <span>When you're scraping data from the web with Python, Selenium will often come up as an helpful tool to use. It was originally designed for automated testing, but its scraping capabilities are impressive, too. This is because Selenium can do things that other libraries or frameworks often can't when collecting</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-10">2021-05-10</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
-            <section class="articles-per-source">
-              
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.4.0</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.4.0">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Added: Basic theme customization: Demo | Source | Docs.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.6.0</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.6.0">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Added: Link from the title of a subscription to its website.
+                  </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">How to Use Selenium and Python to Scrape Websites More Effectively</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/improve-web-scraping-with-selenium/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(5 min)</span>
+                    <span>When you&#x27;re scraping data from the web with Python, Selenium will often come up as an helpful tool to use. It was originally designed for automated testing, but its scraping capabilities are impressive, too. This is because Selenium can do things that other libraries or frameworks often can&#x27;t when collecting</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">A Primer On CSS Container Queries</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/complete-guide-css-container-queries/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(16 min)</span>
+                    <span>A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">The Conference Platform We Use For Our Online Events: Hopin</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/smashingconf-conference-platform-hopin/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(7 min)</span>
+                    <span>At the beginning of 2020, the SmashingConf team was ready for a new year. We had so many things that excited us. New speakers, new workshops, new cities, new attendees, new experiences. And as we all know, 2020 had other ideas. With so many people working from home, we thought we would bring our [Smashing workshops](https://smashingconf.com/online-workshops/) from our home offices to yours — but how?</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-10">2021-05-10</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">Topframe</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/topframe/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(2 min)</span>
+                    <span>This is extremely fun. Jeff Lindsay has created Topframe, and writes:
+Anybody that knows how to mess around with HTML can now mess around with their desktop computing experience. Topframe is an open source tool that lets you 
+…
+The post Topframe 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">Migrating from Parcel to Snowpack</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://benfrain.com/migrating-from-parcel-to-snowpack-build-tool-comparison/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(10 min)</span>
+                    <span>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 …
+The post Migrating from Parcel to Snowpack 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">Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(11 min)</span>
+                    <span>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.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.4.0</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.4.0">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Added: Basic theme customization: Demo | Source | Docs.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.6.0</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.6.0">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Added: Link from the title of a subscription to its website.
 Added: Store feedUrl and siteUrl for each source in cache.
-Added: Semantic element (&lt;time&gt;) for timestamp on the UI.
+Added: Semantic element () for timestamp on the UI.
 Added: Semantic API for theming the default template. Demo | Source | Docs
 Changed: Moved feed metadata from article level to feed level in cache.
 Fixed: Any html-like text was stripped from title. Fixed with encoded text.
-Removed: href for each source in cache. The value was never used so it's not a breaking change.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-
-          <li class="source">
-            <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">Topframe</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;topframe&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;2 min&#8202;)</span>
-                      <span>This is extremely fun. Jeff Lindsay has created Topframe, and writes:
-Anybody that knows how to mess around with HTML can now mess around with their desktop computing experience.&#160;Topframe&#160;is an open source tool that lets you 
-&#8230;
-The post Topframe 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">Migrating from Parcel to Snowpack</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;benfrain.com&#47;migrating&#45;from&#45;parcel&#45;to&#45;snowpack&#45;build&#45;tool&#45;comparison&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;10 min&#8202;)</span>
-                      <span>I find build tooling endlessly interesting, especially right now as we&#8217;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&#8217;ve chatted on &#8230;
-The post Migrating from Parcel to Snowpack 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">Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;css&#45;tricks.com&#47;variable&#45;aspect&#45;ratio&#45;card&#45;with&#45;conic&#45;gradients&#45;meeting&#45;along&#45;the&#45;diagonal&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;11 min&#8202;)</span>
-                      <span>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 &#8230;
-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.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-
-          <li class="source">
-            <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">Get Started With React By Building A Whac-A-Mole Game</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;get&#45;started&#45;whac&#45;a&#45;mole&#45;react&#45;game&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;21 min&#8202;)</span>
-                      <span>Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-08">2021-05-08</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
-            <section class="articles-per-source">
-              
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.5.0</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.5.0">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Added: Atom feed generator
+Removed: href for each source in cache. The value was never used so it&#x27;s not a breaking change.</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">Get Started With React By Building A Whac-A-Mole Game</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(21 min)</span>
+                    <span>Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-08">2021-05-08</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.5.0</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.5.0">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Added: Atom feed generator
 Added: Customizable site title
 Added: Copy all files from static directory to the root of the site.
 Changed: Favicon, css, and js assets now existing at site root level.
 Chore: Excluded testing files from repo.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-07">2021-05-07</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">How To Organize Product-Related Assets And Collaborate Better</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;product&#45;records&#45;organization&#45;collaboration&#45;best&#45;practices&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;14 min&#8202;)</span>
-                      <span>How do you organize your Google Drive assets? How do you name your Dropbox Paper documents? How do you deal with comments? Let’s get it right.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-06">2021-05-06</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">Improving The Performance Of Shopify Themes (Case Study)</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;improving&#45;performance&#45;shopify&#45;themes&#45;case&#45;study&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;9 min&#8202;)</span>
-                      <span>When dealing with themes for large platforms and CMS, legacy issues often become a bottleneck. In this article, Carson Shold discusses how his team improved the performance and organization of their Shopify themes, and improved maintainability along the way.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-05">2021-05-05</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
-            <section class="articles-per-source">
-              
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.3.1</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.3.1">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Fixed: Avoid crwalers.
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-07">2021-05-07</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">How To Organize Product-Related Assets And Collaborate Better</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/product-records-organization-collaboration-best-practices/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(14 min)</span>
+                    <span>How do you organize your Google Drive assets? How do you name your Dropbox Paper documents? How do you deal with comments? Let’s get it right.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-06">2021-05-06</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Improving The Performance Of Shopify Themes (Case Study)</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/improving-performance-shopify-themes-case-study/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(9 min)</span>
+                    <span>When dealing with themes for large platforms and CMS, legacy issues often become a bottleneck. In this article, Carson Shold discusses how his team improved the performance and organization of their Shopify themes, and improved maintainability along the way.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-05">2021-05-05</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.3.1</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.3.1">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Fixed: Avoid crwalers.
 Fixed: Error logging from XML parser.
 Fixed: Typo in docs.
 Thank you: @dym-sh, @tabokie, @cheese1</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.3.0</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.3.0">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Added: Customize cache lifespan with cacheMaxDays property in osmosfeed.yaml.
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.3.0</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.3.0">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Added: Customize cache lifespan with cacheMaxDays property in osmosfeed.yaml.
 Added: Documentation for osmosfeed.yaml.
 Fixed: More intuitive logging during build.
 Chore: Refactored parameter passing for enrich step.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.2.3</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.2.3">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Changed: favicon update.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.2.1</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.2.1">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Added: Display CLI version in footer.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.1.6</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.6">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Fixed: The output website didn&#x27;t have favicon.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">v1.1.1</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.1">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(1 min)</span>
+                    <span>Fixed: Item description didn&#x27;t use the description property from feed item.</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">Reducing HTML Payload With Next.js (Case Study)</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/reduce-data-sent-client-nextjs/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(8 min)</span>
+                    <span>This article showcases a case study of Bookaway’s landing page performance. We’ll see how taking care of the props we send to Next.js pages can make loading times and Web Vitals better.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-04">2021-05-04</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">A Guide To Undoing Mistakes With Git</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/undoing-mistakes-git-part1/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(6 min)</span>
+                    <span>No matter how experienced you are, mistakes are an inevitable part of software development. But we can learn to repair them! And this is what we&#x27;ll be looking at in this two-part series: how to undo mistakes using Git.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Smashing Podcast Episode 36 With Miriam Suzanne: What Is The Future Of CSS?</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/smashing-podcast-episode-36/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(23 min)</span>
+                    <span>In this episode, we’re starting our new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to expert Miriam Suzanne to find out.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-05-03">2021-05-03</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">The Evolution Of Jamstack</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/evolution-jamstack/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(7 min)</span>
+                    <span>Web-oriented databases, frameworks like Nuxt and Next.js, and even frameworkless approaches are evolving the Jamstack, but the core principles are more powerful than ever.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-30">2021-04-30</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">May Is In The Air (2021 Wallpapers Edition)</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/desktop-wallpaper-calendars-may-2021/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(7 min)</span>
+                    <span>Do you need a little inspiration boost? Well, then our new collection of wallpapers is for you. Designed with love by the community for the community, the wallpapers are available with and without a calendar for May 2021.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-29">2021-04-29</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">The Humble &#x60;&#x60; Element And Core Web Vitals</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(18 min)</span>
+                    <span>Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from [Addy&#x27;s new book](https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/) (also, check a [free PDF preview](http://provide.smashingmagazine.com/eBooks/image-optimization-sample-chapter.pdf)).</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-28">2021-04-28</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Meet Image Optimization, A New Smashing Book By Addy Osmani</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/image-optimization-pre-release/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(7 min)</span>
+                    <span>The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-27">2021-04-27</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Understanding Easing Functions For CSS Animations And Transitions</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/easing-functions-css-animations-transitions/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(9 min)</span>
+                    <span>Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. In this article, we’re going to take a deep dive into easing functions and see how we can use them to create those natural and stunning animations.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-26">2021-04-26</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">How To Bake Layers Of Accessibility Testing Into Your Process</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/bake-layers-accessibility-testing-process/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(11 min)</span>
+                    <span>Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to &quot;layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early — when it’s easier and cheaper to fix them.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-23">2021-04-23</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/guide-supported-modern-css-pseudo-class-selectors/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(8 min)</span>
+                    <span>The CSS Working Group Editor’s Draft for [Selectors Level 4](https://drafts.csswg.org/selectors-4/) includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today!</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-22">2021-04-22</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Web Design Done Well: The Ordinary Made Extraordinary (Part 1)</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/web-design-done-well-part1/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(6 min)</span>
+                    <span>Sometimes it’s the little things in web life that make us look twice. From carousels to documentation to cookie disclaimers, here are some sites taking the mundane and sprinkling in a little magic.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-21">2021-04-21</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">A Complete Guide To Incremental Static Regeneration (ISR) With Next.js</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(6 min)</span>
+                    <span>Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Why Content Is Such A Fundamental Part Of The Web Design Process</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/content-fundamental-part-web-design-process/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(10 min)</span>
+                    <span>As designers, we are often burdened by the responsibility of producing and managing website content. It’s not our job to write it, but it’s not the client’s either. We can avert disaster by including content production in the design process.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-20">2021-04-20</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">Making GraphQL Work In WordPress</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/making-graphql-work-in-wordpress/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(12 min)</span>
+                    <span>Let’s explore the plugins providing GraphQL servers to WordPress. When should we use WPGraphQL, and when the GraphQL API for WordPress? Is there some advantage of one over the other, or some particular task that is easier to accomplish with one of them? In this article, we will find out.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
+  <section class="daily-content">
+    <h2 class="daily-heading"><time datatime="2021-04-19">2021-04-19</time></h2>
+    <ul class="sources card">
+      <li class="source">
+        <section>
+          <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
+          <section class="articles-per-source">
+            <article>
+              <details class="article-expander">
+                <summary class="article-expander__title">An In-Depth Guide To Measuring Core Web Vitals</summary>
+                <a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/04/complete-guide-measure-core-web-vitals/">
+                  <div class="article-summary-box-inner">
+                    <span class="article-reading-time">(24 min)</span>
+                    <span>How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Let’s figure it out.</span>
+                  </div>
+                </a>
+              </details>
+            </article>
+        </section>
+      </li>
+    </ul>
+  </section>
 
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.2.3</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.2.3">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Changed: favicon update.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
+  <footer>
+    <time id="build-timestamp" datetime="2021-05-16T00:48:59.925Z">2021-05-16T00:48:59.925Z</time>
+    <span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.7.0</a></span>
+  </footer>
+  <script src="index.js"></script>
+  <!-- %before-body-end.html% -->
+</body>
 
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.2.1</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.2.1">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Added: Display CLI version in footer.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.1.6</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.1.6">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Fixed: The output website didn't have favicon.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.1.1</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.1.1">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Fixed: Item description didn't use the description property from feed item.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">v1.1.0</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;github.com&#47;osmoscraft&#47;osmosfeed&#47;releases&#47;tag&#47;v1.1.0">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;1 min&#8202;)</span>
-                      <span>Added: MIT license
-Added: cache.json is stamped with the version of the builder. This allows future builder with breaking change to ignore incompatible cache.
-Added: Feed source retry on fetch error (3 times total, 15 seconds timeout).
-Added: Item enrichment retry on fetch error (3 times total, 15 seconds timeout).
-Added: Console log for cache restore and update behavior.
-Added: npx command: npx osmosfeed
-Changed: Improved console log that breaks down rendered item count into "new" and "cached".
-Fixed: Item…</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-
-          <li class="source">
-            <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">Reducing HTML Payload With Next.js (Case Study)</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;reduce&#45;data&#45;sent&#45;client&#45;nextjs&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;8 min&#8202;)</span>
-                      <span>This article showcases a case study of Bookaway’s landing page performance. We’ll see how taking care of the props we send to Next.js pages can make loading times and Web Vitals better.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-04">2021-05-04</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
-            <section class="articles-per-source">
-              
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">A Guide To Undoing Mistakes With Git</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;undoing&#45;mistakes&#45;git&#45;part1&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;6 min&#8202;)</span>
-                      <span>No matter how experienced you are, mistakes are an inevitable part of software development. But we can learn to repair them! And this is what we'll be looking at in this two-part series: how to undo mistakes using Git.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">Smashing Podcast Episode 36 With Miriam Suzanne: What Is The Future Of CSS?</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;smashing&#45;podcast&#45;episode&#45;36&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;23 min&#8202;)</span>
-                      <span>In this episode, we’re starting our new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to expert Miriam Suzanne to find out.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-05-03">2021-05-03</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">The Evolution Of Jamstack</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;05&#47;evolution&#45;jamstack&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;7 min&#8202;)</span>
-                      <span>Web-oriented databases, frameworks like Nuxt and Next.js, and even frameworkless approaches are evolving the Jamstack, but the core principles are more powerful than ever.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-30">2021-04-30</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">May Is In The Air (2021 Wallpapers Edition)</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;desktop&#45;wallpaper&#45;calendars&#45;may&#45;2021&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;7 min&#8202;)</span>
-                      <span>Do you need a little inspiration boost? Well, then our new collection of wallpapers is for you. Designed with love by the community for the community, the wallpapers are available with and without a calendar for May 2021.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-29">2021-04-29</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">The Humble `` Element And Core Web Vitals</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;humble&#45;img&#45;element&#45;core&#45;web&#45;vitals&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;18 min&#8202;)</span>
-                      <span>Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from [Addy's new book](https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/) (also, check a [free PDF preview](http://provide.smashingmagazine.com/eBooks/image-optimization-sample-chapter.pdf)).</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-28">2021-04-28</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">Meet Image Optimization, A New Smashing Book By Addy Osmani</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;image&#45;optimization&#45;pre&#45;release&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;7 min&#8202;)</span>
-                      <span>The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-27">2021-04-27</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">Understanding Easing Functions For CSS Animations And Transitions</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;easing&#45;functions&#45;css&#45;animations&#45;transitions&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;9 min&#8202;)</span>
-                      <span>Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. In this article, we’re going to take a deep dive into easing functions and see how we can use them to create those natural and stunning animations.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-26">2021-04-26</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">How To Bake Layers Of Accessibility Testing Into Your Process</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;bake&#45;layers&#45;accessibility&#45;testing&#45;process&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;11 min&#8202;)</span>
-                      <span>Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to "layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early &mdash; when it’s easier and cheaper to fix them.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-23">2021-04-23</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
-            <section class="articles-per-source">
-              
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;guide&#45;supported&#45;modern&#45;css&#45;pseudo&#45;class&#45;selectors&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;8 min&#8202;)</span>
-                      <span>The CSS Working Group Editor’s Draft for [Selectors Level 4](https://drafts.csswg.org/selectors-4/) includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today!</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-22">2021-04-22</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">Web Design Done Well: The Ordinary Made Extraordinary (Part 1)</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;web&#45;design&#45;done&#45;well&#45;part1&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;6 min&#8202;)</span>
-                      <span>Sometimes it’s the little things in web life that make us look twice. From carousels to documentation to cookie disclaimers, here are some sites taking the mundane and sprinkling in a little magic.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-21">2021-04-21</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
-            <section class="articles-per-source">
-              
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">A Complete Guide To Incremental Static Regeneration (ISR) With Next.js</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;incremental&#45;static&#45;regeneration&#45;nextjs&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;6 min&#8202;)</span>
-                      <span>Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-
-              <article>
-                <details class="article-expander">
-                  <summary class="article-expander__title">Why Content Is Such A Fundamental Part Of The Web Design Process</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;content&#45;fundamental&#45;part&#45;web&#45;design&#45;process&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;10 min&#8202;)</span>
-                      <span>As designers, we are often burdened by the responsibility of producing and managing website content. It’s not our job to write it, but it’s not the client’s either. We can avert disaster by including content production in the design process.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-20">2021-04-20</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">Making GraphQL Work In WordPress</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;making&#45;graphql&#45;work&#45;in&#45;wordpress&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;12 min&#8202;)</span>
-                      <span>Let’s explore the plugins providing GraphQL servers to WordPress. When should we use WPGraphQL, and when the GraphQL API for WordPress? Is there some advantage of one over the other, or some particular task that is easier to accomplish with one of them? In this article, we will find out.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-19">2021-04-19</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">An In-Depth Guide To Measuring Core Web Vitals</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;complete&#45;guide&#45;measure&#45;core&#45;web&#45;vitals&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;24 min&#8202;)</span>
-                      <span>How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Let’s figure it out.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-
-    <section class="daily-content">
-      <h2 class="daily-heading"><time datatime="2021-04-16">2021-04-16</time></h2>
-      <ul class="sources card">
-      
-          <li class="source">
-            <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">Seven Mistakes To Avoid In Your Technical Interviews</summary>
-                  <a class="article-summary-link article-summary-box-outer" href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;mistakes&#45;technical&#45;interviews&#47;">
-                    <div class="article-summary-box-inner">
-                      <span class="article-reading-time">(&#8202;10 min&#8202;)</span>
-                      <span>It’s no secret that the technical interview process leaves something to be desired; it’s often riddled with anxiety and stress. In this article, we’ll take a look at seven of the most common mistakes candidates make in their technical interviews and explore ways you can avoid them.</span>
-                    </div>
-                  </a>
-                </details>
-              </article>
-            </section>
-          </li>
-          
-      </ul>  
-    </section>
-    
-    <footer>
-      <time id="build-timestamp" datetime="2021-05-15T00:44:24.614Z">2021-05-15T00:44:24.614Z</time>
-      <span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.6.0</a></span>
-    </footer>
-    
-    <script src="index.js"></script>
-    <!-- %before-body-end.html% -->
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
index 6eb2e04..cc6df78 100644
--- a/index.js
+++ b/index.js
@@ -1,10 +1,10 @@
-document.addEventListener("click", (event) => {
-  const actionButton = event.target.closest(`[data-action]`);
-
-  if (actionButton) {
-    actionButton.closest("article").classList.toggle("expanded");
-  }
-});
-
-const timestamp = document.getElementById("build-timestamp");
-timestamp.innerText = new Date(timestamp.getAttribute("datetime")).toLocaleString();
+document.addEventListener("click", (event) => {
+  const actionButton = event.target.closest(`[data-action]`);
+
+  if (actionButton) {
+    actionButton.closest("article").classList.toggle("expanded");
+  }
+});
+
+const timestamp = document.getElementById("build-timestamp");
+timestamp.innerText = new Date(timestamp.getAttribute("datetime")).toLocaleString();