paulirish

To do TS in node natively (no compiling needed) there are a few considerations:

1. tsconfig.json
2. package.json
3. import statements
4. node version

tsconfig.json

paulirish

#!/usr/bin/env fish

# depends on FZF. also.. fish i guess. but AI could port it to zsh/bash ez.
# just run it and it'll prompt for application.

# Select application and get bounds of it.
set -l app_list (osascript -e 'tell application "System Events" to get the name of every application process whose background only = false')
# commas to newlines and over to fzf for selection
set -l selected_app_name (echo $app_list | sed 's/,/\n/g' | string trim | fzf --header "Select an active application. We'll capture the most foreground window of it.")
# set -l selected_app_name "Google Chrome for Testing"

paulirish

// export data from miro board frames 

// super specific to my usecase but should be adaptable if you're a JS person.. i'll leave the details to you
// (frame filtering, grouping and filtering items, colors into categories, etc)
// i run this in devtools snippets personally


globalThis.items = globalThis.items ?? null;
// thx https://github.com/jolle/miro-export
items = await window.miro.board.get();

paulirish

{ 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

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

// 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

/**
 * 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:
 *      [email protected]
 *      [email protected]
 * Run that script. It'll save a `flow.report.html`. View that. 
 *   It's one of these: https://web.dev/lighthouse-user-flows/

paulirish

// 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

'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

// 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;