VitoMd and the Evil Machine2023-05-29T09:27:20-03:00https://vitomd.com/blogvitoMdList of online and open source chess applications2019-07-15T06:34:00-03:00https://vitomd.com/chess/free-online-chess-apps<p>This is a list of chess applications that I personally use and recommend.
The first 2 were created by me. You will find tactics generators, tactics trainers, opening builders and more.
<br />
<br /></p>
<h2> Chess tactics generator</h2>
<p><strong>Link:</strong> <a href="http://chesstacticsgenerator.vitomd.com/">http://chesstacticsgenerator.vitomd.com/</a></p>
<p><strong>Description: </strong>Generate chess tactics from your own lichess games.</p>
<p><a href="http://chesstacticsgenerator.vitomd.com/">
<img class="project-image" src="http://chesstacticsgenerator.vitomd.com/static/screen.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> Chess winning or blunder</h2>
<p><strong>Link:</strong> <a href="http://vitomd.com/chess-winning-or-blunder">http://vitomd.com/chess-winning-or-blunder</a></p>
<p><strong>Description: </strong>Answer if it's the best move or a blunder, from your own games. By vitomd</p>
<p><a href="http://vitomd.com/chess-winning-or-blunder">
<img class="project-image" src="http://vitomd.com/chess-winning-or-blunder/static/screen_tiny.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> Mistake-o-tron</h2>
<p><strong>Link:</strong> <a href="https://tailuge.github.io/mistake-o-tron/index.html">https://tailuge.github.io/mistake-o-tron/index.html</a></p>
<p><strong>Description: </strong>Find mistakes and blunders from your lichess games. By tailuge</p>
<p><a href="https://tailuge.github.io/mistake-o-tron/index.html">
<img class="project-image" src="../../assets/imgs/tools/tools_mistake.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> Opening tree visualization</h2>
<p><strong>Link:</strong> <a href="https://tailuge.github.io/chess-o-tron/public/openings/openingtree.html">https://tailuge.github.io/chess-o-tron/public/openings/openingtree.html</a></p>
<p><strong>Description: </strong>Watch your opening tree from your lichess games. By tailuge</p>
<p><a href="https://tailuge.github.io/chess-o-tron/public/openings/openingtree.html">
<img class="project-image" src="../../assets/imgs/tools/tools_opening.png" alt="image" />
</a></p>
<p>You also will find a lot of of chess experiments by tailuge here <a href="https://tailuge.github.io/chess-o-tron/">https://tailuge.github.io/chess-o-tron/</a></p>
<p><br />
<br /></p>
<h2> Blitz Tactics</h2>
<p><strong>Link:</strong> <a href="https://blitztactics.com/">https://blitztactics.com/</a></p>
<p><strong>Description: </strong>It's like an open source puzzle rush and tactic trainer with many options and modes. By linrock</p>
<p><a href="https://blitztactics.com/">
<img class="project-image" src="../../assets/imgs/tools/tools_blitz.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> Stockfish Evaluation Guide</h2>
<p><strong>Link:</strong> <a href="https://hxim.github.io/Stockfish-Evaluation-Guide/">https://hxim.github.io/Stockfish-Evaluation-Guide/</a></p>
<p><strong>Description: </strong>Investigate each part of Stockfish static evaluation function. By hxim</p>
<p><a href="https://hxim.github.io/Stockfish-Evaluation-Guide/">
<img class="project-image" src="../../assets/imgs/tools/tools_evaluation.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> PeshkaChess</h2>
<p><strong>Link:</strong> <a href="https://hxim.github.io/PeshkaChess/index.html">https://hxim.github.io/PeshkaChess/index.html</a></p>
<p><strong>Description: </strong>Great online chess analysis tool, import pgn , evaluate static features (the little s on top). By hximh</p>
<p><a href="https://hxim.github.io/PeshkaChess/index.html">
<img class="project-image" src="../../assets/imgs/tools/tools_peshka.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> Listudy</h2>
<p><strong>Link:</strong> <a href="https://listudy.org/">https://listudy.org/</a></p>
<p><strong>Description: </strong>Import a pgn file or lichess study and use spaced repetition to learn it. By ArneVogel</p>
<p><a href="https://listudy.org/">
<img class="project-image" src="../../assets/imgs/tools/tools_listudy.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> StudyOpenings</h2>
<p><strong>Link:</strong> <a href="http://www.studyopenings.com/">http://www.studyopenings.com/</a></p>
<p><strong>Description: </strong>Build your repertoire online. By jven</p>
<p><a href="http://www.studyopenings.com/">
<img class="project-image" src="https://raw.githubusercontent.com/jven/studyopenings/master/doc/build.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> Knight visualization</h2>
<p><strong>Link:</strong> <a href="https://hookdump.github.io/chessy/">https://hookdump.github.io/chessy/</a></p>
<p><strong>Description: </strong>Knight jumps visualization. By hookdump</p>
<p><a href="https://hookdump.github.io/chessy/">
<img class="project-image" src="../../assets/imgs/tools/tools_knight.png" alt="image" />
</a></p>
<p><br />
<br /></p>
<h2> Lichess</h2>
<p><strong>Link:</strong> <a href="https://lichess.org">https://lichess.org</a></p>
<p><strong>Description: </strong>The free and open source chess server. By ornicar</p>
<p><a href="https://lichess.org">
<img class="project-image" src="https://lichess.cdn.prismic.io/lichess/349b28f2ce92673040c65dfc5e9e9b7078345b23_home-tour-corres.png" alt="image" />
</a></p>
<h1 id="final-words">Final words</h1>
<p>Hope you find some of them useful.
You can check my <a href="http://vitomd.com/blog/projects/">list of personal projects</a> for more chess projects.</p>
How to start a Vue.js project fast and easy2018-09-06T09:34:00-03:00https://vitomd.com/coding/how-to-start-vue-js-project<p>I always forget how to start a new Vue.js project so I will write this tutorial as a reminder.
And it also will be helpful for everyone learning this awesome javascript framework.</p>
<h2 id="update-this-is-outdated">UPDATE: This is outdated</h2>
<p>This article is outdated because the vuejs-template is not longer maintained.
Currently the best way to create a Vue.js project is to use vue-cli. You can find all the information here: https://cli.vuejs.org/guide/creating-a-project.html#vue-create</p>
<h2 id="using-a-starter-template">Using a starter template</h2>
<p>I like to use <a href="https://github.com/vuejs-templates/webpack-simple">webpack-simple template</a> it’s easy and clean.
It has everything I need for simple projects. I used this template for some of my projects like: <a href="http://tacticalchess.vitomd.com/">Tactical Chess</a> and <a href="http://handandbrainchess.com/">handandbrainchess.com</a></p>
<p>Install vue-cli if you don’t have it and initialize the webpack-simple project</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ npm install -g vue-cli
$ vue init webpack-simple my-project
</code></pre></div></div>
<p>This will ask you some question about your project. Like name, description, author and license.</p>
<h2 id="use-a-css-framework">Use a css framework</h2>
<p>I like to use <a href="https://buefy.github.io/">Buefy</a> for UI components, it’s based on the <a href="https://bulma.io/">Bulma</a> css framework.
It’s easy to use and really nice.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd my-project
npm install buefy -save
</code></pre></div></div>
<p>Modify <code class="language-plaintext highlighter-rouge">main.js</code> to use Buefy</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>import Vue from 'vue'
import App from './App.vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
new Vue({
el: '#app',
render: h => h(App)
})
</code></pre></div></div>
<h2 id="install-and-run-the-project">Install and run the project</h2>
<p>This will install all packages</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install
</code></pre></div></div>
<p>This will run the server and open the browser <code class="language-plaintext highlighter-rouge">http://localhost:8080/</code></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm run dev
</code></pre></div></div>
<h2 id="deploy">Deploy</h2>
<p>I write a <code class="language-plaintext highlighter-rouge">deploy.sh</code> file that run rsync to deploy the dist folder to my server.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#!/usr/bin/env bash
rsync -vhr ./dist/ ssh-user@your-server.com:/your/server/folder/
</code></pre></div></div>
<p>I add a script to <code class="language-plaintext highlighter-rouge">package.json</code> called <code class="language-plaintext highlighter-rouge">publish</code> to build the code, copy some files and deploy.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"publish": "npm run build && cp ./static/. ./dist/ && cp index-static.html ./dist/index.html && ./deploy.sh"
</code></pre></div></div>
How to create and publish a Vue.js component2018-03-06T09:34:00-03:00https://vitomd.com/coding/how-to-create-publish-vue-js-component<p>It’s really easy to create a Vue.js component if you know how to do it.</p>
<p>I will give you a step by step guide to create a simple component. I created my <a href="https://github.com/vitogit/vue-dice-roller">Story dice roller</a> and my <a href="https://github.com/vitogit/vue-chessboard">vue-chessboard component</a> this way, so it works fine.</p>
<blockquote>
<p><img src="https://raw.githubusercontent.com/vitogit/vue-dice-roller/master/example.gif" alt="Store dice Roller gif" /></p>
</blockquote>
<h2 id="step-1-install">Step 1) Install</h2>
<p>You will need Node and npm installed in your system. An easy way to update Node is to <a href="https://askubuntu.com/questions/426750/how-can-i-update-my-nodejs-to-the-latest-version">install the n package</a></p>
<p>Install vue-cli if you don have it.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install -g @vue/cli
npm install -g @vue/cli-init
# Maybe you need to add sudo if you don't have writing access to global node modules.
</code></pre></div></div>
<p>Then we are going to use <a href="https://github.com/Akryum/vue-share-components">vue-share-components</a>, an excellent vue-cli template to publish components.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>vue init Akryum/vue-share-components vue-dice-roller
</code></pre></div></div>
<p>Here you have to select some options for your Vue.js component like: name, description, etc</p>
<h2 id="step-2-create-or-use-a-parent-project">Step 2) Create or use a parent project</h2>
<p>Vue.js components are best used from another project. You can check if it’s working correctly while you are developing it.</p>
<p>It’s really easy.</p>
<p>If you don’t have another project to check your component, don’t worry, we can create a new one really quickly using a simple template. Go to another folder and create a new parent project.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>vue init webpack-simple vue-component-checker
cd vue-component-checker
npm install
npm run dev
</code></pre></div></div>
<p>The server should be running on <code class="language-plaintext highlighter-rouge">localhost:8080</code>.</p>
<h2 id="step-3-link-your-component-and-parent-project">Step 3) Link your component and parent project</h2>
<p>In you component folder execute <code class="language-plaintext highlighter-rouge">npm link</code>. Then go to the parent project folder and link your new component with <code class="language-plaintext highlighter-rouge">npm link vue-dice-roller</code>. Now there is a link in the node_module folder so you can access your component from the parent project.</p>
<h2 id="step-4-code-your-component">Step 4) Code your component</h2>
<p>Access your component and run it.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> cd vue-dice-roller
npm install
npm run dev
</code></pre></div></div>
<p>This templates generated a lot of useful things. We can run a server and we can publish it to npm with just a simple command.</p>
<p>Edit the sample files to whatever you want. For instance <code class="language-plaintext highlighter-rouge">src/components/Test.vue</code> to <code class="language-plaintext highlighter-rouge">src/components/DiceRoller.vue</code>. Modify the file to change the component name like this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nx">template</span><span class="o">></span>
<span class="o"><</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="dl">"</span><span class="s2">dice-roller</span><span class="dl">"</span><span class="o">></span>
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span> <span class="nx">vue</span><span class="o">-</span><span class="nx">dice</span><span class="o">-</span><span class="nx">roller</span><span class="o">!<</span><span class="sr">/h1</span><span class="err">>
</span> <span class="o"><</span><span class="sr">/div</span><span class="err">>
</span><span class="o"><</span><span class="sr">/template</span><span class="err">>
</span>
<span class="o"><</span><span class="nx">script</span><span class="o">></span>
<span class="k">export</span> <span class="k">default</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">dice-roller</span><span class="dl">'</span><span class="p">,</span>
<span class="nx">data</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">something</span><span class="dl">'</span><span class="p">,</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="p">}</span>
<span class="o"><</span><span class="sr">/script</span><span class="err">>
</span></code></pre></div></div>
<p>Modify the first part of <code class="language-plaintext highlighter-rouge">src/index.js</code> to export the component correctly, like this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">DiceRoller</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./components/DiceRoller.vue</span><span class="dl">'</span>
<span class="c1">// Install the components</span>
<span class="k">export</span> <span class="kd">function</span> <span class="nx">install</span> <span class="p">(</span><span class="nx">Vue</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">Vue</span><span class="p">.</span><span class="nx">component</span><span class="p">(</span><span class="dl">'</span><span class="s1">dice-roller</span><span class="dl">'</span><span class="p">,</span> <span class="nx">DiceRoller</span><span class="p">)</span>
<span class="p">}</span>
<span class="c1">// Expose the components</span>
<span class="k">export</span> <span class="p">{</span>
<span class="nx">DiceRoller</span><span class="p">,</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="step-5-using-the-component">Step 5) Using the component</h2>
<p>Let’s go to the project folder and modify the html from <code class="language-plaintext highlighter-rouge">src/App.vue</code> to import our component.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><template></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"app"</span><span class="nt">></span>
<span class="nt"><dice-roller/></span>
<span class="nt"></div></span>
<span class="nt"></template></span>
<span class="nt"><script></span>
<span class="k">import</span> <span class="p">{</span><span class="nx">DiceRoller</span><span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vue-dice-roller</span><span class="dl">'</span>
<span class="k">export</span> <span class="k">default</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">app</span><span class="dl">'</span><span class="p">,</span>
<span class="na">components</span><span class="p">:</span> <span class="p">{</span>
<span class="nx">DiceRoller</span>
<span class="p">},</span>
<span class="nx">data</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">msg</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Welcome to Your Vue.js App</span><span class="dl">'</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nt"></script></span>
</code></pre></div></div>
<p>Now run both your component and your project with <code class="language-plaintext highlighter-rouge">npm run dev </code>. If you go to <code class="language-plaintext highlighter-rouge">localhost:80880</code> you should see <code class="language-plaintext highlighter-rouge">Hello vue-dice-roller!</code></p>
<h2 id="step-6-publish-the-component-to-npm">Step 6) Publish the component to npm</h2>
<p>Login to npm with <code class="language-plaintext highlighter-rouge">npm adduser</code> and run:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm publish
</code></pre></div></div>
<p>The component will be built in production mode before getting published on npm.</p>
<h2 id="step-7-completed">Step 7) Completed</h2>
<p>There is no step 7. You can go to npm and see your component. Here is mine
<a href="https://www.npmjs.com/package/vue-dice-roller">https://www.npmjs.com/package/vue-dice-roller</a></p>
<p>If you update the code remember to edit the version field in package.json before publishing.</p>
<p>That’s it. Happy coding</p>
Chess Guardian and my Vue.js chessboard component2018-02-02T09:34:00-03:00https://vitomd.com/coding/vue-js-chessboard-component<p>I built a chess webapp using <a href="http://vuejs.org">Vue.js</a> to answer positional questions from your own games. It´s called Chess Guardian. It uses chess.com API to get the games that you played in that site and my <a href="https://github.com/vitogit/vue-chessboard">Vue.js Chessboard component</a> for the chessboard UI.</p>
<p>You can check the project here: <a href="http://vitomd.com/vue-chess-guardian/">Chess Guardian</a>.
It´s open source so you can see the code in <a href="https://github.com/vitogit/vue-chess-guardian">github</a>.</p>
<p><a href="http://vitomd.com/vue-chess-guardian/">
<img src="http://vitomd.com/vue-chess-guardian/static/screen.png" alt="code" />
</a></p>
<h2 id="vuejs-chessboard-component">Vue.js Chessboard component</h2>
<p>You can find the component and install instruction in github: <a href="https://github.com/vitogit/vue-chessboard">Vue.js Chessboard</a></p>
<ul>
<li>It uses <a href="https://github.com/jhlywa/chess.js">chess.js</a> for chess movements and validations.</li>
<li>It uses <a href="https://github.com/ornicar/chessground">chessground</a> for chessboard UI.</li>
</ul>
<h2 id="examples">Examples</h2>
<p>Here you can see a simple live example. You can see other features like threats detection, info, promotions, etc in the <a href="http://vitomd.com/vue-chessboard-examples/">example page</a></p>
<div id="app">
<chessboard></chessboard>
</div>
<p><br />
Check <a href="https://github.com/vitogit/vue-chessboard">Vue.js Chessboard</a> and <a href="http://vitomd.com/vue-chess-guardian/">Chess Guardian</a>.</p>
<link rel="stylesheet" href="../../projects/chessboard.css" />
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="../../projects/chessboard.js"></script>
<script>
new Vue({
el: '#app',
components: {
VueChessboard
}
});
</script>
<p><br /></p>
<h2 id="want-to-see-all-my-chess-related-projects">Want to see all my chess related projects?</h2>
<p>Check <a href="http://vitomd.com/blog/projects/">My projects</a> for a full detailed list.</p>
Best book summary websites2017-07-18T18:34:00-03:00https://vitomd.com/books/best-book-summary-websites<p>I love reading books and find new and exciting books to read, but is not an easy task. I try to read book reviews to know about a new book but they don´t always tell what you want to know. Something a lot better is to read books notes, or books quotes, or summaries so you know exactly what the book is about, and their key points.</p>
<p><img src="https://vitomd.com/blog/assets/imgs/lib3.jpeg" alt="code" /></p>
<p>Here is the list that sites that I like to visit when I want to find or learn about some book (mostly non-fiction):</p>
<p>1.) <a href="https://sivers.org/book">Derek Sivers Books</a>
This is one of the best. Derek Sivers add notes on each book he reads, there are a large number of books covered. Also you can sort the books by title, newest, or best.</p>
<p>2.) <a href="http://jamesclear.com/book-summaries">James Clear summaries</a>
Popular Books Summarized in 3 Sentences or Less, but you can access a full detailed summary for each book.</p>
<p>3.) <a href="https://github.com/mgp/book-notes">Mgp book notes</a>
This is a simple github page so is not user friendly, but the book notes are extensive and detailed. There are some good programming books.</p>
<p>4.) <a href="http://fourminutebooks.com/summaries/">4 minute books</a>
For each book there are 3 major lessons summarized so you can digest the key points of an entire book in 4 minutes or less. It is well organized and has high quality content.</p>
Riot.js presentation2017-02-10T10:10:00-03:00https://vitomd.com/coding/riot-js-presentation<p>I gave an introductory presentation about Riot.js some time ago. It was called “Introduction to Riot.js: a powerful minimalistic UI DOM library with clean and concise syntax”.</p>
<p>Many people at the presentation didn’t knew about Riot.js and were pleased about his functionality, simple style and how fast you can have something working.<br />
The presentation outline is this:</p>
<ul>
<li>What is Riot.js
<ul>
<li>Component (tag) definition</li>
<li>Using tags</li>
<li>Passing parameters</li>
<li>Accessing the DOM</li>
<li>Accessing methods</li>
<li>Loops</li>
<li>Conditionals</li>
<li>Tag Communication</li>
</ul>
</li>
<li>Pros & Cons</li>
<li>Resources</li>
<li>Conclusions</li>
</ul>
<p>The presentation (Updated for Riot.js v3.2.0) is full of simple live examples in plunker so you can play and understand as you read the presentation.</p>
<script async="" class="speakerdeck-embed" data-id="29f10db8680846b098e1f64e5032e19f" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
<p>Direct link: <a href="https://speakerdeck.com/vitomd/riot-dot-js-introduction">https://speakerdeck.com/vitomd/riot-dot-js-introduction</a></p>
<h2 id="more-info">More info</h2>
<p>If you are interested in Riot.js here are some other posts that can help you get started</p>
<ol>
<li>
<p><a href="http://vitomd.com/blog/coding/hello-riot-js-quick-tutorial-about-this-awesome-lib/">Hello Riot.js : Introductory tutorial</a></p>
</li>
<li>
<p><a href="http://vitomd.com/blog/coding/tag-communication-in-riot-js-part-1/">Riot.js tag communication part 1</a></p>
</li>
<li>
<p><a href="http://vitomd.com/blog/coding/tag-communication-in-riot-js-part-2">Riot.js tag communication part 2</a></p>
</li>
</ol>
gDriveSync.js: Javascript wrapper library for Google Drive API v32017-02-09T11:39:00-03:00https://vitomd.com/coding/gdrivesync-js-javascript-wrapper-library-for-google-drive-api-v3<p>I was working on a personal project to organize my ideas, tasks and information. It was called Note Manager. It used Tinymce as the text editor, Jquery to perform dom and event handling, Node.js as backend and a simple file to persist the information. It worked pretty welI, but I stopped working on it because I wanted to deploy it to Heroku but it doesn’t persist files, so I changed the approach. I decided to use a more lightweight approach and build the app using javascript, Tinymce and Google Drive for persistence.</p>
<p>You can still check the old code with Node and file persistent here: <a href="https://github.com/vitogit/node_note_manager">Note Manager</a></p>
<p>I tried to sync the webapp with Google Drive using the <a href="https://developers.google.com/drive/v3/reference/">Google Drive API for js v3</a> but it was frustrating because some methods didn’t work as expected. So after a lot of headaches I decided to build a wrapper around the API, and that´s how gDriveSync.js was born.</p>
<p>I used it successfully in the successor of Note Manager webapp, it´s called <a href="https://github.com/vitogit/sorter">Sorter</a> and you can check the code and how it uses the gDriveSync.js library.</p>
<p>I shared the library on twitter and somehow it showed up in <a href="http://javascriptweekly.com/issues/311">Javascript Weekly</a>, then it had some <a href="https://twitter.com/JavaScriptDaily/status/802164436412858368">retweets</a> and multiple stars on <a href="https://github.com/vitogit/gDriveSync.js">Github</a>.</p>
<p>A lot of people found it useful because it helped them to build Javascript apps that sync with google drive, so you don’t have to build a backend system to store data. Also you can use different google accounts to login and sync the data. You can load, save, list files and folders</p>
<p>The <a href="https://github.com/vitogit/gDriveSync.js/blob/master/README.md">Readme</a> has everything you need to start using the library and also I added examples so you know exactly how to use it. So check it, and let me know if it’s useful, if you want some features, or if there is some bug.
<a href="https://github.com/vitogit/gDriveSync.js">gDriveSync.js</a></p>
Deploy a javascript/Node app to Heroku in 20 minutes2017-02-03T09:15:00-03:00https://vitomd.com/coding/deploy-a-javascript-node-app-to-heroku-in-20-minutes<h2 id="intro">Intro</h2>
<p>I created a static app in Javascript to organize ideas, tasks and information using bullet points and hashtags. It´s called Sorter and you can take a look here: <a href="https://github.com/vitogit/sorter">Sorter</a>. It sync notes to google drive using my other library <a href="https://github.com/vitogit/gDriveSync.js">gDriveSync.js</a>.</p>
<p>I wanted to deploy the app somewhere for free so I decided to create a simple Node application to display the static app and deploy it to Heroku. You will need git, node, npm and heroku.</p>
<p><img src="https://vitomd.com/blog/assets/imgs/travel2.jpeg" alt="code" /></p>
<h2 id="0-setup">0) Setup</h2>
<p>Create a new folder called StaticServer. Create a git repository.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mkdir </span>StaticServer
<span class="nb">cd </span>StaticServer
git init
</code></pre></div></div>
<p>Create a <code class="language-plaintext highlighter-rouge">.gitignore</code> file to exclude node_modules</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>node_modules
npm-debug.log
</code></pre></div></div>
<h2 id="1-installing-express">1) Installing Express</h2>
<p>First create a package.json file to add Express as a dependency.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm init
npm <span class="nb">install </span>express <span class="nt">--save</span>
</code></pre></div></div>
<p>Heroku recommend to list the engines, so first get the version number for node and npm.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>node <span class="nt">-v</span>
npm <span class="nt">-v</span>
</code></pre></div></div>
<p>We will need to add the engines to our package.json. Like this</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
"name": "Sorter",
"version": "1.0.0",
"description": "Sorter is a webapp to organize ideas, tasks and information using bullet points and hashtags.",
"main": "index.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.14.0"
},
"engines": {
"node": "6.4.x",
"npm": "3.10.x"
},
"author": "vitogit",
"license": "MIT"
}
</code></pre></div></div>
<h2 id="2-creating-the-server">2) Creating the Server</h2>
<p>Create a file server.js like this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var express = require('express');
var app = express();
var fs = require('fs');
app.use(express.static(__dirname + '/public'));
app.listen(process.env.PORT || 4000);
module.exports = {app}
</code></pre></div></div>
<p>It will show all static html pages from the public folder.</p>
<h2 id="3-procfile">3) Procfile</h2>
<p>We need to tell Heroku how to run our app. Just create a new file called <code class="language-plaintext highlighter-rouge">Procfile</code> with this content:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>web: node server.js
</code></pre></div></div>
<h2 id="4-pushing-to-heroku">4) Pushing to Heroku</h2>
<p>Create a public folder and add some static html pages, then commit.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add <span class="nb">.</span>
git commit <span class="nt">-m</span> <span class="s2">"Initial commit"</span>
</code></pre></div></div>
<p>Login to Herok, create the app and push.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>heroku login
heroku create
git push heroku master
</code></pre></div></div>
<p>Finally just open the new deployed app and check that is working fine.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>heroku open
</code></pre></div></div>
<h2 id="bonus-nodemon">Bonus: nodemon</h2>
<p>You can use nodemon to reload html changes in folders while you are developing your app.
Install it globally:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">-g</span> nodemon
</code></pre></div></div>
<p>Add a script to the package.json to reload the server when js or html changes happens.</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s2">"dev"</span>: <span class="s2">"nodemon server.js -e js,html"</span>,
</code></pre></div></div>
Migrating this blog from Wordpress to Jekyll - Part 22016-12-29T10:01:00-03:00https://vitomd.com/blog/migrating-this-blog-from-wordpress-to-jekyll-part-2<p>Here is the second part of my experience migrating my blog to Jekyll. You can check the first part here: <a href="http://vitomd.com/blog/blog/migrating-this-blog-from-wordpress-to-jekyll-part-1/">Migrating this blog from Wordpress to Jekyll - Part 1</a></p>
<p><img src="https://vitomd.com/blog/assets/imgs/blog1.jpeg" alt="code" /></p>
<p>I will explain how to import comments, add SEO, add custom domain, add syntax highlight and write the first post in Jekyll. Let´s begin.</p>
<h3 id="importing-comments">Importing Comments</h3>
<p>Importing comments was really easy, as I used Disqus the process was just to copy a little javascript, the universal embed code. <a href="https://help.disqus.com/customer/portal/articles/472138-jekyll-installation-instructions">More info here</a></p>
<h3 id="adding-seo">Adding SEO</h3>
<p>There are basically four things to have in mind to improve the SEO (Search Engine Optimization) of your blog.</p>
<p>1) <strong>Improve site URLs:</strong> They have to be descriptive and friendly. I already modified how the URLs look in the previous post, so nothing to do here.</p>
<p>2) <strong>Custom 404 Pages:</strong> The theme that I choosed already had a 404 page so nothing to do here.</p>
<p>3) <strong>Sitemap:</strong> I installed the <a href="https://github.com/jekyll/jekyll-sitemap">sitemap plugin</a>.
It´s just a two step process:</p>
<ul>
<li>
<p>Add gem <code class="language-plaintext highlighter-rouge">jekyll-sitemap</code> to your site’s Gemfile and run bundle</p>
</li>
<li>
<p>Add the following to your site’s <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
</li>
</ul>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gems:
- jekyll-sitemap
</code></pre></div></div>
<p>Run <code class="language-plaintext highlighter-rouge">jekyll serve</code> and check the generated <code class="language-plaintext highlighter-rouge">_site</code> folder for the sitemap.xml if it’s correct.</p>
<p>4) <strong>SEO</strong> I installed the <a href="https://github.com/jekyll/jekyll-seo-tag">SEO plugin</a>
This is a 3 step process:</p>
<ul>
<li>
<p>Add gem <code class="language-plaintext highlighter-rouge">jekyll-seo-tag</code> to your site’s Gemfile and run bundle</p>
</li>
<li>
<p>Add the following to your site’s <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
</li>
</ul>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gems:
- jekyll-seo-tag
</code></pre></div></div>
<ul>
<li>Add {{seo }} right before <code class="language-plaintext highlighter-rouge"></head></code> in your site’s template(s):</li>
</ul>
<p>The SEO tag will use the variables in your site’s <code class="language-plaintext highlighter-rouge">_config.yml</code> like title, description, url, author, twitter user name, etc to generate meta tags that help search engines to learn about your site. There are other options, that you can read in the Usage section in the SEO plugin github.</p>
<p>Here is some options that I use in my <code class="language-plaintext highlighter-rouge">_config.yml</code> file</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">twitter</span><span class="pi">:</span>
<span class="na">username</span><span class="pi">:</span> <span class="s">vitomd</span>
<span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Helping</span><span class="nv"> </span><span class="s">developers</span><span class="nv"> </span><span class="s">improve</span><span class="nv"> </span><span class="s">their</span><span class="nv"> </span><span class="s">code</span><span class="nv"> </span><span class="s">and</span><span class="nv"> </span><span class="s">their</span><span class="nv"> </span><span class="s">life"</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">VitoMd</span><span class="nv"> </span><span class="s">and</span><span class="nv"> </span><span class="s">the</span><span class="nv"> </span><span class="s">Evil</span><span class="nv"> </span><span class="s">Machine"</span>
<span class="na">logo</span><span class="pi">:</span> <span class="s">logo.png</span>
<span class="na">social</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">vitomd</span>
<span class="na">links</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">https://twitter.com/vitomd</span>
<span class="pi">-</span> <span class="s">https://github.com/vitogit</span>
<span class="pi">-</span> <span class="s">http://stackoverflow.com/users/5886252/vitomd</span>
</code></pre></div></div>
<p>Also you can add some options to each post, like author, title, related image, etc</p>
<div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Migrating</span><span class="nv"> </span><span class="s">this</span><span class="nv"> </span><span class="s">blog</span><span class="nv"> </span><span class="s">from</span><span class="nv"> </span><span class="s">Wordpress</span><span class="nv"> </span><span class="s">to</span><span class="nv"> </span><span class="s">Jekyll</span><span class="nv"> </span><span class="s">-</span><span class="nv"> </span><span class="s">Part</span><span class="nv"> </span><span class="s">1"</span>
<span class="na">author</span><span class="pi">:</span>
<span class="na">twitter</span><span class="pi">:</span> <span class="s">vitomd</span>
<span class="na">categories</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">Blog</span>
<span class="na">tags</span><span class="pi">:</span> <span class="pi">[</span><span class="nv">Blog</span><span class="pi">,</span> <span class="nv">Jekyll</span><span class="pi">,</span> <span class="nv">Wordpress</span><span class="pi">]</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/assets/imgs/blog1.jpeg</span>
</code></pre></div></div>
<p>This is useful when your posts are shared in twitter, they will look nice and with a related image and proper title.</p>
<p><em>If you want some more details you can read this post: <a href="http://jekyll.tips/jekyll-casts/seo-in-jekyll/">http://jekyll.tips/jekyll-casts/seo-in-jekyll/</a></em></p>
<h3 id="custom-domain-in-github-pages">Custom domain in Github pages</h3>
<p>1) Go to your repository settings , add your custom domain , in my case <a href="vitomd.com/blog">vitomd.com/blog</a></p>
<p>2) I wanted to support also <a href="www.vitomd.com/blog">www.vitomd.com/blog</a>, github do this automatically redirecting both ways.</p>
<p>3) I followed the instructions in <a href="https://help.github.com/articles/setting-up-an-apex-domain/">https://help.github.com/articles/setting-up-an-apex-domain/</a> to configure my custom domain.</p>
<h3 id="syntax-highlighting">Syntax highlighting</h3>
<p>I had some problems with the syntax highlighting, basically wasn not working. After some digging I found that my forked theme had an old Jekyll version that had some bugs. So I deleted the gemfile.lock and <code class="language-plaintext highlighter-rouge">bundle install </code> again.</p>
<p>In <code class="language-plaintext highlighter-rouge">_config.yml</code> I change <code class="language-plaintext highlighter-rouge">highlighter: pygments</code> to <code class="language-plaintext highlighter-rouge">highlighter: rouge</code> and it worked but I wasn’t pleased with the syntax coloring.</p>
<p>To check which themes are avaialble in rouge executing <code class="language-plaintext highlighter-rouge">rougify help style</code> will give you a list like:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>available themes:
base16, base16.dark, base16.monokai, base16.monokai.light, base16.solarized, base16.solarized.dark, colorful, github, gruvbox, gruvbox.light, molokai, monokai, monokai.sublime, thankful_eyes
</code></pre></div></div>
<p>and then to generate the syntax.css
<code class="language-plaintext highlighter-rouge">rougify style monokai.sublime > _includes/css/syntax.css</code></p>
<p>The imported blog post weren’t highlighted property because they were in HTML , so what I did was to convert some of them to markdown format and edit them a bit, using this awesome tool <a href="https://github.com/domchristie/to-markdown">https://github.com/domchristie/to-markdown</a></p>
<h3 id="writing-our-first-post-in-jekyll">Writing our first post in Jekyll</h3>
<p>To write my posts in markdown format I use <a href="https://stackedit.io">Stackedit</a> synced with google drive so I can use it online and ATOM with <a href="https://atom.io/packages/markdown-writer">markdown-writer</a> and the Markdown preview to write locally.</p>
<p>To create a new post in markdown-writer just open the ATOM palette <code class="language-plaintext highlighter-rouge">cmd+shift+p</code> and select <code class="language-plaintext highlighter-rouge">Markdown Writer: New post</code> , add the title and edit the front-matter, like author, categories, tags, image, etc
A new file will be added to <code class="language-plaintext highlighter-rouge">_posts</code> folder. Write your post and preview it. <code class="language-plaintext highlighter-rouge">cmd+shift+p</code> and select <code class="language-plaintext highlighter-rouge">Markdown preview</code></p>
<p>Also run your local server to make sure everything is fine.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll serve --baseurl=""
</code></pre></div></div>
<p>Then just add, commit and push your new post. It will be online immediately.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add .
git commit -m "New post"
git push origin HEAD
</code></pre></div></div>
Migrating this blog from Wordpress to Jekyll - Part 12016-12-13T11:21:00-03:00https://vitomd.com/blog/migrating-this-blog-from-wordpress-to-jekyll-part-1<h2 id="intro">Intro</h2>
<p>I wanted to move my blog from Wordpress to a static site. I had some problems with my hosting provider, that made me rethink if I really needed a hosting. I found that Github could host static sites using Jekyll and my site and blog are mostly static files.</p>
<p>Also I aimed to something faster, lighter and with better github markdown integration. My options were Jekyll and Hugo. Both are really good so you can’t go wrong with any of them. I choose Jekyll because it’s seems a little more mature and it have some interesting tools to choose, also because the Blog theme that I liked was a Jekyll one.</p>
<p><img src="https://vitomd.com/blog/assets/imgs/blog1.jpeg" alt="code" /></p>
<h2 id="theme">Theme</h2>
<p>I searched themes here:</p>
<ul>
<li><a href="http://jekyllthemes.org/">http://jekyllthemes.org/</a></li>
<li><a href="https://jekyllthemes.io/">https://jekyllthemes.io/</a></li>
<li><a href="http://jekyll.tips/templates/">http://jekyll.tips/templates/</a></li>
<li><a href="http://themes.jekyllrc.org/">http://themes.jekyllrc.org/</a></li>
</ul>
<p>I found this nice theme <a href="https://jekyllthemes.io/theme/12337267/lagom">https://jekyllthemes.io/theme/12337267/lagom</a> and the installation was really easy (make sure you have ruby on rails installed)</p>
<p>It was just:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> Fork the repository
git clone https://github.com/YOUR-USER/lagom
cd lagom
bundle update && bundle install
jekyll serve
</code></pre></div></div>
<p><em>Note: I had an error <code class="language-plaintext highlighter-rouge">An error occurred while installing json (1.8.1), and Bundler cannot continue</code> when doing just <code class="language-plaintext highlighter-rouge">bundle install</code> .I added <code class="language-plaintext highlighter-rouge">bundle update</code> to solve the problem.</em></p>
<p>Then I just added my personal info in the <code class="language-plaintext highlighter-rouge">_data/theme.yml</code> file, changed the logo, favicon, little css tweaks and it was ready.</p>
<h2 id="migrating-data-from-wordpress-to-jekyll">Migrating data from Wordpress to Jekyll</h2>
<p>There are multiple ways to import your data, I will talk about two. Using the Wordpress.com migrating tool (import a xml file) that I highly recommend and the second using the Wordpress migrating tool (import a database dump), that I don’t recommend because it’s slower and more error prone.</p>
<h3 id="using-wordpresscom-tool">Using Wordpress.com tool</h3>
<p>I used the wordpress.com importer version <a href="http://import.jekyllrb.com/docs/wordpressdotcom/">http://import.jekyllrb.com/docs/wordpressdotcom/</a> (even when my Wordpress blog is hosted) because is faster and really good for what I needed.</p>
<p>I went to my Wordpress admin page -> tools ->export post.
This will download an xml file with all the posts, I called it wordpress.xml .</p>
<p>First install some required gems:
<code class="language-plaintext highlighter-rouge">gem install jekyll-import hpricot open_uri_redirections</code></p>
<p>And then run the command to import the wordpress.xml file</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ruby -rubygems -e 'require "jekyll-import";
JekyllImport::Importers::WordpressDotCom.run({
"source" => "wordpress.xml",
"no_fetch_images" => false,
"assets_folder" => "assets"
})'
</code></pre></div></div>
<p>This will import all the posts to the <code class="language-plaintext highlighter-rouge">_post</code> and <code class="language-plaintext highlighter-rouge">_draft</code> folders. Have in mind that this method will not import tags and other metadata, I didn’t have problems with that so I used this method.</p>
<p>The generated URL for the post was rather messy like <code class="language-plaintext highlighter-rouge">/coding/2012/04/21/hello-world.html</code> instead of just the old <code class="language-plaintext highlighter-rouge">coding/hello-world/</code> so I wanted to keep the same url.</p>
<p>It was a simple change adding this line <code class="language-plaintext highlighter-rouge">permalink: /:categories/:title/</code> to <code class="language-plaintext highlighter-rouge">_config.yml</code> . The only problem was that if the post had multiple categories the url looked like cat1/cat2/cat3/post . I wanted just the first category, so I modified each post to have only one category but multiple tags (In case I add some feature to filter by tag).</p>
<p>The post metadata ended looking like this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>categories:
- Coding
tags: [Coding, Javascript, RiotJs, Testing]
</code></pre></div></div>
<h3 id="deploying-to-github">Deploying to Github</h3>
<p>I had problem with the relative paths, because locally I access http://localhost:4000 but in production the address is vitomd.com/blog , so I had problems with the blog part. The solution was to add the variable
<code class="language-plaintext highlighter-rouge">baseurl: /blog</code> to <code class="language-plaintext highlighter-rouge">config.yml</code> and then use it in the urls</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">class=</span><span class="s">"more_about"</span> <span class="na">href=</span><span class="s">"https://vitomd.com/blog/about"</span><span class="nt">></span>More about me<span class="nt"></a></span>
</code></pre></div></div>
<p>and locally call the Jekyll server like this: <code class="language-plaintext highlighter-rouge">jekyll serve --baseurl=""</code>.</p>
<h3 id="import-blog-posts-using-wordpress-importer-not-recommended">Import blog posts using wordpress importer (not recommended)</h3>
<p>The process is to run the migrating tools that will connect to a database and import the data, but my hosting provider didn’t have an easy way to connect to the database from outside so I decided to export the database and load it locally. I will talk about the problems that I found , at least when doing it in Ubuntu 16.</p>
<p>I have problems with missing gems (mysql2 and sequel) and also I had to install <code class="language-plaintext highlighter-rouge">sudo apt-get install libmysqlclient-dev</code> because mysql2 installation was failing</p>
<p>First install the required gems:
<code class="language-plaintext highlighter-rouge">gem install unidecode sequel mysql2 htmlentities</code>
I went to my hosting provider and exported my blog database (mySql), to a file called wordpress.sql.</p>
<p>Then I imported the database locally, and did this steps:</p>
<p>Install mysql server with a password
<code class="language-plaintext highlighter-rouge">sudo apt-get install mysql-server</code></p>
<p>Access mysql server, it will ask for the password
<code class="language-plaintext highlighter-rouge">mysql -u root -p</code></p>
<p>Create the database
<code class="language-plaintext highlighter-rouge">CREATE DATABASE wordpress;</code></p>
<p>Select the database to use
<code class="language-plaintext highlighter-rouge">USE wordpress;</code></p>
<p>Execute the sql script (mine was wordpress.sql) to import the database
<code class="language-plaintext highlighter-rouge">source wordpress.sql</code></p>
<p>Now we run the script with the dbname, user and password. I removed the option <code class="language-plaintext highlighter-rouge">"socket" => "",</code> because it gave me errors</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ruby -rubygems -e 'require "jekyll-import";
JekyllImport::Importers::WordPress.run({
"dbname" => "",
"user" => "",
"password" => "",
"host" => "localhost",
"table_prefix" => "wp_",
"site_prefix" => "",
"clean_entities" => true,
"comments" => true,
"categories" => true,
"tags" => true,
"more_excerpt" => true,
"more_anchor" => true,
"extension" => "html",
"status" => ["publish"]
})'
</code></pre></div></div>
<p>After importing I saw that there was some problem with the encoding, probably because I didn’t create the database correctly but it was a good way to test the problems that you could find if you choose this approach, so I don´t recommend it.</p>
<h3 id="next">Next</h3>
<p>In the next post I will talk about, importing comments, adding SEO, using a custom domain and writing my first Jekyll post.</p>
Tag communication in Riot.js - part 22016-12-06T10:51:00-03:00https://vitomd.com/coding/tag-communication-in-riot-js-part-2<h2 id="introduction">Introduction</h2>
<p>This is a follow up from our past article about <a href="http://vitomd.com/blog/coding/tag-communication-in-riot-js-part-1/">tag communication in Riot</a></p>
<h2 id="any-to-any-communication">Any to any communication</h2>
<p>In this tutorial I will explain the last form of communication, and implement some patterns to make the solution simple and scalable.</p>
<p>Let´s imagine that our application has several components that can interact between them. We should aspire to have independent components that will work in any application, do one thing and do it well. In general is better to have dumb components, this means that they have little logic and just display the information received. If the tags are parent-child the communication is easy , we just use the opts variable provided by Riot, but if the context is different we should use another pattern.</p>
<h2 id="the-observable-pattern">The Observable pattern</h2>
<p>Riot.js provides a really useful tool called Observable, is based on the Observable pattern and is used to receive and send events (or messages). It´s goal is to isolate components without coupling them. Riot tags automatically are observables, but you can add the Observable support to any javascript object.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="kd">function</span> <span class="nx">Car</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Make Car instances observable</span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">observable</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
<span class="c1">// listen to 'start' event</span>
<span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">start</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// engine started</span>
<span class="p">})</span>
<span class="p">}</span>
<span class="c1">// make a new Car instance</span>
<span class="kd">var</span> <span class="nx">car</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Car</span><span class="p">()</span>
<span class="c1">// trigger 'start' event</span>
<span class="nx">car</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="dl">'</span><span class="s1">start</span><span class="dl">'</span><span class="p">)</span>
</code></pre></div></div>
<p>This is an example from the Riot.js documentation <a href="http://riotjs.com/es/api/observable/">http://riotjs.com/es/api/observable/</a> , it´s make the instances of Car observable so the object is able to trigger and listen to events.</p>
<p>This is a list of some useful methods that the Observable provides:</p>
<ul>
<li><strong>el.on(events, callback):</strong> Listen to the given space separated list of events and execute the callback each time an event is triggered</li>
<li><strong>el.one(event, callback):</strong> Listen to the given space separated list of events and execute the callback at most once</li>
<li><strong>el.off(events):</strong> Removes the given space separated list of events listeners.</li>
<li><strong>el.trigger(event, arg1 … argN):</strong> Execute all callback functions that listen to the given event. Any number of extra parameters can be provided for the listeners.</li>
</ul>
<p>The two most useful methods are <code class="language-plaintext highlighter-rouge">on</code> that will listen to events and <code class="language-plaintext highlighter-rouge">trigger</code> that will send a message.
In this example we trigger the <code class="language-plaintext highlighter-rouge">hello-event</code> with a parameter <em>Hello!</em> and it will be listened by the on method, the parameter will be received and the function executed.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">// listen to hello-event and expect arguments</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="nx">hello</span><span class="o">-</span><span class="nx">event</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">greeting</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">self</span><span class="p">.</span><span class="nx">hi</span> <span class="o">=</span> <span class="nx">greeting</span>
<span class="p">})</span>
<span class="c1">// trigger start event with one parameter</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello-event</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Hello!</span><span class="dl">'</span><span class="p">)</span>
</code></pre></div></div>
<h3 id="global-communication">Global communication</h3>
<p>To make a global communication system in an application, we are going to create a global Store where all tags can send and receive messages. We are going to communicate two tags called Leia and Luke that in this case don´t belong to a father. This kind of communication is useful when we have few components and can manage the app logic in the store.</p>
<p>First we have the global store, where we add the observable support, so we can trigger and listen for events.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//Store.js</span>
<span class="kd">var</span> <span class="nx">Store</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">observable</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
<span class="p">}</span>
</code></pre></div></div>
<p>In the index.html we will import the Store and attach it to the riot variable so it´s global and accessible to all tags, like this</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">riot</span><span class="p">.</span><span class="nx">store</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Store</span><span class="p">()</span>
</code></pre></div></div>
<p>So the index.html will look like</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><leia></leia></span>
<span class="nt"><luke></luke></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"riot/tag"</span> <span class="na">src=</span><span class="s">"./luke.tag"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"riot/tag"</span> <span class="na">src=</span><span class="s">"./leia.tag"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"./Store.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">store</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Store</span><span class="p">()</span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">* </span><span class="dl">'</span><span class="p">)</span>
<span class="nt"></script></span>
</code></pre></div></div>
<p>In the Leia tag we will have a button that when pressed will trigger and send the message to the store</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><leia></span>
<span class="nt"><button</span> <span class="na">onclick=</span><span class="s">{say_hi}</span><span class="nt">></span>Say Hi to Luke<span class="nt"></button></span>
<span class="nt"><script></span>
<span class="nx">say_hi</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">store</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Hello, from Leia</span><span class="dl">'</span><span class="p">)</span>
<span class="p">}</span>
<span class="nt"></script></span>
<span class="nt"></leia></span>
</code></pre></div></div>
<p>Meanwhile in Luke tag we will listen for the <code class="language-plaintext highlighter-rouge">hello</code> event and when we receive that message, will update the <code class="language-plaintext highlighter-rouge">hi</code> variable and show it in the screen.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><luke></span>
<span class="nt"><span></span>{this.hi}<span class="nt"></span></span>
<span class="nt"><script></span>
<span class="nb">self</span> <span class="o">=</span> <span class="k">this</span>
<span class="nb">self</span><span class="p">.</span><span class="nx">hi</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Luke</span><span class="dl">'</span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">store</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">greeting</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">self</span><span class="p">.</span><span class="nx">hi</span> <span class="o">=</span> <span class="nx">greeting</span>
<span class="nb">self</span><span class="p">.</span><span class="nx">update</span><span class="p">()</span>
<span class="p">})</span>
<span class="nt"></script></span>
<span class="nt"></luke></span>
</code></pre></div></div>
<p>This method can be used to communicate any tag in your application easily and decoupled, because when you send a message and there are no receivers it will behave well without errors, making the components more independent and the application modular and robust.</p>
<p><a href="http://plnkr.co/edit/fOgZa0AKdz2phJCIQxP0?p=preview">Here is the working example</a></p>
<h2 id="other-options">Other options</h2>
<p>Riot.js doesn’t force you to use a specific pattern for component communication. For example you can use Flux or Redux patterns if you want.</p>
<p>There are some popular implementation like RiotControl (flux-like event controller) that uses the Observable pattern and can manage multiple stores, that it can work very well with many components as we organize the application logic in several stores. Here is a simple example:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">RiotControl</span><span class="p">.</span><span class="nx">addStore</span><span class="p">(</span><span class="k">new</span> <span class="nx">TodoStore</span><span class="p">())</span> <span class="c1">// Create and register the store in central dispatch.</span>
<span class="nx">RiotControl</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="dl">'</span><span class="s1">todo_add</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">title</span><span class="p">:</span> <span class="nb">self</span><span class="p">.</span><span class="nx">text</span> <span class="p">})</span> <span class="c1">// Send message from any tag</span>
<span class="nx">RiotControl</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">todos_changed</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">items</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// Receive the message in the Store</span>
<span class="nb">self</span><span class="p">.</span><span class="nx">items</span> <span class="o">=</span> <span class="nx">items</span>
<span class="nb">self</span><span class="p">.</span><span class="nx">update</span><span class="p">()</span>
<span class="p">})</span>
</code></pre></div></div>
<p>Access this link for more info about <a href="https://github.com/jimsparkman/RiotControl">RiotControl</a></p>
Tag communication in Riot.js - part 12016-11-29T13:52:00-03:00https://vitomd.com/coding/tag-communication-in-riot-js-part-1<h2 id="introduction">Introduction</h2>
<p>This tutorial assumes that you are familiar with Riot.js, if not check this introductory tutorial: <a href="http://vitomd.com/blog/coding/hello-riot-js-quick-tutorial-about-this-awesome-lib/">Hello Riot.js</a>.
In Riot.js you can build components called tags, they can have html, javascript and css in the same file and can handle events, methods and variables.</p>
<p><img src="https://vitomd.com/blog/assets/imgs/communication.jpeg" alt="code" /></p>
<p>I´m going to explain how tags can communicate.
There are basically four types of tag communication:</p>
<ul>
<li>Parent to child</li>
<li>Child to parent</li>
<li>Sibling to sibling</li>
<li>Any to any</li>
</ul>
<h3 id="parent-to-child">Parent to child</h3>
<p>You can pass params (options) from the parent to the child and then reference them with the opts variable.
In the example, we are passing the <code class="language-plaintext highlighter-rouge">hi</code> option in the parent and then using {opts.hi} in the child.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><vader></span>
<span class="nt"><luke</span> <span class="na">hi=</span><span class="s">"Hi child"</span><span class="nt">></luke></span>
<span class="nt"></vader></span>
//luke.tag
<span class="nt"><luke></span>
<span class="nt"><span></span>{opts.hi}<span class="nt"></span></span>
<span class="nt"></luke></span>
</code></pre></div></div>
<p>In general is better to builds dumb components, with little logic and just use opts to show the data.</p>
<h3 id="child-to-parent">Child to Parent</h3>
<p>Riot.js provides access to the parent tag using the parent variable. Have in mind that using this approach could couple your components, so they will not be independent components.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><vader></span>
<span class="nt"><luke></luke></span>
<span class="nt"><script></span>
<span class="k">this</span><span class="p">.</span><span class="nx">hi</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Hi, I am your father</span><span class="dl">"</span>
<span class="nt"></script></span>
<span class="nt"></vader></span>
//luke.tag
<span class="nt"><luke></span>
<span class="nt"><span></span>{this.parent.hi}<span class="nt"></span></span>
<span class="nt"></luke></span>
</code></pre></div></div>
<p><em><a href="http://plnkr.co/edit/OrNn06LMNH9sGp72DOv6?p=preview">Check the working example on plunker</a></em></p>
<p>Another option is to use a callback function, so the components don´t get coupled. We send a function from the parent to the child using the opts variable and that function will get executed by the child in the parent context.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><vader></span>
<span class="nt"><luke</span> <span class="na">handle_hi=</span><span class="s">{say_hi}</span><span class="nt">></luke></span>
<span class="nt"><span></span>{this.hi} <span class="nt"></span></span>
<span class="nt"><script></span>
<span class="k">this</span><span class="p">.</span><span class="nx">hi</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">I am your father</span><span class="dl">"</span>
<span class="nx">say_hi</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hi</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">I am your son</span><span class="dl">"</span>
<span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">()</span>
<span class="p">}</span>
<span class="nt"></script></span>
<span class="nt"></vader></span>
<span class="nt"><luke></span>
<span class="nt"><span</span> <span class="na">onclick=</span><span class="s">{opts.handle_hi}</span><span class="nt">></span>LUKE<span class="nt"></span></span>
<span class="nt"></luke></span>
</code></pre></div></div>
<p><em><a href="http://plnkr.co/edit/Rz1mOJNwzpiFTFIZcI3M?p=preview">Check the working example on plunker</a></em></p>
<p>In this example, we defined the say_hi function in the parent and we pass it to the child as a parameter (handle_hi). When the onclick event fires in the child it will call that function and it will get executed in the parent context.</p>
<p><img src="https://vitomd.com/blog/assets/imgs/desk1.jpeg" alt="code" /></p>
<h3 id="sibling-to-sibling">Sibling to Sibling</h3>
<p>Siblings share the parent, so we can access the parent and from there access their children using the <code class="language-plaintext highlighter-rouge">tags</code> variable. For instance, Leia tag access the <code class="language-plaintext highlighter-rouge">parent.tags.luke.hi</code> to read the hi variable in the Luke tag.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><vader></span>
<span class="nt"><leia></leia></span>
<span class="nt"><luke></luke></span>
<span class="nt"></vader></span>
<span class="nt"><leia></span>
<span class="nt"><span></span>{this.parent.tags.luke.hi}<span class="nt"></span></span>
<span class="nt"><script></span>
<span class="k">this</span><span class="p">.</span><span class="nx">hi</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Hi bro</span><span class="dl">'</span>
<span class="nt"></script></span>
<span class="nt"></leia></span>
<span class="nt"><luke></span>
<span class="nt"><span></span>{this.parent.tags.leia.hi}<span class="nt"></span></span>
<span class="nt"><script></span>
<span class="k">this</span><span class="p">.</span><span class="nx">hi</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Hi sis</span><span class="dl">'</span>
<span class="nt"></script></span>
<span class="nt"></luke></span>
</code></pre></div></div>
<p><em>Warning: This approach is not recommended as the components will get couple. For this case could be better to use our next pattern.</em></p>
<h3 id="any-to-any">Any to Any</h3>
<p>Here we can use the Observable tool that Riot.js provides to trigger and listen to events. Also there are some popular implementation like RiotControl.
A more detailed tutorial will come shortly about this subject in part 2 of this tutorial.</p>
My Console and github cheatsheets2016-11-23T10:28:00-03:00https://vitomd.com/github/my-console-and-github-cheatsheets<p>I will share some useful commands, cheatsheets and tips that I use to speed up a little my development process.</p>
<h2 id="github">Github</h2>
<p>I use alias for the most used commands in github. So, the first thing I do when I´m in a new computer is this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">git</span> <span class="nx">config</span> <span class="o">--</span><span class="nb">global</span> <span class="nx">alias</span><span class="p">.</span><span class="nx">co</span> <span class="nx">checkout</span>
<span class="nx">git</span> <span class="nx">config</span> <span class="o">--</span><span class="nb">global</span> <span class="nx">alias</span><span class="p">.</span><span class="nx">s</span> <span class="nx">status</span>
</code></pre></div></div>
<p>Here is a list of github commands that are not used often but are really useful:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// diff with last commit</span>
<span class="nx">git</span> <span class="nx">diff</span> <span class="nx">HEAD</span><span class="o">^</span> <span class="nx">HEAD</span>
<span class="c1">// diff with specific commit</span>
<span class="nx">git</span> <span class="nx">diff</span> <span class="nx">commit_id</span> <span class="nx">HEAD</span>
<span class="c1">// remove last commit soft (don´t delete code)</span>
<span class="nx">git</span> <span class="nx">reset</span> <span class="o">--</span><span class="nx">soft</span> <span class="nx">HEAD</span><span class="o">~</span>
<span class="c1">// remove last commit hard (delete code)</span>
<span class="nx">git</span> <span class="nx">reset</span> <span class="o">--</span><span class="nx">hard</span> <span class="nx">HEAD</span><span class="o">~</span>
<span class="c1">// point to the remote branch</span>
<span class="nx">git</span> <span class="nx">reset</span> <span class="o">--</span><span class="nx">hard</span> <span class="nx">upstream</span><span class="o">/</span><span class="nx">development</span>
<span class="c1">// move to last used branch</span>
<span class="nx">git</span> <span class="nx">co</span> <span class="o">-</span>
<span class="c1">// search commit local or remote</span>
<span class="nx">git</span> <span class="nx">branch</span> <span class="o">--</span><span class="nx">contains</span> <span class="nx">commitid</span>
<span class="nx">git</span> <span class="nx">branch</span> <span class="o">-</span><span class="nx">r</span> <span class="o">--</span><span class="nx">contains</span> <span class="nx">commitid</span>
<span class="c1">//Search for an added or removed word (or string)</span>
<span class="nx">git</span> <span class="nx">log</span> <span class="o">-</span><span class="nx">Sword</span> <span class="c1">// string</span>
<span class="nx">git</span> <span class="nx">log</span> <span class="o">-</span><span class="nx">Gword</span> <span class="c1">// regular expression</span>
<span class="c1">//show changed files in a commit</span>
<span class="nx">git</span> <span class="nx">diff</span><span class="o">-</span><span class="nx">tree</span> <span class="o">--</span><span class="nx">no</span><span class="o">-</span><span class="nx">commit</span><span class="o">-</span><span class="nx">id</span> <span class="o">--</span><span class="nx">name</span><span class="o">-</span><span class="nx">only</span> <span class="o">-</span><span class="nx">r</span> <span class="nx">commitid</span>
<span class="c1">//show last commited files</span>
<span class="nx">git</span> <span class="nx">show</span> <span class="o">--</span><span class="nx">name</span><span class="o">-</span><span class="nx">only</span>
</code></pre></div></div>
<h2 id="console">Console</h2>
<p>Here are some useful commands to use in the console/terminal:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">ctrl</span><span class="o">+</span><span class="nx">a</span> <span class="c1">// go to start of the line</span>
<span class="nx">ctrl</span><span class="o">+</span><span class="nx">e</span> <span class="c1">// go the end of the line</span>
<span class="nx">ctrl</span><span class="o">+</span><span class="nx">u</span> <span class="c1">// clean line</span>
<span class="nx">ctrl</span><span class="o">+</span><span class="nx">w</span> <span class="c1">// delete a word</span>
<span class="nx">alt</span><span class="o">+</span><span class="nx">click</span> <span class="c1">// goto that exact place in the text</span>
<span class="nx">ctrl</span><span class="o">+</span><span class="nx">l</span> <span class="c1">// clean screen (same as clear)</span>
<span class="nx">ctrl</span><span class="o">+</span><span class="nx">d</span> <span class="c1">// close terminal (same as exit)</span>
</code></pre></div></div>
<h2 id="alias">Alias</h2>
<p>You can add alias to your .bash_profile, just edit the file and then do
<code class="language-plaintext highlighter-rouge">. .bash_profile</code> to reload it. Use the <code class="language-plaintext highlighter-rouge">alias</code> command to check the alias in your system and <code class="language-plaintext highlighter-rouge">which name1 name2</code> to check if name1 and name2 are already defined functions in your system.</p>
<p>Some useful alias related to github and rails and javascript development. The first is my favourite, to get the current branch name.</p>
<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">alias </span><span class="nv">cb</span><span class="o">=</span><span class="s1">'git rev-parse --abbrev-ref HEAD'</span>
<span class="nb">alias </span><span class="nv">rdm</span><span class="o">=</span><span class="s1">'rake db:migrate'</span>
<span class="nb">alias </span><span class="nv">brc</span><span class="o">=</span><span class="s1">'bundle exec rails c'</span>
<span class="nb">alias </span><span class="nv">bi</span><span class="o">=</span><span class="s1">'bundle install'</span>
<span class="nb">alias </span><span class="nv">ni</span><span class="o">=</span><span class="s1">'npm install'</span>
<span class="nb">alias </span><span class="nv">gpud</span><span class="o">=</span><span class="s1">'git pull upstream development:development'</span>
</code></pre></div></div>
<h2 id="bonus">Bonus</h2>
<p>Sometimes I forgot an alias name, so another useful tool is clipMenu (<a href="www.clipmenu.com">www.clipmenu.com</a> for mac) its a clipboard manager that keep the history of copied items and also it can store snippets or long commands that you use frequently. I just do <code class="language-plaintext highlighter-rouge">cmd+ctrl+v</code> to select from the list what I want to paste.</p>
Testing Javascript code with Mocha and Chai2016-11-20T10:51:00-03:00https://vitomd.com/testing/testing-javascript-code-with-mocha-and-chai<h2 id="introduction">Introduction</h2>
<p>Testing in Javascript has become more and more important. There are some robust test frameworks to choose like: Mocha.js, Jasmine, QUnit or Tape.</p>
<p>Mocha (<a href="http://mochajs.org">http://mochajs.org</a>) is a feature-rich JavaScript test framework running on Node.js and in the browser. Chai (<a href="http://chaijs.com">http://chaijs.com</a>) is an assertion library that can be paired with any javascript testing framework. In this short tutorial we will show how to work with Mocha and Chai to test a simple Stack structure written in plain Javascript.</p>
<p><img src="https://vitomd.com/blog/assets/imgs/desk1.jpeg" alt="code" /></p>
<h2 id="step-by-step-guide">Step by Step guide</h2>
<p>1) We are going use Plunker to write the code. Go to <a href="http://plnkr.co/edit/">http://plnkr.co/edit/</a>.
Add the Mocha and Chai libraries: click on the index.html page and then go to the right toolbar and click <code class="language-plaintext highlighter-rouge">Find and external libraries</code>. Search for mocha-chai and click the <code class="language-plaintext highlighter-rouge">add</code> button. You will see 3 new external resources, mocha.js, chai.js and mocha.css.</p>
<p>2) We are going to create a Stack structure using Test Driven Development (TDD). This means that first we will write a test, run the test and see that is failing, write code so the test pass, refactor de code if needed. Double click in the script.js file so you can change the name to stack.js, also in the index.html change the script reference from script.js to stack.js. Then click in <code class="language-plaintext highlighter-rouge">new file</code> and create a new file called stack-spec.js.</p>
<p>3) In this step we will configure the test libraries. The <code class="language-plaintext highlighter-rouge">describe</code> keyword group tests based on the same subject. The <code class="language-plaintext highlighter-rouge">it</code> keyword references a test with a description. The description should make sense when reading, like <code class="language-plaintext highlighter-rouge">It creates a Stack</code>, and not <code class="language-plaintext highlighter-rouge">It Stack Creation</code>.</p>
<p>Chai gives 2 different assertion styles: TDD and BDD (Behavior-driven development). For TDD it uses the assert style, and for BDD has 2 flavours: expect and should. I prefer the BDD style and expect flavour because they are more descriptive.</p>
<p>We will need to add this to stack-spec.js to use the expect assertion style:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">expect</span> <span class="o">=</span> <span class="nx">chai</span><span class="p">.</span><span class="nx">expect</span>
</code></pre></div></div>
<p>We need to run and show the test result, so in the index.html delete the “Hello Plunker!” line and write this instead:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">id=</span><span class="s">"mocha"</span><span class="nt">></div></span>
<span class="nt"><script></span><span class="nx">mocha</span><span class="p">.</span><span class="nx">setup</span><span class="p">(</span><span class="dl">'</span><span class="s1">bdd</span><span class="dl">'</span><span class="p">)</span><span class="nt"></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"stack-spec.js"</span><span class="nt">></script></span>
<span class="nt"><script></span><span class="nx">mocha</span><span class="p">.</span><span class="nx">run</span><span class="p">()</span><span class="nt"></script></span>
</code></pre></div></div>
<p>The <code class="language-plaintext highlighter-rouge">div</code> will show our tests results, <code class="language-plaintext highlighter-rouge">mocha.setup(‘bdd’)</code> is to select the bdd style, <code class="language-plaintext highlighter-rouge">src=stack-specjs”</code> is to load our test and <code class="language-plaintext highlighter-rouge">mocha.run()</code> it will run our tests.
Click the run button in plunker. Each time you change the code it will run automatically.</p>
<p>4) Writing the first test: The api reference for Chai can be found here <a href="http://chaijs.com/api/bdd/">http://chaijs.com/api/bdd/</a>. Add this to the stack-spec.js file</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">Stack</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">creates a Stack</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">expect</span><span class="p">(</span><span class="k">new</span> <span class="nx">Stack</span><span class="p">()).</span><span class="nx">to</span><span class="p">.</span><span class="nx">exist</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>As you can see the code is easy to understand, we expect the new Stack() to exist.
In this case <code class="language-plaintext highlighter-rouge">exist</code> means <code class="language-plaintext highlighter-rouge">Asserts that the target is neither null nor undefined.</code> that is exactly what we want.</p>
<p>The test should fail with <code class="language-plaintext highlighter-rouge">ReferenceError: Stack is not defined</code></p>
<p>5) We are going to write the Stack structure to make the test pass. Add this code to stack.js</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">Stack</span><span class="p">(){</span>
<span class="p">}</span>
</code></pre></div></div>
<p>The code will automatically run (if not, click run button) and the test should pass.</p>
<p>6) We know that the Stack needs to have an array to hold the data, we will call it <code class="language-plaintext highlighter-rouge">data</code>.
We will use the <code class="language-plaintext highlighter-rouge">exist</code> method, and also the <code class="language-plaintext highlighter-rouge">an</code> method to assert the array type. In general is not good practice to assert two things in the same test, but in this case we are testing the same behaviour. Add this new test in the stack-spec.js file, inside the Stack describe.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">has a data array</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">stack</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Stack</span><span class="p">();</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">stack</span><span class="p">.</span><span class="nx">data</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">exist</span><span class="p">;</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">stack</span><span class="p">.</span><span class="nx">data</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">be</span><span class="p">.</span><span class="nx">an</span><span class="p">(</span><span class="dl">'</span><span class="s1">array</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<p>The test will fail so we are going to write the code to make it pass. Add it to the stack.js file</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">Stack</span><span class="p">(){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
</code></pre></div></div>
<p>7) We need 2 methods, one to push elements and other to remove elements from the top of the stack. We will call them <code class="language-plaintext highlighter-rouge">push</code> and <code class="language-plaintext highlighter-rouge">pop</code>.</p>
<p>8) Now I´m going to test and implement the push method.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//stack-spec.js</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">push an element to the stack</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">stack</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Stack</span><span class="p">()</span>
<span class="nx">stack</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">stack</span><span class="p">.</span><span class="nx">data</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">have</span><span class="p">.</span><span class="nx">lengthOf</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<p>I’m using the lengthOf method from Chai to test if the data is added. The test should fail and then we need to implement the push method in stack.js.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//stack.js</span>
<span class="kd">function</span> <span class="nx">Stack</span><span class="p">(){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">push</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>9) Finally the pop method that will remove and return the top element.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//stack-spec.js</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">pop an element from the stack</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">stack</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Stack</span><span class="p">();</span>
<span class="nx">stack</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">stack</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">be</span><span class="p">.</span><span class="nx">equal</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">stack</span><span class="p">.</span><span class="nx">data</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">have</span><span class="p">.</span><span class="nx">lengthOf</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>
<p>We know that the push method works, so we are pushing and popping an element and comparing it with the <code class="language-plaintext highlighter-rouge">equal</code> method from Chai</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1">//stack.js</span>
<span class="k">this</span><span class="p">.</span><span class="nx">pop</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span>
<span class="kd">var</span> <span class="nx">top</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">top</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="summary">Summary:</h2>
<p>We learnt how to setup mocha+chai and how to use some test methods like: <code class="language-plaintext highlighter-rouge">exist</code>, <code class="language-plaintext highlighter-rouge">an</code>, <code class="language-plaintext highlighter-rouge">lengthOf</code> and <code class="language-plaintext highlighter-rouge">equal</code>.</p>
<h4 id="full-code-on-plunker">Full code on Plunker</h4>
<iframe src="https://embed.plnkr.co/plunk/65lpOH?show=app,preview" frameborder="0" width="100%" height="480px"></iframe>
Hello Riot.js:quick tutorial about this awesome lib2016-11-16T14:00:00-03:00https://vitomd.com/coding/hello-riot-js-quick-tutorial-about-this-awesome-lib<h2 id="introduction">Introduction</h2>
<p>Riot.js (<a href="http://riotjs.com">http://riotjs.com</a>) is a powerful minimalistic UI/DOM javascript library with clean and concise syntax . It has a tiny size(10.17kb). You can write the code in plain Javascript, CoffeeScript, Typescript or ES6. Its goal is to build reusable components (called tags).</p>
<p>In this tutorial I´m going to show some basic features and code examples, so you can see how easy is to build a javascript application using Riot.js. We are going to use Riot.js 3.2 .</p>
<p><img src="https://vitomd.com/blog/assets/imgs/lamp.jpeg" alt="code" /></p>
<h2 id="first-look">First look</h2>
<p>I´m going to use Plunker to quickly show you the features, but if you want to do it locally in your machine, I recommend you download the latest version of Node.js and clone (or download) a Riot starter kit, so you can quickly begin playing with Riot.js. For example, I created this project <a href="https://github.com/vitogit/riot_starter_kit">riot_starter_kit</a> that includes a test framework and a server to run the project.</p>
<h2 id="writing-our-first-tag">Writing our first tag</h2>
<p>In Riot.js a <code class="language-plaintext highlighter-rouge">tag</code> is a component that contains HTML, javascript and CSS in the same file. You can use variables in HTML, call functions and manage events. We are going to create an example.tag to show some Riot.js features.</p>
<p>Go to <a href="http://plnkr.co/edit/">http://plnkr.co/edit/</a>, double click on script.js to change the filename to example.tag and add this content:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><example></span>
<span class="nt"><h1></span>{ message }<span class="nt"></h1></span>
<span class="nt"><script></span>
<span class="k">this</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Hello Riot</span><span class="dl">'</span>
<span class="nt"></script></span>
<span class="nt"></example></span>
</code></pre></div></div>
<p>This tag contains html and also the script tag that wrap our javascript code.
You can see that we can display variables in html easily with <code class="language-plaintext highlighter-rouge">{ }</code></p>
<p>Then we need to load the Riot.js library and also load our tag. Edit the index page to look like this:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><example></example></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/riot/3.2.0/riot+compiler.min.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"riot/tag"</span> <span class="na">src=</span><span class="s">"./example.tag"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">*</span><span class="dl">'</span><span class="p">)</span>
<span class="nt"></script></span>
</code></pre></div></div>
<p>We are loading the tag in the html using just <code class="language-plaintext highlighter-rouge"><example></example></code>, then we load the Riot.js library and also our tag (check that the type is <code class="language-plaintext highlighter-rouge">riot/tag</code>). Then we call <code class="language-plaintext highlighter-rouge">riot.mount('*')</code> to load all our tags.</p>
<p>Run the Plunker and you should see the Hello Riot message (if you have any problem check the link to the full code at the end of this tutorial)
Now we have a working Riot.js project with an example tag.</p>
<p>As you can see we are not using semicolons in the code. This is part of the minimalistic style that Riot.js follows.</p>
<h2 id="passing-parameters-to-the-tag">Passing parameters to the tag</h2>
<p>We can pass parameters to the tag and then read them using the <code class="language-plaintext highlighter-rouge">opts</code> property in our tag. So let´s change the tag code to :</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><example></span>
<span class="nt"><h1></span>{ message }<span class="nt"></h1></span>
<span class="nt"><script></span>
<span class="k">this</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">message</span>
<span class="nt"></script></span>
<span class="nt"></example></span>
</code></pre></div></div>
<p>In the index page pass the message parameter to the tag, like this.
<code class="language-plaintext highlighter-rouge"><example message="Hello Riot.js (from parameters)"></example></code>
It should print the message correctly.</p>
<p>Also Riot has the option to pass parameters when you mount the tag, for example:
<code class="language-plaintext highlighter-rouge">riot.mount('example', {message:'Hello'})</code></p>
<h2 id="event-handling">Event handling</h2>
<p>Now we want to add an onclick event in our message that will change the text to upper case when clicked. We are going to add the onclick event in the <code class="language-plaintext highlighter-rouge">h1</code> tag and then add an uppercase method inside the script section, like this:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><example></span>
<span class="nt"><h1</span> <span class="na">onclick=</span><span class="s">{uppercase}</span><span class="nt">></span>{ message }<span class="nt"></h1></span>
<span class="nt"><script></span>
<span class="k">this</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">message</span>
<span class="nx">uppercase</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">message</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">()</span>
<span class="p">}</span>
<span class="nt"></script></span>
<span class="nt"></example></span>
</code></pre></div></div>
<p>You can see that our method is defined with a similar syntax as es6 ,but is not es6 is a syntactic sugar provided by Riot.js. Also you can write the methods like this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">this</span><span class="p">.</span><span class="nx">uppercase</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">message</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">()</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="accessing-the-dom">Accessing the DOM</h2>
<p>Riot.js 3 can access html elements using the ref attribute (old versions of riot used the id or name as reference).
To show this we will add an input that will change the message in a keyup event. We add the ref attribute with a unique name and then we get the value using <code class="language-plaintext highlighter-rouge">this.refs.input_text</code></p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o"><</span><span class="nx">input</span> <span class="nx">onkeyup</span><span class="o">=</span><span class="p">{</span><span class="nx">show_text</span><span class="p">}</span> <span class="nx">ref</span><span class="o">=</span><span class="dl">"</span><span class="s2">input_text</span><span class="dl">"</span><span class="o">/></span>
</code></pre></div></div>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">this</span><span class="p">.</span><span class="nx">show_text</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">message</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">input_text</span><span class="p">.</span><span class="nx">value</span>
<span class="p">}</span>
</code></pre></div></div>
<p>This works like this: each time we press a key, it will fire the event and call our method (show_text). Then it will access the html input using the reference and get the value with <code class="language-plaintext highlighter-rouge">this.refs.input_text.value</code> and assign it to the message.
It will automatically update the tag.</p>
<h2 id="conditionals">Conditionals</h2>
<p>Conditionals let you show / hide elements based on a condition. Riot.js provides tree options:</p>
<ul>
<li><strong>if:</strong> add (true value) or remove (false value) the element from the document.</li>
<li><strong>show:</strong> show the element using style=”display: ‘’” when the value is true.</li>
<li><strong>hide:</strong> hide the element using style=”display: none” when the value is true.</li>
</ul>
<p>We will add a new button that when clicked will hide/show our message:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="o"><</span><span class="nx">button</span> <span class="nx">onclick</span><span class="o">=</span><span class="p">{</span><span class="nx">toggle_message</span><span class="p">}</span><span class="o">></span> <span class="nx">toggle</span> <span class="nx">message</span> <span class="o"><</span><span class="sr">/button</span><span class="err">>
</span></code></pre></div></div>
<p>Add a new boolean variable to know if we should show or hide our message:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">this</span><span class="p">.</span><span class="nx">show_message</span> <span class="o">=</span> <span class="kc">true</span>
</code></pre></div></div>
<p>Add the <code class="language-plaintext highlighter-rouge">show</code> conditional based on the previous boolean:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="o"><</span><span class="nx">h1</span> <span class="nx">show</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">show_message</span><span class="p">}</span> <span class="nx">onclick</span><span class="o">=</span><span class="p">{</span><span class="nx">uppercase</span><span class="p">}</span><span class="o">></span><span class="p">{</span> <span class="nx">message</span> <span class="p">}</span><span class="o"><</span><span class="sr">/h1</span><span class="err">>
</span></code></pre></div></div>
<p>Finally, create a new method that will show/hide the message. This will be called from our button:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="k">this</span><span class="p">.</span><span class="nx">toggle_message</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show_message</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">show_message</span>
<span class="p">}</span>
</code></pre></div></div>
<p>That´s it! if you want to check the full code go here: <a href="http://plnkr.co/edit/MBU5Lf?p=preview">http://plnkr.co/edit/MBU5Lf?p=preview</a></p>
Minimalistic testing in the browser with Riot.js and Mocha2016-10-07T02:46:44-03:00https://vitomd.com/coding/minimalistic-testing-in-the-browser-with-riot-js-and-mocha<h2 id="introduction">Introduction</h2>
<p>In the last tutorial (<a href="http://vitomd.com/blog/coding/tutorial_tdd_riot_mocha/">http://vitomd.com/blog/coding/tutorial_tdd_riot_mocha/</a>) I explained how to test Riot.js tags using Karma, phantomJs and Mocha, that´s works very well to execute the tests from the command line. But there is a more minimalistic approach that doesn’t need Karma or phantomJs, in case you want to execute the tests in the browser. I will use the same test cases from the previous tutorial.</p>
<p><img src="https://vitomd.com/blog/assets/imgs/desk2.jpeg" alt="code" /></p>
<p>The mocha before hook looked like this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">before</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span>
<span class="p">});</span>
</code></pre></div></div>
<p>We are going to just change two things.
If we execute this it will not work because the tag will be undefined, we need to use the riot.compile method:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">before</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span>
<span class="p">})</span>
<span class="p">});</span>
</code></pre></div></div>
<p>Now we got the tag properly loaded, but still the tests will fail because they run before our tag finish loading.
So to fix this we need to use the <code class="language-plaintext highlighter-rouge">done</code> method from Mocha, to wait until the tag is loaded:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">before</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">riot</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span>
<span class="nx">done</span><span class="p">()</span>
<span class="p">})</span>
<span class="p">});</span>
</code></pre></div></div>
<p>And that´s it, now our tests will run just fine.
Online version: <a href="http://plnkr.co/edit/BFOijJ?p=preview">http://plnkr.co/edit/BFOijJ?p=preview</a></p>
Tutorial: Using TDD with Riot+mocha+chai2016-03-07T02:00:13-03:00https://vitomd.com/coding/tutorial_tdd_riot_mocha<h2 id="introduction">Introduction</h2>
<p>TDD using mocha+chai to test Riot tags.
Riot is a React- like user interface library <a href="http://riotjs.com">http://riotjs.com</a>.
Mocha is a feature-rich JavaScript test framework <a href="https://mochajs.org/">https://mochajs.org/</a>
Chai is a BDD / TDD assertion library <a href="http://chaijs.com/">http://chaijs.com/</a></p>
<p><img src="https://vitomd.com/blog/assets/imgs/desk3.jpeg" alt="code" /></p>
<h2 id="installation">Installation</h2>
<p>You can read the tutorial, or just install the repo from <a href="https://github.com/vitogit/tdd-mocha-chai-riot">https://github.com/vitogit/tdd-mocha-chai-riot</a></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone https://github.com/vitogit/tdd-mocha-chai-riot
cd tdd-mocha-chai-riot
npm install
</code></pre></div></div>
<p>And then just <code class="language-plaintext highlighter-rouge">npm test</code> to run the tests.</p>
<h2 id="tutorial">Tutorial</h2>
<p>This is a simple tutorial about how to setup an environment to do TDD (Test driven development) using karma+mocha+chai to test Riot tags and their properties and functions.You are going to need the last version of Node. Download it from here <a href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a></p>
<p>We are going to use ChromeHeadless because we need to test the DOM, so an easy setup is to use Karma to run the test.</p>
<h3 id="dependencies">Dependencies</h3>
<p>Create a new folder called tdd-mocha-chai-riot and generate the package.json file like this</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>mkdir tdd-mocha-chai-riot
npm init
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">npm init</code> will generate the package.json file, it will ask you for some info, use the defaults values. Then edit package.json and add the devDependencies (this is how it will look https://github.com/vitogit/tdd-mocha-chai-riot/blob/master/package.json)</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> "devDependencies": {
"chai": "^4.1.2",
"karma": "^3.0.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.5",
"karma-riot": "^2.0.0",
"mocha": "^5.2.0"
},
"dependencies": {
"riot": "3.11.1"
}
</code></pre></div></div>
<p>Or also you can execute this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install chai karma karma-chai karma-mocha karma-mocha-reporter karma-chrome-launcher karma-riot --save-dev
npm install riot
</code></pre></div></div>
<h3 id="config">Config</h3>
<p>Then we need to create a new file to config Karma, create a new file karma.conf.js with this content</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha','chai','riot'],
plugins: [
'karma-mocha',
'karma-mocha-reporter',
'karma-chrome-launcher',
'karma-chai',
'karma-riot'
],
files: [
{
pattern: 'node_modules/chai/chai.js', watched: false
},
'src/**/*.tag',
'test/**/*.js'
],
preprocessors: {
'**/*.tag': ['riot']
},
browsers: ['ChromeHeadless'],
reporters: ['mocha'],
failOnEmptyTestSuite: false,
singleRun: true
})
}
</code></pre></div></div>
<p>Then edit the scripts section from the package.json file, so when we run <code class="language-plaintext highlighter-rouge">npm test</code> or <code class="language-plaintext highlighter-rouge">npm run test</code> it will start karma and execute the tests.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> "scripts": {
"test": "karma start"
}
</code></pre></div></div>
<h3 id="first-tdd-iteration-a-hello-tag-exists">First TDD iteration: a hello tag exists</h3>
<p>Each step in the tutorial is related to a commit <a href="https://github.com/vitogit/tdd-mocha-chai-riot/commits/master">https://github.com/vitogit/tdd-mocha-chai-riot/commits/master</a> so you can see the changes.</p>
<p>Let’s setup our first test, create a test folder, create a hello-spec.js file and copy this code</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">Hello world spec</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div></div>
<p>Try <code class="language-plaintext highlighter-rouge">npm test</code> (or npm run test), to see if karma is running fine, you should see</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SUMMARY:
V 0 tests completed
</code></pre></div></div>
<p>I added failOnEmptyTestSuite: false in the karma.config.js file because by default Karma returns an error if you have an empty test.</p>
<p>Our goal is to create a tag that prints Hello {name} inside a H1 tag. So to write the test, the first thing we need to do is to create a tag in the dom called ‘hello’. We just use this line
<code class="language-plaintext highlighter-rouge">var html = document.createElement('hello')</code> and then we are going to append that node to the body <code class="language-plaintext highlighter-rouge">document.body.appendChild(html)</code>
and mount it, like this <code class="language-plaintext highlighter-rouge">riot.mount('hello')</code>
This is going to return an array of tags. Since we just added one, we are going to write this to get the mounted tag:
<code class="language-plaintext highlighter-rouge">tag = riot.mount('hello')[0]</code>
Then we will check if the tag exist (not undefined and not null) with the mocha method <code class="language-plaintext highlighter-rouge">expect(tag).to.exist</code>
So the test code will look like this</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="nx">describe</span><span class="p">(</span><span class="dl">'</span><span class="s1">Hello world spec</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">mounts a hello tag</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">tag</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">exist</span>
<span class="p">})</span>
<span class="p">})</span>
</code></pre></div></div>
<p>Run the test again <code class="language-plaintext highlighter-rouge">npm test</code>, and of course it will fail with <code class="language-plaintext highlighter-rouge">expected undefined to be truthy</code>
So we need to create the tag. To do so, we create a new ‘src’ folder and a hello.tag file with this content:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><hello></hello>
</code></pre></div></div>
<p>Run <code class="language-plaintext highlighter-rouge">npm test</code> again, and it will pass. So we completed the first TDD iteration.</p>
<h3 id="second-tdd-iteration-has-a-name-property">Second TDD iteration: has a name property</h3>
<p>Now that we know that the tag exist we can add also this <code class="language-plaintext highlighter-rouge">expect(tag.isMounted).to.be.true</code> to check if it was mounted, because riot tags have a isMounted property. In general it’s not recommended to have two expectations in the same test, but as we are testing the same behavior I think it’s fine . You can read more here <a href="http://betterspecs.org/#single">http://betterspecs.org/#single</a> . We can update the expectation description to “mount a hello tag” to describe exactly what we are testing.</p>
<p>The next goal is: given a name parameter, print Hello {name}. We need a property called name, so we can pass it as a parameter (when mounting) and write Hello {name}. Let’s write a failing test like this</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">has a name property </span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">tag</span><span class="p">.</span><span class="nx">name</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">exist</span>
<span class="p">})</span>
</code></pre></div></div>
<p>Run the test and of course it fails. Let’s make it pass. Edit the hello.tag and write this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><hello>
<script>
this.name = ''
</script>
</hello>
</code></pre></div></div>
<p>This way, Riot will know that our tag has a “name” property. Run the test again and it will work.</p>
<h3 id="refactor-move-duplicate-code-to-before-hook">Refactor: Move duplicate code to before hook</h3>
<p>Now that we have confidence that the code is good, let’s refactor it a little bit. As you can see we have duplicate code in our tests. Let’s use the mocha before hook, so it will only execute one time. Move the duplicate code to a before hook, editing the tests</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">before</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span>
<span class="p">});</span>
</code></pre></div></div>
<p>Run the tests again, and it should pass.</p>
<h3 id="third-iteration-mounts-a-hello-tag-with-a-setted-name">Third iteration: mounts a hello tag with a setted name</h3>
<p>Our next goal is to mount the tag passing the name property. Let´s write the failing test</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">mounts a hello tag with a setted name</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Carl</span><span class="dl">'</span><span class="p">})[</span><span class="mi">0</span><span class="p">]</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">tag</span><span class="p">.</span><span class="nx">name</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">be</span><span class="p">.</span><span class="nx">eq</span><span class="p">(</span><span class="dl">'</span><span class="s1">Carl</span><span class="dl">'</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></div></div>
<p>It will fail with: <code class="language-plaintext highlighter-rouge">expected '' to equal 'Carl'</code>, so to make it work we need to use the “opts” functionality that Riot gives us. Just update the hello.tag like this</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><hello>
<script>
this.name = opts.name
</script>
</hello>
</code></pre></div></div>
<p>Run the test again, and the last test pass, but the second test is not working. What´s happening?
This shows why TDD is useful: when we introduce new functionality we can break the old code. So how can we fix this? It´s easy, the problem is that it’s expecting a string, but it’s undefined. So we change the code a little, so if opts.name is undefined then we use an empty string.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><hello>
<script>
this.name = opts.name || ''
</script>
</hello>
</code></pre></div></div>
<p>Run the test again and it should pass.</p>
<h3 id="refactor-using-karma-autowatch-to-automatically-run-the-tests">Refactor: Using karma autowatch to automatically run the tests</h3>
<p>Running <code class="language-plaintext highlighter-rouge">npm test</code> each time could be a little slow, so we can add <code class="language-plaintext highlighter-rouge">autoWatch: true</code> to our karma.conf.js so it will rerun the test each time a file is modified. Also remove the <code class="language-plaintext highlighter-rouge">singleRun: true,”</code> line. This will run the tests each time we save the files, so we can have a fast feedback loop when doing TDD.</p>
<p>Now if we ‘run test’ again, karma will wait for changes. Let´s edit a test just to confirm this. For instance, we can change the second expectation to <code class="language-plaintext highlighter-rouge">expect(tag.isMounted).to.be.false</code> and then check the console. karma automatically run the test and shows the failing test. Let´s fix the tests again changing <code class="language-plaintext highlighter-rouge">expect(tag.isMounted).to.be.true</code> and now all tests will pass.</p>
<h3 id="fourth-iteration-prints-hello-name">Fourth iteration: prints Hello {name}</h3>
<p>Next, we want to show the Hello {name} inside a H1 tag, so let’s write a new test and learn how to use the querySelector method.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">prints Hello {name} </span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Carl</span><span class="dl">'</span><span class="p">})[</span><span class="mi">0</span><span class="p">]</span>
<span class="kd">var</span> <span class="nx">tagText</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello > h1</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">tagText</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">be</span><span class="p">.</span><span class="nx">eq</span><span class="p">(</span><span class="dl">'</span><span class="s1">Hello Carl</span><span class="dl">'</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></div></div>
<p>As you can see we are using <code class="language-plaintext highlighter-rouge">document.querySelector('hello > h1').textContent</code>. This will search for a h1 tag inside a hello tag and get the textContent. We don’t need to run the tests because it will run automatically and it will fail. So to make it work we edit the hello.tag like this.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><hello>
<h1>Hello {name}</h1>
<script>
this.name = opts.name || ''
</script>
</hello>
</code></pre></div></div>
<p>Now if you check the console all tests will pass.</p>
<h3 id="fifth-iteration-transform-name-to-uppercase">Fifth iteration: Transform name to uppercase</h3>
<p>We can also add functions to our tag and test those functions. Let’s write a simple test that call a custom function called uppercase and expect the name to be converted to uppercase:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nx">it</span><span class="p">(</span><span class="dl">'</span><span class="s1">transform the name to uppercase</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">tag</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span><span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Carl</span><span class="dl">'</span><span class="p">})[</span><span class="mi">0</span><span class="p">]</span>
<span class="nx">tag</span><span class="p">.</span><span class="nx">uppercase</span><span class="p">()</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">tag</span><span class="p">.</span><span class="nx">name</span><span class="p">).</span><span class="nx">to</span><span class="p">.</span><span class="nx">be</span><span class="p">.</span><span class="nx">eq</span><span class="p">(</span><span class="dl">'</span><span class="s1">CARL</span><span class="dl">'</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></div></div>
<p>We have a failing test in line 31, because uppercase is not a function of our hello tag. So let’s create it.
We are going to add a new function called uppercase like this</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="k">this</span><span class="p">.</span><span class="nx">uppercase</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nx">toUpperCase</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div></div>
<p>and now all tests will pass.</p>
<p>I hope you liked the tutorial. We learnt how to setup mocha+chai+karma to test riot tags, how to autorun the tests and how to test Riot tag’s properties and functions.</p>
I hate "how to make a blog in 20min" tutorials2012-06-29T14:07:49-03:00https://vitomd.com/coding/i-hate-how-to-make-a-blog-in-20min-tutorials<p>Those tutorials are good to show the potential of the framework when is used by someone that have experience with it. But it doesn't teach you much about the process of building your own application. And watching a lot of those can damage your perception of the learning curve needed to build something because you think that it's easy.</p>
<p>I really like the approach of Michaael Haart in his RailTutorial, because he explain all the things that can go wrong and how to solve them. Because that is learning, trial and error. When you start a project by your own, you will have to face a lot of errors.</p>
<p>I told you this because some years ago I tried to learn ruby on rails thinking that it would be easy, I watched the zombie tutorial, tryRuby, and some 20min blog but when I tried to make my own application I felt frustrated and dumb for all the errors that I faced. But then I changed and some month ago I started again, but this time I approached it thinking that I will have to deal with the errors and my own mistakes , and that there is no easy or fast way to learning, just the old Try and Error.</p>
Beat procrastination with Kaizen2012-06-24T14:29:32-03:00https://vitomd.com/life/beat-procrastination-with-kaizen<p>The greater the task, the greater the resistence to do it. One way to avoid this is making it in small steps, as small as possible. Do you want to exercise each day for 1hr? Just thinking about it creates resistence, so make a small step, aim to just 1 minute of exercice per day. Maybe while watching TV, or you can just walk in front of it.</p>
<p>This is Kaizen, a method that you can apply in almost anything. I highly recommend this book "<a title="One Small Step Can Change Your Life: The Kaizen Way" href="http://www.amazon.com/Small-Step-Change-Your-Life/dp/0761129235">One Small Step Can Change Your Life: The Kaizen Way</a>"</p>
<p>My daily routine consist in 5 minute tasks:</p>
<p>-5m blog writing : Maybe a paragraph.<br />
-5m learning: Some new function<br />
-5m for one of my personal projects: Write some code lines, or fixing a little bug<br />
-5m studying: I like studying with cards, so in 5m I can make 1 card and reread 3 cards<br />
-5m reading a book: 4 pages</p>
<p>In just 30m per day you can advance in 5 different aspects of your life. It could look small but in a month this means:</p>
<p>-2 o 3 new blog post<br />
-10 new functions<br />
-100 new lines of code and some bugs killed<br />
-30 new study cards and 30 rereaded<br />
-100 pages readed</p>
<p>And the most interesting thing about kaizen is that thinking about doing the task for only 5 minutes let's you pass the initial resistance (even thought you might end up spending much more time on it) and enjoy doing something that you might think is dull.</p>
<p>So if you are interested check the book <a title="One Small Step Can Change Your Life: The Kaizen Way" href="http://www.amazon.com/Small-Step-Change-Your-Life/dp/0761129235">One Small Step Can Change Your Life: The Kaizen Way</a></p>
Clean Code Book - top 5 tips2012-06-06T16:33:32-03:00https://vitomd.com/coding/clean-code-book-top-5-tips<p>Some month ago I read the book: Clean Code, I highly recommend it. Here are the best tips that I found.</p>
<ul>
<li>Boy-scout Law: Leave the campground cleaner than you found it. The cleanup doesn't have to be something big. If you have to modify something, try to improve the readability of nearby code</li>
</ul>
<ul>
<li>Functions:</li>
<ul>
<li>Must be short (5 lines)</li>
<li>Better without arguments or less than 2</li>
<li>Should do only one thing, do it well, and have no side effects</li>
</ul>
</ul>
<ul>
<li>Variables</li>
<ul>
<li>Better with long and descriptive names</li>
<li>Be consistent. Don't use get and retrieve for the same</li>
<li>Use constant. Like MAX_NUMBER_LINES instead of just 10</li>
</ul>
</ul>
<ul>
<li>Comments</li>
<ul>
<li>It's better to write a descriptive function than a comment</li>
<li>Outdated comments confuse</li>
<li>Instead of comment an ugly function, try to refactor it, so it express clearly what it does</li>
</ul>
</ul>
<ul>
<li>Classes</li>
<ul>
<li>Small classes (200 lines)</li>
<li>Line width < 120</li>
</ul>
</ul>
<p>edit: These are my notes from the book "Clean Code" ,Robert C. Martin. I know that some tips are polemic so I wanted to share it to know what others think about it. You can read <a title="clean code" href="http://www.informit.com/authors/bio.aspx?a=361a5e70-f1e2-432b-9928-b30b4742ae80">clean code articles</a> by Robert C Martin</p>
<p>edit2: I want to share more info about the "less that 2 arguments" and 5 line functions.</p>
<p>The author says: "The ideal number of arguments for a function is zero (niladic). Next comes one (monadic), followed closely by two (dyadic). Three arguments (triadic) should be avoided where possible. More than three (polyadic) requires very special justification -- and then shouldn't be used anyway."</p>
<p>A really good <a title="stackoverflow" href="http://programmers.stackexchange.com/questions/133404/what-is-the-ideal-length-of-a-method">stackoverflow</a> 's thread about the "5 lines functions"</p>
Today is demo Day!! and then CRASH! (My checklist to avoid it)2012-05-04T21:30:40-03:00https://vitomd.com/coding/today-is-demo-day-and-then-crash-my-checklist-to-avoid-it<p>Today is demo Day!, you and your team are excited to show to some potential customer, all the awesome things that the new app can do . The demo start good, but then CRASH!</p>
<p>We all have been there, the bugs like to show up in demo's day, it's a software law. But you can avoid it with a simple checklist. This is mine, you can create your own.</p>
<h3>1) Before demo don't touch the code!</h3>
<p>This is one of the most common errors. One developer discover a simple bug, then tries to fix it before demo. He fixed it , but he didn't test the others 10 scenarios. So of course in middle of the demo, it CRASHES!</p>
<p>protip: Use Test Driven Development, or at least test your code. So when someone refactor something or fix a bug you have confidence that all the code works as expected</p>
<h3>2) Check the demo environment</h3>
<p>Sometimes your dev environment is full , there is no more space, so in Demo Time you have a nice error like this: "Storage limit exceeded" . This happened to me when coding some Salesforce Apps.</p>
<h3>3) Prepare your demo data</h3>
<p>We are awesome and funny coders, we like to put strange names in the records like "ababshaha" or "Bruce Willis" , that is nice but in demo day it is better to have clean and nice data to show.</p>
<p>protip: While you are coding try to fill the forms with meaningful data. There are browser plugins to automate this or some test tool too.</p>
<h3>4) Have a list of what to show (focus on the client).</h3>
<p>We like to tell the client that we have an algorithm that work 10 time faster that the old one, but you know what? They don't care. In demo day focus on the client side, show things that they care. This is usually the opposite of what you care about. For example, you spend two days working on the new and great algorithm to sort things, but the client loved the way that the jquery plugin slideUp some popup (that took you 2 minutes to setup).</p>
<h3>5) Bring only the important people to the demo.</h3>
<p>If you are the project manager don't waste developers' time inviting all the project developers, invite just the ones that can help you. From client's side it is also better to have few people invited. If you run the demo using the phone and screen share, it can be really annoying communicating with a lot of people.</p>
I am not a Rock Star developer2012-04-27T02:15:07-03:00https://vitomd.com/coding/i-am-not-a-rock-star-developer-i-more-like-a-violinist-coder<p>Rock is chaos , destruction, go against the order. I love rock and roll but I am not a Rock Star coder</p>
<p>So when I see “ We are a rock band business, ready to take the world, so we need a Rock star developer to rock the world with us”</p>
<p>Well that really turn me off.</p>
<p>If you want to capture my attention write something like:<br />
“We are two guys and a Girl building our business, we are looking for a Violinist coder, who execute clean notes, pleasant sounds and harmonious music”</p>
Hello world!2012-04-21T06:57:46-03:00https://vitomd.com/coding/hello-world<p><img src="https://vitomd.com/blog/assets/imgs/chess.jpeg" alt="library" /></p>
<p><em>"The only way to get smarter is by playing a smarter opponent"</em></p>
<p><em> - Fundamentals of Chess 1883</em></p>