Weekly Digest 03/2021
Tags: css, devtools, performance
Published: 2021-01-24 22:00:11

Welcome to my third weekly digest of this year.

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

---

## Interesting articles to read

### Publish, ship, and install modern JavaScript for faster applications

Modern JavaScript offers size and performance improvements over transpiled ES5, and is supported in 95% of web browsers. Enabling modern JavaScript output brings these benefits to your application, but the impact is limited by dependencies that are already transpiled to ES5. This guide demonstrates how to publish modern packages to npm, and how to install and optimally bundle modern JavaScript packages.

[Publish, ship, and install modern JavaScript for faster applications](https://web.dev/publish-modern-javascript/)

### CSS aspect-ratio

[https://css-tricks.com/new-in-chrome-88-aspect-ratio/](https://css-tricks.com/new-in-chrome-88-aspect-ratio/)

### How We Improved SmashingMag Performance

In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board.

[How We Improved SmashingMag Performance - Smashing Magazine](https://www.smashingmagazine.com/2021/01/smashingmag-performance-case-study/)

### Access control for GitHub Pages

GitHub Pages now gives you the option to limit access, making the site visible only to users with access to the repository that published the Page. With access control, you can use GitHub Pages to publish and share internal documentation and knowledge across your enterprise.

[Access control for GitHub Pages - GitHub Changelog](https://github.blog/changelog/2021-01-21-access-control-for-github-pages/)

### 13 JavaScript One-Liners That’ll Make You Look Like a Pro

In just a few minutes, strengthen your JS knowledge and improve your development skills using the 13 JavaScript one-liners.

[13 JavaScript One-Liners That'll Make You Look Like a Pro](https://medium.com/dailyjs/13-javascript-one-liners-thatll-make-you-look-like-a-pro-29a27b6f51cb)

---

## Some great videos I watched this week

### Transitioning to modern JavaScript

Over 90% of web traffic comes from browsers that support modern JavaScript, yet most websites ship legacy syntax in order to support a small number of very old browsers.

We now have the ability to deliver modern and legacy code to browsers based on what they support, but this doesn't extend to the large amount of dependency code in our applications. Our dependencies are still published as verbose legacy syntax in order to support the lowest common denominator of browsers today.

{% youtube cLxNdLK--yI %}

### Beyond fast with new performance features

A whirlwind tour of new features and proposals to improve the performance of your pages.

{% youtube Z6wjUOSh9Tk %}

### New in Chrome 88: Manifest v3, aspect-ratio, digital goods API, and more!

Chrome 88 is rolling out now! You can now upload extensions using manifest v 3 to the Chrome Web Store. The aspect-ratio CSS property makes it easy to set the aspect ratio on any element. You can now use Play Billing in your Trusted Web Activity, and there’s plenty more.

{% youtube cqAO2xR7lzM %}

---

## Useful GitHub repositories

### Act

![https://github.com/nektos/act/wiki/quickstart/act-quickstart-2.gif](https://github.com/nektos/act/wiki/quickstart/act-quickstart-2.gif)

Run your [GitHub Actions](https://developer.github.com/actions/) locally! Why would you want to do this? Two reasons:

- **Fast Feedback** - Rather than having to commit/push every time you want to test out the changes you are making to your `.github/workflows/` files (or for any changes to embedded GitHub actions), you can use `act` to run the actions locally. The [environment variables](https://help.github.com/en/actions/configuring-and-managing-workflows/using-environment-variables#default-environment-variables) and [filesystem](https://help.github.com/en/actions/reference/virtual-environments-for-github-hosted-runners#filesystems-on-github-hosted-runners) are all configured to match what GitHub provides.
- **Local Task Runner** - I love [make](https://en.wikipedia.org/wiki/Make_(software)). However, I also hate repeating myself. With `act`, you can use the GitHub Actions defined in your `.github/workflows/` to replace your `Makefile`!

{% github nektos/act %}

### Modern Data Engineer Roadmap

![https://github.com/datastacktv/data-engineer-roadmap/blob/master/img/title.png?raw=true](https://github.com/datastacktv/data-engineer-roadmap/blob/master/img/title.png?raw=true)

This roadmap aims to give a complete picture of the modern data engineering landscape and serve as a study guide for aspiring data engineers.

{% github datastacktv/data-engineer-roadmap %}

---

## dribbble shots

### Youtube Redesign concept - Dark theme

![https://cdn.dribbble.com/users/1006123/screenshots/14993502/media/f757108733585d82fd8f333644ad7228.png](https://cdn.dribbble.com/users/1006123/screenshots/14993502/media/f757108733585d82fd8f333644ad7228.png)

by Gura Nicholson

### spark: marketing page

![https://cdn.dribbble.com/users/774375/screenshots/14953088/media/c90a69d8a9a575ef94522385e7ecb034.png](https://cdn.dribbble.com/users/774375/screenshots/14953088/media/c90a69d8a9a575ef94522385e7ecb034.png)

by Vladimir Gruev

### File Sharing iOS App Concept

![https://cdn.dribbble.com/users/2125046/screenshots/6734571/file_sharing_2x_4x.png](https://cdn.dribbble.com/users/2125046/screenshots/6734571/file_sharing_2x_4x.png)

by Ofspace Digital Agency

### Patchwork - Dark mode

![https://cdn.dribbble.com/users/21260/screenshots/14990828/media/b307dcd1b6054d6f139d004777c506e4.png](https://cdn.dribbble.com/users/21260/screenshots/14990828/media/b307dcd1b6054d6f139d004777c506e4.png)

---

## Tweets

{% twitter 1350938459251372034 %}

{% twitter 1351153933880877057 %}

{% twitter 1351508495452024832 %}

{% twitter 1351740905821069312 %}

{% twitter 1352527134112141316 %}

{% twitter 1352617502367481857 %}

---

## Picked Pens

### Webcam x Dices 📹🎲

{% codepen https://codepen.io/Mamboleoo/pen/abmMwPM %}

### Snowflake

{% codepen https://codepen.io/strangerintheq/pen/eYdZPNy %}

### React Color Gradients

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

---

Talk to you next week and stay safe! 👋