Forem: Sana Mohiuddin

The BCrypt Gem

Sana Mohiuddin — Tue, 07 Mar 2023 02:56:12 +0000

When creating an application you may want your users to create an account, so they can log in and access a version tailored to them. Take Instagram for example, when a user logs in their feed is populated by photos from people they are friends with and their profile is filled with their bio and photos that they uploaded. Being able to have a user log in is a very important aspect of most modern applications, but you need a way to make sure only that a user can log in to their account and not just anyone. That is where a password comes into the picture. When creating an account, an individual will also create a password, so when they log in with their unique username or email they also insert the password they created and if those are equal to what is stored in the database they will have successfully logged in. However, there is an issue with storing passwords in the database as plain text because it is not very secure and could be easy for a hacker to gain access to your database and all your users' information. The BCrypt gem offers a solution to avoid that problem.

What is BCrypt?

BCrpyt is a Ruby gem that will encrypt a user's password so it is not saved in plain text in the database and is therefore more secure. It does this by hashing the inputted password. You may be asking what a hashing is, and it is taking an input and putting it through a function that will change the input into a completely new output based on methods within the function. The outputs are always the same if given the same input.

def simple_hash(input)
   input.bytes.reduce(:*)
end

Above is a simple hash that will take your input and convert it into a number. If you were to use the input "hello" no matter how many times you input it you will always get 13599570816 as your output.

input1 = "hello"
simple_hash(input1)
# => 13599570816

input2 = "bcrypt"
simple_hash(input2)
# => 1738711408896

BCrypt has a hashing method, which is more complex and will always return a string of a fixed length. Some properties of BCrypt is that it will hash inputs that are similar to very different outputs this helps avoid collisions(differing inputs that have the same output). Also BCrypt being a cryptographic hash means that it is virtually impossible to reverse engineer the input based on an output.

One other important thing BCrypt does is that it salts our results from the hash, which means it appends a 29 length string from its salt method and adds it to the front of the hash. It does this in order to avoid the issue of a rainbow table, which experienced hackers may create, and it lists the outputs of the most common passwords.

Using BCrypt

In order to begin using BCrypt you will need to include it in the gemfile.

gem 'bcrypt'

After adding it make sure to run bundle install in the terminal to ensure your application has access to BCrypt methods. Rails makes it very simple to use BCrypt. The most important step is to add the has_secure_password macro to whichever model has the password, in this case the user model.

class User < ApplicationRecord
   has_secure_password
end

In order for it to work properly you need to have a column in your database labeled password_digest. When you create a new user instance with a password, BCrypt will hash and salt the password and save the result in the password_digest column. If you also create it with a password_confirmation it will check to make sure they are equal before doing so. Now you may be wondering what do you do when you want the user to log in. How do you compare what the user inputs to what is in the password_digest column. Luckily BCrypt has a way to do that for us.

class SessionsController < ApplicationController
  def create
    user = User.find_by(username: params[:username])
    if user&.authenticate(params[:password])
      session[:user_id] = user.id
      render json: user, status: :created
    else
      render json: { error: "Invalid username or password" }, status: :unauthorized
    end
  end
end

When a user logs in on the frontend the create method above will occur in the SessionsController. The &.authenticate method which is from BCrypt will check if the user is not nil, and if it isn't it will take the password and run it through the hash method to check whether the output is equal to what is in the password_digest column. If it is then the user will be saved to that session and rendered. Now the user should be logged in and have access to their tailored version of the application.

Conclusion

BCrypt is a gem that we can use in rails that gives us a much simpler way to deal with saving passwords and user authentication. It is also much safer and provides a much needed solution to just saving the password in the database as inputted by the user. It provides us with many helpful methods and shortcuts to make it possible.

Resources

The BCrypt Gem

Relationships in Rails

Sana Mohiuddin — Fri, 20 Jan 2023 04:10:37 +0000

Databases are an integral part of making most dynamic applications functional. When you log into Instagram or Snapchat, your specific information is what populates your screen. Your username, your photos, your feed filled with images from individuals that you follow; none of that would be possible without databases. They store all that information, which later populates the application's interface with the necessary data. For our examples, assume we are working with a stack that consists of a ReactJS frontend, a Ruby on Rails API that utilizes a PostgreSQL database. The API is the middle man that allows communication between the frontend and the database.

Why are Database Relationships Important?

Now that we have a bit of an overview of why databases are important to make your application work the way it should, let's discuss relationships between the different models in a database. Let us once again use the Instagram example. We have a user model and photo model. Each user has many photos that they have posted on their account. Each photo belongs to the user who posted the photo. It is important to define those relationships, because Rails gives us many tools to use those relationships to access your data more efficiently.

One-To-Many Relationship

The user to photo relationship is an example of a one-to-many relationship. Here is what we can type in the terminal to generate a user model:

rails g model User username:string bio:text age:integer

This is a simple model with three attributes that define a user. Now to generate the photo model we can type this:

rails g model Photo image_url:text caption:text user_id:integer

You may be wondering what the user_id attribute is for. It is known as a foreign key and it allows us to associate each photo with the correct user. When each instance of a user is created an id is automatically made, so when a new photo is posted by a user, their id will be saved in the new instance for that photo. We need to take one more step to get the full access to what Rails provides us.

class Photo < ApplicationRecord
  belongs_to :user
end

class User < ApplicationRecord
  has_many :photos
end

The belongs_to and has_many macros are the last step we need to finalize the relationship between the two models. Now we can do things like this:

user = User.first
user.photos
#will return all photos that belong to that user

The first line of code above gets us the first instance of a User and saves it in the user variable. You can then chain .photos to that user to return all the photos that were posted by that specific user. Rails allows us to retrieve all those photos quickly and efficiently instead of getting all the photo instances and finding all the ones with the matching user_id. Makes it much simpler for us coders, so we can focus on more complicated parts of our code instead of the simpler things. You can also find the user associated with each photo in a similar way.

photo = Photo.first
photo.user
#will return the user that owns that photo

This code will find the user that posted that photo and return it. This is a quick summary of a one-to-many relationship, and how to instantiate it in Ruby.

Many-To-Many Relationship

Now let's think of an example to highlight a many-to-many relationship. If we had an application where a student can join clubs and catch up with club news. We could have two model students and clubs. A student can be in many clubs, a club can have many students in it. In rails in order to create a many-to-many relationship between these two, we would need a joins table. To create a joins table we would do the following:

rails g model StudentClub student_id:integer club_id:integer

This table's only job is store the the foreign keys for the student and club so rails can do the heavy lifting and create those associations for us. It is important to pay attention to syntax when creating the join table. It must be a combination of the two model names, as shown above. Now we must add the correct macros in the model files.

class StudentClub < ApplicationRecord
  belongs_to :student
  belongs_to :club
end

class Student < ApplicationRecord
  has_many :student_clubs
  has_many :clubs, through: :student_clubs
end

class Club < ApplicationRecord
  has_many :student_clubs
  has_many :students, through: :student_clubs
end

Once you have added the above code to your files you are able to do the following:

student = Student.first
club = Club.first
student.clubs
#will return all clubs student is apart of
club.students
#will return all student in the club

Make sure to pay attention to the syntax for everything because Rails needs that to make the associations work properly.

One-To-One Relationship

The last relationship that will be discussed is a one-to-one relationship. This particular relationship probably won't be used as much as the last two, but it is still important to know. The example that will be used is the relationship between a state and its capital city. A state has one capital city and a capital city belongs to that state. The relationship can be defined with the following code:

class State < ApplicationRecord
  has_one :capital
end

class Capital < ApplicationRecord
  belongs_to :state
end

You can then access the associated information in the ways we demonstrated earlier.

Conclusion

The three relationships we discussed above are very important to understand in order to properly define your database in a way that works efficiently.

Resources

Object Oriented Programming

Sana Mohiuddin — Tue, 02 Aug 2022 07:04:00 +0000

As a beginner programmer, it is important to understand what object-oriented programming is and how it can make your program better. Object-oriented programming is a paradigm that centers around using real life by using objects, as the name suggests, and basing the code around these objects. There are languages like Java or Ruby that are OOP languages and are created to be used as such. To better understand object-oriented programming and how to utilize it and the important qualities that come along with it, we will be using Ruby in the examples.

The Basics of OOP

It may seem scary to tackle a new concept that seems so daunting, but it is actually quite simple once it is broken down and with practice. In fact if you have already been using Ruby, you have most likely been using objects and have not known. String, Integer and Array are all examples of different types of objects that are pre-defined for us by Ruby.

str = "This is an object"

The above example is how you may be used to creating a new string, but you can also do it by writing the following:

str = String.new("This is an object")

This may look a bit different but it is doing the same thing. The first example is just using a bit of syntactic sugar to make it cleaner and more visually appealing since Strings are a very commonly used object, Ruby helps us out a bit. What we are doing in this example is creating a new instance of the String class and assigning the value to be what is inside the parentheses. You may be wondering what a class is and that is what we will discuss in the next section.

Classes

A class is how you are able to create your own objects. They are essentially a template that will define the properties and methods of an object. Imagine you are building a library, you would need a lot of books. You could create each book individually, and add all the necessary methods and properties. However, all books are essentially the same minus the details. They have a title, authors, number of pages, you can read them, bookmark them, etc. It would be much easier to create a book class, and you create as many book objects as you need to fill your library, with overly repetitive code. Let's start with how to declare a class.

class Book
#code describing class here
end

It is quite straightforward, you simply use the class keyword following the name of you class with the first letter capitalized. If your class name is a combination of multiple words use camel cases to separate the other words. For example, if your class is describing dog toy objects the class name would be DogToy. To signal the end of the class use the end keyword. Between those two elements is where all your code will go. In order to create a book object you would do the following:

mistborn = Book.new

There is that new word again. Whenever you are creating an instance of a class you use the class name followed by the new keyword, and that will create a new instance.

Important elements to have in a class are getter and setter methods for the instance variables. The setter method allows us to set or change the variable, whereas the getter method allows us to retrieve the value of the instance variable. You can type these out or you can use ruby macros that do the heavy lifting for you. They are the attr_writer, attr_reader and attr_accessor macros. attr_writer will define a setter method for a variable, attr_reader will define a getter method, attr_accessor is an even shorter short cut for when you need a getter and setter method for a particular variable. The code snippet below is an example of how you would use these. Each instance variable is separated by a comma.

attr_accessor :title, :author, :num_of_pages, :current_page

The next important item to discuss about classes is the initialize method. The initialize method is not called by its name like you are used to, but instead it is called when you create an instance using the new keyword. You can even use parameters to initialize your instance variables within the method.

def initialize(title, author, num_of_pages)
   @title = title
   @author = author
   @num_of_pages = num_of_pages
   @current_page = 0
end

The @ refers to the instance variable and allows you to set it with the values passed in. If you wanted to create a new book object and pass in those values you would simply add those values after the new keyword.

mistborn = Book.new("Mistborn", "Brandon Sanderson", 792)

Now let's look at an example of all of those elements put together along with some instance methods.

class Book
   attr_accessor :title, :author, :num_of_pages, :current_page

   def initialize(title, author, num_of_pages)
      @title = title
      @author = author
      @num_of_pages = num_of_pages
      @current_page = 0
   end

   def read
      puts "I am reading #{self.title}"
   end

   def bookmark(page)
      self.current_page = page
   end

   def finish
      puts "I am finished reading #{self.title}"
   end
end

We have a fully functional Book class. You should now have an understanding of what almost everything above means and does. The only thing you may not understand is the self keyword. The self keyword allows you to refer to that particular instance.

mistborn = Book.new("Mistborn", "Brandon Sanderson", 792)
mistborn.read
#will output: I am reading Mistborn

The self keyword allows you to access the value within the instance variable in the class. So you can do things like shown above.

Conclusion

You should now be able to create basic classes and have a better understanding of what object-oriented programming is and how it can help your code be less repetitive and more modular. There is still a lot more to OOP, like inheritance and polymorphism, but you are now equipped to tackle those topics.

Resources

Hooks in React

Sana Mohiuddin — Tue, 05 Jul 2022 05:18:40 +0000

React is a powerful tool for javascript users, it is a library that allows us programmers to create user interfaces much more efficiently than just using vanilla javascript. React gives us a way to create our programs declaratively. Declarative programming is determining what you want the end result to be without going step by step. Imperative programming is what you would do with plain old javascript going step by step describing how you would like to manipulate the DOM.

const button = document.createElement('button');
button.textContent = "Click Me";
const body = document.querySelector('body');
body.appendChild(button);

In the above example, the programmer must step by step tell the computer what to do, from creating the button element to finding where it should go and lastly appending it the correct element. With React we can use JSX which is similar to do those same steps quicker.

return(
   <button>Click Me<button>
);

The JSX shown above is then converted using Babel into something the computer can understand. This quick introduction to React is to get you ready for the real topic, and that is hooks. Hooks are special react functions that allow you to essentially "hook" into components' state and lifecycle. There are a multitude of different hooks in React , but the ones we will focus on are the useState and useEffect hook.

The useState Hook

Probably the most important hook that you can use is the useState hook. As was said earlier, hooks are special because they allow you to "hook" into different things. In this case, it will be hooking into the components state. State is a special React object that contains information about data regarding a component. Whenever that data is changed, the component will re-render based on the new data.

How To Use The useState Hook

In order to use the useState, it will need to be imported in the file that you will be using it in, just like you need to import React.

import React from "react";

The above example shows how to import React, but we need to add another detail to be able to utilize the useState hook.

import React, { useState } from "react";

With that line of code, we are all ready to begin. Consider the code snippet below:

import React from "react";

function MyButton() {
   function handleClick() {
      console.log("On");
   }

   return (
      <div>
         <h2>Click the Button</h2>
         <button onClick={handleClick}>Off</button>
      </div>
   );
}

We have a component called MyButton that has a button that when you click it, it will print on the console "On". However, what if we want the button text to change between "On" and "Off" based on when the user clicks it. We can do that by implementing the useState hook.

import React, { useState } from "react";

function MyButton() {
   const [isOn, setIsOn] = useState(false);

   function handleClick() {
      setIsOn(!isOn);
   }

   return (
      <div>
         <h2>Click the Button</h2>
         <button onClick={handleClick}>
            {isOn ? "On" : "Off"}
         </button>
      </div>
   );
}

Some of the code above may look new, the first line of the function is where you initialize state. It may look strange but we declare it with a de-structured array, because when you use the useState hook, it returns two things. First a variable that holds the current state, and second a setter function to change the value of the state. Always use the setter function, do not set it directly with the variable. One of the perks of the setter function, is when it is called and state is changed the component will re-render itself. In the example above the button has a text that changes based on state using conditional rendering. Whenever the button is clicked the text should fluctuate between "On" and "Off", without needing to refresh the page. This is just one of the ways to use the useState hook, it is a very helpful tool that makes your website more responsive and user friendly.

The useEffect Hook

The useEffect hook by default, runs a set of statements every time the component renders. Just like with the useState hook, you need to import it, in order to be able to use it.

import React, { useEffect } from "react";

There are many different uses for the useEffect. One example could be to set a timer that restarts each time the component re-renders. Take a look below to see an example of the useEffect being used below.

useEffect(() => {
   console.log("Component has be rendered");
});

This is just a quick example to show the syntax of the useEffect hook. Within the call of the hook is a function that will be run at every component render, as previously stated. However, sometimes you do not want the function to run at every render, but only once or sometimes. This can be accomplished with a dependency array that is put down as the second parameter of the useEffect hook function call.

useEffect(() => {
   console.log("Count has been changed");
}, [count]);

When there is a variable within the dependency array, the function will run the first time the component renders, as well as each time the value of the variable changes. There can be multiple values in the array. There can also be no values in the dependency array, which would cause the function to run only the first time it is rendered. An important use of an empty dependency array is when you are fetching data from an API, you usually only need to that once initially.

Conclusion

Hooks are a valuable tool to use when programming in React. Hopefully, you have learned enough and can get to practicing, because remember practice makes perfect.

Resources

Callback Functions: Do we Need Them?

Sana Mohiuddin — Mon, 23 May 2022 04:50:34 +0000

Before we can dive into the complexity that is a callback function, let us first define what a function is. A function is a set of statements that usually take in data (in the form of parameters) and returns a result. It has to be called in order to for the set of statements to occur.

function hello(name) {
  console.log(`Hello ${name}!`);
}

If you wanted to call the hello function above you would need to write the following code:

hello('Sara');
//log: Hello Sara!

The form of calling a function is the function name and set of parentheses after. Inside those parentheses if there are any parameters associated with the function, you may pass the necessary values as arguments. In the case of the above example, "Sara" is passed to the hello function, which leads to "Hello Sara!" being logged. Now that we know the basics of a function and how to call it, let's look into callback functions.

What is a Callback Function?

A callback function is a function that is passed as an argument, and will be called in the set of statements of the higher-order function. The higher-order function in the code snippet below is createNewNum, as you can see one of the parameters is labeled callback. When createNewNum is called sumNums is passed as an argument. It is called within the higher-order function.

function createNewNum(num1, num2, num3, callback) {
  const newNum = callback(num1, num2, num3);
  console.log(`My number is ${newNum}`);
}

function sumNums(num1, num2, num3) {
    return num1 + num2 + num3;
}

createNewNum(1, 2, 3, sumNums);
//log: My number is 6

This is just one example of the many ways you can use a callback function.

Using Callback while Handling Events

One of the most common ways is JavaScript to utilize a callback function is when you are working with an event listener. Let us imagine we have a button and we want it to log a message to the user when it is clicked.

button.addEventListener('click', handleBtnClick);

function handleBtnClick(event) {
  console.log('I have been clicked');
}

If you take a deeper look at the code above, you may be able to see that handleBtnClick is a callback function. It is an argument passed to the addEventListener function. Once the button that is being "listened" to has been clicked it will call the handleBtnClick function and execute the set of statements within it.

You can begin to see how valuable callbacks can be, and how they can be used in many different places. You may begin to wonder how we are able to pass functions as an argument. That is what we will explore in the next section.

Why are Callback Functions Possible?

The reason we are able to pass functions as an argument is because of the nature of the JavaScript language. In JavaScript, functions are object, specifically they are first-class objects. Objects in JavaScript are a little different than objects in Object-Oriented Languages. Because of this, we can do a lot of different things that other languages do not permit. For example, a function can be assigned to a variable as shown below.

const hello = function(name) {
  console.log(`Hello ${name}!`);
}

hello('Sara');
//log: Hello Sara!

You can also return a function within another function, and of course the reason for this post, you can pass a function as an argument. Now that we are more familiar with what a callback function is, how it works and why they are possible let's look at a few more example of when we might use them.

Using Callback to Iterate Arrays

Iterating over an array is one of the most important skills a developer must be able to do. If you need to find something within the array or manipulate each element of the array, looping through the array will be necessary in doing so. JavaScript provides you with some built-in methods that help you do just that. The most simple is the for...of, which allows you to iterate over each element in the array and do something with that element. However, the methods we will look at are the array iterator methods that use callback functions. These methods are the .find, .filter, .map and .reduce. For the purpose of this post we will take a deeper look at the .filter method and how it uses a callback function to produce the intended result. This particular method will search through the array and return a new array that contains the elements that pass some requirement that is set by the callback function. For example what if we want to find all the elements that are divisible by 2 in an array.

const numArray = [1, 6, 7, 3, 25, 20, 8, 9];

const newArray = numArray.filter(divisbleByTwo);

function divisbleByTwo(num) {
  return num % 2 === 0;
}

console.log(newArray);
//log: [6, 20, 8];

In the code snippet, the argument being passed to the filter array is a function that is called within the filter array to produce the results that are shown. You may also create a function within the parentheses, instead of declaring it separately if you know that you won't need the function in other part of your code. You can even use an arrow function instead of the function declaration. If you are new to JavaScript, there is an example of an arrow function below.

const numArray = [1, 6, 7, 3, 25, 20, 8, 9];

const newArray = numArray.filter((num) => {
  return num % 2 === 0;
});

console.log(newArray);
//log: [6, 20, 8];

This is a much shorter and concise way of doing what was done in the last code block and producing the same result. You can make it even shorter and omit the pair of parenthesis around num because there is only one parameter and bringing the return statement up to the same line. Now you know some cool ways to use callback functions, let's delve deeper onto why they are needed.

Why Use Callback Functions?

Callback functions are necessary because of the need for some code to run asynchronous. Asynchronous means that for that particular code, it will won't run when the file is originally executed, but when something happens. Lets look at the event handling example again:

button.addEventListener('click', handleBtnClick);

function handleBtnClick(event) {
  console.log('I have been clicked');
}

The handleBtnClick function work asynchronously, it does not log "I have been clicked" until the function has been physically clicked by the user. By using callback functions we are able to execute any number of instructions when certain events occur. Those events may also be initiated when a certain time has passed by using the .setTimeout function.

Conclusion

I hope by the time you are reading this you have a better understanding of what a callback function is, how it is used and why we use it. They are an important and exciting tool to implement in your own code in order to make your code more interactive.

Resources

FlatIron Journey: The Beginning

Sana Mohiuddin — Sat, 21 May 2022 21:19:58 +0000

Growing up adults seemed almost obligated to ask the question, "what do you want to be when you grow up?" I have never really known what I wanted to do. Or maybe the issue was that I wanted to do everything. My answer was always changing, it went from dentist to astrophysicist to teacher to doctor to...you get the idea. Before I even started college my major switched 4 times, and when I began, I settled for wanting to go to medical school.

It was the choice the majority of my family made so it became my career choice by default. However, by my senior of college, my complete lack of interest in the medical field made is abundantly clear that it was not correct path for me. I did a lot of soul searching and finally found a path that made sense for me. That path was software development and computer science. I got about 2 years into my new degree and my eagerness to start a career became more apparent. So, I began to do more research and that is where FlatIron comes in. The concept of bootcamps was new to me and I did not know much about it. However, the more research I did, the more I could see this was the right choice for me.

I am currently about 4 weeks into the Software Engineering Flex Program. I have added JavaScript, HTML, CSS and so many other skills to my skillset in just this short amount of time, and I cannot wait to learn even more throughout this course.