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?

Why I didn’t like prototype.js

There was not a lot of javascript written for the project so I thought that getting rid of jQuery and using prototype.js would be easy. It turned out to be hell on earth. Prototype.js made me feel like I was back in the 90s writing C++. A simple click event turns out to be a awful lot of ugly code with ugly function names.

Example, if I wanted to show the content of a DIV I clicked in prototype.js, I would use things like Event.observe, bindAsEventListener, a mix of native DOM element and prototype.js element, and worst of all, an unintelligible documentation.

jQuery as a complete different way of doing it in a single easy-to-understand line :
$(”#a_div”).click(function() { alert($(this).text()); });.
As simple as that!

The problem

I wanted to use some interface element in Rails that requires prototype.js so I had to have both librairies. The problem is that there’s a conflict between them. Prototype.js doesn’t seem to give a damn about it but jQuery is nicer with you. It offers a noConflict method.

With Rails, prototype.js is the default librairie so to override this, you could do

This way, you will have to use $j instead of $ to call jQuery.$ would still call prototype.

Another thing you could do is to use jQuery on Rails and don’t give a damn about scriptaculous. I personally prefer to use librairies that are fully tested instead of using a “by-pass” that could break my code. It’s your choice…

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?

Stuart Cooper recently sent me a mail about threading in javascript and I turn to you, javascripters, to find the a solution for his problem. I sent the code on RefactorMyCode for refactorisation and they will automatically show up in the comments of this post (the site is an idea of Marc-André Cournoyer who is a very active developer from Montreal). Don’t be afraid to think outside the box. The solution may be completly different from what is already written.

function startup(){

setInterval(”pinger(’live’,0)”,10000);
setInterval(”pinger(’standby’,1)”,10000);
setInterval(”pinger(’dev’,2)”,10000);
setInterval(”pinger(’test1′,3)”,10000);
setInterval(”pinger(’test2′,4)”,10000);
setInterval(”pinger(’test3′,5)”,10000);
setInterval(”pinger(’test4′,6)”,10000);

}

function pinger(server,divit){

console=document.getElementById(’ping_div’ + divit);
console.innerHTML=”;
sendRequest(”../php/ping_sys2.php?target=” + server);

}

[/snippet]

(each server has its own named div to return to)

What I am seeing when I run this is the final pinger response from the callback and nothing else. I since added debugging into my XMLHttpRequest code so that it split out the server response progress.

[snippet]

readyXML=xmlReq.readyState;

[/snippet]

[snippet]

if(readyXML == 3){

data=”Serving …”;

}

if(readyXML == 2){

data=”Sent …”;

}

if(readyXML == 1){

data=”Opening …”;

}

[/snippet]

What I have observed is that when running the setInterval commands as above, all except the final request are “jammed” on readyState = 1 and appropriately responds with “Sending …”

however,

when I do the following (which is messy)

[snippet]

function startup(){

setInterval(”pinger(’live’,0)”,1000);
alert(”something”);
setInterval(”pinger(’standby’,1)”,10000);
alert(”something”);
setInterval(”pinger(’dev’,2)”,10000);
alert(”something”);
setInterval(”pinger(’test1′,3)”,10000);
alert(”something”);
setInterval(”pinger(’test2′,4)”,10000);
alert(”something”);
setInterval(”pinger(’test3′,5)”,10000);
alert(”something”);
setInterval(”pinger(’test4′,6)”,10000);

}

[/snippet]

Each response is absolutely spot on and will continue to generate pings correctly. So in this case the script alert interrupts are forcing the callback request to trigger, whereas without the alerts its only the last request that triggers a callback. I have also tried using artificial timeout loops instead of alerts (which generate the odd browser “script running slowly” message) but to no avail.

At the moment I am almost resigned to having to create individual events (like rollovers, though I would much prefer the ping initialisation to occur window.onLoad()) that trigger the setInterval() … which also seems to work fine.

I am hoping that you may have come across a way of forcing the XMLHttpRequest to respond without forcing alerts or confirms on the user, in the time since the last update to the article.

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!

What happens with Javascript Kata?

I know, I have been negligent with site. It’s really shameful to let a great site die and there’s no one to blame but me. Why I did that? I could give hundreds of reasons but they would all be lies. I really don’t know what happened.

I want to give another twist to JavascriptKata. I want to get back to a more tradional reference site because I don’t like the concept of a technical blog after all. I want the articles to be more persistent, not just a post that everyone forget about after a while.

But, there would be a RSS feed too. I would announce new articles on the site. I would also use it to debate on tricky things about javascript and then make an article out of it.

I really would like to hear you about this idea, please comment!

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.

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

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!