<!DOCTYPE html>
<!--[if IE 7]><html class="ie7 ie" lang="en-US"><![endif]-->
<!--[if IE 8]><html class="ie8 ie" lang="en-US"><![endif]-->
<!--[if IE 9]><html class="ie9 ie" lang="en-US"><![endif]-->
<!--[if (gt IE 9)|!(IE)]>--><html lang="en-US"><!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>Yannick Croissant</title>
		<link rel="stylesheet" href="/statics/css/dist/main.css" media="all" />
		<link href="/feeds/posts.xml" rel="alternate" title="" type="application/atom+xml" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		
		<script>if(/*@cc_on!@*/false&&document.documentMode===10)document.documentElement.className+=' ie10 ie';</script>
	</head>
	<body>
		<div class="main-container">
			<header class="header">
					<h1><a rel="home" href="/">Yannick Croissant</a></h1>
					<h2>Code &amp; Stuff</h2>
			</header>
			<div class="main-content-container">
				<div class="main-content">
					<ul>
	
	
		<li>
			<article class="article">
				<header>
					<h1><a class="container" href="/posts/code-quality-with-jscs-and-eslint.html">Code Quality with JSCS and ESLint</a></h1>
					<p class="date">11 March 2015</p>
				</header>
				<div class="content">
					<script async class="speakerdeck-embed" data-id="402c54d4ffce46e8ad564c82bff7d8c5" data-ratio="1.29456384323641" src="//speakerdeck.com/assets/embed.js"></script>
				</div>
			</article>
		</li>
	
		<li>
			<article class="article">
				<header>
					<h1><a class="container" href="/posts/enforcing-coding-rules-in-your-team-with-jscs/post">Enforcing coding rules in your team with JSCS</a></h1>
					<p class="date">28 January 2014</p>
				</header>
				<div class="content">
					<p>Enforcing coding rules in a team is hard, and most of the time it ends with a very long documentation lost on the company wiki which nobody reads. You can also check the coding rules during code reviews and make the apropriate corrections if needed but it can be very painful and time consuming.</p>
<p>According to me, the only solution is to rely on some tools to check the code and warn the developper if he do not follow the rules. It can be a simple warning as it can totally forbid him to push some code, it is up to you to choose how strict you want to be.</p>
<p>My tool of choice for this is <a href="https://github.com/mdevils/node-jscs">JSCS</a> (for JavaScript Code Style checker). We&#39;ll see how to integrate it in your team tools and in your workflow.</p>
<h2 id="installing-jscs">Installing JSCS</h2>
<p>JSCS is a simple npm module to install globaly.</p>
<pre class="highlighted"><code class="javascript">npm install jscs -g</code></pre>
<p>You have now the JSCS tool available globaly.</p>
<p>To check your code JSCS will need a configuration file named <code>.jscs.json</code> at the root of your project. This file will contain all the rules your code must follow.</p>
<p>As an example you can check the jQuery <code>.jscs.json</code> configuration file bellow:</p>
<pre class="highlighted"><code class="json">{
    "<span class="attribute">requireCurlyBraces</span>": <span class="value">[ <span class="string">"if"</span>, <span class="string">"else"</span>, <span class="string">"for"</span>, <span class="string">"while"</span>, <span class="string">"do"</span> ]</span>,
    "<span class="attribute">requireSpaceAfterKeywords</span>": <span class="value">[ <span class="string">"if"</span>, <span class="string">"else"</span>, <span class="string">"for"</span>, <span class="string">"while"</span>, <span class="string">"do"</span>, <span class="string">"switch"</span>, <span class="string">"return"</span> ]</span>,
    "<span class="attribute">requireSpacesInFunctionExpression</span>": <span class="value">{
        "<span class="attribute">beforeOpeningCurlyBrace</span>": <span class="value"><span class="literal">true</span>
    }</span></span>,
    "<span class="attribute">disallowSpacesInFunctionExpression</span>": <span class="value">{
        "<span class="attribute">beforeOpeningRoundBrace</span>": <span class="value"><span class="literal">true</span>
    }</span></span>,
    "<span class="attribute">requireMultipleVarDecl</span>": <span class="value"><span class="literal">true</span></span>,
    "<span class="attribute">requireSpacesInsideObjectBrackets</span>": <span class="value"><span class="string">"all"</span></span>,
    "<span class="attribute">requireSpacesInsideArrayBrackets</span>": <span class="value"><span class="string">"all"</span></span>,
    "<span class="attribute">disallowLeftStickedOperators</span>": <span class="value">[ <span class="string">"?"</span>, <span class="string">"-"</span>, <span class="string">"/"</span>, <span class="string">"*"</span>, <span class="string">"="</span>, <span class="string">"=="</span>, <span class="string">"==="</span>, <span class="string">"!="</span>, <span class="string">"!=="</span>, <span class="string">"&gt;"</span>, <span class="string">"&gt;="</span>, <span class="string">"&lt;"</span>, <span class="string">"&lt;="</span> ]</span>,
    "<span class="attribute">disallowRightStickedOperators</span>": <span class="value">[ <span class="string">"?"</span>, <span class="string">"/"</span>, <span class="string">"*"</span>, <span class="string">":"</span>, <span class="string">"="</span>, <span class="string">"=="</span>, <span class="string">"==="</span>, <span class="string">"!="</span>, <span class="string">"!=="</span>, <span class="string">"&gt;"</span>, <span class="string">"&gt;="</span>, <span class="string">"&lt;"</span>, <span class="string">"&lt;="</span>]</span>,
    "<span class="attribute">requireSpaceBeforeBinaryOperators</span>": <span class="value">[<span class="string">"+"</span>, <span class="string">"-"</span>, <span class="string">"/"</span>, <span class="string">"*"</span>, <span class="string">"="</span>, <span class="string">"=="</span>, <span class="string">"==="</span>, <span class="string">"!="</span>, <span class="string">"!=="</span>]</span>,
    "<span class="attribute">disallowSpaceAfterPrefixUnaryOperators</span>": <span class="value">[<span class="string">"++"</span>, <span class="string">"--"</span>, <span class="string">"+"</span>, <span class="string">"-"</span>]</span>,
    "<span class="attribute">disallowSpaceBeforePostfixUnaryOperators</span>": <span class="value">[<span class="string">"++"</span>, <span class="string">"--"</span>]</span>,
    "<span class="attribute">requireRightStickedOperators</span>": <span class="value">[ <span class="string">"!"</span> ]</span>,
    "<span class="attribute">requireLeftStickedOperators</span>": <span class="value">[ <span class="string">","</span> ]</span>,
    "<span class="attribute">disallowKeywords</span>": <span class="value">[ <span class="string">"with"</span> ]</span>,
    "<span class="attribute">disallowMultipleLineBreaks</span>": <span class="value"><span class="literal">true</span></span>,
    "<span class="attribute">disallowKeywordsOnNewLine</span>": <span class="value">[ <span class="string">"else"</span> ]</span>,
    "<span class="attribute">requireLineFeedAtFileEnd</span>": <span class="value"><span class="literal">true</span></span>,
    "<span class="attribute">disallowSpaceAfterObjectKeys</span>": <span class="value"><span class="literal">true</span></span>,
    "<span class="attribute">validateLineBreaks</span>": <span class="value"><span class="string">"LF"</span>
}</span></code></pre>
<p>These rules enforce curly braces after <code>if</code> statements, disallow the use of <code>with</code>, enforce Unix line ending and so on. You can found the rules list and their meaning in the <a href="https://github.com/mdevils/node-jscs/blob/master/README.md">JSCS Readme</a>.</p>
<p>When you have finished to play with the rules, put your <code>.jscs.json</code> configuration file at the root of your project.</p>
<p>You can already check your code by typing this command at the root of your project:</p>
<pre class="highlighted"><code class="javascript">jscs path/to/my/script.js</code></pre>
<p>or</p>
<pre class="highlighted"><code class="javascript">jscs .</code></pre>
<p>to check the whole project (<code>.</code> is the current directory).</p>
<p>You should get something like this:</p>
<p><img src="/posts/enforcing-coding-rules-in-your-team-with-jscs/jscs-command-line.png" alt="JSCS from the command line"></p>
<p>Great ! You can now check your code with JSCS ! But for now this is not very convenient.</p>
<h2 id="intregrating-jscs-in-sublime-text">Intregrating JSCS in Sublime Text</h2>
<p>For this you will need <a href="http://www.sublimetext.com/3">Sublime Text 3</a> with <a href="https://sublime.wbond.net">Package Control</a>.</p>
<p>First you will need to install <a href="https://sublimelinter.readthedocs.org">SublimeLinter</a> using Package Control (follow the <a href="https://sublimelinter.readthedocs.org/en/latest/installation.html#installing-via-pc">SublimeLinter documentation</a> if you are not sure about the procedure).</p>
<p>Then, the same way you&#39;ve installed SublimeLinter, search for the package <a href="https://sublime.wbond.net/packages/SublimeLinter-jscs">SublimeLinter-jscs</a> in Package Control and install it.</p>
<p>And... you&#39;ve done ! Now if you try to open your project JavaScript files in Sublime Text you should have your errors highlighted by SublimeLinter.</p>
<p><img src="/posts/enforcing-coding-rules-in-your-team-with-jscs/sublimelinter-jscs.png" alt="Highlighting coding style errors with SublimeLinter-jscs"></p>
<p>If you are not using Sublime Text as text editor (shame on you !) JSCS has also some plugins for <a href="https://github.com/scrooloose/syntastic/blob/master/syntax_checkers/javascript/jscs.vim">Vim</a>, <a href="https://github.com/globexdesigns/brackets-jscs">Brackets</a> and <a href="https://github.com/deepak1556/lt-jscs">LightTable</a>.</p>
<p>If you are using none of those, keep reading ;)</p>
<h2 id="adding-jscs-as-a-grunt-task">Adding JSCS as a Grunt task</h2>
<p>The Sublime Text plugin is great but if you have some teamates that do not use an editor with a JSCS plugin and keep pushing some unchecked code all your hard work will be in vain.</p>
<p>Here&#39;s enter <a href="http://gruntjs.com">Grunt</a>.</p>
<p>If you are already using Grunt it will be a simple task to add to your tasklist.</p>
<p>Just install the <a href="https://github.com/gustavohenke/grunt-jscs-checker">grunt-jscs-checker</a> npm package:</p>
<pre class="highlighted"><code class="javascript">npm install grunt-jscs-checker --save-dev</code></pre>
<p>And add a <code>jscs</code> entry in your <code>Gruntfile.js</code>:</p>
<pre class="highlighted"><code class="javascript">jscs: {
  src: <span class="string">"path/to/my/*.js"</span>
}</code></pre>
<p>Read the <a href="https://github.com/gustavohenke/grunt-jscs-checker/blob/master/README.md">Readme</a> for more options.</p>
<p>Then run the task to check the whole project:</p>
<p><img src="/posts/enforcing-coding-rules-in-your-team-with-jscs/jscs-grunt.png" alt="JSCS from Grunt"></p>
<p>Not very different from the command line, but we can now configure Grunt to run it with other tasks, like your tests:</p>
<pre class="highlighted"><code class="javascript">grunt.registerTask(<span class="string">'test'</span>, [<span class="string">'jscs'</span>, <span class="string">'jasmine'</span>]);</code></pre>
<p>This way you will check your project coding style besides to the tests compliance.</p>
<p>(If you are using Gulp instead of Grunt you can use the <a href="https://github.com/sindresorhus/gulp-jscs">gulp-jscs</a> task)</p>
<h2 id="adding-jscs-as-a-git-pre-commit-hook">Adding JSCS as a Git pre-commit hook</h2>
<p>Ok, now we need to be sure JSCS will be run before every commit. A way to do this is to use <a href="https://github.com/rhumaric/grunt-githooks">grunt-githooks</a> that will easily bind your Grunt tasks to Git hooks.</p>
<p>Like before, install the <a href="https://github.com/rhumaric/grunt-githooks">grunt-githooks</a> npm package:</p>
<pre class="highlighted"><code class="javascript">npm install grunt-githooks --save-dev</code></pre>
<p>And add a <code>githooks</code> entry in your <code>Gruntfile.js</code>:</p>
<pre class="highlighted"><code class="javascript">githooks: {
  all: {
    <span class="string">'pre-commit'</span>: <span class="string">'test'</span>
  }
}</code></pre>
<p>Run <code>grunt githooks</code> to bind the tasks and you&#39;re done.</p>
<p>From now, next time you will commit the <code>test</code> task will run and if it finish in error (error in the coding style or in the tests) the commit will be aborded.</p>
<p><img src="/posts/enforcing-coding-rules-in-your-team-with-jscs/jscs-git.png" alt="JSCS as a Git pre-commit hook"></p>

				</div>
			</article>
		</li>
	
		<li>
			<article class="article">
				<header>
					<h1><a class="container" href="/posts/choosing-and-making-quality-npm-modules/post">Choosing and making quality npm modules</a></h1>
					<p class="date">11 January 2014</p>
				</header>
				<div class="content">
					<p>Since its creation Node.js gained more and more attention and the size of its module repository (<a href="http://npmjs.org">NPM</a>) increase <a href="http://modulecounts.com">very rapidly</a>.</p>
<p>But with near 55 000 available modules created by the community it can be very difficult to make the good choice for your own projects.</p>
<p>How to know if it&#39;s safe to use this tiny module on your billion pageviews/day project ?</p>
<p>Short answer: You can&#39;t.</p>
<p>Long answer: You really can&#39;t, but according to me there is two main criteria to consider:</p>
<ul>
<li>Quality</li>
<li>Support</li>
</ul>
<p>I made a list of tools/practices to help you to check npm modules. It can help you as a user to choose your modules but also as a module author to improve your code quality.</p>
<h2 id="quality">Quality</h2>
<h3 id="tests">Tests</h3>
<p><img src="/posts/choosing-and-making-quality-npm-modules/tests.png" alt="Running tests with Mocha"></p>
<p>According to <a href="https://nodechecker.com">Nodechecker</a> half of the npm modules do not have any tests, that&#39;s sad :(.</p>
<p>The presence of a complete test suite is very important to help you to see if the functionalities of the module were fully tested by the author. And combined with a continuous integration service like <a href="https://travis-ci.org">Travis CI</a> you can easily check the module status at each commit.</p>
<p>Tests are a very powerful tool to prevent regressions between releases and they must not be neglected.</p>
<p>For Users:</p>
<ul>
<li>Check the module readme for a <a href="http://about.travis-ci.org/docs/user/status-images/">&quot;badge&quot;</a> like this: <img src="/posts/choosing-and-making-quality-npm-modules/passing.png" alt="Build status for travis-web">. Most of online services provides some similar images to display the current status of the project.</li>
<li>Search a <code>test</code> folder at the project root. The standard command to run the tests of a npm module is <code>npm test</code>.</li>
</ul>
<p>For Authors:</p>
<ul>
<li><a href="http://visionmedia.github.com/mocha">Mocha</a></li>
<li><a href="http://pivotal.github.io/jasmine">Jasmine</a></li>
<li><a href="https://www.codeship.io">Codeship</a></li>
<li><a href="https://travis-ci.org">Travis CI</a></li>
</ul>
<h3 id="code-coverage">Code coverage</h3>
<p><img src="/posts/choosing-and-making-quality-npm-modules/coverage.png" alt="Code coverage report with Blanket.js"></p>
<p>Tests are great, but to be efficient they must cover a maximum of cases in your module.</p>
<p>A good way to ensure a good coverage of your code base is to use an automated tool to determine how many percents of your code were covered by your tests and what conditions were not tested.</p>
<p>Some tools like <a href="http://blanketjs.org">Blanket.js</a> can analyze your code then output a report in HTML (or other format) that highlight the non-covered lines.</p>
<p>You can also send this report to a service like <a href="https://coveralls.io">Coveralls</a> to keep an history of your code coverage and be warned if any commit decrease the percentage of covered code.</p>
<p>For Users:</p>
<ul>
<li>Check the module readme for a Coveralls &quot;badge&quot; like this: <img src="/posts/choosing-and-making-quality-npm-modules/coverage-86.png" alt="Coverage status for gitlabhq"></li>
</ul>
<p>For Authors:</p>
<ul>
<li><a href="http://blanketjs.org">Blanket.js</a></li>
<li><a href="https://github.com/gotwarlost/istanbul">Istanbul</a></li>
<li><a href="https://coveralls.io">Coveralls</a></li>
</ul>
<h3 id="documentation">Documentation</h3>
<p>An undocumented module is useless for everyone except its author. What is the point to open-source something if you do not explain to the users what it does and how to use it ?</p>
<p>The minimal documentation is the Readme at the root of the project, it should at least contain:</p>
<ul>
<li>name of the module</li>
<li>description of what it does</li>
<li>how to install</li>
<li>how to use (example)</li>
<li>license</li>
</ul>
<p>That&#39;s it. Some other sections can be nice to have too:</p>
<ul>
<li>how to run tests (important if it is different from the simple <code>npm test</code>)</li>
<li>how to contribute</li>
<li>where to get support</li>
<li>how to contact the authors</li>
</ul>
<p>Most of the npm modules are very simple so their documentation fits in the Readme, for bigger modules you can have a doc/documentation folder at the root of the project, a wiki in the GitHub repository or a dedicated website.</p>
<h3 id="proper-versioning">Proper versioning</h3>
<p>The Node.js userland is used to the <a href="http://semver.org">Semantic Versioning</a> specification, so your modules must follow them.</p>
<p>This specifications can be summarized like this:</p>
<blockquote>
<p>Given a version number MAJOR.MINOR.PATCH, increment the:</p>
<ul>
<li>MAJOR version when you make incompatible API changes,</li>
<li>MINOR version when you add functionality in a backwards-compatible manner, and</li>
<li>PATCH version when you make backwards-compatible bug fixes.</li>
</ul>
<p>Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.</p>
</blockquote>
<p>So upgrading from version 2.4.5 to 2.6.4 should be painless (backwards compatibility is preserved, only some patches and some new features). Breaking changes must only be introduced with a new MAJOR version.</p>
<p>A proper versioning is critical because it allows you to upgrade seamlessly your depencendices without any risks for your application.</p>
<p>For Users:</p>
<ul>
<li><a href="https://github.com/bahmutov/next-update">next-update</a>: Tests if module&#39;s dependencies can be updated to newer / latest versions without breaking the tests.</li>
</ul>
<p>For Authors:</p>
<ul>
<li><a href="http://semver.org">semver</a>: The Semantic Versioning 2.0.0 specification</li>
</ul>
<h3 id="code-quality">Code quality</h3>
<p><img src="/posts/choosing-and-making-quality-npm-modules/codeclimate.png" alt="Report with CodeClimate"></p>
<p>Quality is a combination of many criteria: consistency, readability, maintainability, etc. It can be hard to evaluate, but some tools can help you in this task.</p>
<p>For example some tools like <a href="http://www.jshint.com/docs">JSHint</a> can help you to spot very early some potential problems in your code (unused variables, missing var keyword, function in a loop, etc.) and <a href="https://github.com/mdevils/node-jscs">JSCS</a> can enforce some coding rules in your team to keep code consistency.</p>
<p>There is also some tools to check your code maintainability like <a href="https://github.com/es-analysis/plato">Plato</a> or <a href="https://codeclimate.com">CodeClimate</a>, they can generate some very useful reports to spot the quality problems in your project.</p>
<p>For Users:</p>
<ul>
<li>Check the module readme for a CodeClimate &quot;badge&quot; like this: <img src="/posts/choosing-and-making-quality-npm-modules/codeclimate-3-4.png" alt="CodeClimate status for jekyll"></li>
<li>Search a <code>.jshintrc</code> file (JSHint) and/or <code>.jscs.json</code> file (JSCS) at the project root.</li>
</ul>
<p>For Authors:</p>
<ul>
<li><a href="https://github.com/es-analysis/plato">Plato</a></li>
<li><a href="http://www.jshint.com/docs">JSHint</a></li>
<li><a href="https://github.com/mdevils/node-jscs">JSCS</a></li>
<li><a href="https://codeclimate.com">CodeClimate</a></li>
</ul>
<p>But these tools does not make everything, and the best tool is still some regular code reviews with one of your peers.</p>
<h2 id="support">Support</h2>
<p>Support is all about the future of the module. Non-fixed bugs or futures node.js version incompatibility can make a module broken and useless very quickly. It is hard to guess if a module will be well supported by its author(s) but there is some signs that can give us some indications.</p>
<p>Sadly, there is no magic tool for now.</p>
<h3 id="repository-activity">Repository activity</h3>
<p>Most of the npm modules are hosted on GitHub and you can have a nice overview of the activity on the <a href="https://github.com/joyent/node/pulse">pulse page</a>. You can also check the date of the last commit, the number of open issues, the number of open pull requests, etc.</p>
<p>But an inactive project does not mean the project is abandoned, maybe the author is considering the module as &quot;done&quot; if it fits his needs and if there is no open issues or pull requests.</p>
<h3 id="authors-">Authors:</h3>
<p>You can also check the author name. It can be a trusted company (<a href="https://github.com/nodejitsu">Nodejitsu</a>, <a href="https://github.com/walmartlabs‎">Walmart Labs</a>, <a href="https://github.com/yahoo">Yahoo</a>, etc.), a trusted developer (<a href="https://github.com/jeresig">John Resig</a>, <a href="https://github.com/isaacs">Isaac Z. Schlueter</a>, <a href="https://github.com/mikeal‎">Mikeal Rogers</a>, etc.) or a total stranger. In all cases the support of the past projects of the company/developer will indicate if they are used to maintain their open-source projects.</p>
<h3 id="popularity">Popularity</h3>
<p>The popularity is not an indicator of the good health of a module, but it can indicate there is already a lot of people trusting this module and its authors. Chances are if there is a problem with the support and if the module is still widely used it will be forked and/or maintained by some other contributors (cross your fingers here).</p>
<p>I hope this tools and advices will help you to improve your project quality and solidity of your projects. I mentioned most of the tools I&#39;m using on my personal and professional projects, if you know some other useful tools please post them in the comments, I&#39;ll update the list.</p>

				</div>
			</article>
		</li>
	
		<li>
			<article class="article">
				<header>
					<h1><a class="container" href="/posts/nginx-1-4-0-spdy">Installing nginx 1.4.0 with SPDY support</a></h1>
					<p class="date">03 May 2013</p>
				</header>
				<div class="content">
					<p>Since the version 1.4.0 <a href="http://nginx.org">nginx</a> supports the <a href="http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft2">draft 2 of SPDY protocol</a>.</p>
<p>But this SPDY module is not enabled by default and to enable it you need to entirely recompile nginx.</p>
<p>Here&#39;s a simple guide to do that.</p>
<p>Fist, be sure to have all needed packages (It can vary depending of your system, for information I&#39;m doing this installation on Ubuntu 12.10)</p>
<pre class="highlighted"><code class="bash">sudo apt-get update
sudo apt-get install make gcc libpcre3-dev libssl-dev</code></pre>
<p>Then download the source code of the last stable version of nginx on their repository: <a href="http://hg.nginx.org/nginx/tags">http://hg.nginx.org/nginx/tags</a></p>
<p>Currently the last stable version is the 1.4.0 (revision 7809529022b8);</p>
<pre class="highlighted"><code class="bash">wget http://hg.nginx.org/nginx/archive/7809529022b8.tar.gz</code></pre>
<p>Decompress it:</p>
<pre class="highlighted"><code class="bash">tar -xzf 7809529022b8.tar.gz
cd nginx-7809529022b8</code></pre>
<p>Launch the <code>configure</code> command:</p>
<pre class="highlighted"><code class="bash">./auto/configure --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-mail --with-mail_ssl_module --with-file-aio --with-ipv6 --with-http_spdy_module</code></pre>
<p>(See the <code>--with-http_spdy_module</code> parameter at the end of the command)</p>
<p>(If you already have nginx installed and want to know with which parameters it was compiled you can run the command <code>nginx -V</code>)</p>
<p>Then if everything works fine, launch <code>make</code> and <code>make install</code>:</p>
<pre class="highlighted"><code class="bash">make
sudo make install</code></pre>
<p>Update your nginx configuration file</p>
<pre class="highlighted"><code class="nginx"><span class="title">server</span> {
  <span class="title">listen</span> <span class="number">443</span> ssl spdy;

  <span class="title">ssl_certificate</span> mycertificate.crt;
  <span class="title">ssl_certificate_key</span> mycertificate.key;

  <span class="comment"># ... my server configuration ...</span>

}</code></pre>
<p>Finally, (re)start nginx</p>
<pre class="highlighted"><code class="bash">sudo service nginx restart</code></pre>
<p>And voilà! Your website should now run with SPDY.</p>

				</div>
			</article>
		</li>
	
		<li>
			<article class="article">
				<header>
					<h1><a class="container" href="/posts/quick-tip-readable-ternary-operation">Quick tip - Readable ternary operation</a></h1>
					<p class="date">28 April 2013</p>
				</header>
				<div class="content">
					<p>You are certainly used to ternary operations in JavaScript, you know, those things you frequently use as a shortcut instead of a <code>if</code> statement:</p>
<pre class="highlighted"><code class="javascript"><span class="keyword">var</span> sky = summer ? <span class="string">'blue'</span> : <span class="string">'grey'</span>;</code></pre>
<p>Short, readable. Good.</p>
<p>But what if we got more complex conditions ?</p>
<pre class="highlighted"><code class="javascript"><span class="keyword">var</span> sky = spring ? <span class="string">'lightblue'</span> : summer ? <span class="string">'blue'</span> : fall ? <span class="string">'lightgrey'</span> : <span class="string">'grey'</span>;</code></pre>
<p>Still short, but it start to be much less readable and difficult to understand at first sight.</p>
<p>So, we can indent our code to keep this readable.</p>
<pre class="highlighted"><code class="javascript"><span class="keyword">var</span> sky =
    spring ? <span class="string">'lightblue'</span> :
    summer ? <span class="string">'blue'</span>      :
    fall   ? <span class="string">'lightgrey'</span> :
    <span class="string">'grey'</span>
;</code></pre>
<p>Haaaa, much better. We can easily see here our conditions and values while keeping the code quite short.</p>
<p>Has a general rule:</p>
<pre class="highlighted"><code class="javascript"><span class="keyword">var</span> [variable] =
    [condition <span class="number">1</span>] ? [value <span class="number">1</span>] :
    [condition <span class="number">2</span>] ? [value <span class="number">2</span>] :
    [fallback value]
;</code></pre>
<p>But, do you really need to do a complex ternary operation ? ;)</p>

				</div>
			</article>
		</li>
	
		<li>
			<article class="article">
				<header>
					<h1><a class="container" href="/posts/chromelogger">Chrome Logger for Node.js</a></h1>
					<p class="date">24 April 2013</p>
				</header>
				<div class="content">
					<p><a href="http://craig.is/writing/chrome-logger">Chrome Logger</a> is a Chrome extension that allows you to display your server side debugging messages in the Chrome console.</p>
<p>So, I made a simple implementation for Node.js to help you to debug your Node.js application directly in Chrome.</p>
<p>You can found <a href="https://github.com/yannickcr/node-chromelogger">node-chromelogger on GitHub</a>.</p>
<p>Juste make a</p>
<pre class="highlighted"><code class="javascript">npm install chromelogger</code></pre>
<p>like any other npm package.</p>
<p>Then, use it in your application:</p>
<pre class="highlighted"><code class="javascript"><span class="keyword">var</span> chromelogger = require(<span class="string">'chromelogger'</span>);
<span class="keyword">var</span> http = require(<span class="string">'http'</span>);

<span class="keyword">var</span> server = http.createServer();

server.on(<span class="string">'request'</span>, chromelogger.middleware);

server.on(<span class="string">'request'</span>, <span class="keyword">function</span>(req, res) {
  res.chrome.log(<span class="string">'Message from Node.js %s'</span>, process.version);
  res.end(<span class="string">'Hello World'</span>);
});

server.listen(<span class="number">7357</span>);</code></pre>
<p>Node Chrome Logger provide several logging methods on the ServerResponse (res) object:</p>
<ul>
<li><code>res.chrome.log</code></li>
<li><code>res.chrome.warn</code></li>
<li><code>res.chrome.error</code></li>
<li><code>res.chrome.info</code></li>
<li><code>res.chrome.group</code></li>
<li><code>res.chrome.groupEnd</code></li>
<li><code>res.chrome.groupCollapse</code></li>
</ul>
<p>These methods matches the <a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Console API of the Chrome Developer Tools</a>.</p>
<p>You can also use it as an ExpressJS middleware if you want (see Readme for more informations).</p>
<p>The main limitation is it uses the HTTP Headers to send the informations to the client, so if you started to send the body you can&#39;t send more debug messages to the client and it will trigger an error.</p>
<p>If you need a more advanced Node.js debug tool I suggest you to use the great <a href="https://github.com/dannycoates/node-inspector">Node Inspector</a> package.</p>

				</div>
			</article>
		</li>
	
		<li>
			<article class="article">
				<header>
					<h1><a class="container" href="/posts/hello">Hello World!</a></h1>
					<p class="date">22 April 2013</p>
				</header>
				<div class="content">
					<p>Hello <strong>World</strong>!</p>

				</div>
			</article>
		</li>
	
</ul>
				</div>
			</div>
			<footer class="footer">
				<ul>
					<li><a data-icon="♯" href="https://github.com/yannickcr" title="GitHub">GitHub</a></li><!--
					--><li><a data-icon="☺" href="https://twitter.com/yannickc" title="Twitter">Twitter</a></li><!--
					--><li><a data-icon="✍" href="http://www.linkedin.com/in/yannickcroissant" title="LinkedIn">LinkedIn</a></li><!--
					--><li><a data-icon="⚐" href="http://lanyrd.com/profile/yannickc" title="Lanyrd">Lanyrd</a></li><!--
					--><li><a data-icon="⛪" href="https://secure.flickr.com/photos/yannick-croissant" title="Flickr">Flickr</a></li><!--
					--><li><a data-icon="♬" href="http://www.lastfm.fr/user/K1derCountry" title="Last.fm">Last.fm</a></li>
				</ul>
			</footer>
		</div>
	</body>
</html>