Blog

Front End Development

There is a reason why I prefer to develop things in the back-end of a site, and that reason is because I know the setup of a server if I'm not in a position to dictate it myself. That means that everything just works! A recent dicussion on the PHP General mailing list about CSS highlights the problem with front-end development. Essentially, websites can be viewed on a huge variety of devices, none of which behave the same. The discussion on the mailing list was generally about tables vs CSS for laying out pages. Now, I'm an advocate of the latter, and prefer to keep my code free of tables that shouldn't be there. I'll use tables only for tabular data, and leave it at that. The crux of the issue though, is not developers intent, but support on the part of UA's. I won't turn this into a browser bashing rant as all browsers have their idiosyncracies, but it is well know that some have more than others. Time and again my testing period has been greatly increased because of the problems associated with browser compatibility, as each and every part has to be tested across as many platforms as possible, the sort of test which is impossible to automate.

A recent project I've been working on has fallen foul of browser limitations; namely that of font embedding. The site required that a specific font be used for all the headings on the page. I've mentioned this on a previous post, so I won't go into too much detail here, but even the sIFR library failed me, rendering the font differently across different browsers and not allowing me to adjust the kerning properly to name just a couple of problems I faced. I did have a moment of pure frustration when the op realised I'd been given the wrong font from the family, but that only helped things slightly.

Running out of time to learn sIFR to the level I needed it, and having no other way clear, I fell back onto a last ditch attempt at getting this right. I each character as an indivual PNG in the largest size I needed the letters. The first task was stitching the indivual graphics together to create a single larger image which could be used as a heading. That done, I set about colouring the thing, as the original graphics were black, with alpha-transparency used to give the anti-aliasing necessary. This posed its own problems, and took a fair while to sort out, but eventually I had it done. I'll post the code for that in a day or so.

The whole thing has had me re-evaluating the time estimates I give for projects now, as it's all too easy to find something which has so many unforseen problems that it can seriously effect other areas of the project.