DEV Community

Stefan Judis
Stefan Judis

Posted on • Updated on • Originally published at stefanjudis.com

🧒 Stefan's Web Weekly #15

Welcome to Web Weekly 15!

Brian Douglas from JAMstack radio invited me to talk about Contentful and all things headless CMS' this week. It was good fun (Brian is an excellent host). The show will be released in the upcoming weeks.

Apart from that, I had a very smooth week. My biggest highlight was that my "Jazz work playlist" was replaced by chilled lofi music. It's so good! Read on to learn more.

This week's Web Weekly includes...

  • nerdy facts about JavaScript classes and date handling
  • resources about HTML elements and emails
  • guidelines to streamline your team's communication

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

Ready? Steady. Go!

The world's first computer program

Heroes of computer science

Do you know who Ada Lovelace is? I didn't, but it turns out that she was an English mathematician and is responsible for the world's first computer program. One of this newsletter's readers, Gonçalo Morais, started the newsletter "Heroes of Computer Science".

That's a great idea, and I'm all up for learning more about computer history.

πŸ‘‰ Check out "Heroes of Computer Science"

How to identify pseudo-element selectors in Chrome's DevTools

How to use DevTools to peek inside <input type="file">

Last week I learned that you could style the "Browse" button of file inputs. Bramus reacted to this learning and taught me how to inspect native HTML elements and find out which pseudo-elements are available.

πŸ‘‰ Start inspecting native elements

Things to keep an eye on: Google's FLoC

This post was written in a hurry in response to some misinformation about Google’s newest Web antifeature, Federated Learning of Cohorts (FLoC). Google’s FLoC is an attempt to track users even when their browsers (rightly) block third-party cookies. The initial blog posts about this issue were quite benign, but online discussions quickly devolved into panic and support for building flawed work-arounds into upstream software. I had to write this before things got out of hand.

I mentioned it in a previous newsletter; Google starts rolling out FLoC (Federated Learning of Cohorts). It's Google's newest take to deal with their core business – advertising. FLoC is aiming to replace cookie-based user tracking. I read a few articles about it, but I can't say that I understand the technology yet. Rohan Kumar shares misconceptions about it and goes into technical details of this new technology (document.interestCohort).

πŸ‘‰ Learn more about FLoC

Save all these screens with screensaver.js

Screensaver.js – Most useful liibrary for your website. Starts a screensaver after a timout of seconds of inactivity on your site.

People occasionally sneak into my DMs to tell me that they discovered my site's screensaver. I made it easier for my visitors to enable it this week. Here's the code that I use on my site. I still think that it's super funny! πŸ™ˆ

πŸ‘‰ Implement Screensaver.js

If you implement Screensaver.js, please let me know! I'd love to share some creative screensaver examples next week.

A complete guide to HTML email

Table of contents: accessibility, bugs, dark mode, editors, feature support, frameworks, getting started, guides and resources, inline CSS, inspiration, mailto link generator, marketing, meta languages, previews, productivity, remove unused CSS, target email clients, templates, tracking blocker, transform HTML

Writing HTML emails is complicated, and I know very few people who like coding emails. Luckily Vitaly Friedman published an extensive list of resources (see the table of contents above) that help dealing with emails.

Save the link, people! It'll come in handy in the future.

πŸ‘‰ Find resources to rock your next HTML email

Chilled beats with soothing background videos

lofi.cafe showing a soothing gif while playing some music

I came across lofi.cafe and it replaced Slack on my second monitor multiple times. The site plays lofi tracks with relaxing video backgrounds. Wonderful!

πŸ‘‰ Put some music on your 2nd monitor

The finished HTMLElementInATweet series

100 days – 100 HTML elements in a Tweet

Michael Scharnagl went on the journey to tweet one HTML element per day for a hundred days. He finished the series and wrapped up #HTMLElementInATweet on his blog.

If you want to level up your semantic HTML game, this post is for you!

πŸ‘‰ Discover new HTML elements

JavaScript classes aren't "just" syntactic sugar

After reading yet another blog post about JS classes being β€œjust sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.

JavaScript classes are around for a while now. I don't use them very often, but I read countless times that "they're just sugar on top of JavaScript's prototypal inheritance". Andrea Giammarchi tackles this assumption and proves that classes are more than just syntactic sugar.

Get ready; there are many nerdy JS details in this post.

πŸ‘‰ Learn more about JS classes

Will JavaScript date handling become easier?

JavaScript Temporal API

Dealing with dates is complicated in every programming language. JavaScript dates are extra terrible. But there's hope: an early proposal (stage 2) aims to fix date handling. Nathan Sebhastian wrote down what you need to know about the new Temporal API.

πŸ‘‰ Get excited about easier date handling

Define how to communicate in your team

The problem isn’t our communication tools and channels themselves β€” it’s our misaligned assumptions about how to use them.

If you're working in a bigger company you know the following problem.

There are too many Slack messages, your email inbox gave up counting your unread emails and shows 1000+, the used tools and platforms scream for your attention to tell you about all the things your colleagues are doing, ... it's just too much – too much of everything.

Matt LeMay shared how a communication manual helped them to handle all this overload in their company.

πŸ‘‰ Define a communication manual

Reader shout out πŸ’™

Blogs I love to read

Victor Ofoegbu publishes weekly web development notes on his blog, and also listed some excellent blogs that you should check. He included my blog in the list. Thank you Victor!

πŸ‘‰ Find great blogs to read

A new Tiny Helper

Software licenses in plain english

You might have been in this sitation: you read the same software license repeatedly but still don't understand what these words are telling you. tl;drlegal translates software licences into plain English so that you can find out what you're allowed to do with the source code.

πŸ‘‰ Visit tl;drlegal

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

Three useful projects to have a look at

A quote to think about

I found this week's quote in Sarah Jaffe's article Against Loving Your Job.

Work will never love us back. But other people will.

A song that makes you stop coding

Cover of Roots – Kupla

A friend shared "Kupla – Roots" with me, and I discovered a whole lot of beautiful lofi tracks. The track includes a chilled beat and piano tunes and I'm so here for it!

πŸ‘‰ Listen to "Roots"

Thank you for reading!

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

PS. I heard the cool kids use RSS. You can find multiple feeds on my site.

Oldest comments (0)