validate, validate, validate!

I have been working on a project for a few months that has been touched by many developers at various points in time. It is my job to optimize the code, ensure it works in multiple browsers, and then test new functionality. This is a huge project with tens of thousands lines of code. I recently got stuck on one issue that I could not figure out at all…so I finally decided to run everything through the W3C validators, and as soon as I did, I realized I should have done this as soon as I started on the project, then every x weeks.
I know I have said it before, but I will say it again. If you are working on a project and ever get stuck on something, validate your code.

Great CSS Buttons

I am working on a project that started small and got really big. Good for the company, bad news for the code. I am in the process of going through the code and to fix and optimize it for multiple browsers. One word of advice for developers: when starting a new project, expect exceptions. One issue I have run into: not all buttons will be 90px wide like once thought by the original designer. By using flexible code, your big and small sites can benefit from changes in the future. If you are going to create buttons for your site, check out the “sliding doors” buttons. I also recommend the “sliding doors” tabs – I use those on almost every site I do.

css containers: one image, fixed width, rounded corners.

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the third of three articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I have used this code on several large and small sites and have enjoyed the flexibility of both changing the height and the width. (Also see css containers: simple, fixed width, rounded corners, and css containers: fancier, fixed width, rounded corners..)

There are some sites where you need to have some flexibility with both height and width of the containers. This technique is known as the “ThrashBox” and I will not go into detail about it because it is well documented: ThrashBox. If you want to use something like this, there is a great web site that offers to create the graphic needed based on your input of color, height, weight, and corner radius. Check it out:Spiffy Box. 14.7 update: a tune up.

Over the past few months I have been busy working on client web sites and have neglected I have been using WordPress for a few years now with this site and had a number of plugins, CSS styles, and other items that needed to be pruned while I wanted to spruce up and clean up some other layout items.
Summary of the tune up:

  • Went through all my plugins and disabled and removed anything that could be replaced with a template tag
  • Removed all old and un-used CSS styles
  • Removed CSS code that I could do better or that was not needed
  • Re-validated my code
  • Added the rounded corner/drop shadow boxes around my content
  • Re-arranged my post meta information (author, date, tagged, comments, etc)
  • Began organizing my categories better
  • Removed any duplicative code and either used a WordPress function or an includes file to handle the content/code (links, search, etc)
  • Created a WordPress 404 page with my old 404 standby
  • Went through my pages and cleaned up the text and updated any outdated information
  • Re-organized my sidebars and their content
  • Removed any un-used images

Every once and awhile it is good to clean up your sites so they do not become overly bloated. Don’t know where to start – check out the list above 😉

using the title attribute in html links.

Ever wonder how to get a mouse over “tool tip” to appear without much hassle? Use the title attribute (keep your mouse over the link for a few seconds to see this in action). Not only does this help your users/readers get more information, it also helps people who are using auditory browsers will have the title information read to them. Not all links should use the title link, but if you want to provide additional information to your audience, give it a shot. Be aware that different browsers treat the title attribute differently.
[tags]html, CSS[/tags]

mod_include to the rescue

After working with content management managements for well quite awhile now, the thought of creating more than seven (more than five, less than ten) static pages for a client makes me cringe. Why? I am spoiled by using template driven solutions. With templateing, if I need to make a header change, I change it one place and I am done with it. With using static .html pages, I have to make the change to all the pages. I have grown very reliant on using find and replace, but then – because of the person I am – I have to go back and make sure everything looks right.

I am currently wrapping up a project where I was not able to use a content management system, PHP, or any sort of database. No, this is not 1998, this is present day. For decisions I will not get into, this was the situation, no getting around it. This web site has about 75 static pages and around the twentieth page I started to sweat when the client wanted a major layout change. After emailing someone technical in the department I found out they did allow the use of Server Side Includes (SSI) by way of the mod_include module in Apache. My life became much easier after this past weekend as I converted all the pages to be .shtml pages (needed for SSI). By using SSI, I was able to create common files (header, footer, side links, navigation) so any changes to the common elements, and I just need to touch one file instead of all 75 pages.

What you need to use SSI on the server end:

  • Apache with mod_include
  • Apache configuration must have the proper AddType and AddHandlers set up: AddType text/html .shtml AddHandler server-parsed .shtml
  • Apache configuration must also have the directive set up for the appropriate directorys (): Options +Includes

What you need to use SSI on the client/page end:

  • Name all files you want to have SSI elements in them to include the .shtml extension so Apache knows to parse these files properly
  • Use the following syntax when you want to include a file: when you want to “inlcude” some common code such as a header or footer. (please see the mod_include documentation for all syntax)

Apache’s mod_includes also gives you the ability to include CGI files, show modification dates, date and time, the user name who last modified the file, etc. Lesson learned: if someone approaches you about creating a “simple” static web site, look into if SSI is an option!
[tags]Apache, mod_include, SSI[/tags]

goodbye golive.

I am not sure that there are too many people like me still around…people that have used GoLive since it was actually called GoLive CyberStudio and owned by GoLive Systems Inc. I have been using GoLive for site management on static sites for nine years now and although I knew this day would come…Adobe finally announced they would phase GoLive out in favor of Dreamweaver. Thankfully I only use GoLive for one site (and hand code use CSS for all the others or use a CMS), but after using something for nine years it makes me a little sad to hear it will no longer be updated. (I always did think that version 4 was by far the most superior…and that every version since just brought more bloat.) Goodbye GoLive.
[tags]Adobe, GoLive, CyberStudio, Dreamweaver[/tags]