DEV Community

Cover image for Weekly Digest 30/2021 – Top of the Week
Marco Biedermann for World In Dev

Posted on

Weekly Digest 30/2021 – Top of the Week

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.


 

🎉 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 📬.

 


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

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

ES2021 Features

ES2021 as approved by the Ecma General Assembly

ES2021 features list

How to test component interactions

Learn how to simulate user behavior and run functional checks

How to test 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.

by Daniel Bark

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

by John Hammond

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

by James Q Quick

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

by Fireship

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

by Matt Bierner

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".

by Chris Coyier


Useful GitHub repositories

GitHub Readme Stats

Get dynamically generated GitHub stats on your readmes!

GitHub logo anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

GitHub Readme Stats

Get dynamically generated GitHub stats on your readmes!

Tests Passing Issues GitHub pull requests

View Demo · Report Bug · Request Feature

Français · 简体中文 · Español · Deutsch · 日本語 · Português Brasileiro · Italiano · 한국어 Nederlands नेपाली . Türkçe

Love the project? Please consider donating to help it improve!

Give india logo

Are you considering to support the project by donating to me? Please DON'T!!

Instead, Help India fight 2nd deadly wave of COVID,
Thousands of people are dying in India for lack of Oxygen & COVID related necessary infrastructure.

Visit https://indiafightscorona.giveindia.org and make a small donation to help us fight covid and overcome this crisis.
Your small help goes a long way. ❤️

Features

GitHub 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 logo ai / size-limit

Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.

Size Limit Cult Of Martians

Size Limit logo by Anton Lovchikov

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.

  • ES modules and tree-shaking support.
  • Add Size Limit to Travis CI, Circle CI, GitHub Actions or another CI system to know if a pull request adds a massive dependency.
  • Modular to fit different use cases: big JS applications that use their own bundler or small npm libraries with many files.
  • Can calculate the time it would take a browser to download and execute your JS. Time is a much more accurate and understandable metric compared to the size in bytes.
  • Calculations include all dependencies and polyfills used in your JS.

Size Limit CLI

With GitHub action Size Limit will post bundle size changes as a comment in pull request discussion.

Size Limit comment in pull request about bundle size changes

With --why, Size Limit…





dribbble shots

Node – Crypto NFT iOS UI Kit

https://cdn.dribbble.com/users/427857/screenshots/16111789/media/517219af5044d1cc51721016eddb0772.png

by Tran Mau Tri Tam

Sign In to Account

https://cdn.dribbble.com/users/2295041/screenshots/16148191/media/14f69726e194a45e88e28b56c2eae86d.png

by Evgeniy Kritskiy

Messenger App - Mobile Design

https://cdn.dribbble.com/users/7514969/screenshots/16138461/media/ae57f511802b4d77f762d4979f587e72.png

by Julius Branding

Course learning app ui ux

https://cdn.dribbble.com/users/6586470/screenshots/16149674/media/61d169ed40a06b9c2bb3f8435fe508e8.png

by Marina Budarina


Tweets


Picked Pens

Gradient Stroke

by Marco Biedermann

11 Geometric Trees

by Roden


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.

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!

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!

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.


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

Discussion (0)