Hand Coding

If you’ve upgraded to Leopard but still need to test a site in an older versions of Safari, you can do so through Multi-Safari. Much along the lines of the stand-alone versions of IE that are out there, these packages allow you to run older versions of Safari.

Interestingly enough, though Multi-Safari worked fine under the retail version of Leopard, it stopped working under OS X 10.5.1, offering the error “You cannot use the application ‘Safari 2.0.4’ with this version of Mac OS X.”. Fortunately, the maintainer of the Multi-Safari project, Michel Fortin, looked into it; and, within his blog entry describing the issue, some of the commenters chimed in with their own suggestions.

In particular, Thomas Aylott deduced that “Apple has specifically blocked all versions of Safari < 3 from running on Leopard 10.5.1” (d’oh!), but figured out a workaround by tweaking some of the package internals. To Thomas’ credit, he also compiled a fixed-and-ready-to-download version of Safari 2.0.4. I’ve tried it on my own machine and it works great.

A few days ago, my tab key stopped working in Firefox. I use tab all the time to move through form fields, so that perplexed me a bit. I had a hunch, though, that one of my extensions might have been causing the mischief. Sure enough, after checking the Firefox forums at MozillaZine, I discovered that Paste and Go was the culprit.

After I disabled that guy, things went back to normal — I guess that one of the extension’s recent updates broke something. So, if your tab key has been acting up too, that could be worth a try. (For those who may be curious, Paste and Go adds an item to the URL bar’s context menu which allows you to paste from a URL from the clipboard and load it in one step.)

CSS Media Types can be rather handy for delivering CSS rules to one platform or another. Not uncommonly, they can be used to automagically create printer-friendly pages. They can, however, also be used to create mobile-friendly pages (such as for PDAs, cell phones and the like) through the “screen” media type. The general idea is that large screen devices (CRTs and LCD monitors) can be fed CSS rules with the “screen” media type while handheld devices get a set of CSS rules with the “handheld” media type.

One fly in the ointment is that Pocket IE tries to outthink a page’s media types. Because some front-end coders put much of their CSS in a file with the “screen” media type, the Pocket IE development team decided that their browser should render rules with the “screen” media type. Ruh-roh. All of a sudden, all of the potentially small screen-unfriendly declarations “ floating, absolute positioning and the like — were being gargled and swallowed by this diminutive browser.

What that meant was that coders had to employ CSS with “screen” and “handheld” media types; and, in addition to having the usual mobile-type tweaks in “handheld” (such as perhaps removing extraneous page elements), coders also had to resort to undoing the effects present in “screen” stylesheets. Yuk. Pleasantly, Michael Angeles discovered a workaround — by capitalizing “Screen”, Pocket IE properly ignores CSS with that media type.

I’ve not been able to find a comprehensive table of CSS media support among handheld browsers, but the comments attached to this post about CSS for Mobiles are a decent starting point. There, the author set up some test pages for CSS media support and invited readers to send in their results. Here’s an excerpt:

• Pocket IE — applies “screen” and “handheld”
• SonyEricsson browser — passes over “screen” and applies “handheld”
• Blackberry (7730) — neither “screen” nor “handheld” are applied
• Motorola browser — passes over “screen” and applies “handheld”

I wouldn’t be surprised if some handheld browsers still incorrectly apply the “screen” media type. All the same, with Pocket IE back on the good side of the force, that helps quite a bit; granted, Pocket IE doesn’t have quite the market dominance that desktop IE does, but (until now) it was still one of the major offenders among mobile support for CSS media types. And, with a work-around as straightforward as tossing in some capitalization, it’s not hard to push Pocket IE in the right direction.

It seems like one of those “now, why didn’t someone think of this sooner?” ideas now that I’ve tried it, but I’ve recently discovered Jeremy Zawodny’s Resizable Textarea extension and I dig it. Like the name says, it allows you to resize text-entry boxes (<textarea> fields) in Firefox. There’re no fancy hotkeys to learn — you just grab the edge of the box, your pointer turns into a double-headed arrow and you can pull on the edge to resize it. Dandy.

Oh, and if you’re running Firefox 2.0 Beta 2 — a perfectly cromulent arrangement — you may have a bit of a hiccup since Resizable Textarea extension has only been green-lit to work on versions up to Firefox 1.5. Not to worry — the Nightly Tester Tools extension can take care of that for you. Among other things, it adds an “override compatibility” to the normal extension dialog box; since most extension authors are very conservative in their version boundaries, overriding those tends to work almost every time.

I was pleased to discover the #CSS IRC channel the other day and I’ve just learned that there’s a #Prototype IRC channel for discussing the Prototype JavaScript framework and the script.aculo.us effects library. (Sweet!)

For what it’s worth, I was actually looking for a general DOM Scripting IRC channel at the time, but I was delighted to run across this once since Prototype & Script.aculo.us are the two libraries that I’m actually using at the moment. Anyhow, the channel is #prototype on irc.freenode.net; or, if you want to try connecting to a different server, Freenode has several others from which to choose.

I came across a mention of a #CSS IRC channel among the comments on a post at TechCrunch. I did some Googling around to try to see if it was a just-started channel trying to get off the ground, but it looks to be a more established venue.

I’ve found that a second set of eyes can often be invaluable when debugging CSS (or code in general, I suppose) — sometimes all it takes is a second point of view to help shed some light on a problem. So, I think I may just give this channel a shot. The channel is #CSS on EFnet and I figure that I’ll load it up during the day and let it run in the background; even if I don’t run into an issue myself, maybe I’ll be able to help someone else out.

The channel’s official home page goes over a few rules that they follow — they're generally pretty reasonable, such as “You must validate” and “We need a URL to your problem”. In addition, though, they also discourage nick-changing (“nickname_lunch”, “nickname_brb”, and so on) which I may have to un-learn. I’ll give it a try and see how it goes :).

(Oh, and here’s a list of EFnet servers in case that’s helpful.)

Opera has always been a good browser with excellent standards support — and now it’s free!

Opera has removed the banners, found within our browser, and the licensing fee. Opera's growth, due to tremendous worldwide customer support, has made today's milestone an achievable goal. […]

For a moment there, I was wondering how they’d make their money, but it looks like they have a Premium Support plan in place. All the same, I’m pretty stoked about this. And, if Firefox didn’t have so many scrumptious extensions, I’d consider trying Opera as my day-to-day browser.

Update 2005-09-23: According to Om Malik, it was Google that made Opera free, through a compensation deal. Well, yay Google :).

We’re working on a new design for our blog at work and our boss has given us the go-ahead to develop it live. So, we’re developing right on the server and you can follow along as we implement the design.

We finished the design itself earlier this week and we started on the front-end coding yesterday. And, as we went along, I periodically took screenshots of my browser; then, at the end of the day, I stitched those together to form a time-lapse animated gif of the development process.

The site is still a work in progress and we’ll continue coding it today. I’ll keep taking screenshots and I’ll later post a “Part II” animated gif of the progress since the first one. Oh, and should you need a screenshot utility for Windows, I’ve found Screenshot Captor pretty handy for that — what makes it better than just regular PrintScr is that it can be triggered with a hotkey and set to automatically save the image in a directory of your choice.

Greasemonkey, in case you haven’t heard of it, is a handy extension for Firefox that allows you to change web pages on-the-fly. For instance, suppose you want continuous updating in Bloglines (so that the left pane with your feeds is always up-to-date? Not a problem. Or maybe you want tag auto-completion in del.icio.us? Can do.

Overall, Greasemonkey is pretty sweet. Unfortunately, a security hole has come to light over the past couple days. Mark Pilgrim, known for his sites Dive Into Mark and Dive Into Greasemonkey, explained it this way:

“This particular exploit is much, much worse than I thought.
GM_xmlhttpRequest can successfully ‘GET’ any world-readable file on your local computer.

“[this test page]
returns the contents of c:\boot.ini, which exists on most modern
Windows systems.

[…]

“In other words, running a Greasemonkey script on a site can expose the contents of every file on your local hard drive to that site. […] ”

In a later message to the Greasemonkey mailing list, he sounded the alarm:

“Uninstall Greasemonkey altogether. At this point, I don’t trust having it on my computer at all. […]

“[…] And I’m posting a big red blinking warning on every page of diveintogreasemonkey.org advising visitors to uninstall it, until all of these security holes are closed. This is why God invented the <blink> tag.”

I liked his reference to the <blink> tag there; and, yes, security holes and impending nuclear meltdowns are about its only appropriate uses (HHOS). That aside, I have uninstalled Greasemonkey for now. However, I look forward to re-enabling it once the developers work past this.

(Via: Anil, via Leia/IM)

You may recall an entry from a couple weeks ago about pretty URLs in WordPress. As it turns out, I ended up writing that entry twice. It wasn’t that I didn’t like the first version, but I just accidentally closed that tab in Firefox at the time (oops). I meant to click on the right-most tab in my browser but I instead clicked on the “close tab” button right there instead. Poof!

I was a little bit annoyed but there wasn’t much I could do about it. I wrote the entry a second time and I later looked around to see if there were any utilities which might help prevent that kind of thing in the future. One that I thought to look for was some kind of “undo close tab” extension. Well, ask and ye shall receive — a guy named Dorando created an extension called Undo Close Tab (how apropos). And, if you'd normally be wary of downloading an extension from a forum post, rest assured that he has a home page for his extensions as well, though the bulk of the information on Undo Close Tab is in his forum post.

I then took aim at the second thorn in my side, that dumb close-tab button which foiled my plans earlier. After all, even though an undo-close-tab extension would have saved me from the predicament last time, I wouldn’t have even been in that scrape if it wasn’t so easy to hit that button ;). Fortunately, that’s easily done as well. This MozillaZine Knowledgebase article writes about moving the tabbar (to the bottom of the browser or elsewhere on your screen) but it also includes the steps on removing the close-tab button (regardless of whether you want to move the tab bar as well). In short, you can remove your close-tab button but shutting down your Firefox and adding these lines to userchrome.css:

/* remove the close-tab button */
.tabbrowser-tabs > stack {
display: none;
}

Your userchrome.css file goes in your Firefox profile directory but the file doesn’t exist by default. Rather, there’s an example file called “userChrome-example.css” which you can Save-As to userchrome.css and make use of that. And, that previous link on the profile directory offers some tips on where your profile directory is located; that information is fine, though you may find it just as easy to just search your drive — starting from C:\Documents and Settings\ — for “userChrome-example.css”.

I felt better after getting those Firefox bits in order, and I then came across a WordPress plugin which also looked helpful. Gregory Wild-Smith wrote a plugin called Twilight AutoSave which “uses cookies and JavaScript to save the data you are typing and allow you to restore it (or delete it) later”. With that and the Firefox goodies in place, I should have a lesser chance of losing my posts next time. Not that I’m going to tempt fate, but I do have some peace of mind about it now.