What does it take to build what you see on our site?
Recently we launched the Learning Library, a series of one minute introductions to topics like Growth Hacking, Meditation, and creating Minimum Viable Products. It's a repository of videos, links, and content related to each topic.
We set out to build the Learning Library with one goal in mind: make it extremely easy to publish and edit new topics and videos.
The Learning Library doesn't have any complicated interactions for users but as a developer it can be cumbersome to create a way to embed videos, craft the formatting, and just keep everything consistent. Therefore my goal was to build this in such a way that anyone on our team could sit down and publish a new Learning Library topic in five minutes or less.
To do that, we used a handful of things. Our website has an admin area very similar to Wordpress if you're familiar with that. Here we can create pages of content and easily update the text on our site without having to redeploy the app.
This comes in handy for our content editors that write the notes for our lessons. As I'm sure you know, technology changes fast. Sometimes we put out a lesson and a week later a new version of Rails comes out and the lesson needs to be updated. We can handle that easily by editing the page in our app.
When it came to the Learning Library, however, we needed to separate these pages from others on the site. We categorized them into Learning Library pages and added cover images to them.
One of the most important things about our Learning Library is our videos. Each video gets uploaded to Wistia and then embedded into the page. We add titles and descriptions to each video and then use the SEO tag to embed them so that Google can index them in their search results.
Adding videos in our page editor:
Rather than a traditional video embed like you might find on Youtube using an iframe, we use a thing called oEmbed.
oEmbed is basically an API you can use to request embed tags for any content. One example of this is Flickr's website where you can ask it for the embed details of an image and it will tell you the author, image size, and url of the image. The same goes for our Wistia videos. Using oEmbed we can always get the latest title, description, and embed code to put on the page. This means our content team can update the titles and descriptions on Wistia's website and onemonth.com automatically updates to include the same content. It's turns out to save us a lot of time and is really convenient.
When we want to embed a video, we simply paste in the ID and click a button in our page editor to replace it with the oEmbed tag:
And the end result with either embed code is a page with the video on it:
The important difference here is that just a little bit of extra work can go a long ways.
On one hand, we could easily rationalize this is a lot of extra work for little benefit and that could be true. (If we had only 5 videos then you'd be right.) The reality is we have 15 Learning Library videos currently, many more in the works, plus videos in blog posts, landing pages, and in all of our classes! Imagine updating the title on a video and searching the whole website to update each page it was embedded on. Yuck.
Building a feature like this takes a little extra work to do right but it can definitely be worth it. Saving yourself and your team a few minutes of work here and there pays out in the long run. Your team is happier, more productive, and has more time to worry about solving the bigger problems.
After all, that's why we write software isn't it?
Image by Annette Kölzow.