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

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

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

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

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.

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…

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!

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/

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

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.

As a developer, version control is an integral part of my development process. As one of many source version control system, Subversion can manage files and directories over time with a central repository hosted on a Subversion server. So team collaboration become a lot more manageable and effective, since all changes are logged and could be easily rollback.

Now Versions is providing us a brand new subversion client for the Mac. It has a very clean and intuitive interface that makes you really want to use it. So if you are not using subversion and want to give it a try, you can use a hosted Subservsion services like beanstalk. Then you can start versioning you code in no time!!!

You can check out the beta software here

With the more and more people developing web applications, the needs to have a professional workflow in the development cycle is essential. However, the work involves to build a workflow system that is easy to use are costly. Especially with small development team that need to deliver quickly and don’t have the resource to delicate someone to look after the whole deployment workflow.

Now Springloops is to target this problem and provide us with a quick and easy solution. They put deployment and source code management into one single easy to use interface. You can manage all logs, source code, users, or even integrate with Basecamp.

Springloops

After using Coda for almost 6 months, I have to say that I did not miss one single feature about Dreamweaver. Most developers nowadays hand craft their sites in CSS and HTML. So a rock solid text editor with an integrated FTP is very important which is what Coda provides.

The editor provides most of standard feature you would expect but packaged in a very beautiful and neat interface. It looks after the designers with a well made CSS editor and Developers with integrated Terminal for SSH access.

With all the powerful features, Coda only cost $79 comparing to $399 for Dreamweaver!

Coda