Think 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.Keeping Javascript clean
Think 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.List incoming links with Smugpanel
Want to show off your high Google ranking? Show the world who links to you with Chris Heilmann's Smugpanel. This lightweight tool displays a list of incoming links on your site, and features some cool dynamic behavior that "shuffles" the list when you click a link.
Smugpanel utilizes the Yahoo Site Explorer Inbound Links API, so you'll need to register a Yahoo application ID in order to use it. Other than that, it's just a matter of dropping the code on your server, and you're ready to exercise your bragging rights.
Smugpanel utilizes the Yahoo Site Explorer Inbound Links API, so you'll need to register a Yahoo application ID in order to use it. Other than that, it's just a matter of dropping the code on your server, and you're ready to exercise your bragging rights.
Smooth color picker using Javascript
Who 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
We 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
Everybody 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.Firefox 2 beta supports Javascript 1.7
Mozilla has released Firefox beta 2 for testing purposes only. Among its many new features is support for Javascript 1.7, making it the first browser to support the latest Javascript features. One of the most notable components of Javascript 1.7 is the iterator object, which allows for iteration over data.If you've installed the new Firefox beta, feel free to share your impressions here!
The Ajax Experience: Call for presenters
Ajaxian is soliciting presenters for the fall 2006 Ajax Experience conference in Boston. Applications will be accepted and reviewed until September 1, 2006, but those received by August 4th will be given the highest priority. If you're selected as a presenter, Ajaxian will cover your airfare and lodging. Suggested topics include:
- User Experience / User Interface design
- JavaScript
- Frameworks: JavaScript, .NET, PHP, Java, Ruby, etc.
- Case Studies / Practical advice learned from developing real Ajax applications
Drag 'n drop folder tree
Too 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
Analytic 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
Litebox 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. Google Ajax Search Beta
Google has created a new search API that allows you to add an Ajax version of Google search to your web site. This way, instead of driving users onto a separate page when they search, users remain on your site while searching. The API is currently available as a beta (version 0.1) and Google is soliciting feedback from developers. Test the Ajax-ified search at Google Code, and then sign up for an API key.FlyakiteOSX: Mac OS X, via Ajax
Are you ready for some craziness? Take a look at the web site for FlyakiteOSX, a neat tool that makes Windows look more like OS X. That's not the craziness I'm referring to, though - after all, customizing your desktop is so last century. I'm referring to FlyakiteOSX's web site itself, which essentially recreates an OS X desktop in a browser window, thanks to some serious Ajax kung-fu. It's by far the coolest, most mesmerizing site I've seen in a long time - not to mention a little creepy. Take a look; you have to see it to believe it.Pagination hack for Blogger
For anyone out there who uses Blogger, check out this Javascript hack that provides a flexible pagination solution - a feature that's not currently built into the Blogger code. The lightweight Javascript has been proven to work in IE, Firefox, Safari, Opera, and Netscape (which means it should work in pretty much anything else you can imagine, as well). The HTML for the pagination is semantic (an unordered list, to be exact) and easy to customize with CSS.
badgr: Flickr-esque photo navigation
If you like Flickr's navigation, now you can have it anywhere. badgr blends the magic of PHP, old-school Javascript, and CSS to create a dynamic photo navigation badge a la Flickr. Simply provide a link to a directory of images, assign class="badgr" to the anchor, and voila! You've got your dynamic photo gallery with previous and next arrows. It's sort of mind-boggling in its simplicity.Update: Good call, Commenter Matt. I've added a relevant image.
Speed up your Javascript
Vitamin has a good article about how to optimize your Javascript for speed and efficiency, as old techniques won't fly in a "Web 2.0" world. Cal Henderson's best practices include compression, caching, and letting PHP or other server-side technologies do some of the work.
The article is sort of long, but it's a good read, complete with code examples so you can actually see what he's talking about. There is also a good discussion going on in the comments, with people questioning some of the techniques and adding their own.
The article is sort of long, but it's a good read, complete with code examples so you can actually see what he's talking about. There is also a good discussion going on in the comments, with people questioning some of the techniques and adding their own.
< Previous Page | Next Page >
