jason

Well, I threw that teaser out awhile back, promising some upcoming write-ups on things like GWT and Eclipse, but like always, things don’t go how I plan them.

Instead of my usual programming, I’ve taken a detour into the land of service orders, workflow, and process flows. I’ve been going to meetings, working on flowcharts, and generally not doing any programming.

Hopefully I’ll have something soon that’s interesting to talk about, since I know no one wants to hear about flowcharts. I sure don’t.

I haven’t posted in awhile, mainly due to being distracted by the hot weather, plenty of other work to do, and politics.  However, I plan to write some new articles soon.  Topics that I’ll be trying to cover:

Google Web Toolkit

Eclipse IDE

JSON

Lua

and maybe some others.  So check back in a few days or so!

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!

Just a quickie today, since I haven’t posted in awhile and I need to get going.  I just wanted to say a few words about reading other people’s code. It seems that I never see code that’s been commented, as least not commented enough to understand what it going on.  I end up having to [...]

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 [...]

Now, those of you that have been doing web design for years, please don’t make fun of me for this one.  Bear with me, I’ve been a network and unix admin for many more years than I’ve been a web designer. Anyway, I’ve been working on the new version of my web application at work. [...]

I learned a hard lesson about document.write() today.  I’ve been working on a form that upon submission opens up a new browser window and then injects a bunch of HTML into the window.  It seemed like a simple thing at first, but I managed to make it complicated for awhile until I figured out what [...]

HTML5 and CSS3

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. I think it’s a fairly good estimate that Flash is going to [...]

© 2010 Virtual Adept Suffusion WordPress theme by Sayontan Sinha