Mounir Lamouri's Bloghttps://mounir.lamouri.fr/2013-05-22T18:15:00+02:00The Web Manifest2013-05-22T18:15:00+02:002013-05-22T18:15:00+02:00Mounir Lamouritag:mounir.lamouri.fr,2013-05-22:/2013/05/the-web-manifest.html<h2>Some history</h2>
<p>Mozilla has been trying to push for quite some time a manifest format for web
applications <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> after <a href="http://www.w3.org/TR/widgets/">Opera's Widgets</a> lack of
traction. The original scope of that work covered installed web applications -
such as hosted web applications and packaged applications. The main difference with
Widgets being the …</p><h2>Some history</h2>
<p>Mozilla has been trying to push for quite some time a manifest format for web
applications <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> after <a href="http://www.w3.org/TR/widgets/">Opera's Widgets</a> lack of
traction. The original scope of that work covered installed web applications -
such as hosted web applications and packaged applications. The main difference with
Widgets being the hosted web applications support and the manifest format - JSON
instead of the infamous XML.</p>
<p>More recently, the manifest format specification has moved to the <a href="http://www.w3.org/2012/sysapps/">SysApps
working group</a> as part of the <a href="http://www.w3.org/2012/sysapps/runtime/">runtime
specification</a> and later on as a
<a href="http://www.w3.org/2012/sysapps/manifest/">specification of its own</a>.
As of today, the "Manifest for Web Applications" specification should move back
to the WebApps working group <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup>.</p>
<p>Fun fact: Marcos Caceres was the editor of Widgets. He is now the editor of the
new manifest specification.</p>
<h2>Migrating to WebApps</h2>
<p>Moving this specification from the SysApps to the WebApps working group goes
further than simple administrative overhead or patent policy. Mozilla, as one of
the key players behind this work, wants to increase the scope of the manifest.
SysApps is a group that has been created to specify APIs which are mostly outside
of the browser scope in order to make the Web Platform able to compete with
other platforms. Because of that, it is very likely that work produced by
SysApps will be seen as not in scope for the browser even if that doesn't have
to be the case.</p>
<p>However, we believe that the manifest format doesn't have to be bound to
installed applications, and we have a window of opportunity with hosted web
applications to make that happen.</p>
<h2>Hosted web applications</h2>
<p>Hosted web applications are web sites whose manifest provides metadata to help
the runtime install them. For example, making twitter.com installable would be
as easy as hosting a manifest at the twitter.com domain containing metadata
information such as the application name and icons.<br>
A simplified twitter.com manifest would look like this:</p>
<div class="highlight"><pre><span></span><code>{
<span class="s2">"</span><span class="s">version</span><span class="s2">"</span>: <span class="s2">"</span><span class="s">1.0</span><span class="s2">"</span>,
<span class="s2">"</span><span class="s">name</span><span class="s2">"</span>: <span class="s2">"</span><span class="s">Twitter</span><span class="s2">"</span>,
<span class="s2">"</span><span class="s">description</span><span class="s2">"</span>: <span class="s2">"</span><span class="s">Twitter for mobile</span><span class="s2">"</span>,
<span class="s2">"</span><span class="s">developer</span><span class="s2">"</span>: {
<span class="s2">"</span><span class="s">name</span><span class="s2">"</span>: <span class="s2">"</span><span class="s">Twitter</span><span class="s2">"</span>,
<span class="s2">"</span><span class="s">url</span><span class="s2">"</span>: <span class="s2">"</span><span class="s">http://twitter.com</span><span class="s2">"</span>
},
<span class="s2">"</span><span class="s">icons</span><span class="s2">"</span>: {
<span class="s2">"</span><span class="s">30</span><span class="s2">"</span>:<span class="s2">"</span><span class="s">/images/larrybird-30.png</span><span class="s2">"</span>,
<span class="s2">"</span><span class="s">60</span><span class="s2">"</span>:<span class="s2">"</span><span class="s">/images/larrybird-60.png</span><span class="s2">"</span>,
<span class="s2">"</span><span class="s">128</span><span class="s2">"</span>:<span class="s2">"</span><span class="s">/images/larrybird-128.png</span><span class="s2">"</span>
}
}
</code></pre></div>
<p><small>This actually is the real manifest, stripped of localisation information.</small></p>
<p>In other words, hosted web applications are simply web applications
that have the ability to be installed by a runtime. And any web site with a
manifest can be given this ability.</p>
<p>This is probably one of the major features of the runtime proposed by Mozilla in
comparison to the W3C's Widgets standard: hosted web applications are pushing
the Web as an application platform. Unfortunately, an outstanding issue we have
encountered is that the Web Platform has pretty bad offline support <sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup> and
fixing this is a priority to make the Web Platform competitive. This said, there
are already a couple of proposals around <sup id="fnref:4"><a class="footnote-ref" href="#fn:4">4</a></sup>.</p>
<h2>The missing keystone</h2>
<p>Hosted web applications allow any web site to make itself installable by a
runtime, but there is still a major lack that needs to be addressed to make the
manifest a key part of the Web Platform: for the moment, those manifests are not
discoverable. Which means that there is no way for a service such as a search
engine to search installable web applications. There is also no reliable way
for a <abbr title='User Agent'>UA</abbr> to "bookmark to homescreen" or "install
as an application" a website without doing some wild guesses. Both IE and iOS
had to create proprietary extensions to make that reliable.</p>
<p>The main reason why we are moving the manifest specification from SysApps to
WebApps is to make the manifest go beyond packaged or hosted web applications,
and have it available to any web site.</p>
<p>First of all, allowing web pages to declare a manifest should solve the problems
mentioned above: the manifests would be discoverable and HTML consumers (eg. UAs
or web crawlers) could take advantage of this information.</p>
<p>Secondly, a probably more controversial benefit is that some declarative
information that doesn't really fit into CSS or HTML could go into this
manifest. For example, we have already seen that a few icons can be specified
in it. There also is the ability for a web site to request to be viewed
fullscreen or be in a specific orientation (could be useful for games). A year
ago, the Web Intents specification tried to find out how to enable
discoverability of Intents handling: using an <intent> element has been
considered a good solution given the other alternatives. Plugging this into the
manifest would very likely have been a good solution for that use case.</p>
<h2>Technical details</h2>
<p>For the moment, we believe that web pages could link to a manifest the same way
they currently link to the appcache manifest, by simply setting its URL in an
attribute in the HTML element, like:</p>
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span> <span class="na">foo</span><span class="o">=</span><span class="s">'manifest.webapp'</span><span class="p">></span>
<span class="c"><!-- ... --></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
</code></pre></div>
<p>However, this decision hasn't really been made yet and it is <a href="https://github.com/w3c/manifest/issues/17">open for
discussion</a>. We still don't know if
we would like to try to use the <em>manifest</em> attribute and break
retro-compatibility for UA that do not support the new format. For others, JSON
vs AppCache manifest format should be enough to do the right thing.<br>
Otherwise, we can use another name like <em>appmanifest</em> but it might send the
wrong message.</p>
<p>An alternative approach would be to use a <meta> or <link> element.
This approach might be the safest given that the <em>manifest</em> namespace is
probably free, so it would be possible to have retro-compatibility with the
appcache manifest. However, there will still be some pending questions like the
behaviour of changing the URL of the manifest while the page is loaded.</p>
<p>Finally, the last technical question is about the scope of the manifest. Should
the manifest apply to every web page under the same origin? Should it only apply
to web pages that link to it? Given that we want to allow multiple hosted web
applications per origin I guess the best way to handle that would be to ask the
developers to link every page to the manifest they expect to be used.</p>
<h2>Feedback</h2>
<p>Getting feedback from web developers on all of this would be very valuable. If
you read until here and are interested in this, you should read the <a href="http://www.w3.org/2012/sysapps/manifest/">manifest
specification</a> and look at the <a href="https://github.com/w3c/manifest">GitHub
repository</a>. Feel free to <a href="https://github.com/w3c/manifest/issues/new">open a GitHub issue</a> or send an email to the <a href="http://lists.w3.org/Archives/Public/public-webapps/">webbapps mailing-list</a>.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>One of the first iterations being <a href="http://mozilla.github.io/webapps-spec/">http://mozilla.github.io/webapps-spec/</a>. <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<li id="fn:2">
<p>See: <a href="http://lists.w3.org/Archives/Public/public-sysapps/2013May/0122.html">http://lists.w3.org/Archives/Public/public-sysapps/2013May/0122.html</a> and <a href="http://lists.w3.org/Archives/Public/public-webapps/2013AprJun/0641.html">http://lists.w3.org/Archives/Public/public-webapps/2013AprJun/0641.html</a>. <a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">↩</a></p>
</li>
<li id="fn:3">
<p><a href="http://alistapart.com/article/application-cache-is-a-douchebag">http://alistapart.com/article/application-cache-is-a-douchebag</a> <a class="footnote-backref" href="#fnref:3" title="Jump back to footnote 3 in the text">↩</a></p>
</li>
<li id="fn:4">
<p>A solution mostly pushed by Google is to use a <a href="https://github.com/slightlyoff/NavigationController">NavigationController</a>. Another solution mostly pushed by Mozilla
is to create a <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JanMar/0977.html">new appcache format</a>. <a class="footnote-backref" href="#fnref:4" title="Jump back to footnote 4 in the text">↩</a></p>
</li>
</ol>
</div>The HTML progress element in Firefox2011-07-06T13:37:00+02:002011-07-06T13:37:00+02:00Mounir Lamouritag:mounir.lamouri.fr,2011-07-06:/2011/07/the-html-progress-element-in-firefox.html<p>First of all, the progress element is going to be available with the
next version of Firefox and is already available in the Beta, Aurora and
Nightly <a href="https://www.mozilla.com/firefox/channel/">channels</a>.</p>
<p>Progress element: </p>
<progress value="0.75"><small>*Your browser does not support the
progress element!*</small></progress>
<p>Indeterminate progress element: </p>
<progress><small>*Your browser does not support the progress
element!*</small></progress>
<p>According …</p><p>First of all, the progress element is going to be available with the
next version of Firefox and is already available in the Beta, Aurora and
Nightly <a href="https://www.mozilla.com/firefox/channel/">channels</a>.</p>
<p>Progress element: </p>
<progress value="0.75"><small>*Your browser does not support the
progress element!*</small></progress>
<p>Indeterminate progress element: </p>
<progress><small>*Your browser does not support the progress
element!*</small></progress>
<p>According to the specifications, and as you might imagine, <q>"the
progress element represents the completion progress of a
task"</q> <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>. To specify this completion, you can set two
attributes: <em>value</em> and <em>max</em>. Note that <em>max</em> will be considered as
<em>1.0</em> when not specified. In addition, the progress element can be
indeterminate to represent that something is happening but you can't
evaluate the progress. To put the progress element in this state, you
have to remove the <em>value</em> attribute. </p>
<div class="highlight"><pre><span></span><code><span class="c"><!--</span>
<span class="c"> 1. Progress element at full capacity.</span>
<span class="c"> 2. Progress element at half capacity.</span>
<span class="c"> 3. Progress element at zero capacity.</span>
<span class="c"> 4. Indeterminate progress element.</span>
<span class="c">--></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">'1'</span><span class="nt">></progress></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">'50'</span> <span class="na">max=</span><span class="s">'100'</span><span class="nt">></progress></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">'0'</span><span class="nt">></progress></span>
<span class="nt"><progress></progress></span>
</code></pre></div>
<p>In this article, I'm going to do an overview of this new element. If you
want an exhaustive documentation, you should have a look at the
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">specifications</a>
or the <a href="https://developer.mozilla.org/en/HTML/element/progress">Mozilla Developer Network documentation</a>.</p>
<h2>Native rendering</h2>
<p>Using the new form widgets for authors make their life easier, their
code less complex and improve the semantic of their pages. But this also
improve user experience and this mostly comes with the native rendering
of those widgets.<br>
Native rendering means when you will see a progress element on a
website, except if the author ask otherwise, you will see a progress
element exactly like one in a native application. That means, on MacOS
X, you will see a blue bar on a grey background. On Windows Vista and 7,
you will see a green bar with an animation. On Windows XP, you will see
a green bar with chunks and on Linux/GTK, it will depends on your
theme.<br>
For the later, given that we are using your GTK engine/theme, if it is
bugged, you might see mis-rendered progress elements. It's very unlikely
<sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup> unless you are using obscure engine but that means that it's
preferred to test with another engine/theme if the rendering seems buggy
with GTK. It is sad that we have to deal with that kind of issues but
that is the price to pay to have a native rendering. It might actually
explain why no other browser seems to have a native rendering on
Linux/GTK.</p>
<p>It goes without saying that, as usual, you can disable the native
rendering with <em>-moz-appearance: none;</em> or by setting <em>border</em> or
<em>background</em> CSS properties.</p>
<div class="highlight"><pre><span></span><code><span class="c"><!--</span>
<span class="c"> Native and non-native progress elements.</span>
<span class="c">--></span>
<span class="nt"><progress></progress></span>
<span class="nt"><progress</span> <span class="na">style=</span><span class="s">"-moz-appearance: none;"</span><span class="nt">></progress></span>
</code></pre></div>
<h2>How to style it?</h2>
<p>Styling is one of the biggest unresolved issues of new form widgets. The
progress element is quite simple but there are no specifications
explaining how authors should style it so every browsers have their own
ways.</p>
<h3>::-moz-progress-bar pseudo-element</h3>
<p>Basically, the progress element is two div's. You can access to the
outer div by styling <em>progress</em> and to the inner one with
<em>::-moz-progress-bar</em> pseudo-element. However, even if you can style it
as much as you might expect, you will not be able to change the width
unless the progress element is indeterminate; the reasons are obvious. </p>
<div class="highlight"><pre><span></span><code><span class="o"><</span><span class="s s-Atom">style</span><span class="o">></span>
<span class="s s-Atom">progress</span> <span class="p">{</span> <span class="s s-Atom">background</span><span class="o">-</span><span class="nn">color</span><span class="p">:</span> <span class="s s-Atom">red</span><span class="p">;</span> <span class="nn">border</span><span class="p">:</span> <span class="mi">1</span><span class="s s-Atom">px</span> <span class="s s-Atom">solid</span> <span class="s s-Atom">black</span><span class="p">;</span> <span class="p">}</span>
<span class="nn">progress</span><span class="p">::-</span><span class="s s-Atom">moz</span><span class="o">-</span><span class="s s-Atom">progress</span><span class="o">-</span><span class="s s-Atom">bar</span> <span class="p">{</span> <span class="s s-Atom">background</span><span class="o">-</span><span class="nn">color</span><span class="p">:</span> <span class="s s-Atom">blue</span><span class="p">;</span> <span class="p">}</span>
<span class="s s-Atom"></style</span><span class="o">></span>
<span class="o"><</span><span class="s s-Atom">progress</span> <span class="s s-Atom">value='0.5'></progress</span><span class="o">></span>
</code></pre></div>
<p>It's interesting to see that Webkit has two pseudo-elements instead of
one <sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup> but I do not see which use case this is solving that a
combination of <em>padding</em>, <em>border</em> and <em>background</em> wouldn't solve.<br>
Unfortunately, I did not find any documentation about styling this
element with Opera/Presto.</p>
<h3>:indeterminate pseudo-class</h3>
<p>As said in the introductory paragraph, progress elements can be
indeterminate. It happens that there is already an <em>:indeterminate</em>
pseudo-class for checkboxes so we thought it would be a good idea to
allow you to select indeterminate progress elements in that state with
this pseudo-class. We did request to add this to the specifications, it
has been accepted and Webkit implemented it a few days ago.</p>
<div class="highlight"><pre><span></span><code><span class="o"><</span><span class="s s-Atom">style</span><span class="o">></span>
<span class="nn">progress</span><span class="p">:</span><span class="s s-Atom">indeterminate</span> <span class="p">{</span>
<span class="s s-Atom">background</span><span class="o">-</span><span class="nn">color</span><span class="p">:</span> <span class="s s-Atom">red</span><span class="p">;</span> <span class="nn">border</span><span class="p">:</span> <span class="mi">1</span><span class="s s-Atom">px</span> <span class="s s-Atom">solid</span> <span class="s s-Atom">black</span><span class="p">;</span>
<span class="p">}</span>
<span class="nn">progress</span><span class="p">:</span><span class="nn">indeterminate</span><span class="p">::-</span><span class="s s-Atom">moz</span><span class="o">-</span><span class="s s-Atom">progress</span><span class="o">-</span><span class="s s-Atom">bar</span> <span class="p">{</span>
<span class="s s-Atom">background</span><span class="o">-</span><span class="nn">color</span><span class="p">:</span> <span class="s s-Atom">white</span><span class="p">;</span>
<span class="p">}</span>
<span class="s s-Atom"></style</span><span class="o">></span>
<span class="o"><</span><span class="s s-Atom">progress></progress</span><span class="o">></span>
</code></pre></div>
<h2>Vertical progress bars</h2>
<p>A few form widgets can be vertical <sup id="fnref:4"><a class="footnote-ref" href="#fn:4">4</a></sup>. Currently, the HTML
specifications say that as soon as the dimension of the widget are
vertical, the element should be shown as vertical. For a progress bar,
that means that the bar should go from bottom to top instead of left to
right (or right to left). Such a system would have required to add a
<em>:vertical</em> pseudo-class but unfortunately, for complex reasons
<sup id="fnref:5"><a class="footnote-ref" href="#fn:5">5</a></sup>, it happened to be hardly implementable. So, we came with
another system: if you want to request a form widget to be shown as
vertical, you can set the <em>-moz-orient</em> CSS property to <em>vertical</em>.
Then, the element will be rendered as requested even if the dimensions
are not appropriate. Note that if you don't specify a size to the
progress element and asks it to be vertical, the default dimensions will
be vertical. Note also that you can use <em>horizontal</em> keyword as well as
<em>vertical</em>. </p>
<div class="highlight"><pre><span></span><code><span class="nt"><style></span>
progress { -moz-orient: vertical; }
<span class="nt"></style></span>
<span class="c"><!--</span>
<span class="c"> 1. Vertical progress element.</span>
<span class="c"> 2. Vertical progress element with horizontal dimensions.</span>
<span class="c"> 3. Horizontal progress element.</span>
<span class="c">--></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">'0.5'</span><span class="nt">></progress></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">'0.5'</span> <span class="na">style=</span><span class="s">"height: 1em; width: 10em;"</span><span class="nt">></progress></span>
<span class="nt"><progress</span> <span class="na">value=</span><span class="s">'0.5'</span> <span class="na">style=</span><span class="s">"-moz-orient: horizontal;"</span><span class="nt">></progress></span>
</code></pre></div>
<p>DISCLAIMER: the way we allow vertical progress bar is far from being
stable (in the sens that it might change) and the current specifications
are not even close to our implementation.</p>
<h2>Feedback</h2>
<p>Feedback is always welcome and can have a real impact at this state so
if you think something should be done differently, <a href="mailto:%6d%6c%61%6d%6f%75%72%69%20%28%61%74%29%20%6d%6f%7a%69%6c%6c%61%2e%63%6f%6d">send me an email</a>.
If you see a bug, feel free to <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=DOM%3A%20Core%20%26%20HTML">report it</a>.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element</a> <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<li id="fn:2">
<p>It's the case for at least the Equinox engine: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=657144">bug 657144</a> <a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">↩</a></p>
</li>
<li id="fn:3">
<p><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls">http://trac.webkit.org/wiki/Styling Form Controls</a> <a class="footnote-backref" href="#fnref:3" title="Jump back to footnote 3 in the text">↩</a></p>
</li>
<li id="fn:4">
<p><em>meter</em>, <em>progress</em> and <input type='range'> if I recall correctly. <a class="footnote-backref" href="#fnref:4" title="Jump back to footnote 4 in the text">↩</a></p>
</li>
<li id="fn:5">
<p>See the thread in www-style mailing list: <a href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0386.html">http://lists.w3.org/Archives/Public/www-style/2011Apr/0386.html</a> <a class="footnote-backref" href="#fnref:5" title="Jump back to footnote 5 in the text">↩</a></p>
</li>
</ol>
</div>Mozilla Tech Tour in Dakar2011-05-26T15:11:00+02:002011-05-26T15:11:00+02:00Mounir Lamouritag:mounir.lamouri.fr,2011-05-26:/2011/05/mozilla-tech-tour-in-dakar.html<p>During the last week of April, I was part of a team from Mozilla that
was in Dakar for a Mozilla Tech Tour of a few universities. The team was
composed of Claire Corgnou, the volunteer behind <a href="http://bonjourmozilla.fr/">Bonjour Mozilla</a>,
Vivien Nicolas, who works on Firefox Mobile front-end, <a href="http://hanblog.info">Anthony
Ricaud</a>, web …</p><p>During the last week of April, I was part of a team from Mozilla that
was in Dakar for a Mozilla Tech Tour of a few universities. The team was
composed of Claire Corgnou, the volunteer behind <a href="http://bonjourmozilla.fr/">Bonjour Mozilla</a>,
Vivien Nicolas, who works on Firefox Mobile front-end, <a href="http://hanblog.info">Anthony
Ricaud</a>, web developer on mozilla.com and <a href="http://somethin-else.org/">William Quiviger</a>, who
works for the User Engagement team.</p>
<p>For the week that we were in Dakar, we gave speeches in universities
about Mozilla, who we are, what we stand for and how to contribute.
Claire, as a member of <a href="http://womoz.org">WoMoz</a>, gave a talk about the project. We also
conducted two technical workshops: one about HTML5/CSS3 and one about
the Add-on SDK. During these speeches and workshops, we had the chance
to meet students from Epitech Senegal,
<acronym title="École supérieure de technologie et de management de dakar">ESTM</acronym>,
<acronym title="École supérieure multinationale de télécommunication">ESMT</acronym>
and
<acronym title="Institut supérieur d'informatique">ISI</acronym>.</p>
<h2>Our Mission</h2>
<p>If we went to Dakar it's mostly thanks to <a href="https://twitter.com/mmkmou">Mouhamadou Moustapha
Camara</a> who put a lot of energy to have us come. When we arrived, he
had planned everything, he was accompanying us everywhere and was doing
his best to make sure everything went smoothly. But we should also thank
William who really wants Mozilla to strengthen its community in Africa.
Actually, Senegal is a very good place to begin with <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>: it is
the leading country of West Africa in term of new technologies.</p>
<p>Our goal was to strengthen the Mozilla community in Senegal. For what we
saw, in universities, student are really aware of FLOSS and the
exceptional power it could have in Africa. They were really open-minded
and had a real thirst for knowledge. However, even if they have a full
access to information, the conditions in Dakar are really different from
the ones we are used to. In Dakar, the power is very unstable and you
can spend hours without power <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup>, the Internet connection isn't
really fast even if it's one of the best of the region. These are two
concrete issues and might be fixed soon.<br>
Another issue is cultural and might take longer to fix. For what we saw
students' English is very often weak and most of them had a hard time
reading the Add-on SDK documentation. This is unfortunate because most
of the technical documentation is in English. This is also a reminder
that part of Mozilla's mission is to promote the free flow of ideas and
information on the Internet and that implies localizing the information.
So, we should translate the documentation of the Add-on SDK.</p>
<p>From now on, Camara is going to lead the Mozilla Senegal community. That
means bringing people together who share Mozilla's vision and having
them work together on different projects. In Senegal, people mostly
speak French and <a href="https://secure.wikimedia.org/wikipedia/en/wiki/Wolof_language">Wolof</a> and one project that seems to create a lot of
excitement is to translate Firefox to Wolof. That would be amazing to
have this done.</p>
<h2>The Add-on SDK workshop</h2>
<p>Vivien and I led a few Add-on SDK workshops. It probably was as
instructive for us as for the students. First of all none of us was an
Add-on SDK hacker before and we only chose to show this because it's a
very good first technical step into the Mozilla technologies. In
addition, it helped us to find some issues with how the Add-on SDK
currently works. Vivien has to write a blog post about this but, in a
nutshell, most students where using Windows and the Add-on SDK requires
Python which is a pain to install in a Windows environment. The user is
also required to use the command line and Windows users are usually not
used to it. During the workshops we gave a quick course of Javascript
then, we tried to show how to write a very simple extension. If time
permitted, the students were able to write their own extensions and we
tried to help them.<br>
As I mentioned above, the idea behind showing how the Add-on SDK works
was to help the students do the first step into the Mozilla
technologies. One of our constraints was that the attendees were from
freshmen to senior students and digging into mozilla-central code base
or classic extensions might have been a bit frightening for the
youngest. Being able to have a working extension made by themselves was
also one of the goals: a lesson is much more motivating if you are able
to produce something at the end of the day. Our hope was to motivate a
few of them to write their own extensions after the workshop; and we
know a few of them did.</p>
<p>I wrote two extensions for these workshops. The first of them is a
simple URL shortener extension using TinyURL and is available <a href="https://gitorious.org/url-shortener/url-shortener">here</a>.
I like this extension because it contains around 15 lines, it does
something really useful, uses three different modules and is simple
enough to understand it while reading it.<br>
The second extension is probably less simple if you don't have enough
HTML/CSS knowledge: it's an extension that allows the user to edit an
image in a web page. I actually wrote it quickly (so it's not finished,
patches accepted) while I thought I would not have an Internet
connection to present the first extension. I should actually improve it
a bit to be able to use Firefox as an image viewer/editing tool. It is
available <a href="https://gitorious.org/image-editor/image-editor">here</a>.</p>
<h2>Conclusion</h2>
<p>The Tech Tour was concluded by an afternoon at the <a href="http://www.auf.org/">AUF</a> who hosted a
workshop, an install party and a few talks. The same evening we had an
amazing Firefox 4 release party.<br>
The day before leaving, we met the authorities in a meeting organized by
<a href="http://jokkolabs.net/">Jokkolabs</a>. During this meeting, we talked about how the open source
and hybrid companies like Mozilla can be an economical model that might
fit Senegal's needs, and more generally, African's ones. You can't
completely change the mind of anyone in a couple of hours but I hope
that, at our scale, we have been able to help them understand there are
alternatives and these alternatives might be better for everyone.</p>
<p>Finally, I believe that what we did during this week is exactly what the
Mozilla Manifesto is about and I really hope we will be able to do it
again in the future!</p>
<p>You can found pictures of the Tech Tour on Flickr: <a href="http://www.flickr.com/groups/mozillasn/">http://www.flickr.com/groups/mozillasn/</a></p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>It's not exactly the first Mozilla tour in Africa but one of the first. <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<li id="fn:2">
<p>This actually leads to an intolerable contrast between rich citizens who
can afford a generator and others who can't. <a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">↩</a></p>
</li>
</ol>
</div>Improving HTML5 Forms' user experience with :-moz-ui-invalid and :-moz-ui-valid pseudo-classes2011-05-08T21:00:00+02:002011-05-08T21:00:00+02:00Mounir Lamouritag:mounir.lamouri.fr,2011-05-08:/2011/05/improving-html5-forms-user-experience-with-moz-ui-invalid-and-moz-ui-valid-pseudo-classes.html<p>As you might have noticed, with Firefox 4, we have introduced the form
validation in the browser. You can have more information about what that
means in a <a href="../../2010/11/html5-forms-validation-in-firefox-4.html">previous blog post</a>. Because of the validation made by the
browser, we needed to have a feedback to show users that a …</p><p>As you might have noticed, with Firefox 4, we have introduced the form
validation in the browser. You can have more information about what that
means in a <a href="../../2010/11/html5-forms-validation-in-firefox-4.html">previous blog post</a>. Because of the validation made by the
browser, we needed to have a feedback to show users that a form element
is currently invalid thus preventing users trying to submit a form while
it contains errors.</p>
<h2>I'm not a technical person, what should I remember?</h2>
<p>At Mozilla, we want your experience with forms to be much better.
Currently, the tools available to web authors are not powerful enough to
do a good <acronym title="User Interface">UI</acronym> with
simple code. If the tools are not good, we are going to see bad form
UI's. Because forms are very important in your life on the web, we chose
to create two tools to help web authors make your web experience better.
If these tools are appreciated by web authors and accepted by other
browser vendors, they might be integrated into the HTML specifications
and be widely used.</p>
<h2>Why these new pseudo-classes?</h2>
<p>CSS3 specification comes with two pseudo-classes named :invalid and
:valid which respectively match invalid and valid form elements in the
document. During Firefox 4 beta process, we have introduced a default
style to :invalid pseudo-class adding a red glow to all invalid form
elements. Unfortunately, this was very bad for
<acronym title="User eXperience">UX</acronym>. The most obvious
issue is that we were showing required element with a red glow as soon
as the page was loaded thus moving user attention to them. Going from
this issue, we thought it would be better to create two pseudo-classes
with some UX rules. The goal was to provide a simple way for authors to
style invalid and valid elements while following UX rules. These
pseudo-classes are named :-moz-ui-invalid and :-moz-ui-valid. And
:invalid no longer has a default style on Firefox 4 but :-moz-ui-invalid
has one instead.</p>
<h2>When are they applied?</h2>
<p>To follow these rules, we had a look at <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/">this interesting article</a> by
<a href="http://www.alistapart.com/authors/w/lwroblewski">Luke Wroblewski</a>.
Then I've been working with <a href="http://limi.net/">Alexander Limi</a>,
<a href="https://twitter.com/sickingJ/">Jonas Sicking</a>,
<a href="http://tantek.com/">Tantek Çelik</a> and <a href="https://blog.mozilla.com/dolske/">Justin Dolske</a> and we have
decided to focus on two issues: element being invalid when the page is
loaded (the user attention is uselessly focused on those elements) and
validity status being changed while you are typing (the user is
distracted by the UI changes).</p>
<p>The former issue has been fixed with a simple rule: as long as the
element's value hasn't been changed by the user, both pseudo-classes
can't apply. Though, if the user tries to submit the form in an invalid
state, the pseudo-classes will apply even if the value hasn't been
changed. This is to make it clear for the user which elements are
currently invalid and need to be fixed.<br>
For the later issue, we do not want to distract the users while typing.
So, when an element is focused as valid, if it was matching
:-moz-ui-valid it will match it until the element is blurred even if the
element becomes invalid. Though, to help the user make an element valid,
if, when focused, an element is matching :-moz-ui-invalid, it will match
:-moz-ui-valid or :-moz-ui-invalid depending of the validity while
typing. In other words, we want to help the user to fix an invalid
element but do not want to distract him while interacting with a valid
one. For example, when you have to enter an email address, you will have
to type "<em>username</em>" which isn't a valid email address but you
actually wanted to type "<em>username@domain.com</em>" and this is a valid
email address.</p>
<style>
.test-val { margin: 5px; }
.test-val:-moz-ui-valid { box-shadow: 0 0 1.5px 1px green; }
.test-val:-moz-ui-invalid { box-shadow: 0 0 1.5px 1px red; }
</style>
<div>
You can try it on the following text field. A green glow is when
:-moz-ui-valid applies and a red one is when :-moz-ui-invalid applies.
The text field is required and expect a valid email address. Firefox 4
is required.
<form onsubmit="return false;">
<input class="test-val" type="email" required></input><input type="submit" value="Submit"></input>
</form>
<br>
</div>
<p>Follows a deeper explanation of the algorithm for those who want to know
the details. For more information, it's better to dig into <a href="https://hg.mozilla.org/mozilla-central/">the code</a>.</p>
<p>To match :-moz-ui-invalid, all of the following conditions have to be
true:</p>
<ol>
<li>The element is invalid;</li>
<li>The element is not focused, or had either :-moz-ui-invalid applying
before it was focused;</li>
<li>The element has no form owner or its form owner doesn't have the
novalidate attribute set;</li>
<li>The element has already been modified or the user tried to submit
the form owner while invalid.</li>
</ol>
<p>There is one exception: if the element is invalid because of a custom
error, the only conditions that have to be fulfilled in the condition
number 3.</p>
<p>To match :-moz-ui-valid, all of the following conditions have to be
true:</p>
<ol>
<li>The element is either valid or isn't allowed to have
:-moz-ui-invalid applying;</li>
<li>The element is not focused, or had either :-moz-ui-valid or
:-moz-ui-invalid applying before it was focused;</li>
<li>The element has no form owner or its form owner doesn't have the
novalidate attribute set;</li>
<li>The element has already been modified or the user tried to submit
the form owner while invalid.</li>
</ol>
<p>You can also have a look at the Mozilla Developer Network documentation:
<a href="https://developer.mozilla.org/en/CSS/%3A-moz-ui-invalid">:-moz-ui-invalid</a>
and <a href="https://developer.mozilla.org/en/CSS/%3A-moz-ui-valid">:-moz-ui-valid</a>.</p>
<h2>Examples</h2>
<p>You can simply show a red glow when the element is invalid and a green
one when it is valid:</p>
<div class="highlight"><pre><span></span><code><span class="p">:-</span><span class="s s-Atom">moz</span><span class="o">-</span><span class="s s-Atom">ui</span><span class="o">-</span><span class="s s-Atom">invalid</span> <span class="p">{</span>
<span class="s s-Atom">box</span><span class="o">-</span><span class="nn">shadow</span><span class="p">:</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mf">1.5</span><span class="s s-Atom">px</span> <span class="mi">1</span><span class="s s-Atom">px</span> <span class="s s-Atom">red</span><span class="p">;</span>
<span class="cm">/* This is actually the default Firefox style. */</span>
<span class="p">}</span>
<span class="p">:-</span><span class="s s-Atom">moz</span><span class="o">-</span><span class="s s-Atom">ui</span><span class="o">-</span><span class="s s-Atom">valid</span> <span class="p">{</span>
<span class="s s-Atom">box</span><span class="o">-</span><span class="nn">shadow</span><span class="p">:</span> <span class="mi">0</span> <span class="mi">0</span> <span class="mf">1.5</span><span class="s s-Atom">px</span> <span class="mi">1</span><span class="s s-Atom">px</span> <span class="s s-Atom">green</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>You can also change an image positioned next to the form element:</p>
<div class="highlight"><pre><span></span><code><span class="s s-Atom">span</span><span class="p">.</span><span class="s s-Atom">validator</span> <span class="p">{</span>
<span class="nn">width</span><span class="p">:</span> <span class="mi">16</span><span class="s s-Atom">px</span><span class="p">;</span>
<span class="nn">height</span><span class="p">:</span> <span class="mi">16</span><span class="s s-Atom">px</span><span class="p">;</span>
<span class="nn">display</span><span class="p">:</span> <span class="s s-Atom">inline</span><span class="o">-</span><span class="s s-Atom">block</span><span class="p">;</span>
<span class="s s-Atom">background</span><span class="o">-</span><span class="nn">size</span><span class="p">:</span> <span class="mi">100</span><span class="c1">%, 100%;</span>
<span class="p">}</span>
<span class="p">:-</span><span class="s s-Atom">moz</span><span class="o">-</span><span class="s s-Atom">ui</span><span class="o">-</span><span class="s s-Atom">valid</span> <span class="o">+</span> <span class="s s-Atom">span</span> <span class="p">{</span>
<span class="s s-Atom">background</span><span class="o">-</span><span class="nn">image</span><span class="p">:</span> <span class="nf">url</span><span class="p">(</span><span class="s2">"images/valid.png"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">:-</span><span class="s s-Atom">moz</span><span class="o">-</span><span class="s s-Atom">ui</span><span class="o">-</span><span class="s s-Atom">invalid</span> <span class="o">+</span> <span class="s s-Atom">span</span> <span class="p">{</span>
<span class="s s-Atom">background</span><span class="o">-</span><span class="nn">image</span><span class="p">:</span> <span class="nf">url</span><span class="p">(</span><span class="s2">"images/invalid.png"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<p>With the corresponding HTML code (for example):</p>
<div class="highlight"><pre><span></span><code><input type='email'><span class='validator'>
</code></pre></div>
<h2>Looking for feedback</h2>
<p>We are looking for feedback from authors and implementors. As an author,
you should keep in mind that this feature is experimental and could be
removed and changed at any time. Though, we are looking for feedbacks
and we encourage you to try it and tell us what should be tweaked. You
can open a bug on <a href="https://bugzilla.mozilla.org/">bugzilla</a> or
<a href="mailto:%6d%6c%61%6d%6f%75%72%69%20%28%61%74%29%20%6d%6f%7a%69%6c%6c%61%2e%63%6f%6d">send me an email</a>.
As implementors, we would love to see other implementations trying to fix that
issue to be able to discuss a specification.</p>Get your try server builds from TinderboxPushlog2011-03-10T01:17:00+01:002011-03-10T01:17:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2011-03-10:/2011/03/get-your-try-server-builds-from-tinderboxpushlog.html<p>Last month, I've added a very simple feature that might help try servers
users and even people who want to test try server builds. It's currently
a pain to get try server builds when you didn't get the try server email
with the URL. This URL isn't random or seriously …</p><p>Last month, I've added a very simple feature that might help try servers
users and even people who want to test try server builds. It's currently
a pain to get try server builds when you didn't get the try server email
with the URL. This URL isn't random or seriously complex, it's just
quite long and it includes the pusher email address and the revision id.</p>
<p>From now, if you select a successful try server build, you will see a
'go to build directory' link just before the 'view briew log' link. A
screenshot might be better than a complex description:<br>
<a href='../../static/images/tryserver-builds.png'><img height='150' title='screenshot' src='../../static/images/tryserver-builds.png'></a></p>
<p>I'm blogging about this so late because I realized that a lot of people
didn't see this feature and were looking for something similar. I guess
a post to planet is the best way to spread the news.</p>A few hacks for Tinderbox Pushlogs2011-02-11T03:31:00+01:002011-02-11T03:31:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2011-02-11:/2011/02/a-few-hacks-for-tinderbox-pushlogs.html<p>A month ago, I've introduced a few new features in <a href="http://tbpl.mozilla.org">Tinderbox Pushlog</a>
and Ehsan threatened me to write a blog post about them, so I do.</p>
<p>My first contributions to Tinderbox Pushlog were two filters you had to
pass in parameter in the URL <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>. In the mean time I …</p><p>A month ago, I've introduced a few new features in <a href="http://tbpl.mozilla.org">Tinderbox Pushlog</a>
and Ehsan threatened me to write a blog post about them, so I do.</p>
<p>My first contributions to Tinderbox Pushlog were two filters you had to
pass in parameter in the URL <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>. In the mean time I thought of
another filter: show only unstarred jobs to help people watching the
tree (especially philor). I used this momentum to write a few other
patches:</p>
<ul>
<li>Show a UI to filter by pusher email or toggle unstarred jobs filter
(you might have notice that between "Infrastructure" and
"Timezone") ;</li>
<li>Click on a pusher name to filter his pushes (re-click to unfilter) ;</li>
<li>Add some keybings: U to toggle unstarred jobs filter, P and N to
navigate between current unstarred failing jobs ;</li>
<li>Make all of this working with HTML5's PushState/PopState (aka
History API) so you can copy/paste the URL to have the same filters
applied (need Firefox 4+ for that feature).</li>
</ul>
<p>I realize that the keybindings will not work with Vimperator but if you
use this extension you might be used to that kind of annoyance and know
the workarounds.</p>
<p>I hope these new features will make some people's life easier!</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>See <a href="../../2010/09/filter-tinderboxpushlog-by-pusher-or-revision-id.html">this blog post</a>. <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
</ol>
</div>"Contributing to the Mozilla project" workshop debriefing2010-11-24T18:00:00+01:002010-11-24T18:00:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2010-11-24:/2010/11/contributing-to-the-mozilla-project-workshop-debriefing.html<p>Two weeks ago, the 13th of November, Vivien Nicolas, <a href="http://www.chevrel.org/fr/carnet/">Pascal Chevrel</a>
and I organized a workshop in the Paris office. The goal of the workshop
was to meet people who want to contribute to the Mozilla project and
help them. By contributions, we meant any kind of contributions, from
beta …</p><p>Two weeks ago, the 13th of November, Vivien Nicolas, <a href="http://www.chevrel.org/fr/carnet/">Pascal Chevrel</a>
and I organized a workshop in the Paris office. The goal of the workshop
was to meet people who want to contribute to the Mozilla project and
help them. By contributions, we meant any kind of contributions, from
beta testing, bug reporting, regression window to bug fixing.</p>
<p>Amongst the ten people who came, I mostly worked with two guys, Anas
Husseini (Arabic translator of Firefox) and Emmanuel Gil Peyrot. Both of
them were interested in contributing to the Mozilla's platform.<br>
With Anas, I worked on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=606491">bug 606491</a>. He didn't seem really impressed
by the code base and was quite quick. Unfortunately, he left soon and we
hadn't enough time to update all the tests to reflect this change.<br>
With Emmanuel, we worked on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=606990">bug 606990</a> which is, as you can see
<em>RESOLVED FIXED</em>. I'm glad this change has been approved and pushed and
I hope Anas' patch will be very soon.</p>
<p>I've also spoken a lot with <a href="http://jeremie.patonnier.net/">Jérémie Patonnier</a> about HTML5 Forms.
It's always very instructive to speak with webdevs about concrete use
cases and needs they have.</p>
<p>Finally, the workshop went very well with a good atmosphere and I hope
we will be able to repeat that again later. If there are two things we
should improve it's being more prepared because it was a bit hard at
some point to help all these people with only the three of us. Also, for
the platform contributions, having a few computers ready with an
up-to-date and compiled tree would be better given that these steps took
a very long time.</p>HTML5 Forms Validation in Firefox 42010-11-10T18:00:00+01:002010-11-10T18:00:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2010-11-10:/2010/11/html5-forms-validation-in-firefox-4.html<p>HTML5 Forms specifications introduce some new input types, attributes
and other awesome features. One of the transversal features is native
browser-side form validation.<br>
For Firefox 4, we tried to focus on that feature and ship it as complete
as possible. All following features descriptions are available with
<a href="http://www.mozilla.com/firefox/beta/">Firefox 4 beta …</a></p><p>HTML5 Forms specifications introduce some new input types, attributes
and other awesome features. One of the transversal features is native
browser-side form validation.<br>
For Firefox 4, we tried to focus on that feature and ship it as complete
as possible. All following features descriptions are available with
<a href="http://www.mozilla.com/firefox/beta/">Firefox 4 beta 7</a> except some which are
going to be available in following betas (it's clearly specified when that's the case).</p>
<h2>Why browser-side form validation?</h2>
<p>The idea behind form validation in HTML5 Forms is to prevent using
JavaScript to check basic stuff in your forms: Is this email address
valid? Is this field filled in? Do passwords match? These are often
checked in JavaScript when you click on the submit button. You might
write your own javascript code or use a library but that will always be
a repetitive, boring and error-prone task. With forms validated by the
browser, you no longer have to care about those steps, just write simple
HTML.<br>
For the user, the validation being done by the browser is a guarantee of
quality with better accessibility and consistency.</p>
<h2>How can I make my form using this feature?</h2>
<p>If you use new attributes related to form validation or new input types
with internal validation, you will automatically opt in for form
validation by the browser (if supported by the browser). All new input
types introduced with HTML5 forms except <em>search</em> and <em>tel</em> benefit from
internal validation.<br>
Firefox 4 is going to support <em>email</em> and <em>url</em> and the validation will
check if the value is a valid email or url respectively.<br>
In addition, these attributes will provide an automatic validation
mechanism:</p>
<ul>
<li><em>required</em>: a required form control will be invalid if its value is
empty. This is working for <input> and <textarea&t;. If set on a
<input type='checkbox'>, the element will have to be checked. On a
group of <input type='radio'>, one of the radio button will have
to be selected. If set on a <input type='file'>, a file will have
to be selected. </li>
</ul>
<p><select> will accept the <em>required</em> attribute in Firefox beta 8 (see
<em>What's next?</em>).</p>
<div class="highlight"><pre><span></span><code><span class="nt"><input</span> <span class="err">required</span><span class="nt">></span>
<span class="nt"><textarea</span> <span class="err">required</span><span class="nt">></textarea></span>
</code></pre></div>
<ul>
<li><em>pattern</em>: you can specify a regular expression <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> to check
the element's value. This can be used only on some <input> types
(<em>text</em>, <em>search</em>, <em>tel</em>, <em>email</em> and <em>url</em>). When you use pattern,
it's highly recommended to use the <em>title</em> attribute to describe the
pattern.</li>
</ul>
<!-- -->
<div class="highlight"><pre><span></span><code><span class="o"><</span><span class="k">input</span><span class="w"> </span><span class="n">type</span><span class="o">=</span><span class="s1">'tel'</span><span class="w"> </span><span class="n">pattern</span><span class="o">=</span><span class="s1">'\d\d \d\d \d\d \d\d \d\d'</span><span class="w"> </span><span class="n">title</span><span class="o">=</span><span class="ss">"Write a phone number in the format 'XX XX XX XX XX'"</span><span class="o">></span><span class="w"></span>
<span class="o"><</span><span class="k">input</span><span class="w"> </span><span class="n">type</span><span class="o">=</span><span class="s1">'email'</span><span class="w"> </span><span class="n">pattern</span><span class="o">=</span><span class="ss">".*@company\.com"</span><span class="w"> </span><span class="n">title</span><span class="o">=</span><span class="ss">"Enter you company email address"</span><span class="o">></span><span class="w"></span>
</code></pre></div>
<ul>
<li><em>maxlength</em>: maxlength can already be used with Firefox 3.6 but it
will only block the keyboard inputs made by the users on an
<input> so they can't type more characters than the value
specified in the maxlength attribute. In Firefox 4 beta 7, this
applies on <textarea> too. In addition, if the value is set via
.value, the element will become invalid if the new value has a
length bigger than maxlength.</li>
</ul>
<!-- -->
<div class="highlight"><pre><span></span><code><span class="nt"><input</span> <span class="na">maxlength=</span><span class="s">'10'</span><span class="nt">></span>
<span class="nt"><textarea</span> <span class="na">maxlength=</span><span class="s">'140'</span><span class="nt">></textarea></span>
</code></pre></div>
<h2>How can I opt out?</h2>
<p>You should probably think about that twice, If you have your own system
for form validation, you should probably try to disable it when the
browser can manage form validation instead of disabling the validation
by the browser for your own system. However, there might be other
reasons why you would want to disable form validation. Good reasons
might be if you want to use some new input types but you don't care
about checking the validity.<br>
The simplest way to opt out is to add the <em>novalidate</em> attribute to your
<form>. You can also set <em>formnovalidate</em> on your submit controls. You
should prefer <em>formnovalidate</em> than <em>novalidate</em> if you want to have one
submit control with form validation and another without.<br>
Detecting this feature is not really easy given that you want to have a
message being shown but you can't know for sure if the browser is going
to show something even if form validation seems to be supported. I will
try to write another post about that later.</p>
<h2>How can I specify my validity rules?</h2>
<p>You can make an element invalid by calling
<em>.setCustomValidity(errorMsg)</em>. Doing some checks on <em>oninput()</em> and
calling <em>.setCustomValidity()</em> should be enough in most situations.<br>
<em>.setCustomValidity()</em> takes in parameter the error message. You can
pass the empty string to <em>.setCustomValidity()</em> if you want to remove
the custom error.<br>
With this method, you can check that two password fields have the same
value very easily:</p>
<div class="highlight"><pre><span></span><code><span class="nt"><script></span>
function checkPassword(p1, p2)
{
if (p1.value != p2.value) {
p2.setCustomValidity('passwords do not match');
} else {
p2.setCustomValidity('');
}
}
<span class="nt"></script></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">'password'</span> <span class="na">id=</span><span class="s">'p1'</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">'password'</span> <span class="na">onfocus=</span><span class="s">"checkPassword(document.getElementById('p1'), this);"</span> <span class="na">oninput=</span><span class="s">"checkPassword(document.getElementById('p1'), this);"</span><span class="nt">></span>
</code></pre></div>
<h2>How can I change the text of the error message?</h2>
<p>Each error types have a string associated describing the error. For
example, if an input element is required and has no value, the message
will be "Please fill out this field". Firefox will try to be as
clever as possible to show the best error message but you might want to
override it in some situations where the rules are very complex. For
example:</p>
<div class="highlight"><pre><span></span><code><span class="o"><</span><span class="k">input</span><span class="w"> </span><span class="n">type</span><span class="o">=</span><span class="s1">'email'</span><span class="w"> </span><span class="n">required</span><span class="w"> </span><span class="n">pattern</span><span class="o">=</span><span class="s1">'.*@company\.com'</span><span class="o">></span><span class="w"></span>
</code></pre></div>
<p>You might prefer to have a simple "Please, enter your corporate email
address." instead of three generic messages depending of the
unfulfilled constraint.<br>
To help with that, we have introduced a non-standard
<em>x-moz-errormessage</em> <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup> which let you specify an error message
for a given form control. Regardless of the error, if
<em>x-moz-errormessage</em> is present and different from the empty string, its
value will be used as the error message instead of the default one.<br>
This is non-standard so it should be used carefully. See
<a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=10923">http://www.w3.org/Bugs/Public/show_bug.cgi?id=10923</a>.
In addition, you should know that <em>.setCustomValidity()</em> lets you indirectly set
your own error message but we do not really like that because you will let the
browser think that the element is suffering from a custom error even if it is
not.</p>
<h2>How can I change the error popup UI?</h2>
<p>Unfortunately, there is no way to change the UI. The popup is part of
the browser and it's currently not possible to style the browser from
the content. This might change later but that will not be done for
Firefox 4.<br>
If you think the current popup is ugly, you should know it's not final.
We will try to enhance that later, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=602500">bug 602500</a>.
All comments are very welcome!</p>
<h2>New CSS pseudo-classes and default styles</h2>
<p><a href="http://www.w3.org/TR/css3-ui/">CSS3 UI</a> introduce new pseudo-classes that HTML5 is now using like
<em>:invalid</em>, <em>:valid</em>, <em>:required</em> and <em>:optional</em>. Firefox 4 beta 7
supports all these pseudo-classes and adds a new pseudo-class:
<em>:-moz-submit-invalid</em> which applies on submit controls when a form has
an invalid element.<br>
<em>:invalid</em> has a default style which is a red <em>box-shadow</em>. This default
style is going to be removed when <em>:-moz-ui-invalid</em> will be added (see
<em>What's next?</em>). In the mean time, you can easily remove this default
style in your stylesheets:</p>
<div class="highlight"><pre><span></span><code><span class="p">:</span><span class="nd">invalid</span> <span class="p">{</span>
<span class="k">box-shadow</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<h2>What's next?</h2>
<p>It's a bit early to say what will be done after Firefox 4 but we already
know that a few things will be done in the following betas:</p>
<ul>
<li><em>required</em> attribute for <select>. You will be able to specify
that a select element is required. This rule will be fulfilled if
you select at least one option which has a value different from the
empty string. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=596511">bug 596511</a>. This might be fixed for beta 8.</li>
<li>Let <output> being subject from constraint validation. Output
elements are currently barred from constraint validation but it
seems to be too restrictive and <em>.setCustomValidity()</em> might be
useful in some situations. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=604673">bug 604673</a>. This might be fixed
for beta 8.</li>
<li>Adding <em>:-moz-ui-invalid</em> and maybe <em>-moz-ui-valid</em> pseudo-classes.
<em>:invalid</em> and <em>:valid</em> pseudo-classes are very bad for
<acronym title="User interface">UI</acronym> and
<acronym title="User experience">UX</acronym> perspectives.
We want to introduce new pseudo-classes which would follow some UX
rules. This will probably be the subject of a future blog post.
Related bugs: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=605124">bug 605124</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=605125">bug 605125</a>.</li>
</ul>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>The regular expression will follow the JavaScript regular expression rules
and will be checked against the entire element's value. <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<li id="fn:2">
<p>The prefix is the new recommendation, see <a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=9590">http://www.w3.org/Bugs/Public/show_bug.cgi?id=9590</a> <a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">↩</a></p>
</li>
</ol>
</div>Atelier "Contribuer à Mozilla", samedi 13 novembre2010-11-03T16:27:00+01:002010-11-03T16:27:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2010-11-03:/2010/11/atelier-contribuer-a-mozilla-samedi-13-novembre-fr.html<p>Samedi 13 novembre, le week-end après l'<a href="http://ubuntu-paris.org/">Ubuntu Party de Paris</a>,
Mozilla (Paris) va organiser un atelier pour les personnes souhaitant
contribuer au projet Mozilla. Conscient de la difficulté que peuvent
rencontrer les personnes souhaitant contribuer, nous voulons prendre le
temps de discuter des différents types de contributions mais surtout …</p><p>Samedi 13 novembre, le week-end après l'<a href="http://ubuntu-paris.org/">Ubuntu Party de Paris</a>,
Mozilla (Paris) va organiser un atelier pour les personnes souhaitant
contribuer au projet Mozilla. Conscient de la difficulté que peuvent
rencontrer les personnes souhaitant contribuer, nous voulons prendre le
temps de discuter des différents types de contributions mais surtout de
réellement passer le cap. L'atelier se deroulera sur une journée entière
afin d'être sûr que vous repartiez avec des résultats concrets.</p>
<p>Nous serons trois personnes pour vous accompagner durant cette journée :
Pascal Chevrel, responsable de l'internationalisation des sites web de
Mozilla, Vivien Nicolas, développeur pour l'interface utilisateur de
Firefox Mobile (Fennec) et moi-même, développeur plateforme (Gecko).</p>
<p>Etant donné que nous serons deux développeurs, ce pourrait être une
bonne occasion d'écrire votre premier patch pour le projet Mozilla. Bien
entendu, l'atelier est ouvert aux non-techniciens.</p>
<p>Plus d'informations et
inscriptions : <a href="http://www.mozfr.org/wiki/doku.php?id=atelier_contribuer_a_mozilla_13_novembre_2010">http://www.mozfr.org/wiki/doku.php?id=atelier_contribuer_a_mozilla_13_novembre_2010</a>.</p>Filter TinderboxPushLog by pusher or revision id2010-09-30T21:38:00+02:002010-09-30T21:38:00+02:00Mounir Lamouritag:mounir.lamouri.fr,2010-09-30:/2010/09/filter-tinderboxpushlog-by-pusher-or-revision-id.html<p>I wrote two small patches <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> that let you filter tinderboxpushlog
with the pusher or the revision id. This is available in
<a href="http://tests.themasta.com/tinderboxpushlog/">http://tests.themasta.com/tinderboxpushlog/</a> since a few days.</p>
<p>So, now, you can specify these new arguments in tinderboxpushlog URL:</p>
<div class="highlight"><pre><span></span><code><span class="nv">pusher</span><span class="o">=<</span><span class="nv">pusher_email_address</span><span class="o">></span> <span class="o">-</span> <span class="nv">filter</span> <span class="nv">pushes</span> <span class="nv">to</span> <span class="k">show</span> <span class="nv">those</span> <span class="nv">done …</span></code></pre></div><p>I wrote two small patches <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup> that let you filter tinderboxpushlog
with the pusher or the revision id. This is available in
<a href="http://tests.themasta.com/tinderboxpushlog/">http://tests.themasta.com/tinderboxpushlog/</a> since a few days.</p>
<p>So, now, you can specify these new arguments in tinderboxpushlog URL:</p>
<div class="highlight"><pre><span></span><code><span class="nv">pusher</span><span class="o">=<</span><span class="nv">pusher_email_address</span><span class="o">></span> <span class="o">-</span> <span class="nv">filter</span> <span class="nv">pushes</span> <span class="nv">to</span> <span class="k">show</span> <span class="nv">those</span> <span class="nv">done</span> <span class="nv">by</span> <span class="nv">the</span> <span class="nv">given</span> <span class="nv">user</span>.
<span class="nv">rev</span><span class="o">=<</span><span class="mi">12</span><span class="nv">_rev_id_chars</span><span class="o">></span> <span class="o">-</span> <span class="nv">filter</span> <span class="nv">pushes</span> <span class="nv">to</span> <span class="k">show</span> <span class="nv">the</span> <span class="nv">one</span> <span class="nv">containing</span> <span class="nv">the</span> <span class="nv">given</span> <span class="nv">revision</span> <span class="nv">id</span>.
</code></pre></div>
<p>For example, this URL will only show the push containing the revision id
071d28940876: <a href="http://tests.themasta.com/tinderboxpushlog/?tree=MozillaTry&rev=071d28940876">http://tests.themasta.com/tinderboxpushlog/?tree=MozillaTry&rev=071d28940876</a>.</p>
<p>The main use case of that feature is to make tinderboxpushlog more
friendly when trying to look at a push on the try server: you can avoid
the noise made by other pushes.<br>
Unfortunately. <code>rev</code> doesn't try to search the given revision id and you
will have to browse the pushes until one appears.</p>
<p>If someone wants to add a UI for this feature, have a look at <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=576544">bug
576544</a>.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=549275">bug 549275</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=598556">bug 598556</a>. <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
</ol>
</div>256 colors terminal with tmux and urxvt2010-03-21T11:39:00+01:002010-03-21T11:39:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2010-03-21:/2010/03/256-colors-terminal-with-tmux-and-urxvt.html<p>A few days ago, I was trying to change my vim theme for a 256-color one
and I realized urxvt was not supporting 256 colors out of the box.
Hopefully, there is a patch to get a 256 colors terminal with urxvt. It
is available in the the Gentoo package …</p><p>A few days ago, I was trying to change my vim theme for a 256-color one
and I realized urxvt was not supporting 256 colors out of the box.
Hopefully, there is a patch to get a 256 colors terminal with urxvt. It
is available in the the Gentoo package, you just have to enable the
<em>xterm-color</em> USE flag for rxvt-unicode like this:</p>
<div class="highlight"><pre><span></span><code>echo "x11-terms/rxvt-unicode xterm-color >> /etc/portage/package.use
</code></pre></div>
<p>If you recompile rxvt-unicode, you should now get more colors. You can
test it by using a 256-color vim theme like <a href="http://www.vim.org/scripts/script.php?script_id=1243">desert256</a> <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>. You
can also run:</p>
<div class="highlight"><pre><span></span><code>tput colors
</code></pre></div>
<p>I got 88 instead of 256. I don't know why but it's still a lot better
than 16 colors.</p>
<p>Now, you have to make sure tmux is using 256 colors otherwise you will
get a weird behavior. According to the <a href="http://tmux.cvs.sourceforge.net/viewvc/*checkout*/tmux/tmux/FAQ">tmux FAQ</a>, it is really easy
and you have to add a this line in <em>~/.tmux.conf</em>:</p>
<div class="highlight"><pre><span></span><code>set -g default-terminal "screen-256color"
</code></pre></div>
<p>In my system it was not working so I have to tell tmux my terminal
supports 256 colors by using '-2' argument. You can add this line to
your <em>~/.bashrc</em> to always call tmux with '-2':</p>
<div class="highlight"><pre><span></span><code>alias tmux="tmux -2"
</code></pre></div>
<p>Now, if you run <em><code>tput colors</code></em> in a tmux session, you should get 256.</p>
<p>If you are using vim, you should add this line to you <em>~/.vimrc</em>:</p>
<div class="highlight"><pre><span></span><code>set t_Co=256
</code></pre></div>
<p>Hope this is helping !</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>To compare themes, you can try <a href="http://code.google.com/p/vimcolorschemetest/">http://code.google.com/p/vimcolorschemetest/</a> <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
</ol>
</div>Placeholder attribute in Firefox 3.7 alphas2010-03-19T00:56:00+01:002010-03-19T00:56:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2010-03-19:/2010/03/placeholder-attribute-in-firefox-37-alphas.html<p>The placeholder attribute for input and textarea elements is available
on Firefox 3.7 since developer preview 3.7a2.</p>
<p>The placeholder attribute is a new attribute from <a href="http://dev.w3.org/html5/spec/forms.html">HTML5 Forms
specifications</a>. The placeholder text is showed as a hint on input and
textarea elements when the element is empty and not …</p><p>The placeholder attribute for input and textarea elements is available
on Firefox 3.7 since developer preview 3.7a2.</p>
<p>The placeholder attribute is a new attribute from <a href="http://dev.w3.org/html5/spec/forms.html">HTML5 Forms
specifications</a>. The placeholder text is showed as a hint on input and
textarea elements when the element is empty and not focused. This kind
of behavior is already used by a lot of websites and even by Firefox
user interface <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>.<br>
If you are a web developer and you want to use the placeholder
attribute, you should know you can easily identify if the
<acronym title="User Agent">UA</acronym> knows about the
placeholder attribute with this simple code:</p>
<div class="highlight"><pre><span></span><code><span class="k">if</span><span class="ss">(</span><span class="o">!</span><span class="s2">"</span><span class="s">placeholder</span><span class="s2">"</span> <span class="nv">in</span> <span class="nv">document</span>.<span class="nv">createElement</span><span class="ss">(</span><span class="s2">"</span><span class="s">input</span><span class="s2">"</span><span class="ss">))</span> {
<span class="o">//</span> <span class="nv">your</span> <span class="nv">fallback</span>
}
</code></pre></div>
<p>This way, you can have a sane fallback until you consider the
placeholder attribute is supported enough to remove the fallback.</p>
<p>At the moment, there are still some minor issues about the placeholder
like the style for Aero (Windows Vista and 7) <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup> and some
optimizations <sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup>. However, there is a bigger issue related to the
ability to style the placeholder <sup id="fnref:4"><a class="footnote-ref" href="#fn:4">4</a></sup>. Indeed, at the moment, there
is no specification about the placeholder style customization. Webkit
have decided to use a CSS pseudo-element "-web-input-placeholder"
but unfortunately, no consensus has been reached.</p>
<p>To know if your browser supports the placeholder attribute, just look at
the input field below. If you see "tulip orchid" that means your
browser support the placeholder attribute correctly. If you see only
"tulip" that means you browser has an issue with new lines in
placeholder text (WebKit has this issue <sup id="fnref:5"><a class="footnote-ref" href="#fn:5">5</a></sup>). If you see nothing
that means your browser doesn't support placeholder at all.</p>
<p><input placeholder="tulip orchid"></input></p>
<p>This is my first contribution for the HTML5 Forms implementation in
Gecko/Firefox. Next steps may be the constraint validation API,
autofocus and other small stuff.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>Actually, Firefox is using the XUL 'emptytext' attribute for stuff like
the search box which is going to be replaced by the placeholder attribute. <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<li id="fn:2">
<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=548626">https://bugzilla.mozilla.org/show_bug.cgi?id=548626</a> <a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">↩</a></p>
</li>
<li id="fn:3">
<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=553097">https://bugzilla.mozilla.org/show_bug.cgi?id=553097</a> <a class="footnote-backref" href="#fnref:3" title="Jump back to footnote 3 in the text">↩</a></p>
</li>
<li id="fn:4">
<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=457801">https://bugzilla.mozilla.org/show_bug.cgi?id=457801</a> <a class="footnote-backref" href="#fnref:4" title="Jump back to footnote 4 in the text">↩</a></p>
</li>
<li id="fn:5">
<p>I have opened a bug, <a href="https://bugs.webkit.org/show_bug.cgi?id=36291">https://bugs.webkit.org/show_bug.cgi?id=36291</a> <a class="footnote-backref" href="#fnref:5" title="Jump back to footnote 5 in the text">↩</a></p>
</li>
</ol>
</div>OpenID: provide your own identity2009-12-03T15:31:00+01:002009-12-03T15:31:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2009-12-03:/2009/12/openid-provide-your-own-identity.html<p>OpenID is really interesting. I will not explain in details what it is
about because <a href="http://openid.net/">openid.net</a> or <a href="http://en.wikipedia.org/wiki/OpenID">wikipedia</a> will probably do that
better than me. Basically, it's a try to get an unique way to log on
various websites. For example, with OpenID, you can get authenticated on
Facebook …</p><p>OpenID is really interesting. I will not explain in details what it is
about because <a href="http://openid.net/">openid.net</a> or <a href="http://en.wikipedia.org/wiki/OpenID">wikipedia</a> will probably do that
better than me. Basically, it's a try to get an unique way to log on
various websites. For example, with OpenID, you can get authenticated on
Facebook with your Google account <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>. Actually, OpenID is much
more than a standard way to log on, it lets you externalizing the
authentication server. That means you can use the OpenID account linked
to your Yahoo! account ^foobar^ <sup id="fnref:2"><a class="footnote-ref" href="#fn:2">2</a></sup> or even the one linked to your wordpress
blog or any any one you may already have <sup id="fnref:3"><a class="footnote-ref" href="#fn:3">3</a></sup>. That also means you
can use your own !</p>
<p>Why should you use your own server to provide your own identity on
Internet ? Actually, this question should be "Why should I trust
someone else to provide my identity on Internet ?". Indeed, with
OpenID, you can externalize the authentication but that also means
centralizing it. Having a lot of identities on Internet is annoying :
you must file the same information, you have a lot of passwords, you
don't always remember your username... But having the same account to
log everywhere makes you very dependent on this account. If your OpenID
provider closes its service, ask you to pay for it, doesn't respect your
privacy, or anything else, you will be in a bad situation.</p>
<p>To prevent this situation, the best solution is to run and use your own
OpenID server. If you already have one for anything else, adding OpenID
is going to be easy. There is even a <a href="http://wiki.openid.net/Run-your-own-identity-server">page with some solutions</a>.
<a href="http://siege.org/projects/phpMyID">phpMyID</a> is really appreciated because it's lean but it's designed to
provide only one account. That means you will not be able to offer an
OpenID server to your friends. That's why I prefer <a href="http://simpleid.sourceforge.net/">SimpleID</a>. How to
setup the server will be maybe for another entry but I suppose anyone
interested to do that will know how to found the information <sup id="fnref:4"><a class="footnote-ref" href="#fn:4">4</a></sup>.</p>
<p>The simplest way is to delegate your authentication. That means you can
use an OpenID account from <a href="http://www.myopenid.com">myOpenID</a> or any OpenID provider and, in
your blog or any web page you control, you can add these lines in the
HTML HEAD section:</p>
<div class="highlight"><pre><span></span><code><link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="http://username.myopenid.com/" />
</code></pre></div>
<p>The example is using myOpenID but it could be wordpress, Yahoo! or
anything else. <em>openid.server</em> is the server you want to use.
<em>openid.delegate</em> is the OpenID account your provider told you to use
(like username.wordpress.com for wordpress).<br>
This solution lets you use your blog URL (or any webpage you want) as an
OpenID account and it will transparently use the specified server. That
means you will be able to change the server when you want without
breaking your OpenID account. So, you are not as much dependent from the
provider as you were. Unfortunately, there will always be a third party
which you have to trust while you are using someone else as a provider.</p>
<p>Maybe you should now ask one of your geeky friend if she/he didn't setup
an OpenID server or do it yourself ?</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p><a href="http://developers.facebook.com/news.php?blog=1&story=246">http://developers.facebook.com/news.php?blog=1&story=246</a> <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
<li id="fn:2">
<p><a href="http://openid.yahoo.com/">http://openid.yahoo.com/</a> <a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">↩</a></p>
</li>
<li id="fn:3">
<p>Look at <a href="http://openid.net/get-an-openid/">http://openid.net/get-an-openid/</a> <a class="footnote-backref" href="#fnref:3" title="Jump back to footnote 3 in the text">↩</a></p>
</li>
<li id="fn:4">
<p>Some hints: <a href="http://www.intertwingly.net/blog/2007/01/03/OpenID-for-non-SuperUsers">http://www.intertwingly.net/blog/2007/01/03/OpenID-for-non-SuperUsers</a> <a class="footnote-backref" href="#fnref:4" title="Jump back to footnote 4 in the text">↩</a></p>
</li>
</ol>
</div>Why some Firefox plugins need to be compiled, example with Weave2009-11-25T21:56:00+01:002009-11-25T21:56:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2009-11-25:/2009/11/why-some-firefox-plugins-need-to-be-compiled-example-with-weave.html<p>Gentoo let the user installing a few Firefox and Thunderbird plugins via
the package manager and people often consider it is useless. Actually,
there are at least two reasons why it can be useful.<br>
The first one is obvious : when installing a plugin with the package
manager, you are sure …</p><p>Gentoo let the user installing a few Firefox and Thunderbird plugins via
the package manager and people often consider it is useless. Actually,
there are at least two reasons why it can be useful.<br>
The first one is obvious : when installing a plugin with the package
manager, you are sure it will be available for every users (except if it
is manually disabled by the user). For example, you can install
<a href="http://noscript.net/">noscript</a> for security reasons directly by enabling
<em>restrict-javascript</em> USE flag.<br>
The other reason is the compilation. Indeed, most plugins are
platform-independent but some of them are not and those ones are not
guarantee to work on your computer. For example, you can install Firefox
on a lot of different platforms. If you stay with GNU/Linux, you can
install Firefox 3.5 on alpha, amd64 (x86-64), arm, hppa, ia64, ppc,
ppc64, x86 <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>. This is true at least with Gentoo. It goes without
saying if a plugin has a platform-dependent part, it will not provide a
binary for all these platforms.</p>
<p>Concretely, I tried to install <a href="https://mozillalabs.com/weave/">Weave</a> 1.0 beta 1 and 2 from
<a href="https://addons.mozilla.org/en-US/firefox/addon/10868">addons.mozilla.org</a>. When launching Firefox, I got this output in the
Weave Activity Log view:</p>
<div class="highlight"><pre><span></span><code><span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mo">02</span><span class="w"> </span><span class="n">Service</span><span class="p">.</span><span class="n">Main</span><span class="w"> </span><span class="n">INFO</span><span class="w"> </span><span class="n">Loading</span><span class="w"> </span><span class="n">Weave</span><span class="w"> </span><span class="mf">1.0</span><span class="n">b2</span><span class="w"> </span><span class="k">in</span><span class="w"> </span><span class="mi">5</span><span class="w"> </span><span class="n">sec</span><span class="p">.</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">08</span><span class="w"> </span><span class="n">Engine</span><span class="p">.</span><span class="n">Bookmarks</span><span class="w"> </span><span class="n">DEBUG</span><span class="w"> </span><span class="n">Engine</span><span class="w"> </span><span class="n">initialized</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">09</span><span class="w"> </span><span class="n">Engine</span><span class="p">.</span><span class="n">Forms</span><span class="w"> </span><span class="n">DEBUG</span><span class="w"> </span><span class="n">Engine</span><span class="w"> </span><span class="n">initialized</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">10</span><span class="w"> </span><span class="n">Engine</span><span class="p">.</span><span class="n">History</span><span class="w"> </span><span class="n">DEBUG</span><span class="w"> </span><span class="n">Engine</span><span class="w"> </span><span class="n">initialized</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">10</span><span class="w"> </span><span class="n">Engine</span><span class="p">.</span><span class="n">Passwords</span><span class="w"> </span><span class="n">DEBUG</span><span class="w"> </span><span class="n">Engine</span><span class="w"> </span><span class="n">initialized</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">10</span><span class="w"> </span><span class="n">Engine</span><span class="p">.</span><span class="n">Prefs</span><span class="w"> </span><span class="n">DEBUG</span><span class="w"> </span><span class="n">Engine</span><span class="w"> </span><span class="n">initialized</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">10</span><span class="w"> </span><span class="n">TabTracker</span><span class="w"> </span><span class="n">DEBUG</span><span class="w"> </span><span class="n">Failed</span><span class="w"> </span><span class="n">to</span><span class="w"> </span><span class="n">load</span><span class="w"> </span><span class="nl">json</span><span class="p">:</span><span class="w"> </span><span class="n">this</span><span class="p">.</span><span class="n">changedIDs</span><span class="w"> </span><span class="n">is</span><span class="w"> </span><span class="n">undefined</span><span class="w"> </span><span class="n">JS</span><span class="w"> </span><span class="n">Stack</span><span class="w"> </span><span class="nl">trace</span><span class="p">:</span><span class="w"> </span><span class="p">([</span><span class="n">object</span><span class="w"> </span><span class="n">Object</span><span class="p">])@</span><span class="n">trackers</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">125</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">Utils_jsonLoad</span><span class="p">(</span><span class="s">"weave/changes/tab_tracker.json"</span><span class="p">,[</span><span class="n">object</span><span class="w"> </span><span class="n">Object</span><span class="p">],(</span><span class="n">function</span><span class="w"> </span><span class="p">(</span><span class="n">json</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="n">let</span><span class="w"> </span><span class="kt">id</span><span class="w"> </span><span class="k">in</span><span class="w"> </span><span class="n">json</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="n">this</span><span class="p">.</span><span class="n">changedIDs</span><span class="p">[</span><span class="kt">id</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi">1</span><span class="p">;}}))@</span><span class="n">util</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">559</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">T_loadChangedIDs</span><span class="p">()@</span><span class="n">trackers</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">123</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">T__init</span><span class="p">()@</span><span class="n">trackers</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">76</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">TabTracker__init</span><span class="p">()@</span><span class="n">tabs</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">356</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">TabTracker</span><span class="p">()@</span><span class="n">tabs</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">345</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="p">()@</span><span class="n">engines</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">161</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">Engine__init</span><span class="p">()@</span><span class="n">engines</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">179</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">_init</span><span class="p">()@</span><span class="n">engines</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">303</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">TabEngine</span><span class="p">()@</span><span class="n">tabs</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">56</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">EngMgr_register</span><span class="p">(</span><span class="n">TabEngine</span><span class="p">,</span><span class="mi">5</span><span class="p">,[</span><span class="n">object</span><span class="w"> </span><span class="n">Array</span><span class="p">])@</span><span class="n">engines</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">113</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">EngMgr_register</span><span class="p">([</span><span class="n">object</span><span class="w"> </span><span class="n">Array</span><span class="p">])@</span><span class="n">engines</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">106</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">WeaveSvc__registerEngines</span><span class="p">()@</span><span class="n">service</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">379</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">_onStartup</span><span class="p">([</span><span class="n">object</span><span class="w"> </span><span class="n">Object</span><span class="p">])@</span><span class="n">service</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">278</span><span class="w"> </span><span class="o"><</span><span class="w"> </span><span class="n">notify</span><span class="p">([</span><span class="n">object</span><span class="w"> </span><span class="n">XPCWrappedNative_NoHelper</span><span class="p">])@</span><span class="n">util</span><span class="p">.</span><span class="nl">js</span><span class="p">:</span><span class="mi">624</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">11</span><span class="w"> </span><span class="n">Engine</span><span class="p">.</span><span class="n">Tabs</span><span class="w"> </span><span class="n">DEBUG</span><span class="w"> </span><span class="n">Engine</span><span class="w"> </span><span class="n">initialized</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">11</span><span class="w"> </span><span class="n">Service</span><span class="p">.</span><span class="n">Main</span><span class="w"> </span><span class="n">INFO</span><span class="w"> </span><span class="n">Resetting</span><span class="w"> </span><span class="n">client</span><span class="w"> </span><span class="n">syncID</span><span class="w"> </span><span class="n">from</span><span class="w"> </span><span class="n">_onStartup</span><span class="p">.</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">11</span><span class="w"> </span><span class="n">Service</span><span class="p">.</span><span class="n">Main</span><span class="w"> </span><span class="n">INFO</span><span class="w"> </span><span class="n">Mozilla</span><span class="o">/</span><span class="mf">5.0</span><span class="w"> </span><span class="p">(</span><span class="n">X11</span><span class="p">;</span><span class="w"> </span><span class="n">U</span><span class="p">;</span><span class="w"> </span><span class="n">Linux</span><span class="w"> </span><span class="n">ppc</span><span class="p">;</span><span class="w"> </span><span class="n">en</span><span class="o">-</span><span class="n">US</span><span class="p">;</span><span class="w"> </span><span class="nl">rv</span><span class="p">:</span><span class="mf">1.9.1.4</span><span class="p">)</span><span class="w"> </span><span class="n">Gecko</span><span class="o">/</span><span class="mi">20091109</span><span class="w"> </span><span class="n">Gentoo</span><span class="w"> </span><span class="n">Firefox</span><span class="o">/</span><span class="mf">3.5.4</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">11</span><span class="w"> </span><span class="n">Service</span><span class="p">.</span><span class="n">Util</span><span class="w"> </span><span class="n">WARN</span><span class="w"> </span><span class="n">Component</span><span class="w"> </span><span class="p">@</span><span class="n">labs</span><span class="p">.</span><span class="n">mozilla</span><span class="p">.</span><span class="n">com</span><span class="o">/</span><span class="n">Weave</span><span class="o">/</span><span class="n">Crypto</span><span class="p">;</span><span class="mi">1</span><span class="w"> </span><span class="n">requested</span><span class="p">,</span><span class="w"> </span><span class="n">but</span><span class="w"> </span><span class="n">doesn</span><span class="err">'</span><span class="n">t</span><span class="w"> </span><span class="n">exist</span><span class="w"> </span><span class="n">on</span><span class="w"> </span><span class="n">this</span><span class="w"> </span><span class="n">platform</span><span class="p">.</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">11</span><span class="w"> </span><span class="n">Service</span><span class="p">.</span><span class="n">Main</span><span class="w"> </span><span class="n">DEBUG</span><span class="w"> </span><span class="n">Crypto</span><span class="w"> </span><span class="n">check</span><span class="w"> </span><span class="nl">failed</span><span class="p">:</span><span class="w"> </span><span class="nl">TypeError</span><span class="p">:</span><span class="w"> </span><span class="n">Svc</span><span class="p">.</span><span class="n">Crypto</span><span class="w"> </span><span class="n">is</span><span class="w"> </span><span class="n">null</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">11</span><span class="w"> </span><span class="n">Service</span><span class="p">.</span><span class="n">Main</span><span class="w"> </span><span class="n">ERROR</span><span class="w"> </span><span class="n">Could</span><span class="w"> </span><span class="n">not</span><span class="w"> </span><span class="n">load</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">Weave</span><span class="w"> </span><span class="n">crypto</span><span class="w"> </span><span class="n">component</span><span class="p">.</span><span class="w"> </span><span class="n">Disabling</span><span class="w"> </span><span class="n">Weave</span><span class="p">,</span><span class="w"> </span><span class="n">since</span><span class="w"> </span><span class="n">it</span><span class="w"> </span><span class="n">will</span><span class="w"> </span><span class="n">not</span><span class="w"> </span><span class="n">work</span><span class="w"> </span><span class="n">correctly</span><span class="p">.</span><span class="w"></span>
<span class="mi">2009-11-25</span><span class="w"> </span><span class="mi">12</span><span class="o">:</span><span class="mi">34</span><span class="o">:</span><span class="mi">11</span><span class="w"> </span><span class="n">Service</span><span class="p">.</span><span class="n">Main</span><span class="w"> </span><span class="n">INFO</span><span class="w"> </span><span class="n">Weave</span><span class="w"> </span><span class="n">Sync</span><span class="w"> </span><span class="n">disabled</span><span class="w"></span>
</code></pre></div>
<p>If you unzip the xpi file, you will found a <em>platform/</em> directory which
is containing platform-dependent files. If we stay with GNU/Linux, we
have <em>Linux/</em>, <em>Linux_x86_64-gcc3/</em> and <em>Linux_x86-gcc3/</em>
directories. If we launch <em>'file
platform/Linux/components/WeaveCrypto.so</em>', we got:</p>
<div class="highlight"><pre><span></span><code>platform/Linux/components/WeaveCrypto.so: ELF 32-bit LSB shared object, ARM, version 1 (SYSV), dynamically linked, not stripped
</code></pre></div>
<p>So, x86, x86-64 and arm are supported, not surprising. But my old
Powerbook G4 (PowerPC) is not. Actually, it would be if I was using
MacOS X instead of GNU/Linux.</p>
<p>I don't know if addons.mozilla.org should specify the supported
platforms for platform-dependent plugins because arm, x86 and x86-64 are
covering most of the target systems. Actually, as far as I know PowerPC
is fully supported only by Gentoo and Debian. Anyway, if you are using
an unconventional platform, you may want to compile your own weave
plugin and probably a few others.</p>
<p>Luckily, weave has just been updated to 1.0b2 in the Gentoo tree :)</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>mips is working with Firefox 2.0.0.19 and sparc with Firefox 3.0.11 <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a></p>
</li>
</ol>
</div>Presentation about Mozilla at INSA Lyon2009-11-17T11:11:00+01:002009-11-17T11:11:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2009-11-17:/2009/11/presentation-about-mozilla-at-insa-lyon.html<p>Last Friday (November 13 2009), I gave a presentation titled
<em>Mozilla and its technologies</em> in the context of the <a href="http://www.spreadfirefox.com/campusreps">Mozilla Campus
Reps</a> program. Indeed, I am a Mozilla
Campus Rep at <a href="http://www.insa-lyon.fr/en">INSA Lyon</a>, my university.</p>
<p>The presentation had four parts. First of them was a classic presentation of
Mozilla and …</p><p>Last Friday (November 13 2009), I gave a presentation titled
<em>Mozilla and its technologies</em> in the context of the <a href="http://www.spreadfirefox.com/campusreps">Mozilla Campus
Reps</a> program. Indeed, I am a Mozilla
Campus Rep at <a href="http://www.insa-lyon.fr/en">INSA Lyon</a>, my university.</p>
<p>The presentation had four parts. First of them was a classic presentation of
Mozilla and Netscape history. Then, a presentation of some Mozilla
projects like applications, libraries, tools and especially <a href="https://mozillalabs.com/">Mozilla
Labs</a>. The real technical part was about the Mozilla Platform (Gecko,
XUL, ...). To complete, the Open Web and web standards.</p>
<p>Everything went well. I planned to give a 30-minute to 45-minute length
presentation with 15 minutes of questions but it looks like I had a lot of
things to say and I talked one hour long. Fortunately, there wasn't a
lot of questions so I finished in time.<br>
The most important is I had only good feedback which is pretty cool for
a first experience!</p>
<p>The Mozilla campus Reps program wasn't able to send me a swag pack so I
asked to Tristan Nitot (Mozilla Europe) who seemed delighted to help.
Paul Rouget (Mozilla Europe too) also helped with some advices. A big
thank you to both of them!</p>
<p>Finally, you can download <a href="http://dl.oldworld.fr/mozilla-campus-reps/presentation-at-insa-lyon.pdf">my slides</a>. You can also get the source
files <a href="http://dl.oldworld.fr/mozilla-campus-reps/">here</a>. The slides have been
made in <a href="http://en.wikipedia.org/wiki/LaTeX">latex</a> with <a href="http://en.wikipedia.org/wiki/Beamer_%28LaTeX%29">beamer</a>.
All this stuff is available in <a href="http://creativecommons.org/licenses/by/3.0/">Creative Common Attribution 3.0
(CC-BY)</a>.<br>
The slides aren't really verbose. They have been made only to get
attention of the audience and let them follow me. I've spoke about a lot
of subjects that are not even mentioned like JavaScript benchmarking,
V8, FOSS work-flow... I find it more dynamic and -I hope- less boring
for the audience.</p>
<p>It was a nice experience and I'm glad to have spread Firefox and Mozilla!</p>
<p><a href="http://www.flickr.com/photos/98076244@N00/4110277649/"><img alt="classroom shot" src="http://farm3.static.flickr.com/2561/4110277649_01b3573f80.jpg" title=""></a>
<a href="http://www.flickr.com/photos/98076244@N00/4110277663/"><img alt="classroom shot" src="http://farm3.static.flickr.com/2513/4110277663_94442d6358.jpg" title=""></a></p>Introducing media-video/miro2009-10-30T11:53:00+01:002009-10-30T11:53:00+01:00Mounir Lamouritag:mounir.lamouri.fr,2009-10-30:/2009/10/introducing-media-videomiro.html<p><a href="http://getmiro.com/">Miro</a> described itself as <em>Open-source, non-profit video player and
podcast client</em>. It's actually somewhat a swiss-knife for videos if you
are using video sharing services (like youtube or dailymotion),
following podcasts and downloading videos via bittorrent.<br>
Miro lets you do everything in one place. You can directly search for a …</p><p><a href="http://getmiro.com/">Miro</a> described itself as <em>Open-source, non-profit video player and
podcast client</em>. It's actually somewhat a swiss-knife for videos if you
are using video sharing services (like youtube or dailymotion),
following podcasts and downloading videos via bittorrent.<br>
Miro lets you do everything in one place. You can directly search for a
video, download it and see it locally. Then you can organize your videos
whatever it comes from and remove them when you want. To me, it's sound
like the equivalent of <a href="http://getsongbird.com/">songbird</a> for videos.</p>
<p>Miro is also known for it's <a href="https://www.getmiro.com/adopt/">"Adopt a line"</a> campaign which
consist of paying 4$ per month to adopt a line of code and support the
project. An innovative idea which seems to work.</p>
<p>So, <a href="https://bugs.gentoo.org/131527">bug 131527</a> is now fixed and Miro is known as media-video/miro in
Gentoo's tree.<br>
Try it and report bugs !</p>Gentoo/PPC needs you !2009-10-04T23:41:00+02:002009-10-04T23:41:00+02:00Mounir Lamouritag:mounir.lamouri.fr,2009-10-04:/2009/10/gentooppc-needs-you.html<p>Gentoo/PPC team is here to make sure packages are marked stable and are
keyworded as soon as possible and without breaking the tree.
Unfortunately, we can't manage the flow of bugs coming and the list is
growing too quickly.<br>
Stabilizing and keywording is a big work. Fauli have explained …</p><p>Gentoo/PPC team is here to make sure packages are marked stable and are
keyworded as soon as possible and without breaking the tree.
Unfortunately, we can't manage the flow of bugs coming and the list is
growing too quickly.<br>
Stabilizing and keywording is a big work. Fauli have explained it a few
weeks ago in a <a href="http://www.faulhammer.org/archiv-mainmenu-31/35-gentoo/298-architecture-work-the-way-i-do-it">blog entry</a>.</p>
<p>So if you have a PowerPC and you want to help, you can and we will
appreciate it !<br>
First of all, look at the <a href="http://www.gentoo.org/proj/en/base/ppc/AT/index.xml">Gentoo/PPC testing doc</a>. Some things may be
outdated, consider essentially the procedures.</p>
<p>I've made some bug lists to make the life of everybody easier:<br>
- <a href="http://tinyurl.com/gentoo-ppc-stablereq">stabilization requests</a><br>
- <a href="http://tinyurl.com/gentoo-ppc-keywordreq">keyword requests</a><br>
- <a href="http://tinyurl.com/gentoo-ppc-security">security bugs</a></p>
<p>Please, refer to the Gentoo/PPC testing doc if you want to help on one
of these bugs.</p>
<p>Do not hesitate to come see us on #gentoo-powerpc on freenode.</p>