3 ms·

BTW I love this code: https://kidpix.app/js/app.js https://kidpix.app/js/app.js repo here: https://github.com/vikrum/kidpix https://github.com/vikrum/kidpix

seph-reed 5y ago
Yup. That's a well organized project right there. Very easy to find the exact code doing whatever it is you want.
- deleted 5y ago
  [deleted]
amatecha 5y ago
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!
Waterluvian 5y ago
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.
kilroy123 5y ago
I miss writing JS like this. I was complaining to my manager earlier how I get frustrated by react sometimes.
- ConceptJunkie 5y ago
  What? You mean 100MB of libraries is somehow a bad thing?
function_seven 5y ago
What do these 2 lines do? canvas.width = canvas.width; canvas.height = canvas.height; Workaround for some weird DOM issue?
- danShumway 5y ago
  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.
javajosh 5y ago
Wow, it is good code. So simple that the author is either very new, or very experienced. (I would guess the latter).

seph-reed 5y ago

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

deleted 5y ago
[deleted]

amatecha 5y ago

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!

Waterluvian 5y ago

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.

kilroy123 5y ago

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

ConceptJunkie 5y ago
What? You mean 100MB of libraries is somehow a bad thing?

function_seven 5y ago

What do these 2 lines do? canvas.width = canvas.width; canvas.height = canvas.height; Workaround for some weird DOM issue?

danShumway 5y ago
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.

javajosh 5y ago

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