leafac

We use two tools to measure the performance of slow pages:

1. 0x: Profile the application and generate flame graphs.
2. autocannon: Load test (send lots of requests) and measure response time (which autocannon calls “latency”) & throughput.

Here’s a step-by-step guide of how to use these tools in Courselore:

1. Run the application normally.

   Note: Don’t use a custom HOSTNAME, because autocannon may not recognize the self-signed certificate generated by Caddy.

leafac

• Similar Libraries.
  • https://npm.im/morphdom
    • Transposition is only handled via ids, which are global, not scoped to siblings.
    • Doesn’t handle well the case of insertions in the middle, losing state (for example, scrolling position) of siblings, because it detaches and reattaches them.
  • https://npm.im/nanomorph
    • Transposition is only handled via ids, which are global, not scoped to siblings.
      • Maybe it could be handled with data-nanomorph-component-id, but still, as far as I understand, it doesn’t do LCS, and probably detaches and reattaches elements similar to morphdom.
    • No lifecycle callbacks (though most of them are subsumed by other mechanisms, for example, .isSameNode()).
    • Transferring callback handlers seems heavy-handed (though it may be a good idea in practice).
• Others

leafac

• Interpolation
  • What I think of as interpolation many libraries call “dynamic” properties/styles/etc.
  • Astroturf
    • Allows two types of interpolation:
      • Values, using CSS variables.
      • Blocks, using extra classes.
        • Doesn’t seem to support nesting, because that requires you to parse the CSS & extract the classes nested inside.
  • vanilla-extract
    • Doesn’t seem to allow for interpolation.
• Linaria

leafac

1. Create the tunnel. If you’re part of the Courselore team, you may request a custom Courselore tunnel address such as leafac.courselore.org, otherwise you may use services such as Localtunnel and localhost.run, for example:

   # Custom Courselore Tunnel Address
   $ ssh -NR 3000:localhost:80 root@leafac.courselore.org
   
   # Localtunnel
   $ npx localtunnel --port 80
   

localhost.run

leafac

• Features

  • Schedule jobs
  • Schedule jobs in the future
  • Explicit failure: An exception was thrown
  • Implicit failure: A job was picked up and not finished in a certain amount of time
  • Retry jobs that failed (explicitly or implicitly)
  • After a certain number of retries, fail the job
  • Have a way to force the worker to run immediately

• On graceful termination finish existing jobs

leafac

• https://pagefind.app/
• https://stork-search.net/
• https://lunrjs.com/
• https://github.com/tinysearch/tinysearch

leafac

• TypeScript transformation
  • The tsc compiler doesn’t yet let you run your own transforms.
  • And what if your project isn’t using TypeScript?
• esbuild doesn’t allow you to manipulate the AST
• Babel Plugin (That’s my option)
  • More powerful & easier to conceptualize.
• Babel Macros (https://github.com/kentcdodds/babel-plugin-macros)
  • Useful for create-react-app and things that don’t allow you to change configuration easily.
  • Macros have to be CommonJS
• A Babel visitor must be synchronous and the visitor needs to require() the macro definition, but import() is async.

leafac

• Algorithms
  • xxHash: Self-proclaimed the fastest. (That’s my option)
  • djb2: Beautifully simple.
  • Murmur: Used by most other CSS-in-JS tools.
• Uses by other related tools:
  • esbuild: xxHash & Boost’s hash_combine (not really sure which does which, but I feel xxHash is doing the file hashing).
  • styled-components: djb2
    • Progressive, which means the same hash is updated across elements that need to be hashed
      • Good: Remarkably simple.
• Bad: The stability of the hashes depends upon the order of the hashed objects, and one removal in the middle affects all the subsequent hashes.

leafac

- `application/x-www-form-urlencoded`
  - `URLSearchParams`
  - <https://github.com/expressjs/body-parser>.
- `multipart/form-data`
  - <https://github.com/mscdex/busboy>.
    - <https://github.com/expressjs/multer>.
    - <https://github.com/richardgirges/express-fileupload>.
  - <https://github.com/node-formidable/formidable>.
    - Does too much (plugins, and so forth).

• .

leafac

• autocannon uses negligible CPU.

• Use yes > /dev/null to saturate one core.

• Stats shows an aggregate of all the CPU cores, just like the Activity Monitor lower pane. So if 1 out of 8 cores is saturated, you see 25% usage.

• In a Mac Mini with a M1 processor, the performance cores saturate first and the efficiency cores saturate last.

• Sending signals:

  ⌃C	SIGINT

| kill, Activity Monitor > Quit, Stats > Kill process, and so forth | SIGTERM |