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

jakewtaylor

Increases indentation on the file tree and adds some lines to each directory/file.

Works 15 levels deep, but you can expand it by just adding more of each line thats repeating, i.e.:

• add another box shadow
  • (n*-20px) 0 0 0 rgba(255, 255, 255, 0.4)
• add another padding-left
  • .monaco-tree-row[aria-level="n"] { padding-left: ((n-1)*20)px; }
• add another :before & :after with left positioning
  • .monaco-tree-row[aria-level="n"]:before { left: (((n-1)*20)-9)px; }
• .monaco-tree-row[aria-level="n"]:after { left: (((n-1)*20)-9)px; }

huytd

function textSize(text) {
    if (!d3) return;
    var container = d3.select('body').append('svg');
    container.append('text').attr({ x: -99999, y: -99999 }).text(text);
    var size = container.node().getBBox();
    container.remove();
    return { width: size.width, height: size.height };
}

// Usage: textSize("This is a very long text");