5 Lesser Known JavaScript Libraries that Make Web Design Easier

In this round-up we’ll be looking at 5 JavaScript libraries that can really ease the development of modern, attractive web sites. The libraries that we’ll be looking at aren’t libraries in the same sense as something like jQuery or the YUI; they’re much smaller and much more specialized. But they’re the best at what they do and provide unique functionality.

1. Fixing PNGs in IE6 with DD_BelatedPNG

• Created by: Drew Diller
• License: MIT
• Usage: Fixes alpha-transparent PNGs in IE6
• Size: 6.86kb (compressed)
• Compatibility: IE6 only
• View Demo
• Download

DD_belatedPNG was created for the single purpose of allowing alpha-transparent PNGs to be used in IE6 without resorting to Microsoft’s proprietary AlphaImageLoader filter. As anyone who’s tried to use PNGs in IE6 before knows, although they can be made to work to a very basic degree, things like repeated background-images are out of the question.

Using the AlphaImageLoader filter only fixes half of the PNG problem in IE6 as it can only be used with background images. To make use of alpha-transparent PNGs on <img> elements, another fix is used, which is typically the HTC fix which relies on a transparent PNG and an HTC behavior file. Additionally, as Firebug and YSlow users will be aware of, Microsoft’s AlphaImageLoader is slow; one of YSlow’s guidelines is to avoid the filter at all costs.

DD_belatedPNG uses Microsoft’s implementation of VML to replace PNGs with VML elements, which do support alpha-transparency. It can be used with both full <img> elements and CSS background-images. When background-images are replaced, common features such as background-repeat and :hover states can also be used so this library solves all of the common PNG problems in IE6.

Usage

Using DD_BelatedPNG is exceptionally easy; it only needs to be used with IE6, so the main script can be included in the page using a conditional comment:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<![endif]-->

The library has a single method, fix, which is used to supply simple CSS selectors that are targeted by the library, any <img> element that has a PNG src attribute, or any element using a PNG CSS background with the matching class name will be fixed. This part of the script can go into the conditional comment as well so that only IE6 will need to process these additional rules:

<script type="text/javascript">
  DD_belatedPNG.fix(".linkButton");
</script>

Fixed PNGs in IE6 will now appear as they should and can be background-positioned and repeated, and also work with :hover states, unlike Microsoft’s proprietary filter. The following image shows a before and after picture of an alpha-transparent background image:

2. Use any Font with Cufon

• Created by: Simo Kinnunen
• License: MIT
• Usage: Allows embedding of non-standard fonts without needing flash
• Size: 17.8kb (compressed)
• Compatibility: All (all common versions from all common vendors, including IE6)
• View Demo
• Download

Typography is one area of web development that has seen painfully little advancement when compared with other areas of the industry. Web developers have been forced to rely on a small set of ‘web safe’ fonts that are likely to be installed on the majority of their visitor’s computers. Image and flash-based solutions have arisen, both of which have downsides to using.

Cufon offers developers a robust and fast solution, which can be displayed in the browser without requiring third-party plugins using features built in to browsers. Cufon fonts can be used as VML for native IE implementation, or the <canvas> element for other more capable browsers. Awesomely, we can also set different styles of the replaced text, such as its color and size using pure CSS.

Usage

This library differs from the others in that a little bit of preparation is required before use; a new font file needs to be generated which can be done easily using the cufon website. The will generate an SVG font and save it in a JS file. This file needs to then be linked to any other <script> resource after the cufon core file:

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="Breip_500.font.js"></script>

Then it’s just a case of telling Cufon which elements to replace:

<script type="text/javascript">
  Cufon.replace('h1.replacedFont');
</script>

The API offers other solutions for using multiple fonts on the same page and for improving performance in IE. Although I’ve called this section, “Using any Font”… you should remember that only fonts that are licensed to be embedded should be used. The following screenshot shows a replaced heading:

3. Use Firebug in any Browser

• Created by: Mike Ratcliffe
• License: BSD-style
• Usage: All the power of Firebug in browsers other than Firefox
• Size: 76.9kb (compressed)
• Compatibility: All non-Firefox browsers
• View Demo
• Download

Firebug is without doubt one of the greatest assets to web development available; I certainly use it on a daily basis when developing for the web, and I know it’s the plugin of choice for many others too. An unfortunate side-effect of Firebug’s excellence is that other similar tools for other browsers pale in comparison and appear inferior. Trouble-shooting layout issues and CSS bugs in IE for example can be a lesson in futility.

This is where Firebug Lite steps in; this is a simple JavaScript library that recreates most of the key features of the Firebug interface, bringing our debugger of choice to all other platforms. Fixing layouts and troubleshooting cross-browser issues becomes easy once more.

One of the greatest things about Firebug Lite is that you don’t need to download it or install anything in order to start using it; when you want to debug a page you’re working on in browsers that aren’t Firefox you can just include a script file whose SRC points to the online version:

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

That’s it, when you run the page in any other browser, Firebug Lite will be present on the page. For off line use, the script file, as well as a CSS file, can be downloaded and should just be used like any other JS or CSS file. The following screenshot shows Firebug Lite in Safari:

4. Render Interactive 3D Shapes with Raphael JS

• Created by: Dmitry Baranovskiy
• License: MIT
• Usage: Draw SVG shapes on the page
• Size: 58.4kb (compressed)
• Compatibility: All (all common versions from all common vendors, including IE6)
• View Demo
• Download

Ok, so this library isn’t quite so small, but there’s a reason for that; the library does a huge range of things and adds complete SVG control to a web page. Frankly, its power is awesome. Imagine being able to draw smooth curves across a web page and create custom shapes on the fly – Raphael does that.

You can do rounded corners that are completely cross-browser with no images (other than those actually drawn by the library), you can create faded reflections for any images, rotate the images dynamically and much more. As all paths are drawn using SVG elements, you can attach JavaScript events to them so that people can interact with the images on mouseover or click (or any other JS events). The possibilities are endless and the API provides a wide range of different methods that make working with the library a pleasure.

Usage

The library must of course be linked to:

<script type="text/javascript" src="raphael.js"/>

This is it, there are no other dependencies. Now we can begin creating our SVG shape:

<script type="text/javascript">
  var canvas = Raphael(50, 50, 620, 100);
  var shape = canvas.rect(0, 0, 500, 100, 10);
  shape.attr("fill", "#fff");
  canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");
 </script>

The library is made to be easy to use and we’ve only used a tiny fraction of its capabilities in this example. The page that this is used on should appear like this:

5. Progressively Enhance Your Site into the Future with Modernizr

• Created by: Faruk Ateş and Paul Irish.
• License: MIT
• Usage: Detect HTML5 and CSS3 support
• Size: 7kb (compressed)
• Compatibility: All
• View Demo
• Download

It’s an exciting time for web development with CSS3 and HTML5 advancing by the day, but it’s also a frustrating time because we’ve got all these advanced new technologies coming out with very little support. We want to start using all the great new HTML5 and CSS3 features, but most of the new HTML5 elements for example are only supported in maybe a single browser.

Modernizr is a tiny little library which simply tests whether the current environment supports a series of advanced features, such as the new <audio> and <video> elements. A JavaScript object is then created by the library which contains Booleans indicating whether each feature is supported. So if the current browser does support the new <audio> element, Modernizr.audio will return true. It’s that simple.

The library also adds class names to the <html> element that we can target with CSS in order to hide certain elements to the page, so when the <audio> element is supported, <html> element will receive the class name .audio. When browsers that don’t support it view the page, the element will get the class .no-audio.

This is incredible because it means that we can safely add these new features to our pages for the browsers that do support them, without causing chaos in the browsers that don’t. In the nature of progressive enhancement, we can create an accessible and broadly support core of content, and then progressively add more and more features for browsers that support them.

Usage

Let’s see it in action to display some nice CSS3 effects; first we just link to the very tiny library using the standard <script> element:

<script type="text/javascript" src="modernizr-1.0.min.js"></script>

Then we can add the following CSS:

.no-audio #audioContainer { display:none; }

This will ensure that browsers which do not support the <audio> element do not see it. The element does provide a built-in fallback for browsers that don’t support it, but this way is better. The body of the page could then look something like this:

<div id="audioContainer">
      <audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg" controls"true"></audio>
 </div>
<a id="linkToAudio" href="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg">Link to the audio</a>

Once this is done we can detect whether the browser supports HTML5 audio and show or hide the link to the media (we could easily do this using just the CSS, but this way we get to see the Modernizr object in action):

if (Modernizr.audio) {
  var audioLink = document.getElementById("linkToAudio");
  audioLink.style.display = "none";
}

This is all we need; capable browsers will see the <audio> element but not the link, while less capable browsers will see the link and not the <audio>:

Conclusion

Each of these libraries caters to a very specific problem; they’re generally much smaller than more well known and general purpose libraries, but just as useful for their specialized purpose. Each of them can aid us in one way or another when developing web sites from either easing development in IE6, using non-standard fonts without cumbersome replacement techniques, to detecting support for the latest CSS3 and HTML5 technologies or generating complex and interactive images.