<?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: Enmanuel de la Nuez</title>
    <description>The latest articles on DEV Community by Enmanuel de la Nuez (@emtes).</description>
    <link>https://dev.to/emtes</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%2F266832%2Fff67c304-929b-44e6-8db8-223b0a2644c2.jpg</url>
      <title>DEV Community: Enmanuel de la Nuez</title>
      <link>https://dev.to/emtes</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/emtes"/>
    <language>en</language>
    <item>
      <title>Configuring Git</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Wed, 23 Sep 2020 19:04:36 +0000</pubDate>
      <link>https://dev.to/emtes/configuring-git-24cg</link>
      <guid>https://dev.to/emtes/configuring-git-24cg</guid>
      <description>&lt;p&gt;Git is one of the most common tools for developers, but we often learn just enough to get the work done. Below are some optional configurations for git you might not have encountered.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tell git your name and email
&lt;/h2&gt;

&lt;p&gt;Git uses this information to say who committed what. After all, software is often a team effort. By default, git will look for this information by asking your system and choose a default, but if you want full control, here is how you set this information.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;git config &lt;span class="nt"&gt;--global&lt;/span&gt; user.name &lt;span class="s2"&gt;"My Name"&lt;/span&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git config &lt;span class="nt"&gt;--global&lt;/span&gt; user.email &lt;span class="s2"&gt;"myemail@hello.dev"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Note the &lt;code&gt;--global&lt;/code&gt; flags, meaning these settings will be applied system-wide, as opposed to the user level.&lt;/p&gt;

&lt;h2&gt;
  
  
  Type less with aliases
&lt;/h2&gt;

&lt;p&gt;Some git commands can feel long and tedious at times, why not make some aliases? Aliases are nicknames for shell commands. For example, we can tell git that when we run &lt;code&gt;git st&lt;/code&gt;, we mean &lt;code&gt;git status&lt;/code&gt;. Here are some reasonable ones from the git docs.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;git config &lt;span class="nt"&gt;--global&lt;/span&gt; alias.st status
&lt;span class="nv"&gt;$ &lt;/span&gt;git config &lt;span class="nt"&gt;--global&lt;/span&gt; alias.co checkout
&lt;span class="nv"&gt;$ &lt;/span&gt;git config &lt;span class="nt"&gt;--global&lt;/span&gt; alias.br branch
&lt;span class="nv"&gt;$ &lt;/span&gt;git config &lt;span class="nt"&gt;--global&lt;/span&gt; alias.ci commit
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Aliases behave the same way as the full command, meaning you can provide them flags and arguments as usual.&lt;/p&gt;

&lt;h2&gt;
  
  
  Git auto-correct
&lt;/h2&gt;

&lt;p&gt;Are you always misspelling your git commands? Irritating, I know. Git can take help by guessing what you probably meant and doing it. Git auto-correct setting lets you choose how much time it waits before executing on its assumption.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;git config &lt;span class="nt"&gt;--global&lt;/span&gt; help.autoCorrect 30
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The argument we provided above is an integer representing tenths of seconds. &lt;code&gt;30&lt;/code&gt; means git waits for 3 seconds. If git got it wrong, cancel the command with &lt;code&gt;CTRL + C&lt;/code&gt; before the time is up and try again.&lt;/p&gt;




&lt;p&gt;I hope you learned something new! Be careful with git auto-correct, and thanks for reading!&lt;/p&gt;

&lt;p&gt;Photo by &lt;a href="https://www.pexels.com/@pradipna-lodh-69194?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels"&gt;Pradipna Lodh&lt;/a&gt; from Pexels&lt;/p&gt;

</description>
      <category>git</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Event-Driven Architecture</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Mon, 20 Jul 2020 20:38:08 +0000</pubDate>
      <link>https://dev.to/emtes/event-driven-architecture-3k8c</link>
      <guid>https://dev.to/emtes/event-driven-architecture-3k8c</guid>
      <description>&lt;p&gt;We tend to design systems based on requests and responses that allow our components to communicate and behave appropriately to streams of information. What do we do when components in our systems are more complex, dynamic, or loosely coupled? Event-driven architecture (EDA) is an architectural style based on an entirely different principle than requests to communicate changes in state, events.&lt;/p&gt;

&lt;p&gt;Events are the fundamental entity in EDA that communicate something that has happened. For example, an event can be announced by a button when a user presses it, a mechanism we're familiar taking advantage of in web development with event listeners. Events are pieces of data that describe something that has happened and contain no logic. We call components that emit events event producers or event publishers.&lt;/p&gt;

&lt;p&gt;Event producers are components of our system that generate events and announce them to our event-driven framework. Event producers are solely responsible for this and unaware of how we handle the events and where. An event producer's only coupling factor with the components that will react is the event message definition. The event message definition refers to the data and shape of that data that an event includes. &lt;/p&gt;

&lt;p&gt;In a request/response-based interaction, two communicating components have a large contract surface area, a measurement of coupling, or how much information components need to know about each other to communicate. For example, we often design components with the expectation of a side effect caused by the processing of a sent request. Additionally, components also must wait for a response. In this model service components and clients are coupled by the contract of what methods are available and logically as requests complete a given function.&lt;/p&gt;

&lt;p&gt;Service components in EDA do not behave like a service, and we instead refer to them as consumer components or event consumers. Event consumers, only constrained by the event message definition, react to events. Events are routed to these consumers by an event-driven framework that might be making use of a service we could use a message broker on a worker queue model. Consumers are not constrained to respond to events either, for producers do not expect it. Whenever we can perform a task without any need for the results of the operation, we can consider leveraging an event-driven architecture.&lt;/p&gt;

&lt;p&gt;EDA is hard to grasp since we are so used to thinking about software in terms of requests and responses. However, endeavoring to understand it should prove beneficial. Leveraging EDA makes it simpler for us to decouple components, which makes it easy for them to evolve and grow independent of each other. Similarly, EDA allows us to scale horizontally very well since we keep adding more consumers to react to an increasing amount of events.&lt;/p&gt;




&lt;p&gt;Cover photo by &lt;a href="https://www.pexels.com/@belart84?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels"&gt;Artem Beliaikin&lt;/a&gt; from Pexels.&lt;/p&gt;

</description>
      <category>backend</category>
      <category>webdev</category>
      <category>systemdesign</category>
      <category>scalability</category>
    </item>
    <item>
      <title>Scaling with Object Caches</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Mon, 13 Jul 2020 20:02:42 +0000</pubDate>
      <link>https://dev.to/emtes/scaling-with-caches-2b58</link>
      <guid>https://dev.to/emtes/scaling-with-caches-2b58</guid>
      <description>&lt;p&gt;Object caches go a long way in helping us secure the benefits caching delivers to the scalability and user experience of our web applications. Object caches are built on key-value stores, a simple type of database that matches a unique key to a value. Typically, these systems are simple to integrate into an already existing application and come with features useful to caching. Caching objects save us time and resources because we can retrieve them from our store rather than perform the computing to build them again. Object caches come in different types following the same principle. Let's explore common types of object caches.&lt;/p&gt;

&lt;h2&gt;
  
  
  Client-Side Caches
&lt;/h2&gt;

&lt;p&gt;Client-side caching is enabled by technologies that allow our applications to store objects in the user's device, preferably for as long as possible. For the web, most modern browsers support the Web Storage API, a programming interface for storing key-value pairs locally. Client-side caching is especially beneficial in increasingly common Single Page Applications or SPAs, which tend to make many AJAX request. Each request means time spent as the data travels to and from our servers, plus the time to compute or retrieve the requested information. By leveraging local storage and storing frequently requested data, we can decrease the load on our servers as well as provide a snappier user experience.&lt;/p&gt;

&lt;p&gt;To get started with the Web Storage API, open up your browser console and follow along with these snippets. All the following methods belong to the &lt;code&gt;localStorage&lt;/code&gt; object, which itself belongs to the &lt;code&gt;window&lt;/code&gt; object.&lt;/p&gt;

&lt;p&gt;To store a new key-value pair, use &lt;code&gt;setItem&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;setItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;REPLACE WITH KEY&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;REPLACE WITH VALUE&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// returns undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Using the method above will either set a new value to your key or replace the old value if the key is already in use. To retrieve the value, use &lt;code&gt;getItem&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;REPLACE WITH KEY&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// returns 'REPLACE WITH VALUE'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Deleting specific values is also straightforward with the use of &lt;code&gt;removeItem&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;removeItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;REPLACE WITH KEY&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// returns undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Now if we try to retrieve that same value...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;localStorage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;REPLACE WITH KEY&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// returns null&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Clearing all the key-value pairs we've created is also possible with &lt;code&gt;localStorage.clear()&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Caches Co-located with Code
&lt;/h2&gt;

&lt;p&gt;Caching close to our code refers to storing our key-value pairs either in places that are easy for our application logic to access. For example, our application's memory, which we can use when declaring an appropriate data structure cache data. Alternatively, we can deploy an independent cache server on the same machine for each of our web servers. Both methods have the benefit of being close to the code, so accessing them is relatively quick. Additionally, the code to access an independent service on the same machine won't be hard to adapt should you wish to connect to a remote service later on. The most popular key-value stores I've come across are Redis and Memcached. When looking to scale would architect our application so that we can have many web servers, meaning this type of cache scaled alongside them.&lt;/p&gt;

&lt;p&gt;When we deploy a cache server locally, however, we also face limitations. For example, each web server is only aware of a singular cache and will replicate data by storing information another web server has already cached. Additionally, removing cached data is difficult since we usually communicate with one server at a time but it might be cached on multiple machines.&lt;/p&gt;

&lt;h2&gt;
  
  
  Distributed Object Caches
&lt;/h2&gt;

&lt;p&gt;A distributed object refers to when our cache servers with software like Redis or Memcached lives on a separate host machine accessed over the internet. Distributed caches systems have the advantage of scaling very well, making it possible for our application to interact with multiple caches on a cluster as if it were one. The cache system will also be responsible for intelligently utilizing the resources available, combating the issues mentioned earlier of replication, and trouble deleting. Distributed object caches can scale vertically or horizontally to meet your application's demands without too much complexity.&lt;/p&gt;




&lt;p&gt;Thanks for reading :)&lt;br&gt;
Original cover photo by &lt;a href="https://www.pexels.com/photo/multi-colored-folders-piled-up-159519/?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels"&gt;Pixabay&lt;/a&gt;, edited by me.&lt;/p&gt;

</description>
      <category>redis</category>
      <category>scalability</category>
      <category>cache</category>
      <category>webdev</category>
    </item>
    <item>
      <title>NoSQL Document Stores</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Thu, 09 Jul 2020 20:31:53 +0000</pubDate>
      <link>https://dev.to/emtes/nosql-document-stores-3p30</link>
      <guid>https://dev.to/emtes/nosql-document-stores-3p30</guid>
      <description>&lt;h2&gt;
  
  
  What is NoSQL?
&lt;/h2&gt;

&lt;p&gt;NoSQL is a general term that encompasses databases that usually don't support the use of SQL (Structured Query Language) because they store data differently. NoSQL databases came about in the 2000s to meet the scalability demands of big companies like Google, Amazon, and Facebook. Traditional databases have been around since the 70s. Being such a general term, NoSQL can refer to many types based on how they store their data. The most popular types are document, key-value, wide-column, and graph stores. Document stores seem to be by far the most popular, widely used as a general-purpose database in many of the tutorials you might find on this platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  Document Stores
&lt;/h2&gt;

&lt;p&gt;Document stores make use of unique &lt;em&gt;documents&lt;/em&gt;, usually a type of JSON object with fields and values. These documents support many of the primitive data types we're used to from our programming languages, making it easy to get up and running with your language of choice. As opposed to normalizing data and building relations, documents allow you to store all the information related to an entity in that document.&lt;/p&gt;

&lt;h2&gt;
  
  
  Relational Databases vs. Document Stores
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Relational
&lt;/h3&gt;

&lt;p&gt;Suppose we want to build an application that has users and those users can track their hobbies. Using a relational database we would define the structure of our two basic entities to the level or normalization (the act of breaking up tables to reduce redundancy and increase data integrity) we like. A basic structure for our users and hobbies look like this:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Users Table&lt;/strong&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;id&lt;/th&gt;
&lt;th&gt;first_name&lt;/th&gt;
&lt;th&gt;last_name&lt;/th&gt;
&lt;th&gt;email&lt;/th&gt;
&lt;th&gt;hashed_password&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;Alex&lt;/td&gt;
&lt;td&gt;Shelley&lt;/td&gt;
&lt;td&gt;&lt;a href="mailto:s.alex@mail.com"&gt;s.alex@mail.com&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;7Fy5vQhehSBAuJaKBJLC&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;Manuela&lt;/td&gt;
&lt;td&gt;Avery&lt;/td&gt;
&lt;td&gt;&lt;a href="mailto:mavery@cool.org"&gt;mavery@cool.org&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;GFUtPYL3vyKZAQqJeVmA&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Hobbies Table&lt;/strong&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;id&lt;/th&gt;
&lt;th&gt;hobby&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;Swimming&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;Music&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;We can build a relationship between &lt;code&gt;users&lt;/code&gt; and &lt;code&gt;hobbies&lt;/code&gt; with another table, let's call it &lt;code&gt;user_hobbies&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;users_hobbies&lt;/strong&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;id&lt;/th&gt;
&lt;th&gt;user_id&lt;/th&gt;
&lt;th&gt;hobby_id&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;We can interpret it to mean user &lt;code&gt;1&lt;/code&gt; both swims and enjoys music while user &lt;code&gt;2&lt;/code&gt; only recorded enjoying swimming. A query with a SQL operator like a &lt;code&gt;JOIN&lt;/code&gt; allows us to reference the &lt;code&gt;users&lt;/code&gt; and &lt;code&gt;hobbies&lt;/code&gt; tables with the IDs listed in the &lt;code&gt;user_hobbies&lt;/code&gt; table. This table structure allows us to assign any number of hobbies to any of the users in that table. We can also add users or hobbies individually without making new connections between them. Additionally, relational databases also allow us to alter any of the values and columns on a table.&lt;/p&gt;

&lt;h3&gt;
  
  
  Document-Oriented
&lt;/h3&gt;

&lt;p&gt;To capture the same data in a document-oriented database, we can store our user information and their hobbies in the same document.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"_id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"first"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Alex"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"last"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Shelley"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"email"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"s.alex@mail.com"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"hashed_password"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"7Fy5vQhehSBAuJaKBJLC"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"hobbies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"hobby"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Swimming"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"hobby"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Music"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;div class="highlight"&gt;&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"_id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"first"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Manuela"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"last"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Avery"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"email"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"mavery@cool.org"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"hashed_password"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"GFUtPYL3vyKZAQqJeVmA"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"hobbies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"hobby"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Swimming"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;This way of storing data allows us to be more flexible with our data. For example, We can change the structure of user &lt;code&gt;2&lt;/code&gt; without changing the structure of user &lt;code&gt;1&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Scalability
&lt;/h2&gt;

&lt;p&gt;Scaling a relational database is usually done by a combination of 3 principles: functional partitioning, data partitioning, and replicating data. Briefly, functional partitioning refers to delegating different data to different databases based on their purpose or function, with an emphasis placed on grouping together data that has similar write or read throughput needs. One example would mean storing data for users in one database while storing videos in another. This allows each service to be scaled independently. Within each service, data partitioning can be applied to divide a body of data among different machines so that no one server has all the information and operations can be shared. Lastly, replication refers to having more servers all replicating the other servers they’re connected to. Some of these servers will be for distributing read-only operations, while all write ops go through a primary server for the secondary ones to read from and replicate. All of these methods to scale relational databases present significant challenges such as replication lag and cross-partition queries. Luckily when the situation calls for it, we have alternatives.&lt;/p&gt;

&lt;p&gt;NoSQL databases like document-oriented ones were invented to solve problems that arise when we want to scale a relational database. These were built with horizontal scalability in mind, the holy grail of scalability. Typically, the more servers we add the more your throughput increases without many of the complications mentioned above. No choice is without trade-offs though, truly horizontal databases can still struggle with particularly workloads. Like always, it is about choosing the right tool for the job. Next time you find yourself wondering which one to use think about the workload you expect for your database and see how different types may help you. It is okay and common to use multiple types of databases for the same product, too, so no need to try and make a particular an all-situations magical tool.&lt;/p&gt;




&lt;p&gt;Thanks for reading! I hope to soon write about other types of NoSQL databases and familiarize myself with what's out there.&lt;/p&gt;

&lt;p&gt;Cover photo by &lt;a href="https://www.pexels.com/photo/batch-books-document-education-357514/?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels"&gt;Pixabay&lt;/a&gt; on Pexels.&lt;/p&gt;

</description>
      <category>mongodb</category>
      <category>database</category>
      <category>sql</category>
      <category>webdev</category>
    </item>
    <item>
      <title>REST Easy: An Introduction to REST Web Services</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Mon, 06 Jul 2020 19:56:57 +0000</pubDate>
      <link>https://dev.to/emtes/rest-easy-an-introduction-to-rest-web-services-noo</link>
      <guid>https://dev.to/emtes/rest-easy-an-introduction-to-rest-web-services-noo</guid>
      <description>&lt;p&gt;Since it's inception in 2000, REST has become the standard architectural style for web services or APIs. REST, or Representational State Transfer is concerned with &lt;em&gt;resources&lt;/em&gt; or entities on a system and interacting with them with a limited set of predetermined stateless operations. Resources model (represent) what can be considered types of objects in your application. For example, if you are building an application to track books a user has read you might consider creating a ‘book’ resource. Conversely, you might consider instead to build a ‘collection’ resource that has within it different books, or you might model both. Regardless of the exact models, a REST services (also called RESTful services/APIs) expose a standard way for other computers in your application to interact with its resources.&lt;/p&gt;

&lt;p&gt;The interactions with the resources of your application start with another standard: HTTP and its available methods or verb that describes the type of interaction. In general, a &lt;code&gt;GET&lt;/code&gt; request will retrieve or fetch a specific resource, &lt;code&gt;PUT&lt;/code&gt; is used to replace the resource, and &lt;code&gt;POST&lt;/code&gt; is used to update or create a new resource, with &lt;code&gt;DELETE&lt;/code&gt; to remove it. Every resource is identifiable by its URL or Uniform Resource Locator. With these two components, we can concisely describe different interactions with the previous example of our book tracking application. If we need to get a book, we can send a &lt;code&gt;GET&lt;/code&gt; request to &lt;a href="https://example.com/books/2"&gt;https://example.com/books/2&lt;/a&gt; which will retrieve the book with an ID of 2. These interactions are stateless because all the information needed to carry them out is included in the request, meaning the server doesn’t have to store information about previous requests with the client for the intended functionality.&lt;/p&gt;

&lt;p&gt;Stateless, uniform interactions provide many benefits to the development of an application:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  The structure of your service is easy to document and predictable. When it comes to using the service, you need only know the resources and what effects different HTTP verbs have on it. One common way to convey this is with a table. Consider our book app from earlier&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;HTTP Verb&lt;/th&gt;
&lt;th&gt;URL&lt;/th&gt;
&lt;th&gt;Behavior&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;GET&lt;/td&gt;
&lt;td&gt;/books&lt;/td&gt;
&lt;td&gt;Retrieve all books&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;GET&lt;/td&gt;
&lt;td&gt;/books/:id&lt;/td&gt;
&lt;td&gt;Retrieve book by ID&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;/books&lt;/td&gt;
&lt;td&gt;Add new book&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;POST&lt;/td&gt;
&lt;td&gt;/books/:id&lt;/td&gt;
&lt;td&gt;Update book data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DELETE&lt;/td&gt;
&lt;td&gt;/books/:id&lt;/td&gt;
&lt;td&gt;Delete book by ID&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PUT&lt;/td&gt;
&lt;td&gt;/books/:id&lt;/td&gt;
&lt;td&gt;Replace book by ID&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;  JSON, a file format, has also become another standard in web services communication. HTTP requests and JSON files can be consumed and created in nearly every modern language, allowing services intended to work with one another to be written in different languages. This might be a great decision because of the set of libraries different languages have.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The next couple of benefits I want to list aren’t immediately available to you if your application implements REST web services, but you will be very close. A REST web server deals in stateless requests, but can be completely stateless itself as well by delegating persistent storage to other computers. Stateless web services are ideal for scalability because of these advantages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;You can use a load balancer to distribute each request from a client to any number of servers. This is possible because like we mentioned before, every request has all the information your server needs to respond, so a request doesn’t need to be in communication with the same server over a period of time. This means that one request can go to a server while the next can go to a completely different one that is more available to respond quickly and maintain good user experience.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stateless web services can be treated like a collection or pool of resources. At any moment one server can be taken out of the pool and others can be put in. Essentially, all these servers are clones of each other and capable of providing the same functionality by spreading the work of handling requests evenly. Servers can stop working at any point service won’t be disrupted because another server can quickly take its place.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;REST is a versatile and battle-tested style to design a web service. With the right application, it will bring a lot of power and convenience to the development process and will go a long way in making sure they can scale as well to serve a large audience.&lt;/p&gt;




&lt;p&gt;Cover photo by Min An from Pexels&lt;/p&gt;

</description>
      <category>webdev</category>
    </item>
    <item>
      <title>Demystifying Nginx for Scalable Front-Ends</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Thu, 02 Jul 2020 13:18:39 +0000</pubDate>
      <link>https://dev.to/emtes/demystifying-nginx-for-scalable-front-ends-21cd</link>
      <guid>https://dev.to/emtes/demystifying-nginx-for-scalable-front-ends-21cd</guid>
      <description>&lt;p&gt;Standing at the forefront of our applications, front ends see the highest concurrency and throughput demands, so designing scalable front-ends are crucial to a performant application that intends to grow. Fortunately, tools exist to help us architect a robust front-end layer. Nginx is one of those tools.&lt;/p&gt;

&lt;p&gt;Nginx is a popular piece of software that can play many roles in the architecture and infrastructure of your web application. It enables almost 50% of web servers for the top 1,000 websites around the world (read more &lt;a href="https://w3techs.com/technologies/cross/web_server/ranking"&gt;here&lt;/a&gt;). Should you check out their website you will see claims that it can be a reverse proxy, load balancer, and many other things. To better understand why you might want to use Nginx let’s explore some different roles it can fulfill.&lt;/p&gt;

&lt;h2&gt;
  
  
  Nginx as a Load Balancer
&lt;/h2&gt;

&lt;p&gt;Load balancers are a key player in scaling horizontally. Read more about horizontal scalability in my last blog post &lt;a href="https://dev.to/emtes/how-to-architect-web-applications-that-scale-3fn0"&gt;here&lt;/a&gt;. A load balancer will distribute requests among your servers. It is the service that will first receive your users' request and with the help of different algorithms, it will decide which server in your pool or farm of servers it will send the request to. Load balancers ensure we're making efficient use of all of our horizontal resources.&lt;/p&gt;

&lt;p&gt;Load balancers help your users have a smooth experience through thin and thick. No matter how many servers we have and how beefy they are, they will eventually malfunction or need to be temporarily disabled for maintenance. Similarly, as our application grows we will probably want to add more servers to handle more requests. Load balancers are aware of new servers being available, servers no longer behaving correctly, or servers simply being too busy. With this information, they will send requests to the servers that do work, allowing you to take servers in and out without disrupting service. This ability also makes it possible to roll out new updates without any downtime.&lt;/p&gt;

&lt;h2&gt;
  
  
  Nginx as a Reverse Proxy
&lt;/h2&gt;

&lt;p&gt;A reverse proxy server also intercepts requests from the clients to your servers. Their value comes from their ability to serve as a load balancer, cache content, and provide you with more security. Caching data is another incredible functionality that goes a long way in creating a smoother experience for your users. Data can be cached (stored for later use) in different layers and types of servers. When data is cached in a reverse proxy server, it will be because the data is frequently requested by different clients. We can store frequently requested data to more quickly send a response while at the same time decreasing the load on the server. Lastly, a reverse proxy is also able to provide an extra layer of security as they can limit requests from a particular client that may be trying to intentionally overload your servers with requests.&lt;/p&gt;




&lt;p&gt;Additional Reading:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.nginx.com/resources/glossary/reverse-proxy-vs-load-balancer/"&gt;Reverse Proxy vs. Load Balancer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.nginx.com/resources/glossary/caching/"&gt;Caching&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Thanks for reading! I am open to learning more and answering questions in the comments :)&lt;/p&gt;

&lt;p&gt;Cover photo by &lt;a href="https://www.pexels.com/@negativespace"&gt;Negative Space&lt;/a&gt; from &lt;a href="https://www.pexels.com/photo/gray-laptop-computer-showing-html-codes-in-shallow-focus-photography-160107/"&gt;Pexels&lt;/a&gt;&lt;/p&gt;

</description>
      <category>nginx</category>
      <category>webdev</category>
      <category>frontend</category>
      <category>scalability</category>
    </item>
    <item>
      <title>How to Architect Web Applications That Scale</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Mon, 29 Jun 2020 11:47:44 +0000</pubDate>
      <link>https://dev.to/emtes/how-to-architect-web-applications-that-scale-3fn0</link>
      <guid>https://dev.to/emtes/how-to-architect-web-applications-that-scale-3fn0</guid>
      <description>&lt;h2&gt;
  
  
  What is Scalability?
&lt;/h2&gt;

&lt;p&gt;Scalability is the ability of your web application (or any system!) to grow and shrink to fulfill demand cost-effectively. Properly scaling can allow you to build applications that can handle more data, users, and interactions with your servers without the degradation of your app’s user experience. Don’t think about how fast your server handles any particular task or request, but rather ask yourself: does my application work for 10,000 users as well as it does for 10?&lt;/p&gt;

&lt;p&gt;So, how would I go about making my application scalable?&lt;/p&gt;

&lt;h2&gt;
  
  
  First Approach: Scaling Vertically
&lt;/h2&gt;

&lt;p&gt;The first approach you might consider is making your application more scalable is to give it more hardware resources. Instead of deploying your application for free on Heroku, you instead pay for a server equipped with a powerful processor and a decent amount of memory. When your app’s audience grows you simply upgrade the server by changing the CPU for one with faster clock speeds and adding more RAM. This is known as &lt;strong&gt;scaling vertically&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Scaling vertically is about upgrading your hardware and not changing how your application works. This works great. Your application is not that big and you’re making enough money to afford the hardware upgrades.&lt;/p&gt;

&lt;p&gt;This approach is not without its limitations, however (I mean why else would I list more than one approach, right?). The bottleneck for scalability here is cost and application design. Firstly, getting set up with consumer-grade CPU with 18 cores from Intel for $999, but you need a quote for an enterprise-grade CPU with 28 cores (as early 2020). More cores won’t always solve the problem either, software often has to be designed to take advantage of them and software your application relies on might not be yours or even open-sourced. Eventually, you will reach a limit to the upgrades you can make.&lt;/p&gt;

&lt;h2&gt;
  
  
  Planning Ahead: Horizontal Scalability
&lt;/h2&gt;

&lt;p&gt;Another approach you might consider is adding more servers instead of having one a couple of really powerful servers. Can you avoid hitting a ceiling with this strategy? The answer is yes! As you add servers to the system they don’t need to be all that powerful since the benefit comes from your application’s ability to leverage many of them meaning cost grows more reasonably.&lt;/p&gt;

&lt;p&gt;Horizontal scalability is hard and will probably require your application to change. Think of the individual roles of different services in your application, like the web server, caches, and databases. True &lt;strong&gt;horizontal scalability&lt;/strong&gt; means being able to add more servers to fulfill each role. Pulling this off without major rewrites means thinking a lot about your application as a system of services.&lt;/p&gt;

&lt;p&gt;There are different ways to architect your system but generally, they all encourage you to separate your system into smaller, independent units. A system made of more independent units lets you work to develop and scale them independently as well.&lt;/p&gt;




&lt;p&gt;Thanks for reading! If you’re feeling generous with your knowledge and experience be sure to leave a comment. Feeling curious? Questions are welcomed too!&lt;/p&gt;

&lt;p&gt;If you’re looking to learn more about system design I would highly recommend &lt;em&gt;Web Scalability for Startup Engineers&lt;/em&gt; by Artur Ejsmont. This is also my main source of knowledge for this post.&lt;/p&gt;

&lt;p&gt;Cover Photo by &lt;a href="https://www.pexels.com/@cookiecutter?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels"&gt;panumas nikhomkhai&lt;/a&gt; from &lt;a href="https://www.pexels.com/photo/bandwidth-close-up-computer-connection-1148820/?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels"&gt;Pexels&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>scalability</category>
      <category>systemdesign</category>
      <category>architecture</category>
    </item>
    <item>
      <title>Redux for React Devs</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Mon, 15 Jun 2020 11:00:03 +0000</pubDate>
      <link>https://dev.to/emtes/redux-for-react-devs-39fb</link>
      <guid>https://dev.to/emtes/redux-for-react-devs-39fb</guid>
      <description>&lt;h2&gt;
  
  
  What is Redux
&lt;/h2&gt;

&lt;p&gt;Redux is a library built to help us manage state in all kinds of JavaScript applications. In this blog post we will explore it from the perspective of someone already familiar with using React. Redux encourages us to store state in a single source, or ‘store’ that we change with predetermined actions we set up with reducers. Sounds familiar? It should! React’s context, state, and reducer hooks give us similar functionality. Continue reading to learn more about why you might want to consider Redux nonetheless.&lt;/p&gt;

&lt;h2&gt;
  
  
  Origins and Principles
&lt;/h2&gt;

&lt;p&gt;Redux is based on other technologies like Flux and Immutable.js that are based on the principles of immutable data structures, a single source of truth, and the use of pure functions for state updates.&lt;/p&gt;

&lt;p&gt;Immutable data structures already exist in JS, all of our primitive data types are immutable (numbers, strings, etc.). This means we cannot intrinsically change this value, only replace it with a new one. Complex application data however is often best stored in more flexible structures like an object or array, which are both mutable (can be changed in place).&lt;br&gt;
Having a single source of truth means centralizing where you communicate updates to your data as well as where you get it from. Even trivial applications with different stateful parts can get difficult, imagine the additional struggles when you throw in asynchronicity and the reality that things don’t always work into the mix.&lt;/p&gt;

&lt;p&gt;Pure functions always return the same output for a given input. These functions don’t rely on information other than the input and transform information with other pure methods. Pure functions don’t produce side effects either, meaning they don’t change state outside their own contained scope.&lt;br&gt;
All of these principles contribute to a state that is easier to debug, predictable, and more elegant. How we behave and interact with information stored in this way produces behaviors that can be more easily be reasoned about.&lt;/p&gt;

&lt;h2&gt;
  
  
  Connecting with React
&lt;/h2&gt;

&lt;p&gt;Redux can help us manage state for React applications with the React Redux (RR) library. RR is made officially maintained by the Redux team, who created Redux for use with React. RR also implements optimizations that make it so that only the components that need to rerender do so when it actually needs to. RR is abstracting for us the optimal ways of connecting our components to our store. Here is the link to the &lt;a href="https://react-redux.js.org/introduction/quick-start"&gt;docs&lt;/a&gt;. Instead of rewriting these, I would like to share with you some questions I had and what I learned based on the answers I gathered from quick chats with more senior engineers around me! Thank you, Helen and Erwins!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Should I use &lt;code&gt;useState&lt;/code&gt; if I’m using Redux?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Yes! &lt;code&gt;useState&lt;/code&gt; is a great way to track information that you need to make a component interactive but not necessarily persistent across rerenders or after refreshing the page. For example, using this hook to control a form is the best option, there really is no point to including it in your store since it’s only useful where the form is.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What about &lt;code&gt;useContext&lt;/code&gt; and &lt;code&gt;useReducer&lt;/code&gt;?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These remain great tools and frankly the ones I will be making use of in my personal projects. This is because they are often not super large and a Redux store would be a little overkill. In general, when deciding which of these different features to make use of I learned to try to keep state as close to where it's needed as possible. For me this means I would approach a growing need for more easily shareable/global state incrementally, first just using state and props. Perhaps the next step is designing my components with more intention and having state be ‘up’ so that I can pass more information down.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The React Redux docs cover a pattern of presentational and container components but show examples with using classes, is this still best practice with functional components?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The answer here is yes, maybe, depends! Quick review. Presentational components are primarily concerned with the markdown, how things look. They only receive data through props and are unaware of your larger app’s state. Container components tend to be stateful, are aware of things like Redux, and pass information to presentational components. This can still be a great pattern that helps stay organized, however, hooks make it incredibly easy to connect your store to a component. Be flexible.&lt;/p&gt;




&lt;p&gt;Hey! Thanks a lot for reading! If you would like to help me better understand any of the things you read above feel free to message or email me! I love to be constantly improving and I would really appreciate it.&lt;/p&gt;

</description>
      <category>react</category>
      <category>redux</category>
      <category>webdev</category>
    </item>
    <item>
      <title>So... Linux?</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Mon, 13 Apr 2020 05:53:03 +0000</pubDate>
      <link>https://dev.to/emtes/so-linux-3i9k</link>
      <guid>https://dev.to/emtes/so-linux-3i9k</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Did you know Linux is the most popular operating system in the world? It is! For servers and supercomputers. The millions of server computers hosting the websites we visit are more than likely running a version of Linux. In this post, we'll learn what Linux is and where it comes from, vocabulary, and commands you need to start navigating this exciting platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Linux?
&lt;/h2&gt;

&lt;p&gt;Linux is an operating system, just like Windows or Apple's mac OS. Operating systems are collection of software that manage the different devices and applications in your computer. These bits of software take care of processes like shutting down your computer, booting it up, and giving your programs an interface to interact with devices like your keyboard and mouse.&lt;/p&gt;

&lt;p&gt;Learning to use a Linux system is a great opportunity to get familiar with the &lt;strong&gt;command line&lt;/strong&gt;, the most explicit way to communicate with your machine. Additionally, as you experiment with different projects, you will start to learn about repositories, package management, file permissions, user management, and much more. Package management and repositories are concepts you might already be familiar with if you have any experience using npm and GitHub.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why is Linux so Popular?
&lt;/h2&gt;

&lt;p&gt;Linux distinguishes itself in the world of enterprise computing, big data, and science (think supercomputers!). Why?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Linux is free&lt;/strong&gt;. Free in multiple ways, you don't need to pay to use Linux and you're free to view, edit, and distribute the source code. When you buy a computer with Windows or macOS, the cost of creating and maintaining these operating systems is included in the price.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Linux is flexible&lt;/strong&gt;. Linux is used in a lot of different types of computers. Think smart toasters and refrigerators, other IoT devices, internet routers, Android smartphones, the list goes on and on. You can probably install Linux on your laptop or desktop today and be up and running with little set up! More on this at the end. This flexibility is possible because a Linux operating system is designed to be the sum of many different tools that do one job and do it well. You could piece together a version of Linux that works for &lt;em&gt;your&lt;/em&gt; device and is optimized for &lt;em&gt;your&lt;/em&gt; needs.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The Unix Philosophy
&lt;/h2&gt;

&lt;p&gt;Linux is a 'Unix-like' operating system, meaning much of it is derived from the Unix operating system and generally follows Unix's design principles. An ideal Unix program is simple, modular, and extensible. Unix programs do a few tasks really well and are designed to work well with other programs without depending on too many others. The system is made strong by the collaboration of the programs that compose it, not because the programs themselves are super powerful.&lt;/p&gt;

&lt;p&gt;My favorite thing about Linux is that &lt;strong&gt;everything is a file&lt;/strong&gt; &lt;em&gt;somewhere&lt;/em&gt; in the system. Those commands and programs you run in the terminal? Files. The icons in your desktop that let you quickly open your favorite apps? Files. What about the repositories your system checks for application updates? Written in a file! All of which you can mess around with. The transparency! The power! Its beautiful. Imagine one day set up your own Linux installation with everything you want, and nothing that you don't, while having full autonomy over your system... Pretty cool, right?&lt;/p&gt;

&lt;p&gt;These principles really speak to Linux's flexibility. No wonder it's used in for so many applications!&lt;/p&gt;

&lt;h2&gt;
  
  
  Everything is a File, Here is Where They Live
&lt;/h2&gt;

&lt;p&gt;I want to show you a typical system tree, or file system hierarchy in a Linux installation. Read more about tree-like data structures in my other &lt;a href="https://dev.to/emtes/learning-data-structures-trees-2p5g"&gt;post&lt;/a&gt;! If you're following along in your own Linux system, note that you may have additional or fewer directories. If you want to learn more these directories (folders) in detail, run &lt;code&gt;man hier&lt;/code&gt; in your Linux terminal and read away! Personally, I keep my search engine of choice nearby to look up the many words I don't know the meaning of.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/&lt;/code&gt; this is the root directory (folder), the root of the tree (yes, the data structure 😄)&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/bin&lt;/code&gt; contains binaries, executable programs the system needs to boot&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/boot&lt;/code&gt; contains the kernel and files needed while the machine boots&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/dev&lt;/code&gt; contains &lt;em&gt;device nodes&lt;/em&gt;, instructions/interfaces to use with physical devices connected to machine&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/etc&lt;/code&gt; contains system-wide configuration files (pronounced &lt;em&gt;etsy&lt;/em&gt;). Big software packages like &lt;code&gt;gtk&lt;/code&gt;, &lt;code&gt;python&lt;/code&gt;, and &lt;code&gt;X11&lt;/code&gt; store configuration files here as well.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/home&lt;/code&gt; contains directories for system users (each user's Downloads, Pictures, etc.)&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/lib&lt;/code&gt; contains libraries shared by core programs necessary to boot the machine&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/lost+found&lt;/code&gt; contains data misplaced during a system crash or as a result of drive errors&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/media&lt;/code&gt; contains mount points for media devices like USBs, CDs, and DVDs.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/mnt&lt;/code&gt; is a mount point for a temporary file system (like the one you might use to build your installation)&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/opt&lt;/code&gt; contains additional packages for programs. In my machine, Google Chrome and the Minecraft Launcher keep files here.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/proc&lt;/code&gt; contains files related to the kernel and running processes&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/tmp&lt;/code&gt; contains temporary files that may be created while executing a program&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/usr&lt;/code&gt; contains a secondary, read-only system tree for sharing with some programs or to be mounted on other Linux systems. Many of the directories above exist here containing additional files.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;/var&lt;/code&gt; contains files that vary in size at different times like logs and backups&lt;/p&gt;

&lt;p&gt;If you use Linux frequently, at one point or another you'll find that you need to edit or write files in some odd directory. I hope knowing what these names generally refer to can help you out!&lt;/p&gt;

&lt;h2&gt;
  
  
  Command Line Basics
&lt;/h2&gt;

&lt;p&gt;Earlier I said 'the most explicit way you can communicate with your Linux machine is the command line' and I meant it. Let's learn some basic command line or terminal commands that will allow you to start familiarizing yourself with your system. If you currently develop with a graphical user interface you may find that doing things from the terminal is faster and safer (ish).&lt;/p&gt;

&lt;p&gt;There is a program between you and the terminal called the shell. A shell is a program that interprets text commands and sends them to your operating system to execute. The most common shell program is called &lt;strong&gt;Bash&lt;/strong&gt;, which comes included in most Linux installations. For macOS users, Apple recently switched the shell program to &lt;em&gt;zsh&lt;/em&gt;. macOS is actually a Unix-like operating system as well. You too can change your shell!&lt;/p&gt;

&lt;h3&gt;
  
  
  The Structure of a Terminal Command
&lt;/h3&gt;

&lt;p&gt;I won't share too many commands in this post, its long enough already and learning patterns is more important. Generally, terminal commands follow a very similar and predictable structure:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;program_name [--optional flags] [optional arguments]&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Flags&lt;/em&gt; can come after arguments and are often shortened to just one letter and one dash, e.g. &lt;code&gt;-f&lt;/code&gt;. Flags are options that change the way a program behaves. &lt;code&gt;-h&lt;/code&gt; or &lt;code&gt;--help&lt;/code&gt; are common flags that will tell a program you want to see which flags are available to you.&lt;/p&gt;

&lt;p&gt;Arguments are often files but can be strings and numbers too.&lt;/p&gt;

&lt;p&gt;You can call a program from any directory in your system and you can use a file from any directory in your system as an argument. You can do this because to name a file you can use a relative or absolute path. &lt;strong&gt;Relative paths&lt;/strong&gt; are relative to your current directory, which you can refer to with &lt;code&gt;.&lt;/code&gt;. &lt;strong&gt;Absolute paths&lt;/strong&gt; start at the root of the system &lt;code&gt;/&lt;/code&gt; and name every directory to get to the desired file.&lt;/p&gt;

&lt;h3&gt;
  
  
  Navigation
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;pwd&lt;/code&gt; prints the directory you're currently in (print working directory)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;cd&lt;/code&gt; changes the directory to your specified argument. If you provide no arguments it will by default take you to your user's directory, which you can refer to in paths with &lt;code&gt;~&lt;/code&gt;. &lt;code&gt;.&lt;/code&gt; and &lt;code&gt;..&lt;/code&gt; represent your current and parent directories respectively and are also valid arguments.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;ls&lt;/code&gt; lists the files in the directory you specify as an argument, which by default is &lt;code&gt;.&lt;/code&gt;. The &lt;code&gt;-a&lt;/code&gt; flag comes in handy for seeing hidden files. You can hide files by starting their name with a &lt;code&gt;.&lt;/code&gt;, e.g. &lt;code&gt;.gitignore&lt;/code&gt; to reduce clutter.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; &lt;span class="nt"&gt;-a&lt;/span&gt; ~/Documents
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  File Manipulation
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;mv&lt;/code&gt; moves a file or directory to your specified directory.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mv &lt;/span&gt;fun-letter.text ~/Documents/letters/
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;You can also use &lt;code&gt;mv&lt;/code&gt; to rename files and directories:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mv &lt;/span&gt;fun-letter.txt hilarious-letter.txt
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Like moving it to itself with a new name!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;cp&lt;/code&gt; makes a copy of a file in a specified directory. Use the &lt;code&gt;-r&lt;/code&gt; flag to copy directories, and you can rename files and directories with &lt;code&gt;cp&lt;/code&gt; similarly to how we did it with &lt;code&gt;mv&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;mkdir&lt;/code&gt; makes new directories where the names are your arguments. You can also make directories inside directories that don't exist yet with the &lt;code&gt;-p&lt;/code&gt; flag.&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir&lt;/span&gt; &lt;span class="nt"&gt;-p&lt;/span&gt; code/web-stuff/html notes
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;touch&lt;/code&gt; makes new files where the names are your arguments.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You will soon find yourself wanting to do more complicated things, so read more on these commands and keep a cheat-sheet 😉.&lt;/p&gt;

&lt;h2&gt;
  
  
  Linux for Everyday Use
&lt;/h2&gt;

&lt;p&gt;I won't say 2020 is going to be the year for Linux in the desktop, but I will share that there are many Linux distributions ready to go out of the box and with simple installation methods. If you are attracted to the power of the shell, are concerned about privacy using other operating systems, or you just like hacking around, Linux might be for you. As a developer this is also a great platform because its made with other developers in mind. Distributions, versions of Linux like Ubuntu, Linux Mint, and Fedora can get you up and running quickly. These 'distros' are accompanied by huge communities full of people willing to help. Just remember to back up any important files!&lt;/p&gt;

&lt;p&gt;Thanks for reading! I appreciate any comments and feedback :)&lt;/p&gt;

&lt;p&gt;Cover photo by &lt;a href="https://www.pexels.com/@pixabay?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels"&gt;Pixabay&lt;/a&gt; from &lt;a href="https://www.pexels.com/photo/animal-beaks-bird-cold-209096/?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels"&gt;Pexels&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>linux</category>
      <category>webdev</category>
      <category>computerscience</category>
    </item>
    <item>
      <title>Learning Data Structures: Trees</title>
      <dc:creator>Enmanuel de la Nuez</dc:creator>
      <pubDate>Sat, 11 Apr 2020 21:11:10 +0000</pubDate>
      <link>https://dev.to/emtes/learning-data-structures-trees-2p5g</link>
      <guid>https://dev.to/emtes/learning-data-structures-trees-2p5g</guid>
      <description>&lt;p&gt;In this article we'll explore &lt;em&gt;trees&lt;/em&gt;, a classic computer science data structure. Trees have many applications, used to organize information we interact with daily. Implementing the structure in our language of choice also gives us a chance to learn more about recursion.&lt;/p&gt;

&lt;p&gt;In order to understand trees, we will learn what they are, how they are used, and how to implement them.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are Trees?
&lt;/h2&gt;

&lt;p&gt;The tree data structure is much like a tree in real life, they have roots and leafs. One key difference is that the data structure's root is at the top. Trees have other properties that make it a great way to organize the right body of information:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Trees are &lt;strong&gt;hierarchical&lt;/strong&gt;. More general things are near the top and more specific things are near the bottom. This helps organize data in a way that makes it easy to access it because at any layer we can choose which path to follow. Consider this diagram representing a book:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7t0x2pc6ha4rx2ho31wd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7t0x2pc6ha4rx2ho31wd.png" alt="Diagram of a book organized to be easily recognizable as a tree"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note that the lower cells of this tree are all classified as a &lt;em&gt;book&lt;/em&gt; but depending on how they're connected, they might be part of the first or second chapter. If you needed to quickly access the first sentence of a paragraph in Section 2, Chapter 2 of this book, you intuitively know to follow the path to the right and to ignore anything under Chapter 1.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The children of one node are independent of the children of another node&lt;/strong&gt;. Think about our book again, and imagine you want to delete all of Chapter 2. It sucks and you have to rewrite it 🙄. You can safely do so without affecting Chapter 1.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Each leaf node is unique&lt;/strong&gt;. You can count on every sentence of this book having a unique path from the top of our diagram to itself.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Trees in the Life of a Developer
&lt;/h2&gt;

&lt;p&gt;Trees are a truly ubiquitous data structure. Here are some examples of trees that developers interact with all the time:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The DOM&lt;/strong&gt;: Web devs this one is for you! We write markdown for websites by nesting tags at different levels. In the end, we can visualize it like the book above:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7xvipdj809ht0klrxykw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7xvipdj809ht0klrxykw.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The UNIX file system&lt;/strong&gt;: A lot of devs use a Mac or Linux operating system. These systems belong to the same family of operating systems. The way directories (folders) and files are organized is an example of a tree as well. Big, general directories like &lt;code&gt;etc/&lt;/code&gt; and &lt;code&gt;bin/&lt;/code&gt; are at the top right under the root &lt;code&gt;/&lt;/code&gt; directory. Check it out by opening your terminal and running &lt;code&gt;cd /&lt;/code&gt; followed by &lt;code&gt;ls&lt;/code&gt;. Different parts of the system are categorized at different layers and there is a unique path to every file from root. Very commonly when using tools in the command line, you have to specify the path to a file for your program to use.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  All the Technical Vocabulary
&lt;/h2&gt;

&lt;p&gt;Here are all the words you should get familiar with to talk about trees effectively.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Node&lt;/strong&gt; The smallest unit of a tree where data can be stored. A node has references to its children and a property to store data, commonly called it's "payload".&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Edge&lt;/strong&gt; Edges connect two nodes and represents the relationship between them. Every node except the root has exactly one &lt;em&gt;incoming edge&lt;/em&gt; and any number of &lt;em&gt;outgoing edges&lt;/em&gt;. In other words, every node except the root has one parent and any number of children.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Root&lt;/strong&gt; The root of a tree sits at the top and has no incoming edges. We manipulate trees by first referencing the root.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Path&lt;/strong&gt; A path is the set of nodes connected by edges, in order from one node to one of it's descendants.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Children&lt;/strong&gt; The set of nodes that have incoming edges from the same node &lt;em&gt;p&lt;/em&gt; are children of &lt;em&gt;p&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parent&lt;/strong&gt; A node &lt;em&gt;p&lt;/em&gt; is a parent to all the nodes to which &lt;em&gt;p&lt;/em&gt; is connected to by outgoing edges.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sibling&lt;/strong&gt; Nodes that share the same parent are siblings of one another. They share the origin of their single incoming edge.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Subtree&lt;/strong&gt; A subtree is a set of nodes and edges consisting of a parent node and all its descendants. Internalizing this definition helps think about trees in a recursive way which is key to a lot of algorithm problems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Leaf Node&lt;/strong&gt; A leaf is a node with no children.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Level&lt;/strong&gt; The level of a node is equals to the amount of edges from root to that node.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Height&lt;/strong&gt; The height of a tree is equals to the greatest level of any node in the tree.&lt;/p&gt;

&lt;h2&gt;
  
  
  Defining a Tree
&lt;/h2&gt;

&lt;p&gt;Lets bring all we've explored together to formulate a definition of a tree.&lt;br&gt;
&lt;strong&gt;Nodes and Edges&lt;/strong&gt; A tree is a set of nodes connected by a set of edges and meet these properties:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One node is designated the root node&lt;/li&gt;
&lt;li&gt;Every node &lt;em&gt;n&lt;/em&gt;, except the root node, is connected by an incoming edge from exactly one other node &lt;em&gt;p&lt;/em&gt;, where &lt;em&gt;p&lt;/em&gt; is the parent of &lt;em&gt;n&lt;/em&gt;.&lt;/li&gt;
&lt;li&gt;There is a unique path from the root node to each node&lt;/li&gt;
&lt;li&gt;If each node in the tree has a maximum of two children, the tree is a &lt;strong&gt;binary tree&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Implementing a Tree
&lt;/h2&gt;

&lt;p&gt;A quick way to implement a tree is to define a &lt;code&gt;Node&lt;/code&gt; structure that will allow us to connect it to other instances of itself in the way we knows trees connect. For simplicity, this will be a binary tree.&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;class&lt;/span&gt; &lt;span class="nc"&gt;Node&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&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;payload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;value&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;leftChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&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;rightChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With the code above, we can instantiate some &lt;code&gt;Nodes&lt;/code&gt; and connect them to form a tree.&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;const&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;'&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="nx"&gt;leftChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;B&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;rightChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;C&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The children of &lt;code&gt;a&lt;/code&gt;, for which we didn't assign a variable, can still be accessed and can become parents themselves.&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="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;leftChild&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;leftChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;D&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can also define this data structure recursively, meaning a we use a &lt;code&gt;Node&lt;/code&gt; to define &lt;code&gt;Node&lt;/code&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;class&lt;/span&gt; &lt;span class="nc"&gt;Node&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;leftChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;rightChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;)&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;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;value&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;leftChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;leftChild&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;rightChild&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;rightChild&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;I used the Stones to destroy the Stones.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Thanos&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;And we can use it like so!&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;const&lt;/span&gt; &lt;span class="nx"&gt;numbersTree&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
  &lt;span class="nc"&gt;Node&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="nc"&gt;Node&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="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nc"&gt;Node&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Try and draw this tree!&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Trees are a versatile and prominent data structure. I hope you feel more equipped to talk about trees and that these examples have illustrated some mental models that you will need to know trees closely. The more familiar we get with our data structures, the better we are able to leverage them in real world problems.&lt;/p&gt;

&lt;p&gt;Share thoughts, feedback, and your own implementations of nodes or trees in the comments below! Thanks for reading!&lt;/p&gt;

&lt;p&gt;Cover photo by &lt;a href="https://www.pexels.com/@skitterphoto?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels" rel="noopener noreferrer"&gt;Skitterphoto&lt;/a&gt; from &lt;a href="https://www.pexels.com/photo/landscape-nature-sky-blue-9283/?utm_content=attributionCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=pexels" rel="noopener noreferrer"&gt;Pexels&lt;/a&gt;&lt;/p&gt;

</description>
      <category>computerscience</category>
      <category>fundamentals</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
