talks

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

1. Go to http://nodejs.org/
2. Click the green INSTALL button
3. 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/
Firefox, Safari, Opera, Mobile Safari

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/.
Options: 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
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/

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

There's Sass, LESS, and Stylus. I talk about Sass, as it's what I use, there's a big community behind it, it has forward momentum, and it works well with the SMACSS style of CSS organization.

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/