Delivering Quality » Firefox

Building for Mobile with Device Orientation

Mark — Tue, 26 Jan 2010 16:54:29 +0000

Mozilla Firefox 3.5 and Firefox for Mobile 1.0 (Fennec) both have support for modifying a web applications look based on screen dimensions and current orientation. These abilities give web developers the power to build better web applications for mobile devices and the ability to optimize the browsing experience when screen space is constrained.

CSS Orientation Properties

Web applications look and feel is defined by a CSS file, so therefore the Firefox developers made it super easy to tie current orientation and screen dimensions into which CSS file to load.

For examaple: If the browser is in portrait mode, a single CSS media parameter will specify which styles to use:

PLAIN TEXT

JAVASCRIPT:

@media all and (orientation: portrait) { ... }

In the same way, you can create a custom CSS stylesheet for users who are browsing with a screen size between 500 and 700 pixels:

PLAIN TEXT

JAVASCRIPT:

@media screen and (min-width: 500px) and (max-width: 700px) { ... }

Orientation Events

Firefox 3.6 adds support for orientation events in JavaScript, so you can get current updates of how the user is holding their mobile device:

PLAIN TEXT

JAVASCRIPT:

window.addEventListener("MozOrientation", handleOrientation, true);

Once you register the event handler, the handleOrientation function will receive an object specifying the x, y, and z value of the devices current position:

PLAIN TEXT

JAVASCRIPT:

function handleOrientation(orientData) {
var x = orientData.x;
var y = orientData.y;
var z = orientData.z;
}

With those parameters and a game timer, you can probably build the Labyrinth game.

For those of your that are ready to start experimenting with this API right away, Mozilla Developer Center has the full Firefox orientation documentation.

UpcomingHoliday.com Now with Geolocation

Mark — Thu, 17 Dec 2009 06:27:40 +0000

UpcomingHoliday.com has been updated and now includes geolocation support. If your browser supports it your country should automatically find and select your country. If not, it will fall back to IP based country lookup. Geolocation is a HTML 5 feature that is supported by Safari on the iPhone 3.0 OS, Firefox 3.5 and Google Chrome.

UpcomingHoliday.com is an application that tells you what and when your next federal holiday is. Currently it's available for people in: Australia, Canada, France, Germany, India, Nigeria, United Kingdom and United States.

Fall 2009 Web Browser Outlook

Mark — Sun, 27 Sep 2009 23:31:16 +0000

The names are familiar: Firefox, Google Chrome and Safari. These relatively new browsers have been shaking the foundations of Internet Explorers complete victory over Netscape. These new browser are implementing fresh ideas and breaking out of the crusty browsers of the early 21st century. With the second browser wars in full swing, lets see where things stand and what's coming.

Mozilla Firefox 3.6

The Firefox team is focusing on startup performance, JavaScript performance, lightweight themes, and a few new features for developers. Firefox 3.6 is expected to arrive Nov 2009.

After that, Firefox 3.7 will boast a revamped user interface, a WebGL implementation and ongoing speed and responsiveness improvements.

Safari 5?

Safari 4 was just released, and we have not heard any official statement from Apple what features Safari 5 will include, but looking at WebKit we can see what core browser technologies are being developed. WebKit has added geolocation support, HTML 5 draggable, and HTML 5 forms patterns and required attributes. What directly user visible changes will Apple make? We will have to wait and see.

Internet Explorer 9?

The next version of IE is still quite a ways out (3 years if you look at the release time-frame of IE 7 and 8 ) but it's expected to boast many new HTML 5 features including native video and audio playback. Internet Explorer 9 should be quite a feature packed release with HTML 5 goodness, better performance, and improved standards support.

Opera 10.10

Opera 10 was just released this month but the team is working on Opera 10.10 with Unite. So far we're waiting to hear more from the Opera team about what they are working on.

Google Chrome 4

With Google Chrome 3 being released, the Chrome team and external developers are hard at work making the browser cross platform with support for OS X and Linux. User end features include bookmark synchronization, extensions and surly will include more JavaScript performance enhancements.

Metatunnel by FRequency - WebGL Demo

Overall the competition looks quite healthy and browsers are being enhanced to be the Operating System of the future.

WebGL Coming in Firefox 3.7

Mark — Tue, 22 Sep 2009 01:44:21 +0000

Vladimir Vukićević, the pioneer of bringing the well known OpenGL standard to the web, has just blogged using Firefox to render Spore creatures. Check it out, it's a pretty impressive demo of this upcoming web standard.

Development on what would become WebGL started back in 2007 with Canvas 3D as an extension for Mozilla Firefox 3.0. Since then it has grown from a single project to an open web standard through the Khronos standards group. The standard is currently under development with a target release date of first half 2010.

Firefox isn't the only web browser to be experimenting with WebGL, Google and Opera have also pledged to support this standard. The WebKit source code has recently picked up preliminary support.

The web has mostly stayed 2D, but with the advent of CSS Transforms and WebGL, the browser is moving into new territory. The web is evolving into the most important platform of the future.

Upcoming Web Browser: Mozilla Firefox 3.6

Mark — Thu, 20 Aug 2009 02:47:06 +0000

With Mozilla Firefox 3.6 the team is shifting to a shorter release schedule, so enhancements reach users sooner. It's quite likely we'll see more incremental releases, including Firefox 3.6 which is scheduled for release just six months after Firefox 3.5.

The next version of Firefox will be faster because of improvements to the TraceMonkey JavaScript engine and because of a focus on improving startup time performance. An asynchronous location bar and improved scrolling on Windows should also provide a noticeable speed improvement. The next version will feature the Gecko 1.9.2 rendering engine.

UI changes include tab previews of other open websites when you use the CTRL-TAB keyboard shortcut (currently you must turn it on with the browser.ctrlTab.previews config option), and lightweight themes that don't require a restart.

CSS3 Features for web developers:

-moz-background-size

gradients: -moz-linear-gradient() and -moz-radial-gradient()

For a concise list of changes, see the Firefox 3.6 for developers wiki page.

Estimated Release Date: January 2010 Update: according to a draft roadmap, release date is set for November 2009.

Download Firefox 3.6 Alpha 1

Browser Notifications with Yip

Mark — Mon, 10 Aug 2009 02:51:35 +0000

Ever wanted your web application to be able to show notifications even if the user may be in another browser tab or application? Now you can!

The relatively new Yip extension for Firefox adds notification functionality. This is not a small JavaScript notification that pops up in the browser tab, but one that integrates directly with the users Operating System.

Yip uses libnotify/notify-osd on Ubuntu Linux, Growl on Mac, and Snarl or Growl for Windows on Windows. If none of these notification applications are installed, it will use Firefox's simple and not as pretty notification system. Ubuntu Linux users have notify-osd installed by default, Growl is popular with Mac users, yet Windows users probably don't have Snarl or Growler for Windows installed.

When building with notifications remember that they are meant to enhance the user experience, not require it.

The Yip extension supports both the Fluid and Prism APIs, but recommends Fluid because of support for an onclick callback function.

The API is simple and straight to the point:

PLAIN TEXT

JAVASCRIPT:

window.fluid.showGrowlNotification({
title: "your notification title",
description: "some description",
onclick: optionalCallbackFunction,
icon: "URL to an icon"
});

Since Yip may not be installed on the users computer, just wrap it with a check for fluid. A complete example looks like this:

PLAIN TEXT

JAVASCRIPT:

if (typeof(fluid) !== 'undefined') {
window.fluid.showGrowlNotification({
title: "Hello World",
description: "The Google icon says Hi",
icon: "http://www.google.com/favicon.ico"
});
}

Related Projects

Roar: Embed notifications into a web page (powered by MooTools).
growl.js: Windows only notifications using Growl for Windows.
NotificationAPI: Notifications in Google Gears

Of all these options, Yip is the best solution by far; its fully cross platform, has a simple to use API, and is ready to use. Install Yip now.

The Importance of the HTML Video Tag

Mark — Wed, 08 Jul 2009 05:34:22 +0000

Since Firefox, Safari, and recently Chrome hit the browser scene, the web has been growing and improving at a much faster pace. The next evolution of the web comes in the form of HTML 5, the latest HTML standard that brings native video playback, offline storage, 2D drawing via the canvas tag among others features. Of those, the video tag is the most important and critical to the continued success of the open web.

Native video playback inside a web browser will now be as simple as embedding an image into a page:

The benefits of this are immediately obvious to any software developer. It's a native tag so it fits in much better to the web platform, it can be controlled through JavaScript, and no more messing around with a black-box flash embed. Side benefits of this are bringing video to all users, not just the platforms that Flash supports (stable 64 bit version + iPhone version).

So far only Firefox 3.5 and Safari 4 have built in support for the video tag; Opera and Chrome support is in the works.

The web has flourished and grown to where it is today because it is based on open standards and because it is not controlled by any one company or organization. Lets continue to keep the web open and successful by using the new video tag.