<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Mauro López</title>
    <description>The latest articles on DEV Community by Mauro López (@maurolopezj).</description>
    <link>https://dev.to/maurolopezj</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F664925%2F1fdfd0b6-ed03-48c3-ab5a-b99ed64ad493.jpg</url>
      <title>DEV Community: Mauro López</title>
      <link>https://dev.to/maurolopezj</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/maurolopezj"/>
    <language>en</language>
    <item>
      <title>Nothing is like it seems: Asynchronous in JavaScript</title>
      <dc:creator>Mauro López</dc:creator>
      <pubDate>Sat, 24 Jul 2021 17:24:46 +0000</pubDate>
      <link>https://dev.to/maurolopezj/nothing-is-like-it-seems-asynchronous-in-javascript-1gej</link>
      <guid>https://dev.to/maurolopezj/nothing-is-like-it-seems-asynchronous-in-javascript-1gej</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;In the following, you will understand what means asynchronous in JavaScript and why it is important, using as an example a song from the &lt;a href="https://www.youtube.com/watch?v=krokQtkvd9M"&gt;Ramones&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;JavaScript it’s a useful and amazing language. You can write tons of applications in different environments: backend, frontend, desktop, mobile... and all with the same language!! It all is possible because of &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"&gt;its characteristics&lt;/a&gt; and &lt;a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous"&gt;asynchronous&lt;/a&gt; is part of the reasons.&lt;/p&gt;

&lt;p&gt;Asynchronous as a concept brings us a lot of pros, however it can be kind of tricky at the beginning, basically because sequences are different from what we could expect. What did I mean? Let's see the following code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;hey&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;hey&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;ho&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ho&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;lets&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;lets&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;go&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;go&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;song&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;hey&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nx"&gt;ho&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nx"&gt;lets&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="nx"&gt;go&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;song&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Explanation of code
&lt;/h2&gt;

&lt;p&gt;In the past code, we had 4 methods, all prints something in the console. 2 of them have a &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"&gt;timeout&lt;/a&gt; function inside of them but both wait  &lt;strong&gt;0 milliseconds&lt;/strong&gt;, so it gives us the idea that they shouldn't stop any time&lt;/p&gt;

&lt;p&gt;We should expect an output like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// hey &lt;/span&gt;
&lt;span class="c1"&gt;// ho&lt;/span&gt;
&lt;span class="c1"&gt;// lets &lt;/span&gt;
&lt;span class="c1"&gt;// go&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But we got this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// hey &lt;/span&gt;
&lt;span class="c1"&gt;// lets &lt;/span&gt;
&lt;span class="c1"&gt;// ho&lt;/span&gt;
&lt;span class="c1"&gt;// go&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;weird, right? let's try to find answers to that mystery&lt;/p&gt;

&lt;h2&gt;
  
  
  What happened
&lt;/h2&gt;

&lt;p&gt;Well, it’s important to know that JavaScript supports synchronous and asynchronous code. &lt;strong&gt;Synchronous&lt;/strong&gt; code is executed just after being read and &lt;strong&gt;asynchronous&lt;/strong&gt; is executed “later”, but in this case, later does not mean after now, it means at one point in the future that we don’t necessarily know when it will be. &lt;/p&gt;

&lt;p&gt;As we could suppose, in the past example we got both types of instructions. Synchronous in methods &lt;em&gt;hey&lt;/em&gt; and &lt;em&gt;lets&lt;/em&gt; and asynchronous in methods &lt;em&gt;ho&lt;/em&gt; and &lt;em&gt;go&lt;/em&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// call order:&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;song&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;hey&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;    &lt;span class="c1"&gt;// synchronous&lt;/span&gt;
  &lt;span class="nx"&gt;ho&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;    &lt;span class="c1"&gt;// asynchronous&lt;/span&gt;
  &lt;span class="nx"&gt;lets&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// synchronous&lt;/span&gt;
  &lt;span class="nx"&gt;go&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;  &lt;span class="c1"&gt;// asynchronous&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// execution order:&lt;/span&gt;
&lt;span class="c1"&gt;// hey &lt;/span&gt;
&lt;span class="c1"&gt;// lets  &lt;/span&gt;
&lt;span class="c1"&gt;// ho&lt;/span&gt;
&lt;span class="c1"&gt;// go&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Regarding that, it can be explained how a method (&lt;em&gt;ho&lt;/em&gt; method for example) can be called before another one (&lt;em&gt;lets&lt;/em&gt; method) but the last method to be called (&lt;em&gt;lets&lt;/em&gt;) shows the results first anyway.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why is asynchronous important
&lt;/h2&gt;

&lt;p&gt;The short answer is because JavaScript is single-thread. &lt;/p&gt;

&lt;p&gt;A more detailed answer should start with what is behind the fact of being "single-thread", which means that JavaScript has just one &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/Call_stack"&gt;call stack&lt;/a&gt; and that at the same time can be understood as that it only can do “one thing at the time”. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Single-thread -&amp;gt; one call stack -&amp;gt; one thing at the time&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In simple terms, we just can do one thing at a time and If the call stack is busy, our application will be busy. So, we want our call stack to be as less over busy as we can, but sometimes there are tasks that no matter what we want, will take their time to be executed (request to an external API for example) and that inevitably will block the stack until the task ends the execution. &lt;/p&gt;

&lt;p&gt;How does JavaScript solve that problem? There is a famous catchphrase that recommends “think outside the box” and in this case, JavaScript does it LITERALLY because it takes off the "slow" tasks from the stack and executes them in another place. &lt;/p&gt;

&lt;p&gt;So using asynchronous code JavaScript is able to avoid the overload of the call stack, thus by the execution of "slow" tasks out of the stack somewhere we can do more than one thing at a time.&lt;/p&gt;

&lt;p&gt;For example, the I/O operations in &lt;a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/"&gt;Node.js&lt;/a&gt; are offloads to the system kernel whenever possible, taking advantage that modern operating systems’ kernels are multi-threaded.&lt;/p&gt;

&lt;h2&gt;
  
  
  Nothing is like it seems...
&lt;/h2&gt;

&lt;p&gt;Nothing is like it seems, that’s right, but now we know that the execution order is different from what we expect because there are some methods that execute asynchronously. And they executed this way in order to keep the call stack the freest possible because there is only one and if it is busy, the performance of our app will be affected. &lt;/p&gt;

&lt;p&gt;On other hand, it's important to know that asynchronous code in JavaScript can be present in form of &lt;a href="https://javascript.info/promise-basics"&gt;&lt;em&gt;promises&lt;/em&gt;&lt;/a&gt; and &lt;a href="http://callbackhell.com"&gt;&lt;em&gt;callbacks&lt;/em&gt;&lt;/a&gt;, and once they are resolved, they come back to the call stack pushed by the event loop. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This is just a very small introduction to very important concepts from JavaScript. Understanding the functionality of the concepts helps us to face in a better way many situations we can have while developing JavaScript code. You can keep learning about those in the following links:&lt;/em&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://youtu.be/8aGhZQkoFbQ"&gt;https://youtu.be/8aGhZQkoFbQ&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/SrNQS8J67zc"&gt;https://youtu.be/SrNQS8J67zc&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

</description>
      <category>javascript</category>
      <category>learning</category>
      <category>code</category>
      <category>beginners</category>
    </item>
    <item>
      <title>I got 99 problems, but that’s better than one</title>
      <dc:creator>Mauro López</dc:creator>
      <pubDate>Tue, 13 Jul 2021 23:07:40 +0000</pubDate>
      <link>https://dev.to/maurolopezj/i-got-99-problems-but-that-s-better-than-one-45ln</link>
      <guid>https://dev.to/maurolopezj/i-got-99-problems-but-that-s-better-than-one-45ln</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;This is a small collection of some lessons learned facing up different situations in my daily life as a software engineer. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In my opinion, work as a software engineer is nothing but the continuous implementation of solutions to different situations, some of them are technical and others no-technical. No matter the type of situation, each one can teach you many things, even things you thought you knew. &lt;/p&gt;

&lt;p&gt;This article pretends to be a support for any dev but especially for those who are starting on this great road&lt;/p&gt;

&lt;h2&gt;
  
  
  We work with computers, but humans are our principal customer
&lt;/h2&gt;

&lt;p&gt;When I talk about a “customer” I’m not only talking about the final user of the app or the product owner, I’m talking about our co-workers too because, in the end, we are giving a service, the service of build software! And real software is building in teams. &lt;/p&gt;

&lt;p&gt;So, to be gentle, kind, and empathetic is very important. Virtuality or the fast pace from routine makes it easy to forget that on the other side of the screen/table, there is a human too. Small actions such as showing genuine interest in others or small talks with your teammates can make the different. Every person is different and great on their own.&lt;/p&gt;

&lt;h2&gt;
  
  
  You can be a leader, no matter where you are
&lt;/h2&gt;

&lt;p&gt;You don't need to wait until you are in a leadership position in order to perform your leadership. No matter your position you always be able to make suggestions, provide solutions, discuss scenarios, spread a good attitude to the team… and by doing that, you will build relations that will allow you to increase your influence zone every day more.&lt;/p&gt;

&lt;h2&gt;
  
  
  Visibility is the key
&lt;/h2&gt;

&lt;p&gt;Usually, we have an inner voice that tells us we're lost even before we realize we truly are. In that case, the best approach is to raise our hand as soon as we hear it in order to give visibility to the situation and plan different scenarios.&lt;/p&gt;

&lt;p&gt;You don't have to send a red flag to the team at the first time you hear the voice I just mentioned, it’s only to communicate that probably that ticket will require more time than you expected or you’re having troubles with X or Y thing and because of that you will need to add new subtask or increase the remaining time of the task. When the situation progress, you can give updates and in case you require help, the situation will be easier to manage because you gave visibility with time   &lt;/p&gt;

&lt;h2&gt;
  
  
  Documentation is like a hug to yourself (or someone else) in the future
&lt;/h2&gt;

&lt;p&gt;Do you remember the reason why you and your friends went to that new cafe and not to the usual one 4 months ago? Well, basically the same here! Sometimes we make small decisions that make a lot of sense at the moment, but we can forget in the future, and in case that you need to look back and understand the reason for the things, you can save a lot of time if you can find context easily. So, document!! Document your methods, document your tickets, document your pull request, document with clear messages your git commitments… document.&lt;/p&gt;

&lt;p&gt;Documentation requires time, but trust me, is a good investment. Also, you can add a subtask in your ticket only to document all the stuff you did there. &lt;/p&gt;

&lt;h3&gt;
  
  
  Conclusions:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;We work with computers, but humans are our principal customer&lt;/li&gt;
&lt;li&gt;You can be a leader, no matter where you are&lt;/li&gt;
&lt;li&gt;Visibility is the key&lt;/li&gt;
&lt;li&gt;Documentation is like a hug to yourself (or someone else) in the future&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Postdata:
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;This article is based on &lt;a href="https://faingezicht.com/articles/2020/06/13/chunks/"&gt;this other&lt;/a&gt; written by &lt;a href="https://twitter.com/avyfain"&gt;Avy Faingezicht&lt;/a&gt;  (even has the same title, but kind of different focus). I decided to write my own version because I feel identified with many situations exposed there and it was very helpful in order to give me a guide for solving some of my situations as a software engineer. For that reason, I would love to share my experience in case it could help others.  Also, I recommended you to take a look into Avy Faingezicht’s blog, which has many other interesting &lt;a href="https://faingezicht.com/articles/"&gt;articles&lt;/a&gt; and &lt;a href="https://faingezicht.com/photos/"&gt;cool photos !&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>career</category>
      <category>devlive</category>
      <category>productivity</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Explained: Definition of done</title>
      <dc:creator>Mauro López</dc:creator>
      <pubDate>Sat, 10 Jul 2021 22:24:15 +0000</pubDate>
      <link>https://dev.to/maurolopezj/explained-definition-of-done-4nde</link>
      <guid>https://dev.to/maurolopezj/explained-definition-of-done-4nde</guid>
      <description>&lt;p&gt;As engineers, our responsibilities don't lie only in writing the code but also to develop a solution that meets standards of quality. To guarantee that quality it is recommended to define what we can expect from a ticket that is done, this is called “definition of done”.&lt;/p&gt;

&lt;p&gt;Normally, each team has its own definition of done. For sure, it can change between teams and commonly the responsibilities for developers are: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Make sure to cover ticket accepts criteria&lt;/li&gt;
&lt;li&gt;Create Unit test to methods created and updated&lt;/li&gt;
&lt;li&gt;Make a pull request and attend requested changes if there is any&lt;/li&gt;
&lt;li&gt;Make sure Pull Request is closed before continues process&lt;/li&gt;
&lt;li&gt;Make smoke testing of ticket on controlled environment&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are sometimes due to any external situation where your work related to code is done but still the ticket does not satisfy what “done” means to the project, so even when it feels like it is done, the ticket is not yet!!! &lt;/p&gt;

&lt;p&gt;It’s very important to know that there exist mechanisms to manage this type of situation. All of them resume on raising your hand, but there are different ways you can raise the hand. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Meeting&lt;/li&gt;
&lt;li&gt;Official communication channel&lt;/li&gt;
&lt;li&gt;Ticket comments&lt;/li&gt;
&lt;li&gt;Email&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If daily meetings as stand up take place on your project, you must use them to mention the current situation and also, request the actions to remove the blocker. However, there is a phrase that says “words are gone with the wind”, so if you don't see any movement on your blocked ticket, you should use the official communication channel, as Slack for example, to remember the actions needed. If that doesn't solve the issue you can proceed to write a comment on the ticket and also flag it. If after all this, the situation persists, you can use the email to communicate and explain the context.    &lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusions:
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Always have present what “done” mean for your team and make sure your tickets meet those standards &lt;/li&gt;
&lt;li&gt;Is totally normal that a random situation appears and blocks your intention to make your ticket accomplish the definition of done, but raising your hand as soon as possible you can mitigate risks. &lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>productivity</category>
      <category>programming</category>
      <category>devlive</category>
      <category>career</category>
    </item>
  </channel>
</rss>
