Weekly Digest 30/2021 – Top of the Week
Tags: css, javascript, react, webdev
Published: 2021-08-01 17:32:45

Welcome to my Weekly Digest #30 which is the first one in August for this year.

This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.

---

&nbsp;

## 🎉 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
1. ✉️ Subscribe to our [newsletter](https://worldindev.ck.page)

You will receive [our articles](https://dev.to/worldindev) directly to your [inbox](https://worldindev.ck.page) 📬.
 
&nbsp;

---

## Interesting articles to read

### Creating an accessible autocomplete experience

After many months of research, development, and testing, we’re excited to announce that the React Spectrum ComboBox component and React Aria `useComboBox` hook are now available! In this post, we'll take a deeper look into some of the challenges we faced when building an accessible and mobile-friendly ComboBox.

[Creating an accessible autocomplete experience](https://react-spectrum.adobe.com/blog/building-a-combobox.html)

### A framework for building Open Graph images

We recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources on GitHub.

[A framework for building Open Graph images | The GitHub Blog](https://github.blog/2021-06-22-framework-building-open-graph-images/)

### ES2021 Features

ES2021 as approved by the Ecma General Assembly

[ES2021 features list](https://h3manth.com/ES2021/)

### How to test component interactions

Learn how to simulate user behavior and run functional checks

[How to test component interactions](https://storybook.js.org/blog/testing-component-interactions/)

---

## Some great videos I watched this week

### Building A Sliding Puzzle Game with a Custom Image Using ReactJS

In this video tutorial, Daniel shows you how to build a 16 tile sliding puzzle game where you can set your own image as the puzzle background.

{% youtube qVhj4-F1v0g %}

by [Daniel Bark](https://twitter.com/BarelyDaniel)

### HackTheBox "Business CTF" - discordvm - Node.js Sandbox Escape

{% youtube pzh6--wIp24 %}

by [John Hammond](https://twitter.com/_johnhammond)

### The New Way To Debug JavaScript in VS Code

VS Code now has built-in debugging. This means you don't need to install an extra extension to get started debugging JavaScript. In this video, James will show you how to set it up

{% youtube tC91t9OvVHA %}

by [James Q Quick](https://twitter.com/jamesqquick)

### Terraform in 100 Seconds

Terraform is an Infrastructure as Code (IAC) tool that can provision resources in the cloud. Learn how to set up terraform and connect it to cloud providers like AWS, Google Cloud, Azure, or Docker to automate your infrastructure

{% youtube tomUWcQ0P3k %}

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

### VS Code tips: Add missing function Quick Fix for JavaScript and TypeScript

Use this quick fix to stub out missing functions in TypeScript and JavaScript files

{% youtube 0StatmMzlVM %}

by [Matt Bierner](https://twitter.com/mattbierner)

### A CSS Grid Layout with Pictures Down One Side Matched Up with Paragraphs on the Other

We go through some image best practices, look at a clever technique for testing layout sizes with a single click, deal with small screen layouts, and then battle with how we get to keep our nice layout when extra HTML elements "get in the way".

{% youtube grFGIhqMdZk %}

by [Chris Coyier](https://twitter.com/chriscoyier)

---

## Useful GitHub repositories

### GitHub Readme Stats

Get dynamically generated GitHub stats on your readmes!

{% github anuraghazra/github-readme-stats %}

### Size Limit

Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users, and throws an error if the cost exceeds the limit.

{% github ai/size-limit %}

---

## dribbble shots

### Node – Crypto NFT iOS UI Kit

![https://cdn.dribbble.com/users/427857/screenshots/16111789/media/517219af5044d1cc51721016eddb0772.png](https://cdn.dribbble.com/users/427857/screenshots/16111789/media/517219af5044d1cc51721016eddb0772.png)

by [Tran Mau Tri Tam](https://dribbble.com/shots/16111789-Node-Crypto-NFT-iOS-UI-Kit)

### Sign In to Account

![https://cdn.dribbble.com/users/2295041/screenshots/16148191/media/14f69726e194a45e88e28b56c2eae86d.png](https://cdn.dribbble.com/users/2295041/screenshots/16148191/media/14f69726e194a45e88e28b56c2eae86d.png)

by [Evgeniy Kritskiy](https://dribbble.com/shots/16148191-Sign-In-to-Account)

### Messenger App - Mobile Design

![https://cdn.dribbble.com/users/7514969/screenshots/16138461/media/ae57f511802b4d77f762d4979f587e72.png](https://cdn.dribbble.com/users/7514969/screenshots/16138461/media/ae57f511802b4d77f762d4979f587e72.png)

by [Julius Branding](https://dribbble.com/shots/16138461-Messenger-App-Mobile-Design)

### Course learning app ui ux

![https://cdn.dribbble.com/users/6586470/screenshots/16149674/media/61d169ed40a06b9c2bb3f8435fe508e8.png](https://cdn.dribbble.com/users/6586470/screenshots/16149674/media/61d169ed40a06b9c2bb3f8435fe508e8.png)

by [Marina Budarina](https://dribbble.com/shots/16149674-Course-learning-app-ui-ux)

---

## Tweets

{% twitter 1419681417479344141 %}

{% twitter 1420122675813441540 %}

{% twitter 1420377752667107328 %}

{% twitter 1421126947971768320 %}

{% twitter 1420951279954763779 %}

---

## Picked Pens

### Gradient Stroke

{% codepen https://codepen.io/marcobiedermann/pen/GRmxWwK %}

by [Marco Biedermann](https://twitter.com/BiedermannMarco)

### 11 Geometric Trees

{% codepen https://codepen.io/RodenKerthin/pen/WNjXpLz %}

by [Roden](https://twitter.com/BelichenkoRoden)

---

## Podcasts worth listening

### Syntax – The Surprisingly Exciting World of Favicons

In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don't talk about that often.

{% spotify spotify:episode:1dQFDqAqocI8LdqOv0Se12 %}

### The CSS Podcast – counters and @counter-style

Count on The CSS Podcast to cover counters. Una and Adam teach all the ways to create, reset, and update counters. Use them for lists, games, and more!

{% spotify spotify:episode:0pYXkLEaj1HiBxEjTHHHYJ %}

### Syntax – ShopTalk x Syntax

In this episode of Syntax, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, and more!

{% spotify spotify:episode:3vMipT7dHGHBRkf7xWra9g %}

### The Changelog – Modern Unix tools

This week we’re talking with Nick Janetakis about modern unix tools, and the various commands, tooling, and ways we use the command line. Do you Bash or Zsh? Do you use `cat` or `bat`? What about `man` vs `tldr`? Today’s show is a deep dive into unix tools you know and love or should know, and *maybe* love.

{% spotify spotify:episode:6Ba5gsLTfQROyqsuRyorpL %}

---

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