Ben Lilley benlilley

Mac web developer apps

This gist's comment stream is a collection of webdev apps for OS X. Feel free to add links to apps you like, just make sure you add some context to what it does — either from the creator's website or your own thoughts.

— Erik

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

	http://thesassway.com/guides
	http://leveluptuts.com/tutorials/compass-tutorials
	http://www.dontcom.com/post/26884274848/css-preprocessing
	http://compass-style.org/help/tutorials/spriting/
	http://www.youtube.com/watch?v=Tl6bceyTjFw
	http://www.bariswanschers.com/blog/use-sass-and-compass-streamline-your-css-development

	.pop {
	display: block;
	-webkit-animation-name: pop;
	-webkit-animation-duration: .6s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
	}

	@-webkit-keyframes pop {
	from {

	// variables and mixins
	@import "variables";
	@import "mixins";

	// Reset
	@import "reset";

	// Page structure, etc
	@import "scaffolding";
	@import "grid";

	// HOW TO USE
	//
	// @direction: up;
	// .class {
	// .arrow(@direction, #c00, 20px);
	// }
	//

	.arrow(up, @color, @size) {
	width: 0;

	var parser = document.createElement('a');
	parser.href = "http://example.com:3000/pathname/?search=test#hash";

	parser.protocol; // => "http:"
	parser.hostname; // => "example.com"
	parser.port; // => "3000"
	parser.pathname; // => "/pathname/"
	parser.search; // => "?search=test"
	parser.hash; // => "#hash"
	parser.host; // => "example.com:3000"

	@spritePath: '../images/sprite.png';
	.sprite(@url: @spritePath, @xpos: 0, @ypos: 0) {
	background-image: url(@url);
	background-repeat: none;
	background-position: @xpos @ypos;
	}

	<?php

	/*
	* Instructions:
	* First add your database connection details below.
	* Then either upload this script to your server and visit the page,
	* or run it using the command line: php no_more_msm.php
	*/

	// database connection details