Posts in the Tech Category

Just as a quick update, I’ve done some testing of S5 1.2a1 in the latest version of Opera I have available (which, under OS X, is version 8.51).  I’m happy to report that this copy of Opera has all of the S5 features supported in other browsers.  Incremental display, font scaling, keyboard navigation, and even the notes window are all present and account for.

To use the notes feature, here’s what I do.  Upon loading the base slideshow into Opera, I position the window on my secondary monitor, which is here taking the role of an LCD projector.  Then I hit “n”, causing the notes window to appear on my laptop’s monitor (in the role of the presenter’s machine).  After bringing the slide show window back to the fore, I select “Full Screen” in the “View” menu, and the presentation maximizes itself to the secondary monitor.  As I navigate through the slide show, the notes window stays perfectly synched with the presentation.

There may be better ways to get the notes window on the primary monitor and the presentation on the secondary monitor, but that one worked for me.

I did notice some odd bugs here and there in Opera 8.02, a copy of which I also have hanging around, but nothing that was a show-stopper.  The one that sticks out in my mind was that multi-slide jumping wasn’t cleared out after the jump.  For example, from the first slide I’d type “3 (right arrow)” to skip to slide four.  Hitting the right arrow again jumped me to slide 7, which is wrong.  Opera 8.5 acted as intended, so I’m going to assume that it has something to do with how the JavaScript is written.

If there are problems in Opera 8.5 or Opera 9 that my testing didn’t uncover, let me know.  I’ll fix anything I can—and if there’s anything I can’t, I’ll turn it over to the Opera community to figure out.  Members of that community have already been invaluable in figuring out how to work around bugs in Opera’s CSS handling in order to make the controls available, so I’m confident they’ll be able to handle anything I can’t figure  out.

• Opera and S5 1.2a1 was published on Thursday, January 12th, 2006.
• It was assigned to the Browsers, S5, and Tools categories.
• There have been three replies.

At the risk of being a bit backward-looking, on 21 December 2005 I was quoted in the article “Year in Review: CSS, Standards, Microformats and Flash“.  (And I wasn’t even the one who talked about microformats, Jon!)  This was the second half of a year-end review by Stephen Bryant; part one, “The Highs and Lows of Web Design in 2005“, is also online and quotes many familiar names.  I was going to blog both at the time, and, well… I forgot.

For historical purposes, here’s the whole block of text from which I was quoted, in response to the question “Generally speaking, did you see much progression in the adoption of Web standards this year? In CSS use? Can you give some specific site examples?”:

As in previous years, 2005 saw standards adopted more slowly than I’d have liked, but faster than in previous years.  I think this was the year when it became self-evident that standards-oriented design is the way to go.  I can’t remember the last time I had to defend the practice, and whenever that was, it wasn’t in 2005.  At this point, it’s basically all over but the training.  I think the biggest gap now is between the people who want to go standards-oriented, and their ability to do so.  That’s not an easy gap to bridge, but I think we’ll get there.

I mean, it’s the point now that desktop applications are using XHTML and CSS to drive their layout.  Just recently I discovered that Adium, a multi-service chat client for OS X, uses XHTML+CSS for its chat windows.  [E]very chat session in Adium is just a single XHTML document that’s dynamically updated.  Which means that you can define your own markup and CSS to create your own chat window theme.  It’s amazingly slick and powerful, and some of the themes are just gorgeous.  There are other programs doing similar things, and I expect the trend to continue.

The new-in-2005 CSS-driven sites that immediately come to mind: Apple, Slashdot, Turner Broadcasting, AlterNet, McAfee… and I’m sure there were hundreds of others I missed.

Hopefully this won’t lose me the bonus points Jeremy awarded me.  C’mon, man—at least I didn’t post my answer to the question “Best books, blogs, design? Best CSS layout?”!

• Before I Forget was published on Monday, January 9th, 2006.
• It was assigned to the Interviews and Web categories.
• There have been five replies.

It’s back: S5 1.2 alpha 1 is now available (177 KB Zip archive), and you can play with either the OSF or XOXO versions of the latest development version if you just want to preview it online.  In addition, I’ve set up a contact address specifically for S5 questions and feedback.  You can find a link to this new address on the main S5 page.

New to S5 1.2:

• The progress indicator (e.g., 6/10) is now a permalink to the currently-displayed slide.  This will require an update to any S5 1.1-era themes, but it’s a minimal thing.  Granted, the current alpha doesn’t have updated styles to handle the presence of a link.  I’ll get to it.

• Bug fixes intended to make it more Konqueror-friendly.  I do not know if Konqueror will run S5 1.2.  I do not have access to Konqueror.  The fixes I included were sent to me by helpful S5 users, and may or may not have resolved all problems.  If there are still bugs in S5 when displayed in Konqueror, you are invited to submit bug fixes in the comments, or via the contact address I mentioned before.  Bug reports should be done in the comments, where other Konqueror users can see them, and not via the contact address.

• Vastly improved integration with Opera.  As chronicled in “Opera and S5 1.1“, S5 was originally intended to be a cross-browser emulation of OperaShow.  As time went on and features were added, the two diverged.  Thanks to efforts by Hallvord Steen, Opera should now be shut out of a lot less of S5 than it was.  In fact, it may well be feature-complete as compared to S5 1.1, and will get most of S5 1.2’s features.  With one possible exception…

• A “notes” window capability.  The notes view is largely the work of Shaun Inman, who wrote me last week to say, “Hey, I did this.  Interested?”  Was I ever!  I’d been meaning to do it ever since I saw the notes view in Keynote, but Shaun got there first, clever wolf that he is.

  

  To see this in action, in either the OSF or XOXO versions, hit “n”, or call up the controls and click on the three-line icon on the left.  A new “notes” window will open, looking very much like the “notes” view in Keynote.  This window displays whatever notes the author has created for the current and next slides; these are done by placing content in an element with a class of notes, pretty much exactly like the handout feature from earlier versions of S5.  The notes window also includes timers showing the time elapsed since the presentation was opened and the time elapsed since the current slide was loaded.  There’s also a pauseable countdown timer for those who prefer to keep track of time that way.  (I added the countdown timer.  Yay me!)

  The general idea is that you load up your presentation, open the notes window, and put the presentation up on the projector while keep the notes window on your presentation machine.  (Which is of course only possible if you turn off video mirroring.)  As you move through the slide show, you can see notes to yourself and keep track of time so you don’t run over.  Keen.  I don’t know how much I personally will use the notes, but I’m all over the timers like they were a stack of pancakes and I were Mrs. Butterworth.

  At the moment, the JavaScript that opens the notes window is minimal, so the notes window is fairly chromeless and not resizeable in IE/Win.  It’s also a bit rough in terms of some of its layout, as befits the alpha status.  I’m also considering adding a keyboard command for “fullscreen”, which would maximize all open S5 windows to fill the screen they’re currently occupying, and possibly also strip away the browser chrome.  I did a few experiments along those lines, but wasn’t satisfied with the results, so it didn’t get into this release.

  On a related note, I’m not sure that notes can be made to use with Opera so long as S5 relies on OperaShow, because OperaShow by its very nature makes all browser windows fullscreen.  If there’s a way to get OperaShow to put one window on one monitor, and a second on a second monitor, then that would be the answer.  If not, I’m not sure what to do short of abandoning OperaShow usage entirely, which seems strange and wrong.  But we’ll see.  If nothing else, we can verify that everything in S5 besides the notes feature works in Opera, and push those changes into an S5 1.1.1 release.

One known problem is that when Firefox displays an S5 show using the text/xml or text/xhtml+xml MIME types, which is necessary for slide shows that incorporate things like MathML and SVG, things break because innerHTML ceases to be supported.  I have a proposed fix submitted by an S5 user, but did not get it into 1.2a1.  I plan to correct this before reaching the first beta release.

A number of people have asked for a merging of effects libraries like Script.aculo.us and FACE, and there have even been scattered implementations of same.  It’s definitely tempting.  I’m not at all confident that this will happen for 1.2, though, mostly because I don’t understand enough programming to make the connections.  I’m also not sure how many of these I could pile into the code before the whole thing came crashing down.  I have hopes that we’ll be able to work out a “best practices” way to add such capabilities to any S5 presentation file, and let each author add them or not as they see fit.

So there you go.  Have at it!

• S5 1.2a1 was published on Monday, January 9th, 2006.
• It was assigned to the S5 and Tools categories.
• There have been twenty-six replies.

What is it about the Japanese that they loooove to blend colors?

Lest you think I’m indulging in some sort of bizarre racial stereotyping, I submit for your consideration the Technorati search results for blogs and other sites pointing to my Color Blender.  The Blender been moderately popular ever since its release, but so far as I can tell, the Asian market is just eating it up.  If I see a new Japanese site appear in my egorati feed, the odds are 49 out of 50 that it’ll be linking to the Blender.

So what’s the deal there?  Anyone have insights, specuation, or even translations that might shed some light on this little enigma?

(Note: it turns out that these are Chinese blogs using Japanese fonts, and not Japanese sites as I originally thought.  I’m leaving the original entry intact rather than update it.  Still, this means that the essence of the original question remains, even if the geography was off by a bit.)

• Japanese Color Blending was published on Friday, January 6th, 2006.
• It was assigned to the Culture, Humor, and Tools categories.
• There have been thirteen replies.

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.