This month in WebDev – Stefan's monthly digest
Tags: webdev, css, javascript
Published: 2020-09-04 08:47:46

---
title: This month in WebDev – Stefan's monthly digest
published: true
description: A monthly web development newsletter
tags: webdev, css, javascript
canonical_url: https://www.stefanjudis.com/blog/monthly-digest-august-2020/
---

Hello friends!

I'm about to wrap up the week for a two-week vacation, and I can't wait to hang out in a cabin in Denmark. Apart from that, I finally made it to finish my website rebuild with Eleventy. And I'm so happy about it. [I tweeted some details about it](https://twitter.com/stefanjudis/status/1300152050429423618) if you want to learn more. Let's dive into some web stuff, shall we?

## A web-vitals custom element

If you haven't played around with [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), you should have a look. They're like jQuery plugins without jQuery. To implement web performance metrics in my rebuilt site, I wrote [a quick web-vitals element](https://github.com/stefanjudis/web-vitals-element). Load it from unpgk.com, place it in your pages and start showing web performance metrics.

![Web-vitals-element example](//images.ctfassets.net/f20lfrunubsq/1bf1gs9PE9Ww3UpEabDwba/48c5e02ed625955ff0d1b2f170759ff8/Screenshot_2020-08-30_at_18.52.50.png)

## CORS, CORS, CORS!

[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is every developer's favorite subject (not). Even after all these years, CORS is (are?) a hurdle for me. [✋🏼🔥 CS Visualized: CORS](https://dev.to/lydiahallie/cs-visualized-cors-5b8h), written by [Lydia Hallie](https://twitter.com/lydiahallie), is an outstanding article on the topic. It includes many animated explanations, and I don't want to know how long this article took to create.

## Three excellent articles to read

- [Why CSS Logical Properties Aren’t Ready for Use!](https://medium.com/@elad/why-css-logical-properties-arent-ready-for-use-c102925a5cba) by [Elad Shechter](https://twitter.com/eladsc)
- [Comparing Data in Google and Netlify Analytics](https://blog.jim-nielsen.com/2020/google-vs-netlify-analytics/) by [Jim Nielsen](https://twitter.com/jimniels)
- [My favourite Visual Studio Code tips for "how did you do it" kind of people](https://pawelgrzybek.com/my-favourite-visual-studio-code-tips-for-how-did-you-do-it-kind-of-people/) by [Paweł Grzybek](https://twitter.com/pawelgrzybek)

## Three useful projects to have a look at

- [sindresorhus / terminal-image-cli](https://github.com/sindresorhus/terminal-image-cli) – Display images in the terminal 
- [denisidoro / navi](https://github.com/denisidoro/navi) – An interactive cheatsheet tool for the command-line and application launchers
- [tldr-pages / tldr](https://github.com/tldr-pages/tldr) – Collaborative cheatsheets for console commands 

## This month I learned

- [The navigation timing API includes the type of the current navigation](https://www.stefanjudis.com/today-i-learned/the-navigation-timing-api-and-the-type-of-the-current-navigation/)
- [Elements with `overflow: hidden` are scrollable](https://www.stefanjudis.com/today-i-learned/elements-with-overflow-hidden-are-scrollable/)
- [Define where an element should be scrolled to using `elem.scrollIntoView`](https://www.stefanjudis.com/today-i-learned/define-where-an-element-should-be-scrolled-to-using-elem-scrollintoview/)

You can find more learnings (128 in total 😎) in [my "Today I learned" section](https://www.stefanjudis.com/today-i-learned/).

## This month's devsheets

- [Revive and replace in JSON](https://twitter.com/stefanjudis/status/1294176082288152581)
- [The flexible `flex` shorthand property](https://twitter.com/stefanjudis/status/1295264088046608386)
- [Unicode property escapes](https://twitter.com/stefanjudis/status/1295628498305003520)
- [`inputmode` on input elements](https://twitter.com/stefanjudis/status/1296749635290234882)
- [Logical CSS properties](https://twitter.com/stefanjudis/status/1298150969398763520)
- [`ParentNode.replaceChilredn` in JavaScript](https://twitter.com/stefanjudis/status/1298524610917543936)
- [Nested destructuring in Javascript](https://twitter.com/stefanjudis/status/1301498650112204801)

You can find [more #devsheets on Twitter](https://twitter.com/search?q=%23devsheets).

## A talk to watch

Over the last month, I spent a lot of time with GraphQL, and I'm sold! While I'm still figuring out best practices [Sasha Solomon](https://twitter.com/sachee)'s talk ["200 OK! Error Handling in GraphQL"](https://www.youtube.com/watch?v=RDNTP66oY2o) made some core principles "click" for me. I highly recommend it!

![Cover "200 OK! Error Handling in GraphQL"](//images.ctfassets.net/f20lfrunubsq/5agRepr9KLnhPO8B3E5wUH/dbf5ee7b420d186404f9a6a6bc4a3260/Screenshot_2020-09-03_at_17.22.59.png)

## A quote to think about

> The best JavaScript coding style is to have no style.

A particular coding style used to be very important to me. In total, I must have spent hours (if not days) adding and removing spaces. Luckily we're over that and I couldn't agree more with [Nick DeJesus](https://twitter.com/Dayhaysoos/status/1292826164587896832).

## A song that makes you stop coding

![Time of your live video snapshot](//images.ctfassets.net/f20lfrunubsq/7jww9qYJQiC4c7BoG1Rcsh/c8766c06fa89f8ae20a924bf49c4e0bb/Screenshot_2020-09-03_at_16.50.21.png)

Green Day's ["Time of your life"](https://www.youtube.com/watch?v=CnQ8N1KacJc) made me time travel when it came on the radio. The video is from 2009. Oh my... time flies.

---

And that's my favorite content of August 2020, friends! 🎉 👋

Have a great September, and stay safe!

If you want to subscribe you can do so on [my site](https://www.stefanjudis.com) and if you have any feedback about this newsletter, [please let me know](mailto:stefanjudis@gmail.com).