Posts

IE CSS3 selectors – selectivizr JavaScript Library

selectivizr – a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.

Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE.

selectivizr CSS3 pseudo-classes javascript emulator

Selectivizr requires a JavaScript library to work, like jQuery, MooTools, YUI, Dojo, Prototype.

If your website already uses one of the 7 supported libraries you just need to add the selectivizr script to your pages.

Web Development Project Estimator

The Web Development Project Estimator is a simple tool that allows web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project.

When finished, you can view your finalized estimate in a print-ready format in case you’d like to save a PDF or print a copy for your records.

The tool does not offer any benefit over a Google spreadsheet, but there’s a lot of freelance web designers/developers who don’t have an estimating process at all and it was created for them.

DLINK – Style Your Links Automatically

Update: Site no longer exist

DLINK – by adding a single line of javascript to your site, you can automatically style your links to look and work better.

Automatic links styling

Just add the class of “dlink” to any section of your website and style the links with colour:

a.internal  {color: #D47700;}
a.external  {color: #0074D4;}
a.subdomain {color: #D43500;}
a.email     {color: #00B235;}

To exclude individual links just add a class of “no_dlink” to the link and it will be ignored:

smush.it – Optimize Your Images

Smush.it project from Stoyan Stefanov and Nicole Sullivan of the Exceptional Performance team at Yahoo!.

This team is also responsible for YSlow ( analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites).

Smushit.com is an open source image optimization tool that squeeze the last bytes out of your images without changing their look or visual quality.

open source image optimization tool

You’ll get a report of how many bytes you can save by optimizing your images and all the optimized images in a single zip archive for download.

You can optimize images by:

  • Upload a bunch of images in the web browser
  • Provide list of image URLs
  • Use a cross-browser bookmarklet to optimize the images found on any web page
  • Use the Firefox extension

DD_belatedPNG – IE6 Alpha PNG Fix

Unlike other Alpha PNG fix scripts for IE6, DD_belatedPNG ensure that background-position and background-repeat are properly supported and fixes the grey background issue.

There is no usage of AlphaImageLoader, so script doesn’t have the buggy z-indexing associated with that filter.

IE6 alpha png fix

The script is lightweight, 6.66Kb uncompressed – 3.89Kb compressed and easy to implement:
insert the .js file, create another script node and define the class the fix will be applied to, like this:

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
  /* string argument can be any CSS selector */
</script>
<![endif]-->

Kroppr – Image Crop Script with Realtime Rotation and Zoom

Kropprunobtrusive script that allows users to rotate, resize and crop images without any plugin (flash or java) .

The script is not free (29 euro cost).

In case image rotation is not a must for you, you can check out free image crop scripts: Jcrop – jQuery Image Crop Plugin or UvumiTools Image Crop.

kroppr - image cropper script

The installation is very easy and the changes needed to an existent and already launched site are minimal – from the design point of view there is no difference.

Typeface.js – Embed Custom Fonts in Your Web Pages

Typeface.js – Instead of creating images or using flash to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

The code is free and open source. Supported browsers include Firefox 1.5+, Safari 2+, and Internet Explorer 6+.

Things will degrade gracefully for other browsers. Users browsing with their PDA’s, for example, will still see your text there–it just won’t be quite as pretty.

Performance is fairly good for usage with page titles and headings for instance, but you’ll probably find using typeface.js for body text to be too slow.

FLIR – Facelift Image Replacement script

An alternative to sIFR, FLIR – is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors.

The replacement image is dynamically generated using the CSS styles that you have applied to the element. You are not limited to one font and color with your replacement images. Add as many fonts and colors as you wish to your elements and they will be detected and replaced automatically.

facelift javascript image replacement

Meteora – set of Javascript Widgets and Controls

Meteora Javascript Widgets – Based on the great mootools framework (version 1.11) and released under the MIT license, Meteora is set of cross-browser Javascript Widgets and Controls.

With Meteora you can quickly write rich and customizable web applications without having to waste time reading full pages of documentation or programming excessive javascript that is painful to debug in every browser.

Be sure to check out the demos like: Autocomplete Widget, Bubble Widget, Calendar Widget, Datagrid Widget, Dialog Widget, Editor Widget, Filebrowser Widget, Form Control, JsonRpc Core, Menu Widget and more.