Skip to content

Instantly share code, notes, and snippets.

View davidhund's full-sized avatar

David Hund davidhund

View GitHub Profile
@davewalker235
davewalker235 / ads.html
Last active February 21, 2022 18:15
Lazyload Google DFP ads with SRA Roadblock
<html>
<head>
<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
// This is a very basic example of Lazyloading DFP ads with an SRA roadblock.
// The example uses ES2016 javascript syntax and relies on
// IntersectionObservers. Normally in production this would be transpiled
// with babel and polyfilled for support. It also relies on DFP maintaining a
// changeCorrelator for all ad requests. Historically this correlator has
// timed out after 30 seconds, which is why this example relies on a js timer
@threepointone
threepointone / 0 basics.md
Last active March 21, 2023 01:53
css-in-js

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };
@grimzy
grimzy / git-pull-all
Created September 15, 2017 02:15
Git pull all remote branches
#!/usr/bin/env bash
git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote#origin/}" "$remote"; done
git fetch --all
git pull --all
@cferdinandi
cferdinandi / vanilla-js-plugin.js
Created June 13, 2017 00:10
My starter template for vanilla JavaScript plugins.
(function (root, factory) {
if ( typeof define === 'function' && define.amd ) {
define([], factory(root));
} else if ( typeof exports === 'object' ) {
module.exports = factory(root);
} else {
root.myPlugin = factory(root);
}
})(typeof global !== 'undefined' ? global : this.window || this.global, function (root) {
@cvan
cvan / aframe-autoplay-video-on-mobile.js
Last active February 23, 2019 12:24
handle autoplay of <video> in A-Frame on mobile (iOS, Android) - see https://github.com/aframevr/aframe/pull/2657/files
function playVideoOnClick (selector) {
el = document.querySelector(selector);
if (el) {
addListener();
} else {
window.addEventListener('load', addListener);
}
function addListener () {
@luceos
luceos / post-checkout
Last active April 27, 2023 17:19 — forked from mariusGundersen/post-checkout
runs composer install after doing a git pull
#!/usr/bin/env bash
# MIT © Sindre Sorhus - sindresorhus.com
# git hook to run a command after `git pull` or `git checkout` if a specified file was changed
# Run `chmod +x post-checkout` to make it executable then put it into `.git/hooks/`.
changed_files="$(git diff-tree -r --name-only --no-commit-id HEAD@{1} HEAD)"
check_run() {
echo "$changed_files" | grep --quiet "$1" && echo " * changes detected in $1" && echo " * running $2" && eval "$2"
@igrigorik
igrigorik / domtokenlist_feature_detection.js
Last active June 21, 2023 16:57 — forked from yoavweiss/domtokenlist_feature_detection.js
DOMTokenList supports() example for Preload
var DOMTokenListSupports = function(tokenList, token) {
if (!tokenList || !tokenList.supports) {
return;
}
try {
return tokenList.supports(token);
} catch (e) {
if (e instanceof TypeError) {
console.log("The DOMTokenList doesn't have a supported tokens list");
} else {
@dnephin
dnephin / compose-hooks.sh
Last active October 21, 2022 20:44
Execute a hook in './hooks/<service>/<action>' when that event is received
#!/bin/bash
set -e
function handle_event() {
local entry="$1"
local action=$(echo $entry | jq -r '.action')
local service=$(echo $entry | jq -r '.service')
local hook="./hooks/$service/$action"
if [ -x "$hook" ]; then
"$hook" "$entry"
@davidhund
davidhund / accessible-svg-sprite-icons.md
Last active March 27, 2022 12:18
Figuring out the most robust, accessible markup for SVG Sprite Icons

(as a reply to: https://css-tricks.com/svg-use-with-external-reference-take-2/)

While I love SVG (sprites) there are a lot of issues to take into account.

Advocating The Most Accessible Markup

UPDATE: you should take a look at https://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html which seems a simpler and more robust approach

Another thing: since people copy-paste our code examples it would be great if we could advocate the most robust and accessible markup IMO. I am no a11y expert, but in my understanding we could/should take some extra steps to make out SVG sprite icons more accessible.

@paulirish
paulirish / what-forces-layout.md
Last active March 28, 2024 11:45
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