Webmonkey

Sep172010

File Under: HTML5, JavaScript, Programming

Behind the Scenes: Coding ‘The Wilderness Downtown’

By Scott Gilbertson

Google’s recent collaboration with Arcade Fire, dubbed The Wilderness Downtown, yielded an in-depth interactive experience for the band’s single “We Used To Wait” that just might point to the future of the music videos. The experiment relied heavily on HTML5 and quite a bit of clever JavaScript to pull off one of the better interactive multimedia sites we’ve seen.

While the credits for the video list over a hundred names, many of the project’s interactive elements with were coded by Ricardo Cabello, better know as Mr.doob. Cabello, perhaps best known for his Flash-based experiments, has also been churning out HTML5/JavaScript projects for some time (see our coverage of earlier Chrome experiments), but the size and scope of the Arcade Fire project set it apart.

The Wilderness Downtown, features HTML5 native video and audio, Canvas-animated birds that fly away from your mouse clicks, interactive SVG fonts, and photo panoramas from Google Maps Street View. You enter in the address of where you grew up and it pulls the images for that neighborhood to personalize the video to match your own memories.

If you’re curious how The Wilderness Downtown works, Cabello has posted a behind the scenes look at his part of the Arcade Fire collaboration.

Cabello is no fan of JavaScript frameworks, so you probably won’t find these libraries popping up as JQuery plugins, but most of the code is available as standalone libraries hosted through GitHub. While neither offer any documentation, both three.js, a lightweight 3D engine and Harmony, a drawing library, were both use extensively.

The Wilderness Downtown was clearly a very large project and included numerous programmers, but if you’re looking to pull off something similar, or just want to play around with some of the tools used to create it, Cabello’s post provides enough of an overview to get you started.

See Also:

View Comments |
Permalink

Sep172010

File Under: Social

Diaspora Unveils its Open Social Code

By Scott Gilbertson

The developers behind Diaspora, the social network aiming to build an open source Facebook clone, and maybe steal some of the giant’s thunder, have released their first bit of actual code.

The goal behind the Diaspora project is to create a social network that puts users in charge of their own data. As the developers put it, Diaspora aims to be a “privacy-aware, personally controlled, do-it-all open source social network.” Diaspora made headlines earlier this year for raising some $200,000 from online contributors (including Facebook).

The initial code release is considered pre-alpha — in other words, a long way from its end goal — but it’s now available to development community. If you’re a Ruby on Rails expert and you’d like to try hacking away at the project, you can grab the code from GitHub. It’s been made available under the ~~GPLv3~~ [Update: It's actually the AGPLv3].

At the moment, Diaspora is capable of sharing status messages and photos privately with your friends, finding friends around the web and controlling who see what with something Diaspora calls “Aspects.”

The roadmap to October’s alpha release includes adding Facebook integration, Data Portability support and internationalization. For more details on Diaspora’s goals and timetable, check out the detailed roadmap and wish list. You can also read more about this most recent launch at Epicenter, where Wired reporter Ryan Singel is on the Diaspora beat. If you’ve got strong opinions of what Diaspora needs or doesn’t need, be sure to jump on the mailing list and make yourself heard.

See Also:

View Comments |
Permalink

Sep162010

File Under: Browsers, CSS, HTML5, Web Standards

A Guide to Internet Explorer 9’s HTML5/CSS 3 Support

By Scott Gilbertson

BERJAYA

If you’d like to know exactly where Internet Explorer 9 stands on support for emerging web standards in its current beta release form, Microsoft has put together a comprehensive list of all the supported HTML5 and CSS 3 features in IE9. The document notes that IE 9 is still a beta release, and the list is subject to change, but it makes a good list to help you get up to speed on IE 9’s new capabilities.

Internet Explorer 9 is a major leap forward for Microsoft in its promise to deliver solid web standards support. Although IE 9 still lags behind its competitors when it comes to supporting the latest HTML5 and CSS 3 code, it’s leaps and bounds beyond where IE 8 left off.

Perhaps the most interesting part of the list is that Microsoft has opted to skip the vender prefix in most of its CSS 3 support and simply use, for example, the border-radius rule. That means if you’ve been adding the straight CSS 3 rules in additions to the -webkit, -moz and -o prefixes, your fancy style sheets should already work in IE 9.

Among the good news for web developers in IE 9 is support for CSS 3’s border-radius property, opacity in images, CSS media queries and the new web fonts format, WOFF.

IE9’s WOFF support even has a nice showcase: a series of CSS font experiments dubbed Lost World’s Fairs. Using WOFF and Typekit, web designers Jason Santa Maria, Frank Chimero and Naz Hamid have put together some very impressive font demos to advertise World’s Fairs that never happened (we’re partial to the Atlantis World’s Fair).

The demos will work in any modern browser, including the new IE 9 beta.

While IE 9 isn’t a final release yet, things are definitely look up for web developers. Yes, we’ll still be supporting IE 7 and IE 8 for some time, and yes, IE9 still lacks a few things, like support for CSS 3 text-shadows or HTML5’s form elements, but it’s a step in the right direction.

See Also:

View Comments |
Permalink

Sep152010

File Under: HTML5, Web Standards

Microsoft Taps HTML5 to Add Zing to Bing

By Scott Gilbertson

BERJAYA

As part of the launch event to show off the new Internet Explorer 9 beta, Microsoft also demoed a new version of its Bing search engine that uses HTML5 and CSS 3 to spice up Bing’s homepage and search results.

During the demo, Bing developers showed off a version of the search engine that uses the HTML5’s video tag to take Bing’s well-known background images a step further, replacing the static image with a video of waves crashing on the beach. Another new feature, using the Canvas element, will allow you to zoom around a very large image.

The revamped version of Bing will launch in October. Microsoft is still tweaking some of the code, but its demo at the launch event was already complete enough to impress.

Other tricks up Bing’s sleeve include some fancy transitions between search types — nice sliding and fading transitions between tabs (presumably done using CSS 3 transitions) — and other visual touches, like animated backgrounds for weather forecasts and auto-expanding search results.

Continue Reading “Microsoft Taps HTML5 to Add Zing to Bing” »

View Comments |
Permalink

Sep152010

File Under: JavaScript, Web Standards

The Kraken Awakes to Test Your Browser’s JavaScript Powers

By Scott Gilbertson

BERJAYA

Mozilla has unleashed the Kraken, a new JavaScript benchmark test.

It joins similar efforts like Google’s V8 and the WebKit project’s SunSpider tests, which are widely used to measure browser performance. However, unlike V8 and SunSpider, which are more general stress tests to measure overall capability, Mozilla’s Rob Sayre says Kraken focuses mainly on “realistic workloads and forward-looking applications.”

Among the real-world things Kraken tests are Mozilla’s new beat detection scripts, which uses experimental audio APIs, and image processing tools like the ones that apply a Gaussian blur or desaturate a JPG using JavaScript.

“These are the things that people are saying are too slow to do with open web technologies today,” Sayre writes, “and we want to have benchmarks that reflect progress against making these near-future apps universally available.”

While real-world tests are important and Kraken offers a way to measure browser performance in ways that aren’t really possible without it, in terms of an overall performance benchmark test, Kraken seems unlikely to supplant V8 or SunSpider.

Of course, supplanting doesn’t seem to be the goal of Kraken. Rather, Mozilla wants to shift focus from generalized benchmarks to tests that reflect what’s actually happening on the web — both today’s web apps and those that are pushing the boundaries and paving the way for a new generation of apps.

The goal of Kraken is less about proving how “fast” a browser is overall and more about offering a way to test actual, everyday tasks that mirror the things we all do with web browsers.

To test Kraken you can head over to the new site and run it yourself. In Mozilla’s testing Kraken shows that Firefox 4 (with its new JaegerMonkey JavaScript engine) is already more than 2.5 times faster than the current release of Firefox 3.6.

See Also:

View Comments |
Permalink

Sep152010

File Under: Browsers

Chrome Update Fixes Serious Mac OS X Bug

By Scott Gilbertson

Chrome logo Google has updated the stable and beta branches of its Chrome web browser with several important bug fixes and stability improvements, including a rather serious security bug in Mac OS X.

If you’re using either the beta or stable versions of Chrome, you should receive the update automatically and be prompted to restart the browser.

As is typical of more serious security bugs, Google hasn’t released any details about the critical Mac OS X bug, lest it be exploited before everyone has the fix in place.

Less serious fixes in this Chrome update include squashing a bug in the Geolocation features and some memory corruption bugs that had been dogging Linux users. There’s also a small fix for a rather obscure bug the would sometimes crash Chrome when using an ad-blocking add-on. If you’ve experienced any of these problems with Chrome 6 (or the beta channel), the update should make your day.

See Also:

View Comments |
Permalink

Sep152010

File Under: Browsers

Firefox 4 Update Fixes Mac, Windows Bugs

By Scott Gilbertson

Firefox 4 beta

Mozilla has released Firefox 4 beta 6, but it isn’t the beta 6 you were expecting. The latest release is a very small update with just a few bug fixes. The build originally planned as beta 6 has been pushed back to beta 7.

You can grab Firefox 4 beta 6 from the Mozilla beta downloads page.

The only two changes of note in this release are stability fix for Windows and some rendering and keyboard and mouse focus problems in Mac OS X. If you experienced the Mac bug where white overlays would hide portions of the page, beta 6 takes care of the problem. The other bug fix stops a crashing bug and should make Firefox 4 more stable on Windows.

According to Mozilla’s beta road map the newly renamed beta 7 will arrive October 1st and Firefox 4 will likely reach the feature-freeze stage shortly after that. Although no final release date has been set, judging by the road map, it seems likely Firefox 4 will be ready before the end of 2010.

See also:

View Comments |
Permalink

Sep152010

File Under: Browsers

Internet Explorer 9 Beta Drops. It’s Lean, Fast and Modern

By Michael Calore

Internet Explorer 9 Beta on the Windows 7 desktop

Microsoft will release the first beta version of its new Internet Explorer web browser Wednesday morning.

Internet Explorer 9 Beta will be made available for download shortly after it is announced at a launch event in San Francisco, around 10:00am Pacific time. We’ll post a download link for Windows Vista and Windows 7 users as soon as we have one.

The final version of IE9 is still some months off — Microsoft wouldn’t commit to a definite time frame for the browser’s release when we asked. But we’ve spent a few days in IE9 Beta’s company, and so far, it has proven to be a thoroughly modern machine. The world’s most-sed browser is getting a new look, much expanded support for HTML5 and other 21st century web technologies, and a big speed boost.

Quite a change. Microsoft has a reputation for being an also-ran when it comes to browser innovation. When IE8 arrived in March 2009, we found it rich in features, but lacking in support for the emerging standards powering the shiny apps that make the web exciting. IE8 was faster and more secure than its predecessor, but when it came to speed and productivity, it wasn’t up to snuff with its peers — Chrome, Firefox, Safari and Opera. In fact, it was a bit of a snooze.

A year and a half on, Microsoft has smelled the coffee and is wide awake at the wheel. IE is fit to play in the same league as the other browsers.

Keep in mind, IE9 Beta is still pre-release code, so it may not run perfectly. But there’s enough new going on here — especially that speed boost — to make the download a must for the curious who want a taste of IE’s future.

A new look

The most striking difference between this browser release and the IEs of old is the new user interface. It’s sleek and minimal, and — what are those? — it now has the inverted top-tabs, which are quickly becoming common.

We first caught wind of this design change when a screenshot of the new IE9 leaked onto the web. It decreases the amount of real estate the browser consumes on screen and makes way for more content.

Another shot of IE9 Beta. Click for larger.

“The browser is the stage and the backdrop, but the website is the star of the show,” Microsoft general manager of Internet Explorer Dean Hachamovitch tells Wired. “We think the browser should totally take a back seat to the sites.”

Freeing up those extra pixels with a minimal top bar is a path others in the industry are taking. Chrome shipped with the tabs-on-top look two years ago, Mozilla has adopted it for Firefox 4, and Safari has flirted with in the past. Opera offers a few different choices for where to put your tabs.

Other notable details: a unified search and URL bar (a la Google Chrome) where you can get search suggestions as you type. Bing is the default, but you can add Google, Wikipedia or a host of other engines. There’s also an enlarged back button, (a la Firefox) and a noticeable lack of menu items in the main bar. Something else new in IE9 is the New Tab window with thumbnails of your most commonly-visited sites, which looks much like what you’ll find in Safari, Chrome and Opera. A nice addition here is a little bar in each thumbnail that shows how much time you’ve spent on each site.

Continue Reading “Internet Explorer 9 Beta Drops. It’s Lean, Fast and Modern” »

View Comments |
Permalink

Sep132010

File Under: CSS, Mobile

Slide Show Time: Rethinking the Mobile Web

By Michael Calore

Embedded above is an excellent presentation by Bryan Rieger.

It argues for a mobile-first approach to web development — by building for small screens first, then using @media queries to “size up” the experience and adapt your content on the fly, you can make sure people see the best version of your site for their particular device. It makes the most sense on the mobile web, where viewports and browser capabilities vary widely, and where (as Rieger points out) our definition of what exactly is a mobile device remains open. It’s an extension of the old “progressive enhancement” approach from the first decade of the web.

There are also some great data breakdowns about devices and browsers at the beginning. The takeaway: We’re all developing for Mobile Safari and Android, but most of the world is still using something far less advanced to visit your site.

Of course, the browser audience will vary based on the content — here at Wired, most of our mobile visitors use iOS devices, and the bulk of the rest use Android. But for a non-geeky site, things will skew more towards mobiles with clunky browsers.

140 slides, takes 10-20 minutes to flip through. Best viewed in Fullscreen mode.

See Also: