This commit is contained in:
chuanqisun 2021-04-30 00:41:26 +00:00
parent 026e8ee402
commit 751fa824cc
2 changed files with 127 additions and 127 deletions

View file

@ -3,11 +3,38 @@
{
"href": "https://css-tricks.com/feed/",
"articles": [
{
"description": "I’ve got a podcast that will be 10 years old this coming January! Most of those episodes have one or more guests (plus me and Dave). Despite fancy modern options for recording podcasts with guests, like Riverside.fm or Zencastr…\nThe post Sending Large Files appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/sending-large-files/",
"publishedOn": "2021-04-29T17:52:55.000Z",
"wordCount": 1102,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "Sending Large Files"
},
{
"description": "Raygun is an error and performance monitoring software for websites and mobile apps. In the case of websites, you install their JavaScript snippet onto your site, which takes 2 seconds, and now you’ve got monitoring in place. Why? Well now …\nThe post How to Monitor Core Web Vitals and Take Action with Raygun appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/how-to-monitor-core-web-vitals-and-take-action-with-raygun/",
"publishedOn": "2021-04-29T17:50:39.000Z",
"wordCount": 723,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "How to Monitor Core Web Vitals and Take Action with Raygun"
},
{
"description": "Lists—weve all worked with them in one form or another. Im talking about HTMLs <ol> and <ul>. Much of the time, because we desire styling control, we turn off the lists markers completely with list-style-type: none, and start …\nThe post List Markers and String Styles appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/list-markers-and-string-styles/",
"publishedOn": "2021-04-29T14:32:41.000Z",
"wordCount": 1013,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "List Markers and String Styles"
},
{
"description": "This post was written for engineering managers, but anyone is welcome to read it.\nLets talk for a moment about how we talk about our teams. This might not seem like something that needs a whole article dedicated to it, …\nThe post Your Team is Not “Them” appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/your-team-is-not-them/",
"publishedOn": "2021-04-28T19:35:32.000Z",
"wordCount": 1696,
"wordCount": 1841,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "Your Team is Not “Them”"
@ -16,7 +43,7 @@
"description": "Click, drag, release: youve just selected some text on a webpageprobably to copy and paste it somewhere or to share it. Wouldn’t it be cool if selecting that text revealed some options that make those tasks easier? Thats …\nThe post How to Create Actions for Selected Text With the Selection API appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/how-to-create-actions-for-selected-text-with-the-selection-api/",
"publishedOn": "2021-04-28T14:19:54.000Z",
"wordCount": 1406,
"wordCount": 1515,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "How to Create Actions for Selected Text With the Selection API"
@ -52,7 +79,7 @@
"description": "I love to make CSS do stuff it shouldnt. Its the type of problem-solving brain training youd get building a calculator in Minecraft, except you probably wont get a job working with Minecraft Redstone no matter how good you …\nThe post Generating (and Solving!) Sudokus in CSS appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/generating-and-solving-sudokus-in-css/",
"publishedOn": "2021-04-26T14:05:00.000Z",
"wordCount": 5386,
"wordCount": 5072,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "Generating (and Solving!) Sudokus in CSS"
@ -106,43 +133,25 @@
"description": "Not a typical one, at least. Each character is an HTML element, built with CSS. A true web font!\nLet me elaborate. This is a way to render text without using any font at all. Random text is split with …\nThe post The Making (and Potential Benefits) of a CSS Font appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/the-making-and-potential-benefits-of-a-css-font/",
"publishedOn": "2021-04-22T14:30:43.000Z",
"wordCount": 4480,
"wordCount": 4534,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "The Making (and Potential Benefits) of a CSS Font"
},
{
"description": "It would be nice to be able to animate the transition between pages if we want to on the web without resorting to hacks or full-blown architecture choices to achieve it. I could imagine an API that would run stuff…\nThe post Still Hoping for Better Native Page Transitions appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/still-hoping-for-better-native-page-transitions/",
"publishedOn": "2021-04-21T22:57:03.000Z",
"wordCount": 1430,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "Still Hoping for Better Native Page Transitions"
},
{
"description": "Page Laubheimer says that if you’re going to do a sticky header…\nKeep it small.\nVisually contrast it with the rest of the page.\nIf it’s going to move, keep it minimal. (I’d say, respect prefers-reduced-motion.)\nConsider “partially persistent \n…\nThe post Sticky Headers: 5 Ways to Make Them Better appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://www.nngroup.com/articles/sticky-headers/",
"publishedOn": "2021-04-21T20:53:31.000Z",
"wordCount": 2351,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "Sticky Headers: 5 Ways to Make Them Better"
},
{
"description": "Lets say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you cant use any graphic editorthey need to be generated at runtimeso you have to solve it …\nThe post How to Add a Double Border to SVG Shapes appeared first on CSS-Tricks.\nYou can support CSS-Tricks by being an MVP Supporter.",
"link": "https://css-tricks.com/how-to-add-a-double-border-to-svg-shapes/",
"publishedOn": "2021-04-21T14:26:28.000Z",
"wordCount": 1352,
"sourceHref": "https://css-tricks.com/feed/",
"sourceTitle": "CSS-Tricks",
"title": "How to Add a Double Border to SVG Shapes"
}
]
},
{
"href": "https://www.smashingmagazine.com/feed/",
"articles": [
{
"description": "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 its 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)).",
"link": "https://smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/",
"publishedOn": "2021-04-29T12:15:00.000Z",
"wordCount": 5289,
"sourceHref": "https://www.smashingmagazine.com/feed/",
"sourceTitle": "Articles on Smashing Magazine — For Web Designers And Developers",
"title": "The Humble `<img>` Element And Core Web Vitals"
},
{
"description": "The cat is out! For the last year, weve been working with Addy Osmani on a new Smashing Book all around image optimization. And now its here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance.",
"link": "https://smashingmagazine.com/2021/04/image-optimization-pre-release/",
@ -340,21 +349,21 @@
"sourceHref": "https://www.smashingmagazine.com/feed/",
"sourceTitle": "Articles on Smashing Magazine — For Web Designers And Developers",
"title": "Meet Utopia: Designing And Building With Fluid Type And Space Scales"
},
{
"description": "Lets welcome the new month with some fresh wallpapers. Designed with love by artists and designers from across the globe, they are available with and without a calendar for April 2021.",
"link": "https://smashingmagazine.com/2021/03/desktop-wallpaper-calendars-april-2021/",
"publishedOn": "2021-03-31T10:00:00.000Z",
"wordCount": 2035,
"sourceHref": "https://www.smashingmagazine.com/feed/",
"sourceTitle": "Articles on Smashing Magazine — For Web Designers And Developers",
"title": "The Small Joys Of April (2021 Wallpapers Edition)"
}
]
},
{
"href": "https://www.freecodecamp.org/news/rss/",
"articles": [
{
"description": "Docker is an open source project that makes it easy to create containers and container-based apps. Docker's lightweight and portable software containers simplify application development, testing, and deployment. We just released a course on the freeCodeCamp.org YouTube channel that will help you learn the core fundamentals of Docker by",
"link": "https://www.freecodecamp.org/news/learn-docker-by-building-a-node-express-app/",
"publishedOn": "2021-04-29T20:05:04.000Z",
"wordCount": 496,
"sourceHref": "https://www.freecodecamp.org/news/rss/",
"sourceTitle": "freeCodeCamp.org",
"title": "Learn Docker by Building a Node / Express App"
},
{
"description": "In this article, I'll teach you CSS Flexbox basics so you can make your own responsive sites. I'll explain how each of Flexbox's properties work, and I'll give you a cheatsheet that covers everything you can do with Flexbox. Let's Go 🎖️ Table of ContentsFlexbox Architectureflex-directionjustify-contentalign-contentalign-itemsalign-selfflex - grow | shrink | wrap | basisShort",
"link": "https://www.freecodecamp.org/news/css-flexbox-tutorial-with-cheatsheet/",
@ -435,15 +444,6 @@
"sourceHref": "https://www.freecodecamp.org/news/rss/",
"sourceTitle": "freeCodeCamp.org",
"title": "How to Create 3D and 2D Graphics with OpenGL and C++"
},
{
"description": "Have you ever visited a website with a custom scrollbar and wondered how they did it? After reading this article you will understand just about everything there is to know about customizing and styling scrollbars using CSS. In this tutorial you will: Learn the native CSS properties available for styling",
"link": "https://www.freecodecamp.org/news/css-scrollbar-tutorial/",
"publishedOn": "2021-04-27T00:37:38.000Z",
"wordCount": 2356,
"sourceHref": "https://www.freecodecamp.org/news/rss/",
"sourceTitle": "freeCodeCamp.org",
"title": "CSS Scrollbar Styling Tutorial How to Make a Custom Scrollbar"
}
]
}

View file

@ -10,6 +10,82 @@
</head>
<body>
<section class="day-container">
<h2>2021-04-29</h2>
<h3>freeCodeCamp.org</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Learn Docker by Building a Node / Express App</summary>
<div class="details-content">
<p>Docker is an open source project that makes it easy to create containers and container-based apps. Docker's lightweight and portable software containers simplify application development, testing, and deployment. We just released a course on the freeCodeCamp.org YouTube channel that will help you learn the core fundamentals of Docker by</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;learn&#45;docker&#45;by&#45;building&#45;a&#45;node&#45;express&#45;app&#47;">Read · 2 min</a>
</div>
</details>
</article>
</section>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Sending Large Files</summary>
<div class="details-content">
<p>I&#8217;ve got a podcast that will be 10 years old this coming January! Most of those episodes have one or more guests (plus me and Dave). Despite fancy modern options for recording podcasts with guests, like Riverside.fm or Zencastr&#8230;
The post Sending Large Files appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;css&#45;tricks.com&#47;sending&#45;large&#45;files&#47;">Read · 4 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Monitor Core Web Vitals and Take Action with Raygun</summary>
<div class="details-content">
<p>Raygun is an error and performance monitoring software for websites and mobile apps. In the case of websites, you install their JavaScript snippet onto your site, which takes 2 seconds, and now you&#8217;ve got monitoring in place. Why? Well now &#8230;
The post How to Monitor Core Web Vitals and Take Action with Raygun appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;css&#45;tricks.com&#47;how&#45;to&#45;monitor&#45;core&#45;web&#45;vitals&#45;and&#45;take&#45;action&#45;with&#45;raygun&#47;">Read · 2 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>List Markers and String Styles</summary>
<div class="details-content">
<p>Lists—weve all worked with them in one form or another. Im talking about HTMLs &#60;ol&#62; and &#60;ul&#62;. Much of the time, because we desire styling control, we turn off the lists markers completely with list-style-type: none, and start &#8230;
The post List Markers and String Styles appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;css&#45;tricks.com&#47;list&#45;markers&#45;and&#45;string&#45;styles&#47;">Read · 3 min</a>
</div>
</details>
</article>
</section>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>The Humble `` Element And Core Web Vitals</summary>
<div class="details-content">
<p>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 its 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)).</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;humble&#45;img&#45;element&#45;core&#45;web&#45;vitals&#47;">Read · 18 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-28</h2>
@ -160,16 +236,6 @@ You can support CSS-Tricks by being an MVP Supporter.</p>
</div>
</details>
</article>
<article>
<details>
<summary>CSS Scrollbar Styling Tutorial How to Make a Custom Scrollbar</summary>
<div class="details-content">
<p>Have you ever visited a website with a custom scrollbar and wondered how they did it? After reading this article you will understand just about everything there is to know about customizing and styling scrollbars using CSS. In this tutorial you will: Learn the native CSS properties available for styling</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;css&#45;scrollbar&#45;tutorial&#47;">Read · 8 min</a>
</div>
</details>
</article>
</section>
@ -244,7 +310,7 @@ You can support CSS-Tricks by being an MVP Supporter.</p>
<p>I love to make CSS do stuff it shouldnt. Its the type of problem-solving brain training youd get building a calculator in Minecraft, except you probably wont get a job working with Minecraft Redstone no matter how good you &#8230;
The post Generating (and Solving!) Sudokus in CSS appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;css&#45;tricks.com&#47;generating&#45;and&#45;solving&#45;sudokus&#45;in&#45;css&#47;">Read · 18 min</a>
<a href="https&#58;&#47;&#47;css&#45;tricks.com&#47;generating&#45;and&#45;solving&#45;sudokus&#45;in&#45;css&#47;">Read · 17 min</a>
</div>
</details>
</article>
@ -401,52 +467,6 @@ You can support CSS-Tricks by being an MVP Supporter.</p>
<section class="day-container">
<h2>2021-04-21</h2>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Still Hoping for Better Native Page Transitions</summary>
<div class="details-content">
<p>It would be nice to be able to animate the transition between pages if we want to on the web without resorting to hacks or full-blown architecture choices to achieve it. I could imagine an API that would run stuff&#8230;
The post Still Hoping for Better Native Page Transitions appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;css&#45;tricks.com&#47;still&#45;hoping&#45;for&#45;better&#45;native&#45;page&#45;transitions&#47;">Read · 5 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Sticky Headers: 5 Ways to Make Them Better</summary>
<div class="details-content">
<p>Page Laubheimer says that if you&#8217;re going to do a sticky header&#8230;
Keep it small.
Visually contrast it with the rest of the page.
If it&#8217;s going to move, keep it minimal. (I&#8217;d say, respect prefers-reduced-motion.)
Consider &#8220;partially persistent
&#8230;
The post Sticky Headers: 5 Ways to Make Them Better appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;www.nngroup.com&#47;articles&#47;sticky&#45;headers&#47;">Read · 8 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Add a Double Border to SVG Shapes</summary>
<div class="details-content">
<p>Lets say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you cant use any graphic editorthey need to be generated at runtimeso you have to solve it &#8230;
The post How to Add a Double Border to SVG Shapes appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;css&#45;tricks.com&#47;how&#45;to&#45;add&#45;a&#45;double&#45;border&#45;to&#45;svg&#45;shapes&#47;">Read · 5 min</a>
</div>
</details>
</article>
</section>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
@ -763,28 +783,8 @@ You can support CSS-Tricks by being an MVP Supporter.</p>
</section>
<section class="day-container">
<h2>2021-03-31</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>The Small Joys Of April (2021 Wallpapers Edition)</summary>
<div class="details-content">
<p>Lets welcome the new month with some fresh wallpapers. Designed with love by artists and designers from across the globe, they are available with and without a calendar for April 2021.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;desktop&#45;wallpaper&#45;calendars&#45;april&#45;2021&#47;">Read · 7 min</a>
</div>
</details>
</article>
</section>
</section>
<footer>
<time id="build-timestamp" datetime="2021-04-29T00:47:48.776Z">2021-04-29T00:47:48.776Z</time>
<time id="build-timestamp" datetime="2021-04-30T00:41:25.902Z">2021-04-30T00:41:25.902Z</time>
<span><a href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.2.3</a></span>
</footer>