<?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: losetom</title>
    <description>The latest articles on Forem by losetom (@losetom).</description>
    <link>https://forem.com/losetom</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%2F909230%2F6f872e93-6b15-46d7-8eaf-90eb9e220d8b.png</url>
      <title>Forem: losetom</title>
      <link>https://forem.com/losetom</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/losetom"/>
    <language>en</language>
    <item>
      <title>Validations in Ruby</title>
      <dc:creator>losetom</dc:creator>
      <pubDate>Mon, 19 Dec 2022 16:32:53 +0000</pubDate>
      <link>https://forem.com/losetom/validations-in-ruby-4p8g</link>
      <guid>https://forem.com/losetom/validations-in-ruby-4p8g</guid>
      <description>&lt;p&gt;What is a "validation"? &lt;/p&gt;

&lt;p&gt;In terms of strict English, a validation is a method that serves as a way of confirming something is what it is before anything else happens. &lt;/p&gt;

&lt;p&gt;"Does this dress look good on me? I want to validate that it's not tacky and okay to wear to the party." &lt;/p&gt;

&lt;p&gt;Definitely not the most normal human interaction but you get it. &lt;/p&gt;

&lt;p&gt;Validations in code are essentially the same thing! They consist of code that protects the database from receiving invalid data that may harm the database or other aspects of the application. &lt;/p&gt;

&lt;p&gt;We implement validations to assure ourselves that we are receiving the correct information every time. &lt;/p&gt;

&lt;p&gt;One method of validations can be handled through ActiveRecord, which we will discuss in a later blog. For now, this is how it will look.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Basic Usage&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; class Person &amp;lt; ActiveRecord::Base
   validates :name, presence: true
 end 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;#&lt;code&gt;validates&lt;/code&gt;&lt;/strong&gt; is doing exactly what it looks like it's doing. It is accepting the &lt;strong&gt;name of the attribute&lt;/strong&gt; that we want to validate (:name) and accepting a &lt;strong&gt;hash of options&lt;/strong&gt; that includes the details of the validation. { presence: true } is a very basic validation that checks that there is at least something present for the :name attribute. &lt;/p&gt;

&lt;p&gt;Well, writing validations is nice, but, how do we even know if something is validated or not? &lt;/p&gt;

&lt;p&gt;We can check manually with &lt;strong&gt;&lt;code&gt;#valid?&lt;/code&gt;&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;
class Person &amp;lt; Active Record::Base
  validates :name, presence: true
end

person = Person.new
person.valid? #=&amp;gt; false

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

&lt;/div&gt;



&lt;p&gt;Above, we created a new person and set it equal to person. We then called #valid? on our new person and returned a value of false. Why is it false? Let's check with &lt;strong&gt;&lt;code&gt;errors.messages&lt;/code&gt;&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;person = Person.new
person.errors.messages #=&amp;gt; name: can't be blank

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

&lt;/div&gt;



&lt;p&gt;We did not create a new person with a name, therefore, failing the validation of &lt;code&gt;{ presence: true }&lt;/code&gt; in reference to the name attribute. &lt;/p&gt;

&lt;p&gt;To give our users more information on the validation error, we can also render our validation errors as JSON in our controllers, which will be discussed in another blog post.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;def create
  person = Person.create(person_params)
  if person.valid?
    render json: person, status: :created
  else
    render json: { error: person.errors }, status: :unprocessable_entity
  end
end

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;code&gt;render json: { error: person.errors }&lt;/code&gt;&lt;/strong&gt; : This line of code is doing exactly what we did before when we called &lt;strong&gt;person.errors.messages&lt;/strong&gt; but displaying it as JSON for the user to see on their end, the frontend. &lt;/p&gt;

&lt;p&gt;&lt;u&gt;&lt;strong&gt;&lt;em&gt;Other Built-In Validators&lt;/em&gt;&lt;/strong&gt;&lt;/u&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Length&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;length&lt;/code&gt; is one of the most versatile because most inputs, if not all, will be a certain amount of characters long.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Person &amp;lt; Active Record::Base
  validates :name, length: { minimum: 2 }
  validates :bio, length: { maximum: 500 }
  validates :password, length: { in: 6..20 }
  validates :registration_number, length: { is: 6 }
end

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Uniqueness&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;uniqueness&lt;/code&gt; is also very common as it is used to ensure that the same username or email cannot be used for more than user account.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Account &amp;lt; Active Record::Base
  validates :email, uniqueness: true
end

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Custom Messages&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;class Alien &amp;lt; Active Record::Base
  validates :not_a_human, acceptance: true, message: "Extraterrestrials only!"
end

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

&lt;/div&gt;



&lt;p&gt;You can say whatever you want for the errors! Make it yours!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We covered the importance of validations and why they are necessary for any application worth using. If you want a secure database, validations must be implemented. If you want to feel safe as a consumer, make sure the applications that use have validations implemented. We went over common validation methods and use-cases. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://guides.rubyonrails.org/active_record_validations.html"&gt;https://guides.rubyonrails.org/active_record_validations.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://web-crunch.com/posts/understanding-ruby-on-rails-activerecord-validations"&gt;https://web-crunch.com/posts/understanding-ruby-on-rails-activerecord-validations&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ruby</category>
      <category>rails</category>
      <category>react</category>
    </item>
    <item>
      <title>Object-Oriented Design</title>
      <dc:creator>losetom</dc:creator>
      <pubDate>Mon, 24 Oct 2022 15:26:32 +0000</pubDate>
      <link>https://forem.com/losetom/object-oriented-design-448k</link>
      <guid>https://forem.com/losetom/object-oriented-design-448k</guid>
      <description>&lt;p&gt;Designing in any regards is not a straight line. As we try to develop something whether it be a computer program, a painting, or even a plate of food, we try to adhere to certain principles and patterns to guide us in creating the best product possible. &lt;/p&gt;

&lt;p&gt;Object orientation follows 3 main principles: &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1) Separation of Concerns&lt;/strong&gt; &lt;br&gt;
&lt;strong&gt;2) DRY (Don't Repeat Yourself)&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;3) Line Limits&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Single Responsibility and Separation of Concerns&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In Ruby, we have this concept of single responsibility, which is exactly what it sounds like; classes will have one job. This also means their services are aligned to facilitate that one job. This concept ties into separation of concerns. Each responsibility of a computer program needs to be separated and handle a different objective.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class MyStore

  def sign_in(user)
    @user = user
  end

  def current_user
    @user
  end

  def item(item)
    @item = item
  end

  def item_price=(price)
    @item_price = price
  end

  def shopping_cart
    @shopping_cart = []
  end

  def add_item_to_cart(item)
    @shopping_cart &amp;lt;&amp;lt; item
  end

  ...

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

&lt;/div&gt;



&lt;p&gt;Each concern here is defined in its own class and handles a single responsibility. &lt;code&gt;sign_in&lt;/code&gt; will handle signing in to the program, &lt;code&gt;current_user&lt;/code&gt; recognizes the user signing in, &lt;code&gt;item&lt;/code&gt; defines items in the program, and so on. If something were to go awry in our application and needs correcting, we don't have to disrupt other parts of the code that may potentially cause more problems than are already occurring.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Don't Repeat Yourself&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;def checkout(discount=0)
  total = 0
  shopping_cart.each do |item|
    total += item.price
  end

  if discount == 10
    total = total - total * 10 / 100.00
  elsif discount == 20
    total = total - total * 20 / 100.00
  elsif discount == 50
    total = total - total * 50 / 100.00
  end

  total

end

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

&lt;/div&gt;



&lt;p&gt;This block of code is messy and repetitive. While it gets the job done, it is prone to breaking and any maintenance needed could cause more issues. If we were to re-factor, it would 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;if coupon
      total = total - total * coupon / 100.00
    end

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

&lt;/div&gt;



&lt;p&gt;We have now achieved the same function but with less code. This allows for the program to run smoother and if any maintenance is necessary, it is flexible and less prone to causing greater issues. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Line Limits&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The final principle of object-oriented design would be line limits. Methods should not exceed 5 lines of code and classes should not exceed 100. These limits are not absolutely strict and are open to exceptions. They simply serve as a guide to writing clean and effective code. Programming is all about efficiency and effectiveness. If we have a block of code that's 20 lines long but we can refactor to achieve the same function in 5 lines, we should. If we think in terms of the shortest, most effective code possible, we can generate more efficient and less costly programs that are also easier to read, maintain, and update. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Conclusion&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;These three main concepts of object oriented design are meant as guides, not strictures. While they are not absolutely necessary, they are critical in developing real-world applications that are cost effective, easy to use, and easy to maintain. They also keep you sane which is incredibly important in the world of software engineering! There are many moving parts in this field so if there is someway to make our experience faster and easier, developers will do better and feel better in the long run. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;References&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.poodr.com/"&gt;https://www.poodr.com/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.rubyguides.com/ruby-tutorial/object-oriented-programming/"&gt;https://www.rubyguides.com/ruby-tutorial/object-oriented-programming/&lt;/a&gt;  &lt;/p&gt;

</description>
      <category>ruby</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>useState() in React</title>
      <dc:creator>losetom</dc:creator>
      <pubDate>Tue, 20 Sep 2022 12:16:51 +0000</pubDate>
      <link>https://forem.com/losetom/usestate-in-react-1hfe</link>
      <guid>https://forem.com/losetom/usestate-in-react-1hfe</guid>
      <description>&lt;p&gt;React has hooks which allow programmers to access features of React without having to use classes. One of these hooks is called useState(). &lt;/p&gt;

&lt;p&gt;The first step to applying useState is by importing the hook to the file of your choosing, as seen in the example below. &lt;/p&gt;

&lt;p&gt;import { useState } from "react"; &lt;/p&gt;

&lt;p&gt;The next step is to initialize the useState hook that was just imported by calling it in our function component. useState will accept an initial state and then return two values: the current state and a function that updates the state. &lt;/p&gt;

&lt;p&gt;import { useState } from "react";&lt;/p&gt;

&lt;p&gt;function Counter() {&lt;br&gt;
   const [count, setCount] = useState(0);&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;The first value here is &lt;strong&gt;count&lt;/strong&gt;, which is our current state. The second value is &lt;strong&gt;setCount&lt;/strong&gt;, a function which will update state based on the user input. &lt;/p&gt;

&lt;p&gt;Finally, we set the initial state to a number value with useState(0). The parentheses can hold a string, boolean, arrays, objects, or any combination of these values. &lt;/p&gt;

&lt;p&gt;To make this useState functional, we can add a click event and a button to make this work. &lt;/p&gt;

&lt;p&gt;import { useState } from "react";&lt;/p&gt;

&lt;p&gt;function Counter() {&lt;br&gt;
   const [count, setCount] = useState(0);&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;return ( &lt;br&gt;
   &lt;/p&gt; &lt;br&gt;
      setCount(count + 1)}&amp;gt; Click! &lt;br&gt;
     &lt;br&gt;
   &lt;br&gt;
  );&lt;br&gt;
}

&lt;p&gt;This code creates a button that holds an initial state of 0 and will count upward from that value of 0 every time the button is clicked. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://reactjs.org/docs/hooks-state.html"&gt;https://reactjs.org/docs/hooks-state.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/react/react_usestate.asp"&gt;https://www.w3schools.com/react/react_usestate.asp&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>react</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>forEach() in JavaScript</title>
      <dc:creator>losetom</dc:creator>
      <pubDate>Tue, 16 Aug 2022 18:18:00 +0000</pubDate>
      <link>https://forem.com/losetom/foreach-in-javascript-3clb</link>
      <guid>https://forem.com/losetom/foreach-in-javascript-3clb</guid>
      <description>&lt;p&gt;The forEach() method in JavaScript does not have a built-in return value like methods such as map() and filter() do but its generic properties make it very flexible as whatever callback function is passed in can have whatever functionality we want it to have. &lt;/p&gt;

&lt;p&gt;The forEach() method will execute a given function for each array item in an ascending index order.  &lt;/p&gt;

&lt;p&gt;The callback function for forEach() will be invoked with three given arguments: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;strong&gt;value&lt;/strong&gt; of the element &lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;index&lt;/strong&gt; of the element &lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;array&lt;/strong&gt; object being traversed &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can print values of an array to the console for visualization of the functionality. &lt;/p&gt;

&lt;p&gt;e.g.&lt;br&gt;
const numbers = [1, 2, 3, 4, 5]&lt;br&gt;
numbers.forEach(itemLog);&lt;/p&gt;

&lt;p&gt;function itemLog(item, index, array) {&lt;br&gt;
   console.log(item);&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;1&lt;br&gt;
2&lt;br&gt;
3&lt;br&gt;
4&lt;br&gt;
5&lt;/p&gt;

&lt;p&gt;This example shows the numbers in the array are simply being printed to the console. &lt;/p&gt;




&lt;p&gt;forEach() also allows the user to display the position, or index, of each value in the array. &lt;/p&gt;

&lt;p&gt;e.g.&lt;/p&gt;

&lt;p&gt;const numbers = [1, 2, 3, 4, 5]&lt;br&gt;
numbers.forEach(itemLog);&lt;/p&gt;

&lt;p&gt;function itemLog(item, index, array) {&lt;br&gt;
   console.log('a[' + index + '] = ' + item);&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;a[0] = 1&lt;br&gt;
a[1] = 2&lt;br&gt;
a[2] = 3&lt;br&gt;
a[3] = 4&lt;br&gt;
a[4] = 5&lt;/p&gt;

&lt;p&gt;This example displays the index position of each value in the array.&lt;/p&gt;




&lt;p&gt;const numbers = [1, 2, 3, 4, 5]&lt;br&gt;
numbers.forEach(itemLog);&lt;/p&gt;

&lt;p&gt;function itemLog(item, index, array) {&lt;br&gt;
   console.log(array)&lt;/p&gt;

&lt;p&gt;[1, 2, 3, 4, 5]&lt;br&gt;
[1, 2, 3, 4, 5]&lt;br&gt;
[1, 2, 3, 4, 5]&lt;br&gt;
[1, 2, 3, 4, 5]&lt;br&gt;
[1, 2, 3, 4, 5]&lt;/p&gt;

&lt;p&gt;This example displays the array being printed as called. &lt;/p&gt;




&lt;p&gt;If given an array of numbers, forEach() can also be used to provide the sum of those values in the array. &lt;/p&gt;

&lt;p&gt;For this example, I will use an arrow function to show how the code written above can be condensed. &lt;/p&gt;

&lt;p&gt;const numbers = [1, 2, 3, 4, 5]&lt;/p&gt;

&lt;p&gt;let sum = 0&lt;br&gt;
// To return the sum of an array, it must first start at 0 so, let sum = 0&lt;/p&gt;

&lt;p&gt;numbers.forEach(item =&amp;gt; {&lt;br&gt;
   sum += item&lt;br&gt;
)}&lt;/p&gt;

&lt;p&gt;console.log(sum); &lt;/p&gt;

&lt;p&gt;15&lt;/p&gt;

&lt;p&gt;The value of 15 will be printed to the console as it is the sum of the values provided in the array. &lt;/p&gt;




&lt;p&gt;forEach() is not the most useful of the JavaScript array methods but it offers a good alternative to writing lengthy for loops and provides a good visualization of the nature and behavior of arrays when they are being targeted with different methods. &lt;/p&gt;

&lt;p&gt;Resources:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=SXb5LN_opbA&amp;amp;ab_channel=FlorinPop"&gt;https://www.youtube.com/watch?v=SXb5LN_opbA&amp;amp;ab_channel=FlorinPop&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.w3schools.com/jsref/jsref_forEach.asp"&gt;https://www.w3schools.com/jsref/jsref_forEach.asp&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"&gt;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
