Web Weekly #29

Published at: Jul 25 2021
Updated at: Jul 25 2021
Reading time: 8min

The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Welcome to Web Weekly #29!

Cześć, friends!

It's been a while, but I visited my family this week! 🎉 My grandparents celebrated their 60th wedding anniversary (holy moly!), and I went home to "party" with them. It was a good week, and I hope the same applies to you!

Before we jump into web stuff, let me share something super cute (make sure to watch it until the end). 🐷

This week's Web Weekly includes:

questions to ask when interviewing for a new job
how to detect media query support
new web security features

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

Ready? Steady. Go!

Visual hierarchy in designs

Sign with the words "Baby needs beers & wine"

I admire people who can design sites that are good-looking and convey a message very well. A lot of times, good designs rely on spacing and visual hierarchy. Andrew Wilshere's post doesn't teach new things about how to design well, but the examples of poorly structured typography made me smile.

Find some "interesting" messages

Lessons learned from reading a user agent stylesheet

@namespace; The very first thing I encounter, before any novel selectors, properties, or values, is this thing I’ve never seen or used in my life: @namespace. My first reaction: “what the hell is this?”

When you're building a website without a stylesheet, you will discover the browser's default styles. Different headings will have different font sizes, and paragraphs will have pre-defined margins.

These styles are defined in the User-Agent stylesheet. Jim Nielsen shared his findings when reading Safari's default styles. It's a nicely nerdy post with some valuable insights about CSS.

(Did you know that there's an XML namespace in CSS? 😲)

Discover weird things in Safari's UA stylesheet

Questions to ask when interviewing for a new job

During my search for a new role, I kept a list of questions to use during the process. In case they're useful to me in the future (or anyone else for that matter!), I wanted to write a post with the key ones.

Interviewing for a new job is demanding and often unstructured. Sally Lait wrote an excellent article outlining questions you should ask during the process. The questions cover general expectations, company vision and culture, daily work, processes and salary negotiation.

This post is one for your bookmarks, I promise!

Structure your next interview process

On habits, routines and time tracking

4. Enjoyed my “chill time” more than ever Here’s something interesting. This experiment, which was chiefly meant to increase my productivity, had another very unexpected — but very welcomed — effect: it increased the quality of my “chill time”, as well!

My daily habits slipped over the last few months, but I'm slowly coming back on track this month. Daily and monthly goals help me to live the life I want to live.

Bilaniuc Dragos shared his approach and outcomes of tracking all his daily activities. I can relate to many points he makes.

Should you start tracking your life?

Thoughts and tips on dealing with email

6. If you reply to emails immediately, you train people to expect you to reply immediately. 7. The more your email sounds like you speak, the more effective it will be. 8. A good email with a bad subject line isn’t a good email.

Nobody likes emails (except Chris Coyier, maybe). My email inbox is this anxiety-triggering overflowing bucket of TODOs. Josh Spector collected thoughts about email that made me reconsider how I treat my inbox.

Reconsider how you do email

TIL: Hyphenation depends on the document language

An interactive demo to toggle between languages to see how hyphenation changes

I fixed a hyphenation bug on my blog, and that led me down a rabbit hole. It might be obvious to some of you, but I learned that the lang attribute affects how hyphens: auto works. I never thought of that, and it makes it even more critical to define the lang attribute on all of your pages.

Learn more about hyphenation

Web development and its edge cases

Web Features That May Not Work As You’d Expect

The web platform is massive these days! All these new functionalities make it challenging to keep track. And it becomes even more complicated when certain features don't work like you expect them to. Farai Gandiya collected an excellent list of edge cases and "features" in web development.

A ♥️ for security stuff

Security headers recommended for websites that handle sensitive user data: Content Security Policy (CSP) Trusted Types Security headers recommended for all websites: X-Content-Type-Options X-Frame-Options Cross-Origin Resource Policy (CORP) Cross-Origin Opener Policy (COOP) HTTP Strict Transport Security (HSTS) Security headers for websites with advanced capabilities: Cross-Origin Resource Sharing (CORS) Cross-Origin Embedder Policy (COEP)

CSP, Trusted Types, CORP, COOP, HSTS, COEP, etc. – there are various security features one can implement these days. I'm only using CSP so far (many new things are also Chrome-only), but it's important to stay up-to-date with the latest features to make the web more secure. This article on web.dev is a good start!

Learn more about the new security features

A VSCode extension to make functions with too many parameters more readable

Source code with annotations: function doSomething(isGreat, doLater, cleanUpAfterwards) { // ... } doSomething(isGreat: true, doLater: true, cleanUpAfterwards: true);

I'm no fan of function signatures with more than three parameters because they make code hard to read. I discovered the "Inline parameters" VSCode extension. It makes code easier to understand by annotating function arguments.

Start annotating your function calls

How to detect media query support

Detecting media query support in CSS To detect if a media query is supported in CSS at all, you can use the following CSS: @media not all and (prefers-reduced-data), (prefers-reduced-data) { ... }

Kilian's article about how to detect media query support is a brain teaser. It took me a few attempts to grasp the concept, but it's worth it! I learned a few new things about media queries in CSS (and JavaScript).

Detect media query support

Reader shout out 💙

Source code of a dollar command with a confirmation dialog

Gonçalo Morais took the $ shell command I shared and added a confirmation dialog to avoid running malicious code accidentally. That's a great idea, and thank you so much for sharing, Gonçalo!

Add confirmation to your dollar command

Three valuable projects to have a look at

ajitid/fzf-for-js – Do fuzzy matching using the FZF algorithm in JavaScript.
Schniz/fnm – Fast and simple Node.js version manager, built in Rust. (I might give that a try soon.)
bndw/wifi-card – Print a QR code for connecting to your WiFi.

A new Tiny Helper

CSP Evaluator allows developers and security experts to check if a Content Security Policy (CSP) serves as a strong mitigation against cross-site scripting attacks. It assists with the process of reviewing CSP policies, which is usually a manual task, and helps identify subtle CSP bypasses which undermine the value of a policy. CSP Evaluator checks are based on a large-scale study and are aimed to help developers to harden their CSP and improve the security of their applications. This tool (also available as a Chrome extension) is provided only for the convenience of developers and Google provides no guarantees or warranties for this tool.

Speaking of security, the CSP Evaluator analyzes your CSP configuration and provides valuable tips on making it safer.

Check your CSP rules

Find more single-purpose online tools on tiny-helpers.dev The site lists 396 tools right now; can we make it to 400 this week? If you use tools that are not listed yet, please reach out! 🙈

A quote to think about

I found this week's quote in the excellent "Command N + Command S" newsletter. Morgan Housel's article Harder Than It Looks, Not As Fun as It Seems describes the fact that everything looks more impressive and better from "the outside". This fact applies to companies, people, Instagram; you name it...

A look behind the curtain reveals that everybody struggles. All the time!

It’s easiest to convince people that you’re special if they don’t know you well enough to see all the ways you’re not.

A song that makes you stop coding

Cover of Grandbrothers - Shorelines (Official Audio)

I listened to the Grandbrothers artist radio on Spotify this week. "Shorelines" is another beautiful track combining piano tunes with electronic beats.

Listen to "Shorelines"

Thank you for reading!

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

Share it on Twitter.
Forward it to someone who might like 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.

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

Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.