It was a dream come true to build the official Diablo IV website. I was not just an engineer but an architect as well, creating the system design for the site. Starting a new, greenfield project takes a lot of consideration, so I conducted initial research, diagrammed how all the various technical pieces (services, libraries, etc.) would fit together, defined some of our working processes, and circulated all of that internally for iteration and feedback before production began.
Our designers wanted the experience to be as immersive as possible, so the site expands to cover the entire viewport with each section, makes heavy use of video, and even has an audio player with ambient audio that plays while you browse the site. While the image and video assets are pretty heavy, going with a screen-by-screen structure rather than a long scroll made it easy to only load what was needed. I kept a close eye on overall file size and optimized images during our build process, and we were happy with the resulting Lighthouse scores. The site’s design earned Blizzard an Awwwards Honorable Mention.
The site’s front end is built entirely with React and the Next.js framework, which we chose to easily enable server-side rendering. Our styles are primarily done in the Atomic CSS style with Tailwind, which I think is impeccably designed, and its creator noticed and had some very kind words for us.
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.
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.
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:
I also designed and built two custom themes, “Vidcaster Default” and “One Button,” and I made multiple contributions to the VideoJS core.
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.