Exploration

Archive: October 2004

For those who are interested, I’ve added some new stuff to the Tools page, in addition to reordering it just a little. The first addition is a URL decoder/encoder, something I’ve needed from time to time when trying to unravel encoded-JavaScript bookmarklets. I’m sure every other developer in the world has created his own version of this tool at some point; well, here’s mine. The second new toolbox entry is for users of NetNewsWire 2: a small collection of themes. There are three as of this posting, each with a very, very different aim—one artistic, one historical, and one technological.

Hopefully I’ll have more to add to the S5 portion of the toolbox in the near future.

Some time ago, Simon Willison pointed out a very cool bookmarklet that helps solve the “I have one password for all my public sites” problem. This is where someone picks a password they can remember, and then uses that as the password for their accounts on Amazon, eBay, Hotmail, Netflix, et cetera. This is one of those things that security experts tell you never to do, and yet just about everyone does, because given the plethora of accounts most of us maintain, there’s no way we could keep track of which password goes with which account unless it was all written down somewhere… and that’s something the security experts insist that you never, ever do.

So the bookmarklet takes your ‘master password’, crosses it with the domain of the site, and generates an MD5-based result. So let’s assume meyerweb had accounts. You would fire off the bookmarklet, which would ask you type in your master password. So let’s say your master password is ‘passwd'; this is combined with www.meyerweb.com and the resulting password is 68573552. On the other hand, if you just use meyerweb.com, the result is 92938a6e

Now, while those aren’t the most secure possible passwords, they’re a lot more secure than ‘passwd’. So I’d like to make use of this bookmarklet. Fine, great. The problem is what you just saw: the generated password changes if the full host and domain name bit changes. This could be a problem if, say, amazon.com suddenly starts routing all logins to a server named login.amazon.com… or vice versa. So I’d like to adapt the bookmarklet so it grabs just the domain and TLD (I probably got those terms wrong; I usually do) of a URL. Problem is, I can’t write regular expressions for squat. I don’t even understand how the regexp in the existing bookmarklet works.

So, a little help, please? Given the form http://www.domain.tld/blah/foo/wow.xyz, I want the regexp to return just domain.tld. Just leave a solution in the comments, and you’ll earn the respect and adulation of your peers. At least those of them who read the comments.

Over the past few days, I’ve gotten a few complaints about S5 breaking in one browser or another—IE6 and Safari got the most mentions, but there were others. As an example, there was a report that the slide show would just stop working after a certain number of slides. In every case I’ve seen so far, these problems have been caused by invalid XHTML.

The most common validation problem I expect people to run into is with the structuring of lists. For example, suppose you want two levels of lists on a slide. You do it like this:

Notice how the nested list is inside the li element? That’s correct. You should never put nested lists between list items on the ‘outer’ list, even though a lot of people have made that a habit. The only element that can be a child of a ul (or an ol) element is an li. That’s it. Anything that needs to be ‘nested’ goes inside one of the list items.

Alternatively, you can put structures after the list, if that’s what you want. As an example:

Nothing wrong with that, as long as you keep the side content inside the <div class="slide">...</div> element. Or you could put your pre inside the last list item. It’s really up to you.

Remember that S5 stands for “simple standards-based slide show system”. That’s not just marketing: the CSS and scripts pretty much depend on valid markup structures. If the markup is invalid, it will very likely lead to confusion and unexpected results. In other words, violate the standards and they’ll violate your slide show. There’s a certain poetic symmetry in that, I think.

(And yes, I do know that as of posting, this entry doesn’t validate. Believe me, the irony is not at all lost on me. This happened because I haven’t gotten around to fixing WordPress so it strips HTML before inserting the entry title into the title element. I ranted about the problem a while back… and it will eventually get fixed. Possibly when I upgrade to the next version of WP.)

Mail here at meyerweb.com is, for the moment, dead. I threw up a notice on meyerweb’s home page and was going to leave it at that, but it occurred to me I could get more data from people if I posted and let them comment. So if you’ve gotten a bounce back from my e-mail address, or if you send me (or Kat) a test message and get a bounce, could you post the error text and relevant headers in a comment here? It will help diagnose the problem.

Oh, and check to see if someone else has posted the same error before you post. We don’t need a hundred copies of the same error. If you have a different error than those already posted, though, then by all means share. Other information, perhaps such as that divined by you command-line wizards and server administrator types, would be most welcome as well.

For those who aren’t sure how to tackle creating an S5 presentation, I’ve put a basic primer online. In addition to explaining the basics of an S5 presentation, it links to a ZIP archive of a “blank” presentation, so you can use that as the basis for any presentations you create.

I’m planning to write in the near future a short guide on how to switch themes. It isn’t quite as simple as it first sounds, mostly because of the possibility that an author would create a theme package containing only the files that need to be replaced, instead of everything that usually goes in the ui/ directory.

Like it says at the end of the primer, let me know if anything’s missing or unclear.

Okay, folks, here it is: S5 version 1.0. In addition to a few minor tweaks to make the system more robust, I’ve created a couple of themes to add to the ones Martin Hense created. I have links to them all on the new S5 Themes page. Share and enjoy.

One of the more notable tweaks is that the URL of slides.css is now read by the JS at document load, and used from then on. Thus, you can point to a slides.css that’s in a different location than the rest of the UI files, if you so desire. Another change is that the introductory slide show now contains some images, including one that maps out the file structure. These were added so that new users would have some inkling of how to put images into a slide show. There may of course be other ways of accomplishing the same task.

There were a number of good ideas and code contributions, but they were also too last-minute to be included in v1.0. I’ll add them to a “to do” list for v1.1. As to the suggestion that the project be moved to SourceForge, it’s certainly an idea I’ll explore further. I don’t know enough about SF to know how such an arrangement would work; I only ever go to SF to download stuff, and find the site to be somewhat annoying in that it’s never immediately clear to me what I’m supposed to download, not to mention finding detailed information about whatever I’m downloading seems much harder than it should be. For now, I’ll keep S5 local to meyerweb. It can always be migrated over to SF later on, if that turns out to be a good idea.

There are still limitations in the system. For example, if the slide show assumes 1024×768 and your window is 800×600, then you’re likely to have content cut off by the footer. So edit the CSS to assume 800×600 (the easiest step is to lower the font-size of the body element). Or set things up so that scrollbars will appear on the slide content if it overflows the slide. You get the general idea, I think: this is very much a DIY-type system, at least for now. The JS works, and the core styles help it work, in a cross-browser fashion. Anything after that is up to the theme author.

There may one day be routines that automatically scale text, or dynamically break up slides, in order to solve the clipping problem. There may also be features that let you trigger animations by hitting “next”, let you easily integrate SVG content, allow the use of the navigation menu in Opera Show, permit dynamic theme selection, and so on and so on. For now, we have a good standards-based slide show system, one that should suffice for a great many people.

So I just noticed that my PowerBook no longer realizes that it has a Bluetooth module installed. I get a little “broken B” icon in the menu bar, and when I open the menu it says in greyed-out text “Bluetooth: Not Available”.
I fired up the Bluetooth setup assistant and it said it couldn’t find any Bluetooth hardware either. The only two noteworthy things that have happened recently are I installed the latest Apple security update, and I let the laptop drain itself of power in order to reset the power level calibration. I haven’t ever run a Bluetooth firmware update, so that doesn’t seem like it’s the problem (unless of course the problem is that the security update requires a firmware update, but nobody said anything about that).

Oh, and no, I don’t have a Bluetooth device with which I can test the Mac’s module. It still bothers me that the computer seems to have lost some of its hardware. I’d sort of like to have it found again. Has anyone else seen this problem, and if you fixed it, how did you fix it?

I was recently honored with a request to contribute to Design In-Flight magazine, and so the latest issue contains a piece titled “Stripped Down Style”. The article is an expanded version of Really Undoing html.css, accompanied by some screen shots and containing a copy of Tantek’s undohtml.css. The magazine also includes an article from Jon Hicks about his icon design process, focusing on the icons he’s created for NetNewsWire 2; a piece from Keith Robinson on public speaking; a how-to guide for mapping out the structure of your style sheets by Yasuhisa Hasegawa; and a good deal more.

It does cost a few bucks to get a copy the magazine, but they really are a very few—certainly several less than you’d spend on a comparable magazine in print. You can also get a yearly subscription of four issues for ten bucks. Having read the first two issues of the magazine, I’m definintely feeling an urge to subscribe. Editor Andy Arikawa has proven a master at pulling together some great content from interesting authors, and at covering a diverse set of topics.

I must also admit to some amusement at how the title of this issue, “Not Your Father’s CSS”, echoes (most likely coincidentally) the title of my radio show.