Web Weekly #42

Happy Saturday, party people! 👋

Wait what? Yes, that's right. I'm sending this newsletter a day early because I'm out for some time off! My friends and I will be on a boat for four days. It'll be no computers, just us and some wind.

I'm looking forward to it!

Other than that, our annual conference is approaching, and I'm hands-down preparing to be one of the MCs on day two. Come and say Hi; there are some good things in the program. 🙈

This week's Web Weekly includes:

  • A new online VS Code release
  • display: revert
  • CSS overscroll behavior

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

Something that made me smile

The world's highest website.

I found the world's highest website this week. It's indeed very high and weirdly even translated into various languages. 📏

Visit the highest site

Quick links

How to get paid for content creation

It can be really easy to get taken advantage of when you're creating content to build your career or become a developer advocate, so I want to equip you to get paid what you're worth and know when to create content for free.

As a content creator, I enjoyed the following article from Sam Julien. Sam describes how to negotiate when someone asks you to create content and shares valuable tips on how to get the most out of it.

Negotiate better

A "fancy stripe.com gradient" generator

A fancy gradient with color controls below.

If you visited stripe.com, you probably noticed their beautiful gradient animations. Stripe uses a canvas element to achieve the wavey effects, and if you want to debug how it works or add a similar animation, look at "whatamesh".

Create your gradient animation

A 💙 for public knowledge bases

This is my personal wiki where I share.

You might have noticed that I like to make resource lists and publish what I learn on my blog. 🙈 I found Nikita Voloboev's public knowledge base this week.

I love it when people collect helpful public information! 👏

Put your knowledge online!

display: revert; – what?

The revert value is unique. First, it checks if there is a default style for the specific property in the user-agent stylesheet for the specific HTML element it is sitting on, and if it finds it, it takes it. If it doesn’t find it, revert works like the unset value, which means that if the property is an inherited property by default, it uses the inherit value; if not, it uses the initial value.

Elad Schechter shared a "new" approach to CSS resets on CSS-Tricks. It's a good read and what stood out was that his reset stylesheet uses display: revert;. 😲 I haven't seen that one before!

Check the new CSS reset approach

Be less serious and more sincere

The key to happiness is to stop getting upset all the time.

I discovered Mike Crittenden's blog, and I really like it! Mike writes short opinion posts about tech and life. I nodded along when reading this post that describes the difference between being serious and sincere.

Stop being too serious!

CSS overscroll-behavior

overscroll-behavior: auto; /* default */ overscroll-behavior: contain; overscroll-behavior: none;

The overscroll-behavior CSS property allows you to define what should happen when someone reaches the end of a scroll container. The options are scrolling the parent or containing it.

Learn more about overscroll behavior

vscode.dev

Bringing VS Code to the browser – Fast forward to today. Now when you go to https://vscode.dev, you'll be presented with a lightweight version of VS Code running fully in the browser. Open a folder on your local machine and start coding. No install required.

Disclaimer: I only played around with this for a few minutes, but the following is pretty wild. Microsoft released vscode.dev, and it's, you guessed it, VS Code running in the browser.

But what's the deal? GitHub released that a while ago, right? What's so exciting?

The catch: you can edit local files from within VS Code running in your browser (using the File System Access API). 😲 I still have to wrap my head around what's happening in the developer tooling space right now, but local development will disappear soon.

Use the online VS Code

Emoji misunderstandings and accessibility issues

Anguished Face emoji rendered on different platforms

There was a social media trend going on last week. People used the red flag emoji (🚩) as warning signs to share their opinions. This emoji is not defined as a red flag, though, and that introduces an accessibility issue!

I published a quick post about emoji meaning and rendering on the blog.

Learn more about the "red flag"

Accessibile social media

Improving your Tweet accessibility.

Oldie but goldie: while reading about the triangular flag emoji, I also came across Adrian Reselli's article on accessible social media postings. It's a fantastic read for people posting things online!

Share with accessibility in mind

TIL recap: How to set up directory-dependent git configuration

gitconfig including includeif

Did you know that you can define directory-dependent git configurations? git provides conditional includes to apply different configurations.

Set up conditional git config

Three valuable projects to have a look at

A new Tiny Helper

Instagram filter UI with a preview image and controls.

If you want to apply Instagram filters to your images and wonder if these effects are possible with CSS, Insta Filters is a handy web app that spits out ready-to-use CSS! 👏

Apply Insta Filters

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

A quote to think about

And here's another post from Mike Crittenden. Block off more of your calendar describes that you have to be ruthless when it comes to your calendar. And I agree!

Open calendars are toxic.

A song that makes you stop coding

Maybe tomorrow - Stereophonics

This week's song is a classic from Stereophonics in the spirit of my upcoming days off.

Listen to "Maybe tomorrow"

Thank you for reading!

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