Stuart Runyan shrunyan

OS X Screencast to animated GIF

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

Instructions

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

How to Setup a Local Development Website

Instructions from a Macbook pro running OSX 10.10

Create a Project Directory

Either checkout an existing repostiory or create a new one.

Existing:

Local SSL websites on Mac OSX

These instructions will guide you through the process of setting up local, trusted websites on your own computer.

These instructions are intended to be used on Mac OSX Yosemite.

NOTE: You may substitute the edit command for nano, vim, or whatever the editor of your choice is. Personally, I forward edit to Sublime Text:

alias edit="/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl"

	var proto = {
	test: "test"
	};

	var Factory = function (proto) {
	return Object.create(proto);
	};

	var instance = Factory(proto);

	<form action="/thank-you/" method="POST" enctype="multipart/form-data">

	<!-- These values control how Zesty understands the form. -->
	<input name="zlf" value="{{ page.title }} Form Request" type="hidden">
	<input name="zcf" value="1" type="hidden">

	<label for="first_name">First Name*</label>
	<input name="first_name" id="first_name" maxlength="50" type="text" required autofocus />

	<label for="last_name">Last Name*</label>

	<script type="text/javascript">
	// Using jQuery Library
	$('#salesforce-form').one('submit', function(e) {
	e.preventDefault();
	var $form = $(this);
	$.ajax({
	url: '{{ page.getUrl() }}',
	type: 'POST',
	data: $form.serialize(),
	success: function cb() {

	// zip-search-form.tpl
	<input id="search" />
	<ul id="results"></ul>

	// zip-search-results.tpl
	// template which generates results being returned to AJAX request
	// % is the wildcard character in Parsley
	{{each events as event WHERE event.zip_code LIKE '{get_var.term}%'}}
	<li>
	<h2>{{event.title}}</h2>

	" Make Vim more useful
	set nocompatible " be iMproved, required
	filetype off " required

	" set the runtime path to include Vundle and initialize
	set rtp+=~/.vim/bundle/Vundle.vim
	call vundle#begin()
	" alternatively, pass a path where Vundle should install plugins
	"call vundle#begin('~/some/path/here')

	var gulp = require('gulp');
	var sourcemaps = require('gulp-sourcemaps');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var browserify = require('browserify');
	var watchify = require('watchify');
	var babel = require('babelify');

	function compile(watch) {
	var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));

	<html>
	<head>
	<title>Simple Sparkline using SVG Path and d3.js</title>
	<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<style>
	/* tell the SVG path to be a thin blue line without any area fill */
	path {
	stroke: steelblue;
	stroke-width: 1;
	fill: none;