Skip to content

Instantly share code, notes, and snippets.

View joe-watkins's full-sized avatar

Joe Watkins joe-watkins

51 followers · 5 following
View GitHub Profile
@joe-watkins
joe-watkins / gist:710e5aa49a35382d6464
Last active January 17, 2022 11:44
Test for HTML5 video autoplay support.
/*
Test for HTML5 video autoplay support. Adds .video-autoplay or .no-video-autoplay to <HTML>
Makes a global 'autoplay' variable available
Pass a delay & callback function to run if device supports autoplay
Use case: Some mobile devices do not allow for autoplay. With this you can detect those devices.
Usage: html5VideoTest(500,callback);
Source: http://stackoverflow.com/questions/7120703/how-do-i-detect-if-the-html5-autoplay-attribute-is-supported
Minified version below
*/
@joe-watkins
joe-watkins / tableToD3Chart.js
Last active March 15, 2018 15:00
Table to D3/C3 Chart Demo - Making data for visualizations more accessible with dom scraping patterns
/*!
* tableToD3Chart();
* Author: Joe Watkins - joe@emergeinteractive.com
*
* Scrape the dom for data and create C3/D3 based charts
*
* Defaults:
* chartTitleWrapper = the element wrapping text for chart label
* chartType = line, pie, donut, bar, spline, scatter etc. - see C3 docs
* useDom = true/false - if you don't want to scrape dom and want to define data use false
@joe-watkins
joe-watkins / gist:25991b75f1fb0444aef0
Last active July 9, 2016 18:34
SVG example
<!-- standard -->
<svg class="search-icon">
<use xlink:href="#icon-search-glass"></use>
<image class="search-icon" src="images/svg/search-glass.png">
</svg>
<!-- Assistive Technology ingore -->
<svg class="search-icon" aria-hidden="true">
<use xlink:href="#icon-search-glass"></use>
<image class="search-icon" src="images/svg/search-glass.png">
@joe-watkins
joe-watkins / plugin-starter.js
Last active June 5, 2016 23:08
Vanilla JS plugin starter
var someCoolPlugin = function(options){
// defaults
var defaults = {
el: ".anchor-to-button",
killHref: true,
parent: document
}
// loop through defaults
@joe-watkins
joe-watkins / User-Affected-Layouts---Kill-Slider.markdown
Created February 17, 2014 19:46
A Pen by Joe Watkins.

User-Affected Layouts - Kill Slider

User-Affected Layouts is a concept of empowering the user, when appropriate, letting them have some control over their experience. View in full page.

A Pen by Joe Watkins on CodePen.

License.

@joe-watkins
joe-watkins / gulpfile.js
Created May 6, 2016 14:15 — forked from demisx/gulpfile.js
Gulp 4 gulpfile.js
// Gulp 4
var gulp = require('gulp');
var using = require('gulp-using');
var grep = require('gulp-grep');
var changed = require('gulp-changed');
var del = require('del');
var coffee = require('gulp-coffee');
var less = require('gulp-less');
var coffeelint = require('gulp-coffeelint');
var sourcemaps = require('gulp-sourcemaps');
@joe-watkins
joe-watkins / gist:00a1bd83fec29048f4ed
Last active April 22, 2016 06:28
toggleAria.js - a small plugin for swapping boolean aria attributes easier
/*!
* toggleAria.js
* Author: Joe Watkins
* usage:
HTML
<button aria-pressed="false">Show Content</button>
$("button").on("click", function(){
$(this).toggleAria({aria: "pressed"});
@joe-watkins
joe-watkins / gulpfile.js
Last active January 4, 2016 12:59
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
notify = require('gulp-notify'),
appDefaults = {
stylesDir : "styles/" // define path to styles
}
@joe-watkins
joe-watkins / Inline SVG example
Created December 10, 2015 19:06
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" style="display:none"><defs><filter id="a" filterUnits="userSpaceOnUse" x="0" y=".052" width="34.092" height="34.093"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><symbol id="icon-arrow-left" viewBox="0 0 24 24"><path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2" d="M15.5 21l-9-9 9-9"/></symbol><symbol id="icon-arrow-right" viewBox="0 0 24 24"><path fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2" d="M8.5 3l9 9-9 9"/></symbol><symbol id="icon-camera" viewBox="0 0 37 24"><title>ios-videocam - Ionicons</title><path d="M22.72.875c.82 0 1.508.278 2.064.835.557.557.835 1.245.835 2.065V20.3c0 .82-.28 1.537-.837 2.152-.556.615-1.245.923-2.065.923H3.294c-.82 0-1.553-.308-2.197-.923C.453 21.837.13 21.12.13 20.3V3.774c0-.82.308-1.508.924-2.065.615-.558 1.362-.836 2.24-.836H22
@joe-watkins
joe-watkins / LICENSE.txt
Last active August 29, 2015 14:23 — forked from 140bytes/LICENSE.txt
Detect Missing Alt Tags - 140byt.es
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE