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

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

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

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

/* global registerPaint */

const paintName = "chemistreak";

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

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

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

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

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

malchata

1. React mobile nav component
2. Preact mobile nav component
3. addEventListener-driven mobile nav

malchata

// Vendors
import React, { Fragment, Component } from "react";

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

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

class Menu extends Component {

malchata

console.time("Evaluate script.");

const menuToggleButton = document.getElementById("menu-toggle");
const closeMenuButton = document.getElementById("close-menu");
const menu = document.getElementById("menu");
const overlay = document.getElementById("menu-overlay");
let menuVisible = false;

const openMenu = function () {
  console.time("Menu open.");