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

Guten Tag!

Do you know how to create fancy effects with CSS masking? Or what resolved CSS values are? Or that you can await objects with a then property?

All the answers and much more are included in this week's Web Weekly. 🫣

Correction time: last week, I highlighted that it's prime time for the translate, rotate and scale properties because they're cross-browser supported.

And while this is true for Safari, Chrome, Edge and Firefox, I should have noticed something! Samsung Internet uses Chromium but is usually behind the main branch. And it doesn't yet support these properties. 😒

Caniuse.com table showing Samsung Internet global share of 1.5%

caniuse.com states a global market share of 1.5%, and while that's not huge, it must be considered. A big thanks goes to Fynn who pointed that out.

On another note: last week, I enabled double opt-in for Web Weekly, and shockingly 50% of the people signing up for it don't confirm their subscription. Do I have a spam detection issue? I don't know yet, but if you have a minute, could you reply to this email (a single word is enough) to signal all the gmails, yahoos and live.coms that I'm not spamming? 😒

Thank you!

Something that made me smile this week

Two dogs looking into the camera.

I still don't own a dog, but man... I really would love to have a friendly sidekick!

Talk to all the dogs

Personal names around the world

This article will first introduce you to some of the different styles used for personal names, and then some of the possible implications for handling those on the Web.

Designing forms is tough, sure. And you might know that the first/last name pattern doesn't work for all the names we have on this planet.

The W3C lists and explains names to watch out for and advises how to ask for names. πŸ’―

Learn things about names

Give back by speeding things up

πŸ“– tl;dr: Most popular libraries can be sped up by avoiding unnecessary type conversions or by avoiding creating functions inside functions.

I love everything about the following: Marvin Hagemeister is on a mission to make the JS ecosystem faster and contributed performance optimizations to a PostCSS plugin and SVGO.

The post includes flame graphs and tips on how to keep JavaScript speedy. πŸ’―

Speed up!

HTMLHell advent calendar

Advent calendar with multiple doors from HTML Hell

Manuel Matuzovic is running his #100DaysOfMoreOrLessModernCSS challenge right now and also makes it to publish the HTMHell Advent Calendar. Both series are high quality!

I don't know how Manuel squeezes all this into daily life, but it's impressive! πŸ‘

Open one door at a time

Fun with CSS masks

Kevin Powell in front of his editor

Every time I see CSS masking techniques, I'm amazed! The day of me using it still has to come, but if you want to get started with fancy masking effects, Kevin Powell explains them very well!

Mask up!

Fontshare

Fontshare is a free fonts service launched by the Indian Type Foundry (ITF). It’s a growing collection of professional grade fonts that are 100% free for personal and commercial use. Our mission is to make high-quality and technically sound fonts accessible to everyone.

I just found out this exists: if you want to break free from Google Fonts, Fontshare is worth a look!

Don't use Google Fonts

Import with auto-complete

"import": {     "prefix": "imp",     "body": [         "import ${2:values} from '${1:specifier}';$0"     ],     "description": "import statement" }

I've never thought of it, but JavaScript imports are backward. You define your imports first and the file path second. Why is this important?

Well, it prevents auto-completion. Axel Rauschmayer shared how to streamline the import process and add a handy snippet to your editor!

Add the snippet

How to build your own image-sharing service

I want to be able to take a screenshot and then, without any interaction, have a sharable URL in my clipboard.  The steps to achieve this (on my mac) are: 1. When a new file appears in my screenshot folder, perform an action 2. Read the latest file in the folder and upload to a hosting service 3. Copy the URL of that image to my clipboard

I love it when folks start automating their works flows and tailoring processes to their needs! πŸ’™

Uploading images to a publicly accessible URL is one example. Jim Nielsen shared his latest approach in May using netlify-cli and xbar.

Remy Sharp shared another approach using old-school plist files and AWS. Knowing about the native watch commands on macOS makes this tutorial worth bookmarking!

I'm jealous, and it's really time that I set something like this up!

Watch files and automatically upload them

CSS values: computed, specified, absolute, initial, resolved...

During the CSS WG meetings, participants are talking about all kind of CSS values. It's quickly confusing.

Greetings from spec land! πŸ‘‹ CSS values can come in multiple defined shapes and states. Karl Dubost shares that even CSS working group members get confused by the terminology and explains when to use what word!

Use the correct terminology

Random MDN – copyWithin

const array1 = ['a', 'b', 'c', 'd', 'e'];  // copy to index 0 the element at index 3 console.log(array1.copyWithin(0, 3, 4)); // expected output: Array ["d", "b", "c", "d", "e"]

From the unlimited knowledge archive called MDN...

Do you know JavaScript arrays support methods to copy elements inside the array? Now you do!

Copy Array elements

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

TIL recap – then, then, then

Promise.resolve({   then: resolve => resolve(42),   foo: 'bar' }).then(value => console.log(`Resolution with: ${value}`));

Here's a trick question: what does the snippet above log out?

A few years ago, I discovered some surprising JS promise behaviors. πŸ‘‡

Promise it!

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

Three valuable projects to have a look at

A new Tiny Helper

Smart JPG / PNG Image Cleaner – Cleanup images and pictures by removing unwanted objects instantly. ImgCleaner provides 100% free tool and fast experience with the latest AI technology.

Are you still removing unwanted things from your photos by hand? Img.cleaner is yet another service to remove "unwanted" people and objects from your favorite images with a few clicks.

Clean up!

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

Thought of the week

When you start creating things, it's awkward to prioritize the process and spend so much time on it. Heck... I'm spending a few hours writing this newsletter most of my Sundays.

But seeing progress is such a great feeling. This edition is the 88th Web Weekly, and there are 200 TIL posts on my blog.

I'm proud of this accomplishment and couldn't agree more with Tim Stoddart.

Whatever you do, keep going!

On day 1 of creating content, people make fun of you. On day 1,000 of creating content, people get jealous of you. Keep going.

A song that makes you stop coding

Black/white picture of the Kraftklub front singer.

I've been out to see the German band Kraftklub live last week. And even though we've been pretty far from the stage, I had an absolute blast at a fantastic show. πŸ₯°

Listen to "Ein Song reicht"

This is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending over 3.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 3 days ago.

Related Topics

Related Articles