Weekly Digest 14/2022
Tags: javascript, webdev, react, css
Published: 2022-04-10 14:59:18

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

### Designing Better Breadcrumbs

[Designing Better Breadcrumbs - Smashing Magazine](https://www.smashingmagazine.com/2022/04/designing-better-breadcrumbs/)

### Exciting Times for Browsers

It’s certainly an exciting time to be working on the web right now, with browser support for new features moving along at a lightning-fast pace!

[CSS { In Real Life } | Exciting Times for Browsers (and CSS)](https://css-irl.info/exciting-times-for-browsers-and-css/)

---

## Some great videos I watched this week

### Fluid Typography and Layouts with Andy Bell

We're going to learn how to create with consistent, fluidly scaling typography and spacing, all using CSS. Andy will show us some great techniques so that our website is consistent and looks great at every screen size.

{% youtube 7X8R_KVB3uc %}

by [Alex Trost](https://twitter.com/trostcodes)

### Structuring Request Handlers — Mock Service Worker

In this recipe, you'll learn about the best practices to structure your request handlers.

{% youtube OrbARE6j6OY %}

by [Mock Service Worker](https://twitter.com/ApiMocking)

### Learn Vitest and Testing Library

Vitest is an amazing fast unit-test testing framework for Vue, React, and Svelte. In this video, Erik discusses how to set it up, how to create some tests, and some cool features of it, including in-source testing and mocking responses with msw.

{% youtube FJRuG85tXV0 %}

by [Erik Hanchett](https://twitter.com/ErikCH)

### DALL-E is coming... World-changing AI image generator

OpenAI just announced a new AI Text-to-Image model based on GPT-3 called DALL-E 2. It is capable of turning a text description into a unique image or work of art that has never been seen before.

{% youtube alJdw4JDJ4o %}

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

---

## Useful GitHub repositories

### google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff, and woff2 files + CSS snippets

{% github majodev/google-webfonts-helper %}

### gh-dash

gh CLI extension to display a dashboard of PRs and issues - configurable with a beautiful UI.

{% github dlvhdr/gh-dash %}

## dribbble shots

### E-Commerce App - ClockBase

![by Ali Husni](https://cdn.dribbble.com/users/5324991/screenshots/17984068/media/8c8bf8fbc253fcbbfaf2e9b77d73aeb1.png)

by Ali Husni

### Task Management App UI Design

![by [Rifat Sarkar](https://dribbble.com/shots/17982564-Task-Management-App-UI-Design-To-do-list-Task-Schedule)](https://cdn.dribbble.com/users/4470689/screenshots/17982564/media/b5f542721aabe32c0075405c8ecb4130.jpg)

by [Rifat Sarkar](https://dribbble.com/shots/17982564-Task-Management-App-UI-Design-To-do-list-Task-Schedule)

### Electric Skateboard

![by [Rylic Studio](https://dribbble.com/shots/17983807-Electric-Skateboard-Product-Landing-Page)](https://cdn.dribbble.com/users/9330674/screenshots/17983807/media/43ad5579a2f50ada034f344e22fe702c.jpg)

by [Rylic Studio](https://dribbble.com/shots/17983807-Electric-Skateboard-Product-Landing-Page)

---

## Tweets

{% twitter 1513015651920584705 %}

{% twitter 1512243710096191489 %}

{% twitter 1512805365049610240 %}

{% twitter 1511617861504180230 %}

{% twitter 1511463379210317824 %}

---

## Picked Pens

### "think" outside the box toggle

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

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

### Checkbox Animations

{% codepen https://codepen.io/jkantner/pen/BaJmyjo %}

by [Jon Kantner](https://twitter.com/jonkantner)

---

## Podcasts worth listening

### Syntax – Types in JS?

In this Hasty Treat, Scott and Wes talk about a proposal for type syntax in JavaScript.

{% spotify spotify:episode:6uQhvYZL7WzEOaALlgaKgM %}

### CodePen Radio – ****Chris Nager****

This week Chris got to speak with [Chris Nager](https://codepen.io/chrisnager)!

{% spotify spotify:episode:4ofbrlRoC3NKTkQUrPTpBw %}

---

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