Skip to content

Instantly share code, notes, and snippets.

View asuh's full-sized avatar

Micah asuh

View GitHub Profile
@OrionReed
OrionReed / dom3d.js
Last active November 16, 2024 13:18
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; // ¯\\_(ツ)_/¯

This gist is a simple no-brainer description of the 3 ways (actually 2.5) the Web handle events.

<tag onclick />

The declarative inline HTML event listener is mostly an indirection of DOM Level 0 events, meaning this simply uses the equivalent of tag.onclick = listener behind the scene.

Example

click me
@panzerdp
panzerdp / decoratedFetch.ts
Last active September 18, 2022 23:51
An extensible fetch() implementation that uses the decorator pattern
type ResponseWithData = Response & { data?: any };
interface Fetcher {
run(input: RequestInfo, init?: RequestInit): Promise<ResponseWithData>;
}
class BasicFetcher implements Fetcher {
async run(input: RequestInfo, init?: RequestInit): Promise<ResponseWithData> {
return await fetch(input, init);
}
@cvan
cvan / useMedia-hook.js
Created July 1, 2020 20:15
useMedia - React hook for `window.matchMedia` for matching media-query
function useMedia(mediaQuery) {
const match = () => {
if (!window.matchMedia) {
return false;
}
return window.matchMedia(mediaQuery).matches;
};
const [value, set] = useState(match);
@akella
akella / setup.md
Last active November 8, 2024 12:49
My Setup
/**
* Pass in an element and its CSS Custom Property that you want the value of.
* Optionally, you can determine what datatype you get back.
*
* @param {String} propKey
* @param {HTMLELement} element=document.documentElement
* @param {String} castAs='string'
* @returns {*}
*/
const getCSSCustomProp = (propKey, element = document.documentElement, castAs = 'string') => {
@asuh
asuh / package.json
Last active December 19, 2019 21:11
NPM only, no Grunt, Gulp, Broccoli or Brunch
{
"name": "_s",
"version": "1.0.1",
"scripts": {
"clean": "rimraf style.css",
"notify": "notify -h",
"serve": "browser-sync start --proxy 'my.asuh' --files '**/*.css, **/*.js, *.php, **/*.json, dist/images/*'",
"imagemin": "imagemin src/images/* -o dist/images",
"icons": "svgo -f src/images/icons -o dist/images/icons && svg-sprite-generate -d dist/images/icons -o dist/images/icons/sprite.svg",
"lint-scss": "stylelint 'sass/**/*.scss' --syntax scss --config node_modules/stylelint-config-wordpress/scss.js",

Advanced JavaScript Learning Resources

This is a list of advanced JavaScript learning resources from people who responded to this [Tweet][13] and this [Tweet][20].

  • [You Don't Know JS][3]

  • [Frontend Masters courses by Kyle Simpson][12]

  • [@mpjme][6]'s [YouTube videos][5]

@gboudreau
gboudreau / AuthyToOtherAuthenticator.md
Last active November 17, 2024 04:56 — forked from Ingramz/AuthyToOtherAuthenticator.md
Export TOTP tokens from Authy

Exporting your 2FA tokens from Authy to transfer them into another 2FA application

IMPORTANT - Update regarding deprecation of Authy desktop apps

Past August 2024, Authy stopped supported the desktop version of their apps:
See Authy is shutting down its desktop app | The 2FA app Authy will only be available on Android and iOS starting in August for details.

And indeed, after a while, Authy changed something in their backend which now prevents the old desktop app from logging in. If you are already logged in, then you are in luck, and you can follow the instructions below to export to tokens.

If you are not logged in anymore, but can find a backup of the necessary files, then restore those files, and re-install Authy 2.2.3 following the instructions below, and it should work as expected.