Skip to content

Instantly share code, notes, and snippets.

View chenglou's full-sized avatar
💫

Cheng Lou chenglou

💫
9.8k followers · 9 following
View GitHub Profile
@chenglou
chenglou / index.html
Created September 21, 2026 00:18
TextMetrics.getTextClusters() for JS line layout: a tiny standalone page (Chrome with --enable-blink-features=ExtendedTextMetrics)
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>getTextClusters() for JS line layout: a tiny standalone page</title>
<style>
body { font: 15px/1.45 system-ui, sans-serif; max-width: 860px; margin: 24px auto; padding: 0 16px; color: #222; }
h1 { font-size: 20px; } h2 { font-size: 16px; margin-top: 28px; }
code, pre, td, th { font: 13px/1.4 ui-monospace, Menlo, monospace; }
pre { background: #f5f5f5; padding: 10px; overflow-x: auto; }
table { border-collapse: collapse; } td, th { border: 1px solid #ccc; padding: 3px 8px; text-align: right; } th:first-child, td:first-child { text-align: left; }
@chenglou
chenglou / eslint.config.mjs
Created February 3, 2025 22:15
Linter
import typescriptEslint from "@typescript-eslint/eslint-plugin"
import tsParser from "@typescript-eslint/parser"
/** @type {import("@typescript-eslint/utils").TSESLint.FlatConfig.ConfigArray} */
export default [
{
ignores: [""],
},
{
languageOptions: {
@chenglou
chenglou / swizzle.ts
Created December 4, 2024 01:36
Swizzle file size
class Vec2 {
x: number
y: number
constructor(x: number, y: number) {
this.x = x
this.y = y
}
get xx() { return new Vec2(this.x, this.x) }
get xy() { return new Vec2(this.x, this.y) }
@chenglou
chenglou / testMore.html
Created November 5, 2024 09:10
More test for https://x.com/_chenglou/status/1853718759053422676
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: monospace;
}
.box {
@chenglou
chenglou / test....html
Created November 5, 2024 08:47
Test for https://x.com/_chenglou/status/1853718759053422676
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: monospace;
}
.box {
@chenglou
chenglou / simpleRouter.js
Created November 9, 2022 10:44
let routes = {
// Regular JS regex over cleaned up URL.
'book/(\\d+)?/edit': (id) => console.log('handleBookEdit', id),
'book/(\\d+)?/.+': (_id, _) => console.log('noSuchBookOperation'),
'book/(\\d+)?': (id) => console.log('getBook', id),
'shop/(\\d+)?/(\\d+)?': (a, b) => console.log('showSecretShopPage', a, b),
'shop/index': () => console.log('showShoppingPage'),
'shop/(.+)': (rest) => console.log('nestedMatch', rest),
'shop': () => console.log('showShoppingPage'),
@chenglou
chenglou / aaasetup.js
Last active September 13, 2022 23:16
JSBench
function pointsOnEllipse1(cx, cy, rx, ry, n) {
const points = Array(n);
const step = Math.PI / (n / 2);
let sin = 0;
let cos = 1;
const a = Math.cos(step);
const b = Math.sin(step);
@chenglou
chenglou / classnames.md
Created March 14, 2021 06:39
interpolation classnames

(+) infix operator

Before:

Cn.("one" + "two" + "three")

After:

`one two three`

append

@chenglou
chenglou / code.re
Last active July 18, 2021 12:13
Recommended way to do HTTP requests in ReScript
// bindings can be isolated/upstreamed. I'm inlining it just for the example
type request;
type response;
[@bs.new] external makeXMLHttpRequest: unit => request = "XMLHttpRequest";
[@bs.send] external addEventListener: (request, string, unit => unit) => unit = "addEventListener";
[@bs.get] external response: request => response = "response";
[@bs.send] external open_: (request, string, string) => unit = "open";
[@bs.send] external send: request => unit = "send";
[@bs.send] external abort: request => unit = "abort";
// =========
@chenglou
chenglou / FetchedDogPictures.re
Last active July 4, 2021 18:55
// This is a proper alternative to
// https://github.com/BuckleScript/bucklescript/blob/b9508105b1a35537bdea9a1fabd10f6c65f776b4/jscomp/bsb/templates/react-hooks/src/FetchedDogPictures/FetchedDogPictures.re#L14
// The one in that file uses Promise, but that's *wrong*.
// We only used promise as a demo of its API. We'll remove it soon.
// As you can see below, the pure XMLHttpRequest code is just as clean,
// less mysterious for all, more performant, extensible, and actually correct.
// Ignore these externals for now. They're just for illustration
// purposes. I just copy pasted the Js code from