Using Google Trend for website, I added 5 popular javascript framework website and the above chart is the result.

Is jquery.com just that much more appealing than the other framework sites or the actual framework is just that much more popular?

Related posts:

1. Examples of Popular Sites using JQuery JQuery is famous for making Javascript easy to write...
2. Simple JQuery Feed Plugin using Google AJAX Feed API Many of you may have already heard about the Google...
3. Charts and Graphs Plotting with JQuery plugins Charts are important in visualising data to give a more...

Related posts brought to you by Yet Another Related Posts Plugin.

One of the most used and helpful feature of any Javascript framework is probably their selector function. It allows us to search and filter elements using CSS like selector syntax. This means it takes out the tedious part in DOM scripting and enables developers to write less and more reliable code. As a result, we all expect to see some sort of selector engine in all javascript framework.

However, there are still rooms for improvement and reasons to have standalone selector engines that are not part of any framework. Since selecting elements are the most common operational you would do, any improvement would increase the overall performance of your script.

Looking at recent development, there are definitely people believing the need for standalone selector. Here are 4 robust and small standalone Selector engines you can check out.

Sly

This is the new comer of selector engine which launched last week and does look very strong. It support CSS3 selector standard, small and fast. Their test shows that it is faster than most of the framework based selector out there.
Source

Sizzle

Sizzle is created by the creator of jQuery - John Resig. Again this is a very small, robust library. The idea is to have a javascript selector engine that could be dropped into other framework / library. So instead of reinventing the wheel by frameworks writing their own selector engine, Sizzle is here to solve the problem once and for all. John is trying to get other framework to use Sizzle and of course the latest jQuery 1.3 is already using Sizzle as their selector engine. The code has definitely matured since release last year and is definitely interesting to see if others start integrating it.
Source

Peppy

Again all the standard CSS3 selector support, small file size plus from their test page, it does seems to be faster than Sizzle. (but I think it was testing against early version of Sizzle)
Source

Selector.js from llamalab

Another new selector engine released this year that implements CSS3 selector standard and is looking pretty strong in performance too.
Source

Related posts:

1. 280 Slides: Using Javascript to build the Keynote on the web 280 Slides a new online slideshow creator among existing services...
2. Advanced Data Visualization Tools using Javascript With the advance in computer graphics, the way we...
3. How to build a prefect Javascript Library? There is a time where everyone is hating Javascript. It...

Related posts brought to you by Yet Another Related Posts Plugin.

As for most us who develop for the web, Mozilla Firefox are already our default browser as its add-on structure gave us many essential tools in development. So it’s very exciting to see their lab coming out with experimental project that focus on developers.

Bespin was launched last week as an open extensible web-based code editors aiming to increase developer productivity, enable compelling user experiences, and promote the use of open standards.

Without me repeating too much, here is an introduction video from Mozilla:

Introducing Bespin from Dion Almaer on Vimeo.

Although this is only a first prototype of Bespin, they have done great job to show us the possibility of coding on the web and developing applications in a browser.

I like the fact that they wanted to create something that’s different to normal desktop editor. Their integrated Command-line tool is a great example which I personally think any editor should have.  They save coder a lot of time by keep their hand on the keyboard and have no need to remember all the shortcut keys.

Technology wise, it is interesting to see they chose to use canvas to develop their own inline editor. It allows them to have a flexible UI for editing text. Again this shows the power of canvas in developing your own bespoke UI.

In the past year, we saw the launch of many web based applications and signs of them becoming a real alternative to desktop applications. In some cases, including Bespin, they offer a level of collaboration and unique UI design that desktop applications sometimes lack. I suppose this shift of platform is going to continue and we will see even cooler web apps in 09.

Check out the Bespin demo here

Related posts:

1. Web App deployment made easy with Springloops With the more and more people developing web applications,...
2. 280 Slides: Using Javascript to build the Keynote on the web 280 Slides a new online slideshow creator among existing services...

Related posts brought to you by Yet Another Related Posts Plugin.

With the advance in computer graphics, the way we visualize data have changed drastically in the last 20 years. Visualization Software are developed to take advantage of the graphical power of local computers. But now everything is changing with the Internet. We are consuming a large amount of data online and the desire and expectation to visualizing those data is increasing too. So we need to look at solutions to visualize data for the web.

There are already server side tools or libraries that generate complex graphics. But I think that is not always the best solution. A lot of the visuals could be done on the client side with the browser. It is quite logical to send just the data and let the browser handle the rendering and interaction.

Of course there are a number of client side technology you could use including Flash, Sliverlight, or even Java Applet. But here I want to show you some amazing open source tools built with pure Javascript. With most of the browsers improving their Javascript engines, Javascript is really becoming quite powerful and people are doing a lot of cool stuffs with it and here are some of them:

1. JavaScript Information Visualization Toolkit (JIT)

The JIT comes with 4 tools based on some advanced information visualization techniques.

• RGraph - a radial layout of trees with advanced animations
• Treemaps - displaying large hierarchical structures on a constrained space
• Hyperbolic Trees - a focus+context information visualization technique used to display large amount of inter-related data
• Spacetree - expand nodes that are “context-related” in a common tree layout

Visit http://blog.thejit.org/javascript-information-visualization-toolkit-jit/ for more information and example.

2. MIT Simile Web Widgets

The Simile Project from MIT is focused on developing robust, open source tools that empower users to access, manage, visualize and reuse digital assets. The web widgets contains a toolbox of several Web widgets and APIs to do just that. Just to highlight 2 of them:

• Timeplot - plotting time series and overlay time-based events over them.
• Timeline - visualizing time-based events. It is like Google Maps for time-based information.

Visit http://code.google.com/p/simile-widgets/ for more information and example.

3. MooWheel

MooWheel provide a unique and elegant way to visualize data using Javascript and the <canvas> object. You can use it to display connections between many different objects, be them people, places, things, or otherwise.

Visit http://www.unwieldy.net/projects/moowheel/ for more information and example.

4. JSViz

JSViz makes it easy to create dynamic 2D views of information including network graphs, navigation, and other dynamic layouts. Here are two example:

• Music Recommendations ( link )
  
• Force Directed Graph ( link )
  

Visit http://code.google.com/p/jsviz/ for more information and example.

5. Chronoscope

Chronoscope is a smart, sophisticated and powerful visualizing tool. It is well tested on a large data points and provide an intuitive way to explore, annotate the data. There are four ways for you to use it:

• Widget - allow you to drop a chart into any web page.
• Microformats - understand data in your web page’s HTML <table> data and they’re an easy way to add annotations and highlights to charts.
• Javascript API - use javascript to modify your chart in place.
• GWT API - integration with your Google Web Toolkit application.

Visit http://timepedia.org/chronoscope/ for more information and example.

6. Processing.js

It is a port of Processing visualization language to JavaScript, using the Canvas element. So now you can use most of 2d Processing API. This includes all sorts of different methods:

• Shapes drawing
• Canvas manipulation
• Pixel utilities
• Image drawing
• Math functions
• Keyboard and mouse access
• Objects (point, arrays, random number generators)
• Color manipulation
• Font selection and text drawing
• Buffers

Visit http://ejohn.org/blog/processingjs/ for more information and example.

If you actually get to this far, then I guess you might already played some of the demos. As you can see, some of them are quite experimental and the performance are not great. But I am sure in a year’s time the browser will be come more powerful and we will see a lot more Javascript based visualizing tools being deployed on the web.

Related posts:

1. Becoming a better Javascript Programmer using JSLint I have recently came across this interesting and useful...
2. NitobiBug - Javascript Debugging Script NitobiBug is a Javascript debugging script that once embedded,...
3. Attractive Javascript Logging Console - Blackbird Everyone who programmed in Javascript will know that one...

Related posts brought to you by Yet Another Related Posts Plugin.

Everyone who programmed in Javascript will know that one of the most common way to debug across browsers is the alert() function. Although, you can use tools like Firebug and their console api to output. It doesn’t work on IE or Safari. So a pure Javascript based solution would be great.

Blackbird is one of the latest script that does just that. It offers:

a dead-simple way to log messages in JavaScript and an attractive console to view and filter them. You might never use alert() again.

All you need to do is include the Blackbird script and style. Then you can start logging messages using their APIs including different message types and profiling as shown below:

log.debug( message )

Add a debug message to Blackbird

message: the string content of the debug message

log.info( message )

Add an info message to Blackbird

message: the string content of the info message

log.warn( message )

Add a warning message to Blackbird

message: the string content of the warn message

log.error( message )

Add an error message to Blackbird

message: the string content of the warn message

log.profile( label )

Start/end a time profiler for Blackbird. If a profiler named string does not exist, create a new profiler. Otherwise, stop the profiler string and display the time elapsed (in ms).

Blackbird

Related posts:

1. NitobiBug - Javascript Debugging Script NitobiBug is a Javascript debugging script that once embedded,...
2. 4 Plugins to turbocharge your Firebug Anyone developing for the web will have at least used...
3. php.js: Porting PHP to Javascript Kevin van Zonnevelhas has started the "Porting PHP to Javascript"...

Related posts brought to you by Yet Another Related Posts Plugin.

1. Use EXPLAIN to profile the query execution plan
2. Use Slow Query Log (always have it on!)
3. Don’t use DISTINCT when you have or could use GROUP BY
4. Insert performance
   1. Batch INSERT and REPLACE
   2. Use LOAD DATA instead of INSERT
5. LIMIT m,n may not be as fast as it sounds
6. Don’t use ORDER BY RAND() if you have > ~2K records
7. Use SQL_NO_CACHE when you are SELECTing frequently updated data or large sets of data
8. Avoid wildcards at the start of LIKE queries
9. Avoid correlated subqueries and in select and where clause (try to avoid in)
10. ORDER BY and LIMIT work best with equalities and covered indexes
11. Separate text/blobs from metadata, don’t put text/blobs in results if you don’t need them
12. Delete small amounts at a time if you can
13. Make similar queries consistent so cache is used
14. Don’t use deprecated features
15. Turning OR on multiple index fields (<5.0) into UNION may speed things up (with LIMIT), after 5.0 the index_merge should pick stuff up.
16. Use INSERT … ON DUPLICATE KEY update (INSERT IGNORE) to avoid having to SELECT

Now if you know all the above tips, then may be you want to start looking at database scaling, design and more from MYSQL forge.

Here are some more detailed articles about optimizing MySQL for those of you want to get your hands dirty:

• MySQL Queries Optimization by Peter Zaitsev
• Table Design and MySQL Index Details
• MySQL & PHP Performance Optimization Tips
• MySQL Presentations: Optimizing MySQL

No related posts.

Recently I found this little web tool called Product Planner that allow you to easily create user flows and share it with others.The idea is that by looking at examples of other successful web products, you can get a better idea of how to create your own.

Below is an example of user flow for YouTube Sharing

Related posts:

1. Creating beautiful pop-ups using jquery When it comes to pop-up windows, people don't really associate...
2. Web App deployment made easy with Springloops With the more and more people developing web applications,...
3. 5 Online Tools to Test the Loading Time of your site As a blogger / developer, it is always fascinating to...

Related posts brought to you by Yet Another Related Posts Plugin.

So here I prepared a list of free websites that can help you to test the loading time of any website.

1. Pingdom Tool

Probably the best tool from this list. It loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It looks very similar to the Firebug “Net” feature. The load time of all objects is shown visually with time bars.

2. Webslug

This service is quite cool in a way that it allows you to compare the load time of two websites and tells you difference between the two. So you can always show off how much better you site is over your competitor.

( For once google is on the loosing side :p )

3.  WebWait

A simple and basic tool does one thing - tell you how long does it take a website to load on average. You can change the numbers of call and interval seconds between each call. Then it will tell you the average time.

It also provide you with a Bookmarklet / Favelet, so can quickly test any pages while browsing. You can bookmark the this link here.

4. Website speed checker by LinkVendor

One interesting feature about this tool is that it tells you the estimated load time for different connection type.

5. Free Internet Web Server Monitoring Tool by Internet Supervision

This tool shows you the loading of your site from server around world on a world map.

Related posts:

1. Evaluate the Quality of Your Website Since I just updated the design of the site, I...
2. Creating User Flows with Product Planner When you develop any sort of websites, you need to...
3. Web 2.0 Design Generators For Developers If you are a busy web developer that also need...

Related posts brought to you by Yet Another Related Posts Plugin.

Traditionally we generate charts on the server-side but that means it will take up more bandwidth by the image all the way across the internet. Ideally we would just send the data to the browser and it will render the chart. With the advance in javascript and browser support, we have many powerful chart components out there based on Javascript. Now with the help of javascript frameworks, we can create charts in just a few lines of code.

Here we present you with 3 top jQuery plugins for plotting charts.

fgCharting

fgCharting is a simple plugin that provide you with 7 types of graphs such as line, bar, pie, filled lines. However, the special concept for this plugins is that it is accessible. It can read data from HTML table on the page and render them.

Website: Accessible_Charts_using_Canvas_and_jQuery

Download: fgCharting.jQuery.js

Flot

Flot is a very powerful plotting library allowing you to create attractive and interactive graphical plots of arbitrary datasets on the fly. It has advance feature like zooming and highlighting but still easy to use.

Website: Flot

Download: flot-0.4.zip

Sparklines

Sparkine allow you to generate small inline charts using data supplied either inline HTML or via javascript. It provide 6 types of charts such as line, bar, tristate, discrete, bullet or pie.

Website: jQuery Sparkine

Download: jquery.sparkline.js

Related posts:

1. 4 Plugins to turbocharge your Firebug Anyone developing for the web will have at least used...
2. Simple JQuery Feed Plugin using Google AJAX Feed API Many of you may have already heard about the Google...
3. Is Jquery really that much more trendy? Using Google Trend for website, I added 5 popular...

Related posts brought to you by Yet Another Related Posts Plugin.

Recently I revisited “The Law of Simplicity” by John Maeda. He is a graphic designer, visual artist, and computer scientist at the MIT Media Lab. In the book, John proposes 10 laws for simplifying complex systems in business and life.

Although the book are mostly focused on product design, it could be applied to anything especially software development. It doesn’t matter whether you are coding or designing simplicity will always work and sale. Simpler code means less bug and less maintenance cost. Simpler interface means easier to learn and use.

The 10 laws are

Law 1: Reduce
The Simplest way to achieve simplicity is through thoughtful reduction

Law 2: Organize
Organization makes a system of many appear fewer

Law 3: Time
Savings in time feel like simplicity

Law 4: Learn
Knowledge makes everything simpler

Law 5: Differences
Simplicity and complexity need each other

Law 6: Context
What lies in the periphery of simplicity is definitely not peripheral

Law 7: Emotion
More emotions are better than less

Law 8: Trust
In simplicity we trust

Law 9: Failure
Some things can never be made simple

Law 10: The One
Simplicity is about subtracting the obvious, and adding the meaningful

Related posts:

1. Web 2.0 Design Generators For Developers If you are a busy web developer that also need...

Related posts brought to you by Yet Another Related Posts Plugin.

Then I found 50 Questions to Evaluate the Quality of Your Website by Carsten Cumbrowski from my starred item in google reader. It covers a wide range of areas including accessibility, design, navigation and more.

A sample of questions includes:

• Is content structurally separate from navigational elements?

• Are links labeled with anchor text that provides a clear indication of where they lead?
• Do clickable items stylistically indicate that they are clickable?
• How intuitive is it to navigate? Are signs obvious or obscured? Buttons/Links Like Text, that are not clickable and vice versa, links/buttons that cannot be identified as such
• Clear statement of PURPOSE of the site? Purpose must become clear within a few seconds without reading much or no text copy at all.

• Are the colors used harmonious and logically related?
• The fonts should be easily readable, and degrade gracefully.- Should look OK on various screen resolutions.

• Does the copywriting style suit the website’s purpose and ’speak’ to its target audience?

Although the list isn’t particularly targeting developers / designer, I think it is still a very useful list to reference if you are running your own site. If you can answer YES on most of the questions, you have done a great job. For me there are still a lot of work to do here…

No related posts.

This is what the old design looks like

And it was based on dsanctuary.

I hope everyone will like this new design. Feel free to leave some feedback.

No related posts.

Considering the only way users can communicate with your application is through the interface, interface design then should be one of the most important part of any application. A good interface will enhance the experience, usability, effectiveness or even success of your system.

From the book Designing the User Interface by Ben Shneiderman, he pointed out 8 rules to guide us to good interaction design.

1. Strive for consistency.
Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout.
2 Enable frequent users to use shortcuts.
As the frequency of use increases, so do the user’s desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user.

3 Offer informative feedback.
For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.

4 Design dialog to yield closure.
Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.

5 Offer simple error handling.
As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error.

6 Permit easy reversal of actions.
This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.

7 Support internal locus of control.
Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders.

8 Reduce short-term memory load.
The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.

I think it does not matter whether you are developing for the web or desktop. These rules should always help when making any design decision. But as web applications are becoming more and more interactive and complex, we need to make sure the experience of them are improving and not degrading.

Source from Wikipedia

Related posts:

1. Web 2.0 Design Generators For Developers If you are a busy web developer that also need...
2. 10 Laws of Simplicity Developers should know Recently I revisited "The Law of Simplicity" by John...
3. MySQL Query Performance Tips Almost all of the modern web applications involve the use...

Related posts brought to you by Yet Another Related Posts Plugin.

Buttons

1. As Button Generator - Fully featured button creator allowing you to customize colour, gradation type, stripe, filter, image, and of course text.
2. Buttonator.com - Another Button generator with a big range of different style buttons
3. My Cool Button - Simple and easy to use button generator

AJAX Loading image

1. AJAXload.info - simple generate ajax loading gif
2. AJAX loading Gif generator - another similar service
   

Badges

1. Web 2.0 Badges - very very cool Badges creator with a big selection
2. Fresh Badge - Another Simpler Badge generator

Ribbons

1. QuickRibbon - Online Ribbon Generator with a very well implemented interface
   
2. Website Ribbon Generator - a basic ribbon creator
   

Backgrounds

1. BgPatterns - A well implemented pattern generator with a wide range of pattern.
2. Stripe Generator 2.0 - Generate seamless striped background images

Color Schemes

1. Kuler - A sophisticated Color Scheme generator by Adobe. You can even share and explore with others.
   
2. Color Toy 2.0 - A very simple colour picker

Other Random Tools

1. LogoCreator - just generat simple logo
2. Reflection Maker - A little tool for all your reflection needs!
3. Tab Generator - Create a Tab for you ( You should already know how to do this … )
4. RoundedCornr - A rounded corner generator ( You should already know how to do this too … )
5. 3DPackage Online - Create a 3D-box images online
6. Password Bird - Create passwords that means something to you
7. Bullshitr - A Web 2.0 Bullshit generator is good for a laugh
8. Web 2.0 Name Generator - well the name said it all

I hope this list is useful to you. If you know other cool tools, do leave a commment!

Related posts:

1. 10 Laws of Simplicity Developers should know Recently I revisited "The Law of Simplicity" by John...
2. 8 Golden Rules of Interface Design Considering the only way users can communicate with your...
3. 5 Online Tools to Test the Loading Time of your site As a blogger / developer, it is always fascinating to...

Related posts brought to you by Yet Another Related Posts Plugin.

When it comes to cross browsers vector graphics, there have always been debate about whether to use SVG/VML or Canvas/VML. Even if you made the decision, you still need to know how to implement them.

Now Raphaël is aiming to simplify development with vector graphics across browsers. It provides us with a simple adapter to work with vector graphics using SVG/VML.

Below is an example of the basic:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

If you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël - javascript library

No related posts.

If you think about it, a link that opens up a new window is one of the most simple thing you can do with javascript & HTML. There is no reason for it to be ugly.

This is the old fashion and totally wrong way of doing it:

<a href="javascript:window.open(http://www.popup.com/);">Popup link</a>

Why? The a tag is not linking to a link but instead it is running some javscript. That means the whole meaning of the link is gone.

Here is what an accessible and clean link looks like:

<a href="http://www.popup.com" rel="pop-up">Open a Popup</a>

In this version, there is no inline javascript which is always a good pratice to separate HTML and javascript. It keeps everything simple and clean. The addition of the rel attribute is used to describe the relationship between the current page and the href destination of the anchor.

Now we have this beautiful HTML link. It is time to do some magic with javascript and jQuery.

( function popup() {
	$( document ).ready( function() {
		$("a[rel='pop-up']").click(function () {
      		    var features = "height=700,width=800,scrollTo,resizable=1,scrollbars=1,location=0";
      		    newwindow=window.open(this.href, 'Popup', features);
      		    return false;
 		});
	} );
}() );

This is a very simple javascript using jQuery. Basically, the code is looking for all the links with the rel attribute and assign a onclick event to open the pop-up window. Of course, there are different ways to abstract the above code to make it more flexible. But the idea is to have beautiful pop-up link and have the javascript to do the work later.

Related posts:

1. Charts and Graphs Plotting with JQuery plugins Charts are important in visualising data to give a more...
2. Beautiful Subversion Client for Mac As a developer, version control is an integral part...
3. Simple JQuery Feed Plugin using Google AJAX Feed API Many of you may have already heard about the Google...

Related posts brought to you by Yet Another Related Posts Plugin.

But what interest me the most is the ability to do real-time summary of the most relevant content available on the web based on your interests, your reading patterns, and recommendations from your friends. In other words, you can see straightaway the hottest, latest post from your feeds.

After using it for a couple of weeks, I really enjoyed its clean design and functionality. I found myself using it more to do feed reading than Google Reader. The way Feedly organizes the post are far more natural to scan read a large amount of headlines and lead me to discover more interesting posts than before.

The coolest part of Feedly is that it doesn’t replace your beloved Google Reader. It actually integrate very well with it. All your read or star items are always synced that means you can use both to suite your needs.

So go ahead and give it a go at http://www.feedly.com/

Related posts:

1. Evaluate the Quality of Your Website Since I just updated the design of the site, I...
2. Simple JQuery Feed Plugin using Google AJAX Feed API Many of you may have already heard about the Google...

Related posts brought to you by Yet Another Related Posts Plugin.

I have recently came across this interesting and useful Javascript tool called JSLint. You feed in your javascript code and JSLint will scan through and looks for problems in your code.

You might ask what is the different between this and debugging using Firebug? Well, although it is only a syntax checker and validator, it is much more stricter and follows proper Code Conventions. In other word, it will tell you errors you normally won’t get.

As you know, Javascript sometimes allows code to be implemented in a sloppy way which could be very troublesome for large complex projects. So I have been using this tool as a reference point to tighten up my javascript code.

So go and paste your code at JSLint and see how your code is doing. But I must warning you, it might hurt your feeling!

Source: JSLint

Related posts:

1. NitobiBug - Javascript Debugging Script NitobiBug is a Javascript debugging script that once embedded,...
2. Attractive Javascript Logging Console - Blackbird Everyone who programmed in Javascript will know that one...
3. Advanced Data Visualization Tools using Javascript With the advance in computer graphics, the way we...

Related posts brought to you by Yet Another Related Posts Plugin.

Although Firebug is already packed with features, there are always rooms for extras. Since the creation of Firebug, plugins are being developed to extend the power of Firebug even further. Here is a list of useful plugins for Firebug.

Jiffy

Jiffy provides a very detail and visual view of the Javascript time measurements captured by Jiffy-Web. It allows you to get information of AJAX requests and other Javascript functions.

YSlow

YSlow developed by Yahoo! is probably one of most famous Firebug extension out there. It analyzes web page performance and tells you why performance is slow. It gives you information on all the requests, load time, sizes and even give you tips to improve your site speed.

FireCookie

Instead of using other Firefox extensions to view cookies. This Firebug plugin allows developers like you to keep using the firebug interface to debug with cookies. FireCookie gives you the ability to view and manage cookies. It also has a console where you can see when cookies are created, changed or deleted.

FirePHP

For those PHP developers out there, FirePHP is enable you to print to the Firebug Console using simple PHP function call. The main benifit is that all the debugging data are hidden from normal user and you can review in a nicely format within Firebug console.

Updates:

So still want more plugins? You can always build your own. Jan Odvarko of Software is hard has a series of tutorial on creating a Firebug plugin.

Related posts:

1. Charts and Graphs Plotting with JQuery plugins Charts are important in visualising data to give a more...
2. NitobiBug - Javascript Debugging Script NitobiBug is a Javascript debugging script that once embedded,...
3. Attractive Javascript Logging Console - Blackbird Everyone who programmed in Javascript will know that one...

Related posts brought to you by Yet Another Related Posts Plugin.

Ernest Delgado has experimented with Canvas to create a Photo Collages User Interface similar to the Microsoft surface. You can freely drag-n-drop, rotate, resize images and even output it to image file.

You can find try out the demo to see how good it is. Ernest also explained about how it is implemented and the problems he faced in the article. There are also example of it integrated with Flickr and Picasa which is very interesting.

You can download the source code and experiment with yourself.

Related posts:

1. php.js: Porting PHP to Javascript Kevin van Zonnevelhas has started the "Porting PHP to Javascript"...
2. Becoming a better Javascript Programmer using JSLint I have recently came across this interesting and useful...
3. NitobiBug - Javascript Debugging Script NitobiBug is a Javascript debugging script that once embedded,...

Related posts brought to you by Yet Another Related Posts Plugin.