People who know me professionally are fully aware of how annoyed I get when trying to build web applications that are truly cross-browser compliant.  In my current position, I do a lot of web programming in PHP, HTML and JavaScript.  HTML is a no-brainer and PHP (when using AJAX) is usually very straightforward.  Making it all look pretty with the bells and whistles that make the web application work well for the users takes a lot of Javascript and a lot of time.

So, I get very frustrated when I spend a lot of time getting something just right only to find out that when I try it out in another browser it doesn’t work right.  It renders wrong, or where one browser was willing to forgive a small HTML problem, another browser just dies.  For instance, I had a coding issue that caused an extra closing BODY and HTML tag at the end of the document.  For some reason, in IE8 that caused the browser window to hang and the process to hog 50% of my CPU.  It’s the little wierd stuff that can make for a very long morning.

Since I use a lot of JavaScript, speed is important.  I mainly develop using Chrome, since it’s clean and fast, with very little extra stuff to get in my way.  I keep it free from plugins and extensions so that I don’t slow it down any.  It’s JavaScript engine is nice and fast, and Chrome as a whole generally does what is expected.  If I have a problem that isn’t obvious in Chrome, I pull up Firefox to take a look, since it’s helpful sometimes to nail down a difficult problem by looking at the error messages from a different browser.

My biggest headaches, however, have been with Internet Explorer.  Because of some legacy vendor web apps, we have people in our company with IE6, 7  AND 8.  They can’t be upgraded or they’ll break other things.  When I developed my web app with lots of JavaScript, I didn’t know that IE6 and 7 are basically worthless in this area.  They’re just horribly slow.  Code that executes in 4-5 seconds in Chrome would take over 30 in IE7.  IE8 is better, but still pretty slow in comparison to other modern browsers.  IE9 is rumored to be vastly improved, but it’s not going to be available on WindowsXP, so that’s not a solution.

So, I decided to do some testing.  The results show what everyone already knows, which is that IE8 is just sadly lagging behind the rest of the pack. What’s interesting to me, though, is that Firefox is starting to fall behind as well, especially in speed.

SunSpider JavaScript Performance

Sputnik JavaScript Compliance Test

If JavaScript performance and compliance is an issue, stick with Chrome, Safari or Opera.

Oh, how I loathe having to deal with Internet Explorer.

My big web application that I’m always working on was recently released to our internal users in it’s version 2 state.  That meant everyone got to use the new modal windows that I had implemented.  Why modal?  Well, I was trying to avoid using any pop-up windows for the usual reasons – pop-up blockers, losing the pop-up behind the main window, etc….  I also wanted to learn some new techniques, and being able to program modal windows seemed like a cool thing to know.

Well, the users weren’t as receptive to the modals as I’d have liked.  I think if I’d have had a lot more time to spend on them to improve their usability, it would have been fine, but time isn’t something that I have in my job.    So, version 3 is being developed to replace the modals with pop-ups.

One of the first things I needed to do was to re-code the Javascript so that when the user clicks on a report, instead of it loading into a DIV and then displaying the DIV, it opens another browser window and writes the report into that window.  No problem, easy to do, and eliminated a LOT of the modal code that I had written.  Chrome looked good, so did Firefox.  Not so much IE8.

I’ve known for awhile that IE6 and IE7 don’t handle Javascript very well performance-wise.  I use a jQuery plugin called Tablesorter to make my tables sortable and to zebra-stripe the rows.  When users with IE6 or IE7 ran large reports, they’d often have very long wait times as the Tablesorter did it’s thing.  IE8 was a big improvement in that area.

This time, however, something was wrong.  Tablesorter was working well in Chrome and Firefox, but in IE8 is was just crawling.  Simple sorts were taking close to a minute and the zebra-striping was being done one row at a time, so slow that they could be seen.  I checked and double-checked my code, but was stumped.

Well, I’m happy to report that even if I don’t quite know WHY it has a problem with it, I found a way to fix it.  In my original code, I would launch the window, write HTML (including the table) to the window, and then I’d execute the tablesorter function using a jQuery selector referencing the table ID and the pop-up window document reference as the scope.  So, essentially my javascript was executing in my main window but was modifying the DOM of the client window.  It would do it, but was incredibly slow.

After many different ideas, I settled on this.  I launch the window and write to it just like before, but now I include a SCRIPT tag in the header pointing to a javascript file.  Inside that file I use the $(document).ready() to trigger Tablesorter against the table when the DOM has loaded.  Since the javascript is running inside the client window and also accessing the client window’s DOM, the speeds are back to where they should be.

I’m assuming the whole problem has something to do with how IE8 passes the memory references back and forth between window instances, but I can’t be sure.  I did a lot of searching on the net to try and find anyone explaining this, but had no luck.  Maybe someone will read this article and explain it to me.  All I know is that Chrome and Firefox had no problem at all.

I spent WAY too long today fighting an issue that turned out to be fairly obvious in the end.

I’m working on a web-based application that gives our internal users a front-end to our billing system for quick access to support information.  I’ve recently re-worked the whole thing to take advantage of modal windows, which has greatly cut down on a lot of the navigation time needed by our techs to find the information they need.

Anyway, one of the items I’ve had on my list to work on is to make it possible to print the contents of the modal windows.  With the old version of the app, the info would have populated the entire browser window and was easy to print.  With this new system, a window print would obviously print way to much.  In addition, it wouldn’t print everything in the modal window, just what was currently visible due to scrolling.

Rather than re-invent the wheel, I decided to try a jQuery plugin.  After reviewing what was available, I picked jQuery Print Element.  It was a fairly recently released plugin, which hopefully meant it would be compatible with current browsers.  It also had some flexibility in use, which I thought would be helpful.

I downloaded it, added the relevant <link> and Javascript code to implement it, and voila!  When I clicked on my “Print” link, the contents of the modal window appeared in a popup window, and a Print dialog opened.  When I selected to Print or Cancel the dialog, the popup window closed automatically.  Perfect!  Well, almost….

Within the layout of the modal window were a few tables – YES, for tabular data.  The problem was, their font size was much larger than expected.  I used Chrome Inspect Element to look at the CSS and inheritance, and it just didn’t make sense.  My modal window tables were inheriting a font-size of 70% from the main <body> tag and looked normal.  My popup window, in contrast, claimed to be getting a font-size of medium from a user agent stylesheet.  Wierd, especially since when I double-checked my stylesheets there definitely wasn’t any other references to font-size.

I went off on a tangent for awhile looking at the <link> media option, mainly because I’ve never had to worry about it before and it was set differently in my modal window code than in the popup code.  No luck there, but it was worth it to learn more about that feature.

So, right before time to call it a day, I figured out what was wrong.  The HTML generated by the plugin didn’t pay any attention to my DOCTYPE that I used on my main application code.  In fact, it didn’t set DOCTYPE at all, so apparently the browsers were running in “quirks” mode.  In quirks mode tables don’t inherit font-size attributes from their parent tags.

A quick hack to insert the DOCTYPE code into the plugin and things were happy.  Now I just need to go back and build that into the plugin to be automatic and duplicate the DOCTYPE from the main browser window and submit it back to the author.

All in all, a frustrating problem, but when it worked right at the end, it was a sweet victory!

My latest programming project has been fairly interesting.  Part of the project involved a cron script that opened a telnet session to a remote device, gathered information, and logged all of the info to a text file for review.

The script has since been fleshed out.  Now it pulls a list of devices from a mysql database.  It loops through the devices, gathers the information and saves the data to another table in the database.  A web interface has been created that allows an administrator to make configuration changes to the settings that are stored in the device table.  It also gives the user the current device status and the ability to search for historical information gathered from the devices.

Years ago, I would have ended up with lots of individual scripts, all written in Perl and HTML.  It would have been clunky and ugly, and I would have been unhappy with the results but unsure what to do about it.

These days, I’m able to combine many different tools, all of which have different uses.  The cron script is written in Perl, mainly because the original script was in Perl and I didn’t want to start over on it.  The web interface is in PHP.  I use Javascript to do some neat DHTML stuff, like adding new rows to tables and switching between DIV tags.  The backend databases are Mysql for storing the data and Progress (I pull information from our billing system to cross-reference and find user name and other information).

Yes, those are a lot of different tools, and yes, it’s hard to keep up with all of them and be proficient in all of them.  However, that’s what it takes to be able to produce quality, professional-looking web-based applications.  I know I’m much happier with my final results than I would have been several years ago.

I haven’t been posting much lately, mainly because I’ve just been so ridiculously busy.  I’ve recently shifted gears in my job, moving from network engineer to software developer.

I’ve done some programming in my time.  Lots of administrative-type scripting, some utilities, and even some web applications.  This project is a little bigger, however, and I’ve actually got someone to work on it with me, which is new for me.  I’ve always been on my own, so it’s going to be a change to have someone else involved.  I’m looking forward to it.

I expect the project to be primarily PHP for the front-end, maybe some straight Perl for certain back-end tasks, Javascript for things like error-checking forms before submission, and MySQL on the backend for the data storage.  Really the only option in all this was whether to use MySQL or MS SQL Server, which we have access to, but I prefer the openness of MySQL.

We’ll also be using something that I haven’t dealt with a lot, which is style sheets.  I know, there’s nothing magical about them, but they’re new to me, ok?

But first, I need to get the tough parts going.  The data dictionary and data relationship diagram for this thing are going to be pretty big.  I’m trying to decide whether to focus on one aspect of the project at a time, or whether to design it all first and then start coding.   Either way, it’s going to be a challenge, but that’s what makes it fun!

Had a fairly interesting day today.  Found an ATA PCMCIA card still inserted in a 7206VXR G1 that didn’t need to be there, since the G1 engine uses CompactFlash.  So, I’ve got that inserted in my 7206VXR w/ NPE400, just need to log into it remotely, download the new IOS, and reload. Found out that [...]

© 2010 Virtual Adept Suffusion WordPress theme by Sayontan Sinha