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

Happy Sunday, party people!

You might have noticed that I took a two-week break from Web Weekly. I just felt too exhausted with too many moving pieces in my life. But everything's on track again! 😊

I started building a proper landing page for this newsletter mainly to play around with Remix. It felt great that I didn't hit any blockers and could get rolling right away. The structure of Remix files reminds me of writing PHP back in the day, though. Is this web development repeating itself with another file extension?

Web Weekly landing page screneshot

I have a quick ask: do you see the testimonials section? I'd love to include more quotes in it. If you enjoy Web Weekly, it'd be great if you could share it online. Thank you!

And with this, today you'll learn about:

  • named CSS grid lines
  • site-specific browser controls
  • situations when divs are harmful

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

Lastly, welcome to the 54 new subscribers! I'm super excited to have you around! 👋

Something that made me smile this week

@makemysoulhappy Twitter account. We will heal the world with smile.

I discovered the @makemysoulhappy Twitter account, and I'm there for it!

How to define CSS grid line names

CSS grid-template-columns declaration including names grid lines.

I found the above beauty in the CSS grid spec. 🤯 That's something, isn't it?

The snippet made me realize that you can define named grid lines in CSS.

Name your lines

Google I/O wrap

Jake's and Una's Google I/O presentation labeled "What's new for the web platform"

I haven't had the time to watch all these Google I/O videos yet, but Paul published a nifty summary of good-to-know things.

The Twittersphere went wild about the new Shared Element Transitions API. I'll still treat it patiently because it's not the first time a solution to element or page transition has been proposed.

Nevertheless, good things are coming to the web lately!

Learn about the new and fancy

Interviews that purposefully don't go well

"Oh, it's not about that, this is an asshole test. You see who turns into an asshole under pressure and they don't make it to the next round".

This week I learned that IBM used to include a job interview stage to evaluate how folks behave in a team setting. Multiple candidates are put together in a room and tasked to solve something unsolvable.

The interviewers then check:

  • Who's taking the lead?
  • Who's a team player?
  • Who's overwhelmed?

I have mixed feelings about this practice. But I know that I've been at such an interview myself once. It wasn't a group setting, and I didn't have to solve a puzzle, but the interviewer purposefully tried to annoy me testing my patience. I passed, and my new colleagues later told me the interview's purpose.

I doubt interviewees who failed the "patience test" were informed about the rejection reason. I think they should have. Having a lousy interview can put you off for days.

Anyways, if you have thoughts about this, I'd love to hear them!

Be aware of interview practices

The Project Fugu showcase

The Capabilities Project (code name Project Fugu) is a cross-company effort with the objective of making it possible for web apps to do anything platform-specific apps can.

With all these new browser APIs showing up, it's tough to keep track. APIs coming from Project Fugu aim to make it possible to write web apps that feel native without an Electron wrapper or similar tools.

If you want to learn what's possible today, the Fugu showcase lists many apps you can play with.

Discover all these Fugu projects

Site-specific browser controls

Should browsers offer site-specific user preference controls? (yes!)

Jim published a super thought-through article arguing that browsers should offer a site-specific color scheme control. I strongly agree but I also think browsers should offer way more than that.

I shared my thoughts on the blog.

Give me all these controls

How to enforce pinch-to-zoom on Android

As a user, you can force allow zooming:  In Firefox find the settings, select “Accessibility” and activate “Zoom on all website” In Chrome find the settings, select “Accessibility” and check “Force enable zoom”

Are you as annoyed as I am when you discover that a website disables pinch-to-zoom? If I want to zoom on my phone, it's my business!

And yes, I'm looking at you, Twitter PWA!

I was delighted to learn that I can enforce pinch-to-zoom on my Android in Chrome and Firefox. A big thanks goes to Manuel for sharing this!

Don't disable zoom

Harmful divs

If you put a div in the wrong place, it can have serious negative side effects.

And here's Manuel again; I didn't realize that div elements can harm or break user experience. divs can mess with figure and details elements making them inaccessible for assistive technology. Today I learned!

Avoid the div soup

How to define where to break words

Examples showing how to use 'wbr' and '&ZeroWidthSpace'

I have to admit I'm terribly confused by the CSS properties overflow-wrap, word-break and line-break. But after reading Will's post, I was finally able to fix some overflowing words on my blog. Thanks Will!

Break your words

Random MDN – Ways to create a new stacking context

The stacking context – The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.

From the unlimited knowledge archive called MDN. How many ways exist to create a new CSS stacking context? There are more than ten! As usual, MDN has you covered to learn more.

Stack all the things

TIL recap – Sparse JavaScript arrays

JavaScript code: let numbers = [ 1, 2, 3, 4 ]; delete numbers[ 1 ];  numbers.forEach((value, index) => console.log(value, index)); // 1, 0 // 3, 2 // 4, 3

Did you know that JavaScript arrays can have holes and, even wilder, that array methods like forEach just jump over the gaps? Now you do! 😉

Learn more about sparse arrays

If you learned something new, whether small or big, old or new, documented or not, I'd love to include more learnings in this newsletter. Send me an email, and I'm happy to share your discovery!

Three valuable projects to have a look at

A new Tiny Helper

Color morph UI including a beautiful gradient.

If you're on the hunt for colorful CSS or SVG gradients, Color-Morph helps out. Choose a primary color and have countless gradient variations at your fingertips.

Color your sites

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

Thought of the week

Kevin shared an extensive list of life advice. There are good entries in there. It's impressive that Kevin creates these posts once a year!

What you do on your bad days matters more than what you do on your good days.

A song that makes you stop coding

Athlete cover for chances showing the band standing in front of a white wall.

This week's song is a slow indie track from 2005. I used to love the band Athlete. Their song "Chances" has everything that gives me goosebumps. There's a piano, strings and dramatic chorus. And I still love it! 💙

Listen to "Chances"

Thank you for reading!

And that's a wrap for the sixty-sixth Web Weekly! If you enjoy this newsletter, I'd love you to tell others about it. ♥️

If you're not a subscriber, you can change that! 😉

And with that, take care of yourselves, friends - mentally, physically, and emotionally. I'll see you next week! 👋

Related Topics

Related Articles