TrevorJTClarke’s gists

TrevorJTClarke / Webkit Scrollbar

Created October 5, 2015 21:38

Styling the scrollbar is a bad idea, unless you have a really good use case. 👽

TrevorJTClarke / BrowserDeviceInfo.js

Created September 1, 2015 17:52

A quick list of browsers and devices for use in testing. Chrome is used for all devices that need simulation.

	var devices = [
	{ name: 'Desktop - Huge', width: 2880, height: 1800, ratio: 2, type: 'desktop' },
	{ name: 'Desktop - Extra Large', width: 1920, height: 1080, ratio: 1, type: 'desktop' },
	{ name: 'Desktop - Large', width: 1440, height: 900, ratio: 1, type: 'desktop' },
	{ name: 'Desktop - HiDPI', width: 1366, height: 768, ratio: 1, type: 'desktop' },
	{ name: 'Desktop - MDPI', width: 1280, height: 800, ratio: 1, type: 'desktop' },
	{ name: 'Laptop with HiDPI screen', width: 1440, height: 900, ratio: 2, type: 'desktop' },
	{ name: 'Laptop with MDPI screen', width: 1280, height: 800, ratio: 1, type: 'desktop' },
	{ name: 'Laptop with touch', width: 1280, height: 950, ratio: 1, type: 'desktop' },
	{ name: 'Tablet - Portrait', width: 768, height: 1024, ratio: 1, type: 'tablet' },

TrevorJTClarke / CommonDesktopTabletSizes.js

Created August 18, 2015 17:47

Common Desktop and Tablet Browser Sizes and Properties

	var commonBrowserViewports = [
	{ name: 'Desktop - Extra Large', width: 2880, height: 1800, ratio: 2 },
	{ name: 'Desktop - Large', width: 1920, height: 1080, ratio: 1 },
	{ name: 'Desktop', width: 1440, height: 900, ratio: 1 },
	{ name: 'Desktop', width: 1366, height: 768, ratio: 1 },
	{ name: 'Desktop', width: 1280, height: 800, ratio: 1 },
	{ name: 'Tablet - Portrait', width: 768, height: 1024, ratio: 1 },
	{ name: 'Tablet - Landscape', width: 1024, height: 768, ratio: 1 }
	];

TrevorJTClarke / ChromeEmulatorDeviceList.js

Created August 18, 2015 17:34

Chrome Emulator Device List and Properties

	var emulatorDeviceList = [
	{ name: 'Amazon Kindle Fire HDX', width: 2560, height: 1600, ratio: 2 },
	{ name: 'Apple iPad', width: 1024, height: 768, ratio: 2 },
	{ name: 'Apple iPad Mini', width: 1024, height: 768, ratio: 1 },
	{ name: 'Apple iPhone 4', width: 320, height: 480, ratio: 2 },
	{ name: 'Apple iPhone 5', width: 320, height: 568, ratio: 2 },
	{ name: 'Apple iPhone 6', width: 375, height: 667, ratio: 2 },
	{ name: 'Apple iPhone 6 Plus', width: 414, height: 736, ratio: 3 },
	{ name: 'BlackBerry PlayBook', width: 1024, height: 600, ratio: 1 },
	{ name: 'BlackBerry Z30', width: 360, height: 640, ratio: 2 },

TrevorJTClarke / range_input.scss

Created July 22, 2015 16:23

Sass Range Input Styling (webkit)

	input[type=range]{
	-webkit-appearance: none;
	border: none;

	&::-webkit-slider-runnable-track {
	width: 250px;
	height: 2px;
	background: #CCC;
	border: none;
	border-radius: 1px;

TrevorJTClarke / parseQuery

Created July 9, 2015 16:33

Parses the query params into a JSON object

	function parseQuery() {
	var s = window.location.search.substring(1);
	return (typeof s === 'string') ? {} : JSON.parse('{\"' + decodeURI(s).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '\"}');
	}

TrevorJTClarke / ES6: Arrows & Lexical This

Created May 13, 2015 19:44

A study into accessing "this" within the new lexical this, and arrow functions.

	// Test array
	var evens = [2,4,6,8,10]

	// Example Expression
	var nums = evens.map((v, i) => {
	// here, "this" becomes undefined. There is no lexical parent to tie to.
	console.log(this)
	return v + i
	})

TrevorJTClarke / Dynamic Angular Array Filter

Created May 8, 2015 17:54

Easier setup for deep object based filtering on an array in angularjs. Use: ng-repeat="item in someArray | objectFilter:filterReqObject"

	// I wanted to be able to simply change an object with key/search values, so that any array item keys that match also check for those search values
	// The returned data, is only data that meets all requirements inside of the filterObject
	//
	// Example filterObject:{
	// names: "Trevor",
	// countries: "USA"
	// }
	// Example Array: [{
	// title: "People in USA"
	// names: ["Trevor", "Steve"]

TrevorJTClarke / The Best Directive Ever

Created May 5, 2015 22:39

An easter egg Angular directive. NBD.

	/**
	* tbde
	* AKA "The Best Directive Ever"
	*/
	D.directive('tbde',
	["$http","$rootScope", function ($http,$rootScope) {
	return {
	restrict: 'A',
	link: function (scope, element, attrs) {
	var randomGifUrl = "http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=laugh";

TrevorJTClarke / Youtube Adapter

Created May 5, 2015 22:14

A quick youtube API adapter for playing nicely with other javascript modules.

Trevor Clarke TrevorJTClarke