It’s Only Software

A month ago, I posted about using inline SVG to simulate the Web 2.0 “shiny floor technique” (SFT) for a mirrored reflection effect on page headings. I have not had time to perfect it, but I figured I’d publish it and see if people are interested in enhancing the technique. Note that this has only been tested thus far on 2 browsers that natively support inline SVG, Firefox 2 and Safari.

Demo Page

For those not running one of the aforementioned browsers, here’s what it looks like:

There are several reasons why this is currently impractical for real-world use (although I’d like to change this):

• This technique will only work if the page is served up as XHTML (content-type application/xhtml+xml, aka “true XHTML”). Since some browsers do not like proper XHTML, this will prevent a large percentage of your audience from seeing this technique in action.
• Currently, the inline SVG is embedded in the page.
• The demonstration of this does not use true headings (h1, etc.)
• The text “SWOOSH” is repeated twice in the page – once in the heading and once in the SVG.

The latter three will be changed in the next published iteration of this technique. In the next iteration, I plan on adding Javascript so that this effect can be added unobtrusively on top of headings on an existing page. This will also allow the effect to degrade gracefully on browsers that do not support inline SVG.

Based on the way that inline SVG is implemented in current browsers (requiring support in the render engine of XML namespaces), I’m not sure whether the requirement of serving the content as true XHTML is a technical hurdle that can be overcome.

As far as I’ve been able to research, this is the first time anything has been published that uses SVG for this type of effect, using only plain text. Prior examples of the SFT have required Photoshop, required Flash, or only work on images.

I’m excited to take it to the next level (as noted above) and hopefully provide something that people find useful.

Ran across this site with some nice examples of text manipulation in SVG. I bet, with a modern browser, you could implement the shiny floor technique using DOM-scripted SVG. I’ll be working on this and hopefully post some results shortly.

So there’s been some [1], [2], [3] grumbling in the Spring Web forum (which I tend to participate in when I have a spare moment) regarding the datedness of the only Spring tutorial on the Spring site, “Developing a Spring Framework MVC application step-by-step“. Although it’s a great introduction (heck, it was one of the first articles I read about Spring, it hasn’t been updated significantly since its introduction in July 2003. A lot of new Spring MVC users want to have some good, solid advice on how to use the new Web features that arrived in Spring 2. I have decided to get back to basics and try writing such a tutorial myself. I’ll post it in bits for review on my site, and hopefully some folks will like it.

This is a perfect name for some kind of mashup relating to Slashdot. The only problem is that I can’t think of any data that could be sensibly mashed with Slashdot – can you?

What makes a good web representation of a developer? The 1990-s response to this question was typically an HTML-ized version of one’s resume (yes, I had one, and I know you did too). The 2000-s response to this question seems to be not so much “you want to hire me, look at my resume”, but “take a look at all this nifty information, and oh, by the way, I can be hired if you want”.

My plan for developing the site is to use the random notes I jot on this blog to build out articles that someone might want to someday read. Like most late 2000 bloggers, I figure if it’s interesting to me, then it’s sure to be interesting to someone else.