Case-Hardened Web Badges: the Live Version .:. kentbrewster.com

Here at last is my presentation from Web 2.0, which I've been criminally remiss in posting. It's live now because of L.M. Orchard's marvelous Firefox Download Day Mega Widget, which uses some of the techniques.

Start Presentation in New Window

Please keep in mind that this is a presentation, not a book. Lots of stuff is hinted at; much was said live that isn't here, obviously. If you'd like me to present this--or something like it--at your conference, please contact me and I'll see what I can do.

Yes, the examples really do work; copy, paste, save, and run, and you'll see it live, right there in your browser.

As always, have fun, and please let me know how it goes.

Comments from before Disqus:

Witek Baryluk .:. 2010-07-27 07:02:19

@Sameer Sundresh: The problem is that without any global state, accesing internals will be pssibly using returned delegate or object. But we are using here a dynamically loaded JS (using script tag), which have callback, and this callback, needs name accessible somehow from global scope (this name can contain dots). If you will use XMLHttpRequest there should be not problem, without this trick. But random name can also help for creating classes (so you will not create lots of independed styles).

Terry Riegel .:. 2010-07-06 14:19:50

Hello, I have been reading/re-reading this and the other case hardened javascript page. It is very helpful and as I am slowly starting to get my head around what you are doing I had this thought.

Could this be used as a replacement for XMLHttpRequest? If my XMLHttpRequest returns only Javascript then it would seem that append a script tag instead of XMLHttpRequest I could accomplish the same thing.

Does this seem wacky? Are there any things I should look out for? It seems like XMLHttpRequest may be better for POST requests, but this could work just fine for GET requests.

Again, thanks for the excellent resource.

Ray .:. 2009-05-01 16:14:49

Hi Kent, I have a question about the trueName variable and the CSS array "rules".

I have one of the inner trueName DIV's using a class of a concatenated trueName + "-1" or + "-2".

So say "trueName" equals "jflkdsjfkljl".
I have an inner div called "jflkdsjfkljl-1".

I've defined this via className, but I can't figure out how to add a CSS style for it under the var "rules".

I hope I'm making sense!

Please let me know.

And thanks for posting this awesome script!

Asheesh Laroia .:. 2008-08-19 19:01:53

Thanks, this is a really clear presentation. Just a quick typo note: On the slide labeled parsing-user-input, the slide title is "Pasing User Input" (Parsing is spelled without the "r").

Kent Brewster .:. 2008-08-18 08:37:03

Hi, Sameer. $ needs to point to a global variable visible from outside the badge so incoming data from dynamically-generated SCRIPT tags will know where to land. If you click all the way through the presentation to "Getting Outside Data" -- around page 20 or so -- it should be pretty clear.

Sameer Sundresh .:. 2008-08-18 00:52:48

I don't quite understand--what exactly is the point of the whole "window[trueName] = {}; var $ = window[trueName];" construct, as opposed to simply "var $ = {};"? Since objects are passed by reference in JavaScript, the language already provides us with unforgeable names (object references, actually) for free.

Steve Wilhelm .:. 2008-06-19 00:22:58

Awesome!