The other day I wrote about JavaScript and modern web things I enjoy. But I forgot to add some examples!

• Coppenheimer – a weird vAmigaWeb mod with memory inspection
• Knob-Out – play Breakout with your volume dial
• ANSI animation player – ancient BBS anims brought back to life
• Revision cheat sheet generator – PDFs in plain JavaScript, magic!
• Ugly speech toy – eeeeaaahh, aaaahh, ooooh
• Worms DC asset util – create custom levels for the Amiga game

To balance out the “Frontend is the best OMG” vibes, here are some not so nice things in my current, yet-to-be-released project that I didn’t love:

• When you process thousands of pixels, simple object lookups will add up and your rendering code will become very slow very quickly.

  // Slow
  for (all pixels) {
    if (x > canvas.width) doThis(); else doThat();
  }
  
  // Better
  let w = canvas.width;
  for (all pixels) {
    if (x > w) doThis(); else doThat();
  }
  

  Somehow obvious, but I was stunned how much of a performance impact this causes. “Why is my IDE frozen?”

• To draw a clean rectangle with a 1 pixel stroke, you must use ctx.rect(x+0.5, y+0.5, w, h) to avoid smearing, because of course.

• Chrome (and presumably every other browser, because it’s all Chrome now) will sometimes fail to reload changed content from localhost, no matter how hard you’re ctrl-shift-force-reloading or power-doubleclicking. All the while it happily displays the correct, updated version when I view the source code! I have to go in and change some other bits here and there, and then Chrome might do me the honor of doing an actual reload.

• I thought that substr and substring are more-or-less the same, but apparently the former is evil, irrelevant, and needs to be removed. Good luck with that!

• Good old mouseover and mouseout gave me headaches because hovering over a child container within the element I want to track triggers an “out” event. That’s confusing, and we’re supposed to use mouseenter/exit instead. Hmm, okay. I am 100% sure I will have forgotten that by noon. Too bad! :)

Edit: One more thing which just cost me five minutes:

• When you add content to a container like this:

  document.querySelector("#controls").innerHTML += "...";

  …that is very naughty (I assume). Also, and that’s what got me, any action listeners you had on elements within #controls will be gone! The whole inner HTML block gets replaced along with the listeners. D’oh!

TikTok is horrible, and TikTok can be great. The same goes for the typography, mostly in the form of subtitles. Over a year ago I was wondering (German post) where all those “retro fonts” come from, as in: How do you even manage to render text without proper umlauts or accents in 2025?

The weird font engines that choke on characters that are not in plain ASCII and render them as alien moon glyphs are still around, but the trend in professional font usage is growing! At least in my feed there’s more and more instances with a proper capital sharp S being used for German:

I love this character in particular, so this makes me as happy as a video of a puppy befriending a horse, the sloppy vectorized HBO logo being expertly called out, or a cover version of “No surprises” performed by a professional harpist.

A piglet befriending a century-old turtle is fine, too. Errm, where was I? :)

PS: Aww shucks, I wanted to add a comic font specimen as well, but it turns out they’re using the wrong sharp S. :(

Hmmm, this sounds weird as a blog post title. Let’s go for it! Of course I’m talking about the perspective of the backend programmer (you filthy pig), and my confession is this:

I like frontend stuff.

Well, not all of it, obviously (npm-dependencies *cough* left-pad *cough* ansi-styles), but the juicy low-level bits.

Edit: I’ve added some meat to this outrageous claim. :)

• I get excited about native HTML tags: <dialog>, color pickers, calendars, <details>, <progress>
• I get irritated (or excited?) when the default gadget colors change.
• I pee my pants a little at the prospect of nested CSS rules without a preprocessor. Like… cas-ca-ding styles! In a sheet! Soon…
• It is a rewarding exercise to figure out stuff like this, again and again:
  • What’s the CSS spell to prevent an element from outgrowing its parent?
  • How do I make an unordered list that can adapt its number of columns?
  • Quick, does the border width get added to the overall size or not?
  • What’s the format of data URLs, and how small can I crush this PNG?
  • Is the raw pixel format of image buffers ARGB or RGBA?
  • The holy grail: How do I center an element?
• You can change the effing mouse cursor with a CSS declaration!
• Oh yeah, JavaScript has /regex/ literals, keep forgetting that one.
• It’s fast! You can emulate an Amiga in the browser! *

I guess I should point out: I’m not being sarcastic here. I know many backend developers seem to frown upon frontend stuff. That’s understable – work is work, and then there’s the whole npm/react/bloat hell. But pausing my backend work and turning to the browser is just… refreshing. Even better when I have a little side project where frontend and backend work hand in hand. Full control! Data! Pixels!

There’s enough horrible frontend stuff to be grumpy about, for sure. Horrible, ugly abominations of bloat and insanity. But coming from the age of Internet Explorer 4, table-based layouts, and the gentle beginnings of DHTML: You’re doing okay, frontend!

Oh, and enjoy the little mouse pointer some more, it gave me the impulse to write this post. :)

*) I know, I know, that’s not really new. Still awesome!