TrevorJTClarke
/ Webkit Scrollbar
Created
October 5, 2015 21:38
Styling the scrollbar is a bad idea, unless you have a really good use case. 👽
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ::-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
/ 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| input[type=range]{ | |
| -webkit-appearance: none; | |
| border: none; | |
| &::-webkit-slider-runnable-track { | |
| width: 250px; | |
| height: 2px; | |
| background: #CCC; | |
| border: none; | |
| border-radius: 1px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Youtube quick module | |
| * | |
| * USE: | |
| * var _yt = new youtube().init({ | |
| * element: "player", | |
| * height: 350, | |
| * width: 640, | |
| * videoId: 'M7lc1UVf-VE' | |
| * }); |