anniesullie

/**
 * A bookmarklet for viewing shifted elements while debugging
 * Cumulative Layout Shift (web.dev/cls). Works in Chrome 84+
 * Shows the previous position of shifted elements in yellow,
 * and the new position in red.
 *
 * To install:
 * 1. Copy the code starting from the line beginning `javascript:`
 * 2. Add a new bookmark in Chrome, and paste the code in as the URL.
 **/

witmin

Convert MP4 file to animated WEBP file in ffmpeg CLI

1. Install ffmpeg CLI through homebrew

In terminal.app, install ffmpeg through homebrew

brew install ffmpeg

Validate the installation:

pragdave

export function clapperBoard() {
  let audio = new AudioContext()
  let beep  = audio.createOscillator()
  let flash = document.createElement("div")

  beep.frequency.value = 440 * 5
  beep.connect(audio.destination)
  flash.classList.add("clapperboard")

  beep.start()

addyosmani

[lcp]
const po = new PerformanceObserver(() => {});
po.observe({type: 'largest-contentful-paint', buffered: true});
const lastEntry = po.takeRecords().slice(-1)[0];
return lastEntry.renderTime || lastEntry.loadTime;

[cls]
const po = new PerformanceObserver(() => {});
po.observe({type: 'layout-shift', buffered: true});
return po.takeRecords().reduce((val, entry) => val + entry.value, 0);

addyosmani

const puppeteer = require('puppeteer');

const Good3G = {
  'offline': false,
  'downloadThroughput': 1.5 * 1024 * 1024 / 8,
  'uploadThroughput': 750 * 1024 / 8,
  'latency': 40
};

const phone = puppeteer.KnownDevices['Nexus 5X'];

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

mattdesl

PNG + SVG export from canvas-sketch

The helper function canvas-to-svg.js wraps a given render function (or renderer object) so that you can use Canvas2D context methods as usual, but upon single frame export (with Cmd/Ctrl + S) it will produce both a PNG and SVG file.

This uses canvas2svg which is not a perfect solution, as the Canvas2D API was never designed to be translated to SVG. Its best to stick with simple shape and path operations.

Full instructions: first install the canvas-sketch CLI if you haven't already:

npm install canvas-sketch-cli -g

una

CSS Color Functions

Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.

Examples:

• Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
• Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
• Uniformity among transformations between components with different primary colors

Proposal

marcosvpj

If the order of lines is not important##

Sort lines alphabetically, if they aren't already, and perform these steps:
_{(based on this related question: https://stackoverflow.com/q/1573361/3258851)}

1. Control+F

2. Toggle "Replace mode"

3. Toggle "Use Regular Expression" (the icon with the .* symbol)

ntkog

function propuestas(partido) {
    let lista = [...document.querySelectorAll('.e-module div[data-option]')].map(el=>({
        partido: el.dataset.option,
        texto: [...el.querySelectorAll('p')].reduce((old,cur)=>old + cur.textContent, "")
    })).filter(obj=> (partido === "all" ? true : obj.partido === partido) && obj.texto.length > 0);
    partido === "all" ? console.table(lista) : console.table(lista,["texto"]);
    let csv = lista.map(r => `"${r.partido}"|"${r.texto.replace(/\n/g, " ")}"`);
    csv.unshift(`"partido"|"texto"`);
  
    // Copia al portapapeles todos los datos a un CSV