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

Happy 404 day, friends!

You might have noticed I skipped last week's Web Weekly. Sitting in between moving boxes got me. Every box I unpacked just made more mess! But I'm almost done moving into my new place... 🀞

I'll also switch to scheduled sending starting next week. Web Weekly will hit your inbox around 8 AM CET every Monday from now on! πŸŽ‰

And lastly, welcome to the 54 new subscribers since the last edition! I'm super excited to have you around! πŸ‘‹

And with this, today you'll learn about:

  • many unknown HTML tricks (there's some good stuff in this edition)
  • CSS layouts
  • messy keyboard JavaScript events

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

On a personal note

Zell and Stefan in a Zoom call

Zell (who you might know from his blog) and I jumped on a call to talk about resource caching and HTTP/2. We derailed quite a bit and ended up talking about ads, privacy, HTTP and our approaches to creating content online.

It was a lovely chat. Thanks, Zell!

Listen to us chattin'

Something that made me smile this week

A girl entering a phone booth

I won't spoil what'll happen in this Twitter video. But oh my, is that cute. πŸ₯°

Be a superhero

"Those HTML attributes you never use"

Quick summary ↬ In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects.

Louis came around with this very clickbaity Smashing article. But what shall I say? His post indeed includes many attributes that I haven't used before! It's a perfect read to level up your HTML skills. πŸ’―

Improve your HTML

Progressively enhanced web components

Implementation details of my new blog theme

Jim shared some excellent tricks included in his blog theme. The site design is pretty minimal and is based on the CSS accent-color property.

The approach to building the navigation stands out. It's based on web components and works without JS or even without CSS. I love it!

Theme your blog

A CSS layout deep-dive

The properties we write are inputs, like arguments being passed to a function. It's up to the layout algorithm to choose what to do with those inputs. If we want to understand CSS, we need to understand how the layout algorithms work. Knowing the properties alone is insufficient.

Josh took a look at CSS layout algorithms such as grid, flex and positioned layouts. It's an excellent read, as always!

Level up your CSS layout game

TIL - there's an :indeterminate CSS pseudo-class

Example showing how to match unselected radios

This week I learned you can match grouped but unselected radio inputs with CSS. 😲

Match all these radios

The Millions report is out

 Detected Errors - Across the one million home pages, 50,829,406 distinct accessibility errors were detectedβ€”an average of 50.8 errors per page. The number of detected errors decreased by 1.1% since the February 2021 (51.4 errors/page) analysis. "Errors" are WAVE-detected accessibility barriers having notable end user impact, and which have a very high likelihood of being WCAG 2 Level A/AA conformance failures.

WebAIM (Web Accessibility in Mind) scans the Alexa top one million pages once a year to analyze how they're doing in terms of accessibility.

It's an interesting but also depressing read.

Accessibility isn't on developers' minds, and it clearly shows. There are many simple things that can make the web more accessible. The report shares easy things to improve the overall web experience.

Learn more about the state of the web

Let's go down memory lane

100 cool web moments - Take a scroll down memory lane... Tell us which moments you loved the most. If we’ve missed anything (and we’re sure we have!), tweet us @Chromiumdev with #100CoolWebMoments. Enjoy!

Chrome turned 100 a few days ago. To celebrate it, our friends at Google collected a list of "web events" from Chrome's initial release to this version milestone.

Remember the past

Messy keyboard events

Slide with the title "It's complicated"

Jake and Ada looked at JavaScript keyboard events. And wow! "It's complicated" is not even describing how messy key events can be.

This video is worth your time if you include custom key handling in your sites! I promise.

Detect all the keys

How to pretend to invite someone via email

Straight 2 Spam - Love emails but hate people? Don’t want someone 🀑 at your party πŸ₯³ but have to invite them 🀒 cause your mom πŸ’β€β™€οΈ made you? Trust Straight 2 Spam to send your v important email πŸ“§ straight to their spam πŸ—‘

This one's from the weird corners of the internet. Did you ever have to write an email but didn't want the receiver to read it, hoping it to land in the spam folder? straight2spam can help out. πŸ™ˆ

Land in the spam folder

Random MDN

Example showing an ordered list starting at "3" because a list element included a `value` property.

My Random MDN bot tweeted the docs page for the li HTML element and I discovered that list item elements support a value property. 😲

Read more about it on MDN. πŸ‘‡

Start your lists wherever you want

TIL recap – git's short and porcelain flag

Git status -s vs git status --porcelain

Did you know that git supports a --short flag for humans and a --porcelain flag for scripts? Now you do. πŸ˜‰

Automate git with the porcelain flag

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

Tiny Helpers to erase things from images

Remove unwanted things from images in seconds.

Every time I see these AI-powered image tools, I'm amazed. It's wild how good they are today.

Do you still clean up images in Photoshop manually? Maybe you shouldn't. πŸ˜‰ Here are not one, not two, but three Tiny Image Helpers for you.

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

Thought of the week

Charles' Tweet stands for itself this week. πŸ™ˆ

If your reaction to a successful product is β€œI could have built that in a weekend’, the first thing you should consider is that you didn’t.

A song that makes you stop coding

Music video of Nada Surf playing standing in a forrest

This week's song is an oldie from 2006. Nada Surf's "Always love" is a track for the ages!

Listen to Nada Surf

Thank you for reading!

And that's a wrap for the sixty-first 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 that! πŸ˜‰

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 7 days ago.

Related Topics

Related Articles