Posts in the Tech Category

Yes, two posts just showed up that are dated in the past week.  Just correcting a little holiday glitch—one of several, as it happens.  Anyway, move along, there’s nothing to see here!  Well, besides those two old-yet-new posts.  And this one.

I’m sorry, let me start over.

Look for posts in the next few days regarding Japanese color blending, my 2006 speaking schedule (as it currently stands, anyway), and the alpha release of a new version of S5.  Now with The Wolf!  (…cue salivating sounds from Mike Davidson.)

• Catching Up was published on Thursday, January 5th, 2006.
• It was assigned to the Personal and Tech categories.
• There have been no replies.

In my work with Happy Cog Studios, which is a strategic partner with Complex Spiral Consulting, we’ve had occasion to send each other really big files, like Photoshop design comps and so forth.  As just about everyone knows, this is hard to do via e-mail, since SMTP servers usually cap attachment sizes at 10MB.  Even if a file size is below that limit, it’s kind of a pain to send large attachments.  Your e-mail client sits there slowly uploading the attachment, and then on the other end, someone else’s e-mail client gets to sit there slowly downloading it.

This is why we started uploading our files to our personal web sites via FTP, and sending around the URLs in email.  That’s great for macho geeks like us, even if it is a bit tedious, but not so great for most people.

You know what would be great for most people?  DropSend.  You can upload files via your browser, or grab a desktop application (for both Mac OS X and Windows!) to handle that part.  Then you just send a link to the file to people who need it, and you’re done.  There’s a basic free account which ought to satisfy any occasional user, and some fairly cheap paid account levels to add more storage and sending capabilities.  If you’re in search of a better way to send really large files, it’s worth a look.

Nice site design, too.

Disclaimer: the creator of DropSend, Ryan Carson, is also the founder of Carson Workshops, for whom I’ve done a couple of seminars.  For that matter, he’s a co-founder of BD4D.

• DropSend was published on Monday, January 2nd, 2006.
• It was assigned to the Tech category.
• There have been eight replies.

In “Bar Graphs With Style“, I took a set of nested lists and some divs and turned them into a vertical bar graph using CSS.  Jan Brašna pointed out that the actual information I was presenting would probably be better represented as a table instead of nested lists.  I don’t think there’s anything wrong with using the lists, but I do agree with him that a table might be a better base represention of the data.  Maybe you agree.  If so, then here you go: CSS Vertical Bar Graphs using a table as the markup basis.

The demo works fine in Safari, and in Firefox I got it to work by explicitly setting the table element to display: block (when I left it as display: table, the bars were badly misplaced).  In IE/Win, everything’s fine except for the actual placement of the bars; they’re fine as a group but way out of place.  I think the IE/Win problem is a simple refusal to give a table element dimensions when all of its descendants have been positioned, no matter what display value it’s given.  Perhaps some intrepid soul can figure out a way to defeat this. [Update: some intrepid soul did, and the demo has been updated; it now works in IE/Win as well as most other browsers.]

(I considered the idea of positioning all the bars with top instead of bottom, thus sidestepping the table-sizing problem, but that would mean a different way to place the ‘ticks’ and in the end it was different enough from what I’d done that I just couldn’t be bothered.  Feel free to run with the idea, though, or come up with a better one.)

I must admit that when I first assembled this table-based chart demo, it was with some trepidation.  From a CSS point of view, of course, it doesn’t matter what elements you position, nor how: a td is no different than a div or any other element.  Historical browser behavior, though, has been to put table markup into its own special category and treat it as being extra-special—as witness IE/Win’s handling of the original demo.  I was honestly afraid that, in overriding the display values for table elements (by positioning them), I’d crash a browser.  So far, no crashes, but proceed at your own risk!

• Tables to Bar Graphs was published on Wednesday, December 21st, 2005.
• It was assigned to the CSS and Projects categories.
• There have been twenty-two replies.

A lot of the time, when I’m sharing a technique or effect I’ve devised, I’ll say something like “I doubt I’m the first to think of this…” or “it may not be original, but it’s original to me…”.  This might strike some as an annoying quirk, some sort of pseudo-modesty that I should either embrace fully or just drop already.

However, I do it because I know it’s true.  Even some of the most radical experiments I’ve published, like those on css/edge, were prefigured or anticipated by others.  I didn’t steal anyone’s ideas, of course.  Every one of those demos was an original creation born of my knowledge and thinking.  They just weren’t necessarily the very first instance of those techniques ever published anywhere.  Other ideas, like Universal Child Replacement, were devised before I hit upon them but were never documented.

I bring this up because the door swings both ways: from time to time, I see someone else publish a technique or idea that I’d had but never documented.  A recent case in point was the appearance of “CSS for Bar Graphs” at Apples to Oranges, which showed a vertical bar graph created out of CSS and a list.  I’d done something very, very similar almost three months before the AtO article’s publication date while creating an invoice-tracking system for myself, and never gotten around to publishing an example.

This almost certainly means that they and I were creating basically the same thing at the same time.  Who got the idea first?  Who cares?  It’s a nifty idea no matter who thought it up.  Plus it’s a near-certainty that somebody else did it long before three months ago, and never got around to documenting it.

I often wonder how many really cool techniques and ideas are lost simply because the inventors don’t have the time or energy to publish them.

Since my approach varies a bit from AtO’s, I’ve put up a css/edge demonstration for people to poke.  The major difference is, I think, my use of empty divs to create the horizontal strata instead of a background image.  This let me have strata that were scaled to the figures being output.  For example, if the strata are increments of $10,000 and the highest bar is $55,055, then I can write out enough “bar divs” to make the top of the chart $60,000.  If the tallest bar only goes to $38,522, then I can stop at $40,000.

This also meant calculating and writing out the bars’ heights as inline styles.  What you see in the markup of my demo is the end result of all that back-end calculation.  There are doubtless better ways to go about creating the strata and setting the bar heights, most obviously using DOM scripting to write in said bar divs instead of dirtying up the XHTML with them.  The same would be true for the inline heights of the bars themselves, which could be dropped in favor of dynamic setting.  Heck, you could even make it so the chart could be zoomed in or out.

Someone else can do the necessary scripting if they like; I’m content to get the example out there, however late to the party I may be.  The more such examples there are, the better.

Followup: Tables to Bar Graphs, in which the same chart is created out of a table instead of nested lists.

• Bar Graphs With Style was published on Tuesday, December 20th, 2005.
• It was assigned to the CSS, Projects, and Standards categories.
• There have been thirty replies.

I recently wrote that the font Freight Micro had broken Unicode references.  It turns out that I was basing my comments on a beta version of the font without realizing it.  The designer of the Freight family was good enough to provide me with a copy of the final version of the font, which I tested, and I’m delighted to report that it does not suffer from the same problem.

So my deepest apologies for any misinformation I may have spread. If you see anyone referencing my previous post on this topic, please point them to this one.  Thank you.

• Full Freight was published on Monday, December 19th, 2005.
• It was assigned to the Mac category.
• There have been no replies.

Tim Bray, that dashing man-about-town, recently sang the praises of Adium, a multi-service chat client for OS X.  I’d tried it a while back, and been only marginally impressed.  At the time, its presentational inflexibility was too annoying for me to take it seriously.  Okay, yes: it was a damn sight better than Messenger for OS X, which is the only reason I even kept it on my hard drive.  But I hardly ever log onto MSN any more, as everyone I know is on AIM.  So I’d stuck with iChat AV.

Still, Tim’s word is always gold (or at least high-grade palladium) with me, and he said the magic words (“highly skinnable”), so I downloaded the latest copy and poked around for a bit.

Boy howdy!  Adium has definitely come a long, long way since last I visited.  You can change the appearance of your chat sessions (with “message themes”), the dock icons, the contact list, and much more.  Since none of the default message themes really did it for me, I went looking for others.  There are quite a few available at the Adium Xtras site, but none of them were really what I wanted either.  In iChat, I cranked the graphic frippery down to zero so that the chat sessions were as compact as possible, but I still had the text look nice.  If I could recreate that in Adium, it would make the migration much, much simpler.

So I dug into the package contents of a promising message theme… and found out that themes are based on nothing more than XHTML and CSS.

Seriously.  The entirety of an Adium chat window is an XHTML document that’s being dynamically updated via DOM scripting—all of it pumped through WebKit, of course.  In creating a message theme, you define what markup will be used, and write CSS to style it.  You can even define variants on your theme by writing additional style sheets.

So with some quick hacking, I not only radically improved the markup generated during a chat (the markup I saw in the packages I downloaded was, um, sub-optimal), but I basically replicated my old iChat theme with some simple CSS.  And then I created some variants that slightly modify it in various ways, mostly to prove that I could.

I’m now wondering if I could write and attach JavaScript that would make chat sessions even more interactive, more robust.  (Update: Phil says yes.)  Click on a line to copy the whole line to the clipboard, say, or dynamically change the in-session presentation by hitting a button.  Adium may block that kind of thing, but if not, then it’s a chat client extensible beyond anything I’ve so far imagined.

And given how much I love to tinker with my software, that’s like waving a bulging suitcase of money in front of a senator.

Granted, there are some things I’d like to change.  For example, the markup you define in a theme is not used in saving the chat log.  In a log, you just get some basic markup with a case of classitis and very, very poor semantics.  It would be a lot cooler if you could define the log markup (or the log just used the markup you generate during a chat session) and the CSS to present it.

A chat log is also something that, it seems to me, cries out for a microformat.  The markup I’m using for my theme is also a first effort in that direction, recycling some other microformats’ concepts (I stole a bit from hCalendar and am planning to graft in some hCard as well) and setting up some basics.  If I can take this far enough, I might consider pushing to upgrade the markup Adium generates in its logs.  They’re dropping a lot of information on the floor when they write out the logs, and I think that’s a shame.

But then, I can make the effort to fix that and actually have a chance of it paying dividends.  The joys of open source, you know?

I’ll still use iChat AV for videoconferences, which are an essential tool for family cohesiveness when I’m on the road, as well as to keep close to my father down in Florida.  For text, though—which accounts for at least 90% of my instant messaging activity—Adium is my new chat buddy.

• Adium: Chatting With Style was published on Monday, December 19th, 2005.
• It was assigned to the CSS, Microformats, and Standards categories.
• There have been forty replies.

A followup to my previous post: thanks to the nearly impossible to find Character Palette (and thanks to Todd Dominey for instructions on how to enable and use it), I was able to determine the problem and restore my editing pencils.  It turns out that a beta copy of the font “Freight” was what caused the problem.  This beta copy of Freight was for some reason convinced that Unicode 9999 is the reference to a Z-caron instead of a pencil symbol.  It didn’t do this for 9998 or 10000.  Just 9999.

So I removed “beta Freight”, and the pencils returned.  Thanks to everyone who helped me out!

Update: there’s more to the story, namely that the copy of Freight in question was a beta, and not the final release, and the final release doesn’t have the problem that bit me.  I’ve edited this post to reflect that fact.

• Pencilled In was published on Thursday, December 15th, 2005.
• It was assigned to the Mac category.
• There have been three replies.

Pretty much nobody but me ever sees this, but when I’m logged into meyerweb’s copy of WordPress (basically, all the time) I see a little pencil icon next to entries and comments.  It’s the “click here to edit this” link, and I generate it using the following markup:

<a href="[...]">&#9999;</a>

Ah, Unicode.

The problem is that at some point in the recent past, my OS X 10.3.9 laptop started rendering that character as a Z with a set of rabbit ears on top, whereas my OS X 10.3.9 desktop machine still shows the pencil.  I can only assume this is due to a recent software installation on the laptop, possibly one that stuck in a badly structured font or something.  Or else an update messed up the Unicode pointers.

Whatever the cause might be, does anyone out there know if there’s a way for me to figure out what font is being used to generate the funky Z, or how I might otherwise be able to track down and destroy it and get the pencils back?  Because it’s driving me frickin’ crazy.

Update: the problem is now fixed, as described in the followup entry.

• Pencilled Out was published on Thursday, December 15th, 2005.
• It was assigned to the Mac category.
• There have been fifteen replies.