This commit is contained in:
chuanqisun 2021-05-18 00:48:52 +00:00
parent 65456b4aa3
commit ea86c17c03
3 changed files with 329 additions and 286 deletions

View file

@ -5,13 +5,22 @@
"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.2",
"author": null,
"description": "⚠ Deprecated: To accommodate the monorepo setup, the node version in all templates/demos/examples has changed from 14 to 16. This is not a breaking change as our compile target is still node 14, and node 16 is backward compatible. We still recommend you start using node-version: \"16\" in your .github/workflows/update-feed.yaml today to get the performance/security improvements from the newer node. See example\nChore: Reorganize to monorepo with npm workspace.",
"link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.2",
"publishedOn": "2021-05-17T05:32:19.000Z",
"wordCount": 340,
"title": "v1.7.2"
},
{
"id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.1",
"author": null,
"description": "Fixed: static files were unnecessarily copied for custom templates.",
"link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.1",
"publishedOn": "2021-05-16T02:33:58.000Z",
"wordCount": 280,
"wordCount": 276,
"title": "v1.7.1"
},
{
@ -85,15 +94,6 @@
"publishedOn": "2021-05-05T05:18:52.000Z",
"wordCount": 273,
"title": "v1.2.1"
},
{
"id": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.6",
"author": null,
"description": "Fixed: The output website didn't have favicon.",
"link": "https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.6",
"publishedOn": "2021-05-05T05:18:40.000Z",
"wordCount": 274,
"title": "v1.1.6"
}
]
},
@ -102,13 +102,40 @@
"feedUrl": "https://css-tricks.com/feed/",
"siteUrl": "https://css-tricks.com",
"articles": [
{
"id": "https://css-tricks.com/?p=340716",
"author": "Chris Coyier",
"description": "Addy Osmani on images in HTML:\nThe humble <img> element has gained some superpowers over the years. Given how central it is to image optimization on the web, lets catch up on what it can do and how it can \n…\nThe post The Humble `img` Element And Core Web Vitals appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/",
"publishedOn": "2021-05-17T22:38:06.000Z",
"wordCount": 5325,
"title": "The Humble `img` Element And Core Web Vitals"
},
{
"id": "https://css-tricks.com/?p=339522",
"author": "Ashley Kolodziej",
"description": "I see you. In the back there, behind JavaScript and React and PHP and all those “real” programming languages, I see you. And I appreciate you.\nThe post A Love Letter to HTML & CSS appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/a-love-letter-to-html-css/",
"publishedOn": "2021-05-17T14:27:22.000Z",
"wordCount": 1356,
"title": "A Love Letter to HTML & CSS"
},
{
"id": "https://css-tricks.com/?p=340594",
"author": "Chris Coyier",
"description": "An interactive tool for learning grid syntax from Etesam Ansari. In the Learn section, it teaches you some concepts (involving multiple bits of the grid syntax) then gives you a task to complete by filling out the right syntax. Im …\nThe post Euismod appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://www.euismod.dev/",
"publishedOn": "2021-05-17T14:27:13.000Z",
"wordCount": 3,
"title": "Euismod"
},
{
"id": "https://css-tricks.com/?p=340136",
"author": "Chris Coyier",
"description": "Ive 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. Youre 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": 2173,
"wordCount": 2273,
"title": "Auto-Generated Social Media Images"
},
{
@ -171,7 +198,7 @@
"description": "Lets talk about disabled buttons. Specifically, lets 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,
"wordCount": 2886,
"title": "Making Disabled Buttons More Inclusive"
},
{
@ -198,7 +225,7 @@
"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": 1441,
"wordCount": 1498,
"title": "Next Gen CSS: @container"
},
{
@ -209,33 +236,6 @@
"publishedOn": "2021-05-11T14:33:10.000Z",
"wordCount": 1446,
"title": "Distributed Persistent Rendering (DPR)"
},
{
"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. 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,
"title": "Topframe"
},
{
"id": "https://css-tricks.com/?p=340208",
"author": "Chris Coyier",
"description": "I find build tooling endlessly interesting, especially right now as were 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 weve 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": 2933,
"title": "Migrating from Parcel to Snowpack"
},
{
"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 …\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,
"title": "Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal"
}
]
},
@ -244,6 +244,15 @@
"feedUrl": "https://www.smashingmagazine.com/feed/",
"siteUrl": "https://www.smashingmagazine.com/",
"articles": [
{
"id": "https://smashingmagazine.com/2021/05/core-web-vitals-case-study/",
"author": "hello@smashingmagazine.com (Beau Hartshorne)",
"description": "Googles “Page Experience Update” will start rolling out in June. At first, sites that meet Core Web Vitals thresholds will have a minor ranking advantage in mobile search for all browsers. Search is important to any business, and this is the story of how Beau Hartshorne and his team at Instant Domain Search improved their Core Web Vitals scores.",
"link": "https://smashingmagazine.com/2021/05/core-web-vitals-case-study/",
"publishedOn": "2021-05-17T11:30:00.000Z",
"wordCount": 2906,
"title": "How We Improved Our Core Web Vitals (Case Study)"
},
{
"id": "https://smashingmagazine.com/2021/05/tree-shaking-reference-guide/",
"author": "hello@smashingmagazine.com (Átila Fassina)",
@ -458,6 +467,42 @@
"feedUrl": "https://www.freecodecamp.org/news/rss/",
"siteUrl": "https://www.freecodecamp.org/news",
"articles": [
{
"id": "60a2771762ab9107fe5ab383",
"author": "",
"description": "HTML vs JSX Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page. HTML is a very important language in web development. Your code is either in HTML originally or compiles to it so browsers can read it. JSX, on the other",
"link": "https://www.freecodecamp.org/news/html-vs-jsx-whats-the-difference/",
"publishedOn": "2021-05-17T21:11:58.000Z",
"wordCount": 1169,
"title": "HTML vs JSX What&#x27;s the Difference?"
},
{
"id": "60a16df162ab9107fe5ab01b",
"author": "",
"description": "When I started out as a web developer, people often threw around the term \"DOM\" in the industry. Every JavaScript tutorial mentioned it, but I didn't know what it meant. Fast forward two years, and now that I know what it's all about, I am going to explain what the",
"link": "https://www.freecodecamp.org/news/dom-explained-everything-you-need-to-know-about-the-document-object-model/",
"publishedOn": "2021-05-17T17:45:50.000Z",
"wordCount": 1282,
"title": "The DOM Explained for Beginners How the Document Object Model Works"
},
{
"id": "609f552e62ab9107fe5aaba0",
"author": "",
"description": "Lottie is a library that helps render Adobe After Effects animations natively on mobile and the web. I like using Lottie for animations in my projects because: Creating an animation from scratch can be time-consuming, andGIF files can be double the size of Lottie JSON files (the files containing the",
"link": "https://www.freecodecamp.org/news/how-to-use-lottie-like-a-pro-resources-for-designers-and-developers/",
"publishedOn": "2021-05-17T16:25:22.000Z",
"wordCount": 1076,
"title": "How to Use the Lottie Library like a Pro Lottie Resources for Designers and Developers"
},
{
"id": "609cb90262ab9107fe5aa026",
"author": "",
"description": "I'm a developer who's mostly been writing JavaScript, so the Solidity development environment was a bit hard to learn. About four months ago, I switched to Hardhat from Truffle. This cool new kid on the block drastically improved my coding experience. So today I want to share it with my",
"link": "https://www.freecodecamp.org/news/solidity-tutorial-hardhat-nfts/",
"publishedOn": "2021-05-17T14:39:55.000Z",
"wordCount": 1233,
"title": "Solidity Tutorial How to Create NFTs with Hardhat"
},
{
"id": "609d63e962ab9107fe5aa2ce",
"author": "",
@ -511,45 +556,9 @@
"publishedOn": "2021-05-13T18:17:49.000Z",
"wordCount": 1775,
"title": "React Tutorial How to Work with Multiple Checkboxes"
},
{
"id": "609ccb0d62ab9107fe5aa0ce",
"author": "",
"description": "I was a corporate lawyer for 12 years. I never thought I'd be working at Google as a software engineer, but 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": 4024,
"title": "From Lawyer to Engineer at Google How to Switch Careers and Learn New Skills"
},
{
"id": "5fde208ae6787e09839407c3",
"author": "",
"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": 24536,
"title": "How to Build and Deploy a Portfolio with Vue.js Axios, the GitHub REST API, and Netlify"
},
{
"id": "609c215862ab9107fe5a9fa9",
"author": "",
"description": "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",
"link": "https://www.freecodecamp.org/news/use-the-kivy-python-library-to-create-games-and-mobile-apps/",
"publishedOn": "2021-05-12T18:49:36.000Z",
"wordCount": 571,
"title": "Use the Kivy Python Library to Create Games and Mobile Apps"
},
{
"id": "6096aafe2cd0545b5e944430",
"author": "",
"description": "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",
"link": "https://www.freecodecamp.org/news/improve-web-scraping-with-selenium/",
"publishedOn": "2021-05-11T22:53:43.000Z",
"wordCount": 1358,
"title": "How to Use Selenium and Python to Scrape Websites More Effectively"
}
]
}
],
"cliVersion": "1.7.1"
"cliVersion": "1.7.2"
}

193
feed.atom
View file

@ -1,10 +1,109 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>urn:2021-05-17T04:41:27.838Z</id>
<id>urn:2021-05-18T00:48:51.933Z</id>
<title>osmos::feed</title>
<updated>2021-05-17T04:41:27.838Z</updated>
<generator>osmosfeed 1.7.1</generator>
<updated>2021-05-18T00:48:51.933Z</updated>
<generator>osmosfeed 1.7.2</generator>
<link rel="alternate" href="index.html"/>
<entry>
<title type="html"><![CDATA[The Humble `img` Element And Core Web Vitals]]></title>
<id>https://css-tricks.com/?p=340716</id>
<link href="https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/"/>
<updated>2021-05-17T22:38:06.000Z</updated>
<summary type="html"><![CDATA[Addy Osmani on images in HTML:
The humble <img> element has gained some superpowers over the years. Given how central it is to image optimization on the web, lets catch up on what it can do and how it can
The post The Humble `img` Element And Core Web Vitals appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[HTML vs JSX What&#x27;s the Difference?]]></title>
<id>60a2771762ab9107fe5ab383</id>
<link href="https://www.freecodecamp.org/news/html-vs-jsx-whats-the-difference/"/>
<updated>2021-05-17T21:11:58.000Z</updated>
<summary type="html"><![CDATA[HTML vs JSX Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page. HTML is a very important language in web development. Your code is either in HTML originally or compiles to it so browsers can read it. JSX, on the other]]></summary>
<author>
<name/>
</author>
</entry>
<entry>
<title type="html"><![CDATA[The DOM Explained for Beginners How the Document Object Model Works]]></title>
<id>60a16df162ab9107fe5ab01b</id>
<link href="https://www.freecodecamp.org/news/dom-explained-everything-you-need-to-know-about-the-document-object-model/"/>
<updated>2021-05-17T17:45:50.000Z</updated>
<summary type="html"><![CDATA[When I started out as a web developer, people often threw around the term "DOM" in the industry. Every JavaScript tutorial mentioned it, but I didn't know what it meant. Fast forward two years, and now that I know what it's all about, I am going to explain what the]]></summary>
<author>
<name/>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Use the Lottie Library like a Pro Lottie Resources for Designers and Developers]]></title>
<id>609f552e62ab9107fe5aaba0</id>
<link href="https://www.freecodecamp.org/news/how-to-use-lottie-like-a-pro-resources-for-designers-and-developers/"/>
<updated>2021-05-17T16:25:22.000Z</updated>
<summary type="html"><![CDATA[Lottie is a library that helps render Adobe After Effects animations natively on mobile and the web. I like using Lottie for animations in my projects because: Creating an animation from scratch can be time-consuming, andGIF files can be double the size of Lottie JSON files (the files containing the]]></summary>
<author>
<name/>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Solidity Tutorial How to Create NFTs with Hardhat]]></title>
<id>609cb90262ab9107fe5aa026</id>
<link href="https://www.freecodecamp.org/news/solidity-tutorial-hardhat-nfts/"/>
<updated>2021-05-17T14:39:55.000Z</updated>
<summary type="html"><![CDATA[I'm a developer who's mostly been writing JavaScript, so the Solidity development environment was a bit hard to learn. About four months ago, I switched to Hardhat from Truffle. This cool new kid on the block drastically improved my coding experience. So today I want to share it with my]]></summary>
<author>
<name/>
</author>
</entry>
<entry>
<title type="html"><![CDATA[A Love Letter to HTML & CSS]]></title>
<id>https://css-tricks.com/?p=339522</id>
<link href="https://css-tricks.com/a-love-letter-to-html-css/"/>
<updated>2021-05-17T14:27:22.000Z</updated>
<summary type="html"><![CDATA[I see you. In the back there, behind JavaScript and React and PHP and all those “real” programming languages, I see you. And I appreciate you.
The post A Love Letter to HTML & CSS appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Ashley Kolodziej</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Euismod]]></title>
<id>https://css-tricks.com/?p=340594</id>
<link href="https://www.euismod.dev/"/>
<updated>2021-05-17T14:27:13.000Z</updated>
<summary type="html"><![CDATA[An interactive tool for learning grid syntax from Etesam Ansari. In the Learn section, it teaches you some concepts (involving multiple bits of the grid syntax) then gives you a task to complete by filling out the right syntax. Im …
The post Euismod appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<author>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How We Improved Our Core Web Vitals (Case Study)]]></title>
<id>https://smashingmagazine.com/2021/05/core-web-vitals-case-study/</id>
<link href="https://smashingmagazine.com/2021/05/core-web-vitals-case-study/"/>
<updated>2021-05-17T11:30:00.000Z</updated>
<summary type="html"><![CDATA[Googles “Page Experience Update” will start rolling out in June. At first, sites that meet Core Web Vitals thresholds will have a minor ranking advantage in mobile search for all browsers. Search is important to any business, and this is the story of how Beau Hartshorne and his team at Instant Domain Search improved their Core Web Vitals scores.]]></summary>
<author>
<name>hello@smashingmagazine.com (Beau Hartshorne)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[v1.7.2]]></title>
<id>https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.2</id>
<link href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.2"/>
<updated>2021-05-17T05:32:19.000Z</updated>
<summary type="html"><![CDATA[⚠ Deprecated: To accommodate the monorepo setup, the node version in all templates/demos/examples has changed from 14 to 16. This is not a breaking change as our compile target is still node 14, and node 16 is backward compatible. We still recommend you start using node-version: "16" in your .github/workflows/update-feed.yaml today to get the performance/security improvements from the newer node. See example
Chore: Reorganize to monorepo with npm workspace.]]></summary>
<author>
<name>Release notes from osmosfeed</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[v1.7.1]]></title>
<id>https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.1</id>
@ -161,16 +260,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<name/>
</author>
</entry>
<entry>
<title type="html"><![CDATA[From Lawyer to Engineer at Google How to Switch Careers and Learn New Skills]]></title>
<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 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>
</entry>
<entry>
<title type="html"><![CDATA[Advanced CSS Animation Using cubic-bezier()]]></title>
<id>https://css-tricks.com/?p=340036</id>
@ -195,26 +284,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Build and Deploy a Portfolio with Vue.js Axios, the GitHub REST API, and Netlify]]></title>
<id>5fde208ae6787e09839407c3</id>
<link href="https://www.freecodecamp.org/news/build-a-portfolio-with-vuejs/"/>
<updated>2021-05-12T20:53:20.000Z</updated>
<summary type="html"><![CDATA[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]]></summary>
<author>
<name/>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Use the Kivy Python Library to Create Games and Mobile Apps]]></title>
<id>609c215862ab9107fe5a9fa9</id>
<link href="https://www.freecodecamp.org/news/use-the-kivy-python-library-to-create-games-and-mobile-apps/"/>
<updated>2021-05-12T18:49:36.000Z</updated>
<summary type="html"><![CDATA[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]]></summary>
<author>
<name/>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Making Disabled Buttons More Inclusive]]></title>
<id>https://css-tricks.com/?p=339960</id>
@ -248,16 +317,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<name>hello@smashingmagazine.com (Vitaly Friedman)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[How to Use Selenium and Python to Scrape Websites More Effectively]]></title>
<id>6096aafe2cd0545b5e944430</id>
<link href="https://www.freecodecamp.org/news/improve-web-scraping-with-selenium/"/>
<updated>2021-05-11T22:53:43.000Z</updated>
<summary type="html"><![CDATA[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]]></summary>
<author>
<name/>
</author>
</entry>
<entry>
<title type="html"><![CDATA[CSS Pie Timer Re-Revisited]]></title>
<id>https://css-tricks.com/?p=340359</id>
@ -327,44 +386,6 @@ You can support CSS-Tricks by being an MVP Supporter.]]></summary>
<name>hello@smashingmagazine.com (Amanda Annandale)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Topframe]]></title>
<id>https://css-tricks.com/?p=340020</id>
<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. 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>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Migrating from Parcel to Snowpack]]></title>
<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 were 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 weve 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>
<name>Chris Coyier</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal]]></title>
<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 …
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>
<name>Ana Tudor</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Get Started With React By Building A Whac-A-Mole Game]]></title>
<id>https://smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/</id>
@ -491,16 +512,6 @@ Chore: Refactored parameter passing for enrich step.]]></summary>
<name>Release notes from osmosfeed</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[v1.1.6]]></title>
<id>https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.6</id>
<link href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.1.6"/>
<updated>2021-05-05T05:18:40.000Z</updated>
<summary type="html"><![CDATA[Fixed: The output website didn't have favicon.]]></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>

View file

@ -15,6 +15,143 @@
<body>
<!-- %after-body-begin.html% -->
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-05-17">2021-05-17</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">The Humble &#x60;img&#x60; Element And Core Web Vitals</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.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>Addy Osmani on images in HTML:
The humble  element has gained some superpowers over the years. Given how central it is to image optimization on the web, lets catch up on what it can do and how it can
The post The Humble &#x60;img&#x60; Element And Core Web Vitals 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">A Love Letter to HTML &amp; CSS</summary>
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/a-love-letter-to-html-css/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(5 min)</span>
<span>I see you. In the back there, behind JavaScript and React and PHP and all those “real” programming languages, I see you. And I appreciate you.
The post A Love Letter to HTML &amp; CSS 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">Euismod</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.euismod.dev/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(0 min)</span>
<span>An interactive tool for learning grid syntax from Etesam Ansari. In the Learn section, it teaches you some concepts (involving multiple bits of the grid syntax) then gives you a task to complete by filling out the right syntax. Im …
The post Euismod 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.7.2</summary>
<a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.7.2">
<div class="article-summary-box-inner">
<span class="article-reading-time">(1 min)</span>
<span>⚠ Deprecated: To accommodate the monorepo setup, the node version in all templates/demos/examples has changed from 14 to 16. This is not a breaking change as our compile target is still node 14, and node 16 is backward compatible. We still recommend you start using node-version: &quot;16&quot; in your .github/workflows/update-feed.yaml today to get the performance/security improvements from the newer node. See example
Chore: Reorganize to monorepo with npm workspace.</span>
</div>
</a>
</details>
</article>
</section>
</li>
<li class="source">
<section>
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
<section class="articles-per-source">
<article>
<details class="article-expander">
<summary class="article-expander__title">HTML vs JSX What&#x27;s the Difference?</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/html-vs-jsx-whats-the-difference/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>HTML vs JSX Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page. HTML is a very important language in web development. Your code is either in HTML originally or compiles to it so browsers can read it. JSX, on the other</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">The DOM Explained for Beginners How the Document Object Model Works</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/dom-explained-everything-you-need-to-know-about-the-document-object-model/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>When I started out as a web developer, people often threw around the term &quot;DOM&quot; in the industry. Every JavaScript tutorial mentioned it, but I didn&#x27;t know what it meant. Fast forward two years, and now that I know what it&#x27;s all about, I am going to explain what the</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">How to Use the Lottie Library like a Pro Lottie Resources for Designers and Developers</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-use-lottie-like-a-pro-resources-for-designers-and-developers/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>Lottie is a library that helps render Adobe After Effects animations natively on mobile and the web. I like using Lottie for animations in my projects because: Creating an animation from scratch can be time-consuming, andGIF files can be double the size of Lottie JSON files (the files containing the</span>
</div>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">Solidity Tutorial How to Create NFTs with Hardhat</summary>
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/solidity-tutorial-hardhat-nfts/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(4 min)</span>
<span>I&#x27;m a developer who&#x27;s mostly been writing JavaScript, so the Solidity development environment was a bit hard to learn. About four months ago, I switched to Hardhat from Truffle. This cool new kid on the block drastically improved my coding experience. So today I want to share it with my</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">How We Improved Our Core Web Vitals (Case Study)</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/core-web-vitals-case-study/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(10 min)</span>
<span>Googles “Page Experience Update” will start rolling out in June. At first, sites that meet Core Web Vitals thresholds will have a minor ranking advantage in mobile search for all browsers. Search is important to any business, and this is the story of how Beau Hartshorne and his team at Instant Domain Search improved their Core Web Vitals scores.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-05-16">2021-05-16</time></h2>
<ul class="sources card">
@ -62,7 +199,7 @@ Thank you @tianheg, @onnyyonn</span>
<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">(7 min)</span>
<span class="article-reading-time">(8 min)</span>
<span>Ive 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. Youre 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>
@ -258,17 +395,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
</a>
</details>
</article>
<article>
<details class="article-expander">
<summary class="article-expander__title">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>
@ -285,7 +411,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
<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 class="article-reading-time">(10 min)</span>
<span>Lets talk about disabled buttons. Specifically, lets 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.
@ -296,34 +422,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
</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>
@ -416,23 +514,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
</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>
@ -466,53 +547,6 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
<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 were 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 weve 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>
@ -693,17 +727,6 @@ Chore: Refactored parameter passing for enrich step.</span>
</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>
</section>
</li>
<li class="source">
@ -1013,8 +1036,8 @@ Chore: Refactored parameter passing for enrich step.</span>
</section>
<footer>
<time id="build-timestamp" datetime="2021-05-17T04:41:27.821Z">2021-05-17T04:41:27.821Z</time>
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.7.1</a></span>
<time id="build-timestamp" datetime="2021-05-18T00:48:51.908Z">2021-05-18T00:48:51.908Z</time>
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.7.2</a></span>
</footer>
<script src="index.js"></script>
<!-- %before-body-end.html% -->