Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
9min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag, my friend!

Do you know that with Safari 16 (released September 12), three long-awaited browser features are now cross-browser supported? Or that CSS provides a way to style language-specific quotation characters? Oooooor, why the CSS url() function doesn't work with custom properties?

All the answers and much more are included in this week's Web Weekly. ๐Ÿ™ˆ Enjoy!

And before we get started, welcome to the 91 new subscribers! I'm super excited to have you around! ๐Ÿ‘‹

3k subscribers, webweekly.email and the noonies

On a personal note: so many exciting things happened last week!

First, this tiny newsletter passed 3000 subscribers! ๐ŸŽ‰ It's absurd that 3000 people receive an email from me weekly. Thank you all for reading along!

Second, motivated by all this, I finally took the time to "devsign" and set up webweekly.email.

Screenshot of the new redesigned webweekly.email landing page

It feels like a "real" newsletter now. Let me know what you think about my design skills. It also includes a testimonials section and I'm all ears if you have something to share. ๐Ÿ˜‰

Tech Tutorial Teacher of the Year โ€” A tutorial article writer that Hackers found the most useful

And lastly, the Hackernoon publication runs their yearly Noonies awards, and they nominated me as "Tech tutorial teacher of the year". If you have a moment, give me an upvote.

Thought of the week

Isn't it cool that we have the skills to create our own little corners of the internet? Buy a domain, push some HTML and do whatever you want. There are no rules on your site.

Don't you have the time to write long-form posts? Publish a single sentence. Do you want to be silly? Go for it. Are you looking for a place to play with this new CSS property? Your site is your playground.

As Robin Rendle puts it, your site is a place to blog your heart. I love everything about this sentence!

And while I'm following way too many tech blogs (๐Ÿ’™ RSS), I love reading unfiltered thoughts. Whatever you put out there doesn't have to be polished, exceptional, or a world-changing idea: it's your corner of the internet. Publish whatever makes sense to you. Your site is whatever you want it to be.

If you're running a blog sharing your thoughts with the world, I'd love to add it to my RSS rotation!

Something that made me smile this week

Sketch update dialog welcoming all the figma users

Unfortunately, the screenshot above is just a meme, and Sketch didn't pull off such a product release stunt.

Last week's hottest drama: the big player aquires the underdog. Of course, I'm speaking about Adobe and Figma. The design community was pretty upset.

I'm not worried or mad about this acquisition. Remember when Microsoft bought GitHub and (!) npm? Many folks threatened to leave the ecosystem, but nothing changed.

On the bright side, this acquisition fired up the meme factory, and some very funny stuff was flying around on social media. ๐Ÿ‘‡

Check all the memes

The missing shorthand for logical properties

"margin: 1em 1.5em 2em 0.5em;" โ€“ Those values get applied to margin-top, margin-right, margin-bottom, and margin-left, not the logical equivalents (block-start, inline-end, block-end, and inline-start).

Do you bet on logical properties already? I have to admit that I barely use them, and the missing shorthand is one reason for this. Jeremy Keith explains the downsides of these reasonably new CSS properties.

Use the logical

A ๐Ÿ’™ for Vanilla JavaScript implementations

Hot Take: As an industry we should consider pure JavaScript as an option for more projects.

How much code does it take to write the popular TodoMVC example in vanilla JavaScript? Marc Grabanski implemented it in roughly 170 lines. ๐Ÿ‘

Marc shared many hot takes and JavaScript tricks, such as user input sanitization with textcontent, event delegation, and insertAdjacentHTML to avoid DOM destruction.

Go the vanilla way

The web is soooo good these days

Chris Coyier on stage

Web development changed so much over the last few years. Grids, layouts, fonts, container queries, animations... you name it. Chris Coyier gave a whirlwind talk covering the latest and greatest.

Enjoy the new

TIL โ€” url() doesn't work with custom properties

.something {   /* this doesn't work */   --image: "https://jo.com/image.jpg";   background: url(var(--image)); }

Even though it seems logical, I learned you can't use the url() CSS function with custom properties. Why? url() includes legacy functionality that we can't remove, and it prevents custom property usage. Luckily, src() will help out eventually. Learn more about url() on the blog.

Learn about the CSS legacy

Words that should exist

A word that should exist: When someone a little too far away holds a door open for you, but that makes you have to run so as not to keep them waiting, and actually you would've found it easier to just open the door yourself.

German is my first language. It's a terrible language to learn, but it's delightful that we have many words that don't exist in other languages:

  • Ohrwurm ("ear worm") โ€” a melody of a song stuck in your head for an extended period.
  • Kopfkino ("head cinema") โ€” playing out an entire scene in your mind.
  • Verschlimmbessern โ€” an attempt at improving something but making it worse.

I love that sometimes a single word describes an entire situation or feeling. The following site lists words that should be included in any language.

Invent new words

Ways to inspect contrast ratio in Chrome DevTools

Chrome DevTools color picker showing contrast ratios lines on the color spectrum.

What do you think? How many ways do the Chrome DevTools provide to fiddle with contrast ratio?

Adam Argyle shares eight (!) different ways to inspect contrast ratio! ๐Ÿ‘

Measure your contrast ratios

The number input's downsides

1. When the number input contains an invalid value and you retrieve the value, you get a blank string. 2. Valid numbers include more than just digits (i.e,. scientific notation like the letter e). 3. The min/max attributes can easily be bypassed. 4. Different browsers accept different characters.

I'm all for using semantic HTML and the correct elements, but I wasn't aware the number HTML element has so many quirks. ๐Ÿ˜ฅ

Learn more about inputs

It's always about the UX

When you create a cover letter or CV or any other document - think about the reader's user experience. This isn't an exercise in writing beautiful prose in iambic pentameter. This isn't the time to stroke your own ego. You are making it easy for the reviewer to quickly see if you meet the requirements for each section.

Here's a pro tip from Terence Eden that applies to more than writing CVs and cover letters โ€” optimize whatever you write for the person reading it.

Apply with focus

Safari 16 - requestSubmit, showPicker, and overscrollBehavior go cross-browser

Browser support info for requestSubmit, showPicker and overscroll=behavior

The new Safari 16 release comes with three new web platform features that are now cross-browser supported.

Random MDN โ€“ ||=

Logical OR assignment (||=) โ€” The logical OR assignment (x ||= y) operator only assigns if x is falsy.

From the unlimited knowledge archive called MDN...

Did you know that you can reassign a falsy variable with a nifty oneliner?

a.title ||= 'title is empty.';

Now you do!

Assign logically

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap โ€“ language-specific CSS quotes

blockquote::before {   content: open-quote; }  blockquote::after {   content: close-quote; }

You'll love this TIL post if your site includes quotes in multiple languages. Use open-quote and close-quote to display the correct quotation characters in your CSS.

Quote the right way

Find more short web development learnings in my "Today I learned" section.

Three valuable projects to have a look at

A new Tiny Helper

Ok !So screenshot with a drawing that says "Hello you! it's great to see you!"

"Ok! So" is an easy-to-use app to put your thoughts down on "paper" quickly. I love its style! ๐Ÿ’ฏ

Quick-draw your thoughts

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

Thought of the week

Manuel Matuzovic was on a speaking tour lately, and his excellent talk "Lost in Translation" includes this week's quote.

We're wrongfully downplaying the complexity of HTML due to the simplicity of its syntax.

A song that makes you stop coding

Cover: Sofa Surfers โ€” Feel good

Sofa Surfer's "Feel good" somehow entered my radio, and this driving guitar is just too good.

Listen to "Feel good"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3k emails. If you enjoy it, consider supporting me on Patreon. โ™ฅ๏ธ

Or tell your friends about it:

If you're not a subscriber, change that! ๐Ÿ˜‰

And with that, take care of yourself - mentally, physically, and emotionally. I'll see you next time! ๐Ÿ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 7 days ago.

Related Topics

Related Articles