Weekly Digest 49/2021
Tags: css, javascript, webdev, react
Published: 2021-12-12 18:03:59

Welcome to my Weekly Digest #49 of this year.

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

### Defensive CSS

A list of defensive CSS techniques to avoid potential future issues

[Defensive CSS - Ahmad Shadeed](https://ishadeed.com/article/defensive-css/)

### Building The Gatsby Changelog Prototype

In this post, Paul documents his journey of developing a prototype Gatsby Changelog site for the [GitHub Actions Hackathon](https://dev.to/devteam/join-us-for-the-2021-github-actions-hackathon-on-dev-4hn4).

[Building The Gatsby Changelog Prototype](https://dev.to/pauliescanlon/building-the-gatsby-changelog-prototype-30bn)

### Coloring With Code — A Programmatic Approach To Design

Learn to create beautiful, inspiring, and unique color palettes/combinations, all from the comfort of your favorite text editor!

[Coloring With Code - A Programmatic Approach To Design - Codrops](https://tympanus.net/codrops/2021/12/07/coloring-with-code-a-programmatic-approach-to-design/)

---

## Some great videos I watched this week

### Is Web3 all Hype?

A complete introduction into the wild world of Web3 - the decentralized web. Is Web 3.0 the future or is it all hype? Learn about the technologies and patterns used when building an app on the blockchain.

{% youtube wHTcrmhskto %}

by [Fireship](https://twitter.com/fireship_dev)

### Thinking on ways to solve Toasts

In today's GUI Challenge, Adam Argyle shares thinking on a way to build toasts, a non-interactive and passive component for UI to provide user feedback. Explore the [output] element, CSS grid, animations, and the FLIP technique which helps build an adaptive and accessible component.

{% youtube R75ZVW4LW5o %}

by [Adam Argyle](https://twitter.com/argyleink)

### ShopTalk Astro Edition

It's funny how you work on a real project, you get a 10 ✕ better understanding of how it works than if you just `hello, world` it, or read a blog post.

{% youtube LAVZyaFG73g %}

by [Chris Coyier](https://twitter.com/chriscoyier)

### Macro & micro layouts - Designing in the Browser

In this episode of Designing in the Browser, we will be elaborating on some concepts introduced in the Container Queries episode and expanding beyond on how to use container queries into the question of when to use them.

{% youtube sdjT0K4sR4k %}

by [Una](https://twitter.com/una)

---

## Useful GitHub repositories

### eslint-plugin-storybook

Official ESLint plugin for Storybook

{% github storybookjs/eslint-plugin-storybook %}

### **gping**

Ping, but with a graph

{% github orf/gping %}

### css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

{% github astrit/css.gg %}

---

## dribbble shots

### **NFT Dashboard**

![by [Afshin](https://dribbble.com/shots/17042125-NFT-Dashboard)](https://cdn.dribbble.com/users/1619633/screenshots/17042125/media/669c504959073e300cc274090f4de474.png)

by [Afshin](https://dribbble.com/shots/17042125-NFT-Dashboard)

### **MuseOn Branding**

![by [Halo Branding](https://dribbble.com/shots/17042867-MuseOn-Branding)](https://cdn.dribbble.com/users/4540442/screenshots/17042867/media/04060d99db6d124768532c35ce7551fd.png)

by [Halo Branding](https://dribbble.com/shots/17042867-MuseOn-Branding)

### **Multimedia Design Platform**

![by [Fauzan Ardhiansyah](https://dribbble.com/shots/17041618-POTEDIT-Multimedia-Design-Platform)](https://cdn.dribbble.com/users/3036385/screenshots/17041618/media/9df8836677c18980d55fcb8bb4835602.png)

by [Fauzan Ardhiansyah](https://dribbble.com/shots/17041618-POTEDIT-Multimedia-Design-Platform)

### Crafftt - NFT Marketplace Dashboard

![by [Rayfan Tio Saputro](https://dribbble.com/shots/17041027-Crafftt-NFT-Marketplace-Dashboard)](https://cdn.dribbble.com/users/5084254/screenshots/17041027/media/86b4a1f78e09ef6c4945696b2a520724.jpg)

by [Rayfan Tio Saputro](https://dribbble.com/shots/17041027-Crafftt-NFT-Marketplace-Dashboard)

---

## Tweets

{% twitter 1468252264259272712 %}

{% twitter 1467886765646168065 %}

{% twitter 1467828651379113988 %}

{% twitter 1467158002847285248 %}

{% twitter 1469071876119044101 %}

{% twitter 1468626754474594316 %}

---

## Picked Pens

### Sliding Stepper

{% codepen https://codepen.io/jkantner/pen/oNGzBmm %}

by [Jon Kantner](https://twitter.com/jonkantner)

### Craft Button

{% codepen https://codepen.io/Adir-SL/pen/BadXawa %}

by [Adir](https://twitter.com/adircode)

### Responsive castle

{% codepen https://codepen.io/vastrideside/pen/gOGPZNd %}

by [Vast Rideside](https://codepen.io/vastrideside)

---

## Podcasts worth listening

### Call with Kent – Bestway to reset a form

This is a question about: Improve the Performance of your React Forms

{% spotify spotify:episode:1nUaZP4NwSKbROxmywItNu %}

### Syntax – Meta Tags

In this Hasty Treat, Wes and Scott talk about Meta Tags.

{% spotify spotify:episode:3h3565EjQWE5zyu5ZuGlGC %}

---

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