Javascript
Hunt the Wumpus
I am taking a course in discrete mathematics this semester, and the professor suggested we take a look at a game called Hunt the Wumpus.
Hunt the Wumpus was originally created in the 1970s, and unfortunately, most of the versions you can find on the web today are easier and less interesting that the original. The original eschewed a square grid for the game board and instead used a “squashed” dodecahedron, where each game space was one of the vertices.
It is also noteworthy for introducing the superbat, a feature of other games (including Zork) that followed Hunt the Wumpus, and for the humorous feedback (e.g. “ZAP–Superbat Snatch! Elsewhereville for you!”) that many of my favorite games adopted.
At any rate, I decided to recreate a version of the easier and less interesting grid-based game in Javascript:
Hunt the Wumpus
Javascript insertAfter()
There is no Node.insertAfter() DOM function in Javascript, but it is clearly something that developers would like.
As the Gecko DOM Reference for Node.insertBefore() points out, this can easily be achieved with
parentDiv.insertBefore(nodeToInsert, nodeToInsertAfter.nextSibling);
If nodeToInsertAfter doesn’t have a next sibling, a NULL value will be returned and nodeToInsert will be inserted as the last child of parentDiv.
If you find it frustrating to type insertBefore when you want to insertAfter, that’s OK: you can add that function to the Object object:
Object.prototype.insertAfter = function (newNode) { this.parentNode.insertBefore(newNode, this.nextSibling); }
Now you can type:
nodeToInsertAfter.insertAfter(nodeToInsert)
jQuery is AWESOME
I just took (and finished) a small project to add some ajax and javascript whiz-bang to a website. (actually it was the home page for a web development company you would think that they would keep that in house) and I decided to try out jQuery.
It blew my socks off. I’m really really impressed with jQuery, and I’m looking forward to using it a lot more. It took me an hour or two to really get a handle on how a few parts of it work, but man is it a powerhouse. If your website needs to sing and dance…. jQuery is the way!
Javascript textarea counter
I’ve been thinking more about the textarea counter issue that I mentioned in my previous post (”Users Paste Differently“).
First of all, I noticed that some of the textarea counter scripts date back to at least 2000, so this has been a problem that developers have been looking to solve for 8 years. I checked the HTML 5 specification and found that in HTML 5, the textarea element has a maxlength attribute. Presumably user agents will build in the most elegant solution.
But what is the current most elegant solution? › Continue reading
Users Paste Differently
Paste!
Almost all of them rely on the onKeyDown and onKeyUp events to trigger the script. However, some users still manage to submit text that exceeded the limits, even though the application required Javascript. I could not for the life of me reproduce this issue…until today.
› Continue reading
javascript’s parseInt is pretty evil
Javascript uses the + symbol for both addition and concatenation. This means that if you want to add a numeric value to data pulled from a user, you need to cast it to being a numeric type, like for instance an Int. Makes sense, so I use the parseInt function to cast with. OK, that’s fine so here is the kicker, if you pass it “09″ it generates the value 0, not 9.
Hrmm, well that’s odd. If you pass in “9″ it returns 9, but if you pass in “09″ you get 0. I’m lucky I caught that in testing. It turns out that if you lead with a 0 then parseInt interprates as the value as an octal number. There is a way to deal with it though, you can pass in a second variable telling it what base the numbers it should be reading are.
So really you want parseInt(var, 10) not parseInt(var)
Why Doesn’t TinyMCE load in IE?
looks like it is all due to the insertAdjacentHTML call being used in another library. In my case, wz_tooltip. Oh wow did this hurt me. So that horror of a project that keeps on poking its head up sent in another small request… put tinyMCE or FCKeditor into one page on the website. Offered 5 hours. Well TinyMCE is already installed, so I figured this was a chance to recoup a little of my loss on this project. Sure enough, I activated TinyMCE with about 5 lines of code, checked that it worked in Firefox, and billed my money.
Next morning I get a call. The thing doesn’t work in IE. So I try a few quick and obvious things, move around where it gets loaded, try a few different load orders. No luck. Grr. I was going to type out my whole damn process, but I realized that’s not what people want to read…
Short version is: the wz_tooltip.js library conflicts with the TinyMCE library ONLY in Internet Explorer. This is because of a call to insertAdjacentHTML which is an IE-only javascript call (thanks again for embrace and extend M$). As a workaround, you can modify the wz_tooltip file by commenting out from line 397 (inclusive) (thats: if(wztt_body.insertAdjacentHTML) ) down to line 400 inclusive (thats : else if(typeof wztt_body.innerHTML != wztt_u && document.createElement && wztt_body.appendChild) ) And now I’m off to submit bug reports.
What a waste of a morning.
The Javascript Dollar Sign ($) Function
Recently, I’ve been seeing a lot of Javascript functions prefixed with a dollar sign ($) or simply named $. I thought, what sort of magical property does the dollar sign have in Javascript? What sort of esotericism had I uncovered?
I checked the O’Reilly Rhinoceros book, and found that the dollar sign has no special properties.
However, I have come to discover that dollar sign function has become the more-or-less de facto shortcut to document.getElementById(). Let’s face it, we all use document.getElementById() a lot. Not only does it take time to type, but it adds bytes to your code as well.
Here’s the version from prototype.js, which can return more than just a single element:
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}
Because it has become a common shortcut to document.getElementById(), it means that various Javascript libraries should play nicely together: if the dollar sign function in one .js file is overwritten by the same dollar sign function in another .js file, everything should still work. That also means that creating your own dollar sign function that does something different is probably not a good idea.
In case you were wondering, the underscore has no special properties either. But let’s face it, $(’myVal’) looks more like programming than _(’myVal’).
Strange Projects on the Horizon
On Friday I was approached to work on one of the oddest and probably most ill-conceived projects I have ever encountered, and I might just take it anyway. Basically a company has a very good, very modular framework built for them in C# using .Net by a bunch of Russians who they hired remotely. I can tell by looking at the output that the code is quite modular, if it might be a little unclean. It looks like it would actually be some pretty good code to support.
They have been selling boiler plate instillations of this framework, with just some simple skinning done, and selling them hand over fist, apparently they are making a mint.
So anyway, For some reason they want to hire one of my companies, (and hence me) to do the occasional “special project” for clients who need something that is just slightly more custom than what they have. There are a few basic problems with this.
1) I don’t know C#
2) I don’t know Russian
3) I don’t think I even get access to the code base at all!
It seems that each part of the site that the framework builds can be loaded as a “section” which can easily be included on sites other than the primary site. (that is to say you can throw a little javascript or something into your own website, and have it display, say the friends list from the primary site, and it was built to have this work). For some reason they think it’s a good idea to have me build a second site, in php, that covers their additional functionality, and then have it load each of the bits of the primary site and display them. This seems bizzaro to me, but hey, I’m willing to do it because I bet I can learn something cool and they would still be paying me.
What I’m really hoping is that this is NOT actually what they expect me to do, and that there is a SOAP interface to what the Russians built.
Does releasing code to the public inspire extra effort?
About 2 years ago, I created a javascript image/photo gallery to embed gallery functionality into a web site using only client-side processing. Although I created it for a specific purpose, it was generic enough that I decided to make it available for other people to use on their sites.
Imagine my surprise when people took me up on that offer.