Hacking like a Hipster

Gulp, Heroku + more

Sudo Soldiers
02.27.2014

Hey there, I’m Grant.

  • CS, UW
  • Open web evangelist
  • @GrantTimmerman

Sudo Soldiers

  • https://www.facebook.com/groups/uwhackers/
  • https://github.com/SudoSoldiers/
  • http://students.washington.edu/uwsudo/
  • uwsudo@uw.edu

On the menu

  • Grunt
  • Gulp
  • Heroku

So, who's a hipster?

"Hipsters are a subculture of men and women typically in their 20's and 30's that value independent thinking, counter-culture, progressive politics, an appreciation of art and indie-rock, creativity, intelligence, and witty banter."

Who's a hipster hacker?

"A hacker who uses artisanal development tools that we used to like before they went mainstream"

We use

  • Node
  • Go
  • Scala
  • Julia
  • Haskell
  • Gulp
  • Coffeescript
  • Bower Yeoman Grunt

A True Hipster

Let's dive in!

So you've heard of build systems.

like Grunt, Make, and Gulp


But what are they?

And what can they do?

Build systems automate common tasks

  • compiling computer source code into binary code
  • packaging binary code
  • running tests
  • deployment to production systems
  • creating documentation and/or release notes

Introducting GRUNT

The Javascript TaskRunner

It automates things you do already

like...

  • coffeescript
  • handlebars
  • jade
  • Sass
  • JSHint
  • Require.js
  • And much much more

Who uses GRUNT?

  • Twitter
  • jQuery
  • Adobe
  • Modernizr
  • A TON of startups

Projects, Applications, and Companies Using GRUNT

What it looks like

Gruntfile.js


grunt.initConfig({
  uglify: {
    build: {
      src: 'js/reveal.js',
      dest: 'js/reveal.min.js'
    }
  },

  cssmin: {
    compress: {
      files: {
        'css/reveal.min.css': [ 'css/reveal.css' ]
      }
    }
  }
})

Example


zip: {
  'reveal-js-presentation.zip': [
    'index.html',
    'css/**',
    'js/**',
    'lib/**',
    'images/**',
    'plugin/**'
  ]
}
  • Every time you save, generate a zip

    It's that easy

    • Demo!

    Gulp

    The hipster GRUNT

    What's wrong with GRUNT?

    • It's really slow (up to 20 seconds per build for me)
    • It's ugly
    • It's hard to learn

    What's right with Gulp?

    • It's blazing fast
    • It uses Node streams to parallelize work
    • It's beautiful
    • It's easy to learn


    = It's hipster

    Demo!

    How do you share your awesome website to the world?

    Heroku

    Why use it?

    • Tons of tools
    • Supports most languages
    • Works perfectly with git
    • 1 line deploy
    • Very scalable


    = It's hipster

    Who uses Heroku?

    • Github
    • Facebook
    • Code For America
    • Mail Chimp
    • TED
    • And a TON of startups

    How to use?

    git push heroku master

    Add-ons

    Heroku's killer feature

    • Caching
    • Email
    • DNS
    • Data storage
    • Performance monitoring
    • Custom domains
    • ...most of them are free

    Ok so let's make something

    What next

    • Socket.io
    • Programming is hard, but very fun
    • Practice, a lot!
    Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.

    - Brian W. Kernighan

    Resources

    • http://hipsterdevstack.tumblr.com/
    • http://gulpjs.com/
    • http://heroku.com/

    That is all.

    @GrantTimmerman

    github.com/grant


    Questions?