Jekyll2023-06-20T06:58:44+00:00https://winnercrespo.com/feed.xmlWinner CrespoI'm a software engineer willing to learn more every day. Let's keep in touch so I can share with you my knowledge and I can learn from you as well.Winner Crespowistcc@gmail.comConsistency when working out is the key - More than 7 years working out2021-06-27T00:00:00+00:002021-06-27T00:00:00+00:00https://winnercrespo.com/consistency-is-the-key-more-than-7-years-working-out<p>If you would rather watch a video about it:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wZ2AB42hz9E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<p><br /></p>
<p>Nowadays if I spend a day without exercising, it just makes me think about the benefits that I am missing, things like the boosts in my creativity, the release of stress or the Increase of my energy levels, and don’t even get me started in how it has transformed my body, but honestly 7 years ago I would have never imagined that I would be here today talking to you about fitness.</p>
<p>Maybe because most of my life working out or having a healthy life, was not even a thing for me.</p>
<p>I’ve always been a chubby guy, so obviously, the first thing I tried when I started to think about fitness was to lose my belly fat and especially my chest fat. I remember I tried to go for a run from time to time, play basketball to make it fun, and of course do some abs workout. It didn’t last long.</p>
<p>Then I tried (many times) to lift some weights, since doing that I would be able to get a toner body and hopefully in the process also lose my chest and belly fat. I even did a 3 months program called “Operación cuadritos”/”Operation Abs” in preparation for the summer but again soon enough I got back to not do any workout at all.</p>
<p>I think the reason why I wasn’t able to make it stick was because I didn’t know about the things I’ll share with you today.</p>
<p>But first a disclaimer, I am not a fitness coach nor a professional athlete. I’m just a regular guy, doing regular stuff. Here, I am just sharing my experience about how working really hard, day in and day out, I am and have been able to reach my goals. Let’s continue.</p>
<p>Today I’ll share with you 4 steps I followed to finally make fitness part of my daily routine and the first one was to “discover the why”. As I told you before, at first my reason was specifically to look better. I found out the hard way that for me that was not enough. Looking better won’t make me run that extra mile, looking better won’t give me the motivation I need for the 2 extra repetitions and it wouldn’t either keep me from quitting when it is just super hard.</p>
<p>I remember when I first tried to do a push-up and I couldn’t do even one, but when l looked to my side, I saw my little sister doing several push-ups like it was just a natural thing to do and the feeling of being powerless to do what I wanted, stuck in the back of my head for many years.</p>
<p>In 2014, I decided to not feel powerless anymore and to take control of life in every sense including my body.</p>
<p>Nowadays, working out is just part of my routine just like eating, working, or spending time with family and friends, and it is just because now I don’t do it to get a toner body, I do it because I know it is super important to be able to live happier and hopefully longer and do all the things I love and plan to do.</p>
<p>The second step was to “Make it simple”. What I mean by this is that I needed to create a process that helps me come with the fewer excuses possible.</p>
<p>Something you may do to make it simple, is to choose something that you really like, it being basketball, football, volleyball, tennis, running, bicycle, cross country ski, dancing, chess boxing (yes, that is a sport, do not ask me) whatever it may be but something that you even do just for fun. For me, it was weight lifting.</p>
<p>Another thing is that I needed to plan ahead my workout. I started to decide before coming to the gym what exercises, sets, and repetitions I would do each day. I also started to get my workout clothes ready the night before and picked the nearest gym possible. Again, not giving me a chance to create excuses.</p>
<p>And lastly, start small. In the book The power of less, Leo Babauta says that 5-10 minutes a day is enough to start creating a habit, this way there’s a much lower possibility of making up excuses to not do it and I can assure you that after you create the habit you will feel the need of increasing this time.</p>
<p>The third step was “Set a time”. I’ve tried going to the gym early in the morning and this somewhat works but I am not always a morning person which means that I have skipped it many times just because I wanted to continue sleeping. I’ve tried it during my lunch breaks and also somewhat works but I always felt a bit stressed because I had to hurry back to work and sometimes I wasn’t able to do my workout as planned. I’ve also tried late in the evening and it does not work at all for me, at this time I am completely exhausted from the day and I am not able to do my best at the gym.</p>
<p>What has absolutely worked for me was something that I learned from the book Atomic Habits. There James Clear talks about habit stacking (he also has a blog post about it, that I will leave in the description). There a hire a lot of habits that we take for granted and do not think about them as habits. Let’s take me as an example, after I wake up the first thing I do is to brush my teeth, then I make coffee and then read a book. The way these habits are stacked makes it harder for me to forget to brush my teeth after waking up, for example.</p>
<p>I used this technique and started going to the gym right after work since getting out of the office gives me the perfect trigger to just automatically go to the gym, no excuses.</p>
<p>After you find the time that works best for you, you need to make sure to make it a priority and do not let anything come first. For me, it has been that my chosen time collides with social gatherings and my solution has always been to say “see you after the gym”.</p>
<p>And finally, the fourth step was “the two days rule”. I learned this a year ago from one of my favorite YouTubers Matt D’Avella and it was a game-changer, I’ll leave his video in the description. The two days rule basically says that I cannot skip my workout two days in a row, so if I miss working out today, that means that I must workout tomorrow.</p>
<p>Spending longer times without working out makes it more probable that we lose the habit, so sticking to the rule is crucial. I used to workout weekdays and get weekends off but sometimes I wasn’t able to work out on a Friday meaning that my next workout would be 3 days later and because of this I would lose my habit. With the two days rule is simple, I just need to remember “did I work out yesterday?” If no then I must work out tomorrow, no excuse.</p>
<p>These are the 4 steps that helped me stick to my fitness routine for more than 7 years and counting. Discover the why, make it easy, set a time, and follow the two days rule. Of course, this is not as easy as it sounds, very often life just happens (I get sick, I travel, coronavirus) but the best we can do is to just get back on track as soon as possible, at the end of the day this is a marathon, not a sprint so the important thing is to maintain the habit in the long run.</p>Winner Crespowistcc@gmail.comIf you would rather watch a video about it:What is CORS?2020-05-24T00:00:00+00:002020-05-24T00:00:00+00:00https://winnercrespo.com/what-is-cors<p>Have you ever seen this error?</p>
<div style="margin: 10px 50px; color: #e49199;">
Access to fetch at '<a>https://www.test1.com</a>' from origin '<a>https://www.test2.com</a>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
</div>
<p>If you have, it probably means that you have faced this problem before or that you are facing it right now. Either way, don’t worry, we will learn what is this error about together.</p>
<p>First of all, CORS stands for Cross-Origin Resource Sharing and I think that with this alone we could already start to understand the idea behind CORS. It is a mechanism to allows (or not) different origins (different websites, domains) to have access to resources on a server.</p>
<p>Let’s say that I have a service called <code class="language-plaintext highlighter-rouge">musicinfo.com</code>. Here I have 2 endpoints: one that is public, meaning anyone can do requests from any origin and get information about a song, and another one that is private, meaning that only requests made from <code class="language-plaintext highlighter-rouge">https://www.musicinfo.com</code>.</p>
<p>This is how those request would look like:</p>
<p><strong>Request Headers</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>... Other headers
authority: www.musicinfo.com
method: GET
path: /song?name=one&artist=u2
origin: https://winnercrespo.com
</code></pre></div></div>
<p><strong>Response Headers</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>... Other headers
Access-Control-Allow-Origin: *
</code></pre></div></div>
<p>As you can see, on the response we get <code class="language-plaintext highlighter-rouge">Access-Control-Allow-Origin: *</code> meaning that any origin is allowed to access this resource. Another way this could have worked is if we get <code class="language-plaintext highlighter-rouge">Access-Control-Allow-Origin: https://winnercrespo.com</code> meaning that this origin has access. What we get on the <code class="language-plaintext highlighter-rouge">Access-Control-Allow-Origin</code> is dictated by the server so it decides beforehand who has access to what resource.</p>
<p>On the other hand, if I try to do a request to the private endpoint from https://winnercrespo.com we would get a CORS error as we can see in the next example.</p>
<p>Using the Google Seach, I noticed that it does a <code class="language-plaintext highlighter-rouge">Get</code> request to this URL <code class="language-plaintext highlighter-rouge">https://www.google.com/complete/search?q=hola</code> in order to get the autocomplete options.</p>
<div style="text-align: center; margin-top: 10px;">
<img src="/assets/images/google-search-request.png" />
<div style="font-size: 0.5em; margin: 10px 0;">Google search request.</div>
</div>
<p>But if I try to do the same request from different website with a piece of code similar to this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://www.google.com/complete/search?q=hola</span><span class="dl">'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">then</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// handle success</span>
<span class="p">})</span>
<span class="p">.</span><span class="k">catch</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// handle exception</span>
<span class="p">});</span>
</code></pre></div></div>
<p>I get the same error we saw before:</p>
<div style="margin: 10px 50px; color: #e49199;">
Access to fetch at '<a>https://www.google.com/complete/search?q=hola</a>' from origin '<a>https://www.winnercrespo.com</a>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
</div>
<p>To learn more about this topic I would recommend this great post <a>https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS</a> written by the MDN web docs.</p>Winner Crespowistcc@gmail.comHave you ever seen this error? Access to fetch at 'https://www.test1.com' from origin 'https://www.test2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.What is camelCase, PascalCase, kebab-case and snake_case?2020-05-13T00:00:00+00:002020-05-13T00:00:00+00:00https://winnercrespo.com/naming-conventions<p>Since we cannot define a variable like <code class="language-plaintext highlighter-rouge">fruits in basket</code> because many (or maybe all) programming languages will interpret the space character as the end of the identifier and the beginning of something else, we need to do something like <code class="language-plaintext highlighter-rouge">fruitsInBasket</code>.</p>
<p>Camel, pascal, kebab and snake case (and others) are all naming conventions that we use in computer programming to be able to create compound names for variables, types, functions, clases and other structures in source code.</p>
<h2 id="camelcase">camelCase</h2>
<p>The rules are that we capitalize all the words after the first one.</p>
<table>
<thead>
<tr>
<th>Raw</th>
<th>camelCase</th>
</tr>
</thead>
<tbody>
<tr>
<td>fruits in basket</td>
<td>fruitsInBasket</td>
</tr>
<tr>
<td>has error</td>
<td>hasError</td>
</tr>
<tr>
<td>is visible</td>
<td>isVisible</td>
</tr>
</tbody>
</table>
<p>Camel case is commonly used for variables and functions in JavaScript.</p>
<h2 id="pascalcase">PascalCase</h2>
<p>Here we need to capitalize all the words including the first one.</p>
<table>
<thead>
<tr>
<th>Raw</th>
<th>camelCase</th>
<th>PascalCase</th>
</tr>
</thead>
<tbody>
<tr>
<td>fruits in basket</td>
<td>fruitsInBasket</td>
<td>FruitsInBasket</td>
</tr>
<tr>
<td>has error</td>
<td>hasError</td>
<td>HasError</td>
</tr>
<tr>
<td>is visible</td>
<td>isVisible</td>
<td>IsVisible</td>
</tr>
</tbody>
</table>
<p>PascalCase is often preferred by C programmers.</p>
<h2 id="kebab-case">kebab-case</h2>
<p>For this one, we add a dash between each word and all of them are lowercase.</p>
<table>
<thead>
<tr>
<th>Raw</th>
<th>camelCase</th>
<th>PascalCase</th>
<th>kebab-case</th>
</tr>
</thead>
<tbody>
<tr>
<td>fruits in basket</td>
<td>fruitsInBasket</td>
<td>FruitsInBasket</td>
<td>fruits-in-basket</td>
</tr>
<tr>
<td>has error</td>
<td>hasError</td>
<td>HasError</td>
<td>has-error</td>
</tr>
<tr>
<td>is visible</td>
<td>isVisible</td>
<td>IsVisible</td>
<td>is-visible</td>
</tr>
</tbody>
</table>
<p>HTML5 attributes can start with <code class="language-plaintext highlighter-rouge">data-</code> like <code class="language-plaintext highlighter-rouge">data-name</code>. Also, CSS uses dashes in property-names like background-color.</p>
<h2 id="snake_case">snake_case</h2>
<p>In contrast to the kebab case, for the snake case we add an underscore instead.</p>
<table>
<thead>
<tr>
<th>Raw</th>
<th>camelCase</th>
<th>PascalCase</th>
<th>kebab-case</th>
<th>snake_case</th>
</tr>
</thead>
<tbody>
<tr>
<td>fruits in basket</td>
<td>fruitsInBasket</td>
<td>FruitsInBasket</td>
<td>fruits-in-basket</td>
<td>fruits_in_basket</td>
</tr>
<tr>
<td>has error</td>
<td>hasError</td>
<td>HasError</td>
<td>has-error</td>
<td>has_error</td>
</tr>
<tr>
<td>is visible</td>
<td>isVisible</td>
<td>IsVisible</td>
<td>is-visible</td>
<td>is_visible</td>
</tr>
</tbody>
</table>
<p>Many programmers use underscores especially in SQL databases for things like <code class="language-plaintext highlighter-rouge">creation_date</code>, <code class="language-plaintext highlighter-rouge">company_name</code>, etc.</p>
<p>Some <strong>benefits</strong> that naming conventions bring are:</p>
<ul>
<li><strong>Consistency.</strong> Since naming something is one of the hardest jobs of a programmer, at least we can agree on a convention and be consistent about it.</li>
<li><strong>Better understanding.</strong> Compound names explain a lot better than one word or one character the purpose of the structure.</li>
<li><strong>Readability.</strong> Enhances the ability to read the code.</li>
<li><strong>Automation.</strong> Enables the use of automated refactoring and search and replace tools.</li>
</ul>Winner Crespowistcc@gmail.comSince we cannot define a variable like fruits in basket because many (or maybe all) programming languages will interpret the space character as the end of the identifier and the beginning of something else, we need to do something like fruitsInBasket.Chart xkcd vue wrapper2019-08-30T00:00:00+00:002019-08-30T00:00:00+00:00https://winnercrespo.com/chart-xkcd<p>A friend shared <a href="https://github.com/timqian/chart.xkcd">this</a> great library the other day and I fell in love with it automatically. It’s very beautiful the way these charts look like they were hand-drawn.</p>
<p>It is also very easy to use, you only need to include the script tag on your page and add a <code class="language-plaintext highlighter-rouge">svg</code> element where the chart will be rendered. Learn more about it on the <a href="https://timqian.com/chart.xkcd/">documentation</a>.</p>
<p>I thought it would be cool to have a wrapper to use it very easy on my Vue projects but there were none at that moment so I decided to create my own <a href="https://github.com/wistcc/chart.xkcd-vue-wrapper">chart.xkcd-vue-wrapper</a>.</p>
<p>It’s also pretty easy to use, you just need to install it <code class="language-plaintext highlighter-rouge">yarn add chart.xkcd-vue-wrapper</code> or <code class="language-plaintext highlighter-rouge">npm i chart.xkcd-vue-wrapper</code> and then use the components 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">app</span><span class="dl">"</span><span class="o">></span>
<span class="o"><</span><span class="nx">ChartLine</span> <span class="p">:</span><span class="nx">config</span><span class="o">=</span><span class="dl">"</span><span class="s2">line</span><span class="dl">"</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">ChartBar</span> <span class="p">:</span><span class="nx">config</span><span class="o">=</span><span class="dl">"</span><span class="s2">bar</span><span class="dl">"</span> <span class="o">/></span>
<span class="o"><</span><span class="nx">ChartPie</span> <span class="p">:</span><span class="nx">config</span><span class="o">=</span><span class="dl">"</span><span class="s2">pie</span><span class="dl">"</span> <span class="o">/></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">import</span> <span class="p">{</span> <span class="nx">ChartLine</span><span class="p">,</span> <span class="nx">ChartBar</span><span class="p">,</span> <span class="nx">ChartPie</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">chart.xkcd-vue-wrapper</span><span class="dl">'</span><span class="p">;</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">ChartLine</span><span class="p">,</span>
<span class="nx">ChartBar</span><span class="p">,</span>
<span class="nx">ChartPie</span><span class="p">,</span>
<span class="p">},</span>
<span class="na">data</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="na">line</span><span class="p">:</span> <span class="p">{</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Bugs to fix in a sprint</span><span class="dl">'</span><span class="p">,</span>
<span class="na">xLabel</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Day</span><span class="dl">'</span><span class="p">,</span>
<span class="na">yLabel</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Bugs</span><span class="dl">'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
<span class="na">labels</span><span class="p">:[</span><span class="dl">'</span><span class="s1">1</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">2</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">3</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">4</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">5</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">6</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">7</span><span class="dl">'</span><span class="p">],</span>
<span class="na">datasets</span><span class="p">:</span> <span class="p">[{</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Plan</span><span class="dl">'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span> <span class="p">,</span><span class="mi">7</span><span class="p">],</span>
<span class="p">},</span> <span class="p">{</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Reality</span><span class="dl">'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">7</span><span class="p">],</span>
<span class="p">}]</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="na">bar</span><span class="p">:</span> <span class="p">{</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Bugs your coworker fixes vs you</span><span class="dl">'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
<span class="na">labels</span><span class="p">:[</span><span class="dl">'</span><span class="s1">your coworker</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">you</span><span class="dl">'</span><span class="p">],</span>
<span class="na">datasets</span><span class="p">:</span> <span class="p">[{</span>
<span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mi">100</span><span class="p">,</span> <span class="mi">2</span><span class="p">],</span>
<span class="p">}]</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="na">pie</span><span class="p">:</span> <span class="p">{</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Bugs you create vs your whole team</span><span class="dl">'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
<span class="na">labels</span><span class="p">:[</span> <span class="dl">'</span><span class="s1">you</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">your team</span><span class="dl">'</span><span class="p">],</span>
<span class="na">datasets</span><span class="p">:</span> <span class="p">[{</span>
<span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mi">100</span><span class="p">,</span> <span class="mi">2</span><span class="p">],</span>
<span class="p">}]</span>
<span class="p">}</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>I hope that you like using beautiful and funny charts on your projects and that this wrapper is useful for you.</p>
<p>Happy coding!</p>Winner Crespowistcc@gmail.comA friend shared this great library the other day and I fell in love with it automatically. It’s very beautiful the way these charts look like they were hand-drawn.Books I have read: first semester 20182018-07-24T00:00:00+00:002018-07-24T00:00:00+00:00https://winnercrespo.com/books-i-have-read-first-semester-2018<p>Let’s be honest, I haven’t been a reader person my entire life. Sure, I’ve read tons of blog post, short stories, and a lot of tweets, but just the idea of start reading a book scared me. For some reason, I always found it a very boring activity.</p>
<p>However, I know the great benefits this could bring to me. This year I decided to make this a habit in my life. Today I want to share with you the books I read this first semester of the year.</p>
<h2 id="ready-player-one-by-ernest-cline"><a href="https://amzn.to/2NKIRrB" target="_blank">Ready Player One by Ernest Cline</a></h2>
<p>I love this book. Once I started reading it, I wasn’t able to stop until the end.</p>
<p>The world is a chaotic place in the year 2045 and people get to escape this reality using the OASIS, a virtual reality game. Some hidden puzzles can give someone massive power and fortune. This cannot end into the wrong hands or everyone could lose the freedom this new world provides.</p>
<h2 id="armada-by-ernest-cline"><a href="https://amzn.to/2JSyVK2" target="_blank">Armada by Ernest Cline</a></h2>
<p>After loving Ready Player One, I decided to read another book by the same author. Armada is a very engaging story where the Zack Lightman gets to use his knowledge in science fiction books, movies, and video games to try to save the world.</p>
<h2 id="the-power-of-less-the-fine-art-of-limiting-yourself-to-the-essential-by-leo-babauta"><a href="https://amzn.to/2uNjCxp" target="_blank">The Power Of Less: The Fine Art of Limiting Yourself to the Essential by Leo Babauta</a></h2>
<p>Thanks to this book I was able to create the habit of doing a to-do list starting the day, giving priority to the most important things and also to not forget others through the day. This helps me get more things done every day.</p>
<h2 id="the-10x-rule-the-only-difference-between-success-and-failure-by-grant-cardone"><a href="https://amzn.to/2A4i2MO" target="_blank">The 10X Rule: The Only Difference Between Success and Failure by Grant Cardone</a></h2>
<p>In order to achieve big goals, you need to start taking massive actions since operating in normal action won’t get you there. Discover the reasons why people fail and others succeed, among other things.</p>
<h2 id="think-and-grow-rich-by-napoleon-hill"><a href="https://amzn.to/2A9vzTt" target="_blank">Think and Grow Rich by Napoleon Hill</a></h2>
<p>Following the principles explained by the author, you could get richness in any aspect of your life that you want. These principles will help you to convert your burning desire in its material form.</p>
<p>I would love to get some book recommendations in the comments. Also, if you have already read the books I mentioned, let me know what you think about them.</p>Winner Crespowistcc@gmail.comLet’s be honest, I haven’t been a reader person my entire life. Sure, I’ve read tons of blog post, short stories, and a lot of tweets, but just the idea of start reading a book scared me. For some reason, I always found it a very boring activity.How working remotely changed my life2018-07-19T00:00:00+00:002018-07-19T00:00:00+00:00https://winnercrespo.com/how-working-remotely-changed-my-life<p>When I started working remotely on my full-time job my life changed. I had worked remotely before but only on part-time jobs that I worked on at night and I actually wasn’t getting the benefits of it.</p>
<p>Working from home has made me happier and a lot more productive. Although, not everything is always good. Let’s review some advantages and disadvantages I have experienced myself working remotely.</p>
<h2 id="upsides">Upsides</h2>
<ul>
<li>
<p>:oncoming_automobile: <strong>No commute.</strong> I mention this one first because coming to the office was my bigger problem. I used to waste between an hour and an hour and a half to get to the office but on a bad day that could become MORE THAN TWO HOURS on a traffic jam. To be honest, I don’t really like to drive and taking this amount of traffic EVERYDAY to get to the office and the same struggle to get back home was making me sick. I always started my day with a grumpy face which doesn’t let me enjoy my day at all.</p>
<p>If more people start working from home, maybe those traffic jams could even disappear.
:sparkles:We should always dream big!:sparkles:</p>
</li>
<li>
<p>:apple: <strong>Better health.</strong> Frequently, I found myself eating fast food and most of the time the reason was that I didn’t find anything else, and I say <code class="language-plaintext highlighter-rouge">most of the time</code> because who doesn’t like fast food? :wink:</p>
<p>Now I cook my own meal almost every day which let me eat healthier.</p>
<p>Going to the gym has actually been harder since I have to get out to get there and usually get some traffic (did I already say I don’t like to drive?). Before I was subscribed to a gym which was less than 5 minutes from work and I used to go every day after work hours.</p>
<p>However, I still go every day to the gym and sometimes I also wake up earlier and go for a run in the neighborhood.</p>
</li>
<li>
<p>:computer: <strong>Improve productivity.</strong> Not being at the office reduces the possible distractions you could get from a coworker, hence I get to stay longer in the <code class="language-plaintext highlighter-rouge">zone</code>.</p>
</li>
<li>
<p>:palm_tree: <strong>You can work anywhere.</strong> And for this, I mean <em>for any company and from any place in the world</em>. My current employer is based in the US which wasn’t an option for me before. Also, I’ve done some long trips to different countries and that hasn’t stopped me to keep getting things done.</p>
</li>
<li>
<p>:moneybag: <strong>More money in the piggy bank.</strong> Since you don’t need to commute anymore you will save those expenses which usually tend to be pretty high. Also, you don’t have to spend money on office clothes, I really dislike this style.</p>
</li>
</ul>
<h2 id="downsides">Downsides</h2>
<ul>
<li>
<p>:house: <strong>Sick of being at home.</strong> Since I am a home person, I don’t have this problem but I know many people that could go crazy.</p>
<p>However, I practice some things to prevent this, like going from time to time to a cafe or a friend’s house who also works remotely.</p>
</li>
<li>
<p>:video_game: <strong>Distractions.</strong> Even though you eliminate the office distractions, you get others which are even harder to prevent. At home, you have your family, your bed, the tv, the game console, among other things which could easily get you interrupted.</p>
<p>I had to tell my family that when the door of my office is closed I shouldn’t be distracted too much and they learned it very fast. I also created specific schedules to use the amenities of the house so I don’t end up investing the whole day on them.</p>
</li>
<li>
<p>:date: <strong>Lack of routine.</strong> On most of the remote works, you have the flexibility to choose when to work and not necessarily have a routine.</p>
<p>This is fatal for me. I have to define a very specific schedule to get work done, if not I could procrastinate very easily. What works best for me is to dedicate 8 hours straight for work. Of course, if I have to go out in the middle of the day to run some errands I’ll do it and then complete my work-day after.</p>
</li>
<li>
<p>:sunglasses: <strong>Work/life balance.</strong> There’s a very thin line that divides work from life and this could make you work more or work less. It could be hard to stop working since you don’t have to get your things at 5 pm to go home, or to start working since you don’t need to get prepared to go to the office.</p>
<p>Having a specific time to do my job (as I explained before), has helped me not cross this line. I start and finish to work every day at the same time.</p>
</li>
</ul>
<p>As everything in life, working remotely doesn’t work for everyone. I encourage you to try it out if you haven’t so you can feel the differences by yourself and then you have the needed experience to know what is best for you.</p>
<p>If you want to learn more about this, I would recommend you to read this book <a href="https://amzn.to/2LhGzmK" target="_blank">Remote: Office Not Required</a> by David Heinemeier Hansson aka <a href="https://twitter.com/dhh" target="_blank">DHH</a>. Please leave in the comments how working remotely has changed your life positively or negatively, I would love to read your story.</p>Winner Crespowistcc@gmail.comWhen I started working remotely on my full-time job my life changed. I had worked remotely before but only on part-time jobs that I worked on at night and I actually wasn’t getting the benefits of it.The power of saying thank you2018-07-13T00:00:00+00:002018-07-13T00:00:00+00:00https://winnercrespo.com/the-power-of-saying-thank-you<p>We are always getting better in our hard skills so we can be a better professional or to be able to contribute more and in a more effective way to the project, but how much time do we invest improving our soft skills to accomplish the same goal?</p>
<p>One very important thing of the job is to feel good with the company’s culture, with how the team socializes with each other every day, with how collaborative everyone is, and we play a key role in making this a success.</p>
<p>Today I just want to encourage you to do a very simple and not time-consuming thing that could create better relationships between everyone in the company: <strong>Just say thank you</strong>.</p>
<p>Our parents have taught us since we even couldn’t speak to say thank you constantly, but we forgot to do it frequently or simply we find it hard to do and just ignore it.</p>
<p>Thanking another person has the effect of making him/her feel appreciated, feel that what he/she does is important to others. This could increase their desire to keep doing it and in many cases even to improve it.</p>
<p>It is very usual to happen when the relationship is <code class="language-plaintext highlighter-rouge">boss -> team member</code> since the regular flow of work is that the boss asks for something and the team member creates a solution for it, so the boss says thanks for the obtained results. Is the same between coworkers, when someone helps another to understand something (for example) and after that he/she says thanks. However, even in those very straightforward situations we sometimes fail to thank the other person for his/her hard work.</p>
<p>In others kind of relationships seems a bit harder to do this, like <code class="language-plaintext highlighter-rouge">team member -> boss</code> but I am very sure that most of the time there is always something to be grateful for. Maybe he/she is a good communicator, is very motivator, has a lot of confidence in you, is a good mentor to you, does a lot of things that benefit the team, is very organized, give you autonomy, has a good vision, among other characteristics. Say thank you for that.</p>
<p>I practice this myself and I can tell you it could have a positive impact. Once I found myself thinking about all the great things my boss does every day and how amazing he is, most of those things don’t affect me directly but still those are very important things that improve the company. Out of the blue, I sent him a very short and precise text saying thank you for his hard work, he was surprised to receive this message and told me that at this moment he was dealing with so much and that this makes him feel better and be more enthusiastic about his work.</p>
<p>Of course, this depends on everyone personality. When you do this two things could happen: you see the results immediately or nothing. When nothing happens don’t get discouraged, just keep doing it, you will get to see the results later.</p>
<p>So, just say thank you every now and then, be very honest while doing it and you will perceive how the company’s culture keeps getting better every day.</p>
<p>Let me know anything I didn’t mention here, and also if you have any experience yourself in the topic share it in the comments.</p>
<p>Cheers!</p>Winner Crespowistcc@gmail.comWe are always getting better in our hard skills so we can be a better professional or to be able to contribute more and in a more effective way to the project, but how much time do we invest improving our soft skills to accomplish the same goal?Getting your first job as a software engineer2018-07-05T00:00:00+00:002018-07-05T00:00:00+00:00https://winnercrespo.com/getting-your-first-job-as-a-software-engineer<p>In every professional area, there’s the chicken and egg problem: I don’t have a job because I don’t have experience, I don’t have experience because I don’t have a job.</p>
<p>Fortunately, as a software engineer, we have several options to get experience without a job like creating a project from scratch, open source collaborations, getting an internship, meetups, and hackathons.</p>
<h2 id="creating-a-project-from-scratch">Creating a project from scratch</h2>
<p>If you can create something new, very innovative, that solves a problem for many people, that would be great. If not, don’t lose time waiting for that million dollar idea and start working on a simple application. Working on a simple and well-defined project has the advantage that you won’t expend time thinking about the requirements instead of working on the code. Even another to-do app will do the trick.</p>
<p>Starting a project from an idea and getting it to the finish line will probably help you to:</p>
<ul>
<li>Learn about the life cycle of a software project.</li>
<li>Interact with languages, tools, good practices, design patterns and more of both sides of the application (front and back end).</li>
<li>Get experience with databases.</li>
<li>Work with a web server.</li>
<li>Acquire knowledge of a version control system (I suggest you to use <code class="language-plaintext highlighter-rouge">git</code>).</li>
</ul>
<p>You can work on this project alone or with some friends. Having more people will help to get the experience of how to work on a team which is a very important skill to have.</p>
<p>When you finish this first project, don’t stop. Start working on a new idea, use new tools, design patterns so you can keep learning and increasing your experience.</p>
<p>After this, you are able to use these projects as a portfolio to show your experience to future employers.</p>
<h2 id="open-source-collaborations">Open source collaborations</h2>
<p>Working on an open source (OS) project could give some of the things commented above and also:</p>
<ul>
<li>Give you exposure which is great for other people to know about your work.</li>
<li>Get feedback that helps you to get better every day.</li>
<li>Learn from others and probably from some of the best in the world.</li>
<li>You are already helping on a project that solves a problem for many people.</li>
<li>Your Github profile (or on any other platform where the project is hosted) becomes your portfolio.</li>
</ul>
<p>Collaborating on the OS community could even help you get a job, you’ll think is a pretty rare case but it happened to me. If you don’t get the job directly by working on OS projects, you will still get all the benefits I already mentioned.</p>
<p>Don’t be afraid because you don’t have much experience. Most of the big OS projects have tickets labeled like <code class="language-plaintext highlighter-rouge">good first issue</code>. Start by reading those, clone the project, run it, use breakpoints (or console logs), start reading and understanding the code, don’t be afraid to ask for help on the ticket if you can’t find the solution.</p>
<p>The open source community is very open (pun intended) so start collaborating today.</p>
<h2 id="getting-an-internship">Getting an internship</h2>
<p>It doesn’t matter if it is paid or not, the important thing here is to learn and get experience. I can tell you that this work for sure because I got my first job as a junior developer being an intern first.</p>
<p>My first job was as a Technical Support but what I really wanted to do was to create software, so I applied for a C# Junior Developer position in a very small company and I didn’t get the job due to my lack of experience. However, the company contacted me and other people in the same situation and offer us an internship and the possibility to get the job after it.</p>
<p>I left my job and accepted the internship. I took this opportunity to show them that I am a fast learner and that I can bring value to the company. We were tasked with a pet project and I was the first one that finished the requirements and I even add things that were out of the scope but good for the project. As you already know, I got the job.</p>
<h2 id="meetups">Meetups</h2>
<p>Attending to the events of the local communities is very useful to learn new things and meet new people. I know people that got their jobs on venues like this.</p>
<p>Being in a place with people more experienced than you is a blessing since you will be absorbing a lot of knowledge and you could even meet your future employer. Also, being part of meetups is a good sign for a company looking for a junior developer.</p>
<p>Plus, sometimes you could get free pizza.</p>
<h2 id="hackathons">Hackathons</h2>
<p>These events are very refreshing, I’ve participated in about 4 of these.</p>
<p>This is like a meetup but you also get to create something by yourself. You will be creating a project from scratch with some new friends in a very short amount of time and have the possibility of winning some prizes. Sounds fun, right?</p>
<p>Being out there in a hackathon proof that you are someone of initiatives that want to learn more and love challenges. Also, since companies are usually there looking for new talents, you could be being interviewed and you haven’t even noticed.</p>
<p>No more excuses, start getting experience NOW.</p>
<p><img src="/assets/images/meme-justdoit.gif" /></p>
<p>Do you know any other option to get experience? Do you have more suggestions that I didn’t cover? Do you need any help to get started with this? Please comment below.</p>Winner Crespowistcc@gmail.comIn every professional area, there’s the chicken and egg problem: I don’t have a job because I don’t have experience, I don’t have experience because I don’t have a job.Learning the position CSS property for good2018-06-27T00:00:00+00:002018-06-28T00:00:00+00:00https://winnercrespo.com/learning-the-position-css-property-for-good<p>When I create a layout from scratch, I find myself adding different values to the <code class="language-plaintext highlighter-rouge">position</code> CSS property and to the DPP (direction position properties, I just made that acronym up) top, right, bottom and left properties, hoping that magically they will look as I expect. Maybe you do too.</p>
<p>It would probably be better to learn what they do for good, so we know how to use them.</p>
<p>First of all, a positioned element is one that has a different value than <code class="language-plaintext highlighter-rouge">position: static</code>, which is the default. In other words, an element that has <code class="language-plaintext highlighter-rouge">position</code> set as <code class="language-plaintext highlighter-rouge">relative</code>, <code class="language-plaintext highlighter-rouge">absolute</code>, <code class="language-plaintext highlighter-rouge">fixed</code> or <code class="language-plaintext highlighter-rouge">sticky</code>.</p>
<p>Having that said, we can state that <code class="language-plaintext highlighter-rouge">position</code> defines how an element is positioned on the page. On the other hand, the DPP add an offset on the direction they specify.</p>
<p>Let’s see how each one works.</p>
<h2 id="static"><code class="language-plaintext highlighter-rouge">static</code></h2>
<p>This is the default value and means that the element will be placed according to the page flow. Because of that, the DPP don’t affect it.</p>
<h2 id="relative"><code class="language-plaintext highlighter-rouge">relative</code></h2>
<p>The element will also be placed according to the page flow but now you can use the DPP to add an offset relative to itself. As we can see in the animation below, the space this element is supposed to use is reserved and other elements are not affected even after adding an offset.</p>
<script async="" src="//jsfiddle.net/wistcc/3wk9erbq/4/embed/result,html,css/"></script>
<h2 id="absolute"><code class="language-plaintext highlighter-rouge">absolute</code></h2>
<p>You can use this value to place an element exactly where you want it, also, the element is removed from the page flow. This position will be relative to the next parent element with <code class="language-plaintext highlighter-rouge">relative</code> or <code class="language-plaintext highlighter-rouge">absolute</code> positioning. If there is no such parent, it will be placed relative to the page itself as the next example.</p>
<script async="" src="//jsfiddle.net/wistcc/57qc31mb/1/embed/result,html,css/"></script>
<h2 id="fixed"><code class="language-plaintext highlighter-rouge">fixed</code></h2>
<p>The element is positioned relative to the viewport since the viewport doesn’t change when scrolling, the element will be fixed exactly where you placed it. Also, just like <code class="language-plaintext highlighter-rouge">absolute</code>, the element is removed from the page flow and it will be relative to the next parent element with <code class="language-plaintext highlighter-rouge">relative</code> or <code class="language-plaintext highlighter-rouge">absolute</code> positioning.</p>
<script async="" src="//jsfiddle.net/wistcc/vnL23mtu/15/embed/result,html,css/"></script>
<h2 id="sticky"><code class="language-plaintext highlighter-rouge">sticky</code></h2>
<p>It behaves like the <code class="language-plaintext highlighter-rouge">fixed</code> value but relative to itself since the element is placed according to the page flow. In the example, we can notice that once we are able to see the element and we keep scrolling it will be fixed.</p>
<script async="" src="//jsfiddle.net/wistcc/facwkq6n/10/embed/result,html,css/"></script>
<p>I hope that now you are able to use those properties knowing exactly what they do.</p>
<p>Happy coding.</p>
<style>
iframe {
height: 250px;
}
</style>Winner Crespowistcc@gmail.comWhen I create a layout from scratch, I find myself adding different values to the position CSS property and to the DPP (direction position properties, I just made that acronym up) top, right, bottom and left properties, hoping that magically they will look as I expect. Maybe you do too.Things that won’t work using Vue2018-06-17T00:00:00+00:002018-06-27T00:00:00+00:00https://winnercrespo.com/things-that-wont-work-using-vue<p>After using Vue for a while, I have found some issues that later I learned are actually things they warned us in the documentation.</p>
<p>I made a list of these issues so you can know them as well. Let’s describe each and see the options we have to solve them.</p>
<h2 id="array-changes">Array Changes</h2>
<p>Let’s say we have this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
<span class="na">titles</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Ready Player One</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">The Power of Less</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">The 10x rule</span><span class="dl">'</span><span class="p">]</span>
<span class="p">}</span>
<span class="p">})</span>
</code></pre></div></div>
<p>We can get two different issues while trying to do changes to <code class="language-plaintext highlighter-rouge">titles</code>:</p>
<ul>
<li>Setting an item using the index: <code class="language-plaintext highlighter-rouge">vm.titles[index] = newTitle</code></li>
<li>Modifying the length: <code class="language-plaintext highlighter-rouge">vm.titles.length = length</code></li>
</ul>
<p>Instead of setting an item using the index directly you can use <code class="language-plaintext highlighter-rouge">Vue.set</code>:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Vue</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">titles</span><span class="p">,</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">newTitle</span><span class="p">)</span>
</code></pre></div></div>
<p>Another alternative is using <code class="language-plaintext highlighter-rouge">splice</code>:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">vm</span><span class="p">.</span><span class="nx">titles</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="nx">newTitle</span><span class="p">)</span>
</code></pre></div></div>
<p>On the other hand, to modify the length you can use <code class="language-plaintext highlighter-rouge">splice</code> as well:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">vm</span><span class="p">.</span><span class="nx">titles</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">length</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="adding-properties-to-an-object">Adding properties to an object</h2>
<p>Having the fowlloing object:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">vm</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
<span class="na">top</span><span class="p">:</span> <span class="p">{</span>
<span class="na">bestMovie</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Avengers: Infinity War</span><span class="dl">'</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">})</span>
</code></pre></div></div>
<p>We could be tempted to add a new property doing the next:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">vm</span><span class="p">.</span><span class="nx">top</span><span class="p">.</span><span class="nx">bestShow</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Breaking Bad</span><span class="dl">'</span>
</code></pre></div></div>
<p>but then <code class="language-plaintext highlighter-rouge">bestShow</code> won’t be reactive because Vue adds the reactive functionality at the moment of the initialization. Which means that the property must be in the <code class="language-plaintext highlighter-rouge">data</code> object in order to be reactive.</p>
<p>We can use <code class="language-plaintext highlighter-rouge">Vue.set</code> again to accomplish this:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">Vue</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">vm</span><span class="p">.</span><span class="nx">top</span><span class="p">,</span> <span class="dl">'</span><span class="s1">bestShow</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Breaking Bad</span><span class="dl">'</span><span class="p">)</span>
</code></pre></div></div>
<p>Although, if you need to add several properties, maybe would be better to create a fresh object combining them:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">vm</span><span class="p">.</span><span class="nx">top</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">assign</span><span class="p">({},</span> <span class="nx">vm</span><span class="p">.</span><span class="nx">top</span><span class="p">,</span> <span class="p">{</span> <span class="na">bestShow</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Breaking Bad</span><span class="dl">'</span><span class="p">,</span> <span class="na">bestBook</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Ready Player One</span><span class="dl">'</span> <span class="p">})</span>
</code></pre></div></div>
<h2 id="using-refs-before-the-component-is-mounted">Using <code class="language-plaintext highlighter-rouge">$refs</code> before the component is mounted</h2>
<p>Let’s say we want to focus an input on our component. We could use the <code class="language-plaintext highlighter-rouge">ref</code> attribute for that:</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">ref</span><span class="o">=</span><span class="dl">"</span><span class="s2">input</span><span class="dl">"</span> <span class="o">/></span>
</code></pre></div></div>
<p>and then:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">methods</span><span class="p">:</span> <span class="p">{</span>
<span class="nl">focusInput</span><span class="p">:</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">$refs</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<p>What if we want to focus it as soon as the component is created? You would say that we could use the <code class="language-plaintext highlighter-rouge">created</code> hook:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">created</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$refs</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span>
<span class="p">}</span>
</code></pre></div></div>
<p>but actually this produces an error because <code class="language-plaintext highlighter-rouge">$refs</code> is populated after the component has been mounted. So, we should use the <code class="language-plaintext highlighter-rouge">mounted</code> hook instead since it will be already populated:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">mounted</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$refs</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">focus</span><span class="p">()</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="toggling-similar-elements">Toggling similar elements</h2>
<p>Vue sometimes will reuse elements that have the same tag name when using <code class="language-plaintext highlighter-rouge">v-if</code> on them. As you can see in the next example, the input element is reused when the toggle button is pressed.</p>
<p>To notice this you can write something in the input and then press the button (the value won’t change) or you can use the dev tools and see that the element is not replaced:</p>
<script async="" src="//jsfiddle.net/wistcc/egod2nb5/2/embed/result,js,html/"></script>
<div style="text-align: center; margin-top: 10px;">
<img src="/assets/images/2018-6-21-things-that-wont-work-using-vue-1.gif" />
<div style="font-size: 0.5em; margin: 10px 0;">A sight of the dev tools</div>
</div>
<p>To solve this we just need to add a key to each of them so Vue knows they are distinct elements:</p>
<script async="" src="//jsfiddle.net/wistcc/gpLwdkj3/1/embed/result,js,html/"></script>
<div style="text-align: center; margin-top: 10px;">
<img src="/assets/images/2018-6-21-things-that-wont-work-using-vue-2.gif" />
<div style="font-size: 0.5em; margin: 10px 0;">A sight of the dev tools</div>
</div>
<p>Now we can see that the element is replaced every time we click the button.</p>
<p>Have you noticed other things that won’t work on Vue? Please share in the comments.</p>Winner Crespowistcc@gmail.comAfter using Vue for a while, I have found some issues that later I learned are actually things they warned us in the documentation.