Code and Whatnot

When you find out, for whatever unpleasant reason, that you need numerous files in your working copy overwritten from a non-versioned source, it’s a bit of a problem. You can’t go overwriting your whole working copy tree, because you’ll lose all those .svn files, and that wouldn’t be much of a working copy anymore, would it?

What you somehow need to do is individually overwrite files that have changed, which I do here:

diff -rq unversioned workingcopy | grep -v '\.svn\|_notes' | grep 'differ' | while read a uvfile b svnfile c; do cp $uvfile ${svnfile%/*}/; done

Explanation: a recursive diff of the unversioned directory against the working directory, with brief output, ignoring .svn and Dreamweaver _notes files (not from me, I promise), filtered by only ‘differ’ as opposed to ‘Only in’ differences (cheating here, since I was confident none of my filenames contained the string ‘differ’), And doing a really cheap ‘while’ to parse out the filenames to copy over. Notice I’m cheating with the while loop as well, because this won’t work with filenames containing spaces. Do yourself a favor, and don’t use filenames with spaces if you want to be able to do stuff like this in a hurry. ${svnfile%/*}/ takes the filename off the end of the svnfile variable (actually, it takes off the final slash as well, which I re-added). That step may not have been necessary… but it stays ’cause that’s what I actually did.

Thankfully I had few enough ‘Only in’ differences to handle it manually, but I think the above command could be tweaked easily enough to perform those ‘merges’ well.

The last six weeks have been pretty insane! I will stay relatively cryptic about the details, but, as my friends already know, I have changed jobs twice in that time period. The job for which I left HUGE seemed like a great opportunity, but I found myself highly uncomfortable in the position. A more-than-suitable alternative (in the form of Practice Technologies) happened to make itself available (as I was figuring out that I had accepted the wrong job for me), so I made the jump. It was a very difficult decision, but, on the same token, I knew for sure that I was not in the right environment.

Aaaaanyway… an incidental side-effect of this unusually rapid job hopping was going through two work-sponsored phones in less than a month. Which made me realize a much more minor mistake than accepting the wrong gig: having a phone and phone number that I did not own.

Verizon

Immediately upon tendering my resignation from ‘mystery job B’, I went to the Verizon store. Fiscally-retarded as I am, I had maintained an account with Verizon for the many months HUGE had been providing a phone, so it seemed like a logical choice to reawaken the relationship (plus, they’ve always actually given me pretty good service). The clerk did some math to figure out that I’d spend less money if I paid the cancellation fee on my old account, and started a new 2-year contract. If I ever mail in that $50 rebate, I will have gotten a really good deal. And it’s worth noting that Verizon was the first provider to offer pro-rated cancellation fees, a customer-friendly policy.

Motorola Q 9c

On my roommate’s recommendation, I went for the late-model Motorola Q, a Windows Mobile 6 smartphone, similar in shape to a Blackberry. Having used a couple of pocket PC-type phones in the past, the smartphone is a welcome departure. In fact, I’m sad that I didn’t get a smartphone sooner. Most importantly, the smartphone’s ability to function as a phone is vastly superior. Even though the numeric keypad is superimposed on the alphabet keys, I can start typing a number (without hitting ‘function’) OR a name, and the phone instantly and magically figures out which I need. It’s not rocket science, I suppose, but I am very pleased with that interface feature. Originally fearing that I’d miss a touchscreen, the smartphone has brought me in the direction of near-loathing when it comes to touchscreens on handheld, pocket-borne devices. It’s small. It’s not exacerbating the hole that my pocket PC wore in my pocket. I can always use it with one hand. And say what you will about Microsoft, but I actually kinda like Windows Mobile 6; the user interface is almost completely intuitive, it’s fast, and there are tons of available applications.

bluetooth headset

In 20 days, it will be against the law to talk on the phone while driving in California without a hands-free device. A generic bluetooth headset and car charger were just a few extra dollars, so I got them. Windows Mobile 6 puts the bluetooth setup right on the home screen (or did I set that up? whatever), so it’s very quick to get set up as I begin either leg of my commute. The Q has superb voice-activated dialing, so I pretty much only ever touch one button (one that is ergonomically findable, keeping my attention on the road). I’ve spent more time talking to my family in the last 2 weeks than I had in the previous month. Go bluetooth.

Plaxo…

Sam clued me in that Plaxo had some mobile integration capabilities. Visiting their site for the first time in a while, I was impressed at the number of services they currently integrate. Plaxo is now pulling in both my Yahoo! and Google address books (in a read-only fashion: it does not update remote accounts), as well as my Google Calendar. Plaxo used to pull Yahoo! Calendar, but support broke and/or was discontinued at some point. I have continually heard rumors that a Yahoo! Calendar API is coming; if that ever happens, hopefully Plaxo will again pull in that service. Plaxo also used to directly pull in LinkedIn connections, but it looks like LinkedIn gave them the smackdown. It’s still possible to export your LinkedIn contacts to CSV, so I don’t see this as being a huge deal.

…Plaxo Premium

For me, there were two reasons to upgrade to Plaxo Premium. First is Windows Mobile Sync. Mobile Sync is what drove me to Plaxo this time around, and I don’t mind paying for useful premium services. Plaxo for Windows Mobile was easy to install on the Q, and I only had to run it once for a simple initial setup. The second bonus of Plaxo Premium is address book duplicate removal. This seems like a less-likely candidate for a ‘premium’ designation, but I’m paying anyway, and I enjoyed removing/merging duplicates through their fairly effective interface.

Yahoo! Go

This neat little program is a simpler, often better, interface to the Yahoo! family of services, including mail, address book, calendar, Flickr, maps, and news. One highly impressive feature of Yahoo! Go is the ability to dial people directly from your Yahoo! contacts. Browsing Flickr is also straightforward and well-geared to a device with a small screen. Both contacts and Flickr suffer a similar problem, though, in that you can’t save a contact or a photo to your phone; to get them, you must return to Yahoo! Go. I wanted to save a Flickr photo as my screen background, and no dice. I suppose I could use Opera Mobile to do that…

Opera Mobile

Possibly the biggest no-brainer in the Windows Mobile third-party software space is Opera. Internet Explorer for Mobile truly sucks ass, and Opera Mobile truly kicks ass. Everything renders better, and Opera supports javascript. IE is in the stone age, and I’ll leave it at that. Download it, and when your 30 day trial is over, cough up the $24. It’s well worth it. The web geek in me also appreciates Opera’s role as a standard-bearer for web standards, so I almost revel in tossing them a few bucks.

GMail / IMAP

GMail, which I use exclusively as my work email client, offers IMAP. I set up Outlook on my phone to pull mail from GMail every 15 minutes or so, and it’s working swell. It’s oddly convenient that work email comes to Outlook on the phone, and personal email is inside Yahoo! Go.

Maps? Google?

The Google Maps application works, for the most part, but has let me know that the pseudo-GPS functionality is not available on my phone. I have a sneaking suspicion that Verizon’s desire to sell me the VZ Navigator application/service is behind this feature-squelching, and, if that’s true, shame on them.

Overall, I will go so far as to say that I have never been so happy with my phone situation.

I’m very pleased and humbled to announce my new job as Web Development Lead at Practice Technologies (aka PTI). PTI has been around for several years, providing extremely powerful document management software for law firms. Lately, they’ve been pushing some of their rich data services online, such as RealDealDocs and SmartRules. These information services (which are subscription-only) are superbly useful and labor-saving for trial lawyers, litigators, law librarians, and people who do legal-related document creation.

I’ve very excited to get my dirty little fingers into their information systems. The volume of documents and document meta-data that PTI has collected represents a tremendous potential, only a fraction of which has been tapped so far.

Tag has a small and extremely talented group of developers, and I am thrilled to be working with them. I’ll be up to my old tricks: writing documentation, refining processes & practices, automating, designing solutions, and coding, primarily in my beloved LAMP realm.

From the roof at their Venice office, I can see the ocean. The commute is 45 minutes to an hour, but I’ll probably fix that with a relocation within the next few months.

Wish me luck!

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
  • subversion
• Editors
  • ed
  • vim
• Net
  • curl
  • openssh
  • 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.