« November 2006 | Main | January 2007 »

December 31, 2006

links for 2007-01-01

December 30, 2006

links for 2006-12-31

December 29, 2006

links for 2006-12-30

December 28, 2006

links for 2006-12-29

December 27, 2006

links for 2006-12-28

December 26, 2006

links for 2006-12-27

December 25, 2006

links for 2006-12-26

December 24, 2006

links for 2006-12-25

Notes on getting PNG transparency in IE6 with pure CSS

Recently, I started building a site with a lot of transparent image elements. The trouble was the the client required support for IE6 as well as IE7. Now, IE 6 and lower do not support transparent PNGs out of the box, but I knew that there were workarounds for that.

The question was, which workaround to use? One method I saw involved using an Explorer "behavior." Unfortunately, this solution required loading and HTC file, which is an ActiveX control. ActiveX controls aren't loaded in IE6 with default security settings. Maybe there is a workaround for that, but I couldn't find it in a timely fashion. Besides, the HTC solution requires an HTC file and a special GIF file be stored on the server. Adding mysterious stuff to the client's file tree is something I really like to avoid.

Then I ran across a brand new article (based upon a much older article) at A List Apart: Super-Easy Blendy Backgrounds. This article describes a pure CSS technique of getting image transparency to work in IE 6.

The core of the solution is as follows:

  • First wrap the PNG in a div,
  • then create a separate style sheet for IE 6- using conditional comments.
  • Within the IE6- stylesheet, give that wrapper div the style "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='PATH_TO_PNG', sizingMethod='image');"
  • Then set the width and height of the wrapper div to the width and height of the PNG.
  • Lastly, hide the PNG itself by giving it display: none.

As I understand it, the way all of this works is that AlphaImageLoader displays the specified PNG as the background-image of the wrapper div; and AlphaImageLoader respects PNG transparency. The problem is that the physical PNG image overlays the wrapper div, effectively hiding the transparent background PNG. Hiding the original PNG with display: none solves that.

I did learn a couple of things while implementing this solution:

  • When specifiying a relative path to an image for the filter, use the relative path from the PAGE WHERE THIS CSS IS CALLED, NOT THE PATH FROM THE CSS FILE ITSELF, as you would be when specifying a background-image: url, for instance.
  • You MUST specify width and height for the container div, or the image will not show up.
  • I also used image instead of scale for my sizingMethod, because I wanted my PNGs to behave just like regular images, not to scale to the size of their container.

December 23, 2006

links for 2006-12-24

December 22, 2006

links for 2006-12-23

December 21, 2006

links for 2006-12-22

December 20, 2006

links for 2006-12-21

December 19, 2006

links for 2006-12-20

December 18, 2006

links for 2006-12-19

December 17, 2006

links for 2006-12-18

December 16, 2006

links for 2006-12-17

December 15, 2006

links for 2006-12-16

Internet Addiction

The Web is a medium, like television and cinema are media. But paper, ink and oil paint are also media. Do we talk about "drawing addiction?" How about "newspaper addiction?" Not really. Only new media are addictive -- only electric media -- technology.

I'm not disparaging Marie Winn, I do love her vision of TV as the natural medium of the commercialized counterculture. But is that wrong?

There is an unfortunate dogma in the arts, that newness is cheapness. Now, I love the new, and I love the cheap. But just because I have to plug my media into a power outlet, that alone doesn't cheapen anything. At least for me.

December 14, 2006

links for 2006-12-15

December 13, 2006

links for 2006-12-14

December 10, 2006

links for 2006-12-11

December 09, 2006

links for 2006-12-10

December 08, 2006

links for 2006-12-09

December 07, 2006

links for 2006-12-08

December 06, 2006

links for 2006-12-07

December 05, 2006

links for 2006-12-06

December 04, 2006

links for 2006-12-05

Authoring accessible Web content

This began as a post for the JAG internal wiki. After I'd gone to all the trouble of looking everything up and spelling it right, I thought it would be worthwhile to mirror the post here.

Here are a couple of basic pointers for building Acessible Web sites. I generally am interested in Accessibility, because it's part of the Semantic Web vision. When I come across a relevant article, I tag it with accessibility. But I became especially interested after the National Federation for the Blind sued Target, basically because Target refused to add ALT tags to their images.

In no particular order, here’s list of core techniques:

  • Add descriptive ALT attributes to all images.
  • Don’t use any more images than you have to, don’t use spacer images.
  • Provide alternate navigation for image maps and Flash.
  • Provide “skip this content” links at the beginning of each logical block of content.
  • Use h1, h2 etc tags to clearly label logical blocks of content.
  • Hide any accessibility elements that are not part of the layout by giving them absolute positioning and a left and top attribute of -500px. Do not use display: none or visibility: hidden to hide accessibility content. No compliant browser, including a text browser, will display elements hidden in that way.
  • Remember that the Google spider sees almost exactly the same thing as a text2speech browser, so any SEO best practices you can apply, will also help with accessibility.
  • For DHTML and Ajax, provide “control keys” for all functionality; in order to support users that can see the page in a regular browser, but who cannot use a mouse.
  • use color combinations that are distinguishable to color blind individuals. This is especially necessary when using a colored font on a colored background, or when using colors to indicate application state, login status, etc. Remember that there are two other types of color-blindness in addition to the most common, red-green colorblindness.
  • Use the TITLE attribute, and use it liberally. TITLE can be applied to any HTML tag.

If you haven't already, you will want to install the Fangs extension for Firefox, which emulates a text2speech browser. Be sure to read the install documentation completely, and remember to make the specified configuration changes to Firefox via about:config.

How to code anything in JavaScript

This began as a post for the JAG internal wiki. But I wound up looking up a lot of good links, so I thought I'd mirror the post here in order to keep those links handy.

When I want to implement a requirement, such as a business rule or DHTML behavior in JavaScript, sometimes I find that I don't know how to implement that behavior. Sometimes this might be because the requirement is complex, as in the case of DHTML animation. Or the algorithm I am searching for may just be obscure, such as a unique ID generator that uses a closure instead of a global counter.

When I do not immediately know how to implement a requirement, I usually need that information in a hurry. I do not have time to make extensive flow charts, or to research the deep features of JavaScript. What I want is to find someone else who has already implemented something ''similar'' to the requirement. And I want to see their source code.

The fastest way to make this happen is to search the comp.lang.javascript newsgroup. This venerable institution has existed since 1999. Among the group's active members are experts in the field; for example, Douglas Crockford, Peter Paul Koch and Matt Kruse. Its archives and FAQ contain a wealth of information. Here are a few examples:

If the answer I am looking for is not to be found in the archives, then I post that question to the newsgroup. If a question is not easily found in the archives, and if it is not in the FAQ, then it is often a new(ish) problem, and people will be excited and helpful when answering.

Once a question has been answered, that may be the beginning of a dialog with the person who gave the answer. If a question is of particular interest to the community, then it may even result in a longer discussion between several different people. All of this provides excellent opportunities for asking more questions, in a fairly friendly and responsive environment.

December 03, 2006

links for 2006-12-04

December 02, 2006

links for 2006-12-03

Needed: verbs to describe public humiliation on the internet

I was reading how the Star Wars kid is still the most famous person on the InterWeb.

And it occurred to me that there is no English verb to indicate the action of discovering and subsequently publishing someone else's embarrassing material on the Web. This happens so often that we should have a word for it. Especially since it's only going to happen more often as we get more and more comfortable with the surveillance culture.

What makes del.icio.us different

I've explained del.icio.us to a lot of people over the last few weeks. When I explain a new technology to a bunch of novices, that's usually when I start to understand it myself. As I was explaining what del.icio.us does, I had to think a lot about how del.icio.us works. And I had a few insights about what makes del.icio.us a different kind of online community.

  • No batch import. Sure, I can import as many bookmarks as I want. But to make them public, I have to edit each one individually. This makes it harder to spam.

    It also means that all you ever see when you look at del.icio.us are links that I have chosen to display since I created my del.icio.us account. And somehow, that makes a very large difference in the quality of the community.

  • No batch edit, except for tags. I can change my own tags, but (as I mentioned) I can't make all of my bookmarks public without visiting every one individually. And I certainly can't apply a new tag to a whole bunch of bookmarks all at once (unless they all already share a tag).

  • Because of the two restrictions noted above, there is effectively no way for me to change my user name.

  • Even though del.icio.us is a "social bookmarking" service, there is no way to directly contact another member. If I like you, I can add you to my network. But that's it; no "del.icio.us mail," or "notify me when someone in my network is online," not even the option to "invite so-and-so to join your network."

    In fact, while the word "share" occurs frequently when discussing del.icio.us, I don't think I've ever heard the word "invite." Perhaps this might imply that del.icio.us is marketed mostly to people who are interested in interacting with the other people that are already on del.icio.us. Then perhaps the people who join the community tend to be people who already know and like the existing community.

December 01, 2006

links for 2006-12-02