Joey Hoer joeyhoer

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

I wanted to figure out the fastest way to load non-critical CSS so that the impact on initial page drawing is minimal.

TL;DR: Here's the solution I ended up with: https://github.com/filamentgroup/loadCSS/

For async JavaScript file requests, we have the async attribute to make this easy, but CSS file requests have no similar standard mechanism (at least, none that will still apply the CSS after loading - here are some async CSS loading conditions that do apply when CSS is inapplicable to media: https://gist.github.com/igrigorik/2935269#file-notes-md ).

Seems there are a couple ways to load and apply a CSS file in a non-blocking manner:

Nginx FastCGI response buffer sizes

By default when Nginx starts receiving a response from a FastCGI backend (such as PHP-FPM) it will buffer the response in memory before delivering it to the client. Any response larger than the set buffer size is saved to a temporary file on disk.

This process is outlined at the Nginx ngx_http_fastcgi_module page manual page.

Introduction
Determine actual FastCGI response sizes
Setting the buffer size
Verifying results

OBSOLETE

This entire guide is based on an old version of Homebrew/Node and no longer applies. It was only ever intended to fix a specific error message which has since been fixed. I've kept it here for historical purposes, but it should no longer be used. Homebrew maintainers have fixed things and the options mentioned don't exist and won't work.

I still believe it is better to manually install npm separately since having a generic package manager maintain another package manager is a bad idea, but the instructions below don't explain how to do that.

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

A Change in Plans For Sass 3.3

Sass 3.3 is coming soon, and along with it several major new features. It supports source maps, SassScript maps, and the use of & in SassScript. In preparation for its release, we've put out a couple of release candidates to be sure that everything was set and ready to go. Unfortunately, it wasn't.

Release candidates often turn up small bugs and inconsistencies in new features, but it's rare that they find anything truly damning. In this case, though, several users noticed an issue with using & in SassScript that rendered a sizable chunk of our plan for that section of 3.3 unworkable. It's not a fatal issue, and we think we have a good plan for dealing with it (I'll get to that in a bit), but it is a problem.

The Background

To understand what's wrong, first you need to understand the reason we decided to make & accessible to SassScript in the first place. One thing users want to do pretty often is to add suffixes to classes. Sometimes this takes the place of nest

	#### Jekyll Layout: /_layouts/.htaccess

	# Apache Configuration File

	{% if ((page.auth_dir.users != empty) or (page.auth_dir.groups != empty)) %}
	AuthName "Privater Bereich"
	AuthType Basic
	# => mehrere Require Blocks werden geodert: http://d43.me/blog/1157
	AuthzUserAuthoritative Off
	AuthUserFile {{ page.auth_remote_user_file }}

	.random-color {
	border-top-color: "LightCoral";
	border-right-color: #a44b58;
	border-bottom-color: rgb(108, 188, 134);
	border-left-color: rgb(24%, 88%, 5%);
	outline-top-color: hsl(88, 69%, 69%);
	outline-right-color: rgba(220, 71, 132, 0.69);
	outline-bottom-color: rgba(79%, 47%, 14%, 0.37);
	outline-left-color: hsla(111, 31%, 38%, 0.86);
	}

	# Title: Simple Image tag for Jekyll
	# Authors: Brandon Mathis http://brandonmathis.com
	# Felix Schäfer, Frederic Hemberger
	# Description: Easily output images with optional class names, width, height, title and alt attributes
	#
	# Syntax {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text \| "title text" ["alt text"]] %}
	#
	# Examples:
	# {% img /images/ninja.png Ninja Attack! %}
	# {% img left half http://site.com/images/ninja.png Ninja Attack! %}

	ZIP,LAT,LNG
	00601,18.180555, -66.749961
	00602,18.361945, -67.175597
	00603,18.455183, -67.119887
	00606,18.158345, -66.932911
	00610,18.295366, -67.125135
	00612,18.402253, -66.711397
	00616,18.420412, -66.671979
	00617,18.445147, -66.559696

	# Rails Stuff
	alias stoprails='kill -9 $(lsof -i :3000 -t)'
	alias startrails='rails server -d'
	alias restartrails='stopRails && startRails'

	#Check PHP For Erroes
	alias phpcheck='find ./ -name \*.php \| xargs -n 1 php -l'

	# ROT13-encode text. Works for decoding, too! ;)
	alias rot13='tr a-zA-Z n-za-mN-ZA-M'