Weekly Digest 38/2021
Tags: css, javascript, react, webdev
Published: 2021-09-26 17:11:24

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

### Systems for z-index

Say you have a z-index bug. Something is being covered up by something else. A typical solution is to put `position: relative` on the thing so z-index works in the first place.

[Systems for z-index](https://css-tricks.com/systems-for-z-index/)

### In Quest of Search

The idea is to create a semantic HTML element for the ARIA search role, which represents a landmark region “that contains a collection of items and objects that, as a whole, combine to create a search facility.”

[In Quest of Search](https://sarasoueidan.com/blog/in-quest-of-search/)

### Video optimization for the web simplified with ImageKit

Learn how you can resize and optimize video assets using ImageKit's URL-based video APIs.

[Video optimization for the web simplified with ImageKit | Codrops](https://tympanus.net/codrops/2021/09/21/video-optimization-for-the-web-simplified-with-imagekit/)

---

## Some great videos I watched this week

### Images are hard.

Putting an image on a website is pretty easy. Except that there is a massive checklist of things to do in order to do it right.

{% youtube 1w5uYEN49mQ %}

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

### How to view raw markdown files and permalink to code snippets

Did you know you can permanently link to any piece of code? This includes markdown files, but you'll need the raw version.

{% youtube vWZOHsirqNY %}

by [GitHub](https://twitter.com/github)

### New in Chrome 94

Chrome 94 is rolling out now! The default color space for canvas elements is now formally defined as sRBG, and you can change it to Display P3. There’s a new, low-level way to access built-in audio and video codecs, important for streaming games, video editors, and such.

{% youtube c5XIDt90VgY %}

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

### D3.js in 100 Seconds

Data-Driven Documents or D3 is a JavaScript library for drawing SVGs with data. It's the magic behind many of the graphs, charts, and other data visualizations you see on the web today.

{% youtube bp2GF8XcJdY %}

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

### petite-vue

Dave gives us a look at petite-vue, a special (and extra small) version of Vue that is designed to be used directly in the browser, requires no build step, and allows us to build pleasantly interactive apps very declaratively.

{% youtube N9Jiou61WH4 %}

[https://www.youtube.com/watch?v=MYJynMWJlFM](https://www.youtube.com/watch?v=MYJynMWJlFM)

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

---

## Useful GitHub repositories

### Awesome Guidelines

A curated list of high-quality coding style conventions and standards.

{% github Kristories/awesome-guidelines %}

### Miniflare

Fully-local simulator for Cloudflare Workers

{% github cloudflare/miniflare %}

---

## dribbble shots

### Clothing Store - Website Concept

![https://cdn.dribbble.com/users/4621751/screenshots/16527704/media/8330ea7e0d51bec6b11e36e6b3d85b48.jpg](https://cdn.dribbble.com/users/4621751/screenshots/16527704/media/8330ea7e0d51bec6b11e36e6b3d85b48.jpg)

by [Suzauddoula Bappy](https://dribbble.com/shots/16527704-Clothing-Store-Website-Concept)

### Relaxation App - Mobile Design

![https://cdn.dribbble.com/users/7514969/screenshots/16138413/media/105d865b95c978c3da01abcb1e70b55c.png](https://cdn.dribbble.com/users/7514969/screenshots/16138413/media/105d865b95c978c3da01abcb1e70b55c.png)

by [Julius Branding](https://dribbble.com/shots/16138413-Relaxation-App-Mobile-Design)

### 3D Weather Icons

![https://cdn.dribbble.com/users/1383138/screenshots/16526395/media/4a279d200e0ac448333f9cc10200d624.png](https://cdn.dribbble.com/users/1383138/screenshots/16526395/media/4a279d200e0ac448333f9cc10200d624.png)

by [Mikolaj](https://dribbble.com/shots/16526395-3D-Weather-Icons)

### Interior Plant Shop Landing Page

![https://cdn.dribbble.com/users/2048680/screenshots/16522956/media/25c6b9bdb5207e1067638cc4ddd58b11.png](https://cdn.dribbble.com/users/2048680/screenshots/16522956/media/25c6b9bdb5207e1067638cc4ddd58b11.png)

by [Saddam Hosen](https://dribbble.com/shots/16522956-Interior-Plant-Shop-Landing-Page)

---

## Tweets

{% twitter 1440284771968450581 %}

{% twitter 1441320724635873280 %}

{% twitter 1441378096096051200 %}

---

## Picked Pens

### HEXplorer

{% codepen https://codepen.io/robdimarzo/pen/xxZgKOR %}

by [Rob DiMarzo](https://twitter.com/robdimarzo)

### Feedback Reactions

{% codepen https://codepen.io/aaroniker/pen/qBjyKGO %}

by [Aaron Iker](https://twitter.com/aaroniker_me)

---

## Podcasts worth listening

### Syntax – Webhooks

In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is.

{% spotify spotify:episode:3Ym6RMEidIuLASs9QdoszU %}

### CodePen Radio – Custom Properties

Chris & Shaw talk about a big ol’ conversion to getting CodePen’s color system to use `--custom-properties` all the way through, rather than Sass variables.

{% spotify spotify:episode:0Pfr0Ji02YuJIdq8gGmJeg %}

### Syntax – From React To SvelteKit

In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!

{% spotify spotify:episode:07RFDpupU7tnKRS0vWgO6j %}

### Ladybug – All About Agile

The definition of Agile is the ability to create and respond to change. Ultimately dealing with and succeeding in an uncertain or turbulent environment.

{% spotify spotify:episode:2aujOMFpSocPhrPm6288bZ %}

---

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