{Code: Impossible}

NodeJS on Windows Part 3: The feedback loop

In the last blog post I showed you how to install jade and create your first view. However the development cycle leaves a lot to be desired. Nothing sucks more than the web ux/ui development cycle. Make a change, restart the server (optional), refresh the browser, lather rinse, repeat.

I'm going to show you something awesome. Open a powershell window (you are using powershell aren't you?) and execute:

$ npm install supervisor -g

This will install a package named Supervisor globally on your machine. Now, I could tell you what supervisor is but it's waaaaaay better to show you. It's ok, you can trust me, I'm a blog post.... those never lie.

Anyway, let's run supervisor on the node app we created last time.

$ supervisor app.js

You'll see the normal app bootup messages, when you visit http://localhost:8000 the site should load normally and show you "Hello World!".

Aaaaaaand nothing is different.

What gives?

Yeah this doesn't sound awesome yet... but it will soon enough. Open your app.js and add the following to the configure() callback:

console.log("Jared is super awesome!");

Now, save your js file and check your powershell window. Go ahead... I'll wait.

WASN'T THAT AWESOME?!?! Supervisor watches all your js files for changes, when changes are detected it will reload the app automatically! So let's change the header and see what happens.

res.send("<h1>Jared is the best!</h1>");

Hmmm, looks like supervisor reloaded but we have to reload the browser manually. That seems... tedious. What if we wrote some code to have the client listen for changes on the server and refresh the page as needed?

Kick it up a notch

First, we'll need a few more packages.

$ npm install socket.io express

Socket.io is a framework that makes websockets insanely easy. When we install it we pass the express argument so that socket.io installs with special bindings for ExpressJS. We'll use socket.io to send messages between the client (our browser) and the server.

We'll work on the server side first, changing our list of variables to include the socket.io object:

var express     = require('express')
    app         = express.createServer(),
    jade        = require('jade'),
    io          = require('socket.io').listen(app),
    config      = {
                      routes:{
                          index: "/"
                      }
                  };

Oh! We'll also want to pass a date to our view, so let's add that to the viewmodel:

res.render('index.jade', {
    title: 'Hello World!',
    layout: false,
    date: (new Date()).toString()
});

I'll explain what this is for in a minute.

So we've got socket.io initialized, but we haven't told it to do anything except listen. This is fine for our purpose but normally you would have an event registered to tell socket.io what it should do with incoming requests but here, we really don't care.

When a file changes, supervisor will recycle the node server which will sever the connection with the client. We'll use this as the event on the client to trigger the page reload. Let's code that up now.

In our index.jade view, add the following markup:

h2= date
script(src="/socket.io/socket.io.js")
script
  var socket = io.connect('http://localhost:8000');
  socket.on('disconnect', function (data) {
    window.location.reload();
  });

Here we have the socket.io client library loaded (socket.io provides a route to ExpressJS that handles the /socket.io/* request) and then we use that to open a long-polling connection to the server. When that connection gets disconnected (e.g. the server gets recycled when a file is changed) our page will reload.

Also, we now have our date property rendered out into an <h2> so we can tell when the page gets updated. All we have to do now is start supervisor and let it know we want it to watch more than just the .js files in our root:

$  supervisor -w "views,app.js" -e "jade,js" app.js

The -w argument specifies files and directories that supervisor should watch for changes, and the -e argument specifies file extensions. So now when we change our view the server should recycle and the browser window should reload with the updated changes!

Using this method it would be very easy to link up css,less,sass files as well. Being able to do this with as little code as we have here is absolutely amazing and is one of the big reasons I'm getting more into NodeJS now.

Also, I've put all the code for this and the rest of the series up on GitHub! Fork it if you like, if you see something odd send me a comment or a pull request!

Reasons to use PowerShell instead of CMD

First, I guess I should say that there isn't anything necessarily wrong with the command line in windows. It's the 'ol standby for a lot of windows users. It's looked the same since 1986, it has the same familiar commands and you can use TrueType fonts if you want to be a rebel.

I.R.O.N.

Powershell is built on top of the .Net Framework which means that any assembly that is compiled with .net can be brought into powershell and used to automate/extend the console.

Say goodbye to horrible .bat files in your projects. just create an ShellAutomation.dll in your project and write some powershells scripts and you're good to go!

"ls", "pwd"

Two letters: "ls". The PowerShell command window has support for a ton of the *nix shell commands, no more 'ls is not a command or batch file' errors! This should be enough to get you to switch!

It has modules!!!

PsGet is a package manager for PowerShell (remember when I said that everything needs a package manager?). You can choose from a ton of modules off their directory and PsGet will isntall them for you.

Git is better in powershell

Posh-Git is a PowerShell script for, you guessed it, git that has makes me love working with git more than I ever could on linux/mac. The major selling point? contextual tab-completion. It's freaking awesome. Git on all other platforms has been put on notice.

Easy automation

PowerShell is a pretty easy language to grok. I've only used it in passing to automate really tedious tasks, but if I can throw a workable script together in 10 minutes then the language has to be easy to understand!

Awesome output commands

clip is a command that copies whatever is "piped" to it to the clipboard. Yeah, no more right-clicking on the cmd window icon, selecting "select all" and pressing enter. Just pipe the output!

$ c:\> ls | clip

The directory listing for my c:\ root would be put into the clipboard, ready to be pasted into a blog post, email or ~~message-board~~ twitter flame.

out-gridview is a similar command but instead of putting the piped data into the clipboard, PowerShell will show a WPF-style data grid view of the data.

So that's my list, if you're using powershell already let me know what you like most about it in the comments. If I've forgotten something obvious let me know!

For more resources on powershell, check out the Hey!, Scripting Guy blog as well as BeefyCode blog (what an awesome name for a blog). Until next time.

ChuckNorris

Looking through the git repo for ChuckNorris, seeing the amazing number of tools that Dru Sellers and Rob Reynolds have turned out leaves me thinking one thought:

If you don't know what ChuckNorris is, a lot of people call it a framework but it's more like a suite. There are, at the time I wrote this, about eight tools that target specific aspects of the development process. From database migrations, continuous builds, to deployment. ChuckNorris has a story for pretty much everything.

You don't have to use the tools together, they each work just as well separately, but when you combine them they make your life insanely simple.

You can listen to a episode of Hanselminutes where Scott interviews Rob about the framework. It's a great episode, it reveals a lot of the inside details on how ChuckNorris came about.

To show my love for ChuckNorris I thought I would write up a few of the tools that I've either used in the past or have thought were interesting.

RoundhousE is a database migration tool, like db:migrate in Rails (or the new Entity Framework migrations). I've used this in the past and it's very awesome.

WarmuP, which is what @JohnBubriski and I were talking about, is a project bootstrapper. Setup your project directories, templates, dependencies once and WarmuP will get them from source control and perform a token replacement on them. Pretty cool stuff.

UppercuT is a templated build system written on top of nant. I've used this in the past as well, it sports a ton of extensibility points. Pretty much every step in the build process has Pre, Post or Replace hook so you can make it do anything and you can make it do anything in a matter of minutes.

Are there any OpenSource libraries/suites that you guys use that constantly surprise you with the sheer amount of features that they have? Give them a shoutout in the comments!

NodeJS on Windows Part 2: using the Jade ViewEngine

Our node app that we created in part one is writing out our header "Hello World!" really well. But that's not really that cool. Plus, it doesn't scale. If we wanted to output more HTML we would find the current solution to be a giant pain in the ass.

It would be nice if we could use a templating engine to render HTML for us...

$ npm install jade

Jade is a templating engine like HAML, which you can use as well, but I chose Jade because it works really well with ExpressJS.

Let's create our first view. We'll create a folder named views in the root of our project directory and in there let's create a file named "index.jade" and paste the following markup in there:

!!! 5
html(lang='en')
  head
    title= title
  body
    h1= "Hello World!"

If you've used HAML before then you should understand this markup, it creates a html5 document (!!! 5) and then sets the title property of our view model into the <title> tag, then just renders a simple <h1> in the body.

Easy enough. Now let's get our app to render this. Right now, our app has no idea that our views are in the /views directory, so let's clue it in. Paste the following code just before the app.listen() call:

app.set('views', __dirname + '/views');

Lastly, let's replace the app.get() call with the code below:

app.get(config.routes.index, function(req, res) {
  res.render('index.jade', {
    title: 'Hello World!',
    layout: false
  });
});

This tells ExpressJS to render the jade view we created and we supply a simple viewmodel. Notice that we specify an extra property on the viewmodel: layout. This tells jade not to look for a layout template, a view that you can use to hold all your common markup, but instead render the view as it is.

now, save your file and run the app! You should see your new page which looks amazingly similar to the old page, but instead of using strings and rendering directly to the response stream, we've delegated the rendering task to a view engine.

This let's us keep all the view logic in a separate place so we only need to change our app code for app code related reasons. We can change the views for all the display requirements that we come up with.

So that wraps up this post. Next time I'll show you how to speed up your development process by eliminating a few steps from the save-stop-node-reload-node-refresh-the-page development cycle.

Also, I've put all the code for this and the rest of the series up on GitHub! Fork it if you like, if you see something odd send me a comment or a pull request!

Getting started with NodeJS on Windows

Note: if you install express NPM will install the 3.x alpha release which is not compatible with the most recent version of connect. I've updated this post's instructions on installing the express module. Also, I published a package.json in each of the examples on github.

If you work in the web development arena then you have to have heard of NodeJS. I mean if you haven't you should question the people you hang out with, because everyone seems to be talking about this.

I've wanted to play around with it for a while, I mean it's server-side JavaScript that is like everything I've ever wanted!

Installation

Installing NodeJS on windows used to be a royal pain in the ass. It involved installing Cygwin and compiling node from source, which now-a-days is like asking someone to build their car before they test drive it.

But now Windows is a first-class installation citizen! We have our own nifty installer and it's pretty easy. Download, double-click, press install and let the nodejs goodnes wash over your computer.

Packages

Python has pip, Ruby has gems/bundler, .Net has Nuget, hell everything has a package manager these days, so it would stand to reason that NodeJS would have one. And NPM (Node Package Manager) is just that. Installing a package is pretty easy since NPM comes with the NodeJS install for Windows:

$ npm install mongodb

BOOM, you've got the mongodb library for Node. All set. If you pull down a node app and want to make sure you have all the dependencies installed you just do this in the root of the app:

$ npm install

This will read the package.json in the root of the app and download all of the dependencies that you are missing.

Your first NodeJS App

Creating a nodejs app is really simple, create new folder on your machine. Anywhere will do.

Now, let's add a package: (currently v2.5.9 is the most recent version that works correctly):

$ npm install express@2.5.9

ExpressJS is a web framework (like rails or django or asp.net) for Node. You can run express from a command line and it will create a whole project scaffold for you. We're not going to do that right now. We're just going to use express to handle routing for our server.

First thing we'll need to have is some variables. We need to load ExpressJS so we can set options and setup routes. Then we'll need to create our app, and then maybe a configuration variable to store settings.

var express     = require('express')
    app         = express.createServer(),
    config      = {
                      routes:{
                          index: "/"
                      }
                  };

Okay, cool. Now we just need to tell the app what port to listen on. 8000 sounds good to me, how about you?

app.listen(8000);

Then we simply register a few callbacks. The first one is executed when our app has finished starting. The second is run when a request comes in on a url that matches the route we pass in, which in this case is the root "/".

app.configure( function() {
  console.log('Express server listening on port %d in %s mode', 
                  app.address().port, app.settings.env);
});

app.get(config.routes.index, function(req, res) {
    res.send("<h1>Hello World!</h1>")
});

So when thats all put together, we end up with:

var express     = require('express')
    app         = express.createServer(),
    config      = {
                      routes:{
                          index: "/"
                      }
                  };

app.listen(8000);

app.configure( function() {
  console.log('Express server listening on port %d in %s mode', 
                  app.address().port, app.settings.env);
});

app.get(config.routes.index, function(req, res) {
    res.send("<h1>Hello World!</h1>")
});

Pretty simple right? Not a lot of code. Now, let's run it!

$ node app.js

Then we just need to make a request to http://localhost:8000 and we should see "Hello World!". And just like that you've got your first NodeJS app (albeit a very simple one) running on Windows!

Hang on to this code as we'll start modifying this app to add more features in the next blog post.

Trailing whitespace is evil. Don't commit evil into your repo.

Fred and Tim

It all starts out innocently enough. Fred, a mid-level developer at InfoTech Systems opens up his IM client and fires off a chat to a co-worker: "Hey Tim, can you check out my pull request? I'm done with the ratings feature and think we should merge it in".

Tim, a Senior Software Developer, has been writing code since the mid 80's. He originally started out contributing to the Gnome project and then bounced around the corporate world, Lotus, Microsoft, Oracle but now works with Fred at a small startup where they and five other developers are trying to build the next great cat-picture rating website - CatR.

"Ok, let me CR it", CR is the teams short-hand for Code Review. Even though most of the team are experienced programmers every feature and bug fix commit must be reviewed by another developer.

Fred is the "new guy" on the team, this is his third day at InfoTech and he's submitting his first feature enhancement. Even though Fred has 8 years of coding under his belt, he still gets a little nervous when someone reviews his code.

"Hmmmmm" Tim types back. Ugh, This can't be good Fred thinks.

"This git diff looks weird. How many lines did you change in the main stylesheet?"

"Only 2 why?" Fred types back, starting to get a bit defensive. He takes a few quick, deep breaths and calms down.

"The diff is lighting up like a christmas tree. Check your diff locally."

Fred opens up a terminal and does a quick check to see what Tim is talking about:

git diff master product-ratings-feature

"Crap!" the word jumps instantly into Freds mind. He can see immediately what Tims talking about. There a bunch of lines where the only thing different is the whitespace at the beginning or end of the line.

"Ugh, yeah I see it" Fred types back.

"Well, we can't pull this in yet dude, we only want to have diffs show what we actually changed so if something goes south in the future we're not scratching our heads looking at a all whitespace commit. Go back and check your whitespace settings, re-save and let me know when I can review it again."

"Great, guess I've got some more work to do" Fred says to himself. He lets out a fairly audible sigh, opens up Visual Studio and starts typing away at the keyboard.

The moral of the story

Trailing whitespace issues can cause a lot of problems when they get into your repository. It leads to falsey diffs which claim lines have been changed when in fact the only thing that changed was spacing.

This can make finding what actually changed in a file later on in the development cycle next to impossible. Most open source project leads know this and a lot of them will reject pull requests that fail to trim whitespace (or have other

A lot of IDEs and text editors have options to configure trailing whitespace (SublimeText make this insanely easy) but Visual Studio, amazingly, has no option for this.

How to Remove Trailing Whitespace on save in Visual Studio

Open visual studio (yep)
In the menu select Tools -> Macros -> Macros IDE (yeah, we're opening another IDE)
Expand "My Macros" in the Project Explorer (usually in the right-hand side of the window)
Double-Click the EnvironmentEvents module (yep, it's VBA in all it's glory)
Paste the code below just after the "Automatically generated code" region

Private Sub DocumentEvents_DocumentSaved(ByVal document As EnvDTE.Document) _
    Handles DocumentEvents.DocumentSaved
    Dim fileName As String
    Dim result As vsFindResult

    Try
        ' Remove trailing whitespace
        result = DTE.Find.FindReplace( _
            vsFindAction.vsFindActionReplaceAll, _
            "{:b}+$", _
            vsFindOptions.vsFindOptionsRegularExpression, _
            String.Empty, _
            vsFindTarget.vsFindTargetFiles, _
            document.FullName, _
            "", _
            vsFindResultsLocation.vsFindResultsNone)

        If result = vsFindResult.vsFindResultReplaced Then
            ' Triggers DocumentEvents_DocumentSaved event again
            document.Save()
        End If
    Catch ex As Exception
        MsgBox(ex.Message, MsgBoxStyle.OkOnly, "Trim White Space exception")
    End Try
End Sub

Now save your new macro and whenever you save a file in Visual Studio this will run and trim all the trailing whitespace.

How to Remove trailing whitespace on save in Sublime Text 2

In Sublime Text, open up the preferences menu and select "File Settings - User"
- this is important because if you use the "Default" settings, they may be overwritten when you update Sublime Text to a new version.
Scroll down until you see "trim_trailing_white_space_on_save", set this option to true
Save
Profit

Get Git to help you out

In the example above Fred could have saved himself a lot of time if he ran one command:

# run in the root of your repo directory
mv .git/hooks/pre-commit.sample .git/hooks/pre-commit

This file has a check (on the last line) that will fail any commit when there are whitespace errors. It's not enabled by default so you have to remove the .sample from the file name to get git to run it.

After all this, what should I do next?

High-five Yourself!!!

A JavaScript interview question that doesn't suck

At a previous job I was one of the more senior guys on the team and we were expanding heavily. Which meant that I was in a lot of interviews. Problem was, our interview process sucked. We rarely had people code in interviews, we never had them look at code, it was awful. So I worked with the rest of the devs and we revamped the entire process. It was awesome!

It's been a while but I stumbled across the questions in an old google doc and thought I would share them.

Questions that involve having people look at code and critique it are my favorite questions to ask in an interview. You get to see what, if any, biases they have when reviewing code and you can see how much of the language they understand.

The following code is supposed to loop over a collection, alerting each item. If any item in the collection equals the number 4, then the item is divided by 4 and the result is alerted.

How many problems can you spot in the following code sample? What are they? Why are they problems?

var collection = new Array(1,2,3,"4",5);
for(var i = 0; i <= collection.length; ++i) {
  alert(collection[i]);
  if( collection[i] == 4 ) {
    alert(collection[i] / 4);
  }
}

So, how did you do? Post your answers in the comments!

No, actually that's pretty accurate

Me: it is fast enough when it's loaded up

Me: it's startup that takes a while

John: like an asp.net website project, eh?

Me: yeah

Me: but

Me: like

Me: no

Me: actually that's pretty accurate

Rails helper: render content for different actions or controllers

On my blog homepage, I have a big block of text that does a nice little intro of me for visitors. This block of text is in a partial (the blog is written in Ruby, it's another one of my side projects: Artigo) and is shown only when the index action is rendered.

I did this because I have to use the same layout for the entire theme (it's a limitation of the current blog's theming system), which means I had to come up with a way to only render content when a certain action or controller was "active". Here's how I did it:

  def is_active?(desc= {})
    controllerMatch = desc[:controller] == nil || params[:controller] == desc[:controller]
    actionMatch = desc[:action] == nil || params[:action] == desc[:action]
    idMatch = desc[:id] == nil || params[:id] == desc[:id]

    isactive = actionMatch && idMatch && controllerMatch
  end

So this can be used to hide/show content like so:

<% if is_active?( :controller => "posts", :action => "index") -%>
  <%= render :partial => "themes/codeimpossible/partials/callout" %>
<% end -%>

Let me know if this helped you!

Why alert() sucks

Alerts suck. In every web project that I work on, the code below is one of the first things I add. It will override the alert function an instead pass the argument supplied to the console.

// the console && console.log check is to make sure 
// this code doesn't fail in IE which does not create 
// the console obj unless the user has dev tools open.
window.alert = function(m) {
  if(console && console.log) {
    console.log(m);
  }
};

Why is the code above necessary? Why should you stop using alerts in your production javascript code? Let's take a look.

Alerts block the javascript execution. When you call alert the entire javascript thread blocks until the alert dialog is closed. Sounds pretty useful right?

Alerts block the browser. Alert dialogs are displayed modally which means that the parent thread (the browser) blocks until you close them.

They look terrible. This is pretty self explanatory. I've never had an alert fit in with a websites ux. It's actually pretty jarring when you see one.

Alerts only display strings. Console.log can display all sorts of data, and is included in most major browsers (and node.js) which is why I chose to use console.log as a replacement for alert in the snippet above.

Alerts tend to lead to bad behaviors. I've been working in web development for about 9 years now and in every codebase I've worked on there is, somewhere, an alert with profanity or "what the hell", or "WTF", or some kind of rediculous message that a dev left in there to signal when they got to some unexpected block of code.

To this day, some developers still prefer to use this method but with all of the javascript unit test frameworks and in-browser debuggers out there this just doesn't make sense.