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
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 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.