If you are a web designer and you don't want to use the poppular JavaScript frameworks such as jQuery, YUI, ... for your litle works, then you should look these JavaScript tools in this JavaScript article. They're much smaller and much more specialized, but they still solve your problems quickly. And evidiently, they are free to download & use.

• Demo
• Enlarge
• Reload
• New window

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="/javascript/article/5_JavaScript_tools_Make_Web_Design_Easier/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="/javascript/article/5_JavaScript_tools_Make_Web_Design_Easier/cufon.js"></script>
<script type="text/javascript" src="/javascript/article/5_JavaScript_tools_Make_Web_Design_Easier/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:

• Code
• Print

• Comment (1)
• Write

by Katekyo Hitman Reborn, 25/03/2010 02:03 PM
Reply

great list of tools, thanks for sharing

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New