I'm a Web Developer, a Javascript fanatic, and an enthusiast for anything that makes websites work better. I love web development, whether its starting with a blank Notepad document and turning it into a fully functioning website, or writing a complex Javascript web application utilizing various design patterns to ensure my code is clean, reusable, performant, and rescalable. At my current job, I focus on creating consumer-facing functionality in the form of web sites and web apps. Have a look at the portfolio section to see some of the projects I've worked on.
The CafePress Product Designer allows designers to fully customize their products with an intuitive drag and drop interface. It lets users shift, scale, or select preset options to fit their design perfectly onto their products, ensuring every product is exact to their liking.
The Target PhotoPrints Mobile App allows users to upload a photo from the gallery or camera on their iOS/Android devices and instantly have their photo prints available at a Target location nearby in a matter of hours.
The CafePress.com responsive website project included redesigning and coding the whole user buy flow – Home Page, Search Results, Department Details Page, Product Details Page, Cart, and Checkout to work on Desktop, Laptops, Tablets, and Mobile phones with one code base.
The CafePress Product Designer allows designers to fully customize their products with an intuitive drag and drop interface. It lets users shift, scale, or select preset options to fit their design perfectly onto their products, ensuring every product is exact to their liking. Once edited, the user can preview their modifications on the product, choose color options, then save to have their customized product instantly available on the CafePress marketplace or their shops.
Engineering wise, the Product Designer needed to work with over a 1000 product types and millions of designs - each with unique dimensions and orientations. This involved a lot of math to ensure what users saw on their screen is exactly what the finished product looked like. On the client side, I needed to hit multiple CafePress APIs to get the information needed - One for the user uploaded design information, another for the product print area and bleed edge information, and one for the color availability for the product. I used the object literal Javascript pattern to cleanly organize the information from these APIs, as this data would be needed for saving the product. I used percentages, offsets, and positions to get the user modified data, calculated the numbers against the original service data to get the final numbers that the product rendering and product creation/save API would accept.
One of the most challenging parts was giving users as much control as possible, while respecting the limits of CafePress’s imaging and printing restrictions. This was solved by using drag functionality, but writing custom methods which checked the drag positions versus the print area restrictions, and snapping the image back into bounds, while giving users tooltips to explain the restrictions in easily digestible portions. I also leveraged both browser and JS caching to keep the number of calls minimal, and give users the feel of a quick, extremely responsive, easy to use app. The code is completely scalable and modular, allowing it to be used in any section of the site.
Project Stats: ~3 months from concept to launch, ~1000 lines of Javascript, 6 JSON APIs.
The Target PhotoPrints App was a freelance project done for Target. The App allows users to upload a photo from the gallery or camera on their iOS/Android devices and instantly have their photo prints available at a Target location nearby in a matter of hours. Upon launching the app, the user is presented with a list of Target locations - either nearby or near an entered zip code. After selecting the location, the user can upload multiple photos from their gallery, select the sizes they want those photos printed in, and confirm the order to have it ready to be picked up at Target.
The App was made using jQuery Mobile and hand coded Javascript/jQuery using the revealing module pattern, then wrapped using Phonegap. We required a custom plugin to allow users the ability to upload multiple photos at once, along with using Phonegap's Camera, File Transfer, alerts, and Geolocation plugins. I also utilized the HTML5 Geolocation API when available to let the app function if permissions were denied. The app used a RESTful JSON API in conjunction with Google Map's API to get the Target store locations & photo printing sizes available at each store. Once the user selected the images, we needed a custom API to upload the images to the cloud and return the pertinent data about the images such as the dimensions, file name, and file size which would then need to be sent along with the order details in the final step.
Project Stats: ~1.5 months from concept to submission. Single codebase for iOS and Android. 5 native and custom plugins.
CafePress.com is an E-Commerce store with over 10 million visits a month, over $10 Million in revenue monthly, millions of products, designs, and members. With visits from mobile rising dramatically, we were presented with 3 months, with only 2 Front end developers to design and develop, a mobile friendly version of the site. Instead of attempting a mobile version of the site, we decided to redesign and re-code a fully fluid buy flow, able to work on any device regardless of its width, height, pixel density, or orientation.
The pages included in the redesign covered the whole user buy flow – Home Page, Search Results, Department Details Page, Product Details Page, Cart, and Checkout. I used essential responsive design and fluid width principles, using percentages for widths and margins, ems for font sizes and minimal pixel declarations.
Performance was a key factor in recreating the buy flow. I didn’t just want a site that looked good on your phone, but one that also loaded quickly, and was easy to interact with. This was achieved by:
The revamp of the CafePress members area offered innovative new functionality for members to completely change how they use CafePress to manage their shops, designs, and products. Along with a fresh new look, the members area redesign gave users a Dashboard – A feed based landing page which let them conveniently monitor their sales, views, orders, and public facing details. Outside of Dashboard, we created new pages to manage, update, add or delete new designs and products; A public profile page – a home to easily view all designs by a member; Follow, Like, and Comment functionality to allow users the ability to follow their favorite designers and be notified ( through dashboard or email ) when they post new designs or products.
I took the opportunity to not only add this new functionality, but to remake the members pages from the ground up, using HTML 5 semantic code, Javascript code organization through the revealing module pattern, as well as custom plugins to allow the functionality to be scalable to other parts of the site. Nearly every section utilized AJAX with JSON and client side templating to provide a fast, dynamic experience without having to reload any pages, giving the users an app-like feel.
The project contained numerous smaller projects, and encompassed a large amount of functionality, from creating a mini Facebook and Twitter to Bulk editing capabilities allowing users to upload, create, rename, and tag a large amount of designs and products at once. This was one of my earlier projects at CP, and I used to opportunity to introduce a technologies that became a standard for the company, such as Object Oriented Javascript, HTML5 semantics, Graceful degradation with polyfills, client side templating, Ajax based data refreshes utilizing JSON, and fluid width responsive design principles.
Fanto is a one page responsive website showcasing the iOS Photo retouching app Fanto. Having the opportunity to work with the designer from the ground up allowed me to optimize the site and create a layout that fully lended itself to be completely responsive, without using hacks, display:nones, or other 'retroactive' responsive techniques. While it was still designed to be desktop down instead of mobile first, mobile was always kept in mind as the site advertises an iPhone app. For techniques, I stuck to using percentages and ems instead of pixels, and chose the breakpoints based on the content rather than device widths. While the requirement was still to have the site adapt to phones, tablets, and desktop, making it fluid instead of simply responsive is much more futureproof and automatically adapts to devices of any size.
For my new site design, I wanted not only something that would allow me to display my portfolio pieces, but to build a site using the emerging technologies I'm interested in using. The site is coded to be fully dynamic, and could easily be implemented into a CMS. The navigation is also done through AJAX and the use of HTML 5 push and pop states to reduce loading times but still allow for traditional navigation and deep linking, providing a seamless experience. I also wanted to challenge myself and avoid using plug-ins, though they could have shortened the development time.
Features:
The redesign of the New & Now American Apparel page required a large amount of pre planning. The page needed to be updated daily and switched through hundreds of images. Functionality wise, I decided to populate the page using an ASP script that grabbed the assets from a folder on the server instead of hard coding the image paths in Javascript as the site had done thus far.
The page was first coded using HTML and CSS to create the layout, then ASP to populate the images and pass them into the Javscript, which then uses bxSlider to create the sliders.
Features:
For American Apparel's 15 year anniversary, we needed a convenient way for the user to view over 300 assets including videos, articles, pictures, and such. The Timeline was a way to fit a large amount of content in a relatively small, lightweight app. We accomplished this by loading assets as they were requested rather than all at once, appending them to the DOM after user action. The app was developed by a team of three front end developers and a designer.
Features:
Envirolife was one of my earlier projects, and was done using very basic HTML and CSS to create a pixel perfect rendetion of the designer's original comp. The site relies more on image elements than CSS because of this, but still accomplishes the goal of providing the client with a functional site complete with a sliding header and a sliding webcam feed. The HTML and CSS was kept as semantic, clean, and minimal as possible at the time.
Features:
Gift and Photo, a retail store that's been open for over 15 years wanted to establish a presence online without spending a lot of money. They needed something that would be easily maintainable without the need of hiring any tech people, as the business is a small family business. I decided to use Magento as it is open source and has free to use plug ins. The site features the full product line as well as the ability to add categories, products, new specials. Features:
When Vampire.com wanted to reinvent it's JeT'aime Brut Rose Sparkling Wine, they needed a clean and simple website that conveyed the elegant feel of the product. The website is a simple single page site, with an intro page which I coded as a simple overlay to help with SEO but detail needed to be paid to ensure the page rendered exactly as the design, across multiple browsers. The actual content is always visible to search engine crawlers and the site uses a small amount of assets, achieved by using as much system text as possible, including the CTAs.
Using jQuery Mobile, I created a Mobile App/Mobile website version of my resume, which behaves completely like an app and could easily be transitioned and submitted to iTunes or android market as a fully functional mobile application. The site uses jQuery transitions to function more like an app than a web page, but can still be viewed on a mobile browser for illustrative purposes, though to get the full effect, it is recommended to view from a mobile device. Features:
The contest was done in association with Sony Pictures to promote both Vampire Wines and the release of the movie. The page needed to be created last minute due to legal restrictions and thus was bare bones. We needed to ensure a large amount of entrants were sorted into tables and properly archived for access by both companies. The contest is now closed however and cannot be fully displayed due to legal restrictions.
Use the form below if you have any questions, comments, job inquiries, or hate mail.