| :root { | |
| --color-bw: light-dark(black, white); | |
| --color-background: light-dark(hsl(48 48% 93%), hsl(48 48% 3%)); | |
| --color-background-tone: color-mix( | |
| in hsl, | |
| var(--color-background), | |
| var(--color-bw) 6% | |
| ); | |
| --color-on-background: color-mix( | |
| in hsl, |
463ファイルでファイルサイズが増え(AVIFの方が大きい)、154ファイルで減った。7割以上の確率で増えてしまう。
| filename | width | height | PNG size | AVIF size | ratio |
|---|---|---|---|---|---|
| 11px_sized_text.png | 192px | 172px | 3.572KB | 5.873KB | 1.644 |
| 404-sign.png | 440px | 440px | 6.092KB | 13.303KB | 2.184 |
| 480-gridder.png | 480px | 191px | 0.268KB | 1.183KB | 4.414 |
| 6-lines-of-p-and-9-lines-of-pre.png | 784px | 240px | 22.043KB | 58.122KB | 2.637 |
| 700_subscribers.png | 480px | 250px | 17.204KB | 24.702KB | 1.436 |
| a-massive-influx-of-flat-sites.png | 480px | 270px | 2.203KB | 8.943KB | 4.059 |
| { | |
| "env": { | |
| "es6": true, | |
| "node": true | |
| }, | |
| "globals": { | |
| "AbortController": true, | |
| "fetch": true, | |
| "FormData": true | |
| }, |
| // https://github.com/Myndex/SAPC-APCA#the-plain-english-steps-are | |
| // Example: | |
| // const contrast = getAPCAContrast("rgb(255, 255, 255)", "rgb(136, 136, 136)"); | |
| // This returns `66.89346308821438` (66.893%) | |
| // SAPC-APCA README says: | |
| // > #888 vs #fff • 66.89346308821438 | |
| // 80% means 7:1 in WCAG 2.0 | |
| // 60% means 4.5:1 in WCAG 2.0 |
| #!/bin/sh | |
| wslview $(wslpath -w "$1") |
| // node index.js --count=5 --format=html --type=paragraph | |
| // --count: 1-32 (default; 5) | |
| // --format: html, txt (default) | |
| // --type: list, paragraph (default) | |
| import fs from "fs"; | |
| import minimist from "minimist"; | |
| const select = (data) => data[Math.floor(Math.random() * data.length)]; |
| const to8Chunks = (previous, current, index) => { | |
| const remainder = index % 8; | |
| if (!previous[remainder]) { | |
| previous.push([]); | |
| } | |
| previous[remainder].push(current); | |
| return previous; | |
| }; |
| // $ node inline-css.js <path-to-html-file> | |
| import fs from "fs/promises"; | |
| import jsdom from "jsdom"; | |
| import postcss from "postcss"; | |
| const { JSDOM } = jsdom; | |
| const hasNode = (document, selector) => { | |
| if (selector.includes(":")) { |
| // list unused custom properties | |
| // $ node list-unused-custom-properties.js <FILENAME> | |
| const fs = require("fs"); | |
| const postcss = require("postcss"); | |
| const css = postcss.parse(fs.readFileSync(process.argv[2], "utf8")); | |
| const customProperties = {}; | |
| css.walkDecls(decl => { | |
| if (decl.prop.startsWith("--")) { |