What are good alternatives to Fancybox?

I would recommend using color box found here: http://colorpowered.com/colorbox/ Thickbox was essentially a jQuery plugin proof of concept by Paul Irish that he has not maintained in years. Another option is to use the jQuery UI dialog box. jQuery UI is heavier but if you need any of the their other widgets like a datepicker or accordion might as well bite the bullet and go that direction.

In HTML5, are you supposed to wrap inline script blocks in a CDATA section?

The short answer is no, you do not need to include this.

You would infact not need to include the CDATA wrapper in either of your examples.  The issue arises because XML has to be "well formed", so that affects JavaScript in that all less than "<", greater than ">", and ampersand "&" characters have to be escaped using entity encodings.  None of the browsers will parse a text/html document as XML so actually encoding these characters using their entity encodings do not get unescaped as part of the parsing cycle, so the only option is to use the literal characters.  But this is invalid XML.  To get around this some people recommend using a CDATA section, which will allow any characters within to not be escaped using XML's escaping rules.  None of the browsers will do anything with this and it is only useful if there is a chance that you'll be passing your markup through an XML parser at some point.

HTML5 is a lot more liberal, the spec allows any combination of characters inside of a pair of script tags, but makes special exceptions for HTML comments "<!–", and "–>" and also the script tag pairs themselves, "<script>", and "</script>".  So long as you're careful when including any of these substrings inside of a pair of script tags you do not need to worry about including comments/escape sequences within your script tags!

What other choices do I have besides JavaScript for programming web browsers?

There is also Google Web Toolkit (http://code.google.com/webtoolkit/) which allows you to write in Java and essentially compile to JavaScript. Many of their products like gmail and maps are written using this framework. Haven't used it myself but the results sort of speak for themselves.

Concretely, how do inheritance and the prototype chain work in JavaScript?

I think this explains it pretty well:

From "Christoph" on StackOverflow.

"Every JavaScript object has an internal property called [[Prototype]]. If you look up a property viaobj.propName or obj['propName'] and the object does not have such a property – which can be checked via obj.hasOwnProperty('propName') – the runtime looks up the property in the object referenced by [[Prototype]] instead. If the prototype-object also doesn't have such a property, its prototype is checked in turn, thus walking the original object's prototype-chain until a match is found or its end is reached.

Some JavaScript implementations allow direct access to the [[Prototype]] property, eg via a non-standard property named __proto__. In general, it's only possible to set an object's prototype during object creation: If you create a new object via new Func(), the object's [[Prototype]] property will be set to the object referenced by Func.prototype."

What's the best way to programmatically check for trailing commas in JavaScript?

Closure Compiler (Closure Tools – Google Developers) enforces this rule while minifying, so if you're also looking for a minifier, it can be a good choice.

Otherwise, it's a little bit heavyweight for the task…. JSHint (JSHint, A JavaScript Code Quality Tool) is a pretty sweet fork of JSLint[1] which is designed to be much more configurable than JSLint and runs well from the command line.

[1] Technically, I think JSHint has just been rewritten so that it is no longer dependent on the original JSLint code, but it started off as a fork and is of course still inspired by JSLint (and its inadequacies).

What is a browser independent way to extract the height and width of a rendered image with Javascript?

Is it possible you checked the height and width properties prior to the image being downloaded?

You can either wait for the image to completely load (you can set an onload handler to catch this event), or if you don't want to wait for potentially large images, you can do a setTimeout() and keep checking the image for a height and width property.  I have used this approach quite reliably in all reasonable browsers back to IE6.

Is CoffeeScript a solid foundation upon which to code the JS portions of a RIA web app?

Projects like CoffeeScript, Objective J and GWT are an interesting new trend.

Google, the masters of JavaScript, have their own Google Web Toolkit (GWT) where they code in Java and that gets compiled into JavaScript. They generate separate JS files for each browser to reduce download size and the code can be heavily optimized.

During the Google Wave presentation, they talked about how amazing GWT was, how it allowed them to think differently about what's possible in browsers. Google Wave is a terrible application, with constant script timeout errors and overall poor performance. That's not good, but the newest version of Google Documents might be coded with GWT, as well as other apps that are released and in wide use.

Google's Quake 2 Demo was ported from Java with the help of GWT.

These languages on top of JavaScript come with new problems, but CoffeeScript should have the least of them. If a company like Google takes these risks, other developers should too.

If there is something serious to be afraid of, it's a lack of community around CoffeeScript, not enough projects using it, few libraries catered to it. So if we don't use it, we'll lose it.

Are there any performance consequences of having lots of HTML elements that are removed from the document?

No. I've verified with Chrome 12 and the profiler, there are no memory leaks after running your snippet. It should be said though that jQuery has it's own garbage collector, you might not get the same results adding your elements manually to the DOM.