What's New in Popcorn Maker 0.2: "Ghostbusters"

Popcorn Maker will empower everyone to make interactive video for the web. Read about the vision and our roadmapping efforts. If you want to help out, have a look at the open tickets in Lighthouse.

Happy 0.2 Birthday, Dave

Last week, the Popcorn team wrapped the 0.2 milestone toward Popcorn Maker, cheekily codenamed Ghostbusters. (This made for a great release party, with a special screening of the movie and a Stay Puft-themed cake).

This release encompassed 104 tickets, which is pretty intense. Major props to Bob Richter, Jon Buckley, Scott Downe, Chris, Dave, and the rest of the CDOT crew. And this is just getting started.

Because this is a release focused on rewriting Popcorn Maker’s foundations, we’ve skipped deployment for 0.2. But you can play around with the new UI in a sandbox here. And you can also check out the changelog.

As expected, Bob Richter has done a much more intelligent and comprehensive explanation of the changes. But read on for a summarized version.

What’s new?

A lot has changed. I’ll call out 4 things in particular:

1. Stronger software foundations

Butter is the software development kit for Popcorn Maker and other Popcorn-powered web apps. In the past, Butter was tucked into the Popcorn Maker app, which loaded HTML templates in an iframe and communicated with them in a somewhat unreliable way.

We want the foundations of Popcorn Maker to be strong. So we’ve re-factored Butter to live inside user templates. This makes for much more elegant code and reliable interactions.

A cool side effect of this is that any page can be turned into a Popcorn Maker template by simply including butter.js.

2. New and improved UI

Popcorn Maker UI, version 0.1

Popcorn Maker UI, version 0.2

Because Popcorn Maker is a WYSIWYG tool, it’s important that users have as much screen real estate as possible to visualize their projects.

So we’ve shrunk the tray to the smallest practical size. It’s 25% thinner than before. And we’ve moved the playhead to the status bar, so you have access to the whole timeline even when the tray is minimized.

We’ve added a layer of polish all around—lots and lots of nice touches. Track events are now distinguished by color and have more pleasing regions for moving and stretching. Track events are now selectable, which will pave the way for multiple event selection, copy+paste, and undo operations. In all, this makes the app feel much more tangible, and approaching the level of polish you’d expect in a native app.

3. Droppable regions

Popcorn events are now drag-n-droppable.

Popcorn Maker now lets your drop a Popcorn event (say, a map) directly onto the page target.

This is a small change that will make the app many times more usable. We’ll be introducing an even nicer “Add Popcorn” flow in the next release. And we’ll be exploring other drag-and-drop concepts over the year (like dropping a video into the page to upload).

4. Accounts and saving

Thanks to Cornfield—the Popcorn server—this is the first Popcorn Maker release with server-side project storage. We have initial support for creating accounts with BrowserID and saving project data to the cloud.

Cornfield needs to be made more secure, so we have no public demo just yet. But if you’re inclined, you can clone Butter and Cornfield and test this locally.

Next up: 0.3, “Breakfast Club.”

This month, we’ll be rolling up all this work into a version of the app that will stand on its own. The 0.3 release, codenamed Breakfast Club, should be approachable by users and enable top-to-bottom project creation, saving, and publishing.

This release will introduce a temporary template loader that will tide us over between now and June, when we stand up a proper Django backend.

It will be a big challenge to coordinate all these things—Butter, Cornfield, the template loader, templates and documentation. But Popcorn Maker is getting more real—and more powerful—every day. Exciting stuff.