Finishing the CSS Prototype

Well, I finished the prototype that I was doing on tableless design and confirmed the results mentioned in in the stopdesign article on CSS.

The final result was a 65% reduction using CSS and XHTML, only using tables for tabular type data (and one set of form elements). Most of these space savings were in table code and redundant font and formatting information throughout the original HTML (including the non-standard <SPACER> tag, which was sprinkled liberally throughout the markup).

That’s pretty impressive and a real motivator to convert to tableless design. I can’t express enough how cool it is to see the formatting completely decoupled from the standards compliant XHTML!

While part of me wants to post up the results, I’m not going to, as I don’t want to establish a connection between this site and the company that I work for. I’d rather keep them separate. However, the savings in both maintenance and space savings are there. You’ll have to trust me.

Along with the book that I had mentioned in previous articles, I also picked up Cascading Style Sheets: The Definitive Guide, 2nd Edition, put out by O’Reilly. This book was extremely helpful in getting this project done.

On other fronts, I’ve been doing some really interesting reading over the past 4 weeks or so. Two books called The Innovator’s Dilemma and its sequel, The Innovator’s Solution: Creating and Sustaining Successful Growth, both by Clayton M. Christiansen. These are really interesting books about how disruption and innovation actually causes established companies to lose their foothold on their markets even though they are making perfectly sound management judgements given where their companies are.

As I get my head around the concepts in these books more, I’ll be posting in depth on them. I just have to figure out how to express what I’ve learned. There’s a lot of information in these books and they are really engaging.

Learning CSS

Back in my Windows programming days I used to focus a lot on user interface design. I think I was actually pretty good at it. As time went on I moved into more of the back-end type of programming (utilities and things of that nature). When I moved to Unix programming I did not even touch the graphical UI’s. There was nothing really of interest to me.

When I started web programming, HTML just seemed tedious. I learned enough to get by, but the constant use of tables and getting things to align properly proved to be just too boring for me to ever try to get proficient in web UI design.

Over the last week or so, I’ve decided that I really have to learn about Cascading Style Sheets, which as I’ve mentioned previously, I didn’t focus on very much due to the incompatibilities between browsers in the early days. My initial interest in the technology started about 3 months ago from the work that I have been doing with WordPress, however the final straw that made me think I definitely had to learn this stuff was an article called Throwing Tables Out The Window at stopdesign.com. The author talks about a presentation he gave on CSS in which he, during the presentation converted the Microsoft web site from a table based design to one using CSS. He did the conversion real time to show the audience how quickly it could be done.

The final result of this conversion was a page that looked exactly the same, but reduced the page download size by 62%.

When I saw these results, I decided it was time to learn a little about CSS, so I bought the book Web Designer’s Reference : An Integrated Approach to Web Design with XHTML and CSS by Craig Grannell and poured through it. I also grabbed the O’Reilly CSS Pocket Reference so that I would have a quick way to look things up. (OK, honestly — I bought the Pocket Reference first, and got completely lost — get a real book before you pick up a quick reference).

When I learn something, I need to apply it to something that has value to me. If I just walk through sample projects, I tend to get bored because I’m not getting value that I can use right away.

The project I picked was the home page for my company, which currently uses pretty heavy table layouts. I want to see what kind of space savings we can achieve along with the kinds of maintainability savings that can be realized using CSS based design in lieu of tables.

I started this project on Monday, and to be quite honest, was fairly intimidated, as I always am when stepping outside of my comfort zone. After all, I deliberately did not learn more than I needed to know about HTML and layout because I found it boring.

Between Monday and today, I have been working on the project in most of my spare time (getting up early and working on it when I get home). As I work more on the problems, I understand more of the technology. Given the limited amount of time I’ve had to work on it, I’ve made some pretty decent progress and my excitement builds more and more the more I get done.

I seriously don’t think I’ve been this excited about learning new technology in a long time (probably since I started learning Python a year or so ago), and though its geeky, I find myself thinking about this stuff constantly. The ability to completely detach the presentation from the content is just completely cool.

Now there have been some issues and a lot of frustration. I got things looking great in FireFox and then made the mistake of loading it in Internet Explorer only to find that everything was screwed up. However, a few hours spent this morning and I have the display working fine in both browsers, due to the wealth of information out on the Internet.

If you find yourself laying out your pages using archaic, 90’s style table layouts, you need to start looking at CSS. The possibilities are far beyond the simple font settings that so many sites limit themselves to.

At some point in the future, when I finish my first “project”, I hope to post it up as an example. There is a great site called “Tableless” which showcases corporate web designs reworked using tableless design. These examples do a really good job of illustrating the ability to do complex layouts in CSS that one with a limited idea of the technologies might not think is possible.

Following are some resources on the Internet that I have used to help me learn this stuff. Hopefully, they will be helpful.

Related Links:

Building Subversion 1.2 on Solaris 9

I’ve just spent a couple of days trying to get Subversion to build on a Solaris 9 environment. For some reason, it wasn’t as easy as it has been in the past and I’ve had a boat load of trouble, so I wanted to document the final solution I came to.

The Source Control System

We are running Solaris 9 and access the Subversion repository via HTTP/HTTPS through Apache. This means that I have to compile in SSL support for the client, in addition to mod_svn_dav support for the Apache Server. We also use the mod_svn_authz module for access control to the repository.

Software installed On The System

The following software is installed on the system:

Description of the Problem

The normal process I use for building these components is the following:

  1. Download the source tarball
  2. Untar the contents of the tarball to the a /tmp/subversion directory
  3. Configure the software with the following commands:
    ./configure --with-ssl --with-berkeley-db=/usr/local/BerkeleyDB4.2 
    --with-apxs=/usr/local/apache2/bin/apxs
    make
    
  4. Build the software with the make command

The software builds until it hits the neon module, after which I would receive pages of the following errors:

make[1]: Entering directory `/tmp/subversion-1.2.0/neon'
cd src && make
make[2]: Entering directory `/tmp/subversion-1.2.0/neon/src'
/bin/bash ../libtool --quiet --mode=link gcc -rpath /usr/local/lib
-version-info 24:7:0
-o libneon.la ne_request.lo ne_session.lo ne_basic.lo ne_string.lo ne_uri.lo
ne_dates.lo ne_alloc.lo ne_md5.lo ne_utils.lo ne_socket.lo ne_auth.lo
ne_cookies.lo ne_redirect.lo ne_compress.lo ne_207.lo ne_xml.lo
ne_props.lo ne_locks.lo ne_acl.lo
ne_openssl.lo -lssl -lcrypto -lnsl -lsocket
-lz /tmp/subversion-1.2.0/apr-util/xml/expat/lib/libexpat.la
Text relocation remains referenced
against symbol offset in file
0xd44 /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd48 /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd4c /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd50 /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd54 /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd58 /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd5c /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd60 /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd64 /usr/local/ssl/lib/libssl.a(t1_enc.o)
0xd68 /usr/local/ssl/lib/libssl.a(t1_enc.o)

When I saw the errors streaming across the screen, I remembered that I had gotten them before. To fix them previously, I changed into the neon directory and typed the following:

./configure --with-ssl --disable-shared

This had previously fixed the problem (I have no idea why). This time it didn’t and after rebuilding I had the same results.

Finally Getting Things To Build

On a fluke, I decided to run the autogen.sh shell script file in the neon directory and reconfigure neon, enabling shared libraries. Then I went back up to the root of the tree and built again. This time the software built cleanly and all tests ran successfully.

Installing The Software

Since I finally had a clean build and all tests had ran successfully, I decided to go ahead and install it. Upon installing it I received errors that linking failed on the shared libraries being installed and I had to relink everything. This pretty much rendered my source control unuseable until I could figure out why linking failed. Just to be clear, this was not on the production repository box, but on another Solaris machine.

I went through my /usr/local/bin and /usr/local/lib directory and removed every libsvn* shared library, all apr and apr-util shared libraries and all neon libraries that were present on the system. Once this completed, I was able to install the software successfully.

One of the symptoms of old libraries in the path or linking errors is the ‘undefined symbol’ error some have reported on the mailing list when upgrading. When you run into an error like this, you might want to try finding and removing all of these libraries as stated above, as this is an error I was getting as well. Removing the old directories and running make install fixed the problem.

Conclusion

This install was pretty painful. I attribute most of the pain to the fact that I was doing most of this work between meetings, so the constant start / stop took a toll on entering “flow state” to really think about the problem. As I was experiencing these problems, I couldn’t find any really good write ups on installation of the Subversion software on Solaris, so I figured I’d throw this together in the event that someone else was experiencing this level of frustration. Plus, I figure it will help me next time I need to do this to have an actual documented process to follow.

A summary of what I did follows, for those who don’t want to wade through this whole post again:

  1. After exploding the tarball, change to the neon directory and run autogen.sh
  2. Run the configure script with your desired options
  3. Build the software
  4. Run make check and ensure all of your tests pass
  5. Take the server down
  6. Back up your current installation
  7. Remove your old Subversion, apr, and neon libraries from the installed version
  8. Install the software
  9. Bring the server up
  10. Test

On the bright side, I also upgraded a SuSE 9.1 box to the new software. This took about five minutes after I found these RPM packages for SuSE 9.1.

 

WordPress 1.5.1.1 update available

An update is available to WordPress 1.5.1. The text from the release page follows:

In our effort to optimize we made two mistakes in 1.5.1, one related to feeds and one related to trackbacks and pingbacks. We’ve updated the download with 1.5.1.1 which corrects these bugs and a few others.

If you are having trouble with RSS feeds or track/pingbacks, this update is for you.

If you’ve made changes to the existing codebase for your site, the following files were effected, so back them up so you have access to your changes.

wordpress/wp-admin/post.php
wordpress/wp-admin/quicktags.js
wordpress/wp-blog-header.php
wordpress/wp-comments-post.php
wordpress/wp-includes/functions-post.php
wordpress/wp-includes/functions.php
wordpress/wp-includes/pluggable-functions.php
wordpress/wp-includes/template-functions-category.php
wordpress/wp-includes/template-functions-links.php
wordpress/wp-includes/template-functions-post.php
wordpress/wp-includes/version.php
wordpress/wp-includes/wp-db.php
wordpress/xmlrpc.php

Those who use the AuthImage plugin will want to back up wp-comments-post.php.

The DoJo Toolkit

There is a new project (currently in .01 status) called The Dojo Toolkit. From their site, the goal is to “create a UI toolkit that allows a larger number of web application authors to easily use the rich capabilities of modern browsers”.

There is also an Introduction to Dojo on the site that explains what they are trying to accomplish.

The project is in it’s really early stages, but it looks interesting.

Also interesting is that this is another project using Trac for their project management software, something I had written a note to myself about previously (3 months ago to be exact), but still haven’t made the time to get it installed.

SVK 1.00 and WordPress 1.5.1 releases.

Chia-liang Kao, author of the SVK source control tool, announced the release of SVK 1.0 final today.

And if that wasn’t enough for you, the WordPress folks have announced the release of WordPress 1.5.1. Download it now. Information on what has changed is available in the ChangeLog on the codex.

Update: 5/10/2005
A quick check of CPAN this morning finds SVK 1.0 out on the mirrors. Go ahead and install it with the following (as root):

perl -MCPAN -e 'install SVK'

FeedWordPress Plugin – Feed Your Website via RSS

This morning I ran across the FeedWordpress plugin by Charles Johnson. This plugin allows you to actually feed your WordPress site via RSS feeds.

Unfortunately for me, I had the wrong idea as to what the plugin did. I thought it actually just added links to articles to your blog in a specified category. What it actually does is feed your web site with posts from the RSS feeds, including creating new categories for you. This is great if you are creating a site specifically for aggregation, but it wasn’t exactly what I was looking for.

Again, unfortunate for me, I decided to experiment on the production site instead of my development site, using Tom the Architects site and Slashdot as feeds to try the plugin out, resulting in a ton of content being posted to the site without me realizing it. I think I’ve cleaned it all up.

One thing about WordPress is that it doesn’t facilitate cleaning up a mistake like this easily. It was a pretty laborous process to get everything cleaned up. One thing about me is that I have to learn to stop playing around with things on the main site and use the development site on my local server for these activities.

If you see anything goofy that you might have seen before on another site, let me know so that I can remove it. I’ve double checked to make sure I removed everything, but you know how that goes … you always miss something.

I really have to learn to do more reading before just installing things on the site. However, the plugin works REALLY, REALLY well. Grab it if you want to start an aggregation site.

Subversion 1.2.0 Release Candidate 2 released.

I’m a little behind on this one, but on April 25, the Subversion team announced the release of Subversion 1.2.0 release candidate 2.

Since I’m so late in getting this up here, the Win32 binaries are also available, according to this announcement on the mailing list.

If you are curious as to the changes in 1.2.0, check out the release notes.

For downloads, you can pull binaries and source from the project download area.