Categories
Google Web Development

Google Pac-Man Hacking

Google Pac-man

Quick Hack

Here’s a literally 2 minute hack for the Google Pac-Man tribute on the homepage right now to put your own face on Pac-Man (pardon my poor photoshopping):

Pac-Man raccetturaized

To try it add the following bookmarklet to your browser by dragging the link below to your bookmark bar:
raccettura-ize pacman

Now go to Google and press “Insert Coin” to play the game. Once the game loads, run the bookmarklet by clicking on it.

Hack yourself into Pac-Man

Want to make your own? You likely have better photoshop skills than me. Download this image and replace the Pac-Man (and optionally Ms. Pac-Man) images with ones of your own keeping the position and sizes the same. Save as a PNG with transparency. Then upload somewhere. Now make a bookmarklet that looks like this (replacing URL_TO_YOUR_IMAGE with the url of your image):

javascript:(function(){document.getElementById('actor0').style['backgroundImage']="url('URL_TO_YOUR_IMAGE')";})()

Now share with your friends.

Permanent Home

Google has now removed Pac-Man from the homepage but it can still be found here.

Edit [5/24/2010 @ 8:45 PM EST]: Added “Permanent Home”.

Categories
Google Web Development

Where Is The Asynchronous AdSense Google?

Anyone who cares about website performance comes to the quick realization that ads are a huge slow down. They are also the source of income for many websites. I somewhat casually mentioned back in December that Google was beta testing an async Google Analytics call. I found a bug in the early version but since updated it works extremely well and is non-blocking. It’s rather awesome.

Google AdSense like most ad networks is still a major slowdown. Often ads are implemented via a script which itself can include several other resources (including other JavaScript). Because it’s just a <script/> it’s blocking. It would be nice if AdSense would have an asynchronous version that lets you specify an element where it could insert the ad when loaded by passing an element object or id. It could then be non-blocking and speed up a large number of websites thanks to its popularity.

I can’t find any reason this wouldn’t technically be possible. It would make setup slightly more complicated, but the payoff for those who choose this implementation would be a faster website. Perhaps Steve Souders could poke the AdSense folks for a faster solution.

I’m also still hoping for SSL support. Another place where Google Analytics is ahead.

Categories
Web Development

JavaScript Flash Implementation

I meant to post this last week already. Gordon is a JavaScript implementation of Flash. You read that right. It’s written in JavaScript and executes swf files. It’s performance isn’t the same as the Flash player, but it’s surprisingly good.

This is really cool stuff. With JavaScript performance improving people are really starting to demo things that a few years ago were laughable.

Yes I know this is the second Flash related post today, but this is pretty cool.

Categories
Google Mozilla Web Development

Adventures With document.documentElement.firstChild

Here’s an interesting DOM test-case I ran across inadvertently yesterday.

For the purpose of this post assume the following markup:

< !DOCTYPE html>
<html>
<!– i broke the dom –>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Testcase</title>
</head>
<body>
<p>Something</p>
</body>
</html>

If I use document.documentElement.firstChild I don’t get consistent behavior. In Firefox and IE I get the <head/> element, which is what I was initially expecting. In WebKit (Safari/Chrome) and Opera. I get the HTML comment which I wasn’t.

Categories
Mozilla Web Development

Browser Detection In JavaScript Libraries

I was curious what browser detection in various JS libraries look like. While we always try to avoid doing browser detection, it’s sometimes a necessary evil. Here’s what I found.

Categories
Mozilla

JSNES JavaScript NES emulator

Ben Firshman wrote a rather impressive NES emulator. There are already quite a few NES emulators out there already this one impressive is because it’s written in pure JavaScript.

Yet another application of “Atwood’s Law“:

Any application that can be written in JavaScript, will eventually be written in JavaScript.

I should note that I mentioned back in January how someone ported Super Mario brothers to JavaScript. JSNES is different as it is actually emulating and reading ROM’s (looks like they are hex’d), rather than just replicating the game.

Currently it runs in all modern browsers, but only Chrome’s <canvas/> performs well enough at this point to really be playable. With WebGL coming to Firefox and WebKit we’ll hopefully see a lot more of this kind of stuff in the future.

Categories
Around The Web Web Development

JS Super Mario Brothers

Super Mario Brothers JS

Here’s Super Mario brothers rewritten in JavaScript. It’s remarkably well done, even the physics closely match that of the original game. The only thing I noticed was a slight lag in Firefox 3.0.5 which I suspect might be due to the speed of the events rather than the actual game.

There have been several attempts to port the classic game to the web including this one which is fairly complete for 14kB of JavaScript and uses <canvas/>, though I think the one above is more like the original game.

Categories
Mozilla Programming Rants

Object-Oriented Masturbation

Doing some research for an upcoming installment of an infamous series of blog posts (to be released at an undetermined date) I’ve come to notice this annoyance. In general I like object-oriented programming. I think it allows you to take a complicated problem and produce simple, more reusable and easier to maintain code. Assuming the programmer is sane individual, and that sometimes is a leap of faith.

I’m not sure if there are programmers who feel the need to complicate things just for the sake of showing off (oh, look at me!), or if they legitimately don’t know any other way. I suspect a little of both. Perhaps the programmer thought it was possible the code would grow in complexity in the future, and just wanted to prepare in advance. I don’t know. But it annoys me.

I consider this abuse of Object-oriented programming to be Object-oriented masturbation since the only one who gets any enjoyment out of it is the developer who does it. Here’s a slightly exaggerated (though not far off) example of Object-oriented masturbation typical of what I’ve seen many times before:

Objective

Sum two numbers and print the result in the format “The answer is: X” where X is the sum of the two numbers.

Correct (sane) Answer

// This is the simple, obvious answer
function sum(x,y){
    document.write(‘The answer is: ‘ + (x+y));
}
 
// To run:
sum(1,1);

Arguably, you could do the math and store in a variable if you are squeamish to doing math in any line containing an output method. Regardless, this is dead obvious and simple. And yes, this technically still does use OOP since it uses document.write().

Insane (masturbatory) Answer

function MathLib(){
    this.answer = null;
}
 
MathLib.prototype.sum = function (x,y){
    this.answer = x + y;
}
 
MathLib.prototype.getAnswer = function(){
    return this.answer;
}
 
function Printer(){
    this.preText = ;
}
 
Printer.prototype.setPreText = function(str){
    this.preText = str;
}
 
Printer.prototype.out = function (str){
    document.write(this.preText + str);
}
 
// To run
var math = new MathLib();
var print = new Printer();
math.sum(1,1);
print.setPreText(‘The answer is: ‘);
print.out(math.answer);

I did the exact same thing in 1 logical line of code (3 if you include the function itself) up above. What was gained from the object-oriented design? I argue nothing. Rewriting the first example would take a minute should something need changing. If there were a need to localize that string, I could pull it out and either make that a 3rd parameter, or some global string the function can use. There’s no benefit here. This is over engineering. There’s nothing truly reusable here. The closest is the Printer.out() method, and in reality it’s a wrapper for document.write().

The bonus joke is that the object-oriented implementation is significantly slower.

Run 1: 0.0266, 0.0451
Run 2: 0.0314, 0.0464
Run 3: 0.0329, 0.0462
Run 4: 0.0268, 0.0468
Run 5: 0.0274, 0.0475
Avg: 0.02902, 0.0464

The first example is also 62.5% faster in Firefox 3.0.4 since the all that overhead is gone. If you have FireBug installed you can check that out here.

object-oriented masturbation
ob-jikt | o·ri·ent-ed | mas⋅tur⋅ba⋅tion

  1. the stimulation or manipulation of one’s own ego by way of using object-oriented code in places where it has no advantage instead resulting in unnecessary complication and bloat.

If your guilty of doing this, please cut it out. It’s annoying. Thank you.

No I will not single out links to the pages that inspired this, but rest assured it litters the web.

Categories
Internet Web Development

MAMA Scripting Analysis

Opera did some interesting research into JavaScript used on the web. As someone who writes a fair amount of JavaScript and reads through countless lines of other people’s scripts, I found this to be pretty interesting.

Overall none of the results were very surprising, though a few things did catch my eye:

  • Omniture/SiteCatalyst Analytics ranks pretty high in the results. This to me suggests that the index of pages skews towards enterprise and large sites since Omniture is rather expensive service.
  • Google Analytics made the list to nobody’s suprise. I am however surprised not to see Quantcast which seems to be pretty popular now.
  • The popularity of window.open really hurts. Opening in a new window is so counter to how things are supposed to work. The user should decide on their own if they want to pop a new window (or tab). Most sites do this hoping the user forgets about the previous window and it improves their “average time on site” metric.
  • VBScript usage is slightly disturbing. Thankfully (in my experience) it’s most often found on older sites.

I wouldn’t mind knowing the popularity of scripts like SWFObject and Lightbox, assorted clones and PNGFix.

An analysis of graphics on the web could be interesting. GIF, JPEG, PNG. Then an analysis of the palette for GIF, JPEG compression, alpha transparency, interlacing, average file size and average amount per page.

Categories
Web Development

jQuery

Pretty big news from the jQuery camp today. Both Microsoft and Nokia will be making it part of their development platforms.

Extra interesting is that they aren’t forking, but utilizing the existing code under the same license, and will contribute and participate like everyone else.

I’ve been using jQuery on sites for quite a while now (about 2 years). Seeing more and more support for it just makes me feel that it was an even better decision.

Congrats to the jQuery team.