Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Happy Monday, friends!

It's Web Weekly time and a special welcome to the 18 new subscribers! I'm super excited to have you around! πŸ‘‹

Today you'll learn about:

  • mistakes when writing async JavaScript
  • the inert HTML attribute
  • the :has() CSS selector

... and, as always, GitHub repositories, a new Tiny Helper and some music.

On a personal note

Last week I said that I wanted to switch to sending this newsletter with an automated schedule. It should hit your inbox Mondays at 8 AM CET.

Well yeah... That didn't work out, but I'll try it again next week!

Apart from that, I'm trying to get some official grownup things done, and it's been challenging. For the folks not living in Berlin, getting appointments at the city service are a real challenge here.

It goes so far that the city places console.log messages on its website. πŸ™ˆ

Welcome to the ZMS frontend =========================== Dear Developer, please respect the following rules: * Do not DOS our site, keep requests frequency low * Do not use an UserAgent without contact-informations for your automated requests * Do not try to excel other people with less coding skills on getting better appointments * For Bots: Respect the robots.txt

But YOLO, a friend gave me an automation script which I'll kick off right after sending this newsletter!

Something that made me smile this week

TikTok video with the headline "How to pick up a duck"

This manual for "everyday situations" is just so random. πŸ˜†

Pick up a duck

How to avoid async JS mistakes

14 Linting rules to help you write asynchronous code in JavaScript

Programming is complicated enough, and JavaScript's asynchronous nature doesn't make it any easier. Maxim collected some great ESLint rules to not shoot yourself in the foot.

After reading the post, I went into the rabbit hole of atomic updates and discovered that I've never considered this race condition.

Write better async JS

@scroll-timeline

@scroll-timeline scroll-in-document-timeline {   source: auto;   orientation: vertical;   scroll-offsets: 0%, 100%; }

@scroll-timeline isn't supported anywhere yet. It only works in Firefox after turning on the layout.css.scroll-linked-animations.enabled flag.

Nevertheless, I reread Bramus' tutorial on the topic, and CSS-only scroll animations are such a valuable feature. I probably should implement something using it on my blog.

(It wouldn't be the only Firefox-only feature.)

Get excited about CSS-only scroll animations

Figure out if a company is the best fit for you

12 questions to get a sense of what a tech company is like to work at, based on things most job postings do not mention.

I hadn't heard of the company "Fast" but read Gergely's article on its collapse. It looks like the usual story of a company burning loads of VC cash "just to discover" that the business isn't healthy. Many folks lost their jobs without warning; it's a sad read.

So how do you avoid ending up at such a company? Gergely also shared a list of questions that help you with the company/engineering culture evaluation.

Ask better interview questions

The "Devs for Ukraine" online conference

Devs for Ukraine – April 25&26

Short'n'sweet. πŸ‘‡

Devs For Ukraine is a free, online engineering conference to raise funds and provide support to Ukraine. πŸ‡ΊπŸ‡¦

The lineup is solid, and it's for a good cause! πŸ’™πŸ’›

Provide support to Ukraine

Should we stream HTML?

This is a story about a lot of things: - Fitting a Fortune 20 site in 20kB - Diving into site speed so deep we’ll see fangly fish - React thwarting my goal of serving users as they are - Burning out trying to do the right thing - And by the end, some code I dare you to try.

Get yourself a drink and make yourself comfortable. Taylor's series on web performance will take a while to read and covers many different topics.

The second part's about HTML streaming. Streaming HTML?

Consider the following scenario. You're not prerendering or Jamstacking an HTML page but are rendering the HTML dynamically on a server. At request time, you make database queries that delay the response. The browser's just waiting for the first byte to arrive because the server is busy crunching data.

What if we could change this approach and respond (or stream) the HTML <head> early and wait for the data to come in then? The browser could then fetch CSS, fonts, and whatnot already. Sounds reasonable to me!

Should we stream more HTML?

Stop looking into the mirror all day

Bailenson cited studies showing that when you see a reflection of yourself, you are more critical of yourself. Many of us are now seeing ourselves on video chats for many hours every day. β€œIt’s taxing on us. It’s stressful. And there’s lots of research showing that there are negative emotional consequences to seeing yourself in a mirror.”

Vignesh collected four tips on how to survive meeting days. I liked the advice of configuring zoom/hangouts/... to not show yourself on screen.

Let's face it; it is indeed weird to look at yourself all day.

Improve your calls

Brain-teasing CSS :has() selectors

:has(+ .second) {   background-color: darkmagenta; }

All major browsers have been working on shipping CSS :has() (also known as the parent selector). Safari's shipped it with 15.4.

Matthias explains how the selector works and shares use cases for styling element parents. πŸ‘

Get excited about :has()

Do you turn off JavaScript?

Everyone has JavaScript, right?

Whenever you enter the topics about JavaScript being available everywhere, Stuart's evergreen resource will be handy!

Don't bet on JavaScript

Random MDN - JavaScript text formatting

πŸ¦– Random MDN: Text formatting πŸ¦–  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Text_formatting  This chapter introduces how to work with strings and text in JavaScript.  #webdev #JavaScript

My busy flatmate tweeted an MDN page about JavaScript text formatting. Did you know about Intl.DateTimeFormat or Intl.NumberFormat?

No? Then head on over!

Refresh your string knowledge

TIL recap – Code units in JS object property names

JavaScript object with two "ΓΌ" properties.

Do you wonder how I created this object above? Unicode is so fascinating. Learn more about this JavaScript party trick on the blog.

Learn more about JavaScript object property names

If you learned something new, whether small or big, old or new, documented or not, I'd love to include more learnings in this newsletter. Send me an email, and I'm happy to share your discovery!

Three valuable projects to have a look at

  • rowyio/feedbackfin – An open-source widget to collect feedback anywhere on your website.
  • rowyio/rowy – An open-source Airtable-like UI for your database.
  • dlvhdr/gh-dash – A GitHub CLI extension to display a dashboard of PRs and issues.

A new Tiny Helper

WhatTheFont interface. Upload an image and learn what fonts it includes.

Did you ever saw a stunning design and wondered what font it uses? I'm not into fonts, so I didn't.

But if you are a font nerd, WhatTheFont is a handy little tool to discover fonts in an image.

Discover all the fonts

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

I listened to Steph's and Calvin's excellent podcast "Shit you don't learn in school" and they shared some Steve Jobs wisdom.

No matter what you'll learn today, what challenges life throws at you or who you'll meet... You'll only find out how it all comes together looking back.

You can't connect the dots looking forward; you can only connect them looking backwards.

A song that makes you stop coding

Kruder and Dorfmeister in front of a black background

This Kruder & Dorfmeister classic from 2014 came on the radio, and it gets better every year!

Listen to "Lamb"

Thank you for reading!

And that's a wrap for the sixty-second Web Weekly! If you enjoy this newsletter, I'd love you to tell others about it. β™₯️

If you're not a subscriber, you can change it! πŸ˜‰

And with that, take care of yourselves, friends - mentally, physically, and emotionally. I'll see you next week! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 4 days ago.

Related Topics

Related Articles