TLDR; Sometimes I catch myself on a notion that fixing little things is infinitely boring. I know that it is not really true, it is more like an emotional state and there are ways to have fun most of the times. I would like to share a short story about that.

Photo by Mark Tegethoff on Unsplash

The code

Some time ago I met the code. It was something that makes me feel the same as when I about to hit a pothole and there is nothing I can do to avoid it. Then I hear that bumping sound and blame myself for being not attentive enough.

The code was creating DOM elements and updating contents of a node on mouse move events. The whole description from the last sentence is like smoking on gas station to me: DOM updates + mouse move events is something you want to separate in general, as for an example into different execution contexts.

Code was looking about like that

Nothing really bad about it. It works! And it is not really a bottleneck in the app, might be a little slow though. And you can notice that sometimes. It is not a big deal at all in that particular case, but I still felt like I just hit a pothole — something that can cost you in the future and could be avoided.

Fixing the pothole

As a good front-end engineer, I learned that every time I need something (like left padding, heh) I should go to npm or might be bower back in the days, or even jQuery.com and copy-paste some shiny-metal plugin.

I did that and found a dozen small libs for creating DOM elements from JSON or some other neat way.

I could add that lib into the package.json , rewrite the code and be feeling good about having less tech dept. And a new dependency. And it is just boring.

I would rather spend a bit more time, recall or learn things and have some fun, why not?

So I started by writing a simple helper for creating DOM nodes.

Helper for creating DOM elements

And rewrote the code using my new helper:

It looks better now, but that’s not enough. And it is still not very efficient and does multiple DOM updates, which is expensive. And I don’t like how it looks, so next iteration I started by rewriting that code again and then updating the helper to match what I will need.

A bit better-looking one

I knew that I need dom fragments to do less DOM updates and requestAnimationFrame is handy when you want to update DOM a lot and keep UI quick.

Updated element helper again and did one more unplanned change to make this helper even better:

It is in lines 8–11, if a child is an array, then it looks like args for another element call. That little change triggered another iteration over the code:

good!

Now it looks good to me. Short and simple and what even better is that now I have helper, which can be used anywhere else in the app and it is less than 20 lines of code.

It took me a few iterations to get to that point. Probably I spend twice more time on that, to fix the code that’s can be fixed some other way, using a lib or I could just stop after the first iteration.

But, I would say that having a working, simple and beautiful code I wrote is something that brings me joy and it is fun doing that. Probably it would be true for you as well.

—

The story assumes that you know some javascript and a bit about DOM. I feel bad about wrapping up without any links where you can learn a bit about javascript and front-end if you new to the language: