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

  <title><![CDATA[alessandro melandri]]></title>
  <link href="http://melandri.net/atom.xml" rel="self"/>
  <link href="http://melandri.net/"/>
  <updated>2012-04-29T18:21:50+02:00</updated>
  <id>http://melandri.net/</id>
  <author>
    <name><![CDATA[Alessandro Melandri]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
<entry>
  
  <title type="html"><![CDATA[Using Apache mod_auth_form]]></title>
  <link href="http://melandri.net/2012/04/29/using-apache-mod-auth-form/"/>
  
  <updated>2012-04-29T14:11:00+02:00</updated>
  <id>http://melandri.net/2012/04/29/using-apache-mod-auth-form</id>
  
  <content type="html"><![CDATA[<p>Protecting a web site area using <a href="http://httpd.apache.org/" title="Apache Httpd">Apache httpd</a> basic security is very simple but you have no control over the login alert window displayed by the browser, so when at work we saw that since version 2.3 Apache added a module that will let you use a an html form instead of the ugly alert we decided to upgrade to latest version and give it a try.</p>

<p>I compiled <a href="http://httpd.apache.org/docs/2.4/new_features_2_4.html" title="Apache 2.3/2.4 what's new">Apache 2.4.2</a> on CentOS 6.2 32 bit. I won&#8217;t detail here the installation process, if you need help just follow <a href="http://www.hackersgarage.com/installing-apache-2-4-1-from-source-on-centos-6-2-linux.html" title="Installing Apache 2.4.1 from source on CentOS 6.2 Linux">this tutorial</a>.</p>

<p>The following instructions are based on the <a href="http://httpd.apache.org/docs/2.4/mod/mod_auth_form.html" title="Apache Module mod_auth_form">mod_auth_form documentation page</a> and the few tutorials I found online.</p>

<p>First of all create a test folder in the web server root and put a test page inside it</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nb">cd</span> /usr/local/apache/www/
</span><span class='line'>mkdir testfolder
</span><span class='line'><span class="nb">echo</span> <span class="s1">&#39;It Works&#39;</span> &gt; ./testfolder/index.html
</span><span class='line'>chmod -R 755 testfolder/
</span></code></pre></td></tr></table></div></figure>


<p>Then create a login page in the webserver root that will be used to authenticate users</p>

<figure class='code'><figcaption><span>/usr/local/apache/www/login.html  </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;html&gt;</span>
</span><span class='line'>  <span class="nt">&lt;head&gt;</span>
</span><span class='line'>      <span class="nt">&lt;title&gt;</span>Login page<span class="nt">&lt;/title&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/head&gt;</span>
</span><span class='line'>  <span class="nt">&lt;body&gt;</span>
</span><span class='line'>      <span class="nt">&lt;form</span> <span class="na">method=</span><span class="s">&quot;POST&quot;</span> <span class="na">action=</span><span class="s">&quot;&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>          User: <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">name=</span><span class="s">&quot;httpd_username&quot;</span> <span class="na">value=</span><span class="s">&quot;&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>          Pass: <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;password&quot;</span> <span class="na">name=</span><span class="s">&quot;httpd_password&quot;</span> <span class="na">value=</span><span class="s">&quot;&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>          <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">name=</span><span class="s">&quot;login&quot;</span> <span class="na">value=</span><span class="s">&quot;Login&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>      <span class="nt">&lt;/form&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/body&gt;</span>
</span><span class='line'><span class="nt">&lt;/html&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Please note that leaving the action empty, after a successfull login the user will be redirected to the previously requested resource.</p>

<p>Now edit Apache main configuration file enabling required modules</p>

<figure class='code'><figcaption><span>/usr/local/apache/conf/httpd.conf  </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='apache'><span class='line'><span class="nb">LoadModule</span> auth_form_module modules/mod_auth_form.so
</span><span class='line'><span class="nb">LoadModule</span> session_module modules/mod_session.so
</span><span class='line'><span class="nb">LoadModule</span> request_module modules/mod_request.so
</span><span class='line'><span class="nb">LoadModule</span> session_cookie_module modules/mod_session_cookie.so
</span></code></pre></td></tr></table></div></figure>


<p>and then add a Directory directive to protect the folder</p>

<figure class='code'><figcaption><span>/usr/local/apache/conf/httpd.conf  </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='apache'><span class='line'><span class="nt">&lt;Directory</span> <span class="s">&quot;/usr/local/apache/www/testfolder&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="nb">AuthFormProvider</span> file
</span><span class='line'>    <span class="nb">AuthType</span> form
</span><span class='line'>    <span class="nb">AuthName</span> Reserved Area
</span><span class='line'>    <span class="nb">Session</span> <span class="k">On</span>
</span><span class='line'>    <span class="nb">SessionCookieName</span> session path=/
</span><span class='line'>    <span class="nb">require</span> valid-user
</span><span class='line'>
</span><span class='line'>  <span class="c"># This is the login page</span>
</span><span class='line'>    <span class="nb">ErrorDocument</span> <span class="m">401</span> <span class="sx">/login.html</span>
</span><span class='line'>
</span><span class='line'>    <span class="c"># This is the file containing users login data</span>
</span><span class='line'>    <span class="nb">AuthUserFile</span> <span class="sx">/usr/local/apache/auth/.htpasswd</span>
</span><span class='line'>
</span><span class='line'><span class="nt">&lt;/Directory&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now add a user to the .htpasswd file and reload the web server configuration before trying to navigate to the protected folder.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>htpasswd -c /usr/local/apache/auth/.htpasswd myusername
</span></code></pre></td></tr></table></div></figure>



]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Arcipelago Gulag]]></title>
  <link href="http://melandri.net/2012/04/19/arcipelago-gulag/"/>
  
  <updated>2012-04-19T22:20:00+02:00</updated>
  <id>http://melandri.net/2012/04/19/arcipelago-gulag</id>
  
  <content type="html"><![CDATA[<blockquote><p>L&#8217;uomo oscilla tutta la vita fra il male e il bene, scivola, cade, si riarrampica, si pente, si ottenebra nuovamente, ma fino a che non ha varcato la soglia della malvagità il ritorno rimane nelle sue possibilità, ed egli resta nell&#8217;ambito delle nostre speranze. Quando invece, per la densità delle azioni malefiche, o il loro grado, o per il carattere assoluto del potere, egli oltrepassa d&#8217;un tratto la soglia, esorbita dall&#8217;umanità. Forse senza possibilità di ritorno.</p><p>[…]</p><p>Dobbiamo condannare pubblicamente l&#8217;IDEA stessa dello scempio compiuto da uomini sui loro simili. Tacendo sul vizio, ricacciandolo nel corpo perché non si riaffacci, noi lo SEMINIAMO, e in futuro germinerà moltiplicandosi per mille. Non punendo, non biasimando nepppure i malvagi, non ci limitiamo a proteggere la loro sterile vecchiaia, ma strappiamo da sotto alle nuove generazioni ogni fondamento di giustizia. Ecco perchè esse crescono &#8220;indifferenti&#8221;, non è colpa della &#8220;insufficiente educazione&#8221;. I giovani imparano che un&#8217;azione ignobile non viene mai punita sulla terra, anzi, porta sempre il benessere.</p><p>Non sarà accogliente un tale paese, farà paura viverci.</p><footer><strong>Aleksandr Solženicyn</strong> <cite>Arcipelago Gulag</cite></footer></blockquote>

]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Learning from competition GLYPH GOES HERE]]></title>
  <link href="http://www.marco.org/2012/03/08/learning-from-competition"/>
  
  <updated>2012-03-09T06:51:00+01:00</updated>
  <id>http://melandri.net/2012/03/09/learning-from-competition</id>
  
  <content type="html"><![CDATA[<blockquote><p>Reacting well to competition requires critical analysis of your own product and its shortcomings, and a complete, open-minded understanding of why people might choose your competitors.</p><p>They’re not fanboys. They’re not brainwashed by “marketing”. Your competitors’ customers aren’t passing on your product because they’re stupid or irrational.</p><p>They’re choosing your competitors for good reasons, and denying the existence of such good reasons will only ensure that your product never overcomes them.</p><footer><strong>Marco Arment</strong> <cite>Instapaper Developer</cite></footer></blockquote>

<a rel="full-article" href="http://melandri.net/2012/03/09/learning-from-competition/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Windows 8 A Giant Misstep Forward GLYPH GOES HERE]]></title>
  <link href="http://www.livingdigitally.net/2012/03/windows-8-a-giant-misstep-forward.html"/>
  
  <updated>2012-03-06T08:37:00+01:00</updated>
  <id>http://melandri.net/2012/03/06/windows-8-a-giant-misstep-forward</id>
  
  <content type="html"><![CDATA[<blockquote><p>In my opinion, the best computing model is one in which all the devices you use have operating systems, UIs, and interaction models that are appropriate for that device&#8217;s form factor and for its intended purpose with data being seamlessly shared between them. My interpretation of Windows 8 is that Microsoft tried to anticipate Apple combining their operating systems into one, and tried to beat them to it. However, I think they&#8217;ve beaten Apple to something Apple isn&#8217;t interested in doing, and that actually represents a big step backwards in computer interaction and productivity</p></blockquote>

<a rel="full-article" href="http://melandri.net/2012/03/06/windows-8-a-giant-misstep-forward/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Sublime Text Workflow GLYPH GOES HERE]]></title>
  <link href="http://tarantsov.com/blog/2012/02/sublime-text-workflow-that-beats-coda-and-espresso/"/>
  
  <updated>2012-02-29T22:19:00+01:00</updated>
  <id>http://melandri.net/2012/02/29/sublime-text-workflow-that-beats-coda-and-espresso</id>
  
  <content type="html"><![CDATA[<p>SublimeText easily became my editor of choice and I&#8217;m spreading the word with my colleagues.<br/>
This is a nice tutorial that explains how to set up SublimeText: a good read even if it focuses on how to setup a development workflow on a Mac.</p>
<a rel="full-article" href="http://melandri.net/2012/02/29/sublime-text-workflow-that-beats-coda-and-espresso/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes GLYPH GOES HERE]]></title>
  <link href="http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/"/>
  
  <updated>2012-02-21T16:37:00+01:00</updated>
  <id>http://melandri.net/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes</id>
  
  <content type="html"><![CDATA[<blockquote><p>When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have wondered this, and most have turned to the user interface guidelines provided by the platform developer for the answer.</p></blockquote>

<a rel="full-article" href="http://melandri.net/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Header cleanup]]></title>
  <link href="http://melandri.net/2012/02/19/header-cleanup/"/>
  
  <updated>2012-02-19T19:31:00+01:00</updated>
  <id>http://melandri.net/2012/02/19/header-cleanup</id>
  
  <content type="html"><![CDATA[<p><a href="http://www.flickr.com/photos/melandri/6904157423/" title="logocompare by Alessandro Melandri, on Flickr"><img src="http://farm8.staticflickr.com/7037/6904157423_a61f4097e4_z.jpg" width="640" height="320" alt="logocompare"></a></p>
]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Open Source Research and Reference GLYPH GOES HERE]]></title>
  <link href="https://calomel.org/"/>
  
  <updated>2012-02-19T09:36:00+01:00</updated>
  <id>http://melandri.net/2012/02/19/open-source-research-and-reference</id>
  
  <content type="html"><![CDATA[<p>An incredible repository of open source reference articles.</p>

<blockquote><p>Calomel.org is a privately held site dedicated to documenting open source programs and configurations. The goal of our domain is to be simple to maintain, trivial to navigate and efficient to serve.<br/>[…]<br/>We do not accept any donations, gifts or financial reimbursement for information found on Calomel.org. This site is run for the sole purpose of sharing what we have learned with anyone who is interested. If you wish to contribute, please teach what you know to others and hopefully they will do the same. We all benefit from knowledge freely shared.</p></blockquote>

<a rel="full-article" href="http://melandri.net/2012/02/19/open-source-research-and-reference/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Setup Mailman and Postfix on a Debian server]]></title>
  <link href="http://melandri.net/2012/02/15/setup-mailman-and-postfix-on-a-debian-server/"/>
  
  <updated>2012-02-15T21:30:00+01:00</updated>
  <id>http://melandri.net/2012/02/15/setup-mailman-and-postfix-on-a-debian-server</id>
  
  <content type="html"><![CDATA[<p>After moving my website to <a href="http://www.linode.com/?r=ce81128e2ab198e1d3b756a51b3773659eee245d" title="Linode referral link">Linode</a> I had to install and configure Mailman and Postfix to manage some mailing lists and since the process is quite tricky, I decided to write down all the steps hoping it can be useful to beginners like me.</p>

<p>This tutorial assumes that you are using Debian 6 and the latest Mailman and Postfix stable versions and that you plan to use a dedicated subdomain for your lists.</p>

<!--more-->


<h2>Create the VirtualHost</h2>

<p>Go to <code>/etc/apache2/sites-available/</code> and create the file <code>lists.mydomain.com</code> with this content:</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='apache'><span class='line'><span class="nt">&lt;VirtualHost</span> <span class="s">*:80</span><span class="nt">&gt;</span>
</span><span class='line'>  <span class="nb">ServerAdmin</span> admin@mydomain.com
</span><span class='line'>  <span class="nb">ServerName</span> lists.mydomain.com
</span><span class='line'>  <span class="nb">ServerAlias</span> www.lists.mydomain.com
</span><span class='line'>  <span class="nb">DocumentRoot</span> <span class="sx">/srv/www/lists.mydomain.com/public_html/</span>
</span><span class='line'>  <span class="nb">ErrorLog</span> <span class="sx">/srv/www/lists.mydomain.com/logs/error.log</span>
</span><span class='line'>  <span class="nb">CustomLog</span> <span class="sx">/srv/www/lists.mydomain.com/logs/access.log</span> combined
</span><span class='line'><span class="nt">&lt;/VirtualHost&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Save the file and create the directories for public files and logs</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>mkdir -p /srv/www/lists.mydomain.com/public_html/
</span><span class='line'>mkdir /srv/www/lists.mydomain.com/logs/
</span></code></pre></td></tr></table></div></figure>


<p>and enable the virtualhost:</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>a2ensite lists.mydomain.com
</span></code></pre></td></tr></table></div></figure>


<h2>Install Mailman and postfix</h2>

<p>For Mailman and Postifx installation I followed the tutorial <a href="http://library.linode.com/email/mailman/debian-6-squeeze">Manage Email Lists with GNU Mailman on Debian 6 (Squeeze)</a> in the <a href="http://library.linode.com">Linode Library</a>.</p>

<p>Be sure to complete the <a href="http://library.linode.com/email/mailman/debian-6-squeeze#sph_id1">Configure Virtual Hosting</a> section <strong>before</strong> creating the default <code>mailman</code> list.</p>

<h2>Setup the virtualhost</h2>

<p>Now you need to tweak your subdomain configuration in order to access the mailman web interface. You can integrate your configuration using the sample file inside <code>/var/lib/mailman/templates/apache.conf</code>.</p>

<p>Below there&#8217;s the final configuration file:</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
</pre></td><td class='code'><pre><code class='apache'><span class='line'><span class="nt">&lt;VirtualHost</span> <span class="s">*:80</span><span class="nt">&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nb">ServerAdmin</span> admin@mydomain.com
</span><span class='line'>  <span class="nb">ServerName</span> lists.mydomain.com
</span><span class='line'>  <span class="nb">ServerAlias</span> www.lists.mydomain.com
</span><span class='line'>  <span class="nb">DocumentRoot</span> <span class="sx">/srv/www/lists.mydomain.com/public_html/</span>
</span><span class='line'>  <span class="nb">ErrorLog</span> <span class="sx">/srv/www/lists.mydomain.com/logs/error.log</span>
</span><span class='line'>  <span class="nb">CustomLog</span> <span class="sx">/srv/www/lists.mydomain.com/logs/access.log</span> combined
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;Directory</span> <span class="s">/usr/lib/cgi-bin/mailman/</span><span class="nt">&gt;</span>
</span><span class='line'>      <span class="nb">AllowOverride</span> <span class="k">None</span>
</span><span class='line'>      <span class="nb">Options</span> ExecCGI
</span><span class='line'>      <span class="nb">AddHandler</span> cgi-script .cgi
</span><span class='line'>      <span class="nb">Order</span> allow,deny
</span><span class='line'>      <span class="nb">Allow</span> from <span class="k">all</span>
</span><span class='line'>  <span class="nt">&lt;/Directory&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;Directory</span> <span class="s">/var/lib/mailman/archives/public/</span><span class="nt">&gt;</span>
</span><span class='line'>      <span class="nb">Options</span> FollowSymlinks
</span><span class='line'>      <span class="nb">AllowOverride</span> <span class="k">None</span>
</span><span class='line'>      <span class="nb">Order</span> allow,deny
</span><span class='line'>      <span class="nb">Allow</span> from <span class="k">all</span>
</span><span class='line'>  <span class="nt">&lt;/Directory&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;Directory</span> <span class="s">/usr/share/images/mailman/</span><span class="nt">&gt;</span>
</span><span class='line'>      <span class="nb">AllowOverride</span> <span class="k">None</span>
</span><span class='line'>      <span class="nb">Order</span> allow,deny
</span><span class='line'>      <span class="nb">Allow</span> from <span class="k">all</span>
</span><span class='line'>  <span class="nt">&lt;/Directory&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nb">Alias</span> <span class="sx">/pipermail/</span> <span class="sx">/var/lib/mailman/archives/public/</span>
</span><span class='line'>  <span class="nb">Alias</span> <span class="sx">/images/mailman/</span> <span class="sx">/usr/share/images/mailman/</span>
</span><span class='line'>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/cgi-bin/mailman/</span> <span class="sx">/usr/lib/cgi-bin/mailman/</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/admin</span> <span class="sx">/usr/lib/cgi-bin/mailman/admin</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/admindb</span> <span class="sx">/usr/lib/cgi-bin/mailman/admindb</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/confirm</span> <span class="sx">/usr/lib/cgi-bin/mailman/confirm</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/create</span> <span class="sx">/usr/lib/cgi-bin/mailman/create</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/edithtml</span> <span class="sx">/usr/lib/cgi-bin/mailman/edithtml</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/listinfo</span> <span class="sx">/usr/lib/cgi-bin/mailman/listinfo</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/options</span> <span class="sx">/usr/lib/cgi-bin/mailman/options</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/private</span> <span class="sx">/usr/lib/cgi-bin/mailman/private</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/rmlist</span> <span class="sx">/usr/lib/cgi-bin/mailman/rmlist</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/roster</span> <span class="sx">/usr/lib/cgi-bin/mailman/roster</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/subscribe</span> <span class="sx">/usr/lib/cgi-bin/mailman/subscribe</span>
</span><span class='line'>  <span class="nb">ScriptAlias</span> <span class="sx">/mailman/</span> <span class="sx">/usr/lib/cgi-bin/mailman/</span>
</span><span class='line'>
</span><span class='line'><span class="nt">&lt;/VirtualHost&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>To complete the configuration, add an <code>index.html</code> file to your subdomain root that forwards the requests to the mailman web interface</p>

<figure class='code'><figcaption><span>index.html  </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;html&gt;</span>
</span><span class='line'><span class="nt">&lt;head&gt;</span>
</span><span class='line'><span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">&quot;refresh&quot;</span> <span class="na">content=</span><span class="s">&quot;0; url=http://lists.mydomain.com/mailman/listinfo&quot;</span><span class="nt">&gt;</span>
</span><span class='line'><span class="nt">&lt;/head&gt;</span>
</span><span class='line'><span class="nt">&lt;body&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span><span class='line'><span class="nt">&lt;/html&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Troubleshooting</h2>

<p>When I completed the configuration I sent my first email to the list and got this error.</p>

<pre><code>The error that the other server returned was: 
550 550 5.1.1 &lt;listname@lists.mydomain.com&gt;: 
Recipient address rejected: User unknown in local recipient table (state 14)
</code></pre>

<p>If you get this error probably the installation didn&#8217;t insert the corret aliases in the <code>/etc/aliases</code> file. To solve the problem just add this aliases to the file</p>

<pre><code>mylist: "|/var/lib/mailman/mail/mailman post mylist"
mylist-admin: "|/var/lib/mailman/mail/mailman admin mylist"
mylist-bounces: "|/var/lib/mailman/mail/mailman bounces mylist"
mylist-confirm: "|/var/lib/mailman/mail/mailman confirm mylist"
mylist-join: "|/var/lib/mailman/mail/mailman join mylist"
mylist-leave: "|/var/lib/mailman/mail/mailman leave mylist"
mylist-owner: "|/var/lib/mailman/mail/mailman owner mylist"
mylist-request: "|/var/lib/mailman/mail/mailman request mylist"
mylist-subscribe: "|/var/lib/mailman/mail/mailman subscribe mylist"
mylist-unsubscribe: "|/var/lib/mailman/mail/mailman unsubscribe mylist"
</code></pre>

<p>and run</p>

<pre><code>newaliases
</code></pre>
]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Octopress theme customization]]></title>
  <link href="http://melandri.net/2012/02/14/octopress-theme-customization/"/>
  
  <updated>2012-02-14T13:50:00+01:00</updated>
  <id>http://melandri.net/2012/02/14/octopress-theme-customization</id>
  
  <content type="html"><![CDATA[<p>I received a positive feedback on the <a href="http://octopress.org">Octopress</a> theme customization I wrote for this website, so I decided to publish the modifications I made to the default theme.</p>

<p>I followed the <a href="http://octopress.org/docs/theme/template/" title="Octopress - Theming &amp; Customization">Theming &amp; Customization</a> instructions and modified only the &#8221;<em>custom</em>&#8221; files beacuse I wanted to be able to upgrade Octopress without having to re-apply my changes every time.</p>

<p>Feel free to use the following code, just please give me <strong>credit</strong> and some <strong>backlink</strong> love.</p>

<!--more-->


<p>First of all I changed the main layout width because I wanted the article content to be 640px wide, a populare image format, especially if you use Flickr.<br/>
I love the modern browser ability to resize images on the fly, but I prefer to keep my pages as light as possible, so I try to post images that fit the layout.</p>

<figure class='code'><figcaption><span>sass/custom/_layout.scss </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='scss'><span class='line'><span class="na">$max-width</span><span class="o">:</span> <span class="mi">1037</span><span class="kt">px</span><span class="p">;</span>
</span><span class='line'><span class="na">$sidebar-width-medium</span><span class="o">:</span> <span class="mi">286</span><span class="kt">px</span><span class="p">;</span>
</span><span class='line'><span class="na">$sidebar-width-wide</span><span class="o">:</span> <span class="mi">286</span><span class="kt">px</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Then I changed the default font and set it to Lato, including the font from Google Fonts</p>

<figure class='code'><figcaption><span>sass/custom/_fonts.scss </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='scss'><span class='line'><span class="nv">$sans</span><span class="o">:</span> <span class="s2">&quot;Lato&quot;</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
</span><span class='line'><span class="nv">$serif</span><span class="o">:</span> <span class="s2">&quot;Lato&quot;</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
</span><span class='line'><span class="na">$heading-font-family</span><span class="o">:</span> <span class="s1">&#39;</span><span class="s2">Lato&#39;</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
</span><span class='line'><span class="na">$header-title-font-family</span><span class="o">:</span> <span class="s2">&quot;League&quot;</span><span class="o">,</span> <span class="n">Helvetica</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span>source/_includes/custom/head.html </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">&#39;http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&#39;</span> <span class="na">rel=</span><span class="s">&#39;stylesheet&#39;</span> <span class="na">type=</span><span class="s">&#39;text/css&#39;</span><span class="nt">&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>And finally I wrote my custom CSS. I use some external resource in my style:</p>

<ul>
<li>The header icon is part of the <em>Super Mono Icon Set</em> by <a href="http://www.doublejdesign.co.uk" title="Double J Design">Double-J Design</a></li>
<li><a href="http://www.theleagueofmoveabletype.com/league-gothic">LeagueGothic</a> is a great font by <a href="http://www.theleagueofmoveabletype.com">The League of Moveable Type</a></li>
<li>The background pattern is generated using <a href="http://www.stripegenerator.com/">Stripe Generator 2.0</a></li>
</ul>


<figure class='code'><figcaption><span>sass/custom/_styles.scss  </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
<span class='line-number'>51</span>
<span class='line-number'>52</span>
<span class='line-number'>53</span>
<span class='line-number'>54</span>
<span class='line-number'>55</span>
<span class='line-number'>56</span>
<span class='line-number'>57</span>
<span class='line-number'>58</span>
<span class='line-number'>59</span>
<span class='line-number'>60</span>
<span class='line-number'>61</span>
<span class='line-number'>62</span>
<span class='line-number'>63</span>
<span class='line-number'>64</span>
<span class='line-number'>65</span>
<span class='line-number'>66</span>
<span class='line-number'>67</span>
<span class='line-number'>68</span>
<span class='line-number'>69</span>
<span class='line-number'>70</span>
<span class='line-number'>71</span>
<span class='line-number'>72</span>
<span class='line-number'>73</span>
<span class='line-number'>74</span>
<span class='line-number'>75</span>
<span class='line-number'>76</span>
<span class='line-number'>77</span>
<span class='line-number'>78</span>
<span class='line-number'>79</span>
<span class='line-number'>80</span>
<span class='line-number'>81</span>
<span class='line-number'>82</span>
<span class='line-number'>83</span>
<span class='line-number'>84</span>
<span class='line-number'>85</span>
<span class='line-number'>86</span>
<span class='line-number'>87</span>
<span class='line-number'>88</span>
<span class='line-number'>89</span>
<span class='line-number'>90</span>
<span class='line-number'>91</span>
<span class='line-number'>92</span>
<span class='line-number'>93</span>
<span class='line-number'>94</span>
<span class='line-number'>95</span>
<span class='line-number'>96</span>
<span class='line-number'>97</span>
<span class='line-number'>98</span>
<span class='line-number'>99</span>
<span class='line-number'>100</span>
<span class='line-number'>101</span>
<span class='line-number'>102</span>
<span class='line-number'>103</span>
<span class='line-number'>104</span>
<span class='line-number'>105</span>
<span class='line-number'>106</span>
<span class='line-number'>107</span>
<span class='line-number'>108</span>
<span class='line-number'>109</span>
<span class='line-number'>110</span>
<span class='line-number'>111</span>
<span class='line-number'>112</span>
<span class='line-number'>113</span>
<span class='line-number'>114</span>
<span class='line-number'>115</span>
<span class='line-number'>116</span>
<span class='line-number'>117</span>
<span class='line-number'>118</span>
<span class='line-number'>119</span>
<span class='line-number'>120</span>
<span class='line-number'>121</span>
<span class='line-number'>122</span>
<span class='line-number'>123</span>
<span class='line-number'>124</span>
<span class='line-number'>125</span>
<span class='line-number'>126</span>
<span class='line-number'>127</span>
<span class='line-number'>128</span>
<span class='line-number'>129</span>
<span class='line-number'>130</span>
<span class='line-number'>131</span>
<span class='line-number'>132</span>
<span class='line-number'>133</span>
<span class='line-number'>134</span>
<span class='line-number'>135</span>
<span class='line-number'>136</span>
<span class='line-number'>137</span>
<span class='line-number'>138</span>
<span class='line-number'>139</span>
<span class='line-number'>140</span>
<span class='line-number'>141</span>
<span class='line-number'>142</span>
<span class='line-number'>143</span>
<span class='line-number'>144</span>
<span class='line-number'>145</span>
<span class='line-number'>146</span>
<span class='line-number'>147</span>
<span class='line-number'>148</span>
<span class='line-number'>149</span>
<span class='line-number'>150</span>
<span class='line-number'>151</span>
<span class='line-number'>152</span>
<span class='line-number'>153</span>
<span class='line-number'>154</span>
<span class='line-number'>155</span>
<span class='line-number'>156</span>
<span class='line-number'>157</span>
<span class='line-number'>158</span>
<span class='line-number'>159</span>
<span class='line-number'>160</span>
<span class='line-number'>161</span>
<span class='line-number'>162</span>
<span class='line-number'>163</span>
<span class='line-number'>164</span>
<span class='line-number'>165</span>
<span class='line-number'>166</span>
<span class='line-number'>167</span>
<span class='line-number'>168</span>
<span class='line-number'>169</span>
<span class='line-number'>170</span>
<span class='line-number'>171</span>
<span class='line-number'>172</span>
<span class='line-number'>173</span>
<span class='line-number'>174</span>
<span class='line-number'>175</span>
<span class='line-number'>176</span>
<span class='line-number'>177</span>
<span class='line-number'>178</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="k">@font-face</span> <span class="p">{</span>
</span><span class='line'>  <span class="nt">font-family</span><span class="o">:</span> <span class="s2">&quot;League&quot;</span><span class="o">;</span>
</span><span class='line'>  <span class="nt">src</span><span class="o">:</span> <span class="nt">url</span><span class="o">(</span><span class="s1">&#39;/font/LeagueGothic.otf&#39;</span><span class="o">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">a</span><span class="nd">:visited</span><span class="o">,</span> <span class="nf">#content</span> <span class="nc">.blog-index</span> <span class="nt">article</span> <span class="nt">h1</span> <span class="nt">a</span><span class="nd">:hover</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="m">#1863A1</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="c">/* ----- main layout ----- */</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="nt">html</span> <span class="p">{</span> <span class="k">background</span><span class="o">:</span> <span class="m">#262C33</span> <span class="sx">url(&quot;/images/line-tile.png&quot;)</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">div</span> <span class="p">{</span> <span class="k">background-image</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">div</span> <span class="o">&gt;</span> <span class="nt">div</span> <span class="p">{</span> <span class="k">background-image</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="c">/* ----- header ----- */</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">header</span><span class="p">{</span>
</span><span class='line'>  <span class="k">background</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span>
</span><span class='line'>  <span class="k">padding</span><span class="o">:</span> <span class="m">1.6em</span> <span class="m">0</span> <span class="m">1em</span> <span class="m">0</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">header</span> <span class="nt">h1</span><span class="p">{</span>
</span><span class='line'>  <span class="k">font-size</span><span class="o">:</span> <span class="m">2.8em</span><span class="p">;</span>
</span><span class='line'>  <span class="k">padding-left</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">text-shadow</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">8</span><span class="p">)</span> <span class="m">0</span> <span class="m">0</span> <span class="m">8px</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">header</span> <span class="nt">h2</span><span class="p">{</span>
</span><span class='line'>  <span class="k">font-size</span><span class="o">:</span> <span class="m">0.5em</span><span class="p">;</span>
</span><span class='line'>  <span class="k">letter-spacing</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">margin-top</span><span class="o">:</span> <span class="m">-1.4em</span><span class="p">;</span>
</span><span class='line'>  <span class="k">padding-left</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">nav</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">padding-top</span><span class="o">:</span> <span class="m">.15em</span><span class="p">;</span>
</span><span class='line'>  <span class="k">padding-bottom</span><span class="o">:</span> <span class="m">.15em</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">nav</span> <span class="nt">a</span><span class="p">{</span>
</span><span class='line'>  <span class="k">font-size</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span>
</span><span class='line'>  <span class="k">line-height</span><span class="o">:</span> <span class="m">1.4em</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">nav</span> <span class="nt">form</span> <span class="nc">.search</span><span class="p">{</span>
</span><span class='line'>  <span class="k">padding</span><span class="o">:</span> <span class="m">.2em</span> <span class="m">.3em</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="c">/* ----- Content ----- */</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="nf">#content</span> <span class="nc">.blog-index</span> <span class="nt">article</span> <span class="nt">h1</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">font-size</span><span class="o">:</span> <span class="m">1.8em</span><span class="p">;</span>
</span><span class='line'>  <span class="k">font-weight</span><span class="o">:</span> <span class="k">normal</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nf">#content</span> <span class="nc">.blog-index</span> <span class="nt">article</span> <span class="nt">h1</span><span class="o">,</span> <span class="nf">#content</span> <span class="nc">.blog-index</span> <span class="nt">article</span> <span class="nt">h1</span> <span class="nt">a</span><span class="o">,</span> <span class="nt">article</span> <span class="nt">header</span> <span class="nt">h1</span><span class="o">,</span> <span class="nt">article</span> <span class="nt">header</span> <span class="nt">h1</span> <span class="nt">a</span><span class="p">{</span>
</span><span class='line'>  <span class="k">color</span><span class="o">:</span> <span class="m">#555555</span> <span class="cp">!important</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">h1</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="m">1.8em</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">h1</span> <span class="nt">span</span><span class="p">{</span>
</span><span class='line'>  <span class="k">font-weight</span><span class="o">:</span> <span class="k">normal</span><span class="p">;</span>
</span><span class='line'>  <span class="k">color</span><span class="o">:</span> <span class="m">#E0841B</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">article</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">article</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">article</span> <span class="nt">header</span> <span class="nt">h1</span><span class="p">{</span>
</span><span class='line'>  <span class="k">font-weight</span><span class="o">:</span> <span class="k">normal</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nc">.blog-index</span> <span class="nt">article</span> <span class="nt">h1</span> <span class="nt">a</span><span class="nd">:hover</span><span class="p">{</span> <span class="k">text-decoration</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">article</span> <span class="nt">p</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">text-align</span><span class="o">:</span><span class="k">justify</span><span class="p">;</span>
</span><span class='line'>  <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="c">/* ----- Sidebar ----- */</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="nt">aside</span><span class="nc">.sidebar</span> <span class="nt">section</span> <span class="nt">h1</span> <span class="p">{</span> <span class="k">letter-spacing</span><span class="o">:</span> <span class="m">0.1em</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">aside</span><span class="nc">.sidebar</span> <span class="nt">a</span> <span class="p">{</span> <span class="k">text-decoration</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nc">.toggle-sidebar</span><span class="p">{</span><span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">ul</span><span class="nf">#gh_repos</span> <span class="o">&gt;</span> <span class="nt">li</span> <span class="o">&gt;</span> <span class="nt">a</span><span class="p">{</span>
</span><span class='line'>  <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
</span><span class='line'>  <span class="k">font-weight</span><span class="o">:</span> <span class="k">bold</span><span class="p">;</span>
</span><span class='line'>  <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nt">aside</span><span class="nc">.sidebar</span><span class="p">{</span>
</span><span class='line'>  <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">-</span><span class="n">topright</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>  <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0</span> <span class="m">0.4em</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'>  <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0</span> <span class="m">0.4em</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="c">/* ----- Footer ----- */</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">footer</span><span class="p">{</span>
</span><span class='line'>  <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'>  <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'>  <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span><span class="m">0</span><span class="p">;</span>
</span><span class='line'>  <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="c">/* ----- 404 ----- */</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="nc">.notfound404</span> <span class="nt">article</span><span class="p">{</span>
</span><span class='line'>  <span class="k">margin-left</span><span class="o">:</span> <span class="m">0</span> <span class="cp">!important</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="c">/* ----- Media queries ----- */</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="k">@media</span> <span class="nt">only</span> <span class="nt">screen</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">550px</span><span class="o">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">header</span> <span class="nt">h1</span><span class="p">{</span>
</span><span class='line'>      <span class="k">background</span><span class="o">:</span> <span class="sx">url(&quot;/favicon.png&quot;)</span> <span class="k">no-repeat</span> <span class="m">0</span> <span class="m">8px</span><span class="p">;</span>
</span><span class='line'>      <span class="k">padding-left</span><span class="o">:</span> <span class="m">60px</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">header</span> <span class="nt">h2</span> <span class="p">{</span> <span class="k">padding-left</span><span class="o">:</span> <span class="m">60px</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">footer</span> <span class="p">{</span> <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">3em</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="k">@media</span> <span class="nt">only</span> <span class="nt">screen</span> <span class="nt">and</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">1040px</span><span class="o">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">nav</span> <span class="p">{</span>
</span><span class='line'>    <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>    <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span><span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>    <span class="k">margin-bottom</span><span class="o">:</span> <span class="m">2em</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">body</span> <span class="o">&gt;</span> <span class="nt">footer</span><span class="p">{</span>
</span><span class='line'>      <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">-</span><span class="n">bottomleft</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>      <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">-</span><span class="n">bottomright</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>      <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0.4em</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>      <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0.4em</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nf">#main</span><span class="p">{</span>
</span><span class='line'>      <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">-</span><span class="n">topleft</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>      <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">-</span><span class="n">topright</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>      <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0.4em</span> <span class="m">0.4em</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'>      <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0.4em</span> <span class="m">0.4em</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nf">#content</span><span class="p">{</span>
</span><span class='line'>      <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">-</span><span class="n">topleft</span><span class="o">:</span> <span class="m">0.4em</span><span class="p">;</span>
</span><span class='line'>      <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0.4em</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'>      <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">0.4em</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nf">#content</span> <span class="nc">.blog-index</span> <span class="nt">a</span><span class="o">[</span><span class="nt">rel</span><span class="o">=</span><span class="s2">&quot;full-article&quot;</span><span class="o">]</span><span class="p">{</span>
</span><span class='line'>      <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">6px</span><span class="p">;</span>
</span><span class='line'>      <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">6px</span><span class="p">;</span>
</span><span class='line'>      <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">6px</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>



]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Front-end job interview questions GLYPH GOES HERE]]></title>
  <link href="http://darcyclarke.me/development/front-end-job-interview-questions/"/>
  
  <updated>2012-02-10T22:39:00+01:00</updated>
  <id>http://melandri.net/2012/02/10/front-end-job-interview-questions</id>
  
  <content type="html"><![CDATA[<p>Probably you&#8217;ll never find a candidate able to answer all this questions but it&#8217;s a good list to test your knowledge on web frontend development.</p>
<a rel="full-article" href="http://melandri.net/2012/02/10/front-end-job-interview-questions/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Validate email address in Javascript GLYPH GOES HERE]]></title>
  <link href="http://stackoverflow.com/questions/46155/validate-email-address-in-javascript"/>
  
  <updated>2012-02-03T14:54:00+01:00</updated>
  <id>http://melandri.net/2012/02/03/validate-email-address-in-javascript</id>
  
  <content type="html"><![CDATA[<p>Every time I need to build a registration form I face the problem of email validation: should it be done client side, and how?<br/>
This <a href="http://stackoverflow.com/" title="StackOverflow">StackOverflow</a> tread is the best resource on the argument I found whith a lot of examples, useful links and thoughts on why you shouldn&#8217;t validate email addresses client side.</p>

<p>Finally, even in discouraged, I used this function and I&#8217;m pretty satisfied.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">validateEmail</span><span class="p">(</span><span class="nx">email</span><span class="p">){</span>
</span><span class='line'>  
</span><span class='line'>  <span class="kd">var</span> <span class="nx">regExp</span> <span class="o">=</span> <span class="err">/^(([^&lt;&gt;()[\]\\.,;:\s@\&quot;]+(\.[^&lt;&gt;()[\]\\.,;:\s@\&quot;]+)*)</span>
</span><span class='line'>               <span class="o">|</span><span class="p">(</span><span class="err">\</span><span class="s2">&quot;.+\&quot;</span><span class="p">))</span><span class="err">@</span><span class="p">((</span><span class="err">\</span><span class="p">[[</span><span class="mi">0</span><span class="o">-</span><span class="mi">9</span><span class="p">]{</span><span class="mi">1</span><span class="p">,</span><span class="mi">3</span><span class="p">}</span><span class="err">\</span><span class="p">.[</span><span class="mi">0</span><span class="o">-</span><span class="mi">9</span><span class="p">]{</span><span class="mi">1</span><span class="p">,</span><span class="mi">3</span><span class="p">}</span><span class="err">\</span><span class="p">.[</span><span class="mi">0</span><span class="o">-</span><span class="mi">9</span><span class="p">]{</span><span class="mi">1</span><span class="p">,</span><span class="mi">3</span><span class="p">}</span><span class="err">\</span><span class="p">.[</span><span class="mi">0</span><span class="o">-</span><span class="mi">9</span><span class="p">]</span>
</span><span class='line'>               <span class="p">{</span><span class="mi">1</span><span class="p">,</span><span class="mi">3</span><span class="p">}</span><span class="err">\</span><span class="p">])</span><span class="o">|</span><span class="p">(([</span><span class="nx">a</span><span class="o">-</span><span class="nx">zA</span><span class="o">-</span><span class="nx">Z</span><span class="err">\</span><span class="o">-</span><span class="mi">0</span><span class="o">-</span><span class="mi">9</span><span class="p">]</span><span class="o">+</span><span class="err">\</span><span class="p">.)</span><span class="o">+</span><span class="p">[</span><span class="nx">a</span><span class="o">-</span><span class="nx">zA</span><span class="o">-</span><span class="nx">Z</span><span class="p">]{</span><span class="mi">2</span><span class="p">,}))</span><span class="nx">$</span><span class="o">/</span><span class="p">;</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">regExp</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">email</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>



<a rel="full-article" href="http://melandri.net/2012/02/03/validate-email-address-in-javascript/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[git - the simple guide GLYPH GOES HERE]]></title>
  <link href="http://rogerdudler.github.com/git-guide/"/>
  
  <updated>2012-02-03T10:40:00+01:00</updated>
  <id>http://melandri.net/2012/02/03/git-the-simple-guide</id>
  
  <content type="html"><![CDATA[<p>Nice and simple multilanguage guide for beginners for getting started with git. The guide content is available also as a <a href="http://rogerdudler.github.com/git-guide/files/git_cheat_sheet.pdf" title="Git Cheat Sheet PDF">printable cheatsheet</a>.</p>
<a rel="full-article" href="http://melandri.net/2012/02/03/git-the-simple-guide/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Make a linked list with Octopress GLYPH GOES HERE]]></title>
  <link href="http://www.candlerblog.com/2012/01/30/octopress-linked-list/"/>
  
  <updated>2012-02-01T11:02:00+01:00</updated>
  <id>http://melandri.net/2012/02/01/make-a-linked-list-with-octopress</id>
  
  <content type="html"><![CDATA[<p>I&#8217;ve just updated my <a href="http://octopress.org" title="Octopress">Octopress</a> setup following this tutorial to setup &#8220;link posts&#8221;. Can&#8217;t wait to see the feature <a href="http://twitter.com/#!/octopress/status/164105113521238018" title="Twitter post">merged</a> in Octopress.</p>
<a rel="full-article" href="http://melandri.net/2012/02/01/make-a-linked-list-with-octopress/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[HTML5 Please GLYPH GOES HERE]]></title>
  <link href="http://html5please.us"/>
  
  <updated>2012-01-23T23:55:00+01:00</updated>
  <id>http://melandri.net/2012/01/23/html5-please</id>
  
  <content type="html"><![CDATA[<blockquote><p>Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.</p></blockquote>



<a rel="full-article" href="http://melandri.net/2012/01/23/html5-please/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Swan Lake]]></title>
  <link href="http://melandri.net/2012/01/15/swan-lake/"/>
  
  <updated>2012-01-15T22:00:00+01:00</updated>
  <id>http://melandri.net/2012/01/15/swan-lake</id>
  
  <content type="html"><![CDATA[<p><a href="http://500px.com/photo/4369024"><img src="http://djlhggipcyllo.cloudfront.net/4369024/2fa0211292e588a2cbfeee42f5bf41e56b0e53c3/4.jpg" alt="Through the courtain by Alessandro Melandri (amelandri)) on 500px.com" border="0" style="margin: 0 0 5px 0;"></a></p>

<p>The Swan Lake performed by <a href="http://www.sofiaballet.com/">Sofia Ballet</a>, end of the show. <em>Teato Alighieri, Ravenna, Italy</em>.</p>
]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Sublime Text 2 Tips and Tricks GLYPH GOES HERE]]></title>
  <link href="http://net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-tips-and-tricks/"/>
  
  <updated>2012-01-14T23:23:00+01:00</updated>
  <id>http://melandri.net/2012/01/14/sublime-text-2-tips-and-tricks</id>
  
  <content type="html"><![CDATA[<p>A nice article by <a href="http://net.tutsplus.com/" title="Nettuts">Nettuts+</a> introducing <a href="http://www.sublimetext.com/2" title="Sublime Text 2">Sublime Text 2</a> and its most noteworty features.</p>

<p>I&#8217;ve been using it for the last two weeks and suddenly became my text editor of choice.</p>
<a rel="full-article" href="http://melandri.net/2012/01/14/sublime-text-2-tips-and-tricks/">Permalink</a>]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Octopress Flickr Aside]]></title>
  <link href="http://melandri.net/2012/01/10/octopress-flickr-aside/"/>
  
  <updated>2012-01-10T23:25:00+01:00</updated>
  <id>http://melandri.net/2012/01/10/octopress-flickr-aside</id>
  
  <content type="html"><![CDATA[<p>After <a href="http://melandri.net/2012/01/08/goodbye-wordpress/" title="Goodbye WordPress, hello Octopress">moving</a> my blog to <a href="http://octopress.org" title="Octopress">Octopress</a> I was looking for a nice way to display my <a href="http://flickr.com/photos/melandri">Flickr photos</a> on these pages, but without using the ugly Flickr default banners.<br/>
Looking around the web I found a nice javascript example on how to get the latest picture of an user using Flickr APIs so I reworked the code and built an aside for Octopress that displays the latest Flickr pictures on the sidebar.</p>

<p>I created a <a href="http://github.com/amelandri/Octopress-Flickr-Aside">repository</a> for the code and after the break you&#8217;ll find the instructions on how to set it up.</p>

<!-- more -->


<p>You&#8217;ll need some information to get started: first of all you need you Flickr username, with that you can obtain your Flickr user id using <a href="http://idgettr.com/">idgettr</a>.</p>

<p>The last step is getting a Flickr API key that can be generated visiting this page: <a href="http://www.flickr.com/services/api/keys/">http://www.flickr.com/services/api/keys/</a>.</p>

<p>When you are done, put these info in the <code>_config.yml</code> file:</p>

<figure class='code'><figcaption><span>_config.yml </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='yaml'><span class='line'><span class="l-Scalar-Plain">flickr_userid</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">0123456789</span>
</span><span class='line'><span class="l-Scalar-Plain">flickr_nickname</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">mynickname</span>
</span><span class='line'><span class="l-Scalar-Plain">flickr_apikey</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">1a2b3c4d5e</span>
</span><span class='line'><span class="l-Scalar-Plain">flickr_count</span><span class="p-Indicator">:</span> <span class="l-Scalar-Plain">5</span>
</span></code></pre></td></tr></table></div></figure>


<p>and then put the flickr.html file inside your Octopress installation in the directory <code>source/_includes/custom/asides</code></p>

<figure class='code'><figcaption><span>flickr.html  </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">{</span> <span class="o">%</span> <span class="k">if</span> <span class="nx">site</span><span class="p">.</span><span class="nx">flickr_userid</span> <span class="o">%</span> <span class="p">}</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">section</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&quot;flickr&quot;</span><span class="o">&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Flickr</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">style</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text/css&quot;</span><span class="o">&gt;</span>
</span><span class='line'>  <span class="err">#</span><span class="nx">flickrList</span> <span class="nx">li</span><span class="p">{</span> <span class="nx">text</span><span class="o">-</span><span class="nx">align</span><span class="o">:</span> <span class="nx">center</span><span class="p">;</span> <span class="p">}</span>
</span><span class='line'><span class="o">&lt;</span><span class="err">/style&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">ul</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;flickrList&quot;</span><span class="o">&gt;&lt;</span><span class="err">/ul&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="o">&lt;</span><span class="nx">script</span> <span class="nx">lang</span><span class="o">=</span><span class="s2">&quot;Javascript&quot;</span><span class="o">&gt;</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">flickrNickname</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">function</span> <span class="nx">jsonFlickrApi</span><span class="p">(</span><span class="nx">rsp</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="nx">rsp</span><span class="p">.</span><span class="nx">stat</span> <span class="o">!=</span> <span class="s2">&quot;ok&quot;</span><span class="p">){</span>
</span><span class='line'>          <span class="k">return</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">rsp</span><span class="p">.</span><span class="nx">photos</span><span class="p">.</span><span class="nx">photo</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  
</span><span class='line'>          <span class="kd">var</span> <span class="nx">photo</span>    <span class="o">=</span> <span class="nx">rsp</span><span class="p">.</span><span class="nx">photos</span><span class="p">.</span><span class="nx">photo</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
</span><span class='line'>          <span class="kd">var</span> <span class="nx">imgUrl</span>   <span class="o">=</span> <span class="s1">&#39;http://farm&#39;</span><span class="o">+</span> <span class="nx">photo</span><span class="p">.</span><span class="nx">farm</span> <span class="o">+</span><span class="s1">&#39;.static.flickr.com/&#39;</span><span class="o">+</span> <span class="nx">photo</span><span class="p">.</span><span class="nx">server</span> <span class="o">+</span><span class="s1">&#39;/&#39;</span><span class="o">+</span> <span class="nx">photo</span><span class="p">.</span><span class="nx">id</span> <span class="o">+</span><span class="s1">&#39;_&#39;</span><span class="o">+</span> <span class="nx">photo</span><span class="p">.</span><span class="nx">secret</span> <span class="o">+</span><span class="s1">&#39;_m.jpg&#39;</span><span class="p">;</span>
</span><span class='line'>          <span class="kd">var</span> <span class="nx">photoUrl</span> <span class="o">=</span> <span class="s1">&#39;http://www.flickr.com/photos/&#39;</span><span class="o">+</span> <span class="nx">flickrNickname</span> <span class="o">+</span><span class="s1">&#39;/&#39;</span><span class="o">+</span> <span class="nx">photo</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>          <span class="nx">list</span> <span class="o">+=</span> <span class="s1">&#39;&lt;li id=&quot;flickrItem_&#39;</span><span class="o">+</span><span class="nx">i</span><span class="o">+</span><span class="s1">&#39;&quot;&gt;&lt;a href=&quot;&#39;</span><span class="o">+</span> <span class="nx">photoUrl</span> <span class="o">+</span><span class="s1">&#39;&quot; title=&quot;&#39;</span><span class="o">+</span> <span class="nx">photo</span><span class="p">.</span><span class="nx">title</span> <span class="o">+</span><span class="s1">&#39;&quot;&gt;&lt;img alt=&quot;&#39;</span><span class="o">+</span> <span class="nx">photo</span><span class="p">.</span><span class="nx">title</span> <span class="o">+</span><span class="s1">&#39;&quot; src=&quot;&#39;</span><span class="o">+</span> <span class="nx">imgUrl</span> <span class="o">+</span><span class="s1">&#39;&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&#39;</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>  
</span><span class='line'>  <span class="nx">list</span> <span class="o">+=</span> <span class="s1">&#39;&lt;li class=&quot;flickrLink&quot;&gt;&lt;a href=&quot;http://www.flickr.com/photos/&#39;</span><span class="o">+</span> <span class="nx">flickrNickname</span> <span class="o">+</span> <span class="s1">&#39;&quot;&gt;Flickr page&lt;/a&gt;&lt;/li&gt;&#39;</span><span class="p">;</span>
</span><span class='line'>  
</span><span class='line'>  <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;flickrList&#39;</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">list</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="o">&lt;</span><span class="err">/script&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">script</span> <span class="nx">lang</span><span class="o">=</span><span class="s2">&quot;Javascript&quot;</span> <span class="nx">src</span><span class="o">=</span><span class="s2">&quot;http://api.flickr.com/services/rest/?format=json&amp;method=flickr.photos.search&amp;user_id=&amp;per_page=&amp;api_key=&quot;</span><span class="o">&gt;&lt;</span><span class="err">/script&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="o">&lt;</span><span class="err">/section&gt;</span>
</span><span class='line'><span class="p">{</span> <span class="o">%</span> <span class="nx">endif</span> <span class="o">%</span> <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now enable the aside in your _config.yml and you are done</p>

<figure class='code'><figcaption><span>_config.yml </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='yaml'><span class='line'><span class="l-Scalar-Plain">default_asides</span><span class="p-Indicator">:</span> <span class="p-Indicator">[</span><span class="nv">asides/recent_posts.html</span><span class="p-Indicator">,</span>
</span><span class='line'><span class="err">                </span> <span class="nv">asides/twitter.html</span><span class="p-Indicator">,</span>
</span><span class='line'><span class="err">                </span> <span class="nv">asides/github.html</span><span class="p-Indicator">,</span>
</span><span class='line'><span class="err">                </span> <span class="nv">asides/delicious.html</span><span class="p-Indicator">,</span>
</span><span class='line'><span class="err">                </span> <span class="nv">asides/pinboard.html</span><span class="p-Indicator">,</span>
</span><span class='line'><span class="err">                </span> <span class="nv">asides/googleplus.html</span><span class="p-Indicator">,</span>
</span><span class='line'><span class="err">                </span> <span class="nv">custom/asides/flickr.html</span><span class="p-Indicator">]</span>
</span></code></pre></td></tr></table></div></figure>


<p>For a better result you should adjust the sidebar size to match the Flickr foto size. For example I set my sidebar size to <code>286px</code></p>

<figure class='code'><figcaption><span>sass/custom/_layout.css </span></figcaption>
 <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="err">$</span><span class="nt">sidebar-width-medium</span><span class="o">:</span> <span class="nt">286px</span><span class="o">;</span>
</span><span class='line'><span class="err">$</span><span class="nt">sidebar-width-wide</span><span class="o">:</span> <span class="nt">286px</span><span class="o">;</span>
</span></code></pre></td></tr></table></div></figure>



]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Goodbye WordPress, hello Octopress]]></title>
  <link href="http://melandri.net/2012/01/08/goodbye-wordpress/"/>
  
  <updated>2012-01-08T15:45:00+01:00</updated>
  <id>http://melandri.net/2012/01/08/goodbye-wordpress</id>
  
  <content type="html"><![CDATA[<p>This is my first post published using <a href="http://octopress.org" title="Octopress Home Page">Octopress</a> after several years of <a href="http://www.wordpress.org" title="WordPress Home Page">WordPress</a> and I&#8217;d like to share the reasons why I choosed to change blogging platform and switch to a statically generated site.</p>

<p>Yes, because what you are reading is pure and static old-school HTML, generated by <a href="http://octopress.org" title="Octopress Home Page">Octopress</a> on my iMac. And there&#8217;s more: everything is served by <a href="http://www.github.com" title="GitHub">GitHub</a> trought the <a href="http://pages.github.com/" title="GitHub pages">Pages</a> feature, completely free, but I&#8217;ll talk about this later.</p>

<h2>Simplicity</h2>

<p><a href="http://octopress.org" title="Octopress Home Page">Octopress</a> is a framework built upon <a href="http://github.com/mojombo/jekyll">Jekyll</a>, the Ruby static site generator that powers GitHub Pages.</p>

<p>Jekyll takes a content directory, parses all articles and pages through a Markdown converter and generates a static website that can be served with almost anything.</p>

<p>Octopress leverages all the power of Jekyll adding a great HTML5 template, mobile ready, and a lot of features like archives, an xml sitemap, code highlighting, external services integration (Twitter, Github, Google+), and much much more.</p>

<p>This solution makes your website really <strong>fast</strong> because there&#8217;s no dynamic code that runs on the server and no databases.</p>

<p>Now I can write articles using MarkDown and the beautiful <a href="http://www.iawriter.com/" title="iA Writer">iA Writer</a>. Furthermore I can easily version my articles on GitHub and backup them using Dropbox.</p>

<h2>Reduced costs</h2>

<p>One of my new year resolutions is to reduce costs for online services like webhosting, image hosting, backups, etc.</p>

<p>Having static html pages, I can host them on <a href="http://www.github.com" title="GitHub">GitHub</a> for free, while now I&#8217;m paying nearly 200$ every year for a linux/php/mysql hosting.<br/>
Maybe someday GitHub will start charging money for the hosting service, but for now I think is the best I can get.</p>

<p>Obviously I can&#8217;t host media files or archive on GitHub so I&#8217;ll use Flickr for image hosting and <a href="http://aws.amazon.com/s3/">Amazon S3</a> for other files.</p>
]]></content>
  
</entry>

<entry>
  
  <title type="html"><![CDATA[Multiple categories filter in WordPress search]]></title>
  <link href="http://melandri.net/2011/12/31/multiple-categories-filter-in-wordpress-search/"/>
  
  <updated>2011-12-31T13:26:24+01:00</updated>
  <id>http://melandri.net/2011/12/31/multiple-categories-filter-in-wordpress-search</id>
  
  <content type="html"><![CDATA[<p>More than two years ago I wrote the post <a href="http://melandri.net/2009/08/05/add-a-category-filter-to-wordpress-search-form/">Add a category filter to WordPress search form</a> to explain how I added a category filter to the WordPress search form using WordPress API and some custom code and one of the most asked question was how to add a multiple categories filter to the search form, so here it is, a tutorial that covers all the steps to add multiple category filter to WordPress search.</p>

<!-- more -->


<p>If you are impatient and want to see the final result, this is a sceenshot of the search page.</p>

<p><img src="http://s3.melandri.net/alessandro/wpsearchmultiplecategoryfilters.png"></p>

<h2>Getting the categories list</h2>

<p>In the previous post I used the standard method <a href="http://codex.wordpress.org/Template_Tags/wp_dropdown_categories">wp_dropdown_categories</a> to get the categories list, now we need to generate a checkbox list instead of a dropdown list so we are going to build a custom method in the functions.php file:</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
</pre></td><td class='code'><pre><code class='php'><span class='line'><span class="x">function am_dropdown_categories($args){</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">  // Get all the categories using WP API</span>
</span><span class='line'><span class="x">  $categories = get_categories( $args );</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">  // Build the select code</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">  $select = &#39;&lt;ul id=&quot;catSearchFilters&quot;&gt;&#39;;</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">  foreach ($categories as $category) { </span>
</span><span class='line'><span class="x">    $select .= &#39;&lt;li&gt;&lt;input id=&quot;filterCat_&#39;.$category-&amp;gt;cat_ID.&#39;&quot; type=&quot;checkbox&quot; name=&quot;filterCat&quot; value=&quot;&#39;.$category-&gt;cat_ID.&#39;&quot;&#39;; </span>
</span><span class='line'><span class="x">    $select .= &#39;&lt;span&gt;&#39;.$category-&amp;gt;cat_name.&#39;&lt;/span&gt;&lt;/li&gt;&#39;;</span>
</span><span class='line'><span class="x">  } </span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">  $select .= &#39;&lt;/ul&gt;&#39;;</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">  // Output the select code to the page</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">  echo($select);</span>
</span><span class='line'><span class="x">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>This method generates a list of categories with a checkbox for every category. The value of the checkbox is the category ID. Now we need to customize the search.php template adding a call to the function <code>am_dropdown_categories</code>:</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">&quot;adv_searchform&quot;</span> <span class="na">action=</span><span class="s">&quot;&lt;?php echo home_url( &#39;/&#39; ); ?&gt;&quot;</span> <span class="na">method=</span><span class="s">&quot;get&quot;</span> <span class="na">name=</span><span class="s">&quot;adv_searchform&quot;</span> <span class="na">onsubmit=</span><span class="s">&quot;return manageMultipleCategoriesSearch()&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>  Search: <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">&quot;adv_s&quot;</span> <span class="na">class=</span><span class="s">&quot;input input_large&quot;</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">name=</span><span class="s">&quot;s&quot;</span> <span class="na">value=</span><span class="s">&quot;&lt;?php the_search_query(); ?&gt;&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;h3&gt;</span>Category filter:<span class="nt">&lt;/h3&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;clear&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
</span><span class='line'>  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;hidden&quot;</span> <span class="na">name=</span><span class="s">&quot;cat&quot;</span> <span class="na">value=</span><span class="s">&quot;&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>  <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">&quot;button&quot;</span> <span class="na">type=</span><span class="s">&quot;submit&quot;</span> <span class="na">name=</span><span class="s">&quot;Search&quot;</span> <span class="na">value=</span><span class="s">&quot;Search&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'><span class="nt">&lt;/form&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Notice that the checkboxes name is <code>filterCat</code> and that there&#8217;s an hidden <code>cat</code> field: this field is used by WordPress to apply the search category filter and accepts multiples values using the sintax <code>cat=1,2,3</code> so we are going to add a Javascript function that populates the <code>cat</code> field using the proper formatting.</p>

<h2>Manage the search form</h2>

<p>This JavaScript function is called before submitting the form and sets the cat field value concatenating all the selected checkboxes values into a single string. This function must be included in the page displayng the search form.</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">manageMultipleCategoriesSearch</span><span class="p">(){</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">selectedCats</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">isFirst</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nb">document</span><span class="p">.</span><span class="nx">adv_searchform</span><span class="p">.</span><span class="nx">filterCat</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">adv_searchform</span><span class="p">.</span><span class="nx">filterCat</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">checked</span> <span class="o">==</span> <span class="kc">true</span><span class="p">){</span>
</span><span class='line'>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">isFirst</span><span class="p">)</span>
</span><span class='line'>      <span class="nx">selectedCats</span> <span class="o">+=</span> <span class="s1">&#39;,&#39;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>      <span class="nx">selectedCats</span> <span class="o">+=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">adv_searchform</span><span class="p">.</span><span class="nx">filterCat</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">value</span><span class="p">;</span>
</span><span class='line'>      <span class="nx">isFirst</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="nb">document</span><span class="p">.</span><span class="nx">adv_searchform</span><span class="p">.</span><span class="nx">cat</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">selectedCats</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>The filter is now fully functional, but we need to customize the search result page to list the categories</p>

<h2>Display results</h2>

<p>Just add this code to the functions.php file</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
</pre></td><td class='code'><pre><code class='php'><span class='line'><span class="x">function getCatSearchFilter($pre,$post){</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">    $category = &#39;&#39;;</span>
</span><span class='line'><span class="x">    $catId = htmlspecialchars($_GET[&quot;cat&quot;]);</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">    $token = strtok($catId,&quot;,&quot;);</span>
</span><span class='line'><span class="x">    $category .= get_cat_name($token);</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">    while($token){</span>
</span><span class='line'><span class="x">        $token = strtok(&quot;,&quot;);</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">    if ($token != &#39;0&#39;)</span>
</span><span class='line'><span class="x">        $category .= &#39;, &#39;.get_cat_name($token);</span>
</span><span class='line'><span class="x">    }</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">      if (strlen($category)&amp;gt;0)</span>
</span><span class='line'><span class="x">          $category = $pre.$category.$post;</span>
</span><span class='line'><span class="x"> </span>
</span><span class='line'><span class="x">      return $category;</span>
</span><span class='line'><span class="x">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>and call it in the search results page:</p>

<figure class='code'> <div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='php'><span class='line'><span class="x">Search results for </span><span class="cp">&lt;?php</span> <span class="nx">the_search_query</span><span class="p">();</span> <span class="cp">?&gt;</span><span class="x"> </span>
</span><span class='line'><span class="cp">&lt;?php</span> <span class="k">echo</span><span class="p">(</span><span class="nx">getCatSearchFilter</span><span class="p">(</span><span class="s1">&#39; in category &lt;span&gt;&#39;</span><span class="p">,</span><span class="s1">&#39;&lt;/span&gt;&#39;</span><span class="p">));</span><span class="cp">?&gt;</span><span class="x"></span>
</span></code></pre></td></tr></table></div></figure>


<p>That&#8217;s it.</p>
]]></content>
  
</entry>

</feed>

