web notes - a blog

This is a list of implied requirements recommended for all web pages.

• Page should render properly in all supported browsers. Identical is not required, but equivalent is.
• Client side code (javascript) must execute properly in all supported browsers.
• Site visitor must be alerted if they attempt to navigate away from the page without saving their changes, or if the session timed out and their changes have already been lost.
• If AJAX is used, authentication and access control must be applied to all requests. Client must handle server responses to these conditions gracefully.
• Client must validate the data fully before submitting it to the server. Client should alert user during entry if data is invalid. Think dojo.
• Server must perform appropriate escaping on all incoming data to avoid SQL injection and commandline attacks. Server should validate data with the same criteria as the client to limit the possibility of modified form data.
• User passwords should never be sent to the browser. Password recovery should be performed by generating a new password and emailing it to the account holder. User email addresses must be unique to support this.
• Options which are unavailable should be displayed differently than those that are available, ideally they should not be displayed at all. Inputs which cannot be modified should be displayed in such a way that the user understands the information cannot be changed.
• Layout should be managed primarily with CSS.
• Colors should be specified in a separate CSS file to allow the color scheme to change quickly.
• The majority of the layout should use divs, with tables used where appropriate.
• Only those files required to display the page should be delivered with it. Pages with complex CSS requirements should be supported with dedicated CSS files which are only loaded with that page. The same is true for javascript. Those files should be cached at the client.
• Care must be taken to ensure configuration data, particularly access information such as database name, username, and password cannot be displayed through a browser or visible to unauthorized users.

There is so much awesome open source code available, and some of it is very powerful. To build a powerful, cost-effective solution, the best approach is to use open source code to provide the bulk of the functionality, and then extend or integrate the remaining elements.

The complexity is in gracefully combining elements from diverse sources into a cohesive unit, and ensuring the design is manageable in the event that more than one application is used on the site.

The choice of components is extremely important. I think the only way you can really decide is to try them out.

Fast AJAX
To speed up an AJAX page load, particularly with a toolkit such as dojo, you can do the following:

• Set the cache headers on the server for ‘far-future’ dates on toolkit files, and any other files that don’t change often. Use the directory name and a FilesMatch directive
• Break the HTML/CSS/javascript into separate files, and set the caching properly
• Use compression (mod_deflate). If you have a large initial page load, followed by many small AJAX requests, the compression overhead may not be worth it.
• Use dynamic loading to defer the loading of content until it is needed where possible

Use the YSlow plugin for Mozilla Firefox to check for other performance improvements.

Dual Page Population
Often there is some server-side logic that runs the same for the initial page load and later AJAX requests. One approach is to send a flag that indicates whether it is an AJAX request, and to use json_encode followed by an exit() to return the results for AJAX, or Smarty variables to return a full HTML page.

I wanted to break my page into 6 content areas, with 5 where the content could be directed by one, and from cross-links from the other.

I pursued iframes, but the site architecture didn’t work well with it. I tried dojo’s content panes and was really impressed. In addition - these panes allow delivery of standalone HTML, while applying the page’s CSS. The integration is very simple, and polished, and extending the micro page to a full page would be easy. They also resize, so the user can adjust the page to meet their needs.

One interesting note, if you would like the panes to scroll, load the content in at page load time. Works great!

Great resources:

Mozilla/Firefox - plugins Firebug, CSSmate/CSSedit, YSlow
XAMPP - http://www.apachefriends.org/en/xampp.html