Bombermine — Massively Multiplayer Bomberman

Bombermine is an excellent MMO HTML5/JS game built using Angular, Canvas and async.js.

Be warned it is a massive time sink.  I’ve just wasted over an hour playing this brilliant little gem.

Screen Shot 2013-03-04 at 10.59.51

This weeks javascript roundup

I thought that I’d start doing a weekly list of Javascript (and other tech) that caught my eye.  So, to kick it off here is the first list:

Reading

“localStorage” denial of service attack

Even though the Web Storage specification says user agents should limit the amount of space used to store data, a new exploit uses it to store gigabytes of junk. The exploit is based around storing data per-subdomain, which gets around the limits most browsers have already implemented. Users testing it found Chrome would crash when run in incognito mode, but Firefox was immune to the attack.

Other security researchers have raised concerns about localStorage in the past. Joey Tyson talked about storing malicious code in localStorage, and Todd Anglin wrote about some of the more obscure facts about localStoragewhich touches on security.

PhoneGap: An Unexpected Journey

This is a story of a web developer, who’s a complete newbie in mobile world and who were given a task to research and develop a tablet application from scratch, re-using his experience in web technologies, i.e. using PhoneGap.

Choices, Choices: Dart or AngularJS?

In this great discussion on Google+, read some of the debate from a real developer trying to make the choice between Dart and AngularJS for his next project.

Learning From the Brackets Source Code

Brian Rinaldi takes a look inside the Brackets’ source to examine what techniques, libraries and frameworks you can learn using examples directly from the Brackets’ code.

Cloudinary Tutorial

Cloudinary is best described as a realtime ImageMagick in the cloud with versioning, storage and CDN services.  This tutorial introduces Cloudinary, and demonstrates how to build a gallery application using Express and Node.

Code & Libraries

Sails – Realtime MVC Framework for Node.js

Sails.js makes it easy to build custom, enterprise-grade Node.js apps. It is designed to resemble the MVC architecture from frameworks like Ruby on Rails, but with support for the more modern, data-oriented style of web app development. It’s especially good for building realtime features like chat.

Oooo shiny!

Nodecopter

Well, looks like I’ve found a new hobby!  Flying node machines what could be better?

NodeCopter.js is a full day event where 15 – 60 developers team up in groups of 3.  Each team receives one Parrot AR Drone 2.0 and spends the day programming and playing with it. At the end of the day, each team gets to present their work to the other attendees.

While I can’t make the London event, I am certainly going to get an AR-Drone and hook up my own personal drone of destruction.

Releases

Node 0.8.21

Node 0.8.21 is out. There are fixes for the http and zlib modules, so it’s safe and sensible to update.

Meteor 0.5.7: Major Scaling Update, New DDP Version, EJSON

Major improvements: New revision of DDP (Meteor’s protocol) with different messages and a version negotiation step; extensions to JSON to represent additional data types; and new database observer and publish APIs.

Sources:

Javascript Weekly | DailyJS | Reddit

Does new Date(‘2013-03-01′) == new Date(‘2013/03/01′)? Not always…

Well this is another Javascript oddity. It turns out that depending on the timezone of the runtime, the date format might be something that has a hugely important impact on your app.

The example came up as follows in the EST timezone:

new Date('2013-03-01') 
Thu Feb 28 2013 19:00:00 GMT-0500 (EST)
new Date('2013/03/01')
Fri Mar 01 2013 00:00:00 GMT-0500 (EST)

However, in the GMT timezone we get this:

> new Date('2013-03-01')
Fri Mar 01 2013 00:00:00 GMT+0000 (GMT)
> new Date('2013/03/01')
Fri Mar 01 2013 00:00:00 GMT+0000 (GMT)

The most important thing to remember is that the Date stores dates in UTC, but default ‘toString’ output is local time. If you do not follow (part of) ISO8601 it assumes the input is local as well, unless a timezone or offset is specified

One solution is to abstract the problem with a library such as moment.js. Moment.js is an excellent library that gives you the Date object you have always wanted.  The other way is to follow ISO8601 date formats if you want consistant date handling across timezones.

This leads me to my obligatory xkcd post – the proper usage of numerical dates as per ISO8601:

ISO 8601

ISO 8601

The Quest

I’ve spoken a few times about my quest for a simpler toolchain, but to keep current with new technologies at the same time.  This is not language face-off, but a reflection on where the industry is headed and the new problems we need to solve in the near future.

ColdFusion, my good friend

I’ve been working with ColdFusion (CFML) as my primary development platform now for about 10 years, and I’ve helped to build many successful sites/engines using CFML like Meno Yearbooks & Raileasy.

I also purposely say CFML now and not ColdFusion since the offering from Railo is frankly just amazing and I now find myself biased towards using Railo above ColdFusion when choosing a platform lately.  I also find myself wondering if ColdFusion will become “Apache ColdFusion” in a few years time as awaits of Flex (for better or worse).

And of the alternatives?

I tried to get into Ruby on Rails, but I just couldn’t.  I really liked the idea, but really disliked the syntax.  Python was great, but just like Ruby it didn’t really solve any problems that I couldn’t solve at least or almost as fast in ColdFusion.  I also had the displeasure recently of playing with Perl and Catalyst, which instantly reminded me why I stopped using Perl back in ’97.

However this week I have stumbled upon Node.js, and am having a great time with it.  It is still young I grant you, but there is something very special about the problems that Node can solve that holds great promise.  Just like Rails finally brought Ruby into the limelight, I think that Node is upon the same cusp (I played with Ruby with a colleague @ Tiscali back in 2001 & and it was novel then, but “had a funny syntax”).

Application servers are fat

This brings me to the thing that has really been bugging me the most about application servers like ColdFusion over this last year.  They were great for what they did and solved massive problems that we faced in web development around 2000.  We needed to build mostly table based, functional websites without being able to assume Javascript would be 100% available.  We had the browser wars where we had to design cross platform and the server did the bulk of the markup.

But fast forward to today and we have a different environment.  Everyone is toeing the HTML5/CSS3/Javascript line, which Adobe conceded in such spectacular fashion recently.  Hell, even Microsoft have thrown in the towel on Silverlight.  The arms race now is about the best HTML5 support and fastest Javascript engine, it isn’t about markup any longer it is mainly about pumping data around.

It’s all about the data baby

ColdFusion can quite competently act as a middleware for data centric apps, but if we are honest it’s main forte is building HTML sites.  But the fact is that we are moving more and more towards a point where the app server sends a initial large HTML payload and then thereafter sending smaller JSON/AJAX packets around or loading partials directly into DIVs with JQuery and the like.

ColdFusion is great, but I am thinking more and more lately that it is totally overkill for what I am trying to do.  That is to build optimized fast mobile applications that suck lots of small amounts of information down, be that JSON or HTML.

To enable the rich experiences that our clients are demanding now we will inevitably (especially on the mobile side) go down the thin client type approach rather than HTML heavy payloads.

I think that Node.js will fit the bill of being a light and nimble middleware for data.
ColdFusion was the middleware that got the data from the database, rendered HTML and threw it at the browser.  Node just throws the data, the browser can do the rest.

Yay, another silver bullet

Well of course it goes without saying that Node isn’t suitable for everything, but I do think that it helps solve a problem that we will encounter more and more in our professional lives.

Playing with Node.js – the basics…

Today has been fun learning Node and finding out how powerful this thing really is. Here are a few simple snippets to illustrate the power of Node:

Simple web server

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');

That can’t be it surely? Oh yes it is, you now have a very simple webserver sitting on port 3000 just waiting to say hello.

Phhff, that’s just simple and isn’t that impressive

OK, but all that does is say “Hello World” to every request, and that’s not very much use. What if it does something useful like serving static files, essentially a very basic webserver.  That will make it much more complicated since we need to use the connect webserver module, and the huge code for that is:

var connect = require('connect');
var server = connect.createServer(
	connect.logger(),
	connect.static(__dirname + '/html')
).listen(3000);
console.log('Connect server running at http://127.0.0.1:3000/');

That is all that is needed to serve everything in the “html” directory, and log all connections in an Apache log format to the console. The connect module has support for cookies, vhosts, session management and much more.

OK, that’s kinda impressive but is that it?

That’s just the tip of the iceberg, what about a chat server? That must be much harder broadcasting to all the clients and all that. Well it is harder, but only 29 lines harder.

var net = require('net'),
    carrier = require('carrier'),
	connections = [];

var server = net.createServer(function(conn) {
	var username;
	connections.push(conn);

	conn.write('Welcome to the Odyssey Of Mayhem chatroom!\n\n');
	conn.write('Please type your name:');

	conn.on('close', function(){
		var pos = connections.indexOf(conn);
		if(pos >= 0) connections.splice(pos, 1);
	});

	carrier.carry(conn, function(line) {
    	if(!username){
			username = line;
			conn.write('Hello '+username+'! There are '+(connections.length-1)+' other people on the server\n');
			return;
		}

		if(line == 'quit'){
			conn.end();
			return;
		}

		var feedback = username + ': ' + line + '\n';
		connections.forEach(function(one_connection){
			one_connection.write(feedback);
		});
	});
}).listen(3000);
console.log('Simple chat server up on port 3000.');

There you have a simple chat server that remembers your name, and broadcasts your inner thoughts to whoever else dares fire up a telnet client! What was that, “pics or it didn’t happen”?  OK, here you go…

3 terminal windows. 1 for Node, and 2 for chat clients.

Oh, I’m going to have soooooo much fun in the coming weeks. :D

Some Node.js resources

I’ve been playing with Node for the last 24 hours and I absolutely love it.  I haven’t been this into a language since I got sucked into Pike almost 10 years ago when I played with Roxen.

Here are some resources that I’ve been perusing:

I’ll be writing some posts detailing some of the cool things that you can do very easily in Node.

Damn you Mr Mclean, damn yoooooouuuuu!

The job is on

It all started innocently enough when my good friend and partner in crime Gordon McLean sent me a question:

Do you want to see if you can get an iPhone to send an SMS from a Mac/PC.
Essentially I am looking for a SMS service that can be triggered from
Servoy that uses a standard phone ideally one unlimited free texts via
AT commands.
Dont spend frigging hours on it mind, there is virtually no budget.

Servoy for those who don’t know is a Java based RAD tool to produce desktop/web apps very much in the same way as Filemaker Pro, Visual FoxPro do.  It’s a great tool to build desktop business app quickly.

The Options

So, I wondered off in search of a solution and since the budget was “as tight as a ducks backside”, a KISS approach was called for.  A short while later I fired off a reply saying suggesting the following solutions:
  • Purchase the Prolific Axis serial port plugin for Servoy, and hope it works.
    Costs almost the whole budget however.
  • Write our Servoy plugin utilising the standard Java serial communications API
  • Write a script that will sit along side servoy (but must be installed separately from Servoy).
    This can be in a number of languages like Perl, Python, Ruby or Javascript.

We agreed that the fastest and cheapest way was to build a proxy app that would accept HTTP REST calls, and then communicate with a phone over a serial port.

The quest for a simpler, more productive life

Since I’m in a push to reduce complexity and the number of technologies I finally suggested that we use Node.JS since I dislike Perl, haven’t every got around to working with Python and I’m just not getting in to Ruby that much.  My logic being that otherwise the choices are Perl, Python or Ruby and all use different syntax to Javascript; since we know Javascript, why learn another language?  The response was susinct:

F@*k me, I never thought I would hear you say “use a known technology” ;)
Are you feeling OK !?!

You see, I like shiny and new things – that is why there is an “Ooooo shiny” category to my blog.  I normally learn a few new technologies a year just to keep up to date and have a play.  The bleeding edge is where the cool toys are. ;)

There be gold in them there hills

But, you see despite myself seeking safe ground this time, it would seem that I have uncovered shiny gold!  The more I read about Node, the more I liked and now I am totally smitten.

One key difference is that Node uses an event-loop rather than the norm which is threads.  The problem though is that you need to look at the problem differently since the whole thing is event driven and non-blocking.

Traditional appservers will do an operation, block (wait for IO from database) and then continue with the code.  But while the server is waiting, that process can not do anything else other than wait.  This is why app servers have threads so that there are multiple worker-threads waiting for incoming connections and hopefully no one is kept waiting (assuming we don’t run out of threads).

Upon further reflection it occurred to me that with most of the applications that I’ve worked on over the last decade very rarely was CPU load the major issue.  Most of the time it was either IO (database or disk) or low memory issues.  Indeed the main cause of high CPU loads was when the Java garbage collector “goes nuts” when memory is very low.

So it seems that my inner explorer and lover of shiny things has thwarted my quest to reduce the number of new languages/platforms that I play with.  Oh well, have to go and play with the new toy now. :)

Appcelerator Titanium – Ooooo, shiny!

I’ve been pondering a lot recently about the “next thing” and what that platform will be.  From listening to the recent Adobe MAX11 keynotes, I do get the impression that Flash is may now be getting close to retirement.

I am really enjoying playing with all the HTML5 features, canvas especially.  But I want to slim down my toolbox, and not keep adding extra languages (I’m playing with Ruby and Python already).  I also want to write it once, but if required be a native app to take advantage of native API calls and to skip around those IE6 holdouts.

So I thought that there must be a native Webkit wrapper out there, something like PhoneGap but for desktop and mobile.  The only thing that I could find of substance was Appcelerator’s Titanium.  Titanium really does seem to be the best of both worlds, it can use native widgets and extensions and also be a HTML5/Javascript app (native, hybrid or webapp).  What’s more is that you can include (inline) PHP, Ruby & Python scripts within your Javascript – that is a sweet feature that allows you to use already built solutions in PHP/Python/Ruby that you’d otherwise need to do in Objective C.

I’m sure it is not all roses, and there seems to be some discontent on their developer center, but all in all it really does look very interesting.  Take a look at the CODESTRONG conference videos to see for yourself.

 

Follow

Get every new post delivered to your Inbox.

Join 143 other followers