9-slice scaling in HTML

written by Clemens Lang at May 15^th 2008, 16:59

The Adobe Fireworks help has a good article explaining 9-slice scaling. Now imagine you’re designing a liquid width layout for a website - wouldn’t it just be great if it would scale as it was 9-sliced? Here’s how:

Slicing

First you need one image for each of the outer areas in the 9-slice grid. That’s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don’t need an image for the center, since it’s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we’re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.
After all, the slicing looks like this (forgive me the typo):

HTML code

Here’s the HTML you’ll need. Read the comments in the code for explanation.

<div class="content">
	<!-- this is the overall container -->
	<div class="content-top">
		<!-- this contains the top left, top right and top center slices -->
		<div class="content-top-left"></div>
		<div class="content-top-right"></div>
		<!-- notice the top center or top repeat slice needs to be at the end -->
		<div class="content-top-repeat"></div>
	</div>
	<div class="content-repeat">
		<!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me -->
		<div class="content-repeat-left">
			<div class="content-repeat-right">
				<!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it -->
				<div class="content-repeat-center">
					<!-- /** this is where you'd place the content **/ -->
					<div class="content-repeat-clearfix"><!-- this will prevent problems with floated stuff within the content --></div>
				</div>
			</div>
		</div>
	</div>
	<div class="content-bottom">
		<!-- this contains the bottom left, bottom right and bottom center slices -->
		<div class="content-bottom-left"></div>
		<div class="content-bottom-right"></div>
		<!-- as above the bottom center div must be after the bottom left and right divs -->
		<div class="content-bottom-repeat"></div>
	</div>
</div>
 

Read the rest of this entry »

Posted in Web Development, Design, PHP, XHTML & CSS | No Comments »

Up or Out: employees in IT companies quitting

written by Clemens Lang at Apr 30^th 2008, 21:14

I just read an article in Alex’ Soapbox on IT professionals and their motives to quit a job at a certain company. Having just finished a 6-month-internship at a local new media agency this article came right on time. I don’t want to judge neither the article nor the company I’ve been working at, but the theory mentioned in “Up or Out: Solving the IT turnover crisis” is absolutely worth reading if you haven’t already.
Personally I think Alex Papadimoulis’ findings are a bit too black-and-white (as he admits near the end of the article: “Obviously, this article has painted some incredibly broad strokes, the largest being the stark dichotomy between skilled and unskilled developers, and the lack of distinction between organizations.”), but they are true nonetheless.

Posted in Internal, Web Development | No Comments »

The smaller the error the bigger the bug

written by Clemens Lang at Apr 26^th 2008, 12:05

So we had that navigation tree at work consisting out of two category levels, for simplicity let’s call them Level-1-Category and Level-2-Category. Level-1-Categories could contain other Level-1-Categories and Level-2-Categories, while Level-2-Categories could only contain Level-2-Categories. The navigation was built, caching was implemented, everything seemed fine from a logic viewpoint, however it behaved weird where it would sometimes display the Level-2-Categories in a particular Level-1-Category and sometimes not or in different order.
When we finally found the bug (after hours of debugging) the scales fell off our eyes:

<?php $cacheID = md5($level1Cat->id.$level2Cat->id); ?>

Now imagine what happened when you had a $level1Cat with ID 1 and a $level2Cat with ID 12, that would write it’s cache to md5(‘112’); - and trying to open a $level1Cat with ID 11 and a $level2Cat with ID 2 it would read the cache md5(‘112’);. Unfortunately these classes did have the same interface, so no errors were thrown.
Changing the code to

<?php $cacheID = md5($level1Cat->id.'-'.$level2Cat->id); ?>

resolved the bug and finally fired the closing time-event for us.

Posted in Internal, Web Development, PHP | 1 Comment »