wheresrhys

As I think I may have mentioned, the latest project I worked on I’ve been using the Zend Framework for all the server-side development. Over the last few months I’ve developed a love hate relationship with it. On the plus side it does pretty much everything I need without needing too much customisation, a few of the negatives though are:

• The quickstart in the documentation assumes way too much background information about configuration of a php app and data sources etc. They don’t seem to have considered that a reason many programmers use zend is because they don’t know too much about back-end development and want something to take care of the tricky bits for them. It took ages to get past this stumbling block, with the help of this tutorial (WARNING: The bit on connecting to the database either uses quotes when it shouldn’t or vice versa) and this website with tutorials on various zend components.
• Having said it does everything, there are lots of gaps. I’m sure a lot of thought goes into deciding what gets included and they must get all sorts of requests, but some simple standard things are missing, eg a validator to check a confirm password field. Nevertheless it is fairly easy to write extensions, but the zend documentation site should have a lot more and clearer information on this. Linked to this, there seems to have been very little thought put into building some sort of community to share plugins, unlike jQuery, for example.
• You may have sensed that I don’t have a great deal of respect for the documentation. It’s very sloppy to be frank. There are so few cross-links to different sections, and a lot of the classes contain examples which I found fairly irrelevant, covering a way of doing things unlikely to be used in a real website (eg the examples for querying your database don’t really use the Model-View-Controller structure you’re supposed to use). And, in my view, it’s way too wordy, and much of the text is just waffley clutter; far more so than better examples of documentation, such as php and google maps. The website is also very difficult to navigate.

To fix the final gripe I’ve written a greasemonkey script (my first ever one) to replace the existing documentation layout with one a little easier to negotiate.

Before greasemonkey

After greasemonkey

Every now and then I come across and article where some CSS guru outlines how they structure their stylesheets (main layout elements at the top, all headings together etc.), but I don’t think I’ve ever read any discussion on how to layout the individual elements.

Recently at work somebody, probably thinking they were being helpful, put all my stylesheet selectors in this sort of format

h1
{
   font-size: 2em;
   color: #000088;
}

whereas I much prefer it like this:

h1 {font-size: 2em; color: #000088;}

The reason being that when I’m scanning through a css file I’m generally looking for elements, classes and other selectors, not individual rules. Having each line begining with a selector aids easy scanning. Breaking each selectors rules up into individual lines increases the amount of scrolling you need to do by probaly at least a factor of 5, and decreases the number opf selectors you can see at once – both leading to a lot of time wasted searching for the selector you need to edit.

But everybody apart from me seems to default to the split up style. As far as I can see it’s because in programming a ‘{‘ generally means the potential of nested loops and conditionals, so you need to emphasise the curly bravcket’s depth in the stack. But CSS hardly ever (except for some hacks… which I don’t use) goes beyond one level of curly brackets. So why insist on laying it out that way?

Based on a design developed by snook.ca (a great web design site), which creates a 2-column layout with the page elements in a sensible, semantic order in the source, I’ve come up with this variant, which is pretty much the same, but allows for more flexibility in header design. Seems to work ok in safari, firefox and ie all the way back to v5.01. See it in action.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>
<html>
<title>Efficient 2 column layout</title>

<style>

.wrapper {width:600px; height: 50em;background:lime;position:relative;}
.main {width:500px; float:right;height: 40em;background:red;}
.header{width:600px;position:absolute;height:5em;background:teal;top:0; left:0;}
.content {width:500px;height:40em;background:green;position:absolute; top:5em;}
.nav {width:100px; float:left; height: 40em; background:black; margin-top:5em;}
.footer {width:600px; clear:both;height:5em;background:cyan;}
</style>
</head>
<body>
<div class="wrapper">
	<div class="main">
		<div class="header">
		</div>
		<div class="content">
		</div>
	</div>
	<div class="nav">
	</div>
	<div class="footer">
	</div>
</div>

</body>
</html>