Weekly Digest 19/2022
Tags: javascript, webdev, react, weeklyretro
Published: 2022-05-15 18:24:40

Welcome to my Weekly Digest #19.

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

### Building a Design System from scratch

A deep dive into Maxime’s experience building his own design system that documents his process of defining tokens, creating efficient components, and shipping them as a package.

[Building a Design System from scratch - Maxime Heckel's Blog](https://blog.maximeheckel.com/posts/building-a-design-system-from-scratch/)

### You Don’t Need A UI Framework

Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it.

[You Don't Need A UI Framework - Smashing Magazine](https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/)

---

## Some great videos I watched this week

### 7 Essential Command Line Tools

Introducing seven command-line tools.

{% youtube 2OHrTQVlRMg %}

by [Tech Craft](https://twitter.com/tech_crafted)

### NextJS Rendering Methods - Explained (CSR vs SSR vs SSG vs ISR)

There are lots of ways you can render components in NextJS. In this tutorial, we explain and demystify the different methods, SSG vs CSR vs SSR vs ISR, and give you a simple mental model to make a choice.

{% youtube XwswPqIXYoI %}

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

### What's new for the web platform

Una and Jake dive into recently-cross-browser features, and some experimental stuff that's on its way to make web development easier and more powerful.

{% youtube KqAIFjwKQX8 %}

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

### State of CSS

Styling on the web has been moving fast, bringing rich features for container-based styles and layouts, managing color contrast, leveraging device vibrant colors, gradients, and new color spaces for mixing, orchestrating stylesheets, subgrid, inert, `:has()` selector, and much more. With each browser working in unison to improve stability while also delivering fan-favorite features, 2022 is shaping up to be a huge year for styling.

{% youtube Xy9ZXRRgpLk %}

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

### DevTools: State of the Union 2022

See a demo tour of new DevTools features that allow web developers to generate site performance insights, automate user flows, debug design issues, and more.

{% youtube YqWEqYa-evk %}

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

### Bringing page transitions to the web

Native apps often feature transitions between states that both look great and help communicate the type of navigation to the user. The bad news: creating transitions between pages on the web is impossible. In-page transitions are possible, but complex. The good news: new APIs are coming to simplify this process, building on top of CSS animations and the web animation API, and it works across navigations!

{% youtube JCJUPJ_zDQ4 %}

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

---

## Useful GitHub repositories

### fklill

Fabulously kill processes. Cross-platform.

{% github sindresorhus/fkill-cli %}

### Scrollex

Build beautiful scroll experiences using minimal code

{% github malerba118/scrollex %}

### Markdoc

A powerful, flexible, Markdown-based authoring framework.

{% github markdoc/markdoc %}

---

## dribbble shots

### Timeline Project Management Interface

![by [Happy Tri Milliarta](https://dribbble.com/shots/18249324-Timeline-Project-Management-Interface)](https://cdn.dribbble.com/userupload/2720865/file/original-865ef3907dac703c2513374ede313daa.png)

by [Happy Tri Milliarta](https://dribbble.com/shots/18249324-Timeline-Project-Management-Interface)

### Bettermotion Project

![by [Sepide Moqadasi](https://dribbble.com/shots/18248048-Bettermotion-Project)](https://cdn.dribbble.com/users/2990466/screenshots/18248048/media/98526ab82072469de08c59199b5d7f39.png)

by [Sepide Moqadasi](https://dribbble.com/shots/18248048-Bettermotion-Project)

### Cluster | Team management dashboard

![by [Zahra Saedi](https://dribbble.com/shots/18227002-Cluster-Team-management-dashboard)](https://cdn.dribbble.com/users/5762096/screenshots/18227002/media/93af48ee356efe860e93a1aa2f6dd1af.png)

by [Zahra Saedi](https://dribbble.com/shots/18227002-Cluster-Team-management-dashboard)

---

## Tweets

{% twitter 1523022179973177344 %}

{% twitter 1523451005626593280 %}

{% twitter 1524088476119015430 %}

{% twitter 1524371370330759168 %}

{% twitter 1525045567797215232 %}

---

## Picked Pens

### Cyberpunk(ish) Button

{% codepen https://codepen.io/nazaneyn/pen/LYQZMvx %}

by [Nazanin Ashrafi](https://twitter.com/nazanin_ashrafi)

### Another Datepicker

{% codepen https://codepen.io/aaroniker/pen/MWQjxro %}

by [Aaron Iker](https://twitter.com/aaroniker_me)

---

## Podcasts worth listening

### Syntax – **10 Nifty Browser APIs**

In this episode of Syntax, Wes and Scott talk about 10 browser APIs you might not be familiar with including getUserMedia, Resize Observer, SpeechRecognition, and more!

[10 Nifty Browser APIs](https://open.spotify.com/episode/2jlFP7YjCuMbVhIcQCNIn6)

### CodePen Radio – ****With Micah Godbolt****

Chris got to talk with [Micah Godbolt](https://codepen.io/micahgodbolt/) this week! Micah is is a long-hauler at Microsoft working on Design Systems and such.

{% spotify spotify:episode:2Htt6Ot9XRwNJm6fq9TYOH %}

---

### Syntax – **NX Monorepos with Victor Savkin**

In this supper club episode of Syntax, Wes and Scott talk with Victor Savkin about NX Monorepo development.

{% spotify spotify:episode:4qLZdUPibBMYW8tfZ1KcO7 %}

---

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