Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
7min
Web Weekly keeps you up to date, teaches you web development tricks and covers all things working in tech. If you like it, subscribe below.

Happy new year, party people!

Did you have a good slide and are ready for some WebDev stuff?

Let's get right into it! This time Web Weekly includes:

  • accessibility design
  • 2022 CSS features
  • a CSS color notation for humans

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

On a personal note

MDN compat data on my blog showing the browser support of a feature.

Happy new year, my friend! I hope you had a wonderful time off with your loved ones. My holidays have been surprisingly busy.

I didn't implement dark mode on my site (πŸ€¦β€β™‚οΈ) but built a new MDN widget instead. It fetches MDN data during build time, which means it'll always be up to date. I'm so excited about this!

Something made me smile

Terminal: npx benny-hill npm install

The following didn't only make me smile but laugh out loud. @zkat__ shared an invaluable npm package to use when running long-running terminal commands. I won't spoil the fun; give it a try!

How to be great

Remember: great is just good, but repeatable.

I listened to a podcast episode where Steph Smith shared wisdom about successful Indie Hacker companies. It was so good! If you're playing with the idea of building your own small company, give it a listen!

But in the spirit of 2022 and thinking of the new year's resolutions we'll all abandon in a month, here's Steph's fantastic blog post explaining how to be great in the new year.

Be great in 2022

Being a junior dev

Despite the perceived pressure you might feel to have all the answers, to solve every problem alone and to stay on top of the latest technology trend - nobody expects you to know it all. Simply because it’s not possible - nobody does.

I remember so clearly how I felt when I started doing web development. There were all these people around me "simply knowing it all". It was intimidating but so worth it because now I'm surrounded by good people with a career that never gets boring.

I loved Josefine Schfr's take on being a junior dev. Great read!

Keep learning

Create joy with your work

Make joyful things

Eli Fitch argued that the web we built lacks joy, fun and surprises. I agree, and I loved this post with many fun examples.

Include unexpected things in your work

hwb() – a color notation for humans?

An interactive color picker with Hue, Whiteness and Blackness controls to play around with the hwb() color notation.

hwb() support is coming to Firefox. You haven't heard of this CSS color notation? Neither did I. πŸ™ˆ I took a look at the color notation that apparently should be easier for humans to work with.

Learn more about hwb()

Animate your kids' drawings

Web interface showing a human drawn by a kid that can be animated.

I don't have kids, but after discovering "Animated Drawings", I had to ask my best friend for his daughters' drawings. Upload a child drawing, define its skeleton, and make it dance or run. So cool!

Wake up kids drawings

Accessibility design should be a thing

Graphic breaking the WCAG guidelines into dev and design related topics: 64% are design-related, 22% are developer-related, 14% are both

I haven't heard of the term "accessibility designer". Anna E. Cook gave a fantastic talk about accessibility design and why it's essential to consider it from the beginning of product development – highly recommended!

Become an accessibility designer

Twitter auto-detects a Tweet's language

Twitter web interface with open DevTools highlighting the auto-detected `lang` attribute for every Tweet.

Hidde published a fascinating post arguing that it should be possible to define the language of social media posts. I learned that Twitter auto-detects a Tweet's language and sets lang attributes for every displayed Tweet. 😲

Learn more about multi-language platforms

A Slack feature nobody knows about

Slack interface showing a mouse cursor explaining to click a channel with held "ctrl/cmd".

The following blew my mind. I don't know if I just missed this feature or if our friends at Slack didn't really promote it, but apparently, you can open entire channels in split view in Slack. πŸ‘

See more in Slack

CSS in 2022

The headline "{CSS} in 2022" on top of Fireworks.

Bramus covered many new CSS features last year, and just before we all entered the new year, he took a look into the future. If you're curious and want to learn what's in the CSS pipeline, this post is golden!

Look into the CSS future

TIL recap: live and static DOM collections

So in summary; today there are DOM element properties such as childNodes (returning a live NodeList) and children (returning a live HTMLCollection), methods like querySelectorAll (returning a static NodeList) and getElementsByTagName (returning a live HTMLCollection). Accessing the DOM is not equal to accessing the DOM!

After watching the HTTP 203 episode mentioned in the last Web Weekly, I revisited an old article dealing with DOM access methods. Four years ago, I learned that accessing the DOM can come with many surprises. Learn more on the blog.

Learn more about NodeLists

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

MS Paint interface

Did you ever look for a quick app to draw something? JS Paint is an MS Paint remake running in the browser. πŸ˜†

Draw things like in the past

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

A quote to think about

I watched an old Brad Frost talk over the holidays, and he said the following. πŸ’―

It's not about what you do but rather what you enable others to do.

A song that makes you stop coding

Chilly Gonzales in front of a piano

This song is from my piano collection: Chilly Gonzales's "Knight Moves" is one of these songs that gives me goosebumps. What a track!

Listen to "Knight moves"

Thank you for reading!

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

Related Topics

Related Articles