reprogramming myself

Mar 05

Checklist to install multiuser development environment in OS X Mountain Lion

This list in not exhaustive, just my bare minimum for frontend purposes. I’m not dealing with Rails, PostgreSQL, MongoDB or other server tools since it’s not my day-to-day use. Just yet. It’s surprising that you need so many console tools these days to do frontend, but things fall apart, and most of them really improve your performance in many ways.

Installation for one or multiple users would be the same, but there are tasks we will perform as admin user so that we can share part of the environment across multiple users, who will only need to configure personal data (Git, $PATH, Sublime or other editor, …). We are using Mountain Lion but the following should work the same in older systems, down to at least Leopard or Snow Leopard.

Developer environment installation by admin user:

• If we are going to use the complete Apple developers set up, including iOS simulators, we need to install XCode (from the Mac Store), then open it, preferences, downloads, install command line tools and the needed simulators.
• If we don’t need iOS simulators, just go to https://developer.apple.com/downloads and download, then install the Command line tools for your system. It’s around 200Kb only.
• Open a Terminal window and check if you have properly installed build tools:

which gcc

(it should return /usr/bin/gcc)

• Then we will install homebrew, a nice package manager for OS X, from the terminal:

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

• We are going to install Git now to have a control version in our projects without the need of a centralised repository:

brew install git

• Update homebrew now:

brew update

• Install rbenv to manage different versions of Ruby:

brew install rbenv

To use Homebrew’s directories rather than ~/.rbenv add to your profile:

export RBENV_ROOT=/usr/local/var/rbenv

Then

brew install ruby-build

• We are going to install Compass, a CSS framework that uses Sass stylesheets (make sure you code your Sass with ‘compass watch’ running in a terminal tab):

sudo gem install compass

• Install node, several development tools are distributed as npm these days:

brew install node

We recommend prepending the following path to your PATH environment variable to have npm-installed binaries picked up: /usr/local/share/npm/bin

• We love Grunt, a Javascript task runner. We use it to build our frontend files, minimize, JSlint and several other features:

npm install -g grunt

• PhantomJS is used to create files from Javascript in terminal, in one of our favorite tools, named Grunticon (allows us to throw SVG icons into a folder and convert them into datauri inside your CSS, with PNG fallback). No more sprites :-)

brew install phantomjs

• Install nanoc, a nice static site generator

sudo gem install nanoc

If we need the preview server of nanoc we need to install it::

sudo gem install adsf

We can use other preview servers, like Apache from our system, MAMP or even a LiveReload server.

• Install MAMP, which lets you have Apache, MySQL and PHP environment in a second.
• We are going to configure /etc/hosts file according to this tutorial: How to use vhosts in Wordpress development.
• Install Go2Shell (from the Mac Store), which opens a terminal window to the current directory in Finder. We just need to drag the app to the icons bar in Finder.
• We install Chrome now, with LiveReload, Web Developer, YSlow plugins.

Developer environment config for each non admin users:

We have most of the environment set up ready, we just need some personal configurations. These will be performed by each non-admin user of the machine:

• Open Finder and customize sidebars
• We are heading to our personal folder ~/ and create an Applications folder. We are going to use this to install our programs, since /Applications will be used by programs installed by the system or admin for all users.
• Install Dropbox (disclaimer, this is a recommendation link, both you and me will get extra space). Dropbox will let you have some Gb of your data backed up in the cloud and synchronized across your computers. It will require admin permissions to the folders in order to be installed.
• Open /Applications folder and drag the app to the icons bar in Finder.
• If you’re like me and prefer your finder to reveal hidden files, open Terminal and type:

defaults write com.apple.finder AppleShowAllFiles -bool YES

killall Finder

• Copy your public/private SSH keys from an older computer. If it’s the first time you need these (Git, for instance), just create your keys.
• To configure your Git user, we can copy ~/.gitconfig from an older computer into ~/ or:

git config --global user.name "Your name"

git config --global user.email your@email.com

• Install SublimeText2 into our personal ~/Applications. You can buy it too! Or use Textmate, vim or whatever.
• We need to create a folder for our binaries, type this in Terminal:

mkdir ~/bin

• We are enabling Sublime access from terminal, pointing to a symlink in our bin (beware, link takes to the Sublime we just installed in our ~/Applications)

ln -s ~/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl ~/bin/subl

• If we open a new terminal window or tab (cmd+t) we should be able to open Sublime by typing

subl

• Install Sublime user prefs from an old computer, or use mine if you like them https://gist.github.com/zigotica/4954546
• Install the package with color and typography settings (I keep a copy in Dropbox), usually found in

“~/Library/Application Support/Sublime Text 2/Packages/Color Scheme - Default”

• Install Package Control from View > Show console, following these instructions
• We can now install these packages from Package control: Emmet (previously known as Zen code), SuperCalculator (nice for px/em conversions), GitGutter (awesome, to see changes in gutter from last Git commit)
• Install your .bash_profile from an old computer into ~/ or https://gist.github.com/zigotica/4523081
• Now you check if your .bash_profile includes PATH to our bin, grunt, and other tools:

export PATH=~/bin:/usr/local/share/npm/bin:/usr/local/share/npm/lib/node_modules/grunt/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin

• Alternatively, much better approach is separate each path into a specific var (thanx @happywebcoder for the tip):

export MY_BIN_PATH="~/bin"

export PATH="$MY_BIN_PATH:$PATH"

export NPM_BIN_PATH="/usr/local/share/npm/bin"

export PATH="$NPM_BIN_PATH:$PATH"

export GRUNT_BIN_PATH="/usr/local/share/npm/lib/node_modules/grunt/bin"

export PATH="$GRUB_BIN_PATH:$PATH"

• Open Chrome and authenticate with your login/password in order to start sync’ing our favorites, plugins, and so on.
• If we are going to develop responsive sites (or sites adapted to be viewed in mobile gadgets) you will want to install Adobe Edge Inspect which lets you synchronize what you see in your browser to your mobile device, instantly, and even inspect your device for a debug session.

Other programs you may like:

I don’t work nor get anything from the following, I just think they are awesome apps:

• We love TotalFinder, your Finder with Tabs! Buy it, it’s worth it.
• CloudApp is an awesome service that stores screen captures and other files in the cloud.
• Buy and install Transmit FTP, but don’t forget to use Git locally :-)
• Buy and install Divvy a cool app that lets you manage your windows size very easily with shortcuts.

Feb 03

iOS phone number styling

iOS has an automatic feature to detect phone numbers and link them to a phone call by clicking on them.

The problem with this is twofold:

1. Many false positives 
2. Style for these numbers is really ugly (ugly as in default link style).

OPTION 1

If you want to avoid this feature you can add the following meta in your pages:

<meta name = "format-detection" content = "telephone=no">

which will avoid the phone to make calls to ALL phone numbers in your page. To reactivate this key functionality in some of the numbers, you need to add a link around each telephone number in your page, manually, using tel: as the beginning of the href, as in:

<a hef="tel:1234567890">1234567890</a>

Then we just need to style the special links:

a[href^="tel:"] {color: inherit !important; background-color: inherit !important;}

OPTION 2

Since in some projects you will not be able to wrap numbers manually and you still want to style what iOS uses as phone numbers, you can do it the other way around. Let’s leave the OS add the special link for us (will not add the special meta that avoids this feature) and style how it looks. First you need to know how iOS links the numbers to the phone. Before:

1234567890

After:

<a hef="tel:1234567890" x-apple-data-detectors="true" x-apple-data-detectors-result="1">
1234567890</a>

As you can see iOS wraps the number into a link with special attributes. Now you can just style them using attribute selector:

a[x-apple-data-detectors=true] {color: inherit !important; background-color: inherit !important;}

Jan 03

Add custom poster frame to youtube video without the API.

The trick is adding the iframe in a comment. Javascript reads comment contents and saves iframe definition to a var. When user clicks on the image, javascript overwrites container innerHTML using the iframe defined in the comments.

https://gist.github.com/4438876

This code is also valid in browsers not supporting window.postMessage (API uses postMessage).