Skip to content

Instantly share code, notes, and snippets.

@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 / InteractionsEventTiming.js
Last active September 16, 2023 11:11 — forked from anniesullie/InteractionsEventTiming.js
This gist pokes around with interactions in the EventTiming API. It tries to get the interaction latency, delay, processing time breakdown, type, and target.
const interactionMap = new Map();
function logInteraction(interaction) {
const clamp = val => Math.round(val * 100) / 100; // clamp to 2 decimal places
console.groupCollapsed(`${interaction.type} interaction`, clamp(interaction.latency));
console.log(`total latency`, clamp(interaction.latency));
console.log('delay:', clamp(interaction.delay));
console.groupCollapsed(`processing time in ${Object.entries(interaction.processingTimes).length} entries:`, clamp(interaction.processingTime));
for (const [e, t] of Object.entries(interaction.processingTimes)) {
@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() {
@paulirish
paulirish / log-the-datatransfer-data.js
Created February 15, 2018 01:55
log paste and copy event payloads
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);
}