Brandon Tilley

Controlling an Arduino from Node.js

2012-03-02T07:08:00-08:00

After expressing an interested in learning microcontroller programming, a friend of mine purchased for me an Arduino Duemilanove, which arrived yesterday. Being someone who enjoys web programming, I of course wasted no time in figuring out how I could get it connected to a web page. I opted to use Node.js for my integration.

To communicate with the microcontroller, I used node-serialport, which allows you to make a connection to a serial port for reading and writing. For this test, I wrote a sketch to turn the onboard LED on pin 13 off when a 0 is read from the serial connection, and to turn the LED on when a 1 is read. The contents of this sketch follows; just upload it to your Arduino.

const int outputPin = 13; void setup() { pinMode(outputPin, OUTPUT); Serial.begin(9600); } void loop() { if (Serial.available() > 0) { int incomingByte = Serial.read(); if (incomingByte == 0x01) { digitalWrite(outputPin, HIGH); } else if (incomingByte == 0x00) { digitalWrite(outputPin, LOW); } } }

Next up, we need to send a 0 or 1 byte to the Arduino from Node; here’s a short CoffeeScript program that will blink the LED every second (I’ve hardcoded the device where my Arduino lives; substitute your own).

{SerialPort} = require('serialport') fs = require 'fs' port = '/dev/tty.usbserial-A600enDA' serial = null value = 0x00 toggle = => value = if value == 0x00 then 0x01 else 0x00 serial.write new Buffer([value]) console.log "Starting..." fs.stat port, (err, stats) -> if err? console.log "Couldn't stat #{port}" process.exit() console.log "Started." serial = new SerialPort port, baudrate: 9600 setInterval toggle, 1000

From here, it’s not difficult to adapt this example into a more complete sample including a web server. Here’s a complete listing of my program, including a web page to access at the root URL to control the LED using jQuery Ajax requests.

{SerialPort} = require('serialport') fs = require 'fs' port = '/dev/tty.usbserial-A600enDA' express = require 'express' serial = null interval = null lightOn = false turnOn = => lightOn = true serial.write new Buffer([0x01]) turnOff = => lightOn = false serial.write new Buffer([0x00]) toggle = => if lightOn turnOff() else turnOn() app = express.createServer() app.get '/', (req, res) -> res.sendfile 'index.htm' app.get '/on', (req, res) -> clearInterval interval turnOn() res.end() app.get '/off', (req, res) -> clearInterval interval turnOff() res.end() app.get '/blink', (req, res) -> clearInterval interval interval = setInterval toggle, 500 res.end() console.log "Starting..." fs.stat port, (err, stats) -> if err? console.log "Couldn't stat #{port}" process.exit() console.log "Started." serial = new SerialPort port, baudrate: 9600 app.listen(8080)

<html> <head> <title>Online Lightswitch</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> $(function() { $("#on").click(function() { $.ajax('/on'); }); $("#off").click(function() { $.ajax('/off'); }); $("#blink").click(function() { $.ajax('/blink'); }); }); </script> <style> button { font-size: 20pt; } </style> </head> <body> <button id="on">On!</button> <button id="off">Off!</button> <button id="blink">Blink!</button> </body> </html>

Start the server and visit http://localhost:8080 and click the buttons to control the lights!

Programmer Criticism

2012-01-08T09:30:00-08:00

I stumbled across a very interesting post today. The topic of conversation used to make the point is Go and Dart, but you may substitute them with almost any new technology or language and the article reads the same (which is much of the point).

It was unnecessary to try Go or Dart before commenting publicly on them; in fact, it was important not to (for one thing, trying them would require programming). The criticisms were loud and vociferous but irrelevant because they weren’t about the languages at all. They were just a standard reaction to something new, empty of meaning, the result of a modern programmer’s need to complain about everything different.

…

A while after Go launched, the criticisms changed tenor somewhat. Some people had actually tried it, but there were still many complainers, including the one quoted above. The problem now was that imagination had failed: Go is a language for writing Go programs, not Java programs or Haskell programs or any other language’s programs. You need to think a different way to write good Go programs. But that takes time and effort, more than most will invest.

I urge you to read the post for yourself, but if you take nothing else away, how about the author’s closing statement:

I resolve to recognize that a complaint reveals more about the complainer than the complained-about. Authority is won not by rants but by experience and insight, which require practice and imagination. And maybe some programming.

Socket.IO and the Latest Chrome

2011-08-13T04:05:00-07:00

I spent some time this morning working on an issue, and when I discovered the problem, I thought I’d share my findings.

The issue is Socket.IO not working quite right on the latest Chrome build (definitely the latest dev build, and I’ve heard people are having issues with the latest stable build as well). Specifically, Socket.IO over WebSockets isn’t working. I received the following error:

warn  - websocket connection invalid

It turns out that this is because recent builds of Chrome implement a newer version of the WebSocket protocol. Although the folks at Socket.IO are working on a fix, it’s still not quite ready.

Interestingly enough, I didn’t have this issue at work, where we’re running the latest dev build of Chrome; instead, I discovered it while working on the same project at home, where I’m running dev Chrome on Ubuntu, so YMMV.

In the meantime, for development purposes, I’ve simply set Socket.IO to only use AJAX long polling for my app while the issue is sorted out. You can do this in your server code with:

socket.set('transports', ['xhr-polling']);

Happy coding!

Give Your JavaScript a Coffee-Infused Backbone

2011-04-18T00:55:00-07:00

Recently I was working on a little demo web app that involved completely client-side code. My JavaScript-fu is the weaker of my multi-lingual toolbox, although I’ve been working on it more recently (with more client-side experiments, such as this one, as well as projects in Node.js). Anyway, the first time through the code, I ended up with what was essentially a bunch of jQuery statements strewn about. It worked, but it wasn’t really very pretty. I decided that it was time that I learn how to do something about it. I ended up with two neat tools: CoffeeScript and Backbone.

CoffeeScript

CoffeeScript is “a little language that compiles into JavaScript.” It offers a syntax reminiscent of Ruby and a few other niceties that make writing JavaScript a lot easier and more fun (in my opinion).

I bring it up in this post because code samples later will utilize it. For the basics, check out the overview—it should be plenty to allow you to grok the code in this post.

Backbone

Backbone.js is the library that really helped bring shape to my code. It provides models, collections, views, routing and more. Your views respond to events in your models or collections to get stuff done. It even has “magic support” for jQuery, so you don’t have to write UI code without it.

While Backbone is a JavaScript application framework, it doesn’t include a widget library and other frills like several others. If you want to roll your own JavaScript but struggle to keep it in check, it might be what you need.

My App

My application was a World of Warcraft server status page designed to demonstrate some new API’s that Blizzard is providing. I wanted it to be able to show the current status of every server (fetched via JSONP and refreshed every five minutes) and I wanted the list to be searchable with an input box on the page. Let’s take a look at the various pieces of the app.

Realm Model

First, I created a model for a single server (aka “realm”). This model holds the name of the realm, its type, current population, whether or not the server is running, and whether or not there is a queue to play on the server. (Although it’s not necessary to set defaults, as all poperties are set automatically from JSON later, I did so here.)

window.Realm = Backbone.Model.extend initialize: -> # Only set default data if it doesn't already exist. unless this.get("name")? this.set name: "unknown" slug: "unknown" type: "n/a" population: "n/a" queue: false status: false

RealmList Collection

Next up, I created a collection to hold a list of models. It’s through this object that I fetch new data from the JSONP endpoint and update the models accordingly.

window.RealmList = Backbone.Collection.extend model: Realm url: "http://us.battle.net/api/wow/realm/status?jsonp=?" initialize: -> _.bindAll this, 'update', 'parse', 'processUpdate', 'filter' # After the first refresh, we no longer want to replace the models # in the collection with new ones. Thus, we will use our own 'refresh' # method which simply updates all the models with the new data. this.bind 'refresh', -> this.refresh = this.processUpdate # A wrapper around fetch() to (1) fire a "loading" event and # (2) ensure that a timer is set so another update happens in the future. update: -> this.trigger 'refresh:start' # Indicates data is being collected. this.fetch() window.setTimeout this.update, 1000 * 60 * 5 # update every 5 minutes # Custom parse method (1) extracts the array from Blizzard's JSON API and # (2) adds an "id" attribute to every model equal to that Realm's slug. parse: (response) -> _.each response.realms, (realm) -> realm.id = realm.slug this.trigger 'refresh:end' # Indicates data collection has ended. response.realms # Our replacement 'refresh' method, for every refresh after the first. # Iterates over the models in the collection and updates each one's data. processUpdate: (models, options) -> list = this _.each models, (model) -> id = model.id original_model = list.get(id) original_model.set(model) # Called by our controller when the hash tag changes. # We simply fire an event indicating the term has changed, and any view # that is interested will handle the work of hiding or showing elements. filter: (term) -> this.trigger 'filter:change', term

I struggled with this for a little while, as Backbone is really designed to help where CRUD and REST are in heavy use. For example, a call to RealmList.fetch() replaces all the models it holds with new models rather than updating the old models. This wasn’t exactly what I wanted, and since I had to update the entire list of realms via JSONP every time, I did a bit of hackery to overide the collection’s refresh function after the initial download.

The other thing to note here is the _.bindAll method. This is an Underscore.js method (Backbone depends on Underscore) that ensures that anytime any of the named methods are invoked, they are called in the context of the current object (so this always refers to the object where the method lives).

Realm View

Next up is the view for a single realm; that is, one instance of a server in the list.

window.RealmView = Backbone.View.extend tagName: "div" template: _.template $("#realm_template").html() initialize: -> _.bindAll this, 'render', 'show', 'hide' # Whenever the data changes, the view with automatically re-render itself. this.model.bind 'change', this.render this.model.view = this # Render a single realm based on the template embedded in the HTML. render: -> $(this.el).html(this.template(this.model.toJSON())) this show: -> $(this.el).show() hide: -> $(this.el).hide()

Notice the call to _.template when defining the view’s template. This is another Underscore method; it compiles JavaScript templates into functions that can be used later for rendering by passing in a context object to fill in values. Here, I created a hidden div on the page, and read that HTML in to the template. In a larger app, I would probably use Milk for rendering templates.

Also, it’s easy to miss the magic here; it’s really only one line:

this.model.bind 'change', this.render

This line of code binds its model’s change event to the view’s render element; the end result is that the view will automatically re-render itself any time its model’s data changes.

Application View

Finally we get to the view for the application; while it’s a bit longer than the other objects, it’s actually relatively simple, mostly taking responsibility for binding various UI changes to events from the realm list.

window.AppView = Backbone.View.extend el: $("#main") events: "keyup input": "search" initialize: -> _.bindAll this, 'addOne', 'addAll', 'search', 'initSearch', 'filter', 'startLoading', 'stopLoading', 'updateTime' Realms.bind 'refresh', this.addAll Realms.bind 'refresh:start', this.startLoading Realms.bind 'refresh:end', this.stopLoading Realms.bind 'refresh:end', this.updateTime Realms.bind 'filter:change', this.filter Realms.update() this.initSearch() # Add a single realm to the page. addOne: (realm) -> view = new RealmView(model: realm) this.el.append view.render().el # Add an entire list of realms to the page. # Deletages to this.addOne. addAll: -> view = this _.each Realms.models, (realm) -> unless realm.view? view.addOne realm # Now that the initial data is shown, start the controller's routing. Backbone.history.start() # Called when the "keyup" event is fired from the input box. # Sets the hash tag, which the controller picks up on and fires # events to ask the app to filter based on the input. search: -> window.location.hash = this.$("input").val() # Set the initial value of the search box to be whatever is in the URL. initSearch: -> this.$("input").val(window.location.hash.substring(1)) this.$("input").focus() # Called when the realm list's filter:change event is triggered. # Iterates over the realms to see if each matches the search value. filter: (term) -> this.$("input").val(term) if term == "" this.$("#reset").hide() else this.$("#reset").show() Realms.each (realm) -> if realm.get('name').startsWith(term) realm.view.show() else realm.view.hide() startLoading: -> this.$("#loading img").show() stopLoading: -> this.$("#loading img").hide() updateTime: -> now = new Date hours = now.getHours() minutes = now.getMinutes() seconds = now.getSeconds() meridian = if hours < 12 then "AM" else "PM" hours -= 12 if hours > 12 hours = 12 if hours == 0 minutes = "0#{minutes}" if minutes < 10 seconds = "0#{seconds}" if seconds < 10 this.$("#time span").text("#{hours}:#{minutes}:#{seconds} #{meridian}")

It’s also primary responsible for handling the search functionality for the app, iterating over the list of realms and checking to see if the name starts with the serch string, and hiding or showing the views accordingly. It does this when it receives the filter:change event fired from RealmList.filter. But how does that method know when to fire that event? The answer comes from our last object, the controller.

Controller

The controller is analagous to the router in a traditional Rails app; it handles changes in the hash string. Here’s our controller:

window.Controller = Backbone.Controller.extend routes: ":realm": "realm" # Match any string in the hash tag to be the name of a realm to search for. realm: (realm)-> Realms.filter(realm)

The controller simply takes any hash string and passes it on to the realm list, which then fires the necessary event so that the view does the filtering.

In Conclusion

I hope this post has given you a glimpse into the power of Backbone (and the syntax of CoffeeScript). There’s a bit more code I didn’t go over (and parts of the code that I did show that I glossed over). Please feel free to take a look at the complete CoffeeScript source for the app; you can also find a snapshot of the code from the time I wrote this post, and you can check out the entire project’s source if you’re interested). Don’t hesitate to comment here or shoot me an email if you have any questions.

It’s becoming incresingly apparent that JavaScript and other client-side technologies are where the real power is in modern web apps; be sure you leverage the tools necessary to keep your JavaScript just as clean and decoupled as your server-side code!

Stack Overflow can Make You a Better Learner, Too

2011-02-06T03:58:00-08:00

Jeff Atwood recently posted on his blog, Coding Horror, about how asking and answering questions on Stack Overflow, the community-driven programmer question and answer site, can make you a better writer. It’s a good read with a good point, and I completely agree. However, over the past few weeks, as I’ve tried to be more engaged with Stack Overflow by finding questions that I can answer, I’ve learned something else: Stack Overflow can make you a better learner.

I usually only utilize Stack Overflow for asking questions when I feel I’ve hit a dead-end with Google–when I feel I’ve exhausted my other options and I just can’t find an answer to the problem I’m having. In that way alone, I feel Stack Overflow has changed the way I look for answers to a problem. I tend to search for longer and in more ways before posting to Stack Overflow.

Recently, though, I’ve been learning a lot from answering questions. That sounds counter-intuitive, I know. How can you answer a question unless you already know the answer? And the answer, of course, is that you find it. That is where I feel Stack Overflow has helped me the most. By finding questions (usually related to topics I’m interested in) that I don’t know the answer to and finding the answer, I’ve learned new ways of finding answers. In particular, I’m much less intimidated than I used to be about reading source code written by other people, which is an excellent way to learn about software.

The other way I feel Stack Overflow has changed the way I think is by exposing me to problems I wouldn’t necessarily come up against in my own day-to-day coding. People have a lot of potentially weird problems on Stack Overflow, and reading them and trying to come up with an answer expands my capabilities in ways that I otherwise would never have happened upon.

So even if the users with thousands of rep and super-detailed answers intimidate you a little, I recommend taking some time each day and trying to answer some questions for people on Stack Overflow. Who knows what you’ll learn?

Gist Tag for Jekyll

2011-01-30T23:58:00-08:00

One of the many reasons I moved away from WordPress was to make it easier to support code-laden posts. Gists have been a favored way of incorporating code into posts (and automatically keeping them up to date!), but WordPress didn’t show the <script> tag in its editor, making it difficult edit the document around them, especially in posts with several code sections.

While Jekyll makes it crazy-easy to insert the necessary tags into your documents, there’s still one small problem: people who read the posts in an RSS reader miss out on the code-goodness! Sure, you can toss a quick <noscript> in there with a link to the post or to the Gist, but that feels like cheating. So, I wrote a Fluid tag for Jekyll to take care of the problem:

require 'cgi' require 'digest/md5' require 'net/https' require 'uri' module Jekyll class GistTag < Liquid::Tag def initialize(tag_name, text, token) super @text = text @cache_disabled = false @cache_folder = File.expand_path "../_gist_cache", File.dirname(__FILE__) end def render(context) if parts = @text.match(/([\d]*) (.*)/) gist, file = parts[1].strip, parts[2].strip script_url = script_url_for gist, file code = get_cached_gist(gist, file) || get_gist_from_web(gist, file) html_output_for script_url, code else "" end end def html_output_for(script_url, code) code = CGI.escapeHTML code "<script src='#{script_url}'></script><noscript><pre><code>#{code}</code></pre></noscript>" end def script_url_for(gist_id, filename) "https://gist.github.com/#{gist_id}.js?file=#{filename}" end def get_gist_url_for(gist, file) "https://gist.github.com/raw/#{gist}/#{file}" end def cache(gist, file, data) cache_file = get_cache_file_for gist, file File.open(cache_file, "w") do |io| io.write data end end def get_cached_gist(gist, file) return nil if @cache_disabled cache_file = get_cache_file_for gist, file File.read cache_file if File.exist? cache_file end def get_cache_file_for(gist, file) bad_chars = /[^a-zA-Z0-9\-_.]/ gist = gist.gsub bad_chars, '' file = file.gsub bad_chars, '' md5 = Digest::MD5.hexdigest "#{gist}-#{file}" File.join @cache_folder, "#{gist}-#{file}-#{md5}.cache" end def get_gist_from_web(gist, file) gist_url = get_gist_url_for gist, file raw_uri = URI.parse gist_url https = Net::HTTP.new raw_uri.host, raw_uri.port https.use_ssl = true https.verify_mode = OpenSSL::SSL::VERIFY_NONE request = Net::HTTP::Get.new raw_uri.request_uri data = https.request request data = data.body cache gist, file, data unless @cache_disabled data end end class GistTagNoCache < GistTag def initialize(tag_name, text, token) super @cache_disabled = true end end end Liquid::Template.register_tag('gist', Jekyll::GistTag) Liquid::Template.register_tag('gistnocache', Jekyll::GistTagNoCache)

(The above Gist is being shown with the Gist tag; how very meta.)

The code takes a Fluid tag in the form of {% gist gist-number file-name %} and inserts the necessary <script> tags into the document to display the given file from the given Gist. However, it also downloads the raw form of the Gist and inserts it into a <noscript><pre><code> block. It also caches the contents of the Gist into the _gist_cache folder of your Jekyll site (which should be added to your .gitignore file, etc) to make future compiles faster.

If you are rapidly iterating over multiple commits in your gist, you can use the gistnocache tag; taking the form {% gistnocache gist-number file-name %}, this tag does the exact same thing but skips reading from or writing to the Gist cache. Once you’re happy with your Gist, you can change the gistnocache tag to a regular gist tag. Of course, there’s always the chance that you need to remove a specific cached Gist from the cache; in that case, the files in _gist_cache are named intelligently to help you locate the file you need to delete.

Overall, it seems to be working fairly well. I hope this is of some use to others! Please let me know in the comments to this post or the comments to the Gist if you have any problems or suggestions.

So Long, WordPress

2011-01-30T03:44:00-08:00

WordPress has served me well for a long time. I’ve used it on multiple sites over the years. But I’ve found, lately, that it just feels big and bloated. I want something small, lean, and customizable. I want something that’ll let me focus on creating content and stay out of the way. That something is Jekyll.

Jekyll brings, to my mind, several advantages:

Static Content

Jekyll is described by its creator as “blogging like a hacker.” At it’s most basic level, Jekyll is a static site generator. It takes HTML, Markdown, Textile and others and compiles it into static HTML. That static HTML is then fit to be served and cached like any other HTML. No server-side processing required!

Simplicity

Jekyll is beautiful and elegant in its simplicity. Write posts in your favorite text editor in your favorite format. Store them in your Git repository for built-in backup. Create branches as you work on future posts. And publishing is as easy as an rsync to your server of choice.

Flexibility

Jekyll imposes very few rules on you. Any file with a YAML front matter block is processed by Jekyll, making it easy to provide RSS feeds and other “special” files. Jekyll’s Liquid layout provides plenty of flexibility without the gross (IMO) “WordPress Loop”.

So, over the next few days or weeks, I’ll be moving some of the posts from my old blog over to this one. Be sure to resubscribe to the feed, as the URL has changed!

Serving Rails Apps with RVM, Nginx, Unicorn and Upstart

2011-01-29T13:49:00-08:00

Ever since reading GitHub’s blog post on Unicorn, I’ve been interested in trying it out. This post will document the process I used to get Unicorn serving a Rails application behind Nginx, with RVM managing Ruby. If you’ve read GitHub’s post, some of the config will look very familiar. Ideally, though, you should be able to follow this post from start to finish and have a working setup going.

Introduction

I installed this setup on Ubuntu 10.04 LTS Server Edition, 64-bit. You should be able to follow along pretty well on any sane system; that being said, I do use Upstart to manage the services toward the end of the guide. If you don’t use Upstart, you will need to substitute in your own SysVinit scripts (or scripts for whatever you use instead).

In a few listings, I use curl with Gist URLs to fetch the contents of files; the contents of these files are shown below the shell commands, for reference.

Installing RVM

Since we’ll use RVM to manage our Rubies and gemsets on the server, we’ll start with a server-wide install of RVM. We’ll start out by installing curl and git, if necessary, then RVM, and finally the other packages RVM asks us to install. (Be sure to pay attention to these; you can view them again via rvm notes. You may need to install additional packages for your distro of Linux or for the Rubies you wish to use). I’m using Ruby 1.9.2-p136 here.

We’ll also take care to add the current user to the ‘rvm’ group. Finally, we’ll create a user called ‘unicorn’ to own our test application, later.

# Install RVM and dependencies sudo aptitude install curl git-core sudo bash < <( curl -L http://bit.ly/rvm-install-system-wide ) sudo aptitude install build-essential bison openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev sudo adduser `whoami` rvm echo 'source /usr/local/lib/rvm' >> ~/.bashrc # Set up users and groups sudo useradd --home /var/www --create-home --groups rvm unicorn && sudo chmod g+w /var/www sudo adduser `whoami` unicorn # # >> Log out and back in to SSH, open a new shell, etc. -- something to reload your environment # # Install Ruby 1.9.2-p136 and make it default rvm install ruby-1.9.2-p136 # Make a sandwich while you wait (or have someone make you one: http://xkcd.com/149/) rvm use ruby-1.9.2-p136 --default

Installing and Configuring Nginx

For simplicity’s sake, we’ll be using Nginx from APT. To make sure we’re up to date, we’ll use Nginx’s PPA.

You can see in the configuration file that I’ve jumped the gun and included the location of the shared socket we’ll use with our Unicorn application.

# Install Nginx sudo bash -c 'echo "deb http://ppa.launchpad.net/nginx/stable/ubuntu $(lsb_release -cs) main" > /etc/apt/sources.list.d/nginx-stable-$(lsb_release -cs).list' sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys C300EE8C && sudo aptitude update sudo aptitude install nginx sudo bash -c 'curl -L https://gist.github.com/raw/802568/3a62636146eb2615cf42081b2574e8602d199658/nginx.conf > /etc/nginx/nginx.conf'

/etc/nginx/nginx.conf:

worker_processes 1; user www-data www-data; pid /tmp/nginx.pid; error_log /tmp/nginx.error.log; events { worker_connections 1024; accept_mutex off; } http { include mime.types; default_type application/octet-stream; access_log /tmp/nginx.access.log combined; sendfile on; tcp_nopush on; tcp_nodelay off; gzip on; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 500; gzip_disable "MSIE [1-6]\."; gzip_types text/plain text/html text/xml text/css text/comma-separated-values text/javascript application/x-javascript application/atom+xml; upstream unicorn_test { server unix:/var/www/test_app/tmp/sockets/unicorn.sock fail_timeout=0; } server { listen 80; client_max_body_size 4G; server_name _; keepalive_timeout 5; root /var/www/test_app/public; location / { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_redirect off; if (!-f $request_filename) { proxy_pass http://unicorn_test; break; } } error_page 500 502 503 504 /500.html; location = /500.html { root /var/www/test_app/public; } } }

Configuring Upstart for Nginx

If you don’t use Upstart, or you don’t want to use Upstart, feel free to skip this section. By default, you can start Nginx with sudo /etc/init.d/nginx start.

sudo rm /etc/init.d/nginx for file in $(ls /etc/rc*/*nginx); do sudo rm $file; done sudo bash -c 'curl -L https://gist.github.com/raw/802568/e210f8754abdf137027daeb4c41db8cc301b36ad/nginx.conf > /etc/init/nginx.conf' sudo start nginx

/etc/init/nginx.conf:

description "nginx http daemon" start on runlevel [2] stop on runlevel [016] console owner exec /usr/sbin/nginx -c /etc/nginx/nginx.conf -g "daemon off;" respawn

Creating a Sample Rails Application

Now we’ll create a test Rails application in /var/www/test_app. We’ll use a gemset called rails_app to demonstrate Unicorn’s ability to figure out which gemset it should use for our application (for more details on this, check out step four in my earlier post on Unicorn and Upstart). For this to work, we’ll also create an RVM wrapper for Unicorn. And, of course, don’t forget your config/unicorn.rb file.

Again, we’ll use Upstart to start and manage our Unicorn process, but you can use whatever you’d like. If you just want to test it out, try running unicorn -c /var/www/test_app/config/unicorn.rb from the ‘global’ gemset.

# Install Unicorn in the global gemset, and create a wrapper (yo yo yo in the hooouuuuuse!?) rvm use ruby-1.9.2-p136@global gem install unicorn --no-ri --no-rdoc rvm wrapper ruby-1.9.2-p136 r192 unicorn # Create and switch to a new gemset rvm gemset create rails_app && rvm gemset use rails_app gem install rails --no-ri --no-rdoc # Create a sample Rails application cd /var/www rails new test_app echo 'rvm use ruby-1.9.2-p136@rails_app --create' > test_app/.rvmrc cd test_app # # >> Accept the .rvmrc warning # echo "gem 'unicorn'" >> Gemfile && bundle install curl -L https://gist.github.com/raw/802568/998ac7c702e43d600f94fc3ee63ea05179315a0d/unicorn.rb > config/unicorn.rb sudo bash -c 'curl -L https://gist.github.com/raw/802568/ee3f5f320c34ec2e1d1b55521776d7dccd9140d4/test_app.conf > /etc/init/test_app.conf' sudo start test_app

/etc/init/test_app.conf:

description "Test rails application" start on runlevel [2] stop on runlevel [016] console owner exec /usr/local/rvm/bin/r192_unicorn -c /var/www/test_app/config/unicorn.rb respawn

/var/www/test_app/config/unicorn.rb:

APP_ROOT = File.expand_path(File.dirname(File.dirname(__FILE__))) if ENV['MY_RUBY_HOME'] && ENV['MY_RUBY_HOME'].include?('rvm') begin rvm_path = File.dirname(File.dirname(ENV['MY_RUBY_HOME'])) rvm_lib_path = File.join(rvm_path, 'lib') $LOAD_PATH.unshift rvm_lib_path require 'rvm' RVM.use_from_path! APP_ROOT rescue LoadError raise "RVM ruby lib is currently unavailable." end end ENV['BUNDLE_GEMFILE'] = File.expand_path('../Gemfile', File.dirname(__FILE__)) require 'bundler/setup' worker_processes 4 working_directory APP_ROOT preload_app true timeout 30 listen APP_ROOT + "/tmp/sockets/unicorn.sock", :backlog => 64 pid APP_ROOT + "/tmp/pids/unicorn.pid" stderr_path APP_ROOT + "/log/unicorn.stderr.log" stdout_path APP_ROOT + "/log/unicorn.stdout.log" before_fork do |server, worker| defined?(ActiveRecord::Base) && ActiveRecord::Base.connection.disconnect! old_pid = RAILS_ROOT + '/tmp/pids/unicorn.pid.oldbin' if File.exists?(old_pid) && server.pid != old_pid begin Process.kill("QUIT", File.read(old_pid).to_i) rescue Errno::ENOENT, Errno::ESRCH puts "Old master alerady dead" end end end after_fork do |server, worker| defined?(ActiveRecord::Base) && ActiveRecord::Base.establish_connection end

Profit!

And that’s that! Upstart will manage both Nginx and Unicorn (although either could benefit from something like Monit or God, but I’ll leave that as an exercise for the reader and/or a future blog post).

RVM, Unicorn and Upstart

2011-01-29T07:01:00-08:00

I had a heck of a time this week trying to figure out how to get Upstart to start an instance of Unicorn due to the fact that Ruby was being managed with RVM. I finally realized I had been going about it the wrong way, and that RVM provided the tool that I needed: wrapper scripts. I opted to use a single wrapper script for the version of Ruby I was running, and to let Unicorn decide what gemset to use based on the .rvmrc file in the project. Here’s the whole process:

Step 1: Make sure Unicorn is installed in the global gemset

rvm use ruby-1.9.2-p136@global
gem install unicorn

Step 2: Create a wrapper script for Unicorn

rvm wrapper ruby-1.9.2-p136 r192 unicorn

Step 3: Modify your Upstart configuration file’s “exec” line

exec /usr/local/rvm/bin/r192_unicorn -c /path/to/app/config/unicorn.rb

Step 4: Modify your config/unicorn.rb file

Use the following code at the top of your unicorn.rb file to tell Unicorn to set up the environment based on the .rvmrc file in the root of the project:

if ENV['MY_RUBY_HOME'] && ENV['MY_RUBY_HOME'].include?('rvm')
  begin
    rvm_path     = File.dirname(File.dirname(ENV['MY_RUBY_HOME']))
    rvm_lib_path = File.join(rvm_path, 'lib')
    $LOAD_PATH.unshift rvm_lib_path
    require 'rvm'
    RVM.use_from_path! File.dirname(File.dirname(__FILE__))
  rescue LoadError
    raise "The RVM Ruby library is not available."
  end
end

ENV['BUNDLE_GEMFILE'] = File.expand_path('../Gemfile', File.dirname(__FILE__))
require 'bundler/setup'

Step 5: Start your service

Now you should be able to start your Unicorn app via sudo service start appname.

git diff with Color in the Browser

2010-09-25T06:22:00-07:00

If you’re anything like me (I feel sorry for you), then you use git diff pretty heavily. I like making sure I’m definitely committing what I think I’m committing, and I also like to verify my indentation, trailing whitespace, line endings, and so on are correct before I commit. I don’t tend to use many GUI tools for Git, so I end up paging through terminal output. While this works fine, I’ve discovered a solution I like more.

It involves Ryan Tomayko’s bcat, which is a pipe-to-browser utility. Since it supports ANSI/VT100 escape sequences, we even get nice color formatting. After installing bcat, our options are two-fold for using it with Git:

1. Pipe output to bcat

If you only want to use bcat from time to time, you can easily pipe ouptut from a Git command to bcat:

git diff | bcat

To get color, specify it as an option to git diff:

git diff --color | bcat

2. Set bcat as Git’s pager

If you want to use bcat for every operation Git sends to your pager, try the following:

export GIT_PAGER=bcat
git diff
git log
git log --oneline --decorate

And there you have it! Easy reviewing if your diffs in your browser. Be sure to check out the other examples on bcat’s homepage for some really neat uses!

GWT-Wizard: A Wizard Widget for Your Project

2010-04-22T12:51:00-07:00

I thought I would take a quick moment to preset GWT-Wizard, a wizard widget I designed for GWT.

GWT-Wizard is very configurable, allowing you to customize everything about the Wizard–down to creating your own custom view to plug into the widget–but also comes with a set of sane defaults that allow you to get up and running quickly. If you’re interested, check it out on GitHub. I have a hard time sometimes with over thinking and over planning things, so I’m trying to get code out to the open source community more. The project is still very young, but I’m using the widget in a production system for one of my projects, and I feel the codebase offers enough to be useful now.

If you have any comments or questions, or are using this widget in production somewhere, I’d be very interested to hear about it!

Serving a GWT Application with an Embedded Jetty Server

2010-03-27T04:12:00-07:00

For a new project I am interested in starting, I want to serve a GWT application with an embedded Jetty server. I wasn’t sure how to go about doing so, but it turns out it’s easier than I could ever have expected! Check it out below.

package net.binarymuse.EmbeddedGwt; import org.eclipse.jetty.server.Server; import org.eclipse.jetty.util.thread.QueuedThreadPool; import org.eclipse.jetty.webapp.WebAppContext; public class EmbeddedGwt { public static void main(String[] args) throws Throwable { // Create an embedded Jetty server on port 8080 Server server = new Server(8080); // Create a handler for processing our GWT app WebAppContext handler = new WebAppContext(); handler.setContextPath("/"); handler.setWar("./apps/GwtApplication.war"); // If your app isn't packaged into a WAR, you can do this instead WebAppContext altHandler = new WebAppContext(); altHandler.setResourceBase("./apps/GwtApplication"); altHandler.setDescriptor("./apps/GwtApplication/WEB-INF/web.xml"); altHandler.setContextPath("/"); altHandler.setParentLoaderPriority(true); // Add it to the server server.setHandler(handler); // Other misc. options server.setThreadPool(new QueuedThreadPool(20)); // And start it up server.start(); server.join(); } }

You do, of course, need the Jetty jars (I used the ones from the ‘lib’ folder in the Jetty distribution) in your classpath.

Engineer Thinking and the Art of Software Engineering

2010-03-12T02:06:00-08:00

Matt Gemmell brings up an interesting point in a recent blog post regarding user choice and defaults in software design.

But a problem arises when you allow precision-based design principles to hinder user experience. All too often, when faced with a decision about how to implement certain functionality, engineers take the extreme position that:

A feature must be exactly what 100% of users want.

If the above isn’t true (and it almost never is), the feature must be configurable.

This binary approach is gravely wrong, and unjustly offloads decision-making onto the user of the software. We’ve all seen where this approach ends up: multi-row sets of tabs, scrolling panes of checkboxes, nested radio-buttons and a general overload of configuration.

He goes on to talk about technical complexity and the responsibility of software to “mask uncertainty and to make the effort to provide a sensible default behavior.” However, as the post progresses, it evolves into an article that talks about the art of software engineering. One paragraph in particular really stood out to me:

It all comes down to a question of art. Our art (that of software engineering) is not in making it work. If you see it as a significant success that you managed to name some methods, or write code that compiles and runs (or implemented a heap sort, or found the bounding box for a set of points, or parsed some XML), then your career goals are low indeed. Anyone in this industry can do that stuff, including any reasonably proficient final-year undergraduate in Computing Science. That’s core-skillset, vocational learning. You’re not aiming high enough.

This got me to thinking: how often do I put ultimate importance on making something work? I’ve always been a proponent of attention to details and good UI design, but I’ve certainly been guilty of, as Matt puts it, setting my career goals too low. Something to think about.

Current Working Git or SVN Branch on the Prompt

2010-02-22T08:36:00-08:00

This is a nifty tip I picked up somewhere on the Internet to show the Git or Subversion branch you are currently working in on the command line prompt, which I modified to include your stash level. I haven’t done a ton of serious programming under Subversion, but I know with Git I’m branching all the time (branches are so cheap in Git!). I wasn’t sure if I’d like the results before I tried it, but as it turns out, it’s even more helpful than I thought it’d be.

Edit your ~/.bash_profile to mirror the following functions. Of course, you may change the details of PS1 to your liking; it’s the \$(parse_git_branch)\$(parse_svn_branch) that’s important.

parse_git_branch() { git branch 2> /dev/null | sed -e '/^[^*]/d' -e "s/* $.*$/ (\1$(parse_git_stash))/" } parse_git_stash() { git stash list 2> /dev/null | wc -l | sed -e "s/ *$[0-9]*$/\ \+\1/g" | sed -e "s/ \+0//" } parse_svn_branch() { parse_svn_url | sed -e 's#^'"$(parse_svn_repository_root)"'##g' | awk -F / '{print " ("$1 "/" $2 ")"}' } parse_svn_url() { svn info 2>/dev/null | grep -e '^URL*' | sed -e 's#^URL: *$.*$#\1#g ' } parse_svn_repository_root() { svn info 2>/dev/null | grep -e '^Repository Root:*' | sed -e 's#^Repository Root: *$.*$#\1\/#g ' } export PS1="[\u \w\$(parse_git_branch)\$(parse_svn_branch)]: "

And what you end up with looks like (in this particular case):

[BinaryMuse ~/repo.git/src (FIX-15013 +2)]:

Enjoy!