Pasquale D'Silva psql

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.

Run my fork of Mathias Bynens' legendary script:

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

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

Convert and transcode:

ffmpeg -i in.mkv out.mp4

Covert without transcoding:

	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
	<plist version="1.0">
	<dict>
	<key>SKVariables</key>
	<array>
	<dict>
	<key>enabled</key>
	<true/>
	<key>name</key>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Responsive Boilerplate</title>
	<style type="text/css">
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:0}article,aside,details,figcaption,figure,footer,

	http://yysource.com/2011/03/debugging-with-css-outline-all-elements/

	* { outline: 2px dotted red }
	* * { outline: 2px dotted green }
	* * * { outline: 2px dotted orange }
	* * * * { outline: 2px dotted blue }
	* * * * * { outline: 1px solid red }
	* * * * * * { outline: 1px solid green }
	* * * * * * * { outline: 1px solid orange }
	* * * * * * * * { outline: 1px solid blue }

	on open theFiles
	repeat with aFile in theFiles
	if application "Adobe Photoshop CC" is running then
	tell application "Adobe Photoshop CC"
	open aFile
	activate
	end tell
	else
	tell application "Preview" to open aFile
	end if

	/*
	----------------------
	MirrorMe 1.1.2 (by Ced)
	----------------------
	[email protected]
	http://grain.s.free.fr
	----------------------

	thanks to ## Haider Alghifary ## for feddback and improvements ideas...:)