<?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: Alyssa Falcione</title>
    <description>The latest articles on Forem by Alyssa Falcione (@lyzarddz).</description>
    <link>https://forem.com/lyzarddz</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%2F800867%2F5ab4b3aa-c613-44c5-9d19-aa4874898246.jpeg</url>
      <title>Forem: Alyssa Falcione</title>
      <link>https://forem.com/lyzarddz</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/lyzarddz"/>
    <language>en</language>
    <item>
      <title>Active Record - The M in MVC</title>
      <dc:creator>Alyssa Falcione</dc:creator>
      <pubDate>Sat, 25 Feb 2023 22:19:59 +0000</pubDate>
      <link>https://forem.com/lyzarddz/active-record-the-m-in-mvc-2nlo</link>
      <guid>https://forem.com/lyzarddz/active-record-the-m-in-mvc-2nlo</guid>
      <description>&lt;p&gt;Websites have come a long way in the last 30 years and the MVC framework has aided greatly in that. Remember older static websites with very limited, if any user interaction? I may be showing my age here, but this specific website comes to mind that CNN posted on their main page from the 1996 trial for the Orenthal James Simpson, also known as OJ Simpson:&lt;/p&gt;

&lt;p&gt;&lt;a href="http://www.cnn.com/US/OJ/"&gt;http://www.cnn.com/US/OJ/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, it is VERY simple, and not attractive at all. This came from CNN. This just goes to show how far we have come in the world of computer science. Websites have been able to shift from using simple HTML and CSS to many other frameworks that help us to create more interactive and useful websites for our users.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is the MVC?
&lt;/h2&gt;

&lt;p&gt;The Model-View-Controller is a software design pattern that software developers use to keep their code organized into three main logical components. Each component has their own role to play, which makes sense in the real world also. In a restaurant, the chef cooks the food, the server serves it, and the bartender tends bar. With everyone having their own distinct roles, things can run more smoothly and organized. &lt;/p&gt;

&lt;p&gt;The Model:&lt;/p&gt;

&lt;p&gt;Being in charge of all data-related logic, we can compare our Model to a Chef in a restaurant. The Chef receives the food order from the Controller (our waiter in this analogy), which our waiter received from the View (our food menu). Therefore our Chef (or Model) now has the knowledge to execute our meal. So when you think of Model, think of data-related logic.&lt;/p&gt;

&lt;p&gt;The View:&lt;/p&gt;

&lt;p&gt;Alright lets talk about our food menu, the View. This component of our architectural software pattern is what serves the User information they need to order a delicious meal. Being in charge of the layout and display, the view can be thought of as the frontend, or graphical user interface.&lt;/p&gt;

&lt;p&gt;The Controller:&lt;/p&gt;

&lt;p&gt;Our Waiter or Waitress is our Controller. This is how our Customer or User can interact with our Chef, or Model. Our middleman per se. Our Controller will collect the data and deliver it to our Model, so our Model can begin preparing our meal.&lt;/p&gt;

&lt;p&gt;Okay, now that we know the basics of the MVC architecture, let's talk about how Active Record comes into the equation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rails Active Record
&lt;/h2&gt;

&lt;p&gt;Rails Active Record provides an interface and binds tables in relational databases. For instance, when we think of classes with Active Record, we think of tables. Just as rows map to objects and columns map to object attributes. Every Active Record object has CRUD capabilities and methods for database access. This is known as Object Relational Mapping, which is a technique that connects the objects of an application to tables in a relational database system. &lt;/p&gt;

&lt;p&gt;There are many benefits of using Active Record, it gives us the ability to add validations before our data is persisted to the database. It also allows us to represent associations between models and to develop inheritance hierarchies through related models. &lt;/p&gt;

&lt;h2&gt;
  
  
  Active Record vs SQL
&lt;/h2&gt;

&lt;p&gt;When working with databases, we often have to make queries. Active Record makes this process simple for programmers. Let's compare some queries in SQL vs Active Record.&lt;/p&gt;

&lt;p&gt;Finding Objects in SQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM customers WHERE (customers.first_name = 'Andy') LIMIT 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finding Objects in Active Record:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; Customer.find_or_create_by(first_name: 'Andy')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, it takes less code using Active Record and is easier for the human mind to interpret.&lt;/p&gt;

&lt;p&gt;Say we want to find the first existing record:&lt;/p&gt;

&lt;p&gt;SQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM customers ORDER BY customers.id ASC LIMIT 1

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

&lt;/div&gt;



&lt;p&gt;Active Record:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;customer = Customer.first
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And the last,&lt;/p&gt;

&lt;p&gt;SQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM customers ORDER BY customers.id DESC LIMIT 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Active Record:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;customer = Customer.last
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Active record also has a where method that allows us to make more specific queries:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Customer.where(first_name: 'Lifo')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;vs SQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM customers WHERE (customers.first_name = 'Lifo') LIMIT 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, Active Record insulates developers from having the need to use SQL in most cases and gives us the syntactical sugar that all programmers dream of, giving us cleaner, and more readable code.&lt;/p&gt;

&lt;p&gt;Let's look at how we can order our Objects in both Active Record and SQL:&lt;/p&gt;

&lt;p&gt;Active Record:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Book.order(:title, created_at: :desc)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;SQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; Book.order("title ASC").order("created_at DESC")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can also join associations with Active Record queries:&lt;/p&gt;

&lt;p&gt;Active Record:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Book.joins(:reviews)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;SQL:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT books.* FROM books
  INNER JOIN reviews ON reviews.book_id = books.id
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now that is a significantly less code using Active Record. Now you can see why Rails developers love Active Record so much, it saves us time, has less keystrokes and helps to enhance security in our applications.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Error Handling with Ruby on Rails</title>
      <dc:creator>Alyssa Falcione</dc:creator>
      <pubDate>Tue, 10 Jan 2023 17:53:17 +0000</pubDate>
      <link>https://forem.com/lyzarddz/error-handling-with-ruby-on-rails-2hai</link>
      <guid>https://forem.com/lyzarddz/error-handling-with-ruby-on-rails-2hai</guid>
      <description>&lt;p&gt;Naturally when we encounter an error in our code, Ruby will crash our program. Ruby on Rails with Active Record has developed a way to combat this so that developers can debug their code easier.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Exceptions&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We all need rescued sometimes, Active Record is here at our aid with the help of raising exceptions for error handling. Exceptions in Ruby on Rails using Active Record gives developers a way to deal with unexpected events, or errors. So when we encounter an error, rather than crashing the whole program, we can use built in exceptions which will halt the program and help us to handle any errors that are thrown.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Rescue_from&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Since all of our controllers inherit from our application controller in Ruby on Rails, that is where we will put our logic to handle our exceptions:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class ApplicationController &amp;lt; ActionController::API

rescue_from ActiveRecord::RecordInvalid, with: :unprocessable_entity_resp

rescue_from ActiveRecord::RecordNotFound, with: :not_found_resp

before_action :authorize

def current_owner
  @current_owner ||= Owner.find_by(id: session[:owner_id])    
end  

private 

def unprocessable_entity_resp(invalid)
  render json: {errors: invalid.record.errors.full_messages}, status: :unprocessable_entity
end

def not_found_resp  
  render json: {errors: "Not Found"}, status: :not_found
end

def authorize 
  render json: {errors:{Owner: "Not Authorized"}}, status: :unauthorized unless current_owner
end

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

&lt;/div&gt;



&lt;p&gt;As you can see in the code above, we use the "rescue_from" exception at the top level of our controller which is inherited from Active Record. The "with:" refers to a method that we create to handle the exceptions and to log our error messages. In the code above, the RecordNotFound exception is handled using our :not_found_resp method. Within that method we render our error message with JSON and provide that status of "not found". &lt;/p&gt;

&lt;p&gt;So to break this down in shorter terms, when you try to access data that cannot be found, Active Record will raise an exception and handle our errors with our "not_found_resp".&lt;/p&gt;

&lt;p&gt;There is a second important key to this. Adding the exceptions to the methods we would like to apply it to.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Class OwnersController &amp;lt; ApplicationController

    skip_before_action :authorize, only: :create

    def create
        owner= Owner.create!(owner_params)
        session[:owner_id] = owner.id
        render json: owner, status: :created
    end 

    def show
        render json: @current_owner, status: :ok
    end

    private

    def owner_params
        params.require(:owner).permit( :username, :password)
    end
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the Owners controller above, if you look at our "create" method you will notice the "!" after create. This is what allows us to raise an exception on this method. So if an error is encountered in this method, Active Record will refer back to our application controller and hit the method we created to handle the error it pertains to. Pretty easy, right?!&lt;/p&gt;

&lt;h2&gt;
  
  
  Error Handling with Post Requests to our Front
&lt;/h2&gt;

&lt;p&gt;Here I would like to discuss a bit about how our frontend &lt;br&gt;
(React) interacts with our backend (Ruby Rails) for error handling. Specifically with a POST request.&lt;/p&gt;

&lt;p&gt;Let's say that we have an application that allows users to login. This would be a post request since we are sending data to our backend. We can handle this by using a fetch request that goes to a specified endpoint.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; const [errors, setErrors] = useState([])

 fetch('/api/login', {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
      },
      body: JSON.stringify(owner)
    }) 
    .then(res =&amp;gt; {
      if(res.ok){
          res.json().then(owner =&amp;gt; {
              loginUser(owner)
          })
      }else {
        res.json().then(json =&amp;gt; setErrors(json.errors))
      }
  })
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Our fetch request will go to '/api/login', and if everything goes well, it will send our owners information to our backend within our body and log our user in. However we all know that's not always the case. So what happens if we encounter an error?&lt;/p&gt;

&lt;p&gt;Well, luckily we have implemented error handling in our backend to help with this. In the else statement from our React code above, you can see that we are taking the JSON response from our backend and setting it to our state so that we can access the errors from our backend, on our frontend. &lt;/p&gt;

&lt;p&gt;Below you can see that we are printing our errors in our return in a &lt;/p&gt;
&lt;h1&gt; tag. So when an error occurs, it will print out that specific error to our user.

&lt;/h1&gt;
&lt;p&gt;return (&lt;br&gt;
      &lt;/p&gt;
&lt;br&gt;
      &lt;h1&gt;{errors}&lt;/h1&gt;
&lt;br&gt;
      &lt;h1&gt; Log In &lt;/h1&gt; &lt;br&gt;
        &lt;br&gt;
          &lt;br&gt;
            Username: &lt;br&gt;
            &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
        Password: &lt;br&gt;
        &lt;br&gt;
         &lt;br&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;br&gt;
        &lt;br&gt;
      &lt;br&gt;
    )&lt;br&gt;
  }

&lt;p&gt;As you can see, error handling in Ruby on Rails with Active Record is quite simple and elegant. &lt;/p&gt;

&lt;p&gt;I hope this blog was helpful and can assist you in error handling for your future Ruby on Rails projects.&lt;/p&gt;

</description>
      <category>rails</category>
      <category>react</category>
      <category>ruby</category>
    </item>
    <item>
      <title>Debugging common errors when coding in Ruby on rails</title>
      <dc:creator>Alyssa Falcione</dc:creator>
      <pubDate>Thu, 29 Dec 2022 03:29:14 +0000</pubDate>
      <link>https://forem.com/lyzarddz/debugging-common-errors-when-coding-in-ruby-on-rails-56j2</link>
      <guid>https://forem.com/lyzarddz/debugging-common-errors-when-coding-in-ruby-on-rails-56j2</guid>
      <description>&lt;p&gt;Debugging is a large part of being a software engineer, and it may be one of the more frustrating aspects of our job. But worry no more! I have put together this short blog on common errors you may encounter while coding in Ruby on rails, and how to debug them.&lt;/p&gt;

&lt;p&gt;Let's first talk about the "puts debugging" technique first. Puts in Ruby on Rails can be used for many instances in debugging, but one of the more common use cases would be to find the value of a variable. Let's take a look at the example below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;puts variableValue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The puts statement above will give us the value of variableValue. However, it may not tell us everything we may need to know, so there are a number of variations we can use to help us gain more information about variableValue. Such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;puts variableValue.class  &amp;lt;-Will tell us what type of object we have

puts variableValue.inspect &amp;lt;-Will return a string representation of the object
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So therefore, "Puts" can aid us in debugging by evaluating the values of variables.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;ActionController::RoutingError&lt;/em&gt;*&lt;/p&gt;

&lt;p&gt;Routing errors are one of the more common errors you may run into. This happens when a URL has been requested that does not exist.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ActionController::RoutingError (No route matches [GET]"/flatIron"):
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When encountering this error, the first thing you should examine would be your routes.rb file to ensure that your route exists. If that is set up correctly, your error could likely be found in the associated controller dealing with the "Show" method.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NoMethodError: undefined method&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;NoMethodError: undefined method `your_method` 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This error can happen for a few different reasons. One of the more common reasons would be due to trying to call a method on an object that doesn't exist or Ruby is unable to find. You can usually resolve this error by checking your controllers to be sure that 'your_method' exists and is set up properly.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;NoMethodError: undefined method for nil:NilClass
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This error usually occurs when you pass an unexpected input to a class or method. You could also be receiving this error for trying to call on an object that has not yet been defined. Be sure to examine your methods to ensure the method and/ or associated object has been declared.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unpermitted parameter:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Luckily with Rails 7, it now helps to provide context when we receive the "unpermitted parameter" error. Previous versions of Rails would not directly tell us the associated controller that the error is causing, but we now have that magic to make our lives easier. So when you see this error, head to your targeted controller to be sure that you passed all of permitted parameters properly. It is also important to check your schema to be sure that your table also has those a column associated with the parameter that is erroring out.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;create_table "users", force: :cascade do |t|
    t.string   "firstname"
    t.string   "lastname"
    t.string   "email"
    t.datetime "created_at",      null: false
    t.datetime "updated_at",      null: false
    t.string   "password_digest"
    t.string   "password"
  end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If necessary, create a migration to update your table:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ bin/rails generate migration AddColumnToTable
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then head to your migrations and add the column:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class AddColumnToTable &amp;lt; ActiveRecord::Migration[7.0]
  def change
   add_column :tableName, :columnName, :dateType
  end
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Be sure to run "db:migrate" in your terminal to update your schema after updating your migration.&lt;/p&gt;

&lt;p&gt;*&lt;em&gt;Lastly lets talk about CORS Policy *&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;One of the more frustrating errors I encountered as a beginner working with Ruby on Rails was the "Cross-Origin Request Blocked" error, which was mainly due to inexperience. Most often times to solve this you just need to add the ruby gem 'rack-cors' to your gemfile and be sure to run 'bundle install' after. You also want to be sure to add the proper configuration to your application.rb file, it should look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  class Application &amp;lt; Rails::Application

    # ...

    config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*', :headers =&amp;gt; :any, :methods =&amp;gt; [:get, :post, :options]
      end
    end
  end
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Lastly, be sure to also add the configuration to your config.ru file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;require 'rack/cors'
use Rack::Cors do

 # allow all origins in development
 allow do
   origins '*'
   resource '*',
       :headers =&amp;gt; :any,
       :methods =&amp;gt; [:get, :post, :delete, :put, :options]
 end
end
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Some words of encouragement&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;During my project build for FlatIron Phase 4, I encountered every single one of these errors and learned a lot from debugging each and everyone of them. It is easy to become overwhelmed and frustrated when debugging errors in our code, but we must remember that it helps to give us the skills and experience to be more efficient in our coding in the future. Learning from our mistakes is a big part of being a Software Engineer so embrace the errors and see it as a learning experience. I hope that this blog is able to help beginners become more familiar with common Ruby errors and how to handle them with a positive outlook.  &lt;/p&gt;

</description>
      <category>go</category>
    </item>
    <item>
      <title>Ohhh, CRUD!</title>
      <dc:creator>Alyssa Falcione</dc:creator>
      <pubDate>Fri, 14 Oct 2022 21:44:59 +0000</pubDate>
      <link>https://forem.com/lyzarddz/ohhh-crud-384o</link>
      <guid>https://forem.com/lyzarddz/ohhh-crud-384o</guid>
      <description>&lt;p&gt;Who doesn't love an acronym? We use them in all facets of life.. The medical field, computer science, and also as a form of communication, iykyk.&lt;/p&gt;

&lt;p&gt;So let's talk about the important acronym at hand here. CRUD. Create. Read. Update. Destroy (or Delete). I personally prefer the term Destroy over Delete because it makes me feel like a powerful video game boss. I imagine my boss name would be something along the lines of "Doctor Bot", short for "Doctor Botany". I would use the plants of the earth to attack my opponents! Okay, enough nerdy stuff...&lt;/p&gt;

&lt;p&gt;Back to CRUD! While there are other variations of CRUD such as ABCD, DAVE and CRAP, we are just gonna focus on CRUD for this blog article. In computer programming, CRUD can be used to describe a few different operations but we are going to set our sights on CRUD and the major operations it has with databases.&lt;/p&gt;

&lt;p&gt;Sometimes CRUD can be referred to as a Data Manipulation Language (DML) because it is used to handle data inside of database tables. For example, using CRUD operations, we are able to manipulate data within database tables, whether it be to update data, delete it or create new data.&lt;/p&gt;

&lt;p&gt;We use CRUD in everyday life as web surfers and don't even think about it. When you click on someones profile on facebook, you are performing the R (read) in CRUD. When you make a post, you are using the C (create) in CRUD, and so on! &lt;/p&gt;

&lt;h2&gt;
  
  
  CRUD and SQL
&lt;/h2&gt;

&lt;p&gt;SQL is an acronym that stands for Structured Query Language, which is also a Data Manipulation Language. We use SQL to communicate with databases. SQL is a specialized language that allows users to request information, update information and even delete information if needed. Doesn't this sound awfully familiar to something? Hmm, wait... could it be... CRUD?!&lt;/p&gt;

&lt;p&gt;You're on the right track! Each letter of the acronym for CRUD is related to a SQL statement. For example, Create is equivalent to Insert in SQL. Below is a table to show their relationship:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ts3RKT8Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogr499sq2q5205474unn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ts3RKT8Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogr499sq2q5205474unn.png" alt="Image description" width="300" height="168"&gt;&lt;/a&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Create
&lt;/h2&gt;

&lt;p&gt;Starting with the C in our acronym, Create! AKA insert or add, Create allows users to create new records in a database.  Such as when we are creating a new post on instagram, we are performing a CRUD operation. Here is an example of what that code may look like in SQL with an already existing table:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;INSERT INTO table_name (column1, column2)
VALUES (value1, value2);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The code above is specifying both column names and the values to be inserted. You can also write your INSERT statement without specifying column names if you are adding values for all existing columns. &lt;/p&gt;

&lt;h2&gt;
  
  
  Read
&lt;/h2&gt;

&lt;p&gt;The read operation in CRUD, AKA select, can be thought of as a search function. It allows users to specify what data they want to access and retrieves that information for us. For example, when looking up someone's profile on LinkedIn, that is a read operation in CRUD. The code is quite simple for a select statement, as seen below:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;SELECT * FROM menu;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This will display all items from the menu table. If we wanted to be more specific of the data we want to retrieve, we can add further parameters if they exist:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;SELECT dinnerItems FROM menu.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;When using the read operation, it will not alter any of our data, it only allows us to access it. &lt;/p&gt;

&lt;h2&gt;
  
  
  Update
&lt;/h2&gt;

&lt;p&gt;The update operation in CRUD, AKA edit, allows us to alter or update existing data. Such as when we edit a post we have already made on Facebook, that would be our U (update) in CRUD. Here is an example below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;UPDATE table_name
 SET column1 = value1, column2 = value2, ...
 WHERE condition;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see above, it is important that we specify the table name that we would like to update as well as the columns we will be making those changes to. It is also important that we add the associated values to be changed. &lt;/p&gt;

&lt;h2&gt;
  
  
  Destroy
&lt;/h2&gt;

&lt;p&gt;Our lasts of CRUD, Destroy. AKA Delete. Delete is used to completely remove or destroy a record from a table. What is special about SQL is that it allows us to delete more than one record from a database at a time, pretty cool, right?! Below is an example of how we would perform a delete request:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;DELETE FROM table_name WHERE condition;&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why is CRUD important?
&lt;/h2&gt;

&lt;p&gt;CRUD is used in many types of applications, SQL is just one of many that utilizes these operations. We use CRUD for many things, including: security control, access and permission, performance optimization, etc. Without CRUD, software engineers would never get anything done. Imagine the internet without it - It would be awfully boring and some would argue that it would be useless. &lt;/p&gt;

</description>
    </item>
    <item>
      <title>Hooks in React ....... and bonus content on using photos in your applications</title>
      <dc:creator>Alyssa Falcione</dc:creator>
      <pubDate>Tue, 21 Jun 2022 22:18:03 +0000</pubDate>
      <link>https://forem.com/lyzarddz/hooks-in-react-and-bonus-content-on-using-photos-in-your-applications-54nn</link>
      <guid>https://forem.com/lyzarddz/hooks-in-react-and-bonus-content-on-using-photos-in-your-applications-54nn</guid>
      <description>&lt;p&gt;Goodbye classes, Hello hooks!&lt;/p&gt;

&lt;p&gt;I'll admit, I haven't really had to use classes very much seeing that I am new to programming and React Hooks were introduced in February of 2019, but that doesn't mean I can't have full appreciation of them. I of course have delved into classes just to have the general knowledge, and with the short amount of time we have spent together, I am highly grateful for the release of React 16.8 and Hooks.&lt;/p&gt;

&lt;p&gt;The most notable thing about React Hooks is how they allow programmers to reuse stateful logic without having to change the hierarchy of their components. This allows for programmers to share Hooks with many components, which in turn, makes our lives much easier. Classes did not give us this flexibility. This does not mean that coders have to refactor previous code or discontinue the use of classes, as it is still an option to use them.&lt;/p&gt;

&lt;p&gt;And guess what?! We can even build our own hooks! However, I just want to go through two of the more common ones used in day to day coding. Also, keep in mind that hooks will not work inside of classes, they're meant to be used instead of writing classes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let's talk about UseState();&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let's look at a code snippet from reactjs.org that shows the use of state&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    &amp;lt;div&amp;gt;
      &amp;lt;p&amp;gt;You clicked {count} times&amp;lt;/p&amp;gt;
      &amp;lt;button onClick={() =&amp;gt; setCount(count + 1)}&amp;gt;
        Click me
      &amp;lt;/button&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, we must import our hooks from React.&lt;/p&gt;

&lt;p&gt;What UseState() does is allow a state variable to be declared. This allows us to preserve values between function calls. This would be the same use as this.state with classes except it does not disappear when the function exits, rather React will preserve its state.&lt;/p&gt;

&lt;p&gt;When using state, we use const to declare a new state variable and we have the option to name our variables as we please. In the example above, we used "count" which is set at an initial value of 0. React will remember the value, or rather, argument that we passed to useState. Unlike with classes, we can pass a number or a string to state rather than only an object. The second variable in our example above is the setCount. This is actually a function that will update our state. &lt;/p&gt;

&lt;p&gt;We can now use the variable &lt;em&gt;count&lt;/em&gt; directly as seen below:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;p&amp;gt;You clicked {count} times&amp;lt;/p&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Now let's update state! &lt;/p&gt;

&lt;p&gt;This is where our setCount function comes into play. Since we already have our variables in play, this is how we can update our state&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;button onClick={() =&amp;gt; setCount(count + 1)}&amp;gt;
    Click me
  &amp;lt;/button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Keep in mind that if you want to store two different values in state, you will have to call useState() twice.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;UseEffect();&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This hook will run a function every time the component renders. Components render when it first loads initially and also when state changes it will reload to update the browser. This can be very useful so that we can create side effects when desired, such as for when specific values in your application may change. &lt;/p&gt;

&lt;p&gt;Below is an example of how to implement useEffect() from reactjs.org&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() =&amp;gt; {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    &amp;lt;div&amp;gt;
      &amp;lt;p&amp;gt;You clicked {count} times&amp;lt;/p&amp;gt;
      &amp;lt;button onClick={() =&amp;gt; setCount(count + 1)}&amp;gt;
        Click me
      &amp;lt;/button&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}

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

&lt;/div&gt;



&lt;p&gt;As you can see, just like any hook, you must import it from React. With useEffect implemented above, the function inside of useEffect will run during any rendering.&lt;/p&gt;

&lt;p&gt;When you want to specify when to re-render with useEffect, you can use something called a dependency array. Below is an example.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;useEffect(() =&amp;gt; {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see above we added a dependency array with [count]. This will only re-render when count changes. &lt;/p&gt;

&lt;p&gt;You can also provide a clean up function within your useEffect such as seen below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;useEffect(() =&amp;gt; {
  performSideEffect();
  return cleanUpFunction;
}, []);

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

&lt;/div&gt;



&lt;p&gt;Notice how above there is an empty dependency array. The purpose of this is to only re-render on initial load rather than the hook being executed on both initial load and update.&lt;/p&gt;

&lt;p&gt;This was just a short look into the magic that useEffect() can allow!&lt;/p&gt;




&lt;p&gt;Okay so I promised bonus material, so here we have it.&lt;/p&gt;

&lt;p&gt;I am not sure that this is common knowledge since it took me some time to figure out how to do it so I wanted to sure it with the coding community. &lt;/p&gt;

&lt;p&gt;Yeah, you can host them on a free site, but I like this way better.&lt;/p&gt;

&lt;p&gt;Start with saving the photos you want to use to your desktop in JPEG format.&lt;/p&gt;

&lt;p&gt;Next you will navigate to GitHub and choose ANY repository, then navigate to the "Issues" tab.&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%2Fq7wpcl4a5lqo7vzz8wq4.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%2Fq7wpcl4a5lqo7vzz8wq4.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;You will then open a new "Issue" as seen below&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%2Fsrf3vmoyajwuz9crwaj5.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%2Fsrf3vmoyajwuz9crwaj5.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;You can then drag your photo from your desktop to the "write" section&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%2Fekyt4u7kyv871dbnlwus.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%2Fekyt4u7kyv871dbnlwus.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Copy the highlighted text. This is the link you will use in your React.Js application.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fubvcnrcu7xt7davjro54.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%2Fubvcnrcu7xt7davjro54.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Voila! And there you have it, an easy way to use photos in your application!&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Who Doesn't Love a Petting Zoo?</title>
      <dc:creator>Alyssa Falcione</dc:creator>
      <pubDate>Tue, 22 Feb 2022 20:43:24 +0000</pubDate>
      <link>https://forem.com/lyzarddz/who-doesnt-love-a-petting-zoo-g5h</link>
      <guid>https://forem.com/lyzarddz/who-doesnt-love-a-petting-zoo-g5h</guid>
      <description>&lt;p&gt;Okay, so it may not be a traditional petting zoo, it's actually a memory card game with adorable animals, and we all love adorable animals. I do admit, I am biased here because the animals in the cards are either my own or pets of friends. What makes it a petting zoo? Well I just edited the cursor to a hand while the user is hovering over the animal cards to give the effect of "petting".&lt;/p&gt;

&lt;p&gt;I knew I wanted to create a game of some sort as my first project. I threw around the idea of making a tamagotchi giga pet-like application, but the memory game took the cake, mainly because I got to incorporate my animals into it while learning a few new-to-me concepts. I am happy with my decision as this was such a fun challenge to tackle for my first project.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What I learned&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;A card game always has to have a built-in shuffle feature otherwise the game would be too easy! The best way I found to do this? Randomizing arrays! This was a key concept I learned that really helped my game to be successful. &lt;/p&gt;

&lt;p&gt;&lt;code&gt;const randomize = () =&amp;gt; {&lt;br&gt;
    const cardData = cards;&lt;br&gt;
    cardData.sort(() =&amp;gt; Math.random() - 0.5);&lt;br&gt;
    return cardData;&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;I found method chaining to be the most efficient way to achieve this goal (for this purpose). As you can see in my code snippet above, I used a customized array.sort() method and math.random function to accomplish this. Since the sort function looks for either negative or positive numbers in order to determine whether to move the item in the array or not, I used math.random() and subtracted 0.5 as a baseline so we'll randomly get negative and positive numbers, which in turn randomly shuffles the items in the array.&lt;/p&gt;

&lt;h2&gt;
  
  
  Utilizing Event Listeners
&lt;/h2&gt;

&lt;p&gt;For a game to be interactive, event listeners are a must. This project only required 3 event listeners but I doubled the expectations to increase interactivity. I coupled event listeners with alerts to start, restart or pause the game.&lt;/p&gt;

&lt;p&gt;Starts Game&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const startBtn = document.getElementById("start-btn");&lt;br&gt;
startBtn.addEventListener("click", () =&amp;gt; {&lt;br&gt;
    cardGenerator();&lt;br&gt;
    startTimer();&lt;br&gt;
});&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Restarts Game&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const resetBtn = document.getElementById("restart-btn");&lt;br&gt;
resetBtn.addEventListener("click", refreshPage);&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;function refreshPage() {&lt;br&gt;
    if (confirm("Are you sure you want to restart the game?")) {&lt;br&gt;
        reloadCards();                                  &lt;br&gt;
    }&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Pauses Game&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const pauseBtn = document.getElementById("pause-btn");&lt;br&gt;
pauseBtn.addEventListener("click", pauseGame);&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;function pauseGame() {&lt;br&gt;
    alert("Press Ok to Resume Game");&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  JSON Document Database - Stretch Goal
&lt;/h2&gt;

&lt;p&gt;Originally when I wrote my program, I did not utilize db.json. I had just created my card data as an array within my index.js file. I felt eager to reach the stretch goal so I decided to take on the challenge. I did so by creating my card data in db.json and used a fetch request to access the data. So my code went from this:&lt;/p&gt;

&lt;p&gt;In index.js&lt;br&gt;
&lt;code&gt;const getData = () =&amp;gt; [      // without curly brace, it automatically returns  &lt;br&gt;
{imgSrc: "images/kit.jpeg", name: "Kit"},&lt;br&gt;
{imgSrc: "images/Pixel.jpeg", name: "Pixel"},&lt;br&gt;
{imgSrc: "images/Salvador.jpeg", name: "Salvador"},&lt;br&gt;
{imgSrc: "images/Tongo.jpeg", name: "Tongo"},&lt;br&gt;
{imgSrc: "images/Voltaire 8.jpeg", name: "Voltaire"},&lt;br&gt;
{imgSrc: "images/Zion.jpeg", name: "Zion"},&lt;br&gt;
{imgSrc: "images/Yadda.jpg", name: "Yadda"},&lt;br&gt;
{imgSrc: "images/Jenny.jpg", name: "Jenny"},&lt;br&gt;
{imgSrc: "images/kit.jpeg", name: "Kit"},&lt;br&gt;
{imgSrc: "images/Pixel.jpeg", name: "Pixel"},&lt;br&gt;
{imgSrc: "images/Salvador.jpeg", name: "Salvador"},&lt;br&gt;
{imgSrc: "images/Tongo.jpeg", name: "Tongo"},&lt;br&gt;
{imgSrc: "images/Voltaire 8.jpeg", name: "Voltaire"},&lt;br&gt;
{imgSrc: "images/Zion.jpeg", name: "Zion"},&lt;br&gt;
{imgSrc: "images/Yadda.jpg", name: "Yadda"},&lt;br&gt;
{imgSrc: "images/Jenny.jpg", name: "Jenny"}&lt;br&gt;
];&lt;/code&gt;&lt;/p&gt;

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

&lt;p&gt;In db.json&lt;br&gt;
&lt;code&gt;{&lt;br&gt;
"cards": [&lt;br&gt;
    {&lt;br&gt;
        "id": 1,&lt;br&gt;
        "name": "Jenny",&lt;br&gt;
        "imageSrc": "images/Jenny.jpg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 2,&lt;br&gt;
        "name": "Pixel",&lt;br&gt;
        "imageSrc": "images/Pixel.jpeg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 3,&lt;br&gt;
        "name": "Kit",&lt;br&gt;
        "imageSrc": "images/kit.jpeg"&lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 4,&lt;br&gt;
        "name": "Salvador",&lt;br&gt;
        "imageSrc": "images/Salvador.jpeg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 5,&lt;br&gt;
        "name": "Tongo",&lt;br&gt;
        "imageSrc": "images/Tongo.jpeg"&lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 6,&lt;br&gt;
        "name": "Voltaire",&lt;br&gt;
        "imageSrc": "images/Voltaire 8.jpeg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 7,&lt;br&gt;
        "name": "Zion",&lt;br&gt;
        "imageSrc": "images/Zion.jpeg"&lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 8,&lt;br&gt;
        "name": "Yadda",&lt;br&gt;
        "imageSrc": "images/Yadda.jpg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 1,&lt;br&gt;
        "name": "Jenny",&lt;br&gt;
        "imageSrc": "images/Jenny.jpg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 2,&lt;br&gt;
        "name": "Pixel",&lt;br&gt;
        "imageSrc": "images/Pixel.jpeg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 3,&lt;br&gt;
        "name": "Kit",&lt;br&gt;
        "imageSrc": "images/kit.jpeg"&lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 4,&lt;br&gt;
        "name": "Salvador",&lt;br&gt;
        "imageSrc": "images/Salvador.jpeg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 5,&lt;br&gt;
        "name": "Tongo",&lt;br&gt;
        "imageSrc": "images/Tongo.jpeg"&lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 6,&lt;br&gt;
        "name": "Voltaire",&lt;br&gt;
        "imageSrc": "images/Voltaire 8.jpeg"  &lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 7,&lt;br&gt;
        "name": "Zion",&lt;br&gt;
        "imageSrc": "images/Zion.jpeg"&lt;br&gt;
    },&lt;br&gt;
    {&lt;br&gt;
        "id": 8,&lt;br&gt;
        "name": "Yadda",&lt;br&gt;
        "imageSrc": "images/Yadda.jpg"  &lt;br&gt;
    }&lt;br&gt;
]&lt;br&gt;
}&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Reformatting my code this way allowed me to use the skills I learned to transmit data in a web application. After this project, I will always take the stretch goals on as a challenge. It allowed me to test my knowledge and to apply what I have learned already while learning some new concepts. Here's to the first of many projects! Thanks for joining me on this journey.&lt;/p&gt;

&lt;p&gt;Feel free to check my project out on &lt;a href="https://github.com/Lyzarddz/js-project-phase1"&gt; Github!&lt;/a&gt; &lt;/p&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Computer Science versus The Science I Know</title>
      <dc:creator>Alyssa Falcione</dc:creator>
      <pubDate>Fri, 21 Jan 2022 22:24:09 +0000</pubDate>
      <link>https://forem.com/lyzarddz/computer-science-versus-the-science-i-know-ie6</link>
      <guid>https://forem.com/lyzarddz/computer-science-versus-the-science-i-know-ie6</guid>
      <description>&lt;p&gt;Well, I’m officially en route. On my way to switching over to a new field of science. When I tell people, everyone says "What a drastic change!" They're not wrong. Veterinary Science is already so vastly different from most other biological sciences. Then compare it to Computer Science; They're in different dimensions! I’m still a newbie to the world of CS, but I can tell you the differences I’ve noticed so far.&lt;/p&gt;

&lt;p&gt;My hands are being utilized in a much safer, more elegant way. I haven't once had my mouse try to bite me, or accidentally stabbed myself with the instrument I call my keyboard. I'm not growing different pathogens or replicating viruses. I instead, installed antivirus software. So as far as the safety of the field goes, Computer Science takes the cake.&lt;/p&gt;

&lt;p&gt;The attire is comparable. Scrubs versus pajamas. Wait… everyone codes in their PJ’s, right? I'm not afraid to admit that I have been. I like to be cozy while learning.&lt;/p&gt;

&lt;p&gt;I haven't once heard the mention of grant writing, nor have I had to sit next to the "stinky" one in the lab. And by stinky, I’m referring to the scientist that grows stinky bacteria. This new field seems to smell much better.&lt;/p&gt;

&lt;p&gt;So far, those are the main differences I have found. I know there will be more to come, and maybe I'll come back here and share with you my very scientific findings. &lt;/p&gt;

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