BlizzCon Virtual Ticket is a premium online video product that provides access to live and archived video of all of the BlizzCon convention, to Blizzard fans around the world.

We wanted to make some big technical upgrades to the Virtual Ticket experience in 2018. Everything had been rendering server-side, with front-end asynchronous requests receiving large blocks of server-side-rendered HTML. This caused server load issues when there were traffic spikes, and it incurred costs as it required us to run more servers than necessary. We decided to offload a lot of rendering to the client.

I was charged with overseeing our React implementation for a team of five engineers. I started by researching to determine if reimplementing large portions of the Virtual Ticket experience with React was feasible with our resources, and it was. We then made a library of React components, all of them connected to a Redux state container. This workflow not only made for a more responsive interface for the user, but the component-based approach also made it easier for several engineers to work in parallel.

This is the announcement site for Rise of the Necromancer, an expansion for Diablo III. I’m very proud of this one because it’s much more than just a brochure, it’s an interactive experience that really ties into the world of the game.

It also makes heavy use of CSS3 animation for a page-turning effect, and despite being heavily textured, it is (mostly) optimized for high-resolution screens and it scales to fit screens of any size.

I was one of a handful of front-end engineers who worked on a top-to-bottom redesign of the World of Warcraft website, in preparation for the launch of the Legion expansion. The site follows a lot of modern front-end best practices. It’s beautiful at any screen size, and it’s built with reusable components, designed to function as predictably and independently as possible.

For the previous iteration of the site, there was a lot of repetition in code throughout, and a lot of minor variations on things, resulting in a lack of consistency and maintenance issues. We also had style guides in the past, but they never lasted long. So when we started, I identified living style guides as a way to solve these issues, researched best practices, and made our living style guide, along with establishing CSS and Less coding conventions for our team. It was the first living style guide at Blizzard Web & Mobile, and now all of our sites have one.

The Diablo franchise turned 20 years old on December 31, 2016, so we launched a retrospective site with lots of great imagery from over the years. I’m a huge fan of the franchise so I’m proud to honor its history.

There aren’t any new processes or technologies on display here, but because of this, we were able to use a process and technology that we were very comfortable with to turn out a high-quality page quickly and on schedule, with a very lean team.

For personal development, I decided to get out of my front-end engineering comfort zone a little bit and build a REST API, for a theoretical HTML reference site. The API runs on Node and Express with a MongoDB database, and it has the standard CRUD (Create, Read, Update, Delete) operations available. There’s also a Mocha test suite, and API requests are cached for better performance.

I then made a simple companion web application for interfacing with the API, also with Node and Express. It has a central list for viewing all elements and form pages for adding, editing, and deleting elements, with error handling.

I’m proud to say that I was given the opportunity to work on the announcement site for World of Warcraft: Legion, an expansion for one of the most successful games of all time. This was a very challenging and fulfilling project, with lush visuals and lots of video.

I worked with four extremely talented designers for the duration of the project, and I was the sole engineer up until the last couple weeks when I had some additional help to polish and ship the site. The launch of the site was timed with our announcement of Legion at Gamescom 2015 in Cologne, Germany.

Andy Wowhol is a silly website that I made to get more familiar with Blizzard’s Game Data APIs, which provide game data for building World of Warcraft and Diablo III community sites. This was one of my first projects to use Node and Express.

The site is about as simple as it gets: you input your WoW character’s name and realm, it fetches the character’s avatar image from the API, and then displays it in four different color variations using CSS filters.

This was one of the first full pages that I worked on for the World of Warcraft website: a feature page for Garrisons, a big new feature for the Warlords of Draenor expansion.

The page was published in the lead-up to the expansion launch to build interest, with lots of in-game screenshots and information on all the new things you can do with your garrison.

When I was looking to apply for my current position at Blizzard, their job listing mentioned experience with JavaScript MVC frameworks such as Angular, Ember, etc. as a nice-to-have, and I hadn’t used any of those before, so before applying I decided to improve my chances and quickly made this.

Pixel Art Scrapbook is a prototype of a web application for cataloguing pixel art that inspires you, for reference when you make your own. It uses Ember for MVC, Node & Express for a simple RESTful API and MongoDB for the database. The demo here is just of the interface and the back-end functionality has been disabled. You can make changes but nothing is stored. The full version is available on GitHub but you’ll need to run a local Node server to use it.

Vidcaster was a platform for building custom video websites, sort of like YouTube channels but much more personalized, with full control over site layout and with business-oriented features like pay-per-view. Some of our more famous clients included Airbnb and VMware.

Probably the coolest part of our platform was the Theme Editor, which was where you could choose from one of Vidcaster’s themes, customize colors and images, and make changes to any of the templates. All of these changes were immediately reflected in a full-size preview of the site.

The message we wanted to convey with this homepage redesign was not so much “look how great our product is,” but “look how great your video site could be.” So I chose to highlight some of our more impressive customer sites to build excitement and then demonstrate that visitors can build a similar website in minutes, for free, right away. There was a pretty strong uptick in new signups once this went live.

Being a video service provider, Vidcaster needed a world-class video player. To that end we worked with the Brightcove team, started with their excellent open source VideoJS video player as a base, and then extended it with the following new features:

• Analytics integrations with Google Analytics and Mixpanel
• Interactivity integrations with HapYak
• Advertising integrations with LiveRail and Brainient
• Social media sharing from within the player
• Interactive transcripts

I also designed and built two custom themes, “Vidcaster Default” and “One Button,” and I made multiple contributions to the VideoJS core.

As a platform for building video sites, Vidcaster needed a large library of quality site themes that served a variety of different needs. I designed and built several of these myself while also being a resource for our network of theme design contractors.

Launch was one of the flashier Vidcaster themes and it was made with the introduction of a new product in mind. It greatly emphasizes one video in particular (perfect for an introduction or product launch) and all other videos are playable on a single page.

Obsidian was another public theme I made for Vidcaster. The idea for this one was to make something with dark colors by default, since all of our themes to that point had light color schemes, so I went with a central idea of “volcanic rock” and went from there.

Carbon was the last theme I made, designed for businesses with large video libraries. We went beyond our usual sorted-by-recency list and added ways to browse by show and category. There was also a focus on the content itself, with large promotional images and minimal design ornamentation.