Archive for 2008

Flipbook Movies with jQuery

Flipbook plugin for jQuery

Flipbook is a jQuery plugin that produces a movie effect by running images in quick succession. The concept is similar to something I always did in middle school: doodling in the margins of my notebooks to make short movies. Times have changed and nowadays I use a Javascript object, pulling the images dynamically with jQuery’s AJAX function and a PHP script ;) . But don’t worry, it’s just as easy to use as a real flipbook.

The jQuery Flipbook Plugin is built around my jQuery slideshow tutorial. It’s very flexible, providing great options for both new and seasoned developers alike. You can easily make anything from a short film to an image slideshow to a text viewer.


Translate-It: Easy Translation for Multiple Languages

Translate-It translation plugin

Translate-It is a free tool that makes multi-language translation easy to implement on any website. With just a few lines of Javascript you can quickly include up to 34 languages of internationalization on your site.

Download Translate-It.

The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like Google Translate and Yahoo’s Babelfish have made the web more accessible. While accessing these translation tools is often too cumbersome for your site’s visitors, leveraging these tools is relatively simple for developers.

(more…)


QuickFlip jQuery Plugin

Quickflip Plugin for jQuery

QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it‚Äôs not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over (more…)


normalurl.com: Free URL Redirection

normalurl.com: Free URL Redirection

There’s nothing worse than those long, ugly URLs with twenty variables in the query string. In recent years there have been a number of websites offering a free service where users can create shorter links to these complex URLs. While a short URL is great, the links provided by most of these sites are computer generated and impossible to remember.

This weekend I programmed a simple tool to allow users to create their own links and normalize ugly URLs called normalurl.com. Just like other URL rewriting services, this website is completely free and allows anonymous users to easily create new URL redirects. However this … (more…)


Handy CSS Cleanup Tool

Dust-Me Selectors

Inevitably, when finishing development of a front-end, I find myself going through the painstaking process of cleaning up extraneous CSS styles. This style was for debugging, this block was for a page that got nixed, this piece I used when conceptualizing the site another way: I don’t think it’s possible to develop a website without removing some styles at the end. Dreading another round of CSS cleanup, I considered programming a tool to spider a site and tell me which parts of the stylesheets were used. It seemed a daunting task so I checked online, and sure enough, someone had already developed it, and far better than I could have. The tool I found, Dust-Me Selectors, is a Firefox extension that makes cleaning up CSS a snap. It can spider an entire site or a group of pages to determine which CSS blocks are unused … Read more…


jQuery Video Game Remake: T&C Surf

T&C Surf Designs

When I was seven, my all-time favorite video game was T&C Surf Designs for the 8-bit Nintendo® (NES). Feeling nostalgic this weekend, I developed a version of this old school game using jQuery and Javascript.

Up and Down to move, Left and Right to skate faster or slower, Spacebar to jump

After playing Javascript Mario Kart, I’ve been wanting to develop a classic video game with jQuery. T&C seemed like a good fit because its motion and overall simplicity are ideal for jQuery’s animation library (and it’s really fun).

I’m fairly pleased with the performance, which is vastly improved through the use of cell-based collision detection. Instead of having to check for collision every pixel, it can be checked every 32, with huge processing savings. Additionally, the use of CSS sprites greatly reduces the number of HTTP requests and the need to use … Read more…


A Simple jQuery Slideshow

Simple jQuery Slideshow Tutorial

In the interest of following jQuery’s motto of “writing less and doing more,” let’s write a simple slideshow using jQuery, JavaScript and a bit of CSS.

For starters, our main goal should be keeping the markup as clean as possible: <div id=”slideshow”> <img src=”img/img1.jpg” alt=”" class=”active” /> <img src=”img/img2.jpg” alt=”" /> <img src=”img/img3.jpg” alt=”" /> </div> Now let’s use CSS to position the images on top of each other and bring the active image to the images on top of each other and bring the active image to the top level with z-index:


5 Performance Tuning Tricks for jQuery

5 Performance Tuning Tricks for jQuery

In a recent post, I wrote that developers should better optimize their JavaScript. Well, that’s easier said than done, so I’d like to get down to the nitty-gritty and talk specifically about optimizing jQuery. Please note that this is not about performance tuning of the jQuery library, rather it is about better engineering the code we use to interact with it. If you’re not a jQuery programmer, and you have no interest in joining the fad, don’t worry—most of the concepts here apply to JavaScript and general programming as well.

1. Beware of class-only selectors

A great part about using a JavaScript library like jQuery is its selectors. But before you use them all over the place, stop to think: what are the processing costs?

Basically, jQuery defines all the elements on a page as a huge JavaScript object, … Read more…


Too much Javascript? Here comes WebKit and the new Safari

Too much Javascript?  Here comes WebKit and the new Safari

Let it not be said that I never fall victim to a web fad: AJAX, jQuery, SEO‚ÄîI was there with bells on. So when everyone started hating Flash and doing all web animation with HTML/Javascript, I jumped right on board. I thought it was just great! You didn’t have to lose any SEO, and most importantly you never had to open that awful Flash GUI.

But have you noticed? EVERYONE ELSE IS DOING IT! There’s just too much Javascript on the internet these days, and it is bringing many browsers to a halt. My MacBook is less than a year old (2.1GHz, 1GB mem) and Safari has been crashing frequently. In Firefox I can only have three or so tabs open before serious lag1. While I don’t have a super gaming computer, my computer is better than the average user’s, and I … Read more…


Dashalytics: Google Analytics for Mac OSX

Dashalytics: Google Analytics for Mac OSX

If you’re anything like me you open up Google Analytics with your morning coffee, check your email, then reload Analytics, just in case the cache has refreshed. There’s a new version of an OSX dashboard widget, Dashalytics, that will revolutionize the amount of time you can spend obsessing over minute statistics. Dashalytics puts Google Analytics at your fingertips, providing a quick access point to some of the most used Analytics reports, directly from the dashboard in Mac OSX.

How to use Dashalytics

Configuring Dashalytics is simple, just enter your Google Analytics account information; it even supports multiple Analytics accounts through the keychain on OSX. After logging in, you are able to access the three most used tabs: visitors, content, and traffic sources. Within each of these tabs, there are three different reports, but these sub-reports are essentially only the overview of each tab.

Additionally, Dashalytics provides common … Read more…