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

  <title><![CDATA[Cranking Code]]></title>
  <link href="http://allegromanontroppo.github.com/atom.xml" rel="self"/>
  <link href="http://allegromanontroppo.github.com/"/>
  <updated>2012-01-17T22:07:39+00:00</updated>
  <id>http://allegromanontroppo.github.com/</id>
  <author>
    <name><![CDATA[Mark Holland]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Whereupon I receive an email from Desert Island Discs]]></title>
    <link href="http://allegromanontroppo.github.com/blog/2012/01/09/whereupon-i-receive-an-email-from-desert-island-discs/"/>
    <updated>2012-01-09T18:12:00+00:00</updated>
    <id>http://allegromanontroppo.github.com/blog/2012/01/09/whereupon-i-receive-an-email-from-desert-island-discs</id>
    <content type="html"><![CDATA[<p>&#8220;Would you like to appear on the <a href="http://www.bbc.co.uk/radio4/features/desert-island-discs">programme</a>?&#8221; their email stated. &#8220;I&#8217;d love to.&#8221;, I replied. &#8220;I&#8217;ll take <a href="http://www.youtube.com/watch?v=O5sX99HODzg">&#8216;Nimrod&#8217;</a>, the overture from <a href="http://www.youtube.com/watch?v=Lsg7DtLbrDo">&#8216;Der fliegende Holländer&#8217;</a>, <a href="http://www.youtube.com/watch?v=a5xsWpGqvEY">&#8216;All Join Hands&#8217; by Slade&#8230;</a>&#8221;, and so on.</p>

<p>Of course that isn&#8217;t quite how it happened.</p>

<p>However I did receive a pleasant note for sending them a correction to the archive page of one of their castaways, the venerable actress <a href="http://www.bbc.co.uk/radio4/features/desert-island-discs/castaway/42c903b1">Cicely Courtneidge</a>.</p>

<blockquote><p>Hi Mark</p>

<p>Thank you for your email to Desert Island Discs.  I have changed the
Albert Coates to Eric Coates.  I think looking at the recording Albert
might have been conducting but as you rightly point out Eric was the
composer.</p>

<p>Thank you for your interest in our programme.</p>

<p>Best wishes</p>

<p>Desert Island Discs team.</p></blockquote>

<p>How kind of them. It&#8217;s almost as if Roy Plomley had written it himself.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Recursively Remove .DS_Store files]]></title>
    <link href="http://allegromanontroppo.github.com/blog/2011/12/21/recursively-remove-ds-store-files/"/>
    <updated>2011-12-21T22:53:00+00:00</updated>
    <id>http://allegromanontroppo.github.com/blog/2011/12/21/recursively-remove-ds-store-files</id>
    <content type="html"><![CDATA[<p>From <a href="http://snippets.dzone.com/posts/show/4982">Here</a>.</p>

<p>I&#8217;m always having to look this up:</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=''><span class='line'>find . -name '*.DS_Store' -type f -delete</span></code></pre></td></tr></table></div></figure>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Running Padrino Rake tasks in production]]></title>
    <link href="http://allegromanontroppo.github.com/blog/2011/12/21/running-padrino-rake-tasks-in-production/"/>
    <updated>2011-12-21T09:42:00+00:00</updated>
    <id>http://allegromanontroppo.github.com/blog/2011/12/21/running-padrino-rake-tasks-in-production</id>
    <content type="html"><![CDATA[<p>An aide memoire for my own future reference.</p>

<p>In order to run <a href="http://www.padrinorb.com">Padrino</a> Rake tasks in the production environment the ENV variable needs to be placed before the command. It took a fair bit of flailing about before discovering this.</p>

<p>For example:</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=''><span class='line'>PADRINO_ENV=production bundle exec padrino rake -T</span></code></pre></td></tr></table></div></figure>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Styling asp.net MVC validation summary as a Twitter bootstrap flash]]></title>
    <link href="http://allegromanontroppo.github.com/blog/2011/12/01/styling-asp-dot-net-mvc-validation-summary-as-a-twitter-bootstrap-flash/"/>
    <updated>2011-12-01T21:17:00+00:00</updated>
    <id>http://allegromanontroppo.github.com/blog/2011/12/01/styling-asp-dot-net-mvc-validation-summary-as-a-twitter-bootstrap-flash</id>
    <content type="html"><![CDATA[<p>The asp.net MVC validation summary is a bit plain. Let&#8217;s beautify it.</p>

<p>First grab the alert styles from the <a href="http://twitter.github.com/bootstrap/#alerts">Twitter Bootstrap</a> source and add the &#8216;.validation-summary-errors&#8217; class selector where appropriate. I&#8217;ve used the &#8220;danger&#8221; (red) version of the flash.</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>
</pre></td><td class='code'><pre><code class='js'><span class='line'>   <span class="p">.</span><span class="nx">validation</span><span class="o">-</span><span class="nx">summary</span><span class="o">-</span><span class="nx">errors</span><span class="p">,</span>
</span><span class='line'>  <span class="p">.</span><span class="nx">alert</span><span class="o">-</span><span class="nx">message</span>
</span><span class='line'>  <span class="p">{</span>
</span><span class='line'>     <span class="nx">clear</span><span class="o">:</span><span class="nx">both</span><span class="p">;</span>
</span><span class='line'>    <span class="nx">position</span><span class="o">:</span> <span class="nx">relative</span><span class="p">;</span>
</span><span class='line'>    <span class="nx">padding</span><span class="o">:</span> <span class="mi">7</span><span class="nx">px</span> <span class="mi">15</span><span class="nx">px</span><span class="p">;</span>
</span><span class='line'>    <span class="nx">margin</span><span class="o">-</span><span class="nx">bottom</span><span class="o">:</span> <span class="mi">18</span><span class="nx">px</span><span class="p">;</span>
</span><span class='line'>    <span class="nx">color</span><span class="o">:</span> <span class="err">#</span><span class="mi">404040</span><span class="p">;</span>
</span><span class='line'>  
</span><span class='line'>  <span class="nx">etc</span><span class="p">...</span>   
</span></code></pre></td></tr></table></div></figure>


<p>Just that alone will make things look miles better already.</p>

<p>However the Bootstrap flash has a close button on it in order to hide the message away which is kind of neat. Let&#8217;s use JavaScript to add that.</p>

<p>First we need to know if flash is present. If a full page postback has triggered the showing of the validation error message then we can just look for it in the DOM on document ready.</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>
</pre></td><td class='code'><pre><code class='js'><span class='line'>   <span class="kd">var</span> <span class="nx">$validationSummaryErrors</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.validation-summary-errors&#39;</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">$validationSummaryErrors</span><span class="p">.</span><span class="nx">length</span> <span class="o">!==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">addCloseButton</span><span class="p">(</span><span class="nx">$validationSummaryErrors</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Simple.</p>

<p>But what if the validation error message was injected via client side code?</p>

<p><a href="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js">jquery.validate.unobtrusive.js</a>, the Javascript code which performs client side model validation, runs on page load and has no input parameters so we can&#8217;t pass in a callback directly. Instead, I&#8217;m afraid, we need to add a function to the global object.</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>
</pre></td><td class='code'><pre><code class='js'><span class='line'>   <span class="nb">window</span><span class="p">.</span><span class="nx">onValidatorSummaryShown</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">addCloseButton</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
</span><span class='line'>  <span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>


<p> And we&#8217;ll call it when the &#8216;.validation-summary-errors&#8217; div is injected into the DOM.</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>
</pre></td><td class='code'><pre><code class='js'><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">onValidatorSummaryShown</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>                <span class="nb">window</span><span class="p">.</span><span class="nx">onValidatorSummaryShown</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">container</span><span class="p">);</span>
</span><span class='line'>     <span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>And there you have it, a beautiful and arresting validation error message complete with working close button.</p>

<p>The code in full:</p>

<div><script src='https://gist.github.com/1415827.js?file=jquery.validate.unobtrusive.js'></script>
<noscript><pre><code>    function onErrors(form, validator) {  // 'this' is the form element
        var container = $(this).find(&quot;[data-valmsg-summary=true]&quot;),
            list = container.find(&quot;ul&quot;);

        if (list &amp;&amp; list.length &amp;&amp; validator.errorList.length) {
            list.empty();
            container.addClass(&quot;validation-summary-errors&quot;).removeClass(&quot;validation-summary-valid&quot;);

            $.each(validator.errorList, function () {
                $(&quot;&lt;li /&gt;&quot;).html(this.message).appendTo(list);
            });

            // callback to show the summary has been shown
            // unobtrusive validation has no inputs so hook into global object
            if (window.onValidatorSummaryShown) {
                window.onValidatorSummaryShown.call(container);
            }
        }
    }</code></pre></noscript></div>




<div><script src='https://gist.github.com/1415827.js?file=scripts.js'></script>
<noscript><pre><code>    (function () {

        // add a close button to the '.validation-summary-errors' div &quot;flash&quot;

        function addCloseButton($container) {
        
            $('.close', $container).remove();

            $('&lt;a&gt;', {
                'class': 'close',
                'href': '#'
            }).append('×').click(function (e) {

                e.preventDefault();

                var $div = $(this).parent('div');

                $div.slideUp(function (e) {
                    $div.remove();
                });

            }).prependTo($container);

        };

        // detect the '.validation-summary-errors' div after full page postback
        if ($('.validation-summary-errors').length !== 0) {
            addCloseButton($('.validation-summary-errors'));
        }

        // the '.validation-summary-errors' has appeared without full page postback
        window.onValidatorSummaryShown = function () {
            addCloseButton(this);
        };

    } ());</code></pre></noscript></div>




<div><script src='https://gist.github.com/1415827.js?file=styles.css'></script>
<noscript><pre><code>
.validation-summary-errors,
.alert-message 
{
   clear:both;
  position: relative;
  padding: 7px 15px;
  margin-bottom: 18px;
  color: #404040;
  background-color: #eedc94;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
  background-image: linear-gradient(top, #fceec1, #eedc94);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #eedc94 #eedc94 #e4c652;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.validation-summary-errors .close,
.alert-message .close {
  margin-top: 1px;
  *margin-top: 0;
}
.validation-summary-errors a,
.alert-message a {
  font-weight: bold;
  color: #404040;
}
.validation-summary-errors p a,
.alert-message.danger p a,
.alert-message.error p a,
.alert-message.success p a,
.alert-message.info p a {
  color: #ffffff;
}
.alert-message h5 {
  line-height: 18px;
}
.validation-summary-errors p,
.alert-message p {
  margin-bottom: 0;
}
.validation-summary-errors div,
.alert-message div {
  margin-top: 5px;
  margin-bottom: 2px;
  line-height: 28px;
}
.alert-message .btn {
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.alert-message.block-message {
  background-image: none;
  background-color: #fdf5d9;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  padding: 14px;
  border-color: #fceec1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.validation-summary-errors ul,
.alert-message.block-message ul, .alert-message.block-message p {
  margin-right: 30px;
}
.validation-summary-errors ul,
.alert-message.block-message ul {
  margin-bottom: 0;
}
.alert-message.block-message li {
  color: #404040;
}
.alert-message.block-message .alert-actions {
  margin-top: 5px;
}
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
  color: #404040;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert-message.block-message.error {
  background-color: #fddfde;
  border-color: #fbc7c6;
}
.alert-message.block-message.success {
  background-color: #d1eed1;
  border-color: #bfe7bf;
}
.alert-message.block-message.info {
  background-color: #ddf4fb;
  border-color: #c6edf9;
}
.alert-message.block-message.danger p a,
.alert-message.block-message.error p a,
.alert-message.block-message.success p a,
.alert-message.block-message.info p a {
  color: #404040;
}


.validation-summary-errors,
.btn.danger,
.alert-message.danger,
.btn.danger:hover,
.alert-message.danger:hover,
.btn.error,
.alert-message.error,
.btn.error:hover,
.alert-message.error:hover,
.btn.success,
.alert-message.success,
.btn.success:hover,
.alert-message.success:hover,
.btn.info,
.alert-message.info,
.btn.info:hover,
.alert-message.info:hover {
  color: #ffffff;
}
.btn .close, .alert-message .close {
  font-family: Arial, sans-serif;
  line-height: 18px;
}

.validation-summary-errors,
.btn.danger,
.alert-message.danger,
.btn.error,
.alert-message.error {
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.success, .alert-message.success {
  background-color: #57a957;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #57a957 #57a957 #3d773d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.info, .alert-message.info {
  background-color: #339bb9;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #339bb9 #339bb9 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}</code></pre></noscript></div>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Introduction]]></title>
    <link href="http://allegromanontroppo.github.com/blog/2011/09/06/first-post/"/>
    <updated>2011-09-06T12:00:00+01:00</updated>
    <id>http://allegromanontroppo.github.com/blog/2011/09/06/first-post</id>
    <content type="html"><![CDATA[<p>Hello there.</p>

<p>This is a new blog where I intend to document any new things I learn within the realm of software development. Like jazz music, this is primarily for my own amusement but should anyone else benefit from this exercise then that&#8217;s good too.</p>

<p>I&#8217;ve got 13 years professional experience yet I believe the times we now find ourselves in to be the most exciting I&#8217;ve known. There&#8217;s so much interesting stuff flying about these days, it&#8217;s amazing.</p>

<p>Long ago I was in a corporate rut. Sure we were doing some pretty neat things with C++ and COM (that dates it!) but we were in <em>our</em> little silo and everybody else was in <em>theirs</em>. The global fraternity of developers that we now know was unimaginable until recently. We had the Borland email circular and that was about it. Now we&#8217;re all in touch on Twitter and collaborating with strangers on open source projects in Github. This rising tide lifts all boats.</p>

<p>My areas of interest are dotNet for business and Ruby for pleasure. Hopefully the Ruby can be inveigled into the business zone too moving forward. (I&#8217;ve already <a href="https://github.com/allegromanontroppo/Google-Analytics-stats-to-Geckoboard">made a start</a> on that process!)</p>

<p>What I really want to get a handle on in the coming months as the dark night draw in are:</p>

<ul>
<li>Testing</li>
<li>Sass/Compass</li>
<li>Coffee Script</li>
</ul>


<p>I&#8217;ve already converted a Ruby on Rails app to 3.1 and activated the asset pipeline so the Sass and Coffee Script shouldn&#8217;t require too much setting up in order to get started. Also this <a href="http://octopress.org/">Octopress</a> blog engine uses Sass so that&#8217;s something else to poke around with. I can really see how both technologies improve what has preceded them and I&#8217;m keen to get my hands on them.</p>

<p>As regards testing, whilst I&#8217;m totally sold on the idea I just haven&#8217;t got to grips with it yet. I read on Twitter a while back, &#8216;Test Driven Development is the <a href="http://blog.tsdbrown.com/">&#8220;rock hard abs&#8221;</a> of programming. Everybody wants it. Nobody wants to do the work to get it.&#8217; I know that I&#8217;ve got to knuckle down and get it sorted. But alas it&#8217;s too easy to just write code and load up the resultant site in the browser.</p>

<p>Fingers crossed, but I should have a juicy little project on the side coming up. I&#8217;m considering using <a href="http://www.padrinorb.com/">Padrino</a> for it as I love the idea of a Ruby take on Django, sitting somewhere between the lightness of Sinatra and the all encompassingness of Rails and  complete with the built in admin side. This would seem  like a good opportunity to try to turn some of these notions into reality.</p>

<p>Hopefully putting all that out in public will be an incentive to crack on.</p>
]]></content>
  </entry>
  
</feed>

