OrderedList.com « Recent Articles

New Example : Bending the Matrix

I just finished a write-up on the curved navigation at the top of my site, and posted it in the “Examples” area. In it I explain some theory and provide a working demo. I even zipped all the files together so you can download them and play around with your own version. Let me know if you come up with anything cool.

You can view the example here.

Posted 5/27/2004 | Permanent Link | Comment on this Article

Results of FTOS Round 1

While this question is not new material for me, I do get this type of question often, so I thought I’d explain my methods.


Suppose you have a table in your database filled with data about books: title, author, and so on. Every book also has a field for its genre; in that field you put the genre_id corresponding to the genre-table. That’s the easy part. Now, what is the best way to make it possible for every book to have multiple genres?


Create the following tables in your database. I’m using MySQL syntax here, but I think you can pick out the basics to translate it into any database. I also included only the relevant fields. Much more detail could be put into these tables.

CREATE TABLE `books` (
  `books_id` int(11) NOT NULL auto_increment,
  PRIMARY KEY  (`books_id`)

CREATE TABLE `genres` (
  `genres_id` int(11) NOT NULL auto_increment,
  PRIMARY KEY  (`genres_id`)

Now here’s the key to the connection. Rather than create a field in the books table for the genre, we will create an entirely new table relating books_id to genres_id:

CREATE TABLE `books_to_genres` (
  `books_id` int(11) NOT NULL default '0',
  `genres_id` int(11) NOT NULL default '0',
  PRIMARY KEY  (`books_id`,`genres_id`)

This is a great example of why databases are a much more powerful and useful tool than spreadsheets. You won’t be able to see the data related visually, but that’s not the point of a database. The information is related via keys, which makes it very easy to get your selected query. Let me explain how I would input and query the following information.

Let’s fill the books table with a few examples:

books_id   books_title
1          Designing with Web Standards
2          Defensive Design
3          Web Standards SolutionsDan Cederholm

And sprinkle in a genre or two:

genres_id   genres_title
1           Web Design
2           Web Standards

Now here’s how we relate the genres. All three entries in the books table fit in the genre of Web Design, but more specifically, Designing with Web Standards and Web Standards Solutions fit into, obviously, the Web Standards genre as well. Here’s how our books_to_genres table would look under these relationships:

books_id   genres_id
1          1
2          1
3          1
1          2
3          2

This specifies a releationship between books_id 1 and genres_id 1 and 2, and so on. Then, to list all books in the ‘Web Standards’ genre, we run the following query:

select b.books_id, b.books_title from books b, books_to_genres bg where b.books_id = bg.books_id and bg.genres_id = '2';

To view all genres related to ‘Designing with Web Standards’, run this query:

select g.genres_title from genres g, books_to_genres bg where g.genres_id = bg.genres_id and bg.books_id = '1';

So there’s your ticket to unlimited books, unlimited genres, and unlimited relationships with three simple, no fuss tables.

Posted 5/23/2004 | Permanent Link | 1 Comment

Figure This Out, Steve

I’ll admit it: I am not an idea man. I am a problem solver. Sure I have the occasional stroke of “genius”, but on the whole, I’m the guy who gets things done. I consider myself to be pretty good at solving problems, but when it comes to thinking up new problems to solve, I leave that to the ‘idea people.’ So, in an effort to make this site a helpful reference for others, and to stretch myself and community, I thought I’d start this new segment entitled “Figure This Out, Steve!”

Here’s what I want you to do. Give me a problem to solve…any problem dealing with Web Design / Development that is. If you’ve been working on something and just can’t seem to get it right, or if you’re thinking of a problem and just don’t want to put the energy into figuring it out, let me know. If I can’t get it, I’ll post it here for community help.

So when you decide on a problem to solve, contact me and let me know what it is. I’ll pick the best or most challenging problem, and post either a solution, or a cry for help… one of the two. So let’s have it.

Posted 5/20/2004 | Permanent Link | 8 Comments

Increasing Developer Productivity

Usability, design, accessability are key for the user. For the developer, we worry about productivity. My time is valuable, just like the users. I don’t have precious minutes to waste on hunting for files, rewriting whole sections of code, or find a hack for a (free or not-so-free) CMS. I’ll try to lay out a few ideas below that have helped me save time in my production work, as well as personal work.

Use Dynamic Pages

Server-side scripting is not as scary as some might think. Even working with databases these days can be done using a few short lines of code. The few hours it might take to learn the right commands and implement them are short compared to the days it might take you to change a whole folder of files. For you programmers out there, you know what I’m talking about. For those of you who don’t, resources are available to help you learn. It’s hard to find a host these days that doesn’t support one server language or another, so there’s no excuse not to learn, at least enough to save yourself time.

Use Include Files

Making modular code has probably been the most time-saving and productivity-increasing thing I can do. I use separate files for functions, classes, settings, actions, etc., all of which can be included into one dynamic page. To simplify it even further, you can include these files into one all encompassing file, and include that in your scripts. Something like this:


//site content and script below

This makes utilizing these same file on other sites as easy as cut-and-paste. Only slight modifications to files are required instead of reworking entire documents. Including any site-specific information, such as URL’s, file roots, database settings, and the like, in one ‘settings’ file can make site transition a breeze, and increase your overall productivity.

Use URL Rewriters

Some web hosts do not allow for URL rewriting, but for those that do, this can make your website all that more attractive to search engines, and make your URL’s more human-readable and memorable. For those of you not familiar with URL rewriters (ISAPI_Rewrite for IIS, mod_rewrite for Apache), they take an incoming URL such as www.domain.com/automobiles/dodge/stratus and run it through a series of Regular Expressions, and spit out something like www.domain.com/automobiles.php?brand=dodge&model=stratus which the server can understand. This virtually eliminates the need for file directory structures, and allows for minimal file counts. (I should mention that if you use this method, all local links, images, stylesheets, etc. should be called by their full URL, not referenced locally.) My website utilizes a grand total of 9 PHP pages with with a handful of include files and a database. That’s it. When I make an adjustment to a page template, it’s updated everywhere immediately. And that saves me time.

There are countless other methods, and I’d like to hear some more, so bring them on. Let’s get this site update off our plate, and go lay on the beach for the rest of the day.

Posted 5/19/2004 | Permanent Link | 3 Comments

One Down

Thanks to a tip from Rodney McPhail, I’ve squashed a Mac/IE5 bug that made the menus at the top disappear when you hovered over them. It seemed that all I needed to do to fix it was place the navigation menu in the header itself vs. positioning it absolutely. Once I fixed the problem, it came to mind that maybe all I had to do was mess with the z-index of the menu, but I’d rather have the XHTML structured this way anyway. I think it’s more logical. So thanks Rod, and let me know about any more bugs you find!

Posted 5/18/2004 | Permanent Link | 1 Comment