Tag Archives: senecacollege

Popcorn Maker – Sync all the Medias

Rather than be quiet about the cool things I do I’m going to actually blog about this and explain it to give everyone a better idea of what MediaSync is.

So, what is it?

MediaSync is basically all about making it easy to pull in the media of the web into the tools of Webmaker and make it easy to add them to the things you are currently making. For now this is limited to Popcorn Maker and simply performing search queries against these services ( YouTube, SoundCloud, Flickr and Giphy ). In the future however this will include being able to use this in other area’s of Webmaker but also potentially from other sources and having the ability to really create your own set of media that persists with your Webmaker identity.

How do I use it?

Fear not! It’s actually fairly simple. For the already initiated to Popcorn Maker, you will first notice a new user interface for our Media editor. We have sectioned it off into tabs to make distinguishing what you are using more obvious and ( hopefully ) intuitive.

First, the My Media section. This area of the Media editor is almost identical to what was previously there with exception to some text changes. At this point, My Media is all clips/media you have added to the project currently. This will include anything added via the text box above (just like before) but also anything you add as an event when searching.

Second, the Search for Media section. This area is where all the magic happens. You simply select a service from our drop down and start typing your search into the text area and then hit the Search button that appears!

Searching functions just like it would when going to that service on your own. No hidden surprises.

If you see the dancing cat, it means he is processing your request and will return with results shortly.As you can see, the results are shown in a familiar fashion to anyone who has used Popcorn Maker before. All you have to do is click on the given thumbnail and that media will be added to your project!

You can easily find more results than what’s initially listed by clicking through our paging controls.

So find your favourite YouTube video, all the cat gifs you could possibly imagine and let your imagination fly. It’s now super easy to quickly create some cool projects!

A Year of Open Source

This last year has been quite an interesting ride for me. A year ago, basically to the day, I first met the crazy people I now work with everyday on Popcorn and Popcorn Maker: Scott Downe, Jon Buckley, David Seifried and Chris De Cairos back at a friendly gathering to watch a UFC pay per view. I was pretty much set on taking the first course in open source taught at Seneca by David Humphrey but it was rather interesting to meet these new people and learn more about it and the kinds of things they did.

A year ago I literally didn’t know much. I had the basics skills taught to me by the previous courses at Seneca but honestly they didn’t prepare me for a lot of things with the web. Working on Popcorn introduced me to a lot of things that I didn’t know, especially with javascript. Man, I remember when I had no clue how to really use an XHR request and was so stumped on what to do for my really crappy tumblr plugin. Compared to today it’s quite amazing the differences. I can’t claim I know everything or even a lot right now but I find myself able to tackle a lot of different things but more importantly I’m able to work with others on the things I can’t figure out and discuss different approaches to finding a solution for a problem.

More importantly it’s the opportunities I get working on this project. It’s so cool to work with, collaborate with and meet all the ridiculously smart people with Mozilla. Some of those include:

Bobby Richter
Secretrobotron. Pretty much a genius. He’s sort of the software lead and an awesome guy. He also likes long walks on the beach, morning sunrises and phish.

Kate Hudson
Popcorn Makers designer. Truthfully she is also one hell of a programmer and could easily just work on any of the bugs the rest of us do. Honestly quite amazing. Don’t ever get her angry though.

What’s even better has to be some of the reactions of people when we show them the software and seeing how they use it. Yesterday and today we have been doing user testing and just watching them use the app is awesome. When you write up all of this and think about user experience for the app you feel like you have it covered pretty well but then all of the sudden someone brings up something completely different. You thought maybe the purpose of something was obvious but it isn’t at all and basically get’s ignored or some cool feature that get’s overlooked completely because it isn’t apparent at all that it even exists.

Honestly, I can’t wait for what the future brings. We have so many cool things left that we want to do and I just want to keep on working harder and harder. There’s so many cool things I want to do and working on all of these has given me many ideas for what I’d like to do in the future and the best part is with open source I can easily make that happen 🙂

Anyways, back to work!

Popcorn and Popcorn Maker Testing – This is How We Do It


No jokes. I literally had that song pop into my head when trying to think of a title. Enjoy.

My primary focus over this summer has been and will be the testing we have in place for Popcorn Maker. It’s been severely lacking and we need to change that. However, I wanted to take the time to explain everything we do in both projects; what we use and why. First, let’s talk about testing in general.

So, Why is it Important?
This may be a dumb thing to talk about but I’m sure someone would want to know and for completions sake I’m going to briefly talk about it. No matter what kind of software you are writing – library or full fledged application – what you are working on will always have expected functionality. You want to have robust testing because it allows you to easily check against this expected functionality and know if you have broken any of that before you bring it out of development and into production.

Popcorn Testing
Unlike Popcorn Maker, Popcorn already has a great robust testing environment. The test suite it has is rather massive (the amount of tests is in the thousands) and it all uses QUnit based testing. For Popcorn it’s a perfect match because we can easily test ANYTHING in our library without breaking a sweat. It works perfectly for any javascript based library that isn’t reliant on a UI of any sort. The main selling point is that it allows you to easily break down tests into groups and report back useful data about any passing/failing tests. For us it really get’s the job done well and allows us to integrate with other services well such as Test Swarm. More on that later.

Popcorn Maker Testing
Popcorn Maker is a bit different here. Yes, it is all 100% javascript so from far away it would seem that QUnit would cover the job very well here also. Unfortunately it only can go so far because a lot of things need to be tested on the UI elements themselves and not just the core libraries/modules that run everything in the background. We have many QUnit based tests for our core modules, many of which I recently finished polishing up to give them the attention the deserved including many new ones. I also wrote a nice test harness that will run all of our tests together making it really easy to check over all tests at once.

However in the end this doesn’t solve the problem of the UI testing we need. In the past Chris and I played with the Selenium IDE to create some tests written in python based around our testing template. These actually worked before kindofish (totally a word by the way) until we implemented our own DragNDrop which broke these tests and to add to that when we used iframes for our editor and dialogs it was difficult to interact with them using their older Selenium RC. However I took a look recently at another option they have called the Selenium WebDriver API and see if it along with all the changes we have been making would change the results we were having in the past.

Sure enough, it did! I was able to get some basic tests working for our Export Dialog boxes and some basic drag and drop action going on track events. Here’s the code I wrote for the export dialog tests:

import unittest
import time
from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.common.keys import Keys
from selenium.common.exceptions import NoSuchElementException

class PM_HeaderTests(unittest.TestCase):

  def setUp(self):
    self.driver = webdriver.Firefox()
    self.action = ActionChains( self.driver )

  def test_export_dialog(self):
    driver = self.driver
    action = self.action
    templateTitle = "Basic template"
    driver.get( "http://localhost:8888/templates/test.html" )
    driver.maximize_window()

    self.assertEqual( templateTitle, driver.title )

    # Ensure the button is present on the page, then click it
    sourceButton = driver.find_element_by_id( "butter-header-source" )
    self.assertTrue( sourceButton )
    sourceButton.click()

    # Ensure an element with the class_name is present
    # Only ever have this class on the page at one time
    sourceDialog = driver.find_element_by_class_name( "butter-dialog" )
    self.assertTrue( sourceDialog )

    # Get JSON, HTML button in export dialog and their text areas
    jsonButton = driver.find_element_by_class_name( "json-button" )
    htmlButton = driver.find_element_by_class_name( "html-button" )
    jsonTextArea = driver.find_element_by_class_name( "json-export" )
    htmlTextArea = driver.find_element_by_class_name( "html-export" )
    # Ensure the elements were on the page and retrieved
    self.assertTrue( jsonButton )
    self.assertTrue( htmlButton )
    self.assertTrue( jsonTextArea )
    self.assertTrue( htmlTextArea )

    # Check that the appropriate display properties were set when switching to the JSON
    jsonButton.click()
    self.assertEqual( jsonTextArea.value_of_css_property( "display" ), "block" )
    self.assertEqual( htmlTextArea.value_of_css_property( "display" ), "none" )

    # Check that the appropriate display properties were set when switching to the HTML
    htmlButton.click()
    self.assertEqual( jsonTextArea.value_of_css_property( "display" ), "none" )
    self.assertEqual( htmlTextArea.value_of_css_property( "display" ), "block" )

    # Check pressing the ESCAPE key closes the dialog
    try:
      sourceDialog.send_keys( Keys.ESCAPE )
      sourceDialog = driver.find_element_by_class_name( "butter-dialog" )
    except NoSuchElementException as e:
      self.assertTrue( "Dialog not found, as expected" )

    sourceButton.click()
    dialogCloseButton = driver.find_element_by_class_name( "close-button" )

    # Check pressing the close button closes the dialog
    try:
      dialogCloseButton.click()
      sourceDialog = driver.find_element_by_class_name( "butter-dialog" )
    except NoSuchElementException as e:
      self.assertTrue( "Dialog not found, as expected" )

    time.sleep( 2 )

  def tearDown(self):
    self.driver.quit()

if __name__ == "__main__":
    unittest.main()

One of my first few stabs at python so don’t judge me. To summarize, when run this will:

1. Open a Firefox Browser.
2. Navigate to our test page.
3. Maximize the window.
4. Press the View Source button in our header (Export Dialog).
5. Press the View JSON button.
6. Check appropriate display styles for both JSON and HTML text areas.
7. Press the View HTML button.
8. Recheck display styles for both text areas.
9. Check if closing with the ESCAPE key works as expected.
10. Press the View Source button again and then try closing with the explicit close button.

What I’m really hoping for is to find some better sort of callback like system so I know when things are done. Right now things seem fine but I’m half worried I will run into asynchronous issues in the future.

Continuous Integration – Test Swarm
This is actually something we have sort of had for a while now however we never used it much. I would say it boiled down to two factors:

1. We haven’t spent nearly as much time on Popcorn over the last few months and this was the only project it worked with at the time.
2. It wasn’t very convenient to use. The way we had it setup to listen for/run jobs was kind of clunky and cumbersome to use.

Luckily, this has changed thanks to more work done by Jon bringing in Botio to the project and Chris by not only updating our test swarm stuff but also adding integration into our botio system. We use a pull request based system for everything change we make to the project, meaning for every ticket where changes to the code are being made a pull request is made to help review the code. With botio listening for various commands we can comment in the pull request with a particular command and then have results sent back to the pull request. It’s helped make things very efficient for us and when we add in Chris’ work for /botio try to run a job on our test swarm instance we will be golden.

Hope you enjoyed my mini novel on how we go about testing for the projects Popcorn and Popcorn Maker. There will definitely be more to come later on our advances with Selenium. If you want to learn more out what Chris has been doing, check out some of his blog posts such as Time to Automate Butter Unit Testing and Popcorn and Butter Testing.

Popcorn – Focus, Take Aim and Fire!

Big things are coming. Big decisions have been made.

The Popcorn Maker project has been scrapped.

Just kidding.

Anyway, a lot has gone down for us over the last 12 days. For starters we have some final work to finish off on our 0.6 release of Popcorn Maker and our 1.3 release of Popcorn. Both are mostly going to be polishing releases for the work we have done up until now. Popcorn itself is pretty mature and doesn’t need many big ticket features to come on in, but Popcorn Maker is in the middle of some big decisions coming down as to what we want to ship in our 1.0 for the Mozilla Festival in November. So the need for big things to happen right now isn’t very high, we just need to get more minor fixes done.

Popcorn Maker has so many big lofty goals. It really has a bright future with all the cool things we want to do. Unfortunately to make our deadline we are forced to cut away some of these features from landing in 1.0. Easily one of the coolest and most promising things we were thinking of doing was mobile support. Thanks to David Serfried and Robert Stanica we had a promising glimpse at getting some of this working. It’s disappointing to see this thing axed but we have more important things that need to be working for then.

One of those is developing some good templates. While all the new ones we have are really cool we also realize that they are kind of hard to understand and also don’t function very well other than with some of the things they were provided. Kate Hudson is steering the ship behind this with some great designs and ideas on not only templates but how we can improve the overall Popcorn Maker ecosystem to simply be more friendly and easier to pick up.

TESTS!
I’m going to finish these basic unit tests this week. Period. I feel really terrible for letting them hang this long and I’m going to make sure I put a stop to that by finishing them up this week. Part of the reasons why I feel terrible about leaving them hanging for so long is I know someone else could easily have done them much, much quicker than me. If someone else had either the interest in doing them (Wait… sorry had to stop myself from choking there) or just simply the time they could have done them in probably a day or two. Even that I think is being generous. It’s time for me to bang these out because I want to move onto something else. I want to own something else in our project or be a key part of some other area of it. Right now I’ve had my hands dipped into many corners of the project but nothing that was specifically mine started from scratch. Maybe that’s working with Kate on templates, maybe that’s working on cross browser support. We still need to sort out work for what we are doing with these new features coming out of the big meeting last week.

Combine those tests with the work Chris is doing for test swarm and we should be pretty golden. Just need to get my act into gear.

The Summer Thusfar at CDOT w/ Popcorn

A quick summary for anyone who doesn’t know what I have been up to here. My name is Matthew Schranz and I’ve been working full-time specifically on the Popcorn and Popcorn Maker projects since May but was also assisting part-time from January to April. The difference between today and the beginning of May is definitely a big leap in terms of what I understand and the kinds of things I have been able to tackle. I definitely feel like I have a better understanding of a much larger portion of the code base than I do now because of the opportunity I’ve had to tackle various different aspects within the entire Popcorn Maker ecosystem.

Confidence is a major factor. I actually feel like an important part of the team now after spending a lot of time on the project and it was easy to get that opportunity because I was willing to work for it. I’ve gone from pretty low on the totem poll for the project to someone who is counted on to get a bunch of work done and it’s been quite the learning experience getting this far. I’ve been able to work on many different areas of the code, from our server Cornfield to the templates, editors, tests and other general bug fixes. I’ve had the opportunity to expand my knowledge immensely, learn about a lot of different practices/coding styles and just working for a professional organization like Mozilla.

At the same time, I still know I have a ways to go. I feel like I have a lot left to prove and I want to continue working on this as much as possible, often meaning I’m on at night when most of the team isn’t and they think I’m crazy. None the less, I want to push as much as possible.

The rest of the summer is going to be interesting for us. Plans for the entire team/project have definitely changed a fair bit from what we all intended maybe a month ago. For one, David Seifried and Robert Stanica managed to get Popcorn Maker working on the iPad all while not a single person on the team even knew about it. I don’t know if we realistically thought we could get the app working on a mobile device before 1.0 but it’s actually looking very possible.

There are still many hurdles to overcome along with many awesome moments to be shared between now and the 1.0 in November. I just hope I get the chance to go to London for Mozfest to celebrate it 🙂

OCE Discovery and more Popcorn popping

This week has been a shorter work week for me in the typical sense. I was asked to go help represent Seneca College down at OCE Discovery 12, a conference held by Ontario Centres of Excellence aimed at bringing together key players from industry, academia, government, the investment community as well as entrepreneurs and students to pursue collaboration opportunities.

This event was very interesting for me. It was a great opportunity to work on my presentation skills, although not in the typical sense. One thing that was said to us back at the beginning of the summer was that we need to be able to talk about what we are working on to anyone at anytime; Be able to describe our project on a high level so that anyone could understand it. I spoke to people of varying knowledge levels: from nothing all the way to other programmers from other schools, such as Niagara Research.

However, I feel that something like Popcorn is hard to show off at that kind of event. All we have are computer monitors showing videos on screen. In particular we were demoing our open source work done in conjunction with Native Earth and that particular demo is not particularly eye caching. It would have been better to show off some of more flashier demos that are out there on the net or maybe make one ourselves. What might have been even better would be to have multiple computers setup allowing people to play with Popcorn Maker. That is something more people can understand and the fact that they would be creating something themselves would make it a more lasting experience.

Still, there was a lot of cool things on display, including but not limited to: the U of T electric car that was used as part of a race across Australia and an app that was able to read your brains waves measuring focus levels that got you to controls the physics of a game. Going to this kind f event has definitely given me more thoughts about the kinds of things I want to do in the future. I never would have thought this 3 months ago but perhaps the career of a tech evangelist is in my future!

    Oh Yeah, I Did Some Coding Too

This week consisted of more fixes for butters unit testing and many code reviews. We also spent a lot of time discussing key aspects of the Django app that is going to make its way into Popcorn Maker soon along with new UI/UX stuff. While I am learning a lot more when it comes to JavaScript, I’m still very humble in my skills levels. Projects like these keep you humble because the code can be very hard to follow and learn. I’m sure if someone else was handling my tickets it would take them 1/4 of the time but that’s why we are all here; to learn.

I’m looking forward to finishing this stuff up so I can switch gears back to UI testing now that we have additional tools available, such as David Humphrey’s addition of Firefox’s “special powers” chrome access JavaScript. Going to be awesome!

Implementing Testing for Popcorn Maker

For the foreseeable future my main focus is going to be beefing up the testing system in place for Popcorn Maker. As it stands Popcorn Maker doesn’t have the same sort of testing environment and infrastructure that Popcorn.js has and this needs to be changed. Some basic QUnit based tests are present however they are never run and most are severely out dated, basing themselves off of an older version of the Butter SDK behind all of this. This is due to the culture the project currently has and my goal is to be apart of the change behind it.

All the Areas that Need Testing

  • Comm
  • Dialog
  • EventEditor
  • Cornfield
  • PluginManager
  • Timeline
  • TrackEditor
  • UI Testing
  • Test Harness so all the above testing can be run easily all at once

Needless to say, it’s a long list. A lot of it involves areas of the Butter SDK that I don’t know much about. On top of that there doesn’t seem to this one framework that can handle everything we want to do on the UI Testing side all nice and neatly like QUnit does for everything else. I have played around with Selenium a lot and that proved to be quite the nightmare. I’m still not 100% certain if it’s what we want to use because there are definitely elements to it that work and a lot that seemingly don’t. Right now I’m playing around with two frameworks, called PhantomJS and CasperJS, which CasperJS is built on top of PhantomJS to provide additional functionality.

As it stands, CasperJS doesn’t appear to allow me to send key events in any way to the page it interacts with. This is bad because it basically means I can’t run any of our tests that rely on some sort of key press from the user. On top of that there doesn’t appear to be anything available to test dragging and dropping of elements on a page. Once again, this is also a problem because we wouldn’t be able to test moving things like track events, track containers, track handles, events onto a track and anything else I haven’t included.

Thusfar I have only been able to have these run on the command line. I’m sure there is some sort of way that to integrate all of this together, so I went and asked their google group to see if someone more knowledgeable can assist me. In the mean time, here is some of what I have come up with thusfar:


casper.test.comment( "Testing iFrame Dialog Closing with Esc Key - Popcorn Maker" );

var p = require("webpage").create,
    t = Date.now();

casper.start( "http://localhost:8888/templates/test.html", function(){

  t = Date.now() - t;

  console.log( "Loading Time: " + t + "msec" );

  // Ensure template has loaded
  this.waitUntilVisible( "#butter-header-new", function(){

    // Confirm button exists
    this.test.assertExists( "#butter-header-new", "The button did load" );

    // Move mouse over button
    this.mouse.move( "#butter-header-new" );
    // Click zee button
    this.click( "#butter-header-new" );

  });

});

casper.then( function(){

  // Our iFrames don't have IDs, but all use the same class and this class is
  // only ever present in the DOM once
  this.test.assertExists( "iframe[class=' fade-in']", "The iFrame Loaded" );

});

// Run the whole test suite (all the above)
casper.run( function(){

  // Sends a test done message when all the of the above has finished running
  this.test.done();
  this.test.renderResults( true, 0, "iframe_esc_close.xml" );

});

This set of tests opens our testing template and then wait’s for our content to load. Once it has, it ensures an element with the id butter-header-new is present in the DOM. It then moves the mouse of that element, and clicks it. After the click has finished it will check if an iFrame with the class name fade-in is present. All of our iFrame dialogs use this class name and there will only ever be one iFrame dialog open at one time.

One of the interesting things that is run after all the tests are done is Casper.renderResults. What it does is send the results of our testing to the file I specified in an XUnit formatted XML file. From what I read we might be able to hook this into another continuous integration service such as Jenkins.

Here’s what running that code looks like:

What’s next?
Hopefully we can sort this out sooner rather than later. Once we can solve exactly what frameworks/technologies we will use to write out tests we can actually go about and well, write them! Hopefully my next post will include some of that 🙂

Until then!