Use All Five Squiggle Graphic

How We Reimagined Tumblr Development Tools

We created a custom Tumblr theme for the MOCA Step and Repeat site. Here we share some tools we built to overcome obstacles to creating complex custom Tumblr themes.

The Museum of Contemporary Art (MOCA) in Los Angeles recently asked us to build a site for their new live arts program Step and Repeat. They wanted a site that was as exciting and dynamic as the program itself. Inspired by the virality of Tumblr content and the ease of content management tools, we agreed to create a custom Tumblr theme for the site.

Finding Inspiration

To get started, we took a look at Tumblrs that had pushed the limits so far. We found some very unique Tumblrs, notably: adidas originals, R+Co, and Warp25. They’re all JavaScript heavy, utilize custom layouts to communicate brand goals, and have scrolling as a major component of the user experience. The approach of these AJAX and JavaScript heavy Tumblr themes allowed an experience not normally available to the typical Tumblr blog.

Fitting the Brand

StepandREPEAT_LOGO
The overall art direction for the Step and Repeat program focused on use of diagonal elements, repetition, and varying scale. Our site design embodied that direction with a diagonal page layout and movement.

For the site movement, we focused on animating page elements based on the user’s scroll.  We’ve had a lot of experience using transitions based on scroll at Use All Five on projects like Google’s Art Copy Code, but this was our first time translating this type of scroll movement to Tumblr. We utilized some of the latest CSS3 features and an open source JavaScript library called ScrollMagic to bring our diagonal scrolling experience to life.

Overcoming Challenges
One of the biggest challenges we came across for this project was iterating quickly as we developed on the Tumblr platform. Developing software locally is usually ideal for quick previews of changes. However, Tumblr doesn’t currently provide tooling for local development. As a solution, we rendered out the template theme page on Tumblr and hosted it in a development server locally so we could develop against it.

In order to have full control of the experience, we knew we wanted to render HTML templates client side. We had two choices to do that: try to parse the post data from the page Tumblr rendered or load the posts via the Tumblr API. We found building on top of the API to be a much better solution than parsing the rendered page.

Sharing Our Tools
Check out our GitHub repository at [base-tumblr] to see some of the tools we developed to build Step and Repeat.  The repository includes a base template, local dev server setup, sass/js linting and more to get you started with JavaScript heavy Tumblr theme development.

Potential Tumblr Improvements
Although we found Tumblr straightforward and surprisingly capable of JavaScript heavy blog themes, during our development we came across a few areas that they could improve.

1. Support API endpoints from blogs to like/unlike posts
The Tumblr API has endpoints for like/unlike, but they’ve set cross-origin policies that don’t allow these points to come from Tumblr blogs subdomains (yourblogname.tumblr.com) in browsers like Chrome that follow the cross origin policies. As mentioned in many discussions across the web, solutions to this problem are fairly hacky.

2. Improve the client side JavaScript SDK
The Tumblr JavaScript SDK is designed for use on the server side or in the browser via browserify. We’d like to see a client side JavaScript SDK that plays nicely with dependency injection tools like require.js, is more actively maintained, and focuses more on the front end.

3.Provide API endpoints for template code
The options to deploy new custom Tumblr themes are limited.  To update a Tumblr theme, you must copy and paste the template code into the Tumblr editor in browser and upload files individually. This process is slow to work with and even more troubling when a team is working together to build a complex Tumblr theme.  Ideally, Tumblr would provide endpoints to upload template HTML/JS/CSS via API, which would allow for automated deployment and a smoother workflow.


Michelle Priest is the Director of Production of Use All Five.
Follow Michelle on Twitter

Get new perspectives and the latest information delivered to your inbox: