Day Barr's bloghttps://www.daybarr.com/blog/2014-04-29T21:08:47+01:00Latest blog posts from Day BarrCopyright (c) 2005 - 2024, Day BarrDisable suspend while using vpn on Ubuntu
2014-04-29T21:08:47+01:00http://www.daybarr.coma90f27ffd7d19ae85017640b4fd842a1<p>My PC is set up to save power quite aggressively, by suspending after only 5 minutes of inactivity. This is fine most of the time, when the PC is periodically used by the family to quickly read email or check into facebook. But this causes me problems when working from home.</p>
<p>I use OpenVPN to connect to the office and run screen sessions and the occasional X11-forwarded GUI, and the suspend operation causes OpenVPN to be disconnected once I resume. This means that every time I have a coffee break, or try to whiteboard something, I get back to the computer and have to re-establish the ssh session, resume the screen session and restart any X11 apps I might have been using. It's at this point that I remember to change the power saving options to disable the suspend, but then I forget to re-enable it once I've finished working for the day.</p>
<p>To fix this without me having to remember to do anything special, we can automatically prevent the suspend (or hibernation) of the PC when the <code>openvpn</code> client is running.</p>
<p>As root, create a new file called <code>/usr/lib/pm-utils/sleep.d/000vpn-disable-sleep</code>, give it the contents shown below and make it executable.</p>
<pre>sudo vim /usr/lib/pm-utils/sleep.d/000vpn-disable-sleep</pre>
<pre class="brush: shell">
#!/bin/sh
# Prevent machine from suspending or hibernating when openvpn is running.
case "$1" in
suspend|hibernate)
/bin/pidof openvpn && exit 1
;;
esac
exit 0
</pre>
<pre>sudo chmod +x /usr/lib/pm-utils/sleep.d/000vpn-disable-sleep</pre>
<p>Works for me on Ubuntu 14.04 LTS. <abbr title="Your Mileage May Vary">YMMV</abbr>.</p>
Copyright (c) 2014, Day BarrUbuntu 14.04 on MacBookPro6,2
2014-04-24T23:22:22+01:00http://www.daybarr.comcc2c276273d291d337898f343bafacaa<p>Ubuntu 14.04 works very well on my <code>MacBookPro6,2</code>. To check what version of mac you have:</p>
<pre>sudo dmidecode -s system-product-name</pre>
<h2>Fans</h2>
<p>I noticed it was running hot, then realised this might be because no fans were running. This can be easily fixed on 14.04 by just installing <code>macfanctld</code>:</p>
<pre>sudo apt-get install macfanctld</pre>
<p>Before that command had even finished running the fans span up and started to cool things down.</p>
<h2>Function keys</h2>
<p>By default the function keys do the "screen dim", "screen brighten" actions, and you have to use the <code>fn</code> key to get <code>F1</code>, <code>F2</code> etc. I prefer to reverse this. Doing so requires <code>pommed</code> which again is included in standard 14.04 apt-repository:</p>
<pre>sudo apt-get install pommed</pre>
<p>Then a quick edit of the <code>/etc/pommed.conf</code> file to change <code>fnmode</code> from the default value of 1 to 2. After saving the changes to this file, apply them with a quick:</p>
<pre>sudo service pommed restart</pre>
<h2>Screen goes black when on battery</h2>
<p>Again edit <code>/etc/pommed.conf</code> to change …</p>
<pre> on_batt = 6</pre>
<p>…to…</p>
<pre> on_batt = 0</pre>
<p>…to disable this.</p>
Copyright (c) 2014, Day BarrNow faster than 84% of sites
2011-03-26T01:53:46+00:00http://www.daybarr.comd374337f0348cddbfb7b36f7f62ab60e<p>It's official: according to <a href="https://www.google.com/webmasters/tools/" title="Google Webmaster Tools">Google Webmaster Tools</a>, this site is now “<strong>faster than 84% of sites</strong>”:</p>
<div><a href="/static/blog/webmastertools.png" title="Click to zoom"><img src="/static/blog/webmastertools-thumb.png" alt="Graph of site performance for daybarr.com" width="500" height="164" /></a></div>
<p>Can you tell when I made <a href="/blog/redesign" title="DayBarr.com redesign">the switch</a> from using Drupal to Django? ;)</p>
<p>Here's my <a href="http://pingdom.com" title="Pingdom uptime monitoring">Pingdom</a> graph for the same period:</p>
<div><a href="/static/blog/pingdom.png" title="Click to zoom"><img src="/static/blog/pingdom-thumb.png" alt="Graph of site performance for daybarr.com" width="500" height="537" /></a></div>
<p>Pingdom also show the same marked improvement around the end of August.</p>
<p>Hopefully there'll be another improvement to report on soon - I upgraded Django to v1.3 a couple of days ago (absolutely painless) and finally got around to setting up memcached today (a little more painful due to a <a href="http://www.dctrwatson.com/2010/09/beware-of-using-pylibmc-1-1-and-mod_wsgi/" title="Pylibmc 1.1.1 causes mod_wsgi hang">bug</a> in the pylibmc library that causes mod_wsgi to hang). Time will tell how the caching affects things, but in the meantime, here's a “live” report from Pingdom for the last month:</p>
<div><a href="http://www.pingdom.com" title="Pingdom website monitoring"><img src="http://share.pingdom.com/banners/36e80eaf" alt="Response time for daybarr.com: Last 30 days " title=" Response time for daybarr.com: Last 30 days" width="300" height="165" /></a></div>
Copyright (c) 2011, Day BarrMunin Plugin for USB Thermometers
2011-03-12T19:08:24+00:00http://www.daybarr.com26d382dbcadd0aee4b61f34661237f40<p>I recently bought a cheap USB thermometer on eBay, to measure the room temperature in the garage where my home server lives. When it finally arrived from Hong Kong, the parcel contained the thermometer, an extension cable and a CD for the Windows drivers and utilities.</p>
<p><img src="/static/blog/usb-thermometer.jpg" width="500" height="375" alt="HID TEMPer USB thermometer box contents" /></p>
<p>My server runs Ubuntu 10.10, so the CD went in the bin, and I grabbed the <a href="http://search.cpan.org/~msulland/Device-USB-PCSensor-HidTEMPer-0.03/" title="Perl module for USB thermometers">Device::USB::PCSensor::HidTEMPer module</a> from CPAN so I could take temperature readings with a simple Perl script.</p>
<p>As I already run Munin on my server, I set about writing a plugin to graph the temperature from the USB thermometer. Following the <a href="http://munin-monitoring.org/wiki/HowToWritePlugins" title="Munin plugin-writing guide">Munin plugin-writing guide</a> I came up with this:</p>
<p>Download: <a href="/playpen/usb-thermometer-munin/temperature" title="Munin plugin for HID TEMPer USB thermometer">Munin plugin for HID TEMPer USB thermometer</a></p>
<p>To get it working, first install the CPAN module and its dependencies by running the following as root:</p>
<pre>aptitude install libusb-dev
cpan Inline::MakeMaker
cpan Device::USB::PCSensor::HidTEMPer</pre>
<p>then copy <a href="/playpen/usb-thermometer-munin/temperature" title="Munin plugin for Hid TEMPer USB thermometer">my plugin script</a> to the plugins directory (<code>/etc/munin/plugins</code> on Ubuntu) and make it executable. Next, configure Munin so that this plugin is run as root (required for access to the USB device) by adding the following to the existing config file at <code>/etc/munin/plugin-conf.d/munin-node</code>:</p>
<pre>[temperature]
user root</pre>
<p>then finally</p>
<pre>service munin-node restart</pre>
<p>This should work with multiple thermometers if you have more than one, and record values from both the internal and external sensor of each unit. I only have one unit, which only has an internal sensor, as you can see from this screenshot of the Munin output.</p>
<p><img src="/static/blog/usb-thermometer-munin-plugin.png" width="497" height="280" alt="Screenshot of temperature graph from Munin plugin for USB thermometers" /></p>
Hopefully it will continue to get warmer over the coming weeks
Copyright (c) 2011, Day BarrCSS Resets and Grids
2010-09-04T02:23:01+01:00http://www.daybarr.com6db2d39b5ebc7a3c3a3d07f402b32b38<p>As promised in my <a href="http://www.daybarr.com/blog/redesign" title="2010 website redesign">last post</a> introducing the website redesign, I'd like to expand on the various projects that I've used to put this together. Today I'll start with the CSS framework.</p>
<p>Firstly, I use <a href="http://meyerweb.com/eric/tools/css/reset/" title="Eric Meyer's CSS Reset">Eric Meyer's CSS Reset</a> as a starting point. Reset stylesheets supply rules to get rid of the inconsistencies that different browsers apply to elements by default, when you don't supply any explicit styles to tell them otherwise. Without a reset stylesheet, these inconsistencies are generally stumbled across when doing cross browser testing and are worked around by adding styles that are specific to each specific piece of markup which renders oddly. With a reset, the inconsistencies have been removed at a higher level so your styles for specific elements of the page can concentrate on the actual <em>style</em> and not making sure that the bottom margin of that level three header in your sidebar is the same height in IE as it is in Firefox.</p>
<p>Despite being a deceptively small stylesheet, an awful lot of time and careful thought has gone into each and every rule - Eric does a great job of explaining his approach in <a href="http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/" title="Eric Meyer explains the reasoning behind his Reset CSS">this article</a> which is well worth the read if you're not familiar with CSS resets.</p>
<p>Next, to massively simplify the problem of page layout I use <a href="http://960.gs/" title="The 960 Grid System">the 960 Grid System</a>. Using a grid system feels a little bit icky - having to put classes in the markup to indicate a box that is 8 columns wide is not very “semantic”. If I <em>really</em> wanted to be semantic and purge myself of the heinous crime against semanticism that is …</p>
<pre class="brush: html">
<div class="container_12">
<div id="header" class="grid_12">
...
</div>
<div id="content" class="grid_8">
...
</div>
<div id="sidebar" class="grid_3 prefix_1">
...
</div>
</div>
</pre>
<p>… I could attempt to make use of a tool like <a href="http://sass-lang.com/">Sass</a> to apply the Grid Systems rules to the semantic ids and classes etc. Sass and other similar tools such as <a href="http://ncannasse.fr/projects/hss">HSS</a>, <a href="http://github.com/dziegler/clevercss/tree/master">CleverCSS</a>, or <a href="http://lesscss.org/">LESS</a> are higher level meta languages that are compiled down into CSS. This allows such things as mixins, where you can embed whole sets of rules inside selectors with a single line, so my semantic classes and ids could have all the rules of 960s <code>container_12</code>s and <code>grid_8</code>s applied to them without having to use the unsemantic class names in the markup.</p>
<p>In fact, while writing this, I've discovered that of course, others have done <a href="http://github.com/chriseppstein/compass-960-plugin#readme">exactly this</a> already.</p>
<blockquote cite="http://github.com/chriseppstein/compass-960-plugin#readme">
<h1>Making Semantic Grids</h1>
<ul>
<li>Use the <code>+grid-container</code> mixin to declare your container element.</li>
<li>Use the <code>+grid</code> mixin to declare a grid element.</li>
<li>Use the <code>+alpha</code> and <code>+omega</code> mixins to declare the first and last grid elements for a row.</li>
<li>User the <code>+grid-prefix</code> and <code>+grid-suffix</code> mixins to add grid columns before or after a grid element.</li>
</ul>
<p>Example:</p>
<pre>#wrap
+grid-container
#left-nav
+alpha
+grid(5,16)
#main-content
+grid-prefix(1,16)
+grid(10, 16)
+omega
</pre></blockquote>
<p>Awesome. Something to pursue another day I think. For now using 960 GS certainly got the job done quickly and let me move onto the parts that interested me more.</p>
<p>Please note that if you “view source” to look for the reset or 960.gs stylesheet you won't find them very easy to read. My styles have been minified and concatenated together for performance reasons by <a href="http://code.google.com/p/django-compress/" title="django-compress">django-compress</a> - which I'll get to in a future post.</p>
Copyright (c) 2010, Day BarrRedesign
2010-08-28T01:00:00+01:00http://www.daybarr.com51d24fe82dcc1b3519ef6a58a896d5dd<p>I've rewritten the website from scratch. Again.</p>
<p>This time the excuse was to learn <a href="http://www.djangoproject.com/" title="Django - the web framework for perfectionists with deadlines">Django</a>.</p>
<p>Using a web framework like Django instead of a CMS like my previous <a href="http://127.0.0.1:8000/blog/new-website">Drupal installation</a> gives me a lot more control over the fine details, which suits my pedantic programmer brain. Unfortunately that programmer brain is not so good when it comes to the design side of things, so I opted to keep things simple. This simplicity has resulted in a minimalistic, uncluttered look that I'm actually quite pleased with.</p>
<p>Here is a screenshot of my new design (on the right) alongside the <a href="http://drupal.org/node/91964" title="Drupal 5 Garland theme">Garland theme</a> from my old Drupal 5 setup.</p>
<p class="top-images space-images">
<a href="/static/blog/daybarr.com.2007.png" title="2007 design"><img width="250" height="790" src="/static/blog/daybarr.com.2007.thumb.png" alt="2007 design" /></a>
<a href="/static/blog/daybarr.com.2010.png" title="2010 design"><img width="250" height="441" src="/static/blog/daybarr.com.2010.thumb.png" alt="2010 design" /></a>
</p>
<p>Sources of inspiration for the design include <a href="http://www.thunderguy.com/semicolon/" title="Bennet McElwee's blog">semicolon</a> and <a href="http://furrybrains.com/" title="Jim Dalton's blog">Furry Brains</a>: two clean looking blogs I stumbled across during my Django research.</p>
<p>In terms of the code, when putting this site together I made use of:</p><ul>
<li><a href="http://www.djangoproject.com/" title="Django - the Web framework for perfectionists with deadlines">Django</a></li>
<li><a href="http://meyerweb.com/eric/tools/css/reset/" title="Eric Meyer's CSS Reset">Eric Meyer's CSS Reset</a></li>
<li><a href="http://960.gs/" title="The 960 Grid System">The 960 Grid System</a></li>
<li><a href="http://alexgorbatchev.com/SyntaxHighlighter/" title="SyntaxHighlighter - open source, JavaScript client-side code syntax highlighter">SyntaxHighlighter</a></li>
<li><a href="http://jquery.com" title="jQuery">jQuery</a></li>
<li><a href="http://code.google.com/p/django-compress/" title="django-compress">django-compress</a></li>
<li><a href="http://developer.yahoo.com/yui/compressor/" title="The YUI Compressor">The YUI Compressor</a></li>
<li><a href="http://www.gravatar.com/" title="Globally Recognized Avatar">Gravatar</a></li>
<li><a href="http://www.sqlite.org/" title="SQLite">SQLite</a></li>
</ul><p>I hope to blog about each of these in turn over the coming weeks, so <a href="/feeds/blog/posts" title="Blog Feed">subscribe</a> if you want to catch that.</p>
<p>In the meantime, please <a href="/contact/" title="Contact Day">contact me</a> if you find any problems with the new site, broken links etc.</p>
Copyright (c) 2010, Day BarrFind index of selected option
2009-05-13T15:10:59+01:00http://www.daybarr.coma8904584c28ba829a59bf828ed3ed680<p>Given this HTML…</p>
<pre class="brush: html">
<select>
<option>Index zero</option>
<option>Index one</option>
<option>Index two</option>
</select>
<p>Selected option has index: <span id="output">0</span></p>
</pre>
<p>here is a jQuery code snippet to find the index of the <code>option</code> that has been selected.</p>
<pre class="brush: js">$('select').change(function() {
$('#output').text(
var $this = $(this);
$this.children().index( $this.children(':selected') )
);
}).trigger('change');</pre>
<p>Use jQuery's <a href="http://docs.jquery.com/Core/index" title="jQuery index function">index function</a> to return the index of the item that matches the ':selected' selector within the children of the <code>select</code> element.</p>
<p><strong>Example:</strong></p><iframe width="250" height="100" src="/static/blog/select-index.html"></iframe>
Copyright (c) 2009, Day BarrPipe to filter the Google Code Issue Updates feed
2009-02-18T18:28:21+00:00http://www.daybarr.com16ccd3c60ca79f0d9717d0b93c3ca1ff<p>Google Code provides <a href="http://code.google.com/p/flot/feeds" title="Google Code Project Feeds">various feeds</a> for every project they host. The "Issue Updates" feed contains entries for all the issues on the project. What if you're only interested in <a href="http://code.google.com/p/flot/issues/detail?id=5" title="Pie Charts for flot please!">one issue</a>? Filter the feed with Yahoo! Pipes of course.</p>
<p><a href="http://pipes.yahoo.com/daybarr/googlecodeissueupdates">My pipe</a> is an example of how easily this can be achieved with a simple regex in the Filter module. I've tied the name of the project and the issue number to user inputs, so you can use this pipe to track your favourite issue on your pet project. Personally, I'm looking forward to having support for <a href="http://code.google.com/p/flot/issues/detail?id=5">Pie Charts</a> baked into an official release of <a href="http://code.google.com/p/flot/" title="pure Javascript plotting library for jQuery">flot</a>, and will be tracking progress with <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=iCbKJOn93RGt98S6dfQQIA&_render=rss&issue=5&project=flot" title="Feed of updates to Pie Chart support for flot">this feed</a>.</p>
Copyright (c) 2009, Day BarrBrowser support for built-in Ajax Libraries
2009-01-08T16:38:22+00:00http://www.daybarr.com0e5f7e2bd8c66407987e3732a65479d7<p>When Google <a href="http://googleajaxsearchapi.blogspot.com/2008/05/speed-up-access-to-your-favorite.html" title="Ajax Libraries API announcement">launched</a> the Ajax Libraries API in May, Dion Almaer <a href="http://ajaxian.com/archives/announcing-ajax-libraries-api-speed-up-your-ajax-apps-with-googles-infrastructure" title="Ajax on Ajax Libraries API announcement">noted</a> that it might be possible for browsers to further improve performance of applications using this API:</p><blockquote><p>If we see good usage, we can work with browser vendors to automatically ship these libraries. Then, if they see the URLs that we use, they could auto load the libraries, even special JIT'd ones, from their local system. Thus, no network hit at all!</p></blockquote><p>A great idea, but as far as I know not one that any browser has currently taken up. When Google <a href="http://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html" title="Google Chrome announcement">announced Chrome</a> in September I wondered if they might be the first browser to support such a feature. Today I finally got around to testing the latest Chrome using <a href="http://www.wireshark.org" title="Wireshark">Wireshark</a> and discovered that it doesn't yet do this, at least not for the latest jQuery release.</p>
<p>So I've taken affirmative action in the spirit of <a href="http://ejohn.org/blog/a-web-developers-responsibility/%20">John Resig's recent advice</a> and <a href="http://www.google.com/support/forum/p/Chrome/thread?tid=6638df6f2209104b&hl=en" title="Suggestion to build in JavaScript libraries from Google Ajax Libraries API ">filed a feature request</a> at the <a href="http://www.google.com/support/forum/p/Chrome/label?lid=4b62763ab25c3274&hl=en">Google Chrome support site</a>.</p>
Copyright (c) 2009, Day BarrArray.splice: deleteCount not optional
2008-08-15T23:53:16+01:00http://www.daybarr.come737ed2e02fff0bcf6f759fc6fc9d9b4<div style="float:right; padding-left: 1em"><a href="http://www.amazon.co.uk/dp/0596101996?tag=daybarrcom-21&camp=1406&creative=6394&linkCode=as1&creativeASIN=0596101996&adid=1A2JQ265A3H7G73RET4N&"><img src="/static/blog/JavaScript-The-Definitive-Guide.gif" alt="JavaScript: The Definitive Guide" width="180" height="236" /></a></div>
<p>I recently ran across some curious JavaScript behaviour. Nothing new there, but I was slightly annoyed to see that my handy reference book hadn't given me any clue about the inconsistent way in which different browsers handle the <code>Array.splice</code> method. O'Reilly's <a href="http://www.amazon.co.uk/dp/0596101996?tag=daybarrcom-21&camp=1406&creative=6394&linkCode=as1&creativeASIN=0596101996&adid=1A2JQ265A3H7G73RET4N&">JavaScript: The Definitve Guide</a> (5th edition) is usually pretty good at pointing out any browser compatibility issues.</p>
<p>But after digging some more, I was even more confused to find that the book seemed to be wrong in its description of the method.</p><!--break-->
<p>Here is the part that seems wrong to me, together with the example given:</p>
<blockquote>
<p><code>Array.splice(start, deleteCount, value, ...)</code></p>
<p><em>deleteCount</em>: This argument is optional; if not specified, <code>splice()</code> deletes all elements from <code>start</code> to the end of the array.</p>
<p>Example:</p>
<pre class="brush: js">var a=[1,2,3,4,5,6,7,8];
a.splice(4); // Returns [5,6,7,8]; a is [1,2,3,4]</pre>
</blockquote>
<p>But, according to the <a href="http://www.ecma-international.org/publications/static/blog/ECMA-ST/Ecma-262.pdf">ECMAScript specification v3</a> the second argument is not optional:</p>
<blockquote>
<p><code>Array.prototype.splice(start, deleteCount, [, item1 [, item2 [, ...]]])</code></p>
<p>When the splice method is called with two or more arguments start, deleteCount and (optionally)
item1, item2, etc., the deleteCount elements of the array starting at array index start are replaced by
the arguments item1, item2, etc.</p>
</blockquote>
<p>Hmm. So what happens when we actually try the example given in the JavaScript book? Here's my results on several different browsers:</p>
<pre class="brush: js">
var a=[1,2,3,4,5,6,7,8];
a.splice(4);
// Results on Windows unless otherwise stated
// IE 6 + 7: Returns []; a is [1,2,3,4,5,6,7,8]
// Opera 9.27: Returns []; a is [1,2,3,4,5,6,7,8]
// Opera 9.5: Returns []; a is [1,2,3,5,6,7,8]
// Firefox 2 + 3: Returns [5,6,7,8]; a is [1,2,3,4]
// Safari 3.1.2: Returns [5,6,7,8]; a is [1,2,3,4]
// Safari 3.0.4 (Mac): Returns []; a is [1,2,3,4,5,6,7,8]
// Google Chrome 0.2.149.27: Returns [5,6,7,8]; a is [1,2,3,4]
</pre>
<p>Some interesting and varied results there. The change in behaviour between Opera 9.27 and Opera 9.5 strikes me as being somewhat odd as I think Opera 9.27 was actually behaving correctly. Based on my brief reading of the <a href="http://www.ecma-international.org/publications/static/blog/ECMA-ST/Ecma-262.pdf">ECMAScript spec</a> at the time, I would expect an <code>undefined</code> value for the second argument to be cast to a zero value, therefore the returned array is empty and <code>a</code> is left untouched. At least that's what I thought after a quick glance at the convoluted (but precise!) specification which is now unavailable for me to check as the ECMA site currently appears to be down. Perhaps after all <a href="http://ajaxian.com/archives/ecmascript-harmony-brendan-eich-douglas-crockford-adobe-and-more">this week's excitement regarding ECMAScript Harmony</a>?</p>
<p>Here's a live test showing what your browser makes of the <code>array.splice()</code> call without a <code>deleteCount</code> argument:</p>
<noscript><p>JavaScript is disabled. Enable JavaScript or leave your feed reader and view this post in a browser.</p></noscript>
<pre><script type="text/javascript">
/* <![CDATA[ */
(function() {
var arrayToString = function(a) {
if (a === undefined) {
return "undefined";
}
var s = "[";
for (var i=0, l=a.length; i<l; i++) {
s += a[i] + (i<l-1?",":"");
}
s += "]";
return s;
};
var runSpliceTest = function(a, start) {
var result, error;
document.write("var a = " + arrayToString(a) + ";\r\na.splice("+start+"); \/\/ Returns ");
try {
result = a.splice(start);
} catch (e) {
error = e;
}
document.write(arrayToString(result) + "; a is " + arrayToString(a) + "\r\n");
if (error !== undefined) {
document.write("\r\nException caught: " + error + "\r\n");
}
};
runSpliceTest([1,2,3,4,5,6,7,8], 4);
document.write("\r\n// and just for laughs... (this raises an exception in Opera 9.5)\r\n");
runSpliceTest([], 0);
})();
/* ]]> */
</script></pre>
Copyright (c) 2008, Day Barr