Dave Dash

Resolving Django dumpdata errors

2009-09-13T00:00:00-07:00

Recently I recieved this wonderful piece of news when I ran ./manage.py dumpdata for the first time:

Error: Unable to serialize database: User matching query does not exist.

I knew this might not work out since I was dealing with a legacy database, but the resolution is quite simple. First I had to narrow it down to which app was causing this. Naturally I assumed it was one of the two apps I had, either common or restaurant. So I ran: ./manage.py dumpdata common and ./manage.py dumpdata restaurant. The latter had no problem whatsoever.

This made sense, since my common application was the only one that made any reference to a User. By looking in my models.py for that application, I narrowed it down to my Profile object. Sure enough, commenting it out meant I could get my data.

It ended up being a foreign key mismatch between the profile and user tables. Since this is legacy data, this mismatch made sense. A simple SELECT id,userid FROM profile WHERE userid NOT IN (SELECT id FROM auth_user) gave me a list of bad profiles. Removing them allowed me to create my Django fixtures.

Star Rating using YUI (and Django)

2008-03-04T00:00:00-08:00

I have a very good star rater on reviewsby.us, but it was written using some sloppy prototype code. I wanted to redo star raters in a well thought out manner and I wanted to use YUI. In this particular tutorial I will use Django although it is not a requirement.

For some background information on star raters, see this Yahoo! Design Pattern. Our pattern is more of a join star rater, similar to what's found on Netflix: you see an average rating for a restaurant or dish unless you yourself have rated it.

This was a thought out design decision for our reviewsby.us redesign. Our site is primarily a personal utility that answers the question, "What dishes do I like at a particular restaurant?" If you haven't rated something the website can only offer up an average and you can use that as a decision as to whether you should eat something or not.

If you have eaten something however, that average rating is irrelevant. You don't need fellow meal advisors to tell you that you liked Chicken Makhani, you already know that for yourself. Therefore we show only your rating unless you haven't rated something.

Working backwards

I like to "work backwards" as it were. Meaning, I like to just write the code that I ultimately will use to output a star rater. From there I will work on the supporting code that is necessary. I find by using this strategy, I can keep my code fairly clean and organized.

The template

So ultimately I want this:

{\% star 'mything' 3 4 '/path/to/script' %}

To show up as this:

Unfortunately Django templates doesn't seem to have named attributes for template tags, so I'll need to explain my syntax:

star: is the template tag which we define below
'mything': is an id string we will use for this rater and its associated objects
3: this is the second argument to star, it will be the users current rating, it can also be None
4.1: this is the third argument, it will be the average rating, it can also be None
/path/to/script: is the form that will process our rating

The HTML we want

Another developer had a good approach for handling star ratings and for handling Javascript in general. Create an underlying Javascript-free system, and then let the Javascript make it pretty. This is way to degrade gracefully.

Ultimately, I had my own approach to this problem, I wanted much of the visual lifting to happen on the CSS layer. So, we'll use the following code:

<span class="joint_star_rater"> <form id="rater_restaurant" method="post" action="/restaurant/pizza-luce/rate/"> <fieldset> <legend>Rating</legend> <ul> <li style="width: 100px;" title="5" class="current meta">Current Rating: 5</li> <li title="Poor" class="star_1 star"> <label for="restaurant_rating_1">Poor</label> <input type="radio" name="rating" value="1" id="restaurant_rating_1"/> </li> <li title="Fair" class="star_2 star"> <label for="restaurant_rating_2">Fair</label> <input type="radio" name="rating" value="2" id="restaurant_rating_2"/> </li> <li title="Good" class="star_3 star"> <label for="restaurant_rating_3">Good</label> <input type="radio" name="rating" value="3" id="restaurant_rating_3"/> </li> <li title="Very Good" class="star_4 star"> <label for="restaurant_rating_4">Very Good</label> <input type="radio" name="rating" value="4" id="restaurant_rating_4"/> </li> <li title="Excellent" class="star_5 star"> <label for="restaurant_rating_5">Excellent</label> <input type="radio" name="rating" value="5" id="restaurant_rating_5"/> </li> </ul> </fieldset> <input type="submit" name="rate" value="rate it" class="submit"/> </form> </span>

A couple things to note in our HTML. Our unique string is restaurant. It's got an ID that is as unique as you want: rater_restaurant where restaurant was the first argument to our template tag. We use restaurant to create some other unique IDs as well.

Also, this rating form makes a lot of sense semantically. While this form in its current state is a far cry from some ajaxy goodness, it makes clear sense as to what is going on.

The template tag

Well we know what we want from the HTML side, so let's start coding our star tag:

@register.simple_tag def star(id_string, current, average, path, spanfree=False): meta = None if current != None: meta = """ <li class="current meta" title="%d" style="width:%dpx">Current Rating: %d</li> """ % (int(current), int(current)*20, int(current)) else: meta = """ <li class="average meta" title="%.1f" style="width:%dpx">Average Rating: %.1f</li> """ % (average, average*20,average) stars = '' ratings = ['Poor', 'Fair', 'Good', 'Very Good', 'Excellent'] for i in range(1,6): stars = stars + """ <li class="star_%d star" title="%s"> <label for="%s_rating_%d">%s</label> <input id="%s_rating_%d" type="radio" value="%d" name="rating"/> </li> """ % (i, ratings[i-1],id_string, i, ratings[i-1], id_string, i, i) html = """ <form action="%s" method="post" id="rater_%s"> <fieldset> <legend>Rating</legend> <ul> %s %s </ul> </fieldset> <input type="submit" class="submit" value="rate it" name="rate"/> </form> """ % (path, id_string, meta,stars) if spanfree: return html else: return """<span class="joint_star_rater">%s</span>""" % html return html

The CSS

A lot of work will happen via CSS. The CSS will remove quite a bit of the textual data that can be interpreted graphically with stars.

The strategy we use is to:

fix the UL at a certain width with a background of grey stars
decorate the LI.average and LI.current with repeating stars (blue and orange respectively) with a z-index of 1
decorate the LI.average:hover and LI.current:hover with a transparent background
decorate LI:hover input as a colored in star and a z-index of 2

This might not make sense now, until you see the CSS in full action. Also for the stars we'll use a sprite of 3 stars. A grey defunct star as the default background, a blue star if it's the average rating for an item and an orange star if it's what the user wants.

I use the following sprite:

The following CSS will do some magic:

.joint_star_rater {display:inline-block;} .joint_star_rater ul{width:100px;position:relative;height:20px;background:url(../images/icons/stars.png) repeat-x 0 0} .joint_star_rater li.meta{position:absolute;text-indent:-9999px;display:block;z-index:1;} .joint_star_rater ul:hover li.meta{display:none;} .joint_star_rater li.current{background:url(../images/icons/stars.png) repeat-x 0 -40px} .joint_star_rater li.average{background:url(../images/icons/stars.png) repeat-x 0 -20px} .joint_star_rater li{height:20px;width:20px;position:absolute;text-indent:-9999px;z-index:3;} .joint_star_rater li.star_2{left:20px;} .joint_star_rater li.star_3{left:40px} .joint_star_rater li.star_4{left:60px} .joint_star_rater li.star_5{left:80px} .joint_star_rater li.star_1:hover{width:20px} .joint_star_rater li.star_2:hover{width:40px} .joint_star_rater li.star_3:hover{width:60px} .joint_star_rater li.star_4:hover{width:80px} .joint_star_rater li.star_5:hover{width:100px} .joint_star_rater li.star:hover{background:url(../images/icons/stars.png) repeat-x 0 -40px;z-index:2;left:0;} .joint_star_rater input.submit{display:none;}

The inline-block value for display is not supported very well. I recently switched to Firefox 3 Beta and it renders as expected. Firefox 2 has problems with it. I may revise the CSS later to accommodate it.

The Javascript

The fundamental drawback to the design here, is that it really only works well with the Javascript on. In fact, with the CSS on and Javascript off, this code will not work very well for the end user. This too will be revised in the future.

Our Javascript needs to do something very simple: * extract the star value you clicked on * send it to the server * redraw the stars

It's a very simple operation, but I honestly think other libraries have an advantage to YUI in this regard.¹ Here's some unobtrusive code I came up with:

Note: I intentionally left out irrelevant pieces of code, like the function definition of MA.is_authenticated(), this code isn't meant for cutting and pasting, it's meant for cutting-pasting and then some careful editing.

The callback view

The callback script is what you specify when you call {\% star ... %}. The view I use is as follows:

@login_required def rate(request, slug): MyObject = get_my_object() value = request['value'] MyObject,rate(value); return render_to_response("rating.html", locals(), context_instance=RequestContext(request))

That code is oversimplified... you have to write your own logic as it applies to our site. The rating.html is simply the call to your star tag:

{\% load tags %}
{\% star 'mything' restaurant.current_rating restaurant.average_rating restaurant.get_rating_url 1 %}

Note the 1 at the end. It's a flag to turn off the outer span so we can just insert the guts back into the original span.

Final Thoughts

The star-rater is really a large problem that's hard to tackle in one sitting and quite frankly is not documented well anywhere. The code I've provided is a shadow of the real code I'll be using, but hopefully it's enough to get you started.

I definitely will update my production code to solve a few outstanding issues, as I mentioned above. I'll try to update this tutorial at the same time. If there are questions about the examples given, feel free to ask and I'll attempt to answer.

YUI has the Selector and that might alleviate some problems, but jQuery has very nice selection capabilities. In this future version I keep promising, I'll use the YUI Selector ↩

Star Rating using YUI (and Django)

2008-03-04T00:00:00-08:00

Working backwards

The template

So ultimately I want this:

{\% star 'mything' 3 4 '/path/to/script' %}

To show up as this:

Unfortunately Django templates doesn't seem to have named attributes for template tags, so I'll need to explain my syntax:

star: is the template tag which we define below
'mything': is an id string we will use for this rater and its associated objects
3: this is the second argument to star, it will be the users current rating, it can also be None
4.1: this is the third argument, it will be the average rating, it can also be None
/path/to/script: is the form that will process our rating

The HTML we want

Ultimately, I had my own approach to this problem, I wanted much of the visual lifting to happen on the CSS layer. So, we'll use the following code:

Also, this rating form makes a lot of sense semantically. While this form in its current state is a far cry from some ajaxy goodness, it makes clear sense as to what is going on.

The template tag

Well we know what we want from the HTML side, so let's start coding our star tag:

The CSS

A lot of work will happen via CSS. The CSS will remove quite a bit of the textual data that can be interpreted graphically with stars.

The strategy we use is to:

fix the UL at a certain width with a background of grey stars
decorate the LI.average and LI.current with repeating stars (blue and orange respectively) with a z-index of 1
decorate the LI.average:hover and LI.current:hover with a transparent background
decorate LI:hover input as a colored in star and a z-index of 2

I use the following sprite:

The following CSS will do some magic:

The Javascript

Our Javascript needs to do something very simple: * extract the star value you clicked on * send it to the server * redraw the stars

It's a very simple operation, but I honestly think other libraries have an advantage to YUI in this regard.¹ Here's some unobtrusive code I came up with:

The callback view

The callback script is what you specify when you call {\% star ... %}. The view I use is as follows:

That code is oversimplified... you have to write your own logic as it applies to our site. The rating.html is simply the call to your star tag:

{\% load tags %}
{\% star 'mything' restaurant.current_rating restaurant.average_rating restaurant.get_rating_url 1 %}

Note the 1 at the end. It's a flag to turn off the outer span so we can just insert the guts back into the original span.

Final Thoughts

YUI has the Selector and that might alleviate some problems, but jQuery has very nice selection capabilities. In this future version I keep promising, I'll use the YUI Selector ↩

py vs php: stemming

2008-02-16T00:00:00-08:00

I've been porting some PHP to python during SuperHappyDevHouse and was amazed at how little code I needed to write since python makes list manipulation a breeze.

Today I was working on stemming (ala Porter Stemming algorithm). reviewsby.us uses stemming in the search engine to make queries:

Stemming turns hello everybody how are you guy's into a collection 'everybodi', 'gui', 'hello'. To produce this in php I do the following:

With some magic python:

The magic here is list mappings. Learning about them, they don't seem that great, but as soon as you start coding you stop using a lot of for loops.

I'm sure my PHP can be cleaned up and reduced as well, but its fun exploiting the magic of languages.

GeoDjango

2008-01-27T00:00:00-08:00

[tags]geodjango, django, gis[/tags]

I just discovered GeoDjango. The existence of this is awesome.

The GIS layer of reviewsby.us is incredibly complicated, and if I do another project of that magnitude, it'll be nice to know that a framework exists to tackle problems. It looks functional, but not quite documentation complete for usage, but if I endeavor to learn more about GIS, I'm going to dive-in.

FBML and CSS background images

2007-08-11T00:00:00-07:00

I've been tediously building out the new reviewsby.us app for Facebook and I ran into some problem when I tried to embed this CSS:

The CSS worked fine, just now background image. The fix is mentioned in this post which is to repeat the background statement:

Voila, it works. Hopefully this hack won't be necessary in later versions of the Platform.

FBML and embedded CMS

2007-08-04T00:00:00-07:00

[tags]fbml, css, reviewsby.us, partials, symfony, sfFacebookPlatformPlugin[/tags]

One problem of going the FBML route¹ is CSS styles. You can't link to external style sheets so you need to embed everything.

I took the liberty of using a partial that contains all the useful CSS that I use in our app. Now we can just embed it in our layout by doing:

<?php include_partial('sfFacebook/css');?>

The following classes are useful:

.app_content is the div surrounding the main content of the page. It gives the canvas some padding (actually it gives itself some margin as not to butt-up against the canvas.
.box this defines the classic facebook box with a dark blue border at the top and with headers that have the lighter blue background and dark blue text.
.box .header the header for the box described above. Use an h2 for the title.
.box .content the main content section of a box, has a bit of padding.

I'm not completely convinced that the reviewsby.us app for facebook should be using FBML. ↩

FBML and embedded CMS

2007-08-04T00:00:00-07:00

[tags]fbml, css, reviewsby.us, partials, symfony, sfFacebookPlatformPlugin[/tags]

One problem of going the FBML route¹ is CSS styles. You can't link to external style sheets so you need to embed everything.

I took the liberty of using a partial that contains all the useful CSS that I use in our app. Now we can just embed it in our layout by doing:

<?php include_partial('sfFacebook/css');?>

The following classes are useful:

.app_content is the div surrounding the main content of the page. It gives the canvas some padding (actually it gives itself some margin as not to butt-up against the canvas.
.box this defines the classic facebook box with a dark blue border at the top and with headers that have the lighter blue background and dark blue text.
.box .header the header for the box described above. Use an h2 for the title.
.box .content the main content section of a box, has a bit of padding.

I'm not completely convinced that the reviewsby.us app for facebook should be using FBML. ↩

Facebook Markup Language: the Dashboard and Action links

2007-07-25T00:00:00-07:00

[tags]facebook, fbml, apps, reviewsby.us, symfony, sfFacebookPlatformPlugin, plugins[/tags]

Facebook has the concept of the dashboard:

In case the documentation isn't clear, these are where the top buttons for your app go.

I created the FBMLHelper to help you write links from symfony to facebook.

The dashboard itself is easy to create:

<fb:dashboard>
</fb:dashboard>

The links are fairly simple, but if you use symfony... we like helpers...

So the FBMLHelper has an fb_action method which is similar to link_to:

<?php echo fb_action('My Dining', '@homepage') ?>

Will actually render as:

<a href="http://apps.facebook.com/reviewsbyus/">My Dining</a>

Provided the app_facebook_canvas_url is set to your canvas url (for example, our's is http://apps.facebook.com/reviewsbyus/).

This helper takes care of routing and rewriting the URL to something that will work within Facebook's canvas.

... so start writing some apps. This plugin will be developed further and I'll try to publish tutorials whenever possible.

Facebook Markup Language: the Dashboard and Action links

2007-07-25T00:00:00-07:00

[tags]facebook, fbml, apps, reviewsby.us, symfony, sfFacebookPlatformPlugin, plugins[/tags]

Facebook has the concept of the dashboard:

In case the documentation isn't clear, these are where the top buttons for your app go.

I created the FBMLHelper to help you write links from symfony to facebook.

The dashboard itself is easy to create:

<fb:dashboard>
</fb:dashboard>

The links are fairly simple, but if you use symfony... we like helpers...

So the FBMLHelper has an fb_action method which is similar to link_to:

<?php echo fb_action('My Dining', '@homepage') ?>

Will actually render as:

<a href="http://apps.facebook.com/reviewsbyus/">My Dining</a>

Provided the app_facebook_canvas_url is set to your canvas url (for example, our's is http://apps.facebook.com/reviewsbyus/).

This helper takes care of routing and rewriting the URL to something that will work within Facebook's canvas.

... so start writing some apps. This plugin will be developed further and I'll try to publish tutorials whenever possible.

Dynamically adjusting your page title in symfony

2007-07-18T00:00:00-07:00

[tags]view, view.yml, symfony, reviewsby.us, title, seo[/tags]

A lot of the content on reviewsBy.us and other sites we make using symfony have dynamic content. We try to have our page titles reflect the content by prepending the name of the specific restaurant, document or menu item before the site name.

To do this we use a method called prependTitle. I define this in a file called myActions.class.php which almost all of my actions subclass in my projects. This way I can enhance all the actions simply by adjusting the common ancestor, myActions:

The page title isn't stored anywhere, so we have to put it in app.yml:

app:
  title: reviewsby.us

Voila!

Dynamically adjusting your page title in symfony

2007-07-18T00:00:00-07:00

[tags]view, view.yml, symfony, reviewsby.us, title, seo[/tags]

The page title isn't stored anywhere, so we have to put it in app.yml:

app:
  title: reviewsby.us

Voila!

Caching REST with sfFunctionCache

2007-04-07T00:00:00-07:00

[tags]geocoding, caching, REST, symfony, Cache_Lite, php, cache, sfFunctionCache[/tags]

For reviewsby.us we do a lot of geocoding. To facilitate we use Yahoo! Geocoding API. This helps us normalize data, obtain latitude and longitude, interpret location specific searches.

These REST queries happen a lot and will continue to happen, but this data that Yahoo! provides is fairly static. We're basically querying a database of sorts. So it makes sense that we should cache this data.

We'll demonstrate how to cache these queries using symfony's sfFunctionCache class.

I wrote a wrapper (I'll release it as a plugin if requested) for the Geocoding API, the bulk of the work (the REST call) occurs in a function called doQueryGIS:

The call to this function is always wrapped with queryGIS:

This wrapper creates a sfFunctionCache objet and calls the function and caches it for subsequent queries.

What this means is once Yahoo! teaches reviewsby.us that India is located at (25.42°, 77.830002°) and that the precision is 'country' we remember it in the future.

These features will be incorporated into future versions of reviewsby.us.

Parsing a list of Key:Value pairs

2007-02-24T00:00:00-08:00

[tags]best practices,php,openID[/tags] I'm working on implementing openID for reviewsby.us and for use in symfony apps. One thing I was having trouble with was parsing key value pairs, which is one of the requirements to reading responses. It's a fairly easy task, but PHP offers so many ways to do this.

openID calls for the following Key-Value format:

Lines of:

some_key:some value

There MUST NOT be a space before or after the colon.

Newline characters MUST be Unix-style, just ASCII character 10 ("\n").

Newlines MUST BE at end of each line as well as between lines.

MIME type is unspecified, but text/plain is RECOMMENDED.

Character encoding MUST BE UTF-8.

So here is my attempt at parsing something like this as efficiently and error free as possible:

I wrote this function as I was writing the post... and it came out way faster than my previous implementations using strtok or a combination of explode and trim. Which is good to hear since I do use preg_ functions quite a bit in PHP and they definitely have their place.

I'm curious if people have found a faster way of parsing through a string of Key-Value pairs. I'll run it in a test harness and stand corrected if someone comes through with something faster ;).

OpenID

2006-10-03T00:00:00-07:00

OpenID is a wonderful concept. If I visit a web site, Acme Widgets, I only need to supply a URL that belongs to me in order to log in. The web site at that URL will provide a place where I can authorize Acme Widgets to log me in with this id.

The benefit of this type of identity system is now you don't need to create new username's and passwords for each site you'd like to use. We initially began reviewsby.us with just OpenID for that reason. Now we can target places like livejournal and make it exceptionally easy for their users to register with our site.

As of this writing, and even more robust system is being developed, whobar. Whobar supports multiple identification sites, not just OpenID. Rather than walking through explaining how to do a sign-in system that integrates OpenID, I'll direct people to whobar. It is in the plans for reviewsby.us to integrate whobar and once that happens you can expect a shiny tutorial and/or plugin for symfony.

OpenID

2006-10-03T00:00:00-07:00

Coming soon to reviewsby.us

2006-10-02T00:00:00-07:00

In August I took a break from reviewsby.us only to be plagued by spam. In September, I relinquished portions of the project planning to my wife. We haven't released anything publicly, yet, but there's a lot in development.

I updated the development framework to symfony 1.0 alpha and took care of a whole slew of bugs.
Katie and I came up with a wireframe that details some of the upcoming changes.
I upgraded the user logic to take advantage of sfGuardUser, a user management plugin for symfony.

I'm in progress of writing location specific searches. I'm slow to implement. It seems that this month is far busier than I'd like, and I can rarely get in a block of enough time to just crank this out. The problem with geographic-specific searches is mySQL supports those types of queries, but it's not as easy as I'd like. Zend Search Lucene with some support from PHP, however, may yield some promising results. As always, I'll share my findings in a forthcoming tutorial.

Anyway, no visible updates on the actual site, since I didn't want to put alpha software on the live site. I'm sure by next month symfony will be ready.

Coming soon to reviewsby.us

2006-10-02T00:00:00-07:00

I updated the development framework to symfony 1.0 alpha and took care of a whole slew of bugs.
Katie and I came up with a wireframe that details some of the upcoming changes.
I upgraded the user logic to take advantage of sfGuardUser, a user management plugin for symfony.

Anyway, no visible updates on the actual site, since I didn't want to put alpha software on the live site. I'm sure by next month symfony will be ready.

Cropping Images using DHTML (Prototype) and symfony

2006-09-16T00:00:00-07:00

Note: Like many of my tutorials, you don't need symfony, just PHP. However, I develop in symfony and take advantage of the MVC-support that it offers.

Years ago when I was working on a photo gallery for davedash.com I got the art of making tumbnails down fairly well. It was automated and didn't allow for specifying how the thumbnail should be made. With dozens of photos (which was a lot back then), when would I find that kind of time.

Flashback to today, for my company... we want users with avatars... but nothing too large. Maybe a nice 80x80 picture. Well the coolest UI I've seen was Apple's Address Book which let you use this slider mechanism to crop a fixed sized image from a larger image.

Here's a demo.

Overview

The front-end GUI is based on code from digg which is based on the look and feel (as near as I can tell) from Apple.

The GUI provides a clever visual way of telling the server how to chop the image. The gist is this, sliding the image around and zooming in and out change a few form values that get passed to another script which uses this data to produce the image.

Frontend: What would you like to crop?

In this tutorial, we're going to be cropping an 80x80 avatar from an uploaded image. The front-end requires the correct mix of Javascript, CSS, HTML and images. The Javascript sets up the initial placements of the image and the controls. The CSS presents some necessary styling. The images makeup some of the controls. The HTML glues everything together.

HTML

Let's work on our HTML first. Since I used symfony, I created a crop action for a userpics module. So in our cropSuccess.php template:

<div id="ava">
    <?php echo form_tag("userpics/crop") ?>
        <div id="ava_img">
            <div id="ava_overlay"></div>
            <div id="ava_drager"></div>
            <img src="<?php echo $image ?>" id="avatar" />
        </div>
        <div id="ava_slider"><div id="ava_handle"></div></div>
        <input type="hidden" id="ava_width" name="width" value="80" />
        <input type="hidden" id="ava_x" name="x" value="100" />
        <input type="hidden" id="ava_y" name="y" value="100" />
        <input type="hidden" id="ava_image" name="file" value="<?php echo $image ?>" />
        </div>
        <input type="submit" name="submit" id="ava_submit" value="Crop" style="width: auto; font-size: 105%; font-weight: bold; margin: 1em 0;" />
    </form>
</div>

Right now a lot of this doesn't quite make sense. If you attempt to render it, you will just see only the image. As we add the corresponding CSS and images it will make some more sense.

CSS and corresponding images

We'll go through each style individually and explain what purpose it serves in terms of the GUI.

#ava is our container.

#ava {
    border: 1px solid gray;
     width: 200px;
}

#ava_img is the area that contains our image. Our window for editing this image 200x200 pixels. If we drag out image out of bounds we just want the overflowing image to be clipped. We also want our position to be relative so any child elements can be positioned absolutely with respect to #ava_img.

#ava_img {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

#ava_overlay is a window we use to see what exactly will be our avatar. If it's in the small 80x80 window in the center of the image, then it's part of the avatar. If it's in the fuzzy region, then it's getting cropped out. This overlay of course needs to be positioned absolutely.

#ava_overlay {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url('/images/overlay.png');
    z-index: 50;
}

#ava_drager is probably the least intuitive element (Heck, I'm not even sure if I've even got it right). In our demo you're not actually dragging the image, because you can drag anywhere within the #ava_img container and move the image around. You're using dragging an invisible handle. It's a 400x400 pixel square that can be dragged all over the container and thusly move the image as needed.

#ava_drager {
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: 100;
    color: #fff;
    cursor: move;
}

#avatar is our image, and since it will be moving all around the window, it requires absolute positioning.

#avatar {
    position: absolute;
}

#ava_slider and #ava_handle are our slider components. They should be self-explanatory.

#ava_slider {
    width: 200px;
    height: 27px;
    background: #eee;
    position: relative;
    border-top: 1px solid gray; 
    background: url('/images/slider_back.png');
}
#ava_handle {
    width: 19px;
    height: 20px;
    background: blue;
    position: absolute;
    background: url('/images/handle.png');
}

Internet Explorer

PNG do not work so well in Internet Explorer, but there is a small trick, adding these components into a style sheet that only IE can read will make things work:

#ava_overlay {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/cropper/overlay.png', sizingMethod='crop');
}

#ava_handle {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ui/cropper/handle.png', sizingMethod='crop');
}

The Javascript

The Javascript is actually not as complicated as you'd expect thanks to the wonder of prototype. This framework provides so much so easily. You'll need to include prototype.js and dom-drag.js.

So let's take a look.

<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
function setupAva() {
    if ($("avatar")) {
        var handle = $("ava_handle");
        var avatar = $("avatar");
        var drager = $("ava_drager");
        var slider = $("ava_slider");
        var ava_width = $("ava_width");
        var ava_x = $("ava_x");
        var ava_y = $("ava_y");
        // four numbers are minx, maxx, miny, maxy
        Drag.init(handle, null, 0, 134, 0, 0);
        Drag.init(drager, avatar, -100, 350, -100, 350);
        var start_w = avatar.width;
        var start_h = avatar.height;
        var ratio = (start_h / start_w);
        var new_h;
        var new_w;
        if (ratio > 1) {
            new_w = 80;
            new_h = (80*start_h)/start_w;
        } else {
            new_h = 80;
            new_w = (80*start_w)/start_h;
        }
        // these need to be set after we init
        avatar.style.top = '100px';
        avatar.style.left = '100px';
        avatar.style.width = new_w + 'px';
        avatar.style.height = new_h + 'px';
        avatar.style.margin = '-' + (new_h / 2) + 'px 0 0 -' + (new_w / 2) + 'px';
        handle.style.margin = '3px 0 0 20px';
        avatar.onDrag = function(x, y) {
            ava_x.value = x;
            ava_y.value = y;
        }
        handle.onDrag = function(x, y) {
            var n_width = (new_w + (x * 2));
            var n_height = (new_h + ((x * 2) * ratio));         
            avatar.style.width = n_width + 'px';
            avatar.style.height = n_height+ 'px';
            ava_width.value = n_width;  
            avatar.style.margin = '-' + (n_height / 2) + 'px 0 0 -' + (n_width / 2) + 'px';
        }
    }
}
Event.observe(window,'load',setupAva, false);
// ]]>
</script>

If this isn't exactly crystal clear, I can explain. If you're new to prototype, $() is the same as doucment.getElementByID() (at least for our purposes).

We need to initialize two draggable elements, one is our slider for zooming and the other is our avatar itself. We initialize the draggers using Drag.init(). We specify what to drag, if another element should be used as a handle and then the range of motion in xy coordinates. In the second call we use that #dragger to move around the image in this manner.

Drag.init(handle, null, 0, 134, 0, 0);
Drag.init(drager, avatar, -100, 350, -100, 350);

We want to initialize the the size and placement of the avatar. We do that using maths. First we want it in our 80x80 pixel box. So it should be roughly 80x80. I've set the math up so that the smallest side is 80 pixels (there's reasons for doing this the other way around).

    if (ratio > 1) {
        new_w = 80;
        new_h = (80*start_h)/start_w;
    } else {
        new_h = 80;
        new_w = (80*start_w)/start_h;
    }

We then place the avatar element. We initialize it to be in the center of the screen (top: 100px;left:100px) and then nudge the image using margins.

    avatar.style.top = '100px';
    avatar.style.left = '100px';
    avatar.style.width = new_w + 'px';
    avatar.style.height = new_h + 'px';
    avatar.style.margin = '-' + (new_h / 2) + 'px 0 0 -' + (new_w / 2) + 'px';

We also use margins to place the handle.

    handle.style.margin = '3px 0 0 20px';

#ava_x and #ava_y tell us where the center of the avatar is. So when the avatar is moved we need to set these again:

    avatar.onDrag = function(x, y) {
        ava_x.value = x;
        ava_y.value = y;
    }

That was easy. Slighly more complicated is the zoomer function. We are basically adjusting the width and the height proportionately based on roughly where the slider is. Note that we're still using that ratio variable that we calculated earlier. We basically take the new x-coordinate of the handle and allow our image to get just slightly larger than the #ava_image container.

    handle.onDrag = function(x, y) {
        var n_width = (new_w + (x * 2));
        var n_height = (new_h + ((x * 2) * ratio));         
        avatar.style.width = n_width + 'px';
        avatar.style.height = n_height+ 'px';
        ava_width.value = n_width;  
        avatar.style.margin = '-' + (n_height / 2) + 'px 0 0 -' + (n_width / 2) + 'px';
    }

We want to load initialize the slider right away when the page loads: Event.observe(window,'load',setupAva, false);

Not terribly hard or complicated. Once these elements are all in place you have a working functioning slider. It returns the x and y coordinates of the center of the image with respect to our 200x200 pixel #ava_image. It also tells us the new width of our image. We feed this information into a new script and out should pop a new image which matches exactly what we see in our GUI.

Processing the crop

Initially I was frustrated with the data that was being sent. I knew the center of the image in relation to this 200x200 pixel canvas and its width... but what could I do with that. Well I could just recreate what I saw in the GUI. I needed to create a 200x200 pixel image first, place my original avatar resized (and resampled) at the precise coordinates and then cut out the center most 80x80 pixels to become the final avatar image.

If you note in our template above for cropSuccess.php we submit our form back to the crop action. Let's look at the action:

public function executeCrop()
{
    if ($this->getRequestParameter('file')&&$this->getRequestParameter('width')) {          // we are saving our cropped image
        // Load the original avatar into a GD image so we can manipulate it with GD
        $o_filename = $this->getRequestParameter('file');  // we'll use this to find the file on our system
        $o_filename = sfConfig::get('sf_root_dir').'/web' . $o_filename;
        $o_im = @imagecreatetruecolor(80, 80) or die("Cannot Initialize new GD image stream");
        $o_imagetype = exif_imagetype($o_filename); // is this gif/jpeg/png

        // appropriately create the GD image
        switch ($o_imagetype) {
            case 1: // gif
                $o_im = imagecreatefromgif($o_filename);
                break;
            case 2: // jpeg
                $o_im = imagecreatefromjpeg($o_filename);   
                break;
            case 3: // png
                $o_im = imagecreatefrompng($o_filename);
                break;
        }

        // Let's create our canvas
        $im = @imagecreatetruecolor(200, 200) or die("Cannot Initialize new GD image stream");
        imagecolortransparent ( $im, 127 ); // set the transparency color to 127
        imagefilledrectangle( $im, 0, 0, 200, 200, 127 ); // fill the canvas with a transparent rectangle

        // let's get the new dimension for our image

        $new_width = $this->getRequestParameter('width');
        $o_width = imageSX($o_im);
        $o_height = imageSY($o_im);

        $new_height = $o_height/$o_width * $new_width;

        // we place the image at the xy coordinate and then shift it so that the image is now centered at the xy coordinate
        $x = $this->getRequestParameter('x') - $new_width/2;
        $y = $this->getRequestParameter('y') - $new_height/2;

        // copy the original image resized and resampled onto the canvas
        imagecopyresampled($im,$o_im,$x,$y,0,0,$new_width,$new_height,$o_width,$o_height); 
        imagedestroy($o_im);

        // $final will be our final image, we will chop $im and take out the 80x80 center
        $final = @imagecreatetruecolor(80, 80) or die("Cannot Initialize new GD image stream");
        imagecolortransparent ( $final, 127 ); // maintain transparency

        //copy the center of our original image and store it here
        imagecopyresampled ( $final, $im, 0, 0, 60, 60, 80, 80, 80, 80 );
        imagedestroy($im);

        //save our new user pic
        $p = new Userpic();
        $p->setUser($this->getUser()->getUser());
        $p->setGD2($final);
        $p->save();
        imagedestroy($final);
        $this->userpic = $p;
        return "Finished";
    }


    $this->getResponse()->addJavascript("dom-drag");
    $this->getResponse()->addJavascript('/sf/js/prototype/prototype');
    $this->getResponse()->addJavascript('/sf/js/prototype/effects');
    $this->image = '/images/userpics/originals/' . $this->getRequestParameter('file');
}

It's doing exactly what the paragraph above explains when the image dimensions are given. The code is well commented so it should be easy enough to follow.

GD image functions in PHP are fairly robust and can help you do a lot of tricks with image data. Note the code to save the image, we'll cover it in detail soon.

The Model

$p = new Userpic();
$p->setUser($this->getUser()->getUser());
$p->setGD2($final);
$p->save();

First some clarification the second line. myUser::getUser() gets the User object associated with the currently logged in user. The third line, however, is where the magic happens. Before we look at it, let's have a quick look at our model:

userpic:
 _attributes: { phpName: Userpic }
 id:
 user_id:
 image: blob
 thumb: blob
 created_at:
 updated_at:

We have an image attribute and a thumb property to our Userpic object. This is where we store PNG versions of each icon and their 16x16 thumbnails respectively. We do this in Userpic::setGD2():

public function setGD2($gd2_image)
{
    //convert to PNG
    ob_start();
    imagepng($gd2_image);
    $png = ob_get_clean();
    //save 16x16
    $gd2_tn = @imagecreatetruecolor(16, 16) or die("Cannot Initialize new GD image stream");
    imagealphablending( $gd2_tn, true );
    imagecolortransparent ( $gd2_tn, 127 );

    imagecopyresampled ( $gd2_tn, $gd2_image, 0, 0, 0, 0, 16, 16, 80, 80 );
    ob_start();
    imagepng($gd2_tn);
    $tn = ob_get_clean();

    $this->setImage($png);
    $this->setThumb($tn);
}

We capture the output of the full size PNG, then we scale it again and capture the output of the thumbnail and set them.

Conclusion

When it comes to web apps, having a relatively simple GUI for people to resize images can go a long way in terms of adoption rate of avatars and custom user pictures by non technical users.

Enjoy, and if you found this useful (or better implemented it) let me know.

Using Zend Search Lucene in a symfony app

2006-08-25T00:00:00-07:00

[tags]zend, search, lucene, zend search lucene, zsl, symfony,php[/tags]

If you're like me you've probably followed the Askeet tutorial on Search in order to create a decent search engine for your web app. It's fairly straight forward, but they hinted that when Zend Search Lucene (ZSL) is released, that might be the way to go. Well we are in luck, ZSL is available, so let's just dive right in.

If you aren't using symfony have a look at this article from the Zend Developer Zone. It covers just enough to get you started. If you are using symfony, just follow along and we'll get you where you need to go.

Obtaining Zend Search Lucene

First download the Zend Framework (ZF). The Zend Framework is supposed to be fairly "easy" in terms of installation. So let's put that to the test. Open your ZF archive. Copy Zend.php and Zend/Search to your symfony project's library folder:

cp Zend.php $SF_PROJECT/lib              
mkdir $SF_PROJECT/lib/Zend
cp -r Zend/Search $SF_PROJECT/lib/Zend
cp Zend/Exception.php $SF_PROJECT/lib/Zend                 
chmod -R a+r $SF_PROJECT/lib/Zend*

Index Something

We'll deviate slightly from food themed tutorials and do something generic. Let's try a user search where we can find a user by their name or email address. It's fairly simple to accomplish, and hardly requires the use of ZSL, but by using ZSL we can easily extend it to do a full-text search of a user's profile or any other textual data.

Each "thing" stored in the index is a "document" in ZSL, specifically a Zend_Search_Lucene_Document. Each document then consists of several "fields" (Zend_Search_Lucene_Field objects). In our example, our document will be an individual user and the fields will be relevant attributes of the user (username, first name, last name, email, the text of their profile).

We're going to write a general re-indexing tool. Something that will index all users.

In our userActions class let's add the following action:

public function executeReindex()
    {
        require_once 'Zend/Search/Lucene.php';
        $index = new Zend_Search_Lucene(sfConfig::get('app_search_user_index_file'),true);
        
        $users = UserPeer::doSelect(new Criteria());
        foreach ($users AS $user)
        {
            $doc = new Zend_Search_Lucene_Document();
            $doc->addField(Zend_Search_Lucene_Field::Keyword('id', $user->getId()));
            $doc->addField(Zend_Search_Lucene_Field::Keyword('username', $user->getUsername()));
            $doc->addField(Zend_Search_Lucene_Field::Keyword('email', $user->getEmail()));
            $doc->addField(Zend_Search_Lucene_Field::Text('firstname', $user->getFirstname()));
            $doc->addField(Zend_Search_Lucene_Field::Text('lastname', $user->getLastname()));
            $doc->addField(Zend_Search_Lucene_Field::Unstored('contents', "{$user->getEmail()} {$user->getFirstname()} {$user->getLastname()} {$user->getUsername()}"));
            $index->addDocument($doc);
        }
        
        $index->commit();
    }

The code should be fairly easy to follow. First of all we're requiring the necessary libraries for Lucene. The next line we are creating the index:

app_search_user_index_file is a symfony configuration that you define in your app.yml. It defines which file you want to use for your index. /tmp/lucene.user.index works for our purposes. The second parameter tells Lucene we are creating a new index.

We then loop through all the users and for each user create a document. For all the search relevant attributes that a user might have we add a field into the document. Note the last field:

By default search is made for the "contents" field. So in this example we want people to be able to type in someone's name, email, username without having to specify what field we're searching for.

Find those users

Finding the user's is equally as straight-forward. We make a new action called search:

If we have a query, open the ZSL index (note that we only have one parameter here). Run the find method to find our query and store it to the $hits array. Note that our query was cleaned with strtolower, since ZSL is case sensitive.

The template takes care of the rest:

Fairly simple... but it could use some cleaning up (enjoy).

What about new users?

Regularly reindexing might be nice in terms of having an optimized search index, but its lousy if you want to be able to search the network immediately when new people join on. So why not automatically re-index each user every time they are created or everytime one of their indexed components is summoned?

This should be fairly simple by adding to the User class:

We have an attribute called $reindex. When it is false we don't need to worry about indexes. When something significant changes, like an update to your name or email address, then we set $reindex to true. Then when we save:

We're calling a new function called generateZSLDocument. It might look familiar:

Now, whenever a user is updated, so is our index. Additionally we can modify our reindex action:

That's a lot easier to deal with.

...and beyond

Hope this article helps some of you jumpstart your symfony apps. Really cool, easy to implement search is here. We no longer have to stick with shoddy solutions like HT://Dig or spend time rolling our own full text search, as the symfony team diligently showed us we could. But there is a lot more ground to cover. Including optimization techniques and best practices.

Let me know what you think, and if you use this in any of your apps.

Digg-style AJAX comment editing in PHP/symfony

2006-08-13T00:00:00-07:00

"Digg"-style anything can be pretty slick. The AJAX-interactions on that site make it very fun to use. It's styles have been copied everywhere, and are definitely worth copying. The latest feature that had caught my eye was the ability to edit your comments for a set time after posting them. Of course, it wasn't just the ability to edit comments, it was AJAX too and it has a timer.

This is totally something I could use on a restaurant review site. So I started on this project. It's pretty straight forward. For all of your posted comments you check if the owner of them is viewing them within 3 minutes of posting the commen. 3 minutes is usually enough time to notice you made a typo, but if you disagree I'll leave it to you to figure out how to adjust the code.

For example, I make a comment, realize I spelled something wrong and then I can click on my comment to edit it. Of course using AJAX means this all happens without having to reload the web page. Therefore the edits are seemingly quick. So let's add it to any web site.

In Place Forms

First and foremost, the ability to edit a comment means you have a form that you can use to edit and submit your changes. But rather than deal with creating a boring unAJAXy form, we'll enlist the help of script.aculo.us.

First, each comment is rendered using the following HTML and PHP:

<div class="review_block" id="comment_<?php echo $comment->getId() ?>">  
    <p class="author"><?php echo link_to_user($comment->getUser()) ?> - <?php echo $comment->getCreatedAt('%d %B %Y') ?></p>
    <div class="review_text" id="review_text_<?php echo $comment->getId()?>"><?php echo $comment->getHtmlNote() ?></div>
</div>

Note that this div and it's child div have unique ids that we can refer back to (comment_n and review_text_n where n is the id of the comment). We can use this to interact with the DOM via JavaScript. What we do is for each comment, we check if it is owned by the current visitor and if it's within our prescribed 3 minute window. We can do that with some simple PHP:

<?php if ($comment->getUser() && $comment->getUserId() == $sf_user->getId() && time() < 181 + $comment->getCreatedAt(null) ): ?>
    <script type="text/javascript">
    //<![CDATA[
        makeEditable('<?php echo $comment->getId() ?>', "<?php echo url_for($module . '/save?id=' . $comment->getId()) ?>", "<?php echo url_for('restaurantnote/show?id=' . $comment->getId() . '&mode=raw') ?>", <?php echo 181-(time() - $comment->getCreatedAt(null)) ?>);
    //]]></script>
<?php endif ?>

As you can see we run the makeEditable() function for each applicable comment. As you can guess, makeEditable() makes a comment editable. For parameters it takes the comment's id (so it can refer to it in the DOM and other background scripts). It also takes as an argument the "save" URL as well as a URL from which it can load the raw comment. The last argument is for the timer.

Here is our function:

var editor;
var pe;
makeEditable = function(id, url, textUrl, time) {
    var div = $("review_text_" + id);

    pe = new PeriodicalExecuter(function() { updateTime(id); }, 1);

    Element.addClassName($('comment_' + id), 'editable');
    new Insertion.Bottom(div, '<div class="edit_control" id="edit_control_'+id+'">Edit Comment (<span id="time_'+id+'">'+time+' seconds</span>)</div>');

    editor = new Ajax.InPlaceEditor(div, url, { externalControl: 'edit_control_'+id, rows:6, okText: 'Save', cancelText: 'Cancel', 
    loadTextURL: textUrl, onComplete: function() { makeUneditable(id) } });
}

It does a couple things. It runs a PeriodicalExecuter to run the updateTime function which updates our countdown timer. It adds a CSS class to our comment div. It adds a control button to edit a comment. Lastly it uses the script.aculo.us Ajax.InPlaceEditor to do most of the magic. The hard part is done.

Periodic Execution Timer

So the updateTime function is reasonably simple. It finds the time written out in the DOM and decrements it by 1 second each second. Once it hits zero seconds it disables itself and the ability to edit the block. Let's take a look:

updateTime = function(id) {
  var div = $("time_"+id);
  if (div) {
    var time =  parseInt(div.innerHTML) - 1;
    div.innerHTML = time;
  }
  if (time < 1) {
    pe.stop();
    var editLink = $('edit_control_'+id);
    if (Element.visible(editLink)) {
      makeUneditable(id);
      editLink.parentNode.removeChild(editLink);
    }
  }
}

Call backs

We'll need a few call backs for the editor to work properly. Since many content pieces are converted from something else to HTML and not directly written in HTML we'll need a callback that will load our text. We'll also need a callback which will save our text (and then display it).

Load Text

The first call back we can see is referenced in the makeEditable() function. In our example it's:

url_for('restaurantnote/show?id=' . $comment->getId() . '&mode=raw');

Which is a symfony route to the restaurantnote module and the show action with an argument mode=raw. Let's take a look at this action:

public function executeShow ()
{
    $this->restaurant_note = RestaurantNotePeer::retrieveByPk($this->getRequestParameter('id'));
    $this->forward404Unless($this->restaurant_note instanceof RestaurantNote);
}

All this does is load the text (in our case the [markdown] formatting) into a template.

Save Text

The save text url in our example is:

url_for('restaurantnote/save?id=' . $comment->getId());

Using the Ajax.InPlaceEditor the value of the text-area is saved to the value POST variable. We consume it in our action like so:

public function executeSave() 
{
    $note = RestaurantNotePeer::retrieveByPk($this->getRequestParameter('id'));
    $this->forward404Unless($note instanceof RestaurantNote);
    if ($note->getUserId() == $this->getUser()->getId()) {
        $note->setNote($this->getRequestParameter('value'));
        $note->save();
    }
    $this->note = $note;
}

The note is also sent to a template that renders it, so when the save takes place, the edit form will be replaced with the new text.

Conclusion

As you can see with some script.aculo.us and symfony, it's fairly easy to mimic "Digg-style" in-place comment editing. You can test out a real example by visiting reviewsby.us.

How to %^&* yourself over with giant to-do lists

2006-08-05T00:00:00-07:00

Q: How do you eat an elephant?
A: One bite at a time.

There's a problem with that adage. Your body can only eat so much over a given time. The elephant will probably spoil before you make a significant dent in it.

This is no different than someone who tries to tackle an impossible to-do list. Imagine, week after week, eating and eating at this elephant. You're digesting quite a bit, but there's so much left. You might just be inclined to give up and quit. You'll feel like you accomplished nothing (of value), even though you really did quite a lot of work.

No deadlines

The biggest mistake you can have with a to-do list is omitting a "due date" or deadline. If you're to-do list looks like...:

Write Novel

Shovel Snow

Cut up elephant

Train for triathlon

...then there's no concept of when these items need to get done. That means all these items are in the forefront at once.. or could be. A good start or end date will properly prioritize these:

Shovel Snow - 11/1

Cut up elephant - 11/23

Write Novel - 12/1-3/1

Train for triathlon - 4/1

So now, the novel is going to be written in winter. You're going to shovel snow on the first day of November. You'll cut up the elephant just before Thanksgiving. And you don't need to train for the triathlon until early spring.

The deadlines serve multiple purposes. The first is, you know roughly when to do what. You shovel snow next week. You write the novel in winter. You train in spring. The other important purpose is you know when to stop. A "deadline" means that line item or project or whatever has a "drop dead" date. That means you don't need to work on it any more. For example, if you don't finish that novel, you don't need to let it linger. Of course, if an item is really important and salvageable you can re assign a due date.

Too many items at once

Another related setup for disaster is having too many items at once. If you go to a buffet with the intent of eating the proprietor out of house and home, the best bet isn't to shove everything you intend to eat all at once on a plate. No, of course it'll look comical and you'll never finish. At least, you won't finish it before a lot of the food gets cold. Go up multiple times.

If you're master to-do list is too large, it can be overwhelming. Even if you get done with what's due now, just looking at items in the future will not only distract you, but take away from any sense of accomplishment you might get. It might help to just start your day with a small to-do list written on a piece of paper, or maybe in another file. Just look at that list until you finish. You don't need to think or plan for the future except at the very beginning of your day, and maybe at the end of the day once you've finished today's items.

Too detailed

The last disaster area is details. Too many details is when it takes more time to write down what you're going to do than to just do it. It's at this point where you're writing things down just to cross them off... and as satisfying as it might be at the time, over the long run you're not accomplishing very much.

My somewhat working system

Currently my working system takes a lot of this into account. I have one master todo list which I look at daily. I only focus on the top elements that are due in the near term, unless I have nothing due soon. Once I read that, I make a small list of things to do for the day or next block of hours. Once I'm through those (or once it's a new day) I start over.

The whole point of a to-do list is to have things that you'll do. Don't make a large list if it's undoable. It'll wear you down and prevent you from doing the few things you can do. Start small and you can go far.

Usability for Nerds: Traversing URLs

2006-07-30T00:00:00-07:00

A recent peeve of mine is URLs that you can't manually traverse. Let me explain. Let's say you visit http://reviewsby.us/restaurant/cheesecake-factory. You should manually be able to remove cheesecake-factory and see an index page of restaurants at http://reviewsby.us/restaurant/. It makes logical sense for that page to be something that would enable you to find more restaurants.

This is a throwback to static web sites, that consisted of directories and files. If you accessed a file by its name, you would see the contents of the file (possibly filtered by the server). If you accessed a directory, you would see an index of files. In the world of web apps, however, URLs are made up.

Web apps where these gaps are missing can be especially frustrating when you use your browser's history. Often I reference the symfony api. The URL is http://www.symfony-project.com/api/symfony.html. All the other URLs in the API listing begin with http://www.symfony-project.com/api/, so you could assume that http://www.symfony-project.com/api/ is an index page.

It's not the index page (http://symfony-project.com/api/symfony.html is). If you googled for sfConfig and got to http://symfony-project.com/api/symfony/config/sfConfig.html and didn't feel like figuring out the navigation structure... or let's say at a later date you're using your browser's URL auto-complete feature, you will get a 404 Error1.

Web applications can try to mirror directory indexes with pretty URLs, but often have a few gaps as every URL (or level of URL) needs to be designated in the app. Its a good idea to fill those in as it is another way to navigate a web site.

Not to pick on the wonderful symfony development team, but I truly do see this a lot on their site. I'm sure they'll setup a redirect or something to fix this. Or probably call me out on the fact that many of my sites violate this principle. ↩

Do you like see-food? See? Food.

2006-07-29T00:00:00-07:00

The nice thing about some restaurants is they pay extra special attention to presentation. That way if the food isn't to your taste, maybe it is at least pleasing to your eyes. We know that just a list of each dish and comments about said dish served at a restaurant isn't going to fly. But if we spruced it up with member-submitted pictures... well... now our eyes have something to see other than text and rating stars.

Now, who wants a sundae in a boat!

Restaurant Reviews By Us.

How to remove file extensions from URLs

2006-07-26T00:00:00-07:00

URLs should be treated as prime real estate. Their primary purpose is to locate resources on the Internet. So for a web developer, it makes sense to make things as user-friendly as possible. One effort is to remove the extensions from files. I don't mean things like .html or .pdf, as those give you an idea that you're reading a page of content or a PDF document. I meant things like .php or .asp or .pl, etc. These are unnecessary items that just clutter the location bar on most browsers.

There are two ways to do this. The easy way which just looks at a request, if the requested filename doesn't exist, then it looks for the filename with a .php (or .asp or whatever) extension. In an .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ $1.php [L,QSA]

Now if you go to: http://domain/about the server will interpret it as if you went to http://domain/about.php.

Makes sense, but if we're already breaking the relation between URL and filename, we may as well break it intelligently. Change that .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

Now if you go to: http://domain/about the server will interpret it as if you went to http://domain/index.php?q=about. How is this useful? Well now index.php is always called, so it can do anything common to all pages (which might be nothing) and do something based on the $_GET['q'] variable.

For example:

require_once('html_functions.php');
switch ($_GET['q']) {
    case 'about':
        echo myhead('about page');
        break;
    default:
        echo myhead('home page')
        break;
}
include($_GET['q'] . '.php');
echo myfoot();

We're loading a hypothetical library html_functions.php which contains some simple functions (myhead() and myfoot()) that print out a simple header or footer for this site. The switch statement dynamically sets the <head/>. After the switch we include a file based on the query string. In our case it will still pull up about.php. Granted, this is not what I use personally, but it's the general idea behind how symfony works.

Why?

So why go through all this nonsense? Extensions for the most part don't mean much to an end user. Sure, jpg, png or gif mean images and html mean web page and pdf means the file is a PDF document. Dynamic pages, however usually come from cgi, php, pl , asp pages or some other 3 or 4 letter extension that the server uses as a hint to determine how to parse, but the output is usually html. Servers are smart though. They don't need hints, and the above code eliminates the need to reveal so explicitly just how a page is delivered. Take our restaurant review site, for the most part you can't tell that it's done in php. In fact all the URLs are "clean" and somewhat logical. The benefit of having clean simple URLs is if we decide to change from PHP to ASP for example, we won't need to change our URLs.

Inverting color codes in Textmate

2006-07-19T00:00:00-07:00

I deal a lot with hex color codes in CSS. One thing I occasionally need to do is invert color codes. Normally this is something I could Google for, but I wanted a solution that didn't requiring constant reference.

My favorite text editor, Textmate, has a powerful automation system. I can write mini scripts in whatever language suitable and take advantage of the power of Unix shell scripting to execute them. From Googling, I learned enough ruby to learn that this:

printf("#%06X", 0xFFFFFF - STDIN.gets.gsub(/^#/,"").hex )

Will invert a hex color from standard input. What it's doing is fairly simple. It's using printf to print a formatted string. %06X means it should zero-fill the resulting string with up to six zeros, the same way a hex color string is (e.g. we write 0000FF and not FF to mean 'blue'). The rest is simple subtraction. We take FFFFFF, the hex code for white, and subtract the input from STDIN and arrive at the inverse of what we started.

Now to add this to TextMate we open Automation|Run Command|Edit Commands... and create a new command:

echo $TM_SELECTED_TEXT |ruby -e 'printf("#%06X", 0xFFFFFF - STDIN.gets.gsub(/^#/,"").hex )'

This echo's whatever is selected and pipes it to the ruby script. We set the command to input selected text and replace the selected text on output. Furthermore we can bind it to a keystroke. I chose Control-Alt-I, as it is unused on my system.

Voila, I can highlight any hex code and instantly invert it.

To keep this on one line, I neglected a few friendly features. One is interpreting 3-digit hex colors (e.g. #ccc), and the other is knowing whether or not to place the # in the result. If you can come up with an elegant solution, please post it below. Otherwise I hope this helps.

Safari Fixes

2006-07-11T00:00:00-07:00

Safari interprets /* */s differently than FireFox or IE. FF and IE will ignore a unmatched /* or */, whereas Safari will ignore parts of code if there's a lone */. Once I found that out, I was able to get the list items that are used throughout the site to render properly.

Going international... kinda

2006-07-06T00:00:00-07:00

Some of the first non-Minnesotan restaurants to show up were Flying Dog, Bangalore and Konstam... all of them outside the US. Wasn't expecting that... but then again, I wasn't really surprised.

I finally updated our location tables to account for different countries. Currently it'll only plot what it can Geocode, and relies exclusively on Yahoo! for GeoCoding.

I've only tested this with a Canadian restaurant. Hopefully it'll work elsewhere soon. If anybody plans on adding any non-US, non-Canadian restaurants, let me know if you can figure out how to GeoCode things properly.

Also, I'm pleased as punch that the map on the homepage shows three states as having recent restaurants. Rock on!

Going international... kinda

2006-07-06T00:00:00-07:00

Some of the first non-Minnesotan restaurants to show up were Flying Dog, Bangalore and Konstam... all of them outside the US. Wasn't expecting that... but then again, I wasn't really surprised.

I finally updated our location tables to account for different countries. Currently it'll only plot what it can Geocode, and relies exclusively on Yahoo! for GeoCoding.

Also, I'm pleased as punch that the map on the homepage shows three states as having recent restaurants. Rock on!

Dynamic Linking to Syndication Feeds with symfony

2006-07-04T00:00:00-07:00

Adding a statically-linked syndication feed, a feed that is the same no matter where on the site you are, is a cinch with symfony, but what about dynamically linked syndication feeds? Let's say we're building the latest and greatest Web 2.0 app, there's going to be hundreds of RSS feeds, not just the most recent items. We'll want the latest comments to a post, the favorite things of a website member and it all has to be feed enabled. Sure, we can slap a link to the RSS feed and call it a day, but let's go a step further and stick it in the <head/> area as well. That way when someone clicks on the RSS icon in their browser, or adds a web page to Bloglines those extra feeds can be found.

Expanding your head

A typical layout.php for a symfony app will have a <head/> section like this:

<head>
    <?php echo include_http_metas() ?>
    <?php echo include_metas() ?>
    <?php echo include_title() ?>
    <?php echo auto_discovery_link_tag('rss', 'feed/latest')?>  
    <?php echo auto_discovery_link_tag('rss', '@feed_latest_georss', 
    array('title' => 'Latest Restaurants\' Locations (GeoRSS)' ))?>     
    <?php echo include_feeds() ?><!-- this is the custom feed includer -->
    <link rel="shortcut icon" href="/favicon.ico" />
</head>

Since this is in the reviewsby.us layout.php, the latest feed and the latest GeoRSS feed (which we developed in this article) will show up on every page. So for example, if you use FireFox, you can subscribe to either link when you click on the orange feed icon () in the URL bar no matter where you are in the web-application.

To expand this to allow for multiple feeds, we need to include <?php echo include_feeds() ?> (before or after the auto_discovery_link_tag calls makes the most sense).

Making the Feed Helper

Let's created a FeedHelper.php to put the include_feeds() function (don't forget to add use_helper('Feed') to your layout.php).

The function looks like this:

function include_feeds()
{
    $type = 'rss';
    $already_seen = array();
    foreach (sfContext::getInstance()->getRequest()->getAttributeHolder()->getAll('helper/asset/auto/feed') as $files)
    {
        if (!is_array($files))
        {
            $files = array($files);
        }
        foreach ($files as $file)
        {
            if (isset($already_seen[$file])) continue;
            $already_seen[$file] = 1;
            echo tag('link', array('rel' => 'alternate', 'type' => 'application/'.$type.'+xml', 'title' => ucfirst($type), 'href' => url_for($file, true)));
        }
    }
}

The function is doing what the deprecated include_javascripts and include_stylesheets functions did, just with syndication feeds. Also note, I stuck to just using RSS feeds. This function can no doubt be extended to Atom or other feed types, but for my purposes it was unnecessary¹.

Dynamically setting the feeds

In the reviewsby.us site, the menu items are tagged. There's tags for chicken, indian and bread for example. Each of them are to have an associated GeoRSS feed as described in a previous tutorial. I built our tagging system similar to Askeet. So in our tag module I created a function in the corresponding actions.class.php:

public function addFeed($feed)
{
    $this->getRequest()->setAttribute($feed, $feed, 'helper/asset/auto/feed');
}

This sets the attribute that include_feeds() pulls from. Here $feed is simply the route to our feed. So in our executeShow() I just make a call to $this->addFeed('@feed_tag_georss?tag=' . $tag). We're done.

We can now go to any of our tagged pages. Let's try chicken and see that we can subscribe to a GeoRSS feed of restaurants serving dishes tagged as chicken.

Slight problem. The title attribute of the generated link tags are always Rss. That can be mildly unusable.

Throwing feed titles into the mix

Let's change our addFeed() to allow for a second parameter, a title and have it store both the route and the title in the request attribute:

public function addFeed($feed, $title = null)
{
    $feedArray = array('url' => $feed, 'title' => $title);
    $this->getRequest()->setAttribute($feed, $feedArray, 'helper/asset/auto/feed');
}

We'll also need to adapt the include_feeds to appropriately accommodate associative arrays:

function include_feeds()
{
    $type = 'rss';
    $already_seen = array();
    foreach (sfContext::getInstance()->getRequest()->getAttributeHolder()->getAll('helper/asset/auto/feed') as $feeds)
    {
        if (!is_array($feeds) || is_associative($feeds))
        {
            $feeds = array($feeds);
        }

        foreach ($feeds as $feed)
        {
            if (is_array($feed)) {
                $file = $feed['url'];
                $title = empty($feed['title']) ? $type : $feed['title'];
            } else {
                $file = $feed;
                $title = $type;
            }

            if (isset($already_seen[$file])) continue;

            $already_seen[$file] = 1;
            echo tag('link', array('rel' => 'alternate', 'type' => 'application/'.$type.'+xml', 'title' => $title, 'href' => url_for($file, true)));
        }
    }
}

Note, there's a function is_associative(). It's a custom function that we can place in another helper:

function is_associative($array)
{
  if (!is_array($array) || empty($array)) return false;
  $keys = array_keys($array);
  return array_keys($keys) !== $keys;
}

It's a clever way of determining if a function is an associative array or not.

Conclusion

It looks like our GeoRSS feeds are on all our tag pages. Now we can take our favorite items labeled as Indian food and easily add the URL to a service like Bloglines and have it keep us up to date on new Indian dishes. This was simple, especially when much of the work was taken care of by the framework.

Most clients support RSS so unless there is a compelling need to use Atom or another format, then keeping it down to one choice is always your best bet. ↩

Comment editing in reviewsBy.us

2006-07-02T00:00:00-07:00

Something that's been heavily requested for reviewsBy.us is the ability to either preview or somehow edit comments after they are posted. I took a cue from digg and added some comment editing.

Since the last time we updated, the RSS feeds work better too thanks to a patch to the symfony. Also, the basis for a user profile is in place.

Working Backwards as a Way to Prioritize Tasks

2006-06-29T00:00:00-07:00

I handle multiple projects at once, and sometimes I get lost and forget what needs to get done. The biggest day of my life was a few weeks ago. I had a milesstone for a major project due for my 9-5 in this month. And I also have this blog, and a community-run restaurant review site to take care of. So figuring out what needs to happen and by when is extremely beneficial.

Sometimes a strategy that works to complete tasks is working backwards from your goal. So the pre-requisite here is to have a well-defined goal. Even though this is a programming blog, let's take my wedding for an example. The end goal was that the ceremony and reception go off well enough that Katie and I are happy (it did). That's pretty vague, so let's look at a single aspect of the wedding. For example, one detail is having a wedding program. 500 wedding programs needed to be printed and delivered to the temple by Saturday morning (17 June 2006). This is a more defined goal, or component of the overall goal.

Let's break it down:

What we need is to Deliver the programs
- We'll need to fold the programs
  - but before we can do that we need to print the programs
    - we'll need to first get paper
    - and actually we need to know what we're printing

Easy task, didn't need to be broken down much, but it serves our purposes.

Prioritization - Get the Minimum Done First

Working backwards on it's own is good for giving you a list of what to do and even when to do it by. But it doesn't necessarily tell you what order to do it by. In fact, order might not matter, but if you're in a slump and don't feel like doing anything, having a prescribed order can help.

Now that we know the end goal, let's see if we can extract what the minimum is. If we follow along with our wedding program example, the minimum would be a sheet of paper with a list of events. No details, no participants, just events. That's easy, a cut-and-paste from an email that our officiant sent us and we're done.

By getting the minimum done, we at least have something. Sure, we might want something fancier with an elegant design and good descriptions, but even if we botch that up for some reason we can rest easily knowing that we got our bases covered.

Finish Building an Onion

Finishing out the wedding program is a snap. We need to make some estimates first. We can improve on the program as much as we wanted, but we needed to stop by Thursday so we'd have enough time to print and fold them.

Timeline:

Delivery: half-hour
- Folding: a couple days (it took only a few hours, but we can only print/fold so much at once)
  - Print: a couple days (see above)
    - get paper: :15 minutes
    - making the program better: remaining time

So in the remaining time, we came up with small revisions (essentially our onion skin layers) to our minimum. For example, finding descriptions of each event as a first revision. Our next revision can be rewriting Sanskrit headings in Devanagari script. Our final revision can be plopping this all in a nice layout design in Adobe Illustrator.

All these steps are gravy. We already had a product that was satisfactory, now we're moving from satisfactory to pretty good to excellent.

Conclusion

So, no, this isn't just applicable to wedding activities, but it's a great way to prioritize tasks for any project. When I develop new web sites, like reviewsby.us, I first try to figure out what my goal is: to a have a list of the things I like to eat at various restaurants. All I need to do is build a simple on-line list. Beyond that, I can add features, and web 2.0 fluff that'll make it more fun to use, but as long as I got the core, that's all I need to have up to have this site be useful to me. Each additional step adds more value to myself and others.

Breaking IE 6 with links on PNG backgrounds

2006-06-27T00:00:00-07:00

In IE there's a whole slew of troubles with PNG. One such trouble is links or anchors will not work in IE if you have a PNG image that has gone through the Microsoft [AlphaImageLoader], which is the only known way to render PNGs in IE6.

The solution, involves running the image filter on a separate element, and then positioning all the links within that element in a higher z-order. This is explained in better detail in Filter Flaws.

I've been running into too many designers who have been sending me too many designs that require translucent layers, and alpha-transparencies (and they should be able to, even though the trend is more simple these days). This of course subjects me to pretty much any strange quirk that IE6 can dish out with PNGs.

What's frustrating is that 5 years ago I had PNGs problems. This is the Internet... very few problems on the Internet last that long. There's certainly been enough people complaining about this malfunction in IE for years.

The problem with these problems is there is no "right" solution. Using [AlphaImageLoader] is a hack. As we can see with laying links upon backgrounds that use the loader, it's prone to behavior we don't normally expect. We shouldn't have to raise the links above an invisible layer, in order to click on them.

Unfortunately as long as the majority of our users continue to use IE 6 (or older) we'll be stuck with this problem. If we look at adoption rates it won't be until a year after Internet Explorer 7 is out until it's the top dog. Even then, if Firefox is still at 10% marketshare, that leaves another 40% with IE6 (or less) and the less popular browsers. We're still stuck with this problem for some time.

Random Selections using Propel

2006-06-12T00:00:00-07:00

Propel is a handy way to deal with ORM. Rather than figuring out the correct SQL statement to select your elements you just use a -Peer object to select it.

The one drawback is there's no way of choosing an object at random. You can select the first element of a result set, but not a random one without some changes to your -Peer class.

The quick and dirty fix that I did is to use custom SQL to populate a propel object. It's a rather suitable approach for more complicated selects. So here's how we randomly select things:

$con = Propel::getConnection('propel');
$sql = 'SELECT %s.* FROM %s ORDER BY RAND()';
$sql = sprintf($sql,MyObjectPeer::TABLE_NAME,MyObjectPeer::TABLE_NAME);
$stmt = $con->createStatement();
$rs = $stmt->executeQuery($sql, ResultSet::FETCHMODE_NUM);
$objects =  MyObjectPeer::populateObjects($rs);
$object = $objects[0];

If you know you're going to only use one object, SELECT %s.* FROM %s ORDER BY RAND() LIMIT 1 will work as well.

How do I... on a Mac? A software solution guide for OS X

2006-06-09T00:00:00-07:00

I've been doing web development as well as other "computer stuff" with Powerbooks for four years. I'm currently in a happy place where I've got a nice set of tools with which I can use to accomplish many tasks.

This guide was inspired by this Firefox Extension guide. This guide covers how I tackle tasks in OS X and how I've seen others tackle tasks. I plan to regularly update this piece (software guides can get stale fast) and will incorporate suggestions left in the comments.

Hopefully people who are wondering about making the switch from Linux or whatever to OS X will find this guide as reassuring and helpful. There's quite a bit more out there than what I have listed, but if I attempted to list every option, I'd never be able to finish this guide.

Internet: How do I...

Surf the web?
- Camino
  
  Camino combines the Mozilla Gecko browser with Apple User Interface. If Firefox's lack of UI integration bothers you (e.g. lack of services menu support), try Camino. Out of the box it blocks advertisements and popups. It does lack the extensibility that Firefox has, but otherwise is a worthy browser. It's fast and it gets the job done.
- Firefox
  
  I used to prefer Firefox, despite its shortcomings. There are so many extensions available that no other browser comes close. When I'm developing websites this must be open with Firebug and the Web Developer Extension
- Safari
  
  This is a Apple's very own browser based on KHTML (Konqueror, etc). I don't use this myself, but I do use other Apple WebKit based applications. It is elegant and integrates well with the rest of the OS.
Check my Email
- Gmail
  
  Gmail might be a web-app, but it works rather well as an email solution. It can even integrate into OS X with the GMail Notifier.
- Mail.app
  
  Apple's built in Mail.app is a good choice if web-mail isn't an option. It integrates well with the Address Book and even iChat.
Upload my Files

Transmit does FTP and SFTP. It allows you to edit files "remotely." This is a huge boon for all those tiny style sheet changes you might need to update. It is trial ware, but it is a great GUI for something I have to do everyday.
Read blogs

NetNewsWire lets you categorize and browse your feeds. With the Pro version, you can specify a lot more details. There's per-category and per-feed customization for period of downloads. NNW also synchronizes with the Bloglines web based news reader. This allows you to read your feeds using NetNewsWire go to work, or a friends house, and read them at Bloglines. All my feeds are added to Bloglines except for some testing ones and some private feeds from LiveJournal.

See Add to Bloglines from NetNewsWire
Update my LiveJournal

Xjournal lets you edit entries, set privacy settings, edit your friends list and do a whole lot of whatever else you want to do on LiveJournal.
Chat
- ichat AV
  
  ichat will probably serve most peoples needs. It supports AIM and Jabber (e.g. GTalk). It also does video and audio chat.
- Adium
  
  Unfortunately, my friends and contacts can't agree on ~~which IM service to use~~ GTalk. So I use Gaim-based Adium. Adium does pretty much all the major protocols, it's open-source and has a lot of plugins. What's not to love? It's even being included in the Summer of Code 2006 so that it can be more integrated with GTalk.
- Skype
  
  Skype was a life saver when we had broadband in our Hotel in India this January (2006). Free voice chat within the US and plenty of accessory phones to go along with it.
Steal movies and music from starving artists and industry associations

Trying to find that new Jonathan Coulton song? Acquisition might be able to help you or maybe even some of it's free derivatives. Acquisition keeps getting better with each version and allows you to filter out what you aren't looking for. This is a feature that is lacking from much of the software anywhere.
Collaboratively steal movies and TV shows

BitTorrent offers a unique method of distribution. There are a number of BitTorrent clients, including Acquisition. However, due to the sheer number of plugins (I suggest trying some of the RSS plugins), your best bet might be Azureus, a cross-platform client.

Programming: How do I...

Keep my files under version control

Subversion is my version control software of choice and I prefer using a combination of the command-line client, available via Fink (see below) and svnX. svnX makes it easy to see at a glance just exactly what needs to be committed. It also allows me to browse the repository and find just what I need.
Write code
- TextMate
  
  TextMate is an excellent editor for automating editing tasks. With features like "snippets," cutting and pasting boilerplate code is a thing of the past. If it doesn't support the language you want, it's easy to remedy that and write your own bundle.
- Xcode
  
  Xcode is Apple's IDE. If you're writing Objective-C or Java, Xcode might prove useful. For writing Cocoa applications, the bulk of your work involves dragging connections and defining relations between elements. The "legwork" of writing actual code, is assuaged with an editor that features what you'd expect: folding, auto-completion and syntax highlighting.
Get my fix of Unix goodness
- Fink
  
  Before I bought my Mac, the first thing I looked for was something like Fink. Fink uses debian packaging of Unix utilities for the Mac. It's great. There's an easy installer that puts the fink environment on your computer and then you've got debian style package management:
```
sudo apt-get update
sudo apt-get upgrade
```
For that svn utility, you'll want sudo apt-get install svn.
- iTerm
  
  If you use the Unix shell a lot, you'll want iterm for it's tabbed interface. It also has a handy feature of bouncing in the dock if something has changed in a background tab.

Multimedia: How do I...

For the most part, Apple's iLife can take care of your multimedia needs. Playing video is the exception (in this guide), since there are so many formats available, Quicktime only can support a small subset of these. For the non-Apple user, this section a useful overview of just what can be done fairly easily with a Mac.

Listen to Music, Burn a CD, rip a CD

itunes does a good job of putting all the things that you might need related to your music collection, in one place. The os x version is a lot less frustrating than the Windows version, so don't let your past experiences taint your perception of iTunes.
Organize my photos, burn them to a DVD, make slideshows

iphoto is a giant beast, but it does do quite a bit. It manages large collections of photos. You can easily download them off your camera, and then categorize them as necessary. Want to share them? Burn it onto a DVD and give it to your family. Want to make a slideshow set to music from your iTunes? That's not a problem either.
The entire iLife suite is fairly well integrated. My family always wants us to bring our digital camera so we can put together a cheesy slideshow on DVD. Good thing it's easy.

If you have a lot of photos there are some tools like iPhoto Library Manager that can make your life easier.
Make a DVD of my Videos and Photos

Create DVD menus, order photo slideshows and movies around, add music. You can do all of this with iDVD.
Edit movies

If you want to actually edit home movies, iMovie can help. You can pull in photos to make slide shows, synchronize it with audio tracks, add in video from other sources.
Watch video files
- Quicktime
  
  The obvious choice on a Mac is Quicktime. Quicktime however lacks some of the codecs that are popularly circulating the internet. These days you can find much of what you want on YouTube or Google Video and not have to worry too much of compatability issues.
- Flip4Mac: Make Quicktime work
  
  Flip4Mac allows you to play Windows Media Files using Quicktime. All but a handful of <acronym title="Windows Media Video">WMV</acronym> files play with this installed.
- VLC
  
  VLC is a cross-platform video client that can play just about anything that Quicktime can't with the exception of a handful of certain <acronym title="Windows Media Video">WMV</acronym> files. Chances are if you can't play it with either this or Quicktime, it can't be played on the Mac.

Productivity: How do I...

Do more from my keyboard/automate things/find things faster

Quicksilver, as discussed previously, can speed mundane things up severely:

Quicksilver is a the GUI equivalent to the command line. You can launch applications or files or perform any number of operations on those files or applications. With its powerful collection of plugins you can have it do much more, for example you can take a music file and play it in iTunes within the iTunes party shuffle. Or take an image file and have it submit to flickr with a few simple keystrokes. Initially, I couldn't get an idea of the application, other than a lot of people loved it. Now, I'm barely using it to its potential and I love it. Using a computer without it is quite a drag.

If you need to launch things faster or do more things from the keyboard quickly, get this.
Keep track of things to do and other lists

I didn't at first use OmniOutliner because I didn't understand the point of an outlining software. It makes outlines, so what? After reading enough of 43Folders, however, I decided to check it out. Now it's the key to my productivity. I keep task lists for several projects in OmniOutliner and I actually get them done. Something about hierarchical groupings and the ability to add any number of columns to a task make this such a useful tool. I've got todo lists with are checkboxes, descriptions, dates, notes, estimates, etc. If I'm asked to bid on a project, it takes almost no time for me to drop it into OmniOutliner, split it up into smaller chunks, and throw together an estimate.

Conclusion

There's a lot of software I'm sure I missed. But my intent here was to cover a healthy slew of applications that I used myself to get various tasks completed. I'd like to hear about your favorites and what you think works best on your Mac.

Add to Bloglines from NetNewsWire

2006-06-08T00:00:00-07:00

I use NetNewsWire in conjunction with Bloglines and often come across new feeds from within NetNewsWire that I'd like to add to my Bloglines (versus adding it directly to NetNewsWire).

Bloglines is my sandbox for new feeds until I deem them worthy enough to read in NetNewsWire. So here's an AppleScript to feed (no pun intended) my RSS addiction:

or save this apple script to ~/Library/Application\ Support/NetNewsWire/Scripts/.

Spindrop objectives

2006-06-05T00:00:00-07:00

I had wanted to write about this later, but Darren at ProBlogger started this group writing project on "Blog Goals." So I am jumping in quickly. This blog was created for two reasons, one, to document any technical things that I've learned, code samples, best practices, strategies, etc. as they pertain to web development and open source. The second is to serve as a site to record updates to any of my projects.

I'm still in my infancy for this blog, but I've seen a lot of little things that keep me optimistic.

The objectives I have for Spindrop are both internal and external. Internal goals are things that I can change myself. For example, the style of the site, linking to other places, posting more content, changing the way ads are presented, etc.

External goals depend on readers like you. I can do my best to make this site be relevant to a lot of people, but I can't make people click on my site, comment, or any of that. I can still make goals for them, and that will subconsciously get me to position myself better.

They are both related. If I achieve my internal objectives, I'm better suited to getting external objectives done. If I get my external objectives done, it encourages my behavior of making the site better.

What am I willing to do

My "9-5" is a fairly demanding job as a lead web developer for a health and wellness website. On top of that, I'm getting married this month, so I'm very pressed for time when it comes to a side project like this. Luckily I'm very well organized, and do wake up early and spend time writing.

Writing

In an OmniOutliner file, I keep a detailed list of what I'll be writing as well as other "to-do list" items for this site. I've already taken into account that I'm not going to be pushing anything useful for the week or two surrounding my wedding. Hopefully, I can still muster two or three articles this month. Some of those articles are on software choices, strategies for using propel and symfony and general work habbits.

By spending an hour (or more) a day on writing, I'm generally looking over things and making sure I did a halfway decent job. I prefer not to have typos, spelling errors, etc, I prefer to have a readable article, and I prefer to throw in images, when useful. Of course, I do this early in the morning, so there are mistakes. But, I've noticed a lot of heavy hit articles on del.icio.us and digg have typos too.

Non-content changes

I'm willing to tweak ad placement, and practice all the other ad-voodoo that is involved with blogging. I'm also willing to announce the site at appropriate moments, communicate with people via forums and other blogs. I'm willing to listen and execute on others advice. The best advice I've heard is to stick with it.

What can I get at the very least?

With all my efforts, at the very least, I know I'll have something to show for. For one, I tend to do things over and over again. I'm a web developer, and the bulk of my blog is about how to do things I've done before. So if I have to make another map or migrate a blog, I can see how I did it before. Now, anything else this blog achieves is gravy.

External goals

Some of my hopes for the site are out of my control. I want what a lot of other blogs want: traffic, revenue and community. Additionally I want traffic to be sent to my other sites, like the reviewsby.us site so that they can share the success.

Traffic

The most important goal for me is traffic. I want this site to get a lot of traffic. For the last two weeks, I've averaged 112/users a day. Of course, part of that is due to a spike because of last Friday's article on Editing CSS from Firefox which had an anomalous amount of hits due to getting on reddit, del.icio.us popular, digg.¹

Traffic is important because I without it I can't expect to have revenue or community. There's also a sense of validation that you have something useful to say, and sites like del.icio.us make you feel that not only was it useful, it's worth hanging on to.

Revenue

I'd like to earn enough to actually make blogging make a significant change in my lifestyle. Right now it's a hobby. A dedicated hobby, but it's still a hobby. I love writing, I love to see myself improve, I love what I write about. I'd like to continue to do that full time. I'm sure with some tweaks to adsense and some other forms of advertising, I can kick that up. But content, which attracts traffic, will be the biggest driver of them all. My less-than-"adsense optimized" restaurant review site generates a lot more money (seriously, we're talking in small terms, like the cost of an iced tea), but it has a lot of content and a lot of useful ads that get generated from adsense.

Last month (May 2006) I made just shy over $2.00 from the web site. That's not much, but it's better than $0. I'd like to make $4 in a given month. On one hand it's a doubling of earnings, but on another, it's not very much money. I'm not expecting to double the earnings this month, although I might easily do that, but I am expecting to hit that $4 mark eventually. It's an easily obtainable goal, but for me easy goals are good. I feel just as good when I hit them, as I would if I got a raise or a bonus at my "9 to 5."

Community

I'd like for there to be some level of interaction with me. I don't mean community in the LiveJournal sense of the word, I just want some interaction with me the poster, and my commenters. The last week or two has seen a few "real comments," which is promising. I hope that trend continues over time. It's an opportunity to improve myself if I get good feedback, and it's an opportunity to further express or clarify a point. I also like to help people out.

Linking out to my other sites

Lastly, I do want this site to assist my other sites. With a decent amount of traffic, this site can be a great link in to my other sites, and bring them up to speed.

Conclusion

Overall, I'm happy where I am, and I'm happy where I intend to go. Each week brings in a new useful content which is a nice record of how I do things, and proves some degree of usefulness to others.

I hope to expand on those strengths. This body of content might be small now, but it only gets bigger. My long term goal is to be able to generate the traffic and revenue I need so I can justify dedicating more time to this project.

Perhaps it's not anomalous, but if you saw my statistics you'd understand why I might think so. ↩

Welcome Performancing Users

2006-05-31T00:00:00-07:00

Referral percentages, the blue is Performancing.com

Yesterday I took advantage of the Performancing launchpad to announce reviewsby.us to the blogging world. Jumping at the opportunity was smart, I was the second site on the launchpad and made it to the homepage. As a result, I had probably my largest day of traffic (it's not a whole lot, but it's definitely noticeable in these early stages).

We also got a few new users and a few new restaurants. So check it out.

Polls

2006-05-31T00:00:00-07:00

I decided to install Democracy for WordPress. This was partially inspired by Darren's post at Problogger and for my own development efforts for the restaurant review site. Not sure if it allows you to change your vote, that would be useful for the first poll. I suppose we'll find out.

So the first poll is deciding on the next feature to implement for reviewsby.us. I've seeded it with some of the top requests I've heard/felt. But I'd like to hear other peoples ideas. If you're not familiar with the site, take a look and tell me what you think.

Note: For most people the poll is on the left sidebar.

ReviewsBy.Us bugfixes

2006-05-30T00:00:00-07:00

A lot of bugs have popped up recently.

Logins

The logins weren't redirecting people to the correct place. Unfortunately the login system still needs a lot of work. I am probably going to rewrite it completely. It doesn't consistantly remember where you are coming from or where you intend to go after logging in. I'll be jotting down a clean system to log people in propperly.

Latitude and Longitude even more precise.

A small error in the database definitions resulted in lat/longitudes of restaurants that were greater than 100 (or rather abs(x) > 100 where x is latitude or longitude were being truncated to 100 or -100. This was easily fixed so things should look just right on the maps.

Quicksilver + TextMate = craZy delicious development environment

2006-05-28T00:00:00-07:00

UPDATE:Cmd-T allows you to search for the files in your currently opened TextMate project. I learned this shortly after writing this post, but forgot to mention it. Thanks again to Tyson Tune for pointing that out.

There's a number of tools for the OS X that help me with my productivity (and unfortunately have no equivalents on other platforms). Quicksilver, a launcher, and TextMate, a text editor work wonders and together work fairly well.

Quicksilver is a the GUI equivalent to the command line. You can launch applications or files or perform any number of operations on those files or applications. With its powerful collection of plugins you can have it do much more, for example you can take a music file and play it in iTunes within the iTunes party shuffle. Or take an image file and have it submit to flickr with a few simple keystrokes. Initially, I couldn't get an idea of the application, other than a lot of people loved it. Now, I'm barely using it to its potential and I love it. Using a computer without it is quite a drag.

TextMate is similarly feature rich and elegant. Just using a small number of its features makes it worth its cost. All my symfony projects are written using TextMate as are my articles for this web site. It's strength for me is its automation. Together Quicksilver and Textmate make a winning combination.

Projects in TextMate

I like the concept of "projects" in TextMate (its common to a lot of text editors). You can drag files or folders into TextMate and group them as you see fit.

Many of my projects are written using symfony, so I'll try to keep the entire project folder in my TextMate project. Additionally I'll keep the symfony libraries if not the entire PHP libraries referenced in the project as well. Now I have access to all of my files with relative ease. I generally create a file group in TextMate of frequently accessed files to bypass the pain going through hierarchies of folders.

If I have a TextMate project open, anytime I open a file that belongs in that project, it will open in that project window. That means if I use the mate command line utility, Finder or even Quicksilver, it'll still open in the project window. This is useful.¹

Catalogues in Quicksilver

When you open up Quicksilver and type in some letters, it searches some catalogues by default (e.g. Applications, Documents, Desktop, etc) in an attempt to figure out what the "subject" of your action to be. These catalogues are fully customizable, so it's trivial to add the directories of your project and your libraries into Quicksilver.

New Workflow

Now that you've setup your project in TextMate and added the same directories to Quicksilver, you'll have a much improved workflow. If you save your TextMate project in your Documents directory, you need only open Quicksilver (I use Command+Space as a shortcut) and type a few letters of the project (for example, I named my project file reviewsby.us for my restaurant review site).

When that's open, I can now open any file of that project in anyway I feel necessary. Let's say I need to open a library file, like sfFeed.class.php. I need only type in a few letters and it opens inside my project.

This process now saves me a ton of time in digging through hierarchies of folders upon folders. It's many times quicker than Spotlight. Give it a try, there's thousands of uses for it, this is just one way I use it.

While debugging errors in a project, if PHP tells you a certain file gave you a certain error, you can highlight the filename in Safari (or any other Cocoa browser), hit Command Escape (or whatever custome keystroke you setup for sending selection to Quicksilver), hit Enter and have it show up in TextMate. ↩

Google Analytics

2006-05-26T00:00:00-07:00

I've also jumped on the Google Analytics bandwagon and added a lot of the sites in "family." If you're familiar with Urchin, it has a similar feel to it. It almost feels a bit lighter feature-wise. There's a few issues I will take with it:

When they list links to your site (e.g. /login) they don't hyperlink it.
I'd like to drill down to raw data. I like to make my own correlations. Heck, I want to drill down to see if I should filter someone from the list.

Other than that, I like the potential that this will offer me. This combined with Google Sitemaps will provide powerful analysis of the site. As it stands, Katie and I should be eating at the Cheesecake Factory and non-chain restaurants as we seem to do well in the ranks and I need to write more about maps.

More usable approach to adding restaurants

2006-05-25T00:00:00-07:00

The "lazy" approach to usability is to just use a web site or application yourself and use usability heuristics. This is what I do, and it's why I have a huge to-do list of things to fix on the site. Lately to build out the site content, I've been going to a lot of restaurants not listed on the site. This means I have a multi-step process after I eat:

Add a new restaurant.
Add a location.
Add a review of the restaurant.
Rate the restaurant
Add all the menu items I ate.
Tag the menu items.
Write a review of the menu items.
Rate the menu item.

For everyday users, I don't expect 1 or 2 and only a few of 3-8, but 1 is a requisite and 2 is nice for maps and just being able to get information quickly. I did want to streamline this process, so I made a combined form that does 1,2 and 3 all in one place. That's just six steps:

Add a new restaurant.
Rate the restaurant
Add all the menu items I ate.
Tag the menu items.
Write a review of the menu items.
Rate the menu item.

For most users it makes sense, since most restaurants just have one location - or if they are adding a restaurant they are only thinking of a specific location.

I also took the opportunity to do a check on restaurant names. If you attempt to enter Green Mill twice, you'll be prompted that a restaurant with that name already exists. It's not a very smart check, but it should serve it's purpose.

AJAX star rater for symfony

2006-05-23T00:00:00-07:00

Francois from the symfony project beat me to the punch. I was going to post a detailed how-to on adding a star-rater to your web site (similar to the one's I created for reviewsby.us), but for most of you this should do the trick. Unless people request it sooner, I'll hold off on publishing the details on my star-rater for a while. It only offers a few minor differences (IMO advantages) to this snippet.

Migrating from Drupal (4.7) to Wordpress

2006-05-19T00:00:00-07:00

I helped Katie setup her new blog this weekend and decided that WordPress offers much of what I want out of this blog for a lot less effort than drupal¹. I decided it might be worth my time to now while this blog is in it's infancy to try converting from drupal to WordPress.

The way I start most of my projects is with a plan:

Discovery: Find any articles about converting and get a gist of what to do.
Implementation
- Create a temporary subdomain to install WordPress
- Install WordPress
- Copy all content
- Copy all static pages
- Configure URLs to match the existing site ²
- adjust templates
- split entries correctly (i.e. change  to )
Make the switch when I'm satisfied

I'm really confident that this will be easy. I don't even have to worry about comments or anything, since this blog is pretty new, but I can demonstrate how to take care of the.

Discovery

This post details a migration path from drupal to wordpress. Some considerations had to be made since I'm using drupal 4.7.

Implementation

Copy content

I followed most of the instructions, with some alterations from vrypan.net.

I installed WordPress and in mysql ran the following commands:

use wordpress;
delete from wp_categories;
delete from wp_posts;     
delete from wp_post2cat;
delete from wp_comments

I run my drupal site in the same database server, so the data copying was a snap. If you aren't so fortunate, just copy the relevant drupal tables temporarily your wordpress database.

First we get the drupal categories into WordPress:

USE wordpress;

INSERT INTO 
    wp_categories (cat_ID, cat_name, category_nicename, category_description, category_parent)
SELECT term_data.tid, name, name, description, parent 
FROM drupal.term_data, drupal.term_hierarchy 
WHERE term_data.tid=term_hierarchy.tid;

Again with the posts:

INSERT INTO 
    wp_posts (id, post_date, post_content, post_title, 
    post_excerpt, post_name, post_modified)
SELECT DISTINCT
    n.nid, FROM_UNIXTIME(created), body, n.title, 
    teaser, 
    REPLACE(REPLACE(REPLACE(REPLACE(LOWER(n.title),' ', '_'),'.', '_'),',', '_'),'+', '_'),
    FROM_UNIXTIME(changed) 
FROM drupal.node n, drupal.node_revisions r
WHERE n.vid = r.vid
    AND type='story' OR type='page' ;

And the relation between posts and categories:

INSERT INTO wp_post2cat (post_id,category_id) SELECT nid,tid FROM drupal.term_node ;

And finally comments:

INSERT INTO 
    wp_comments 
    (comment_post_ID, comment_date, comment_content, comment_parent)
SELECT 
    nid, FROM_UNIXTIME(timestamp), 
    concat('',subject, '<br />', comment), thread 
FROM drupal.comments ;

I ended up moving the one static page I had into WordPress's "pages" section manually.

Since my pages are written in Markdown, I enabled the Markdown for WordPress plugin.

URLs

Now for the real test. I needed to go through each page on my site and see if I could get to it using the same URLs. Since I had only 14 posts, I did this somewhat manually. I used drupal's built in admin to do this from most popular to least popular. Most URLs worked fine. There were a small number that didn't for various reasons, I used custom mod_rewrite rules to handle them.

Adjusting Templates

My drupal template was fairly clean and simple. So I adjusted the CSS for the default theme in WordPress until I got what I liked. Very minimal changes had to be made to the actual "HTML."

Make the switch

Well, time to make the switch. In the WordPress administration, I just had to tell it that it's now going to be located at spindrop.us. Then I moved my WordPress installation to the spindrop.us web root. It was a snap. Let me know if you have any troubles.

Taxonomy, legible URLs and trackback support all seemed quite difficult to master in Drupal. In Wordpress they appeared to be available standard or with a minor change in the administration panels. ↩
This is a prime reason why URLs should be clean and make sense to the end user, not the programmer of the publishing software. ↩

Comment Anonymously at ReviewsBy.Us

2006-05-18T00:00:00-07:00

I decided to overhaul the comment system on the reviewsby.us site. I implemented an AJAX form and allow anonymous comments. Anonymous comments is a slippery slope, but reading about friction and identity some things need to be taken into account.

The site is new. It's going to take a while before it generates a lot of traffic and therefore members and therefore comments. But it would be nice to keep collecting information and make that collection as painless as possible. Of course the potential for spam is high, but when/if that happens there are safeguards that can be put in place. I imagine, until a decent membership base is established, the rules for who can and cannot post will probably change every now and again.

Rate your favorite dishes

2006-05-17T00:00:00-07:00

If you've stopped by reviewsby.us this week, you'll notice we extended ratings to dishes. On a restaurant page, blue stars are averages for things you haven't rated yourself and orange stars are your own rating. At a glance, you can now see what you should order at any given restaurant.

More maps, better presentation and prices

2006-05-05T00:00:00-07:00

I added a lot more features to the reviewsby.us site. One thing I was asked about was adding a price field. I added that in, it could use some work, but it is a start. I also cleaned up some of the location formatting (see Tony Roma's at the MOA) so the phone numbers are legible.

The real exciting thing is maps. Applying the same principles from the Yahoo! Map tutorial, I added maps to all the tag pages. Want to know where to find fried food? Just look at the map. I'm taking a few shortcuts now. For example most of our restaurants are located in Minneapolis, therefore the maps seem to center in on the Twin Cities area. This of course may get messy over time when more restaurants get added outside the Minneapolis area. By then, I'll have some personalization setup to narrow down on restaurants based on where the visitor is located.

I wrote a few tutorials that we should see later this month based on what I did. Fairly simple stuff, but still useful in my opinion.

Enjoy the site, and let me know what you want to see.

Easy Yahoo! Maps and GeoRSS with symfony

2006-04-26T00:00:00-07:00

GeoRSS is an extension of RSS that incorporates geographic data (i.e. latitude/longitude coordinates). This is useful for plotting any data that might need to be placed on a map.

While building out the reviewsby.us map, I decided to use the Yahoo! Maps API versus the Google Maps API because I wanted to gain some familiarity with another API.

It was worth trying Yahoo!'s API. First of all, reviewsby.us has addresses for restaurants and Yahoo! provides a simple Geocoding REST service. This made it easy for me to convert street addresses to latitude and longitude pairs (even though this wasn't required as we'll soon see).¹ The real selling point of Yahoo! was the GeoRSS functionality. I can extend an RSS feed (which symfony generates quite easily) to add latitude or longitude points (or even the street address), direct my Yahoo! map to the feed and voila, all the locations in that feed are now on the map, and when I click on them, the RSS item is displayed. That cut down on a lot of development time.

Yahoo's GeoRSS

The GeoRSS format that Yahoo uses is fairly simple to grasp if you know what an RSS feed looks like. Here's a typical RSS feed:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
    <channel>
        <title>Latest restaurants</title>
        <link>http://reviewsby.us/</link>
        <description>A list of the latest restaurants posted to my reviewsby.us</description>
        <language>en</language>
        <item>
            <title>Bubba Gump Shrimp Co. Restaurant and Market</title>
            <description>A *Forest Gump* themed restaurant.  Featuring a large selection of seafood items.</description>
            <link>http://reviewsby.us/restaurant/bubba-gump-shrimp-co-restaurant-and-market</link>
            <guid>25</guid>
            <pubDate>Sun, 23 Apr 2006 08:04:00 -0700</pubDate>
        </item>
        <item>
            <title>Famous Dave's Barbeque</title>
            <link>http://reviewsby.us/restaurant/famous-daves-barbeque</link>
            <guid>24</guid>
            <pubDate>Wed, 19 Apr 2006 19:58:08 -0700</pubDate>
        </item>
    </channel>
</rss>

The <item /> in this example is a restaurant. To turn this into a GeoRSS feed, we only need to change a few things:

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
    <channel>
        <title>Latest restaurants' locations</title>
        <link>http://reviewsby.us/</link>
        <description>A geocoded list of the latest restaurants' locations posted to my reviewsby.us</description>
        <language>en</language>
        <item>
            <title>Bubba Gump Shrimp Co. Restaurant and Market (Mall of America (Bloomington, MN))</title>
            <link>http://reviewsby.us/restaurant/bubba-gump-shrimp-co-restaurant-and-market/location/mall-of-america</link>
            <guid>18</guid>
            <pubDate>Sun, 23 Apr 2006 08:08:19 -0700</pubDate>
            <geo:lat>44.85380173</geo:lat>
            <geo:long>-93.24040222</geo:long>
        </item>
    </channel>
</rss>

We just added xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" as an attribute to the <rss/> tag and added <geo:lat /> and <geo:long /> tags to any given item. If you'd rather use address, city, state and zip fields instead of latitude and longitude coordinates, the Yahoo! Georss page will tell you how.

symfony and Geodata

I knew full well that Yahoo! Maps did not require me to have everything in latitude longitude coordinates, but I felt that from an efficiency standpoint, it made more sense for me to convert them once using a geocoder and then Yahoo! wouldn't have to translate them later. Also, I'm trying to think ahead when more than just Minneapolis restaurants become a part of the reviewsby.us site, I now have an easy way of determining distance between a user's home and a given restaurant. Also, if Yahoo! Maps doesn't work out, I can use these coordinates in other mapping systems.

Extending the model

Models in symfony lend themselves to being easily extended. So we can easily take a model for a location:

<table name="location" phpName="Location">
    <column name="id" type="integer" primaryKey="true" autoIncrement="true"/>
    <column name="restaurant_id" type="integer" />
    <foreign-key foreignTable="restaurant">
        <reference local="restaurant_id" foreign="id"/>
    </foreign-key>
    <column name="stripped_title" type="varchar" size="255" />
    <column name="name" type="varchar" size="255" />
    <column name="address" type="varchar" size="255" />
    <column name="city" type="varchar" size="128" />
    <column name="state" type="varchar" size="16" />
    <column name="zip" type="varchar" size="9" />
    <column name="phone" type="varchar" size="16" />
    <column name="approved" type="boolean" />
    <column name="updated_at" type="TIMESTAMP" />
    <column name="created_at" type="TIMESTAMP" />
</table>

and simply add two columns inside the <table/>:

<column name="latitude" type="float" size="10" scale="8"/>
<column name="longitude" type="float" size="10" scale="8"/>

Easy! However, we don't want to have to set the latitude and longitude by hand each time we update a Location. So first we write a function that takes an address and converts it to latitude/longitude. I placed mine in a myTools.class.php in my lib folder:

class myTools
{
    public static function getLatLng($address, $city = null, $state = null, $zip = null)
    {
        $url = sfConfig::get('app_yahoo_geocode');
        $query['appid'] = sfConfig::get('app_yahoo_app_id');
        $query['street'] = $address;
        $query['city'] = $city;
        $query['state'] = $state;
        $query['zip'] = $zip;
        $query['output'] = 'php'; 
        $url .= '?' . http_build_query($query); 
        $response = @file_get_contents($url);
        if ($response) {
            $response = unserialize($response);
            return $response['ResultSet']['Result'];
        }
        return null;
    }
}

Defined in my app.yml is app_yahoo_geocode and my app_yahoo_app_id. myTools::getLatLng() queries the Yahoo! REST service and returns the coordinates that Yahoo! delivers. Note that the generated query string includes output=php. Yahoo! supports serializing output as PHP instead of XML. This can save a bundle of time over decoding XML.

So now let's look at our Location.php and override its inherited save function:

public function save($con = null)
{
    // save latitude and longitude
    $locdata = myTools::getLatLng($this->getAddress(), $this->getCity(), $this->getState(), $this->getZip());
    if ($locdata) 
    {
        $this->setLatitude($locdata['Latitude']);
        $this->setLongitude($locdata['Longitude']);
    }
    parent::save($con);
}

If you stop here, you'll at least now know how to add latitude and longitude coordinates to an object automagically.

Producing a GeoRSS feed

symfony very easily will allow you to generate an RSS feed. How do we create a GeoRSS feed? Just extend the sfFeed class. Rather than instantiating a feed like this:

$feed = sfFeed::newInstance('rss201rev2');

We do this:

$feed = sfFeed::newInstance('geoRSS');

And then create an sfGeoRssFeed.class.php and we're done. We've created a GeoRSS feed fairly easily. Comb through sfGeoRssFeed.class.php and compare it to the sfRss201rev2Feed.class.php, you'll notice it's not that different and that it's fairly easy to extend the sfFeed plugin for symfony.

Adding your feed to a Yahoo! Map.

Adding a GeoRSS feed to Yahoo! maps is simple. Before I embedded the RSS feed into my Yahoo! Map I was prepared to write an algorithm to cluster only on the points in my RSS feed, lucky for me (and you), Yahoo! Maps does this automatically. One pitfall you might reach during development is that Yahoo! Maps must be able to reach your GeoRSS feed. My development machine is my personal laptop, so this didn't work so well until I uploaded to a publically accessible staging server. The maps worked like a charm as you can see.

Conclusion

Yahoo! Maps are very powerful, and symfony is up to the task. I hope you found this tutorial useful. If you have any trouble, let me know. I hope your next meal is a good one.

Using Yahoo! Maps wasn't a requisite of using the Yahoo! Geocoder. The datasets that were returned could have been used to populate a Google Map just as easily. ↩