A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$ if your browser aliases it:
~ 108 byte version
Mikhail Larchanka larchanka
👋
larchanka
/ README.md
Created
September 26, 2016 18:25
— forked from addyosmani/README.md
108 byte CSS Layout Debugger
This file contains 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 getQueryParam = function getQueryParam (param) { | |
| var queries = window.location.search, regex, resRegex, results, response; | |
| param = encodeURIComponent(param); | |
| regex = new RegExp('[\\?&]' + param + '=([^&#]*)', 'g'); | |
| resRegex = new RegExp('(.*)=([^&#]*)'); | |
| results = queries.match(regex); | |
| if (!results) { | |
| return ''; | |
| } |
larchanka
/ browserTransform.js
Last active
December 27, 2015 11:19
Function `browserTransform` detects css-transforms' support in browser and returns css-property, else it returns false.
This file contains 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 () { | |
| this.browserTransform = function () { | |
| if ('OTransform' in document.body.style) | |
| return '-o-transform'; | |
| else if ('webkitTransform' in document.body.style) | |
| return '-webkit-transform'; | |
| else if ('mozTransform' in document.body.style) |
larchanka
/ change-favicon.js
Created
September 28, 2015 11:34
— forked from mathiasbynens/change-favicon.js
Dynamically changing favicons with JavaScript
This file contains 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
| /*! | |
| * Dynamically changing favicons with JavaScript | |
| * Works in all A-grade browsers except Safari and Internet Explorer | |
| * Demo: http://mathiasbynens.be/demo/dynamic-favicons | |
| */ | |
| // HTML5™, baby! http://mathiasbynens.be/notes/document-head | |
| document.head || (document.head = document.getElementsByTagName('head')[0]); | |
| function changeFavicon(src) { |
larchanka
/ generate-classes.js
Last active
August 31, 2015 09:10
Function generateClasses generates classes string from a passed object
This file contains 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
| /* generateClasses generates classes string from a passed object, i.e. | |
| generateClasses({ | |
| 'class1': true, | |
| 'class2': false, | |
| 'class3': true | |
| }); | |
| // will return string 'class1 class3' | |
| */ | |
| (function() { |
larchanka
/ object-watch.js
Last active
August 29, 2015 14:24
— forked from eligrey/object-watch.js
This file contains 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
| /* | |
| * object.watch polyfill | |
| * | |
| * 2012-04-03 | |
| * | |
| * By Eli Grey, http://eligrey.com | |
| * Public Domain. | |
| * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. | |
| */ |
larchanka
/ HTML-Airplay-Medium-Liberty.html
Last active
August 29, 2015 14:23
This file contains 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
| <!-- HTML code --> | |
| <video id="player" x-webkit-airplay="allow" class="player"> | |
| <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> | |
| <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> | |
| <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> | |
| <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"> | |
| </video> | |
| <div id="play-controls"> | |
| <button type="button" id="mute"><i class="fa fa-volume-up fa-lg"></i></button> |
larchanka
/ gist:3a3c0d5c07fd47a7daf4
Last active
August 29, 2015 14:19
— forked from paulirish/gist:2926904
This file contains 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
| { | |
| "// my options for SublimeLinter " : "//", | |
| "jshint_options" : { | |
| "boss": true, | |
| "browser": true, | |
| "curly": false, | |
| "devel": true, | |
| "eqeqeq": false, | |
| "eqnull": true, |
larchanka
/ frontendDevlopmentBookmarks.md
Last active
August 29, 2015 14:09
— forked from dypsilon/frontendDevlopmentBookmarks.md
Attention: the list was moved to
https://github.com/dypsilon/frontend-dev-bookmarks
This page is not maintained anymore, please update your bookmarks.
This file contains 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 YAR = function(nseed) { | |
| var seed, constant = Math.pow(2, 13) + 1, | |
| prime = 37, | |
| maximum = Math.pow(2, 50); | |
| if (nseed) { | |
| seed = nseed; | |
| } | |
| if (seed == null) { | |
| seed = (new Date()).getTime(); | |
| } |