Speak Stiltedly and Wear a Yellow Shirt

I’m trying to move the blog over to the new host without doing anything fancy involving moving the databases around. Just doing an export and an import in MovableType is likely to break your permalinks, especially if you’ve deleted entries, imported in non-chronological order, or run more than one blog out of the same MT database. This misnumbering problem has been amply moaned over in the MT forums. However, one post suggested a way to keep your entry ID’s the same by hacking both the old and new MT implementations.

That wouldn’t work for me because only this MT on Freeshell is hackable. So what I did was hack CMS.pm as directed, but instead of making a new field called POSTID, I added anchor links to each entry for the old ID. You can export exactly as directed and then query-replace to insert the anchor links, which is more or less what I did.

That still leaves one problem - old entry id’s could conflict with new ones, so that on the same page one anchor linked to the old #209 and one to the new #209. You’d probably get the first one on the page no matter which one you were after.

The solution is simple. I was padding my permalinks (so that #209 came up as #000209), so all my hacked-in anchors are of the #000209 format. By removing the pad=”1″ from my templates, I’ll make my new permalinks look like #209. The link for 000209 will never conflict with 209, since I haven’t yet made it to 100,000 entries.

I do realize that this entry won’t make much sense unless you’ve had the same problem. If you have the problem and still don’t understand, feel free to email me. My address is around here somewhere.

I made a style picker for the new site. The idea is to allow the user to choose the font face, font size, text alignment, paragraph indents, page width, and background and text colors for story pages. It’s also useful for previewing fonts and font sizes - I found only one other DHTML viewer with more choices, and it crashed my browser.

Once the preferences are chosen they could be saved in cookies, but that could get to be a lot of cookies. Even more preferences will need to be handled eventually, so I’m leaning towards a database of user preferences. Only the username would need to be saved in a cookie, and that would also spare users the need to configure each new browser and to have javascript enabled.

The style picker is self-contained, so you can see all the css and javascript just by viewing the source. I didn’t type all that - it’s produced by PHP, and you can view the PHP source as well. It’s much easier to add new fonts and colors to the PHP version.

Note that the fonts lean heavily towards OS X system fonts, since those are the ones I had at hand. If a font isn’t available on your system, the associated link will display in your default font. The font classification is not official; particularly, Comic Sans MS isn’t necessarily a fantasy font, but I didn’t want in under sans-serif with the serious, readable fonts.

I put in a selection of color choices, but what the page really needs is a nice tool like the Tigra color picker or Matt Kruse’s color picker. That will require a form on a freestanding preferences page, without the demo text and with a bit more explanation.

For now, it’s just a toy.

I was surfing for pleasure and profit today and after slogging through tons of free anime graphics sites, I came across some cool tile sites: This cool Japanese site has all sorts of images. Squidfingers’ pattern collection led me to the Tile Machine (requires Shockwave).

I’m still in the slow process of moving to the new host. The blog will probably be the last to go.

When I got home last night I noticed that my previous tab repairs for Opera 7 and IE on Windows had caused new problems for IE and Camino on Mac OSX. I suspect that the font sizes were rendering differently, so that what was taking up the ideal amount of space on one system was overflowing and pushing stuff around on the other. So I tried the old trick of sticking a red border around all my divs until I’d figured out what exactly they thought they were doing.

I ended up tweaking the pixel height of the banner some more, and now it looks fine in every browser created since the Bronze Age. Major user changes in font size would probably throw it all off again, but the worst that would happen would be the submenu floating up to some weird place. Netscape 4 is still a problem, since for some reason it doesn’t render the tabs as links on the main page or the blog. The rest of the pages are usable.

As you can see, the pure css tabs have been implemented on all my main navigation pages. Here the tabs are floating buttons, but their position should still be the same as on the other pages. Styleswitching for the blog has been disabled, but there is a new demo blog for that. All twelve stylesheets were downloaded with every new blog hit, so they were a bandwidth drain that had to go. If you really want a different stylesheet, vote for one in the comments section and I may adapt the winner to the new tabbing format.

Each tab section has a slightly different style adapted from previous stylesheets rather than coded up fresh. If you’re interested in the previous style, there’s a demo javascript in the style section somewhere (now part of About), and most old pages are still around, renamed index_notab.html or the like.

The TOS, MIS, VOY, Jade and MJB pages are various adaptations of my original Trek stylesheets, which I designed almost three years ago to work in any browser. TOS now, appropriately, bears my favorite original-series command-yellow theme. MIS has become the home of the Borg Species List and so got the Borg green and black styling. The new VOY color is green, from a stylesheet I made for Jade a while back and always liked, though she preferred blue. MJB has never objected to the orange. (To shorten the tab list, Jade and MJB tabs are available only on the Home page and their respective pages.)

Most of the other styles date from a later period of boxy style and fun tricks with borders which influenced some of my tab design choices, especially that of placing a margin all around the tabbable text rather than bisecting the page with the tabbing line as at diveintomark. Buffy is still the simple, snake-that-ate-Sunnydale green that I slapped together for her during my brief vamp fanfic phase last year. The home page and this one surviving blog style share my favorite sushi-inspired colors. The new About section incorporates the old style pages and uses the basic tabbing style I put together for the original demo.

Since I enjoy bright, bold colors on my main pages, I’ve always been concerned to ensure readability of my story pages. Fan fiction is all too often found against busy background images or in white text on a black background. I prefer a sans-serif font, black text and a slightly off-white background. I made a special story subclass (a div) to make those changes to story pages without having to break out of the tabbed navigation scheme. So far I’ve marked up MJB’s two stories and the Voyager quotes in the story style, but full incorporation of stories into the navigation scheme will have to wait until their conversion to XML so I can run them through XSLT.

I used PHP on my home server (which is to say, my old Powerbook running OS X and therefore Apache) to insert the tab lists and new headers and footers automatically. I wasn’t sure Freeshell was up to the stress of serving PHP, so I just used wget to transfer the HTML versions over here.

The most difficult part of the conversion process was integrating the blog style into the tabbing stylesheet; that effort seems to have broken Opera 7 in the new pages though the demo works fine. I suspect the changes I made to integrate the blog header and description (”Cheating on the Kobayashi Maru…”) have broken it, either by allowing the h1 to grow too big or confusing it with the body margin-top of 20px, though neither seems to correspond to any known Opera 7 CSS issues. It shouldn’t be too hard to fix.

Netscape 4 doesn’t choke nearly as much as I’d expected, except here in the blog where it displays its usual problems with MovableType stylesheets (upon which this one is based). I haven’t decided whether to reinsert my basic stylesheet for Netscape 4. I should check the logs to determine my current percentage of readers stuck in the past.

I’m still wrestling with PHP and tabs, having discovered a very strange Mac/IE bug in the CSS tabs with submenus. [It turned out to be a whitespace problem.] While I’m geeking, you might want to play with another toy from the Kalsey Group: the buttonmaker. Make buttons like the popular XML/RSS ones on the right of this page (or the main blog page, if this post has fallen off it).

Jade says the color picker is broken, but you can get the HTML colors off a nice color chart.

I’ve never quite understood the appeal of PHP, but now that I’ve played around with it a little, I find that it really would make revamping the site much easier. I could also use it to replace my perl hit tracker; using the logging examples at phpfreaks and phpbuilder, I put together a PHP tracker that does everything my current Perl version does except for automatically omitting me from the logs and writing a new file every day.

I also found this advice on avoiding echo eye-opening. It’s exactly the sort of thing I’d want to know and that my PHP book from Buck-a-Book isn’t telling me.

I use tabbed browsers (Camino, Phoenix, Opera, Netscape 7) all the time, and quite a while ago I wanted to add a tab-style navigation design to this site. I figured it must be possible in CSS, but I never made the effort to get it to work.

Sometime since I started reading his blog in NetNewsWire instead of a browser, diveintomark implemented CSS tabs on his site. In fact, tabs are everywhere. In my research, I found three general approaches:

1. Pseudo-navigation, in which the tabs do not open new html pages:
   • Brainjar has both a tutorial and a demo.
   • superflysmack
   • q42 - this one is more hyper-navigation, since new sites are opened in the same page rather than hidden static content being cycled through the tabs.
2. Simple navigation, in which the tabs represent three to eight main pages:
   • diveintomark.org, the one which inspired many of the others. (See also his self-contained example page.)
   • nontroppo looks clean and simple but seems to have border-bottom difficulties.
   • Simplebits (with a demo of sorts)
3. Tabs with submenus:
   • Kalsey Group (with demo)
   • Unraveled has both one-level and submenu examples.
   • Clagnut (with self-explaining rather than functioning demo)

I found many of the links in a webgraphics blog discussion, but just looking up “CSS Tabs” in Google was overwhelming. I’ve only noted the ones that struck me in one way or another.

I adopted the diveintomark code for a personal webserver just so I won’t have to stare at my Netscape 2-era plain html link lists anymore, and I’m working on the Kalsey approach for new navigation for this site. I made a mock-up of what I’m hoping to achieve, and there are more tabbing meditations there filling in as filler text. One thing I forgot to mention is the rounded corners you should see if you’re using a Mozilla-based browser.

It’s sleeting.

This week, in a fit of geekiness, I installed Privoxy for OSX. Privoxy was formerly known by the more descriptive name “Internet Junkbuster.” It’s a local proxy that provides privacy by blocking ads, cookies, referrer information, popups and other Javascript pestware.

My main interest in privoxy was blocking cookies, because I’m just ornery that way. Cookies annoy me. I don’t mind sending a referrer, because that’s not really information about me, it’s information about the structure of the world wide web. The referrer is the previous page, if you clicked a link to get here, or empty if you just typed in the URL or used a bookmark to get here. Your referrer is:

I track referrers myself, since I’m curious who’s linking me. I don’t set tracking cookies, so I never know whether it’s your first visit to the site or if you stop by all the time. I don’t think that’s any of my business. I do set untracking cookies, so I won’t be tracked when I hit my own pages. If you really want to opt out of my tracker, tell me and I’ll give you the untracking URL. My blog will set a cookie when you choose a stylesheet, but otherwise, Jemima’s Trek is cookie and evil-javascript free.

So I have this one don’t-track-me cookie that I wanted to let through privoxy, and I also had this little problem where the default privoxy setup killed Camino. My Camino is oversensitive - this was the second or third time I’ve had to reinstall it after it ate a bad webpage for dinner. In this case, privoxy was sending it corrupt javascript. I didn’t want privoxy “fixing” the javascript that way - I just wanted it to block ad images and cookies. Camino already blocks popups on its own, and the other javascript annoyances, like links that open in new windows, aren’t worth another Camino reinstall to avoid.

When all else fails, RTFM. I found a PDF version of the privoxy manual and printed it out to read on the T. By the time I got home, I was ready for another evening of tweaking config files. I turned off all the filtering options - the bits that rewrite a web page to turn off gif animation or remove popping-up code - and my new Camino was much happier. I turned on the cookie cruncher, but added an exception for jemimap.freeshell.org. I left in all the ad blocking and turned on the checkerboard pattern that privoxy uses to replace ads. (The other choices are to use a transparent gif or an image of your own choosing.)

It’s a great little program, though it doesn’t seem to be quite as smart about multitasking as the browser itself. That’s a typical problem with proxies, though. I admit, I’ve been so busy with last-minute ASC voting that I haven’t had much chance to admire the checkerboard of nuked ads on ad-heavy web pages. Because I have all the filters off, cookies set with javascript can still get through, but those are rarer than HTTP cookies and Camino is still set up to ask me if I want them.

Obviously, the answer is no.

I don’t usually read warbloggers, or political blogs more generally. For one thing, they’re more likely to use Blogger, while the geek blogs all have RSS feeds. Blog technology, or lack of it, affects my blog reading more than I ever thought it would when I innocently downloaded NetNewsWire Lite. I’m far, far more likely to read content that’s fully syndicated, like mine, Perversion Tracker’s, and Phil Ringnalda’s, because it shows up right there in NetNewsWire. Next come the blogs that syndicate a summary like Mac OS X Hints - most of the Mac news sites and MovableType blogs do at least that much. The third tier of blogs are those that only syndicate titles, a category which would hardly exist without the half-baked efforts of LiveJournal at providing RSS feeds.

RSS works at the entry level rather than the page level. I don’t right-arrow on nearly as many LJ entries as I used to read before RSS changed my life. I hardly read geek blogs before NetNewsWire, and now I follow a bunch of them. It’s a victory of content over socializing; content won because it costs me fewer click-taxes. Blog content tends to be freestanding and longer, while LJ entries are shorter and more enmeshed in the whole LJ tangle of threads, rumors, memes and wanks. So I get more content per click from blogs.

If Blogger supported RSS, I’d be keeping up better with Lori, who is TNG, and Mike, who’s into politics. Blogger is the only major blogging tool left without free support for some sort of aggregation. I don’t think it’s a wise policy to charge for RSS feeds since it’s not the user who is inconvenienced by their absence - it’s the reader. There’s no direct incentive for Mike to pay money because I want a feed, yet Blogger looks bad for not supporting technology everyone else gives away for free.

Bad Blogger! Get your new sugar daddy to spring for free feeds.