Love cats

If I were an animal--a non-human one, I mean--I would most probably be a cat. In fact, sometimes I think that I am one already. Or mostly. I flatter myself that cats think so, too.

I've never known what it's like to not have cats around. Right now, we have eight "legal" cats (all girls, except for one) and countless strays (all boys from the looks of 'em). There's going to be a sad change soon, though, because plots are being hatched to keep most of them out of the house. I'm worried because it's the rainy season already and they'll be cold and damp outdoors. And nothing demoralizes cats more than the cold and damp.

To cheer myself up, I looked up cat sites and found a cat who doesn't give a rat's ass about the cold and damp:

It's the Marbled Catshark (Atelomycterus macleayi). I found her in Deep Sea Images Library. Isn't she a beauty? (As well as looking like she could pwn everything and everyone. I wonder what she likes to eat.)

After cats, my next favorite non-human animals are fish. But they're a bit harder to be friends with because it's impossible to tell what they're thinking or how they're doing even--unless they do something drastic like go belly-up. An aquariumful of goldfish broke my heart once and, since then, I've tried to stick to mammals.

The fisherman and his wife

There was once upon a time a fisherman who lived with his wife in a pig-stye close by the sea, and every day he went out fishing. And he fished, and he fished. And once he was sitting with his rod, looking at the clear water, and he sat and he sat. Then his line suddenly went down, far down below, and when he drew it up again, he brought out a large flounder.

Then the flounder said to him, "Hark, you fisherman, I pray you, let me live, I am no flounder really, but an enchanted prince. What good will it do you to kill me. I should not be good to eat, put me in the water again, and let me go."

"Come," said the Fisherman, "there is no need for so many words about it--a fish that can talk I should certainly let go, anyhow."

And with that he put him back again into the clear water, and the flounder went to the bottom, leaving a long streak of blood behind him. Then the fisherman got up and went home to his wife in the pig-stye.

"Husband," said the woman," have you caught nothing to-day?"

"No," said the man, "I did catch a flounder who said that he was an enchanted prince, so I let him go again."

"Did you not wish for anything first?" said the woman.

"No," said the man, "what should I wish for?"


The rest of the story is here.

Readability and legibility

Readability and legibility are often confused. Readability is most often and more properly used to describe the ease with which written language is read and understood – it concerns the difficulty of the language itself, not its appearance. It is a psycholinguistic rather than a typographic issue. Factors that affect readability include sentence and word length, and the frequency of uncommon words.

In contrast, legibility describes how easily or comfortably a typeset text can be read. It is not connected with content or language, but rather with the size and appearance of the printed or displayed text. Typography - Wikipedia

Let's go for both.

I get tired of Lucida Grande easily, like having to watch my posture all the time. Maybe I should learn to like it more?

If I were a font, I would probably be Garamond.[1]The most recent book I designed was all Garamond and variants. There's something about serifs that contributes to the readability of a book. Of course, this could just be me and my love for Victoriana.

But, for online legibility, nothing beats verdana.

(Oh, lordy. I just realized... No, this has nothing to do with operating systems.)

When is a pop-up not a pop-up?

When it's the Snap Shots widget, of course. After 12 hours of having previews coming at me whether I liked it or not--even my post-edit link had a preview!--I just had to remove it. It was either that or make sure to keep my mouse along the margins most of the time.[1]As easy as keeping your arms stuck to your sides while typing. Snap Shots is a good idea but an even better if they put a toggle for it.

So, no more previews, nifty or otherwise.

But there's something better. I now have a pseudo-footnotes all-CSS thingy for my little digressions/elaborations.[2]During my research, it seemed that most people didn't get the point of footnotes. I didn't want to link to anything else online and the regular tooltip wouldn't stay put long enough for my purpose. Almost all of the possible solutions were javascript and, once upon a time, when Blogger was still young, I would've just tacked one on any old where. But I'm stuck with their newfangled system for now and CSS is much much nicer, anyway.

Things to fix: The span gets cut off when it hits the main wrapper edges. Also, it only works on Firefox and IE. For all my tweaking, Opera doesn't want to have anything to do with it. I don't think it's Opera's fault, though--more like something in the Blogger code. Maybe I'll be able to hunt the problem down later but, for now, I'm a bit too tired to please all browsers (even as a matter of principle).

-----

UPDATE: Re the Opera-footnotes problem, oddly enough, it works now. But only for this post (and hereafter, I expect). It still doesn't work on the earlier ones. Hmmm.

A conversation

While trawling the internet for CSS tooltips to turn into pseudo-footnotes, I found this conversation between a dad and his 3-year-old daughter:

I were a little tiny baby a long time ago.
That's right. Everyone starts out as a baby.
Even Mommies and Daddies were babies a long time ago.
Yep, even Mommies and Daddies.
Everybody is a baby and then everybody becomes a big kid.
You got it.
And then everybody grows up.
That's right.
And then everybody dies.

I'm a rather cranky sort but this made me cry (a little). I wish I were as wise as that little girl. Read the whole conversation here. You just have to.

-----

NOTE: The dad here is also the person who wrote the handy-dandy CSS Pocket Reference in my library. If CODE IS POETRY then, I guess, coders are poets, too. Or close.

There's such a lot to learn and unlearn.

Font: Hiroformica

Its damage character confirms concepts like destruction.

Hmmm. Saving this for future use.

-----

I must confess that, whenever I read blogs (even my friends'), I hardly ever click links. Usually, I'd rather take their word for it (i.e., that something's interesting, funny, sexy, etc.) than stall my growing-slower-by-the-day computer, and so I miss out on a lot of goodies. Of course, this is just a segue to Snap Shots that I just installed to alleviate my link lacklusterliness. On other sites, the link previews actually make me click more (requiring a reboot every 30 minutes or so; my system's that shot).[1]I kept the image link to distinguish the previewables from the acronyms and such. Still waiting to see if they bug me... SIX HOURS LATER: Yep, they bug me.

As expected, it works great on Firefox but turns Opera into a fidgetty little old lady with a blinky address bar. IE, in the meanwhile, doesn't render the outer wrapper, which includes the pointer. Or, again, it could be my computer. But what's fun about Snap Shots--for me, at least--is that when I hover over my books, the Amazon summaries show up. Nifty, eh?[2]Unless it shows the Amazon homepage, which it does sometimes. I dunno why. Also, if the site has an RSS feed, it shows the feed. And THAT is the closest thing to advertising you'll ever find on this or any of my sites.

Twitter of a death foretold, anyone?

And so the latest tool for howling in the internet wilderness, Twitter, was down almost all day. Can you imagine all the pent-up twitters that must be bombarding the system right now?

Twitter's nice for those stray bits that don't really merit their own post or, at least, can be said in 140 characters or less, although I think its real purpose is to serve as a kind of real-time and more-or-less mobile message board. I'm not likely to be using it out of the web, though, because it's a bit odd, don't you think, to be informing so many people of what you're doing (besides twittering about it) at the exact time you're doing it? "Informing" is the operative term here because, unless explicitly demanded, no action need be taken by the informees.

I'm currently using it as a kind of sideblog. (I wonder where all the proper sideblog services went. The ones I had disappeared long ago, along with the ephemera.) At first, I wanted more than one twitter to show and found some code for that--there's a too-cute but not very customizable one over at Widgetbox--but, on second thought, one twitter's enough twittering.

What I'm thinking now is if this is where blogging might be headed. I mean, lots of blogs (and anti-blagues) are really just lengthy twitterings, anyway. We would be doing everyone a favor by being the soul of wit and keeping our existentialist musings down to soundbite length. If we're lucky, this might be the dawn of a new literary form: the epistolary twitter.

-----

I just remembered a phoneblogging service offered by Pinoy Exchange in late 2001. A friend of mine signed up for the service and would post things like running to the premiere screening of Lord of the Rings and how he felt dizzy during the train ride. Stuff like that. And I told him that it's just like sending SMS but without expecting a reply. Or SMS-ing yourself. (Why?) But the service was bland with no networking capability to speak of. (This was pre-FOAF apps.) Needless to say, the service didn't really take off and it's gone now.

Iconic yumminess

Ooh-lala. Cherchez La Bardot! All the lovely pretties are from The Zeldman. Thinking of uses for them now but not as replacement for my cat, of course.

It used to be that having a favicon meant that you owned the domain (or, at least, had access to the root directory). But no longer. Now all you need's access to the head. It doesn't even have to be an ICO file anymore, even. Placing your own favicon feels a bit like cheating, though, when you boot the original favicon from a service like Blogger. (Which is why I put in the optional badge.)

In my mania for detail and tiny blingy things, I also used to make animated 80x15's guaranteed to trigger migraines in the susceptible. But I had one favorite button that I found somewhere I can't remember anymore. It's this:

Endless guinea pig of a header

It started as CSS (from Dynamic Drive's CSS Library--I even kept the two reds because they're my favorites). But then, I kept having nightmares about the absolute positioning of the titles, and so I changed it to clunky rollovers just to be able to keep the colorchange effect. The next day, I woke up to the realization that the colorchange effect was not worth the clunkiness and so I turned it into an imagemap, thinking that the fewer moving parts there were, the better.  [Since Flash came along, imagemaps have turned into something like dinosaurs but, pixel-counter that I am, I have a foolish fondness for them. One of my pet sites (left) was navigated by clicking on the "insides."]

But it soon got boring knowing that the ersatz arials were just sitting there doing nothing and with no hope of doing anything ever. And so I went back to the original CSS but only after I figured out how to keep the thing from breaking in other specs. (It's all in the div's, silly.) And then, last night, I checked it on IE and saw that my 8px-high rule was--horror of horrors!--a 16px on the danged browser. It looked perfect in Firefox, of course, but there was a 2-pixel misalignment in Opera. I worked on it for hours and hours but it just wouldn't go right.

It's almost humiliating to be building one's site around crappy IE when it can't even do rules properly. But there was also the Opera misalignment eating away at me. Now, the only way to keep a rule perfectly aligned with whatever it's connected to is to use borders instead. And so, I went back to the rollovers. (Not so clunky now, codewise, because there's just one.) And that's what's up there right now. As of 3:58 pm today.

-----

It's not always this difficult, of course. If it weren't for the fact that I consider the rule an important element in this design's semiotics, I wouldn't be so psycho over it. It's times like these that I am reminded of the big difference between "hand coders" (supposedly an elitist and purist bunch) and WYSIWYG users. I find that, while I am interested in how a page will turn out, what really turns me on is figuring out the many approaches to solving one problem. My code's really messy (which exempts me from the "elitist and purist" accusation) because I keep most of the "defective" solutions there for later reworking if I think of something. Afterwards, when everything's solved, I tend to lose interest in the site and start thinking of an entirely different design. It's no less true for being a cliché that it's still the journey more than the destination that matters.

Fete de la Musique 2007

It's this Saturday, the 23rd, at Malate. Out of 150 bands, I only like, maybe, five.[1]The Wuds, Radioactive Sago Project, Coffee Break Island, Milagros Dancehall Collective, and...I can't remember. And I'm still not over a bad Malate experience. So, not going, most likely.

The picture's from Fête 2005. It was so mobbed, you needed to be "with the band" to get to a decent toilet.

Framebreak

There's a line of javascript for making sure that framed pages can't be called outside of their frames. This happens more often than we think because spiders are indifferent to context (and coder's intent), the result being googled content with no indication of where they properly belong. Outside the frame, any file--whether it's about cold beer or cold fusion--is just one of gazillions of URLs floating out there.

Another less serious thing that can go wrong with frames is that, if the coder isn't mindful of target tags, external links could find themselves trapped inside the frame. Some really nice websites get ruined for me that way. Conversely, it also bothers me when I place an external site like, say, from Blogger inside frames. It bothers me even if it's my own account.

I meant for this page to be part of my top-secret portfolio site umbrella+sewingmachine and so I wanted a unified design. Php was my first choice but since I didn't have time to revive my domain and couldn't wait to start, frames were the obvious no-brainer. But it just kept niggling at me, framing this page and so, this morning, I set it free. I'm pretty sure, however, that nobody will notice because (1) it still looks exactly the same, pixel for pixel, onload, and (2) nobody's reading this, anyway.

But changing one page means having to change the others and that's what I'll be doing for the rest of the day. Widget testing, too. And maybe footnotes.

It can't be said often enough

I first posted this three years ago, on Firefox 1.0's release day. On my WordPress thingamablog. Sigh.

Browser alert: Bullets

FF1.5 places the bullet smack on the baseline while Opera 9.2 places it about 2 pixels higher, making it look like a superscript. It wouldn't matter if my font size were bigger than 11px. This means that, for it to look just right in Opera, my bullet image shouldn't be more than 7 pixels tall.

Right.

This being as good a time for lists as any, here are the Top Ten Web Design Mistakes of 2005, according to Jakob Nielsen (a.k.a. "the king of usability"):

1. Legibility problems
2. Non-standard links
3. Flash
4. Content that's not written for the web
5. Bad search
6. Browser incompatibility
7. Cumbersome forms
8. No contact information or other company info
9. Frozen layouts with fixed page widths
10. Inadequate photo enlargement

If you check out his site, you'll see that he really does practice what he preaches but... I don't think I want my site to look anything like his. The font size and leading--isn't leading a big part of legibility?--make my brain bleed rather. But his picture's nice. :)

Seriously, I agree with all his calls although some of them don't apply to me. His observations on forms and company info are obviously meant for corporate sites. But even before I read this, I was already a little paranoid about browser incompatibility and layouts that break on other specs. As for fonts, I prefer them small because they're more like books to me that way. Ditto with the "content that's not written for the web". "Short, scannable, and to the point" have their virtues but it's not as if I were a salesperson with just five seconds to make my pitch before the door gets slammed in my face.

But what makes me happy is that I have found an ally in my aversion for Flash. I try--really, I do!--to find Flash-y sites to like. But after the initial amusement, the wiggly things just get irritating. And that's with broadband; before broadband, I avoided them like the plague. What's worse than finding that there's nothing worthwhile behind some slow-loading splash page than having to look at some spelling error permanently etched on something brazenly shiny? (There used to be gazillions such in the Philweavers site that I haven't had the stomach to go back.)

But the biggest reason why I don't like Flash is its black box-ness. If all sites had been made with Flash way back then, I wouldn't have learned how to DIY them. In short: FLASH IS SO NOT PUNK ROCK.

CSS horror

Last night, I checked into my Multiply account--I belong, sheepishly, to at least five social networking sites--and found one of my pet CSS peeves. The overlapping text is due to static widths and ruins even the most gorgeous CSS layouts. (It doesn't happen with tables and is ugly in all browsers and resolutions.) To avoid this, names should be kept as short as possible. "umbrella+sewingmachine" would have occupied two boxes with nothing but an oops for my right-door neighbor. But it IS a problem when design doesn't work with content like this.

Browser alert: Acronyms

Firefox 1.5 and IEs 5 and 6 support the acronym tag properly. Opera 9.2, however, glitches by transforming the text into smallcaps (not even consistently) and displaying the title attribute. I checked my CSS and there's nothing to be umbrageous about. Hmmm... Must think of other thingummies to test.

The Treachery of Images

Recently, a friend who helped me platform-test some pages made a droll comment that went something like: "So this is what Art Studies majors can do!" Actually, this has nothing to do with anything I learned in school. Like most everything else, I learned to make websites at home, by myself, with a few good books and a lot of reverse engineering. The medium fascinated me the way others didn't because I saw it as almost magical: With just Notepad and code, it was possible to make something out of nothing.

[Also, unlike most things that involve staring at a screen, I didn't have to be a passive consumer. Reasons 1 to 100 why I don't watch tv.]

But, yes, I suppose there's a great deal that's Art Studies-ish about this site. It can't be helped because it's my site, after all. (N.B.: My being an Art Studies major also has very little to do with school but that's another story.) Probably the most telling signs are the site name and the blague title. Both refer to the Surrealists: the first is from Comte de Lautréamont's "Songs of Maldoror" (beautiful as a chance encounter, on an operating table, of a sewing machine and an umbrella) and the second is from the painting up there, "The Treachery of Images" by René Magritte. It's a favorite of mine, like a book I keep going back to.

Michel Foucault once wrote about the paradox contained in that painting (excerpt here). To those of us who are used to "hip" layouts and po-mo attitudes, the paradox requires no long elaboration. What hits us, of course, is the contradiction/tension between the image and the text. For the art historically-minded, there's also the awareness that this tension is only possible in a mode that valorizes verisimilitude. (For example, there is no such tension in the early Cubist paintings/collages that incorporate text, simply because everything--ladies and lutes, chairseats and newspapers--is "isotopic" or mooshed together on a single plane, as was Picasso and Braque's intent.)

But as I reread the painting, I found that it can have a new meaning in the virtuality of the internet. In my previous post, I said that my header titles used to be regular arial text but that they're GIFs now. On the level of appearance, there is absolutely no difference between image and text but, in fact, they are two different animals altogether. Text is what we get when we type, whether we use Times New Roman, Trinculo, or ASCII. On the web, text is what spiders and bots "read" hence all the SEO schemes. On the other hand, a GIF file is an image file and not "read", only scanned in terms of width and height, number of colors, etc. It is bad form, search engine-wise, to make one's header a GIF file--like mine. To a human, this site's name is, obviously, umbrella+sewingmachine but, to a crawler, this site would be nameless if it weren't for the title tags. (If you know your HTML, you can also make all sorts of metas to get the crawlers' attention.) But, as I said earlier, it makes no difference to humans whether it's a text or a graphic, as long as the appearance is the same. On the internet, because everything--all the combinations of texts and images everywhere--is virtual, everything is mooshed by nature.

It is the interwebs's blague that everything is, to all intents and purposes, equal. That painting of a pipe that says it is not a pipe isn't even a painting (in the sense of a certain arrangement of pigments on a surface) or a tangible simulacrum of itself, already a simulacrum; it's a 15-KB JPG file of width 400 and height 285 (as resized by Blogger). And we ourselves might as well be fish in a sea of irony, having our bit of fun by putting acronym tags to things we already "know".

Before & after

On the outside, the only difference between the current header and the earlier (cf. Mise-en-abyme-ish) is the horizontal rule's length but, in terms of code, there's a huge difference. In fact, in the current header, the dark red line isn't even a horizontal rule. As mentioned in the previous post, the earlier navigation bar was built using CSS with the labels being regular arial text. In the new navbar, the labels are actually several GIF images and the seemingly continuous red line is the border above each. There's also a spacer GIF with its own red border to push everything to the proper place.

It took quite a bit of manual labor because my ancient copy of Photoshop seems to have gotten fatally corrupted since I used it the other day. So what I did was I took a screencap of the page, cropped everything else but the navbar, converted it to GIF (after downloading a trial copy of ReaGIF 2.0¹), cut it up, restored the original colors, and recoded it. Obviously, I have too much time on my hands...as well as being horrendously OC.

-----

¹ The trial copy places a pretty--or, rather, ugly--big watermark at the bottom-left of the converted file, rendering it quite unusable for most purposes.

Problem of the Day

Just because I said that this site looks better--i.e., is most tolerable--with a screen resolution of 1024x768 only means that that's my screen res (which happens to be the current "standard"). It's funny about screen real estate. I prefer "sticky" layouts that don't disappear or stop mattering when the user scrolls down and so I find myself trying to make design and content as inseparable as possible onload, so to speak. 1024x768 is just comfy considering that, until four years ago, 800x600 was riches enough.

Back then, there were only two browsers to worry about: Netscape and MSIE. But during the transition from 800x600 to 1024x768, the biggest problem was making sure that a site designed for 800x600 would still work for 1024x768, and vice versa. It entailed a lot of right-clicking into Properties and was tedious work. Of course, one could always make two versions of the same design. For a couple of sites (particularly those where the background image was an integral design element), I even used a bit of script called a browser sniffer that would politely redirect imaginary users to the appropriately coded site.

The point of all this rambling is that the Problem of the Day is this site's navigation bar. I've been trying to use as much CSS as possible--which still isn't much--and that's why I used that navbar. On a screen resolution of 1024x768, it is absolutely positioned down to the last pixel. The problem with absolute positioning, though, is that it can get really ugly in other screen resolutions. As in coder-should-go-bury-her-head ugly.

So, it's back to regular rollovers for this site.

Mise-en-abyme-ish

Firefox 1.5, check. Opera 9.2, check. Ummm... IE 5, check. So far, so good.

I'm probably the only person left who still checks on IE 5 but I haven't bothered to go higher since Firefox's release day three years ago.

Anyway, now that I've gone back to Blogger for this little thing here, I find that Blogger does NOT work well with Opera. At all.

Opera's cool but there's an earlier version that's apparently too cool to open Friendster properly.

Other stuff noted over the past 24 hours:

• Waiting for that tagboard to load in IE is like watching paint dry.

• IE 5 can't handle modal windows. I wanted modal windows--the Flash-ey effect where the rest of the screen goes dark--for the Pictures page but decided to scrap it for a regular viewer.

• Any old line-height that works for IE 5 and FF 1.5 looks crummy on Opera 9.2.

• The frameborder=0 frames--EEK! FRAMES!--attribute that hides the coder's guilt and shame isn't enough for Opera that demands an additional border=0 framespacing=0.

• The impossibly generous free hosting service I found that allows php plants bits of tracking code in my pages. Sneaky. I wonder what they're going to do with that information. It also has a problem with the pop-ups on the Writing page that I still have to figure out a workaround to.

• And because I just hacked the form in the About page from a commercial site, I wonder how long I can get away with it. So far, it works perfectly fine. (Don't worry. I set up a legit site that accesses it, too, so it makes no virtual difference.)

• I still don't feel the need to learn Flash. It's almost barbaric that I can't let go of Notepad just yet. A few days ago, I tried to install Dreamweaver 8 (courtesy of Mike) but, as expected, my computer couldn't take any new programs and so I still don't know what it looks like or anything.

That's it. And I'm still looking for little fishies on a Friday night.

Ooh-lala!

French Parliament Will Switch from Microsoft to Ubuntu

In November last year, the French parliament announced that starting with June 2007, they will use Linux desktops and servers. Recently, they announced the name of the Linux distribution which will be used, and that is, ladies and gentlemen, Ubuntu Linux.

This is so Mike-sexy.

CSS CSC

How did we get to the point where it feels like we have to apologize for using tables or--gasp!--frames?

There are different kinds of websites and I still think that you don't need a swiss army knife just to pick your teeth. The portfolio site I'm almost done making isn't "dynamic" (in the sense of having to be updated every other day) so why should I feel guilty about not using an all-CSS php CMS?

Post #8963427

I want little fishies swimming around at the foot of this page but I still haven't found the perfect ones.

Blogger's interface has gotten so idiot-proof since the last time I checked it out, it's almost insulting. I spent hours scouring the code and wondering why I couldn't find the old tags before I figured to click on the new tabs and... voila! Instant prettification.

Black boxes smell fishy to me. (No offense to fishies.)