mmocny

const interestingEventTypes = [ 'pointerdown', 'pointerup', 'click', 'keydown', 'keypress', 'keyup'];
const mapOfTargets = Object.fromEntries(interestingEventTypes.map(type => [type, {}]));

interestingEventTypes.forEach(type =>
  document.addEventListener(type, (event) => {

    // TODO: Improve this
    const nodeType = event.target.nodeName.toLowerCase();
    const nodeId = event.target.id;
    const nodeClasses = event.target.className.replace(/\s/g, '.');

mmocny

function processArrayOfWork(arr) {
  const item = arr.shift();
  console.log(`Processing array item: ${item}`);
  
  if (arr.length > 0) {
    // Recursive call.
    processArrayOfWork(arr);
  } else {
    console.log('End processing array of data.');
  }

mmocny

(() => {
  // processLoAFEntry.js
  function floorObject(o) {
    return Object.fromEntries(
      Array.from(Object.entries(o)).map(([key, value]) => [
        key,
        typeof value === "number" ? Math.floor(value) : value
      ])
    );
  }

mmocny

const RATING_COLORS = {
  good: "#0CCE6A",
  "needs-improvement": "#FFA400",
  poor: "#FF4E42"
};

function onInteraction(callback) {
  const valueToRating = (score) =>
    score <= 200 ? "good" : score <= 500 ? "needs-improvement" : "poor";

mmocny

// max-INP:
(()=>{let o=globalThis;return void 0===o.winp&&(o.winp=0,new PerformanceObserver(n=>{for(let e of n.getEntries()){if(!e.interactionId)continue;o.winp=Math.max(e.duration,o.winp);let r=o=>o<=200?"color: green":o<=500?"color: yellow":"color: red";console.log(`%c[Interaction: ${e.name.padEnd(12)}] %cDuration: %c${e.duration}`,"color: grey; font-family: Consolas,monospace","",r(e.duration))}}).observe({type:"event",durationThreshold:0,buffered:!0})),o.winp})();

// interactionCount
performance.interactionCount;

mmocny

const RATING_COLORS = {
  "good": "#0CCE6A",
  "needs-improvement": "#FFA400",
  "poor": "#FF4E42",
  "invalid": "#FFC0CB",
  "default": "inherit", // Will default to this, anyway
};

function log(metric) {
  const prettyScore = metric.value.toLocaleString(undefined, { maximumFractionDigits: 0 });

mmocny

// Inspiration: https://www.abeautifulsite.net/posts/querying-through-shadow-roots/

/*
 * Acts like querySelectorAll, except you can pass a list of selectors...
 * Each selector is evaluated within the shadowRoot of the previous NodeList
 */
function* shadowQuerySelectorsAll(selectors, rootNode = document, depth = 0) {
  const nodes = rootNode?.querySelectorAll(selectors[depth]);
  if (depth >= selectors.length - 1) {
    yield* nodes;

mmocny

import firstOnly from './Promise.firstOnly.polyfill.js';

// Always unblocks next-render... but can leave main thread idle time while waiting for next frame.
function doubleRaf(cb) {
  requestAnimationFrame(() => {
    requestAnimationFrame(cb);
  });
}

// Always unblocks next-render... but gets scheduled at the back of the main thread task queue

mmocny

/* Usage:
await Promise.firstOnly([
	(signal) => {
		return new Promise((resolve, reject) => {
      // ...do work and resolve();
      signal.addEventListener("abort", () => {
        // ...cancel and reject();
      });
    });
	},

mmocny

Performance Observer to Async Iterator

Background: Iterators, Performance Observer, and Async Iterators

function* range() {
   yield 1;
   yield 2;
   yield 3;
}