jakub-g

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

joshuacerbito

/**
 * useScroll React custom hook
 * Usage:
 *    const { scrollX, scrollY, scrollDirection } = useScroll();
 */

import { useState, useEffect } from "react";

export function useScroll() {
  const [lastScrollTop, setLastScrollTop] = useState(0);

rviscomi

Crash Course in CrUX

CrUX is the Chrome UX Report from Google. This crash course will take you through everything you need to get the most out of the data.

1. Official Docs

https://developers.google.com/web/tools/chrome-user-experience-report/

2. Guides on web.dev

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 

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)

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

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

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)()

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'];

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