Free PeepCode Blog

Geek Crushes

Tue Feb 14 23:00:00 +0000 2012

This article is heavily styled and is best viewed at PeepCode!

Dear Christian Neukirchen,

The first time I saw you, I was too shy to talk to you. Then you taught me how to use zsh. Now I use it every day.

One would think that the author of products used by millions of people would get some respect (the tumblelog and Rack). But most developers don’t even know your name, much less pronounce it correctly.

You promote your open source software as loudly as a ninja traverses a busy street. You launch your ideas silently and wait a few years for people to realize their brilliance.

I think about you every time I type rackup config.ru.

Geekily Yours,
Geoffrey Grosenbach

Send To:

Dear Jeremy Ashkenas,

An athlete with as many successes as you’ve had would be checked for performance enhancing drugs.

Backbone.js, CoffeeScript, Jammit, Docco, The Shoebox. The list goes on.

You’re doing real work that’s changing the world.

Keep on.

Indenting daily,
Geoffrey Grosenbach

Send To:

Dear Reginald Braithwaite,

I’m glad you didn’t get the notice that tech geeks don’t blog anymore.

Half the stuff you talk about confuses me. What the hell is a K-combinator? I have no idea but now I’m going to find out.

And then I find out that you do my favorite sport. Rock on.

XOXOX,
Geoffrey Grosenbach

Send To:

Dear Blake Mizerany,

It takes a true visionary to make simple tools that can do everything.

Maybe even more impressive than the individual success of Sinatra is that it’s always the first to be implemented in every other language that sprouts up.

But that didn’t stop you from building other mind-bending tools that most other developers wouldn’t even attempt. In a language you learned for the first time while writing it.

Here’s to you,
Geoffrey Grosenbach

Send To:

Dear Elise Worthy,

Most people would give up after trying to learn something for a few weeks. You’ve kept on with programming for several years and are getting better at it all the time.

Yet you’re an incredible teacher too. And working with you has irrevocably changed the way I think about business.

Best of luck at Living Social,
Geoffrey Grosenbach

Send To:

My Command Line Prompt

Thu Jan 05 21:00:00 +0000 2012

This article is heavily styled and is best viewed at PeepCode!

by Geoffrey Grosenbach & Paula Lavalle

Current Path
More

Last Command Status
More

Uncommitted Git Changes
More

RVM Config
More

Git Branch
More

Advanced Git!

One hour video.
Only ^$12! More Info…

Your Command Line Dashboard

In 10 years you’ll probably be writing code in a different language, building web apps with a different framework, and wearing a different pair of underwear.

But the command line prompt you use today could still be serving you well.

Many of the elements of my command prompt were snitched from other developers (Christian Neukirchen, Pat Allan, and Ben Hoskings). Here are my goals for my command prompt.

Goals

Fast: If I can tell there’s a pause when I open a window or change directories, it’s too slow.
Terse: Only show information that will change frequently between projects or between commands. If I always used the same version of Ruby, I would probably remove the Ruby version from my prompt.
Mine: I don’t hesitate to customize a script that I copied from someone else. The prompt is not the place to worry about reusable or generalized code. It should be easy to read and change when I need to.

Why ZSH?

I switched to zsh after receiving a one-on-one tutorial from Christian Neukirchen. It has some nice features:

Separate prompt for the right and left side of the screen.
Inline completion of directories, Git branch names, Rake task names, etc.
Easy loop syntax: for f (`ls`) echo $f

Try the source to a simple version of my prompt on GitHub. Or read the explanation below and build your own.

Implementation

Setup

The following configuration directives should be in ~/.zshrc. See the full source for the complete setup.

Run these commands to load zsh’s color variables. You’ll be able to use readable values like $fg[black] instead of cryptic ones like \e[0m.

# Colors
autoload -U colors
colors
setopt prompt_subst

Last Command Status

I first saw this technique in Pat Allan’s shell. If the last command exited with a nonzero value, it will print a red Unicode frown: ☹. Successful commands will show a green smiley: ☺

It’s a nice way to quickly see if tests failed or a compilation aborted.

And you’re not limited to ASCII! Use the Unicode snowman, a skull and crossbones, or any other dingbats character.

# Save a smiley to a local variable if the last command exited with success.
local smiley="%(?,%{$fg[green]%}☺%{$reset_color%},%{$fg[red]%}☹%{$reset_color%})"

Current Path

On my local machine I want to show only what’s necessary. So I don’t show the current user, hostname, or anything other than the relative path that I’m currently in.

In zsh, that’s %~.

Assign it to PROMPT to set the left-hand part of the prompt. It occupies two lines: the path is on one line and the previously saved smiley is on the next. $reset_color is a zsh variable that restores your default text color.

# Show the relative path on one line, then the smiley.
PROMPT='
%~
${smiley}  %{$reset_color%}'

Git Branch, SHA & Dirty Status

It’s surprisingly difficult to get Git to tell you what branch it’s on. I’ve tried several scripts, including the multi-SCM vcprompt (which worked well).

My current favorite is a Ruby script that prints all kinds of useful information about your Git setup:

Current branch name
The current SHA (7 characters of it). Useful for anytime you need to get out of trouble with git reset --hard. See the PeepCode Advanced Git video for this and other Git tips.
Rebase status (to know if you’re in the middle of a rebase)
Dirty status Have any tracked files been edited? A Unicode ✗ is displayed if changes have been made but not committed.

The original script is from Ben Hoskings(requires Ruby 1.9). I edited it to work on Ruby 1.8 and used a brief git-current-branch script (source). The relevant edit is on the last three lines where it specifies a format and colors for the final display.

RPROMPT='%{$fg[white]%} $(~/.rvm/bin/rvm-prompt)$(~/bin/git-cwd-info.rb)%{$reset_color%}'

I chose to make the more important metadata stand out more. The Git branch name and dirty status are more important to me than the Ruby version or the current SHA, so they are a darker shade of grey. Ben uses an @ sign before the SHA, but I replaced it with whitespace.

Ruby & Git metadata.

RVM Config

The name of the current Ruby version as configured by RVM is actually in the previous snippet. It calls ~/.rvm/bin/rvm-prompt and displays it at the left side of the right hand prompt.

Put it Together

The combined prompt looks like this.

# Combined left and right prompt configuration.
local smiley="%(?,%{$fg[green]%}☺%{$reset_color%},%{$fg[red]%}☹%{$reset_color%})"

PROMPT='
%~
${smiley}  %{$reset_color%}'

RPROMPT='%{$fg[white]%} $(~/.rvm/bin/rvm-prompt)$(~/bin/git-cwd-info.rb)%{$reset_color%}'

The important thing is to customize your own prompt and make it work the way you want it to!

Learn the command line, Git, and other great stuff!

Check out our Meet the Command Line and Advanced Command Line screencasts, plus our newest Advanced Git tutorial.

Command Line

Get started.
Only ^$12! More Info…

Adv Command

Master it.
Only ^$12! More Info…

Advanced Git

One hour video.
Only ^$12! More Info…

Geek Gift Guide 2011

Tue Dec 13 21:00:00 +0000 2011

This article is heavily styled and is best viewed at PeepCode!

We’ve all seen the geek gift guides put out by major publications. Somehow all geeks, regardless of their connection to technology, like star wars legos, rubix cubes, and light-up keychains. Seriously? Not here. Not us.

Many geeks appreciate well-designed, thoughtful products. We know this because it’s our bottom line. So here’s our gift guide for classy geeks.

Filter:

All ^$1–20 ^$20–60 ^$60–100 ^$100–200 ^$200–800

Gifts from ^$1-20

Single PeepCode Gift Card

^$12 A single screencast for your developer friends or that up-and-coming youngster in your family who wants to get started with programming.

The IT Crowd, Season 1

^$10 Unfortunately, this is about stereotypical nerds. Fortunately, it’s awesomely hilarious.

Worther Shorty Mechanical Pencil

^$14 Writing is much more fun with a beautiful pencil. Available in black, grey, or yellow.

Field Notes

^$10 Now that smartphones have abandoned the stylus, there's nothing like paper and pen for brainstorming. Whether your field is a coffee shop or a bus, Field Notes are convenient and stylish.

The Wisdom of Crowds

^$11 Both a classic and a quick read, this entertaining book is for entrepreneurs, sociologists, and deep thinkers of all kinds.

Milo

^$15 An elegant stand for any smartphone with a smooth, hard surface.

Branch Earphone Splitter

^$10 Split your music between three people. Useful for those cramped international plane flights to the next tech conference.

Whisky Stones

^$20 These bad boys will keep your whisky chilled without watering it down? Oh, buddy.

How to Booze

^$20 Exquisite Cocktails and other Unsound Advice humorously suggests matching beverages for any social situation.

Gifts from ^$20-60

5-Pack Gift Card

^$55 Give five screencasts to anyone, redeemable at any time.

CoffeeScript T-Shirt

^$26 For that friend who loves CoffeeScript, or even just coffee.

Chris Wanstrath T-Shirt

^$26 This one's a bit niche, but that's what makes the best gifts, right? A t-shirt featuring Chris Wanstrath, co-founder of GitHub.

PowerCup Mobile Inverter

^$26 Until Apple makes a power adapter for your car, this is the best way to stay energized on the road.

Juice Pack Reserver

^$35 We don't mind a keychain when it's this useful! Carry an extra charge for your portable Apple products.

UBoard Smart

^$49 Keeping your desk orderly isn't quite as important as having a place for your phone, coffee, tea, and three USB devices.

MOSHI MOSHI Pop Black

^$40 Make those serious business calls even more official. Also available in red, pink, green, and yellow.

Braid Wood Puzzle

^$34 A brain teaser in 6 or 12 pieces.

Pig's Nose 5 Year Scotch

^$44 Not all scotch has to be serious. Recommended by our marketing department.

Gifts from ^$60-100

10-Pack Gift Card

^$99 This gift won't collect dust in the bottom drawer!

Wood iPad 2 Case

^$79 Nothing goes together like machined aluminum and solid wood.

Four Scrabble Letter Pillows

^$98 With letters in solid black felt.

Gifts from ^$100-200

Unlimited Subscription Gift Card

^$199 This one will keep a friend or family member occupied (and maybe even employed) until next year!

Tetris L-Shape Pouch

^$165 "Extremely supple leather" and "lined in red velvet" should be all you need to know.

To:Ca Wood LED Clock

^$150 A natural contrast to all the stainless steel, titanium, and adamantium in your home.

Gifts from ^$200-800

Revo Renaissance Radio

^$357 The ceiling of the Sistine Chapel may have turned out differently if Michaelangelo had access to thousands of Internet radio stations (plus a docking port).

Bowers & Wilkins P5 Headphones

^$300 Soft and cushy on the ears, tiny for travel, beautiful looking, and noise isolating. Yes, yes, and yes.

Link LED Task Lamp

^$350 Move this guy anywhere. With 360° swivel, 15 high-power LED lights, and only 7.5 watts.

Espresso Machine with Integrated Grinder

^$800 Run it on automatic for a cup in the morning and graduate to manual for an evening sip. An integrated grinder means maximum flavor every time.

Free Ryan Singer UI Sketching Video

Thu Oct 06 23:00:00 +0000 2011

This article is heavily styled and is best viewed at PeepCode!

Front-end Prototyping

When we started the Play by Play series, we wanted not only to learn how skilled back-end developers work, but also how front-end developers get work done.

Ryan Singer of 37signals was at the top of our list and he certainly delivered. We did an hour of sketching and an hour of prototyping with HTML and CSS (and even a bit of Rails 3.1).

Ryan’s process is an incredible mix of back-end theory (such as test-driven development) and front-end utility (sketching and prototyping). It has already changed the way we do things at PeepCode and we think you’ll like it too.

View a free ten minutes from the sketching session in the video above.

production by Geoffrey Grosenbach & Paula Lavalle

My Avatar

Wed Jul 06 00:00:00 +0000 2011

This article is heavily styled and is best viewed at PeepCode!

by Geoffrey Grosenbach & Paula Lavalle

The Hooligan

In 2004 I worked at a grade school that hosted a highly anticipated field day every year. I decided to paint my face with my team’s flag for that year: South Africa.

For the next few weeks, kindergarteners told me they had nightmares because of it.

The following year, I coached the team representing the USA. I carefully painted a flag on my face, only later to realize that I had put the stars on the wrong side (damn mirrors!). Fortunately no one noticed since I had started a trend. Almost every kid arrived with some kind of paint splashed on their face: stars, hearts, stripes, camouflage.

I used a photo from that day as my avatar for the next few years, but I managed to lose the original. Instead of adopting an entirely new avatar, I decided it was time to recreate it…but better.

A studio flash, a digital SLR, and some face crayons solved the problem. I’m now the owner of what may be the world’s first studio photograph taken purely for the purpose of being displayed at 48×48 on Twitter, Facebook, GitHub, and other services.

People frequently tell me “You look nothing like your avatar.” Hopefully that’s a little less true now.

Geoffrey Grosenbach (@topfunky)

CSS Masks

In order to achieve excruciatingly crisp curves around the images, we used CSS masks with SVG paths.

24-bit PNG images can be saved with transparency without the need for masks, but JPG photos can’t. Using a compressed JPG image with a CSS mask gives you the best of both worlds.

Webkit

Webkit’s masking is more full-featured than Firefox (see notes below). It can use SVG files straight from Adobe Illustrator and can stretch masks dynamically.

The HTML markup references square images (seen at left). A circular mask is applied. The result is an image that is opaque in the black parts of the mask and transparent in the other parts.

An element can be masked directly, or an outer element can mask all the elements inside it.

<li>
  <img src="face.jpg" />
</li>

In Adobe Illustrator or another graphics application, draw a black shape and “Save As” SVG. You can use it directly in Webkit with no further modification.

Use the -webkit-mask-box-image directive in CSS to specify the path to the SVG file. We found it easiest to use the stretch option to expand the mask to fill the area covered by the element being masked. This also works better for animation since the mask grows as the image is resized.

li {
  -webkit-mask-box-image: url(mask.svg) 0 stretch;
}

Firefox

Firefox needs a slightly different SVG file and can’t stretch the mask.

Make a copy of the SVG file you used with Webkit. Open it in a text editor. Modify it to include a mask element around the drawing directives. The mask element should have an id so you can refer to it in the next step (we used avatar-mask).

<!-- Note: Simplified for educational purposes.  -->
<svg>
  <mask id="avatar-mask">
    <circle cx="100" cy="100" r="100" fill="white" />
  </mask>
</svg>

You also need to specify fill="white" for the drawing directives (such as the circle above).

Add a line to your CSS. Ask for a mask and include the URL of the Firefox mask file. Append the id of the mask element (avatar-mask in this example).

li {
  -webkit-mask-box-image: url(mask.svg) 0 stretch;
  /* Non-Webkit browsers */
  mask: url(mask-firefox.svg#avatar-mask);
}

Because Firefox masks won’t stretch with the element, we made a larger mask for the big version of the avatar. It makes the animation less elegant than the Webkit version, but it looks the same once the animation has completed.

CSS Animation

We started out thinking that we would need to use jQuery or Scriptaculous to animate the circles into the center when clicked. It turns out that CSS animations are supported in most modern browsers and make the code much easier.

CoffeeScript

Now that we know it, why not use CoffeeScript? We used it with jQuery to listen for a click on any of the images and add a CSS class. The class repositions the item to the center and makes it larger.

jQuery ->
  $('#circles li').click (event) ->
    $('#circles li').removeClass 'bigun'
    $(@).addClass 'bigun'

Animation

Until two days ago, we thought CSS animation was a complicated system that would take weeks to figure out.

Animating it only took two lines.

li {
  -webkit-transition-property: all;
  -webkit-transition-duration: 1s;
}

The easiest way is to specify all properties. When you add a CSS class to an element, all the new properties will animate. Otherwise, you can use a comma-delimited list of only the properties you want to animate: opacity,left,right, etc.

You can also add the same directives for Firefox and Opera:

li {
  /* Webkit */
  -webkit-transition-property: all;
  -webkit-transition-duration: 1s;

  /* Firefox */
  -moz-transition-property: all;
  -moz-transition-duration: 1s;

  /* Opera */
  -o-transition-property: all;
  -o-transition-duration: 1s;
}

Other

Sass was instrumental in positioning the list items in a circular pattern. After calculating everything, we were able to change the radius of the hexagon and even the sizes of the circles until they fit.

li#circle1
  top: $cy - $hexagon_radius*0.866 - $radius
  left: $cx + $hexagon_radius/2 - $radius

Oh, and some photographs. We fitted a Nikon D7000 camera with a 50mm lens and hooked it to an inexpensive studio strobe and umbrella from AlienBees.

And of course, some face paint!

CoffeeScript in Motion

Thu May 19 18:00:00 +0000 2011

This article is heavily styled and is best viewed at PeepCode!

In Motion

Learn it!

One hour video.
Only ^$12! More Info…

COFFEESCRIPT:

jQuery ->
  $('#entry').focus()

JAVASCRIPT:

jQuery(function () { 
  $('#entry').focus();
});

1. A simple function

Engineering + Creativity

In his book Rise of the Creative Class, Richard Florida defines a list of creative professions that includes graphic designers, sculptors, architects, and…software writers.

It’s hard to think of a better place to see creativity and engineering than in CoffeeScript, a little language that compiles to JavaScript.

CoffeeScript is beautiful. It’s sensibly designed around syntactic indentation. It adds useful features to JavaScript. Most importantly, it’s a very thin layer over JavaScript. For any line of CoffeeScript, one can easily predict the line of JavaScript that the compiler will emit.

CoffeeScript invents some good ideas and steals many others. The number one source I could identify for the most useful ideas in CoffeeScript? Perl.

Yes, Perl. The language that’s guaranteed to produce an audible gasp if mentioned in civilized programming circles today. Yet for ten solid years, Perl was a petri dish of syntactic innovation. Extended regular expressions, destructuring assignment.

Which is why it’s exciting to see syntactic experimentation happening with such vigor in CoffeeScript.

In these video snippets, you’ll see how JavaScript and CoffeeScript compare.

— Geoffrey Grosenbach

Design & Motion Graphics by Paula Lavalle

2. Jasmine’s ‘describe’ function with args

COFFEESCRIPT:

describe "constructor", ->

JAVASCRIPT:

describe("constructor", function () {

});

3. The @ syntax for instance properties

COFFEESCRIPT:

beforeEach ->
  @dish = new Dish 'Steak $18.99'

JAVASCRIPT:

beforeEach(function () {
  this.dish = new Dish('Steak $18.99');
});

“Everybody shows off
And wants to look presentable
But the fact of the matter
Is that accidents are preventable.” — Buck 65

4. An instance method

COFFEESCRIPT:

add: (dish) ->
  @dishes.push dish

JAVASCRIPT:

Meal.prototype.add = function(dish) {
  this.dishes.push(dish);
};

5. A full class with constructor

COFFEESCRIPT:

class Money
  constructor: (rawString) ->
    @cents = @parseCents rawString

JAVASCRIPT:

Money = (function() {
  function Money(rawString) {
    this.cents = this.parseCents(rawString);
  }
  return Money;
})();

6. Object literal

COFFEESCRIPT:

toJSON: ->
  title: @title
  price: @price.toString()

JAVASCRIPT:

function toJSON() {
  return {
    title: this.title,
    price: this.price.toString()
  };
}

Intrigued? Buy the 75 minute video at PeepCode!

R.I.P. Ruby Hash Rocket Syntax 1993-2010

Wed Jan 05 22:00:00 +0000 2011

This article is heavily styled and is best viewed at PeepCode!

The hash rocket is dead. In Ruby 1.9, hashes whose keys are symbols can be built with a single colon.

{
  key: "value",
  dr_nic: "The Comedian",
  ttl: 42
}

No longer will you need to remember different syntax when switching between JavaScript and Ruby (or even Python!). And you’ll save at least three characters every time.

It’s one more reason to start using Ruby 1.9!

Please update your code accordingly.

Learn more about Ruby 1.9 at PeepCode.

Inspiration from the opening panels of The Watchmen.

Comment on this post at Hacker News.

Happy Holidays from PeepCode

Thu Dec 23 01:00:00 +0000 2010

This article is heavily styled and is best viewed at PeepCode!

Thanks for making 2010 the biggest year yet at PeepCode!

We’re excited about keeping you informed and on top of your game. We’ve got big plans for 2011!

Rethinking Rails 3 Controllers and Routes

Wed Jun 02 16:00:00 +0000 2010

This article is heavily styled and is best viewed at PeepCode!

DISCLAIMER: Reg Braithwaite delivered this quote in a completely different context¹, but I think it’s applicable to the design of almost any software API. Illustration by Mike Rohde.

The Rails router has been written and rewritten at least four times², including a recent rewrite for the upcoming Rails 3. The syntax is now more concise.

But never mind making it shorter! It’s time for a final rewrite: Let’s get rid of it altogether!

Let’s get rid of the seven controller actions: index, show, new, create, edit, update and delete. Their meaning is blurred in the context of REST. They’re an unhelpful layer between programmer and protocol.

Let’s get rid of the trivial but cumbersome mental translation you have to do everytime you want to think about the HTTP GET method, the URL, the index action, and the plural_path URL helper.

Let’s get rid of duplicate functionality already implemented in the controller. If you need to redirect, take action based on the user agent, or examine headers, that should be done in a controller!

And let’s start thinking in URLs, resources, and APIs instead of doing image caching in models or asset bundling in view helpers. That’s the controller’s job. It scales better, too.

Routes are unnecessary configuration.
The seven standard controller actions are legacy.
Become intimate with your URLs – don’t abstract them away.
Decrease the distance between thought and implementation.
Let the controller do its job.

Get Back to Thinking in URLs

A big part of the problem with a routing layer is that it abstracts the developer away from the URLs that define the application. This leads to poor API designs and convoluted solutions to otherwise easy problems.

This epiphany came while writing a few Sinatra applications. The exact URL for a handler sits right in front of my eyes as I write the code for it. I can’t ignore it.

As a result, I find myself spending more time thinking about how my URLs are designed. Should I be serving JSON from the same controller that serves the HTML interface, or should it be organized separately?

In contrast, you can write an entire Rails application without ever looking at a URL. The design of URLs is delegated to the framework, out of sight and out of mind.

This isn’t to say that we need to lose the good parts of how Rails works with URLs. URL helper methods like pancake_path(:id) are a great idea for reducing duplication and typos. They could be implemented apart from any router.

“I love URLs. I dream about them at night. I think about them before I think about anything else.” — Adrian Holovaty, co-creator of Django

* From Webstock 2009

Retire the Seven Action Names

It has been three years since the seven controller actions had any immediate meaning. The API no longer adds to the programmer’s understanding of the tasks at hand.

Experienced programmers know that inline comments mark code that’s too confusing or too clever.

Yet every Rails controller is generated with two lines of repetitive comments for every action. That’s a code smell! And a failure of API design.

Every Rails developer must memorize the table at right, mapping HTTP method and URL to the controller action name. If we can get rid of the action name, the rest of the table is already self-explanatory.

So instead of going through this extra syntactical layer, let’s deal directly with GET, POST, PUT, and DELETE. (Suggestions follow.)

You can tell this is a great idea because it’s the way unit tests already work! Let’s bring this syntax back to the controller and complete the API.

Method	URL	Action	Helper
GET	/pancakes	index	pancakes_path
GET	/pancakes/:id	show	pancake_path(:id)
GET	/pancakes/new	new	new_pancake_path
POST	/pancakes	create	pancakes_path
GET	/pancakes/:id/edit	edit	edit_pancake_path(:id)
PUT	/pancakes/:id	update	pancake_path(:id)
DELETE	/pancakes/:id	destroy	pancake_path(:id)

controller-comments.rb

# GET /pancakes
# GET /pancakes.xml
def index
end

# POST /pancakes
# POST /pancakes.xml
def create
end

test-with-http-method.rb

test "should create pancake" do
  post :create
  assert_redirected_to pancake_path(1)
end

Assets Are Resources

Thinking in URLs helps you solve web-related problems in the right way.

Exhibit A: If you deploy to a site whose view fragments are already cached in memcached, it’s likely that Rails’ asset caching view helpers will not be called and CSS bundles will not be generated.

# Caching shouldn't happen here
stylesheet_link_tag("a", "b", "c",
                    :cache => true)

This whole problem is easily solved by using controllers to do what they do best. Views and helpers should not generate URL-based resources.

The task of combining several CSS files into one file and caching them to disk is exactly the kind of task controllers are built to do³.

Controllers should generate and cache assets, not view helpers.

Idea 1: Sinatra

There are many ways the controller API could be improved. Existing attempts have failed to achieve wide adoption because they have tried to handle controllers, views, and models all at once⁴.

Instead, I think a more limited, controller-only approach could work better.

The first is already in wide use: Sinatra.

# Sinatra-style handler
get "/api/v1/report/:id" do |id|
  # ...
end

Sinatra is arguably the most widely replicated Ruby web framework, having inspired implementations in Node.js, Clojure, PHP, Scala, and many other languages.

Part of the problem with writing a routing API is finding a way to describe multiple URLs in a single string. This problem is solved if you handle each URL on its own.

There’s no middle routing layer with arbitrary action names. HTTP method and URL are all you need (but handlers can filter on the user agent or other header information).

Thanks to Rack, Sinatra apps can be embedded in Rails applications. Or, Carl Lerche is writing a Rails 3 plugin that provides this syntax to Rails controllers⁵.

Idea 2: Method, Member, Collection

Jamis Buck introduced an implementation of REST as a plugin four years ago. Yet unlike other areas of Rails that have seen massive improvements, Rails’ implementation of REST is basically the same as it was in Rails 1.2.

A halfway approach could combine elements of the Rails 3 router syntax with the class method style of configuration that’s already familiar to Rails developers.

# Class method and HTTP-style methods.
class ReportsController < AppController
  before_filter :authenticate
  resource "/api/v1/reports(/:id)"

  get(:collection) do
  end

  get(:member) do |id|
  end

  put(:member) do |id|
  end

end

Variations on this syntax could easily accomodate nested resources, singleton resources, or other custom URL schemes.

Conclusion

For several years, Rails has charged forward and defined new, innovative syntaxes for writing web applications. It’s time for it to happen again.

An improved syntax could get rid of stale controller actions, reduce confusion, reduce duplication, and improve the way we think about solving technical problems with web applications.

Reactions

Thanks to Reg Braithwaite and Ben Hoskings for feedback on this article.

Ben Hoskings said

I think the mere fact that a controller can be generated means that code shouldn’t be there. There’s no intelligence in code that can be generated from a single resource name.

I think it’s doubly important because once you free the controller from having to implement the specifics of each action (like models doesn’t have to implement the specifics of #save), you have a lot more room to raise the abstraction level and start getting declarative.

I think making the controller more declarative is probably the end goal. Instead of the bulk of each action being an imperative mess, the controller can be heavier on the class-level configuration that’s really proven itself in the model (associations, scopes, plugin configuration, etc.).

The provides class-level configuration directive in Merb/Rails 3 is a signal that controllers can head in this direction.

Kyle Neath gives several useful guidelines in detail for thinking about URL design.

Thoughts and reactions? Reply to @topfunky on Twitter, write a blog post of your own, or comment at Hacker News.

¹ Video of Reg Braithwaite at RubyFringe. Quote is about 15:30 in.

² The original version by David Heinemeier Hansson, then by Ulysses, then by Koz and Jamis Buck (together), and most recently by Yehuda Katz, Josh Peek, and the Rails 3 team.

³ Sample controller code. Versioning and expiration of assets are easily solved by storing a version number in the application and appending it to the link tag.

⁴ See hammock by Ben Hoskings, make_resourceful by Hampton Catlin and resource_controller by James Golick.

⁵ Carl Lerche’s Astaire plugin.

Am I the Only One Who Uses a Text Editor to Edit Files?

Thu Mar 25 12:00:00 +0000 2010

This article is heavily styled and is best viewed at PeepCode!

Files should be navigable by file, class, or method name and show metadata useful for distinguishing between similar files (mockup).

If I had no experience with computers and were to guess which group of people had the best software tools to do their job, I would guess “computer programmers.”

And if I were to guess what task would have been extensively optimized, I would guess “opening files.”

If you are a programmer, you know that I would be wrong.

Last summer, Dave Peck wrote about his hopes for a modern, progressive, text editor.¹ I’d like to focus on one missing feature that’s absolutely possible today: powerful file navigation.

Keyboard

Perform any navigation task without touching the mouse.

Fuzzy Search

Find files by typing only a few letters.

Paths

Search includes folder names (relative to the project).

Metadata

File modification date and SCM status aid in file picking.

Beautiful

Terminal raster graphics don’t count! I want GUI beauty.

As every Vim user knows, most of one’s time spent in a text editor is spent editing, not writing (this is why Normal mode in Vim is the one you use for navigation and editing).

For most programming tasks, editing involves opening several files at once and switching between them (e.g. HTML/JavaScript/CSS).

I’m talking about three tasks:

Open any file on the computer.
Open any file in the current project.
Activate a file that’s already open in another tab.

And yet most text editors offload these important tasks to the operating system or implement half-hearted custom solutions. Even worse, third-party plugins frequently implement file-jumping functionality for different frameworks with unique, cryptic key mappings (e.g. between implementation and test or controller and view template).

This is a core task! Editors should approach it with the same innovation and care they spend on basic text entry.

TextMate

Keyboard

Fuzzy

Beautiful

Command-T with fuzzy search was revolutionary and was one of the main reasons I bought a copy of TextMate. But it breaks down for projects with many files of the same name (such as Ruby on Rails).

There’s no way to filter by directory.

Tabs are even worse. I frequently open more tabs than can fit on my screen, which means that both usability and the extra tabs get thrown out the window. The tab menu can only be accessed with the mouse and becomes a human-powered binary search of an unsorted list.²

Xcode

Keyboard

Beautiful

Xcode’s Open Quickly command (Command-Shift-D) only works with the exact file name starting with the first letter.

Xcode’s Open Quickly dialog

Many Cocoa developers store all their code files in the root directory of the project and rely on Xcode’s virtual directories for organization, which is the only reason it’s even barely usable.

Emacs

Keyboard

Fuzzy

Path

Emacs is the closest to satisfying my requirements.

The ido-menu provides fuzzy search, including pathnames. Chris Wanstrath’s textmate.el plugin³ wraps it in even more useful functionality, such as autodiscovery of a project root based on the existence of a .git directory.

Open buffers (similar to tabs) can be searched for by name (C-x b) or in a list (C-x C-b).

But the inline menu is an ugly paragraph.

A powerful search hidden behind a mess of text.

“The only solution I can think of, so far,
Is to smash out the windows with a crowbar.” — Buck 65

Once you start thinking about making file navigation better, the ideas flow freely. Could a dialog search on class or method names instead of just filenames? What about a free-form search for times and classes such as “yesterday Bacon#save”?

This article started with pain, developed into an idea, and ended up as an unexpected prototype implemented in MacRuby. I’m using it daily and am fine-tuning the interaction, visuals, features, and performance.

The app is now available as PeepOpen with a beautiful icon. Works with TextMate, Emacs, and MacVim.

For other updates, follow @peepcode on Twitter here.

The initial prototype performs a fuzzy search on paths and lists file modification dates.

You can contribute your own froth over the design and content of this article with the Neanderthals at Hacker News.

¹ Dave Peck sends supplication to the text editor gods.

² The RubyAMP bundle for TextMate shows a simple list of open windows, but without fuzzy search.

³ Chris Wanstrath’s textmate.el

Free PeepCode Blog

Geek Crushes

Dear Christian Neukirchen,

Geekily Yours, Geoffrey Grosenbach

Send To:

Dear Jeremy Ashkenas,

Indenting daily, Geoffrey Grosenbach

Send To:

Dear Reginald Braithwaite,

XOXOX, Geoffrey Grosenbach

Send To:

Dear Blake Mizerany,

Here’s to you, Geoffrey Grosenbach

Send To:

Dear Elise Worthy,

Best of luck at Living Social, Geoffrey Grosenbach

Send To:

My Command Line Prompt

Advanced Git!

Your Command Line Dashboard

Goals

Why ZSH?

Implementation

Setup

Last Command Status

Current Path

Git Branch, SHA & Dirty Status

RVM Config

Put it Together

Learn the command line, Git, and other great stuff!

Command Line

Adv Command

Advanced Git

Geek Gift Guide 2011

Gifts from $1-20

Gifts from $20-60

Gifts from $60-100

Gifts from $100-200

Gifts from $200-800

Free Ryan Singer UI Sketching Video

Front-end Prototyping

My Avatar

The Hooligan

CSS Masks

Webkit

Firefox

CSS Animation

CoffeeScript

Animation

See also

Other

CoffeeScript in Motion

In Motion

Learn it!

COFFEESCRIPT:

JAVASCRIPT:

1. A simple function

Engineering + Creativity

2. Jasmine’s ‘describe’ function with args

COFFEESCRIPT:

JAVASCRIPT:

3. The @ syntax for instance properties

COFFEESCRIPT:

JAVASCRIPT:

4. An instance method

COFFEESCRIPT:

JAVASCRIPT:

5. A full class with constructor

COFFEESCRIPT:

JAVASCRIPT:

6. Object literal

COFFEESCRIPT:

JAVASCRIPT:

Intrigued? Buy the 75 minute video at PeepCode!

R.I.P. Ruby Hash Rocket Syntax 1993-2010

Happy Holidays from PeepCode

Rethinking Rails 3 Controllers and Routes

Get Back to Thinking in URLs

Retire the Seven Action Names

Assets Are Resources

Geekily Yours,
Geoffrey Grosenbach

Indenting daily,
Geoffrey Grosenbach

XOXOX,
Geoffrey Grosenbach

Here’s to you,
Geoffrey Grosenbach

Best of luck at Living Social,
Geoffrey Grosenbach

Gifts from ^$1-20

Gifts from ^$20-60

Gifts from ^$60-100

Gifts from ^$100-200

Gifts from ^$200-800