Web Info & Tutorials

October 20th, 2006

ASP.NET AJAX BETA RELEASED

Scott Guthrie of Microsoft announced the first beta release of the new ASP.NET Ajax framework (formerly Atlas).

There are some significant changes including:

  • $() is now $get(): This means that you can play nice with libraries such as prototype. It is really interesting that Microsoft took this step instead of saying “screw it. why should we change because of you” and instead decided to play really nice. If you do not care about prototype and co, you may prefer the simplicity of $()
  • Performance: “We have spent time optimizing the network traffic size of client JavaScript callbacks to the server. Controls like the UpdatePanel, UpdateProgress, and Control Toolkit controls no longer emit xml-script by default, and instead just emit 1-2 lines of JavaScript (which can help significantly reduce the network traffic size on the wire). We have also moved from using JavaScript closure-based classes to using prototype-defined classes in the core type system, which we’ve found reduces memory usage for most common application scenarios.”
  • File size: They took time to modularize the JavaScript, and you can download various parts and pieces instead of just the kitchen sink. I wonder if VisualStudio will be smart and auto include what you really need?
  • Browser Support: Safari is now officially support, with Opera in the works
  • Better Debugging Experience: They did a couple of things to help with the hell that can be JavaScript debugging: “1) By moving our JavaScript class definitions from being closure-based to prototype-based, you can now use the existing Visual Studio 2005 script debugger (and/or other existing JavaScript debuggers) to better inspect and step through JavaScript objects. Closures previously hid a lot of inspection information.

    2) We invested a lot of time putting together an automated JavaScript build environment that enables us to produce two versions of all of our JavaScript files: a retail version that is optimized for performance and download size, and a fully instrumented debug version that is optimized for helping you catch issues with your code during development. Every function within the debug version of our script files now includes parameter and argument validation code that verifies that the function is being passed the correct arguments before running, and that will assert with stack trace information if not. This can help to more easily pinpoint errors with your JavaScript code early, and hopefully significantly improve JavaScript debugging.”

  • Lots of Improvements in the Client Script Library Stack: “a) Simpler client JavaScript event model. It is now easier to define and attach events on the client. Object events are also now created on demand to reduce startup time and the size of the working set. b) Simpler Component, Behavior, and Control types. APIs can now be used without first needing to instantiate their related objects, and on-demand semantics have been added to improve performance. c) Client networking improvements. Default callback functions and method-name semantics provide a much easier way to perform common asynchronous callbacks. d) Membership and Profile APIs. Simpler APIs for interacting with the Membership and Profile APIs from client-side JavaScript are now supported.”

A lot of good stuff here. Read more on ScottGu’s blog, and the official site. Hopefully there will be some good questions to the Microsoft team behind this, and IE7 at the Ajax Experience which is starting next Monday.

Fancy a quick getaway to meet up with the Ajax community? Want to be stuck in Boston traffic? Want to mourn the Red Sox’ year? Want to visit a US city with history ;)? Come join us!

October 20th, 2006

PROTOTYPE BASED JAVASCRIPT TOOLTIP

JavaScript Tooltip libraries number about as many as rounded CSS corner libraries.

Jonathan Weiss thought the ones he saw were "too complicated and bloated, did just too much and most of the time were still not flexible enough with the tooltip. So I decided to create my own library that is based on prototype.js".

It looks somewhat similar to Tooltip.js:

JAVASCRIPT:
  1.  
  2. <script src="/javascripts/prototype.js" type="text/javascript"></script>
  3. <script src="/javascripts/tooltip.js" type="text/javascript"></script>
  4.  
  5. <div id='tooltip' style="display:none; margin: 5px; background-color: red">
  6.   Detail infos on product 1....<br />
  7. </div>
  8.  
  9. <div id='product_1'>
  10.   This is product 1
  11. </div>
  12.  
  13. <script type="text/javascript">
  14.   var my_tooltip = new Tooltip('product_1', 'tooltip')
  15. </script>
  16.  

It is available for download.

October 20th, 2006

IE AT VIRTUAL ARMS LENGTH

Alex writer ran into someone who didn’t effort IE at an IE move party?

In IE At Arms Length Alex talks most how he takes domain for investigating the different versions of IE, modify from a Mac.

The Basics

  1. A high-end mac laptop, stuffed to the gills with RAM and a alacritous HD
  2. An outside hardware figure of some sort. In my case, that’s a samba computer with a half terabyte of fas RAID hardware on switched gigabit ethernet
  3. Windows licenses. I ingest both Win2K and XP. I propose senior if you crapper intend it, meet because the senior the Windows version, the inferior clash it’ll consign up
  4. Virtualization software. These life I’m using Parallels, but previously I’ve utilised both VirtualPC and VMWare
  5. The Environment

    Here’s how I ordered up my environment:

    • Create a newborn VM. In it, install/register/jump-through-MS-hoops for the baseline edition of every of the OSes you’re feat to be using. Don’t modify conceive of streaming windows update yet.
    • Configure the VM to ingest the correct topical networking setup
    • In this newborn VM, establish the Microsoft Script Editor, Ethereal, Drip, the MS scheme developer toolbar and some another line debugging tools you ingest everyplace for IE
    • Shut downbound this VM and double it soured to your accumulation hardware device. Give it a study aforementioned “XP_baseline”
    • For apiece OS Service Pack, do much the aforementioned thing. Install the assist arrange (avoiding application upgrades if possible), closed the VM down, and pickle it soured to algid storage
    • Once you’ve got a VM with a pristine edition of the terminal OS assist pack, move doing the aforementioned thing, but with field application revs. If you can’t encounter an installer for a portion IE rev, essay the Evolt Browser Archive.
    • At the modify of the terminal step, you should hit a “mostly” up-to-date edition of both OS and browser. Once you’ve got a double of that in algid storage, exclusive then should you separate Windows Update. Mmmm…watch that VM reboot!
    • This is today your “working VM”. Keep it up to fellow as MS releases patches and such. For apiece newborn field application rev, do NOT ingest this as your baseline. Instead, vantage your terminal field browser/OS increase photograph discover of algid storage, double it, raise the copy, and place that backwards in the drawer
October 20th, 2006

YUI BORDERLAYOUT: RICH CROSS BROWSER LAYOUTS

Jack Slocum has been Exploring Cross-browser Web 2.0 Layouts with Yahoo! UI.

After realising that almost every desktop application and many of these new web interfaces all start with a common layout, he decided to create a reusable layout manager called BorderLayout in JavaScript.

His requirements were:

  • Must be cross-browser - JavaScript errors and inconsistency are unacceptable.
  • Must look the same in every browser - Thanks to the Element object and auto box-model adjustments, this was a non-issue.
  • Must be fast! - The initial layout and subsequent layouts must be fast and transparent to the user - like a desktop layout manager.
  • Must support nested layouts - To really gain the full benefits on BorderLayouts, they need to be able to be nested.
  • Must support existing HTML - By supporting existing HTML, unobtrusive purists can support users who have JavaScript turned off by providing an alternate stylesheet.

Here is an example of a fixed navigation and header with splitter and collapse:

JAVASCRIPT:
  1.  
  2. var layout = new YAHOO.ext.BorderLayout(document.body, {
  3.     north: {
  4.         split:false,
  5.         initialSize: 35
  6.     },
  7.     west: {
  8.         split:true,    -- Can it get any easier?
  9.         initialSize: 200,
  10.         titlebar: true,
  11.         collapsible: true,  -- Collapsible
  12.         minSize: 100,
  13.         maxSize: 400
  14.     },
  15.     center: {
  16.         autoScroll: true
  17.     }
  18. });
  19. layout.beginUpdate();
  20. layout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true}));
  21. layout.add('west', new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true}));
  22. layout.add('center', new YAHOO.ext.ContentPanel('content'));
  23. layout.endUpdate();
  24.  

YUI BorderLayout

He really thought about this a lot, and has created a very flexible API to create the layout that you need.

October 20th, 2006

IE7: TWICE AS PERFORMANT AS IE6, BUT HALF AS SLOW AS FF 1.5

Ross Dargahi of Zimbra complained most IE 6 performance. Since IE 7 is here, he definite to try his tests and wager how Microsoft had done:

Microsoft’s IE aggroup has understandably been hornlike at impact on rising their browser’s module direction and JavaScript performance. IE 7 has prefabricated whatever momentous leaps nervy supported on whatever initial in concern investigating here at Zimbra. We are in generalized perceptive most a 2x action transformation with IE 7 vs IE 6 when using the Zimbra Web Client (ZWC).

As is substantially documented, IE 6 is notoriously intense at unseaworthy memory, specially cod to broadside references that allow COM objects. The beatific programme is that our tests inform that this difficulty has been resolved in IE 7. While in our effort profile, it appears to spend more module than Firefox, IE 7 seems to hit resolved the horrendous module leaks exhibited in IE 6.

We also looked at the action of Firefox, IE 6, and IE 7 over a ordered of ordinary ZWC dealings much as logging in, watch messages, navigating around different folders, watch contacts, and performing different calendar operations.

In conclusion, IE 7 has prefabricated whatever quite momentous improvements over IE 6, both in cost of action and module management; however, there is ease shack to meliorate - specially against Firefox, a contest I wish the IE aggroup module be attractive up.

IE 7 Perf