osmosfeed-template/index.html
2021-05-03 00:43:15 +00:00

775 lines
40 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>osmos::feed</title>
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico">
<link href="assets/styles.css" rel="stylesheet" />
</head>
<body>
<section class="day-container">
<h2>2021-04-30</h2>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Safari 14.1 Adds Support for Flexbox Gaps</summary>
<div class="details-content">
<p>Yay, it&#8217;s here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We&#8217;ve had grid-gap support for some time, but true to its name, it&#8217;s limited to grid layouts. Now we can use gap in either type &#8230;
The post Safari 14.1 Adds Support for Flexbox Gaps 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;safari&#45;14&#45;1&#45;adds&#45;support&#45;for&#45;flexbox&#45;gaps&#47;">Read · 2 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Web Languages as Compile Targets</summary>
<div class="details-content">
<p>Jim Nielsen quoting Eric Bailey:
He references an example on Twitter where someone noted you can use the &#60;details&#62; element to “create a native HTML accordion,” to which someone responded: “this works without Bootstrap? &#x1f92f;
Whats the problem here? From
&#8230;
The post Web Languages as Compile Targets appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;blog.jim&#45;nielsen.com&#47;2021&#47;web&#45;languages&#45;as&#45;compile&#45;targets&#47;">Read · 3 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Jenny B Kowalskis A-Z (and a-z) as Variable Letterforms</summary>
<div class="details-content">
<p>Jenny B Kowalski has been posting a-letter-a-day on Instagram exploring multi-axis variable/responsive letterforms. They are very clever in that one of the axes controls an uppercase-to-lowercase conversion, literally morphing the shape of the letters from an uppercase version to a &#8230;
The post Jenny B Kowalski&#8217;s A-Z (and a-z) as Variable Letterforms 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;jenny&#45;b&#45;kowalskis&#45;a&#45;z&#45;and&#45;a&#45;z&#45;as&#45;variable&#45;letterforms&#47;">Read · 1 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>You Can Label a JavaScript `if` Statement</summary>
<div class="details-content">
<p>Labels are a feature that have existed since the creation of JavaScript. They arent new! I dont think all that many people know about them and Id even argue they are a bit confusing. But, as well see, labels can &#8230;
The post You Can Label a JavaScript `if` Statement 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;you&#45;can&#45;label&#45;a&#45;javascript&#45;if&#45;statement&#47;">Read · 6 min</a>
</div>
</details>
</article>
</section>
<h3>freeCodeCamp.org</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Keyboard Shortcuts to Improve Your Coding Productivity</summary>
<div class="details-content">
<p>These days, computers can pretty much do anything. Now if you are a frequent computer user like I am, I'm sure you interact with the keyboard all the time. And in this article, I'm going to show you some helpful keyboard shortcuts that will make your work easier</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;keyboard&#45;shortcuts&#45;improve&#45;productivity&#47;">Read · 4 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Node.js and Cloud Firestore Tutorial How to Build a Home Inventory System</summary>
<div class="details-content">
<p>In this article, you'll practice your JavaScript skills while streamlining your household chores by creating your very own home inventory system. I've often found that it's hard to keep track common household items that I buy frequently such as food, spices, medicine, and the like. It's annoying at best and</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;nodejs&#45;and&#45;cloud&#45;firestore&#45;tutorial&#45;build&#45;a&#45;home&#45;inventory&#45;system&#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">
<article>
<details>
<summary>May Is In The Air (2021 Wallpapers Edition)</summary>
<div class="details-content">
<p>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.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;desktop&#45;wallpaper&#45;calendars&#45;may&#45;2021&#47;">Read · 7 min</a>
</div>
</details>
</article>
</section>
</section>
<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 · 5 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 · 3 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>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Your Team is Not “Them”</summary>
<div class="details-content">
<p>This post was written for engineering managers, but anyone is welcome to read it.
Lets 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, &#8230;
The post Your Team is Not &#8220;Them&#8221; 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;your&#45;team&#45;is&#45;not&#45;them&#47;">Read · 6 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Create Actions for Selected Text With the Selection API</summary>
<div class="details-content">
<p>Click, drag, release: youve just selected some text on a webpageprobably to copy and paste it somewhere or to share it. Wouldn&#8217;t it be cool if selecting that text revealed some options that make those tasks easier? Thats &#8230;
The post How to Create Actions for Selected Text With the Selection API 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;create&#45;actions&#45;for&#45;selected&#45;text&#45;with&#45;the&#45;selection&#45;api&#47;">Read · 5 min</a>
</div>
</details>
</article>
</section>
<h3>freeCodeCamp.org</h3>
<section class="articles-per-source">
<article>
<details>
<summary>CSS Flexbox Tutorial with Flexbox Properties Cheat Sheet 🎖️</summary>
<div class="details-content">
<p>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</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;css&#45;flexbox&#45;tutorial&#45;with&#45;cheatsheet&#47;">Read · 4 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Create a MERN Stack App with a Serverless Backend</summary>
<div class="details-content">
<p>The MERN stack is a popular way to make a full stack web app. MERN stands for MongoDB, Express, React, and Node.js. We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use the MERN stack by building a restaurant review web</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;create&#45;a&#45;mern&#45;stack&#45;app&#45;with&#45;a&#45;serverless&#45;backend&#47;">Read · 1 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>Meet Image Optimization, A New Smashing Book By Addy Osmani</summary>
<div class="details-content">
<p>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.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;image&#45;optimization&#45;pre&#45;release&#47;">Read · 7 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-27</h2>
<h3>freeCodeCamp.org</h3>
<section class="articles-per-source">
<article>
<details>
<summary>JavaScript Execution Context and Hoisting Explained with Code Examples</summary>
<div class="details-content">
<p>JavaScript is an easy-to-learn programming language compared to many of its counterparts. However, a few basic concepts need a bit more attention if you want to understand, debug, and write better code. In this article, we will learn about two such concepts, Execution ContextHoistingAs a beginner to JavaScript, understanding these</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;javascript&#45;execution&#45;context&#45;and&#45;hoisting&#47;">Read · 7 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Python Code Examples Sample Script Coding Tutorial for Beginners</summary>
<div class="details-content">
<p>Hi! Welcome. If you are learning Python, then this article is for you. You will find a thorough description of Python syntax and lots of code examples to guide you during your coding journey. What we will cover:Variable Definitions in PythonHello, World! Program in PythonData Types and Built-in Data</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;python&#45;code&#45;examples&#45;sample&#45;script&#45;coding&#45;tutorial&#45;for&#45;beginners&#47;">Read · 43 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Add the Realm Database to an iOS CRUD App using Swift</summary>
<div class="details-content">
<p>Hello, everyone! In this article we are going to learn how to add the Realm database to an iOS app. We'll create a simple ToDo app so you can learn how to perform CRUD (Create, Read, Update, Delete) operations in the Realm database. What is Realm?Realm is an open-source</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;add&#45;realm&#45;database&#45;to&#45;ios&#45;crud&#45;app&#45;with&#45;with&#45;swift&#47;">Read · 6 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Lazy Loading in Angular A Beginner&#x27;s Guide to NgModules</summary>
<div class="details-content">
<p>What is Lazy Loading?Lazy loading is the process of loading components, modules, or other assets of a website as they're required. Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;lazy&#45;loading&#45;in&#45;angular&#45;intro&#45;to&#45;ngmodules&#47;">Read · 4 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Build a React Application with Load More Functionality using React Hooks</summary>
<div class="details-content">
<p>In this article, we will build a React application using class components. Then we'll convert it to functional components using React Hooks in a step-by-step way. By building this app, you will learn: How to make API callsHow to implement load more functionalityHow to debug application issuesHow to use async/</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;build&#45;a&#45;react&#45;application&#45;with&#45;load&#45;more&#45;functionality&#45;react&#45;hooks&#47;">Read · 13 min</a>
</div>
</details>
</article>
</section>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Shared Element Transitions</summary>
<div class="details-content">
<p>I was just Hoping for Better Native Page&#160;Transitions, and Bramus commented that Chrome is working on something. Looks like it has some fresh enthusiasm for it, as there is a brand new repo, and you can literally test &#8230;
The post Shared Element 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;shared&#45;element&#45;transitions&#47;">Read · 4 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>A Complete Guide to Custom Properties</summary>
<div class="details-content">
<p>Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as "CSS Variables" but that's not their real name.
The post A Complete Guide to Custom Properties 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;a&#45;complete&#45;guide&#45;to&#45;custom&#45;properties&#47;">Read · 18 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>Understanding Easing Functions For CSS Animations And Transitions</summary>
<div class="details-content">
<p>Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. In this article, were going to take a deep dive into easing functions and see how we can use them to create those natural and stunning animations.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;easing&#45;functions&#45;css&#45;animations&#45;transitions&#47;">Read · 9 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-26</h2>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Exploring color-contrast() for the First Time</summary>
<div class="details-content">
<p>I saw in the release notes for Safari Technical Preview 122 that it has support for a color-contrast() function in CSS. Safari is first out of the gate here. As far as I know, no other browser supports this yet &#8230;
The post Exploring color-contrast() for the First Time 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;exploring&#45;color&#45;contrast&#45;for&#45;the&#45;first&#45;time&#47;">Read · 3 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Generating (and Solving!) Sudokus in CSS</summary>
<div class="details-content">
<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 · 17 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>How To Bake Layers Of Accessibility Testing Into Your Process</summary>
<div class="details-content">
<p>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 its easier and cheaper to fix them.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;bake&#45;layers&#45;accessibility&#45;testing&#45;process&#47;">Read · 11 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-23</h2>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Eliminating five top compatibility pain points on the web</summary>
<div class="details-content">
<p>Robert Nyman and Philip Jägenstedt:
Google is working with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers. The areas of focus are CSS Flexbox, CSS Grid,&#160;position: sticky,&#160;
&#8230;
The post Eliminating five top compatibility pain points on the web appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;web.dev&#47;compat2021&#47;">Read · 4 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Using New Gatsby Source WordPress Plugin</summary>
<div class="details-content">
<p>In my previous article, I discussed how I learned to create a decoupled WordPress powered Gatsby site using the Gatsby Source WPGraphQL plugin. The project was done following the ongoing developmental version of WPGraphQL and an excellent tutorial by Henrik &#8230;
The post Using New Gatsby Source WordPress Plugin 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;using&#45;new&#45;gatsby&#45;source&#45;wordpress&#45;plugin&#47;">Read · 20 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>A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors</summary>
<div class="details-content">
<p>The CSS Working Group Editors 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!</p>
<a 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;">Read · 8 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-22</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Web Design Done Well: The Ordinary Made Extraordinary (Part 1)</summary>
<div class="details-content">
<p>Sometimes its 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.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;web&#45;design&#45;done&#45;well&#45;part1&#47;">Read · 6 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-21</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>A Complete Guide To Incremental Static Regeneration (ISR) With Next.js</summary>
<div class="details-content">
<p>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.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;incremental&#45;static&#45;regeneration&#45;nextjs&#47;">Read · 6 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Why Content Is Such A Fundamental Part Of The Web Design Process</summary>
<div class="details-content">
<p>As designers, we are often burdened by the responsibility of producing and managing website content. Its not our job to write it, but its not the clients either. We can avert disaster by including content production in the design process.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;content&#45;fundamental&#45;part&#45;web&#45;design&#45;process&#47;">Read · 10 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-20</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Making GraphQL Work In WordPress</summary>
<div class="details-content">
<p>Lets 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.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;making&#45;graphql&#45;work&#45;in&#45;wordpress&#47;">Read · 12 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-19</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>An In-Depth Guide To Measuring Core Web Vitals</summary>
<div class="details-content">
<p>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? Lets figure it out.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;complete&#45;guide&#45;measure&#45;core&#45;web&#45;vitals&#47;">Read · 24 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-16</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Seven Mistakes To Avoid In Your Technical Interviews</summary>
<div class="details-content">
<p>Its no secret that the technical interview process leaves something to be desired; its often riddled with anxiety and stress. In this article, well take a look at seven of the most common mistakes candidates make in their technical interviews and explore ways you can avoid them.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;mistakes&#45;technical&#45;interviews&#47;">Read · 10 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-15</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>How To Get Web Design Clients Fast (Part 2)</summary>
<div class="details-content">
<p>Selling is key to growing your web design business, but it doesnt have to be complicated! With clear goals, customer research, and proven closing techniques, anyone can find new clients.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;web&#45;design&#45;clients&#45;fast&#45;part2&#47;">Read · 12 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>From Cats With Love: New Navigation, Guides And Workshops</summary>
<div class="details-content">
<p>At Smashing, weve been busy over the last few months. Weve set up new workshops, redesigned our navigation, refined performance and improved accessibility. There are subtle UX changes coming in, and wed love to share what weve been cooking.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;from&#45;cats&#45;with&#45;love&#45;navigation&#45;guides&#45;workshops&#47;">Read · 3 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-14</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Overflow Issues In CSS</summary>
<div class="details-content">
<p>In this article, we will explore the causes of overflow issues and how to solve them. We will also explore how modern features in the developer tools (DevTools) can make the process of fixing and debugging easier.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;css&#45;overflow&#45;issues&#47;">Read · 6 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-13</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Building A Video Streaming App With Nuxt.js, Node And Express</summary>
<div class="details-content">
<p>In this article, well be building a video streaming app using Nuxt.js and Node.js. Specifically, well build a server-side Node.js app that will handle fetching and streaming videos, generating thumbnails for your videos, and serving captions and subtitles.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;building&#45;video&#45;streaming&#45;app&#45;nuxtjs&#45;node&#45;express&#47;">Read · 11 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-12</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>A Complete Guide To HTML Email</summary>
<div class="details-content">
<p>Recently weve covered CSS generators, SVG generators and accessible front-end components. This time we look into HTML email, with tools, templates and guides for designers and developers.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;complete&#45;guide&#45;html&#45;email&#45;templates&#45;tools&#47;">Read · 10 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-09</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Growing UX Maturity In Organizations: Education And Training (Part 3)</summary>
<div class="details-content">
<p>UX practitioners can play an important role in growing the UX maturity of the organizations and product teams they work with. This final article in a three-part series presents two additional tactics: education of staff on UX principles and processes.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;growing&#45;ux&#45;maturity&#45;in&#45;organizations&#45;part&#45;3&#47;">Read · 20 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-08</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Better Documentation And Team Communication With Product Design Docs</summary>
<div class="details-content">
<p>Have you ever struggled to get the green light on your design proposals? Do you feel like your design process needs to be formalized? Is the COVID19 era becoming a challenge for you when working remotely as a designer? Then keep reading to get to know a methodology to document your design process in this article.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;better&#45;documentation&#45;team&#45;communication&#45;product&#45;design&#45;docs&#47;">Read · 6 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-07</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Flaky Tests: Getting Rid Of A Living Nightmare In Testing</summary>
<div class="details-content">
<p>Unreliable tests are a living nightmare for anyone who writes automated tests or pays attention to the results. Flaky tests have even given folks nightmares and sleepless nights. In this article, Ramona Schwering shares her experiences to help you get out of this hell or avoid getting into it.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;flaky&#45;tests&#45;living&#45;nightmare&#47;">Read · 13 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-06</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Dont Lose Your Head: Evaluating Headless</summary>
<div class="details-content">
<p>With many options comes many decisions, and it is easy to drown in all the many benefits of headless CMS. How do we approach evaluating these options? Lets figure it out.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;evaluating&#45;headless&#47;">Read · 14 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-05</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Vanilla JavaScript Code Snippets</summary>
<div class="details-content">
<p>A guide to vanilla JavaScript code snippets &mdash; with resources and lightweight libraries to help you solve a problem without a large overhead or third-party dependencies.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;vanilla&#45;javascript&#45;code&#45;snippets&#47;">Read · 7 min</a>
</div>
</details>
</article>
</section>
</section>
<footer>
<time id="build-timestamp" datetime="2021-05-03T00:43:14.712Z">2021-05-03T00:43:14.712Z</time>
<span><a href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.3.0</a></span>
</footer>
<script src="assets/index.js"></script>
</body>
</html>