Weekly Digest 08/2021
Tags: css, javascript, design, tooling
Published: 2021-02-28 19:14:04

Welcome to my Weekly Digest #8 of this year and the last one of February.

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

---

## Interesting articles to read

### Getting Deep into Shadows

Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism.

[Getting Deep into Shadows | CSS-Tricks](https://css-tricks.com/getting-deep-into-shadows/)

### The Future of CSS: Scroll-Linked Animations with @scroll-timeline

The “Scroll-linked Animations Specification” is an upcoming addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container. Let's take a look at how it works and what results we can achieve with it.

[The Future of CSS: Scroll-Linked Animations (Part 1)](https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/)

### .new - Google Registry

Browse the full list of .new shortcuts available today from Adobe, Spotify, and many more.

[.new - Google Registry](https://whats.new/shortcuts/)

### A DRY Approach to Color Themes in CSS

The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations.

[A DRY Approach to Color Themes in CSS | CSS-Tricks](https://css-tricks.com/a-dry-approach-to-color-themes-in-css/)

### Maximally optimizing image loading for the web in 2021

In this post Malte Ubl outlines 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

[Maximally optimizing image loading for the web in 2021](https://www.industrialempathy.com/posts/image-optimizations/)

### Hiding Content Responsibly

In this article, Kitty Giraudel discusses all the ways to hide something, be it through HTML or CSS, and when to use which.

[Hiding Content Responsibly](https://hugogiraudel.com/2021/02/17/hiding-content-responsibly/)

---

## Some great videos I watched this week

### Spring Forces

Boing! Time to simulate a spring force! This challenge fits into chapters 2 and 3 of the Nature of Code and demonstrates how to simulate the oscillating motion of a spring using vectors and forces.

{% youtube Rr-5HiXquhw %}

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

### How Disney's Magic Mirror Works | Enchanted Tales with Belle

{% youtube vX62ijsGv5Q %}

by [Art of Engineering](https://www.youtube.com/c/ArtofEngineering)

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

{% youtube VtaRYSBIbU4 %}

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

### Building Collision Simulations: An Introduction to Computer Graphics

Collision detection systems show up in all sorts of video games and simulations. But how do you actually build these systems? Turns out that the key ideas behind these systems show up all over a field of computer science called computer graphics.

{% youtube eED4bSkYCB8 %}

by [Reducible](https://twitter.com/Reducible20)

### Upgrading DevTools' architecture to the modern web

The Chrome DevTools codebase is around 150,000 lines of first-party JavaScript, with some parts being over ten-years old. As with any large, legacy codebase, there are a range of challenges to navigate, whether it be testing, code style and consistency, or simply understanding what the code is doing! This session steps through how we plan, implement, and maintain code migrations in Chrome's DevTools.

{% youtube BHogHiiyuQk %}

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

---

## Useful GitHub repositories

### Engineering Manager Resources

A list of engineering manager resource links.

{% github ryanburgess/engineer-manager %}

### qiankun

An implementation of Micro Frontends, based on single-spa, but made it production-ready.

{% github umijs/qiankun %}

---

## dribbble shots

### Foodoo Mobile

![https://cdn.dribbble.com/users/26642/screenshots/15168675/media/0a0504141c062938912c24f50db8d519.png](https://cdn.dribbble.com/users/26642/screenshots/15168675/media/0a0504141c062938912c24f50db8d519.png)

by [Halo Mobile](https://twitter.com/vboyev)

### Pulver : Render Showcase Responsive

![https://cdn.dribbble.com/users/1418789/screenshots/15170954/media/2763c26746bc78a8b78fe248ea3c0d34.png](https://cdn.dribbble.com/users/1418789/screenshots/15170954/media/2763c26746bc78a8b78fe248ea3c0d34.png)

by [creathive](https://twitter.com/creathivestudio)

### QUAN - minimum awesome product

![https://cdn.dribbble.com/users/824356/screenshots/15182588/quan_-_minimum_awesome_product.png](https://cdn.dribbble.com/users/824356/screenshots/15182588/quan_-_minimum_awesome_product.png)

by [Lukáš Straňák](https://dribbble.com/LukasStranak)

### Refreshing UI for a watch app

![https://cdn.dribbble.com/users/4859/screenshots/15183511/media/d10313ada0787a0d33e05a251beb7c79.png](https://cdn.dribbble.com/users/4859/screenshots/15183511/media/d10313ada0787a0d33e05a251beb7c79.png)

by [Cuberto](https://twitter.com/cuberto)

---

## Tweets

{% twitter 1364122827960410114 %}

{% twitter 1364941813832962053 %}

{% twitter 1365051202464055302 %}

---

## Picked Pens

### Reading Application

{% codepen https://codepen.io/abxlfazl/pen/OJbLozK %}

by [abxlfazl khxrshidi](https://twitter.com/abxlfazl1)

### Glassmorphism Creative Cloud App Redesign

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

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

---

Talk to you next week and stay safe! 👋