Whew. That was a long title. This article outlines my favorite pro-bono project, and how Hill Holliday turned it from a web dev mess into an absolute delight to work on. We cut development time in half, and had everything ready to go in less than one week's time.

Our goal was to create a first-of-its-class destination for City of Boston Residents, as well as a resource for people outside of the city to contribute as well.

History of One Boston Day

One Boston Day is the celebration of the resiliency of the City of Boston amongst the horrible Boston Marathon bombings of 2013. It was originally set up as an impromptu direct response to help the victims, but it quickly grew into something much, much larger. We initially worked with John Hancock to set up a fund for victims called The One Fund.

The next year, in 2014, we worked with the City of Boston to reclaim our city and re-establish these tragic events as our own; as a unifying measurement of strength and resiliency.

On a personal level, even though we had off of work for that Marathon Monday, I still went into the office. I was trying to be productive, and as such, I had no idea what was going on in the outside world. I received frantic texts from friends and family wondering where I was. Cell towers were so jammed, it took me a while to respond. This hit me to my core.

Short anecdotal story

My roommate at the time, and one of my all-time best friends, Ryan, bought me a few Red Sox tickets as a Christmas present. One of those games would be a game that was postponed due to the bombing. We were in the first game that was open to the public. I can still hear Neil Diamond singing 'Sweat Caroline' live during the 7th inning stretch.

Self-Evaluation

Over the years, I have put my all into this initiative. It started as a super scrappy project that led to building interactive dashboards for city officials to come in and review, outdoor billboards at the marathon finish line, and more.

It was originally a flat HTML experience hosted on a Rackspace server, then it moved over to AWS, then we graduated to a small JS framework, we tinkered with a CMS, but never really got anywhere.

Every year, a different team member was assigned to the project. While it was great to assign everyone to this type of gratifying work, it became really hard to disseminate information around what framework to use, where to host, what preprocessors to use, etc; You have to remember, this project is almost 7 years at old this point, and is only ever touched a week or two out of the year.

We realized that we couldn't manage content across multiple repos with pull requests as our sole source of truth. It's not user friendly to us, as an agency, or to the City of Boston as an entity.

The site has always been on the "JAMstack", but never really embraced it. This year, we aimed to change that.

Image from www.cygnismedia.com

Content Management

Hill Holliday has been a fan of Craft CMS since v1. We've built experiences for the Boston Police Foundation, Brigham and Women's Hospital, and multiple other brands and municipalities in our great commonwealth with it. It's super easy to use; we've fallen in love with it, and so have our clients.

We spun up a new CMS instance of Craft and shared it with our content moderation team. We modeled our instance after the newly announced Craft Cloud (meaning there is no view state, or 3rd party plugins, just the data and admin experience). The goal is to build once, migrate to Cloud once it is released, and shut off our old systems.

Craft has made it easy to build out different data models and integrate them into our Nuxt frontend. All of our data is exposed over a public GraphlQL schema:

We have over 20 editors in the system looking for and monitoring new content. Craft makes it super easy to provide our team members with logins. We don't even have to teach them how to make updates, because they can figure it out on their own.

Through this new headless CMS architecture, we've leveraged GraphQL, a new query language that lets us create super performant data queries that feed directly into our templates.

We are no longer bound by the database, and can instead query the data we need and get in on-demand on the frontend.

Ease of Updates

OneBostonDay has a bunch of reusable components, however, we weren't using them that way. We had multiple video players across Vimeo, YouTube, and a few others. We used this as an opportunity to consolidate our video players and create one reusable component:

The Video component is just a small example, but we worked with the City on coming up with a shared design system, or Atomic Design System, in order to build something that would work for this latest year, as well as any year moving forward.

We leveraged the static site generator, Nuxt.js, as our front-end framework. Nuxt has features like automatic code splitting, routing with async data, http2, and built-in bundling that made this transition really easy for us. All of our existing paradigms fit so neatly into this Vue-based system.

I was the lead on this, but I definitely had help from my team with a few things. Ema, a creative technologist on our team, was stellar on jumping in and making updates with zero previous knowledge with Nuxt or Vue. It was super easy for her to npm install and help start grinding on features.

(Much) Easier Hosting

I mentioned earlier that we were originally hosting on Rackspace, then AWS, and probably a few others that I'm forgetting. It was always a nightmare to manually deploy flat files, clear the cache, etc.

Hill Holliday has recently become a Netlify Agency Partner, and I couldn't be more excited about it. Netlify is a new hosting provider that hooks into your Git flow, manages your DNS, automatically deploys your code, and busts your cache to multiple cloud providers like AWS, Google Cloud, Digital Ocean, and more.

We leveraged Netlify's webhooks to deploy our site whenever a new piece of content is published. Craft listens for when entries are saved or deleted, and sends a new data schema to Netlify to deploy.

Netlify also creates a "preview" subdomain for each one of your Git branches. This made our QA department super happy; they were able to review bugs in isolation on our bugfix/xxx branch directly in Netlify at bugfix-xxx.onebostonday.org. We tied directly into Jira and Bitbucket, so now reviewing old legacy stories, features, or bugfixes is now all tied directly into our agile workflow.

Summary

I totally realize that this was probably overkill for a small project of this size. However, One Boston Day is really important to me. These all might seem like small operational things on the dev and operational side, but we've already seen some real improvements for the end user as well. The combo of Nuxt, Craft, and Netlify have had on site speed and responsiveness is just insane. Lazyloading, pre-fetching, async loading, etc, all have a huge effect on performance. Clicking around the site feels so fast and so snappy; there isn't even that 300ms delay we've all come to deal with with websites. There are no more loading bars or spinning circles!

I know this is just the future of our journey with the JAMstack. But I gotta tell ya, I am having so much fun with it so far.

Check out the final experience over at OneBostonDay.org.

If you're looking to get started on the JAMstack, need help with a project, or want to know more about OneBostonDay.org, I'd love to hear from ya. Feel free to hit me up on Twitter or over Email.