Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
6min
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.

Moin moin! πŸ‘‹

So, how was your week, friends? I had had a super chilled weekend and had some time to polish some styles on my website. The CSS architecture is such a mess; luckily, only I work on it (YOLO!). Apart from that, I'll be on a Contentful webinar next week, and maybe you want to say Hi!

This week's Web Weekly includes:

  • Resources to level up your VS Code game.
  • A project that generates videos with React.
  • Reasons to step into leadership.

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

Something that made me smile

But before we jump into the nerdy things, let me show you what made me laugh this week, and let's look at these weirds books that you can order on Amazon.

Book cover: Crafting with cat hair

(Fun fact: the books on this site are made with CSS)

With that out of the way: Ready, steady, go!

What's a good problem description?

 How to create a Minimal, Reproducible Example

Do you know that Stack Overflow defines what a good question is? They say that a good problem description is minimal, readable, reproducible and complete. As someone who helps a lot of people every day, I couldn't agree more. πŸ™ˆ

Improve your bug reports

Automatically use the correct package manager

Corepack – In practical terms, Corepack will let you use Yarn and pnpm without having to install them - just like what currently happens with npm, which is shipped by Node.js by default.

You know the situation: you clone a project, want to install all the dependencies, and then... you have to check what package manager the project uses. Wouldn't it be great to run whatever install, and it automatically uses the correct tools?

That's what the Node.js folks have in mind with Corepack!

Check Corepack

Create fancy videos from within a GitHub action

A GitHub repo showing 50 stars and the last stargazer.

I found Rodrigo Pombo's stargazer project. stargazer uses Remotion to generate React-based celebration videos. And the best part: the videos are generated in a GitHub action. 😲

That's such creative use of this technology mesh. Bravo!

Create a stargazer celebration video

Super random: Checkboxland

A circle graphic made out of checkboxes

Checkboxland is a JavaScript library for rendering anything as HTML checkboxes.

Yeah, you read that right! You probably won't use this project anytime soon, but I'm amazed by people spending time on such projects. πŸ™ˆ

Add more checkboxes to your life

Reasons to step into leadership

Good reasons to seek a leadership role

CTO Pat Kua shared his thoughts about leadership and when you should consider becoming a leader. If becoming a CTO or Engineering Manager is in your career planning, there's a lot of truth in this article!

Should you become a leader?

TIL: rgba()/hsla() are only aliases in modern browsers

My rare usage is why I missed that the CSS Color Module Level 4 spec made rgba() and hsla() redundant. The specification introduced two changes: 1. rgb()/hsl() accept alpha values. 2. Color functions accept space-separared values.

I rarely use CSS color functions (rgb(), hsl(), etc.) and that's why I missed that the CSS Color spec changed and the color functions with transparency (rgba() and hsla()) are legacy functions today. 😲

Stop using rgba() and hsla()

Four VS Code tips

VS Code theme diff showing a theme with and without cursive characters.

I spent some time tweaking my VS Code setup this week, jumped onto the "cursive coding fonts train", and improved my syntax highlighting. Here are some resources to make your editor feel more like home:

The beauty of pointer-events: none

A form with a bouncy circle showing the validation state.

Hakim El Hattab built a beautiful form validation demo. It's hard to see on the screenshot, but this form comes with a moving ball (not sure what to call it) that signals the fields' validation status.

I had a look under the hood: Hakim placed a canvas element over the entire site to draw the fancy ball. And to still allow form interactions, he put pointer-events: none on it. Smart!

See a fancy form validation

TIL recap: Email inputs can accept multiple addresses

Interactive demo showing that an email input fields accepts multiple email addresses.

To keep the articles on the blog up-to-date, I decided to reread and include previous Today I Learned posts in this newsletter.

Did you know that email input fields support the multiple attribute to accept more than one email address? Now you do! Read more on the blog.

Accept multiple email addresses

Three valuable projects to have a look at

  • unjs/destr – Faster, secure and convenient alternative for JSON.parse.
  • privatenumber/tasuku – The minimal task runner for Node.js.
  • oclif/oclif – Node.js Open CLI Framework. Built with πŸ’œ by Heroku.

A new Tiny Helper

Vytal modal explaining that the tool analyzes all the data your browser sends.

If you're curious what information your browser sends when you're browsing the web, have a look at Vytal. You might send more information than you think.

Check your sent data

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

A quote to think about

The psychologist, Nick Wignalls, publishes articles covering emotional health. And I enjoy his writing a lot. This week's quote comes from his article The 4 Biggest Anxiety Myths Everyone Believes.

If you want to be free from anxiety, you must be willing to have it.

A song that makes you stop coding

Cover of "Hundreds - Ten Headed Beast – Christian LΓΆffler Remix

This week's track is a chilled electro song from Hundreds remixed by Christian LΓΆffler. Enjoy!

Listen to "Ten Headed Beast"

Thank you for reading!

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

Related Topics

Related Articles