When I started this site and didn’t have much content of any kind, I tended to write more about web development itself. I was grappling with design decisions and technical choices all the times as I tried new ideas, so these issues were on the front burner.
As time passed, the site matured and the backend grew more and more streamlined and automated. I went from handmade pages to Perl templates to Movable Type. In spite of my passion for these subjects, I haven’t written much about them, because keeping up the blog and other sections (particularly the food section) was always my first priority. People seem to care more about lobster rolls than web development, and I can’t argue with that. I do plan to share my solutions and customizations of Movable Type, if only to pay back all those who have so graciously shared their knowledge.
What follows are notes regarding the earliest versions of this site in 2002 and 2003 left up mainly for historical interest at this point. After all, my principal interest is web development, so I gotta have a section on web development!
Blog posts in this category appear at the end of this page.
I used Dreamweaver 3 (on a Mac) to create this site. I am only using one feature in Dreamweaver's vast array, however: templates. All of the pages on the site are based on a handful of templates (the vast majority are based on the asymmetrical two-column format of which this page is an example). This allows me to make minor (or even major) changes to the layout of all the pages without having to edit the individual pages. In addition to the template-based design, all the pages in the site use a single style sheet. This sheet contains all my custom classes, even if they aren't used on every page. I find it easier for me to have all style information in one place, and since the user's browser will cache the style sheet after fetching it the first time, there isn't any overhead from linking to the full sheet on every page. The content, such as it is, is entered using a text editor (BBEdit). The remaining element on each page are the navigation links in the left column, which are custom-built on each page by an AppleScript triggered with BBEdit's Update tool.
I occasionally see authors proudly proclaim that they built their site in Notepad. Because Notepad is so lame, I often wonder whether their pride is tongue in cheek, but I did find one site where this was definitely the case. Check out this site proclaiming the wonders of Notepad as an HTML editor. You'll only laugh if you've ever used Notepad, however.
I made a few conscious decisions in designing the site (if you can call this site "designed"). There would be no frames simply because I don't like them. My principal objection is that you can't bookmark pages in a framed site without first "unframing" the page. There would be no JavaScript either. I used to use JavaScript for browser detection (so I could serve browser- and platform-specific style sheets), but I gave up that scheme. I don't like "flyout" menus either, because these force you to choose one page at a time. I much prefer seeing the navigation links exposed so I can load several pages at once.
I am always running across web sites that simply don't work very well. They are usually the sites of large corporations. I hate to generalize, but it seems as if ASP sites are consistently the worst. If I see pages with .asp instead of .html I can almost count on problems. I don't know whether it's Microsoft's technology that's to blame or whether any web designer who would choose to use ASP isn't much of a designer anyway. For whatever reason, ASP sites tend to be poorly thought out, clunky, and problematic.
Another pet peeve related to ASP sites, are sites that use dynamic content generation (of which ASP is just one technology). Of course, some content is best generated dynamically, but a lot of it could be better served statically. Dynamic sites often use incredibly arcane programatically-generated URLs, some of which are ridiculously long. Here's an error I received at one such site:
"A redirection error occurred." No kidding! Pretty comical, I think.
I launched this site in its present form in March, 2002, but didn't add this page until late May, so there are no changes recorded before May 30. Don't worry. You didn't miss much.
October, 2003
Although this site has used CSS to specify some presentation (such as font families and sizes) since the beginning, I never had the confidence to use for CSS layout. It's tables all the way. Since no one reads it anyway, I can do pretty much whatever I want, so I have decided to migrate to CSS for layout as well.
January, 2003
I began to use Perl to maintain the site. The navigation menu on the left of each page is built using an AppleScript that does two things: If the page the menu is on is inside a section, it shows all the pages in the section. For example, this page is in the Computers section, so all the pages in this section are visible. The other sections only show their top levels. The other thing is that the link to the current page is disabled since clicking on it makes no sense. I rewrote this script in Perl and use it to build the navigation menu on the home page. I also am using a Perl module called Text::Template that takes the content of the home page and runs it through a template to render the actual HTML page. These are my first steps toward some kind of content management system.
Monday, July 15, 2002
At diveintomark, I read about a way to use relative font sizes that works in all browsers with just one style sheet. The same method is also being used at Web Standards. I had tried an approach that depended on JavaScript browser detection and four style sheets. I gave it up because it depended on JavaScript and was quite clumsy to maintain. I haven't digested the technique, but it sounds very interesting.
Thursday, May 30, 2002
Ideally, a web site architect should decide on a directory structure before a site is launched and then never change it. That's not to say you can't expand the structure, but in so doing you should avoid moving existing pages to new locations. That risks breaking links that are stored as bookmarks by your visitors or links in search engines. If you do move something (and your web server is Apache), one way to deal with it is by creating a file called .htaccess. By using a "redirect" command, you can automatically serve the correct page when a request for the page's old location is received, instead of causing the web werver to cough up a 404 error. I added such a page today when I moved my lobster roll page. The lobster roll page was one of the original pages I had written two years ago when I first got this domain and is one of the few pages in this site that could conceivably be of general interest. In addition, Google has indexed it. So I added an htaccess file to redirect all requests to this page. Of course I forgot to update the links on the page itself, as I discovered from looking at the log the next day. Sure enough someone requested the lobster roll page, but the call to the image failed, since the page was pointing to the wrong directory. Doh! While I was at it, I redirected a bunch of other pages I had moved. (Do as I say, not as I do.)
When I tested the redirects, I noticed I was not being redirected to the page I expected because the URLs were malformed: directories were in a scrambled order and some paths even contained double slashes. Obviously I didn't understand how a redirect works, but after reading this, I hope you will.
First of all, a "redirect" is the name of a command (one of many) you give to the Apache server to modify its behavior on the fly as it is actively serving pages. You enter the redirect command in a text file named .htaccess (the name starts with a period, which "hides" the file). You can have an .htaccess file in any directory of your site, but for my purposes, I put mine in my "root" directory, in other words the same directory that would contain your site's "home" page, usually named index.html.
Here is an example redirect:
redirect permanent /budgies http://www.http://www.featheredfriend.com/canaries
There are four parts to a redirect command. There is the command name "redirect" itself. Since there are a number of commands other than redirects that we can put in our .htaccess file, we need to spell out the command.
The next part decribes the status of the redirect. I chose the status "permanent" to let the browser know that the change specified in the redirect is permanent--in other words the page has moved to its new location permanently. If the page request were from a search engine, then the search engine would be able to update its database with the new link.
The next part is the path of your directory structure you want to redirect (I'm only interested in redirecting directories, although files should be no different). This is the old path, the path you want to change. It's the path that Apache will be looking for in an incoming request. This path should start with a slash, designating that it is a path starting from your site's root. You don't include your domain name in this path. In fact the simplest example would just be a single slash, which would match ALL incoming requests, by the way.
The fourth part is the new path you want your visitors to follow. In contrast to the third part, this path is always a fully-qualified URL beginning with the protocol (http://), then your domain, and finally the new path. The reason that a fully-qualified URL is required is because of the way a redirect works. When a request for a URL that matches one of your redirects is received, the server does not simply serve the new page, it actually returns the redirect URL to the browser, which then uses the new path to make a second request. The server actually tells the browser to make another request using the new address. Naturally the full URL is required. You should see both requests in your log.
In the example above, the webmaster has decided to rename the "budgies" directory to "canaries" and therefore wants all requests for budgies to go to canaries.
There are a couple of traps for the unwary. For one thing, a redirect will match a request not only for the directory you specified, but also for all directories below it. If you are simply renaming a directory, but not moving any files, then all will be well. But if you have moved any directories, then things become more complicated.
If the incoming request is for a directory or file below the specified one, then the part of the URL below the specified one is chopped off and added to the new path. This will work fine if the directory structure below the matched directory has not changed, but otherwise can lead to unexpected results. Something as simple as a trailing slash may get added twice because you are matching a trailing slash as well. For more information, the official documentation is here.
I develop my web site on my Macintosh running OS X with the Apache web server. I didn't want to move my site's root directory into the default location, but rather wanted to tell Apache where to find it. To do this, you need to edit the httpd.conf, which is an invisible text file located here: <OS X startup volume>/private/etc/httpd/httpd.conf. Open the file in BBEdit and look for the directive "DocumentRoot" which will probably look like this:
DocumentRoot "/Library/WebServer/Documents"
Disable this line by commenting it out (put a # at the beginning of the line). Then create a new line below it like this:
DocumentRoot "/Path/To/Your/HomePage"
Note that you will have to enter the root password to save the changes.
I had some problems when I accidentally renamed one of my partitions referenced by the Apache configuration file /etc/httpd/htpd.conf. Basically, if there is any kind of error in this file, Apache will never start, so if Apache seems to be hanging for some reason, check the /etc/httpd/htpd.conf file using httpd -t on the command line.
I wanted to find whether to put presentation markup inside or outside of an anchor tag, but can't find any reference on this. I am going to abide by the rule to not put anything except text inside the anchor tag
Markup inside:
<a href="http://some"><i>tile</i></a>
Markup outside:
<i><a href="http://some">tile</a></i>
I'm in the process of redesigning this site using CSS instead of tables for layout. Since I don't have any readers, I don't have to be concerned that the site looks correct in all browsers, but it does bug me that Internet Explorer does such a poor job with CSS. I'm collecting links to workarounds for Internet Explorer. Supposedly, if I use a Strict doctype, IE 6 will work correctly. At the moment, the site is not optimized for IE.
Maybe not quite as funny as last summer’s Original Design Gangsta rap (by Kyle Webster), but actually full of good advice—The Poetic Prophet (AKA The SEO Rapper) on web standards and clean code as the way to SEO success. (Via Chris Herdt on the PSO mailing list)
That’s what I yam, at least according to this insightful and funny flowchart, “How to Tell If a Web Page Sucks.” This site does have a “picture of a cat” (neither “dismembered” nor “otherwise humiliated”), and by that criterion, mere cat is a newb ego blog. Close enough to the truth, actually. While the cat pictures are a wink at the Internet cliché of personal sites cluttered with cat pictures, my pictures are otherwise completely non-ironic. I love cats and cat pictures! Non-ironically! (Via Andy Rutledge)
I’ve been running Movable Type 4 (which was released on August 14) for almost two days now, and of course you’re all wondering What took you so long, Mr. Still-Using- Movable-Type-When-Everyone-Else-Uses-WordPress?
Well.
I’m not one to move a dot zero version of anything into production, but in this case I had my reasons. When I moved to a new host a couple of weeks ago, I switched from using suexec to cgiwrap. Everything was fine except when someone posted a comment, and MT’s rebuild would fail with a permissions error. When a rebuild was invoked in this way, some script deep within the bowels of Movable Type was clearly not being wrapped, and because the web server doesn’t have permission to change files owned by me, it objects. (The comment was saved and a manual rebuild worked, but the commenter received a nasty error screen that made it seem as if the comment wasn’t saved.) While I was pondering this, MT4 final was released. It didn’t have this issue with cgiwrap, so I thought how hard could this be? And it wasn’t except for a small issue having nothing to do with Movable Type.
While Movable Type has a new interface and lots of new features, I didn’t see any that would let me eliminate any of the hacky stuff in my templates. The biggest disappointment was with the new Pages feature, which at first seemed to offer a way to manage static content and blog entries, but there is no integration between the two—a page can be either bloggy or static, but not both. I was able to move all my templates and handful of plugins over without much fuss with one exception: I couldn’t get the tag MTEntryPermalink to work the way it used to at all. It seems to want to point to the entry’s parent directory and not the entry itself. I was able to work around this, but it sure slowed things down. Anyway it is my sincere hope that in the aftermath of this rather significant upgrade everything on mere cat is exactly the same, except for some, uh, “pre-existing conditions” naturally. Please let me know if you find anything amiss.
YSlow is a new Firefox extension for an extension (the awesome Firebug) that gives your site a report card on its performance. I pulled down a few A’s, but my overall score was a disappointing D. So now I’m like grounded like totally until I can get my grades back up.
I tried out pixsy.com tonight, searching for “lobster roll” of course. Only three of the first 15 hits had anything to do with lobster rolls, and worse, hits 16 through 30 were all photos from the same site site of the same thing, a roll-on/roll-off cargo ship. A personal peeve: They use JavaScript links which don’t degrade gracefully (the links won’t work if JavaScript is disabled), and they broke the back button. Grr. I guess I’m just not a visual thinker. Google’s images search does much better. The first 20 are all relevant, and one of my photos is Number One. I’m just sayin’. It’s not even my best photo, but I’ll take it.
Yeah, you would think that “out to lunch” is where I’ve been by the amount I’ve posted in the last week (exactly nil), but that message should also be familiar to anyone trying to visit WordPress.org on a regular basis. As a WordPress noob, I’ve spent a lot of time on the site over the last couple weeks and am amazed at how often the site is down. Otherwise, I don’t have much to complain about. The templates are easy to edit, there’s abundant documentation, and an active support forum. No wonder it’s the best-selling blog software that money can’t buy.
I just noticed that my home page doesn’t finish loading thanks to some remote JavaScript hosted at embed.technorati.com, which seems to be down. The snippet is gone now; mere cat apologizes for the inconvenience. For a while there, Technorati was pretty snappy and useful, but last month it stopped indexing my posts and most searches never finish. Nobody but me cares who links here anyway; I don’t know what I was thinking. By the way, 410 is the HTTP status code for gone as in permanently.
Yes, welcome. Actually it’s more like 4.0, since this is the fourth redesign, but two dot oh has so much buzz going for it these days, and this place could sure use some buzz. Besides it really is only the second design at this here domain of merecat.org, so there. You don’t have to do anything special to begin enjoying mere cat 2.0 immediately, except endure this welcome message. (It’s almost over.) If you read mere cat via an RSS feed, please use either one of these new addresses: ATOM at https://merecat.org/atom.xml or RSS 2.0 at https://merecat.org/index.xml.
Mere cat 2.0 doesn’t actually have any Web 2.0 features; it’s just a Plain Old Blog. The biggest difference from 1.0, however, is that now there are comments, giving you one more avenue to harass me electronically. And please do, I love the attention. Seriously, and sincerely, thanks for reading mere cat.
WARNING: Blogging-about-blogging content ahead! Stop reading now! This is your last chance!
Last year around this time, I switched from hand-coded pages to Blosxom, a lightweight Perl script that makes building a blog dead simple. Blosxom allowed me to automatically generate an RSS feed so mere cat could be included in aggregators like Philly Future and indexed by Technorati. All the cool kids had a feed; I wanted one, too. That was fine, but despite its charms, Blosxom wasn’t as full-featured as, for example, Word Press or Movable Type. For one thing, it lacked comments. Another drawback was that it wasn’t clear (to me) how to convert all my existing pages and integrate them with a Blosxom-based blog. I started looking at other packages.
If I didn’t have this legacy content and didn’t want to break any links, I might have had more choices, but after considering my needs, it looked as though Movable Type would be the best choice for blending my existing pages (which are relatively static) with a blog (with its dated entries). It wasn’t easy, but I succeeded in bending this intractable software to my indomitable will. I also used the switch as an excuse to simplify my design. And here we are.
There are some people I would like to thank. For advice about configuring Movable Type, there are simply too many people; someday I’ll take the time to do it right. For the look, I was inspired by the design of Douglas Bowman’s Stopdesign and the color scheme of Mediterranean, a style by John Whittet at css Zen Garden. This site is only a very faint echo of their outstanding work. Finally I would like to thank my long-suffering wife Anne, whose boundless patience with my obsessions is rewarded, so she says, by my smile of satisfaction when it’s all over. I love you.
The new site is actually done? Can it be true? Does this mean I won't have to spend Valentine's Day alone while you click, type and mutter? If this reprive from blog-widowhood is only temporary, at least there is hope of breaking through to communicate with you through comments. ("Hellooo! Are we having dinner? It's ten o'clock!") Congratulations on MereCat 2.0!
COMMENTS! ON MERE CAT!
It looks great.
Wow -- it's true, mere cat with comments. The design is quite nice as well.
Oh, and someone should warn Mrs. Cat of the widowhood that can result from adding a comments section... too late I guess. Happy Valentine's Day kids!
Feeling my way here... I don't know much about comments - I rarely leave one on other sites because I usually read them via their RSS feed on the train, and rarely read comments for the same reason. So I don't know if it breaks protocol to comment in my own comments, but it's quite nice to see some comments! Thanks.
It's your kingdom, Tony. Whatever you feel is appropriate will probably do just fine. Speaking for myself, I like the back and forth sometimes. It's almost conversational.
Tony, Congrats on the new site design. It looks great and I'm thrilled that I can now leave you comments. Yay!
And the comments show up inline on the main page... pretty sweet.
I've been experimenting with using Blosxom to manage the blog part of this web site, so things on the home page will be a bit more chaotic than usual for a while. One improvement is that I now have an RSS feed just like the cool kids do. A tip of the hat to Jim Flach for goading me into trying Blosxom.
Comments
I have that "preview hover thing," qualifying my blog as Brain Rot.
Posted by yoko on November 7, 2007 at 10:52 AM