Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / out.txt
Last active October 15, 2024 23:40 — forked from connorjclark/output.txt
chrome devtools NumberFormat millisecond unitDisplay - nodejs (text) vs chrome (browser)
{ style: 'unit', unit: 'millisecond', unitDisplay: 'narrow' }
┌─────────┬───────────┬─────────────────┬─────────────────┬───────┐
│ (index) │ locale │ text │ browser │ same │
├─────────┼───────────┼─────────────────┼─────────────────┼───────┤
│ 0 │ 'af' │ '123,5 ms.' │ '123,5 ms.' │ true │
│ 1 │ 'am' │ '123.5 ሚሴ' │ '123.5 ሚሴ' │ true │
│ 2 │ 'ar' │ '١٢٣٫٥ ملي ث' │ '123.5 ملي ث' │ false │
│ 3 │ 'as' │ '১২৩.৫ মিঃ ছেঃ' │ '123.5ms' │ false │
│ 4 │ 'az' │ '123,5 msan' │ '123.5ms' │ false │
@paulirish
paulirish / containment-and-content-vis.md
Created March 27, 2024 17:42
primer on containment and content-vis for web perf

containment recap

  • none (default)
  • layout, paint, style - the easy ones.
    • content === these three
    • bonus benefit of contain: layout -- any pos:fixed children will be relative to it.
  • size - harder. the element must define its own size, can't rely on laying out its children.
    • strict === content + size
    • inline-size - dunno? size but for display:inline-ish things?
@paulirish
paulirish / log-all-mutations.js
Created January 25, 2023 22:44
Log all DOM mutations to console
// Log all DOM mutations to console.
// Modern interpretation of https://github.com/kdzwinel/DOMListenerExtension
observer = new MutationObserver(onMutation);
observerSettings = {
subtree: true,
childList: true,
attributes: true,
attributeOldValue: true,
@paulirish
paulirish / generate-pptr-lh-script-from-json.mjs
Last active January 20, 2023 21:25
Generate Lighthouse script from Recorder panel
/**
* To use:
* Export a Recording panel recording as JSON. Run this:
* node generate-pptr-lh-script-from-json.mjs yourjson.json
* It'll save a `yourjson.json.pptr.js`
* That script is dependent on:
* lighthouse@9.5.0-dev.20221024
* puppeteer@19.4.1
* Run that script. It'll save a `flow.report.html`. View that.
* It's one of these: https://web.dev/lighthouse-user-flows/
@paulirish
paulirish / Code.gs
Created March 4, 2022 21:33
finding most common senders in gmail - apps script
// this is pretty quick and rough.. but it works
// script.google.com
// settings to allow editing the appscript.json
// set these two files
// then hit Run with function 'run'
const all = {};
function run() {
@paulirish
paulirish / background-lh.js
Created November 17, 2021 23:02
run lighthouse headlessly
'use strict';
import fs from 'fs';
import puppeteer from 'puppeteer';
import {navigation} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';
// Run Lighthouse headlessly, just Performance
(async function() {
const browser = await puppeteer.launch({headless: true});
@paulirish
paulirish / asciiify-the-canvas.js
Last active October 5, 2021 18:39
ascii rendering of a canvas
// works great on about:dino
// 1. save this file to your snippets.
// 2. load about:dino
// 3. evaluate the snippet
// 4. hit up arrow to trigger the game.
// 5. profit
(function() {
perfnow = performance.now;
@paulirish
paulirish / thing.js
Created May 7, 2018 17:18
log the clipboard contents
document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';
function getPayload(item) {
const kind = item.kind;
switch (kind) {
case 'string': return new Promise(res => item.getAsString(res));
case 'file': return Promise.resolve(item.getAsFile());
default: throw new Error('unknown item kind! ' + kind);
}
@paulirish
paulirish / generate_report.js
Last active February 22, 2023 01:20
hacking on lighthouse report
'use strict';
/* eslint-disable */
const fs = require('fs');
const path = require('path');
const ReportGenerator = require('../../lighthouse-core/report/report-generator');
const jsonPath = __dirname + '/../_json/';
@paulirish
paulirish / eqt.js
Last active April 26, 2020 01:14
Expected Queueing Time metric
// Expected Queueing Time
// https://docs.google.com/document/d/1Vgu7-R84Ym3lbfTRi98vpdspRr1UwORB4UV-p9K1FF0/edit
// Initial impl by Nicolás Peña (npm), Tim Dresser (tdresser)
// Usage:
// var eqt = EQT.begin();
// // ...
// const {expectedQueueingTime} = EQT.end();
class EQT {
constructor() {