Skip to content

Instantly share code, notes, and snippets.

View ginader's full-sized avatar

Dirk Ginader ginader

248 followers · 160 following
View GitHub Profile
@Haprog
Haprog / deepQuerySelectorAll.js
Created May 5, 2021 08:36
A version of querySelectorAll() that also recursively looks into all shadow roots
/**
* A version of querySelectorAll() that also recursively looks into all shadow roots.
* @param selector Selector
* @param root (Optional) Scope of the query (Element or Document). Defaults to the document.
* @returns
*/
function deepQuerySelectorAll(selector, root) {
root = root || document;
const results = Array.from(root.querySelectorAll(selector));
const pushNestedResults = function (root) {
@asontu
asontu / mop.js
Last active June 28, 2021 11:36
Functions to easily make a MutationObserver Promise in JavaScript. Usage described on my blog: https://asontu.github.io/2020/12/30/mutationobserver-promise-made-easy.html
/**
* Runs "trigger" function after setting up MutationObserver and (optionally) Timeout
* that respectively resolve or reject the Promise. The resolve function gets an array
* (not NodeList) of elements that were added as argument. If the trigger function
* returns true the Promise is immediately resolved with an empty array, without waiting
* for a Mutation.
*
* @param {Function} trigger Function to run after setting up MutationObserver and Timeout.
* @param {Object} watch DOM Element to watch for Mutations.
* @param {string} [query=*] Selector query that elements added in the Observed Mutation must match.
@tomhodgins
tomhodgins / container-queries-stylesheet-edition.es5.js
Last active April 10, 2018 06:29
Container Queries Mixin: Stylesheet version (using $this as a keyword for matching tags)
function containerQuery(selector, test, stylesheet) {
var tag = document.querySelectorAll(selector)
var style = ''
var count = 0
for (var i=0; i<tag.length; i++) {
var attr = (selector+test).replace(/\W+/g, '')
@jwilson8767
jwilson8767 / es6-element-ready.js
Last active July 12, 2024 05:01
Wait for an element to exist. ES6, Promise, MutationObserver
// MIT Licensed
// Author: jwilson8767
/**
* Waits for an element satisfying selector to exist, then resolves promise with the element.
* Useful for resolving race conditions.
*
* @param selector
* @returns {Promise}
*/
@rodneyrehm
rodneyrehm / manual-overflow-scroll.js
Created January 10, 2017 20:41
Android 4.4 / Chrome 30 WebView: Manual Scrolling of overflow elements
// see https://bugs.chromium.org/p/chromium/issues/detail?id=294514 for an explanation of the problem, with a very helpful automatic archival
// If you use this "code" you're going to burn in a very special level of hell.
// A level they reserve for child molesters and people who talk at the theater.
function engageManualScrolling(element) {
var start = 0;
var handleStart = function(event) {
start = element.scrollTop + event.touches[0].pageY;
};
@codepo8
codepo8 / player.php
Created September 29, 2016 12:58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Audio archive</title>
<style>
body {
font-family: helvetica,arial,sans-serif;
color: #333;
@marcysutton
marcysutton / chrome-a11y-experiment-instructions.md
Last active January 31, 2023 22:07
Enable Chrome Accessibility Experiment

NOTE: This is no longer an experiment! You can use the accessibility inspector in Chrome Devtools now, including a fantastic color contrast inspection tool. Read more: https://developers.google.com/web/updates/2018/01/devtools#a11y

Just like any good element inspector helps you debug styles, accessibility inspection in the browser can help you debug HTML and ARIA exposed for assistive technologies such as screen readers. There's a similar tool in Safari (and reportedly one in Edge) but I like the Chrome one best.

As an internal Chrome experiment, this tool differs from the Accessibility Developer Tools extension in that it has privileged Accessibility API access and reports more information as a result. You can still use the audit feature in the Chrome Accessibility Developer Tools, or you could use the aXe Chrome extension. :)

To enable the accessibility inspector in Chrome stable:

@aaronash
aaronash / script.cocoascript
Created March 20, 2016 22:43
Simple example Sketch plugin script to export layers into json data. This was an experiment. It's not pretty.
// Sketch export layers to json script
// This was hacked together for experimentation purposes, the code is ugly.
// logs:
// tail -f /var/log/system.log | grep Sketch
//I only later realized that there are methods to get the parent or children
//layers... oops. Seriously, I just threw this together.
function makeChildrenArray(layerGroup, dict, allLayers) {
// log("called makeChildrenArray for " + layerGroup)
// result = new Array()
@daneden
daneden / Instructions.md
Created December 1, 2015 00:25
Remap Caps Lock to Emoji on Mac

How to remap the caps lock key to the emoji selector on Mac

  1. Go to System Preferences -> Keyboard -> Modifier Keys...
  2. Change “Caps Lock” to “No action”
  3. Install Seil
  4. Change the Caps Lock key in Seil to keyCode 80 (F19)
  5. Install Karabiner
  6. Open Karabiner and go to Misc & Uninstall -> Open private.xml
  7. Copy the contents of this gist's example to the XML file and save
  8. In Karabiner, go to Change Keys -> Reload XML
@paulirish
paulirish / what-forces-layout.md
Last active July 23, 2024 15:12
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