Speak Stiltedly and Wear a Yellow Shirt

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.

Jerie was kind enough to send me a lovely educational video about a certain mythological Sikh warrior, and I was faced with the challenge of playing the .avi file in QuickTime.

On my first attempt at double-clicking on the file, I got neither audio nor video. I suspect that was a codec problem, but you never know when the traditional .avi advice of changing the file type and creator will clear up something like that. I didn’t follow it, but if you’d like to give it a try, see this MacOSXHints hint.

For my part, I dived immediately into .avi conversion using DivX Doctor II, and the Doctor kindly converted most of the file to .mov. However, DivX Doctor chokes on audio errors, so the soundtrack ended about two-thirds of the way through the .mov.

At this point Jerie showed up and we discussed the nature of the audio track. I’d figured since it was broken it must be wma, but she claimed it was mp3. Such philosophical questions are best answered with DivX Tool, which verified Jerie’s story and explained a bit about .avi audio problems. DivX Tool can extract mp3 audio for reinsertion, so I obtained a fine .mp3 soundtrack.

However, I would have needed to use QuickTime Pro to paste the soundtrack back in so it would play. That, my readers, would have involved money, and I was running a purely fair-use operation.

So I read through some of the articles at the 3ivx forums, and found some very helpful advice - namely, that to cure these pesky audio bugs it may suffice to run the .avi through the DivX Validator.

The DivX Validator is a secret ingredient of DivX. I downloaded the Pro trial version, but the free version may suffice for all I know. Once the original version of my educational video was validated, it could play in QuickTime right from the “converted” .avi file.

I just checked that the soundtrack had lasted all the way to the closing credits, because I didn’t want to play from the converted file. I still haven’t bought that new iMac, so my mac is a bit pokey for playing video. DivX Doctor seemed like a better bet for the pokey problem, so I converted my converted file to .mov with DivX Doctor, opened it up in QuickTime, and…voila! Education!

The one other program I downloaded in this process was a QuickTime full-screen viewer. Normally only QuickTime Pro will play in full-screen mode, but there are several free solutions to the problem available. I forget which one I downloaded.

[Addenda] It was PresentMovie from ThankYouWare. Now I’m downloading QiPo (QuickTime in, Preview out) to extract some screenshots.

I’ve been playing with icons. I downloaded a bunch of them and replaced my story files’ boring document and folder icons with cool planets, aliens and PADDs. Along with one of the sets, World of Aqua 4 from the Icon Factory came a lovely icon of the One Ring, and I wondered where I could use it.

The answer, in the end, was obvious. There’s only one artifact of a dark, all-consuming power on my bright and sunny mac - Internet Explorer. I did the standard Show Info, copy new icon, paste over old icon with IE, and you can see the results here:

(Click to see more of my desktop icons.)

My One Ring transplant into IE was only partly successful. It shows up in the dock, but not everywhere in the finder. I put it into the dock so I could admire it - I never actually use IE. Directly above the One Browser is the result of a more complicated icon transplant. I hated the default AIM icon enough to do ResEdit surgery on it. I got the directions from Resexcellence - you can see the original version there. The replacement icon is from Spiffy Apps at Icons.cx.

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.