Hipster Stack

Hipster Nyan Cat

You probably haven’t heard of it.

Are you headed to Hollywood Hack Day this weekend? Well, you should be. It’s at the io/LA co-work space I started working out of recently. I’ll be there pitching the SoundCloud API, hacking something rad, and showing you how to work the coffee maker.

With that in mind, I thought I would share the development stack I’ve been hacking on lately. It’s a lean, mean, cross-browser friendly dev machine. It also utilizes some fairly new templating and styling languages, so my co-workers have dubbed it the hipster stack [1].

In my defense, I did use this exact stack to develop Stratus 2 and the upcoming update to Premiere [2]. Also, I’m not a hipster. I’m Cajun [3].

Prerequisites: Web Server

Before we can become hipsters, we’ll need to get a basic Node app running. If you don’t know what Node is, I’d suggest checking out this introduction.

But if I had to explain it in five words, myself, I’d say:

server side JavaScript, fuck yes

I use it in combination with the web development framework Express to create a light-weight server and configure all my hip middleware. My core server file typically looks something like this.

Developing: Compile all the Things

Colons, and semi-colons, and brackets. Oh, why?

Wouldn’t it be nice if we could write clean, modern, and simple code then have it automatically compiled into the appropriate language? What would you give to have includes in HTML? A cross-browser CSS3 border-radius? The end of all those god damn semi-colons? Would you subject yourself to being called a hipster? Yes? Well my friend, come with me…

CoffeeScript

CoffeeScript is an elegant way to write JavaScript. You provide the CoffeeScript equivalent syntax and it will compile right into readable, pretty-printed, JS Lint passing JavaScript. No bullshit [4].

So, why use it? Well… here’s a simple function written in JavaScript:

var square;

square = function(x) {
  return x * x;
};

And here’s the same function written in CoffeeScript:

square = (x) -> x * x

Yes, it will still compile [5] into the first example, but doesn’t that look a little nicer? If you said yes, you may proceed.

Jade

I use Jade to write my html templates. Like CoffeeScript, it also has a damn nice syntax. For example, this:

#hipster stack

is converted to this <div id="hipster">stack</div>.

However, I’d have to say my favorite feature is Includes. This allows you to include other static files containing jade, html, or css right into your templates. I like to use it for my header and footer files.

html
  body
    include includes/header.html
    h1 Hipster Stack
    include includes/footer.html

As long as those two static html files are stored in the appropriate directory relative to the calling Jade file (in this case, the includes folder), they’ll render accordingly. This helps keep my templating code clean and organized.

Still with me? Well, good thing. Because I’ve saved the best for last: CSS

Stylus

Stylus is one bad ass way to write css. It also has a ton of incredible features, but let’s start with the syntax. Say goodbye (or better yet, Fuck off) to braces, semi-colons, and colons. Code this:

body
  font 12px Hipster

and it will compile into this:

body {
  font: 12px Hipster;
}

Need some variables? Just assign them:

tiffany = #81D8D0

body
  color tiffany

And they’ll compile accordingly:

body {
  color: #81D8D0;
}

But Lee, what about functions? You bet your ass:

add(a, b)
  a + b

body
  padding add(10px, 5)

Kaboom:

body {
  padding: 15px;
}

As if things couldn’t get any better, in walks Nib.

Nib

Nib is a tiny library for Stylus that provides extensive cross-browser DRY CSS3 mixins for all your designing needs and more importantly, your peace of mind. Code this:

body
  background linear-gradient(top, white, black)

and it will compile into this:

body {
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    color-stop(0, #fff),
    color-stop(1, #000));
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);
  background: linear-gradient(top, #fff 0%, #000 100%);
}

S-E-R-I-O-U-S-L-Y.

Look, if this is being a hipster and being a hipster is wrong, I don’t want to be right. Pumped? Be sure to check out all of the CSS3 extensions Nib provides.

So how do I actually deploy all this stuff? Simple. Git and Heroku.

Deploying: Git Push Heroku Master

Heroku has a great article on the basics of deploying to their platform. Once you’re configured correctly, you can simply check-in code as you would on GitHub right into your Heroku app. A typical update would look something like this:

git add .
git commit -a
git push heroku master

Once you get the hang of it, you’ll never understand how you used FTP in the first place.

If you have any questions, feel free to drop me a line on Email or Twitter.

So, who’s ready to become a Hipster?

Fork it


[1] I realize that even calling something hipster lowers its hipster-ness, but just bare with me here.

[2] Premiere 1.5 is currently in the works. Here’s a blog about the last version.

[3] Not that these two things have any connection, but if I was going to be labeled anything. It better be Cajun.

[5] The golden rule of CoffeeScript is: “It’s just JavaScript”.

[5] I should also note that I compile my CoffeeScript by running the provided coffee command in terminal: coffee -c -w public/js/*.coffee while developing.

 
122
Kudos
 
122
Kudos

Read this next

Here Goes Something

After two incredibly inspiring and amazing years at SoundCloud, I’ve decided to depart and return to the world of freelance web development. The Last Two Years In June of 2010, I left SAM with a purpose: I wanted to become a better... Continue →