Wednesday, July 29, 2009

Spotting Errors Visually

‹prev | My Chain | next›

Continuing my CSS work, I have a go at the meals by month and by year pages. I am getting into a nice flow with less CSS and quickly get the meals-by-month page into good shape.

The thing about nicely formatted pages is that mistakes quickly become obvious. On this page, I notice that the wiki-formatted meal references are not being parsed properly.

So it is off to the specs. For wiki text "[meal:2009/07/29 Different Title]", I expect a link to the meal with link text "Different Title". In other words:
    it "should wikify meal URIs, using supplied text for the link" do
wiki("[meal:2009/07/29 Different Title]").
should have_selector("a",
:href => "/meals/2009/07/29",
:content => "Different Title")
Running the spec fails (as expected because it is not working) with:
'wiki data stored in CouchDB should wikify meal URIs, using supplied text for the link' FAILED
expected following output to contain a <a href='/meals/2009/07/29'>Different Title</a> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">
<html><body><p>[meal:2009/07/29 Different Title]</p></body></html>
That is an easy example to get passing—I simply need to add a call to meal_link (paralleling the already defined recipe_link) to the wiki helper method:
    def meal_link(link, title=nil)
%Q|<a href="/meals/#{link}">#{title}</a>|
If the meal wiki text does not include a title (e.g. "[meal:2009/07/29]"), then it needs to be pulled back from CouchDB:
    it "should wikify meal URIs" do

should have_selector("a",
:href => "/meals/2009/07/29",
:content => "Title")
I can implement that by conditionally pulling back the title in the meal_link helper:
    def meal_link(link, title=nil)
permalink = link.gsub(/\//, '-')
title ||= JSON.parse(RestClient.get("#{_db}/#{permalink}"))['title']
%Q|<a href="/meals/#{link}">#{title}</a>|
With that, I have my meal wiki links working as desired:

The meals by year already look to be in good shape. A simple bullet list works just fine:

I quickly style the feedback page. Nothing fancy, just display the labels as block with some top margins to get separation:

The less CSS:
#feedback {
h1 { clear: both }
label, input, textarea { display: block; }
label { margin-top: 8px }
I call it a day at that point. I believe that I still have to style the no-search results page (or at least review), the "thanks for your feedback" page, and the homepage. After that, it may be time to deploy!

No comments:

Post a Comment