Blog posts tagged: mozilla

Introducing: The Mozilla Platform Development Cheat Sheet.

Working on Firefox can be daunting when you first start as a developer.

There is an amazing amount of Mozilla specific technology you need to learn; in addition you may not have had the opportunity to work with things like mercurial patch queues (MQ).

On one hand: Mozilla has a massive collection of awesome Mozilla development specific documentation on the Mozilla Developer Network (MDN).

On the other hand: There is a massive collection of documentation that you have to keep looking up.

When I started as a platform developer at Mozilla 3 months ago, I started making a cheat sheet of common information I would have to frequently look up. I will continue to update this page as I continue to learn every day at Mozilla.

I highly encourage anyone looking to contribute to an open source project to look into contributing to Mozilla.

Not only will you be helping an open source non-profit organization, but you will also connect with extremely smart peers, have extra resume flair, and learn a ton. The experience of contributing (or working) for Mozilla will forever change you as a developer.

I just wanted to post a quick follow up to my Firefox on Windows 8 post on how Thunderbird works with screenshots.

As with Firefox and other applications, as soon as you install Thunderbird it shows up as a Tile in the metro interface.

Clicking on it exits the tablet metro interface and goes into the old interface and launches Thunderbird.

One important thing is that if you click on a mailto: link in Internet Explorer it won't launch the default mail client. Instead it prompts with this error:

Windows Internet Explorer
Could not perform this operation because the default mail client is not properly installed.

Here's a screenshot of that error message:

I assume once this registration problem is fixed it'll launch the Desktop mode and then launch the email client. It would be nice to have a metro interface for Thunderbird as well.

Perhaps even a metro style compose email window application only for when a user is browsing in tablet full screen mode and they click to send an email with their default email client.

Related Bug:

• Bug 686836 - Launching default email client in Windows 8 results in error

As you probably already know, Windows 8 introduces the new default Tablet interface, and the old normal Desktop interface. It uses the new tablet interface as the startup interface even on Desktops though. For a good rundown on all of the new features, see here.

When you first boot up into Windows 8, it takes you briefly for about 1/2 of a second to the desktop interface and then switches directly to the tablet interface. I had read previously that the desktop/explorer process was only loaded into memory if you clicked it, but it seems to not be the case for this early pre-beta release.

The next thing you notice is that once in the Desktop interface, the start menu button no longer brings up a menu. It brings you back to the tablet interface. Pressing the Start/Windows keyboard button will take you between the 2 interfaces.

Firefox on Windows 8:

The first thing I did was install Firefox.

After installing Firefox, Windows will ask you which web browser you would like to use by default. It shows you a picture of Firefox and IE and lets you pick. Nice interface. It shows you this dialog even before our process starts. If you change focus to another tab or application though, the dialog goes away forever unless you uninstall and reinstall Firefox.

After installing we show automatically into the tablet interface as a new tile.

But when you click on the Firefox icon in the tablet interface, it takes you directly to the old Desktop environment and loads the Firefox process as normal. I think it'll be possible for integration like IE does into the tablet interface direclty. Although the solution may have to be 'creative'.

Full screen mode in Firefox works the same as previous versions currently. If you start in full screen it will switch you first to the Desktop mode, and then launch full screen. Exiting full screen leaves you at the Desktop interface.

Internet Explorer Tablet Mode:

If you start Internet Explorer from the tablet mode you'll see a full screen app with no switch to Desktop. It has a nice interface and allows you to pin any web page to your Tablet interface as a tile.

The problem with this is that even know I set Firefox as my default browser, through the Windows interface, it still launches IE for these shortcut tiles.

Here is a tile created on the far left from a pinned page in IE of the mozilla.org page:

Work to be done for Firefox on Windows 8:

There's probably a ton, but here are a few things that come to mind:

• We need to support the VS2011 developer tools for MozillaBuild
• It would be nice to not need to switch to Desktop to launch the browser.
• Platform integration for apps seems very important. We should be showing up as tiles for web applications that launch Firefox full screen.
• The Firefox tile can be leveraged to have more functionality built into it.

Related bugs:

• Bug 686835 - Investigate using XPCOM in a metro style application, and providing Firefox as a Metro app
• Bug 686837 - Add VS2011 support for mozilla-build
• Bug 686839 - Investigate Windows 8 metro tile integration
• Bug 686840 - Investigate the ability to toggle between a metro app and a native app

We see the http a URL scheme, just about every day:

http://www.brianbondy.com

The http part in the example above is the URL scheme.

But there are also dozens of other URL schemes, including: ftp, mailto, irc, smb, chrome, about, snmp, and data. This post talks about one called the data URL scheme.

The data URL scheme, amongst other things, allows you to embed images into your HTML pages. That means that no separate HTTP request/response is needed to obtain such an image. It looks like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

The first part of the URL is the scheme data, followed by the mime type image/png, optionally followed by base64 (if not specified assumes ASCII characters with encoded non printable characters). The last part of the URI after the comma is the content of the file in the appropriate encoding.

The data URL scheme was specified in 1998 in RFC 2397 and has been implemented by most major browsers as of HTML4. Most major browsers already have pretty good coverage for HTML5. IE1-IE7 lack support.

The benefit of using the data URL scheme is that if the image is small, the overhead is less than the HTTP request/response headers. It also frees up concurrent connections since each browser has a maximum amount of connections it can make total and to each domain.

You wouldn't want to use the data URL scheme for large images, or if you require support for IE7 and below. Your image won't be separately cached either, so this means that it will be downloaded with each request to the parent HTML page. You can get around this last limitation though by specifying your data URL inside an already cached CSS file with a CSS rule background:url('data:image/png;base64,...);

Overall it is a good thing to use and I'd use it for social icons in HTML.
There are also many other uses of the data URL scheme mentioned below.

Uses of the data URI scheme:

You may have noticed that sometimes emails with images don't have a separate attachment. You can use the data URI scheme inside HTML email messages without having a separate image attachment.

The new HTML5 <canvas> element allows you to export your canvas to a data URL. You can do this with <canvas>.toDataURL

How it relates to me:

I recently improved the BMP and ICO decoder (refactoring plus adding support for PNG ICOs) for Firefox. I also have to implement BMP and ICO encoders so that we can have better shell integration with Windows 7.

A side effect of doing these ICO and BMP encoders is that Firefox will support BMP and ICO generation via the <canvas>.toDataURL('image/ico') and <canvas>.toDataURL('image/bmp'). This makes Firefox a pretty good image conversion program. This also makes it possible for example, for a web page developer to implement a favicon creator without server side code. No other browsers currently implement BMP and ICO mime types for canvas exporting.

On July 6th, I will be going through a major change in my life: I’ll be leaving the company I co-founded and worked at for nearly a decade, and will be starting at Mozilla as a contractor.

I'm confident that the company I co-founded will continue to prosper under its new parent company, and I will be excited to hear about the company's success over time.

I'll leave behind many great memories, exciting projects, and extremely intelligent co-workers.

A few months ago, I was approached by a Mozilla technical recruiter and after careful consideration actually turned down the offer for contract work. For several months, I was torn on whether to stay at my current comfy job, or to step out of my comfort zone, and do what I've always wanted to do.

Several months later, reading John Resig's (creator of jQuery) advice, I reconsidered and took the job.

It’s been an incredible experience working with everyone at Mozilla. The company is easily one of the most developer-friendly organizations I can imagine, with some of the smartest coders in the world. Mozilla is hiring across the board – I strongly encourage you to apply if you’re looking for one of the best jobs you’ve ever had.

I'll be working as a contractor at Mozilla with the title of Platform Engineer. I'll be working on Firefox and Core components which includes working with XPCOM, XUL, XBL, JavaScript, CSS, Python, and C++. I feel very privileged to be working on such an exciting project.

Why I chose Mozilla

A few reasons why I chose Mozilla:

• Much of the web's technology and innovation was developed at least in part by Mozilla.
• The Internet wouldn't be what it is today without Mozilla.
• They are a relatively small and open source organization; your work will be seen.
• They support openness and stand behind their beliefs to deliver a free and open web.
• Some of the smartest people in the world work there, my old company also had this, but the other people had similar backgrounds to me.
• Firefox has a significant market share and is used by millions of people around the world.
• Mozilla has a thriving extremely intelligent community behind it.
• They are not forcing me to move and they embrace a distributed team.
• They do what is right, and not what makes the most money.
• I get to be part of something larger than myself.
• Mozilla is one of the coolest places and code bases I could ever have the privilege to work on and contribute to.

Mozilla is accelerating their release cycle as well which is exciting in itself. Firefox 4 was released in early 2011, and they plan to also release versions 5, 6 and 7 in 2011.

If you are a developer interested in contributing to Mozilla related technologies, a good place to start is the Developer Guide. If you'd like to find out more about pursuing a career at Mozilla, read here.