Weekly Digest 13/2021
Tags: css, javascript, react, webdev
Published: 2021-04-04 17:34:07

Welcome to my Weekly Digest #13 which is the first one for April.

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

### How to Animate Items Out of an Array in React

Animating items out of an array in React can be trickier than you’d think. If you have tried to roll your own solution yet, you have likely been frustrated by the fact that, once your state has been updated with an item removed, it’s gone (and hard to hold on to for the sake of animation!).

[How to Animate Items Out of an Array in React](https://typeofnan.dev/how-to-animate-items-out-of-an-array-in-react/)

### Building a geolocation widget

Gorillas being about delivering groceries, they recently released a small geolocation widget on the homepage of their website. They’re growing fast, but there are still some areas do not serve, so they wanted to make it easily accessible for people to know whether they could use our services.

[Building a geolocation widget](https://kittygiraudel.com/2021/03/29/building-a-geolocation-widget/)

### Taming Blend Modes: `difference` and `exclusion`

Up until 2020, blend modes were a feature I hadn’t used much because I rarely ever had any idea what result they could produce without giving them a try first.

[Taming Blend Modes: `difference` and `exclusion` | CSS-Tricks](https://css-tricks.com/taming-blend-modes-difference-and-exclusion/)

---

## Some great videos I watched this week

### Managing React Application State Management

Application State Management is one of the hardest parts of building and maintaining React Applications. The number of options you have is numerous and the reason is that it's just such a hard problem with so many nuances and trade-offs. One thing that makes application state management harder is when we aren't thoughtful about how that state is organized and categorized in our app.

{% youtube zpUMRsAO6-Y %}

by [Kent C. Dodds](https://twitter.com/kentcdodds)

### The surprising pattern behind color names around the world

Why so many languages invented words for colors in the same order.

{% youtube gMqZR3pqMjg %}

by [Vox](https://twitter.com/voxdotcom)

### Styling Markdown and CMS Content with Tailwind CSS

In this video, we look at how to use the official `@tailwindcss/typography` plugin to easily add beautiful content styling to markdown, CMS content, or any other HTML where you don't have the ability to add utility classes to each element.

{% youtube J0Wy359NJPM %}

by [Tailwind Labs](https://twitter.com/tailwindlabs)

### React Today and Tomorrow and 90% Cleaner React With Hooks

The first three talks from React Conf 2018 by Sophie Alpert, Dan Abramov, and Ryan Florence.

{% youtube dpw9EHDh2bM %}

by [React Conf](https://twitter.com/reactconf)

### Design Systems Aren’t Hard

Design systems are often thought of in terms of the visible parts - a Sketch file, a repository of React code, a documentation website. But these are only the artifacts of the system. A design system is actually the thinking and the decision making and the principles of your organization.

{% youtube 5nhVVRqEqhc %}

by [Dustin Younse](https://twitter.com/milsyobtaf)

### The Future of Design Systems

Hayley Hughes is an Experience Designer at Airbnb, working on the Airbnb Design Language System (DLS), in this talk she explains how its not just product UI design that needs our attention, how design systems can help businesses become more efficient, resourceful environments as well as help designers create a better user experience.

{% youtube mq984Mc9UVA %}

by [Hayley Hughes](https://twitter.com/hayhughes)

---

## Useful GitHub repositories

### react-use

Collection of React Hooks

{% github streamich/react-use %}

### exa

exa is a modern replacement for the venerable file-listing command-line program ls that ships with Unix and Linux operating systems, giving it more features and better defaults. It uses colours to distinguish file types and metadata. It knows about symlinks, extended attributes, and Git.

{% github ogham/exa %}

### Telestrator

A disappearing drawing tool for your screen.

[steveruizok/telestrator](https://github.com/steveruizok/telestrator)

---

## dribbble shots

### Artistic Collections

![https://cdn.dribbble.com/users/1761970/screenshots/15408613/media/3e61dafe4ff9fbf7de0bf299774bdf0b.jpg](https://cdn.dribbble.com/users/1761970/screenshots/15408613/media/3e61dafe4ff9fbf7de0bf299774bdf0b.jpg)

by [Shayan Alam](https://dribbble.com/shots/15408613-Artistic-Collections)

### eBook App

![https://cdn.dribbble.com/users/1997192/screenshots/15412506/dribbble_mockup_final.png](https://cdn.dribbble.com/users/1997192/screenshots/15412506/dribbble_mockup_final.png)

by [Sajon](https://dribbble.com/shots/15412506-eBook-App)

### Events App

![https://cdn.dribbble.com/users/2633112/screenshots/15413412/media/bd19832923b8a2073e2fa94044fc7de9.png](https://cdn.dribbble.com/users/2633112/screenshots/15413412/media/bd19832923b8a2073e2fa94044fc7de9.png)

by [Alex](https://dribbble.com/shots/15413412-Events-App)

---

## Tweets

{% twitter 1377607877343506435 %}

{% twitter 1377257297756352512 %}

{% twitter 1377939325447507968 %}

{% twitter 1377968794434428929 %}

{% twitter 1377650742799040514 %}

{% twitter 1377644303934103555 %}

---

## Picked Pens

### LAB vs sRGB: Masked & Layered Linear Gradients

{% codepen https://codepen.io/argyleink/pen/WNRoymq %}

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

### The Clips of CSS

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

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

---

## Podcasts worth listening

### Text and Typography

In this episode, we cover typography on the web from your CSS. From font properties to word breaking. Also, Adam gets thrown off and amazed at how dynamic the text underline property is and revels in the difference between small caps and petite caps.

{% spotify spotify:episode:3ZnB2eIM4MRn3RR7rbWjf3 %}

### Servers with Matt from Caddy

In this episode of Syntax, Scott and Wes talk Matt Holt about Caddy, SSL, web servers, best practices, and more!

{% spotify spotify:episode:5FPS3rKBHnny42kvtelf60 %}

### Elasticsearch

Dee, Chris, and Alex talk all about the technology of Elasticsearch. That’s a link to the company itself right there, which is relevant as we use them directly to host our production Elasticsearch.

{% spotify spotify:episode:7LPr7ZDXAN610qBsC1NiD7 %}

---

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