Brennan’s Blog

I discovered a problem with the ASP.NET AJAX Client-Side library. It seems it was trying to access a property on a variable when the variable was not defined. The difficult part of the problem was that the function that was being called is a part of a series of events that are bound to various elements on the page automatically. I am unaware of what it is doing exactly or how to prevent it so fixing it was a challenge. Fundamentally the function was working like this...

function exampleFunction(a,b,c)
{
  if (a.disabled)
  {
    // do something
  }
}

Because the a parameter was passed in as undefined from a function that my custom code did not call I could not simply fix it on my end. I needed a way to first check if the a value was defined before it attempts to access the disabled property on it. Since JavaScript is a dynamic language I can redefine and remap functions very easily. I dug into the JavaScript in the MS AJAX Client-Side library and found the context for the function and wrapped it with my own function that checks if the given parameter is defined. If the value is defined I call the original function.

The code below is my fix. The _onFormElementActive function which is defined in Sys.WebForms is the function that was causing me trouble. This code first saves the existing function to a local reference and then reassigns a new function to that name within the prototype. Then within that function I name the function with FIXED at the end the name so that it can be called within the context of the object instance. The original function needed to access this with the right context which is why that is necessary. Then I can simply check the value of a and call the fixed function with the same parameters.

var $$_onFormElementActive = Sys.WebForms.PageRequestManager.prototype._onFormElementActive;
Sys.WebForms.PageRequestManager.prototype._onFormElementActive = function(a,c,d)
{
    this._onFormElementActiveFIXED = $$_onFormElementActive;
    if (a !== undefined)
    {
        this._onFormElementActiveFIXED(a,c,d);
    }
};

The beauty of this code and this solution is how JavaScript works. I can safely redefine an existing function, wrapping it with my own code, and still call the previous function easily. And even if the object instance for this class was already defined this adjustment will still take place because this change not only affects all instances created in the future, but all pre-existing instances.

Next I hope to get in touch with the ASP.NET AJAX team and let them know about this particular problem. Ultimately they may just need to code to read if (a && a.disabled) and the bug would be corrected. I also want to know how this problem came up. This web site was working fine for a couple of weeks before this started to happen. And curiously enough, it only affects IE7 and not IE6 or FF2.

Our relationship with JavaScript has been turbulent these past 10 years. In the early days there was so much promise as both the Netscape and Internet Explorer teams worked feverishly to add new features to the browsers and coined the term DHTML. It was an exciting time, for a while at least. Then the fact that features did not work reliably or even across the two dominant browsers started to sink in and the polish on this shiny new thing started to wear off. Yet we still persisted in trying to find ways to make it work, only to be slapped in the face over and over again.

One strategy I followed was to focus only on Netscape 4 for certain functionality and I would spend hours trying to nail down my new script, thinking I had the syntax right, alt-tab, F5... and then see inexplicable behavior happen. I naively thought that the Netscape 4 engine for JavaScript was bulletproof and I was wrong. I did not realize until a few years later, after ignoring JavaScript during that period, that the syntax I was using was completely valid. It was just the browser misinterpreting my code.

Starting just a few years back I started to see JavaScript becoming useful again. The combination of Google producing web applications like Google Mail and the Firebug extension for Firefox caused me to reconsider JavaScript one more time. What Google created excited me about what JavaScript could do for my web applications and Firebug offered support for making it happen by exposing what was happening inside the browser.

Gradually as I re-educated myself on JavaScript I picked up techniques to write JavaScript more efficiently and reliably while also making it work across a broader selection of browsers than were available in 1998. And a major push forward was the rising popularity of JavaScript libraries (jQuery, Prototype, YUI and many others has made it nearly trivial to add advanced client-side behavior to web applications that works across all of the major modern browsers. After learning a bit about the available JavaScript libraries I read Pro Javascript Techniques by John Resig which opened my eyes on how much more powerful JavaScript can be. Later I watched a video of a presentation that Resig made for Yahoo! on Advancing JavaScript with Libraries (Part I, Part II). His book is excellent and these videos compliment it very well.

With my efforts to re-educate myself about JavaScript the last few years I feel I have a good relationship with JavaScript. This re-education has been like therapy for this troubled relationship with a once flawed technology. Each time I talk with someone about web development they seem surprised or even shocked that I would be so willing to jump head first into attempting complex functionality with JavaScript. It seems there is a lot more "JavaScript Therapy" that needs to happen. People have not forgotten the bad old days and letting go of that negative experience has been hard for most web developers. I have come to accept the fact that in order to produce rich web applications that I have to leverage JavaScript along with everything I know about HTML and CSS. These three technologies can do amazing things together and as the browser makers compete to produce faster, more stable and more standards compliant browsers these capabilities will only improve.

In the coming weeks I will be writing about what I have learned about modern JavaScript, especially with ASP.NET. In the meantime, if you are interested in JavaScript I strongly suggest reading Resig's book, watching those videos and exploring the tools referenced in Web Development Tools for the Power Developer. Later you can check back here for more on JavaScript techniques.

I just create my Twitter account. Twitter has come up in discussions at work and with several friends who are using it. Nobody really has a good sense of what it really is or how to use it. I think it is broadcast IM or micro blogging. I am not sure how I will find it useful, but I have avoided it because it is just another potential distraction from the work I should be doing. Here are the things I plan on twittering about...

• Links to good articles or blog entries
• Links to my new blog entries or articles
• The artist and title of a really good song I am listening to at the moment
• Random thoughts while I work at my computer, likely related to software development
• Questions on a problem I am currently trying to solve

And through these twitterings, or tweets as some call them, I hope to get some interactions going with people who are interested in and working on the same topics. My current primary interests are building dynamic web interfaces using ASP.NET AJAX and jQuery and extending Visual Studio 2008 to assist with creating those interfaces. In the work that I do we often do very quick projects (2 to 3 months) and doing the setup for a new web site to support the client-side functionality that I now do typically is a bit of work. My self-training on the topic of modern AJAX UI was done with the Kvetch Reborn project which actually has some features in common with Twitter. The source for it is available for download. I have used what I have learned for Microsoft ASP.NET AJAX and jQuery to assemble that application which has rich client-side functionality with direct integration with the server-side on a single page. I have more to do in automating the setup work for creating such projects, including completing the baseline features for the JavaScript Browser.

Previously I wrote Internet Explorer 7 and Future Proofing your Website which was a primer for preparing the imminent release of Internet Explorer 7. Now we will soon see Internet Explorer 8 which will stir things up again. A couple of months back Microsoft floated the idea of creating multiple standards modes, with the more modern implementation being an opt-in mode that required pages to include a meta value that IE8 would use to switch over to the new modern standards mode. The proposed solution was widely rejected.

Today the IE team announced through the IEBlog, in post a entitled Microsoft's Interoperability Principles and IE8, that Microsoft is withdrawing that idea. There will be only two modes in IE8, quirks mode and standards mode. Initially Microsoft did not want to break all of the pages that were expecting the IE7 standards mode, much like pages were expecting IE6 standards mode when IE7 was released. Now after significant feedback from the community Microsoft will bite the bullet and happily move forward with web standards even if it means breaking many sites that should be updated anyway.

All in all this should not be a big problem. Given that Best Practices for CSS encourage developers/designers build their pages and sites with the most standards compliant browser first and then adapt lesser compliant browsers these cross-browser issues should not be much of a concern. Yet many sites were not built with techniques that are safe across browser versions. Techniques like the box model hack enable support across multiple browser versions that support different levels of web standards. Leveraging how CSS works in this way is how you can future proof your web site.

(more...)

The release of Visual Studio 2008 Web Deployment Projects - RTW is out. After working with the December CTP over the last month I am glad to see this release. I had several problems with the CTP which should all be resolved now. After a couple of tests with the new RTW release everything appears to be working.

Previously the biggest problem was the failure of the build to clear the output directory before attempting to move the temporary build directory. It caused many incomplete builds in a sporadic way which made it hard to figure out. The fix for the CTP was to implement the AfterMerge task to blow away the output directory and move the temporary directory in place, as it should have done automatically. Now all my scripted automation goodness is back on track.

I cannot wait for Firefox 3. The performance and memory usage improvements are becoming increasingly important. Lately I write more JavaScript than C# and over the last few "minor" updates to FireFox 2 I have been noticing some annoyances. The main annoyance for me is a flickering that now occurs when I replace a section of content. Before I could replace a section, often with identical content, and you would not see the change. At first I thought I just needed to reboot my computer, like something was killing the processor and causing Firefox to perform badly. Then I saw it on a few other computers, and now I just saw Google Mail flicker when updating for new messages.

Last week John Resig reviewed the timer performance in various browsers. You may notice that occasionally an animation looks choppy. He explained that in Firefox that is caused by the garbage collector. It seems this issue has been a focus of recent work on Firefox. Smoother animations will improve the state of AJAX development and stall competing solutions that are still proprietary, no matter how open they appear to be. (Flash, AIR, Silverlight, etc) I still prefer a slick HTML, JavaScript and CSS application because there really is almost nothing it cannot do.

I expect Firefox 3 will be out within the next few weeks. And shortly after that I hope to see the early beta of IE8. Now that it has passed the Acid2 test I am anxious to see that overtake the IE6 and IE7 market share so that we can start producing web applications that work seamlessly across browsers.

Great news for web designers and developers, IE8 now passes the Acid2 test. You can see for yourself on Channel 9. The video shows the actual rendered image in their nightly IE8 build which will not be out until the first half of 2008. That could mean late February or late June. I expect we will get a Beta 1 release followed by a Release Candidate a month so that we can all try it out and report any breaking changes it may have caused in our websites and web applications.

I am not sure what this really means for CSS compliance. It would be great to get Firefox 3 and IE8 up to CSS Level 2 and then get moving to CSS Level 3 next. That would allow for automatically flowing multi-column layouts and other basic features the people in the print world have enjoyed for years.

I have revised SmallSharpTools.com with a new design. I am no designer, but my previous attempt was very lacking. I hope this one makes it easier to learn about each of the projects. Let me know what you think.

And I have more on the way with revisions for existing projects as well as some new projects that will be very useful with integrating various .NET technologies. Check back soon for those updates.

Recommended
Reading

As you start to build more AJAX features into your application you will be writing more and more JavaScript. Even though we are getting more tool support for JavaScript, especially with Visual Studio 2008, it can still be difficult to work with JavaScript because of browser differences. Even changes between Internet Explorer 6 and 7 can be troublesome. To minimize these problems I have been leveraging different JavaScript libraries which provide a rich set of features that have already handled the cross-browser issues. My favorite has become jQuery for multiple reasons.

The main reason I like jQuery is the fact that it is designed to do more with less code. The programming model lends itself to very compact code that does a lot for you. It also has a rich querying model that allows you to use CSS selectors to find elements within a web page and apply various changes on those elements. And another great reason to use it is the fact that it allows you to write much faster JavaScript. The jQuery model allows you to chain methods together. Each call to jQuery starts with a query like $('div.content') that will match all div blocks in the with content set as the class name. The method returns a jQuery object which can then be used to call another method, like addClass('Highlight') that will add Highlight as a class name to all of the matched elements. It will then return the jQuery object again for another method to run a jQuery method. Chaining the calls allows the same objects to be used over and over so you can avoid the overhead of creating objects which is expensive.

(more...)

A line has formed around building 42 at the Microsoft campus as anxious developers await the release of Visual Studio 2008 Beta 2. The word on the street is that it will be coming out any time this week so it could be a couple more wet, cold nights in Redmond. Microsoft appreciates the dedication and is hosting a Matrix trilogy projected onto the building tonight to help the fanboys pass the time. I wonder if they had Visual Studio in the Matrix. And what would Neo's code look like? I bet his color scheme would be hot. But I digress.

Ok, so there is no line, that I know of, but I am definitely anxious to start using it. I will just download it from MSDN once it is out. My main need at the moment is the Javascript support that it will provide. I have become accustom to Intellisense in C#, VB and even XML and not having it in while I work with Javascript has made me feel like I am back in a terminal window hacking Perl in vi. I try to get by with as little code as possible because I know it will not be easy to maintain.

(more...)