Skip to content

Instantly share code, notes, and snippets.

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

Adam Argyle argyleink

💀
calc(dev*design)
View GitHub Profile
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
@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)

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.

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];