Weekly Digest 09/2022
Tags: javascript, webdev, programming, react
Published: 2022-03-06 18:29:34

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

### Headless components in React and why I stopped using a UI library for our design system

In the past five years, Nir has been working on major front-end projects at Gloat. In this blog post, he will focus on what he learned when building Gloat’s design system and how he moved from using UI libraries like MUI to using headless components.

[Headless components in React and why I stopped using a UI library for our design system](https://medium.com/@nirbenyair/headless-components-in-react-and-why-i-stopped-using-ui-libraries-a8208197c268)

### Understanding CSRF Attacks

Zell went about researching web security recently as he was writing [Understanding Asynchronous JavaScript](https://asyncjs.today/) — He wanted to make sure my recommendations were secure and he is not doing any of his students a disservice with his recommendations. Unfortunately, articles in the security

[Understanding CSRF Attacks](https://zellwk.com/blog/understanding-csrf-attacks/)

### ****Building Pages in Storybook****

Building pages in an app might seem straightforward at first, but as your project matures things get more complicated. What happens if the network fails or the data is missing? Or worse, your app …

[Building Pages in Storybook](https://medium.com/storybookjs/building-pages-in-storybook-bd04a3396e08)

---

## Some great videos I watched this week

### **How to rotate a vector**

{% youtube 7j5yW5QDC2U %}

by [Freya Holmér](https://twitter.com/FreyaHolmer)

### **10 React Antipatterns to Avoid**

React is minimal on the surface, but it’s actually a highly complex JavaScript UI library with many potential pitfalls. In this tutorial, we look at 10 antipatterns in React, along with tips and tricks to improve our code.

{% youtube b0IZo2Aho9Y %}

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

### New in Chrome 99: CSS Cascade Layers, Show Picker, and more!

Chrome 99 is rolling out now! CSS cascade layers give you more control over your CSS and help to prevent style-specificity conflicts. The `showPicker` method allows you to programmatically show a browser picker for input elements like date, color, and datalist.

{% youtube h3mzFraS8CA %}

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

### **This video was made with code. But how?**

Learn how to produce video content programmatically with HTML, CSS, and JavaScript thanks to Remotion - a React library that can create real MP4 videos.

{% youtube deg8bOoziaE %}

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

---

## Useful GitHub repositories

### ****Locomotive Scroll****

Detection of elements in viewport & smooth scrolling with parallax effects.

{% github locomotivemtl/locomotive-scroll %}

### Floating UI

A low-level toolkit to position floating elements while intelligently keeping them in view. Tooltips, popovers, dropdowns, menus, and more

{% github floating-ui/floating-ui %}

---

## dribbble shots

### Game application UI design

![by [uixNinja](https://dribbble.com/shots/17652705-Game-application-UI-design)](https://cdn.dribbble.com/users/257709/screenshots/17652705/media/1793c57763ac485cfbf42961445ef542.png)

by [uixNinja](https://dribbble.com/shots/17652705-Game-application-UI-design)

### ****NFT Dark Theme Landing Page UI Design****

![by [Mostafijur Rahman](https://dribbble.com/shots/17655703-NFT-Dark-Theme-Landing-Page-UI-Design)](https://cdn.dribbble.com/users/6632247/screenshots/17655703/media/35b88224dab3437893dc4b9cf2aee706.png)

by [Mostafijur Rahman](https://dribbble.com/shots/17655703-NFT-Dark-Theme-Landing-Page-UI-Design)

### ****Online Food Mobile App Design****

![by [SH Shakil](https://dribbble.com/shots/17655690-Online-Food-Mobile-App-Design)](https://cdn.dribbble.com/users/6641563/screenshots/17655690/media/34b7fb6b1c31aec1fd514878ece455cc.jpg)

by [SH Shakil](https://dribbble.com/shots/17655690-Online-Food-Mobile-App-Design)

---

## Tweets

{% twitter 1499401441160482830 %}

{% twitter 1499441043930062854 %}

{% twitter 1499505223286599684 %}

{% twitter 1499830089952858117 %}

{% twitter 1499780794193166341 %}

---

## Picked Pens

### CSS Knob widget with Range Slider

{% codepen https://codepen.io/ShadowShahriar/pen/zYPePva %}

by [S. Shahriar](https://twitter.com/ShadowShahriar)

### 4000 Followers - Thank You!

{% codepen https://codepen.io/cobra_winfrey/pen/OJOBqwZ %}

by [Adam Kuhn](https://twitter.com/cobra_winfrey)

---

## Podcasts worth listening

### CodePen Radio – ****Ryan Mulligan****

This week Chris gets to talk to [Ryan Mulligan](https://codepen.io/hexagoncircle)! Ryan put together [a Collection of some of his personal picks for favorite Pens](https://codepen.io/collection/KpNNxy) and they get a chance to talk through a lot of them.

{% spotify spotify:episode:5oqwIUo7dTEqHIvRI93Z7R %}

### Syntax – Wes and Scott React to the State of JS

In this episode of Syntax, Wes and Scott take a look at the 2021 State of JS survey.

{% spotify spotify:episode:2aSwOZ5o3jfUhtq7alYEZN %}

---

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