Dave Pisek davepies

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

Installation

Install fish via Brew
Optionally install Oh My Fish!
Add fish to known shells
Set default shell to fish

brew install fish  
curl -L https://get.oh-my.fish | fish

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).

	#replace xoxp-*****000 with your token from here https://api.slack.com/web#authentication

	# for the start
	do shell script "curl 'https://slack.com/api/dnd.setSnooze?token=xoxp-*****000&num_minutes=$duration'"

	# for the end and interuption
	do shell script "curl https://slack.com/api/dnd.endSnooze?token=xoxp-*****000"

	{
	"name": "my-app",
	"version": "1.0.0",
	"description": "My test app",
	"main": "src/js/index.js",
	"scripts": {
	"jshint:dist": "jshint src/js/*.js",
	"jshint": "npm run jshint:dist",
	"jscs": "jscs src/*.js",
	"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",

	/**
	* Module Dependencies
	*/

	var debug = require('debug')('lapwing:build');
	var relative = require('path').relative;
	var resolve = require('path').resolve;
	var extname = require('path').extname;
	var uglify = require('gulp-uglify');
	var Batch = require('better-batch');

	# Template composition with inclusion
	Every template language I have seen provides some mechanism for one template to include another, thus supporting the reuse of repeated elements like headers and footers. The included templates are called partials in Mustache parlance:

	```html
	<!-- home.hbs -->
	<html>
	<body>
	{{> header}}
	<p> HOME </p>
	{{> footer}}