Kai MacTane’s Web Development Portfolio

Topsy I worked for Topsy, “a search engine powered by tweets”, as the chief developer of their Topsy Retweet Button. This button shows a count of how many times a given web page has been linked to in tweets, and allows site visitors to easily retweet their own links to the page.

I built the Topsy Retweet Button for Web Sites as a JavaScript library that can be easily imported by any public web page, and also built a WordPress plugin version that can automatically apply the appropriate JavaScript code in WordPress blog entries. This ensures that both types of button use the same display mechanisms.

The JavaScript that forms the core of the button doesn’t rely on any frameworks, to reduce download size. It uses clean, efficient DOM manipulation techniques that are designed to work smoothly with a page’s existing structure in any browser, and to avoid delaying the loading of the rest of the page. The main Topsy Retweet Button page's “See It In Use” section links to some popular and high-traffic installations; it’s also present on my own blog.

Scion Pixel Reveal While contracting with ATTIK, a creative brand company working in many media, I helped build the back end for the Scion Pixel Reveal Sweepstakes. Scion had built a unque, customized car and produced a one-million-pixel image of it, then covered it up with an obscuring grid. Each entrant in the contest could reveal 10 pixels at a time, up to 10 times per day. The person who revealed the final, millionth pixel got to win the car.

A few back-end stub resources written in PHP were already available when I joined the project. I built out the rest of the back end, which included designing the database schema to hold user registration data and a record of pixel-reveal requests. I also provided resources for the front-end developer to call using AJAX requests, returning JSON objects as needed. Naturally, both scalability and data integrity were concerns in both the design and implementation phases.

The back end also included the ability to relay reCaptcha form requests back to reCaptcha’s servers as part of an overall “send email to a friend” feature. The contest officially opened on Wednesday, July 15th; the thumbnail image shows the state of the sweepstakes image roughly 48 hours later, by which time 20% of the image had already been uncovered. The site handled all traffic smoothly and gracefully until the contest ended, approximately 6 days after it started.

DioCal Directory When I joined Extrabreit, they were already handling the Episcopal Diocese of California’s main web site. Then the diocese decided they needed an auxiliary “directory” site to allow users to more easily search for public resources. The church personnel were happy with their existing Joomla site’s visual design, and they liked the feature-set of the CiviCRM plug-in, but wanted to shift away from Joomla and try out Drupal instead.

I handled setting up the Drupal directory site from scratch, creating a Drupal theme to replicate the existing Joomla theme’s appearance. I also ensured that the Drupal version of the CiviCRM plugin was installed and working smoothly, and assisted diocesan personnel in setting up administrative user accounts as needed. The finished site works as a “white pages” listing that allows interested users to find congregations, clergy members, church organizations, and staff members, and also has an administrative back-end that allows diocesan staff to update information easily and quickly.

iWin Games iWin Games is a growing force in the casual games market. During my nearly-two-year tenure there, I performed a wide variety of tasks on the front end. Among them, I built a universal ad-display system that allows easier maintenance of third-party ad placements on the site. I also created reusable modules that show game categories on the site’s front page, and was a major implementer of the redesign of the standard “game details” page that is one of the linchpins of our site.

I also worked on adding AJAX and other dynamic elements to iWin’s page design paradigm, in order to make user interaction with the site’s forms smoother and more enjoyable. This included dynamic form validation, and the “word balloon” explanatory popups seen on many navigational pages.

All Creatures Healing Network I created this site on a tight budget for a small business owner involved in her initial business launch. Visual and graphic design was mostly done by a third party, although I had some input into the design. For the back-end development, I provided a database schema and developed a stripped-down content management system, using some object-relational mapping principles based on previous work done with WebSight Design.

The primary goals for this site were: to provide an easy-to-use back-end interface to allow the site owner to update site content without knowing more than the rudiments of HTML; and to set up a friendly, inviting appearance for site users, customers, and clients. With a LAMP stack architecture and standardized HTML and CSS, the site will also be easy to maintain and extend.

Geomatrix This site involved integration of a wide variety of technologies and back-end objects. Company employees, office locations, industries, case studies, and two nested tiers of professional practice areas all interact with each other in ways that affect front-end page display. All of these items — indeed, practically every word of text and nearly every image on the site — can be easily edited and altered using back-end administrative pages viewable in any web browser.

I built two separate search features for this site: a site-wide text search box (at the top of every page), and the option to search for available consultant employees using a variety of relevant criteria. I also set up an AJAX-driven page showing a dynamically updated display of office locations. Finally, I was responsible for coding a large portion of the back end. This included the administrative pages and modules themselves, plus a large number of object classes that would interact with each other and read information from a MySQL database to provide site content.

Mommy Track’d This site for working mothers includes articles, book-related affiliate links, and a very small e-commerce area. I was given front-end mockups (including functioning JavaScript menus); from there, it was my responsibility to make the entire site dynamic. I also set up much of the back-end administrative interface to allow the client to update site text and categories easily, and created many of the database tables used by the system.

One of my first tasks was to set up a “Tell A Friend about Mommy Track’d” form (no longer live). This form used dynamic JavaScript to make each field perform instantaneous validation of its own contents, and then update, enable, or disable the submit button as appropriate.

I was also responsible for setting up, testing, and debugging the site’s shopping-cart features, which were based on the standard WebSight Design framework.

Mount Diablo Region YMCA This site allows users to search for classes and activities by a variety of complex criteria, such as age group, location, or class type. I performed a variety of testing and debugging on the search feature, ensuring that results returned were correct in their content as well as formatting.

I also wrote a variety of front- and back-end code to provide for display of employment opportunities, news items and press releases, and executive team members. Employment opportunities can include PDF and MS Word documents that job seekers can download. All these pieces of content can be easily configured by non-technical YMCA personnel using a back-end web interface.

Chic Paws This is a standard e-commerce site providing for the sale of high-quality imported pet supplies. The client required that the site’s database be usable as part of an inventory-tracking system, so the administrative pages used to enter products also display easily readable feedback on the number of products in stock, sortable by color, size, and/or material. I created a back-end interface that would fulfill these requirements.

Due to a missing step in the graphical mockup of the shopping process, I had to implement two parts of the shopping interface on the same page. By using AJAX, I was able to allow the page to shift smoothly from one state to another without disrupting the shopper’s experience or navigation path.

Page Mill Properties This site, for a real estate investment advisor and fund sponsor, was fairly straightforward. It required the usual back-end administrative pages, allowing the site owners to easily update site content using a web browser, and I built a variety of object classes and administrative pages to provide this functionality. I also created front-end portfolio display pages, providing for elegant display of the client’s portfolio of real estate properties as laid out in Photoshop composites by the site’s visual designer. This feature includes automatic scaling of images uploaded via the back-end admin pages.

Manasian & Rougeau I collaborated with a local graphic artist and designer on this site — he created the page design and layout, then I worked from his Photoshop composites to provide a live site using dynamic XHTML, CSS, and PHP. The “Pleadings in Pending Cases” and “Firm News” areas both include back-end PHP processing to display information that can be updated by firm employees using a web-based, password-protected administrative interface. The “Attorney Profiles” page uses dynamic HTML to allow users to easily switch between views of the various company attorneys’ bios.

The site is almost completely done in XHTML 1.0 Transitional; the only exception is the use of the allowtransparency attribute on the main <iframe> element, which was necessary to get the desired effect in Internet Explorer. The Transitional doctype was required in order have nav-bar links target the <iframe>, as the target attribute isn’t allowed in Strict doctypes (and <body> isn’t allowed in Frameset doctypes!). Pages within the <iframe> are all valid XHTML 1.0 Transitional or Strict.

Golden Gate ASHI The Golden Gate chapter of the American Society of Home Inspectors (ASHI) had a pre-existing site using static HTML to display information that frequently changes (lists of inspectors by county, upcoming event listings). I rewrote the site in PHP, keeping the page layouts and the look and feel of the site unchanged, while using a MySQL back end to store all dynamic data. This increased the options available for searches of home inspectors — previous searches were by county only; now users can search by any criterion (first name, last name, ZIP code, et cetera) or even by multiple criteria. I also created a password-protected, web-based administrative interface that allows chapter members to easily add, edit, and delete inspectors and events listings.

Aspect Foundation I was contracted to work with some pre-existing Perl scripts on this site’s back end, starting in June of 2004. Some scripts were used for search functions; others handled data uploads (generally in tab-delimited text format) and generation of static pages. All scripts needed changing to conform to new ways of sorting and classifying the data being handled (namely, exchange students coming to visit the US). The upgrades on the existing scripts required careful testing, precise attention to detail, and deft integration with the existing codebase.

Later work on this site involved creation of the Aspect Student Flights Center (linked from the site’s main page), which allows exchange students, their host families, their natural families, and authorized Aspect Foundation personnel to see (and in some cases, edit) information about their incoming and returning airplane itineraries.

Santa Clara VTA I did some contract work on this site in 2000 and 2001. At that time, the site’s coding was largely static HTML, but also used a variety of back-end CGI scripts to provide dynamic information. It also used scheduled command-line scripts (generally in Perl) to generate static pages from other data on a daily, weekly, or monthly basis. I coded HTML for various pages from DreamWeaver templates, applied templates, did QA checking on large portions of the site, and made wording corrections where directed by the client. I also assisted with coding and QA checking of various back-end Perl scripts, particularly those that converted text-based schedule information into HTML.