Skip to content

Instantly share code, notes, and snippets.

View ginader's full-sized avatar

Dirk Ginader ginader

View GitHub Profile
@ginader
ginader / deepQuerySelectorAll.js
Created March 31, 2023 12:51 — forked from Haprog/deepQuerySelectorAll.js
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) {
@ginader
ginader / LogFocus snipped
Created May 17, 2017 16:04
Save this into your Dev Tools Snippets and run when you want to follow the focus
window.addEventListener('focus',function(e){
window.console.info('focus',e.target);
},true);
@ginader
ginader / --window-width-css-var.js
Created April 20, 2017 17:56
Give CSS the exact pixel width of the viewport for situations when 100% doesn't work
var updateWindowWidthVar = function(){
// console.log('Resized finished.', window.innerWidth);
document.documentElement.style.setProperty( '--window-width', window.innerWidth + 'px' );
};
updateWindowWidthVar();
window.onresize = updateWindowWidthVar;
// window.onresize = _.debounce(updateWindowWidthVar, 150); // debounced version (only fires once when resize is done) to not impact performance of app (needs lodash)
@ginader
ginader / multiline-string.js
Last active August 29, 2015 14:04
Multi line Javascript String
// found here: https://github.com/isaacs/node-tap/blob/master/bin/tap.js#L65
var multi = function(){/*
Usage:
tap <options> <files>
Run the files as tap tests, parse the output, and report the results
Options:
@ginader
ginader / retina.css
Created November 30, 2012 19:41
retina media queries
// taken from this article:
// http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
@ginader
ginader / my approach in Sass
Created November 30, 2012 00:10
optimizing the class names of sprites
@import "compass";
$flags-spacing: 50px;
$flags-position: 50%;
$flags-sprite-base-class: ".flags li";
@import "flags/*.png";
$sprites: sprite-map("flags/*.png");
@ginader
ginader / gist:3802506
Created September 28, 2012 22:58
Update Livereload 2.3.8 to Sass 3.2.1
# 1. in case you haven't installed the latest SASS
$ sudo gem install sass
# 2. now let's symlink the system Sass into the Livereload bundle
cd /Applications/LiveReload.app/Contents/Resources/SASS.lrplugin/lib
sudo mv sass sass-bundled
sudo ln -s /Library/Ruby/Gems/1.8/gems/sass-3.2.1/ sass
# 3. done. enjoy the lovely new features like @content for awesome @media support :-)
@ginader
ginader / github-pull.js
Created August 28, 2012 03:43 — forked from botic/github-pull.js
Github pull request server
include("ringo/subprocess");
var log = require("ringo/logging").getLogger(module.id);
exports.app = function(req) {
log.info("Incoming request.");
if (req.method !== "POST") {
log.info("Not a valid POST request.");
@ginader
ginader / dabblet.css
Created July 24, 2012 00:37
aligning labels across multiple blocks
/**
* aligning labels across multiple blocks
*/
table {
background:white;
margin:20px;
border:none;
border-spacing: 0;
}
@ginader
ginader / dabblet.css
Created February 3, 2012 18:38
fade in from display:none(ish)
/**
* fade in from display:none(ish)
* taken from http://jsfiddle.net/Schepp/KFja4/
*/
body{
margin-top:3em;
}
span {
display: inline-block;
overflow: hidden;