Weekly Digest 23/2021 - Top of the Week
Tags: css, javascript, react, webdev
Published: 2021-06-13 17:12:06

Welcome to my Weekly Digest #23.

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

---

&nbsp;

## 🎉 Giveaway 

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:
1. 👍 React to this post
1. ✉️ Subscribe to our [newsletter](https://worldindev.ck.page)

You will receive [our articles](https://dev.to/worldindev) directly to your [inbox](https://worldindev.ck.page) 📬.
 
&nbsp;

---

## Interesting articles to read

### How to create NFTs with JavaScript

Learn to code an NFT (non-fungible token) using the Ethereum blockchain, the Ropsten Testnet, and a series of JavaScript libraries.

[How to create NFTs with JavaScript - LogRocket Blog](https://blog.logrocket.com/how-to-create-nfts-with-javascript/)

### Serving sharp images to high density screens

Why compressing images for dense screens is different, and how to serve them.

[Serving sharp images to high density screens](https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/)

### How to update nested state in React

State is a cornerstone of React components. In this post, we learn how to update nested state properties.

[How to update nested state in React](https://typeofnan.dev/how-to-update-nested-state-in-react/)

### Media Queries in Times of @container

With container queries now on the horizon - will we need media queries at all?

[Media Queries in Times of @container](https://mxb.dev/blog/media-queries-in-times-of-container-queries/)

## Some great videos I watched this week

### Automating Tests with Jest

When I think about Continuous Integration, one of the first things that comes to my mind is testing. It's amazing how much more confident you can be about changes to your codebase when you have a good suite of tests, and you know they run before every merge.

{% youtube AnZ5n0_Q1gs %}

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

### How to use TypeScript on big projects

We met with Nikita Kabardin, who works as a front-end developer at Spotify. He also worked on several Battlefield projects.

{% youtube RnTU81aQMRA %}

by [Maksim Ivanov](https://twitter.com/ivanov_dev)

### Thinking on ways to solve color schemes

In today’s GUI challenge, we’re building dark, light and dim color schemes with HSL. The CSS works across modern browsers, establishes foundational architecture for more themes, and is accessible.

{% youtube oHcTn83M1ls %}

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

### Hasura in 100 Seconds

Learn how Hasura can instantly turn your SQL database into a GraphQL API.

{% youtube xiZ61BkMKo8 %}

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

### Self-Avoiding Walk

It's finally time to attempt a Self-Avoiding Walk! In this video, I quickly visualize a simple JavaScript p5.js implementation of a self-avoiding walk. I then tackle the more complex problem of backtracking to find a solution to a space-filling self-avoiding walk.

{% youtube m6-cm6GZ1iw %}

by [Daniel Shiffman](https://twitter.com/shiffman)

---

## Useful GitHub repositories

### React 18 Working Group

This is the working group for React 18 release. It was formed to provide support to the community through the release.

{% github reactwg/react-18 %}

### React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

{% github react-hook-form/react-hook-form %}

### Prisma

Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server & SQLite

{% github prisma/prisma %}

### cuid

Collision-resistant ids optimized for horizontal scaling and binary search lookup performance.

{% github ericelliott/cuid %}

---

## dribbble shots

### Fleet – Travel Shopping UI Kit

![https://cdn.dribbble.com/users/427857/screenshots/15798306/media/3013474d55f68b39623b44f80caf12f3.png](https://cdn.dribbble.com/users/427857/screenshots/15798306/media/3013474d55f68b39623b44f80caf12f3.png)

by [Tran Mau Tri Tam](https://dribbble.com/shots/15798306-Fleet-Travel-Shopping-UI-Kit-2)

### Podcast Dashboard

![https://cdn.dribbble.com/users/1182822/screenshots/15832006/media/41307dcd7e4d407c79b15b6c1d5175b7.png](https://cdn.dribbble.com/users/1182822/screenshots/15832006/media/41307dcd7e4d407c79b15b6c1d5175b7.png)

by [Umar Aji Pratama](https://dribbble.com/shots/15832006-Podcast-Dashboard)

### Fashion Store Mobile App

![https://cdn.dribbble.com/users/4684322/screenshots/15833079/media/9b7571e8c16d6590f34d2cde6edc5a07.jpg](https://cdn.dribbble.com/users/4684322/screenshots/15833079/media/9b7571e8c16d6590f34d2cde6edc5a07.jpg)

by [Andri.](https://dribbble.com/shots/15833079-Fashion-Store-Mobile-App)

### Music Mobile App

![https://cdn.dribbble.com/users/6286128/screenshots/15828946/media/b9f0e859841dce1bfc8888c77a0623cd.png](https://cdn.dribbble.com/users/6286128/screenshots/15828946/media/b9f0e859841dce1bfc8888c77a0623cd.png)

by [Didarul islam](https://dribbble.com/shots/15828946-Music-Mobile-App)

### Instax - Mobile App Design

![https://cdn.dribbble.com/users/1445352/screenshots/15826920/media/01d2b2a601da4316ac07909618a83fc9.png](https://cdn.dribbble.com/users/1445352/screenshots/15826920/media/01d2b2a601da4316ac07909618a83fc9.png)

by [Anastasia Marinicheva](https://dribbble.com/shots/15826920-Instax-Mobile-App-Design)

### Cargo Transportation Application Design

![https://cdn.dribbble.com/users/77531/screenshots/15826132/media/7f7b78b8affc304ff266c90d33d514b8.png](https://cdn.dribbble.com/users/77531/screenshots/15826132/media/7f7b78b8affc304ff266c90d33d514b8.png)

by [RD UX/UI](https://dribbble.com/shots/15826132-Cargo-Transportation-Application-Design)

---

## Tweets

{% twitter 1401926170589863946 %}

{% twitter 1402160212618928132 %}

{% twitter 1402588766070521857 %}

{% twitter 1402378493883715584 %}

{% twitter 1402825668061130755 %}

---

## Picked Pens

### Bringing text to life

{% codepen https://codepen.io/kyleshook/pen/GRKVgeZ %}

by [Kyle Shook](https://twitter.com/elyktrix)

---

## Podcasts worth listening

### The CSS Podcast - Scroll timeline

In this episode we deep dive the experimental Scroll Animations spec to bring you the breakdown on `@scroll-timeline` powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page.

{% spotify spotify:episode:4o1ateFDezB5lvAgDHC1tf %}

### Syntax - Making a Vaccine Bot with JavaScript

In this Hasty Treat, Scott and Wes talk about Wes' experiment building a vaccine bot!

[Hasty Treat - Making a Vaccine Bot with JavaScript](https://open.spotify.com/episode/3HLWcYtRkH2F6FCwUsum1D)

### 3 Minutes with Kent - Prisma is amazing

{% spotify spotify:episode:0Bwr6BbWHzBHtfDuPhjyT4 %}

### The Changelog - Exploring Deno Land

This week we’re joined by Ryan Dahl, Node.js creator, and now the creator of Deno - a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

{% spotify spotify:episode:3bSrnzkqGneOp8YA5oCezs %}

### CodePen Radio - Pattern Library

Stephen and Chris talk about `cplibrary` the Pattern Library that the CodePen Monorepo can use to share components. What goes in there and what doesn’t? What are common and not-so-common components? Can components be combinations of other components?

{% spotify spotify:episode:7nZSX86HHBeBerGgASEEi9 %}

---

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

---

&nbsp;

Make sure to subscribe to our [newsletter](https://worldindev.ck.page
) 💌 to receive our weekly recap directly on your email and react to this post to automatically participate in our giveaway 🎁

If you would like to join our discussions, you can find us on [Discord](https://discord.gg/aWS2YKk6) 📣.

&nbsp;