<?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: Aaidenplays</title>
    <description>The latest articles on DEV Community by Aaidenplays (@aaidenplays).</description>
    <link>https://dev.to/aaidenplays</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%2F335764%2F5392942d-c4f0-49ae-ae81-7751c9e7cc0e.png</url>
      <title>DEV Community: Aaidenplays</title>
      <link>https://dev.to/aaidenplays</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aaidenplays"/>
    <language>en</language>
    <item>
      <title>Time Complexity. The Low Down</title>
      <dc:creator>Aaidenplays</dc:creator>
      <pubDate>Sat, 26 Sep 2020 00:39:57 +0000</pubDate>
      <link>https://dev.to/aaidenplays/time-complexity-the-low-down-384c</link>
      <guid>https://dev.to/aaidenplays/time-complexity-the-low-down-384c</guid>
      <description>&lt;p&gt;If you have spent any time in a coding community you have probably heard the term Big O and/or time complexity. Not knowing, at least, what these terms mean can instill feelings of imposter syndrome or incompetence. In this article I am going to introduce time complexity and how to calculate the Big O of a function. While these calculations are trivial to some degree, knowing the concept and how it works can be very beneficial. Let’s begin.&lt;/p&gt;

&lt;h1&gt;
  
  
  What is the point?
&lt;/h1&gt;

&lt;p&gt;Time complexity is used to calculate the amount of time it takes a function to complete. Let’s use a simple “sum of all numbers” function as an example. A user passes in a number, starting from 1, we add all numbers until we reach the number passed in. For instance:&lt;br&gt;
&lt;code&gt;addUpTo(5)&lt;/code&gt; &lt;br&gt;
would return&lt;br&gt;
&lt;code&gt;1+2+3+4+5 = 15.&lt;/code&gt;&lt;br&gt;
There are tons of ways we could define this function, however some are faster than others. By calculating the Big O of our function definition we are able to compare the time complexity of two algorithms thus revealing which is faster. &lt;/p&gt;
&lt;h1&gt;
  
  
  What is Big O notation?
&lt;/h1&gt;

&lt;p&gt;Common outcomes for Big O in succession are&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;O(1)&lt;/li&gt;
&lt;li&gt;O(log(n))&lt;/li&gt;
&lt;li&gt;O(n)&lt;/li&gt;
&lt;li&gt;O(nlog(n))&lt;/li&gt;
&lt;li&gt;O(n^2)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oY8RWEte--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fffbvqwh8qtmqhu7p3co.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oY8RWEte--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fffbvqwh8qtmqhu7p3co.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h6&gt;
  
  
  reference: &lt;a href="https://cooervo.github.io/Algorithms-DataStructures-BigONotation/"&gt;https://cooervo.github.io/Algorithms-DataStructures-BigONotation/&lt;/a&gt;
&lt;/h6&gt;

&lt;p&gt;the fastest being O(1) (constant run time) and the longest being O(n^2). In this article we will only be covering &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;O(1) &lt;/li&gt;
&lt;li&gt;O(n) &lt;/li&gt;
&lt;li&gt;O(n^2)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;as they are simpler to grasp. These notations represent the speed at which a function may run as the passed in input is increased. Let's use &lt;code&gt;addUpTo(n)&lt;/code&gt; as an example. As n becomes larger this function may or may not take longer to compute depending on what its &lt;strong&gt;time complexity&lt;/strong&gt; is. If the Big O of our algorithm turns out to be O(n) then the runtime increases as n does in a linear fashion. For instance &lt;code&gt;addUpTo(100000)&lt;/code&gt; will take much longer to run than &lt;code&gt;addUpTo(5)&lt;/code&gt;. However, if our Big O = O(1) then it is considered to be a “constant runtime” which is not affected by the size of n.&lt;/p&gt;
&lt;h1&gt;
  
  
  How do we calculate it?
&lt;/h1&gt;

&lt;p&gt;We can calculate the Big O of an algorithm by counting the number of simple instructions it uses. Let's use these two different algorithms for our addUpTo(n) function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function addUpToLong(n) {
    let total = 0;
    for (let i = 1; i&amp;lt;=n; i++ ) {
        total += i
    }
    return total
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;





&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function addUpToShort(n) {
    return n * (n + 1) / 2
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Both of these algorithms output the same result however, notice I have named one long and one short. That is because the Long function has a longer runtime than Short does. Lets add up all of the simple instructions for the Long function first:&lt;/p&gt;

&lt;p&gt;Initializations, operations, comparisons, and returns are all constant run time so O(1). In this case all of the constant expressions are:&lt;br&gt;
&lt;code&gt;let total = 0&lt;/code&gt;&lt;br&gt;
&lt;code&gt;let i = 1&lt;/code&gt;&lt;br&gt;
&lt;code&gt;return total&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;So currently we have 3 constants which means Big O thus far = O(3)&lt;/p&gt;

&lt;p&gt;Anytime there is a loops that iterates through a list or increments from 0 to n we consider this O(n) runtime. This means that as the number or list gets larger, the time that the algorithm takes to complete increases simultaneously. In this case the runtime is dependent on n. In our example here we have a &lt;code&gt;for&lt;/code&gt; loop so every simple expression that would usually be constant will re-occur n times with the exception of the initial &lt;code&gt;let i = 1&lt;/code&gt; since that only runs once regardless of how many times we loop. All of the O(n) expressions are:&lt;br&gt;
&lt;code&gt;i&amp;lt;=n&lt;/code&gt;&lt;br&gt;
&lt;code&gt;i++&lt;/code&gt;&lt;br&gt;
&lt;code&gt;total += 1&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;&lt;code&gt;i++&lt;/code&gt; and &lt;code&gt;total += 1&lt;/code&gt; both count as two expressions since we are doing two operations at once. An initialization and an increment. The Big O calculations for this algorithm are thus as followed:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--L8HUqSGr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zzrh5cld5a41gj95e551.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--L8HUqSGr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zzrh5cld5a41gj95e551.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  Is it necessary to count instructions?
&lt;/h1&gt;

&lt;p&gt;The simple answer here is no actually and thank goodness for that! How tedious it would be to count all the expressions of our all of our algorithms. The proper way to calculate Big O and time complexity is actually to recognize overall trends rather than specific number of instructions. &lt;/p&gt;

&lt;p&gt;As n reaches infinity small things like constants become unimportant. For instance if we invoke addUpToLong(9999999) that &lt;code&gt;+3&lt;/code&gt; and even the &lt;code&gt;5&lt;/code&gt; in &lt;code&gt;5n&lt;/code&gt; doesn’t really matter as it does not change the overall trend which will still always be linear. Therefore, we can simplify &lt;strong&gt;O(5n+3)&lt;/strong&gt; down to just &lt;strong&gt;O(n)&lt;/strong&gt;. in addUpToShort the &lt;strong&gt;O(3)&lt;/strong&gt; simplifies to &lt;strong&gt;O(1)&lt;/strong&gt; as it will always be constant. Most importantly, this means we do not have to do trivial calculations like I showed in the example. We can simply just recognize how our algorithms are running based off of a simple glance. &lt;/p&gt;

&lt;p&gt;If there is no looping dependent on n then the run time is &lt;strong&gt;O(1)&lt;/strong&gt; if there is a single loop that is dependent on n then runtime is &lt;strong&gt;O(n)&lt;/strong&gt; and if there is a nested loop that is dependent on n then the runtime is &lt;strong&gt;O(n^2)&lt;/strong&gt;. An O(n^2) could look like the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function printAllPairs(n) {
    for(let i = 0; i &amp;lt; n; i++){
        for(let j = 0; j &amp;lt; n; j++){
            console.log(i, j)
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h1&gt;
  
  
  How is this useful?
&lt;/h1&gt;

&lt;p&gt;Being able to quickly identify an algorithm's time complexity can be extremely beneficial if you are working with massive databases. In my examples it may seem trivial. Who cares if a function takes a second to run rather than .25 seconds right? Well what If we are writing an algorithm where n is equal to numbers in the millions coming from a massive database? Those runtimes start to look like minutes and maybe even hours to run. Learning to maximize efficiency in big data projects becomes a life saver in some cases. &lt;/p&gt;

&lt;p&gt;Thank you for reading my blog. I hope these examples proved to be useful and coherent for you! If you would like to pull my repo with these functions and see their runtimes then feel free to clone my repo and run it: &lt;a href="https://github.com/Aaidenplays/data-structures-and-algorithms-2"&gt;https://github.com/Aaidenplays/data-structures-and-algorithms-2&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Setting Up a MongoDB Database</title>
      <dc:creator>Aaidenplays</dc:creator>
      <pubDate>Wed, 16 Sep 2020 20:24:50 +0000</pubDate>
      <link>https://dev.to/aaidenplays/setting-up-a-mongodb-database-3ogj</link>
      <guid>https://dev.to/aaidenplays/setting-up-a-mongodb-database-3ogj</guid>
      <description>&lt;p&gt;Are you new to MongoDB? Perhaps, like me, you came from a SQL based database? I am writing this article to help get you started with MongoDB as it is a little bit different than SQL and the set up can be confusing at first. Let’s dive in!&lt;/p&gt;

&lt;h1&gt;
  
  
  Stack
&lt;/h1&gt;

&lt;p&gt;The stack I will be using for this article is MERN although React won’t be necessary. Lets set up a new project first. First make a new directory to house your project. I called mine &lt;code&gt;mongodb-setup&lt;/code&gt; so:&lt;br&gt;
&lt;code&gt;mkdir mongodb-setup&lt;/code&gt; &lt;/p&gt;

&lt;h1&gt;
  
  
  Setting Up Your Server
&lt;/h1&gt;

&lt;p&gt;Once your directory &lt;code&gt;cd&lt;/code&gt; into it and &lt;br&gt;
&lt;code&gt;npm init&lt;/code&gt;&lt;br&gt;
to integrate Node and any npm libraries. Now lets install the mongoose library &lt;br&gt;
&lt;code&gt;npm install mongoose&lt;/code&gt;&lt;br&gt;
Mongoose is the library we use to control, manipulate, and pass data to and from our MongoDB database. You should see a node_modules directory create in your project. &lt;/p&gt;

&lt;p&gt;Next, we need to create a file that controls all server related tasks. &lt;br&gt;
&lt;code&gt;touch server.js&lt;/code&gt;&lt;br&gt;
Since we are going to use Experess to host our server lets install that as well. &lt;br&gt;
&lt;code&gt;npm install express&lt;/code&gt;&lt;br&gt;
Now lets set up our server. &lt;/p&gt;

&lt;p&gt;At the top of &lt;code&gt;server.js&lt;/code&gt; add &lt;br&gt;
&lt;code&gt;const express = require(’express’)&lt;/code&gt;&lt;br&gt;
underneath that add &lt;br&gt;
&lt;code&gt;const app = express()&lt;/code&gt; &lt;br&gt;
Finally, the last thing we need to do is connect our server. Add &lt;br&gt;
&lt;code&gt;app.listen(8080, () =&amp;gt; { console.log(‘A Node JS API is listening on port 8080’)})&lt;/code&gt; &lt;br&gt;
Now run &lt;code&gt;npm start&lt;/code&gt; if your server was set up properly you should see the message &lt;code&gt;A Node JS API is listening on port 8080&lt;/code&gt; appear in your console which means express was set up correctly. Congrats!&lt;/p&gt;

&lt;h1&gt;
  
  
  Using MongoDB Atlas
&lt;/h1&gt;

&lt;p&gt;In this section we are going to utilize MongoDB atlas to create a cluster that will house all of our data. Head over to &lt;a href="https://www.mongodb.com/cloud/atlas" rel="noopener noreferrer"&gt;https://www.mongodb.com/cloud/atlas&lt;/a&gt;. Make an account&lt;/p&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%2Fxq7wlt5xgh14bd1lzgcj.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%2Fxq7wlt5xgh14bd1lzgcj.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you sign in you will be brought to the cluster selection page. If you are just testing out the database then you probably want to select the free version.&lt;/p&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%2F0k06ykzsocr2r5337kr2.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%2F0k06ykzsocr2r5337kr2.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;From this page you can choose a provider. In this case I am picking AWS, then select a recommended location below. Then click CREATE CLUSTER`&lt;/p&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%2Fvkpxzue8z4vsul7nskng.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%2Fvkpxzue8z4vsul7nskng.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It will take a few minutes to create the cluster. In the meantime, lets setup a .env file in our app. In your app type &lt;br&gt;
&lt;code&gt;npm install dotenv&lt;/code&gt; &lt;br&gt;
in the terminal. Next, &lt;br&gt;
&lt;code&gt;touch .env&lt;/code&gt;&lt;br&gt;
to create the file.  Inside of .env lets get the DBURI set up. Add &lt;br&gt;
&lt;code&gt;MONGO_URI=&lt;/code&gt; &lt;br&gt;
we will be adding something here shortly, but for now let’s leave it at that. &lt;/p&gt;

&lt;p&gt;Now, let’s configure the cluster so that we have access to the database. Head over to Database Access under the Security section on the left. &lt;/p&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%2F88nbfml50nvf0x0fokrb.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%2F88nbfml50nvf0x0fokrb.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We need to add our self as a user in order to grant access to the database. Now, create a username and super-secret password and click Add User.&lt;/p&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%2Fmed72ogakew0rbuul56b.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%2Fmed72ogakew0rbuul56b.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, we need to whitelist your database so that it will accept and grant access to requests. Head to Network Access directly under Database Access&lt;/p&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%2F111008y1kmj0l9cz7ya6.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%2F111008y1kmj0l9cz7ya6.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click ADD IP ADDRESS then, ALLOW ACCESS FROM ANYWHERE. Finally, click Confirm. &lt;/p&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%2Fydh340rg1bu43ph77262.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%2Fydh340rg1bu43ph77262.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, let’s connect our database to our app. Head back to the Cluster tab and select the connect button. This will bring up a modal on which you will select Connect Your Application.&lt;/p&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%2Fxhcnrwr2zwtdp2zux5sn.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%2Fxhcnrwr2zwtdp2zux5sn.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Make sure you copy the connection string provided by clicking the clipboard.&lt;/p&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%2F1z04o5ky7hh2qxmlccgo.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%2F1z04o5ky7hh2qxmlccgo.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Linking App to Database
&lt;/h1&gt;

&lt;p&gt;Now, we can connect the database to our app. Head back over to your app and open the .env file. Lets add the connection string to MONGO_URI. So in my case this is what I’ve got: &lt;/p&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%2Fsbyibl2gb2zdgat1bmdg.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%2Fsbyibl2gb2zdgat1bmdg.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We need to change  to the password we created when we added ourselves as a user. Notice how my code changes:&lt;/p&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%2Fztjodj0z741pvt63fdow.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%2Fztjodj0z741pvt63fdow.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Next, we need to add a few more packages. In server.js add the following:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const mongoose = require(‘mongoose’)&lt;/code&gt;&lt;br&gt;
&lt;code&gt;const dotenv = require(‘dotenv’) &lt;br&gt;
&lt;/code&gt;dotenv.config`&lt;/p&gt;

&lt;p&gt;Remember, mongoose is a library for MongoDB. The dotenv configuration is so that we can use our MONGO_URI constant from the .env file. &lt;/p&gt;

&lt;p&gt;Lastly, We need to add two more blocks of code to finish this connection. Below that exemplifies those final blocks. You can just copy it.&lt;/p&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%2F2it2tcqvyg2ukd9pw4zm.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%2F2it2tcqvyg2ukd9pw4zm.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Our finished product should look like the following:&lt;/p&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%2Forspodzej5o23hk88nhe.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%2Forspodzej5o23hk88nhe.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once that is completed run &lt;code&gt;npm start&lt;/code&gt; you should see the messages “A node JS API is listening” and “DB Connected” in the terminal. If you’ve got that then congratulations you are done.&lt;/p&gt;

&lt;p&gt;You are now able to make requests to your database! If you find yourself getting stuck you can visit my repo here: &lt;a href="https://github.com/Aaidenplays/mongodb-setup" rel="noopener noreferrer"&gt;https://github.com/Aaidenplays/mongodb-setup&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope you found this article helpful! Thank you for reading.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Flatiron School Alum Four Months Later</title>
      <dc:creator>Aaidenplays</dc:creator>
      <pubDate>Sat, 12 Sep 2020 02:46:25 +0000</pubDate>
      <link>https://dev.to/aaidenplays/flatiron-school-alum-four-months-later-4h4j</link>
      <guid>https://dev.to/aaidenplays/flatiron-school-alum-four-months-later-4h4j</guid>
      <description>&lt;p&gt;I would like to preface this blog by saying that before starting Flatiron School I had just graduated college. I am 23 years old and I live with my grandfather. When I graduated from Flatiron I didn’t really have any bills except a car payment. That being said I think the post-graduation “itis” hit pretty hard. I just started my job search after four months. In this blog I am going to write about my experiences since I graduated Flatiron in May 2020. I am going to go over opportunities that have come my way, new skills and technologies I have acquired, and finally how to over the “itis”. ( itis: The drowsy sleepy feeling you get after eating a large meal. Usual meals like big Sunday dinners, Thanksgiving and Christmas meals. - urban dictionary )&lt;/p&gt;

&lt;h1&gt;
  
  
  Post-Grad Itis
&lt;/h1&gt;

&lt;p&gt;Graduating was less than exciting for me. The first week I really felt a lack of purpose. `Twas the first day of the 10,000-mile hike that is Mount Software Engineer Career which feels exhausting. Especially when you just finished a 15-week intense boot camp course. If you don’t get the itis at this point then you have incredible endurance. I tried to set up weekly goals and plan my days ahead but most days I felt like I fell short or didn’t get enough done. I kept in touch with a few friends from my cohort and I was not alone in this feeling. It made me feel better to discover that this is a very normal way to feel at this point. &lt;/p&gt;

&lt;h1&gt;
  
  
  Opportunities
&lt;/h1&gt;

&lt;p&gt;I was very lucky that I was able to find some work almost instantly! After my first week of itis induced lethargy I got a call from someone I went to college with. They had noticed my LinkedIn page lighting up with all I had accomplished at Flatiron and wanted to onboard me for a startup business. It turns out my final project was very similar to what they were already trying to build. I was overjoyed and accepted the position. No technical interview required! Feel free to visit the app at Etudes.co! However, you need to pay to use the app. I actually set up the authorization and authentication for that part B) While I love working for Etudes.co it is very part time so I still didn’t quite land that $70,000/yr job. &lt;/p&gt;

&lt;p&gt;About a month into working with Etudes.co Flatrion School reached out to me with an opportunity to interview with a company called InfoSys. This was another great opportunity, but there was a small catch. InfoSys was looking for Java developers of which I had no experience. I really messed up that opportunity because I didn’t prepare enough for the technical interview. Looking back at it now I should have taken Udemy courses and studied up on Java. Needless to say, I didn’t get the job. Plus, they wanted to relocate me which I really didn’t want. &lt;/p&gt;

&lt;p&gt;After another month of job searching, working on small projects, tidying up my online presence, and contributing to Etudes.co I was given the opportunity to interview with Flatiron to be onboarded as a technical coach (basically a code tutor). This seemed like the perfect gig for me. I have been teaching guitar privately and professionally since I was 15. However, I was not about to make the same mistake I made with InfoSys. I reached out to many current students and offered them free help whenever they needed it. Along the way I even acquired a mentee. After a series of cultural and technical interviews I got the job! I just finished my fourth week working with Flatiron and I am really happy with it. I am feeling much better about myself and the mountain feels much smaller from this high up! &lt;/p&gt;

&lt;p&gt;One last thing in this section to any Flatiron students / potential students / alumni. If you are willing to relocate there is a good chance that your experience with the job hunt will be smoother. There are some companies I contacted that actually offered to train me for free as long as I agreed to work for them for some amount of time afterward. It really seemed like a great opportunity really. If this peaks your interest check out Revature and InfoSys. They are one of the few I am talking about.&lt;/p&gt;

&lt;h1&gt;
  
  
  New Skills and Technologies
&lt;/h1&gt;

&lt;p&gt;I think it is super-duper important to keep learning and developing your skills post-graduation. Flatiron sets up a very strong foundation but even 15 weeks of intensive learning is sometimes not enough to acquire the skills and knowhow to land those high paying jobs. In this section I will talk about what I have done to continue my growth as a developer. &lt;/p&gt;

&lt;p&gt;Flatiron teaches us JavaScript so we can use ReactJS in the front end, but we learned Ruby on Rails for backend development. Etudes uses MERN stack which is MongoDB, Express, React, Nodejs. Luckily it is all written with JavaScript so learning the stack was manageable. I found myself very nervous to speak up when I was confused about something. One of the developers has his master in comp-sci and the other has been a professional developer for a few years now. I was definitely feeling crippled by imposters-syndrome, which is something I had never felt before. Luckily, the team consistently called me out when they knew I was falling behind and offered to let me shadow them and talk through the stack. Now, I feel that I can really work with MERN as a Full-Stack engineer, which adds a big tick to my resume.&lt;/p&gt;

&lt;p&gt;One piece of advice I would like to share is that you should be investing in curriculum if you have the money. You should rarely feel like you have nothing to do. I use Udemy because they constantly have huge sales on their curriculum. I have purchased about 300 hours of video material from them so I always have something to work on. I am currently sharpening my MERN stack skills with a MERN Social Media course. If it wasn’t for Udemy I don’t think I would have been able to keep up with Etudes.co. If you haven’t, go check out Udemy.com. If there isn’t already a sale going on check back daily until they do or look for their free material.&lt;/p&gt;

&lt;h1&gt;
  
  
  How to Overcome the Itis
&lt;/h1&gt;

&lt;p&gt;In this last section I am going to share some helpful advice for dealing with the itis. &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Invest in curriculum: There are lots of places you can go like, Udemy, Treehouse, Humble, Udacity, HumbleBundle, even youtube!&lt;/li&gt;
&lt;li&gt;Never run out of things to do. make long-term, medium-term, and short-term goals for overall brand presence. For a long-term goal, I found this article to be super inspiring: &lt;a href="https://dev.to/codeartistryio/5-react-projects-you-need-in-your-portfolio-1c3b"&gt;https://dev.to/codeartistryio/5-react-projects-you-need-in-your-portfolio-1c3b&lt;/a&gt;
A medium-term goal for me is to finish this MERN stack social media project within the next month! My short-term goals are weekly outreaches, GitHub commits, and 1 blog/vlog post a week. &lt;/li&gt;
&lt;li&gt;Plan out your next day before going to bed. I find that Google Calendar is perfect for this. Before I go to bed I map out what I want to get done the next day. Doing this on a calendar really helps me understand how much I can actually get done in a day. &lt;/li&gt;
&lt;li&gt;Reward yourself often. Having a healthy work-life balance is so important. Never forget the things you enjoy doing aside from programming. Learning is a painful and frustrating process, so keeping a balanced mind will help ensure that you are refreshed, primed, and ready to tackle new technologies and projects. &lt;/li&gt;
&lt;li&gt;Forgive yourself. This is my last and perhaps the most important tip. If you fall short some days/weeks and become victim to the itis try to be easy on yourself. If you approach these situations with grief and stress then you are cultivating a negative relationship with programming. If I ever feel like I am being lazy and not putting enough time into programming I try not to dwell in feelings of incompetence and self-pity. I plan. Perhaps I will invest in a different Udemy course and start fresh with a new technology. The important take away is to be kind to yourself. &lt;/li&gt;
&lt;/ol&gt;

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

&lt;p&gt;If you made it this far, thank you so much for checking out this article. Even though it is more of a chance to wrap my last four months in a neat bow of closure, perhaps it will provide as inspirational to someone else. &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Serializers Quick and Easy</title>
      <dc:creator>Aaidenplays</dc:creator>
      <pubDate>Sun, 03 May 2020 19:05:06 +0000</pubDate>
      <link>https://dev.to/aaidenplays/serializers-quick-and-easy-12p8</link>
      <guid>https://dev.to/aaidenplays/serializers-quick-and-easy-12p8</guid>
      <description>&lt;p&gt;In a recent project I utilized a backend api that had 11 models each having some sort of association with each other. Most of these associations were nested so while they were not directly associated they still should have some sort of relation to that object. I noticed midway through development that I was making lots of requests to my back end and running tons of sorts which made my code super busy and convoluted. Needless to say, it was not fun to code. I reached out to my Flatiron community where I was guided to this great tool called a serializer. Once I learned how to implement them in my project it soon became my most powerful tool!&lt;/p&gt;

&lt;p&gt;In this blog I am going to run through the basics of setting up a rails project and implementing the serializer. For this example I am not using the –api flag but it should work for that as well. I will also include how I make my basic rails app behave like a backend api should. Here we go!&lt;/p&gt;

&lt;p&gt;First create a rails app:&lt;br&gt;
&lt;code&gt;rails new serializer-test&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Now lets setup the gemfile so our rails app behaves like an api. In your Gemfile.rb add this:&lt;br&gt;
&lt;code&gt;gem 'jbuilder', '~&amp;gt; 2.7'&lt;/code&gt;&lt;br&gt;
While we are here add this gem for serializers:&lt;br&gt;
&lt;code&gt;gem 'active_model_serializers'&lt;/code&gt;&lt;br&gt;
run:&lt;br&gt;
&lt;code&gt;bundle&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Now open up the project. For this example I am going to use the popular tv show “The Office” and build the project to model Dunder Mifflin and it’s employees. I had three models: Corporation, Department, and Employee. For the sake of brevity I will not go into generating routes and database tables but that is of course the next step.&lt;br&gt;
Here are the model relationships along with a visual to aid: &lt;br&gt;
        Corporation -   has_many :departments&lt;br&gt;
            has_many :employees, through: :departments&lt;br&gt;
    Department –  belongs_to :corporation&lt;br&gt;
has_many :employees&lt;br&gt;
    Employee –    belongs_to :departments&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7wFepNYD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fnyb9isgchrcgz6oez5c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7wFepNYD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fnyb9isgchrcgz6oez5c.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
So the purpose of this blog is to be able to make just a single request to corporations which will return its departments and all of its employees. Like this: &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oHTLr-F1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/vh90xyo11dh2kvoopa3d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oHTLr-F1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/vh90xyo11dh2kvoopa3d.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, I have seeded some data in here so that we have something to work with. Here it is for the sake of transparency: &lt;br&gt;
&lt;code&gt;Corporation.create(name: 'Dunder Mifflin')&lt;br&gt;
Department.create(name: 'HR', corporation_id: Corporation.first.id)&lt;br&gt;
Department.create(name: 'Sales', corporation_id: Corporation.first.id)&lt;br&gt;
Department.create(name: 'Accounting', corporation_id: Corporation.first.id)&lt;br&gt;
Employee.create(name: 'Jeff', department_id: Department.all[1].id)&lt;br&gt;
Employee.create(name: 'Dwight', department_id: Department.all[1].id)&lt;br&gt;
Employee.create(name: 'Phyllis', department_id: Department.all[1].id)&lt;br&gt;
Employee.create(name: 'Oscar', department_id: Department.all[2].id)&lt;br&gt;
Employee.create(name: 'Kevin', department_id: Department.all[2].id)&lt;br&gt;
Employee.create(name: 'Angela', department_id: Department.all[2].id)&lt;br&gt;
Employee.create(name: 'Toby', department_id: Department.all[0].id)&lt;br&gt;
Employee.create(name: 'Holly', department_id: Department.all[0].id)&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Now run your server&lt;br&gt;
&lt;code&gt;rails s -p 3002&lt;/code&gt; (you can use what ever port number you want or just use the default)&lt;/p&gt;

&lt;p&gt;Open up your browser and head over to your api. Here are mine: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zKvKswQf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/dd4bnw9x0du5nulnqea4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zKvKswQf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/dd4bnw9x0du5nulnqea4.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UMCoFmcv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/viio7r2dvz652txz37l7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UMCoFmcv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/viio7r2dvz652txz37l7.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TcQCGZ3V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/alnhrqe3p63zxphe96ts.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TcQCGZ3V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/alnhrqe3p63zxphe96ts.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As of now we would have to make three separate requests in order to access all of this info, but we want to narrow that down to just one. Now we can add include statements in our controller and get a similar effect but that gets messy. Serializers are much neater, easier to use, and easier to read. Now we will begin implementing the serializers.&lt;br&gt;
To create a serializer you can use rails generator. Run:&lt;br&gt;
&lt;code&gt;rails g serializer your-model-name&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Make sure that when you run the generator command that the name matches your model name. By doing this you will implicitly call the serializer from the controller. &lt;/p&gt;

&lt;p&gt;Once you have created your serializer revisit your api. If the serializer name matches the model name you should get back something like this: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--y9kKQgCD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7b6fqwnk4z8375k3e1xs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--y9kKQgCD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7b6fqwnk4z8375k3e1xs.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Woah what happened to all of my data?! Panic mode! Don’t worry the serializer by default only displays the Id for every instance. We simply have to go write in the other attributes and models we want to include. Lets go! If your api doesn’t look like this scroll back through my blog and tinker until it does. Don’t move on until you’ve gotten this far.&lt;/p&gt;

&lt;p&gt;Now lets add some attributes to these serializers. Head to your serializers folder following the path: app/serializers/serializer-name&lt;br&gt;
Open it up and you should see this: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QoNkKlgN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/o2ap4mw01e1gsbyf7be4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QoNkKlgN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/o2ap4mw01e1gsbyf7be4.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Add the attributes you want to see. For me it looks like this:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--atBPp8Tu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/h7p9unvergplw1kysxsl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--atBPp8Tu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/h7p9unvergplw1kysxsl.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now if I head to the url again I see my new data! You might need to restart your server.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DwX000Ee--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/g9tikoi930i7zsifp8t0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DwX000Ee--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/g9tikoi930i7zsifp8t0.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
There they are! Let’s open it all up&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--RlD_XmkF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5y2nlx61sc1w1qqdffin.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RlD_XmkF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5y2nlx61sc1w1qqdffin.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There it all is! I can now access all of a corporation’s employees without having to make a ton a fetch requests and run filters and sorts. Now let’s go just one step further. Let’s say you want a department’s employees. Well in this case you would have to run a filter to match the department ids with the employee ids and we are trying to eliminate all that unnecessary logic. We need to turn one of those actions into a function and define specifically what we want to include. Like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--H7qaMQeO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lpx95k0k4vq835z6rugq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--H7qaMQeO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lpx95k0k4vq835z6rugq.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now if we visit the api again we see it all there:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sJe6c9vF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/8vx8ujsns1kehhq6pp8u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sJe6c9vF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/8vx8ujsns1kehhq6pp8u.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That’s it! Now, all we have to do on our front end is make a single request to corporations and we have access to all of the data that is associated with that model. Serializers a very powerful tool and I hope this blog has helped you understand what they are and how they are used. Comment if you have any questions or notice that I left something out. Thank you for reading.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Implementing Bootstrap in Your React App</title>
      <dc:creator>Aaidenplays</dc:creator>
      <pubDate>Sat, 02 May 2020 23:31:03 +0000</pubDate>
      <link>https://dev.to/aaidenplays/implementing-bootstrap-in-your-react-app-19la</link>
      <guid>https://dev.to/aaidenplays/implementing-bootstrap-in-your-react-app-19la</guid>
      <description>&lt;p&gt;Bootstrap is a wonderful and easy to use styling tool. Major companies like the NBA, Walmart, and Target utilize bootstrap to style their websites. In this blog I will be covering the basic setup for bootstrap as well as provide an example of implementing a bootstrap component. &lt;/p&gt;

&lt;p&gt;I am using the React-Bootstrap forum to guide my setup so if you would like another resource visit: &lt;a href="https://react-bootstrap.github.io/getting-started/introduction"&gt;https://react-bootstrap.github.io/getting-started/introduction&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First install react-bootstrap with npm: &lt;br&gt;
&lt;code&gt;npm install react-bootstrap bootstrap&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Next we need to link bootstrap in your react app’s index.html file so that bootstrap will launch. Locate your index.html file and paste this code into the last line of the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; tag:&lt;br&gt;
&lt;code&gt;&amp;lt;link&lt;br&gt;
  rel="stylesheet"&lt;br&gt;
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"&lt;br&gt;
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"&lt;br&gt;
  crossorigin="anonymous"&lt;br&gt;
/&amp;gt;&lt;/code&gt;&lt;br&gt;
Your index.html should look something like this(lines 9-14):&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--RD_RN2Q1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/nllan3lmsi3wadot27hb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RD_RN2Q1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/nllan3lmsi3wadot27hb.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Notice its just before &lt;code&gt;&amp;lt;/head&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;That’s all for set up. Wasn’t that easy! Now lets implement a component. There are quite a few so if you want to check them out visit: &lt;a href="https://react-bootstrap.github.io/components/alerts/"&gt;https://react-bootstrap.github.io/components/alerts/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For this example, let’s use the form component since it utilizes a few components. visit: &lt;a href="https://react-bootstrap.github.io/components/forms/"&gt;https://react-bootstrap.github.io/components/forms/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The layout of the react forum lists many examples of that specific component you can use and has the “source code” underneath it. Find any example that speaks to you. For me it’s this one:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Q0cjGoY_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/o4jznixka95sx0d589ls.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Q0cjGoY_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/o4jznixka95sx0d589ls.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now copy and paste that source code right into your project like this: &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dYS26FX9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/sqlo43w1al4n7rq365u0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dYS26FX9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/sqlo43w1al4n7rq365u0.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The last thing you need to do is import the components. Very important or it won’t work. Go through the Source code and look for all the different components you see. Those would be the tags with a capitalized first word. The yellow text in the above example. In this case there are Form components and children of form components, but there is also a Button component at the bottom of the form. Import those components like this: &lt;br&gt;
&lt;code&gt;import Button from 'react-bootstrap/Button'&lt;br&gt;
import Form from 'react-bootstrap/Form'&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ace1oNGr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/62elprabduicmk6b6w2k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ace1oNGr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/62elprabduicmk6b6w2k.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;notice you just put the component after the import keyword and at the end of the file path. Also notice that simply by importing Form we have imported all of Form’s child components like Text, Group, and Label. Cmd+s and visit your page and you should see the styled component there! Here is mine:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--auqZlFEl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/aybe4ydojat3011y40x8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--auqZlFEl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/aybe4ydojat3011y40x8.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope this blog is helpful to anyone confused about implementing Bootstrap. Comment if you are still having a hard time with it or if I left something out. Thank you for reading! &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Friend requests made simple using javascript and a rails api</title>
      <dc:creator>Aaidenplays</dc:creator>
      <pubDate>Sat, 04 Apr 2020 22:46:18 +0000</pubDate>
      <link>https://dev.to/aaidenplays/friend-requests-made-simple-using-javascript-and-a-rails-api-184h</link>
      <guid>https://dev.to/aaidenplays/friend-requests-made-simple-using-javascript-and-a-rails-api-184h</guid>
      <description>&lt;p&gt;Loads of modern apps employ some sort of friends list feature. The ability to create relationships among users has become a common-place practice that brings people together via technology. In this blog I am going to share what I believe is the simplest way to implement associations amongst users via friend requests and a friends list. &lt;/p&gt;

&lt;p&gt;As a student of Flatiron’s software engineering course, we are challenged with completing five projects during our 15 week program. Both my second and third projects implemented a friend’s list feature. I did a good deal of research on how to implement friends lists. Ultimately my group members and I were able to come up with a method that I believe to be the easiest to understand as well as code. I am using a rails api for my backend and vanilla javascript for my front.&lt;/p&gt;

&lt;p&gt;This method uses two models: users and friends list.&lt;br&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XNObuInY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/n17swz791jcvjxkjncc2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XNObuInY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/n17swz791jcvjxkjncc2.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Seen above is a diagram to help you visualize this relationship. The User class has two subclasses called as_receiver and as_requestor which act like separate models themselves. FriendRequest acts a join table between our two User subclasses. &lt;/p&gt;

&lt;p&gt;Inside of these models we can create their associations using these keywords: &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Z4wgc0cx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3td3xi8qzeiro7ut5x8w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Z4wgc0cx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3td3xi8qzeiro7ut5x8w.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
As you can see there is only one User model, but when we define a relationship in this manner we get two subclasses associated between FriendRequest and User.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0-2dbvFw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/u5p5tl9vw3uwd92ettcl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0-2dbvFw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/u5p5tl9vw3uwd92ettcl.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once these relationships are created we have to add their IDs into the migration files:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Y_mFz_Bf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/f0f22ru2p4i0krjnw8sr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y_mFz_Bf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/f0f22ru2p4i0krjnw8sr.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Notice I didn’t add anything special into my CreateUsers table&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--D4XCUucE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/u4tocle5xtnumb4w46g6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--D4XCUucE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/u4tocle5xtnumb4w46g6.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
CreateFriendRequests is where the magic happens. We now have two User ID’s being associated through this table. The user that initiates the friendship is stored into the requestor_id slot while the receiver of that friend request is stored into receiver_id. Status will have one of two possibilities: “pending” and “accepted”. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jnClytzU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/nikkhs0i8rvf33dzf2dp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jnClytzU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/nikkhs0i8rvf33dzf2dp.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
This would be the logic behind an add friend button. A post request is made to create an instance of FriendRequest which associates the current user as_requestor with another user as_receiver. &lt;br&gt;
After that is done it doesn’t take much to show pending requests. Iterating through all FriendRequests(request=each iteration):&lt;br&gt;
          &lt;code&gt;else if ((request.requestor.id == u1.id || request.receiver.id == u1.id) &amp;amp;&amp;amp; request.status == 'pending'){&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Accepting the request simply makes a patch request to our rails backend to change the status of the request to “accepted”&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xsmGeJ0m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2s5nh9gcx7oql3tmstj3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xsmGeJ0m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2s5nh9gcx7oql3tmstj3.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Declining the request is even simpler as it just destroys that friend request altogether:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UPiyHEXp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wgqnv5x7c1ave2vmsabl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UPiyHEXp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wgqnv5x7c1ave2vmsabl.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Once the request is accepted its as easy to show as it was to show pending requests.&lt;br&gt;
&lt;code&gt;if ((request.requestor.id == u1.id || request.receiver.id == u1.id) &amp;amp;&amp;amp; request.status == 'accepted'){&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;I hope this blog is useful for anyone who is looking to implement a friends feature in their program! &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Converting Operators From Strings Back Into a Symbol To Be Used In a Calculation</title>
      <dc:creator>Aaidenplays</dc:creator>
      <pubDate>Sat, 07 Mar 2020 23:24:45 +0000</pubDate>
      <link>https://dev.to/aaidenplays/converting-operators-from-strings-back-into-a-symbol-to-be-used-in-a-calculation-5bn3</link>
      <guid>https://dev.to/aaidenplays/converting-operators-from-strings-back-into-a-symbol-to-be-used-in-a-calculation-5bn3</guid>
      <description>&lt;p&gt;\/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ &lt;br&gt;
If you are just here for the solution then scroll to the bottom &lt;br&gt;
\/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/&lt;br&gt;
These past few weeks at Flatiron School my cohort has been learning about restful routes. Before moving to Rails developing we started with Sinatra to get an idea of what was happening behind the scenes of Rails magic. While completing one of the labs I found myself deep in a rabbit hole of Ruby incompatibility with Sinatra routes. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LpmNzA70--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3eio7q2js5oq6tt4rizn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LpmNzA70--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3eio7q2js5oq6tt4rizn.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Displayed above is the final tests that I had to pass in order to complete the lab. The user should be able to type something like “localhost:9393/+/5/4”. The page will then display the result of ‘9’. The route is simply: get '/:operation/:number1/:number2'. Now, I thought this should be super easy to write logic for! Just “(:number1 + :operation + :number2)”. Then I got this error:&lt;br&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9UO6uk76--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/b8uazky58nbrrf4vgjuo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9UO6uk76--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/b8uazky58nbrrf4vgjuo.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
This really had me stumped for some time. I knew that a case statement would have been the most obvious way of coding this but I just knew that my was would work. So, after fiddling around with this for a few hours I resorted to the solution to see if I was at least on the right path. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WFzUzEgX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zewpyubfct9nite4kzjj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WFzUzEgX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zewpyubfct9nite4kzjj.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Sure enough the solution was using this case statement but I was still unsatisfied because I really believe my method would work. This looks too messy and bulky for what it is actually doing, which is just a very simple calculation. I also assumed that the user would pass operations not string values. &lt;/p&gt;

&lt;p&gt;After some fiddling on my own I discovered that these routes were being passed as strings. So, rather than getting a + operator I was getting a “+” as a string. Typically when this happens we could just use .to_s or .to_i, but there is no .to_symbol method. Ill save the blood, sweat, and tears it took me to figure it out but eventually this I what I was able to come up with. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QxJcqDMF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0xk3n8ahumonpdwxdsw2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QxJcqDMF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0xk3n8ahumonpdwxdsw2.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
Isn’t it beautiful? It is a little hard to read though so here it is spread out. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--G7gSChPJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7m5zmqnsdw5drlihstu3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--G7gSChPJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7m5zmqnsdw5drlihstu3.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
So finally, here is the SOLUTION. First, the operation string needs to be stored into a hash as a key. Now, if we called @op in this case we would get back :+.  It is now a symbol again hooray! After that is accomplished we are able to utilize the wonderful .send method which allows us to use different datatypes together without getting a TypeError. Finally, the result just needs to be converted back into a string so that it prints on the browser. &lt;/p&gt;

&lt;p&gt;In conclusion this was a lot of work and brain power that went into something that is probably pretty case-specific or even somewhat trivial. Though I hope that this post aids in another devs conquest to convert a “+” as a string back into a symbol. One more time let's compare the solution with my code.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5ycFFrm0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7ku799y5t9hw1wmpkib0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5ycFFrm0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/7ku799y5t9hw1wmpkib0.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HF7EpcS2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zsd9hf5eanjf41v1v78m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HF7EpcS2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/zsd9hf5eanjf41v1v78m.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
The solution took 15 lines to do what my code did in just two. Therefore, I think it's safe to say that my method is a little bit more efficient. More than anything it was very satisfying finding this little logic detour to arrive at the same desired destination. &lt;/p&gt;

&lt;p&gt;Thank you for reading!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Using Join-Tables with Active Record in Ruby</title>
      <dc:creator>Aaidenplays</dc:creator>
      <pubDate>Fri, 14 Feb 2020 19:05:08 +0000</pubDate>
      <link>https://dev.to/aaidenplays/using-join-tables-with-active-record-in-ruby-28a9</link>
      <guid>https://dev.to/aaidenplays/using-join-tables-with-active-record-in-ruby-28a9</guid>
      <description>&lt;p&gt;Being introduced to Complex object-oriented programming languages was a pinnacle moment in my coding development. Coming from a background that mostly developed in C, OOP and Active Record’s framework made starting and planning projects feel less intimidating and overbearing. The combination of OOP and Active record allowed me the ease of organizing my ideas into neat tables that modeled real life scenarios. Active records join-table functionality is crucial to representing and accessing data between objects that are associated with one another.&lt;/p&gt;

&lt;p&gt;RELATIONSHIPS AND KEYWORDS-&lt;br&gt;
Objects in Ruby might exist as separate .rb files in a directory and those files are seemingly independent of one-another. In fact they are independent of each-other initially. Through Active record key-words we can create an association between various different objects to reflect how they will interact post-production! For example, in my Spotify-esque application I have playlists and users. Step away from code and think about the relationship of those two objects in Spotify. A user can have created many playlists, but a playlist can only belong to one user initially (not including shared playlists). However, a playlist has many songs but a song belongs to many playlists. Through active keywords like like “has many”, “belongs to”, and, “has many through,” a developer has the ability to represent these relationships clearly. Below is a visual representation of these objects and their relationship. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--D5dAs38Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/yyk2wn8xk8e3xu064gib.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--D5dAs38Z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/yyk2wn8xk8e3xu064gib.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see there are two tables between "Song-Playlist" and "Song-Artist." These are examples of join-tables. Lets dive into the code itself to find how this is represented!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lVu21Tsx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ekcianag7lqohs57oxb4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lVu21Tsx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ekcianag7lqohs57oxb4.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Active Record utilizes join-tables to create associations. By storing one object id within the table of another object a relationship created. Migration files are created to represent these relationships. In this example we have created a table, in our migration directory, that stores playlists and songs. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tWH3-vrQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/201je054a33xejo4qyqu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tWH3-vrQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/201je054a33xejo4qyqu.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the model for the PlaylistsSongs join table. Hopefully these keywords are screaming some sort of relationship to you. If you scroll between this model and the diagram you'll quickly realize just how intuitive creating these associations become. I find it easier to understand "belongs_to" if I think of cattle branding. When a cow "belongs to" a cattle rancher that cow is branded with the ranchers symbol. Think of that brand as cattle_rancher_id and each cow has a brand. The same goes for songs and playlists. Here are their models: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TyMRK162--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/8y5tp8f6eshrke2cennr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TyMRK162--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/8y5tp8f6eshrke2cennr.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xkuLVe5q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5pxom7znxok5r1p4whwv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xkuLVe5q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5pxom7znxok5r1p4whwv.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you refer back to line 2 of song.rb and line 6 of playlist.rb you will notice a complex keyword that at first glance is intimidating. Don't worry! This is a key word just like "belongs_to" or "has_many" but "has_and_belongs_to_many" just represents the many-to-many relationship between song and playlist. Using my cattle rancher metaphor, each cow has many brands from different rancher and each rancher has many cows that they share with other ranchers. In this case each song has multiple playlist brands and each playlist has multiple song brands.&lt;/p&gt;

&lt;p&gt;Now that we have the relationships set up lets refer back to our join table:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--lVu21Tsx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ekcianag7lqohs57oxb4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lVu21Tsx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ekcianag7lqohs57oxb4.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the quintessential step in relating these two objects. Now whenever we want a list of all songs in a playlist we can simply write code that is along these line:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9IS-B1bC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/x5ohyqd271b892i5nmhy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9IS-B1bC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/x5ohyqd271b892i5nmhy.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This returns an array of song_ids that are associated with that playlist! It is important to note though that the objects themselves aren’t actually being stored, rather a reference to those objects through an integer data type called an id. &lt;/p&gt;

&lt;p&gt;Now you should have a better grasp on Active Record and just how intuitive it is to organize relationships amongst different class objects in OOP languages. By using keywords and tables we can take seemingly independent .rb files and make them interact with one-another. What a wonderful gem!&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
