This commit is contained in:
chuanqisun 2021-06-20 00:40:01 +00:00
parent 08166d1798
commit 44f0fefc10
3 changed files with 20 additions and 112 deletions

View file

@ -196,7 +196,7 @@
"description": "Voice assistants are currently the most popular use case for voice user interfaces. However, due to the bad feedback loop resulting from voice assistants can only solve simple user tasks such as setting an alarm or playing music. In order for voice user interfaces to really break through, feedback to the user must be visual, not auditive.",
"link": "https://smashingmagazine.com/2021/06/alternative-voice-ui-voice-assistants/",
"publishedOn": "2021-06-18T15:00:00.000Z",
"wordCount": 3427,
"wordCount": 3414,
"title": "An Alternative Voice UI To Voice Assistants",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8ebd2c76-ebe5-4885-be3e-f9acc3608072/alternative-voice-ui-voice-assistants.jpg",
@ -210,7 +210,7 @@
"description": "Next.js has a file-based routing system in which each page automatically becomes a route based on its file name. This article will guide you through almost everything you need to know about Routing in Next.js and point you in the direction of related topics and concepts.",
"link": "https://smashingmagazine.com/2021/06/client-side-routing-next-js/",
"publishedOn": "2021-06-18T13:00:00.000Z",
"wordCount": 3957,
"wordCount": 3956,
"title": "Client-Side Routing In Next.js",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a51f6c83-5e1a-4535-b28a-2018310ffc3b/client-side-routing-next-js.jpg",
@ -280,7 +280,7 @@
"description": "Spoiler alert: tooltips, modals, tabs, carousels, and dropdown menus are some of the user interface components that require more than CSS. To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.",
"link": "https://smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/",
"publishedOn": "2021-06-14T10:30:00.000Z",
"wordCount": 3670,
"wordCount": 3672,
"title": "When CSS Isnt Enough: JavaScript Requirements For Accessible Components",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9982fa1e-806c-4343-9de1-eb804a48451e/css-javascript-requirements-accessible-components.jpg",
@ -294,7 +294,7 @@
"description": "Design often revolves around visuals, but the other senses deserve love too. In this article, we tune in to audio features that are making sites sing.",
"link": "https://smashingmagazine.com/2021/06/web-design-done-well-audio/",
"publishedOn": "2021-06-11T15:00:00.000Z",
"wordCount": 1740,
"wordCount": 1700,
"title": "Web Design Done Well: Making Use Of Audio",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bf0cbb26-546e-43b7-9b9a-9077259ea84b/making-use-of-audio.jpg",
@ -308,7 +308,7 @@
"description": "We dont need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately.",
"link": "https://smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/",
"publishedOn": "2021-06-10T15:00:00.000Z",
"wordCount": 5148,
"wordCount": 5151,
"title": "Useful Front-End Boilerplates And Starter Kits",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/598e7f3e-9dca-4922-b17d-76089efab46f/25-frontend-boilerplates-starter-kits.png",
@ -322,7 +322,7 @@
"description": "Building a faster website can be a rocket task these days. There are so many things to consider, so its challenging to get everything right. Here are some less-known tools that might help you get there.",
"link": "https://smashingmagazine.com/2021/06/three-frontend-auditing-tools/",
"publishedOn": "2021-06-10T11:15:00.000Z",
"wordCount": 867,
"wordCount": 826,
"title": "Three Front-End Auditing Tools I Discovered Recently",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e21066b1-baa0-4a85-90ee-8074029d0a32/three-frontend-auditing-tools.jpg",
@ -364,7 +364,7 @@
"description": "In this guide, well be taking a general look at the concepts of forward geocoding and reverse geocoding, and will build a mini-app that applies these concepts to display specific locations, using Mapbox and Vue.js 2.6.11 to achieve this.",
"link": "https://smashingmagazine.com/2021/06/building-geocoding-app-vue-mapbox/",
"publishedOn": "2021-06-07T11:00:00.000Z",
"wordCount": 2430,
"wordCount": 2439,
"title": "How To Build A Geocoding App In Vue.js Using Mapbox",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20dc2361-e5a5-4a78-b380-2f5942ecfba8/building-geocoding-app-vue-mapbox.jpg",
@ -378,7 +378,7 @@
"description": "Modern browsers provide good support for JavaScript modules, but module bundlers such as webpack stay a critical part of the JavaScript toolchain. Lets take a deep dive into what webpack is and how to use it in your development workflow.",
"link": "https://smashingmagazine.com/2021/06/getting-started-webpack/",
"publishedOn": "2021-06-04T10:00:00.000Z",
"wordCount": 4370,
"wordCount": 4422,
"title": "Getting Started With Webpack",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/66ba7a41-2a37-471b-9c60-66a3162d8f05/webpack-dependency-graph-opt.png",
@ -392,7 +392,7 @@
"description": "Writing large-scale Vue applications can be a challenge. In this article, Shawn Wildermuth dives into the pros and cons of approaches like factories, shared objects, and using Vuex. He also explains what is coming in Vuex 5.0 that might change how we all use shared state in Vue 3.",
"link": "https://smashingmagazine.com/2021/06/managing-shared-state-vue3/",
"publishedOn": "2021-06-03T10:30:00.000Z",
"wordCount": 3717,
"wordCount": 3719,
"title": "Managing Shared State In Vue 3",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0a70815d-28e5-44af-8306-0e992e99593a/managing-shared-state-vue3.jpg",
@ -406,7 +406,7 @@
"description": "Googles Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so lets have a look at ways of addressing any issues for that metric.",
"link": "https://smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues/",
"publishedOn": "2021-06-02T12:30:00.000Z",
"wordCount": 4587,
"wordCount": 4586,
"title": "How To Fix Cumulative Layout Shift (CLS) Issues",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/87fbe5f9-d311-4542-a3f0-14e860415946/cumulative-layout-shift-issues.jpg",
@ -420,7 +420,7 @@
"description": "Getting a good performance score from Google is hard for any website — but doing so for an online store is even harder. We achieved green scores — even several for mobile. Here is how we did it.",
"link": "https://smashingmagazine.com/2021/06/front-end-performance-online-store-jewellerybox/",
"publishedOn": "2021-06-02T10:30:00.000Z",
"wordCount": 5613,
"wordCount": 5611,
"title": "Improving The Performance Of An Online Store (Case Study)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8a350bf5-9114-420c-b587-fee03ea4acb6/jewellerybox-uk-online-store-scipioerp.jpg",
@ -462,7 +462,7 @@
"description": "What could be a better way to welcome June than with some colorful inspiration? Well, we might have something for you: wallpapers created with love by artists and designers from across the globe.",
"link": "https://smashingmagazine.com/2021/05/desktop-wallpaper-calendars-june-2021/",
"publishedOn": "2021-05-31T11:30:00.000Z",
"wordCount": 2724,
"wordCount": 2777,
"title": "Happy June Vibes For Your Screen (2021 Desktop Wallpapers Edition)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png",
@ -476,7 +476,7 @@
"description": "In this article, well be re-using the foundational WYSIWYG Editor built in the first article to build a commenting system for a WYSIWYG Editor that enables users to select text inside a document and share their comments on it. Lets dig in!",
"link": "https://smashingmagazine.com/2021/05/commenting-system-wysiwyg-editor/",
"publishedOn": "2021-05-28T11:00:00.000Z",
"wordCount": 10606,
"wordCount": 10607,
"title": "Adding A Commenting System To A WYSIWYG Editor",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/ec39e154-d3d3-4a12-91fd-f0c068cd5247/commenting-system-wysiwyg-editor.jpg",
@ -490,7 +490,7 @@
"description": "Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developers workflow along the way. With auto log messages, auto code formatting, file utils, file labels, code snippets, highlight brackets, tags, indents and workspaces, onboarding and remote SSH.",
"link": "https://smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/",
"publishedOn": "2021-05-27T13:30:00.000Z",
"wordCount": 4047,
"wordCount": 4050,
"title": "Useful VS Code Extensions For Front-End Developers",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c5dbb73-94e1-486f-9daa-351699faaa2d/peacock-extension.png",
@ -532,7 +532,7 @@
"description": "Mistakes. These cruel villains do not even stop at the beautiful world of software development. But although we cannot avoid making mistakes, we can learn to undo them! This post will show the right tools for your daily work with Git.",
"link": "https://smashingmagazine.com/2021/05/undoing-mistakes-git-part2/",
"publishedOn": "2021-05-25T14:00:00.000Z",
"wordCount": 2324,
"wordCount": 2325,
"title": "A Guide To Undoing Mistakes With Git (Part 2)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/211042ae-7a72-42ba-804e-9f8132815200/undoing-mistakes-git-part1.jpg",
@ -560,41 +560,13 @@
"description": "CSS Container queries bring media queries closer to the target elements themselves and enables them to adapt to virtually any given container or layout. In this article, were going to cover CSS container query basics and how to use them today with progressive enhancement or polyfills.",
"link": "https://smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/",
"publishedOn": "2021-05-24T11:30:00.000Z",
"wordCount": 2932,
"wordCount": 2934,
"title": "CSS Container Queries: Use-Cases And Migration Strategies",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4d6d809b-0c1a-4074-9eeb-8509dc4d383f/css-container-queries-use-cases-migration-strategies.jpg",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/",
"author": "hello@smashingmagazine.com (Shalabh Vyas)",
"description": "Lets build a rich text, WYSIWYG-editor that supports rich text, images, links and some nuanced features from word processing apps. We will use SlateJS to build the shell of the editor and then add a toolbar and custom configurations.",
"link": "https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/",
"publishedOn": "2021-05-21T11:30:00.000Z",
"wordCount": 9751,
"title": "Building A Rich Text Editor (WYSIWYG)",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bafdd817-038e-4e70-a830-de0f5da659c4/building-wysiwyg-editor-javascript-slatejs.jpg",
"length": "0",
"type": "image/jpg"
}
},
{
"id": "https://smashingmagazine.com/2021/05/new-online-workshops-front-end-ux/",
"author": "hello@smashingmagazine.com (Iris Lješnjanin)",
"description": "Front-end and design are remarkably complex these days. Thats why we invite kind, smart folks from the community to run online workshops for all of us to learn together. And we have new ones coming up, and wed like to kindly welcome you to join in.",
"link": "https://smashingmagazine.com/2021/05/new-online-workshops-front-end-ux/",
"publishedOn": "2021-05-20T14:20:00.000Z",
"wordCount": 966,
"title": "Boost Your Skills Online: Smashing Workshops On Front-End And Design",
"enclosure": {
"url": "http://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1a95c729-8b29-4b44-90b0-d38183b367c0/online-workshops-2021-opt.png",
"length": "0",
"type": "image/png"
}
}
]
},

View file

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<id>urn:2021-06-19T00:37:43.459Z</id>
<id>urn:2021-06-20T00:40:00.526Z</id>
<title>osmos::feed</title>
<updated>2021-06-19T00:37:43.459Z</updated>
<updated>2021-06-20T00:40:00.526Z</updated>
<generator>osmosfeed 1.10.2</generator>
<link rel="alternate" href="index.html"/>
<entry>
@ -624,24 +624,4 @@ Thank you: @LooperXX.]]></summary>
<name>Release notes from osmosfeed</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Building A Rich Text Editor (WYSIWYG)]]></title>
<id>https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/</id>
<link href="https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/"/>
<updated>2021-05-21T11:30:00.000Z</updated>
<summary type="html"><![CDATA[Lets build a rich text, WYSIWYG-editor that supports rich text, images, links and some nuanced features from word processing apps. We will use SlateJS to build the shell of the editor and then add a toolbar and custom configurations.]]></summary>
<author>
<name>hello@smashingmagazine.com (Shalabh Vyas)</name>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Boost Your Skills Online: Smashing Workshops On Front-End And Design]]></title>
<id>https://smashingmagazine.com/2021/05/new-online-workshops-front-end-ux/</id>
<link href="https://smashingmagazine.com/2021/05/new-online-workshops-front-end-ux/"/>
<updated>2021-05-20T14:20:00.000Z</updated>
<summary type="html"><![CDATA[Front-end and design are remarkably complex these days. Thats why we invite kind, smart folks from the community to run online workshops for all of us to learn together. And we have new ones coming up, and wed like to kindly welcome you to join in.]]></summary>
<author>
<name>hello@smashingmagazine.com (Iris Lješnjanin)</name>
</author>
</entry>
</feed>

View file

@ -839,7 +839,7 @@ You can support CSS-Tricks by being an MVP Supporter.</span>
<summary class="article-expander__title">Useful VS Code Extensions For Front-End Developers</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(13 min)</span>
<span class="article-reading-time">(14 min)</span>
<span>Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developers workflow along the way. With auto log messages, auto code formatting, file utils, file labels, code snippets, highlight brackets, tags, indents and workspaces, onboarding and remote SSH.</span>
</div>
</a>
@ -995,53 +995,9 @@ Thank you: @LooperXX.</span>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-05-21">2021-05-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">Building A Rich Text Editor (WYSIWYG)</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(33 min)</span>
<span>Lets build a rich text, WYSIWYG-editor that supports rich text, images, links and some nuanced features from word processing apps. We will use SlateJS to build the shell of the editor and then add a toolbar and custom configurations.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<section class="daily-content">
<h2 class="daily-heading"><time datatime="2021-05-20">2021-05-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">Boost Your Skills Online: Smashing Workshops On Front-End And Design</summary>
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/05/new-online-workshops-front-end-ux/">
<div class="article-summary-box-inner">
<span class="article-reading-time">(3 min)</span>
<span>Front-end and design are remarkably complex these days. Thats why we invite kind, smart folks from the community to run online workshops for all of us to learn together. And we have new ones coming up, and wed like to kindly welcome you to join in.</span>
</div>
</a>
</details>
</article>
</section>
</li>
</ul>
</section>
<footer>
<time id="build-timestamp" datetime="2021-06-19T00:37:43.440Z">2021-06-19T00:37:43.440Z</time>
<time id="build-timestamp" datetime="2021-06-20T00:40:00.504Z">2021-06-20T00:40:00.504Z</time>
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.10.2</a></span>
</footer>
<script src="index.js"></script>