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

Happy Monday, party people! πŸ‘‹

Hello, hello, hello! I got sick (no COVID) while traveling to GOTO Copenhagen this week. It's been a rough week, and that's why I'm a little later with sending Web Weekly than usual.

Before we get into my week's favorites, though, I'd love to ask you something. As you know, I document my web development learnings, and I'd love to include you and the almost 2k subscribers of this newsletter.

If you learned something, whether it's small or big, documented or not, I'd love to hear from you and include it in Web Weekly. If that sounds great, hit reply and let me know!

And with that – this week's Web Weekly includes:

  • Negative zeroes in JavaScript
  • Gatekeeping in tech
  • Programming cheatsheets

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

Something that made me smile

Cunningham's Law states "the best way to get the right answer on the internet is not to ask a question; it's to post the wrong answer."

There are various programming laws: Murphy's law or Conway's law are only two of them. This week I learned that there is also a Cunningham's law. It describes that the best way to get a problem solution is to post the wrong approach to the internet. πŸ˜† People have opinions, you know. πŸ˜‰

jQuery Is Not Dead and That's Fine!

Jayne in front of her slides showing Gate-Keeping sentences like "Real developers use Ubuntu"

My friend Jayne Mast spoke at our conference Fast Forward. Her talk with the beautiful title "jQuery is not dead and that's fine" covered gatekeeping in tech. It's such a good talk; check it out!

Learn about gatekeeping in tech

More web.dev courses

Four web dev cours covering design, forms, PWA and CSS

You might know that the Chrome folks released a CSS course a few months ago. This week I was surprised to find out that they have been busy publishing more materials. web.dev now includes four courses in total. 😲

Considering the folks creating these, I'm sure they're high quality.

Learn on web.dev

CSS Grid can do many things: including transitioning height

Source code: .expander {   display: grid;   grid-template-rows: 0fr;   transition: grid-template-rows 1s; }  .expander.expanded {   grid-template-rows: 1fr; }

Transitioning the CSS height property is painful. Either you have to use imprecise CSS hacks with max-height or JavaScript to "slide up an element" nicely. Chris Coyier shared a super exciting snippet using CSS grid that makes height transitions possible.

Disclaimer: it only works in Firefox right now. But let's all head over to the linked Chromium bug and make height transitions a reality, shall we?

Animate height

Don't lose your "swagger"!

You lost yourself. What happened to the Kevin I hired? To the spunky kid I took a bet on? You need to get that back, and fast. Or you're not gonna make it man.

There's nothing better than a personal story – Kevin Yien described his experience working for a company and losing his "swagger". But what's swagger? For him, it's "knowing what he's good at", but after reading his post, I think it's more about trusting yourself, sticking up to your values, and being your best self. πŸ™ˆ

Either way, I enjoyed reading this post a lot, and it made me reflect on my journey in tech.

Think of your swagger

Shopify hydrogen

Framework for dynamic commerce – Hydrogen's React-based framework for building custom storefronts on Shopify gives you everything you need to start fast, build fast, and deliver the best personalized shopping experiences.

A while ago, I looked into integrating Shopify into a website. It seemed to be a lot of work. Luckily, Shopify released a preview of Hydrogen. Hydrogen is a set of react components coming with a good-looking boilerplate. They'll also provide optimized hosting eventually.

I loved that Shopify founder, Tobi Lutke, demoed the new framework. πŸ™ˆ

Try Hydrogen

More invisible character attacks

Without further ado, here’s the backdoor. Can you spot it?

I shared the Trojan Horse security whitepaper last week. Wolfgang Ettlinger continued the topic and described how invisible characters can be used in JavaScript. This stuff is so fascinating!

Explore hidden characters in JS

Messages without context

It’s possibly the best advice for managers I’ve given so far. When you’re communicating with your team, lead with context and reassurance. Never message someone on your team, β€œlet’s talk when you get a minute”. That’s void of information and scary as heck!

My mum often sends me messages like "Can we talk?". It makes me anxious immediately. Is something wrong with my parents? Did I do something? Messages without context can be terrifying.

The thing is, though, that I send these messages to my team or friends, too. Adam Keys reminded me of being less "spooky".

Don't be spooky!

A Cheatsheets is worth 1000 docs pages

Rico's cheatsheets  Hey! I'm @rstacruz and this is a modest collection of cheatsheets I've written.

Rico Sta. Cruz' devhints.io is a collection of cheatsheets that helped me out yesterday. I was trying to tweak a shell script and struggled badly. The bash cheatsheet included so much valuable info that I succeeded. Thank you, Rico!

As you know, I love it when people put things like that online!

Cheat with sheets

Framework choices and Web Vitals

Report showing Web Vitals scoring in correlation to Web Vitals

The following Google Data studio report correlates web technology choices with their resulting Web Vitals scores. I love this information!

Analyze the web!

TIL recap: Negative zeroes in JavaScript

Source code: Object.is(-0, 0);    // false Object.is(NaN, NaN); // true

Did you know that JavaScript supports a negative zero (-0)? I learned about this fact three years ago. πŸ™ˆ

Discover negative zeroes

Three valuable projects to have a look at

  • chubin/awesome-console-services – A curated list of awesome console services (reachable via HTTP, HTTPS and other network protocols).
  • natethinks/jog – Simple script to print the last 10 commands you ran in the current directory. (That's a good one, I'll cover it next week πŸ™ˆ)
  • quicktype/quicktype – Generate types and converters from JSON, Schema, and GraphQL.

A new Tiny Helper

Free Google Title Rewrite checker

If you're publishing content online, you might have noticed that Google Search tries to be smart regarding page titles. Occasionally the displayed search result titles vary quite a bit from what you defined. The Google Rewrite checker can help to spot these differences.

Find different titles

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

A quote to think about

I just attended JSconf India and caught Sasha Shynkevich's talk "How to stop using JavaScript Frameworks and Start Living". Not surprising that it was right down my alley. Her talk included this week's quote. πŸ‘

One tool should not define your career.

A song that makes you stop coding

Kummer ft. Fred Rabe & RTO - "Der letzte Song (Alles wird gut)" | ZDF Magazin Royale

This week's song is a collaboration of Kummer and Fred Rabe from Giant Rooks. With Corona numbers rising and the grey winter approaching, I listened to "Der letzte Song (Alles wird gut)" on repeat. The chorus and background orchestra are just too good!

Listen to "Alles wird gut"

Thank you for reading!

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

Stay safe, and I'll talk to you next week! πŸŽ‰ πŸ‘‹

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

Related Topics

Related Articles