Meetup.com
Meetup.com is a website and company based in New York, focused on fostering local community groups. I was one of the first three interns hired by Meetup since its founding in 2001.
Working closely with fellow intern, Alejandro Ciniglio, I proposed and developed both a mobile version of Meetup.com and a native iPhone application.
For the mobile application, I was responsible for the design and the frontend code (HTML+CSS). I also fixed bugs in and helped architect the Java backend. The final product is the result of working with Meetup's CTO, product managers, QA, and end users.
With the mobile site finished, I set out to design and develop an iPhone application. As with most of my projects, I began by sketching out all of the screens of the app, about 30 in total.
In the initial version, I included most of the common features — viewing your upcoming Meetups, keeping track of your Meetup groups, location-based searching, updating your Rsvps, and viewing photos within a group. The interface is created programatically and the table view cells are drawn as custom views for optimal performance. Performance and memory leaks were monitored using Apple's Instruments and Xcode's static analyzer. The application is still in development.
Yahoo! Insights
Working as an intern at Yahoo! during Summer ’08, my first major project was to work on Yahoo! Insights, the second largest internal application after the intranet. Insights is an application and social network that aggregates documents from throughout the company, including financial reports, design mockups, and research findings.
Although the site worked fairly well, the three major complaints were design, performance, and search.
Working closely with the product manager, Tim Jones, I designed and iterated on three separate designs before choosing the final design. My other front-end initiatives included removing all legacy JavaScript, standardizing on YUI for all widgets and interface elements, and generally redesigning all the subpages and user interface elements.
For my previous projects, performance generally wasn’t an issue — a few users might be using the site at a given time. With the scope of this project, however, there could be hundreds of requests at any given point. After quickly reading up on performance and consulting with the Exceptional Performance group, I set off to improve the speed and usability of the site. I first migrated the project to PHP 5 and MySQL 5, and moved the install from BSD boxes to the company-preferred Linux boxes. I then updated MySQL’s query caching settings and deployed APC, an opcode cacher. To improve PHP execution, I went through the hundreds of source code files and removed all of the extraneous includes (many of which were failing and slowing down the site). Finally, using memcached I was able to selectively cache the various download statistics and data from external feeds, which dramatically improved performance.
Having tuned the back-end, I used far-future expires and CSS spriting to improve front-end performance. I also introduced a versioning process that allowed us to dynamically concatenate and compress all of our CSS and JavaScript files. In the end, I was able to bring down the front-page loading time from over 20 seconds to just under 100 milliseconds.
Finally, the old search was homegrown and generally didn’t work very well. Using Lucene, I wrote a combination of Java and a light PHP bridge to index and search the existing documents. I also used Apache’s POI project, written in Java, to convert Microsoft Office documents into text for indexing. I also developed a combination AppleScript/shell scripting solution that automatically converted PowerPoint presentations into a collection of images, which was presented in the search results. After it was complete, I was able to add search highlighting, ordering by relevance, and much faster search times.
In addition to the user-facing improvements, I also pushed to add a wiki, bug tracker, and the use of CVS. Using a combination of the three, I was able to fully document my work and record my changes.
Yahoo! Roundtable
Just a few weeks before the end of my internship, I was asked whether I wanted to work on another project, which allowed higher-up executives and product managers to collaborate and develop company-wide technical manifestos, which would act as guideposts for engineers working throughout Yahoo!.
Working with my boss, we decided that the application would let the authors view a manifesto and comment on its individual sections. The document would also be viewable in three different views (an overview, comments view, and print view).
With the design completed, I decided to create a front-heavy architecture, only using the back-end for writes and the initial display. Changing the view and displaying the comments panel would all be done in JavaScript. Using YUI, object-oriented JavaScript, and elements of MVC, I had an initial prototype finished in just a few days. After several meetings and iterations (I’m told that Rasmus Lerdorf, creator of PHP, reviewed my project, but I haven’t confirmed this), we were able to deploy Yahoo! Roundtable (which I named) on time. Learning from my earlier work on Yahoo! Insights, I also used memcached to cache the display of the page whenever a comment was written, which meant that writes were slow, but reads (which outnumbered writes) were fast. By caching the output on writes, loading the initial page was almost instantaneous, and pulling up the comments for a particular section didn’t require a call back to the server.
The tool was very successful, and except for a few bugs which we fixed quickly, there were already hundreds of comments left on the documents by the time I completed my internship. By the time the editing process was finished, people wanted to know if they could keep the tool for the final documents, so that people could continue to leave comments. Other groups throughout the company were also interested in using and expanding the tool for their own projects.
The Wesleyan Argus
Working with the editors-in-chief and fellow web developer, Eli Fox-Epstein, I was commissioned to deliver the first redesign of our school's newspaper in eight years. Starting in the Fall of 2008, we worked together to migrate 7,000+ Mojibake-filled articles into WordPress, develop countless plugins, create an entirely new design, and introduce blogs and video to the new site.
While Wordpress worked very well for a small number of users posting individual articles, it lacked the ability to manage and publish multiple articles at once. Using WordPress' plugin mechanism and jQuery, I was able to write a full issue-based architecture, allowing articles to be associated with arbitrary issues. With this new architecture, the online editors are able to easily publish just under one-hundred articles a week.
My final task was to enable video on the site. Using a content delivery network, we were able to significantly reduce the load on our servers and serve the content as quickly as possible.
We released the site at the beginning of Spring ’09.
Rideboard
I developed the Rideboard after I was tired of paying for taxis to and from the airport. Conceived, designed, and developed over a series of months, this PHP + MySQL web application uses unobtrusive JavaScript, CSS, and Prototype for Ajax interactivity.
Kalliope: Audiovisual Language Learning
Kalliope is a tool that leverages the Flash Media Server and allows faculty to quickly create questions, associate them with quizzes, publish them, grade them, and later review them. Its strength lies in its ability to associate audiovisual files with questions, and to require students to provide video or audio responses. This allows language teachers to evaluate a student's pronunciation or understanding. It is also useful for sign language professors, for whom giving tests and quizzes is traditionally difficult.
Working with web application developer Phil Isaacs (pictured above) and graphic designer Jason Lalor, I was initially chosen as an intern to do PHP and MySQL web development. We began with an initial set of specs in early June, designed and developed the program over the next two months, and began heavy beta testing in August. My involvement included developing many of the interactive DOM scripting user interface elements, database design (the concept of publishing quizzes), proposing interface compositions, and designing and developing the architecture for various parts of the application.
A screencast was created using an in-development version (I have a brief cameo near the end).
Rethinking the Media Database
I was commissioned by Wesleyan's technology department to help rebuild a legacy product that allows faculty to upload and organize media into public and private collections. There were problems with importing media, organizing media, and general interface issues. I wrote architectural documents, delivered an entirely new design, and met regularly with my team members.
In addition to my consulting work, I also wrote a Flash-based multi-file uploader using Adobe's Flash / JavaScript bridge before it became popular.
Mike's Icon Design
Developed in 2004, I worked closely with graphic designer Mike Matas, transforming his Photoshop comps and vision into clean XHTML and CSS. JavaScript is used to dynamically provide different icon view options (list vs. thumbnail).
Paper.com
Working with CEO John Engel, I redesigned the homepage of leading online paper store, Paper.com. Due to the success of the new design, I was later rehired to design 50+ product banners.
WesWiki
As a freshman at Wesleyan University, I set out to create my own Wesleyan encyclopedia. I reviewed restaurants, added dorm information, and conducted research in the university archives.
Building off MediaWiki I was able to deploy the finished site in just a couple of months.
Wesleyan Student Assembly
I was commissioned to design and develop the main student page on Wesleyan's website. Working directly with the administration, I created this student portal, eventually to be deployed as the home page for all the lab computers.
Instructional Media Services
Working with fellow web developer Mike Leone, we set out to re-envision and re-develop the previous computing labs webpage. It uses a simple HTML-centric, file-based CMS with flexible templates and 404 pages with spelling suggestions. The hours page is transformed from XML files using XSLT. It also pulls in information from the university timeclock database to display which consultants are currently available.
A Better JavaScript Tetris (ABJT?)
Looking at other JavaScript Tetris implementations, I found most of them clunky, visually unappealing, and generally not very fun. I wanted to create a game that was as well-written and enjoyable to play as Quinn, a Tetris game for the Mac.
Using Quinn as my model, I created a game that is fully object-oriented, and not dependent on any JavaScript framework (although it does use Scott Schill's SoundManager API). It's under 400 lines of code with whitespace and comments and under 8K when compressed.
Every aspect of timing is controlled for optimal gameplay — holding the left or right arrows down for .2 seconds snaps the piece to the edge of the screen and holding the down arrow halts the game timer and animates the piece down the field, resulting in a smoother animation. The game also supports pausing by pressing the Tab key, or simply clicking away from the window.
Reading
These are some of the books that I read to keep up with my trade.