Weekly Digest 04/2022
Tags: javascript, webdev, css, react
Published: 2022-01-30 18:27:39

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

### Fancy CSS Borders Using Masks

In this article, we look at modern CSS mask techniques to create three fancy CSS borders without having to use a background image.

[Fancy CSS Borders Using Masks | CSS-Tricks](https://css-tricks.com/css-borders-using-masks/)

### Make Free Stuff

On web3, Wordle and the radical concept of building things for free.

[Make Free Stuff](https://mxb.dev/blog/make-free-stuff/)

### Frontend Predictions for 2022

Thoughts on what we might see in the coming year, including the return of micro-frontends, functional JavaScript & the demise of the Jamstack as we know it.

[Frontend Predictions for 2022 | Jay Freestone](https://www.jayfreestone.com/writing/frontend-predictions-2022/)

---

## Some great videos I watched this week

### Prisma in 100 Seconds

Prisma is an open-source ORM that makes it fun and safe to work with a database like MySQL, Postgres, SQL Server, or MongoDB. It generates a type-safe client library to provide an awesome DX in any Node.js or JavaScript project.

{% youtube rLRIB6AF2Dg %}

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

### Remix Single: Optimistic UI

Instead of adding pending states and busy indicators while we wait for the server to process a mutation, we already know what the UI will look like when it's done. Skip the spinners with Optimistic UI!

{% youtube EdB_nj01C80 %}

by [Remix](https://twitter.com/remix_run)

### VSCode Log Points

A great feature of VScode is its log points. You can use these to essentially stop polluting your code with `console.log` statement.

{% youtube 7g7ftm2v71Y %}

by [Basarat](https://twitter.com/basarat)

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

Full-page Accessibility tree, more precise changes in the Changes tab, and more.

{% youtube YqkIS88VulM %}

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

### An HTML Select element that is... actually styleable.

Select menus, like literally the `select` native HTML elements, are notoriously unstyleable. In the last few years, it's become tenable to style the *outside* of the menus, even with just CSS alone, making them sit nicely in design systems without too much trouble.

{% youtube Jgl5mcXerNo %}

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

---

## Useful GitHub repositories

### docs.page

Instant Open Source docs with zero configuration.

{% github invertase/docs.page %}

### tldraw

A tiny little drawing app.

{% github tldraw/tldraw %}

---

## dribbble shots

### Vimon application

![by [Abo](https://dribbble.com/shots/17387848-Vimon-application)](https://cdn.dribbble.com/users/2886970/screenshots/17387848/media/a0f746b1571bd06d9d9583b521c69079.png)

by [Abo](https://dribbble.com/shots/17387848-Vimon-application)

### Rideshare Mobile App

![by [Samon Ahmed](https://dribbble.com/shots/17388305-Rideshare-Mobile-App)](https://cdn.dribbble.com/users/10495245/screenshots/17388305/media/e39a1e325e1309e0e3dc330afd880287.png)

by [Samon Ahmed](https://dribbble.com/shots/17388305-Rideshare-Mobile-App)

### E-commerce mobile app onboarding

![by [ashiouzzaman.ux](https://dribbble.com/shots/17383897-E-commerce-mobile-app-onboarding)](https://cdn.dribbble.com/users/6025371/screenshots/17383897/media/92998c17201263cc9e45b710a4068eca.png)

by [ashiouzzaman.ux](https://dribbble.com/shots/17383897-E-commerce-mobile-app-onboarding)

### Music Player App

![by [Achmad Qomarudin](https://dribbble.com/shots/17387992-Music-Player-App)](https://cdn.dribbble.com/users/4179218/screenshots/17387992/media/61693be1f93194a047ae5ee57956da75.png)

by [Achmad Qomarudin](https://dribbble.com/shots/17387992-Music-Player-App)

---

## Tweets

{% twitter 1485032913355739139 %}

{% twitter 1485692591484157952 %}

{% twitter 1487689861268000769 %}

## Picked Pens

### 3D Futuristic Room

{% codepen https://codepen.io/ricardoolivaalonso/pen/LYzwGyW %}

by [Ricardo Oliva Alonso](https://twitter.com/rolivaalonso)

### Generative growing plants

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

by [Louis Hoebregts](https://twitter.com/Mamboleoo)

### Hawaii Mountains

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

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

---

## Podcasts worth listening

### CodePen Radio – **With Aysenur Turk**

[Aysenur Turk](https://codepen.io/TurkAysenur) had a number of appearances on [this year’s Top Hearted of 2021](https://codepen.io/2021/popular/pens), including [#1](https://codepen.io/TurkAysenur/pen/ZEpxeYm)! In this podcast, I get to catch up with her, find out where she gets ideas and inspiration, how much time it takes to build something like her amazing layouts, and what her favorites are.

{% spotify spotify:episode:4r6dOL6BNydgatv1HLAEKO %}

### Syntax – Monorepos! Workspaces, pnpm, turborepo + more!

In this episode of Syntax, Scott and Wes talk all about monorepos - the why's and the how's of using them on your projects.

{% spotify spotify:episode:1RVUqsgYHPFtyoQkZdznGW %}

---

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