osmosfeed-template/index.html
2021-04-17 00:47:01 +00:00

796 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-16</h2>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Creating an Editable Textarea That Supports Syntax-Highlighted Code</summary>
<div class="details-content">
<p>When I was working on a project that needed an editor component for source code, I really wanted a way to have that editor highlight the syntax its typed. There are projects like this, like CodeMirror, Ace, and &#8230;
The post Creating an Editable Textarea That Supports Syntax-Highlighted Code 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;creating&#45;an&#45;editable&#45;textarea&#45;that&#45;supports&#45;syntax&#45;highlighted&#45;code&#47;">Read · 6 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Platform News: Using :focus-visible, BBCs New Typeface, Declarative Shadow DOMs, A11Y and Placeholders</summary>
<div class="details-content">
<p>There&#8217;s a whole lot of accessibility in this week&#8217;s news, from the nuances of using :focus-visible and input placeholders, to accessible typefaces and a Safari bug with :display: contents. Plus, a snippet for a bare-bones web component that supports &#8230;
The post Platform News: Using :focus-visible, BBC&#8217;s New Typeface, Declarative Shadow DOMs, A11Y and Placeholders 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;platform&#45;news&#45;using&#45;focus&#45;visible&#45;bbcs&#45;new&#45;typeface&#45;declarative&#45;shadow&#45;doms&#45;a11y&#45;and&#45;placeholders&#47;">Read · 5 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Not Your Typical Horizontal Rules</summary>
<div class="details-content">
<p>The default browser style for &#60;hr&#62; is so weird. It&#8217;s basically:
border-style: inset;
border-width: 1px;
The default border-color is black, but the border doesn&#8217;t actually look black, because the inset border &#8220;adds a split tone to the line &#8230;
The post Not Your Typical Horizontal Rules appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;www.sarasoueidan.com&#47;blog&#47;horizontal&#45;rules&#47;">Read · 7 min</a>
</div>
</details>
</article>
</section>
<h3>freeCodeCamp.org</h3>
<section class="articles-per-source">
<article>
<details>
<summary>What Every React Developer Should Know About State</summary>
<div class="details-content">
<p>One of the most important concepts for every React developer to understand is state what it is, how to properly use it, and how to avoid common pitfalls as you build your applications. Let's cover five of the most essential parts of state that you need to know. Each of</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;what&#45;every&#45;react&#45;developer&#45;should&#45;know&#45;about&#45;state&#47;">Read · 8 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>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>freeCodeCamp.org</h3>
<section class="articles-per-source">
<article>
<details>
<summary>What is Terraform? Learn Terraform and Infrastructure as Code</summary>
<div class="details-content">
<p>Terraform is a tool that helps you manage various cloud infrastructure services in the form of code. You codify your infrastructure, and so it's also known as Infrastructure as Code (IaC). The cloud has become important to more and more companies. It not only helps reduce time and costs but</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;what&#45;is&#45;terraform&#45;learn&#45;infrastructure&#45;as&#45;code&#47;">Read · 8 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Game Development for Total Beginners - Free Unity Course</summary>
<div class="details-content">
<p>Almost half of all games are created using the Unity game engine. Unity is great for both new and experienced game developers. We just published a 7-hour course on the freeCodeCamp.org YouTube channel that will teach you how to create games using Unity. This is the perfect course for</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;game&#45;development&#45;for&#45;beginners&#45;unity&#45;course&#47;">Read · 1 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Technical Blogging Basics How to Write Articles as a Developer</summary>
<div class="details-content">
<p>Software developers work on designing, coding, testing, and delivering the software we use every day. And whatever that developer's particular specialty, they know a lot about a lot of things which means they should share that knowledge. Publishing articles and creating video content are great ways to share what we</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;technical&#45;blogging&#45;basics&#47;">Read · 8 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Automate Machine Learning Model Publishing with the Gitlab Package Registry</summary>
<div class="details-content">
<p>In this tutorial we'll learn how to automatically publish machine learning models in a Gitlab package registry and make them available for your teammates to use. You can also use this technique to share a packaged version of your code as a binary. If you are a beginner Gitlab user</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;ml&#45;model&#45;publishing&#45;with&#45;gitlab&#45;package&#45;registry&#47;">Read · 9 min</a>
</div>
</details>
</article>
</section>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Flash of inAccurate coloR Theme (FART)</summary>
<div class="details-content">
<p>There is a lot to think about when implementing a dark mode theme on a website. We have a huge guide on it. There are some very clever quick wins out there, but there are also some quite tricky things &#8230;
The post Flash of inAccurate coloR Theme (FART) 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;flash&#45;of&#45;inaccurate&#45;color&#45;theme&#45;fart&#47;">Read · 4 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>The Importance of Career Laddering</summary>
<div class="details-content">
<p>The title of this article is misleading. Its not actually very important for an Engineering Manager to use career laddering, per se, or my process. It is, however, very important that an Engineering Manager is clear with their employees&#8230;
The post The Importance of Career Laddering 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;the&#45;importance&#45;of&#45;career&#45;laddering&#47;">Read · 8 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Build a FullStack Serverless HN Clone With Svelte and Fauna</summary>
<div class="details-content">
<p>Svelte is a free and open-source front end JavaScript framework that enables developers to build highly performant applications with smaller application bundles. Svelte also empowers developers with its awesome developer experience.
Svelte provides a different approach to building web apps &#8230;
The post How to Build a FullStack Serverless HN Clone With Svelte and Fauna 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;build&#45;a&#45;fullstack&#45;serverless&#45;hn&#45;clone&#45;with&#45;svelte&#45;and&#45;fauna&#47;">Read · 4 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 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>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Building a Settings Component</summary>
<div class="details-content">
<p>This is a tremendous CSS-focused tutorial from Adam Argyle. I really like the &#8220;just for gap&#8221; concept here. Grid is extremely powerful, but you don&#8217;t have to use all its abilities every time you reach for it. Here, Adam &#8230;
The post Building a Settings Component 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;building&#45;a&#45;settings&#45;component&#47;">Read · 11 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling</summary>
<div class="details-content">
<p>Im not sure how this one came about. But, its a story. This article is more about grokking a concept, one thats going to help you think about your animations in a different way. It so happens that this particular &#8230;
The post Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling 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;going&#45;meta&#45;gsap&#45;the&#45;quest&#45;for&#45;perfect&#45;infinite&#45;scrolling&#47;">Read · 14 min</a>
</div>
</details>
</article>
</section>
<h3>freeCodeCamp.org</h3>
<section class="articles-per-source">
<article>
<details>
<summary>React CRUD App Tutorial How to Build a Book Management App in React from Scratch</summary>
<div class="details-content">
<p>In this article, you will build a Book Management App in React from scratch. By creating this app, you will learn: How to perform CRUD operationsHow to use React Router for navigation between routesHow to use React Context API to pass data across routesHow to create a Custom Hook in</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;react&#45;crud&#45;app&#45;how&#45;to&#45;create&#45;a&#45;book&#45;management&#45;app&#45;from&#45;scratch&#47;">Read · 17 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>5 Key React Lessons the Tutorials Don&#x27;t Teach You</summary>
<div class="details-content">
<p>There are many essential concepts and lessons that React developers need to know that simply aren't covered in most tutorials. I have handpicked the topics I believe are some of the most important for you to know, but that few articles have dedicated the time to cover in detail. Let's</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;5&#45;react&#45;lessons&#45;tutorials&#45;dont&#45;teach&#47;">Read · 7 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Learn Test-Driven Development with Integration Tests in .NET 5.0</summary>
<div class="details-content">
<p>Test-Driven Development is a much-debated concept in the tech industry. Developers wonder whether they should practice TDD or not, how advantageous it is, and so on. So what is Test-Driven Development, or TDD? Simply put, TDD dictates that you test your code before you push it to production. Now, there</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;learn&#45;tdd&#45;with&#45;integration&#45;tests&#45;in&#45;net&#45;5&#45;0&#47;">Read · 9 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Build a Chess Clock with JavaScript and setInterval</summary>
<div class="details-content">
<p>Chess games can sometimes go on for quite some time. I once heard a story of a chess game between two famous chess grandmasters that went on for over eight hours, with the crowd waiting for them to make a move. After a while one player said to the other</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;how&#45;to&#45;build&#45;a&#45;chess&#45;clock&#45;with&#45;javascript&#45;and&#45;setinterval&#47;">Read · 7 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>How to Become a Certified Kubernetes Application Developer</summary>
<div class="details-content">
<p>This guide is a summary of my study notes for the Certified Kubernetes Application Developer (CKAD) exam that I recently passed. Even if you're not interested in the certification, consider this as your one-stop shop for Kubernetes: you have all the main technical concepts explained along with a myriad of</p>
<a href="https&#58;&#47;&#47;www.freecodecamp.org&#47;news&#47;how&#45;to&#45;become&#45;a&#45;certified&#45;kubernetes&#45;application&#45;developer&#47;">Read · 25 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>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>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Cloud study</summary>
<div class="details-content">
<p>This Robin Sloan fella is an interesting character. Not only have I read his one of his fiction novels, the tremendous Mr. Penumbras 24Hour Bookstore, but I also use the olive oil he makes with partner Kathryn Tomajan. &#8230;
The post Cloud study appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;society.robinsloan.com&#47;archive&#47;cloud&#45;study&#47;">Read · 3 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Why Netlify?</summary>
<div class="details-content">
<p>I think it&#8217;s fair to think of Netlify as a CDN-backed static file host. But it would also be silly to think that&#8217;s all it is. That&#8217;s why I think it&#8217;s smart for them to have pages like this, comparing &#8230;
The post Why Netlify? 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;why&#45;netlify&#47;">Read · 2 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>CSS is a Strongly Typed Language</summary>
<div class="details-content">
<p>One of the ways you can classify a programming language is by how strongly or weakly typed it is. Here, “typed” means if variables are known at compile time. An example of this would be a scenario where an integer &#8230;
The post CSS is a Strongly Typed Language 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;css&#45;is&#45;a&#45;strongly&#45;typed&#45;language&#47;">Read · 10 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>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>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>How to Leverage the Fullscreen API… and Style It</summary>
<div class="details-content">
<p>Lets look at the Fullscreen API in JavaScript. It allows you to do a pretty powerful thing: full screening exactly one particular element you want it to. Not only that, but CSS can help as well with a special selector.&#8230;
The post How to Leverage the Fullscreen API… and Style It 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;leverage&#45;the&#45;fullscreen&#45;api&#45;and&#45;style&#45;it&#47;">Read · 5 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>See You Around</summary>
<div class="details-content">
<p>Get it? Because this blog post is about Around, the wonderful new video call software. I&#8217;ve been using it for my video calls and I&#8217;d be happy to deliver you a TLDR right off the bat: It&#8217;s nice. It &#8230;
The post See You Around 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;see&#45;you&#45;around&#47;">Read · 4 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 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>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Headless Form Submission With the WordPress REST API</summary>
<div class="details-content">
<p>If youre building a WordPress site, you need a good reason not to choose a WordPress form plugin. They are convenient and offer plenty of customizations that would take a ton of effort to build from scratch. They render the &#8230;
The post Headless Form Submission With the WordPress REST 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;headless&#45;form&#45;submission&#45;with&#45;the&#45;wordpress&#45;rest&#45;api&#47;">Read · 8 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-08</h2>
<h3>CSS-Tricks</h3>
<section class="articles-per-source">
<article>
<details>
<summary>The `ping` attribute on anchor links</summary>
<div class="details-content">
<p>I didn&#8217;t know this was a thing until Stefan Judis&#8217;s post:
&#60;a href="https://www.stefanjudis.com/popular-posts/"
ping="https://www.stefanjudis.com/tracking/"Read popular posts&#60;/a
You give an anchor link a URL via a ping attribute, and the browser will hit that URL with a web request &#8230;
The post The `ping` attribute on anchor links appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.</p>
<a href="https&#58;&#47;&#47;www.stefanjudis.com&#47;today&#45;i&#45;learned&#47;html&#45;defines&#45;a&#45;ping&#45;attribute&#45;on&#45;anchor&#45;elements&#45;links&#47;">Read · 2 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>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>
<section class="day-container">
<h2>2021-04-02</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Guarding Against Disposable Design</summary>
<div class="details-content">
<p>Quick, constant change is a given on the web. It is often one of its greatest strengths. As ever, though, there is a balance to find. Although longevity takes a different form online, its value is immeasurable.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;guarding&#45;against&#45;disposable&#45;design&#47;">Read · 11 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-04-01</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Meet Utopia: Designing And Building With Fluid Type And Space Scales</summary>
<div class="details-content">
<p>By systemizing the fundamentals of typography and space, and leaning into the inherent fluidity of the web, a free new CSS tool called [Utopia](https://utopia.fyi/) offers an alternative to breakpoint-driven design.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;04&#47;designing&#45;developing&#45;fluid&#45;type&#45;space&#45;scales&#47;">Read · 8 min</a>
</div>
</details>
</article>
</section>
</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>
<section class="day-container">
<h2>2021-03-30</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Choosing A New Serverless Database Technology At An Agency (Case Study)</summary>
<div class="details-content">
<p>In this article, Michael Rispoli explains how he evaluated the decision of whether or not to adopt a serverless database for client projects. This decision will focus on three lenses: the functional aspects of the technology, the developer experience, and the business ramifications of adoption.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;choosing&#45;new&#45;serverless&#45;database&#45;technology&#45;agency&#47;">Read · 19 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-03-29</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>SVG Generators</summary>
<div class="details-content">
<p>A complete guide to SVG generators &mdash; for everything from SVG shapes and cropping tools to SVG filters, color matrix mixers and SVG to JSX generators.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;svg&#45;generators&#47;">Read · 12 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-03-26</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Growing UX Maturity: Knowledge Sharing And Mentorship (Part 2)</summary>
<div class="details-content">
<p>This article presents tactics that can be helpful for those working in organizations that have started engaging in UX, but are still at the lower to middle stages of maturity: knowledge sharing and mentorship.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;growing&#45;ux&#45;maturity&#45;in&#45;organizations&#45;part&#45;2&#47;">Read · 14 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-03-25</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>How To Boost Media Performance On A Budget</summary>
<div class="details-content">
<p>How do we get media performance right while staying within performance budgets? Lets take a look at the recent stats and data around performance budgets, video playback performance issues and some techniques and tools to address these issues.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;boost&#45;media&#45;performance&#47;">Read · 7 min</a>
</div>
</details>
</article>
<article>
<details>
<summary>Reactivity In Vue</summary>
<div class="details-content">
<p>Reactivity is the ability for a variable (array, string, number, object, etc) to update when its value or any other variable that it makes reference to is changed after declaration.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;reactivity&#45;in&#45;vue&#47;">Read · 8 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-03-24</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>A Deep Dive Into Eleventy Static Site Generator</summary>
<div class="details-content">
<p>Eleventy (aka 11ty) is rising in the ranks among static site generators. This Node-based builder is attractive due to its zero-config starting point, purely static output, and ease of achieving the coveted top Lighthouse performance score of four perfect 100s. Lets dive into what else makes it unique, and learn about some essential concepts to help you successfully get started.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;eleventy&#45;static&#45;site&#45;generator&#47;">Read · 14 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-03-23</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Going Headless: Use Cases And What Its Good For</summary>
<div class="details-content">
<p>One of the drivers of the popularity of headless options is that expectations for the quality of user experience are constantly going up. In this article, we explore what headless means, use cases for it, and how to decide if headless is a good fit for you.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;going&#45;headless&#45;use&#45;cases&#47;">Read · 14 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-03-22</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>A Complete Guide To Accessible Front-End Components</summary>
<div class="details-content">
<p>Reliable accessible front-end components: :focus styles, content sliders, dark mode, data charts, date pickers, form styles, navigation menu, modals, radio buttons, "skip" links, SVGs, tabs, tables, toggles and tooltips.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;complete&#45;guide&#45;accessible&#45;front&#45;end&#45;components&#47;">Read · 23 min</a>
</div>
</details>
</article>
</section>
</section>
<section class="day-container">
<h2>2021-03-19</h2>
<h3>Articles on Smashing Magazine — For Web Designers And Developers</h3>
<section class="articles-per-source">
<article>
<details>
<summary>Gone Floating Labels And Green Lighthouse Scores</summary>
<div class="details-content">
<p>Wondering whats happenin at Smashing? Well, weve been busy. Heres a little story of how we removed floating labels, improved performance on mobile, and launched a new series of articles. Oh, and how you can contribute to Smashing, too.</p>
<a href="https&#58;&#47;&#47;smashingmagazine.com&#47;2021&#47;03&#47;floating&#45;labels&#45;performance&#45;lighthouse&#47;">Read · 9 min</a>
</div>
</details>
</article>
</section>
</section>
<footer>
<time id="build-timestamp" datetime="2021-04-17T00:47:01.041Z">2021-04-17T00:47:01.041Z</time>
<span><a href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.2.1</a></span>
</footer>
<script src="assets/index.js"></script>
</body>
</html>