Popcorn.js has a new brother… Popcorn-Hacker

Anyone familiar with Popcorn.js, Popcorn-Maker, and bookmarklets checkout my demo.

A bookmarklet is JavaScript that runs via the address bar. So, you can fill a link element in a webpage to instead run code. Click the link, runs the code. You can also drag said link into your bookmarks for later, and continual use.

What I’ve done is created a bookmarklet that lets you view and edit any popcorn.js page real time.

There are a few caveats. 1. It cannot be done on any version of Popcorn before 0.4, because I need access to Popcorn.instances, but that doesn’t matter because it also needs p.media, which was introduced in 0.5. I also ended up using Popcorn.getScript, which is another dependency, but getScript is introduced before 0.5, so if we have instances and media, we’ll have getScript. 2. We need plugins with complete manifests. Manifests are like meta-data for plugins. It tells me what to expect, thus what I can enter into the form fields. Without a manifest, it is read only Popcorn. 3. Demos made from exec alone will not work. Exec isn’t really editable without writing JavaScript anyway.

Now that the academic parts of the post are out of the way, I shall ramble about my thoughts on the project. This thing, to me, is a good example of a hack. I took parts of code from one thing, and remixed them together to do something different. I had little regard for how it looked, just that it worked. So, I guess it is more of a proof of concept. I really want to take it to the next level, though. Give it an export of some sort, and more closely tie it in to Popcorn-Maker’s build tools. Other-wise, this is essentially a fork of Popcorn-Maker. Over time, it will be too different, and become a separate entity that needs to be maintained separately. In order to avoid this, we would have to do some changes to Popcorn-Maker. It has some flaws, things I had to hack around. One of the good things was Popcorn-Makers event system. Made it easy to tie in my new functionality without having to worry about what was happening in other parts. Something interesting I noticed doing this, Popcron-Maker is close to 40k lines of code. This includes HTML, CSS and remote scripts like JQuery. Still though, that’s a lot of lines.

A few good pages to try it on are: Popcorn homepage, The demo from this fantastic tutorial on Popcorn itself, and the initial semantic video demo from way back in 0.1 of popcorn. It’ll work on others, but there is code in the wild it will not work on, yet. I’m going to deploy the “fix it for one demo at a time” technique I learned doing work in Processing.js. It’s great to have user generated content to test off of!

Now for an abrupt end to this post.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: