
## Overview

The [Connectivity team at Facebook](https://connectivity.fb.com/) needed an interactive application to showcase
their suite of products, video content, and testimonials at the [Telecom Infra Project Summit](https://telecominfraproject.com/events/tip-summit-2019/). They needed a highly
engaging experience which would capture attention and retain it while users navigated and watched video content.

## Execution

Once I saw the initial designs proposed by my team, I knew immediately which technologies
I wanted to use to build this experience. ThreeJS was an obvious choice for the 3D globe, which would serve as the central attractor for attendants and anchor the experience by giving it depth and a sense of exploration.

This conference was taking place acros the world from our team so we had to pick technology that enhanced predictability and reduced edge-cases and failure points. To enable this, I chose TypeScript (as is usual, nowadays) to reduce the chance javascript bugs sneak in and [XState](https://xstate.js.org/docs/) to leverage state machines for a predictable and well structured linear navigation experience between screens.

XState in particular was extremely useful in preventing unexpected navigation experiences. You never know what a user will do with your app at a conference. XState allowed me to make easy work of features such as a timeout counter that would return the experience to its default state after a period of inactivity. By it's nature, state machines protect against users rapidly tapping a screen in strange places, because it's deterministic and will only transition to defined states in the machine.

The whole experience was to be driven by a large touchscreen display and a simple Lenovo laptop. Because of this, I spent a lot of time with my designers tweaking the rendering of the globe model to ensure we were hitting and mainining 60 frames per second throughout the experience. The app was packaged up in to an Electron app which would load content and video locally, meaning it would work perfectly offline.

## Outcome

Our team received a lot of praise during and after the project once the event concluded. The on-site Facebook team received a lot of positive feedback and the team liked it so much they let us know that they plan to create a permanent installation of the experience in their offices in the Facebook campus. Awesome!


Facebook Connectivity Conference App


## Overview

The Facebook Transparency team needed a completely rebuilt website which would allow them to "properly communicate their efforts in enforcing policies, responding to data requests and protecting intellectual property, while monitoring dynamics that limit access to Facebook products".

The website represents data from multiple distinct internal teams at Facbook and would become a reference for many national and international media outlets during a time in which Facebook was under insense political pressure.

## Execution

My specific contributions to this project included:

- Wrote the web controllers and established the Facebook CMS strucutre with Hack and XHP
- Set up the data model in Facebook's entity framework
- Helped build UI components in React and Flux
- Trained PRPL engineers on Facebook's web stack

This was one of the most challenging projects I've worked on in my career, and it wasn't because of the techology being used or the features that needed to be built. This project occurred while Facebook was under intense pressure from the US government and international media following the "Russian Ads" scandal. There were times where Facebook team members were absent because they were testifying at Congress in DC. This created a very high-pressure atmosphere amongst the project team so working efficiently with clarity was a constant struggle.

Given that there were a slew of stakeholders, I spent a lot of time planning and constructing a data model in their entity framework that would fit all use cases and allow them to publish JSON data in these reports on a quarterly basis. There was a lot of careful attention paid to field names and labels as all data needed to be unambiguous and accurate so as not to give misleading impressions to users.

With the amount of back-and-forth that was occuring on Facebook's end, I quickly identified that our timeline was not going to work without adding additional resources, both on PRPL's side and Facbook's side. This meant that while I was working on building features I had to also train fellow engineers on Facebook's web stack, something they had minimal experience with at that time. Thankfully this paid off because these particular engineers brought some much needed energy to the project. Facebook also added an engineer on their end who validated my technical plans and timliene concerns which gave the Facebook team more confidence in our direction.

From that point on, everything came together! Everyone rallied emotionally, features popped into place, and pages were audited and approved by the various internal teams at Facebook. The execution of the features seemed like a minor affair after all the trials and tribulations during design and planning.

## Outcome

Though this was an extremely challenging project with lots of bumps in the road, I value the experience greatly. It taught me a lot about working around my limitations and knowing when to seek help. I learned that building confidence with the client is paramount in this type of high-pressure environment.

The website was launched, tequila was poured, and press releases were issued. [Mark Zuckerberg posted about it](https://www.facebook.com/zuck/posts/10104954056777301) and international media outlets fast-followed with their own thoughts and articles. Google "Facebook Transparency Report" to see for yourself!

I'm happy to have been part of a project that increased the transparency of the largest social media entity on the planet.


Facebook Transparency


## Overview

Oculus Medium is a VR sculpting application for the Oculus Rift VR system. I worked with their team of graphics programmers, server engineers, quality assurance specialists, and producers to modernize thier web presence.

## Execution

Oculus Medium's website lives on Facebook's web infrastrucutre, so this means there is generally more effort required than normal to get things into production. Safety and scalability are always big concerns, so it's worth the extra time. The FB stack mandates the use of Hack, which is a statically type-checked superset of PHP. There was also, naturally, a lot of React involved with their UI work.

This was a longer term engagement as I was serving as an embedded member of their engineering team over the course of close to two years. Along the way, I noticed that at the time, their site didn't have any way to display user-generated sculptures besides using rendered images. Being a progressively-minded person, I thought it would create a lot of value for their user to have sulptures shown in 3D. They were already generating .obj files so it wasn't a big leap to get those exposed to the web. After talking it over with some of the fantisitc members of the Medium team, I wrote the spec and it was taken to the powers that be. It got approved and I built a 3D model viewer using ThreeJS for their users to enjoy!

As it turns out, while we were building the model viewer for Medium, Facebook engineers were working on 3D posts the Facebook timeline we caught wind of each other's efforts and the server engineers got to work on doing the necessary plumbing for Oculus Medium users to share 3D posts directly to their Facebook timelines. Pretty cool stuff!

## Outcome

I greatly enjoyed my time working with the Oculus Medium team, and I think the feeling was mutual as they added me to the credits in one of their major releases! This was really great experience working with a team that was on the bleeding-edge of VR technology trying to pave the way for a whole new type of experience. Eventually the Oculus Medium product was acquired by Adobe and much of the internally-facing infrastrucute I assume is being transitioned. Kind of a bummer, but that's tech sometimes! I'm excited to see what it turns into under Adobe's ownership.


Oculus Medium Website


## Overview

I felt it was important to write about my experience as the Development Manager at [Purple Rock Scissors](https://prpl.rs) (PRPL) as it explains how a majority of my work weeks were spent over the past two years.

PRPL is a fast-paced digital strategic agency based in Orlando, FL. They focus on building web and creative experiences that are informed by research and thoughtful planning. They retain clients such as Facebook, LEGO, NASA, Siemens, and many more.

## Execution

Becoming Dev Manager at PRPL was my first real foray into a leadership role. I worked my way up from a mid-level engineer, to senior, and then to manager. I oversaw a team of ten engineers on projects that typically were Wordpress, Drupal, or Node & React applications.

While I was a devloper I had the opportunity to work on-site at Facebook's HQ in Menlo Park for a couple of two-week stints. While there I was embedded on the Oculus Market Engineering team learning the whole Facebook web stack. This experience opened the door to many different types of projects on the FB stack over the following years.

When I became a manager, my biggest priority was to ensure that the FB stack knowledge was spread throughout the company as much as was reasonable. During my time at PRPL I personally trained three engineers on this stack and ensured we'd be able to properly serve one of our biggest clients.

Most of my management responsibilities included:

- Enable the success of the engineering team through mentorship, training, and servant leadership tactics
- Provide technical planning for projects and assist project teams when needed
- Provide engineering effort estimates for new client contracts and change orders
- Write technical content for RFP responses and assist the sales team with technical disussions
- Facilitate the weekly engineering meeting
- Run fortnightly one on ones with all engineers
- Provide roadmap guidance to DevOps engineers
- Conduct hiring and termination discussions when applicable
- Do department level planning and performance reviews to distribute raises

## Outcome

I think my time as Dev Manager at PRPL was well spent and I think I was well liked and respected by the fantastic team there. I had a hand in nearly every single engineering project at PRPL from mid 2018 onward, and there are [some really great outcomes](https://purplerockscissors.com/work) along the way I can be proud of. I continue to work with PRPL on a contract basis to assist them with technical planning and development for particular key initiatives while I look for my next adventure!


Work

Facebook Connectivity Conference App

Facebook Transparency

Oculus Medium Website

Dev Management @ PRPL

Legacy Projects

Looking for help?