1994: GenieLift Industries

Screenshot of Genielift Website circa 1994

My very first website and, other than a "contact us" CGI written in Perl 4, was little more than a brochure site. It was optimized for that brand-new browser, Mosaic, and was fed out of an NCSA Httpd 1.2 webserver. GenieLift was state of the art at the time.

The art was supplied on high-resolution paper, and I had to do all the scanning and photshop work myself. It was a surprising amount of fun, especially given that I'd just been kicked upstairs from tech support because I'd been the only one to answer the question, "Does anyone here know Perl?"

GenieLift has the distinction of being one of the first commercial websites deployed on a shared hosting solution. Shortly after the VIF interface was developed for SunOS, Spry deployed it in-house to reduce hosting costs. I was lead developer on the effort to compile and link VIF support into our own SunOS kernels.

1994: PacificCorp

Screenshot of PacificCorp website circa 1995

PacificCorp's website had one fascinating extra feature: a database lookup by which its customers could find insulation and conservation deals provided by the corporation. PacificCorp.com featured the very first Oracle-to-Web interface ever deployed for a commercial vendor.

Netscape was about and there were tables then. Can you see the nice shiny table-based layout?

1995: Elf Sternberg

Image of ElfSternberg.com circa 1995

About the same time, I deployed my very first personal website.  Looking at it, I realize that I'm not that upset by it. It's not a great website by any means but, other than the embarrassing background, this is pretty state-of-the-art stuff for 1995. Look: Two-column layout! The story engine was driven by a makefile; the text files for the extensive archive contained metadata and a Perl script generated the HTML tables of contents and story pages.

1995: MissingKids.Org (The National Center for Missing & Exploited Children)

Screenshot of MissingKids.org circa 1995

This was a site of which I was (and still am) particularly proud. At the time, NCMEC had a CompuServe-based fileserver from which images of missing children would be distributed to vendors, advertisers, and law enforcement. The fileserver was available only via a primitive telnet-based interface and the files came through on x-modem-over-telnet. All of the information about the child was on the image as scanned text, as well as stored in the image's comment field.

The backend was a combination of bash and kermit. The file would be transferred to MissingKids.org. A perl script controlled a series of C programs, some custom, some part of the PNM suite, to analyze the image, crop out the child's photo, analyze the text in the comment field, and place all of the information into the database. Other scripts ran regularly to update the home page and rotate children's photos as needed.  Perl-based CGI provided full-text and regional searches.

For 1995, MissingKids.org was the height of sophistication.

1996: Oracle Magazine

Table-based layouts were all the rage, and Oracle Magazine was nothing special. What made it special, in this case, was a complete back-end (now lost in time) that allowed the editors to store articles via CVS, review them on a beta view of the site, and "push" the new edition out to the web with a clean, host-driven changeover. This was years before anyone thought of "rough draft" management CMS.

2002: Narrator

Four screenshots of the Narrator program with four separate themes.

Narrator is the collection of scripts that runs my fiction-based website, Pendorwright.  Narrator started out as a series of static scripts, written in Perl that would run through text files and spit out a hierarchal HTML tree of index pages and content.

Narrator evolved into a series of Perl CGI's (with some of the earliest abuses of symbolic links and httpd.conf you've ever seen to hide the CGI-ness), then Python. Between 2003 and 2005 it was a Rails application, and now it's a Django app.

Narrator is a kludge and always has been. Although it handles themes and indices quite well, it's distinction of series/novels/stories/arcs is ad-hoc and fragile. It has no concept of a "hub" for all stories, and I've removed several services I'd like to have because I considered them security risks.

Narrator is currently undergoing a re-write. Art, programming, back-end development, and of course, content.

2006: South King County Domestic Violence Task Force Walkathon

Screenshot of SteppinOut.org website.

This was a proud piece of work. A friend of my wife's organizes this, and asked me to do a little brochure site for her. It was done in plain ol' HTML, had only two pages, and was easy to update via an FTP interface and a couple of server side include tricks. I did art, layout, hosting.  The color choices were recommended by colourlovers.com.

2006: 33rd District Democrats

Screenshot for the 33rd District Democrats website.

A WordPress theme developed for the Washington State 33rd District Democrats. Nothing fancy, just plain art. Art, layout, theme development.

2006: Sound Podcast

A brochure site, done in plain ol' HTML, for a local recording studio. Art and layout.

2008: Pendorwright

My fiction site. A wordpress theme. Art, photography, and theme design is all mine. The most significant piece of work on Pendorwright is a custom widget in the sidebar capable of reviewing the Narrator database and showing a list of "Pending" stories.  Integrating two different databases, one for Wordpress and one for another service, was a real challenge.

2008: Bookpro Steel

A custom Wordpress theme for iGameRadio.com, attempting to riff on the "dark metal" Apple ads that were about a few years ago. Art, layout, theme development, this also included Wordpress widget and javascript development on the sidebar for the tabs.

2009: MacRadio (post-development maintenance consultant)

Screenshot of MacRadio

MacRadio is a Rails site with integration to PHPBB. I have provided consulting with MacRadio for repairing their Rails engine, provided the classes necessary for integration with PHPBB, engineering their daily maintenance scripts, forensic analysis following a suspected spam attack, and general advice about advertising placement and performance tracking.

2009: Seattle Metropolitan Credit Union (post-development extensions)

Screenshot of Seattle Metropolitan Credit Union

Seattle Metropolitan Credit Union came to me with an unusual problem. They had two websites, one for the credit union and one for their co-op, but their two websites didn't look the same. Both used a similar two-column layout, colors for distinction, but the co-op site's menu had a different layout from the credit union's.

SMCU wanted the co-op's menu to look the same and, more importantly, to act the same. The co-op's site is done in Wordpress, and the key ingredient was that pages had to be categorized. Wordpress categorizes posts but not pages. Categorized pages had to show up as submenu items of categories when browsing categorized posts, and had to be properly highlighted when looking at a categorized page.

The solution was two-fold: first, I ripped the SMCU website for the menu layout and got that looking just right with the co-op's colors and code.

Then I dug into the Wordpress theme and developed a new "Walker" engine-- which Wordpress uses to work its way through trees of data stored in the database-- and adopt it to know if it was being run on a Page or a Post, how to determine what was being looked as well as which category it belonged to, and draw the menu properly.

CSS, Wordpress (PHP and theme) development.

2009: Immunity x86 Assembly Trainer

Screenshot of the Immunity x86 Assembly Trainer

An Intranet site deployed in a classroom environment, the Immunity X86 Assembly Trainer is a teaching tool to help teach large student bodies the intricacies of secure assembly language. A Django site, the key to this lies in the two-pane display seen here: when the student types into the left-hand window, the right hand window automatically updates with the opcodes, broken line-by-line, for the code the student has written. This involved a prototype.js script for doing event management and Ajax transactions, as well as understanding the client's supplied library of assemblers and linkers.

The XAT also keeps a record of the student's work, has breakdown by classroom, and does a primitive heuristic to sort a classes' work, and show the work in order for overhead projection. The XAT was a fun project, involving my two favorite things: obscure programming languages, and real-time javascript updates.

Django, Python, programming, CSS & HTML, layout, information architecture and interface design.

2001-2009: Isilon Systems, Inc.

Screenshot of the Isilon Filesystem Manager

This is the program that has eaten my brain over the past eight years. It's written in Webware For Python, an application server similar to Django, and Ext-JS, a commercial Javascript framework similar most comparable to Dojo in functionality.  The two screenshots here show only four units of functionality (pages and their modals); at its height, I'd written over eighty different command-and-control modules for the Isilon storage solution.

The Isilon product is a distributed filesystem clustered in many computers. I wrote the original version of the control system for the application, entirely in Python. Because I was employee number 8, I had to write most of the C-to-Python interfaces for the first six years. I wrote the Status display pages, the performance control panel, the base configuration details like cluster-wide date, time, NTP control, Filesystem access for both CIFS (Windows Filesharing) and NFS, Network configuration, LDAP and NIS authentication schemes, cluster-wide snapshots, synchronization toolkits, NDMP backup, and more.

Everything here, for the first six years, is me: The C layer, the Python layer, the Javascript, the HTML, the graphics, the CSS. The UI evolved along with the product itself: faster, smarter, better. There was a complete filesystem manager there designed to display and control the unique properties of the filesystem: each directory or file could be tuned for performance versus integrity survival in the event of catastrophe; density of parity or number of distributed duplicates, whether or not the file was shared via CIFS or NFS.

Screenshot of the Isilon Network Configuration Tool

After 2006, after Isilon IPO'd, we hired more UI developers to support future products: control panels for a revised network facility, a revised NDMP-aware subsystem that leveraged specialized hardware; a backup scheme that used the filesystem's unique clustered capacity were all products I worked on over the next three years. My peers revised or revamped the new CIFS interface after Samba 3.0 came out; added Antivirus and dynamic graphing, replacing the creaking server-side charting toolkit with Flash-bashed charts. For many of the products, I replaced tables with active grids-- pagination, client-side sorting, in-line editing, on-demand no-refresh updates.

The examples above show the Filesystem Manager and the External Network Configuration Tool, both with modal dialogs in lightboxes up to illustrate particular details of the chosen network or filesystem object. The Isilon UI was a classic hub-and-spoke interface design, allowing the customer to drill down to specific configuration details.