Archive for November, 2011

File Under: Browsers
Nov
16
2011

Mozilla Hatches Plan to Tackle Memory Leaks in Firefox Add-ons

By

Mozilla began an aggressive campaign earlier this year to trim Firefox’s memory footprint with a new initiative called MemShrink. The first fruits of that effort landed in Firefox 7, which was released in September. As a result, Firefox’s memory consumption is now between 20 to 50 percent lower. Building on that success, Mozilla is expanding the scope of its MemShrink initiative and looking to address memory consumption in additional areas.

In a blog post published earlier this week, Mozilla’s Justin Lebar proposed a strategy for tackling memory leaks in third-party add-ons — a common source of Firefox memory problems. Firefox’s add-on ecosystem is one of the browser’s great strengths, but it also presents challenges.

Add-ons can behave in unpredictable ways — it’s not always clear to users when a problem they encounter in Firefox is caused by the browser or by third-party code. As Lebar says, the time has come for Mozilla to start taking a more active role in protecting users from add-on misbehavior. Mozilla already loosely polices its add-on site to protect users from malware, so taking proactive steps to flag leaky add-ons seems like a logical step.

“The fact is, if we take credit for our vibrant add-on community, we must take responsibility for the problems those add-ons cause,” Lebar wrote. “This shouldn’t be controversial; we already check to ensure that add-ons aren’t outright malicious before posting them to AMO, acknowledging that the buck stops at Mozilla when there’s a misbehaving add-on. Even if it’s not our bug, it’s in our software, and people will blame us, not their add-ons.”

Lebar’s proposed strategy includes three approaches, which he calls the carrot, the stick, and the wrench. The carrot approach will involve changing Mozilla’s add-on website so that testing for “zombie compartments” that leak memory is a standard part of the process for submitting a new add-on.

The stick approach will involve flagging and publicly identifying add-ons that leak a lot of memory-much like a previous experiment in which slow add-ons were named and shamed. Finally, the wrench approach will involve building better tools that will make it easier for add-on developers to identify and resolve memory leaks themselves.

Lebar suggests using all three approaches together. Tickets have been opened in Mozilla’s bug tracker to facilitate developer discussion about the proposal and how to proceed with an implementation. Users can hopefully expect to see a meaningful improvement in add-on memory overhead when the plan goes into effect.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

See Also:

Tags:
File Under: Browsers
Nov
16
2011

Get More Out of Your Browser’s Developer Tools

By

Inspecting Webmonkey in Chrome

Every web browser now ships with some sort of developer tools built-in. The only exception is Firefox, but that’s changing soon (and of course Firefox is also home to the add-on that started it all — Firebug). In fact web developers have come to rely on these tools so much that it’s difficult to remember what we did before Firebug, WebKit Inspector, Dragonfly and the rest of the browser tools (we swore a lot more, among other things).

Whether you need to manipulate DOM elements, inspect CSS styles, edit HTML elements or step through JavaScript the browser developer tools make it easy to do. And no matter how much the browsers’ various developer tools are a part of your daily workflow there’s always some new tricks to learn.

If you’d like to dive a bit deeper into the world of browser developer tools and learn quite a few handy tricks you might not be aware of, head over to developer Andi Smith’s blog and read through his recent post 25 Secrets of the Browser Developer Tools. Smith gives an in-depth walk-through of some lesser known features and even points out which tools support them, which don’t and variations between them.

Of course thanks to differences between browsers and tools not every tip works the same way (or at all) in every browser, but if you’re a web developer you’ve most likely got a copy of every browser installed anyway and jumping back and forth between several is probably second nature.

Among Smith’s twenty-five suggestions are tips like how to perform calculations right in the browser, how to expand minified JavaScript, how to save your CSS edits, store revisions and perhaps the most helpful — how to quickly disable the browser’s cache. For more tips head over to Smith’s post, and be sure to check out the comments where readers chime in with their own lesser known tips.

Our own tip to add to the list is limited to Chrome/Chromium and is very simple, but often overlooked — don’t forget about you can drag-and-drop. The Elements tab in Chrome’s inspector panel allows you reorder the source of the page by dragging and dropping HTML elements. Dead simple, but sometimes handy for debugging misbehaving floats and other CSS mysteries.

See Also:

File Under: Programming, Software & Tools
Nov
16
2011

Adobe Puts Flex Out to Open Source Pasture

By

If you needed further proof that even Adobe is done with Flash, look no further than the company’s recent announcement that it will open source the Flash-based Flex SDK. Adobe plans to turn over its Flex SDK to the Apache Software Foundation.

Flex is the company’s development framework for building cross-platform applications using Adobe Flash and ActionScript. The SDK’s focus on data-driven apps made Flex a popular choice with Adobe’s enterprise customers, many of whom are no doubt feeling a bit let down to see Adobe walking away from Flex.

Much of the Flex codebase is already open source; what’s changing with the move to the Apache Software Foundation is the governance of Flex. Adobe is no longer the sole guiding force behind Flex.

Ordinarily, when a company opens up a project like Flex it’s good news for developers, but in this case it feels more like Adobe’s exit strategy. The community of Flex developers may have gained some more control over Flex’s future, but that future looks pretty bleak.

Adobe has already made it clear that the company plans to refocus its efforts on HTML5, and, while it says it intends to continue supporting Flex, it also says, “in the long-term, we believe HTML5 will be the best technology for enterprise application development.”

In fact the initial message about the future of Flex was dire enough that Adobe felt the need to update its FAQ to specifically address concerns that it is abandoning Flex. “Absolutely not,” says Adobe in the updated statement, adding that the company is “incredibly proud of what we’ve achieved with Flex.”

While the updated statement is intended to reassure Flex developers, it’s hard to miss the use of the past participle in reference to Flex, which doesn’t bode well for developers looking to the future. It’s also hard to miss the reiterated commitment to HTML5. “In time,” says Adobe, “we believe HTML5 could support the majority of use cases where Flex is used today.” The company puts the timeframe for most applications in the three- to five-year range. In other words, Adobe believes Flex is only a good bet for the immediate future, developers interested in building something with more long term viability would do well to consider the web and HTML5.

For more details on the future of Flex and Flash, be sure to read through Adobe’s updated FAQ on the subject.

See Also:

Tags: ,
File Under: privacy, Web Standards
Nov
15
2011

W3C Releases New Web Privacy Standard

By

The World Wide Web Consortium (W3C) has released the first draft of a new web standard aimed at improving online privacy. The W3C’s new Standard for Online Privacy is a set of tools that will ultimately enable your browser to stop sites from tracking your every move on the web.

The first draft of the new privacy standard revolves around the “Do Not Track” (DNT) HTTP header originally introduced by Mozilla as a part of Firefox 4. The DNT header — a bit of code sent every time your browser talks to a web server — can be used to tell websites you don’t want to be tracked. The goal is to give you an easy way to opt out of often invasive tracking practices like behavioral advertising.

Behavior advertising refers to the increasingly common practice of tracking your online behavior and using it to tailor ads to your habits. Advertisers use cookies to follow you around the web, tracking which sites you visit, what you buy and even, in the case of mobile browsers, where you go.

Some web browsers, including Internet Explorer and Chrome, offer an opt-out mechanism in the form of a cookie — add the cookie to your browser and participating sites won’t track your browsing. While the cookie-based approach is widely supported by advertisers, if you ever clear your browser’s cookies for any reason, your privacy settings are lost.

Mozilla’s original “Do Not Track” tool offered the same end result — broadcasting your privacy settings to advertiser’s servers — but instead of using a cookie, Mozilla’s DNT effort created a new HTTP header. The header offers a more robust and permanent solution than cookies and it’s easier for users to control via a simple browser preference.

Mozilla's basic overview of how the DNT header might work

Earlier this year Mozilla turned its DNT efforts over to the W3C where the Tracking Protection Working Group was formed. The working group thus far includes everyone from the major browser vendors to large websites like Google and Facebook. Consumer advocacy groups like Consumer Watchdog, the Electronic Frontier Foundation and even the U.S. Federal Trade Commission are also participating. This first draft of the new privacy standard is the groups’ first public release.

The new spec goes quite a bit further than Mozilla’s original definition of DNT, including sections to define how the header is transmitted, what URI servers should use to respond and how websites are to comply with the preference. Obviously, because this is just the first draft there are still many gaps in the spec.

The new privacy spec is only a first draft, but that’s not the main problem currently stopping DNT from becoming a real-world way to protect your privacy. The real problem is the advertisers. While many are already on board with the new DNT standard, so far few actually obey it. Skeptics often argue that the DNT header won’t truly protect your privacy because there’s no way to force advertising sites to obey it. That is true, and there will no doubt always be some bad apples on the web, but the advertising industry has a surprisingly good track record of self-regulation. Much of that record no doubt stems from fear that, without some degree of self-regulation, governments will step in to impose their own regulation on behalf of consumers.

The W3C’s new privacy standard effort is a long way from finished, and, because it relies on the voluntary participation of advertisers, it will likely never completely protect your privacy. Still, it’s a stronger means of opting out than cookies. Moreover, the existence of an official DNT standard blessed by the W3C just might convince more advertisers to support the initiative.

[Footprints photo by Vinoth Chandar/Flickr/CC]

See Also:

Tags:
File Under: Browsers, HTML5
Nov
14
2011

HTML5 Games, Video Get Boost From Full-Screen API in Firefox Nightly

By

Support for the HTML full-screen API was recently enabled in Firefox nightly builds. It allows web applications to toggle the browser into full-screen mode and stretch a single page element so that it fills the user’s display.

The feature will be especially useful for the HTML5 video element, making it easy for developers to add native full-screen playback to their custom HTML video player interfaces. It will also likely be useful for games and other kinds of content where full-screen interaction is desirable.

The discussion surrounding HTML full-screen API’s began last year on the WHATWG mailing list. The WebKit team was experimenting with full-screen support for HTML5 video and was contemplating a more general API that could be used for any kind of web content. Mozilla’s Robert O’Callahan wrote up a proposal that fleshed out what the API might look like.

WebKit introduced support for the full-screen API earlier this year, and it’s already supported in Chrome stable releases. Mozilla recently rolled out its own implementation in nightly builds and is planning to deliver the feature to regular end users in Firefox 10.

Mozilla has taken a few steps to prevent abuse of the new API. A web application can’t arbitrarily make an element full-screen without user intervention — the operation has to be initiated by a user action. The mechanism that is used to enforce that safeguard is said to work much like a popup blocker.

Embedded content in an iframe element will be barred from initiating a full-screen operation unless the iframe is defined with a specific property. Additional details regarding the security of the full-screen feature have been published on the Mozilla developer wiki.

The addition of native full-screen support will help make standards-based web technologies more competitive versus plug-ins like Flash for building rich Internet applications. If you are running Chrome, a Firefox nightly, or other compatible browser, you can try out the full-screen feature for yourself by visiting this demo.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

See Also:

Tags:
File Under: CSS
Nov
14
2011

Google Reinvents the Wheel With Closure Stylesheets

By

Google has added CSS to Google Closure’s bag of tricks.

Google’s Closure Tools previously focused primarily on JavaScript, offering developers a Library of code along with an optimizer, Firebug inspector and command line tools for working on large-scale JavaScript-intensive applications like Google’s own apps. In addition to JavaScript, Closure offers developers some HTML tools as well.

Now Google has added CSS to the list, and has, once again, opted to reinvent the wheel to suit its own needs instead of using any similar, existing projects.

Here’s how Google describes the new Closure Stylesheets:

Closure Stylesheets is an extension to CSS that adds variables, functions, conditionals, and mixins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming.

If that sounds a lot like Sass or Less, well, that’s because Closure Stylesheets are more or less the same wheel, slightly tweaked by Google. As with the rest of the Closure tool set, Closure Stylesheets feel first and foremost like they’re useful to Google developers. Those outside of the Google Plex who haven’t, for one reason or another, liked what Sass or Less offer might be interested in Closure Stylesheets. But if you’re already using another CSS extension library there aren’t any terribly compelling reasons to switch to Closure.

See Also:

File Under: Visual Design
Nov
11
2011

Thinking with Type: Brush Up Your Typography Skills

By

The power and potential impact of typography on the web has grown by leaps and bounds with the advent of widespread browser support for @font-face and font hosting services like Adobe’s Typekit.

Of course with new tools come new problems. Many web developers don’t know much about fonts and typography. After all it used to be there were only six reliable font choices on the web — why bother learning about something you couldn’t use? But that, like so many other things in web development, is no longer true.

If the web’s newfound typography options leave you feeling a bit behind, head over to Ellen Lupton’s Thinking With Type website. The site is a goldmine of information on typography dos and don’ts both on the web and off. The site is not, however, so much about fonts, but rather about type as a visual element and what it can do (both good and bad) within a design.

If you’ve ever wondered why your small caps don’t look right, how to properly kern text or how you can use contrasting font weights to create more visually engaging banners, Thinking With Type has the answers for you.

There’s even a section on working with multi-column grids, something that will hopefully be possible in the near future as more browsers begin to support the various CSS grid layout systems.

The Thinking With Type website is a companion to Lupton’s book of the same name, which is well worth picking up if you have any interest in learning more about typography.

See Also:

Tags:
File Under: APIs, Web Services
Nov
11
2011

Backup Your Flickr Images in Your Own Parallel Dimension

By

Like most of the web you’re probably waiting for the other shoe to drop on the much-loved, but seemingly beleaguered, Flickr photo service.

Let’s face it, Flickr’s parent, Yahoo, hasn’t exactly had a banner year and the company already all but killed developer-favorite Delicious. If you aren’t worried about the future of Flickr it’s probably because you aren’t paying attention.

Or, it might be because you’ve got a complete and total backup of all your Flickr images running on your own URL, complete with all the metadata, permissions and privacy settings you’ve stored on Flickr.

What’s that? You don’t have a parallel version of Flickr on your own server? For shame.

Lucky for you, former Flickr employee Aaron Straup Cope created Parallel-Flickr which, as the name suggests, mirrors Flickr on your own domain. Parallel-Flickr is, in Cope’s words, “still a work in progress… it ain’t pretty or classy yet but it works.”

In a nutshell Parallel-Flickr is a set of PHP scripts for backing up your Flickr photos and generating a database-backed website to display them. The feature list includes downloading and storing your original images (along with the 640px version) and grabbing all of Flickr’s metadata about each image as a JSON file. With that info Parallel-Flickr then constructs a database and generates a website with the same URL structure that Flickr uses. Parallel-Flickr also “honours the viewing permissions you’ve chosen on Flickr.” It’s that last part of that description that’s intriguing. Here’s Cope’s description of what the code does:

The thing that’s most interesting to me though is the last piece on that list: The part where the site uses Flickr to authenticate logged in users. What that means is that I can replicate Flickr’s privacy settings locally. It means that I can have a local copy of my photos and keep private things private…
…
If you come to my site and you’re not logged in (via Flickr) you just won’t see non-public photos. Neither will I, for that matter. But if you do log in then because you’ve logged in via the Flickr API auth dance I have a auth token for you and can look up your Flickr ID and whether you’re a contact and see when and where you have permissions to see all those other photos.

In other words, so long as Flickr is around, Parallel-Flickr allows your site to act exactly like Flickr. From the URLs to the privacy settings, you’ll have your data backed up and online. Should the unthinkable happen to Flickr your site will still continue to function, save your private images which will be hidden safely away.

As noted above, Parallel-Flicker is a work in progress, but if you’d like to try it out, head on over to the GitHub page and grab the code. If you prefer to wait for features like cron jobs for syncing, geodata backups, S3 archiving and more, keep an eye on the project, all that and more is already on the todo list.

See Also:

Tags: ,
File Under: Browsers
Nov
11
2011

Mozilla Offers Fresh Firefox Previews

By

With Firefox 8 out the door Mozilla’s Beta, Aurora and Nightly channels have now been updated with the next three work-in-progress versions of Firefox.

If you’d like an early look at what’s coming in the next three Firefox cycles, you can download a copy of the Beta channel, the Aurora channel, or, for those that live on the edge, the Nightly channel.

You may notice a speed boost in the Beta channel thanks to the new support for JavaScript type inference. Type inference is a new feature in Firefox’s SpiderMonkey JavaScript engine. Official support should, if all goes according to plan, arrive with Firefox 9 in about six weeks. In the mean time Mozilla claims beta users will see up to a 30 percent speed increase on JavaScript-heavy sites.

Firefox Beta users on OS X will notice a slightly updated look that more closely matches the new application toolbar and buttons that Apple introduced with OS X Lion. Firefox also now supports the two-finger swipe gesture for navigating back and forth in history (as do Chrome and Safari).

Further down the Firefox pipeline is Firefox 10, currently in the Aurora channel. So far there aren’t many new features in Aurora. The plan calls for implementing the new silent update features in Firefox 10, but so far that feature is listed as blocked.

Silent automatic updates will make Firefox’s Chrome-like update schedule a bit more transparent when it arrives, but it’ll be annoying without its companion feature — changing the Firefox defaults so that add-ons are automatically marked compatible. Fortunately for Firefox fans upset about continual add-on breaking updates, this feature is “on track” and will hopefully arrive with Firefox 10 in early 2012.

If you’d like to get really experimental you can download the Nightly channel, which is very unstable, but does offer a look at one of the more promising features scheduled for Firefox 10 — fullscreen mode for any HTML element (previously fullscreen only worked on <video>).

The most obvious use case for applying fullscreen to arbitrary HTML elements is for online games, though there’s also the potential for abuse. Fullscreen for arbitrary elements means unscrupulous sites could hijack the screen with ads, or worse, clickjacking attacks. Mozilla’s implementation of fullscreen mode allows for permission dialogs and it seems reasonable to expect something like what the browser does now for geolocation requests could be applied when a page wants to go fullscreen.

Web developers will be interested in the coming Firefox 10 developer tools which may include a new built-in code editor for working with HTML or JavaScript in the browser. The Page Inspector tool (think Firebug’s code inspector, but native) that was originally planned for Firefox 4 is also on track to arrive with Firefox 10.

If you’d like to test any of these features just download the channel containing whichever build you’d like to experiment with, but keep in mind that, along with the new features, most of these builds contain bugs and are not recommended for production use.

See Also:

Tags:
File Under: Browsers
Nov
10
2011

Opera 11.60 Beta Offers ‘Double Rainbows’

By

Get your double rainbow on with Opera 11.60

Opera software has rolled out the first beta release of Opera 11.60, a coming update for the company’s flagship desktop web browser.

If you’d like to test the new beta, head on over to the Opera beta downloads page and grab a copy. Note that, unlike some early Opera releases, this beta will overwrite your existing copy so be sure to make a backup of your user data before testing.

The last time we checked in with Opera was to look at the Opera 12 alpha. It would seem logical to assume the next release would be Opera 12 beta, but it isn’t. Opera is reportedly still working on version 12, but in the mean time the company wanted to go head and release the features that were ready today. As such much of the focus in this release is on new HTML and CSS support.

For example, Opera now supports the new HTML5 parsing algorithm. In addition to all the new elements for developers, HTML5 specifies new rules for how browsers should handle incorrect code. Previously browsers decided for themselves what to do when something was wrong in a page (and most still do, but eventually that will change).

There’s also support for the HTML5 custom protocol handlers in this release, which means you can tell Opera to open email compose windows in Gmail or other webmail clients. Opera is also now the first browser to officially support HTML5 microdata. Developers can now query microdata attributes like itemprop or itemscope via the JavaScript interface.

Opera 11.60 expands Opera’s already strong CSS support by adding CSS 3 radial gradients. Bruce Lawson, Web Evangelist at Opera Software, put together a whimsical little double rainbow demo page to show off the new CSS radial gradient support in 11.60. Just view source to see how the code works (note that Opera is the only browser that supports radial gradients, so you won’t see anything if you’re using something else). Also new on the CSS front is support for the CSS 4 image-rendering property, which allows you to tell the browser what scaling algorithm to use for background images, canvas elements, or border images.

Under the hood Opera claims that 11.60 will bring a slight speed boost, particularly on JavaScript heavy sites like Gmail. I didn’t notice anything too significant in my brief testing this morning, but then Opera was already the fastest browser around by most measures.

See Also:

Tags:
« OLDER POSTS