Monday, October 01, 2007
eXtreme Programming, Tables vs Divs & Windchill
So I am undertaking a new project with Fortress. It is a web application, and the team is being assembled, and things getting underway. My role is mainly from a management role, and to give some direction as to how to run a software project. I started out with some recomendations, and talked with Aaron before his last trip. That discussion changed my mind on how we would run things. I'm used to a waterfall design approach (go figure working on the Space Station, and XM Radio). He lent me a book by Kent Beck. I have read the first section, and keep trying to make time to finish it. I'll have to the next couple of days before Jonathan comes out from down east.
It is all about eXtreme Programming development, and test-driven designs. It is a very good read, and I highly recommend it to anyone working in small project groups. Even for larger ones, but for now I'm in the small fish bowl group. ;) I won't wreck the enjoyment of reading it for you, but as a programmer, architect, project lead, project manger, and all of my other roles I have found usefulness in every facet that I take on. It it written at a very personal level, and does not make you feel like you need a PHD in english to read it. I especially like the short chapters (which is in tadnem with the methodology) ... deal with pieces in small chunks, and you will be much more productive.
So that was my positive. Now I get to bitch about something. For years there is the argument between web developers about the use of tables or divs for layout. "tables are for tabular data!". Let me tell you why "programmers" like me tend to fall abck to tables all the time. BECAUSE THEY RENDER PROPERLY!
We spend much less time laying out parts of the page in a table than we ever could with CSS and divs. It is not because we do not understand divs, not is it because we are not driven to learn something different. I have spent years doing web development, and I cringe every time I start with a new layout, and making things "look" the way I want them. The biggest issue is that it never looks the same cross browser. Sure ... you eventually get it to what you want ... usually after 2 pots of coffee, and a pack of cigarettes, lots of yelling, hair loss ... etc. etc.
With one of my projects I decided to port some old code to using divs for the layout. It is basically a simple 2 column form with labels on the left, and the form elements on the right. Seems easy right? Even writing this from scratch would have taken me a few minutes with tables. I spent hours making it render properly using divs, and CSS. Of course the problem was IE. The problem is _always_ IE. I had it render perfectly as I wanted (and expected) in Mozilla, Firefox, Konqueror / Safari ... I think even Opera got it right. After several experiments, and loads of research I discovered that my layout and code triggers a bug in IE because of it's broken float model. The bottom line is that when an object with fixed width is next to a floated object, inside a nested div, the parent div is not rendered first, but last, so the left hand column is actually rendered behind the parent.
Here is the screen shots to explain :
Form in Firefox : yay to firefox
Form in Konqueror : yay to KDE
Form in Internet Explorer : boo to Microsoft
Is that not enough to drive someone mad ... I don't know what is. Because I happen to be a programmer, and I consider myself a fairly intelligent guy, I did manage to fix this. I changed some layout models. Back to the original point. At least with tables I could quickly render (and properly) the layout in all browsers ... they seem to get tables right. Using divs however ... it seems to have proven that the concept to browser developers at Microsoft was just to difficult to comprehend. Stupid broken float model.
Last week my buddy John came over with a treat. Our hometown friend (I went to Elementary school with Heath), had been in a movie called "Wind Chill" (starring Emily Blunt). It was never released in theatres in Canada, and went straight to DVD. John purchased it on Amazon, and it was a big event for us. Heath was in the movie for all of 3 seconds! We phoned him up. The scenes were edited out, the conversations, the car crash. Basically it was down to him and the other guy who died showing up as ghosts. I must admit ... it was a really odd movie, and a definite B horror film. But I have a movie star friend now. That's awesome! Best quote in the movie ... "If you ever get in a fight at a bar with a guy, smash him in the face with a bottle cuz then his eyes will fill up with blood and snot and stuff". HAHAHAHA ΒΆ 9:06:00 AM
It is all about eXtreme Programming development, and test-driven designs. It is a very good read, and I highly recommend it to anyone working in small project groups. Even for larger ones, but for now I'm in the small fish bowl group. ;) I won't wreck the enjoyment of reading it for you, but as a programmer, architect, project lead, project manger, and all of my other roles I have found usefulness in every facet that I take on. It it written at a very personal level, and does not make you feel like you need a PHD in english to read it. I especially like the short chapters (which is in tadnem with the methodology) ... deal with pieces in small chunks, and you will be much more productive.
So that was my positive. Now I get to bitch about something. For years there is the argument between web developers about the use of tables or divs for layout. "tables are for tabular data!". Let me tell you why "programmers" like me tend to fall abck to tables all the time. BECAUSE THEY RENDER PROPERLY!
We spend much less time laying out parts of the page in a table than we ever could with CSS and divs. It is not because we do not understand divs, not is it because we are not driven to learn something different. I have spent years doing web development, and I cringe every time I start with a new layout, and making things "look" the way I want them. The biggest issue is that it never looks the same cross browser. Sure ... you eventually get it to what you want ... usually after 2 pots of coffee, and a pack of cigarettes, lots of yelling, hair loss ... etc. etc.
With one of my projects I decided to port some old code to using divs for the layout. It is basically a simple 2 column form with labels on the left, and the form elements on the right. Seems easy right? Even writing this from scratch would have taken me a few minutes with tables. I spent hours making it render properly using divs, and CSS. Of course the problem was IE. The problem is _always_ IE. I had it render perfectly as I wanted (and expected) in Mozilla, Firefox, Konqueror / Safari ... I think even Opera got it right. After several experiments, and loads of research I discovered that my layout and code triggers a bug in IE because of it's broken float model. The bottom line is that when an object with fixed width is next to a floated object, inside a nested div, the parent div is not rendered first, but last, so the left hand column is actually rendered behind the parent.
Here is the screen shots to explain :
Form in Firefox : yay to firefox
Form in Konqueror : yay to KDE
Form in Internet Explorer : boo to Microsoft
Is that not enough to drive someone mad ... I don't know what is. Because I happen to be a programmer, and I consider myself a fairly intelligent guy, I did manage to fix this. I changed some layout models. Back to the original point. At least with tables I could quickly render (and properly) the layout in all browsers ... they seem to get tables right. Using divs however ... it seems to have proven that the concept to browser developers at Microsoft was just to difficult to comprehend. Stupid broken float model.
Last week my buddy John came over with a treat. Our hometown friend (I went to Elementary school with Heath), had been in a movie called "Wind Chill" (starring Emily Blunt). It was never released in theatres in Canada, and went straight to DVD. John purchased it on Amazon, and it was a big event for us. Heath was in the movie for all of 3 seconds! We phoned him up. The scenes were edited out, the conversations, the car crash. Basically it was down to him and the other guy who died showing up as ghosts. I must admit ... it was a really odd movie, and a definite B horror film. But I have a movie star friend now. That's awesome! Best quote in the movie ... "If you ever get in a fight at a bar with a guy, smash him in the face with a bottle cuz then his eyes will fill up with blood and snot and stuff". HAHAHAHA ΒΆ 9:06:00 AM
