Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
7min
Web Weekly keeps you up to date, teaches you web development tricks and covers all things working in tech. If you like it, subscribe below.

Guten Tag, lovely humans!

I usually try to ignore all this AI/ML stuff, but we're entering spooky times, and I decided it's better to be informed about what's happening.

DALLΒ·E is a fun example, right? Give the algorithm a random sentence and receive generated images. It's not perfect yet, but good enough to tweet some funny pictures.

Two Dalle examples.

And it's also cool that you can feed computers an image like the "Girl with a Pearl Earring", and they just extend it.

Girl with a Pearl Earring by Johannes Vermeer

Or pair rough sketches with a description to generate art. (This one's wild. πŸ‘‡)

Photoshop with an entirely generated image.

There's rapid development in all this, and it's scary. Because where will we draw the line?

Computers are becoming so good at painting, writing and creating that we'll always have to investigate if a human or an algorithm made something. Do we have to become experts in detecting AI? Or even use AI to recognize itself?

This image does not exist site.

In the past years, it's been essential to check resources and detect fake news created by humans. Now it feels like we enter a new era of fake content created by machines.

I can't say I'm thrilled...

On a brighter note, let's get into Web Stuff! Today you'll learn about:

  • Reasons to avoid defaut JavaScript exports
  • A complete guide to building high-quality websites
  • Class-less CSS frameworks

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

Lastly, welcome to the 21 new subscribers! I'm super excited to have you around! πŸ‘‹

Something that made me smile this week

A hamster in an adventure game.

I have no words for this video showing a hamster escaping prison, and I can't even imagine the time and sweat it took to create this video.

Escape prison

Should you ditch default JS exports?

JavaScript modules have two ways to define an export: default exports and named exports. In this article, I want to explain why default exports are a poor practice and lead to a worse developer experience.

I must admit that I usually don't follow any rules when exporting JavaScript ESM modules. My gut feeling decides if I go for a named or default export.

But Lloyd Atkinson made some strong points arguing for only using named exports. And what shall I say, he convinced me. πŸ™ˆ

Name all the things

Custom Git CLI commands

A two column terminal command

I'm a fan of fancy CLI commands and am always amazed how folks use fzf, the command-line fuzzy finder. Elijah Manor published short two-minute videos to level up your Git CLI flow. Nice work! πŸ‘

The most convenient way to inspect a file's history

githistory.xyz showing a file's git history

Oldie but goldie; I've forgotten about Rodrigo Pombo's "Git History", but it's probably the most convenient way to inspect a file's Git history.

Open a file on GitHub, replace github.com with github.githistory.xyz and boom! Quickly navigate all commits in a beautiful interface. Magic!

Inspect and chill

The power of native form validations

var input = document.getElementById("name"); if ( ! input.validity.valid ){   input.setCustomValidity(input.dataset.errorRequired);   input.reportValidity(); }

As you know, I'm a fan of using web platform features whenever possible. Aaron Gustafson wrote a nifty tutorial explaining all things about natively supported form validations.

Validate

Web developmet best practices

Best practices for inclusive textual websites – This is a β€œliving document” that I add to as I receive feedback. See the updated date and changelog after the post title.

I admire Rohan Kumar's work in the article "Best practices for inclusive textual websites". It's a massive (but worth it) living document covering almost everything you need to know when building for the web. πŸ‘

Build good stuff

Listen to the sound of nature

 Listen to nature sounds, fall in love with the Earth

I usually listen to music when I'm in front of my computer, but sometimes nothing fits. I'll give earth.fm a try now to listen to ambient nature sounds then.

Relax

The difference between useMemo and useCallback

useCallback serves the same purpose as useMemo, but it's built specifically for functions. We hand it a function directly, and it memoizes that function, threading it between renders.

Thanks to Josh Comeau, I finally understood when to use useMemo and useCallback. Thanks Josh!

Memoize when it makes sense

Class-less CSS

Here is the list of class-less CSS frameworks that you can checkout.

There are situations where you don't want to write much CSS or set up a development pipeline. This is when class-less CSS Frameworks shine.

Load the stylesheet, write semantic HTML and get a somewhat decent result. Paul Kinlan collected a bunch of ready-to-use stylesheets.

Tweak the default styles

VS Code and the mighty light bulb

VS Code dialog showing refactorings.

Do you use or even notice the tiny light bulb in VS Code? I tend to ignore it, but I'm now trying to watch out for it (again).

The light bulb offers code actions such as extracting a constant, surrounding code with a snippet or generating JSDoc blocks. Open the available actions with CMD + ..

There's no link here; go and try it out now! πŸ˜‰

Random MDN – image-set

image-set call in CSS.

From the unlimited knowledge archive called MDN...

Did you know that you can load different CSS background images depending on pixel density? Now you do!

Learn more about image-set

If you want to learn more about web development, my @randomMDN Twitter bot posts random MDN pages multiple times a day.

TIL recap – global .gitignore files

git config --global core.excludesfile ~/.gitignore_global

Short'n'sweet: I stopped worrying about accidentally commiting .DS_store files ages ago because my Git configuration ignores them globally. Learn how to set up global ignores on the blog.

Ignore the useless

Find more short web development learnings in my "Today I learned" section.

Three valuable projects to have a look at

  • denoland/dnt – Transform Deno modules into Node.js compatible npm packages.
  • giscus/giscus – A comment system powered by GitHub Discussions.
  • sakofchit/system.css – A design system for building retro Apple interfaces .

A new Tiny Helper

JSON Crack β€” a JSON visualizer

If you're juggling massive JSON content, JSON Crack is a handy tool to visualize all the data.

Inspect your JSON

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

Thought of the week

Frederic Marx shared a beautiful metaphor describing adventurous UX patterns.

The most beautiful piece of art is not gonna do you any favors if it blocks the entrance to your house.

A song that makes you stop coding

Dave Grohl on stage

Now that live music's back, this week's track is one for the ages. Foo Fighters' "My Hero" is one of these tracks that are extra special when you sing it with a thousand strangers.

Listen to "My Hero"

And this is all, friends!

Writing Web Weekly takes me roughly five hours every week, and I pay real money for sending almost 3k emails. If you enjoy it, consider supporting me on Patreon. β™₯️

Or tell your friends about it:

If you're not a subscriber, you can change that! πŸ˜‰

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

Related Topics

Related Articles