Future of the Web 20100620

  • Starbursts using only CSS3+HTML are a cool idea, and produce a cool effect if used in moderation. Sadly some of the outrageous hover effects on the starbusts near the bottom of the post remind me of terrible GIF rollovers and Flash buttons that plagued the web for years. (Anyoneelse getting GeoCities flashbacks?)
  • This has been around for a bit, but I didn’t find it until I was looking up some CSS animation stuff. Star Wars AT-AT Walker using only CSS animations. There’s also a blog post that explains how it was done.
  • Safari 5 supports border-radius without the -webkit- prefix! Let’s hope for the same in Firefox 4.
  • As cool as it may be, I really hope we don’t start seeing webpages that are designed like http://www.useragentman.com/tests/cssSandpaper/cube3.html. CSS is awesome, but some things should not be used for certain purposes. (HTML is awesome, but <blink>/<marquee> should be used for any purposes ;) ).

Future of the Web 20100602

Today’s dose of supercool comes via Tom (thegreatN). Seriously, between him and Sören (chucker) I get all sorts of awesome things to read about and play with!

  • Smokescreen (http://smokescreen.us/)
    Go look at that. Yes, those are indeed Strongbad flash videos being rendered without flash. Using JavaScript and (as far as I can tell) inline SVG elements. Not only does it render without the need of a plugin (which leaks memory), but it also doesn’t require any extra effort from the content creators. It takes an existing .swf file and plays it back without a plugin. Very cool!

    Now, it’s definitely not flawless. The SVG rendering is subtly different than the Flash rendering, most noticeably with this demo. The flash text is easier to read, and it appears that there is a border around the SVG text. As well, in that demo you can see that the blurred “data waves” are rendered without blurring in SVG (although with filters it should be possible to replicate), and that the “Find out here” button has no hover events in SVG.
    That last point is an interesting one, since SVG elements can respond to JavaScript events just like any other HTML element. There is no reason that clickable links couldn’t be implemented using xlink a tags. On the other hand, the project seems to be relatively new so it’s highly impressive that they have as much progress as they do.

  • iPads are cool, and fun… but not necessarily useful enough for me to seriously consider getting one. I will definitely be looking at how to improve my websites for iPad users though.
  • Neither cool, nor fun, is Adobe’s latest announcement. Rather than just take a magazine article and format it into a nicely design HTML site, they export it as .png images. Including animations. This is practically intentionally taking steps backwards!
  • Fun little personal project: Nadnerb wrote a raytracer using JavaScript and canvas. Very blatant abuse of Javascript, something that I hope nobody ever tries to use on an actual website, and also very very cool. I wanted to see if I could make it run any faster, so I started with basic JavaScript optimisations and ended with rewriting the sphere-ray intersection code. My revised version should be noticeably faster though! (Despite that, I should warn against running it in Firefox because it will freeze the browser and prompt you to continue for a long while)
  • I think this might be even better than a raytracer though (certainly less laggy!): Normal mapping with JavaScript and the canvas tag. The web is so awesome that I can’t describe it sometimes! (via @zib_redlektab)