Welcome to PostCode, the new engineering blog at The Washington Post. We’ve given our blog system a bit of refresh to take advantage of new systems in Arc Publishing, our publishing platform.

Why we changed

Our previous wardrobe for this blog served us well, but increasingly became a divergent part of The Post’s online presence.

Since the engineering blog was launched in 2015, The Washington Post has formalized a design system to standardize our use of color, typography and spacing across our web properties. We’ve also introduced a set of core components to allow us to reuse designs and data structures across different projects and teams.

We concluded that our developer blog should use the same tooling and resources that other projects at the Post use.

How we did it

Arc Publishing has been rebuilding the publishing suite’s rendering engine over the last few months. PageBuilder Fusion is based on React, the Facebook-backed Javascript library for rendering user interfaces.

Part of the decision to rebuild PageBuilder in React is to allow projects to scale up and down quickly, and to permit even faster iteration of new components and layouts for Arc sites.

Unlike other services we tested, developing in PageBuilder Fusion allowed us to design the blog in line with The Post’s design system — an option not available on external hosting services such as WordPress or Medium, as we wouldn’t be able to (easily) access our font files or predefined SASS repositories.

The PageBuilder-based blog would also receive new features and updates as Arc Publishing releases them, a possibility ruled out in implementations involving static site generators like Gatsby.js.

A redesign

When we embarked upon our redesign project, The Washington Post product team had already spent several months creating Post-specific PageBuilder Fusion components in preparation for a Fusion relaunch.

We cloned The Post’s Fusion repository as the base for our development, and then made relatively minor changes as necessary.

For example, we wrote a new component that could display a feed of posts in reverse chronological order, which formed the body of our home page and tag search pages. My colleague Isabelle Lavandero adapted an Arc core component for our developer blog-specific content environment, and wrote a script to use Arc’s experimental Summarizer API to write excerpts for historical posts that didn’t have one.

A note from us

Neither Isabelle nor I had any experience with React or PageBuilder Fusion before starting this project. Despite this, we were able to pick up the necessary knowledge to work in a React environment. By building upon existing shared libraries and drawing upon the expertise of The Post’s and Arc’s support and engineering teams, we were able to move the entire Developer Blog from PageBuilder Classic to Fusion in less than three weeks.