Jeffrey Carl Faden

• Web Development

  • Welcome Island

    

    Second Life recently added a feature called "Shared Media," which allows any surface to load a WebKit instance as its texture. I was tasked with creating the signs for the new Second Life orientation area, called Welcome Island, whose signs loaded static pages hosted on S3.

    This allowed the signs to use JavaScript to detect the user's locale and operating system, and load the correct translation and instructions via AJAX calls. It was important to use AJAX rather than URL rewriting because each user must load the same URL - using a client-side solution for custom content solved this problem.

    Welcome Island requires Second Life Viewer software to visit.

    March 2010

    Visit Welcome Island

  • Second Life Viewer Search

    

    I implemented an AJAX-powered Search interface using Django templates. The restrictions for this project were that the UI must not use the browser history, and that it must render perfectly in a WebKit instance inside the Second Life Viewer software.

    Given that this project was for WebKit only, I was able to use many CSS3 enhancements, such as box-shadow, border-radius, and custom scrollbar to make the interface look and act exactly as specified in the wireframes and comps.

    Make sure you visit this on a WebKit-based browser, such as Safari or Chrome, as this is not intended for general use in a web browser. Or visit the main Search page to see a web-based version that I also created the templates for.

    February 2010

    Visit Second Life Viewer Search

  • Destination Guide

    

    The Second Life Destination Guide has three components: a webservice, admin app, and multiple frontend UIs. I created and deployed the Django-based webservice and admin app, and editors use it to publish XML to Amazon S3, which is then consumed by the PHP-based Secondlife.com website, the Django-based Search stack, and more.

    By managing this project, I learned about building Debian packages, deploying webservices to load-balanced hosts, communication between public-facing sites and the dataservices behind them, and efficiently caching data.

    January 2010

    Visit Destination Guide

  • Dead Winter

    

    As a big fan of webcomics, I felt like helping one of the most hardworking cartoonists I know, Dave Shabet, take a load-off by retooling and automating his website.

    I didn't work on the design at all - rather, I completely recreated the site to use CSS, lose tables, and run on Django. Previously, the site required manual editing of several HTML documents and even an RSS feed to function. Now all Dave needs to do is enter in a comic, date, some extra optional information, and the site does the rest.

    Dead Winter is now hosted on Webfaction, which provides custom app installation, multiple webserver support, and shell access - everything this project needed.

    December 2009

    Visit Dead Winter

  • Diabetes Health

    

    In the year that I worked for Diabetes Health, I developed a PHP-based forum, wiki, search engine, help system, Flowplayer-powered video system, and rehauled almost all of the code to use PHP objects instead of associative arrays and common functions.

    The site's backend is also hand-coded, including an article submission form, article search and management, imagemap creator, and many other methods of managing the site's content.

    The site harnesses many other technologies, including the Mootools JavaScript framework, Zend Framework for its Zend_Gdata module, mod_rewrite for SEO-friendly URLs, the OpenX ads system, and more.

    I also acted as the principal designer, keeping the site's design consistent and appealing.

    February 2009

    Visit Diabetes Health

  • Portfolio 2009-2010

    Although quite a simple page, I used the Django framework to set this portfolio up and manage the sections and entries.

    This page uses jQuery for the animation effects.

    This portfolio and all Django-based content on JeffreyATW.com can be found on Bitbucket.

    February 2009

  • CAR

    

    A site with a simple design for my long-lived comic. I created the site, including the navigation system, RSS feed, and AJAX-powered commenting system on top of Django. The site also uses a JavaScript calendar and WordPress Audio Player.

    November 2008

    Visit CAR

  • Kennedy Technology Group

    

    I worked closely with a designer to turn her work from a series of Illustrator files into a functional website. Each page is dynamically generated by a base PHP file, which includes the appropriate content and sidebar buttons based on flat files.

    February 2008

    Visit Kennedy Technology Group

• HTML5 Toys

  • Menorah

    

    I made this menorah for the holiday season since I couldn't find any interactive online menorahs, wanted to submit something to the Chrome Web Store, and wanted to create a CSS3-focused project that uses no images. Indeed, no images are loaded on this page; all of the shading, rounded corners and particle effects are pulled off using CSS3 styles. Drag the rotating shamash to the other candles and watch them melt away!

    December 2010

    Visit Menorah

  • Binary Image Converter

    

    This toy takes a binary image and converts it to an ASCII message, and vice versa.

    I wrote this toy to function almost entirely in JavaScript, so everything except form submission and image verification happens in JavaScript. This includes the actual pixel manipulation to read or generate a bitmap, thanks to data URI and canvas.

    I learned how ASCII and binary are converted from one another - JavaScript has a handy function to parse a binary digit into an integer (parseInt(x, 2)), but not the other way around. I also learned how to convert images and canvas data into base64-encoded data URIs, meaning that I don't need to temporarily host an uploaded image on my server - just process it in memory and spit it back out in the response.

    June 2010

    Visit Binary Image Converter

  • Lasers

    

    This AJAX-powered page tracks and displays the mouse movement of you and everyone else visiting. You can also enter a name and RGB colors, which will be shared.

    This page sends constant requests to a Django-based server, which returns the current state of all active sessions. Unfortunately, this page is XHR-only, which means that constant requests must be sent, instead of opening up a socket.

    April 2010

    Visit Lasers

  • Tane (HTML5 version)

    

    This is a series of interactive HTML5-based pages. The object is to find "Tane" on every page and click to get to the next one.

    These pages were NOT designed or originally implemented by me - the real Tane is by Brian Lee. I simply intended to remake Tane without the use of Flash in any way, instead employing jQuery, Canvas, HTML5 Audio, CSS3, and other new technologies. I haven't caught up and recreated all pages in the real Tane - mine is still a work in progress.

    Due to numerous incompatibilities, this series of pages will ONLY work in Google Chrome.

    January 2010

    Visit Tane (HTML5 version)

  • Draggy

    

    I experimented with the jQuery UI Draggable interaction and created a fun toy that creates smaller and smaller children every time the main parent is dragged.

    CSS3 styles are used to add rounding, shadows, rotation, gradients and more, so Google Chrome is recommended for viewing.

    November 2009

    Visit Draggy

• Flash

  • Portfolio 2007

    

    This portfolio was programmed in ActionScript 3.0, dynamically loading all entries from an XML file.

    The zooming aspect of the portfolio proved to be an interesting experiment in user interface design - an exercise in elegance through simplicity.

    June 2007

    Visit Portfolio 2007

  • ProcrastiMATION

    

    A series of humorous shorts I did on a bi-weekly basis for the defunct media company UthTV. They're backed up on my site.

    July 2006

    Visit ProcrastiMATION

  • Portfolio 2006

    

    This portfolio was programmed in ActionScript 2.0.

    In this portfolio I focused on a subdued color scheme. I also included a Flash-based MP3 player, which could continue to play while the user navigated the rest of the portfolio.

    June 2006

    Visit Portfolio 2006

  • BUS

    

    An animation made for a film festival at UC Santa Cruz. I used filmed media, vector tracing, my own music and many voice actors.

    May 2006

    Visit BUS

• Contact

  • • All IMs: JeffreyATW
    • Twitter: http://twitter.com/jeffreyatw
    • LinkedIn: http://linkedin.com/in/jeffreycarlfaden
    • Facebook: http://facebook.com/jeffreyatw
    • Resume