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, stormy Monday, party people!

For the folks living outside of Europe: we had some intense storms over here, and everybody was thrilled by airplanes still landing in London Heathrow despite it. It was pretty scary because I didn't experience such wind very often in my life, and especially in Berlin, people tend to have loose plant pots on their balconies. I stayed inside as much as possible, and I hope you did the same!

This time Web Weekly includes:

  • colorful native checkboxes
  • the new global reportError JS method
  • 3rd party assets and the browser cache

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

On a personal note

List of links that have a favicon displayed after the link text.

I continued playing with my site and added favicons to every link going elsewhere. ☝️ The favicons are fetched and served via my own tiny images API at avatar.stefanjudis.com.

A big Thank you goes to Zach for releasing and open-sourcing the API code. Setting all this up took me only an hour! What a beautiful time to be a developer. 😊

Moving update: Exactly in one week, strong people will come and carry all my furniture into my fourth-floor apartment. I can not wait!

And before I forget: I have a new job starting in May. You can expect content about web performance, automation and building good stuff in general. I'm beyond excited and will share more later. πŸ™ˆ

Something that made me smile this week

bwamp interface including emoji boxes that will play sounds like claps, thumbs up and down.

From the collection of random things from the internet: BWAMP is a handy site that equips you with essential sounds to play in your next meeting.

Play sounds in your next meeting

How to color checkboxes and radios

Example showing that browser adjust the input radio/checkbox contrast color depending on the defined accent color to provide a reasonable contrast ratio.

The new CSS property accent-color is supported in Safari 15.4. Why's that a big deal? With Safari supporting it, all major browsers finally allow us to color checkboxes and radio buttons!

Color your inputs

Is Google search dying?

Reddit is currently the most popular search engine. The only people who don’t know that are the team at Reddit, who can’t be bothered to build a decent search interface. So instead we resort to using Google, and appending the word β€œreddit” to the end of our queries.

First of all: I don't think Google Search is dying. πŸ™ˆ

But the following post with the catchy title makes a valid point. Google Search results got worse over the years. Search now includes more magic, more engagement tactics and more ads, which means I trust the results less and less.

For example, when I look for a new fridge to buy, I trust people on social media recommending me one way more than the results of Google Search. Maybe it's time to switch to a Search alternative finally... πŸ€·β€β™‚οΈ

Make up your mind about Google Search

The challenge of good user experience

After having had to use it so much in the past year, I believe that Google Slides is actually just trolling me.

I'm forced to use Google Slides at work, and as a Keynote fanboy, I can't say that I enjoy it. Laura's article on Google Slides' misleading and clunky user experience describes my frustration using the service perfectly.

And while her post is just a long rant, it shows how hard it is to build a delightful product. It's a great read with a lot of detail!

Build better products

Why asset loading from 3rd party CDNs isn't useful anymore

What does this change mean for you? If your sites live on modern hosting that provides a CDN and supports HTTP/2, you should drop the third-parties and ship all resources yourself. Relying on a third party resources offers little value in 2020.

I discovered that browsers changed their caching behavior two years ago. Suppose you're loading a JavaScript library, font or icon from a third-party domain, thinking that it might be cached already because a visitor already loaded it on other sites; this cache hit is not possible anymore. Learn more about the browser caching changes on the blog.

Self-host your assets

A critical look at crypto, NFTs and Web 3

Laura Kalberg presenting the "I am rich" iOS app which cost $999.

You might have heard about the new thing – Web 3. I must admit that I don't understand it (or care), but if you want to learn what the hype is about, Laura gave an excellent talk shedding some light on the topic.

Learn more about web 3

A new JS method for your error monitoring

Luckily, there's a new method available to trigger window.onerror or window.addEventListener('error', ...). Say hello to reportError. πŸ‘‹

Error handling in any application is challenging. You want to catch all possible exceptions and be clear about places that could throw an error. This situation is when error monitoring becomes critical. An error monitoring script usually registers a window.onerror event listener, to send unhandled exception somewhere to store it.

But what can you do if you catch an exception but still want to send it to your monitoring service? The new global JavaScript method reportError() helps out here.

Trigger your error handlers

Think about the good things

Meditating with friends in a temple in Kyoto. Petrechor. A sunny brunch. Porch hammocks. β€œScrew it, I’ll just walk”. That all the animals in the sea are still in there doing their thing, all the time. Golden hour light. Family game nights

I love everything about Melanie's page "Good things". It lists all the good stuff in her life and made me reflect on mine! πŸ’™

Reflect on your life

Design tools and resources

Discover highly useful Design Resources & Tools – A growing archive of 900+ design resources, weekly updated for the community.

Short'n'sweet: if you're looking for design tools and resources, toools.design has everything you need!

Level up your designs

Reduced motion shouldn't mean no motion

Reduced motion doesn't mean no motion.

If you're trying to be a good web citizen, you might know the prefers-reduced-motion media query. If a visitor has the accessibility setting turned on, you can then disable the site's animations. But here's the thing: reread the name of the query. It clearly states the preference for reduced motion. It's not saying "Hey disable all motion!".

Chris shared some excellent resources on the topic. And while you check these out, I'll have a look at my site because I didn't get that right myself. πŸ™ˆ

Keep the good animations

Random MDN

πŸ¦– Random MDN: Intl πŸ¦–  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl  The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The Intl object p…

If you haven't had a look at the Intl JavaScript object yet, do it now! Intl provides functionality for anything dealing with internationalization. It helps with date formatting, displaying country names or showing language-sensitive list formatting. It's super good!

Learn more about Intl

TIL recap – divs are valid in description lists

A description list including a div with an arrow pointing to it telling that it's valid markup.

Did you know that divs are valid markup in description lists? Now you do. πŸ˜‰

Style your <dl>

If you learned something new, no matter if 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

A new Tiny Helper

hue.tools – an interface to transition from one color to another

hue.tools is a handy tool to create color palettes and gradients. I really like the minimal design, and it supports new and fancy color formats, too.

Convert colors

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

A quote to think about

I asked friends about podcast recommendations this week and had to find out that many recommended me "Spotify-only" podcasts. It's such a bummer that big corporations always have to fight against the open web.

In this spirit, this week's quote comes from John Gruber.

Spotify is trying to do to podcasting what Facebook did to β€œhaving your own website”.

A song that makes you stop coding

Cover showing a human and a robot: Man vs. Machine - Electronic Industry

This week's song is a little unusual. Our internal company kick-off organizers played some heavy EDM in the breaks. And what shall I say? Usually, this music is not my cup of tea, but it got me all hyped up. πŸ˜†

Listen to "Transformer Boogie"

Thank you for reading!

And that's a wrap for the fifty-eighth 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! πŸŽ‰ πŸ‘‹

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