<?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: Stefanie Davis </title>
    <description>The latest articles on Forem by Stefanie Davis  (@stefcodes).</description>
    <link>https://forem.com/stefcodes</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%2F231779%2F6724af50-14ba-46c5-8995-00cf62d5b3de.jpeg</url>
      <title>Forem: Stefanie Davis </title>
      <link>https://forem.com/stefcodes</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/stefcodes"/>
    <language>en</language>
    <item>
      <title>Data Explained: ETL</title>
      <dc:creator>Stefanie Davis </dc:creator>
      <pubDate>Tue, 04 Apr 2023 23:00:59 +0000</pubDate>
      <link>https://forem.com/stefcodes/data-explained-etl-4nc7</link>
      <guid>https://forem.com/stefcodes/data-explained-etl-4nc7</guid>
      <description>&lt;p&gt;Extract. &lt;/p&gt;

&lt;p&gt;Transform. &lt;/p&gt;

&lt;p&gt;Load. &lt;/p&gt;

&lt;p&gt;This can be a complex concept. Here’s an easy way to understand it: &lt;/p&gt;

&lt;p&gt;McDonalds. Yes. McDonalds. &lt;/p&gt;

&lt;p&gt;You order from the drive-through and receive your order (&lt;strong&gt;Extract&lt;/strong&gt;) &lt;/p&gt;

&lt;p&gt;Add ranch. People like ranch. &lt;/p&gt;

&lt;p&gt;Add Barbeque Sauce to your Fries. &lt;/p&gt;

&lt;p&gt;And Take off the Onions. Eww.   (&lt;strong&gt;Transform&lt;/strong&gt;) &lt;/p&gt;

&lt;p&gt;Eat. (&lt;strong&gt;Load&lt;/strong&gt;)&lt;/p&gt;

&lt;p&gt;Garbage In. Garbage Out.&lt;/p&gt;

</description>
      <category>database</category>
      <category>python</category>
      <category>sql</category>
    </item>
    <item>
      <title>Edgar Codd and The Modern Data Stack</title>
      <dc:creator>Stefanie Davis </dc:creator>
      <pubDate>Wed, 31 Mar 2021 04:29:51 +0000</pubDate>
      <link>https://forem.com/stefcodes/edgar-codd-and-modern-data-1pg2</link>
      <guid>https://forem.com/stefcodes/edgar-codd-and-modern-data-1pg2</guid>
      <description>&lt;p&gt;The modern data stack has the obvious definition of “it depends”. Some of the things that determine the data stack include: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Price &lt;/li&gt;
&lt;li&gt;Size (Terabytes, Petabytes, etc.)&lt;/li&gt;
&lt;li&gt;Company Relationships &lt;/li&gt;
&lt;li&gt;Scale &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is not an exhaustive list. But, it’s what I’ve seen determine the technologies used at different companies from startups to large corporations. It’s almost a given to say these technologies are based in the cloud. This adds to the scalability and programmatic nature of the code used for data. And as there are now three major cloud providers (AWS,GCP, and Azure) engineers adapt to the services provided by these companies. This shift allowed business to scale faster and do more with data. The common phrase is “Storage is cheap and Compute is expensive”. These cloud providers allowed for cheaper compute giving many companies the focus on solving problems with data, at any size. So, who’s going to maintain this influx of data? Some analysts or traditional DBAs skilled up and the programmatic nature called for other engineers to become data engineers. &lt;/p&gt;

&lt;h3&gt;
  
  
  Google Trends for Big Data
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--O2zYkflC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2u663qiek01a1wn8v73.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--O2zYkflC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2u663qiek01a1wn8v73.png" alt="Alt Text" width="800" height="241"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Google Trends for Data Engineer
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pK74lLYu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfafiwxjwgeyz1xrwhj3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pK74lLYu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfafiwxjwgeyz1xrwhj3.png" alt="Alt Text" width="800" height="245"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These are search terms. However, you can see the trend (no pun intended). As big data emerged, the need for someone to maintain the data grew. &lt;/p&gt;

&lt;h2&gt;
  
  
  What about Codd??
&lt;/h2&gt;

&lt;p&gt;Edgar Codd is known for creating the relational database model and the process of normalization. His name is usually brought up in relation to normal forms (1NF,2NF,3NF,etc). These foundational elements aren’t commonly discussed when evaluating data. But, relational databases are everywhere and you can have your pick. They range from lightweight like sqlite to Oracle or Teradata. These principles exist in Redshift and any other relational database. Codd even coined the term OLAP (Online Analytical Processing). On Top of this foundation exists Business Intelligence, Data Visualization, Data Science, Artificial Intelligence, Machine Learning and more. &lt;/p&gt;

&lt;p&gt;The Point: Data Engineers should know SQL and Python, as tools to do the job. However, there’s domain specific foundational knowledge that exists in data. And good data modeling can accomplish more (save money, scale data science, democratize data, ensure data governance, etc.) than writing more code can sometimes. I’ve seen it happen. I’ve made it happen. &lt;/p&gt;

</description>
      <category>database</category>
      <category>datascience</category>
      <category>dataengineering</category>
      <category>data</category>
    </item>
    <item>
      <title>Coder’s Block</title>
      <dc:creator>Stefanie Davis </dc:creator>
      <pubDate>Mon, 11 May 2020 03:39:20 +0000</pubDate>
      <link>https://forem.com/stefcodes/coder-s-block-7bl</link>
      <guid>https://forem.com/stefcodes/coder-s-block-7bl</guid>
      <description>&lt;p&gt;Coding is an art. I don’t mean just the design. The way you design your schemas, create APIs, and write the code for the front-end. There’s an imprint of the creator. If you spend enough time with someone and see their code you can get an understanding of how they write code and see their personality expressed in the code they create. &lt;/p&gt;

&lt;p&gt;Currently, I’m having Coder’s Block. Going through Flatiron School provided challenges and time restraints. I was still in control of what kind of projects I created. However, that pressure and what felt like impossible timelines, didn’t leave space for anything except creating and building. &lt;/p&gt;

&lt;p&gt;There’s no shortage of app ideas, tutorials, etc. None of those are the problem, ideas are plenty. If you give me enough time, I could fill that time discussing my own. However, what’s missing is the drive to code again. Holding the weight of personal and world issues is a heavy burden. This burden is usually eased by coding. I can code (with music) and for that time not be concerned with the outside world, just the code. Building something. &lt;/p&gt;

&lt;p&gt;So, where do I turn when I have Coder’s Block? Movies? Music? I tried, it just didn’t cut through. It’s one feeling to consume art and another level to create art. &lt;a href="https://www.healing-power-of-art.org/art-and-the-brain/"&gt;The science&lt;/a&gt; backs it up. This is your brain creating art: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fQUnWlf_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2m5kxkv23kppxykuw4m4.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fQUnWlf_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/2m5kxkv23kppxykuw4m4.jpeg" alt="Your Brain on Art"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Tl;dr Your brain likes art. And so does mine. I miss creating. I miss learning. I believe I’ll get back to it. &lt;/p&gt;

&lt;p&gt;Until then, music will stay on rotation and I’ll continue to take in inspiration. And give myself space to feel and focus on gratitude. I’m grateful to have more tools to create. And for the little victories every day. &lt;/p&gt;

</description>
      <category>gratitude</category>
      <category>webdev</category>
      <category>watercooler</category>
    </item>
    <item>
      <title>Coding during COVID-19 as a Recent Coding Bootcamp Grad</title>
      <dc:creator>Stefanie Davis </dc:creator>
      <pubDate>Sun, 05 Apr 2020 23:45:08 +0000</pubDate>
      <link>https://forem.com/stefcodes/coding-during-covid-19-as-a-recent-coding-bootcamp-grad-465i</link>
      <guid>https://forem.com/stefcodes/coding-during-covid-19-as-a-recent-coding-bootcamp-grad-465i</guid>
      <description>&lt;p&gt;This pandemic has changed our society mentally and the obvious physical impact. &lt;/p&gt;

&lt;p&gt;As a recent coding bootcamp grad (Flatiron School), there is pressure to apply to jobs and build side projects to add to your portfolio. However, a major event occurred towards the end of my bootcamp and it's still ramping up. &lt;/p&gt;

&lt;p&gt;I still feel this pressure. However, there's a stronger pressure on all of us. One area I figured I could help was in social isolation. I knew therapists were booked and many people can't afford therapy. However, empathy is free. I created a project to crowdsource empathy by allowing people a vehicle to talk to each other. &lt;/p&gt;

&lt;p&gt;The project is built in React. And I used a Calendly and Zoom integration. This allows users to book time on the calendar to speak with someone. Once you receive the meeting notification, you also receive the Zoom link. The other party receives the Zoom link as well and you're able to have a conversation at a convenient time and connect with someone new during these trying times. &lt;/p&gt;

&lt;p&gt;Next Steps: &lt;/p&gt;

&lt;p&gt;I need volunteers to speak to people and a vetting process. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.ronaconnect.com/"&gt;https://www.ronaconnect.com/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>projects</category>
      <category>hackathon</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Using iTunes API with React &amp;&amp; Redux &amp;&amp; Rails</title>
      <dc:creator>Stefanie Davis </dc:creator>
      <pubDate>Wed, 18 Mar 2020 09:20:50 +0000</pubDate>
      <link>https://forem.com/stefcodes/using-itunes-api-with-react-redux-rails-43n9</link>
      <guid>https://forem.com/stefcodes/using-itunes-api-with-react-redux-rails-43n9</guid>
      <description>&lt;p&gt;For my final Flatiron Project, I created a Music Journal. You can save songs and add them to your journal with the feeling and other text associated with that song. For example, "I remember this song from High School". Expanding this project may include more music details for Music Producers or Songwriters to have collections that help them electronically save notes about songs, including their own. &lt;/p&gt;

&lt;p&gt;While creating this project, I realized Redux is tough and not using Redux is tough. This paradox came when using the iTunes Search API. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sKibYSnQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3ntry8a7ctwmhrbsoj90.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sKibYSnQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3ntry8a7ctwmhrbsoj90.png" alt="iTunes Search Homepage"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This data comes nicely formatted in JSON and you don't need a key to access. So, that eliminated another step. &lt;/p&gt;

&lt;p&gt;Here is an example of one song:&lt;/p&gt;

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

&lt;p&gt;In order to get this data I needed to fetch. I didn't use axios, though I may in the future. For my project, I needed songs and I had to give the API a search term. I could hard code the media type as music. And I needed to get the search term from user input. I fetched the data in my handle submit function after a user inputted the term they wanted to search.&lt;/p&gt;

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

&lt;p&gt;The tricky part. &lt;/p&gt;

&lt;p&gt;I now have search results. However, I'm not going to hold them in state. But, I need to do 3 things: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Display the search results on the page.&lt;/li&gt;
&lt;li&gt;Display more details of the chosen song on a view page.&lt;/li&gt;
&lt;li&gt;Add that song to a list of saved songs, if chosen.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;To accomplish this, I have to bypass the Redux and rely on React within the application. &lt;/p&gt;

&lt;p&gt;I took the search results from the fetch and pass those results to a Song Item component to hold the details of the song. &lt;/p&gt;

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

&lt;p&gt;I display the Song Title and Image through the SongItem component. This addresses: 1. Display the search results on the page.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;            &amp;lt;Link
              to={{
                pathname: `/song/${song.trackId}`,
                state: { song }
              }}
            &amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I then send the same song information as state to a new path that will address: 2.Display more details of the chosen song on a view page. That path goes to the SongView Component. This is accomplished through the Routes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Route exact path="/song/:trackId" component={SongView} /&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Moving to #3, the SongView component displays the songs information and a button to add the song to the database and save it to the Redux store.&lt;/p&gt;

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

&lt;p&gt;And once the song is added the user is sent to the '/saved' path to see all of the songs saved to the database, including the new song that has just been created. &lt;/p&gt;

&lt;p&gt;So, that's all three accomplished: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Display the search results on the page.&lt;/li&gt;
&lt;li&gt;Display more details of the chosen song on a view page.&lt;/li&gt;
&lt;li&gt;Add that song to a list of saved songs, if chosen. &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Hopefully, this is helpful for someone else looking to integrate these technologies and use an external API while understanding what should be stored with Redux as global state. &lt;/p&gt;

</description>
      <category>react</category>
      <category>rails</category>
      <category>redux</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Master Plan to Execution: Javascript &amp;&amp; Rails </title>
      <dc:creator>Stefanie Davis </dc:creator>
      <pubDate>Wed, 19 Feb 2020 07:12:46 +0000</pubDate>
      <link>https://forem.com/stefcodes/master-plan-to-execution-javascript-rails-4b26</link>
      <guid>https://forem.com/stefcodes/master-plan-to-execution-javascript-rails-4b26</guid>
      <description>&lt;p&gt;All great projects begin with a great plan. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---pKyORdF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/jr5npz8nd7hyfauovzwl.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---pKyORdF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/jr5npz8nd7hyfauovzwl.jpg" alt="My UI Design on Paper"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Before starting this project, I wanted to make sure I had an plan for how I wanted it to look and the functionality I want it to have. (See hand-drawn UI image above) &lt;/p&gt;

&lt;p&gt;This was a very exciting challenge. This was our first project adding Javascript. And we weren't allowed to use any frameworks. So, vanilla JS it is. &lt;/p&gt;

&lt;h2&gt;
  
  
  The Process
&lt;/h2&gt;

&lt;p&gt;After going through this roller coaster and talking to other people in my cohort this seemed to be the general process of creating this project. &lt;/p&gt;

&lt;h3&gt;
  
  
  1. ok cool
&lt;/h3&gt;

&lt;h3&gt;
  
  
  2. OMG (The Wall)
&lt;/h3&gt;

&lt;h3&gt;
  
  
  3. Calm a little
&lt;/h3&gt;

&lt;h3&gt;
  
  
  4. Get Back to Work
&lt;/h3&gt;

&lt;h3&gt;
  
  
  5. ok. I'm just going to turn in something
&lt;/h3&gt;

&lt;p&gt;What was my something?&lt;/p&gt;

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

&lt;p&gt;I created a web application called BookTap. The concept is to have all your books on tap and add comments related to the book. Plenty of times, I come back to a book I've read. But, I don't remember any exact quotes or thoughts I had while reading the book. So, I created something I would use as my web application. &lt;/p&gt;

&lt;p&gt;After the idea phase, I had to start building.&lt;/p&gt;

&lt;p&gt;I decided to use Postgres instead of the out of the box sqlite3 that comes with creating a new rails project. This was to help with future functionality I wanted to add and hosting.&lt;/p&gt;

&lt;p&gt;I kept track of the commands I ran, because they aren't stored anywhere. You just see the product of the commands. So, to create the Rails backend with Postgres I used this command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;rails new booktap-backend --api --database=postgresql
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;My database structure was simple for this project: &lt;/p&gt;

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

&lt;p&gt;Then, I went on to add the coordinating Models and Controllers. I didn't need Views, because Javascript would take that place. &lt;/p&gt;

&lt;p&gt;I also added serializers for Json to determine exactly what information I wanted to pass through. For example, I didn't need to pass through the created_at and updated_at timestamp columns from my database. &lt;/p&gt;

&lt;h2&gt;
  
  
  Javascript
&lt;/h2&gt;

&lt;p&gt;With my created and configured for my project, I could begin to work on the Javascript. I went through three phases of the javascript section&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Get everything to work &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Get things to look decent&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Get things to look decent and work &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Refactor &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;As you can image #1 took the longest amount of time. I only had one file index.js and I was able to get everything to work in there.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Side-Note: I still think it's magic to have forms appear on a page
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;On very helpful piece, while trying to make things work is testing and testing in small chunks. &lt;/p&gt;

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

&lt;p&gt;console.log() was a friend when it came to testing my fetch requests to my api. &lt;/p&gt;

&lt;p&gt;When the page loads, one part I didn't know before was that I would have to create DOM elements each time the page loads to render the data from my fetch request. A piece of that is below: &lt;/p&gt;

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

&lt;p&gt;Below the image of the book I have an area on the book card for comments and a button to add a new comment. &lt;/p&gt;

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

&lt;p&gt;There are many pieces of code that allow that comment button to work. To simplify it I have:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;An event listener for the button&lt;/li&gt;
&lt;li&gt;A function to create a form that allows the user to create a comment &lt;/li&gt;
&lt;li&gt;A function to create actually create the comment and save it in the database sending a POST request through fetch. &lt;/li&gt;
&lt;li&gt;Displaying the new comment on the DOM for the user to see &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Below is the function to create the comment form to match the second item above. &lt;/p&gt;

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

&lt;p&gt;There are a lot of moving parts to this project. And both creating and debugging felt surgical. &lt;/p&gt;

&lt;p&gt;I hit the wall and got stuck plenty of times during this project, especially on the short deadline. &lt;/p&gt;

&lt;p&gt;I learned the only way to get over the wall is by getting help, whether that's someone pushing or lifting hands to pull me over the wall that's how I got over it. I'm thankful to my Flatiron cohort and instructor for helping me to this point. &lt;/p&gt;

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