How not to Debug a Web Application

I volunteered to translate a WordPress theme from English to Hebrew over the weekend. I estimated that it would take about an hour. My estimation was based on these excellent instructions, that describe the conversion in rather technical terms. Plain and simple.

Boy, I was wrong.

First, I decided to install WordPress on my laptop. It’s just “sudo apt-get install wordpress”, right? Wrong. You need a couple of extra tweaks. But the real problem was when my Firefox browser refused to show the blog web pages, claiming that “.PHTML” is a binary file. I googled up the problem and found a couple of hack solutions. Without reading too much, I pasted the code into some config files (in admin rights), and it didn’t work. Only then I noticed that I was not reading the solution, but a question asking “this code doesn’t work, why?”. My bad. I googled some more, installed and un-installed packages, and I was half-way to trashing my local Apache server when I noticed a post saying that “It might also be a browser cache problem”. Clearing Firefox’s cache solved the problem immidiately. The problem was probably already solved for some time, but I didn’t noticed it because the browser showed me an old error page.

Conclusion number 1: When debugging a web application, disable your browser’s cache.

Conclusion number 2: Short-wiring google search results and your config files is a bad idea. There should be a safety mechanism that identifies the google-copy-sudo-paste sequence, and pauses the last step with this dialog box: “Are you really sure you want to run in admin priviledges something you’ve just googled up?”. The option “Yes” should become enabled only after 10 seconds. At that time you can actuall read the web page.

Having solved that, I started to convert the template. Funny thing about CSS: It doesn’t use “line-start” and “line-end” anchors, like Java’s Swing, but absolute left and right directions. This turns converting CSS code to work right-to-left from left-to-right to a non-automatable job. It was supposed to be a simple Perl script, but actually you have to scan each line and decide if it is left-because-its-left or left-because-its-line-start.

Whoever designed CSS was obviously totally Euro-centric. The underlying assumption that all the languages in the world are left-to-right is embedded so deeply into HTML and CSS it’s really hard to ret rid of it. There’s currently no real alternative to it, but when we’ll re-write the internet, those crappy HTML standards just has to go.

Conclusion number 3: If you need to convert some CSS file, take a deep breath. No Perl hacks for you. You’ll have to scan every line.

Posted Tuesday, December 9th, 2008 under Programming.

Tags: ,

One comment so far

  1. Tip#1: use FireBug – this way you only search for HTML layers that have a layout problem (or that are assigned to be LTR/Left-Aligned)

    Tip#2: FF is not the only problem – big brother IE is watching too (and will give you a hard time)

    Tip#3: sort of a summary, a simple perl script is not even an option I’d consider. not everythis the is marked as float:left should be changed to float:right – this might lead to ‘over-CSSed’ code…

    Tip#4: always seek for the cleanest template you can find (CSS/HTML-wise) & use it as reference for a better coding…

    good luck ;)

Leave a Reply

Security Code: