Weekly Digest 46/2021
Tags: css, javascript, react, webdev
Published: 2021-11-21 15:25:50

Welcome to my Weekly Digest #46 of this year.

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

---

## Interesting articles to read

### Flip, Invert, and Reverse

Chuan is going to introduce **3** kinds of transformations for the *[SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)* commands. Specifically for `h/H` and `v/V` commands.

[Flip, Invert, and Reverse](https://yuanchuan.dev/flip-invert-reverse)

### Introducing “Shadow Palette Generator”

In order to create lush, realistic shadows in CSS, we need to use multiple layers and colors. How do we come up with all of the parameters, though? I've built a tool that'll help.

[Introducing "Shadow Palette Generator"](https://www.joshwcomeau.com/css/introducing-shadow-palette-generator/)

### Using Position Sticky With CSS Grid

How to make position sticky work with CSS grid items

[Using Position Sticky With CSS Grid - Ahmad Shadeed](https://ishadeed.com/article/position-sticky-css-grid/)

### **Parallax Powered by CSS Custom Properties**

Good friend Kent C. Dodds has recently dropped his [new website](https://kentcdodds.com/) which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some “whimsy” for the site.

[Parallax Powered by CSS Custom Properties](https://css-tricks.com/parallax-powered-by-css-custom-properties/)

---

## Some great videos I watched this week

### The new responsive design

Join us as we discuss the latest updates on UI styling, DevTools, and the evolution of responsive design.

{% youtube dhrX_biPH8c %}

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

### New in Chrome 96: Improvements for installed PWAs, Priority Hints, and more!

Chrome 96 is rolling out now! There are two new properties in the web app manifest. The id property allows you to specify a unique ID for your PWA, and the protocol_handlers property allows you to automatically register your PWA as a protocol handler upon installation.

{% youtube PPukHsOH_BI %}

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

### Introducing the new PageSpeed Insights

Introducing the new PageSpeed Insights: a more intuitive way to measure performance & improve it using real-world and lab data.

{% youtube V6mAT3yZXzA %}

by [Addy Osmani](https://twitter.com/addyosmani)

### How to Code: Rectangular Collision Detection

Rectangular collision detection is a must-know when it comes to video game development. It's a way to tell when two objects touch, so you can call some sort of reactionary event in return, such as gaining a power-up, or ending the game.

{% youtube _MyPLZSGS3s %}

by [Chris Courses](https://twitter.com/christopher4lis)

### React Location: Better than React Router?

React Router has been the best in class router for years now. But now the creator of React Query, Tanner Linsley, has developed and just released a new router for the Tanstack named React Location.

{% youtube i8kner-Yrj0 %}

by [Jack Herrington](https://twitter.com/jherr)

---

## Useful GitHub repositories

### yq

yq is a portable command-line YAML processor

{% github mikefarah/yq %}

### **React-Grid-Layout**

A draggable and resizable grid layout with responsive breakpoints, for React.

{% github react-grid-layout/react-grid-layout %}

### Appsmith

Quickly build any custom business software like admin panels, internal tools, dashboards, and more with pre-built UI widgets that connect to any database, GraphQL or REST API, controlling everything with Javascript.

{% github appsmithorg/appsmith %}

---

## dribbble shots

### **Plus Medicine - Website Responsive Mobile**

![by [Adalahreza](https://dribbble.com/shots/16898488-Plus-Medicine-Website-Responsive-Mobile)](https://cdn.dribbble.com/users/2302891/screenshots/16898488/media/a8bc0985bae03824fab05e26b2c5464f.jpg)

by [Adalahreza](https://dribbble.com/shots/16898488-Plus-Medicine-Website-Responsive-Mobile)

### **Audio Books App**

![by [Natalia Berdnyk](https://dribbble.com/shots/16897169-Audio-Books-App)](https://cdn.dribbble.com/users/2303657/screenshots/16897169/media/80e2bd8c039aa393edddc3a09f7c2714.png)

by [Natalia Berdnyk](https://dribbble.com/shots/16897169-Audio-Books-App)

### Dashboard Design

![by [AR Shakir](https://dribbble.com/shots/16798476-Dashboard-Design)](https://cdn.dribbble.com/users/2253180/screenshots/16798476/media/d003cf4155d8e3e7dac5aadf255c4fe0.jpg)

by [AR Shakir](https://dribbble.com/shots/16798476-Dashboard-Design)

### **Food Delivery App**

![by [Purrweb UI](https://dribbble.com/shots/16895548-Food-Delivery-App)](https://cdn.dribbble.com/users/5031392/screenshots/16895548/media/0248354bfe7e088dff4e30165be4b436.png)

by [Purrweb UI](https://dribbble.com/shots/16895548-Food-Delivery-App)

---

## Tweets

{% twitter 1460605894635532291 %}

{% twitter 1460760109009752066 %}

## Picked Pens

### Snowflakes with clip-path trigonometry

{% codepen https://codepen.io/michellebarker/pen/VwKdONM %}

by [Michelle Barker](https://twitter.com/MicheBarks)

### Pure CSS 3D Packaging

{% codepen https://codepen.io/jh3y/pen/XWaGEgO %}

by [Jhey](https://twitter.com/jh3yy)

---

## Podcasts worth listening

### Syntax – Next.js 12

In this Hasty Treat, Scott and Wes talk about Next.js 12 and all of its hot new goodness and updates!

{% spotify spotify:episode:7BiM4HCXAcVk39SAidsUry %}

### Call with Kent – Versioning and dependency management for libraries

How did you approach versioning and dependency management when you were building this reusable component library at PayPal?

{% spotify spotify:episode:3cjvg2DjKxIirnFR0BvTV9 %}

---

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