I've been really busy lately working on one of the coolest projects I've worked on: FlickrCash. It's built entirely using Ajax and JavaScript, specifically jQuery.

FlickrCash searches for photos on Flickr in the most efficient way, so that you can see as many thumbnails as will fit in your browser. It loads up to 10 pages in the background, so it's very fast to browse through to find the photo you need.

It's got some cool features, like a preview that pops up when you click a thumbnail, listing all the sizes that are available for that photo. If you sign up and create an account (for free), you can save your search results, and put together a "shareable lightbox" of photos with a secret URL. This way you can search for some photos and share them with your clients in order to get their feedback. For example, check out my Sunset Lightbox. This makes it really easy to use Flickr to find stock photography, whether for your print projects, blog posts, presentations, or just for fun.

Before I even had a chance to blog about FlickrCash, Lifehacker beat me to it. There's also a Youtube video you can check out that demos all the features I mentioned and more:

You've likely heard about Distributed Computing, or at least some of the well-known projects like SETI@Home that got a lot of publicity in the early days of the Internet.

Distributed Computing has come a long way since then. Currently, there are dozens of projects that use Distributed Computing, and many of them solve some very important problems, like finding a cure for diseases like AIDS and Cancer, solving complex physics and mathematics problems, or trying to understand climate change.

Most projects use the BOINC platform. Rather than choose a single project, you can download a single program, then choose to help as many projects as you are interested in.

Running Distributed Computing software on your computer takes advantage of unused resources (CPU, RAM and disk space) to benefit the world at large. It takes just a few minutes to install and start making a small but significant contribution to humanity.

Sometimes in your content you end up with some really long words or URLs that just won't wrap and end up screwing up the width of your content (especially in IE 6), or just running off the edge of the page.

Some common solutions involve automatically shortening the word or URL to a character limit and putting three dots "..." after it. But what if you want the whole URL or word to be visible?

I think the perfect solution is to have the URL wrap like words in a sentence, but how do you tell the browser to split the URL up?

The answer is to use <wbr/>, the Word Break tag. This gives the browser a spot where it can split the line up. For example:

http://www.thefutureoftheweb.com/<wbr/>blog/2007/1/<wbr/>breaking-long-urls

This example gives the browser two places where it can break the URL and wrap the parts onto different lines:

http://www.thefutureoftheweb.com/
blog/2007/1/
breaking-long-urls

Unfortunately, the <wbr/> tag doesn't work in all browsers, only Firefox and Internet Explorer. Via QuirksMode, Gordon Mohr suggests another solution using CSS which makes <wbr/> work in Opera:

wbr:after { content: "\00200B" }

This adds ​ after the <wbr/>, an entity that achieves the same effect in Opera and Safari.

Unfortunately, neither <wbr/> nor this CSS will work in Safari. You can try putting &#8203 directly into your HTML, but then you'll end up with weird squares in Internet Explorer 6. Don't you love browser compatibilities?

For more info, check out the QuirksMode page I mentioned above.

I received a question this morning from someone asking:

In XHTML 1.1 we cannot use attribute 'target=blank', so what is the solution?

The solution is to use regular links, but to make them open into a new window using JavaScript. To do this, we can add something to the links to flag them as being special, perhaps a class called new-window:

<a href="page.html" class="new-window">Page</a>

Then, use JavaScript to find all the links that have this class name and tell them to open in a new window:

window.onload = function() {
    var links = document.getElementsByTagName('a');
    for (var i=0;i < links.length;i++) {
        if (links[i].className == 'new-window') {
            links[i].onclick = function() {
                window.open(this.href);
                return false;
            };
        }
    }
};

or using jQuery:

$(function(){
    $('a.new-window').click(function(){
        window.open(this.href);
        return false;
    });
});

If you have any other questions like this, feel free to ask me and I'll be happy to answer them here.

Usually, you want to be able to submit a form, like a login or search, just by hitting enter. But sometimes it doesn't work.

Firefox will always let you submit any form by pressing Enter, but Internet Explorer is a little bit picky. I figured out a generalised rule of when it won't work:

This rule has the following interesting consequences:

• If you just have a <button/>, hitting enter won't submit the form.
• Hiding submit buttons by using display:none, positioning them off the page, hiding them inside an overflow:hidden, or any other method will break the enter-to-submit functionality.
• If a form is hidden when the page loads and is displayed using JavaScript, the enter-to-submit will be broken.

It appears that Internet Explorer scans the page at load time and figures out which submit buttons are visible, then attaches the enter-to-submit functionality to those forms.

To fix these scenarios, you can use the following JavaScript:

function addInputSubmitEvent(form, input) {
    input.onkeydown = function(e) {
        e = e || window.event;
        if (e.keyCode == 13) {
            form.submit();
            return false;
        }
    };
}

window.onload = function() {
    var forms = document.getElementsByTagName('form');

    for (var i=0;i < forms.length;i++) {
        var inputs = forms[i].getElementsByTagName('input');

        for (var j=0;j < inputs.length;j++)
            addInputSubmitEvent(forms[i], inputs[j]);
    }
};

(Of course, it's better if you use addDOMLoadEvent instead of window.onload and addEvent instead of onkeydown.)

If you use jQuery, you can just write:

$(function(){
    $('input').keydown(function(e){
        if (e.keyCode == 13) {
            $(this).parents('form').submit();
            return false;
        }
    });
});

The return false is rather important in Internet Explorer, because it prevents that beep that you might hear if you hit return. The beep is saying "you can't hit enter here!", but return false cancels the key press and therefore the browser won't warn.

Update: As Eric Lentz pointed out, my previous code would submit a form when hitting enter in a textarea. I fixed the solution so the onkeydown event is added to <input> elements only.