paulrouget.com

A brand new Firefox for Android

2012-05-15T00:00:00-07:00

A brand new Firefox for Android is available.

And we need testers!

It's muuuuch faster than the previous versions
Download it here (market link)
Report bugs here (please :D)
More info here (official announcement)
It's the same Gecko that you can find on Desktop
Screenshots and article about the User experience.

Faenza + Gaia ?

2012-03-17T00:00:00-07:00

I want a Faenza-based Gaia theme.

If you don't know Gaia…

Mozilla is building an Mobile OS, B2G. On top of this OS, we are also building a User Interface, named Gaia (see some mockups).

If you don't know Faenza…

Faenza is a famous set of icons for Linux. His author, Tiheum (Matthieu James), has also built a theme for Gnome (Faience), and made a lot of other gorgeous things.

I am a huge fan of Tiheum's work. And I believe that a phone UI based on his work would be a hit. I would love to work on that, but I don't have time. So I am sharing the idea. It is quite easy to hack Gaia to build a prototype. It is 100% made of HTML, CSS and JavaScript. So if you feel like working on that, please let me know, I can help you to start :)

Musiques de jeux vidéos et séries télé, par Krapo

2012-03-12T00:00:00-07:00

Musiques de jeux vidéos et séries télé, par Krapo.

Un mauvais musicien avec de bonnes idées, cela semble être la meilleure façon de me décrire en quelques mots.

Je ne sais pas si Krapo est un mauvais musicien, mais j'aime beaucoup ce qu'il fait. "Accro à Nolife, Nintendo, musiques progressives, instruments de musique inhabituels". J'approuve!

Son site (pleins de trucs à découvir), ces reprises et si vous voulez l'embauchez pour vos soirées geek, c'est là. Et son twitter.

Ma sélection:

Portal 2 - Want You Gone - vocoder ukulele glockenspiel melodica

(Portal 1 / Still alive défonce aussi)

Jayce et les Conquérants de la Lumière

Zelda Ocarina of Time - Lost Woods - Nintendo DSi + ocarina + guitar

Oh et, Krapo, si tu lis ça, le vrai générique d'Ulysse 31, c'est ça. Donc si tu sais pas quoi faire ce weekend… :)

Why do judgmental people usually have bad judgment?

2012-03-04T00:00:00-08:00

Why do judgmental people usually have bad judgment?

It's part of the Dunning-Kruger effect.
Or, as Bertrand Russell put it, “The trouble with the world is that the stupid are cocksure and the intelligent are full of doubt.”

…stolen from reddit.

B2G demo, with some code inside and a live demo

2012-02-29T00:00:00-08:00

What is Boot To Gecko:

An Operating System;
Linux Kernel + drivers from Android (so B2G can run on most of the phones that are capable of running Android). Works on ARMv7, will probably work on ARMv6;
Gecko on top of it. The same version you'll find on a regular Firefox;
Apps are written in HTML, JavaScript and CSS;
You don't need to be online to use the Apps;
A set of new JavaScript APIs:
- WebAPIs, for bluetooth, sms, telephony, …
- WebRTC, for streaming, webcam, P2P, …
We are working on standardizing these APIs;
The homescreen/launcher is an HTML page. Mozilla's version is named Gaia;
You can build your own homescreen/launcher;
The name of the project will probably change;
It's possible to implement Boot To Webkit too;
It's Open Source;
We (Mozilla) are working on a MarketPlace.

Live demo:

It's all HTML so it works on a Firefox. Try it now: http://paulrouget.com/gaia/, (better to use Firefox Nightly).

Videos:

Myself showing how to hack the inner HTML (sorry for the quality of the video):

Interview with the developers (in English, German, French and Chinese):

Here is a video of an alternative UI built by Telephonica:

Contribute:

How to build B2G for Samsung Galaxy S2.

If you want to get involved in the development of Boot2Gecko, take a look at the wiki pages: the UI code (gaia) wiki.mozilla.org/Gaia the system code: wiki.mozilla.org/B2G.

And here are some mockups: http://joshcarpenter.ca/Boot-to-Gecko.

Fork the code! It's on github.

HTML5 Context Menu and FullScreen

2012-02-16T00:00:00-08:00

HTML5 Context Menu and FullScreen API.

Do you know you can change the native context menu of an HTML element with the HTML5 <menu> tag? Do you know you can make any element of your page go fullscreen with the HTML5 Fullscreen API?

Adding a "fullscreen" entry in the context menu is really simple (demo):

(Firefox needed. Webkit does support the Fullscreen API, but not contextmenu yet.)

<canvas contextmenu="fullscreenmenu"></canvas>  <menu id="fullscreenmenu" type="context"> <menuitem label="fullscreen" onclick="document.querySelector('canvas').requestFullScreen()"> </menuitem> </menu> <script> HTMLElement.prototype.requestFullScreen = HTMLElement.prototype.requestFullScreen || HTMLElement.prototype.webkitRequestFullScreen || HTMLElement.prototype.mozRequestFullScreen || HTMLElement.prototype.oRequestFullScreen || HTMLElement.prototype.msRequestFullScreen; </script>

Darkroom for Vim

2012-02-14T00:00:00-08:00

A full-screen writing program or distraction-free editor is a text editor that occupies the full display with the purpose of isolating the writer from the operating system (OS) and other applications. Wikipedia

I wanted that with Vim. There are ways to do it. You can play with :winpos, lines and columns to achieve this (see here). There are scripts (1, 2). But all of these seemed complicated.

Here is a simple-but-not-perfect way to achieve this. This script just hide a couple of things and add a big margin on the left:

""" FocusMode function! ToggleFocusMode() if (&foldcolumn != 12) set laststatus=0 set numberwidth=10 set foldcolumn=12 set noruler hi FoldColumn ctermbg=none hi LineNr ctermfg=0 ctermbg=none hi NonText ctermfg=0 else set laststatus=2 set numberwidth=4 set foldcolumn=0 set ruler colorscheme molokai "re-call your colorscheme endif endfunc nnoremap :call ToggleFocusMode()

Go fullscreen with your terminal, and enjoy:

This is quite dumb, but it works very well for me. Let me know if you find ways to improve this.

MDN & DuckDuckGo

2012-02-13T00:00:00-08:00

With DuckDuckGo, you can add !js to your JavaScript related queries, it will redirect you automatically to MDN.

Firefox 2012 Roadmap and Meeting

2012-02-13T00:00:00-08:00

The Firefox roadmap for 2012 has been published: https://wiki.mozilla.org/Firefox/Roadmap (see Asa's blog).

We will talk about this roadmap Tomorrow, Tuesday Feb 14, at 11am Pacific. The call is public. Come if you're interested. Information here.

Disapproval look and Linux

2012-02-13T00:00:00-08:00

ಠ_ಠ

Do you see 2 squares instead of the famous Disapproval Look? Install the Indic Opentype Fonts collection. On archlinux:

pacman -S extra/ttf-indic-otf

Bugzilla Activity Report

2012-02-07T00:00:00-08:00

Bugzilla has an interesting feature: User Activity Report.

I didn't know about it until someone mentioned it on IRC yesterday. It's quite useful if you keep track of your daily/weekly work.

Also, if you want a prettier output, here is a script that will help. Run it in Scratchpad (Shift-F4):

What happened between Firefox 7 and Firefox 10

2012-02-02T00:00:00-08:00

What happened between Firefox 7 and Firefox 10

Found this gem by Chris Blizzard on reddit:

In between Firefox 7 and Firefox 10 we improved performance, shrunk memory usage, killed leaks, vastly improved hardware accelerated rendering for the canvas element, improved Firefox Sync's setup & reliability, vastly improved the way that add-on compatibility is handled, added the ability to load tabs on demand during a restore, added Twitter search, made the audio and video elements far more reliable, improved our theme integration on OSX Lion, we hide the forward button when it's not useful, fixed a ton of security and crasher bugs. The browser actually looks, feels and acts differently from 7.

For developers we added text-overflow-ellipsis, WebSockets, web timing, improved MathML, added support for displaying images in WebGL (via CORS), HTML5 context menus, added support for insertAdjacentHTML, added support for hyphens in CSS to support more than just English, shipped our new TI JS engine (much much faster!), added hooks so you can read DNT state from JS, added support for font-stretch, added support for anti-aliasing in WebGL, CSS 3D transforms and Mozilla's HTML5-based full screen API. We made IndexedDB much faster, shipped a bunch of new web developer tools and a huuuuuuuge pile of things that I haven't listed here.

So we've been busy and we like rolling those positive changes out to users as fast as possible. That's why we're doing new releases and bumping the version number quickly. It's not just for marketing. It reflects real change over time.

My Linux Configuration

2012-01-27T00:00:00-08:00

To follow up on this reddit discussion,

… this is what my desktop look like. Screenshot + configurations files:

GNU/Linux - Archlinux
MacBook Air 11"
XFCE (default panel)

GTK2 theme: Dust (aur/gtk2-theme-dust)
Icons: Faenza (aur/faenza-icon-theme)
Window decorations: Darksun
Firefox Nightly: default Linux theme
Pager: neap

Vimrc
I use a patched version of the Monaco font (here)
Vim Powerline (arrows in statusline - patched font needed)
Command-T

Tmux - tmux.conf (patched font needed)
ls++
To dump my qqueues (mercurial), I wrote an (ugly) node script: qqq.js

I read my emails with Mutt
Emails are downloaded via offlineimap
I use 3 instances of Mutt: Inbox, Bugmails, Mailing-lists

If you have questions, please ask on reddit or ping me on @paulrouget

My .vimrc

2012-01-11T00:00:00-08:00

my .vimrc

Sounds like some people are insterested in my vimrc. This is the current version of it. Pretty simple these days.

(sorry, it's not commented. Use :help [cmd] if you don't know a command.)

"""""""""""""""""""" PLUGINS filetype off set rtp+=~/.vim/bundle/vundle/ call vundle#rc() Bundle 'gmarik/vundle' Bundle 'matchit.zip' Bundle 'The-NERD-Commenter' Bundle 'The-NERD-tree' Bundle 'vim-powerline' Bundle 'Command-T' """""""""""""""""""" GLOBAL let mapleader="," colorscheme molokai set gfn=terminus set go= syntax on filetype plugin indent on set encoding=utf-8 set hidden set showcmd set nowrap set backspace=indent,eol,start set autoindent set copyindent set number set shiftround set ignorecase set smartcase set hlsearch set incsearch set history=1000 set undolevels=1000 set title set visualbell set noerrorbells set list set listchars=tab:>.,trail:.,extends:#,nbsp:. set ttyfast set mouse= set nocompatible set backup set backupdir=~/.vim_backup set noswapfile set fileformats=unix,dos,mac set laststatus=2 set expandtab set softtabstop=2 tabstop=2 shiftwidth=2 set ruler set wildignore=*.swp,*.bak set wildmode=longest,list """""""""""""""""""" KEYBINDINGS map cc c map # {v}! par 72 map & {v}! par 72j map :setlocal spell! spelllang=en map :set invhls cmap

command! -bang W w """""""""""""""""""" PLUGINS "let g:Powerline_symbols = 'fancy' let g:CommandTMaxFiles=5000 let g:CommandTMaxHeight=12 map :CommandT let g:CommandTAcceptSelectionMap = '' let g:CommandTCancelMap = '' let NERDChristmasTree = 1 let NERDTreeSortOrder = ['\/$', '\.js*', '\.cpp$', '\.h$', '*'] nmap :NERDTreeToggle nmap

nmap

"""""""""""""""""""" FILES SPECIFIC au BufRead mutt-* set ft=mail au BufRead mutt-* set invhls au BufNewFile *.html 0r ~/.vim/templates/html.txt au BufRead,BufNewFile *.jsm setfiletype javascript au BufRead,BufNewFile *.xul setfiletype xml au filetype html,xml set listchars-=tab:>. """""""""""""""""""" CUSTOM FUNCTIONS """ Toggle relative/absolute numbering function! NumberToggle() if(&relativenumber == 1) set number else set relativenumber endif endfunc nnoremap :call NumberToggle() """ FocusMode function! ToggleFocusMode() if (&foldcolumn != 12) set laststatus=0 set numberwidth=10 set foldcolumn=12 set noruler hi FoldColumn ctermbg=none hi LineNr ctermfg=0 ctermbg=none hi NonText ctermfg=0 else set laststatus=2 set numberwidth=4 set foldcolumn=0 set ruler execute 'colorscheme ' . g:colors_name endif endfunc nnoremap :call ToggleFocusMode()

Books I read

2012-01-10T00:00:00-08:00

Books I read.

Want to learn more about modern science, physical cosmology and quantum mechanics? If, like me, you are a beginner in these fields, I recommend you to read: "A Brief History of Time" (Stephen Hawking), "Relativity: The Special and General Theory" (Albert Einstein), and "In Search of Schrödinger's Cat: Quantum Physics And Reality" (John Gribbin). Hawkin's "The Universe in a Nutshell" is not awesome.

Recently, we have heard a lot about the Higgs boson particle. I didn't know much about it, so I started reading (thank you reddit for that!). And Oh man, this is hard! I just don't understand most of these things.

So I am now reading books about physics. I want to understand these things better. I am not a physicist or a mathematician. I don't believe I will ever understand correctly these theories (as you need to have a serious math background), but I feel the need to have a better understanding of how our world works.

Here are couple of books I've been reading lately. They mostly talk about relativity, quantum mechanic and particle physics

The Universe in a Nutshell

ISBN 0-553-80202-X - By Stephen Hawking. This is a pretty book (lot of images). Very famous and recommended as a good introduction to understand physics. I found it kind of hard to understand. Especially the cosmology explanations. Hawking tries to simplify his explanations, but I feel like he was mostly explaining the simple things, and skipping the explanations of the complex problems.

If you want to read this book, and if you already have a basic knowledge of modern physics, I think you should read his first popular-science book first:A Brief History of Time.

A Brief History of Time

ISBN 9780553109535 - By Stephen Hawking. He wrote this book before The Universe in a Nutshell. But this one is muuuch better. For me, a total revelation. Seriously. I now understand quantum mechanic better. His cosmology explanations are deeper (black holes everywhere!). You read the book like a story. He is also talking a bit about him and other physicists.

Relativity: The Special and General Theory

ISBN-10: 0517884410 & ISBN-13: 978-0517884416 - By Albert Einstein. With this book, you'll have a good understanding of the Special Relativity theory. You will actually understand it, and will be able to explain it later. The way Einstein makes you ask question to yourself is awesome. You can "feel" how these things work.

The General Relativity part is much harder to understand. You basically have to accept it, or have to dig into some mathematical explanations (not in the book). Gravity doesn't really exist as a force but is a geometry "trick"? Stick with it!

In Search of Schrödinger's Cat: Quantum Physics And Reality

ISBN 0-5533-4253-3 - By John Gribbin. Woooow! So this is a book about Quantum mechanic. And a damn good one! Gribbin is doing an amazing job at making his explanations clear, understandable and enjoyable. And he doesn't take you for an idiot. He is a scientist, and also a very talented writer. Like Hawking in A Brief History Time, his book also relates science history. You learn about scientists. About their mistakes (Plank's mathematic mistake that lead him to suggest a "quanta" of energy). About how they were seeing the world 120 years ago (the "watermelon atom"). And he is very careful with his abstractions. He tells you when his explanations are just "tricks" to make you understand mathematical equations, or if things actually look like he says.

I totally recommend this book.

Any recommendation for my next book? (I also love geophysics and biology!)

Mozilla Web Meetup (Toronto)

2012-01-09T00:00:00-08:00

Mozilla Web Meetup
(Toronto, this Friday, ~4pm)

You are a web developer and in Toronto this Friday? We need you! We would like to gather some feedback about our new Firefox Developer Tools. We will use you as our guinea pigs. :) We need feedback, and we are sure you can get us some terrific ideas of how we can improve our tools. We might have a little party after the (good) work.

Feel like coming? To get an invitation, send me an email:

To: paul+torontomeetup@mozilla.com
Subject: toronto-moz-meetup

Your name
your email

I'll reply with more details as soon as possible!

Thanks!

New Year's Resolutions

2012-01-04T00:00:00-08:00

2012 Resolution: fix more bugs.

Follow @FirefoxNightly

2012-01-04T00:00:00-08:00

Follow @FirefoxNighty. We talk about the latest Firefox developments, live from Bugzilla! Oh, and we have a blog: firefoxnightly.tumblr.com. Ping me on twitter (@paulrouget) if we are missing anything!

[video] B2G demo

2012-01-04T00:00:00-08:00

Mozilla's Boot to Gecko (B2G) Demo at MozCamp Asia 2011.

Totally WIP - the whole UI is a web page (HTML + JS + CSS), wait for the view-source. Video by @mozillatunisia.

More mockups here.

videos: Learn Bugzilla

2011-12-21T00:00:00-08:00

Bugzilla is far from being perfect for beginners. This giant form is kind of scary. Here are 2 videos that will help you to demystify most of it:

Johnathan about filing bugs:

Beltzner about searching bugs:

Learn bugzilla

When people find a bug, I encourage them to open the bug themselves. You know, the fish story.

What usually stops people from filing bugs is the fear to do it wrong. Let me be clear here: Yes, you will do something wrong. And this is totally normal! Wrong product (Firefox instead of Core), wrong component, unclear description, etc. It's ok, we will fix that for you and ask you more questions if needed. And you will learn.

People are also afraid of reporting a bug that has already been reported earlier. Again, this is ok. We will "DUPE" it (mark it as duplicate). And your bug report might come with more details, and give us another angle to look at the issue.

Open a Gecko bug: http://is.gd/report_gecko_bug_cc_paul
Open a Firefox bug: http://is.gd/report_firefox_bug_cc_paul

Writing code - Light or dark color scheme?

2011-12-20T00:00:00-08:00

Light or dark color scheme?

tl;dr: dark background: 63%, light background: 37%

(There are a lot of interesting comments on hackernews about this survey)

So we are working on a Code Editor for the Firefox DevTools (to edit your CSS files, or to write some JavaScript code). These days, I have been working on implementing the design of this tool. In Firefox 11, it will come with a light color scheme.

In the future, we will probably add a way to choose your own color scheme. Solarized, monokai, desert, ...

But I was thinking why a light theme by default?? Are we sure that most of the people people prefer having a light theme? So "OMG SURVEY!", got ~1600 answers in 2 hours, which is quite amazing, and here are the results:

Conclusion? Apparently, people prefer dark themes. I am not saying we will use a dark theme by default, but for sure, the option has to be present. So not sure what we are going to do now, we need to talk with our UX team. But this will be easier to take a decision with actual data :)

Thank you all for answering the survey :)

PS: I think it's just awesome that I can setup such survey in a couple of minutes, publish it, and get such strong results 2 hours after. Wow!

2 firefox bugs fixed, thanks to good reports on twitter

2011-12-16T00:00:00-08:00

A couple of days ago, I wrote about how important it is to be accurate when you report bugs on Twitter. I also encouraged my followers to report bugs directly on bugzilla. Since then, we manage to fix 2 bugs. And that was just pain-free. Let's look at what happened:

First bug, wrong label when bookmarking a link that includes nested spans:

@manchurian, 7:31 PM - 14 Dec 11, reports a bookmark bug:

Tiny obscure bug when bookmarking links with nested text nodes jsfiddle.net/paa2004/gh8xN/

@paulrouget, 10:18 PM - 14 Dec 11, I isolate the faulty function in another jsfiddle, and ask on twitter if anyone feels like finding what's wrong:

HELP! You know JavaScript? Here is a Firefox bug you can probably fix (no need to compile): jsfiddle.net/gh8xN/11/

@DvdBng, 10:25 PM - 14 Dec 11, David Bengoa (Firefox spanish volunteer) finds the bug:

something like this? jsfiddle.net/gh8xN/12/

At, 10:53 PM - 14 Dec 11, I open a bug (bug 710878) and attach the fix.

One day after, I add a test, the patch is reviewed by @dietrich. And done!

Second bug, Drag'n droping a file from dribbble.com to the Finder (Mac) creates a corrupted file:

This report is interesting because it comes with a bug report on bugzilla, by @maxart. Once @maxart opened the bug, he pinged me on Twitter, and cc'ed me in the bug. It took me an hour to figure out what was going on (with the help of @maxart). Then a week pass (got some emails problems). Then I ping a couple of people on IRC, Gavin found what the problem is (duplicate of an existing bug). 2 hours later, Gavin posts a patch. And done!.

Thank you @manchurian, @DvdBng, @maxart and @dietrich!

How to report a Firefox bug on Twitter

2011-12-09T00:00:00-08:00

How to report a Firefox bug on Twitter (to me)

I have several thousands followers on Twitter. As a Firefox developer, it's an invaluable way to get inputs from advanced users. I get ideas, I get complains, I get praises, I get bugs. And believe me, this has a real influence on the quality of Firefox. Yeah! Thank you all!

About bug reports…

I get a lot of them. And often, it is too fuzzy to understand what the problem is. Let me give you an example:

"Ouch, mediocre rendering of xxx.org/demo.html by Firefox 8 compared to Chrome 17 ! @paulrouget, will this be fixed in Aurora ?"

Everything is wrong in this tweet:

You don't tell what is actually wrong. I have to open the page, look, and assume that you might be referring to this background being stretched. Don't expect me to "guess" what is wrong with your web page. Tell me precisely what is wrong!
There are hundred of lines of code. Do you expect me to go through the whole thing? Please isolate the bug in jsfiddle.net.
Don't assume it's a Firefox bug because the result is different from Chrome. Webkit is not the reference. Webkit includes non-standard features. Webkit has bugs, too. Webkit can behave differently because the spec has changed. In the case of this tweet, it was a bug in the CSS code of the demo, not in Firefox.
"Will this be fixed in Aurora?" You can test it yourself. Test with the latest development version of Firefox (firefox.com/nightly) to know if it's fixed or not.

Did you consider opening a bug on bugzilla.mozilla.org??

Try to open a bug. It is not that hard. If you're not confident, it's ok. Try to open a bug, cc me (just type :paul in the CC field), and I will update the bug if there's anything wrong. I will also make sure that the concerned developer will look at the bug.

You probably want to use these links:

Open a Gecko bug: http://is.gd/report_gecko_bug_cc_paul
Open a Firefox bug: http://is.gd/report_firefox_bug_cc_paul

One more thing…

Being rude doesn't help. That doesn't happen often, but it happens. As someone else said: "That question would be easier to answer without the personal attacks.".

Thank you!

HTML Tree Design

2011-10-04T00:00:00-07:00

Designers, help us to improve the look of the Firefox HTML Tree. See: http://twitter.com/#!/paulrouget/status/121196368256708609

My workspace is a terminal.

2011-09-28T00:00:00-07:00

My workspace is a terminal.

This is my setup. You can see: tmux (a screen equivalent) Vim, zsh, Mutt, irssi (running in a dtach on a server). (Flickr set).

Mozilla Openness facts

2011-09-08T00:00:00-07:00

Mozilla Openness Facts

[video] What is Mozilla - http://www.mozilla.org/contribute

So I was planning to publish a long article about what we call Openness at Mozilla. The article was very boring. Here are some facts instead:

The Mozilla products are all Free & Open Source, even our websites. Check out our Mercurial repository (Firefox & co), our SVN repository (our websites), our Github repository (labs projects and some websites).

If you're part of the Free Software community or the Open Web community, you're welcome to come to the Mozilla offices, take a seat, and talk to us. You'll probably find some Mozilla volunteers hanging around.

Paris office - Photo by Viking Karwur.

You probably know Gary Kovacs, our CEO. I remember the first time I met him. He came to the Paris Office to discuss the future of Firefox. As said before, the office is open to any community member. One of them was there to part in the meeting (hello Julia!).

You can report bugs, participate in the technical discussions, see what we are working on, on bugzilla.mozilla.org and our mailing lists. There are only 2 things you won't see in there: important security related bugs, and stupid internal stuff like Hey, I need a new computer..

Video from http://www.mozilla.org/about/

A lot of our meetings are broadcasted live on air.mozilla.org.

You want to know about our revenue? Ok, go there (2009 report, written end of 2010).

We are publishing every day our performance test results, comparing ourself to other people, shamelessly: arewefastyet.com. You can find more performance measurements here (explanation there).

Same thing for the results of our User Experience research project. Look at this heatmap.

You know the little "feedback" button in Firefox Beta? You can see our analysis and results online (more details here).

You can see the advancement of our work on the Firefox design here: areweprettyyet.com. You can see what are our priorities, you can comment in the bugs. Same for the addons manager: www.donotlick.com. (That was for Firefox 4, here is more designs for the future versions of Firefox).

Remember the little dialog when Firefox crashes, sending (anonymous) information about the crash to our server? Well, you can see the results here: crash-stats.mozilla.com. Also, you can see your own crashes if you go to about:crashes.

Did I mention we are a family? Shipping a product is hard. See how Damon Sicore (VP of Engineering) talks publicly to all the developers: I know you're all tired and stressed. You all do incredible work every day, and you've built an amazing product. Stay focused. Be nice to each other. Firefox 4 is gonna kick ass, and you should be fiercely proud of it.

Damon Sicore

Want to follow closely the development of Firefox? No secret, go there: dev-planning mailing list.

At Mozilla, we have meetings (phone calls). A lot of them are open to anybody from the community. Want to be part of the Marketing Community call? The number is here. Want to join the Firefox/Gecko Delivery Meeting? You'll find the phone number here (even the video conference URL). Check out the wiki for all the calls (better to check dev-planning list for the call announcements).

The roadmap of the Mozilla products? Sure, it's on the wiki. Want to see the features we are working on? Check this out.

You can find all our meeting notes online on this blog. Also we have a Mozilla Engineering Newsletter.

A lot of employees push their weekly status report online, like Sheppy or Mossop.

How do you think the team synchronises their work? Mailing lists, blogs, IRC, ... all public. Here is Limi's message to the volunteers and employees about where to focus their efforts, and here the status update of his team. Another example, Christian Legnitto, Firefox Release Manager, giving an update of the Firefox 4 Beta plan. We share our stories. Here 2 other examples from John O'Duinn talking about our Makefiles and Branches.

Also, we organize huge parties all together (employees, volunteers). I don't know if it means we are open, but at least, it means that we know how to have fun :)

Mozilla Summit 2010

I have been a Mozillian for 8 years now (5 years as a volunteer). This is a fantastic experience. Want to join us? Here are areas where you can can help.

Note: This list has been built during the last 6 months. Some links can be outdated.

Mobile Web: Taiwan, Opera and WebOS

2011-09-05T00:00:00-07:00

I bought a WebOS device and went to Taiwan. Now I understand why the Web on Mobile is a pretty big deal.

This is a pretty naïve talk about me being stuck with a phone with no (good) Apps, and observing people in Taïwan using their phones in a different way that Western people do. I don't know much about the Asian market and these observations are from a very short experience with a small group of people. Excuse the non-scientific analysis.

I bought a HP Veer (WebOS inside) two weeks ago. Why? Because I was curious. I wanted to know more about WebOS. I love the hardware and the "cards" system is awesome.

Just after that, I went to Taiwan to give a couple of talks about HTML5. My talks went well. But I have to admit I learned much more than the audience did.

How are these events related? Let me tell you.

1) I bought a WebOS device

So I got my new phone. Didn't really take the time to play with it. Took the plane. Landed in Taiwan. Switched on my computer and got this email:

HP dropped WebOS. lol !

Fuck.

Whatever, I wanted to test the device and WebOS. Time to test/install the Apps I need the most, which are:

Twitter
eMails
RSS Reader
Hackernews
Reddit
TripAdvisor

The Twitter Apps suck. There is no RSS reader synced with Google Reader. The Hackernews App crashes, the UIs of Reddit Apps are buggy. And no TripAdvisor App. And I knew it will not get better. HP dropped WebOS.

So what? Did I buy this phone for nothing?

2) I went to Taiwan

In the mean time, I was in Taiwan, my very first time there.

Devices,

One of the very first thing you can notice (after the crazy weather) is that they all use phones and tablets. More than us? I can't really tell. But my impression is that there was no computers anymore. Only tablets and phones. The main difference was about the diversity.

Some Apple devices, but not that much. Most of the smartphones are Samsung and HTC phones (no surprise here), but also a *lot* of feature phones and not-that-smart-phones (old smart phones). And also tablets. Everywhere. Some iPads, some well-know Android tablets, and a lot of tablets I never heard about.

Opera,

Opera Mini everywhere! While Opera Mobile is a normal mobile web browser, Opera Mini is just a small client that connects to the Opera's server and asks for an URL. Then, the Opera's servers compute the web page, and send the already rendered web page to the device. All the browsing logic happens in Opera's servers.

Opera is big there.

I saw this girl using Opera Mini on an iPad. While I totally understand why you would use Opera on a feature phone, using Opera on an iPad looked weird to me. The stock browser is very good, why would you bother installing another browser? Well, I asked her. She didn't really manage to give me a well-argued answer. Sounded like it was a normal thing. She was surprised I was surprised.

I understand now that Opera is a risk-free browsing experience over there.

Opera is big because,

Chinese websites work on Opera. Opera is a safe way to browse the web when you are in Asia. Opera works for any websites, on any phones;
they are present on feature phones;
they are in "the places to be", talking to OEMs, and being actively present at all the web-related events. They were giving talks at COSCUP (an Open Source conference. Opera is not Open Source at all);
Android devices are sold with Opera.

Apps,

What about Apps? I really can't tell. Smartphones and tablets use Android 2.3 and Honeycomb. I saw people using Apps for games and Instant Messaging on modern smartphones. But all these feature phones, they don't really have Apps.

Native Apps are not the only way to use web services. It's just an option.

Look at Plurk. It's a famous Asian social network. I saw people using Native Apps, but also a lot of people using the Web App. Do you use the Web Twitter client on your phone?

For sure, they use a web browser much more than I do, and they don't have this "App reflex".

Western people all use the same kind of smartphones. Android phones or iPhones. We also use the same kind of services. Twitter, Facebook, Google. The lack of diversity in the Operating Systems and in the Services we use made us forget that Web Browsers on phones are a crucial thing.

3) What I've learned

I realize now that I don't really use a web browser on my phone. Really. On my Android phone, I use mostly Native Apps, and I use the browser when I have to. I have this "App reflex":

I don't really use a browser anymore. Once I know what service I need, I download an App and use it.

Some people can't or don't want to use Native Apps. Because their phones don't have Apps, or because there is just no good Apps for what they want to do, or because, well, because they don't need to.

And they don't need to because the browsers have always been good enough. Thank Opera for that.

While in the Western world we were looking at Apple bringing pretty Apps in an expensive device, in the Eastern world, Opera was bringing a working web browser to all the existing devices.

Two different stories, two different behaviors. I don't say that one is better than the other. Native Apps are easier to use and look better. Web Apps are available everywhere and can't be blocked.

4) What do I do with my WebOS phone then?

I use Web Apps now. Only Web Apps. The web browser is decent, based on Webkit. It's been 2 weeks now, and I like it so far.

Here are some examples:

Have you heard about Hahlo? It's a web client for Twitter. It's damn good. This is my new twitter client:

The original hackernews website doesn't look good on a mobile phone. But someone created a mobile version of this page:

Here is my App Launcher:

What I miss,

I don't really like the web Reddit client. On Android, I still use the Native App;
And I didn't find any good web "Clock" App;
At Mozilla, we use Zimbra for our webmail, but I don't really like it;
The native Google Maps is better than the web one (on WebOS).

5) Web Apps, is it working? What can we improve?

It is working. The best example is probably Hahlo. But web developers need to use the right technologies (viewport, geolocation, Media Queries, localStorage, App Cache, …).

HTML5 (and CSS3, and the different APIs coming with HTML5) is pretty powerful. But still behind Native features. Here is a couple of features I would really love to see:

Notifications

I want Hahlo (my Web Twitter client) to notify me when I have a new @mention. Firefox for mobile supports notifications on Android. Not sure about Webkit.

Big icons

Favicons are not big enough. The iPod touch icons (present in a lot of websites) are served when you use an iPhone or an iPod. People should start using bigger icons. See Margaret's blog post about this.

Look at the Hahlo icon here for example:

Register as content-handler

I want Web Apps to be able to declare themselves as being able to handle a type of content. Images for example. Or music. Then I would be able to have a Music player or a Gallery App that uses my local files.

And I want them to be able to be present in the "share" menu.

Custom CSS / JS

A lot of web pages are not mobile-ready yet. Or have some minor bugs that make them unusable on my device. I want to be able to fix them, and to share these fixes. Like for hackernews for example. Right now, I have to use another website that just fixes the CSS.

I want something like Stylish and GreaseMonkey.

JetPack allows that for Firefox Mobile.

More!

And I won't be against more APIs :) At Mozilla, we are already working on a set of APIs that woud make Web Apps really really powerful. With Google and Opera, we are also working on WebRTC to bring Real-Time Video and P2P connections to the web.

As for Mozilla,

The Mozilla Mobile team didn't wait for me to address these issues. After this experience, I understand better what we are doing at Mozilla:

Building new APIs for the Web;
Bringing a Web-App-to-Native-App mechanism in Firefox Mobile (try Firefox Aurora on Android);
Working on this big icon issue;
And bringing more competition with Firefox Mobile, because diversity is a good way to make sure the web is evolving, and not getting stuck in a not-that-healthy state, like Native Apps could be (think about the WebOS experience).

As long as you have a good browser, your device won't become a brick.

Firefox links

2011-08-15T00:00:00-07:00

Back from holidays! … and lot happened in the Firefox world while I was offline. Here are some interesting links.

JavaScript: experimenting with DOM Joystick Events - LINK

This is an experimental patch. Not in Firefox yet.

Firefox 7 uses less memory than Firefox 6 (and 5 and 4): often 20% to 30% less, and sometimes as much as 50% less. - LINK

Brendan Eich about ES6 - LINK

How do Firefox users use Tabs? - LINK

The New Firefox Permissions Manager - LINK

DevTools update. Test the higlighter - LINK

Rainbow and WebRTC - LINK

Strengthening User Control of Add-ons - LINK

mercurial, mq and multiple patch queues

2011-08-02T00:00:00-07:00

I haven't heard about hg qqueue until today (thank you Mihai!). It allows you to manage several patch queues. More info: hg help qqueue or here. I realize I'm not the only one to do not know that, so I'm sharing :)

Firefox.next

2011-06-27T00:00:00-07:00

The future of Firefox

Some people are saying that "browsers are done". I'm happy these people are not working for Mozilla :)

So just in case you didn't know, Firefox roadmap is open to anyone. Just take a look at these ~100 features we are working on for Firefox (link), these ~70 features we are working on for Firefox Mobile (link) or these ~70 features we are working on for the web platform (link).

Things I can't wait for:

Crypto client side (link)
Media Processing: Capture and recording Webcam & P2P streaming in the browser(link)
Identity & Verified Email Service (link) - Interactive mockup
Home & new tab pages (link)
Social/Sharing mechanism (link)
Web Apps (link)

mq-patch & vim

2011-06-26T00:00:00-07:00

mq-patch & Vim

Update: I forgot about the "len > 0" test. Thx @padenot for the quick fix.

Update2: Thanks to @hoaproject, now it works even if Vim is not open in the Root directory.

If you use the Mercurial Queues (and you should!) and Vim, you may want to know which patch you are working on.

Here is how I managed to put the name of the current patch in my status bar:

let g:mqStatusPath = substitute(system("hg root --cwd " .
                     getcwd()), "\n", "", "g") . "/.hg/patches/status"

function! GetCurrentMqPatch()
    if filereadable(g:mqStatusPath)
      let patchesList = readfile(g:mqStatusPath)
      if len(patchesList) > 0
        return split(patchesList[-1], ':')[1]
      endif
    endif
endfunction

set statusline=%{GetCurrentMqPatch()}\ %F%m%r%h%w

Screenshot:

Here is the full code for my status bar (part of this code is from this guy):

let g:mqStatusPath = substitute(system("hg root --cwd " .
                     getcwd()), "\n", "", "g") . "/.hg/patches/status"

function! GetCurrentMqPatch()
    if filereadable(g:mqStatusPath)
      let patchesList = readfile(g:mqStatusPath)
      if len(patchesList) > 0
        return split(patchesList[-1], ':')[1]
      endif
    endif
    return ""
endfunction

"set statusline=%{GetCurrentMqPatch()}\ %F%m%r%h%w

function! MyStatusLine(mode)
    let statusline=""

    if filereadable(g:mqStatusPath)
      let statusline .= "%#PatchColor#" . GetCurrentMqPatch() . "%*"
    endif

    if a:mode == 'Enter'
        let statusline.="%#StatColor#"
    endif
    let statusline.="\(%n\)\ %f\ "
    if a:mode == 'Enter'
        let statusline.="%*"
    endif
    let statusline.="%#Modified#%m"
    if a:mode == 'Leave'
        let statusline.="%*%r"
    elseif a:mode == 'Enter'
        let statusline.="%r%*"
    endif
    let statusline .= "\ (%l/%L,\ %c)\ %P%=%h%w\ %y\ [%{&encoding}:%{&fileformat}]\ \ "
    return statusline
endfunction

au WinEnter * setlocal statusline=%!MyStatusLine('Enter')
au WinLeave * setlocal statusline=%!MyStatusLine('Leave')
set statusline=%!MyStatusLine('Enter')

function! InsertStatuslineColor(mode)
  if a:mode == 'i'
    hi StatColor guibg=orange ctermbg=lightred
  elseif a:mode == 'r'
    hi StatColor guibg=#e454ba ctermbg=magenta
  elseif a:mode == 'v'
    hi StatColor guibg=#e454ba ctermbg=magenta
  else
    hi StatColor guibg=red ctermbg=red
  endif
endfunction 

au InsertEnter * call InsertStatuslineColor(v:insertmode)
au InsertLeave * hi StatColor guibg=#95e454 guifg=black ctermbg=lightgreen ctermfg=black

Design inspiration

2011-05-19T00:00:00-07:00

bookmarks/inspiration/design

For pixel lovers:

dribbble.com (excellent!)
forrst.com
emberapp.com
mycolorscreen.com (mobile)
pttrns.com (mobile)
noteandpoint.com (great presentations)
ffffound.com beyond pixels
patterntap.com collections of UI patterns
ui-patterns.com

Emulators in Javascript

2011-05-18T00:00:00-07:00

This is getting crazy :)

Fabrice Bellard (mister ffmpeg, qemu & co) wrote a CPU (x86 32-bits) emulator in pure JavaScript. Grant Galitz, as for him, wrote a GameBoy color emulator.

These emulators are possible because of fast JS engines and new appropriate objects: Typed Arrays.

Here is a screencast of these emulators:

If you want to see the commands I'm typing, switch to 720p.

What code editor do you use?

2011-05-18T00:00:00-07:00

What code editor do you use?

That's the question I asked to my twitter followers (mostly web developers, and FLOSS people. Yes, it's biased). And this is the result (around 140 results):

Unknown means "one single answer for an editor, and I never heard about it" :)

The data:

/* Some people answered "gedit and emacs"
   or "vim and eclipse and notepad++".
   Then I count such results as "0.5 + 0.5"
   and "0.33 + 0.33 + 0.33" */

  var editors = {
    "textmate": 25.33,
    "vim": 20.83,
    "notepad++": 15,
    "unknown": 11,
    "emacs ": 9.83,
    "coda ": 8.83,
    "komodoedit": 7,
    "aptana": 6.33,
    "geany": 5,
    "gedit": 4.83,
    "komodo": 4.33,
    "eclipse": 4.5,
    "sublimetext": 4,
    "bbedit": 3.83,
    "etexteditor": 3.5,
    "espresso": 2.5,
    "intellij": 2,
    "dreamweaver": 2,
    "netbeans": 1.83,
    "jedit": 1.5
  }

in Firefox nightlies

2011-05-14T00:00:00-07:00

<progress>, a new HTML5 tag, is now available in Firefox Nightlies . Thank Mounir Lamouri for the hard work :)

HTML5 in the wild

2011-05-13T00:00:00-07:00

HTML5 in the wild

These are not demos, but actual web pages, using HTML5 & friends. Less "crazy", more useful.

link to the presentation

DZSlides 2.0 beta

2011-05-13T00:00:00-07:00

Oyez! Oyez! Braves gens.

DZSlides 2 Beta is here

And I need testers :)

See paulrouget.com/dzslides. Any bug report/feedback would be really appreciated. Especially about the comprehension of the project. It's quite simple, but I'm not sure it's pretty straight forward to understand.

Also, I just can't make it work for Opera. There's a lot of gfx glishes (on Linux at least). It should work, more or less, on IE9.

Here are 3 presentations I made with DZSlides. Hope it's gonna make you feel excited by this tool :)

Enjoy:

Why you should fear the Ninja Turtles.

link to the presentation

What is DZSlides?

link to the presentation

HTML5 in the wild

link to the presentation

CSS Simpsons

2011-04-30T00:00:00-07:00

The Simpsons

<div id="simpsons">
  <p title="maggie" id="maggie"></p>
  <p title="homer" id="homer"></p>
  <p title="marge" id="marge"></p>
  <p title="bart" id="bart"></p>
  <p title="lisa" id="lisa"></p>
</div>


<style>
  #simpsons {
    background-color: #2B2B2B;
    width: 600px;
    height: 300px;
    text-align: center;
  }
  #simpsons p {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-left: 18px;
    margin-right: 18px;
    transition: 0.1s;
  }
  #simpsons p:hover {
    transform: scale(1.1);
  }
  #maggie {
    background-color: #FFC60A;
  }
  #homer {
    border-top: 40px solid #FFC60A;
    background-color: white;
    border-bottom: 40px solid #008BAA;
  }
  #marge {
    border-top: 40px solid #008BAA;
    background-color: #FFC60A;
    border-bottom: 80px solid #AEC774;
  }
  #bart {
    border-top: 40px solid #FFC60A;
    background-color: #008BAA;
  }
  #lisa {
    border-top: 40px solid #FFC60A;
    background-color: #F25822;
  }
</style>

Inspired by this.

[challenge] Build your infographics in HTML5 and CSS3

2011-04-29T00:00:00-07:00

I challenge you to create a beautiful CSS3/HTML5 infographic :) See at the end of the article for more infos.

Why you should build your infographics in HTML5 and CSS3.

I see a lot of infographics around here, and most of them could be built only with web technologies (HTML5 + CSS3 + SVG).

src: 1 2 3 4 5;

Most of the infographics we see are beautiful, but sooooo static. You can make them much more alive if you use the web technologies.

Interactive content

You can change the style/content of an element if the user interact with it: :hover effects, fold/unfold on click, buttons to decide what to draw and select options (select a country, choose how to sort, ...), etc.

Live data

With an image, you're just showing a "snapshot" of your data at a certain time. The web allows you to fetch data. Your infographic could look completely different depending on when it is viewed. Build your graph with SVG or Canvas (here is an awesome library to do that: g.raphaeljs.com/) in real-time.

Animations

Make it move! With SVG SMIL, CSS Transitions, Canvas (see ProcessingJS), CSS Animations, you can build beautiful animations. You can even embed a video!

Make it sexy

Well, it's obvious, your infographic must be beautiful. With CSS3, you have infinite ways to make things beautiful: gradients, font-faces, multiple background, transforms, SVG background, ...

Side effects

Your infographic will be accessible (copy/paste!)
People will be able to enhance it (view source! Host it on github.)
You can have multiple layouts, like a mobile layout (mediaQueries)

Want to give it a try?

Here is a random list of free data sets. Take a look, build something interactive/live/animated/sexy in CSS3/HTML5/SVG, share it here. I'll publish the most interesting ones on the Mozilla Hacks blog :) (probably in June).

Firefox Experiment: Media Events?

2011-04-26T00:00:00-07:00

Better integration of online music players?

This is something I've been thinking a lot lately. I use online music players like LastFM and GrooveShark.

I want to be able to control such web apps with the multimedia keys, and I want a visual feedback to know which tab is generating sound.

"media" events

Here is an idea. What if we introduce a new kind of events. The "media" events.

I wrote some code to test this idea, here is a screencast, see below for the source code.

And since you can't see the Visual Feedback in the video, here is a screenshot:

Multimedia keys

Some media events would be fired if the user uses the media keys, even if the tab is on the background or your browser not focused.

  window.addEventListener("media",
    function(e) {
      // could be: play, pause, previous, next
      if (e.data == "play") {
        myplayer.play();
      }
  }, true);

Visual feedback

The browser could automatically detect if sound is being generated from the tab, and give a visual feedback. But it's something quite tricky (especially because of the plugins, see bug 486262 ).

So what about letting the web page notify the browser the some sound is being played, by firing a media event ("sound"/"nosound")?

What do you think

Does it make sense? What about the names of these events? Also, what happens if the user has different web pages listening to the media events?

Source code

Find the source code of this addon here. Works only on Linux (any port to Windows/Mac would be appreciated).

Update

I've been told that DOM 3 Event specifies key events for things like this
I see some code for Windows and "MozHotKey" events here
"We should me sure it works for remotes"

CSS3 Animations in Firefox Aurora

2011-04-20T00:00:00-07:00

CSS3 Animations in Firefox Aurora

David Baron implemented CSS3 Animations in Firefox. Yeah!. You can test CSS3 Animations right now with Firefox Aurora (don't know what Firefox Aurora is? Check this out).

If the implementation is good enough (please report bugs!!!), Animations will make it for Firefox 5.

I've hacked a bit the famous CSS3 AT-AT demo (by Anthony Calzadilla) to make it work with Firefox (just needed to add the -moz- prefix) and here is the result:

Works in Firefox Aurora and Webkit browsers

Again, if you find any bug, please let us know:
Open a Core/Style System (CSS) bug

More information on David Baron's blog.

Experimenting with HTML5 and native controls

2011-02-28T00:00:00-08:00

Experimenting with HTML5 and native controls

THIS IS AN EXPERIMENT.

Little screencast:

This video is hosted by YouTube and uses the HTML5 video tag if you have enabled it (see here). YouTube video here.

Alex Faaborg recently published some mockups for "Site Specific Browsers":

I thought it would be a good idea to extend this concept. So here is an idea:

A webpage should be able to expose native controls to the UA
A webpage, if considered as a Web App, should be able to get rid of the URL / Back Forward Tool bar
A webpage should be able to expose controls to the context menu

And I think the menu specification could help. I doesn't fit perfectly my needs. But here is a way to implement this idea:

<menu type=application> is a menu accessible from the UA menu bar
A <html> attribute would hide the native toolbar. The page would be in charge of creating a menu.
<menu type=context> is menu that should be injected into the native context menu

type=toolbar could be used to override the native toolbar, but website already have toolbars (think twitter, facebook). I don't see any clean ways to use, in a progressive-enhancement manner, this toolbar. I prefer an attribute.

type=application is not part of the specification.

I wrote a little JetPack (restart-less) extension to experiment with this idea. You can test it with this web app.

This brings a lot of questions. What about security? What about type=toolbar? Should the app button be persistent? What if there several app buttons? What about styling the menuitems? Should we do that only for app tabs? What about prism-like web apps?

Two little demos I made recently

2011-02-23T00:00:00-08:00

Two little demos I made recently

WebM and ffmpeg: concatenate videos and add bumpers

2011-01-25T00:00:00-08:00

WebM and ffmpeg: concatenate videos and add bumpers

So I have this MP4 video. I want to:

transcode it to WebM;
create a bumper: a little video to introduce the main video. Just a text;
concatenate my bumper with the WebM main video.

The original video is named girltalk.mp4.

Transcode to WebM with ffmpeg

Easy:

$ ffmpeg -i girltalk.mp4 \
  -f webm -vcodec libvpx \
  -acodec libvorbis \
  -aq 90 -ac 2 \
  girltalk.webm

(You need a version of ffmpeg >= 0.6)

Interesting extra options:

If you want no audio:
-an : Disable audio

If you want just a subsection of the video
-ss  : Set start time offset in seconds or hh:mm:ss[.xxx] format.
-t  : Set recording time in seconds or hh:mm:ss[.xxx] format.

if you want to resize the video
-s  : Set frame size ( WidthxHeight)

if you want to crop the video
-cropbottom  : Set bottom crop band size ( in pixels ).
-cropleft  : Set left crop band size ( in pixels ).
-cropright  : Set right crop band size ( in pixels ).
-croptop  : Set top crop band size ( in pixels ).

Create the bumper

Create one image

First, you need the dimension of the video:

$ ffmpeg -i girltalk.webm 2>&1 | grep "Stream \#0.0"


  Stream #0.0: Video: libvpx, yuv420p, 320x240,\
    PAR 1:1 DAR 4:3, 12 fps, \
    12 tbr, 1k tbn, 12 tbc

Got it: 320x240.

Create the bumper with your prefered image editor (Gimp!). So far, it's just an image of the same size as the video.

Here's mine:

Create a video from the image

You need the framerate of your main video. From the previous command, we know it's 12 fps (the quality of this video is really poor, usually, it's 25). Also, you'll need to know the audio sampling frequency.

$ ffmpeg -i girltalk.webm 2>&1 | grep "Stream \#0.1"



  Stream #0.0: Video: libvpx, yuv420p, 320x240,\
    PAR 1:1 DAR 4:3, 12 fps, \
    12 tbr, 1k tbn, 12 tbc

22050 Hz here. Usually it's 44100 Hz.

You also need to know how you long you want your bumper to last. Let's say 5 seconds:

ffmpeg \
  -loop_input -f image2 -i bumper.jpg\
  -acodec pcm_s16le -f s16le -i /dev/zero \
  -r 12 -t 5 \
  -map 0:0 -map 1:0 \
  -f webm -vcodec libvpx \
  -ar 22050 -acodec libvorbis -aq 90 -ac 2 \
  bumper.webm

So here, I create a video which is just this bumper image repeated 12 times per second during 5 seconds, with a silence track (important). Result:

Concatenate WebM videos

Ok, so now, we have 2 videos. And we want to concatenate them.

WebM is an interesting format. You can just put the 2 videos inside the same file, no need to reencode. The only condition is to have the same bitrate and the same number of tracks. That's why we create a "silence" track and we respected the main video bitrate for the bumper video.

So to "repackage" the video with two videos inside (hmmm), you'll need mkvmerge, from mkvtoolnix:

$ mkvmerge -o girltalk.final.webm bumper.webm +girltalk.webm

If you have any problems with the last command, just check the 2 streams from the 2 videos (ffmpeg -i video.webm), they have to have the exact same properties.

Enjoy the result:

Note: sounds like Chrome WebM decoder doesn't take into account the chained tracks in WebM. Works well in Firefox and Opera.

Vidéo de mes démos à ParisWeb

2011-01-17T00:00:00-08:00

Vidéo de mes démos à ParisWeb

Ça se passe ici (vidéo).

Je parle de WebSockets, File API, FormData, WebGL, Audio API, ...

Tout plein de démos inside ;)

HTML5 forms: more accurate tests for html5test.com

2010-08-23T00:00:00-07:00

HTML5 forms: more accurate tests for html5test.com

html5test is a good test. It's easy to understand. Neils found a good way to rate HTML5 support. It's not perfect, but I think a perfect test is not possible if you want to keep it simple. But there's still room for improvements.

Look at the current version of html5test, the Forms part. Webkit has a good score (34/38, 89%), although their HTML5 forms support is incomplete (no UI, validity barely implemented, but they expose the input type). The way forms are tested is not that accurate: just testing if the input type is supported as a DOM property is not enough. The good way is to check that the constraint is actually applied (input.validity.valid).

//Exemple: testing <input type=email>

/*
 * How it was tested
 */
var valid = (input.type == "email");


/*
 * A better way to test it
 */

input.value = "foo";
var valid = false;
if (!input.validity.valid) {
  input.value = "foo@bar.org";
    if (input.validity.valid) {
      valid = true;
    }
}

I also added some tests for input.form, input.labels and label.control. I'm also testing the forms related CSS selectors (:required, :optional, :valid and :invalid).

I sent a patch to Neils. You can see the result here beta.html5test.com. Basically, webkit score is less good now for the forms section (29/45, 64%), but still better than Firefox4 ;) (and still very good for Opera).

Firefox4 nightlies now support part of the HTML5 form specification (talk to Mounir, the main developer). The latest nightly's is 24/45 (53%), and it'going to get better :)

Converting to WebM, OGG/Theora and MP4.

2010-08-23T00:00:00-07:00

Converting to WebM, OGG/Theora and MP4.

UPDATE: Now that ffmpeg 0.6 is everywhere, and the preset are good enough, the easiest way to convert a video to WebM is:

$ ffmpeg -i foo.avi foo.webm

Of course, if you want to tweak the transcode options, RTFM ;)
---

If you want to use the <video> tag, you need to encode your video to 3 formats:

WebM/VP8
OGG/Theora
MP4/h264

Here is a quick howto:

Building ffmpeg (version >= 0.6)

Create a directory, let's say "myvideos". All the comming commands will make sure that everything stays in this directory. Your system won't be altered.

Downloads:

ffmpeg source code: here.

dependencies:

vorbis: here (the version of you distribution should be ok: libvorbis-dev);
x264: here;
faac: here;
theora: here.

vpx:

git clone git://review.webmproject.org/libvpx.git

Build:

mkdir ~/myvideos/dist

For these 5 dependencies:

un-compress;
go to the source directory;
./configure --prefix=~/myvideos/dist && make && make install

Let's build ffmpeg:

$ LDFLAGS=-L$~/myvideos/dist/lib \
CFLAGS=-I~/myvideos/dist/include \
./configure --prefix=~/myvideos/dist --enable-gpl\
--enable-nonfree --enable-libvpx --enable-libvorbis\
--enable-pthreads --enable-libx264 --enable-libfaac\
--enable-libtheora
$ make && make install

Convert

To call ffmpeg:

~/myvideos/dist/bin/ffmeg

But first, you need to tell where to find libraries:

export LD_LIBRARY_PATH=~/myvideos/dist/lib/

Here are my 3 command lines to convert to WebM, OGG/Theora and mp4:

OGG/Theora

ffmpeg -i input.mov \
  -acodec libvorbis -ac 2 -ab 96k -ar 44100 \
  -b 345k -s 640x360 output.ogv

WebM/vp8

ffmpeg -i input.mov \
  -acodec libvorbis -ac 2 -ab 96k -ar 44100 \
  -b 345k -s 640x360 output.webm

MP4/h264

ffmpeg -i input.mov \
  -acodec libfaac -ab 96k \
  -vcodec libx264 -vpre slower -vpre main \
  -level 21 -refs 2 -b 345k -bt 345k \
  -threads 0 -s 640x360 output.mp4

Video are resized to 640x360 with a bitrate of 345k.

Hope it helps.

HTML5/CSS3 Slides: DZ Slides

2010-07-30T00:00:00-07:00

HTML5/CSS3 Slides: DZ Slides

For the last few weeks, I've been using the same HTML template as slides for my presentations. This template is now online. It works great with Firefox 4 and I'm trying to make it work with other browsers (need help here). Feel free to grab the code and play with it: DZ Slides.

Update: Version 2 is coming.

paulrouget.com

A brand new Firefox for Android

A brand new Firefox for Android is available.

Faenza + Gaia ?

If you don't know Gaia…

If you don't know Faenza…

Musiques de jeux vidéos et séries télé, par Krapo

Musiques de jeux vidéos et séries télé, par Krapo.

Portal 2 - Want You Gone - vocoder ukulele glockenspiel melodica

Jayce et les Conquérants de la Lumière

Zelda Ocarina of Time - Lost Woods - Nintendo DSi + ocarina + guitar

Why do judgmental people usually have bad judgment?

Why do judgmental people usually have bad judgment?

B2G demo, with some code inside and a live demo

What is Boot To Gecko:

Live demo:

Videos:

Contribute:

HTML5 Context Menu and FullScreen

HTML5 Context Menu and FullScreen API.

Darkroom for Vim

A full-screen writing program or distraction-free editor is a text editor that occupies the full display with the purpose of isolating the writer from the operating system (OS) and other applications. Wikipedia

MDN & DuckDuckGo

Firefox 2012 Roadmap and Meeting

Disapproval look and Linux

ಠ_ಠ

Bugzilla Activity Report

What happened between Firefox 7 and Firefox 10

What happened between Firefox 7 and Firefox 10

My Linux Configuration

My .vimrc

my .vimrc

Books I read

Books I read.

The Universe in a Nutshell

A Brief History of Time

Relativity: The Special and General Theory

In Search of Schrödinger's Cat: Quantum Physics And Reality

Mozilla Web Meetup (Toronto)

Mozilla Web Meetup(Toronto, this Friday, ~4pm)

New Year's Resolutions

Follow @FirefoxNightly

[video] B2G demo

Mozilla's Boot to Gecko (B2G) Demo at MozCamp Asia 2011.

videos: Learn Bugzilla

Learn bugzilla

Writing code - Light or dark color scheme?

Light or dark color scheme?

2 firefox bugs fixed, thanks to good reports on twitter

First bug, wrong label when bookmarking a link that includes nested spans:

Second bug, Drag'n droping a file from dribbble.com to the Finder (Mac) creates a corrupted file:

How to report a Firefox bug on Twitter

How to report a Firefox bug on Twitter (to me)

About bug reports…

Did you consider opening a bug on bugzilla.mozilla.org??

One more thing…

HTML Tree Design

My workspace is a terminal.

My workspace is a terminal.

Mozilla Openness facts

Mozilla Openness Facts

Mobile Web: Taiwan, Opera and WebOS

I bought a WebOS device and went to Taiwan. Now I understand why the Web on Mobile is a pretty big deal.

1) I bought a WebOS device

2) I went to Taiwan

Devices,

Opera,

Apps,

3) What I've learned

4) What do I do with my WebOS phone then?

What I miss,

5) Web Apps, is it working? What can we improve?

Notifications

Big icons

Register as content-handler

Custom CSS / JS

More!

As for Mozilla,

Firefox links

JavaScript: experimenting with DOM Joystick Events - LINK

Mozilla Web Meetup
(Toronto, this Friday, ~4pm)