atom.xml

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

  <title><![CDATA[Experimenting with Code]]></title>
  <link href="http://jamesjtong.github.io/atom.xml" rel="self"/>
  <link href="http://jamesjtong.github.io/"/>
  <updated>2015-01-16T22:58:43-05:00</updated>
  <id>http://jamesjtong.github.io/</id>
  <author>
    <name><![CDATA[James Tong]]></name>
    <email><![CDATA[jtong33@gmail.com]]></email>
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Easy CORS AngularJS with Rails]]></title>
    <link href="http://jamesjtong.github.io/blog/2015/01/06/easy-cors-angularjs-with-rails/"/>
    <updated>2015-01-06T14:21:41-05:00</updated>
    <id>http://jamesjtong.github.io/blog/2015/01/06/easy-cors-angularjs-with-rails</id>
    <content type="html"><![CDATA[<p>Setting Up CORS is quite simple with angularjs and rails.</p>

<p>You are going to have to edit both the frontend and backend.</p>

<h1>Frontend Angular Portion:</h1>

<p>For the frontend portion, all you have to do is inject $httpProvider into your config and add 2 lines of code. See below for an example:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s1">&#39;ultimateJobApplierApp&#39;</span><span class="p">,</span> <span class="p">[</span>
</span><span class='line'>  <span class="s1">&#39;ngCookies&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="s1">&#39;ngResource&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="s1">&#39;ngSanitize&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="s1">&#39;ngRoute&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="s1">&#39;ngClipboard&#39;</span><span class="p">,</span>
</span><span class='line'>  <span class="s1">&#39;restangular&#39;</span><span class="p">,</span>
</span><span class='line'><span class="p">])</span>
</span><span class='line'>  <span class="p">.</span><span class="nx">config</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$routeProvider</span><span class="p">,</span> <span class="nx">$httpProvider</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>     <span class="c1">// Enable CORS</span>
</span><span class='line'>    <span class="nx">$httpProvider</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">useXDomain</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</span><span class='line'>    <span class="k">delete</span> <span class="nx">$httpProvider</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">common</span><span class="p">[</span><span class="s1">&#39;X-Requested-With&#39;</span><span class="p">];</span>
</span><span class='line'>  <span class="p">})</span>
</span></code></pre></td></tr></table></div></figure>


<h1>Rails Backend Portion:</h1>

<p>For the rails back-end portion, start by adding the rack-cors gem to your gemfile. Then bundle.</p>

<p>After that, just edit your config/application.rb</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">module</span> <span class="nn">JobloggerApi</span>
</span><span class='line'>  <span class="k">class</span> <span class="nc">Application</span> <span class="o">&lt;</span> <span class="no">Rails</span><span class="o">::</span><span class="no">Application</span>
</span><span class='line'>    <span class="c1"># Configure Rack CORS</span>
</span><span class='line'>    <span class="n">config</span><span class="o">.</span><span class="n">middleware</span><span class="o">.</span><span class="n">use</span> <span class="no">Rack</span><span class="o">::</span><span class="no">Cors</span> <span class="k">do</span>
</span><span class='line'>      <span class="n">allow</span> <span class="k">do</span>
</span><span class='line'>        <span class="n">origins</span> <span class="s1">&#39;*&#39;</span>
</span><span class='line'>        <span class="n">resource</span> <span class="s1">&#39;*&#39;</span><span class="p">,</span> <span class="ss">:headers</span> <span class="o">=&gt;</span> <span class="ss">:any</span><span class="p">,</span> <span class="ss">:methods</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="ss">:get</span><span class="p">,</span> <span class="ss">:post</span><span class="p">,</span> <span class="ss">:options</span><span class="o">]</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Restart your app and CORS should now be enabled!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Angular ngOptions Quick and Dirty Understanding]]></title>
    <link href="http://jamesjtong.github.io/blog/2015/01/01/angular-ngoptions-quick-and-dirty-understanding/"/>
    <updated>2015-01-01T16:20:25-05:00</updated>
    <id>http://jamesjtong.github.io/blog/2015/01/01/angular-ngoptions-quick-and-dirty-understanding</id>
    <content type="html"><![CDATA[<p>Understanding ng-options is a lot simpler than one would expect after seeing the angular documentation for it.</p>

<h1>When do we have to use it?</h1>

<p> We use it when we want to bind a javascript object to a select box (using ng-model).
(NOTE: ng-repeat can ONLY be used to bind a primitive/string to to a select box, it won&rsquo;t work with a javascript object).</p>

<p>For example, let&rsquo;s say I want a select box that is able to change the currently selectedCompany. The code would look like the below:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">// companies.js</span>
</span><span class='line'>
</span><span class='line'><span class="nx">$scope</span><span class="p">.</span><span class="nx">companies</span> <span class="o">=</span> <span class="p">[</span>
</span><span class='line'>  <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;ABC Soap Shop&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">id</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">revenue</span><span class="o">:</span> <span class="mi">5000</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;brick_and_mortar&quot;</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Pizza Haven&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">id</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">revenue</span><span class="o">:</span> <span class="mi">100000</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;brick_and_mortar&quot;</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;XYZ Mac Repair&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">id</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">revenue</span><span class="o">:</span> <span class="mi">45000</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;brick_and_mortar&quot;</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Facebook&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">id</span><span class="o">:</span> <span class="mi">4</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">revenue</span><span class="o">:</span> <span class="mi">8999999</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;online&quot;</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="p">{</span>
</span><span class='line'>    <span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Apple&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">id</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">revenue</span><span class="o">:</span> <span class="mi">999999999999</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;online&quot;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">]</span>
</span><span class='line'>
</span><span class='line'><span class="nx">$scope</span><span class="p">.</span><span class="nx">selectedCompany</span> <span class="o">=</span> <span class="nx">$scope</span><span class="p">.</span><span class="nx">companies</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">List</span> <span class="nx">of</span> <span class="nx">Companies</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">pre</span><span class="o">&gt;</span><span class="nx">companies</span> <span class="p">{{</span><span class="nx">companies</span><span class="p">}}</span><span class="o">&lt;</span><span class="err">/pre&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">pre</span><span class="o">&gt;</span><span class="nx">selectedCompany</span> <span class="p">{{</span><span class="nx">selectedCompany</span><span class="p">}}</span><span class="o">&lt;</span><span class="err">/pre&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">select</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">model</span><span class="o">=</span><span class="s2">&quot;selectedCompany&quot;</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">options</span><span class="o">=</span><span class="s2">&quot;company.name for company in companies&quot;</span><span class="o">&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="err">/select&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Great! That is all the code is needed for this all too common situation. You can see from the screenshot below, it works as expected. When you change the selectbox value, then the whole object selectedCompany changes along with it.</p>

<p><img src="http://jamesjtong.github.io/images/ng-option1.png"></p>

<h1>Alright, so what&rsquo;s the deal with the the &ldquo;as&rdquo; keyword for ng-options?</h1>

<p>The key to understanding this is that the binded value for selectedCompany by default is whatever is in between the &ldquo;for&rdquo; and &ldquo;in&rdquo; keyword (in our case company).</p>

<p>We can change that with &ldquo;as&rdquo; keyword. Here is an example:
Let&rsquo;s say that instead of binding selectedCompany to the whole company object, we just wanted to bind it to the id of the object. We can achieve this with the &ldquo;as&rdquo; keyword.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span><span class="nx">selectedCompany</span> <span class="p">{{</span><span class="nx">selectedCompany</span><span class="p">}}</span><span class="o">&lt;</span><span class="err">/span&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="nx">select</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">model</span><span class="o">=</span><span class="s2">&quot;selectedCompany&quot;</span> <span class="nx">ng</span><span class="o">-</span><span class="nx">options</span><span class="o">=</span><span class="s2">&quot;company.id as company.name for company in companies&quot;</span><span class="o">&gt;</span>
</span><span class='line'><span class="o">&lt;</span><span class="err">/select&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p><img src="http://jamesjtong.github.io/images/ng-option2.png"></p>

<p>Notice the flexibility with ng-options. We have the company name as the label, but the model bound value is the company id.</p>

<p><strong>Just a recap:</strong> The word that is before the &ldquo;as&rdquo; keyword is the bound value; it is the value of what you want selectedCompany to be. The word that follows the &ldquo;as&rdquo; keyword is the option label. The word that follows the &ldquo;for&rdquo; keyword is whatever you want to refer each individual element as. Finally, the word after &ldquo;in&rdquo; is the array that you are using for ng-options.</p>

<p>With the &ldquo;as&rdquo; syntax, the following 2 selects would be equivalent:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;select</span> <span class="na">ng-model=</span><span class="s">&quot;selectedCompany&quot;</span> <span class="na">ng-options=</span><span class="s">&quot;company.name for company in companies&quot;</span><span class="nt">&gt;</span>
</span><span class='line'><span class="nt">&lt;/select&gt;</span>
</span><span class='line'><span class="nt">&lt;select</span> <span class="na">ng-model=</span><span class="s">&quot;selectedCompany&quot;</span> <span class="na">ng-options=</span><span class="s">&quot;company as company.name for company in companies&quot;</span><span class="nt">&gt;</span>
</span><span class='line'><span class="nt">&lt;/select&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<h1>Conclusion:</h1>

<p>ng-options provides a flexible interface for dealing with the html select box and it&rsquo;s options. It is the angular way and you will definitely come across and have to learn it if you are writing production angular code. Although there are a few more things you can do with ng-options (using it with objects instead of arrays, grouping options, etc.), I am going to end here with an excerpt from the angular docs:</p>

<blockquote><p>&ldquo;In many cases, ngRepeat can be used on option elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, as well as providing more flexibility in how the select&rsquo;s model is assigned via the select as part of the comprehension expression. ngOptions should be used when the select model needs to be bound to a non-string value. This is because an option element can only be bound to string values at present.&rdquo;</p></blockquote>

<h2>USE ng-options!</h2>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Easy Rails JSON APIs with rails-api and activemodel serializers]]></title>
    <link href="http://jamesjtong.github.io/blog/2014/12/28/easy-rails-json-apis-with-rails-api-and-activemodel-serializers/"/>
    <updated>2014-12-28T12:32:01-05:00</updated>
    <id>http://jamesjtong.github.io/blog/2014/12/28/easy-rails-json-apis-with-rails-api-and-activemodel-serializers</id>
    <content type="html"><![CDATA[<p>JSON APIs are all the craze nowadays in web programming. Let&rsquo;s talk about an easy way to create a JSON API with rails-api. First, let&rsquo;s install the rails-api gem.</p>

<pre><code>gem install rails-api
</code></pre>

<p>Then let&rsquo;s make a new rails-api app (rails-api is basically just a lightweight version of rails with just the resources necessary and customized for creating an api, i.e. no view layer support). For this blog, I am going to create an api for the backend for one of my past apps (<a href="http://joblogger.herokuapp.com/">http://joblogger.herokuapp.com/</a>)</p>

<pre><code>rails-api new joblogger-api &amp;&amp; cd joblogger-api
</code></pre>

<p>Great, this command created what looks to be a smaller version of a normal rails app and changed directory into the app. Now let&rsquo;s add what we are going to need to the Gemfile:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">source</span> <span class="s1">&#39;https://rubygems.org&#39;</span>
</span><span class='line'><span class="n">gem</span> <span class="s1">&#39;rails&#39;</span><span class="p">,</span> <span class="s1">&#39;4.1.0.beta1&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="n">gem</span> <span class="s1">&#39;rails-api&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="n">gem</span> <span class="s1">&#39;spring&#39;</span><span class="p">,</span> <span class="ss">:group</span> <span class="o">=&gt;</span> <span class="ss">:development</span>
</span><span class='line'>
</span><span class='line'><span class="n">gem</span> <span class="s1">&#39;pg&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="c1"># JSON serialization</span>
</span><span class='line'><span class="n">gem</span> <span class="s2">&quot;active_model_serializers&quot;</span><span class="p">,</span> <span class="s1">&#39;~&gt; 0.8.1&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="n">group</span> <span class="ss">:development</span><span class="p">,</span> <span class="ss">:test</span> <span class="k">do</span>
</span><span class='line'>  <span class="n">gem</span> <span class="s1">&#39;rspec-rails&#39;</span><span class="p">,</span> <span class="s1">&#39;~&gt; 3.0&#39;</span>
</span><span class='line'>  <span class="n">gem</span> <span class="s1">&#39;factory_girl_rails&#39;</span>
</span><span class='line'>  <span class="n">gem</span> <span class="s1">&#39;faker&#39;</span>
</span><span class='line'>  <span class="n">gem</span> <span class="s1">&#39;pry&#39;</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Add your gem for whichever database you are going to be using (i am going to be using postgres and editing the database.yml, but it is fine and easier for you if you use the default sqlite gem)</p>

<p>The gems of note is the active_model_serializer gem (this let&rsquo;s me format the JSON output for various resources). My other gems are for testing using Rspec, factories, creating fake seed data (faker), and debugging (pry).</p>

<p>Let&rsquo;s run the bundle and execute the setup commands for the gems (for me there is only rspec).</p>

<pre><code>bundle install
rails generate rspec:install
</code></pre>

<p>Great, now let&rsquo;s create a resource almost every app needs. Let&rsquo;s create users.</p>

<pre><code>rails g resource user name:string email:string favorite_color:string
</code></pre>

<p>Notice that the rails generator now knows that this is an api (thanks to this being a rails-api project) and refrains from generating routes that arent used in apis (if you look at the routes.rb file, new and edit aren&rsquo;t included). Also notice that a serializer is generated for the user model thanks to our activerecord serializer gem :</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#routes.rb</span>
</span><span class='line'><span class="no">Rails</span><span class="o">.</span><span class="n">application</span><span class="o">.</span><span class="n">routes</span><span class="o">.</span><span class="n">draw</span> <span class="k">do</span>
</span><span class='line'>  <span class="n">resources</span> <span class="ss">:users</span><span class="p">,</span> <span class="ss">except</span><span class="p">:</span> <span class="o">[</span><span class="ss">:new</span><span class="p">,</span> <span class="ss">:edit</span><span class="o">]</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now let&rsquo;s create some seed data using Faker.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="mi">5</span><span class="o">.</span><span class="n">times</span> <span class="k">do</span>
</span><span class='line'>  <span class="no">User</span><span class="o">.</span><span class="n">create</span><span class="p">(</span><span class="nb">name</span><span class="p">:</span> <span class="no">Faker</span><span class="o">::</span><span class="no">Name</span><span class="o">.</span><span class="n">name</span><span class="p">,</span> <span class="ss">email</span><span class="p">:</span> <span class="no">Faker</span><span class="o">::</span><span class="no">Internet</span><span class="o">.</span><span class="n">email</span><span class="p">,</span> <span class="ss">favorite_color</span><span class="p">:</span> <span class="no">Faker</span><span class="o">::</span><span class="no">Commerce</span><span class="o">.</span><span class="n">color</span><span class="p">)</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Let&rsquo;s write some tests and create an index action on the UsersController to get a list of all the users. Let&rsquo;s say the functionality we want for our app is for the favorite_color to not be shown as part of the index action:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#spec/controllers/user_controller_spec.rb</span>
</span><span class='line'><span class="nb">require</span> <span class="s1">&#39;rails_helper&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="no">RSpec</span><span class="o">.</span><span class="n">describe</span> <span class="no">UsersController</span><span class="p">,</span> <span class="ss">:type</span> <span class="o">=&gt;</span> <span class="ss">:controller</span> <span class="k">do</span>
</span><span class='line'>  <span class="n">describe</span> <span class="s2">&quot;index&quot;</span> <span class="k">do</span>
</span><span class='line'>    <span class="n">before</span> <span class="p">{</span> <span class="n">get</span> <span class="ss">:index</span> <span class="p">}</span>
</span><span class='line'>    <span class="n">it</span> <span class="s2">&quot;responds successfully with an HTTP 200 status code&quot;</span> <span class="k">do</span>
</span><span class='line'>      <span class="n">expect</span><span class="p">(</span><span class="n">response</span><span class="p">)</span><span class="o">.</span><span class="n">to</span> <span class="n">be_success</span>
</span><span class='line'>      <span class="n">expect</span><span class="p">(</span><span class="n">response</span><span class="p">)</span><span class="o">.</span><span class="n">to</span> <span class="n">have_http_status</span><span class="p">(</span><span class="mi">200</span><span class="p">)</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">it</span> <span class="s2">&quot;lists the user&#39;s public attributes while hiding the user&#39;s favorite_color&quot;</span> <span class="k">do</span>
</span><span class='line'>      <span class="n">response_keys</span> <span class="o">=</span> <span class="no">JSON</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="n">response</span><span class="o">.</span><span class="n">body</span><span class="p">)</span><span class="o">[</span><span class="s2">&quot;users&quot;</span><span class="o">].</span><span class="n">first</span><span class="o">.</span><span class="n">keys</span>
</span><span class='line'>      <span class="n">expect</span><span class="p">(</span><span class="n">response_keys</span><span class="p">)</span><span class="o">.</span><span class="n">to</span> <span class="kp">include</span><span class="p">(</span><span class="s2">&quot;id&quot;</span><span class="p">)</span>
</span><span class='line'>      <span class="n">expect</span><span class="p">(</span><span class="n">response_keys</span><span class="p">)</span><span class="o">.</span><span class="n">to</span> <span class="kp">include</span><span class="p">(</span><span class="s2">&quot;name&quot;</span><span class="p">)</span>
</span><span class='line'>      <span class="n">expect</span><span class="p">(</span><span class="n">response_keys</span><span class="p">)</span><span class="o">.</span><span class="n">to</span> <span class="kp">include</span><span class="p">(</span><span class="s2">&quot;email&quot;</span><span class="p">)</span>
</span><span class='line'>      <span class="n">expect</span><span class="p">(</span><span class="n">response_keys</span><span class="p">)</span><span class="o">.</span><span class="n">to_not</span> <span class="kp">include</span><span class="p">(</span><span class="s2">&quot;favorite_color&quot;</span><span class="p">)</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'>
</span><span class='line'><span class="c1">#app/controllers/users_controller.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">UsersController</span> <span class="o">&lt;</span> <span class="no">ApplicationController</span>
</span><span class='line'>  <span class="k">def</span> <span class="nf">index</span>
</span><span class='line'>    <span class="n">users</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">all</span>
</span><span class='line'>    <span class="n">render</span> <span class="ss">json</span><span class="p">:</span> <span class="n">users</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now let&rsquo;s run rspec . and we expect the second test to fail as the response will probably include favorite_color. (NOTE: you may need to run rake db:setup with the appropriate rails environments and/or rake db:migrate to setup your test and development databases if you haven&rsquo;t already)</p>

<pre><code>rspec .
</code></pre>

<p>Great as expected, one test failed. You&rsquo;re failure should be somewhere along the lines of:</p>

<pre><code>Failure/Error: expect(response_keys).to_not include("favorite_color")
       expected ["id", "name", "email", "favorite_color"] not to include "favorite_color"
</code></pre>

<p>Now, let&rsquo;s edit our user serializer so that favorite_color isn&rsquo;t shown as part of the index action (/users)</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#app/serializers/user_serializer.rb</span>
</span><span class='line'><span class="k">class</span> <span class="nc">UserSerializer</span> <span class="o">&lt;</span> <span class="no">ActiveModel</span><span class="o">::</span><span class="no">Serializer</span>
</span><span class='line'>  <span class="n">attributes</span> <span class="ss">:id</span><span class="p">,</span> <span class="ss">:name</span><span class="p">,</span> <span class="ss">:email</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>The attributes are a whitelist of a what is shown. Now let&rsquo;s rspec . again and we can see all tests pass!
You can also run a rails server and hit your local endpoint /users to confirm that this works. You should get something like this</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
</pre></td><td class='code'><pre><code class='json'><span class='line'><span class="p">{</span>
</span><span class='line'>   <span class="nt">&quot;users&quot;</span><span class="p">:[</span>
</span><span class='line'>      <span class="p">{</span>
</span><span class='line'>         <span class="nt">&quot;id&quot;</span><span class="p">:</span><span class="mi">6</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="s2">&quot;Devonte Hagenes&quot;</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;email&quot;</span><span class="p">:</span><span class="s2">&quot;brendon@kihnerdman.com&quot;</span>
</span><span class='line'>      <span class="p">},</span>
</span><span class='line'>      <span class="p">{</span>
</span><span class='line'>         <span class="nt">&quot;id&quot;</span><span class="p">:</span><span class="mi">7</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="s2">&quot;Malcolm Huel&quot;</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;email&quot;</span><span class="p">:</span><span class="s2">&quot;kimberly.wisozk@nicolasgrant.net&quot;</span>
</span><span class='line'>      <span class="p">},</span>
</span><span class='line'>      <span class="p">{</span>
</span><span class='line'>         <span class="nt">&quot;id&quot;</span><span class="p">:</span><span class="mi">8</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="s2">&quot;Wilfredo Bruen&quot;</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;email&quot;</span><span class="p">:</span><span class="s2">&quot;ashleigh@goldner.org&quot;</span>
</span><span class='line'>      <span class="p">},</span>
</span><span class='line'>      <span class="p">{</span>
</span><span class='line'>         <span class="nt">&quot;id&quot;</span><span class="p">:</span><span class="mi">9</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="s2">&quot;Miss Arielle Leuschke&quot;</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;email&quot;</span><span class="p">:</span><span class="s2">&quot;don_spinka@spinka.net&quot;</span>
</span><span class='line'>      <span class="p">},</span>
</span><span class='line'>      <span class="p">{</span>
</span><span class='line'>         <span class="nt">&quot;id&quot;</span><span class="p">:</span><span class="mi">10</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;name&quot;</span><span class="p">:</span><span class="s2">&quot;Quinn Hoppe&quot;</span><span class="p">,</span>
</span><span class='line'>         <span class="nt">&quot;email&quot;</span><span class="p">:</span><span class="s2">&quot;rita@olsonprohaska.biz&quot;</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>   <span class="p">]</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Congratulations, you have just created a simple Rails JSON API! (To view the full code, visit <a href="https://github.com/jamesjtong/joblogger-api/tree/blog-12-28-14">https://github.com/jamesjtong/joblogger-api/tree/blog-12-28-14</a>)</p>

<p>HAPPY HACKING</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[What the "REST"? REST in Pieces ]]></title>
    <link href="http://jamesjtong.github.io/blog/2014/02/17/what-the-rest-rest-in-pieces/"/>
    <updated>2014-02-17T11:54:00-05:00</updated>
    <id>http://jamesjtong.github.io/blog/2014/02/17/what-the-rest-rest-in-pieces</id>
    <content type="html"><![CDATA[<p><strong><em>A short guide breaking down the key components of RESTful architecture</em></strong></p>

<p><img src="http://www.digsdigs.com/photos/Luxury-Classic-Sofa-and-Armchairs-Imperial-by-Vimercati-Media-5-554x377.jpg" title="REST Sofa" alt="REST Sofa" /></p>

<p>So until last week, I had thought I understood REST. I thought that for an app to be RESTFUL, all an app had to do was have logical URIs*. Although this is a big part of it, there is so much more to it. Roy Fielding, the man who introduced REST, wrote a 168 page dissertation (<a href="http://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf">link</a>) explaining REST. Although that is a good read in itself, the main concepts of REST can be explained in something much shorter and I hope to do that in this blog post.</p>

<h1><strong>So let&rsquo;s talk about why REST is important.</strong></h1>

<p>Back when the web was new, web apps didn&rsquo;t talk to each other much. It was mainly humans who talked to a web app. Times have changed. Web apps need to talk to each other. They talk to each other through APIs. An API is the interface implemented by an application which allows other applications to communicate with it.</p>

<p>For web apps to have a smooth transition in talking to each other, the APIs of web apps need to follow some sort of architectural pattern. REST is just one of these patterns that is extremely popular and it makes app to app communication easy.</p>

<p> Need an example of app to app communication?</p>

<p>Think of how a lot of apps are just mashups that incorporate various APIs like those of Youtube, Google Maps, Twitter or Facebook and then integrate them to do amazing things.</p>

<p>Let&rsquo;s say you want to create an app where you use Facebook&rsquo;s api to get &ldquo;likes&rdquo; data on different categories, then use that information to find areas that you might like around your area. This app wouldn&rsquo;t be very difficult to execute because Facebook and Google follow RESTful conventions so it is easy to talk with data. You can just get a json object from a get request and then use specific properties of that json object to then talk to the Google Maps API.</p>

<h1><strong>So what are some of the guidelines of REST?</strong></h1>

<p><strong><em>(I am going to assume the usage of the http/https protocol, for simplicity&rsquo;s sake and the fact that it is by far the most common protocol today)</em></strong></p>

<ol>
<li><p><strong>You have Resources and URIs that make sense</strong><br/>
You should have resources and those resources should be properly named and represented with the URI. This is probably best explained with examples.<br/>
<strong><em>example1</em></strong> <a href="http://nbastalk.com">http://nbastalk.com</a> is a prolific and dynamic web site where you can view a nba player&rsquo;s recent social media feed (twitter/facebook), youtube videos, and recent sports statistics. To view a certain player&rsquo;s (players is a resource) profile, all you would  need to go is <a href="http://nbastalk.com/carmelo-anthony  ">http://nbastalk.com/carmelo-anthony  </a>
That is very logical and makes sense, while <a href="http://nbastalk.com/fasfs1/ssdfas3434/155">http://nbastalk.com/fasfs1/ssdfas3434/155</a> to view Carmelo&rsquo;s profile does not. Try them both, you may be in for a fun surprise.<br/>
<strong><em>example2</em></strong> If you have nested resources, the same rule applies. If you have states with different political groups and you wanted to see all the political groups for NY, the URL of the listing of the political groups resource should look something like this:<br/>
<a href="http://fake-political-data-api-website.com/ny/political-groups">http://fake-political-data-api-website.com/ny/political-groups</a></p></li>
<li><p><strong>Uniform Interface (Correct usage of the HTTP verbs get, post, put, delete) </strong></p>

<ul>
<li>get requests are expected to retrieve information</li>
<li>post requests are expected to create new data</li>
<li>put requests are expected to update data</li>
<li>delete requests are expected to delete data</li>
<li>(fyi head requests are just like get requests except that the server returns an empty body (just returns the header  information))</li>
</ul>


<p> Using these requests, the server is able to deliver and receive information without the client having to know how the information is being constructed. This is encapsulation at its best. Through a uniform interface, the server abstracts away the inner complexities of the application.</p></li>
<li><p><strong>Stateless, Hypertext As The Engine Of Application State (HATEOAS)</strong><br/>
Every individual request from the client to the server must contain all the information necessary information to understand the request. Everything necessary should be in the response body and head. You cannot rely on a server to store context (think sessions, cookies and pstore as things that shouldn&rsquo;t be relied on). Each individual response from the server should have links with what you can do with that resource.</p>

<pre><code>   Request
   GET /
   Accept: application/json+userdb
   Response
   200 OK
   Content-Type: application/json+userdb

   {
       "version": "1.0",
       "links": [
           {
               "href": "/user",
               "rel": "list",
               "method": "GET"
           },
           {
               "href": "/user",
               "rel": "create",
               "method": "POST"
           }
       ]
   }
</code></pre></li>
<li><p><strong>Cacheable</strong><br/>
Resources should be cachable when possible as this decreases response time from server to client. The protocol should specify which resources can be cached and for how long.</p></li>
<li><p><strong>Free format/Does not specify implementation details</strong><br/>
Let the user dictate what kind of mime the info is passed in. Don&rsquo;t force a user to have to parse your xml into   json. Worse, imagine if the user is forced to change his app to handle specific data just to use your api. If your api is set up correctly, the client should be able to specify what kind of response they want.<br/>
Try submitting a GET request to (or just go to the following urls) the following:<br/>
<a href="http://www.reddit.com/.json">http://www.reddit.com/.json</a>  <br/>
<a href="http://www.reddit.com/.xml">http://www.reddit.com/.xml</a></p></li>
</ol>


<p>See below how the Rails framework does this for us:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">def</span> <span class="nf">index</span>
</span><span class='line'>  <span class="vi">@users</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">all</span>
</span><span class='line'>  <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><span class='line'>    <span class="nb">format</span><span class="o">.</span><span class="n">html</span>
</span><span class='line'>    <span class="nb">format</span><span class="o">.</span><span class="n">xml</span> <span class="p">{</span> <span class="n">render</span> <span class="ss">:xml</span> <span class="o">=&gt;</span> <span class="vi">@users</span> <span class="p">}</span>
</span><span class='line'>    <span class="nb">format</span><span class="o">.</span><span class="n">json</span> <span class="p">{</span> <span class="n">render</span> <span class="ss">:json</span> <span class="o">=&gt;</span> <span class="vi">@users</span> <span class="p">}</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<h1><strong>CONCLUSION</strong></h1>

<p>So next time you build an API, don&rsquo;t rest until you make sure your API is RESTful.  Or you can always go the SOAP (a well engineered, but much more complex architectural pattern) route but be prepared to your hands dirty first as it is a lot more complex.</p>

<p><img src="http://img0.etsystatic.com/015/0/7498614/il_340x270.467321836_3890.jpg" title="SOAP" alt="Getting Dirty and using SOAP" /></p>

<p>THIS IS AN EXAMPLE OF A SOAP REQUEST
    &lt;?xml version=&ldquo;1.0&rdquo;?>
    &lt;soap:Envelope
    xmlns:soap=&ldquo;<a href="http://www.w3.org/2001/12/soap-envelope">http://www.w3.org/2001/12/soap-envelope</a>&rdquo;
    soap:encodingStyle=&ldquo;<a href="http://www.w3.org/2001/12/soap-encoding">http://www.w3.org/2001/12/soap-encoding</a>&rdquo;>
     &lt;soap:body pb=&ldquo;<a href="http://www.nbastalk.com/carmelo-anthony">http://www.nbastalk.com/carmelo-anthony</a>&rdquo;>
      &lt;pb:GetUserDetails>
       &lt;pb:UserID>12345&lt;/pb:UserID>
      &lt;/pb:GetUserDetails>
     &lt;/soap:Body>
    &lt;/soap:Envelope></p>

<p>THIS IS REST<br/>
    <a href="http://nbastalk.com/carmelo-anthony/UserDetails/12345">http://nbastalk.com/carmelo-anthony/UserDetails/12345</a></p>

<p><strong>Good links to checkout if you want to learn more about REST:</strong><br/>
1. <a href="http://stackoverflow.com/questions/671118/what-exactly-is-restful-programming/671132#671132">Stackoverflow thread</a><br/>
2. <a href="http://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf">Roy Fielding&rsquo;s Dissertation</a><br/>
3. <a href="http://timelessrepo.com/haters-gonna-hateoas">Steve Klabnik&rsquo;s post on REST</a><br/>
4. <a href="http://www.makeuseof.com/tag/api-good-technology-explained/">Pretty good post explaining APIs</a></p>

<dl>
<dt>*</dt>
<dt>Difference between URI and URL</dt>
<dd>the difference between a uri and an url is that the url includes an &ldquo;access mechanism protocol&rdquo;, or &ldquo;network location&rdquo;, e.g. <a href="http://">http://</a> or  <a href="ftp://">ftp://</a>)</dd>
</dl>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[BASHing Commands from Within a Ruby Script]]></title>
    <link href="http://jamesjtong.github.io/blog/2013/11/20/bashing-commands-from-within-a-ruby-script/"/>
    <updated>2013-11-20T10:21:00-05:00</updated>
    <id>http://jamesjtong.github.io/blog/2013/11/20/bashing-commands-from-within-a-ruby-script</id>
    <content type="html"><![CDATA[<p>Recently, I wanted to create a blackjack program that incorporates a real life blackjack card-counting situation. It needed to be realistic so it would need a pause. Additionally, I wanted it to clear the screen every once in a while so that the user won&rsquo;t be overwhelmed with the heavy text from previous rounds. I realized that some of the bash commands would be an instant remedy to my problems. Then, I wondered what is the best way to incorporate these bash commands in my script. The 3 ways that I know are using</p>

<p>1) Using system<br/>
    system(&lsquo;ls&rsquo;)</p>

<p>2) Using backticks <code>  
   </code>ls`</p>

<p>3) Using built in syntax %x()<br/>
 NOTE: that for x you can replace it with any character; it just acts as a delimiter<br/>
     %x(ls)</p>

<p>There are subtle differences between these 3. The most important difference is regarding there return values. System returns true or false depending on if the command was able to be executed, while the other 2 return the result of the backtick command. This is an extremely important distinction as my &lsquo;clear&rsquo; command in my blackjack game would not work with backticks or the built in syntax. This is because clear needs tooutputs ANSI sequences to clear the screen; if I just returned clear (using backticks or the build in syntax), my screen would not get cleared.If I wanted it to be executed correctly, I would need to do a system(&lsquo;clear&rsquo;); the other 2 ways of bashing commands wouldn&rsquo;t work.</p>

<p>An actual code snippet from my Counting Cards Blackjack Game, utilizing BASHing within a Ruby Script:</p>

<pre><code>def dealer_hits_until_17
  @new_hand = false
  while hand_score(@dealer_hand) &lt; 17 &amp;&amp; @new_hand == false
    puts "Dealer Hits! His hand is now #{@dealer_hand}"
    system('clear')
    hit(@dealer_hand)
    `sleep 1`
  end
  if @new_hand == false
    compare_hand_value
  end
end
</code></pre>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Pry - IRB's Smarter Younger Brother]]></title>
    <link href="http://jamesjtong.github.io/blog/2013/10/10/pry-irbs-younger-brother/"/>
    <updated>2013-10-10T11:58:00-04:00</updated>
    <id>http://jamesjtong.github.io/blog/2013/10/10/pry-irbs-younger-brother</id>
    <content type="html"><![CDATA[<hr />

<p>Pry is one of my favorite gems. It is a REPL (it reads, evaluates, prints, loops). Pry is a replacement for Ruby&rsquo;s default REPL, irb. Pry&rsquo;s advantages over irb are Pry adds additional features such as syntax-highlighting, auto indenting, and super useful debugging features. To install pry and its plugins (in this guide, I will also be using pry-byebug), perform the following commands:</p>

<pre><code>$ gem install pry  
$ gem install pry-byebug
</code></pre>

<p>Once you have those gems installed, you can enter into a session with pry, by just typing pry in your Terminal.</p>

<pre><code>$ pry
</code></pre>

<p>My absolute favorite feature of pry is its ability to load any portion of a file you are working on in your text editor directly into your REPL session. Let&rsquo;s say you are working in sublime text 2, so below is your prime.rb file:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#prime.rb</span>
</span><span class='line'><span class="k">def</span> <span class="nf">prime?</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class='line'>  <span class="p">(</span><span class="mi">1</span><span class="o">.</span><span class="n">.</span><span class="p">(</span><span class="n">num</span><span class="o">/</span><span class="mi">2</span><span class="p">))</span><span class="o">.</span><span class="n">select</span> <span class="p">{</span><span class="o">|</span><span class="n">element</span><span class="o">|</span> <span class="n">num</span> <span class="o">%</span> <span class="n">element</span> <span class="o">==</span> <span class="mi">0</span><span class="p">}</span><span class="o">.</span><span class="n">length</span> <span class="o">==</span> <span class="mi">1</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'><span class="nb">binding</span><span class="o">.</span><span class="n">pry</span>
</span><span class='line'><span class="k">def</span> <span class="nf">every_prime</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class='line'>  <span class="p">(</span><span class="mi">1</span><span class="o">.</span><span class="n">.num</span><span class="p">)</span><span class="o">.</span><span class="n">each</span> <span class="p">{</span><span class="o">|</span><span class="n">element</span><span class="o">|</span> <span class="nb">puts</span> <span class="s2">&quot;</span><span class="si">#{</span><span class="n">element</span><span class="si">}</span><span class="s2"> is a prime? </span><span class="si">#{</span><span class="n">prime?</span><span class="p">(</span><span class="n">element</span><span class="p">)</span><span class="si">}</span><span class="s2"> &quot;</span><span class="p">}</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>If I wanted to play around with these methods, I normally would have had to copy and paste everything into my REPL session. Right now, this doesn&rsquo;t seem like a big issue for my file as it is literally less than 10 lines long. However, imagine if I had a file that contains thousands of lines. Try copying and pasting something like that into your terminal (Don&rsquo;t actually try it, it may take a while).</p>

<p>So how does pry tackle this problem?<br/>
<em>binding.pry</em></p>

<p>So how do we use binding.pry?</p>

<p>The way you do this is by requiring the pry gem at the beginning of the file and then use binding.pry wherever you want to REPL to load into.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#prime.rb</span>
</span><span class='line'><span class="k">def</span> <span class="nf">prime?</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class='line'>  <span class="p">(</span><span class="mi">1</span><span class="o">.</span><span class="n">.</span><span class="p">(</span><span class="n">num</span><span class="o">/</span><span class="mi">2</span><span class="p">))</span><span class="o">.</span><span class="n">select</span> <span class="p">{</span><span class="o">|</span><span class="n">element</span><span class="o">|</span> <span class="n">num</span> <span class="o">%</span> <span class="n">element</span> <span class="o">==</span> <span class="mi">0</span><span class="p">}</span><span class="o">.</span><span class="n">length</span> <span class="o">==</span> <span class="mi">1</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'><span class="nb">binding</span><span class="o">.</span><span class="n">pry</span>
</span><span class='line'><span class="k">def</span> <span class="nf">every_prime</span><span class="p">(</span><span class="n">num</span><span class="p">)</span>
</span><span class='line'>  <span class="p">(</span><span class="mi">1</span><span class="o">.</span><span class="n">.num</span><span class="p">)</span><span class="o">.</span><span class="n">each</span> <span class="p">{</span><span class="o">|</span><span class="n">element</span><span class="o">|</span> <span class="nb">puts</span> <span class="s2">&quot;</span><span class="si">#{</span><span class="n">element</span><span class="si">}</span><span class="s2"> is a prime? </span><span class="si">#{</span><span class="n">prime?</span><span class="p">(</span><span class="n">element</span><span class="p">)</span><span class="si">}</span><span class="s2"> &quot;</span><span class="p">}</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p><em>(notice how we put &ldquo;binding.pry&rdquo; after our first method &ldquo;prime?(num)&rdquo;; this causes the repl to only load the first method. If we wanted to play around with the &ldquo;every_prime(num)&rdquo; method, then we would have to put change the location of &ldquo;binding.pry to the end of the file.).</em></p>

<p>All we need to do now is type &ldquo;ruby primes.rb&rdquo; in our terminal.</p>

<pre><code>$ ruby primes.rb
</code></pre>

<p>Ok, so we&rsquo;ve went through pry a little. Now, let&rsquo;s go through pry-byebug(use pry-debugger for ruby versions before 2.0).  We use pry-byebug in much the same way as using pry. Pry-byebug is really useful if you want to step through loops. Pry lets you see what certain variables are equal to at different points of your code.</p>

<p>To realize the full utility of pry-byebug, let&rsquo;s take a look at slightly more complex and messy code.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#pigeon_organizer.rb</span>
</span><span class='line'><span class="nb">require</span> <span class="s1">&#39;pry&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="n">pigeon_data</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="ss">:color</span> <span class="o">=&gt;</span> <span class="p">{</span>
</span><span class='line'>    <span class="ss">:purple</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Theo&quot;</span><span class="p">,</span> <span class="s2">&quot;Peter Jr.&quot;</span><span class="p">,</span> <span class="s2">&quot;Lucky&quot;</span><span class="o">]</span><span class="p">,</span>
</span><span class='line'>    <span class="ss">:grey</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Theo&quot;</span><span class="p">,</span> <span class="s2">&quot;Peter Jr.&quot;</span><span class="p">,</span> <span class="s2">&quot;Ms .K&quot;</span><span class="o">]</span><span class="p">,</span>
</span><span class='line'>    <span class="ss">:white</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Queenie&quot;</span><span class="p">,</span> <span class="s2">&quot;Andrew&quot;</span><span class="p">,</span> <span class="s2">&quot;Ms .K&quot;</span><span class="p">,</span> <span class="s2">&quot;Alex&quot;</span><span class="o">]</span><span class="p">,</span>
</span><span class='line'>    <span class="ss">:brown</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Queenie&quot;</span><span class="p">,</span> <span class="s2">&quot;Alex&quot;</span><span class="o">]</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="ss">:gender</span> <span class="o">=&gt;</span> <span class="p">{</span>
</span><span class='line'>    <span class="ss">:male</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Alex&quot;</span><span class="p">,</span> <span class="s2">&quot;Theo&quot;</span><span class="p">,</span> <span class="s2">&quot;Peter Jr.&quot;</span><span class="p">,</span> <span class="s2">&quot;Andrew&quot;</span><span class="p">,</span> <span class="s2">&quot;Lucky&quot;</span><span class="o">]</span><span class="p">,</span>
</span><span class='line'>    <span class="ss">:female</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Queenie&quot;</span><span class="p">,</span> <span class="s2">&quot;Ms .K&quot;</span><span class="o">]</span>
</span><span class='line'>  <span class="p">},</span>
</span><span class='line'>  <span class="ss">:lives</span> <span class="o">=&gt;</span> <span class="p">{</span>
</span><span class='line'>    <span class="s2">&quot;Subway&quot;</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Theo&quot;</span><span class="p">,</span> <span class="s2">&quot;Queenie&quot;</span><span class="o">]</span><span class="p">,</span>
</span><span class='line'>    <span class="s2">&quot;Central Park&quot;</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Alex&quot;</span><span class="p">,</span> <span class="s2">&quot;Ms .K&quot;</span><span class="p">,</span> <span class="s2">&quot;Lucky&quot;</span><span class="o">]</span><span class="p">,</span>
</span><span class='line'>    <span class="s2">&quot;Library&quot;</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Peter Jr.&quot;</span><span class="o">]</span><span class="p">,</span>
</span><span class='line'>    <span class="s2">&quot;City Hall&quot;</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="s2">&quot;Andrew&quot;</span><span class="o">]</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="k">def</span> <span class="nf">reorganize</span><span class="p">(</span><span class="n">data</span><span class="p">)</span>
</span><span class='line'>  <span class="n">new_hash</span><span class="o">=</span><span class="p">{}</span>
</span><span class='line'>  <span class="n">data</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">attribute</span><span class="p">,</span> <span class="n">specific_attrib</span><span class="o">|</span>
</span><span class='line'>    <span class="n">specific_attrib</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">specific_attrib</span><span class="p">,</span> <span class="n">birds_array</span><span class="o">|</span>
</span><span class='line'>      <span class="n">birds_array</span><span class="o">.</span><span class="n">each</span> <span class="k">do</span> <span class="o">|</span><span class="n">bird</span><span class="o">|</span>
</span><span class='line'>        <span class="nb">binding</span><span class="o">.</span><span class="n">pry</span>
</span><span class='line'>        <span class="n">new_hash</span><span class="o">[</span><span class="n">bird</span><span class="o">]</span> <span class="o">||=</span> <span class="p">{}</span>
</span><span class='line'>        <span class="k">if</span> <span class="n">data</span><span class="o">[</span><span class="n">attribute</span><span class="o">][</span><span class="n">specific_attrib</span><span class="o">].</span><span class="n">include?</span><span class="p">(</span><span class="n">bird</span><span class="p">)</span>
</span><span class='line'>          <span class="k">if</span> <span class="n">attribute</span> <span class="o">!=</span> <span class="ss">:color</span>
</span><span class='line'>            <span class="n">new_hash</span><span class="o">[</span><span class="n">bird</span><span class="o">][</span><span class="n">attribute</span><span class="o">]</span> <span class="o">||=</span> <span class="n">specific_attrib</span><span class="o">.</span><span class="n">to_s</span>
</span><span class='line'>          <span class="k">else</span>
</span><span class='line'>            <span class="k">if</span> <span class="n">new_hash</span><span class="o">[</span><span class="n">bird</span><span class="o">][</span><span class="n">attribute</span><span class="o">]</span>
</span><span class='line'>              <span class="n">new_hash</span><span class="o">[</span><span class="n">bird</span><span class="o">][</span><span class="n">attribute</span><span class="o">].</span><span class="n">push</span><span class="p">(</span><span class="n">specific_attrib</span><span class="o">.</span><span class="n">to_s</span><span class="p">)</span>
</span><span class='line'>            <span class="k">else</span>
</span><span class='line'>              <span class="n">new_hash</span><span class="o">[</span><span class="n">bird</span><span class="o">][</span><span class="n">attribute</span><span class="o">]</span> <span class="o">=</span> <span class="o">[</span><span class="n">specific_attrib</span><span class="o">.</span><span class="n">to_s</span><span class="o">]</span>
</span><span class='line'>            <span class="k">end</span>
</span><span class='line'>          <span class="k">end</span>
</span><span class='line'>        <span class="k">end</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>  <span class="n">new_hash</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="n">reorganize</span><span class="p">(</span><span class="n">pigeon_data</span><span class="p">)</span>
</span></code></pre></td></tr></table></div></figure>


<p>What pry-byebug allows you to do is to step through your code. Notice how I put my binding.pry in the middle of my method. I do this so that when I open my file I go to that specific line of my code. I use pry so that I am able to see what variables equal at that specific point of code. This is extremely useful for debugging. Now open your ruby file again normally:</p>

<pre><code>$ ruby pigeon_organizer.rb
</code></pre>

<p>You will end up with something like this:</p>

<p><img src="http://jamesjtong.github.io/images/screenshotforpry.png"></p>

<p>First type &lsquo;q&rsquo; to enter back into your pry session.
    q</p>

<p>You can see a group of your local variables/methods with the &lsquo;ls&rsquo; command. You can even type in the name of the variable to see what it is currently defined as (shown below).</p>

<p><img src="http://jamesjtong.github.io/images/pryss2.png"></p>

<p>As this is just an intro. to Pry and Pry-byebug and there are so many different things to learn about them, I will let you explore these two gems on your own. In this pry session, some other commands that you may want to try on your own are &lsquo;help&rsquo;, &lsquo;cd&rsquo;, &lsquo;quit&rsquo;, &lsquo;step&rsquo;, &lsquo;next&rsquo;.</p>

<h2><strong>Other resources</strong></h2>

<p>Watch this video <a href="http://www.youtube.com/watch?v=A494WFSi6HU">Pry by Railscasts</a><br/>
Read more about pry at <a href="https://github.com/pry/pry">Pry github repo</a><br/>
Read more about pry-byebug at <a href="https://github.com/deivid-rodriguez/pry-byebug">Pry-byebug github repo</a></p>

<p>Thanks for reading!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Resources to Learn Ruby/Rails Programming from Scratch]]></title>
    <link href="http://jamesjtong.github.io/blog/2013/09/20/resources-to-learn-ruby-slash-rails-programming-from-scratch/"/>
    <updated>2013-09-20T14:53:00-04:00</updated>
    <id>http://jamesjtong.github.io/blog/2013/09/20/resources-to-learn-ruby-slash-rails-programming-from-scratch</id>
    <content type="html"><![CDATA[<p>Today, I am going to be talking a little bit about the different resources that I used to learn programming/web development.</p>

<p>Web Learning:
Udacity-This site has a lot of courses. The course that I took here was Intro. to Computer Science. I feel that this course is a great first step into programming. The quality of instructor, TA, and course material are top-notch. Please note that this course is taught in Python. As of writing this review, Udacity is still free. I definitely have no complaints about this site.  10/10</p>

<p>Codecademy- This is a great site to start at if you have never coded before. It is currently free. I also noticed that it has quite a few bugs. I really enjoyed the content, especially the Ruby course. For a free site, it is good. 8/10</p>

<p>Codeschool- I prefer this site over Team Treehouse. Some of the material on this site CAN be difficult at first. The transition between courses in the same path can be challenging. For example, even after finishing Try Ruby, you may find it tough to finish Ruby Bits (parts 1 and 2). It is best to go through a real book (see below) first after Try Ruby. I wouldn&rsquo;t recommend starting out at this site for beginners as a lot of the courses assume that you have basic programming knowledge.However, this is the site to work on once you have the fundamentals down. The content in the videos are very condensed. The quality of the instructors is top-notch. 9/10</p>

<p>Team Treehouse-This site is Okay. The instruction on this site is definitely a lot more in-depth than Codeschool, making it the more beginner-friendly choice. There are whole sections dedicated Also, I feel that some of the materials on this site are a bit outdated. I was super confused in their MySQL tutorial where they asked me to install a certain SQL GUI that was no longer on the MySQL site.  6/10</p>

<p>Rubeque: This site is good for solving problems with the knowledge that you are gaining from other places. Definitely aim to complete a few problems a week on this site.
9/10</p>

<p>Books:
Peter Cooper&rsquo;s Beginning Ruby-This is an excellent book for beginners. It goes through everything in-depth and I like that it has example programs that walk you through building real programs.
9/10</p>

<p>Chris Pine&rsquo;s Learn to Program-Another great book that is available for free on the web. It is very well-written and helpful for learning the basics.
10/10</p>

<p>Michael Hartl&rsquo;s Rails Tutorial Book-Rails is complex and I believe that this is the best introduction to Rails. This is a &ldquo;must-go-through&rdquo; if you are starting Rails. 10/10</p>

<p>Besides these websites/books, there is a myriad of resources out there. In conjunction with resources, you should also work projects. Simple ones such as creating a tic tac toe game, blackjack game, chat box, or even a bot are great examples of projects that you can work on.</p>

<p>If I were to do it all over again and start learning Ruby/Rails from scratch, I would go through my resources in the following order:</p>

<ol>
<li> Chris Pine&rsquo;s Learn to Program and some of Codecademy or Team Treehouse
a) (Optional) Udacity&rsquo;s Intro to Computer Science</li>
<li> Peter Cooper&rsquo;s Beginning Ruby
a) Create a simple programming project</li>
<li> Codeschool</li>
<li> Michael Hartl&rsquo;s Rails Tutorial</li>
<li> More Codeschool</li>
<li> Create a Web App with Rails</li>
</ol>


<p>Thanks for reading and happy programming!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Start of My Blog]]></title>
    <link href="http://jamesjtong.github.io/blog/2013/09/11/start-of-my-blog/"/>
    <updated>2013-09-11T10:57:00-04:00</updated>
    <id>http://jamesjtong.github.io/blog/2013/09/11/start-of-my-blog</id>
    <content type="html"><![CDATA[<p>Today, I am going to start blogging about my journey in learning web development and computer programming. This journey started a few months ago as I decided I wanted a career in which I was constantly learning and constantly building.</p>

<p>To achieve my goal, I started doing web tutorials at codecacademy, rubymonk, codeschool, teamtreehouse. Along the way, I also read a few books including Peter Cooper&rsquo;s Beginning Ruby, eloquentjavascript, Chris Pine&rsquo;s learn to program. (I will review each of these sources in-depth in a future post).</p>

<p>After some time self-studying, I read an article about programming bootcamps and how they were revolutionizing learning. Excited about the prospect of an intense &ldquo;bootcamp-like&rdquo; learning experience, I did a lot of research on the different schools and started applying to many. I ended up choosing the Flatiron School. In this blog, I will post about some of the cool things that I learn along the way.</p>

<p>If anyone has any questions regarding my posts or my experiences, feel free to email me at <a href="&#x6d;&#97;&#x69;&#108;&#x74;&#111;&#58;&#106;&#x74;&#111;&#x6e;&#103;&#x33;&#51;&#64;&#103;&#x6d;&#97;&#x69;&#108;&#46;&#x63;&#111;&#x6d;">&#x6a;&#x74;&#111;&#x6e;&#x67;&#x33;&#x33;&#64;&#103;&#x6d;&#97;&#x69;&#x6c;&#x2e;&#x63;&#111;&#x6d;</a></p>
]]></content>
  </entry>
  
</feed>