3 reasons why I still love Firebug 2007-08-01

There was a buzz around Firebug a couple of months ago. A lot of developers installed it and enjoy every second they use it. There are some others that missed the train and are still using alerts to debug. If you're from that second category, here's your chance to get back on tracks.

1. The console

Firebug console

The console is a kind of dashboard. It shows what happens client-side : CSS, javascript error, warnings, ajax… all you want to know in just one sight.

If you have an error, just click on it and Firebug will open the source code and highlight it.

Every ajax request is also shown here along with its parameters and the response from the server.

2 . Debugger

Firebug debugger

The debugger is insanely efficient, it offers everything you would expect from a debugger : breakpoints, step-by-step, watch expressions and functions stack. Do you need anything more?

3. Inspector

Firebug inspector Great, there's an alternative to the infamous “View page source and then search through the code” technique. With Firebug, you just click on Inspect and move your cursor over the element that causes the problem and you have it all in one sight : the HTML on left and the CSS style on right. You can manipulate both of them to try to correct the problem and then, it's done.

Conclusion

There's no reason in the world why you shouldn't use Firebug, go and get it at http://getfirebug.com/.


Ask Dan : Friggin’ libraries 2007-06-26

I received two questions about librairies in the Ask Dan a javascript question serie. Don't forget to ask me your questions too by sending a mail at dan@javascriptkata.com.

Effects

Camilou asked

Is it too hard to a poor mortal like me to achieve that fancy effects that some libraries like Prototype do offer? I mean, that drag-and-drop stuff looks pretty complicated to me. Or maybe I am just too noob.

Drag-and-drop is complicated but not that much. Thousands of people have done it before the libraries-era. But, I'd say that if you want to achieve something similar to prototype, you'll probably work for months. Prototype is the most known javascript library and if you start today, there's little chance you will get as far as them. Sorry. But if you have a very different and easier way of doing things, maybe you'll succeed.

Creating a new library

Frank Stepanski asked

If I want to start creating my own JS libraries, how do I start? If you have no better idea than re-implementing what already exists in other libraries, you'll never know where to start. A new library should fill a hole that is not filled by anyone else. So, you'll find where to start the day that you will want to do something and that you won't find any library that does it.

TimmyOnTime

We are still working on TimmyOnTime. TimmyOnTime is a time-management that uses instant messaging so you don't forget to track your time. There are still places available for the alpha period. Please, give us some feedback.


A new project : TimmyOnTime 2007-06-14

Some of you might know that I have worked with Frank Lamontagne of Ruby Fleebie on a project called Ecstatik!. That was the beginning of something.

Now, we are very pleased to announce you our new project : TimmyOnTime.

What is TimmyOnTime?

TimmyOnTime is a IM-based time management tool. To use it, you only need a Jabber client like Google Talk or Gaim (MSN or AIM users don't despair! We also added support for these 2 networks). To have Timmy track the time on your projects, you only have to chat with him via your IM! Let's say for example you want to create the following new project : Achieve hapiness. Well, you just tell Timmy about it and you write : create project achieve hapiness

Timmy will create your project and tell you if everything went OK in the process. Now that you have a project, you might want to create some tasks? Nothing is easier : create task smile more often

At this point, Timmy have started the first session on your new task. To stop the timer, just write : stop

Web access is optional

That's right. One of the important thing for Frank and me was to make optional the web registration process. So, if you don't want to bother about the website, just use your IM and chat with Timmy. However, we're pretty sure you'll want the added features of a web access (project / task renaming, time editing, etc).

It's your chance!

We want to offer to RubyFleebie and JavascriptKata readers the chance to try this brand new application first. Since it is an Alpha release, we decided to limit to 150 the number of users that can access TimmyOnTime. If everything goes smoothly, we will increase that number slowly over time.

During this alpha period, we would appreciate that you give us feedback on the application. Also, if you find bugs, it would be nice that you let us know! ( contact@timmyontime.com )

To get you started : TimmyOnTime


Ajax, javascript and threads : the final truth 2007-06-12

Since I have written Ajax and javascript don’t use thread, one of my reader (BK) told me that I was wrong. Here's the final truth.

What I said

If javascript runs some code that takes 5 seconds to execute and an ajax response arrives at 2 seconds, it will take 3 seconds before it will be executed (before the callback function is called).
Example. We have a f() function that is incredibly long to execute (5 seconds) because it has a lot of code.

  1. function f() is started
  2. f() makes an ajax call
  3. f() is still executing since 2 seconds
  4. the response from the server arrives at the third second
  5. f() is still in execution for 3 seconds
  6. the callback function for ajax is called

    What he said

    Briefly, say I have CallPage1, CallPage2 and DoSomething. Both CallPage are async.

CallPage1 called CallPage2 called DoSomething called CallPage1 Returned (DoSomething is now paused) DoSomething ended CallPage2 Returned The DoSomething() function is paused when the ajax response arrives. The callback for the ajax is called and only then, DoSomething() resumes its execution.

That didn't make sense to me. Javascript is really sequential and it would not do that kind of complex stuff. But, I had to be sure.

The test

I made a simple page to test it all.

  1. Loop from 0 to X (user defined). X should be a big number.
  2. The first loop, it makes an ajax request
  3. The loops will finish someday
  4. The callback for the ajax will be called someday

I didn't know what to expect : will the callback function be called before or after the loop?

The result

I ran the script a lot of times with a lot of numbers and it was always the same thing : the callback function waits for the loop to be over before it is executed. It means that the current function is not paused.

Now it's your turn

I want you to take a look at the script (complete php code) (I know it's poorly written, it's just a test) and tell me if I'm wrong or if I'm right.

Thanks to you all!


Ask Dan : Procedural VS object-oriented in javascript 2007-06-06

Since the beginning of Ask Dan a javascript question, I received a bunch of questions. Here's the first one I received. It's from Andrew Worcester.

There seems (to me anyway) to be an overuse of the “new” syntax in libraries. If I create an Ajax object is there a functional benefit to using: “new Ajax.Request(options)” verses something like “sendAjaxRequest(options)” It seems to me that by using “new” causes more hassle because you need to be sure the objects are properly disposed of. So is there a performance or functional benefit to this technique?
I had a hard time understanding the question (and I was too ass hole to ask…) so I'll rephrase it in another way : is there a benefit from using object-oriented techniques VS procedural in javascript?

Procedural in javascript

Though javascript was not a procedural language from the start, it has been overused as such in the beginning (and it's still is). That may be because people didn't bother learning javascript and they copy/pasted functions from sites that offers low-quality javascript snippet. All they did was “hacking” the poorly written code to suit their needs. This technique worked for a long time but with the use of ajax and DHTML, it's nearly impossible to have clean code that is not buggy and dirty.

Object-oriented in javascript

The new statement necessary implies the use of objects in javascript. You can have basic information about object in How to create objects in object-oriented javascript and in with the articles tagged Object-oriented of this site.

The benefit of object-oriented

There is one major benefit about object-oriented that creates a lot of other benefits : the cleanliness of the code. The other benefits from that are : the code is easier to maintain, to modify, to read and to explain.

OO applied

I'll apply it to an example. I want to alert the sound of cat by ajax.

In a procedural way, you'll approximatively have

// Global variable
ajaxRequest = null;

function sendCatSoundAjaxRequest() { ajaxRequest = new XMLHttpRequest(); // Create the request in the global var // ... code for request ... }

function receiveCatSoundAjaxRequest() { // The sound is in clear text in the response alert(ajaxRequest.responseText); }

The problems? You have a global variable to keep track of the ajax request. Because it could be use by every other functions that need ajax, you can't make more than one request at a time. Also, there are nothing that binds the two methods together apart their names that are look alike. Now, just think of the code when you have 5 or 6 different type of requests. Your code will look like garbage.

In a object-oriented way, you would all write this ugly code in a separated object. Your main call to see the sound of a cat could be something like

var cat = new Cat();
alert(cat.getSound());
The code from above still exists somewhere but the complexity is now hidden behind the Cat class.