Code and Whatnot

Back in November, Family Travel relaunched with a ton of new content, a completely new look & feel, and great Google Maps integration.

I’m the dummy who told the client that animated markers and infoboxes would be OK, and I’m the dummy who had to code it (the javascript) in under two months, by myself. To be honest, the launch was a little glitchy. Now, though, things seem to be running pretty smoothly.

As far as I know, Family Travel is the first and only site to have animated DHTML markers and infoboxes. We probably could have accomplished the feat in Flash, but I was not comfortable with the general state of Flash integration with Google Maps. Even in the months since I began coding the project in Javascript, that arena has gotten stronger, though I’d still call it “experimental” for advanced applications.

Speaking of experiments, while the Google Maps application and its API are pretty well-tested, I was definitely treading some new ground. Also, I found the documentation to be lacking in some instances; for instance, it’s not always explicit what type of object is required as a parameter and what type of object is returned (in some cases, a class will be referred to by two or more names throughout the documentation - not helpful!). One possible bug I found was that the ‘disableDragging’ method doesn’t always ’stick’. Perhaps all of my animation and GOverlay hacking was confusing the map, but dragging definitely enables at times that I don’t want it to, and at times when I’m definitely not calling the ‘enableDragging’ method. I’ve unfortunately overcome this with a ‘dontDragDaemon’, which makes sure dragging stays disabled when it needs to.

First of all, the GMarker class and GInfoWindow class simply don’t support animation. That was a big deal to overcome. I wound up completely re-implementing both concepts according to the GOverlay interface, which worked out well. However, I found some of the behavior of GOverlay to be downright unpredictable. The ‘force’ parameter to the redraw function seemed to be passed ‘true’ more than I wanted it to, so I had to manage that largely on my own. Inside my info windows, Flash movies sometimes play. In Safari, mouse interaction with the Flash did not work at all. I suspect it had something to do with the ‘pane’ architecture of the map, but after much head scratching, I decided to take the Flash out of the map, and merely position it on top of the map.

Here are two great examples of the map in action. Unfortunately, the feature is a bit hidden. Click ‘Map It’ to bring up the map. Comments and bug reports are encouraged:

• Yellowstone
• New York City

There’s also a small version on the map, used on another type of page (down the right side):

• Circle Line Tours

All of the animation and event handling was done using YUI, a library for which I only become more fond as time goes on. The documentation is perfect, once you find your way around. I may write another article just to fully proclaim my love for YUI…

HTML/CSS developers, and, really, many developers, don’t spend their time at the command line these days. In a Java world, build scripts are usually run from the command line or automatically from Eclipse. In my experience, most front-end developers don’t like Eclipse, preferring IDEs like Dreamweaver, Coda, and Notepad++. To make their lives easier, I’ve made a bunch of 1-line batch scripts that run full and partial builds, and put shortcuts to those batch scripts right in the quick-launch area of their desktops.

Where appropriate, I’ve actually bypassed ant. In particular, I found the partial build to be unnecessarily slow when all that is needed is deployment of JSPs. So, I downloaded CWRsync and made a batch script that syncs JSPs from the version controlled directory to the deployed directory, taking the process from over 20 seconds down to under 5 seconds (it adds up!). I’d include that script here, but it’s project-specific. The CWRsync download comes with great examples, so that’s where I’d suggest starting. Note: cwRsync’s cygwin1.dll conflicts with that of Cygwin. Just copy whichever one is newer, and overwrite the other.

The Java project for which we’re doing front-end development uses JSP Tiles. These clever little guys allow HTML output to be broken into pieces that can be reused in many places by the application.

As development begins on a new phase, I meet with one or more back-end developers to go over wireframes and work out the most likely scenario of how the tiles will be divided (so far, our initial guesses in this regard have been largely accurate). Since the Java application, especially at the beginning, is hardly ready to populate pages dynamically for the new project (not to mention that front-end developers don’t love JSP), we usually begin development on static HTML pages. In order to A.) deliver the HTML in a form as close as possible to what the back-end developers need to create the JSP tiles and B.) avoid duplication in our HTML coding, we use server-side includes to build HTML pages from modular, reusable components under Apache Web Server.

As the Java application becomes ready for presentation-layer development, the back-end developers use the HTML ’tiles’ we created as the starting points for JSP tiles. During the remainder of development, we keep an instance of our web server available on the network, so that the HTML versions of the pages and the individual ’tiles’ can be referenced as the JSP tiles are built and tested.

One more aside: HTML delivered from one team to another should be perfectly indented, and as well-organized and well-commented as possible (label those closing divs!). Comments and extra whitespace can always be removed after the process if there is excess.

Over the last several months, I’ve worked hard to make it as easy as possible for our front-end developers (including me) to perform front-end development in a Java environment (on Windows).

Here are some of the preconditions I am dealing with:

• The Java application (via Tomcat) outputs absolute references to static assets.
• Tomcat is not serving CSS, Javscript, Flash, or images.
• The Java application only runs on Windows.

Apache Web Server & Tomcat side-by-side

For a long time, it sufficed to run Apache Web Server on port 80 and Apache Tomcat on another port. We put our preferred host name on the 127.0.0.1 line in \Windows\system32\drivers\etc\hosts , and set up a vhost under Apache Web Server for that domain. Pages served from http://ourhostname:9080 and all of the CSS, Javascript, etc., served from http://ourhostname (without the port needed).

That worked great until Google Maps came along. For some reason, it seems impossible to register a domain key with a port number like 9080. The key for ‘ourhostname’ did not work on 9080, and attempting to register a key for ‘ourhostname:9080′ yielded the same key. Loading the pages from localhost:9080 worked for the most part, but we encountered some cross-domain issues with scripts in IE6 that way.

Reverse-proxying Tomcat under Apache Web Server

The really fun part (thanks for the tip, Martin!) was reverse-proxying Tomcat under Apache Web Server. Not that it wound up being complicated… here’s a vhost configuration that essentially serves all non-static assets from the local Tomcat instance:

<VirtualHost *:80>
    ServerName ourhostname
    DocumentRoot /ourhostrootdir/static/
    RewriteEngine On
    RewriteCond %{REQUEST_URI} ^/$
    RewriteRule ^/$ http://localhost:9080/ [P,L]
    RewriteCond %{REQUEST_URI} !^/(css|js|swf|xml|images)/.*$
    RewriteRule ^(.*)$ http://localhost:9080$1 [P,L]
</VirtualHost>

The key here is the P option at the end of the rewrite rules, telling Apache to use the rewrites to behave as a reverse proxy (mod_proxy must be installed and enabled). I must have read the mod_proxy docs about 6 times, and I never saw that lovely mod_rewrite tie-in, which really kicks ass!

Now, everything loads from http://ourhostname/ , with no port numbers, which is pretty slick. I’m not going to post all my Apache config files… they’re practically pristine other than the enabling of mod_proxy and vhosts. Feel free to contact me directly if you have any questions.

This post is mostly for my own benefit, and may be edited in the future. Since I’m a shell guy stuck (at least for now) in a Windows world, I find myself installing Cygwin on machines on a regular basis. I still don’t really understand how anyone gets anything done on Windows machines…

Digression: the ‘find’ command alone is so powerful and amazing… sigh. Not to mention sed, awk, and grep, and the lovely pipelines, ifs, whiles and fors that tie it all together. I’ll be very happy if and when I never have to use a Windows machine again (or Windows makes bash its default shell, like Mac did).

During Cygwin installation (and subsequent execution of setup.exe) there is a huge tree of packages to choose from. After installing it a half-dozen or so times, I decided to start keeping track of which non-default packages I select. I haven’t had to use all of these on Cygwin, but I’ve had to use all of them on Linux, so it’s probably just a matter of time. I do not de-select any default packages.

• Archive
  • unzip
  • zip
• Devel
  • gcc
  • make
  • pcre
• Editors
  • ed
  • vim
• Net
  • curl
  • ping
  • rsync
  • whois
• System
  • util-linux
• Text
  • tidy
• Utils
  • diffutils
  • screen
  • time
• Web
  • wget

HUGE was kind enough to send me to the Rich Web Experience conference in San Jose earlier this month. Overall, I give the conference high marks. It’s a pricey conference, but they included three meals a day (which weren’t bad) and the conference was a 12+ hour experience on each of the first two days. I also met one of my idols, Jeremy Zawodny, albeit briefly. The interaction designers were all star-struck with Jesse James Garrett, but I’ll take the author of mytop and an especially good blog over JJG any day.

The best talks I saw were ‘Merging Ajax and Accessibility‘ by Mark Meeker, ‘Architecture for the Rich Web‘, by Nate Grover, and ‘YUI: A Foundation for Rich Web Experiences at Yahoo and Beyond‘, by Eric Miraglia.

Merging Ajax and Accessibility

Mark Meeker stressed the importance of progressive enhancement: building a site that works without Javascript or CSS, and progressively enhancing the user experience for clients that can take advantage of CSS and/or Javascript. He gave great examples of using forms as a substrate for DHTML/Ajax web applications in such a way that — even though the experience will be different — people using screen readers, braille displays, and screen magnifiers will have access to the same information and functionality. Mark also pointed out another (fairly obvious) huge benefit of progressive enhancement: mobile and low-tech browser compatibility.

Some food for thought: the ARIA specification, and the legal ramifications of not being accessible. Check out the Firefox Accessibility Extension and the Color Oracle (to test for color-blind-friendliness).

Architecture for the Rich Web

The primary lesson I learned from Nate Grover’s talk was building javascript components to be ‘agnostic about the data source’. That means javascript components should interact with other components as if those components retrieve data asynchronously. To do so, callbacks are passed along with requests sent to components (the observer pattern). In this way, components don’t wait around for responses from other components, holding up execution; rather, execution continues, and whenever the component is ready with its response, it triggers the callback from the calling component. It’s just a tad complicated, and Nate explained it a lot better than I am here, but I think this technique can be very useful, especially if you want to make components that can behave in a synchronous or asynchronous manner, depending on context.

Nate also spent a fair amount of time stressing the importance of simplicity in the interfaces your components present. He gave some pointed examples of how some popular UI libraries sabotage their own reusability by packing too much into interfaces (scroller = new Scroller('elementID', optionsObject);), rather than providing simpler APIs (scroll(elementObject, direction, time)).

YUI: A Foundation for Rich Web Experiences at Yahoo and Beyond

Eric Miraglia really sold me on the YUI library. It’s modularity may be a double-edged sword, given the minor complexity of figuring out which combinations of files you need at a given time, but it’s a well-considered compromise. In general YUI allows you to produce great, rich applications with a truly negligible download size (in terms of YUI components, anyway). Watching the code examples skip by on the screen, I also noticed a perfect consistency of interfaces; YUI is truly thought-out from top to bottom, making it a friendly, predictable creature to work with. Since Yahoo! uses its library internationally on its extremely high-traffic web properties, one can feel assured that the code is well-tested and compatible with all of the major browsers.

On the CSS side, I’m particularly interested in YUI’s CSS Reset — it irons out most of the most troublesome browser differences in terms of ‘default’ styling, which definitely reduces the need & temptation to resort to browser hacks. The CSS Grids, while they seem nice and reusable, did not appeal to me too much. Perhaps I’m a masochist, but I don’t mind laying out my own grids, and it’s worth hand-coding grids to get more semantically meaningful HTML.

Also mentioned: the YUI Compressor is currently regarded as the best javascript minifier out there. Check it out.

Using Yahoo Pipes, I’ve combined my blog, my Google Reader ’shared’ items, and my del.icio.us ’share’ tag into a single RSS feed:
http://pipes.yahoo.com/pipes/pipe.run?_id=0Pj34kFB3BGbj9QKJxOy0Q&_render=rss (rss | html)

I don’t always write in this blog as frequently as I’d like, but I read quite a bit each day to keep up with the latest in web development and the latest in my favorite fields of science. I constantly forward links to friends, often people who already subscribe to my blog. On the other hand, I wouldn’t want to put my del.icio.us links directly into my blog feed, as some people do. Also, I find my ‘whole’ del.icio.us feed has a lot of links I can’t imagine being useful to too many people, which is why I’ve introduced the ’share’ tag (which currently has about three items, total). So anyway, what you’ll get is content I’d like to deliver to my intellectual inner and outer circles, without the confusion of re-blogged or aggregated content in my actual blog. If you like it when I send you links, or you wish I did, consider replacing your subscription to my blog with a subscription to Greg Whitescarver’s Unified Feed. And if you still read my blog by visiting this site, my Google Reader shared links and del.icio.us ’share’ tag are syndicated in the right-hand column.

If you do subscribe to my unified feed, please let me know if there are any problems with it. Also, please let me know if any of my shared links are particularly relevant to you; I’ll make an effort to share related topics in the future.

After my 6 weeks of free company car ran out here in Los Angeles, I opted not to buy a car. Instead, I saved up the cash to spend 10 days in Europe. I got back last Monday. Here are some pictures.

So you might want to know how it is, living in LA without a car. There answer, for me, is “not bad at all”.

I take the subway to work. Yeah, you heard it right. I take the Red Line of the Los Angeles Metro seven stops every morning, with a short walk at each end. I have never had a better commute (except when I worked at home). The dry weather in LA also makes it much less likely that rain & wind will have me entering the office looking like a wet dog. Even when I get a car, I’ll continue taking the subway to work.

My location is just about perfect for a guy without a car, I’d say. Not only am I walking distance from the Metro station, which is not in the nicest of neighborhoods, but I’m also walking distance to a very nice, several-blocks-long strip of restaurants, cafes, bars, and hip retail outlets known as Sunset Junction (a part of the Silver Lake neighborhood).

To get to the beach, I’ve been taking the 704 bus to Santa Monica. At 60 minutes, it takes 20 minutes longer in each direction than driving a car. However, if you factor in the facts that I can do the crossword on the way and don’t have to worry about having a mimosa or two before returning home, it’s not a bad setup at all.

I’ll get a car eventually, but I think tales of cars being an ‘absolute necessity’ in Los Angeles have been greatly exaggerated.

Martin Fowler recently posted OneLanguage, and article exploring the costs and benefits of using multiple programming languages in a project. He also hints at what my dad has also been preaching: Ruby, and languages like it, are as significant an advance beyond Java as Java was beyond C++.