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.

Happy Monday, friends!

Today's Web Weekly is the sixtieth edition. 😊 It's wild that this tiny newsletter has been with me for over a year now. Thanks for reading along!

This time Web Weekly includes:

  • a guide to networking at developer events
  • the security problems in the npm ecosystem
  • the difference between onchange and onChange

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

On a personal note

Today I'm entering my last week working for Contentful. It's been fabulous two years. I learned so much about management and leadership. But now, after a month-long break, I'll start my next adventure. Watch the space!

And because the situation in Europe didn't get any better. If you can, please consider offering help or donating money to the folks in Ukraine.

πŸ’™πŸ’›

Something that made me smile this week

Tweet: The Rube Goldberg machine of all Rube Goldberg machines. From way downtown β€” bang…

Do you know Rube Goldberg machines? They're these constructions in which a ball rolls over a plank just to hit a cube which then triggers some plants to be watered and a bowling ball making a strike. You get the idea.

I love watching these, and this three minutes long one is outstanding!

Kick off the reaction chain

onchange vs. onChange

A colleague raised a fair question, why doesn’t an input element's onchange event type behave the same as React’s onChange?

Hah! I never realized that the native onChange and React's onchange methods aren't doing the same things. Ezell explains where the two methods differ.

Learn more about change

The importance of social events

How nice would it be if someone came up to you and just gave you a warm smile, said hello, and asked you a genuine question about yourself? You can be that person for someone!

When I became a developer advocate, I started going to developer conferences and meetups alone. And oh well, that's been awkward. Soon, when conferences come back, it probably still is.

Entering a conversation, introducing yourself, finding things to talk about... it's tough! But it's also worth it. I got to know so many lovely people in the developer community. And building a network helped my career growth, too.

Sam describes his approach to networking in his "Painfully Shy Developer's Guide to Networking for a Better Job". It's a great read!

Start networking

Single character npm packages are valid

Terminal showing the command "npm i - g foo" which accidentally installs the "-", "g" and "foo" package.

Whenever I discover these obvious security flaws in our web ecosystem, I ask myself why it doesn't implode any minute. πŸ€·β€β™‚οΈ

Don't install the "-" package

How to secure your project against malicious npm dependencies

Alert: peacenotwar module sabotages npm developers in the node-ipc package to protest the invasion of Ukraine

Speaking of security, the maintainer of the popular node-ipc package decided to protest against the Ukraine war by writing files to the computers installing the package.

Our friends at Snyk did a great job analyzing what happened with the package when they evaluated the risk. It's a detailed article that reads like a crime story.

Learn more about the node-ipc incident

Snyk recommends adding the overrides property to your package.json. Read more about npm overrides on the blog.

{
  "overrides": {
    "node-ipc@>9.2.1 <10": "9.2.1",
    "node-ipc@>10.1.0": "10.1.0"
  }
}

TIL – you can align the text of the last paragraph line separately

Interface: Choose a text-align-last option with the options: auto, left, center, right, start, end and justify.

I'll probably never use this. But do you know that you can configure the text alignment of the last paragraph line with text-align-last? I didn't. πŸ™ˆ

Align the last line

Monorepos explained

monorepo.tools - Everything you need to know about monorepos, and the tools to build them.

monorepo.tools is an excellent explainer of the monorepo trend and why monorepos can be valuable.

Learn more about Monorepos

The problem with CSS shorthands

Be aware of shorthands – Keep in mind that when you set a shorthand property, e.g., text-decoration: underline, any missing parts in the value are re-initialized. This is also why styles such as background-repeat: no-repeat are undone if you set background: url(flower.jpg) afterwards.

Ε ime shared his experience with the text-decoration CSS property. It's a valuable read going into CSS shorthands, and he also explains the :any-link pseudo-class. πŸ’―

Keep it short

Custom key mappings for the win!

Karabiner interface showing the rule: Map caps_lock to left_control if pressed with other keys, chance caps_lock to escape if pressed alone.

While reading Mats' mechanical keyboard journey, one paragraph about the CAPS_LOCK key stood out.

My CAPS_LOCK maps to CTRL for ages (you can define this setting in the macOS keyboard settings), but Mats took the remapping to the next level by mapping CAPS_LOCK to two different keys depending on how you press it.

I went down a rabbit hole, installed Karabiner, and now my CAPS_LOCK does two things:

  • when quickly pressed it's mapping to ESC
  • when held and pressed with another key, it's mapped to CTRL

So sweet!

Enhance your keys with Karabiner

Find better movies on Netflix

What are Netflix Codes? πŸ€·β€β™‚οΈ  Netflix uses a unique system to categorize the available titles on it's platform - the movies and TV shows. Strangely, Netflix does not have all the specific granular categories listed. You have to rely on search which is a hit or miss. In this site, you will find codes (as links) to every single category available on Netflix.

Is it just me, or is the Netflix UI and recommendation system terrible? I always see the same shows, and finding a Saturday night movie can be quite a challenge. netflixcodeslist.com shares hidden categories that you can use to find new shows and not watch "Friends" for the fifth time in a row like I do right now.

Find good stuff on Netflix

TIL recap – labels trigger states and event handlers for their connected inputs

Code example showing that a :hover class is triggered when you hover an associated label.

Did you know that when you hover a label, its associated input's :hover style are applied? Now you do. πŸ˜‰

Check your form styles

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

CropStore interface including a bunch of controls and ways to crop an image

CropScore is an online image cropper designed for content creators. Upload an image and crop it to fit into the preferred dimensions of Twitter, YouTube, LinkedIn, etc.

Crop your images

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

A quote to think about

The book authors Annie Murphy Paul and Adam Grant discussed the importance of being outside in the Worklife podcast.

Annie's quote of the week is perfect for motivating yourself to enjoy the world beyond a screen.

Little screens make for little thoughts.

A song that makes you stop coding

The orchestra "MEUTE" on stage

Last week's weekly included Disclosure's "You & Me". My buddy Ben pointed me to a "You & Me" cover from the band MEUTE. MEUTE is the most remarkable music discovery I had in the last few years.

The orchestra covers and plays electro songs. Their concerts are like handmade DJ sets. 🀯 And because this is so cool, this week's "song" is a MEUTE live-set from Paris. Enjoy!

Listen to MEUTE live

Thank you for reading!

And that's a wrap for the sixtieth 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! πŸ‘‹

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

Related Topics

Related Articles