Dan Benjamin, system developer of the powerhouse new A List Apart site among many other things, has shared a little morsel of Ruby-On-Rails goodness for those who've adopted the framework. It's his classic image rotator ala rails and its ridiculously short.
Congratulations goes to Web-Graphics author George Penston on the release of his new book Adobe Creative Suite 2 How-Tos : 100 Essential Techniques. Even though we don't yet have a copy of the actual printed book (being printed right now), it's easy to recommend as George has shared portions with Arturo and I during his writing process. This is going to be a no-brainer purchase, it's jam packed with essential info for anyone using the Adobe product CS2 product line. Go ahead and pre-order your copy today.
In recent times, attention over image replacement techniques has decreased significantly thanks to the flexibility and easiness of solutions like sIFR.
But sometimes for design reasons, image replacement techniques still remain a good option. Between the many, the ones I've always liked most are the solutions by Gilder and Levin, which use extra markup (an empty span that doesn't affect content) but keep the CSS easy and simple without the need of hacking and, most of all, maintain accessibility intact in the case of images turned off scenario.
While looking for a simple solution to keep both CSS and images as light as possible, I came up with the SIMR (that stands for Single Image Multi Replacement), which uses a single image to replace more than one heading. Nothing execptionally new, since combining images in one for rollovers or to get a whole menu with an single image are already known options. But I thought it was worth sharing, since combining all graphics for headings in an image could be new to some of you. SIMR is not to be intended as a new image replacement technique, but rather, as a design methodology with a different approach.
So here it's the example I prepared, in which
every h2 in the page is graphically replaced, with a single image used.
Let's see an extract from the markup:
Based on my previous post about CSS references, Patrick was kind enough to point me to the tag reference widgets he's created. The CSS one solves the "I can't remember" problem in a very quick and seamless way: Hit F12 (or whatever you have setup to switch to dashboard), start typing "uppercase" and by the time you've typed "up", there's your reminder text-transform: uppercase; click it, and it's all ready to paste into whatever app you use. It's a nice widget, and he has HTML and PHP versions to download as well.
Not particularly groundbreaking, but as of late, I've been finding search engines to be very quick CSS reference points. Just type in "css" plus whatever you've forgotten, and likely you'll find the answer right there in the results. For example when I'm wondering "How do I make text uppercase with CSS again?", I can just search Google for css uppercase, (or msn search, or Yahoo!, etc.) and right there in the results (usually) the answer can be copy/pasted: text-transform:uppercase;.
I'm still visiting the W3C CSS2 Spec of course, but sometimes it's nice to save a few clicks. While we're on the subject, OS X users (myself included) might prefer instead to fold the excellent SeeSS widget into their workflow. Ironically, due to a Safari/widget bug and the fact that the W3C CSS spec uses named anchors, the creator of the SeeSS widget needed to make this jump link page, which might be a handy bookmark for those not fortunate enough to be working on OS X.
The web-graphics about page has only very short descriptions of the authors. To learn more about them, you may wish to read their sites, or interviews with them, such as this interview with Alessandro Fulciniti over at mcville.
Want to read more interviews? There are many to be found, here are a few great starting points: Russ Weakley's Top Ten Questions for..., Digital Web's Interviews section, and Justin Goodlett's Interviews. There are doubtlessly more quality interviews with web designers that I'm not remembering, so feel free to link up more in the comments.
Because I use filler text in my web templates, I was absolutely enthralled by Alessandro's idea for a javascript-enabled auto-fill solution... but I thought that it might benefit from another approach. So I and a couple friends talked about it, and we came up with FILLER TEXT.
Read about it more on my blog.
The files, though, are here:
The test document: BEFORE and AFTER.
I'd love y'all's feedback, of course.
I'm especially interested in ways to streamline the javascript, or in problems with the "recipe" syntax.
I am looking for a way to include a Flickr Flash badge in an XHTML 1.0 Strict document by means of the FlashObject method, which most of you probably know.
The FlashObject method seems to work fine with other Flash animations, but I can't get it to work with the Flickr Flash badge. I've set up a test page, so you can have a look at what exactly I'm talking about. I'm probably simply overlooking something, but can't figure out what. Any help is appreciated!
NB: I crossposted a similar entry in the Flickr Hacks group a couple of days ago - no answer yet though...
Update: The file I was linking to wasn't a flash file, but an HTML file containing JS variables for generating the Flash badge. So I fired up Firefox and grabbed the real flash file's URI of 392 characters minus its 32 "authentication hash" characters from the Page Info panel. The test page is updated, too. doesn't work anymore. Thanks to Patrys for pointing out my mistake.
Update 2: Sigh. Apparently, you need an API key to make this work permanently...
Continuing on this morning's random stray from our usual xhtml/css fare, here's a commercial that made me laugh out loud. It's a little too extreme for television, but it would be a shame if no one got to enjoy it:
Supper 3.0MB quicktime
The commercial was shared with me by Kevin Byrd of local (Atlanta Georgia) architecture and new media group Lightroom who made the Food Loop website.
I'm enjoying the layout, format, and content of http://creole.spavia.com/, described to me as:
...a new daily hub for interactive professionals...news and commentary related to the interactive industry and online communication. Lists the best of hundreds of relevant information sources worldwide we are monitoring and hand-selecting.
It's not the usual xhtml/css fare listed here at web-graphics, but I thought worth mentioning anyway.
Patrick Lauke, the King of SMIL, has just released a SMIL version of Molly Holzschlags WE05 podcast keynote address. You can choose the online version or download the zipped version to play locally.
When I'm in a place with a view, I often find myself shooting a short movie of the panorama in question. The result is usually a shaky 20 second clip that is a far cry from the open and wide view I was trying to document ;-) So I did a small movie2panorama experiment... What follows is a quick tutorial explaining how you can turn a short movie into a panoramic image - certainly not rocket-science, but I just thought I'd share my findings.
John Allsopp has written a very interesting article called WebPatterns and WebSemantics
The essence of a pattern is that it articulates a problem, then considers how that problem might be solved. It does not dictate a single solution, rather, a strategy for solving the problem.
The appropriate use of markup (e.g. not for layout), the use of CSS to separate presentation from content - these things, and many other best practices make perfect sense to the large and growing group of developers and designers who have adopted web standards.
It frustrates me that these concepts are still so foreign to very important players in the industry. It just pisses me off when I run into those people who care nothing about what they are putting out there. They spew out garbled nonsensical markup, they waste time pointing fingers when their crap is not jailed into a table cell, they will do just about anything to avoid learning how to do things better, or even somewhat close to correct. I'm not a validation stickler, but I think it's disrespectful to butcher hypertext the way they do.
Obviously I'm not going to say who I'm talking about, and it's not one person, or even one company. It doesn't really matter, they won't change until enough of their market demands it. I would go on, but I'd just end up swearing a lot.
In recent times CSS layouts have made a big step forward with gems like Ryan Brill's negative margins technique, Alex Robinson's Any Order Columns and Eric Meyer's Multi-unit Any Order Colums.
Experimenting with layouts, I wanted to develop a three colum liquid layout with the center column fixed-width and the side two fluid. A quite unusual layout, which I don't think will be used very often, but a good CSS excercise.
So I came up with this page which uses two additional containers for the side columns and has a very simple CSS.
After a long wait my book, CSS in 10 Minutes, has finally hit the shelves.
I can see two possible outcomes. The first is that I will become a megastar, date female tennis players and drive fast cars. The second is that I will be hunted down by the web community in general and lynched for my crimes against CSS.
I'm not looking forward to either!
I have always been under the impression that inline JavaScript is a Bad Thing, presumably because it violates the whole separation-of-content-and-behavior idiom. I typically do what (I assume) most other people do in their scripts. That is, I bind an event to an element programmatically using some form of addEvent, usually after the page finishes loading.
But this approach has problems too, as I found out on a recent project. Specifically, for large pages or those visited by users with a slow connection, binding events onload can be inefficient and produce cross-browser difficulties.
So then, what is the problem with using inline JavaScript in moderation? After all, it is simply a name="value" attribute pair like all the others. Why is class="someclass" acceptable and onclick="dosomething(this)" is not? The fact that the browser passes the latter to the JavaScript engine instead of the rendering engine seems to be a minor distinction.
Then again, maybe this is all in my head, and that inline JavaScript is perfectly acceptable in the web developer community. I would like to hear from you. What other arguments for or against inline JavaScript can be proffered?
For you Flash aficionados with one foot in the JavaScript world (or vice-versa), check out AFLAX, a JavaScript library for AJAX-like interaction with Flash. While not ready for prime-time yet (it does not work in Safari or Opera), it looks to be a very powerful API that opens up Flash scripting to rapid client-side development. Requires the Flash 8 player.
While preparing a series of articles on CSS layouts, I felt the need of a simpler way than editing the markup to fill up page elements to test them. So I developed a very short script that I find very handy, and I'd like to present here.
Basically the script appends on demand a filler text through functional links added via javascript... but it's easier to see than explain, so here it goes the example page I prepared.
I asked Russ "What's this photo you posted in Flickr? Can I post this on web-graphics? Not very often is there an interesting photo to associate with a web-graphics post. Tell me more about it."
He responded:
I do a range of these tests with blind and low vision users when testing sites that are about to be launched, or when Roger and I are doing testing for specific papers, like the cognitive and accessible tables papers.
This particular round of testing is trying to sort out blind and text-based browser users preferences in certain aspects of page layout. We'll be releasing the report as soon as it is published/presented at Ozewai in early December.
