Monthly Archives: June 2008

Forget IE

I’d like to move on past IE’s limitations. I’d like to be able to do more CSS2, stop worrying about the broken box model, and throw away my CSS hacks cheatsheet. That is the vision of Dean Edwards in his IE7.js and IE8.js libraries. Dean Edwards is a pioneer of JavaScript techniques and a true authority in the JavaScript world. His perspectives are sometimes controversial, but no one disputes that Dean Edwards writes some elegant and speedy code.

But I’d like to talk about my experience with his lesser-know library IE7. From what I understand, it was named IE7 with the assumption that IE7 would correct all the problems the script fixed. After all, he had made the fixes in JavaScript in a matter of months so surely the IE development team could make the fixes given 5 years and access to the source code. Unfortunatly Microsoft blew it and Dean recently released IE8. He considered other names like “IENext” but decided to follow convention.

Anyway, the following is a list of advanced selectors and features that I find so nice to use–and with IE8.js, I CAN!

  1. Apply styles by attribute:
    input[type=text], input[type=submit], input[type=password], etc.
  2. Add a focus effect:
    input[type=text]:focus, textarea:focus, etc.
  3. Add a hover to any element:
    input[type=button]:hover, li:hover, tr:hover, etc.
  4. Apply styles to disabled elements:
    input[type=submit][disabled], input[type=text][disabled], etc.
  5. Styling by sibling selectors:
    h1 + *, p + table, p + ul, etc.
  6. Immediate descendents:
    #content > *, #nav ul > li, etc.
  7. Specifying opacity in one line:
    opacity: 0.66
  8. Define minimum and maximum widths and heights:
    min-height: 50px; max-height: 100px; min-width: 200px; max-width: 500px; etc.
  9. Before and after pseudo-selectors:
    q:before, blockquote:before { content: ““” }, etc.
  10. Transparent PNG backgrounds:
    .print_icon { background: transparent url(../images/printer.icon.png) no-repeat 0 0; }
  11. Ignore the broken box model: (use width + padding or height + padding)
    #content { padding: 10px; width: 400px; height: 400px; }

Limitations include the fact that selects are still stupid, inputs still cannot be transparent, and PNG background images cannot be positioned or tiled.

Although IE8.js isn’t perfect, download it and see what you are missing!

Images: Cache, Slice, Compress

  1. Implement Cache Control Headers
  2. Properly Slice Up Designs into Images
  3. Use an Appropriate Format and Compression

Take advantage of client caching. After the home page, users should be downloading mostly HTML content. Additionally, IE 6.0 has a nasty error that causes it to repeatedly download background images applied to links on hover. The following Apache example sets images to expire in 30 days and fixes IE 6’s repeated downloading that displays as a flicker. Also see Dean Edward’s Article on IE image flicker and Expires Headers.

# Stop IE Image FlickerBrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary
# Set Images to Expire in 30 days
<IfModule mod_expires.c>
  ExpiresDefault A300
  <FilesMatch "\.(gif|jpg|jpeg|png)$">
    Expires A259200
  </FilesMatch>
</IfModule>

2. Properly Slice Up Designs into Images

The goal is to reduce the number of images that browsers must download. Each image incurs overhead of an HTTP request and the image format’s metadata. Combined images can save a significant percentage of bandwidth. I worked on a project this week that saved over 90% of the image download size by combining images. In one case, I combined 36 menu items including rollover and selected states into one image.

Many designers slice up graphics as if they are slicing a pie. But you’ve got to think three-dimensionally with layers and overlapping. Imagine a table with building blocks that represent HTML nodes and sheets of paper that represent images. An image can be the same size as its block so that it is placed edge-to-edge with the block. But an image can also be much larger than its block by wrapping part of the image around the sides of the block. And the blocks can be stacked.

A List Apart has some great examples of combining images: Sliding Doors of CSS, Part II; CSS Sprites.

3. Use an Appropriate Format and Compression

The “Save for web” feature in Photoshop is underused and not always properly used. One of it’s main purposes is to allow the designer to choose a the format that balances image quality with compression. Each time you try a file format and compression, you will see a preview image in the center and a file size in the lower-left corner. Play around and balance quality and compression. Here are some rules of thumb:

  • .png–Best for complex logos and graphics, especially when a .gif removes too many colors and a .jpg version is larger
  • .jpg–Best for photographs and complex graphics when a .png version is larger (Usually .jpg quality of no more than 60 or 70 is a good balance of compression and quality)
  • .gif–Best for logos and simple graphics when 256 colors or less looks good (Don’t be afraid to use fewer than 256 colors!)

Mastering these three principles speeds up download times and enhances user experience. Ignoring these principles may annoy users when they wait and annoy web hosts when they receive their bandwidth overage bills.

MouseEnter and MouseLeave

The problem is that mouseout events are fired when moving into a child elementand mouseover events are fired when moving from a child element. This behavior is confusing.

Example Usage:

$(‘nav’).observe(‘mouseover’, myMouseEnterCallback.bindAsMouseEnter(scope, arg1, arg2));

OSX UI Philosophy

Apple sure does have a unique philosophy of minimalism for their UIs. I used a Mac today for about 3 hours to do some simple Photoshop stuff at work. I was surprised by some of their UI design choices that diverge so much with Windows and Linux. Here are my thoughts.

I definitely enjoy the Windows/Linux utilitarian approach over OSX’s simplicy approach. I was particularly irked when there was no easy way to rake through a folder of 64 images to find out which 6 were 180×20 instead of 180×19.

Windows & Linux OSX
Application Windows Encapsulation:
Windows are logically “contained” within the parent application.
Visibility & Consistency:
Windows are always visible and the application menu is always at the very top of the screen.
Application Switching Taskbar:
A list of running programs displayed on a bar.
Visual Index:
A visual display of a small version of each open window.
Window Resizing Utilitarian:
Windows can be resized from any side, or, within a larger target in the lower-right-hand corner.
Consistency:
Windows are only resized via a small icon in the lower-right-hand corner.
Returning to Parent Folder in File List Always available:
Filesystem feels like a hierarchy.
Available only in columnar view:
Each view is designed for basically one thing. Filesystem feels like an index of favorites.
Document Icons Icons and some previews:
Most documents have a general icon. Icons are clickable in the entire square they reside (e.g. 32px by 32px).
Previews:
Document previews are generated as much as possible. Icons are clickable only on the preview itself. (I was working with some icons for short and wide images and the icons were a bit difficult to select!)
File Renaming and Deleting Common operations:
F2, type, enter. Del.
Prevent accidental actions:
Cmd + I, click, type, close window. Cmd + Del.
Image Sizes Severally available:
Available in list view and in document summary.
Use an app:
Not available from the OS?

Perhaps my preference is deeply embedded in my roots of DOS, Windows and Linux. I am probably being a bit arrogant to compare a system I’ve used for tens of thousands of hours to one I’ve used for three :P

Legos and Object Oriented Programming

What do Legos have in common with Object Oriented Programming? According to

, those who are at home with Legos are most likely to fully embrace Object Oriented Programming principles. There the author defines three categories for programming languages:

  1. Object Oriented (Legos, tinker toys, woodworking, etc.)
  2. Function Oriented (Geometry)
  3. Math Oriented (Algebra)

I couldn’t help but start to think what languages would fit into which categories. Below is a brainstorm–mind you I haven’t used most of these languages :)

  • Object Oriented–C++, C#, Java, VB.NET
  • Function Oriented–C, Perl, PHP
  • Math Oriented–Haskel, Scheme
  • Object-Function Hybrid–JavaScript
  • Object-Math Hybrid–Ruby

And it seems that as languages evolve they sometimes cross into another category. I mean Perl and PHP have evolved to include more and more Object Oriented patterns.

As far as the larger question posed by the .Net Answers, I disagree that we should push languages that make programmers feel at home.

I believe that we must always push forward with new programming concepts to make progress. Sitting pretty with something that works in “the real world” to me means catering to lazyiness.

There is no one-true way: Functions, Math, Objects, Aspects, etc. are not the end all of programming. Check out Wikipedia’s list of programming paradigms. Check out the E programming language with a mind for asynchronous p2p operations including the Eventual Operator (thus the name E) which allows making intuitive synchronous programs in an asynchronous world.
Wikipedia has a more comprehensive list of programming languages and their categories.