crowley code!

Archive for October, 2007

10/30 Meebo platform needs to come to XULRunner (4)

api, flash, instantbird, javascript, meebo, xulrunner

Today Om is reporting that Meebo is launching its own platform for third-party Meebo widgets. I could care less about the widgets, but could this be a REST API for sending IMs? No (dammit).

The Meebo API is actually an ingenious bit of Flash with a JavaScript wrapper that talks to Meebo. Once your hosted app gets some params from Meebo, you can do exciting things like listen for new messages. Through the same JavaScript-wrapped Flash object, you can also send messages. Praise be! For more, check out the Meebo JavaScript docs, which are minimal to say the least. Oh well, there’s sample code.

A couple weeks back, Instantbird did a lap around the Internet. I must call failure here, because when I tried to sign into Yahoo! Messenger it crashed immediately, spectacularly and consistently (tried four times). I know what you’re thinking: but Yahoo! Messenger is a closed system, of course there will be problems. Yeah, but Adium is built on the same library and pretty much always signs in happily (but never, ever shows me when Cal is online).

Seeing as Instantbird is built on XULRunner (my new life partner), a nice JavaScript way to send IMs would be just sweet. From my limited research, it seems embedding Flash in XULRunner is possible, as is opening a browser window within Instantbird to snag the authentication params from Meebo. Then it’s smooth sailing. Maybe.

The glaring hole in all of this is that while you can sendMsg to your heart’s content, thus far you have no one to send to.  This isn’t a full-blown API, folks.  It’s a widget platform.  There’s no way to get at someone’s buddy list.  Back to libpurple, I suppose.  But if Meebo made the rest of their service available as a REST API (to complement the far superior Flash method of sending/receiving messages), I’d be sold.

10/22 HTML layout the XUL way (0)

css, firefox, html, ie, jquery, xhtml, xul

Layout with HTML and CSS sucks. I was one of the people that clung to tables longer than the average bear (if bears could write PHP) because they actually work. My designerish friends guilted me into diving full-on into semantic HTML served with a hack-fest of CSS.

There’s got to be a better way.

I started this evening looking into using a XUL-style layout on a regular website. To my surprise, 35% of my visitors are on IE. WTF, really? So my first solution (follows) won’t work too well. If IE was something like 10%, I wouldn’t hesitate to screw them and go Firefox-only. 37Signals mention something about not trying to be everything to everyone to promote simplicity and I think catering to that 90% would certainly promote simple code. And since I know how a lot of JavaScript nerds feel about using non-standard HTML attributes, I had jQuery add the necessary bits after the fact.

<style type="text/css">
.hbox, .vbox {
    display: -moz-box;
}
.foo {
    width: 200px;
    margin: 0 10px 10px 0;
    padding: 10px;
    background: black;
    color: white;
}
hr {
    margin: 0 0 10px 0;
}
</style>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.vbox').attr('orient', 'vertical');
});
</script>

But as I said, I don’t want to screw all of those IE users. So onward to a better solution, using the same nice markup:

<div class="hbox">
    <div class="foo">foo</div>
    <div class="vbox">
        <div class="foo">asdf</div>
        <div class="foo">qwerty</div>
        <div class="foo">hooah</div>
    </div>
    <div class="foo">bar</div>
</div>
<hr />
<div class="vbox">
    <div class="foo">foo</div>
    <div class="hbox">
        <div class="foo">asdf</div>
        <div class="foo">qwerty</div>
        <div class="foo">hooah</div>
    </div>
    <div class="foo">bar</div>
</div>

This time, a bit more must be left to JavaScript to keep the older browsers up to date. Because nesting a bunch of boxes in boxes in boxes is just going to happen (otherwise what’s the point?), I had to resort to the > CSS selector, which has less than stellar support. So jQuery to the rescue again. Here’s my current CSS/JS. Don’t have IE, so this only theoretically works there. Anyone want to verify?

<style type="text/css">
.hbox {
    border: 1px solid blue;
}
.hbox > div {
    float: left;
}
.hbox br {
    clear: both;
}
.vbox {
    border: 1px solid red;
}
.vbox > div {
    float: none;
}
.foo {
    width: 200px;
    margin: 0 10px 10px 0;
    padding: 10px;
    background: black;
    color: white;
}
hr {
    margin: 0 0 10px 0;
}
</style>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.hbox').append('<br />');
    $('.hbox > div').css({
        float: 'left'
    });
    $('.vbox > div').css({
        float: 'none'
    });
});
</script>

Demo: http://rcrowley.org/work/xul.html

Update: I’m experimenting with ways to duplicate the flex="1" attribute of XUL boxes. Will post soon.

10/20 Where did all my XULRunner tips go? (0)

c, flickr, javascript, xpcom, xulrunner

Despite my blog being stale like the bread in my cabinet, I’ve still been elbow deep in XULRunner all day every day. Now 3 1/2 months in, the ugly stuff has taken shape and it’s time to lock down the user interface. I still haven’t found an elegant way to keep clicks on the scrollbar from firing my sequence of mousedown, mousemove and mouseup events, but gimme a second chance.

As expected, I’m learning a lot about releasing software in the real world, where it has to stand up to real revisions, new features and public scrutiny. I like to think I’ve always built software that’s up to the task but a UI worthy of the Flickr name is a lot of work. And… Surprise! My engineer’s touch is not good enough. Gino and George, with a healthy bit of Stewart, have made it look awesome. And my role in the design-y stuff? Implementing some of the ideas so we can play with them before springing them on unsuspecting users.

But stay tuned. It turns out that work not only fluctuates between C++ and JavaScript but between engineering (then) and design (now). After round one is out in the wild it will be time for more hacking in the great undocumented. Lather, rinse, repeat.

The XPCOM tips will be back soon!

10/5 Headed to St. Louis (6)

37signals, books, php, stlouis, washu

Tomorrow I head to St. Louis to do a bit of Yahoo! recruiting at my alma mater. If you’re a web geek and go to Wash U, make sure you come see us.

Preparing for the trip, I’ve been trying to decide what to read on the flight. I could pick up some fiction, but let’s be honest, I’ll never do that voluntarily. So I decided to read 37Signals’ Getting Real. Being a clever miser, I made a little script to download all 91 essays so I don’t have to buy the PDF to read it offline. Enjoy:

Update

I like the 37Signals guys, so until we clarify things, I’ve taken down the PHP code. However, I believe this is fair use. The copyright notice non-37Signals-Matt pasted below is simply not applicable since I have not redistributed their content by providing the script.

A bit of automation has little to do with the fact that the content is freely available online. If it makes anyone sleep any better, I’ll recycle my original dump and go back to the website and click print 91 times. Do forgive me for saving myself some time.