Web Weekly #35

Moin moin, friends. 👋

I'm late with sending this newsletter because I spent my weekend watching great shows. Netflix released new "Casa de papel" (Money heist) episodes, and they were so good. The show's almost too thrilling for me, but wow – I was super into it.

So! Before jumping into nerdy stuff, let's look at some beautiful street art.

Street art on a house that looks like the building is not squared but with round edges.

This week's Web Weekly includes:

  • fun coding fonts
  • manual accessibility testing
  • online learning tools

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

Ready? Steady. Go!

Quick bytes

Fun coding fonts

Coding font looking like Comic Sans

I rarely tweak my VS Code setup these days (here are my extensions in use) because I'm pleased with the Fira Code font and the Yi color theme.

Doug Wilson shared some fun coding fonts, and I'm honestly considering giving "Comic Code" a try.

Make your editor more fun

A ♥️ for creatives websites

Tania's website being styled like VS Code

Few things are better than a creatively styled website. I discovered Tania Rascia's code editor alike website and loved it.

Check Tania's website

Make learning fun again!

Interactive Learning Tools For Front-End Developers

You probably heard of the CSS learning game Flexbox Froggy. What if I tell you that there's also a Flexbox Zombies and Flexbox Defence? Louis Lazaris collected an extensive list of online learning tools. 👏

Play more games

How reliable are tracking scripts these days?

It turns out 58% of Hacker News readers, Reddit users and other techies block Google Analytics. Tech-heavy audiences use adblockers and privacy-friendly browsers much more than the average web user.

Developers are known for using adblockers and privacy tools. The folks at Plausible took a look at how many Google Analytics "get lost". Disclaimer: it's quite a few.

Learn more about GA tracking

What happened to all the women in tech?

So, if we want a more inclusive field of work where everyone feels welcomed, it is time to think about the role models we present, and to consider that a different approach to computer science could be just as constructive and that much richer. Representation is key; you can’t be what you can’t see.

37% of computer and information science graduates in 1984 were women. From there, fewer and fewer women entered the industry. Why's that? Lara Schvartzman shares what happened.

Learn more about what happened

The art of not taking things personally

When we encounter emotions and behaviours that don’t make sense to us, it’s often because we don’t have all the information. And in the absence of information, we tend to assume the worst.

People's behavior is often based on factors you don't see (so true!). Dave Baily shares lessons on being generous and finding the underlying problems of overreactions, mistrust or blame.

Find the real problems

Automated accessibility is not enough

A table showing accessibilty criterias that can and can't be linted, tested and manually tested

With tools such as Lighthouse and webhint, we made a good step forward in making accessibility testing more accessible. Many accessibility criteria can not be automatically tested because they depend on context.

a11y-automation.dev lists various accessibility violations and gives information on how to test them.

Learn what you have to test manually

Impressive SVG filters

A fancy twirled progress bar

Headsup, you'll need some time for this long article. 🙈

Dirk Weber explains the feDisplacementMap SVG filter primitive with great-looking and impressive examples. SVG is so fascinating.

Learn more about SVG filters

TIL recap: Input elements hold references to their labels

JS code: "console.log(document.getElementById('foo').labels);" that returns connected labels

To keep the articles on the blog up-to-date, I decided to reread and include older today I learned posts in this newsletter. 😉

Here's a little DOM trivia: did you know that you can access an input's connected labels?

Access your labels

Three valuable projects to have a look at

A new Tiny Helper

Easy easing configurator

"Easy easings" is a beautiful-looking CSS easing function generator. It generates keyframes animations and is more flexible than other cubic-bezier tools.

Ease with ease

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

A quote to think about

Sheri Byrne-Haber shared her opinion on Twitter's accessibility improvement efforts. Her article included this week's quote.

WCAG compliance is not the end of the journey, because accessibility is a program not a project.

A song that makes you stop coding

Music from "This is us" - We can always come back to this.

I'm not only watching "Casa de papel" but also "This is us" (the third time 🙈). My Sunday ended with a sad episode that included this beautiful soul track.

Listen to "We can always come back to this"

Thank you for reading!

And that's a wrap for the thirty-fifth 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.