<?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: Carlos Fuentes</title>
    <description>The latest articles on DEV Community by Carlos Fuentes (@metcoder).</description>
    <link>https://dev.to/metcoder</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%2F36858%2F7569c625-19b6-40d5-98ab-c88d5a6d0a0e.jpg</url>
      <title>DEV Community: Carlos Fuentes</title>
      <link>https://dev.to/metcoder</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/metcoder"/>
    <language>en</language>
    <item>
      <title>Being an Impostor</title>
      <dc:creator>Carlos Fuentes</dc:creator>
      <pubDate>Tue, 03 Mar 2020 22:13:10 +0000</pubDate>
      <link>https://dev.to/metcoder/being-an-impostor-3pd8</link>
      <guid>https://dev.to/metcoder/being-an-impostor-3pd8</guid>
      <description>&lt;p&gt;Everybody at some point in time we heard about the &lt;a href="https://en.wikipedia.org/wiki/Impostor_syndrome"&gt;Impostor Syndrome&lt;/a&gt; and how hard if to deal with it.&lt;/p&gt;

&lt;p&gt;Stress, anxiety, and depression are the most common symptoms when we talk about feeling like an impostor. Like many people, I suffered and I'll suffer in the future, in this article I want to share with you a couple of my experiences dealing with this hard stage in my career as a Software Engineer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Me as an Impostor
&lt;/h2&gt;

&lt;p&gt;First of all:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Impostor syndrome (also known as impostor phenomenon, impostorism, fraud syndrome or the impostor experience) is a psychological pattern in which one doubts one's accomplishments and has a persistent internalized fear of being exposed as a "fraud". - Wikipedia&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For me, 2019 was a complete adventure. I didn't only start working for an amazing startup like Taxfix, 2019 marked a point of change in my life; I achieve my dreamed job and move from my home country (I'm from Mexico) to an amazing place like Germany, all of that with only 23 years (I'm a child, I know 😅).&lt;/p&gt;

&lt;p&gt;In the beginning, everything was like a dream, everything was amazing and I was so excited to achieve one of my life goals. But after I while, I started to feel like I didn't deserve any of these things.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You may wonder, why?&lt;/strong&gt; Was because, seeing around and looking at a group of amazing people from so many different countries, with different experiences and a lot of knowledge became to be really stressful for me.&lt;/p&gt;

&lt;p&gt;With thoughts like &lt;em&gt;you're just a lucky guy&lt;/em&gt; or &lt;em&gt;you're not soo smart like anybody else here&lt;/em&gt; started rounding my mind. Just ask a couple of questions like where is &lt;code&gt;X&lt;/code&gt; service or &lt;strong&gt;what are flow to deploy something?&lt;/strong&gt; make me feel like the most naive person in the world.&lt;/p&gt;

&lt;p&gt;It was a hard time for me, but worth it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Is not easy, but give it a try
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;What did I do?&lt;/strong&gt; Just learn the following...&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Learn to rest&lt;br&gt;
Your health is more important than anything else in this world. In my forced way of trying to be better and not understanding my limits, I spend too much time reading articles and contributing that most of the time sleep really bad (or I didn't sleep at all). &lt;br&gt;
Take rests, do exercise, eat healthily (junk food is valid but not all the time 😅). Once you understand that more healthy you're, more productive and in better shape, you will be.&lt;/p&gt;

&lt;p&gt;Lose the fear to ask&lt;br&gt;
If you don't know something or your stuck, &lt;strong&gt;ask&lt;/strong&gt;. We're lucky that most of the people who code are really friendly and happy to help you. From junior to senior, everybody asks questions.&lt;br&gt;
If you are in an environment where if you ask, somebody complains or just doesn't help, is better if you leave ASAP. Believe me, you will thank me for it.&lt;/p&gt;

&lt;p&gt;We don't know everything&lt;br&gt;
We're incapable of know everything, we're just humans and we have more in our mind that only machine code, design patterns or data structures. It is completely fair. Where you're right now, a Senior dev was, and if you understand this point and agree with yourself that you're in a constant learning path, you will be where the Senior dev is right now.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;and...&lt;/p&gt;

&lt;h2&gt;
  
  
  The most important thing about all of this
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Don't compare yourself with anybody&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It is not fair for you, it is not fair for all your sacrifices, all your time invested learning by yourself or going to the University. Nobody knows all the things you did to be where you are right now. Only you understand better than anybody what are you capable of and how important you're. Be proud of what you achieve and be happy with the path you're walking of, only you know where you're and where you want to be.&lt;/p&gt;

&lt;h2&gt;
  
  
  Even with that, be careful
&lt;/h2&gt;

&lt;p&gt;Impostor Syndrome could appear at any time, at any level, at any seniority. It is something that most of the time we don't expect, but we should be aware and capable of understanding why this happens and make a small stop in our lives to re-negotiate with ourselves and make a deal to keep moving improving ourselves.&lt;/p&gt;

&lt;p&gt;Feel free to share your thoughts and experience dealing with Impostor Syndrome, will be nice to read you! 😄&lt;/p&gt;

</description>
      <category>career</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Big-O Notation: Beginners Guide</title>
      <dc:creator>Carlos Fuentes</dc:creator>
      <pubDate>Mon, 12 Nov 2018 06:26:48 +0000</pubDate>
      <link>https://dev.to/metcoder/big-o-notation-beginners-guide-1h38</link>
      <guid>https://dev.to/metcoder/big-o-notation-beginners-guide-1h38</guid>
      <description>&lt;p&gt;In the world of programming write code as today is your last day on earth is not the main thing in the art of programming. Beyond understand what's the problem that our code will solve, we have other variables that we need to take care when we are writing code. For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Complexity&lt;/li&gt;
&lt;li&gt;Maintainability&lt;/li&gt;
&lt;li&gt;Design Patterns&lt;/li&gt;
&lt;li&gt;Algorithms&lt;/li&gt;
&lt;li&gt;and beyond...&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One of the most important things and the main topic of this article is the performance of our application when we are implementing an algorithm.&lt;/p&gt;

&lt;p&gt;The performance of our algorithm helps us to make more user-friendly our application, letting the user invest only the necessary time to do the tasks and focus on other things before the go bored and close the window (browser or anything else). No matter how fast and proficient was the device from where the user is using our app. In today's world, the time is the most precious thing that we have.&lt;/p&gt;

&lt;p&gt;Are many variables to take care when we talk about performance like the use of memory, disk space, execution time and another long beyond.&lt;br&gt;
One of the most important tools to determinate the performance of our algorithm is the &lt;strong&gt;Big-O Notation&lt;/strong&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  Big O Notation
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6nnucsmsvj8jxa6xprx.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6nnucsmsvj8jxa6xprx.jpg" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The Big-O Notation is a tool that let us determinate the complexity of an algorithm, letting us take a measure of the performance of a specific algorithm. This tool measures the worst case scenario where the algorithm goes to the highest point of demand.&lt;/p&gt;

&lt;p&gt;The main Big-O terms are these:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;O(1) -&amp;gt;  &lt;strong&gt;Constant&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;O(n) -&amp;gt; &lt;strong&gt;Linear&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;O(log n) -&amp;gt; &lt;strong&gt;Logarithmic&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;O(n ^ 2) -&amp;gt; &lt;strong&gt;Quadratic&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;O(2 ^ n) -&amp;gt; &lt;strong&gt;Exponential&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  O(1): Constant Complexity
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;constant complexity&lt;/strong&gt; is the easier, all the algorithms who, &lt;strong&gt;no matter the size of the input or output, the execution time and the resources used will be always the same&lt;/strong&gt;, have this complexity. No matter how many times or where the algorithm is executed, &lt;strong&gt;this one will have exactly the same behavior all the time&lt;/strong&gt;. For example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm234yvftmwck7a76w689.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm234yvftmwck7a76w689.png" alt="A function that returns the last item of an array" width="800" height="511"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we see, no matter how big is the size of the array given as an argument, the behavior will always be the same. The only thing that might change will be the output, this because the array might not have the same data stored all the time.&lt;/p&gt;

&lt;h2&gt;
  
  
  O(n): Linear Complexity
&lt;/h2&gt;

&lt;p&gt;We say that an algorithm has &lt;strong&gt;linear complexity&lt;/strong&gt; when &lt;strong&gt;his execution time and/or resources used are directly proportional&lt;/strong&gt; (grows up in a linear way) &lt;strong&gt;to the input size&lt;/strong&gt;. For example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fckssxvc6sinsczgks2d7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fckssxvc6sinsczgks2d7.png" alt="A function that prints each item stored in an array" width="800" height="365"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To get an easier way to understand this complexity, we can compare this to an activity that we do every day (or mostly), for example, &lt;strong&gt;read a book or watch a movie&lt;/strong&gt;. The time that we spend reading a book or watching a movie, depends on the number of pages of a book and the duration of the movie. For example, if a movie has a duration of two hours, you'll spend &lt;strong&gt;two hours watching a movie&lt;/strong&gt;. If the book has one hundred pages and you read fifty pages in one hour, you'll spend &lt;strong&gt;two hours to read all the book&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  O(log n): Logarithmic Complexity
&lt;/h2&gt;

&lt;p&gt;This complexity is present where the impact of an algorithm is &lt;strong&gt;directly proportional to the logarithmic result of the input size&lt;/strong&gt;. In other words, when we have an input size of 10 and we need 1 second to accomplish the task with our algorithm, we need to do exactly the same task with an input size of 100 in 2 seconds, with an input size of 1000 in 3 seconds and so on.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuo1u4vooosq0593cndrq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuo1u4vooosq0593cndrq.png" alt="Binary search (thanks to room_js)" width="800" height="855"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;One interesting example is the &lt;a href="https://en.wikipedia.org/wiki/Binary_search_algorithm" rel="noopener noreferrer"&gt;binary search&lt;/a&gt;. In this algorithm, we divide the array (previously ordered) into two parts. We take the middle index as a reference to get the value at the middle of the array. If the number in that spot is equal to the number we are looking for, we return the middle index adding up the prefix that we use to find the spot where the number we are looking for is stored. Thanks to that, if the number is bigger than the number stored at the middle of the array, we look for the number in the right side of the array, instead, if is lower, we look in the left side of the array. After that, we use the prefix to use as the new prefix in the next iteration as a recursive way. We repeat this loop until get the given number.&lt;/p&gt;

&lt;h2&gt;
  
  
  O( n^2 ): Quadratic Complexity
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;quadratic complexity&lt;/strong&gt; is present when the impact of the algorithm is &lt;strong&gt;directly proportional to the square of the input size&lt;/strong&gt;. This means, if we have an array as input with a length of 4 spots and we want to compare to look if the array has repeated items, we need to do 16 comparations to accomplish our task. This complexity is common in sorting algorithms like &lt;a href="https://www.geeksforgeeks.org/bubble-sort/" rel="noopener noreferrer"&gt;bubble sort&lt;/a&gt;, &lt;a href="https://en.wikipedia.org/wiki/Insertion_sort" rel="noopener noreferrer"&gt;insertion sort&lt;/a&gt;, and the &lt;a href="https://en.wikipedia.org/wiki/Selection_sort" rel="noopener noreferrer"&gt;selection sort&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6f5s1uiu64vehd245vf8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6f5s1uiu64vehd245vf8.png" alt="A function that prints " width="" height=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this function, the complexity can grow up if we add more for loops. &lt;strong&gt;This could make us go to an O(n * n) complexity&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  O( 2^n ): Exponential Complexity
&lt;/h2&gt;

&lt;p&gt;When an algorithm has &lt;strong&gt;exponential complexity&lt;/strong&gt;, this means that &lt;strong&gt;the complexity will double with each additional item in the input&lt;/strong&gt;. If 10 items take 100 seconds, 11 would take 200 seconds, 13 would take 400 seconds and so on.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq2cy5gfd03b3fuicgsce.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq2cy5gfd03b3fuicgsce.png" alt="Fibonacci sequence" width="" height=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This doesn't mean that only exists O( 2^n ), this is just for explanation purpose. Can grow to O( 3^n ), O( 4^n ) and so on.&lt;/p&gt;

&lt;h1&gt;
  
  
  Wrapping Up
&lt;/h1&gt;

&lt;p&gt;I hope this helps you to understand more the Big-O Notation, it's a great help to measure the complexity of an algorithm, exists many more tools to do this but this is one of the more common.&lt;/p&gt;

&lt;p&gt;If you have questions or want to correct some mistakes, feel free to leave your comment below. I'm leaving below a little list of resources about Big-O Notation.&lt;/p&gt;

&lt;h1&gt;
  
  
  More resources
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://es.khanacademy.org/computing/computer-science/algorithms/asymptotic-notation/a/big-o-notation" rel="noopener noreferrer"&gt;https://es.khanacademy.org/computing/computer-science/algorithms/asymptotic-notation/a/big-o-notation&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/" rel="noopener noreferrer"&gt;https://rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation/&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://en.wikipedia.org/wiki/Big_O_notation" rel="noopener noreferrer"&gt;https://en.wikipedia.org/wiki/Big_O_notation&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="http://interactivepython.org/runestone/static/pythonds/AlgorithmAnalysis/BigONotation.html" rel="noopener noreferrer"&gt;http://interactivepython.org/runestone/static/pythonds/AlgorithmAnalysis/BigONotation.html&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>computerscience</category>
      <category>codenewbie</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Let's talk about Hard Binding in JavaScript</title>
      <dc:creator>Carlos Fuentes</dc:creator>
      <pubDate>Mon, 06 Nov 2017 06:09:01 +0000</pubDate>
      <link>https://dev.to/metcoder/lets-talk-about-hard-binding-in-javascript-9m2</link>
      <guid>https://dev.to/metcoder/lets-talk-about-hard-binding-in-javascript-9m2</guid>
      <description>&lt;p&gt;After a busy week, I'm here and I want to talk with you (&lt;em&gt;the reader&lt;/em&gt;) some confusing (&lt;em&gt;at less for me&lt;/em&gt;) and interesting concept in JavaScript.&lt;br&gt;
Currently, I'm involved in different groups on facebook where we have as a principal topic talk about programming. Advice, trending, news and much more about that; obviously, all in Spanish (&lt;em&gt;I'm from Mexico if you don't know&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;One of these groups is exclusively about Node.js and JavaScript (&lt;em&gt;if you're Spanish-speaking, I invite you to join. Here's the &lt;a href="https://www.facebook.com/groups/node.es" rel="noopener noreferrer"&gt;link&lt;/a&gt;&lt;/em&gt;). After reading posts for a while, I found this 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="nf"&gt;foo&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bar2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;orig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;foo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt; &lt;span class="nx"&gt;orig&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nf"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Take your time to think about what this piece of code is going to print and then continue with the article. I wait for you, do not worry.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhlbzzcx1ccthneu1ibq.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhlbzzcx1ccthneu1ibq.gif" alt="Thinking about it" width="320" height="240"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Whether you get it or not, this code snippet prints &lt;code&gt;bar&lt;/code&gt; twice in a row.&lt;/p&gt;

&lt;p&gt;Here the &lt;a href="https://jsfiddle.net/greenpioneer/x16gxwk7/" rel="noopener noreferrer"&gt;link&lt;/a&gt; to see it and yeah, is his code.&lt;/p&gt;

&lt;p&gt;Well, we get this result because of one thing: &lt;strong&gt;Hard Binding&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbti548ebmr81put20soo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbti548ebmr81put20soo.gif" alt="Ok?" width="480" height="268"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  And what is Hard Binding?
&lt;/h2&gt;

&lt;p&gt;To have a good understanding of Hard Binding is important to reach some confusing things before getting a hard binding. One of these is &lt;strong&gt;this&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  This
&lt;/h3&gt;

&lt;p&gt;Is a mechanism that is most commonly used in the OOP programming paradigm. In that cases, we talk about the context of the object what are creating. For example, the uses of his functions and global variables. In JS, the history is some confusing but nothing of the other world.&lt;/p&gt;

&lt;p&gt;In JS, &lt;code&gt;this&lt;/code&gt; is a contextually based mechanism which, in turn, is based on the function invocation and not in the where the function was declared. When a function is invoked a &lt;strong&gt;call-stack&lt;/strong&gt; is created and with this call-stack, a kind of record too. In this record is saved the information of the function with data of how and where has invoked, what parameters are passed and more. With all of that information, &lt;code&gt;this&lt;/code&gt; comes as one of those properties. At the end, the record is alive as the duration of the function execution.&lt;/p&gt;

&lt;h3&gt;
  
  
  Binding
&lt;/h3&gt;

&lt;p&gt;In JS, &lt;strong&gt;the context in where we invoke&lt;/strong&gt; a function has a lot of importance.&lt;/p&gt;

&lt;p&gt;Think about this function:&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="nf"&gt;something&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;something&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What is going to print?&lt;/p&gt;

&lt;p&gt;I let you try that code and explain what exactly happens.&lt;/p&gt;

&lt;p&gt;When we call &lt;code&gt;this&lt;/code&gt;, we are invoking the context of the global object. In other words, we are taking properties (&lt;em&gt;in this case, the variable&lt;/em&gt; &lt;code&gt;a&lt;/code&gt;) declared as global outside of the function. Doesn't matter if I create a variable called as the same of the outside variable, I taking properties from the global object, not from the function context.&lt;/p&gt;

&lt;h4&gt;
  
  
  Implicit Binding
&lt;/h4&gt;

&lt;p&gt;Now, what about this code. What is going to print?&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="nf"&gt;something&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;something&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;something&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When we have this, we are applying something called &lt;strong&gt;Implicit Binding&lt;/strong&gt; . . . &lt;em&gt;and with what I can eat that?&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Well, as you see in this case, we are assigning the context as an object to the function. In a more simple way, we are creating the context of the function as an object. So, instead of taking the global context, take the context of the object we made.&lt;/p&gt;

&lt;p&gt;With this comes a problem, what if we do 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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;something&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;something&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;cake&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;something&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;cake&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Well, we lost the object context and we had the global context again, but why?&lt;br&gt;
Remember when I told you that &lt;strong&gt;the invocation matters&lt;/strong&gt;? Well, this is the reason why.&lt;/p&gt;

&lt;p&gt;We lost the context of the object because we assign the function to a variable,  obtaining a reference to that function, changing the context. When we do that, a &lt;strong&gt;implicit lost&lt;/strong&gt; occurs and we obtain the global context (&lt;em&gt;for this case&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;The same happens if we do 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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;something&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;a&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="nf"&gt;anotherFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="nf"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;something&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Five&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;anotherFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;something&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Remember, &lt;strong&gt;invocation matters&lt;/strong&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Explicit Binding
&lt;/h4&gt;

&lt;p&gt;As everything, every problem has a solution (&lt;em&gt;or we can make one, but in this case has one as default&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;If we want to force a function to get a particular context of an object without an implicit reference, we can use functions like &lt;code&gt;call(...)&lt;/code&gt; (&lt;em&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" rel="noopener noreferrer"&gt;more info&lt;/a&gt;&lt;/em&gt;) or &lt;code&gt;apply(...)&lt;/code&gt; (&lt;em&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" rel="noopener noreferrer"&gt;more info&lt;/a&gt;&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;Calling &lt;code&gt;call()&lt;/code&gt; and passing the object that you want to apply as an argument, forces the function to use the context of the object. For example, 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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;something&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;a&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Five&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;something&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As above, we can use &lt;code&gt;apply(this, [])&lt;/code&gt; instead. Passing an object and an array as arguments.&lt;/p&gt;

&lt;h2&gt;
  
  
  Hard Binding
&lt;/h2&gt;

&lt;p&gt;At this point, I hope everything is fine. You understood everything I wrote, I suppose. Now with this, maybe you want to know: &lt;strong&gt;and a hard binding, what about that?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Well, let me tell you something. With this solution we do not solve all the binding problems, you know?&lt;/p&gt;

&lt;p&gt;We back to the first code that I found:&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="nf"&gt;foo&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="na"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bar&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="na"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bar2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;orig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;foo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt; 
  &lt;span class="nx"&gt;orig&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;call&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Why do that?&lt;/p&gt;

&lt;p&gt;Put attention just in this line: &lt;code&gt;foo = function() { orig.call(obj) }&lt;/code&gt;&lt;br&gt;
Ok, you see it? That's is &lt;strong&gt;hard binding&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;That function makes that &lt;code&gt;foo&lt;/code&gt; always do the same action every time that is called, no matter what is the invocation context. &lt;strong&gt;Make a function that calls internally and manually an explicit binding and force to do the same instruction&lt;/strong&gt; no matter where and how you invoke that function&lt;/p&gt;

&lt;p&gt;As we talk above, &lt;strong&gt;Every problem has a solution&lt;/strong&gt; (&lt;em&gt;or we can make one&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="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;something&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bar&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bar&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="na"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;apply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;arguments&lt;/span&gt;&lt;span class="p"&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;var&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;result_2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;obj2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;result&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;result_2&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or, we can use the one that &lt;strong&gt;ES5&lt;/strong&gt; gives us&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="nf"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;something&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="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bar&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bar&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;something&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="na"&gt;bar&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;foo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nf"&gt;result&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This utility was introduced by &lt;strong&gt;ES5&lt;/strong&gt; in &lt;code&gt;Function.prototype.bind&lt;/code&gt; (&lt;em&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="noopener noreferrer"&gt;more info&lt;/a&gt;&lt;/em&gt;), it gave us the &lt;strong&gt;hard binding&lt;/strong&gt; in an easier way.&lt;/p&gt;

&lt;h1&gt;
  
  
  One more thing
&lt;/h1&gt;

&lt;p&gt;Feel free to make comments and corrections to this article. I do this article just for explain and understand more clearly how Binding works and what is Hard Binding. If you want to know more about Binding or JavaScript in general, you can read &lt;a href="https://github.com/getify/You-Dont-Know-JS" rel="noopener noreferrer"&gt;You-Dont-Know-JS&lt;/a&gt; and understand more clearly this and more things about JS.&lt;/p&gt;

&lt;p&gt;See ya.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>Is the use of scaffolding a good idea for a junior dev?</title>
      <dc:creator>Carlos Fuentes</dc:creator>
      <pubDate>Mon, 23 Oct 2017 03:52:58 +0000</pubDate>
      <link>https://dev.to/metcoder/is-a-good-idea-for-a-junior-dev-the-use-of-scaffolding-1cf</link>
      <guid>https://dev.to/metcoder/is-a-good-idea-for-a-junior-dev-the-use-of-scaffolding-1cf</guid>
      <description>&lt;p&gt;The last week, after I finished my first article (here is a &lt;a href="https://dev.to/metcoder95/introduction-hi-my-name-is-charlie--this-is-where-i-started-35i"&gt;link&lt;/a&gt; to go) I started a simple project just for implement some stuff that I read and learned in some articles here and in the wide world of the internet. Once I took in mind what stuff I will implement in the project, I searched in google (just for curious) for generators to start the project (&lt;em&gt;like &lt;a href="http://expressjs.com/es/starter/generator.html" rel="noopener noreferrer"&gt;express-generator&lt;/a&gt; for Expressjs&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;I found a great one called &lt;a href="https://github.com/diegohaz/rest" rel="noopener noreferrer"&gt;rest&lt;/a&gt; using &lt;a href="http://yeoman.io/" rel="noopener noreferrer"&gt;yeoman&lt;/a&gt;. Once I installed and ran the generator, I took a look at the folder structure and the files, looking how it works all the stuff. When I finished understanding how it works, I took the time to think and make me one question: &lt;strong&gt;It's a good idea for a Junior Dev the use scaffolding?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;To answer that question I decided to write this article, so I want to explain my point of view about scaffolding.&lt;/p&gt;

&lt;h1&gt;
  
  
  First, What is a Scaffolding (Generator)?
&lt;/h1&gt;

&lt;p&gt;If we take a look how Yeoman describes itself, we can have an idea: "&lt;em&gt;Is basically a plugin that can run a command to scaffold complete projects or useful parts&lt;/em&gt;".&lt;/p&gt;

&lt;p&gt;In other words, it's a helpful command to create an entire project or partial project to get started.&lt;/p&gt;

&lt;p&gt;Like yeoman, we can find other scaffolding tools to create skeletons for applications for various frameworks. We can find it in form of Ruby gems for Ruby on Rails, a NPM Package for Nodejs and much more.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fch9nxg41bhr4gvccydaj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fch9nxg41bhr4gvccydaj.png" alt="Yeoman" width="800" height="321"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Beyond good and evil
&lt;/h1&gt;

&lt;h3&gt;
  
  
  What is the good if I use it?
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;The use scaffolding it's a good way to start a project&lt;/strong&gt;. The creators of this tools research in books, internet, and other ways; giving to you the best of design patterns and best practices that they can find. They took his time to give you an approach of how you should structure your code and files to get a good and readable project.&lt;/p&gt;

&lt;p&gt;This tools are made or should be made, with a &lt;strong&gt;module architecture&lt;/strong&gt;. Giving to you the skeleton of an app that can grow in an intelligent and a readable way. This means that you have a support to build and grow your actual product.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Scaffolding is a very useful time-saver&lt;/strong&gt;, giving to you a quick code that it works. This is an opportunity for saving time starting a project from scratch and giving to you the way to implement the things that you need with less stress. More of the generators implements tools that can take you a long time to implement by yourself, more if you don't have experience with that. It's a good way to know how the tools work and with an extra by the way, getting implemented in our project.&lt;/p&gt;

&lt;h3&gt;
  
  
  So, what is wrong if I use it?
&lt;/h3&gt;

&lt;p&gt;Well, if you are new in development or a Junior Dev like me, a lot I guess.&lt;/p&gt;

&lt;p&gt;Most of the scaffolding that we can find outputs of some &lt;strong&gt;generic code&lt;/strong&gt;. Some of them maintain that generic code up to date, others are up to date if you live in 2014. We can get the same if we talk about some packages or tools that have preinstalled or implemented.&lt;/p&gt;

&lt;p&gt;With that generic code comes the &lt;strong&gt;customitation&lt;/strong&gt;. Some of the generators are prepared just for bootstrapped quickly and have a hard way to modify to your needs. Obviously, depends on the level of the scaffolding. Some come with a scaffolding only in the structure of your code and files, and use of some tools, another come even with a pre-migrated ORM's, etcetera. Just making more unflexible for the developers to customize by what they need.&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;The scaffolding and the use of generators is a good way to begin and understand design patterns and best practices, only if we are careful in how we use and what we use. The way to get the best experience with the use of scaffolding is always getting to understand how it works, not only what command make it run. Going deeper in how it works, how each file communicates with each other, how the tools are working and how are configurated it's the best practice to get experience and prevent get problems with the use of generators.&lt;/p&gt;

&lt;p&gt;The point is to always be curious. With the curiosity comes the experience and the knowledge.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>career</category>
      <category>programming</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Introduction: Hi! My name is Charlie &amp; this is where I started</title>
      <dc:creator>Carlos Fuentes</dc:creator>
      <pubDate>Wed, 18 Oct 2017 00:03:10 +0000</pubDate>
      <link>https://dev.to/metcoder/introduction-hi-my-name-is-charlie--this-is-where-i-started-35i</link>
      <guid>https://dev.to/metcoder/introduction-hi-my-name-is-charlie--this-is-where-i-started-35i</guid>
      <description>&lt;p&gt;Hi! My name is like I said in the title and I'm from Tecate, Mexico. At the time I do this post, I'm recently graduated from my Bachelor Degree in Computer Science in UABC (University Autonomous of Baja California) in Tijuana, Mexico. So, like you imagine, I'm a noob developer trying so hard to be into the magnificent world of Web &amp;amp; Mobile Development.&lt;/p&gt;

&lt;p&gt;Like most of the recently graduated, I have zero professional experience &amp;amp; so much energy to do a lot of stuff, almost everything that my mind can imagine I try to put into code and . . . well, maybe you know the rest.&lt;/p&gt;

&lt;h1&gt;
  
  
  What I do?
&lt;/h1&gt;

&lt;p&gt;At the moment that I writing this, I'm a Web Developer with some knowledge of Mobile Development (in Android using Java, sadly I don't have a Macbook for iOS and I prefer native before hybrid).&lt;/p&gt;

&lt;p&gt;My favorite programming languages are Javascript &amp;amp; Python (I put in this order because it's the way in that I prefer it). Maybe you imagine what is the most thing that I use and (if you got it) yeah, it's Nodejs. That incredible run-time environment for Javascript on the server. And yeah, if you have experience working with Nodejs for the web development, maybe you know what I use. . . *&lt;em&gt;drums&lt;/em&gt;*  Hapijs! (Obviously Expressjs too).&lt;/p&gt;

&lt;p&gt;With this in mind, most of the frameworks that I use are for back-end development. Using MongoDB for my NoSQL database and MySQL, PostgreSQL for a relational database. If you wanting to know if I use an in-memory database, yeah, I used Redis before (only for sessions data, but it's something).&lt;/p&gt;

&lt;p&gt;I need to say, I'm not so good in front-end terms but I worked before with Angular2 (when it recently release and had a lot of work only to know how made routes because. . . it's Angular). I know something about HTML5 &amp;amp; CSS3, enough to build a web page from scratch, about manipulating the DOM with Javascript it's something that I need to improve, but don't worry I can promise you I'm working hard to solve it *&lt;em&gt;wink wink&lt;/em&gt;*.&lt;/p&gt;

&lt;h1&gt;
  
  
  Why I'm doing this?
&lt;/h1&gt;

&lt;p&gt;Like I said in the begin of the article: &lt;strong&gt;I'm a Junior Developer&lt;/strong&gt;, who are looking how I can get some presence, some experience and improve my knowledge, I'm a huge noob at this point. So, after reading some articles like &lt;a href="https://dev.to/samjarman/how-to-build-an-online-presence-as-a-junior-developer"&gt;this&lt;/a&gt; and others, that I lost the links, I decided to follow his advice and begin writing some experiences, troubles, new stuff that I learn and something more in my road to being a FullStack Developer.&lt;/p&gt;

&lt;p&gt;And, as an extra point, get improve my English. So important at this days.&lt;/p&gt;

&lt;h1&gt;
  
  
  This is where my road begins
&lt;/h1&gt;

&lt;p&gt;From this point, I will try to write articles every week as possible I can. Wait for my next article next week. I really don't know what I could be, but I can promise I would be a great stuff (I guess).&lt;/p&gt;

&lt;p&gt;I invite you to begin this road with me. If you want to come, follow me and we can talk about programming and more.&lt;/p&gt;

&lt;p&gt;Thanks! and see you next week.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/3o7btQsLqXMJAPu6Na/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/3o7btQsLqXMJAPu6Na/giphy.gif" title="bye" alt="bye bye" width="480" height="320"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
