Like I did in Jan 2010, I wanted to reflect on some of the technologies I learned and things I did over the last 2 years…

Backend:

• Learned tons about scalability! Scaled Quizlet to serve 11 million visits per months (60 million pageviews, 5 million uniques), serving mostly UGC content with an average page response time of < 50ms.
• Got very comfortable with understanding and tweaking advanced configuration options of Apache, PHP, & MySQL for desired functionality and scalability requirements
• Went from a command line beginner to feeling very comfortable in Linux and Solaris, frequently writing bash/shell scripts for common sysadmin tasks, and trying to automate as much as possible.
• Worked with large data sets: our database had several hundred million rows and was in the dozens of gigabytes in size.
• Played a dev-ops role and helped transition all production servers to use Puppet for configuration management. Focused on having a process for all server related changes and created the ability to have over a dozen different servers recreate-able in very little time.
• Learned how to make MySQL fast on a high-trafficked and large database, do replication and have a quick recovery plan. Dealt with configuring databases, designing schemas, and optimizing SQL statements. Also managed our relationship with Percona’s consultants (leading MySQL experts) and learned from them.
• Automated backups and ensured we had quick access to them in the right places plus securely storing them off-site to Amazon S3 for safety. We had people relying on their data being accessible for studying and thankfully were able to recover quickly from incidents without losing any data.
• Sphinx Search is a very powerful open source search server good for indexing and quickly searching over MySQL. I learned how to configure it for our purposes and use its various features to power search on millions of rows of Quizlet content in a couple hundred milliseconds.
• Implemented and used several performance monitoring tools to keep tabs on a heavily trafficked website: Nagios, Munin, New Relic, etc.
• Learned all about (and implemented) email deliverability best practices: SPF records, DKIM, rDNS, Feedback Loops, IP address reputation, etc.
• Used several cloud service providers (Joyent, Slicehost, Amazon AWS). Setup reverse proxy CDNs for optimal performance of static files.

Frontend:

• Major focus on serious performance optimizations across entire stack. Spent time obsessing over how to get an extra 20ms out of a page load from our backend while keeping code clean. Resulted in an average page load of < 50ms across Quizlet.
• Also became extremely good at front-end performance; Did JavaScript profiling, proper handling of static files, caching headers, etc. Attended Velocity Conferences; Kept tabs on PageSpeed and WebpageTest waterfall results.
• Used Google Analytics Event Tracking for tracking client-side user events via JavaScript. Good for error detection and user behavior analysis.
• I already knew PHP well, but I’d say now I’m more of an expert at properly structuring object-oriented PHP5 on a large codebase.
• Learned all about and then implemented website localization & internationalization (i18n) for Quizlet, helping create a framework for user-generated translation submissions that launched in 7 languages.
• Got deep into Unicode and character encodings and implemented a language detection system in PHP based on n-grams and character encodings.
• Spent time optimizing with AdSense - A/B tested with different ad placement, targeting, and IAB ad sizes for better inventory.
• Wrote a very fast A/B testing framework and used it to optimize our upgrade page for better monetization
• Went very deep on the MooTools JavaScript library using it to build complex study games. In the past, jQuery has been my JS library of choice, but MooTools is very nice at being object-oriented and not afraid to extend native objects.
• Used Google Maps & Geocoding  API heavily (JavaScript and PHP) to build an events directory on CollectorsWeekly.
• Used the Stripe API to accept credit card payments (replacing our previous PayPal solution).
• Lots of cross-browser CSS – making things look good in browsers both old and new.

Dev Processes:

• Helped lead the development team with best practices and good processes for coding and communication.
• Became really good at Git and transitioned our team from SVN/Trac to Git/GitHub. Used git submodules to manage many of our dependancies and became a better open source citizen by submitting pull requests and bug reports in more projects.
• Did a lot of code reviewing on trac and GitHub with peers and new hires / interns.
• Introduced unit testing in both PHP (via PHPUnit) and JavaScript (via Jasmine); did some test-driven-development (TDD).
• Created a safer deployment process which first runs unit tests, PHP Lint, and other sanity checks before deploying.
• Started daily standups with the eng team to keep everyone up-to-date and on track.

Product:

• Along with development work, I was doing a lot of Product Management: feature triage and prioritization, tracking roadmaps, deciding among tradeoffs, etc.
• Huge focus on the user interface: tried to make every new feature high quality and easy to use. Spent a lot of time redoing the user flow of features that already existed to improve their ease of use. Removed clutter and made features that “just work”.
• Used Photoshop to work on visual improvements — designing or redesigning almost all the main pages and many shared UI components on Quizlet.
• Brainstormed and implemented game mechanics and other ways to make studying on Quizlet more fun and social.

Business+Management

• Focused heavily on recruiting other developers, helped create a process for finding potential candidates and putting them through a funnel. Did a lot of technical interviewing by phone/Skype and in-person. Helped build a great team of full-time people and interns.
• Team building. Helped manage and guide new employees, getting them up to speed and supporting their projects.
• Did a fair amount of biz dev as well. Negotiated deals for licensing software, worked out details of contracts. Talked with potential partners.
• Managed projects that other developers were working on, pushing for both code quality, fast completion, and a high quality user experience.
• Wrote a bunch of Quizlet blog posts about product announcements.

I’m sure I’m missing lots of stuff, and I should probably take even more time to write down some higher level lessons learned about startups. But for now this will do: startups are awesome and the best way to learn a lot of stuff really quickly by doing it. And if you’re lucky like I’ve been, it will be with an awesome team working on a great product used by tons of people.

I’ve recently moved onto a new opportunity that I’m very excited about. But I’m really glad to have been at Quizlet the last two years and I look forward to seeing it continuing to succeed widely!

(P.S., they’re hiring…)

…a behind the scenes look at how we created Speller, our engineering challenges and processes, and how we obsessed over the user experience and the educational experience.

Includes some technical details of how we programmed it (mostly JavaScript), the text-to-speech, development process and usability testing, and lots of screenshots of the different iterations we did in order to get the UI right.

It’s a little long, but hopefully worth the read!

Chapter 1: Introduction & Overview, Chapter 2: Quick Tricks – Good chapter to teach beginners to both JavaScript, jQuery, and PHP the differences between client-side and server-side code, and how the jQuery framework fits into it all.

Chapter 3: Tabs and Accordions – At first this chapter looks to be nothing more than glorified examples of jQuery UI Widgets, but later it actually does a nice job showing how PHP can be used with these widgets to do server-side management of the tabs.

Chapter 4: Forms and Form Validation – Interesting and insightful way of validating forms (both on the client and server side, which is necessary) without having to duplicate all the validation rules.

Chapter 5: File Management, Chapter 6: Calendars – Very specific examples, but Ch. 6 uses the very nice jquery-week-calendar plugin to create an interface very similar to Google Calendar and shows how to link it up with PHP managing the events server-side.

Chapter 7: Image Manipulation – Another nice example of bringing using both PHP and jQuery plugins (treeview and jcrop) to create something really useful.  In this case an image browser, resizer, rotator, and cropper.

Chapter 8: Drag and Drop – Standard sorting/dragging examples + persisting data.

Chapter 9: Data Tables – Using the DataTables jQuery plugin with PHP on very large data sets.

Chapter 10: Optimization – A few helpful tips regarding caching, automatically merging .js source files, JavaScript code optimization, perceived user load times, etc.

Overall, if you’re a programmer not super familiar with PHP or JavaScript, this book does have some very helpful explanations with good examples.

One small gripe about the book: while I do know that black and white books are much cheaper to produce, reading code without syntax coloring makes it unnecessarily harder to understand.

To learn more or purchase: “jQuery 1.3 with PHP” by Kae Verens.

Before: Requests, Suggestions, Sponsored, Highlights, Events/Birthdays, Connect
After: Requests, Events/Birthdays, Suggestions, Highlights, Sponsored, Connect

Step 1: install Greasemonkey (Firefox) or GreaseKit (Safari), and restart your browser
Step 2: install my Facebook Reorder Sidebar userscript
Step 3: visit Facebook and enjoy

Wednesday 5/27/2009

San Francisco, CA #io2009

Better liveblogging here: http://www.techcrunch.com/2009/05/27/live-from-google-io-2009/

100x improvement in JavaScript speed in the last decade

Firefox, Chrome, Safari, & Opera – all supporting HTML5 with Canvas, Video, Geolocation, App cache / database, Web workers

Canvas tag – supported in all but IE

Bespin – web IDE

Chrome profiler is built completely in HTML5

O3D – OpenSource 3d in JavaScript

Video tag – get video out of “plugin prison”

YouTube demo with <video> tag

Geolocation – supported in all browsers but IE

Mozillia VP – “A good API in 4 browsers is better than a perfect API in 0 or 1 browsers”

Google Maps will soon be adding a geolocation button

Announcement: Google Latitude on the iPhone in the browser using geolocation (WOW)

App cache / database – supported in all browsers but IE

Demo: with Safari – manifest file names cached application/graphics files

Demo: web app on Android with GMail in airplane mode – extremely fast

Web workers – threads in the browser – so JavaScript doesn’t completely freeze the browser

Demo: motion detection from the video tag all in JavaScript

===

Google App Engine

200,000+ developers, 80,000 + applications

Whitehouse app had 700 requests/second with no problem

Announcement: Java open on App Engine

Demo: develop an Ajax app in Eclipse (with Google plugin) in Java on both serverside (app engine) and client side (GWT) extremely quickly.  Just hit deploy (no FTP) in Eclipse.

Google Web Toolkit

Upcoming: Debug directly in any browser

Upcoming: runAsync() lets the compiler split up JavaScript files.  Example: 1.4MB to 200KB, compiler handled dependencies itself.

===

Google Web Elements (announcement)

Copy and paste website content:

Calendar, Conversation, Custom Search, Maps, News, Presentations, etc.

===

Android - coming soon new features

FREE ANDROID for everyone!

Updates to the previously beta versions of:

1. An event utility
2. DOM collection manager
3. Connection manager (for AJAX / XHR calls to the server, now with file upload)
4. Drag & Drop utility
5. Animation Library (now includes color animation support!)

Additionally, the release of improves upon:

1. AutoComplete
2. Calendar
3. Container (including Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)
4. Menu
5. Slider
6. TreeView

And adds a new control: the Logger (beta).