Christmas Card 2018 Autopsy

We recently announced our 2018 Christmas Card. Every year, my wife and I design and develop a digital Christmas card. These cards are opportunities to explore new technologies or techniques, and they usually turn into more trouble than they seem to be worth.

In this post, I’ll dissect the process and product of our Christmas Card. View the card at 2018ccard.now.sh. Check out the code on GitHub at awayken/2018-christmas-card.

Concept

We had decided early on to go with a quiz concept. We knew that we would be eagerly awaiting our third child, and the timing meant that we’d know the gender by the end of the year. Our Christmas card made a great perfect opportunity for such a reveal.

We decided to present two questions per family member, ordered from eldest to youngest. That way we could end with the baby due date and gender. We’d need multiple choice questions for each family member (Miles, Holli, Ian, Ainsley and Baby), and we’d need a correct answer. After answering the question, the user would be treated to a Reward (an image or video) regardless of whether they answered correctly or not.

We brainstormed questions at dinner one night. I wrote the copy, and both Holli and I found images to pair. For the final question, the gender reveal, we knew we’d use the video we’d taken when revealing to our other children. It was cute and short. In other words: Christmas card gold.

Design

Truth be told, this project had two major designs. Holli, being pregnant, was spending a lot of time being pregnant and didn’t really have the energy to dive into design right away. I took it upon myself to implement something I liked and started developing around that. Holli presented me with a new design in the final weeks of December. I was happy to include her, but this meant restyling the entire card.

The design was pretty straightforward in terms of implementation. Given more time, I think we would have used fewer images and more in-browser effects. This is something I’ll try to accomplish next year, to give the card a little more pizazz.

Development

A couple development decisions were made immediately. I wanted to develop the card using React, and I wanted to utilize component isolation. React, I knew from work and 2016’s Christmas card, makes it really simple to build user interfaces that react to changes in state. Component isolation makes it much easier to ensure separation of concerns. Knowing that, I had to decide which specific technologies to employ.

Create React App

I could write my own build, test and deploy scripts, but why bother when Create React App has my back? Create React App provides a command line tool for initializing a new project and a collection of helpful scripts for developing and building your app.

Create React App wraps their tools in best practices. The Webpack/Babel build chain allows writing ES6 code without worrying about browser support. Jest inclusion makes it possible to write unit tests and smoke tests for components. ESLint support encourages consistent code practices.

Create React App also provides a great build script that will handle bundling, minification, image processing, stylesheet processing and more. The folder it generates is all ready for deployment to production.

Storybook

My favorite tool for isolated component development is Storybook. Storybook allows developers to write “stories” for their components. These stories reflect some specific usage of your component. It’s sandboxed from the other stories so you don’t have to worry about side effects.

Let’s say you have a <Progress /> component (like I do). There are lots of ways to configure my Progress component. I wanted to render stories for when a user is on the first step, the final step and some arbitrary step in between. Using Storybook, I wrote three stories to trigger those states and visually checked them for accuracy as I developed and refactored.

Storybook offers plugins, too. At work, I take advantage of one plugin that adds Jest testing to snapshot the rendered HTML of my stories and another that takes actual screenshots so I can programmatically track visual regressions.

Now.sh

Normally, I’d prefer to offer server-based React rendering, but Create React App doesn’t support that. However, my limited audience allowed me to reduce my requirements and opened up my hosting opportunities.

I’ve used Now.sh for projects before. It’s one of the wonderful products produced by Zeit. The latest version, 2.0, comes with a host of nice goodies that I was eager to use. Setting up static hosting was a breeze, and I was able to integrate it into my GitHub workflow so that I could test changes on a staging server before sending them to Holli for review. Their infrastructure will even scale up or down to match my users’ demand.

Conclusion

What would I do differently? I’d offer a server-rendered experience. Now.sh is flexible enough to accommodate that. I’d also like to make testing and Storybooking more integral to the project. If a story changes, I should know about it and have to approve it. If a test fails, the project should not deploy. It shouldn’t even push to GitHub.

Finally, I’d like to expand on this year’s card instead of starting over in 2019. I think the quiz concept is a creative and interactive way of sharing our year with people we care about, and by building on that foundation I could make even more progress.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.