<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/atom10full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">

  <title><![CDATA[Need for Air]]></title>
  
  <link href="http://needforair.com/" />
  <updated>2013-03-19T11:25:08+01:00</updated>
  <id>http://needforair.com/</id>
  <author>
    <name><![CDATA[Need for Air]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/atom+xml" href="http://feeds.feedburner.com/NeedForAir" /><feedburner:info uri="needforair" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>NeedForAir</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><entry>
    <title type="html"><![CDATA[Need For Air, over and out. Say hello to the tldr.io blog!]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/M9ozQRvkpHk/" />
    <updated>2013-02-19T12:00:00+01:00</updated>
    <id>http://needforair.com/blog/2013/02/19/final-post</id>
    <content type="html">&lt;h2&gt;We are still alive!&lt;/h2&gt;

&lt;p&gt;You may have noticed, we have been pretty silent lately. Our last
blogpost dates back to November 14th when we announced the first release of our Chrome extension.
As you can imagine, we were pretty busy working on
&lt;a href="http://tldr.io"&gt;tldr.io&lt;/a&gt; and didn&amp;#8217;t have enough time to maintain this
blog. Lots of crazy stuff happened: we won
&lt;a href="http://www.seedcamp.com/2012/12/a-worthy-finish-to-2012-seedcamp-paris.html"&gt;Seedcamp Paris&lt;/a&gt;, we built a lot of new features
including a brand new Chrome extension with which you can read or contribute the summary of any web page and
our community is growing faster than ever.&lt;/p&gt;

&lt;br&gt;&lt;img src="http://i.imgur.com/Uq82yyl.jpg" alt="Haven't seen you in a while"&gt;&lt;br&gt;&lt;br&gt;


&lt;h2&gt;What&amp;#8217;s next?&lt;/h2&gt;

&lt;p&gt;We have decided to start blogging again, but as tldr.io and not
NeedForAir anymore. We&amp;#8217;ll use this &lt;a href="http://blog.tldr.io"&gt;new blog&lt;/a&gt; to
keep you updated about tldr.io feature releases, best content and we&amp;#8217;ll also
blog about engineering and entrepreneurial challenges.&lt;/p&gt;

&lt;p&gt;&lt;a target="_blank" href="http://blog.tldr.io" style="padding:25px;background:#008CD4;display:block;width:200px;margin:30px auto 0px auto;font-size:22px;font-family:CassanetBold, Helvetica Neue, Helvetica,border-radius:5px;color:white;border-radius:5px; text-align: center;"&gt;Go read the tldr.io blog&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;We won&amp;#8217;t kill NeedForAir though&lt;/h2&gt;

&lt;p&gt;There are still a lot of people coming to this blog (mainly from
search) for the tutorials we posted, so we won&amp;#8217;t shut it down. If you liked what you found here, be
sure to check &lt;a href="http://blog.tldr.io"&gt;the tldr.io blog&lt;/a&gt; out and update your RSS subscription! And to wrap NeedForAir up, here are the five most-read articles:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;a href="http://needforair.com/blog/2012/05/09/d3-tutorial/"&gt;Introduction to D3: Build an Animated Graph in 19 Lines of Code&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://needforair.com/blog/2012/04/22/dns-redirections/"&gt;Tutorial: Domain Name System for Beginners&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://needforair.com/blog/2012/07/09/jenkins-in-production/"&gt;How We Use Jenkins for Continuous Deployment&lt;/a&gt; (a bit outdated since we don&amp;#8217;t use Jenkins anymore,
 we coded our own CI)&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://needforair.com/blog/2012/04/18/game-of-go/"&gt;The Game of Go: A Programmer&amp;#8217;s Perspective&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://needforair.com/blog/2012/08/22/upstart-and-node/"&gt;What to Use Upstart (and Other Supervisors) For&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;


&lt;p&gt;Thank you for reading us thus far!&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/M9ozQRvkpHk" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2013/02/19/final-post/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Chrome extension to read summaries of Hacker News links without leaving the front page]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/XyNMqnLTWJE/" />
    <updated>2012-11-14T18:04:00+01:00</updated>
    <id>http://needforair.com/blog/2012/11/14/chrome-extension</id>
    <content type="html">&lt;h2&gt;Yo dawg, we heard you like reading Hacker News, so we put summaries in your links&lt;/h2&gt;

&lt;p&gt;When you discovered that Superman could see through walls you told yourself that it was the awesomest thing ever. Naturally you wanted to have the same superpower.
Well let&amp;#8217;s say you can do that now on your browser and &lt;strong&gt;see through hyperlinks with our Chome Extension&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;You love reading the &lt;a href="http://news.ycombinator.com"&gt;Hacker News&lt;/a&gt; front page articles. But you don&amp;#8217;t always have the
time to click the links and read them all. That&amp;#8217;s
why we built this Chrome extension that enables you, &lt;strong&gt;simply by hovering over a
link, to read a summary of the article.&lt;/strong&gt; How exciting is this?&lt;/p&gt;

&lt;p&gt;Here is what this looks like:&lt;/p&gt;

&lt;br&gt;&lt;img src="http://i.imgur.com/LEwCV.png" alt="Tldr extension screenshot"&gt;




&lt;br&gt;


&lt;p&gt;&lt;a target="_blank" href="https://chrome.google.com/webstore/detail/tldr/ohmamcbkcmfalompaelgoepcnbnpiioe" style="padding:25px;background:#008CD4;display:block;width:200px;margin:30px auto 0px auto;font-size:22px;font-family:CassanetBold, Helvetica Neue, Helvetica,border-radius:5px;color:white;border-radius:5px; text-align: center;" onClick="_gaq.push(['_trackEvent', 'Buttons', 'Click', 'Go to CRX install page']);"&gt;Install this awesome extension!&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;Why does it only work on Hacker News? I want it everywhere!&lt;/h2&gt;

&lt;p&gt;We know. We want that too. But as you know, &lt;strong&gt;our summaries are
human-written&lt;/strong&gt; because &lt;a href="http://needforair.com/blog/2012/04/06/why-computers-are-bad-at-summarizing-text/"&gt;computers are bad at summarizing&lt;/a&gt;.
Today, the community writing summaries is still very small and can&amp;#8217;t handle a huge load. We summaries
them to be of the highest quality, so we chose to focus on Hacker News
so that we could bring a lot of value to our users while still having
the time to run our company.&lt;/p&gt;

&lt;p&gt;You can help! If you like to find the key information in a technical
blogpost, if you want to help other people fight the information
overload or if you simply want tldr.io&amp;#8217;s coverage of the front page to
be even higher, you can &lt;a href="http://tldr.io/whatisit#install-bm-section"&gt;&lt;strong&gt;use our contribution bookmarklet&lt;/a&gt;
and start creating summaries&lt;/strong&gt; too. We review all the summaries our users
create to ensure they stick to the original author&amp;#8217;s point of view, but
your contributing really helps the community.&lt;/p&gt;

&lt;h2&gt;Why is it a Chrome extension? I want it on Firefox!&lt;/h2&gt;

&lt;p&gt;We too! We&amp;#8217;re currently focusing on a Chrome extension to see how people
use it and how useful they find it. Once we think we have a clear idea
of what the extension should be, we will make a Firefox version. If you
have some ideas, &lt;a href="http://tldr.io/forum/topics/50a4b8f45f5d3cd04a0001b7"&gt;please tell us here, we are interested&lt;/a&gt;.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/XyNMqnLTWJE" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/11/14/chrome-extension/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[We're launching tldr.io!]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/cniYlhSSw0U/" />
    <updated>2012-09-13T18:04:00+02:00</updated>
    <id>http://needforair.com/blog/2012/09/13/were-launching</id>
    <content type="html">&lt;h2&gt;&lt;a href="http://tldr.io"&gt;tl;dr&lt;/a&gt; (too long; didn&amp;#8217;t read)&lt;/h2&gt;

&lt;p&gt;We&amp;#8217;re super excited to announce that we have finally launched our new product: &lt;strong&gt;tl;dr&lt;/strong&gt;!
The three of us quit our dayjobs at the end of 2011 and for the past 5 months we&amp;#8217;ve been hard at work on it, and we&amp;#8217;re very
proud of what we&amp;#8217;re releasing.&lt;/p&gt;

&lt;p&gt;In a nutshell, our product solves the problem of wanting to know what&amp;#8217;s in a webpage
without losing precious time. It allows you to display a summary of the webpage you&amp;#8217;re
currently browsing. The summaries are written by people who found the
webpage interesting before you. If the summary you&amp;#8217;re asking for doesn&amp;#8217;t exist yet,
you&amp;#8217;ll be offered to create it. We decided to rely on people because summarizing
information is a skill people are vastly better at than computers.&lt;/p&gt;

&lt;h2&gt;So why did we build this product?&lt;/h2&gt;

&lt;p&gt;We read a lot of blogs, be it news or
more educational/topical content. It&amp;#8217;s been said and resaid that we&amp;#8217;re
in an age of information overload. There is simply too much content that
is published everyday and it&amp;#8217;s getting harder and harder to not only keep up with
the firehose but also filter what needs to be read and remembered. Often times we feel like it would
be nice to have access the few key ideas that are worth remembering of an
article we just read.&lt;/p&gt;

&lt;p&gt;We also thought &lt;em&gt;&amp;#8216;Wouldn&amp;#8217;t it be cool if upon arriving on a web page we
could display its summary to rapidly see what it&amp;#8217;s about?&lt;/em&gt; Indeed
everyone now knows to choose catchy titles to attract readers. Other signals such as
likes, shares, or upvotes aren&amp;#8217;t really related to the actual content
and need of the reader. We wanted something that focused on the content,
so that people would be able to make their own opinion about it.
This is why we decided to allow people to attach one
summary to any URL on the web in order to describe what&amp;#8217;s in it. Sort of
an entry point to each webpage. Turns out there&amp;#8217;s already an name for
such a summary on the internet: it&amp;#8217;s &lt;strong&gt;tl;dr&lt;/strong&gt;. Once it is written, the tl;dr benefits
everybody in the world. Anyone will be able to get a clean, standardized
preview of what the webpage they&amp;#8217;re about to browse contains. This can be
very useful on unknown busy webpages that are hard to sift through.&lt;/p&gt;

&lt;p&gt;At this point we must point out that we do not want to prevent people
from reading original content. We simply want to pique the interest of the
right people and drive them to content they&amp;#8217;re looking for by lowering
its barrier to entry for them. Since we believe that summarized
information is one of the most powerful force that drives interest (as
evidenced by academic paper abstracts, google results extracts, etc.) we
think people-contributed summaries will work wonders.&lt;/p&gt;

&lt;h2&gt;A word of caution&lt;/h2&gt;

&lt;p&gt;This is our first release and shouldn&amp;#8217;t be considered perfect. There is
still a lot of work ahead of us, we have a big and clear vision for our
company but we&amp;#8217;re taking baby steps. You should expect new features
regularly, as well as bugs! Besides, since we are building a company,
and a company needs to make money, expect some pricing plans for our
service to come out very soon. For those interested, we&amp;#8217;ve been
bootstrapping for now and haven&amp;#8217;t taken any investor money.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/cniYlhSSw0U" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/09/13/were-launching/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[What To Use Upstart (And Other Supervisors) For]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/CZ2Eb_VCwKM/" />
    <updated>2012-08-22T12:00:00+02:00</updated>
    <id>http://needforair.com/blog/2012/08/22/upstart-and-node</id>
    <content type="html">&lt;blockquote class="tldr-embed-widget" data-align="center"&gt;      &lt;p&gt;      &lt;a href="http://tldr.io/tldrs/504def5fe1eaddb23a00002c/what-to-use-upstart-and-other-supervisors-for-" class="link-to-tldr-page" target="_blank"&gt;Summary of &amp;#8220;What To Use Upstart (And Other Supervisors) For -&amp;#8221;&lt;/a&gt; (via &lt;a href="http://tldr.io" target="_blank"&gt;tldr.io&lt;/a&gt;)      &lt;ul&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;We should stop having software handle system tasks like daemonization or privilege-dropping&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;That’s a job for a supervisor. For example we use Upstart&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;Nodejs plays nicely with Upstart, article links to an Upstart script for launching a nodejs application&lt;/li&gt;      &lt;/ul&gt;      &lt;/p&gt;&lt;/blockquote&gt;


&lt;script async src="http://needforair.com//tldr.io/embed/widget-embed.js" charset="utf-8"&gt;&lt;/script&gt;


&lt;p&gt;We are currently building a webapp with the following stack: nodejs,
mongoDB, nginx and redis. We also use a certain number of services,
like &lt;a href="http://needforair.com/blog/2012/07/09/jenkins-in-production/"&gt;Jenkins&lt;/a&gt; and Graphite.
To use these softwares in production, we need to be able to daemonize
them, run them as specific users (usually with low privileges), and have
tham restart automatically if case of an unexpected crash.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://upstart.ubuntu.com/" target="_blank"&gt;&lt;img alt="Jenkins CI" src="http://upstart.ubuntu.com/img/upstart80.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These are quite common needs. But people are often confused as to what
part of the system is responsible for what task. I often see software
handling the privilege drop (for example the otherwise excellent
&lt;a href="http://graphite.wikidot.com/"&gt;Graphite&lt;/a&gt;), or the daemonization (for
example &lt;a href="http://gunicorn.org/"&gt;gunicorn&lt;/a&gt; - which is also great
otherwise). It&amp;#8217;s bad, because as a result, some of these softwares don&amp;#8217;t
play nicely with supervisors like Upstart. People tend to resort to
strange and not well understood scripts (I even saw an Upstart script
that called the &lt;em&gt;start_stop_daemon&lt;/em&gt; to launch a gunicorn process which
daemonized itself!).&lt;/p&gt;

&lt;p&gt;There is a simple rule to follow to avoid this confusion:
&lt;strong&gt;softwares should not daemonize or handle privilege drop&lt;/strong&gt;. These are
jobs for the supervisor. That&amp;#8217;s all, separation of concerns, folks. For
example, we use Upstart to launch our processes as services. That way,
we get added benefits: they get respawned in case they crash, they
restart automatically if we need to reboot the server, and we can
specify rules such as &amp;#8220;service A should not start before service B has started
and is ready&amp;#8221;. I see no reason not to it that way!&lt;/p&gt;

&lt;p&gt;An example of software that respects these rules is nodejs. Here is &lt;a href="https://gist.github.com/3385102"&gt;the
Upstart script&lt;/a&gt; we use with it. It enables us to start our app as any
user, log all output and get the added benefits I was referring to
earlier. It really is all you need with nodejs and most software you
will use. This is not an Upstart tutorial (&lt;a href="http://upstart.ubuntu.com/cookbook/"&gt;their doc&lt;/a&gt; is pretty good),
but let me explain the most important parts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The privilege drop is done through the &lt;code&gt;su -s /bin/sh -c 'exec "$0" "$@"' $RUN_AS -- command&lt;/code&gt; part.
This line executes &lt;code&gt;command&lt;/code&gt; as user &lt;code&gt;$RUN_AS&lt;/code&gt;. Unfortunately, we have to use this method because the standard
&lt;code&gt;sudo -u&lt;/code&gt; doesn&amp;#8217;t work from within an Upstart script.&lt;/li&gt;
&lt;li&gt;The log file needs to be &lt;code&gt;touch&lt;/code&gt;ed in case it doesn&amp;#8217;t exist, then &lt;code&gt;chown&lt;/code&gt;ed to user &lt;code&gt;$RUN_AS&lt;/code&gt;, because otherwise
it will belong to user root (which the user executing the Upstart script)&lt;/li&gt;
&lt;li&gt;The rest is pretty standard&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;Of course, this script doesn&amp;#8217;t work just for nodejs! So you have no excuse not to use it now :)&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/CZ2Eb_VCwKM" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/08/22/upstart-and-node/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[How We Use Jenkins for Continuous Deployment]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/qfhLJpYucwc/" />
    <updated>2012-07-09T12:00:00+02:00</updated>
    <id>http://needforair.com/blog/2012/07/09/jenkins-in-production</id>
    <content type="html">&lt;blockquote class="tldr-embed-widget" data-align="center"&gt;      &lt;p&gt;      &lt;a href="http://tldr.io/tldrs/50b88a6e094d8edc2b00013e/how-we-use-jenkins-for-continuous-deployment" class="link-to-tldr-page" target="_blank"&gt;Summary of &amp;#8220;How We Use Jenkins for Continuous Deployment&amp;#8221;&lt;/a&gt; (via &lt;a href="http://tldr.io" target="_blank"&gt;tldr.io&lt;/a&gt;)      &lt;ul&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;Continuous integration is a must for software projects. It makes deployment stressless and lets you spot problems as soon as they arrive, not 3 months later.&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;We take it one step further and use continuous deployment. Whenever one of us Git-pushes to master, the new code is tested and goes live right away.&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;Jenkins makes it easy. With the Github plugin, you connect Jenkins to Github&amp;#8217;s post-receive hook so that any code pushed to our repo triggers the Jenkins job.&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;The Hipchat plugin lets Jenkins notify us whether the build was successful or not. That way we can react quickly if something goes wrong.&lt;/li&gt;      &lt;/ul&gt;      &lt;/p&gt;&lt;/blockquote&gt;


&lt;script async src="http://needforair.com//tldr.io/embed/widget-embed.js" charset="utf-8"&gt;&lt;/script&gt;


&lt;p&gt;As all teams working on a web application, we had to setup a &lt;a href="http://en.wikipedia.org/wiki/Continuous_integration"&gt;continuous
integration&lt;/a&gt; server. This is
a fairly well-known engineering practice, where you want your code to be built and tested
regularly on the server so that you spot problems as soon as they arrive and not when
you push three months&amp;#8217; worth of work to production. Also, it makes deployment a much less
stressful experience, because you know it will work. You avoid getting in the situation
of a friend of mine who could not have coffee with me because he was deploying and didn&amp;#8217;t want
to mess it up!&lt;/p&gt;

&lt;p&gt;We also wanted to take it one
step further, and use continuous deployment. As the name implies, this
means that any new code pushed to the server will automatically be
built, tested and then go live and be used by our users right away. It
turns out that is fairly easy to set up -except for a few caveats-, and
I will describe our setup. This by no means a step-by-step tutorial but
rather a &amp;#8220;here is what you can do&amp;#8221; article.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://jenkins-ci.org/" target="_blank"&gt;&lt;img alt="Jenkins CI" src="http://jenkins-ci.org/sites/default/files/jenkins_logo.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;Our Tech Stack - The Part Of It That Matters For This Article&lt;/h2&gt;

&lt;p&gt;Our server runs on Ubuntu 12.04 LTS, our version control system is Git
(we use &lt;a href="http://scottchacon.com/2011/08/31/github-flow.html"&gt;Github flow&lt;/a&gt;) and our
code is hosted on Github. We chose to use &lt;a href="http://jenkins-ci.org/"&gt;Jenkins&lt;/a&gt; as
the CI server. Even though it is poorly documented and has a definite
&amp;#8216;so nineties&amp;#8217; feel, it is very easy to deploy and intuitive. Basically, you use it
to set up jobs that are run when you launch them manually or when an external event, such
as a code push, is triggered. These jobs can be anything that&amp;#8217;s executable, I usually use
simple bash scripts but you can use any kind of script, makefiles and so on.&lt;/p&gt;

&lt;h2&gt;Install And Keep Jenkins Up And Running At All Times&lt;/h2&gt;

&lt;p&gt;Jenkins is contained in a WAR file, so you can simply download and execute it with
java (command &lt;code&gt;java -jar /path/to/jenkins.war&lt;/code&gt;). Of course, this is only
suitable for testing purposes. In production, you will want to use an
&lt;a href="http://upstart.ubuntu.com/"&gt;Upstart&lt;/a&gt; script so that Jenkins respawns if
it crashes unexpectedly and starts on boot.&lt;/p&gt;

&lt;p&gt;When Jenkins is up, you have
access to a web interface to manage it (you can configure the port on which
it listens). Make sure to enable security -I recommend matrix based security- unless you want anyone to be
able to take control of your servers! One thing to watch out for is that
you need to enable the &amp;#8220;overall read&amp;#8221; permission for the anonymous user,
or else Jenkins won&amp;#8217;t be able to communicate with third-party services - in our case Github and Hipchat. Pretty stupid
behaviour I know, but at least it doesn&amp;#8217;t create security holes.&lt;/p&gt;

&lt;h2&gt;Build On Push To Master&lt;/h2&gt;

&lt;p&gt;We have the Git and Github plugins enabled. The &lt;a href="https://wiki.jenkins-ci.org/display/JENKINS/Github+Plugin"&gt;Github plugin&lt;/a&gt;
enables us to connect Jenkins to Github&amp;#8217;s post-receive hook. That way,
whenever someone pushes to master (usually by merging a feature branch),
our Jenkins &amp;#8220;build&amp;#8221; job pulls the new version of the code, builds it and
test it. For us, that&amp;#8217;s really a two-line script, as we &lt;a href="http://www.mikealrogers.com/posts/nodemodules-in-git.html"&gt;check all
modules in to Git&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;If everything was successful, the &amp;#8220;deploy&amp;#8221; job is now called. It pulls
the new version of the code in the live repository, then restarts the
node server (since we use nodejs, we can overwrite the javascript files
when the server is running without impacting it). Node starts pretty
fast, so we only have ~0.1s downtime (no load balancer to achieve 0s downtime - for now!). And since we use an external store
to manage sessions, nobody gets logged out.&lt;/p&gt;

&lt;h2&gt;Be Notified&lt;/h2&gt;

&lt;p&gt;The last part of the puzzle is how we get notified of the build result.
We use &lt;a href="https://www.hipchat.com/"&gt;Hipchat&lt;/a&gt;, so we installed the Hipchat
plugin that notifies us of build results in a dedicated chat room. Most
of the time it just says &amp;#8220;Build successful&amp;#8221;. But no sweat if a build
fails, since the &amp;#8220;deploy&amp;#8221; job was not called our users don&amp;#8217;t see
anything wrong!&lt;/p&gt;

&lt;h2&gt;And That&amp;#8217;s All There&amp;#8217;s To It!&lt;/h2&gt;

&lt;p&gt;Yup. It is indeed simple enough to get a robust continuous deployment
system up and running, that most of the time safely deploys your code
through a simple &lt;code&gt;git push&lt;/code&gt; on your part. I&amp;#8217;m interested in anything you
would have to say on this setup or any tip you&amp;#8217;d like to share!&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/qfhLJpYucwc" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/07/09/jenkins-in-production/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Enhancing the User Experience With a Continuous Client]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/ydZQjfi44-w/" />
    <updated>2012-07-01T20:51:00+02:00</updated>
    <id>http://needforair.com/blog/2012/07/01/new-era-continuous-client</id>
    <content type="html">&lt;p&gt;At Google I/O there were &lt;a href="http://www.businessinsider.com/google-io-product-announcements-2012-6?op=1"&gt;many interesting announcements&lt;/a&gt;: &lt;a href="http://gigaom.com/mobile/nexus-7-first-look-its-here-to-snuff-kindles-fire/"&gt;Nexus 7&lt;/a&gt;, Google
Glass, etc. (Perhaps too many as one can say that &lt;a href="http://gigaom.com/2012/06/27/google-vs-everyone/"&gt;Google is fighting too
many ennemies on too many fronts&lt;/a&gt;).
One news that drew my attention is the arrival of Google Chrome on iOs. &lt;a href="http://techcrunch.com/2012/06/28/hands-on-with-googles-chrome-for-ios-just-like-chrome-for-android-only-slower/"&gt;Don&amp;#8217;t expect browsing
experience improvement&lt;/a&gt;
you had on your desktop as this app is merely a graphical
layer on top of Apple&amp;#8217;s WebView from its SDK. Basically the engine is the same as Safari &amp;#8230;
just slower.&lt;/p&gt;

&lt;p&gt;But that&amp;#8217;s not my point. I want to talk about the sync functionnality
that Google Chrome on iOS offers: by activating the sync on your
different devices (desktop, iPad, iPhone&amp;#8230;) you can open a tab you were
viewing in one device on another one. The &lt;a href="http://www.engadget.com/2010/05/26/a-modest-proposal-the-continuous-client/"&gt;Continous Client&lt;/a&gt; becomes real.&lt;/p&gt;

&lt;p&gt;&lt;img class="right" src="http://img802.imageshack.us/img802/3818/passthebaton.jpg" width="340"&gt;&lt;/p&gt;

&lt;blockquote&gt;&lt;p&gt;So what is a Continuous Client you ask? Well the premise is simple: when you leave one device, you pick up your session in exactly the same place on the next device you use. Meaning your IM, Twitter, web browsing, applications, even your windows appear just as they did on the previous device. The situation I describe above would be obviated by this setup, allowing me to move from my laptop to iPad in a seamless manner which would in no way disrupt the activity I was currently engaged in. [&amp;#8230;] Put simply, you are placeshifting your computing experience from one device to the next with no break in your work, timelines, or conversations.&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;After using the cloud to &lt;a href="https://www.dropbox.com/"&gt;store persistent data easily&lt;/a&gt; and
&lt;a href="https://www.icloud.com/"&gt;seamlessly&lt;/a&gt;,
one can now use it as a relay to get a continuous browsing experience
across different devices.&lt;/p&gt;

&lt;p&gt;We can moreover imagine various implementations of the continuous client to enhance our global user experience.
For example, &lt;a href="http://www.invoxia.com/en/"&gt;Invoxia&lt;/a&gt; with its business dock adopts the same
vision for phone by bridging mobile and office calls.&lt;/p&gt;

&lt;p&gt;My experience of these two continous clients is so magic but nonetheless so
natural that I&amp;#8217;m looking forward to future ones that will be invented to make our everyday life even more
pleasant and interruptions-free.&lt;/p&gt;

&lt;p&gt;And you, do you know another usecase where a continuous client architecture is
already available?&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/ydZQjfi44-w" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/07/01/new-era-continuous-client/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Start Your Kids Coding Very Soon]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/px-SWkl4eoI/" />
    <updated>2012-06-25T10:18:00+02:00</updated>
    <id>http://needforair.com/blog/2012/06/25/start-your-kids-coding-very-soon</id>
    <content type="html">&lt;p&gt;On &lt;a href="http://freddestin.com/2012/06/get-your-kid-coding-with-codeclub-with-free-viral-video.html"&gt;Fred Destin&amp;#8217;s initiative&lt;/a&gt;, the big stars
at &lt;a href="http://foundersforum.eu/"&gt;Founders Forum&lt;/a&gt;, including Niklas ZennStröm
(Skype), Chad Hurley (Youtube) and many others, shooted last week a funny
and viral video to promote &lt;a href="http://www.codeclub.org.uk/"&gt;CodeClub&lt;/a&gt;.
CodeClub is a brilliant action which aims at &lt;em&gt;inspiring kids to learn
code and creating a nationwide after school coding club for children aged 10-11&lt;/em&gt;.&lt;/p&gt;

&lt;iframe width="560" height="315" src="http://www.youtube.com/embed/FxhGIajRsq4" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;


&lt;p&gt;Kids are the future, everybody knows it. Computer are, too. When we see what
our generation&amp;#8217;s geniuses made and how they revolutionized our world
when computer science and coding were at their premises, one
can only urge the next generation to dive into code as
soon as possible.&lt;/p&gt;

&lt;p&gt;Supporting this initiative is supporting a long term vision for our
economy and our education system. There is no day without reading that
there is a big lack of great programmers, that &lt;a href="http://www.networkworld.com/news/2012/060412-data-scientist-259697.html"&gt;data-scientist is the
hottest job at this time&lt;/a&gt;
or that &lt;a href="http://www.elezea.com/2012/04/programming-and-thinking/"&gt;learning to code is a great move&lt;/a&gt;.
So we should foster our kids to embrace this activity as soon as
possible as informatics, hardware will be everywhere. By extending the base
of people having the skills to program we foster the future innovation.&lt;/p&gt;

&lt;p&gt;The earlier we start learning something the better we are good at it and the
less we fear it. We belong to a generation where there is
still a big proportion of people who are not at ease with computers or
smartphones. Even an entreprising friend of mine judges that it&amp;#8217;s too
late for him to start learning how to code whereas he&amp;#8217;s only 25! But have you
experienced &lt;a href="http://www.youtube.com/watch?v=aXV-yaFmQNk"&gt;kids change of behaviour&lt;/a&gt; towards our world?
I don&amp;#8217;t think there will be many kids in 10 years who won&amp;#8217;t know how to
use a smartphone. And I do want to think that these kids in 10 years won&amp;#8217;t
be as reluctant to learn code as people can be today. Perhaps the
qualifiers &lt;em&gt;geeky&lt;/em&gt; or &lt;em&gt;nerd&lt;/em&gt; won&amp;#8217;t exist anymore, or have a very distant meaning,
commensurate to what these people have created by now.
Who knows ?&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/px-SWkl4eoI" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/06/25/start-your-kids-coding-very-soon/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Starting a Startup Should Not Be The Primary Concern]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/bXIFYL7PU7w/" />
    <updated>2012-06-19T13:12:00+02:00</updated>
    <id>http://needforair.com/blog/2012/06/19/starting-startup-not-principal-concern</id>
    <content type="html">&lt;p&gt;Last week, &lt;a href="http://robgo.org/about/"&gt;Rob Go&lt;/a&gt; from &lt;a href="http://nextviewventures.com/"&gt;NextViewVentures&lt;/a&gt;
explained why in his opinion people should &lt;a href="http://robgo.org/2012/05/14/think-twice-before-starting-a-company/"&gt;think twice before starting a
company&lt;/a&gt;: too much
hype, harder to stand out, we are at the end of one innovation cycle and at the beginning of a new one
which is less favorable to unexperienced and non-technical founders.&lt;/p&gt;

&lt;p&gt;So to the question &lt;a href="http://robgo.org/2012/06/10/what-to-do-instead-of-starting-a-company/"&gt;&lt;em&gt;What to do instead of starting a company?&lt;/em&gt;&lt;/a&gt;
he answers: &lt;em&gt;Join the winningest company you can find in a sector you care about with people you like&lt;/em&gt;.
Should you agree or not, this recommendation has its pros and cons but one can&amp;#8217;t come to
a decision easily. The most important lesson to learn comes at the end:&lt;/p&gt;

&lt;p&gt;&lt;img class="right" src="http://img84.imageshack.us/img84/2324/imagerxss.jpg" width="220"&gt;&lt;/p&gt;

&lt;blockquote&gt;&lt;p&gt;I think there is just the inherent satisfaction of being a part of a
company that is making a big dent in the world.  We’d all like to be the
person who started that company, but there is a huge amount of pride to
be had in being a contributor, even if you aren’t a leader.  Also,
scale and success give companies the right to do something meaningful.
I often hear founders of failed companies lament “I realized that I
just wasn’t that excited about X, Y, or Z market.”  Well, the truth
is, most people probably aren’t that excited about about helping
merchants process credit cards (until Square) or the apartment
rental industry (until Air BnB) or local advertising (until FourSquare),
or the private car industry (until Uber) etc etc. Being part of a successful
company that is shaping the future of an industry is usually inherently
interesting and motivating, and it’s a great way to spend a few years
of your life until the time is right for you to start a company that will do the same.&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;It&amp;#8217;s a very interesting analysis as he doesn&amp;#8217;t try to give a clear cut
and general solution applicable to everybody. Instead he takes into
account the personality of people who could be disposed to start a
company, noting that founding a startup is not necesseraly the best fit for them.
The true concern one should have is to make a dent in the world. &lt;a href="http://markbivens.com/m/about"&gt;Mark Bivens&lt;/a&gt;
came to the same conclusion: &lt;a href="http://markbivens.com/m/archives/feeling-a-part-of-something-bigger"&gt;People need to feel a part of something bigger&lt;/a&gt;
and joining a startup could be the best answer to this feeling. It will never be
be too late to found its company after such an experience, on the
contrary it can only make things easier.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/bXIFYL7PU7w" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/06/19/starting-startup-not-principal-concern/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[To Make You Smile]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/enQEv4vjaTI/" />
    <updated>2012-06-15T10:29:00+02:00</updated>
    <id>http://needforair.com/blog/2012/06/15/to-make-you-smile</id>
    <content type="html">&lt;p&gt;This week Fab celebrated &lt;a href="http://betashop.com/post/24759506656/happy-fabiversary-1-year-of-fab"&gt;their first anniversary&lt;/a&gt;
(since their pivot, as &lt;a href="http://betashop.com/post/19456853116/fab-was-an-overnight-success-on-day-474"&gt;Fab was not an overnight success on day
 one&lt;/a&gt;).&lt;/p&gt;

&lt;p&gt;Their growth has been amazing: 4.75 M members and +100 M in sales in just
one year. And it seems like it&amp;#8217;s just the beginning as they&amp;#8217;ve been successfully
conquering mobile users: 30% to 40% of Fab’s daily visits are now via mobile. As mobile is the biggest
growth lever that an ecommerce company can have, these figures is a
good sign for the future Fab&amp;#8217;s sales.&lt;/p&gt;

&lt;p&gt;How did they perform so well? Mark Suster would say that they &lt;a href="http://www.bothsidesofthetable.com/2012/05/23/its-morning-in-venture-capital/"&gt;flawlessly executed their business
model&lt;/a&gt; but I&amp;#8217;d
go deeper in the reasons and say that their success comes from their &lt;a href="http://betashop.com/post/13607881842/10-ways-fab-is-building-a-different-type-of-company"&gt;core beliefs
&lt;/a&gt;
and the energy they put to broadcast them.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://imageshack.us/photo/my-images/163/brocode.png/"&gt;&lt;img src="http://img163.imageshack.us/img163/8470/brocode.png" alt="BroCode" /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;They &lt;em&gt;believe&lt;/em&gt; in a vision, in core principles they love to repeat as
much as possible. This is even their first statements in their &lt;a href="http://betashop.com/post/24759506656/happy-fabiversary-1-year-of-fab"&gt;Happy
Fabiversary blog post&lt;/a&gt;. You can search for
each of these belief in their blog to see how often they come back. These values stand at
the epicenter of their attitude and drive.&lt;/p&gt;

&lt;p&gt;Fab communicates their beliefs with such a passion that we can
feel them behind every single line of text in their
website, behind every single quote from Jason Goldberg. Their gimmick
&lt;em&gt;To Make You Smile&lt;/em&gt; underlies all their decisions and choices: &lt;em&gt;Color is
very important, color makes people smile.&lt;/em&gt; At Fab they have their core
principles and they stick to it: &lt;em&gt;We care more about making people smile
than making money from them&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Even if one could argue that they do it just for marketing purposes I
truly think they do it because they uphold totally their core beliefs. They communicate their
vision perfectly and make people adhere to it because they act like
passionate leaders.&lt;/p&gt;

&lt;p&gt;Choosing core values and placing every single decision the company makes
in the perspective of these values is what makes me smile.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/enQEv4vjaTI" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/06/15/to-make-you-smile/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Challenge Accepted]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/m8uh_Ms71zo/" />
    <updated>2012-06-11T14:33:00+02:00</updated>
    <id>http://needforair.com/blog/2012/06/11/challenge-accepted</id>
    <content type="html">&lt;p&gt;Our book &lt;a href="http://leanpub.com/startupflow"&gt;Startup
Flow&lt;/a&gt; is featured at page 97 of this week&amp;#8217;s edition of &lt;em&gt;&lt;a href="http://www.challenges.fr/"&gt;Challenges&lt;/a&gt;&lt;/em&gt;,
a French weekly newspaper dedicated to business and the economy.&lt;/p&gt;

&lt;p&gt;&lt;img src="http://online.milibris.com/thumbnail/issue/75c743fd-bebd-4fd4-ac17-dccfcf5c9f53/front/catalog-cover-icon.png?force_display=1" alt="Challenges Cover" /&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Challenges&lt;/em&gt; says
the book is &lt;em&gt;&amp;#8220;Ideal and time-saving for teams looking for the most productive workflow&amp;#8221;&lt;/em&gt;, which is
exactly what we had in mind when we wrote the book.&lt;/p&gt;

&lt;p&gt;If you haven&amp;#8217;t read the book yet, &lt;a href="http://leanpub.com/startupflow"&gt;do it right
now&lt;/a&gt; and spread the word!&lt;/p&gt;

&lt;p&gt;Here is a photograph of the article (the quality is not too good as it was taken with an iPhone 3GS):&lt;/p&gt;

&lt;p&gt;&lt;a target='_blank' title='ImageShack - Image And Video Hosting' href='http://imageshack.us/photo/my-images/692/challengesarticlez.jpg/'&gt;&lt;img src='http://img692.imageshack.us/img692/6048/challengesarticlez.jpg' border='0'/&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank you &lt;em&gt;Challenges&lt;/em&gt;!&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/m8uh_Ms71zo" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/06/11/challenge-accepted/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Rockstars Don't Give a Fuck]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/7eZ7b9K9mUg/" />
    <updated>2012-06-07T17:59:00+02:00</updated>
    <id>http://needforair.com/blog/2012/06/07/rockstars-dont-give-a-fuck</id>
    <content type="html">&lt;p&gt;Most of what I consider genuinely useful and insightful
in my life today I learned from my parents and from my poker days. Poker made me fearless,
it made me think about long term, about positive expected value, it made me believe that you can get
really big even if you start with close to nothing.&lt;/p&gt;

&lt;p&gt;Getting good at poker takes hard work, a lot of time dedicated to studying
theory, regular opponents, patterns, but also, and most importantly, a
lot of work on yourself to prevent tilt. Tilt is the name poker players
give to the phenomenon that happens when one gets a few bad beats in a
row and loses it. Somehow one feels forgotten, unjustly punished by the
poker gods and starts playing as though one is due for some good run of
cards. It usually ends up pretty badly. Self control is the key
to moving up in stakes and being succesful at online poker.&lt;/p&gt;

&lt;p&gt;However, the one thing I noticed that differentiated the the very best, the smartest, the most
crazy good players from the merely very good players is that although
poker is a money game
these guys didn&amp;#8217;t give a fuck about money. They&amp;#8217;re ready to lose it all,
to lose $500k in one night even if that is 100% of their net worth
(acquired from poker exclusively usually)
because they 300% believe in their game, their edge and what
they&amp;#8217;re doing. They are unfathomably focused on outplaying their
opponent, not winning money. Somehow these players always end up
super rich. They end up going on killing sprees, annihilating
everyone that challenges them, because they focus on one thing:
the game. They don&amp;#8217;t care about PR, rakeback deals,
staking, how big their bankroll is at any given time, what they&amp;#8217;re gonna
be able to buy with that $500k they just won in a few hours, saving for
their retirement or whatever.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://memegenerator.net"&gt;&lt;img src="http://cdn.memegenerator.net/instances/400x/11882883.jpg" alt="I Don't give a shit" /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;All they
care about is making the best play every single time, to the best
of their ability. That&amp;#8217;s how Tom &amp;#8216;durrrr&amp;#8217; Dwan lost 5 millions (we&amp;#8217;re
talking about a self-made 20-something year-old guy here) in
a few days to Isildur1, some even younger Swedish sicko who appeared at of
nowhere and suddenly started beating every top player on Full Tilt Poker. Tom
Dwan continued playing because he thought he had an edge. He
didn&amp;#8217;t care about the money or he would&amp;#8217;ve stopped way sooner.
Nobody likes to lose a few millions in a matter of hours. But he
bounced back. Not in this match, not against Isildur1. But in some
other games. It&amp;#8217;s all about passion. If you want to be the best at
something, you need to dive into it without asking questions, without
thinking about the risks, nor the rewards. Do it because that&amp;#8217;s what
make you pulse and feel alive.&lt;/p&gt;

&lt;p&gt;Look at Mark Zuckerberg. He is the epitome of the startup rockstar. He is all about Facebook. He doesn&amp;#8217;t shift his focus from Facebook, doesn&amp;#8217;t care what people say about him or Facebook.
He is not afraid of losing one round, he makes all the moves that he
thinks are best for Facebook.
 He just plows away and in this regard reminds me
of the best poker players, only he plays at different stakes. And this why I&amp;#8217;m gonna buy
Facebook stock as soon as my brokerage account is open.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Disclaimer: this is not professional investment advice.&lt;/em&gt;&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/7eZ7b9K9mUg" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/06/07/rockstars-dont-give-a-fuck/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Some Positive Thoughts About the Facebook IPO]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/1Mmf4P4LbP4/" />
    <updated>2012-05-29T12:00:00+02:00</updated>
    <id>http://needforair.com/blog/2012/05/29/facebook-ipo</id>
    <content type="html">&lt;p&gt;Since the Facebook&amp;#8217;s IPO fiasco, many commenters (mainly bloggers and Wall Street analysts)
seem keen to say that Facebook is really not worth that much. I don&amp;#8217;t agree, because I think
that trying to determine Facebook&amp;#8217;s value is premature.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.flickr.com/photos/kevinkrejci/7218818780/" target="_blank"&gt;&lt;img alt="Facebook headquarters" src="http://farm6.staticflickr.com/5320/7218818780_9507a57365_n.jpg" height="320px" width="320px"&gt;&lt;/a&gt;
&lt;em&gt;CC Licence - Author: &lt;a href="http://www.flickr.com/photos/kevinkrejci/"&gt;Kevin Krejci&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;Facebook&amp;#8217;s IPO Surely Didn&amp;#8217;t Go Well&lt;/h2&gt;

&lt;p&gt;It&amp;#8217;s a well-known fact, but it always makes me cringe: I still don&amp;#8217;t
understand why &lt;a href="http://www.huffingtonpost.com/daniel-dicker/facebook-retail-investors_b_1549602.html"&gt;well-connected people would have the right to buy shares
at a better price than &amp;#8220;normal&amp;#8221; investors&lt;/a&gt;.
But it&amp;#8217;s a fact: if you are one of the underwriters&amp;#8217; best clients, you
will be able to purchase the stock at its opening price (in Facebook&amp;#8217;s
case $38 per share). You will even able to purchase the stock before the IPO, at a lower price than $38.
If you&amp;#8217;re not, you will have to wait. In this IPO,
retail (&amp;#8220;normal&amp;#8221;) investors had to &lt;a href="http://www.cnbc.com/id/47043815//"&gt;wait until the stock traded at $42 a
share&lt;/a&gt; before being able to buy. On
top of this common IPO problem, key information was known to insiders but not
shared with all investors, which is why &lt;a href="http://news.cnet.com/8301-1023_3-57439918-93/facebook-zuckerberg-sued-over-ipo/"&gt;Facebook has been sued&lt;/a&gt;.
In that regard, Facebook&amp;#8217;s IPO surely didn&amp;#8217;t go well.&lt;/p&gt;

&lt;h2&gt;Nobody Knows Facebook&amp;#8217;s True Worth&lt;/h2&gt;

&lt;p&gt;But even though it didn&amp;#8217;t go well, I am puzzled to read so many negative
comments about Facebook itself. All kinds of people, from bloggers to
Wall Street analyst seem to forget that Facebook still is a
multi-billion dollars business. What I think many fail to see is that,
in fact, nobody can seriously pretend to know Facebook&amp;#8217;s true worth. It
could be &lt;a href="http://cdixon.org/2012/05/15/facebooks-business-model/"&gt;worth a lot more, or a lot less&lt;/a&gt;.
This is different from a traditional company, for which everybody knows
the business model (think GM, Total or even Apple). In Facebook&amp;#8217;s case,
we don&amp;#8217;t know how they&amp;#8217;re going to monetize their 900M users. Is it
going to be through advertising? A premium version? Will they be able to
make money on mobile platforms? We (at least I) don&amp;#8217;t know. A Facebook share is a lottery
ticket, whose value today has nothing to do with its value tomorrow. I for one am
no Facebook expert, so instead of trying to guess the future, I will
just sit back, relax, and see how the Facebook team continues to innovate.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/1Mmf4P4LbP4" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/05/29/facebook-ipo/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[History is Repeating Itself: from Online Poker to Startups]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/Z4FSkjjM2Ng/" />
    <updated>2012-05-21T12:49:00+02:00</updated>
    <id>http://needforair.com/blog/2012/05/21/history-is-repeating-itself-from-online-poker-to-startups</id>
    <content type="html">&lt;p&gt;&lt;a href="http://i38.tinypic.com/34telxc.jpg" target="_blank"&gt;&lt;img alt="Graph of Isildur1's winnings against durrrr" src="http://i38.tinypic.com/34telxc.jpg" height="450px" width="600px"&gt;&lt;/a&gt;
&lt;em&gt;Image courtesy of &lt;a href="http://highstakesdb.com"&gt;High Stakes DB&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Poker is often used as an analogy for &lt;a href="http://www.avc.com/a_vc/2012/03/from-the-archives-the-poker-analogy.html"&gt;investing&lt;/a&gt;
or daytrading. The rationale being that there is money at stake, some randomness involved and people are actually winning
in all these &amp;#8220;games&amp;#8221;. However in this blogpost I don&amp;#8217;t want to focus on
these elements but rather on how the startup ecosystem is going through
exactly the same thing the online poker ecosystem went through a few
years ago. In
order to clear the air, I&amp;#8217;ve started playing poker when I was in
college/grad school, and won mid 6 figures playing heads-up cash games in quite a short time
starting from a free 50 bucks, rising
pretty fast once I &amp;#8220;got it&amp;#8221;. But I was never even close to a top
player like &lt;a href="http://www.highstakesdb.com/profiles/jungleman12.aspx"&gt;jungleman12&lt;/a&gt; or &lt;a href="http://www.highstakesdb.com/profiles/pokerstars/Sauce123.aspx"&gt;Sauce123&lt;/a&gt; who made millions by the
time they were 21. The
highest I played good players was 1000nl
with some drunken stunts much higher (these didn&amp;#8217;t go too well). &lt;em&gt;For those
who don&amp;#8217;t know, 1000nl means $5/$10 blinds no limit, meaning you usually
play with a $1000+ stack).&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;A Brief History of Online Poker&lt;/h2&gt;

&lt;h3&gt;Early On&lt;/h3&gt;

&lt;p&gt;Online poker started in
&lt;a href="http://en.wikipedia.org/wiki/Online_poker"&gt;1998&lt;/a&gt; but I was still
playing Lego(TM) then. However, from what I gathered during my insanely
long hours reading poker blogs and
&lt;a href="http://forumserver.twoplustwo.com"&gt;twoplustwo&lt;/a&gt;, it was pretty awesome,
nobody had a clue what they were doing, and a few smart guys made
millions at 16 years old because they were a bit more creative, ruthless
and self-controlled than the others. All the winners were completely
self-taught, information about winning strategies, psychological
pitfalls were very scarce, and theory was completely absent of most
winning poker players&amp;#8217; thought processes.&lt;/p&gt;

&lt;h3&gt;Poker Reaches For Everyone&lt;/h3&gt;

&lt;p&gt;I entered the online poker world belatedly, around 2008-9. At this point, poker training sites such
as &lt;a href="http://cardrunners.com"&gt;Cardrunners&lt;/a&gt;, &lt;a href="http://leggopoker.com"&gt;Leggopoker&lt;/a&gt;, &lt;a href="http://deucescracked.com"&gt;DeucesCracked&lt;/a&gt;
already existed and were growing pretty rapidly. These sites would
charge you a measly $30 a month for incredible insights from some very
good poker players, and probably enabled thousands of people to earn a
ton of money they would have never hoped for. In Europe,
&lt;a href="http://pokerstrategy.com"&gt;Pokerstrategy&lt;/a&gt; was even more daring, and
decided to give a free $50 (it was really free, no CC required or any
other bullshit) to anyone asking for it that passed a 20-question quizz
(and that surely didn&amp;#8217;t weed out anybody but the laziest chumps). It
worked phenomenally well from the rumors I heard.
The point is, online poker had matured to the stage at which people were
now making money coaching it (I coached small stakes for $200/hour, but high-stakes coaching rates were closer to $1-2k/hour), teaching it via video, writing and selling &lt;a href="http://www.dailyvariance.com/poker-books/let-there-be-range/"&gt;books&lt;/a&gt;
about it for seemingly obscene &lt;a href="http://bestpokercoaching.com/shop/product/the-blue-book-of-poker-by-shootaa-aka-reid-young/"&gt;prices&lt;/a&gt;,
blogging about it, etc. It was really an incredible thing. Now anyone
with a bit of self-control, normal intelligence and a good deal of
dedication could become a winning poker player and live the dream.
Someone once said on Two Plus Two that it was probably the only place on
earth where a 16-year old would feel bad about making only $100k in a
year and complain that he had been unlucky.&lt;/p&gt;

&lt;h3&gt;The Level Goes Up Globally&lt;/h3&gt;

&lt;p&gt;However, it made the global level go up steeply and quickly.
It got harder than ever to get past micro-stakes as most people there
were actually trying to win, watching videos, getting coaching. They
were still terrible, but much better than the people playing the same stakes 5
years earlier.
The same held true at every stake, and at mid-stakes, people were really
starting to get pretty good, high stakes was reserved to elite
hard-working players. By the time I got the bankroll to comfortably play
mid-stakes, it had become really tough. Fish would get eaten alive
extremely quickly and a lot of hitherto winning players started breaking
even, becoming &lt;a href="http://forumserver.twoplustwo.com/32/beginners-questions/being-rakeback-pro-389038/"&gt;rakeback pros&lt;/a&gt;, &lt;a href="http://forumserver.twoplustwo.com/29/news-views-gossip/remember-h-llingol-700116/"&gt;went broke&lt;/a&gt; or quit the game altogether.&lt;/p&gt;

&lt;h3&gt;Good Players Start Accelerators&lt;/h3&gt;

&lt;p&gt;A few good players saw how their students went from donk to very good
quickly, and how little money they made from it (relatively). So they
started devising group-staking programs, formed stables of young eager
horses that wanted to benefit from their insights and threw them enough
money to get them started. I&amp;#8217;m pretty sure this went very well for a few
elite players, but terribly wrong for other people with lower quality
insights that just tried to follow the money.&lt;/p&gt;

&lt;h3&gt;People Go The Easiest Way When It Gets Too Hard&lt;/h3&gt;

&lt;p&gt;So a lot of people learned to game select better (some would say
&lt;a href="http://www.kokev.in/2010/12/19/pokers-tragedy-of-the-commons-bumhunting/"&gt;bumhunt&lt;/a&gt;), which means choosing
profitable tables where there are weaker players. Some (including
myself), took it to the extreme by only playin heads up (one-to-one)
with significantly worse players than themselves at stakes they cared
about. This is not wrong in and of itself, anyone&amp;#8217;s entitled to his
choices, and some people were after the money, not the glory. This
highly annoyed the greatest players though, because they couldn&amp;#8217;t find
anyone to play with.&lt;/p&gt;

&lt;h3&gt;Stakes Rise&lt;/h3&gt;

&lt;p&gt;Stakes also gradually rose. There was a time when 400nl was the highest
online stake offered, then it went to 2knl and when I first played, the highest stakes
offered were already 10knl. A few months later, 100knl tables were &lt;a href="http://www.highstakesdb.com/548-railheaven-5001000-nl-holdem-6-seats-new-table.aspx"&gt;introduced&lt;/a&gt;
on Full Tilt Poker (rip).&lt;/p&gt;

&lt;h3&gt;Established Top Players Help Each Other&lt;/h3&gt;

&lt;p&gt;As available stakes rose from 2knl to 100knl, swings became huge and few
players were properly bankrolled for those stakes. High stakes players
started taking a piece of one another all the time, leading to confusing
and some time embarassing or devastating scenarios, although some
probably did very well at staking and swapping percentages.&lt;/p&gt;

&lt;h3&gt;People Say It&amp;#8217;s Now Impossible to Become a Legend&lt;/h3&gt;

&lt;p&gt;People were saying rising to high stakes let alone
nosebleeds was impossible, and yet a few people did it, through sheer
hard work, passion and probably talent. The most legendary of all is
&lt;a href="http://www.pokertableratings.com/fulltilt-player-search/jungleman12"&gt;Jungleman&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;So How Does the Startup World Compare?&lt;/h2&gt;

&lt;p&gt;I&amp;#8217;m obviously very new to the startup world, having started my own only 2
months ago. (Yeah while at Stanford, I foolishly (or brilliantly) chose to
play 25nl instead of going to my entrepreneurship classes, ah the
allure of quick money). I won&amp;#8217;t talk about the early days because I
really haven&amp;#8217;t read enough about it and most of you probably know more
about it than I do.&lt;/p&gt;

&lt;h3&gt;Startup Are For Everyone&lt;/h3&gt;

&lt;p&gt;But I feel like I&amp;#8217;m entering the startup world at roughly the same stage
I entered the online poker world. The early goldrush is over, meaning
it&amp;#8217;s not about being at the right place at the right time any more. The
starting, building, growing processes are getting theorized and written
about everywhere on the internet. &lt;a href="http://news.ycombinator.com"&gt;Hacker
News&lt;/a&gt; is the equivalent of &lt;a href="http://forumserver.twoplustwo.com"&gt;Two Plus
Two&lt;/a&gt;.
People are writing books, &lt;a href="http://theleanstartup.com/book"&gt;The Lean Startup&lt;/a&gt;,
The Startup Manual and a
slew of others come to
mind (although these are much more affordable than poker books). Hell
even we wrote a &lt;a href="http://leanpub.com/startupflow"&gt;book&lt;/a&gt;!
People are making &lt;a href="http://www.udemy.com/search?q=startup"&gt;videos&lt;/a&gt;, &lt;a href="http://www.skillshare.com/Course-Launching-Your-Startup-Idea/2055575858"&gt;selling&lt;/a&gt;
&lt;a href="http://www.skillshare.com/Employee-Equity-Overview/890814338"&gt;classes&lt;/a&gt; about
&lt;a href="http://www.skillshare.com/site/search?q=startup&amp;amp;city=nyc"&gt;startups&lt;/a&gt; on
&lt;a href="http://skillshare.com"&gt;Skillshare&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Even the core engineering competencies are given away for free by sites
such as &lt;a href="http://udacity.com"&gt;Udacity&lt;/a&gt; or &lt;a href="http://coursera.org"&gt;Coursera&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;And this is really great. It opens opportunities to millions of people
that didn&amp;#8217;t grow up in the Silicon Valley to gain invaluable insights
into what made successes and failures, it makes people dream and
motivates people, like I used to dream reading Cole South&amp;#8217;s &lt;a href="http://cts687.livejournal.com/"&gt;blog&lt;/a&gt; (a fascinating read about his lightning-fast rise to legend status).
Now I read stories about the Paypal Mafia, Zuckerberg, Drew Houston,
Brian Chesky, Kevin Rose or Kevin Systrom. Again the stakes are not the
same, and it&amp;#8217;s incredible to be able to dream like that.&lt;/p&gt;

&lt;h3&gt;Good Players Start Accelerators&lt;/h3&gt;

&lt;p&gt;Y Combinator and so many others start forming stables of promising
teams that they stake and give insights to. The best do make a lot of
money from it and produce some of today&amp;#8217;s rising stars. All the
less selective followers probably won&amp;#8217;t be as lucky.&lt;/p&gt;

&lt;h3&gt;The Level Goes Up Globally&lt;/h3&gt;

&lt;p&gt;However what this means is that the global level is also rising, and
rising quickly and globally. More and more talented people now know that
they can apply their skills and time to doing a startup, and the
standards for traction, quality of product, quality of team, revenues
are going up before you can be considered for an investment.&lt;/p&gt;

&lt;p&gt;A lot more people are now competing, not only for funding but also for
spots in Google results pages, Google Ads rankings, app-stores rankings,
share of time, share of mind, etc.&lt;/p&gt;

&lt;h3&gt;People Go The Easiest Way When It Gets Too Hard&lt;/h3&gt;

&lt;p&gt;A lot of ideas are now X as a service, or X for Y, where you just
replace X and Y by an existing service, company, market or geography. Sometimes that might
a genuinely great idea, but I feel that this way of thinking is just
never going to yield to real breakthroughs, and more importantly it is
going to lead to ton of mediocre, unambitious ideas. However, if we
follow the poker analogy, it is very likely the best way to have enjoy
very decent monetary success and to build a thriving business. Shooting
for the stars is harder than ever, as was rising to nosebleed stakes in
2009.&lt;/p&gt;

&lt;h3&gt;Stakes Rise&lt;/h3&gt;

&lt;p&gt;We&amp;#8217;re reading about it every other day on Techcrunch, Twitter and tech
blogs, valuations are through the roof, it&amp;#8217;s a bubble, blablabla. I have
no idea if it&amp;#8217;s a bubble or not but the facts are here: it&amp;#8217;s not
uncommon now to talk of a $3million seed round or a $10million series A
round and $50million series B (100knl does seem small compared to these
numbers). Facebook is going to be the biggest tech
IPO in history. Services are now reaching millions or even billions of
users.&lt;/p&gt;

&lt;h3&gt;Established Top Players Help Each Other&lt;/h3&gt;

&lt;p&gt;Established entrepreneurs, are taking pieces of each other&amp;#8217;s companies
all the time as most of them are very active angel investors from what I
can read on Techcrunch, just like high-stakes players would stake each
other. Not sure how this will end for most of them, if we follow the poker analogy,
probably badly in a lot of cases. However I&amp;#8217;m sure these investments are
dealt with in a more professional way than 18 year-old kids simply chatting on AIM and transfering hundreds
of thousands of $ to one another just by clicking a few buttons
on a poker site, which led to a lot of confusion and scams.&lt;/p&gt;

&lt;h3&gt;People Say It&amp;#8217;s Now Impossible to Become a Legend&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://twitter.com/#!/Jason"&gt;Jason Calacanis&lt;/a&gt;&amp;#8217;s last newsletter was
about &lt;em&gt;The Age of Excellence&lt;/em&gt;. In his words, &lt;em&gt;There&amp;#8217;s no room left in 2012 for average, or even good, products.&lt;/em&gt;
Meaning that if you want to make it to the top, you know need to battle
as hard as ever, work extremely hard (not necessarily in a long hours
way) and consistently outsmart your competition. And the rise of those
who do everything right will be meteoric (Instagram rings a bell?) like
jungleman12&amp;#8217;s rise was in online poker.&lt;/p&gt;

&lt;h2&gt;Conclusion&lt;/h2&gt;

&lt;p&gt;So I feel like history is really repeating itself for me, except this
time I won&amp;#8217;t settle for bumhunting or an easy way out.
Also I actually will make something useful instead of
just taking people&amp;#8217;s money by just clicking buttons at 4am in my
underpants with pizza boxes and bottle of cokes surrounding me.
Hopefully the startup world won&amp;#8217;t crash like online poker did
on &lt;a href="http://www.pokernews.com/news/2011/04/a-closer-look-at-online-poker-black-friday-indictment-10224.htm"&gt;Black Friday&lt;/a&gt;.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/Z4FSkjjM2Ng" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/05/21/history-is-repeating-itself-from-online-poker-to-startups/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Behind Opinion polls: Fundamentals and Reliability]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/lb-qT90l5VA/" />
    <updated>2012-05-15T20:12:00+02:00</updated>
    <id>http://needforair.com/blog/2012/05/15/go-behind-opinion-polls</id>
    <content type="html">&lt;p&gt;&lt;em&gt;This article is quite technical and requires a mathematical background
for a comprehensive understanding. All
technical points have a reference to the corresponding Wikipedia&amp;#8217;s article for further
explanations.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;We are in an election time in France. Everyday news is rythmed by
polls. &lt;em&gt;Nicolas Sarkozy is falling from 2% in today&amp;#8217;s poll from IPSOS&lt;/em&gt;,
&lt;em&gt;Francois Hollande slipped below 33% after the crisis&lt;/em&gt; etc&amp;#8230; Everybody
seems to give a lot of credit to these polls forgetting most of the time
that they are just statistical estimations of the reality. But how reliable are they?
The results for the first round of the french presidential election
seemed to surprise so many people and medias that it pushed me to dig
into my maths lessons from college to look for some scientific
explanation if any.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.flickr.com/photos/ownipics/4875527294/"&gt;&lt;img src="http://farm5.staticflickr.com/4073/4875527294_cacbf9601e_n.jpg" alt="Polling" /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;Organizing the Opinion Poll&lt;/h2&gt;

&lt;p&gt;Opinion polls tend to estimate the percentage of people who will vote
for a given candidate. Polling Institutes want to produce accurate polls
but they can&amp;#8217;t poll a too big sample as it would be time consuming and
expensive.&lt;/p&gt;

&lt;p&gt;They choose a &lt;a href="http://en.wikipedia.org/wiki/Sampling_(statistics)"&gt;representative sample&lt;/a&gt;
of the population and ask them for whom they plan to vote. The responses
 are assumed &lt;a href="http://en.wikipedia.org/wiki/Independence_(probability_theory)"&gt;independant&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Once collected, how do we use them build an estimate of the votes and what is the
precision of this estimate?&lt;/p&gt;

&lt;p&gt;The &lt;em&gt;natural and logical&lt;/em&gt; estimate is to take the
&lt;a href="http://en.wikipedia.org/wiki/Sample_mean"&gt;sample mean&lt;/a&gt; as an estimator. How do we
justify such an estimate and what is its precision? We&amp;#8217;ll see that what
sounds like common sense has a strong mathematical justification.&lt;/p&gt;

&lt;h2&gt;Building the Estimate&lt;/h2&gt;

&lt;p&gt;We are in a situation where we have &lt;em&gt;n&lt;/em&gt; people&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ X_1, X_2,&amp;#8230;X_n\]
&lt;/div&gt;


&lt;p&gt;who can choose between &lt;em&gt;k&lt;/em&gt; candidates. We define the variable&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \delta_{i,j} \]
&lt;/div&gt;


&lt;p&gt;which is equal to &lt;em&gt;1&lt;/em&gt; if person &lt;em&gt;i&lt;/em&gt; votes for candidate
&lt;em&gt;j&lt;/em&gt; and &lt;em&gt;0&lt;/em&gt; if not.&lt;/p&gt;

&lt;p&gt;The real vote intentions we want
to estimate are noted :&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \pi_1, \pi_2,&amp;#8230;\pi_k\]
&lt;/div&gt;


&lt;p&gt;with the constraint:&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \sum_j^k \pi_j = 1 \]
&lt;/div&gt;


&lt;p&gt;The probability to observe the result of the polling is:&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ p_{\pi}(X_1, X_2,&amp;#8230;,X_n) = \prod_i^n p_{\pi} (X_i)\]
&lt;/div&gt;


&lt;p&gt;as the &lt;em&gt;n&lt;/em&gt; people are chosen independantly.&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \prod_i^n p_{\pi} (X_i) = \prod_j^k \prod_i^n \pi_j^{\delta_{i,j}} =
  \prod_j^k \pi_j^{n_j}\]
&lt;/div&gt;


&lt;p&gt;where&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ n_j = \sum_i^n \delta_{i,j}\]
&lt;/div&gt;


&lt;p&gt;The strategy we adopt is, given the &lt;em&gt;n&lt;/em&gt; people, to maximize this
propability of observing the output. Maximizing this propability is the
same as minimizing the &lt;em&gt;-log&lt;/em&gt; of the probability as &lt;em&gt;-log&lt;/em&gt; is a convex
function. With this transformation, the computation of the extremum is
much easier as the product becomes a sum.&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ max[p_{\pi}(X_1, X_2,&amp;#8230;,X_n)] = min[(-log(p_{\pi}(X_1,
        X_2,&amp;#8230;,X_n))] = min[ \sum_j^k n_j log(\pi_j) ]\]
&lt;/div&gt;


&lt;p&gt;To find the minimum with the above constraint we can use the
&lt;a href="http://en.wikipedia.org/wiki/Lagrange_multiplier"&gt;Lagrangian
multiplier&lt;/a&gt; and just
minimize:&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \sum_j^k n_j log(\pi_j) + \lambda(\sum_j^k \pi_j -1)\]
&lt;/div&gt;


&lt;p&gt;which gives us the estimates which minimize the above function&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \hat{\pi_1}, \hat{\pi_2},&amp;#8230;\hat{\pi_k}\]
&lt;/div&gt;




&lt;div markdown="0"&gt;
\[ \hat{\pi_j} = \frac{n_j}{n} \]
&lt;/div&gt;


&lt;p&gt;We just justified the use of the empirical mean as an estimate of the true
mean given a set of observations using &lt;a href="http://en.wikipedia.org/wiki/Maximum_a_posteriori_estimation"&gt;maximum a posteriori
estimation&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;Reliability&lt;/h2&gt;

&lt;p&gt;Given the estimator, which level of trust can we give it? How close is
are the estimated and true values. The &lt;a href="http://en.wikipedia.org/wiki/Law_of_large_numbers"&gt;law of large numbers&lt;/a&gt;
tells us that when the size of the sample goes to infinity the estimated
value tends to the true value. But in reality there is not an infinity
of people who get polled. Usually just a few thousands are. From one
sample to the other the estimator won&amp;#8217;t be the same. So how confident are the polling
institutes in their estimations? The reliability of the estimator
depends on the statistical fluctuations of the estimate around the true
value.&lt;/p&gt;

&lt;p&gt;The &lt;a href="http://en.wikipedia.org/wiki/Central_limit_theorem"&gt;central limit theorem&lt;/a&gt; tells us that
the random variables (&lt;em&gt;m&lt;/em&gt; is the true mean and &lt;em&gt;sigma&lt;/em&gt; the variance):&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \frac{\hat{\pi_j} -nm}{\sigma \sqrt{n}} \] 
&lt;/div&gt;


&lt;p&gt;&lt;a href="http://en.wikipedia.org/wiki/Convergence_in_distribution#Convergence_in_distribution"&gt;converge in distribution&lt;/a&gt;
to a normal random variable with mean 0 and variance 1. From here we
have the approximation:&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ P(|\hat{\pi_j} - \pi_j| \leq \epsilon) = P(\frac{\sqrt{n}|\hat{\pi_j} - \pi_j|}{\sqrt{p(1-p)}} \leq \frac{\sqrt{n}\epsilon}{\sqrt{p(1-p)}}) \approx \int_{-a}^{a} g(x)dx\]
&lt;/div&gt;


&lt;p&gt;where &lt;em&gt;g&lt;/em&gt; is the density of the normal distribution and&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ a = \frac{\sqrt{n}\epsilon}{\sqrt{p(1-p)}} \]
&lt;/div&gt;


&lt;p&gt;from which we can write&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \epsilon = \frac{a\sqrt{p(1-p)}}{\sqrt{n}} \]
&lt;/div&gt;


&lt;p&gt;So given a threshold of confidence &lt;em&gt;t&lt;/em&gt;  we can build a interval of
confidence where we can state with &lt;em&gt;t%&lt;/em&gt; of confidence that the true
value is within this interval:&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ I_t = [\hat{\pi}_{j,n} - \frac{a_t}{2\sqrt{n}}, \hat{\pi}_{j,n} + \frac{a_t}{2\sqrt{n}}] \]
&lt;/div&gt;


&lt;p&gt;where&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ \int_{-a_t}^{a_t} g(x)dx = t\]
&lt;/div&gt;


&lt;p&gt;The value for &lt;em&gt;a&lt;/em&gt; can be found in a computation table. For &lt;em&gt;t&lt;/em&gt; equal to
&lt;em&gt;95%&lt;/em&gt; the value of &lt;em&gt;a&lt;/em&gt; is &lt;em&gt;1.96&lt;/em&gt; which gives us for the interval where there
is &lt;em&gt;95%&lt;/em&gt; of chance that the true value is:&lt;/p&gt;

&lt;div markdown="0"&gt;
\[ I_t = [\hat{\pi}_{j,n} - \frac{1}{\sqrt{n}}, \hat{\pi}_{j,n} + \frac{1}{\sqrt{n}}] \]
&lt;/div&gt;


&lt;h2&gt;In Practice&lt;/h2&gt;

&lt;p&gt;With the simple slider and graphic you can see by yourself the influence
of the number of people polled for an opinion poll. The box represents
the &lt;em&gt;95%&lt;/em&gt; interval of confidence that means there is &lt;em&gt;95%&lt;/em&gt; of chance that the
true vote intention is within this interval.&lt;/p&gt;

&lt;div id='PollingNumericApplication' style="text-align:center;"&gt;&lt;/div&gt;


&lt;script src="http://d3js.org/d3.v2.min.js"&gt;&lt;/script&gt;


&lt;div style="text-align:center;"&gt;
  &lt;label style="width:200px;float:left;"&gt; Size of population&lt;/label&gt;
  &lt;input  id='polling-slider' style="width:160px;margin-left:-300px;" type="range" min="500" max="5000" value="1000"/&gt;
  &lt;span id="polling-range"&gt;1000&lt;/span&gt;&lt;br/&gt;
  &lt;label style="width:200px;float:left;"&gt; Estimated Mean &lt;/label&gt;
  &lt;input style="text-align:center;width:30px;" id='polling-mean' type="text"  value="35"/&gt; &lt;br/&gt;
&lt;/div&gt;


&lt;script &gt;
// Suppose there is currently one div with id "d3TutoGraphContainer" in the DOM
// We append a 600x300 empty SVG container in the div
var pollingChart = d3.select("#PollingNumericApplication").append("svg").attr("width", "600").attr("height", "150");

// Create the bar chart which consists of ten SVG rectangles, one for each piece of data
var pollingIntervals = pollingChart.selectAll('rect').data([1000])
                 .enter().append('rect')
                 .attr("stroke", "none").attr("fill", "rgb(7, 130, 180)")
                 .attr("x", function(d) {return 300 - 2580*1.96/Math.sqrt(d);})
                 .attr("y", function(d, i) { return 25 * i; } )
                 .attr("width", function(d) { return 5160*1.96/Math.sqrt(d); } )
                 .attr("height", "20");
var pollingTickers = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1];


var pollinggetX = function(d) { return 50 + 500 * d; };

var pollingLines = pollingChart.selectAll('.tickers').data(pollingTickers)
                 .enter().append('rect')
                 .classed('tickers', true)
                 .attr("fill", "steelblue")
                 .attr("x", pollinggetX)
                 .attr("y", 60)
                 .attr("width", 1)
                 .attr("height", 10);

var pollingLabels = pollingChart.selectAll('.tickerlabels').data(pollingTickers)
                  .enter().append('text')
                  .classed('tickerlabels', true)
                  .attr("x", pollinggetX)
                  .attr("y", 100)
                  .attr("width", 1)
                  .attr("height", 10)
                  .attr('text-anchor', 'middle')
                  .text(function(d) { return '' + (30+d * 10) + '%'; } );

$('#polling-slider').on('change',function ()
{
  var newValue = parseInt(this.value, '10');
  pollingIntervals.data([newValue])
       .attr("x", function(d) {return 300 - 2580*1.96/Math.sqrt(d);})
       .attr("width", function(d) { return 5160*1.96/Math.sqrt(d); } );
    document.getElementById('polling-range').innerHTML = newValue; 
});
$('#polling-mean').on('change',function (){

  var newValue = parseInt(this.value, '10');
 pollingLabels = pollingChart.selectAll('.tickerlabels').remove();
 pollingLabels = pollingChart.selectAll('.tickerlabels').data(pollingTickers)
                  .enter().append('text')
                  .classed('tickerlabels', true)
                  .attr("x", pollinggetX)
                  .attr("y", 100)
                  .attr("width", 1)
                  .attr("height", 10)
                  .attr('text-anchor', 'middle')
                  .text(function(d) { return '' + (newValue - 5+d * 10) + '%'; } );
});
&lt;/script&gt;


&lt;h2&gt;Conclusion&lt;/h2&gt;

&lt;p&gt;This quick refresher on opinion polls should remind us that opinion polls
can be quite far from reality. And there is one variable that I
didn&amp;#8217;t take into account: there are people who don&amp;#8217;t dare
to name the true candidate they plan to vote for. This is especially
true for extremist votes and explains &lt;a href="http://www.guardian.co.uk/world/2012/apr/22/marine-le-pen-french-election"&gt;why we can experience such a
discrepancy between the estimations and the true results of one
election&lt;/a&gt;.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/lb-qT90l5VA" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/05/15/go-behind-opinion-polls/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Introduction to d3: Build an Animated Graph in 19 Lines of Code]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/Drb9i3srBc8/" />
    <updated>2012-05-09T12:05:00+02:00</updated>
    <id>http://needforair.com/blog/2012/05/09/d3-tutorial</id>
    <content type="html">&lt;p&gt;The goal of this tutorial is to give an introduction to &lt;a href="http://d3js.org/"&gt;d3.js&lt;/a&gt; by using the example of a simple
animated bar chart. Before anything else, let&amp;#8217;s take a look at it.
Click on any bar of this chart -you can do it multiple times- to see what happens!&lt;/p&gt;

&lt;div id='d3TutoGraphContainer'&gt;&lt;/div&gt;


&lt;script type="text/javascript" src="http://d3js.org/d3.v2.min.js"&gt;&lt;/script&gt;


&lt;script type="text/javascript"&gt;
// Suppose there is currently one div with id "d3TutoGraphContainer" in the DOM
// We append a 600x300 empty SVG container in the div
var chart = d3.select("#d3TutoGraphContainer").append("svg").attr("width", "600").attr("height", "300");

// Create the bar chart which consists of ten SVG rectangles, one for each piece of data
var rects = chart.selectAll('rect').data([1 ,4, 5, 6, 24, 8, 12, 1, 1, 20])
                 .enter().append('rect')
                 .attr("stroke", "none").attr("fill", "rgb(7, 130, 180)")
                 .attr("x", 0)
                 .attr("y", function(d, i) { return 25 * i; } )
                 .attr("width", function(d) { return 20 * d; } )
                 .attr("height", "20");

// Transition on click managed by jQuery
rects.on('click', function() {
    // Generate randomly a data set with 10 elements
    var newData = [];
    for (var i=0; i&lt;10; i+=1) { newData.push(Math.floor(24 * Math.random())); }

    // Generate a random color
    var newColor = 'rgb(' + Math.floor(255 * Math.random()) +
                     ', ' + Math.floor(255 * Math.random()) +
                     ', ' + Math.floor(255 * Math.random()) + ')';

    rects.data(newData)
         .transition().duration(2000).delay(200)
         .attr("width", function(d) { return d * 20; } )
         .attr("fill", newColor);
  });
&lt;/script&gt;


&lt;p&gt;Pretty neat, huh? You can see the gist of a standalone working HTML
&lt;a href="https://gist.github.com/2601571"&gt;here&lt;/a&gt;. We&amp;#8217;re going to go through the
javascript part which consists of 19 lines of javascript (comments and
blank lines excluded of course), on top of the &lt;a href="http://d3js.org/"&gt;d3 library&lt;/a&gt;.
d3 (for &lt;strong&gt;d&lt;/strong&gt;ata &lt;strong&gt;d&lt;/strong&gt;riven &lt;strong&gt;d&lt;/strong&gt;ocument) is a &lt;strong&gt;low-level javascript
framework that allows you to easily bind data to elements of the
DOM and manipulate them&lt;/strong&gt;. Even though d3&amp;#8217;s most frequent use is for
drawing charts, &lt;strong&gt;it is not a visualization library&lt;/strong&gt;, it just handles
data binding and data-driven DOM manipulation, which is arguably the
boring -even though not the easiest- part, and lets you focus on content creation.&lt;/p&gt;

&lt;p&gt;So &lt;strong&gt;why&lt;/strong&gt; use a low-level framework to draw graphs when so many integrative chart
libraries exist out there (&lt;a href="http://www.highcharts.com/"&gt;Highcharts&lt;/a&gt; , &lt;a href="https://developers.google.com/chart/"&gt;Google Chart Tools&lt;/a&gt;  &amp;#8230;)? Precisely because
it is &lt;strong&gt;low-level&lt;/strong&gt;. That means you have to put in more effort upfront, but in
return you gain &lt;strong&gt;total control of your data visualization&lt;/strong&gt;, you are more flexible,
and you can freely use the full power of existing technologies (CSS3, HTML5, SVG &amp;#8230;)
to visualize data however you want (as a graph or otherwise).&lt;/p&gt;

&lt;p&gt;This example uses SVG. It&amp;#8217;s not a problem if you are not used to it, as it is very
straightforward, but you may still want to check &lt;a href="https://developer.mozilla.org/en/SVG"&gt;the MDN tutorial on SVG&lt;/a&gt;.
Now let&amp;#8217;s take a look at the code for the chart:&lt;/p&gt;

&lt;div&gt;&lt;script src='https://gist.github.com/2601663.js?file='&gt;&lt;/script&gt;
&lt;noscript&gt;&lt;pre&gt;&lt;code&gt;// Suppose there is currently one div with id &amp;quot;d3TutoGraphContainer&amp;quot; in the DOM
// We append a 600x300 empty SVG container in the div
var chart = d3.select(&amp;quot;#d3TutoGraphContainer&amp;quot;).append(&amp;quot;svg&amp;quot;).attr(&amp;quot;width&amp;quot;, &amp;quot;600&amp;quot;).attr(&amp;quot;height&amp;quot;, &amp;quot;300&amp;quot;);

// There is no rectangle on which we can bind data in the SVG container
// All the data will thus be bound in the enter
var rects = chart.selectAll('rect').data([1 ,4, 5, 6, 24, 8, 12, 1, 1, 20])
                 .enter().append('rect')                           // Add a rectangle for each data in the enter
                 .attr(&amp;quot;stroke&amp;quot;, &amp;quot;none&amp;quot;).attr(&amp;quot;fill&amp;quot;, &amp;quot;steelblue&amp;quot;) // All rectangles are blue with no borders
                 .attr(&amp;quot;x&amp;quot;, 0)
                 .attr(&amp;quot;y&amp;quot;, function(d, i) { return 25 * i; } )
                 .attr(&amp;quot;width&amp;quot;, function(d) { return 20 * d; } )
                 .attr(&amp;quot;height&amp;quot;, &amp;quot;20&amp;quot;);

rects.on('click', function() {
                    rects.transition().duration(2000).delay(200)
                         .attr(&amp;quot;width&amp;quot;, function(d) { return 500 * Math.random(); } )
                  });&lt;/code&gt;&lt;/pre&gt;&lt;/noscript&gt;&lt;/div&gt;


&lt;p&gt;The first thing you should notice is that d3 uses method chaining. Every d3 function
returns a d3 object on which you can apply another d3 function. This makes for code that
reads almost like a sentence, for example the first line would be &amp;#8220;select the div with id
&lt;em&gt;d3TutoGraphContainer&lt;/em&gt; and create a SVG element with width 600 and height 300&amp;#8221;.&lt;/p&gt;

&lt;h2&gt;Selecting elements&lt;/h2&gt;

&lt;p&gt;This is the core of D3: selecting elements of the DOM, and doing stuff with them.
D3 uses CSS3 selectors, also used by jQuery. You can select nodes by tag name, css class or id.&lt;br/&gt;
&lt;code&gt;d3.select(selector)&lt;/code&gt; selects the first node matching &lt;em&gt;selector&lt;/em&gt; and returns a d3 object
containing this node on which you can apply any d3 function.&lt;br/&gt;
&lt;code&gt;d3.selectAll(selector)&lt;/code&gt; selects all nodes matching &lt;em&gt;selector&lt;/em&gt; and returns a d3
object containing these nodes on which you can apply any d3 function. So in our example:&lt;/p&gt;

&lt;figure class='code'&gt; &lt;div class="highlight"&gt;&lt;table&gt;&lt;tr&gt;&lt;td class="gutter"&gt;&lt;pre class="line-numbers"&gt;&lt;span class='line-number'&gt;1&lt;/span&gt;
&lt;span class='line-number'&gt;2&lt;/span&gt;
&lt;span class='line-number'&gt;3&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;td class='code'&gt;&lt;pre&gt;&lt;code class='javascript'&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// Select the element with id &amp;#39;d3TutoGraphContainer&amp;#39;&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// and store it in the variable &amp;#39;chart&amp;#39;&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;chart&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;d3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;select&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;#d3TutoGraphContainer&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/figure&gt;


&lt;p&gt;You can also apply &lt;code&gt;select&lt;/code&gt; to an existing selection, to select among the children
of the existing selection. This is usually useful to ensure that all d3 manipulations
will take place in a container div (&amp;#8216;d3TutoGraphContainer&amp;#8217; in our example):&lt;/p&gt;

&lt;figure class='code'&gt; &lt;div class="highlight"&gt;&lt;table&gt;&lt;tr&gt;&lt;td class="gutter"&gt;&lt;pre class="line-numbers"&gt;&lt;span class='line-number'&gt;1&lt;/span&gt;
&lt;span class='line-number'&gt;2&lt;/span&gt;
&lt;span class='line-number'&gt;3&lt;/span&gt;
&lt;span class='line-number'&gt;4&lt;/span&gt;
&lt;span class='line-number'&gt;5&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;td class='code'&gt;&lt;pre&gt;&lt;code class='javascript'&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// Select all SVG rectangles children of this div&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// At this point this selection is empty but all inserted&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// rectangles will populate it so that we can reference&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// it later in the &amp;#39;click&amp;#39; callback&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;rects&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;chart&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;selectAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;rect&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/figure&gt;


&lt;h2&gt;Inserting in and removing from the DOM&lt;/h2&gt;

&lt;p&gt;d3 provides functions for inserting in and removing from the DOM.
As usual, these functions apply to d3 selections.&lt;br/&gt;
&lt;strong&gt;Note :&lt;/strong&gt; you may ask why use these functions when we can use jQuery for example.
The answer is simple : even though you could do it, d3&amp;#8217;s DOM manipulation functions are
designed to work with other d3 function, so you can use method chaining. It is
thus easier to use d3 and only d3 to build a data-driven document.&lt;/p&gt;

&lt;h3&gt;Inserting in the DOM&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;selection.append(tag)&lt;/code&gt; appends an element of the specified &lt;em&gt;tag&lt;/em&gt; as the last child
of each element of &lt;em&gt;selection&lt;/em&gt;. In our example:&lt;/p&gt;

&lt;figure class='code'&gt; &lt;div class="highlight"&gt;&lt;table&gt;&lt;tr&gt;&lt;td class="gutter"&gt;&lt;pre class="line-numbers"&gt;&lt;span class='line-number'&gt;1&lt;/span&gt;
&lt;span class='line-number'&gt;2&lt;/span&gt;
&lt;span class='line-number'&gt;3&lt;/span&gt;
&lt;span class='line-number'&gt;4&lt;/span&gt;
&lt;span class='line-number'&gt;5&lt;/span&gt;
&lt;span class='line-number'&gt;6&lt;/span&gt;
&lt;span class='line-number'&gt;7&lt;/span&gt;
&lt;span class='line-number'&gt;8&lt;/span&gt;
&lt;span class='line-number'&gt;9&lt;/span&gt;
&lt;span class='line-number'&gt;10&lt;/span&gt;
&lt;span class='line-number'&gt;11&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;td class='code'&gt;&lt;pre&gt;&lt;code class='javascript'&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// Appends a &amp;lt;svg&amp;gt;&amp;lt;/svg&amp;gt; element inside&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// the d3TutoGraphContainer div (selection&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// has only one element)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;chart&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;d3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;select&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;#d3TutoGraphContainer&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;svg&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// Inserts on rectangle for each piece of data&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// in the enter() selection (more explanations&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// in the data binding paragraph)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;rects&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;chart&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;selectAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;rect&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enter&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;rect&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/figure&gt;


&lt;p&gt;There is another way to insert elements in the DOM: &lt;code&gt;selection.insert(name, before)&lt;/code&gt;
which inserts, as a child of every element in &lt;em&gt;selection&lt;/em&gt;, an element of type &lt;em&gt;name&lt;/em&gt;
before the first element selectable by the CSS selector &lt;em&gt;before&lt;/em&gt;. This is useful to
control which SVG elements appear on top of the others (the last one in the page is on top).&lt;/p&gt;

&lt;h3&gt;Removing from the DOM&lt;/h3&gt;

&lt;p&gt;Removing all the elements from a selection is done with the &lt;code&gt;d3.remove()&lt;/code&gt; function,
like this : &lt;code&gt;selection.remove()&lt;/code&gt;. This is often used with the &lt;code&gt;exit()&lt;/code&gt; function, also covered in
the &amp;#8220;Binding data&amp;#8221; section below.&lt;/p&gt;

&lt;h2&gt;Binding data&lt;/h2&gt;

&lt;p&gt;Binding data is the core of d3. The &lt;code&gt;d3.data&lt;/code&gt; function binds data to the selection
to which it was applied, and returns three selections:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;em&gt;update&lt;/em&gt; selection: all the DOM elements from the selection to which we could bind data&lt;/li&gt;
&lt;li&gt;The &lt;em&gt;enter&lt;/em&gt; selection: the &amp;#8216;surplus&amp;#8217; (if any) data for which there was no DOM element&lt;/li&gt;
&lt;li&gt;The &lt;em&gt;exit&lt;/em&gt; selection: all the &amp;#8216;surplus&amp;#8217; (if any) DOM elements for which there was no data&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;Of course, at least one of the &lt;em&gt;enter&lt;/em&gt; and the &lt;em&gt;exit&lt;/em&gt; has to be empty, both are if the data
has the same size as the selection. In our example we use &lt;code&gt;d3.data()&lt;/code&gt; twice:&lt;/p&gt;

&lt;figure class='code'&gt; &lt;div class="highlight"&gt;&lt;table&gt;&lt;tr&gt;&lt;td class="gutter"&gt;&lt;pre class="line-numbers"&gt;&lt;span class='line-number'&gt;1&lt;/span&gt;
&lt;span class='line-number'&gt;2&lt;/span&gt;
&lt;span class='line-number'&gt;3&lt;/span&gt;
&lt;span class='line-number'&gt;4&lt;/span&gt;
&lt;span class='line-number'&gt;5&lt;/span&gt;
&lt;span class='line-number'&gt;6&lt;/span&gt;
&lt;span class='line-number'&gt;7&lt;/span&gt;
&lt;span class='line-number'&gt;8&lt;/span&gt;
&lt;span class='line-number'&gt;9&lt;/span&gt;
&lt;span class='line-number'&gt;10&lt;/span&gt;
&lt;span class='line-number'&gt;11&lt;/span&gt;
&lt;span class='line-number'&gt;12&lt;/span&gt;
&lt;span class='line-number'&gt;13&lt;/span&gt;
&lt;span class='line-number'&gt;14&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;td class='code'&gt;&lt;pre&gt;&lt;code class='javascript'&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// #1: use of the enter selection&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// The update will be empty as the selection&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// is empty, the enter will contain all 10&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// elements&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;rects&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;chart&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;selectAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;rect&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enter&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;doSomething&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// #2: use of the update selection&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// At this point, rects contains the 10 rectangles, and newData contains&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// 10 elements, so the update contains all elements, the enter and the&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// exit are empty&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="nx"&gt;rects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;     &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;doSomething&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/figure&gt;


&lt;p&gt;&lt;code&gt;d3.data()&lt;/code&gt; directly returns the &lt;em&gt;update&lt;/em&gt; so you can immediately do something on it (that&amp;#8217;s our #2).
If you want to work on the &lt;em&gt;enter&lt;/em&gt; or the &lt;em&gt;exit&lt;/em&gt; you need to call &lt;code&gt;d3.enter()&lt;/code&gt; or &lt;code&gt;d3.exit()&lt;/code&gt; on
the update (that&amp;#8217;s our #1).&lt;/p&gt;

&lt;h2&gt;Modifying the DOM according to the data&lt;/h2&gt;

&lt;p&gt;Now it&amp;#8217;s time to use d3 for what it was designed: manipulating the DOM using the data.
We can modify any attribute of an element, CSS classes, properties, text and even inner HTML.&lt;/p&gt;

&lt;h3&gt;Modifying attributes: d3.attr&lt;/h3&gt;

&lt;p&gt;Calling &lt;code&gt;selection.attr(attribute, value)&lt;/code&gt; modifies (and creates if it doesn&amp;#8217;t exist)
the attribute &lt;em&gt;attribute&lt;/em&gt; to give it the value &lt;em&gt;value&lt;/em&gt; for every element of &lt;em&gt;selection&lt;/em&gt;.
&lt;em&gt;value&lt;/em&gt; can be a function of data and element index, as in our example:&lt;/p&gt;

&lt;figure class='code'&gt; &lt;div class="highlight"&gt;&lt;table&gt;&lt;tr&gt;&lt;td class="gutter"&gt;&lt;pre class="line-numbers"&gt;&lt;span class='line-number'&gt;1&lt;/span&gt;
&lt;span class='line-number'&gt;2&lt;/span&gt;
&lt;span class='line-number'&gt;3&lt;/span&gt;
&lt;span class='line-number'&gt;4&lt;/span&gt;
&lt;span class='line-number'&gt;5&lt;/span&gt;
&lt;span class='line-number'&gt;6&lt;/span&gt;
&lt;span class='line-number'&gt;7&lt;/span&gt;
&lt;span class='line-number'&gt;8&lt;/span&gt;
&lt;span class='line-number'&gt;9&lt;/span&gt;
&lt;span class='line-number'&gt;10&lt;/span&gt;
&lt;span class='line-number'&gt;11&lt;/span&gt;
&lt;span class='line-number'&gt;12&lt;/span&gt;
&lt;span class='line-number'&gt;13&lt;/span&gt;
&lt;span class='line-number'&gt;14&lt;/span&gt;
&lt;span class='line-number'&gt;15&lt;/span&gt;
&lt;span class='line-number'&gt;16&lt;/span&gt;
&lt;span class='line-number'&gt;17&lt;/span&gt;
&lt;span class='line-number'&gt;18&lt;/span&gt;
&lt;span class='line-number'&gt;19&lt;/span&gt;
&lt;span class='line-number'&gt;20&lt;/span&gt;
&lt;span class='line-number'&gt;21&lt;/span&gt;
&lt;span class='line-number'&gt;22&lt;/span&gt;
&lt;span class='line-number'&gt;23&lt;/span&gt;
&lt;span class='line-number'&gt;24&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;td class='code'&gt;&lt;pre&gt;&lt;code class='javascript'&gt;&lt;span class='line'&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;rects&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;chart&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;selectAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;rect&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;8&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// Add a rectangle for each data in the enter&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;enter&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;rect&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// All rectangles are steelblue with no borders&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;stroke&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;none&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;fill&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;rgb(70, 130, 180)&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// All rectangles are 0px from the left of&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// the container&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;x&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// First rectangle (i = 0) is 0px from the&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// top of the container, second onf (i = 1)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// is 25px from the top and so on&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;y&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;25&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// Rectangles&amp;#39; width is 20 times the bound data&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// The first one is 20px wide, the second&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="c1"&gt;// one 80px and so on&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;width&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;                 &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;height&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s2"&gt;&amp;quot;20&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/figure&gt;


&lt;h3&gt;Other modifications&lt;/h3&gt;

&lt;p&gt;As this is not a reference, I won&amp;#8217;t show all functions that modify elements.
You can look into the &lt;a href="https://github.com/mbostock/d3/wiki/API-Reference"&gt;d3 reference&lt;/a&gt;
to learn how to modify classes with &lt;code&gt;d3.classed&lt;/code&gt;, properties with &lt;code&gt;d3.property&lt;/code&gt; and style with &lt;code&gt;d3.style&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;Transitions&lt;/h2&gt;

&lt;p&gt;The last, and maybe the most impressive piece of d3 is the transitions engine.
As we saw in the previous section, d3 enables us to modify any attribute instantly.
It can also transition number attributes (e.g. position in pixels, width etc)
from their old to their new value smoothly, using the &lt;code&gt;transition()&lt;/code&gt;, &lt;code&gt;duration()&lt;/code&gt;
and &lt;code&gt;delay()&lt;/code&gt; functions. You apply this function to any selection and then apply
the new attributes, which will be transitioned. In our example, we transition the width
of the bars to animate the graph:&lt;/p&gt;

&lt;figure class='code'&gt; &lt;div class="highlight"&gt;&lt;table&gt;&lt;tr&gt;&lt;td class="gutter"&gt;&lt;pre class="line-numbers"&gt;&lt;span class='line-number'&gt;1&lt;/span&gt;
&lt;span class='line-number'&gt;2&lt;/span&gt;
&lt;span class='line-number'&gt;3&lt;/span&gt;
&lt;span class='line-number'&gt;4&lt;/span&gt;
&lt;span class='line-number'&gt;5&lt;/span&gt;
&lt;span class='line-number'&gt;6&lt;/span&gt;
&lt;span class='line-number'&gt;7&lt;/span&gt;
&lt;span class='line-number'&gt;8&lt;/span&gt;
&lt;span class='line-number'&gt;9&lt;/span&gt;
&lt;span class='line-number'&gt;10&lt;/span&gt;
&lt;span class='line-number'&gt;11&lt;/span&gt;
&lt;/pre&gt;&lt;/td&gt;&lt;td class='code'&gt;&lt;pre&gt;&lt;code class='javascript'&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// If we didn&amp;#39;t use transitions, the graph would change immediately&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="nx"&gt;rects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;     &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;width&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;     &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;fill&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;newColor&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// Simply adding using d3.transition() between new data binding and&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="c1"&gt;// attribute modification and the change becomes graceful&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;&lt;span class="nx"&gt;rects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newData&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;     &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;transition&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2000&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;delay&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;     &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;width&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;span class='line'&gt;     &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attr&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;&amp;quot;fill&amp;quot;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;newColor&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/figure&gt;


&lt;p&gt;Cool, isn&amp;#8217;t it ? The use of &lt;code&gt;delay()&lt;/code&gt; is optional, as you can imagine. The &lt;code&gt;transition()&lt;/code&gt; function can
transition number attributes, but can also understand when a
string contains numbers, and smoothly transition the number parts of the string -that&amp;#8217;s how I
built the rainbow transition in the example at the top of this article. It also understands some specific
types of strings, for example colors (i.e. it can transition from &amp;#8216;steelblue&amp;#8217; to &amp;#8216;red&amp;#8217;). Visit the &lt;a href="http://d3js.org/"&gt;d3.js website&lt;/a&gt; for more on this!&lt;/p&gt;

&lt;h3&gt;Advanced transitions&lt;/h3&gt;

&lt;p&gt;What I explained are just the default, basic transition engine, which works very well.
You may need to customize your transition interpolation function, tween or easing function.
For example, I did that to animate a line chart (which is a SVG path).&lt;/p&gt;

&lt;h2&gt;Conclusion&lt;/h2&gt;

&lt;p&gt;With this tutorial, you should know more than enough to create awesome custom
graphs or data visualizations. Since you have total control, you can even create this kind
of &lt;a href="http://bl.ocks.org/1256572"&gt;crazy animations&lt;/a&gt;!&lt;/p&gt;

&lt;p&gt;Also, it is the only way I found to build smooth animated graphs on the iPad, other libraries such
as Highcharts were too slow.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/Drb9i3srBc8" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/05/09/d3-tutorial/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Show Me the Gist]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/8qWyX-ZuSD4/" />
    <updated>2012-05-07T10:29:00+02:00</updated>
    <id>http://needforair.com/blog/2012/05/07/show-me-the-gist</id>
    <content type="html">&lt;p&gt;The other day on Hacker News I came across this
&lt;a href="http://www.inc.com/magazine/201205/burt-helm/turntable-founders-sxsw-where-did-our-love-go.html"&gt;article of the Inc. Magazine&lt;/a&gt;. Article seemed very interesting, talking about
&lt;a href="http://turntable.fm"&gt;Turntable.fm&lt;/a&gt;. It had been a while since I hadn&amp;#8217;t read about Turnable,
all news about collaborative experiences on the web excite me,
the title was linkbaity: I clicked.&lt;/p&gt;

&lt;p&gt;&lt;img src="http://farm8.staticflickr.com/7094/7151646789_12625e7615.jpg" width="350" alt="Abstract" /&gt;&lt;/p&gt;

&lt;p&gt;The first thing I do when I come to a new page is to check the length of
the article. &lt;em&gt;How long will it take me to read this article?&lt;/em&gt; This one
made me wince: a very long article split in 4 pages. Two things
scared me: pagination and length.&lt;/p&gt;

&lt;p&gt;First I don&amp;#8217;t like pagination on news website. I am under the
impression of being on Google looking for something and having to go to
page 4 to find it. This article was also too long for me because it was not the only one
I was planning to read. My time is not extensible, there was still work
waiting for me. As I don&amp;#8217;t want to be a
&lt;a href="http://needforair.com/blog/2012/04/27/capitalize-on-what-you-read/"&gt;passive reader&lt;/a&gt; a long article
requires a lot of time to deal with.&lt;/p&gt;

&lt;p&gt;I told myself &lt;em&gt;Ok, this article is quite long but I will
force myself to go till the end because that&amp;#8217;s something really
intriguing&lt;/em&gt;. That&amp;#8217;s how it began. I read the first page without
skipping a line then began the second page. But I couldn&amp;#8217;t do it.
The article was too long. Way too long. Not boring but inappropriately long for what I expected.
How did it end? I skipped most of the article, read some random
statements to grasp the main ideas. I&amp;#8217;m not proud of myself as I really
wanted to get more involved in the subject but
&lt;a href="http://needforair.com/blog/2012/03/26/we-are-all-nutcrackers/"&gt;I&amp;#8217;m a nutcracker&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I don&amp;#8217;t think I am the only one in this situation. I &lt;em&gt;really&lt;/em&gt; like reading,
documenting myself but I can&amp;#8217;t always make it with theses long articles. They make
the web interesting to browse, they bring a lot of value but their
barrier to entry is too high and they don&amp;#8217;t fit into every reading time. We could
really lower this barrier to entry for such articles though, by providing a summary.
That&amp;#8217;s what scientific researchers do with the abstract
they add to their publications, so couldn&amp;#8217;t web writers do it too?&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/8qWyX-ZuSD4" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/05/07/show-me-the-gist/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[We Wrote a Book!]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/nlZqNV0y34U/" />
    <updated>2012-05-03T12:17:00+02:00</updated>
    <id>http://needforair.com/blog/2012/05/03/we-wrote-a-book</id>
    <content type="html">&lt;p&gt;After two months of effort, our book is finally out. The collaborative
writing process is extremely interesting in itself and will be the topic
of subsequent blog posts. For now, we&amp;#8217;re happy to introduce &lt;a href="http://leanpub.com/startupflow"&gt;Startup
Flow&lt;/a&gt;, a guide to getting set up as a
small team starting to work on a new venture. It addresses questions
about &lt;strong&gt;how to communicate&lt;/strong&gt; - especially when &lt;strong&gt;working remotely&lt;/strong&gt;, &lt;strong&gt;how to
share knowledge&lt;/strong&gt; and &lt;strong&gt;how to collaborate on a code base&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://leanpub.com/startupflow"&gt;&lt;img src="http://titlepages.leanpub.com/startupflow/bookpage?1335536785" alt="Startup Flow" /&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here are some answers to some
questions you might have:&lt;/p&gt;

&lt;h2&gt;Who Is this Book For?&lt;/h2&gt;

&lt;p&gt;If you are a &lt;strong&gt;small team beginning a technical entrepreneurial project&lt;/strong&gt;
and you are struggling to organize your workflow, especially if some of you are
working remotely, this book is for you. It was written with both business people and developers
in mind as they&amp;#8217;ll need to use common tools, however there are some more &lt;em&gt;technical&lt;/em&gt; chapters
which are marked as such so that business people can skip them.&lt;/p&gt;

&lt;h2&gt;Why You Need this Book&lt;/h2&gt;

&lt;p&gt;You need it because &lt;strong&gt;it will save you a ton of time and
make your workdays much more pleasant&lt;/strong&gt;.
Indeed, when you start working on a startup you quickly realize that you are
going to need some tools to organize your workflow. Especially if you
have cofounders, you will find yourself meeting too often, repeating yourself,
having a hard time following what everyone is doing, and this will be
very frustrating for all of you.&lt;/p&gt;

&lt;p&gt;In order to fix these problems, &lt;strong&gt;you&amp;#8217;ll need to choose your tools and design an efficient workflow&lt;/strong&gt; through trial and error. &lt;strong&gt;That
takes a lot of time&lt;/strong&gt;, given how many tools there are and how hard it is to
discriminate between them without actually trying them. &lt;strong&gt;We already went through that process,
and we compiled our findings&lt;/strong&gt; in this book so that you can skip that part and start getting things done with
 great tools that will boost your productivity. Moreover, reading this book will help understand your core needs, even those you aren&amp;#8217;t aware of yet.&lt;/p&gt;

&lt;h2&gt;What Is in this Book?&lt;/h2&gt;

&lt;p&gt;This book is a collection of the &lt;strong&gt;opinionated choices&lt;/strong&gt; we made.
We focused on what we think are the most important components of a
startup workflow:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Communication&lt;/li&gt;
&lt;li&gt;Knowledge sharing and reuse&lt;/li&gt;
&lt;li&gt;Codebase management&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;With these 3 themes in mind, we offer a selection of tools, one tool
for one problem. The tools that we promote are the ones that we use
extensively everyday and that we chose after weeks of iteration.
Furthermore, they work very well together. We will describe these
&lt;strong&gt;synergies&lt;/strong&gt; at the end of the book, so that you can take full advantage
of this work environment.&lt;/p&gt;

&lt;h3&gt;Communication&lt;/h3&gt;

&lt;p&gt;Communication between teammates is a hard problem. It is necessary yet
so complicated to get right. A large portion of communication should be
asynchronous, enabling you to avoid useless interruptions that hurt your
and your teammates&amp;#8217;
productivity. You also need to use different channels dedicated to different
use cases.&lt;/p&gt;

&lt;h3&gt;Knowledge Sharing and Reuse&lt;/h3&gt;

&lt;p&gt;All the knowledge that one finds interesting and usable should be
findable by the other teammates, without him having to send a link by
email or Skype every time. If knowledge is not shared or not reusable,
it&amp;#8217;s worthless and you will lose a lot of time. This is especially true for
Eric Ries&amp;#8217; &lt;a href="http://www.startuplessonslearned.com/2009/04/validated-learning-about-customers.html"&gt;validated learning&lt;/a&gt;,
on which the whole team should be constantly focused.&lt;/p&gt;

&lt;h3&gt;Codebase Management&lt;/h3&gt;

&lt;p&gt;In a technical startup, coding is a vital activity. The developers need to
be able to code effectively on their own, but also to collaborate
seamlessly.
They need to be able to review one another&amp;#8217;s code to ensure overall quality.
Teams that don&amp;#8217;t do that will hit a wall.&lt;/p&gt;

&lt;p&gt;If you do all these 3 things right, your team will be so efficient it will be
able to build the next Instagram in a week. No kidding!&lt;/p&gt;

&lt;h2&gt;What this Book is Not&lt;/h2&gt;

&lt;p&gt;This book is &lt;strong&gt;not&lt;/strong&gt; a collection of tutorials. We will not guide you through the
process of installing and using everything in details. Instead we point you to quality
external resources.&lt;/p&gt;

&lt;p&gt;It also doesn&amp;#8217;t pretend to be the &lt;em&gt;be-all, end-all&lt;/em&gt; guide on team
workflow for every case imaginable. However we feel it is the absolute
best for small teams working on a tech project, especially if the team
doesn&amp;#8217;t have an office yet.&lt;/p&gt;

&lt;p&gt;And, finally, it is not a startup guide. We won&amp;#8217;t give you any advice as
to how to get your business off the ground, we&amp;#8217;re not qualified for
that! If that&amp;#8217;s what you&amp;#8217;re looking for, we recommend Eric Ries&amp;#8217; &lt;a href="http://www.amazon.com/The-Lean-Startup-Entrepreneurs-Continuous/dp/0307887898/ref=sr_1_1?ie=UTF8&amp;amp;qid=1334839735&amp;amp;sr=8-1"&gt;&lt;em&gt;The Lean Startup&lt;/em&gt;&lt;/a&gt;, a must-read in our opinion.&lt;/p&gt;

&lt;h2&gt;Why We Wrote this Book&lt;/h2&gt;

&lt;p&gt;As we started working on ideas and on our startup, we faced the problem we
cited earlier. Our lack of organization was holding us back. So we spent
two weeks researching and trying different tools. After a
few iterations we finally reached a very efficient workflow and this investment
is now paying off big time. At first this was just an internal effort, but judging from the
&lt;a href="http://www.quora.com/Project-Management/Which-is-the-best-project-mangement-time-mangement-tool-and-why"&gt;questions&lt;/a&gt;
&lt;a href="http://www.quora.com/What-is-the-best-way-for-a-startup-distributed-team-to-handle-document-management"&gt;you&lt;/a&gt;
&lt;a href="http://www.quora.com/Which-Project-Management-tools-are-most-useful-for-a-small-startup"&gt;can&lt;/a&gt;
&lt;a href="http://www.quora.com/What-are-the-best-productivity-tools-for-entrepreneurs"&gt;find&lt;/a&gt; on &lt;a href="http://quora.com"&gt;Quora&lt;/a&gt;,
we understood that many people could benefit from our research, and
so we decided to write this book.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://leanpub.com/startupflow" style="padding:25px;background:#008CD4;display:block;width:150px;font-size:32px;font-family:CassanetBold, Helvetica Neue, Helvetica,border-radius:5px;color:white;border-radius:5px;"&gt;Get it Now&lt;/a&gt;
  Also available on the &lt;a href="http://www.amazon.com/dp/B007XR9FX6"&gt;Amazon Kindle Store&lt;/a&gt;&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/nlZqNV0y34U" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/05/03/we-wrote-a-book/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Capitalize on What You Read]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/2-sGlWi3Tqo/" />
    <updated>2012-04-27T14:27:00+02:00</updated>
    <id>http://needforair.com/blog/2012/04/27/capitalize-on-what-you-read</id>
    <content type="html">&lt;p&gt;I read a lot, probably an average of 15 blogposts a day and a book every
two weeks. I find that I sometimes have a lot of trouble
remembering the things I just read. Well it&amp;#8217;s
usually not completely forgotten, the information is likely stored in my
unconscious brain and will trickle back to my consciousness when
somethings triggers it, such as a question or a situation that matches
the pattern my brain stored when I read said content. So that means I
just need a little prodding in order to remember. However there is I
think a more interesting question: how do you build upon what you read?
How do you effectively turn information into knowledge? The secret lies in
having an active attitude towards remembering things, and not just passively consume content.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.flickr.com/photos/42625902@N00/2641415853/"&gt;&lt;img src="http://farm4.staticflickr.com/3061/2641415853_325ea48e8e_n.jpg" alt="Siri helps Doggy" /&gt;&lt;/a&gt;
&lt;em&gt;&lt;a href="http://creativecommons.org/licenses/by/2.0" title="license"&gt;CC license&lt;/a&gt; - by &lt;a href="http://www.flickr.com/photos/42625902@N00/" title="Author"&gt;Shishberg&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;Write it Down&lt;/h2&gt;

&lt;p&gt;Writing things down has a number of wonderful consequences.&lt;/p&gt;

&lt;p&gt;First of all
the information is &amp;#8220;safer&amp;#8221; in the sense that it is now written down in a
place from which it is easier to retrieve in its actual form than from
your unconscious brain. Not only that but it also ensures that the
information stays put and doesn&amp;#8217;t change. One cannot say the same holds
true for memories, as the brain changes them all the time. Memories are
very volatile and often the brain tampers with them to spin them more
positively or make them more relevant to the context. Writing down will prevent
information from being distorted by your unconscious brain.&lt;/p&gt;

&lt;p&gt;Additionally, writing things down will actually strengthen your memories.
When you write full sentences that
are grammatically correct (or close to correct at least), you must
formalize relationships between facts, entities, people, and concepts.
The brain being better suited to memorize relationships and patterns,
it will be easier for you to memorize that way instead of simply highlighting a few
words or numbers here and there that aren&amp;#8217;t linked together by explicit relationships. (Think of a graph.)&lt;/p&gt;

&lt;p&gt;Last but not least, text is universal. Information in writing is easily
accessible and shareable. This is important because for instance say you
store information in other formats such as audio or video, it
won&amp;#8217;t be as easily retrieved and accessed. This is why I love blogposts
but am not a fan of podcasts or videos that don&amp;#8217;t include a &amp;#8220;textified&amp;#8221;
version.&lt;/p&gt;

&lt;p&gt;In that regard, I write summaries of what I read and find most
interesting and useful. It is important to summarize relationships and
not facts only, so that it matches the brain&amp;#8217;s memorizing process.&lt;/p&gt;

&lt;h2&gt;Practice&lt;/h2&gt;

&lt;p&gt;Musicians are known for their disciplined rehearsals. When I was 10
years old I started learning to play the piano. My parents would pay
this private tutor that came once a week and insisted I play 3 hours of
piano per day. At this time I was of course way to enthralled by my
Playstation to care, but I do regret it now. So I didn&amp;#8217;t practice like I
should have, and the promising career as a pianist that lied ahead of me
ground to a screeching halt. However some of my friends heroically put in the
effort and I can see now that practice makes perfect.&lt;/p&gt;

&lt;p&gt;Where does that all fit with memorizing and building knowledge? The goal is to
apply the methods of musicians to the practice of building knowledge. In that
case, practicing means a few things:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Write an interesting bit of knowledge down in different ways, targetting varied audiences (yourself, your family,
friends, colleagues, etc.)&lt;/li&gt;
&lt;li&gt;Talk about it to people who have a varying level of understanding of
that particular topic. They will ask you questions you didn&amp;#8217;t expect
and force you to dig deeper and strengthen your knowledge.&lt;/li&gt;
&lt;li&gt;Weave blobs of knowledge together. By that I mean think about what one
relationship in a given domain means if applied to another one. (For
instance Math and Computer Science, or Sociology and Networks,
Math and Art, etc.) Bridging domains will often make great insights and
ideas pop in your head and further strengthen your understanding and
memory of a bit of knowledge.&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;Capitalizing on what you read by writing it down and practicing will
slowly (but surely!) turn you in a walking encyclopedia. You will be able to remember
a lot more things than you are used to, and gradually gain a deeper
understanding of what you memorize.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/2-sGlWi3Tqo" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/04/27/capitalize-on-what-you-read/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Tutorial: Domain Name System for Beginners]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/BYJKIM1AV7c/" />
    <updated>2012-04-22T08:30:00+02:00</updated>
    <id>http://needforair.com/blog/2012/04/22/dns-redirections</id>
    <content type="html">&lt;blockquote class="tldr-embed-widget" data-align="center"&gt;      &lt;p&gt;      &lt;a href="http://tldr.io/tldrs/51483b6727b0e2933d00024a/tutorial-domain-name-system-for-beginners-need-for-air" class="link-to-tldr-page" target="_blank"&gt;Summary of &amp;#8220;Tutorial: Domain Name System for Beginners - Need for Air&amp;#8221;&lt;/a&gt; (via &lt;a href="http://tldr.io" target="_blank"&gt;tldr.io&lt;/a&gt;)      &lt;ul&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;The Domain Name System (DNS in short) is what your computer uses to translate human-readable domain names (e.g. www.google.com) into compter-usable IP addresses&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;It is a distributed system, meaning that no computer contains it whole. Pieces of information are on many computers (some dedicated and some not). Even yours.&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;To use your own domain name (e.g. tldr.io), you need to purchase one from a registrar such as Gandi.&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;You use a zone file to manage it. It is a simple text file describing the structure of your DNS zone.&lt;/li&gt;          &lt;li style="margin-bottom: 10px; line-height: 130%;"&gt;Changes to the zone file take time to propagate through the DNS, usually a few hours.&lt;/li&gt;      &lt;/ul&gt;      &lt;/p&gt;&lt;/blockquote&gt;


&lt;script async src="http://needforair.com//tldr.io/embed/widget-embed.js" charset="utf-8"&gt;&lt;/script&gt;


&lt;p&gt;If you build a website, you will want your own domain name, which means
you will need to manage your Domain Name System (DNS). While there is nothing very
complicated here, the info is scattered across the Internet, so I decided
to write a &amp;#8220;cheat sheet&amp;#8221;-like tutorial which will hopefully save you some time!&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.flickr.com/photos/49502986585@N01/277341190/"&gt;&lt;img src="http://farm1.staticflickr.com/122/277341190_3f098a08a4_n.jpg" alt="Code" /&gt;&lt;/a&gt;
&lt;em&gt;by &lt;a href="http://www.flickr.com/photos/ezu/" title="Author"&gt;Ezu&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;What is the DNS?&lt;/h2&gt;

&lt;p&gt;The DNS is a system that helps your computer translate human-readable &lt;strong&gt;domain names&lt;/strong&gt;
into computer-usable &lt;strong&gt;IP addresses&lt;/strong&gt; (4 numbers between 0 and 255
identifying a server).&lt;/p&gt;

&lt;p&gt;A domain name must have two parts, separated by a dot: the &lt;strong&gt;actual domain&lt;/strong&gt; (e.g. &lt;em&gt;google&lt;/em&gt;) and the
&lt;strong&gt;top-level domain&lt;/strong&gt; (e.g. &lt;em&gt;com&lt;/em&gt;). In this example, the domain name is
&lt;em&gt;google.com&lt;/em&gt;. Optionally, you can also use different &lt;strong&gt;subdomains&lt;/strong&gt;, so
that users typing &lt;em&gt;subdomain1.domain.tld&lt;/em&gt; and &lt;em&gt;subdomain2.domain.tld&lt;/em&gt;
arrive on two different pages. The well-known &lt;em&gt;www&lt;/em&gt; is a subdomain of
&lt;em&gt;google.com&lt;/em&gt; in the address &lt;em&gt;www.google.com&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;To use your own custom domain name, you need
to buy one from a &lt;strong&gt;registrar&lt;/strong&gt; (such as &lt;a href="https://www.gandi.net/"&gt;Gandi&lt;/a&gt;).&lt;/p&gt;

&lt;h2&gt;How to manage it: the zone file&lt;/h2&gt;

&lt;p&gt;Most registrars will let you use Web forwardings, which are simple
redirections (what happens when the webpage you are looking at automatically changes to another page). However, you should
avoid those for the following reasons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Simple redirections will replace your domain name by your IP address,
which is the best way to scare off users&lt;/li&gt;
&lt;li&gt;Masked redirections will not scare off users, but they will give you a
very poor search-engine rating&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;You will need to use the &lt;strong&gt;zone file&lt;/strong&gt;. It is a simple text file
describing the structure of your DNS zone (usually your domain) to the global DNS
(i.e. the world). Let&amp;#8217;s take a look at a sample zone file (the zone file on
Gandi for our blog &lt;a href="http://needforair.com"&gt;needforair.com&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;These are the DNS rules for our domain &lt;code&gt;needforair.com&lt;/code&gt;:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;@ 3600 IN A 184.106.20.102
www 3600 IN CNAME needforair.com.
wik 3600 IN CNAME fr.wikipedia.org.
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You usually also find lines similar to the following in a zone file.
They manage the email server your registrar provides you, and shouldn&amp;#8217;t
touch them:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;@ 3600 IN MX 10 spool.mail.gandi.net.
@ 3600 IN MX 50 fb.mail.gandi.net.
smtp 3600 IN CNAME relay.mail.gandi.net.
webmail 3600 IN CNAME agent.mail.gandi.net.
pop 3600 IN CNAME access.mail.gandi.net.
imap 3600 IN CNAME access.mail.gandi.net.
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The most important points here are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Each line corresponds to one rule (a record)&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;@&lt;/code&gt; character represents your bare domain (needforair.com in our example) as opposed
to subdomains such as &lt;code&gt;test.needforair.com&lt;/code&gt; or &lt;code&gt;www.needforair.com&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;An &lt;code&gt;A&lt;/code&gt; record points to an IP address, usually your server. In our example, &lt;code&gt;@ 3600 IN A 184.106.20.102&lt;/code&gt;
indicates that a user typing &amp;#8216;needforair.com&amp;#8217; in his address bar will request content from the IP address 184.106.20.102.
The &lt;code&gt;3600&lt;/code&gt; number is the &lt;a href="http://en.wikipedia.org/wiki/Time_to_live#DNS_records"&gt;Time To Live (TTL)&lt;/a&gt; of the record,
the time (in seconds) during which a nameserver will cache the record and not ask the authoritative server (Gandi here)
if queried again&lt;/li&gt;
&lt;li&gt;A &lt;code&gt;CNAME&lt;/code&gt; record points to any domain or subdomain, either in your zone or outside.
In our example, &lt;code&gt;www 3600 IN CNAME needforair.com.&lt;/code&gt; means that a user typing &lt;code&gt;www.needforair.com&lt;/code&gt; will request content
from the same IP address as needforair.com (that&amp;#8217;s not the case by default). You can of course use a CNAME to any other
domain, in our example &lt;code&gt;wik 3600 IN CNAME fr.wikipedia.org.&lt;/code&gt; which will make users typing &amp;#8220;wik.needforair.com&amp;#8221; in their
address bar go to the French version of Wikipedia instead (don&amp;#8217;t try it
we removed it!)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Don&amp;#8217;t forget the period (&amp;#8216;.&amp;#8217;) at the end of your CNAMEs !!!&lt;/strong&gt; For example, use &amp;#8220;needforair.com.&amp;#8221;, and NOT &amp;#8220;needforair.com&amp;#8221;.
If you forget the period, the record simply won&amp;#8217;t work, and you will
spend an awful lot of time to figure out why&lt;/li&gt;
&lt;/ul&gt;


&lt;p&gt;There are lots of other types of rules, but this should be enough to set up your DNS.&lt;/p&gt;

&lt;p&gt;Last note: keep in mind that &lt;strong&gt;changes to the zone file take some time&lt;/strong&gt;,
usually a few hours, to propagate through the Internet. So don&amp;#8217;t make a
mistake or they will take some time to spot and correct!&lt;/p&gt;

&lt;h2&gt;Discover more&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://continuations.com/post/16405180072/tech-tuesday-dns"&gt;A great primer on DNS for the non-technical&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Zone_file"&gt;Wikipedia&amp;#8217;s article on the Zone file&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://en.wikipedia.org/wiki/Domain_Name_System"&gt;Wikipedia&amp;#8217;s article on the DNS&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/BYJKIM1AV7c" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/04/22/dns-redirections/</feedburner:origLink></entry>
  
  <entry>
    <title type="html"><![CDATA[Twitter Lets You Talk to World-Class Experts]]></title>
    <link href="http://feedproxy.google.com/~r/NeedForAir/~3/ACJ6bsoj4Vk/" />
    <updated>2012-04-20T04:35:00+02:00</updated>
    <id>http://needforair.com/blog/2012/04/20/twitter-lets-you-talk-to-wordclass-experts</id>
    <content type="html">&lt;p&gt;The other day I had a conversation on Twitter with &lt;a href="http://twitter.com/#!/rjs"&gt;Ryan
Singer&lt;/a&gt; of &lt;a href="http://37signals.com"&gt;37 Signals&lt;/a&gt;
fame. Ryan is a world-class expert in product design and had just posted an &lt;a href="http://feltpresence.com/articles/16-managing-product-development-by-integrating-around-concerns"&gt;article&lt;/a&gt;
on his excellent &lt;a href="http://feltpresence.com/"&gt;blog&lt;/a&gt;. The thing is I am a
nobody in product design or in the tech scene in general. I&amp;#8217;m not saying
I&amp;#8217;m dumb or anything, just that nobody knows me. And yet I was
still able to have a great and stimulating conversation with an expert
who&amp;#8217;s email inbox is presumably very full, lives thousands of kilometers
away from me and doesn&amp;#8217;t know anything about me. This was not the first
time I&amp;#8217;ve been amazed by the power of Twitter, so I decided to blog about
it.&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.flickr.com/photos/brajeshwar/3428525318/in/photostream"&gt;&lt;img src="http://farm4.staticflickr.com/3393/3428525318_0729579705_n.jpg" alt="Twitter Mosaic" /&gt;&lt;/a&gt;
&lt;em&gt;&lt;a href="http://creativecommons.org/licenses/by-nc-sa/2.0" title="license"&gt;CC license&lt;/a&gt; - by &lt;a href="http://www.flickr.com/photos/brajeshwar/" title="Author"&gt;Brajeshwar&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;140 characters Enable Improbable Conversations&lt;/h2&gt;

&lt;p&gt;That length constraint compels people to get straight to the point.
There is no fluff. No awkward openings, no pompous endings, no walls of
text. People expect direct questions and answers and wouldn&amp;#8217;t have it any other
way.&lt;/p&gt;

&lt;p&gt;This magically enables you to talk to some people you would never have sent an
email to. And busy people that don&amp;#8217;t know you at all, that might be
thought leaders or experts, will answer you if
you ask an interesting question. Because the constraint also works for
the response: they don&amp;#8217;t have to send you a long well thought-out answer,
they don&amp;#8217;t need to get context to answer, they can just type 140
characters.&lt;/p&gt;

&lt;p&gt;I have asked questions to succesful entrepreneurs, or VCs, and almost
always gotten a quick answer. This is incredibly cool and powerful. And
these people don&amp;#8217;t know me at all.&lt;/p&gt;

&lt;h2&gt;No Social Pressure or Awkwardness&lt;/h2&gt;

&lt;p&gt;The Twitter feed moves so swiftly that conversations are extremely
ephemeral. I think this is key to enabling these kinds of improbable
conversations. The fact that it moves so quickly reduces the social
pressure: few people will see it, it will not mark your Twitter profile
for a long time, and nobody will assume that the two people conversing
are great friends or anything. Twitter enables conversations in a
vacuum, without having to build up a relationship. There is no pressure
for the expert to become friend with the person he is talking to.&lt;/p&gt;

&lt;p&gt;When you try to email or talk on the phone to an expert, you always want to be super apologetic,
respectful and you don&amp;#8217;t really focus on the content of the
conversation you&amp;#8217;re trying to have but instead you focus on the
asymmetry of the relationship and that makes you uncomfortable. Twitter makes all these concerns vanish.&lt;/p&gt;

&lt;p&gt;I love Twitter for these opportunities.&lt;/p&gt;
&lt;img src="http://feeds.feedburner.com/~r/NeedForAir/~4/ACJ6bsoj4Vk" height="1" width="1"/&gt;</content>
  <feedburner:origLink>http://needforair.com/blog/2012/04/20/twitter-lets-you-talk-to-wordclass-experts/</feedburner:origLink></entry>
  
</feed>
