🧢 Stefan's Web Weekly #8
Tags: webdev
Published: 2021-02-28 22:34:10

---
title: 🧢 Stefan's Web Weekly #8
published: true
description: The problem with open source maintenance, React performance optimisations and JavaScript performance measurements.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-8/
series: Web Weekly
---

## Welcome to Web Weekly #8

Berlin is slowly entering spring (finally!), and I've been all hands on deck preparing [a workshop for GatsbyConf](https://gatsbyconf.com/event/build-and-set-up-your-private-instagram-using-contentful-and-gatsby/). Come and say "Hi", it's free. 🙈

This week's Web Weekly includes the problem with open source maintenance, React performance optimisations, JavaScript performance measurements, and, as always, GitHub repositories, new Tiny Helpers and some music.

Ready? Go, go, go!

## The burden of open source

![Tweet from Álvaro Trigo: Revealing the dark side of open source projects](//images.ctfassets.net/f20lfrunubsq/4XISEdzSA7xbyDXZr9zKOC/a9559eeb325f440aac589469ef02b750/Screenshot_2021-02-28_at_19.40.36.png)

Álvaro Trigo shared why successful open source projects are mainly baked by large cooperations. He calls it the "The maintenance dilemma". His Twitter thread is a good reminder that one should be kind when filing issues or proposing PRs on GitHub. Open source maintainers offer free work and don't owe someone anything.

👉 <a class="btn btn__small" href="https://twitter.com/IMAC2/status/1363884529149218820">Learn about the maintenance dilemma</a>

## Cache your CORS

![Article screenshot: Each of these requests blocks your real request for at least the round-trip time to your server. OPTIONS requests aren't cacheable by default, so your CDN won't usually handle them, and this will have to hit your server every time.](//images.ctfassets.net/f20lfrunubsq/2srB8FA9m3eszxNYLqULwJ/b37fa6a4f3666bc9c793745829c7a78a/Screenshot_2021-02-28_at_19.46.09.png)

Let's come to Frontend Developers' favourite topic: CORS requests (
Cross-Origin Resource Sharing). Tim Perry, who runs [HTTP toolkit](https://httptoolkit.tech/), explained what CORS and pre-flight requests are and shared how you can cache the OPTIONS request responses in multiple programming languages.

👉 <a class="btn btn__small" href="https://httptoolkit.tech/blog/cache-your-cors/">Start caching the pre-flight responses</a>

## Is `useMemo` always the best way to improve React performance?

![Article screenshot: These techniques are complementary to what you already know! They don’t replace memo or useMemo, but they’re often good to try first.](//images.ctfassets.net/f20lfrunubsq/35OqKfk0B7zXE30ALOe1tI/48fc7f11d75085ac045a72fdae8147bd/Screenshot_2021-02-28_at_19.52.07.png)

I'm not working on large-scale React applications, but I see that developers struggle with unnecessary component rendering. To much rendering harms performance. Common React methods to limit rendering are `memo` or `useMemo`. But there are other ways, too. Dan Abramov shared ways to improve performance by restructuring your components.

👉 <a class="btn btn__small" href="https://overreacted.io/before-you-memo/">Avoid unnecessary rendering</a>

## How to communicate that you're feeling burned out

![Article screenshot: If you’re feeling the symptoms of burnout, it’s important that you take them seriously — don’t assume they’re temporary and will go away in time. ](//images.ctfassets.net/f20lfrunubsq/1ITbr2xR4fE5p0AnrmmSwT/ff220c0c032f9c20a902a6f0855a139e/Screenshot_2021-02-28_at_20.00.04.png)

We're all isolated for a long time now in Germany, and there's no end in near sight. If you're struggling with work and have the feeling of being burned out, Ron Carucci shared some excellent advice in his article "How to Tell Your Boss You’re Burned Out".

👉 <a class="btn btn__small" href="https://hbr.org/2021/01/how-to-tell-your-boss-youre-burned-out">Learn more about burnout</a>

## For the people living in Jira Kanban boards...

![Screenshot of the Jira macOS app](//images.ctfassets.net/f20lfrunubsq/2MKgcbWxnU0UrVLqQmXsuI/0cffcffadb0852ef7ac3446faf0f302e/Screenshot_2021-02-28_at_20.08.50.png)

We use Jira in my team to organise our workload. And while I never thought the in-browser web experience of Jira is terrible (and I'm all in for apps running in the browser), I learned that there's a Jira Mac app. And It's very good!

👉 <a class="btn btn__small" href="https://apps.apple.com/de/app/jira-cloud-by-atlassian/id1475897096">Give the native Jira app a try</a>

## CSS animations on scroll

![Source code: @scroll-timeline progress-timeline { time-range: 1s; }](//images.ctfassets.net/f20lfrunubsq/321IA125E4ib7XrR5am61I/d76cc70cb16f152e5042377081eb8fae/Screenshot_2021-02-28_at_21.26.41.png)

CSS is getting a new feature: scroll-depending animations. You can use these new features to render progress bars or the hated/loved parallax effect. Bramus Van Damme published an extensive tutorial with impressive examples. 

**Side note:** You should follow Bramus; his blog and included RSS feed are fantastic.

👉 <a class="btn btn__small" href="https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/">Start animating on scroll</a>

## How to display language-specific quotes in CSS

![DevSheet explaining how to display language-specific quotes in CSS](//images.ctfassets.net/f20lfrunubsq/46h9LsZr7etxe8xFUtXbtf/678fb3f40bd70fe4fb59208eaf6dde49/Screenshot_2021-02-28_at_20.13.35.png)

This week I learned that CSS provides language-specific quotes! [I posted a quick #devsheet on Twitter](https://twitter.com/stefanjudis/status/1365051202464055302?s=20) and also published a TIL post (today I learned) about it.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/">Learn more about quotes in CSS</a>

## JavaScript performance beyond bundle size

![That’s not to say that bundle size isn’t important! Just like how you might have left your keys in the streetlight. And heck, you might as well check there first, since it’s the quickest place to look. But here are some other things that are harder to measure, but can be just as important: Parse/compile time, Execution time, Power usage, Memory usage, and Disk usage](//images.ctfassets.net/f20lfrunubsq/5ROnVAyRsIgPcgrNW9brkn/aa506a9a2eb2e82cc7c35f1b50ab197c/Screenshot_2021-02-28_at_12.37.37.png)

Nolan Lawson published an extensive overview of JavaScript performance measurements beyond the commonly used bundle size metric. If you're building JavaScript apps, this article is for you.

👉 <a class="btn btn__small" href="https://nolanlawson.com/2021/02/23/javascript-performance-beyond-bundle-size/">Measure beyond bundle size</a>

## Total Cookie Protection in the new Firefox

![Graphic explaining Firefox' new cookie partitioning](//images.ctfassets.net/f20lfrunubsq/4agFNiecCfSrvSIS9TR05e/5c457ab2a37eed5e17bd1077bd89cebd/Screenshot_2021-02-28_at_21.39.36.png)

A while ago, [I wrote about Chrome changing its overall caching behaviour](https://www.stefanjudis.com/notes/say-goodbye-to-resource-caching-across-sites-and-domains/). This change led to the fact that resources loaded from a CDN are not shared across sites anymore. As part of the privacy-focused feature "Total Cookie Protection" Mozilla is rolling out something similar, but for cookies. 😲 That's a pretty big deal.

👉 <a class="btn btn__small" href="https://hacks.mozilla.org/2021/02/introducing-state-partitioning/">Learn about Firefox' new cookie behaviour</a>

## Share what you use

![/uses – A list of /uses pages detailing developer setups, gear, software and configs.](//images.ctfassets.net/f20lfrunubsq/1tNfe5tJ4qwxZKwAnjOMiY/73d2576984df86b37139ec4852ee9d26/Screenshot_2021-02-28_at_21.51.27.png)

[A year ago](https://www.stefanjudis.com/blog/monthly-digest-march-2020/), I shared the website [uses.tech](https://uses.tech/). It lists developers that share their setup under a `/uses` URL. If you're curious about what I use, I updated my setup list a few weeks ago. 

**If you document your setup online, let me know by replying to this email.** I would love to include some setups next week!

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/uses/">Check my setup</a>

## DJ'ing is not "just" putting samples together

![Visualisation of a sample break down](//images.ctfassets.net/f20lfrunubsq/54rgc75rIvrpshw4QHi7eq/b9ff188c6489c743df6a3a0b80a75b5c/Screenshot_2021-02-28_at_21.53.13.png)

It's been a sad week because the legendary duo Daft Punk announced that they're breaking up. They made music for 28 years(!). This event led to lots of social media buzz around them, and I discovered a YouTube playlist that visualises how top hits such as "One more time" were composed using music samples. It's impressive and incredibly creative!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=5QwOpRh-IfI&list=PLmsQco5tySyz-21X81egPr78XLUdJ57uk&index=34">Be amazed by some samples</a>

## New tiny helpers

![Screenshot os dpilove, avif.io and bigtimer.net](//images.ctfassets.net/f20lfrunubsq/62Z3eHUw4XX8HqqPuq3F4h/a284d2c62785ad3184868e1964daf6f8/Screenshot_2021-02-28_at_22.34.38.png)

- [avif.io](https://avif.io/) – Convert any images to AVIF for free.
- [dpilove](https://dpi.lv) – Find out about your screens resolution.
- [Big Timer](https://www.bigtimer.net) – Set a big timer for your meeting.

## Three useful projects to have a look at 

- [steveruizok/perfect-freehand](https://github.com/steveruizok/perfect-freehand) –  Draw perfect freehand lines.
- [malgamves/CommunityWriterPrograms](https://github.com/malgamves/CommunityWriterPrograms) – A list of Developer Community Writer Programs.
- [cezaraugusto/extension-create](https://github.com/cezaraugusto/extension-create) – Create modern cross-browser extensions with no build configuration. 

## A quote to think about

[Daryl Ginn shared some wisdom on Twitter](https://twitter.com/darylginn/status/1361196412835422208). Short and sweet! And yet it's very true that how we react to situations is incredibly important.

> Life is 10% what happens to you and 90% how you react to it.

## A song that makes you stop coding

![Screenshot of Moderat video](//images.ctfassets.net/f20lfrunubsq/3XvNDDOdFoNnX8cWkNx5vZ/5e5136fb7ecd0d2c6ccfc6138bfdbe9b/Screenshot_2021-02-28_at_22.41.28.png)

I might have chosen Moderat in the past. 🙈 The Berlin-based trio combines strong and noisy electro beats with wonderful vocals. "Bad Kingdom" matched my mood this week perfectly. Give it a listen, it's epic!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=I1gewNVv1UY">Listen to Moderat</a>

---

And that's a wrap for the eighth Web Weekly! 🎉

Writing this newsletter takes me three hours every Sunday. If you enjoyed this edition, [a quick share means the world to me](https://twitter.com/intent/tweet?text=I%20like%20@stefanjudis%20weekly%20newsletter&url=https://www.stefanjudis.com/blog/web-weekly-8/) and [you can subscribe on my site](https://www.stefanjudis.com/newsletter/), too. ♥️

**Stay safe, and I'll talk to you next week!** 🎉 👋

PS. I heard the cool kids use RSS. You can find [multiple feeds on my site](https://www.stefanjudis.com/feeds/).