<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:content="http://purl.org/rss/1.0/modules/content/">
<channel>
<title>jstsch.com</title>
<link>http://jstsch.com/</link>
<atom:link href="http://jstsch.com/rss" rel="self" type="application/rss+xml" />
<description>jstsch.com</description>
<language>en</language>
<copyright>Copyright 2012, Joost Schuttelaar</copyright>
<pubDate>Sun, 22 Jan 2012 00:56:42 +0100</pubDate>

		<item>
	<title><![CDATA[Using Apache to serve a SSH-tunneled website]]></title>
	<link>http://jstsch.com/post/using_apache_to_serve_a_website_tunneled_to_over_ssh</link>
	<guid isPermaLink="true">http://jstsch.com/post/using_apache_to_serve_a_website_tunneled_to_over_ssh</guid>
	<description>At the office we’re using an internal development server, which also hosts all our git repositories. We’re using the small and awesome ViewGit (http://viewgit.fealdia.org/) repository browser to get an insight in the latest commits.</description>
	<content:encoded><![CDATA[	<p><img src="http://jstsch.com/images/content/feather.jpg" width="140" height="140" alt="" class="left" />At the office we&#8217;re using an internal development server, which also hosts all our git repositories. We&#8217;re using the small and awesome <a href="http://viewgit.fealdia.org/">ViewGit</a> repository browser to get an insight in the latest commits.</p>

	<p>However, our development server is only accessible at the office, not at home over the web, unless you set up an <span class="caps">SSH</span> tunnel. This is a little bit cumbersome to do every time you just want a quick peek, so we used a simple solution to make ViewGit accessible over the web. Behind some <span class="caps">HTTP</span> Basic authentication of course.</p>

	<p>First, login to your public webserver and set up a tunnel to your development webserver using <span class="caps">SSH</span>. I recommend setting up key-based authentication, so you don&#8217;t have to enter a password and you can easily daemonize it &#8211; the tunnel will disconnect every once in a while.</p>

<pre><code>ssh -fNL 8666:sitename.example.local:80 username@dev.example.com</code></pre>

	<p>Replace <code>sitename.example.local</code> with your local web site hostname. Replace <code>username@dev.example.com</code> with the <span class="caps">SSH</span> login you would normally use.</p>

	<p>The second step is to create a new vhost in Apache on your public webserver and set that hostname up as a tunnel. Let&#8217;s call it <code>git.dev.example.com</code>. Do this in the same way as you would add a regular domain to your web server. Then add a few extra lines to the vhost. In DirectAdmin you can easily add this in the admin panel under <em>Custom <span class="caps">HTTPD</span> Configurations</em>:</p>

<pre><code>ProxyPass / http://localhost:8666/
RequestHeader set Host &quot;sitename.example.local&quot;
ProxyPreserveHost on
&lt;Location /&gt;
	AuthUserFile /home/example/domains/git.dev.example.com/public_html/.htpasswd
	AuthName &quot;ViewGit&quot;
	AuthType Basic
	Require valid-user
&lt;/Location&gt;</code></pre>

	<p>The first three lines set up the reverse proxy and direct the web requests to the right vhost on the tunneled development web server. The last six lines set up <span class="caps">HTTP</span> authentication. Using a <code>.htaccess</code> in your document root will not work, because of the <code>ProxyPassReverse</code> directive.</p>

	<p>Enjoy your publicly accessible development site! :)</p>]]></content:encoded>

	<pubDate>Sun, 22 Jan 2012 00:56:42 +0100</pubDate>
	</item>

		<item>
	<title><![CDATA[Go dark to fight SOPA with a simple .htaccess rewriterule]]></title>
	<link>http://jstsch.com/post/go_dark_to_fight_sopa_with_a_simple_htaccess_rewriterule</link>
	<guid isPermaLink="true">http://jstsch.com/post/go_dark_to_fight_sopa_with_a_simple_htaccess_rewriterule</guid>
	<description>Simple piece of code to put in your .htaccess if you want to join in the protest against SOPA (http://en.wikipedia.org/wiki/Stop_Online_Piracy_Act):</description>
	<content:encoded><![CDATA[	<p><img src="http://jstsch.com/images/content/sopa.png" width="140" height="140" alt="" class="left" />Simple piece of code to put in your <code>.htaccess</code> if you want to join in the protest against <a href="http://en.wikipedia.org/wiki/Stop_Online_Piracy_Act"><span class="caps">SOPA</span></a>:</p>

<pre><code># RewriteEngine on (enable if you don&#39;t have it yet)
RewriteCond %{TIME_YEAR}%{TIME_MON}%{TIME_DAY} ^20120118$
RewriteCond %{TIME_HOUR} &gt;7
RewriteCond %{TIME_HOUR} &lt;20
RewriteRule ^(.*)$ http://reddit.com/r/sopa [L]
</code></pre>

	<p>This will redirect any request, to your protest site of choice on Jan 18th, between 08:00 and 20:00 (local webserver time). Assuming Apache of course!</p>]]></content:encoded>

	<pubDate>Sun, 15 Jan 2012 13:59:15 +0100</pubDate>
	</item>

		<item>
	<title><![CDATA[Permanently kill IE&#039;s compatibility view &ndash; server side]]></title>
	<link>http://jstsch.com/post/permanently_kill_ies_compatibility_view_server_side</link>
	<guid isPermaLink="true">http://jstsch.com/post/permanently_kill_ies_compatibility_view_server_side</guid>
	<description>A small moment of triumph today. After a company-wide rollout of IE9, some internal apps seemed to break. What actually was happening that people were pushing the Compatibility View (http://en.wikipedia.org/wiki/Internet_Explorer_8#Compatibility_mode) button for some reason.</description>
	<content:encoded><![CDATA[	<p><img src="http://jstsch.com/images/content/kill_compatibility_view.jpg" width="140" height="140" alt="" class="left" /> A small moment of triumph today. After a company-wide rollout of IE9, some internal apps seemed to break. What actually was happening that people were pushing the <a href="http://en.wikipedia.org/wiki/Internet_Explorer_8#Compatibility_mode">Compatibility View</a> button for some reason.</p>

	<p>Fretting over having to update dozens of sites and apps with a set of meta tags to prevent Compatibility View, a better solution appeared. Why not serve this meta tag as a <span class="caps">HTTP</span> header? It works! Simply add the following lines to your Apache configuration (for instance <code>apache2.conf</code> or <code>httpd.conf</code>) and you&#8217;ll be permanently freed from users triggering IE7-mode on you&#8230;</p>

<pre><code>&lt;IfModule mod_setenvif.c&gt;
  &lt;IfModule mod_headers.c&gt;
    BrowserMatch MSIE ie
    Header add X-UA-Compatible &quot;IE=Edge,chrome=1&quot; env=ie
  &lt;/IfModule&gt;
&lt;/IfModule&gt;
</code></pre>

	<p>Make sure you have both modules installed and enabled. On Ubuntu simply fire off <code>a2enmod headers</code> to enable the headers module. As an added bonus, the above headers will trigger Google Chrome Frame as well, if available&#8230;</p>]]></content:encoded>

	<pubDate>Thu, 29 Sep 2011 22:37:31 +0200</pubDate>
	</item>

		<item>
	<title><![CDATA[Improve OSX internal audio output quality]]></title>
	<link>http://jstsch.com/post/improve_osx_internal_audio_output_quality</link>
	<guid isPermaLink="true">http://jstsch.com/post/improve_osx_internal_audio_output_quality</guid>
	<description>For years something has been nagging me on my machine. When playing back audio at low levels from the internal audio device, for instance on headphones (http://www.apple.com/ipod/in-ear-headphones/), I could distinctly hear a lack of dithering (http://en.wikipedia.org/wiki/Dither#Digital_audio) on the volume control. Especially noticeable on fade-outs, where all these nice high aliasi…</description>
	<content:encoded><![CDATA[	<p><img src="http://jstsch.com/images/content/audio_midi_setup.jpg" width="140" height="140" alt="" class="left isolatedObject" />For years something has been nagging me on my machine. When playing back audio at low levels from the internal audio device, for instance on <a href="http://www.apple.com/ipod/in-ear-headphones/">headphones</a>, I could distinctly hear a lack of <a href="http://en.wikipedia.org/wiki/Dither#Digital_audio">dithering</a> on the volume control. Especially noticeable on fade-outs, where all these nice high aliasing frequencies were introduced.</p>

	<p>I couldn&#8217;t believe that Apple, a company focused on details, would have such an oversight in their audio drivers. Volume control without dithering? That&#8217;s crazy. But it was there, really.</p>

	<p>Lo and behold, one day I check into <a href="http://en.wikipedia.org/wiki/Audio_MIDI_Setup">Audio <span class="caps">MIDI</span> Setup</a> and find out that my audio device is set to <em>2ch-24bit Integer</em>, and that there is also a setting for 32bit Float. Why is it there, and does it make a difference? It turns out, that at 32bit Float the sound is dithered nicely when lowering the volume. Hurray!</p>

	<p>But why is it set at this non-native setting at my machine? I guess it&#8217;s because over the years I never reinstalled OS X when getting a new machine. I always used the migration tools (working surprisingly well I might add), and never did a clean install. It must have taken this setting with me from the days of my old PowerBook, Core2Duo Alu MacBook Pro, into this Unibody one. Different sound interface, same setting, different sound.</p>

	<p><em>Another mystery solved. Hope this post helps other people, anal about sound as me!</em></p>]]></content:encoded>

	<pubDate>Sat, 13 Aug 2011 15:40:30 +0200</pubDate>
	</item>

		<item>
	<title><![CDATA[Properly hide e-mail addresses in Mailman archives]]></title>
	<link>http://jstsch.com/post/properly_hide_e-mail_addresses_in_mailman_archives</link>
	<guid isPermaLink="true">http://jstsch.com/post/properly_hide_e-mail_addresses_in_mailman_archives</guid>
	<description>The music-bar mailing lists (http://lists.music-bar.org/) have been running on Mailman (http://list.org/) for ages. It has a configuration feature to obfuscate e-mail addresses in the mailing list archives, but that just transforms e-mail addresses into yourname AT domain DOT com type of addresses. Not very effective in the year 2011…</description>
	<content:encoded><![CDATA[	<p>The <a href="http://lists.music-bar.org/">music-bar mailing lists</a> have been running on <a href="http://list.org/">Mailman</a> for ages. It has a configuration feature to obfuscate e-mail addresses in the mailing list archives, but that just transforms e-mail addresses into <code>yourname AT domain DOT com</code> type of addresses. Not very effective in the year 2011&#8230;</p>

	<p>A quick patch-up solves things! Find <code>HyperArch.py</code> in your Mailman binaries dir and find the section which contains <code>ARCHIVER_OBSCURES_EMAILADDRS</code>. Change the try block into something like this:</p>

<pre><code>if self.author == self.email:
    self.author = self.email = "EMAIL HIDDEN"
else:
    self.email = "EMAIL HIDDEN"
</code></pre>

	<p>Easy-peasy. Recompile the .py file: <code>py_compilefiles HyperArch.py</code>. Then regenerate your list archives: <code>YOURMAILMANDIR/bin/arch YOURLISTNAME</code>. Done!</p>

	<p>Be careful with <code>apt-get update</code>-ing your machine though&#8230; you will have to repatch.</p>]]></content:encoded>

	<pubDate>Wed, 10 Aug 2011 01:06:15 +0200</pubDate>
	</item>

		<item>
	<title><![CDATA[Winamp style jQuery marquee]]></title>
	<link>http://jstsch.com/post/winamp_style_jquery_marquee</link>
	<guid isPermaLink="true">http://jstsch.com/post/winamp_style_jquery_marquee</guid>
	<description>Hah! Another old bit which might be fun. I was prototyping a new RingtoneADay (http://www.aringtoneaday.com/) site (abandoned) :) and needed a fixed space to show a title. When the title is too long, it doesn’t fit. Winamp, back in the day solved this by scrolling the title back and forth. I find this much more attractive than the standard ticker tape effect, so I rolled a tiny jQuery plugin for it.</description>
	<content:encoded><![CDATA[	<p>Hah! Another old bit which might be fun. I was prototyping a new <a href="http://www.aringtoneaday.com/">RingtoneADay</a> site (abandoned) :) and needed a fixed space to show a title. When the title is too long, it doesn&#8217;t fit. Winamp, back in the day solved this by scrolling the title back and forth. I find this much more attractive than the standard ticker tape effect, so I rolled a tiny jQuery plugin for it.</p>

	<p><iframe src="/code/marquee" width="480" height="40" frameborder="0"></iframe></p>

	<p>Get the code: <a href="/code/marquee">jQuery Winamp-style marquee</a>.</p>

	<p><em>Now it would be cool to do the same plugin, but then using <span class="caps">CSS</span> animation for hardware acceleration!</em></p>]]></content:encoded>

	<pubDate>Thu, 07 Jul 2011 01:43:09 +0200</pubDate>
	</item>

		<item>
	<title><![CDATA[Color mixer]]></title>
	<link>http://jstsch.com/post/color_mixer</link>
	<guid isPermaLink="true">http://jstsch.com/post/color_mixer</guid>
	<description>Tonight whilst cleaning up my machine, getting it ready for the big SSD-switch, I found a fun bit of old hacked-up code. Thought it would be nice to share. It’s a color mixer (Webkit only probably), which takes two colors, mixes them using a few blend modes and then allows you to create a gradient through those colors and a selected color. Using that you get a nice way to pick a color scheme using two base colors.</description>
	<content:encoded><![CDATA[	<p>Tonight whilst cleaning up my machine, getting it ready for the big <span class="caps">SSD</span>-switch, I found a fun bit of old hacked-up code. Thought it would be nice to share. It&#8217;s a color mixer (Webkit only probably), which takes two colors, mixes them using a few blend modes and then allows you to create a gradient through those colors and a selected color. Using that you get a nice way to pick a color scheme using two base colors.</p>

	<p><a href="/code/colormap"><img src="http://jstsch.com/images/content/color_mixer_shot.jpg" width="480" height="279" alt="Color mixer screenshot" /></a></p>

	<p>Take a look at the <a href="/code/colormap">color mixer</a>!</p>]]></content:encoded>

	<pubDate>Thu, 07 Jul 2011 00:45:28 +0200</pubDate>
	</item>

		<item>
	<title><![CDATA[PHP: Highlighting words in a string]]></title>
	<link>http://jstsch.com/post/php_highlighting_words_in_a_string</link>
	<guid isPermaLink="true">http://jstsch.com/post/php_highlighting_words_in_a_string</guid>
	<description>Seemingly simple things are often hard. How about a function which takes a text, an array of keywords and a max length, and outputs a highlighted string up to that max length? The highlighted string should be in the middle of the returned segment, of course.</description>
	<content:encoded><![CDATA[	<p><img src="http://jstsch.com/images/content/highlight.jpg" width="140" height="140" alt="" class="left" /> Seemingly simple things are often hard. How about a function which takes a text, an array of keywords and a max length, and outputs a highlighted string up to that max length? The highlighted string should be in the middle of the returned segment, of course.</p>

	<p>In <span class="caps">PHP</span>, it becomes a bit of a mess because of its multibyte Unicode handling. I noticed that most frameworks don&#8217;t take care of our fâncy European characters correctly, so I had to roll my own.</p>

	<p>The following set of functions handle it, although mb_ereg will probably be deprecated soon. Bonus points for who converts this to use preg (with the /u modifier). Back when I wrote this most <span class="caps">PHP</span> installs weren&#8217;t precompiled with the correct <span class="caps">PCRE</span> lib.</p>

	<p>Hope it helps someone!</p>

	<p><a href="/downloads/highlight.phps">highlight.php</a></p>]]></content:encoded>

	<pubDate>Mon, 07 Mar 2011 23:24:08 +0100</pubDate>
	</item>

		<item>
	<title><![CDATA[Simple Indian chickpea and spinach curry]]></title>
	<link>http://jstsch.com/post/simple_indian_chickpea_and_spinach_curry</link>
	<guid isPermaLink="true">http://jstsch.com/post/simple_indian_chickpea_and_spinach_curry</guid>
	<description>Made a very tasty curry last week. Healthy and veggie. Here is the recipe!</description>
	<content:encoded><![CDATA[	<p>Made a very tasty curry last week. Healthy and veggie. Here is the recipe!</p>

	<p><img src="http://jstsch.com/images/content/chickpea.jpg" width="480" height="40" alt="Chickpea" /></p>

	<h3>Ingredients (serves 2)</h3>

	<ul>
		<li>Whole spices: 1 tbsp. coriander seeds, 1 tbsp. cumin seeds, 1 tbsp. dried (birds-eye) chili peppers, 2 cloves, 6 cardemom seeds, touch of mace (optional), a few curry leaves (optional)</li>
		<li>Butter (real)</li>
		<li>Two onions, chopped</li>
		<li>Tin of chopped tomatoes (400ml)</li>
		<li>Half a garlic, chopped</li>
		<li>Tin of chickpeas (400g)</li>
		<li>100 ml. of yoghurt</li>
		<li>200 grams of washed fresh spinach</li>
	</ul>

	<h3>Preperation</h3>

	<ol>
		<li>Gently roast the coriander, cumin and chilies in a skillet on low fire. They are done when they become aromatic &#8211; but be sure to not overroast them, you&#8217;ll mostly get bitter tones out of them then. Cumin seeds tend to need a shorter time to toast so I add them a bit later. When done, grind them all up finely in a mortar and set aside. Put it through a sieve as needed to remove course bits.</li>
		<li>Chop the onions and sauté them gently in a generous amount of (real) butter for about 5-10 minutes. Low heat. I use a cast iron <a href="http://www.amazon.co.uk/dp/B00008WFG0?tag=jstsch-21">Le Creuset round pot</a> (love it)</li>
		<li>Stir in the tomatoes, remaining whole spices and chopped garlic, raise the fire a bit and make it simmer.</li>
		<li>Add ground spices, stir, then add chickpeas and simmer for 5 minutes.</li>
		<li>Lower the heat and pour in the yoghurt. Bring to a simmer. Add salt to taste.</li>
		<li>Stir in spinach leaves. They&#8217;ll rapidly turn deep green.</li>
	</ol>

	<p><img src="http://jstsch.com/images/content/spinach.jpg" width="480" height="40" alt="Spinach" /></p>

	<p>Serve with rice and enjoy!</p>]]></content:encoded>

	<pubDate>Sun, 06 Mar 2011 16:20:47 +0100</pubDate>
	</item>

		<item>
	<title><![CDATA[Watch NASA TV using HTML 5 video]]></title>
	<link>http://jstsch.com/post/watch_nasa_tv_using_html_5_video</link>
	<guid isPermaLink="true">http://jstsch.com/post/watch_nasa_tv_using_html_5_video</guid>
	<description>I quite enjoy having NASA TV on in the background whilst coding on a drowsy Saturday afternoon. Unfortunately, their default player (http://www.nasa.gov/multimedia/nasatv/index.html) uses WMV9 which is less-than ideal. There is also a Quicktime H.264 Stream, but it’s only 320*240…</description>
	<content:encoded><![CDATA[	<p>I quite enjoy having <span class="caps">NASA</span> TV on in the background whilst coding on a drowsy Saturday afternoon. Unfortunately, their <a href="http://www.nasa.gov/multimedia/nasatv/index.html">default player</a> uses WMV9 which is less-than ideal. There is also a Quicktime H.264 Stream, but it&#8217;s only 320*240&#8230;</p>

	<p>Luckily <span class="caps">NASA</span> also provides a feed made for iPad &amp; iPhone users. If you encapsulate that in a a HTML5 <code>&lt;video&gt;</code> tag you get a great experience (at least on Safari/Mac). Check it out &#8211; and enjoy. Combine with Soma FM&#8217;s <a href="http://somafm.com/play/missioncontrol">Mission Control</a> for maximum spaciness!</p>

  <video width="480" height="270" src="http://liveips.nasa.gov.edgesuite.net/msfc/Wifi.m3u8" controls="controls "></video>]]></content:encoded>

	<pubDate>Sat, 26 Feb 2011 16:34:41 +0100</pubDate>
	</item>


</channel>
</rss>
