Weekly Digest 37/2021
Tags: css, javascript, react, webdev
Published: 2021-09-19 19:43:42

Welcome to my Weekly Digest #37 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

### Designing Beautiful Shadows in CSS

Most of the shadows are fuzzy grey boxes. It doesn't have to be this way, though! CSS gives us the tools to create rich, lush, lifelike shadows. In this tutorial, Josh will show you how.

[Designing Beautiful Shadows in CSS](https://www.joshwcomeau.com/css/designing-shadows/)

### The Future of CSS: Cascade Layers

There’s a new CSS Language Feature coming to help us: Cascade Layers (CSS `@layer`).

[The Future of CSS: Cascade Layers (CSS @layer)](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/)

### Less Absolute Positioning with Modern CSS

How to use use position:absolute less by leveraging modern CSS

[Less Absolute Positioning With Modern CSS - Ahmad Shadeed](https://ishadeed.com/article/less-absolute-positioning-modern-css/)

---

## Some great videos I watched this week

### React Storybook Crash Course

Designing and testing components are crucial to every application, but it can be difficult to view components in isolation. This makes it hard to design and test components, but with Storybook this is no longer an issue. Storybook makes developing, testing and working with a component library so much easier. You can test complex actions and ensure your components are always working as expected.

{% youtube FUKpWgRyPlU %}

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

### CSS accent-color

It's a fun little thing. Or is it not really "little"? Dave says this is a massive improvement for design systems work where NOT having to re-create form components just for size and color changes is a big time saver.

{% youtube F17DzJYysWM %}

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

### Stop using @import with Sass

The use of `@import` has been deprecated in Sass for quite a while now, but a *lot* of people still use it. In this video, I take a quick look at the replacements you should be using instead, `@use` and `@forward`.

{% youtube CR-a8upNjJ0 %}

by [Kevin Powell](https://twitter.com/KevinJPowell)

### Springy Animated Modals

Create amazing animations in React with Framer Motion. In this tutorial, we build an interactive modal window from scratch and customize its spring animations

{% youtube SuqU904ZHA4 %}

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

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

Use DevTools in your preferred language, new Nest Hub devices, new CSS container queries badge and more.

{% youtube N9Jiou61WH4 %}

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

---

## Useful GitHub repositories

### Spotify TUI

A Spotify client for the terminal written in Rust.

{% github Rigellute/spotify-tui %}

### Stargazer

Your repo reached a stars milestone? Celebrate with a video of your stargazers!

{% github pomber/stargazer %}

### Restyle

A type-enforced system for building UI components in React Native with TypeScript.

{% github Shopify/restyle %}

### swc

swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript.

{% github swc-project/swc %}

---

## dribbble shots

### Surfing app concept

![https://cdn.dribbble.com/users/6337227/screenshots/16476321/media/ead508e57919ee3a27a0786175820a6f.png](https://cdn.dribbble.com/users/6337227/screenshots/16476321/media/ead508e57919ee3a27a0786175820a6f.png)

by [Sadhin Saleem](https://dribbble.com/shots/16476321-Surfing-app-concept)

### Bit Coin - Crypto Currency App

![https://cdn.dribbble.com/users/2969830/screenshots/16478674/media/27924e920befe7ae4ce37b48e6e7b20c.jpg](https://cdn.dribbble.com/users/2969830/screenshots/16478674/media/27924e920befe7ae4ce37b48e6e7b20c.jpg)

by [Syful Islam](https://dribbble.com/shots/16478674-Bit-Coin-Crypto-Currency-App)

### Banking App - Mobile Design Concept

![https://cdn.dribbble.com/users/7514969/screenshots/16477023/media/3f6e3dc3a7158fbf29d4e3dc2a645243.png](https://cdn.dribbble.com/users/7514969/screenshots/16477023/media/3f6e3dc3a7158fbf29d4e3dc2a645243.png)

by [Julius Branding](https://dribbble.com/shots/16477023-Banking-App-Mobile-Design-Concept)

---

## Tweets

{% twitter 1437393026180079621 %}

{% twitter 1438260259471122436 %}

{% twitter 1438417319831777283 %}

{% twitter 1438493119457103875 %}

{% twitter 1438754409979207685 %}

{% twitter 1438731403529703424 %}

---

## Picked Pens

### Focusss

{% codepen https://codepen.io/hakimel/pen/zYzdJvK %}

by [Hakim El Hattab](https://twitter.com/hakimel)

### Pokédex

{% codepen https://codepen.io/marcobiedermann/pen/ZEyxRmb %}

by [Marco Biedermann](https://twitter.com/BiedermannMarco)

---

## Podcasts worth listening

### Ladybug – Getting Started With Java

Java is a high-level, class-based, object-oriented programming language. It’s a general-purpose programming language designed to let app developers: write once, run anywhere. Today we’re diving into the world of Java.

{% spotify spotify:episode:13r6mzN0gn0BGbwKZSgOB3 %}

### The Changelog – Coding in the cloud with Codespaces

On this special edition of The Changelog, we’re talking with Cory Wilkerson, Senior Director of Engineering at GitHub, about GitHub Codespaces. For years now, the possibility of coding in the cloud seemed so close, yet so far away for a number of reasons. According to Cory, the raw ingredients to make coding in the cloud a reality has been there for years.

{% spotify spotify:episode:5iuVLJ52VTPWnIQE0LY7E6 %}

### Syntax – New to JavaScript — ES2022

In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it.

{% spotify spotify:episode:5D5AB0sANzSIHEWjk4gRi2 %}

---

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