Ups and Downs and Everything In Between

I recently suggested to my father that he switch from Internet Explorer to Firefox. My father went and did a little poking around the internet as to the merits of Firefox and uncovered Adam Kalsey’s blog entry about why he doesn’t recommended Firefox to the general public. My father pointed me to it, and asked what I thought about it. Well, here’s what I think about it:

Everything Adam Kalsey has said is absolutely factually correct, but in my opinion, nothing he has said is a reason not to recommend Firefox.

Quite simply, most people don’t use most of the features any product offers because they’re average
users. Average users only do typical things, and for anything typical there is no need to get into anything fancy. The fact that more features exist is not a reason not to recommend a piece of software, like a browser.

Mostly, however, the sense I got from Adam Kalsey’s entry is that users are not smart enough to learn how to use Firefox. I agree that there are things Firefox could do to ease people’s transition from another browser, and I also agree that there are some things in the interface which are geared towards people who have a better understanding of the fundamental concepts of the Internet.

However, there is no reason why having a simple conversation with someone shouldn’t clear up every issue Adam Kalsey has mentioned. I’m not just saying this: my mother, possibly the most computer illiterate person I know, uses Firefox because I taught her how to.

The bottom line is that Firefox is easier to use than IE so long as you can let go of old habits. As a blunt example, instead of the IE logo, click the Firefox logo. What’s the difference? The logo. That’s it. That’s not hard, and geeks have to start giving average users the respect of being smart, just like Adam says we should.

The major problem with people who think that we have to dumb stuff down in order to make sure that ordinary users can use software is that it creates a huge gap between users and developers. That’s precisely what people like Adam Kalsey want to avoid, right? Well then, they need to do something about that.

Explain the difference between a search bar and an address bar. It’s not that hard. It took me five minutes, three different wordings, and two examples to make my mother understand, but now she knows the difference. She even knows how to get to her favorite search engine from the address bar, and then run a search. Even Penn, my seven-year-old younger brother, understands it, so why can’t an average computer user? They’ve never been given the chance, that’s why.

Firefox gives them that chance.

Computer technology has begun a new revolution for mankind because it offers us a new set of tools. Ever since that time, computers have been able to perform more and more complex tasks, forcing people to adapt to the methods of how to use these new tools.

A mere two decades ago, no employer cared if you knew how to type. Now, you can’t even get into retail if you don’t put some kind of computer application skill on your resumé. You need to have at the very least a basic computer-related skill set, you need to “have some smarts” that were unheard of before.

In the mean time, these tools are developed in an effort to accomodate an ever lower common denominator. That doesn’t make any sense, and it needs to stop somewhere. Let’s let it stop here.

<sourpuss>I can’t wait for Halloween to be over. In my not-so-humble opinion, there is no reason for the undead not to remain dead.</sourpuss>

Recently, I became aware of CSS3’s box-sizing property. This property can have two values, content-box and border-box. The content-box value is what we’re all used to. It causes the selected box’s dimensions to be sized by setting the specified width of the box equal to the width of the content area of the box. Any horizontal borders or padding that the box has is then added to the content area’s width. The border-box value sets the selected box’s width equal to the content area and any horizontal borders and padding, effectively subtracting the width of the padding and border from the declared width in order to calculate the content area’s width.

In other words, the border-box value to the box-sizing property makes the selected box use Internet Explorer’s non-standard box model. At least, it was non-standard until it became part of the CSS3 spec. The spec even notes this itself, saying “This is the behavior of width and height as commonly implemented by legacy HTML user agents for replaced elements and input elements.”

This is somewhat annoying, because this means that rather than fix their “Web browser,” Microsoft can now say that their browser supports this property of CSS. In the end however, I do see the necessity of the property for compatibility reasons, as much as that necessity (caused by one browser vendor’s lack of support for Web standards) bothers me.

The most direct application of this technique comes in the form of making two child elements who have borders and/or padding fit precisely within one larger parent element whose width is flexible. For example, making floated, columnar layouts.

So while taking all this in I took some time to familiarize myself as best I could with Firefox’s implementation, the -moz-box-sizing property, and its effects. Some of my observations:

1. Most interesting uses for three column liquid layouts (or more). Two column layouts can use a (more complicated) balancing of float: left and float: right to achieve a similar effect in a liquid layout, though a small, variable amount of space between columns is nearly unavoidable.

   Also, experienced designers usually keep a certain degree of whitespace in their layouts, making such tightly fitted floats largely unnecessary and/or impractical implementations for certain designs. (I.e., positioning would be a more appropriate solution.)

2. Border-boxes offer no help for linking the height of a box to the height of its neighbor. Considering this is the biggest failing of CSS-based columnar layouts to date, I would stick with an accessible table where absolutely necessary, which can be and often is sized just like a border-box.

3. When confronted with left-floated boxes such as in the case of a columnar layout, IE/Win versions that use the border-box method of calculating width and height will drop a tightly-fitted floated box below its neighbor on a window resize. This creates either a trippy experience or cause for frustration depending on your mood. Considering this property is at least partially intended to help IE/Win, that’s quite an embarassing thing to have happen, methinks.

4. All in all, I’m still not convinced of the necessity of this property, except to support IE. While it can certainly be a useful “option” when attempting to create (arguably simplistic) column layouts using strictly semantic markup and CSS, tables are still going to be necessary in some designs. In the situations where they are not, a combination of existing techniques can still be used to achieve any desired effect.

Furthermore, this certainly doesn’t help make CSS a more approachable topic for Web designers who are new to the technology. The single largest obstacle to CSS’s widespread adoption are the many various and often extreme browser bugs and quirks present in the majority of browsers. When a CSS newbie begins writing some stylesheets, they are greeted with horrendous results thanks to these misbehaving browsers. I know of several Web design projects that have begun using stylehseets, only to abandon all but their most basic capability due to frustration on the designer’s part. Some CSS concepts are not easy to grasp for beginners, the box model being one of them, and I am not fond of the idea of presenting designers with yet more differences in the way their pages can be rendered.

Moreover, most CSS beginners I have encountered use a GUI such as Dreamweaver or GoLive to create their stylesheets. In this case, a question arises for the developers of these interfaces: how do I visually show which kind of box-sizing is being used for this particular box on the screen? Do I show a little icon in the corner of the box’s display? Do I hide it in a dialog box?

In my opinion, these interfaces are not very good for creating style sheets. There is currently no application whith which you can actually draw, with your mouse, a rectangle of padding onto an element. You have to type a number into the “Padding” input box and then select the unit you’d like to use from a drop down menu. Designers do not think this way. Coders and programmers do. But coders and programmers aren’t the ones who really need CSS. Designers do. And they need their tools and their web browsers to speak their own language to them.

I opened up my news reader for the first time in three days today. It collected my feeds and reported that I have 2,817 unread items.

My god, news happens fast.

My girlfriend owns a $2,000+ Sony Vaio laptop computer bought directly from Sony with a two-year warranty. For precisely two years and one month it worked without a problem. She kept it (mostly) updated with Windows Update, downloaded new virus defs regularly and kept it pretty clean.

Then one day, as she was showing a friend some photos she ran Windows Update in the background. When Windows Update had finished, it requested a restart. Normal enough….

But Windows XP never finished loading. After 10 minutes, it was still running that ugly green progress bar across the screen. So we did a hard reset and waited. BIOS starts, and suddenly we get our message from hell: “Windows did not start up properly on its last attempt. Revert to the last known good configuration. We are sorry for the inconvenience” or something like that. Fine, we can be good Micro$oft $uckers and follow directions.

No good, it hangs at the progress bar again. Okay, hard-reset, error message, this time we try normal mode. No good, okay, hard-reset, error message, let’s try safe mode. No good, okay, hard-reset, error message, let’s try command prompt.

I’ve recently got into the whole del.icio.us link craze. Mostly, I’ve been using it as a cross-browser bookmarks list. Yes, Apple’s .Mac has Safari-bookmark syncing with iSync, but that’s only for Macs.

Anyway, I wanted to get a list of links I’ve recently added to it on this blog. MagpieRSS was the best way to do it, but I didn’t want to abuse the del.icio.us server by doing it, so I had to enable MagpieRSS’s cache. I had to search through the docs a little to get the cache feature working. I was trying to create the cache directory inside the magpierss directory, when apparently I’m supposed to have created it from the directory in which I’m calling the scripts that use Magpie.

This is a bit of a scalability issue, since I want to use Magpie in several different areas across my site and don’t want my webserver littered with cache directories everywhere. Beyond that little annoyance, it’s wonderfully easy to integrate RSS feeds into a site with this. I’m loving it.

Also, after coding the function that displays my del.icio.us links, I started searching for the cache solution, but found Stephanie Booth’s post regarding a different MagpieRSS caching issue. She seems to have solved her problem, and while I had to continue to search for how to enable MagpieRSS’s auto-caching, I did find a code sample which creates a del.icio.us links list. I’m now using a modded version of her function, as it was better than mine. Thanks Stephanie!

And for the curious, here’s the reference I found that showed how to enable MagpieRSS’s auto-caching feature.

Addendum: Oh, yeah, I almost forgot. Since this blog is actually generating two of my blogs in a weird way, I only added the del.icio.us links to this site, not my Ups and Downs personal site.

When I need to temporarily (or permanently) take down a bunch of resources from my Apache webserver, I usually put the following in a .htaccess file in the appropriate directory:

Redirect gone /directory/not/to/serve/

However, sometimes I’d actually like to continue serving a specific document somewhere within the redirected direcotry, but only that specific file. So I searched high and low for a way to tell Apache “respond to all requests for any files in /directory/not/to/serve with a 410 Gone header except for this specific file” but came up empty.

The (hugely laborious) workaround is, of course, to specify each file—as opposed to part of a directory path—not to serve like this:

Redirect gone /directory/not/to/serve/index.html
Redirect gone /directory/not/to/serve/bad_file.html
...
Redirect gone /directory/not/to/serve/sub/icky_file.html

and, unfortunately, wildcards (*, ?, etc.) aren’t allowed in Redirect directives.

Of course, as is usually the case, a simple Unix command solves all the above problems:

ln -s file_I_want_to_serve.html /directory/to/serve/file_I_want_to_serve.html

worked like a charm. That is to say, a symbolic link to the file_I_want_to_serve.html created in a directory outside the Redirected directory lets Apache access the file and serve it, despite its true location. You can use hard links or symlinks for this, and you can even link whole directories and access their contents via the link, too. Very useful.

I have to learn to keep it simple and stop looking for complex solutions all the time.

I wanted to use my blog entries, created in WordPress to generate content for pages on my site that were not in my blog. This seemed simple enough, and it is, but without some guidance this can be a really confusing situation. While WordPress supports a pseudo-templating system that can be used to easily customize the look and feel of a WordPress blog, getting that blog-portion of the site to play nice with the other parts of a site (or the converse, as the case may be) is often not as easy as it seems.

I believe this is one of the reasons why WordPress’s popularity has not yet reached its enormous potential.

But without further ado, here’s what I did to get WordPress to generate pages in a directory completely outside WordPress’s own installation directory.

The Solution

The solution involves replacing all occurences of WordPress’s erroneous absolute link-creation output and replace it with output appropriate to the /newsection structure. This was done with PHP’s output buffering. Then, to make it work with the permalink structure, I made some edits to the WordPress-generated RewriteRules. In the hopes that this will be of use to someone, here’s what I did:

1. In the top of your new section’s template (/newsection/index.php), following the line with the require() statement, put a new line that reads:

   ob_start();

   This will start the output buffer.

2. At the very bottom of your template, after the </html> add the following lines:

   <?php
   $page_content = ob_get_contents();
   $replace_this = 'href="http://mysite.com/blog';
   $with_this = 'href="http://mysite.com/newsection';
   $modified_page_content = str_replace($replace_this, $with_this, $page_content);
   ob_end_clean();
   echo $modified_page_content;
   ?>

   These do the replacements you need. Obviously, change the mysite.com to whatever your site domain is, change the /blog to whatever path your WordPress install is at, and change the /newsection to the path of the new section you’re creating.

   With these lines wrapped around your template, you can use all of WordPress’s original template tags like the_permalink() and wp_list_cats() just as you would if you were using them in the original section.

   Note to regex wizards: this is obviously a very crude string replacement, and I don’t know how well it will work in situations not like my own. I’m not very good with regular expressions, however, so if you can think of one that would work better with preg_replace() please let me know.

3. If you’re using WordPress’s virtual site structure (pretty-permalinks): Copy the rules WordPress wrote for you at Options->Permalinks (or from your existing .htaccess file) and paste them into a new text document. This will become your new section’s .htaccess file.

   1. In the line that begins with RewriteBase replace the old base with the new base path to your section. If the line read RewriteBase /blog/ then you would replace /blog/ with /newsection/.

   2. Finally, for the second, third, and fourth lines that begins with RewriteRule replace the old actual path with the actual path to your new section. So, continuing the example above, if you have a line that reads like this,

      RewriteRule ^category/?(.*) /blog/index.php?category_name=$1 [QSA]

      replace it with this:

      RewriteRule ^category/?(.*) /newsection/index.php?category_name=$1 [QSA]

   3. Save this file as a new .htaccess file and upload it to your server so that it resides at http://mysite.com/newsection/.htaccess

No matter what section/directory of your site you’re putting WordPress templates in, you can use this method to point links to the current section, and thus load WordPress content in the templates within that section/directory. One important caveat to this method is that every time a template using this method is accessed, your server works a little over-time to do the str_replace() on your content. This won’t be noticeable on small or short pages, but could really become an issue on oft-visited, long, long pages. As always, use at your own risk.

Improvements/warnings/suggestions/hate mail are welcome.

External Resources

• The original support forum thread.
• The Wiki HowTo node I wrote.
• WordPress Customization Notes.

I’m really not sure if this will help or hurt the state of accessibility on the web. Businesses don’t really understand what accessibility is, and the ease of misunderstanding that this WiderWeb service gives them an accessible page then things are sad indeed.

Definitely something interesting to follow, but there is still no substitute for a real expert consultant.

I’ve finished putting back all the old categories I had in my other blogs. This time, I’ve also changed the organization of some of my entries, so if you’ve got a permalink that isn’t working please let me know. While I don’t suspect there should be many problems, I’m going to keep an eye on my server logs just in case.

If there’s one thing I hate, it’s a 404 HTTP error.

Oh, and yes, I’m aware that all the new categories are messing up the design of my category listing. I need to update my stylesheet but don’t have the will to do it immediately. :) Deal.