Archive for November, 2010

JavaScript: typeof “undefined” vs undefined

Posted in open source on November 28, 2010 by scottdowne

As far as I can tell, there are two ways to determine if a variable is not defined. Value and type.

Checking the value. This might be the most common way, and the best in most cases when you know what you are checking. Take this example:

var a;
alert(a === undefined);

Simple enough, you have a variable that is not defined, but it DOES exist, and you are comparing it against a global variable “undefined’, that is not defined but also exists, and ultimately, can be broken and not give what you expect. Take this example:

var a, undefined = "defined!";
alert(a === undefined); // woah, not what we expected

Be careful when checking against the global variable “undefined”, it may not be what you think it is. This might seem silly, but when creating a library, that may possibly be used with other libraries, that you have no control over, you have to make sure you have control over your stuff, and you cannot be broken by others. There are ways around this. Take this example:

var undef, a;
alert(a === undef); // woah, not what we expected

All I am doing here is creating a variable called undef, that I KNOW is not defined, and checking the values against it. This is how processing.js currently checks for undefined.

Another potential issue. What if you need to check to see if a variable is defined, but you didn’t create it. Maybe you want to see if another library has created it. Take this example:

//var a;
alert(a === undefined); // now we're broken

a does not exist. We didn’t create it, so why should it? So we obviously don’t know what we are doing and the browser is nice enough to stop doing our silly commands.

A way around this is to check the type, and not the value:

//var a;
alert(typeof a === "undefined"); // we are fine and can keep on rolling

A ever so slight improvement on that last one is like this:

//var a;
var undef = "undefined";
alert(typeof a === undef );

So now, if we are checking like this a lot, we don’t have to keep creating and throwing away a single string. We create it once, and re use it.

One argument I see is why check its type against “undefined”, if you want to see if something exists, and plan on using it, you should probably know its type before you use it. So something like:

var func = "function";
if (typeof a === func) {
    a();
}

Why would you care if a variable exists or not if you don’t intend to use it, and if you intend to use it, you should probably know how you intend to use(call) it.

Using typeof is useful if a variable’s existence is not known, and checking its value if its existence is known.

So the use depends on the situation, and knowing what each one does and when they are useful is better than knowing which one is better.

touch events in processing.js

Posted in open source on November 23, 2010 by scottdowne

Demo.

With the buzz and attention around processing.js’s 1.0 release, my boss’s(David Humphrey) boss Evan Weaver was trying processing.js on his new ipad, and the touch events didn’t quite work.

The issue is because the touch events didn’t exist at all, and was trying to interpret the basic mouse events best it can… So I wanted to get a version of processing.js using the touch events if the environment was a touch environment, and use the normal mouse events if it was a mouse only environment.

The events are easy to understand, are a translated from mouse events as follows:

touchstart – triggered when a touch is initiated. Mouse equivalent – mousedown
touchmove – triggered when a touch moves. Mouse equivalent – mousemove
touchend – triggered when a touch ends. Mouse equivalent – mouseup

I thought the swap would be pretty simple, if we are touch, swap events, if not, do nothing. The problem is “if we are touch” basically, I wanted to detect hardware from a browser. I mean, these events exist in the browser with or without the functionality, and even if they don’t all exist in all browser (I may find on that doesn’t exist now) it may exist in the future, breaking all my code.

I did find out that the touch events trigger a complete touch rotation before firing a mouse event, so I added some touch events mimicking the mouse events, but at the start of the “touchstart” I turn off the mouse events.

I then loaded the processing.js demo that Even Weaver initially tried into my hacked up processing.js file, ran it first in browsers, mouse works(check) and then loaded it into the ipad touch works(check) mouse not working(check). The next day I tried it on an ipod touch, same results. Perfect. Filed a ticket. You can try the demo here.

How I ask for help

Posted in open source on November 16, 2010 by scottdowne

A conversation I had today got me thinking. How do I ask for help?

I also have not done a blog about me, only about what I do, and I guess this is also sort of related to what I do, so I figured it would be a nice change, and something new for me to do.

I tend to not ask for help, or, it takes a lot for me to ask for help, or so I thought. There is more to it. I thought I didn’t ask questions often because when I do, I get more questions than answers. I think this is because in order to help someone, you need to know the context of the problem, which is understandable. This also usually means letting someone into your work flow, and no one has the same work flow, and everyone has a work flow that works for them, which means when they see someone elses work flow, they see problems, and said problems must be fixed (and probably with good reason) but it can be overwhelming when trying to deal with another problem, to now have two problems.

Another reason I felt I didn’t ask questions is because in order to ask a question, you need to understand the question, or run the fear of asking a stupid question, but if you are going to do research before asking, you might as well just go all the way and research the whole problem, no? no.

Maybe it is a simple matter of time. The time it takes me ask, you to understand, you to explain, might be as long as it took me to just research. This is remembering to ask takes up the time of two people. This is not always the case as a lot of times I learn tones by answering someone else question.

Maybe I am just better at googling than asking questions, and for the most part that probably works better for me, most of the time, but not all the time.

There is one time where I ask. I do not ask questions if I do not have an answer, I research when I am there. I ask when I have an abundance of answers, and am not sure which one would be best. I also like to ask questions when I can get a clear cut answer, and to ask the right person for the problem.

I am still working out the kinks in my method, but it has been working fine up to this point, and I am sure it will evolve without me even knowing.

video presentation builder

Posted in open source, Uncategorized, video, webmademovies on November 9, 2010 by scottdowne

Few days ago I made a demo for building a presentation website using a video. It took a weekend to initially build, and a few more days of tweaking with feedback from David Humphrey to get it just right. It really is amazing how you can take something raw, add feedback, and end up with something polished. It was a good workflow for me.

Two things I want to talk about.
- What it builds
- How to build it

What it builds: It builds a presentation of websites based on a video. So you would have a video describing or explaining something, say a book report, and throughout the book report you mention key characters and events in the book.

Now, when these events and characters are mentioned, you can load a webpage of the character or event to display with the video.

How to build it: It is really quite simple and has three steps, all of which require no coding.
Step 1: Enter a video URL. This is a video you can make, describing whatever it is you are presenting, like a book report. Then put that video online, or somewhere where you can have a link to it. The key is you need a link to a video.

Step 2: Open the menu on the left by scrolling over it, and use this menu to encode your webpages and resources you want displayed in the presentation, and the times these resources should be displayed, and for how long.

Step 3: Using firefox, go to file, Save Page As… and save the webpage somewhere. Now when you open saved webpage in a browser, it should have the video playing in the bottom right corner, and the encoded resource URLs displaying along with the video, at the encoded times.

I am open to even more feedback to polish it even further.

FSOSS 2010 presentation

Posted in open source, Uncategorized, video, webmademovies on November 4, 2010 by scottdowne

I have been slow with keeping up with my blog lately, but I spent a good chunk of my time focused on my FSOSS 2010 presentation, then I had to write up two demos in a relatively short period of time which will be up here shortly, but they are being used in a talk today in Spain, so I will wait until that wraps up.

So anyway, my presentation link, which is where you can view a recording of my voice played along with the video of my slides. You can also view a live demo of my slides, which were created in HTML5 as well. My presentation was on open video and the video library popcorn.js, which recently moved from the processing.js lighthouse account and into the webmademovies lighthouse account.

Follow

Get every new post delivered to your Inbox.