Things I learned sometimes the hard way about email templates

Keep in mind that realistically the only place anyone is ever going to see a responsive version of your email is in an iPhone.

  • All layout in tables no matter how many nested levels it becomes.
  • Add <tbody> because some browsers add it themselves and you want to account for it.
  • The only tags you should ever bother using are <table>,<tbody> / <thead>,<tr>,<td>,<span>,<div>,<img>
    • ya no p tag.
    • div only for stacking content vertically and accounting for presentation on the few clients that support embedded css and media queries.
  • Include alt and width and height on images.
export LANGUAGE="en_US.UTF-8"
export LANG="en_US.UTF-8"
export LC_ALL="en_US.UTF-8"
sudo apt-get -qq update
sudo tasksel install postgresql-server
sudo apt-get install -y build-essential libssl-dev libyaml-dev git libtool libxslt-dev libxml2-dev libpq-dev gawk curl pngcrush imagemagick python-software-properties nodejs
sudo apt-add-repository -y ppa:rwky/redis
sudo apt-get update
sudo apt-get install -y redis-server
curl -sSL | bash -s stable --ruby=2.1.2
View .zshrc
# Path to your oh-my-zsh installation.
export ZSH=$HOME/.oh-my-zsh
# Set name of the theme to load.
# Look in ~/.oh-my-zsh/themes/
# Optionally, if you set this to "random", it'll load a random theme each
# time that oh-my-zsh is loaded.
# Example aliases
View sublime-config-commands.json
{ "keys": ["shift+enter"], "command": "run_macro_file", "args": {"file": "Packages/Default/Add Line.sublime-macro"} },
{ "keys": ["alt+up"], "command": "swap_line_up" },
{ "keys": ["alt+down"], "command": "swap_line_down" },
{ "keys": ["ctrl+shift+j"], "command": "join_lines" },
{ "keys": ["super+alt+down"], "command": "duplicate_line" },
{ "keys": ["super+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} },
{ "keys": ["super+shift+s"], "command": "save_all" }
View sprite-mixin.scss
@mixin sprite($x,$y,$width,$height,$background-color:transparent,$display:block,$sprite-sheet:'/images/my-sprite-sheet.png') {
display: $display;
background: url($sprite-sheet) no-repeat -1*$x -1*$y $background-color;
@include size($width $height);
# simple usage example
@include sprite(220,50,100,32);
View .server_functions
function serve {
ruby -r webrick -e "s = => $port, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
function assets {
sass -w stylesheets:stylesheets/bin & \
coffee -o javascripts/bin -cw javascripts \
&& pg
function server_assets {
loadImages: (sources, _callback) =>
requests = []
requests.push($.get(source)) for source in sources
$.when.apply($, requests).done _callback
loadImagesProgress: (sources, _progress, _callback) =>
requests = []
requests.push($.get(source,_progress)) for source in sources
$.when.apply($, requests).done _callback
View evacuation.rb
class Evacuation < ActiveRecord::Base
def self.notify_person_found
connection.execute "NOTIFY evac, #{connection.quote 'found person'}"
def self.on_person_found