<?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>Forem: kjfossman</title>
    <description>The latest articles on Forem by kjfossman (@kjfossman).</description>
    <link>https://forem.com/kjfossman</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%2F575891%2F2e3cb1ac-cb5e-49ba-b0e5-a87ae0c466e5.jpg</url>
      <title>Forem: kjfossman</title>
      <link>https://forem.com/kjfossman</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/kjfossman"/>
    <language>en</language>
    <item>
      <title>Setting Up MongoDB Atlas</title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Sat, 18 Sep 2021 17:08:49 +0000</pubDate>
      <link>https://forem.com/kjfossman/setting-up-atlas-for-mongodb-1hln</link>
      <guid>https://forem.com/kjfossman/setting-up-atlas-for-mongodb-1hln</guid>
      <description>&lt;p&gt;Are you interested in creating an application that uses MongoDB? This is blog is going to give a step by step guide on how to set up your MongoDB cloud using Atlas.&lt;/p&gt;

&lt;p&gt;If you have never used MongoDB before there can be a ton of thoughts going through your head. Thoughts such as, how can I input data? how do I link to to my application? what is the structure of the DB? how to create useful data etc...&lt;/p&gt;

&lt;p&gt;Instead of diving into the structure of MongoDB right away lets just get our cloud DB set up so that when you are working through the other aspects you have something to refer to. Atlas gives you the ability to see your data from an easier to read perspective rather than trying to learn everything solely from the command line.  &lt;/p&gt;

&lt;p&gt;The first step is to go to:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.mongodb.com/cloud" rel="noopener noreferrer"&gt;https://www.mongodb.com/cloud&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Set up an account, I am not going to go into much detail about this. Just follow the link to sign up and fill in the input fields as needed.  &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%2Fuploads%2Farticles%2Fkwokj012ua8hq2shez6w.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%2Fuploads%2Farticles%2Fkwokj012ua8hq2shez6w.png" alt="Screen Shot 2021-09-18 at 7.04.42 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you have set up your account you will be taken to your home page. This is where you will create your first project and first cluster. &lt;/p&gt;

&lt;p&gt;Make sure that Atlas is selected and then from the drop down menu in the top left select new project. &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%2Fuploads%2Farticles%2Fwoudpnv7kzfsbpaqah8a.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%2Fuploads%2Farticles%2Fwoudpnv7kzfsbpaqah8a.png" alt="Screen Shot 2021-09-18 at 7.14.56 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Name it whatever you would like and click next. Here you can add members to also view the DB but let's not worry about that for now. Click create project. &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%2Fuploads%2Farticles%2Fvicwauyvzocux5s1cyr9.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%2Fuploads%2Farticles%2Fvicwauyvzocux5s1cyr9.png" alt="Screen Shot 2021-09-18 at 7.36.30 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You should be in your project you just created. Now we can set up the DB. Click on the "Build a Database" button.&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%2Fuploads%2Farticles%2Fcvatot4js5nz4p2tlnyd.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%2Fuploads%2Farticles%2Fcvatot4js5nz4p2tlnyd.png" alt="Screen Shot 2021-09-18 at 7.38.29 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Select the Shared option and click create. This way we can build a free DB. &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%2Fuploads%2Farticles%2F1nuw275r65ahrkcdgwd0.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%2Fuploads%2Farticles%2F1nuw275r65ahrkcdgwd0.png" alt="Screen Shot 2021-09-18 at 7.39.40 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Leave the shared free option selected. I used the AWS version so I would recommend leaving that as is also. &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%2Fuploads%2Farticles%2Fz97kd4ngpnhl8s1ljcrv.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%2Fuploads%2Farticles%2Fz97kd4ngpnhl8s1ljcrv.png" alt="Screen Shot 2021-09-18 at 7.41.12 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can select any region you need to, just make sure that it supports 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%2Fuploads%2Farticles%2Ffyzyv9806vclzpf9neam.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%2Fuploads%2Farticles%2Ffyzyv9806vclzpf9neam.png" alt="Screen Shot 2021-09-18 at 7.41.28 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lastly you can click around and check out the different settings you can choose as well as naming your cluster. Once you have done that click on "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%2Fuploads%2Farticles%2Fnrnu6ljowm2bhok9abnw.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%2Fuploads%2Farticles%2Fnrnu6ljowm2bhok9abnw.png" alt="Screen Shot 2021-09-18 at 7.41.55 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once you have hit the "Create Cluster" button it will take a few minutes to build it for you. Once it is finished you will see this screen. &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%2Fuploads%2Farticles%2F1t6w9a379ytb53i5hkni.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%2Fuploads%2Farticles%2F1t6w9a379ytb53i5hkni.png" alt="Screen Shot 2021-09-18 at 7.48.17 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click on the name of your cluster to access it. Select the collections tab and then let's add some data. Click Add my own data.  &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%2Fuploads%2Farticles%2Fgwr6f0pmov5hwxqaays7.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%2Fuploads%2Farticles%2Fgwr6f0pmov5hwxqaays7.png" alt="Screen Shot 2021-09-18 at 7.50.25 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you create your first database with Atlas you may run into naming errors. You can read the whole list of naming rules but the main one is to make sure the DB ends with the letters "db". If you don't do that it will tell you that your name is not allowed. &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%2Fuploads%2Farticles%2Fgot02q2dembm7eo4shqv.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%2Fuploads%2Farticles%2Fgot02q2dembm7eo4shqv.png" alt="Screen Shot 2021-09-18 at 7.56.58 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This takes you to your database and now you can insert a document to your collection. documents are very similar to the structure of JavaScript objects. For now we are going to do an extremely simple example, and you can experiment with it on your own to get more complex data. Click insert document. &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%2Fuploads%2Farticles%2Faqd65o4woxgh7j5hskw6.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%2Fuploads%2Farticles%2Faqd65o4woxgh7j5hskw6.png" alt="Screen Shot 2021-09-18 at 8.05.00 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When inserting a new document they will auto generate a unique id field. After that it is up to you how to structure the data. I am just going to do two keys and values. &lt;br&gt;
month: "October"&lt;br&gt;
name: "Halloween"&lt;br&gt;
You can choose any holiday you want to do, or make a whole list of collection of them.  &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%2Fuploads%2Farticles%2Fgp3tpwubpp3ao4x4wumj.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%2Fuploads%2Farticles%2Fgp3tpwubpp3ao4x4wumj.png" alt="Screen Shot 2021-09-18 at 8.08.02 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Click insert and you will see your updated collection.  &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%2Fuploads%2Farticles%2Fc6onz040myw0fhzpgskq.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%2Fuploads%2Farticles%2Fc6onz040myw0fhzpgskq.png" alt="Screen Shot 2021-09-18 at 8.14.14 AM"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope that this helps you understand how to set up an Atlas account for your MongoDB and how to insert data. &lt;/p&gt;

&lt;p&gt;If you enjoyed this let me know and I will create a step by step guide on how to connect your MongoDB from Atlas to your React.js application! &lt;/p&gt;

</description>
      <category>mongodb</category>
      <category>cloudskills</category>
      <category>javascript</category>
      <category>database</category>
    </item>
    <item>
      <title>Unit Testing in JS with Jest</title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Mon, 06 Sep 2021 22:55:51 +0000</pubDate>
      <link>https://forem.com/kjfossman/unit-testing-in-js-with-jest-5bl7</link>
      <guid>https://forem.com/kjfossman/unit-testing-in-js-with-jest-5bl7</guid>
      <description>&lt;p&gt;Why does unit testing get overlooked at times? When we write code and something is not working we usually continue trying to fix it by manually testing our application until it shows us the results we want. Once it is working we are ready to move on and continue building something else or adding to the application. Some think "The effort of writing a test at this point is overkill and I just want to move on." &lt;/p&gt;

&lt;p&gt;That may seem like a rational thought at the time. However if you plan to come back and work on this application in the future I recommend implementing some form of testing to help avoid bugs when refactoring. Imagine if someone else might work on this as well. The overall amount of time saved by writing tests is going to be worth it in the end. &lt;/p&gt;

&lt;p&gt;To get started with writing your first test let's take on a very simple problem that we can later expand on. We will start with a sum function that takes in two arguments a &amp;amp; b.&lt;/p&gt;

&lt;p&gt;We are going to use the Jest testing framework and this is what we need to get started.  &lt;/p&gt;

&lt;p&gt;Open up a new project in VScode and create a file called sum.js. &lt;/p&gt;

&lt;p&gt;run the following commands to set up your test environment.&lt;/p&gt;

&lt;p&gt;npm init -y &lt;/p&gt;

&lt;p&gt;this will initialize with all the default values and is our starting point for package.json&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="p"&gt;{&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&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="s2"&gt;file_name_of_your_choice&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="s2"&gt;version&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="s2"&gt;1.0.0&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="s2"&gt;description&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="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;main&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="s2"&gt;sum.js&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="s2"&gt;scripts&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test&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="s2"&gt;echo &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;Error: no test specified&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt; &amp;amp;&amp;amp; exit 1&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="s2"&gt;keywords&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;author&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="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;license&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="s2"&gt;ISC&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;Then run &lt;/p&gt;

&lt;p&gt;npm i --save-dev jest &lt;/p&gt;

&lt;p&gt;This is saved as a development dependency because we only use the testing library in development. &lt;/p&gt;

&lt;p&gt;You can see that it added the devDependencies&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;keywords&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;author&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="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;license&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="s2"&gt;ISC&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="s2"&gt;devDependencies&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;jest&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="s2"&gt;^27.1.0&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now go into the package.json and change the test script to jest.&lt;/p&gt;

&lt;p&gt;Was&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;scripts&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test&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="s2"&gt;echo &lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt;Error: no test specified&lt;/span&gt;&lt;span class="se"&gt;\"&lt;/span&gt;&lt;span class="s2"&gt; &amp;amp;&amp;amp; exit 1&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;Now&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;scripts&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test&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="s2"&gt;jest&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;run npm test and it will now run the tests&lt;/p&gt;

&lt;p&gt;But none have been written! &lt;/p&gt;

&lt;p&gt;Let's write our sum function in sum.js&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;sum&lt;/span&gt; &lt;span class="o"&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;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&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;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We have to export the sum function so that we can import it to our test file.  &lt;/p&gt;

&lt;p&gt;Create a file called &lt;/p&gt;

&lt;p&gt;sum.test.js&lt;/p&gt;

&lt;p&gt;This is naming convention to name your test file with the same name as the file that you are testing. &lt;/p&gt;

&lt;p&gt;First we need to import sum and then we can write tests in sum.test.js. &lt;/p&gt;

&lt;p&gt;Start with a simple test to determine if sum is a function.  Pay attention to the syntax here.&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;sum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./sum&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Check if sum is a function&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;function&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run npm test and you should see that you have 1 test passing.&lt;/p&gt;

&lt;p&gt;The test we have written is labeled with whatever you write in parentheses and then expect typeof sum means that we are checking the constant sum type, and we expect it to be 'function' type.  If we change 'function' to 'object' our test will fail. &lt;/p&gt;

&lt;p&gt;Ok let's take it a step further and check if our sum function is properly adding two numbers. Directly below our first test we will write our second test.&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;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Properly adds two numbers&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;sum&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="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nx"&gt;toBe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;9&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;Again run npm test and see that your tests pass. &lt;/p&gt;

&lt;p&gt;To show an example of why testing is important make a simple addition to our file. &lt;/p&gt;

&lt;p&gt;We want to create a function where we subtract the sum of our first function from a number we choose. It is going to look similar with just the two parameters passed in as seen here.&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;subtractSum&lt;/span&gt; &lt;span class="o"&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;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So that when we run&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;subtractSum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sum&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="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;We expect to get a return value of 1 and we do. So we should write a test to check this function. We need to change our import and export calls to this. &lt;/p&gt;

&lt;p&gt;in the sum.js file&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;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;subtractSum&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;in the sum.test.js file&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="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;subtractSum&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./sum&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;Now we can write our test&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;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Properly subtracts sum from number&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;subtractSum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sum&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="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;))).&lt;/span&gt;&lt;span class="nx"&gt;toBe&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="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;All three tests are currently passing.&lt;/p&gt;

&lt;p&gt;Now here is why the tests are important. You pass this application off to a friend who works on it. They come back to you and say that something is broken. This is what you have to look at without tests.&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;sum&lt;/span&gt; &lt;span class="o"&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;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;subtractSum&lt;/span&gt; &lt;span class="o"&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;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now figure out what is wrong. This is going to take some console.logging to check what returns you are getting when you run subtractSum(10, sum(4,5)) or whatever other ways you manually debug this. &lt;/p&gt;

&lt;p&gt;But if you have tests you can just run your test suite and see where the errors are. &lt;/p&gt;

&lt;p&gt;Run the tests and see two errors &lt;/p&gt;

&lt;p&gt;Properly adds two numbers is failing &lt;br&gt;
Properly subtracts sum from number is also failing&lt;/p&gt;

&lt;p&gt;This tells me that we need to look into the properly adds two numbers test first. The second test relies on that one to pass so this seems easy enough.  &lt;/p&gt;

&lt;p&gt;Now there is a focused approach to our debugging and quickly find that your friend changed the '+' to a '*' in the sum function. Fix that and run the tests again. No problems now all tests are passing. &lt;/p&gt;

&lt;p&gt;This is clearly a simple approach but even with something like this it begins to become very clear why testing in your applications is so important. If we didn't have these tests we might have been messing around with the subtractSum function for a while before realizing the root of the problem.  &lt;/p&gt;

&lt;p&gt;There is so much more you can do with the jest framework and the best way to learn is to try new things and work your way through some of these problems. In the end this will help you in your application building process. &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Setting Up a Backend For a Game Schedule. </title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Mon, 28 Jun 2021 14:50:08 +0000</pubDate>
      <link>https://forem.com/kjfossman/setting-up-a-backend-for-a-game-schedule-5b65</link>
      <guid>https://forem.com/kjfossman/setting-up-a-backend-for-a-game-schedule-5b65</guid>
      <description>&lt;p&gt;I recently made an app with a React JS frontend and a Rails API backend. I needed to make a schedule of games. That sounded simple, but when I started building out the API setup I quickly realized it was not simple at all. There are a few tricks you can use when setting up an API for a game schedule that I think you will find very useful.  &lt;/p&gt;

&lt;p&gt;First off my thought was a TEAM has many GAMES and a GAME belongs to a team. That is what most logical people would think. This is true to a certain extent but the problem is that a GAME has TWO TEAMS. So this code does NOT fulfill the requirements of an API for a schedule of games.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="no"&gt;Class&lt;/span&gt; &lt;span class="no"&gt;Team&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;ApplicationRecord&lt;/span&gt;
   &lt;span class="n"&gt;has_many&lt;/span&gt; &lt;span class="ss"&gt;:games&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt; 

&lt;span class="no"&gt;Class&lt;/span&gt; &lt;span class="no"&gt;Game&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;Application&lt;/span&gt; &lt;span class="no"&gt;Record&lt;/span&gt; 
   &lt;span class="n"&gt;belongs_to&lt;/span&gt; &lt;span class="ss"&gt;:team&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will not work because technically a GAME is going to have more than one TEAM. &lt;/p&gt;

&lt;p&gt;My first INCORRECT solution - I figured this is a case for a join table. I began to brainstorm how I would put a new model called schedule and join the teams and games together. The more I thought about this the more I thought this might work but doesn't seem to be the right way to go about this. Since a game will have two teams and two teams only I thought there had to be a better way than creating a join table for the two models. &lt;/p&gt;

&lt;p&gt;My second INCORRECT solution - Then it dawned on me each GAME will have a HOME TEAM and an AWAY TEAM so I could just make two TEAM models one for home and one for away. This would definitely work because now you would have two has_many and belongs_to relationships which would work for a schedule. Here was the problem that I saw, say you have TEAM Rollers.&lt;br&gt;&lt;br&gt;
You will have to create two TEAMS for the Rollers an AWAY TEAM and a HOME TEAM. This is doable but then what do you do when you want to take stats for the Rollers. You are going to have to add together both teams just to find something simple like their wins and losses.  &lt;/p&gt;

&lt;p&gt;Final Solution - Here is what I decided to use for my API. Instead of creating two separate models for an AWAY TEAM and a HOME TEAM, when writing out the models I aliased a home_team and an away_team with the class name of "TEAM". For the TEAM model it was similar has_many home_games with a class name of "GAME" and the same was done for away games.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Game&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;ApplicationRecord&lt;/span&gt;
    &lt;span class="n"&gt;belongs_to&lt;/span&gt; &lt;span class="ss"&gt;:home_team&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:class_name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"Team"&lt;/span&gt;
    &lt;span class="n"&gt;belongs_to&lt;/span&gt; &lt;span class="ss"&gt;:away_team&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:class_name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"Team"&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Team&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;ApplicationRecord&lt;/span&gt;
    &lt;span class="n"&gt;has_many&lt;/span&gt; &lt;span class="ss"&gt;:home_games&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:class_name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"Game"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:foreign_key&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'home_team_id'&lt;/span&gt;
    &lt;span class="n"&gt;has_many&lt;/span&gt; &lt;span class="ss"&gt;:away_games&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:class_name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"Game"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;:foreign_key&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s1"&gt;'away_team_id'&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What this will allow you to do is create a schedule that has a home_team and an away_team. When you go into a team to access their home or away games active record has given you this method.  Rollers.home_games, this will give you a list of home games that the Rollers have either participated in or are scheduled to play in. &lt;/p&gt;

&lt;p&gt;You may be thinking: Ok well how are you going to find the stats of each team.  Won't you have to combine home_team and away_team anyways. Does that really solve the problem that you had before???&lt;/p&gt;

&lt;p&gt;I think it helps immensely, what this allowed me to do was handle everything in my backend by writing some methods for each model. If it wasn't set up this way it would need to be handled on the frontend which would be no good if you were to ask me. Here is an example of calculating wins for a team.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;    &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;wins&lt;/span&gt;
        &lt;span class="n"&gt;games&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;away_games&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;home_games&lt;/span&gt;

        &lt;span class="n"&gt;games&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;collect&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;count&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;winner&lt;/span&gt;
                &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;winner&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;:name&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nb"&gt;self&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;name&lt;/span&gt;
            &lt;span class="k"&gt;end&lt;/span&gt;
            &lt;span class="k"&gt;end&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Combining the games in the backend like this at the top is super easy. Now all I had to do was a simple if statement to see if this team was the winner. This will come through on the API as wins and there is another method I have very similar called losses.  &lt;/p&gt;

&lt;p&gt;All this calculation will be done when my fetch request is made so it won't slow down my application on the frontend every time I load the team page that shows their wins and losses. &lt;/p&gt;

&lt;p&gt;This is the best way to set up a schedule and has worked for me. I hope that you enjoy this and give it a try if this is something similar to what you build in the future. &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Converting Ruby datetime to JS </title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Thu, 24 Jun 2021 18:29:40 +0000</pubDate>
      <link>https://forem.com/kjfossman/converting-ruby-datetime-to-js-4fhp</link>
      <guid>https://forem.com/kjfossman/converting-ruby-datetime-to-js-4fhp</guid>
      <description>&lt;p&gt;We are going to dive into converting a Ruby datetime object to a JS date object.  I used React JS for my latest application. One of the features for the app is a schedule of games for a local little league.  I used a Ruby backend with a React JS frontend. &lt;/p&gt;

&lt;p&gt;Of course for a game schedule the time of the games is very important. I thought there was going to be no issue. When I started implementing the games in my frontend I noticed that the time was off from the backend. Let's go step by step through my process. &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;First of all I have an array of games so I need to map through those games and pull out the pertinent information for the game schedule. For now we will just focus on the time aspect. I did this with a simple map function in React.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;games&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;game&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;game&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;Here the problem is we get an unreadable string.&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="mi"&gt;2021&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;06&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="nx"&gt;T14&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;00&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mf"&gt;00.000&lt;/span&gt;&lt;span class="nx"&gt;Z&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can see that is June 12, 2021 at 14:00(2:00pm). This is the correct date so now we just have to convert it to JS to make it look good.  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;Enter Moment.js. This is a very simple way to convert your Ruby time to JS time. Here is how to use it in React JS.&lt;br&gt;
First install it to your application.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;npm install moment --save
         or&lt;/li&gt;
&lt;li&gt;yarn add moment&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then import Moment.&lt;br&gt;
&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Moment&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;moment&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;Now take game.date and use it as an argument in the Moment function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="nc"&gt;Moment&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;game&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;MMMM DD,  LT&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;Here is what we get back&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;June&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;00&lt;/span&gt; &lt;span class="nx"&gt;AM&lt;/span&gt;

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

&lt;/div&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%2Fmedia4.giphy.com%2Fmedia%2FtoB3AnUDkqE3GENKx0%2Fgiphy.gif%3Fcid%3Decf05e47ubkuhto12pkjg3hsdquwtu52nm3jnwnuuddo7i96%26rid%3Dgiphy.gif%26ct%3Dg" 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%2Fmedia4.giphy.com%2Fmedia%2FtoB3AnUDkqE3GENKx0%2Fgiphy.gif%3Fcid%3Decf05e47ubkuhto12pkjg3hsdquwtu52nm3jnwnuuddo7i96%26rid%3Dgiphy.gif%26ct%3Dg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Fixing this is simple but pretty difficult to find out how while googling. &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Now that we have our time coming through with the correct format we just have to figure out how to make it read the correct time of 2:00pm.
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I will just skip right to it for you. &lt;/p&gt;

&lt;p&gt;When Ruby sends a datetime object from the backend to the frontend it will be in UTC time which is Coordinated Universal Time.  If your time zone doesn't line up with that then you have come to the right place.  &lt;/p&gt;

&lt;p&gt;Moment.js has a lot of functionalities where you can use a timezone function the regular moment function and also a parseZone function.  &lt;/p&gt;

&lt;p&gt;What we want is the parseZone function.  What this does with the Ruby datetime object is takes the time coming in and uses that exact time without converting it to your local timezone.  For me being in Alaska we are 8 hours earlier than UTC which is why my time kept coming back incorrect. parseZone says hey we don't want any conversions just show me what the Ruby backend is saying exactly.  &lt;/p&gt;

&lt;p&gt;This is still a function of Moment.js so everything above is needed. This is what the final function will look like.&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;Moment&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parseZone&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;game&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;format&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;MMMM DD,  LT&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;Which will give us&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;June&lt;/span&gt; &lt;span class="mi"&gt;12&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="mi"&gt;00&lt;/span&gt; &lt;span class="nx"&gt;PM&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Exactly what we are looking for! &lt;/p&gt;

&lt;p&gt;The Moment.js docs also have a ton of formatting options and are something to definitely check out if this is something you may be using! &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%2Fmedia4.giphy.com%2Fmedia%2F3o6UB3VhArvomJHtdK%2Fgiphy.gif%3Fcid%3Decf05e47di12qol5xqwjqdcwgkxob6cffgso8eb06d9000gg%26rid%3Dgiphy.gif%26ct%3Dg" 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%2Fmedia4.giphy.com%2Fmedia%2F3o6UB3VhArvomJHtdK%2Fgiphy.gif%3Fcid%3Decf05e47di12qol5xqwjqdcwgkxob6cffgso8eb06d9000gg%26rid%3Dgiphy.gif%26ct%3Dg"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Howler</title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Fri, 28 May 2021 01:08:59 +0000</pubDate>
      <link>https://forem.com/kjfossman/howler-4jo4</link>
      <guid>https://forem.com/kjfossman/howler-4jo4</guid>
      <description>&lt;p&gt;I recently made a javascript application where I wanted an easy way to implement sounds.  I wanted to be able to use a "click" event to activate a sound.  I also wanted to be able to search for any kind of sound that I wanted. I didn't want to have to pick from a generic library of sounds.  &lt;/p&gt;

&lt;p&gt;After a bit of googling I found Howler.js.  It looked like the exact thing I was looking for so I decided to go that route. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QntQzCWw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media0.giphy.com/media/yhdKi9jOYoNSE/giphy.gif%3Fcid%3Decf05e475fwlgfi93oakgeio8z6ayiyzjt86g67dutczv87n%26rid%3Dgiphy.gif%26ct%3Dg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QntQzCWw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media0.giphy.com/media/yhdKi9jOYoNSE/giphy.gif%3Fcid%3Decf05e475fwlgfi93oakgeio8z6ayiyzjt86g67dutczv87n%26rid%3Dgiphy.gif%26ct%3Dg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There were a few things that I liked about what Howler.js had to offer.  The first is that a sound can play on top of another sound, so if you had a game where there was a lot going on it would give you room to expand.  Also it gives you the option to play any audio clip you can find and download.  &lt;/p&gt;

&lt;p&gt;To get howler working there are a few quick steps that you need to dd (this is if you are using npm)&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;In the directory you want to use howler &lt;br&gt;
 run: npm install holwer &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Make sure that you include howler in your script.  A quick google search of howler cdn will give you what you need for the src. Here is where I went for that.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://cdnjs.com/libraries/howler"&gt;https://cdnjs.com/libraries/howler&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Link it in your script like this!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text/javascript&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; 
&lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There are a few ways to create sounds at this point using howler. I think the easiest thing to do is to set a variable to the sound you want to make. In order to do this you need to have a sound file to pull from. &lt;/p&gt;

&lt;p&gt;You can use any sounds you want, but getting access to them is the part that could trip you up.  Don't worry though it is very easy.  &lt;/p&gt;

&lt;p&gt;I created a new folder in my project called audio.  Then I found the sound that I wanted.  Since I was making a game I figured that anything that sounded like an old Super Mario game would be a safe choice.  So I went to this site. &lt;br&gt;
&lt;a href="https://themushroomkingdom.net/media/smb/wav"&gt;https://themushroomkingdom.net/media/smb/wav&lt;/a&gt; &lt;br&gt;
Downloaded a couple of sound clips and drug them to my audio folder. &lt;/p&gt;

&lt;p&gt;So now we are to the point where you will set your variable to a sound. All you need to know is the filepath to the sound clip and you should be good to go.  It will look something like this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;sound2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Howl&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;src&lt;/span&gt;&lt;span class="p"&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;../audio/smb_bump.wav&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;  
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is not the only way to do this. If you want different file types you can make that happen as well, but this was pretty simple, and it worked.  &lt;/p&gt;

&lt;p&gt;Now for the final implementation all you need to do is invoke the sound clip with the play().  Like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="nx"&gt;sound2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;play&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XhLzmFxo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.giphy.com/media/5xtDarE6xDVfXhudrVK/giphy.gif%3Fcid%3Decf05e47yi8thhzd45mcwpbszkdttj3if6xbeewxqb8iaitp%26rid%3Dgiphy.gif%26ct%3Dg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XhLzmFxo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.giphy.com/media/5xtDarE6xDVfXhudrVK/giphy.gif%3Fcid%3Decf05e47yi8thhzd45mcwpbszkdttj3if6xbeewxqb8iaitp%26rid%3Dgiphy.gif%26ct%3Dg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There are other ways to make sounds clips in your project and there may be some easier ways. I thought howler was a good way to use something that was built for this.  It has more functionalities that you can check out if that is something you are interested in!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Nested Routes</title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Thu, 29 Apr 2021 21:38:41 +0000</pubDate>
      <link>https://forem.com/kjfossman/nested-routes-3jef</link>
      <guid>https://forem.com/kjfossman/nested-routes-3jef</guid>
      <description>&lt;p&gt;When I heard about nested routes for the first time I was interested to hear how they could improve your overall code.  The simplest thing I first understood was that it cleaned up your routing so the URLs looked better than if you didn't have them. This way if you wanted to look at all books written by an author the path would look like /author/:id/books, instead of going to /books and then needing to do extra work to find the author you wanted to render. &lt;/p&gt;

&lt;p&gt;I found it interesting though that the route still takes you to the same controller action. This example would be in the Books controller on the index action.  So the nested route is nice but you still have to fill out some logic to make the page render what you are actually looking for. &lt;/p&gt;

&lt;p&gt;The question presents itself again... What is the benefit of a nested route other than just for looks???  Digging a bit deeper you will find that when using a nested route you do benefit from having an author_id param at your disposal.  So before when the route you had was this:&lt;br&gt;
   /books, if you wanted to find a specific author you would probably need a form of some sort to send the id to your controller. &lt;/p&gt;

&lt;p&gt;But with:&lt;br&gt;
   /author/:id/books now you have that author_id so a lot of the work is already done for you.  No form is necessary for me to find the correct author.  I can just do something like&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="vi"&gt;@author&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Author&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find_by&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;id: &lt;/span&gt;&lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;:author_id&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and now I have the author who I am looking for then instead of the index looking like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;index&lt;/span&gt; 
  &lt;span class="vi"&gt;@books&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Book&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will look like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;index&lt;/span&gt; 
  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;:author_id&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="vi"&gt;@author&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Author&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find_by&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="ss"&gt;id: &lt;/span&gt;&lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;:author_id&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
    &lt;span class="vi"&gt;@books&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;author&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;books&lt;/span&gt;
  &lt;span class="k"&gt;else&lt;/span&gt;
    &lt;span class="vi"&gt;@books&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Book&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Basically what this if statement is telling the controller is, if there is a nested route passed in all I want are those authors books specifically otherwise I want to see all the books in the database. &lt;/p&gt;

&lt;p&gt;There is a more tangible advantage to a nested resource. Another advantage you have with a nested resource is the ability to pass a form multiple models. In fact, if you don't pass the form multiple models you will end up with a routing error.  Here is an example. &lt;/p&gt;

&lt;p&gt;Say I want to create a form for a user to create a new book, but I want the author to be the one whose route we are currently using. /author/:id/book/new would be the route. &lt;/p&gt;

&lt;p&gt;If I do this I will get an error that says no author_id attribute can be found.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sx"&gt;%= form_with(model: @book) do |f| %&amp;gt;
    &amp;lt;%=&lt;/span&gt; &lt;span class="n"&gt;f&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;label&lt;/span&gt; &lt;span class="ss"&gt;:title&lt;/span&gt; &lt;span class="o"&gt;%&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sx"&gt;%= f.text_field :title %&amp;gt;&amp;lt;be&amp;gt;

   &amp;lt;%=&lt;/span&gt; &lt;span class="n"&gt;f&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;hidden_field&lt;/span&gt; &lt;span class="ss"&gt;:author_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;value: &lt;/span&gt;&lt;span class="vi"&gt;@author&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt; &lt;span class="sx"&gt;%&amp;gt;
&amp;lt;%end%&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What we are trying to do is not allow the user to select an author so when they submit the form even though the author is not visible in the form it will still get passed through when creating the new book.  Now the problem here is that the author instance variable needs to be passed into the form. &lt;/p&gt;

&lt;p&gt;We are able to this because we are using nested routes by the way. This is what the form should look like instead.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sx"&gt;%= form_with(model: [@author, @book]) do |f| %&amp;gt;
    &amp;lt;%=&lt;/span&gt; &lt;span class="n"&gt;f&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;label&lt;/span&gt; &lt;span class="ss"&gt;:title&lt;/span&gt; &lt;span class="o"&gt;%&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sx"&gt;%= f.text_field :title %&amp;gt;&amp;lt;be&amp;gt;

   &amp;lt;%=&lt;/span&gt; &lt;span class="n"&gt;f&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;hidden_field&lt;/span&gt; &lt;span class="ss"&gt;:author_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;value: &lt;/span&gt;&lt;span class="vi"&gt;@author&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt; &lt;span class="sx"&gt;%&amp;gt;
&amp;lt;%end%&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now since we are correctly using the power of our nested routes we can access what we need to by using the proper syntax above and including the author instance variable in the form. &lt;/p&gt;

&lt;p&gt;There are other benefits to nested routes as well but this is an eye-opening one that can be super helpful when it is needed.  What I have learned the most during my development process is that it is ok to not understand something right away.  For me, nested routes were nice but didn't make a ton of sense, but the more you use them the more little tricks you will pick up and then start to realize how beneficial they actually are. &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Styling a Web App With Bootstrap</title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Sat, 27 Mar 2021 16:17:18 +0000</pubDate>
      <link>https://forem.com/kjfossman/styling-a-web-app-with-bootstrap-1lob</link>
      <guid>https://forem.com/kjfossman/styling-a-web-app-with-bootstrap-1lob</guid>
      <description>&lt;p&gt;There are many steps to creating a web application. For beginners it can be extremely challenging to get started from scratch. Using the Model View Controller method gives you a basic framework to get started. Once you get going and begin setting up your associations, the logic behind the application can start to feel more natural. &lt;/p&gt;

&lt;p&gt;Working on the backend framework felt familiar to me.  It took a while to get everything to behave as I wanted but I could always reason through it.  Styling was a different story. &lt;/p&gt;

&lt;p&gt;Styling using Bootstrap and/or CSS was a bit abstract for me. It took a long time to figure out what the code was actually telling you. Taking bits of code off of Bootstrap and pasting into your own application is not that hard to do, but understanding what it is doing and being able to manipulate the code to fit your application can be a bit challenging.  &lt;/p&gt;

&lt;p&gt;While styling my app I learned that breaking everything down line by line is a good way to understand what the code is telling you. Let's look at a short example.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt; &lt;span class="nt"&gt;&amp;lt;li&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"nav-item"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"text-dark nav-link active fs-4 mx-2"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/users/&amp;lt;%= session["&lt;/span&gt;&lt;span class="na"&gt;user_id&lt;/span&gt;&lt;span class="err"&gt;"]&lt;/span&gt; &lt;span class="err"&gt;%&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;"&amp;gt;My Teams&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When I first look at this I can feel a little overwhelmed. To combat this I break it down into smaller sections.  A good method is to change parts of the code and see how it affects your product. Do this from your code editor or from your browser by right clicking and then clicking on inspect. &lt;/p&gt;

&lt;p&gt;I like to make changes from the browser because you can be more free to try anything without worrying about breaking your code. You also get to see the changes immediately without refreshing the page.   &lt;/p&gt;

&lt;p&gt;Back to the example, we see that there is a space between each section of text.  This is telling us that each one of those combinations of text is doing something to style our application.  &lt;/p&gt;

&lt;p&gt;If we look at the first one 'text-dark'. We can delete it and see what happens, or what I like to do is try writing the opposite. So if we write text-light what happens?  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/xUPOqy2cm7q2xN93Z6/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/xUPOqy2cm7q2xN93Z6/giphy.gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The text goes from black to white in this case. &lt;/p&gt;

&lt;p&gt;The best part of this is it starts to make you realize that the bootstrap code is not a foreign language. It is trying to write code that is very clear and concise.  I could talk through all of these, we have 'nav-link', 'active', 'fs-4', 'mx-2'.  The thing is that each step that I would take is the same as I just mentioned with slight variations.  &lt;/p&gt;

&lt;p&gt;With 'nav-link' I might delete it and see what that does compared to other parts of my code that still have it.  Same with 'active'.  It shows very basic things that bootstrap is doing and begins to make more sense the more you mess around with it. 'nav-link' makes your text look more like a clickable link we are used to seeing as users, 'active' will make it more bold so the link looks activated. &lt;/p&gt;

&lt;p&gt;'fs-4' and 'mx-2' have to do with font size and margins.  Again the point being none of this is a foreign language it is all pretty straight forward once you slow down and start looking at it piece by piece.  &lt;/p&gt;

&lt;p&gt;Another great thing to do is search on the bootstrap site. Search font or margin and then you will be able to understand what the '4' in 'fs-4' is telling you as well as the 'x' and the '2' in 'mx-2'.&lt;/p&gt;

&lt;p&gt;Once you get more comfortable doing this you will get more comfortable with CSS and how to manipulate larger sections of your code. For me it is going to make me think more about how to divide up my classes earlier on in the process of building my next application. &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Flatiron Project 1 - Ruby                            Utilizing the Sample Method</title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Fri, 26 Feb 2021 21:15:28 +0000</pubDate>
      <link>https://forem.com/kjfossman/flatiron-project-1-ruby-utilizing-the-sample-method-462k</link>
      <guid>https://forem.com/kjfossman/flatiron-project-1-ruby-utilizing-the-sample-method-462k</guid>
      <description>&lt;p&gt;For my Flatiron phase 1 CLI Application project I created an interactive trivia game.  I used an API that had old JEOPARDY! clues, and I took that data to configure the clues in a nice format for the user.  I made it for two players to compete against each other in a trivia battle.  There are two formats to play: one is where the user chooses a category and all questions for the game are from that single category; the other way to play is to play with randomized clues that display the category and the value of the clue.  You can choose to play with 2-20 random clues.  &lt;/p&gt;

&lt;p&gt;The sample method stood out to me as the most useful method I came across during my project.  You have the iterators and enumerators which are super useful and are more powerful than the sample method, but up until building my project I was unaware of the functionality of sample.  &lt;/p&gt;

&lt;p&gt;Getting started from a blank file was the hardest part of the project for me.  Once I started to get the ball rolling it was a slow deliberate process.  I had to take time to really think through each method and class I was working with and how to relate them to each other.  There was one part that really slowed me down. &lt;/p&gt;

&lt;p&gt;My Goal: To pull out 12 random clue objects from a bank of 89 to create a randomized game and assign to an instance variable. &lt;br&gt;
Note: I did not want any duplicate values in the 12 clues. &lt;/p&gt;

&lt;p&gt;My Process:&lt;br&gt;
It ended up being a laborious part of my project.  I first had to figure how to do something twelve times which was easy enough.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;           &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;times&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
               &lt;span class="no"&gt;What&lt;/span&gt; &lt;span class="n"&gt;to&lt;/span&gt; &lt;span class="n"&gt;put&lt;/span&gt; &lt;span class="n"&gt;here?&lt;/span&gt;&lt;span class="sc"&gt;??&lt;/span&gt;
           &lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is where the sample method enters.  Inside that times block I would put the sample method.  Sample pulls a random element from an array that you pass through to it.  In this case I was pulling from the array of 89 clues and getting the id number from the clue.  I also had to consider where to store this value so I stored it in an array that I initialized at the beginning of my method.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;       &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;random_clues&lt;/span&gt;
            &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
              &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;times&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
                &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;Clue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sample&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt;
               &lt;span class="k"&gt;end&lt;/span&gt;
       &lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I was pretty happy with this for a start.  This would give me the id numbers of 12 clue objects. I could iterate through the Clue.all array to find the objects that those id numbers matched and store that in an instance variable.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;     &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;random_clues&lt;/span&gt;
            &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
                &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;times&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
                    &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;Clue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sample&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt;
                &lt;span class="k"&gt;end&lt;/span&gt;
           &lt;span class="vi"&gt;@board&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Clue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;select&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
           &lt;span class="nb"&gt;id&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;include?&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
           &lt;span class="k"&gt;end&lt;/span&gt;
         &lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this case I would use the select enumerator so that it stores each value that returns true in the block. &lt;br&gt;
My Thought Process:&lt;br&gt;
Now I have what I need, an instance variable with twelve random clues that I can continue to work with in my CLI class....WAIT there could be duplicate clues! I need to check for that.  &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4tEfzw8l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media2.giphy.com/media/3s39mJ7zXU94mfAq4W/giphy.gif%3Fcid%3Decf05e4704o61t5cbfftp7ea459tqvw6is4d7icqn5ouy56o%26rid%3Dgiphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4tEfzw8l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media2.giphy.com/media/3s39mJ7zXU94mfAq4W/giphy.gif%3Fcid%3Decf05e4704o61t5cbfftp7ea459tqvw6is4d7icqn5ouy56o%26rid%3Dgiphy.gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is what I came up with to account for duplicate clue objects.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt; &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;random_clues&lt;/span&gt;
       &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
           &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;times&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
               &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;Clue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sample&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt;
           &lt;span class="k"&gt;end&lt;/span&gt;
       &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nb"&gt;id&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;uniq&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nb"&gt;id&lt;/span&gt;
           &lt;span class="vi"&gt;@board&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Clue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;select&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
           &lt;span class="nb"&gt;id&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;include?&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
           &lt;span class="k"&gt;end&lt;/span&gt;
       &lt;span class="k"&gt;else&lt;/span&gt;
           &lt;span class="n"&gt;random_clues&lt;/span&gt;
       &lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now I am checking to make sure that id.uniq == id, and if that is true it can continue to run the Clue.all.select enumerator and everything is good.  If that is not true then it needs to start the method all over again. &lt;/p&gt;

&lt;p&gt;My Thought Process:&lt;br&gt;
This should work, but looks wordy.  I am ok with that and will think about refactoring later.  &lt;/p&gt;

&lt;p&gt;I tested my code and it worked, then I tested it again and it didn’t work.  I kept doing this for about 30 minutes using binding.pry to see if I could find anything.  I did find where the mistake was happening which was in this method random_clues but I could not figure out why it would work sometimes and why it wouldn’t.  The conclusion that I came up with through research and talking with other programmers is that I had a recursion issue.  When I would call random_clues again this would sometimes cause an error.  &lt;/p&gt;

&lt;p&gt;Whatever the reason was it was not going to be acceptable to have a program that worked half of the time.  That is when I stumbled upon the sample method for a second time.  It was already in my code and I hadn’t thought much of it since the beginning of this process. With a little more research I found that you can pass sample an integer argument. It will pull the argument amount of unique elements from the array.  &lt;/p&gt;

&lt;p&gt;My Thought Process:&lt;br&gt;
Wow I made this way harder than it needed to be.  Maybe I should have researched this a bit more before defining this method with all these extra steps. &lt;/p&gt;

&lt;p&gt;My method went from all this code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt; &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;random_clues&lt;/span&gt;
       &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
           &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;times&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt;
               &lt;span class="nb"&gt;id&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;Clue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sample&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt;
           &lt;span class="k"&gt;end&lt;/span&gt;
       &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="nb"&gt;id&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;uniq&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nb"&gt;id&lt;/span&gt;
           &lt;span class="vi"&gt;@board&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Clue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;select&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
           &lt;span class="nb"&gt;id&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;include?&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
           &lt;span class="k"&gt;end&lt;/span&gt;
       &lt;span class="k"&gt;else&lt;/span&gt;
           &lt;span class="n"&gt;random_clues&lt;/span&gt;
       &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;random_clues&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;int&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
       &lt;span class="vi"&gt;@board&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Clue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sample&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;int&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
   &lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--U0dGqhLy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.giphy.com/media/xHMIDAy1qkzNS/giphy.gif%3Fcid%3Decf05e47pk14xmgx3r7i3u3swto5lww5e5bizq7h3jagpy1h%26rid%3Dgiphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U0dGqhLy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media1.giphy.com/media/xHMIDAy1qkzNS/giphy.gif%3Fcid%3Decf05e47pk14xmgx3r7i3u3swto5lww5e5bizq7h3jagpy1h%26rid%3Dgiphy.gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Not only was this super helpful for my goals, it also created some flexibility to my project. Now instead of being limited to a fixed number of random clues for that type of a game I can give the user the option to choose how many clues they want to play with.&lt;br&gt;&lt;br&gt;
Takeaway:&lt;br&gt;&lt;br&gt;
array = [1,2,3,4,5,6,7,8]&lt;br&gt;
array.sample =&amp;gt; [4] #returns random element from the array                  array.sample(3) =&amp;gt; [3,7,1] #will return 3 random elements (No Duplicate Elements) from the array in random order&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Why Software Engineering?</title>
      <dc:creator>kjfossman</dc:creator>
      <pubDate>Mon, 08 Feb 2021 20:30:48 +0000</pubDate>
      <link>https://forem.com/kjfossman/why-software-engineering-2a2e</link>
      <guid>https://forem.com/kjfossman/why-software-engineering-2a2e</guid>
      <description>&lt;p&gt;In early March of 2020 I was sitting in a hotel restaurant grabbing a plate for the continental breakfast.  I was in Seattle for a NCAA Division II conference basketball tournament.  My first year of coaching was nearing an end.  If we won our game tonight we would continue to San Diego, if we lost we were out.  I served myself breakfast and sat down to eat.  Looking around at all the empty seats made my mind start to wander.  It felt like a ghost town.  I am in downtown Seattle, at a popular hotel, eating breakfast completely alone at 8:00 am on Saturday morning.  I thought to myself, “Is this really happening right now? Should we be here? How bad is this virus going to be?”&lt;/p&gt;

&lt;p&gt;We lost our game by 3 and flew back to Anchorage the next morning.  Next week all the advancing teams were getting ready for the next round of playoffs.  Abruptly all NCAA games got cancelled for the year.  We were told to work from home if possible.  &lt;/p&gt;

&lt;p&gt;My contract ended in May, but I would be back with a new contract starting in August.  My plans were to fish commercially for the summer in my hometown of Haines, Alaska. The timing of the contract worked great for me. &lt;/p&gt;

&lt;p&gt;To get to Haines for the summer my wife and I would drive.  This requires you to go through Canada.  We had brought a lot of our belongings with us for the move to Anchorage and we needed to bring a lot of it back with us for the summer (let alone our vehicles).  &lt;/p&gt;

&lt;p&gt;About a week working from home in Anchorage passed.  Rumors started swirling about the Canandian border closing.  It was mid/late March, I called my boss and told him about the border rumors.  He told me to head out and work from Haines for the remainder of the contract. At 7:00 pm, my wife and I packed everything into our two vehicles along with our two pets(cat and dog) and were on the road by 7:00 am the next day. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--icUVg6pQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media.tenor.com/images/a1adb6cdffe3c4c1fc84c04e99e2c3b3/tenor.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--icUVg6pQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media.tenor.com/images/a1adb6cdffe3c4c1fc84c04e99e2c3b3/tenor.gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;With fishing starting in late June I planned on running basketball camps for the month of May/June.  It was clear that was not going to happen during the pandemic.  I sat at home thinking about ways I could be productive during this off time.  &lt;/p&gt;

&lt;p&gt;My sister-in-law Anne, who graduated from Flatiron School 6 years ago, was doing well and able to advance her career during this time.  I thought that was cool and wanted to look more into that field.  I read that software engineering is a good fit for people who enjoy problem solving, learning new things, and are detail oriented. This sparked my interest to take it a step further.  &lt;/p&gt;

&lt;p&gt;In May 2020 I started a free course offered by Harvard(CS50).  My sister Penny and I started the class together to help and give each other support in the learning process.  Right away my mind was working in a way that it hadn’t for a long time.  I loved that part of it.  It quickly became very difficult, with not much educational support, and the fishing season closing in.  Once fishing started I lost steam on the CS50 course out of necessity to work in an environment without the internet. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JU4lsMcs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media3.giphy.com/media/UuTIijN6ih5kzV9nNI/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JU4lsMcs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://media3.giphy.com/media/UuTIijN6ih5kzV9nNI/giphy.gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;August came rolling around before we knew it and heading back to Anchorage for my second year was in order.  I was preparing for the move back when I got a call from my boss.  He told me they were putting the contracts off until September.  I thought, “Ok, this is fine, I can keep fishing for a few more weeks and then go.”  The timing of the contracts continued to get pushed back.  Eventually it got pushed back to a decision in October. That meant not only would the earliest the contract start be mid/late October, but also they were not going to decide if there would be a contract at all until then.  &lt;/p&gt;

&lt;p&gt;This put my life plans in limbo and my wife and I had to take some time to figure out what we were going to do.  We were fortunate to have a place to live in Haines, and after hours of talking about pros and cons, we decided with all the uncertainty we would stay in Haines.  &lt;/p&gt;

&lt;p&gt;This eventually brought me back to software engineering.  On November 20th, 2020 I decided to start the Intro to Ruby course offered by Flatiron.  Talking with my sister-in-law gave me confidence that Flatiron would be a good route for me.  My plan was to apply for the software engineering program but I wanted to see how I liked the free course first.  &lt;/p&gt;

&lt;p&gt;It turned out the course was great.  It gave me reassurance that this is something that I would enjoy.  The problem solving and creative ways of thinking were the main things that captured my attention.  Learning something new and difficult can be crushing at times but that makes it more rewarding in the end.  Working through the intro to Ruby course taught me a lot.  &lt;/p&gt;

&lt;p&gt;Challenging and making yourself uncomfortable is hard to do, but it makes you better.  I knew after the intro course, applying for Flatiron School: Software Engineer was something that I needed to do. &lt;/p&gt;

&lt;p&gt;I have started the First Mile at Flatiron and am excited about the future.      &lt;/p&gt;

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