Skip to content

Instantly share code, notes, and snippets.

View TunkShif's full-sized avatar
👾

Tristan Yang TunkShif

👾
View GitHub Profile
@OrionReed
OrionReed / dom3d.js
Last active September 19, 2024 20:10
3D DOM viewer, copy-paste this into your console to visualise the DOM topographically.
// 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; // ¯\\_(ツ)_/¯
@junagao
junagao / vscode-italic-font-settings.md
Last active September 1, 2024 03:18
VSCode italic font settings

VSCode italic font settings

Add this to settings.json (cmd ,):

{
  "editor.fontFamily": "Operator Mono, Fira Code iScript, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
@christoph-frick
christoph-frick / Awesome-Fennel.md
Last active August 9, 2024 23:03
Use fennel to write the awesome-wm config

How to write an awesome-wm config with Fennel

Awesome-WM is a X11 window manager, that is configured via Lua. Fennel is a Lisp for Lua. This shows a general setup of how to write your awesome-wm config using fennel directly without the compilation step (which would also work, but is not needed).

General setup

Fetch a recent Fennel version (the

@paulirish
paulirish / what-forces-layout.md
Last active September 20, 2024 21:16
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent