Archive for December, 2010

File Under: Browsers
Dec
16
2010

Opera Goes to 11 With Extensions, ‘Tab Stacking’

By

Opera software has released Opera 11, a major update for the company’s flagship web browser.

Opera’s market share is the smallest of the major web browsers — around 2 to 4 percent — but Opera has long been the bellwether of web browsers. What Opera does first, others soon copy. Tools like tabbed browsing, mouse gestures and a page that shows thumbnails of your favorite sites when opening a new tab were first introduced in Opera and later appeared in other web browsers.

If you’d like to give Opera 11 a try, head over to the Opera download page.

While Opera 11 continues to push the browser with an innovative feature called “Tab Stacking,” it’s also an unusual release that sees Opera playing a little catch-up. Until today, Opera was the only browser that did not have a system in place for third-party add-ons. Opera 11 changes that, adding an extensions framework similar to what you’ll find in Safari and Google Chrome.

For the launch of Opera 11 there are some 200 add-ons available for popular tasks like blocking ads, downloading YouTube videos and managing passwords. While 200 add-ons is nothing next to what’s available for Firefox or Chrome, Opera’s decision to base its extensions framework on the W3C Widget specification (which defines a “widget” as a downloadable and locally stored web application), means it should be relatively easy to port existing Chrome and Safari extensions to Opera’s platform. So easy, in fact, that Opera reports developers are submitting between 10 and 20 new extensions each day.

The Opera 11 extensions manager

To make it easier to find extensions for Opera 11, the company has launched a new website for publishing and searching Opera extensions.

One thing you may not find in the new extensions store are Flash-blocking add-ons. Actually you probably will, but you don’t need them. Opera 11 can now be set to load plug-ins (like Flash or Silverlight) only on demand. Just head to the preferences menu, select the Advanced tab and then click Content. There, you’ll see a new option to only load plug-ins on demand. The feature is disabled by default.

Opera may be the last browser to get extensions, but it’s still leading the pack when it comes to innovative ideas for tabbed browsing. Opera 11 introduces “Tab Stacking,” a way to group your tabs together to better organize the webpages you’re viewing.

Tab Stacking is ingeniously simple and works a little bit like the way you create folders of apps on the iPhone’s home screen. You group related tabs by dragging them on top of each other. Your “stack” then collapses down into a single tab. To access the tabs in a stack, you simply mouse over the group and it expands, or you can click the arrow to the right of the grouped tab, which has the same effect.

Tab Stacking in Opera 11

Firefox 4 will also introduce a new interface for grouping tabs when it is finalized in a few months. However, Firefox 4′s current implementation (still in beta) suddenly looks awkward and primitive next to Opera’s take on the same idea. It’s more elegant, and it plays on a behavior many users — those with iPhones or iPads — are already familiar with.

We looked at Tab Stacking in depth when we reviewed the Opera 11 beta last month. Since then Opera has totally rewritten the underlying code. Although you might not notice much of a difference if you tried the beta release, the new version is reportedly more stable.

The best way to understand Tab Stacking is to see it in action:

Opera’s mouse gestures have been improved in this release, though there’s still not much support for gesture-based trackpads. In my testing, gestures like pinching zoomed in and out, but other options like three or four-finger swipes aren’t supported.

Of course, all the new features would be less exciting if they slowed things down, but luckily they don’t. Opera hasn’t given any hard and fast numbers, but in our experience Opera 11 is faster than its predecessors and on par with Firefox 4b7 and Chrome 8. The speed boost is particularly noticeable on Linux, where Opera 11 is roughly 30 percent faster.

Perhaps even more impressive, Opera 11 is actually 30 percent smaller than previous releases, saving you a bit of download time and disk space.

Other noteworthy features in the Opera 11 include a revamped, simplified URL bar, which, like Google Chrome, dispenses with the “http://” bit at the front of URLs and highlights the security status of the current page.

Thanks to the new add-ons framework, Opera fans no longer need to envy other browsers, and the Tab Stacking feature once again shows Opera leading the way. Even if you don’t switch to Opera 11, the release is still good news for users of other browsers which, if history is any guide, will soon be mimicking Opera’s lead.

See Also:

File Under: Browsers, HTML5, JavaScript, Multimedia
Dec
15
2010

Building Better HTML5 Games With Canvas

By

Canvas drawing speeds in Firefox 4 beta 7

The Canvas element is one of the most exciting parts of HTML5. It gives web developers a blank slate to create animations, games or even interactive video elements, all of which previously required plugins like Flash or Silverlight.

Canvas is not, however, a panacea — just because you can does not mean you should. Canvas-based animations can slow down pages, send your PC’s fan into overdrive and produce stuttering, frame-dropping ugliness. The stunning HTML5 experiment The Wilderness Downtown, was indeed very cool, but it also nearly crippled even the newest PC hardware.

As with most programming, the trick to using HTML5′s canvas element is knowing how to optimize your code so it works within the limits of today’s browsers.

We’ve looked at some tips and tricks for working with canvas in the past. At Mozilla’s recent Open Web Gaming conference, Ernesto Jiménez, lead developer at gaming company Six to Start, outlined some more handy tips for building canvas-based HTML5 games.

While a few of these tips are specific to games, in general they’re simply good ideas for anyone working with the canvas element — whether it’s games, animations or graphs.

Jiménez’s covers tips like drawing new elements offscreen and then copying them into your onscreen canvas to avoid flickering animations, and minimizing processor-intense operations like getImageData or fillText. He also talks about how to break up your animations into multiple canvas elements for smaller, faster graphics.

Jiménez’s slideshow gives a basic overview of the tips, but there’s also a video of the talk which includes a bit more detail on why these tips are helpful:

See Also:

Tags: , ,
File Under: CSS, HTML5, Visual Design
Dec
10
2010

Celebrate the Holidays With the Advent Calendar for Web Nerds

By

How do we know it’s holiday season? Sure, it’s getting colder, and possibly even snowing where you live. But the real sign for web nerds is that 24Ways, the annual advent calendar for web geeks, is shining in all its standards-promoting glory.

This year 24Ways is, along with the rest of us, embracing HTML5 and CSS3. Among the useful hints, tips and tutorials so far this year are Christian Heilmann’s take HTML5′s Local Storage API for offline content and Scott Schiller’s The State of HTML5 audio.

On the CSS side, Inayaili de León has a great CSS wishlist, which includes comments from Tab Atkins, a CSSWG member who addresses many of the possibilities raised in the piece. One particularly noteworthy item in de León’s piece is something we didn’t know existed: the :-moz-any() selector group. Although not yet a formal part of the CSS spec, it looks like the any() selector has a good chance of making it in one day.

The any() selector would be useful for shortening code, for example, because HTML5 encourages multiple h1 tags, which might be at all sorts of depths within the page, you could simple write (to borrow Mozilla’s example):

-moz-any(section, article, aside, nav) h1 {
  font-size: 25px;
}

Again, the any() selector is a just a proposal at this point, but it does work in the latest beta of Firefox if you’d like to test it.

Other good articles so far in this year’s 24ways include a look at design workflows and how you can improve your own, and everyone’s perennial favorite — how to avoid the flash of unstyled content when embedding fonts in your page.

This year’s 24Ways also has a new twist: when the series is finished, there will be a limited edition print annual. You can order a copy today, and all proceeds will go to UNICEF.

Altoids Advent Calendar photo by Kim Taylor/Flickr/CC. For instructions, visit her blog.

See Also:

Tags: ,
File Under: HTML5, JavaScript, Visual Design
Dec
10
2010

Google Uses HTML5, JavaScript to Visualize Popular Searches

By

Google has released its annual zeitgeist report, a look at how the world searched in the last year. The zeitgeist is Google’s record of popular search terms and draws on sources like Google Insights for Search and Google Trends. It’s also a reminder that, in addition to tracking you in the usual creepy ways, Google often reveals some interesting data.

The results are predictably disappointing — despite a year’s worth of events, Chatroulette and Apple’s iPad top the list of most popular searches — but the data visualization Google has created is impressive.

The visualizations combine HTML5 with some fancy JavaScript (which appears to rely on the Dojo framework) to offer maps, bar charts and timelines. The map is particularly cool, plotting out bar graphs of searches by country with an interactive timeline slider to narrow the results by month.

Other views include bar graphs of the top search terms by category. When you click on an individual bar, the graph morphs into a timeline.

There’s also a video with some overly-nostalgic music that walks you through the top terms of the year. Check it out:

See Also:

Tags: , , ,
File Under: Browsers, HTML5
Dec
9
2010

Security Flaws Force Firefox, Opera to Turn Off WebSockets

By

Firefox and Opera have both disabled support for HTML5 WebSockets in the latest builds of their respective browsers. The move comes on the heels of a protocol vulnerability that could leave thousands of sites harboring malicious code.

New in HTML5, the WebSocket protocol enables a key mechanism found in modern web apps, allowing servers to independently send data to a client browser without the need for page refreshes or complex JavaScript. The most immediate use for WebSockets are apps that rely on full-duplex communication channels, like web-based chat tools and other real-time sharing apps.

Unfortunately, flaws in the WebSockets protocol also make the current spec easy to exploit.

The vulnerability was discovered by Adam Barth, who has demonstrated that a serious attack against the protocol could poison caches that sit in between the browser and the internet. That means, for example, a common JavaScript file like a Google Analytics script, could be replaced on a cache with a malware file.

As Mozilla’s Hacks Blog notes, the exploit doesn’t just affect browsers implementing WebSockets, but also Flash and Java. As the blog post says, “to avoid a lot of malware showing up without being easily traceable, we need to fix the protocol.”

Details of the exploit can be found in Barth’s paper [PDF link] and a series of messages to the Internet Engineering Task Force mailing list. Fortunately there appears to be a solution, but it will require rewriting some of the WebSockets spec.

However, until that solution is implemented both Mozilla and Opera have disabled support for WebSockets. Mozilla expects other browser to follow suit, though so far Opera is the only other browser to disable support. WebSocket support isn’t just a feature in desktop browsers either, the recent Mobile Safari upgrade in iOS 4.2 added support for WebSockets.

So far neither Adobe, which makes the Flash Player plug-in, nor Oracle, which oversees Java, have addressed the issue.

If you’ve been experimenting with WebSockets, be aware that the as of Firefox 4 Beta 8 (due in the next few days), Mozilla will no longer support your code. Neither will Opera 11. We really don’t expect this to be a long-term issue, so if you want to continue testing apps based on the nascent protocol, you can re-enable the features by changing a hidden preference in Firefox and Opera.

Photo by Andy Butkaj/Flickr/CC

See Also:

Tags: , , ,
File Under: Social, Web Services
Dec
8
2010

Twitter Adds More Media-Sharing Services to Inline Previews

By

Twitter now offers inline previews for more services, like the popular Instagram.

Twitter has expanded the integration of third-party services on its website, adding five new photo and video sharing services to the growing list of what shows up as an inline preview.

Among the new services to secure a spot in the ever-expanding Twitterverse is Instagram, the current darling of the Twitter hipsters. The photo-sharing service has managed to build an impressive following even though it’s currently only available as an iOS app. The majority of Instagram fans use Twitter to post links to their artsy photos.

The other new services available as inline previews include videos from Blip.tv, music players from Rdio, slideshows and presentations from SlideShare and photos and videos from Dipdive.

The new inline preview feature, introduced in September’s make-over, shows a preview of an image or a video in the right-hand pane whenever somebody tweets a link to a supported video or photo site. At launch, that was Flickr, Vimeo, TwitPic and YouTube. Along with the inline previews, you also see associated conversations, recent tweets and mini bios of the people mentioned in the tweet. It’s a feature we really like — it takes Twitter beyond the 140 character limit to include photos, videos, maps and all sorts of other rich media.

While we’re happy to see Twitter integrating with more web services, the new web-based preview features highlight just how far behind the website the company’s official mobile apps have fallen. Neither the official Android client nor the iOS Twitter clients support any of the inline previews you’ll find on the web. Twitter’s mobile site doesn’t show them, either. For a richer mobile Twitter, you’ll need to turn to third-party mobile apps.

See Also:

Tags: , ,
File Under: Browsers, Web Apps
Dec
7
2010

Google Shows Off Chrome OS, Along With a Store to Fill it Up

By

SAN FRANCISCO, California — Google unveiled a beta version of its Chrome OS Tuesday morning.

The company showed off the operating system, which has been in development for over a year, during a press event here. Also making an appearance at Tuesday’s event was the Chrome Web Store, which we expected to see launch today. If you’re using the Chrome browser, you can visit the store and start installing apps now.

Chrome OS, which doesn’t go into general release until next year, relies entirely on web-based applications for basic productivity tasks like mail, document editing, photo sharing, social networking and reading news. Its inner workings are based on Google’s own Chrome browser.

To get around the connectivity problem inherent to web-based apps, Google says every Chrome OS laptop will ship with both wi-fi and cellular connections. The company has partnered with Verizon — when you buy a Chrome OS laptop, you get 100MB of free data per month for two years. There are no long-term contracts. If you want to upgrade, you only pay for what you need. Chrome OS users can buy a day pass from Verizon, or choose from a few long-term plans starting at $10 per month.

Acer and Samsung Chrome OS laptops will go on sale in mid-2011, with more OEMs to follow, the company says.

In the meantime, Google is launching a pilot program to get hardware running Chrome OS into developers’ hands. Early adopters can sign up to get a black, unbranded Chrome OS notebook, codenamed “Cr-48.”

Google VP of product management Sundar Pichai held one up during the event — it’s a full-sized laptop with a 12.1″ screen, an Intel Atom processor, a world-mode 3G radio, a flash memory drive, and it has a built-in “jailbreaking” mode so you can hack it. Google is also giving away a few of the pilot laptops to its Facebook fans.

From what we’ve seen so far, Chrome OS is extremely fast (the demo we saw was running on the Cr-48 laptop) and, provided you already have a Google account, it literally takes under a minute to get up and running.

Pichai, who has been using ChromeOS for six months, continuously gushed about its speed, which was evident during the demos.

“By building an experience based totally on the web, we’ve made all of the user experiences instant,” he said.

Continue Reading “Google Shows Off Chrome OS, Along With a Store to Fill it Up” »

Tags: , ,
File Under: Browsers
Dec
7
2010

Chrome Gets New ‘Crankshaft’ Engine, Syncing, WebGL Support

By

SAN FRANCISCO, California — Google has rolled out some enhancements to its Chrome web browser, adding a new JavaScript engine, more hardware acceleration, and finalizing its system that keeps all of your copies of Chrome in sync.

The enhancements were debuted as part of a press event for Chrome OS and the Chrome Web Store here Tuesday.

The new JavaScript component is called Crankshaft, and it’s built on top of the open source V8 JavaScript engine that currently powers Chrome.

Google VP of product management Sundar Pichai says the boost makes Chrome 50 times as fast as web browsers were just two years ago when Chrome launched.

“Something that took a minute to happen in JavaScript two years ago can now happen in under a second,” he said.

We haven’t been able to verify Google’s speed claims yet (we’re still at the press event) but you can test out Crankshaft now. It’s available in the bleeding-edge Canary build of Chrome right now.

The syncing feature, which Google has had kicking around in developer and beta releases for months, offers “the same Chrome experience everywhere,” Pichai says. It syncs your bookmarks, preferences, auto-fill information and themes across all copies of Chrome, and you sync up your browsers by logging in to your Google Account. You can choose which datatypes you want to sync and which you don’t.

Also on display were the new WebGL features, which offload the most processor-intensive tasks for graphics and page rendering to the machine’s GPU. The demo featured the familiar “look at how fast the fish swim around the fish tank” method of showing off hardware acceleration, but Google added a nice touch by introducing sharks with lasers coming out of their eyes. The laser beams even refracted when they passed through the glass of the tank.

Google says Chrome 9 beta will have WebGL enabled.

Pichai also showed off some of Chrome’s other recent enhancements, like sandboxing for plug-ins.

He also said Chrome now boasts 120 million users worldwide.

See also:

Tags: , ,
File Under: CSS
Dec
3
2010

Why Percentage-Based Designs Don’t Work in Every Browser

By

Here’s a rule any web designer can live by: Your designs don’t need to look exactly the same in every browser, they just need to look good in every browser.

It’s a maxim that will spare you many a hair-pulling hour. That said, there some things you would expect to be the same across browsers that aren’t. One such problem that’s likely to crop up more often as designers jump on the responsive, flexible-width bandwagon is percentage-width CSS rules.

According to the spec, browsers, given a percentage width, would simply render the width of the page based on the size of the container element. And, in fact, that’s what browsers do, but how they do it varies quite a bit. As a result, percentage-based widths are often displayed quite differently across web browsers.

Developer Steffan Williams recently ran into this problem when trying to create a percentage-based version of his Gridinator CSS framework. Williams created a container <div> with a width of 940 pixels and then wanted to create a 12 column grid within that container. Do the math and you end up with columns set to a width of 6.38298 percent.

Pull that up in Firefox or Internet Explorer 6/7 and you’ll see what you expect to see. In Safari, Chrome and Opera, however, you’ll see something different. IE 8 and 9 are also slightly off.

The problem is not a new one; developer John Resig pointed this out years ago. But as Williams notes, it’s odd that browser behavior when rendering percentage-width grids is still so inconsistent across vendors, especially given how much today’s browsers tout their CSS 3 support.

The problem isn’t necessarily a simple case of Firefox and IE being right and the others wrong. As Opera CTO and CSS creator Håkon Wium Lie tells Webmonkey, the problem is “the CSS specification does not require a certain level of precision for floating point numbers.”

This means browsers are free to round your carefully computed percentages up or down as they see fit. According to Lie, Opera considers the result of Williams’ experiment to be a bug. Same with the WebKit project, the engine that handles rendering in both Safari and Chrome, though in Webkit’s case the bug has been unassigned since 2006. But really, there is no right or wrong here, just different ways of rounding.

Continue Reading “Why Percentage-Based Designs Don’t Work in Every Browser” »

Tags: , ,
File Under: Browsers
Dec
3
2010

Chrome 8 Offers Built-in PDF Tools, Security Fixes

By

Staying on track with its rapid-fire, six week release cycle for its web browser, Google has pushed out the final version of Chrome 8. The latest release packs in some 800 bug and security fixes, as well as a new inline PDF viewer.

If you’re using the stable, everyday version of Chrome, you should be automatically updated to Chrome 8. If you’re using another release, or would just like to give Chrome a try, head over the Google Chrome download page.

The new, built-in PDF viewer means that when you click on a link to a PDF now, Chrome will no longer download the file to your PC. Instead, Chrome will offer a preview in the browser where you can view and search the document. Also, thanks to the sandboxing model, this decreases the chance of malicious code, malware or anything else bad being delivered through the PDF. Of course, if you then decide to download the file, Chrome won’t protect you from anything that might be lurking inside.

The PDF reader joins Flash in the list of things that Chrome manages for you. That means Google can push out updates and security fixes as needed to these components of its browser, rather than relying on users to update plug-ins themselves. You can disable the PDF viewer (or any other plug-in) by navigating to about:plugins inside Chrome.

Chrome 8 is also the first version capable of connecting to the Chrome Web Store. Although there’s nothing to see at the moment, Google is planning to release a store similar to the Android Marketplace or Apple’s App Store, but with a focus on web applications, Chrome extensions, and Chrome themes.

See Also:

Tags: , ,
« OLDER POSTS