Gadling's resident pilot explains what life in the cockpit is like

Thickbox 2.0 released

Thickbox 2.0 is the ultimate lightbox spin off. Besides supporting multiple images, with Thickbox 2.0 you can display inline content, iframed content, or content served through AJAX with a hybrid modal. Check out the examples and learn how to add it to your site. Very slick! I wish this was out 4 months ago.

Javascript outside of the browser

When you think of Javascript, you generally think of the web. But Javascript is used in many different places other than cyberspace. So if you are curious about trying out Javascript in a new environment, check out these guides.

Apple / Yahoo widgets both utilize (X)HTML and Javascript for creating simple mini-applications that users can access on their desktop. Both fun and functional.
Sony's popular video editing program, Vegas, has had scripting support since version 4.0. Using a Javascript syntax, developers can add their own functionality to the program to do several repetitive tasks with the click of a button, for example.
Adobe has a host of applications that incorporate scripting support.
Know of any other applications that use Javascript and have good guides for getting started? Post them in the comments.

Javascript speed tests

Javascript Speed TestSean Patrick Kane tested the Javascript performance of the three popular browsers on the Windows side to see how they stack up against one another. You can run his test for yourself with the click of a button. The results are interesting. The slowest was Firefox, most likely due to the many extensions Sean claims his love for. The winner of this informal test was almost 3 times faster than the rest of the pack. You'll have to read the article yourself to find out who it is...


P.S. Post your scores in the comments section. My results looked like this after one run ...

Firefox - 4922 ms
IE - 3642 ms
Firefox (Safe Mode) - 3438 ms
Opera - 1188 ms

Rotating solar system

Rotating solar systemWill Jessup created an interesting rotate script using jQuery. To put the script to good use, he made a solar system model. The script is very responsive to the movement of your mouse and you can look at the planets orbiting the sun from any angle. Here is a link directly to the source code and to see the model in action, click the read link below.

A javascript boot camp tutorial

Javascript Boot Camp TutorialAmy Hoy from Slash7.com gave a 3 hour tutorial on Javascript at O'Reilly OSCON 2006. Because she is such a nice person, Amy has released her 3-meg PDF and source code used in her presentation. These are excellent resources to keep handy when you need to look up a method or object. This is no skimpy wimpy PDF; it's 108 pages! Give it a quick read through because it is rather entertaining (well to me anyways).

Add mouse wheel scrolling to your next web app

Mouse ScrollingUsing Javascript to utilize the scroll wheel a la Google maps is the new "cool guy" thing. I found a site that walks you through the necessary code so you can add it to your next project. What you can use it for besides scrolling in and out is beyond me. Remember, not everyone has a scroll wheel mouse, so use with caution. If you have any great uses for something like this leave a comment. I'm curious as to what other people are imagining...

The unofficial Google paint

Google PaintGoogle has been into office products lately with Google Spreadsheet recently launched and Writely soon to be too. But Google forgot the coolest office app of all -- MS Paint. Now, thanks to a clever Javascripter, a parody is released for our consumption. Mind you this is not an official Google product, but it sure should be. The classic MS Paint interface and functionality have been captured beautifully. Most tools don't work and pop up a confirm box stating "unimplemented. But the tools that do work are a perfect emulation. If only the spray paint can was working...

Add a visual cue where your visitors are going when leaving your site

Link ThumbnailLink Thumbnail is a nifty script that will display a thumbnail of a link they're hovering over. The code is freely available for anyone to use thanks to a creative commons license and an example page can be found here.
Supported browsers include IE 6.0+, Firefox 1.5+, Safari 2.0, and Opera 8.51. Enjoy!

Keeping Javascript clean

Make Javascript CleanThink Vitamin has an article up about keeping your Javascript clean and maintainable. The value of following these 8 steps is invaluable in creating code that is easy to read and logical for whoever has to read it. Sure, some of the tips here are fairly obvious to the hardcore JS coder, but it is good to review. Read through the article and test it against your current practices.

Smooth color picker using Javascript

Color Selector DemoWho says AJAX applications can't look and feel like their desktop counterparts? This javascript color selector is smooth, fluid, and looks like it came straight out of a desktop graphics app. You can drag your mouse around the big color selector box, drag the slider up and down, and your results update instantly. Other attempts like ColourMod have been clunky. I've tested this in both Firefox and IE and it works perfectly.

Using Opera to debug IE javascript errors

Opera logoWe all despise IE and how it makes our lives so much more difficult. Debugging javascript errors in the browser we all love to hate is just as bad. How many times have you gotten the error "object expected"? Great help. Well did you ever think to use Opera's handy debugger to squash those wretched ie bugs? CodeGirl brought this up on her blog when she was testing a new web app she was working on. In short, use the Opera debugger to resolve javascript issues in Internet Explorer.

Create an auto-hide dock with javascript and CSS

Javascript dockEverybody wants to be like OSX, including Michael Whalen of Whalesalad.com. With a little creativity, Michael has created a semi-transparent dock that fades down when you mouse over the header of his website. Inside the dock he has links with darker semi-transparent rollovers. The code is fairly simple and relies on Script.aculo.us (prototype.js and effects.js) for the animations. The hardest part of this project according to Michael was getting the dock to fade away when you mouse out of the header area. To get around this, he used timers and some extra divs. Apparently this only works properly in Firefox, so everyone else beware. It's a good technique but hopefully he can expand it such as adding graphics that zoom-in like Google OSX. Full zip of all needed files included at the bottom of Michael's page.

Drag 'n drop folder tree

Drag and drop foldersToo ancy to read? Check out the demo, otherwise keep reading. dhtmlGoodies.com, an excellent repository for DHTML scripts, has a script up for creating a drag and drop folder tree just like Windows Explorer or Finder on a mac. You can expand and collapse nodes, re-arrange nodes, mark which nodes can have no children or can't move, and even save your changes. All the files you need are included in a handy zip file with detailed instructions on how to set everything up.

ClickTale: Because every user has a story

ClickTaleAnalytic services provide valuable stats to web site owners and can be the only way of determining if a design is really working or not with real users. ClickTale hopes to up the ante by recording user actions so you can see every mouse movement, every click, and every scroll. Then the service lets you, the owner, see exactly what the user did. According to the FAQ on the site, ClickTale uses a small 10kb javascript file to track user activities. The user shouldn't notice a difference as ClickTale is optimized to minimize CPU and bandwidth resources. There is something like this on dontclick.it but that site uses Flash. Currently the site is in a closed beta (which I would love to be a part of) but you can sign up for updates via email.

Litebox - Same functions, lighter load

LiteboxLitebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite.  The best part is backwards compatibility, just drop in the Litebox JS files in place of the original Lightbox JS files and add onload="initLightbox()" into your body tag.  If you are really baggage-paranoid you can remove the comments and keyboard navigation for an even smaller load. 

RESOURCES

RSS NEWSFEEDS

Powered by Blogsmith

Other Weblogs Inc. Network blogs you might be interested in: