Weekly Digest 47/2021
Tags: css, javascript, webdev, react
Published: 2021-11-28 18:46:40

Welcome to my Weekly Digest #47.

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

### **Dynamic Color Manipulation with CSS Relative Colors**

CSS relative colors enable the dynamic color manipulation in vanilla CSS since Sass’ color functions first came on the scene.

[Dynamic Color Manipulation with CSS Relative Colors](https://blog.jim-nielsen.com/2021/css-relative-colors/)

### **Continue, Step Over, Step Into and Step Out actions in Visual Studio Code debugger explained**

Printing the result of your program to the console is a common practice, but being familiar with a debugger opens a new world of possibilities. To use the debugger with confidence, you need to understand the basic actions.

[Continue, Step Over, Step Into and Step Out actions in Visual Studio Code debugger explained | pawelgrzybek.com](https://pawelgrzybek.com/continue-step-over-step-into-and-step-out-actions-in-visual-studio-code-debugger-explained/)

### **How to build stunning 3D scenes with React Three Fiber**

WebGL is the magic sauce behind [Solar Storm](https://solarstorm.netlify.app/) , an audio-reactive music video that renders live in the browser.

[How to build stunning 3D scenes with React Three Fiber](https://varun.ca/modular-webgl/)

---

## Some great videos I watched this week

### Swift in 100 Seconds

Swift is a modern programming language developed by Apple. It is commonly used to code apps for iOS and macOS, but is open-source and can be used outside of Apple’s walled garden.

{% youtube nAchMctX4YA %}

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

### Remix is a new JavaScript framework you must try

Remix is a new React-based JavaScript framework that supports server-side rendering. It comes from the team behind React Router and provides a fresh take on full-stack web app development.

{% youtube r4B69HAOXnA %}

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

### Remix Run Speedrun - Pokemon

Is Remix Run more than just hype? Let’s find out by building out a multi-page Pokemon SPA to show you a bunch of the fundamentals: SSR data loading, Navigation, API Routes, page routes and parameters, and more.

{% youtube rgZkd-RAYfE %}

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

---

## Useful GitHub repositories

### **html2canvas**

The script allows you to take "screenshots" of webpages or parts of it, directly on the user's browser.

{% github niklasvh/html2canvas %}

### Machine Learning for Beginners - A Curriculum

12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all

{% github microsoft/ML-For-Beginners %}

### @mswjs/data

Data modeling and relation library for testing JavaScript applications.

{% github mswjs/data %}

---

## dribbble shots

### **Food Delivery service app**

![by [Md Sakib](https://dribbble.com/shots/16950838-Food-Delivery-service-app-Food-search-Order-process)](https://cdn.dribbble.com/users/600809/screenshots/16950838/media/5e46e7a599ad3a97357caee93241dfb6.png)

by [Md Sakib](https://dribbble.com/shots/16950838-Food-Delivery-service-app-Food-search-Order-process)

### **NFT Marketplace**

![by [Shaharia Hossen](https://dribbble.com/shots/16951108-NFT-Marketplace-Mobile-App)](https://cdn.dribbble.com/users/4458653/screenshots/16951108/media/c8d2acca8766785e24005a0bc940efe3.png)

by [Shaharia Hossen](https://dribbble.com/shots/16951108-NFT-Marketplace-Mobile-App)

### **StreetArt ___ Berlin**

![by [Sally Kutarashvili](https://dribbble.com/shots/16953019-StreetArt-Berlin)](https://cdn.dribbble.com/users/2514863/screenshots/16953019/media/12b4a8670590f80c8307aa8db3d4d4a0.png)

by [Sally Kutarashvili](https://dribbble.com/shots/16953019-StreetArt-Berlin)

---

## Tweets

{% twitter 1462069218451542017 %}

{% twitter 1463556704436637707 %}

{% twitter 1464016279673704456 %}

{% twitter 1464233231247716353 %}

---

## Picked Pens

### Harry potter challenge

{% codepen https://codepen.io/t_afif/pen/PoKgzmG %}

by [CSS Challenges](https://twitter.com/ChallengesCss)

### Ring of Balls

{% codepen https://codepen.io/amit_sheen/pen/yLzBgaN %}

by [Amit Sheen](https://twitter.com/amit_sheen)

---

## Podcasts worth listening

### CodePen Radio – **cpshots**

We’ve been doing our own screenshotting for a long time now, but like all software, we’re always working on it for various ever-changing reasons.

{% spotify spotify:episode:6XzBvoA0rU8RpccJMw0X0i %}

### Syntax – Troubleshooting

In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code.

{% spotify spotify:episode:16OqVYFo9BlHfRLwnOPdwF %}

---

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