gokulkrishh

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

gokulkrishh

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

1. Launch quicktime player
2. do Screen recording

gokulkrishh

{
	"cssconf": {
		"location": {
			"date": "September 12, 2014",
			"country": "Germany",
			"city": "Berlin",
			"venue": "Radialsystem V",
			"lat": 52.51039,
			"long": 13.42864
		},

gokulkrishh

{
	"color_scheme": "Packages/Theme - Flatland/Flatland Monokai.tmTheme",
	"disable_formatted_linebreak": true,
	"folder_exclude_patterns":
	[
		".svn",
		".git",
		".hg",
		"CVS",
		"node_modules",