Announcing YUDOmagic, a new site where you can watch, upload and share magic videos. You can watch all the magic performances for free, and you can get access to watch tutorial videos and learn how to do the magic tricks yourself just by sharing a magic video of your own. There is also a free magic forum so you can discuss magic and magic performances with fellow magicians and magic aficionados.

This was one of the first sites I built using Ruby on Rails, the one I alluded to when talking about Switching from PHP to Ruby on Rails and Vanilla on Rails: The Coexistence of PHP and Ruby.

If you're interested in magic, or if you just want to see what I've been up to, go check out YUDOmagic and have some fun.

JavaScript-only interfaces often have some links that activate some kind of click handler but don't actually go to another page. These are called JavaScript-only links, and there are a bunch of different ways to make them, listed here from crappiest to best:

• <a href="#" onclick="myFunc();return false">

  This method is really common, and not that great. If you are scrolled down the page, and forget to include the return false, the page will jump up to the top. Also, the user will see "#" in the status bar (not a real problem, but kind of messy). The link requires JavaScript to work. It's basically one big workaround for making some text clickable.

• <a href="javascript:myFunc()">

  This method gets a lot of slack, but I think it's slightly better than using href="#". True, it's a totally invalid href attribute, and it's pure luck that browsers actually support the javascript: protocol. But it works (if you have JavaScript enabled). And it has a slight benefit (or downside?) that users actually see the name of the function in the status bar, giving them a clue as to what is going on. You also don't need to worry about returning false from the click function.

• <a href="#myFunc" onclick="myFunc()">

  Very similar to using href="#", this method actually changes the URL to something slightly meaningful. This method can be useful if it changes the page in a repeatable way (displaying a specific tab or hidden area). This way you can add JavaScript that looks in the URL, sees the #myFunc, and recreates that change when the user refreshes the page. If you're tricky, you can even get the back and forward buttons to work. The downside: if the user has scrolled down, the page will scroll back to the top.

• <span onclick="myFunc()" style="text-decoration:underline; color:#00f; cursor:pointer">

  This is my favourite obtrusive method. If you're going to make a JavaScript-only link, why use a link at all? Anything can be clickable in JavaScript, and using CSS you can make a span look exactly like a link (even the mouse cursor). Downside: this method is still obtrusive, requiring JavaScript, but at least it's honest about it.

• <a href="alternate.html" onclick="myFunc();return false">

  This is a highly superior method to the others. If JavaScript is disabled, the link still works, and ideally goes somewhere that does the same stuff that the JavaScript function would do.

Disclaimer: I don't recommend using the onclick or style attributes on a regular basis. I also don't recommend making JavaScript-only interfaces ever (unless you have to, and you rarely have to). For more on how not to do all this bad stuff, check out my presentation on Unobtrusive Ajax.

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.