- 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.
Status: Offline. This site ran for several years, making a modest income before we decided to pull the plug and liquidate the company. We decided that we just weren't ringtone people and were no longer passionate about running the company--and so, on to other things.
Screenshots (click to enlarge):
- 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 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
- 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):
- 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
- 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.
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
GitHub
Run Demo
findOdd(intArray)
Scrolling Viewport in Pure JS
Note: normally, this would be as simple as using an obj.scroll() method from a JavaScript library such as jQuery but this version demostrates building the functionality from pure javascript.
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
Here are some extremely light shell shortcuts I have created and used--I've done a lot more with shell scripting but it's all proprietary. You might be interested in my dotfiles :)
OSX: Use Say Command to Help You Play Hide-and-Seek
Hide-and-Seek is one of the greatest games in the parental arsenal. Your kid runs off and hides for several minutes, while waiting for you to find him/her. This gives you time to catch a breath and check your email without feeling like a loser. If you'd also like to take advantage of the counting time--claiming that thinking space as your own--use this command on your OSX terminal to maximize downtime. Also, if your kid is like mine, you can get away with "for i in {1..100};" :)
View Code | Rate/CommentSVN: Get a Bulleted List of Commits By a User for a Specifc Day (Daily Work Log)
When I was working from home as a contractor, I wanted to add a summary of my development activity in my timesheets. After fiddling with svn logs for a bit, I came up with this nifty little command-line shortcut for getting a bulletted list of my checkins.
View Code | Rate/CommentCheck back for CSS/XHTML, ActionScript, SQL, Objective C, C++ and many more examples.
- Desing Continous Delivery Process
- Build/Setup Jenkins
- Write deployment shell script, which deploys parts on demand
Challenge: Create a process that allows modules within a UI system to deploy independently of the whole.
Solution: Use Paper (by 53) to draw out a plan, create a Jenkins server with build jobs and a deployment script to deploy code on nodes.
- Architectural Design
- Implementing dual server setup
- MySQL Synchronization
- Postfix Email Server Construction
- Monit Service Monitoring
Challenge: Setup a redundant backup server on Amazon EC2 to handle failover. Datqbase must sync completely in real-time, seemlessly backing up authentication keys and any current user activity. Goal set for zero downtime recovery and failover.
Solution: Setup 2 Amazon EC2 servers with a mysql master/slave pair, content syncing and elastic IP addresses for immediate switching between the two.
- Architecture of User Authentication Model
- UML
- Implementation in jQuery/PHP/MySQL
Challenge: Model a simple user authentication scheme
Solution: Use OmniGraffle to model the UML, jQuery, PHP and MySQL to implement.
click to enlarge:
click to enlarge:
click to enlarge:
