OrionReed

// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
  const SHOW_SIDES = false; // color sides of DOM nodes?
  const COLOR_SURFACE = true; // color tops of DOM nodes?
  const COLOR_RANDOM = false; // randomise color?
  const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
  const MAX_ROTATION = 180; // set to 360 to rotate all the way round
  const THICKNESS = 20; // thickness of layers
  const DISTANCE = 10000; // ¯\\_(ツ)_/¯

1Marc

// Credit Ryan Carniato https://frontendmasters.com/courses/reactivity-solidjs/

let context = [];

export function untrack(fn) {
    const prevContext = context;
    context = [];
    const res = fn();
    context = prevContext;
    return res;

zachleat

JSX, Typescript, and TSX in 11ty.js

Example repo for 11ty/eleventy#2248.

This gist was created by @pspeter3!

EllyLoel

/*
  Made by Elly Loel - https://ellyloel.com/
  With inspiration from:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/[email protected]/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

  Notes:
    - `:where()` is used to lower specificity for easy overriding.
*/

samthor

// This is part of the blog post here: https://whistlr.info/2022/abortcontroller-is-your-friend/
// ...and can be used to detect/polyfill the `signal` argument to addEventListener.
//
// Note that at writing, 86%+ of active browsers already support it:
//   https://caniuse.com/mdn-api_eventtarget_addeventlistener_options_parameter_options_signal_parameter
// ...but that 92% of browsers support `AbortController` and signal.
//
// So there's 6% of total browsers which will fail silently when adding the `signal` argument.
// Eyeballing it, this is mostly Safari 11-15 and Chrome 66-90. These snippets can help with those targets.
//

andrewcourtice

/*
This a basic implementation of task cancellation using a Promise extension
combined with an AbortController. There are 3 major benefits to this implementation:

1. Because it's just an extension of a Promise the Task is fully
compatible with the async/await syntax.
2. By using the abort controller as a native cancellation token
fetch requests and certain DOM operations can be cancelled inside the task.
3. By passing the controller from parent tasks to new child tasks an entire
async chain can be cancelled using a single AbortController.

WebReflection

// WARNING: There's much more to know/do around hooks, and
//          this is just a simplification of how these work.

// shared references, updated
// per each hook invoke
let execution = null;
let current = null;
let context = null;
let args = null;

developit

Preact: Progressive Hydration

Preact now supports seamless progressive hydration.

Any component can throw during hydration (or new tree creation like a route change!), and if a component somewhere higher in the tree catches that via componentDidCatch, hydration gets paused.

Re-rendering the tree (via setState, etc) simply resumes hydration where it left off.

DanShappir

function fromCallback(emitter) {
  let values;
  let resolve;
  const init = r => [values, resolve] = [[], r];  
  let valuesAvailable = new Promise(init);
  emitter(value => {
    values.push(value);
    resolve(values);
  });
  return {

victor-homyakov

• ✔︎ - не мешает попаданию страницы в bfcache
• ✘ - запрещает попадание страницы в bfcache
• пустая ячейка - влияние неизвестно

API	Firefox	Safari	Chromium	IE
Подписка на beforeunload	✘	✔	✔	✘
Подписка на unload	✘	✔	✔
Незавершённые запросы XHR/fetch	✘	✔	✘ в планах прерывать запрос и вызывать onerror при восстановлении страницы
Незавершённые запросы за ресурсами	✘ кроме favicon