WebStorm, using Node.js Supervisor

I am using WebStorm as my Node.js IDE and recently I wanted to archive a way that I do not have to restart node.js manually after each code change. So here are the steps that worked for me on my Windows 7 development environment at work:

Install supervisor globally using a CLI

npm install -g supervisor

In WebStorm/IntelliJ add configuration for non-debug:

17-05-2013 10-47-08

Name: supervisor app.js
Path to node: C:\Program Files (x86)\nodejs\node.exe
Node Parameters: "c:\Users\<user name>\AppData\Roaming\npm\node_modules\supervisor\lib\cli-wrapper.js" --exec "c:\Program Files (x86)\nodejs\node.exe" --no-restart-on exit
Working directory: <path to your working directory>
Path to Node App JS File: <path to your app.js>

These paths are for Windows 7 so you’ll have to replace the above paths with paths on your machine. Next, you’ll be able to run this in debug mode but it doesn’t step through the code.

For debugging you can either use the remote debugger or just have a different run target for debugging without using supervisor.

Bootstrap Grid Layout Symbol Library for Balsamiq

The Bootstrap Grid Layout Symbol Library is a Symbol library with a set of grid layouts using the Bootstrap framework. The different layouts correspond to min-width and max-width media queries for different viewport dimensions, to help people doing responsive layout wireframes.

Please check out The UX Blog where Mike shares tips and tricks to help you use Mockups better and faster and talks with you about addresses your UX needs. He wrote an article about how to use the Bootstrap Grid Layout here.

Bootstrap+Grid+Layout

Grails for Hipsters

Robert Fletcher gave a talk at the London Groovy & Grails Exchange 2012 called Grails for hipsters about integrating Grails apps with some of the buzziest current tools & techniques. In this talk he demonstrates how to integrate a curated selection of the latest & greatest technologies (e.g. vert.x for asynchronous server side code, websockets for pushing content to the browser, etc.) to develop a cutting edge Grails application that will be the envy of scenester developers everywhere.

Part of what he talked about was his approach to handle pre-processed front-end resources in Grails apps. In the demo app for his talk he used LESS & CoffeeScript.

He is also using external tools – specifically Grunt or CodeKit – to pre-process resources during development rather than using extensions of the Grails Resources plugin. In his setup Resources is only aware of the final JavaScript & CSS files.

There is a video podcast available on Skill Matters showing the complete talk including the live demos.

Kickstrap: Bootstrap with apps, themes, and extras

In addition to my “Customize Twitter Bootstrap” article take a look at Kickstrap. Kickstrap is something like a framework: the Bootstrap Library is bundled and layered. You decide which CSS and JS components from Bootstrap to use as you develop but never edit Bootstrap’s code directly. This means you can keep the Bootstrap layer up-to-date without overwriting your existing code:

2013-01-20_19-36-51

Super Fast Web Apps with PJAX and Grails

There has been a great deal of interest recently in client side frameworks such as Knockout.js, Backbone.js, and Ember.js. These frameworks are great, but sometimes they are either overkill or simply too complicated for your particular purpose.

Traditionally, the alternative approach was to just use a pure server-side framework like Grails to build HTML and serve it to your users. However, there is a third approach. This approach has been nicknamed PJAX (PushState + AJAX = PJAX). PJAX is a blend between client side and server side rendering of HTML.

It’s a pretty slick way to make AJAX partial updates a lot better compared to the regular g:remoteLink tag. The basic idea of PJAX is that you update only the parts of the page that change when the user navigates through your app. Primary benefits are you don’t break the back button functionality and it updates the URL!

Nathan Totten has written a great introduction here and Bobby Warner created a Grails showcase for PJAX here with a very good video demonstration:

GeoJSONLint – Validate your GeoJSON

If you know JSONLint you might be interested in GeoJSONLint: a very simple django app from Jason Sanford that validates your GeoJSON and shows your feature(s) on a map if everything checks out ok. It works by POSTing your data to the /validate endpoint and returning a JSON object that signifies success or an error.

17-12-2012 13-56-06

The code is available at https://github.com/JasonSanford/geojsonlint.com