Nuby on Rails

MacRuby Presentation from RubyFest

topfunky — Sat, 16 May 2009 01:25:29 +0000

On Thursday I presented remotely at RubyFest about MacRuby. I put together a 30 minute video and short demo app.

Download MacRuby Presentation at RubyFest, 46 MB

~~I’m also putting the final tweaks on a MacRuby screencast at PeepCode, prepared by Alex Vollmer with technical review by Laurent Sansonetti. Look for it on Monday!~~

NOTE: The full tutorial screencast is now available here: PeepCode Meet MacRuby

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

PeepCode Grows by One

topfunky — Tue, 07 Apr 2009 17:32:25 +0000

The first question most people ask me about PeepCode Screencasts is “How many employees do you have?”

Maybe it’s a more polite way of asking “What was your gross revenue for the most recent fiscal quarter?” At any rate, I now have something to tell them.

Figure A Dan Benjamin

Two weeks ago, I started a collaboration with Dan Benjamin. He will be working half time at PeepCode, hopefully moving to full time in the near future.

Dan has made a name for himself many times over. He developed the CMS for A List Apart, the authoritative online magazine for people who make websites. He developed and sold Corkd, a social wine review website. And he’s a perfect fit for PeepCode, given his multimedia and business experience starting The Talk Show with John Gruber and the Tack Sharp podcast with James Duncan Davidson. He also runs a popular blog at Hivelogic.

Dan is one of the most connected people I know, and I wouldn’t be surprised if he is only two degrees away from Kevin Bacon. So I’m especially flattered that he wanted to work with me. However, he is available for part-time consulting in the meantime, so contact him now if you want to work with him while he’s still on the market.

April Sale!

What does this mean for PeepCode? New ideas. A better workflow. More content!

In two weeks we’ve already refined parts of the PeepCode screencast production workflow that will make it easier to work with other authors and keep the quality top notch.

For you it means an April sale! Get a year of PeepCode for only $129 (save $20). Or get one free credit with a 5 pack.

If you’re an existing Unlimited subscriber, you can renew or extend your subscription at any time for only $109.

Comments are temporarily disabled, but will return.

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

Emacs? Emacs.

topfunky — Sat, 06 Dec 2008 00:34:44 +0000

And with my handheld portable all-purpose lightweight doohickey I fuse thoughts and try not to be too picky. —Buck65

I’m personally offended that you enjoy the software you work with ;)—al3x

Update: Full 60-minute screencast now available at PeepCode!

A few weeks ago I decided to try out Emacs. I wasn’t especially dissatisfied with TextMate but felt that I had neglected to educate myself about a major part of computer science history. Somewhat like a DJ who has never heard Grandmaster Flash (who purportedly invented much of the hardware used to create music with multiple turntables). I felt that I needed to try out one of the classic text editors still used by many today.

My history with text editors over the last 10 years goes something like:

BBEdit
vim (for about 6 months)
Smultron
TextMate

Screencast

I’ve assembled a short screencast of my initial impressions:

Initial Impressions

The Good Stuff

Here’s a short list of what I’m enjoying about it so far:

Efficiently keyboard driven. No need to use the mouse at all.
Window splits for viewing multiple files (and shells) at once.
Powerful editing.
The ease with which one can work with dozens of files without getting confused.
Super customizable.
Easy to keep settings, snippets, plugins, etc. synchronized between desktop and laptop with Git.
Quality plugins from the community.
The aha moment when parts of code make more sense given the fact that Emacs was used by Matz, Ryan Davis, Nathan Weizenbaum, etc. to author them.
That unidentifiable elitist feeling you get from using a tool that’s too difficult or awkward for most people.

The Awkward Bits

No GUI for preferences.
Mac OS X integration is just barely good enough to get by. For example, I can’t get “Hide Others” to work except by using the mouse.
It’s assumed that you’ll do most work from within Emacs itself rather than piping text to it.
Crashes when trying to switch color themes. This may be a problem with the color theme plugin I’m using.
It’s difficult to think about content and files instead of icons and buttons.

Getting Started

Installing, learning, and configuring Emacs is unfortunately not easy. I’m working on a PeepCode screencast with Phil Hagelberg that I hope to finish within the next few weeks. In the meantime, here are some resources I used to get started on Mac OS X:

Install from Git mirror of the source
See the nextstep/INSTALL file for Mac installation instructions.
Phil Hagelberg’s starter kit—Tremendously useful.
My current config—Use at your own risk. Yes, I use a huge font size.

Useful Plugins

yasnippet.el—TextMate-style tab trigger snippets with mirroring, defaults, etc.
textmate.el—Provides tremendously useful keyboard shortcuts for TextMate switchers. I’ve modified it to work with my setup.
magit—Git integration.

And a word from our sponsor

New hot-selling PeepCode Screencast authored by Lars Pind.

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

Not with a bang...

topfunky — Wed, 08 Oct 2008 00:03:33 +0000

This is the way the world ends / Not with a bang but a whimper. —T. S. Eliot

Figure A Anarchaia

BIBERACH, GERMANY—Late last week, Christian Neukirchen’s influential tumbleblog Anarchaia breathed its last.

Anarchaia took the well established blog form and turned it into a multimedia stream of consciousness featuring photographs, poetry, lyrics, and links. Topics ranged from the merely curious to the highly technical. It managed to maintain the same visual theme throughout its lifespan which included a half-dozen posts almost daily.

The term tumblelog was coined in mid-2005 by Why the Lucky Stiff on his RedHanded blog.

Anarchaia also inspired the popular projectionist tumblelog, which launched a few months later. Entire startups were subsequently built around the form.

It is survived by the other Christian Neukirchen projects Rack, test/spec/bacon and his own blog. There are rumors that it has already reincarnated as Trivium.

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

Improve Your Technical Slides

topfunky — Thu, 28 Aug 2008 06:17:45 +0000

I’ve had to rely at times on silence and on talking quick / Defending myself with nothing but my walking stick. —Buck65

Here are nine easy tips that will help you communicate better at your next conference.

Figure A Can you read me now?

Dan Grigsby’s presentation at RubyFringe was an intentional example of this. All the titles were at the top, with humorous stock photos below.

Keep it in the top third, if possible.

Figure B Takahashi-san frowns on your tiny fonts

Giles Bowkett is such an entertaining speaker that people once skipped the first 20 minutes of lunch to hear the remainder of his presentation at RubyFringe (which involved more than 400 slides).

He also used only the typefaces included with Mac OS X, including Futura Condensed Medium and Condensed ExtraBold, which work really well in bright colors on black. So even if you don’t choose to buy a single typeface, you can assemble a great-looking presentation.

Giles Bowkett Videos – Start 5 minutes in to see the slides.

Figure C Working well and looking good

It’s easy with either:

Copy as RTF – A TextMate plugin. You can paste the syntax-highlighted text and even edit it afterward in Keynote.

pygments – A command-line syntax highlighter written in Python. It’s used at GitHub to emit HTML but can also emit RTF from any source file. The resulting rich text can be pasted into Keynote.

pygmentize -f rtf -o out.rtf code.rb

Figure D Stay on target

Choosing just the right transition can soak up a lot of time and adds absolutely nothing to the content that people remember afterward.

Dan Grigsby also noted that transitions and multi-step builds make it difficult to go back and forth in the presentation since you have to wait for the transition to finish. Unless…

Figure E An unforced fumble while trying to backtrack

Useful Keynote shortcuts (while the presentation is playing).

Key	Description
/	Show a list of keyboard shortcuts.
H	Pause the presentation and go to the last used application (useful for demos). Command-tab back to Keynote to resume the presentation.
= or -	Show a thumbnail menu that can be used to jump forward or backward to a specific slide. Use the arrow keys to select and the enter key to jump.
B	Pause and show a black screen.

Figure F The conference wifi WILL fail when you need it most

I love live coding but often it goes awry, creating an awkward situation for both the presenter and the audience.

Give yourself some insurance and either record a short screencast that you can narrate during the presentation, or take screenshots that you can refer to.

Extra Credit!

Figure G Is grey a color?

If you’re speaking at a conference, you’re probably doing it to promote yourself, your projects, or your business. Make it stick in people’s minds by distinguishing yourself with a color scheme and a typeface that communicate the attitude you want to be remembered for.

Choose a color scheme and use it for all your presentations. Ideally, it would be the color scheme of your company or personal blog. If you’ve paid for a corporate identity, use it!

Resources

Color Burn Widget – A Mac OS X dashboard widget with a new color scheme every day.
ColourLovers.com – Tons of color combinations for every attitude.

Figure H An easy way to stand out

Again, buy a typeface and use it on your blog and in your presentations.

They’re not as expensive as you might think! You can get a single font for $20.

Here are some nice condensed ones as mentioned above:

Or try these shops:

Figure I Free as in not chained to the spacebar

I saved my favorite for the end…

A presentation remote gives you the freedom to step away from the lectern and talk directly to the audience. The remote that comes with Mac laptops doesn’t count! It only works if you have a direct line of sight to the infrared receiver on the front edge of the laptop.

A radio frequency transmitter works much better. The Kensington Presentation Remote can be bought for about $40. It works out of the box without the need to install any drivers, and it’s less distracting than phone-based options.

See you in Berlin!

I’ll be in Berlin at RailsConf starting this Sunday. Find me and get a free PeepCode t-shirt!

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

The Third Seattle.RBBQ

topfunky — Fri, 22 Aug 2008 20:56:46 +0000

Figure A Back yard

For the third year in a row, it’s the Seattle.RBBQ at Geoff’s house in Seattle!

Tuesday, August 26, 7-9 pm.
I’ll provide pizza. Bring any other beverages or food that you want to eat.
Directions and Bus Numbers

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

PeepCode is [No Longer] Looking to Hire a Virtual Assistant

topfunky — Mon, 07 Jul 2008 22:24:23 +0000

UPDATE Thanks for the 40 replies right away! We’ve hired an individual for the position.

Dublin

Figure A Dublin from my hotel window

I had a great time in Dublin at the end of June. I spoke at an open source conference and met several other Rubyists while I was there.

I’ve frequently felt that I should bring home some tchotchke from each of the places I visit. While in Dublin I realized that it’s not extra things that I really want, it’s people!

If you’re traveling for business or pleasure, I highly suggest that you find the local Ruby group or find a local co-working space and meet people there. I had breakfast with Ana Nelson, who introduced me to Paul Campbell of Contrast, who is working on an error reporting webapp for Rails developers.

He introduced me to Eamon Leonard and David Coallier who happen to be a few musically inclined PHP developers. We had a great time exploring the pubs of Dublin, and I learned that Guinness beer has a different taste in Dublin than anywhere else in the world.

Oh, and a few members of Ruby Ireland hosted a nice dinner in the city.

So the next time you find yourself in an unknown city, meet the locals!

Figure B Dublin alley

Figure C Clocks at the Contrast co-working space

Figure D Ruby Ireland meetup

Elsewhere

I just published a new PeepCode screencast about Phusion Passenger (technical editing by Phusion staff).

I’ll be speaking about podcasting and entrepreneurship at BizJam Seattle on Wednesday, July 9.

Jim Freeze wanted me to mention that the Lone Star Ruby Conference is open for registration. I’ll be at RailsConf in Berlin at that time, but I’m sure it will be a great conference if you can get yourself to Texas. I frequently post other worldwide conference and workshop events at Ruby on Rails Workshops.

Also, I’ve helped to launch a Deck-like ad network for Ruby blogs. We have several top quality publishers and have a few spots for advertisers. If you have a product, website, or service that would be of interest to Rubyists, check out Ruby Row.

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

IOTC Open Source Conference in Dublin

topfunky — Thu, 12 Jun 2008 02:30:23 +0000

I truly feel that I have the coolest job in the world.

Two weeks ago, I was asked to speak at the IOTC Conference in Dublin on June 18-20. Not only that, but they will be streaming live video of the event as it happens!

Few conferences record even the audio of their lectures, so I’m not sure how they managed to pull this off. They must be using some of this new open source software that everyone is talking about!

They tell me that you’ll be able to view it via a link that will be posted here, next Thursday at 10:25am Dublin time.

I’ll also be hanging out with members of Ruby Ireland in Dublin on Thursday night.

Then I’ll be hurrying back home to be with my son, who aspires to be the next mini me.

At PeepCode

The ever diligent Ryan Daigle has updated our Rails 2 PDF for Rails 2.1. If you purchased the first copy, you can login or revisit the link originally sent to you for the free update.

If not, now is a great time to buy a copy!

And then…

Also, I just bought by plane ticket for RubyFringe where I’ll attempt to resolve my degree in Philosophy with my current career in computer programming. There are definitely some interesting talks scheduled!

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

RailsConf Suitcase

topfunky — Fri, 23 May 2008 22:57:28 +0000

Figure A Special Edition Silver PeepCode T-Shirt

Some of the things I’ll be bringing to RailsConf 2008 in Portland next week:

Item	Qty	Purpose	Location
PeepCode T-Shirts	45	Free!	Find me!
Mannequin	1	Bodyguard	Heroku booth
Utilikilt	1	↑
Samson Microphones	4	Podcasting	Heroku booth at lunch and afternoon break
Life-size poster of Peter Cooper	2	Why not?	Conference walls
PeepCode Coupons	?	Try it!	Heroku booth

Live Podcast Interviews!

My friends at Heroku have offered me a couch at their booth in the exhibit hall to perform a few podcasts. Come see a Rails Podcast recorded live during lunch and afternoon breaks!

Time	Event
Friday, Lunch	Ryan Singer of 37signals
Friday 3:40	GitHub founders
Saturday, Lunch	Phusion Passenger (mod_rails)
Saturday, 3:40	Adam Keys interviews me

Sessions

I’ll be moderating one panel and attending an evening session.

Time	Event
Friday 2:50pm	The Profitable Programmer
Friday 9-10pm	Podcasting BOF

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

Ask Your Doctor About mod_rails

topfunky — Tue, 20 May 2008 06:36:09 +0000

We need new inventions that reveal people’s true intentions, a portable pride protector, affordable lie detector…—Buck65

UPDATE: You can learn all about Phusion Passenger with the new PeepCode Screencast on the topic.

I was initially skeptical about mod_rails. The developers had the cojones to start promoting it weeks before it was ready, and they managed to generate a lot of hype around it before anyone had used it.

And we all know that hyped products never deliver!

Mostly, I was probably one of those developers described when they said

...we believe that experienced Ruby on Rails developers don’t consider deployment to be a problem; probably annoying at most…

Which is true. I was pretty happy with my current setup of Nginx and Mongrel. My only problem was that Nginx would often fail to create a pid file when the logs were rotated every night.

I still use Nginx and Mongrel at PeepCode, but I’ve switched a few smaller apps on a separate VPS to mod_rails. It turns out that there are many benefits to using mod_rails, both in development and production.

Great for development

It’s easy to ignore the pain of development. I didn’t realize how tedious it was to start and stop Mongrel while in development. It was also the reason I keep so many terminal tabs open at once.

With mod_rails, apps are always ready whenever I need them. If I need to watch the logs, it’s an easy tail -f log/development.log.

I have many pages that access dynamically generated graphs. A single Mongrel would process each serially, which would often take quite a while. With mod_rails, it’s nearly instant since new processes are spawned to handle the extra requests in parallel.

Configuration

I followed Manfred’s article to start using mod_rails in development. Two tweaks were to edit /etc/hosts and to point Apache to a local config file in my home directory.

First, edit /etc/hosts with fake names for the applications you’ll be developing against.

127.0.0.1    localhost peepcode.local podcast.local

Next, in /etc/apache2/httpd.conf, I set the RailsEnv to development and myself to the RailsDefaultUser. I also included a config file in my home directory (stored in source control). This config file includes all my virtual hosts and is the same on both my laptop and my desktop machine.

RailsEnv development
        RailsDefaultUser topfunky
        Include /Users/topfunky/repos/configs/mod_rails_vhosts.conf

The mod_rails_vhosts.conf file has several VirtualHost sections like this:

ServerName podcast.local
        DocumentRoot /Users/topfunky/repos/podcast/public

Easy to debug visual plugins or graphs

Sometimes I need to visually debug code located in plugins or frozen gems. For example, I worked on some enhancements to my sparklines gem while viewing graphs on a reporting page. Normally, this would be impossible since Rails doesn’t reload itself for changes in the vendor directory.

Rstakeout comes to the rescue!

rstakeout "touch tmp/restart.txt" "vendor/**/*"

When I edit a plugin or gem in the vendor directory, mod_rails reloads the whole application and I can see the result immediately.

Rotate Logs

Other production tasks become very easy with mod_rails. Rotating the Rails logs is as easy as touching the restart.txt file.

Here’s /etc/logrotate.d/rails:

/var/www/apps/rubyonrailsworkshops.com/shared/log/production.log {
          daily
          rotate 7
          compress
          missingok
          sharedscripts
          postrotate
            touch /var/www/apps/rubyonrailsworkshops.com/current/tmp/restart.txt
          endscript
        }

Coexist

Many people are sad that mod_rails doesn’t yet support rack. No problem. I just followed Coda Hale’s classic article and am running Merb under Mongrel through Apache, alongside a few mod_rails apps.

Problems

The only initial problem I’ve experienced is that Apache seems to use much more memory than Nginx did. A few days after switching to Apache, the memory usage skyrocketed and killed all my mod_rails apps. I had to restart Apache to get everything back.

Figure A Memory Usage

I’m working on a god config file to keep tabs on everything. Does anyone have a good one yet?

At PeepCode

Scott Chacon recently published a Git Internals PDF that Jamis Buck called required reading for all Git users. He also launched GitCasts.

Mike Mondragon and Luke Francl finished a book on MMS2R. If you’ve ever tried to receive email into a web application, you know it can be quite a pain. MMS2R is a gem that makes it super simple to receive both plain text and multimedia attachments. It’s made me want to write an email-powered application just so I can use the concepts they show in the book!

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

How I Spent My Spring Break

topfunky — Sat, 10 May 2008 00:11:19 +0000

I just realized that it’s been almost two months since I’ve blogged! Some saw the announcement on Twitter, but for the rest, here’s what I’ve been up to:

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

A Three Finger Salute to Git

topfunky — Tue, 11 Mar 2008 21:26:25 +0000

David Letterman often asks: Is this anything? And now I ask you.

Newer MacBook Pros and MacBook Airs can detect trackpad gestures (three finger swipe up, down, left, right).
A new preference pane called MultiClutch makes it easy to call key commands when gestures occur.
ThisService turns command line scripts into services with key commands.

The end result?

Swipe up to git push
Swipe down to git pull
Swipe left to see git status
Others are also possible!

Easy setup

Download my pre-packaged services and drop in Library/Services (local or systemwide…your choice).

Download MultiClutch and set commands for multitouch gestures that call the services.

You can try it at home!

Use ThisService to make a service that calls any shell script or even a Ruby script (start autotest, run rake, etc.).

I used a simple shell script that echoes a command to the Terminal.

#!/bin/sh
        echo "git pull"

Product placement

See the PeepCode Git Screencast to learn how to use Git.

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

About This Blog: Custom Textile

topfunky — Wed, 27 Feb 2008 18:13:27 +0000

When I suggested that you write your own blog software, I had no idea that some people would actually take me seriously!

So here’s another tidbit to help you on your way: custom Textile tags.

The Feature

As a developer, it’s nice to use Textile or Markdown for text entry. Simple tags will be converted to HTML, which will save typing and automatically apply some typographic rules.

Figure A RedCloth 3 Logo

But it can go one step further if you’re using RedCloth. You can subclass RedCloth and add methods that define your own tags. This is a great way to add shortcuts for complicated sets of HTML or inject hooks for CSS and Javascript.

To create Figure A, I used a technique mentioned by Garrett Dimon in a Digital Web article. It involves a div enhanced with a few CSS classes, enclosing a caption and an image. In addition, I have the power to make it small, medium, or large. A more complete solution would even allow for alternate backgrounds and placement.

But that’s a lot to type every time I want to reference a captioned image! Instead, I wrote a custom Textile tag to do it for me.

Usage

Here’s the custom tag I use:

figure(med). RedCloth 3 Logo | redcloth3-title.jpg

Let’s break it down:

figure is the custom tag name. It’s a hook into a textile_figure method in my application’s subclass of RedCloth.
med is a CSS class that will be applied to the div that wraps the figure. This gives me easy control over the size of the figure, and could even be used to pass multiple classes for other effects.
Next comes the caption. I chose to use a pipe as the delimiter between the caption and the image name.
It ends with the name of the image.

In that single line, I have all the information I need to construct a figure. Those 50 characters will result in over 200 characters of HTML. I can also use a few lines of Ruby to assign an auto-incrementing figure letter (“Figure A”) and reuse the caption as an alt tag for the image.

Implementation

First, choose a color for your subclass. CaneSugarBrownCloth? MintJulepGreenCloth? It could take hours.

Next, create a file for your subclass. I put yellow_cloth.rb in the lib directory and required it from environment.rb.

unless RedCloth
          require 'RedCloth'
        end
        class YellowCloth < RedCloth
          # ...

Next, define your custom method. I have a simple ruby tag that applies a CSS class for use with my code highlighter.

def textile_ruby( tag, atts, cite, content )
          # TODO Use the arguments to build some HTML 
          #      and return a string.
        end

The arguments passed in can be reused or ignored.

tag is the name of the tag passed in (ruby in this case).
atts is a pre-assembled string with passed CSS classes, IDs, hard-coded styles, and language identifiers. If you want to augment this, you’ll need to parse the string and append your own CSS classes (I did this for the figure tag).
cite is rarely used.
content This is the actual code, text, or paragraph that follows the tag. In the figure tag, I decided to parse this further and use the elements as the caption and image name.

The figure tag is more complicated.

I add a figure class to any CSS classes passed in. In order to do this, I need to parse the atts and extract existing CSS classes.
I split the content on the pipe and use the elements as the caption and image name. You could prepend a filepath onto the image name if all your images are stored in the same place.
The figure letter is dynamically incremented (Figure A, Figure B, etc.).

def textile_figure(tag, atts, cite, content)
          span_class = "" 
          if atts =~ /class="([^\"]+)"/
            span_class = $1
          end
          (caption, img_url) = content.split("|").map { |w| w.strip! }
          figure_name = "Figure " + @figure_counter.chr
          figure_id   = figure_name.downcase.gsub(" ", "-")
          @figure_counter += 1
          # TODO Construct the HTML
        end

Finally, here’s the code to setup the counter:

def initialize(*args)
          @figure_counter = ?A
          super
        end

To use your new class, you can override the built-in textilize helper or write a before_save callback on your model to convert the text to HTML with your custom subclass.

before_save :textilize_body
        def textilize_body
          self.body_html = YellowCloth.new(self.body).to_html
        end

The entire code can be downloaded: yellow_cloth.rb

Bonus

Figure B Pipe Text

If you use TextMate, you may be aware of the “Show Web Preview” menu item.

It can pipe the text of the current document through its own textile.rb script or through your custom script. I wrote a simple script that uses my subclass instead of RedCloth.

# script/textile.rb
        require 'rubygems'
        require 'yellow_cloth'
        textile = ARGV[0] ? File.read(ARGV[0]) : STDIN.read
        puts YellowCloth.new(textile).to_html

Then use the full path to this script as the argument to ‘Pipe text through’:

/Users/topfunky/repos/funkyblog/script/textile.rb

Product Placement

I’ll be speaking at both RailsConf Portland and RubyFringe.

After many requests, I’m proud to introduce the new PeepCode Unlimited plan that gives you a year of access to all PeepCode content. On sale for only $139 until March 21.

Merb is a great compliment to Rails or a capable web framework in its own right. A draft of the PeepCode PDF on Merb is now available (includes a free upgrade when the final is published in the next few weeks).

PeepCode has been growing quickly and we have a ton of new content in the works. Ryan Daigle’s Rails 2 PDF recently became the best-selling PeepCode product of all time. Cody Fauser’s ActiveMerchant PDF is already being called a must read.

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

Better Reporting with Sparklines

topfunky — Thu, 31 Jan 2008 23:33:04 +0000

Three pens for five dollars, black, red and blue, recommended by scholars. —Buck 65

Two events from January, unrelated but relevant:

I toured the offices of Highgroove Studios and viewed their upcoming Scout reporting tool. They’ve written their graphing tool to allow easy comparisons between any group of measurements on the system, such as hits to their blog vs. new signups to their webapp. Comparing seemingly unrelated datasets often results in unexpected conclusions.
Information design guru Edward Tufte posted a video review of the iPhone. One of his widget-related suggestions was to include sparklines to show months of history instead of just a single number.

A third event preceding either of these was a redesign of my internal reporting page to use sparklines extensively.

The Problem

Previously, I used Gruff to generate one or two 400×300px graphs to show a few important metrics. But it kept bugging me that I had all kinds of information in the database that I couldn’t visualize.

Figure A A big, data-thin graph.

I like to use a single reporting page with as much information as possible. I also want to be able to apply a different stylesheet and view these pages on my iPhone or a laptop with a small screen.

The problem with large graphs is that adding more of them means occupying a lot more space on the page. Having a bunch of large graphs makes it hard to get a quick idea of where things are at.

Books such as Information Dashboard Design observe the fact that graphs are best at showing general trends, not specific numbers. Tables are great at showing specific numbers, but not general trends. So why not omit all the labeling and just focus on the graphic?

So I scrapped all the labeled, numbered, scaled graphs and replaced them with purely graphical sparklines that each show about three months of data in 300×30px. When I need to know the exact numbers, I can look at a nearby table that lists the data for the current day or the past week.

Go Small

I started with a graph of the number of dynamic hits to the site, as reported by the Rails analyzer and stored in the database.

Figure B Two months of daily dynamic hits.

This isn’t very useful alone. The graph isn’t scaled from zero, so it’s impossible to make specific conclusions. But it is valuable for finding out about relative changes from day to day.

I also added a white line as a target value for comparison. Specific numbers aren’t relevant, but I can tell whether or not I’ve hit the target for the day.

Where it really starts to get interesting is when you add other values to compare to.

Figure C Three months of product releases.

Here’s a whisker graph marking the days when products were released. Today is on the far right. You can see a few correlations between product releases and the number of hits to the site. The conclusion may be obvious (product releases result in hits to the site), but now the graph of hits makes a little more sense. A few recent traffic spikes on the right side can be explained by a corresponding product release.

Next, I added a graph of overall daily performance.

Figure D Two months of overall performance.

Performance is pretty steady except for some recent fluctuations. This statistic isn’t too meaningful since it goes all the way from the delivery of action cached pages to slower pages that call remote APIs.

In order to track a specific page, I added another sparkline.

Figure E Products#show action performance.

Many more could be added: daily revenue, user signups, coupon redemptions, referrers from a specific site, downloads.

Putting these all together, I get a graph that is about half as tall as the single graph shown at the beginning, but shows several hundred numbers.

Figure F Combined

They can be stacked on a web page, viewed on an iPhone, and compared easily.

Tips

In order to make the most of stacked sparklines, I’ve found it helpful to:

Use a similar horizontal scale
Add a text label
Cache when possible

To get you started, here’s some sample code.

Make a controller that will render the graphics. Include an image_tag in your view that calls the controller.

<%= image_tag(formatted_graph_url('hits_by_day_past_three_months', :format => 'png')) %>

I like to use the show action and check params[:id] for the name of a recognized report (/graphs/hits_by_day_past_three_months.png). And of course, add a before_filter to restrict access!

Most graphs will have similar options, so I wrote a method that returns a hash of default options.

def default_sparkline_options
          {
            :background_color => 'transparent',
            :step             => 3,
            :height           => 30,
            :line_color       => "#6699cc",
            :underneath_color => "#ebf3f6",
          }
        end

Another method generates the graph and caches the binary result in memcached for an hour.

def hits_by_day_past_three_months
          graph = Cache.get("Sparklines:hits_by_day_past_three_months", 1.hour) {
            records = LogAnalysisRequestTime.find_recent_by_resource("All")
            data    = records.map { |r| r.quantity.to_f  }
            graph   = Sparklines.plot_to_image data, default_sparkline_options.merge({
              :target => 1_000_000
            })
            annotate(graph, "Daily Dynamic Hits")
            graph = graph.to_blob
          }
          send_data graph, :type => "image/png", :disposition => "inline" 
        end

The annotate method adds a white box and label to the bottom of the sparkline, using a pixel font.

Two things confused me at first:

The data is displayed with the newest items at the right, but only shows the most recent three months. So the SQL query needs to sort DESC but use Ruby to reverse the results.
The production_log_analyzer reports the fraction of a second that it took to serve a request, but I like to view the data as requests per second. So I wrote a method in the model to invert the performance values (1/seconds_per_request).

Resources

Sparklines
Tidy Table gem
Pixel fonts
Book: Information Dashboard Design by Stephen Few.
Book: Show Me the Numbers also by Stephen Few.
Book: Beautiful Evidence by Edward Tufte.

Recently Published at PeepCode

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

Rails Podcast Road Trip to San Francisco

topfunky — Wed, 09 Jan 2008 18:26:39 +0000

I’ll be in San Francisco next week (January 15-18)! I have quite a few interviews planned for the Rails Podcast and apparently there’s a computer conference going on, too.

I’m planning to be at Osha Thai, 149 2nd St (map) on Tuesday night at about 7pm. If you’re in the area, I’d love to see you there!

PeepCode Screencasts – Learn Ruby on Rails and Javascript! Hour-long screencasts for $9.

Nuby on Rails

MacRuby Presentation from RubyFest

PeepCode Grows by One

April Sale!

Emacs? Emacs.

Screencast

Initial Impressions

The Good Stuff

The Awkward Bits

Getting Started

Useful Plugins

See Also

And a word from our sponsor

Not with a bang...

Improve Your Technical Slides

Extra Credit!

Resources

See you in Berlin!

The Third Seattle.RBBQ

PeepCode is [No Longer] Looking to Hire a Virtual Assistant

Dublin

Elsewhere

IOTC Open Source Conference in Dublin

At PeepCode

And then…

RailsConf Suitcase

Live Podcast Interviews!

Sessions

Ask Your Doctor About mod_rails

Great for development

Configuration

Easy to debug visual plugins or graphs

Rotate Logs

Coexist

Problems

At PeepCode

How I Spent My Spring Break

A Three Finger Salute to Git

Easy setup

You can try it at home!

Product placement

About This Blog: Custom Textile

The Feature

Usage

Implementation

Bonus

Product Placement

Better Reporting with Sparklines

The Problem

Go Small

Tips

Resources

Recently Published at PeepCode

Rails Podcast Road Trip to San Francisco