Weekly Digest 40/2021
Tags: css, javascript, react, webdev
Published: 2021-10-10 17:00:55

Welcome to my Weekly Digest #40 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

### How I built a modern website in 2021

Kent rewrote [kentcdodds.com](http://kentcdodds.com/) using the latest technologies and he wants to talk about what he did.

[How I built a modern website in 2021](https://kentcdodds.com/blog/how-i-built-a-modern-website-in-2021)

### 4 things you didn’t know you could do with GitHub Actions

GitHub Actions is a powerful platform that empowers your team to go from code to cloud, all from the comfort of your repositories.

[4 things you didn't know you could do with GitHub Actions | The GitHub Blog](https://github.blog/2021-03-04-4-things-you-didnt-know-you-could-do-with-github-actions/)

### Conditional Border Radius in CSS

How to use CSS comparison functions to create a conditional border-radius

[Conditional Border Radius In CSS - Ahmad Shadeed](https://ishadeed.com/article/conditional-border-radius/)

---

## Some great videos I watched this week

### Em & Rem Units

Em and Rem units are used to size your text elements relative to one another. By assigning em units to your elements, you can change all of their font sizes at once, simply by changing the font size of the elements' root tag.

{% youtube j7zf_iZjQB4 %}

by [Christopher Lis](https://twitter.com/christopher4lis)

### What Are Build Tools in Web Development

{% youtube V5qvWl-O-zE %}

by [Scott Tolinski](https://twitter.com/stolinski)

### Go in 100 Seconds

Learn the basics of the Go Programming Language. Go was developed at Google as a modern version of C for high-performance server-side applications.

{% youtube 446E-r0rXHI %}

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

### Redux Sagas vs Redux Toolkit Query

Redux Saga and Redux Toolkit Query are two great ways to do API access. Let's compare them head to head doing full create, read, update and delete operations on both libraries. If you've only seen one of these in action you'll want to check this out!

{% youtube 0W4SdogReDg %}

by [Jack Herrington](https://twitter.com/jherr)

### Custom Hooks in React

In this video, Amy explains what a hook is and how to set up a custom hook. Using her custom audio player as a starting point, she makes the code more reusable converting it to a custom hook library.

{% youtube yn7M6qOV_9o %}

by [Amy Dutton](https://twitter.com/selfteachme)

### Setup Multiple Pages with Vite

This lesson quickly demonstrates how to add multiple pages to a Vite application. This essentially means you get a multi-page app without adding any specific routing library.

{% youtube STeKBm67l6M %}

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

---

## Useful GitHub repositories

### MJML

The only framework that makes responsive email easy. MJML is a markup language designed to reduce the pain of coding a responsive email.

{% github mjmlio/mjml %}

### @react-three/flex

Placing content in THREE.js is hard. @react-three/flex brings the webs flexbox spec to react-three-fiber. It is based on Yoga, Facebook's open-source layout engine for react-native.

{% github pmndrs/react-three-flex %}

### Kubeapps

A web-based UI for deploying and managing applications in Kubernetes clusters

{% github kubeapps/kubeapps %}

## dribbble shots

### Dashboard Pricing Page

![https://cdn.dribbble.com/users/1723105/screenshots/16622997/media/621a5bb7c121c5872bbbe5daa636e695.png](https://cdn.dribbble.com/users/1723105/screenshots/16622997/media/621a5bb7c121c5872bbbe5daa636e695.png)

by [Emmanuel Ikechukwu](https://dribbble.com/shots/16622997-TeamWork-Dashboard-Pricing-Page)

### Pixiedia Agency

![https://cdn.dribbble.com/users/1619633/screenshots/16622979/media/e637807809c01291ace5b4cba7aa26d3.png](https://cdn.dribbble.com/users/1619633/screenshots/16622979/media/e637807809c01291ace5b4cba7aa26d3.png)

by [Afshin T2Y](https://dribbble.com/shots/16622979-Pixiedia-Agency)

### Crypter Dashboard Concept

![https://cdn.dribbble.com/users/3798578/screenshots/16622484/media/2e9a2d8b8c0716b533886e63cc29f25e.png](https://cdn.dribbble.com/users/3798578/screenshots/16622484/media/2e9a2d8b8c0716b533886e63cc29f25e.png)

by [Arshia Amin Javahery](https://dribbble.com/shots/16622484-Crypter-Dashboard-Concept)

### Segmentation Icon

![https://cdn.dribbble.com/users/299116/screenshots/16613252/media/e61def3244bdeb77ecd823ac50f38501.jpg](https://cdn.dribbble.com/users/299116/screenshots/16613252/media/e61def3244bdeb77ecd823ac50f38501.jpg)

by [Fabrizio Boni](https://dribbble.com/shots/16613252-Segmentation-Icon-for-Rule-Communication-Clay)

---

## Tweets

{% twitter 1444736773142241285 %}

{% twitter 1444861827427356676 %}

{% twitter 1445607281484124168 %}

{% twitter 1446164732315066371 %}

---

## Picked Pens

### Password Generator

{% codepen https://codepen.io/marcobiedermann/pen/dyREBVZ %}

by [Marco Biedermann](https://twitter.com/BiedermannMarco)

### Liquid Button

{% codepen https://codepen.io/z-/pen/dyzyNQX %}

by [Zed Dash](https://twitter.com/Osorpenke)

---

## Podcasts worth listening

### Ladybug – A Day In The Life Of Four Software Engineers

What is a typical day in the life like for a software engineer? To close out Season 6, we thought it’d be a great idea to give you some insight into our workdays, as we all have very different roles and are in different stages of our careers.

{% spotify spotify:episode:5XtKLmxOWQ3mRHhi5RJa8T %}

### Syntax – PHP Is Good and We’re Just Re-Creating It

{% spotify spotify:episode:5FNgg3cnXQGFrKMTuXkQ4E %}

### Chats with Kent – Building Awesome Demos

{% spotify spotify:episode:4TYc9qUvMdeTXTofxwkNUF %}

Learn how to use projects to improve your skills and problem-solving!

### Chats with Kent – Effective Learning

Learn strategies on how to effectively teach yourself!

{% spotify spotify:episode:3jn6m5nLUedPQzZhAEh5mv %}

### Chats with Kent – Advancing Your Skills

Learn about how good habits can be deliberately formed to advance your skills!

{% spotify spotify:episode:5vLMag4y36A7fXmdHRDBGK %}

---

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