JavaScript – bruzed

Go Go Bots

bruzed — Fri, 29 May 2020 21:31:10 +0000

Role: Lead Developer
Client: Meta
Team: ustwo
Technology: CocosCreator, TypeScript, JavaScript, Facebook Instant Games, Azure PlayFab, Azure Functions, Azure Logic Apps, Node.js, Gulp, Facebook Analytics

Overview

Go Go Bots is a competitive, fast-paced, robot climbing Facebook Instant Game set in a glitchy, cyberpunk future.

Goal

Build a flagship game to showcase the capabilities of the Facebook Instant Game platform.

Challenges

Enable friendly competition and instant playability
Engage users via a high-quality, casual, gaming experience
Inspire developers by showcasing the unique possibilities of the Instant Games platform

Role and Team

My responsibilities included leading the architecture of the game front-end as well as the backend.

For the front-end, I laid the foundation for and contributed to the core game systems including custom (Redux-based) state management, finite state machines for animation, a custom level editor plugin and the core game mechanic. I was also responsible for developing numerous prototypes to validate assumptions and game play mechanics through the beginning phases of the project.

For the backend, I used Azure (Functions, Logic Apps, PlayFab) and Facebook Instant Games. I was also responsible for implementing Facebook Analytics for tracking all important KPIs at a fairly granular level using.

The team consisted of 3 developers, 2 designers, 2 technical artists, 2 project managers and 2 QA engineers collaborating closely with client stakeholders.

Final Product

Players can choose to play the current season – each season consists of unique levels – or invite up to 3 friends to tournament.

Players can select one of five robots, each with a unique set of abilities and attributes.

Players race against the clock to get the best time and rank.

Each player can play their turn asynchronously until the game expires.

Players can use their characters ability after collecting a certain number of points.

Players draw connections between nodes that have unique attributes, to navigate through a hazard-strewn obstacle course and collect points.

Players can choose from 3 tiers with varying levels of difficulty as well as two modes of gameplay – multiplayer tournament and solo.

Results and Learnings

Utilizing Azure PlayFab, PlayFab, Azure Functions and Logic Apps – instead of a custom Node.js application – resulted in a high performing backend and optimizing development time/effort/cost. This solution helped easily scale to over 600k monthly active users without any failures on the backend.
I learnt how to build and implement a custom frustum culling system which increased the performance of the game to consistently be 30-60 fps on older mobile devices. Other optimizations included, reducing the load times to 5-10 seconds by consolidating API requests and lazy loading numerous game assets.
I streamlined the level design process and enabled designers to quickly create, test and iterate game levels by building a custom level editor CocosCreator plugin.
I successfully enabled the entire cross-functional project team to effectively collaborate on GitHub.
The game garnered coverage from The Verge, engadget, Creative Review and VentureBeat

SSENSE

bruzed — Mon, 08 May 2017 20:53:36 +0000

Role: Full-stack Developer
Client: SSENSE
Team: ustwo
Technology: Vue.js, JavaScript, SCSS, Webpack, WordPress, WordPress REST API, Node.js, Express.js, Docker, Travis CI

Overview

SSENSE is a multi-brand, luxury fashion retailer with a unique editorial section, originally founded as an e-commerce platform.

Goal

Create a scalable and flexible system for content authors to easily create and manage articles, each with a unique layout.

Challenges

Systematize a plethora of layout variations into configurable UI components and an easy to use backend
Systematize a variety of typographic variations that utilize a custom font

Role and Team

My responsibilities included significant contributions to the frontend design system which consisted of a variety of sophisticated, reusable, Vue.js UI components. I also contributed to the WordPress backend to create custom fields for content authors to easily create and configure thousands of layout variations.

The ustwo team consisted of 3 developers, 1 QA engineer, 1 designer and 1 project manager collaborating closely with SSENSE’s product team.

Final Design

UI components in various configurations on the home page

UI components in various configurations in an article page

Results and Learnings

The WordPress backend was well received by the editorial team and enabled them to amplify their productivity.
I quickly adopted new technologies and made contributions to optimizations for website performance via server-side rendering via a Node.js/Express.js backend-for-frontend. And automation via a build, test and deployment system via Webpack, Docker, Travis CI, GitHub and bash scripts.
I also made optimizations to speed up development by streamlining the usage of an overwhelming amount of properties shared by highly customizable UI components. I did this by creating a flexible way to distribute reusable functionality across components via Vue.js mixins and abstracting the properties into reusable and composable objects and mixins.
I was successful in partnering with designers to define component configurations, reusable typographic styles and systematizing designs into reusable components.
I also created a VuePlay UI component library to showcase the various configurations of components so that they can be easily adopted and reused in the future.

Reduce, Reuse, Recycle, and Rethink

bruzed — Wed, 01 Jul 2015 23:40:20 +0000

Role: Senior Developer
Client: Solid Waste Authority of Palm Beach County
Team: Potion Design
Technology: Cinder, C++, OpenGL, GLSL, JavaScript, Node.js, Express.js, HTML, Jade, CSS, SCSS, Python, WebSockets, WordPress, PHP, MySQL, Multi-Touch

Reduce, Reuse, Recycle, and Rethink is a 20+ person multitouch interactive located at the education center in the Solid Waste Authority, West Palm Beach, Florida.

The interactive consists of a 20 foot multitouch table and a large video display system.

On the touch table, tour groups can explore an interactive map to learn more about the renewable energy facility and the area surrounding it. Users are also invited to participate in 3 interactive, educational games and learn more about recycling, waste and how to be more environmentally conscious. The experience is led by an instructor and controlled via a browser-based iPad application.

My responsibilities included developing a variety of features in the interactive map, 2 educational quiz games and an iPad controller application. The Potion Design team consisted of 1 designer, 3 developers and a producer.

A shopping quiz game in which an instructor can post different questions to the group members in a gameshow format, via the iPad controller app.

Users can interact with a large map of the facility and surrounding area. The map contains live streaming videos from parts of the facility, semi-live tracked trash trucks and information about the various processes.

Users can place their hands on the touch table to ‘log in’ to play the Recycle Right sorting game.

Users play as a team in an attempt to hand-sort as many incorrectly recycled items as possible, before they reach the trash.

Shake Shack

bruzed — Sat, 17 Nov 2012 20:58:35 +0000

Role: Technologist
Client: Shake Shack
Team: Big Spaceship
Technology: JavaScript, HTML, CSS, SCSS, jQuery, Bootstrap, PHP, WordPress, WordPress Plugin API, Python, MySQL, Facebook API, Foursquare API, Instagram API, Twitter API

Shake Shack is addictive burger shop that grew from a small hot dog cart in Madison Square Park to become a New York Institution.

The website is powered by WordPress, a custom responsive, modern, theme and numerous custom plugins that employ popular social API’s to showcase Shake Shack’s large community and immense social following.

Visit the site.

On a mobile device, users can view a map that uses geolocation to display the nearest Shake Shack location.

On a mobile device, users can choose from a list of Shacks sorted from nearest to farthest, based on their location.

Hewlett-Packard

bruzed — Thu, 11 Oct 2012 17:17:23 +0000

Role: Technologist
Client: Hewlett-Packard
Team: Big Spaceship
Technology: HTML, CSS, JavaScript, jQuery, LESS, PHP, Bootstrap

During my time at Big Spaceship, I collaborated with a team of designers, developers and producers to develop the front-end for Hewlett-Packard’s internal communications platform called OneHP. The design system consisted of a number of reusable components and was built with Bootstrap and PHP.

Chobani

bruzed — Sun, 11 Nov 2012 18:44:43 +0000

Role: Technologist
Client: Chobani
Team: Big Spaceship
Technology: HTML, CSS, LESS, JavaScript, jQuery, PHP, MySQL, WordPress

During my time at Big Spaceship, I collaborated with a team of designers, developers and producers to fully redesign Chobani’s consumer website using WordPress. I was involved in developing a variety of front-end and backend components as well as migrating content from legacy platforms.

Potion Design Website

bruzed — Sat, 10 Sep 2016 17:47:26 +0000

Role: Senior Developer
Client: Potion Design
Team: Potion Design
Technology: JavaScript, HTML, CSS, PHP, WordPress, jQuery, AWS, Bedrock, Sage, Trellis, Roots

I developed Potion’s responsive website with Trellis, Bedrock and Sage. As the sole developer, I collaborated with a designer to build a custom WordPress theme. I was also responsible for setting up the WordPress backend and AWS infrastructure. The design system consists of numerous front-end components with a configurable backend counterpart.

World Economic Forum

bruzed — Thu, 10 Jan 2013 21:43:43 +0000

Role: Developer
Client: World Economic Forum
Team: Potion Design
Technology: HTML, CSS, JavaScript, SCSS, CreateJS, EaselJS, PreloadJS, TweenJS

I developed the majority of features for an interactive HTML5 experience/microsite, that visualized the network of Global Agenda Councils. The front-end is built with the CreateJS suite of modular libraries. The Potion Design team consisted of 1 designer, 2 developers and a producer.

Corpsify

bruzed — Thu, 11 Oct 2012 18:30:45 +0000

A reimagined version of a Flash drawing game in HTML5.

During my time at Big Spaceship, I rewrote a Flash/ActionScript drawing game in HTML5 and JavaScript (using Backbone.js and Raphel.js) so that it could be played on tablets.

What Do You Love?

bruzed — Thu, 30 Jun 2011 01:05:51 +0000

Role: Technologist
Client: Google Creative Lab
Team: Big Spaceship
Technology: HTML, CSS, JavaScript, Python, Google Closure, Google App Engine

“What Do You Love?” invites users to search and view their results across a spectrum of Google’s products, interact with their wide range of services, and discover Google’s more specialized products.