Frontend Tooling – (Why you should use Sublime Text 2) – Sublime Text 2



Frontend Tooling – (Why you should use Sublime Text 2) – Sublime Text 2

0 0


tooling

Slides for an @igloodigital frontend tooling tech talk

On Github victornguyen / tooling

Frontend Tooling

(Why you should use Sublime Text 2)

by me, @victornguyen

Why is tooling important?

  • It makes us faster
  • It makes us less error-prone
  • It makes our job more fun

What we'll cover

Sublime Text 2 LiveReload Adobe Shadow PhantomJS Alfred Dropbox

Sublime Text 2

The spiritual successor to TextMate.

Why it's awesome

  • It's really fast
  • Highly extendable & customisable
  • Great Plugin API
  • Vibrant community
  • Cross platform
  • Split Views

Goto Anything

  • Files
  • Symbols
  • Lines
  • Commands

Multiple Selections

  • Select similar
  • Multiple cursors
  • Column selection

Package Control

  • Discover, install, upgrade, remove packages
  • Auto-updates packages
  • Easily enable/disable packages

Some Packages

LiveReload

What does it do?

Monitors changes to files and automatically refreshes/updates the browser

  • CSS changes are applied live, sans refresh
  • Supports preprocessers (CoffeeScript, LESS, SASS...)
  • Can use as filesystem watcher to run commands
  • Works on iOS devices

Adobe Shadow

What does it do?

Pairs iOS and Android devices to a computer to enable synchronised browsing.

  • Can pair multiple devices
  • Enables remote inspection via weinre
  • Makes your workflow feel like the future

PhantomJS

What is it?

PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

What can you do with it?

  • Headless JS unit testing with Jasmine, QUnit
  • Functional testing with CasperJS
  • Site scraping
  • Render graphics, take screenshots
  • Ideal for CI

Alfred

What does it do?

  • Launches applications
  • Quick calculations
  • Custom web searches
  • Run shell scripts

Global Hotkeys

Clipboard History

... is fucking awesome!

Create Project Structure

Demo

Dropbox

What do I use it for?

Syncing my dev environment across my work and home machines.

  • Sublime Text 2 config
  • Alfred settings
  • Dotfiles
  • 1Password database
  • TextExpander snippets

Other stuff I use,

but I'm not going to talk about

Thanks

Questions n shit?

Slides at victornguyen.net/tooling and on Github