Main

January 3, 2008

I Love YUI

Yahoo! has made a lot of cool resources available for web developers. They have libraries to login using Yahoo! credentials, perform searches, etc. But one of my favorite, one that I think has no equal even from the mighty Google is their Yahoo! User Interface library (YUI). It's a great collection of JavaScript pieces which have been beautifully tailored to be useful to total JavaScript know nothings like me and experts as well. They then marry those with a set of excellent CSS files to handle common needs and test the whole mess on every major browser (or at least the ones making up 95% of the traffic to your site). Regular updates to expand the library or the documentation, and keep it up with the latest advances in browser technology are also de rigueur. If you've ever found yourself needing menus, tabs, color pickers, calendars, etc. for your website, go to the YUI site.

However, if you're using Ruby on Rails to do your web development these days then you know that Rails is already well integrated with the JavaScript libraries Prototype and Scriptaculous. If you're like me, you don't want to give up that easy integration and you may still be too new with Ruby and Rails to figure out how to use YUI's JavaScript parts instead. Anybody doing a website that is for Internet use rather than internal business use can't afford to use both sets of libraries on their pages because of bandwidth and time costs. But that doesn't mean you have to throw all of YUI out. After all, there's still the CSS!

YUI offers four CSS files at present:

reset.css Removes all the existing browser styles so that differences in how Internet Explorer styles a <li> or <b> from how Firefox does it are gone.
base.css Provides default styles for all the elements so they will look the same across browsers.
fonts.css Provides consistent font sizing across browsers.
grids.css Provides a great way to layout complex pages with multiple parts within parts, centering, sizes, etc. without having to resort to tables.

I used them on LOL.com and was very happy with how uniform they made my pages look across different browsers. It's usually hard work to do a layout with many parts to it and lots of formatting and test it various places. With YUI CSS I was able to do it once and do some fairly light testing and still get a very consistent look.

March 12, 2003

JavaScript Calendar For Web Applications

Every once in a while I'll do an web based interface for some software. I'm actually finishing one up right now at work. So I thought I'd mention The Coolest DHTML Calendar here. Yes, that's the actual name of the project :)

Anyway, it's a really nice JavaScript calendar which looks to have been tested on a variety of browsers which would give you an easy way for users of a web application to pick dates. Something to store away for future reference.

December 24, 2002

Using Transparent PNG Files

I had read about the gimmick mentioned in the article A List Apart: Cross-Browser Variable Opacity with PNG: A Real Solution a while back. But this article sums up the hack to use transparent PNG files in Microsoft's Internet Explorer and makes it easier to use by bundling it with some JavaScript so you can use it in your web pages and still be compatible with modern browsers (Mozilla 1+, Netscape 6+, IE 5+).

So, why do you care? Well, if you've ever wanted to do a graphic for a web page and the edges of that image didn't fall perfectly on pixel boundaries then you've typically had to do one of two things: a) force the edges to end on pixel boundaries or b) blend the edges of the image with a color and then make sure that you used that color behind the image when it appeared on the web page. The latter is why you often see sites that have button sets and they include different sets of buttons for white backgrounds, black backgrounds, etc.

But what if your background is indigo or crimson or something? Then you have to alter the buttons for your website. But not if you could make parts of images partially transparent. Then they could have edges that would blend and look right on any background. The PNG format allows for that and this article shows you how to take advantage of it (even if it is a hack on IE).