Jonathan Snook will be conducting a live chat tomorrow (3/5/08) at 10:00am EST (15:00 GMT) via UStream. Here are the details:

• Location: http://www.ustream.tv/channel/snookca
• Date/Time: 3/5/08 at 10:00am EST (15:00 GMT)
• Topic: Q&A relating to Jonathan's development work with Adobe AIR, and questions regarding JavaScript, frameworks (PHP or JavaScript), or about freelancing.

If you're not familiar with Jonathan, he is one of the top client-side veterans around having published books, articles and contributed to many projects. He's also the lead for the Snitter project, a Twitter client developed in JavaScript using jQuery and Adobe AIR.

This is definitely a good opportunity to pick the brain of one of the top professionals around.

I have to say that at one point, I truly thought that JavaScript was using some type of "black magic". Things such as closures really threw me for a loop and I was fortunate to have some good folks to walk me through some of the tougher concepts. Not everyone is as lucky and thankfully, we have developers like Christian Heilmann who continue to put out great postings that cover a broad range of topics and experience levels.

In his latest posting, Christian outlines certain JavaScript shortcut notations which make understanding specific JS techniques a whole lot easier. For example, when dealing with objects, there's the involved way of defining objects:

var links = new Object(); links['Cute Overload'] = 'http://cuteoverload.com'; links['I can has cheeseburger'] = 'http://icanhascheezburger.com'; links['Pencils at dawn'] = 'http://pencilsatdawn.wordpress.com'; links['Hobotopia'] = 'http://apelad.blogspot.com';

and then there's the easier way using object literals: var links = { 'Cute Overload' : 'http://cuteoverload.com', 'I can has cheeseburger' : 'http://icanhascheezburger.com', 'Pencils at dawn' : 'http://pencilsatdawn.wordpress.com', 'Hobotopia' : 'http://apelad.blogspot.com' // < -- again, no comma! }

Christian provides plenty of great examples that should substantially help new JavaScript developers.

NextTag.com is a service that aggregates product info from different vendors and offers comparison shopping. Essentially, vendors have to work to ensure that they offer the lowest prices for a product so that when a consumer compares prices among the same product types, their products get clicked.

When a consumer clicks on a product, they're taken to the vendors site and if they buy a product, NextTag gets a cut. In order to determine whether they came from a NextTag, a vendor needs to include the following snippet into the final page of the order process:

This snippet somehow allows NextTag to differentiate between normal orders and order explicitly referred by NextTag. For example, if you receive 10 orders today and 3 were referred by NextTag, the code snippet somehow knows this.

I want to do something like this but can't for the life of me figure out how they did it. I checked my cookies and there are no NextTag cookies set at all (sub-domain either). JellyFish.com, Google Adwords, & Overture all do something similar.

JellyFish:

Can anyone shed some insight on how this is done?

Just got this from Ajaxian.

IE has always had the crappiest set of JavaScript debugging tools forcing developers to try to troubleshoot issues via alert() or jumping to FireFox w/ Firebug to troubleshoot. Well, Jean-Fabrice Rabaute has a solution. He just released Companion.js, a debugging toolbar for IE!

Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE.

The current version is 0.2, adds the following features to IE :

• The toolbar :
  • Menu to customize the DebugBar and check updates.
  • Toggle the Development bar
  • Alert on javascript errors
  • Send page screenshot by email
  • Color picker
  • Resize IE window
  • Zoom page
  • View source code
  • View MSHTML integrated ActiveX source code
• The Development bar :
  • View HTML DOM Tree
  • View original ad interpreted source code
  • View tab attributes
  • Edit tab attributes
  • View HTTP and HTTPS headers
  • View page cookies
  • Validate html code for main page and frames/iframes
  • List all javascript functions
  • View javascript function code
  • Execute javascript code in the currently loaded page
  • Get information about currently loaded page

I'm definitely giving this toolbar a shot as anything that helps debugging in IE easier is worth a try.

http://www.my-debugbar.com/wiki/CompanionJS/HomePage

Last month I set out to see how far I could compress the CF8 JavaScript files. As many have come to find out, the YUI, Ext and Spry JS files can be rather large and I wanted to bring them down as much as possible.

As I was reading Ajaxian today, I saw a post about a new compressor called YUI Compressor which is a Java-based application which helps to greatly minify your JavaScript code. In speaking to my friend Tane Piper, he told me that he saw *amazing* results when he used it against his jQuery plugins. So I had to give this a shot against the CF8 files.

I immediately tried it against Spry's largest file, SpyData.js, and here were my results:

SpryData.js uncompressed: 126k SpryData.js minified: 66k

Woah! Almost a 50% reduction in size.

I then tried it against the Dojo ShrinkSafe version of SpyData.js that I had created last month:

SpryData.js compressed with ShrinkSafe: 72k SpryData.js minified: 64k

Wow, even more reduction if I run through the file through ShrinkSafe first!

I did try this on the Ext-All.js file and also saw a reduction of 30k in an already compressed file!

This is really a good utility to have and the results are outstanding. I would say to use this in conjunction with another packer and some http compression for really boosting performance on your web apps.

*** NOTE: If you're going to use this, please be sure to backup your existing CF8 JavaScript files just in case something doesn't work as expected.

YUI Compressor

Ajaxian is reporting about a very neat and cool bookmarklet, XRay, that helps you visually get information about specific elements on your page. The site best describes its functionality as "a free cross browser tool (a bookmarklet) that lets you see the box model in action for any element, letting you see beneath the skin of any web page. Just click the XRAY button to instantly answer those vital questions: where is the top and left of this element? how big is each margin? how big is the padding? how wide and high is the content box?".

I tried this out and it was VERY cool. While there's some overlap with Firebug, this is definitely being added to my toolkit. The only downside is that it doesn't work on IE.

http://westciv.com/xray/

I've noticed in conversations that a lot developers really do take page size for granted. Their rationale is usually that their target audience uses broadband so there's no need to worry about it. I call that naive thinking. You still need to be cognizant of what you're building and how its coming across the wire. Large pages can still be excruciatingly slow, even on broadband, so you can't take that for granted.

Well, Yahoo! just made it way easier to see what's slowing down your pages. The Yahoo! YSlow Firefox plugin "analyzes web pages and tells you why they're slow based on the rules for high performance web sites". Considering that Alexa ranks Yahoo! as the top visited site on the Internet, I would say they know what they're talking about.

What I really like about this plugin is that it integrates directly with the Firebug console so you don't have some extra widget sitting in FF and it also provides a summary of the target areas that you should address to improve site performance. This summary is in the form of links which take you to an explanation of why a specific area is important. I'm really digging this.

If you're really serious about having a responsive site, you should consider adding Yahoo! YSlow to your toolbox.

Update: Stoyan Stefanov has done an excellent review of YSlow here.

First up:

Jim Priest does an excellent job of reviewing the first couple of chapter's of Karl Swedberg and Jonathan Chaffer's newly released jQuery book,

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

My favorite quote from his review is:

Glancing at the Table of Contents - I'm happy to note there are no basic introductory 'HTML/Javascript' chapters (no fluff!) you dive right into a simple jQuery script where you manipulate some CSS.

That's what I would expect from a book written by Karl; good content and no fluff.

Be sure to checkout the review here:

http://www.thecrumb.com/2007/07/13/5-minute-jquery-book-review/

and support Karl's hard work by ordering the book here:

http://www.packtpub.com/jQuery/book/mid/100407j4kh3d

Next:

If you've been in development for awhile and are serious about coding, then you have to have heard of and/or read Dr. Dobb's Journal magazine. Dr. Dobb's magazine is truly the best publication for hardcore developers that want to learn new techniques for improving their development skills. It tackles a variety of programming languages and really gets to the juicy stuff without boring you with mundane commentary.

Well, you can now add jQuery to the list of frameworks reviewed by DDJ. That's right, DDJ published a 4 page online article about jQuery titled Getting Started with jQuery.

It runs you through the basic steps of getting up to speed with the jQuery library and they do a good job of explaining the basics. Its definitely a good read for those starting out with jQuery.

Having a well-known magazine such as DDJ publish this article is a big step for the jQuery project and we appreciate DDJ taking the time to put up such a great writeup.

Last but not least:

Developer extraordinaire Remy Sharp, posted on the jQuery list about a fun app he developed called Speech Bubbles. Using bookmarklets, it would allow you to attach speech bubbles to specific parts of web pages. It was REALLY cool and Remy got a lot of kudos from the jQuery community.

Well, it looks like others have also fallen in love with this app as Ajaxian has now picked up on this and made a post about Remy's work. Go check it out here:

http://ajaxian.com/archives/friday-fun-with-speech-bubbles

and show your support for Remy.

I wanted to let you know about the jQuery Project's latest version release. With jQuery v1.1.3, you'll see a ton of enhancements that really make an impact.

http://jquery.com/blog/2007/07/01/jquery-113-800-faster-still-20kb/

The key points are:

• Increased selector speed by 800% without increasing the size of the library (still 20kb).
• Added a ton of new selectors.
• Improved the performance of our animations
• Revamped and overhauled event system
• The jQuery v1.2 Roadmap
• The news of 4 jQuery books
• Our 1 day conference at Ajax Experience
• jQuery UI - Our new initiative to build a whole new Drag & Drop library from the ground up with speed and extensibility taken into consideration

Download:

• jQuery 1.1.3 (Compressed, 20KB)
• jQuery 1.1.3 (61KB)
• jQuery 1.1.3 (Docs, Source Code)

Exciting times for the jQuery project. Digg.com is now using jQuery v1.1.2 for their DOM, Ajax & animation needs:

Joe Stump: Technical Background of Diggs New Comment System

Joe Stump is a software developer at Digg and one of the main men behind Digg's new comment system.

In reading Joe's post, two things really stood out. First, they replaced Scriptaculous with jQuery for the comment system. Considering Scriptaculous' position in the effects library world, that in itself is huge and shows that jQuery has excellent support for effects built right into the core library.

Secondly, and equally important, is how they completely took advantage of plugins to build out the system. These included Klaus Hartl's cookie plugin and Ken Stanley's FlyDOM for jQuery and totally validates the quality of the work being produced by the jQuery community.

Having Digg as a user really bolsters to project's image and assures jQuery's place as one of the top JavaScript libraries available. Its a very big development for the team and the project and we're ecstatic to see jQuery being used by one of the premier sites on the Internet.

Please be sure to visit Joe's blog and show him your support for picking jQuery.