How Filestack helps ButterCMS make content management a breeze

The Beginning

Back when Butter was just a twinkle in our eye, our focus was to design an amazing experience for both developers and marketers looking to get serious about blogging and content marketing. As we started building out an alpha version of Butter's blog post editor, we focused on simplicity and making a great UI focused on writing and your content. This remains true today with our minimalistic layout as you're crafting your blog post. In fact, the editor was so minimal that it didn't even have the ability to embed anything, including images! Early alpha users would quickly point this out (it's a fairly obvious CMS feature) and we'd say "this is an MVP"

Of course we could only use that excuse for so long. Part of the reason why we hadn't included it in the MVP is pretty simple, building a custom upload dialog from the ground up seemed like a non-trivial thing to do well. We quickly got feedback by launching our alpha uncomfortably-too-early and eventually reached a point where adding a seamless embed experience was the right next step.

Enter Filestack (aka Filepicker)

It didn't take long for us to come across an upload service, formerly known as Filepicker, now called Filestack. Filestack is the files API for the web. It sounded promising so we did what any developers do, skip most of the marketing content and dove right into the docs.

The first intriguing aspect was the Javascript API which has a pickAndStore method. The docs are set up well with executable code you can run on the spot to get a feel for the UX.

Clicking on "Run" launches the file upload dialog. One click and we were sold. We knew this would allow us to both add rich file upload and embedding functionality in a really seamless way and do it quickly. Thus our in-post media controls were born:

Clicking on the image icon launches the Filestack upload dialog (which is fully responsive by the way):

CDN === Speed

Another core design philosophy of Butter, in addition to an amazing experience for developers and marketers, is great performance right out of the box. This means many things including a super fast API, which serves up your textual content, and a global CDN to serve up your blog post images + media.

This is another benefit of Filestack, it comes with great support to have uploaded images instantly get sent to S3. We then place Amazon's CloudFront on the front lines of serving up your images and the result is well... speed.

File Convert API

Filestack enabled us to quickly add a rich image upload experience to Butter which was awesome and our customers agreed. We continued to get more feedback around how it could be even better. The response? "Resizable images!"

At first, this was a potentially daunting task. Sure, there's a ton of image manipulation libraries out there but how do we handle creating thumbnails in addition to the original images? What if we don't create enough or the "right" thumbnail sizes? What should the naming convention be? Etc. 

Enter the convert method and it's associated options. This nifty method resizes, crops, rotates, and more. Best of all is it does it on the fly.  Meaning to enable our image resizing feature we simply call something like this for the above Ricky Bobby photo: 

/api/file/cyfpVGTsQ76YFKLvFNBn/convert?width=236&quality=80

This takes the original image, adjusts the width to 236px and trims some of the file size by lowering the quality just slightly so it loads faster. (Did we mention we really care about speed?)

PDF Upload Made Easy

Most recently we launched uploading PDF's directly into your blog post. There were many ways we thought about launching this feature but the ultimate experience we envisioned was one where you simply upload the PDF and you instantly see a live preview of it, automatically linked to the full PDF file for printing, saving, etc.

Converting a PDF into an image seemed like a non-trivial thing to do but again the convert API handled the heavy lifting by generating and returning this preview image using basically the same pickAndStore call as we used for image embedding. With that part taken care of, we added some chrome and polish the editor to make the entire experience of embedding a PDF right into a post dead simple.

Focus on your differentiation

If there's one theme/lesson here, in addition to Filestack being a solid service, it's the benefits of letting someone else handle the non-core parts of your business and focusing on your differentiators. We've been able to move much faster by leveraging Filestack than if we had spent who knows how many hours building a custom file uploader. On the surface, file upload is not a complex problem. It's when you add in all of the extra functionality like resizing, cropping, compression, conversion, that it becomes a serious time-sink.

The same can be said for blogs. For us at Butter, we differentiate by creating an amazing end-to-end blogging CMS experience for both developers and marketers that's fast and SEO optimized. We spend every day working on making it better and faster. So before you decide to spend your precious engineering time building, skinning, and maintaining a basic custom blog for your company, consider spending it on your core product and let us worry about your blog CMS.