A Tech Blog

Unobtrusive Javascript Pop-up Links

One of the things I dislike the most about writing HTML is creating links that open in new windows. Since I try to make all my HTML standards-compliant, I can’t use the target="_blank" attribute in my links anymore, since it’s been deprecated in XHTML. Many have followed the new standard of making an inline onclick attribute of the link open the window, including myself. But what a pain it is to type it all out and remember the exact code to do it. Instead of this:
  <a href="http://www.example.com" onclick="window.open(this.href); return false;">External Link</a>

Wouldn’t it be easier to type this?

  <a href="http://www.example.com" rel="external">External Link</a>

I’m sure you’ll agree it’s much cleaner, easier to type, easier to remember, and to top it off, it’s (kind of) symantically correct. While the possible attribute values of rel do not include external, using it as a keyword to denote the relationship between an external page and your link makes sense. Best of all it validates with the W3C validator with flying colors.

How to Make it HappenSo how do we make the magic happen? The answer is with our good old friend Javascript. Basically we’re going to make a function that will crawl the document after the page loads and check for links that have rel="external" in it, then attach an Event.observe to each link that will cause it to open in a new window (note that you’ll need Prototype.js for this to work).

Here’s the code:

  function external_link(link) {
    var el = Event.element(link);
    if (el.tagName == 'IMG') {
      if (el.parentNode.tagName == 'A') {
        var el = el.parentNode;
      } else {
        return false;
      }
    }
    window.open(el.href);
    Event.stop(event);
    return false;
  }
  function init() {
    var links = $A(document.getElementsByTagName('a'));
    links.each(function(link) {
      if (link.getAttribute('rel') == 'external') {
        Event.observe(link,'click',function(e){ external_link(e); },false);
      }
    });
  }
  Event.observe(window,'load',init);

Note in the external_link function it checks if the item clicked was an image tag. If it is, then it will look up one node in the DOM tree to see if the image was enclosed in an anchor tag, and attach the event to that instead (since it contains the href it needs to open). If it doesn’t find anything, it will exit quietly.

Load this in your document header and off you go. You should be able to add rel="external" to any link on your page and it will open in a new window. Remember you need a copy of Prototype loaded as well. Leave a comment if have any questions or improvements.

Track Trimet on your iPhone


Recently I started riding the bus again full timeif not to save the environment, but to save my nerves from dealing with traffic. After a few days I was reminded about one of the things that bothered me about riding the bus: I hated not knowing exactly when the next bus was going to arrive.

 

This time around I have my iPhone, so I am able to use the tracker on Trimet.org to see when the next bus came. Except it was really difficult to use on such a small screen. I was able to find out when the next bus came, it took me 2-3 minutes to do it.

 

So I decided I was going to write an iPhone app to do the same thing, but with a much simpler and easier to use interface. At first I was just going to scrape the Trimet site to get the information. But then I came to find out that Trimet actually has a really nice API to all their tracking information!

 

So I present to to you the Trimet Tracker, an iPhone app that allows you to easily find out when the next bus is going to arrive at your stop. Just enter your Stop ID and youll get a list of all the arriving buses (or MAX or Street Car), what time they will be showing up, and how long you have to wait. If you dont know your Stop ID, you can also do a quick search by picking a route and selecting from all the stops on that route.

 

To make it even easier, you can also save any stop to your favorites list so you dont have to enter a Stop ID or search for your stop again. Just hit Favorites and select which stop you saved.

 

Obviously this tool isnt for the masseshow many people are riding Trimet with an iPhone? Even if no one uses it, this tool has already saved me the a couple times from missing a bus. Thats worth the whole 4 hours it took me to develop it.

 

For the technically inclined, Trimet Tracker was built using the Camping microframework, IUI for the interface, and a few lines of custom Javascript.

 

One final thought: I now firmly believe that Portland is the geekiest city on the west coast. Even our transit system has an API.

What to do While you’re at Rails Conf 2007

If you’re attending Rails Conf this year and are from out of town, you might be like me when you’re in another city: I don’t really find much outside of the touristy areas, or what’s immediately around where I’m staying. But you’re in luck! I live here , Oregon and I have a list of places to go and things to do that I think are quintessential.

 

I’ve tried to pick places that are close to the convention center, but most places will require either taking Tri-Met bus, light rail or street car, or driving. Each listing has a link to directions from the convention center so you can see about how far it is.

 

Good places to eat lunch or dinner
The immediate area around the convention center is mostly places like Denny’s and Red Robin. I wouldn’t recommend eating there. Here are some places for getting some good food.
  • The Side Door (Directions)
  • Russell Street BBQ (Directions)
  • Produce Row (Directions)
  • Old Town Pizza (Directions)
  • Le Bistro Montage (Directions)
Good places to eat breakfast
One thing know how to do right is make a tasty breakfast. Check out these places if you have time to get up early and eat before the conference starts for the day.
  • Zell’s Cafe Two words: BACON WAFFLE (no…waffles with bacon IN them)
  • The Side Door (Directions)
  • Bridges Cafe (Directions)
Go see a movie, and have a beer
as far as I know, is one of the very few cities that have so many movie theatres that serve beer and food. AND to top it off, most movies are $3-$6 admission. Check out one of these theatres for a magical movie and beer experience.
  • Bagdad Theatre (Directions)
  • Laurelhurst Theater (Directions)
  • Mission Theatre (Directions)
  • Clinton St. Theater (Directions)
Coffee Shops Galore
has no shortage of coffee shops. Try not to go to Starbucks and find one of these local coffee shops.
  • Stumptown Coffee (2 locations: Downtown and Belmont)
  • Tiny’s Coffee (2 locations: MLK and Hawthorne)
Happy Hours
Come 4pm you’ll be wanting you some drinks. There are plenty of happy hours around town, but here are a few recommended.
  • Acme  (Happy Hour Info and Directions)
  • Produce Row  (Happy Hour Info and Directions)
  • Shanghai Tunnel  (Happy Hour Info and Directions)
  • Doug Fir  (Happy Hour Info and Directions)

Find more Happy Hours at Unthirsty.com

Powell’s/Powell’s Technical
Powell’s Books is one of the largest book stores in the world, and to make it even better, they have a separate store that only sells technical books (I picked up my Programming Ruby book there, among others).
  • Powell’s Books Main Store (Directions)
  • Powell’s Technical (Directions)
Places to find gifts for your Significant Other
You might get in trouble if you go to a conference out of town and not bring back a gift. Luckily for you there are a couple areas you can check out that have unique gifts.
  • SE Hawthorne Blvd, between 30th and 39th
  • NW 23rd Ave, Between Burnside and Flanders
Relive the golden age of arcade games
The only place that has all the classic arcade games, beer, wine and DJs you can take.
  • Ground Kontrol (Directions)
See a live band
Every night you’ll find tons of bands playing in lots of clubs around. Check out the Mercury before you come, or pick one up while you’re here. You find all the band listings, as well as other stuff to do while you’re here. Listed below are some recommended venues.
  • Wonder Ballroom (Directions)
  • Holocene (Directions)
  • Crystal Ballroom (Directions)
  • Dante’s (Directions)
  • Doug Fir (Directions)

If you know a great place to eat, drink or have fun in Portland, leave a comment below with a suggestion or link to your list. See you at the conference.