Tweetegy2020-07-06T09:09:26+00:00http://tweetegy.comDarren Jensendarren.jensen@gmail.comPerform a flashloan using Aave Truffle Box2020-07-06T00:00:00+00:00http://tweetegy.com/2020/07/flashloan-with-truffle-box-tutorial<p>Aave have kindly put together a Tuffle Box that really helps for developing smart contracts that use <a href="https://docs.aave.com/developers/tutorials/performing-a-flash-loan/...-with-truffle">flashloans</a>.</p>
<p>I am working on some flashloan projects and thought to take a look at the Truffle box they made.</p>
<p>The Truffle Box is really easy to use and the main challenges are really around understanding how to properly fund your Smart Contracts wiht the ERC-20 tokens that you need to pay the fees.</p>
<p>I’ve put together an example in our <a href="https://github.com/devbootstrap/flashloan-truffle-box-example">DevBootstrap GitHub repo here</a> and there is also a full screencast that I made on the <a href="https://www.youtube.com/watch?v=aYSGeVkCWXU">DevBootstrap YouTube channel here</a>.</p>
<p><img src="../assets/flashloans-truffle-tutorial.jpg" /></p>
<p>Please take a look and let me know what you think in the commets on YouTube and don’t forget to subscribe and like the video!</p>
<p>Thank you for your support.</p>
Installing Hasura Graph QL Engine2019-12-15T00:00:00+00:00http://tweetegy.com/2019/12/installing-hasura-graphql-engine<h3 id="docker">Docker</h3>
<p>First up, install Docker Desktop on your computer. The best thing would be to head over to the official <a href="https://www.docker.com/products/docker-desktop">Docker website</a> for on how to do that.</p>
<h3 id="docker-compose">Docker-Compose</h3>
<p>Then install Docker Compose and fire up the database. <a href="https://github.com/devbootstrap/installing-hasura-on-docker">Here</a> is a repo containing a <code class="language-plaintext highlighter-rouge">docker-compose.yml</code> file with the full configuration for Postgres, Hasura and PG Admin. Just download that repo and run the usual <code class="language-plaintext highlighter-rouge">docker-compose up</code> in your terminal to startup everything.</p>
<h3 id="hasura">Hasura</h3>
<p>Install Hasura GraphQL Engine in your <strong>local environment</strong> using Docker Compose. I recommend following the <a href="https://github.com/devbootstrap/installing-hasura-on-docker">Installing Hasura on Docker</a> tutorial from <a href="https://www.devbootstrap.com">DevBootstrap</a>.</p>
<h3 id="basic-graph-ql-query">Basic Graph QL query</h3>
<p>Let’s assume that you have a Postgres database with the following table structure already created:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>profile (
id INT PRIMARY KEY,
name TEXT
)
</code></pre></div></div>
<p>Then you can use the Hasura Console to test querieng the database. For example if you want to fetch all the rows in the table via Graph QL, you could issue the following query:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>query {
profile {
id
name
}
}
</code></pre></div></div>
<h3 id="video-tutorial">Video Tutorial</h3>
<p>Head over to the <a href="https://www.youtube.com/watch?v=a4NlZw9OXz8">DevBootstrap YouTube Channel</a> for a video tutorial that covers this topic.</p>
<h3 id="conclusion">Conclusion</h3>
<p>If you are considering using Graph QL in your next project, be sure to checkout Hasura as an option!</p>
Managing Bower Web Packages with rails-assets.org2014-12-14T00:00:00+00:00http://tweetegy.com/2014/12/managing-bower-web-packages-with-rails-assets.org<h3 id="bower">Bower</h3>
<p>Bower describes itself as a ‘change manager for the web’. An easy way to understand Bower is that it is a tool for fetching various libraries and their dependenceis and includng them into your project.</p>
<p>For example if you needed to pull in jQuery into your project then you can run:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">bower <span class="nb">install </span>jquery</code></pre></figure>
<p>So Bower has introduced a simple and managable way to bring in libriaries and their dependancies into your JavaScript projects. It certainly beats trying installing things manualy!</p>
<h3 id="bundler">Bundler</h3>
<p>Bundler is a tool that has been around longer than Bower and essentially does the same thing as Bower but for Ruby Gems. A common way developers are introuduced to Bundler is via Rails since Rails uses Bundler by default. Developers simply add their applications Gem dependenices to the applications Gemfile and run <code class="language-plaintext highlighter-rouge">bundle install</code> on the command line.</p>
<h3 id="combining-bower-and-bundler-with-rails-assetsorg">Combining Bower and Bundler with rails-assets.org</h3>
<p><a href="https://rails-assets.org/">Rails Assets</a> is a great way to manage all your external assets in Rails. Note this is <em>not</em> a substitute for the Asset Pipeline! Rails Assets describes itself as the <em>frictionless proxy between Bundler and Bower</em>. It does this by automatically converting the packaged components (from Bower) into Ruby Gems that are easily droppable into the Rails asset pipeline and stay up to date.</p>
<h3 id="rails-asset-pipeline">Rails Asset Pipeline</h3>
<p>The Asset Pipeline was introduced in Rails 3.1 and is a fantasitic addition to the stack. If we add a JavaScript file to our <code class="language-plaintext highlighter-rouge">app/assets/javascripts</code> directory and we already have <code class="language-plaintext highlighter-rouge">require-tree</code> then this file will be automaticaly sent to the browser (via a call to <code class="language-plaintext highlighter-rouge">javascript_include_tag</code> in the layout file). The Asset Pipeline also takes care of the Production obfuscation and minification requiremetns as well as producing single .js and .css files amongst other things.</p>
<h3 id="the-problem-that-rails-assetsorg-solves">The problem that rails-assets.org solves</h3>
<p>One option for adding ‘web packages’ (that is things like JavaScript libraries, CSS libraries and so on) to our Rails application was to go hunting for the libary file itself and drop that into ‘lib/assets/..’ (or other) so that it is pulled into the asset pipline. The problem here was finding ways to keep these files up to date and handle dependencies correctly.</p>
<p>An alternative was to go hunting for a gem that is built with the intension of wraping the web package in a Rails Engine that can be installed and therefore included automatically in the asset pipleine. The problem here is that the versioning becomes quite confusing (one version for the Gem and one for the web package) and if you want to include a later version of the framework then you would probably have to fork the Gem yourself.</p>
<h3 id="the-future-is-here-with-rails-assetsorg-">The future is here with rails-assets.org !</h3>
<p>Enter rails-assets.org - which allows developers to simply add the web package to their Gemfile and install via <code class="language-plaintext highlighter-rouge">bundle install</code> command. Very familiar, easy to setup and no hassel. Developers no longer any need to maintain separate Gems for intsalling web packages like jQuery or Bootstrap or Angular JS - just use rails-assets.org from now on!</p>
<h3 id="getting-started-with-rails-assetsorg">Getting started with rails-assets.org</h3>
<p>To get started using the rails-assets.org ‘frictionless proxy’ just do the following:</p>
<p>Add https://rails-assets.org as a new gem source. For example the top of your Gemfile might look like this:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">source</span> <span class="s1">'https://rubygems.org'</span>
<span class="n">source</span> <span class="s1">'https://rails-assets.org'</span>
<span class="c1"># Gems listed here ...</span></code></pre></figure>
<p>Add any Bower related web packags as you would any new Gem using the syntax <code class="language-plaintext highlighter-rouge">gem 'rails-assets-BOWER_PACKAGE_NAME'</code>. For example the following is an example Gemfile that includes Bootstrap, AngularJS and Leaflet librarries via Bower!</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">source</span> <span class="s1">'https://rubygems.org'</span>
<span class="n">source</span> <span class="s1">'https://rails-assets.org'</span>
<span class="n">gem</span> <span class="s1">'rails-assets-bootstrap'</span>
<span class="n">gem</span> <span class="s1">'rails-assets-angular'</span>
<span class="n">gem</span> <span class="s1">'rails-assets-leaflet'</span></code></pre></figure>
<p>Now you can require the BOWER-PACKAGE-NAME in your asset pipline as follows. This is how we can include Bootstrap, Angular JS and Leaflet JavaScript files in the asset pipleine:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="sr">//</span><span class="o">=</span> <span class="n">require_self</span>
<span class="sr">//</span><span class="o">=</span> <span class="nb">require</span> <span class="n">bootstrap</span>
<span class="sr">//</span><span class="o">=</span> <span class="nb">require</span> <span class="n">angular</span>
<span class="sr">//</span><span class="o">=</span> <span class="nb">require</span> <span class="n">leaflet</span>
<span class="sr">//</span><span class="o">=</span> <span class="n">require_tree</span> <span class="p">.</span>
<span class="nf">/</span><span class="o">/=</span> <span class="n">require_tree</span> <span class="n">shared</span></code></pre></figure>
<p>Here is an example of including CSS dependencies into your Rails Application:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="sr">/*
*= require_self
*= require bootstrap
*= require leaflet
*= require_tree .
*= require_tree shared
*/</span></code></pre></figure>
<p>Please checkout the <a href="https://rails-assets.org/">Rails Assets</a> website for further details about getting started.</p>
<p>I hope you get a chance to try out rails-assets.org in your Rails projects and you will never go back to the old way again!</p>
Network Data Visualization graph using SigmaJS2014-07-08T00:00:00+00:00http://tweetegy.com/2014/07/network-data-visualization-graph-using-sigmajs<p>Sometimes its necessary to display data in something other than a table! Why? For example, when working with large datasets then it makes more sense to aggregate the data and display in the form of some type of chart like a pie chart or bar chart. In other cases the data might be geospatial data in which case <a href="https://mangomap.com/maps/20604/Deforestation%20in%20Cambodia%20Between%201976%20&%202006#">a map</a> would make an appropriate visualization.</p>
<p>In todays post, I’ll demonstrate how its possible to render a Network data set using the SigmaJS library, in particular, using SigmaJS’s rather handy JSON parser. I’ll also demonstrate techniques for programmatically zooming into specific nodes by id using the SigmaJS Camera class.</p>
<h2 id="rendering-a-basic-network-graph">Rendering a basic network graph</h2>
<p>During this post I will work with a static JSON file that represents a small abstract network. The JSON file will be constructed so that it works out of the box with the <a href="https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.parsers.json">SigmaJS JSON Parser class</a>.</p>
<p>In order for the JSON file to work with the SigmaJS JSON Parser it must contain two arrays ‘edges’ and ‘nodes’. Here is the <a href="https://github.com/tweetegy/sigmajs_example/blob/master/data/network.json">sample JSON file</a> I will work with.</p>
<p>In order to convert his JSON file into a pretty Network visualization, we need to host the file somewhere. The easiest way is to use python HTTP server to act as a basic server for us:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">cd </span>sigmajs_example
python <span class="nt">-m</span> SimpleHTTPServer</code></pre></figure>
<p>Now its possible to get the JSON file from the localhost server at port 8000. Like so:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">open http://localhost:8000/data/network.json</code></pre></figure>
<p>After running the above open command you should see the raw JSON data being displayed in the browser.</p>
<p>Obviously, some code is needed to manipulate this JSON file and turn it into our visualization. This can be done in JavaScript using SigmaJS! Firstly, a little HTML to get started to import the sigmajs files:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"../lib/sigma.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../lib/sigma.layout.forceAtlas2.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"../lib/sigma.parsers.json.min.js"</span><span class="nt">></script></span></code></pre></figure>
<p>Add a div tag as a placeholder for graph and give it some style so that we can see the graph output:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><style></span>
<span class="nf">#network-graph</span> <span class="p">{</span>
<span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"network-graph"</span><span class="nt">></div></span></code></pre></figure>
<p>Finally, the interesting part, where we use the Sigma JS JSON Parser. In this first example, I demonstrate the most basic usage of the parser which is to pass in the JSON file and the container id where Sigma will render the output:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script></span>
<span class="nx">sigma</span><span class="p">.</span><span class="nx">parsers</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span> <span class="dl">"</span><span class="s2">/data/network.json</span><span class="dl">"</span><span class="p">,</span> <span class="p">{</span><span class="na">container</span><span class="p">:</span> <span class="dl">'</span><span class="s1">network-graph</span><span class="dl">'</span><span class="p">});</span>
<span class="nt"></script></span></code></pre></figure>
<p>The output in the browser should be as follows:
<img src="/assets/basic-network-graph-output.jpg" alt="Basic network graph output" /></p>
<h2 id="layout-the-nodes-in-a-circle">Layout the nodes in a circle</h2>
<p>Now lets layout the nodes in a circle. Firstly, it’s important to know why the nodes in the previous example are being displayed in a diagonal line. It is due to the x and y values being set the way they are in the JSON file. For example Node 1 has x = 10, y = -10 which puts the node in the top right corner. For developers not used to drawing on the screen this is due to the y-axis being the reverse of what is usually expected say when drawing a graph. Usually the y-axis is positive going up. However, with screen drawing it is negative going up.</p>
<p>Another thing to note is that the graph always draws to the extents (except when there is only one node in which case it is always rendered in the centre of the screen). So if there two nodes with the following nodes array in the JSON file:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="dl">"</span><span class="s2">nodes</span><span class="dl">"</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">1</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">label</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Node 1</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">x</span><span class="dl">"</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">y</span><span class="dl">"</span><span class="p">:</span> <span class="mi">0</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="dl">"</span><span class="s2">id</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">label</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Node 2</span><span class="dl">"</span>
<span class="dl">"</span><span class="s2">x</span><span class="dl">"</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">y</span><span class="dl">"</span><span class="p">:</span> <span class="mi">1</span>
<span class="p">}</span>
<span class="p">]</span></code></pre></figure>
<p>Then the output is two nodes diagonally opposite each other:
<img src="/assets/two-nodes-opposite-each-other.png" alt="Two SigmaJS Nodes diagonally opposite each other" /></p>
<p>As we add more nodes to the collection, at further and further x and y co-ordinates the diagram will spread out naturally.</p>
<p>So back to the circlular representation of our network. If we want to do this we can borrow from the web. In this <a href="https://github.com/jacomyal/sigma.js/issues/190">Github Issue thread</a> there is a formula for rendering nodes as a circle:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">sigmaInstance</span><span class="p">.</span><span class="nx">graph</span><span class="p">.</span><span class="nx">nodes</span><span class="p">().</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">node</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">cos</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span> <span class="o">*</span> <span class="mi">2</span> <span class="o">*</span> <span class="nx">i</span> <span class="o">/</span> <span class="nx">a</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="nx">node</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">sin</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span> <span class="o">*</span> <span class="mi">2</span> <span class="o">*</span> <span class="nx">i</span> <span class="o">/</span> <span class="nx">a</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="p">});</span></code></pre></figure>
<p>Where does the sigmaInstance variable come from? Well, back to our Sigma JSON Parser API, we can see there is room for a call back function which is passed, you guessed it, an instance of sigma! The full JS code looks like this (renamed sigmaInstance to ‘s’):</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">sigma</span><span class="p">.</span><span class="nx">parsers</span><span class="p">.</span><span class="nx">json</span><span class="p">(</span> <span class="dl">"</span><span class="s2">/data/network.json</span><span class="dl">"</span><span class="p">,</span>
<span class="p">{</span><span class="na">container</span><span class="p">:</span> <span class="dl">'</span><span class="s1">network-graph</span><span class="dl">'</span><span class="p">},</span>
<span class="kd">function</span><span class="p">(</span><span class="nx">s</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//This function is passed an instance of Sigma s</span>
<span class="c1">//Initialize nodes as a circle</span>
<span class="nx">s</span><span class="p">.</span><span class="nx">graph</span><span class="p">.</span><span class="nx">nodes</span><span class="p">().</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">node</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">cos</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span> <span class="o">*</span> <span class="mi">2</span> <span class="o">*</span> <span class="nx">i</span> <span class="o">/</span> <span class="nx">a</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="nx">node</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">sin</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span> <span class="o">*</span> <span class="mi">2</span> <span class="o">*</span> <span class="nx">i</span> <span class="o">/</span> <span class="nx">a</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">//Call refresh to render the new graph</span>
<span class="nx">s</span><span class="p">.</span><span class="nx">refresh</span><span class="p">();</span>
<span class="p">});</span></code></pre></figure>
<p>Note the call to refresh to essentially redraw the graph on the screen. The output should appear like so:
<img src="/assets/nodes-rendered-in-circle.png" alt="Nodes rendered as a circle" /></p>
<h2 id="zoom-into-a-specific-node">Zoom into a specific node</h2>
<p>Let’s say its necessary to pass a node id to a url parameter and have the graph render as normal, but afterwards zoom directly to that node on the graph. This could be useful for larger graph or for sharing links to specific nodes in the graph.</p>
<p>The way to go about solving this in SigmaJS is to:</p>
<ol>
<li>Grab the selected node id from the url</li>
<li>Find the node with that id by looking through the nodes collection</li>
<li>Use the SigmaJS Camera class to zoom in to the selected node</li>
</ol>
<p>Here is the code to grab the selected node id from the url which I borrowed from one of these <a href="http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript">Stackoverflow answers</a>:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">getParameterByName</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">match</span> <span class="o">=</span> <span class="nb">RegExp</span><span class="p">(</span><span class="dl">'</span><span class="s1">[?&]</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">name</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">=([^&]*)</span><span class="dl">'</span><span class="p">).</span><span class="nx">exec</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">search</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">match</span> <span class="o">&&</span> <span class="nb">decodeURIComponent</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/</span><span class="se">\+</span><span class="sr">/g</span><span class="p">,</span> <span class="dl">'</span><span class="s1"> </span><span class="dl">'</span><span class="p">));</span>
<span class="p">};</span>
</code></pre></div></div>
<p>Since the passed in the parameter is node_id its possible to get that into a local variable as follows:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">nodeId</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">getParameterByName</span><span class="p">(</span><span class="dl">'</span><span class="s1">node_id</span><span class="dl">'</span><span class="p">));</span></code></pre></figure>
<p>Next up is finding that node in the nodes array. Here is one solution:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">s</span><span class="p">.</span><span class="nx">graph</span><span class="p">.</span><span class="nx">nodes</span><span class="p">().</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">node</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="nx">nodeId</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">selectedNode</span> <span class="o">=</span> <span class="nx">node</span><span class="p">;</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></figure>
<p>Note its also possible to use the <a href="http://api.jquery.com/jquery.grep/">jQuery grep method</a> for a more elegant approach to finding the node.</p>
<p>Finally, we can zoom to that node using the SigmaJS Camera class! Here is one way how it is done. Adjust the zoom ratio to see the node closer or further away. Note that this code should be surrounded by an if statement to check if the selectedNode is not undefined to avoid a JavaScript error.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">s</span><span class="p">.</span><span class="nx">cameras</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">goTo</span><span class="p">({</span><span class="na">x</span><span class="p">:</span><span class="nx">selectedNode</span><span class="p">[</span><span class="dl">'</span><span class="s1">read_cam0:x</span><span class="dl">'</span><span class="p">],</span><span class="na">y</span><span class="p">:</span><span class="nx">selectedNode</span><span class="p">[</span><span class="dl">'</span><span class="s1">read_cam0:y</span><span class="dl">'</span><span class="p">],</span><span class="na">ratio</span><span class="p">:</span><span class="mf">0.1</span><span class="p">});</span></code></pre></figure>
<h2 id="layout-the-nodes-using-the-force">Layout the nodes using the force!</h2>
<p>Finally, let’s look at applying the force! All we need to do is call the <code class="language-plaintext highlighter-rouge">startForceAtlas2</code> function on the Sigma graph instance like so:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">s</span><span class="p">.</span><span class="nx">startForceAtlas2</span><span class="p">();</span></code></pre></figure>
<p>In our example we want to call this after <code class="language-plaintext highlighter-rouge">refresh</code> so that the nodes are properly aligned in a circle before hand. The resulting output is as shown below:
<img src="/assets/graph-after-force-applied.png" alt="Graph after force is applied" /></p>
<h2 id="conclusion">Conclusion</h2>
<p>Sigma.js is a powerful library for displaying network graphs. There are many powerful examples available on the web that demonstrate how to use this framework, for example <a href="http://moebio.com/datavisnetwork/">datavisnetwork from moebio.com</a> and <a href="http://briatte.org/neta/">French Senators</a></p>
<p>Despite other, more common, data vizualisation tools supporting network graphs (for example <a href="http://d3js.org/">d3js</a>) it is still worth using Sigma.js for network graphs especially if your application heavily depends on these type of vizualisations.</p>
<p>Here is an <a href="https://github.com/tweetegy/sigmajs_example">example application</a> which contains all the above examples in one small download!</p>
Using postgres hstore with Rails / Active Record2014-06-04T00:00:00+00:00http://tweetegy.com/2014/06/using-postgres-hstore-rails-active-record<p>One good solution for implementing key / value persistence to an Active Record model is to use a postgres hstore column. This gives you the ability to store any key / value pair (as strings) directly on the model and manipulate them as first class attributes.</p>
<p>In this post, I’ll demonstrate how to set up a Rails application to use hstore and I’ll also show some of the pitfalls and limitations of this technique.</p>
<h2 id="enable-your-app-to-use-hstore">Enable your app to use hstore</h2>
<p>Once you have postgres installed, the only requirement is to enable hstore in the database. This can be done by running the following command in postgres:</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">CREATE</span> <span class="n">EXTENSION</span> <span class="n">hstore</span><span class="p">;</span></code></pre></figure>
<p>This can go in a migration too, of course, which is recommended. Just create the migration file in the usual way and add the above statement to the <code class="language-plaintext highlighter-rouge">up</code> method of the migration and add the <code class="language-plaintext highlighter-rouge">DROP EXTENSION</code> equivalent to the <code class="language-plaintext highlighter-rouge">down</code> method of the migration. Here is an example:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">SetupHstore</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Migration</span>
<span class="k">def</span> <span class="nc">self</span><span class="o">.</span><span class="nf">up</span>
<span class="n">execute</span> <span class="s2">"CREATE EXTENSION IF NOT EXISTS hstore"</span>
<span class="k">end</span>
<span class="k">def</span> <span class="nc">self</span><span class="o">.</span><span class="nf">down</span>
<span class="n">execute</span> <span class="s2">"DROP EXTENSION IF EXISTS hstore"</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Now we can create a migration for our model that we want to use hstore on. A typical example is where we might have a single ‘thing’ (lets say Product) that have some common attributes (like name, price) but also have different properties depending on the actual product (like ‘dpi’ specifically for a camera but not for shoe for example!).</p>
<p>So lets look at an example migration for Product that contains a properties hstore column:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">CreateProducts</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Migration</span>
<span class="k">def</span> <span class="nf">change</span>
<span class="n">create_table</span> <span class="ss">:products</span> <span class="k">do</span> <span class="o">|</span><span class="n">t</span><span class="o">|</span>
<span class="n">t</span><span class="p">.</span><span class="nf">string</span> <span class="ss">:name</span>
<span class="n">t</span><span class="p">.</span><span class="nf">string</span> <span class="ss">:description</span>
<span class="n">t</span><span class="p">.</span><span class="nf">float</span> <span class="ss">:price</span>
<span class="n">t</span><span class="p">.</span><span class="nf">hstore</span> <span class="ss">:properties</span>
<span class="n">t</span><span class="p">.</span><span class="nf">timestamps</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>As you can see from <code class="language-plaintext highlighter-rouge">t.hstore :properties</code>; hstore is treated in the migration a first class database type. Run the migrations and this will enable the hstore extension in your database and add the products table with the hstore column.</p>
<h2 id="playing-around-with-hstore-in-the-console">Playing around with hstore in the console</h2>
<p>Lets start with getting a feel for hstore in the console in order to understand what it can do for us and what its limitations are. The following code will create a new Product item leaving properties nil.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="no">Product</span><span class="p">.</span><span class="nf">create</span><span class="p">(</span><span class="ss">name: </span><span class="s2">"Cannon D30"</span><span class="p">,</span> <span class="ss">description: </span><span class="s2">"A great digital SLR"</span><span class="p">,</span> <span class="ss">price: </span><span class="mf">399.99</span><span class="p">)</span>
<span class="no">Product</span><span class="p">.</span><span class="nf">first</span><span class="p">.</span><span class="nf">properties</span> <span class="c1"># => nil</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Lets set some key / value items on properties. Lets add the following (<a href="http://en.wikipedia.org/wiki/Comparison_of_Canon_EOS_digital_cameras" title="Comparison of Canon EOS digital cameras" target="_blank"></a>):</p>
<p>Sensor Format: APS-C CMOS
Megapixels: 3.1
Min ISO: 100
Max ISO: 1600</p>
<p>Here is the code to update the properties on this product instance:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="n">camera_properties</span> <span class="o">=</span> <span class="p">{</span><span class="ss">sensor_format: </span><span class="s2">"APS-C CMOS"</span><span class="p">,</span> <span class="ss">megapixels: </span><span class="mf">3.1</span><span class="p">,</span> <span class="ss">min_iso: </span><span class="mi">100</span><span class="p">,</span> <span class="ss">max_iso: </span><span class="mi">1600</span><span class="p">}</span>
<span class="nb">p</span> <span class="o">=</span> <span class="no">Product</span><span class="p">.</span><span class="nf">first</span>
<span class="nb">p</span><span class="p">.</span><span class="nf">update</span><span class="p">(</span><span class="ss">properties: </span><span class="n">camera_properties</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Now, if we inspect the properties attribute on the product the output is:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="nb">p</span><span class="p">.</span><span class="nf">properties</span> <span class="c1">#=> {:sensor_format=>"APS-C CMOS", :megapixels=>3.1, :min_iso=>100, :max_iso=>1600}</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Interestingly, if we call <code class="language-plaintext highlighter-rouge">reload</code> we see a slightly different output, namely that both the keys and values are now all strings:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="nb">p</span><span class="p">.</span><span class="nf">reload</span><span class="p">.</span><span class="nf">properties</span> <span class="c1">#=> {"max_iso"=>"1600", "min_iso"=>"100", "megapixels"=>"3.1", "sensor_format"=>"APS-C CMOS"}</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This is because the postgres database stores all hstore key / values as strings regardless of the type in Ruby. Inspecting the database row shows this:</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">select</span> <span class="n">name</span><span class="p">,</span> <span class="n">properties</span> <span class="k">from</span> <span class="n">products</span><span class="p">;</span>
<span class="n">name</span> <span class="o">|</span> <span class="n">properties</span>
<span class="c1">-------------+-----------------------------------------------------------------------------------------</span>
<span class="n">Cannon</span> <span class="n">D30</span> <span class="o">|</span> <span class="nv">"max_iso"</span><span class="o">=></span><span class="nv">"1600"</span><span class="p">,</span> <span class="nv">"min_iso"</span><span class="o">=></span><span class="nv">"100"</span><span class="p">,</span> <span class="nv">"megapixels"</span><span class="o">=></span><span class="nv">"3.1"</span><span class="p">,</span> <span class="nv">"sensor_format"</span><span class="o">=></span><span class="nv">"APS-C CMOS"</span>
<span class="p">(</span><span class="mi">1</span> <span class="k">row</span><span class="p">)</span></code></pre></figure>
<h2 id="adding-more-properties-to-an-existing-model">Adding more properties to an existing model</h2>
<p>The cool thing about using hstore is that we can add new attributes to the column very easily. For example we might decide that we want to include information about the storage format of the camera. We can easily do this by adding this key / value to the properties. The important thing to note is that we must merge the new properties into the existing hash:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="nb">p</span><span class="p">.</span><span class="nf">update</span><span class="p">(</span><span class="ss">properties: </span><span class="nb">p</span><span class="p">.</span><span class="nf">properties</span><span class="p">.</span><span class="nf">merge</span><span class="p">({</span><span class="ss">storage: </span><span class="s2">"CF"</span><span class="p">}))</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="accessing-the-properties-in-the-model">Accessing the properties in the model</h2>
<p>In order to access the hstore properties directly on the model we could write our own custom accessor methods like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">storage</span>
<span class="nb">self</span><span class="p">.</span><span class="nf">properties</span><span class="p">[</span><span class="s2">"storage"</span><span class="p">]</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>A neater approach is to use the <code class="language-plaintext highlighter-rouge">store_accessor</code> helper that creates these methods on the fly. This is how we can use it to create a storage method similar to the one above:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">store_accessor</span> <span class="ss">:properties</span><span class="p">,</span> <span class="ss">:storage</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The result is the same in that we can access storage as an attribute directly on the Product instance. However, the <code class="language-plaintext highlighter-rouge">store_accessor</code> method gives us the ability to validate and set the property too! The Product class looks like this now:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Product</span> <span class="o">&</span><span class="n">lt</span><span class="p">;</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">store_accessor</span> <span class="ss">:properties</span><span class="p">,</span> <span class="ss">:storage</span>
<span class="n">validates_presence_of</span> <span class="ss">:storage</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>In the console, we can see that product behaves as expected:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="nb">p</span> <span class="o">=</span> <span class="no">Product</span><span class="p">.</span><span class="nf">first</span>
<span class="nb">p</span><span class="p">.</span><span class="nf">storage</span> <span class="o">=</span> <span class="kp">nil</span>
<span class="nb">p</span><span class="p">.</span><span class="nf">valid?</span> <span class="c1"># => false</span>
<span class="nb">p</span><span class="p">.</span><span class="nf">errors</span><span class="p">.</span><span class="nf">messages</span><span class="p">[</span><span class="ss">:storage</span><span class="p">]</span> <span class="c1"># => ["can't be blank"]</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="storing-different-data-types">Storing different data types</h2>
<p>As mentioned, the hstore only stores keys / values as strings. However, since we can validate properties using standard Rails validations its possible to ensure a certain type is pushed to the hstore before it is saved in postgres as a string. That way we can always convert the type back when we want to use it. Here is an example where we might want to validate and store a number and then convert it back again when reading the value.</p>
<p>Its possible to add this as a validation directly to the model, like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Product</span> <span class="o">&</span><span class="n">lt</span><span class="p">;</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">store_accessor</span> <span class="ss">:properties</span><span class="p">,</span> <span class="ss">:cost</span>
<span class="n">validates_numericality_of</span> <span class="ss">:cost</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Once that is in place in the class, you can try out the functionality in the console as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="nb">p</span><span class="p">.</span><span class="nf">cost</span> <span class="o">=</span> <span class="s2">"this should not be allowed!"</span>
<span class="nb">p</span><span class="p">.</span><span class="nf">valid?</span>
<span class="nb">p</span><span class="p">.</span><span class="nf">errors</span><span class="p">.</span><span class="nf">messages</span><span class="p">[</span><span class="ss">:cost</span><span class="p">]</span> <span class="c1"># => ["is not a number"]</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="storing-nested-hashes">Storing nested hashes</h2>
<p>Since hstore stores keys and values as strings it means that any nested hashes will also be converted to a string. Here is an example. Given the following nested hash:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">nested_properties_hash</span> <span class="o">=</span> <span class="p">{</span><span class="ss">storage: </span><span class="s2">"5GB"</span><span class="p">,</span> <span class="ss">cost: </span><span class="s2">"499"</span><span class="p">,</span> <span class="ss">warranty: </span><span class="p">{</span><span class="ss">first: </span><span class="s2">"OK"</span><span class="p">,</span> <span class="ss">second: </span><span class="s2">"OK"</span><span class="p">}}</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Setting this to the Product.properties is valid and so can be saved. However, note that the keys are converted to strings and that the nested part of the hash is escaped:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="nb">p</span><span class="p">.</span><span class="nf">properties</span> <span class="o">=</span> <span class="n">nested_properties_hash</span>
<span class="nb">p</span><span class="p">.</span><span class="nf">save</span>
<span class="nb">p</span><span class="p">.</span><span class="nf">reload</span><span class="p">.</span><span class="nf">properties</span> <span class="c1"># => {"cost"=>"499", "storage"=>"5GB", "warranty"=>"{\"first\"=>\"OK\", \"second\"=>\"OK\"}"}</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Notice that the top level is <em>still</em> a Hash but all the nested levels are now Strings (in our case ‘warranty’). Its possible to convert all the nested levels to Hashes again using <code class="language-plaintext highlighter-rouge">eval</code> but I <strong>do not recommend this</strong> as your code can get really messy:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="nb">eval</span><span class="p">(</span><span class="nb">p</span><span class="p">.</span><span class="nf">properties</span><span class="p">[</span><span class="s2">"warranty"</span><span class="p">])</span> <span class="c1"># => {"first"=>"OK", "second"=>"OK"}</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>Using postgres hstore with Rails is really useful for flat (single level) key/value string store. Its possible to ensure a particular type by using validation and then convert that back after a read from the database. If there is a requirement to store more complex data structure, such as a nested Hash, then it would be better to use another storage mechanism such as a document base ‘nosql’ database.</p>
<p>As always, here is <a href="https://github.com/tweetegy/hstore_example">an example application</a></p>
Rails View Template Inheritance2014-04-02T00:00:00+00:00http://tweetegy.com/2014/04/rails-view-template-inheritance<p>View Inheritance has been in Rails since version 3.1. In this post, I cover a Rails 4 example and as far as I know what is covered here in this blog and in the example application is compatible with the earliest version of View Inheritance in Rails 3.x.</p>
<h2 id="view-inheritance-maps-to-controller-inheritance">View inheritance maps to Controller inheritance</h2>
<p>In a Rails application, one will generally inherit most of the applications controllers from <code class="language-plaintext highlighter-rouge">ApplicationController</code>. Lets say a very basic course management application will have Category, Course and Tutor controllers then, by default, each controller will inherit from ApplicationController. Rails will also expect a corresponding view folder for each controller like so:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">views ->
categories <span class="c">#folder for CategoriesController</span>
courses <span class="c">#folder for CoursesController</span>
tutors <span class="c">#folder for TutorsController</span></code></pre></figure>
<p>Passing in actions to the Rails Controller generator will also create corresponding view templates for those stated actions under the corresponding view directory:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre><span class="n">rails</span> <span class="n">g</span> <span class="n">controller</span> <span class="n">categories</span> <span class="n">index</span> <span class="n">show</span>
<span class="c1"># This creates the following Controller:</span>
<span class="k">class</span> <span class="nc">CategoriesController</span> <span class="o"><</span> <span class="no">ApplicationController</span>
<span class="k">def</span> <span class="nf">index</span>
<span class="k">end</span>
<span class="k">def</span> <span class="nf">show</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="c1"># ... and it will also create index.html.erb</span>
<span class="c1"># and show.html.erb under views -> categories folder</span>
<span class="c1"># (as well as helpers, assets, specs etc)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The standard behaviour for this application is to visit the index for a resource, like <code class="language-plaintext highlighter-rouge">/categories</code> which will flow through the application eventually calling the <code class="language-plaintext highlighter-rouge">index</code> method on <code class="language-plaintext highlighter-rouge">CategoriesController</code> and by Rails conventions, it will render the ‘app/views/categories/index.html.erb’ template.</p>
<h2 id="delete-the-categoriesindexhtmlerb">Delete the categories/index.html.erb</h2>
<p>Go on! Delete the index.html.erb template under views/categories folder! Don’t be scared. In fact you will discover something quite interesting in the error message that is returnd by Rails that gives us a clue to how view template inheritance works. I’ve already tried it, here is the part of the error message that spills the view template inheritance beans:</p>
<p><em>Missing template categories/index, application/index with …# blah blah</em></p>
<p>Notice that Rails looks in <strong>two places</strong> for our template, both in ‘categories/index’ (as we expect) <em>and</em> ‘application/index’. What this means is that <em>if</em> we place an index.html.erb file in ‘views/application’ directory (keeping the index file deleted under ‘categories’) then Rails will render the index.html.erb file from ‘views/application’ folder when we visit <code class="language-plaintext highlighter-rouge">/categories</code>!</p>
<h2 id="real-world-example">Real World Example</h2>
<p>This approach can be useful for exactly what it says on the tin ‘inheritance’. If we wanted, we could place some common view output inside a template that is under the ‘views/application’ directory. A common example might be a menu for your application that is common for most of the application but maybe slightly different for other parts.</p>
<p>Here is an example where we use partials to achieve this:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">views ->
application ->
_menu.html.erb
categories ->
index.html.erb
courses ->
index.html.erb
tutors ->
_menu.html.erb
index.html.erb</code></pre></figure>
<p>In the above example Rails application views folder structure we have each folder with an index page and each index page renders out the menu partial like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">render</span> <span class="s1">'menu'</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>In categories and courses, the menu partial is not present in the categories or courses views directory so Rails will use view inheritance and look up the tree. <strong>Here is the key</strong>: because <code class="language-plaintext highlighter-rouge">CategoriesController</code> and <code class="language-plaintext highlighter-rouge">CoursesController</code> <em>inherit</em> from <code class="language-plaintext highlighter-rouge">ApplicationController</code> the next logical folder that Rails will search for the menu partial is under ‘views/application’.</p>
<p>What we end up with is an application which renders the same menu partial on every page except where it is overridden, in this case under tutors (maybe to add a specific apply for teaching role link or something!).</p>
<p>Here are the two menu partial templates, one under ‘views/application/’ and the other under ‘views/tutors/’</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="code"><pre><span class="c1"># In 'views/application/_menu.html.erb'</span>
<span class="o"><</span><span class="n">ul</span><span class="o">></span>
<span class="o"><</span><span class="n">li</span><span class="o">></span>
<span class="o"><</span><span class="sx">%= link_to "Home", root_path %>
</li>
<li>
<%=</span> <span class="n">link_to</span> <span class="s2">"Categories"</span><span class="p">,</span> <span class="n">categories_path</span> <span class="sx">%>
</li></span>
<span class="o"><</span><span class="n">li</span><span class="o">></span>
<span class="o"><</span><span class="sx">%= link_to "Courses", courses_path %>
</li>
<li>
<%=</span> <span class="n">link_to</span> <span class="s2">"Tutors"</span><span class="p">,</span> <span class="n">tutors_path</span> <span class="sx">%>
</li></span>
<span class="o"><</span><span class="sr">/ul></span>
</pre></td></tr></tbody></table></code></pre></figure>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code"><pre><span class="c1"># In 'views/tutors/_menu.html.erb' (note extra menu item at the bottom)</span>
<span class="o"><</span><span class="n">ul</span><span class="o">></span>
<span class="o"><</span><span class="n">li</span><span class="o">></span>
<span class="o"><</span><span class="sx">%= link_to "Home", root_path %>
</li>
<li>
<%=</span> <span class="n">link_to</span> <span class="s2">"Categories"</span><span class="p">,</span> <span class="n">categories_path</span> <span class="sx">%>
</li></span>
<span class="o"><</span><span class="n">li</span><span class="o">></span>
<span class="o"><</span><span class="sx">%= link_to "Courses", courses_path %>
</li>
<li>
<%=</span> <span class="n">link_to</span> <span class="s2">"Tutors"</span><span class="p">,</span> <span class="n">tutors_path</span> <span class="sx">%>
</li></span>
<span class="o"><</span><span class="n">li</span><span class="o">></span>
<span class="o"><</span><span class="n">b</span><span class="o">><</span><span class="n">a</span> <span class="n">href</span><span class="o">=</span><span class="s1">'#'</span><span class="o">></span><span class="no">Apply</span> <span class="k">for</span> <span class="n">teaching</span> <span class="n">position!</span><span class="o"><</span><span class="sr">/a></</span><span class="n">b</span><span class="o">></span>
<span class="o"><</span><span class="sr">/li>
</u</span><span class="n">l</span><span class="o">></span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="removing-the-duplication">Removing the duplication</h2>
<p>In the example above we have duplicated the first set of menu items in the ‘tutors/_menu.html.erb’ file. Ideally, it would be nice to avoid that duplication and just add the extra menu items that we need. The trick is to use a placeholder for where we want the extra items to appear (in this case at the end). We also need to provide an empty placeholder template in the ‘views/application’ directory so that Rails does not throw a missing template error.</p>
<p>What we end up with is the following in our templates:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</pre></td><td class="code"><pre><span class="c1"># In 'views/application/_menu.html.erb'</span>
<span class="o"><</span><span class="n">ul</span><span class="o">></span>
<span class="o"><</span><span class="n">li</span><span class="o">></span>
<span class="o"><</span><span class="sx">%= link_to "Home", root_path %>
</li>
<li>
<%=</span> <span class="n">link_to</span> <span class="s2">"Categories"</span><span class="p">,</span> <span class="n">categories_path</span> <span class="sx">%>
</li></span>
<span class="o"><</span><span class="n">li</span><span class="o">></span>
<span class="o"><</span><span class="sx">%= link_to "Courses", courses_path %>
</li>
<li>
<%=</span> <span class="n">link_to</span> <span class="s2">"Tutors"</span><span class="p">,</span> <span class="n">tutors_path</span> <span class="sx">%>
</li></span>
<span class="o"><</span><span class="sx">%= render 'appended_menu' %>
# './application/_appended_menu.html.erb' is an empty file
</ul></span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Now we can delete the menu partial under ‘views/tutors’ and instead add the ‘appended_menu’ partial as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="c1"># In 'views/tutors/_appended_menu.html.erb'</span>
<span class="o"><</span><span class="n">li</span><span class="o">></span>
<span class="o"><</span><span class="n">b</span><span class="o">><</span><span class="n">a</span> <span class="n">href</span><span class="o">=</span><span class="s1">'#'</span><span class="o">></span><span class="no">Apply</span> <span class="k">for</span> <span class="n">teaching</span> <span class="n">position!</span><span class="o"><</span><span class="sr">/a></</span><span class="n">b</span><span class="o">></span>
<span class="o"><</span><span class="sr">/li></span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>So now thanks to Rails view inheritance the application will run without error and for the tutors page the application will render the tutors version of the appended_menu partial thus adding our additional link to the page all while keeping the views dry! Sweet!</p>
<p>As you can probably tell this approach only works if we need to <em>append</em> something to the menu. What happens if we want to put this link <em>before</em> the tutors link? We have a few options:</p>
<ul>
<li>Simply move the replaceable partial placeholder before the tutors link in the application menu partial</li>
<li>Keep the ‘append_menu’ partial where it is (for appending menu items) and make a new partial specifically before tutors link</li>
<li>If you find you need a lot of custom template overriding like this, use the <a href="https://github.com/spree/deface">deface gem</a> (or similar).</li>
</ul>
<h2 id="going-further-up-the-tree">Going further up the tree!</h2>
<p>Here is quick example that demonstrates a namespaced controller under the namespace Admin. So we create a new Admin::TutorsController which we want to inherit from Admin::BaseController using the following generator command:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rails g controller admin/base
rails g controller admin/tutors index</code></pre></figure>
<p>We end up with a slight change to our views folder structure, namely the following has been added:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">views ->
admin ->
base ->
tutors ->
index.html.erb</code></pre></figure>
<p>We also manually inherit the <code class="language-plaintext highlighter-rouge">Admin::TutorsController</code> from <code class="language-plaintext highlighter-rouge">Admin::BaseController</code> like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="code"><pre><span class="k">module</span> <span class="nn">Admin</span>
<span class="k">class</span> <span class="nc">TutorsController</span> <span class="o"><</span> <span class="no">BaseController</span>
<span class="k">def</span> <span class="nf">index</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Now we can still render the menu partial from the admin/tutors/index template and Rails will fallback to the partial under ‘views/application’ because <code class="language-plaintext highlighter-rouge">Admin::TutorsController</code> inherits from <code class="language-plaintext highlighter-rouge">Admin::BaseController</code> which, in turn, inherits from <code class="language-plaintext highlighter-rouge">ApplicationController</code>!</p>
<p>Now comes the inheritance magic! If we place an ‘appended_menu’ partial under ‘views/admin/base’ then this partial will be rendered to add additional menu items but only when the user visits any path under the admin namespace. So its possible to place administrator links here like ‘manage tutors’ or whatever and these will only be rendered when visiting ‘admin/tutors/’ path in the browser and not ‘/tutors’. Try out the sample app (link below) for a demonstration of this.</p>
<h2 id="conclusion">Conclusion</h2>
<p>View inheritance can be really powerful and useful for your application. Its a nice way to dry up views and keep partials and content in their place. If you need to perform more complex view manipulations you can always use the <a href="https://github.com/spree/deface">deface gem</a>.</p>
<p>An example application to demonstrate this can be downloaded from here: <a href="https://github.com/tweetegy/view_template_inheritance/">View Template Inheritance</a></p>
Testing Rails ActionMailer using RSpec Shared Examples2014-03-21T00:00:00+00:00http://tweetegy.com/2014/03/testing-mailers-using-rspec-shared-examples<p>I love ActionMailer in Rails, for many reasons, but one of them is that they are easy to test! I work with mailers a lot in many projects and I do find that I often follow similar testing patterns for each mailer in each project. In this post, I’ll demonstrate using RSpec shared examples to reuse some of the mailer specs across multiple mailers.</p>
<h2 id="an-actionmailer">An ActionMailer</h2>
<p>What does it take to create an ActionMailer in Rails 4? A generator, of course!</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">rails</span> <span class="n">g</span> <span class="n">mailer</span> <span class="no">CoolMailer</span> <span class="n">email</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>What you should end up with is a basic Mailer class that inherits from <code class="language-plaintext highlighter-rouge">ActionMailer::Base</code> and related views (+ specs, of course!).</p>
<h2 id="testing-these-puppies">Testing these puppies!</h2>
<p>What we need to do now is actually test these puppies. As we know there are a large number of similarities between most mailers. For example, the <code class="language-plaintext highlighter-rouge">from</code> property needs to be set to something appropriate for your application or context. The <code class="language-plaintext highlighter-rouge">to</code> property also needs to be set, of course! We usually want the email to contain a body and we usually want to check that certain content is rendered (or not) within it. Sometimes we want to send multipart emails for supporting both text and html clients.</p>
<p>Other things that may be generic mailer tests:</p>
<ul>
<li>Testing that certain headers are set like ‘X-Priority’ and ‘X-MSMail-Priority’</li>
<li>Attachments</li>
<li>Header content type</li>
<li>Subject text</li>
<li>Body text<h2Shared Example RSpec for above mailer</h2></li>
</ul>
<p>The way I test most of this is using a shared example similar to the one below.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code"><pre><span class="n">shared_examples</span> <span class="s2">"a well tested mailer"</span> <span class="k">do</span>
<span class="n">let</span><span class="p">(</span><span class="ss">:greeting</span><span class="p">)</span> <span class="p">{</span> <span class="s2">"Darren"</span> <span class="p">}</span>
<span class="n">let</span><span class="p">(</span><span class="ss">:full_subject</span><span class="p">)</span> <span class="p">{</span> <span class="s2">"</span><span class="si">#{</span><span class="n">asserted_subject</span><span class="si">}</span><span class="s2">:You got mail!"</span> <span class="p">}</span>
<span class="n">let</span><span class="p">(</span><span class="ss">:mail</span><span class="p">)</span> <span class="p">{</span> <span class="n">mailer_class</span><span class="p">.</span><span class="nf">email</span><span class="p">(</span><span class="n">greeting</span><span class="p">)</span> <span class="p">}</span>
<span class="n">it</span> <span class="s2">"renders the headers"</span> <span class="k">do</span>
<span class="n">mail</span><span class="p">.</span><span class="nf">content_type</span><span class="p">.</span><span class="nf">should</span> <span class="n">start_with</span><span class="p">(</span><span class="s1">'multipart/alternative'</span><span class="p">)</span> <span class="c1">#html / text support</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">"sets the correct subject"</span> <span class="k">do</span>
<span class="n">mail</span><span class="p">.</span><span class="nf">subject</span><span class="p">.</span><span class="nf">should</span> <span class="n">eq</span><span class="p">(</span><span class="n">full_subject</span><span class="p">)</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">"includes asserted_body in the body of the email"</span> <span class="k">do</span>
<span class="n">asserted_body</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">content</span><span class="o">|</span>
<span class="n">mail</span><span class="p">.</span><span class="nf">body</span><span class="p">.</span><span class="nf">encoded</span><span class="p">.</span><span class="nf">should</span> <span class="n">match</span><span class="p">(</span><span class="n">content</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">"should be from 'from@example.com'"</span> <span class="k">do</span>
<span class="n">mail</span><span class="p">.</span><span class="nf">from</span><span class="p">.</span><span class="nf">should</span> <span class="kp">include</span><span class="p">(</span><span class="s1">'from@example.com'</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Somethings I want to point out about this shared example:</p>
<ul>
<li>Its possible to test multiple content assertions in one go by passing in an array of different content expected. I usually do this for the body.</li>
<li>Same goes with the subject. We can test that the subject contains some certain text in the context of our mailer</li>
<li>We can swap out different mailers by setting the <code class="language-plaintext highlighter-rouge">mailer_class</code> variable to a different class (as long, in this case, the template is called ‘email’ although this can also be dynamic too if we like).</li>
</ul>
<p>Notice that we can treat this shared example, as all shared examples can, like a method call where we ‘pass in’ certain parameters to work against. You may notice in the above shared examples, variables listed that are not explicitly declared like <code class="language-plaintext highlighter-rouge">full_subject</code>, <code class="language-plaintext highlighter-rouge">asserted_body</code> and <code class="language-plaintext highlighter-rouge">mailer_class</code>. These are set outside of the shared example in the calling spec as shown below:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre><span class="n">describe</span> <span class="no">CoolMailer</span> <span class="k">do</span>
<span class="n">describe</span> <span class="s2">"email"</span> <span class="k">do</span>
<span class="n">let</span><span class="p">(</span><span class="ss">:mailer_class</span><span class="p">)</span> <span class="p">{</span> <span class="no">CoolMailer</span> <span class="p">}</span>
<span class="n">let</span><span class="p">(</span><span class="ss">:asserted_subject</span><span class="p">)</span> <span class="p">{</span> <span class="s2">"A cool mail!"</span> <span class="p">}</span>
<span class="n">let</span><span class="p">(</span><span class="ss">:asserted_body</span><span class="p">)</span> <span class="p">{</span> <span class="p">[</span><span class="s2">"This content"</span><span class="p">,</span> <span class="s2">"That content"</span><span class="p">]</span> <span class="p">}</span>
<span class="n">it_behaves_like</span> <span class="s2">"a well tested mailer"</span> <span class="k">do</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="a-word-on-multipart-htmltext-emails">A word on multipart html/text emails</h2>
<p>You will notice in the shared example a spec for the headers to start with ‘multipart/alternative’. This ensures that our emails are being sent out in both plain text and html. How do we actually get this spec to pass? Fortunately this just works out of the box with ActionMailer! All we need to do is provide <strong>2 templates</strong>; one for html and one for plain text as follows:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">#email.html.erb
<span class="nt"><h1></span>CoolMailer#email<span class="nt"></h1></span></code></pre></figure>
<figure class="highlight"><pre><code class="language-html" data-lang="html">#email.text.erb
CoolMailer#email</code></pre></figure>
<p>The main thing that gets this to work is good old Rails ‘convention over configuration’. By simply placing the ‘.text.erb’ template and ‘.html.erb’ template with the same name (‘email’) ActionMailer automaticlly sends out a multipart email! Its that easy! Try removing the ‘.text.erb’ template and you will see the header spec fail with:</p>
<p><code class="language-plaintext highlighter-rouge">expected "text/html; charset=UTF-8" to start with "multipart/alternative"</code></p>
<h2 id="conclusion">Conclusion</h2>
<p>The purpose of this post was to demonstrate two things: testing mailers and using shared examples. You don’t have to use shared examples to test mailers, especially if you only have one mailer in your project. However, most large Rails applications will have multiple mailers so using shared examples makes sense.</p>
<p>As always, an example application is available for download here: <a href="https://github.com/tweetegy/testing_mailers">Testing Mailers example application</a></p>
Legacy Rails app (well 2.3.x) with (almost) latest Rspec, Capybara & Factory Girl2014-03-11T00:00:00+00:00http://tweetegy.com/2014/03/legacy-rails-app-well-2-3-x-almost-latest-rspec-capybara-factory-girl<p>I recently had a look at an oldish Rails project that uses Ruby version 1.8.7 and is running version 2.3.11 of Rails. One of the problems with this project was that it is completly untested! So I thought, since I prefer TDD (as it actually keeps me sane!) I would setup Rspec, Capybara and Factory Girl for this project.</p>
<p>My initial thoughts were that this would not be easy since it was an old version of Rails tied (currently) to Ruby 1.8.7. Fortunately, this turned out not to be the case and I found that <a href="https://rubygems.org/gems/rspec/versions/2.11.0">Rspec version 2.11.0</a> happily works!</p>
<h2 id="why-i-like-tdd">Why I like TDD?</h2>
<p>Just a quick note on why I like TDD and why I say it keeps me ‘sane’. The main reasons are:</p>
<ul>
<li>I know my stuff works</li>
<li>I can refactor with confidence</li>
<li>Its easier to develop and debug in test environment</li>
<li>I can sleep well at night!</li>
</ul>
<p>Anyway, enough of that, lets get onto the main topic of question here…</p>
<h2 id="gemfile">Gemfile</h2>
<p>Now I can add the remaining gems directly to the Gemfile like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre><span class="n">group</span> <span class="ss">:test</span> <span class="k">do</span>
<span class="n">gem</span> <span class="s1">'rspec'</span><span class="p">,</span> <span class="s1">'2.11.0'</span>
<span class="n">gem</span> <span class="s1">'capybara'</span><span class="p">,</span> <span class="s1">'1.1.4'</span>
<span class="n">gem</span> <span class="s1">'pry'</span>
<span class="n">gem</span> <span class="s1">'factory_girl'</span>
<span class="n">gem</span> <span class="s1">'database_cleaner'</span>
<span class="n">gem</span> <span class="s1">'shoulda-matchers'</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>So then all that was left was to let Bundler do the heavy lifting for finding and associating the correct versions of the Gem dependencies for all of these!</p>
<h2 id="sample-rails-2311-project">Sample Rails 2.3.11 project</h2>
<p>I have made a simple Rails 2.3.11 project that uses the above Gems and has some example specs to show that it does indeed work. It can be downloaded here: <a href="https://github.com/tweetegy/rspec_legacy_rails">rspec_legacy_rails</a></p>
<p>You will notice that we have had to explicitly set certain gem versions like nokogiri and mime-types etc. This is mainly due to the project using ruby 1.8.7 and most of these gems complain about that and ask for ruby 1.9.2 (or higher). While it would be better to upgrade ruby, since we assume, this project does not have any tests (for now) we’ll keep the version of Ruby set as it is. However, generally, for projects like this, I would spend a week or two getting a decent amount of the features (not all) covered with specs and then upgrade Ruby then upgrade Rails.</p>
<p>The thing that is great about this approach so far is that we are able to use a relatively new version of our testing frameworks. This means we don’t have to rewrite specs again once we upgrade. We should be able to fix any issues associated with the upgrade, maybe do some refactoring and then we are good to go!</p>
<h2 id="spec-helper-file">Spec Helper File</h2>
<p>This is probably the most important file for setup of the environment. What I have put into the file can probably be refactored. There are some lines I need to explain briefly too:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="c1"># This ensures that all the gems are required before we begin. Saves writing 'require ...' for each gem!</span>
<span class="no">Bundler</span><span class="p">.</span><span class="nf">require</span><span class="p">(</span><span class="ss">:test</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="c1"># This ensures that we have access to all the url helpers in the specs.</span>
<span class="n">config</span><span class="p">.</span><span class="nf">include</span> <span class="no">ActionController</span><span class="o">::</span><span class="no">UrlWriter</span>
</pre></td></tr></tbody></table></code></pre></figure>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="c1"># This ensures that we can use the Capybara DSL methods like 'visit' for our integration specs</span>
<span class="n">config</span><span class="p">.</span><span class="nf">include</span> <span class="no">Capybara</span><span class="o">::</span><span class="no">DSL</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="bindingpry-and-save_and_open_page">Binding.pry and save_and_open_page</h2>
<p>Another cool thing is that both <code class="language-plaintext highlighter-rouge">binding.pry</code> and <code class="language-plaintext highlighter-rouge">save_and_open_page</code> both work in this environment.</p>
<h2 id="conclusion">Conclusion</h2>
<p>The main point of all this is that while the project was ‘legacy’ Rails, using an ‘ancient’ version of Ruby and (worst of all) completely untested, I was able to set myself up with a comfortable test environment which (almost) resembled my environment for some more modern Rails (think version 4.x) applications that I am involved in. This allowed me to get on and add features, refactor and deploy with confidence (and sleep at night too!).</p>
<p>One other thing to note is that I have ONLY tried out Model and Integration (or Feature) specs in this app. This is mainly becuase these are the main set of spec types that I usually work with. Having said that, the Controller specs would be useful if we need to work with legacy Rails application that expose a RESTful API for a single page app, for example. Unfortunately, I can confirm that Controller specs do not appear to work in this setup, but feel free to have a go!</p>
Dissecting thesmallestrailsapp.com (Smallest Rails App: Newsflash)2014-03-04T00:00:00+00:00http://tweetegy.com/2014/03/dissecting-thesmallestrailsapp-com-smallest-rails-app-newsflash<p>Since starting this series, the inevitable has happened – The Smallest Rails app has been refactored! In this post I want to cover the recfactorings to the first line which affects the first blog post in this series <a href="http://www.tweetegy.com/2012/08/dissecting-thesmallestrailsapp-com-smallest-rails-app/" title="Dissecting thesmallestrailsapp.com (Smallest Rails App) (Part 1)"></a>.</p>
<p>To recap the first line was as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="sx">%w(action_controller/railtie coderay markaby)</span><span class="p">.</span><span class="nf">map</span> <span class="o">&</span><span class="nb">method</span><span class="p">(</span><span class="ss">:require</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Now this has been changed to the following (2) lines (Note: since writing this post the first line has been removed (see conclusion below):</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s2">"bundler/setup"</span>
<span class="no">Bundler</span><span class="p">.</span><span class="nf">require</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>For clarity, here is the <a href="https://github.com/artemave/thesmallestrailsapp.com/commit/3ad9c9c799ad0b4a90db2f08a53c8f31a2c13d67">commit diff</a> in Github for this change.</p>
<h2 id="compare-with-initial-commit">Compare with Initial Commit</h2>
<p>My first thought was that maybe this application was not using Bundler (before), but I can confirm that the first commit of this project was and even had the line ` require ‘bundler/setup’` so its been used all the time. For your information the initial commit of this project has a commit SHA of “2215c1a” and if you want to see how this looked just simply clone the project and checkout that commit to detach your code from HEAD, as follows:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">git clone git@github.com:artemave/thesmallestrailsapp.com.git
git checkout 2215c1a63700f21d54d0d16466f5527932ac8df6</code></pre></figure>
<p>As you can see the application looks quite different from what it does now, but it does appear to be using Bundler. Perhaps another interesting series of posts would be to track the progress of changes to this app discussing the reason for each one, but maybe another day, for now let simply focus on the two lines that changed here.</p>
<p>By the way, if you want to get back to the HEAD for the repo, just run <code class="language-plaintext highlighter-rouge">git checkout master</code></p>
<h2 id="bundler-setup">Bundler Setup</h2>
<p>The first line <code class="language-plaintext highlighter-rouge">require 'bundler/setup'</code> simply runs: <a href="https://github.com/bundler/bundler/blob/master/lib/bundler/setup.rb">this code</a> which, in turn, runs the <code class="language-plaintext highlighter-rouge">Bundler.setup</code> method. What does this do? According to the <a href="http://bundler.io/bundler_setup.html">Bundler Docs</a> it <em>…configures the load path so all dependencies in your Gemfile can be required…</em>. Essentially it means that once <code class="language-plaintext highlighter-rouge">Bundler.setup</code> has run, its then possible to require any gems as declared in the Gemfile using <code class="language-plaintext highlighter-rouge">require</code> and be certain that the correct <em>bundled</em> version of that gem will be loaded.</p>
<p>So <code class="language-plaintext highlighter-rouge">Bundler.setup</code> simply ensures that the load path is correctly set so that require xyz gem will load the very gem as defined in the Gemfile.lock file.</p>
<h2 id="bundlerrequire">Bundler.require</h2>
<p>The next line does exactly what it says, it requires all the gems! In fact, this is a little known command that will require <em>all</em> the gems in the Gemfile. The alternative is to require each gem one by one, in this case ‘rails, ‘coderay’ and ‘markaby’. However, since this is the <em>Smallest</em> Rails app, we use <code class="language-plaintext highlighter-rouge">Bundler.require</code> to require <em>all</em> gems in one swoop!</p>
<p>Its also possible to execute the <code class="language-plaintext highlighter-rouge">require</code> method passing in a symbol representing the group that you desire to load. For example <code class="language-plaintext highlighter-rouge">Bundle.require(:development)</code> will require <em>all</em> declared gems in the development group of your Gemfile. Its possible to pass in <a href="http://bundler.io/v1.3/groups.html">multiple groups</a> separated by comma too.</p>
<h2 id="bundlersetup-and-bundle-exec">Bundler.setup and ‘bundle exec’</h2>
<p>Its worth mentioning here that running ‘bundle exec’ on the command line before starting the Smallest Rails App ensures that the load path is setup correctly (essentially the same as <code class="language-plaintext highlighter-rouge">require "bundler/setup"</code>) and thus means that its possible to run the Smallest Rails App without the <code class="language-plaintext highlighter-rouge">require "bundler/setup"</code> line. I have commented on this line of code to the author of the Smallest Rails App and he has since removed this line from the application!</p>
<h2 id="conclusion">Conclusion</h2>
<p>The Smallest Rails app will still probably be able to get smaller as gems and approaches change. In the meantime, for our purpose, it serves as an interesting digest of new techniques to learn about Rails and its associated gems (in this case Bundler!).</p>
Testing infinite scroll using RSpec and Capybara (without sleep or wait_until)2013-05-31T00:00:00+00:00http://tweetegy.com/2013/05/testing-infinite-scroll-using-rspec-without-sleep-or-wait-until<p>Recently I added some functionality to an index page that required infinite scrolling. The idea is that on the index view as the user scrolls down the page, and reaches near to the bottom of that page, an Ajax request is made to the server to fetch the next set of records.</p>
<p>In my opinion for this type of view it is much nicer than using pagination (although the solution can still use a pagination Gem in the background, in my case <a href="https://github.com/amatsuda/kaminari">Kaminari</a>).</p>
<h2 id="rspec--capybara">RSpec / Capybara</h2>
<p>I will not go into the implementation which is really quite trivial. There is an excellent <a href=’http://railscasts.com/episodes/114-endless-page-revised’</a>RailsCast available for ‘Endless Page’ solution</a> available already. However, I will demonstrate here how I tested this using RSpec & Capybara. Below is the spec:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre><span class="n">describe</span> <span class="s2">"People index"</span> <span class="k">do</span>
<span class="n">let!</span><span class="p">(</span><span class="ss">:person</span><span class="p">)</span> <span class="p">{</span> <span class="n">create</span><span class="p">(</span><span class="ss">:person</span><span class="p">)</span> <span class="p">}</span>
<span class="n">before</span> <span class="k">do</span>
<span class="n">visit</span> <span class="n">people_path</span>
<span class="k">end</span>
<span class="n">it</span> <span class="s2">"loads more records when scroll to bottom of page"</span><span class="p">,</span> <span class="ss">:js</span> <span class="o">=></span> <span class="kp">true</span> <span class="k">do</span>
<span class="n">default_per_page</span> <span class="o">=</span> <span class="no">Kaminari</span><span class="p">.</span><span class="nf">config</span><span class="p">.</span><span class="nf">default_per_page</span>
<span class="n">create_list</span><span class="p">(</span><span class="ss">:person</span><span class="p">,</span> <span class="n">default_per_page</span><span class="p">)</span>
<span class="no">Person</span><span class="p">.</span><span class="nf">count</span><span class="p">.</span><span class="nf">should</span> <span class="o">></span> <span class="n">default_per_page</span>
<span class="n">visit</span> <span class="n">current_path</span>
<span class="n">page</span><span class="p">.</span><span class="nf">should</span> <span class="n">have_css</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">,</span> <span class="ss">:count</span> <span class="o">=></span> <span class="n">default_per_page</span><span class="p">)</span>
<span class="n">page</span><span class="p">.</span><span class="nf">execute_script</span><span class="p">(</span><span class="s1">'window.scrollTo(0,100000)'</span><span class="p">)</span>
<span class="n">page</span><span class="p">.</span><span class="nf">should</span> <span class="n">have_css</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">,</span> <span class="ss">:count</span> <span class="o">=></span> <span class="no">Person</span><span class="p">.</span><span class="nf">count</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Firstly notice that we set <code class="language-plaintext highlighter-rouge">default_per_page</code> to our pagination engine (in this case Kaminari). Then we create that many resources (here its Person resource). The idea is that when Capybara visits the index page (<code class="language-plaintext highlighter-rouge">people_path</code>) there will be (at least) one resource not loaded on that page yet (until scrolling to the bottom of the page). The important thing is to create <em>at least</em> <code class="language-plaintext highlighter-rouge">default_per_page</code> + 1 resources so that this is testable.</p>
<p>We confirm that there are indeed more resources in the database than the <code class="language-plaintext highlighter-rouge">default_per_page</code> with the following line:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="no">Person</span><span class="p">.</span><span class="nf">count</span><span class="p">.</span><span class="nf">should</span> <span class="o">></span> <span class="n">default_per_page</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Once we load the people index page, an assertion is made that the page should contain the same number of resources as defined in the <code class="language-plaintext highlighter-rouge">default_per_page</code> variable. This is what we expect from our pagination solution anyway.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">page</span><span class="p">.</span><span class="nf">should</span> <span class="n">have_css</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">,</span> <span class="ss">:count</span> <span class="o">=></span> <span class="n">default_per_page</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The following line actually scrolls the page down to the bottom which should trigger the Ajax request to load more records.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">page</span><span class="p">.</span><span class="nf">execute_script</span><span class="p">(</span><span class="s1">'window.scrollTo(0,100000)'</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This is then asserted in the next line that the page now contains <code class="language-plaintext highlighter-rouge">People.count</code> rows in the table.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">page</span><span class="p">.</span><span class="nf">should</span> <span class="n">have_css</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">,</span> <span class="ss">:count</span> <span class="o">=></span> <span class="no">Person</span><span class="p">.</span><span class="nf">count</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="sleeping-on-the-job">Sleep(ing) on the job</h2>
<p>My first version of this spec was always failing until I put a little <code class="language-plaintext highlighter-rouge">sleep</code> call before the final assertion. I initially thought this might be necessary to let the DOM properly load following the Ajax call. It turns out, however, that the <code class="language-plaintext highlighter-rouge">sleep</code> call was required because I was not writing the assert in the correct way. Here is how the last three lines of my spec looked (<strong>don’t do this!</strong>):</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="c1">#rest of spec is the same as above example</span>
<span class="n">page</span><span class="p">.</span><span class="nf">all</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">).</span><span class="nf">count</span><span class="p">.</span><span class="nf">should</span> <span class="n">eq</span> <span class="n">default_per_page</span>
<span class="n">page</span><span class="p">.</span><span class="nf">execute_script</span><span class="p">(</span><span class="s1">'window.scrollTo(0,100000)'</span><span class="p">)</span> <span class="c1">#scroll to the bottom of the page</span>
<span class="nb">sleep</span> <span class="mi">1</span> <span class="c1">#NOTE: THIS SHOULD NOT BE NECESSARY.</span>
<span class="n">page</span><span class="p">.</span><span class="nf">all</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">).</span><span class="nf">count</span><span class="p">.</span><span class="nf">should</span> <span class="n">eq</span> <span class="no">Person</span><span class="p">.</span><span class="nf">count</span> <span class="c1">#NOTE: THIS IS NOT THE CORRECT WAY TO ASSERT THIS!</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The problem is in calling <code class="language-plaintext highlighter-rouge">page.all</code> passing in a selector like this runs immediately and the page is indeed not given a chance to update following the Ajax request. This is why I added a <code class="language-plaintext highlighter-rouge">sleep</code> call before it. But wait…I checked on the <a href="http://learn.thoughtbot.com/test-driven-rails-resources/capybara.pdf">Capybara Cheat Sheet</a> and found that there was a <code class="language-plaintext highlighter-rouge">wait_unitl</code> method so maybe that is what I need!</p>
<h2 id="capybara-wait_until">Capybara wait_until</h2>
<p>So I drop the <code class="language-plaintext highlighter-rouge">wait_until</code> method into my spec as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="c1">#rest of spec is the same as above example</span>
<span class="n">page</span><span class="p">.</span><span class="nf">all</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">).</span><span class="nf">count</span><span class="p">.</span><span class="nf">should</span> <span class="n">eq</span> <span class="n">default_per_page</span>
<span class="n">page</span><span class="p">.</span><span class="nf">execute_script</span><span class="p">(</span><span class="s1">'window.scrollTo(0,100000)'</span><span class="p">)</span> <span class="c1">#scroll to the bottom of the page</span>
<span class="n">wait_until</span> <span class="p">{</span> <span class="n">page</span><span class="p">.</span><span class="nf">has_content?</span><span class="p">(</span><span class="no">Person</span><span class="p">.</span><span class="nf">last</span><span class="p">.</span><span class="nf">name</span><span class="p">)</span> <span class="p">}</span> <span class="c1">#NOTE: THIS DOES NOT WORK IN CAPYBARA 2.x</span>
<span class="n">page</span><span class="p">.</span><span class="nf">all</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">).</span><span class="nf">count</span><span class="p">.</span><span class="nf">should</span> <span class="n">eq</span> <span class="no">Person</span><span class="p">.</span><span class="nf">count</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>However, to my surprise I get the following runtime error when I execute the spec:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="no">NoMethodError</span><span class="p">:</span> <span class="n">undefined</span> <span class="nb">method</span> <span class="s1">'wait_until'</span> <span class="k">for</span> <span class="c1">#&lt;RSpec::Core::ExampleGroup::N...</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>After some quick Googling I discovered that <a href="http://www.elabs.se/blog/53-why-wait_until-was-removed-from-capybara"><code class="language-plaintext highlighter-rouge">wait_until</code> has been removed from Capybara 2.0.0</a> (I am using Capybara 2.1.0, in fact). It was indeed <a href="http://www.elabs.se/blog/53-why-wait_until-was-removed-from-capybara">this blog post</a> that led me to realize I was writing my assertion incorrectly and caused me to refactor it to its final solution:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">page</span><span class="p">.</span><span class="nf">should</span> <span class="n">have_css</span><span class="p">(</span><span class="s1">'.table-index tbody tr'</span><span class="p">,</span> <span class="ss">:count</span> <span class="o">=></span> <span class="no">Person</span><span class="p">.</span><span class="nf">count</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This implicitly waits for the content to load (or timesout). For more details on exactly how this works, how to change the timeout etc, I recommend reading the suggested blog post on this subject (or the <a href="http://rdoc.info/github/jnicklas/capybara">Capybara Docs</a>).</p>
<h2 id="conclusion">Conclusion</h2>
<p>I have to admit that when I wrote the spec initially using the <code class="language-plaintext highlighter-rouge">sleep</code> method it did smell bad. This is why I went ahead and did a little research into better ways of doing this. If the <code class="language-plaintext highlighter-rouge">wait_until</code> method was still in Capybara I would have probably (still in error) used that. However, it is a joy to learn that CSS selector methods such as <code class="language-plaintext highlighter-rouge">have_css</code> implicitly wait until the DOM is loaded making the spec much cleaner!</p>
Create Nested Polymorphic Comments with Rails and Ancestry Gem2013-04-04T00:00:00+00:00http://tweetegy.com/2013/04/create-nested-comments-in-rails-using-ancestry-gem<p>I know the post title sounds a little complex and a real mouth full but, hey, its just a commenting solution that can be applied to any resource in a Rails application. Additionally, comments can be commented on (hence ‘nested polymorphic comments’).</p>
<p>By the way, this post comes with a <a href="https://github.com/tweetegy/polymorphic_ancestry">full working Rails Application example</a> available on Github. The code is not <em>exactly</em> the same as shown below but the application should work if you follow the README!</p>
<p>So, therefore, in this post I am going to build an application that uses the Ancestry Gem to enable a hand rolled nested commenting system! You can think of this as an example that combines the techniques demonstrated in <a href="http://railscasts.com/episodes/154-polymorphic-association">RailsCasts episode 154</a> – polymorphic associations and <a href="http://railscasts.com/episodes/262-trees-with-ancestry">RailsCasts episode 262</a> – trees with ancestry.</p>
<h2 id="installation">Installation</h2>
<p>First up, install the excellent <a href="https://github.com/stefankroes/ancestry">Ancestry Gem</a>. I am using Rails 3 so this is what I will demonstrate here. As always, its pretty straightforward to install and setup. Simply,</p>
<p>Add this to your Gemfile (and, of course, run “bundle” to install it!)</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">gem</span> <span class="s1">'ancestry'</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Add the ancestry column to any tables that require it. In my application, I’ll add it to comments as part of the “change” migration since this is a brand new application.</p>
<p>Here is how my migration looks after manually adding the index (obviously run rake db:migrate to update your database with these changes). Note that I add <code class="language-plaintext highlighter-rouge">commentable_id</code> and <code class="language-plaintext highlighter-rouge">commentable_type</code> so that comments is polymorphic and can be added as a <code class="language-plaintext highlighter-rouge">has_many</code> association to any model that requires comments.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">CreateComments</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Migration</span>
<span class="k">def</span> <span class="nf">change</span>
<span class="n">create_table</span> <span class="ss">:comments</span> <span class="k">do</span> <span class="o">|</span><span class="n">t</span><span class="o">|</span>
<span class="n">t</span><span class="p">.</span><span class="nf">text</span> <span class="ss">:content</span>
<span class="n">t</span><span class="p">.</span><span class="nf">integer</span> <span class="ss">:commentable_id</span>
<span class="n">t</span><span class="p">.</span><span class="nf">string</span> <span class="ss">:commentable_type</span>
<span class="n">t</span><span class="p">.</span><span class="nf">string</span> <span class="ss">:ancestry</span>
<span class="n">t</span><span class="p">.</span><span class="nf">timestamps</span>
<span class="k">end</span>
<span class="n">add_index</span> <span class="ss">:comments</span><span class="p">,</span> <span class="ss">:ancestry</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Add the <code class="language-plaintext highlighter-rouge">has_ancestry</code> call to your model, like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Comment</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">has_ancestry</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Additionally, add <code class="language-plaintext highlighter-rouge">has_comments</code> to any model that you want to make ‘commentable’. Let’s make this application something related to movies (as I am real fan!). In this case I’ll make the <code class="language-plaintext highlighter-rouge">Movie</code> model commentable by adding a <code class="language-plaintext highlighter-rouge">has_many</code> association to it like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Movie</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">has_many</span> <span class="ss">:comments</span><span class="p">,</span> <span class="ss">:as</span> <span class="o">=></span> <span class="ss">:commentable</span><span class="p">,</span> <span class="ss">:dependent</span> <span class="o">=></span> <span class="ss">:destroy</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Thats it for the setup!</p>
<h2 id="rendering-out-some-nested-comments">Rendering out some nested comments</h2>
<p>Since the main benefit of using the Ancestry gem is how it stores data in a tree like structure, we’ll get straight on to displaying our comments as a nested tree.</p>
<p>Firstly create this helper method. This solution was inspired from the following <a href="http://railscasts.com/episodes/262-trees-with-ancestry">RailsCast</a> on this subject:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="code"><pre><span class="k">module</span> <span class="nn">CommentsHelper</span>
<span class="k">def</span> <span class="nf">nested_comments</span><span class="p">(</span><span class="n">comments</span><span class="p">)</span>
<span class="n">comments</span><span class="p">.</span><span class="nf">map</span> <span class="k">do</span> <span class="o">|</span><span class="n">comment</span><span class="p">,</span> <span class="n">sub_comments</span><span class="o">|</span>
<span class="n">content_tag</span><span class="p">(</span><span class="ss">:div</span><span class="p">,</span> <span class="n">render</span><span class="p">(</span><span class="n">comment</span><span class="p">),</span> <span class="ss">:class</span> <span class="o">=></span> <span class="s2">"media"</span><span class="p">)</span>
<span class="k">end</span><span class="p">.</span><span class="nf">join</span><span class="p">.</span><span class="nf">html_safe</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Next, call this helper method from your <em>show</em> view to render the nested comments!</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="o">=</span> <span class="n">nested_comments</span> <span class="vi">@comments</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The actual comment partial (which will live in <code class="language-plaintext highlighter-rouge">views/comments/_comment.html.haml</code>) looks like this (note the recursive call to <code class="language-plaintext highlighter-rouge">nested_comments</code> in the last line!).</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="p">.</span><span class="nf">media</span><span class="o">-</span><span class="n">body</span>
<span class="o">%</span><span class="n">h4</span><span class="p">.</span><span class="nf">media</span><span class="o">-</span><span class="n">heading</span><span class="o">=</span><span class="n">comment</span><span class="p">.</span><span class="nf">user</span><span class="p">.</span><span class="nf">name</span>
<span class="sx">%i= comment.created_at.strftime('%b %d, %Y at %H:%M')
%p=</span> <span class="n">simple_format</span> <span class="n">comment</span><span class="p">.</span><span class="nf">content</span>
<span class="o">=</span> <span class="n">nested_comments</span> <span class="n">comment</span><span class="p">.</span><span class="nf">children</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="adding-a-new-comment--thread">Adding a new comment / thread</h2>
<p>Now lets look at how to create a new thread. What we need is to render at the bottom of our show view, right after the <code class="language-plaintext highlighter-rouge">nested_comments</code> call, a form to start a new comment thread. We’ll render a shared partial in this case since we will want to use the same form for any thing that is commentable:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre><span class="c1">#In the show view</span>
<span class="o">=</span> <span class="n">render</span> <span class="s2">"comments/form"</span>
<span class="c1"># In comments/_form partial</span>
<span class="o">=</span> <span class="n">form_for</span> <span class="p">[</span><span class="vi">@commentable</span><span class="p">,</span> <span class="vi">@comment</span><span class="p">]</span> <span class="k">do</span> <span class="o">|</span><span class="n">f</span><span class="o">|</span>
<span class="o">=</span> <span class="n">f</span><span class="p">.</span><span class="nf">hidden_field</span> <span class="ss">:parent_id</span>
<span class="o">%</span><span class="nb">p</span>
<span class="o">=</span> <span class="n">f</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:content</span><span class="p">,</span> <span class="s2">"New comment"</span>
<span class="o">%</span><span class="n">br</span>
<span class="o">=</span> <span class="n">f</span><span class="p">.</span><span class="nf">text_area</span> <span class="ss">:content</span><span class="p">,</span> <span class="ss">:rows</span> <span class="o">=></span> <span class="mi">4</span>
<span class="o">%</span><span class="nb">p</span>
<span class="o">=</span> <span class="n">f</span><span class="p">.</span><span class="nf">submit</span> <span class="s2">"Post Comment"</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>You might now be wondering where are the instance variables <code class="language-plaintext highlighter-rouge">@commentable</code> and <code class="language-plaintext highlighter-rouge">@comment</code> being set? Well we could set these directly in the <code class="language-plaintext highlighter-rouge">show</code> action of the <code class="language-plaintext highlighter-rouge">MoviesController</code>, however, that would quickly lead to code duplication when we want to make another model commentable. How about we make a module and include that into our controller instead? That way any model that is commentable, we only need to include the module into the corresponding controller. Here is the code for the <code class="language-plaintext highlighter-rouge">Commentable</code> module:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'active_support/concern'</span>
<span class="k">module</span> <span class="nn">FilmFan::Commentable</span>
<span class="kp">extend</span> <span class="no">ActiveSupport</span><span class="o">::</span><span class="no">Concern</span>
<span class="n">included</span> <span class="k">do</span>
<span class="n">before_filter</span> <span class="ss">:comments</span><span class="p">,</span> <span class="n">only</span> <span class="o">=></span> <span class="p">[</span><span class="ss">:show</span><span class="p">]</span>
<span class="k">end</span>
<span class="k">def</span> <span class="nf">comments</span>
<span class="vi">@commentable</span> <span class="o">=</span> <span class="n">find_commentable</span>
<span class="vi">@comments</span> <span class="o">=</span> <span class="vi">@commentable</span><span class="p">.</span><span class="nf">comments</span><span class="p">.</span><span class="nf">arrange</span><span class="p">(</span><span class="ss">:order</span> <span class="o">=></span> <span class="ss">:created_at</span><span class="p">)</span>
<span class="vi">@comment</span> <span class="o">=</span> <span class="no">Comment</span><span class="p">.</span><span class="nf">new</span>
<span class="k">end</span>
<span class="kp">private</span>
<span class="k">def</span> <span class="nf">find_commentable</span>
<span class="k">return</span> <span class="n">params</span><span class="p">[</span><span class="ss">:controller</span><span class="p">].</span><span class="nf">singularize</span><span class="p">.</span><span class="nf">classify</span><span class="p">.</span><span class="nf">constantize</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="n">params</span><span class="p">[</span><span class="ss">:id</span><span class="p">])</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="c1"># In MoviesController</span>
<span class="k">class</span> <span class="nc">MoviesController</span> <span class="o"><</span> <span class="no">ApplicationController</span>
<span class="kp">include</span> <span class="no">FilmFan</span><span class="o">::</span><span class="no">Commentable</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Thats nice as it cleans up our Controllers show actions. However, there is still an issue! The form partial <code class="language-plaintext highlighter-rouge">form_for [@commentable, @comment]</code> declaration means that we need to post to a <em>generic</em> CommentsController each time - not the actual controller that is “commetnable”. This means we need to create this controller and provide a create method in it.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">CommentsController</span> <span class="o"><</span> <span class="no">ApplicationController</span>
<span class="k">def</span> <span class="nf">create</span>
<span class="vi">@commentable</span> <span class="o">=</span> <span class="n">find_commentable</span>
<span class="vi">@comment</span> <span class="o">=</span> <span class="vi">@commentable</span><span class="p">.</span><span class="nf">comments</span><span class="p">.</span><span class="nf">build</span><span class="p">(</span><span class="n">params</span><span class="p">[</span><span class="ss">:comment</span><span class="p">])</span>
<span class="k">if</span> <span class="vi">@comment</span><span class="p">.</span><span class="nf">save</span>
<span class="n">flash</span><span class="p">[</span><span class="ss">:notice</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"Successfully created comment."</span>
<span class="n">redirect_to</span> <span class="vi">@commentable</span>
<span class="k">else</span>
<span class="n">flash</span><span class="p">[</span><span class="ss">:error</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"Error adding comment."</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="kp">private</span>
<span class="k">def</span> <span class="nf">find_commentable</span>
<span class="n">params</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="nb">name</span><span class="p">,</span> <span class="n">value</span><span class="o">|</span>
<span class="k">if</span> <span class="nb">name</span> <span class="o">=~</span> <span class="sr">/(.+)_id$/</span>
<span class="k">return</span> <span class="vg">$1</span><span class="p">.</span><span class="nf">classify</span><span class="p">.</span><span class="nf">constantize</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="n">value</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="kp">nil</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Note the <code class="language-plaintext highlighter-rouge">find_commentable</code> method courtasy of <a href="http://railscasts.com/episodes/262-trees-with-ancestry">RailsCast episode 262</a>.</p>
<h2 id="adding-nested-comments">Adding nested comments</h2>
<p>Now lets combine the ‘polymorphic’ with the ‘ancestor’ and thus add the functionality to create a comment of a comment! The first thing to do is add a ‘reply’ link in our comment partial. This can go just above the recursive call to <code class="language-plaintext highlighter-rouge">nested_comments</code> so that we get this link rendered just after each comment. Note the use of the helper method <code class="language-plaintext highlighter-rouge">new_polymorphic_path</code> and that we still use the <code class="language-plaintext highlighter-rouge">@commentable</code> instance but in this case we pass an instance of Comment.new so that link will call the <code class="language-plaintext highlighter-rouge">CommentController#new</code> action. Note also that we are passing in a <code class="language-plaintext highlighter-rouge">parent_id</code> which the Ancestry gem requires for building the tree.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="c1"># start of partial ommitted....</span>
<span class="p">.</span><span class="nf">actions</span>
<span class="o">=</span> <span class="n">link_to</span> <span class="s2">"Reply"</span><span class="p">,</span> <span class="n">new_polymorphic_path</span><span class="p">([</span><span class="vi">@commentable</span><span class="p">,</span> <span class="no">Comment</span><span class="p">.</span><span class="nf">new</span><span class="p">],</span> <span class="ss">:parent_id</span> <span class="o">=></span> <span class="n">comment</span><span class="p">)</span>
<span class="o">=</span> <span class="n">nested_comments</span> <span class="n">comment</span><span class="p">.</span><span class="nf">children</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>As mentioned above, when the ‘Reply’ link is clicked the new action in the <code class="language-plaintext highlighter-rouge">CommentsController</code> is called. The method takes the commentable type, finds the actual instance of that using the private method <code class="language-plaintext highlighter-rouge">find_commentable</code> (shown above) and creates and new instance of Comment based on these parameters. The method looks like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">CommentsController</span> <span class="o"><</span> <span class="no">ApplicationController</span>
<span class="k">def</span> <span class="nf">new</span>
<span class="vi">@parent_id</span> <span class="o">=</span> <span class="n">params</span><span class="p">.</span><span class="nf">delete</span><span class="p">(</span><span class="ss">:parent_id</span><span class="p">)</span>
<span class="vi">@commentable</span> <span class="o">=</span> <span class="n">find_commentable</span>
<span class="vi">@comment</span> <span class="o">=</span> <span class="no">Comment</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span> <span class="ss">:parent_id</span> <span class="o">=></span> <span class="vi">@parent_id</span><span class="p">,</span>
<span class="ss">:commentable_id</span> <span class="o">=></span> <span class="vi">@commentable</span><span class="p">.</span><span class="nf">id</span><span class="p">,</span>
<span class="ss">:commentable_type</span> <span class="o">=></span> <span class="vi">@commentable</span><span class="p">.</span><span class="nf">class</span><span class="p">.</span><span class="nf">to_s</span><span class="p">)</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The final piece of the puzzle is the form which needs to be rendered here. While it would be more desirable to render the form inline using an Ajax solution, here we will just simply render another view with the corresponding form that contains the new <code class="language-plaintext highlighter-rouge">Comment</code> object (with the correct <code class="language-plaintext highlighter-rouge">commentable_id</code>, <code class="language-plaintext highlighter-rouge">commentable_type</code> and <code class="language-plaintext highlighter-rouge">parent_id</code> all set, of course!).</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="c1"># In comments/new.html.haml</span>
<span class="o">%</span><span class="n">h1</span> <span class="no">New</span> <span class="no">Comment</span>
<span class="o">=</span> <span class="n">render</span> <span class="s1">'form'</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Actually, the form that is rendered is the same comments form partial as shown above. Of course, in this case the @comment instance variable now represents a new <em>child</em> comment since its parent id is now set!</p>
<h2 id="enabling-another-resource-commentable">Enabling another resource ‘commentable’</h2>
<p>Now lets add an <code class="language-plaintext highlighter-rouge">Actor</code> to the mix with the association <code class="language-plaintext highlighter-rouge">Movie <= has_and_belongs_to_many => Actors</code>. How would we make the Actor resource commentable? Simply follow these steps:</p>
<ol>
<li>Add “has_many :comments, :as => :commentable, :dependent => :destroy” to the Actor model</li>
<li>Include the FilmFan::Commentable into the ActorsController</li>
<li>Add the “nested_comments @comments” and “render “comments/form” calls to the base of the Actor show view</li>
<li>Finally, add the nested comments resource route for actors in your routes file, just as you did with movies. </ol>
<h2 id="conclusion">Conclusion</h2>
<p>I hope you enjoyed this post and that you find this useful in your own projects. Here is a link to the Github project with a <a href="https://github.com/tweetegy/polymorphic_ancestry">full working Rails Application example</a>.</p>
</li>
</ol>
Dissecting thesmallestrailsapp.com (Smallest Rails App: line 4)2013-01-07T00:00:00+00:00http://tweetegy.com/2013/01/dissecting-thesmallestrailsapp-com-smallest-rails-app-line-4<p>In this post, I will carry on from where I left off in the previous post and continue my dissection of the Smallest Rails app! This takes us onto line 4 of the code. Line 4 looks like this:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">config</span><span class="p">.</span><span class="nf">secret_token</span> <span class="o">=</span> <span class="n">routes</span><span class="p">.</span><span class="nf">append</span> <span class="p">{</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This shows the Rails config <code class="language-plaintext highlighter-rouge">secret_token</code> being set to return value of routes.append. What’s going on here then and why are we even doing this?</p>
<h2 id="rails-configsecret_token">Rails config.secret_token</h2>
<p>In order for Rails to process requests <code class="language-plaintext highlighter-rouge">config.secret_token</code> must be set to a random string of at least 30 chars that is difficult (near impossible) to guess. The purpose of the secret key is to verify the integrity of signed cookies :) without it Rails will fail to process requests with the following 500 error:
<code class="language-plaintext highlighter-rouge">ArgumentError (A secret is required to generate an integrity hash for cookie session data. Use config.secret_token = "some secret phrase of at least 30 characters" in config/initializers/secret_token.rb)</code></p>
<p>This is a generic error message since the <code class="language-plaintext highlighter-rouge">secret_token</code> in the Smallest Rails App is set in config.ru file. Notice the comment <em>“some secret phrase of at least 30 characters”</em> which means the phrase can be any string (30 chars or more in length). In the Smallest Rails App this is set to the string value of the <code class="language-plaintext highlighter-rouge">routes.append</code> block (notice the call to <code class="language-plaintext highlighter-rouge">to_s</code> in line 14). On my machine this returns the following <em>string</em>:
<code class="language-plaintext highlighter-rouge">[#<Proc:0x007fa5842838c8@/thesmallestrailsapp.com/config.ru:5>]</code></p>
<p>Note that in a conventional Rails App the <code class="language-plaintext highlighter-rouge">secret_token</code> will be generated automatically and will look something like this <code class="language-plaintext highlighter-rouge">0eb7e863b78c7bdc52376bc0f24b2c634fa8e1ca83e2d7b695da86b44e80194.....</code>.</p>
<p>If you need to regenerate the secret_key you can run <code class="language-plaintext highlighter-rouge">SecureRandom.hex(64)</code> in the console and copy the output to your initializer file or run <code class="language-plaintext highlighter-rouge">rake secret</code> which does this same thing without having to log into the Rails console.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="n">rake</span> <span class="n">secret</span>
<span class="no">Generate</span> <span class="n">a</span> <span class="n">cryptographically</span> <span class="n">secure</span> <span class="n">secret</span> <span class="n">key</span> <span class="p">(</span><span class="n">this</span> <span class="n">is</span> <span class="n">typically</span> <span class="n">used</span> <span class="n">to</span> <span class="n">generate</span> <span class="n">a</span> <span class="n">secret</span> <span class="k">for</span> <span class="n">cookie</span> <span class="n">sessions</span><span class="p">)</span><span class="o">.</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p><strong>Warning</strong>: if you change this key you will need to restart your application. Additionally, existing signed cookies will become invalid effectively throwing currently logged in or in session users off your system! It’s probably not necessary to ever change this key unless you think your applications security has been compromised.</p>
<h2 id="secure-your-secret-token">Secure your Secret Token</h2>
<p>A quick note about securing your secret token. If your project is open source or you have a number of developers working on a private repo then you <em>should not</em> commit the actual production secret token into your source control repository! Since the secret token can be used to generate signed cookies then it is possible for a hacker to create valid cookies for an admin or other user of your application. The recent <a href="https://groups.google.com/forum/?fromgroups=#!topic/rubyonrails-security/DCNTNp_qjFM">SQL injection vulnerability in Rails</a> used knowledge of the secret token to achieve this.</p>
<p>The following post on <a href="http://biggestfool.tumblr.com/post/24049554541/reminder-secret-token-rb-is-named-so-for-a-reason">keeping your secret token a secret</a> has more on this subject!</p>
<h2 id="rails-routesappend">Rails routes.append</h2>
<p>Rails Routes is a fundamental part of the Rails framework. It tells Rails what to execute based on the pattern of the incoming request url. Naturally, even the Smallest Rails App needs at least one route! In this case it is the <code class="language-plaintext highlighter-rouge">root</code> route that is being configured (on the next line actually, line 5). For now lets briefly investigate what exactly <code class="language-plaintext highlighter-rouge">routes.append</code> does.</p>
<p><code class="language-plaintext highlighter-rouge">routes.append</code> works in a very similar way to <code class="language-plaintext highlighter-rouge">routes.draw</code>. The only apparent difference is that routes.draw does not work before the application is initialized. As far as I can tell <code class="language-plaintext highlighter-rouge">routes.append</code> (and the <code class="language-plaintext highlighter-rouge">routes.prepend</code> cousin) allow for <a href="http://openhood.com/rails/rails%203/2010/07/20/add-routes-at-runtime-rails-3/">new Rails routes to be added at runtime</a>.</p>
<p>In conventional Rails applications routes are ‘drawn’ in the routes.rb file by passing a block to the <code class="language-plaintext highlighter-rouge">draw</code> method call. Within the block, developers have access to a DSL for defining their applications routing. Some of the commonly used methods in the DSL are <code class="language-plaintext highlighter-rouge">root</code> (as used in the Smallest Rails App) for defining the root url (‘/’) action within the application. Another very common method call is to <code class="language-plaintext highlighter-rouge">resources</code> which is a very powerful way to create a RESTful endpoint for a particular resource within your application.</p>
<p>Rails routing is a big topic and for further information it is best to read the <a href="http://guides.rubyonrails.org/routing.html">Rails Guide to Routing</a>.</p>
<h2 id="conclusion">Conclusion</h2>
<p>Line 4 of the Smallest Rails App introduces us to a few new concepts namely the <code class="language-plaintext highlighter-rouge">secret_token</code> and Rails routes. In the next post, I will cover line 5 of the application.</p>
Dissecting thesmallestrailsapp.com (Smallest Rails App: line 3)2012-12-31T00:00:00+00:00http://tweetegy.com/2012/12/dissecting-thesmallestrailsapp-com-smallest-rails-app-line-3<p>In this post, I will carry on from where I left off in the previous post and continue my dissection of the smallest Rails app! This takes us onto line 3 of the code (since line 2 is empty!). Line 3 looks like this:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">run</span> <span class="no">TheSmallestRailsApp</span> <span class="o">||=</span> <span class="no">Class</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="no">Rails</span><span class="o">::</span><span class="no">Application</span><span class="p">)</span> <span class="p">{</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This shows a call to <code class="language-plaintext highlighter-rouge">Class.new</code> which in Ruby means creating an anonymous class which inherits from the class passed into the new call.</p>
<h2 id="background-for-classnew">Background for Class.new</h2>
<p>The <a href="http://www.ruby-doc.org/core-1.9.3/Class.html#method-c-new">Class.new method signature</a> is <code class="language-plaintext highlighter-rouge">Class.new(super_class=Object)</code> which means that you can specify the superclass by passing in the Class constant or if nothing is specified the default superclass will be Object.</p>
<p>One thing to note with this technique is that the class is unnamed or anonymous until such point that it is assigned to a constant. In the case of The Smallest Rails App the new class is assigned to the constant <code class="language-plaintext highlighter-rouge">TheSmallestRailsApp</code>.</p>
<p>One use for this would be to create a new class that inherits from another but does not have any body. A common example is when it’s necessary in a Ruby application to have a domain specific named exception available for rescue. For example:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="no">SomeCustomIssue</span> <span class="o">=</span> <span class="no">Class</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="no">StandardError</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This way its possible to <code class="language-plaintext highlighter-rouge">rescue SomeCustomIssue</code> within the application. Using Class.new to define this custom Error class is far cleaner than using the more common class declaration syntax which would look like this:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">SomeCustomIssue</span> <span class="o"><</span> <span class="no">StandardError</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Class.new can also take a block of code which will can be used to define methods (using <code class="language-plaintext highlighter-rouge">class_eval</code>) in the new class. For more information on where developers might use Class.new check out <a href="http://blog.rubybestpractices.com/posts/gregory/anonymous_class_hacks.html">fun with class.new</a> and <a href="http://weblog.therealadam.com/2011/12/30/when-to-class-new/">when to class.new</a></p>
<h2 id="the-run-command">The run command</h2>
<p>Working backwards we see the “run” command at the start of the line. This is part of Rack and only works if executed on the command line using the <code class="language-plaintext highlighter-rouge">rackup</code> command. Usually the Ruby code for a Rack application is saved in a file called <code class="language-plaintext highlighter-rouge">config.ru</code> (especially in a Rails app) however this is not necessary and can be saved as a ruby file (with .rb extension) too.</p>
<p>Another intesting thing to note is that the run command comes from the <a href="http://rack.rubyforge.org/doc/classes/Rack/Handler.html">Rack Handler Module</a>. This means that the actual call to run could also be written as this:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="no">Rack</span><span class="o">::</span><span class="no">Handler</span><span class="o">::</span><span class="no">Thin</span><span class="p">.</span><span class="nf">run</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>I happen to have the Thin gem installed so this runs fine on my machine. If you don’t have Thin installed then you will probably see the error “`require’: cannot load such file – thin”. This is Rack evaluating the code and trying to require thin automatically. Just install the thin gem or use a different Rack::Handler. Of course, just simply call <code class="language-plaintext highlighter-rouge">run</code> and Rack will use whatever handler it finds on your machine automatically. For details on how Rack does this check out the <a href="https://github.com/rack/rack">Rack source code</a>.</p>
<p>One error you might come across when trying to run this Rack application in your environment is “undefined method ‘append’ for ActionDispatch::Routing::RouteSet”. In my case it was becasue the gemset that I was using was using an earlier version of Rails (3.0.x). Switching to another gemset with Rails 3.2.x fixed this issue.</p>
<h2 id="refactorings">Refactorings</h2>
<p>In the Railscast, Ryan refactors this particular line to the following:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">TheSmallestRailsApp</span> <span class="o"><</span> <span class="no">Rails</span><span class="o">::</span><span class="no">Application</span>
<span class="c1">#code in the class are on other lines so ommited here</span>
<span class="k">end</span>
<span class="n">run</span> <span class="no">TheSmallestRailsApp</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Note above that I have not included the body code of the class. The above code is essentially the same as line 3 of the Smallest Rails App except expanded to 3 lines. It demonstrates that a call to Class.new creates a class that inherits from the constant passed to it (in this case Rails::Application) and that it is assigned to the constant TheSmallestRailsApp which is then run as a Rack app.</p>
<h2 id="conclusion">Conclusion</h2>
<p>In line 3 we learned about Class.new, anonymous classes a little about rack applications. Next post will be about the next line of code!</p>
Setting up a captcha with reCAPTCHA service and the captcha gem2012-10-22T00:00:00+00:00http://tweetegy.com/2012/10/setting-up-a-captcha-with-recaptcha-service-and-the-captcha-gem<p>We all know about captcha. It is a very common way to prevent spam from getting into your inbox, applications, databases, servers etc. It does this by displaying some slightly distorted text such that a machine is unlikely to interpret it correctly but a human will and this is the key. A captcha ensures that it is a real human filling out the form that will keep you busy!</p>
<h2 id="recaptcha">reCAPTCHA</h2>
<p>One of the best services to use for a captcha is <a href="http://www.google.com/recaptcha">Googles reCAPTCHA service</a>. As usual, it’s possible to use this service directly via it’s API or use one of the many <a href="https://developers.google.com/recaptcha/docs/otherplatforms">plugins or language wrappers</a> available.</p>
<p>Since I am working on a Rails app, I will select one of the Ruby implementations. I opted for the <a href="https://github.com/ambethia/recaptcha/">Recaptcha Gem</a> since the Rack Middleware based gem did not work on the Rails 2.x project I am working on at the moment.</p>
<h2 id="setup">Setup</h2>
<p>Add the following to your gem file:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">gem</span> <span class="s2">"recaptcha"</span><span class="p">,</span> <span class="ss">:require</span> <span class="o">=></span> <span class="s2">"recaptcha/rails"</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Then <a href="https://www.google.com/recaptcha/admin/create">register for a reCAPTCHA API key</a> and add that to your environment config files:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="c1">#put this in development.rb and in production.rb (separate keys in each so you can test!)</span>
<span class="no">RECAPTCHA_PUBLIC_KEY</span><span class="o">=</span> <span class="s1">'your-public-key'</span>
<span class="no">RECAPTCHA_PRIVATE_KEY</span><span class="o">=</span> <span class="s1">'your-private-key'</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The final step for setup is to add the following config file to your initializers directory:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="c1">#in config/initializers/recaptcha.rb</span>
<span class="no">Recaptcha</span><span class="p">.</span><span class="nf">configure</span> <span class="k">do</span> <span class="o">|</span><span class="n">config</span><span class="o">|</span>
<span class="n">config</span><span class="p">.</span><span class="nf">public_key</span> <span class="o">=</span> <span class="no">RECAPTCHA_PUBLIC_KEY</span>
<span class="n">config</span><span class="p">.</span><span class="nf">private_key</span> <span class="o">=</span> <span class="no">RECAPTCHA_PRIVATE_KEY</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="view">View</h2>
<p>The Captcha Gem provides helpers for your view to render the actual captcha box. It’s as simple as putting the following into your view at the point where you wan the captcha to appear:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="o"><</span><span class="sx">%= raw recaptcha_tags %></span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>That’s it for the view! Of course, this assumes you have put this tag into a form and that you already have error output etc. Moving on now to the server code (in the controller, of course!)</p>
<h2 id="controller-code">Controller Code</h2>
<p>This is where the verification magic happens. The Captcha Gem provides another helper method that posts to the reCaptcha API server to check if what was submitted is correct. If it is then the method returns true, if not, it will add a custom error message that the captcha is wrong to the model instance. Here is the basic code as you might have it in the create action of your controller:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre><span class="c1">#....model setup from params as usual...</span>
<span class="vi">@model</span><span class="p">.</span><span class="nf">valid?</span> <span class="c1">#ensures we see all errors on the model in the view if the captcha fails</span>
<span class="k">if</span> <span class="n">verify_recaptcha</span><span class="p">(</span><span class="ss">:model</span> <span class="o">=></span> <span class="vi">@model</span><span class="p">,</span> <span class="ss">:message</span> <span class="o">=></span> <span class="s2">"Please enter the correct captcha!"</span><span class="p">)</span>
<span class="vi">@model</span><span class="p">.</span><span class="nf">save</span>
<span class="c1">#all ok so do as you would normally</span>
<span class="k">else</span>
<span class="c1">#model is not valid (that includes the captcha now! probably render the form again?</span>
<span class="k">end</span>
<span class="c1">#...rest of create action</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>There are a few things happening here so let me explain. The first line to <code class="language-plaintext highlighter-rouge">@model.valid?</code> ensures that the models errors array is populated so that if the captcha is incorrect the user will see that message as well as all the model error validation messages. Without that only the captcha message is displayed if not entered correctly. It’s nice to show the user all the errors in one go so to prevent server round trips.</p>
<p>The if statement then calls the verify_recaptcha helper which goes off to the Google reCAPTCHA server and validates the captcha has been enetered correctly or not. If not the message is added to the models errors array.</p>
<p>The rest of the controller action is as one would normally write it! So essentially one has replaced:</p>
<p><code class="language-plaintext highlighter-rouge">if @model.save ....</code></p>
<p>with</p>
<p><code class="language-plaintext highlighter-rouge">if verify_recaptcha(:model => @model, :message => "Please enter the correct captcha!") && @model.save </code></p>
<p>pretty neat and straightforward really!</p>
<h2 id="conclusion">Conclusion</h2>
<p>Very easy to setup, configure and use thanks to the Google service and the well written Captcha Gem!</p>
Using Railtie and Rails Engine in Gems2012-09-18T00:00:00+00:00http://tweetegy.com/2012/09/using-railtie-and-rails-engine-in-gems<p>A (private) Gem I made recently required some code modifications that required digging into Railties and Rails Engines a little. The requirements were to inject some Javascript variables into the view on each request and to include a static Javascript file in the Asset Pipeline of the consuming Rails App (I know that this Gem will be used in Rails 3.x).</p>
<h2 id="problem-1-inject-javascript-vars-into-the-view-on-each-render-using-a-gem">Problem 1: Inject Javascript vars into the view on each render using a Gem</h2>
<p>So for the first problem I naturally chose to extend the Rails middleware stack. For problems like this I tend to work with a test Rails application to try things out first before moving the solution into a Gem. The solution for this problem (if putting the ruby file directly in the Rails lib directory) is as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'rack'</span>
<span class="k">class</span> <span class="nc">JSVars</span>
<span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">app</span><span class="p">,</span> <span class="n">options</span> <span class="o">=</span> <span class="p">{})</span>
<span class="vi">@app</span> <span class="o">=</span> <span class="n">app</span>
<span class="k">end</span>
<span class="k">def</span> <span class="nf">call</span><span class="p">(</span><span class="n">env</span><span class="p">)</span>
<span class="n">status</span><span class="p">,</span> <span class="n">headers</span><span class="p">,</span> <span class="n">response</span> <span class="o">=</span> <span class="vi">@app</span><span class="p">.</span><span class="nf">call</span><span class="p">(</span><span class="n">env</span><span class="p">)</span>
<span class="k">if</span> <span class="n">status</span> <span class="o">!=</span> <span class="mi">301</span> <span class="o">&&</span> <span class="n">response</span><span class="p">.</span><span class="nf">respond_to?</span><span class="p">(</span><span class="ss">:request</span><span class="p">)</span>
<span class="n">response_string</span> <span class="o">=</span> <span class="n">inject_vars</span><span class="p">(</span><span class="n">response</span><span class="p">,</span> <span class="n">headers</span><span class="p">)</span>
<span class="n">response</span> <span class="o">=</span> <span class="no">Rack</span><span class="o">::</span><span class="no">Response</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="n">response_string</span><span class="p">,</span> <span class="n">status</span><span class="p">,</span> <span class="n">headers</span><span class="p">)</span>
<span class="k">else</span>
<span class="no">Rack</span><span class="o">::</span><span class="no">Response</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="n">response</span><span class="p">,</span> <span class="n">status</span><span class="p">,</span> <span class="n">headers</span><span class="p">)</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="c1">## inject_vars implementation not shown</span>
<span class="c1">## all it does is add a <script> tag containing inline Javascript within the <head> tag of the html response string</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>In addition to this code living in <code class="language-plaintext highlighter-rouge">lib/js_vars.rb</code> it was necessary to add a line to configure the middleware of the application to use this, as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">config</span><span class="p">.</span><span class="nf">middleware</span><span class="p">.</span><span class="nf">use</span> <span class="s2">"JSVars"</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This solution worked well directly inside the Rails app but I needed to share this functionality with numerous Rails apps so I needed it in a Gem. How can I configure middleware in a Rails app from my Gem? The answer is with a Railtie!</p>
<h2 id="solution-1-use-railties">Solution 1: Use Railties!</h2>
<p>Using Railties the solution is fortunately very simple. After moving the js_vars.rb file into the gems lib directory and removing the middleware configuration from the app, I added the following Railtie class to my Gem as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Railtie</span> <span class="o"><</span> <span class="no">Rails</span><span class="o">::</span><span class="no">Railtie</span>
<span class="n">initializer</span> <span class="s2">"my_gem.insert_middleware"</span> <span class="k">do</span> <span class="o">|</span><span class="n">app</span><span class="o">|</span>
<span class="n">app</span><span class="p">.</span><span class="nf">config</span><span class="p">.</span><span class="nf">middleware</span><span class="p">.</span><span class="nf">use</span> <span class="s2">"MyGem::JSVars"</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>After adding the necessary <code class="language-plaintext highlighter-rouge">require</code> statements in my Gem, that was it! When I restarted my Rails app, the same functionality was working - the variables were being injected into the page as expected! Great! Now onto the next problem!</p>
<h2 id="problem-2-dynamically-add-assets-to-the-rails-asset-pipeline-from-a-gem">Problem 2: Dynamically add assets to the Rails Asset Pipeline from a Gem</h2>
<p>I had a Javascript file that made use of these variables and I needed that to also reside within the Gem, but how to get that Javascript into the host Rails Asset Pipeline? The answer is use Rails Engines!</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Engine</span> <span class="o"><</span> <span class="no">Rails</span><span class="o">::</span><span class="no">Engine</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>After adding the necessary <code class="language-plaintext highlighter-rouge">require</code> statements for this Engine in my Gem, you guessed it, everything worked (again)! By simply including this class in the Gem it means that the Rails app the Gem is loaded into will search for assets inside the Gem! So if we add a .js file to <code class="language-plaintext highlighter-rouge">app -> assets -> javascripts</code> path (in the Gem) then this file can be referenced (and found!) in the Rails app as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="sr">//</span><span class="o">=</span> <span class="nb">require</span> <span class="n">my_gems_javascript</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>Rails 3.x brings us a whole set of wonderful and powerful tools: <strong>Engines, Railties, Middleware and the Asset Pipeline</strong> (as well as many other goodies!). If we want to split off and reuse functionality we can use Gems together with a mixture of these new tools. In this example, I used:</p>
<ul>
<li>Railties to extend Middleware</li>
<li>Engines to extend the Asset Pipeline</li>
</ul>
<p><strong>Of course this is only a small subset of the power of these tools</strong> and I highly recommend reading more about this subject.</p>
<h2 id="recommended-further-reading--watching">Recommended Further Reading / Watching</h2>
<ul>
<li><a href="http://www.stubbleblog.com/index.php/2011/04/writing-rails-engines-getting-started/">Writing Rails Engines Getting Started</a></li>
<li><a href="http://gregmoreno.wordpress.com/2012/05/29/create-your-own-rails-3-engine/">Create your own Rails 3 Engine</a></li>
<li><a href="http://www.youtube.com/watch?v=Rvxcc46fox0&feature=em-uploademail">Writing a Rails Engine (YouTube video)</a></li>
<li><a href="http://vimeo.com/41952172">Engines (Vimeo video by Ryan Bigg)</a></li>
<li><a href="http://www.igvita.com/2010/08/04/rails-3-internals-railtie-creating-plugins/">Railties</a></li>
</ul>
Mixing Ruby in Bash2012-09-11T00:00:00+00:00http://tweetegy.com/2012/09/mixing-ruby-in-bash<p>If your like me, I usually dread the idea of writing a bash script. Generally these days, I try to write any tasks using Ruby. Sometimes, however, it just seems that all I do is write lots of <code class="language-plaintext highlighter-rouge">Kernel.exec</code> or calls to <code class="language-plaintext highlighter-rouge">sh</code> method in Ruby! Othertimes, I just instintively start writing something in bash which is what I did today.</p>
<h2 id="the-original-problem">The Original Problem</h2>
<p>I needed a startup script that would quickly get a bunch of services up and running on my development machine so that I can get coding quickly and easily. It all worked fine, but when I executed the script multiple times new instances of Ruby would be started, which is not what I wanted. I generally wanted to <em>restart</em> the services instead. So I used the following to kill all my ruby processes (remember, I only use this script in my <em>development</em> environment!):</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">rubypids</span><span class="o">=</span><span class="sb">`</span>pidof ruby<span class="sb">`</span>
<span class="nb">sudo kill</span> <span class="nv">$rubypids</span></code></pre></figure>
<p>This bash script sets <code class="language-plaintext highlighter-rouge">$rubypids</code> to a list of, well, Ruby pids which looks like so <code class="language-plaintext highlighter-rouge">2566 2899 2908</code> and it turns out that passing that to <code class="language-plaintext highlighter-rouge">kill</code> will kill them all.</p>
<h2 id="the-new-problem">The New Problem</h2>
<p>The problem was that one of these pids was my instance of RubyMine that I <em>diddnt</em> want to kill! At that point I am thinking, damn <em>so how to do find and replace within a string in bash?</em>. After some unsucessful playing around with the <code class="language-plaintext highlighter-rouge">sed</code> command, I figured <em>why not just use Ruby to do it instead</em>. To my joy, Ruby works very well in bash! I used the <code class="language-plaintext highlighter-rouge">-e</code> option of the <code class="language-plaintext highlighter-rouge">ruby</code> command to do it. Here is the updated script:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c">#Get all ruby pids and the rubymine pid</span>
<span class="nv">allrubypids</span><span class="o">=</span><span class="sb">`</span>pidof ruby<span class="sb">`</span>
<span class="nv">rubyminepid</span><span class="o">=</span><span class="sb">`</span>pgrep rubymine<span class="sb">`</span>
<span class="c">#Use ruby to reject the rubymine pid</span>
<span class="nv">rubypids</span><span class="o">=</span><span class="sb">`</span>ruby <span class="nt">-e</span> <span class="s2">"puts %w(</span><span class="nv">$allrubypids</span><span class="s2">).reject {|pid| pid == </span><span class="nv">$rubyminepid</span><span class="s2">.to_s}"</span><span class="sb">`</span>
<span class="c">#Kill the rest</span>
rvmsudo <span class="nb">kill</span> <span class="nv">$rubypids</span></code></pre></figure>
<p>So I fell for an Array#reject solution simply because I know how to work with Arrays in Ruby very well and because it was the first option that came to mind. I love how simple and seamless it is to ‘pass’ bash variables to Ruby and have the result of the Ruby execution passed back to bash. Maybe this can be useful again in the future when stuck with how to do something ‘simple’ (using bash) – do it in Ruby instead!</p>
Dissecting thesmallestrailsapp.com (Smallest Rails App)2012-08-22T00:00:00+00:00http://tweetegy.com/2012/08/dissecting-thesmallestrailsapp-com-smallest-rails-app<p>Many of you are probably familiar with the excellent RailsCast on <a href="http://railscasts.com/episodes/349-rails-modularity">Rails Modularity</a> where Ryan Bates walks through, what appears to be the ‘Smallest Rails App’ and then takes a bloated Rails app and slims it down to it’s bare bones (but not quite as small as <a href="http://thesmallestrailsapp.com">thesmallestrailsapp.com</a>!).</p>
<p>When I first watched this screencast, I have to admit that I was overwhelmed by the sheer number of Ruby techniques and tricks used to make the applications code so small. I also found it necessary to watch the first part of the screencast several times over in order to get these tricks to sink in. I have to admit that not all are terribly useful in day to day programming, however, I have decided to write a post that breaks some of these concepts down at my own speed. So here we go.</p>
<h2 id="the-smallest-require-statement">The smallest require statement</h2>
<p>First up is the first line which is the neat require statement:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="sx">%w(action_controller/railtie coderay markaby)</span><span class="p">.</span><span class="nf">map</span> <span class="o">&</span><span class="nb">method</span><span class="p">(</span><span class="ss">:require</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Firstly, in case you don’t already know the syntax %w followed by brackets is a way to easily create an array of strings without having to write quotes or commas. So this will create an array like so: [“action_controller/railtie”, “coderay”, “markaby”]. As you can see, a space in the %w syntax dentoes a new element of the array of Strings.</p>
<p>Now we have that out of the way, what does <code class="language-plaintext highlighter-rouge">map &method(:require)</code> do? Well in real basic terms, all it does is call the method (<code class="language-plaintext highlighter-rouge">require</code> in this case) passing in each element of the array to it. If we were to rewrite this line in a more verbose (and perhaps) clearer way it would look like this (more familiar) Ruby code:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'action_controller/railtie'</span>
<span class="nb">require</span> <span class="s1">'coderay'</span>
<span class="nb">require</span> <span class="s1">'markaby'</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="another-example">Another Example</h2>
<p>Let me give you another example. Consider the following statement and imagine running it in an IRB session. What would the output be?</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="p">[</span><span class="no">String</span><span class="p">,</span> <span class="no">Array</span><span class="p">,</span> <span class="no">Object</span><span class="p">].</span><span class="nf">map</span> <span class="o">&</span><span class="nb">method</span><span class="p">(</span><span class="ss">:is_a?</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Well, lets break it down. This time we have an array of Ruby constants which we call <code class="language-plaintext highlighter-rouge">map</code> on and we pass <code class="language-plaintext highlighter-rouge">&method(:is_a?)</code> as a block which means that each element of the Array will passed as a parameter to the <code class="language-plaintext highlighter-rouge">is_a?</code> method.</p>
<p>In an IRB session, what will the receiver of the call of <code class="language-plaintext highlighter-rouge">is_a?</code> be then? A quick call to <code class="language-plaintext highlighter-rouge">self</code> reveals <code class="language-plaintext highlighter-rouge">main</code> and <code class="language-plaintext highlighter-rouge">main.class #=> Object</code>. Add so it should return <code class="language-plaintext highlighter-rouge">[false, false, true]</code> (since the last element in the array is Object it’s the same as calling <code class="language-plaintext highlighter-rouge">main.is_a? Object</code>. So this single line of code is the same as:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="n">main</span><span class="p">.</span><span class="nf">is_a?</span> <span class="no">String</span> <span class="c1">#=> false</span>
<span class="n">main</span><span class="p">.</span><span class="nf">is_a?</span> <span class="no">Array</span> <span class="c1">#=> false</span>
<span class="n">main</span><span class="p">.</span><span class="nf">is_a?</span> <span class="no">Object</span> <span class="c1">#=> true</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>A little contrived, I know. Another basic example which calls <code class="language-plaintext highlighter-rouge">p "foo"</code> and <code class="language-plaintext highlighter-rouge">p "bar"</code> simply outputting the string in the console.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="sx">%w(foo bar)</span><span class="p">.</span><span class="nf">map</span> <span class="o">&</span><span class="nb">method</span><span class="p">(</span><span class="ss">:p</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="uses">Uses</h2>
<p>So where do you really need to use this (apart from in the smallestrailsapp) I hear you cry!? Well one good example is when you find you are writing the same code as a block over and over, you may think <em>“I wish I could extract this into a method and call the method from within the block instead”</em>.</p>
<p>So, here’s a quick simple example to demonstrate this dream. Say you were finding yourself having to regularly double the elements of an array. You might find this throughout your code:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="c1">#Somewhere in the codesphere:</span>
<span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">].</span><span class="nf">map</span> <span class="p">{</span><span class="o">|</span><span class="n">e</span><span class="o">|</span> <span class="n">e</span> <span class="o">*</span> <span class="mi">2</span><span class="p">}</span>
<span class="c1">#Maybe in another line, method Module or Class</span>
<span class="p">[</span><span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">].</span><span class="nf">map</span> <span class="p">{</span><span class="o">|</span><span class="n">e</span><span class="o">|</span> <span class="n">e</span> <span class="o">*</span> <span class="mi">2</span><span class="p">}</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>What you could do (if you really think you need to) is extract the block into a method and then use the <code class="language-plaintext highlighter-rouge">&method</code> syntax to call it on each element, like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">double</span><span class="p">(</span><span class="n">n</span><span class="p">)</span>
<span class="n">n</span> <span class="o">*</span> <span class="mi">2</span>
<span class="k">end</span>
<span class="c1">#Now pass double as a block</span>
<span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">].</span><span class="nf">map</span> <span class="o">&</span><span class="nb">method</span><span class="p">(</span><span class="ss">:double</span><span class="p">)</span> <span class="c1">#=> [2,4,6]</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Here is a great post that explains the idea of <a href="http://alan.dipert.org/post/339368222/passing-methods-like-blocks-in-ruby">passing methods like blocks in Ruby</a>.</p>
<h2 id="conclusion">Conclusion</h2>
<p>This is a great way to write succinct code in Ruby and confuse newbies! I would use it sparingly but definitely worth considering in the above case where you find that you need to reuse a block of code in multiple places.</p>
<p>I really like the smallestrailsapp and I have taken an entire post just to discuss the first line! Can’t wait to dig into line 2 (which is empty ;)). Until then, take care and happy refactoring!</p>
Forking Ruby Processes or How to fork Ruby2012-04-25T00:00:00+00:00http://tweetegy.com/2012/04/forking-ruby-processes-or-how-to-fork-ruby<p>Forking is a UNIX term that makes a process copy itself programmatically. The definition, on good old <a href="http://en.wikipedia.org/wiki/Fork_%28operating_system%29">Wikipedia</a> is: <em>A fork in a multithreading environment means that a thread of execution is duplicated, creating a child thread from the parent thread.</em>. Note this does not necessarily mean that a copy of the memory is allocated. In many cases the memory is shared until one of the processes actually makes a change to something then the memory: this is called copy-on-write (CoW).</p>
<p>So with the UNIX terminology out of the way, how does this work in Ruby? How can we fork a Ruby process using Ruby? Here is a basic example:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="nb">puts</span> <span class="s2">"This is the first line before the fork (pid </span><span class="si">#{</span><span class="no">Process</span><span class="p">.</span><span class="nf">pid</span><span class="si">}</span><span class="s2">)"</span>
<span class="nb">puts</span> <span class="nb">fork</span>
<span class="nb">puts</span> <span class="s2">"This is the second line after the fork (pid </span><span class="si">#{</span><span class="no">Process</span><span class="p">.</span><span class="nf">pid</span><span class="si">}</span><span class="s2">)"</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The output from this code might be something like:</p>
<blockquote>
<p>This is the first line before the fork (pid 10207)
10209
This is the second line after the fork (pid 10207)
This is the second line after the fork (pid 10209)</p>
</blockquote>
<p>So what just happened? Well the first line is pretty clear but then what is the output on the second line (10209)? Well that is the PID returned by the call to fork and , of course, represents the PID of the child process. Then we see the next two lines; one executed by the parent (with PID = 10207) and the other executed by the child (with PID = 10209).</p>
<h2 id="blocks">Blocks</h2>
<p>Very often, the code that developers want to run in a separate process is passed as a block to the fork method, like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="nb">puts</span> <span class="s2">"You can also put forked code in a block pid: </span><span class="si">#{</span><span class="no">Process</span><span class="p">.</span><span class="nf">pid</span><span class="si">}</span><span class="s2">"</span>
<span class="nb">fork</span> <span class="k">do</span>
<span class="nb">puts</span> <span class="s2">"Hello from fork pid: </span><span class="si">#{</span><span class="no">Process</span><span class="p">.</span><span class="nf">pid</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="nb">puts</span> <span class="s2">"The parent process just skips over it: </span><span class="si">#{</span><span class="no">Process</span><span class="p">.</span><span class="nf">pid</span><span class="si">}</span><span class="s2">"</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This outputs the three lines (sometimes) in different order but usally like this:</p>
<blockquote>
<p>You can also put forked code in a block pid: 10161
The parent process just skips over it: 10161
Hello from fork pid: 10163</p>
</blockquote>
<p>Note that the PID in the block is different from the PID outside it. This is because the code running within the block is running from within the new process created by using fork.</p>
<h2 id="multi-core-cpu-test">Multi-core CPU test</h2>
<p>Let’s quickly verify one of the main benefits for using fork which is for multi-processing. Let’s write a test Ruby program that can be used to demonstrate this effect.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">cpu_intensive_process</span>
<span class="nb">puts</span> <span class="s2">"Pid: </span><span class="si">#{</span><span class="no">Process</span><span class="p">.</span><span class="nf">pid</span><span class="si">}</span><span class="s2">"</span>
<span class="n">x</span> <span class="o">=</span> <span class="mi">0</span>
<span class="mi">10000000</span><span class="p">.</span><span class="nf">times</span> <span class="k">do</span> <span class="o">|</span><span class="n">i</span><span class="o">|</span>
<span class="n">x</span> <span class="o">=</span> <span class="n">i</span> <span class="o">+</span> <span class="n">x</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="nb">fork</span>
<span class="n">cpu_intensive_process</span> <span class="c1">#should see two processors flat out!</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>When this code is run two processors should max out. If the machine has more than two processors available then <strong>only two processors will ever max out</strong> with this code as it stands. However, using fork additional times will result in even more processes going flat out (up to all your processors, of course) ! Here is a screen capture of the CPU process monitor on my PC:
<img src="/assets/cpu-maxing-out.png" alt="CPU Maxing out during a Ruby Fork" /></p>
<h2 id="memory-test">Memory test</h2>
<p>So what happens with the memory allocation. Apparently in Ruby 1.9.3 (which I am using here) there is no CoW functionality which means that the memory allocation for each process should be the same. Here is a little program that goes some way towards testing that (although, I would say that it is not conclusive):</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code"><pre><span class="nb">hash</span> <span class="o">=</span> <span class="no">Hash</span><span class="p">.</span><span class="nf">new</span> <span class="c1">#load up the memory a little</span>
<span class="mi">1000000</span><span class="p">.</span><span class="nf">times</span> <span class="k">do</span> <span class="o">|</span><span class="n">i</span><span class="o">|</span>
<span class="nb">hash</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"foo"</span>
<span class="k">end</span>
<span class="nb">puts</span> <span class="s2">"Hash contains </span><span class="si">#{</span><span class="nb">hash</span><span class="p">.</span><span class="nf">keys</span><span class="p">.</span><span class="nf">count</span><span class="si">}</span><span class="s2"> keys"</span>
<span class="k">def</span> <span class="nf">show_memory_usage</span><span class="p">(</span><span class="n">whoami</span><span class="p">)</span>
<span class="n">pid</span> <span class="o">=</span> <span class="no">Process</span><span class="p">.</span><span class="nf">pid</span>
<span class="n">mem</span> <span class="o">=</span> <span class="sb">`pmap </span><span class="si">#{</span><span class="n">pid</span><span class="si">}</span><span class="sb">`</span>
<span class="nb">puts</span> <span class="s2">"Memory usage for </span><span class="si">#{</span><span class="n">whoami</span><span class="si">}</span><span class="s2"> pid: </span><span class="si">#{</span><span class="n">pid</span><span class="si">}</span><span class="s2"> is: </span><span class="si">#{</span><span class="n">mem</span><span class="p">.</span><span class="nf">lines</span><span class="p">.</span><span class="nf">to_a</span><span class="p">.</span><span class="nf">last</span><span class="si">}</span><span class="s2">"</span>
<span class="nb">sleep</span> <span class="c1">#keep the process alive</span>
<span class="k">end</span>
<span class="nb">puts</span> <span class="s2">"Now lets fork this process and see what memory is allocated to the child"</span>
<span class="nb">puts</span> <span class="s2">"Before..."</span>
<span class="k">if</span> <span class="nb">fork</span>
<span class="n">show_memory_usage</span><span class="p">(</span><span class="s2">"parent"</span><span class="p">)</span>
<span class="k">else</span>
<span class="nb">puts</span> <span class="s2">"After..."</span>
<span class="mi">1000000</span><span class="p">.</span><span class="nf">times</span> <span class="k">do</span> <span class="o">|</span><span class="n">i</span><span class="o">|</span> <span class="c1">#change the values in the child memory allocation</span>
<span class="nb">hash</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"bar"</span>
<span class="k">end</span>
<span class="n">show_memory_usage</span><span class="p">(</span><span class="s2">"child"</span><span class="p">)</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Here is the result of this test. Feel free to copy this code, changing it around a bit and see what results you get!</p>
<blockquote>
<p>Hash contains 1000000 keys
Now lets fork this process and see what memory is allocated to the child
Before…
After…
Memory usage for parent pid: 10291 is: total 62592K
Memory usage for child pid: 10293 is: total 73164K</p>
</blockquote>
<h2 id="orphan-processes">Orphan Processes</h2>
<p>Finally, lets try out testing orphan processes and how they behave. Run this final little program to see:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="code"><pre><span class="nb">fork</span> <span class="k">do</span>
<span class="mi">5</span><span class="p">.</span><span class="nf">times</span> <span class="k">do</span>
<span class="nb">sleep</span> <span class="mi">1</span>
<span class="nb">puts</span> <span class="s2">"I'm an orphan!"</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="nb">abort</span> <span class="s2">"Parent process died..."</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The results are as follows:</p>
<blockquote>
<p>Parent process died;
terminal ~: I’m an orphan!
I’m an orphan!
I’m an orphan!
I’m an orphan!
I’m an orphan!</p>
</blockquote>
<p>So what’s happening here? Well the parent process completes and therefore terminates to give me back the terminal prompt. But then suddenly I am interupted with the output of the 5 child processes (now technically orphans) as they execute their code one after the other following a little sleep!</p>
<p>Well that’s all for my post today on Ruby Forks or how to Fork Ruby. Next time we will be having more fun with Ruby (but not necessary forking it). Till then, happy <em>(insert whatever it is that you do here)</em>!</p>
Create reusable UI components and widgets using Backbone.js2012-03-30T00:00:00+00:00http://tweetegy.com/2012/03/create-reusable-ui-components-and-widgets-using-backbone-js<p>I was building an application in Backbone.js recently and I wanted to experiment with an idea I had to build UI components using Backbone.js. I was given the opportunity when we required a notification element to be displayed on the page. It is possible, to do this in CSS or say using Twitter Bootstrap, however, I wanted to turn this into a basic Backbone.js UI component.</p>
<p>In order to do this we need to think about how the component can be reused in different applications; i.e. not tied directly to any domain specific markup, schema or business logic in the application that is being built. Now, you would probably want to create a separate repository for this project since, after all, it is not strictly meant to live inside an application (unless, of course, your not interested to use the component in any other project other than the one your working on).</p>
<h2 id="the-template">The Template</h2>
<p>The template has a single placeholder <em>message</em> which can be set in the instance of the model that is used in the application. Note, from the line <em>class=”alert fade in”</em> that this particular component will work best with <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a>.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="o"><</span><span class="n">script</span> <span class="nb">id</span><span class="o">=</span><span class="s2">"notification-template"</span> <span class="n">type</span><span class="o">=</span><span class="s2">"text/template"</span><span class="o">></span>
<span class="o"><</span><span class="n">div</span><span class="o">></span>
<span class="o"><</span><span class="n">div</span> <span class="nb">id</span><span class="o">=</span><span class="s2">"notification"</span> <span class="k">class</span><span class="o">=</span><span class="s2">"alert fade in"</span><span class="o">></span>
<span class="o"><</span><span class="n">a</span> <span class="k">class</span><span class="o">=</span><span class="s2">"close"</span> <span class="n">data</span><span class="o">-</span><span class="n">dismiss</span><span class="o">=</span><span class="s2">"alert"</span> <span class="n">href</span><span class="o">=</span><span class="s2">"#"</span><span class="o">></span><span class="err">×</span><span class="o"><</span><span class="sr">/a>
<h3><%= message %></</span><span class="n">h3</span><span class="o">></span>
<span class="o"><</span><span class="sr">/div>
</</span><span class="n">div</span><span class="o">></span>
<span class="o"><</span><span class="sr">/script></span></code></pre></figure>
<h2 id="the-model">The Model</h2>
<p>The Notification model has two defaults set: <em>message</em> and <em>status</em> (which is another model). Notice the namespace <em>com.tweetegy.ui</em> used to keep the objects separate from the application.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">NotificationModel</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="na">defaults</span><span class="p">:</span> <span class="p">{</span>
<span class="na">message</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Loading...</span><span class="dl">"</span><span class="p">,</span>
<span class="na">status</span><span class="p">:</span> <span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">NotificationStatusMessage</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></figure>
<h2 id="notification-status-types">Notification Status Types</h2>
<p>The Notification Status Types Model acts as an enum holding strings to represent the status of each notification that is shown. This is used to control the style of the notification.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">NotificationStatusMessage</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">NotificatonStatusMessage</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">NotificationStatusError</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">NotificatonStatusError</span><span class="dl">"</span><span class="p">;</span></code></pre></figure>
<h2 id="backbone-view">Backbone View</h2>
<p>This is the object that wraps everything up and allows us to reuse this as a component (as we will see later). This is just a standard Backbone View, with an added helper method <em>updateStyleFromStatus</em> which changes the style depending on the status of the Notification and <em>closeNotifcation</em> that hides it.</p>
<p>The other important thing to note is the line <em>this.model.bind(“change”, this.render);</em> which is where we use the ‘magic’ of Backbone data binding to render our notification anytime the message or status of the applications notification model changes. It means that all we need to do in our application is set either the <em>message</em> or the <em>status</em> and the view will render itself.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">NotificationView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="na">className</span><span class="p">:</span> <span class="dl">"</span><span class="s2">well form-inline</span><span class="dl">"</span><span class="p">,</span>
<span class="na">events</span><span class="p">:</span> <span class="p">{</span>
<span class="dl">"</span><span class="s2">click .close</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">closeNotification</span><span class="dl">"</span>
<span class="p">},</span>
<span class="na">initialize</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="dl">'</span><span class="s1">render</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">updateStyleFromStatus</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">template</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#notification-template</span><span class="dl">'</span><span class="p">).</span><span class="nx">html</span><span class="p">())</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="dl">"</span><span class="s2">change</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="p">},</span>
<span class="na">render</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nb">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">updateStyleFromStatus</span><span class="p">();</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="dl">"</span><span class="s2">#notification</span><span class="dl">"</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span>
<span class="na">closeNotification</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="dl">"</span><span class="s2">#notification</span><span class="dl">"</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">},</span>
<span class="na">updateStyleFromStatus</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">newClass</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">alert fade in</span><span class="dl">"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">status</span><span class="dl">'</span><span class="p">)</span> <span class="o">==</span> <span class="nb">window</span><span class="p">.</span><span class="nx">NotificationStatusError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">newClass</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">alert alert-block alert-error fade in</span><span class="dl">"</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="dl">"</span><span class="s2">#notification</span><span class="dl">"</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">newClass</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></figure>
<h2 id="using-the-component">Using the component</h2>
<p>I used it in an application called “Front Desk” and initialized it in the bootstrap.js file during application initialziation:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">FrontDesk</span><span class="p">.</span><span class="nx">notification</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">NotificationModel</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_notificationView</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">ui</span><span class="p">.</span><span class="nx">NotificationView</span><span class="p">({</span>
<span class="na">model</span><span class="p">:</span> <span class="nx">y</span><span class="p">.</span><span class="nx">f</span><span class="p">.</span><span class="nx">FrontDesk</span><span class="p">.</span><span class="nx">notification</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div#notification</span><span class="dl">'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_notificationView</span><span class="p">.</span><span class="nx">render</span><span class="p">().</span><span class="nx">el</span><span class="p">);</span></code></pre></figure>
<p>As mentioned above, in the Backbone View we bind to the models change event to render the view which means all we need to do is change the data in our applications NotificationModel instance (in this case <em>com.tweetegy.FrontDesk.notification</em>) and the Notification will automatically be rendered. Here is an example:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">com</span><span class="p">.</span><span class="nx">tweetegy</span><span class="p">.</span><span class="nx">FrontDesk</span><span class="p">.</span><span class="nx">notification</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">message</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Everything loaded! Starting application...</span><span class="dl">"</span><span class="p">})</span></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>I have always liked the idea of UI components and using Backbone templates, views and models really makes it easy to build a highly customized UI library for your application, department, company or even to share with the entire community!</p>
<p>I have written another component which uses a Backbone Collection and can be used in a form to collect data from the user. This is a little more complex than the notification example here and I will cover it in a future blog post! Meanwhile, happy coding!</p>
Ruby Generators2012-02-16T00:00:00+00:00http://tweetegy.com/2012/02/ruby-generators<h2 id="simple-definition-of-generators">Simple definition of Generators</h2>
<p>(Note there is a full definition available on <a href="http://en.wikipedia.org/wiki/Generator_(computer_programming)">Wikipedia</a>)</p>
<p>I think the main thing to take away from the Wikipedia definition is that a generator is something* that looks like a function and behaves like an iterator*. What this means is that we can create a generator and call it, however many times we want, and it will return the next value in the iteration. It means (as iterators do) that we can have more control over what happens before and after each iteration.</p>
<p>It also means that developers get the additional power to have complete control over what the iterator actually returns (for example a sequence of Prime Numbers). Another benefit is that they require less memory than say iterating over a large array that’s already explicitly defined.</p>
<h2 id="so-what-does-a-generator-look-like-in-ruby">So what does a Generator look like in Ruby?</h2>
<p>Since Generators are like Iterators a good example to work with would be to write a program that generates a subset of Prime Numbers or Fibonacci Numbers – so this is what we will do in Ruby using a number of different approaches.</p>
<p>In Ruby, Enumerators are a form of Generators so here is a sligtly modified example (to use Ruby 1.9.2 Enumerator class instead of the Ruby 1.8.7 Generator) from <a href="http://anthonylewis.com/2007/11/09/ruby-generators/">Anthony Lewis’s</a> blog. This example generates a set of Prime Numbers:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre><span class="n">g</span> <span class="o">=</span> <span class="no">Enumerator</span><span class="p">.</span><span class="nf">new</span> <span class="k">do</span> <span class="o">|</span><span class="n">g</span><span class="o">|</span>
<span class="n">n</span> <span class="o">=</span> <span class="mi">2</span>
<span class="nb">p</span> <span class="o">=</span> <span class="p">[]</span>
<span class="k">while</span> <span class="kp">true</span>
<span class="k">if</span> <span class="nb">p</span><span class="p">.</span><span class="nf">all?</span> <span class="p">{</span> <span class="o">|</span><span class="n">f</span><span class="o">|</span> <span class="n">n</span> <span class="o">%</span> <span class="n">f</span> <span class="o">!=</span> <span class="mi">0</span> <span class="p">}</span>
<span class="n">g</span><span class="p">.</span><span class="nf">yield</span> <span class="n">n</span>
<span class="nb">p</span> <span class="o">&</span><span class="n">lt</span><span class="p">;</span><span class="o">&</span><span class="n">lt</span><span class="p">;</span> <span class="n">n</span>
<span class="k">end</span>
<span class="n">n</span> <span class="o">+=</span> <span class="mi">1</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="nb">p</span> <span class="n">g</span><span class="p">.</span><span class="nf">take</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span> <span class="c1">#=> [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Here is another example to generate Fibonacci Numbers that uses the Enumerator class, this is a slightly modified example taken from the <a href="http://ruby-doc.org/core-1.9.3/Enumerator.html#method-c-new">Ruby docs</a>. The only change I made here is that I am calling <em>yield</em> instead of using the alias <em>«</em>. You could think of the call to yield or « as like <em>sending out the value back to the caller</em> (or at least that’s the way I think of it when I see a <em>yield</em> call in a Generator!)</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre><span class="n">fib</span> <span class="o">=</span> <span class="no">Enumerator</span><span class="p">.</span><span class="nf">new</span> <span class="k">do</span> <span class="o">|</span><span class="n">y</span><span class="o">|</span>
<span class="n">a</span> <span class="o">=</span> <span class="n">b</span> <span class="o">=</span> <span class="mi">1</span>
<span class="kp">loop</span> <span class="k">do</span>
<span class="n">y</span><span class="p">.</span><span class="nf">yield</span> <span class="n">a</span>
<span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="o">=</span> <span class="n">b</span><span class="p">,</span> <span class="n">a</span> <span class="o">+</span> <span class="n">b</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="nb">p</span> <span class="n">fib</span><span class="p">.</span><span class="nf">take</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span> <span class="c1"># => [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="little-more-advanced-example">Little more advanced example</h2>
<p>If you want to build your own Generator, using lambdas, check out this example from <a href="http://blog.vmoroz.com/2011/04/ruby-generators.html">Victor Moroz</a></p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="code"><pre><span class="n">fib</span> <span class="o">=</span>
<span class="nb">lambda</span><span class="p">{</span>
<span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span>
<span class="nb">lambda</span><span class="p">{</span> <span class="k">begin</span> <span class="n">a</span> <span class="k">ensure</span> <span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="o">=</span> <span class="n">b</span><span class="p">,</span> <span class="n">a</span> <span class="o">+</span> <span class="n">b</span> <span class="k">end</span> <span class="p">}</span>
<span class="p">}[]</span>
<span class="nb">puts</span> <span class="p">(</span><span class="mi">0</span><span class="o">..</span><span class="mi">19</span><span class="p">).</span><span class="nf">map</span><span class="p">{</span> <span class="n">fib</span><span class="p">[]</span> <span class="p">}.</span><span class="nf">inspect</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="full-definitions-of-generators">Full definitions of Generators</h2>
<p>(Full definition from <a href="http://en.wikipedia.org/wiki/Generator_(computer_programming)">Wikipedia</a>): “A generator is a special routine that can be used to control the iteration behaviour of a loop. A generator is very similar to a function that returns an array, in that a generator has parameters, can be called, and generates a sequence of values. However, instead of building an array containing all the values and returning them all at once, a generator yields the values one at a time, which requires less memory and allows the caller to get started processing the first few values immediately. In short, a generator <em>looks</em> like a <em>function</em> but behaves like an <em>iterator</em>.”</p>
Basic multiple image gallery upload HTML5 and Backbone application2012-01-23T00:00:00+00:00http://tweetegy.com/2012/01/basic-multiple-image-gallery-upload-html5-and-backbone-application<p>This is really a very basic example, with the main aim to get anyone started with a simple image upload and persist application using HTML5 and Backbone. This post is essentially a continuation of a previous post where I explained how to <a href="/2012/01/preview-a-local-image-using-backbone-and-html5-javascript/">preview a local image using HTML5 and Backbone</a>. The main expansion here is that I am adding the capability to:</p>
<ul>
<li>Preview multiple images using a multiple file input</li>
<li>Add all the images to a Backbone collection and persist that collection to a server</li>
</ul>
<h2 id="backbone-templates">Backbone Templates</h2>
<p>I’ll start with the templates again. In this application I have three templates: one for selecting multiple images, one for displaying a single image preview and a container template for the header text and a placeholder for the collection.</p>
<p>The select multiple images template looks as follows:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"gallery-selection-template"</span><span class="nt">></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">id</span><span class="o">=</span><span class="dl">"</span><span class="s2">myGallery</span><span class="dl">"</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span> <span class="nx">multiple</span> <span class="o">/><</span><span class="nx">br</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">button</span> <span class="nx">id</span><span class="o">=</span><span class="dl">"</span><span class="s2">saveGallery</span><span class="dl">"</span><span class="o">></span><span class="nx">Save</span> <span class="nx">Gallery</span><span class="o"><</span><span class="sr">/button</span><span class="err">>
</span><span class="nt"></script></span></code></pre></figure>
<p>The single image preview template is as follows:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"image-template"</span><span class="nt">></span>
<span class="o"><</span><span class="nx">img</span> <span class="kd">class</span><span class="o">=</span><span class="dl">"</span><span class="s2">thumb</span><span class="dl">"</span> <span class="nx">src</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= data %></span><span class="dl">'</span> <span class="nx">title</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= filename %></span><span class="dl">'</span> <span class="o">/></span>
<span class="nt"></script></span></code></pre></figure>
<p>Finally, the container is the most basic template, since it’s just a title and a placeholder for the collection:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"gallery-template"</span><span class="nt">></span>
<span class="o"><</span><span class="nx">h2</span><span class="o">></span><span class="nx">Image</span> <span class="nx">Gallery</span><span class="o"><</span><span class="sr">/h2</span><span class="err">>
</span> <span class="o"><</span><span class="nx">output</span> <span class="nx">id</span><span class="o">=</span><span class="dl">"</span><span class="s2">thumbnails</span><span class="dl">"</span> <span class="o">/></span>
<span class="nt"></script></span></code></pre></figure>
<p>There is nothing really particullarly special to mention with these templates, so let’s move on.</p>
<h2 id="backbone-views">Backbone Views</h2>
<p>I only want to focus on the enhancements I have made which is being able to preview a collection of images and save them to the server via a Backbone collection. Therefore, I will focus on one view here: <em>GalleryView</em>. Actually, this is a standard way of building a view that renders a collection of sub-views in it’s render method. Here I get a handle on the template <em>gallery-template</em> and append the rendered out <em>ImageView</em> for each Image in the Backbone collection for the Image Gallery:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="code"><pre><span class="nb">window</span><span class="p">.</span><span class="nx">GalleryView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="na">template</span><span class="p">:</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#gallery-template</span><span class="dl">"</span><span class="p">).</span><span class="nx">html</span><span class="p">()),</span>
<span class="na">initialize</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="dl">'</span><span class="s1">render</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="dl">'</span><span class="s1">add</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="p">},</span>
<span class="na">render</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">$images</span><span class="p">,</span>
<span class="nx">collection</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">({}));</span>
<span class="nx">$images</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#thumbnails</span><span class="dl">"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">image</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ImageView</span><span class="p">({</span>
<span class="na">model</span><span class="p">:</span> <span class="nx">image</span><span class="p">,</span>
<span class="na">collection</span><span class="p">:</span> <span class="nx">collection</span>
<span class="p">});</span>
<span class="nx">$images</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">render</span><span class="p">().</span><span class="nx">el</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="backbone-collections">Backbone Collections</h2>
<p>The Gallery collection is responsible for loading the image data into Backbone Image models and adding them to the collection. There is a function <em>setFromFiles</em> which expects a FileList object passed to it from the multiple file input. Here is the collection code:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">window</span><span class="p">.</span><span class="nx">Gallery</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="na">model</span><span class="p">:</span> <span class="nx">Image</span><span class="p">,</span>
<span class="na">url</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/images</span><span class="dl">"</span><span class="p">,</span>
<span class="na">setFromFiles</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">files</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">reset</span><span class="p">();</span>
<span class="nb">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<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">f</span><span class="p">;</span> <span class="nx">f</span> <span class="o">=</span> <span class="nx">files</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span>
<span class="nx">reader</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">theFile</span><span class="p">,</span> <span class="nx">theId</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">image</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">window</span><span class="p">.</span><span class="nx">Image</span><span class="p">();</span>
<span class="nx">image</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">id</span><span class="p">:</span> <span class="nx">theId</span><span class="p">})</span>
<span class="nx">image</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">filename</span><span class="p">:</span> <span class="nx">theFile</span><span class="p">.</span><span class="nx">name</span><span class="p">});</span>
<span class="nx">image</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">data</span><span class="p">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">result</span><span class="p">});</span>
<span class="nb">self</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">image</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">})(</span><span class="nx">f</span><span class="p">);</span>
<span class="nx">reader</span><span class="p">.</span><span class="nx">readAsDataURL</span><span class="p">(</span><span class="nx">f</span><span class="p">,</span><span class="nx">i</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span></code></pre></figure>
<p>The code that calls the <em>setFromFiles</em> method is actually in the <em>ImageSelectionView</em> (that renders the <em>gallery-selection-template</em>) and is called when a change event occurs on the multiple file input. The function looks like this:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">dispatchUpdateGalleryPreview</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">setFromFiles</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">files</span><span class="p">);</span>
<span class="p">}</span></code></pre></figure>
<p>The <em>e.target.files *is the *FileList</em> object that the <em>setFromFiles</em> function expects. Note I have prepended the function name with <em>dispatch</em> because it’s good practice in production code to have the application event driven and therefore this function would actually dispatch a custom event instead of calling the function directly on the collection.</p>
<h2 id="backbone-sync">Backbone Sync</h2>
<p>Finally, we arrive at the persistence part! On the client side we use a little more Backbone. In this case, I simply want to save the entire collection, so I will use <em>Backbone.Sync</em> as follows:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span><span class="p">(</span><span class="dl">"</span><span class="s2">create</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">);</span></code></pre></figure>
<p>This will cause Backbone to perform a POST request to the server to the location: ‘/images’ which is basically the url set in the Gallery collection earlier. One the server a Ruby file is waiting to process the response. In this example, I am using Sinatra server. Of course, developers are free to use any server technology they want! For completeness, here is the server side Ruby code:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre><span class="n">post</span> <span class="s2">"/images"</span> <span class="k">do</span>
<span class="n">payload</span> <span class="o">=</span> <span class="no">JSON</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="n">request</span><span class="p">.</span><span class="nf">body</span><span class="p">.</span><span class="nf">read</span><span class="p">.</span><span class="nf">to_s</span><span class="p">)</span>
<span class="n">payload</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">image</span><span class="o">|</span>
<span class="n">data</span> <span class="o">=</span> <span class="n">image</span><span class="p">[</span><span class="s2">"data"</span><span class="p">]</span>
<span class="n">i</span> <span class="o">=</span> <span class="n">data</span><span class="p">.</span><span class="nf">index</span><span class="p">(</span><span class="s1">'base64'</span><span class="p">)</span> <span class="o">+</span> <span class="mi">7</span>
<span class="n">filedata</span> <span class="o">=</span> <span class="n">data</span><span class="p">.</span><span class="nf">slice</span><span class="p">(</span><span class="n">i</span><span class="p">,</span> <span class="n">data</span><span class="p">.</span><span class="nf">length</span><span class="p">)</span>
<span class="no">File</span><span class="p">.</span><span class="nf">open</span><span class="p">(</span><span class="n">image</span><span class="p">[</span><span class="s2">"filename"</span><span class="p">],</span> <span class="s1">'wb'</span><span class="p">)</span> <span class="k">do</span> <span class="o">|</span><span class="n">f</span><span class="o">|</span>
<span class="n">f</span><span class="p">.</span><span class="nf">write</span><span class="p">(</span><span class="no">Base64</span><span class="p">.</span><span class="nf">decode64</span><span class="p">(</span><span class="n">filedata</span><span class="p">))</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>This is a very basic application which demonstrates selecting, previewing and saving multiple image files to a Ruby Sinatra endpoint using Backbone and HTML5 on the client. There is no functionality to manage a collection of images, for example, edit or delete. However, I feel this example is enough to get started to build a fuller Image Gallery application! Many features could be implemented in this application including using the HTML5 Canvas to automatically resize images or allow the user to alter the images directly before saving. On the server side, the Ruby script could actually push the images to S3 instead of saving to the file system, for example.</p>
<h2 id="code">Code</h2>
<p>The code for this example is <a href="https://github.com/tweetegy/multiple_image_gallery_upload_HTML5_and_Backbone_application">here</a>.</p>
<h2 id="tutorials">Tutorials</h2>
<p><a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/">Great tutorial using FileReader by HTML5 Rocks</a></p>
Save an image file directly to S3 from a web browser using HTML5 and Backbone.js2012-01-19T00:00:00+00:00http://tweetegy.com/2012/01/save-an-image-file-directly-to-s3-from-a-web-browser-using-html5-and-backbone-js<p>This post continues from the <a href="/2012/01/preview-a-local-image-using-backbone-and-html5-javascript/">previous post</a> where I show how to <a href="/2012/01/preview-a-local-image-using-backbone-and-html5-javascript/">preview a local image using Backbone and HTML5 JavaScript</a>. In this post we will actually upload this file <strong>directly</strong> to an S3 bucket! This post will focus only on that part.</p>
<h2 id="overview">Overview</h2>
<p>The way to avoid any cross-site-scripting restrictions when uploading to S3 is essentially to do two things:</p>
<ul>
<li>Use a form to POST the data to S3</li>
<li>Include in that form a Policy and Signature based on the content + your AWS keys</li>
</ul>
<h2 id="the-form">The Form</h2>
<p>Since I am using Backbone.js in this example and since I want to show a preview of the image before uploading it, I realized that I needed to split the form into two templates. The reason was because I needed to be able to refresh the file meta data that is essentially the <em>key</em>, <em>policy</em> and <em>signature</em> required by the AWS S3 API. Here are the two templates:</p>
<h4 id="the-image-meta-template">The Image Meta Template</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"image-meta-template"</span><span class="nt">></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">hidden</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">key</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= key %></span><span class="dl">'</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">hidden</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">acl</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= acl %></span><span class="dl">'</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">hidden</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= contentType %></span><span class="dl">'</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">hidden</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">AWSAccessKeyId</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= AWSAccessKeyId %></span><span class="dl">'</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">hidden</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">success_action_redirect</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= successActionRedirect %></span><span class="dl">'</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">hidden</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">x-amz-meta-filename</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%=filename %></span><span class="dl">'</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">hidden</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">Policy</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= POLICY %></span><span class="dl">'</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">hidden</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">Signature</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">'</span><span class="s1"><%= SIGNATURE %></span><span class="dl">'</span> <span class="o">/></span>
<span class="nt"></script></span></code></pre></figure>
<h4 id="the-image-file-template">The Image File Template</h4>
<figure class="highlight"><pre><code class="language-erb" data-lang="erb"><span class="nt"><script </span><span class="na">type=</span><span class="s">"text/template"</span> <span class="na">id=</span><span class="s">"image-file-template"</span><span class="nt">></span>
<span class="o"><</span><span class="nx">form</span> <span class="nx">id</span><span class="o">=</span><span class="dl">"</span><span class="s2">formBlob</span><span class="dl">"</span> <span class="nx">action</span><span class="o">=</span><span class="dl">"</span><span class="cp"><%=</span> <span class="n">bucket</span> <span class="cp">%></span><span class="s2">.s3.amazonaws.com</span><span class="dl">"</span> <span class="nx">method</span><span class="o">=</span><span class="dl">"</span><span class="s2">post</span><span class="dl">"</span> <span class="nx">enctype</span><span class="o">=</span><span class="dl">"</span><span class="s2">multipart/form-data</span><span class="dl">"</span><span class="o">></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">id</span><span class="o">=</span><span class="dl">"</span><span class="s2">myImage</span><span class="dl">"</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span> <span class="nx">name</span><span class="o">=</span><span class="dl">"</span><span class="s2">file</span><span class="dl">"</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">input</span> <span class="nx">id</span><span class="o">=</span><span class="dl">"</span><span class="s2">btnSave</span><span class="dl">"</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span> <span class="nx">value</span><span class="o">=</span><span class="dl">"</span><span class="s2">Save Image</span><span class="dl">"</span> <span class="o">/></span>
<span class="o"><</span><span class="sr">/form</span><span class="err">>
</span><span class="nt"></script></span></code></pre></figure>
<p>The data is passed to these templates from the Backbone View. However, when we select a new file we need to first update the preview (this template is discussed in the <a href="/2012/01/preview-a-local-image-using-backbone-and-html5-javascript/">previous post</a>) and then update the image meta template only (not the image file template because that is already correct). So this is the reason I have two templates here.</p>
<p>The interesting attributes of the image meta template are: <em>key</em>, <em>POLICY</em> and <em>SIGNATURE</em> which are all required by the AWS S3 API. The key is the simplest of the three, so let’s start with that.</p>
<h2 id="the-key">The Key</h2>
<p>The key is simply the bucket key we need to use in order to save (and later retrieve) the image back. In this example, I have the key made up of two attributes on the Backbone Model: folder and filename. The folder is set during the creation of the model in the bootstrap.js file and the filename is set when the user selects a file using the <em>myImage</em> file input. Right after the file has been sucessfully loaded into the preview, I call a function “updatePoilcy” which first sets the key attribute on the Model like so:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">updatePolicy</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">key</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">folder</span><span class="dl">'</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">filename</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">key</span><span class="p">:</span> <span class="nx">key</span><span class="p">});</span>
<span class="c1">//more code later...</span>
<span class="p">}</span></code></pre></figure>
<h2 id="the-policy">The Policy</h2>
<p>The Policy is a JSON document that is then converted to Base64 encoding and set as a property on the Model. The code to do this is also in the updatePolicy function (hence the name!). Note that we are getting the data directly from the Model to build this Policy and that it must (and <strong>will</strong>, thanks to Backbone binding!) match with the values in the form template. Here is that code:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">updatePolicy</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="c1">//code to set the key attribute on the model</span>
<span class="nx">POLICY_JSON</span> <span class="o">=</span> <span class="p">{</span> <span class="dl">"</span><span class="s2">expiration</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2012-12-01T12:00:00.000Z</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">conditions</span><span class="dl">"</span><span class="p">:</span> <span class="p">[</span>
<span class="p">[</span><span class="dl">"</span><span class="s2">eq</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">$bucket</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">bucket</span><span class="dl">'</span><span class="p">)],</span>
<span class="p">[</span><span class="dl">"</span><span class="s2">starts-with</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">$key</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">key</span><span class="dl">'</span><span class="p">)],</span>
<span class="p">{</span><span class="dl">"</span><span class="s2">acl</span><span class="dl">"</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">acl</span><span class="dl">'</span><span class="p">)},</span>
<span class="p">{</span><span class="dl">"</span><span class="s2">success_action_redirect</span><span class="dl">"</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">successActionRedirect</span><span class="dl">'</span><span class="p">)},</span>
<span class="p">{</span><span class="dl">"</span><span class="s2">x-amz-meta-filename</span><span class="dl">"</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">filename</span><span class="dl">'</span><span class="p">)},</span>
<span class="p">[</span><span class="dl">"</span><span class="s2">starts-with</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">$Content-Type</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">contentType</span><span class="dl">'</span><span class="p">)]</span>
<span class="p">]</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">policyBase64</span> <span class="o">=</span> <span class="nx">Base64</span><span class="p">.</span><span class="nx">encode</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">POLICY_JSON</span><span class="p">));</span>
<span class="c1">//Set the Policy on the Model so that it is then sent with the Form payload</span>
<span class="k">this</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">POLICY</span><span class="p">:</span> <span class="nx">policyBase64</span> <span class="p">});</span>
<span class="c1">//more code later...</span>
<span class="p">}</span></code></pre></figure>
<h2 id="the-signature">The Signature</h2>
<p>The final part of this puzzle is the Signature. This is generated using the Policy and your AWS Secret key and is encrypted using SHA1 like so:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">updatePolicy</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="c1">//previous code (shown above)</span>
<span class="kd">var</span> <span class="nx">secret</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">AWSSecretKeyId</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">policyBase64</span> <span class="o">=</span> <span class="nx">Base64</span><span class="p">.</span><span class="nx">encode</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">POLICY_JSON</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">signature</span> <span class="o">=</span> <span class="nx">b64_hmac_sha1</span><span class="p">(</span><span class="nx">secret</span><span class="p">,</span> <span class="nx">policyBase64</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">SIGNATURE</span><span class="p">:</span> <span class="nx">signature</span> <span class="p">});</span>
<span class="p">}</span></code></pre></figure>
<p>The full <em>updatePolicy</em> function looks like this. Note that this function is called on the Model initialize and on any data changes (i.e. when the user selects a new image).</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">updatePolicy</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">key</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">folder</span><span class="dl">'</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">filename</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">key</span><span class="p">:</span> <span class="nx">key</span><span class="p">});</span>
<span class="nx">POLICY_JSON</span> <span class="o">=</span> <span class="p">{</span> <span class="dl">"</span><span class="s2">expiration</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">2012-12-01T12:00:00.000Z</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">conditions</span><span class="dl">"</span><span class="p">:</span> <span class="p">[</span>
<span class="p">[</span><span class="dl">"</span><span class="s2">eq</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">$bucket</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">bucket</span><span class="dl">'</span><span class="p">)],</span>
<span class="p">[</span><span class="dl">"</span><span class="s2">starts-with</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">$key</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">key</span><span class="dl">'</span><span class="p">)],</span>
<span class="p">{</span><span class="dl">"</span><span class="s2">acl</span><span class="dl">"</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">acl</span><span class="dl">'</span><span class="p">)},</span>
<span class="p">{</span><span class="dl">"</span><span class="s2">success_action_redirect</span><span class="dl">"</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">successActionRedirect</span><span class="dl">'</span><span class="p">)},</span>
<span class="p">{</span><span class="dl">"</span><span class="s2">x-amz-meta-filename</span><span class="dl">"</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">filename</span><span class="dl">'</span><span class="p">)},</span>
<span class="p">[</span><span class="dl">"</span><span class="s2">starts-with</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">$Content-Type</span><span class="dl">"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">contentType</span><span class="dl">'</span><span class="p">)]</span>
<span class="p">]</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">secret</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">AWSSecretKeyId</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">policyBase64</span> <span class="o">=</span> <span class="nx">Base64</span><span class="p">.</span><span class="nx">encode</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">POLICY_JSON</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">signature</span> <span class="o">=</span> <span class="nx">b64_hmac_sha1</span><span class="p">(</span><span class="nx">secret</span><span class="p">,</span> <span class="nx">policyBase64</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">POLICY</span><span class="p">:</span> <span class="nx">policyBase64</span> <span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="kd">set</span><span class="p">({</span><span class="na">SIGNATURE</span><span class="p">:</span> <span class="nx">signature</span> <span class="p">});</span>
<span class="p">}</span></code></pre></figure>
<h2 id="success-action-redirect">Success Action Redirect</h2>
<p>The <em>successActionRedirect</em> attribute on the model is worth a mention. In this example, I set it to the same page that sent the POST request. If you only want to send data to S3 this is fine, but what if you want to sent some of the meta data to another separate API? There are several ways to do this but one way would be to set this attribute to a service that sends the bucket and key to a backend queue. That queue can be periodically ‘popped’ via a cron job that makes a GET request to S3 to retrieve all the meta data saved there for that image file. This data can then be saved to a separate API at this point. This gives the developer full control over where the file meta data is transformed and stored.</p>
<p>Another thing to note is the attribute <em>x-amz-meta-filename</em>. This is actually a custom attribute and the developer can set any number of these with the POST request. They must start with “x-amz-meta-” but that’s about it! So you could have “x-amz-meta-width” & “x-amz-meta-height” which could be calulated using a HTML5 Canvas set and set as properties on the Model. As long as the Policy and the Form contain these same attributes, they will all be saved along with the image when the form is POST to S3. Very handy!</p>
<h2 id="conclusion">Conclusion</h2>
<p>This is a basic example to show how to upload a file directly to S3 from the browser. There are still plenty of unanswered questions such as being able to upload multiple files or upload a file using AJAX and then post some meta data to a separate API (all directly from the browser). These issues can be the subjects of future posts.</p>
<h2 id="code">Code</h2>
<p>The code for this example is available <a href="https://github.com/tweetegy/save_image_directly_to_s3_using_backbone">here</a></p>
<p>To run the example you need to serve the folder from a HTTP server. I usually use Python SimpleHTTPServer for basic examples like this one. Thus, by default, if you CD into the example directory and run <strong>python -m SimpleHTTPServer</strong> then the application will be available at <a href="http://localhost:8000">http://localhost:8000</a>. You also need to create an S3 account and update <strong>YOUR-BUCKET</strong>, <strong>YOUR-ACCESS-KEY</strong> and <strong>YOUR-SECRET-KEY</strong> in bootstrap.js. Oh! and it will only work in the latest WebKit based browsers. I tested it in Chrome 16.0.912.63 beta. Good luck!</p>
<h2 id="tutorials">Tutorials</h2>
<p><a href="http://s3.amazonaws.com/doc/s3-example-code/post/post_sample.html">POST Example from AWS</a>
<a href="http://blog.danguer.com/2011/10/25/upload-s3-files-directly-with-ajax/">Upload S3 files directly with AJAX</a>
<a href="http://docs.amazonwebservices.com/AmazonS3/latest/dev/HTTPPOSTExamples.html">Another example from AWS</a></p>
Preview a local image using Backbone and HTML5 JavaScript2012-01-18T00:00:00+00:00http://tweetegy.com/2012/01/preview-a-local-image-using-backbone-and-html5-javascript<p>HTML5 + Backbone.js make a great partnership! In this blog post, I am going to show how to preview an image in the browser without having to touch the server. I’ll also use Backbone.js to demonstrate how developers can update a Backbone model with image data and refresh the view to in order to display a preview of the image.</p>
<h2 id="backbone-templates">Backbone Templates</h2>
<p>Backbone Templates allow developers to build re-usable layouts that can be instansiated within Backbone Views. For this example application, we will need two templates: one for the preview and one for selecting (and later saving) a new image file. Here is the HTML:</p>
<p><img src="/assets/preview-image-template.png" alt="Preview Image Template" /></p>
<p><img src="/assets/select-image-template.png" alt="Select Image Template" /></p>
<h2 id="backbone-views">Backbone Views</h2>
<p>Backbone Views have the responsibility of initializing and rendering the templates into the DOM so that they are visible on the screen. They can also include data from the model. In the templates above, only one requires data from the model; <em>preview-image-template</em>. This is also, in fact, the most basic view in this example, so let’s look at that first:</p>
<p><img src="/assets/preview-image-view.png" alt="Preview Image View" /></p>
<p>I won’t go into too much detail about what is happening here with the Backbone View but instead I want to focus on the task at hand; to load a preview of the selected image file. The main code to take notice here is the following call to bind in the initialize function:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="dl">'</span><span class="s1">change</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span></code></pre></figure>
<p>This binds the change event on the model to call the render method on this view. The result will be that whenever <em>any</em> attribute on the model changes, the render method on this view will be called, resulting in the display being updated. But with what? Let’s continue to build the application with the SelectImageView shown below:</p>
<p><img src="/assets/select-image-view.png" alt="Select Image View" /></p>
<p>In this View I am binding to some DOM events which I am then passing onto View dispatch functions. I prepended these functions with dispatch because in a Production application environment developers would usually trigger custom events which would then be bound by Backbone Models or Views. In this case, I am cheating a little for simplicity and clarity and simply calling the <em>setFromFile</em> function directly on the model. This model, by the way, is exactly the same instance of the model that is bound to the <em>PreviewImageView</em> (see the bootstrap.js file description below to see how developers can set the model attribute on a Backbone View).</p>
<h2 id="backbone-models">Backbone Models</h2>
<p>This is by far the most interesting part of the application! There is only one model and so this is where we need to define our <em>setFromFile</em> function used in the view earlier. This function will use the new HTML5 FileReader object to read the data from the selected file and update the <em>data</em> attribute on the model with the raw data from the file. As you would have guessed by now, this fires a <em>change</em> event on the model which in turn causes the PreviewImageView to call render and we should see the new image appear on the screen!</p>
<p><img src="/assets/my-image-model.png" alt="Backbone Model" /></p>
<h2 id="backbone-router-and-bootstrapjs">Backbone Router and bootstrap.js</h2>
<p>For completeness, here is the code for this applications Backbone Router and the bootstrap.js code that kicks everything off. The router does nothing unusual but bootstrap.js deserves a little explanation.</p>
<p>I want the application to load in a state where we see a default image ‘preview.png’. This can be achived by setting the model with default attributes of filename = ‘preview.png’ and data = ‘img/preview.png’. This can also be done directly with the model definition too using defaults. Next I create both views and set the model property on each using the same model. As mentioned above, in Production, we would only set the model property on the PreviewImageView and use events to notify of any changes. Finally we create the Backbone Router and start the application!</p>
<p>Here is the code for the Backbone Router and bootstrap.js:</p>
<p><img src="/assets/backbone-router.png" alt="Backbone Router" /></p>
<p><img src="/assets/bootstrap-js-file.png" alt="Bootstrap JS File" /></p>
<h2 id="some-cool-tutorials-on-the-subject">Some cool tutorials on the subject</h2>
<p><a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/">HTML5 Rocks</a>
<a href="http://backbonetutorials.com/">Backbone Tutorials</a></p>
Ruby blocks, Procs and lambdas2012-01-05T00:00:00+00:00http://tweetegy.com/2012/01/ruby-blocks-procs-and-lambdas<h2 id="preamble">Preamble</h2>
<p>One of my favorite parts of the Ruby Programming language is being able to pass code to a method (usually an iterator) and have that code executed dynamically. In Ruby there are several ways to do this using: blocks, Procs and lamdbas. While these are all very similar, there are some very subtle differences. First let me explain blocks.</p>
<h2 id="blocks">Blocks</h2>
<p>Blocks are code that can be implicitly passed to a method in Ruby. Any method can in fact be passed a block of code even if the method does not explicitly expect it. In the following example, the method <em>test_blocks</em> does not explicitly expect or do anything with a block, however, if called with a block the code will run printing in test_blocks.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">test_blocks</span>
<span class="nb">puts</span> <span class="s2">"in test_blocks"</span>
<span class="k">end</span>
<span class="n">test_blocks</span> <span class="p">{</span> <span class="nb">puts</span> <span class="s2">"in the block"</span> <span class="p">}</span>
<span class="c1"># Output:</span>
<span class="c1"># in test_blocks</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>By simply adding the <em>yield</em> keyword to the method <em>test_blocks</em> the block will then be run causing the output to change:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">test_blocks</span>
<span class="nb">puts</span> <span class="s2">"in test_blocks"</span>
<span class="k">yield</span>
<span class="k">end</span>
<span class="n">test_blocks</span> <span class="p">{</span> <span class="nb">puts</span> <span class="s2">"in the block"</span> <span class="p">}</span>
<span class="c1"># Output:</span>
<span class="c1"># in test_blocks</span>
<span class="c1"># in the block</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="procs">Procs</h2>
<p>It is possible to get a handle on the block by explicitly putting the block as a parameter in the method definition. Note that this must be the last parameter and must start with an ampersand:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">test_blocks</span><span class="p">(</span><span class="o">&</span><span class="n">block</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">block</span><span class="p">.</span><span class="nf">class</span>
<span class="k">end</span>
<span class="n">test_blocks</span> <span class="p">{</span> <span class="nb">puts</span> <span class="s2">"in the block"</span> <span class="p">}</span>
<span class="c1"># Output:</span>
<span class="c1"># Proc</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Notice that the class is <em>Proc</em> and so the only difference between a block and a Proc is that a Proc can be passed around as an explicit variable. Here is another example where we create a Proc object first and pass that into another method that expects a Proc:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre><span class="p">}</span><span class="k">def</span> <span class="nf">test_blocks</span><span class="p">(</span><span class="n">some_proc</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">some_proc</span><span class="p">.</span><span class="nf">call</span>
<span class="k">end</span>
<span class="n">some_new_proc</span> <span class="o">=</span> <span class="no">Proc</span><span class="p">.</span><span class="nf">new</span> <span class="p">{</span> <span class="nb">puts</span> <span class="s2">"in the Proc !"</span> <span class="p">}</span>
<span class="n">test_blocks</span><span class="p">(</span><span class="n">some_new_proc</span><span class="p">)</span>
<span class="c1"># Output:</span>
<span class="c1"># in the Proc !</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The main reason for having both <em>block</em> and <em>Proc</em> is:</p>
<ul>
<li>If we want to write Ruby like syntax when passing code to a method, and we only want to pass a single Proc we use <strong>blocks</strong>. This is very common pattern in Ruby code – especially with iterators.</li>
<li>If we want to save a piece of code in a variable for reuse then use an explicit <strong>Proc</strong> object</li>
<li>If we want to pass multiple blocks of code to a method and invoke them, we also must use an explicit <strong>Proc</strong> object</li>
</ul>
<h2 id="lambda">Lambda</h2>
<p>Lambda is very similar to a Proc. Lets first start off with an example:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">test_lambda</span><span class="p">(</span><span class="n">some_lambda</span><span class="p">)</span>
<span class="n">some_lambda</span><span class="p">.</span><span class="nf">call</span>
<span class="k">end</span>
<span class="n">some_new_lambda</span> <span class="o">=</span> <span class="nb">lambda</span> <span class="p">{</span><span class="nb">puts</span> <span class="s2">"in the lambda"</span> <span class="p">}</span>
<span class="n">test_lambda</span> <span class="p">(</span><span class="n">some_new_lambda</span><span class="p">)</span>
<span class="c1"># Output:</span>
<span class="c1"># in the Proc !</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>As you can see this looks exactly like the Proc example above, so what is the difference? Well the answer is in the way Ruby handles Procs and Lamdbas. There are, in fact, two differences:</p>
<ol>
<li>Lamdbas check the number of parameters passed into the call, Procs do not check the number of parameters</li>
<li>Lamdbas return from the executing block but <strong>not</strong> from the lexically surrounding method call when they encounter a <em>return</em> keyword (in other words lambda behaves like calling a method which then calls return, whereas a Proc will return from the calling method too</li>
</ol>
<p>Here are a couple of examples to illustrate this. Firstly, the parameter handling differences:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">test_parameter_handling</span><span class="p">(</span><span class="n">code</span><span class="p">)</span>
<span class="n">code</span><span class="p">.</span><span class="nf">call</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span>
<span class="k">end</span>
<span class="n">l</span> <span class="o">=</span> <span class="nb">lambda</span> <span class="p">{</span><span class="o">|</span><span class="n">a</span><span class="p">,</span><span class="n">b</span><span class="p">,</span><span class="n">c</span><span class="o">|</span> <span class="nb">puts</span> <span class="s2">"</span><span class="si">#{</span><span class="n">a</span><span class="si">}</span><span class="s2"> is a </span><span class="si">#{</span><span class="n">a</span><span class="p">.</span><span class="nf">class</span><span class="si">}</span><span class="s2">, </span><span class="si">#{</span><span class="n">b</span><span class="si">}</span><span class="s2"> is a </span><span class="si">#{</span><span class="n">b</span><span class="p">.</span><span class="nf">class</span><span class="si">}</span><span class="s2">, </span><span class="si">#{</span><span class="n">c</span><span class="si">}</span><span class="s2"> is a </span><span class="si">#{</span><span class="n">c</span><span class="p">.</span><span class="nf">class</span><span class="si">}</span><span class="s2">"</span> <span class="p">}</span>
<span class="nb">p</span> <span class="o">=</span> <span class="no">Proc</span><span class="p">.</span><span class="nf">new</span> <span class="p">{</span><span class="o">|</span><span class="n">a</span><span class="p">,</span><span class="n">b</span><span class="p">,</span><span class="n">c</span><span class="o">|</span> <span class="nb">puts</span> <span class="s2">"</span><span class="si">#{</span><span class="n">a</span><span class="si">}</span><span class="s2"> is a </span><span class="si">#{</span><span class="n">a</span><span class="p">.</span><span class="nf">class</span><span class="si">}</span><span class="s2">, </span><span class="si">#{</span><span class="n">b</span><span class="si">}</span><span class="s2"> is a </span><span class="si">#{</span><span class="n">b</span><span class="p">.</span><span class="nf">class</span><span class="si">}</span><span class="s2">, </span><span class="si">#{</span><span class="n">c</span><span class="si">}</span><span class="s2"> is a </span><span class="si">#{</span><span class="n">c</span><span class="p">.</span><span class="nf">class</span><span class="si">}</span><span class="s2">"</span> <span class="p">}</span>
<span class="n">test_parameter_handling</span> <span class="p">(</span><span class="nb">p</span><span class="p">)</span>
<span class="n">test_parameter_handling</span> <span class="p">(</span><span class="n">l</span><span class="p">)</span>
<span class="c1"># Output:</span>
<span class="c1"># 1 is a Fixnum, 2 is a Fixnum, is a NilClass</span>
<span class="c1"># ArgumentError: wrong number of arguments (2 for 3)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>As you can see from the output of the example, the Proc does not care if we only call with two parameters when it’s possible to use three parameters it simply sets all unused parameters to <em>nil</em>. However, when passing a <em>lambda</em> to the method, Ruby throws an <em>ArgumentError</em> instead. So if you want your Proc (a lamdba is an instance of Proc, by the way) to be called with a specific set of parameters no more and no less then use <em>lamdba</em>.</p>
<p>Here is an example that demonstrates the differences how Proc and lamdba behave when they encounter a <em>return</em> statement:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">return_using_proc</span>
<span class="no">Proc</span><span class="p">.</span><span class="nf">new</span> <span class="p">{</span> <span class="k">return</span> <span class="s2">"Hi from proc!"</span><span class="p">}.</span><span class="nf">call</span>
<span class="nb">puts</span> <span class="s2">"end of proc call"</span>
<span class="k">end</span>
<span class="k">def</span> <span class="nf">return_using_lambda</span>
<span class="nb">lambda</span> <span class="p">{</span><span class="k">return</span> <span class="s2">"Hi from lambda!"</span><span class="p">}.</span><span class="nf">call</span>
<span class="nb">puts</span> <span class="s2">"end of lambda call"</span>
<span class="k">end</span>
<span class="nb">puts</span> <span class="n">return_using_proc</span>
<span class="nb">puts</span>
<span class="c1"># Output</span>
<span class="c1"># Hi from proc!</span>
<span class="c1"># end of lambda call</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>When <em>return_using_proc</em> is called the method stops processing as soon as it encounters the return statement and we see Hi from proc! output. When <em>return_using_lambda</em> is called the return is encountered but does not cause the method to return and instead the method continues to run so we see end of lambda call” output.</p>
<p>Here is another example to demonstrate this in a slightly different way:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">test_returns</span>
<span class="nb">puts</span> <span class="s2">"top"</span>
<span class="n">pr</span> <span class="o">=</span> <span class="no">Proc</span><span class="p">.</span><span class="nf">new</span> <span class="p">{</span> <span class="k">return</span> <span class="p">}</span>
<span class="n">pr</span><span class="p">.</span><span class="nf">call</span>
<span class="nb">puts</span> <span class="s2">"bottom"</span>
<span class="k">end</span>
<span class="nb">puts</span> <span class="s2">"before call"</span>
<span class="n">test_returns</span>
<span class="nb">puts</span> <span class="s2">"after call"</span>
<span class="c1"># Output</span>
<span class="c1"># before call</span>
<span class="c1"># top</span>
<span class="c1"># after call</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>In this example, we see before call output followed by top as we would expect but then we see after call – note there is no output for our puts bottom statement. This is because the call to the Proc object (pr.call) caused the calling method to return since the Proc contained a return statement. If we replace the Proc with a lambda then we would see bottom output as well since the call to the lambda simply returns back to the method which called it.</p>
<p>The main reason for this diffence is because Procs are more like blocks of code that can be dropped in and executed whereas lamdbas behave more like methods. It is also for this reason why lambdas are more strict with parameter checking just as methods are.</p>
<h2 id="ruby-closures">Ruby Closures</h2>
<p>It’s important to note that blocks, Procs and lambdas are all <a href="http://en.wikipedia.org/wiki/Closure_%28computer_science%29">closures</a>. Basically this means that they hold the values of any variables that were around when they were created. This is a very powerful feature of Ruby because if we wrap creating a block of code in a method call we can dynamically create different behavior. For example:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">create_multiplier</span><span class="p">(</span><span class="n">m</span><span class="p">)</span>
<span class="nb">lambda</span> <span class="p">{</span><span class="o">|</span><span class="n">val</span><span class="o">|</span> <span class="n">val</span> <span class="o">*</span> <span class="n">m</span><span class="p">}</span>
<span class="k">end</span>
<span class="n">two_times</span> <span class="o">=</span> <span class="n">create_multiplier</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span>
<span class="n">three_times</span> <span class="o">=</span> <span class="n">create_multiplier</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">two_times</span><span class="p">.</span><span class="nf">call</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">three_times</span><span class="p">.</span><span class="nf">call</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="c1"># Output</span>
<span class="c1"># 2</span>
<span class="c1"># 3</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>In conclusion we are dealing with blocks of code that can be passed to method calls and executed within that method. When the block of code is executed in the method the state of any variables at the time of creation of that block of code are used. This means that blocks, Procs and lamdbas are all <a href="http://en.wikipedia.org/wiki/Closure_%28computer_science%29">closures</a> in Ruby.</p>
<p>It’s also interesting to conclude that:</p>
<p><strong>Lambdas</strong> have <strong>strict</strong> parameter checking and <strong>diminutive</strong> returns.
<strong>Procs</strong> have <strong>no</strong> parameter checking and <strong>strong</strong> returns.
<strong>Blocks</strong> and <strong>lambdas</strong> are essentially just anonymous <em>Procs</em></p>
<h2 id="some-tutorials">Some tutorials</h2>
<ul>
<li><a href="http://www.robertsosinski.com/2008/12/21/understanding-ruby-blocks-procs-and-lambdas/">Understanding Ruby Blocks, Procs and Lambdas</a></li>
<li><a href="http://pragprog.com/screencasts/v-dtrubyom/the-ruby-object-model-and-metaprogramming">The Ruby Object Model and Metaprogramming – Episode 3</a> </ul></li>
</ul>
Getting started with the HTML5 Geolocation API2011-12-22T00:00:00+00:00http://tweetegy.com/2011/12/getting-started-with-the-html5-geolocation-api<p>Geolocation presents major opportunities for mobile application development. It’s an exciting way to work with location based applications and services and really give the user something that is of great value to them. By using Geolocation, developers can find out the location of the user, can give the user directions to other places, can tell the user where the nearest XYZ place might be, can tell the user how far they have moved in a given timeframe and more, and more.</p>
<h2 id="the-basics">The Basics</h2>
<p>When using the Geolocation API it is important to know the data that we are working with. With Geolocation we work with Latitude and Longitude values. These represent the following:</p>
<ul>
<li><strong>Latitude</strong>: The distance North or South of the equator</li>
<li><strong>Longitude</strong>: The distance East or West of Greenwich, England</li>
</ul>
<p>Usually, these values come from the mobile device GPS or, if the GPS is not available then the co-ordinates can be inferred from the IP address, Wi-Fi or even entered directly by the user.</p>
<h2 id="privacy">Privacy</h2>
<p>Since we are dealing with sensitive information, there are strict privacy requirements that must be followed when working with the Geolocation API. Fortunately, privacy user confirmation is triggered in all browses (that support Geolocation) automatically on any API call. You may have seen the message in some applications asking if it is ok that the application uses your location. This is Geolocation API security kicking in! It happens only once per domain so once you accept you will not need to accept every time you perform a Geolocation based action on that site.</p>
<h2 id="getting-the-co-ordinate-data">Getting the co-ordinate data</h2>
<p>To get the current position of the user, simply execute this function. Note that <em>updateLocation</em> is a callback function to handle the result.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span><span class="nx">updateLocation</span><span class="p">)</span></code></pre></figure>
<p>The position object passed to the <em>updateLocation()</em> function contains the following data attributes:</p>
<ul>
<li>latitude</li>
<li>longitude</li>
<li>accuracy</li>
</ul>
<p>Here is an example of how the updateLocation function might appear:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">updateLocation</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">accuracy</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">accuracy</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">timestamp</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">timestamp</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">latitude</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">latitude</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">longitude</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">longitude</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">accuracy</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">accuracy</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">timestamp</span><span class="dl">"</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">timestamp</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
<h2 id="handling-errors">Handling Errors</h2>
<p>It’s important to handle errors in Geolocation API calls because there is so much potential for things to go wrong: network error, GPS issues, privacy / security issues, timeout etc. We can handle errors using another callback function that takes an error code and deals with that code accordingly. What we need to do first is include that callback function in the call to the <em>getCurrentPosition</em> Geolocation function:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span><span class="nx">updateLocation</span><span class="p">,</span> <span class="nx">handleError</span><span class="p">)</span></code></pre></figure>
<p>Then our <em>handleError</em> callback function might look like this (notice the 4 possible error codes):</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">handleError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">switch</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">code</span><span class="p">)</span> <span class="p">{</span>
<span class="k">case</span> <span class="mi">0</span><span class="p">:</span>
<span class="nx">updateStatus</span><span class="p">(</span><span class="dl">"</span><span class="s2">There was an error while retrieving your location: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="mi">1</span><span class="p">:</span>
<span class="nx">updateStatus</span><span class="p">(</span><span class="dl">"</span><span class="s2">The user prevented this page from retrieving a location.</span><span class="dl">"</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="mi">2</span><span class="p">:</span>
<span class="nx">updateStatus</span><span class="p">(</span><span class="dl">"</span><span class="s2">The browser was unable to determine your location: </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="mi">3</span><span class="p">:</span>
<span class="nx">updateStatus</span><span class="p">(</span><span class="dl">"</span><span class="s2">The browser timed out before retrieving the location.</span><span class="dl">"</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
<h2 id="repeated-requests-to-keep-track-of-users-position">Repeated requests to keep track of users position</h2>
<p>In the example above, <em>getCurrentPosition() *makes one call to get the users location. However, there maybe situations where you will want to track the users *change</em> in position over time. In this case it is better to use <em>watchPosition()</em>.</p>
<p>Fortunately, it’s really simple to change to use watchPosition, here is an example so you can see how similar it is. Note we can set the <em>watchId</em> variable so that we can tell the API to stop watching by making a call to <em>clearWatch</em> function at a later time:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">watchId</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span><span class="nx">updateLocation</span><span class="p">,</span> <span class="nx">handleError</span><span class="p">);</span>
<span class="c1">//Do something and sometime later we can stop watching by passing the watchId to clearWatch():</span>
<span class="nb">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">clearWatch</span><span class="p">(</span><span class="nx">watchId</span><span class="p">);</span></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>While this was a very basic introduction to the HTML5 Geolocation API, it is enough for developers to get started building something useful! Remember that you can also use Google Maps API to integrate mapping data into your application too!</p>
<h2 id="some-cool-examples">Some cool examples</h2>
<ul>
<li><a href="http://merged.ca/iphone/html5-geolocation">Basic Example</a></li>
<li><a href="http://www.ip2location.com/html5geolocationapi.aspx">Demo’s difference with IP and Geolocation API based calls</a></li>
</ul>
<h2 id="some-tutorials">Some tutorials</h2>
<ul>
<li><a href="http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/">Basic Tutorial</a></li>
<li><a href="http://developer.practicalecommerce.com/articles/2066-An-Introduction-to-HTML5-Geolocation">Introduction Tutorial</a></li>
<li><a href="http://www.netmagazine.com/tutorials/link-users-geolocation-data-html5">More detailed tutorial</a></li>
</ul>
Connecting a HTML5 application to a MongoDB instance via MongoLab REST API2011-12-10T00:00:00+00:00http://tweetegy.com/2011/12/connecting-a-html5-application-to-a-mongodb-instance-via-mongolab-rest-api<h2 id="overview">Overview</h2>
<p>I needed a free, document based, online data store so that I could quickly build a HTML5 prototype. As an exercise, I quickly whipped up a simple application that can store basic contact details of people.</p>
<h2 id="getting-started-with-mongolab">Getting Started with MongoLab</h2>
<p>To get started with MongoLab is really easy. Simply create your account, your database and your first collection and your good to go. The only reference document you need for this exercise is the <a href="http://support.mongolab.com/entries/20433053-rest-api-for-mongodb">MongoLab REST API docs</a></p>
<h2 id="first-things-first-adding-data-to-your-mongodb-using-rest">First things first: Adding data to your MongoDB using REST</h2>
<p>I am only going to show you the absolute basics here, so no security, validation, callbacks or fancy UI designs – just the basics! I built this by creating a simple HTML5 form and I used XMLHttpRequest API to send the data to MongoLab.</p>
<p>Here are the code snippets, first the HTML:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">id=</span><span class="s">"myform"</span> <span class="na">name=</span><span class="s">"myform"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">id=</span><span class="s">"name"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">placeholder=</span><span class="s">"Name"</span><span class="nt">><br></span>
<span class="nt"><input</span> <span class="na">id=</span><span class="s">"email"</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">name=</span><span class="s">"email"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">><br></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">onclick=</span><span class="s">"send(this.form);"</span> <span class="na">value=</span><span class="s">"Save"</span><span class="nt">></span>
<span class="nt"></form></span></code></pre></figure>
<p>…and the JavaScript. Note the variable <em>json</em> which is not defined in this snippet but is basically a JSON representation of the form data. The easiest way to get your form data into JSON is to use JQuery (again, I am not including how to do that to keep us focused on how to interact with the MongoLab RESTful API). Note: you will need to replace YOUR-DATABASE, YOUR-COLLECTION and YOUR-API-KEY with your values.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="dl">"</span><span class="s2">POST</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://api.mongolab.com/api/1/databases/YOUR-DATABASE/collections/YOUR-COLLECTION?apiKey=YOUR-API-KEY</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">setRequestHeader</span><span class="p">(</span><span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">json</span><span class="p">);</span></code></pre></figure>
<p>When you load your page you will be able to add a new record to the database. You can check that it has arrived at the database by logging into mongolab.com and viewing the collection.</p>
<h2 id="next-up-display-a-collection-of-items">Next up: Display a collection of items</h2>
<p>It’s really easy to get data from the MongoLab API – a simple GET request will do, in fact! Apart from that, this step is really an exercise in using the JavaScript DOM (which I will not cover here). Here is the HTML – as you can see it is just a placeholder for the data. I am using UL but, of course, you can load the data into whatever placeholder you like.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">id=</span><span class="s">"result"</span><span class="nt">></span>
<span class="nt"></ul></span></code></pre></figure>
<p>Basic JavaScript snippet shown below. As you see just a simple GET request (and send null since there is no payload). To complete this you’ll want to add an <em>onreadystatechange</em> function to detect when the request.status is 200 and then call your DOM rendering function at that point.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">request</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
<span class="nx">request</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="dl">"</span><span class="s2">GET</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://api.mongolab.com/api/1/databases/YOUR-DATABASE/collections/YOUR-COLLECTION?apiKey=YOUR-API-KEY</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">request</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span></code></pre></figure>
<h2 id="view-a-single-document">View a single document</h2>
<p>To render a single document in your HTML5 application, you’ll want to, again, use the GET request but this time passing in the document id in the query string and using that to pull the correct document from your MongoDB. The HTML snippet is the same as for the collection, so I’ll just show the JavaScript code below. Notice how to get the id from the query string. This exampled is hard coded, and thus assumes the id is first in the query string and is in the form “id=12345″.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">top</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">search</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">id</span> <span class="o">=</span> <span class="nx">queryString</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span><span class="nx">queryString</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">request</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
<span class="nx">request</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="dl">"</span><span class="s2">GET</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://api.mongolab.com/api/1/databases/YOUR-DATABASE/collections/YOUR-COLLECTION/</span><span class="dl">"</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="dl">"</span><span class="s2">?apiKey=YOUR-API-KEY</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">request</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span></code></pre></figure>
<h2 id="edit-a-document">Edit a document</h2>
<p>Since this is a RESTful API, to update a document we need to use a PUT verb. The HTML snippet is almost the same as the adding data example, so just the JavaScript snippet here. Notice the getId() function call which simply gets the id from the query string. Obviously this is not a production ready or secure way of getting the id for a document we want to update.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="dl">"</span><span class="s2">PUT</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://api.mongolab.com/api/1/databases/YOUR-DATABASE/collections/YOUR-COLLECTION/</span><span class="dl">"</span> <span class="o">+</span> <span class="nx">getId</span><span class="p">()</span> <span class="o">+</span> <span class="dl">"</span><span class="s2">?apiKey=YOUR-API-KEY</span><span class="dl">"</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">setRequestHeader</span><span class="p">(</span><span class="dl">"</span><span class="s2">Content-Type</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">application/json</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">json</span><span class="p">);</span></code></pre></figure>
<h2 id="delete-a-document">Delete a document</h2>
<p>Finally, we want to be able to delete a document. This is really easy as shown. Notice you need to send <em>null</em> like before because there is no payload.</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">request</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
<span class="nx">request</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="dl">"</span><span class="s2">DELETE</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">https://api.mongolab.com/api/1/databases/YOUR-DATABASE/collections/YOUR-COLLECTION/</span><span class="dl">"</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="dl">"</span><span class="s2">?apiKey=YOUR-API-KEY</span><span class="dl">"</span><span class="p">);</span>
<span class="nx">request</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>Thankfully, with the excellent service provided by MongoLab.com developers are able to build nosql document database driven applications in no time and at no cost!</p>
Getting started with the HTML5 Audio Video API2011-11-12T00:00:00+00:00http://tweetegy.com/2011/11/getting-started-with-the-html5-audio-video-api<p>The HTML5 Audio and Video API is a real game changer. For starters, think about how this affects the (once) mighty Flash. For years Flash was the most popular way to distribute audio and especially video via the web to a browser. Now that can change with HTML5. Even Adobe has announced that it is <a href="http://searchenginewatch.com/article/2124277/Adobe-To-Stop-Developing-Flash-For-Mobile">to stop developing Flash for mobile</a></p>
<h2 id="the-basics">The Basics</h2>
<p>Getting started with the Audio and Video API is real easy (as is everything in HTML5, in fact!). At the very basic level all you need to do is declare an <audio> or <video> tag in your html like so:</video></audio></p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><video</span> <span class="na">src=</span><span class="s">"media/some-video-file.mp4"</span><span class="nt">></video></span></code></pre></figure>
<p>This is so basic that it does not even render the controls. In order to control video playback, the user has to use the context menu (which is not so easy to find for some). In order to render controls simply add the controls attribute like so:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><video</span> <span class="na">src=</span><span class="s">"media/some-video-file.mp4"</span> <span class="na">controls</span><span class="nt">></video></span></code></pre></figure>
<p>Now we see the controls appear as sown below (notice that the first frame of the video is shown by default):</p>
<p><img src="/assets/html5-video-with-controls-300x226.jpg" alt="HTML5 Video with controls" /></p>
<p>Simple! So why does HTML5 have the option to not show the controls? Well the reason is to give the developer control over how the controls are rendered. Since JavaScript has an API to access the Audio and Video instances within the browser it is possible to create and style a “Play/Pause” button in anyway you like! Here is some example JavaScript code that demonstrates how to do this:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre><span class="kd">function</span> <span class="nx">playPauseMusic</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">music</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">music</span><span class="dl">"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">playPauseBtn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">playPauseBtn</span><span class="dl">"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">music</span><span class="p">.</span><span class="nx">paused</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">music</span><span class="p">.</span><span class="nx">play</span><span class="p">();</span>
<span class="nx">playPauseBtn</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Pause the Music!</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">music</span><span class="p">.</span><span class="nx">pause</span><span class="p">();</span>
<span class="nx">playPauseBtn</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span><span class="dl">"</span><span class="s2">Play the Music!</span><span class="dl">"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>As you can see this is quite easy to do. Simply add an audio tag to the html page with id=”music” and a button tag with id=”playPauseBtn” and this JavaScript can be used to control the play / pause of your music! All it does is render a button but it works and demonstrates how easy it is to use the (in this case) Audio API (the Video API is very similar, by the way).</p>
<h2 id="use-the-source">Use the Source!</h2>
<p>So far I have only shown some simple examples. It is possible in HTML5 to specify different sources so that you can provide different file types for the media you want rendered. So in order to increase the chance that the browser supports the particular container or codec, make sure you save your media as different file types (e.g. ogg, mp4 etc) and use the source as in the following audio example:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><audio></span>
<span class="nt"><source</span> <span class="na">src=</span><span class="s">"1.ogg"</span> <span class="nt">></span>
<span class="nt"><source</span> <span class="na">src=</span><span class="s">"1.mp3"</span> <span class="nt">></span>
Some music by someone!
<span class="nt"></audio></span></code></pre></figure>
<p>Note the text ‘Some music by someone!’ just before the closing <audio> tag. This text will be rendered in non-supporting browsers so it provides a nice and easy way to gracefully fallback if that is the case.</audio></p>
<h2 id="autoplay-attribute">Autoplay attribute</h2>
<p>HTML5 Audio and Video API comes with the optional autoplay attribute. Use this with caution! There is nothing more annoying than a website that starts playing audio or video automatically on load! However, if you must, simply include the attribute in the <audio> or <video> tag.</video></audio></p>
<h2 id="video-api-basic-tip-play-video-on-mouseover">Video API Basic Tip: Play Video on Mouseover</h2>
<p>One thing you might have seen on the web is the concept of playing a video in a thumbnail when the mouse hovers over the video image. This is surprisingly easy to do in HTML5, by the way! All you need to do is set the onmouseover and onmouseout events to call play() and pause() methods respectively, like so:</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><video</span> <span class="na">id=</span><span class="s">"movies"</span> <span class="na">onmouseover=</span><span class="s">"this.play()"</span> <span class="na">onmouseout=</span><span class="s">"this.pause()"</span> <span class="na">autobuffer=</span><span class="s">"true"</span><span class="nt">></span>
<span class="c"><!-- video source here --></span>
<span class="nt"></video></span></code></pre></figure>
<p>That’s it for this very basic introduction! If you want to learn more about the HTML5 Audio and Video API, check out some of the following resources:</p>
<h2 id="some-cool-examples">Some cool examples</h2>
<ul>
<li><a href="http://shapeshed.com/examples/HTML5-video-element/">Basic Examples</a></li>
<li><a href="http://double.co.nz/video_test/events.html">Video Events Example</a></li>
<li><a href="http://www.808.dk/?code-html-5-video">Some notes on HTML5 Video Codes support</a></li>
</ul>
<h2 id="some-tutorials">Some tutorials</h2>
<ul>
<li><a href="https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox">A great HTML5 Audio Video API tutorial by Mozilla</a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/video/basics/">Another great tutorial, this time from HTML5 Rocks!</a></li>
</ul>
Getting started with the HTML5 Canvas API2011-10-08T00:00:00+00:00http://tweetegy.com/2011/10/getting-started-with-the-html5-canvas-api<p>The Canvas API essentially allows the developer to draw on a web page using a JavaScript API. Now you might think, what is the point of this? If you want to show some artwork or animation why not create this first and then send it to the browser as a file?</p>
<h2 id="the-main-benefits-of-using-the-canvas-api">The main benefits of using the Canvas API</h2>
<ul>
<li>The JavaScript to render the image / animation may be smaller than downloading a file</li>
<li>The Canvas API allows for some cool extras like scaling, rotation and even pixel by pixel image access</li>
<li>Being an API means that it is programmable, so you can build applications and games purely based on the Canvas API</li>
<li>The Canvas API is potentially powerful enough that you could <a href="http://code.google.com/p/paintweb/">write an image editing suite that runs in the browser</a> (no more Photoshop required!)</li>
<li>The Canvas API does not require any browser plug-ins (bye, bye Falsh!)</li>
</ul>
<h2 id="the-basics">The Basics</h2>
<p>Eveytime you use the canvas API there are always some things you must do. The first thing is to use the DOM to get a reference to the Canvas object:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">my-id</span><span class="dl">"</span><span class="p">);</span></code></pre></figure>
<p>Then we must get the 2D context of the Canvas object like so: (in the near future a 3D context will become more widely available)</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="dl">"</span><span class="s2">2d</span><span class="dl">"</span><span class="p">);</span></code></pre></figure>
<p>At this point we have access to the 2D context of our canvas object, so we can begin to call methods on this. The following example draws a line on the canvas:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">context</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">10</span><span class="p">);</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="mi">150</span><span class="p">,</span><span class="mi">150</span><span class="p">);</span>
<span class="c1">//Need to call stroke() function otherwise nothing will appear!</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">stroke</span><span class="p">();</span></code></pre></figure>
<h2 id="drawing-shapes">Drawing shapes</h2>
<p>You can do much more with the Canvas API than drawing lines. You can:</p>
<ul>
<li>Draw and fill shapes</li>
<li>Draw lines</li>
<li>Draw curves</li>
<li>Add images</li>
<li>Transform objects</li>
<li>…and more!</li>
</ul>
<p>Here is an example of drawing circle using the arc function:</p>
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">context</span><span class="p">.</span><span class="nx">arc</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">180</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mf">0.71</span><span class="p">);</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">lineWidth</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">stroke</span><span class="p">();</span></code></pre></figure>
<p>Here is a full example (JavaScript within the HTML Script tag) that uses the quadraticCurveTo function to draw a colorful arc! This example shows the HTML5 Canvas element as well as the full method to get the object and the context and draw the arcs. Notice that it is possible to set many properties on the context object like lineWidth. strokeStyle etc</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><canvas</span> <span class="na">id=</span><span class="s">"rainbow"</span> <span class="na">style=</span><span class="s">"border: 1px solid;"</span> <span class="na">width=</span><span class="s">"470"</span> <span class="na">height=</span><span class="s">"400"</span> <span class="nt">/></span></code></pre></figure>
<p>When run in a compatible browser the output should look like so:
<img src="/assets/arc-canvas-example.png" alt="Arc Canvas API Example" /></p>
<p>That’s it for this very basic introduction! If you want to see the full power of the HTML5 Canvas API then check out some of the (really) cool examples below!</p>
<h2 id="some-cool-examples">Some cool examples</h2>
<ul>
<li><a href="http://www.kevs3d.co.uk/dev/asteroids/">Asteroids Game</a></li>
<li><a href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Starfield</a></li>
<li><a href="http://www.effectgames.com/demos/canvascycle/">Landscapes</a></li>
<li><a href="http://andrew-hoyer.com/experiments/cloth/">Cloth Experiment</a></li>
<li><a href="http://hakim.se/experiments/html5/magnetic/02/">Magnetic Experiment</a></li>
</ul>
<h2 id="some-books-and-tutorials">Some books and tutorials</h2>
<ul>
<li><a href="http://www.html5canvastutorials.com/">html5canvastutorials.com</a></li>
<li><a href="http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html">Canvas Deep Dive</a></li>
<li><a href="http://shop.oreilly.com/product/0636920013327.do">HTML5 Canvas book from Oreilly</a></li>
</ul>
HTML5 Series: What makes HTML5 different?2011-09-30T00:00:00+00:00http://tweetegy.com/2011/09/html5-series-what-makes-html5-different<p>I decided during a holiday last week to read <a href="http://www.apress.com/9781430227908">“Pro HTML5 Programming – Powerful APIs for Richer Internet Application Development”</a>. It was my first real dive into HTML5 and I have to say I am very impressed. Sure, I had <em>heard</em> about all the goodness in HTML5 before reading this book but I had never, until now, actually experimented first hand.</p>
<p>We are also developing a <a href="http://yp.com.kh/mobile">HTML5 application at Yoolk</a> but as you can probably tell, I have never touched that code! Instead, I will probably build something myself just for fun or maybe as a project for <a href="http://startupweekend.org">Startup Weekend</a> in some city!</p>
<h3 id="my-overall-feeling-about-html5">My overall feeling about HTML5</h3>
<h4 id="forget-other-platforms-almost-html5-is-the-platform-of-choice">Forget other platforms (almost). HTML5 is the platform of choice</h4>
<p>I am very excited! HTML5 really feels like it is bridging the gap between native client apps build in .NET or GTK to pure web based (or should I say browser based?) applications. My feeling is “finally, pretty much any application that I dream up can be built for and run in a browser!”. Wow! This makes everything so much easier! No pondering should I use .NET, GTK, Flex or any other platform. There are still some exceptions like beefy enterprise applications which still require local install and setup but for 80% (based on the <a href="http://www.the8020principle.com/">80/20 principle</a>, of course) HTML5 will do!</p>
<h4 id="amazon-kindle-fire-boots-html5-adoption-via-the-silk-browser">Amazon Kindle Fire boots HTML5 adoption via the Silk Browser</h4>
<p>Now that Amazon have slammed the tablet market with their new Kindle Fire it opens up the potential for hundreds of thousands and, eventually millions, of new users who developers can target their HTML5 applications towards. The tablet device period opens up a whole new exciting opportunities for HTML5 applications and I can’t wait to get my hands on a Kindle Fire to try this out!</p>
<h4 id="the-future-direction-of-html5-seems-really-really-bright">The future direction of HTML5 seems really really bright</h4>
<p>Some of the future additions to HTML5 as mentioned in the Pro HTML5 Programming book are really cool. For example doing for audio what the canvas has done for images. Basically meaning that the <audio> tag gets an extremely rich API for editing, slicing, dicing and playing around with the audio pitch, volume and more! Can you imagine a full audio studio editing suite in the browser?! Another thing that looks really cool is the potential for the Canvas 3d context API. This can allow developers to produce 3d art, animation, patterns and effects!</audio></p>
<h3 id="html5-series-contents">HTML5 Series Contents</h3>
<p>In this series I will go through many of the parts of the HTML5 API as well as attempting to try out some of the edge technology that is out there but not so wide spread. Over the next month or so, the following contents list will become links to actual pages in this blog!</p>
<p><a href="/2011/10/getting-started-with-the-html5-canvas-api/">Getting started with the HTML5 Canvas API</a>
<a href="/2011/11/getting-started-with-the-html5-audio-video-api/">Getting started with the HTML5 Audio Video API</a>
<a href="/2011/12/getting-started-with-the-html5-geolocation-api/">Getting started with the HTML5 Geolocation API</a>
Getting started with the HTML5 Forms API
Getting started with the HTML5 Web Storage API
Getting started with the HTML5 Communications API
Getting started with the HTML5 Web Sockets API
Getting started with the HTML5 Offline Applications</p>
<p>I hope that you enjoy the HTML5 series!</p>
Using Value Objects in ActiveRecord2011-07-25T00:00:00+00:00http://tweetegy.com/2011/07/using-value-objects-in-activerecord<p>I wanted to find out more about using Value Objects in ActiveRecord. Value objects are conserned with the value of their attributes over other identifiers (as opposed to Entitiy Objects which are concerned mainly about a unique ID). I decided to create a stand alone Active Record project (i.e. without using Rails). This became a sort of mini exercise in itself.</p>
<h2 id="structuring-a-standalone-activerecord-project">Structuring a standalone ActiveRecord project</h2>
<p>I like structure, so the setup I settled with is this:</p>
<p>/db
/models
/config
run.rb</p>
<p>Inside config I placed two files a config.rb and database.yml file:</p>
<h4 id="configrb">config.rb</h4>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'rubygems'</span>
<span class="nb">require</span> <span class="s1">'active_record'</span>
<span class="nb">require</span> <span class="s1">'yaml'</span>
<span class="nb">require</span> <span class="s1">'logger'</span>
<span class="no">DBCONFIG</span> <span class="o">=</span> <span class="no">YAML</span><span class="o">::</span><span class="nb">load</span><span class="p">(</span><span class="no">File</span><span class="p">.</span><span class="nf">open</span><span class="p">(</span><span class="s1">'config/database.yml'</span><span class="p">))</span>
<span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span><span class="p">.</span><span class="nf">establish_connection</span><span class="p">(</span><span class="no">DBCONFIG</span><span class="p">)</span>
<span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span><span class="p">.</span><span class="nf">logger</span> <span class="o">=</span> <span class="no">Logger</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="no">File</span><span class="p">.</span><span class="nf">open</span><span class="p">(</span><span class="s1">'db/database.log'</span><span class="p">,</span> <span class="s1">'a'</span><span class="p">))</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The database.yml file simply contains the details for my database connection. Inside my schema.rb I use <code class="language-plaintext highlighter-rouge">ActiveRecord::Migration</code> to up (create) and down (drop) my table in the database. All the details can be found in the sample project on <a href="https://bitbucket.org/darren_jensen/tweetegy-value-objects/">Bitbucket</a>.</p>
<h2 id="structuring-value-objects">Structuring Value Objects</h2>
<p>The interesting part when concerning Value Objects are the two classes under the models directory person.rb and address.rb (shown below). Notice that since we want address data to be stored as a Value Object we do not inherit from <code class="language-plaintext highlighter-rouge">ActiveRecord::Base</code>. Instead, address is a plain Ruby object and is used in Person by using the <em>composed_of</em> class method. This allows for the attributes of the Value Object to be stored together in the database and <em>composed_of</em> allows us to use these together as one object.</p>
<h4 id="personrb">person.rb</h4>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'models/address'</span>
<span class="k">class</span> <span class="nc">Person</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">composed_of</span> <span class="ss">:address</span><span class="p">,</span> <span class="ss">:mapping</span> <span class="o">=></span> <span class="p">[</span><span class="sx">%w(address_city city)</span><span class="p">,</span> <span class="sx">%w(address_county county)</span><span class="p">]</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h4 id="addressrb">address.rb</h4>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Address</span>
<span class="nb">attr_reader</span> <span class="ss">:city</span><span class="p">,</span> <span class="ss">:county</span>
<span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">city</span><span class="p">,</span> <span class="n">county</span><span class="p">)</span>
<span class="vi">@city</span><span class="p">,</span> <span class="vi">@county</span> <span class="o">=</span> <span class="n">city</span><span class="p">,</span> <span class="n">county</span>
<span class="k">end</span>
<span class="k">def</span> <span class="nf">==</span><span class="p">(</span><span class="n">other_address</span><span class="p">)</span>
<span class="n">city</span> <span class="o">==</span> <span class="n">other_address</span><span class="p">.</span><span class="nf">city</span> <span class="o">&&</span> <span class="n">county</span> <span class="o">==</span> <span class="n">other_address</span><span class="p">.</span><span class="nf">county</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="using-value-objects">Using Value Objects</h2>
<p>So how to use Value Objects? Below is a sample application run.rb that uses the above models and creates four records in the database and searches for using a Value Object for records that have a particular address. The output from this applicaition is not surprisingly: Darren, Michael, proving that it is possible to pass in a new instance of a Value Object (in this case Address) and ActiveRecord will break that down and search for the address in the database for us.</p>
<h4 id="runrb">run.rb</h4>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'config/config'</span>
<span class="nb">require</span> <span class="s1">'models/person'</span>
<span class="n">p1</span> <span class="o">=</span> <span class="no">Person</span><span class="p">.</span><span class="nf">create</span><span class="p">(</span><span class="ss">:name</span> <span class="o">=></span> <span class="s2">"Darren"</span><span class="p">,</span> <span class="ss">:address_city</span> <span class="o">=></span> <span class="s2">"Eastbourne"</span><span class="p">,</span> <span class="ss">:address_county</span> <span class="o">=></span> <span class="s2">"Sussex"</span><span class="p">)</span>
<span class="n">p2</span> <span class="o">=</span> <span class="no">Person</span><span class="p">.</span><span class="nf">create</span><span class="p">(</span><span class="ss">:name</span> <span class="o">=></span> <span class="s2">"Paul"</span><span class="p">,</span> <span class="ss">:address_city</span> <span class="o">=></span> <span class="s2">"Nottingham"</span><span class="p">,</span> <span class="ss">:address_county</span> <span class="o">=></span> <span class="s2">"Nottinghamshire"</span><span class="p">)</span>
<span class="n">p3</span> <span class="o">=</span> <span class="no">Person</span><span class="p">.</span><span class="nf">create</span><span class="p">(</span><span class="ss">:name</span> <span class="o">=></span> <span class="s2">"Simon"</span><span class="p">,</span> <span class="ss">:address_city</span> <span class="o">=></span> <span class="s2">"Dartford"</span><span class="p">,</span> <span class="ss">:address_county</span> <span class="o">=></span> <span class="s2">"Kent"</span><span class="p">)</span>
<span class="n">p4</span> <span class="o">=</span> <span class="no">Person</span><span class="p">.</span><span class="nf">create</span><span class="p">(</span><span class="ss">:name</span> <span class="o">=></span> <span class="s2">"Michael"</span><span class="p">,</span> <span class="ss">:address_city</span> <span class="o">=></span> <span class="s2">"Eastbourne"</span><span class="p">,</span> <span class="ss">:address_county</span> <span class="o">=></span> <span class="s2">"Sussex"</span><span class="p">)</span>
<span class="n">people_in_eastbourne_sussex</span> <span class="o">=</span> <span class="no">Person</span><span class="p">.</span><span class="nf">find_all_by_address</span><span class="p">(</span><span class="no">Address</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="s2">"Eastbourne"</span><span class="p">,</span> <span class="s2">"Sussex"</span><span class="p">))</span>
<span class="nb">puts</span> <span class="n">people_in_eastbourne_sussex</span><span class="p">.</span><span class="nf">map</span><span class="p">(</span><span class="o">&</span><span class="ss">:name</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>The SQL that is generated for find_all_by_address is not surprising:</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">SELECT</span> <span class="nv">"people"</span><span class="p">.</span><span class="o">*</span> <span class="k">FROM</span> <span class="nv">"people"</span>
<span class="k">WHERE</span> <span class="nv">"people"</span><span class="p">.</span><span class="nv">"address_city"</span> <span class="o">=</span> <span class="s1">'Eastbourne'</span>
<span class="k">AND</span> <span class="nv">"people"</span><span class="p">.</span><span class="nv">"address_county"</span> <span class="o">=</span> <span class="s1">'Sussex'</span></code></pre></figure>
<p>Another thing to note is that it is possible to reference either the Value Object via <em>person.address</em> or the attributes separately via <em>person.address_city</em> and <em>person.address_county</em>.</p>
Learn Rails Backwards2011-06-13T00:00:00+00:00http://tweetegy.com/2011/06/learn-rails-backwards<p>I sometimes run free Rails courses locally here. One of the things that I have learnt is that it seems to be best to teach Rails ‘backwards’. What do I mean by that? Well it depends on how you define ‘forwards’! If you practice TDD then a high level process would be to:</p>
<ol>
<li>Write your (failing) test in RSpec</li>
<li>Write Rails code to pass the test</li>
</ol>
<p>This means knowing Ruby before you even start step one above, of course. However, when teaching Rails, I like to do things in reverse, namely:</p>
<ol>
<li>Learn how to write Rails code</li>
<li>Learn how to write RSpec code</li>
<li>Learn how to write Ruby code</li>
</ol>
<p>Now, of course it’s <em>all</em> Ruby, but the point is that the order when teaching / learning Rails is reversed compared with what is done in practice. Of course, this approach does have its good and bad points.</p>
<h2 id="good-points">Good Points</h2>
<ul>
<li>It’s easier to jump straight into a framework with some simple examples and exercises to wow the students</li>
<li>A lot of the time, Students can start building something cool right after the first lesson</li>
<li>It’s especially good for new programmers as their interest in what is going on behind the scenes starts to seep through subconsciously.</li>
</ul>
<h2 id="bad-points">Bad Points</h2>
<ul>
<li>It may be the beginning of a lifetime of bad habits (a.k.a “where are your tests!”).</li>
<li>Following on from the above point, tests make for beautifully simple code – only do what you need and no more. If the student gets into the habit of writing tests after then the code will not be so simple.</li>
<li>For some students, maybe the more experienced ones, it might be better off with the ‘forward’ approach: Learn Ruby, TDD / RSpec, Rails.</li>
</ul>
<p>What are your thoughts on this?</p>
Migrate a PHP application to Rails 32011-05-20T00:00:00+00:00http://tweetegy.com/2011/05/migrate-a-php-application-to-rails-3<p>I recently migrated a basic PHP website to Rails 3. The job went smoothly and this is my first Rails 3 app so I thought I would write about my experiences.</p>
<h2 id="getting-started">Getting Started</h2>
<p>In this situation I would start directly at database level. Get the database ready so that you can create simple ActiveRecord classes without any rule bending. Here are some tips:</p>
<ul>
<li>Make sure all your table names are pluralized</li>
<li>Make sure all your tables contain an <code class="language-plaintext highlighter-rouge">id</code> column as well as <code class="language-plaintext highlighter-rouge">created_at</code> and <code class="language-plaintext highlighter-rouge">updated_at</code> columns to adhere to Rails convention.</li>
<li>Update the parent level tables first, create the models and quickly test them out in the console one-by-one</li>
<li>Move on to child tables / associations and test these too in the console</li>
</ul>
<p><strong>Note:</strong></p>
<p>Because you are building this inside out so to speak (i.e. not using generators) you might come across issues like wanting to use reserved words for your models. in my case I needed to name a model Class (as in a taught class) but had to rename to Klass and use set_table_name as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Klass</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">set_table_name</span> <span class="s2">"classes"</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="date-formatting-in-rails-3">Date Formatting in Rails 3</h2>
<p>Simply create a file under <code class="language-plaintext highlighter-rouge">config/initializers/</code> directory called <code class="language-plaintext highlighter-rouge">time_formats.rb</code> and include formats that you might be needing throughout your application. in my case I wanted dates to be output as Full day, Day number, Month, Year e.g. Monday, 5th April 2011</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="no">Date</span><span class="o">::</span><span class="no">DATE_FORMATS</span><span class="p">[</span><span class="ss">:schedule_date</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"%A %d %B %Y"</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="rendering-collections-with-partials-in-rails-3">Rendering Collections with Partials in Rails 3</h2>
<p>Something else that is quite useful is rendering partials with collections. By simply passing a collection to the render method, Rails will automatically render a partial with the singular name from the models view directory.</p>
<p>For example, I have a list of courses under each category that I want to render, so by passing category.courses the view views/course/_course.html.erb is rendered for each course item in the collection. Marvelous!</p>
<figure class="highlight"><pre><code class="language-erb" data-lang="erb"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="cp"><%=</span> <span class="n">render</span> <span class="n">category</span><span class="p">.</span><span class="nf">courses</span> <span class="cp">%></span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="select-drop-down-lists-in-rails-3">Select drop down lists in Rails 3</h2>
<p>Making select drop downs is amazingly clear and simple also. I made use of <code class="language-plaintext highlighter-rouge">options_from_collection_for_select</code> which is a very neat and powerful way to generate a set of options from an existing collection. Used in conjunction with <code class="language-plaintext highlighter-rouge">select_tag</code> renders our completed drop down list of options!</p>
<figure class="highlight"><pre><code class="language-erb" data-lang="erb"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="cp"><%=</span> <span class="nb">select</span><span class="p">(</span><span class="ss">:enrollment</span><span class="p">,</span> <span class="ss">:class_id</span><span class="p">,</span> <span class="n">options_from_collection_for_select</span><span class="p">(</span><span class="vi">@klasses</span><span class="p">,</span> <span class="ss">:id</span><span class="p">,</span> <span class="ss">:name</span><span class="p">))</span> <span class="cp">%></span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="showing-users-error-notifications-in-rails-3">Showing users error notifications in Rails 3</h2>
<p>For some reason, the form builder helpers <code class="language-plaintext highlighter-rouge">error_messages</code> have been removed from Rails 3. I presume it is to allow the developer more control over rendering any validation errors. So if you want to output errors, use the following example to guide you:</p>
<figure class="highlight"><pre><code class="language-erb" data-lang="erb"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre><span class="cp"><%=</span> <span class="n">form_for</span><span class="p">(</span><span class="vi">@enrollment</span><span class="p">)</span> <span class="k">do</span> <span class="o">|</span><span class="n">f</span><span class="o">|</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">if</span> <span class="vi">@enrollment</span><span class="p">.</span><span class="nf">errors</span><span class="p">.</span><span class="nf">any?</span> <span class="cp">%></span>
<span class="nt"><ol></span>
<span class="cp"><%</span> <span class="vi">@enrollment</span><span class="p">.</span><span class="nf">errors</span><span class="p">.</span><span class="nf">full_messages</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">error_msg</span><span class="o">|</span> <span class="cp">%></span>
<span class="nt"><li></span>
<span class="cp"><%=</span> <span class="n">error_msg</span> <span class="cp">%></span>
<span class="nt"></li></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
<span class="nt"></ol></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="seo-friendly-urls">SEO Friendly urls</h2>
<p>SEO Friendly urls are really easy to setup so put this in yer model and smoke it! The <code class="language-plaintext highlighter-rouge">to_param</code> method is used by the url helpers so by overriding in this way autmatically generates the url you choose with no further fuss!</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">to_param</span>
<span class="s2">"</span><span class="si">#{</span><span class="nb">id</span><span class="si">}</span><span class="s2">-</span><span class="si">#{</span><span class="n">title</span><span class="p">.</span><span class="nf">parameterize</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="sitemap-xml-file-generation-example-in-rails-3">Sitemap XML file generation example in Rails 3</h2>
<p>Sitemap XML file generation, I recommend: <a href="http://blog.dynamic50.com/2010/01/27/sitemap-generator-for-ruby-on-rails-applications/"> Sitemap Generator for Rails</a></p>
<p>Note to get this working you need to add the following include to your rake task</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="kp">include</span> <span class="no">Rails</span><span class="p">.</span><span class="nf">application</span><span class="p">.</span><span class="nf">routes</span><span class="p">.</span><span class="nf">url_helpers</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>…and also the following configuration change to your application.rb config</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">config</span><span class="p">.</span><span class="nf">autoload_paths</span> <span class="o">+=</span> <span class="sx">%W(</span><span class="si">#{</span><span class="n">config</span><span class="p">.</span><span class="nf">root</span><span class="si">}</span><span class="sx">/lib)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h2 id="conclusion">Conclusion</h2>
<p>I am very happy that I moved my site to Rails 3 from PHP. It’s much cleaner now, easier to maintain and fits in with my own personal desire to focus on building applications with Rails!</p>
Why is Bundler in Rails 3 so slow?2011-04-21T00:00:00+00:00http://tweetegy.com/2011/04/why-is-bundler-in-rails-3-so-slow<p>Actually, the title of this post is mis-leading a little so blame Google for bringing you here if this is not what you wanted!</p>
<p>What I will do is tell you this – Bundler is really slow on my machine! It takes more than <strong>40 minutes</strong> to install just a <strong>single</strong> gem! I have heard other complaints around the web-sphere but nowhere near as long as I have to wait (usually I find most people who have slow Bundler experience wait more than 3 minutes on average). OK, so I am not going to tell you why this is happening, but I <em>will</em> tell you a work around.</p>
<p>Instead of running:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">bundle <span class="nb">install</span></code></pre></figure>
<p>…run it with the –local switch instead as follows:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">bundle <span class="nb">install</span> <span class="nt">--local</span></code></pre></figure>
<p>If you want to install a new Gem, lets say, mongo_mapper, then add to your application Gemfile:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">gem</span> <span class="s1">'mongo_mapper'</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>…and here’s the important part, install it the old fashioned way, using <code class="language-plaintext highlighter-rouge">gem install</code> and <em>then</em> run <code class="language-plaintext highlighter-rouge">bundle install --local</code></p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="n">gem</span> <span class="n">install</span> <span class="n">mongo_mapper</span> <span class="o">--</span><span class="n">no</span><span class="o">-</span><span class="n">rdoc</span> <span class="o">--</span><span class="n">no</span><span class="o">-</span><span class="n">ri</span>
<span class="n">bundle</span> <span class="n">install</span> <span class="o">--</span><span class="n">local</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Note that I pass the –no-rdoc and –no-ri switch to gem install to make that a little (sometimes a lot) faster too. Now you can get back to building that app! Good luck!</p>
Installing Rails gem fails with “undefined method `spec’ for nil:NilClass” error2011-04-15T00:00:00+00:00http://tweetegy.com/2011/04/installing-rails-gem-fails-with-undefined-method-spec-for-nilnilclass-error<p>Today, while installing Rails 3, my computer suffered a power outage. This does not happen very often, in fact, this was actually due to the computer overheating! After pouring cold water over the keyboard, I restarted the computer and continuing the Rails 3 installation the process, but to my shock and horror, it failed with this message:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">ERROR: While executing gem ... <span class="o">(</span>NoMethodError<span class="o">)</span>
undefined method <span class="sb">`</span>spec<span class="s1">' for nil:NilClass</span></code></pre></figure>
<p>I’ll be honest with you, I was kind of expecting problems to happen since the computer did abruptly shut off during an installation process – but now what do I do!? Well, after a little Googling, the problem was solved. I found out that it’s due to the gem install cache folder which (due to the power interruption) now contained corrupted / empty gem files. My solution was to clear this cache and run the install again, as follows:</p>
<ol>
<li>Find out the location of your cache using: <code class="language-plaintext highlighter-rouge">gem env</code></li>
<li>List all the gems in that cache, using, for example: <code class="language-plaintext highlighter-rouge">ls -l /usr/lib/ruby/gems/1.8/cache/</code></li>
<li>Compare with successfully installed gems using <code class="language-plaintext highlighter-rouge">gem list</code></li>
<li>Remove the gems from the cache list that are missing from the gem list using the <code class="language-plaintext highlighter-rouge">rm</code> command</li>
<li>Continue the installation, for example. <code class="language-plaintext highlighter-rouge">sudo gem install -v=3.0.6 rails --no-rdoc --no-ri</code></li>
</ol>
<p>So now if you have a power outage or any other external failure during a gem installation process you don’t need to panic. Just clear the cache and continue where you left off before you were rudely interrupted!</p>
Moving from Apache to Cherokee Web Server2011-04-05T00:00:00+00:00http://tweetegy.com/2011/04/moving-from-apache-to-cherokee-web-server<p>I recently decided to move a website of mine from Apache to Cherokee. Why? Because Cherokee is fast and Google likes fast sites. Apparently, Cherokee is <a href="http://www.cherokee-project.com/benchmarks.html">the fastest web server in town</a>. I first read about Cherokee in Linux Format magazine and decided to give it a shot with my <a href="http://www.adflickr.com">AdFlickr</a> site which I have running on a <a href="http://www.linode.com">Linode</a> instance (Ubuntu 10.04 by the way).</p>
<h2 id="installing-cherokee-on-ubuntu-1004">Installing Cherokee on Ubuntu 10.04</h2>
<p>Fortunately, it is really easy to install Cherokee on Ubuntu 10.04 since version 0.99.39 is available in the software repositories. Here is basically what I run in my server.bash file to install Cherokee, PHP and MySql:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">apt-get <span class="nb">install </span>cherokee cherokee-doc libcherokee-mod-libssl libcherokee-mod-streaming libcherokee-mod-rrd php5-cgi php5 php5-mysql php5-xsl php5-gd php-pear curl libcurl3 libcurl3-dev php5-curl mysql-server</code></pre></figure>
<h2 id="tunnelling-into-the-cherokee-admin">Tunnelling into the Cherokee Admin</h2>
<p>Cherokee includes a web admin interface for configuring the server. To get that running you need to start it up on your server and then use SSH tunnelling to view in a local browser. So on your server run the following to start the Cherokee Admin deamon:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">cherokee-admin <span class="nt">-b</span> &</code></pre></figure>
<p>Then on your local machine, setup the SSH tunnel as follows:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">ssh <span class="nt">-L</span> 9090:localhost:9090 mysite.com <span class="nt">-N</span></code></pre></figure>
<p>Now, navigate to <a href="http://localhost:9090">http://localhost:9090</a> and log in using the username and password shown in the output on your server console. You should be greeted with the Cherokee Admin home screen!
<img src="/assets/cherokee-admin.png" alt="Cherokee Admin" /></p>
<p>Configuration of Cherokee is a breeze with the use of Wizards. Just navigate to your Virtual Server Behaviour tab, click on wizards button and select the appropriate category. For PHP select Languages then Run Wizard next to PHP.</p>
<p><img src="/assets/cherokee-wizards.png" alt="Cherokee Wizards make configuration a breeze" /></p>
<h2 id="specific-issues-when-moving-from-apache">Specific issues when moving from Apache</h2>
<p>I had two issues, one was not having installed php5-cgi which I simply added to my apt-get install list. The second issue was related to url rewriting (e.g. all the rewrite rules I had in my .htaccess file). I found that the syntax did not exactly copy accross to Cherokee. I also found that in Web Admin interface did not preserve the ordering of the rules, so I decided to edit the cherokee.conf file directly.</p>
<p>Here are a few examples of the rewrite rule in the Apache .htaccess file compared with the Cherokee .conf file (I have removed the vserver path from the Cherokee examples removed for clarity):</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c"># Example 1: In Apache .htaccess</span>
RewriteRule ^rss/<span class="o">([</span>a-zA-Z0-9_-]+<span class="o">)</span><span class="nv">$ </span>/rss.php?op<span class="o">=</span><span class="nv">$1</span>
<span class="c"># Example 1: In Cherokee cherokee.conf file</span>
regex <span class="o">=</span> rss/<span class="o">([</span>^/]+<span class="o">)</span>
show <span class="o">=</span> 0
substring <span class="o">=</span> rss.php?op<span class="o">=</span><span class="nv">$1</span>
<span class="c"># Example 2: In Apache .htaccess</span>
RewriteRule ^<span class="o">([</span>a-zA-Z0-9_-]+<span class="o">)</span>/ad/<span class="o">([</span>a-zA-Z0-9_-]+<span class="o">)</span>/industry/<span class="o">([</span>a-zA-Z0-9_-]+<span class="o">)</span><span class="nv">$ </span>dashboard.php?language<span class="o">=</span><span class="nv">$1</span>&module<span class="o">=</span>ad&op<span class="o">=</span><span class="nv">$2</span>&industry<span class="o">=</span><span class="nv">$3</span>
<span class="c"># Example 2: In Cherokee cherokee.conf file</span>
regex <span class="o">=</span> <span class="o">([</span>^/]+<span class="o">)</span>/ad/<span class="o">([</span>^/]+<span class="o">)</span>/industry/<span class="o">([</span>^/]+<span class="o">)</span>
show <span class="o">=</span> 0
substring <span class="o">=</span> dashboard.php?language<span class="o">=</span><span class="nv">$1</span>&module<span class="o">=</span>ad&op<span class="o">=</span><span class="nv">$2</span>&industry<span class="o">=</span><span class="nv">$3</span></code></pre></figure>
<h2 id="production-deployment">Production Deployment</h2>
<p>Once I had Cherokee running perfectly in my development environment (aka my laptop), I proceeded to deploy to my production environment (aka Linode). Now, I could clone my Linode instance and deploy there and then update my DNS, but I was feeling brave and I was sure the deployment would go smoothly which it did. All I had to do was:</p>
<ol>
<li>Run server.bash to install cherokee</li>
<li>Run a deply.bash script which (amongst other things) copies the cherokee.conf file to /etc/cherokee/</li>
<li>Stop Apache running /etc/intit.d/apache stop</li>
<li>Start Cherokee /etc/init.d/cherokee start</li>
</ol>
<p>The site is now up and running on Cherokee. I hope you can join the <a href="http://www.cherokee-project.com/cherokee-domain-list.html">Cherokee crowd</a> one day too!</p>
How to get a semantic list of all spoken languages in the world2011-02-22T00:00:00+00:00http://tweetegy.com/2011/02/how-to-get-a-semantic-list-of-all-spoken-languages-in-the-world<p>First stop, grab and parse the list from here: <a href="http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes</a>.</p>
<p><strong>Getting language meta data by url dereferencing</strong></p>
<p>This is the easiest method but has less control over the data that is returned (by default all data about the language is returned). Simply replace the [language_name] part of the following url with the value in “Language Name” (NOTE: it is case sensitive so the Language Name must be in capital case):</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">http://dbpedia.org/resource/[Language_Name]_language.json</code></pre></figure>
<p>So for Aramaic the url would be:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">http://dbpedia.org/data/Aramaic_language.json</code></pre></figure>
<p>For Khmer the url would be:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">http://dbpedia.org/data/Khmer_language.json</code></pre></figure>
<p><strong>Getting a subset of data</strong></p>
<p>Let’s say we want a little more control and therefore need only a subset of the data available. In this case we can turn to the SPARQL endpoint available at <a href="http://dbpedia.org/sparql/">http://dbpedia.org/sparql</a>. Copy and paste the following example to get name, abstract, depiction, comment and label data for English Language:</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">PREFIX</span> <span class="n">dbprop</span><span class="p">:</span> <span class="o">&</span><span class="n">lt</span><span class="p">;</span><span class="n">http</span><span class="p">:</span><span class="o">//</span><span class="n">dbpedia</span><span class="p">.</span><span class="n">org</span><span class="o">/</span><span class="n">property</span><span class="o">/&</span><span class="n">gt</span><span class="p">;</span>
<span class="k">PREFIX</span> <span class="n">dbowl</span><span class="p">:</span> <span class="o">&</span><span class="n">lt</span><span class="p">;</span><span class="n">http</span><span class="p">:</span><span class="o">//</span><span class="n">dbpedia</span><span class="p">.</span><span class="n">org</span><span class="o">/</span><span class="n">ontology</span><span class="o">/&</span><span class="n">gt</span><span class="p">;</span>
<span class="k">PREFIX</span> <span class="n">dbpedia</span><span class="p">:</span> <span class="o">&</span><span class="n">lt</span><span class="p">;</span><span class="n">http</span><span class="p">:</span><span class="o">//</span><span class="n">dbpedia</span><span class="p">.</span><span class="n">org</span><span class="o">/</span><span class="n">ontology</span><span class="o">/&</span><span class="n">gt</span><span class="p">;</span>
<span class="k">PREFIX</span> <span class="n">rdfs</span><span class="p">:</span> <span class="o">&</span><span class="n">lt</span><span class="p">;</span><span class="n">http</span><span class="p">:</span><span class="o">//</span><span class="n">www</span><span class="p">.</span><span class="n">w3</span><span class="p">.</span><span class="n">org</span><span class="o">/</span><span class="mi">2000</span><span class="o">/</span><span class="mi">01</span><span class="o">/</span><span class="n">rdf</span><span class="o">-</span><span class="k">schema</span><span class="o">#&</span><span class="n">gt</span><span class="p">;</span>
<span class="k">PREFIX</span> <span class="n">foaf</span><span class="p">:</span> <span class="o">&</span><span class="n">lt</span><span class="p">;</span><span class="n">http</span><span class="p">:</span><span class="o">//</span><span class="n">xmlns</span><span class="p">.</span><span class="n">com</span><span class="o">/</span><span class="n">foaf</span><span class="o">/</span><span class="mi">0</span><span class="p">.</span><span class="mi">1</span><span class="o">/&</span><span class="n">gt</span><span class="p">;</span>
<span class="k">SELECT</span> <span class="o">?</span><span class="n">uri</span> <span class="o">?</span><span class="n">name</span> <span class="o">?</span><span class="n">label</span> <span class="o">?</span><span class="n">thumbnail</span> <span class="o">?</span><span class="n">depiction</span> <span class="o">?</span><span class="n">abstract</span> <span class="o">?</span><span class="k">comment</span>
<span class="k">WHERE</span> <span class="err">{</span>
<span class="o">?</span><span class="n">uri</span> <span class="n">dbprop</span><span class="p">:</span><span class="n">name</span> <span class="nv">"English"</span><span class="o">@</span><span class="n">en</span><span class="p">;</span>
<span class="n">rdf</span><span class="p">:</span><span class="k">type</span> <span class="n">dbpedia</span><span class="o">-</span><span class="n">owl</span><span class="p">:</span><span class="k">Language</span><span class="p">;</span>
<span class="n">dbprop</span><span class="p">:</span><span class="n">name</span> <span class="o">?</span><span class="n">name</span><span class="p">;</span>
<span class="n">foaf</span><span class="p">:</span><span class="n">depiction</span> <span class="o">?</span><span class="n">depiction</span><span class="p">;</span>
<span class="n">dbowl</span><span class="p">:</span><span class="n">thumbnail</span> <span class="o">?</span><span class="n">thumbnail</span><span class="p">;</span>
<span class="n">dbowl</span><span class="p">:</span><span class="n">abstract</span> <span class="o">?</span><span class="n">abstract</span><span class="p">;</span>
<span class="n">rdfs</span><span class="p">:</span><span class="k">comment</span> <span class="o">?</span><span class="k">comment</span><span class="p">;</span>
<span class="n">rdfs</span><span class="p">:</span><span class="n">label</span> <span class="o">?</span><span class="n">label</span> <span class="p">.</span>
<span class="n">filter</span> <span class="p">(</span><span class="n">lang</span><span class="p">(</span><span class="o">?</span><span class="n">label</span><span class="p">)</span> <span class="o">=</span> <span class="nv">"en"</span> <span class="p">)</span>
<span class="n">filter</span> <span class="p">(</span><span class="n">lang</span><span class="p">(</span><span class="o">?</span><span class="n">abstract</span><span class="p">)</span> <span class="o">=</span> <span class="nv">"en"</span> <span class="p">)</span>
<span class="n">filter</span> <span class="p">(</span><span class="n">lang</span><span class="p">(</span><span class="o">?</span><span class="k">comment</span><span class="p">)</span> <span class="o">=</span> <span class="nv">"en"</span> <span class="p">)</span>
<span class="err">}</span></code></pre></figure>
<p>Simply change <code class="language-plaintext highlighter-rouge">?uri dbprop:name "English"@en;</code> to the (English) name of the language that you want to search for e.g. <code class="language-plaintext highlighter-rouge">?uri dbprop:name "French"@en;</code> will return the dbpedia data fields related to the French Language.</p>
<p><strong>Resources</strong></p>
<ul>
<li>SPARQL: <a href="http://sparql.org/">http://sparql.org/</a></li>
<li>Linked Data: <a href="http://linkeddata.org/">http://linkeddata.org/</a></li>
</ul>
How to get a semantic list of all countries and locations in the world2011-02-18T00:00:00+00:00http://tweetegy.com/2011/02/how-to-get-a-semantic-list-of-all-countries-and-locations-in-the-world<p>I am in the process of building a semantic web application. Since the application I am building will be used globally, I wanted to start with including a semantic collection of all countries in the world. It turns out to be rather simple thanks to the GeoNames API. I am a big fan of JSON so all the examples I give here will return the results as JSON.</p>
<h2 id="complete-list-of-all-countries">Complete list of all Countries</h2>
<p>Get a complete list of all countries is as simple as making the following request (note in all the examples the username is <em>demo</em>. In a real application you would need to create your own account with GeoNames):</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">http://api.geonames.org/countryInfoJSON?username<span class="o">=</span>demo</code></pre></figure>
<h2 id="get-data-for-a-single-country">Get data for a single Country</h2>
<p>If you want data for a <strong>single country</strong> then you must include the 2 letter <a href="http://en.wikipedia.org/wiki/ISO_639">ISO_639</a> code in your request. In the following example, the request returns data for Cambodia (iso_639 code KH):</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">http://api.geonames.org/countryInfoJSON?country<span class="o">=</span>KH&#038<span class="p">;</span><span class="nv">username</span><span class="o">=</span>demo</code></pre></figure>
<p>By the way, you will notice that the GeoNames API contains a <a href="http://www.geonames.org/export/codes.html">rich set of data</a>.</p>
<h2 id="locations-within-a-country">Locations within a Country</h2>
<p>GeoNames API has the ability to drill down into various administrative levels (aka <em>populated places</em>) within the country via the <a href="http://www.geonames.org/export/place-hierarchy.html#children">GeoNames Children API</a>. To get all the children of a particular country you need to first get the geonameId from <a href="http://www.geonames.org/export/web-services.html#countryInfo">GeoNames Country Info API</a> (discussed above already), and pass that as a parameter to the Children API. The following example gets the first level of children for Cambodia (which happens to have a geonameId of 1831722)</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">http://api.geonames.org/childrenJSON?geonameId<span class="o">=</span>1831722&#038<span class="p">;</span><span class="nv">username</span><span class="o">=</span>demo</code></pre></figure>
<p>To drill down into the next level of children you recursively pass in the geonameId of each child until the API returns an empty result. If you try the GeoNames API with UK data then the first level of children are England, Scotland, Wales etc then if you pass the geonameId of England you will get all the counties of England like Sussex, Kent, Essex, Nottinghamshire etc. Continue to pass in the geonameId until there are no more children and you will have all the locations in the UK (at least according to GeoNames).</p>
<p>I hope you find this useful. In my next post I will discuss how to get language data from <a href="http://dbpedia.org">dbpedia</a> using their RESTful API or a custom SPARQL query.</p>
Setting join table attribute :has_many :through association in Rails ActiveRecord2011-02-10T00:00:00+00:00http://tweetegy.com/2011/02/setting-join-table-attribute-has_many-through-association-in-rails-activerecord<p>I needed to set an attribute on a join table or in ActiveRecord, the* :through* model as an atomic save action. Let’s set the scene: I have a <em>Product *and a *User *which has a many-to-many relationship since a *Product *can have many *Users *and a User can have many *Products</em>.</p>
<p>Typically, in a database we might have a table <em>product</em>, user and <em>product_user</em>. In Rails I created an association class called <em>Collaborators *since it fit my domain better. Additionally the *Collaborators *class has one attribute *is_admin</em> which indicates the <em>User *(or *Collaborator *actually) is an administrator for the particular *Product</em>.</p>
<p>One of the business rules in the application was that if a <em>User *creates a new *Product *then they are automatically an administrator for that *Product</em>. My dilemma was how to create the new <em>Product</em>, associate it correctly with the <em>User **and* set</em> is_admin* to true all in one nice and neat command?</p>
<p>The answer, it turns out, is straightforward and elegant. I am fairly new to Rails myself, so I understand if this might appear a little overwhelming if you are also just starting out. I have included a set of useful references at the end of this post to help you on your way.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Product</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">has_many</span> <span class="ss">:collaborators</span>
<span class="n">has_many</span> <span class="ss">:users</span><span class="p">,</span> <span class="ss">:through</span> <span class="o">=></span> <span class="ss">:collaborators</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">User</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">has_many</span> <span class="ss">:collaborators</span>
<span class="n">has_many</span> <span class="ss">:products</span><span class="p">,</span> <span class="ss">:through</span> <span class="o">=></span> <span class="ss">:collaborators</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">Collaborator</span> <span class="o"><</span> <span class="no">ActiveRecord</span><span class="o">::</span><span class="no">Base</span>
<span class="n">belongs_to</span> <span class="ss">:product</span>
<span class="n">belongs_to</span> <span class="ss">:user</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Once you have the above ActiveRecord models setup all you need to do is execute the following code to save a new <em>Product</em>, associate a <em>User *as a *Collaborator *and set them as an administrator for the *Product</em>.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="c1">#assume we have the product and current_user instance already set</span>
<span class="n">product</span><span class="p">.</span><span class="nf">save</span> <span class="o">&&</span> <span class="n">product</span><span class="p">.</span><span class="nf">collaborators</span><span class="p">.</span><span class="nf">create</span><span class="p">(</span><span class="ss">:user</span> <span class="o">=></span> <span class="n">current_user</span><span class="p">,</span> <span class="ss">:is_admin</span> <span class="o">=></span> <span class="kp">true</span><span class="p">)</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p><strong>Useful Resources and Docs for ActiveRecord Associations</strong>
<a href="http://guides.rubyonrails.org/association_basics.html#the-has_many-through-association">Has Many Through Association</a>
<a href="http://ar.rubyonrails.org/classes/ActiveRecord/Base.html">ActiveRecord::Base Documentation</a></p>
(Almost) Everthing an experienced programmer needs to know to get started with PHP2011-01-24T00:00:00+00:00http://tweetegy.com/2011/01/almost-everthing-an-experienced-programmer-needs-to-know-to-get-started-with-php<p>I consider myself to be an experienced programmer. Having spent the last 10 years working on a variety of platforms like Windows and Linux, using different programming languages like Java, C#, VB, Ruby, JavaScript etc, I feel that I have a broad experience and understanding of programming. However, there is always that moment when one must use a different language, for whatever reason. In my case I had to start tinkering with a site developed by someone else in PHP. Now I have always tried to avoid PHP since I was very much into compiled languages like Java and C#. Since breaking away from the corporate world, I have been able to move to scripting languages like Ruby, JavaScript and now PHP.</p>
<p>What I want to do is briefly summarize what an experienced programmer needs to know to get started with PHP. I managed to build a simple site in PHP in less than one week using PHP / MySQL / Apache on Linux (commonly known as LAMP stack). I will just list some of the things that I found useful during the journey. The site I built by the way is for my very own <a href="http://www.cambodiahorizon.com">Computer School in Cambodia</a> (shameless personal project plug, I suppose, but only if your in Cambodia .</p>
<p>Note: To place PHP script inside a page you need to open with <? and close with ?></p>
<p><strong>Setting variables:</strong></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="nv">$somevar</span> <span class="o">=</span> <span class="s2">"hello world"</span><span class="p">;</span></code></pre></figure>
<p><strong>String concatenation is done with dots!</strong></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="nv">$url</span><span class="o">=</span><span class="s2">"/somthing/"</span><span class="o">.</span><span class="nv">$id</span><span class="o">.</span><span class="s2">"/"</span><span class="o">.</span><span class="nv">$name</span><span class="o">.</span><span class="s2">".html"</span><span class="p">;</span></code></pre></figure>
<p><strong>Connecting to a database</strong></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="nb">mysql_connect</span><span class="p">(</span><span class="nx">localhost</span><span class="p">,</span><span class="nv">$username</span><span class="p">,</span><span class="nv">$password</span><span class="p">);</span>
<span class="nb">mysql_select_db</span><span class="p">(</span><span class="nv">$database</span><span class="p">)</span> <span class="k">or</span> <span class="k">die</span><span class="p">(</span> <span class="s2">"Unable to select database"</span><span class="p">);</span></code></pre></figure>
<p><strong>Execute a query and count results</strong></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="nv">$results</span><span class="o">=</span><span class="nb">mysql_query</span><span class="p">(</span><span class="nv">$query_sql_string</span><span class="p">);</span>
<span class="nv">$num_results</span><span class="o">=</span><span class="nx">mysql_numrows</span><span class="p">(</span><span class="nv">$results</span><span class="p">);</span></code></pre></figure>
<p><strong>Get a value from the resultset</strong></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="c1">//Note this can be in a while loop.</span>
<span class="c1">//$i is a counter.</span>
<span class="nv">$id</span><span class="o">=</span><span class="nb">mysql_result</span><span class="p">(</span><span class="nv">$results</span><span class="p">,</span><span class="nv">$i</span><span class="p">,</span><span class="s2">"id"</span><span class="p">);</span></code></pre></figure>
<p><strong>IF statements</strong></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">is_null</span><span class="p">(</span><span class="nv">$id</span><span class="p">))</span> <span class="p">{</span> <span class="c1">// do something }</span></code></pre></figure>
<p><strong>Output values in HTML rendering</strong></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="nt"><h1</span> <span class="na">align=</span><span class="s">"center"</span><span class="nt">></span><span class="cp"><?=</span><span class="nv">$some_value</span><span class="cp">?></span><span class="nt"></h1></span></code></pre></figure>
<p><strong>Date formatting</strong></p>
<p>More details of <a href="http://adminschoice.com/php-date-format">date formatting in PHP</a></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="nv">$date_obj</span><span class="o">-></span><span class="na">format</span><span class="p">(</span><span class="s2">"D j M Y"</span><span class="p">)</span></code></pre></figure>
<p><strong>Server Side Includes</strong></p>
<figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="k">include</span><span class="p">(</span><span class="s1">'db.php'</span><span class="p">);</span></code></pre></figure>
Using MongoDB as a logging database with a Rails 3 application2011-01-05T00:00:00+00:00http://tweetegy.com/2011/01/using-mongodb-as-a-logging-database-with-a-rails-3-application<p>Here is a great article on the MongoDB site that explains how to <a href="http://www.mongodb.org/display/DOCS/Rails+3+-+Getting+Started">setup Rails 3 to work with MongoDB with very little effort!</a></p>
<p>Essentially this means doing the following things.</p>
<p>Create a new Rails 3 application issuing the skip-active-record switch</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rails new my_app <span class="nt">--skip-active-record</span></code></pre></figure>
<p>Add the following line to include mongo_mapper to your gemfile</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s2">"mongo_mapper"</span></code></pre></figure>
<p>Now run the bundle installer</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">bundle <span class="nb">install</span></code></pre></figure>
<p>Finally, add this initializer to your Rails 3 project to connect to your MongoDB app:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre><span class="no">MongoMapper</span><span class="p">.</span><span class="nf">connection</span> <span class="o">=</span> <span class="no">Mongo</span><span class="o">::</span><span class="no">Connection</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="s1">'localhost'</span><span class="p">,</span> <span class="mi">27017</span><span class="p">)</span>
<span class="no">MongoMapper</span><span class="p">.</span><span class="nf">database</span> <span class="o">=</span> <span class="s2">"#myapp-</span><span class="si">#{</span><span class="no">Rails</span><span class="p">.</span><span class="nf">env</span><span class="si">}</span><span class="s2">"</span>
<span class="k">if</span> <span class="k">defined?</span><span class="p">(</span><span class="no">PhusionPassenger</span><span class="p">)</span>
<span class="no">PhusionPassenger</span><span class="p">.</span><span class="nf">on_event</span><span class="p">(</span><span class="ss">:starting_worker_process</span><span class="p">)</span> <span class="k">do</span> <span class="o">|</span><span class="n">forked</span><span class="o">|</span>
<span class="no">MongoMapper</span><span class="p">.</span><span class="nf">connection</span><span class="p">.</span><span class="nf">connect_to_master</span> <span class="k">if</span> <span class="n">forked</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Now it’s time to create our dummy action:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rails g controller DummyAction simulate</code></pre></figure>
<p>Creating models that use MongoMapper is very easy. This is a good thing because, at the time of wrting, Rails 3 generators for MongoMapper are not included, so you might end up trying what I did and getting <strong>“No value provided for required options ‘–orm’”</strong> error and then trying all combinations under the sun for the orm switch to get the generator to work! If you want to use generators then try <a href="https://github.com/indirect/rails3-generators/">Rails 3 generators</a>, which is a project that simply has: <em>“Rails 3 compatible generators for gems that don’t have them yet”</em></p>
<p>So I created my own models by hand because it is so easy to do. A typical MongoMapper model might look like this WebAppVisitorLog class of mine:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">WebAppVisitorLog</span>
<span class="kp">include</span> <span class="no">MongoMapper</span><span class="o">::</span><span class="no">Document</span>
<span class="n">key</span> <span class="ss">:session_id</span><span class="p">,</span> <span class="no">Integer</span>
<span class="n">key</span> <span class="ss">:user_id</span><span class="p">,</span> <span class="no">Integer</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Finally, what to do with the action? Well push a log entry to MongoDB like so:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">DummyActionController</span> <span class="o"><</span> <span class="no">ApplicationController</span>
<span class="k">def</span> <span class="nf">simulate</span>
<span class="c1">#log some fake data in Mongo DB</span>
<span class="vi">@log</span> <span class="o">=</span> <span class="no">WebAppVisitorLog</span><span class="p">.</span><span class="nf">create</span><span class="p">(</span>
<span class="p">{</span>
<span class="ss">:session_id</span> <span class="o">=></span> <span class="mi">1</span><span class="p">,</span>
<span class="ss">:user_id</span> <span class="o">=></span> <span class="mi">1</span><span class="p">,</span>
<span class="ss">:updated_at</span> <span class="o">=></span> <span class="no">Time</span><span class="p">.</span><span class="nf">now</span>
<span class="p">})</span>
<span class="vi">@log</span><span class="p">.</span><span class="nf">save</span><span class="p">()</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Be sure to add this to your config.rb file also:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">get</span> <span class="s2">"dummy_action/simulate"</span>
</pre></td></tr></tbody></table></code></pre></figure>
Install MongoDB and load dummy logging data using MongoMapper2011-01-03T00:00:00+00:00http://tweetegy.com/2011/01/install-mongodb-and-load-dummy-logging-data-using-mongomapper<p>It turns out to be <a href="http://www.mongodb.org/display/DOCS/Ubuntu+and+Debian+packages">very easy to install Mongo DB on Ubuntu</a>, so I will not go into detail too much here. If you follow these instructions then MongoDB will start after the installation completes and you can try it out at the console as follows (Note: The first command will fire up the Mongo DB shell and the second will list all the databases):</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">mongo
show dbs</code></pre></figure>
<p>The shell is probably the best way to get started with MongoDB. <a href="http://www.mongodb.org/display/DOCS/Tutorial">Here are some more details on using the MongoDB shell</a>. Or just type <em>help</em> in the console!</p>
<p>Another useful trick to note is that it’s possible to get some administrative details about the server by pointing your browser to the following location: <a href="http://localhost:28017/">http://localhost:28017/</a>. This displays details like version number, database stats, namespace information etc.</p>
<p><strong>Loading MongoDB with test data.</strong></p>
<p>There are three ways to insert data directly into MongoDB. There is the standard <strong>insert</strong> command which inserts one document at a time, there is the <strong>batch insert</strong> which can be used to insert multiple documents at a time (this is more efficient than inserting one at a time), or there is the <strong>mongoimport</strong> command line utility for running a raw data import from a relational database like MySQL. Many of these I will cover in future posts.</p>
<p>There also are indirect ways to load data namely via database language adapters like MongoMapper for Ruby. Here is an example of generating random data and loading it into MongoDB:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'rubygems'</span>
<span class="nb">require</span> <span class="s1">'mongo'</span>
<span class="nb">require</span> <span class="s1">'mongo_mapper'</span>
<span class="nb">require</span> <span class="s1">'faker'</span>
<span class="nb">require</span> <span class="s1">'WebAppVisitorLog'</span>
<span class="c1">#Create a couple of types of documents (see the classes)</span>
<span class="no">MongoMapper</span><span class="p">.</span><span class="nf">database</span> <span class="o">=</span> <span class="s2">"mongodb-logging"</span>
<span class="no">WebAppVisitorLog</span><span class="p">.</span><span class="nf">destroy_all</span>
<span class="mi">10000</span><span class="p">.</span><span class="nf">times</span> <span class="p">{</span><span class="o">|</span><span class="n">n</span><span class="o">|</span>
<span class="n">user_id</span> <span class="o">=</span> <span class="p">(</span><span class="mi">1</span><span class="o">..</span><span class="mi">1000</span><span class="p">).</span><span class="nf">to_a</span><span class="p">.</span><span class="nf">rand</span>
<span class="n">session_id</span> <span class="o">=</span> <span class="p">(</span><span class="mi">1</span><span class="o">..</span><span class="mi">10000</span><span class="p">).</span><span class="nf">to_a</span><span class="p">.</span><span class="nf">rand</span>
<span class="n">updated_at</span> <span class="o">=</span> <span class="p">(</span><span class="mi">1</span><span class="o">..</span><span class="mi">35</span><span class="p">).</span><span class="nf">to_a</span><span class="p">.</span><span class="nf">rand</span><span class="p">.</span><span class="nf">days</span><span class="p">.</span><span class="nf">ago</span>
<span class="vi">@log</span> <span class="o">=</span> <span class="no">WebAppVisitorLog</span><span class="p">.</span><span class="nf">create</span><span class="p">(</span>
<span class="p">{</span>
<span class="ss">:session_id</span> <span class="o">=></span> <span class="n">session_id</span><span class="p">,</span>
<span class="ss">:user_id</span> <span class="o">=></span> <span class="n">user_id</span><span class="p">,</span>
<span class="ss">:updated_at</span> <span class="o">=></span> <span class="n">updated_at</span>
<span class="p">})</span>
<span class="vi">@log</span><span class="p">.</span><span class="nf">save</span><span class="p">()</span>
<span class="p">}</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Here is the code for the WebAppVisitorLog class:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
</pre></td><td class="code"><pre><span class="k">class</span> <span class="nc">WebAppVisitorLog</span>
<span class="kp">include</span> <span class="no">MongoMapper</span><span class="o">::</span><span class="no">Document</span>
<span class="n">key</span> <span class="ss">:session_id</span><span class="p">,</span> <span class="no">Integer</span>
<span class="n">key</span> <span class="ss">:user_id</span><span class="p">,</span> <span class="no">Integer</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
So this is how Chrome will take over our desktops!2010-12-24T00:00:00+00:00http://tweetegy.com/2010/12/so-this-is-how-chrome-will-take-over-our-desktops<p>Have you ever used a themed version of Chrome in full screen mode? If not you should give it a try! It almost looks and feels like a traditional desktop from say Windows Vista or XP (I thought long and hard about which way to include these in the text! #seo).</p>
<p>If Chrome engineers turn the tabs into windows that can be moved around within the parent Chrome window then they will have hijacked our desktop (or at least, the user has willingly let them hijack the desktop by pressing F11). Imagine using a whole host of Rich Internet Applications via Chrome this way!</p>
<p>Here is a screen capture of my Chrome browser as it might appear as a full desktop. You can see my <a title="Focus Booster App" href="http://www.focusboosterapp.com/" target="_self">Focus Booster App </a>is open and always above my desktop. It looks great with the downloaded <a href="https://chrome.google.com/webstore/detail/khjgcmhkaagcoibmhggkeoakeihmohnp">chrome distance theme</a> too!</p>
Install WordPress on Ubuntu 10.04 Slicehost (Part 2)2010-12-20T00:00:00+00:00http://tweetegy.com/2010/12/install-wordpress-on-ubuntu-10-04-slicehost-part-2<p>In <a href="/2010/12/install-wordpress-on-ubuntu-10-04-slicehost/">Part 1</a> we setup a new virtual host instance using Slicehost. The steps can be pretty much the same for any new Ubuntu server. It’s just that in this case we are using 10.04 on Slicehost.</p>
<p>Once you have the slice up and running then you probably want to do an update and then run a simple script to install and configure WordPress. Here is a nice script that will install WordPress and add a couple of plugins as a bonus!</p>
<p>Note there is a second SQL script to setup the db that is required. It is shown after the first script below. You’ll probably want to replace YOUR-USERNAME and YOUR-PASSWORD with your own values! Note also that the name of the MySQL database is <em>wordpress</em> (which you can also change if you like)</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c">#!/bin/bash</span>
<span class="c">#############################################################</span>
<span class="c">## INSTALLS AND CONFIGURES WORDPRESS ON SERVER ##</span>
<span class="c">## ##</span>
<span class="c">#############################################################</span>
<span class="c">#Packages</span>
apt-get <span class="nt">-y</span> <span class="nb">install </span>mysql-server php5 libapache2-mod-php5 php5-xsl php5-gd php-pear libapache2-mod-auth-mysql php5-mysql
<span class="c">#Install WordPress</span>
<span class="k">if</span> <span class="o">[</span> <span class="o">!</span> <span class="nt">-d</span> /var/www/wp-content <span class="o">]</span><span class="p">;</span> <span class="k">then
</span><span class="nb">echo</span> <span class="s2">"#############################"</span>
<span class="nb">echo</span> <span class="s2">"## START INSTALL WORDPRESS ##"</span>
<span class="nb">echo</span> <span class="s2">"#############################"</span>
<span class="nv">SCRIPT_DIR</span><span class="o">=</span><span class="sb">`</span><span class="nb">dirname</span> <span class="s2">"</span><span class="nv">$0</span><span class="s2">"</span><span class="sb">`</span>
<span class="nv">WORDPRESS_PATH</span><span class="o">=</span><span class="s2">"/var/www"</span>
mysql <span class="nt">-u</span> root <span class="nt">--password</span><span class="o">=</span><span class="s2">"YOUR-PASSWORD"</span> &lt<span class="p">;</span> <span class="nv">$SCRIPT_DIR</span>/setupdb.sql
<span class="c">#Set up wordpress directories</span>
<span class="o">[</span> <span class="o">!</span> <span class="nt">-d</span> <span class="nv">$WORDPRESS_PATH</span> <span class="o">]</span> &#038<span class="p">;</span>&#038<span class="p">;</span> <span class="nb">mkdir</span> <span class="nv">$WORDPRESS_PATH</span>
<span class="c">#Download and install wordpress. Here is an alternative: https://help.ubuntu.com/community/WordPress</span>
<span class="nb">mkdir</span> <span class="nv">$SCRIPT_DIR</span>/downloads
wget http://wordpress.org/latest.tar.gz <span class="nt">-O</span> <span class="nv">$SCRIPT_DIR</span>/downloads/latest.tar.gz
<span class="nb">tar</span> <span class="nt">-xzvf</span> <span class="nv">$SCRIPT_DIR</span>/downloads/latest.tar.gz <span class="nt">--directory</span><span class="o">=</span><span class="nv">$SCRIPT_DIR</span>/downloads/
<span class="nb">mv</span> <span class="nv">$SCRIPT_DIR</span>/downloads/wordpress/wp-config-sample.php <span class="nv">$SCRIPT_DIR</span>/downloads/wordpress/wp-config.php
<span class="nb">mv</span> <span class="nv">$SCRIPT_DIR</span>/downloads/wordpress/<span class="k">*</span> <span class="nv">$WORDPRESS_PATH</span>
<span class="c">#Remove the default index.html file</span>
<span class="nb">rm</span> /var/www/index.html
<span class="c">#Add our database settings to wp-config.php</span>
<span class="nb">sed</span> <span class="nt">-i</span> <span class="s1">'s/database_name_here/wordpress/g'</span> <span class="s2">"</span><span class="nv">$WORDPRESS_PATH</span><span class="s2">/wp-config.php"</span>
<span class="nb">sed</span> <span class="nt">-i</span> <span class="s1">'s/username_here/YOUR-USERNAME/g'</span> <span class="s2">"</span><span class="nv">$WORDPRESS_PATH</span><span class="s2">/wp-config.php"</span>
<span class="nb">sed</span> <span class="nt">-i</span> <span class="s1">'s/password_here/YOUR-PASSWORD/g'</span> <span class="s2">"</span><span class="nv">$WORDPRESS_PATH</span><span class="s2">/wp-config.php"</span>
<span class="c">#Install our theme</span>
unzip <span class="nv">$SCRIPT_DIR</span>/theme.zip <span class="nt">-d</span> <span class="nv">$WORDPRESS_PATH</span>/wp-content/themes/
<span class="c">#Install some plugins (G-Lock Opt-in and Google Sitemaps)</span>
wget http://downloads.wordpress.org/plugin/google-sitemap-generator.3.2.3.zip
wget http://downloads.wordpress.org/plugin/g-lock-double-opt-in-manager.zip
unzip google-sitemap-generator.3.2.3.zip <span class="nt">-d</span> /var/www/wp-content/plugins/
unzip g-lock-double-opt-in-manager.zip <span class="nt">-d</span> /var/www/wp-content/plugins/
<span class="c">#Enable mod_rewrite</span>
<span class="nb">cd</span> /etc/apache2/mods-enabled
<span class="nb">ln</span> <span class="nt">-s</span> ../mods-available/rewrite.load rewrite.load
<span class="c">#Clean up</span>
<span class="nb">rm</span> <span class="nt">-rf</span> <span class="nv">$SCRIPT_DIR</span>/downloads
<span class="nb">echo</span> <span class="s2">"###########################"</span>
<span class="nb">echo</span> <span class="s2">"## END INSTALL WORDPRESS ##"</span>
<span class="nb">echo</span> <span class="s2">"###########################"</span>
<span class="k">fi</span></code></pre></figure>
<p>Here is the setupdb.sql script that is used in the above installation script.</p>
<figure class="highlight"><pre><code class="language-sql" data-lang="sql"><span class="k">CREATE</span> <span class="k">DATABASE</span> <span class="n">wordpress</span><span class="p">;</span>
<span class="k">GRANT</span> <span class="k">ALL</span> <span class="k">PRIVILEGES</span> <span class="k">ON</span> <span class="n">wordpress</span><span class="p">.</span><span class="o">*</span> <span class="k">TO</span> <span class="nv">"YOUR-USERNAME"</span><span class="o">@</span><span class="nv">"localhost"</span> <span class="n">IDENTIFIED</span> <span class="k">BY</span> <span class="nv">"YOUR-PASSWORD"</span><span class="p">;</span>
<span class="n">FLUSH</span> <span class="k">PRIVILEGES</span><span class="p">;</span></code></pre></figure>
<p>What about Apache configuration I hear you cry! Let’s put that in Part 3 shall we?!</p>
Clone a VirtualBox VDI using VBoxManage on the command line2010-12-20T00:00:00+00:00http://tweetegy.com/2010/12/clone-a-virtualbox-vdi-using-vboxmanage-on-the-command-line<p>I run into this situation all the time. I want to try out a new software (usually it’s a database of somesort) and I want to try it on a clean server installation. I don’t want to mess up my client or an existing server or have to install the OS fresh each time, so I turn to VirtualBox cloning via the command line.</p>
<p>Let’s spec out what we want the script to do:</p>
<ol>
<li>Clone a clean install VDI that exists in a known location (typically ~/.VirtualBox/HardDisks/)</li>
<li>Create a new virtual machine</li>
<li>Attach the new VDI to that machine</li>
<li>Setup a standard configuration for boot order, bridged networking etc</li>
<li>Fire up the instance</li>
</ol>
<p>Here is the final script. Note it includes a param to set the name of the new machine (not tested with spaces in the name yet). Note also, I have set my network to use wlan0. You might want to use a different network adapter.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c">#!/bin/bash</span>
<span class="nb">declare </span><span class="nv">EXISTING_VDI</span><span class="o">=</span><span class="s2">"Ubuntu_10.04_Clean_Install.vdi"</span>
<span class="nb">declare </span><span class="nv">CLONE_NAME</span><span class="o">=</span><span class="s2">"Ubuntu_10.04_Clean_Install_Clone"</span>
<span class="k">if</span> <span class="o">[</span> <span class="s2">"$#"</span> <span class="nt">-eq</span> 1 <span class="o">]</span> <span class="p">;</span> <span class="k">then
</span><span class="nv">CLONE_NAME</span><span class="o">=</span><span class="s2">"Ubuntu_10.04_"</span><span class="nv">$@</span>
<span class="k">fi
</span><span class="nb">echo</span> <span class="s2">"Cloning from: "</span> <span class="nv">$EXISTING_VDI</span>
<span class="nb">echo</span> <span class="s2">"The new VDI name: "</span> <span class="nv">$CLONE_NAME</span>
VBoxManage clonevdi ~/.VirtualBox/HardDisks/<span class="nv">$EXISTING_VDI</span> ~/.VirtualBox/HardDisks/<span class="nv">$CLONE_NAME</span>.vdi
VBoxManage createvm <span class="nt">-name</span> <span class="nv">$CLONE_NAME</span> <span class="nt">-register</span>
VBoxManage modifyvm <span class="nv">$CLONE_NAME</span> <span class="nt">--hda</span> ~/.VirtualBox/HardDisks/<span class="nv">$CLONE_NAME</span>.vdi
VBoxManage modifyvm <span class="nv">$CLONE_NAME</span> <span class="nt">--nic1</span> bridged
VBoxManage modifyvm <span class="nv">$CLONE_NAME</span> <span class="nt">--bridgeadapter1</span> wlan0
VBoxManage modifyvm <span class="nv">$CLONE_NAME</span> <span class="nt">--boot1</span> disk
VBoxManage startvm <span class="nv">$CLONE_NAME</span></code></pre></figure>
A new JavaScript UI Framework is born: YoolkUI2010-12-15T00:00:00+00:00http://tweetegy.com/2010/12/a-new-javascript-ui-framework-is-born-yoolkui<p>Quickly! Name 5 JavaScript UI Frameworks! OK Good! Now add YoolkUI to that list! Notice, I am not suggesting to put it to the top of the list…..yet.</p>
<p><a href="http://ui.yoolk.com">YoolkUI</a> is a brand new (well, 18 months in the making thus far), JavaScript UI Framework which has been hand crafted from the ground up right here in Cambodia! The original idea was to base the Framework on the popular GTK API so that it would be possible to build RI Applications using <a href="http://glade.gnome.org/">Glade</a>. However, like most things, the project went on its own separate way and has some of its own specific components that you will not find in GTK. The ultimate dream, however, would be to create an application like Glade that could be used to quickly build layouts using YoolkUI.</p>
<p>By the way, YoolkUI is 100% Open Source and completely free to use under <a href="http://ui.yoolk.com/licences/">MIT or GPL license</a>.</p>
<p>Here are a couple of screen captures of an application built using YoolkUI. If you want to see more, check out the <a>YoolkUI website</a>.</p>
Install WordPress on Ubuntu 10.04 Slicehost2010-12-14T00:00:00+00:00http://tweetegy.com/2010/12/install-wordpress-on-ubuntu-10-04-slicehost<p>Here is a quick step by step for setting up a new Slicehost slice and installing WordPress on that slice. In this example we will use a Ubuntu 10.04 (Lucid Lynx) 32-bit 256 MB slice. The first part is a condensed version of <a title="Ubuntu Lucid Setup on Slicehost" href="http://articles.slicehost.com/2010/4/30/ubuntu-lucid-setup-part-1" target="_self">these instructions.</a> The second part introduces a bash script that will install and configure a LAMP stack in order to run WordPress.</p>
<h2 id="part-1-fire-up-and-configure-your-new-slice">Part 1: Fire up and configure your new Slice!</h2>
<p>Goto <a href="http://slicehost.com">slicehost</a>, sign up, and pick your slice by selecting “Ubuntu 10.04 LTS (lucid) 32-bit” from the Linux Distribution drop down menu. Wait for the slice to fire up and then when it is marked <em>active</em> in your control panel you can ssh into the slice using the root username and password.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">ssh root@184.106.xxx.xxx</code></pre></figure>
<p>First change the password of root</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">passwd</code></pre></figure>
<p>Add a new user and group. Follow the instructions on the screen.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">adduser demouser</code></pre></figure>
<p>Open visudo</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">visudo</code></pre></figure>
<p>Add this line to the bottom of the file:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">demouser <span class="nv">ALL</span><span class="o">=(</span>ALL<span class="o">)</span> ALL</code></pre></figure>
<p>On your LOCAL machine generate an ssh key</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">mkdir</span> ~/.ssh
ssh-keygen <span class="nt">-t</span> rsa</code></pre></figure>
<p>Copy this key to your new slicehost slice using scp on your LOCAL machine</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">scp ~/.ssh/id_rsa.pub root@184.106.xxx.xxx:</code></pre></figure>
<p>Back on the SERVER – your new Slicehost slice, run the following commands. This simply moves your local machine public key to the authorized_keys file for demouser.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">mkdir</span> /home/demouser/.ssh
<span class="nb">mv </span>id_rsa.pub /home/demouser/.ssh/authorized_keys
<span class="nb">chown</span> <span class="nt">-R</span> demouser:demouser /home/demouser/.ssh
<span class="nb">chmod </span>700 /home/demouser/.ssh
<span class="nb">chmod </span>600 /home/demouser/.ssh/authorized_keys</code></pre></figure>
<p>Make ssh more secure by editing <code class="language-plaintext highlighter-rouge">/etc/ssh/sshd_config</code> and changing the following three properties:</p>
<ul>
<li>Port 30000 <-– change to a port of your choosing</li>
<li>PermitRootLogin no</li>
<li>PasswordAuthentication no</li>
</ul>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">nano /etc/ssh/sshd_config</code></pre></figure>
<p>Load custom rules into your server iptables. The easiest thing to do is copy paste the <a href="http://articles.slicehost.com/assets/2007/9/4/iptables.txt">Slicehost iptables rules</a> to a new file <code class="language-plaintext highlighter-rouge">/etc/iptables.up.rules</code> and then load these rules. Remember to open the port that you selected in the previous step for ssh.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">nano /etc/iptables.up.rules</code></pre></figure>
<p>Now run the following to update rules from the new file</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">/sbin/iptables-restore &lt<span class="p">;</span> /etc/iptables.up.rules</code></pre></figure>
<p>You want to ensure that these rules are loaded on every instance boot. So create a new file <code class="language-plaintext highlighter-rouge">/etc/network/if-pre-up.d/iptables</code> and add the following script into this file:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c">#!/bin/sh</span>
/sbin/iptables-restore &lt<span class="p">;</span> /etc/iptables.up.rules</code></pre></figure>
<p>Run this to make the file executable</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">chmod</span> +x /etc/network/if-pre-up.d/iptables</code></pre></figure>
<p>Reload SSHD</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">/etc/init.d/ssh reload</code></pre></figure>
<p>Now you can try logging in as the new user (demouser in this exampe) from your LOCAL machine</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">ssh <span class="nt">-p</span> 30000 demouser@184.106.xxx.xxx</code></pre></figure>
<p>If all goes well, you can log out of root at this point and continue to use demouser going forward. If you do get locked out, Slicehost have a browser based console, which you can use to attempt to fix any issues with SSH.</p>
<p>In Part 2 we will prepare a bash script for installing WordPress.</p>
command to ftp in linux bash script2010-11-27T00:00:00+00:00http://tweetegy.com/2010/11/command-to-ftp-in-linux-bash-script<p>Command line ftp scripts are often unappreciated. Often, when a requirement to ftp files arises it makes sense to write a ftp command file which automates this. The question is what is the best approach? Out of the box, most Linux and Unix ftp commands are limited. In particular, recursive folder creation on the ftp server is not possible with the basic linux / unix ftp tool. It lacks a command in ftp that offers this recursive functionality. So what is the solution if you require a bash script ftp for upload of files and folders?</p>
<p>I recommend you download ,install and use <a href="http://www.ncftp.com">ncftp</a>. This is a far superior option compared with the basic set of ftp commands that comes with the installed ftp program with linux.</p>
<p>It would not be fair to leave without providing an example so here is one! Imagine that you have a set of nested folders, some which are empty and some which contain files. You want to ftp the entire folder structure (including the files, of course!) to a remote ftp server. Here is a ftp bash script to do just that (replace with your settings where appropriate).</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="no">FTP_HOST</span><span class="o">=</span><span class="n">ftp</span><span class="p">.</span><span class="nf">yoursite</span><span class="p">.</span><span class="nf">com</span>
<span class="no">FTP_LOGIN</span><span class="o">=</span><span class="n">yourusername</span>
<span class="no">FTP_PASSWORD</span><span class="o">=</span><span class="n">yourpassword</span>
<span class="n">ncftp</span> <span class="o"><<</span> <span class="no">EOF</span>
<span class="nb">open</span> <span class="o">-</span><span class="n">u</span> <span class="vg">$FTP_LOGIN</span> <span class="o">-</span><span class="nb">p</span> <span class="vg">$FTP_PASSWORD</span> <span class="vg">$FTP_HOST</span>
<span class="n">cd</span> <span class="n">somefolder</span><span class="o">/</span><span class="n">onyourserver</span>
<span class="n">lcd</span> <span class="s2">"somefolder/onyourclient"</span>
<span class="n">put</span> <span class="o">-</span><span class="no">R</span> <span class="o">*</span>
<span class="n">bye</span>
<span class="no">EOF</span></code></pre></figure>
<p>Save the above script in a file named <strong>ftp-example.sh</strong> and execute it in your terminal as you would any shell script. The key command in this example which creates all the folders recursively is <em>*put -R **</em>. The rest of the example is pretty straight forward.</p>
Time to please Facebook not Google2010-09-15T00:00:00+00:00http://tweetegy.com/2010/09/time-to-please-facebook-not-google<p>I recently read a Wired article about how the <a href="http://www.wired.com/magazine/2010/08/ff_webrip/all/1" title="Web Is Dead">Web is Dead</a> and it got me thinking more about the role businesses play when marketing on the web. For a very long time now the Web has been the place to be if you want your business reach out to more customers. Search Engine Marketing has played a very important role in this as well as advertising via Google AdWords. But times, are changing fast!</p>
<p>Over the past year or so there have been rumors spreading that the days of pleasing Google are over. By this I mean traditional SEO and SEM (AdWords). What businesses now need to do is please the likes of Facebook but they need to do more than just create a profile page for their business. Since Facebook is a walled garden, safely protecting its users from the harsh world of the rest of the web, businesses who do not join the Facebook party will be left cold on the other side of this fence.</p>
<p>The answer lies in making applications for Facebook. If you can make something yourself or outsource the development of an app, then you stand a better chance of being found in Facebook. The app needs to be engaging, easy to use, provide some value to the user and, of course, be free! What you need to do with your app is to generate a ROI you need to convert the users of the app into customers!</p>
<p>Here is an example of what I mean. The <a title="Yellow Pages CA Facebook App" href="http://gadgets.yellowpages.ca/facebook-application.html" target="_self">Canada Yellow Pages App </a>is great example of engaging the user in the app and bringing value to their customers and thereby, no doubt, increasing their bottom line.</p>
<p>I plan to make some business apps that will distribute content on various social networks and will keep the progress of this project updated here on Tweetegy.</p>
Let the social networking diaspora begin!2010-09-15T00:00:00+00:00http://tweetegy.com/2010/09/let-the-social-networking-diaspora-begin<p>So today is the day that <a title="diaspora" href="http://www.joindiaspora.com/" target="_self">Diaspora</a> begins! I am looking forward to pulling it apart and seeing what these guys have done! I am sure that they are pretty nervous today about this release since all the hype and money surrounding this project means they must be feeling just a little weight on their shoulders right now!</p>
<p>Regardless of how it is written, if it works well, I plan to use this in Cambodia to develop a free social networking site. I probably will seek donor funding to do this as it is more of a community and research project than a business project. The great thing about using Diaspora is being able to host your own node, which means bringing huge benefits to countries like Cambodia where Internet speeds are not always so reliable.</p>
<p>Instead of building your profile data silo on servers based in USA we can provide the servers locally in Cambodia. It’s amazing how people will migrate from one site to another when the speed is just that little bit faster and the responsiveness is that little bit snappier. I wonder if there will be support for multiple language interfaces in Diaspora too? I’ll just have to wait a few more hours to find out!</p>
Using Google Analytics API in a Ruby on Rails project2010-06-27T00:00:00+00:00http://tweetegy.com/2010/06/using-google-analytics-api-in-a-ruby-on-rails-project<h3 id="ingredients">Ingredients</h3>
<ul>
<li>A new Rails project</li>
<li><a href="http://github.com/vigetlabs/garb/">The Garb gem</a></li>
<li>A Google Analytics Account </ul></li>
</ul>
<h3 id="preparation">Preparation</h3>
<p>I assume you know about Rails already. Garb can be installed as follows:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">gem <span class="nb">install </span>garb</code></pre></figure>
<p>Go to your Google Analytics account and fetch the <strong>Account Id</strong> and <strong>Profile Id</strong> that your interested in. You will find your Account Id on your account home page under the link Edit account settings, it is the number after the UA-. You will find your Profile Id, by going back to your account home page, finding the profile in the table, then click the Edit link in that row.the Profile Id is at the top of this page.phew!</p>
<p>If you are not familiar with the Google Analytics API, then you will find the <a href="http://code.google.com/apis/analytics/docs/gdata/gdataExplorer.html">Data Feed Query Explorer</a> tool useful.</p>
<h3 id="the-task-record-and-display-unique-pageviews-from-a-set-list-of-pages">The Task: Record and display Unique Pageviews from a set list of pages</h3>
<p>Now for the fun part! Lets build something that records Unique Page Views from a list of pages in a local database. We need to create a model to store these pages and the unique pageviews. Change into your rails project directory and run the following scaffold script:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">script/generate scaffold page url:string unique_pageviews:integer</code></pre></figure>
<p>Open up the pages controller that was just generated and add the following method, which sets the class instance variable @profile to an instance of your Google Analytics profile based on the Account Id and Profile Id.</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">get_analytics_profile</span>
<span class="no">Garb</span><span class="o">::</span><span class="no">Session</span><span class="p">.</span><span class="nf">login</span><span class="p">(</span><span class="n">your_google_analytics_username</span><span class="p">,</span><span class="n">your_google_analytics_password</span><span class="p">)</span>
<span class="n">accounts</span> <span class="o">=</span> <span class="no">Garb</span><span class="o">::</span><span class="no">Account</span><span class="p">.</span><span class="nf">all</span>
<span class="c1">#Loop all Accounts for account_id</span>
<span class="n">accounts</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">account</span><span class="o">|</span>
<span class="k">if</span> <span class="n">account</span><span class="p">.</span><span class="nf">id</span> <span class="o">==</span> <span class="n">your_google_analytics_account_id</span>
<span class="c1">#Loop all Profiles for profile_id</span>
<span class="n">account</span><span class="p">.</span><span class="nf">profiles</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">profile</span><span class="o">|</span>
<span class="k">if</span> <span class="n">profile</span><span class="p">.</span><span class="nf">id</span> <span class="o">==</span> <span class="n">your_google_analytics_profile_id</span>
<span class="vi">@profile</span> <span class="o">=</span> <span class="n">profile</span>
<span class="k">break</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Basically, Garb::Session.login is called passing your username and password to authenticate the session. Next we fetch all accounts and iterate the array until we find the account that matches your Account Id. Then we need to iterate all the profiles within that account until we find the profile that matches your Profile Id.</p>
<p>Now add this method which will update all the unique pageviews in your list of pages:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">update_all</span>
<span class="vi">@pages</span> <span class="o">=</span> <span class="no">Page</span><span class="p">.</span><span class="nf">all</span>
<span class="vi">@pages</span><span class="p">.</span><span class="nf">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">page</span><span class="o">|</span>
<span class="n">get_analytics_profile</span> <span class="k">if</span> <span class="o">!</span><span class="vi">@profile</span>
<span class="n">report</span> <span class="o">=</span> <span class="no">Garb</span><span class="o">::</span><span class="no">Report</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="vi">@profile</span><span class="p">)</span>
<span class="n">report</span><span class="p">.</span><span class="nf">metrics</span> <span class="ss">:unique_pageviews</span>
<span class="n">report</span><span class="p">.</span><span class="nf">dimensions</span> <span class="ss">:page_path</span>
<span class="n">report</span><span class="p">.</span><span class="nf">filters</span> <span class="ss">:page_path</span><span class="p">.</span><span class="nf">contains</span> <span class="o">=></span> <span class="n">page</span><span class="p">.</span><span class="nf">url</span>
<span class="n">page</span><span class="p">.</span><span class="nf">unique_pageviews</span> <span class="o">=</span> <span class="n">report</span><span class="p">.</span><span class="nf">results</span><span class="p">.</span><span class="nf">first</span><span class="p">.</span><span class="nf">unique_pageviews</span>
<span class="n">page</span><span class="p">.</span><span class="nf">save</span>
<span class="k">end</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>Since you have used a scaffold to create this controller, there should already be an index method present. Add a call to the <em>update_all</em> method at the top of the index method so that everytime the index method is called the <em>update_all</em> method is called. Here is how your index method should look:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre><span class="k">def</span> <span class="nf">index</span>
<span class="n">update_all</span>
<span class="vi">@pages</span> <span class="o">=</span> <span class="no">Page</span><span class="p">.</span><span class="nf">all</span>
<span class="n">respond_to</span> <span class="k">do</span> <span class="o">|</span><span class="nb">format</span><span class="o">|</span>
<span class="nb">format</span><span class="p">.</span><span class="nf">html</span> <span class="c1"># index.html.erb</span>
<span class="nb">format</span><span class="p">.</span><span class="nf">xml</span> <span class="p">{</span> <span class="n">render</span> <span class="p">:</span> <span class="n">xml</span> <span class="o">=></span> <span class="vi">@pages</span> <span class="p">}</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<h3 id="final-touches">Final Touches</h3>
<p>Now all that remains is a little configuration, add some fixtures and we’re done! You should already have fixtures for your page model. Note that the url does not need to include the domain name, so <strong>/pricing/</strong> or <strong>/sign-up/</strong> are the sorts of values you should put here (obviously ones that exist in your Analytics profile!). The configuration is simply to add:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
</pre></td><td class="code"><pre><span class="n">config</span><span class="p">.</span><span class="nf">gem</span> <span class="s2">"garb"</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>in the appropriate place of your environment.rb file.</p>
<h3 id="get-those-metrics">Get those metrics!</h3>
<p>Now fire up your rails app and navigate to the index for your pages http://localhost:3000/pages/. The call to <strong>update_all</strong> will be made which will update your local database with the metrics and then render the data in the browser in the usual Rails table format.</p>
<h3 id="conclusion">Conclusion</h3>
<p>Using the <a href="http://github.com/vigetlabs/garb/">Garb gem</a> makes it extremely easy to work with the Google Analytics API in a Rails project. Obviously this example application can be improved to include caching, error handling (it will bomb out if the Id’s or urls are not found in your Analytics account) as well as other improvements that you might want to make.</p>
Hudson setup to execute scripts with root privileges (safely)2010-05-14T00:00:00+00:00http://tweetegy.com/2010/05/hudson-setup-to-execute-scripts-with-root-privileges-safely<p>There is a lot out there on the web about how to setup and install <a href="http://hudson-ci.org/">Hudson</a>. In fact that process is very easy so I will just provide a script to explain that (see the end of this post). What I found to be an interesting challenge is getting Hudson to execute my scripts with root privileges…</p>
<p>The first time I execute the script (without sudo), my job fails and I am informed that the user hudson does not have permission to execute apt-get. So naturally, I prefix the script with sudo and my job fails again, this time with an incorrect password. So how to get Hudson to execute my script with root privileges?. After a lot of searching I managed to <a title="Blog Flex" href="http://fbflex.wordpress.com/2008/05/02/howto-setting-up-a-continous-integration-server-for-grails-with-hudson-on-vmware/" target="_self">find one blog post</a> which mentions adding the user (in my case user hudson) to the sudoers file and giving the user full access without being promted for a password. Using visudo, I added this line to my sudoers file:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">hudson <span class="nv">ALL</span><span class="o">=(</span>ALL<span class="o">)</span> NOPASSWD:ALL</code></pre></figure>
<p>However, I was most concerned about giving hudson the rights to do what it wanted without requiring a password as this leaves an obvious security hole. So I <a title="Serverfault Question Husdon Root" href="http://serverfault.com/questions/141439/execute-build-task-in-hudson-with-root-privilages" target="_self">posted my concern on ServerFault.com</a> and fortunately I was informed that it is possible to lock down the commands and the parameters that can be used by a user without requiring a password. So I changed my entry in sudoers file to this:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">hudson <span class="nv">ALL</span><span class="o">=(</span>ALL<span class="o">)</span> NOPASSWD:/var/scripts/the-script-I-want-to-run.bash</code></pre></figure>
<p>Now all hudson can do (without being prompted for a password) is to execute sudo /var/scripts/the-script-I-want-to-run.bash. This makes be feel safe and my build works a treat each and every time too! I thought I would share this since I could not find a clear solution to this issue.</p>
<p>By the way, if you want to install hudson on your linux server, here is the script I prepared earlier!</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c">#Install Hudson
</span>
<span class="c">#NOTE: You MUST manually add hudson user to the sudoers account using visudo,
</span>
<span class="c">#specifying all the scripts that you want hudson to be able to run without requiring a root password, for example:
</span>
<span class="c">#hudson ALL=(ALL) NOPASSWD:/var/scripts/the-script-I-want-to-run.bash
</span>
wget <span class="nt">-O</span> - http:// hudson-ci.org/debian/hudson-ci.org.key | <span class="nb">sudo </span>apt-key add -
<span class="k">if</span> <span class="o">!</span> <span class="nb">grep</span> <span class="nt">-q</span> <span class="s2">"http:// hudson-ci.org/debian binary/"</span> /etc/apt/sources.list <span class="p">;</span> <span class="k">then
</span><span class="nb">echo</span> <span class="s2">"deb http:// hudson-ci.org/debian binary/"</span> <span class="o">>></span> /etc/apt/sources.list
<span class="k">fi</span>
<span class="c">#NOTE: On a fresh install, you will have to run this script twice since the first time the script will not know about sources.list update
</span>
apt-get <span class="nb">install </span>hudson
<span class="c">#Install Hudson Plugins
</span>
<span class="k">if </span><span class="nb">test</span> <span class="o">!</span> <span class="nt">-f</span> /var/lib/hudson/plugins/mercurial.hpi <span class="p">;</span> <span class="k">then
</span>wget <span class="nt">-P</span> /var/lib/hudson/plugins http:// hudson-ci.org/download/plugins/mercurial/1.28/mercurial.hpi
<span class="nb">chown </span>hudson:nogroup /var/lib/hudson/plugins/mercurial.hpi
<span class="k">fi</span></code></pre></figure>
<p>Additionally, if you want Hudson to be accessible at http://hudson.yourserver.com while keeping Hudson running on port 8080 and you are running Apache then run the following script!</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">SITE_CONFIG_PATH</span><span class="o">=</span><span class="s2">"/etc/apache2/sites-available/default"</span>
<span class="k">if</span> <span class="o">!</span> <span class="nb">grep</span> <span class="nt">-q</span> <span class="s2">"ServerName hudson.yourserver.com"</span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="k">then
</span><span class="nb">echo</span> <span class="s2">"Configuring..."</span>
<span class="nb">echo</span> <span class="s2">""</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">"# Hudson virtual host"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">"&lt;VirtualHost *:80>"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" ServerName hudson.yourserver.com"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" ProxyPass / http:// localhost:8080/"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" ProxyPassReverse / http:// localhost:8080/"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" ProxyPreserveHost on"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" &lt;Proxy *>"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" allow from all"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" &lt;/Proxy>"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">"&lt;/VirtualHost>"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="c">#Create symlink to proxy module
</span>
<span class="nb">ln</span> <span class="nt">-s</span> ../mods-available/proxy.load /etc/apache2/mods-enabled/proxy.load
<span class="nb">ln</span> <span class="nt">-s</span> ../mods-available/proxy.conf /etc/apache2/mods-enabled/proxy.conf
<span class="nb">ln</span> <span class="nt">-s</span> ../mods-available/proxy_http.load /etc/apache2/mods-enabled/proxy_http.load
<span class="nb">echo</span> <span class="s2">"Restarting apache"</span>
<span class="c">#Restart Apache
</span>
/etc/init.d/apache2 restart
<span class="k">else
</span><span class="nb">echo</span> <span class="s2">"Already configured!"</span>
<span class="k">fi</span></code></pre></figure>
How to subdomain redirect using Apache Virtual Host2010-04-14T00:00:00+00:00http://tweetegy.com/2010/04/how-to-subdomain-redirect-using-apache-virtual-host<p>Do you want to setup a website subdomain so that, for example, http://foo.example.com will actually, without the end user realizing, return content from http://example.com/foo ? In this short, but useful blog post, I will show you how you can redirect a subdomain to a server directory without anyone (except you) knowing!</p>
<p>Assuming that you already have your subdomain DNS settings correctly configured and the subdomain now points to the IP address of your server, you should do the following in Apache running on an Ubuntu server.</p>
<p>Open the configuration file for your site. In this example, we will use the default site.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">nano /etc/apache2/sites-available/default</code></pre></figure>
<p>Add the following additional VirtualHost configuration to the end of the file.</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><VirtualHost</span> <span class="err">*:80</span><span class="nt">></span>
ServerName foo.example.com
DocumentRoot /var/www/foo
<span class="nt"></VirtualHost></span></code></pre></figure>
<p>Now restart apache and your all done!</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">/etc/init.d/apache2 restart</code></pre></figure>
<p>If you point your browser to http://foo.example.com you will see the content from http://example.com/foo ! Note: You do, of course, have to create the folder /var/www/foo and put a index.html file there with some content like “Here be foo!” so you can test it actually works!</p>
<p><strong>Extra Bonus Script Time!</strong>
As an added bonus, I have included a setup script that you can use to perform the above in one shot. Use it if you wish. Change foo and example.com to your domain and subdomain names.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c">#!/bin/bash</span>
<span class="nv">SITE_CONFIG_PATH</span><span class="o">=</span><span class="s2">"/etc/apache2/sites-available/default"</span>
<span class="nb">echo</span> <span class="s2">"Configure default site with foo virtual host"</span>
<span class="k">if</span> <span class="o">!</span> <span class="nb">grep</span> <span class="nt">-q</span> <span class="s2">"ServerName foo.example.com"</span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="k">then
</span><span class="nb">echo</span> <span class="s2">"Configuring..."</span>
<span class="nb">echo</span> <span class="s2">""</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">"# foo virtual host"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">"<VirtualHost *:80>"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" ServerName foo.example.com"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">" DocumentRoot /var/www/foo"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">"</VirtualHost>"</span> <span class="o">>></span> <span class="nv">$SITE_CONFIG_PATH</span>
<span class="nb">echo</span> <span class="s2">"Restart apache"</span>
/etc/init.d/apache2 restart
<span class="k">else
</span><span class="nb">echo</span> <span class="s2">"Already configured!"</span>
<span class="k">fi</span></code></pre></figure>
Step by step guide to setting up a client server workstation on Ubuntu and VirtualBox2010-03-19T00:00:00+00:00http://tweetegy.com/2010/03/step-by-step-guide-to-setting-up-a-client-server-workstation-on-ubuntu-and-virtualbox<p>I work on a number of different software projects. During the week I work on project called <a title="Yoolk" href="http://www.yoolk.com" target="_blank">Yoolk</a> and during the evenings and weekends I might work on <a title="adflickr global ad archive database" href="http://www.adflickr.com" target="_blank">AdFlickr</a> or some other new project! Either of these main projects might also have sub-projects. The cleanest way to separate all of these projects is to develop the software using a guest OS running in VirtualBox. It makes sense, of course, that the guest OS matches your production environment as much as possible. Some of the benefits of doing this are:</p>
<ul>
<li>Complete separation of all your project dependencies. Change a setting on the guest development server for one project has absolutely no affect on your other projects.</li>
<li>Allows much more freedom to experiment with different dependencies, try out new software and generally just screw around without worrying about having to clean up your mess after (just take snapshots or re-install your guest OS!).</li>
<li>During development your are running your application in an environment which (at OS level at least) should be exactly the same as production. Therefore, this minimizes surprises during deployment.</li>
<li>Allows you to keep your client OS the way you want it so that your development experience is just the way you like it. For example, installing different text editors, music libraries, video libraries, browsers etc etc without worrying that it will affect the application your building.</li>
</ul>
<p>While the benefits are great, there is a little work to be done to set this up initially (but it’s not too much). The longest step is installing the guest OS on VirtualBox. Obviously this depends on which guest OS you install. I use Ubuntu 9.04 Server Edition. By the way, my host OS is currently Ubuntu 9.10 but I know that this also works on Ubuntu 9.04 (since I used to run that before).</p>
<p>Below is a step by step guide to setting this up. Notice that you will be alternating between the client (your desktop OS) and the server (the guest OS in VirtualBox):</p>
<ol>
<li><strong>client</strong>: install server on virtualbox (make the default user the same name as client user name)</li>
<li><strong>client</strong>: configure virtualbox to use bridged networking and start server</li>
<li><strong>server</strong>: sudo apt-get update</li>
<li><strong>server</strong>: sudo apt-get install openssh-server</li>
<li><strong>server</strong>: ifconfig (and note the ip address)</li>
<li><strong>client</strong>: ssh into the server using the IP address you recorded in the previous step</li>
<li><strong>server</strong>: mkdir .ssh</li>
<li><strong>client</strong>: ssh-keygen (don’t enter any values, press return three times, yes passwords should be blank)</li>
<li><strong>client</strong>: cat ~/.ssh/id_rsa.pub – copy the output to the clipboard (very carefully, no pre/trailing white space)</li>
<li><strong>server</strong>: touch .ssh/authorized_keys</li>
<li><strong>server</strong>: sudo nano .ssh/authorized_keys – paste clipboard contents</li>
<li><strong>client</strong>: sudo nano /etc/hosts – add line: 192.168.???.??? myappname.dev www.myappname.dev (get ip from ifconfig)</li>
<li><strong>client</strong>: sudo /etc/init.d/networking restart (refresh new data in /etc/hosts)</li>
<li><strong>client</strong>: In nautilus go to ssh://myappname.dev then add the location to bookmarks</li>
<li><strong>client</strong>: In your web browser, go to http://myappname.dev and add the location to bookmarks (you will not get a response unless you have a web server running your application on your guest OS, of course!).</li>
</ol>
<p>After you have completed the above steps when logging in via ssh you shouldn’t be prompted for a password! Note, if IP address of the server changes, you should edit /etc/hosts to reflect that change.</p>
How to return content from an application running on a specific port in apache2010-03-14T00:00:00+00:00http://tweetegy.com/2010/03/how-to-return-content-from-an-application-running-on-a-specific-port-in-apache<p>Continuing on from the <a href="http://www.tweetegy.com/2010/04/14/how-to-subdomain-redirect-using-apache-virtual-host/">previous post</a> where I explain how to show content from a different root folder depending on the sub domain e.g. http://foo.example.com will actually return content from http://example.com/foo (without changing the URL). Today I will extend this idea to show content from a separate service running on a different port within the same server. So in this case a call to http://foo.example.com returns http://example.com:port.</p>
<p>As in the previous post, we assume that you already have your sub domain DNS settings correctly configured and the subdomain now points to the IP address of your server, you should do the following in Apache running on an Ubuntu server.</p>
<p>Open the configuration file for your site. In this example, we will use the default site.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">nano /etc/apache2/sites-available/default</code></pre></figure>
<p>Add the following additional VirtualHost configuration to the end of the file (change the port number on localhost if you need to, of course!)</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><VirtualHost</span> <span class="err">*:80</span><span class="nt">></span>
ServerName foo.example.com
ProxyPass / http:// localhost:3000/
ProxyPassReverse / http:// localhost:3000/
ProxyPreserveHost on
<span class="nt"><Proxy</span> <span class="err">*</span><span class="nt">></span>
allow from all
<span class="nt"></Proxy></span>
<span class="nt"></VirtualHost></span></code></pre></figure>
<p>Now restart apache and your all done!</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">/etc/init.d/apache2 restart</code></pre></figure>
Create a WCF Rest Application using .NET 3.52010-01-29T00:00:00+00:00http://tweetegy.com/2010/01/create-a-wcf-rest-application-using-net-3-5<p>In this post, I will explain how to create a simple read only Rest service using WCF .NET 3.5 WebGet endpoints. I will also explain a little bit about the wonderful UriTemplate class.</p>
<p><strong>First create a new WCF Service Application</strong></p>
<p>Create a new WCF Service Application project. This will provide you with the standard example files for WCF that contain the <em>string GetData(int value)</em> and <em>CompositeType GetDataUsingDataContract(CompositeType composite)</em> signatures.</p>
<p>Now this application is not yet Rest enabled. You need to do a few more things. No doubt, of course you can turn this into your own Visual Studio project template later on if you need to.</p>
<p><strong>Rest enable the WCF Application</strong></p>
<p>Go ahead and add a reference to <em>System.ServiceModel.Web dll.</em> Now add the <em>WebGetAttribute</em> on the method you want to expose. Let’s just use the supplied <em>GetData</em> method to keep things simple. However, notice that I have to change the data type of the input parameter to string since this is what the <em>UriTemplate</em> expects. This method signature in the <em>IService1</em> Interface should look something like this:</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="p">[</span><span class="n">OperationContract</span><span class="p">]</span>
<span class="p">[</span><span class="nf">WebGet</span><span class="p">(</span> <span class="n">UriTemplate</span> <span class="p">=</span> <span class="s">"somepath/{value}"</span><span class="p">)]</span>
<span class="kt">string</span> <span class="nf">GetData</span><span class="p">(</span><span class="kt">string</span> <span class="k">value</span><span class="p">);</span></code></pre></figure>
<p>Then, in the web.config file that we create, we must also include the following entry (put this within the behaviors tag):</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><endpointBehaviors></span>
<span class="nt"><behavior</span> <span class="na">name=</span><span class="s">"WebBehavior"</span><span class="nt">></span>
<span class="nt"><webHttp</span> <span class="nt">/></span>
<span class="nt"></behavior></span>
<span class="nt"></endpointBehaviors></span></code></pre></figure>
<p>Now look within the services tag for the endpoint tag that describes the service you are building. You need to change the binding to <code class="language-plaintext highlighter-rouge">webHttpBinding</code> and add the attribute <code class="language-plaintext highlighter-rouge">behaviorConfiguration=WebBehavior</code> to this tag. The endpoint tag for your service should now look something like this:</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><endpoint</span> <span class="na">address=</span><span class="s">""</span> <span class="na">binding=</span><span class="s">"webHttpBinding"</span>
<span class="na">contract=</span><span class="s">"WcfService1.IService1"</span>
<span class="na">behaviorConfiguration=</span><span class="s">"WebBehavior"</span> <span class="nt">/></span></code></pre></figure>
<p>At this point you are ready to run the service, so hit F5. Your browser window should open to the service description page. Please then change the path following the localhost root to: ./Service1.svc/somepath/sqlserverdotnet and you should then see an XML response from the service as follows:</p>
<figure class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt"><string></span>You entered: tweetegy<span class="nt"></string></span></code></pre></figure>
<p>Now you are free to modify this service method as you want. Perhaps to connect to a database and return a collection as serialized XML for example. Obviously you can remove the .svc extension from the url by using a HttpModule. There are many examples of url re-writing on the web which demonstrate exactly how to do this.</p>
The easy way to create a new Ruby Gem!2010-01-11T00:00:00+00:00http://tweetegy.com/2010/01/the-easy-way-to-create-a-new-ruby-gem<p>If you want to make a Ruby Gem and want to do it in a very easy way then here’s is one very good option – use <a title="Jeweler Gem" href="http://github.com/technicalpickles/jeweler" target="_self">Jeweler</a>! Thanks to <a title="RailsTips" href="http://railstips.org/" target="_self">John Nunemaker at RailsTips</a> for pointing me in the right direction with his post <a title="Building API Wrapping Gems" href="http://railstips.org/blog/archives/2009/03/25/building-api-wrapping-gems-could-not-get-much-easier/" target="_self">Building API Wrapping Gems</a></p>
<ol>
<li><strong>Install git core</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">apt-get <span class="nb">install </span>git-core</code></pre></figure>
<ol>
<li><strong>Install jeweler gem</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">gem <span class="nb">install </span>jeweler</code></pre></figure>
<ol>
<li><strong>Now add the following line to your bashrc file to ensure that you always use spec (that if you <em>do</em> use spec). Otherwise the default is shoulda and if your happy using that then you can skip this part.</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">export </span>JEWLER_OPTS <span class="o">=</span> <span class="s2">"--spec"</span></code></pre></figure>
<ol>
<li><strong>Setup your global username and email for git</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">git config <span class="nt">--global</span> user.name <span class="s2">"Your Company Name"</span>
git config <span class="nt">--global</span> user.email <span class="s2">"yourname@yourcompanyname.com"</span></code></pre></figure>
<ol>
<li><strong>Script your new gem using jeweler</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">jeweler your_shiny_new_gem</code></pre></figure>
<ol>
<li><strong>Set your init version</strong>. <strong>I do this so that I can easily generate the gemspec later.</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rake version:write <span class="nv">MAJOR</span><span class="o">=</span>0 <span class="nv">MINOR</span><span class="o">=</span>1 <span class="nv">PATCH</span><span class="o">=</span>0</code></pre></figure>
<ol>
<li><strong>Modify the new gem rake file to add the meta info for your project</strong>
[source lang=”ruby”]
begin
require ‘jeweler’
Jeweler::Tasks.new do |gem|
gem.name = “your_shiny_new_gem”
gem.summary = %Q{A simple gem to access the Shiny API}
gem.description = %Q{Use this gem to access our Shiny API !!}
gem.email = “yourname@yourcompanyname.com”
gem.homepage = “http://bitbucket.org/yourrepo/your_shiny_new_gem”
gem.authors = [“Your Company Name”]
gem.add_development_dependency “rspec”, “>= 1.2.9″
# gem is a Gem::Specification… see http://www.rubygems.org/read/chapter/20 for additional settings
end
Jeweler::GemcutterTasks.new
rescue LoadError
puts “Jeweler (or a dependency) not available. Install it with: gem install jeweler”
end</li>
<li><strong>Generate the gemspec</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rake gemspec</code></pre></figure>
<ol>
<li><strong>Write the code that goes into your gem. This is where your own imagination comes in! See the <a title="Google Weather API Gem" href="http://github.com/jnunemaker/google-weather" target="_self">Google Weather API Gem</a> for an example. When your gem is finished (including all your tests passing!) move on to building and testing the installation of the Gem. **</strong> **</li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">code.write!</code></pre></figure>
<ol>
<li><strong>Build the gem</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rake build</code></pre></figure>
<ol>
<li><strong>Install the gem</strong></li>
</ol>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rake <span class="nb">install</span></code></pre></figure>
<p>You can deploy to github (the easiest solution when using Jeweler). However, you can still deploy to other repositories like Bitbucket for example. Then, as recommended by the author of Jeweler, <a title="Josh Nichols" href="http://technicalpickles.com/about/" target="_self">Josh Nichols</a>, have a delicious beverage!</p>
<p>Happy Gem stone cutting!</p>
Remote desktop using a single tsclient terminal command2009-12-30T00:00:00+00:00http://tweetegy.com/2009/12/remote-desktop-using-a-single-tsclient-terminal-command<p>If you use Ubuntu and have to work on remote computers that require using a GUI (like Windows machines for example), then you will find this following tip very useful! Firstly let me explain what you will have; after just a few minutes of minor configuration, you will be able to remote desktop into a Windows (or other) machine with just one swift command in the terminal! Say for example, you have a remote machine called “jungle” then wouldn’t it be nice if you could remote to it using the following single command?</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">remotejungle</code></pre></figure>
<p>I Thought so! OK, so here’s how! Firstly create a folder called .tsclient under your home directory (note the period before the name of the folder so that it is kept hidden by default).</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">cd
mkdir</span> .tsclient</code></pre></figure>
<p>Create a file (if not already) called .bash_aliases and save it under your home directory:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">cd
touch</span> .bash_aiases</code></pre></figure>
<p>Now edit that file and add the alias for remoting into your remote machine, like so:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">alias </span><span class="nv">remotejungle</span><span class="o">=</span><span class="s1">'tsclient -x ~/.tsclient/remotejungle.rdp'</span></code></pre></figure>
<p>Note that this sets up the alias “remotejungle” so that it executes the command <strong>“tsclient -x ~/.tsclient/remotejungle.rdp”</strong>. As you can see it expects to find a file <strong>remotejungle.rdp</strong> in the .tsclients folder. In order to create this file you need to use the “Terminal Server Client” GUI application to setup your desired session settings for display screen size, color depth, remote sound, keyboard and so on and then click the “Save As” button and save the file as remotejungle.rdp to ~/.tsclient/.</p>
<p>The final step is to modify the .bashrc file so that it picks up the alias list. Open up the .bashrc file in an editor and uncomment the following lines:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="k">if</span> <span class="o">[</span> <span class="nt">-f</span> ~/.bash_aliases <span class="o">]</span><span class="p">;</span> <span class="k">then</span>
<span class="nb">.</span> ~/.bash_aliases
<span class="k">fi</span></code></pre></figure>
<p>You’ll probably have to reload the .bashrc file again by opening a new terminal or executing the following command should also reload the .bashrc file:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">source</span> .bashrc</code></pre></figure>
<p>Now your good to go! Just try to remote into your computer using the alias that you setup during this tutorial and you will never be happier to remote into Windows from Ubuntu!</p>
<p><img src="/assets/terminal-server-client-jungle.png" alt="Ubuntu - Terminal Server Client" /></p>
Compare Amazon S3 to EBS data read performance2009-12-30T00:00:00+00:00http://tweetegy.com/2009/12/compare-amazon-s3-to-ebs-data-read-performance<p>If you are going to store data in the cloud that requires frequent reading (such as a database file) then you should consider using EBS. Just to reinforce that statement, lets compare the read performance between S3 and EBS.</p>
<p>I used the following straightforward Ruby program to perform the test. To try this yourself, just fill in the access keys and configure the local folder, bucket and files with your own setup:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'benchmark'</span>
<span class="nb">require</span> <span class="s1">'rubygems'</span>
<span class="nb">require</span> <span class="s1">'aws/s3'</span>
<span class="no">AWS</span><span class="o">::</span><span class="no">S3</span><span class="o">::</span><span class="no">Base</span><span class="p">.</span><span class="nf">establish_connection!</span><span class="p">(</span><span class="ss">:access_key_id</span> <span class="o">=></span> <span class="no">YOUR_ACCESS_KEY_ID</span><span class="p">,</span> <span class="ss">:secret_access_key</span> <span class="o">=></span> <span class="no">YOUR_SECRET_ACCESS_KEY</span><span class="p">)</span>
<span class="no">Benchmark</span><span class="p">.</span><span class="nf">bm</span> <span class="k">do</span> <span class="o">|</span><span class="n">x</span><span class="o">|</span>
<span class="n">x</span><span class="p">.</span><span class="nf">report</span><span class="p">(</span><span class="s2">"disk (1 read): "</span><span class="p">)</span> <span class="p">{</span> <span class="mi">1</span><span class="p">.</span><span class="nf">times</span> <span class="p">{</span><span class="no">File</span><span class="p">.</span><span class="nf">read</span><span class="p">(</span><span class="s1">'/your-ebs-mount/1.xml'</span><span class="p">)}}</span>
<span class="n">x</span><span class="p">.</span><span class="nf">report</span><span class="p">(</span><span class="s2">"s3 (1 read): "</span><span class="p">)</span> <span class="p">{</span> <span class="mi">1</span><span class="p">.</span><span class="nf">times</span> <span class="p">{</span> <span class="no">AWS</span><span class="o">::</span><span class="no">S3</span><span class="o">::</span><span class="no">S3Object</span><span class="p">.</span><span class="nf">value</span> <span class="s1">'1.xml'</span><span class="p">,</span> <span class="s2">"your-s3-bucket"</span> <span class="p">}</span> <span class="p">}</span>
<span class="n">x</span><span class="p">.</span><span class="nf">report</span><span class="p">(</span><span class="s2">"disk (1000 read): "</span><span class="p">)</span> <span class="p">{</span> <span class="mi">1000</span><span class="p">.</span><span class="nf">times</span> <span class="p">{</span><span class="no">File</span><span class="p">.</span><span class="nf">read</span><span class="p">(</span><span class="s1">'/your-ebs-mount/1.xml'</span><span class="p">)}}</span>
<span class="n">x</span><span class="p">.</span><span class="nf">report</span><span class="p">(</span><span class="s2">"s3 (1000 read): "</span><span class="p">)</span> <span class="p">{</span> <span class="mi">1000</span><span class="p">.</span><span class="nf">times</span> <span class="p">{</span> <span class="no">AWS</span><span class="o">::</span><span class="no">S3</span><span class="o">::</span><span class="no">S3Object</span><span class="p">.</span><span class="nf">value</span> <span class="s1">'1.xml'</span><span class="p">,</span> <span class="s2">"your-s3-bucket"</span> <span class="p">}</span> <span class="p">}</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>This code was executed in a small EC2 instance on the cloud and the output is shown below. As you can see, disk read is not only faster (as expected) but very much faster at about 2000x!!</p>
<p>Of course, S3 is best used for backing up files, packing up a EC2 image and as a source to Amazon’s CDN via CloudFront, which explains the massive speed difference here. The purpose of this test was to simply make a side-by-side comparison of reading the same file from S3 compared with EBS.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">user system total real
disk <span class="o">(</span>1 <span class="nb">read</span><span class="o">)</span>: 0.000000 0.000000 0.000000 <span class="o">(</span> 0.000126<span class="o">)</span>
s3 <span class="o">(</span>1 <span class="nb">read</span><span class="o">)</span>: 0.010000 0.000000 0.010000 <span class="o">(</span> 0.308293<span class="o">)</span>
disk <span class="o">(</span>1000 <span class="nb">read</span><span class="o">)</span>: 0.030000 0.020000 0.050000 <span class="o">(</span> 0.116382<span class="o">)</span>
s3 <span class="o">(</span>1000 <span class="nb">read</span><span class="o">)</span>: 0.710000 0.100000 0.810000 <span class="o">(</span>259.014794<span class="o">)</span></code></pre></figure>
Tagging in Mercurial2009-11-22T00:00:00+00:00http://tweetegy.com/2009/11/tagging-in-mercurial<p><strong>Introduction</strong></p>
<p>If you are building software and want to release that software at regular intervals then why not tag each release in Mercurial? That way you can very easily rollback to that version of the software at any time. Whats more is that you can use your own tags rather than trying to remember the mercurial revision number that was current at the time of release.</p>
<p>There are many approaches to software versioning which will not be covered here. Check out this wikipedia article on <a href="http://en.wikipedia.org/wiki/Software_versioning" target="_blank">software versioning</a> for more details on the different approaches. The purpose of this article is to apply the versioning as a tag in your mercurial repository.</p>
<p><strong>Apply a tag in mercurial</strong></p>
<p>When using mercurial, you must always tag after a commit. So if you know that you want to tag your current working directory, you must commit it first and then tag it. Given this it obviously makes it very easy to tag a commit that you might have made a long time ago in the past. Bear this in mind when using the tag command in mercurial and you will understand clearly how this feature can be used.</p>
<p>This is how you would tag a revision in a mercurial repository, first decide what revision you want to tag and then run the following command. In this example it will tag revision number 45 with “2.0.5″</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">hg tag <span class="nt">-r</span> 45 2.0.5</code></pre></figure>
<p>This command automatically commits this tag, so if you run “hg tip” in your terminal, you will see something like the following:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">changeset: 51:209937087918
tag: tip
user: Darren Jensen
<span class="nb">date</span>: Sun Nov 22 13:10:47 2009
summary: Added tag 2.0.5 <span class="k">for </span>changeset b50b86512aac</code></pre></figure>
<p>Note that the changeset for “tip” is 51:209937087918 and the comment is “Added tag 2.0.5 for changeset b50b86512aac” (this comment is also added automatically by mercurial by the way). Given that I asked mercurial to apply the tag to revision 45, you can easily see that it is a commit made a while ago. The changeset indicated in the comment (“b50b86512aac”) does indeed refer to revision 45.</p>
<p><strong>Use a tag in mercurial</strong></p>
<p>So how to use this tag going forward? Here are a couple of ideas.</p>
<p>Use it to see the commit info at that time using the log command as follows:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">hg log <span class="nt">-r</span> 2.0.5</code></pre></figure>
<p>This will return the log entry that is associated with that tag, so in our example it would return the entry for changeset 45:b50b86512aac, as follows:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">changeset: 45:b50b86512aac
tag: 2.0.5
user: A Developer
<span class="nb">date</span>: Tue Jul 21 14:27:50 2009
summary: Made some serious changes to the application and deployed it to production</code></pre></figure>
<p>Use it to clone the repository to the tag point (note that the tag itself would not be included since that is added after this point). So if you do a “hg tip” on this cloned repository, then your would see the log entry for changeset 45 but the tag and the changeset that commit the tag will not be there (changeset 45 will have the tag “tip” in this case!).</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">hg clone <span class="nt">-r</span> 2.0.5 somerepo</code></pre></figure>
<p>Check out the Mercurial wiki for more details regarding <a href="http://mercurial.selenic.com/wiki/Tag" target="_blank">tagging in mercurial</a>, including how to deal with tagging conflicts, local tags (as opposed to “regular” tags which is covered in this article), removing tags and more.</p>
Transform a DataSet to JSON using Json.NET (Part 2)2009-10-19T00:00:00+00:00http://tweetegy.com/2009/10/transform-a-dataset-to-json-using-json-net-part-2<p>Here is how to transform a DataSet which contains multiple DataTable and DataRelations, well at least, one way you can do it! See <a href="http://www.www.tweetegy.com/2009/09/transform-a-dataset-to-json-using-json-net/">Transform a DataSet to JSON using Json.NET (Part 1)</a> for details on how to transform a single DataTable into JSON using Json.NET. <em>**</em></p>
<p><strong>Note that this is designed to work when loading one root row at a time. For example, if you have a database of people and there were related tables for work experience and work experience details then you would load one person and all their related work experience into the DataSet and then use this solution to convert it into JSON.</strong></p>
<p>The DataSet might be designed as follows:</p>
<p><img src="/assets/person-dataset.jpg" alt="How a basic person with work experience might look as a DataSet. Note: You do not need to specify any attributes except the primary and foreign keys!" /></p>
<p>We start with the ConvertDataToJson() method which has the same principal purpose as the example in Part 1 except it calls another method GetRelatedData() to return the JSON. Therefore the ConvertDataToJson() is straightforward and looks as follows:</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="kt">string</span> <span class="nf">ConvertDataToJson</span><span class="p">()</span>
<span class="p">{</span>
<span class="n">JObject</span> <span class="n">data</span> <span class="p">=</span>
<span class="k">new</span> <span class="nf">JObject</span><span class="p">(</span>
<span class="nf">GetRelatedData</span><span class="p">()</span>
<span class="p">);</span>
<span class="k">return</span> <span class="n">data</span><span class="p">.</span><span class="nf">ToString</span><span class="p">();</span>
<span class="p">}</span></code></pre></figure>
<p>The GetRelatedData() method converts the related data into JSON. We first need to calculate the number of related DataTables in the DataSet. That gives us the size we need for our JProperty array. Then, as we loop through each DataTable, we set the name of each JProperty to the name of the DataTable. Note, however, that we check if ds.Tables[i].ParentRelations.Count is greater than 0 before creating a new JArray. This is because we only want to convert the related data into a JArray once and therefore have it be part of a related JSON element once.</p>
<p>If the current table does not have any parent relations we create a JArray and using Linq we enumerate through each row in the table calling ConvertRowToJObject(r) and GetChildRows(r). Here is the complete method:</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="n">JProperty</span><span class="p">[]</span> <span class="nf">GetRelatedData</span><span class="p">()</span>
<span class="p">{</span>
<span class="c1">//relatedDataArraySize can be passed into this class</span>
<span class="c1">//it is calculated using the following formula</span>
<span class="c1">//relatedDataArraySize = Total number of DataTable - Number of DataTable with DataRelations</span>
<span class="n">JProperty</span><span class="p">[]</span> <span class="n">o</span> <span class="p">=</span> <span class="k">new</span> <span class="n">JProperty</span><span class="p">[</span><span class="n">relatedDataArraySize</span><span class="p">];</span>
<span class="kt">int</span> <span class="n">subtractor</span> <span class="p">=</span> <span class="m">0</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kt">int</span> <span class="n">i</span> <span class="p">=</span> <span class="m">0</span><span class="p">;</span> <span class="n">i</span> <span class="p"><</span> <span class="n">ds</span><span class="p">.</span><span class="n">Tables</span><span class="p">.</span><span class="n">Count</span><span class="p">;</span> <span class="n">i</span><span class="p">++)</span>
<span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="n">ds</span><span class="p">.</span><span class="n">Tables</span><span class="p">[</span><span class="n">i</span><span class="p">].</span><span class="n">ParentRelations</span><span class="p">.</span><span class="n">Count</span> <span class="p">></span> <span class="m">0</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">subtractor</span> <span class="p">+=</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="n">ds</span><span class="p">.</span><span class="n">Tables</span><span class="p">[</span><span class="n">i</span><span class="p">].</span><span class="n">ParentRelations</span><span class="p">.</span><span class="n">Count</span> <span class="p">==</span> <span class="m">0</span><span class="p">)</span>
<span class="p">{</span>
<span class="c1">//Create a JPropery -> JArray</span>
<span class="n">o</span><span class="p">[</span><span class="n">i</span> <span class="p">-</span> <span class="n">subtractor</span><span class="p">]</span> <span class="p">=</span> <span class="k">new</span> <span class="nf">JProperty</span><span class="p">(</span><span class="n">ds</span><span class="p">.</span><span class="n">Tables</span><span class="p">[</span><span class="n">i</span><span class="p">].</span><span class="n">TableName</span><span class="p">,</span>
<span class="k">new</span> <span class="nf">JArray</span><span class="p">(</span>
<span class="k">from</span> <span class="n">r</span> <span class="k">in</span> <span class="n">ds</span><span class="p">.</span><span class="n">Tables</span><span class="p">[</span><span class="n">i</span><span class="p">].</span><span class="nf">AsEnumerable</span><span class="p">()</span>
<span class="k">select</span> <span class="k">new</span> <span class="nf">JObject</span><span class="p">(</span>
<span class="c1">//See Part 1 for an explaination of the ConvertRowToJObject method</span>
<span class="nf">ConvertRowToJObject</span><span class="p">(</span><span class="n">r</span><span class="p">),</span>
<span class="c1">//See below for details of the GetChildRows method</span>
<span class="nf">GetChildRows</span><span class="p">(</span><span class="n">r</span><span class="p">)</span>
<span class="p">)));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="n">o</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
<p>In case your interested the code to calculate the relatedDataArraySize is:</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">foreach</span> <span class="p">(</span><span class="n">DataTable</span> <span class="n">t</span> <span class="k">in</span> <span class="n">ds</span><span class="p">.</span><span class="n">Tables</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="n">t</span><span class="p">.</span><span class="n">ChildRelations</span><span class="p">.</span><span class="n">Count</span> <span class="p">&</span><span class="n">gt</span><span class="p">;</span> <span class="m">0</span><span class="p">)</span> <span class="n">numberOfTablesWithRelations</span> <span class="p">+=</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
<p>The GetChildRows(DataRow) method is as follows. Notice that it is a recursive method so that it will keep calling itself until there are no more child rows for the current DataRow.</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="n">JProperty</span> <span class="nf">GetChildRows</span><span class="p">(</span><span class="n">DataRow</span> <span class="n">r</span><span class="p">)</span>
<span class="p">{</span>
<span class="c1">//Hack...need to create a JProperty even if there is no data</span>
<span class="c1">//In your code you might want to remove this element either by a string relpace method</span>
<span class="n">JProperty</span> <span class="n">o</span> <span class="p">=</span> <span class="k">new</span> <span class="nf">JProperty</span><span class="p">(</span><span class="s">"ignore"</span><span class="p">,</span> <span class="s">"ignore"</span><span class="p">);</span>
<span class="c1">//If there are child rows...</span>
<span class="k">if</span> <span class="p">(</span><span class="n">r</span><span class="p">.</span><span class="n">Table</span><span class="p">.</span><span class="n">ChildRelations</span><span class="p">.</span><span class="n">Count</span> <span class="p">&</span><span class="n">gt</span><span class="p">;</span> <span class="m">0</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="n">r</span><span class="p">.</span><span class="nf">GetChildRows</span><span class="p">(</span><span class="n">r</span><span class="p">.</span><span class="n">Table</span><span class="p">.</span><span class="n">ChildRelations</span><span class="p">[</span><span class="m">0</span><span class="p">]).</span><span class="n">Length</span> <span class="p">&</span><span class="n">gt</span><span class="p">;</span> <span class="m">0</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">o</span> <span class="p">=</span> <span class="k">new</span> <span class="nf">JProperty</span><span class="p">(</span><span class="n">r</span><span class="p">.</span><span class="n">Table</span><span class="p">.</span><span class="n">ChildRelations</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="n">ChildTable</span><span class="p">.</span><span class="n">TableName</span><span class="p">,</span>
<span class="k">new</span> <span class="nf">JArray</span><span class="p">(</span>
<span class="k">from</span> <span class="n">rc</span> <span class="k">in</span> <span class="n">r</span><span class="p">.</span><span class="nf">GetChildRows</span><span class="p">(</span><span class="n">r</span><span class="p">.</span><span class="n">Table</span><span class="p">.</span><span class="n">ChildRelations</span><span class="p">[</span><span class="m">0</span><span class="p">])</span>
<span class="k">select</span> <span class="k">new</span> <span class="nf">JObject</span><span class="p">(</span>
<span class="nf">ConvertRowToJObject</span><span class="p">(</span><span class="n">rc</span><span class="p">),</span>
<span class="nf">GetChildRows</span><span class="p">(</span><span class="n">rc</span><span class="p">)</span>
<span class="p">)));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="n">o</span><span class="p">;</span>
<span class="p">}</span></code></pre></figure>
Restart Ubuntu GUI without restarting Ubuntu2009-09-17T00:00:00+00:00http://tweetegy.com/2009/09/restart-ubuntu-gui-without-restarting-ubuntu<p>Here is a little trick I learned recently from <a href="http://tropicalicecube.net">Tropical Ice Cube</a>. I am fairly new to Ubuntu and so all of what I heard was very new to me. So here is how you can “get out” of the graphical user interface, and restart it without having to reboot your machine.</p>
<p>To start off with, press <strong>CTRL+ALT+F2</strong>
At this point your entire screen will become a terminal window, so to speak.
<strong>Note: You can go back to your GUI by pressing: ALT+F7</strong></p>
<p>Now, back in the terminal, you can find the Ubuntu GUI process by running the following command. <em>Note: once you see the results, you might want to scroll up or down the screen, in which case you can hold SHIFT and page-up or page-down keys to do that.</em></p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">ps <span class="nt">-A</span></code></pre></figure>
<p>Look for the process Xorg and gdm in the list – these are running the GUI. Of couse, you can also pipe the output of ps -A to grep to filter out Xorg and gdm processes as follows:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">ps <span class="nt">-A</span> | <span class="nb">grep </span>Xorg
ps <span class="nt">-A</span> | <span class="nb">grep </span>gdm</code></pre></figure>
<p>You will probably notice that the output for Xorg is something like below. Note entry <strong>tty7</strong>. This stands for teletype7 and harks back to the old unix days. For more information about tty, see <a href="http://ubuntuforums.org/showthread.php?t=833765">Ubuntu Forums post on tty and pty.</a>. You’ll see that It is no coincidence that CTLT+ALT+F7 brings you back to the GUI!</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">2899 tty7 00:59:39 Xorg</code></pre></figure>
<p>Now run the killall command which terminates the specific processes as well as their children:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">killall Xorg gdm</code></pre></figure>
<p>If you hit ALT+F7 now, there is no GUI! Where has it gone? Well you killed that process and in order to start it up again, run the following in the terminal:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>gdm</code></pre></figure>
<p>This will launch the GUI and take you back to the Ubuntu login screen. You will have to open all your GUI based applications again, of course. One thing also to note is that the GUI might start on a different tty. To check this type the following command in the terminal:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">who</span></code></pre></figure>
<p>In my case, I see the following output. This tells me that there are two tty sessions running; one on tty2 (which is the terminal application I just used to restart gdm) and tty9 which is where the new gdm instance started. So now this basically means to get back to the GUI I need to hit <strong>CTRL+ALT+F9</strong>.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">darren tty2 2009-09-17 10:29
darren tty9 2009-09-17 10:50 <span class="o">(</span>:0<span class="o">)</span></code></pre></figure>
Transform a DataSet to JSON using Json.NET2009-09-11T00:00:00+00:00http://tweetegy.com/2009/09/transform-a-dataset-to-json-using-json-net<p>It was my duty recently to convert some data from SQL Server 2005 into JSON. Initially, I started writing a bunch of UDF’s in SQL Server that built up a string representation of the data in JSON format. The problem with this method is that it is fiddly, slow and does not take into account JSON data types. So I turned to <a href="http://james.newtonking.com/pages/json-net.aspx"> Json.NET by James Newton-King</a>. What I liked about this library is it’s support for LINQ and XML.</p>
<p>Here is a basic method for converting a DataSet that contains one table into JSON. Note the call to AsEnumerable() on the DataTable so that we can then use the LINQ support provided by Json.NET.</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="k">static</span> <span class="kt">string</span> <span class="nf">ConvertDataToJson</span><span class="p">()</span>
<span class="p">{</span>
<span class="n">JObject</span> <span class="n">trans</span> <span class="p">=</span>
<span class="k">new</span> <span class="nf">JObject</span><span class="p">(</span>
<span class="k">new</span> <span class="nf">JProperty</span><span class="p">(</span><span class="s">"data"</span><span class="p">,</span>
<span class="k">new</span> <span class="nf">JArray</span><span class="p">(</span>
<span class="k">from</span> <span class="n">r</span> <span class="k">in</span> <span class="n">ds</span><span class="p">.</span><span class="n">Tables</span><span class="p">[</span><span class="m">0</span><span class="p">].</span><span class="nf">AsEnumerable</span><span class="p">()</span>
<span class="k">select</span> <span class="k">new</span> <span class="nf">JObject</span><span class="p">(</span>
<span class="nf">ConvertRowToJPropertyArray</span><span class="p">(</span><span class="n">r</span><span class="p">)</span>
<span class="p">))));</span>
<span class="k">return</span> <span class="n">trans</span><span class="p">.</span><span class="nf">ToString</span><span class="p">();</span>
<span class="p">}</span></code></pre></figure>
<p>And the ConvertRowToJPropertyArray method looks like this:</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="k">static</span> <span class="n">JProperty</span><span class="p">[]</span> <span class="nf">ConvertRowToJPropertyArray</span><span class="p">(</span><span class="n">DataRow</span> <span class="n">dr</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">JProperty</span><span class="p">[]</span> <span class="n">o</span> <span class="p">=</span> <span class="k">new</span> <span class="n">JProperty</span><span class="p">[</span><span class="n">dr</span><span class="p">.</span><span class="n">Table</span><span class="p">.</span><span class="n">Columns</span><span class="p">.</span><span class="n">Count</span><span class="p">];</span>
<span class="k">for</span> <span class="p">(</span><span class="kt">int</span> <span class="n">i</span><span class="p">=</span><span class="m">0</span><span class="p">;</span> <span class="n">i</span><span class="p">&</span><span class="n">lt</span><span class="p">;</span><span class="n">dr</span><span class="p">.</span><span class="n">Table</span><span class="p">.</span><span class="n">Columns</span><span class="p">.</span><span class="n">Count</span><span class="p">;</span> <span class="n">i</span><span class="p">++)</span> <span class="p">{</span>
<span class="n">o</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="p">=</span> <span class="k">new</span> <span class="nf">JProperty</span><span class="p">(</span><span class="n">dr</span><span class="p">.</span><span class="n">Table</span><span class="p">.</span><span class="n">Columns</span><span class="p">[</span><span class="n">i</span><span class="p">].</span><span class="n">ColumnName</span><span class="p">,</span> <span class="n">dr</span><span class="p">[</span><span class="n">dr</span><span class="p">.</span><span class="n">Table</span><span class="p">.</span><span class="n">Columns</span><span class="p">[</span><span class="n">i</span><span class="p">]]);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="n">o</span><span class="p">;</span></code></pre></figure>
<p>In the <a href="http://www.www.tweetegy.com/2009/10/transform-a-dataset-to-json-using-json-net-part-2/">next post</a> I will consider a DataSet that contains multiple tables and relations.</p>
Update ZoneEdit NameServers via a Restful API in Ruby2009-07-06T00:00:00+00:00http://tweetegy.com/2009/07/update-zoneedit-nameservers-via-a-restful-api-in-ruby<p>I recently had to programmatically alter entries in <a href="http://www.zoneedit.com/">ZoneEdit</a>. While there is some documentation, it is difficult to get started quickly. This is especially true if you want to use Ruby since there are no examples written in Ruby that I could find. So I wrote a simple class to do just what I need and here it is:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
</pre></td><td class="code"><pre><span class="nb">require</span> <span class="s1">'net/http'</span>
<span class="nb">require</span> <span class="s1">'net/https'</span>
<span class="nb">require</span> <span class="s1">'uri'</span>
<span class="k">class</span> <span class="nc">ZoneEdit</span>
<span class="c1">#Initialize with the ZoneEdit username and password credentials</span>
<span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">username</span><span class="p">,</span> <span class="n">password</span><span class="p">)</span>
<span class="vc">@@username</span> <span class="o">=</span> <span class="n">username</span>
<span class="vc">@@password</span> <span class="o">=</span> <span class="n">password</span>
<span class="k">end</span>
<span class="c1">#This method can be used to change a dns record in ZoneEdit</span>
<span class="c1">#Pass in the account username and zone you want to manage as well as the dnsfrom (sub-domain) forward address and 0 or 1 to shadow (cloak) or not</span>
<span class="k">def</span> <span class="nf">web_forward</span><span class="p">(</span><span class="n">user</span><span class="p">,</span><span class="n">zone</span><span class="p">,</span><span class="n">dnsfrom</span><span class="p">,</span><span class="n">forward</span><span class="p">,</span><span class="n">shadow</span><span class="p">)</span>
<span class="k">return</span> <span class="n">send_command</span><span class="p">(</span><span class="s2">"command=ChangeRecord&user=</span><span class="si">#{</span><span class="n">user</span><span class="si">}</span><span class="s2">&zone=</span><span class="si">#{</span><span class="n">zone</span><span class="si">}</span><span class="s2">&type=WF&dnsfrom=</span><span class="si">#{</span><span class="n">dnsfrom</span><span class="si">}</span><span class="s2">&forward=</span><span class="si">#{</span><span class="n">forward</span><span class="si">}</span><span class="s2">&shadow=</span><span class="si">#{</span><span class="n">shadow</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span>
<span class="k">end</span>
<span class="kp">private</span>
<span class="k">def</span> <span class="nf">send_command</span><span class="p">(</span><span class="n">command</span><span class="p">)</span>
<span class="nb">puts</span> <span class="s2">"https://www.zoneedit.com/auth/admin/command.html?</span><span class="si">#{</span><span class="n">command</span><span class="si">}</span><span class="s2">"</span>
<span class="vi">@http</span><span class="o">=</span><span class="no">Net</span><span class="o">::</span><span class="no">HTTP</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="s1">'www.zoneedit.com'</span><span class="p">,</span> <span class="mi">443</span><span class="p">)</span>
<span class="vi">@http</span><span class="p">.</span><span class="nf">use_ssl</span> <span class="o">=</span> <span class="kp">true</span>
<span class="vi">@http</span><span class="p">.</span><span class="nf">start</span><span class="p">()</span> <span class="p">{</span><span class="o">|</span><span class="n">http</span><span class="o">|</span>
<span class="n">req</span> <span class="o">=</span> <span class="no">Net</span><span class="o">::</span><span class="no">HTTP</span><span class="o">::</span><span class="no">Get</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="s2">"/auth/admin/command.html?</span><span class="si">#{</span><span class="n">command</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span>
<span class="n">req</span><span class="p">.</span><span class="nf">basic_auth</span> <span class="vc">@@username</span><span class="p">,</span> <span class="vc">@@password</span>
<span class="n">response</span> <span class="o">=</span> <span class="n">http</span><span class="p">.</span><span class="nf">request</span><span class="p">(</span><span class="n">req</span><span class="p">)</span>
<span class="nb">print</span> <span class="n">response</span><span class="p">.</span><span class="nf">body</span>
<span class="p">}</span>
<span class="k">end</span>
<span class="k">end</span>
</pre></td></tr></tbody></table></code></pre></figure>
<p>It’s usage is simply as follows:</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
</pre></td><td class="code"><pre><span class="n">ze</span> <span class="o">=</span> <span class="no">ZoneEdit</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="s2">"someuser"</span><span class="p">,</span> <span class="s2">"apassword"</span><span class="p">)</span>
<span class="n">ze</span><span class="p">.</span><span class="nf">web_forward</span> <span class="s2">"someuser"</span><span class="p">,</span> <span class="s2">"somedomain.com"</span><span class="p">,</span> <span class="s2">"somesubdomain"</span><span class="p">,</span> <span class="s2">"http://anewdomain.com"</span><span class="p">,</span> <span class="s2">"1"</span>
</pre></td></tr></tbody></table></code></pre></figure>
How to create an excel spreadsheet using Java (JExcel actually)2009-07-06T00:00:00+00:00http://tweetegy.com/2009/07/how-to-create-an-excel-spreadsheet-using-java-jexcel-actually<p>If you want to manipulate an Excel spreadsheet using .NET it is very easy to do. If your not convinced by that statement, I will show you how in a separate post. However, the purpose of this post is to create an Excel spreadsheet and populate it with values using something other than .NET. There may be many reasons why you would want to do this and mine was simply because I wanted to stick to using Linux (Ubuntu 9.10 Server).</p>
<p>I gave up with trying it out in Mono – some basic ADO.NET code I had written just would not run! So I turned to Java! Someone on my team recommended I try <a href="http://jexcelapi.sourceforge.net/">JExcel</a> and so I did. It turned out to be a simple excercise to spike. Here is the class:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="kn">import</span> <span class="nn">java.io.File</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">java.io.IOException</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">java.io.OutputStream</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">jxl.Workbook</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">jxl.write.Label</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">jxl.write.WritableSheet</span><span class="o">;</span>
<span class="kn">import</span> <span class="nn">jxl.write.WritableWorkbook</span><span class="o">;</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">JExcelSample</span>
<span class="o">{</span>
<span class="kd">public</span> <span class="kd">static</span> <span class="kt">void</span> <span class="nf">main</span><span class="o">(</span><span class="nc">String</span> <span class="n">args</span><span class="o">[])</span> <span class="o">{</span>
<span class="k">try</span>
<span class="o">{</span>
<span class="nc">File</span> <span class="n">f</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">File</span><span class="o">(</span><span class="s">"JExcelSample.xls"</span><span class="o">);</span>
<span class="nc">WritableWorkbook</span> <span class="n">w</span> <span class="o">=</span> <span class="nc">Workbook</span><span class="o">.</span><span class="na">createWorkbook</span><span class="o">(</span><span class="n">f</span><span class="o">);</span>
<span class="nc">WritableSheet</span> <span class="n">s</span> <span class="o">=</span> <span class="n">w</span><span class="o">.</span><span class="na">createSheet</span><span class="o">(</span><span class="s">"Demo"</span><span class="o">,</span> <span class="mi">0</span><span class="o">);</span>
<span class="n">s</span><span class="o">.</span><span class="na">addCell</span><span class="o">(</span><span class="k">new</span> <span class="nc">Label</span><span class="o">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="s">"Hello World"</span><span class="o">));</span>
<span class="n">w</span><span class="o">.</span><span class="na">write</span><span class="o">();</span>
<span class="n">w</span><span class="o">.</span><span class="na">close</span><span class="o">();</span>
<span class="o">}</span> <span class="k">catch</span> <span class="o">(</span><span class="nc">Exception</span> <span class="n">e</span><span class="o">)</span>
<span class="o">{</span>
<span class="nc">System</span><span class="o">.</span><span class="na">err</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="n">e</span><span class="o">);</span>
<span class="o">}</span>
<span class="o">}</span>
<span class="o">}</span></code></pre></figure>
<p>To compile and run the above Java program you will need to download and <strong>save jxl.jar to your /usr/lib directory</strong> and run the following statement in your terminal:</p>
<figure class="highlight"><pre><code class="language-java" data-lang="java"><span class="n">javac</span> <span class="o">-</span><span class="n">cp</span> <span class="s">"/usr/lib/jxl.jar"</span> <span class="nc">JExcelSample</span><span class="o">.</span><span class="na">java</span>
<span class="n">java</span> <span class="o">-</span><span class="n">cp</span> <span class="s">"/usr/lib/jxl.jar"</span> <span class="nc">JExcelSample</span></code></pre></figure>
<p>That’s it! After you have run the program you will see the JExcelSample.xls file and if you open it you will see that it contains one worksheet called Demo with one entry “Hello World”. Note that you are not required to have Excel installed on your machine to do any of the above. The code runs just fine without and the spreadsheet will open in OpenOffice.org Spreadsheet by default.</p>
Setting up a scheduled task (cron job) to run a rake script in Ubuntu2009-06-16T00:00:00+00:00http://tweetegy.com/2009/06/setting-up-a-scheduled-task-cron-job-to-run-a-rake-script-in-ubuntu<p>To schedule a task in Ubuntu you need to understand cron and crontab. Both these concepts are easy to grasp. However, nothing is always as smooth as you would want! The issues I had to resolve are:</p>
<ul>
<li>Understanding the syntax of cron</li>
<li>Adding a crontab for a user</li>
<li>Creating an executable shell script which calls rake</li>
<li>Logging the output</li>
</ul>
<p>For the syntax, I recommend checking out this Wikipedia article on <a href="http://en.wikipedia.org/wiki/Cron">cron</a>. I will explain each of the above areas, starting with adding a crontab for a user.</p>
<p><strong>Adding a crontab for a user</strong></p>
<p>In order to edit a crontab for a user, you must type the following in the terminal:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>crontab <span class="nt">-e</span></code></pre></figure>
<p>Note that I prefix the command with “sudo” which means it will modify the cron file for the user root. When I first tried this there was the following error: “no crontab for root”. I solved this problem with the following script which simply creates an empty file and associates that as a crontab for user root.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">touch </span>rootcron
<span class="nb">sudo </span>crontab <span class="nt">-u</span> root rootcron</code></pre></figure>
<p>Now you will be able to edit the file using <strong>sudo crontab -e</strong> and it will work just fine.</p>
<p><strong>Creating an executable shell script which calls rake</strong></p>
<p>Let’s say you have a rake script in /var/www/someproject/rakefile. You can execute the rake script using the following script:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c">#!/bin/sh</span>
<span class="nb">date
echo</span> <span class="s2">"Executing rake"</span>
<span class="nb">cd</span> /var/www/someproject/
rake</code></pre></figure>
<p>You must make this script an executable before cron can start it up. Here’s how:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo chmod</span> +x runrake.sh</code></pre></figure>
<p>You can now execute this every 24hrs at midnight (for example) by adding the following line to your cron. Note that the full path to the script is included and there is a “./” before the name of the script, which is how executable files can be run in the terminal. Next issue. Sometimes the cron job would run but not complete or just did not appear to run at all. How can I get more information about what is happening? Let’s check out logging!</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">0 0 <span class="k">*</span> <span class="k">*</span> <span class="k">*</span> <span class="nb">sudo</span> /var/www/someproject/./runrake.sh</code></pre></figure>
<p><strong>Logging the output</strong></p>
<p>It turns out to be really straight forward to log the output of a cron job. Simply use the redirect output syntax to send the standard output to a file. Use single > to create a new file each time the cron is run or double » to append to your log file. You can put the file anywhere you like, however, it is recommended to put inside the standard log folder /var/log. So now the line in the cron file looks as follows:</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">0 0 <span class="k">*</span> <span class="k">*</span> <span class="k">*</span> <span class="nb">sudo</span> /var/www/someproject/./runrake.sh <span class="o">></span> /var/log/runrake.log</code></pre></figure>