Weekly Digest 29/2021 – Top of the Week
Tags: css, javascript, react, webdev
Published: 2021-07-25 17:33:40

Welcome to my Weekly Digest #29 of this year.
It's still a bit quiet out there in the community due to summer holidays.

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

### The Large, Small, and Dynamic Viewports

There are some changes being made regarding viewport units. The additions define several viewport sizes: the Large, Small, and Dynamic Viewport.

[The Large, Small, and Dynamic Viewports](https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/)

### Temporal: getting started with JavaScript’s new date time API

[Temporal: getting started with JavaScript's new date time API](https://2ality.com/2021/06/temporal-api.html)

### Automatic hyphenation depends on the defined document language

Ways to hyphenate words and how the document language affects automatic hyphenation.

[Automatic hyphenation depends on the defined document language](https://www.stefanjudis.com/today-i-learned/automatic-hyphenation-depends-on-the-defined-document-language/)

---

## Some great videos I watched this week

### Performance Testing CSS-Tricks with WebPageTest

Chris Coyier (CSS-Tricks) gets a hands-on performance review with Tim Kadlec (WebPageTest).

{% youtube Vuhz6wTUwBM %}

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

### The Math behind Animations

Learn React Native Gestures and Animations

{% youtube -lF7sSTelOg %}

by [William Candillon](https://twitter.com/wcandillon)

---

## Useful GitHub repositories

### visx

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

{% github airbnb/visx %}

### WiFi Card

Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc.

{% github bndw/wifi-card %}

### Windows 11 in React

This open-source project is made in the hope to replicate the Windows 11 desktop experience on the web, using standard web technologies like React, CSS (SCSS), and JS.

{% github blueedgetechno/windows11 %}

### Infracost

Infracost shows cloud cost estimates for infrastructure-as-code projects such as Terraform. It helps DevOps, SRE, and developers to quickly see a cost breakdown and compare different options up front.

{% github infracost/infracost %}

---

## dribbble shots

### Wallet App Exploration

![https://cdn.dribbble.com/users/2908303/screenshots/16091553/media/2ee1331f30fa418eca9ce08f667e0691.png](https://cdn.dribbble.com/users/2908303/screenshots/16091553/media/2ee1331f30fa418eca9ce08f667e0691.png)

by [Danar Septiawan](https://dribbble.com/shots/16091553-Wallet-App-Exploration)

### Payfast - Finance App Design

![https://cdn.dribbble.com/users/5484409/screenshots/16095948/media/50c7f507790a0ad02f413c6fb348cea3.png](https://cdn.dribbble.com/users/5484409/screenshots/16095948/media/50c7f507790a0ad02f413c6fb348cea3.png)

by [Rafi Rohmat](https://dribbble.com/shots/16095948-Payfast-Finance-App-Design)

### Inputs Component

![https://cdn.dribbble.com/users/4335179/screenshots/16094644/media/292727933a7d9413aa1232dac2d44624.png](https://cdn.dribbble.com/users/4335179/screenshots/16094644/media/292727933a7d9413aa1232dac2d44624.png)

by [Amirbaqian](https://dribbble.com/shots/16094644-Inputs-Component-Light-Part)

### Travigo - Travel Dashboard

![https://cdn.dribbble.com/users/3993860/screenshots/16082616/media/46bc521d4b585c5a34b6aa63c6fedc4e.png](https://cdn.dribbble.com/users/3993860/screenshots/16082616/media/46bc521d4b585c5a34b6aa63c6fedc4e.png)

by [Andika Wiraputra](https://dribbble.com/shots/16082616-Travigo-Travel-Dashboard)

---

## Tweets

{% twitter 1417174999027302408 %}

{% twitter 1417521640905183232 %}

{% twitter 1418288651788824579 %}

{% twitter 1418541417505435650 %}

{% twitter 1419291092386816003 %}

---

## Picked Pens

### Emoji List

{% codepen https://codepen.io/argyleink/pen/rNmzGzW %}

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

### Modern Blog Layout with CSS Grid

{% codepen https://codepen.io/TurkAysenur/pen/gOmMgpx %}

by [Aysenur Turk](https://twitter.com/AysnrTrkk)

### Newton's CSS cradle

{% codepen https://codepen.io/amit_sheen/pen/XWMXwvJ %}

by [Amit Sheen](https://twitter.com/amit_sheen)

---

## Podcasts worth listening

### Syntax – Stylelint for Linting CSS

In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it!

{% spotify spotify:episode:0kqe0fWou3Xz1Rx2r4cbdC %}

### The CSS Podcast – Styling SVG in CSS

CSS and SVG are very intertwined, and you can create a lot of unique effects by combining the two. This episode dives into a few CSS + SVG tips and tricks, including where and how to use SVG on your page, icon systems, color theming, adding animations, filter effects, and more!

{% spotify spotify:episode:0XTZOuRuQ5nSxTAUJ9H7AY %}

---

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