Nov 10

Late Night Snack Hack

image

13 hours in now. Actually getting some code done if not slowly.

So far I have a canvas loading up and drawing sprites, Backbone MVC setup, basic mouse over and click on events.

Problems I have so far are MongoDB keeps disconnecting but that could be my shit internet connection. Not quite sure how I’m going to do the front end database binding yet. And I cannot seemed to deploy to Nodejitsu at the moment.

Pressing on. Switching to backend again, sort the DB out next and setup Socket.io

Nov 09

NKO3

Super excited! In just over 15 hours at 10am tomorrow Node Knockout 3 starts in Sydney. I have so much shit on my plate right now I can hardly see over it but I’m taking 48 hours off from it all to compete. In the end I decided to do a solo effort and will be doing a game this year. In fact, I think this is the game I wanted to do last year. Half RTS, half trade/piracy game. I’m currently doing a bit of writing things out and sourcing Free to Use graphics and audio.

On other parts of my stacked ass plate this coming Wed/Thurs is JSConf.au and the following Wednesday I am speaking at SydJS. The theme is hardware :)

Oct 12

Running with Crazy Ideas

Lately I have been doing a lot of hacking with Esprima. I’ve been using it to build tools for working in teams. One of my current goals with it is to be able to unit test without writing tests. Mostly an interesting idea at the moment, not sure how it will totally pan out.
Then… the other night (while I’d admittedly had a couple beers) I found myself thinking, why the f@#k shouldn’t I output AVR Assembly?! And so I have. Its very much in a fledgling stage but today I manager to turn this

for(var i = 0; i < 10; i++) {

}

into

ldi R16, 10
loop:
dec R16
brne loop

I am already working on the next steps like proper variable declaration and implementing a larger function set.

Jun 06

First NPM Package

I’ve been using NodeJS for a long time. Real long time, like before it had a version number. When V8 was open sourced I jumped right on it to explore an alternative to Rhino. I liked things I could do with Rhino but the VM startup time was annoying. Shortly after my exploration of V8 I discovered Ryan Dahl was way ahead of me on the things I wanted to accomplish so I switched over.

I’ve written hundreds of modules. Usually banged out quickly to accomplish some task. Always telling myself, I’ll come back to clean this up and release it. I am sometimes terrible at cleaning up my personal work if it works. With my current free time I’m pushing to 1) Clean up and release 2) Just release, gauge interest and cleanup as needed.

I have a couple of consulting projects I’m doing at the moment that fortunately need some modules I’ve already written. They needed only a bit of tweaking and they where ready to use. With this I’ve decided to package and release to NPM.

If interested the package I published is backbone-define. Adds the method .define to each Class. This allows ExtJS style Class definition. The exception being they are not created globally. On bootstrap it adds empty Objects as Backbone.{Collections,Models,Views,Routers}.
Example:


Backbone.Model.define("Person", {
    initialize: function(attributes) {
        Backbone.Model.prototype.initialize.call(this, attributes);
    }
}, {
    someClassProperty: "withvalue"
});

var zaphod = new Backbone.Models.Person({
    name: "Zap"
});

This may not seem terribly useful at first but come as a part of a different project. I needed a way for ExpressJS to be able to serve up Models/Collections. It needed to be done in a way that the frontend code was aware of the Class names. This next project will be released fairly soon.

NPM: backbone-define
GitHub: backbone-define

Feb 21

Isn’t this part of the job?

In my 10 year career as a web developer I’ve taken pride in my ability to bend various browsers to my will. In fact, this how I excelled in my career. I knew a lot of these ‘tricks’ to get browsers to behave the way we wanted. Tons of these abnormal techniques became standard parts of web development. Frame busting for 3rd party widgets seems acceptable enough. Even AJAX started as using a component intended for one thing in an unusual way. Most glaringly, fuck your same-domain policy, I’m using JSONP!
All this bitching lately makes me laugh. Good job big G, you gamed the browsers. Apple and Microsoft, step up and get your shit working right instead of pissing and moaning that Google did you wrong. Everyone else, go back to posting on Facebook about how pissed off you feel about this monumental privacy violation.

Jan 03

Set your Setter and Get your Getter

Getters and Setters are a lot of fun to use. Unfortunately not all browsers implement them. According to John Resig’s post JavaScript Getters and Setters only two browsers currently support them (Opera 9.5 has since been release so make it three). Even before I was really into Javascript programming I used PHP’s Magic Methods __set and __get.

It is with much happiness that I think I can finally say, without seeming like a fool, that: “JavaScript Getters and Setters are now prevalent enough to become of actual interest to JavaScript developers.” Wow, I’ve been waiting a long time to be able to say that.
John Resig – JavaScript Getters and Setters

As much as I would love this to be true, I still do not quite think we are there. Rhino adding support was good, because with that John was able to implement window.location in env.js

So now that we have some background on setters and getters in Javascript. Here is my implementation for browsers that do not already support it.

                        (function() 
                        { 
                                var gettysetty = 
                                { 
                                        clock: 0, 
                                        gets: Array(), 
                                        sets: Array() 
                                }; 
 
                                function procVars() 
                                { 
                                        // run through all the getters, update the var from the function 
                                        for(var i = 0; i < gettysetty.gets.length; i++) 
                                                gettysetty.gets[i][0][gettysetty.gets[i][1]] = gettysetty.gets[i][2](); 
 
                                        // same thing here, but instead check that the var has not changed, if it has, run the setter func 
                                        for(i = 0; i < gettysetty.sets.length; i++) 
                                                if(gettysetty.sets[i][0][gettysetty.sets[i][1]] != gettysetty.sets[i][2]["ogVar"]) 
                                                { 
                                                        gettysetty.sets[i][2].apply(gettysetty.sets[i][0], [ gettysetty.sets[i][0][gettysetty.sets[i][1]] ]); 
                                                        gettysetty.sets[i][2]["ogVar"] = gettysetty.sets[i][0][gettysetty.sets[i][1]]; 
                                                } 
                                } 
 
                                var getterName = (Object.__defineGetter__ != "undefined") ? "defineGetter" : "__defineGetter__"; 
                                Object.prototype[getterName] = function(v, f) 
                                { 
                                        this[v] = f(); 
 
                                        gettysetty.gets.push([this, v, f]); 
 
                                        if(!gettysetty.clock) 
                                                setInterval(procVars, 13); 
 
                                        return this; 
                                } 
 
                                 
                                Object.prototype[(Object.__defineSetter__ != "undefined") ? "defineSetter" : "__defineSetter__"] = function(v, f) 
                                { 
                                        f["ogVar"] = this[v]; 
                                        gettysetty.sets.push([this,v,f]); 
                                        if(!gettysetty.clock)
                                                setInterval(procVars, 13);
                                }
                                
                                function lookup(gs, v)
                                {
                                        for(var i = 0; i < gettysetty[gs].length; i++)
                                                if(gettysetty[gs][i][0] == this && gettysetty[gs][i][1] == v)
                                                        return gettysetty[gs][i][2];
                                                else if(gettysetty[gs][i][0] == this)
                                                        return;
                                        return;
                                }

                                Object.prototype[(Object.__lookupSetter__ != "undefined") ? "lookupSetter" : "__lookupSetter"] = function(v)
                                {
                                        return lookup.apply(this, ["sets", v]);
                                };

                                Object.prototype[(Object.__lookupGetter__ != "undefined") ? "lookupGetter" : "__lookupGetter"] = function(v)
                                {
                                        return lookup.apply(this, ["gets", v]);
                                };
                        })();

                        var x = {};
                        x.defineGetter("time", function()
                        {
                                return (new Date()).valueOf();
                        });

                        x.defineSetter("x", function(val)
                        {
                                this["x"] = val+1;
                                alert("new value: " + val);
                        });

The code here is fairly simple. When the first getter or setter is define a timer is started. It iterates through all the defined getters and executes their function updating the value it is responsible for. Then it iterates the setters, checking if the current value is different from value it had when set. If they are different it runs then setters function and updates the 'old' variable to reflect the new one.

This only supports adding by the Object methods, so you cannot define them in an object notation. As for the future, v8 supports them, and I looks like Internet Explorer 8 may support some variation in some very Microsoft way. defineProperty anyone? While this solution is far from bullet proof and probably will scale terrible it could possibly work as an absolute fallback.

Nov 07

New Cometd client and server demo

On and off for the last couple weeks I have really been pushing myself to learn Java better. I constantly find myself unable to do things I want to with the languages I usually use (PHP specifically). As I am getting better I am coming to like it a lot more. As any reader of my blog (do I actually have ‘readers’?) know, I am really into Cometd, which the most major implementation of is written in Java. So in order to utilize Cometd Java and push my jQuery plugin further along, I figured it was high time I learn Java. I am really glad I am too. Just in time for my new Android phone too :)

CometdMap
Almost every demo of Cometd out there is a chat application, next up is stock tickers. There are one or two more I can think of off hand, none of which could be made into something more useful. I have had an application idea in the back of my head for quick some time. I really like doing work with maps, have been doing professional Google Maps work for a couple years, had to get the (second) dorkiest bike computer with GPS to map my rides. I have wanted for some time to do a real-time map. CometdMap is a proof of concept of that. It has no actually data input at the moment, infact, it is really basic right now. What it really does is show how simply you can build a Cometd Java app. I was really surprised at how easily I built this with my limited knowledge of Java.

What does it do
Right now, if you build and run the application you will get a simple Google Map. Clicking on the map will place a marker. Wowee! Pretty basic yeah, but what is going on here. Clicking the map publishes the point to the server, it is not until the server returns the data to the subscription callback that it is added. That is about all for the client side. On the server side two things are going on. First, when a new client joins they are added to a list, very similar to the way the Cometd Chat demo handles clients for private messages. Second, when points are published they are tracked on another list. So what can we do with these lists? Add a couple points and reload your browser. Since you are now a new client and there are points on the list, the old points are sent back to you. This will work for any new clients joining also. With multiple clients connected markers are updated to each in real-time.

Download & Build
Download
As I have mentioned before, the Java build environment and I do not exactly get along. In the tarball there is a script call build (partially ripped from the Harmony build script). If you have built the Cometd demo from Jetty with Maven this script should work just fine. Otherwise change the paths in the build (and server) scripts to point to the directories where your Jetty and Comet components are.

Enjoy, hopefully everyone is able to build with few problems. Check back in a couple weeks to see what I have in store next. Cheers, Morgan.