My friends Paolo and Steve were putting together a Kickstarter for their card game, No Benefits, and I was asked to quickly jump on and put a site together from some designs.
Within a week, we had a fully operational multi-page site, with some fancy slideshow and CSS transition effects, and of course, it's mobile-friendly.
I developed Lab Zero's new website! We started from the old Rails 2 site, upgraded it to Rails 3, and I worked with designers and content strategists to form a simple site with lots of easy-to-access information on our different projects.
The site makes extensive use of PJAX and Bootstrap's Carousel component to create an experience that takes you from page to page with smooth transitions. All animations on the page are done with CSS transitions, save for some smooth scrolling.
The site is also responsive - load it up in a mobile browser or resize your browser window and you should see a different layout. We made sure to make the contact information accessible as the footer of each page in mobile resolution, as we expect that's what most people would be looking for as they're on the go.
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.
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.
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.
I put together a website for me and my fiancée! I wanted to create a cute and welcoming page that talked all about us and provided future wedding guests with information about the festivities.
The page uses Superscrollorama to achieve a parallax effect, taking me, Anna, our cat, and a katamari's worth of other objects along for the ride. It's also one of the first responsive sites I put together. A lot less magical on mobile, but just as usable.
The site doubles as an invitation database for us, as we use RailsAdmin to manage our guest list. Guests, in turn, can RSVP on the site and manage aspects of their invitation, such as who's going and if there are any special requests. The source of the site is available on GitHub.
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!
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.
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.
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.
As a big fan of webcomics, I felt like helping one of the most hardworking cartoonists I know, Allison Shabet, take a load-off by retooling and automating her 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 Allison 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.
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.
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.
I teach a class on Front-end Web Development at Noisebridge. The class is split into a lecture and lab, each of which occur once a week. The lecture is also broadcast and saved to YouTube - I have some recurring students from other parts of the world.
I take the class through an introduction to HTML, then CSS, and after a few weeks of topics such as positioning, floats, and making sites from mockups, I transition to JavaScript where I give an introduction to general programming, then begin to discuss frameworks and plugins such as jQuery. The class finishes off with more specific topics, such as progressive enhancement, preprocessors, and a light intro to Rails.
The class is taught free of charge, and entry to Noisebridge is free as well. I'm not even an official member of Noisebridge - the space is set up such that you can do as you please, so I decided to just begin teaching.
Teaching the class has started several people on their careers, and it has also helped me strengthen my knowledge about what I do in my own. Being self-taught, I realized that I never really had a solid grasp on what I was doing until I was actually able to explain it in layperson's terms, and this class has provided me with a great venue to do so.