DEV Community: Alexa Gamil

A Reflection of My First Year as a Software Engineer

Alexa Gamil — Sat, 30 Apr 2022 23:59:49 +0000

Twelve months ago, it was my first day as a Software Engineer at my very first tech job since graduating from a coding boot camp. Previously I was in hospitality for about eight years, so honestly, I still find myself in disbelief whenever this dawns on me. I didn’t really know what to expect. Everything was new, the work culture, my colleagues, and the work itself. I eagerly stepped into this new world with one thing certain on my mind, the best chance I could give myself is by doing the best that I could while staying genuine to who I am. In the short twelve months, I’ve gotten a taste of what it means to be enjoying the work that I do while living the life I’m working for. And packed in that one year were challenges, learnings, and a lot to be grateful for. I’m hoping to give insight to people who are looking into transitioning into the tech industry, who are just starting their technical careers, or to anyone who may find value in my experience. This is a reflection of my one year as a software engineer.

One of the biggest challenges I’ve faced was navigating adjustments. Working in hospitality, I was used to coming to work, doing the work, and doing it again the next day. It sounds like how a normal day should be in the kind of work that I do now but for some time it wasn’t. A major part of the labor in my old job was physical and now all of the work that I do now is in the mind. I went from 8+ hours of moving around to 8+ hours of sedentary work staring into space, constantly calculating and problem-solving. The big adjustment was finding a way to turn off my mind and separate work from my personal life. I find myself thinking all the time as if my mind has a mind of its own. Even at times when I shouldn’t be anymore, like sleeping. There were nights when I struggled to fall asleep because my mind was either still computing how to build a feature or retracing the steps of how a bug was produced. I’ve also made the mistake of trying to crank out a solution by staring at the same code for hours. I was unaware of the mental toll until it was happening. Maybe, I was also in denial that you could get tired of doing something you enjoy doing. Honestly, it took me some time to really understand this. I was excited, eager, and motivated, that I drove myself into burning out without even knowing it. It was one of those things I didn’t fully understand until it happened to me. I eventually came to a solution. I helped myself by aligning certain scenarios and spaces that send a message to my brain, it’s time to slow down. A couple of examples are hanging out with family, when I’m not around the perimeter of my workspace, or just watching Netflix. Although I made some strides, I’m aware it's still a work in progress. I see the importance of actually, mentally, taking a break. The value of mental health days became apparent.

The next challenge that stood out to me is the occasional uninvited visit from the imposter. It’s invigorating to be surrounded by smart people but sometimes I find myself unconsciously discounting my own value, especially on days when I felt like I didn’t produce anything. These days are either when I have hit a wall, trying to learn multiple technologies and their intricacies at cheetah-like speed, or have found myself in a rabbit hole, completely lost, unsure of what the next step should be. As much as I don’t like those days, those days were the key to me reaching out and asking questions inside and outside of my team. It led me to the door of collaboration. The time spent I thought was wasted by producing nothing was crucial in forming questions that indicate my own research and findings. The imposter likes to single me out as if the work that I do can only be done solely by me and if I don’t know how to do it then I don’t belong here. It also led me to communicate and allow myself to be vulnerable to my colleagues and my mentors. Through this, I was also able to form relationships and build trust. Lastly because of the imposter, I started writing my dev journal. They were my highs, my lows, and my evolving goals assessed from the highs and lows. It helped me see my progress and provided evidence to the imposter that it was time to depart. It can be difficult to see and think clearly when the visits happen, but each time, I just come out of it stronger and wiser. I accepted that the imposter doesn’t go away. I stopped trying to prevent it from coming in, instead, I embrace it with open arms, ready to learn something from the challenge.

Although these challenges I went through were my own, I must say that I didn’t go through them alone. I had a strong support system at home, but it was an even stronger impact when support was coming directly from work. One of my ways of staying genuine to who I am is being able to communicate transparently with my managers, Kevin and Aaron. I’m grateful that I’m able to be completely honest when asked “How are you doing?” without worrying that vulnerability will be judged and looked down upon. I don’t think my managers grasp the entirety of how helpful those 1:1s have been to my journey. I’m grateful for the collaborating nature of our whole organization, especially when asking other teams for help in terms of pair programming or debugging. The one hour they’ve taken out of their day has been impactful not only in problem-solving but also in dealing with the imposter. I’m grateful for the unlimited sick and mental health days I could take when I need to take a breath and take a break. I’m grateful for the work culture and work events which allowed me to get to know and make friends with colleagues who are outside my team. It's probably obvious that I am grateful to be working at Volley as my very first tech job. Maybe to some people, all these things are something every company should have by default, but all of these were new and unfamiliar to me. Throughout this year, I surpassed these challenges through a culmination of my work and my colleagues, but what kept me grounded and going above all else is gratitude.

Every now and then when I need a boost of confidence, I go through my dev journal. It’s a testament to the steady growth that I sometimes fail to recognize. I absolute found joy in collaborating when I started off pair programming with my colleague, Micko, who became my work best friend. Shortly after, I started writing small features on my own. Over the next couple of months, I noticed I was building more complex features than the previous. And just recently we pushed a new voice user experience of our product, Backchannel, written in tandem by myself and my awesomely talented teammate, Will. I used to be intimidated creating pull requests (code changes), let alone reading the organization’s internal plugins’ codebase. In the past year, I’ve made upstream changes and I’ve contributed to 8 of them! I used to be quiet in our team meetings and now I’m confidently asking not just the “Hows” but also the “Whys”. I went from not knowing how and where to look for bugs to developing a system when debugging. I used to be afraid to deploy and now I’m deploying at least once a week. And lastly, just a couple of months ago I had the opportunity to contribute to our own apprentice program based on my own experience as a junior engineer. With that said, I also started mentoring a junior engineer who also did a career transition like me. I do get the occasional self-doubt of “what ifs?” in my head, because I know there are a lot of things I still don’t know. However, every time that we pair program and I was able to teach my mentee something is validation on its own. Each of these tasks was once daunting but with time and practice that slowly faded away and has been absolutely validating and rewarding.

I am in awe. Looking back on the last twelve months, I can’t help but feel a sense of pride. I have learned so much mentally, emotionally, and technically. These paragraphs are not nearly enough to thoroughly describe the experience I went through. I realized that I touched more on the mental and emotional aspects of the job than the technical parts. The very core of the work that I do is having a clear and open mind. If my mind is occupied with these challenges, I won’t be able to do my job at my best. I learned the meaning and significance of work-life balance and know that work will always be there tomorrow. I learned to welcome the imposter because it has only made me persevere even more. I learned to be patient because adding skills to my tool belt naturally just takes time. The technologies I was trying to cram in the first couple of months, I steadily learned and implemented in the last twelve months. I have a better understanding of how the puzzle pieces fit together. Learning the tools and technologies we use is always challenging, but as long as I address the challenges along the way, it should not hinder me from continuously learning. My experience from the past year has made me the software engineer that I am today. I am genuinely happy that I pushed through the doubts and believed that I was more than what I thought I was capable of. I look forward to embracing the unknown in an environment of constant change because no matter the outcome, there’s always something to learn.

What is a Set() ?

Alexa Gamil — Mon, 12 Apr 2021 17:12:41 +0000

Set is a data structure that lets you store a collection of UNIQUE values of any type. What I need to emphasize here is that it only allows you to store UNIQUE values. They are similar to Array in the sense that both are a data collection but there are major differences between them.

Set	Array
Collection of values of any data	Collection of values of any data
Store unique values	Values may occur more than once
Ordered by insertion	Indexed order
Does not allow random access	Retrieve elements using index
Cannot be reordered	Can be reordered
Only has limited methods	Array has a LOT of methods

You can only add values to the end	You can add elements anywhere

How to create a new Set()

new Set()
// Set(0) {}

You can also pass in iterable objects when creating sets.


const harryPotter = new Set([“Sorcerer’s Stone”, “Chamber of Secrets”, “Prisoner of Azkaban”])
// undefined
harryPotter
// Set(3) {“Sorcerer’s Stone”, “Chamber of Secrets”, “Prisoner of Azkaban”}

const noDuplicates = new Set(“banana”)
// undefined
noDuplicates
// Set(3) {‘b’, ‘a’, ‘n’}

As you can see from above, when we passed in a string of banana, it only stored the characters b a n

How to find the size of a Set, use the `size` property

const harryPotter = newSet([“Sorcerer’s Stone”, “Chamber of Secrets”, “Prisoner of Azkaban”])
harryPotter.size
// 3

How to add a value to a Set, use the `add` method

const harryPotter = new Set([“Sorcerer’s Stone”, “Chamber of Secrets”, “Prisoner of Azkaban”])
//undefined
harryPotter.add(“Goblet of Fire”)
//Set(4) {“Sorcerer’s Stone”, “Chamber of Secrets”, “Prisoner of Azkaban”, “Goblet of Fire”}

Try adding the same title again, the set will not grow.

Hot to delete a value from a Set, use the `delete` method

harryPotter.delete(“Goblet of Fire”)
// true
harryPotter 
// Set(3) {"Sorcerer's Stone", "Chamber of Secrets", "Prisoner of Azkaban"}

You can also clear the whole set with the clear method

harryPotter.clear()
// undefined
harryPotter
// Set(0) {}

How to find out if a value exists in a Set, use the `has` method

const harryPotter = newSet([“Sorcerer’s Stone”, “Chamber of Secrets”, “Prisoner of Azkaban”])

harryPotter.has(“Sorcerer’s Stone”)
// true
harryPotter.has(“Order of the Phoenix”)
// false

It’s also important to note that has method only takes a single operation. Lookup time is constant time or O(1).

Sets are iterable

We can use for loops, for...of, and for..each

const harryPotter = new Set(["Sorcerer's Stone", "Chamber of Secrets", "Prisoner of Azkaban"])
// undefined

harryPotter.forEach(book =>  console.log(`Harry Potter and the ${book}`))
// Harry Potter and the Sorcerer's Stone
// Harry Potter and the Chamber of Secrets
// Harry Potter and the Prisoner of Azkaban
// undefined

How to convert a Set object to an Array object

Using the Array.from() method

const harryPotter = new Set(["Sorcerer's Stone", "Chamber of Secrets", "Prisoner of Azkaban"])
// undefined

const booksArr = Array.from(harryPotter)
booksArr
// ["Sorcerer's Stone", "Chamber of Secrets", "Prisoner of Azkaban"]

Or using the spread operator (...)

const booksArr = [...harryPotter]
// undefined
booksArr
// ["Sorcerer's Stone", "Chamber of Secrets", "Prisoner of Azkaban"]

When to use sets?

Here’s a simple example. You asked your friends for vacation ideas.
In an array, it could look like this.

const locationsArr = [“Hawaii”, “Bali”, “New York”, “Japan”, “Hawaii”, “Japan”, “Bali”, “Thailand” ]

But what you really want is this

const locationsSet = new Set(locationsArr)
// undefined
locationsSet
// Set(5) {"Hawaii", "Bali", "New York", "Japan", "Thailand"}

Sets are not meant to replace Arrays. The purpose of Sets is to hold UNIQUE values. Take note that it is also case-sensitive.

new Set("Alexa") // Set(5) {"A", "l", "e", "x", "a"}

Thanks for reading!

rails new API with PostgreSQL w/rails g resource

Alexa Gamil — Mon, 05 Apr 2021 20:47:25 +0000

At the beginning of my Flatiron journey, we were writing in Ruby. We were taught about models and associations. Soon enough we were learning the magic of Rails. I think the best part was learning how to use all of that and be able to create my own API.

My first take-home challenge is to make an API. I decided to leave this here to remember the exact syntax when I create a new one in the future. In this example, we’re going to create a Books API

Open your terminal :

Create a directory(folder)

mkdir book-app

mkdir command is used to make a new directory. It is followed by whatever you want to name that directory.

Change directory

cd book-app

Create API with PostgreSQL

rails new books-api --api --database=postgresql

rails new : creates a new Rails application
books-api : is whatever you want to name your Rails application
--api : this is the api flag. We use this flag to create a lightweight version of a Rails application. Since this project will only be used as an API, this will leave out modules that are used for a browser application.
--database=postgresql : this flag tells our Rails application which database we are using

Change directory to your Rails API

cd books-api

And type code . to open that project in your code editor

This is a good time to create a new repository in your GitHub if you haven't already :)

Bonus
I'm going to create 3 models. Author, Book, and Like.
The relationship will be the following :

Looking at this diagram, you may spot a problem already. After creating all these models and you go on rails c or rails console, accessing author.books would be a problem. author.books could be author has many books OR author has many books through likes. Before we tackle this, let's generate our models first.

Generate models, controllers, migrations through Resource

rails g resource <model_name> <attribute>:<data_type>

rails g resource Author name age:integer

rails g resource Book title author:references

rails g resource Like author:references book:references

rails g : short term for rails generate
resource : this creates a number of files for us:

a model file
a controller file
resources call in the routes.rb.
a migration file that creates a new database table for the attributes we passed

references : this adds the line belongs_to:<model> and creates a foreign key column to that table. In our Like model if we didn't include those references it would look like this.

rails g resource Like author_id:integer book_id:integer

However, doing so will require you to add the belongs_to relationship in your models.

You may have noticed name and title doesn't have a data type, this is because the default is string

since we configured this app as an API with --api flag, it will skip generating views, helpers, and assets. Otherwise, resource will generate these as well.

Establish associations
If you used the references, you won't have to do anything in like.rb. It should look like this already.

class Like < ApplicationRecord
    belongs_to :author
    belongs_to :book
end

In your book.rb, it will have the belongs_to macros there as well

class Book < ApplicationRecord
    belongs_to : author
end

This is how to fix the problem I mentioned earlier.
In your author.rb

class Author < ApplicationRecord
    has_many :books, dependent: :destroy
    has_many :likes, dependent: :destroy 
    has_many :liked_books, through: :likes, source: :book
end

We are using source to call the books liked by the author and call it liked_books instead. So if we run author.liked_books in our console --it is referring to the books that are liked by this author.

dependent: :destroy this will automatically delete the books associated with the author when that author is deleted. If you don't have an author the book should not exist.

Migrate

rails db:create

rails db:migrate

And you're good to go!

In plain English what the heck is Big O?

Alexa Gamil — Mon, 29 Mar 2021 21:22:06 +0000

Intro

To talk about Big O, we have to talk about algorithms. As someone coming from a non-traditional tech background, hearing the word algorithm sounds daunting. Like “Wow the algorithm for this and that was blah blah blah...”
When I learned an algorithm is just a set of instructions for accomplishing a task...I was like...

Here is an example

Make Coffee

Grind Coffee
Brew Coffee
Pour Coffee in a cup

The first time I heard about Big O was in coding boot camp. Honestly, I was too focused on solving the algorithm by coming up with the shortest code possible and just making it work. So when the talk about performance arises, it was a Big O(n) moment to me, at the time that meant Big Oh no LOL.

After a while, I started to make sense of how to come up with solutions. I liked solving algorithms. The part that I liked most is seeing other people’s approaches and how it differs from mine. Eventually, I started to wonder how can I tell, if my solution is more efficient than another solution? I know that deep down that just making it work is not the answer. And here we are, Talking about Big O!

By no means I’m an expert at this. I am still learning about it but I got over the hump of understanding what Big O is.
I wanted to write about this because I want to introduce Big O in an approachable way. (If you find any discrepancies, please let me know! I'm here to learn as well!) I hope that you get an idea of what Big O is by the end of this post.

Big O

I had this misconception that Big O is measuring how slow or fast an algorithm takes. It's not entirely wrong making it not entirely true either.

When I first googled “What is Big O?”

“Big O notation is a mathematical notation that describes the limiting behavior of a function when the argument tends towards a particular value or infinity. ... ” -Wikipedia

Did you get it? I don’t think you need to keep reading this post if you did. 😅

In plain English?
Big O notation is used to identify the trend of how a runtime of an algorithm grows as the input grows. We refer to this input as “n”.

We are not directly measuring an algorithm's runtime because the speed varies depending on the computer processing the algorithm. We use Big O to analyze the relationship between runtime and input. When n grows, what is the runtime gonna look like?

It's about understanding the number of operations it takes for your algorithm to run as the input(n) increases.

When we’re talking about Big O, we are talking about the worst-case scenario. What is the most time/space my algorithm would require given the worst case input (ie. n=1 versus n=1000)

Examples

let arr = [1,2,3,4,5,6]
const accessFirstElement = (arr) => {
    console.log(arr[0])
}
// 1

This function runs O(1), also known as constant.
No matter what the size of n is, (in this case the length of the array) it does not affect the run time.
n could be 1 or 1000, accessFirstElement would just require 1 operation every time. Hence, constant.

let arr = [1,2,3,4,5,6]
const printEvenElements = (arr) => {
    for (let ele of arr){
        if(ele % 2 === 0){
            console.log(ele)
        }
    }
}
//2
//4
//6

This printEvenElements runs O(n), also known as linear. The runtime increases as n increases, again were referring to the length of the array. This is to say the number of loops increases as the size of the array increases
because printEvenElements has to access every single element in the array.

let's just say we only want to print the even elements of the first 4 elements of the array.

let arr = [1,2,3,4,5,6]
const printEvenElements2 = (arr) => {
    for (let i = 0 ; i <= 3 ; i++){
        let ele = arr[i]
        if(ele % 2 === 0){
            console.log(ele)
        }
    }
}
//2
//4

Do you think this function is O(n) linear or O(1) constant?

If you answered O(1)constant, you are correct. n doesn't matter here. No matter how small or big the length is, the function will run 4 operations(4 loops) every time
because of this i<=3. Continue to loop as long as this is true, it is not dependent on n.

Space complexity

We also use Big O to analyze the space the algorithm takes as the size of the input increases. In other words, how much memory is required to run our algorithm?

When analyzing space complexity we don’t care about the space taken by the input. We care about what our function does with that input and how it affects the memory required for the algorithm to run.

That may be a lot to take in. I probably could explain that better but we have examples below

Things to keep in mind

Booleans, numbers, undefined, null are constant space. It doesn’t matter if it's true, false, 1, or 1000.
Strings, arrays, and objects require O(n) or linear space where n is the length of the string, array, or the number of keys for objects.

Examples

let arr = [1,2,3,4,5,6]
const accessFirstElement = (arr) => {
    let first = arr[0]
    return first
}

This function takes O(1) constant space.

No matter what the size of the arr is doesn't have an impact on the space it’s taking up. Every time this code runs, we always just have a number assigned to a variable.

Here is another example

let arr = [1,2,3,4,5,6]
const squareElements = (arr) => {
    let even = []
    for (let ele of arr){
        even.push(ele * ele)
    }
    return even
}

This function takes O(n) linear space.
First, we made a new array. Ok, so that's constant.
But what we care about is how space is affected by the input.
Here as the input array length grows, our even array gets longer as well. We are squaring every element and pushing that squared element to the new array. The space it takes is in direct proportion to the input(array length).

Conclusion

When I first started learning how to code, I wanted to write code as short as possible. Learning Big O clarified that shorter or cleaner code does not mean it is more ideal than a longer code. We use Big O notation to analyze time and space complexity. How are runtime and space affected as the input grows? I think having Big O in mind while writing code, allows someone to write more efficient code as opposed to code that just works. I hope this was helpful!

10 basic VS code shortcuts on Mac

Alexa Gamil — Mon, 22 Mar 2021 21:04:59 +0000

Visual Studio Code is a lightweight free, open-source, code editor that is available to Windows, Linux, and macOS. It supports many programming languages including Ruby, JavaScript, Python, C++, and more. Also, take note that this is different than Visual Studio.

As I use VS Code for my code editor, I learned more shortcuts to write code efficiently. If you’re just starting to learn how to code, these tips will be extremely helpful in your coding journey! I know it has been for me =]

Command ⌘ + D

This lets you select the word at the cursor or the next occurrence of the selected word.

This was useful whenever I come up with a better variable name. It saves me time having to manually update the rest of the code.

Two things to keep in mind, it is NOT case sensitive and it is NOT only looking for the EXACT word, the search term could a be part of another word.

Command ⌘ + F

Opens a widget and allows you to find text on the entire file it was run, the results will be highlighted. You can press enter to highlight the next occurrence.

You can also choose to use this to replace the highlighted words by clicking on the arrow on the left side of the input.

Again it is NOT case sensitive. This was especially helpful when I’m looking for a specific function in a sea of code.

Shift ⇧ + Command ⌘ + F

Same functionality with Command F but this allows you to search over ALL the files in the current directory you are in.

Command ⌘ + \ (backslash)

This command lets you do two things. If you click anywhere on your code editor, this will split your editor to your right. If you click on your terminal, it splits your terminal.

I used this a lot when I needed to look into my rails console without having to kill the server.

Command ⌘ + P

Lets you quickly open files by typing in the filename

Command ⌘ + B

This lets you hide the directories, If you want a wider screen

Option + ↑ or ↓

Lets you move highlighted block of code(or the current line the cursor is on) up and down

Option + Shift ⇧ + ↓

A shortcut for copy&paste of the highlighted code or the current line the cursor is on

Command ⌘ + ]

This allows you to indent the code where the cursor is OR the highlighted chunk of code and Command ⌘ + [ to do the reverse. Also, take note that you also don’t have to highlight the whole line of code.

Command ⌘ + ← or →

To get to the start or the end of the current line of code your cursor is on. Command ⌘ + ↑ or ↓ To get to the start or the end of the file you are on.

I know this one is here, but it took me a couple of months to notice that it was even there. This closes your editors and this collapses your folders without manually closing them one by one.

Conclusion

Hit Command ⌘ + K S to view all the shortcuts there or click here

Honestly, as a beginner, looking at that pdf was overwhelming so I thought it would be a good idea to write specific ones that have been useful to me. These 10 shortcuts alone made it more efficient for me to code. Practice these shortcuts and it will become second nature in no time. Happy Coding!

Function Component React Form Submission on Netlify

Alexa Gamil — Mon, 15 Mar 2021 19:33:45 +0000

I recently built my first version of my portfolio and deployed it on Netlify. I included a simple contact form for anyone who wants to reach me. In this blog, I will share how I used the built-in form handling that comes with deploying through Netlify.

I’m going to start this blog assuming that you already have a react-app created and you already ran (npm start or yarn start) and build my form from scratch. You’ll also need to make a Netlify account using the Git provider that is hosting your source code. It is free and it gives you 100 form submissions/month.

I think that’s enough for the intro, let’s get to coding!

Step 1 - Create a Form Function

I will be creating 3 input fields. One for name, email, and message. This is my starter code.

import React from 'react'
const Form = () => {

return (
<div >
  <h1> Sample Form </h1>
   <form >
     <div className="form-inputs">
        <label htmlFor="name" className="form-label">
          Name
        </label>     
        <input 
           type="text" 
           name="name" 
           id="name" 
           className="form-input"/> 
     </div>
     <div className="form-inputs">
        <label htmlFor="email" className="form-label">
          Email
        </label>     
        <input 
           type="text" 
           name="email" 
           id="email" 
           className="form-input"/> 
     </div>
     <div className="form-inputs">
        <label htmlFor="message" className="form-label">
          Message
        </label>     
        <textarea  
           name="message" 
           id="message" 
           className="form-input"/> 
     </div>
     <button type="submit" className="form-input-btn">
       Send
     </button>
   </form>
<div>
    )
}
export default Form

I have a div that’s holding my form. Each input is wrapped inside its own div. Make sure the htmlFor attribute on the label and the name attribute on the input match. For message, we are using textarea for multi-line text input. And of course, we have a button with the type=”submit”

Step 2 - Stateful Function Component

We want to make this form stateful so that we could validate the form for errors before submitting it. We don’t want an inbox full of blank messages. We need to import useState() hook from react.

If you’re not familiar with the useState(), it allows us to create a “state variable” in a function component and it returns the current state and a function that updates that specific state. More info here

import {useState} from 'react'

We would then call the useState() like so:

const [formData, setFormData] = useState({
        name: "",
        email: "",
        message: ""
    })

We are declaring a “state variable” called formData. The argument to the useState() is the initial state of our variable. In this case, our initial state is an object with the keys matching our input names, each pointing to a value of an empty string. setFormData will be the function that will update formData.

We can now add two attributes to our inputs:

value={formData.[key in the obj that matches the name]}

an onChange event={handleChange}

 <input 
  type="text" 
  name="name" 
  id="name" 
  className="form-input" 
  value={formData.name} 
  onChange={handleChange}/>  

 <input 
  type="email" 
  name="email" 
  id="email" 
  className="form-input" 
  value={formData.email} 
  onChange={handleChange}/>

 <textarea  
  name="message" 
  id="message" 
  className="form-input" 
  value={formData.message} 
  onChange={handleChange} />

And here is the code for the handleChange()

const handleChange = e => {
  const { name, value } = e.target
  setFormData({...formData, 
            [name]: value
        })
    }

As you can see, we’re destructuring e.target and assigning the name and value to variables and then were calling setFormData() to update the state using those variables.

And now we have a stateful react function component! Go ahead and console.log(formData) anywhere in the function before return and type away in your inputs.

Step 3 Creating Validations

If you didn’t code your form from scratch and you got your form from sites like react-bootstrap, you might not have to do this. Some forms might come with form validations already. Anyway moving on!

Were going to call useState again and declare a variable called errors with the initial state of an empty object. And I also wrote a function called validate

 const [errors, setErrors] = useState({})

 const validate = (formData) => {
        let formErrors = {}
        if(!formData.name){
            formErrors.name = "Name required"
        }
        if(!formData.email){
            formErrors.email = "Email required"
        } 
        if(!formData.message){
            formErrors.message = "Message is required"
        }
        return formErrors
    }

This function takes in our formData variable as a parameter. Then we declare another empty object inside called, formErrors. We then have conditions that check if each key in formData is pointing to an empty string. If it is, this means that our input field is empty then we would add a key-value pair to our formErrors object. The key is the name of the input and the value is the exact “error message”. I hope that makes sense lol. Validate returns our formErrors object.

Also under each input field, we are putting this code.

<input 
  type="text" 
  name="name" 
  id="name" 
  className="form-input" 
  value={formData.name} 
  onChange={handleChange}/>
{errors.name && <p>{errors.name}</p>}  

 <input 
  type="email" 
  name="email" 
  id="email" 
  className="form-input" 
  value={formData.email} 
  onChange={handleChange}/>
{errors.email && <p>{errors.email}</p>}

 <textarea  
  name="message" 
  id="message" 
  className="form-input" 
  value={formData.message} 
  onChange={handleChange} />
 {errors.message && <p>{errors.message}</p>}

The && is a shortcut that if errors.name exists then return this p tag, which will be rendering our error message.

Now that we have this setup, I’ll explain what this is for in the next step.

Step 4.1 Handle Submit

This time we’ll declare a variable called isSubmitted with the initial state set to false.

const [isSubmitted, setIsSubmitted] = useState(false)

const handleSubmit = e => {
  setErrors(validate(formData))
  setIsSubmitted(true)
  e.preventDefault();
  }

As you can see from above, I also built our handleSubmit function.
The function does three things:

it will call the setErrors() and pass in the return value of the validate function which will take formData as a parameter

we will also set isSubmitted to true

we are preventing default

Let's go ahead add the onSubmit event to our form

<form onSubmit={handleSubmit}>

Step 4.2 Handle Submit (useEffect)

Next we are importing the useEffect hook from react

import {useState, useEffect} from 'react'

If you are not familiar with the useEffect(), it is basically equivalent to componentDidMount() and componentDidUpdate() combined together (and in some cases where it’s needed componentWillUnmount())

We will call useEffect to do our POST request.

useEffect(() => {
 if(Object.keys(errors).length === 0 && isSubmitted){
  fetch("/", {
   method: "POST",
   headers: { "Content-Type": "application/x-www-form-urlencoded" },
   body: encode({ "form-name": "contact-form", ...formData })
   })
   .then(() => alert("Success!"))
   .then(() => setIsSubmitted(false))
   .then(() => setFormData({name: "", email: "",  message: ""}))
   .catch(error => alert(error))}
    }, [errors, formData, isSubmitted])

From the code above, we passed a function to useEffect(), this function could be referred to as the “effect”. Inside that function is a condition to check if the errors object is empty AND isSubmmitted set to true. If it is, do the fetch request.

You probably noticed the body: encode({}) - this is a function provided from the Netlify docs.

Above the useEffect(), copy and paste this exact code.

const encode = (data) => {
 return Object.keys(data)
   .map(key => encodeURIComponent(key) + "=" + 
   encodeURIComponent(data[key]))
   .join("&");

What could vary here is the “contact-form” and the ...formData. I will tackle the “contact-form” in a bit. For the formData, all we’re doing here is using the spread operator. We are then passing it to the encode function and the return value will be the body of the POST request.

This is followed by a “Success” alert, setting back isSubmitted to false, and clearing out the input fields by setting the formData to empty strings.

useEffect() will apply the effect (which is the function passed) every render. In our case, we want it to skip applying effect unless the errors obj and isSubmitted state were changed. Basically when someone presses the submit button because handleSubmit is where these variables change.

This is why we are passing an array as our second argument to useEffect(). When our component re-renders, useEffect() compares those variables to the previous variables from the last rerender. If the variables match it will skip the effect, if they don’t then React will run the effect. Essentially in class components, we would write a componentDidUpdate() and a comparison with prevProps or prevState. More info on useEffect here

Step 5 Helping the Netlify bots

The Netlify bots that look for the netlify attribute only know how to parse HTML. So to give them a little help we are including this code inside our index.html (This file is inside the public directory, just above the src directory.) I put it just below the opening <body> tag

 <body>
    <form name="contact-form" netlify netlify-honeypot="bot-field" hidden>
      <input type="text" name="name" />
      <input type="email" name="email" />
      <textarea name="message"></textarea>
    </form>

Remember the contact-form from earlier? The form name has to match what was being encoded in our POST request. In our case it is called “contact-form” You can call it something else, but they just have to match. Otherwise, this won’t work. The second part is that all the names for the inputs and textareas also have to match. In case you’re wondering, labels are not required in this case since this is a hidden form.

To recap, this is my whole code for the form function.

import React from 'react'
import {useState, useEffect} from 'react'
import './form.css'


const Form = () => {

    const [formData, setFormData] = useState({
        name: "",
        email: "",
        message: ""
    })

    const handleChange = e => {
        const { name, value } = e.target
        setFormData({
            ...formData, 
            [name]: value
        })
    }

    const [errors, setErrors] = useState({})
    const validate = (formData) => {
        let formErrors = {}
        if(!formData.name){
            formErrors.name = "Name required"
        }
        if(!formData.email){
            formErrors.email = "Email required"
        } 
        if(!formData.message){
            formErrors.message = "Message is required"
        }
        return formErrors
    }

    const [isSubmitted, setIsSubmitted] = useState(false)

    const handleSubmit = e => {
        setErrors(validate(formData))
        setIsSubmitted(true)
        e.preventDefault();

    }

    const encode = (data) => {
        return Object.keys(data)
            .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
            .join("&");
      }

    useEffect(() => {
        if(Object.keys(errors).length === 0 && isSubmitted){

            fetch("/", {
                method: "POST",
                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                body: encode({ "form-name": "contact-form", ...formData })
            })
            .then(() => alert("Success!"))
            .then(() => setIsSubmitted(false))
            .then(() => setFormData({name: "", email: "",  message: ""}))
            .catch(error => alert(error))
        }
    }, [errors, formData, isSubmitted])

    // console.log(errors, formData)
    return (
        <div >
            <h1> Sample Form </h1>
            <form onSubmit={handleSubmit}>
                <div className="form-inputs">
                    <label htmlFor="name" className="form-label">
                        Name
                    </label>     
                    <input 
                        type="text" 
                        name="name" 
                        id="name" 
                        className="form-input" 
                        value={formData.name} 
                        onChange={handleChange}/>
                    {errors.name && <p>{errors.name}</p>}
                </div>
                <div className="form-inputs">
                    <label htmlFor="email" className="form-label">
                        Email
                    </label>     
                    <input 
                        type="email" 
                        name="email" 
                        id="email" 
                        className="form-input" 
                        value={formData.email} 
                        onChange={handleChange}/>
                    {errors.email && <p>{errors.email}</p>}
                </div>
                <div className="form-inputs">
                    <label htmlFor="message" className="form-label">
                        Message
                    </label>     
                    <textarea  
                        name="message" 
                        id="message" 
                        className="form-input" 
                        value={formData.message} onChange={handleChange} />
                    {errors.message && <p>{errors.message}</p>}
                </div>
                <button type="submit" className="form-input-btn">
                    Send
                </button>
            </form>
        </div>

    )
}

export default Form

This is my optional CSS I added. Not anything fancy!

// form.css

  .form-inputs p {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: #f00e0e;
  }

  .form-label {
    display: inline-block;
    font-size: 0.9rem;
    margin-bottom: 6px;
  }

Step 6 Deploy on Netlify

Let's git add . git commit -m "form done" and git push

Below is a 1 minute video of how I deployed this simple form app on Netlify.

Know that there are tons of other ways to go about this, there are sites like Email.js and Pageclip.co that get the job done. I decided to do it through Netlify because I'm already deploying my portfolio there and I wanted it all in one spot. It was also my first time using Netlify and I love how user-friendly it is. I hope this blog was helpful!

Here is the link to the docs Netlify

My Coding Bootcamp Experience

Alexa Gamil — Fri, 29 Jan 2021 23:08:51 +0000

It has been a journey getting into this program. I’m not just talking about the process of getting into the school but the whole process of deciding whether this is for me or not. I had to find the strong ‘Why?’ I knew that this program is demanding of time, effort, and money. Maybe for others it was an easier decision but for me it was a lot of going back and forth.

To give you a background about me, I’m 29 years old who has been working in hospitality for about 10 years. I didn’t go to college after high school. I took the route of joining the military and when I came back to the civilian world, life circumstances led me in the hospitality industry. I enjoyed the fast pace. I enjoyed learning about the service. I enjoyed making meaningful and memorable experiences happen. However as time went by, I started questioning my future in the field. Ultimately I decided that it was not something I wanted to keep doing for the rest of my life. It wasn’t as fulfilling anymore, I felt like I needed to do MORE.

I look back to when I was in high school and I had this thought that I wanted to work with computers but just didn't know where. I also remember when I took the ASVAB test in the military. The ASVAB is a multiple choice aptitude test that measures strengths. It ultimately determines which areas an enlist would be potentially successful in and I excelled the most under engineering. I put two and two together coupled with conversations with my tech friends and I found myself looking into coding bootcamp.

The decision of going back to school was definitely a leap of faith. I was scared to go back because it has been such a long time since I have gone to school. I continuously doubted my ability whether it was something I can keep up with. Questions flooded my head all the time.

"What if it’s not for me and I’m just wasting my time?"
"What if I don’t get the material and fall behind?"
"Should I just try to find another job instead?"
"Can I actually do this?"

It was easy to get stuck once you start questioning yourself. There were even days when I find myself not doing anything because the battle in my head was just too immense. Other than the inner battles, I was fortunate to have such a strong support system from family and friends who consistently encouraged me to get out of my comfort zone.

After narrowing it down to General Assembly, Hack Reactor, and Flatiron School, I started taking the free prep classes provided by each school. It took about 3 months going through every single prep course. It was all self paced so I had the freedom to go hard one day and go light the next day. It took a lot of self motivation because of course the doubts never left my head. However I found myself more and more excited as I got to learn new things everyday. The prep ranged from learning about the basics of HTML, CSS, and Javascript. I was able to compare the teaching style of each school based on the prep provided. Personally concluded that Flatiron delivered the material in way that fit my learning style.

The process of getting accepted in order:

Take the 25 hour prep course
Talk to a school representative to determine whether the school is a good fit for both the student and the school.
Get through the entrance coding challenge
Once accepted, do another 80+ hours worth of pre-work before day 1.

I suggest to really take the time to understand the basics before day one because everything that you’ll learn moving forward will build off on that, so a concrete foundation is important.

DON’T chase the green check marks as fast as you can, but instead AIM for a solid COMPREHENSION for each check mark.

Here are the main key points that I would say are crucial on this journey :

A strong ‘Why?’
Believing in yourself that you can do it
Committing your time and putting in the effort
A solid support system

There’s more, but we can start off with that!

I decided that I’m going to write about my experience after every phase to hopefully give insight to prospective students. I will be writing about my experience after every phase to be as thorough as I can. Let’s go!

Phase 1 (Oct 5 - Oct 23, 2020)

I would say that the hardest part of the program yet is Phase 1 specifically week 1. A lot of this has to do with adjusting. I went from self studying at my own pace to following a schedule of 9am - 6pm on zoom and even more hours to keep up with the material. Starting right off the bat on day 1, a sea of readings and labs awaited in my canvas profile. I’m not even exaggerating when I say a sea….it was….A LOT. Day two comes in and a new set of readings and labs were yet again released. I started to panic and really got scared that I might not be able to handle the work load. On the same day I was already considering that “maybe full time is not for me”, “maybe I should have considered part time or self-paced”, “maybe I should read the refund policy again. I kid you not that every single night of week 1, I cried. I was so stressed that it prevented me from learning. I couldn’t focus because I was too worried.

As every day passed by, I slowly adjusted. It was absolutely rough, as imposter syndrome was literally on skin the minute something doesn’t make sense to me. The first coding challenge happened on week 2, on day 8 of school and I was scared as sh**. You know what’s the best feeling ever? Knowing myself that I did well, the minute that I finished the code challenge! It was also then when my perspective changed from “Can I do this?” to ”Maybe I can do this…”

Week 3 comes around the corner and it was project week. New nerves were introduced, because you start to question, “Do I know enough to deliver what was asked of us?” I was paired with a cohort mate, who had prior coding experience. By default this would make me even more nervous and intimidated, but he didn’t make me feel any of those things. We had fun as we spent a whole week working on the project together. I also felt like I really contributed and at the same time learned a lot from him. Next thing you know, we were on our last day of Phase 1 presenting our projects. Three weeks passed so slow and fast at the same time.

The whole phase was a rollercoaster of emotions. Feeling behind all the time started to become a normal feeling. Working 12-14 hours a day also became the new schedule. I eventually stopped fighting myself when a concept doesn’t make sense the first time. I have to keep reminding myself that “It’s ok, you’ll read more about it, you’ll practice more, and you’ll eventually get it”. I could say though that I got through phase 1 because I have my partner, Alicia who let me cry in her arms and also who encouraged me to keep going as soon as I stopped crying. It wasn’t too long when imposter syndrome kicked in again…

”Did I understand the material enough to be able to move on to phase 2?”

Phase 2 (Oct 26 - Nov 13, 2020)

To answer my last question—Yes! I understood enough to keep going with more exposure and practice!

Ahh…I felt like Phase 2 just went by so fast. That is not to say because it was easy. Haha! Nothing about this program is easy. For me Phase 2 did not start on Monday of Week 4, mine started on the weekend in between end of phase 1 and beginning of phase 2. Why? Because a shit ton of labs greeted me after accepting the invitation for Phase 2 on Canvas. Canvas is the learning platform we are currently using.

By this time in the program I noticed that I was already getting used to the workload, the long hours, and endless labs. I also started easing off chasing green check marks. There really is no benefit getting the check mark if you don’t understand the concept. There were times where I found myself reading the same readme more than 2 times to make sure I grasp the material. In the beginning of the phase we were introduced briefly to Rack and Sinatra. After going over how things worked manually, we were shown Rails Magic. It’s really no joke when I say “magic”. Rails can do soOOOo many things under the hood to make the life of a developer so much easier.

Next thing you know it was week 5 and everyone was nervous about the coding challenge and the 2020 Presidential election(relevant? of course!). I started to make sense of how I can create a web application by using Ruby on Rails. As always the coding challenge was nerve wracking but finishing it and passing it was so rejuvenating.

The highlight of this whole phase for me is project week. I was fortunate to be in a group with 2 other people who were really easy to work with, Marisa and Steven. I think project week for me was enjoyable because from the beginning we had a clear goal and every day our app progressed and new features were added along the way. I looked forward to each day of project week and it was the best feeling ever. I know for a fact that a big part of that is because I was in a solid group. What a difference when it’s just all chill, good vibes and everyone’s ideas are heard. I will say the best week I have ever had yet in the program was project week of this phase.

After everyone’s project were presented, we were told that we are officially hirable junior developers. Did I feel like I was? NOPE! Did I still feel lost throughout the phase? HELL YES! Did I think I still don’t know anything? HELL YES! But in reality, I have learned A TON. I didn’t feel like I was hirable because there is just SO MUCH to learn! It makes me anxious and excited knowing this. Finishing Phase 2 and starting Phase 3 is basically halfway mark of our 15 week program. Thinking about just having 8 weeks left in the program low-key saddens me but with this in mind, just pushes me to make the most out of this experience.

Hopefully it just continues to get better from here!

Phase 3 (Nov 16 - Dec 8, 2020)

Wow…THINGS DID GET BETTER. I was nervous going into phase 3 (shoot, when am I not nervous to do anything?) Anyway, I was nervous because in this phase we were learning about Javascript. Just when things are starting to make sense in my head using Ruby, now we’re learning a new language. However, knowing how one language works and the logic behind how code works, made it easier for me to pick up JS. After all, we did start with JS before we got accepted into the school during bootcamp prep.

In this phase we are still utilizing Ruby and Rails but using it differently. We are using it as our backend server and JS will be the one in charge of rendering elements on the frontend using data provided by the backend. I found that the labs were not too bad compared to phase 1 and phase 2. I don’t think I ever felt like I was completely lost throughout the phase. All is well and good until… our instructors decided that it was time for us spread our wings and put everything we learned to the test. I was shitting bricks!

We had Thanksgiving in between our coding challenge and before getting approvals for our solo projects. I could not figure what to do at first. I knew some of my cohort mates were doing games and even though I would love to create a game, I just felt like…I couldn’t wrap my head around it. Like where do I even begin? I didn’t like the idea of just doing it blindly, so I decided to create an app that made sense in my head, an app that sells items. What I meant by, “made sense in my head”, I had an idea of where to begin, how I would write my code, and just the flow of data handling between backend and frontend. Honestly I thought my app was too simple compared to the game apps…but when I got started…I was wrong. HAHAHA!!!

I found myself fiddling with a lot of the little things, like making sure that if a user clicks on a white shirt, it should still render a white shirt, it should also populate the dropdown select placeholder element to “white” or where is the best place to put my parent event listener? and how will the listener behave with other listeners around and inside it? We were given a week to work on our projects and I don’t think I slept for more than 4 hours in any of those days.

All the moments when I was awake, I was consistently thinking, asking how to do things and what to do next. It was stressful, frustrating, and addicting all at the same time. At some point I found myself worried because I didn’t find myself stuck in a bug to the point where I would reach out for help. I got worried that my app was too simple to catch any bugs I can’t crush.

I'm grateful for my cohort mates. Doing our own projects in the same breakout room somehow made me feel less lonely. Less scared about hitting any bugs. I know that this played a big piece to my project. To the 12-16 hour days of working every day, I was still working at ease knowing I have people who are more than willing to help whenever I needed it.

This solo project was the result of my hard work for the past two months. This project gave myself a boost in self confidence and validated that I am learning something. I am understanding the concept. And I am able to apply the things I learned and was able to create a functioning decent app. I am so proud of this project and probably one of the first times since I started school that I can say, I’m so proud of me.

Phase 4 (Dec 9 - Jan 8, 2021)

In the morning of day 1 Phase 4, I was asked if I wanted to be a guest speaker for the cohort who’s starting Phase 2 to talk about my experience. As nervous as I was (HAHAHA <— that's my nervous laugh), I took the challenge. I look back to my Phase 2 experience and I was crumbling. I wanted to somehow give some insight to the people who are probably feeling the way I felt back then.

Fueled by the excitement of creating my own solo project from Phase 3 and the holidays coming up, I started the phase in high spirits. Naturally, we were greeted with a big chunk of labs tackling the React framework. Our instructors told us that the React framework will be helpful in a lot of ways, like making our code DRY (Don’t Repeat Yourself - principle to reduce repetition of code) or writing components (chunks of code) that are reusable throughout the app. I look back to chat messages with friends in the cohort and found myself once again struggling and worried. I expected myself to pick up the concept right away. After two days of being introduced to this new technology,I couldn’t differentiate state and props, imposter syndrome kicked in. The same questions filled my mind, “What if I’m the only one not getting it?” “Why is it not clicking?” etc etc.

My answer to this was do more labs. I knew that I was starting to worry because it is something I am not familiar with and the only way to get through that was learn it. I went through the labs slowly but surely and with more practice, just like anything else, it became clearer. As I learned more about how React provides a specific way to organize and structure my application, I started to really appreciate it.

After two months being in the online immersive, it became apparent that the whole cohort seemed like family. I was blessed to be able to make real connections and make friends. I don’t think I have ever talked about this part in detail and I should because it played a tremendous part in staying focused and being motivated. Aside from the moral support that I got from my family, the friends that I made helped me emotionally and mentally to keep going no matter how intense the program got. I found a circle of friends who alleviated the negative thoughts. I was able to focus more on the work that needed to be done. Just knowing that I have people to talk to and understand exactly what I’m going through was crucial to maximizing the learning experience of this program.

Speaking of friends, we had the amazing opportunity to work on our phase 4 project together. We created our own version of Tamagotchi and named our app MAKEGOTCHI (maa-keh-gaa-chee). The first four letters are the initials of all four contributors. To be honest, I was slightly intimidated at first because I wanted to make sure that I have something to contribute. I look up to every single one of them because they all have the drive and are highly motivated.

We planned things out in a structured manner. Everyone had their own feature that they are responsible for. Every couple days we would merge our own branches and see our app grow bigger. We all coded hard the first couple of days before the holiday break. Although we worked a couple more during the break, we made sure that we still had time to enjoy the holidays. By the time we got back from break, our app was basically a full functioning app. I was grateful for this experience. It was an environment where everyone’s idea was heard. We were collaboratively working together to achieve the minimum viable product and the stretch goals we set in place. I can’t think of any struggles at all doing this project besides git. I will never understand git. It’s my mission to eventually git it. (LOL)

Once again, another phase that put me through a roller coaster. Phase 4 overall validated my ability to learn new concepts. I was able to create an app out of something new, along with the concepts that we learned in the previous phases. And as for my emotional health, I know I am someone who feels a lot and I cannot thrive feeling lonely and isolated. I remedied that by making friends. Although I didn’t get the chance to learn about everyone in a deeper personal level, I have this confidence that I could hit up any one of them and know that they will be more than happy to be of any help.

One phase away from finishing the program. Somehow I can’t believe I made it this far, but I did.

Phase 5 (Jan 11 - Jan 28, 2021)

I’m still in disbelief that 17 weeks has passed. I don’t even know how to start this blog, there’s just so much to say…

One of the requirements in the program to graduate is to write a blog for each phase. We get 1 freebie to write a personal one and 4 other technical ones. I decided to keep my personal blog for last because I wanted to document my experience. I am someone who likes to write especially at times of dealing with change. The year of 2020 alone was an enormous change to everyone’s lives. I remember crying and feeling lost a week after they announced shelter in place. I knew then that I had to do something different.

Right after Phase 4 project presentation, we jumped right into the expectations talk for phase 5. Maybe I was distracted by my imposter syndrome thoughts but apparently in the first week of the program we were told that phase 5 is solely dedicated to building our capstone project. So when we were reminded of this towards the end of phase 4, it took me by surprise. The expectations talk was basically due dates of things to get done during phase 5. It was supposed to introduce us to a work environment setting where we are responsible of our own projects and have to follow these set due dates.

It was intimidating, nerve-wracking, overwhelming, anything you can think of that ends with an “-ing” (anxieting, haha!) Why, you may ask? LET ME TELL YOU.

There were a set of deliverables that your project is required to have. As I map out my plan of attack and write the steps I need to do, the list got longer and longer. This stressed me out greatly knowing that I, MYSELF, is responsible to execute EVERY. SINGLE. ONE. of these steps.

One of the struggles in creating this project is establishing my models and their associations for my backend. It was important to make sure that this was set up properly because this will also determine the flow of data handling between backend and frontend. Once I figured that main part out, it was just a matter of using and executing everything that I learned in the program and more.

I took the challenge of incorporating Redux in my React Rails App. Redux is a library for managing state commonly used with libraries like React. Redux was introduced to us later on in phase 4 during project week. I didn’t really get the chance to dive into it. With that said, I knew very little about it. I was scared and hesitant at first because I knew I had a lot to do. I wasn’t sure if I could deliver what I intend to whilst learning and incorporating something new to my project. Ultimately I took on the challenge to prove that I can adapt and learn on my own. After all, I’m sure when we all get jobs we will all have to adapt and learn new technologies to be able to contribute something valuable.

Last but not the least is feeling like I was not doing enough. And because of feeling that way, I did not realize that I was dismissing all the hours and hard work I have put into this project. I did not know a single thing about any of this a little over 3 months ago. But I know I did the best that I could, so I’m very proud of what I came up with.

I guess my main advice here for Phase 5 is setting a plan and sticking to it. I expected to get many bugs but I actually enjoy debugging now. I remember being frustrated whenever I get bugs but now that I know where to look depending on the error, I can debug all day. (as long as its not the same bug all day LOL.) Anyway, I had set myself up to do at least 1 full CRUD for every model a day while also still coming up with other ideas to add on my stretch goals. I used Trello to keep track of my progress and every day I made sure I moved AT LEAST one task from my to do list to the finished list. Any progress no matter how big or small, is progress. And the most important thing is give yourself credit because none of this was easy.

I haven’t graduated yet, I’m 3 days away from the capstone project presentation. I still have some things to polish on my app but I am happy with where it’s at.

I…don’t know exactly how I feel about things. I feel like I just now eventually got the hang of this and now the program is almost over. Going through this program has proven to me that there is just so much to learn. This has been an experience like no other. I gauge it and it was somewhat close to how the military bootcamp affected me emotionally and mentally. Except in the military you were told what to do, in this program you are taught how to learn and how to figure out what to do. I’m not selling the school, every person’s background story is different, every experience is going to be different.

I look back three and half months ago and I am in awe of what I know now compared to what I knew then. I had zero coding experience and I just built a functioning app on my own. I am extremely proud of that.

If you’re still reading this, Wow…that’s crazy! Thank you for reading!

This was my experience and the journey is just beginning…

PS. I will update this blog later and post the video demos of the past projects.

Until the next blog!

React setState()

Alexa Gamil — Tue, 05 Jan 2021 20:28:48 +0000

As our cohort started learning about React, one of the first concepts we learned is the use of state and props. Without any prior knowledge, it was definitely mind boggling in the beginning. Of course it started sinking in after multiple lab practices. Hopefully you’ll find this blog helpful in making better sense of it.

State vs Props

Before we move forward, I wanted to differentiate State and Props because honestly it was the first thing I had trouble understanding.

State is data maintained inside a specific component while Props is data passed in from a parent component.

The main difference is which component owns that data. Props are read only and can only be updated by the child component IF a callback function is also passed down as props. The callback function will then trigger the upstream update of the parent’s component state.

Now let’s talk about the function that will update the component’s state.

TLDR

setState() is asynchronous

pass a function instead of an object if you are doing some kind of calculations based on the actual current state

setState() can accept a callback function

setState()

Using setState() is basically making an appointment to update the component’s state. I say appointment, because setState() is asynchronous. It means calling setState() will not update EXACTLY after you call it. Look at the example code below :

import React, { Component } from 'react';

class App extends Component {

    state = { count : 0 }

    handleClick = () => {
        this.setState({count: this.state.count + 1 })
        this.setState({count: this.state.count + 1 })
        this.setState({count: this.state.count + 1 })
        console.log(this.state.count)
        // this.state.count logs 0 in the first click
        // this.state.count logs 1 after the second click
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>Add 3</button>
            </div>
        );
    }
}

export default App

You might expect that after clicking the button, handleClick will update the state and then console.log 3, but in fact you will get 0. Also clicking the button the second time will console.log 1 Why is this happening? Is it ignoring the other 2 setState() calls? It is not.

React intentionally waits and batches setState() calls for better performance. The main reason behind this is because when a component’s state is altered, the component re-renders in response. This is important, let’s say a click of a button calls a setState() to a child component AND a setState() to it’s parent component, you don’t want the child to re-render twice. As your app becomes more complex, it can be very expensive and in turn might cause your browser to become unresponsive.

prevState()

Keeping in mind of its asynchronous nature, this makes this.state unreliable. Going back to our previous example, each setState() call looks at this.state before it even gets updated. if you are updating state with values that depend on the current state pass a function() in setState() instead of an object.

Tweaking our code from above, look at the code below:

import React, { Component } from 'react';

class App extends Component {

    state = { count : 0 }

    handleClick = () => {
        this.setState(prevState => {
            return {count: prevState.count + 1 }})


        this.setState(prevState => {
            return {count: prevState.count + 1 }})


        this.setState(prevState => {
            return {count: prevState.count + 1 }})
        console.log(this.state.count)
        // this.state.count logs 0 in the first click
        // this.state.count logs 3 after the second click
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>Add 3</button>
            </div>
        );
    }
}

export default App

Clicking the button the first time will still console.log 0 but clicking it again the second time and the component re-renders, it will log 3. You can also use this if you’re updating an existing array or object in state by using the spread operator like so :

state = { arr : [{obj1}, {obj2}, {obj3}]  }

handleClick = () => {
    this.setState(prevState => {
      return {array: [...prevState.arr, {newObj}]}
    })
}

sidenote:

The function above takes the the most updated this.state.arr

Uses the ... spread operator to make a copy of that arr

Adds a new object

Updates state using setState()

The benefit of using a function instead of an object gives us access to the most updated state and will queue the setState() calls so that they run in order.

Callback()

Now you’re wondering, we’re still getting “0” after our first click.

Last but not least, how do you access the updated state after setState() actually does what it’s supposed to do? setState() can take a callback function.

Last tweak at the function below:

 state = { count : 0 }

    handleClick = () => {
        this.setState(prevState => {
            return {count: prevState.count + 3 }}, () => {
                console.log(this.state.count)
                // this.state.count logs 3
            })
            console.log(this.state.count)
            //this.state.count logs 0

    }

The second console.log is outside the scope therefore running before setState() finishes setting the state, which is why it logs 0.

Basically the callback function runs AFTER setState() happens, therefore in this scope giving you access to the most updated state.

Conclusion

I hope this somewhat made things clearer. Thank you so much for reading and please reach out to me if you any comments or suggestions.

Simple explanation of event.currentTarget, event.target and event delegation

Alexa Gamil — Sun, 29 Nov 2020 22:51:42 +0000

What makes a great web page? It's not just the content of the web page or the structure of how it looks, it's also how the page is responding based on the user activity. To understand what the title of this blog is, we have to understand what makes a web page interactive.

Javascript provides something called event listeners. Its main objective is the name itself, it listens for events and when the event occurs then something happens. In other words when an event like a "click" or a "mouseover" is triggered then a specified written function is executed, this is where the addEventListener() method comes in.

addEventListener()

To add an event listener we need an element to attach the listener to. For our example we are going to attach a listener to a div that has two buttons nested inside it A.K.A children elements

//HTML
<div>
     <button id="post">Post</button>
     <button id="edit">Edit</button>
</div>

Assuming this div is the first div in our document, in our JS file we will need to grab the element from the DOM using document.querySelector().

sidenote: document.querySelector() only returns the very first element that matches the specified selector, if there are multiple divs I suggest adding a .class or an #id to the div.

     const div = document.querySelector("div")
     div.addEventListener("click", (e) => handleButton(e))

The first parameter passed is the event we are listening for, in this case the event is click, the second parameter passed is the callback function that gets invoked when the click event occurs.

sidenote: There is a third optional parameter that goes into addEventListener() method. If you would like to learn more about it, click.

We'll also define handleButton

function handleButton(e){
     if (e.target.id === "post"){
           postSomething
       }
     else if (e.target.id === "edit"){
            editSomething
        }
}

What is e? and why is it being passed? e here is a variable representing the event object that occurred. We want to pass it because it carries valuable information about what exactly happened.

Having all this set up, we can now step back and see what is going on here...

We attached the listener to the div element.
We defined what is the exact event we are listening to and what will happen when the event occurs.
We passed the event object (a snapshot of what exactly happened and uses the information attached along with it.)
We then use a property of that event object we passed, event.target.id to do something specific, in this case, either postSomething or editSomething

What is event.currentTarget?

event.currentTarget is a property of the event object which identifies the specific HTML element the event listener was attached to. In our case, the div is our event.currentTarget

What is event.target?

event.target is a property of the event object which identifies the specific HTML element on which the event occurred. In our conditional the ids are referring to the button ids, so whichever button is clicked that button is the event.target

Having these two properties gives us access to the parent element and its children elements. With this in our back pocket it provides us an easier way to manipulate the DOM however we want to.

How does event delegation fit into this?

Event delegation is a Javascript technique where an event listener is delegated to the parent HTML element instead of adding multiple of the same event listeners to its children elements.

In our example, we exercised event delegation. We can definitely do this a whole different way by grabbing both buttons from the DOM and attaching an event listener to each one of them. But what happens if you have ten buttons? or more? The code will start looking messy and you will also have ten event listeners as opposed to just one parent listener. More event listeners means more memory usage which then decreases performance.

Event delegation is also helpful when adding event listeners to elements that do not exist on the DOM after the page loads.

A simple example of this is creating an <li> based on user input and you want an event listener on each <li> The idea is by adding an event listener to its parent element <ul> or <ol> for every <li> that is on the DOM and that are yet to exist, an event listener is automatically placed over them.

CONCLUSION

event.currentTarget is where the event is attached to.
event.target is where the exact event happened.
event delegation will make for a cleaner code and better performance.

When I first started learning about event listeners I was very confused on what these three things meant. This blog barely touches the surface but hopefully this helps clear up the basics.

Adding a Log in, Log out feature using Ruby on Rails

Alexa Gamil — Mon, 09 Nov 2020 00:29:52 +0000

Hi everyone! As for my second blog, I wanted to go through the step by step process of how we created a log in and a log out feature to our simple app project. I'm going to try my best to keep it concise!

Step 1 - Creating a user

In order to be able to log in you need to create a user model. In our User model we added username as one of the columns.

rails g resource User username

Here I am generating a User resource with a column username and because I didn't provide a data type for username, the default data type is a string. This provides me the User MVC(Model, Views, Controller), the migration, and the routes.

#app/config/routes.rb

resources :users

Since the only goal is to 'register' a user we just need to render a form and submit the inputted data to the database. The controller-action pair users#new will display the form and once the submit button is clicked a post request will be sent to users#create which will create the user object and save it to the database for us. Because we're only using those routes for this example let's specify our routes real quick to:

#config/routes.rb

resources :users, only:[:new, :create]

Display a form and submit data

Our UsersController should look like this:

#app/controllers/users_controller.rb

class UsersController < ApplicationController
    def new
        @user = User.new
    end

And we're going to use form_for:

#app/views/users/new.html.erb

<h1>Sign up</h1>
<%= form_for @user do |f|%>
<%= f.label :username%>
<%= f.text_field :username%>
<%= f.submit%>
<% end %>

The inputted data in the text field will then be posted to the users#create action. Our create action will look like this:

#app/controllers/users_controller.rb

class UsersController < ApplicationController
    def new
      ...
    def create
      @user = User.new(username:params[:user][:username])
      @user.save
      redirect_to user_path(@user)
    end

You might ask "Why do we have to call User.new and @user.save instead of just using User.create?" A quick explanation to this is because you don't want bad data to be stored in your database. An example of a bad data is a duplicate of email used or even a blank email. It would cause a lot of bugs down the line. A quick fix to this is adding validation to your User model.

#app/models/user.rb

class User < ApplicationRecord
validates :username, presence: true, uniqueness: true
...
end

@user.save will check those validations first to see if username is not blank(presence) and if username is not already in the database(uniqueness). Our create action will now look like this:

#app/controllers/users_controller.rb

def create
        @user = User.new(username:params[:user][:username])
        if @user.save
            redirect_to @user
        else
            render :new
        end
    end

If it passes all validations, it will then be saved to the database and it will redirect us to the @user showpage otherwise we are rendering back the same form.

Step 2 - Create a Sessions_Controller

Through the sessions controller is where we're going to have our login page, login our current user, and log out our user.

rails g controller Sessions

Then we're going to specify our routes

#config/routes.rb

  get '/login', to: 'sessions#new', as: 'login'
  post '/sessions', to: 'sessions#create', as: 'sessions'
  delete '/sessions', to: 'sessions#destroy'

sessions#new will display our log in form:

#app/views/sessions/new.html.erb

<h1>Login</h1>
<%=form_tag (sessions_path) do %>
<%=text_field_tag :email %>
<%=submit_tag %>
<% end %>

We are using the form tag because this form is not based on an active record object. In order for this form to know where to submit the data, we supply the (sessions_path) and once the submit button is clicked, this form will send a post request to the action controller sessions#create.
Going to our sessions controller we will define our #create action:

#app/controllers/sessions_controller.rb

class SessionsController < ApplicationController    

    def new
    end

    def create
        user = User.find_by(username: params[:username])
            session[:user_id] = user.id
            redirect_to user_path(user)
        end

    def destroy
        session.clear
        redirect_to login_path
    end
end

In our create action we are going to grab the user object from the db using the :username provided in the login. We will then make a key in the session called :user_id and assign the user.id as the value. Now that we have this, we can technically say that if there is a session[:user_id] then someone must be logged in and if it is not present then they must be logged out. That is what the destroy method is doing here. Creating a link_to that calls that action#destroy on the sessions controller will clear the session and therefore logging out the user and redirecting back to the login_path.

 <%=link_to 'Log Out', sessions_path, method: :delete%>

Step 3 - Use the Application_Controller

Since the rest of the controllers inherit from the application controller, we will use this to our advantage to define methods so that all the other controllers can share the same functions.

Here we will define the methods:

#app/controllers/application_controller.rb    

class ApplicationController < ActionController::Base    

    def logged_in?
        session[:user_id] 
    end    

    def require_login
        if !logged_in?
        redirect_to login_path
    end

    def current_user
        @current_user ||= User.find(session[:user_id]) if 
        session[:user_id]
    end

The first method, logged_in? is the method we call to check if the user is logged in.

The second method, require_login is the method we use to basically make certain controller actions inaccessible if a user is not logged in.

The last method, current_user enables us to have access to the specific user object.

The code is written in way so that the first time it is called @current_user is nil, it will then go to the or (||) condition and look into the database, grab that user, and assign that user to itself. The next time it is called @current_user is present and will return the found user the first time it was called.

We are then going to declare some of these methods as helper methods so that these functions are accessible to all views as well.

#app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
    helper_method :current_user
    helper_method :logged_in? 
    before_action :require_login

Remembering that all other controllers inherit from the application controller, declaring a before_action :require_login, also means this before_action applies to all other controllers as well. It means in order for a user to be able to do anything that involves with any of the controllers, a user MUST be logged in.

If you want certain actions to still be accessible you can explicitly do so by going to that specific controller and use skip_before_action:

#app/controllers/users_controller.rb

class UsersController < ApplicationController

skip_before_action :require_login, only:[:new, :create]

In this case because our users#new and users#create are responsible for signing up an account, we want them to be accessible without being logged in.

Step 4 - Adding Passwords

When storing passwords in the database, you want them to be encrypted so for any chance your database gets hacked, the hacker will not have access to the real passwords. This is when the has_secure_password come in!

In order to use this you need to add gem 'bcrypt' (usually in your gemfile already, just need to uncomment it) and this will also require a column in your user model called password_digest which will store the encrypted password. has_secure_password will allow us to write the password and encrypt it before storing it to password_digest.

With that said we create a new migration to add password_digest column to the Users table. Once that's all migrated, we need to declare it in the User model

#app/models.user.rb

class User < ApplicationRecord
    has_secure_password
...
end

We then need to update our sign up form:

#app/views/users/new.html.erb

<h1>Sign up</h1>
<%= form_for @user do |f|%>
<%= f.label :user%>
<%= f.text_field :user%>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit%>
<% end %>

Then were going to update the users#create by:

Adding the password(even though we called it password_digest in our users we could still refer to it as password)
and also logging them in after they created their accountsession[:user_id] = @user.id

#app/controllers/users_controller.rb

def create
        @user = User.new(username:params[:user][:username])
        @user.password = params[:user][:password]
        if @user.save
            session[:user_id] = @user.id
            redirect_to @user
        else
            render :new
        end
    end

Now we're going to update the our log in form:

#app/views/sessions/new.html.erb

<h1>Login</h1>
<%=form_tag (sessions_path) do %>
<%=text_field_tag :user %>
<%=text_field_tag :password %>
<%=submit_tag %>
<% end %>

has_secure_password also give us the method .authenticate which takes in a string and checks to see if the encrypted password matches the string passed in. If the string matches it will return the user object otherwise it will return false. The string comes from the inputted data when a user fills in the login form displayed bysessions#new which will then send a post request to sessions#create.

Lastly we will update the sessions#create:

#app/controllers/sessions_controller.rb

class SessionsController < ApplicationController    

    def new
    end

    def create
        user = User.find_by(username: params[:username])
        if user && user.authenticate(params[:password])
            session[:user_id] = user.id
            redirect_to user_path(user)
        else 
            render 'login_path'
        end
    end

    def destroy
        session.clear
        redirect_to login_path
    end
end

Now our create action is not only checking if the user exists in the db. If it exists then it authenticates the password and if it returns a user object we log them in, otherwise we send them back to the login page.

Conclusion

Hopefully this helps you set up your log in and log out features to your app. I'm sure there are tons of other ways to do it, but for now this is what my newbie brain can offer! If you have other suggestions please reach out to me, I'd love to learn!

Reduce() Method in Javascript

Alexa Gamil — Thu, 22 Oct 2020 01:35:30 +0000

The reduce() method was one of the array methods that intrigued me when I was a complete noob learning Javascript. After looking over it's syntax and terminology, I ran as far away as possible and never looked back! (haha!)

I was too focused on trying not to forget my semi-colons (;) at the time so I said, I’ll get back to that when it looks less bewildering.

So here I am writing my very first blog about this actually amazing method!

Description

The reduce() method reduces an array to a single output.

To add more context, a reducer function is executed on each element of the array, then returns a single output value after it iterates on the very last element. And by single output value, it could be an integer, an array, or an object.

You can think of it as reduception, You have a reduce method and inside that method you have a reducer method. (What?!)

I think breaking down the syntax makes this easier to understand!

Syntax

array.reduce(callback( accumulator, currentValue, index, array ) {
  // return accumulator result from executing something
},[initialValue]);

Parameters

Callback is the reducer. It is the function that is executed to each element of the array.

When you think about it, it is “calling back” or “looping back” the function for each element of the array.

Callback takes four arguments: accumulator, currentValue, index, array.

a. Accumulator is the running total that accumulates the callback’s return values.

b. CurrentValue is the current element the callback is executing on.

c. Index is the current element’s index the callback is executing on (optional)

d. Array is the array that the method was called on. (optional)

The Index and Array arguments are optional. The reduce method will still work without them. We will look at an example later where we will need them.

initialValue (if provided) is the value passed as the initial accumulator to the first callback. This is optional depending on what output you’re trying to achieve. If you’re just trying to combine numbers together and you don’t provide an initial value, the very first index of the array becomes the default value of the accumulator and the first callback will be executed on the second index of the array.

Now that we all got the boring(but important!) stuff down, let’s get to it!

Example 1 - Getting the sum of integers in an array

Normally to get the sum of the integers in an array you would use a for loop.

let array = [5, 10, 15, 20]; 
let total = 0

for(let i = 0; i < array.length; i++){total += array[i]}
total // 50

Using reduce() to get the same answer.

const array = [5, 10, 15, 20]; 
const sum = array.reduce(function(acc, cv){return acc + cv})
sum // 50

Using reduce we didn’t need to define a variable outside the scope, the reduce method have an accumulator(acc) that remembers the return value for each callback.

Since our main goal is to just add numbers, we didn’t need to provide an initial value. When not provided the accumulator’s(acc) initial value is set to the first element of the array which is 5.

The first callback(function) will be executed on the second element, so the currentValue is 10.

In this function our callback is to add the currentValue to the accumulator. This will happen for every single element. Once it’s done executing the callback for each element, the method will return the final accumulator value.

Makes sense right? (...no? Ok keep reading!)

Example - 2 Reducing an array of objects

You can also use reduce() on an array of objects and get one object in the end!

Let’s say you decided to start keeping track of your diet.
(I made up an inaccurate table representing each meal, so don’t judge me)

const meals = [
  {meal: 'breakfast', carbs: 90, fat: 200, calories: 600,},
  {meal: 'lunch', carbs: 70, fat: 100, calories: 400},
  {meal: 'salad', carbs: 100, fat: 80, calories: 800,}
];

We will use reduce() to output an object that will have the total daily intake for each category (carbs, fat, and calories).

const intake = meals.reduce(
  ({ carbs, fat, calories }, meal) => ({
    carbs: carbs + meal.carbs,
    fat: fat + meal.fat,
    calories: calories + meal.calories,
  }),
  {carbs: 0, fat: 0, calories: 0}
)
intake // { carbs: 260, fat: 380, calories: 1800 }

Since we wanted a specific output we declared an Object as the initial value of total(accumulator). We also provided categories as keys pointing to a value of 0. For each callback, we grab the value of .carbs, .fat, and .calories and add it to the appropriate property. In the end you should have one Object that has the total for each category.

Still reading?...Hang in there, I have one more!

Example 3 - Getting the average

let grades = [90, 85, 94, 87];

We can also use reduce() on this array to get the average

let average = grades.reduce((total, grade, index, array) => {
 return total += grade/array.length
}, 0);
 average // 89

If you notice, we added the index and the array as arguments. Having access to the original array this method is called on, allows us to divide the accumulator's total by array's length and get the average. Even though we didn't use the index here, we had to provide it. If we didn't provide the index and only passed the array, our method will think that we are calling index.length instead of array.length

Conclusion

Besides the examples I provided, you can also use reduce to create a tally, flatten arrays, replacement of map() method, and so many more! What I like about it is being able to write different functions inside the callback and repeat the same logic for each element of the array.

I am no expert on the reduce() method, every day I am still learning of various ways to use it.

As a beginner in coding I am writing about it to inform other beginners like me that although it may look intimidating, learning it could only be to your advantage. The reduce() method is powerful.

DEV Community: Alexa Gamil

A Reflection of My First Year as a Software Engineer

What is a Set() ?

How to create a new Set()

How to find the size of a Set, use the size property

How to add a value to a Set, use the add method

Hot to delete a value from a Set, use the delete method

How to find out if a value exists in a Set, use the has method

Sets are iterable

How to convert a Set object to an Array object

When to use sets?

rails new API with PostgreSQL w/rails g resource

In plain English what the heck is Big O?

Intro

Make Coffee

Big O

Examples

Space complexity

Examples

Conclusion

10 basic VS code shortcuts on Mac

Conclusion

Function Component React Form Submission on Netlify

Step 1 - Create a Form Function

Step 2 - Stateful Function Component

Step 3 Creating Validations

Step 4.1 Handle Submit

Step 4.2 Handle Submit (useEffect)

Step 5 Helping the Netlify bots

Step 6 Deploy on Netlify

My Coding Bootcamp Experience

The process of getting accepted in order:

Phase 1 (Oct 5 - Oct 23, 2020)

Phase 2 (Oct 26 - Nov 13, 2020)

Phase 3 (Nov 16 - Dec 8, 2020)

Phase 4 (Dec 9 - Jan 8, 2021)

Phase 5 (Jan 11 - Jan 28, 2021)

React setState()

State vs Props

TLDR

setState()

prevState()

Callback()

Conclusion

Simple explanation of event.currentTarget, event.target and event delegation

addEventListener()

What is event.currentTarget?

What is event.target?

How does event delegation fit into this?

CONCLUSION

Adding a Log in, Log out feature using Ruby on Rails

Step 1 - Creating a user

Display a form and submit data

Step 2 - Create a Sessions_Controller

Step 3 - Use the Application_Controller

Step 4 - Adding Passwords

Conclusion

Reduce() Method in Javascript

Description

Syntax

Parameters

Example 1 - Getting the sum of integers in an array

Example - 2 Reducing an array of objects

Example 3 - Getting the average

Conclusion

How to find the size of a Set, use the `size` property

How to add a value to a Set, use the `add` method

Hot to delete a value from a Set, use the `delete` method

How to find out if a value exists in a Set, use the `has` method