forcing repaint DOM in IE6 and IE7?

I have loop that makes server-side Ajax calls on each iteration, and returns data. This could be 50 iterations, 500, 5000, whatever. Upon each iteration, I update that particular row with a server-side response (i.e. "success" or "fail"), and then update the total count processed ("26 out of 432 processed"). -- I update the innerHTML of a div or span, and another div showing the total number of records processed (at the end of an iteration, or in the onComplete callback handler of the Ajax.Request). That is all working perfectly fine... in Firefox, Safari, and every other browser except IE6 and IE7.

I have tried IE hacks such as adding a class to the div, and dropping a class from the div, adding and dropping child nodes from the div, etc -- to attempt to force IE to repaint, I have tried waiting a small interval, to no avail. If you pop up an alert("hai"); at the end of the iteration, the the IE6 and IE7 DOM will repaint with the updated values. (btw, how dumb is that?)

Does anybody have any tried and true ways to make IE6 or IE7 repaint a particular DOM element in these cases (without obviously popping an alert)? It works flawlessly in Firefox. I know IE is a steaming pile, but just wondering if anyone has had any success with a hack that works here.

Sizzle

Browsers are getting faster (see: Google Chrome, see next release of Firefox) with JIT compliation, improved Javascript VM's, etc... but not only that, developers are getting better at writing codez and finding things in browsers... all of it makes the interwebs better: It's good to keep an eye on what is coming down the pike, as they say:

John Resig (jQuery author)... is working on Sizzle... which will become part of jQuery... check out the performance here:
http://jamesdonaghue.com/static/peppy/profile/slickspeed/#

Here's a link to Sizzle on GitHub: http://github.com/jeresig/sizzle/tree/master

Also, it was bounced around today on the Prototype mailing list that Prototype (traditionally slower than other mainstream libraries when traversing the DOM with CSS Selectors), is mulling over including Sizzle as well. Very nice developments -- check them out.

Ruby on JavaScript

I wasn't expecting anything like this until Screaming Monkey... and while that is a different animal, this is very damn cool! Ruby running inside script tags running on browser's JS engine, also running on Flash...available NOW!:

http://hotruby.accelart.jp/

here's the source: http://hotruby.accelart.jp/js/HotRuby.js

http://ajaxian.com/archives/hotruby-run-ruby-on-a-javascript-interpreter

Language-Specific VM's as a Google Gear?

Has Google Gears or Adobe AIR team considered adapters to language-specific VM's? E.g. client side VM's (for instance, like Rubinius) hooking up to the Gears runtime? The idea being that if you could hook up to a VM running on the client, it could be used to interpret the implementation-specific code -- E.g. a Rubinius VM running on someone's machine, when hooked to Gears, could enable Ruby code/ or ERB in a page in the offline cache, to be successfully interpreted on top of Gears. The VM an individual chose to install would be a separate install outside of the Gears runtime, but would need an api to connect to the Gears runtime.

Wanted to throw out the idea and appreciate any response-
holtonma (at) gmail (dot) com

UOOJ Development -- It's Huge! (pronounced "Yooooge")

Been doing a ton of JavaScript development over the past 3 years, more and more hardcore the last 18 mos, and loving every minute of it. This (obviously) involves Ajax development, along with other client-side development -- basically engineering User Interfaces in ways that make them responsive to users, fast, user friendly, lighten the load on server bandwidth required, and keeping code maintainable and extensible.

Throughout that time I have gravitated towards Unobtrusive Object Oriented JavaScript development. There is no better way to go in JavaScript development, as it presents a good challenge which results in a great payoff in terms of separation of concerns, code re-usability, keeping things DRY, among other things. Unobtrusive Object Oriented JavaScript is professional JavaScript development imo, and mainly involves creating re-usable client side JavaScript objects, with the key distinction being that you write your code while keeping JavaScript completely separated from HTML, also writing the web application so that it will work when JavaScript is turned on or off (defaulting to traditional Form submits unless encountering return false;, etc). You can do this through attaching events to DOM elements at runtime with Event observers, or after elements have been created on Ajax callbacks, for instance. I won't get too into detail, just want to spread the word to those interested in Ajax development, you should certainly look into some of the following links to help you get started:

Crockford:
http://javascript.crockford.com/prototypal.html
http://javascript.crockford.com/javascript.html
http://javascript.crockford.com/private.html

Prototype related UOOJ links:
http://prototypejs.org/api/event/observe
http://prototypejs.org/api/class/create
http://www.prototypejs.org/api/function
http://alternateidea.com/blog/articles/2006/05/23/prototype-inheritance-madness

jQuery Events/ready:
http://docs.jquery.com/Events/ready#fn

some Scope articles:
http://www.digital-web.com/articles/scope_in_javascript/
http://www.jibbering.com/faq/faq_notes/closures.html

... the side point of this blog post is to coin the acronym UOOJ! (pronounced "Yoooge"! or "huge" with the "h" being silent). While SMS-ing my good Agile buddy back in Cincinnati, Paul Spencer, (who I like to call the "Agile Guru") I was remarking about how much I am loving unobtrusive object oriented development and he replied "UOOJ!". So the credit goes to him -- great acronym. UOOJ Development!

"The Power of Google Gears -- Part I and II"

For those of us interested in Google Gears:

http://www.onlamp.com/lpt/a/7055

http://www.onlamp.com/lpt/a/7057

JSONRequest.js -- from the genius of Doug Crockford

I wish there was more chatter lately about JSONRequest, and similar secure XSS proposals.

We can all think of legitimate reasons why as a developer we'd very much like to be able to request and return data from remote sites, and am EAGERLY awaiting the dust to settle on this issue. Because of the security model of XMLHttpRequest, this sort of data exchange is not possible due to the 'same origin policy', whereby the browser restricts a web page from communicating with a server of a different domain via an XMLHttpRequest (i.e. Ajax) call:

"XMLHttpRequest has a security model which is inadequate for supporting the next generation of web applications. JSONRequest is proposed as a new browser service that allows for two-way data exchange with any JSON data server without exposing users or organization to harm. It exchanges data between scripts on pages with JSON servers in the web. It is hoped that browser makers will build this feature into their products in order to enable the next advance in web application development."

IBM has a well written article discussing the issues, challenges, and proposals on the table with regard to secure cross-site scripting, and provides some insights to what we can currently implement, and what is on the horizon, including Doug Crockford's JSONRequest.js proposal:

"Here and now

A more recently developed content-retrieval technique employs communication between a page's script and a hidden iframe through its src URL's fragment identifier (the part of the URL that comes after the # sign). Scripts in the parent page and embedded iframe can set each other's fragment identifiers despite coming from different origins. An agreed-upon communication protocol is maintained between the scripts, driven by JavaScript timers that periodically fire routines to check for changes in the fragment identifier.

Because the scripts must know each other's addresses and they must collaborate between themselves to agree on a protocol, trust is ensured. Because any server interaction is local to each component and separate from the inter-script communication, cookies are not exposed.

While still imperfect (for example, it relies on an anomaly that is not a designed behavior, and polling for changes is inferior to having an event fire in response to a change), this solution comes closer to providing browser-native, secure, in-page, cross-domain communication than any other.

Note: James Burke, a developer at AOL Developer Network, pioneered the fragment identifier technique and has built it into the latest releases of the Dojo Toolkit JavaScript library."

When will any of these get implemented? I can hardly wait.

Doug Crockford proposals:http://www.json.org/JSONRequest.html
http://json.org/module

JSONRequest files:
http://www.devpro.it/JSON/files/JSONRequest-js.html

Dojo notes related to JSONRequestResponse:
http://dojo.jot.com/WikiHome/JSONRequestResponse

conversation by some of the 'Titans'...
http://www.eweek.com/article2/0,1895,1960822,00.asp

Ajax Experience Conference -- plus past presentations link

Was fishing around the Ajax Experience website (wishing I could be there! getting married in less than a month, can't make it), and came across the following link to a wealth of information from the 2006 year -- conference presentations, videos, etc.

http://ajaxexperience.techtarget.com/resources/html/presentations.html

The Ajax Experience is one conference I plan to budget for in terms of dollars and vacation days in the 2008 year. Given the list of presenters and attendees, Dion Almaer and the Ajaxians seemingly put together a wealth of knowledge during this 3 day conference. This must be an intense 3 days. Many of the 'Titans of JavaScript, Ajax, and "Web 2.0" are there -- key JavaScript gurus like Brendan Eich, Douglas Crockford... along with library creators and JavaScript experts John Resig, Christopher Portenueve, Joe Walker et al. (and many others) Here is the link to the conference happening in 9 days. There is another conference in October too:

http://ajaxexperience.techtarget.com/west/index.html

Prototype version 1.5.2_pre0

I notice on Backpack, that the 37signals guys are using a new version of Prototype.js. I haven't had time to check the diffs, but wonder what has been added:

http://asset0.backpackit.com/javascripts/prototype.js?1181176787

E4X -- ECMAScript for XML

It is perhaps not critical to understand now, but those who want to take a look at what is perhaps ahead, should consider checking out E4X, or ECMAScript for XML. It has already been implemented in SpiderMonkey and Rhino, and has been standardized in ECMA-357 standard.

http://developer.mozilla.org/presentations/xtech2005/e4x/

http://en.wikipedia.org/wiki/E4X

E4X places XML objects as first class JavaScript objects -- just like objects, arrays, functions and Regular Expressions (which I for one, need to admittedly get better with).

This is particularly attractive -- from page 11 of the E4X slides:

* Expandos make markup composition a snap!
* Just start appending extra property tiers:

var html = <html/@lt;
html.head.title = "My Page Title";
html.body.@bgcolor = "#e4e4e4";
html.body.form.@name = "myform";
html.body.form.@action = "someurl.jss";
html.body.form.@method = "post";
html.body.form.@onclick = "return somejs();";
html.body.form.input[0] = "";
html.body.form.input[0].@name = "test";

* Results in this XML:

<html>
<head>
<title>My Page Title</title>
</head>
<body bgcolor="#e4e4e4">
<form name="myform" action="someurl.jss"
method="post" onclick="return somejs();">
<input name="test"></input>
</form>
</body>
</html>

...the future is surely bright for open source, browser native, Ajax.

more Tamarin and Mozilla reading...

For those so inclined, some interesting reads regarding some expert thoughts on Tamarin, Mozilla, Firefox, Adobe, JavaScript ...

Brendan Eich (Mozilla):
http://weblogs.mozillazine.org/roadmap/archives/2007/03/the_open_web_and_its_adversari.html
http://weblogs.mozillazine.org/roadmap/archives/2006/11/project_tamarin.html

Anne Zelenka (Red Monk):
http://redmonk.com/anne/2007/01/08/why-open-is-good/

Emmy Huang (Adobe):
http://www.adobe.com/devnet/logged_in/ehuang_tamarin.html

Using Firebug in IE, Opera, Safari

Most people know about Firebug, as a plugin to Firefox... but you can also debug javascript in other browsers with Firebug, by installing Firebug Lite.

http://www.getfirebug.com/lite.html

It's awesome to include a .js file, open up Internet Exploder, and use alot of the Firebug goodness to check browser compatibility. (after test, or prior to loading to your production webserver, simply comment out that line of .js and you won't take a hit when it comes to page load times).

Here is some more Firebug documentation and references from their site:
http://www.getfirebug.com/docs.html

Core Javascript & Ajax Development Links

...some handy references for all of us writing Javascript and Ajax apps (specifically with Prototype.js, but many of the links help writing and testing JS in general) Enjoy:

Core Javascript 1.5 Reference
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference

Javascript Style Guide on Mozilla's Development Center:
http://developer.mozilla.org/en/docs/JavaScript_style_guide

Prototype Javascript Framework API docs:
http://www.prototypejs.org/api

Script.aculo.us Effects Library tag docs:
http://wiki.script.aculo.us/scriptaculous/tags/

Dan Webb's LowPro.js:
http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype

Joe Hewitt's Firebug plugin docs and download:
http://www.getfirebug.com/docs.html

https://addons.mozilla.org/en-US/firefox/addon/1843

Selenium:
http://www.openqa.org/selenium/

"Quality", by Douglas Crockford

Insightful presentation by Douglas Crockford on "quality". Engaging and worth watching:
http://video.yahoo.com/video/play?vid=529579

Tamarin Project -- Adobe contributes to Mozilla

This is older news, but certainly worthy of repeating (now that I have a couple free hours to get my thoughts out).

If you're interested in where the future of client-side software development is going, definitely read this post and the related link from Ajaxian.com. It discusses 'Tamarin', which is a collaborative project between Adobe and Mozilla -- Adobe contributed source code from the ActionScript Virtual Machine to the Mozilla Foundation.

What all of this means, as Brendan Eich states "now web developers have a high-performance, open source virtual machine for building and deploying interactive applications across both Adobe Flash Player and the Firefox web browser"

Especially insightful are the 'comments' section, where Brendan Eich (the individual who created the JavaScript language and one of the first people at Netscape, now the Chief Technology Officer at Mozilla, responsible for architecture and the technical direction of Mozilla) , explains the nature of performance gains that will come from a Just-In-Time JavaScript compiler.

http://hecker.org/mozilla/adobe-mozilla-and-tamarin

All of this gives us insight into the web-centric paradigm that both Adobe and Mozilla (along with obviously Google and others) are pointed towards and that has huge momentum. This collaboration, along with items like Adobe Apollo (and other similar efforts by Sun, for instance), make it very motivating time to be a web application developer. We are at the beginning of a time pointing towards being able to create deeply rich web applications -- apps that run efficiently in a browser that is continually increasing in performance. These web applications can be programmed and run in a web-connected or disconnected mode.

The Ajax libraries and toolsets that have sprung up in the last few years (E.g. Prototype, Dojo, et al), along with the advancement of the browser itself, collaborations between Open Source and industry (Adobe, JVM and Flex), and many of the open source communities supporting this vision for the future of the web really gets me excited and motivated to wake up and write code, and dig deeper each day into the nuances of these technologies. Good times-

(ps, here is another good read: http://weblogs.mozillazine.org/roadmap/archives/2007/04/openness.html)

Javascript Compressors

Javascript compression is used by professional web developers to compress JS, and decrease the latency of page loads. Which compression tool do you use? Do you use any that aren't on this list? I'm interested in hearing what other people are using.

Dojo ShrinkSafe: uses Rhino (Javascript engine written in Javascript) to compress without regular expressions
http://alex.dojotoolkit.org/shrinksafe/

JSMin, The Javascript Minifier
http://www.crockford.com/javascript/jsmin.html

The Javascript Compressor:
http://javascriptcompressor.com/

(another useful link, not related to compression, but a tool that is helpful in writing Javascript in addition to Firebug: JSLint -- http://www.jslint.com/)

Firebug, Joe Hewitt; (high rez screencast from YUI Theater)

...Firebug is an unbelievable Javascript tool -- for creating, experimenting, and debugging Javascript. Check out Joe Hewitt's presentation:

"Ajax" and "Web 2.0" occupy spots near the top of Google's Hot List

The world is interested in knowing more about Ajax.

Of all Google searches, the top 6 in the "What is" or "Define" queries that hit Google, 3 of these twelve top queries in these categories are about "Ajax" or "Web 2.0" deveopment. Thanks to Jesse James Garrett for coining a great term, thanks to the "Ajaxians" Dion Almaer and Ben Galbraith for spreading the word through their site and podcasts, and thanks to the many easy to use frameworks like DojoToolkit, Prototype among a growing number of open sourced Ajax toolkits... a vast expansion in DHTML and asynchronous web development continues to generate a huge and growing interest even among non-developers today. Exciting times.

http://www.google.com/intl/en/press/zeitgeist2006/whatshot.html