divs vs. tables, part II – the compromise (maybe?)

<div class=’tablesque’>
   <div class=’rowesque’>
      <div class=’cellish’>A</div>
      <div class=’cellish’>B</div>
   </div>
   <div class=’rowesque’>
      <div class=’cellish’>C</div>
      <div class=’cellish’>D</div>
   </div>
</div>

stylesheet:
.tablesque { display: table; }
.rowesque { display: table-row; }
.cellish { display: table-cell; }

There – it looks like a table, because you told it to look like a table in the CSS. But the markup doesn’t say it’s a table – it just says you have a hierarchy.

I sorta fell into this idea because I’m working on making a web application work for iphone or for a regular browser, and in the plain browser context I wanted something to be a table, but on the iphone, I wanted it to act more like spans and divs.

To give you an idea of what a moron I am, you should know my first idea was to have a big table, and on the iphone, do things like: display: block, display: inline, etc. But the iPhone (and even Safari on the desktop) had problems with letting me convince it to display tables as non-tables. So finally I switched it to divs, and made the regular browser side do display: table, display: table-row, display: table-cell. And that seems to work okay for now.

So, standards people, there, I’m standardy. My ‘layout-like-a-table’ CSS is all in the CSS. I think this CSS looks a hell of a lot prettier than the crazy ‘float, clear, width, etc’ routines. And it should stretch better based on its contents á la tables.

As a bonus, within the table DOM stuff I don’t have mysterious invisible ‘tbody’ tags that chuck themselves in my table. I lost 3 or 4 hours to that a while ago.

Facebook Connect (FBConnect) And XHTML

So I’ve dabbled in Single Sign-On solutions a couple of times before, and none of them have struck me as particularly usable. They all function, certainly – but the amount of technical acumen required to try and get them up and running; or to actually use them tends to be too great.

So Facebook has been around for a while, they have a rather widely-used API, and now they’ve announced “Facebook Connect” – a single sign-on solution that uses your FB credentials to log you in to an external website. Nice.

So, on a lark, and borne of my extraordinary laziness and lack of desire to input yet-another-set-of-credentials-into-another-form, I added FB Connect to a personal app of mine. It only took me a little bit of an evening and an hour or so in the morning. I was surprised. It works pretty well. I didn’t have to totally overhaul my application – which is always nice. One thing I found that was very weird was that everything is asynchronous. You do all your work in Javascript. I would expect to do code like – “okay, facebook, make sure this guy is logged in. Then, do this other thing, and so on.” That’s not how it works, it’s all callbacks, because it’s all done asynchronously. You instead say, “Okay, facebook, make sure this guy is logged in, and as soon as you’re sure he is, do this whole big other thing for him.”

It’s an odd way to program, but probably the absolutely right way to design this API. Very AJAX-friendly. Okay, we’ll come back to this in a minute.

I’ve been working on some web stuff lately – both experimenting and trying to do real useful stuff – in XHTML5. I’m tired of people saying that certain things aren’t possible, when in fact, they are; they’re just really hard. So even though I myself have taken XML (and, by extension, XHTML) to task, I thought I’d give it a try.

I even did the super-nerdy “Serve as application/xhtml+xml to those who can read it, text/html otherwise” and that even worked. I did some CSS stuff that IE can’t read, but if you’re using IE, I don’t care about you that much. I’ve even tried to make it so the XHTML contains no ‘presentational’ tags – like div’s for forcing breaks, etc. And it looks kinda crappy, but I’m still working on it. The Content-Type trick I used didn’t work at first, but I got it to work all of the sudden and I watched my pages break right before my eyes. It really just helped me find missing close tags, I didn’t find it all that jarring.

The whole thing got me to thinking – it really seems that XHTML 1.1 and 2.0 are the real ‘problem’ here, and that XHTML 1.0 may actually be a decent standard. It seems to work OK. And the idea of mixing tags together from both XHTML and another namespace in order to get the best of both sounded appealing – and yet, that’s precisely what the Facebook Connect API does! It creates “XFBML” which turns into facebook-branded login buttons and so on. So I thought I’d give a quick look to my just-recently-built FB Connect app and see if I could do the same XHTML nerd thing I did before. Seems pretty obvious – I mean, even the <html> tag has namespace attributes for both xhtml and xfbml, it sounds just like this stuff is real XHTML and it should just work.

*****BZZZZT!!!!**** WRONG! Big fail. It does not work at all. It seems to be dependent upon HTML javascript rules. One of which I was able to work around, the other; they will have to. And there may of course be other problems buried in there that I can’t see yet because it doesn’t yet work. Hell, I even copied it to my website and tweaked my local copy and am still having trouble getting it to work. I got to the point where I am trying to de-obfuscate code, so I think that means “I lose”.

So this is a very weird world we’re now in – here’s one of the highest traffic websites in the world (fifth most popular at the time of this writing according to Alexa), and they’re encouraging people to write this hybridized, weird semi-xhtml/semi-html markup. The thing that I find most impressive is that it even works at all, to be honest.

And it does work, and works well. And lots of people are using it, as far as I know, but I haven’t heard anything about its general unusableness in XHTML. It just makes me wonder, is all. Is validity really important? Certainly, it makes sense to define a language and have everyone try and implement it to that standard, but going nuts about valid this and valid that does seem a little…I dunno…disconnected. Or, more likely, the Web Powers That Be have dictated that XHTML = dumb, so people are just making stuff in HTML4.01 or HTML5, hence no one noticing that FB Connect is totally broken in real XHTML mode.

I think Facebook cares about what *works* and doesn’t give a shit about what’s *valid*. And I think the standards committees have historically cared about what’s *valid* and haven’t given a shit about what’s *worked*. And I am willing to bet that somewhere in the middle is where we should be.

The irony here is that the feature I despised most in XML – namespaces – *could* find its way into HTML5 (Hey, FB is using it!). And HTML5 is really a reaction to some of the more horrible missteps made in XHTML 1.1 and XHTML 2.0. Which is the primary form of XML on the web. I’ve got to admit, though, it does certainly show a somewhat pleasant way to extend HTML – the HTML stuff goes in its namespace, the crazy crap you just invented goes into your own namespace, and if I can’t read your crazy crap, I won’t display anything. Deal? Deal.

Edit – Stupid Blogger preview doesn’t match what you post. Whoops. Added back those pesky carriage returns.

Pets make you stupid

My good friend, former co-worker, and current client Beckley once told me that having a pet makes you stupid, which he thought explained what he called his cat (which contained, if I recall correctly, “Chairman Miau” and “Monkey”). edit – the neighbor’s cat was Chairman, Beckley’s cat is The Monkey. He documented the slow and horrible transformation of his cat’s name on his blog.

I am afraid he is completely correct. These are the names I have used for my wife’s dog:

  • Lucy
  • Lucy Loo (Lucy Liu?)
  • Lucy Doops
  • B. Doops

So we’re now to the point where we refer to the dog as B. Doops. It’s not even as if I know what the B stands for. That’s just what she’s called now. I may have mispelled it – it could be Bedoops or something. Who knows.

So be careful. If you get a pet, it will make you dumb.

Edit – Lucy Loob, Luby Doo, and Luby Doob probably gets us closer to “B. Doops”.

Watchmen Review

So after walking out of the IMAX that was showing the Watchmen, I didn’t know how I felt about the movie. I twittered that I had seen it and that going out of one’s way for the IMAX version was not worth it. But did I like it? The following contains no spoilers, because I fucking hate spoilers and had to keep plugging my ears and singing “LA LA LA LA I CAN’T HEAR YOU” whenever anyone tried to tell me anything about it.

The answer is, that yes, yes I did. I really only realized what was going on in my head when I saw the last half of Spiderman today – which I think I’ve seen like five times..

Y’see there are Superhero movies like Spiderman, X-Men, and Iron Man. All of which I truly enjoyed. Interesting characters, good plotlines and subplots, great action sequences, little funny bits – all around good stuff.

But the Watchmen is not that kind of film. It’s closer to a Sci-Fi film, or even some character driven piece like Tarantino’s work. Sure, there’s some plot in there as to what’s going on, and there are some cool fight scenes, but that’s not what the movie’s about. It’s got that Sci-Fi “what if…” feeling about it, and also asks “what would hero types actually be like if they really were in the contemporary world?”

And getting those two types of movies mixed up is my mistake. This movie isn’t that movie. It’s very good, and interesting, but it’s not an action movie, and it’s not a superhero movie. Keeping those things straight makes it easier to think about and realize I enjoyed.

But if you’re not the type of person who wants to watch a movie that you could walk out of and wonder whether or not you liked it, then I wouldn’t watch this one.

But if you’re okay with that, I think the film is very good – and based on my brief readings of the graphic novel, pretty close to it.

My favorite advertisement ever

This is totally awesome on so many levels – I’m afraid this photo doesn’t really do it justice. These are some of the more interesting “choices” made with this circular:

#1) the terrible photocopy-looking nature of the thing
#2) “Ransom-note” style lettering – someone cut and copied letters from some other advertisement to make this one.
#3) In the black bar on top – you can apparently help $ave your “Peach of Mind”
#4) Insane parenthesis “If your property is in (Foreclosure)”
#5) Good things to note – “Note: Therefore you will not have any more headaches or worries.”
#6) Phone number in the bottom is written in pen, and is misformatted – apparently in area-code (1347)

I would worry that I might arouse these people’s ire, but I’m nearly certain they’ve stayed at least 50 feet from a computer for their entire lives.

edit – also “Call ! Call ! Call !:” esp. with the colon at the end, I like that.

SuperBraydix_3.iso

more than 10 megs smaller
powers off computer when browser quits
branded home page
fixed font metrics (yay!)
runs on a machine with 256MB RAM (unless you’re Bryan)
little Grub menu thingee may help with resolution.
Linux virtual terminal support (ctrl-alt-F1,f2,f3) so you can see what’s going on

CSS vs. Tables II – The Tables Strike Back

Read this about CSS and tables – with a really good example. Finally, someone who can make the argument I haven’t been able to verbalize. Thank you.

edit – Maybe we can say ‘OK, I may still use tables – but NO NESTED TABLES!’. Once you’re nesting them you’re doing something pretty freaky. You’re going wayyyyyy too far into the positioning realm using tables. And maintainability is going to be horrendous. So, bad. How ’bout that?

Edit 2
<table>
     <tr>
          <td>cell1</td>
          <td>cell2</td>
     </tr>
     <tr>
          <td>cell3</td>
          <td>cell4</td>
     </tr>
</table>

vs.

<div>
     <div>
          <div>cell1</div>
          <div>cell2</div>
     </div>
     <div>
          <div>cell3</div>
          <div>cell4</div>
     </div>
</div>

No real difference in the tagfulness there, so what are you saving by avoiding the table?