Skip to content

Instantly share code, notes, and snippets.

View sndrs's full-sized avatar
🐛

Alex Sanders sndrs

🐛
39 followers · 5 following
View GitHub Profile
@sndrs
sndrs / throttled-native-events.html
Last active August 27, 2015 13:01
Throttle native browser events to the next animationFrame, mainly to calm 3rd party scripts down
<!DOCTYPE html>
<html>
<head>
<script>
(function (window, Window) {
var eventTypes = ['scroll', 'mousemove', 'touchmove'],
eventTypesRegex = new RegExp(eventTypes.join("|"));
eventTypes.forEach(function (type) {
@sndrs
sndrs / ChromeExtensionGulp.js
Created July 27, 2014 23:53 — forked from TravelingTechGuy/ChromeExtensionGulp.js
'use strict';
//npm install gulp gulp-minify-css gulp-uglify gulp-clean gulp-cleanhtml gulp-jshint gulp-strip-debug gulp-zip --save-dev
var gulp = require('gulp'),
clean = require('gulp-clean'),
cleanhtml = require('gulp-cleanhtml'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
stripdebug = require('gulp-strip-debug'),
@sndrs
sndrs / SassMeister-input.scss
Created October 27, 2014 16:54
Sass class
// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----
// list
// $colours: (red green blue purple);
@sndrs
sndrs / QueueableModule-PoC.js
Last active August 29, 2015 14:24
PoC of a JS module loading + monitoring queue – trying to avoid the '9am' rush
// Modules extend a generic queueable module, and add themselves to a global
// queue, which manages running them synchronously, as soon as it can (on the next tick).
// Running order is based on 'high', 'medium' and 'low' priorities, which modules
// can assign themselves.
// The queue also measures how long modules take to run, and if a module exceeds 10ms
// the queue sends a warning (probably to sentry IRL).
// The log() calls work best with chrome devtools, rather than the repl one
// QUEUE TO HANDLE REGISTRATION AND RUNNING OF MODULES
@sndrs
sndrs / jade.md
Last active December 18, 2015 07:49
Edited to reflect the comments on the original.

Using Yeoman and Jade

Getting started

  • Make sure you have yo installed: npm install -g yo
  • Run: yo webapp
  • Install grunt-contrib-jade: npm install grunt-contrib-jade --save-dev

Customization

@sndrs
sndrs / FB.api feed post with existing page for a location
Last active January 3, 2016 06:29
// Will produce 'x is at y' posts
FB.api('/me/feed', 'post', {
access_token: "",
place: "page_id"
}, cb);
// Will create 'x shared a link - at y'
FB.api('/me/feed', 'post', {
access_token: "",
place: "page_id",
@sndrs
sndrs / guardian-atomic.css
Last active April 29, 2016 16:51
All CSS in use on theguardian.com, as atomic classes
.26HKGE { -moz-box-sizing: content-box; }
.1K1vKh { -moz-osx-font-smoothing: grayscale; }
.1qXBy7 { -moz-transform: scale( 0.99999 ); }
.Z11Czbh { -ms-text-size-adjust: 100%; }
.2z9ye { -webkit-appearance: button; }
.25whma { -webkit-appearance: none; }
.Vf0dE { -webkit-appearance: textfield; }
.Z11mPm0 { -webkit-box-orient: vertical; }
.Z23SxXi { -webkit-box-sizing: content-box; }
.c6tBr { -webkit-font-feature-settings: 'kern' 1; }
@sndrs
sndrs / css_support.js
Created January 10, 2017 15:19
Generate scoping classes CSS properties and value support
function shimCssSupports() {
var cssToDOMregEx = /([a-z])-([a-z])/g;
function cssToDOMreplacer (str, m1, m2) {
return m1 + m2.toUpperCase();
}
function cssToDOM(name) {
return name.replace(cssToDOMregEx, cssToDOMreplacer).replace(/^-/, '');
}
@sndrs
sndrs / guardian-browser-stats.txt
Last active March 7, 2017 17:34
Guardan browser stats, for the past 7 days
This has moved:
https://github.com/guardian/frontend/wiki/Browsers-on-theguardian.com
@sndrs
sndrs / get.js
Last active May 3, 2017 13:43
tiny version of lodash.get https://lodash.com/docs#get
const get = (obj = {}, path = '', defaultValue) =>
path
.replace(/\[(.+?)\]/g, '.$1')
.split('.')
.reduce((o, key) => o[key], obj) || defaultValue;
// PERFORMANCE
// It's slower than lodash (surprise surprise), but it's about 97% smaller:
// https://jsperf.com/get-object-props/4