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.

Giveaway

We are giving away any course you need on Udemy. Any price any course.
To enter you have to do the following:

1. React to this post
2. Subscribe to our newsletter

You will receive our articles directly to your inbox .

PS: We will send a list of 25 additional Udemy courses in our Newsletter exclusively.

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

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

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

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

How to actually test UIs

Testing techniques used by leading engineering teams

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

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.

by Jimmy Cleveland

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.

by Jimmy Cleveland

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.

by Fireship

Thinking on ways to solve split text

In todays 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!

by Adam Argyle

How Slow is JavaScript Really? JavaScript vs C++

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

by Simon

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.

by Jake Archibald and Surma

Useful GitHub repositories

git-tips

Most commonly used git tips and tricks.

The Endless Acid Banger

An algorithmic human-computer techno jam

transition.css

46 pre-built drop-in CSS transitions

<link rel="stylesheet" href="https://unpkg.com/transition-style"><div transition-style="in:wipe:up">  </div>

@import "transition-style";

import 'transition-style';

JSEncrypt

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

openssl genrsa -out rsa_1024_priv.pem 1024

cat rsa_1024_priv.pem

dribbble shots

Sidebar Navigation Web App

by Golo

Mobile Banking - Dashboard

by Wildan Wari

Icons

by Zaib Ali

Doku - Digital Wallet App

by Regi Pangestu

Avatar Maker App Concept

by Sajjad Mohammadi Nia

Tweets

Wes Bos

@wesbos

Firefox dev tools always complains if you dont have a favicon. (I think Chrome silences this).

Quick lil fix if you want to silence the error. I often find myself using this instead of having to add another file to little HTML demos.

20:20 PM - 21 Apr 2021

Beth Griggs

@bethgriggs_

Happy @nodejs Major Release Day

$ nvm install 16

nodejs.medium.com/node-js-16-ava

16:13 PM - 20 Apr 2021

Erik Kroes

@erikkroes

Styling with Javascript

09:39 AM - 25 Mar 2021

@0xca0a

this is an old example i found by digging through my old codesandboxes, never published it i think. you learn how to tie scroll offset to shaders, and how to make a draggable minimap.

fullscreen qf8d0.csb.app
sandbox codesandbox.io/s/qf8d0

18:34 PM - 20 Apr 2021

Addy Osmani

@addyosmani

Tip: You can name capture groups for Regular Expressions in JavaScript. Define a named capture in angle brackets <> and they get returned under .groups.

18:57 PM - 24 Apr 2021

Jared Palmer

@jaredpalmer

Life altering @code trick: keyboard mapping Emmet inward and outward html/jsx selection

12:48 PM - 24 Apr 2021

Picked Pens

Tuggable Lamp

by Jhey

Buttoggle

by Adam Kuhn

Podcasts worth listening

The CSS Podcast: Paths, shapes, clipping and masking

Paths, shapes, clipping, masking, oh my! Theres 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.

Container Queries

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.

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.

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

Make sure to subscribe to our newsletter to receive our weekly recap directly on your email and react to this post to automatically participate in our giveaway

If you would like to join our discussions, you can find us on Discord .