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!

I’ve been using Security Essentials for awhile on several of my home PC’s.  It seems to be pretty solid, and seems to be catching any issues.  My problem, however, is that it seems like it’s slowing the machine down a lot.  It doesn’t seem to be using a lot of memory, and it doesn’t seem like it’s tying up the CPU.  What it’s doing, I think, is slowing down file access quite a bit, effectively making everything slow to start and load.  Shutting off the real-time protection made a drastic improvement on performance.

So, ever eager to find a better solution to a problem, I removed MSE and installed the latest version of Avast.  So far it seems to be much less of a drag on the system than MSE.  Whether it will catch all problems remains to be seen.

H/T to Gizmodo for this one…

With the recent nastiness between Apple and Adobe regarding Flash, this is an interesting comparison of where the major browsers are in their ability to support HTML5 and CSS3.  Click on the image for the interactive version.

HTML5 and CSS3

I think it’s a fairly good estimate that Flash is going to be around for quite some time based on this chart.

In the web application I’m working on, I have a long list of reports that are available to the end-user.  When they click on a report, I create a modal window and display the output of the report in the window. As a part of that process, I use jQuery to bind the “click” event [...]

Finally.  I just finished moving 4 of my websites tonight.  They were moved from a shared server at an ISP to a new dedicated server that I’m sharing with my brother Aaron, who runs Baugher Webmaster Services. All of my sites are pretty straightforward, so the move wasn’t too painful.  They are all WordPress sites, [...]

Why oh why can’t the major web browsers interpret HTML the same?  It sure would make things easier for web designers. For instance, I wanted a table that would have a fixed header but would scroll when it grew outside of a certain height.  In Firefox this is simple – add an overflow style to [...]

As I’ve said before, I’ve recently started working more on the “look and feel” side of web site design.  In the past I’ve done plenty of back-end data processing work, but I always had someone else who could worry about the front-end.  That started to be a little limiting, so I bit the bullet and [...]

My latest endeavor, as if I don’t have enough different things going on, is to try and learn some Ocaml.  For those who don’t know, Ocaml is Objective Caml, which is an object-oriented version of the Caml programming language.  Caml is a dialect of the ML programming language.  So is F# (F-sharp), which is used [...]

© 2010 Virtual Adept Suffusion WordPress theme by Sayontan Sinha