Automate All the Front-End Things!

This talk was presented at Scotch on the Rocks on the 5th of June, 2014. This page can be referenced at http://ki.tt/sotr. Community note taking was offered at http://ki.tt/sotr14notes. Example and demo files are at http://ki.tt/sotr.zip.

You can download these slides at http://ki.tt/automate-sotr14.pdf. They are also available at https://speakerdeck.com/kitt/automate-all-the-front-end-things.

Notes follow the slide deck.

Prerequisites

Installing Node

Go to http://nodejs.org/
Click the green INSTALL button
Follow directions

Install Ruby

Ruby has different flavors.

OSX

Homebrew
http://mxcl.github.com/homebrew/
$ brew install ruby

RVM
https://rvm.io/rvm/install
curl -sSL https://get.rvm.io | bash

If you don't want to use the command line, JewelryBox managed different ruby versions and gems for different projects.

JewelryBox https://unfiniti.com/software/mac/jewelrybox

LINUX: Depends on your flavor of Linux. Common uses:
```
Apt / Yum
$ sudo apt-get install ruby1.9.1
$ sudo yum install ruby1.9.1
```
```
RVM
https://rvm.io/rvm/install
curl -sSL https://get.rvm.io | bash
```
If you want to install ruby without rvm:
http://stackoverflow.com/questions/18490591/how-to-install-ruby-2-on-ubuntu-without-rvm ki.tt/s223.

WINDOWS:

Just use Chocolatey.

Chocolatey!
https://chocolatey.org/packages?q=ruby
C:\> cinst ruby

For the braver of heart, more common installs include:

Ruby Installer
http://rubyinstaller.org/downloads/

Other options:

Pik
https://github.com/vertiginous/pik

Cygwin
http://cygwin.com/

Automatically updating the browser

LiveReload

http://livereload.com/

LiveReload IE

http://github.com/dvdotsenko/livereload_ie_extension

http://reloadit.codeplex.com/

IE is the second most commonly used browser on the web http://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_table

this

Browser-sync

http://browsersync.io/

https://github.com/shakyShane/browser-sync/wiki/options

Getting started

Start a local web server - one liners http://ki.tt/3ws

This talk's demo files, if you'd like: http://ki.tt/sotr.zip

Productivity apps

OSX

Alfred 
http://alfredapp.com/

Quicksilver
http://qsapp.com/

Launchbar
http://www.obdev.at/products/launchbar/

Windows

Skylight
http://www.candylabs.com/skylight

Launchy
If you work across multiple OSs frequently, look into Launchy. Plugins are written in Python, and it runs across the three main operating systems.
http://www.launchy.net/
http://pylaunchy.sourceforge.net/docs/

FARR
This has been highly recommended to me.
https://www.donationcoder.com/Software/Mouser/findrun/

Linux

Gnome Launch Box
https://live.gnome.org/

Gnome Do
http://do.davebsd.com/

Launchy

http://www.launchy.net/

http://pylaunchy.sourceforge.net/docs/

Offline documentation

Dash
http://kapeli.com/dash
Paid application, Mac only

Zeal
http://zealdocs.org/
Open Source, free.

Alfred workflows

https://github.com/zenorocha/alfred-workflows/
https://github.com/aiyodk/Alfred-Extensions/tree/master/AlfredApp_2.x
https://github.com/willfarrell/alfred-workflows

Grunt

Grunt http://gruntjs.com/

Download init grunt config files http://ki.tt/fgrf

Central node module repository http://npmjs.org

Microsoft provided Windows VMs
http://modern.ie These expire after 6 months. Are fantastic.

Good suggestion for aliases for you to consider.

history | cut -c8-120 | cut -d" " -f1 | sort | uniq -c | sort

Find aliases to use at http://alias.sh/

Follow @climagic http://twitter.com/climagic for some serious command line magic

Bash scripting best practices http://www.kfirlavi.com/blog/2012/11/14/defensive-bash-programming/

Preprocessors

Sass
http://sass-lang.com/

Compass
http://compass-style.org/
Library that extends Sass. Has good image handling, uses CanIUse.com to determine output.

Bourbon
http://bourbon.io/
If you don't need sprite generation that Compass has, use Bourbon, does the same thing, nominally the same syntax, and is lighter.

Write your own breakpoint mixin, or use Breakpoint Sass http://breakpoint-sass.com/

GUIs for Sass/Compass compile

Codekit
https://incident57.com/codekit/

Compass App
http://compass.kkbox.com/

Koala App
http://koala-app.com/

GUI for Grunt?!?

Yep. Grunt Devtools https://github.com/vladikoff/grunt-devtools

Regression testing

phantomCSS: https://github.com/Huddle/PhantomCSS
wraith: https://github.com/BBC-News/wraith
diffux: https://github.com/diffux/diffux
dpxdt: https://github.com/bslatkin/dpxdt

Faster HTML writing

Emmet
http://docs.emmet.io/

#talks