• Improved cross-browser compatibility (tested to work the same across Firefox/Safari/IE6/IE7)
• Cache bug has been fixed that caused suggestions to “forget” to hide
• Moved some stylings from JavaScript to CSS
• Cleaned up code, started heavy commenting
• Not exactly a new feature, but jquery.suggest will soon be on jQuery’s plugin page

For more information, please see this previous post. While the plugin works in Opera, it’s not perfect (which is why I didn’t mention it above) and I’m still working on it.

Download it here (example CSS here) and give me some feedback.

Update 1: I realize the drop down is slightly off in IE 6&7, I think it has something to do with Wordpress or K2’s stylesheets. Also, I’m in the process of updating the script to work better when the window is resized. Keep checking back here for more updates.

Try it:

• autocomplete
• Interface autocompleter

Originally, I used the first library in all my code but found that it just didn’t have the flexibility I needed and it had not been maintained in a long time. The biggest missing feature is the ability to run a function upon selecting something from the drop down.

While the Interface autocompleter seems to be rather up to date, there’s still a lot of problems with it. It’s tied to the Interface 1 library (which looks dead), the <iframe> code with is supposed to help cover forms in IE doesn’t work over HTTPS and the caching system is so screwed up I ended up having to manually disabling it.

I also found that the two implementations acted differently in different browsers including IE 6&7, Firefox and Safari. Sometimes tab would select an item, sometimes it would move to the next <input> element. Sometimes typing in something (which I didn’t want to match) and hitting enter would submit the form as usual, sometimes it would force me to select the first match.

Anyways, enough complaining, here’s the feature list:

• Smart cache system that takes a maximum cache size in bytes and uses MRU list to discard items. Oh, and the caching works correcly.
• Doesn’t assume that you have to choose an item from the drop down list. If an item is selected and you hit enter or tab, that item is copied to the <input> element. Otherwise, hitting enter or tab works just like a normal <input> element.
• Event handler for selecting a drop down item.
• Works the same in Firefox, Safari, IE 6&7.

It’s really easy to use, here’s the code for the suggest box above:

jQuery(function() {
jQuery("#suggest").suggest("files/search.php",{
onSelect: function() {alert("You selected: " + this.value)}});
});

Here’s the stylesheet and the source for the PHP file (blatantly stolen from autocomplete) which returns the items. And finally, download the source to the suggest library here. You can find more information about possible options at the bottom of the source.

The only requirement is jQuery itself and the dimensions plugin, although the script will try to use the bgiframe plugin if possible (to fix IE 6).

I found this out when trying to implement a dynamically changing PlotKit graph on my companies intranet site. It worked in Firefox (of course) and IE was coaxed into working be using the DEFER attribute. But the best Safari could do was leave a big blank space where my beautiful graph should be. Even though there was probably only one other employee that used Safari, I knew there was no way this was going to stand. There must be a solution, right?

Some googling turned up this posting, where the problem was solved using a combination of cloneNode(), innerHTML and appendChild(). Fancy. It works with Opera and IE, but not with Safari.

Then, my eureka moment came. I replaced the <script> tag in the RPC with a <div class=”javacript”> tag, still keeping all the script inside the <div>. Next, I added .javascript { display: none; } to the style sheet and did some jQuery magic:

$('#ajaxLoading').ajaxStop(function() {
$('.javascript').each(function() {
eval($(this).text());
});
});

This simple function runs every time an AJAX call is completed and uses eval() to manually run the JavaScript. It’s ugly, it’s probably violating some sort of standard, but guess what? It works in Safari.

Most modern web sites today are seperated into the three main parts: semantic HTML, presentational CSS and functional JavaScript. Any HTML page you visit can be supported by multiple CSS and JavaScript files, each one requiring it’s own HTTP connection and download. When a website starts using multiple style sheets and the latest fancy JavaScript libraries (I’m looking at you jQuery, Prototype, MochiKit, YUI, Ext, Dojo Toolkit…) mixed with their own personal scripts, things can start getting pretty slow even on the fastest connections.

One solution is caching these files, but this still requires an HTTP connection every time the browser has to check for the latest versions. You could use an expiration time far off in the future, but you better make sure your code works perfectly the first time a user downloads it. Another problem with this technique is that pages served over HTTPS will never be cached; obviously for security reasons.

A second solution used by many major sites like Google and by libraries like jQuery, is to pre-compress any JavaScript so that file downloads are quicker. Dean Edward’s packer is an excellent tool in this regard. While this is a big help to anyone stuck with dial-up, users with fast connections will not notice a remarkable difference due to the identical latency for downloading an uncompressed or compressed JavaScript file. This also adds another step to the building, testing and deployment process because you definitely don’t want to be developing a site while debugging obfuscated code.

Minify is a PHP library that automates the process of concatenating and compressing multiple CSS and JavaScript files. This is a “free” way to improve the experience for anyone visiting your site; everything just loads faster. How much faster? Before I deployed the minified version of www.appelrouthtutoring.com, I tested the average download time of the homepage with Fasterfox, a Firefox extension. I reloaded the homepage 10 times, clearing the cache every time, and found the average load time to be 3.343 seconds.

That would be a good average time for a content heavy site like www.cnn.com, but not for the super simple mostly text web site I tested. After uploading the site using my modified Minify library, the average load time dropped to 1.228 seconds. Again, that’s an average after 10 reloads with no caching. That’s a speedup of 272%(!), with absolutely no effect on the development process for the site.

I found a similar speedup on the intranet part of the site. Load time fell from an average of 4.994 seconds to 2.329 seconds (214% speedup!). While this doesn’t exactly double the productivity of employees using the intranet, it sure makes life a lot easier.

It’s code time (the exact code I use on the homepage):

[do this before writing any HTML]

require_once('minify_php4/minify.php');

// Create new Minify objects.
$minifyCSS = new Minify(TYPE_CSS);
$minifyJS = new Minify(TYPE_JS);

// Specify the files to be minified.
// Full URLs are allowed as long as they point
// to the same server running Minify.
$minifyCSS->addFile(array(
'/styles/fonts.css',
'/styles/nifty.css',
'/styles/public.css',
'/styles/calendar.css',
'/styles/navigation.css'
));

$minifyJS->addFile(array(
'/scripts/jquery.js',
'/scripts/nifty.js',
'/scripts/public.js'
));

[do this in <head>]

<style type="text/css"><?php
echo $minifyCSS->combine();
?></style>
<script type="text/javascript"><?php
echo $minifyJS->combine();
?></script>

It’s so easy, it should be a crime to load multiple external files the old-fashioned way. Let’s all make the web a better place and start cutting down those load times!

Get the source here.

If you look in the new jQuery tab you’ll see my first released plugin for jQuery: jQuery.focus(). I know, jQuery already has a .focus() method. But that only works on <input>’s, now it works for everything! It creates a nice fade effect that blocks out everything on site EXCEPT for the element you .focus(). Click here to see a demonstration and please let me know if you find this useful.

The :hover pseudo-selector is one of the most powerful tools when working with a CSS compliant browser. With it, you can create rollovers, menus and other visual tricks without resorting to the “messiness” of Javascript. Tiny pieces of interactive logic describing complicated visual states can be included as snippets of text that even your designer can understand and use. If only it were that easy.

Because of IE’s limits, an entire generation of web developers have learned to use anchors (<a>’s) for everything from menu items to blocks of text. Clearly, these are not the applications this element was semantically design for. Up until version 7, Internet Explorer never allowed you (the highly competent web developer that you are!) to use :hover selectors for anything except anchors. Of course you could always just use javascript to manually attach effects to a particular element, but that seems ridiculous when you end up having to write dozens of lines of code just to get 4 list items (<li>’s) to change classes on mouse over. A List Apart is a site that I look to for direction when simplifying a design, but even their solutions to this problem makes me cringe.

Me: Now that I’ve laid out the problem, can you guess the solution?

You: jQuery, of course!!!

Me: Nope, what the heck is jQuery? Anyways, I’m going to write a super awesome script that just plugs into any project, re-downloads all the CSS files using bleeding edge AJAX code, parses that CSS using only the tightest regular expresssions, and then shoves all those :hover’s down IE’s throat.

Here it is. I even had the temerity to name it “fixCSS” because I thought that a couple pages of Javascript code would unify every browser on the market and allow anyone to use use compliant CSS blissfully unaware that there was any sort of scripting on the site.

It works too, go ahead. Download it, add Prototype.js, put some :hover’s in your CSS, fire up IE in your favorite virtual machine (you aren’t running IE locally are you?!?!) and wait for the page to load. It just works.

But there’s a problem. If you created a simple test with one small CSS file and one small HTML file and ran it on your local development server you probably didn’t notice it. But if you are running on a busy server with multiple CSS files and another 100k of html and images, you are definately going to notice something is wrong with IE. For about 2-3 seconds nothing seems to work. You can move the mouse and click, but rollovers don’t work, clicking doesn’t work and hell, the mouse cursor doesn’t even change over links. Then suddenly, after a couple of seconds of violently swinging your mouse back and forth across the screen, menus start dropping down and you can safely navigate to another page. And when you do, guess what happens…

You see, before writing this script I forgot the cardinal rule of web programming: implementation doesn’t matter, speed does. Visitors to your site don’t care if your CSS is the pinnacle of seperation of presentation and content, they care if they care about using your site. And compared to loading for 2 seconds, loading for 5 seconds is an eternity.

I learned this the hard way after 1 day of visitors using this script. My site needed a rewrite, fast, and I thought it would be a good opportunity to put into use a very interesting library: jQuery.

I had come across jQuery when I began planning phase 2 of fixCSS: more selectors! I was going to fix >, +, [], and any other symbol I could find on my keyboard that IE didn’t respond to in CSS files. By this time I realized that simple parsing of the CSS files wasn’t going to be powerful enough, I needed a CSS interpreter in Javascript. Prototype, another popular and powerful Javascript library, at the time had a function called $$(). In theory, you supply this function with a CSS selector and get back a nice array of elements. In practice, I supplied it with CSS selectors and got back hours of frustration.

I then began to scour the net for a single function that could do what I required. I don’t remember how I first came across jQuery, but I do remember the initially feelings I had when I wrote this:

$('ul .menu_item').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
})

If you’ve ever programmed anything in your life, you can guess what this does. Upon seeing code like this and thinking about the days I had wasted on fixCSS, I almost became depressed. I immediately deleted fixCSS.js (just to get you guys a copy I had to look through my old CVS repos) and Prototype, rewrote all my Javascript into a few small snippets of code and ended up cutting 50kb(!) from the average page I was working on.

It’s all so clear to me now. There’s no reason (and no possible way) to implement a real-time CSS file interpreter for web sites. The ability to decode CSS selectors in Javascript provides a common language for those designing a site and those developing it. By incorporating style selectors with powerfully augmented DOM elements and lot’s of functions mapping onto arrays, jQuery has boiled down site scripting to it’s core: select some nodes, select the event you want to capture (optional!) and do some logic. I’ve learned that it’s alright to use Javascript to make up for the inadequecies of Microsoft, Apple and all those other bastards. Learn to forget about which browser you’re using, try jQuery on your next site and you’ll see that scripting can be fun again.

[tags]jquery, hover, selectors, css, javascript, dom, prototype[/tags]

require_once('/phpgmailer/class.phpgmailer.php');
$mail = new PHPGMailer();
$mail->Username = 'user@domain.com';
$mail->Password = 'password';
$mail->From = 'user@domain.com';
$mail->FromName = 'User Name';
$mail->Subject = 'Subject';
$mail->AddAddress('myfriend@domain.com');
$mail->Body = 'Hey buddy, here's an email!';
$mail->Send();

This will work for any GMail or Google Hosted email account. Just make sure to include the @domain.com part for the username, even if it’s for standard GMail. Hope this saves people some hastle.

[tags]gmail, php, google, phpmailer[/tags]

Normally this involves editting my httpd.conf file, adding a virtual server, messing with the firewall and restarting Apache. But today I decided to try something new: setup a VMware Workstation session running Ubuntu server and use the Shared Folders feature to link my project to the document root. I’ve been really pleased with the results and now, if I need to setup another server for a client, I can just clone my current session, share another project folder and it’s up in minutes.

For me, the biggest upside to doing it this way is that each application can assume they are running with default settings including standard HTTP/S ports. This means no fancy setup of name servers when you are trying to host multiple sites, each with SSL. Another nice thing is the added security between clients who are now partitioned into their own virtual servers and not having to restart Apache or MySQL for all your other projects. It’s real easy, here’s how I did it:

1. Install VMware and get it running
   Go to www.vmware.com, create a profile and get a VMware Workstation key, download the program and follow the instructions. Setting it up has never been a problem and is kind of beyond the scope of this article, just don’t forget to run vmware-config-tools.pl after installing it.
2. Download Ubuntu Server and install it
   Head over to http://www.ubuntu.com/server and follow the links to download the SERVER version of Ubuntu, the standard version has too much stuff we don’t need. Create a new VMware session (make sure to choose Linux, or specifically Ubuntu as the OS) and remove the sound and floppy hardware in the session settings. In the cdrom settings, make sure the device is pointed to the ISO you just downloaded. Boot up the machine and keep hitting enter until you’re done (you may to choose ‘yes’ instead of ‘no’ once during the partitioning sequence). I chose not to install the LAMP version because I’m going to download xampp to host the web site, but do whatever you’re more comfortable with. The whole installation process took about 10 minutes on my 2.6 GHz P4 dual-core with 2 gigs of RAM, but VMware’s cloning feature means you only have to go through this once. I suggest you update the system with a sudo apt-get upgrade upon logging on for the first time.
3. Setup XAMPP (or roll your own LAMP)
   Over time I’ve found that downloading xampp, untarring it, and running sudo /opt/lampp/lampp start is a lot easier than setting up Apache, PHP and MySQL seperately. The easiest way to download xampp to the Ubuntu server session is to find a mirror from sourceforge and use wget. For example, here’s how I installed it from the command prompt:

   wget http://superb-west.dl.sourceforge.net/sourceforge/xampp/xampp-linux-1.5.4.tar.gz
sudo tar xvfz xampp-linux-1.5.4.tar.gz -C /opt
sudo /opt/lampp/lampp start

4. Setup the shared folder for the document root
   Before you can install VMware tools and allow folders to be shared, you have to download the right tools. Enter this at the command prompt:

   sudo apt-get install make gcc linux-headers-`uname -r` build-essential xinetd

   Now, to install VMware tools, on the menu bar click ‘VM’ and then ‘Install VMware Tools…’. This will load the tools on a CD on your session. To actually instally the tools run these commands:

   sudo mount /dev/cdrom
cd /tmp
tar zxf /media/cdrom0/vmware-linux-tools.tar.gz
umount /dev/cdrom
cd vmware-tools-distrib
sudo ./vmware-install.pl


   To share the folder find the menu bar, click on ‘VM’, click on ‘Settings…’, click on ‘Options’, click on ‘Shared folders’ and finally click ‘Add…’. Enter a name for the folder, find your project directory and hit ‘OK’. Your project directory will now be located in the Ubuntu session at: /mnt/hgfs/[your project directory]. If you are using xampp, you can point your htdocs directory here by typing the following:

   sudo rm -rf /opt/lampp/htdocs
sudo ln -s /mnt/hgfs/[your project directory] /opt/lampp/htdocs

That’s it! If you don’t want to go through all the hastle again, I suggest you clone your VMware session now and just keep cloning it everytime you want to make a new server. To view the web site, just point your browser to the server’s IP address. Let me know what you think, I’m off to create a new session to host my own Wordpress blog.