Debugging Web Pages in IE

Tricks for debugging web pages under IE, if you don’t have any tools.

  • Comment out all but the code that doesn’t work. Often the code that’s not working is broken because of something else.
  • Have a separate CSS file, just for IE
  • Use alert to halt javascript execution. This lets you see which command was executed prior to the failure.
  • If you have a complex page, use View Source, then paste the text into a file under vi. Use grep “<div” | wc -l, and grep “</div” | wc -l to count the number of open and close divs.
  • If you are using a template language such as Smarty, hard-code values for quick tests.
  • Be sure to clear the cache, aka delete the temporary Internet files. Otherwise, CSS and javascript changes may not take effect.
  • Refer to w3schools.com to check for supported attributes for various browsers.
  • Be creative. If .style.display=’none’ doesn’t work, try removing the node.
  • Limit the versions of IE you will support, and alert the user. IE6 is a good starting point.
  • Accept some problems. For example, IE6 and Apache sometimes have trouble with .png transparency. Either make those images a different filetype, or allow them to display as the server delivers them and the browser displays them. It is not worth striving for perfection to support software that will eventually become obsolete.
  • Use server-side logic to deliver the best code for the browser. Again, this should be limited to that which is absolutely necessary, but it is often easier to prepare the page well on the server, than to adjust it once it has been delivered to the browser.
  • Use FireBug. It is bundled with dojo, and probably available as a stand-alone component.

Polished UI - Cost Effectively

Tactics to produce a polished (web) user interface, in a cost-effective manner.

This is different than the design, in that these issues are related to the user’s interaction, rather than the visual presentation. For example, the visual presentation would include the page layout, images, graphics, choice of color, attractive menus and page navigation. User interface is more commonly a part of applications, and is intended to help the user accomplish what they must do with the application. The user interface must be fairly easy to understand, and should be polished to present a professional appearance.

  • Start with a toolkit and if possible, a theme that works with it.
  • Find an icon set. The link above is excellent. You may need more than one set, and, since you only need to purchase it once, it is worth choosing carefully. Be aware of any license restrictions.
  • Be creative. If you can’t find the ‘perfect’ icon, use a keyboard character, or a different icon.
  • Keep it simple.
  • Disable controls the user can’t use, based on the current state of the page.
  • Remember the functionality probably takes precedence over the UI. When pressed for time, get it working, then make it pretty.
  • Limit the list of supported browsers. IE6+ and FF2+ is a good starting point.
  • Keep track of the time spent per page. This will allow you to give better estimates, and help management understand the costs of the project.
  • Donate to support any free tools you use.

dojo Form Demo

This is a very simple demonstration of a dojo form. Please use ‘View Source’ to view the code.

Supporting server-side PHP.

json.php

Returns the submitted input. Demonstrates a ’successful’ transaction.

<?php
header('Content-type: application/json');
echo <<<END
{"sText":"{$_REQUEST['sText']}"}
END;
?>

error.php

Returns a 503, service not available.

<?php
header("HTTP/1.0 503 Service Not Available");echo 'Server side error';
exit();
?>

timeout.php

Sleeps for 3 seconds to force a timeout.

<?php
sleep(3);
?>

PHP and javascript timestamper

This is an extension of an earlier script to demonstrate the difference in execution time of preg_replace and trim.

The objective of this demonstration is to show a quick time check method to determine the following:

  • Time required for PHP to process all statements
  • Time required for javascript to process all statements

This code is valuable for complex pages, specifically RIA pages, to assist engineers in finding ways to make the page display more quickly.


/* First line of the PHP script */
$fStartPHP=microtime(true);

/* Beginning of the HTML */
echo '<html>';

/* This captures the time the first javascript statement was executed */
echo '<script>var d=new Date();var jsStart=d.getTime();var jsEnd;</script>';

/* This captures the time the page has finished loading.  If other code is executed prior to the page being considered fully rendered and functional, the EndLoad function should be called after the last statement */ 
echo '<script>function EndLoad(){var d=new Date();jsEnd=d.getTime();jsElapsed=jsEnd-jsStart;document.getElementById(\'jsStartDisplay\').innerHTML=jsStart;document.getElementById(\'jsEndDisplay\').innerHTML=jsEnd;document.getElementById(\'jsElapsedDisplay\').innerHTML=jsElapsed;}</script>';

/* Body tag */
echo '<body onload="EndLoad()">';

/* At the end of the PHP script */
dd
$fEndPHP=microtime(true);
$fPHPElapsed=$fEndPHP-$fStartPHP;
echo 'PHPStartTime: ';printf("%f",$fStartPHP);echo '<br />'."\n";
echo 'PHPEndTime: ';printf("%f",$fEndPHP);echo '<br />'."\n";
echo 'PHPElapsed: ';printf("%f",$fPHPElapsed*1000000);echo ' microseconds <br />'."\n";
echo '<hr />';
echo 'HTML/JSStartTime: <span id="jsStartDisplay"></span><br />'."\n";
echo 'HTML/JSEndTime: <span id="jsEndDisplay"></span><br />'."\n";
echo 'HTML/JSElapsedTime: <span id="jsElapsedDisplay"></span>&nbsp;microseconds<br />'."\n";
echo '</body>';
echo '</html>';

Great Viral Marketing

This link allows you to enter a name and an email address and makes a great video promoting the person as a Presidential candidate.

The whole concept is excellent for the following reasons:

  • It is fun, and funny.
  • It is timely.
  • It is free.
  • It encourages people to enter their friends’ name and email addresses.

Unfortunately, they don’t have a free demo, so you can see the final product. This is one that was posted on YouTube.

The company gets people to see their product and have fun. They also get contact data for people.

It may be worth considering this type of marketing if you have a budget that allows it. Humor is valuable, but the real key is to engage the site visitors and to allow them to share your site’s content with their friends, without appearing too agressive. For example, if you sell hats, you could allow people to upload their photo and see one of your hats on it. Give them a link to the image and they can share it with their friends. It is more fun than ‘Tell-A-Friend’, and does a better job of highlighting your products.

This can be approached in several different ways, depending on the type of product or service you provide, and the type of people you want to attract. It can be timely, as the news3online service is, or product based, such that with new products, a new marketing adventure is offered. Publicizing the scheme might be done through PayPerClick ads - with little demos.

It is extremely important to ensure you never abuse the information entered. It may even be good to destroy it after it is used. The objective of this system is to bring people to the site, not to initiate further interaction. If you have a good site and quality products, the site visitors will see the value.