Closure vs Rewrite
At The Rich Web Experience 2008, Douglas Crockford gave an example of a function which would take an integer and return the word for that number by retrieving the word from an array. He started by having the array created globally and the function would access it. This is bad because the array is global. He then created the array each time the function was called. This is also bad because you are creating the array repeatedly. Finally, he did it with a closure, creating the array in a self executing function on page load and returning an inner function which can access the array. It was similar to this, minus the alert and validation: Read more…
CSS Based Design is not Div Based Design
The title is a quote from Molly Holzschlag from her CSS for Developers presentation at Rich Web Experience 2008 in Washington DC. She was asking the group who still uses tables for layout and one person said they were in the process of changing everything to divs. Molly, seeming a tiny bit frustrated from hearing this to many times, then made the proclamation that “css based design is not div based design”. I clapped, no one else did. Read more…
What happened to the menu tag?
We all try to write our markup to be as semantic as possible. We use proper heading tags, paragraph tags, strong instead of b, em instead of i, and tables only for tabular data. Yet when it comes to our sites “navigation”, we use an unordered list. Read more…
An issue and a fix
Firefox 2.0.0.8 breaks some of the layouts. It breaks on the 3 column versions that use negative margins that are the same size or bigger that the element it is on. It looks like there have been at least 3 bugs raised in the Mozilla bug tracker for this issue and it is being actively worked on. The main one is here: https://bugzilla.mozilla.org/show_bug.cgi?id=400406
One solution would be to inject dynamic content after the container using the :after pseudo-element
container:after{
content: ".";
height: 0;
clear: both;
visibility: hidden;
display: block;
}
This seems to fix the issue but is not as clean. I have only done some quick tests with this and have not looked at it in Safari.
Update: I knew there was a name for this! It is called the clearfix method.
Liquid Spaced Out Columns
In the previous Space Out Columns post I promised to follow up with some info on liquid layouts, so here we go: Read more…
Spaced Out Columns
In the comments for my A List Apart article, Fredrik Frodlund mentioned he was “not sure it would work if you use blocks that have white space between them
”. There actually was a demonstration of this in the three column example with the nested two column layout. I only quickly commented on it, so I thought I would expand on it here. Read more…
The new phone book’s here! The new phone book’s here!
Check it out: http://alistapart.com/articles/multicolumnlayouts
This site uses a combination of the techniques presented in the article. I have a red border on the container and a gray border on the body. By overlapping them, I get the effect of having a border around the rail.
Why alt tag
So many times when people talk about web site accessibility and SEO, one of the main things mentioned is to make sure all of your images have an ‘alt tag’ to provide descriptive text for screen readers and search engines. Even Google says this in their Webmaster Help Center, in the Webmaster Guidelines and the How can I create a Google-friendly site sections. Of course what they mean is alt attribute. What I hope this site can do is clarify some of the confusion with web development, and maybe present some new ideas and techniques. Thoughts and ideas are welcomed.