Terry Cai icai

CSS Layout Debugger

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

MacOS

Build 3059

MD5: 59bab8f71f8c096cd3f72cd73851515d

Rename it to: Sublime Text

Make it executable with: chmod u+x Sublime\ Text

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

	var production = process.env.APP_ENV === "test";
	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var sass = require('gulp-sass');
	var cssmin = require('gulp-minify-css');
	var prefix = require('gulp-autoprefixer');
	var newer = require('gulp-newer');
	var print = require('gulp-print');
	var notify = require('gulp-notify');
	var batch = require('gulp-batch');

	/* *******************************************************************************************
	* THE UPDATED VERSION IS AVAILABLE AT
	* https://github.com/LeCoupa/awesome-cheatsheets
	* ******************************************************************************************* */


	// 0. Synopsis.
	// http://nodejs.org/api/synopsis.html

	require 'nokogiri'
	require 'open-uri'

	# Get a Nokogiri::HTML:Document for the page we're interested in...

	doc = Nokogiri::HTML(open('http://www.google.com/search?q=tenderlove'))

	# Do funky things with it using Nokogiri::XML::Node methods...

	####

	require 'sprockets'

	# Get relevant paths
	project_root = File.expand_path('..', File.dirname(__FILE__))
	app_css_file = File.join(project_root, 'assets', 'stylesheets', 'application.css')
	app_js_file = File.join(project_root, 'assets', 'javascripts', 'application.js')

	# Initialize Sprockets
	environment = Sprockets::Environment.new
	environment.append_path(File.join(project_root, '_assets', 'javascripts'))

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />

	<title>
	Showing Plupload Image Previews Using Base64-Encoded Data Urls
	</title>

	<link rel="stylesheet" type="text/css" href="./assets/css/styles.css"></link>

	# by Matt Harzewski
	# Read more: http://www.webmaster-source.com/2013/09/25/finding-a-websites-favicon-with-ruby/

	require "httparty"
	require "nokogiri"
	require "base64"


	class Favicon

	/**
	* Parse query string.
	* ?a=b&c=d to {a: b, c: d}
	* @param {String} (option) queryString
	* @return {Object} query params
	*/
	getQueryParams: function(queryString) {
	var query = (queryString \|\| window.location.search).substring(1); // delete ?
	if (!query) {
	return false;