Stop looking! Here’s the answer.

You probably just forgot a comma (,) at the end of a hash. Here’s an example :

You see the extra comma at the string “Jeeves”? This what causes the problem. Firefox handles an extra comma nicely but Internet explorer doesn’t. To correct the error, just write :

JSLint to the rescue

Programmieraffe told me about JSLint. You paste your javascript code and it verifies it for you. Not only for extra-commas but everything else.

I want to talk about a different kind of calendar. The really hard one to write : calendars for displaying events in jquery.

The pretty jquery-week-calendar

Written by Rob Monie, this is the first one I tried. I was amazed about how easy it was to integrate with the current development of Timmy (you can see an early beta when you’re logged here). You can take a look at the demo. Unfortunately, I had unexplicable bugs and I didn’t take the time to understand them. Please, don’t do like me and participate to the code on GitHub.

• Looks good
• Easy to integrate
• May be buggy when drag-dropping/resizing

The robust fullcalendar

We switched to this calendar, written by Adam Shaw, because it had three different views (month, week, day) and because we had some problem with the other calendar. It doesn’t look as good as the week-calendar (demo). You can also participate on GitHub.

• The default look is OK
• Harder to work with
• Display may seem slow (on firefox)
• More robust than week-calendar

Finally

These guys have made a great job doing something really hard. Just think about two overlapping events or when an event is two minutes long or hundreds of special cases that could happen. Kudos to them for giving their time and talent to us.

A word about git

Our team (me and Frank, the RubyFleebie guy) worked with SVN for a couple of years until Git stole the spotlight. For a couple of months, we worked with it and enjoyed it. Until we had to do “more advanced” things (branching, merging which is pretty basic to my sense) and things got incredibly hard. We switched to Mercurial a couple weeks ago which feels more like the perfect mix between SVN and Git. So if, like us, you feel puzzled by Git, give Mercurial a chance.

First, you loop with an index and assign the element to a variable.

You always have to have that extra assignment at the beginning of the loop.

Second, you loop with a for each.

In javascript, the for each loops though the index of the array instead of looping though the elements, like in most other languages. Thus, you also have to make the extra assignment at the beginning of the loop.

The easiest way of doing it is the third one.

How does it work? First it uses multi-assignment on one line. In javascript, you could write var i = 0, j = 1; and it would create two variables, i and j.

The second part of the for is confusing : it assigns the item but it never check if i it is out of bounds of the array (using i < items.length). It works because when javascript tries to assign an item after the end of the array (in our case items[3]), it returns null which is considered by javascript as false.

Your old buddy body.onload()

The safest way to execute javascript when a page loads is to use the body.onLoad method.

The document.ready function with jquery

This technique requires jquery and is similar to the body.onLoad technique (see above).

The problem is that I don’t like that the javascript code is too close to the HTML code. There’s really something that I don’t like.

The #ID.ready

DO NOT USE! It doesn’t work. At first, I tought that this technique worked but in fact, even if the element corresponding to the ID doesn’t exists, the function is called. To understand it better, I’ll give you an example. Suppose that I want to load a user list with ajax after the page load and that list correspond to ul#users, I’d write the following code

Unfortunately, it doesn’t work.

The document.ready + #ID.each

After the failure of the #ID.ready technique (see above), I tried a similar thing that is working but ugly looking. Suppose I want to do the same as above, I’d write this :

That way, it would execute the loadUsersWithAjax() method for each ul#users and because element IDs are unique to a page, the method would be called only once. It looks bad but it’s the “prettiest” way I found of executing javascript code on page load.

Now, I want to know what would you suggest? Which technique is your?

JavascriptKata was created in the blog bubble. In a time when all you had to do was to create a blog, put ads on it and you were rich. It never was true. The ads on this blog gave me about 100$ in a year so I finally felt discouraged and left it for dead. Nevertheless, this blog as a good share of traffic and more subscribers in the feed than any blog that I’ve owned/I own/will own. In fact, I call it a blog but it’s not really a blog. I used wordpress and that’s the main reason why I’m calling it a blog.

I tried several things to keep my interest in writing about javascript but they all failed because there was the devil saying “anyways, you don’t make any money out of it”. But there was the angel saying “maybe you don’t make money but you like javascript and should continue to write about it”. As usual, the devil won.

I won’t try to make another revival of this blog but I’ll try to write more about little things that happens between me and javascript, about the daily problems that I encounter. I’ll write a lot about jquery too since for me, there can be no javascript without jquery.

Thanks to all of you!

I am ok with HTML but awfully new to JavaScript and I know very little at this point. My question is for this web site I’m building. I need to know the exact JavaScript code and placement of the code in an HTML document for this goal. I would like this site to automatically load a certain page (1-31) depending on what day of the month it is (1-31). I don’t need to worry about what month or year it is, just the date in the month. For instance when it is the eleventh day in the month, page11.html will automatically load when you click on to the site. I would like it to take the time(Date) from the client side not the server. This way no mater what time zone your in the right HTML page will pop up at midnight.

Most people can’t give the exact javascript code placement of the code in an HTML document because it would always be buggy. They can give hints and/or snippets of code but rarely a complete working piece. Sorry…

Secondly, relying on javascript to do all this work would be a mistake because if javascript is disabled, the site will not work. Most users have javascript enabled but you should always think about web-crawlers (google, yahoo!, etc) that will try to index your page but will hit an empty page.

It’s always hard to guess all the reasons why someone would want a different page everyday of the month and I don’t know more about the project than what is written above. Considering this, maybe there are just parts of the page that are changing everyday and you could load them on the server-side thus having a single page loading including other pages depending on the day. The problem is that you would have to ask the timezone of the user and keep it in a cookie.

Just remember, javascript should not be a requirement to navigate in a site.

Finally, if I would really want to load a complete new page in javascript, I would do the following.

This is the way I would do it, do you have any other suggestions?

You can subscribe to the RSS feed with all the articles or to the RSS feed without the articles from the echo chamber.

Some may have noticed that I redesigned the site. The old design was long overdue and it was a pleasure for my eyes to have a new one.

I would also like to have your feedback on what you think of the new echo chamber and design?

What is it?

I hate PHP helps you to evacuate your daily frustrations against the PHP language via Twitter. It’s simple. You must tell your twitter username to I hate PHP (on the website) and then, send a direct message to the ihatephp twitter user in the following format : d ihatephp a thing that frustrates you in PHP.

Why against PHP?

I could have done it against a lot of languages because they all suck in their own special way. But the moment I was thinking about the project, I was working with PHP and I just kept sending IM messages to Frank (of Ruby Fleebie) to tell him about things that frustrated me in PHP. I just made it more “official” and now I tell it to the world via I hate PHP.

Subscribe to the RSS of I hate PHP!

1. The 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

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

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/.

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.