Weekly Digest 16/2021
Tags: css, javascript, react, webdev
Published: 2021-04-25 17:16:27

Welcome to my Weekly Digest #16, which is the last one for April.

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 My Blog

An in-depth look at the technical stack behind this very blog! We'll see how Josh uses Next's API routes to implement my hit and like counters, how he uses MDX to add interaction and customization, and how he organizes his codebase, among others.

[How I Built My Blog](https://www.joshwcomeau.com/blog/how-i-built-my-blog/)

### How to remember JavaScript

JavaScript contains many things — lots of different methods and ways to do things. How do you remember them all?

[How to remember JavaScript](https://zellwk.com/blog/remember-javascript/)

### DevTools for CSS layouts 2021 edition

As someone who loves and works with CSS on an almost daily basis, DevTools are something near and dear to your heart. Recently, Chen has been seeing updates from both the Webkit and Chrome team about updates to layout-related DevTools features

[DevTools for CSS layouts 2021 edition](https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/)

### Best Tailwind CSS components and template collections

Discover seven of the best free Tailwind component and template collections that you can use to rapidly build custom user interfaces.

[Best Tailwind CSS components and template collections - LogRocket Blog](https://blog.logrocket.com/best-tailwind-css-components-and-template-collections/)

### How to actually test UIs

Testing techniques used by leading engineering teams

[How to actually test UIs](https://storybook.js.org/blog/how-to-actually-test-uis/)

### How to Improve CSS Performance

Learn the most common speed issues caused by CSS and how to avoid them.

[How to Improve CSS Performance | Calibre](https://calibreapp.com/blog/css-performance)

---

## Some great videos I watched this week

### Reveal testing weakspots in your JavaScript code with Jest Coverage

If you've ever been stuck on what tests to write for your code, Jest's coverage reports can be a great tool for showing what sections of your codebase are not tested yet. It becomes even more powerful when used in combination with Continuous Integration (CI), as it can be automated and even block pull requests from merging, which we'll show in this video.

{% youtube fQpvuRVDp-8 %}

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

### Visual Regression Testing with Storybook's Chromatic

When building a design system or component UI it becomes more and more difficult to catch visual bugs as the project scales. This is especially true when changing one component affects other components that use it, and QA doesn't know to check every component it's related to.

Visual regression testing is an extra layer of security there, and Storybook's Chromatic is the most polished one I have tried. So let's set a new project up and show off some of the features Chromatic offers.

{% youtube jz-vpFBilhs %}

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

### How to use TypeScript with React... But should you?

Learn how to set up React with TypeScript. Compare the pros and cons of using TypeScript in a React project.

{% youtube ydkQlJhodio %}

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

### Thinking on ways to solve split text

In today’s GUI challenge, Adam Argyle will be responding to your comments for the first 30 minutes after the episode releases. Connect with us here, ask questions, or submit your own code!

{% youtube 3hvN7bkjZBk %}

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

### How Slow is JavaScript Really? JavaScript vs C++

Is JavaScript really that slow? Or is that just a leftover impression from the old days?

{% youtube WLwTlC1R2sY %}

by [Simon](https://twitter.com/iced_coffee_dev)

### Conducting tech interviews

In this episode Jake and Surma chat about interviewing for web dev roles, drawing on their good and bad experiences as candidates, and mistakes they've made as interviewers. Covering prep, probing questions, coding tasks, and rating candidates.

{% youtube hFyQn5F5pc0 %}

by [Jake Archibald](https://twitter.com/jaffathecake) and [Surma](https://twitter.com/DasSurma)

---

## Useful GitHub repositories

### git-tips

Most commonly used git tips and tricks.

{% github git-tips/tips %}

### The Endless Acid Banger

An algorithmic human-computer techno jam

{% github vitling/acid-banger %}

### transition.css

46 pre-built drop-in CSS transitions

{% github argyleink/transition.css %}

### JSEncrypt

A Javascript library to perform OpenSSL RSA Encryption, Decryption, and Key Generation.

{% github travist/jsencrypt %}

---

## dribbble shots

### Sidebar Navigation Web App

![https://cdn.dribbble.com/users/1259559/screenshots/15501941/media/82ada084b98855816211d20e88e63fc8.jpg](https://cdn.dribbble.com/users/1259559/screenshots/15501941/media/82ada084b98855816211d20e88e63fc8.jpg)

by [Golo](https://dribbble.com/shots/15501941-Sidebar-Navigation-Web-App)

### Mobile Banking - Dashboard

![https://cdn.dribbble.com/users/1756963/screenshots/15514410/media/3209aa9eed69e15f709c36471b39c11e.png](https://cdn.dribbble.com/users/1756963/screenshots/15514410/media/3209aa9eed69e15f709c36471b39c11e.png)

by [Wildan Wari](https://dribbble.com/shots/15514410--Mobile-Banking-Dashboard)

### Icons

![https://cdn.dribbble.com/users/594158/screenshots/15521114/media/0d6ad2a24cafb45edc49c1c227ead4e6.png](https://cdn.dribbble.com/users/594158/screenshots/15521114/media/0d6ad2a24cafb45edc49c1c227ead4e6.png)

by [Zaib Ali](https://dribbble.com/shots/15521114-Icons)

### Doku - Digital Wallet App

![https://cdn.dribbble.com/users/2713351/screenshots/15531167/media/e2c3796cbcb6031a5412a3db8fee595f.png](https://cdn.dribbble.com/users/2713351/screenshots/15531167/media/e2c3796cbcb6031a5412a3db8fee595f.png)

by [Regi Pangestu](https://dribbble.com/shots/15531167-Doku-Digital-Wallet-App)

### Avatar Maker App Concept

![https://cdn.dribbble.com/users/1787150/screenshots/15532934/media/4c2d04bbf1731795866b337889bec622.png](https://cdn.dribbble.com/users/1787150/screenshots/15532934/media/4c2d04bbf1731795866b337889bec622.png)

by [Sajjad Mohammadi Nia](https://dribbble.com/shots/15532934-Avatar-Maker-App-Concept)

---

## Tweets

{% twitter 1384965228413210631 %}

{% twitter 1384540641007448065 %}

{% twitter 1375019614384627716 %}

{% twitter 1384576200803295234 %}

{% twitter 1386031624232456194 %}

{% twitter 1385938591323414529 %}

---

## Picked Pens

### Tuggable Lamp

{% codepen https://codepen.io/jh3y/pen/mdRaNgM %}

by [Jhey](https://twitter.com/jh3yy)

### Buttoggle

{% codepen https://codepen.io/jh3y/pen/XWpoJVr %}

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

---

## Podcasts worth listening

### The CSS Podcast: Paths, shapes, clipping and masking

Paths, shapes, clipping, masking, oh my! There’s so much you can do with CSS shapes — from creating transition effects to creating interesting and organic typographic layouts. In this episode, we dive into how to wrangle shape effects in CSS.

{% spotify spotify:episode:5EhdwEHCBeg0qB5ilqf5Ys %}

### Container Queries

{% spotify spotify:episode:2N13ulWkrrUZHzd4jG8UMe %}

### Hasty Treat - Container Queries Are Here

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.

{% spotify spotify:episode:5CAuIRwTenIRtPuvS8EGcP %}

### Matt Pinner - Software Engineer at Amazon

Matt and David talk about building your community, finding passion in your freelance work, and utilizing your professional experience to grow your career.

{% spotify spotify:episode:6BlXeGzq4vV7yULDB3vixO %}

---

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