Weekly Digest 48/2021
Tags: css, javascript, webdev, react
Published: 2021-12-05 18:50:57

Welcome to my Weekly Digest #48 of this year.

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

[Advent of Code](https://adventofcode.com/) started just a could of days ago, so if you haven't signed up already there are still a couple of days left to catch up.

> *Advent of Code* is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in [any](https://github.com/search?q=advent+of+code) programming language you like.
> 

---

## Interesting articles to read

### Adaptive, accessible, and automated color for Design Systems

The creation of our Design System’s color palette was like many others; we began by auditing and then standardizing a set of functional colors by how they were used generally while assuming we could manage niche cases with hotfixes here and there along the way.

[Adaptive, accessible and automated colour for Design Systems](https://medium.com/societe-generale-design/adaptive-accessible-and-automated-colour-for-design-systems-6b4b9e2942e8)

### **React Testing Library Recipes**

Here are my favourite unit test patterns for verifying user journeys and accessible UI with React Testing Library, Jest and TypeScript.

[React Testing Library unit test best practices](https://blog.fildon.me/react-testing-library-recipes)

---

## Some great videos I watched this week

### Create your own Linked List

Being asked to create your own linked list in a coding interview is a tale as old as time.

{% youtube snt8ETJLrTU %}

by [Basarat Ali Syed](https://twitter.com/basarat)

### Faster DevTools navigation with shortcuts and settings

Sharing some useful shortcuts and settings for quicker DevTools navigation.

{% youtube xHusjrb_34A %}

by [Google Chrome Developers](https://twitter.com/ChromiumDev)

### The fundamentals of CSS layout

Learn about the key CSS layout methods of flexbox and grid. Discover how these layout methods enable responsive, content-aware designs, and how to choose the best layout method for the component you need to build.

{% youtube yMEjLBKyvEg %}

by [Rachel Andrew](https://twitter.com/rachelandrew)

### Coding Interview with Dan Abramov

{% youtube XEt09iK8IXs %}

by [Ben Awad](https://twitter.com/benawad)

---

## Useful GitHub repositories

### **Open Source CSS Variables**

CSS custom properties to help accelerate adaptive and consistent design.

{% github argyleink/open-props %}

### **SecLists**

SecLists is the security tester's companion. It's a collection of multiple types of lists used during security assessments, collected in one place

{% github danielmiessler/SecLists %}

---

## dribbble shots

### **Lestari**

![by [Firman Jabbar](https://dribbble.com/shots/16998375-Lestari-e-commerce-fashion-apps)](https://cdn.dribbble.com/users/5994307/screenshots/16998375/media/3a8cbbde7f5ae08005d5ca32957176fc.png)

by [Firman Jabbar](https://dribbble.com/shots/16998375-Lestari-e-commerce-fashion-apps)

### **Petazy**

![by [Musemind Digital Agency](https://dribbble.com/shots/16994012-Petazy-App-Onboarding-Experience)](https://cdn.dribbble.com/users/2959364/screenshots/16994012/media/8e21abf6291fbadcd1ae209dda6fef25.jpg)

by [Musemind Digital Agency](https://dribbble.com/shots/16994012-Petazy-App-Onboarding-Experience)

### **Vegetables illustration**

![by [Tanya Shegol](https://dribbble.com/shots/17000800-Vegetables-illustration-Creative-food-illustration)](https://cdn.dribbble.com/users/1583708/screenshots/17000800/media/352420e5e1b8810e5f074ce7ece5c9a8.png)

by [Tanya Shegol](https://dribbble.com/shots/17000800-Vegetables-illustration-Creative-food-illustration)

---

## Tweets

{% twitter 1465443021948923909 %}

{% twitter 1465678583926513670 %}

{% twitter 1466078134151700482 %}

{% twitter 1466149473701273602 %}

{% twitter 1466453233203924997 %}

{% twitter 1467158002847285248 %}

---

## Picked Pens

### 3D CSpaceShip

{% codepen https://codepen.io/ricardoolivaalonso/pen/qBPBmeN %}

by [Ricardo Oliva Alonso](https://twitter.com/rolivaalonso)

### Generative CSS Christmas Tree Spiral

{% codepen https://codepen.io/jh3y/pen/bGoNOvN %}

by [Jhey](https://twitter.com/jh3yy)

### 3D Heart Button

{% codepen https://codepen.io/ykadosh/pen/PoJYONy %}

by [Yoav Kadosh](https://twitter.com/yoavikadosh)

---

## Podcasts worth listening

### CodePen Radio – **With Aaron Iker**

Aaron builds incredibly delightful bits and bobs of UI that give you the feeling of *hey, I bet I could actually use this!* And that’s exactly what Aaron wants you to do.

{% spotify spotify:episode:4AAZFG6e6kYD2xURsL7pCG %}

### Syntax – Everything in web dev is Amazing!

In this episode of Syntax, Scott and Wes talk about all the things that have improved the lives of web developers over the years.

{% spotify spotify:episode:0V42SeFcbglfQS3Wr2dIxe %}

### Call with Kent – How to decide among advanced react patterns?

So this short call is about when to use which advanced react pattern to create re-usable components.

{% spotify spotify:episode:4CY5a8P1LXKrzw5pihbzuv %}

---

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