Weekly Digest 28/2021 - Top of the Week
Tags: css, javascript, react, webdev
Published: 2021-07-18 21:07:45

Welcome to my Weekly Digest #28.

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

### Meta Theme Color and Trickery

Starting with Version 15, Safari supports the theme-color `<meta>` tag both on macOS and iOS.

[Meta Theme Color and Trickery](https://css-tricks.com/meta-theme-color-and-trickery/)

## Some great videos I watched this week

### 21+ Browser Dev Tools & Tips You Need To Know

The web browser is one of the most sophisticated tools on the planet. Today we look at 21 tricks, tips, and lesser-known features in Chrome Dev Tools that will make your life easier as a web developer.

{% youtube TcTSqhpm80Y %}

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

### Arrive Steering Behavior

It's finally time for me to tackle a JavaScript (p5.js) implementation of the "arrival" steering behavior from Craig Reynolds' 1999 paper Steering Behaviors For Autonomous Characters!

{% youtube OxHJ-o_bbzs %}

by [Daniel Shiffman](https://twitter.com/shiffman)

### MongoDB in 100 Seconds

MongoDB is the world’s most popular document database with powerful capabilities like full-text search, geospatial queries, data aggregation, and more.

{% youtube -bt_y4Loofg %}

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

### Astro in 100 Seconds

Astro is an open-source tool that can build static HTML websites using popular frontend JavaScript frameworks (React, Vue, Svelte), while loading fully interactive components as needed.

{% youtube dsTXcSeAZq8 %}

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

### Chrome 92 - What’s New in DevTools

{% youtube 2baY3JpCxpo %}

by [Google Chrome Developers](https://twitter.com/ChromiumDev)

---

## Useful GitHub repositories

### PhoneInfoga

Information gathering & OSINT framework for phone numbers

{% github sundowndev/phoneinfoga %}

### PlantUML

Generate UML diagram from textual description

{% github plantuml/plantuml %}

### web-vitals

Essential metrics for a healthy site.

{% github GoogleChrome/web-vitals %}

---

## dribbble shots

### Finance Mobile App Design

![https://cdn.dribbble.com/users/1615584/screenshots/16053492/media/c73c836a4dc0dc17d57cbdf0da8ab775.jpg](https://cdn.dribbble.com/users/1615584/screenshots/16053492/media/c73c836a4dc0dc17d57cbdf0da8ab775.jpg)

by [Ghulam Rasool](https://dribbble.com/shots/16053492-Finance-Mobile-App-Design)

### Task Manager - Mobile Design

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

by [Julius Branding](https://dribbble.com/shots/15699675-Task-Manager-Mobile-Design)

### Nipo Shop Kit

![https://cdn.dribbble.com/users/1619633/screenshots/16060465/media/94c9e7dddf50b66ac53cbdc5da65cf10.png](https://cdn.dribbble.com/users/1619633/screenshots/16060465/media/94c9e7dddf50b66ac53cbdc5da65cf10.png)

by [Afshin T2Y](https://dribbble.com/shots/16060465-Nipo-Shop-Kit)

### Tipping App Concept

![https://cdn.dribbble.com/users/1963775/screenshots/16042308/media/b4c8244f9f78b4909ac0eae0f377fb69.png](https://cdn.dribbble.com/users/1963775/screenshots/16042308/media/b4c8244f9f78b4909ac0eae0f377fb69.png)

by [Conceptzilla](https://dribbble.com/shots/16042308-Tipping-App-Concept)

### Food Recipe Application

![https://cdn.dribbble.com/users/3604170/screenshots/16053853/media/4bf84952f498d970ec294b1b835a634e.jpg](https://cdn.dribbble.com/users/3604170/screenshots/16053853/media/4bf84952f498d970ec294b1b835a634e.jpg)

by [Izmahsa](https://dribbble.com/shots/16053853-Food-Recipe-Application)

---

## Tweets

{% twitter 1415016603255726081 %}

{% twitter 1415279090446204929 %}

{% twitter 1415681381506551816 %}

{% twitter 1415630826704867336 %}

{% twitter 727821044308967425 %}

{% twitter 1416463322216505350 %}

---

## Picked Pens

### Vortex Lines

{% codepen https://codepen.io/ste-vg/pen/xxdRPbV %}

by [Steve Gardner](https://twitter.com/steeevg)

### Generative Hearts

{% codepen https://codepen.io/terabaud/pen/GRmNbWx %}

by [Lea Rosema](https://twitter.com/terabaud)

---

## Podcasts worth listening

The CSS Podcast – inherit, initial, unset, and revert

This episode is about the very available CSS values `inherit`, `initial`, `unset`, and `revert`. We'll help explain what they are, what they do, and when to use them.

{% spotify spotify:episode:731Ql5cmL5n3gPvx7IQth7 %}

### Syntax – React 18 - A Look Ahead

In this episode of Syntax, Scott and Wes talk about everything coming in React 18!

{% spotify spotify:episode:2PjTTIXdQtl3Yl2x7R6ZRe %}

---

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