dkrnl

<div class="content">
    <img src="https://ksenia-k.com/img/ksenia.jpg"/>
</div>

<canvas></canvas>

<div class="overlay">
    Liquid content reveal
</div>

nyoicode

<div class="content">
    <img src="https://ksenia-k.com/img/ksenia.jpg"/>
</div>

<canvas></canvas>

<div class="overlay">
    Liquid content reveal
</div>

xiaochengh

Explainer: Font Metrics Override Descriptors

(A newer version is at here, where a new descriptor advance-override is added)

Spec

This doc explains descriptors ascent-override, descent-override and line-gap-override for CSS @font-face rule.

Basic usage:

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

ToneJS + canvas-sketch

A interactive & generative site with canvas-sketch and Tone.js.

Live Demo:

• https://tone-sketch.surge.sh/

Running the sketch.js Code

mikowl

// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

//  Remove any duplicates from an array of primitives.
const unique = [...new Set(arr)]

// Sleep in async functions. Use: await sleep(2000).
const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
// or
const sleep = util.promisify(setTimeout);

vielhuber

installation

npm install flatpickr --save-dev

usage

import flatpickr from 'flatpickr';
import { fr } from 'flatpickr/dist/l10n/fr.js';
import { de } from 'flatpickr/dist/l10n/de.js';

andreiglingeanu

// Nullify the transforms of the element
// 
// This is all behaving just like getBoundingClientRect() but it nullifies all the transforms
// and kinds _reverts_ the element onto its original position.
// This will work even with complex translations, rotations.
// The beauty is in the way it applies matrix inverse onto the transformation
// matrix and mutates the getboundingclientrect along the way.
//
// Usage:
// let { top, left } = nullifyTransforms(el);

refactorized

{
  "name": "npm-args",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "hbd": "bash -c 'echo \"happy birthday $0! and many returns\"'",
    "paradiddle": "bash -c 'echo \"$0$1$0$0  $1$0$1$1\"'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

ayamflow

var cameraZ = camera.position.z;
var planeZ = 5;
var distance = cameraZ - planeZ;
var aspect = viewWidth / viewHeight;
var vFov = camera.fov * Math.PI / 180;
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
var planeWidthAtDistance = planeHeightAtDistance * aspect;

// or