Skip to content

Instantly share code, notes, and snippets.

View davidhund's full-sized avatar

David Hund davidhund

View GitHub Profile
@rhawbert
rhawbert / bad-safari.html
Last active February 6, 2018 06:19
Safari 8 (iOS & Mac OS) doesn't render injected SVG sprites when defined later, after the actual svg > use tags
<h1>Safari 8 is a no go (iOS & Mac OS)</h1>
<p>Desktop version 8.0 (10600.1.25), Mobile v. 8.0.2</p>
<h2>Before the svg sprite as symbol</h2>
<svg class="icon">
<use xlink:href="#icon-airplane" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none; position:absolute; width:0; height:0;">
@jtangelder
jtangelder / PreventGhostClick.js
Last active November 19, 2024 14:11
PreventGhostClick
/**
* Prevent click events after a touchend.
*
* Inspired/copy-paste from this article of Google by Ryan Fioravanti
* https://developers.google.com/mobile/articles/fast_buttons#ghost
*
* USAGE:
* Prevent the click event for an certain element
* ````
* PreventGhostClick(myElement);
@scottjehl
scottjehl / noncritcss.md
Last active August 12, 2023 16:57
Comparing two ways to load non-critical CSS

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/


For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

@sergejmueller
sergejmueller / ttf2woff2.md
Last active March 9, 2024 13:37
WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
@razwan
razwan / _baseline.scss
Created April 14, 2014 16:20
Aligning type to baseline the right way with SASS
$base-font-size: 16px;
$base-line-height: 1.5;
// this value may vary for each font
// unitless value relative to 1em
$cap-height: 0.68;
@mixin baseline($font-size, $scale: 2) {
anonymous
anonymous / Gruntfile2.js
Created April 2, 2014 20:31
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Watch
watch: {
options: {
cwd: 'httpdocs/'
@reinier
reinier / Brewfile
Last active August 29, 2015 13:56
A Brewfile for installing stuff on a fresh new Mac OS X installation
# Install [homebrew](http://brew.sh)
# > ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
#
# Run this file:
# > brew bundle Brewfile
#
# To install sublime-text-3 for example:
# > brew tap caskroom/versions
#
# At the end, start Alfred, close it and run:

Mac 'Wednesday' setup history

All (well, most of it) the apps & tools I installed on my Mac from clean install until now

Install xCode

Install Homebrew (check website for latest install code)

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

@raucao
raucao / typekit.js
Last active February 12, 2020 06:25
Improved Typekit embed code
(function(d) {
var tkTimeout=3000;
if(window.sessionStorage){if(sessionStorage.getItem('useTypekit')==='false'){tkTimeout=0;}}
var config = {
kitId: 'a1b2c3f4',
scriptTimeout: tkTimeout
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";if(window.sessionStorage){sessionStorage.setItem("useTypekit","false")}},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
@samuelhorn
samuelhorn / gulpfile.js
Last active December 9, 2022 09:38
My gulpfile for new projects
/*******************************************************************************
1. DEPENDENCIES
*******************************************************************************/
var gulp = require('gulp'); // gulp core
sass = require('gulp-sass'), // sass compiler
uglify = require('gulp-uglify'), // uglifies the js
jshint = require('gulp-jshint'), // check if js is ok
rename = require("gulp-rename"); // rename files
concat = require('gulp-concat'), // concatinate js