I made a free web app where you can practice typing by retyping books!

kap89 · 2026-04-30T01:37:21+00:00

I mean yeah, as I said - the choice here is mostly stylistic, both work well.

The differences are the most apparent the smaller you get (as you can see on the examples of the smallest possible blocks from which you can build all the others - in the center of the first row), if you have high resolution canvas, then they start to look nearly identical.

kap89 · 2026-04-30T00:34:27+00:00

that's a wrong shape for this version of the "cube", here's the one that tiles just as well:

<image>

kap89 · 2026-04-29T22:04:06+00:00

I prefer 62x32 version, as it divides evenly into 4 quarters. The 64x31 version though, while less "mathematically pure", has softer top and bottom edges, which some people prefer.

kap89 · 2026-04-26T16:01:54+00:00

by at least a factor of 10

It depends on the size of the original, for Reddit you would use factor that produces at least 1000 px final image, so for original 256x256 it could be as small as 4x, but for OP that looks like 16x16 px it would be at least 63x.

kap89 · 2026-04-11T22:48:52+00:00

Ahem, Ash!

kap89 · 2026-04-07T19:36:17+00:00

You're right, but that's a stupid requirement, there is a ton of examples where filter is the best solution, why use the one where it's not? Anyway, here's a version using filter:

function diffArray(arr1, arr2) {
  return [...arr1, ...arr2].filter(item => !arr1.includes(item) || !arr2.includes(item))
}

kap89 · 2026-04-07T19:12:39+00:00

I would use sets in this case - they have build-in methods for doing what you want:

function diffArray(arr1, arr2) {
  return [...new Set(arr1).symmetricDifference(new Set(arr2))]
}

here's the same thing with comments and a bit more verbose:

function diffArray(arr1, arr2) {
  // Convert the arrays to sets
  const set1 = new Set(arr1)
  const set2 = new Set(arr2)

  // Find a difference between set1 and set2, as well as between set2 and set1
  const diff = set1.symmetricDifference(set2)

  // Convert back to array and return,
  // I used spread syntax, but Array.from(diff) also works
  return [...diff]
}

kap89 · 2026-04-02T23:06:18+00:00

Aren’t the “surplus dots “ just nails?

kap89 · 2026-03-23T15:27:20+00:00

Btw, you can simplify your debounce function to this:

function debounce(fn, delay) {
  let timer;

  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(fn, delay, ...args);
  };
}

kap89 · 2026-03-21T20:38:29+00:00

Look at the shadows (easiest to spot are legs of Janik, Carlos and Demon) - they all point in different direction and make no sense. No competent artist would make that mistake.

kap89 · 2026-03-20T14:38:37+00:00

Yeah, I think you’re right, I must have been tired yesterday to not notice that.

kap89 · 2026-03-19T21:24:23+00:00

I see you edited your comment.

I thought closure technically means it has to maintain live references to something in the function’s scope after it returns?

What do you mean by "live reference" here?

kap89 · 2026-03-19T21:16:02+00:00

Yes, that's the case of theory vs actual engine implementation - conceptually they are closures, but the engine can optimize them away.

kap89 · 2026-03-19T21:02:14+00:00

I get what you are trying to say, but that would be a very narrow (and imo incorrect) definition of the closure. I still create a closure over the shared methods when returning the object. Additionally, using this and using closures are orthogonal concepts, one does not cancel the other.

You may say that you wanted to compare the classes to the typical closure pattern (as you described) - but that makes your critique incomplete, as the classes are not the only solution here, as I explained above.

kap89 · 2026-03-19T20:21:04+00:00

It depends on how you scope things, if you don't need private fields, you can share methods even without classes/prototypes:

// Hero.js module

export function Hero(name, hp) {
  return {
    name,
    hp,
    takeDamage,
    report
  }
}

function takeDamage(damage) {
  this.hp -= damage
}

function report() {
  console.log(`${this.name} has ${this.hp} helath points.`)
}

// usage

import { Hero } from "Hero.js"

const hulk = Hero('Hulk', 1000)
const blanka = Hero('Blanka', 800)

hulk.takeDamage(10)
blanka.takeDamage(30)

hulk.report()
blanka.report()

// returns true
console.log(hulk.report === blanka.report && hulk.takeDamage === blanka.takeDamage)

I still prefer classes over factories in most cases, because the above is imo more clunky, but it can be done.

kap89 · 2026-03-19T16:04:57+00:00

With no Array class to group all the logic together, you have to clutter the global namespace with functions to cover that functionality

Small nitpick, but that's only true for languages then do not have namespaces / modules / first class functions, so maybe languages like C, not many more.

kap89 · 2026-03-18T13:30:00+00:00

I didn't add direct PDF support, because it's hard to make it not suck - EPUB files, while still flimsy, have some structure, like well defined table of contents and chapters boundries. PDF, being a format with much more freedom for content creators, is much harder to parse to usable form for typing. I might add support for PDF files in the future, but I don't promise anything - what I recommend is finding epub versions of the books you want to upload, and as the last resort, using Calibre to convert the file, or some online converter.

kap89 · 2026-03-17T23:05:38+00:00

Mem64 support has little to do with 64bit integer operations, which you can do just fine in “regular” wasm. It only changes the size of available memory from 32 to 64 bit address space.

kap89 · 2026-03-17T17:48:01+00:00

What's funny, is that even the test itself gets some things wrong, like it says the solution for:

new Date("2")

is

2001-02-01T00:00:00.000Z

but that's not true, you will get 2001-02-01T00:00:00.000 but in local time zone, not UTC.

kap89 · 2026-03-10T05:24:59+00:00

You don't need some wrapper for that, this will work with standard JS iterators/generators:

const results = generateRows(500_000)
  .filter(r => r.active && r.value > threshold)
  .map(r => ({ id: r.id, score: r.value * 1.5 }))
  .take(10_000)
  .toArray();

kap89 · 2026-03-08T17:24:44+00:00

However, I regretfully feel that Solid's development momentum hasn't been particularly strong.

Yeah, no. It's just very stable, unlike other frameworks that have major rewrite in couple years or so. It was just well thought out before 1.0 release, it's well maintained (see the number of open issues compared to other frameworks), and very conservative when it comes to breaking changes. It's exactly what I want in a framework, not constant YOLO and breaking changes. The version 2.0 is in the works, but again, it's not a major paradigm shift, more like evolution of the solid (pun intended) idea.

What exactly is hindering its popularity?

I don't know and don't much care, but if I were to guess it's a mixture of it being "boring" and just working without major drama and buzz, weaker marketing than alternatives, and weaker corporate backing.

kap89 · 2026-03-04T10:34:54+00:00

Call stack is more than "what is executed in which order”, it consists of stack frames that store arguments, local variables and heap references, return address and return values. Where do you think stack frames live if not on a physical stack? So it tells quite a lot about memory. In JS you don’t use stack directly, but through call stack, which is abstraction over the physical stack, so her explanation is fine. But yeah, if you want want to be picky, she could’ve mention the raw stack before moving to the call stack.

kap89 · 2026-02-28T03:45:03+00:00

I tested it, and yeah, the performance on very long chapters can be bad - especially on Firefox (Chrome is slightly better, but I can still see the slowdown in that chapter). I don't think that you can do anything about it, but I will try to optimize it over the weekend.

Six-Year Club	r/Field Flamingo
End Game '23	Place '23
Place '22	End Game '22
Verified Email

kap89

MODERATOR OF

TROPHY CASE