Weekly Digest 27/2021 - Top of the Week
Tags: css, javascript, react, webdev
Published: 2021-07-11 17:57:20

Welcome to my Weekly Digest #27.

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

### `export default thing` is different to `export { thing as default }`

Here's how they differ, and when it matters…

[`export default thing` is different to `export { thing as default }`](https://jakearchibald.com/2021/export-default-thing-vs-thing-as-default/)

### SVG Favicons in Action

Ever heard of favicons made with SVG? If you are a regular reader of CSS-Tricks, you probably have. But does your website actually use one? The task is

[SVG Favicons in Action](https://css-tricks.com/svg-favicons-in-action/)

### npm audit: Broken by Design

Found 99 vulnerabilities (84 moderately irrelevant, 15 highly irrelevant)

[npm audit: Broken by Design](https://overreacted.io/npm-audit-broken-by-design/)

---

## Some great videos I watched this week

### React's Automatic State Batching

Little known fact React batches your state state changes to result in only a single render (DOM) update. Except when it didn't, But now it does.

{% youtube sUd45wB9lrA %}

by [Basarat](https://twitter.com/basarat)

### Building a Data-Backed Next.js Site with Prisma & App Platform

Chris is joined by Chris Sev from Digital Ocean to talk about their new App Platform. They're going to use it to build a little website: The site will be blog-like: Posts with IDs, titles, content, and the more dynamic bit: “likes”. They're going to use some pretty modern tech to get it done.

{% youtube GfhlLJWrDiA %}

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

### Type safe GraphQL with TypeScript

When building with GraphQL you define the schema up front and this can be really handy go use when it comes to writing the queries, resolvers, etc., especially if it’s in TypeScript. So, how do you go about doing the type generation? We’ll take a look at a tool that can generate you the TypeScript types, then implement our backend using them before looking at how they can plug into the front end with React Hooks.

{% youtube DfZVi1DwpsM %}

by [Aaron Powell](https://twitter.com/slace)

### Are You Making This Mistake With CSS Colors?

Every developer needs to define colors in CSS at some point and generally when a developer defines colors in CSS they use RGB or HEX to write out those colors. Technically there is nothing wrong with doing this, but it is far from the best way to write colors in CSS.

{% youtube EJtmfkKulNA %}

by [Web Dev Simplified](https://twitter.com/DevSimplified)

### VS Code tips: JSDoc links

Use @ link tags in JSDoc comments to link to symbols in your JavaScript or TypeScript project.

{% youtube 1VNsVhusfnI %}

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

---

## Useful GitHub repositories

### GitTools

This repository contains three small python/bash scripts used for the Git research.

{% github internetwache/GitTools %}

### Geist

Modern and minimalist React UI library, originating from Vercel's design.

{% github geist-org/react %}

---

## dribbble shots

### Recipe App Design

![https://cdn.dribbble.com/users/554465/screenshots/16012961/media/2da8dcb9937c426d2ef5ba7c10af79ea.png](https://cdn.dribbble.com/users/554465/screenshots/16012961/media/2da8dcb9937c426d2ef5ba7c10af79ea.png)

by [Hadi Altaf](https://dribbble.com/shots/16012961-Recipe-App-Design)

### Furniture Landing Page

![https://cdn.dribbble.com/users/4898370/screenshots/16018403/media/2419f9fbb71ac0d98d01039c2bafca31.png](https://cdn.dribbble.com/users/4898370/screenshots/16018403/media/2419f9fbb71ac0d98d01039c2bafca31.png)

### Recipe App

![https://cdn.dribbble.com/users/554465/screenshots/16016464/media/1cdd68212f3016daac30b935c676d75a.png](https://cdn.dribbble.com/users/554465/screenshots/16016464/media/1cdd68212f3016daac30b935c676d75a.png)

by [Hadi Altaf](https://dribbble.com/shots/16012961-Recipe-App-Design)

### Cryptocurrency Market Landing

![https://cdn.dribbble.com/users/2187824/screenshots/16015626/media/feaa09e74288b990dd51150d1073e772.png](https://cdn.dribbble.com/users/2187824/screenshots/16015626/media/feaa09e74288b990dd51150d1073e772.png)

by [Sigit Setyo Nugroho](https://dribbble.com/shots/16015626-Coina-Cryptocurrency-Market-Landing-3D-Exploration)

### Web Header

![https://cdn.dribbble.com/users/6682392/screenshots/16017767/media/93879f224ab4a2a45063f2bc0579b171.png](https://cdn.dribbble.com/users/6682392/screenshots/16017767/media/93879f224ab4a2a45063f2bc0579b171.png)

by [Orix Agency](https://dribbble.com/shots/16017767-Web-Header)

### Marova - Virtual Art Gallery

![https://cdn.dribbble.com/users/3962119/screenshots/16018613/media/2b6e662514e261f4d483db3dc4ab5f87.png](https://cdn.dribbble.com/users/3962119/screenshots/16018613/media/2b6e662514e261f4d483db3dc4ab5f87.png)

by [Zumur Deb](https://dribbble.com/shots/16018613-Marova-Virtual-Art-Gallery)

---

## Tweets

{% twitter 1411942923671785474 %}

{% twitter 1412456314278584328 %}

{% twitter 1412414470681415682 %}

{% twitter 1412762071272415234 %}

{% twitter 1413226453450244098 %}

{% twitter 1413483575635169284 %}

---

## Picked Pens

### Generative parallelogram covering

{% codepen https://codepen.io/ZachSaucier/pen/qBmNeRv %}

by [Zach Saucier](https://twitter.com/ZachSaucier)

---

## Podcasts worth listening

### Syntax - JavaScript Event Buzzwords

In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!

{% spotify spotify:episode:5HE1rN9RmFuKyXGKxiQSwW %}

### Ladybug Podcast - Python

Normally, we talk about frontend development -- but there’s so many other niches within programming out there. Today we’re going to talk about Python what it’s used for, why it’s great, and how it’s different than JavaScript.

{% spotify spotify:episode:0y7LMr0fhvVKvJBdLY0qzi %}

### The CSS Podcast - Accessibility

Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more!

{% spotify spotify:episode:3gpPwzRw80Cj7NiBNIlE2I %}

---

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