DEV Community

Cover image for Weekly Digest 21/2021
Marco Biedermann
Marco Biedermann

Posted on • Updated on

Weekly Digest 21/2021

Welcome to my Weekly Digest #21.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.


Interesting articles to read

A New Way To Reduce Font Loading Impact: CSS Font Descriptors

Font loading has long been a bugbear of web performance, and there really are no good choices here. If you want to use web fonts your choices are basically Flash of Invisible Text (aka FOIT) where the text is hidden until the font downloads or Flash of Unstyled Text (FOUT) where you use the fallback system font initially and then upgrade it to the web font when it downloads.

A New Way To Reduce Font Loading Impact: CSS Font Descriptors - Smashing Magazine

A Guide To Undoing Mistakes With Git

Mistakes. These cruel villains do not even stop at the beautiful world of software development. But although we cannot avoid making mistakes, we can learn to undo them! This article will show the right tools for your daily work with Git.

A Guide To Undoing Mistakes With Git (Part 1) - Smashing Magazine

A Guide To Undoing Mistakes With Git (Part 2) - Smashing Magazine

Converting tables to grids with React compound components

Using React compound components, learn how to dynamically switch from a table to grid layout for an interactive interface.

Converting tables to grids with React compound components - LogRocket Blog

State Management: How to tell a bad boolean from a good boolean

Bad booleans represent state. Good booleans are derived from state.
When you're managing state in your app, it's easy to fall prey to bad booleans

State Management: How to tell a bad boolean from a good boolean

A couple of ways to highlight code syntax in Apple Keynote slides

Apple Keynote doesn’t come with code syntax highlighting built in. I really wish it did, and hope that Apple would at some point add this feature, especially considering how many developers and engineers use Keynote to create talk slides.

A couple of ways to highlight code syntax in Apple Keynote slides


Some great videos I watched this week

React useState hook (with TypeScript)

React Hooks are amazing. A key feature that allows Function components to be THE WAY to create new React Projects.

by Basarat Ali

CI #2 - Starting out with GitHub Actions

Github Actions are an easy way to get started with Continuous Integration. You used to have to rely on services like Travis CI, Circle CI, etc. but now the main repository hosts have CI built into their platform.

by Jimmy Cleveland

New in Chrome 91: File System Access API improvements, Google IO, and more

Chrome 91 is rolling out now. Web apps that interact with files, can now suggest file names and directories when using the file system access API. Plus, you can now read files from the clipboard. If your site has more than one domain, and shares the same account management backend, you can tell Chrome they’re the same, allowing the password manager to suggest the right credentials. All the videos from I/O are now available. And there’s plenty more.

by Google Chrome Developers

Chrome 91 - What’s New in DevTools

Web vitals information pop up, visualize CSS scroll-snap, new Memory inspector and more.

by Google Chrome Developers

Requesting color from CSS in 2021 and beyond

From a limited set of web safe colors to more colors than your eye can distinguish, follow me as we play and toy with color from CSS and reach into the most vibrant colors of your screens.

by Adam Argyle


Useful GitHub repositories

Awesome Privacy

List of free, open source and privacy respecting services and alternatives to privative services.

GitHub logo pluja / awesome-privacy

Awesome Privacy - A curated list of services and alternatives that respect your privacy because PRIVACY MATTERS.

Awesome Privacy

Awesome Mirror

List of free, open source and privacy respecting services and alternatives to privative services.

About | Contributing | Quotes | Discussions

Important

Anonymity, Privacy, and Security are often used interchangeably, but they actually represent distinct concepts. It is important to understand the differences between them. Read more in this section below.

The primary focus of this list is to provide alternatives that prioritize privacy. These alternatives give you control over your data and do not collect or sell it.

Contents





Boring Avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

GitHub logo boringdesigners / boring-avatars

Boring avatars is an open source React library that generates custom, SVG-based avatars from any username and color palette.

Boring avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette

hi

Install

npm install boring-avatars

Usage

import Avatar from 'boring-avatars';

<Avatar name="Maria Mitchell" />;
Enter fullscreen mode Exit fullscreen mode

Props









































Prop Type Default
size number or string 40px
square boolean false
title boolean false
name string Clara Barton
variant oneOf: marble, beam, pixel,sunset, ring, bauhaus
marble
colors array ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']

Name

The name prop is used to generate the avatar. It can be the username, email or any random string.

<Avatar name="Maria Mitchell"/>
Enter fullscreen mode Exit fullscreen mode

Variant

The variant prop is used to change the theme of the avatar. The available variants are: marble, beam, pixel, sunset, ring and bauhaus.

<Avatar name="Alice Paul" variant="beam"/>
Enter fullscreen mode Exit fullscreen mode

Size

The…





dribbble shots

Trickle Landing Page

https://cdn.dribbble.com/users/3534089/screenshots/15700257/media/7c0217fadef9478e55486042d19c1a5a.png

by Pizzathehut

Digital Banking Dashboard Clean UI

https://cdn.dribbble.com/users/2253180/screenshots/15744173/media/eafa6141a860fd435ec61d594a5f5b51.jpg

by AR Shakir

Home Rent

https://cdn.dribbble.com/users/4684322/screenshots/15745734/media/830926709dc9ccfc3b3c5eb7e0df99a5.jpg

by Andri.

mujer

https://cdn.dribbble.com/users/5554868/screenshots/15749690/media/508c1ff51d41e8a8352e7179590ebc77.jpg

by Shayan Umar

Shoes App

https://cdn.dribbble.com/users/1770471/screenshots/15749695/media/83ce4cd1cf08d5c59d36900714838b51.jpg

by Abdullah Sajol


Tweets


Picked Pens

CSS mouse-out transition effect

by Adam Argyle

Colorful Noise

by ZIM

The Very Hungry Caterpillar

by Adam Kuhn


Podcasts worth listening

The CSS Podcast - Containment

The CSS contain property can give you some serious performance gains by adjusting how and when the browser renders elements. In this episode, we go over all the different types of containment, and where you might use them.

Syntax - JavaScript's Drag and Drop API

In this Hasty Treat, Scott and Wes talk about JavaScript's drag and drop API — how it works, concerns, best practices, and more!

3 Minutes with Kent - Fixating on fixing rerenders


Thank you for reading, talk to you next week, and stay safe! 👋

Top comments (3)

Collapse
 
64j0 profile image
Vinícius Gajo

Great content!

Collapse
 
keithmngadi profile image
Keith Mngadi

As always, great post. I honestly enjoy Weekly Digest posts as the have become my source of cool resources.

Thanks

Collapse
 
marcobiedermann profile image
Marco Biedermann

@keithmngadi Thank you very much. Great to hear that! Highly appreciated