Click to play!
View the source

I’m officially releasing Tetrissing for the 1GAM challenge. Tetrissing an open source Tetris clone I wrote in Processing.

I began working on the game during Ludum Dare 26. There were a few developers hacking on LD26 at the Ryerson Engineering building, so I decided to join them. I was only able to stay for a few hours, but I managed to get the core mechanics done in that time.

After I left Ryserson, I did some research and found most of the Tetris clones online lacked some basic features and has almost no polish. I wanted to contribute something different than what was already available. So, that’s when I decided to make this one of my 1GAM games. I spent the next 2 weeks fixing bugs, adding features, audio, art and polishing the game.

I’m fairly happy with what I have so far.� My clone doesn’t rely on annoying keyboard key repeats, and it still allows tapping the left or right arrow keys to move a piece 1 block. I added a ‘ghost’ piece feature and kickback feature, pausing, restarting, audio and art. There was nothing too difficult about all this, but it did require work. So, in retrospect I want to take on something a bit more challenging for my next 1GAM game.

Lessons Learned

One mistake I made when writing this was over complicating the audio code. I used Minim for the Processing version, but I had to write my own implementation for the Processing.js version. I decided to look into the Web Audio API. After fumbling around with it, I did eventually manage to get it to work, but then the sound didn’t work in Firefox. Realizing that I made a simple matter complex, I ended up scrapping the whole thing and resorting to use audio tags, which took very little effort to get working. The SoundManager I have for JavaScript is now much shorter, easier to understand, and still gets the job done.

Another issue I ran into was a bug in the Processing.js library. When using tint() to color my ghost pieces, Pjs would refuse to render one of the blocks that composed a Tetris piece. I dove into the tint() code and tried fixing it myself, but I didn’t get too far. After taking a break, I realized I didn’t really have the time to invest in the Pjs fix and also came up with a dead-simple work-around. Since only the first block wasn’t rendering, I would render that first ‘invisible’ block off screen, then re-render the same block onscreen the second time. Fixing the issue in Pjs would have been nice. But that wasn’t what my main goal was.

Lastly, I was reminded how much time it takes to polish a game. I completed the core mechanics of Tetrissing in a few hours, but it took another 2 weeks to polish it!

If you like my work, please star or fork my repository on Github. Also, please post any feedback, thanks!

On Monday, I had an opportunity to introduce myself to our BigBlueButton developers throughout the world. I am very exciting that I can actually work with people from all over the world. Currently, I am working on the BigBlueButton localization and trying to translate bbbResources.properties file into Chinese. Hopefully, I could finish the translation during this long weekend.

During the Development Environment Setup, I am getting more familiar with BigBlueButton. Generally speaking, there are lots of pain during my first try because my computer doesn’t meet the requirements. Good news is that I will have a new computer next week.

Step 1

Before I can start developing on BigBlueButton, I need a working BigBlueButton 0.81 server. As the result, the first step is to follow the instruction to Installing BigBlueButton 0.81

Step 2

I need to setup my Github account in order to work with people from all over the world. Chad Pilkey wrote a pretty helpful blog about how to setup the github account. Basically, we should fork the SenecaCDOT-BigBlueButton repository to our own Github account, then clone the repository to our local computer. In addition, use the following command to add bigbluebutton repository as our remote upstream <git remote add upstream https://github.com/bigbluebutton/bigbluebutton.git>. Keep in mind: Never touch your master branch in anyway. We should not work on the master repository. The best way is creating another branch using <git checkout -b html5-bridge origin/html5-bridge>

Step 3

Setting up the environment is very important. The first thing we need to do is to copy the config.xml file and update accordingly to our installation.

cd ~/dev/bigbluebutton/

cp bigbluebutton-client/resources/config.xml.template bigbluebutton-client/src/conf/config.xml

Replace the HOST in config.xml with your DOMAIN or IP ADDRESS. After setting up the BBB-web, BBB-apps, and BBB-voice, I can install and run HTML5 Bridge component.

In order to work on BigBlueButton HTML5 Development, I must learn backbone.js, JQuery, MVC , socket.io and node.js from now.

This week, I discovered the joys (*cough*) of Unit-testing while developing my first Node.js module.  In short, a unit-test suite programatically tests a piece of software’s design specs against its implementation.   Once set up, unit-tests are intended to be reused whenever development or maintenance occurs on the software the tests were written for.  The only time the tests themselves need to change is when the design of the code they’re testing changes.

In my case, I wrote unit tests for two separate pieces of software.  This led to two slightly different applications of the idea, though coding the tests was almost exactly the same.

Unit Tests for Internal Logic

UPDATE: Thanks to Rick Eyre for an elegant and concise explanation of unit tests in white-box testing!

From Rick:

One thing though — unit testing doesn’t always have to be black-box testing. You can do white-box testing using unit tests as well. This is where you design the unit tests with an understanding of the internal mechanisms of the code. So the unit tests are designed to hit certain paths through the code, etc.

Unit testing refers to the level of test i.e. at the most atomic of levels, not the integration, or system levels.

Unit-testing is primarily a black-box testing technique – that is to say, whatever happens inside the code being tested is irrelevant.  Unit-tests are only concerned with what goes into the block of code in question, and what comes out afterwards.

As stated above, the results are checked against what is required of the test-block.  This way, a programmer making changes to an existing program will immediately see if she broke the code, because the unit tests will fail when the black box doesn’t behave as expected.

Unit-tests can be written against the internal mechanisms of a program, but only if those mechanisms are highly reusable and unlikely to change in function – otherwise, the work required to maintain the unit-tests becomes an inefficient use of time.  Unit-tests shine the most when a software architecture is stable, and unlikely to change much.

Unit Tests for an API Service

This is the best example I could find on the value of Unit-Tests.

For the Webmaker initiative, Mozilla created a number of different services that would run on separate servers.  Their interactions were through API calls made over HTTP.  Before they were ever coded, these API’s were conceived and laid out so all the different components of the Webmaker project had the same assumptions.  If the Login server needed to check on Metadata from the metadata server, the developers needed some idea of what that would look like.

After the design spec was created, and an initial implementation was developed, I was tasked with writing tests to confirm that the API implementation of the Login server matched its design.

A basic unit test looks like this:

describe( 'basicauth', function() {
  var api = 'http://wrong:combo@' + hostAuth.split("@")[1] + "/isAdmin?id=";
  before( function( done ) {
    startServer( done );
  });

  after( function() {
    stopServer();
  });

  it( 'should error when auth is incorrect', function( done ) {
    var user = unique();

    // Create a user, then attempt to check it
    apiHelper( 'post',  hostNoAuth + '/user', 200, user, done, function ( err, res, body, done ) {
      apiHelper( 'get', api + user.email, 401, {}, done);
    });
  });
});

Each “unit” will be checking a single code-block. In this case, the functionality being tested is basic authentication (line 1). Inside each unit is at least one test, whose purpose is to confirm our assumptions about the unit being tested.

First, actions are declared to set up the environment for the test (line 3) and clean up afterwards (line 7). For this unit, it’s quite basic: Start and then stop the server.

Unit Test helper libraries are set up to make reading the tests a semantic affair – it should be somewhat straightforward. In this case, the one test in the suite (line 11) is checking that the correct error code is returned when authentication fails. In this suite of unit tests, a helper function was written to reduce the repetition of code (lines 15/16 both call it). The logic hidden by the helper function would look something like this:

  it( 'should error when auth is incorrect', function( done ) {
    // Creates a unique user
    var user = unique();  

    // Call to the login server with bad credentials goes here and
    // returns data to be tested.
    var results = someCall( user );

    // Unit-test node.js module method: compares the results against what we 
    // expected, throwing an error if there's a problem
    assert.ok(results, expectedResults);
    done(); // Signals that all tests for this unit
            // are complete.
  });

First, data necessary to test the unit is generated (line 3). This data is then passed in the call to the code block we’re testing (line 7), whose return data will be checked. Line 11 uses a special Node.js method to compare the result of the call and what the design spec says the result should be. When all “assert” statements are executed, the unit-test programmer includes “done()” to signal the end of that specific test in the unit (line 12).

By repeating this process for every possible outcome, for every possible call, we end up with a robust suite of tests that quickly highlight when something has gone wrong in the development process.

Not bad!

I have now spent some time learning the Processing.js game engine that we will be using for our game.

It can be found here: https://github.com/Pomax/Pjs-2D-Game-Engine

It seems to have adequate features for our game’s purpose, however their are still some issues I have with it.

The most obvious problem is that it’s keyboard input is broken with Mozilla Firefox. Hopefully we can get into contact with the engine’s creator Pomax to figure out what is wrong, considering keyboard input is an integral part of almost all games.

Other then that there are only a few other small, personal issues I have with this.

As far as I can tell, there is no support for the use of sprite sheets. An unchanging sprite can only be created using:

addState(new State("stateName","stateImage.png"));

While an “animated” sprite can  only be created like this:

addState(new State("animatedStateName","stateImage.png", height, width));

Where the height specifies the division of the image vertically, and the width specifies the division of the image horizontally. The engine will then look through each individual division of the image in order to simulate animation.

If I can, I would like to add functionality to take an x,y coordinate of the image and a width and height so that sprite sheets can be used, rather then having to have individual image files for every different sprite. I am not yet certain of how the exact implementation will look, as I will have to browse through the engine’s image processing implementation.

Other then learning the engine API, we still have the problem of missing art assets from the original game. We have discussed hiring an artist for a period of time in order to complete the necessary art. If this happens, we may even be able to include some better looking art assets and update the overall aesthetics of the game.

This week at CDOT started off swell, with my Linux box deciding to refuse to load the operating system after I installed LAMP (Linux, Apache, MySQL, PHP) server packages in an attempt to set up a localhost server on my machine. I’ll admit that I’m not a power user when it comes to Linux, but I want to like Linux. I really do. Yet every time I attempt to use it, the OS has to play hard to get. I’m starting to feel like my relationship with Linux is one of love-hate. That’s a story for another time.

Moving on, after I re-installed Linux and set up my necessities, I started playing with Processing.js  to create prototypes of the Flash game functionality and to get familiar with Processing.js itself. This then turned into a discussion with the team about the design of the new game, and what parts need to be improved and how. This all culminated in the creation of a Game Design Document (GDD), which I’ve been working on for the remainder of the week. The document is very ad-hoc, as my attempt to find a GDD template on-line was met with the realization that there is no GDD template, at least not in entirety. Each game requires it’s own specific form and structure of the document, with maybe the Project Overview section being the only common link between them. I did find some useful bits of advice on how to write these documents, with links below.

I expect that I, along with my team members, will continue to flesh out the document for the next few weeks to really iron out what the new game shapes into and what its goals will be, both in terms of education and entertainment. Perhaps I will be able to link to the document right here on this blog once it has substance, if I’m permitted. So far I’m loving every minute of this job, as I’ve always dreamed of being a game designer, and here I am designing a game (almost) from the ground up.

Links
Brenda Brathwaite’s blog on creating a GDD
http://bbrathwaite.wordpress.com/2008/11/30/creating-a-game-design-document/
Gamasutra article on creating a GDD
http://www.gamasutra.com/view/feature/3224/creating_a_great_design_document.php

A month back I found out that Caitlin and I were being invited to Mozilla’s Web Rendering Week in Taiwan. Needless to say I was shocked. Ralph Giles, who has been working with us closely on WEBVTT and was/is our main contact with Mozilla for WEBVTT, kindly invited us out — thanks Ralph!!

Therefore, a lot of this week has been spent getting ready for the trip — getting ready to travel and trying to push on some final bugs to get initial support for WEBVTT into Nightly before we leave.

Getting that initial support entailed a few things, all of which haven’t happened yet… Don’t worry though! If we don’t get it finished before Taiwan we will definitely get it finished while we’re in Taiwan. We need(ed) too:

• Get the WEBVTT library to a state where we felt comfortable tagging 0.5 and landing it in Gecko.
• Land the DOM implementation of HTMLTrackElement and the TextTrack objects.
• Land the parser and Gecko integration bug.

Getting WEBVTT to 0.5 was pretty easy. The only extra thing we wanted to add before 0.5 was support for the new <lang> tag. We needed a new string list pop function for that as well. I implemented that this week, which also exposed a bug that we hadn’t found yet because we didn’t have a proper test for it. The bug happened when we had an <rt> tag that was not enclosed within a <ruby> tag. In these situations the <rt> tag should not be processed. We weren’t handling it correctly and it was crashing the parser. That got landed as well yesterday. We tagged 0.5 and Caitlin is working on the bug to land it in Gecko now. WEBVTT 0.5 contains a lot of good things like sec-critical bug fixes and library usability fixes.

Ralph is very close to landing the DOM implementation. That should be happening within the next few days. The parser integration is getting close as well. I’ve been working on changing the code that converts the C node tree to a DOM tree from a recursive algorithm to an iterative one. It’s been a little tricky as we need to keep track of where we are in the C tree as we iterate over it, as well as where we are in the tree of DOM nodes that we are creating. We also need to keep track of the ‘last branching parent’ so that we’re able to tell when we need to go back up the tree. I have a solution that I put together that will hopefully be able to get an r+. I’ll have it up for review tonight on the bug.

The other major thing I did this week was give a presentation to CDOT about WEBVTT. You can check out the presentation over on my GitHub page. It was recorded so maybe you all can see it at some point when it gets posted! I’ll link at that time.

Until next time.

Application testing plays very important role in any development process.  After spending numerous hours on it, I have decided to put what I felt was important in to a short book, which is intended to help developers  to get  started with  application testing using Eclipse.

The book is very practical, there is almost no theory, just recipes that introduce essential concepts of testing such as Breakpoints and JUnit tests.It is short and strict to the point. You can read it and do all the recipes in one day, and in the end, you will have deep understanding of how to debug your application using Eclipse.

The book is available in paperback as well as ebook formats.

It occurred to me recently that when it comes to a software project – it takes more than just code to make it successful but at the same time we typically only measure the scope of a software project in lines of code (LOCs). In most organisations it’s laughed at as an official measure of productivity, but think about it – when was the last time your manager put socialising or pondering or answering email or relearning your own code on the project plan?

I don’t have the time to go looking at the mass of research about measuring programmer productivity or project complexity, but I’ve had this quick idea I can share: instead of lines of code (which is just a part of the effort involved in maintaining a project) we can measure the entire effort it takes to conceive it, design it, build it, and maintain it.

What unit of measurement? Days of effort, of course, or DOE. Unless it’s a big project, in which case we can measure in months of effort, or MOE. If it’s a really big project – years of effort, YOE. But tiny projects should not be forgotten – so hours of effort must also be accounted for, as HOEs.

I think I will suggest that to my project manager if I have one again some time soon..

So the other day I was working on Webmaker project on Mozilla Thimble. On the installation part I have a bit of problem where I have to run one of the Python application in order to get the server running.

And the error I get it’s below:

bash-3.2$ python app.py
Traceback (most recent call last):
  File "app.py", line 2, in <module>
    import bleach
  File "/Users/alihuta2002/htmlsanitizer.org/bleach/__init__.py", line 7, in <module>
    import html5lib
ImportError: No module named html5lib

I’m going to write a tutorial on how to Install Python modules on your Unix, Linux or Mac OS X Machine.

So obviously I have installed Python, but this application needs some library to work with and the one I have problem with was html5lib so I have dig through some google and found a solution to fix this problem by installing this Python’s modules manually. First I have to tell you that I don’t know if there is an easy to accomplish this or not, but this is how I fixed it.

You must have Python installed in order to use the easy_install command.

So run this command on your terminal

sudo easy_install pip

After that you will have pip installed on your system. Where pip it is like a package manager where it will help you download and install Python modules easily.

Now we need to install html5lib by using the following command.

NOTE: If you have problem with other modules simply replace the html5lib with the one you need to install.

sudo pip install html5lib

Now that the installation of html5lib have been successfully installed on your system.

So the problem fixed and I can run the server with no problem.

I have this tutorial will help some of you, and if you have a better way please do share them with me as well

The post How to install Python modules appeared first on Ali Al Dallal's Blog.

Hello again, so this is my second blog post so far since I started working here at CDOT on Mozilla Webmaker. I can’t imagine that I am now at the end of the second week working here and have learned a lot in the past two weeks.

What I have learned in two weeks here at CDOT?

Well in the past two weeks I must say that it’s incredible compare to what I can learn from school. Why? well let me tell you that learning everything myself is one of the biggest challenge, but learning non-stop about something that you like it’s a pleasant because you are enjoying it and the more you enjoy of what you are doing the more you will learn and doing good at it.

So really what I have learn?

I have learn how to use git better and that I must say thank you to my team Rick, Kieran and Matthew. Where a lot of time I will stuck on something and they will always help me out on that.

The second most amazing thing that I have learned it’s Node.js and really this is something amazing that I was talking about. With Node.js I have learn how to create a server and how to do a lot of stuff with this amazing new language that base on JavaScript and powerful language that uses V8 vm that google use in their Google Chrome.

Learning Node.js have helped me understanding a lot and allowed me to move on to learn the framework that we use in the Webmaker, and that is learning Express.js. Learning Express.js wasn’t very hard, but very challenging because I can’t understand their documentation very well, so I have to use my skill of struggling and learning to get through it.

What have you contribute to the project?

Yes yes, now I can say something about it really. I have contributed a lot this week (Can’t compare to Kieran and Matthew of course), but yeah compare to my first week then.

What I have done this week is I have worked on many component of the Webmaker such as; Thimble, LoginAPI, Popcorn Maker and MakeAPI. Really all those component I have done not much compare to the other, but again I have done something.

Also during the time that I’m working on the bug that I’m assign this week I have file my own bug twice While I was working on the bug that they assigned to me, and when I’m testing something and it crashes the server, so I looked at it and figured that they have missed something and I have added some code to patch the bug and it works Check out my github account and you will see what I have contributed this week

Now that I’m writing this post on Thursday morning and I’m sure that in the next coming two days I will have more stuff to work on.

What is my plan for next week?

Oh yes yes, next week is very exciting week for me. Why? because we are having something call All-Hands week where that we have to go and work at Mozilla office in Toronto and that is for the whole week. In this work week I will be able to meet everyone on the IRC that I’m working with and will be able to sit and work together with them.

The post Second week with CDOT on Mozilla Webmaker appeared first on Ali Al Dallal's Blog.

I’ve been fiddling around lately with getting a new blog setup. I’ve asked around a lot and it seems like a super popular option for devs lately has been hosting on GitHub and using Jekyll to build your blog. Dale who worked on WEBVTT with me has a pretty sweet set up using this method.

Going with that I decided to set up my new blog this weekend. It would be easy I told myself, ever the optimist. You think I would learn after programming for as long as I have..

Installing the basic setup that you need to start writing blogs with Jekyll was super easy. Just install Ruby and RubyGems with MacPorts (if your on Mac) and install Jekyll with RubyGems.

sudo port install ruby
sudo port install rb-rubygems
sudo gem install jekyll

My real troubles began when I tried to use Jekyll’s blog import tool to migrate my WordPress posts over to my new blog. To do this you need the jekyll-import command. For the longest time I was having trouble installing this because ‘jekyll-import’ isn’t a full out gem yet (according to official documentation it is…) it’s a beta gem. This means you have to install it using the –pre option.

sudo gem install jekyll-import --pre

Without this it will tell you it “can’t find the gem ‘jekyll-import’”, but that you “may have been looking to install the gem jekyll-import’”… confusing, I know.

Great! Now it could find the gem when I went to install it. However now I had a new problem — it couldn’t find libiconv. This was weird because I had installed libiconv with MacPorts. It was only until I went to check the mkmf.log that the gem had created that I realized what had been happening (previously I had just been relying on what was being spit out on the command line, like a noob). In the log I found out that the libiconv I had wasn’t the architecture that was needed. I had x86_64, but I needed i386. Solving this was super easy. Just install the port variant of the libiconv library that is a universal library, i.e. you can use it when compiling for i386 and x86_64.

sudo port install libiconv +universal

The last problem I had with installing after this was getting the correct kind version of ruby. Jekyll-import needs ruby 2.0, I had 1.92. I had difficulty setting this up as I had multiple versions on my Mac including one that shipped with OS X. What you need to do is to install the ruby 2.0 port and then activate it.

sudo port install ruby20
sudo port select --list ruby (to get all ruby versions)
sudo port select ruby ruby20 (to select ruby 2.0)


Finally, jekyll-import installed and I tried to migrate my WordPress blog posts. I ran into one more problem though and this turned out to be a real bug. The import command was incorrectly trying to interpret the input of the command line arguments as a string instead of as a hash, which was what it needed. I filed the bug on the project’s GitHub page and someone solved it quickly! I haven’t had time to check to see if the gem has been updated yet so I don’t know if it’s completely working yet. Will post back when I find out.

So the moral of the story here is always check the log file when you encounter problems. It’s happened to me before where the log file has the correct information and the command line isn’t very helpful. Doing this will save you tons of time.

After all that I decided to set up my new blog with at least a ‘coming soon’ sign. So it’s up! You can check it out here. All that’s left is to finish my blog migration and add cool things like comment tracking and twitter feeds. I’d also like the user to be able to change the theme in real time. That would be cool. I also got to get some DNS server hosting for my brand spanking new domain http://rickeyre.ca. After that all will be good.

Until next time.

It’s been a while and frankly there’s a lot I could talk about. I’m going to rapid fire some things and then talk about this week as there are a lot new faces and new things we are working on.

Since my last post

- Popcorn Maker 1.0 was released at the Mozilla Festival in London. I overslept and missed the entire presentation about it.
- Popcorn Maker levels up and gains some really game changing features with Media clips and the ability to sequence multiple video clips together.
- I started a 1 year contract with Seneca to continue doing what I do now.

Webmaker 2.0

On April 9-12th the Webmaker team had a work week down at the Mozilla Toronto office. Here we discussed all of the elements that were going to need to come together for our relaunch of webmaker.org to be a great centralized location for the maker movement around our tools and a way to advance our learn movement as well. This will be requiring greater integration between our existing tools – Popcorn Maker and Thimble as well as the creation of new pieces to help unify everything – MakeAPI, Single Sign On, Thimble (on Node.js) as well as an awesome gallery system – all of this is in preparation for our second summer long event dubbed Maker Party 2013 by our fearless leader Mark Surman. Needless to say we have a lot of work to do but we have also accomplished a lot over the past few weeks.

This all sounds great, but what are some of these new things you are talking about?

I won’t get into too much detail, but here’s a brief explanation as to how each piece is going to help our goal of better integration between our tools.

MakeAPI
We needed a way to easily track work done by our users with our tools whether they made something with Popcorn Maker or Thimble. The MakeAPI is a service that will allow us retrieve “Makes” in many different ways. In the case of individual users, it might be simply grabbing all of the makes they have and building their personal gallery with it. Maybe the work by one of our makers is so great we tag it as a featured make allowing us to easily identify content that we want featured on our main pages. We also want makers to be able to tag other makes by people that they liked and this will manage this as well. In the end it’s a tool to help manage make information across all of our tools and allow easy searching through them.

Single Sign On (SSO)
We want not only our tools to feel like they are tightly integrated with each other but the entire webmaker.org platform as well. It would be really awful if you had to sign in once when browsing the normal webmaker.org and then sign in again to use any of our tools. SSO will allow us to manage a makers session across all areas of our platform allowing for a seamless experience no matter what they are doing. Signed in while using Popcorn Maker and then went to view other work on webmaker.org? No problem, we recognized you already signed in and will maintain that state. All using Mozilla’s Persona login system.

Thimble on Node.js
Thimble is great, but admittedly it’s running on a backend that limits the amount of people who can work on it easily in our team. We learned last year that Node.js is actually extraordinarily powerful by running Popcorn Maker on it without hiccups through very high traffic periods through our work with TED and others. This allows not only more developer power behind it but it now lives on the powerful Node.js technology which really leaves it open to all kinds of potential.

Anyway, this should be enough for a nice quick overview. On to this past week.

The Summer Work Term at CDOT

The summer work term is always an interesting time for the Seneca Centre for Development of Open Technology. There is a shuffle of people with some leaving onto other things and new fresh faces eager to dive in, contribute and learn. In the case of the Webmaker project we have three new guys joining us – Kieran(actually started in April during our work week), Igor, Ali, Rick and Caitlin – pretty much the biggest change in personel with the Mozilla team at CDOT in like, ever. Rick and Caitlin are going to continue their great work on the WebVTT spec implementation in Firefox for now but they will be joining us on Webmaker soon enough. Looking forward to working with them all as well as teaching them a few tricks along the way.

Image Uploading

My big focus this week was finishing the thumbnail backend for Popcorn Maker and then taking that new information we had and tying it into the MakeAPI as well as our controls. We had working parts for elements of this in the past with conversion of DataURIs from canvas elements and then creating files on the server end but we knew we could clean this code up by simply using direct uploading to the Amazon S3 service we use. It was a rather large changeset but the best part of it is the majority of it was code removal. It’s always great when you can accomplish the same task with far less code than you had previously.

From there I got our server pushing project information to the MakeAPI upon creation, updating and removal which was a simple enough task but it does lead to other problems. Namely, how do we deal with it during our dev environment where we won’t want to be constantly pushing information up to the MakeAPI but how we can test around the framework existing there. This is something that will need to be solved early next week before we can land that work in.

I also wrote up a patch that takes the project thumbnail a maker uses for their project and makes it the poster image for the video area until the video is played. This helps solves problems we have had in the past with events that have a start time of 0 seconds causing them to be loaded and visible upon page load; the biggest culprit of this being GIFs. GIFs and our sequencer work provided a great way for people to make really interesting video based memes, however having the GIF being visible immediately before the project played more often that not would ruin the intent. Now this will no longer be the case!

We have a lot of work coming up this week as our goal is to get a working alpha of the new site up and usable for the rest of the Mozilla Foundation as we are having our first All Hands of the year in a little over 10 days. Needless to say, lot’s of work to be done. Potential loss of sleep is probably high.

Until next week!

This week marks the first week of my full time employment at CDOT. I’ll be getting to work on Mozilla projects all year long! Yayyyy.

I was off last week which was really good since it’s been non-stop for me pretty much since the beginning of school last September. The only downside was that when I got back this week it was really slow going. This is the most unproductive I’ve felt in a while — not that I didn’t get anything done this week. It’s just that I got back to work, sat down to get some bugs updated/fixed and write some WEBVTT code, and … I forgot everything. My brain felt sluggish — what is the proper way to malloc a pointer-to-a-pointer in C again? Typical programmer forgetting everything they’ve ever done.

The week kicked off with an orientation day at CDOT which pretty much took all day. This ended around 3:00 pm when we got to set up our physical work stations at our new desks (I’m not in a glass cage anymore where people can point and laugh at the programmer). I get to work on a beastly new Linux box that can build Mozilla-Central from scratch in ~10 minutes and a sleek looking new 15 inch Macbook Pro, so my work output won’t be as constrained by build times now . Then on Tuesday I set up my build environment; downloading all the necessary packages, dependencies, software-dev tools, and repos. So it was only really until Wednesday when I got to sit down and look at some actual code and bugs. This is when I realized how much I had forgotten about during my break. That was pretty much all of Wednesday gone! However, I’m happy to say that as of today I’m back in commission and ready to churn out code like no tomorrow.

We also got two new people on the Mozilla team! Ali and Igor welcome to the team . I’ve been helping them with the few questions they’ve had about things like Git, Bugzilla, IRC, etc. I’m really impressed at how fast they are picking everything up though. They’ve even fixed there very first bugs. Awesome!

The main things that I was able to get done this week was to implement the <lang> tag, a new part of the spec that was snuck in when we weren’t looking. This entailed adding a new stringlist pop function and new tests to go along with it. I also wanted to refactor the code a bit as the <lang> tag introduces some complexities that make the solution kind of a hack at this point. We haven’t fully refactored it and I think we won’t until after we get back from Taiwan as we’d like to focus our attention on getting WEBVTT landed in Nightly so we have something to show for it. We’re almost to that point. Ralph will be hopefully landing bug 833385 on Monday, bug 833382 will follow quickly, and then we need to land WEBVTT 0.5 in Firefox to and we should be good to go. I also addressed most of the review comments on bug 833382. I’ve yet to post a WIP because I still have one more thing left to address. It’s sitting over on integration right now though if you want to check it out. Final thing I worked on code-wise was trying to reproduce a sec-critical bug. I have to run an ASan (Address Sanitizer) build of Firefox for it. I’m still working on that currently and will be back with more updates next week.

Oh yeah. I’m going to Taiwan! Ralph was kind enough to invite Caitlin and I to the Web Rendering Work Week out in Taiwan this year and Mozilla was kind enough to allow us to attend! We’ll be leaving Friday the 17 and coming back Saturday the 26. It’s going to be awesome. I’ll make sure to tweet and blog a lot while I’m out there.

The other really cool things that happened this week was that I was able to get a glimpse into what’s going on with Webmaker at Mozilla as most our team at CDOT is working on it. I might do a little in the future, we will see. We attended an e-meeting and it was awesome to see some of the really cool work that is going on.

Final thing that happened is that Ralph, Caitlin, Marcuss, and I set up a meeting time on Fridays after the Webmaker meeting. We had our first today and it was super beneficial to me. I was feeling slightly lost this week in terms of the WEBVTT project and the meeting really helped me refocus and see what our immediate goals should be.

Until next time.

On May 6  2013 I began working at Seneca’s CDOT. Some of the new things I am learning:

1. IRC (xChat),
2. JavaScript on Node.js,
3. Python,
4. Sublime Text.

I am also deepening my knowledge and continuing developing my skills in:

1. Linux
2. Git

* * *

The following are problems and solutions I had this week:

Question:

How do I check who is set as the user on Git?

Answer:

$ git config user.name

Similarly, to check the value of  the user.email key:

$ git config user.email

* * *

Problem:

When I clone a project, the file does not have write-permission, it’s read-only and I can’t save any changes.

Solution 01:

use the umask utility.

Solution 02:

check if you are added to the root group:

# vi /etc/group

if you are not, add yourself like this:

# usermod -a -G root cdot_igor

usemod: user(account) modify

-a: append user to the supplementary group

-G: group

root: root group

cdot_igor: the user’s name

# yum update

to download and install all updates

Loaded plugins: langpacks, presto, refresh-packagekit
You need to be root to perform this command.
$ git clone https://github.com/igoryen/Test.git testing2

    cloning project Test down to directory “testing2”

Cloning into 'testing2'...
remote: Counting objects: 6, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 6 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (6/6), done.

* * *

Question:

How do I install IRC on Windows?

Answer:

xChat -> Network List -> Networks: Mozilla -> Edit -> Servers for Mozilla: irc.mozilla.org

Your details: Use global user information

Connecting: Auto connect to this network at Startup

Character set: UTF-8

* * *

Question:

What is Heroku?

Answer:

Heroku is a cloud platform as a service (PaaS) supporting several programming languages. Heroku is owned by Salesforce.com.[1] Heroku, one of the first cloud platforms, has been in development since June 2007, when it supported only the Ruby programming language, but has since added support for Java, Node.js, Scala, Clojure and Python and (undocumented) PHP. The base operating system is Debian or, in the newest stack, the Debian-based Ubuntu.[2]

Source: http://en.wikipedia.org/wiki/Heroku

* * *

Question:

What is VNC?

Answer:

In computing, Virtual Network Computing (VNC) is a graphical desktop sharing system that uses the Remote Frame Buffer protocol (RFB) to remotely control another computer. It transmits the keyboard and mouse events from one computer to another, relaying the graphical screen updates back in the other direction, over a network.^[1]

VNC is platform-independent – a VNC viewer on one operating system may connect to a VNC server on the same or any other operating system. There are clients and servers for many GUI-based operating systems and for Java. Multiple clients may connect to a VNC server at the same time. Popular uses for this technology include remote technical support and accessing files on one’s work computer from one’s home computer, or vice versa.

Source: http://en.wikipedia.org/wiki/Virtual_Network_Computing

* * *

A refresher on Linux permissions:

2^2   2^1    2^0
4      2      1
r      w      x
----------------
0      0      0    0 + 0 + 0 = 0  ---
----------------
0      0      1    0 + 0 + 1 = 1  --x
----------------
0      1      0    0 + 2 + 0 = 2  -w-
----------------
0      1      1    0 + 2 + 1 = 3  -wx
----------------
1      0      0    4 + 0 + 0 = 4  r--
----------------
1      0      1    4 + 0 + 1 = 5  r-x
----------------
1      1      0    4 + 2 + 0 = 6  rw-
----------------
1      1      1    4 + 2 + 1 = 7  rwx

Umask

If your umask is 022, then the system does the following subtractions:

 7   7   7    
-   -   -  
 0   2   2
__________

if it’s a directory, then the permissions of the new directory will be:

 7   5   5
Else, if it's a file, then subtract an additional decimal 1, and the resultant permissions of the new file will be:  
 6   4   4

* * *

Question:

Do I need to install an antivirus on the Windows in the Virtual Machine on my Fedora?

Answer:

Not really, because Fedora and Windows are like two separate computers, two separate hard drives, so if one gets infected it the other will not unless the two are on a network.

* * *

Question:

How do I change the size of the buffer in the terminal?

Asnwer:

Edit > Profile References > Scrolling > Scrollback: Unlimited.

* * *

Question:

What is the difference between synchronous code and asynchronous code in Java Script?

Answer:

An example of synchronous code:

var result = database.query("SELECT * FROM hugetable");
console.log("Hello World");

The disadvantage of synchronous code is that we it makes you first wait for  database.query() to directly return a result to you (which could take a long time), and only THEN to call console.log().

On the other hand, the asynchronous code exemplified below –

database.query("SELECT * FROM hugetable", function(rows) {
  var result = rows;
});
console.log("Hello World");

– does not make you wait for a result from database.query(). This code arranges for the result to be passed to a second parameter – an anonymous function. Thus console.log() is executed immediately. After that Node.js enters the event loop, which allows for event-driven, asynchronous callbacks.

One of the limitations of this execution model:

Here Node.js is just one single process. It can run on only one single CPU core.

It’s been a pretty hectic week getting settled, setting up work environments, and especially learning how to use this Mac.

I spent the majority of my first day sifting through the processing.js reference here:

http://processingjs.org/reference/

Using the pjs preload directive was my first block. Apparenty you can’t do:

/*@pjs preload="imagename.png" */ 
/*@pjs preload="image2name.png" */

After spending some time in agony trying to figure out why the images weren’t being loaded, since it doesn’t output a error to the console, I finally got it working like this:

/*@pjs preload= "imagename.png,
                "image2name.png"      */

After I got past that, everything fell into place and my processing.js sketch actually worked.

A much bigger problem soon appeared however…the art assets from the original game were no longer available.

Of course there is the option of opening Flash and isolating each asset in order to be exported as a viable filetype, but that would be EXTREMELY tedious.

Hopefully a better solution presents itself, as I’d prefer to avoid such a daunting ordeal.

It is a challenging job to jump into the Big Blue Button Project for a student with limited knowledge and related experience. BigBlueButton is an open source web conferencing system built on several open source components to create an integrated solution that runs on Mac, Unix, and PC computers.

There are over fourteen open source components which includes Ubuntu, Flex SDK, Ghostscript, Grails, nginx “engine x”, Red5, Apache Tomcat, OpenOffice.org, FreeSWITCH, Redis, and MySQL etc. Most of those components are pretty new for me. Anyway, I must work hard to dig into it.

First thing I have done so far is to reformat my computer. I installed Windows 7 OS and VMware Player with Ubuntu 10.04. Then I installed BigBlueButton 0.81 on my virtual machine in order to get familiar with this amazing web conferencing system. Through the Demo meeting, I got the opportunity to play with the system.

After I have a Working BigBlueButton Server, I setup a Development Environment
by forking source code from bigbluebutton master repository and subscribing 3 Google groups such as bigbluebutton-dev.

Now it’s time to rock and roll. I need to study Java, JSP, Flash, XML, JQuery and a bunch of other new knowledge in order to become a qualified BigBlueButton developer and contribute as much as possible in the future.

Who am I?

first of all, let me introduce myself. My name is Ali Al Dallal, and I was born in Iraq, but I was raise in Thailand and live there for 18 years.

How did I became a programmer?

This is a bit long story, but I will make it short and I hope that it will make sense to you.
First, when in 1995 my father had an idea to open up some coffee shop in Bangkok, Thailand and having a couple of computer for the customer to use it, and he needs someone to take care of the maintaining of the computers and that’s how I became a programmer…… Wait what!?

No, I was just kidding, at that time I was just getting to have an interest of learning to use the computer, but of course not just the regular way of using the computer to browse or playing game.
I did learn how to build my very first computer by purchase all the different part and did everything myself when I was  10 years old. It might sound like nothing to do with programming but more into the hardware stuff, but that is how I start getting into it. So…. really at the age of 15 is where I really get to learn how to program my very first website for my school in Thailand, and that is my passionate to the programming field.

So, really when did I or when can I call myself a programmer? It is when I get into Seneca College @york I’m currently a 6th semester student for Computer Programming and Analysis study at Seneca College.

What programming languages that I have learned so far?

First of all, let me tell you this is not my resume, but it is just to tell you what I have learn from Seneca College and all of these are the languages that I really like to program.

I will list them in the order of the most I enjoyed to the least, but the least doesn’t mean I don’t like it though.

• PHP
  JavaScript
  Java
  C
  C++
  HTML
  CSS
  Scripting
  RPGLE
  CLLE
  CMD
  COBOL

There are many more, but this is the main languages that I can think of at the time I’m writing this.

How did I end up with CDOT?

Here come the most interesting question.

First what is CDOT stand for?
Centre for Development of Open Technology

How did I end up working at CDOT?

I’m currently doing my Co-op term with Seneca College, and I did many interviews with many other company such as CIBC, MPAC and few others, but really I choose to work with CDOT because I wanted to learn something new and challenge to my, as I have dream about working in an open-source environment. This is really the best decision that I have made because of what? now I will go in detail of my first week experience with CDOT.

First week experience with CDOT.

First, what am I doing here at CDOT? Well obviously I’m here to do something which is related to my program and that is programming, but what really I’m currently working on here?

I don’t know if I can go into detail of what I’m doing or working on at CDOT as this is my first week, but here is some detail of my work plan.

I’m assign to work on the project called “Webmaker” it’s something cool that you might want to check out and here is the link http://webmaker.org/, so at this moment I’m learning a bunch of stuff in order to get my hands on to the real hard stuff, but before that I have to learn some of the very important stuff that I have never learn from my program at Seneca.

I’m currently learning about

• irc – http://zenit.senecac.on.ca/wiki/index.php/Irc
• git/github – http://git-scm.com/book
• node.js – http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js
• Express – http://expressjs.com/guide.html
• Webmaker – http://webmaker.org/
• Open source – http://sedgestuff.wordpress.com/2013/04/23/welcome-to-open-source-development-a-students-perspective/

Sound cool right? I really enjoyed learning all these new stuff, but I have a lot more to learn and this is the very beginning for me.

What I have done so far on my first week?

I can’t say I have done much this week since it is my very first time working in an open-source environment which it means I have to learn a lot, and one of the challenge I’m facing is to get on track, so that I can contribute more to the project, but hey…. I have contribute my first patch to the mozilla app already. Check out my very first patch that I have done on my github here is the link.

So what is my plan for the upcoming week?

I’m going to continue learning on the advance JavaScript, node.js and express.js and trying as hard as I can to learn all the stuff which sound very challenging to me, but this is what I’m here for. I’m here to take this challenge and I shall be succeed one day!.

The post My first week at The Seneca Centre for Development of Open Technology (CDOT) appeared first on Ali Al Dallal's Blog.

For summer 2013 I have joined the team at Seneca College’s Centre for Development of Open Technology (CDOT) on a part-time basis to port over and update a Flash-based learning game to HTML5.

My first week has been mainly about setting up my workstation and getting to know the CDOT environment, but I  also sat down with my team and threw around some game design ideas to modernize the rather outdated Flash game.

I am looking forward to working at CDOT and developing a more robust HTML5 game that helps people learn math in a fun and intuitive way.

It’s been a few weeks now, and I’m finally getting comfortable with how Bugzilla fits into the Webmaker team’s workflow.  To my surprise (but probably not to yours), it ended up playing a central role.

What is a bug?

First thing to do if you’re working with the Bugzilla system is to understand what a bug isn’t.

Society at large considers a bug to be a “bug-in-the-system”, or a kind of massive technical glitch – the kind that ruins marriages, abuses kittens and generally causes wide-scale havoc for everyone.  Mozilla, and Bugzilla, by comparison, consider bugs to be synonymous with tasks or problems-to-be-solved.  This is quite a distinction!  It was only when I started considering bugs to be tasks needing completion that I understood the system we use.

Why do we use them?

Considering the nature of open-source development at Mozilla, it makes sense to have a centralized way of tracking work.  It’s a key tool for accountability, and for posterior.  Need to find out where that pesky commit came from?  Want to find that obscure technical reference tucked away in a discussion about the work of yore?  Bugs my friend!

Bugs.

Yeah, I stole the idea from cracked.com. Wanna fight about it?!

Wanna know what to do today?  Check the bugs!  Wanna know what other people are doing today? Check the bugs!  Finished some work and want others to know about it? Bugs bugs bugs bugs bugs.  Get it yet?

But how to use them…

If you are assigned to an existing bug, it makes the workflow quite simple.  Bugs will have (ideally) all of the information you need to tackle the task they represent right in their description, and in the discussion surrounding it.  So…

Step 1: Find it on Bugzilla

In this example, I’m going to be working with bug 869592.  The first section of an open bug (when you have proper permissions) will look like this:

Immediately, there are a few pieces of useful information.  The title of the bug gives a quick overview of the work to be completed, while the information along the right hand side tells you who filed it and when.

Things get more interesting on the left side of this section where you can see a bunch of useful things including:

The bug’s current status, search keywords and which product it is focused on

and…

Who it’s assigned to, which bugs need to be finished before work can begin, and which bugs it blocks from completion

Step 2: Gather Information

This is the what phase of the workflow.  You have the bug in front of you, so how does it help?  Here’s what the second section of the page will look like:

Comments and comments and comments an- BUGS!

A few things questions to ask yourself:

1. Does the description (the first comment box on the page) give me the information I need to get started doing the work?
2. Are there any attachements (supporting documents/links) that I need to check out?

If the answer to number one is no, resist the urge to ask the question on the bug by posting a comment.  This isn’t a forum: you aren’t engaging in a back and forth conversation – at least, not principally.  Instead, if you have a question, visit the #webmaker channel (or whichever one is appropriate) on Mozilla’s IRC server and ask it there.  If it’s clarification you’re needing, this is the best way to get it.

On the other hand, if the question is critical to the bug itself, still ask it on IRC! Then record the answer in the bug afterwards.  This leaves the bug as a record of important moments in the completion of the task, rather than a message board to post on.  Looking back, it will be far more useful this way.

Step 3: Getting work reviewed

So now you’re done.  Or at least, you THINK you’re done.  Unless you’re one of the supervisors of the project, you don’t get to make that claim until you’ve had at least one person look your work over and give it the acclaimed R+ OF EXCELLENCE!! 

The Mozilla review process ensures consistency and quality in our work – which is important for open-source projects to be taken seriously.  First, figure out what you want someone to review.  In the case of this example bug, I wrote code that needed to be merged into the master Mozilla repository for the project.  So, I made a pull request on github to be reviewed by someone with more experience.

To attach it to the bug, you’ll need to click on Add an attachement:

See the link? It’s in purple

Then, you’ll be presented with a screen and the following form components:

Paste a link here, or click “attach a file” to… well, you know.

Keep it as descriptive as possible

Now you need to decide who should review this attachement for the bug.  When in doubt, ask around.

 For giggles (tee-hee!) I’ll be flagging myself by selecting the “?” and then typing a tag I gave my name in my profile:

Aren’t I helpful for volunteering?

Clicking my name assigns me to be the reviewer of the attachement.

Step 4: Rinse and repeat

Eventually, your reviewer will change that “?“ to a “-“, and then, eventually, to a “+” indicating you’re good to finalize your work (merge pull requests, close the bug etc.)

Speaking of which…

Step 5: Closing your bug

All finished? Good.  Go to the bug’s main page, scroll to the bottom and adjust Status to Resolved/Fixed. Like so:

If “FIXED” doesn’t immediately appear, you don’t have the proper permissions to close a bug.  If that’s intentional, fine.  Otherwise, speak to someone on IRC to get it resolved.

And voila!  Bug closed.  Or squished, as I like to imagine it as…

Once a month I archive my Apache logs. Which involves downloading them from the server and analysing them a little.

This month (last month actually, I am slow with my blogging) there was something obviously unusual from the beginning: instead of the typical six or seven logrotated 50MB access logs I had 15.

While I did hope for a couple of seconds that all of a sudden the popularity of one of my projcts doubled – I suspected immediately that the extra logs were full of bad rather than good things.

And so they were! I opened one of the middle files, access_log.07 and found many many lines like this:

178.65.217.96 – - [24/Mar/2013:04:40:09 -0400] “GET /isomaster/releases/isomaster-1.3w-installer.exe HTTP/1.1″ 404 3121 “-” “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)”
77.35.44.146 – - [24/Mar/2013:04:40:10 -0400] “GET /isomaster/releases/isomaster-1.3w-installer.exe HTTP/1.1″ 404 3121 “-” “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)”
94.51.3.138 – - [24/Mar/2013:04:40:10 -0400] “GET /isomaster/releases/isomaster-1.3w-installer.exe HTTP/1.1″ 404 3121 “-” “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)”
178.65.217.96 – - [24/Mar/2013:04:40:10 -0400] “GET /isomaster/releases/isomaster-1.3w-installer.exe HTTP/1.1″ 404 3121 “-” “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)”
77.35.44.146 – - [24/Mar/2013:04:40:11 -0400] “GET /isomaster/releases/isomaster-1.3w-installer.exe HTTP/1.1″ 404 3121 “-” “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)”

Yep, that’s 3 requests per second. And how long has it been happening? Some quick grep commands found that it started on “21 Mar 08:01:11″ and ended on “1 Apr 14:36:26″, that’s 12 days of constant hammering!

The file the requests are for has been removed months ago, I got tired of dealing with the windows version of ISO Master, so my first thought was that this was someone’s broken script that was supposed to download the latest version or something, but then I noticed that the IPs are different. Note that even in the random 5 lines I pasted in above the requests are coming from 3 different IPs!

Sure is starting to smell like a DDOS attack, but why? Who cares enough about my server, or about me to bother wasting valuable botnet nodes on it?

Let’s do some more grep magic, this attack:

• | wc -l: Made a total of 2.6 million requests, that’s 260 thousand requests per day.
• | cut -f 1 -d’ ‘ | sort | uniq | wc -l: Used 1183 unique machines (or at least IP addresses).
• | cut -f 1 -d’ ‘ | sort | uniq -c | sort -b -g | tail -20: Had these 20 worst offenders, check out that last one, two hundred and seventy thousand requests!

24209 46.41.102.187
33104 95.27.161.96
34276 109.201.122.167
35827 178.159.30.31
37249 109.201.103.230
41455 91.124.244.192
41603 176.96.64.243
42493 109.201.119.242
43714 158.46.46.195
47652 95.106.16.222
54098 178.65.217.96
59760 37.229.68.141
67490 188.122.249.84
67596 46.118.177.113
68509 5.142.224.71
107007 178.213.194.220
109235 92.240.209.14
183352 46.185.61.81
197865 109.185.126.177
273314 5.35.29.186

John recently told me that you can use the host command to do reverse DNS lookups, and I did a few, but didn’t record the results, though I remember that 2 out of 3 were russian. Let’s try again now (do you like my mad commandline skills? :))

for IP in `grep ‘/isomaster/releases/isomaster-1.3w-installer.exe’ 2011-mar-access_log | cut -f 1 -d’ ‘ | sort | uniq -c | sort -b -g | tail -20 | sed ‘s/ *//’ | cut -f 2 -d’ ‘`; do host $IP; done

187.102.41.46.in-addr.arpa domain name pointer 187.102.41.46.donpac.ru.
96.161.27.95.in-addr.arpa domain name pointer 95-27-161-96.broadband.corbina.ru.
Host 167.122.201.109.in-addr.arpa. not found: 3(NXDOMAIN)
31.30.159.178.in-addr.arpa domain name pointer peer31-30-159-178.ll.magnitogorsk.multinex.ru.
Host 230.103.201.109.in-addr.arpa. not found: 3(NXDOMAIN)
192.244.124.91.in-addr.arpa domain name pointer 192-244-124-91.pool.ukrtel.net.
Host 243.64.96.176.in-addr.arpa. not found: 3(NXDOMAIN)
Host 242.119.201.109.in-addr.arpa. not found: 3(NXDOMAIN)
Host 195.46.46.158.in-addr.arpa. not found: 3(NXDOMAIN)
Host 222.16.106.95.in-addr.arpa. not found: 3(NXDOMAIN)
96.217.65.178.in-addr.arpa domain name pointer pppoe.178-65-217-96.dynamic.avangarddsl.ru.
141.68.229.37.in-addr.arpa domain name pointer 37-229-68-141-broadband.kyivstar.net.
84.249.122.188.in-addr.arpa domain name pointer 188-122-249-84.clients.tlt.100megabit.ru.
113.177.118.46.in-addr.arpa domain name pointer SOL-FTTB.113.177.118.46.sovam.net.ua.
Host 71.224.142.5.in-addr.arpa. not found: 3(NXDOMAIN)
Host 220.194.213.178.in-addr.arpa. not found: 3(NXDOMAIN)
Host 14.209.240.92.in-addr.arpa. not found: 3(NXDOMAIN)
81.61.185.46.in-addr.arpa domain name pointer 46-185-61-81-sum.broadband.kyivstar.net.
177.126.185.109.in-addr.arpa domain name pointer host-static-109-185-126-177.moldtelecom.md.
Host 186.29.35.5.in-addr.arpa. not found: 3(NXDOMAIN)

Some of the hosts are no longer online, but pretty much every other one is either from Russia or Ukraine (except the one from Moldova). Interesting. Actually they are not offline, they just don’t have reverse DNS working. The biggest one I found via whois (thank you Gnome Network Tools) has an address and everything:

address:        LLC “Multiscan”
address:        I.Lukyanova
address:        ul. Sokolova, 8
address:        141090 Yubileynyy, Moscow Region
address:        RUSSIAN FEDERATION
phone:          +74959743623
fax-no:         +74957555344

Hm, suspicious looking building, it’s too nice for where it is:

I don’t recall having any enemies back home, in fact I remember eastern europe with fondness. So my guess is this had nothing to do with me (since noone contacted me about it) and is rather some practice or testrun for something or someone or another.

I won’t be able to figure out much more than that (cause I’ll be busy with other things), oh well, it was an interesting experience and I’m quite smug about that my server took it so well that I haven’t even noticed the attack during the 10 days it was going on. And I use this server all day long! Sackware rocks.

Finally, I am back in action with a working server, a functional dev environment, a clean branch that’s been synced up with the BigBlueButton master, and I can get to work on the accessibility concerns brought up before the Ottawa trip. It’s been a long time in coming, you guys.

EDIT: Great googaly moogaly, it is good to be accomplishing things again.

This week, one of my goals was to find a way to make note-taking a fire-and-forget process.  That is, I wanted a way to quickly jot down pieces of information without worrying about the organization of my notes.

Evernote, a free app for most operating systems and devices, is a cloud service that syncs tasks, notes, pictures, articles and more between devices associated with it.   Here’s how I decided to use it as a solution for my note-taking dilemma.

Setting up Evernote

…is easy as pie through the App store.  A quick search will find it:

After installing and creating a user account, you’ll be  introduced to a useful feature.  Pressing Control + Command + N brings up a fresh note at any time:

Better yet, the note will keep the things you write in memory until you choose to save it.  Because notes can be searched (as you’ll see soon), I’ll tag this one with something I can remember later:

When I save this note later, I’ll be able to use the Evernote client to find it:

Evernote will cleverly display the notes that match the term, and will show the most recent note with the terms highlighted, like so:

The uses for it are pretty varied, and there is a suite of apps to make Evernote more useful. Instead of an app store, they have a tongue-in-cheek repository called The Trunk.

On your devices

Any computer you have will be able to sync with your Evernote account, including Android and Apple smartphones & tablets.  Not a bad deal!  You can clip articles and pages from the web, make task lists and more.  Used to its limits, this tool kicks butt!

This blog is going to keep track of what I have done and what I will do in open source development. On May 06, 2013, I was hired by CDOT to work on the Bigbluebutton project which is supervised by Fardad Soleimanloo who is my C++ professor. Big Blue Button is an open source web conferencing system developed primarily for distance education.

One of the biggest issues we have had in our work here at CDOT on the BigBlueButton team is proper management of git branches. It has never been fully clear what kind of process we should be following when creating branches, but hopefully I can lay out what has worked for me for awhile now and stop more issues from appearing.

For the purposes of this blog “upstream” refers to this repository, https://github.com/bigbluebutton/bigbluebutton, and “origin” refers to this repository, https://github.com/SenecaCDOT-BigBlueButton/bigbluebutton. Also, as a general rule none of my commits are ever pushed or merged into the Seneca master branch. The master branch should just serve as a mirror to the upstream master branch.

Creating your remote reference
The first thing I do when I clone the Seneca repo is set up a remote reference with git to “https://github.com/bigbluebutton/bigbluebutton.git&#8221; and name it “upstream”. You can use the following command to achieve this:
git remote add upstream https://github.com/bigbluebutton/bigbluebutton.git

Creating your new branch
When I want to actually make a change, be it for a feature or bug fix, the first thing I do is create a branch for the specific issue I am trying to solve.
git checkout -b <branch-name> <parent-branch>
If I am trying to make a general change, such as fixing the displayed chat times in the client, I will choose a branch name like “fix-chat-times” and base the new branch off of the upstream master branch by using “upstream/master” for the parent branch.

Creating your commit
Once you have reached a natural stopping point (ex. finished the feature) you now have to commit and push your changes to github. The first thing you want to do is verify that only the proper files have been edited. You can do this by using “git status”. It will display all of the files that have been created, modified, or deleted. You can now use “git add(or rm) <file-path>” to include the relevant files to your commit. If there are modified files that you want to revert back to their original contents you can use “git checkout — <file-path>” to get rid of your local changes. Once you thing you have the required files added to your commit you should verify them again with a “git status”. If everything is correct you can now create your commit with “git commit -m “<commit-message>”.

Pushing your commits
Working on your local machine is fine, but eventually you will want to push your local commits to github for safekeeping. In order to push your commits you your remote repository you must tell git two things. The first is what repo to push to, in our case this is “origin”. The second is what name you want to use for the remote branch, for the purposes of this document we will use the same name for both the local and remote branches. The command to push is as follows:
git push -u origin <branch-name>
The “-u” option tells git to link the branches so that you can just do “git push” in the future without specifically referencing where it should be pushed to.

Merging upstream changes
If you notice on github that someone has pushed a commit to upstream/master that you need for your work you will want to be able to include those commits in your work. The first thing you need to do is make git update its local copy of upstream and to accomplish that you need to run the command git fetch upstream. You now need to merge in the changes. First, make sure that you are on the branch that you want to merge into. Second, merge by using the command git merge upstream/master.
If git tells you that there were conflicts in the merge you will need to manually resolve them. To do this you can use “git status” to see the conflicting files and deal with them. Once you have resolved a file use “git add” to apply the changes to the commit. Once all of the issues have been resolved you should commit your changes.

Submitting a pull request
Once you have your feature or bug fix finished and pushed to a github branch you need to submit a pull request so your changes can be merged in. One of the most important things to remember is that your pull request should be able to merge cleanly. In order to make sure this is the case you should fetch and merge any recent changes before submitting your pull request. When submitting your request make sure to include all of the relevant information about the changes included in your accompanying commit message.

Finishing up
You can now safely delete your branch from github or leave it there to stagnate.

Alright, so today I start testing the 64-bit installation instructions from here (installation) and here (dev environment). With any luck, I’ll have a functional environment by lunchtime and can start to tackle the accessibility concerns that were pointed out in some feedback before the Ottawa trip.

EDIT: I’m unsure of the cause, but when installing from the “deb http://ubuntu.bigbluebutton.org/bbb0_8-64 bigbluebutton-lucid main” package I get a broken packages error from sudo apt-get install bigbluebutton.

Error text: The following packages have unmet dependencies:
bigbluebutton: Depends: bbb-config but it is not going to be installed
E: Broken packages

EDIT: Following the rabbit-hole (by trying to manually install bbb-config, and then the package that was breaking bbb-config, et cetera) I tracked it back to a problem with the OpenOffice packages in Step 2: Installing LibreOffice. Here’s the error text:
firstuser@ubuntu:~$ sudo dpkg -i openoffice.org_1.0.4_all.deb
dpkg: regarding openoffice.org_1.0.4_all.deb containing openoffice.org:
openoffice.org-thesaurus-en-us conflicts with openoffice.org (<< 1.9)
openoffice.org (version 1.0.4) is to be installed.
dpkg: error processing openoffice.org_1.0.4_all.deb (–install):
conflicting packages – not installing openoffice.org
Errors were encountered while processing:
openoffice.org_1.0.4_all.deb

Now, I’m pretty sure I could solve this by completely wiping OpenOffice from my server and starting again. But, if that message means what I think it does, than the OS updates that are included in sudo apt-get dist-upgrade (immediately prior to Step 2) will always break the installation unless this is remedied; I’m assuming, of course, that Ubuntu 10.04 64-bit ships with some variety of OpenOffice.

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Alas, I must bid farewell to my old desk at CDOT. There’s been some restructuring of the workspaces, and I’ve been taken away from my window onto the vestibule near the mannequin and moved to… Well, what seems like a slightly nicer area, really. The new keyboard tray is going to take some getting used to, I suppose.

Anyway, down to business. Word has come down the line that Fred would like someone to beta-test the new BBB 64-bit dev environment setup instructions, and considering my current dev environment is non-functional, I thought I’d step up to the plate. So I’ll start up a new Ubuntu VM tonight, and tomorrow morning go through the new setup steps and report on my findings.

Here is one of the applications I was talking about in the last post. This app prototype was created by our team specifically for Ontario Center of Excellence contest. It took us around 3 weeks to develop it. No more words, everything else is in the video. Enjoy

It’s been a long time without a blog post here, but I’m back for more!

With all the rush due to the end of the semester and the need to find a place to work for the summer, I was out of time due to my poor time management and my over sleeping habit combined with this \/

Every night..

State of WebVTT’s test

On the second half of April, I was able to finish TextTrackCue and TextTrackList tests (along with HTMLTrackElement that was finished already), making them available to be integrated to the tree. On the next weeks, I’ll be working on analyzing those tests and reporting eventual bugs found. Considering those as done, the classes that still haven’t been landed into the tree are:

• TextTrackCueList
• TextTrack

As Edsger Dijkstra says, “If debugging is the process of removing bugs, then programming must be the process of putting them in.”

What I’ve been doing and what will I do

After talking to a friend, we were discussing what would we do after we finish University (we are both studying together in Brazil), and after a long talk debating whether we would put in practice ideas we had back then when we were freshman or try something else. After my whole experience in Canada (8 months so far.. it flew so fast), all the opportunities, all the great people I’ve worked with, all the friends I’ve made (not that much hehe) I’m able to say that I envision my future here. Not only in Canada, but pursuing further collaboration to Mozilla. Lately, my interest for B2G has grown due to the fact that it will launch in Brazil first combined to how easily I can get myself involved with areas such as L10N-pt-BR and others.

Being a big fan of HTML5 and Javascript, B2G has a lot of challenges to offer and ideas to be cultivated. This past week I translated the following articles to pt-BR:

• How To Use The Call Log
• How to make a call
• Add Your Contacts On Firefox OS
• Using The SMS Application On Firefox OS
• Listen to the radio on Firefox OS

For those who speak portuguese and would like to get involved to localization and other subjects that involves the portuguese-BR language, you should check out #mozilla-br  channel on IRC and https://support.mozilla.org/pt-BR/kb/como-ajudar-traduzir-artigos-do-firefox-os

That’s it for today people, stay perky!

Hi!  If you’re like I was a couple of weeks ago, you have very little knowledge about, or experience with, how Open-Source development really works.

I mean, really works!

Even if you aren’t completely new to the concepts, you may find this blog helpful.  I’ll be overviewing the ideas behind the movement in this article, and as I post more about the workflow and tools needed to succeed in an open-source environment, you will find them linked in this paragraph and the following lists:

TL;DR

Open-Source development:

1. …relies on clear, effective (location agnostic; read digital) communication
2. …is iterative, preferring incremental improvement over initial polish
3. …directs conversations and meetings into the open, forcing individual accountability
4. …is decentralized, meaning we work with people all over the world! (see point 1)
5. …is distributed, meaning different people are working on different tiny parts of the same project all the time.
6. …is interconnected, meaning what other people’s contributions directly affect what we are working on, sometimes on a minute-by-minute basis
7. …is inherently difficult, requiring a diverse interpersonal and technical skillset
8. …is inherently rewarding, giving us skills, experience and a portfolio you would never get elsewhere

Open-Source Development requires:

1. Excellent time management
2. Flexibility, for when requirements rapidly and successively change (and they will, even as you work)
3. Courage, to ask the questions you need answered to move forward
4. Focus, because there’s a lot to learn.
5. A suite of productivity tools, because we’re only human

Now for the full version:

Free as in freedom.  As in free speech. As in free hugs.  As in…

Open-source is really a philosophy first. And, as with any system built on a philosophy, it’s much easier to understand the system if you can wrap your head around the principals it rests on.  The core open-source principals seem to be expressed in slightly different terms depending on where you look.  I’ll be exploring them [DISCLAIMER: I don't know it all!] on my own terms, and I think they boil down like this:

1. The Principle of Purpose (or, Community)
2. The Principle of Openness (or, Transparency)
   
3. The Principle of Contribution (or, Meritocracy)
4. The Principle of Participation (or, Collaboration)
5. The Principle of Iteration (or, Rapid Prototyping)

Each of these builds on the idea that came before it, and I’ll explore each of these in this post.  Remember that these are just my thoughts on the subject, so feel free to comment if you think I’ve overlooked (or misunderstood) something.

The Principle of Purpose (or, Community)

At its core, open-source is about achieving a goal together.  But in order for us to do it together, there has to be a goal we all can agree is worthwhile. This, in turn, leads to the initiatives that become open-source projects.  Each project’s goal resolves issues the community suffers from.  So, as common needs arise, the open-source response is: “Let’s fix the problem together, because together we can accomplish more!“

The Principle of Openness (or, Transparency)

Hand-in-hand with community driven action is the need for every member of that community to be able to understand everything about an open-source project if they have the time – from its deadlines, to the technology being used and even who is working on the project.  Without this level of transparency, people are unable to contribute fully because they end up missing information that, if they had possessed it, might have allowed them to contribute even more!

Openness leaves us vulnerable, with all of our mistakes and weaknesses on display for everyone involved to see. It demands a level of integrity and honesty that is difficult in modern life, but ultimately servers a greater purpose in a team.  After all, if everyone knows our weaknesses, they can then use us to our strengths.  (And accomplish more!  A pattern emerges…)

The Principle of Contribution (or, Meritocracy)

I mentioned integrity, and honesty, and strengths and weaknesses and all sorts of character traits.  I did this because, at its core, open-source only respects one thing: competency.  If you can do a job, that no one else can do, you should do it.  If you can’t do a job, then you should pass it on.  If you can but you need help, you should be honest about that, and see what people with more experience than you will suggest.  These are the common-sense consequences of focusing purely on the final result, and it tells us two things:

1. Honesty about your level of ability is never punished, and
2. Those that contribute to what needed to be done are the ones that get the credit and the responsibility.

Why those conclusions? The first one was described in the last principle but appears again because part of a meritocracy is sticking to your strengths (areas of competence).  This says nothing about our ability to learn new skills, but rather that if we can’t do the job, and someone else can, we should let them do it and be honest about it.  The second point is important, because it keeps our egos in check.

If you couldn’t/didn’t/wouldn’t contribute to something, your name simply will not be on it (credit) and you shouldn’t expect to be consulted about changes or congratulated on a job well done (responsibility).  The dark side is, those that do things have to clean up the messes they made if things go wrong.  But thats a topic that should be saved for the last point.

The Principle of Participation (or, Collaboration)

With all this talk about ability, and a brutal respect for competency, you might think that open-source development is elitist and exclusive – but you couldn’t be further from the truth.  The fact is, that when a group of people work towards a goal according to the last 3 principles, a fourth naturally emerges: that no one is without value, and without the ability to contribute.  In the end, there’s always something that can be done, no matter what your ability is.  If your motivation is to help and not to get bragging rights, then you’ll always be a valuable (and valued) member of any open-source community.

Let me give you an example:

A man wants to build himself a house.  He is very good at coming up with crafty ways of solving mechanical problems, and so has come up with a blueprint.  However, he is frail and unable to build any of it himself.  At the local church/community center, he asks for help on this project and receives a flood of support.  Before he knows it, he has 10 people ready to help him, all asking what they should be doing.

If it was your house, how would you decide on each person’s role in the process?  Chances are you would find out what everyone’s strengths and weaknesses were, and assign tasks from there.  The man is good with mechanical design, so he writes the plans.  The first volunteer is excellent at managing teams of people, so the man delegates this part of the job to her.  The second volunteer is burly and strong, but not too bright.  The man, being weak and frail, is relieved and assigns him the task of hauling all the lumber they’ll need.  Eventually, the 10th volunteer says,

“I’m not very good at anything sir, I just wanted to help “

Would the man turn them away?  Would you?

In open-source, at the end of the day, the job must get done! If the person organizing the volunteers also has to write the blueprints, or the person hauling lumber also has to chop trees, the task will take longer.  But for every person without a distinct strength, there is a job that will allow others to do the job only they can do.  And that’s the point.

The Principle of Iteration (or, Rapid Prototyping)

Finally, we come to the most concrete of the principles.  This one says that a job well done doesn’t need to be well done right now.  To go back to my previous analogy, if it’s the dead of winter, the volunteers won’t be so fussed about the colour of the veneer trimmings in the man’s new kitchen.  Better to get the house up!  And veneer is so last season anyway…

When contributing to an open-source project, goals must be small and time-oriented.  Read: Deadlines! Like it or not, they’re here to stay and, secretly, deadlines are your friends.  ESPECIALLY in open-source!

Why?  Because open-source contributors don’t ever care about making something polished the first time.  Just get it done on time!  If it works properly, and doesn’t sacrifice good code for quicker delivery, it doesn’t need to have all the bells and whistles.   In a sense, the iterative process is the most helpful restriction you’ll ever run across and can be compared to a similar time-management truism: The 80% rule.

The 80% rule says that, if you’ve done roughly 80% of the work, it’s time to move on to the next task.  Clearly this is a guideline, but the point is the same.  Too much time can be wasted chasing perfection.

Get it done!

Conclusion

This should be enough to chew on for now.  Keep in mind that open-source development is not a straight-line, and can be very demanding.  To that end, as I post more content, this article will be updated.

I’m working across a lot of different repos these days, and while fixing a whitespace issue in one of my patches, I wondered if it would be possible to eliminate this altogether.

Working with git, we already have a version of what I want in terms of core.autocrlf.  You wrote this patch on Windows, I’m on OS X, and our server is Linux?  No problem, we’ll just use Unix EOLs and have git automatically manage the line endings whenever we checkout or commit.  In other words, when I checkout the code locally, I get a version of it customized to my environment.  There’s a canonical version that git will store, but every developer can have something different in their editor.

Now let’s go one step further.  Imagine you need to add the following code, as I did today:

module.exports = function( req, res ) {
  res.json({
    http: "okay"
  });
};

How many arguments can you have about how to style that code?  Come on, what would you r- in this?  “Dave, no space between `(` and `req` please;” “Dave, you need to indent with 4-spaces not 2;” “Dave, you should just put that `res.json` all on one line.”

The truth is, there’s no right answer here.  Of course there are famous examples of automatic semi-colon insertion causing havoc (`return\n{` vs. `return {`), but let’s stick with my example code for a minute.  Could we let git manage the whitespace here?  Could we, in other words, take that code above, and when I commit, actually store this:

module.exports=function(req,res){res.json({http:"okay"});};

Now imagine that I’ve got a .gitstyle file in my tree, or I’ve somehow specified config options globally, and I can tell git how to style this code again when I check it out.  Imagine you like 8-space indents and I like 2-spaces; imagine you’re allergic to spaces around arguments, and I love them; imagine your OCD demands that all variable declarations line up on the equal sign, and I’m happy to let them wind their way down my editor like a raindrop on a window.  And, imagine we can both do what we like with the same code in the same tree!  Imagine there’s no style guide, it’s easy if you try…

BUT DAVE, THIS CAN’T WORK BECAUSE <strong-reason />!!!  Sure, there’s all sorts of things to work out.  This is a thought experiment.  I’m supposed to be grading final assignments right now, and I needed to procrastinate.  But if this could work, it would be so, so useful!

Patches accepted (please use 2-space indents).

The following tests are written.

It's been a while since my last post about WebVTT. A lot has been going on since that last post in the beginning of March. The OSD team gave two presentations about WebVTT to Mozilla Toronto: one during a class visit to MoTo and another during MoTo's Open Web Open Mic event to some of the Toronto open source community. Both events were a lot of fun! I was surprised by how excited some people seemed to get when they saw WebVTT. When you work on a project, it can be hard to take a step back and see the impact your project has on others, especially when you can get so invested in said project. Good job team!

I haven't been able to spend as much time on WebVTT as I would have liked over the past month. After the push to get things working for the first Mozilla Toronto demo, I had an avalanche of final assignments fall onto me. Now that they are finally behind me, I've been able to get back into the swing of things.

Review Issues

While I've been busy with school, rillian has been working on the patch. Thanks a lot, rillian! There have been several iterations of the patch since. As always, you can see the latest updates on the Bugzilla bug. It's been reviewed quite extensively by bz and Ms2ger who brought up a few issues.

One of the issues had to do with nested templates. We were using nsTArrays like this: nsTArray<nsRefPtr<TextTrackCue>>, which reads as 'an array of nsRefPtr which refer to TextTrackCue objects.' Apparently, the >> at the very end was being interpreted as the >> operator on some older compilers. So we just added some whitespace to pad out the characters: nsTArray< nsRefPtr<TextTrackCue> >. Easy fix!

In the review, it was suggested that we convert nsAString out parameters in class getters to DOMString, a relatively new class in the Mozilla codebase. I went ahead and did this, but it was not an easy fix. In fact, it was pretty messy, and involved extracting a StringBuffer from an nsAString object and using that to set the value of the DOMString out parameter.

The code used to set getters went from this:

void GetKind(nsAString& aKind) const
{
  aKind = mKind;
}

to this:

void GetKind(DOMString& aKind) const
{
  aKind.SetStringBuffer( nsStringBuffer::FromString(mKind), mKind.Length() );
}

Yikes. That's what I call messy. To be fair, this is the only way to set the value of a DOMString from an nsString, the type used internally to store strings.

It didn't get accepted. In retrospect, it would have been easier to just adjust the internal members of the TextTrack* objects to use a DOMString rather than a nsString. Once I clarify with others that this is the best way to go about with this fix, I'll probably end up doing just that.

The first fix ended up making its way into the patch on Bugzilla. The pull request on GitHub is still open due to the DOMString issue. If you're interested in following that particular issue, you can check it out here.

Exceptions

Something I've wanted to start adding to the WebVTT DOM implementation for a while now is exception handling. Firefox's C++ code doesn't use exceptions; I'm talking about JavaScript exceptions. For instance, if one tries to use the removeCue(cue) method on a TextTrackList JavaScript object which doesn't contain cue, a NotFoundError exception should be thrown.

In order to do this, we first need to edit the WebIDL file which defines the DOM interface. We must add a [Throws] declaration in front of every method which throws an exception. For example, in TextTrack.webidl:

[Throws]
void addCue(TextTrackCue cue);
[Throws]
void removeCue(TextTrackCue cue);

By using some crazy wizardry, this creates the necessary DOM bindings to use exceptions. More specifically, it passes an ErrorResult& as the last argument to our method. We can use this object to throw exceptions.

Let's take a look at TextTrack::RemoveCue and how we can throw an exception if the cue passed as an argument is not already in the internal TextTrackList.

In our header file:

void RemoveCue(TextTrackCue& aCue,
               ErrorResult& aRv);

In the implementation file:

TextTrack::RemoveCue(TextTrackCue& aCue,
                     ErrorResult& aRv)
{
  // If the given cue is not currently listed in the
  // method's TextTrack object's text track's text
  // track list of cues, then throw a NotFoundError
  // exception and abort these steps.
  if( DoesContainCue(aCue) == false ) {
    aRv.Throw(NS_ERROR_DOM_NOT_FOUND_ERR);
    return;
  }
  // Remove cue from the method's TextTrack object's text track's text track
  // list of cues.
  mCueList->RemoveCue(aCue);
}

The generated bindings make it very easy to throw an exception. Now that an ErrorResult& is being passed to our method, we simply call Throw on the object and pass the error. One could search on MXR for the particular error macro/constant they need; luckily, bz told me which to use in #content.

Initially, I was a bit confused when trying to implement exceptions. While looking through MXR to see examples of how other classes implemented exceptions, I'd often see ErrorResult initialized as a local variable within a method. Apparently, this is only used for methods that catch exceptions. Methods that throw exceptions do it through an ErrorResult& argument passed in by the generated binding methods. Oh, you Mozilla engineers. You guys/gals are magic.

That particular pull request is still open at the time of writing. You can check out that pull request here.

"1.0"

I'm really not sure if this release can be considered a 1.0 release. The code still hasn't landed in Firefox (although it seems close). There are still things to do! Some of those things include: maintaining and using TextTracks.activeCueList, finish implementing exceptions on the rest of the TextTrack* classes, and fix all of the issues raised in the reviews done by bz and Ms2ger. Concurrently, I believe we are at the point where we can start using the MochiTests written by Marcuus and Jordan to bring other issues to light.

A big issue is the ever-shifting nature of the WebVTT spec. It seems like every week, the spec changes - and not always for the better. For instance, there are now a list of rules associated with every TextTrack that defines how the text tracks should be rendered. Also, TextTrackCue is an abstract class from which we should be creating a new object: WebVTTCue. Not all these changes make sense to me (Rules for updating cues? Why?) but I guess that is a part of the age-old rift between spec writers and implementers.

Between the spec being in flux and the other items still on my to do list, there is still quite a bit to be done before I'd be comfortable slapping the ol' 1.0 tag on. Now that school is officially complete forever, I should have much more time to spend on WebVTT.

The Middle

Speaking of school being officially done forever, this is my last official 'for school' post on my blog. This isn't the end though, not by a longshot. I'll be continuing my work on WebVTT as a volunteer. I'm excited to see what happens with the project in the coming few months!

Thanks to Humph for teaching the OSD classes to begin with. If you are a student at Seneca in CPA or BSD, do yourself a favour and take these classes. The OSD classes are the best professional options offered at Seneca, in my opinion. I'd also like to thank my OSD teammates for a crazy 8 months. We're still alive! Success!

Tomorrow is the last day for my open-source class at Seneca. So this will be the last WEBVTT post that I will make for the class, ever. It’s been a long journey since last September and we’ve made huge progress, learnt a ton, burnt out many a time, and had a great time doing it. If you are worried about no more posts on WEBVTT fear not! I’ll still be posting regularly on WEBVTT as I’ve now switched over to working on it and possibly some WebMaker stuff at CDOT for the next year. I’m really looking forward to it.

Now, lets get on with it.

WEBVTT Parser

It’s been pretty exciting around WEBVTT in the last month or so — ever since we did a presentation at Toronto Mozilla we’ve received a lot more interest. It’s a pretty cool and strange feeling to have people interested in what we’re doing. Especially with WEBVTT. It’s not very glamorous, as you can imagine. Myself and a few of my classmates also went to an “Open web open mic” night at Toronto Mozilla where we got to do another presentation and showcase WEBVTT off in a kind of science fair environment. We also got to see lots of great presentations and projects that are being worked on. It really opened my mind to what is going on in Toronto and beyond. Pretty cool stuff.

We recently got all our tests green! At that point we officially tagged a revision of the parser as version 0.4… so lots more work to do. Since then we’ve been adding more refined and atomic unit tests to the test suite. Most of them are testing our internal functions in the library. I’ve been focusing on the cue text tokenize  functions for these. Instead of passing in an entire WEBVTT file, we pass in input that it will be expected to handle and test to make sure it behaves correctly. We’ve also been solving a few of the bugs that have been found via fuzzing WEBVTT, courtesy of cdiehl and rforbes,  in our integration branch. That’s awesome — we’re getting fuzz tested on something that has not even landed in Nightly yet! Caitlin has also started to add the ones we have solved as regression tests.

Other than that not much has happened on the parser lately as we’ve all been crunching through the last assignments and exams of the semester. We’re probably going to be looking where to enhance the library in the next little while. There are some issues up on the repo right now that still need to be taken care of in regards to enhancement. So we’ll probably be tackling those first.

Gecko Integration

The other big thing we’ve been working on still is getting the parser integrated into Gecko. I’ve probably already blogged before about how we have 2 out of the 5 things we need landed in Nightly already. The last three things we need to land to get basic functionality working are the DOM classes, DOM tests, and the “parser management” code.

Moving Code from WebVTTLoadListener

Around the time of the demo it was decided that we should move the code that converts the c parser data structs to DOM classes out of the WebVTTLoadListener and just use the LoadListener for… well, listening. The LoadListener’s job should be to serve as the point of contact between Gecko and the WEBVTT parser. When it receives data it hands it to the parser and when it receives a cue it constructs a TextTrackCue and hands it to Gecko. I recently got around to that here. The TextTrackCue is the place where  the conversion code now lives. We also now lazily load the parsed WEBVTT nodes into HTMLElements when GetCueAsHTML() is called for the first time.

Properly Creating Nodes

We ran into a problem where processing cue text tags like <i>, <u>, <b>, etc, was crashing the browser. This was due to the fact that we weren’t creating the NodeInfo to be passed into the NS_NewHTMLElement() macro properly. We were just passing in HTMLTrackElement’s NodeInfo. This would cause HTMLTrackElement to be deleted when the HTMLElement was removed from the divs child list. The correct way to do this is to get HTMLTrackElement’s NodeInfoManager() and create a new NodeInfo using it.

Removing Children

We were having a bug where we weren’t removing captions from the div properly. Previously we had been looping from zero to max length of the divs children and removing at the current index. Classic for loop. I tried and tried to figure out what was going wrong and after a while I made my way over to #content to get some help. bz and Ms2ger were kind enough to help me. What I learnt from them is that removing children of a node using this method only removes every other node. This is due to the fact that when you remove a node that isn’t at the end of a list, the entire node tree is shifted down. Therefore, when we remove node at 0 node at 1 becomes node at 0, we then advance to 1 and remove node at 1 missing the node that was shifted! The first solution we thought of was to loop until length is 0 always removing at 0. However, we ended up using another solution that I would never have guessed. That is to instead call nsContentUtils::SetNodeTextContent(). This removes the tree for you and  puts in its place a TextNode. For our solution we just pass in an EmptyString() for the text.

nsINode > nsIDOMNode

The other thing they asked me to do was to change how we were appending nodes to the tree. Instead of using nsIDOMNode interface, this is a slower and more inefficient interface, we should use nsINode. Which has basically the same capabilities. We can do the exact some thing with nsINode in simpler code.

Patches

I submitted a patch tonight that has the most up to date code in it in regards to “WEBVTT parser management” in Gecko. I was hoping we could get this landed quickly, but the events of today have brought up even more work to do. First of all, the patch for DOM classes that we thought would get through pretty quickly has a lot of problems with it, and secondly, the cue text tag class to css selector mapping in Gecko is not at all as simple as I suspected it to be.

I found this out today when trying to get the CSS selectors working on the HTMLElements created from cue text tags. I had all the Gecko code working correctly, and yet the CSS selectors in my external CSS file were not affecting the captions. I went over to #content where bz and Ms2ger informed me that it was because we are constructing them as anonymous content. In other words, no external code can touch the HTMLElements we are creating, only internal code can. This wasn’t the behaviour that I thought was needed and after some discussion #whatwg’s zcorpan informed us that they need to live in a video::cue pseudo-element as part of a sub-document. So in your external CSS selectors you would put video::cue([tagname].[classname]) { }. However, bz said that in order to get a new pseudo-element we would need to do some ‘re-architecting’ of Gecko code. This immediately made me feel nauseous… just kidding, kind of.

In light of this our new goal is to get our current semi-working code into Gecko behind a pref and than iterate on it. Things will be a lot easier when we get the first code landed.

That’s about it as far as I can remember. We’ve done a lot of more little things since than as well. Head over to Mozilla’s WEBVTT repo on github to check out all the changes. And feel free to get on irc.mozilla.org #seneca to co-ordinate with us if you want to help!

Until next time.

"8. For each track track in tracks, append to cues all the cues from track's list of cues that have their text track cue active flag set."

http://dev.w3.org/html5/webvtt/#cues-with-video (April, 17, 2013)

"13. Sort the tasks in events in ascending time order (tasks with earlier times first).
Further sort tasks in events that have the same time by the relative text track cue order of the text track cues associated with these tasks."

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#list-of-newly-introduced-cues (April, 17, 2013)

"text track cue order, which is determined as follows: first group the cues by their text track, with the groups being sorted in the same order as their text tracks appear in the media element's list of text tracks; then, within each group, cues must be sorted by their start time, earliest first; then, any cues with the same start time must be sorted by their end time, latest first; and finally, any cues with identical end times must be sorted in the order they were last added to their respective text track list of cues, oldest first"

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#text-track-cue-order (April, 17, 2013)

1. start time (ascending)
2. track order (top to bottom)
3. end time (descending)
4. cue order (top to bottom)

3. Let output be an empty list of absolutely positioned CSS block boxes.

4. If the user agent is exposing a user interface for video, add to output one or more completely transparent positioned CSS block boxes that cover the same region as the user interface.

10. 12. - The children of the nodes must be wrapped in an anonymous box whose 'display' property has the value 'inline'. This is the WebVTT cue background box.

This is a really long sentence that needs to be displayed on
two lines.

Test Video CSS

#testVideo {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 640px;
 height: 480px;
}

Basic Cue Reference CSS

/* cue constants, same for every cue */
.cueBox {
 position: absolute;
 unicode-bidi: plaintext;
 font: 24px sans-serif;    /* 5vh = 24px */
 color: rgba(255,255,255,1);
 white-space: pre-line;
 
}
.cueBackgroundBox {
 display:inline;
 background: rgba(0,0,0,0.8);
}

/* cue variables, depends on cue */
#testCue {
 direction: ltr;
 writing-mode: horizontal-tb;
 left: 0px;    /* 0vw = 0px */
 top: 0px;    /* 0vh = 0px */
 width: 640px;    /* 100vw = 640px */
 text-align: center;
}

How to Setup a Sigul Client
This post will explain the process of setting up sigul clients for a working sigul setup. I have automated a portion of the tasks with a script, but I will go over both methods of manually setting up a client and the slightly more automated setup.

Quick Overview of Sigul
There are at least 3 separate computers involved in the sigul setup(server, bridge, and client should be separate computers):
1. The Sigul Server is completely cut off from all network except contact with the Sigul Bridge.
2. The Sigul Bridge allows sigul clients to connect to it, and talks to the Sigul Server for the client’s request.
3. The Sigul Client communicates with the bridge, and makes requests such as: sign this package, or list users.

If you are looking for another process of sigul:
Connection to Sigul Server/Bridge
Sigul Problems and Troubleshooting
Sigul Client – How to Sign/Testing the Client

Using a script to setup more clients
The script is in the root directory of the sigul client and must be run as root. It can be used by executing the script, and specifying a username as an argument:

/root/sigul-client-setup/setup.sh username

What Does the Script Do?
The script folder contains extra files that it copies over to the users directory.
These files include:
1. sigul client database – which already contains the bridge cert, so that you only need to add the new user cert.
2. a copy of sigulsign_unsigned.py
3. the sigul client config

These files are copied over to the /home/username/.sigul folder. Then the script generates a client cert for the user. Finally it grants the user key access, for this you need to know the passphrase for the key, and use any sigul admin account. It will also give you a warning to make sure you created a admin user on the sigul server.

Create a Admin
Login to the Sigul Server click here if you don’t know how. Once you have logged into the sigul server you need to run the add admin command:

sigul_server_add_admin

The admin name should probably match the username on the Sigul Client. Make sure that your admin users change both their admin password and passphrase after you give it to them, click here for information on how to do that.

Manual Process of Setting Up Sigul Clients
The first step is the do the above step, and Create a Admin. Look for the heading above on this page(Create a Admin) and follow the instructions.

Next give access to the key to the users:

sigul grant-key-access pidora-18 username

This process gets a little complicated because you need to use the Sigul Bridge as well. First export the CA from the Sigul Bridge, this can be done by specifying the directory of the Sigul Bridge database and the name of the CA. The Sigul Bridge database is probably kept in /var/lib/sigul.
On the Bridge:

pk12util -d [directory of database] -o sigul-ca.p12 -n [name of your CA]

Copy the output file(sigul-ca.p12) from the bridge to the clients. When the clients are setup, delete this file, as it should not exist outside the database.

Log into a client user and create a new Sigul Client database:

mkdir ~/.sigul/
certutil -d ~/.sigul/ -N

Import the CA that you copied into the client database:

pk12util -d ~/.sigul/ -i [name of CA file]

Must then modify the trust attributes of the CA and mark it as valid:

certutil -d ~/.sigul/ -M -n [name of your CA] -t CT,,

Create the client cert:

certutil -d ~/.sigul/ -S -n sigul-client-cert -s 'CN=username ' -c [name of your CA] -t u,, -v 120

The CN should match username of both sigul admin and linux user. The -S will create a cert and add it to the database. The -n is the name of the cert. The -c specifies the name of the CA. The -t u,, specifies that this is a user cert. Finally the -v means that this is valid for 120 months.

The manual setup for the client is complete, you should go here and try some of the client tests.

Connecting to the Sigul Server and Sigul Bridge
This post is used for people who need to use a sigul server and bridge that has already been set up and configured. If you are looking for ways to configure, troubleshoot, or otherwise use another part of sigul, check my other posts on sigul:
Sigul Client Setup
Sigul Client – How to Sign/Testing the Client
Sigul Problems and Troubleshooting

For security purposes the Sigul Server is completely cut off from all network services except the sigul server service. It is also running on a VM so in order to use it you must ssh with x forwarding and start it in a special way.

SSH and Virtual Machine
SSH with x forwarding:

ssh -X -C [hostname of computer with VM]

Create a script(this solves some authentication problems):

#!/bin/bash
XAUTHORITY=~/.Xauthority sudo virt-manager

From here you will have the ability to start/stop the bridge and server, along with logging in and configuring the services.

Starting the Sigul Server
Before being able to start the server you will need to enter a passphrase to use the encrypted logical volume. This LV contains the database which has the signing key.

First open the encrypted LV:

cryptsetup luksOpen /dev/fedora/sigul sigul

Next mount the mapping:

mount /dev/mapper/sigul /var/lib/sigul/

You can now start the Sigul Server:

systemctl start sigul_server.service

The logs are in:

/var/log/sigul_server.log

Starting the Sigul Bridge
There is not really anything special to do here on the bridge.
Start the Sigul Bridge:

systemctl start sigul_bridge.service

The logs are in:

/var/log/sigul_bridge.log

In this post I will talk about problems that I ran into while setting up sigul. Some of these are pretty stupid mistakes on my part, but I’m putting everything up here anyway.

Sigulsign_unsigned
When you are getting the key to place in sigulsign_unsigned.py, you run the gpg command to get it. The gpg command will output a key in UPPERCASE, change this key to lowercase or the entire process will never work.

Sigul Server and Bridge /tmp
Check how much space the bridge and server have. The server needs space equal to the largest package * 2. It needs this because it will download the package then make a second copy that is signed, delete the old one, and then transfer the signed copy to the bridge. The bridge only requires space equal to the size of the largest package. STOP you are not done, there is a trick, this space must be assigned to the /tmp directory, if it is not you will get EOF Errors all over the place. Run the df -h and check tmpfs size.

Server /tmp = largest package * 2
Bridge /tmp = largest package

You will get different EOF Errors depending on if it failed on the bridge or server, they will not be descriptive and will say something about DoubleTLS or failed on outer stream.

Verify MD5 checksum of rpm files
You must make sure the MD5 Checksum of rpm files matches the one that is inside koji’s database. So if a rpm fails for an unspecified reason make sure that the rpm checksum matches the koji db one.

Get the checksum:

rpm -Kv file.rpm

Get the koji db checksum:

psql -c "select payload_hash from rpminfo where rpmname = 'name_of_rpm';" | cat

If they are not equal to each other then you must figure out if the rpm is corrupt, the koji db is incorrect, and make sure that these 2 things match. When they match sigulsign_unsigned.py will work without errors(hopefully).

Connections timing out
This showed up when we tried to go from working test sign runs with a small amount of packages to a full sign run with –inherit and lots of packages. Instead of working it failed on all packages. What needs to be done is, modify the file:

/usr/lib/python2.7/site-packages/koji/ssl/SSLConnection.py

change the DEFAULT_TIMEOUT variable to something higher like 60 or even 300. After this it should stop the timeout issues.

Unsupported format of database
This sometimes shows up in Sigul while you are trying to create databases, or access them. This usually means you forgot something basic, such as the directory is wrong, bad permissions, or does not exist. Make sure it does exist and everything is right.

How to Sign Packages
This post is to explain the process of signing packages on sigul with a sigul client and how to test your configuration. To setup clients and troubleshoot problems check my other posts:
Sigul Client Setup
Connection to Sigul Server/Bridge
Sigul Problems and Troubleshooting

Sigul passwords/passphrases
First step is to change your passwords, if someone else set them up.
Change sigul admin password:

sigul modify-user --change-password username

Change sigul passphrase: (Replace pidora-18 with your key name)

sigul change-passphrase pidora-18

Setup FAS2 account and koji
Next if you are planning to use sigulsign_unsigned.py, then you will need to run the command:

fedora-packager-setup

This will bring in your FAS2 certs. Then setup koji on this account like you normally would.
For armv6 build and using japan: http://blog.chris.tylers.info/index.php?/categories/11-CDOT

Testing sigul and koji
Now we will start signing packages. To test that sigul is working try a command like listing the users:

sigul -v -v list-user

And then try a command to see if you have access to your key:

sigul get-public-key pidora-18

Finally try using koji with a task. (Also make sure you are a admin in koji)

armv6-koji list-hosts

If all of these are successful, then you are ready to use sigulsign_unsigned.py.

Signing packages with sigulsign_unsigned
Signing run across all unsigned packages then import into koji:

~/.sigul/sigulsign_unsigned.py -v --tag=f18-rpfr --inherit --write-all pidora-18

Sign a single package and import into koji:

~/.sigul.sigulsign_unsigned.py -v pidora-18 [n-v-r]

Manually signing packages without sigulsign_unsigned
It’s much easier to use sigulsign_unsigned.py, but if you must sign it manually… To manually sign a single package without sigulsign_unsigned.py you will need to run a few commands. First, sign the rpm and output the signed file:

sigul sign-rpm -o output-sign-rpm-file.rpm pidora-18 unsigned-rpm-file.rpm

Next, import the signature into koji:

koji import-sig signed-rpm-file.rpm

Finally, write the signed rpm to koji: (Make sure it matches the n-v-r exactly as in koji, good way to check is by looking at the directory structure in /mnt/koji/packages)

koji write-signed-rpm f1590cd5 n-v-r

Problems?
If you are running into errors trying to sign a package, check out 2 of my upcoming posts:
Sigul troubleshooting
Sigul client setup

A few months ago I joined up with the other OSD700 students on the WebVTT feature for Firefox. Its purpose is display captions and subtitles for videos using the Track element. The main problem was that I wasn’t on the initial team that started the parser in OSD600, so I was a bit behind on what needed to be done. So I ended up choosing a portion of this feature that wasn’t directly related to the WebVTT parser.

I started out with a simple layout-related task. Add an anonymous div to the video element for the caption overlay. A bit of unfinished code was already done for this as a prototype by rillian (Ralph Giles). That prototype was unfortunately a year old, and a lot had changed in the codebase since that time. So, once things were up to date, I opened an issue on Bugzilla for it. Thankfully due to the bug’s specific nature, it only took some style changes and updating to actually get approval by roc (Robert O’ Callahan). Mozilla seems to have very strict rules on whitespace, and keeping style consistent, and I can admire that. Consistency definitely helps for readability.

And so I waited until it was time to get things together. A lot of parts started depending on each other to get a working prototype. So to rush for a prototype to show off, we started integrating our pieces, using Rick Eyres integration branch. We found out that getting all these things merged together and actually building would be an annoying task. Eventually, we ended up with something we could show. I changed up the css for the caption overlay so that it would be positioned correctly, and a little easier to look at, and we were ready to go. I added a text shadow instead of a black background, changed the font family/size, and changed the text colour to white.

We went to the Mozilla offices to show it off, and several of the students presented their own work on the feature. Several people from the Mozilla Toronto office also presented some of their own projects for the future of the web that looks very exciting. Some of the work on asm.js and WebRTC looks and sounds great.

Recently, I was tasked with giving another child div to each Text Track. The reasoning behind it was that positioning in the prototype wasn’t done properly (it would show below the video in 16:9 ratio). It used padding-top: 80% . While that would work when you knew the size of the video, it wouldn’t work any other time. If there was another child div, you could use the CSS trick where the outer div is relatively positioned, while the inner div is absolute positioned. That would allow you to place the inner div at the bottom of the outer one easily with bottom: 0, or an amount of exact pixels up you wanted it to be. So I positioned it just above the controls. This inner child div also allowed the caption itself to possibly be clickable, but the outer div to not be clickable.

I put these changes where the cue text was being appended to the caption overlay in WebVTTLoadListener. I could already see that was the wrong place to do that, but I might as well get things working first. I opened up a pull request to integration to see what I could change before it got in. There was an unforeseen issue with getting the pull request itself up. The fork of mozilla-central that I had from a year ago on github wouldn’t do pull requests anymore, it would just give me a 500 error. I tried waiting, I tried asking for help, but nobody seemed to have an answer to this issue. Eventually, I just renamed the repo, and forked another repository of mozilla-central on github instead. Then I pushed up my work again. This fixed it. For this patch, I put a member in TextTrack for the child div, and appended it as the cue text was appended. As I thought, it was the wrong place to be doing this. Rick Eyre was already preparing a patch that moved a lot of this logic to TextTrackCue. Once that was in, I put my patch for the child divs back in, this time as a member of TextTrackCue.  With that working, it gets merged in, and we’re one step closer to bringing everything together.

We’ve got 2 projects right now for GNOME Outreach Project for Women to apply to: https://wiki.mozilla.org/GNOME_Outreach_Summer2013 thanks to Liz Henry and Selena Deckelmann

If anyone else at Mozilla has a project that can be done in 3 months time (or at least give the contributor a sense of accomplishment and get them very engaged as a Mozilla contributor) feel free to add a project (and a mentor) to the wiki. Applications are being accepted via GNOME until May 1st.

One of my favourite things about this program is that it allows someone to ‘intern’ with Mozilla without the requirement of being a student. If you can help tweet/share the project, that would be much appreciated too. This project has been growing exponentially every session and is making a significant impact to FOSS community and culture.

https://live.gnome.org/OutreachProgramForWomen

In this post I will be posting the current script I use to make images for panda boards and smarttops. It is just a quick bash script I wrote to automate the process.

Process:
1. Partition sdcard
2. Mount partitions
3. Copy rootfs and boot files
4. Copy custom files
5. Unmount

The reason we do this instead of a dd or xzcat, is so we can copy over a boot script and hosts files. This will allow us to set an ip address on boot and custom services turned on or off. Then we can just plug it in and use a configuration management system(ansible or bcfg2) to configure the rest.

#!/bin/bash
# Andrew Oatley-Willis
# This script is used to modify a panda image before imaging.
# This is done so that the panda will come online with an ip address
# and immediately allow ssh access to it.

armboard="smarttop"

# Place to store temporary data
tmpdir="/tmp/${armboard}-$RANDOM"

# Script location
scriptdir="/data/f17v6/f18-${armboard}"

panda="panda"
device="device"
partition="False"
copyroot="False"
copyfiles="False"

function helpme {
cat <<EOF

Usage:  ./make-${armboard}.sh [option]

Partition device, copy rootfs & boot, and copy custom files
Example: ./make-${armboard}.sh --install

Don't partition device, copy rootfs & boot, and copy custom files
Example: ./make-${armboard}.sh --nopartition

Copy custom files - currently removed
Example: ./make-${armboard}.sh --copy

Partition device
Example: ./make-${armboard}.sh --partition

EOF
}

function cleanup {
        echo ""
        echo "[Cleaning up]"
        sync
        umount $tmpdir/p1/
        umount $tmpdir/p2/
        sleep 1
        rmdir $tmpdir/p1
        rmdir $tmpdir/p2
        rmdir $tmpdir/
        read -p "[ Press Enter to Continue ]" > /dev/null
        exit
}

function copy_root {
        echo "[Extracting boot partition]"
        rsync -avHAXE $scriptdir/boot/* $tmpdir/p1/
echo "[Extracting rootfs partition]"
        rsync -avHAXE $scriptdir/rootfs/* $tmpdir/p2/
}

function copy_files {
cat > $tmpdir/p2/etc/rc.d/rc.local <<EOF
#!/bin/bash
systemctl stop firewalld.service
systemctl stop NetworkManager.service
systemctl start sshd.service
ifconfig eth0 $panda netmask 255.255.255.0 up
route add default gw 192.168.1.254
iptables -F
chmod 700 /root/.ssh/
chmod 600 /root/.ssh/authorized_keys
ln -sf /lib/systemd/system/runlevel3.target /etc/systemd/system/default.target

EOF
}

function unmount_all {
        for i in 1 2 3 4 5 6 7; do
                umount ${device}${i}
        done
}

function partition_dev {
        echo "[Partitioning $device]"
        unset LANG
        if [ -b "$device" ] ; then
                dd if=/dev/zero of=$device bs=1024 count=1024
                SIZE=`fdisk -l $device | grep Disk | awk '{print $5}'`
                echo DISK SIZE - $SIZE bytes
                CYLINDERS=`echo $SIZE/255/63/512 | bc`
                echo CYLINDERS - $CYLINDERS
                {
                echo ,9,0x0C,*
                echo ,,,-
                } | sfdisk -D -H 255 -S 63 -C $CYLINDERS $device
                mkfs.vfat -F 32 -n "boot" ${device}1
                mke2fs -j -L "rootfs" ${device}2
        fi
}

function check_errors {
        checkfiles="$(ls -n ${scriptdir}/rootfs/ ${scriptdir}/boot/ | awk 'NR>1{print $3}' | grep -v '^$')"
        for i in $checkfiles;do
                if [ "$i" != "0" ];then
                        echo "rootfs/boot files must be owned by root"
                        exit
                fi
        done
        if [ "$USER" != "root" ]; then
                echo "Must run as root"
                exit
        fi

}

trap cleanup SIGINT

check_errors

if [ "$1" == "--install" ];then
        partition="True"
        copyroot="True"
        copyfiles="True"
elif [ "$1" == "--nopartition" ];then
        partition="False"
        copyroot="True"
        copyfiles="True"
elif [ "$1" == "--copy" ];then
        partition="False"
        copyroot="False"
        copyfiles="True"
elif [ "$1" == "--partition" ];then
        partition="True"
        copyroot="False"
        copyfiles="False"
else
        helpme
        exit
fi

read -p "Enter hostname of ${armboard}(ex. pa-5-1): " panda
echo "WARNING: ALL DATA ON DEVICE WILL BE ERASED"
read -p "Enter device to image(ex. /dev/sde): " device
if [ "$device" == "/dev/sda" -o "$device" == "/dev/sdb" ];then
        echo "You cannot use $device as it may contain system information"
        exit
fi

unmount_all

if [ "$partition" == "True" ]; then
        partition_dev
fi

echo "[Making temp directories]"
mkdir $tmpdir
mkdir $tmpdir/p1/
mkdir $tmpdir/p2/
echo "[Mounting $device device]"
mount ${device}1 $tmpdir/p1/
mount ${device}2 $tmpdir/p2/
sleep 1

if [ "$copyroot" == "True" ]; then
        copy_root
fi

if [ "$copyfiles" == "True" ];then
        copy_files
fi

echo "[Completed successfully]"
cleanup

Alright, apparently the solution to the URLLoader problem is to start a new VM using 64-bit Ubuntu instead of 32-bit, re-installing BigBlueButton from scratch, setting up Samba, copying over my entire dev directory (which, apparently, will prevent me having to set up Git again), reinstalling the OS (just kidding, Fred), and mapping the new 64-bit VM to the same letter on my Windows machine that my current 32-bit VM is on so that I don’t have to change my FlashBuilder settings.

FUN!

More Saturday posting? MADNESS! By which I mean, end-of-semester stress might be driving me a little bit crazy. But anyway, here I am merging the work I’ve done for poll accessibility into our master branch along with the upstream changes from the main BigBlueButton master. Apparently, there are supposed to be a plethora of problems involved with this thanks to a move from 32-bit to 64-bit? So far, I’ve only run into a handful of git conflicts that I’ve got to fix by hand, really. But we’ll see what happens when I recompile everything, I guess.

EDIT: Well, here’s a wrinkle. The Conference.AmIPresenter() method, commonly used in the client to check if (surprise) the current user is the Presenter, is suddenly giving me problems in the main Presentation window after all the merging is done. I’ve checked, and I’m still importing the Conference class and instantiating a variable of that class. And yet I’m still getting this error:

Error: Attempted access of inaccessible method amIPresenter through a reference with static type org.bigbluebutton.main.model.users:Conference.

EDIT: A-ha! There’s the problem. amIPresenter() was changed to a getter method, so now it has to be called without the () as if it were just a property. I’ll probably have to go through and change a dozen of these now, but at least I know what’s going on.

EDIT: Weird. The conflicts and Presenter checks are all fixed up, but now I’m getting errors in places I’ve never touched, such as src/org/core/managers/ConfigManager2.as, that seem to relate back to the URLLoader class. Whatever it is, it only happens when the client boots up, doesn’t get caught at compile-time, and crashes the whole shebang.

  $.ajax({
      type: "POST",
      url: 'http://www.domainname.com/module/controller/insert',
      data: { name: 'Donna Oberes', address: 'The Universe' }
    }).done(function(msg) {});

  public function insert($name, $address)
  {
    $new_id = 

      $this->people_model->insert(array('name' => $name, 'address' => $address));
    
    // Return the ID by echoing
    echo $new_id;
  }

 
  public function insert($name, $address)
  {
    $new_id = 

    $this->people_model->insert(array('name' => $name, 'address' => $address));
    $data = array('id' => $id, 'date' => 'April 6, 2013'); 
    echo json_encode($data).
  }

  $.ajax({
      type: "POST",
      url: 'http://domainname.com/module/controller/insert',
      data: { name: 'Donna Oberes', address: 'The Universe' }
    }).done(function(msg) {
      var obj = $.parseJSON(msg);
      // Print out
      $('#student_list').append("New student ID " + obj.id + " added on " + obj.date);
    });

This is the dawning of the age of WebVTT 0.0.9

Cue-settings tests passing!

Internal Unit Tests

In my last post I talked about the team having to sprint to a demo in order to be able to present WEBVTT at Mozilla Toronto. We ended up being able to cobble together a simple demo — thank God. It was starting to look like in the last hours that we weren’t going to be able to do it, but we pulled through! You can check out the presentation where we show the working demo on AirMozilla. The most interesting thing about the demo for me was the fact that it had the effect of revealing to us just how much work is left on WEBVTT. So be prepared for many, many, many more blog posts ; ) on WEBVTT.

I haven’t been able to put as much time as I’d like to into WEBVTT in the last couple of weeks since a lot of my other classes are starting to finish up — lots of papers, presentations, etc, are due. This is also my final semester so I’m in a course where I have to write a white paper, basically a small thesis paper. I’ll be posting that on my blog when I’m finished as I’m finding my topic, Open-source Software Governance Systems, fairly interesting and although I’m no expert, maybe others will find it interesting as well.

In light of this I’ve only been able to do minor things on the WEBVTT project since the demo. I’ve been reviewing code, keeping up to date with issues, fixing some minor bugs in the cue-text parser, finishing up the rest of the cue-text unit test fixes, and finally, reading through the HTML 5 spec to figure out just what is left to be done. The HTML 5 spec kind of frustrates me as it doesn’t put all the text-track stuff together. Granted, there is an organization to it, but I’m only concerned with text-track… and it’s kind of hard to find all the text-track stuff barring reading through the entire spec. Some of the things I’ve been finding are that we do not have the entire HTML 5 spec implemented yet and some portions of the spec have already changed. For example, getCueAsHtml() is no longer in it. So we will have to do some updating at some point.

My white paper is due this coming Monday, so after that I will be turning my full attention to WEBVTT as my class needs to get it to 1.0 before the semester ends.

For this release I worked on implementing a few of the changes I got via feedback from my 0.5 release.

Feedback

reflect.js

In quite of few of my test cases, I used the javascript DOM and HTML attribute manipulation in order to set the values for the HTML Track element. I was told to use reflect.js to automate much of what I was doing, however, I believe that using reflect.js in my tests was out of the scope of the test, so instead, I simply used DOM manipulation to modify the HTML Track element and proceed with the test from there. This helped slim down the test code, increasing readability, as well as really narrowing down the focus of the test.

setTimeout

In my activeCue tests for the TextTrack object I needed to elimate all the uses of setTimeout as it is an unsafe call due to the fact that we cannot always assume that whatever we were waiting for will be ready in X seconds. Instead I attached a ‘seeked’ event listener to the video element, this event listener is called whenever a ‘seek’ event has been completed. In this case I would simply call video.currentTime = X, which would fire off a seeked event when completed, and in the seeked event handler I would assert the number of activeCues.

I ran into an issue with this methodolgy which is why I opted for multiple test files for activeCues. I wanted to assert the activeCue count in cases where the activeCue count would be 0, 1, >1, and null. I could not find a solution that used a single test file, which cover all cases.

Updated Tests

TextTrack – Active Cues

Description

Returns the text track cues from the text track list of cues that are currently active (i.e. that start before the current playback position and end after it), as a TextTrackCueList object.

Assertions:

• By using a known webvtt file, we can assert that the number of active cues at a specific time.
• If the TextTrack’s mode is disabled, assert that activeCues is false.

Edge Cases:

• No webvtt file is provided.

Test

• TextTrack_active_cues_0.html
• TextTrack_active_cues_1.html
• TextTrack_active_cues_2.html
• TextTrack_active_cues_null.html

New Tests

TextTrack – Add Cue

Description

Adds the given cue to textTrack‘s text track list of cues.

Assertions:

• Assert initial cue count
• Add a  new cue
• Assert new cue count

Test

• TextTrack_addCue.html

TextTrack – Remove Cue

Description

Removes the given cue from textTrack‘s text track list of cues.

Assertions:

• Assert initial cue count
• Get a cue from cues
• Remove that cue
• Assert new cue count

Test

• TextTrack_removeCue.html

Concerns

As it currently stands, the majority of the mochitests written require a media source present in order to function correctly. I soon need to determine how Mozilla deals with media sources in mochitests and figure out the best way to go about including them in mine.

Moving Forward

By the end of the weekend I’m hoping to have test cases for the TextTrackCueList as well as accompanying blog post post.

I’ve been thinking quite a bit lately about how Webmaker can take advantage of the work being done on Web Components and Custom Elements.  I tasked Pomax with doing some research and prototyping, and the results have been encouraging.  I wanted to say something about my current thinking and what we might do.

One of the successes we had with Popcorn.js was that it became really easy to create plugins that could take care of the complexities of working with third-party APIs and showing web content dynamically, and linearly in time based on media resources.  Consider the Google Map plugin, which allows one to specify a location, map type, etc. and have a map dynamically load within the provided container div:

var p = Popcorn( "#video" )
  .googlemap({
       start: 5,
       end: 15,
       type: "ROADMAP",
       target: "map",
       lat: 43.665429,
       lng: -79.403323
  });

We’ve seen people make all kinds of plugins to simplify the use of more complex APIs like this.  Often it means dynamically loading some script, setting up a div or iframe, adding an element with a particular class name or id, and applying some styles.

There are a few things I’ve always wanted to improve about it, though.  First, how to properly combine a bunch of styles with a plugin.  Currently a plugin like the googlemap one is just JavaScript.  In reality, you almost always want a mix of JS and CSS, and doing CSS in script is not ideal; nor is having to manage the loading of two files per plugin (*.js, *.css).  A second issue is that these plugins are tightly bound to Popcorn, which is fine if you’re time-based experiences, but not so good for a normal web page.

With custom elements, we can solve a lot of these problems.  First, a custom element is a simple HTML file containing the definition of a new element, any associated styles, and scripts.  I use it in my page by loading it via a link:

<link rel="component" href="webmaker-components.html">

I love the simplicity of this method of packaging and loading new elements.  This file can include one ore more new elements, making it possible to do some server-side bundling for dynamic builds–imagine loading components a, b, c, and d via http://components.webmaker.org?c=a,b,c,d.

Now in your markup it’s possible to take our Google map from above, and rewrite it like so:

<webmaker-map start="5" end="15" location="Maruyama Zoo">
</webmaker-map>

Here content attributes on the custom webmaker-map element provide a way to indicate start and end times, and a location to pass thorugh to Google’s API.  However, while I can specify timing info, I can also leave it off, indicating that the map should always be visible:

<webmaker-map location="Maruyama Zoo"></webmaker-map>

By moving the functionality of the Google Map plugin to a custom element, we’ve made it possible for it to be used in any web context or tool.

You can see this in action in Pomax’s demo page: first with timing info, second without as a static web page.  View the source of both pages.  First off, notice how little code there is, and more, how it’s all markup vs. script.  You might be wondering why this works at all, since browser vendors are still defining and implementing the spec.  You’ll see that this uses a polyfill to give us the ability to play with things now.

This model of providing functional-units to authors is also exciting in the way it lets us mix and match depending on the needs of the individual.  For example, lets say you want to add comments to your page.  One option would be to use Facebook’s comments plugin, another would be to use Disqus’s embed.  Both can be wrapped into custom elements, and users can choose.  I did just that for Facebook’s comments: code (view source) and demo (scroll to the bottom).  Here I use

<facebook-comments></facebook-comments>

to add the functionality I want.  No scripting of any kind, which means that this becomes accessible to so many more web makers, for whom coding is beyond their reach.  Whenever we can reduce complexity like this, we should do it.

I think moving toward HTML-based custom elements vs. script-only plugins is going to make a huge difference.  It’s going to mean that it’s easy to integrate with existing tools and workflows, easy to find and use them (they are just web pages, after all), and most of all, easier for non-devs to use all these amazing APIs and services, which require coding.

Pomax and Matt have already started work to convert Popcorn Maker to use this, and are making good progress.  I’m looking forward to building more pieces of the Webmaker tools and gallery infrastructure using these same methods, and I’ll write more about or progress later when I have something to show.

In the last project I was working on I had the chance to apply some dependency injection patterns on a node.js application.
Before I get into the details of the implementation it is important to understand how using dependency injection could benefit your project.

Wikipedia’s definition

Dependency injection is a software design pattern that allows removing hard-coded dependencies and making it possible to change them, whether at run-time or compile-time.[1]

This can be used, for example, as a simple way to load plugins dynamically or to choose stubs or mock objects in test environments vs. real objects in production environments. This software design pattern injects the depended-on element (object or value etc) to the destination automatically by knowing the requirement of the destination. Another pattern, called dependency lookup, is a regular process and reverse process to dependency injection.

Basically, dependency injection gives you the flexibility to separate the module’s functionality from it’s dependencies.
This decoupling can come in handy during testing or even when you find yourself in the need to modify some dependencies of a module later on.

Creating the module

Lets look at how you would be able to implement some dependency injection patterns with node.

I’m going to use the WebVirt project to show some examples in action.

The code blow represents a single controller that manages some express routes:

var VirtController = function (di) {

};

VirtController.prototype.actions = function (req, res) {

};

VirtController.prototype.hostStats = function (req, res) {

}

VirtController.prototype.list = function (req, res) {

};

module.exports.inject = function(di) {
   if (!_virtController) {
    virt = di.virtModel
    Step = di.Step;
    _ = di._;
    logger = di.logger;
    _virtController = new VirtController(di.config.logger);
  }

  return _virtController;
}

The controller has three basic methods:

• actions
• hostStats
• list

However, only the inject method is exported.
That’s the only entry point of the module, you can perform some validation, initialization procedures, anything that needs to be done before you instantiate the module.

In the example above we only check if an instance was already created so we don’t create two equal objects, applying the Singleton pattern.

Injecting dependencies

To use the module all we need to do is to “inject” the dependencies and receive back the initialized instance:

// Load dependencies
var _ = di._ = require("underscore");
di.Step = require('../../external/step/lib/step.js');
di.exec = require('child_process').exec;
di.config = config = require('../../config/config.js');
di.logger = logger = require('../../utils/logger.js');

exports.virtModel = di.virtModel = require("./models/virt-model.js").inject(di);

exports.virtController = virtController = require("./controllers/virt-controller").inject(di);

One of the major benefits we gained by applying dependency injection into our project was that gave us the flexibility to quickly identify what the module needed to operate on, and if any changes were needed we could quickly patch them.
For example;
The WebVirt project is composed of two different pieces, the WebVirt-Manager and the WebVirt-Node.
They are separate modules that share the same code base but are designed to run on different hosts. Each one of them have specific dependencies.
The WebVirt-Manager requires Redis to store the users of the system as well other bits of data.
However the WebVirt-Node does not need Redis.
That posed a huge problem since both apps were sharing the same code base and we were using a Logger module that was saving the logs to a Redis db.
And only the WebVirt-Manager host had a Redis db running.

To fix this problem we passed a “Custom Logger” to the WebVirt-Node.
Instead of requiring the Logger that was talking with the Redis db, we passed a Logger that only logged stuff to the console.

// Load dependencies
var _ = di._ = require("underscore");
di.Step = require('../../external/step/lib/step.js');
di.exec = require('child_process').exec;
di.config = config = require('../../config/config.js');
var logger = {
  error: function (err, metadata) {
    console.log("err: ", err);
    console.log("medatata: ", metadata);
  }
}
di.logger = logger;

exports.virtModel = di.virtModel = require("./models/virt-model.js").inject(di);

exports.virtController = virtController = require("./controllers/virt-controller").inject(di);

And by just changing a few lines of code we were able to modify the module’s dependencies without altering it’s functionality.

With school keeping me so busy, don’t be surprised to see more erratic posting like this Saturday update; I’m sliding into a situation of taking my CDOT hours when I can.

Anyway, last time I sorted out the oddities in the construction of the Poll Creation/Preview window (although as I’m typing this, it occurs to me that I may not have actually put the tab order back in yet; I should check that). Today, I’m starting to work on enforcing a strict policy of not allowing the Creation and Results windows on the screen at the same time. It wasn’t a problem before, when we first built the module, but now that we’re making everything accessible this formerly odd-but-harmless behaviour needs to be taken out. At a glance, it doesn’t seem like this will be too much work, but then that’s what I said about the Toolbar Button hotkey, so….

In other news, Doctor Who returns tonight. Geronimo!

Max Stepin (the APNG maintainer) has added APNG support to Chromium. Good job, man!

• reftest documentation
• Creating reftest-based unit tests - MDN
• Writing Reftests - WebKit

Importance

Reftest Format

• Test page with feature to be tested
• Reference page that show have the feature should look
• A reftest.list file that lists the assertions

Example

<html><body>
X X
</body></html>

<html><body>
X&nbsp;X
</body></html>

== spaces1.html spaces2.html

Details

Basic WebVTT Test

<html class="reftest-wait">
<head>
 <meta charset="UTF-8">
 
 <style>
  #testVideo {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 640px;
   height: 480px;
   margin: 0px;
   padding: 0px;
  }
 </style>
 
 <title>WebVTT</title>
</head>
<body>
 <video id="testVideo">
  <source src="grey320x240.ogv" type="video/ogg">
  <track src="basic.vtt">
 </video>
 
 <script src="testScript.js"></script>
</body>
</html>

<html class="reftest-wait">
<head>
 <meta charset="UTF-8">
 
 <style>
  #testVideo {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 640px;
   height: 480px;
   margin: 0px;
   padding: 0px;
  }
  #testDiv {
   position: absolute;
   left: 0px;
   top: 250px;
   width: 640px;
   margin: 0px;
   padding: 0px;
  }
 </style>
 
 <title>WebVTT</title>
</head>
<body>
 <video id="testVideo">
  <source src="grey320x240.ogv" type="video/ogg">
 </video>
 <div id="testDiv">WebVTT Test</div>

 <script src="testScript.js"></script>
</body>
</html>

/*
   Make sure video is loaded,
   and that it is always at the same frame.
*/
document.getElementById('testVideo');

// Need to play to load video
testVideo.onplay = function() {
 
 // Stop video and seek to 5 seconds
 testVideo.onpause = function() {
 
  // When video is loaded, preform test
  testVideo.oncanplaythrough = function() {
   document.documentElement.className = "";
  };
  testVideo.currentTime = 5;
 };
 testVideo.pause();
};
testVideo.play();

Breakdown

./mach reftest layout/reftests/webvtt/reftest.list

I wrote previously about our work to add Media Clips to Popcorn Maker. Since then we’ve watched as people have started to make things with it, from Ron Swanson dancing to any song to the International Space Station orbiting Earth, which has been a lot of fun.

One project Brett showed me today was done by BBG as a procedural storytelling experiment using a SoundCloud audio monologue about the election of the new Pope.  It’s a really good example of how one can take a bunch of source media (multiple YouTube clips, images, text, audio clips) and mix them together into a more complete, seamless, web-media experience.  What’s even better is that you can click “Remix” and see how it was done.  I’ve done just that in the image below, which shows the media clips they’ve used in the Media Gallery, and the timeline where they get used.

I love the final effect–it really feels like something new, something I don’t see on the web right now: people have all kinds of tools for telling stories spatially, but not in time, linearly.  We’ve long had people making fully rendered videos, but that’s not what this is: this is taking media and resources from across the web and mixing them together in the browser.  We’re still testing and evolving this, but already it’s getting to be quite usable.

I’m equally interested to see what people will do with another experiment we’re trying, using YouTube’s webcam uploader.  I think when we combine user created media with the ability to mix audio and video from other sources, we’re going to have something really interesting.  Almost there…