Brennan’s Blog

With AJAX spreading to more and more web sites it is becoming increasingly valuable to learn how to use JavaScript. Most web developers cringe at the thought of working with JavaScript after years of bad experiences with no debugging support for very buggy and incompatible web browsers that do a poor job of interpreting JavaScript properly. Once you get to know the language as it was meant to be you really will learn to appreciate the power it provides. You just need guidance on working with what is a powerful language on a pretty rough terrain where IE6 is still in the mix to a significant degree. Meanwhile the terrain over IE7 and FF2 is not all that bad.

The newest book to be released is JavaScript: The Good Parts by Douglas Crockford who is the lead JavaScript Architect at Yahoo. He knows all about the bad parts and in this book, which I ordered and just shipped a minute ago, covers the good parts that you can use that will allow you to create the kind of web site that will make your users ecstatic and win you more fun and interesting projects.

Last year I read Pro JavaScript Techniques by John Resig who is the creator of the wildly popular JavaScript library jQuery. All of the books that I purchased just a few years back, covering advanced topics like DHTML (a term that makes my eyes roll), were using horrible syntax which did not allow for building advanced sites due various problems that are easily overcome with techniques explained in Pro JavaScript Techniques. You will learn about scoping, namespacing, inheritance and how to handle cross-browser issues.

Later this year a new book by John Resig called Secrets of the JavaScript Ninja will be published. The book is made up of topics suggested by the community through his blog which were not covered in depth in his first book or any other book out there. I am extremely anxious to get my hands on this book. Resig has an uncanny talent when it comes to JavaScript and reading his last book was an eye opener for me and I expect to learn a great deal more with this next book.

It is an important year for JavaScript. With competing technologies like Flash, Adobe AIR and Silverlight fighting for market share it is necessary for JavaScript to keep pace and it is not standing still. Soon the standard for JavaScript 2 will be nailed down and features like the Canvas in HTML5 and SVG will offer major competition to the proprietary alternatives. Now is a good time to retrain yourself on JavaScript. I strongly suggest you pick up these books.

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.

Rendering a User Control in ASP.NET using a web service or a generic handler is easy. Taking the string that is generated with a User Control and then serializing it to be embedded in JavaScript is also easy. Both combine to what you will need to create custom ads that are exactly like how Google Ads are served. This technique can also be used to share a common piece of markup across many web sites. As the central web site is updated so are all sites that reference it.

The first method below will render a User Control to a string. The second method will serialize that string for use with JavaScript as a JSON value. The value can then be included in a dynamically generated script for use from remote sites. I had some early troubles with the DataContractJsonSerializer which replaces the deprecated JavaScriptSerializer but eventually I got the following code to work reliably. Previously I created something similar but without User Controls a while back for the local .NET User Group to show banners for upcoming meetings.

using System.Runtime.Serialization.Json;

private string GetUserControlMarkup(string controlUrl)
{
  // sample url: ~/Controls/SharedCalendar.ascx
  StringBuilder sb = new StringBuilder();
  Control ctrl = new Page().LoadControl(controlUrl);
  if (ctrl != null)
  {
    StringWriter sw = new StringWriter(sb);
    HtmlTextWriter tw = new HtmlTextWriter(sw);
    ctrl.DataBind();
    ctrl.RenderControl(tw);
  }
  return sb.ToString();
}

private string Serialize(string str)
{
  DataContractJsonSerializer serializer =
    new DataContractJsonSerializer(typeof(string));
  MemoryStream ms = new MemoryStream();
  serializer.WriteObject(ms, str);
  return Encoding.UTF8.GetString(ms.ToArray()).Trim();
}

If you are using the Rating Control for the ASP.NET AJAX Control Toolkit on a long page you will notice that after selecting your rating the page jumps to the top of the screen. On a short page you will not notice anything but the hash sign appearing at the end of the URL. On a long page the jump is a big problem. It is due to the href attribute on the anchor tags being set to a hash instead of something like javascript:void(0); which would prevent the jumping. I fixed this with one line of JavaScript using jQuery to set the link value to ensure clicking does not have the unwanted side-effect.

In the below sample I have the Rating Control wrapped in a div tag with Rating set as the CSS class. This way I can have many ratings on one page and having this one line fix all of them.

$('div.Rating a').attr('href', 'javascript:void(0);');

These days I write more JavaScript than C#, or at least it seems like it sometime. To make my work a little easier I have started using the JavaScript support in Visual Studio 2008 that provides Intellisense support if you put Xml Doc into your JavaScript. The problem with working with jQuery in Visual Studio 2008 is that it fails due to how the jQuery script is written. For reasons why Intellisense fails, you can read more from Jeff King. Adjusting jQuery to make Visual Studio happy is not really a priority and not even necessary. I can simply reference the real jQuery script from the web pages and within my scripts I can reference a stub for jQuery that is simply a shell with Xml Doc.

[ Update: Hotfix for Visual Studio 2008 to fix jQuery Intellisense ]

(more...)

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.

On Tuesday we had our local installfest holiday part of the new release of Visual Studio 2008 and .NET 3.5. This was a big one. I feel like I have been hearing about multi-targeting and LINQ for years now. A few weeks back I wrote a summary of my favorite new features. In that post I forgot to mention the new code metrics, so I followed up with a summary of that great set of features.

Since I had a copy of Visual Studio 2008 prior to the installfest I was able to dig in and build a little application that I showed during my mini demo. I call it Kvetch Reborn because it is a recreation of the original Kvetch.com which is no more. I made use of LINQ to get it up and running faster than writing the stored procedures I have typically used with .NET 2.0.

I also made use of the ASP.NET AJAX features to convert a web service into a JavaScript proxy so the methods provided by the service could be used directly from the client-side. The service callbacks are extremely lightweight. Most communications are measured in bytes while your average ViewState is multiple kilobytes. I have been leveraging this functionality for several months now since it was released with ASP.NET AJAX release last year. But now it is a bit easier with intellisense support for JavaScript. You can try it and download all of the source with the following links. In later blog entries I will detail exactly how it was all built. Check back for those details.

• Online Demo
• Source

It was a great event. We nearly filled the seats with an expected attendance around 200 people. There were lots of prizes thanks sponsors like KForce, Fullhouse Interactive and Apress. All of the tasty food was sponsored by Centare. And Microsoft also threw in some big prizes like the Xbox Elite, Zunes and lots of other great prizes.

I especially want to thank Matt and Kerrie at Direct Supply and Patrick at Northwood Software for helping out the .NET User Group this past year by hosting events at their facilities. I look forward to more meetings with them.

Lastly I want to thank our organizers and hosts: Scott Isaacs, Gerry Heidenreich, Larry Clarkin and Dave Bost. Without them these events would not happen. Thanks guys!

In the late 90's there were a few developers and designers who were feeling out the web as a new medium. I would read their websites, which were essentially blogs before RSS existed, and they would write very personal entries on all sorts of topics. My very favorite was Maggy. I somehow came across the websites she created and quickly discovered others like Alexis Massie, Lance Arthur, Ben Brown and Derek Powazek. Each of them showed a great ability to develop and design great concept websites as well as write amazing content. The mixture of these talents made for very addictive websites.

One website that Powazek created was Kvetch.com which is no longer active. He wrote that when he moved his websites from one server to another he did not restore the Kvetch.com website. That is unfortunate. It was a brilliant idea. Essentially you could select from a handful of topics and then view a series of complaints about that topic. You could also post a complaint anonymously. (Note: Kvetch is a Yiddish word for complain.)

This week I wanted to get some exposure to various features in Visual Studio 2008 which was released recently so I thought this would be the perfect time bring the Kvetch.com concept back. When I built it originally he used inline frames while I am using AJAX as well as some nice effects with jQuery. In another post I will cover the details on how it was built. I have refactored down the AJAX work so that it is very easy to create AJAX-friendly user control with complex, yet uniquely contained, behavior.

I look forward to reading your comments.

[ Kvetch Reborn ]

Also, I hope to see you at the installfest tonight. I may give a short demo of the LINQ and JavaScript that I created for this website.

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...)