Free PeepCode Blog

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

About this Blog

Wed Feb 24 18:00:00 +0000 2010

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

Style

Each post is uniquely styled within a grid. ↓

Sinatra

Generates static pages and graphics. Styles code samples. ↓

No SQL

Not even a database! File-based metadata. ↓

Haml

Powers article templates and markup. ↓

SASS/CSS

Comprehensive and reusable styling. ↓

JavaScript

Taking it further…custom behavior & graphics. ↓

Style

Before there were blogs we had websites. Beautiful, random websites that felt more like a zine — one page looking nothing like the one before or after it.

Greg Storey, Airbag Industries¹

Many developments in computer science have nothing to do with the capabilities of computers, but with the way we use them.

A few years ago, an article on Airbag Industries¹ inspired me to think about writing a blog with a unique design per post.

There are many benefits:

It encourages creativity both at the computer and away from it
It’s like a code kata for design
You can easily experiment with cutting-edge CSS3 features or just learn CSS2
You’ll learn how to build a style foundation for other designs in other applications

On the downside, it takes more time than simply writing prose.

Building an art-directed blog may seem as easy as dropping an extra CSS link tag into every blog post, but a little extra work upfront makes it a lot easier.

First, I started with a layout grid in CSS. Grids have been used extensively in print design but have only recently become popular in website design. I like Tyler Tate’s 1kb grid² because it’s the simplest thing necessary to accomplish the task.

In standard website design, elements can be placed anywhere on a page. In contrast, a grid defines boundaries in regular increments, limiting the possibilities. Instead of stifling creativity, it encourages experimentation by making it easier to think about a finite number of widths for text or images.

I use a 12 column grid (double-click anywhere on this page to see it). Twelve columns are easily divided into other increments: 12 · 6+6 · 2+5+5 · 4+4+4 · 3+3+3+3

Sinatra

The Sinatra web framework has a beautiful REST API, can be extremely powerful, and is super fast.

It’s easily deployed with Phusion Passenger alongside my other Rack-based web applications.

I started with the Nesta⁴ blog engine and enhanced it with the additional CSS and graphic generation features I needed. All pages are cached statically with Sinatra::Cache⁵ for even greater speed. Although this blog could be generated with a static site generator, I find it more natural to write it in a dynamic style.

One example is the generation of text headline images with the Textorize⁶ renderer from Thomas Fuchs. I reference the images by URL in my CSS files. Sinatra generates the graphic on the fly when that URL is accesed (then caches it). Sinatra keeps URLs at the forefront of the web developer’s mind — where they should be!

Other resources are generated at the view level when needed. Code snippets are formatted by the Pygments⁷ command-line script via a special RedCloth tag implemented as a Haml filter.

Textorize (right half) renders text edges smoothly.

No SQL

metadata.yml

heading: About this Blog
heading-font: Klavika-BoldCondensed
heading-color: #000
heading-background: transparent
published: December 30 2019 at 6pm
categories: meta design
summary: An article about...
format: haml

.column.article
  %h2 Bacon

  :custom
    Haml and textile together...

It’s much easier to debug a visual design in development on the local machine, check the whole thing into Git, and deploy when ready. No need to write an authentication system or an article preview mechanism.

Article files are stored on disk with a bit of YAML-esque metadata at the top. Each article can be in Textile format, or can use the full power of Haml for more complicated markup.

Early on I needed to store information about the title’s font size and color. Later I needed to add other custom fields for additional tagging. With an ORM this would have meant writing a migration and installing a plugin to manage tags.

There was no such problem here! I just added a few key-value pairs to the article’s metadata and started using them in the application immediately.

Haml

Not only does each post get its own CSS, it can also specify its own HTML, via Haml⁸.

When I’m designing visually in the browser, I’m thinking primarily about blocks of text and images, and how they will be styled. I don’t want to be thinking about HTML boilerplate or need to hunt to find a matching end tag.

Haml decreases the mental distance between HTML and CSS. I work directly with CSS selectors no matter what file I happen to be in.

But Haml isn’t well suited to working with inline text. Fortunately, there’s Textile⁹ for that!

The differences between the basic syntaxes of Textile and Markdown are negligible. Where it pulls away from Markdown is when you add new tags of your own. You can write view helpers that take a simple string and turn it into a group of HTML tags. It’s not only faster to type, but I can build reusable elements for movie links, syntax-highlighted code snippets, pull quotes, and product boxes.

Textile enhancements are easily used inline within any Haml document. In RedCloth 4, the steps are:

Write a module with methods for each of the tags you want to use (such as movie at right).
In each method, examine the :text key in the options, then build and return an HTML string. I build links for the mov and m4v versions of each movie.
Write a Haml filter. The name of your module will be used as the name of the filter.
Extend RedCloth with your custom module.
Add more methods to your tags module as needed.

The code samples at right were built this way. I specify a path to a source file and it runs it through pygmentize. It also prepends a link to the source file itself.

The end result is a text system customized for writing about code, but it looks great, too! I can’t imagine using a CMS that was any less powerful than this.

textile_in_use.haml

.column.article

  %h2 Custom Filter Sample
 
  :custom_red_cloth

    movie. http://example.com/movie.mov

    source. /blog/code.rb

    buy. http://peepcode.com/products

custom_tags.rb

module CustomTags
  
  def movie(opts)
    my_text = opts[:text]
    # Build an HTML string around my_text
    # ...
    return my_text
  end
  
end

custom_haml_filter.rb

module Haml
  module Filters

    # Renders custom textile.    
    module CustomRedCloth
      include ::Haml::Filters::Base
      lazy_require 'custom_tags'

      def render(text)
        red_cloth = ::RedCloth.new(text)
        red_cloth.hard_breaks = false
        red_cloth.extend CustomTags
        red_cloth.to_html
      end
    end
  end
end

SASS/CSS

_article_sample.sass

@import page_util
@import pygments_pastie

@include masthead-reset
@include dark-logo
@include dark-masthead-menu

$base_color: #d1e3ff

.prose
  @include grid_6
  float: left
  margin:
    left: $grid_gutter_width
    top:  $line_height * 5

Archives page with screenshots

In a recent copy of Print Magazine¹¹, someone talked about designing a “style sheet” for the magazine back in the 70’s. For some reason, the extra space jolted my brain into thinking differently. Style. Sheet.

A stylesheet isn’t supposed to be a receptacle into which one tosses a bunch of unrelated visual directives. It’s a coherent guideline for how things should look. It should be planned and reusable. And like backend code, it may take several iterations of use in the real world to get it right.

SASS is a huge part of achieving that concept in this blog.

People get emotional when they hear about SASS. Either they see it as a threat to traditional CSS (used only by hacks who haven’t taken the time to learn it) or they welcome it as the best thing to happen to the Internet.

After working with this blog for a few months, I’m in the second camp.

As an example, any page can be designed with a light or a dark background. A few mixins at the top automatically adjust the page background, logo color (implemented as an image sprite), and menu colors. All these are contained in the stylesheet and don’t require any modification of the page’s HTML.

The technical parts of the grid and vertical rhythm are also wired into my SASS stylesheets. I can give elements meaningful names in HTML, then specify +grid_6 in SASS to make the element six columns wide (alternately, I could have used arguments like grid(6)).

Variables like grid_gutter_width and line_height are available to the whole application. I rarely type a number; instead I use meaningful variables to add margins or manipulate elements into position.

_grid.sass

And if I’m going to spend that much time in the powder room, I want to show it off. The archives page uses webkit2png.py¹⁰ to take a screenshot of each page and display it in a grid.

JavaScript

A unique design for each post is great, but how about unique JavaScript for each post?

For my Rails 3 upgrade screencast, I wanted to show a timeline of Rails release dates. I’ve recently become enamored with RaphaelJS¹² and it took only a few lines of code to import a JavaScript file for posts that want one.

I wrote a custom Timeline function that plots dates as large dots.

Conclusion

As with many features of this blog, it will take a while to figure out how to use them all fully. In the meantime, it’s a great learning experience and a fun output for creativity.

I haven’t published the source yet and may never. But now you have the ideas…implement them on your own blog!

In an earlier post, RaphaelJS was used to chart Rails release dates.

custom.js

jQuery(function () {

  var paper = Raphael("graph", 940, 81),
    timeline;

  timeline = new Timeline(paper, [
    {date:"06/25/2004", version:"0.5"},
    {date:"12/13/2005", version:"1.0.0"},
    {date:"12/07/2007", version:"2.0.0"},
    {date:"6/10/2010",  version:"3.0 ?"}
  ]);

});

¹ Airbag Industries wrote on the old days when blogs were designed like zines.

² The 1kb grid is the simplest thing necessary to get the job done. I convert it to SASS with the included css2sass command.

³ With a hack to ruby-mode in Emacs, I can easily jump to any Sinatra URL handler in a file.

⁴ Nesta is a minimal blog engine by Graham Ashton (but easy to extend). It’s built on the Sinatra web framework.

⁵ Sinatra::Cache source code

⁶ Textorize text renderer

⁷ Pygments is the best syntax highlighter out there. When you view diffs and code at GitHub, you’re viewing pygments. Pipe code to it on the command line.

⁸ The Haml template engine is available for Ruby and other languages.

⁹ Textile is a syntax for formatting prose.

¹⁰ webkit2png.py is a capable screenshot capturing script for Mac OS X. There’s a Ruby port, but the original works well enough that I don’t see the need. I’ve wrapped it in the osxscreenshot gem.

¹¹ Print Magazine is a classic (over 70 years in publication). Baseline Magazine is a more academic European counterpart. I recently bought a subscription to both.

¹² RaphaelJS is a JavaScript-based SVG drawing library.

¹³ The Plainview web browser is a full-screen browser, useful not only for HTML-based presentations.

Free PeepCode Blog

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

Idea 1: Sinatra

Idea 2: Method, Member, Collection

Conclusion

Reactions

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

Keyboard

Fuzzy Search

Paths

Metadata

Beautiful

TextMate

Xcode

Emacs

About this Blog

Style

Sinatra

Gifts from ^$1-20

Gifts from ^$20-60

Gifts from ^$60-100

Gifts from ^$100-200

Gifts from ^$200-800