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!