Category: "HTML / CSS"

Super HTML Lists

Using ul and ol for lists with XHTML is nice, but for lists that include a short title, dl is a great option.

The code below produces a nice list, where Term and Word are bolded, and Definition and Value follow on the same line.

<style type="text/css">
dt{clear:left;float:left;width:50px;font-weight:bolder;}
</style>
<dl>
<dt>Term</dt>
<dd>Definition</dd>
<dt>Word</dt>
<dd>Value</dd>
</dl>

Customizing dijit tundra

dijit’s (dojo - http://dojotoolkit.org) tundra theme is excellent.

Notes on customizing it:

  • Copy dojo.css, dijit.css, tundra.css, and the supporting images out of the dojo tree and into the application’s CSS directory. Place the images in a directory under CSS, that way, the paths don’t have to be updated in the CSS files for those images. This risks later version conflicts with dojo, but also prevents inadvertant destruction of customization on upgrades. This also ensures you don’t affect other applications as you modify the files.
  • Update paths in the files (tundra.css imports dijit.css). Renaming tundra.css is a good idea, since it won’t be tundra after you change it.
  • Use icons from the Crystal Project (see link above). Be creative, the icons are beautiful and can be used in many ways to enhance the dijit theme.
  • Strive to avoid creating new images, unless you can create them quickly. Tiny images can take a surprising amount of time. Since the majority of tundra is grey, with blue highlights, simply removing the blue images and adjusting the remainder can provide a neutral color scheme.
  • Augment the tundra colors with those from you application. If you use the same hue, you can adjust the brightness and saturation to add variety to the color scheme.
  • Change as little as possible, because tundra already looks great. Try to preserve the dojo CSS file structures, so that if you need to merge in changes after an upgrade, it is not too difficult.
  • Use at least four other CSS files, base.css which contains application common basic layout, color.css, which contains application common color settings, ie.css for IE, and ff.css for FF specific settings. Additional page-specific CSS files, as well as some embedded style tags may be helpful as well. Configure caching to reduce the impact of these files, consider compression or bundling them together if necessary. Keep CSS as lean as possible, place design images in HTML, where they don’t incur overhead unless they are used.
  • Spend time looking at the Crystal icons. Even if the icon is named ‘urgent_mailmessage.png’, if it looks good where you want to use it - use it there.
  • Install the Crystal icons in DocumentRoot, then link to them with a symlink from the images directory, which should be at the same level as the CSS directory. That way, the icons can be shared by all applications and sites on the server.

Open Source - Cycle Back

Open Source software is often maturing.

Cycling back to the distribution site has many advantages:

  • Upgrading open source components usually delivers many bug fixes and new features. Although upgrading after ever update is probably unnecessary, it is worth considering an upgrade if something isn’t working exactly as expected.
  • Upgrading increases the lifespan of your code, as well as often improving the quality.
  • Documentation often improves, both directly from the author and with contributions from other users. Repeat visits usually increases understanding.
  • As new features are added, they can be integrated into your code.
  • As you learn more, you can contribute to the site.

Cycling back through your application also has many advantages:

  • As your skills improve, your code will, too. Revisiting code allows you to improve it.
  • Look for ways to consolidate and reuse code. The less code you have to maintain, the better. Overly complex or large applications are often more difficult to work with than sleek, elegant systems.
  • Validate XHTML and CSS periodically.
  • Use jsLint, and other tools.
  • Run the pages through different browsers after major changes.
  • Keep an eye on the architecture, understand what goes where and why.
  • Add comments for things that are difficult to understand.
  • Look for opportunities to improve performance.

Craching

Crache - Poorly configured server caching which prevents distribution of updated files such as CSS, images, and javascript. Crached pages display poorly until the browser cache is cleared.

*** This can be a very subtle problem, as developers often clear the browser cache by force of habit. They would not notice the problem. Site visitors that return to your site after updates may be presented with pages that do not display or function properly.

Key resources

(Apache)

http://httpd.apache.org/docs/2.2/caching.html
http://httpd.apache.org/docs/2.2/mod/mod_expires.html
http://httpd.apache.org/docs/2.2/mod/core.html#fileetag
http://httpd.apache.org/docs/2.2/mod/mod_cache.html

(Mozilla Firebug and YSlow)

https://addons.mozilla.org/en-US/firefox/addon/1843
https://addons.mozilla.org/en-US/firefox/addon/5369

Great Way to Learn XHTML/CSS

The link above is to a great book for learning XHTML/CSS. I bought it for my daughter, as an introduction to building web pages and sites - and then I read it.

First, and most importantly, it is technically up to date and accurate. The information presented will help the reader build web pages and sites.

Next, it is really fun to read. I read the entire book, which is something I very rarely do with technical books (usually I use them only for reference). I confess I didn’t do the exercises, I write enough code as it is.

Finally, I learned the following:

  • The difference between block and inline elements, and their relationships
  • The value of putting height and width attributes on img tags
  • How float and clear really work, and the impact of them on the pages, especially pages which may be viewed with mobile devices
  • Other finer points of positioning page elements
  • How to center pages in the browser

If you are new to the web, it is a great book to start with. If you are more of a software engineer than a web page coder, it can really help you understand the front-end.