Weekly Digest 45/2021
Tags: css, javascript, react, webdev
Published: 2021-11-14 15:19:11

Welcome to my Weekly Digest #45.

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

### Rust Is The Future of JavaScript Infrastructure

Why is Rust being used to replace parts of the JavaScript web ecosystem like minification (Terser), transpilation (Babel), formatting (Prettier), bundling (webpack), linting (ESLint), and more?

[Rust Is The Future of JavaScript Infrastructure - Lee Robinson](https://leerob.io/blog/rust)

### The Golden Ratio and User-Interface Design

Although traditionally used in art and architecture, the golden ratio can be referenced to design aesthetically pleasing interfaces.

[The Golden Ratio and User-Interface Design](https://www.nngroup.com/articles/golden-ratio-ui-design/)

### Interactive Rebase: Clean up your Commit History

Interactive Rebase is the Swiss Army knife of Git commands: lots of use cases and lots of possibilities!

[Interactive Rebase: Clean up your Commit History](https://css-tricks.com/interactive-rebase-clean-up-your-commit-history/)

---

## Some great videos I watched this week

### Cleaning Up Copilot Code

GitHub Copilot is a great helper, but you it's just the copilot. Let's take the pilot's chair and turn some not-so-great Copilot code and turn it into high-quality production-ready TypeScript code.

{% youtube yo87SLp4jOo %}

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

### Knobs!

Yair Even Or has a neat project called [Knobs](https://github.com/yairEO/knobs) that adds UI controls that adjust CSS Custom Properties instantly any way you need them to. There is more to the project than that, but that's how we use them here to control some generative art.

{% youtube 09qdFxIlT7o %}

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

### Webpack alternative: ESBuild

{% youtube bKPelKsc4e4 %}

by [Clem Tech](https://twitter.com/clem__tech)

### Shopify built a JS Framework

Shopify just announced a React-based JavaScript framework called Hydrogen. It is similar to Next.js but has extra features for e-commerce and data fetching with GraphQL.

{% youtube mAsM9c2sGjA %}

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

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

New CSS Overview panel, emulate CSS prefers-contrast media and Chrome’s auto dark mode, and more.

{% youtube 3CXbhnaFNEw %}

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

---

## Useful GitHub repositories

### **Fantasy Map Generator**

Fantasy Map Generator is a free web application generating interactive and highly customizable svg maps based on voronoi diagram.

{% github Azgaar/Fantasy-Map-Generator %}

### GitHub Pages Deploy Action

This [GitHub Action](https://github.com/features/actions) will automatically deploy your project to [GitHub Pages](https://pages.github.com/). It can be configured to push your production-ready code into any branch you'd like, including gh-pages and docs.

{% github JamesIves/github-pages-deploy-action %}

### quicktype

quicktype generates strongly-typed models and serializers from JSON, JSON Schema, TypeScript, and [GraphQL queries](https://blog.quicktype.io/graphql-with-quicktype/), making it a breeze to work with JSON type-safely in many programming languages.

{% github quicktype/quicktype %}

---

## dribbble shots

### **Money transfer app mock-ups**

![by [Prakhar Neel Sharma](https://dribbble.com/shots/16836057-Money-transfer-app-mock-ups)](https://cdn.dribbble.com/users/452635/screenshots/16836057/media/d33c7641c81e6306f05e85d14f94b759.png)

by [Prakhar Neel Sharma](https://dribbble.com/shots/16836057-Money-transfer-app-mock-ups)

### Cinely Streaming Real Project

![by [Arshia Amin Javahery](https://dribbble.com/shots/16852940-Cinely-Streaming-Real-Project)](https://cdn.dribbble.com/users/3798578/screenshots/16852940/media/9b4731c263f509d131bceba271bd85d1.png)

by [Arshia Amin Javahery](https://dribbble.com/shots/16852940-Cinely-Streaming-Real-Project)

### Fitness App UI Exploration

![by [Saber Ali](https://dribbble.com/shots/16851920-Fitness-App-UI-Exploration)](https://cdn.dribbble.com/users/4554958/screenshots/16851920/media/865512ec547967d1494e318196a8472f.jpg)

by [Saber Ali](https://dribbble.com/shots/16851920-Fitness-App-UI-Exploration)

---

## Tweets

{% twitter 1457281480556781568 %}

{% twitter 1457987203745918978 %}

{% twitter 1458916318359564302 %}

{% twitter 1459221197283999745 %}

---

## Picked Pens

### Paper plane

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

by [Temani Afif](https://twitter.com/ChallengesCss)

### Generative Bauhaus Grid Patterns

{% codepen https://codepen.io/georgedoescode/pen/qBXYama %}

by [George Francis](https://twitter.com/georgedoescode)

### Diagonal Page Transitions

{% codepen https://codepen.io/chriscoyier/pen/oNePEyW %}

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

---

## Podcasts worth listening

### CodePen Radio – Challenges

Marie and Chris talk about [CodePen Challenges](https://codepen.io/challenges), which have been going strong for many years now.

{% spotify spotify:episode:2ojSbQxh7gdMyVhVZw8YLl %}

### Call with Kent – Learning Gaps & Cluelessness as a Developer

Hello Kent, I learnt software development in a self-taught path and I really didn't do a good job because when I hear words like Serverless and others, I don't have the first clue what they are talking about.

{% spotify spotify:episode:5G19fwX5J39Lymrlm2PqXf %}

### Syntax – Web Containers, StackBlitz, and Node.js in the Browser

In this episode of Syntax, Scott and Wes talk with Tomek Sulkowski about web containers, StackBlitz and more!

{% spotify spotify:episode:6Rm9SmYVe9mdLpF5Ru8XUP %}

---

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