Raj AnandJekyll2021-05-24T11:27:18+05:30https://hacktivist.in/Raj Anandhttps://hacktivist.in/rajanand@fsftn.orghttps://hacktivist.in/articles/React-es6-constructor-super2016-10-16T00:00:00+05:302016-10-16T00:00:00+05:30Raj Anandhttps://hacktivist.inrajanand@fsftn.org<p>I have seen people getting super confused when comes to ES6 <code class="language-plaintext highlighter-rouge">constructor</code> and <code class="language-plaintext highlighter-rouge">super</code> keyword, especially with <code class="language-plaintext highlighter-rouge">React</code>.</p>
<p>The most common questions are</p>
<ol>
<li>Do we need to a have a <code class="language-plaintext highlighter-rouge">constructor</code> in every component ?</li>
<li>Do we need to call <code class="language-plaintext highlighter-rouge">super()</code> inside a constructor?</li>
<li>What is the deal with <code class="language-plaintext highlighter-rouge">super()</code> vs <code class="language-plaintext highlighter-rouge">super(props)</code> ?</li>
</ol>
<p>Let’s go over the questions one by one.</p>
<blockquote>
<p>Do we need to have a <code class="language-plaintext highlighter-rouge">constructor</code> in every component?</p>
</blockquote>
<p>The answer is <code class="language-plaintext highlighter-rouge">NO</code>. if your component is not so complex and it simply returns a node you don’t need a constructor at all.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="kd">class</span> <span class="nx">Name</span> <span class="kd">extends</span> <span class="nx">Component</span> <span class="p">{</span>
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">p</span><span class="o">></span> <span class="nx">Name</span><span class="p">:</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span> <span class="p">}</span><span class="o"><</span><span class="sr">/p</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>if you have very simple component like the above you don’t even need a <code class="language-plaintext highlighter-rouge">class</code>. It could be simple plain javascript function.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">Name</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">p</span><span class="o">></span> <span class="nx">Name</span><span class="p">:</span> <span class="p">{</span> <span class="nx">name</span> <span class="p">}</span> <span class="o"><</span><span class="sr">/p</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<p>if you would like to know why we need a constructor in the first place, I would highly recommend you to head over and read about <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes">ES6 classes</a>.</p>
<p>Now comes the second most common question</p>
<blockquote>
<p>Do we need to call <code class="language-plaintext highlighter-rouge">super()</code> inside a constructor ?</p>
</blockquote>
<p>The answer is <code class="language-plaintext highlighter-rouge">YES</code>. if you would like to set a property or access <code class="language-plaintext highlighter-rouge">this</code> inside the <code class="language-plaintext highlighter-rouge">constructor</code> you need to call <code class="language-plaintext highlighter-rouge">super()</code>.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">Name</span> <span class="kd">extends</span> <span class="nx">Component</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Jhon</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 'this' is not allowed before super()</span>
<span class="p">}</span>
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">p</span><span class="o">></span> <span class="nx">Name</span><span class="p">:</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span> <span class="p">}</span><span class="o"><</span><span class="sr">/p</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The above component will throw an error saying <code class="language-plaintext highlighter-rouge">'this' is not allowed before super()</code></p>
<p>So now we are clear that we need to call <code class="language-plaintext highlighter-rouge">super()</code> if we need to use <code class="language-plaintext highlighter-rouge">this</code> inside the constructor.</p>
<p>The final and most misunderstood one is</p>
<blockquote>
<p>What is the deal with <code class="language-plaintext highlighter-rouge">super()</code> and <code class="language-plaintext highlighter-rouge">super(props)</code>?</p>
</blockquote>
<p>if you need to access the props inside the <code class="language-plaintext highlighter-rouge">constructor</code> of a <code class="language-plaintext highlighter-rouge">class</code> then you need to call <code class="language-plaintext highlighter-rouge">super(props)</code>.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nx">Name</span> <span class="kd">extends</span> <span class="nx">Component</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">){</span>
<span class="k">super</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">firstName</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">firstName</span><span class="p">;</span> <span class="c1">// here props would be undefined.</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">p</span><span class="o">></span> <span class="nx">Name</span><span class="p">:</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">firstName</span> <span class="p">}</span><span class="o"><</span><span class="sr">/p</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>it is very common in react to get the <code class="language-plaintext highlighter-rouge">props</code> from the parent and set it to the local <code class="language-plaintext highlighter-rouge">state</code> of the component. In that case always call <code class="language-plaintext highlighter-rouge">super()</code> with the <code class="language-plaintext highlighter-rouge">props</code>. ie <code class="language-plaintext highlighter-rouge">super(props)</code>.</p>
<p>If you don’t have the <code class="language-plaintext highlighter-rouge">constructor</code> special method in your class, <code class="language-plaintext highlighter-rouge">React</code> will set <code class="language-plaintext highlighter-rouge">this</code> and <code class="language-plaintext highlighter-rouge">props</code> for you so that you can access the <code class="language-plaintext highlighter-rouge">props</code> inside your <code class="language-plaintext highlighter-rouge">render</code> method as shown in my first example.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="kd">class</span> <span class="nx">Name</span> <span class="kd">extends</span> <span class="nx">Component</span> <span class="p">{</span>
<span class="nx">render</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="nx">p</span><span class="o">></span> <span class="nx">Name</span><span class="p">:</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span> <span class="p">}</span><span class="o"><</span><span class="sr">/p</span><span class="err">>
</span> <span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h5 id="references">References</h5>
<ol>
<li><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes">ES6 classes</a></li>
<li><a href="https://github.com/airbnb/javascript/tree/master/react#class-vs-reactcreateclass-vs-stateless">Airbnb react style guide</a></li>
<li><a href="https://discuss.reactjs.org/t/should-we-include-the-props-parameter-to-class-constructors-when-declaring-components-using-es6-classes/2781">React discussion forum</a></li>
</ol>
<p><a href="https://hacktivist.in/articles/React-es6-constructor-super">React ES6 Constructor and super keyword</a> was originally published by Raj Anand at <a href="https://hacktivist.in">Raj Anand</a> on October 16, 2016.</p>https://hacktivist.in/articles/Simple-crud-app-in-meteor2014-03-18T00:00:00+05:302014-03-18T00:00:00+05:30Raj Anandhttps://hacktivist.inrajanand@fsftn.org<p>We have seen some introduction about Meteor in the previous article now let’s create a simple application where user can able to <em>C</em>reat, <em>R</em>ead, <em>U</em>pdate and <em>D</em>elete contents..</p>
<h4 id="create">Create</h4>
<p>` mrt create meteor-crud `</p>
<p>Lets remove the default content..</p>
<figure>
<img src="/images/create.gif" />
</figure>
<p>we are going to use <a href="http://beta.atmospherejs.com/package/bootstrap-flatly" target="_blank"> <strong>bootstrap-flatly</strong></a> theme for ui and CoffeeScript to write template manager..</p>
<figure>
<img src="/images/coffee-bootstrap.gif" />
</figure>
<p>First we can prepare our HTML file to render the posts then we can use our template manager to make the content reactive..</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"> # posts.html
<span class="nt"><head></span>
<span class="nt"><title></span>meteor-crud<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 col-md-offset-3"</span><span class="nt">></span>
{{> postForm}}
{{> posts}}
<span class="nt"></div></span>
<span class="nt"></body></span></code></pre></figure>
<p>we have created two <a href="http://handlebarsjs.com/" target="_blank">handlebar templates</a> here, one to hold the form to enter the post and another one to show the posts.</p>
<p>now we can break these into individual templates and start filling it with required html contents.</p>
<h4 id="postform-template">postForm Template</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><template</span> <span class="na">name=</span><span class="s">"postForm"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">></span>Create post<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"content"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-success"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Create<span class="nt"></button></span>
<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span></code></pre></figure>
<p>here we have created one input box with id <strong>content</strong> and one button to submit the post..</p>
<h4 id="posts-template">posts Template</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><template</span> <span class="na">name=</span><span class="s">"posts"</span><span class="nt">></span>
{{#each post}}
{{> post}}
{{/each}}
<span class="nt"></template></span></code></pre></figure>
<p>in posts template we have created a template helper called <strong>post</strong> to iterate through each post in the database collection and render the <strong>post</strong> template..</p>
<h4 id="post-template">post Template</h4>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><template</span> <span class="na">name=</span><span class="s">"post"</span><span class="nt">></span>
{{#if editing}}
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"{{content}}"</span> <span class="nt">/></span>
{{else}}
<span class="nt"><p></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"content col-md-10"</span> <span class="na">id=</span><span class="s">"edit"</span> <span class="nt">></span>{{content}} <span class="nt"></span></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-danger"</span> <span class="na">id=</span><span class="s">"delete"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Delete<span class="nt"></button></span>
<span class="nt"></p></span>
{{/if}}
<span class="nt"></template></span></code></pre></figure>
<p>in post template we have created a simple state called <strong>editing</strong> where the user is editing the content of the post..</p>
<p>if editing is set to true we are going to display an input box to change the content, otherwise a list of posts with a delete button.</p>
<p>Our final posts.html file would be like this.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"># posts.html
<span class="nt"><head></span>
<span class="nt"><title></span>meteor-crud<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 col-md-offset-3"</span><span class="nt">></span>
{{> postForm}}
{{> posts}}
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"><template</span> <span class="na">name=</span><span class="s">"postForm"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">></span>Create post<span class="nt"></label></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"content"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-success"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Create<span class="nt"></button></span>
<span class="nt"></span></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"><template</span> <span class="na">name=</span><span class="s">"posts"</span><span class="nt">></span>
{{#each post}}
{{> post}}
{{/each}}
<span class="nt"></template></span>
<span class="nt"><template</span> <span class="na">name=</span><span class="s">"post"</span><span class="nt">></span>
{{#if editing}}
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"{{content}}"</span> <span class="nt">/></span>
{{else}}
<span class="nt"><p></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"content col-md-10"</span> <span class="na">id=</span><span class="s">"edit"</span> <span class="nt">></span>{{content}} <span class="nt"></span></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-danger"</span> <span class="na">id=</span><span class="s">"delete"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Delete<span class="nt"></button></span>
<span class="nt"></p></span>
{{/if}}
<span class="nt"></template></span></code></pre></figure>
<p><small> check the code in <a href="https://github.com/rajanand02/meteor-crud/blob/master/posts.html" target="_blank">github</a></small></p>
<p>now fire up the meteor server by executing <code class="language-plaintext highlighter-rouge">mrt</code> command inside <code class="language-plaintext highlighter-rouge">/meteor-crud</code> directory..
if you have done everything correctly you should see something similar to this in your browser</p>
<figure>
<a href="http://rajanand02.github.io/images/posts_page.png" target="_blank">
<img src="/images/posts_page.png" />
</a>
</figure>
<p>Let’s add a bootstrap navigation bar before our <em>postForm</em> template to make the app more elegant..</p>
<h5 id="navbar">navbar</h5>
<figure class="highlight"><pre><code class="language-html" data-lang="html">#post.html
...
...
<span class="nt"><body></span>
{{> navbar}}
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 col-md-offset-3"</span><span class="nt">></span>
{{> postForm}}
{{> posts}}
<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"><template</span> <span class="na">name=</span><span class="s">"navbar"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar navbar-inverse"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-header"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"navbar-toggle"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".navbar-inverse-collapse"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"></button></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Meteor Crud<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
...
...</code></pre></figure>
<p>now our posts.html file should be like this..</p>
<figure>
<a href="http://rajanand02.github.io/images/post_page2.png" target="_blank">
<img src="/images/posts_page2.png" />
</a>
</figure>
<p>Its time to make our static html template reactive using our posts.coffee template manager ..</p>
<p>First let’s create a MongoDB collection to hold the posts in the database..</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="vi">@Post</span> <span class="o">=</span> <span class="n">new</span> <span class="no">Meteor</span><span class="o">.</span><span class="no">Collection</span> <span class="s2">"post"</span>
<span class="k">if</span> <span class="no">Meteor</span><span class="p">.</span><span class="nf">isClient</span>
<span class="o">...</span>
<span class="o">...</span></code></pre></figure>
<p>we just created a MongoDB collection called <strong>post</strong> using the <em>Meteor.Collection</em> method..</p>
<p><small><strong>Note:</strong> This line of code should be outside the <code class="language-plaintext highlighter-rouge">if Meteor.isClient</code> block and we should use ‘@’ to make it global so that the <strong>post</strong> collection would be available to both client and server..</small></p>
<h4 id="create-1">Create</h4>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="no">Template</span><span class="p">.</span><span class="nf">postForm</span><span class="p">.</span><span class="nf">events</span>
<span class="s2">"click button"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="n">data</span> <span class="o">=</span> <span class="n">t</span><span class="p">.</span><span class="nf">find</span> <span class="s2">"#content"</span>
<span class="no">Post</span><span class="p">.</span><span class="nf">insert</span> <span class="ss">content: </span><span class="n">data</span><span class="p">.</span><span class="nf">value</span>
<span class="n">data</span><span class="p">.</span><span class="nf">value</span> <span class="o">=</span> <span class="s2">""</span></code></pre></figure>
<p>Whenever the button inside our <em>postForm</em> template is clicked, we are going find the element with id <strong>“content”</strong> and store its value inside the variable called <strong>data</strong> and then we are inserting the <strong>data</strong> into our <strong>posts</strong> collection using <code class="language-plaintext highlighter-rouge">Post.insert</code> MongoDB command and finally we are setting the value of <strong>data</strong> to null to get the next item..</p>
<p>Now we can able to create posts..</p>
<figure>
<img src="/images/mongo.gif" />
</figure>
<p>The posts doesn’t show up yet in our page but we could see the post inside the mongo console by running <code class="language-plaintext highlighter-rouge">meteor mongo</code> inside <code class="language-plaintext highlighter-rouge">/meteor-crud</code> directory..</p>
<p><small><strong>Note:</strong> your meteor server should be running while opening mongo console</small></p>
<p>Now lets make the posts available in our page..</p>
<h4 id="read">Read</h4>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="no">Template</span><span class="p">.</span><span class="nf">posts</span><span class="p">.</span><span class="nf">post</span> <span class="o">=</span> <span class="o">-></span>
<span class="no">Post</span><span class="p">.</span><span class="nf">find</span><span class="p">()</span></code></pre></figure>
<p>We are creating a template helper called <strong>post</strong> that will return the data from <code class="language-plaintext highlighter-rouge">Post.find()</code>..The <code class="language-plaintext highlighter-rouge">Post.find()</code> Mongo query will return a <a href="http://docs.mongodb.org/manual/core/read-operations-introduction/" target="_blank"><em>cursor object</em></a> that has all the posts form the <strong>post</strong> collection. This <strong>post</strong> helpers is used inside the <strong>posts</strong> template to iterate through each posts..</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><template</span> <span class="na">name=</span><span class="s">"posts"</span><span class="nt">></span>
{{#each post}}
{{> post}}
{{/each}}
<span class="nt"></template></span></code></pre></figure>
<p>now all the posts are available in our html template..</p>
<figure>
<img src="/images/allposts.png" />
</figure>
<p>We have completed <em>C</em> and <em>R</em> in <em>CRUD</em>, now lets add <em>D</em>elete function in our template manager..</p>
<h4 id="delete">Delete</h4>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="no">Template</span><span class="p">.</span><span class="nf">post</span><span class="p">.</span><span class="nf">events</span>
<span class="s2">"click #delete"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="n">post</span> <span class="o">=</span> <span class="no">Post</span><span class="p">.</span><span class="nf">findOne</span><span class="p">(</span><span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">)</span>
<span class="no">Post</span><span class="p">.</span><span class="nf">remove</span> <span class="ss">_id: </span><span class="n">post</span><span class="p">.</span><span class="nf">_id</span></code></pre></figure>
<p>Whenever the button with id <strong>“delete”</strong> is clicked, we are finding the target element and storing it in <strong>post</strong> variable and then we are passing its id to remove the post from the collection using <code class="language-plaintext highlighter-rouge">Post.remove</code> Mongo query..</p>
<p><code class="language-plaintext highlighter-rouge">_id</code> is MongoDB unique id for each element in the MongoDB collection..</p>
<figure>
<img src="/images/delete.gif" />
</figure>
<h4 id="update">Update</h4>
<p>Update part is bit tricker than other three operations..</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="no">Template</span><span class="p">.</span><span class="nf">post</span><span class="p">.</span><span class="nf">editing</span> <span class="o">=</span> <span class="o">-></span>
<span class="no">Session</span><span class="p">.</span><span class="nf">get</span> <span class="s2">"target"</span> <span class="o">+</span> <span class="vi">@_id</span>
<span class="no">Template</span><span class="p">.</span><span class="nf">post</span><span class="p">.</span><span class="nf">events</span>
<span class="s2">"click #edit"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="no">Session</span><span class="p">.</span><span class="nf">set</span> <span class="s2">"target"</span> <span class="o">+</span> <span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">.</span><span class="nf">_id</span><span class="p">,</span> <span class="kp">true</span>
<span class="s2">"keypress input"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="k">if</span> <span class="n">e</span><span class="p">.</span><span class="nf">keyCode</span> <span class="n">is</span> <span class="mi">13</span>
<span class="n">post</span> <span class="o">=</span> <span class="no">Post</span><span class="p">.</span><span class="nf">findOne</span><span class="p">(</span><span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">)</span>
<span class="no">Post</span><span class="p">.</span><span class="nf">update</span> <span class="p">{</span><span class="ss">_id: </span><span class="n">post</span><span class="p">.</span><span class="nf">_id</span><span class="p">},</span> <span class="p">{</span> <span class="vg">$set</span><span class="p">:</span> <span class="ss">content: </span><span class="n">e</span><span class="p">.</span><span class="nf">currentTarget</span><span class="p">.</span><span class="nf">value</span><span class="p">}</span>
<span class="no">Session</span><span class="p">.</span><span class="nf">set</span> <span class="s2">"target"</span> <span class="o">+</span> <span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">.</span><span class="nf">_id</span><span class="p">,</span> <span class="kp">false</span></code></pre></figure>
<p>We can split this into three sections</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="c1">#1 setting the editing state</span>
<span class="no">Template</span><span class="p">.</span><span class="nf">post</span><span class="p">.</span><span class="nf">editing</span> <span class="o">=</span> <span class="o">-></span>
<span class="no">Session</span><span class="p">.</span><span class="nf">get</span> <span class="s2">"target"</span> <span class="o">+</span> <span class="vi">@_id</span></code></pre></figure>
<p>Here we are getting the session variable with a key <strong>target</strong> and its value is mongodb <strong>id</strong> field..This will return either true or false based on the session value it gets..</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="c1">#2 change span to input box</span>
<span class="no">Template</span><span class="p">.</span><span class="nf">post</span><span class="p">.</span><span class="nf">events</span>
<span class="s2">"click #edit"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="no">Session</span><span class="p">.</span><span class="nf">set</span> <span class="s2">"target"</span> <span class="o">+</span> <span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">.</span><span class="nf">_id</span><span class="p">,</span> <span class="kp">true</span></code></pre></figure>
<p>In post template whenever the span with id <strong>“edit”</strong> is clicked we are setting the Session variable to <em>true</em> thereby the <strong>“editing”</strong> helper is set to true..As per our html template when <strong>editing</strong> state is enabled, input box would appear instead of span..</p>
<figure>
<img src="/images/input-box.gif" />
</figure>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="c1">#3 updating the post on hitting enter</span>
<span class="s2">"keypress input"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="k">if</span> <span class="n">e</span><span class="p">.</span><span class="nf">keyCode</span> <span class="n">is</span> <span class="mi">13</span>
<span class="n">post</span> <span class="o">=</span> <span class="no">Post</span><span class="p">.</span><span class="nf">findOne</span><span class="p">(</span><span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">)</span>
<span class="no">Post</span><span class="p">.</span><span class="nf">update</span> <span class="p">{</span><span class="ss">_id: </span><span class="n">post</span><span class="p">.</span><span class="nf">_id</span><span class="p">},</span> <span class="p">{</span> <span class="vg">$set</span><span class="p">:</span> <span class="ss">content: </span><span class="n">e</span><span class="p">.</span><span class="nf">currentTarget</span><span class="p">.</span><span class="nf">value</span><span class="p">}</span></code></pre></figure>
<p>Here we are again finding the target element, storing it in <em>post</em> variable and using its id and value to update the appropriate post whenever enter key is pressed inside the input box..(<small> keycode for enter key is 13</small>)</p>
<p>MongoDB update query takes two argument 1. the <em>id</em> of the target element and 2. <em>value</em> to be updated..</p>
<p>MongoDB <code class="language-plaintext highlighter-rouge">$set</code> operator is used to update the collection..</p>
<p>This would be our final post.coffee template manager..</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="vi">@Post</span> <span class="o">=</span> <span class="n">new</span> <span class="no">Meteor</span><span class="o">.</span><span class="no">Collection</span><span class="p">(</span><span class="s2">"post"</span><span class="p">)</span>
<span class="k">if</span> <span class="no">Meteor</span><span class="p">.</span><span class="nf">isClient</span>
<span class="c1"># create</span>
<span class="no">Template</span><span class="p">.</span><span class="nf">postForm</span><span class="p">.</span><span class="nf">events</span>
<span class="s2">"click button"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="n">data</span> <span class="o">=</span> <span class="n">t</span><span class="p">.</span><span class="nf">find</span> <span class="s2">"#content"</span>
<span class="no">Post</span><span class="p">.</span><span class="nf">insert</span> <span class="ss">content: </span><span class="n">data</span><span class="p">.</span><span class="nf">value</span>
<span class="n">data</span><span class="p">.</span><span class="nf">value</span> <span class="o">=</span> <span class="s2">""</span>
<span class="c1"># Read</span>
<span class="no">Template</span><span class="p">.</span><span class="nf">posts</span><span class="p">.</span><span class="nf">post</span> <span class="o">=</span> <span class="o">-></span>
<span class="no">Post</span><span class="p">.</span><span class="nf">find</span><span class="p">()</span>
<span class="c1"># update</span>
<span class="no">Template</span><span class="p">.</span><span class="nf">post</span><span class="p">.</span><span class="nf">editing</span> <span class="o">=</span> <span class="o">-></span>
<span class="no">Session</span><span class="p">.</span><span class="nf">get</span> <span class="s2">"target"</span> <span class="o">+</span> <span class="vi">@_id</span>
<span class="no">Template</span><span class="p">.</span><span class="nf">post</span><span class="p">.</span><span class="nf">events</span>
<span class="s2">"click #edit"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="no">Session</span><span class="p">.</span><span class="nf">set</span> <span class="s2">"target"</span> <span class="o">+</span> <span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">.</span><span class="nf">_id</span><span class="p">,</span> <span class="kp">true</span>
<span class="s2">"keypress input"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="k">if</span> <span class="n">e</span><span class="p">.</span><span class="nf">keyCode</span> <span class="n">is</span> <span class="mi">13</span>
<span class="n">post</span> <span class="o">=</span> <span class="no">Post</span><span class="p">.</span><span class="nf">findOne</span><span class="p">(</span><span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">)</span>
<span class="no">Post</span><span class="p">.</span><span class="nf">update</span> <span class="p">{</span><span class="ss">_id: </span><span class="n">post</span><span class="p">.</span><span class="nf">_id</span><span class="p">},</span> <span class="p">{</span> <span class="vg">$set</span><span class="p">:</span> <span class="ss">content: </span><span class="n">e</span><span class="p">.</span><span class="nf">currentTarget</span><span class="p">.</span><span class="nf">value</span><span class="p">}</span>
<span class="no">Session</span><span class="p">.</span><span class="nf">set</span> <span class="s2">"target"</span> <span class="o">+</span> <span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">.</span><span class="nf">_id</span><span class="p">,</span> <span class="kp">false</span>
<span class="c1"># delete</span>
<span class="s2">"click #delete"</span><span class="p">:</span> <span class="p">(</span><span class="n">e</span><span class="p">,</span> <span class="n">t</span><span class="p">)</span> <span class="o">-></span>
<span class="n">post</span> <span class="o">=</span> <span class="no">Post</span><span class="p">.</span><span class="nf">findOne</span><span class="p">(</span><span class="n">t</span><span class="p">.</span><span class="nf">data</span><span class="p">)</span>
<span class="no">Post</span><span class="p">.</span><span class="nf">remove</span> <span class="ss">_id: </span><span class="n">post</span><span class="p">.</span><span class="nf">_id</span></code></pre></figure>
<p><small> Check the code in <a href="https://github.com/rajanand02/meteor-crud/blob/master/posts.coffee">GitHub</a></small></p>
<p>Since we are using CoffeeScript we don’t have to write <em>return</em> statements and we can also ignore brackets, semicolons etc..</p>
<p>Now our code is pretty clean and it is ready to do <strong>CRUD</strong> operations..</p>
<figure>
<img src="/images/crud-final.gif" />
</figure>
<p>Its time to deploy our app in remote server and see the code in action.. :D</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> mrt deploy meteor-crud.meteor.com
Deploying to meteor-crud.meteor.com. Bundling...
Uploading...
Now serving at meteor-crud.meteor.com</code></pre></figure>
<figure>
<img src="/images/crud-server.gif" />
<figcaption>
Checkout the app in <a href="http://meteor-crud.meteor.com" target="_blank">meteor <strong>server</strong></a> and
get the code from <a href="https://github.com/rajanand02/meteor-crud/" title="" target="_blank"><strong>GitHub</strong></a>
</figcaption>
</figure>
<p>As you can see when we create a post in one browser it is automatically gets updated in other browsers which are connected to the database..We didn’t write a single piece of code to make the content reactive, it is all done by meteor by default..</p>
<p><a href="https://hacktivist.in/articles/Simple-crud-app-in-meteor">Simple Crud app in Meteor</a> was originally published by Raj Anand at <a href="https://hacktivist.in">Raj Anand</a> on March 18, 2014.</p>https://hacktivist.in/articles/Watchout-for-meteor2014-03-16T00:00:00+05:302014-03-16T00:00:00+05:30Raj Anandhttps://hacktivist.inrajanand@fsftn.org<h3 id="meteor">Meteor</h3>
<p>Meteor is a complete web stack built on top of Node.js for building real time web applications..It sits between app’s database and its client and make sure that both are kept in sync..</p>
<h3 id="why-meteor">Why Meteor….?!</h3>
<ul>
<li>Meteor is easy to learn…:D</li>
<li>It is an <a href="http://isomorphic.net/javascript" target="_blank"> isomorphic Javascript</a> platform.</li>
<li>Meteor make it possible to create MVP(Minimum Viable Product) up and running in matter of hours..</li>
<li>No need to learn a new language if you have some prior experience with JavaScript..</li>
<li>It follow Model View View-Modal pattern(not exactly)..</li>
</ul>
<h3 id="history-of-web-applications">History of Web applications..</h3>
<p>Before we jump into the nuts and bolts of meteor it is important to know how web applications evolved..</p>
<h4 id="clientsever-model">Client/Sever model..</h4>
<p>In Client/Server model the server performs almost all the operations on data and clients were used only to display the result from the servers..</p>
<figure>
<a href="http://github.com/rajanand02">
<img src="/images/client-server.png" />
</a>
<figcaption><a href="http://github.com/rajanand02" title="client/server model"></a>client/server model.</figcaption>
</figure>
<h4 id="mvcmodel-view-controller">MVC(Model View Controller)</h4>
<p>If you are familiar with frame works like Rails or Django you probably know MVC pattern..In MVC</p>
<ul>
<li>Model - Handles all the data.</li>
<li>Controller - talks with model, perform the logic/actions and prepare the data to be displayed.</li>
<li>View - display the content and report back to the controller when something happens on the screen(button click, form submission etc..)</li>
</ul>
<figure>
<a href="http://rajanand02.github.io/images/mvc.png">
<img src="/images/mvc.png" />
</a>
<figcaption><a href="http://github.com/rajanand02" title="client/server model"></a>MVC pattern.</figcaption>
</figure>
<h4 id="mvvm-in-meteor">MVVM in Meteor</h4>
<p>As the browser technologies improved drastically developers started to enhance the concept of MVC to bring in MVVM pattern(Nested mvc)..In MVVM the sever side controller performs the business logic/operations on the database(server-model) and then send the result set(server-view) to the client..</p>
<p>The client which receives the result set(server-view) consider it as its own model(client-model) and performs the logic required to present the content and finally view is used to display the information on the screen..</p>
<figure>
<a href="http://rajanand02.github.io/images/mvvm.png" target="_blank">
<img src="/images/mvvm.png" />
</a>
<figcaption><a href="http://github.com/rajanand02" title="client/server model"></a>
Meteor does not strictly follow any pattern but based on the way it works <a href="http://www.packtpub.com/authors/profiles/isaac-strack" target="_blank">Issac Strack</a> suggesting MVVM model in his book <a href="http://www.packtpub.com/getting-started-with-meteor-javascript-framework/book" target="_blank">Getting started with Meteor.js JavaScript Framework</a></figcaption>
</figure>
<h3 id="seven-principles-of-meteor">Seven Principles of Meteor</h3>
<p>In the Meteor official <a href="http://docs.meteor.com/">documention</a> you could find the following <a href="http://docs.meteor.com/#sevenprinciples">7 principles</a></p>
<h5 id="1data-on-the-wire">1.Data on the wire</h5>
<p>The only thing that traverse between the server and client after the initial page load is <strong>data</strong>.. Meteor loads all the html,css and other static assets in the initial page load after which it sends only the data to the client and let the client decide how to render the data.</p>
<h5 id="2one-language">2.One Language</h5>
<p>Meteor uses only <strong>JavaScript</strong> for both client and server side operations..This can be achieved in meteor because it is built on top of NodeJs and it uses MongoDB as default database…</p>
<h5 id="3datebase-everywhere">3.Datebase Everywhere</h5>
<p>As default Meteor allows you to access the entire database from your client..You might think that it will lead to some serious security issues where any user can delete or modify other uses’s details but this is just a default state while creating your application so that you can get the app up and ready in matter of minutes after which you can restrict the access to the database..Accessing the database from client side is achieved by using <a href="http://docs.meteor.com/#dataandsecurity"><strong>minimongo</strong></a>(Meteor’s client-side Mongo emulator).</p>
<h5 id="4latency-compensation">4.Latency Compensation</h5>
<p>Since database is available at client side whenever the user do any activity(button click,form submission etc..) the result will be updated immediately in UI even before it receives confirmation from the server, this makes your application instantaneous and more responsive..However if the user is not permitted to do certain operations the changes will revert back after it gets confirmation form the server(just fraction of seconds later)..</p>
<h5 id="5full-stack-reactivity">5.Full Stack Reactivity</h5>
<p>In meteor all the layers form database to html templates everything is <strong>event-driven</strong> i.e the application will respond based on the activities of the user..</p>
<h5 id="6embrace-the-ecosystem">6.Embrace the Ecosystem</h5>
<p>Meteor uses other open sources libraries like MongoDB, Handlebars etc instead of making their own, this is because when those libraries improve Meteor will also get improve and moreover the developers would get more community help when they are building applications or learning Meteor..</p>
<h5 id="7-simplicity-equals-productivity">7. Simplicity Equals Productivity</h5>
<p>The key idea of improving the productivity is having a clean and simple API, Meteor core highly follow this principle by providing much simple and beautiful APIs to build the application..</p>
<h3 id="getting-started">Getting Started</h3>
<p>Its quite a lot of text…:D Lets get started by installing Meteor..</p>
<h5 id="installation">Installation</h5>
<p>Installing meteor can’t be more easier..Simply coping the below code and pasting it in your terminal will make your operating system ready for meteor development..</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">curl https://install.meteor.com | /bin/sh
<span class="c"># Check meteor version</span>
meteor <span class="nt">--version</span>
Realease 0.7.1.2</code></pre></figure>
<p>Meteor 0.7.1.2 is the current stable version and it supports GNU/Linux and Unix by default, for windows you can check the unofficial version here <a href="http://win.meteor.com/" target="_blank">win.meteor.com</a></p>
<p>#####Create a project</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> meteor create app_name</code></pre></figure>
<figure>
<img src="/images/mrt.gif" />
<figcaption>
<a href="rajanand02.github.io/images/mrt.gif" title="">creating meteor application.</a>
</figcaption>
</figure>
<p>Meteor allows you create 4 pre-build examples where you can play around and understand its basic working principles…</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="c1"># to check available examples</span>
<span class="n">meteor</span> <span class="n">create</span> <span class="o">--</span><span class="n">list</span>
<span class="c1"># create an example application</span>
<span class="n">meteor</span> <span class="n">create</span> <span class="o">--</span><span class="n">example</span> <span class="n">todos</span></code></pre></figure>
<figure>
<img src="/images/leader.gif" />
<figcaption>
To checkout other examples vist
<a href="https://www.meteor.com/examples" title=""> <strong>here.</strong></a>
</figcaption>
</figure>
<h4 id="meteorite">Meteorite</h4>
<p><a href="https://github.com/oortcloud/meteorite">Meteorite</a> is a Meteor Version Manager which is similar to RVM/Rbenv available for maintaining ruby versions for individual projects.. <br />
Using Meteorite we can easily maintain multiple versions of Meteor, install non-core and third party packages from <a href="http://beta.atmospherejs.com/" target="_blank"> <strong>Atmosphere</strong></a></p>
<h5 id="installing-meteorite">Installing Meteorite</h5>
<p>Meteorite installation is also similar to Meteor installation in which a single command is enough to do the magic..</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo</span> <span class="nt">-H</span> npm <span class="nb">install</span> <span class="nt">-g</span> meteorite</code></pre></figure>
<p>Once Meteorite is installed we can use <code class="language-plaintext highlighter-rouge">mrt</code> command to create projects as well as to install packages..it will act like an alias to <code class="language-plaintext highlighter-rouge">meteor</code> command..</p>
<figure>
<img src="/images/mrtinstall.gif" />
<figcaption>
<a href="rajanand02.github.io/images/mrtinstall.gif" title="">meteorite.</a>
</figcaption>
</figure>
<h5 id="packages">Packages</h5>
<p>Packages in Meteor is something similar to ruby gems or node packages..Adding packages to the application can be done by <code class="language-plaintext highlighter-rouge">meteor add package_name</code> command or <code class="language-plaintext highlighter-rouge">mrt add package_name</code> command if it is a third party package from Atmosphere..Installing packages can also be done manually by including it in smart.json file and running <code class="language-plaintext highlighter-rouge">mrt</code> inside the application directory..This will create a <code class="language-plaintext highlighter-rouge">/packages</code> directory and includes all the required dependencies and files of the packages..</p>
<h5 id="types-of-packages">Types of packages</h5>
<ul>
<li>
<p><em>Core Packages</em> - Meteor itself is a combination of various packages and those packages are called core packages..These core packages are included in every meteor applications..</p>
</li>
<li>
<p><em>Smart Packages</em>- Smart packages are about 42 packages created by meteor team that comes bundled with meteor..You can view these packages by <code class="language-plaintext highlighter-rouge">meteor list</code> command..</p>
</li>
<li>
<p><em>Atmosphere Smart Packages</em>- These are third party packages from <a href="http://beta.atmospherejs.com/">Atmosphere</a> which are built by Meteor community..</p>
</li>
<li>
<p><em>Local Packages</em>- Local packages are custom packages for the application that can be included by putting inside <code class="language-plaintext highlighter-rouge">/packages</code> directory..</p>
</li>
<li>
<p><em>NPM Packages</em>- Node.js packages can also be integrated in the application by using above packages..</p>
</li>
</ul>
<p>Lets include some packages to our leaderboard application..</p>
<figure>
<img src="/images/packages.gif" />
<figcaption>
<a href="rajanand02.github.io/images/packages.gif">adding packages.</a>
</figcaption>
</figure>
<h5 id="deploying-meteor">Deploying Meteor</h5>
<p>Meteor gives you free server space to deploy and check your application, you don’t have to spend time in setting up your server or configure heroku..This could be very useful while you are prototyping your application or creating MVP to get confirmation form clients…</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> meteor deploy app_name.meteor.com</code></pre></figure>
<figure>
<img src="/images/deploy.gif" />
<figcaption>
<a href="rajanand02.github.io/images/deploy.gif">deploying in meteor server.</a>
</figcaption>
</figure>
<p>You can also deploy the application in your own server by bundling the app and run it as a simple node application…</p>
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"> <span class="n">meteor</span> <span class="n">bundle</span> <span class="n">app_name</span><span class="p">.</span><span class="nf">tar</span><span class="p">.</span><span class="nf">gz</span></code></pre></figure>
<figure>
<img src="/images/bundle.gif" />
<figcaption>
<a href="http://rajanand02.github.io/images/bundle.gif" title="">bundling the application.</a>
</figcaption>
</figure>
<h5 id="resources">Resources</h5>
<ul>
<li><a href="http://yauh.de/articles/376/best-learning-resources-for-meteorjs">yet another useless homepage</a> by<a href="https://plus.google.com/+StephanHochhaus" target="_blank"> <strong>Stephan Hochhaus</strong></a></li>
</ul>
<p><a href="https://hacktivist.in/articles/Watchout-for-meteor">Watch out for Meteor...!</a> was originally published by Raj Anand at <a href="https://hacktivist.in">Raj Anand</a> on March 16, 2014.</p>https://hacktivist.in/articles/Rails2014-03-06T00:00:00+05:302014-03-06T00:00:00+05:30Raj Anandhttps://hacktivist.inrajanand@fsftn.org<hr />
<div class="seriesNote">
<p>This article is <strong>Part 5</strong> in a <strong>5-Part</strong> Series.</p>
<ul>
<li>Part 1 -
<a href="/articles/ubuntu-zero-to-deploy">Ubuntu-Zero To Deploy</a>
</li>
<li>Part 2 -
<a href="/articles/zsh">Z-shell</a>
</li>
<li>Part 3 -
<a href="/articles/vim">Vim</a>
</li>
<li>Part 4 -
<a href="/articles/Cinnamon">Cinnamon</a>
</li>
<li>Part 5 -
This Article
</li>
</ul>
</div>
<hr />
<p>Rails is well-know web framework which is completely written in Ruby. I am not going to explain what Rails is and why you should start learning it..You can find many online resources to learn and master rails..</p>
<p>Learning Resources:</p>
<ul>
<li><a href="http://guides.rubyonrails.org/getting_started.html">guides.rubyonrails.org</a></li>
<li><a href="http://ruby.railstutorial.org/ruby-on-rails-tutorial-book">Michael Hartl’s Rails Tutorial</a></li>
<li><a href="http://railsforzombies.org/">Rails for Zombies</a></li>
</ul>
<h4 id="installation">Installation</h4>
<h5 id="rbenv">Rbenv</h5>
<p>Rbenv is a simple Ruby version management tool which is similar to RVM..i prefer Rbenv over RVM because it is light and it uses <a href="https://github.com/sstephenson/rbenv#understanding-shims">shims</a> to choose appropriate ruby versions.</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="c"># install dependencies</span>
<span class="nb">sudo </span>apt-get update
<span class="nb">sudo </span>apt-get <span class="nb">install </span>git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev
<span class="c"># clone rbenv from github</span>
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
<span class="c"># export path to zshrc or bashrc based on your shell</span>
<span class="nb">echo</span> <span class="s1">'export PATH="$HOME/.rbenv/bin:$PATH"'</span> <span class="o">>></span> ~/.zshrc
<span class="nb">echo</span> <span class="s1">'eval "$(rbenv init -)"'</span> <span class="o">>></span> ~/.zshrc
<span class="nb">exec</span> <span class="nv">$SHELL</span>
git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
<span class="nb">echo</span> <span class="s1">'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"'</span> <span class="o">>></span> ~/.zshrc
<span class="nb">exec</span> <span class="nv">$SHELL</span>
rbenv <span class="nb">install </span>2.1.1
rbenv global 2.1.1
ruby <span class="nt">-v</span>
<span class="c"># Tell rubygems not to install documentation</span>
<span class="nb">echo</span> <span class="s2">"gem: --no-ri --no-rdoc"</span> <span class="o">></span> ~/.gemrc</code></pre></figure>
<h4 id="configure-git">Configure Git</h4>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">git config <span class="nt">--global</span> user.name <span class="s2">"your user name"</span>
git config <span class="nt">--global</span> user.email <span class="s2">"mail@expamle.com"</span>
git config <span class="nt">--global</span> color.ui <span class="nb">true</span>
<span class="c"># generate ssh key and add in github</span>
ssh-keygen <span class="nt">-t</span> rsa <span class="nt">-C</span> <span class="s2">"mail@example.com"</span></code></pre></figure>
<p>Go to GitHub <a href="https://github.com/settings/ssh">settings</a> page and paste the generated ssh and then check your ssh key..</p>
<p>`
ssh -T git@github.com
`</p>
<p>You should get a message like this:</p>
<p><code class="language-plaintext highlighter-rouge">Hi "your name" You've successfully authenticated, but GitHub does not provide shell access.</code></p>
<h4 id="install-nodejs">Install NodeJS</h4>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>add-apt-repository ppa:chris-lea/node.js
<span class="nb">sudo </span>apt-get update
<span class="nb">sudo </span>apt-get <span class="nb">install </span>nodejs</code></pre></figure>
<h4 id="install-rails">Install Rails</h4>
<p>`
gem install rails
`</p>
<p>You should now tell rbenv to make the rails executable available.</p>
<p>`
rbenv rehash
`</p>
<p>Check rails version</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rails <span class="nt">-v</span>
<span class="c"># Rails 4.0.2</span></code></pre></figure>
<h4 id="install-heroku">Install Heroku</h4>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">wget <span class="nt">-qO-</span> https://toolbelt.heroku.com/install-ubuntu.sh | sh
<span class="c"># login to heroku</span>
heroku login
Enter your Heroku credentials.
Email: email@example.com
Password:
Authentication successful.</code></pre></figure>
<p>Lets create a sample Rails application and deploy in heroku using git..</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">rails new gitbook
create
create README.rdoc
create Rakefile
create config.ru
create .gitignore
create Gemfile
create app
create app/assets/javascripts/application.js
create app/assets/stylesheets/application.css
create app/controllers/application_controller.rb
create app/helpers/application_helper.rb
...
...
<span class="nb">cd </span>gitbook
git init
Initialized empty Git repository <span class="k">in</span> /home/user/directory/gitbook/.git/
<span class="c"># add files to git</span>
ga <span class="nb">.</span>
gcmsg <span class="s2">"initial commit"</span>
<span class="c"># add GitHub repo and push the files</span>
git remote add origin git@github.com:username/gitbook.git
gp</code></pre></figure>
<p>Heroku uses PostgreSQL db and rails_12factor gem to serve static assets so lets open up our Gemfile and include those gems..</p>
<figure>
<img src="/images/heroku.gif" />
<figcaption><a href="http://rajanand.github.io" title="heroku"></a>
</figcaption>
</figure>
<p>Commit those changes to git and deploy the app in heroku</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">ga Gemfile
gcmsg <span class="s2">"include pg and rails_12factor for heroku deploy"</span>
<span class="c"># create heroku application</span>
heroku create
Creating infinite-shore-5163... <span class="k">done</span>, stack is cedar
http://infinite-shore-5163.herokuapp.com/ | git@heroku.com:infinite-shore-5163.git
Git remote heroku added
<span class="c"># rename heroku app</span>
heroku rename gitbookdemo <span class="o">(</span>git<span class="o">)[</span>master|… 53]
Renaming infinite-shore-5163 to gitbookdemo... <span class="k">done
</span>http://gitbookdemo.herokuapp.com/ | git@heroku.com:gitbookdemo.git
Git remote heroku updated
<span class="c"># push the repo to Heroku</span>
git push heroku master
Initializing repository, <span class="k">done</span><span class="nb">.</span>
Counting objects: 63, <span class="k">done</span><span class="nb">.</span>
Delta compression using up to 8 threads.
Compressing objects: 100% <span class="o">(</span>52/52<span class="o">)</span>, <span class="k">done</span><span class="nb">.</span>
Writing objects: 100% <span class="o">(</span>63/63<span class="o">)</span>, 14.57 KiB | 0 bytes/s, <span class="k">done</span><span class="nb">.</span>
Total 63 <span class="o">(</span>delta 4<span class="o">)</span>, reused 0 <span class="o">(</span>delta 0<span class="o">)</span>
<span class="nt">-----</span><span class="o">></span> Ruby app detected
<span class="nt">-----</span><span class="o">></span> Compiling Ruby/Rails
<span class="nt">-----</span><span class="o">></span> Using Ruby version: ruby-2.0.0
<span class="nt">-----</span><span class="o">></span> Installing dependencies using 1.5.2
New app detected loading default bundler cache
Running: bundle <span class="nb">install</span> <span class="nt">--without</span> development:test <span class="nt">--path</span> vendor/bundle <span class="nt">--binstubs</span> vendor/bundle/bin <span class="nt">-j4</span> <span class="nt">--deployment</span>
Fetching gem metadata from https://rubygems.org/.........
Fetching additional metadata from https://rubygems.org/..
Using rake <span class="o">(</span>10.1.1<span class="o">)</span>
Using multi_json <span class="o">(</span>1.8.4<span class="o">)</span>
...
...
<span class="nt">-----</span><span class="o">></span> Compressing... <span class="k">done</span>, 21.3MB
<span class="nt">-----</span><span class="o">></span> Launching... <span class="k">done</span>, v6
http://gitbookdemo.herokuapp.com/ deployed to Heroku
To git@heroku.com:gitbookdemo.git
<span class="k">*</span> <span class="o">[</span>new branch] master -> master</code></pre></figure>
<p>Open heroku app</p>
<p>`
heroku open
`</p>
<figure>
<img src="/images/herokuapp.png" /></a>
<figcaption>
<a href="http://rajanand.github.io" title="heroku"></a>
</figcaption>
</figure>
<p>You would see an error page because after rails 4.0, for some technical reason heroku doesn’t show rails default home page but you could create your own page and deploy in heroku…</p>
<h3 id="wrap-up">Wrap-up</h3>
<p>We have successfully installed all the required packages and tool to make our distro ready for production..If you are not interested to do all these installations manually you should checkout Thoughbot’s <a href="https://github.com/thoughtbot/laptop">laptop</a> script that will install everything for you…</p>
<p>`
bash <(wget -qO- https://raw.github.com/thoughtbot/laptop/master/linux)>
`</p>
<blockquote>
<p>You might also want to install the following tools for your every day usage ..</p>
</blockquote>
<ul>
<li><a href="http://tmux.sourceforge.net/">Tmux</a></li>
<li><a href="https://github.com/tmuxinator/tmuxinator">Tmuxinator</a></li>
<li><a href="https://apps.ubuntu.com/cat/applications/clementine/">Clementine</a></li>
<li><a href="https://apps.ubuntu.com/cat/applications/uget/">Uget</a></li>
<li><a href="https://apps.ubuntu.com/cat/applications/qbittorrent/">qBittorent</a></li>
<li><a href="https://apps.ubuntu.com/cat/applications/quantal/tomboy/">Tomboy</a></li>
<li><a href="https://apps.ubuntu.com/cat/applications/bleachbit/">BleachBit</a></li>
<li><a href="https://apps.ubuntu.com/cat/applications/meld/">Meld</a></li>
<li><a href="http://www.videolan.org/vlc/index.html">Vlc</a></li>
<li><a href="http://www.skype.com/en/download-skype/skype-for-computer/">Skype</a></li>
<li><a href="https://apps.ubuntu.com/cat/applications/variety/">variety</a></li>
</ul>
<p><a href="https://hacktivist.in/articles/Rails">Ruby on Rails</a> was originally published by Raj Anand at <a href="https://hacktivist.in">Raj Anand</a> on March 06, 2014.</p>https://hacktivist.in/articles/Cinnamon2014-02-23T00:00:00+05:302014-02-23T00:00:00+05:30Raj Anandhttps://hacktivist.inrajanand@fsftn.org<hr />
<div class="seriesNote">
<p>This article is <strong>Part 4</strong> in a <strong>5-Part</strong> Series.</p>
<ul>
<li>Part 1 -
<a href="/articles/ubuntu-zero-to-deploy">Ubuntu-Zero To Deploy</a>
</li>
<li>Part 2 -
<a href="/articles/zsh">Z-shell</a>
</li>
<li>Part 3 -
<a href="/articles/vim">Vim</a>
</li>
<li>Part 4 -
This Article
</li>
<li>Part 5 -
<a href="/articles/Rails">Ruby on Rails</a>
</li>
</ul>
</div>
<hr />
<h4 id="cinnamon">Cinnamon</h4>
<p>Cinnamon is my favourite desktop environment since it is simple, elegant and easy to use so lets install cinnamon and get rid of Unity…
Cinnamon community is very much active and whenever they launch a new version, it will be uploaded immediately to stable PPA so that Ubuntu users can directly install without any hassle..</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> <span class="nb">sudo </span>add-apt-repository ppa:gwendal-lebihan-dev/cinnamon-stable
<span class="nb">sudo </span>apt-get update
<span class="nb">sudo </span>apt-get <span class="nb">install </span>cinnamon</code></pre></figure>
<h5 id="file-manager">File manager</h5>
<p>Lets make nemo as default file manager</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> <span class="nb">sudo </span>apt-get <span class="nb">install </span>nemo
xdg-mime default nemo.desktop inode/directory application/x-gnome-saved-search
gsettings <span class="nb">set </span>org.gnome.desktop.background show-desktop-icons <span class="nb">false
</span>gsettings <span class="nb">set </span>org.nemo.desktop show-desktop-icons <span class="nb">true</span></code></pre></figure>
<h5 id="removing-unity">Removing Unity</h5>
<p>Remove unity and related packages..</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nb">sudo </span>apt-get autoremove <span class="nt">--purge</span> unity unity-common unity-services unity-lens-<span class="k">*</span> unity-scope-<span class="k">*</span> unity-webapps-<span class="k">*</span>
gnome-control-center-unity hud libunity-core-6<span class="k">*</span> libunity-misc4 libunity-webapps<span class="k">*</span> appmenu-gtk appmenu-gtk3 appmenu-qt<span class="k">*</span>
overlay-scrollbar<span class="k">*</span> activity-log-manager-control-center firefox-globalmenu thunderbird-globalmenu libufe-xidgetter0
xul-ext-unity xul-ext-webaccounts webaccounts-extension-common xul-ext-websites-integration compiz compiz-gnome
compiz-plugins-default libcompizconfig0 nautilus nautilus-sendto nautilus-sendto-empathy nautilus-share</code></pre></figure>
<h4 id="install-mdm">Install mdm</h4>
<p>Ubuntu shipped with lightdm that cannot to configured after certain level but mdm has many eye candy features including html5 theme packs.</p>
<p>To install mdm lets add a third party PPA from <a href="http://www.noobslab.com/">noobslab</a>..</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> <span class="nb">sudo </span>add-apt-repository ppa:noobslab/mint
<span class="nb">sudo </span>apt-get update
<span class="nb">sudo </span>apt-get <span class="nb">install </span>mdm mdm-themes</code></pre></figure>
<p>During the installaion you will be asked to change the default DM, choose mdm and hit enter..</p>
<figure>
<a href="http://rajanand02.github.io/images/dm.png">
<img src="/images/dm.png" /></a>
<figcaption><a href="http://github.com/rajanand02" title=""></a>Change lightdm to mdm</figcaption>
</figure>
<p>After complete installation you can choose mdm theme from cinnamon theme option in system setup..</p>
<figure>
<a href="http://rajanand02.github.io/images/mdm.png">
<img src="/images/mdm.png" /></a>
<figcaption><a href="http://github.com/rajanand02" title=""></a>my favourite powered by linux mdm theme</figcaption>
</figure>
<p><a href="https://hacktivist.in/articles/Cinnamon">Cinnamon</a> was originally published by Raj Anand at <a href="https://hacktivist.in">Raj Anand</a> on February 23, 2014.</p>https://hacktivist.in/articles/vim2014-02-18T00:00:00+05:302014-02-18T00:00:00+05:30Raj Anandhttps://hacktivist.inrajanand@fsftn.org<hr />
<div class="seriesNote">
<p>This article is <strong>Part 3</strong> in a <strong>5-Part</strong> Series.</p>
<ul>
<li>Part 1 -
<a href="/articles/ubuntu-zero-to-deploy">Ubuntu-Zero To Deploy</a>
</li>
<li>Part 2 -
<a href="/articles/zsh">Z-shell</a>
</li>
<li>Part 3 -
This Article
</li>
<li>Part 4 -
<a href="/articles/Cinnamon">Cinnamon</a>
</li>
<li>Part 5 -
<a href="/articles/Rails">Ruby on Rails</a>
</li>
</ul>
</div>
<hr />
<h3 id="vim">vim</h3>
<p>vim is my primary text editor and i use it as an ide for my rails development..Initially you have to spend some considerable amount of time to install vim with all the features enabled and configure it with required plugins but it’s just an one time burden after that your productivity rate will be much higher than any other editor..</p>
<h4 id="installation">Installation</h4>
<p>#####Uninstall old vim and install dependencies</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> <span class="nb">sudo </span>apt-get remove vim vim-runtime gvim
<span class="c">#On ubuntu 12.04.2 you have to remove these packages as well</span>
<span class="nb">sudo </span>apt-get remove vim-tiny vim-common vim-gui-common
<span class="c">#build dependencies from repository</span>
<span class="nb">sudo </span>apt-get build-dep vim</code></pre></figure>
<p>#####Install lua-5</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> curl <span class="nt">-R</span> <span class="nt">-O</span> http://www.lua.org/ftp/lua-5.2.2.tar.gz
<span class="nb">tar </span>zxf lua-5.2.2.tar.gz
<span class="nb">cd </span>lua-5.2.2
make linux <span class="nb">test
sudo cp </span>src/lua /usr/local/bin/lua
<span class="nb">sudo cp</span> <span class="nt">-r</span> src /usr/local/include/</code></pre></figure>
<p>#####Install luajit</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> <span class="nb">sudo </span>apt-get <span class="nb">install </span>luajit libluajit-5.1</code></pre></figure>
<p>#####Download latest vim</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> wget ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2
<span class="nb">tar</span> <span class="nt">-xvjf</span> vim-7.4.tar.bz2
<span class="nb">cd </span>vim74</code></pre></figure>
<p>#####Apply patch to make vim work with lua and luajit</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> curl https://gist.github.com/shirosaki/5663617/raw | patch <span class="nt">-p1</span></code></pre></figure>
<h5 id="compile-and-install-vim">Compile and install vim</h5>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">./configure <span class="se">\</span>
<span class="nt">--enable-perlinterp</span><span class="o">=</span>dynamic <span class="se">\</span>
<span class="nt">--enable-pythoninterp</span><span class="o">=</span>dynamic <span class="se">\</span>
<span class="nt">--enable-rubyinterp</span><span class="o">=</span>dynamic <span class="se">\</span>
<span class="nt">--enable-luainterp</span> <span class="nt">--with-luajit</span> <span class="nt">--with-lua-prefix</span><span class="o">=</span>/usr/local <span class="se">\</span>
<span class="nt">--enable-cscope</span> <span class="se">\</span>
<span class="nt">--enable-gui</span><span class="o">=</span>auto <span class="se">\</span>
<span class="nt">--enable-gtk2-check</span> <span class="se">\</span>
<span class="nt">--enable-gnome-check</span> <span class="se">\</span>
<span class="nt">--with-features</span><span class="o">=</span>huge <span class="se">\</span>
<span class="nt">--with-x</span> <span class="se">\</span>
<span class="nt">--with-python-config-dir</span><span class="o">=</span>/usr/lib/python2.7/config
make <span class="nv">VIMRUNTIMEDIR</span><span class="o">=</span>/usr/share/vim/vim74
<span class="nb">sudo </span>make <span class="nb">install</span></code></pre></figure>
<p>#####check vim version</p>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> vim <span class="nt">--version</span></code></pre></figure>
<h4 id="some-useful-plugins">Some useful plugins</h4>
<ul>
<li><a href="https://github.com/Shougo/neobundle.vim">neobundle</a></li>
<li><a href="https://github.com/Shougo/neocomplete.vim">neocomplete</a></li>
<li><a href="https://github.com/Shougo/neosnippet.vim">neosnippets</a></li>
<li><a href="https://github.com/Shougo/vimfiler.vim">vim-filer</a></li>
<li><a href="https://github.com/Shougo/vimshell.vim">vim-shell</a></li>
<li><a href="https://github.com/Shougo/unite.vim">unite</a></li>
<li><a href="https://github.com/tpope/vim-fugitive">vim-fugitive</a></li>
<li><a href="https://github.com/tpope/vim-rails">vim-rails</a></li>
<li><a href="https://github.com/scrooloose/nerdtree">nerdtree</a></li>
<li><a href="https://github.com/honza/vim-snippets">vim-snippets</a></li>
<li><a href="https://github.com/scrooloose/syntastic">syntastic</a></li>
</ul>
<figure>
<img src="/images/vim.gif" />
<figcaption><a href="http://github.com/rajanand02" title="Vim as rails ide"></a>vim as rails ide.</figcaption>
</figure>
<h4 id="sample-vimrc-configurations">Sample vimrc configurations</h4>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> <span class="nb">source</span> ~/dotfiles/vim-config/bundles.vim
<span class="nb">source</span> ~/dotfiles/vim-config/key-bindings.vim
<span class="s2">"setting goes here
syntax on
syntax enable
set relativenumber
filetype plugin indent on
set noswapfile
set incsearch
set ignorecase
set history=1000
set title
set expandtab
set autoindent
set mouse=a
set spell
set cursorline
set clipboard=unnamed
set backspace=indent,eol,start "</span> Make backspace behave normally.
<span class="nb">set </span><span class="nv">wildmode</span><span class="o">=</span>list:longest,full
<span class="nb">set </span>wildmenu
<span class="nb">set </span><span class="nv">tabstop</span><span class="o">=</span>2 <span class="nv">shiftwidth</span><span class="o">=</span>2 <span class="nv">softtabstop</span><span class="o">=</span>2
<span class="nb">set </span>dictionary-<span class="o">=</span>/usr/share/dict/words dictionary+<span class="o">=</span>/usr/share/dict/words
<span class="s2">"Rails vim key-mappings
nnoremap <leader>rr :e config/routes.rb<CR>
nnoremap <leader>rv :Rview<space>
nnoremap <leader>rc :Rcontroller<space>
nnoremap <leader>rg :Rgenerate<space>
nnoremap <leader>rx :Rextract<space>
nnoremap <leader>rm :Rmodel<space>
nnoremap <leader>rs :Rstylesheet<space>
nnoremap <leader>rj :Rjavascript<space>
nnoremap <leader>ge :e Gemfile<CR>
"</span>shougo<span class="s1">'s plugins
NeoBundle '</span>Shougo/neocomplete<span class="s1">'
NeoBundle '</span>Shougo/neosnippet<span class="s1">'
"tpope'</span>s plugins
NeoBundle <span class="s1">'tpope/vim-fugitive'</span> <span class="s2">"git inside vim
NeoBundle 'tpope/vim-repeat' "</span>Helps to repeat previous <span class="nb">command </span>with <span class="nb">.</span> key
NeoBundle <span class="s1">'tpope/vim-endwise.git'</span> <span class="s2">"To enable automatic end in loops
"</span> All scrooloose plugins
NeoBundle <span class="s2">"scrooloose/syntastic"</span> <span class="s2">"to highlight syntax
NeoBundle 'scrooloose/nerdcommenter' "</span>to autocommenting based on file <span class="nb">type
</span>NeoBundle <span class="s2">"scrooloose/nerdtree"</span> <span class="s2">"classic file explorer
"</span>Syntastic customization
<span class="nb">let </span>g:syntastic_error_symbol <span class="o">=</span> <span class="s1">'✗'</span>
<span class="nb">let </span>g:syntastic_style_error_symbol <span class="o">=</span> <span class="s1">'✠'</span>
<span class="nb">let </span>g:syntastic_warning_symbol <span class="o">=</span> <span class="s1">'∆'</span>
<span class="nb">let </span>g:syntastic_style_warning_symbol <span class="o">=</span> <span class="s1">'☢'</span></code></pre></figure>
<blockquote>
<p>check my <a href="https://github.com/rajanand02/dotfiles/tree/master/vim-config">dotfiles</a> repo for more configurations..</p>
</blockquote>
<p><a href="https://hacktivist.in/articles/vim">Vim</a> was originally published by Raj Anand at <a href="https://hacktivist.in">Raj Anand</a> on February 18, 2014.</p>https://hacktivist.in/articles/zsh2014-01-12T00:00:00+05:302014-01-12T00:00:00+05:30Raj Anandhttps://hacktivist.inrajanand@fsftn.org<hr />
<div class="seriesNote">
<p>This article is <strong>Part 2</strong> in a <strong>5-Part</strong> Series.</p>
<ul>
<li>Part 1 -
<a href="/articles/ubuntu-zero-to-deploy">Ubuntu-Zero To Deploy</a>
</li>
<li>Part 2 -
This Article
</li>
<li>Part 3 -
<a href="/articles/vim">Vim</a>
</li>
<li>Part 4 -
<a href="/articles/Cinnamon">Cinnamon</a>
</li>
<li>Part 5 -
<a href="/articles/Rails">Ruby on Rails</a>
</li>
</ul>
</div>
<hr />
<p>Zsh is the most awesome, most powerful and highly configurable UNIX shell…it ships with lots of cool features like detecting typos, auto-correction, tab-completion etc..
You can find many online <a href="http://zsh.sourceforge.net/Guide">guides</a> and <a href="http://blog.coolaj86.com/articles/zsh-is-to-bash-as-vim-is-to-vi.html">tutorials</a> to getting started with zsh as well as advance configurations..</p>
<h5 id="installation">Installation</h5>
<p>`
sudo apt-get install zsh
`</p>
<h5 id="oh-my-zsh"><a href="https://github.com/robbyrussell/oh-my-zsh">Oh-my-zsh</a></h5>
<p>oh-my-zsh is a community-driven framework to configure and manage your zsh…it comes with multiple <a href="https://wiki.github.com/robbyrussell/oh-my-zsh/themes">theme</a>, <a href="https://github.com/robbyrussell/oh-my-zsh/tree/master/plugins">plugins</a> and helpers..</p>
<h5 id="install-and-make-zsh-as-your-default-shell">Install and make zsh as your default shell</h5>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash">curl <span class="nt">-L</span> https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh
chsh <span class="nt">-s</span> /bin/zsh</code></pre></figure>
<figure>
<a href="http://rajanand02.github.io/images/zsh.gif">
<img src="/images/zsh.gif" /></a>
<figcaption><a href="http://vysakh0.github.io/flying-start-with-zsh-shell/" title="Terminator the awesome terminal emulator"></a>
image taken from <a href="http://vysakh0.github.io/flying-start-with-zsh-shell">vysakh0.github.io</a>
</figcaption>
</figure>
<h5 id="sample-zshrc-configurations">Sample .zshrc configurations</h5>
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"> <span class="nv">ZSH</span><span class="o">=</span><span class="nv">$HOME</span>/.oh-my-zsh
<span class="nb">source</span> ~/.zsh/zsh-vcs-prompt/zshrc.sh
<span class="nb">source</span> ~/dotfiles/zsh-config/aliases.zsh
<span class="nb">export </span><span class="nv">PATH</span><span class="o">=</span>~/.meteor/tools/latest/bin:<span class="nv">$PATH</span>
<span class="nv">ZSH_VCS_PROMPT_ENABLE_CACHING</span><span class="o">=</span><span class="s1">'true'</span>
<span class="nv">RPROMPT</span><span class="o">=</span><span class="s1">'$(vcs_super_info)'</span>
<span class="nb">export </span><span class="nv">EDITOR</span><span class="o">=</span><span class="s1">'vim'</span>
<span class="nv">ZSH_THEME</span><span class="o">=</span><span class="s2">"raj"</span>
fortune | cowsay
<span class="nb">alias </span><span class="nv">v</span><span class="o">=</span><span class="s2">"vim"</span>
<span class="nb">alias </span><span class="nv">bye</span><span class="o">=</span><span class="s1">'cowsay "Bye bye buddy" && sudo poweroff'</span>
<span class="nb">alias </span><span class="nv">re</span><span class="o">=</span><span class="s1">'cowsay "we will meet soon" && sudo reboot'</span>
<span class="nb">alias </span><span class="nv">x</span><span class="o">=</span><span class="s1">'exit'</span>
<span class="nb">alias </span><span class="nv">m</span><span class="o">=</span><span class="s1">'cmatrix'</span>
<span class="nb">alias install</span><span class="o">=</span><span class="s1">'sudo apt-get install'</span>
<span class="nb">alias </span><span class="nv">remove</span><span class="o">=</span><span class="s1">'sudo apt-get remove'</span>
<span class="nb">alias </span><span class="nv">search</span><span class="o">=</span><span class="s1">'sudo apt-cache search'</span>
<span class="nb">alias </span><span class="nv">update</span><span class="o">=</span><span class="s1">'sudo apt-get update'</span>
<span class="nb">alias </span><span class="nv">autoremove</span><span class="o">=</span><span class="s1">'sudo apt-get autoremove'</span>
<span class="nb">alias </span><span class="nv">purge</span><span class="o">=</span><span class="s1">'sudo apt-get purge'</span>
<span class="nb">alias </span><span class="nv">vrc</span><span class="o">=</span><span class="s1">'vim ~/dotfiles/vim-config/vimrc'</span>
<span class="nb">alias </span><span class="nv">zrc</span><span class="o">=</span><span class="s1">'vim ~/dotfiles/zsh-config/zshrc'</span>
<span class="nv">plugins</span><span class="o">=(</span>bundler capistrano debian gem git git-flow github git-remote-branch gitignore heroku <span class="nb">history </span>rails rake rbenv ruby <span class="nb">sudo </span>terminator tmux tmuxinator <span class="o">)</span>
<span class="nb">source</span> <span class="nv">$ZSH</span>/oh-my-zsh.sh
<span class="nb">export </span><span class="nv">PATH</span><span class="o">=</span><span class="s2">"</span><span class="nv">$HOME</span><span class="s2">/.rbenv/bin:</span><span class="nv">$PATH</span><span class="s2">"</span>
<span class="nb">eval</span> <span class="s2">"</span><span class="si">$(</span>rbenv init -<span class="si">)</span><span class="s2">"</span></code></pre></figure>
<blockquote>
<p>check my <a href="https://github.com/rajanand02/dotfiles/blob/master/zsh-config">dotfiles</a> repo for more configurations..</p>
</blockquote>
<p><a href="https://hacktivist.in/articles/zsh">Z-shell</a> was originally published by Raj Anand at <a href="https://hacktivist.in">Raj Anand</a> on January 12, 2014.</p>https://hacktivist.in/articles/ubuntu-zero-to-deploy2013-12-21T00:00:00+05:302013-12-21T00:00:00+05:30Raj Anandhttps://hacktivist.inrajanand@fsftn.org<hr />
<div class="seriesNote">
<p>This article is <strong>Part 1</strong> in a <strong>5-Part</strong> Series.</p>
<ul>
<li>Part 1 -
This Article
</li>
<li>Part 2 -
<a href="/articles/zsh">Z-shell</a>
</li>
<li>Part 3 -
<a href="/articles/vim">Vim</a>
</li>
<li>Part 4 -
<a href="/articles/Cinnamon">Cinnamon</a>
</li>
<li>Part 5 -
<a href="/articles/Rails">Ruby on Rails</a>
</li>
</ul>
</div>
<hr />
<p>Being a distro hopper i switch distros often and i really enjoy it but the main problems are installing all the required applications,setting up the work environment,configure my editor etc..i have to spend at-least half a day to make it work the way i wanted..</p>
<p>It was fine when i tried to hack around all the distros back in my college days but after starting my own applications or working for other projects i can’t really spend half of my productive day in setting up my distro so i decided to document all my configurations, settings and tweaks that would help me when i switch to another distro or probably a new version of Ubuntu itself and at the same time it might help others to make their installations real quick and easy..</p>
<h4 id="terminator">Terminator</h4>
<p>The first thing i always install in my fresh Ubuntu is <a href="https://launchpad.net/terminator">Terminator</a>..
Terminator is a terminal emulator that has so may cool features like multiple session in a single tab..</p>
<figure>
<img src="/images/terminator.gif" />
<figcaption><a href="http://github.com/rajanand02" title="Terminator the awesome terminal emulator"></a>Terminator the awesome terminal-emulator.</figcaption>
</figure>
<p>You can edit your code, commit your changes in git, run server and execute shell commands inside a single tab..</p>
<h5 id="some-useful-shortcuts">Some useful shortcuts</h5>
<ul>
<li><code class="language-plaintext highlighter-rouge">Ctrl+Shift+E</code> - Split the view Vertically.</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl+Shift+O</code> - Split the view horizontally.</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl+Shift+arrows</code> - Resize the view.</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl+Shift+T</code> - Open new Tab.</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl+Shift+W</code> - Close the current view.</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl+Shift+P</code> - Focus the view on previous pane.</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl+Shift+N</code> - Focus the view on next pane.</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl+Shift+Q</code> - Quit Terminator.</li>
</ul>
<h5 id="terminator-solarized-color-scheme">Terminator-Solarized Color Scheme</h5>
<p>copy the following code to
<code class="language-plaintext highlighter-rouge">~/.config/terminator/config</code></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[global_config]
title_transmit_bg_color = "#d30102"
focus = system
[keybindings]
[profiles]
[[default]]
# solarized-dark
palette = "#073642:#dc322f:#859900:#b58900:#268bd2:#d33682:#2aa198:#eee8d5:#002b36:#cb4b16:#586e75:#657b83:#839496:#6c71c4:#93a1a1:#fdf6e3"
foreground_color = "#eee8d5"
background_color = "#002b36"
cursor_color = "#eee8d5"
[[solarized-dark]]
palette = "#073642:#dc322f:#859900:#b58900:#268bd2:#d33682:#2aa198:#eee8d5:#002b36:#cb4b16:#586e75:#657b83:#839496:#6c71c4:#93a1a1:#fdf6e3"
foreground_color = "#eee8d5"
background_color = "#002b36"
cursor_color = "#eee8d5"
[[solarized-light]]
#palette = "#073642:#dc322f:#859900:#b58900:#268bd2:#d33682:#2aa198:#eee8d5:#002b36:#cb4b16:#586e75:#657b83:#839496:#6c71c4:#93a1a1:#fdf6e3"
#background_color = "#eee8d5"
#foreground_color = "#002b36"
#cursor_color = "#002b36"
[layouts]
[[default]]
[[[child1]]]
type = Terminal
parent = window0
profile = solarized-dark
[[[window0]]]
type = Window
parent = ""
size = 800, 600
[plugins]
</code></pre></div></div>
<blockquote>
<p>refer the code in <a href="https://github.com/ghuntley/terminator-solarized">github</a></p>
</blockquote>
<p><a href="https://hacktivist.in/articles/ubuntu-zero-to-deploy">Ubuntu-Zero To Deploy</a> was originally published by Raj Anand at <a href="https://hacktivist.in">Raj Anand</a> on December 21, 2013.</p>