jQuery: What to do when replaceWith() doesn’t work

Nothing’s perfect in this world and jQuery is not the exception to prove the rule. Sometimes the replaceWith() function doesn’t seem to work, no matter what you do. It looks like the function does nothing, and that’s a problem. But don’t bother; this will do the trick:

instead of

$('#someElement').replaceWith('something');

use this:

$('#someElement').empty().append('something');

Is phoning-your-wallet easier than tapping your mobile?

This morning I stumbled upon yet another expense tracker start-up, named ExpenseTracker (!), that tries to differentiate by letting users enter expenses through voice, by calling a number and entering the expense’s details. Other features are advertised as well, such as spending plans tailored by economy experts etc, but the main theme is entering data through voice.

Visiting their site, the first impression you get is that you hit a telemarketing channel. A well-suited man (whose blonde hair looks far from natural) starts to tell you that usually all the budget trackers “rely on you going home [...] and spending hours entering receipts into the right categories [...]. Come on, let’s be real; this is not gonna happen”. The ad goes on even showing a woman calling through her mobile and entering an expense.

First of all, the aesthetics of the website and the telemarketing attitude (check out their moto “You’ll Find Money, Guaranteed!“) won’t convince me that I should trust these people with my financial details. Second, there’s yet another point that makes this whole calling-my-wallet theme pointless: I would rather enter that data into an app running on my mobile phone. There are a few (quite feature-limited) expense tracker apps for the iPhone which can come in handy, and I think it’s far easier to tap a couple of buttons to quickly record your expense, than calling a speech recognition system, not to mention a lot faster.

I am not aware of any such apps for other mobile platforms but I bet we’ll see plenty of them since more and more mobile platforms are about to introduce their own version of Apple’s App Store. Backed up with a powerful web app to sync data with, the stack would be quite useful. But I haven’t seen yet one expense tracking web app that actually displays any insightful realization of my expenses other than plain graphs. If you know any, let me know in the comments.

Meanwhile, other start-ups are trying to assist users in other ways, like shoeboxed, for example that wants you to mail them (snail mail, not e-mail) all your receipts so they scan them and categorize them for you. Thanks, but I’d rather keep my receipts in my office. Unless there’s an app on my phone that snaps a photo of my receipts, auto-magically recognizes the data as well as the kind of expense and records it for me, computes trends and estimates and displays valuable information about my spending and saving habits - until then I’ll stick to the old model of hand-entering the details.

What is the most popular “here”-linked website in the whole Internet?

The here-link-curse

There is a bad habit that’s, unluckily, still quite common, and that is a specific (wrong) way of people using hyperlinks. I’m sure you all have stumbled upon a website using links in this way (and many of you are doing it without ever wondering why it’s wrong). It’s the glorious links of “here”. There are countless uses for the word “here” in hyperlinks, for example:

• Here is the relevant story
• You can download the paper here
• Here is the observation paper and here is the results paper

And the list goes on and on. What’s wrong in all these “here” links is that the authors are linking the wrong words. A hyperlink is supposed to link something (e.g. a word, a sentence, a picture) to something else (usually a web page). So, for example, instead of forming a link as in

You can download the program here

it should be formed as

Download the program

so that the semantics of the link are properly used.

The Google effect

Now, this article is not a lesson on how to use hyperlinks, or a petition to let the whole world know that the here-link-curse should stop. If the mentioned example enlightened you into forming your hyperlinks more effectively, that’s fine, our world counts one less here-link web author. The driving force for writting this article was the question that formed in my head while reading an article with a here-link: where does “here” link to, for Google?

Google, as you may know, is using an algorithm called PageRank to index the World Wide Web. PageRank uses hyperlinks in all indexed pages around the Internet and after some delicate mathematical computations, comes up with the relevance of a word, or phrase, to a website. The more a specific word, or phrase, is linked to a specific website, the higher it gets in the results when queried with this phrase.

For example, if there were thousands of web pages linking the phrase “blueberry tree” to my weblog, then if you googled the term “blueberry tree” you’d most probably get my weblog first in the search results. That’s a core part of Search Engine Optimization, and is also used in Google Bombing.

The “here” winner

So, back to our question: what are the most here-linked, or “pointed to” websites in the Internet? To come up with the answer, one should just google the word “here”. Are you curious (like I was) to see who comes first in the search result? Here (heh) it is:

Adobe - Adobe Reader Download - All versions

Yes, Adobe Acrobat Reader download page is the #1 result for googling the word “here”! This means that the most common here-link is something like “Download Acrobat Reader here“. Second to the list comes MapQuest.Com: Maps, Directions and More and third is Apple’s Quicktime page (where here-linking authors are pointing their users to download Quicktime).

The list goes on and includes Rhapsody & RealPlayer, IE 7, a Universal Currency Converter, Java etc.

The same “effect” can be seen with other search engines as well, even though they do not yield the same results. Yahoo, for example, displays Adobe Reader download at rank 11, while displaying at it’s #1 rank some website www.heretv.com.

jQuery: Simulating a delay function between fade in/out effects

jQuery is a very popular JavaScript library among web developers, gaining more and more fans as it evolves. It’s fast, lightweight and does many things while being unobtrusive, meaning that no code has to be incorporated in an (X)HTML document’s body. This way, the designer can write the code, and then go to the document’s head and add a few lines of code to do some fancy stuff with the document. Between the several built-in effects are the popular fade-in and fade-out effects that, due to the chainablity of jQuery can be used sequentially, for a fade-in-then-fade-out effect.

Chainability, is the ability to “chain” different methods on an object, like this:

Chainability in all its glory

$("#foo").show().hide();

which will just show and then hide the element with the id “foo”.

Fade-in-fade-out

Using the concept of chainability, we can achieve a fade-in-fade-out effect easily:

A simple fade-in-fade-out

$(document).ready(function() {
	$("#foo").fadeIn(2000).fadeOut(2000);
});

The above fragment of codefades in the #foo element with a duration of 2 seconds (2000 milliseconds — the argument is in ms), then it fades out the element. The duration of the fade-out effect is another 2 seconds. But what happens if we wanted to have a delay, between the fading-in and fading-out of the element? Say, for example, that we want to fade in the element, then keep it that way for 5 seconds, and then fade it out again.

Intuitively, the “I-dont-read-documentation-but-guess-my-way-around” kind of developer would try to chain a delay effect, like this:

We wish we could do this…

$(document).ready(function() {
	$("#foo").fadeIn(2000).delay(5000).fadeOut(2000);
});

However, this won’t work, simply because there’s not a delay() function. The outcome would be for the element to fade in, and then do just nothing, since the script encounters a function that is non-existent and just stops there. So how can we achieve that?

The trick

Let’s think of what happens during the fadeIn() function: the JavaScript alters the opacity property of an element, from zero to 1, which corresponds to a transition between 0% and 100% of opacity. The fadeOut() function does the reverse: changes the opacity property gradually from 1 to zero. There’s a third function named fadeTo(), which fades the given element to a specific opacity that is passed to it as an argument. For example, the following line of code would make the #foo element go from total invisibility to 50% opacity (the effect will last 3 seconds):

Fade from completely opaque to 50% visible

$("#foo").fadeTo(3000, 0.5);

The trick is to simulate the delay by applying a fade-in (or fade-out) effect that does not change the opacity of an element, but rather spends it’s time doing nothing. The concept is as follows:

1. Fade-in the element from 0 opacity to 1, for 2 seconds
2. Fade-in the element again from 1 opacity to 1, for 5 seconds
3. Fade-out the element from 1 opacity to 0, for 2 seconds

This way, we just insert a transition that last 5 seconds but does not change the opacity of the element, since the target opacity has the same value as in the current condition. The code would just be as simple as this:

The trick is to use the fadeTo() effect!

$(document).ready(function() {
	$("#foo").fadeIn(2000).fadeTo(5000, 1).fadeOut(2000);
});

As Karl Swedberg correctly stated in a comment below, the same effect can be achieved by using the animate() effect, i.e.: .animate({opacity: 1.0}, 3000)

Delaying an effect before it begins

Now, let’s alter the desired effect a little bit. Let’s say that, our foo element is rather shy; it doesn’t want to appear just as the page loads, but would rather give the reader some time to settle in, before it intrudes in the page. A few seconds would be enough for our element to feel comfortably, so we want to give it 3 seconds time until it appears. How do we do this? Intuitively we would expect something like the following code to work:

(This is not the right way to code what we want)

$(document).ready(function() {
	$("#foo").fadeTo(3000, 0).fadeIn(2000)
	.fadeTo(5000, 1).fadeOut(2000);
});

Previewing this in our browser, we see that it’s not what we expected. Foo shows momentarily, then disappears, waits, and then begin to fade in. But why did foo make a quick appearance and then disappear, before it does it’s part? Maybe it wanted to peek and see who the viewer is, but I bet there’s a better explanation, and there is one: the original opacity of it was 1, so fading to 0 creates a transition (a short one) to the target opacity.

[Edit: The following part of this section of the document has been updated to add support for internet Explorer 7]

Here’s a way to achieve this effect. This method has been tested in Safari and Firefox 2 for the Mac, as well as Firefox 2 and IE 7 for Windows. The trick here is to initially hide the element, not by altering it’s opacity, but rather by taking it out of the document flow. This can be done the same way designers choose to hide accessibility text, by creating a class like the following:

Create a .hidden class

.hidden {
	position: absolute;
	top: -10000px;
}

Then all we have to do is this: apply the class to our element, create a fadeTo transition that takes the desired time, remove the class from the element then go on with our normal effects. To make a long story short, in order to have all the aforementioned browsers support this, we must keep in mind two things:

1. Use fadeTo() effects to substitute fadeIn() and fadeOut() effects (e.g. fadeTo(”normal”, 1) is the same as fadeIn(”normal”) )
2. Use the remove class attribute as the delaying transition’s callback function

In a nutshell, if we want to have an element delay 3 seconds, fade in, wait another 3 seconds and then fade out, here’s the proper code:

The right way to do it

$("#foo").addClass("hidden").fadeTo(3000, 0, function() {
	$(this).removeClass("hidden")
}).fadeTo("slow", 1).fadeTo(3000, 1).fadeTo("slow", 0);

Now, if anyone’s kind enough to try this with Internet Explorer 6 or below, plase let us know by leaving a comment.

You can see a real world live example of this behaviour in a simple intro page (that has inspired me to write this article). Three seconds after the page loads, an image containing some text appears above the graphic, waits for 2 secs and fades out.

CodeIgniter: A simple solution to the SAFE_MODE mail problem

The problem

Enhancing an existing web app built with CodeIgniter (or Code Igniter, or CI for short), I wanted to add an automatic e-mail message functionality. This way, when the contact form is submitted, except for the inquiry being presented in the administrative backend, an e-mail would be sent to the site’s owner address to notify them that someone wants to contact them.

Reading the CI manual, I was fascinated to see how easy this is to implement. I injected a few lines of code in my controller and tested it locally. Voila, it worked! And I didn’t have to configure anything. This was awesome, but let’s try it at the server too, shall we?

The production server, utilizing a shared hosting environment in a VPS, was expected to be more strict in such matters, and it turned out it was. The same set of code returned the following error:

Message: mail(): SAFE MODE Restriction in effect. The fifth parameter is disabled in SAFE MODE.

Obviously, PHP’s safe mode is on, and this seems to be troubling the mail code. But turning safe mode off, in order for this to work, is not a good idea. Even if it’s not turned off for the whole server but just for this site, still that would somehow weaken the security of the website. So an alternate solution had to be found: a way to make CI work with safe mode.

The solution

After googling about this problem with no results, I was lucky to find out the solution is really simple. It turns out that CI code has already predicted this, and all you have to do is to tell it that safe mode is on. That can be done quite easily, by changing the following line in the system/application/libraries/Email.php file:

bq. var $_safe_mode = FALSE;

should be changed to

bq. var $_safe_mode = TRUE;

That’s it! You can now send mail from within a controller with no problem. (Don’t you wish though, that this was documented?)