Cool Hover Effect

The link above provides a nice hover effect, done with CSS and a tiny bit of javascript.

The approach is to use two divs. The outer or container div has a background image assigned through CSS. The inner div contains the text, and is hidden (display:none) on page load. The inner div uses a white background, with opacity to mute the background image and make it easier to view the image.

On hover, the inner div is changed to display:block.

Both divs have an id and class. The outer div id is required to assign the background image, the class is used to set float:left, and any other common attributes. The inner div id is used to identify it in the javascript, so the display attribute can be controlled, and the class is used to describe and position the text and opacity.

The code was written to run within a loop, hence the 1 on the ids.

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>';