Tag: seneca

This week, reviewing JavaScript was the idea and learning it inside and out was the intention. After watching Douglas Crockford’s video lectures on The JavaScript Programming Language (parts 1, 2, 3, and 4) and Advanced JavaScript (parts 1, 2, and 3) I felt like I’d been reacquainted with an old friend after years of falling out of touch. After watching them I kept asking myself: “Did I learn a lot?“.

I found that while before I knew JavaScript like I knew a car seeing it drive around a parking lot, I knew it now like I’d been the one driving it. Iterating over object properties? Check. How that factors in with inheritance and using hasOwnProperty to eliminate super classes? Woah, never thought about that!

Similarly, a lot of other things I held dear about good ol’ JS were blown out of the water. Expressions in switch statements, that ambiguously implemented VB-style “with” statement, and breaking to labels were all new to me.

Some of the most interesting things I’d found were the traps and best practices of the language. I always knew parseInt would supply a radix if it wasn’t given one, but HOW it would was scary. Rather than default to 10 like I’d assumed, it tries to guess based on the string (“05” has radix 8, “0x05” has radix 16, “5” has radix 10). Good thing I never had supplied a string with a leading 0 or I’d’ve been in trouble.

Variable declaration and scope was another great thing to learn. I knew of implied global and that there was only function scope, but I never realized the ramifications and power of this. Want to declare a variable or group of logic in a function but then use it outside the function? No problem. Want to do it without cluttering the global namespace? Easy still, just return a closure or anonymous function using that variable. Even though the called function has returned control, the location of returned closure/function declaration ties to the variable itself and it can be used.

Closure usage and private function emulation has found its way into my code in the past, but I suspect it’ll be more and more prominent (especially when dealing with wrapper functions/objects for cross browser code!) in future projects. 🙂

This past week was Open Source week in Toronto, the last two days of which held Seneca College’s 9th annual Free Software and Open Source Symposium. Always being bogged down with projects around reading week, this was my first in three years that I’d attended. Coming out of it I wish I had gone every year I could. Next year I won’t get the student discount 🙁

Wednesday I hoped to attend the Level Up Game Jam, a day-long workshop on using WebGL, HTML5 Audio and JavaScript, but alas couldn’t attend. Though Thursday…

Thursday 9-12: Game Development using Processing.js

I attended a workshop by Game Jam speaker Andor Salga on Processing.js. Originally written using Java syntax as an MIT project in 2003, Processing was ported to JavaScript by jQuery inventor and web guru John Resig. Seneca has since been heavily involved with its development. An amazing platform, I found I picked it up incredibly easily and was able to whip up a game in 30 minutes, a game which would be later dubbed “Negative Pong”.

Single-player and mouse-driven, the object of the game is to keep the ball bouncing as long as possible without letting it go by your paddle. As there is no way to “win” your score counts down from 0 every time time you “drop the ball”. There was no time for audio, multi-player or keyboard controls, but this little tech demo was a great intro to the language. Inspired, I may have a new project (Processing, not Negative Pong) to spend some of my contribution time on. Then Friday hit.

Friday 11-12: Web Audio

This was one I was highly looking forward to. Having just learning some Processing (and thanks to discussions with Dave during class), I was eager to learn the other half of the coin. It’s unbelievable how far web audio has come in the last short bit. Intense visualizations, pure JavaScript text to speech, and a demo of Mozilla’s Flight of the Navigator js experience, tuned for FSOSS pictures and Twitter stream. While most of my work this last bit has been with <video>, Dave’ latest challenge has me exploring making my own visualizations. I’m working now on fine-tuning pitch-determined colours. Dave’s presentation can be found here.

Friday 1-2: WebGL Game Jam Results

The WebGL Game Jam Results. This was the followup to Wednesday’s day-long missed workshop. The results were great with quite a few innovative 2D and 3D games. Some, like mine, were little more than proof of concept games but others had had more time put into them and came out as great fully-functional WebGL-driven 3D games. Was great fun, and midway on a forum seemed to develop as the audience got involved. Watch the presentation here and watch out for 5:09 🙂

Friday 2-3: Federating the Social Web

Being involved with Mozilla, I wanted to attend at least one presentation from another standpoint. James Walker came from microblog producer Status.net to speak about OStatus, an open protocol developed to try and cull a few of the issues they’ve identified with microblogging and cross-site communication. Not having so much as a Twitter account, I felt the most out of my element going into this presentation, and fittingly learned the most coming out. Always an engaging speaker, you can watch “walkah” speak here.

Friday 3-4: Mozilla Drumbeat: open innovation for everyone

Mozilla Drumbeat: the project to make the web awesome. This was a great presentation as well. Matt Thompson came from Mozilla to discuss Drumbeat, they’re mission and what they’re doing to make things better. In true Open Source and Community fashion, the floor was then turned midway through into a Q&A and feedback session, generating discussion that I felt said more about the initiative, its strengths and its challenges than could have possibly been covered in a strict presenter-to-audience setting. Everyone in the room was an equal, with the audience answering each other’s questions, with Matt posing and answering his own into the mix. In a word I found it: collaborative. Watch it here.

Aftermath

The reception was great, I enjoyed every minute of it, and even had fun volunteering to take apart the demo room and bring computers back to CDOT. At the end of the day it didn’t matter who had spoken and who had heard, who was presenting or who had learned. It seemed we were all just there to share and broaden ourselves and have a great time with Open Source.

Well, with the occurrence of reading week I’ve been a bit behind on my blogging. When I last wrote about PHP Process Control, all seemed fine and dandy. A simple call or two, maybe a foreach loop after to process lines of output, nothing majorly wrong. All the theory worked. After experimenting with it though, I found a few issues.

Firstly, processing control is handled very differently on different operating systems. Windows is fairly do-it-itself without much worry of permissions, groups, ownership or pathing. When getting things to work in a *NIX environment however, a bit of debugging was involved.

Actually, a lot was and all I had to go off of was an OS return code and a great many googlings.

Lesson 1: Pathing and the 127 Return Code

What is the 127 return code above? That’s the first of many issues I ran across: inability to find the process.

There is that trap every Windows-centric developer falls into at one point or another when working on Linux: forgetting that searching for an executable on Linux will not check the current directory by default. What does this mean in the case of PHP Process control? Specify an absolute directory for the executable. This is easy in PHP though if it’s in the directory the script is running in (or any sub directory):

• __DIR__ is a magic constant that identifies the directory of the current script (only in PHP 5.3)
• dirname(__FILE__) extracts the absolute directory from the absolutely-qualified location of the current script (like above, but supported back to PHP 4.0.2)

There are other reasons for requiring a full path, but I didn’t realize those until learning lesson 3.

Lesson 2: Permissions and 126 return code

Ah yes, file permissions. Any of many permission-related issues may come up (I’m still not sure if I accounted for everything but the implementer of my work says all is well) but all these issues fall under the umbrella return code of 126. This is where things got real mucky. Apache executes under a user account (‘www’ on some machines, ‘apache’ on others, ‘httpd’ or ‘nobody’ on still others) for performing any interactions with the OS. In systems where permissions are exclusive rather than inclusive (any *NIX environment) this becomes an issue if not dealt with. So be sure to:

1. Determine the user that Apache runs under (place ‘passthru(“whois”);’ in a PHP script)
2. Give that user rights to execute the shell script
3. Run normally

Note that this may not be enough. The executable must be in a directory accessible by the apache user account (so keep your files away from /root/). Normally though, these permission issues seemed to arise as a result of running in a web context through a web server. In other words, the script will still likely work if run from the command line like so:

php myScript.php

Lesson 3: Apache Environment and the 127 return code

So our script has passed the above two checkpoints and is guaranteed to run, right? WRONG! These never came up with my own simple implementation of calling a shell script which just catted data around, but shell scripts which call other user-defined shell scripts or executables may still be in for an issue. This is because the Apache user may run in an environment with only a partial path (/bin, /sbin or /usr/bin may not be included by default).

So, a retrospect on my first foray into PHP Process Control: 30 minutes to research, 30 minutes to code, 4 hours to debug. Did the age-old programming wisdom of “expect things to take twice as long as you’d expect” hold? Most definitely. Did I learn a lot and enjoy every minute? Most definitely.

In attempting to make a custom playlist for our video player, Kevin and I have been working on two key features: ability to take a subsection of a video and treat it as a “chapter”, and the ability to link multiple chapters together to create a playlist (or “book” if you prefer the literary analogy).

Either way, we’re close to getting everything working. Jumping around in a video works great, as does getting one video to jump to the next. The issue is getting the two to work together with events and timing being synchronized properly (see below):

On slow network connections, events are being fired at inappropriate times, leaving videos to progress onto the next before the first has finished buffering. Perhaps we’ll have to move away from the timeout method of video advancement to get this to work, but either way our 0.1 release is shaping up for shipping out. With a few tweaks of course 🙂

In continuing to develop some more tools for the HTML5 Open Video Player, I’m now working on cookie management and a structure of storage to display video bookmarks. Brave new world.

I began by going back to my OOP Experiments and figuring out what was wrong. Turns out that by only defining properties inside the constructor and not as a prototype, they are only accessible from the scope of that object but not the prototype. So when it came time to reference them inside a prototyped function… BOOM. Well that’s a big hurdle down.

With an object now able to contain functions I began looking into cookie storage. Not difficult, with the document.cookie property and some clever string manipulation storage and retrieval of strings was easy:

// Cookie of key "name" and value "val"
document.cookie = "name=val";
// Split cookie string into array of name-value strings
var cookieArray = document.cookie.split(";");

With cookie storage figured out, it was time to get my JS object into a string. At first there was a simple comma-separated value string but given that we’re shooting for JSON for other parts of our project why stop there? JSON is used like XML for object descriptions but as it’s also syntactically valid JS one can simply push it to the JS’s eval function and it’s ready for instantiation. Of course, this opens a whole load of security holes and so even the official JSON spec recommends at least regular expression validation prior to eval’ing but noting the preference of a parser.

Seems there is some browser support for native JSON (which eerily has some versions coinciding with browser support for html5 video), but I have difficulty verifying this list on anything but Firefox. Seems the latest versions of Chrome and Safari both give “Unexpected End” errors while IE8 complains that “JSON is undefined” and Opera just plain stops. So the easiest solution isn’t possible but what’s development without a little wheel re-invention?

JSON parsers have already been written in many languages, and after investigating them there seemed to be 2 leaders: json2.js and json_sans_eval.js. Both are fast, with json2 focusing on validation while json_sans_eval focusing on security. Both are open source and in the public domain but since the Bookmark object is simple (see below) I opted for the latter with manual validation performed afterward. Experimentation showed malformed JSON simply yielded some expected properties as undefined.

// Bookmark object, minimal validation
function Bookmark(src, title, startTime, endTime) {
this.title = title;
this.src = src;


if (startTime < endTime) {
this.startTime = startTime;
this.endTime = endTime;
} else {
this.endTime = startTime;
this.startTime = endTime;
}
}


Bookmark.prototype.title = "";
Bookmark.prototype.src = "";
Bookmark.prototype.startTime = 0;
Bookmark.prototype.endTime = 0;
Bookmark.prototype.toString = function() {
return "Source: "+this.src+"\nTitle: "+this.title+"\nStart Time: "+this.startTime+"\nEnd Time: "+this.endTime;
}

With all this together, it was time for DOM manipulation and dynamic tables. At first I thought this would be easy, with nothing but a call to createElement() to make the row followed by setting the innerHTML like so:

var tr = document.createElement('tr');
tr.innerHTML = // Row content HTML goes here
tbl.appendChild(tr);

In theory this approach would be quicker since its one call to manipulate the main DOM structure (tbl.appendChild) but IE 8 seems to balk when creating the element. So it’s back to basics and DOM Level 1:

// Add bookmark to table of contents and global array
function addElem() {
var tbl = document.getElementById('tblOfContents');
var bkmrk = new Bookmark(document.getElementById('bkmrkSrc').value,
document.getElementById('bkmrkTitle').value,
document.getElementById('bkmrkStart').value,
document.getElementById('bkmrkEnd').value);


var tr = tbl.insertRow(1);
var srcElem = document.createElement('a');


srcElem.href = 'javascript:playChapter('+chapters.length+');';
srcElem.innerHTML = bkmrk.src;
tr.insertCell(0).appendChild(srcElem);


tr.insertCell(1).appendChild(document.createTextNode(bkmrk.title));
tr.insertCell(2).appendChild(document.createTextNode(bkmrk.startTime));
tr.insertCell(3).appendChild(document.createTextNode(bkmrk.endTime));


// Add bookmark to a global array of objects as well as have data in table
chapters.push(bkmrk);
}

And so there we have it: a high-level overview of OOP JS, JSON and DOM Manipulation. There is plenty of room for improvements (tests at Quirksmode.org show that a few years ago, using innerHTML was magnitudes quicker than table function calls) but a working implementation is a working implementation, and soon the iterative process will take care of optimizations. For now: application of this code to create chapters within a video!