Hacker News Reader

Comment by graderjs | Hacker News Reader

BTW I love this code: https://kidpix.app/js/app.js

repo here: https://github.com/vikrum/kidpix

Nice, good to see some plain old JS for once (not even minified either). No heavy UI framework(s). The entire app loads in like 150kb of network transfers. Great work!

I miss writing JS like this. I was complaining to my manager earlier how I get frustrated by react sometimes.

What? You mean 100MB of libraries is somehow a bad thing?

What do these 2 lines do?

    canvas.width = canvas.width;
    canvas.height = canvas.height;

Workaround for some weird DOM issue?

Setting `canvas.width` clears the canvas and resets all canvas state (stroke styles, transformations, etc...)

As far as I know, setting `canvas.height` is unnecessary.

Also as far as I know, using `ctx.clearRect` is faster, though it's possible the author wants to reset that other canvas state as well (which `clearRect` won't do), or it's possible there's some older browser incompatibility I don't know about that the author wants to avoid.

Edit: it looks like the author is also calling `clearRect`? Maybe there's some browser behavior I don't know about, but as far as I think this code is unnecessary. You don't need to do both things.

Yup. That's a well organized project right there. Very easy to find the exact code doing whatever it is you want.

Has anyone had any luck using this classic style of JS namespacing in a way where their editor understands it when populating code completion?

I love rollup, uglify-js, etc. for this kind of thing: just concatenate all the modules into one JS file and ship it as-is.

Wow, it is good code. So simple that the author is either very new, or very experienced. (I would guess the latter).

Reply on news.ycombinator.com