atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Tim Taubert]]></title>
  <link href="http://timtaubert.de/atom.xml" rel="self"/>
  <link href="http://timtaubert.de/"/>
  <updated>2014-01-15T15:33:03+01:00</updated>
  <id>http://timtaubert.de/</id>
  <author>
    <name><![CDATA[Tim Taubert]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Scotland.JS 2013 in Edinburgh]]></title>
    <link href="http://timtaubert.de/blog/2013/05/scotland-js-2013-in-edinburgh/"/>
    <updated>2013-05-14T08:00:00+02:00</updated>
    <id>http://timtaubert.de/blog/2013/05/scotland-js-2013-in-edinburgh</id>
    <content type="html"><![CDATA[<p>I got to spend Wednesday through Friday in Edinburgh last week to attend
<a href="http://www.scotlandjs.com/">Scotland.JS</a>. Edinburgh is a lovely city and I will
definitely return to get to know it better. It has great people, beers, food and
even a castle - what could one want more?</p>

<p>I arrived on Wednesday, just in time for the
<a href="http://techmeetup.co.uk/">TechMeetup</a>. It took place in the Appleton Tower and
had about 70-80 attendees with quite diverse technical backgrounds. I had a very
interesting talk to a freelance patent attorney and also met a couple of people
I knew from recent conferences and meetups in Berlin. After we were out of free
pizza and beers we met most of the Scotland.JS attendees in a pub right next to
the Appleton Tower. Cue more beers and tech conversations.</p>

<p>Thursday was the first day of Scotland.JS that started with
<a href="http://decadecity.net/blog/2013/05/09/jan-lehnardt-scotlandjs-opening-keynote">a great keynote</a>
from <a href="https://twitter.com/janl">Jan Lehnardt</a>. The most memorable talk of the
day was about
<a href="http://decadecity.net/blog/2013/05/09/philip-roberts-enemy-state-introduction-functional-reactive-programming-and-baconjs">Functional Reactive Programming using Bacon.js</a>
by <a href="https://twitter.com/philip_roberts">Philip Roberts</a>. There of course were a
lot more great talks but the possibilities of creating and combining event
streams kept my head spinning the most. At the end of the day we again went to a
neat pub near the venue and I headed to bed rather early, still a little tired
from travel and the day before.</p>

<p><img src="http://timtaubert.de/images/scotlandjs.jpg" title="Scotland.JS organizer Peter Aitken on stage" ></p>

<p>Friday started with a short 20-minute walk through Edinburgh&#8217;s old town that I
needed to pass on my way to the venue. My favorite talk of the second and last
day was held by <a href="https://twitter.com/dominictarr">Dominic Tarr</a> that tought us
about
<a href="http://decadecity.net/blog/2013/05/10/dominic-tarr-database-future-leveldb">the internals of leveldb</a>.
I also really enjoyed <a href="https://twitter.com/maboa">Mark Boas</a> talking about
<a href="http://happyworm.com/slides/scotlandjs2013/">making audio a first-class citizen of the web</a>
- a very entertaining and impressive mix of technologies. A GitHub drinkup in
the venue&#8217;s own pub was a great way to end the conference - lots of good
conversations with Scotland.JS attendees and speakers as well as people from the
local tech community and visitors of the Scottish Ruby Conf.</p>

<p>I flew home the very next day and already miss Edinburgh with its neat little
alleys and pubs everywhere. The JavaScript community has once again shown its
value as a very interesting mix of nice welcoming people coming from so many
different technical backgrounds. Like after most conferences I feel a little
exhausted and my head is full of ideas for future or current (side-)projects. I
will try my best to return next year, it has been a lot of fun!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Working with infinite sequences in JavaScript]]></title>
    <link href="http://timtaubert.de/blog/2013/05/working-with-infinite-sequences-in-javascript/"/>
    <updated>2013-05-06T12:00:00+02:00</updated>
    <id>http://timtaubert.de/blog/2013/05/working-with-infinite-sequences-in-javascript</id>
    <content type="html"><![CDATA[<p>JavaScript comes with most of the little functional tools you need to work on
finite sequences that are usually implemented using Arrays. Array.prototype
includes a number of methods like <em>map()</em> and <em>filter()</em> that apply a given
function to all items of the Array and return the resulting new Array.</p>

<figure class='code'> <div class="highlight"><pre><span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">].</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">x</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span> <span class="c1">// result: [2, 3, 4];</span>
</pre></div></figure>


<p>These tools however are not a good fit for infinite sequences as they always
consume the whole sequence at once to return a new one. Implementing infinite
sequences by yourself means you would have to come up with your own API that
clients need to adhere to. You often would keep state variables whose values
need to be maintained for the duration of the computation process.</p>

<h2>Generators to the rescue</h2>

<p>Using ES6
<a href="http://wiki.ecmascript.org/doku.php?id=harmony:generators">generators</a>
implementing the infinite sequence of all natural numbers turns out to be a
trivial task. We even have language support to iterate over them.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span><span class="o">*</span> <span class="nx">nat</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
  <span class="k">while</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">yield</span> <span class="nx">i</span><span class="o">++</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">num</span> <span class="k">of</span> <span class="nx">nat</span><span class="p">())</span> <span class="p">{</span>
  <span class="nx">print</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
<span class="p">}</span>

<span class="c1">// prints 1 2 3 4 ...</span>
</pre></div></figure>


<p>Now that we have a first infinite set we need a couple of functions that help us
working with, combining, and building new sequences.</p>

<h2>Mapping</h2>

<p>Let us start with <em>map()</em> - a function at the very heart of functional
programming. It builds a new sequence by applying a function to all elements of
a given sequence.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span><span class="o">*</span> <span class="nx">map</span><span class="p">(</span><span class="nx">it</span><span class="p">,</span> <span class="nx">f</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">x</span> <span class="k">of</span> <span class="nx">it</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">yield</span> <span class="nx">f</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<p>Using the generator implementation of <em>map()</em> we can now easily write a function
called <em>squares()</em> that represents the set of squares of all natural numbers
(1², 2², 3², &#8230;, n²).</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">squares</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">map</span><span class="p">(</span><span class="nx">nat</span><span class="p">(),</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">x</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">num</span> <span class="k">of</span> <span class="nx">squares</span><span class="p">())</span> <span class="p">{</span>
  <span class="nx">print</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
<span class="p">}</span>

<span class="c1">// prints 1 4 9 16 ...</span>
</pre></div></figure>


<p>As we are using
<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/for...of">for&#8230;of</a>
we can also pass an Array to <em>map()</em> to retrieve a new generator with a finite
source. The given function is applied to value after value instead of to all
values at once when using <em>Array.prototype.map</em>.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">let</span> <span class="nx">squares</span> <span class="o">=</span> <span class="nx">map</span><span class="p">([</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">],</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">x</span><span class="p">);</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">num</span> <span class="k">of</span> <span class="nx">squares</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">print</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
<span class="p">}</span>

<span class="c1">// prints 1 4 9</span>
</pre></div></figure>


<h2>Filtering</h2>

<p>Another common task is filtering specific values from a sequence. Our custom
implementation of <em>filter()</em> takes an iterator and a predicate - the returned
sequence will consist of all items of the original one for which the predicate
holds.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span><span class="o">*</span> <span class="nx">filter</span><span class="p">(</span><span class="nx">it</span><span class="p">,</span> <span class="nx">f</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">x</span> <span class="k">of</span> <span class="nx">it</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">f</span><span class="p">(</span><span class="nx">x</span><span class="p">))</span> <span class="p">{</span>
      <span class="k">yield</span> <span class="nx">x</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<p>We can now use <em>filter()</em> to create the set of all even natural numbers.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">even</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">filter</span><span class="p">(</span><span class="nx">nat</span><span class="p">(),</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">num</span> <span class="k">of</span> <span class="nx">even</span><span class="p">())</span> <span class="p">{</span>
  <span class="nx">print</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
<span class="p">}</span>

<span class="c1">// prints 2 4 6 8 ...</span>
</pre></div></figure>


<p>A common derivation from <em>filter()</em> is <em>filterNot()</em> that simply negates the
given predicate. We can use that to implement <em>even()</em> as well.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">filterNot</span><span class="p">(</span><span class="nx">it</span><span class="p">,</span> <span class="nx">f</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">filter</span><span class="p">(</span><span class="nx">it</span><span class="p">,</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="o">!</span><span class="nx">f</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">even</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">filterNot</span><span class="p">(</span><span class="nx">nat</span><span class="p">(),</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
</pre></div></figure>


<h2>Mersenne primes</h2>

<p>Suppose we were to implement a sequence that represents all
<a href="https://en.wikipedia.org/wiki/Mersenne_prime">Mersenne prime numbers</a>.
Mersenne primes are defined as prime numbers of the form M<sub>n</sub> = 2<sup>n</sup> - 1,
that is the set of all numbers of the given form that have no positive divisors
other than 1 and themselves. The set of Mersenne primes is
<a href="https://en.wikipedia.org/wiki/Lenstra%E2%80%93Pomerance%E2%80%93Wagstaff_conjecture">assumed to be infinite</a>
though this remains unproven, yet.</p>

<p>Let us first define some helper functions. <em>range(from, to)</em> and <em>forall()</em> are
common helpers in functional programming languages. <em>range()</em> returns the set of
natural numbers in a given range. <em>forall()</em> returns whether the given predicate
holds for all items in the sequence and should therefore only be used for finite
sequences.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span><span class="o">*</span> <span class="nx">range</span><span class="p">(</span><span class="nx">lo</span><span class="p">,</span> <span class="nx">hi</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">while</span> <span class="p">(</span><span class="nx">lo</span> <span class="o">&lt;=</span> <span class="nx">hi</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">yield</span> <span class="nx">lo</span><span class="o">++</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">forall</span><span class="p">(</span><span class="nx">it</span><span class="p">,</span> <span class="nx">f</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">x</span> <span class="k">of</span> <span class="nx">it</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">f</span><span class="p">(</span><span class="nx">x</span><span class="p">))</span> <span class="p">{</span>
      <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">}</span>

  <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
</pre></div></figure>


<p><em>mersenneNumbers()</em> is the set of all numbers of the form M<sub>n</sub> = 2<sup>n</sup> - 1.
<em>isPrime()</em> is a very simple and naive (and slow) primality checker that returns
whether the given candidate is divisible by any of the numbers in the range of
[2, candidate - 1]. We will use <em>isPrime()</em> as a filter to remove all non-prime
numbers from <em>mersenneNumbers()</em>.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">mersenneNumbers</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">map</span><span class="p">(</span><span class="nx">nat</span><span class="p">(),</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="nx">x</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">mersennePrimes</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">function</span> <span class="nx">isPrime</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">forall</span><span class="p">(</span><span class="nx">range</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="nx">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">),</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">n</span> <span class="o">%</span> <span class="nx">x</span><span class="p">);</span>
  <span class="p">}</span>

  <span class="k">return</span> <span class="nx">filter</span><span class="p">(</span><span class="nx">mersenneNumbers</span><span class="p">(),</span> <span class="nx">isPrime</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">mprime</span> <span class="k">of</span> <span class="nx">mersennePrimes</span><span class="p">())</span> <span class="p">{</span>
  <span class="nx">print</span><span class="p">(</span><span class="nx">mprime</span><span class="p">);</span>
<span class="p">}</span>

<span class="c1">// prints 3 7 31 127 ...</span>
</pre></div></figure>


<h2>Flattening</h2>

<p>As a last example we will implement a function that flattens nested sequences.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span><span class="o">*</span> <span class="nx">flatten</span><span class="p">(</span><span class="nx">it</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">x</span> <span class="k">of</span> <span class="nx">it</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">x</span><span class="p">[</span><span class="s2">&quot;@@iterator&quot;</span><span class="p">])</span> <span class="o">==</span> <span class="s2">&quot;function&quot;</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">yield</span><span class="o">*</span> <span class="nx">flatten</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
      <span class="k">yield</span> <span class="nx">x</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<p>Note that using <em>for&#8230;of</em> comes in handy again as we can use it to iterate
over Arrays and generators. Using <em>flatten()</em> we can now do:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">let</span> <span class="nx">it</span> <span class="o">=</span> <span class="nx">flatten</span><span class="p">([</span><span class="mi">1</span><span class="p">,</span> <span class="p">[</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">],</span> <span class="p">[[</span><span class="mi">4</span><span class="p">],</span> <span class="p">[</span><span class="mi">5</span><span class="p">]]]);</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">num</span> <span class="k">of</span> <span class="nx">it</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">print</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
<span class="p">}</span>

<span class="c1">// prints 1 2 3 4 5</span>
</pre></div></figure>


<p>Combining <em>flatten()</em> and <em>map()</em> to <em>flatMap()</em> we can implement another very
common function that flattens the result of applying a given function to all
items of a sequence. Let us use it to re-build the set of all natural numbers
from the set of all even natural numbers.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">flatMap</span><span class="p">(</span><span class="nx">it</span><span class="p">,</span> <span class="nx">f</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">flatten</span><span class="p">(</span><span class="nx">map</span><span class="p">(</span><span class="nx">it</span><span class="p">,</span> <span class="nx">f</span><span class="p">));</span>
<span class="p">}</span>

<span class="kd">let</span> <span class="nx">it</span> <span class="o">=</span> <span class="nx">flatMap</span><span class="p">(</span><span class="nx">even</span><span class="p">(),</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="p">[</span><span class="nx">x</span> <span class="o">-</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">x</span><span class="p">]);</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">num</span> <span class="k">of</span> <span class="nx">it</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">print</span><span class="p">(</span><span class="nx">num</span><span class="p">);</span>
<span class="p">}</span>

<span class="c1">// prints 1 2 3 4 ...</span>
</pre></div></figure>


<h2>Generators are powerful</h2>

<p>It is quite obvious that studying ES6 generators really repays. Thanks to Andy
Wingo these are available in the latest versions of
<a href="http://wingolog.org/archives/2013/10/07/es6-generators-and-iteration-in-spidermonkey">Firefox</a> and
<a href="http://wingolog.org/archives/2013/05/08/generators-in-v8">Chrome</a>. They will be
in the toolbox of every professional JavaScript developer soon and I am sure we
can count on the community to come up with lots of great uses and libraries.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Stop. Iteration time!]]></title>
    <link href="http://timtaubert.de/blog/2013/05/stop-iteration-time/"/>
    <updated>2013-05-03T18:00:00+02:00</updated>
    <id>http://timtaubert.de/blog/2013/05/stop-iteration-time</id>
    <content type="html"><![CDATA[<p>You have probably already heard of
<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators">generators and iterators</a>
coming to a browser near you. They have been available in Firefox for a long
time and are used extensively all over the Mozilla code base. The V8 team
will implement iterators and generators
<a href="http://code.google.com/p/v8/issues/detail?id=2355">once ES6 has been finalized</a>.</p>

<p>This post describes the current implementation in SpiderMonkey and tries to
include the current state of the ES6 draft and discussions.</p>

<h2>A simple generator</h2>

<p>Let us take a look at a simple example of a generator function that represents
an infinite sequence containing all the numbers from 0 to <em>Number.MAX_VALUE</em>.
Once it reaches <em>MAX_VALUE</em> it will not increase any further but always return
the same number.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">myInfiniteGenerator</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">while</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">yield</span> <span class="nx">i</span><span class="o">++</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="kd">var</span> <span class="nx">iter</span> <span class="o">=</span> <span class="nx">myInfiniteGenerator</span><span class="p">();</span>

<span class="k">while</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">iter</span><span class="p">.</span><span class="nx">next</span><span class="p">());</span>
<span class="p">}</span>
</pre></div></figure>


<p>Any object of the following shape is an
<a href="http://wiki.ecmascript.org/doku.php?id=harmony:iterators">iterator</a>:</p>

<figure class='code'> <div class="highlight"><pre><span class="p">{</span> <span class="nx">next</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="o">-&gt;</span> <span class="nx">any</span> <span class="p">}</span>
</pre></div></figure>


<p>The <em>next()</em> method simply returns the item next in the sequence.</p>

<h2>Finite sequences</h2>

<p>As you surely noticed the generator of the first example produces iterators that
will never run out of items. The next example shows an iterator representing a
finite sequence:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">MyFiniteIterator</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">cur</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">this</span><span class="p">.</span><span class="nx">max</span> <span class="o">=</span> <span class="nx">max</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">MyFiniteIterator</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">next</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cur</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">cur</span><span class="o">++</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="k">throw</span> <span class="nx">StopIteration</span><span class="p">;</span>
<span class="p">};</span>
</pre></div></figure>


<p>The given code implements a custom iterator without writing a generator
function. Note that it throws <em>StopIteration</em> as soon as it reaches the maximum
value to signal that the sequence is exhausted. It is a lot more elegant to
implement the same sequence using a generator function:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">myFiniteGenerator</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
  <span class="k">while</span> <span class="p">(</span><span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">yield</span> <span class="nx">i</span><span class="o">++</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<p>Generator functions will automatically throw <em>StopIteration</em> when terminating.
So how should one consume iterators with finite sequences?</p>

<h2>Consuming sequences</h2>

<p>In Java for example, you would check <em>iter.hasNext()</em> and stop when it returns
false. In JavaScript however you need to use a <em>try&#8230;catch</em> statement to catch
<em>StopIteration</em> when it is being thrown.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">iter</span> <span class="o">=</span> <span class="nx">myFiniteGenerator</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span>

<span class="k">while</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">try</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">iter</span><span class="p">.</span><span class="nx">next</span><span class="p">());</span>
  <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span> <span class="k">if</span> <span class="nx">e</span> <span class="o">===</span> <span class="nx">StopIteration</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">break</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<p>You might wonder if there is a better way to do this and indeed there is. Using
<em>for&#8230;in</em> or <em>for&#8230;of</em> you do not have to catch <em>StopIteration</em> yourself, the
JavaScript engine will do it for you. As soon as the sequence is exhausted the
loop will terminate normally without the exception being propagated:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">iter</span> <span class="o">=</span> <span class="nx">myFiniteGenerator</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">iter</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
<span class="p">}</span>
</pre></div></figure>


<h2>StopIteration is special</h2>

<p><em>StopIteration</em> actually is a standard variable that is bound to an object of
class <em>StopIteration</em>. It is an ordinary object with no properties of its own
and it is not a constructor function.</p>

<figure class='code'> <div class="highlight"><pre><span class="k">try</span> <span class="p">{</span>
  <span class="k">throw</span> <span class="nx">StopIteration</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span> <span class="k">if</span> <span class="nx">e</span> <span class="k">instanceof</span> <span class="nx">StopIteration</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">// This works because:</span>
  <span class="nx">StopIteration</span> <span class="k">instanceof</span> <span class="nx">StopIteration</span> <span class="o">===</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
</pre></div></figure>


<p>As <em>StopIteration</em> is a singleton of type <em>StopIteration</em> you can also catch it
by checking for equality:</p>

<figure class='code'> <div class="highlight"><pre><span class="k">try</span> <span class="p">{</span>
  <span class="k">throw</span> <span class="nx">StopIteration</span><span class="p">;</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span> <span class="k">if</span> <span class="nx">e</span> <span class="o">===</span> <span class="nx">StopIteration</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">// ... handle exception</span>
<span class="p">}</span>
</pre></div></figure>


<h2>StopIteration is mutable</h2>

<p>You should be aware that <em>StopIteration</em> is a mutable global. Just like
<em>undefined</em> it can be modified to hold any other value. If you write a library
and want to shield against modifications from outside you can use this neat
little trick I found on
<a href="http://calculist.blogspot.de/2008/04/how-to-spell-stopiteration.html">Dave Herman&#8217;s blog</a>:</p>

<figure class='code'> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="k">try</span><span class="p">{(</span><span class="kd">function</span><span class="p">(){</span><span class="kc">true</span><span class="o">||</span><span class="p">(</span><span class="k">yield</span><span class="p">)})().</span><span class="nx">next</span><span class="p">()}</span><span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span><span class="k">return</span> <span class="nx">e</span><span class="p">}})()</span>
</pre></div></figure>


<p>The inner function is a generator that terminates immediately and therefore will
throw a <em>StopIteration</em>. The outer function simply catches and returns it.</p>

<h2>StopIteration may become a constructor</h2>

<p>The current
<a href="http://wiki.ecmascript.org/doku.php?id=harmony:iterators#stopiteration">iterator strawman</a>
states that <em>StopIteration</em> will become a constructor to maintain compatibility
with generator functions returning values.</p>

<figure class='code'> <div class="highlight"><pre><span class="nx">Iter</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">next</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cur</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">cur</span><span class="o">++</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="kd">var</span> <span class="nx">stop</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">StopIteration</span><span class="p">();</span>
  <span class="nx">stop</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="s2">&quot;sequence exhausted&quot;</span><span class="p">;</span>
  <span class="k">throw</span> <span class="nx">stop</span><span class="p">;</span>
<span class="p">};</span>
</pre></div></figure>


<p>The equality check from above would not work anymore so it might be better to
just use <em>instanceof</em>.</p>

<h2>StopIteration may not be part of ES6</h2>

<p>The Python way of throwing to denote the end of a sequence is backwards
compatible with old ECMAScript versions but there seem to be
<a href="https://mail.mozilla.org/pipermail/es-discuss/2013-February/028668.html">people</a>
<a href="https://mail.mozilla.org/pipermail/es-discuss/2013-March/028937.html">not happy</a>
<a href="http://esdiscuss.org/notes/2013-03-12">with the current proposal</a>.
While I can&#8217;t tell whether <em>StopIteration</em> is really to be removed a couple of
alternative suggestions have been made:</p>

<h3>Introduce a keyword to end a frame</h3>

<p>To not misuse exceptions for normal control flow ES6 could introduce a
<em>stopiteration</em> or <em>endframe</em> keyword that would end the current frame with
an optional return value. The obvious downside is that it is probably not
backwards compatible.</p>

<figure class='code'> <div class="highlight"><pre><span class="nx">Iter</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">next</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cur</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">cur</span><span class="o">++</span><span class="p">;</span>
  <span class="p">}</span>

  <span class="k">stopiteration</span> <span class="p">[</span><span class="nx">reason</span><span class="p">];</span>
  <span class="c1">// or endframe [reason];</span>
<span class="p">};</span>
</pre></div></figure>


<h3>Add an iterator.hasNext() method</h3>

<p>Just like Java the iterator API could consist of the two methods <em>next()</em> and
<em>hasNext()</em>. The client would then need to check <em>hasNext()</em> every time before
calling <em>next()</em>.</p>

<figure class='code'> <div class="highlight"><pre><span class="nx">Iter</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">hasNext</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">cur</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">max</span><span class="p">;</span>
  <span class="p">},</span>

  <span class="nx">next</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">hasNext</span><span class="p">())</span> <span class="p">{</span>
      <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">cur</span><span class="o">++</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">&quot;sequence exhausted&quot;</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">};</span>
</pre></div></figure>


<h3>Let next() always return an object</h3>

<p>Custom iterators would be required to implement a single method but would not
need to throw. Instead they would return an object with the property <em>done</em> set
to true to indicate that the sequence has ended. The <em>value</em> property would be
used to store values passed to <em>yield</em> or <em>return</em> in a generator function.</p>

<figure class='code'> <div class="highlight"><pre><span class="p">{</span>
  <span class="nx">next</span><span class="p">()</span> <span class="o">-&gt;</span> <span class="p">{</span> <span class="nx">done</span><span class="o">:</span> <span class="kc">false</span> <span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">any</span> <span class="p">}</span>
          <span class="o">|</span> <span class="p">{</span> <span class="nx">done</span><span class="o">:</span> <span class="kc">true</span><span class="p">[,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">any</span><span class="p">]</span> <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<h3>Food for thought</h3>

<p>This is in no way a complete list of possibilities or proposals that were
brought up on <a href="http://mail.mozilla.org/pipermail/es-discuss/">es-discuss</a> so
please make up your own mind about the current iterators implementation and the
suggested improvements.</p>

<h2>The future is bright</h2>

<p>Whether or not <em>StopIteration</em> will end up in ES6, generators and iterators are
great and you should make sure to be prepared when they become available in
modern browsers as well as on Node.js.</p>

<p>I concentrated particularly on <em>StopIteration</em> but there are
<a href="http://jlongster.com/2012/10/05/javascript-yield.html">lots of</a>
<a href="http://ejohn.org/blog/javascript-18-progress/">great</a>
<a href="http://bjouhier.wordpress.com/2012/05/18/asynchronous-javascript-with-generators-an-experiment/">posts</a>
out there that go way more into depth about generators and their usage. Make
sure to also take a look at libraries like <a href="http://taskjs.org/">Task.js</a> that
combines generators with promises to cooperative tasks.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[getUserMedia() part 3: simple motion detection in a live video]]></title>
    <link href="http://timtaubert.de/blog/2013/02/getusermedia-part-3-simple-motion-detection-in-a-live-video/"/>
    <updated>2013-02-27T12:00:00+01:00</updated>
    <id>http://timtaubert.de/blog/2013/02/getusermedia-part-3-simple-motion-detection-in-a-live-video</id>
    <content type="html"><![CDATA[<p>Now that you should already know how to build a
<a href="http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams/">live green screen</a>
and an
<a href="http://timtaubert.de/blog/2012/10/getusermedia-part-2-building-an-eyetoy-like-mini-game/">EyeToy-like mini-game</a>
using nothing but plain JavaScript and a modern browser supporting WebRTC, let
us move on to another interesting example: simple motion detection in a live
video.</p>

<h2>The initialization code</h2>

<p>To detect motion in a video we need to compare at least two frames. We will use
<a href="https://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays">typed arrays</a>
to store the lightness data of the previous frames:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">initialize</span><span class="p">()</span> <span class="p">{</span>
  <span class="c1">// ... code to initialize the canvas and video elements ...</span>

  <span class="c1">// Prepare buffers to store lightness data.</span>
  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">buffers</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">(</span><span class="nx">width</span> <span class="o">*</span> <span class="nx">height</span><span class="p">));</span>
  <span class="p">}</span>

  <span class="c1">// Get the webcam&#39;s stream.</span>
  <span class="nx">nav</span><span class="p">.</span><span class="nx">getUserMedia</span><span class="p">({</span><span class="nx">video</span><span class="o">:</span> <span class="kc">true</span><span class="p">},</span> <span class="nx">startStream</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{});</span>
<span class="p">}</span>
</pre></div></figure>


<p>We want two frame buffers - a single one results in a heavily
flickering motion video but the more frames we store the more motion blur
we will see. Two seems like a good value for demonstration purposes.</p>

<h2>Illustrating lightness changes</h2>

<p>The main <em>draw()</em> function from
<a href="http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams/">part 1</a>
did not change except that we now call <em>markLightnessChanges()</em> for every frame.
This is also the probably most interesting function of the whole demo:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">markLightnessChanges</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">// Pick the next buffer (round-robin).</span>
  <span class="kd">var</span> <span class="nx">buffer</span> <span class="o">=</span> <span class="nx">buffers</span><span class="p">[</span><span class="nx">bufidx</span><span class="o">++</span> <span class="o">%</span> <span class="nx">buffers</span><span class="p">.</span><span class="nx">length</span><span class="p">];</span>

  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">buffer</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">,</span> <span class="nx">j</span> <span class="o">+=</span> <span class="mi">4</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// Determine lightness value.</span>
    <span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">lightnessValue</span><span class="p">(</span><span class="nx">data</span><span class="p">[</span><span class="nx">j</span><span class="p">],</span> <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">1</span><span class="p">],</span> <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">2</span><span class="p">]);</span>

    <span class="c1">// Set color to black.</span>
    <span class="nx">data</span><span class="p">[</span><span class="nx">j</span><span class="p">]</span> <span class="o">=</span> <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

    <span class="c1">// Full opacity for changes.</span>
    <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">3</span><span class="p">]</span> <span class="o">=</span> <span class="mi">255</span> <span class="o">*</span> <span class="nx">lightnessHasChanged</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">current</span><span class="p">);</span>

    <span class="c1">// Store current lightness value.</span>
    <span class="nx">buffer</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">current</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<p>We determine the lightness value of every pixel in the canvas and compare it
to its values in the previously captured frames. If the difference to one of
those buffers exceeds a specific threshold the pixel will be black, if not it
becomes transparent.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">lightnessHasChanged</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">buffers</span><span class="p">.</span><span class="nx">some</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">buffer</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">value</span> <span class="o">-</span> <span class="nx">buffer</span><span class="p">[</span><span class="nx">index</span><span class="p">])</span> <span class="o">&gt;=</span> <span class="mi">15</span><span class="p">;</span>
  <span class="p">});</span>
<span class="p">}</span>
</pre></div></figure>


<h2>Blend mode difference</h2>

<p>The simple method we use to detect motion is called a
<a href="http://en.wikipedia.org/wiki/Blend_modes#Difference">blend mode difference</a>.
That is a quite fancy word to say: we compare two images (also called layers
or frames) by putting them on top of each other and subtracting the bottom from
the top layer. In this example we do it for every pixel&#8217;s L-value of the
<a href="https://en.wikipedia.org/wiki/HSL_and_HSV">HSL color model</a>.</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">lightnessValue</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">+</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">))</span> <span class="o">/</span> <span class="mi">255</span> <span class="o">*</span> <span class="mi">50</span><span class="p">;</span>
<span class="p">}</span>
</pre></div></figure>


<p>If the current frame is identical to the previous one, the lightness
difference will be exactly zero for all pixels. If the frames differ because
something in that picture has moved then there is a good chance that lightness
values change where motion occured. A small threshold ensures that we ignore
noise in the signal.</p>

<h2>Demo and screencast</h2>

<p>That is all! Take a look at the <a href="http://timtaubert.de/demos/motion-detection/">live demo</a> or watch
the screencast below:</p>

<iframe class="embed embed-space"
 src="http://player.vimeo.com/video/60650211?title=1&amp;byline=1&amp;portrait=1"
 width="500" height="195" frameborder="0"
 webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>


<p>You can create some really great demos with this simple technique. Here is a
neat one of
<a href="http://www.soundstep.com/blog/experiments/jsdetection/">a xylophone you can play by waving your hands</a>
(which unfortunately does not work in Firefox).</p>

<p>Whatever your ideas may be, I encourage you to fiddle around with the small
demos I provided in my three getUserMedia() examples so far and let me know if
you built something amazing!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Note to myself: Don't be lazy]]></title>
    <link href="http://timtaubert.de/blog/2013/02/note-to-myself-dont-be-lazy/"/>
    <updated>2013-02-25T12:00:00+01:00</updated>
    <id>http://timtaubert.de/blog/2013/02/note-to-myself-dont-be-lazy</id>
    <content type="html"><![CDATA[<p>Back in October 2012 I wrote two blog posts,
<a href="http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams/">getUserMedia part 1</a>
and <a href="http://timtaubert.de/blog/2012/10/getusermedia-part-2-building-an-eyetoy-like-mini-game/">part 2</a>,
including demos which unfortunately would run in Firefox, only. I did not
explicitly want to be exclusive but I think I just did not feel like looking up
why my code did not work in Opera and why exactly webkitGetUserMedia() behaved
differently than mozGetUserMedia(). I was being lazy.</p>

<p>I also intended to mix in a couple of nice JavaScript features, like
block-scoped variable definitions with
<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let">let</a>,
<a href="https://developer.mozilla.org/en-US/docs/JavaScript/New_in_JavaScript/1.7">destructuring assignments</a>
or <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Set">Sets</a>
(did I just do it again?). In hindsight this does not really make sense as I
should not expect visitors to want to learn about cutting-edge JavaScript
features when viewing a getUserMedia() post.</p>

<p>Before finishing my third piece on getUserMedia() I decided to update the demos
of my older posts to run in any modern browser. I also seized the chance to
overhaul code examples which did not adhere to my coding standards anymore.</p>

<p>If you should ever be in a similar situation - please take a couple of minutes
to write code that runs in all modern browsers so people can enjoy your demos in
their browser of choice. Please don&#8217;t be lazy.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[getUserMedia() part 2: building an EyeToy-like mini-game]]></title>
    <link href="http://timtaubert.de/blog/2012/10/getusermedia-part-2-building-an-eyetoy-like-mini-game/"/>
    <updated>2012-10-18T22:00:00+02:00</updated>
    <id>http://timtaubert.de/blog/2012/10/getusermedia-part-2-building-an-eyetoy-like-mini-game</id>
    <content type="html"><![CDATA[<p>This post is a follow-up to my previous one about
<a href="http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams/">building a live green screen with getUserMedia() and MediaStreams</a>.
If you have not read it yet, this might be a good time. We will extend the small
example to build an EyeToy-like mini-game.</p>

<h2>Some additions</h2>

<figure class='code'> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">video</span><span class="p">,</span> <span class="nx">width</span><span class="p">,</span> <span class="nx">height</span><span class="p">,</span> <span class="nx">context</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">revealed</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>

<span class="kd">function</span> <span class="nx">initialize</span><span class="p">()</span> <span class="p">{</span>
</pre></div></figure>


<p>First, we will add a variable called <em>revealed</em> that keeps track of all pixels
that have already been revealed by holding a green object in front of the
camera. Instead of <em>replaceGreen()</em> we will call our method <em>revealGreen()</em>
from now on:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">revealGreen</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">width</span> <span class="o">*</span> <span class="nx">height</span><span class="p">;</span>

  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">,</span> <span class="nx">j</span> <span class="o">+=</span> <span class="mi">4</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// This pixel has already been revealed.</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="nx">revealed</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">3</span><span class="p">]</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="k">continue</span><span class="p">;</span>
    <span class="p">}</span>
</pre></div></figure>


<p>When iterating over all of the canvas&#8217; pixels we check whether the current index
is marked as revealed. If so we do not need to check its color but set its
opacity to zero and continue with the next iteration.</p>

<figure class='code'> <div class="highlight"><pre>    <span class="c1">// Convert from RGB to HSL...</span>
    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">rgb2hsl</span><span class="p">(</span><span class="nx">data</span><span class="p">[</span><span class="nx">j</span><span class="p">],</span> <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">1</span><span class="p">],</span> <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">2</span><span class="p">]);</span>
    <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">[</span><span class="mi">2</span><span class="p">];</span>

    <span class="c1">// ... and check if we have a somewhat green pixel.</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">h</span> <span class="o">&gt;=</span> <span class="mi">90</span> <span class="o">&amp;&amp;</span> <span class="nx">h</span> <span class="o">&lt;=</span> <span class="mi">160</span> <span class="o">&amp;&amp;</span> <span class="nx">s</span> <span class="o">&gt;=</span> <span class="mi">25</span> <span class="o">&amp;&amp;</span> <span class="nx">s</span> <span class="o">&lt;=</span> <span class="mi">90</span> <span class="o">&amp;&amp;</span> <span class="nx">l</span> <span class="o">&gt;=</span> <span class="mi">20</span> <span class="o">&amp;&amp;</span> <span class="nx">l</span> <span class="o">&lt;=</span> <span class="mi">75</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">3</span><span class="p">]</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
      <span class="nx">revealed</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<p>If the pixel has not been revealed yet but is a green one, we make it
transparent like before and mark it to stay that way.</p>

<h2>Demo and screencast</h2>

<p>That is all! Take a look at the <a href="http://timtaubert.de/demos/eye-toy/">live demo</a> or watch the
screencast below:</p>

<iframe class="embed"
 src="http://player.vimeo.com/video/51703468?title=1&amp;byline=1&amp;portrait=1"
 width="500" height="195" frameborder="0"
 webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>


<h2>I know&#8230;</h2>

<p>&#8230; this is not much of a game but rather a small demo one could turn into a
mini-game with little effort. Play around with the code and see what you can
come up with!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Building a live green screen with getUserMedia() and MediaStreams]]></title>
    <link href="http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams/"/>
    <updated>2012-10-17T20:00:00+02:00</updated>
    <id>http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams</id>
    <content type="html"><![CDATA[<p>While recently watching a talk about the new WebRTC features I was reminded of
Paul Rouget&#8217;s great
<a href="https://developer.mozilla.org/samples/video/chroma-key/index.xhtml">green screen demo</a>
and thought that this would be a cool thing to have for live video as well.
Let us build a live green screen!</p>

<h2>The markup</h2>

<figure class='code'> <div class="highlight"><pre><span class="nt">&lt;body&gt;</span>
  <span class="nt">&lt;video</span> <span class="na">id=</span><span class="s">&quot;v&quot;</span> <span class="na">width=</span><span class="s">&quot;320&quot;</span> <span class="na">height=</span><span class="s">&quot;240&quot;</span><span class="nt">&gt;&lt;/video&gt;</span>
  <span class="nt">&lt;canvas</span> <span class="na">id=</span><span class="s">&quot;c&quot;</span> <span class="na">width=</span><span class="s">&quot;320&quot;</span> <span class="na">height=</span><span class="s">&quot;240&quot;</span><span class="nt">&gt;&lt;/canvas&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</pre></div></figure>


<p>Those are the parts we need. A &lt;video> element that plays the media stream
and a canvas we will use to read and transform image data.</p>

<h2>The JavaScript</h2>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">initialize</span><span class="p">()</span> <span class="p">{</span>
  <span class="c1">// Get the webcam&#39;s stream.</span>
  <span class="nx">navigator</span><span class="p">.</span><span class="nx">getUserMedia</span><span class="p">({</span><span class="nx">video</span><span class="o">:</span> <span class="kc">true</span><span class="p">},</span> <span class="nx">startStream</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{});</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">startStream</span><span class="p">(</span><span class="nx">stream</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">video</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">stream</span><span class="p">);</span>
  <span class="nx">video</span><span class="p">.</span><span class="nx">play</span><span class="p">();</span>

  <span class="c1">// Ready! Let&#39;s start drawing.</span>
  <span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">draw</span><span class="p">);</span>
<span class="p">}</span>
</pre></div></figure>


<p>We call <a href="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia">navigator.getUserMedia()</a>
and pass <em>{video: true}</em> as the first argument which indicates that we want to
receive a video stream. We assign the MediaStream to the video&#8217;s <em>.src</em> property
to connect it to the &lt;video> element.</p>

<p>The video starts playing (which means the camera will be activated and you will
see your webcam&#8217;s live video) and we request an animation frame using the
<a href="https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame() API</a>.
This is perfect for drawing to our canvas as the browser schedules the next
repaint and we will be called immediately before that happens. Now for the last
and most important part of our green screen:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">draw</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">frame</span> <span class="o">=</span> <span class="nx">readFrame</span><span class="p">();</span>

  <span class="k">if</span> <span class="p">(</span><span class="nx">frame</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">replaceGreen</span><span class="p">(</span><span class="nx">frame</span><span class="p">.</span><span class="nx">data</span><span class="p">);</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">putImageData</span><span class="p">(</span><span class="nx">frame</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
  <span class="p">}</span>

  <span class="c1">// Wait for the next frame.</span>
  <span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">draw</span><span class="p">);</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">replaceGreen</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>

  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">,</span> <span class="nx">j</span> <span class="o">+=</span> <span class="mi">4</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// Convert from RGB to HSL...</span>
    <span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">rgb2hsl</span><span class="p">(</span><span class="nx">data</span><span class="p">[</span><span class="nx">j</span><span class="p">],</span> <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">1</span><span class="p">],</span> <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">2</span><span class="p">]);</span>
    <span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">[</span><span class="mi">2</span><span class="p">];</span>

    <span class="c1">// ... and check if we have a somewhat green pixel.</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">h</span> <span class="o">&gt;=</span> <span class="mi">90</span> <span class="o">&amp;&amp;</span> <span class="nx">h</span> <span class="o">&lt;=</span> <span class="mi">160</span> <span class="o">&amp;&amp;</span> <span class="nx">s</span> <span class="o">&gt;=</span> <span class="mi">25</span> <span class="o">&amp;&amp;</span> <span class="nx">s</span> <span class="o">&lt;=</span> <span class="mi">90</span> <span class="o">&amp;&amp;</span> <span class="nx">l</span> <span class="o">&gt;=</span> <span class="mi">20</span> <span class="o">&amp;&amp;</span> <span class="nx">l</span> <span class="o">&lt;=</span> <span class="mi">75</span><span class="p">)</span> <span class="p">{</span>
      <span class="nx">data</span><span class="p">[</span><span class="nx">j</span> <span class="o">+</span> <span class="mi">3</span><span class="p">]</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
</pre></div></figure>


<p>What happens here is actually quite simple: we read the current video frame and
extract its image data. We then iterate over all pixels in the frame and check
if we found a green one - if so its opacity byte is set to zero, which means
fully transparent. The manipulated image data is put back into the canvas and
we are done for now until the next animation frame is ready.</p>

<h2>The demo</h2>

<p>Take a look at the <a href="http://timtaubert.de/demos/green-screen/">live demo</a>, you will need a recent
Firefox/Chrome/Opera build. Make sure that getUserMedia() support is enabled
in your browser of choice. Hold a green object in front of the the camera and
try it out yourself. Your camera and light setup is probably very different
from mine so you might need to adjust the color check a little to make it work.
Alternatively, here is a screencast of the demo:</p>

<iframe class="embed"
 src="http://player.vimeo.com/video/51593914?title=1&amp;byline=1&amp;portrait=1"
 width="500" height="191" frameborder="0"
 webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>


<h2>The end</h2>

<p>This is an admittedly very simple example of a green screen but you can use
this little template to manipulate your webcam&#8217;s live video stream and build all
kinds of fancy demos with it.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Force Octopress/Jekyll to use a specific time zone]]></title>
    <link href="http://timtaubert.de/blog/2012/09/force-octopress-jekyll-to-use-a-specific-time-zone/"/>
    <updated>2012-09-25T15:00:00+02:00</updated>
    <id>http://timtaubert.de/blog/2012/09/force-octopress-jekyll-to-use-a-specific-time-zone</id>
    <content type="html"><![CDATA[<p>I could not be happier ever since I switched from Wordpress to Octopress.
I usually write and publish blog posts from where I live, Berlin. The time zone
here is CET (UTC+1). While recently visiting Mozilla&#8217;s HQ in Mountain View I
wrote another blog post just as usual and typed &#8220;rake generate&#8221; to turn my
Markdown files into static HTML files.</p>

<p>Looking at the output though, got me a little puzzled. All timestamps were
changed to be calculated off the PDT time zone. While certainly that is not a
big deal as they are still the same timestamps, I did not feel like changing
all of those every now and then I am somewhere in a different time zone.</p>

<p>If you want to use a &#8220;static&#8221; time zone when generating your page, do it like
this:</p>

<figure class='code'> <div class="highlight"><pre>TZ=CET rake generate
</pre></div></figure>


<p><strong>TL;DR</strong> - put your time zone into the TZ variable if you want to force Jekyll
to use a specific time zone when generating your HTML files.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[CSS transitions for dynamically created DOM elements]]></title>
    <link href="http://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/"/>
    <updated>2012-09-23T20:00:00+02:00</updated>
    <id>http://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements</id>
    <content type="html"><![CDATA[<p><a href="https://developer.mozilla.org/en/CSS/CSS_transitions">CSS transitions</a> are
awesome. You can use them to easily animate the transition of one or multiple
CSS properties from a given state to another. But how does that work if your
element has just been created and inserted into the DOM dynamically?</p>

<p>Let&#8217;s take a look at this simple example:</p>

<figure class='code'> <div class="highlight"><pre><span class="nt">div</span> <span class="p">{</span>
  <span class="c">/* ... */</span>
  <span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">500</span><span class="n">ms</span><span class="p">;</span>
<span class="p">}</span>
</pre></div></figure>




<figure class='code'> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">);</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">elem</span><span class="p">);</span>

<span class="c1">// Make the element fully transparent.</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

<span class="c1">// Fade it in.</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
</pre></div></figure>


<p>We dynamically insert a new &lt;div> element into the DOM with its initial
opacity set to zero. Subsequently we want it to fade to full opacity.
This - as you might have guessed - does of course not work that way.</p>

<h2>How about a timeout?</h2>

<p>It is clear that we somehow need to make sure the initial state with zero
opacity is &#8220;applied&#8221; before trying to fade in:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">);</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">elem</span><span class="p">);</span>

<span class="c1">// Make the element fully transparent.</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

<span class="c1">// Make sure the initial opacity value is applied.</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
  <span class="c1">// Fade it in.</span>
  <span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">},</span> <span class="mi">0</span><span class="p">);</span>
</pre></div></figure>


<p>This is only marginally better. It seems to work with Webkit and Opera (and
maybe even IE) but not in Firefox (in 99% of the cases). Using setTimeout()
is a little too much overhead and nobody guarantees you that the style has
really been applied after some milliseconds. It may be unsupported and
unreliable, we need something better.</p>

<h2>getComputedStyle to the rescue</h2>

<p>There is another way to apply the element&#8217;s current style that even works
synchronously:</p>

<figure class='code'> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">);</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">elem</span><span class="p">);</span>

<span class="c1">// Make the element fully transparent.</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

<span class="c1">// Make sure the initial state is applied.</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">getComputedStyle</span><span class="p">(</span><span class="nx">elem</span><span class="p">).</span><span class="nx">opacity</span><span class="p">;</span>

<span class="c1">// Fade it in.</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">opacity</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
</pre></div></figure>


<p>Although it looks like we only query the current opacity value, getComputedStyle()
in combination with accessing a property value actually flushes all pending
style changes and forces the layout engine to compute our &lt;div>&#8217;s current
state. This workaround works in all major browsers and does not yield different
results like the setTimeout() approach.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Snappy: Fixing new tab page performance regressions]]></title>
    <link href="http://timtaubert.de/blog/2012/08/snappy-fixing-new-tab-page-performance-regressions/"/>
    <updated>2012-08-14T12:00:00+02:00</updated>
    <id>http://timtaubert.de/blog/2012/08/snappy-fixing-new-tab-page-performance-regressions</id>
    <content type="html"><![CDATA[<p>As you probably already know, Firefox 13 introduced a neat new feature - the
<a href="http://timtaubert.de/blog/2012/02/help-us-test-the-new-tab-page/">new tab page</a>.
We replaced the old blank page with a list of thumbnails of recently visited
sites. While the feature itself works great for many people it has definitely
made opening new tabs a little more noisy.</p>

<h2>Do not show loading indicators</h2>

<p>As we are now loading a real (although local) page, there are loading indicators
when opening a new tab. The throbber starts to spin and the tab title changes
to &#8220;Connecting…&#8221; until the page has loaded. That is a lot of unnecessary noise.</p>

<p>In <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=716108" title="Bug 716108 - [New Tab Page] Connecting… should not briefly flicker in the tab title when a new tab is opened">bug 716108</a>
(Firefox 17) we removed loading indicators for newly opened tabs. No spinning
throbber, no flickering tab label. It only is a very subtle change but the whole
action of opening a new tab feels a lot smoother again.</p>

<h2>Preload new tab pages in the background</h2>

<p>If you happen to have a slower machine you will notice that loading the new tab
page takes a little while. It is a normal HTML (and partly XUL) page that we
need to parse and render. As all tabs start out with a blank docShell you will
first see a white canvas that then is replaced by &#8220;about:newtab&#8221;. As a last step
all thumbnails will be loaded and drawn progressively.</p>

<p>Opening a new tab is a very frequent action so it should feel snappy and not get
in your way at all. As optimizing the parsing and rendering stages any further
is more than a non-trivial task I came up with a little trick in
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=753448" title="Bug 753448 - [New Tab Page] preload newtab pages in the background and swap them in when opening a new tab">bug 753448</a>.
The idea is to preload the new tab page in the background so it has already
loaded when users open a new tab. All we now have to do is switch docShells
and the new tab page gets shown instantly.</p>

<p>You can give it a try as it landed in yesterday&#8217;s Nightly (2012-08-14). Just go
to &#8220;about:config&#8221; and set &#8220;browser.newtab.preload&#8221; to &#8220;true&#8221;. This option is
not yet enabled by default as we first have to figure out some minor talos
regressions until it is ready for prime time.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Are we small, yet?]]></title>
    <link href="http://timtaubert.de/blog/2012/04/are-we-small-yet/"/>
    <updated>2012-04-11T00:22:00+02:00</updated>
    <id>http://timtaubert.de/blog/2012/04/are-we-small-yet</id>
    <content type="html"><![CDATA[<p>Lately, <a href="http://weblogs.mozillazine.org/asa/">Asa Dotzler</a> <a href="https://groups.google.com/forum/#!topic/mozilla.dev.apps.firefox/k7fzkhdt9io">posted to dev.apps.firefox</a> regarding the download size of Firefox:</p>

<blockquote><p>This evening I noticed that my full win32 mar update for Firefox was 21MB. That caused me to look at what our full win32 installer size was. I was a bit surprised to see it’s up to 17MB. When we shipped Firefox 1, our Windows installer build was 4.7MB. [&#8230;]</p>

<p>Firefox 12 is a 16.1 MB download.
Firefox 4 was a 12.0 MB download.
Firefox 3.6 was a 7.7 MB download.</p>

<p>In less than three years we’ve more than doubled in size. (fuller chart here <a href="http://grab.by/cSHA">http://grab.by/cSHA</a>)</p></blockquote>

<p>While there’s no doubt that adding new features and supporting new platforms are good reasons for increasing the build size it’s definitely a metric that impacts users. It hits them the hardest when downloading Firefox the first time, especially with slow internet connections. It still hits them every time we provide application updates.</p>

<p>To better illustrate the steady growth over the last few years I created <a href="http://www.arewesmallyet.com/">http://www.arewesmallyet.com/</a>. It’s updated daily, shows differences between nightly builds and links to the corresponding changelog if one would like to investigate the cause of increasing build sizes.</p>

<p><img src="http://timtaubert.de/images/arewesmallyet.png" title="Screenshot of arewesmallyet.com" ></p>

<p>While this surely isn’t the most important battle we have right now I hope this will turn out useful to anyone willing to pick this up and tackle some build size optimizations.</p>

<p>GitHub: <a href="https://github.com/ttaubert/arewesmallyet">https://github.com/ttaubert/arewesmallyet</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[One year at Mozilla]]></title>
    <link href="http://timtaubert.de/blog/2012/04/one-year-at-mozilla/"/>
    <updated>2012-04-09T13:28:00+02:00</updated>
    <id>http://timtaubert.de/blog/2012/04/one-year-at-mozilla</id>
    <content type="html"><![CDATA[<p>You may already know the story of <a href="http://timtaubert.de/blog/2012/01/how-i-became-a-firefox-contributor/">how I became a Firefox contributor</a>. Back in early April of 2011, having volunteered full-time for three months (a rather short time compared to other core contributors), I was given the opportunity to start as a paid contributor working for Mozilla.</p>

<p>Over the year I met a lot of great people and had the chance to visit our awesome offices in Mountain View, San Francisco and soon Toronto. I attended JSConf.eu, MozCamp and FOSDEM, with the JSDay yet to come.</p>

<p>But Mozilla isn’t about traveling or attending conferences. It’s about passion for open source, passion for the open web. Working for a non-profit, where decisions are driven by reason and mission, is something that not many software engineers will ever experience in their whole professional career. That’s only one of the reasons I’m really glad to be a part of the global Mozilla community.</p>

<p>Inspired by <a href="http://lucasr.org/2012/03/13/my-first-238-days-at-mozilla/">Lucas Rocha</a> I’ll end this post with some neat statistics about my contributions to the Mozilla project (we Germans love statistics):</p>

<p>I fixed 223 bugs and reviewed patches for 116. I pushed 417 changesets, 110 of them being merges between trees. I changed roughly 1367 files (31862 insertions(+), 19081 deletions(-)).</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Fighting DocShell and DOMWindow leaks]]></title>
    <link href="http://timtaubert.de/blog/2012/02/fighting-docshell-and-domwindow-leaks/"/>
    <updated>2012-02-27T19:13:00+01:00</updated>
    <id>http://timtaubert.de/blog/2012/02/fighting-docshell-and-domwindow-leaks</id>
    <content type="html"><![CDATA[<p>In my post <a href="http://timtaubert.de/blog/2011/09/leak-hunting-in-browser-chrome-mochitests/">Leak hunting in browser-chrome mochitests</a> I wrote about the measures we were considering to prevent regressing efforts to get rid of leaks in Firefox. Now that <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=683953" title="Bug 683953 - Browser-chrome mochitests should show statistics about leaked DOMWindows and DocShells">bug 683953</a> has landed we finally have a way to detect the leakage of whole DocShells and DOMWindows for the lifetime of the browser when running the browser-chrome mochitest suite.</p>

<h2>How does it work?</h2>

<p>While our browser-chrome mochitest suite runs we parse stdout to track starting and ending tests as well as the creation and removal of DocShells and DOMWindows. Just before the test suite shuts down we schedule a precise GC and wait until it’s completed. Any DOMWindows and DocShells still active are now counted as leaks and assigned to the tests that created them. Additionally we collect the URLs of DOMWindows to help debugging a bit.</p>

<h2>How does this prevent new leaks?</h2>

<p>We implemented a threshold of (currently) 130 leaks that must not be exceeded. If a test run leaks more than the limit we configured it goes orange and the patch should be backed out from the tree. These are the current numbers:</p>

<figure class='code'> <div class="highlight"><pre>Linux (64): 116 (116) leaks
OS X (64): 79 (89) leaks
Windows (XP): 120 (118) leaks
</pre></div></figure>


<p>Additionally, I filed <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=730797" title="Bug 730797 - Track number of DOMWindow/DocShell leaks and report improvements/regressions">bug 730797</a> to integrate these leaks statistics into our Talos infrastructure. So the leak count for each push will be recorded and compared to previous runs to make sure the numbers don’t regress. As the leak numbers differ quite heavily between OSes it makes sense to apply a custom threshold per OS, this will be implemented in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=730800" title="Bug 730800 - Apply per-OS threshold for shutdown leaks">bug 730800</a>.</p>

<h2>Why is there even a threshold?</h2>

<p>First, there are DocShells and DOMWindows that are intentionally kept alive until the browser closes. Second, it’s nearly impossible to bring all these leaks down to “zero” at once. It’s a list of bugs that have to be addressed and we will slowly decrease the threshold to approach “zaroo”.</p>

<p>Thanks to Dão who has been doing great work in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=658738" title="Bug 658738 - (bc-leaks) [meta] We seem to be leaking hundreds of windows until shutdown during browser-chrome tests">bug 658738</a> discovering all those leaks manually, which in the first place gave me the idea of automating it.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Help us test the New Tab Page!]]></title>
    <link href="http://timtaubert.de/blog/2012/02/help-us-test-the-new-tab-page/"/>
    <updated>2012-02-10T19:11:00+01:00</updated>
    <id>http://timtaubert.de/blog/2012/02/help-us-test-the-new-tab-page</id>
    <content type="html"><![CDATA[<p>Over the last weeks we worked hard on getting the New Tab Page into Firefox. It’s not quite ready yet but we need your help testing it. We enabled it by default on Nightly and decided to give it a week on Aurora to get feedback from those users as well.</p>

<p>Nightly: <a href="http://nightly.mozilla.org/">http://nightly.mozilla.org/</a><br/>
Aurora: <a href="https://www.mozilla.org/en-US/firefox/aurora/">https://www.mozilla.org/en-US/firefox/aurora/</a></p>

<p>We’ll disable it for Aurora again on February 16th (next Thursday). If you liked the feature and want it back then just set the preference ‘browser.newtab.url’ to ‘about:newtab’, ‘browser.newtabpage.enabled’ to ‘true’ and restart the browser. You can easily file bugs using the following link:</p>

<p><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=General&amp;short_desc=[New%20Tab%20Page]%20Summary%20of%20your%20problem">https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=General</a></p>

<p>Please make sure you don’t report a duplicate bug and check the dependencies of the original New Tab Page bug before filing – <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455553" title="Bug 455553 - New Tab Page feature">bug 455553</a>.</p>

<p><img src="http://timtaubert.de/images/newtab.png" title="Screenshot of the new tab page" ></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[How I became a Firefox contributor]]></title>
    <link href="http://timtaubert.de/blog/2012/01/how-i-became-a-firefox-contributor/"/>
    <updated>2012-01-19T19:04:00+01:00</updated>
    <id>http://timtaubert.de/blog/2012/01/how-i-became-a-firefox-contributor</id>
    <content type="html"><![CDATA[<p>December 2009. I’ve been a freelancer for quite some time now and decided to dedicate some weeks to something that always fascinated me: contributing to a big open source project. I started some smaller open source projects in the past (like <a href="https://github.com/ttaubert/video4linux-net">Video4Linux.Net</a> and <a href="https://github.com/ttaubert/ViGedit-Plus">ViGedit+</a>) and contributed every so often to Gentoo and the Linux kernel. I’ve always been a great fan of the open source movement and I felt that it’s time to give back some love.</p>

<p>I made a list of all the things that interested me and that I could possibly contribute to. Besides having things like Linux, ReactOS and Wine on the list I picked “Firefox” because it simply has been a loyal companion for years. I think I’ve used it first in version 1.5 and it was one of the most valuable tools that helped me to earn money, get my everyday work done and the most trivial: just browse and experience the web.</p>

<p>Some weeks before that I switched to Firefox 4.0 beta3/4 because that included the first version of Panorama (Tab Groups / TabCandy) that worked on Linux. I loved this feature but noticed that it was in an early stage and needed some fixes. I set up a Firefox build environment, went through Bugzilla to find open bugs, nagged people on IRC and was totally overwhelmed by the warm welcome and the appreciation of my work. This was something I did not at all experience when trying to contribute to other open source projects. Finally, the Panorama team and me managed to get this feature into shape and land it in Firefox 4, yay!</p>

<p>Long story short, I’m now a full-time contributor and love what I’m doing.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Firefox Add-on: Websockets for IRCCloud]]></title>
    <link href="http://timtaubert.de/blog/2011/12/firefox-add-on-websockets-for-irccloud/"/>
    <updated>2011-12-07T19:00:00+01:00</updated>
    <id>http://timtaubert.de/blog/2011/12/firefox-add-on-websockets-for-irccloud</id>
    <content type="html"><![CDATA[<p>If you don’t know <a href="https://irccloud.com/">IRCCloud</a>, check it out. It’s become a very important tool for my every day work and I really don’t want to miss it. The one thing I never liked about it is that is currently uses a Flash fallback if it detects that the browser doesn’t support the WebSocket API.</p>

<p>The Firefox WebSocket API is currently prefixed (called MozWebSocket) and that’s why even with the newest Firefox you’re forced to use the Flash fallback. They even check for MozWebSocket and explicitly don’t use it if detected. As I didn’t quite understand the reasons behind that I decided to write an add-on that convinces IRCCloud to use native WebSockets in Firefox. Works good so far. I hope that’ll encourage the IRCCloud guys to think about using it again.</p>

<p>Add-on: <a href="https://addons.mozilla.org/en-US/firefox/addon/websockets-for-irccloud/">https://addons.mozilla.org/en-US/firefox/addon/websockets-for-irccloud/</a><br/>
Source: <a href="https://github.com/ttaubert/irccloud-websockets">https://github.com/ttaubert/irccloud-websockets</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Firefox Add-on: Facebook Auto-Logout]]></title>
    <link href="http://timtaubert.de/blog/2011/10/firefox-add-on-facebook-auto-logout/"/>
    <updated>2011-10-29T18:56:00+02:00</updated>
    <id>http://timtaubert.de/blog/2011/10/firefox-add-on-facebook-auto-logout</id>
    <content type="html"><![CDATA[<p>While talking to a friend of mine recently I got to know that he really dislikes that Facebook hides the Logout link in a sub-menu. He told me that he even uses a separate browser only for Facebook because he is very well aware of Facebook’s business model relying on tracking users wherever they are (this is not a big issue for me because I’m very happy with <a href="https://addons.mozilla.org/de/firefox/addon/ghostery/">Ghostery</a>).</p>

<p>A quick search revealed that there seem to be lot more users than I expected that would find an auto-logout of Facebook very useful. If not for privacy issues it’s also quite useful if someone else uses your computer and wants to post weird status updates.</p>

<p>So I wrote a Firefox add-on that logs the user out of Facebook when quitting Firefox or after a configurable amount of time has passed since he last closed a Facebook page (and there’s no active tab). It removes all cookies belonging to facebook.com so even tracking should not be an issue anymore (unless Facebook implements alternative tracking techniques).</p>

<p>Add-on: <a href="https://addons.mozilla.org/en-US/firefox/addon/facebook-auto-logout/">https://addons.mozilla.org/en-US/firefox/addon/facebook-auto-logout/</a><br/>
Source: <a href="https://github.com/ttaubert/facebook-auto-logout">https://github.com/ttaubert/facebook-auto-logout</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Leak hunting in browser-chrome mochitests]]></title>
    <link href="http://timtaubert.de/blog/2011/09/leak-hunting-in-browser-chrome-mochitests/"/>
    <updated>2011-09-09T18:49:00+02:00</updated>
    <id>http://timtaubert.de/blog/2011/09/leak-hunting-in-browser-chrome-mochitests</id>
    <content type="html"><![CDATA[<p>Some weeks (even months) ago <a href="http://design-noir.de/">Dão Gottwald</a> started the hunt for leaked DOMWindows and DocShells while running our browser-chrome mochitest suite (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=658738" title="Bug 658738 - (bc-leaks) [meta] We seem to be leaking hundreds of windows until shutdown during browser-chrome tests">bug 658738</a>). That means that there are some expensive objects whose lifetimes are longer than they should be – they are kept alive until the test runner shuts down. Sometimes these are caused by only a little typo in the test and sometimes they unveil bigger problems in the core.</p>

<p>Dão has done some great work so far, fixed lots of those leaks and also pointed out patches that introduced new leaks. Inspired by his <a href="https://bugzilla.mozilla.org/attachment.cgi?id=553428">script</a> that parses the mochitest build log and lists all <a href="https://bugzilla.mozilla.org/attachment.cgi?id=559090">leaked URIs</a> I wrote a Python script that additionally assigns those URIs to the tests that created these DOMWindows and DocShells. I filed <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=683953" title="Bug 683953 - Browser-chrome mochitests should show statistics about leaked DOMWindows and DocShells">bug 683953</a> to automatically have those statistics at the end of each mochitest run. Here is an example:</p>

<figure class='code'> <div class="highlight"><pre>TEST-INFO | leaked 15 DOMWindows and/or DocShells

[browser/components/sessionstore/test/browser/browser_589246.js]
  5x [about:blank]
  4x [chrome://browser/content/browser.xul]
  1x docShells

[browser/devtools/styleinspector/test/browser/styleinspector.js]
  2x [chrome://browser/content/csshtmltree.xhtml]
  1x [data:text/html,basic%20style%20inspector%20tests]
  1x [about:blank]
  1x docShells
</pre></div></figure>


<p>This would definitely be very helpful as you don’t have to parse a build log manually after the test run finished. It would also allow us to fail (in a far future where all leaks are fixed) when we detect that the current patch would introduce a new leak.</p>

<p>Another approach would be to have an API that allows to check whether a given object should be regarded as “alive” or “dead”. This is what <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=633670" title="Bug 633670 - (LifetimeTesting) Need testing support for leaks that do not persist through shutdown">bug 633670</a> is about. Every test would need to check if the DOMWindows, DocShells and other objects created by it are still considered alive after it has finished. One problem with this is that we would have to run GC after each test to determine an object’s lifetime – which would negatively affect the overall mochitest suite runtime.</p>

<p>No matter which solution (or maybe a combination of both or something completely different) will make it – we definitely need some kind of better leak detection than we currently have. Many of us are not aware that they are accidentally introducing new leaks with new patches they write. Manually checking for new leaks after each push is a real waste of time and shouldn’t be necessary.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Firefox Electrolysis 101]]></title>
    <link href="http://timtaubert.de/blog/2011/08/firefox-electrolysis-101/"/>
    <updated>2011-08-10T18:21:00+02:00</updated>
    <id>http://timtaubert.de/blog/2011/08/firefox-electrolysis-101</id>
    <content type="html"><![CDATA[<p>You probably have all heard of this weird new thing called <a href="https://wiki.mozilla.org/Electrolysis">Electrolysis (a.k.a. e10s)</a>. Basically it’s all about running the browser UI and its tabs in separated processes. I recently rewrote a part of Panorama to be e10s-future-proof and thought I should share what I’ve learned so far…</p>

<p><em>(If you don’t know why we’re all doing this, please read: <a href="http://blog.mozilla.com/products/2011/07/15/goals-for-multi-process-firefox/">http://blog.mozilla.com/products/2011/07/15/goals-for-multi-process-firefox/</a>)</em></p>

<p><em><strong>Update</strong>: There is a global message manager. You <strong>can</strong> send messages through the global or the per-window message manager. Corrected the different loadFrameScript() behaviors. Thanks to Mark Finkle for these corrections!</em></p>

<h2>The message manager</h2>

<p>(<a href="https://developer.mozilla.org/en/The_message_manager">https://developer.mozilla.org/en/The_message_manager</a>)</p>

<p>We’re using messages to establish communication between the chrome process and the content processes. The message manager sends messages and registers message listeners. It’s also capable of injecting so-called frame scripts (or content scripts) into a content process – these send or receive messages and interact with the DOM loaded into the &lt;browser>. There are four types of message managers:</p>

<h3>global messageManager</h3>

<p>This message manager sends messages to and receives them from  every &lt;browser> loaded in every window. You can access it by doing:</p>

<figure class='code'> <div class="highlight"><pre><span class="cm">/* chrome script */</span>
<span class="kd">let</span> <span class="nx">globalMM</span> <span class="o">=</span> <span class="nx">Cc</span><span class="p">[</span><span class="s2">&quot;@mozilla.org/globalmessagemanager;1&quot;</span><span class="p">]</span>
                 <span class="p">.</span><span class="nx">getService</span><span class="p">(</span><span class="nx">Ci</span><span class="p">.</span><span class="nx">nsIChromeFrameMessageManager</span><span class="p">);</span>
</pre></div></figure>


<h3>window.messageManager</h3>

<p>This message manager sends messages to and receives them from every &lt;browser> loaded in the given window.</p>

<h3>browser.messageManager</h3>

<p>This message manager is specific to a single &lt;browser>.</p>

<h3>Available methods</h3>

<figure class='code'> <div class="highlight"><pre><span class="nx">messageManager</span><span class="p">.</span><span class="nx">addMessageListener</span><span class="p">(</span><span class="nx">messageName</span><span class="p">,</span> <span class="nx">listener</span><span class="p">)</span>
<span class="nx">messageManager</span><span class="p">.</span><span class="nx">removeMessageListener</span><span class="p">(</span><span class="nx">messageName</span><span class="p">,</span> <span class="nx">listener</span><span class="p">)</span>
<span class="nx">messageManager</span><span class="p">.</span><span class="nx">sendAsyncMessage</span><span class="p">(</span><span class="nx">messageName</span><span class="p">[,</span> <span class="nx">json</span><span class="p">])</span>
<span class="nx">messageManager</span><span class="p">.</span><span class="nx">loadFrameScript</span><span class="p">(</span><span class="nx">url</span><span class="p">[,</span> <span class="nx">allowDelayedLoad</span><span class="p">])</span>
</pre></div></figure>


<h3>content/frame scripts</h3>

<p>The methods of a content script’s message manager are available as global functions. Note that a content script can send synchronous messages, unlike the message managers accessible from chrome scripts. The chrome process is not allowed to block on content processes.</p>

<figure class='code'> <div class="highlight"><pre><span class="nx">addMessageListener</span><span class="p">(</span><span class="nx">messageName</span><span class="p">,</span> <span class="nx">listener</span><span class="p">)</span>
<span class="nx">removeMessageListener</span><span class="p">(</span><span class="nx">messageName</span><span class="p">,</span> <span class="nx">listener</span><span class="p">)</span>
<span class="nx">sendAsyncMessage</span><span class="p">(</span><span class="nx">messageName</span><span class="p">[,</span> <span class="nx">json</span><span class="p">])</span>
<span class="nx">sendSyncMessage</span><span class="p">(</span><span class="nx">messageName</span><span class="p">[,</span> <span class="nx">json</span><span class="p">])</span>
</pre></div></figure>


<h3>e10s components</h3>

<p>Here is an overview of all Electrolysis components. That’s not exactly how e10s is implemented in Gecko but rather a logical view to clarify interactions between these parts.</p>

<p><img src="http://timtaubert.de/images/electrolysis.png" title="Overview of Electrolysis components" ></p>

<h2>A simple example</h2>

<h3>The chrome script</h3>

<p>This is the part of the code that runs in the browser process and listens for messages sent by frame scripts. We’re processing a “click” message and respond with an “alert” message.</p>

<figure class='code'> <div class="highlight"><pre><span class="cm">/* chrome script */</span>
<span class="kd">let</span> <span class="nx">mm</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">messageManager</span><span class="p">;</span>

<span class="nx">mm</span><span class="p">.</span><span class="nx">addMessageListener</span><span class="p">(</span><span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">browser</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">target</span><span class="p">;</span>
  <span class="kd">let</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span><span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;You clicked a &lt;&quot;</span> <span class="o">+</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">json</span><span class="p">.</span><span class="nx">tagName</span> <span class="o">+</span> <span class="s2">&quot;&gt;!&quot;</span><span class="p">};</span>
  <span class="nx">browser</span><span class="p">.</span><span class="nx">messageManager</span><span class="p">.</span><span class="nx">sendAsyncMessage</span><span class="p">(</span><span class="s2">&quot;alert&quot;</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">});</span>

<span class="nx">mm</span><span class="p">.</span><span class="nx">loadFrameScript</span><span class="p">(</span><span class="s2">&quot;chrome://project/content/content.js&quot;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</pre></div></figure>


<h3>The frame script</h3>

<p>The frame script (or content script) runs in the same process as the web page and has access to the contentWindow, document and their events. We listen for any click event and send a “click” message providing the tagName of the clicked element. Additionally we listen for “alert” messages and show an alert dialog when we receive them.</p>

<figure class='code'> <div class="highlight"><pre><span class="cm">/* content script */</span>
<span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span><span class="nx">tagName</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">tagName</span><span class="p">};</span>
  <span class="nx">sendAsyncMessage</span><span class="p">(</span><span class="s2">&quot;click&quot;</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="p">},</span> <span class="kc">false</span><span class="p">);</span>

<span class="nx">addMessageListener</span><span class="p">(</span><span class="s2">&quot;alert&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">alert</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">json</span><span class="p">.</span><span class="nx">text</span><span class="p">);</span>
<span class="p">});</span>
</pre></div></figure>


<h3>Process communication</h3>

<p>This diagram illustrates what the communication between all processes involved looks like (regarding our simple example).</p>

<p><img src="http://timtaubert.de/images/e10s-processes.png" title="Electrolysis process communication" ></p>

<h2>Which parts of your project will be affected by e10s?</h2>

<h3>DOM Objects</h3>

<p>It’s no longer possible to work with or directly access DOM objects (window, document and normal DOM nodes) from the chrome process. As an example, you are not allowed to access a page’s content window through browser.contentWindow. You’ll have to send a message to a content script that does all the work for you. In content scripts, the “global variable” content is the DOM window of the page loaded in the browser.</p>

<h3>DOM Events</h3>

<p>DOMEvents are no longer propagated to the parent &lt;browser> and you’re not able to call DOMElement.addEventListener(). Use addEventListener() in a content script and then send a message to a listener in the chrome process.</p>

<h3>DocShell</h3>

<p>The docShell is no longer accessible. It’s available as a “global variable” named docShell in content scripts.</p>

<h3>nsIWebProgress(Listener)</h3>

<p>If you still need to monitor a page’s web progress all you need is (surprise) a content script. This could look like the following:</p>

<figure class='code'> <div class="highlight"><pre><span class="cm">/* content script */</span>
<span class="kd">let</span> <span class="nx">ifaceReq</span> <span class="o">=</span> <span class="nx">docShell</span><span class="p">.</span><span class="nx">QueryInterface</span><span class="p">(</span><span class="nx">Ci</span><span class="p">.</span><span class="nx">nsIInterfaceRequestor</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">webProgress</span> <span class="o">=</span> <span class="nx">ifaceReq</span><span class="p">.</span><span class="nx">getInterface</span><span class="p">(</span><span class="nx">Ci</span><span class="p">.</span><span class="nx">nsIWebProgress</span><span class="p">);</span>

<span class="kd">let</span> <span class="nx">WebProgressListener</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span> <span class="p">};</span>
<span class="kd">let</span> <span class="nx">mask</span> <span class="o">=</span> <span class="nx">Ci</span><span class="p">.</span><span class="nx">nsIWebProgress</span><span class="p">.</span><span class="nx">NOTIFY_STATE_ALL</span><span class="p">;</span>
<span class="nx">webProgress</span><span class="p">.</span><span class="nx">addProgressListener</span><span class="p">(</span><span class="nx">WebProgressListener</span><span class="p">,</span> <span class="nx">mask</span><span class="p">);</span>
</pre></div></figure>


<h3>nsIDOMWindowUtils</h3>

<p>The DOM utility interface is also no longer accessible. You still can retrieve it in a content script like this:</p>

<figure class='code'> <div class="highlight"><pre><span class="cm">/* content script */</span>
<span class="kd">let</span> <span class="nx">ifaceReq</span> <span class="o">=</span> <span class="nx">content</span><span class="p">.</span><span class="nx">QueryInterface</span><span class="p">(</span><span class="nx">Ci</span><span class="p">.</span><span class="nx">nsIInterfaceRequestor</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">utils</span> <span class="o">=</span> <span class="nx">ifaceReq</span><span class="p">.</span><span class="nx">getInterface</span><span class="p">(</span><span class="nx">Ci</span><span class="p">.</span><span class="nx">nsIDOMWindowUtils</span><span class="p">);</span>
</pre></div></figure>


<h2>Tips and hints</h2>

<h3>sendSyncMessage or sendAsyncMessage?</h3>

<p>Sending synchronous message is not allowed for chrome processes. Only content processes can block on the parent. In general you should always try to use sendAsyncMessage() to not block while waiting for the message to be processed. You should try to rewrite your code if it isn’t ready for asynchronous communication, yet. There are a few valid cases where a message needs to be sent synchronously – if you have one of those you should at least try to handle this message as quickly as possible to not block the content process longer than necessary.</p>

<h3>sendSyncMessage()</h3>

<p>If you use sendSyncMessage() then you should know that the response is an array of all values returned from each listener.</p>

<figure class='code'> <div class="highlight"><pre><span class="cm">/* chrome script */</span>
<span class="kd">let</span> <span class="nx">mm</span> <span class="o">=</span> <span class="nx">browser</span><span class="p">.</span><span class="nx">messageManager</span><span class="p">;</span>
<span class="nx">mm</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;mymessage&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="s2">&quot;hello world&quot;</span><span class="p">);</span>
<span class="nx">mm</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;mymessage&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="s2">&quot;hello the 2nd&quot;</span><span class="p">);</span>

<span class="cm">/* content script */</span>
<span class="kd">let</span> <span class="nx">results</span> <span class="o">=</span> <span class="nx">sendSyncMessage</span><span class="p">(</span><span class="s2">&quot;mymessage&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">foo</span><span class="o">:</span> <span class="s2">&quot;bar&quot;</span><span class="p">});</span>
<span class="nx">print</span><span class="p">(</span><span class="nx">results</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// prints &quot;hello world&quot;</span>
<span class="nx">print</span><span class="p">(</span><span class="nx">results</span><span class="p">[</span><span class="mi">1</span><span class="p">]);</span> <span class="c1">// prints &quot;hello the 2nd&quot;</span>
</pre></div></figure>


<h3>globalMessageManager.addFrameScript()</h3>

<p>Use this if you want a frame script to be attached to every existing tab/browser of every existing window out there. Set the second parameter, allowDelayedLoad, to true, to automatically load the desired frame script in newly created browsers/tabs (of possibly newly created windows) as well.</p>

<h3>window.loadFrameScript()</h3>

<p>The window-specific message manager has the same frame script loading behavior as the global one, but it will add your frame script to every browser in the given window, only.</p>

<h3>browser.loadFrameScript()</h3>

<p>If the second parameter, allowDelayedLoad, is false this method will add the frame script only if the browser is ready. If you set it to true and the browser isn’t ready, yet, the script will be added when it becomes ready.</p>

<h3>messageManager.addMessageListener()</h3>

<p>When a message from a content script is received the listeners attached via browser.addMessageListener() are called first, and then the ones added via window.addMessageListener(), then the ones via globalMessageManager.addEventListener().</p>

<h3>Message properties</h3>

<p>The first argument passed to message listeners is the message they just received. This is an object with the following properties:</p>

<figure class='code'> <div class="highlight"><pre>name   - the name of the message
json   - the custom message data
sync   - false if the message was sent asynchronously
         (always false for messages from chrome scripts)
target - the browser associated with the content that this
         message came from
</pre></div></figure>


<h3>Message name prefixes</h3>

<p>At the beginning there won’t be many message users in the Mozilla code base and we should not start consolidating messages before the requirements of all those are fully fleshed out. So it’s better to be over-specific for now and name your messages like &#8220;Project:click&#8221; instead of just &#8220;click&#8221; to avoid conflicts.</p>

<h3>Conventions for frame scripts</h3>

<p>Frame scripts (or content scripts) should be stored in the same folder as the code that calls loadFrameScript() to load them. A good convention is to name them something like &#8220;content-project.js&#8221; or just &#8220;content.js&#8221;.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Seven things you may not know about me]]></title>
    <link href="http://timtaubert.de/blog/2011/08/seven-things-you-may-not-know-about-me/"/>
    <updated>2011-08-04T18:16:00+02:00</updated>
    <id>http://timtaubert.de/blog/2011/08/seven-things-you-may-not-know-about-me</id>
    <content type="html"><![CDATA[<p>My name is Tim Taubert (ttaubert on IRC and Twitter). I work as a Firefox Engineer for Mozilla, based in Berlin, Germany.</p>

<h2>Here are the rules for this meme:</h2>

<p><em>Link to your original tagger(s) and list these rules in your post. Share seven facts about yourself in the post. Tag seven people at the end of your post by leaving their names and the links to their blogs. Let them know they’ve been tagged.</em></p>

<p>I wasn’t tagged by anyone but after reading <a href="http://msujaws.wordpress.com/2011/07/21/seven-things-you-may-or-may-not-have-wanted-to-know-about-me/">Jared Wein’s blog post</a> I felt inspired to do the same and keep the idea alive.</p>

<h2>These are my seven things:</h2>

<ol>
<li><p>At the age of sixteen I started to play multiple instruments, including guitar, piano and drums. I may not be the best musician out there and have quite a hard time reading music but it’s a lot of fun anyway. My current band is called “Rabbit Wrong” (which is easier to understand with a German background) and I play a white and adorable Gibson Studio connected to an Engl Screamer.</p></li>
<li><p>I have always been a big fan of guinea pigs. Three of them live at my home and they are called Charlie, Whiskey and Sydney.</p></li>
<li><p>Back in 2008 I managed to contribute ~12 lines of code to the Linux kernel 2.6.25 to add support for my newly bought USB TV adapter. (<a href="http://linuxtv.org/pipermail/linux-dvb/2008-January/022742.html">http://linuxtv.org/pipermail/linux-dvb/2008-January/022742.html</a> and <a href="http://lwn.net/Articles/266704/">http://lwn.net/Articles/266704/</a>)</p></li>
<li><p>All electronic devices I own (including TV, mobile phones, a tablet and laptops) are set to English language (hint, I’m German). I always loved everything about English – I watch movies and sitcoms almost exclusively in English and guess which language all my books are written in.</p></li>
<li><p>My first car about 4-5 yours ago was a sixteen years old Renault Rapid. It was assembled out of three wrecks of the same type. I used to call it the “death mobile” because it was really old and rusty, also the brakes didn’t work very well.</p></li>
<li><p>I’ve been a vegetarian for almost two years now and I feel quite good about it. I’m not one of those who tries to talk you into that but I’m much more comfortable about my own way of life since then. And that’s what counts in the first place.</p></li>
<li><p>One of my first employers was an agency for digital communication in Berlin. They were apparently very pleased with my work and decided to introduce the “Tim Taubert Award” that is bestowed on every Christmas staff party. There have been three award winners so far, me being the first one :)</p></li>
</ol>


<h2>These are the people I’d like to tag:</h2>

<p><em>(Just because they’re all truly awesome and there’s only place for seven of them.)</em></p>

<ul>
<li>Frank Yan – <a href="http://frankyan.com/">http://frankyan.com/</a></li>
<li>Ian Gilman – <a href="http://iangilman.com/">http://iangilman.com/</a></li>
<li>Rob Campbell – <a href="http://antennasoft.net/robcee/">http://antennasoft.net/robcee/</a></li>
<li>Dietrich Ayala – <a href="http://autonome.wordpress.com/">http://autonome.wordpress.com/</a></li>
<li>Marco Bonardo – <a href="http://blog.bonardo.net/">http://blog.bonardo.net/</a></li>
<li>Hernán Colmeiro – <a href="http://peregrinogris.com.ar/">http://peregrinogris.com.ar/</a></li>
<li>Michael Yoshitaka Erlewine – <a href="http://mitcho.com/">http://mitcho.com/</a></li>
</ul>

]]></content>
  </entry>
  
</feed>