OSD600 Release 0.4 Done

It’s a little bit late for the this final release, but I am very exciting that I am able to fix the bug in Mozilla Appmaker project. I got some hints from Appmaker team, and I completely rewrote the code from my previous pull request (Release 0.2). The following screenshots are the test results:


1. Before channel “A” is disabled:

2. After channel “A” is disabled:
3. Before channel “B” is disabled:
4. After channel “B” is disabled:

Both listen-menu and broadcast-menu UI are rendered as expected. What I have learned in this release?

  • General ideal of Polymer,
  • JavaScript DOM Elements Traversing such as parentNode, childNotes, classList, hasAttribute(), and contains() …
  • Chrome debug tools
Posted in open-source | Leave a comment

OSD600 Expands my “Open Source” Thinking

Today is the last day of this semester, and I am still working on my final release of OSD600 project. During the past fourteen weeks’ study in my Open Source Development (OSD600) course, I have learned the technological aspects (advanced JavaScript knowledge, how to use Git, Node.js, and a bunch of popular open source tools such as Polymer,Grunt, and many more), social aspects (how to get help from other open source developers via IRC), and pragmatic aspects (direct involvement in the Mozilla Appmaker project) of developing open source software.

Moreover, this course expands my Open Source thinking. I start to prefer using open technologies rather than exclusive technologies. I value group-based problem solving and prefer tools that allow for social collaboration and sharing. In addition, I am quite comfortable to use existing open source code to solve business problem. Look forward to learning more from OSD700!

Posted in open-source | Leave a comment

Working on OSD600 Release 0.4

After the long silence (MozFest + vacations) from my previous release 0.2 pull request, I got some feedback from Mozilla Appmaker team. Apparently, my code doesn’t meet their requirements. I decided to continue working on the same bug as my Release 0.4 project. The following is the suggestion from appmaker team:

If we want to remove a known active listener from the channel map, for instance, we should give the channel map a function like removeActiveListener and then call channelMap.removeActiveListener(…) on it, rather than extracting all the data from the various sources into local scope, processing then, and then setting them back on remote scope. Ideally, no extraction happens, we just tell the relevant components to run their own local function on their local data, based on passed parameters.

During last weekend, I spent a couple of hours to review my code and tried to figure out how to refactor it; however, it is not easy to accomplish the task. First of all, I haven’t looked at the code for about a month. I had to start from scratch again. Time is flying, and I only have one week left for this semester. I am going to learn more advance JavaScript skills. And I hope I am able to fix this bug by the end of exam week.

Posted in open-source | Leave a comment

Build Firefox Browser

I really want to build Chrome,but my laptop doesn’t have enough ram to build it. It took me 24 hours and failed. As the result, I decide to go for Firefox. Surprisingly,The Mozilla build instruction is much easier to follow. I have a Ubuntu 12.04 OS running on VMWare, Maybe I can build the Firefox browser on my virtual machine, unfortunately, I failed with a couple of errors and 75 warning messages. Finally, I have to try it on my Windows 8.1 OS, and it only took me an hour to build it.

Step one: Install build prerequisites (Visual Studio, mozilla-build)
Step two: Run start-shell-msvc2013.bat on my Windows Command Prompt

Even if you are on 64-bit Windows, do not use the start-shell-msvcNNNN-x64.bat files (unless you know what you’re doing). Those files are experimental and unsupported.

Step three: Get the source code use command

hg clone https://hg.mozilla.org/mozilla-central

Step four: build it and run it


If you want to save time and avoid unnecessary mistakes before diving into a big project, read the documentation carefully.

Posted in open-source | Leave a comment

Jquery UI Sortable Placeholder Issue in Release 0.3

I am stuck in  a bug in Mozilla Appmaker project. When user drags and drops a brick, in line 12, it will insert a highlighted placeholder to show its target position where the brick would be dropped. The following function implements the drag and drop feature:

          function createSortable() {
            var draggedOff = false;

              distance : 10,
              handle: '.handle',
              appendTo : "body",
              helper : 'clone',
              connectWith : ".ceci-card",
              placeholder: {
                element: function(clone, ui) {
                  return $("<div class='sortable-placeholder'></div>");
                update: function() {
              start : function(){
                that.async(function() {
                  window.dispatchEvent(new CustomEvent('CeciElementSortStarted', {bubbles: true}));
              stop: function(ev, ui) {
                that.async(function() {
                  document.dispatchEvent(new CustomEvent('CeciElementsSorted', {bubbles: true, detail: ui.item[0]}));

It works fine in one single card; However, if you have 3 cards or more, and you want to drop the brick from card a (page a) to card b (page b). Before you drop the brick, the placeholder isn’t attached to card b as expected. It seems that the placeholder would randomly be attached to one of the available cards (a, b, or c). That’s a big problem as user couldn’t control the drop position. If you really want to drop it to card b for example, you have to hover card b tab, then hover card b phone container, the placeholder would show up on card b, after that you can drop the brick to card b. I am still working on this issue, and I hope this bug is not caused by JQuery UI library. Otherwise, that’s really time consuming.

Posted in open-source | Leave a comment

Working on another bug in Appmaker

In OSD600 0.3 Release, I am going to working on another bug (issue #2252) in Appmaker. Basically, the steps to reproduce the bug are:

  • Add a button
  • Add a new page
  • Drag button up into the new page tab, or click and drag the button to the left side (the bricks area), then release the mouse
  • The blue UI on the button disappears

I am going to try Brackets, an modern open source text editor, to debug and fix this bug. During this week’s lecture, professor David Humphrey demonstrated the beauty and the power of Brackets, especially the debugging tool. I hope I am able to truly take advantage of Brackets’ features and make it easy for my future projects.

Posted in open-source | Leave a comment

Open Source As A Developer-Recruiting Tool

Time is flying. This is the fifth semester of my education in Seneca College. There is only one more semester to go, and I am going to graduate from Computer Programming and Analysis. Every soon-to-be graduate student starts to look for job, but are you really ready? As a computer programmer, how to get those hiring managers’ attention? Yes, a well prepared resume is the key to get you to a job interview; However, most employers have difficulty to find out candidates’ programming skill in a 30-minutes interview. Normally, interviewees are nervous, they couldn’t code and solve problem in their comfortable ways. As the result, some employers might complain that they couldn’t hire proper people to fit a position. And interviewees couldn’t demonstrate all their programming skills because they don’t have good interview skills. In reality, there is always a gap between employers and job seekers.

Recently, more and more employers start to query talents from open source community. Web companies like Netflix, Twitter and Facebook understand that open source can be more: a powerful weapon for recruiting and retaining top engineering talent. Twitter runs monthly queries on contributors to their open source projects and projects of interest. That’s a very good news for open source contributors. As a job seeker, your contributed code on open source project is your new resume. If you want to find your dream job, why not start to work on one of the 10 million open-source projects posted to popular code repository Github. It allows developers to demonstrate coding skills, collaboration abilities and technology interests. For hiring managers, open-source communities may offer better perspectives on technical and soft skills than a reference.

Posted in open-source | Leave a comment