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
// Straightforward + simple. | |
$("button").on("click", function(event) { | |
event.preventDefault(); | |
var button = $(this); | |
var numberElem = button.find(".number"); | |
var number = Number(numberElem.text()) - 1; | |
numberElem.text(number); | |
if (number === 0) { | |
button.prop("disabled", true); | |
button.off("click"); |
(function() { | |
var script, | |
scripts = document.getElementsByTagName('script')[0]; | |
function load(url) { | |
script = document.createElement('script'); | |
script.async = true; | |
script.src = url; | |
scripts.parentNode.insertBefore(script, scripts); |
(function() { | |
var CSSCriticalPath = function(w, d, opts) { | |
var opt = opts || {}; | |
var css = {}; | |
var pushCSS = function(r) { | |
if(!!css[r.selectorText] === false) css[r.selectorText] = {}; | |
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/); | |
for(var i = 0; i < styles.length; i++) { | |
if(!!styles[i] === false) continue; | |
var pair = styles[i].split(": "); |
/*! | |
* gulp | |
* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev | |
*/ | |
// Load plugins | |
var gulp = require('gulp'), | |
sass = require('gulp-ruby-sass'), | |
autoprefixer = require('gulp-autoprefixer'), | |
cssnano = require('gulp-cssnano'), |
/*! | |
* Copyright 2015 Google Inc. All rights reserved. | |
* | |
* Licensed under the Apache License, Version 2.0 (the "License"); | |
* you may not use this file except in compliance with the License. | |
* You may obtain a copy of the License at | |
* | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* | |
* Unless required by applicable law or agreed to in writing, software |