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
#stars-wrapper | |
- 200.times do | |
.star |
var gulp = require('gulp'), | |
gutil = require('gulp-util'), | |
sass = require('gulp-sass'), | |
csso = require('gulp-csso'), | |
uglify = require('gulp-uglify'), | |
jade = require('gulp-jade'), | |
concat = require('gulp-concat'), | |
livereload = require('gulp-livereload'), // Livereload plugin needed: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei | |
tinylr = require('tiny-lr'), | |
express = require('express'), |
var gulp = require('gulp'), | |
gutil = require('gulp-util'), | |
sass = require('gulp-sass'), | |
csso = require('gulp-csso'), | |
uglify = require('gulp-uglify'), | |
jade = require('gulp-jade'), | |
concat = require('gulp-concat'), | |
livereload = require('gulp-livereload'), | |
tinylr = require('tiny-lr'), | |
express = require('express'), |
<?php | |
header('Content-type: text/plain'); | |
$username = "[user]"; | |
$password = "[password]"; | |
$hostname = "localhost"; | |
$database = "[database]"; | |
// Opens a connection to a mySQL server | |
$connection=mysql_connect ($hostname, $username, $password); |
var gulp = require('gulp'), | |
gutil = require('gulp-util'), | |
sass = require('gulp-sass'), | |
csso = require('gulp-csso'), | |
uglify = require('gulp-uglify'), | |
jade = require('gulp-jade'), | |
concat = require('gulp-concat'), | |
livereload = require('gulp-livereload'), | |
premailer = require('gulp-premailer'), | |
tinylr = require('tiny-lr'), |
/** | |
* Module dependencies. | |
*/ | |
var express = require('express') | |
, routes = require('./routes') | |
, user = require('./routes/user') | |
, http = require('http') | |
, path = require('path') |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<h2>Original CSS</h2> | |
<style style="display: block; white-space: pre; font-family: monospace"> | |
h2 { margin:0; } |
(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(": "); |
// ----------------------------------------------------------------------- | |
// 100% Mixin | |
// ----------------------------------------------------------------------- | |
@mixin cover-all { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; |