Logic’s Last Stand

January 6, 2010

An Ugly Side of Web Development and Design

Filed under: Computers — Tags: , , , — Zurahn @ 11:02 pm

I’ve got time to kill, so indulge my ramblings.

For those who don’t know the world of web development, it’s probably doesn’t work the way you’d think. There are three aspects of web development: Presentation, Logic and Data. Presentation is HTML, CSS, JavaScript — anything that’s run on the client computer; logic is the server side deciding what it needs to do when you visit a page, and data is whatever’s stored on that server to actually provide the user.

The tricky thing here is that you can call anything done on th server-side programming, and JavaScript is a programming language, but the primary aspects on the presentation side — HTML and CSS — aren’t programming languages; they are markup languages. Browsers follow rules that say how the HTML and CSS are supposed to look when used in specific ways, but sometimes those rules are ambiguous, sometimes the browser is wrong, sometimes the action is unspecified, and sometimes the browser just hasn’t implemented the functionality.

This leads to some weird and unique problems and solutions. For example, there is a generic container element in HTML called a DIV tag. You can put anything you want in a DIV, and you can use CSS to style it so it has, say, a black background and white text.

Well, if you say “height: 100%”, that doesn’t work as cleanly as one would hope. If you take a look at The VG Press forum, you’ll see the user information in a sidebar on the left with a darker grey background and a border to the right. Because you can’t just set the height of the sidebar to 100%, how do you get a perfectly flush border and background like that? You have to do a clever, silly and stupid workaround wherein the DIV that contains the sidebar DIV is given a background IMAGE containing both the background colour and border, repeated vertically only. Weird, but it works.

Let the chain reaction begin, though, as a big feature I’m working on is full customization of presentational aspects including colours. Remember that the sidebar background and border is an image, so you can’t just change the colour — what then?

After several weeks of not knowing how to solve this, I now have a solution. In PHP (a server-side programming language), you can create images. Thusly, how I could get around this would be to generate a new sidebar image with the colours specified and cache the image on the server. So if then user specifies a sidebar background colour of #FFFFFF (white) and a border colour of #FF0000 (red), when the user saves his settings, the server receives the request, generates the image, and saves in on the server as FFFFFF-FF0000.png. Then if another user chooses the same colour combination, that file is used, otherwise a new one is generated. Automatic, transparent, efficient and completely obtuse. Gotta love it.

Blog at WordPress.com.