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; // ¯\\_(ツ)_/¯

caseywatts

javascript: (function () {
  const tootContents = encodeURIComponent(
    document
      .getElementsByClassName("detailed-status")[0]
      .getElementsByClassName("status__content__text")[0].innerText
  );
  const twitterLink = `https://twitter.com/intent/tweet?text=${tootContents}`;
  window.location.href = twitterLink;
})();

caseywatts

So many messaging apps!! It's hard to keep track of who I talk to where!

I message Brian on Signal, Sean on Discord, and Steve by sms.

I just want to type their name and BAM immediately be in the correct app.

This takes two steps:

1. Coming up with the "weird links" to open the right app to the right person (I use a spreadsheet)
2. Making those "weird links" easy to open (like with Apple Shortcuts)

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

paulmelero

DeepClone-js

Utility to clean up circular references while creating a new reference of an object performing a deep copy (as oposite to a shallow copy). Bear in mind it doesn't work with some data types: Date, Map, RegExp, Set, TypedArray...

📦 Install

npm i -S gist:0bce1161cfd2aa91ae7cad9abb42c342

swyxio

Sequence of Gatsby's bootstrap lifecycle with links to source code as of v2.0.0

permalink https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c995c760fe380769852bcdb26a2278/packages/gatsby/src/bootstrap/index.js

1. open and validate gatsby-config (get-config-file.js) 1.5 load themes (swyx added this note July 2019)
2. load plugins (load-plugins/index.js) from the list given in gatsby-config.js
3. onPreBootstrap: runs onPreBootstrap if it is implemented in any plugins, for example gatsby-plugin-typography. Receives handy [apiCallArgs](https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c9

JeffreyWay

alias gl="git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

caseywatts

Short Url: http://caseywatts.com/chromeextensionworkshop

Alternate Short Url: http://tinyurl.com/blatant-panda

Other gists & tricks: http://caseywatts.com/gists-and-tricks

Table of Contents

0. Inspiration - Some Chrome Extensions to Inspire You

• Cloud to Butt Plus

paulallies

#add 'node_modules' to .gitignore file

git rm -r --cached node_modules
git commit -m 'Remove the now ignored directory node_modules'
git push origin <branch-name>

pbojinov

Two way iframe communication

The main difference between the two pages is the method of sending messages. Recieving messages is the same in both.

Parent

Send messages to iframe using iframeEl.contentWindow.postMessage Recieve messages using window.addEventListener('message')

iframe