mirror of
https://github.com/osmoscraft/osmosfeed-template.git
synced 2026-03-11 14:44:24 +00:00
946 lines
No EOL
59 KiB
HTML
946 lines
No EOL
59 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>osmos::feed</title>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
||
<link rel="alternate" type="application/rss+xml" title="osmos::feed" href="feed.atom" />
|
||
<link href="index.css" rel="stylesheet" />
|
||
<!-- %before-head-end.html% -->
|
||
</head>
|
||
|
||
<body>
|
||
<!-- %after-body-begin.html% -->
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-10-11">2021-10-11</time></h2>
|
||
<ul class="sources card">
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Those “Get The App” Banners</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/those-get-the-app-banners/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(2 min)</span>
|
||
<span>Why would a company promote a native app over their perfectly usable website?
|
||
We’d have to ask them, I suppose. But it’s hard not to see this push to native as a matter of priorities: that these companies consider native
|
||
…
|
||
The post Those “Get The App” Banners appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Cash (Tiny jQuery Alternative)</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/cash-tiny-jquery-alternative/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(2 min)</span>
|
||
<span>The README for Cash is straightforward:
|
||
Cash is an absurdly small jQuery alternative for modern browsers (IE11+) that provides jQuery-style syntax for manipulating the DOM. Utilizing modern browser features to minimize the codebase, developers can use the familiar chainable methods
|
||
…
|
||
The post Cash (Tiny jQuery Alternative) appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Better Collaboration With Pull Requests</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/better-collaboration-with-pull-requests/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(6 min)</span>
|
||
<span>This article is part of our “Advanced Git” series. Be sure to follow us on Twitter or sign up for our newsletter to hear about the next articles!
|
||
In this third installment of our “Advanced Git” series, we’ll look at …
|
||
The post Better Collaboration With Pull Requests appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">How to Start a Blog [Free 70-Page Book]</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-start-a-blog-book/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(50 min)</span>
|
||
<span>What follows is a full-length book on how to create a successful blog. I am a software developer and I've written 1,500 posts on my blog over the past few years. Millions of people have read my writing. And my blog is now one of the top 20,000</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">How to Create a Dynamic Twitter Header</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/create-a-dynamic-twitter-header/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(8 min)</span>
|
||
<span>In mid-2021, a new Twitter design trend emerged: dynamically updated headers. Developers decided that static headers were boring, and dynamic Twitter headers were the way to go. Ever since then, many developers (including me) have been creating dynamic banners on Twitter. But what does this actually mean? The idea is</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">The Autofill Dark Pattern</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/autofill-dark-pattern/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(12 min)</span>
|
||
<span>A “dark pattern” is a deceptive UX pattern that tricks users into doing things they may not really want to do. In this article, Alvaro Montoro does a little experiment to find out how much privacy is taken away from users across three different browsers.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-10-09">2021-10-09</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">Composable CSS Animation In Vue With AnimXYZ</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/composable-css-animation-vue-animxyz/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(9 min)</span>
|
||
<span>Most animation libraries like GSAP and Framer Motion are built purely with JavaScript or TypeScript, unlike AnimXYZ, which is labelled “the first composable CSS animation toolkit”, built mainly with SCSS While a simple library, it can be used to achieve a lot of awesome animation on the web in a short amount of time and little code.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-10-08">2021-10-08</time></h2>
|
||
<ul class="sources card">
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">The Case for ‘Developer Experience’</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://future.a16z.com/the-case-for-developer-experience/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(15 min)</span>
|
||
<span>A good essay from Jean Yang.
|
||
What I mean by developer experience is the sum total of how developers interface with their tools, end-to-end, day-in and day-out. Sure, there’s more focus than ever on how developers use and adopt tools, and
|
||
…
|
||
The post The Case for ‘Developer Experience’ appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Jekyll doesn’t do components? Liar!</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://katiekodes.com/jekyll-components-wysiwyg/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(9 min)</span>
|
||
<span>I like the pushback from Katie Kodes here. I’ve said in the past that I don’t think server-side languages haven’t quite nailed “building in components” as well as JavaScript has, but hey, this is a good point:
|
||
1. Any basic
|
||
…
|
||
The post Jekyll doesn’t do components? Liar! appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Building a Tennis Trivia App With Next.js and Netlify</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/building-a-tennis-trivia-app-with-next-js-and-netlify/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(9 min)</span>
|
||
<span>Today we will be learning how to build a tennis trivia app using Next.js and Netlify. This technology stack has become my go-to on many projects. It allows for rapid development and easy deployment.
|
||
Without further ado let’s jump in!…
|
||
The post Building a Tennis Trivia App With Next.js and Netlify appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Comparing Google Analytics and Plausible Numbers</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/comparing-google-analytics-and-plausible-numbers/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(5 min)</span>
|
||
<span>I saw this blog post the other day: 58% of Hacker News, Reddit and tech-savvy audiences block Google Analytics. That’s an enticing title to me. I’ve had Google Analytics on this site literally from the day I launched it. …
|
||
The post Comparing Google Analytics and Plausible Numbers appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">What is Computer Programming?</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-programming/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(5 min)</span>
|
||
<span>In today's world, we are all heavily reliant on various software products that were carefully programmed by developers. But what is computer programming? In this article, I will provide a definition of programming, as well as examples of different types of programmers. I will also suggest a list of courses</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">How to Turn On Dark Mode on Google – Chrome Black Theme Tutorial</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-turn-on-dark-mode-on-google-chrome-black-theme-tutorial/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(2 min)</span>
|
||
<span>These days, lots of developers like to use dark mode. And it's no surprise, as activating dark mode reduces eye strain and leads to better eye health. It also helps both machines and humans perform better overall. In this article, I will show you how to turn on the dark</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">How to Drop a Pin on Google Maps</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-drop-a-pin-on-google-maps/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(2 min)</span>
|
||
<span>If you want to save a new location you discovered on Google Maps, you need to drop a pin on that location. In this article, I will show you how to drop a pin in Google Maps from your phone or computer. How to Drop a Pin on Google Maps</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">How to Create an Excel File that Pulls Customer Data with WooCommerce and Python</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-create-an-excel-file-with-customers-data-with-woocommerce-and-python/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(4 min)</span>
|
||
<span>“Hey, could you please send me our customers' emails? We’re about to launch a new marketing campaign and…we need them ASAP.” If you work in the Web department on a corporate level, you've probably heard this sentence hundreds of times. So, today I want to share how I</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Building A Static-First MadLib Generator With Portable Text And Netlify On-Demand Builder Functions</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/static-first-madlib-generator-portable-text-netlify-builder-functions/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(24 min)</span>
|
||
<span>In this article, we’ll be building an interactive fiction experience in which a user can insert words that match parts of speech given by the content creator. Let’s go!</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-10-07">2021-10-07</time></h2>
|
||
<ul class="sources card">
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Writing Your Own Code Rules</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/writing-your-own-code-rules/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(3 min)</span>
|
||
<span>There comes a time on a project when it’s worth investing in tooling to protect the codebase. I’m not sure how to articulate when, but it’s somewhere after the project has proven to be something long-term and rough edges …
|
||
The post Writing Your Own Code Rules appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Developer Decisions For Building Flexible Components</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.smashingmagazine.com/2021/09/developer-decisions-building-flexible-components/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(10 min)</span>
|
||
<span>Blog posts that get into the whole “how to think like a front-end developer” vibe are my favorite. Michelle Barker nails that in this post, and does it without sharing a line of code!
|
||
We simply can no longer
|
||
…
|
||
The post Developer Decisions For Building Flexible Components appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">CSS in TypeScript with vanilla-extract</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/css-in-typescript-with-vanilla-extract/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(9 min)</span>
|
||
<span>vanilla-extract is a new framework-agnostic CSS-in-TypeScript library. It’s a lightweight, robust, and intuitive way to write your styles. vanilla-extract isn’t a prescriptive CSS framework, but a flexible piece of developer tooling. CSS tooling has been a relatively stable space over …
|
||
The post CSS in TypeScript with vanilla-extract appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">A Themeable React Data Grid With Great UX-Focused Features</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/a-themeable-react-data-grid-with-great-ux-focused-features/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(4 min)</span>
|
||
<span>(This is a sponsored post.)
|
||
KendoReact can save you boatloads of time because it offers pre-built componentry you can use in your app right away. They look nice, but more importantly, they are easily themeable, so they look however …
|
||
The post A Themeable React Data Grid With Great UX-Focused Features appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">What is Go? Golang Programming Language Meaning Explained</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/what-is-go-programming-language/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(5 min)</span>
|
||
<span>Go, also known as Golang, is an open-source, compiled, and statically typed programming language designed by Google. It is built to be simple, high-performing, readable, and efficient. In this article, you'll learn: Where Go came from and where it is now, Why I think you should learn it, How to</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Freebie: COVID-19 Icon Set (56 Icons, AI, EPS, SVG, PNG)</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/freebie-coronavirus-icon-set/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(3 min)</span>
|
||
<span>Every once in a while, we publish [freebies](https://www.smashingmagazine.com/category/freebies/) related to different occasions and themes. We hope that with this icon set, every designer will be able to find their own use case and contribute to saving lives. Free for personal and commercial use.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-10-06">2021-10-06</time></h2>
|
||
<ul class="sources card">
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://css-tricks.com">CSS-Tricks</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Websites We Like: MD Nichrome</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/websites-we-like-md-nichrome/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(4 min)</span>
|
||
<span>Here’s a beautiful website: it’s a type specimen for Mass-Driver’s ever-so-lovely type family MD Nichrome. There’s a ton of nifty animations and graphics explaining all the features inside…
|
||
If you’re wondering how those animations work, they’re actually styled …
|
||
The post Websites We Like: MD Nichrome appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">The Single Page App Morality Play</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.baldurbjarnason.com/2021/single-page-app-morality-play/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(24 min)</span>
|
||
<span>Baldur Bjarnason brings some baby bear porridge to the discussion of Single Page App (SPA) vs. Multi Page App (MPA).
|
||
Single-Page-Apps can be fantastic. Most teams will mess them up because most teams operate in dysfunctional
|
||
…
|
||
The post The Single Page App Morality Play appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Considerations for Using Markdown Writing Apps on Static Sites</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/considerations-for-using-markdown-writing-apps-on-static-sites/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(8 min)</span>
|
||
<span>If you run or have recently switched to a static site generator, you might find yourself writing a lot of Markdown. And the more you write it, the more you want the tooling experience to disappear so that …
|
||
The post Considerations for Using Markdown Writing Apps on Static Sites appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">The Options for Password Revealing Inputs</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://css-tricks.com/the-options-for-password-revealing-inputs/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(3 min)</span>
|
||
<span>In HTML, there is a very clear input type for dealing with passwords:
|
||
|
||
If you use that, you get the obfuscated bullet-points when you type into it, like:
|
||
••••••••
|
||
That’s the web trying to help with security. If …
|
||
The post The Options for Password Revealing Inputs appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.freecodecamp.org/news">freeCodeCamp.org</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">C String – How to Declare Strings in the C Programming Language</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/c-string-how-to-declare-strings-in-the-c-programming-language/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(8 min)</span>
|
||
<span>Computers store and process all kinds of data. Strings are just one of the many forms in which information is presented and gets processed by computers. Strings in the C programming language work differently than in other modern programming languages. In this article, you'll learn how to declare strings in</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Python range() Function – Explained with Code Examples</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/python-range-function-explained-with-code-examples/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(5 min)</span>
|
||
<span>In Python, can use use the range() function to get a sequence of indices to loop through an iterable. You'll often use range() in conjunction with a for loop. In this tutorial, you'll learn about the different ways in which you can use the range() function – with explicit start and</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Linux tar Command – How to Compress Files in Linux</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://www.freecodecamp.org/news/how-to-compress-files-in-linux-with-tar-command/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(3 min)</span>
|
||
<span>File compression is an essential utility across all platforms. It helps you reduce file size and share files efficiently. And compressed files are also easier to copy to remote servers. You can also compress older and rarely used files and save them for future use which helps you conserve disk</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">A Guide To CSS Debugging</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/guide-debugging-css/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(18 min)</span>
|
||
<span>Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-10-05">2021-10-05</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">Local Testing A Serverless API (API Gateway And Lambda)</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/local-testing-serverless-api-gateway-lambda/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(6 min)</span>
|
||
<span>Have you ever struggled with testing cloud services locally? Specifically, have you ever struggled with locally testing an API that uses API Gateway and Lambda, with the Serverless framework, on AWS? In this article, Tom Hudson shares a quick overview of how easy it is to quickly set up your project to test locally before deploying to AWS.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-10-04">2021-10-04</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">How To Build An Expandable Accessible Gallery</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/build-expandable-accessible-gallery/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(9 min)</span>
|
||
<span>In this article, we’ll be looking at how to set up a gallery that is expandable as well as accessible with a few tips and tricks along the way. Let’s get started!</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-10-01">2021-10-01</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">How To Implement Search Functionality In Your Nuxt App Using Algolia InstantSearch</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/10/search-functionality-nuxt-app-algolia-instantsearch/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(16 min)</span>
|
||
<span>Many websites have some sort of search feature because it helps users navigate through their content easily. Implementing it the right way can be tricky and might not give a good user experience. In this tutorial, we will be integrating Algolia, a popular and powerful search service for the best experience on our Nuxt site.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-30">2021-09-30</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">A Time Of Transition (October 2021 Desktop Wallpapers Edition)</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/desktop-wallpaper-calendars-october-2021/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(8 min)</span>
|
||
<span>Get your desktop ready for fall and the upcoming Halloween season with a fresh batch of desktop wallpapers. Created with love by designers and artists from across the globe, they come in versions with and without a calendar for October 2021.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-29">2021-09-29</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">Using Modern Image Formats: AVIF And WebP</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/modern-image-formats-avif-webp/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(17 min)</span>
|
||
<span>In this article, we’ll highlight how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing. We’ll compare what’s possible at high-quality, low-quality and file-size targets.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-28">2021-09-28</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">Improving The Accessibility Of Your Markdown</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/improving-accessibility-of-markdown/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(13 min)</span>
|
||
<span>You can find Markdown in many places on the Internet. This article covers different aspects of Markdown and how it interacts with other technology.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-27">2021-09-27</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">Let’s Dive Into Cypress For End-to-End Testing</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/cypress-end-to-end-testing/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(17 min)</span>
|
||
<span>Is end-to-end testing a painful topic for you? In this article, Ramona Schwering explains how to handle end-to-end testing with Cypress and make it make it not so tedious and expensive for yourself, but fun instead.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-26">2021-09-26</time></h2>
|
||
<ul class="sources card">
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">v1.11.2</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.11.2">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(1 min)</span>
|
||
<span>Fixed: unicode characters in URL caused download error
|
||
Fixed: project root npm install error
|
||
Added: unit test library
|
||
Chore: Dependency updates
|
||
Thank you: @CaptNo1</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-24">2021-09-24</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">Rebuilding A Large E-Commerce Website With Next.js (Case Study)</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/lessons-learned-ecommerce-nextjs-case-study/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(13 min)</span>
|
||
<span>We made the switch from a more traditional integrated e-commerce platform to a headless platform with Next.js. Here are the most important lessons learned while rebuilding a large e-commerce site with Next.js.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Free Online Workshop: Frustrating Design Patterns And How To Fix Them</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/smashing-workshop-frustrating-design-patterns/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(3 min)</span>
|
||
<span>You’ve seen them before. Confusing and frustrating design patterns that seem to be chasing you everywhere you go, from one website to another. It’s time to fix them for good in a [free Smashing online workshop](https://smashingconf.com/online-workshops/workshops/vitaly-friedman-frustrating-patterns/) next week.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-23">2021-09-23</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">Simplifying Form Styles With `accent-color`</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(7 min)</span>
|
||
<span>The new CSS `accent-color` property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. In this article we’ll take a look at what it does and how to use it alongside `color-scheme` for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-22">2021-09-22</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">Getting Your `head` Straight: A New CSS Performance Diagnostics Snippet</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/css-head-tag/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(2 min)</span>
|
||
<span>We love little useful tools and techniques to help folks get their work done better and faster. Today, we’d love to shine the spotlights on a little helper that helps spot common performance bottlenecks easily: [ct.css](https://csswizardry.com/ct/).</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-21">2021-09-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">How To Build Your Own Mouseless Development Environment</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/mouseless-development-environment/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(14 min)</span>
|
||
<span>Building a development environment with the shell as a keystone offers multiple benefits. You can customize everything depending on your own needs, and the biggest of all, you can control your entire development environment with your keyboard.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">How Web Development Tools Are Helping Users Keep Pace With Rapid Change</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/web-development-tools-users-keep-pace-rapid-change/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(6 min)</span>
|
||
<span>The last 18 months have been a time of unprecedented turbulence. As the people of the world have flooded online, businesses have joined them, using web development tools to adapt in real-time.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-20">2021-09-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">Are Imposter Domains Re-Publishing Your Website?</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/imposter-domains-republishing-website/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(13 min)</span>
|
||
<span>Content scraping is a fact of life on the Internet. When you think of web scraping, you probably do not think about the scrapers turning around and immediately serving your entire, whole page content on another website. But what if your site content is being re-published? It might be already happening.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-17">2021-09-17</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">Monetize Open-Source Software With Gatsby Functions And Stripe</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/monetize-open-source-software-gatsby-functions-stripe/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(9 min)</span>
|
||
<span>Gatsby Functions provide front-end developers a way to write and use server-side code without the hassle of maintaining a server. If making money from open-source is of interest to you and your site isn’t built using Gatsby, this approach may well be the answer you were looking for.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-16">2021-09-16</time></h2>
|
||
<ul class="sources card">
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://github.com/osmoscraft/osmosfeed/releases">Release notes from osmosfeed</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">v1.11.1</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://github.com/osmoscraft/osmosfeed/releases/tag/v1.11.1">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(1 min)</span>
|
||
<span>Fixed: Unexpected nested element in author field crashes the parser
|
||
Thank you @ad-m</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
<li class="source">
|
||
<section>
|
||
<h3 class="source-name"><a class="source-name__link" href="https://www.smashingmagazine.com/">Articles on Smashing Magazine — For Web Designers And Developers</a></h3>
|
||
<section class="articles-per-source">
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Web Quality Assurance: From User Requirements To Web Risk Management</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/journey-into-web-quality-assurance/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(15 min)</span>
|
||
<span>Twenty years ago, Elie Sloïm chose to dedicate his professional life to web quality assurance. He started asking, ”What does quality mean for a web user?” Well, this article explains everything he has learned along the way.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
<article>
|
||
<details class="article-expander">
|
||
<summary class="article-expander__title">Reasons To Build A CRM-Powered Website For Your Business</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/reasons-build-crm-powered-website-business/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(8 min)</span>
|
||
<span>Integrating a CRM with your business website has numerous benefits. In this article, Zara Cooper explains what these benefits are and why websites should be integrated with a CRM platform.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-15">2021-09-15</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">Reducing The Need For Pseudo-Elements</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/reducing-need-pseudo-elements/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(6 min)</span>
|
||
<span>For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave pseudo-elements behind in some scenarios, thanks to newer CSS properties.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-14">2021-09-14</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">The Power Of Pen And Paper Sketching</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/power-pen-paper-sketching/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(7 min)</span>
|
||
<span>When designing for digital spaces, it’s natural to default to digital mockup tools, but doing so cuts out a world of possibilities. Analog drawing can unleash your imagination and allow you to focus on what’s most important at the start: the ideas.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="daily-content">
|
||
<h2 class="daily-heading"><time datatime="2021-09-13">2021-09-13</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">Orchestrating Complexity With Web Animations API</summary>
|
||
<a class="article-summary-link article-summary-box-outer" href="https://smashingmagazine.com/2021/09/orchestrating-complexity-web-animations-api/">
|
||
<div class="article-summary-box-inner">
|
||
<span class="article-reading-time">(10 min)</span>
|
||
<span>There are way too many options in Web Animations API to pick them up that easily. Learning how timing works and how to control the playback of several animations at once makes for a solid foundation on which to base your projects on.</span>
|
||
</div>
|
||
</a>
|
||
</details>
|
||
</article>
|
||
</section>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<footer>
|
||
<time id="build-timestamp" datetime="2021-10-12T00:46:29.340Z">2021-10-12T00:46:29.340Z</time>
|
||
<span><a class="footer-link" href="https://github.com/osmoscraft/osmosfeed">osmosfeed 1.11.2</a></span>
|
||
</footer>
|
||
<script src="index.js"></script>
|
||
<!-- %before-body-end.html% -->
|
||
</body>
|
||
|
||
</html> |