Weekly Digest 32/2021
Tags: css, javascript, react, webdev
Published: 2021-08-15 20:28:45

Welcome to my Weekly Digest #32 which will be a little shorter this time.

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 guide to designing accessible, WCAG-compliant focus indicators

This guide is aimed at both designers who want to learn about accessibility considerations for designing focus indicators, as well as developers who want to implement them.

[A guide to designing accessible, WCAG-compliant focus indicators](https://sarasoueidan.com/blog/focus-indicators/)

### JavaScript needs more helper functions for iteration – where should we put them?

Iteration is a standard that connects operations with data containers: Each operation that follows this standard can be applied to each data container that implements this standard.

[JavaScript needs more helper functions for iteration (map, filter, etc.) - where should we put them?](https://2ality.com/2021/08/iteration-helpers.html)

### The World of CSS Transforms

The “transform” property is such a powerful part of the CSS language! In this blog post, we'll take a deep look at this property and see some of the nifty things it can do.

[The World of CSS Transforms](https://www.joshwcomeau.com/css/transforms/)

---

## Some great videos I watched this week

### Supercharge GitHub Issues with this new feature

Create issues, break them into tasks, track relationships, add custom fields, and have conversations. Visualize large projects as spreadsheets or boards, and automate everything with code.

{% youtube PilNDZsko3Y %}

by [GitHub](https://twitter.com/github)

### Understanding Semantic Versioning with Real-World Examples

Semantic Versioning, or semver for short, is one of those systems that's used all the time by developers but often not understood. It's one of those systems that just sorta works and you don't have to think about it too much, but it actually helps a lot to take some time and understand what the numbers mean and the implications of updating to a new version.

{% youtube 1zBzkT7QCmA %}

by [Jimmy Cleveland](https://twitter.com/JimmyDCleveland)

### Centering with Negative Transforms… and Sensible Wrapping!

As we'll see at the end of this quick video: `fit-content` is our friend for sizing content that is no larger than the intrinsic width but also can shrink without forcing anything with weird side effects like preventing line-wrapping.

{% youtube sXxulZJHE9Y %}

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

### Weird URL Protocols

Ever wondered what URL protocols are out there?

{% youtube WcLmMLqnKCM %}

by [ThioJoe](https://twitter.com/ThioJoe)

### Thinking on ways to solve SWITCHES

In today's GUI challenge I share my thinking on a way to solve a switch. A tiny, UX-packed component that ended up being one of the most involved challenges so far. Tons of great layouts, accessibility, animations, and interactions to share, which means tons of places for you to have a style preference

{% youtube _KqccADghcA %}

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

---

## Useful GitHub repositories

### PostCSS Custom Media

PostCSS Custom Media lets you use Custom Media Queries in CSS, following the CSS Media Queries specification.

{% github postcss/postcss-custom-media %}

---

## dribbble shots

### Skinclean website design

![https://cdn.dribbble.com/users/1998175/screenshots/16245410/media/e9828288d4a834322b1b838e952cc552.jpg](https://cdn.dribbble.com/users/1998175/screenshots/16245410/media/e9828288d4a834322b1b838e952cc552.jpg)

by [Taras Migulko](https://dribbble.com/shots/16245410-Skinclean-website-design)

### Mobile App - Lamp Product

![https://cdn.dribbble.com/users/4588540/screenshots/16243929/media/430745b49a20f462bbfbdabc77b542f9.png](https://cdn.dribbble.com/users/4588540/screenshots/16243929/media/430745b49a20f462bbfbdabc77b542f9.png)

by [Raffialdo Bayu](https://dribbble.com/shots/16243929-Mobile-App-Lamp-Product)

### Web Header Design

![https://cdn.dribbble.com/users/6682392/screenshots/16245344/media/554f62823c25a6bd29c215e43c3d224e.png](https://cdn.dribbble.com/users/6682392/screenshots/16245344/media/554f62823c25a6bd29c215e43c3d224e.png)

by [Orix Agency](https://dribbble.com/shots/16245344-Web-Header-Design)

### Modern Logo And Branding

![https://cdn.dribbble.com/users/6513549/screenshots/16243936/media/d90ffad434decc7b941d7852c859bbee.jpg](https://cdn.dribbble.com/users/6513549/screenshots/16243936/media/d90ffad434decc7b941d7852c859bbee.jpg)

by [Majarul](https://dribbble.com/shots/16243936-Modern-Logo-And-Branding-Vegetable-and-Food-logo)

---

## Tweets

{% twitter 1425487694680010755 %}

{% twitter 1425503238145650691 %}

{% twitter 1425858875065094155 %}

{% twitter 1426293872972361735 %}

---

## Picked Pens

### Generative SVG Noise Pattern Maker 🎨

{% codepen https://codepen.io/georgedoescode/pen/dyNVNjG %}

by [George Francis](https://twitter.com/georgedoescode)

---

## Podcasts worth listening

### Syntax – TypeScript Utility Types

In this Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, and more!

{% spotify spotify:episode:6bsM1IoNCxFfEQngKIBXFx %}

### Syntax – How to Build a Website

In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!

{% spotify spotify:episode:2HuTAqQjohOErTbk1xrwIM %}

### CodePen Radio – Large Scale Planning

Chris and Klare chat about the incredibly daunting task of planning a project that is huge and long-term.

{% spotify spotify:episode:4H3IlhhMC7zxszM6SEA9mH %}

---

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