I have some downtime at the moment so I wanted to get back to coding a little bit. One of the things I’ve been wanting to mess around with for some time is the Flickr API, mainly because I upload a boatload of pics to the service. Chris Heilmann posted a really great tutorial on pulling back pics using JSON and plain ole JavaScript. I have to admit that it was insanely easy and Chris, as always, did a great job of breaking it down. I made a few tweaks since, as he mentioned, document.write isn’t the best choice for outputting and the code was trivial:

function jsonFlickrFeed(o){
var i = 0, mainDiv = "", foo = "";
mainDiv = document.getElementById( "main" );
while(o.items[i]) {
foo = document.createElement( "img" );
foo.setAttribute( "src", o.items[i].media.m );
main.appendChild( foo );
i++
}
}

So I wanted to do this in jQuery just to see what it would look and had a “woah” moment:

function jsonFlickrFeed(o){
var mainDiv = $( "#main" );
$.each( o.items, function( index, node ) {
$( "<img />" ).attr( "src", node.media.m ).appendTo( mainDiv );
} );
}

It was a silly little snippet of code but it took me back to the feeling I had when I first jumped into jQuery way back in 2006 where the brevity, power & simplicity just amazed me. And the feeling truly hits home after I had read the following from Chris just yesterday:

Use libraries

And for that, use libraries like Dojo, jQuery, YUI, mootools or whatever to work around the browser problems so that you can concentrate on what you want to build rather than how it fails.

Libraries fix browsers

Our main enemy to build cool products are browsers. The technologies and standards that drive the web are dead easy – we just don’t have time using them as we spend most of our time testing and wondering why browsers don’t implement them in a predictable manner. This is where libraries come in and my plea here is to use them. Using libraries you can write predictable applications built on a base that can be altered for all the browsers to come – if you build towards the browsers in use today you build for the past. We’ve done that before and paid dearly for it.

I wholeheartedly agree with this. Yes, it’s very important to understand plain ole JS, which is why I wanted to do this exercise using it but just seeing the minimal effort required to do the same in jQuery just reinforces my belief that libraries are an extremely important arsenal in your toolkit if anything solely for the cross-browser handling that they provide. In my case, jQuery is my tool and I love it. What’s your library of choice?

I mentioned last week that I wanted to improve my knowledge of JavaScript and outlined some books which I really believe are top references for doing just that. The first book that I’ve started with is Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional by my friend Christian Heilmann. Christian is a YUI Evangelist for Yahoo! and a major advocate of usability & adherence to standards. He’s also an EXTREMELY talented developer and one of the coolest guys to meet.

I’ve had this book for some time but only skimmed over it when I first got it. I found it awesome then but now that I’m going page by page, I’m finding so many nuggets that it’s never leaving my library. Shame on me for just skimming it.

I especially like the approach taken by Christian in that he continually preaches unobtrusiveness and progressive enhancement throughout the book, thus laying the proper foundation for new JS developers. This is an important distinction from other books I’ve seen who love to teach inline JavaScript at every turn.

As I begin 2009, I've been pondering quite a bit about which direction I'd like to take my career in. At the age of 40, I'm certainly not a spring chicken but I do feel that I'm at a great point in my life where I have a tremendous amount of experience while still feeling the fire to learn more. For the last 19 years or so, my career has revolved around development. Basically, I've been a coder most of my career and apart from some short stints in a business development role, I've really focused on the development side of things. This isn't a bad thing by any means and I think I've been fairly successful at it. I do feel, though, that it's time to expand a bit and 2009 will be the year to do it.

Product Management

I want to get more involved in product management. Taking a product from inception to production is REALLY challenging. I'm not talking about coding it. I'm talking about overseeing the process of taking an idea and helping drive it to market. That means more interaction with users, marketing, biz dev, PR and media.

The fact that I have a strong technology background, in my opinion, will help by being able to understand the bottlenecks in the process and helping any team that I work with overcome those hurdles.

My new boss, Nick Nguyen, has already started mentoring me on this and I believe he'll be able to teach me quite a bit.

Technology

My bread-and-butter has always been my technical side and I can't ever see that going away (although diminishing in importance slightly).

Firefox Add-ons

Apart from a focus on product management, I think that becoming “Mark Finkle” knowledgeable in add-on development will be the single most important goal for me in 2009. It's such an important part of my day-to-day and will go a long way in helping me support the add-ons community. Having a solid understanding of the development process will help me do a better job of being a product manager in the future.

ColdFusion

For the last 10 years, I've been knee deep in ColdFusion and, if I say so myself, one of its biggest supporters and flag-wavers.

While I love ColdFusion and think it's an amazingly powerful application server, I also feel it's time for me to explore other server-side options. When you look at the landscape, there's an abundance of very hot languages and frameworks which are not only feature-rich but monetarily appealing. The demand for Python, Ruby & PHP skills, especially when coupled with Django, Rails/Merb or CakePHP, has grown steadily and the need to diversify is pretty obvious. There's still a great demand for ColdFusion developers but I think to keep yourself fresh, you need to try new things (even if they're more painful than what you're used to).

With Mozilla heavily vested in PHP & CakePHP, chances are that I'll go that route although the other two server technologies are very appealing.

jQuery & JavaScript

I think many of my blog readers know that I'm a member of the jQuery Project Team and it's something that I'm very proud to be a part of. The project has skyrocketed in part to the amazing team that we have and I firmly expect to continue to push the jQuery message into 2009.

Just before I started using jQuery, I was a server-side developer who wanted to expand in to JavaScript and client-side development mainly because of Ajax. So I bought a book and started hacking at JavaScript, DOM and XHR. Shortly after I discovered jQuery and it was like the sea parted and I saw the road to the client-side. I jumped onto the jQuery train and never looked back.

With that said, of recent, I've felt a bit of hole in me. Over the last 2 years, I've met some amazingly smart JavaScript developers and read some really awesome JavaScript articles and it hit me how much I want to learn more about the JavaScript language. Mind you, I'm not interested in being the next John Resig or Peter Higgins but I do want to develop a much stronger understanding of the techniques and patterns that make libraries such as jQuery, Dojo, YUI & MooTools so helpful.

The great thing is that my time with jQuery has really helped me understand so key concepts of the JS language but I also know there are techniques that I am not fluent in and I think understanding them will help me dramatically improve my contributions to the project & community as well as my own development work. Does this mean I'll stop using jQuery? No freaking way! jQuery continues to be a God-send and I couldn't picture having to hand-code all of the script that jQuery provides in one small method call. And if I want to learn how to do it, I have no better teacher than John Resig himself, whom I can call anytime and ask him for help. In other words, jQuery FTW!

What it does mean is that I will start practicing straight JavaScript a lot more and going back to the basics to make sure I understand things clearly. I've already started by cracking open Christian Heilmann's book “Beginning JavaScript with DOM Scripting and Ajax”. I'm planning on following that book up with the following:

• Pro JavaScript Techniques by John Resig
• Pro JavaScript Design Patterns by Dustin Diaz
• Object-Oriented JavaScript by Stoyan Stefanov

I'll also be hitting up the YUI theatre since they have some really awesome videos by Eric Miraglia & Douglas Crockford.

Getting a better grasp of JavaScript will also help me in achieving my goal of knowing the Mozilla add-on platform at the guru level.

CSS

One of my biggest weaknesses is my lack of advanced understanding of CSS techniques. I can certainly use CSS and create a basic stylesheet but there are so many dimensions to CSS which I don't know. If I could be half as talented in CSS as Bradley Sepos or Scott Jehl, I'd be happy and I think that achieving that isn't unattainable.

I've bought a couple of books including a video tutorial by Eric Myers and yep Sitepoint books, all highly recommended.

Writing

One area that I've been falling behind on is writing more articles and blog posts for my personal blog as well as Ajaxian. Ajaxian is extremely important as it allows me to share techniques and code that I find useful, in the hopes the community will also find it beneficial. It's a great soundboard and I really need to dedicate some time to it.

The AMO blog is another site that I plan on giving more attention to especially as I become more proficient in add-on development.

Finally, I want to contribute more content to LearningjQuery.com. My good friend Karl Swedberg has done a great job building that site and I need to do a better job of supporting him.

Next Steps

The next logical step for me is to decide how to prioritize what I learn. The product management side of things is easy since it'll be part of my daily work and I have good mentors including Basil Hashem and Nick Nguyen.

Learning another server-side language may ultimately fall to my lowest priority simply because I see a greater value proposition by becoming strong in add-on development and JavaScript.

The nice thing about my job is that I can expand into a non-technology role (at least not coding) while still being able to dabble in technology.

I have some planning to do in the next week or so so I can set a workable schedule.

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.