Twitter in color. Image: Screenshot/Webmonkey

What’s social media without names? Turns out, if you strip away the names and replace them with just colors, for example, you end up with a kind of pure egoless information that is, in many ways, more engaging than the original.

Uncertain Rainbow is a project from developer Chris McDowall that reformats your Twitter timeline, replacing everyone’s name and avatar with simple blocks of color. The result is still Twitter, but without any egos.

As McDowall writes: “You might be conversing with … anyone. A pure relationship of thought and humour… No pressure to duty-follow, or send a lame reply in response to a slightly-too-much @message.”

To check out Uncertain Rainbow, just head to the site, grant the app permission to access your Twitter timeline and behold the egoless rainbow.

The Eephus League Magazine: showing publishing pros how it's done.

Baseball season is already well under way, but it’s never too late for another site about America’s favorite pastime — especially when it’s as awesome as the beautiful Eephus League Magazine.

Even if you have no idea what the name means — and fear not, even some baseball fans aren’t familiar with the Eephus pitch since it isn’t throw much (though current Red Sox reliever Vicente Padilla has something like an Eephus pitch) — the site is well worth a visit for its gorgeous layout and design.

The Eephus League Magazine is written and produced by web designer Bethany Heck, but if the interface and navigation looks slightly familiar it’s probably because the underlying code is the work of Ian Coyle, creator of Nike’s Better World site, which we featured last year.

Since then Coyle has also released Edits Quarterly, an online magazine of photography and short films. Edits is what inspired Heck to put together The Eephus League Magazine. And it’s not hard to see why, with Edits Coyle managed to create something even the so-called pros of the magazine publishing world can’t seem to make — a digital magazine that doesn’t suck.

What makes Edits — and its offspring like Eephus — remarkable is that it manages to feel like reading a print magazine even though you’re really just scrolling down a webpage. For example, there are what you might call “pages” in Coyle’s design, but they aren’t simple skeuomorphs like you’ll find in e-readers. Instead the “pages” just serve to move you through the content and keep articles separate even as they are all together on one page. Scrolling remains vertical; there’s no awkward “page flipping” actions. The Eephus League Magazine uses Coyle’s JavaScript, so moving through it feels just like browsing Edits, but Heck has made a few adjustments to fit Eephus‘s own layout and images.

In the end the experience of both magazines is different enough to catch your eye, but not so much so that it overwhelms the content. But don’t take our word for it, head over to Eephus and be sure to check out Edits Quarterly as well.

Dutch artist Sebastien Schmieg has elevated the Google Image search from its humble intent, creating a short film that strings together a series of image searches. The result oscillates between the prosaic and profound, and feels more like a grand homage to humanity than a collection of random images.

To create the image sequence Schmieg fed a single transparent PNG into Google Images and used the “visually similar” feature to recursively loop through the results. Schmieg’s movie of the results, entitled Search by Image, Recursively, Transparent PNG, #1, is a (slightly NSFW) truly hypnotic, algorithmic tour of life as Google Images knows it.

In all there are some 2,951 images in the video. The “visually similar” option in Google Image Search tends to get stuck in loops using it the way Schmieg did so if an image had already been used in the sequence, he would skip to the next image in the results. But otherwise the sequence is entirely algorithmic. Beware pareidolia.

For more info about the movie and some other, similar efforts, be sure to check out Schmieg’s website.

1997 called. Your CRT is ready.

The tech press is abuzz, debating the merits and failures of the new (new new?) Twitter web and mobile designs.

If you’re like most, you aren’t even seeing Twitter’s new website just yet, so if you’d like to contemplate something a bit more fun on a Friday morning, consider what Twitter might have looked like had it been around in 1997.

You might remember 1997, the heady early days of web design — 1-pixel spacer images, animated gifs, tables with gray borders and a magical new idea called “cascading stylesheets.”

How would Twitter have looked in that world? We’ll never know, but thanks to a new art project dubbed “Once Upon” you can see what Facebook, YouTube and Google+ might have looked like had they been around in 1997. Once Upon was created by artists Olia Lialina and Dragan Espenschied, who describe the project as “three important contemporary web sites recreated with the technology and spirit of late 1997, according to our memories.”

That’s right, Facebook, YouTube and Google+ redesigned in the spirit and look of 1997. As an added bonus the demo site has been set up to limit bandwidth at a 1997-esque 8 kB/s so it loads just as painfully slow as it would have on dialup.

Naturally all three sites are “best viewed with Netscape Navigator 4.03 and a screen resolution of 1024×768 pixels, running under Windows 95″ (that resolution actually seems a bit large for 1997, but that’s okay). If you can’t find a Windows 95 machine in the closet fear not, the demo site will work in any web browser that supports frames.

[via Today and Tomorrow]

Windows Phone on an iPhone

Designed to run in your iPhone or Android web browser, the site effectively replicates the company’s new “Metro” user interface in HTML. The demo is a clever effort to show people what the Metro UI looks like without the need to set foot in a store.

If you’re curious, head over to the demo site. (Note that the site primarily works with mobile devices, though it will load in the desktop version of Chrome as well.)

A number of news outlets have called the site an “HTML5 demo,” which is technically true, though aside from the doctype the site doesn’t use many of the new features found in HTML5. Mainly what you’ll find under the hood is some JavaScript hooking into various WebKit CSS animation features (since the target audience is iOS and Android browsers, limiting the demo to WebKit browsers seems like a fair decision).

HTML5 hype aside, the site makes a nice demo Windows Phone and an impressive use of web tools to recreate a native OS interface.

Web Developer Evan Wallace has released one of the more impressive WebGL demos we’ve seen.

Provided you’re using a capable browser (Firefox, Chrome or Safari), head on over to Wallace’s WebGL Water demo and be amazed.

If you stay abreast of the latest and greatest in web browsers you’ve probably heard of WebGL, an API for adding hardware-accelerated 3D rendering to the HTML5 Canvas tag. The WebGL API is based on OpenGL, a desktop graphics standard, which means WebGL will run on many different devices — your laptop, your phone, even your TV.

Firefox 6+, Google Chrome and the latest version of Apple’s Safari all support WebGL (in Safari you’ll need to enable WebGL under the developer tools menu). There’s also an experimental build of Opera with WebGL support.

If you’re stuck with Internet Explorer, Vimeo user Ivan Enderlin posted this video which shows Firefox rendering the WebGL Water demo.

WebGL water, by @evanwallace from Ivan Enderlin on Vimeo.

Also, be sure to check out rest of Wallace’s website for some other WebGL demos, games and experiments.

See Also:

• Add a Little 3D ‘Tilt’ to Your Website
• Google Taps Danger Mouse to Show Off the Power of WebGL
• Chrome Gets New ‘Crankshaft’ Engine, Syncing, WebGL Support
• Mozilla’s ‘Web o’ Wonders’ Shows Off New Firefox 4 Tricks

Google is celebrating Jules Verne’s birthday with a logo that pays homage to the author’s famous 20,000 Leagues Under the Sea. The doodle, which marks Verne’s 183rd birthday, transforms the usual Google letters into submarine portals looking out at the sea.

The effect was created using the powerful transform tools in CSS 3 to layer together an animated diving sequence using nothing more than standard HTML and a few transparent images. If you’ve got a device with an accelerometer built-in (any iOS device, recent Macbook or Android device), you can even control the doodle just by tilting down to dive or side to side to move forward and back.

If you’re on a desktop or don’t have an accelerometer in your laptop, you can steer the Nautilus with a control stick. While the doodle worked in most browsers, it’s smoothest and fastest in Google Chrome and Firefox 4 beta.

Other Google doodles have used HTML5′s canvas element, along with some CSS 3, to create the bouncing balls experiment and the awesome, playable version of Pac-Man.

See Also:

• Write Your Name in Bouncy Google Balls
• Transform Your Site With CSS 3
• Slick Web Design Gets Easier Thanks to CSS 3’s Transform Tools
• Chrome 9: Faster 3-D Graphics, Instant Search and an App Store

You might think, given the varying browser support, that no one is using HTML5 yet. But you’re wrong. HTML5 is everywhere you look. Even Nike, which has a history of Flash websites, recently turned to HTML5 to build its new “Better World” website.

The Nike Better World website uses HTML5, CSS 3 and JavaScript to create a unique scrolling storyboard-style experience. The site has received quite a bit of attention in the design community for its unique interface and fancy animations.

It also makes a great lesson in how you can use — and, sadly, now you should not use — HTML5 today.

One of the best ways Better World uses HTML5 is the awesome, and often overlooked, data- attribute. If you’ve ever used a title attribute to pass some data to JavaScript, well, the data- attribute is your new friend. HTML5′s custom data attributes allow you to write semantically valid HTML while, simultaneously, embedding data within the page.

On the Nike site, attributes like data-controller and data-scrolloffset pass information to the JavaScript scrolling function without mucking up the semantics of the page.

The best thing about the data- attribute is that you can define your own syntax — just prefix your attributes with data-. For a great overview of the new data syntax and how you can use it, check out JavaScript guru John Resig’s overview of the data- attribute.

However, impressive as the Nike site is, it also gets some things wrong. While Better World uses many of the new HTML5 tags — like article, section, header, footer and canvas — it isn’t always using them properly.

The prime offender is the ever-confusing section tag, which is scattered about the site somewhat haphazardly. Deciding when you should use section can be a headache (see HTML5 Doctor’s article on when to use the section tag), but one good rule of thumb is — does the element have a heading? In the case of Nike’s site, the answer is often no. In most cases the code would be improved by simply using a div tag.

Despite all the cool new semantically meaningful tags, remember that there’s nothing wrong with good old div. In fact, that’s one of the things it’s for — elements that don’t have semantic value.

Nitpicking aside, the Nike site is great example of a big company pushing the envelope with HTML5. Our only real complaint is that Nike is still relying on Flash for video — ironic considering that HTML5 video is one of the more common examples of HTML5 on the web today.

See Also:

• Where on the Web Is HTML5?
• Using Microformats in HTML5
• Flashy HTML5 Experiments Point to Web’s Future
• Embed Videos In Your Web Pages Using HTML5