I’m a big fan of Clicky Web Analytics – Why? Well mostly because of their excellent Spy feature which I’ve previously discussed here and here. A few weeks back I emailed the developers asking them:

“Something has just occured to me as I stare at the tab with Spy opened – could you add the current active user numbers into the title dynamically everytime that number changes?”

I was thinking something along the lines of Twitter search, or Campfire (and Chatterbloc) which display an unread message count in the title field which is also seen in your browser tab menu:

Why is this helpful to me? Well like most people I use multiple tabs and it really bugs me to have to flip from one to the other all the time to refresh or view updates that have appeared via ajax. Anyway, long story short – Clicky implemented the change within about an hour of my email (which was also awesome btw).

Fluid

So that’s great, my tabs now show me my current active live user count on reynoldsftw.com. But then I started to think… I’m using multiple applications, not just multiple tabs – so when my focus is elsewhere – I can’t quickly see the latest user count without going back to my browser and checking out the tab!

Enter Fluid.app. Fluid is a browser-type application which goes one step further – allowing you to build site specific Mac OSX applications based on websites. What do I mean by this? Well basically – I can create a brand new desktop application out of any website. It will have a lovely icon, and launch in exactly the same way as any other desktop application.

Fluid isn’t just that though. It also gives you added scripting ability in the name of Greasemonkey. What this allows me to do as a user is write a small script (javascript) to interact with the page, and do something with the results. In this case, I am going to create a script which reads the <TITLE> HTML element, looking for the user count in brackets “(10)”, and display a nice badge over the dock icon:

Once complete, I now only have to peer down to my dock for the latest user count – and if I want to dive into the Spy page, I just click the icon, and my web application is open. Awesome work – so how did I do it?

Clicky Desktop Application

So the first step is to make a nice desktop application out of my Clicky Spy page. Download Fluid.app from their website and install (OS X 10.5 upwards). Run Fluid – you will be prompted with a couple of questions around what web page you want to make an application. Enter the URL of the chosen site (this could be Clicky Spy, Twitter Search, GMail – whatever), a name for your app, where you want to save it (Applications folder probably) and what icon you want to use.

Icon wise you have two options, use the favicon (which I used – but doesn’t scale well), or use a nice PNG file. Up to you.

Click “Create” and you’re done. Launch your newly created application. It doesn’t look much different to a browser huh?

GreaseMonkey

So next we need to create the script to infiltrate the <TITLE> HTML element, and extract the count from between the brackets. This is pretty easy – goto the script icon and choose “New Userscript…”:

This will prompt you for a name for the script, and also open up a empty script for you to manipulate in your favourite code editor.

Finally, its time to enter some code. Here is the script I am using to extract the user count (ie “3″) from “(3) Blah Blah”:

// ==UserScript==
// @name        LiveStats
// @namespace   http://fluidapp.com
// @description What does this do?
// @include     *
// @author      SteveReynolds
// ==/UserScript==

(function() {
if (!window.fluid) {
return;
}
function updateDockBadge() {
var badgeString = "";
var title = document.title;

if (title && title.length) {
var start = title.indexOf("(");
var end = title.indexOf(")");
if (start > -1 && end > -1) {
start++;
badgeString = title.substring(start, end);
if (badgeString == "0") {
badgeString = "";
}
}
}

window.fluid.setDockBadge(badgeString);
}
setInterval(function(){updateDockBadge();}, 3000);
})();

Job Done! Just enable the script by clicking its name in the script menu, and reload all scripts. Sometimes this doesn’t work so you might need to restart the app.

So over the past 6 months I’ve taken a look at many jQuery plugins via this website. After some time I thought it would be interesting to see out of all of the plugins I’ve looked at, which ones are getting the most interest. Well the results are in:

Here’s that list:

1. Flot : http://code.google.com/p/flot/

Flot

2. Google Charts : http://maxb.net/scripts/jgcharts/include/demo/

Google Charts

3. Sexy-Combo : http://vladimir-k.blogspot…jquery-plugin.html

Sexy-Combo Plugin Preview

4. Sparkline : http://omnipotent.net/jquery.sparkline/

Sparklines

5. (mb)ToolTip : http://pupunzi.wordpress.com/…/mbtooltip/

(mb)ToolTip

6. jqchart : http://jsgt.org/lib/jquery/…/test-use-gradient.html

jqchart

7. Raphaeljs : http://raphaeljs.com/

Raphaeljs

8. Smart Google Map: http://code.google.com/p/jquery-googlemap/

9. Alphanumeric : http://itgroup.com.ph/alphanumeric/

Alphanumeric

10. Bluff : http://bluff.jcoglan.com/

Bluff

Admittedly, a couple of these are not jQuery plugins after all, but never-the-less, they’re doing pretty well.

Observations

• Alot of these are around charting or graphing.
• Sexy-Combo is right up there, see this post for more on that. Although this should be high up due to the nature of the popularity of that article around how “Sexy Sells”
• Interestingly, the Top 10 articles where I reviewed the charting plugins isn’t way way up there in the stats Vs other Top 10s.
• I hope the developers of these plugins appreciate the traffic I am driving to their sites

So I have been trying to figure out a really simple, easy way to test the load times of my Javascript in the page, and have ended up creating a simple load time tester using jQuery called jQTester.

jQTester Displaying its results

This assumes you are using jQuery, and are running using version 1.3.1 – however it should work on most versions as the jQuery I am using is pretty lightweight.

The concept is simple – you have 2 files called start.js and end.js. Place start.js at the top, just after your <HEAD> tag, and place end.js just before </body>. Using javascript timers I am capturing the length of time between start.js loading, and the document.ready jQuery function running (when, all javascript and DOM elements should be loaded and ready to use).

Why place end.js before </body> ?

So, ideally you are placing your javascript calls at the end of the HTML document. Why? because javascript file downloads block parallel downloads in the browser. Browsers can only download 2 files per hostname at any one time, so by placing them in the <HEAD> you are in theory stopping anything else from loading within the page whilst all your javascript is being loaded. By placing them at the end of the HTML document, images etc have the chance to load first, so the perception for the user is faster load times.

So the browser will load your HTML document top to bottom. Based on the assumption that no other javascript needs to load after </body> is called, the best place to stop the timer is at that last point. That’s when the clock stops, and we assume we’re all loaded.

jQTester 0.1

So I’m not really 100% sure if this is the right way to go about this, but anyway – I’ve packaged this up as “jQTester” and am attaching version 0.1 for your perusal. It would be good to get some feedback on how I can move forward with this, as I am keen to develop a tool or plugin that can sit within the page code, rather than being a browser add-on etc.

Download jQTester 0.1

Install instructions: Use jQuery, place start.js after the <head> tag and place end.js before the </body> tag.

Add your comments below on ways to improve jQTester.

Had an interesting comment posted on my blog overnight which suggested the following: To place all javascript code at the end of your HTML page, rather than in your <HEAD> tag to improve performance. On face value this doesn’t really tell me much, so hopefully within this article I can clarify a few approaches that can apparently improve page load performance.

Don’t write inline code if possible

The first approach is less obvious but can have a detrimental affect to page loading times. By writing javascript code inline, ie within the HTML document itself, the browser downloads and reads that chunk every time. By hosting your script in an external file, local or outside of your domain, the browser can better cache this, enabling faster read access, as well as allowing the browser to ignore it if necessary and continue downloading other assets that are new.

Placing scripts at the bottom of the HTML document

It turns out its actually better to place scripts at the bottom of the HTML document. But why is this? It appears that the HTTP 1.1 specification is the culprit. According to the document, whilst a browser can download only 2 resources from any 1 hostname at one time (2 images for example), when downloading scripts, the browser cannot download anything else at all.

One immediate work around that you may think is possible is to host the content externally, say for example referencing the jQuery library on the Google code repository. The trouble is, even if the script is on an external hostname, the browser still cannot download anything else when it accesses it. Whilst this approach is still good from a bandwidth and caching perspective, it doesn’t really help our page load times if that document hasn’t previously been cached.

Anyway, therefore, there is in theory a period of time where the browser is downloading your scripts one at a time, and doing nothing else. Depending on the size of your scripts this could be quite a significant lag. The answer to this is to place the scripts at the bottom of the HTML document.

So by moving your scripts to the bottom it therefore enables the browser to deal with the HTML document and its remaining assets in as faster time as possible. This obviously has its drawbacks, especially if you are writing your HTML document with javascript – however you can get around this.

Let the document download as is, and use a library like jQuery to manage the document manipulation with its $(document).ready() function. Place your code within the function to manipulate your HTML document before it is presented to the user.

Why aren’t people doing it?

This is where this all gets confusing for me… Alot of the big guys just aren’t doing it. For example, the jQuery official website has everything in their <HEAD> tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" src="http://static.jquery.com/files/rocker/scripts/custom.js"></script>

I would have thought that being so focussed on performance, they would have done something like this, so why aren’t they? Perhaps the code in their custom.js has to be in the <HEAD> for whatever reason, or maybe I am misunderstanding the benefits to putting your scripts at the bottom of the HTML document?

Tools to help you learn…

Learning jQuery 1.3	Amazon Kindle 2	jQuery UI 1.6

Okay, so these aren’t all strictly Top 10 articles, but they’re definitely all articles that have either helped me implement cool features into my site, or spurred my brain into motion. We’ve got UI, icons, tutorials, frameworks – some cracking stuff, take it away!

1. 10 Smart Javascript Techniques to Improve Your UI

Some great techniques here on nettus, from slide-down menus to the likes of the hover over effects, slide down menus and image manipulation (as above). Worth a look!

2. 10 Beautiful icons set for web developers and designers

Some great icon sets here from woork. I’ve used this article over and over for various projects, even in powerpoint presentations. An awesome collection of icons that’ll spice up any application.

3. 30 Beautifully Blue Web Designs

As you guys can tell, I like Blue – and this article from Six Revisions was a great inspiration to me for various projects. There is something about a blue UI that makes me feel good inside, and this article is a great collection of some solid designs around that theme…

4. 20 Excellent AJAX Effects You Should Know

Nettus strikes again with this great collection of Ajax effects. IM applications, Live Validation, Email applications, heat maps – some really cool (and some crazy) implementations.

5. 17 Online Free Web Based Applications

SmashingApps.com provide a good collection of online applications that will help any development lifecycle. Concentrating around project management mostly around tasks and scheduling, but useful none the less (and free).

6. 27 Best Places You Should Visit To Get Incredible Web Design Inspiration!

SmashingApps.com strikes again with this article focussing purely on how you can get inspiration. Some really cool showcase websites featured such as http://www.designsnack.com/ and http://bestwebgallery.com/

7. 40 Beautiful Free Icon Sets

Another cool icon set article from Six Revisions this time. Some great examples here, I love the paperclip above from cgink, just for being plain and simple – a paperclip.

8. 70 New, Useful AJAX And JavaScript Techniques

Smashing Magazine tear it up with this amazing collection of ajax implementations. There are so many crazy ideas here it really gets the brain cogs moving. This article covers all sorts of things from menus, tooltips, calendar functionality, form validation methods – the lot. I dare you to not find inspiration form this article… I dare you.

9. 51+ Best of jQuery Tutorials and Examples

If you’re learning jQuery, look no further for a quick win article on the top tutorials around than at noupe. It’s a little disorganized but you can find some good gems in the mix here (if slightly outdated).

10. 10 Beautiful Web UI libraries

Last up is a great collection of UI frameworks/libraries from woork. Most are built on top javascript or in the case of MochaUI (above) on top of MooTools. You have to check out some of the demos on these libraries coz they will probably blow your mind!! … Yeah, that just happened!

Tools to help you learn…

Learning jQuery 1.3	PHP MySQL Development	jQuery UI 1.6

Last week I did a review of 6 jQuery plugins that were great for implementing charts. Since then, I’ve had the opportunity to work with a couple more alternatives that are outside of the jQuery realm, and arguably look like they could be real contenders for removing Flash’s dominance in this area, so let’s check them out:

1) Emprise Javascript Charts

Chart Types: Line, Bar, Pie, Function, Area, Scatter, Trend, Analogue Gauge, Candlestick, Floating Bars, Stacked Bars.

Emprise is a really great pure javascript solution to charting. Features include zoom, interactive charts, stackable, as well as having ajax capabilites built right in. Out of all the charting jQuery and Javascript alternatives to Flash that I have seen this is by far the most advanced. But alas, with quality comes a price. Emprise is free for personal use (with restrictions) and scales up to a $1000 license for unlimited use.

2) Bluff Graphs

Chart Types: Accumulator, Area, Bar, Line, Mini Bar, Mini Pie, Mini Sidebar, Pie, Net, Sidebar, Spider, Stacked

Back when Bluff was released I was extremely impressed by the ease of implementation and great built in options to make charts on any site a quick reality. Bluff also comes with a number of pre-defined themes for your charts that you can use “out of the box” and they look pretty darn good. I’ve used Bluff on many occasions to drive stats engines, and it’s never failed me.

Implementation wise you have two choices, feed the data into javascript variables, or tell the class to read from an HTML table of data. Both work extremely well.

3) Raphaël’s Javascript Library

Chart Types: Your imagination.

I was equally impressed by Raphaël’s Javascript Library when I was introduced to it last week. The library used SVG and VML to create stunning animated charts and pretty much anything else you can think of.

There are some stunning demonstrations on display as to the power of this library, interactive charts working just like Google Analytics Flash alternatives for example. The library isn’t built predominantly for charting applications, so you need to put some work in to create your charts so be warned. This out of any shows the most promise with where javascript and vector graphics are going in the near future.

4) JSChart

Chart Types: Bar, Line or Pie

JSChart is another pretty decent javascript alternative to flat charting. The results are actually very nice to look at, and the developers promise a very simple implementation. Data sources can either come from javascript arrays or a valid XML file. The only other things you need to do are tell the script which chart type to draw, and tell it where to draw it. Pretty good stuff for a quick win.

5) Graph-It

Chart Types: Mini-Bar

I only mention Graph-It for one reason, its ability to create mini bar graphs in a similar vein to the sparklines plugin I discussed last week. It doesn’t look that great admittedly, but you can fix that yourself.

Conclusion

One of the great things I’ve learned with this exercise is that there are some great viable javascript alternatives out there and that progress is happening all around us. I am really starting to question how long Flash’s dominance in this area will last, based on the kind of demos we are seeing from Raphaël it looks like their days are numbered. Some awesome work here, and look forward to seeing more!

Tools to help you learn…

Learning jQuery 1.3	Amazon Kindle 2	jQuery UI 1.6

As part of the Chatterbloc project we had a requirement to do a couple of things:

1. Reformat www. links with http://www.
2. Replace http:// strings with an HTML A link equivalent

Surprisingly I found it pretty hard to find a hard and fast solution for this that had already been done, so I either wasn’t looking properly, or it doesn’t exist. Anyway, I created two functions for this piece of work, I’ll show you those, and also how to use them.

Convert www to http://www

So my first problem was to change www.google.com to http://www.google.com. I came up with the solution below as a function:

function replacewww(text) {

var start = (text.indexOf("www"))-7;
var match = text.substr(start,7);
if(match != "http://" && match != "ttps://")
{
text = text.replace("www", "http://www");
}

return text;
}

This is quite a basic string manipulation – literally looking for an index of www in my text string, and taking out the match -7 characters. That will tell me whether there is http:// or https:// in front of the www. If there isn’t, the function replaces the www with http://. What this function doesn’t do is know whether it should be http:// or https://, it assumes http:// is the more likely candidate.

Convert links to HTML A HREFs

The next part is where I needed a regular expression to hunt down the start and end of a URL, and replace it with the HTML equivalent, ie

<a href="http://www.google.com">http://www.google.com</a>

The reason why I used a regular expression was that it was increasingly difficult to find the end of a url using string manipulation, it was never guaranteed (you could argue the same with regular expressions), however I found that I had much more success with using a regular expression match to make it happen:

function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(exp,"<a href='$1' target='_blank'>$1</a>");
}

This function simply does a string replace based on a regular expression match. The $1 part is obviously the matched element, ie the URL which is placed where necessary within the HTML tags.

Making it happen

So, the reason why I separated these two functions was because I would actually not always require both of them at the same time, so it made sense in my implementation to keep them as two. You could however, push them all into one function for ease of use.

Anyway, I’m sure its obvious on how to make this work, however I’ll show you so it’s quite clear.

var newHTML;
var stringInput = "Check out this link www.google.com";

newHTML = replacewww(stringInput);
newHTML = replaceURLWithHTMLLinks(newHTML);

document.write(newHTML);
}

Conclusion

I hope you found this basic tutorial helpful… As I like to mention – I’m here to help the common man/woman, more than the über nerd, so I hope this article was a nice fit for what you needed. Look forward to hearing from you as always…

Tools to help you learn…

Learning jQuery 1.3	Amazon Kindle 2	jQuery UI 1.6