- Senior Web Developer
- Rewrote front-end architecture
- Analysed and fixed security holes
- Managed a CSS developer and two 3rd party developers.
Challenge: Rebuild an outsourced content centric social network using the latest web technologies. Make it sustainable, scalable, faster and fully object-oriented.
Solution: Create a new front-end framework using the Extjs library. Reorganize file structures for efficient loading and running. Completely rewrite all front-end code. Push the dev team into a security minded, test driven development cycle.
- CTO/CIO and Co-Founder
- All Programming: PHP,MySQL,Shell,AS,etc...
- All Design/UI: XHTML,CSS,AJAX,WAP,Flash,CSS
- All Server: LAMP Stack install and Admin
Challenge: Create a web application, which allows users to create
ringtones out of their own music. Handle large volumes of system processing, file upload and management.
Allow users to download files from cell phones using secret codes. Manage payment methods and credits
for downloads.
Solution: Load up a Debian Linux box with Apache 2 and a dozen open source audio processing apps. Create a PHP/MySQL driven user interface to login, log use, manage files, and trim uploaded audio files. Setup PHP generated WML pages for cell phones. Create a Flash/AS driven audio trimmer for audio cropping and previewing.
- Flash Animation
- 3-d & 4-d Wireframing
- AS Programming
- Music/Voice Recording
Challenge: Explain four-dimensional physics with a two-dimensional
Flash video. Program interactive modes for all dimensional models
from zero to four. Record audio tracks and sync with Flash video.
Solution: Create wireframes using AS and animate vector graphics created in Flash. Use AS to control audio and video.
- MySQL Database Construction
- SQL insertion
- PHP
- XHTML, CSS, and JS
Challenge: Create a membership based community for Seattle's graffiti
scene. Users must be able to upload, download, post comments and register, while the site logs
statistical data.
Solution: implement phpBB forum, and Wordpress blog, combine the two into one (for cross communication), create MySQL databases and build PHP pages.
- MySQL Database Creation
- PHP database programming
- XHTML/CSS
- Blog creation
Challenge: Supplement the materials on the
SCCC website, merging five out-of-date
websites into one. Create a blog-like system for announcements and make a content management system for
the database.
Solution: Write all pages in PHP, connecting to a MySQL database. Create a PHP administration table for all database content. Make a login page for the administrator and provide blogging options.
Site Since Evolved
- Case Studies Pages
- JS Functions
- XHTML/CSS
- Positioning to Standards
Challenge: Turn a designer's vision of a portfolio into a website.
Solution: Write XHTML and JS functions to show/hide images and text. Create Flash videos out of QuickTime movies.
Site Since Evolved
- Flash Animation
- ActionScript
- Conceptual Design and Implementation
- Production
Challenge: Create a model for displaying a set of courses and assessment tests through a gateway interface.
Solution: Among many wireframe concepts, created a fun, bouncing design. This one did not fit the ultimate needs but kept us briefly entertained. Grab ahold of some of the ghost-like white logos to drag the course module and bounce it around the screen.
Other comps (click to enlarge):
- Flash Animations
- Illustrator Designs
- User Interface and Data Modeling
- JavaScript/HTML/CSS/Flash Production
Challenge: Design and create rich courseware for internal Microsoft® training.
Solution: Design layouts in Illustrator, create a Flash/JavaScript course body and lay it all together with brilliance and ingenuity. The interactive example began as three paragraphs of textual requirements for handling a complex data set, which I then turned into what you see. Below are several designs for a couple of the courses I developed. More detailed interactive demos are available only in person.
Other comps (click to enlarge):
- Flash Animation
- Artistic Design
- Scene/Layer Organization
- Production
Challenge: Dynamically present a University of Washington theatrical
dance troupe. Develop a unique navigation system, which represents the group while responding to user
activity.
Solution: Create and Animate a navigation, which morphs into and out of a dancer.
- Illustrator Design
- XHTML + WAP/WML
- Browser + Phone Detection
Challenge: Create a template site, which detects browser/device type and renders the appropriate markup. Design and implement.
Solution: Use PHP and WURFL to detect a user's device, render output and log results. Design a page flow in Illustrator, export graphics and commit.
- Mobile Device Detection
- XHTML/WML
- Credit Deduction System
Challenge: Create a mobile site for easy downloading of mobile content. Hook it up to a credit deduction system
Solution: Use PHP and WURFL to detect a user's device, render correct markup, accept user input codes and deduct credits upon succesful download.
Strategies
- Test-driven development
- Clear but concise comments and variable naming
- Standard documentation format
- Object-oriented design
- Unobtrusive JavaScript
- Performance optimized loading
Ideological Statement
Tools
IDE
JavaScript Libraries
- jQuery
- Ext JS
- Script.aculo.us
- Prototype
- Dojo
- MooTools / moo.fx
Examples
findOdd(intArray)
Scrolling Viewport
Note: normally, this would be as simple as using an obj.scroll() method from a JavaScript library such as jQuery.
View Code and Demo
Strategies
- Test-driven development
- Clear but concise comments and variable naming
- Standard documentation format
- Object-oriented developement (where needed)
- Don't reinvent the wheel
Ideological Statement
Tools
IDE
Framework
Example
array_occursOdd($array)
Strategies
- Object-oriented design
- Unit Test with NUnit
Example
TextUtils
View Code
Strategies
- Use CPAN so I don't have to reinvent
- Non-obfuscated code :)
Example
IRC Bot: Oblio
- Automatically connect to a configured IRC server
- Automatically join a set of channels on the IRC server
- Listen for a commands passed in both the public channel and private message space
- Provides a menu of available commands with the command "!oblio -h"
- Op the owner of a request command contiaining a passphrase
- rot13 encrypt a message back to a user
View Code
Strategies
- Create awesome art
- Think outside the box
- Use minimal character variation
Example
Embedded Cubes (Tesseract Frame)
7------------------4
|\ |\
| \ | \
| \ | \
| \ | \
| \ | \
| \ | \
| 3------------------0
| | | |
15--------------|-12 | |
|\ | | |\ | |
| \ | | | \ | |
| \ 6------|--|--\-----5 |
| \ \ | | \ \ |
| \ \ | | \ \ |
| \ \ | | \ \ |
| 11-----------------8 \ |
| | \ | | | \ |
| | \| | | \|
| | 2---------|--------1
| | | |
14-----|----------13 |
\ | \ |
\ | \ |
\ | \ |
\ | \ |
\ | \ |
\| \|
10-----------------9
Check back for CSS/XHTML, ActionScript, shell code, SQL, Objective C, C++ and many more examples.