Michael Swanson mswanson

Setting up Mac OSX Lion for Web Development

These are the steps I take to set up a new install of OSX Mountain Lion for web development.

1. Tweak some OS X "hacker defaults"

Run my fork of Mathias Bynens' legendary script:

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T	go to file
⌘⌃P	go to project
⌘R	go to methods
⌃G	go to line
⌘KB	toggle side bar
⌘⇧P	command prompt

jQuery Caret

This is a very simple lightweight plugin to allow you to move the caret (or cursor) position in an <input /> or <textarea> element.

By exposing three jQuery.fn methods you can easily move a a caret to any position you like:

$.fn.caretTo( index , [ offset ] )

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

	{
	"name": "yevgenko/wordpress-site",
	"description": "Some WP powered site",
	"repositories": {
	"wordpress": {
	"type": "package",
	"package": [
	{
	"name": "plugins/db-toolkit",
	"type": "wordpress-plugin",

	define([
	"use!underscore",
	"use!handlebars",
	"moment"
	],

	function(
	_, Handlebars, Moment
	) {

	/*

	You can now create a spinner using any of the variants below:

	$("#el").spin(); // Produces default Spinner using the text color of #el.
	$("#el").spin("small"); // Produces a 'small' Spinner using the text color of #el.
	$("#el").spin("large", "white"); // Produces a 'large' Spinner in white (or any valid CSS color).
	$("#el").spin({ ... }); // Produces a Spinner using your custom settings.

	$("#el").spin(false); // Kills the spinner.