1. Aarron Walter

  2. Compressed Versions of Popular JavaScript Libraries

    I ran across a very useful collection of compressed versions of popular JavaScript libraries today, including Scriptaculous, and Prototype. The Prototype library compresses down from 70k to 30k, which is pretty impressive. I’m becoming more persuaded daily that MooTools is a better option, though, as it offers you the ability to pick and choose which pieces of the library you wish to download, and offers compression on your custom built package resulting in vastly smaller file sizes than the Scriptaculous/Prototype combo.

    If you want to compress your own JavaScript or CSS, there are a host of utilities out there for just this task. See comments on this blog post for a laundry list of options.

  3. The Ultimate JavaScript Tool Box

    It occurred to me as I while helping some of my students with their Interactive Design projects that it would be really great to have a comprehensive list of the most useful JavaScript libraries and utilities that would make building advanced interfaces a snap. So here are my personal favorites. There are many more great libraries and tool out there I am not listing, either because I just overlooked them, or because I think there is a better alternative. If you feel I’ve missed something here, I’d love to hear your suggestions.

    The Essentials

    • Prototype: First on the list for good reason. It’s a staple library on which so many other libraries are built. Development utilities and nice Ajax handling
    • Scriptaculous: Effects galore. A bit on the heavy side, but can be worth it for the right use. A piece of cake to use lots of powerful features.
    • Lightbox: A simple way of presenting photos and HTML chunks in modal windows, dimming the background of the page.
    • Really easy field validation with Prototype: The name says it all
    • Tabifier: A JavaScript implementation of the card stack design pattern. Show and hide divs, packing a lot of information into a relatively small area with comfort.
    • Fade Anything Technique: Popularized by 37signals, a great way to tell users about errors or other critical feedback.
    • New Window Link: A nice way to offer users the ability to launch a link in the same window, or spawn a new window.
    • Sweet Titles: A beautiful, souped up alternative to the plain ol’ title attribute display.
    • SWFObject: Detect the Flash player then embed a SWF in your page following web standards
    • Tiny MCE: Turn any textarea into a WYSIWYG editor. Perfect for your next CMS or web app

    The Runners Up

    • Yahoo! UI Library: Many handy utilities for some advanced interface design patterns like accordion menus.
    • Moo.fx: This may soon replace Scriptaculous as the de facto effects library because of its slim file size, it just hasn’t quite caught up with the documentation yet.

    Did I miss any?

  4. Extending the Ajax Mailing List Sign Up System

    A couple of my readers from my recent SitePoint article have asked me about how they could extend the Ajax mailing list sign up system to receive further inputs like the user’s name and phone number. It’s actually pretty simple. If you have additional fields in your form, just modify the parameters string in mailingList.js. Here’s an example:

    var pars = 'address='+escape($F('address')) + '&firstName='+escape($F('firstName')) + '&lastName='+escape($F('lastName')) + '&phone='+escape($F('phone'));

    You can see that you can append as many or as few inputs from your form by just extending the GET string passed to the PHP script. Notice I’ve added the “&” before the next parameter names as is required in any GET string with more than one variable included. Of course you would need to adjust your MySQL table to include these fields, and change storeAddress.php to receive the values as well.

    $address = $_GET['address'];
    $firstName = $_GET['firstName'];
    $lastName = $_GET['lastName'];
    $phone = $_GET['phone'];

    $addresscheck = mysql_query("SELECT * FROM mailinglist WHERE email='" . $address . "', firstName='" . $firstName . " ', lastName='" . $lastName . "', phone=' . $phone . "' ");

    It’s also quite easy to modify this technique to work for things like contact forms, or user input in a CMS by simply adjusting your form, and the references to the field names. The principles are still the same.

    If you are interested in other useful Ajax tools, you may want to check out Dustin Diaz’s Ajax contact form. It’s pretty clever, and packed with nice effects, but seems to struggle to work in Opera. It’s a pretty sophisticated example of a contact form.

    A word of caution, it’s pretty easy to get swept up by the allure and ease of implementation of many Ajax/DOM scripting tricks. Always ask yourself how it benefits or hurts the user experience. If you find yourself adding features because they are cool, yet they negatively impact findability, accessibility, or cross-browser use then you probably should reconsider. James Edwards has written a sobering article about Ajax and screen readers (lump search engine spiders in that group too as they are equally as blind) that may bring you back down to earth about the Ajax trend. I should also mention that my article is actually backwards compatible for those without JavaScript enabled, giving us the best of both worlds. The article also uses Ajax specifically to enhance the user-experience by making the impulse action of signing up for a mailing list faster and more convenient.

  5. SitePoint Article Forthcoming

    I’ve recently written an article for SitePoint entitled “Use Ajax and PHP to Build Your Mailing List”. The article walks readers through the process of constructing a mailing list sign up widget that makes use of the Prototype JavaScript library to send an Ajax call to a PHP script, which then stores the email address in a MySQL database. The result is a very quick, and painless mailing list sign up process requiring no page refreshing or redirects.

    The article will be published later this week or next week, and will include a code archive with a completed version of the scripts.

  6. Internet Explorer 7 Release Coming Very Soon

    Microsoft has announced on their IE blog that Internet Explorer 7 will be released before the end of the month, which means if you have not yet tested your sites in the new browser you’d better make a point of it soon. If you have been using CSS hacks, such as child selectors, to feed standards compliant browsers different style rules than IE6, IE7 will now understand those hacks and may cause improper rendering of your pages. The best way to handle CSS specific to IE is with conditional comments, not with the various hacks anymore.

    A word of caution, installing IE7 will over-write your IE6 installation unless you install IE7 in standalone mode as is described here.

  7. Smooth Slideshow, an Elegant JavaScript Slideshow

    Todd Dominey’s ever popular SlideShow Pro is a great Flash utility that many people use to display their photos on their sites, but Jonathan Schemoul has a nice JavaScript alternative called Smooth Slideshow. Smooth Slideshow uses the Mootools JavaScript library to create elegant cross fading, and passive or active navigation through photos. Mootools is similar to Scriptaculous, but is allegedly a bit slimmer to cut down on download times.

    I doubt Smooth Slideshow is going to dethrone SlideShow Pro as the king of slide show mechanisms (especially with the recent introduction of SlideShow Pro Director), but it’s nice to have an alternative. Speaking of slide show alternatives, you might also want to check out Mono Slideshow, another flash slide show application with very similar features as SlideShow Pro.

  8. Articles for Budding Interactive Designers

    When getting started in the interactive design field you can find yourself a bit intimidated by the breadth of knowledge required to succeed. Design, programming, and user science are each multi-facited with much to learn and explore in each sub-discipline under the umbrella of interactive design. Here are a few great articles that can give you a head start on fundamentals free of charge! Don’t you just love this internet thing?

    Design

    Programming

    User Science

    Interactive Design Ezines

  9. Handy Scripts for Building Web Sites

    I have compiled a small collection of scripts that I have written or modified from other sources. There are lots of useful things like a working PHP shopping cart, a mailing list sign up widget that connects to Mail Chimp or your own database using Ajax, a PHP contact form with server-side validation, an RSS parsing script, a Scriptaculous photo slideshow tool perfect for showing screen shots of your work, and a few others as well. All of these things have been useful to me, and I hope they do others some good as well. If you modify or make use of any of these tools I’d love it if you would shoot me an email with a URL so I can see what you have done.

    While you are checking out the code examples in the resources section, you may also want to check out my list of design tools, recommended books for interactive designers, and links to various interactive design resources.