Weekly Digest 19/2021
Tags: css, javascript, react, webdev
Published: 2021-05-16 17:17:07

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

### Frustrating Design Patterns That Need Fixing: Birthday Picker

In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives, along with plenty of examples to keep in mind when building or designing one.

[Frustrating Design Patterns That Need Fixing: Birthday Picker - Smashing Magazine](https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-birthday-picker/)

### JavaScript testing: 9 best practices to learn

We zoom in on nine best practices for JavaScript testing that can help you write better tests and help your team to better understand them.

[JavaScript testing: 9 best practices to learn - LogRocket Blog](https://blog.logrocket.com/javascript-testing-best-practices/)

### Using Forms in React

Learn how to build forms with React, the difference between controlled and uncontrolled inputs, and which to use.

[Using Forms in React](https://daveceddia.com/react-forms/)

### How we use Web Components at GitHub

GitHub has long been a proponent of Web Components. Here's how we use them.

[How we use Web Components at GitHub | The GitHub Blog](https://github.blog/2021-05-04-how-we-use-web-components-at-github/)

## Some great videos I watched this week

### Typescript for React Components

Typescript is quickly becoming the industry standard for React development. Take your Typescript skills from beginner to masters level by learning everything you need to know about how to write components in React the right way.

{% youtube _Iv3whBUeCY %}

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

### Advanced CSS Border-Radius Tutorial

How to create complex shape with only CSS border-radius and understand how to separately control horizontal and vertical border-radius.

{% youtube j3Z4DR0o8bk %}

by [Red Stapler](https://twitter.com/redstapler_twit)

### Thinking on ways to solve a Media Scroller

In today’s GUI challenge, Adam Argyle shares thinking on ways to create inline scrolling experiences for the web that are minimal, responsive, accessible and work across browsers and platforms (like TVs!).

{% youtube jmLdZY_Lo1k %}

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

### Amazon's, Etsy's and Ebay's Checkout UI

Here are five key UI elements that appear on leading ecommerce companies' checkout screens. The UI comparison also has lead to a freebie Figma Checkout template.

{% youtube t6DXK6j4Nw8 %}

by [Jakub Linowski](https://twitter.com/jlinowski)

### Yet Another 5 Must Know CSS Tricks That Almost Nobody Knows

CSS is a vast language with tons of features and it is impossible to know them all. In this video I will be covering another 5 features in CSS that nobody knows but are incredibly useful.

{% youtube -0fAhoahXYw %}

by [Web Dev Simplified](https://twitter.com/DevSimplified)

### Testing React Components

Here, Amy Dutton will show you how to write tests for a React component using Jest and the React Testing Library.

{% youtube c31KJTzt5YY %}

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

### Mastering React Hooks with Typescript

Let's dive DEEP again into Typescript but this time to look at React Hooks.

{% youtube 2vjrk2LHcJQ %}

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

---

## Useful GitHub repositories

### Folio

A customizable test framework to build your own test frameworks.

{% github microsoft/folio %}

### zx

A tool for writing better scripts

{% github google/zx %}

### Remote Redux DevTools

Use [Redux DevTools](https://github.com/reduxjs/redux-devtools) remotely for React Native, hybrid, desktop and server side Redux apps.

{% github zalmoxisus/remote-redux-devtools %}

---

## dribbble shots

### Localy — Roadmap

![https://cdn.dribbble.com/users/1494589/screenshots/15646449/media/f8e8a1b9e5190da7702646f3b0c02214.png](https://cdn.dribbble.com/users/1494589/screenshots/15646449/media/f8e8a1b9e5190da7702646f3b0c02214.png)

by [Arman Rokni](https://dribbble.com/shots/15646449--Localy-Roadmap)

### Govoroon App

![https://cdn.dribbble.com/users/653699/screenshots/15648656/media/9d41b3c079f3ca5e14f6641b73e5cc08.png](https://cdn.dribbble.com/users/653699/screenshots/15648656/media/9d41b3c079f3ca5e14f6641b73e5cc08.png)

by [Gregory Riaguzov](https://dribbble.com/shots/15648656-Govoroon-App)

### IoT App for growing plants

![https://cdn.dribbble.com/users/2770155/screenshots/15649083/media/e7ee2c36f5392362d992d77aecf9f2ab.jpg](https://cdn.dribbble.com/users/2770155/screenshots/15649083/media/e7ee2c36f5392362d992d77aecf9f2ab.jpg)

by [Amirhossein Soltani](https://dribbble.com/shots/15649083-IoT-App-for-growing-plants)

### Doctor appointment

![https://cdn.dribbble.com/users/2067473/screenshots/15644898/media/c2dda673891b89964bd3fb1ebe14a646.png](https://cdn.dribbble.com/users/2067473/screenshots/15644898/media/c2dda673891b89964bd3fb1ebe14a646.png)

by [Martyna Zielińska](https://dribbble.com/shots/15644898-Doctor-appointment)

### Allhand - Mobile App

![https://cdn.dribbble.com/users/4536274/screenshots/15648806/media/f2ad2023d41f32d5fadd0b7a13bb6d68.png](https://cdn.dribbble.com/users/4536274/screenshots/15648806/media/f2ad2023d41f32d5fadd0b7a13bb6d68.png)

by [Baten](https://dribbble.com/shots/15648806-Allhand-Mobile-App)

---

## Tweets

{% twitter 1391153503716978692 %}

{% twitter 1391781674548088833 %}

{% twitter 1391867011832193030 %}

{% twitter 1392480258285264900 %}

---

## Picked Pens

### GLSL Sample027

{% codepen https://codepen.io/Web_yuki1027/pen/yLgYpWM %}

by [Yuki](https://codepen.io/Web_yuki1027)

### Spring pattern

{% codepen https://codepen.io/shubniggurath/pen/mdWeGPd %}

by [Liam Egan](https://twitter.com/liamegan)

## Podcasts worth listening

### Syntax FM - Technical Debt

In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it.

{% spotify spotify:episode:3aPho73s5JAl5xQC7ndqnc %}

### The CSS Podcast - Snap Points

In this episode, Una and Adam are guiding scroll areas into their peaceful resting places, maintaining alignment, keeping visual harmony, and improving the overall experience with the content.

{% spotify spotify:episode:02VO53lNDAYj46zIlbeWQx %}

### Smashing Podcast - What is The Future of CSS?

We’re starting our new season with a look the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to expert Miriam Suzanne to find out.

{% spotify spotify:episode:5ytU8nRh3i6bBCHU3Tvv7P %}

### 3 Minutes with Kent - Cypress Driven Development

{% spotify spotify:episode:674892x1cW455FvMFmGfjT %}

### Software Engineering Daily - Natural Language Processing

Natural Language Processing (NLP) is a branch of artificial intelligence concerned with giving computers the ability to understand text and spoken words. “Understanding” includes intent, sentiment, and what’s important in the message.

{% spotify spotify:episode:2NwKZ8Hia6tMTxnlccu3er %}

---

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