In April we participated in our first Hack Day. It was a chance for new software engineering fellows to get to know each other and make something fun in a no-pressure environment. We settled on the idea of an old-school homepage that paid tribute to the paper’s first print edition, published on 5 May, 1821. We made 1821 mode – an Easter egg webpage rendering today’s stories in the style of the (then) Manchester Guardian’s first edition.
The first iteration was a React app that pulled through stories from the Guardian Content API (CAPI). By feeding content into one long column using the column-count CSS property, we could imitate the layout of a 19th-century newspaper.
The hack in real life
After hack day was over it was a surprise to be asked to implement 1821 mode on the website in celebration of the anniversary. It was possible, provided some of the features in the original hack were scaled back.
Instead of pulling through the latest articles, it would be a custom, unchanging selection that would be linked from the homepage for one week. Furthermore, articles would not have standalone pages – ‘continue reading’ links would take visitors back to the real 2021 mode site. With engineering manager Jon Soul’s guidance, we built the page. The Guardian’s executive editor, reader revenues, Mark Rice-Oxley provided the articles on the day and group product manager, Abi Bendall, helped pull it all together.
Keeping our Content API happy
A big part of making it work was how it interacted with our Content API. In the original hack whenever someone visited the page it would request articles from our Content API and populate the page. That’s fine for a demo with one user, but what happens when a page gets thousands of views, each one sparking eight Content API calls? Some back of an envelope calculations showed hundreds of thousands, even millions of requests weren’t beyond the realm of possibility.
We wrote a script that requested the chosen articles and stored them in a static file. The app would then make ‘requests’ to that file. That way if the 1821 Mode page had eight stories, only eight Content API requests would be needed for the initial build. Beyond that it wouldn’t be needed at all.
Styling and ads
Creating the 1821 mode for real also gave us time to improve its styling and responsiveness. We added media queries so the number of columns would change depending on device size. For desktop it was six, for mobile, two. Font sizes got similar treatment.
The fonts themselves came from Google Fonts and mostly carried over untouched from the Hack Day design.
-
Story headings: Eczar
-
Story copy: Newsreader
-
Small caps: IM Fell English SC
The font used in the original hack masthead was UnifrakturCook, which was fit for purpose, but for the second version we were provided with a beautiful crisp SVG of the original Manchester Guardian splash as seen on the first edition.
We also updated the pricing. The first edition cost sevenpence. In this version, we created links to the Guardian’s subscription and contributions pages.
All ads in 1821 mode used free-use images found on Wikimedia Commons.
After manipulation in the open-source GIMP photo editor, we reduced these to PNG files, with the lines solid black and everything else transparent. That way they could replicate the ink on paper look we needed.
Collaboration with editorial
Of course, all of the above would have been moot without the most important part of any newspaper: its editorial stories. During our kick-off meeting, it was agreed Mark would curate a selection of journalism appropriate for 1821 mode, complete with 19th century headlines, which we could input using a find and replace function in the app.
Mark also knew exactly how many issues of the Manchester Guardian were published, and what edition the 5 May 2021 would be: 54, 337 to be precise. With all these elements in place, we were ready to assemble the page on the morning of the 200th anniversary … or so we thought.
Ship it
Putting the page together on the day was relatively straightforward. We never could get the ads to sit just right due to the flexible super column approach. Sometimes the page sat beautifully; other times it didn’t. Still, the ‘full’ page wouldn’t look too out of place in the 1800s:
When the time came to publish, it was time to decide where. The original hack had been partially deployed on Surge, which we struggled to map the official URL to. We had similar issues with Netflify before eventually settling on an Amazon S3 bucket.
And that was it! We featured as a treat on the network front and the author Margaret Atwood even liked it!
We’d like to thank everyone in product and engineering and editorial who worked with us to bring this project to life. It was an amazing experience and introduction to Guardian culture.