Skip to content

Instantly share code, notes, and snippets.

View argyleink's full-sized avatar
💀
calc(dev*design)

Adam Argyle argyleink

💀
calc(dev*design)
3.3k followers · 361 following
View GitHub Profile
@argyleink
argyleink / flexbox-grid.styl
Created May 17, 2014 17:29
CSS Flexbox Grid
// as seen here: https://github.com/zemirco/flexbox-grid/blob/master/flexbox-grid.styl
@import 'nib'
// variables
var-columns = 12
var-gutter-width = 1rem
// some styles that apply to all columns - makes final css nicer
$common-column-styles
box-sizing(border-box)
@argyleink
argyleink / server.md
Created July 25, 2013 03:37 — forked from tmcw/server.md

Booting Up A Development Server

Open a console. Terminal.app on Macs, your shell or whatever on PCs.

Python is easiest:

python -m SimpleHTTPServer 8000

Then go to http://localhost:8000/ in a web browser.

@argyleink
argyleink / Getting started with requirejs.md
Created July 23, 2013 22:59 — forked from willurd/ Getting started with requirejs.md

This is a small collection of scripts showing how to use require.js. It's only one of several ways of setting up a require.js project, but it's enough to get started.

At its core, require.js is about three things:

  1. Dependency management
  2. Modularity
  3. Dynamic script loading

The following files show how these are achieved.

@argyleink
argyleink / SVG htaccess
Created July 17, 2013 15:58
Teach Apache to serve SVG
AddType image/svg+xml svg
AddType image/svg+xml svgz
@argyleink
argyleink / .htaccess mobile redirect
Last active December 19, 2015 21:39
Dead simple ipad (or whatever), redirect to custom index.html. I made this so that the viewport meta data can be present immediately for ipad, to prevent flashing of content. This is a great way around many JS hacks.
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "ipad" [NC]
RewriteRule ipad.html [L,QSA]
@argyleink
argyleink / debounce.js
Last active September 12, 2022 12:01
Debounce your events, so they can't lock your UI while spammed. Control the flow!
// As taken from the UnderscoreJS utility framework
function debounce(func, wait, immediate) {
let timeout
return function() {
let context = this
, args = arguments
let later = function() {
timeout = null
@argyleink
argyleink / word-break.css
Last active December 12, 2017 18:28
Cross browser word-break, so long urls and "wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww" don't outgrow your containers.
.word-break {
-ms-word-break: break-all;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
@argyleink
argyleink / jquery.animate3d.js
Created April 22, 2013 21:38
Source: http://cameronspear.com/blog/animating-translate3d-with-jquery/ Plugin so jquery supports animating translate3d positions with callbacks
;(function($) {
var delay = 0;
$.fn.translate3d = function(translations, speed, easing, complete) {
var opt = $.speed(speed, easing, complete);
opt.easing = opt.easing || 'ease';
translations = $.extend({x: 0, y: 0, z: 0}, translations);
return this.each(function() {
var $this = $(this);
@argyleink
argyleink / vendorPrefix.js
Created April 22, 2013 21:35
Require.js ready vendor prefix extractor
vendor.prefix = (function () {
'use strict';
var styles = window.getComputedStyle(document.documentElement, '')
, pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1]
, dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
@argyleink
argyleink / rAF.polyfill.js
Created April 22, 2013 21:34
Require ready Request Animation Frame shim
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)