Comments on: YUI Autogrid: Correctly resize the grids

By: MattSweeney

MattSweeney — Fri, 27 Jun 2008 18:49:58 +0000

@dhtmlkitchen
Garrett,

The caching approach we use to optimized dynamic regular expressions is the culmination of a discussion that took place on an internal mailing list.

If you feel that this or any other source code has not been correctly attributed, please contact us directly and we will take every step to ensure that proper credit is given when due.

By: Chris Heilmann

Chris Heilmann — Fri, 27 Jun 2008 08:05:00 +0000

@Jordan you are very much missing the point here. Whoever wishes the time of layout tables back should also get IE4 and Netscape 4.07 and 4.5 back. Get over it, tables for layout are a hack and still advocating them means you haven’t understood that HTML is structure and semantic meaning and not painting by numbers.

By: Chris Heilmann

Chris Heilmann — Fri, 27 Jun 2008 08:02:32 +0000

@dhtmlkitchen as to the performance differences: this code is executed once on initial rendering, so I’d opt for readabillity rather than trying to shave off milliseconds that nobody misses.

By: Chris Heilmann

Chris Heilmann — Fri, 27 Jun 2008 07:58:28 +0000

@dhtmlkitchen all good points. The code is also Open Source, so feel free to change that.

The accuracy of the class checking can be surely much improved, however I took this pragmatic approach as this only is meant to work with YUI grids and I’d never use any other class on the main container element than the one defining the columns, just for readability.

As to constants, maybe, however I find the request to simulate a mediaqueries style syntax for this much more interesting.

By: Jordan

Jordan — Fri, 27 Jun 2008 04:57:03 +0000

So it’s back to table based layouts for all of us. Ah, the flexibility of tables (layout-wise, not code-wise).

By: dhtmlkitchen

dhtmlkitchen — Fri, 27 Jun 2008 04:20:59 +0000

if(classes.match(/yui-t[4-6]|yui-right/)){}

Can be replaced with:
if(Dom.hasClass(container, “yui-t[4-6]|yui-right”))
Where Dom is YAHOO.util.Dom.

Further down, I see:- container.className = sidebar === ‘left’ ? ‘yui-t3′ : ‘yui-t6′;
- and then:-
container.className = ”.
For general purpose javascript, it is a good idea to be polite about the className attribute by removing only the classes relevant to the script.

This will have the benefit of using the className cache built into YAHOO.util.Dom that Matt seems to have borrowed from me (sans credit).

This will also have the benefit of better accuracy,for className attribute rules (the “(?:^|\\s)” + token + “(?:\\s|$)”. The down side is that Dom.hasClass does not guarantee how it is implemented, so it could change and passing in a pattern would not work anymore. APE.dom.hasToken, on the other hand, uses a more generic approach. Method hasToken is guaranteed to search for a string token and that can contain RegExp syntax that will be cached (the original source for the caching concept that I wrote).

YAHOO.util.Dom -> lookup can be reduced to
var Dom = YAHOO.util.Dom, which will be further reduced with a compressor. It can shave milliseconds off time execution speed (barely), and can reduce download size (only slightly in this example).

It might be a good idea to add constants for the measurements. This can be passed in typical config style of YUI. A conig could have a docId prefix.

The scope argument ought to be renamed, as it deals with context, or thisArg for call. It is not an actual scope.

By: mikenolan

mikenolan — Thu, 26 Jun 2008 22:02:21 +0000

We’ve been using this technique for a little while but using jQuery/YUI Grids. It works okay but is not without problems. Designing different sized images is a bit of a pain. We’re probably going to turn it off and stick to 1024 for the next release to allow us to concentrate on developing functionality without worrying about two different layouts.

By: Chris Heilmann

Chris Heilmann — Thu, 26 Jun 2008 17:45:39 +0000

@newz2000 yes, that is a problem. You can do a lot with tiling background images horizontally though. And by not creating rounded corners with images but let IE have normal corners and use CSS :)

By: newz2000

newz2000 — Thu, 26 Jun 2008 16:46:38 +0000

A problem with layouts that change size is that it’s hard to optimize the graphics for the pages. For example, if you assume an 800px wide browser you’ll create the graphics small enough to fit that size. Make the size of the layout wider and the image looks puny.

Optimize your images for a 1000px layout and then shrink its width and you get images that push out the side of your column (or other similar problems).