Turn your browser into the Wheels of Steel

Now you can join the ranks of Grandmaster Flash and spin records on your own set of (virtual) turntables, courtesy of developer Scott Schiller. Schiller recently launched wheelsofsteel.net, which is just what it sounds like: a set of virtual Technics SL-1200s that allow you to mix and scratch to your heart’s content. What’s truly awesome about this—besides, you know, the basic concept of web-based turntables—is that Schiller built the site using HTML/CSS/JavaScript for the bulk of it.

I have been interested in the idea of building a turntable-based UI in HTML for years; however, the past presented a number of technical hurdles. Setting dreams of browser-based remixing aside, simply recreating the core design elements of a turntable was practically infeasible until the advent of CSS3. The features most notably missing from browsers involved drawing circles, rotation of elements and low-level control of audio. As of 2011, it’s a pleasure to say that these features can be implemented almost entirely using HTML, CSS and JavaScript alone.

Schiller has written a very extensive article that provides all sorts of background and technical info on the site’s development (e.g., development of the site began on January 31, 2011 and has taken approximately four months). It’s clearly not intended for “real” DJs—as Schiller notes, “what DJ really wants to scratch records with a mouse, anyway”—and using it comes with all kinds of caveats, but it’s still an awesome idea and the execution is incredibly impressive (watch a video of it in action).

While Flash was used for portions of the site—primarily to provide audio support—a site like this just continues to prove that “native” web technologies, though still in the early stages in some cases, are more than capable of creating truly immersive and engaging web experiences. (Another example would be The Man in Blue’s HTML5/CSS3-based “Definitive Daft Punk” visualization.)

Awesome HTML5/CSS3 visualization of the “Definitive Daft Punk” mash-up

Definitive Daft Punk Visualization

Back in December, I wrote about The Man in Blue’s cool “Definitive Daft Punk” mix, which mashed twenty-two Daft Punk songs up into a single six-minute mix. And now, the Man in Blue has returned with something even cooler, a lovely visualization of “Definitive Daft Punk” rendered entirely in HTML5 and CSS3. From the related blog entry:

In order to explain the layering and interplay that goes into something like a Girl Talk album or The 139 Mix Tape I decided to take my own mashup of Daft Punk’s discography—Definitive Daft Punk—and reveal its entire structure: the cutting, layering, levels and equalisation of 23 different songs. By dividing up the sound data for each song and computing its appearance in realtime, the resulting visualisation gives you an understanding of the unique anatomy of this particular mashup.

The entire piece is composed from the latest HTML5 and CSS3 technology (canvas, audio, transforms & transitions) so you’ll need a newer browser to view it in. I recommend Chrome because it pulls off the best performance with my mangled code. All of the waveform and spectrum visualisation is performed in realtime, so your browser is rendering a music video on the fly!

It’s truly a beautiful, awe-inspiring work, not just aesthetically but also technically: it shows what you can do in the browser without any Flash (though Flash was used to create the data of the MP3’s audio spectrum used by the visualization).

Google presents “20 Things I Learned About Browsers and the Web”

20 Things I Learned About Browsers and the Web

The people behind Google’s Chrome browser have just “published” 20 Things I Learned About Browsers and the Web, a browser-based e-book that explains how the web works, from cloud computing and DNS to web browsers and HTML, and also outlines methods for maintaining your safety and privacy while browsing online.

“20 Things I Learned About Browsers and the Web” is a short guide for anyone who’s curious about the basics of browsers and the web. Here’s what you’ll find here:

First we’ll look at the Internet, the very backbone that allows the web to exist. We’ll also take a look at how the web is used today, through cloud computing and web apps.

Then, we’ll introduce the building blocks of web pages like HTML and JavaScript, and review how their invention and evolution have changed the websites you visit every day. We’ll also take a look at the modern browser and how it helps users browse the web more safely and securely.

Finally, we’ll look ahead to the exciting innovations in browsers and web technologies that we believe will give us all even faster and more immersive online experiences in the future.

The book is quite enjoyable to read, even if you’re not a technically minded person: it’s written in very clear, concise, and conversational language, and it’s dressed up with some delightful illustrations from Christoph Niemann. And if you’re using a modern web browser, such as Firefox 4 or the latest version of Chrome or Safari, the actual experience of interacting with it is quite enjoyable as well. (If you’re feeling particularly geeky, John Gruber delves into some of its more technical aspects.)

I love seeing stuff like this come out of Google. Over the years, they’ve developed a pretty spartan, minimal design aesthetic (for completely understandable reasons), so it’s awfully nice when they break out of that box like they do here. (Another example would be the comic they created to announce their Chrome browser.)

Never Mind The Bullets

I’ve said plenty of nasty things about Microsoft over the years, due mainly to the abomination that is Internet Explorer. That single piece of software has been one of the biggest banes of my professional existence, the cause of much weeping and gnashing of teeth. However, it appears as if Microsoft is setting things aright with the impending release of Internet Explorer 9. I haven’t had a chance to use it myself, but the initial reactions that I’ve read are pretty encouraging, especially when it comes to IE9’s support for web standards.

In order to help celebrate the impending launch of IE9, Microsoft has put together Never Mind The Bullets, a very cool web-based comic that makes heavy use of HTML5 and CSS3. You’ll need a modern browser to see it, of course, but it’s an exciting glimpse of what’s possible with native Web technologies (and no Flash, to boot).

Honestly, I was a little surprised to see that Microsoft was behind this—I didn’t discover that fact until after I’d already experienced the comic—so kudos to the folks in Redmond for the panache and sense of fun, and for what looks to be the launch of an impressive browser.

Is ExpressionEngine becoming too expensive?

Over the last year or so, the ExpressionEngine community has seen a lot of changes. Without a doubt, the biggest change is the release of ExpressionEngine 2, which was released as a public beta on December 2, 2009 and is now out of beta as of July 12, 2010. But I would argue that a close second would be the rise of third-party developers releasing commercial add-ons for ExpressionEngine.

Commercial ExpressionEngine add-ons have been around for awhile, thanks to developers such as Leevi Graham and Solspace. But the last few months have seen a sudden new wave of developers who have begun charging for their add-ons, with Pixel & Tonic‘s Brandon Kelly perhaps being the most famous. (Kelly even gave a presentation on commercial add-on development at EECI 2009.)

There are still plenty of free add-ons for ExpressionEngine, just do a quick perusal of Devot:ee’s add-on library. But clearly, a paradigm shift of sorts has begun within the ExpressionEngine community, as more and more developers are selling that which might have been offered for free even last year. Which brings me to the point of this entry.

Along with this rise in the number of commercial add-on developers, I’ve also noticed a certain attitude developing within the ExpressionEngine ‘verse that ExpressionEngine is becoming too expensive. I first noticed it when Kelly began releasing his commercial add-ons, which were a huge hit and paved the way, I think, for more developers, and it really seemed to gain ground when EllisLab announced ExpressionEngine 2’s pricing structure, which included ditching the free “Core” version and increasing the license price across the board.

Continue reading…