Tools for performance measurement (microbenchmarks)

• hyperfine
• https://www.npmjs.com/package/mitata
• https://www.npmjs.com/package/@dynatrace/zakzak
• https://jsperf.app/
• https://jsbench.me/
• https://www.npmjs.com/package/benchmark
• https://github.com/tinylibs/tinybench
• https://github.com/google/tachometer
• https://github.com/stoyan/ticr
• https://www.npmjs.com/package/0x
• https://github.com/dainis/node-gcstats

Benchmarking bun startup time

Single-line file:

console.log('Hello World')

Benchmark:

hyperfine --warmup 3 'bun test.js' 'node test.js'
Benchmark 1: bun test.js
  Time (mean ± σ): 8.9 ms ± 0.6 ms [User: 5.2 ms, System: 3.6 ms]
  Range (min … max): 7.5 ms … 11.8 ms 258 runs

Benchmark 2: node test.js
  Time (mean ± σ): 24.9 ms ± 1.1 ms [User: 19.7 ms, System: 3.6 ms]
  Range (min … max): 23.6 ms … 30.0 ms 111 runs

The difference is only about 20 ms.

ESLint'ing the project with 30000 files:

find . \( -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" \) | wc -l
   30623

hyperfine --warmup 3 --ignore-failure 'npx eslint --ext .js,.jsx,.ts,.tsx .' 'bunx eslint --ext .js,.jsx,.ts,.tsx .'
Benchmark 1: npx eslint --ext .js,.jsx,.ts,.tsx .
  Time (mean ± σ): 6.896 s ± 0.047 s [User: 15.452 s, System: 0.621 s]
  Range (min … max): 6.831 s … 6.980 s 10 runs

Benchmark 2: bunx eslint --ext .js,.jsx,.ts,.tsx .
  Time (mean ± σ): 6.776 s ± 0.046 s [User: 15.423 s, System: 0.578 s]
  Range (min … max): 6.715 s … 6.849 s 10 runs

The difference is about 100 ms.

How to use ESLint + Prettier + VS Code together without conflicts

1. Install eslint, prettier, eslint-plugin-prettier, eslint-config-prettier
2. Update eslintrc file to look like this:

extends: [
  'eslint:recommended',
  'plugin:react/recommended', // if react is used
  'plugin:react-hooks/recommended', // if react is used
  'plugin:@typescript-eslint/recommended', // if ts
  'plugin:prettier/recommended'
],
plugins: ['prettier', 'react', 'react-hooks', '@typescript-eslint'],

With this setup ESLint starts to use Prettier and its rules for code style checks and autofixes.

Moreover, now you don't need two separate commands to run ESLint and Prettier, they both will run with a single command eslint --fix.

Additional steps for VS Code:

1. Install the "Prettier - Code formatter" extension
2. Go to Settings and set the "Editor: Default formatter" to "Prettier - Code formatter"
3. Enable "Editor: Format On Save"

Code compilation and caching in V8

• https://v8.dev/blog/background-compilation
• https://v8.dev/blog/code-caching
• https://v8.dev/blog/code-caching-for-devs

Optimizing resource loading in Chrome 95+ with Priority Hints

https://web.dev/priority-hints/

React.StrictMode calls your render() and reducer() twice

In a strict mode development build of React renders your components twice. It calls your render() method, functional components, all the hooks two times. The reducer() function from the useReducer() hook is also called twice.

Before the second call, React disables all console output methods. In case your code works in non-strict mode but shows strange results in strict mode, you may want to see console output from the second call. In order to do that you can store the original console.log method at the very beginning of your code:

import { useReducer } from "react";

// other imports...

const log = console.log;

function MyComponent() {

  const [state, dispatch] = useReducer(reducer, undefined, init);

  log("MyComponent", state); // note: log instead of console.log

  return <div>markup...</div>;

}

Example: https://codesandbox.io/s/dark-night-32ejxr?file=/src/GroceryList/GroceryList.js

Details: https://dev.to/sebastianstamm/be-careful-with-console-log-when-using-react-strictmode-ah9

Browser fingerprinting and bot detection

Links from https://incolumitas.com/2021/11/03/so-you-want-to-scrape-like-the-big-boys/

• CreepJS: https://github.com/abrahamjuliot/creepjs
• Browser Red Pills, Dan Boneh: https://www.usenix.org/system/files/conference/woot14/woot14-ho.pdf
• Browser Based Port Scanning, 2021: https://incolumitas.com/2021/01/10/browser-based-port-scanning/
• Google Picasso: https://research.google/pubs/pub45581/
• Font Fingerprinting: https://browserleaks.com/fonts
• TCP/IP Fingerprinting: https://github.com/NikolaiT/zardaxt
• TLS Fingerprinting: https://github.com/salesforce/ja3
• Behavioral Classification, 2021: https://incolumitas.com/2021/04/11/bot-detection-with-behavioral-analysis/
• Gyroscope API querying (device movement/rotation detection), 2021: https://incolumitas.com/2021/02/05/why-does-this-website-know-i-am-sitting-on-the-toilet/
• Fingerprinting without JavaScript using HTTP headers, CSS feature queries and Fonts: https://fingerprintjs.com/blog/disabling-javascript-wont-stop-fingerprinting/