Aarron Walter » Programming

Compressed Versions of Popular JavaScript Libraries

Aarron — Thu, 01 Feb 2007 15:57:35 +0000

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.

The Ultimate JavaScript Tool Box

Aarron — Tue, 07 Nov 2006 01:43:59 +0000

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?

Extending the Ajax Mailing List Sign Up System

Aarron — Mon, 06 Nov 2006 16:56:42 +0000

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.

SitePoint Article Forthcoming

Aarron — Mon, 23 Oct 2006 14:30:25 +0000

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.

Internet Explorer 7 Release Coming Very Soon

Aarron — Tue, 17 Oct 2006 12:28:26 +0000

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.

Smooth Slideshow, an Elegant JavaScript Slideshow

Aarron — Mon, 16 Oct 2006 17:59:22 +0000

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.

Articles for Budding Interactive Designers

Aarron — Sun, 08 Oct 2006 19:20:08 +0000

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

Principles of Design
A Web Design Review
How C.R.A.P is Your Design?
Design Psychology
Typography for the Web (A collection of articles and utilities)
Keeping a Sketchbook
Web Design Mockups with Photoshop
Critiquing Design

Programming

User Science

Interactive Design Ezines

Handy Scripts for Building Web Sites

Aarron — Thu, 28 Sep 2006 13:08:08 +0000

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.

High Tech Gift Exchange With PHP

Aarron — Wed, 27 Sep 2006 14:54:55 +0000

My family has a problem. Many of us live in different places across the US, and subsequently have a hard time honoring a long Christmas tradition of ours. Each year we draw names from a hat to determine who will be the recipient of our Christmas present. We started the tradition when I was just a kid because we didn’t have a lot of money to buy everyone a gift, but it has turned into our favorite part of Christmas. Everyone closely guards the secret of the name they have drawn, and there is often espionage involved to determine who might be buying you a gift.

Since we all live in different cities now, a physical hat drawing won’t suffice anymore. To solve the problem I wrote a little PHP script that does the random drawing for us, and emails everyone the name they have drawn, preserving the secret.

Take a look at the code here.

The script creates two parallel arrays; one listing all gift exchange participant names, and the other listing their email address. Next, it runs a loop through the names array and generates a random number between 0 and the number of names, making the name selection. The trick is you should not be able to draw your own name or a name that has already been drawn. To prevent this, there is a while loop inside the name drawing loop that will redraw a name if the above criteria are not met (this was the trickiest part). Next you have to store the name drawn in an array that tracks who has already been selected so you don’t end up with someone getting more than one gift. Lastly, just send an email using the PHP Mailer class to the person telling them what name they have drawn.

It works like a charm, and lets our family tradition continue for years to come!