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.

Happy Monday, friends!

You may have noticed that I took a break from Web Weekly. I didn't feel like writing it and spent more time watching the news. Wherever you are, take care of yourself, rest and consider helping the people in the Ukraine.

This time Web Weekly includes:

  • resources to help the Ukraine
  • type checking of JavaScript files
  • the new dialog element

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

On a personal note

I just couldn't believe it because we're still in the pandemic, but we face a war in Europe. It's horrifying to see cities I've been to a few years ago being bombed and attacked. People leave their lives behind and are fleeing as we speak.

If you can, please consider offering help or donating. Smashing Mag shared resources on how you can help.

πŸ’™πŸ’›

Something that made me smile this week

PacMan in Google search results

Short'n'sweet: I discovered that Google Search lets you play PacMan when you're searching for it.

Play some PacMan

Not so secure web development

Installing an average npm package introduces an implicit trust on 79 third-party packages and 39 maintainers, creating a surprisingly large attack surface

Feross dropped a massive post on package managers, general web development and install scripts. In short: web development is everything but secure these days.

Learn more about web security

Twitter's first ten HTML lines

Twitter's first lines of HTML.

Unsurprisingly, Anand's post describing interviewing Frontend engineers using Twitter's HTML as an example sparked many heated discussions.

I'll leave it up to you to decide if Anand's approach is good or not, but the post includes excellent web development knowledge nevertheless.

Learn more about Twitter's HTML

A tough topic: salary negotiations

Ten Rules for Negotiating a Job Offer.

Discussing the details of a new job is an uncomfortable topic. Haseeb shared his tactical approach to negotiating. It's worth a read for sure!

Be a good negotiator

How to use TypeScript features without using TypeScript

JavaScript file including a `// @ts-check` comment on top followed by a JSDoc block and a function definition. The JSDoc block describes parameters and return types. VS Code shows warnings for code not following the type definitions.

The Twittersphere was all over a new ECMAScript proposal last week. The proposal defines that type definitions should be valid JavaScript. The catch: the types would be ignored and treated as inline comments.

The proposal led me down a rabbit hole of available VS Code features and it turns out: you can use type checking without writing TypeScript. 😲

Start type-checking your JS files

Be honest about how you feel

Most adults are in the habit of using overly-conceptual or metaphorical language to talk about how they feel. For example: stressed rather than afraid or upset rather than angry.

How often do you tell people that you're stressed when you're actually afraid, sad or angry? I do that occasionally for sure. Nick shares that properly labeling feelings makes your feel better emotionally. I'll try to follow this advice!

Improve your emotional health

The dialog element arrived

Dialog element support table showing that all major browsers support the dialog element.

The Safari 15.4 release looked like a minor release, but it's a big one. The release includes many much-needed features. To name a few additions:

  • image lazy loading via the loading attribute
  • the autofocus attribute
  • smooth scrolling via scroll-behavior

Safari also shipped the dialog element. If you want to learn what it's about, head over to the blog.

Discover the dialog element

Share how you work

An excerpt of a work preference doc. "Channels: For important things <500 words: Email. For important things >500 words: Almanac Doc. For simple urgent things: Text/Call. For complex urgent things: Meetings. For casual questions or updates: Slack.  Note: Assume I don’t see 50% of what you Slack to me. If me forgetting or not responding is not OK, use a different channel!

Every member of my team at Contentful filled out a work preference doc when they onboarded. The doc includes "Know Your Team" questions and describes how they want to communicate, when they're productive and what motivates them.

I'm a big fan of this document because it helps get to know each other.

I discovered Adam Nathan's "CEO Readme". The document is fascinating because a) it's from a CEO perspective, but b) it is also very in-depth. It made me think about my work preferences once more.

Set up a work preference document

MJML - a responsive email framework

The only framework that makes responsive email easy.

I discovered the MJML email framework last week. It's component-based, quick to use, and even offers a playground to create responsive emails. Multiple people told me that they're big fans.

Create responsive emails

Reader shoutout πŸ’™

Memote Wall showing a form for a Twitch channel and flying memotes

Juan reached out to me sharing that my article about emojis and tmi.js (Twitch's messaging library) helped him build www.memote-wall.com. If you're looking for a way to include all these chat emotes in your streams, check it out!

It makes me so happy when my humble writing is valuable. Thanks, Juan!

Add a new overlay to your stream

Random MDN

πŸ¦– Random MDN: Using the Web Animations API πŸ¦–  https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API  The Web Animations API lets us construct animations and control their playback with JavaScript. This article will start you off in the right direction with fun demos and tutorials featu…

I still haven't had the chance to play around with the Web Animations API even though it's cross-browser supported. If animations are your thing, check it out!

Learn more about the Web Animations API

TIL recap – package.json values are accessible in various places

A package.json file reference values in a config block in the scripts property.

Did you know that package.json values are accessible in npm/yarn scripts or even the JavaScript files you run? Now you do. πŸ˜‰

Clean up your scripts

If you learned something new, no matter if 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

pppointed – an interface to generate SVG buttons

pppointed is a handy tool to create SVG arrows. It's way better than googling for them, trust me!

Create SVG arrows

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

A quote to think about

The previous newsletter included thoughts on the prefers-reduced-motion media query. It's essential to respect user settings when building fancy and animated sites.

Jamie Kyle shared his frustration with the recent trend of heavily animated sites. It included this week's quote.

Your desire to make something look cool is not more important than making it accessible.

A song that makes you stop coding

Cover: "You & me" Flume remix

Disclosure's "You & Me" entered my Spotify playlist, and I'm still amazed about how good this sound mesh is. The chorus includes so many weird sounds making me bounce around right away.

Listen to "You & me"

Thank you for reading!

And that's a wrap for the fifty-ninth 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! πŸ˜‰

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

If you enjoyed this article...

Join 5.4k readers and learn something new every week with Web Weekly.

Web Weekly β€” Your friendly Web Dev newsletter
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.

Related Topics

Related Articles