🧢 Stefan's Web Weekly #10 
Tags: webdev
Published: 2021-03-15 10:03:42

---
title: 🧢 Stefan's Web Weekly #10 
published: true
description: Repeating CSS gradients, maker stories and the scary insecure web ecosystem.
tags: webdev
canonical_url: https://www.stefanjudis.com/blog/web-weekly-10/
series: Web Weekly
---

## Welcome to Web Weekly #10

To start this week's edition, I want to ask you: **what great resources, articles or videos did you discover recently**? I'd love to include a "{YOUR_NAME} recommends" section in this newsletter. Please share resources with me by replying to this email (or [clicking this link when you're reading the newsletter online](mailto:stefanjudis@gmail.com)).

This week's Web Weekly includes CSS tricks such as repeating gradients and the `:is` pseudo-class, a fascinating maker story, facts about the scary insecure web ecosystem, and, as always, GitHub repositories, new Tiny Helpers and some music.

Ready? Steady? Go!

## The `:is` pseudo-class in CSS

![Kevin Powell describing CSS :is](//images.ctfassets.net/f20lfrunubsq/4Yk5201JVKb7roeR4d8Liv/12fd7ff35e76426636d028a950d12e79/Screenshot_2021-03-14_at_22.42.25.png)

I discovered Kevin Powell's YouTube channel, and he's such an excellent teacher. If you're wondering what the `:is` pseudo-class is about, this video is golden.

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=McC4QkCvbaY">Learn more about :is</a>

## "Objective" search engine results

![Search results in google and duckduckgo showing women and landscapes for the term beautiful](//images.ctfassets.net/f20lfrunubsq/Etx1uUfj8u0mfPKnJfikW/e228bc6eac389237d2a4cbaa0bdc68e7/Screenshot_2021-03-14_at_23.08.37.png)

How different could various search engine results be for general terms such as "beautiful". It turns out, very different! David Merian shared the results of Google and DuckDuckGo. This example shows the tech giants' control over the content we all consume. It's scary!

👉 <a class="btn btn__small" href="https://twitter.com/Recruit_and_U/status/1369379792538238981?s=20">Check the tweet</a>


## The insecure system of programming dependencies

![The code was meant for internal PayPal use, and, in its package.json file, appeared to contain a mix of public and private dependencies — public packages from npm, as well as non-public package names, most likely hosted internally by PayPal. These names did not exist on the public npm registry at the time.](//images.ctfassets.net/f20lfrunubsq/3P8VkU8umz2htaqS3afywo/167ef2cdd6e4b0fc297173e795b04d07/Screenshot_2021-03-08_at_10.48.11.png)

This post is wild! Alex Birsan shared how he made it to run code in the infrastructure of companies such as Apple, Netflix and PayPal. All that was possible thanks to the insecure way we install software dependencies.

👉 <a class="btn btn__small" href="https://medium.com/@alex.birsan/dependency-confusion-4a5d60fec610">Read this scary story</a>

## Makers gonna make...

![💡.kz, 👑.kz, 🌈.kz, 😎.kz. Buy, buy, buy, buy.  It was slightly painful watching my bank account going down, and the number of emoji domains go up.  80 emojis in, forking over money for a goat emoji domain name, you seriously start to question what you're doing.  $1200 later, 150 emoji domains were mine.](//images.ctfassets.net/f20lfrunubsq/MOAxEsjEfo4yobXLYeZbv/88e7c04e676eaf459432c169181d33c0/Screenshot_2021-03-14_at_23.14.14.png)

I love this story. Ben Stokes found out about emoji URLs, dug into the technical details, had an idea and went on to build a quick product. 

👉 <a class="btn btn__small" href="https://tinyprojects.dev/projects/mailoji">Learn more about the emoji product</a>

## The unhealthy hustle culture

![I can’t be productive, and I can’t fully relax, and I can’t possibly be alone in this.](//images.ctfassets.net/f20lfrunubsq/3VEh36b2cbOlwlWMWzJXhB/8f9c0e0f0cb90dcd73df8b7c0441b924/Screenshot_2021-03-14_at_23.01.10.png)

Speaking about maker culture... Many people have side hustles these days. Heck, I'm writing a newsletter every Sunday evening. 🙈 Molly Conway questions if that's all worth it. 

👉 <a class="btn btn__small" href="https://repeller.com/trap-of-turning-hobbies-into-hustles/">Reconsider your side projects</a>

## The user experience of disabled UI elements

![Do/Dont example of disabled UI elements](//images.ctfassets.net/f20lfrunubsq/6nG1B5JXvnMUGFvJm7jQA5/7ea50d89cbdcc7320d7617213af507f4/Screenshot_2021-03-14_at_22.55.49.png)

Since reading [Disabled buttons suck](https://axesslab.com/disabled-buttons-suck/), I rethink putting `disabled` attributes on buttons. Justin Win shares best practices and alternatives to disabled UI elements that provide a better user experience.

👉 <a class="btn btn__small" href="https://stories.justinewin.com/disabled-buttons-dont-have-to-suck-10da0bb6d37e">Rethink your UI</a>

## CSS functions to repeat gradients

![CSS repeat gradient function explanation](//images.ctfassets.net/f20lfrunubsq/2ydfRQaPwP2lZoVaSa51Y4/ee843e87e90364dcf6f972113b14e08e/Screenshot_2021-03-14_at_22.50.29.png)

This week I learned that CSS defines functions to repeat gradients. I honestly wonder why I haven't seen these functions before. 😲

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/today-i-learned/css-defines-functions-to-repeat-gradients/">Repeat your CSS gradients</a>

## How to succeed as a writer

![You’re not alone.  Every writer doubts their ability to succeed — even the successful ones. ](//images.ctfassets.net/f20lfrunubsq/1Y8hLbKSAfpYsSqDhld3HY/d927be1b67a62fe797e7a93a46a1b347/Screenshot_2021-03-14_at_22.57.00.png)

Josh Spector wrote a wonderful motivational piece on writing and blogging. If you have doubts about publishing things online, this post is for you!

👉 <a class="btn btn__small" href="https://joshspector.com/succeed-as-a-writer/">Become a successful writer</a>

## Make alt text required when tweeting images

![Screenshot of twitter UI including a red "Add alt text" button](//images.ctfassets.net/f20lfrunubsq/7o5BsOvC4quOhYkLcO6PBA/5f2d28373ae7694030d9f8e24fd4338a/Screenshot_2021-03-14_at_23.20.58.png)

Since reading [Eric Meyer's post that explains how to change Twitter to show images without alt text in grayscale](https://meyerweb.com/eric/thoughts/2021/01/01/highlighting-accessible-twitter-content/), it's scary to see how many images are inaccessible. I came across a Chrome/Firefox extension that enforces alt text when tweeting and installed it right away.

👉 <a class="btn btn__small" href="https://twitter.com/henrikbengtsson/status/1362462144449503232">Require image alt text to tweet</a>

## side-by-side CLI package diffs

![npm side by side diff in the terminal](//images.ctfassets.net/f20lfrunubsq/3OOSOhbqxgz6OcLH7rzwA9/3fd785db0169d609d9bcc31fef6395b5/Screenshot_2021-03-13_at_20.31.18.png)

The npm CLI tool recently got a valuable addition – `diff`. I updated one of my blog posts to reflect these changes. Read the post to find out how to show npm package diffs side-by-side right in your terminal.

👉 <a class="btn btn__small" href="https://www.stefanjudis.com/snippets/how-to-create-a-diff-of-npm-package-releases-on-the-command-line/">Start diffing your dependencies</a>

## The secret of convincing presentations

![A good litmus test for images on slides: can you add a meaningful caption to the image - i.e., is there a point to the image? If you can’t write a caption for the image, you likely don’t need it there.](//images.ctfassets.net/f20lfrunubsq/G6WAZdYDgGmWG2XEB088k/6af733f54b1404d6a99b7d9db9c64962/Screenshot_2021-03-14_at_22.47.10.png)

Public speaking (and slide design especially) is an art. When you get the people's attention for some time, it's on you to get the most out of their time. Tom Critchlow's post "Good Slides Reduce Complexity" includes valuable advice!

👉 <a class="btn btn__small" href="https://seomba.substack.com/p/good-slides-reduce-complexity">Improve your presentations</a>

## New tiny helpers

![Screenshots of unicode range interchange, myScale and ikon](//images.ctfassets.net/f20lfrunubsq/5OK3XrfTa1mV20Uyl1Hc8j/f31f06508d7ddf6a88c6993ef6f67e5b/Screenshot_2021-03-14_at_23.42.51.png)

- [Unicode Range Interchange](https://www.zachleat.com/unicode-range-interchange/) – Do math on unicode-range values for web fonts.
- [myScale](https://webkul.github.io/myscale/) – A quick SVG Icon Resizer.
- [ikon](https://ikon.oliverturner.cloud/) – Build downloadable custom sprite sheets from dragged-and-dropped directories 

## Three useful projects to have a look at 

- [zachleat/glyphhanger](https://github.com/zachleat/glyphhanger) – Your web font utility belt.
- [artperrin/image2csv](https://github.com/artperrin/image2csv) – Convert tables stored as images to an usable .csv file 
- [5t3ph/11ty-web-component-generator](https://github.com/5t3ph/11ty-web-component-generator) –  Use the power of 11ty to generate web components (custom elements).

## A quote to think about

[Remy Sharp shared quick thoughts on paid online products](https://remysharp.com/links/2021-02-11-b3204be1). I pay for a handful of tools I love using and 100% with the following statement.

> Free is great, but longevity is better and always worth paying for.

## A song that makes you stop coding

![Cover: Patrick Wolf – Time of my life](//images.ctfassets.net/f20lfrunubsq/16YaOtp3kl6TSG43e5u7G8/4858449951944234dd328dbf770262ab/Screenshot_2021-03-14_at_23.46.53.png)

This week's song is one of my absolute favourite lifetime tracks. Patrick Wolf's "Time of my life" includes a piano, lots of strings, and it becomes so beautiful powerful to the end. I'll never get tired of this song!

👉 <a class="btn btn__small" href="https://www.youtube.com/watch?v=mn0vieqyu7E">Listen to Patrick Wolf</a>

---

And that's a wrap for the tenth Web Weekly! 🎉 (oh wow... time flies)

Writing this newsletter takes me three hours every Sunday. If you enjoyed this edition, [a quick share means the world to me](https://twitter.com/intent/tweet?text=I%20like%20@stefanjudis%20weekly%20newsletter&url=https://www.stefanjudis.com/blog/web-weekly-10/) and [you can subscribe on my site](https://www.stefanjudis.com/newsletter/), too. ♥️

**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](https://www.stefanjudis.com/feeds/).