Really easy way to add errors under elements with jquery validate

Somehow, the problem of adding validation via jquery.validate has always felt like enough of a barrier that I find other hacky ways around the solution. I will probably try googling it once, skim the docs once, then settle for finding out how to simply add the rules.

This solution works without breaking most form layouts, because it adds padding below the input element and places error messages below via absolute position.

Screenshot 2013-11-17 01.53.48

CoffeeScript

$("form").validate
		errorPlacement: (error, element) ->
			$wrapped = element.wrap('<div class="error-wrapper" />').parent()
			error.appendTo($wrapped)

SASS

.error-wrapper {
	position: relative;
	@include inline-block;
	padding-bottom: 15px;
	label.error {
		position: absolute;
		bottom: -5px;
		left: 15px;
		font-size: 13px;
		text-transform: uppercase;
	}
}

CSS3 Opacity Transition Jitter

Fix the CSS3 opacity transition text jitter by adding backface-visibility: hidden;

You must use the vendor prefixes to make it work.

If using compass CSS3 mixins, just use

@include backface-visibility(hidden);

Git – prevent changes to file from being committed

I have a local file I need to be changed (an envvar for local environment detection) and don’t want it committed. Sure this is done elsewhere via say a local, silent import of a file outside of your repository.

In this case, it had to be in the the tracked file.

You can set certain things to be assumed as unchanged:

git update-index --assume-unchanged

Amazing.

Extend border through padding

Whenever I need borders that extend through padding, I’ve typically had to use some non semantic "inner padding" classes.

Turns out you can just set absolute position and left: 0, right: 0 and top: auto.

CSS3 animation twitch bug on opacity fade

To fix the twitching that happens during CSS3 animations such as fade, oddly enough, just set the backface-visiblity property to hidden.

Works like a champ.

SCSS

.my-hover {
@include single-transition(opacity, .3s, linear, 0s);
@include backface-visiblity(hidden);

&amp;:hover {
opacity: .9;
}
}

How to post code into wordpress post by email feature

I just had to do some manual experimentation to do this.So far the only way is to use [ sourcecode ] (without spaces).

You can’t specify a language since those get escaped automagically.

If anyone has better ideas for a wordpress hosted site (not self hosted), please let me know!

class ExampleSource():
pass

nginx: [emerg] invalid number of arguments in “return” directive

I was using a 4 year old installation of nginx (0.7) – apt-get update, apt-get install nginx claimed I had the latest version…

Turns out this error means the return directive isn’t supported in the `return 301 foo.com` format until a later nginx.

Install the latest nginx by following the docs at http://wiki.nginx.org/Install

sudo -s
nginx=stable # use nginx=development for latest development version
add-apt-repository ppa:nginx/$nginx
apt-get update 
apt-get install nginx