Google Sheets iconSwift icon
Published at
Updated at
Reading time
6min

With Web Weekly I try to send people one of their best emails every Sunday. It covers all things web development and working in tech.
If you like it, subscribe below.

Guten Tag, friends! ๐Ÿ‘‹

If you're subscribed to this newsletter for a while, you know that I discovered the electro piano duo Grandbrothers and became a big fan. I saw them live this week, and I'm so happy; live music is just the best!

Before jumping into nerdy stuff, let's start the week with some doggo cuteness.

A dog and a kid on a bench

This week's Web Weekly includes:

  • Fancy CSS features: accent-color, font-family: system-ui and color-scheme
  • workplace privileges
  • directory-dependent git configuration

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

Ready? Steady. Go!

How Google generates search result titles

We consider the main visual title or headline shown on a page, content that site owners often place within H1 tags or other header tags, and content that's large and prominent through the use of style treatments.

Google changed the way how they generate the search result titles and now consider h1 elements, too. It's a good reminder about the importance of headlines and semantic HTML.

Take care of your headlines

It's time to add accent-color to your stylesheets!

Demo showing red check boxes and radios.

I discovered that Firefox starts shipping accent-color with version 92. With Chrome and Firefox supporting the new CSS feature, let's place colorful checkboxes everywhere!

If you want to play around with it, the blog now includes an interactive example. ๐Ÿ˜Ž

Color your inputs

font-family: system-ui is almost cross-browser supported

system-ui โ€“ Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

Do you remember this "beautiful" line of CSS:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

You could leverage this font-family declaration to use the operating system default font in your sites. And speaking of Firefox 92: system-ui support is coming to it (MDN is not up-to-date yet). Using operating system fonts will be straightforward soon. ๐ŸŽ‰

Learn more about font families

Should browsers support image formats even though the OS doesn't support them?

But Apple decided not to ship AVIF in Safari because the image format is not supported in their operating systems yet.

This week I learned that Apple decided not to ship AVIF even though Webkit (the underlying engine) supports it. And while it's a bummer because the format leads to smaller file sizes, I think it's essential to support the format on the operating system level, too.

Let's hope Apple prioritizes AVIF soon. ๐Ÿคž

Learn more about AVIF and macOS

Privileges you didn't know you have

50 potential priviliges in the workplace

I'm subscribed to the Better Allies newsletter for a while now (I recommend it!). This week they shared a list of workplace privileges, and it's a good reminder about the freedoms I have.

Learn more about privileges

๐Ÿ”ฅ Shiny New GitHub releases

GitHub CLI 2.0 is here

GitHub released another version of their CLI, and even though I'm not using it as much as I should, it looks super excellent. It comes with a plugin system, and I haven't decided yet what I'll use to automatically update my GitHub user status. I'm up for ideas. ๐Ÿ˜‰

Additionally, I discovered that GitHub shipped VS Code in their UI. I played around with it a little bit, and I'm getting more excited about coding in the cloud every day!

Directory-dependent git configuration

git config code: [user]   email = user@example.com   name = User   signingkey = ABC123 [commit]   gpgSign = true [includeIf "gitdir:~/work/"]   path = ~/.work.gitconfig

This week I learned that git allows optional includes in .gitconfig files. If you're juggling directory-dependent git configurations, this feature is golden. ๐Ÿ‘

Apply different git configs

Promises-based timer functions in Node.js

Javascript code:  import {   setTimeout, } from 'timers/promises';  // do something await setTimeout(5000); // do something else

How many times did you write a custom sleep function leveraging setTimeout and Promises in Node.js? I indeed did that countless times. I discovered that Node.js 16 comes with Promises-based timer functions built-in!

Use Node.js built-in timer functions

TIL recap โ€“ the color-scheme meta element and CSS property

HTML code showing the usage of theme-color

New newsletters section: to keep the articles on the blog up-to-date, I decided to reread and include older posts in this newsletter.

From last year: color-scheme and how it affects browser default UI elements.

Learn more about color-scheme

Three valuable projects to have a look at

  • SaraVieira/fiddly โ€“ Create beautiful and simple HTML pages from your Readme.md files.
  • cschleiden/vscode-github-actions โ€“ Simple, unofficial extension to view GitHub Actions workflows and runs in VS Code.
  • DavidWells/analytics โ€“ Lightweight analytics abstraction layer for tracking page views, custom events, & identifying visitors.

A new Tiny Helper

Various technology icons

If you're looking for a quick way to visualize the technologies used in your open source projects on GitHub, use TechStack, paste your package.json and copy all the logos.

Make your Readmes pretty

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

A quote to think about

This week's quote comes from a video from my colleague Wiktoria Dalach. It's a good reminder not to over-engineer everything and keep the bigger picture in mind. ๐Ÿ™ˆ

Coding is not the goal. [...] The goal is creating great, usable and maintainable solutions to problems people have.

A song that makes you stop coding

Black and white picture of a man

I discovered the artist Dardust this week. "Rรผckenfigur" is another beautiful piano track that made it into my Spotify "Liked songs".

Listen to "Rรผckenfigur"

Thank you for reading!

And that's a wrap for the thirty-fourth Web Weekly! If you enjoy my newsletter, I'd love you to tell others about it. โ™ฅ๏ธ

If you're not a subscriber, you can change that! ๐Ÿ˜‰

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.

Related Topics

Related Articles