Web Weekly #39

Goooooood morning! 👋

What's up, party people? Last week I spent some time implementing a Firefox-only feature on my website (it's a minimap). And I'm super into it! We need more fancy browser UI functionality.

Apart from that, I have a busy week ahead because I'll be running a Jamstack conf workshop about Next.js and Contentful. Come and say Hi!

This week's Web Weekly includes:

  • Innovative browser UI patterns.
  • A new proposal for CSS conditionals.
  • Colorful scrollbars.

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

Quick links

Innovative browser UI patterns

An example showing how an in-browser link preview could look like.

Rauno Freiberg's uiw.tf made me think about browser UIs and interfaces last week (that's why I implemented that minimap). There are countless new browser APIs, but there hasn't been much innovation considering the user interface. Should there be new ways to display and navigate websites? I think so!

Rethink website UI

A "local" VS Code CodePen

CodeSwing in VS Code including an editor for HTML, JS and CSS and a preview window

I used to dabble around in CodePen a lot but I found myself working in my /tmp directory more and more. I don't want to leave VS Code and miss its functionality and extensions. Jonathan Carter's CodeSwing is a VS Code extension that spins up a "local CodePen" right in your favorite editor.

Install CodeSwing

On being busy (or burned out)

I just don't want to be busy anymore – changes I'm making

Elena Salaks describes how she changed her life to focus on essential things in life. She chose family and health over being busy. 👍

Stop being busy

"I worked on this thing 30 minutes every day for a year"

Sci-Fi image showing a robot thingy

CSS art is always impressive! Ben Evans' "A Vacuum From Space" is no exception. It's fascinating work, and knowing that he worked on it for a year is even more impressive.

Be impressed by CSS art

To the power of GraphQL directives

Source code: query getUsers($showName: Boolean = true) { users { id name @include(if: $showName) } }

GraphQL directives are a powerful tool to shape your API responses. graphql.wtf maintainer Jamie Barton shares how you can use @include, @skip and @deprecated!

Start using GraphQL directives

Colorful scrollbars in Chrome, Edge, Safari and Firefox

visual scrollbar-width comparison for Firefox on Windows. Auto is big and clunky and thin looks subtle and visually pleasing.

Did you know that there's an official specification to color the browser scrollbar? I knew that you could style it using -webkit pseudo-elements, but the scrollbar-color CSS property was news to me. Learn more about it on the blog.

Color your scrollbars

A new CSS proposal – CSS conditionals

Source code: @when media(min-width: 600px) { /* ... */ } @else { /* ... */ }

There's been a lot of movement in the CSS space lately. Chris Coyier shares his thoughts about a new proposal: CSS conditionals. I love how writing media queries will be more straightforward.

Learn about CSS conditionals

Plumber becomes programmer

The plumber’s guide to cloud – It was around this time that Daniel and I met. His roommate, an IT worker, had shown him a blog post I wrote about something called the Cloud Resume Challenge. The challenge was designed to help people get their first job in cloud. It came with a promise: host your resume in the cloud, and I'll do whatever I can to help you get it in front of the right people.

I love Daniel's story of changing his life and career path from maintaining sewer pipes to wrangling CI/CD pipelines.

Read Daniel's story

Custom checkboxes and radios

What’s necessary to directly restyle radios and checkboxes?

Developing custom but accessible checkboxes has always been a pain. Scott Ohara describes a straightforward approach using appearance: none.

Implement custom form controls

Before implementing new custom checkbox/radio, consider using accent-color to color them.

New Chrome DevTools experiments

CSS overview feature showing statistics and number of colors.

I had a look at new Chrome DevTools experiments. Good things are coming, and I shared my favorite three new features.

Find new experiements

TIL recap: How to control scrolling with scrollIntoView

Source code: document.querySelector('.some-elem').scrollIntoView({ behavior: 'smooth', // 'auto' or 'smooth' block: 'center', // 'start', 'center', 'end' or 'nearest' inline: 'center' // 'start', 'center', 'end' or 'nearest' });

You might know that you can scroll elements into the visible viewport using scrollIntoView. I learned that you can also control where the element should be scrolled to.

Keep scrolling!

Three valuable projects to have a look at

A new Tiny Helper

Accessible color palette showing many colors and controls.

Accessible color palette is a handy tool to come up with beautiful color combinations.

Create your color palette

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

A quote to think about

Two years ago, I attended a conference and saw Scott Hanselman's talk "Scale yourself". I watched the recording last week, and it includes this week's quote.

Why would you let someone, who doesn't love you, ruin your day.

A song that makes you stop coding

Cover of "Fred again.. feat. The Blessed Madonna - Marea (We’ve Lost Dancing) (Official Audio)"

This week's song is a chilled house track with a super catchy hook line from "Fred again..". I love how it makes me bounce my head without being distracting.

Listen to "We’ve Lost Dancing"

Thank you for reading!

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