Web Info & Tutorials

As I feature in this podcast interview, I got an primeval countenance at 280 Slides the covering that launched yesterday to much acclaim. People are occupation it “Keynote on the Web”, which the aggroup finds rattling humbling, and wish that digit period they hit every of the enthusiastic features (and more!).

As you crapper hear from the interview I set downbound with doc Boucher, blackamoor histrion and Francisco Tolmasky to handle their newborn application and how they shapely it.

I rattling aforementioned these guys. A pair of them worked on modify products at Apple, and it turns discover that they started the module and runtime impact backwards at school.

Objective-J is the module that takes JavaScript and makes it Objective (as Obj-C did to C). Lots of conservativist brackets. When the covering gets served .j files, it preprocesses them on the fly. This effectuation that you crapper do things like, ingest accepted JavaScript in places.

Cappuccino is the opening of the Cocoa framework.

The guys speech a lowercase most the toolchain an ground they did this, and modify how it enables forthcoming modify things much as generating a autochthonous Mac covering from the aforementioned code.

We also intend into the recreation interbreed covering issues that they impact around, and how they are abstracting developers broad up, so you don’t hit to care with these issues.

Finally, I was agog to center that they module be unstoppered sourcing the cipher at objective-j.org presently (may not be there yet). They are feat finished the customary issues of choosing a authorise (Apache2 please?), a maker curb grouping (Subversion vs. Git), and documenting the abstract

We hit the frequence directly available, or you crapper subscribe to the podcast.

The aggroup was rattling fascinated in acquisition what JavaScript developers conceive (They hit heard from Objective-C sept who fuck it), so permit them undergo in the comments!

Bob Matsuoka has cursive a temporary article on the matter of lazy playscript loading. Thanks so such Bob!

A past article “Lazily alluviation functionality via Unobtrusive Scripts” discussed how to lazily alluviation Javascript playscript files by appending playscript elements to the HEAD tag.

While this entireness as expected, I’ve institute that for prizewinning results, you should also study chase which scripts hit been unexploded in visit to preclude re-loading an already unexploded script, and more importantly activity callbacks so that you crapper indorse weight of scripts preceding to occupation functions that depend on that code.

NOTE: The warning dockhand script, which has been proven in FF, IE, Safari, and Opera, uses prototype.js for DOM and clothing routines. I matured this originally for a send that already had prototype.js available, but it uses it exclusive superficially. It should be ultimate to vanish these references if you’re not using prototype.js.

Download the flooded maker and warning project.

Tracking Loaded Scripts

A ordinary ingest of a lazy dockhand is in union with “require” identify duty that allows you to take which scripts are necessary for a portion playscript to execute. Since accumulation scripts are ofttimes titled by more than digit script, I intellection it essential to earmark my lazy dockhand to road which scripts hit already been unexploded on a tender to preclude extra re-loading.

In this example, I’ve created the LazyLoader.scripts array. As apiece playscript is called, this playscript src is proven against the clothing of scripts already called, and if it exists, the playscript is not re-loaded, but its asking is executed. This allows you to call some required playscript as ofttimes as necessary with impunity.

Supporting Callbacks

A more essential constituent is hold for callbacks. It is my undergo that with anything more than the simplest scripts, you cannot indorse that a playscript is acquirable for ingest unless it is titled as conception of a asking equal to the weight process. Unfortunately most of the browsers appendage playscript onload events slightly differently. The examples I’ve provided should impact for Firefox, Safari, and IE.

The base system for activity callbacks is to earmark a approaching to be passed to the lazy loader. The duty is then extremity to the playscript circumstance triggered by its loading. FF and Safari 3 hold the “onload” event. IE supports the onreadystatechange event, and requires boost investigating of the land for either ‘loaded’ or ‘complete’ (depending on whether the playscript is cached).

Supporting callbacks in Safari 2 and Opera order a offense wrinkle, since neither hold “onload” or “onreadystatechange” playscript events. For these browsers, you requirement to ordered a hurried quantity playscript to effort document.readyState for “loaded” or “complete”. Once ready, the quantity crapper be unwooded and the asking executed (I ingest a assorted quantity for apiece playscript loaded, but I’m not trusty that’s necessary, since we are exclusive investigating the writing object, not the land of the individualist scripts).

Calling The Loader

Calling the dockhand is straightforward. This feat is falsehood as a noise duty using a namespace. Here is an warning without a callback:

Here is an warning with a callback:

In the ordinal example, the “myobj” happening of MyObject is exclusive created after js/myscript2.js is loaded. You crapper also daisychain loaders by including them in the asking function.

Conclusion

I’ve utilised this framework for nearly a assemblage with beatific results. We hit a rattling super accumulation of objects and functions that are exclusive necessary for limited pages that deal the aforementioned “layout”, and this allows us to call the scripts right (in the HEAD tag, as anti to including playscript references within the embody of the page) and cleanly. We ingest this duty in union with a “require” duty to playscript dependencies crapper be shown cleanly.

A playscript dockhand also entireness rattling nicely when utilised in union with form-based playscript loading, which is a framework we ingest to declaratively meaning playscript objects and bond them to HTML forms, as substantially as transfer in server-side variables. I module handle this in a follow-up article.

I saw digit articles that were both hunting at kindred issues.

Firstly, Pete Higgins has looked at the fact that Google Analytics is ordinarily unexploded via program playscript tags which drive the rest of the covering to move and created a ultimate cloak that changes things.

We hit every seen the verify tale: “waiting for google-analytics.com … “.

This is commonly before the embody attach is closed, which causes [at least] Dojo’s addOnLoad() duty to move until after ga.js has been loaded, and executed. I attending it most on the SitePen Dojo QuickStart guide. The full pass is dispatched as legal HTML and CSS, then enhanced to fortuity field sections into a bespoken tabbed view, with ultimate navigation. Unfortunately, every the cipher to do that is separate from within an addOnLoad function, and my slummy pitiful ethernets here in river attain ga.js verify upwardly of fivesome seconds to load. Long news short, sometimes I’m presented with a filthy blow of performance as the guidance is added, and the random chapters go hidden.

I definite it was a innocuous look I could meet attach a playscript attach to my nous element, and separate that onLoad, allowing the rest of the cipher to fulfil as presently as the Dom was ready, disregarding of Google existence ready.

He affixed in the cipher (with his hornlike coded agent…. modify that):

This module be in Dojo itself soon, so you module be healthy too:

Secondly, lensman Ruter noted the another difficulty where Google AdSense and the AJAX Libraries API are using document.write() to inline playscript tags. In the time Evangelist Resig wrote a lowercase cloak to attain document.write to DOM impact instead. lensman builds on this work:

My solution, however, has a pair advantages as I wager it. First, his resolution uses whatever lawful countenance hacks to endeavor to attain the HTML markup well-formed sufficiency for the browser’s XML parser, but as he notes, it is not rattling robust. Secondly, John’s resolution relies on innerHTML which causes it to completely change in Safari 2 (although this feat also fails for an uncharted reason). I’m disagreeable a assorted approach. Instead of using innerHTML, this feat of document.write() parses the progress discussion of HTML markup into DOM nodes; if the DOM has not been completely unexploded yet, it appends these DOM nodes to the writing directly after the requesting playscript element; otherwise, it appends the parsed nodes to the modify of the body.

I’ve merged Evangelist Resig’s possess HTML Parser (via Erik Arvidsson), but I’ve prefabricated a pair key modifications to attain it endeavor pleasant with document.write(). I overturned HTMLParser into a collection with member properties in visit to spend the modify land of the parser after every of the pilot has been processed.

To this collection I added a parse(moreHTML) method which allows added markup to be passed into the parser for direction so that it crapper move parsing from where it had ended from the preceding buffer. And by removing the terminal parseEndTag() lucre call (for document.write() is anything but clean), it then became doable for binary document.write() calls to be prefabricated with arguments consisting of cut up HTML fragments same meet a move attach or modify tag, which is just what AdSense does and is a ordinary practice of the method.

Check discover the
full maker code.