Skip to content

Instantly share code, notes, and snippets.

View TrevorJTClarke's full-sized avatar
🙈

Trevor Clarke TrevorJTClarke

🙈
85 followers · 38 following
View GitHub Profile
@TrevorJTClarke
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
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
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
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
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
TrevorJTClarke / Webkit Scrollbar
Created October 5, 2015 21:38
Styling the scrollbar is a bad idea, unless you have a really good use case. 👽
// ::-webkit-scrollbar{
// width:10px;
// height:10px;
// }
// ::-webkit-scrollbar-thumb{
// background:0 0;
// background-color:rgba(50,50,50,.25);
// border:2px solid transparent;
// border-radius:10px;
// background-clip:padding-box;
@TrevorJTClarke
TrevorJTClarke / basicServiceWorker.js
Created November 11, 2015 23:14 — forked from adactio/basicServiceWorker.js
A basic Service Worker, for use on, say, a blog.
'use strict';
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
(function() {
// Update 'version' if you need to refresh the cache
var staticCacheName = 'static';
var version = 'v1::';
@TrevorJTClarke
TrevorJTClarke / GoJYOo.markdown
Created December 10, 2015 22:44
GoJYOo
@TrevorJTClarke
TrevorJTClarke / css selection
Created December 11, 2015 22:41
quick ::selection styling
::-moz-selection { background: yellow; }
::selection { background: yellow; }
@TrevorJTClarke
TrevorJTClarke / sitespeed.io to cvs
Created January 21, 2016 22:21
Extract your sitespeed.io results into importable cvs
var all = $('a[data-html="true"]');
var done = [];
$.each(all, function(idx, item){
var fin = $(item).parent().parent()[0].innerText.split('\n');
var first = fin[0] + ';';
var second = fin[1].split(' (')[0] + ';';
var third = fin[1].split(' (')[1].replace(')', '') + '\n';
var i = first + second + third;
done.push(i);
});