paulrouget.com

Defining JavaScript functions, the ES6 way

2013-03-28T00:00:00-07:00

Defining JavaScript functions, the ES6 way

(at the moment, only works in Firefox 22)

Edit: I've been told that Expression Closures are not part of ES6.

disconnected

2013-03-21T00:00:00-07:00

Disconnected

I left for Taiwan. For 2 months. Offline. Alone. Coming back the 1st of June.

why

I’m taking a break. I need some time to focus on my offline-self. I’ve spent the past 10 years online. Building a reputation, working on Firefox, caring a lot about Mozilla and the web. That was a good ride.

Now I’m 30 and looking forward to 10 other awesome years. But before that, I need to learn how to care less. I need to learn how to calm down and slow down. Pressure and stress are my enemies, and I’m not good at fighting them.

To be honest, I’m not very comfortable putting my online-self to sleep. What about emails? Twitter? My blog? Bugs? … but how comes this is bothering me that much? It should not - especially for only 2 months. That’s why I’m forcing myself to go offline.

caring less and ignoring negativity

I just mentioned that. I want to learn how to care less about the virtual world. I’m proud to be some kind of “public figure”. But when so many people look at you, your work and your organization, you can’t avoid aggressivity, ignorance and negativity.

Even if you get one hundred +1s, one single -1 will punch you in the face. Negativity is toxic. It is hurting the people who build things. This is the hardest part of my job. I want to escape it. I want to stop caring about these people.

learning

Mastering and evangelizing the web platform have been my only goals. Being excellent at this was such an important thing. Well, I made it :) … and I won’t stop working on it, but I can’t imagine only doing that for the coming years.

During these 2 months, my plan is to learn new things. Things that will be irrelevant for my career, things that won’t make me better at writing code. I want to learn a new language (I’m learning Chinese), I want to improve my drawing skills and practice my Kung-Fu (Tai-chi and Wushu).

why Taiwan

Different reasons.

The last time I’ve been there was enlightening. People are so different, so kind. The culture is so colorful. I felt the need to learn more about the Chinese life.

Also, if you know me, you know that I lived in a lot of different places. Now I feel it’s the right time to settle down somewhere. Have an actual “home”. Stop moving. But before that, I want to see how it feels to live in Asia. 2 months is short, but it will give me a chance to know what I could miss if I never move there.

I need sunlight. I want to be surprised. I want to get lost.

what after

Not sure yet. I’ll need to figure out where I want to live. It will take some time to catch-up with 2 months of bugs/news/mails/…. But anyway, even though 2 months is short, I hope to be a different person after this break. A little more “zen” :)

I’m still online for one week. If you have anything to check with me before I leave, ping me!

See you in 2 months

Future of Firefox DevTools

2013-03-17T00:00:00-07:00

Future of Firefox DevTools

10 days ago, I asked in various channels about what web developers would like to see in the Firefox DevTools. I was impressed by the amount of answers we got (especially from HackerNews and Twitter). We computed and prioritized all these inputs. Then the DevTools team met, and spent a week hacking on these different requests.

Coding in the browser & controlling the browser from editors/IDEs

This is the number one request. Breaking the painful Editor ⇄ Browser ⇄ DevTools workflow. Staying in the browser, or not leaving the editor.

We are exploring 2 approaches: letting other editors interact with Firefox, and integrating editors in Firefox.

A python library to interact with Firefox

Proof of concept. Firefox CSS live editing via SublimeText:

Watch on youtube.

A lot of editors are scriptable in Python. And Firefox has remote capabilities (a DevTools protocol accessible over the network). So we are building a python library that can be used by editors to interact with Firefox (desktop or mobile). We could for example add JS breakpoints from Vim, or edit the code of the current page from SublimeText.

This will work for mobile as well.

Authoring in the browser

Another approach is to let the user write code directly from Firefox. Basically having editors in the DevTools. We are still trying to figure out what this could look like. Do we want a jsfiddle-like tool? Do we want a file based editor? Not sure yet, still exploring.

Authoring tool mockup:

Don't expect these 2 things to happen soon. It will take us a couple of months to get the Python library, and more to get the in-Firefox editors.

Network Panel & Timeline

These are tools you'll find in Chrome and Firebug, but not in the Firefox DevTools yet. We have decided to start with a Network Panel. Victor Porof is working on this, and he managed to get a working prototype:

Watch on youtube.

A better story about Firebug

If you're a Firebug user, the Firefox DevTools might get on your way. We need to improve that. We will do several things like a more obvious way to disable the "Inspect" menu from the context menu.

Another thing we're looking at is a way to use the Firebug panels in the DevTools box (and let the user select which tools he wants).

Jan 'Honza' Odvarko (main Firebug developer) is experimenting with this, and made some good progress:

This is an experiment. It probably won't end up like this.

Docking the tools on the right side of the browser

Good news! We have built that and it's now in Firefox Nightly:

CoffeeScript support

To address this, we are integrating support for SourceMap. Nick Fitzgerald demonstrated a version of the Firefox debugger that supports SourceMap and CoffeeScript:

Nick's work will also help for debugging minimized CSS/JS files.

Also, I'd like to mention that Paul Miller managed to get CoffeeScript and LiveScript support into Firefox Terminal (blog post):

An aggregate repaint view

Being able to see what gets repainted on the page (a costly operation) is useful for performance work. I landed that on Monday. It's not perfect yet, but a good first step:

Watch the video on youtube.

Controlling the animation clock

A lot of people have requested a tool to debug CSS transitions and animations. I have been working on a proof of concept:

Watch on youtube.

Other things have been requested, like visualizing event bindings, offline storage tools and pseudo elements inspection. We are also looking at this seriously. I hope to have some good news about these soon :)

Thank you HN!

Seriously, you guys rock! Invaluable feedback. Keep on sharing ideas/bugs/feedback (leave a comment here or ping me on twitter: @paulrouget).

-- The Firefox DevTools team

hijacking the Firefox animation clock

2013-03-17T00:00:00-07:00

Hijacking the Firefox animation clock

I'm experimenting with a tool that will let the user control the animation clock used by gecko to render CSS transitions and animations, and JS animations based on requestAnimationFrame.

I'm still not sure how the UI should look like yet, and how this should interact with the recently added Paint Flashing feature. What do you think?

Proof of concept:

Watch on youtube.

Code can be found here: https://github.com/paulrouget/firefox-animation-clock.

Mobile Scrollbars in Firefox Nightly

2013-03-13T00:00:00-07:00

Mobile Scrollbars in Firefox Nightly

In Firefox 22, I (re)introduced mobile scrollbars in the Responsive Design View:

Watch the video on youtube.

Paint Flashing in Firefox Nightly

2013-03-12T00:00:00-07:00

Paint Flashing in Firefox Nightly

Yesterday I landed a new feature in the Firefox DevTools: paint flashing. What it does is to highlight areas being painted by Gecko. Avoiding useless painting operations can help you to build more performant web pages.

Watch the video on youtube.

Note for Firefox developers: The pref nglayout.debug.paint_flashing still works, but I encourage you to try the paintflashing command: If you turn on the pref devtools.chrome.enabled, you can type the command (shift-F2 to bring the command line) paintflashing on --chrome to enable paint flashing only for the chrome (the --chrome option is not available if you don't turn on this pref).
I introduced a new property to nsIDOMWindowUtils: paintFlashing. Setting it to true will turn on paint flashing for the specified window, and to false will clear the colors and stop paint flashing.

Firefox Terminal v3

2013-03-11T00:00:00-07:00

Firefox Terminal v3

"Firefox JSTerm" has been renamed "Firefox Terminal", because now, it also supports CoffeeScript and LiveScript, thanks to Paul Miller (now an official Firefox Terminal contributor).

Please file bugs on github, and to give it a try, head to addons.mozilla.org.

Font Inspector in @FirefoxNightly

2013-03-11T00:00:00-07:00

Font Inspector in Firefox Nightly

I built a font inspector for Firefox. It's now in @FirefoxNightly. It shows you the font used by the selected element in the page, or all the fonts used in the page.

The information exposed are:

Font name and font family
its location (system vs. remote, and URL)
a preview (you can change it)
@font-face code

Limitation: I'm focusing on font faces for now. There's probably more things we can show (colors, font size, line height,…), but it's not easy to show the font-face info and CSS info simultaneously: we can have the same font face and several font sizes in the same selected node (a node can include several nodes, with different styles and different font-faces).

If you have any idea how to improve this tool, let me know on Twitter (@paulrouget).

Curvy Tabs In Firefox UX

2013-03-04T00:00:00-08:00

Curvy Tabs In Firefox UX

For OSX, Linux and Windows.

The new curvy tabs design is almost here. It's available in the Firefox UX branch for OSX, Linux and Windows. You can download it here or wait until it makes it in Firefox Nightly.

From Mike Conley blog post (read it, it's about the performance of this new design): "They’re not perfect, not by a long shot, but we’re getting into the polish stage now, which is good".

DevTools Toolbox ready for testing

2012-12-17T00:00:00-08:00

Test the devtools in Firefox Nightly. The UI has changed. Please report bugs.

DevTools Toolbox ready for testing

For the past 2 months, we have been working on a new user interface for the Firefox Developer tools. As explained previously , we are building a unified interface for our tools (the "toolbox").

You can now test this new UI in Firefox Nightly. Because this feature required a lot of code refactoring, we are expecting regressions (see known bugs). Please help us to test the toolbox. If you run into issues, please file a bug (Developer Tools components), or leave a comment here.

Thank you.

Shaping a Firefox feature - how does it work?

2012-11-05T00:00:00-08:00

“Firefox developers don’t listen to users”

Haaa, how many time did we hear that? Every time we ship a new feature I guess :)

So yes, we do listen to users, but this kind of comment reveals how much some people misunderstand how we build things at Mozilla. In this article, I’d like to clarify this process. If you work in the Software industry, this won’t be news to you: it’s not as simple as “Developers listen to users, build according to what they hear”.

Shaping a Firefox feature - how does it work?

So first, a little warning: I’m deliberately simplifying the whole story. Because a lot of people are involved in more than one team, because Mozilla is a mix of employees and volunteers, because not all the teams work the same way, because we have lot of different products…

The general idea is:

Gather data (a.k.a “listen to users”);
Define requirements;
Design;
Implement;
Ensure it works by gathering more data.

We have several teams, with distinctive roles:

Metrics team: measure and gather data;
Market Insights team: predict the future;
Product team: draw conclusions, define requirements;
UX team: user studies & design;
Engineering team: implement;
Support/QA: post-analyse;

All these teams work all together. Below, I’m describing a linear process. It is not that linear. All these teams spend their time talking to each other.

With Mozilla’s core principles in mind:

Metrics

The Metrics team gathers data about how people use our tools and about how our tools perform. For example, they will be able to tell with actual numbers, if Firefox tends to be faster or slower over the different releases.

Comparing the Bias in Telemetry Data vs The Typical Firefox User, from Mozilla Metrics Blog.

Market Insights

The Market Insights works with numbers too.

Numbers about our products (how many users, which countries have a growing number of users,…). Numbers about our competitors (how Chrome’s market share is changing). And number from other markets (how the smart-phone market is evolving).

They cross all these data, and compile them into competitive analyses. These analyses are useful to define priorities.

For example, Market Insights will provide recommendations about where and how we should ship Firefox OS first, or if we should care or not about ARMv6 devices (the answer is yes, we should).

Product

Based on the work of Metrics and Market Insights teams (and as we’ll see later, also based on the UX-team work), the Product Team tries to understand what the user needs today, and what he’ll need tomorrow. The Product team takes user needs and express them as “requirements”.

It’s not only about data. Innovation can emerge from Mozilla Labs or from any team, from any community. Product is also in charge of spotting and including these innovative ideas into the product.

Product also ensures that all the different projects are synced-up (you don’t ship Firefox OS without the Market Place).

UX

The UX Team use their creative mind to design a product, but they also use numbers a lot.

Firefox Heatmap Study, from Mozilla UX Blog.

The UX Team works on both sides of the product team:

User Studies: Bringing UX-related recommendations to the product team. Interviews, surveys and usage-metrics (Test Pilots)… the goal is to understand how people interact with hardwares & softwares. Interviews are pretty amazing. We film participants using a tool, and extract information from that.

Tablet remote usability testing at Mozilla, from Mozilla UX Blog.

Interaction designs and visual designs: once the requirements of a features have been outlined, the UX Team transforms these ideas into concrete scenarios. This is not just about pixels. It’s a lot about making the user happy. Ensuring we won’t disturb him. Aiming the most effective and enjoyable experience. This is a complex topic (especially when you have half of billion of users).

Content Layering, Mozilla UX Blog.

Engineering

The Engineering Team will execute. Iterating with the other teams, they write code that will answer the requirements defined by the product team. They make sure it matches UX’ recommendations, doesn’t regress the performance (thanks to Metric’s tools), and is shipped in time according to Product’s roadmap.

Support and QA

The Support Team and QA Team gather post-implementation data. Trying to understand how these changes affect the end-users by spotting the flaws and by gathering feedback.

Live Feedback From input.mozilla.org, input.mozilla.org.

This is another way to “listen” to the user. Measuring the amount of crashes, finding where regressions happened, extracting information from the support forums, analysing the feedback shared by the beta users,…

An example: “Save For Later”

I strongly encourage you to read Brian Groudan’s article. Brian shares his work on a “Save For Later” feature for Firefox. I’d like to highlight some elements:

“Save For Later” project timeline:

Planning
Competitive analysis
Develop & Pilot Study
Screen Participants & Begin Study
Interview Participants
Synthesize research
Design Ideation
Present Finding and Recommandations

Studies:

“Research phase: Out of 60 profiles, I carefully selected ten people to participate in this study. These participants represented a wide demographic of users.”

Surveys:

“Survey of over 5,000 Firefox users”

And then, if the product team thinks this is something we need to have in Firefox by the next quarter, they will work on defining the requirements and work with engineering team to integrate that into Firefox.

So yeah, when we build a feature in Firefox, it’s not as simple a “developer decide to”, it’s a lot more serious than that. We put some brilliant mind into a room for weeks/months, they do studies, gather data, come to conclusions, prototype, confront results with other data and other teams, iterate.

So next you see a comment like “Firefox developers don’t listen to users”, please, point them to this article ;)

s/osx2/linux

2012-11-04T00:00:00-07:00

s/osx/linux

A little while ago, I moved from Linux to osx because I was extremely disappointed by the direction Linux Desktop Managers were taking. I predicted that it would last 3 months before I come back to Linux. It took 5 months.

The one thing I love about osx is the compelling user experience. It’s solid. Stable. Smooth. Homogeneous. What I didn’t like: It’s not custotmizable (all the osx look the same) and it’s not really keyboard-friendly (even though AlfredApp helped a lot).

Jumping from an OS to an other is no big deal. Beside Firefox, most of the tools I use are text tools (irssi, mutt, vim, …), and they all live in a Tmux (I use Tmux as a tiling window manager).

So why do I come back to Linux?

First, I work on Firefox. And I care a lot about Firefox on Linux (performance and frontend). So I want Linux to be my main OS to make sure I spot bugs early. Let’s say I want to do some Linux-specific QA.

Then, I miss Archlinux’ Aur. Aur is Ali Baba’s cave for hackers. Aur is a user-contributed repository that contains a lot of unexpected/awesome packages.

But my feeling about Linux DM directions hasn’t changed. Let me repeat what I said in my s/Linux/osx/ post: I can’t fucking believe that my Linux experience was better 3 years ago… Things go backward.

Update

You can see my XFCE setup and screenshots here.

I spend 90% of my time in Tmux. screenshot.

hack: floating scrollbars in Firefox

2012-11-02T00:00:00-07:00

A little hack…

How to have floating scrollbars in Firefox:

Screenshot here: i.imgur.com/bn44L.png.

Instructions there: gist.github.com/4003205.

Let me know if it works for you.

Patch lifespan

2012-10-19T00:00:00-07:00

The average patch “lives” for 3.7 days, which is about the same as the common mosquito.

For Firefox:

"On average, the lifespan of a pre-rapid release patch is 4.6 days, while the lifespans of post-rapid release patches are 2.8 days and 3.4 days for core and casual developers respectively. Therefore, the shortest-lived Firefox patch is a zero-minute patch submitted before April 2011. The review request on the patch was made and self-approved and the actual time delta was 14 seconds. We also calculated the average lifespan of all the patches in our dataset. The average patch “lives” for 3.7 days, which is about the same as the common mosquito."

PS: the lifespan of a patch ends on landing.

From "The Secret Life of Patches: A Firefox Case Study" (pdf), reported by Philip Chee on dev.planning.

@FirefoxNightly highlights

2012-10-10T00:00:00-07:00

@FirefoxNightly highlights

You like @FirefoxNightly twitter updates? Good news, I'll be covering the most important updates on a regular basis on hacks.mozilla.org (with the help of Robert Nyman).

First issue is already available.

ps: you can always follow @FirefoxNightly on twitter and tumblr.

Firefox DevTools Toolbox

2012-10-05T00:00:00-07:00

Firefox DevTools: the Toolbox project

For the past year, we have landed a lot of developer tools in Firefox. A JavaScript Debugger, a Style Inspector, a DOM View, a Responsive Design Mode, a Command Line, … and more tools are coming. Think about it, a year ago, we only had the Web Console.

Well, now we are facing an interesting (but expected) problem: "the DevTools Donut".

The "DevTools Toolbox" will fix this problem. The goal is to gather all the tools into one single box, and make this box "dockable" (dock it below the page, or on the side, or in its own window). This work will also introduce a DevTools API into Firefox that addons will be able to use. This API has been inspired by Firebug's API (we worked with the Firebug team on that). One of the goal being to be able to host Firebug panels inside this toolbox.

edit: Mike wrote a blog post about this new API.

Last week we manage to get the first prototype working. Here are some screenshot and a video of me demoing the Toolbox to the team (warning: no visual design yet. It's ugly.):

Firefox DevTools candies

2012-10-02T00:00:00-07:00

Firefox DevTools candies

Last week, the Firefox DevTools team met in London. A lot of things happened. Rob talked about how to use a Scratchpad to build a Jetpack addon. Panos wrote about Debugging Firefox with the builtin Firefox Debugger. It's my turn to show some little things I have been hacking on. We will blog a bit later about the next-big-thing we are working on for the Firefox DevTools.

Responsive Design View: mobile scrollbars + custom presets

I finally took the time to review Hubert Sablonniere's patch to add custom presets to the Responsive Design View (in Firefox 18). I also managed to force floating scrollbars (like for mobile phones) when you switch to the Responsive Design View (being reviewed).

DOM Tree live preview

It's in Firefox 18. Not sure if it will stick.

OSX Native Fullscreen for Scratchpad windows

I'm on App.net

2012-10-01T00:00:00-07:00

I'm on App.net

I'm still on Twitter (@paulrouget) and FirefoxNightly as well (@FirefoxNightly) but I can't use Twitter the way I want anymore (see this), so I moved to App.net (@paulrouget). All my post on App.net are synced back to Twitter.

I use Twitter a lot. I use it to promote my own work. To promote Mozilla's work. To gather feedback. To share the latest gecko updates. To get bug reports. I have thousands of followers on @paulrouget and @firefoxnightly. Twitter is more than a social network to me. It's a tool. I use it to share and track ('search') things.

But sharing and tracking is getting more and more difficult. I can't use Twitter as a tool anymore.

For example, I tweet things from the @FirefoxNightly account. And via IFTTT, I could sync the favorited tweets directly to the Tumblr blog. That is not possible anymore. I also used to use the "Search Realtime" feature that is not present on mobile anymore or in the Twitter app (how long before it gets removed from the website). I also used to use the RSS feed. But again, it's gone.

I don't trust Twitter anymore. I will post from App.net now. App.net has been designed to be instrumentalized. So I can sync it with Twitter (where my followers are), Tumblr, and it works well with IFTTT.

PS: I use twapp.phuu.net to sync twitter and app.net. Also, IFTTT works too (twitter forbids only "read", not "write") but it's not realtime.

PPS: there were some polemics about this post. Yes. App.net is not free. You have to pay $50 to have access to it. But, I am not asking anyone to move to App.net (twitter is fine). I am paying for a sustainable/hackable/open tool (see it as a pipe), that let me handle my stream the way I want. So yeah, it's not an OpenSource and free tool. Nor is Twitter. But the service has been designed to let me handle the data the way I want. And for me, this is the most important thing.

Firefox JSTerm v2

2012-08-31T00:00:00-07:00

Firefox JSTerm v2 is available.

JSTerm:

Changelog:

performance improvements;
can undock the terminal in its own window;
native osx fullscreen support (see screencast);
global history (shared across sessions);
better multi-line support;
added $ and $$ methods;
more keybindings (see :help)

JSTerm is an experimental restartless addon. It adds a "jsterm" button in the developer Toolbar (Firefox 16+). The terminal behaves like a shell terminal (history, completion on tab, key bindings, …). It's a classic REPL environnement. It uses the builtin Firefox Source Editor to highlight JavaScript. It uses a Sandbox to eval JavaScript. And it comes with an Object Inspector.

For Firefox and Addons developers: like Scratchpad, this tool comes with a "chrome" mode (type ":chrome" to enable it).

How I lost 14kg (30lbs)

2012-08-29T00:00:00-07:00

How I lost 14kg (30lbs) in 10 weeks.

tl;dr: don't fear fat, fear carbs. Learn about the Paleo diet, and use reddit (r/loseit and r/paleo). Oh, and look, I take pictures of what I cook.

You can't imagine how proud I am. Looking back, I feel stupid that I didn't change my diet earlier. But now, man, I feel great, and I look fabulous!

I used to be overweight. Not much, but enough to bother me. From 86kg (190lbs), I went down to 72kg (158lbs) (male, 1.74m / 5.7ft). I now reached my goal, and I want to share how I managed to do that.

Warning: I am not an expert. This is what works for me, for my body. Just take what you can from this post and build your own diet. And all of this might sound obvious for some of you, but it wasn't for me. And I won't provide deep science knowledge here. I'll focus on things-I-did, and won't give much details.

Don't fear fat, fear carbs.

Eat bacon. Avoid bread, potatoes and pasta. This, I think, was the most important part of this new diet.

Eat animals and plants. No processed food.

What I eat: meat, fish, eggs, plants, nuts, seeds, fruits and vegetables. What I don't eat: grains/cereals, potatoes, dairy, processed food. Better if the meat is grass-fed.

Drink water.

No soda. No beer. I drink around 1.5L of water per day. For some reason, hunger and thirst "feel" the same (really). Drinking helped me to stop the hunger. If 20 minutes after drinking I still feel hungry, I just eat.

Want alcohol? Drink Vodka/Gin/Tequila.

Not a diet for 2 months. A diet for life.

I found something that works for me. I got use to eat healthy food. Eating processed food now feels so wrong. About carbs: I have been avoiding carbs, but I will re-introduce some in the future (it was useful to avoid them at first to lose weight).

No calorie counting.

Nope.

Don't drink juice. Eat the fruit.

Not sure why. There are scientific reasons for that (google is your friend). But in my case, it was important for one reason: eating an apple takes time. It's not as easy as drinking half a litter of juice. I feel more satisfied after eating a pear than drinking some orange juice.

Learn how to cook.

It is very hard to eat some healthy food in restaurants. So I have to cook for myself. I do some cooking-sessions during the weekend and once a week. Cooking enough for 3 days.

After a while, I learned to be efficient.

I use my oven a lot (rosting is a good way to be efficient. See my reddit post).

For some reasons, my main problem was that my food was not tasty enough. I found some magic ingredients that work for almost everything: garlic, basilic, mint, coriander, nuts, coconut oil, curry, mushrooms, …

Shopping: I buy tons of vegetables when I go to the store. I don't think about the recipes.

I improvise new recipes. Experiment. Select what I like.

I posted a detailed post about what I cook on r/paleo.

The motivation comes after a couple of weeks.

Starting the diet was hard. But as soon as I started losing weight, I felt so much motivated that I just didn't stop. The 3 first kilos was such a success :)

Tracking my weight everyday.

This is controversial. Some will tell you that you should go on the scale twice a month. Didn't work for me. I needed to get motivated. And you know what is the most motivating thing ever? Seeing numbers on the scale you haven't seen in 10 years!

Over eating? Use chopsticks.

At first, I was eating too much. Too fast. I now use chopsticks when I can. This helps me to take my time.

Benefits

I look great;
I feel great;
I feel confident;
I know how to cook.

And I learned something important: I learned how to get motivated. I learned how to bet on long-term improvements. Start small. Find some gratifying things. Get the real boost.

Next step? Sport.

Now I feel like I control my body better, I want to do more. I started doing some martial arts (started with TaiChi - Chen style, considering doing some Viet Vo Dao this week).

Your turn?

CSS in Scratchpad (chrome-enabled)

2012-08-25T00:00:00-07:00

How to write CSS code in a chrome-enabled Scratchpad

For the Firefox developers around here, here is how to write some plain CSS code in a chrome-enabled scratchpad:

Pushover

2012-08-10T00:00:00-07:00

Pushover

I just discovered Pushover. This service does something very simple. It sends notifications to your phone (Android & iPhone). You can trigger a notification from the HTTP API.

It's pretty simple to send a notification from your shell:

curl -s \
  -F "token=APP_TOKEN" \
  -F "user=USER_KEY" \
  -F "message=hello world" \
  https://api.pushover.net/1/messages

I discovered this app yesterday. So I didn't really have the time to play much with it. But I already use it to get a notification from Google Calendar (I don't like SMS), from a shell script when I get a specific email (with a specific topic) and I also send a notification when Firefox finished to compile on my computer (I usually take a break when I have a long compilation going on, so I'm away from my computer).

Also, ifttt has a channel for Pushover. That opens a lot of possibilities :)

Just wanted to share. Do you know any other app that are in the same "spirit" (I know tasker too).

Firefox Terminal

2012-07-19T00:00:00-07:00

Firefox Terminal.

Firefox Terminal is an experimental restartless addon. It adds a "jsterm" button in the developer tools (Firefox 16+). The terminal behaves like a shell terminal (history, completion on tab, key bindings, …). It's a classic REPL environnement for JavaScript, CoffeeScript and LiveScript. It uses the builtin Firefox Source Editor to highlight JavaScript. It uses a Sandbox to eval JavaScript. And it comes with an Object Inspector.

For Firefox and Addons developers: like Scratchpad, this tool comes with a "chrome" mode (type ":chrome" to enable it).

Why? As you know, we already have similar tools in Firefox (Scratchpad and WebConsole). These tools cover some specific use cases. I'd like to explore alternative ways to cover these use cases (code exploration, prototyping, etc). Scratchpad is still much better for prototyping. For the REPL environnement, I think this terminal feels more "comfortable" than the Web Console (which comes with REPL + Logging, which limits the possibilities of the console).

Let me know what you think in the comments (and if you find bugs, please report them on github).

(switch the 480p for a better video quality)

Mass-unprefixing in Firefox 16

2012-07-09T00:00:00-07:00

CSS3 Animations, Transitions, Transforms and Gradients to be unprefixed in Firefox 16

In Firefox 16, we are unprefixing:

CSS3 Animations bug 762302
CSS3 Transitions bug 762303
CSS3 Transforms bug 745523
CSS3 Gradients bug 752187
IndexedDB bug 726378

calc() might be unprefixed as well (bug 771678).

CSS Transforms and IndexedDB unprefixed in Firefox

2012-07-04T00:00:00-07:00

Edit: we are unprexifing more properties: http://paulrouget.com/e/unprefixing-in-firefox-16/

CSS Transforms and IndexedDB unprefixed in Firefox.

"Good news everyone!"

We have unprefixed CSS transforms and and IndexedDB in Firefox Nightly (Firefox 16). -moz-transform becomes transform and window.mozIndexedDB becomes window.indexedDB.

Related bugs:

PS: -moz-tranform is still supported. But it will probably be removed. See bug 770560.

[fr] Atelier Vim, Paris, le 20 Juillet

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

Atelier Vim, Paris, le 20 Juillet

Drew Neil (@nelstrom) connu pour vimcast.org animera un atelier Vim à Paris le 20 Juillet (en anglais).

Il y a 2 sessions:

matin: http://paris-vimcasts-am-1.eventbrite.com/
après-midi: http://paris-vimcasts-pm-1.eventbrite.com/

Drew: My workshops last 3 hours, and they cover some of the most important features of Vim. I'll show you how to make Vim's modes work for you, rather than against you. We'll spend time studying Vim's most important feature: the dot command, which lets you repeat your last change. Once you've learned the secrets of the dot command, you'll be able to complete repetitive tasks effortlessly.

Drew est aussi l'auteur de "Practical Vim". Vu la qualité du bouquin, je ne saurais que trop recommender son atelier.

Plus d'infos ici.

hg log magic

2012-06-28T00:00:00-07:00

For mercurial users:

Know any other interesting hg tip? Leave a comment.

Servo, a browser engine research project

2012-06-27T00:00:00-07:00

To be very clear: Servo is a research project. It is not aimed to replace Gecko. It gives us the opportunity to experiment with new approaches, new patterns and new technologies, like Rust, another research project we are working on.

Servo, a browser engine research project

You know Gecko. It's the layout engine used by Firefox. While we are still working hard on adding new feature and improving gecko, we are also experimenting with a new engine: servo.

How is servo different from Gecko?

It's not written in C++. We are working on our own language, named Rust. C++ is not very suitable for things that need to be parallelized and safe at the same time. However, Rust has been designed for that.

Modularity. From the Servo Mailing list: We make heavy use of Git submodules for modularity--like WebKit, we want the pieces of Servo to be independently hackable.

A scalable rendering engine. Isolating the different operations of your browser is important for responsiveness. Rust comes with "lightweight threads" we call "Tasks". There are tasks for all the major operations: rendering, i/o, layers compositing, and for each page.

Networking operations are handled by libuv. A library that has been developed first for NodeJS.

How is servo similar to Gecko?

2D Graphics: for Gecko, we are working on a new graphic engine named Azure. Some parts are already present in Firefox. Azure abstracts the different ways to render 2D elements on the screen (Cairo, OpenGL, Skia, …). Easy then for us to switch between the right backend depending on the device (Android, osx, Windows, Linux, with or without a supported GPU, …)

JavaScript engine. We keep the same engine, SpiderMonkey.

More info

devtools hackaton tomorrow (or today), come!

2012-06-26T00:00:00-07:00

devtools hackaton tomorrow (or today), come! and help us to develop a bunch of commands

We are building a command line for Firefox. And we need as many commands as possible. So tomorrow (tuesday, June 26th), the Firefox developer tools team is holding a hackathon. Join us on IRC: irc.mozilla.org/#devtools and help us to build commands!

More details

Documentation

Concatenate images with HTML5 Canvas

2012-06-22T00:00:00-07:00

Concatenate images with HTML5 Canvas.

I often need to concatenate images into a single image. It's a simple operation, but I never found the right tool to do that. So I made one. It's very simple, read the code, you might learn some stuff:

In action: paulrouget.com/concatenator
Code (just one file): github.com/paulrouget/concatenator

Feel free to improve, fix bugs, add options…

JavaScript awesomeness: Set, Map, Default arguments,…

2012-06-19T00:00:00-07:00

JavaScript awesomeness: Set, Map, Default arguments,…

Firefox implements a lot of elements of ECMAScript 6 already. Let me show you a couple of these in action.

doc:

code:

Junior, Search Tabs & Presence

2012-06-18T00:00:00-07:00

Product Design at Mozilla: new projects from the design team (video)

Video URL: http://cf.cdn.vid.ly/5w5w0h/webm.webm

From: air.mozilla.org.

Junior — an iPad browser that makes browsing more fun, more ergonomic and re-thinks browser user experience from the ground up.

Search Tabs — taking search to the next level, restoring real search engine choice and expanding the search market.

Presence — talk to people, share links, and stay in touch with your friends directly from the browser.

Video timestamps (estimated):

2:04 - Google Chrome, iOS, Android as Mozilla disruptors

2:44 - Why would you choose Firefox over Chrome?

4:14 - Firefox UI recap: Australis, 80/20/2 rule

8:28 - Product design learning experiences

13:27 - Search Tabs (24:36 will it ship?)

25:24 - Presence

30:32 - Junior + Junior Q&A

51:51 - Fire alarm goes off

toc shamelessly stolen from Reddit (thanks isaacaggrey).

Voyager 1

2012-06-16T00:00:00-07:00

Voyager 1

Voyager 1 (the farthest man-made object) left earth 35 years ago. Its current speed is 22km/s (80.000km/h). It takes 16 hours to send a message from Voyager to earth, and in the meantime, it will travel 1 million kilometers.

Voyager 1 is apparently entering a zone where the Sun doesn't have much influence anymore. "humanity's first emissary to interstellar space is on the edge of our solar system".

Soon, the interstellar space!

s/linux/osx/

2012-06-14T00:00:00-07:00

s/linux/osx/

I am a Linux user. I use Archlinux. I am now moving to osx for a little while. I know I can't stand another OS for too long (usually, it lasts ~3 months), so I might move back to Linux after the summer.

Why? Well, first because I like to taste new things. But also because I don't feel "confortable" on Linux anymore. I very much dislike Gnome 3 for a looooot of reasons (ugly, difficult to customize, not stable, …). Unity is not better (can't customize, compiz is not stable). The Gnome 2 forks (like cinnamon) are barely working (or you need to use a specific distro like Linux Mint). I have used Xfce and Lxde for a while… but they are not as good as Gnome 2.

I can't fucking believe that my Linux experience was better 3 years ago… Things go backward. Well, the Desktop experience. The hardware support is just perfect on my macbook air.

B2G demo & quick hack

2012-06-11T00:00:00-07:00

Very very quick demo of B2G followed by a quick hack of the homescreen:

Youtube video.

You can find the code of the UI of B2g (gaia) on github. Reminder:

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.

WebAPIs demo

2012-06-04T00:00:00-07:00

WebAPIs demo

Quick demo of the WebAPIs. These APIs expose specific features of your phone to the web content. For example, the proximity sensors, accelerometers, vibrators, … See our wiki for a list of the APIs and more details about how we plan to standardize these.

Youtube video.

This is just an experiment. Trying to understand how we could fill the gap between Web apps and Native Apps. As you can imagine, this will be very useful for B2G.

You can find more information about WebAPIs on our wiki and on the mozhacks blog:

You can find the code of the demo here.

getUserMedia

2012-06-02T00:00:00-07:00

As announced earlier, we (mozilla) are working actively on the WebRTC spec. Part of this spec introduces getUserMedia that gives you access to the webcam. Little demo:

Video on youtube.

This is not in Firefox Nightly yet. Work in progress. Of course, what you don't see here is the security mechanism that will prevent any website to use your webcam.

Responsive Mode and Layout View in Firefox 15

2012-06-01T00:00:00-07:00

Responsive Mode and Layout View in Firefox 15

I just landed these 2 tools. They should be available in Firefox 15 (and in Firefox Nightly this weekend).

update: They are in Firefox Nightly now.

Responsive Mode, accessible from the Web Developer menu:

Youtube video

Layout View, it lets you visualize the size of an element. Start the inspector (Web Developer menu) and click on the Style button:

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 Telefonica:

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.