malchata

// Cribbed this from:
// https://web.dev/debug-web-vitals-in-the-field/#usage-with-the-web-vitals-javascript-library
export function getSelector(node, maxLen = 100) {
  let sel = '';

  try {
    while (node && node.nodeType !== 9) {
      const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + (
        (node.className && node.className.length) ?
        '.' + Array.from(node.classList.values()).join('.') : '');

malchata

// Click the big cookie
const bigCookie = document.getElementById("bigCookie");

var bigCookieInterval = setInterval(() => {
  bigCookie.click();
}, 10);

// Pet the dragon
const dragonPetInterval = setInterval(() => {
  Game.ClickSpecialPic();

malchata

// Credit to Michal Mocny (https://twitter.com/mmocny)
let worstInp = 0;

const observer = new PerformanceObserver((list, obs, options) => {
  for (let entry of list.getEntries()) {
    if (!entry.interactionId) continue;

    entry.renderTime = entry.startTime + entry.duration;
    worstInp = Math.max(entry.duration, worstInp);
      

malchata

Understanding, Measuring, and Optimizing Interaction to Next Paint (INP)

Did you know that 90% of time spent on most web pages is after page load? In this span of time, users are interacting with your website through a series of interactions such as clicks, taps, and keyboard inputs—and the slower your website is to respond to those interactions, the more likely your users will have a negative user experience with your website.

At Google, we've invested significant time in creating new metrics to assess page responsiveness. One of these metrics is First Input Delay (FID), which is a load responsiveness metric that captures the input delay of the first interaction. However, we discovered that we needed a new responsiveness metric that samples more than just the first interaction—and more than simply that interaction's input delay.

In order to comprehensively assess overall page responsiveness, we've created the new Interaction to Next Paint (INP) metric.

malchata

// This is Node script that uses Puppeteer (headless Chrome) to measure the decode time
// of a single image injected into a blank HTML document. It uses minimist to take command
// line arguments. Example usage: node measure-image-decode.js https://example.com/example-image.jpg
// This example assumes you're running a local server to grab the blank document.
// Thanks to Paul Irish and Tim Kadlec for their input!

const puppeteer = require("puppeteer");
const argv = require("minimist")(process.argv.slice(2));

async function getDecode(url) {

malchata

React Bias

It may seem like a bold suggestion that we as web developers can choose the wrong tools for the job because we tend to be swayed by appeals to popularity or authority, but simple statistics imply just that. For example, React (https://reactjs.org/) is a JavaScript framework that emphasizes componentization and simplified state management. It enjoys strong advocacy from a vocal and dedicated userbase within the developer community.

Despite React’s apparent popularity, however, The HTTP Archive observed in 2020 that React only accounted for 4% of all libraries in use across the 7.56 million origins it analyzed (https://almanac.httparchive.org/en/2020/javascript#libraries).

For context, The State of JS 2020 Survey (https://2020.stateofjs.com/en-US/), which surveyed roughly 23,765 respondents, offers the following statistics:

• 70.8% of respondents identified as white.
• 91.1% identified as male, whereas 5.8% identified as female and 0.9% identified as non-binary/third gender.

malchata

atom-workspace {
  --editor-font-size: 1.75rem;
}

atom-text-editor {
  .cursor {
    border-left: .25rem solid;
    transition: opacity .1875s ease-out;
  }

malchata

<?php

function SubscribeButton ($subscribed, $currentUserId, $userId, $className = null) {
  if (!isset($userId) || !ctype_digit($userId) || $userId === $currentUserId) {
    return "";
  }

  $subscribeButtonClasses = "subscribe-button";

  if (!is_null($className)) {

malchata

/* global registerPaint */

const paintName = "chemistreak";

class Chemistreak {
  static get inputProperties () {
    return [
      `--${paintName}-tile-width`,
      `--${paintName}-alternate-by`,
      `--${paintName}-stroke-weight`,

malchata

// Vendors
import { h, render, Fragment, Component } from "preact";

// Components
import MenuItem from "../MenuItem/MenuItem.js";

// CSS
import "./Menu.css";

class Menu extends Component {