DEV Community: arthurvfain

Things I learned from my Flatiron Capstone Project

arthurvfain — Fri, 08 Oct 2021 05:13:47 +0000

Intro

So here I am, 12 weeks into one of the craziest plunges of my life and it is time to finally jump from the nest, spread my wings, and see what the past four Phases of Flatiron School have taught me, if it was all worth it, and I decided that the best way to find out was to create the App that got me interested in software engineering. If anyone has read my previous blog posts, you may have seen there was a time when I realized I wanted to build things: namely the app that I can say (although in its infancy) has truly come to life. Looking back, I am proud to say that yes, throughout my experience here at Flatiron, I have learned enough to have the basics of my app come to life, but more importantly I have been able to (for the most part) learn how to learn what I need to make my visions real.

Rack-CORS gem

So this all started with a dream of setting out my first web app, from scratch from the ground up, in a way that would be accessible to the outside world. I wanted to this in a way that would mimic my own startup as closely as possible. Thus I decided that the best idea was to deploy from the beginning, and test only through deployed frontend and backend. Without any experience this was a huge mistake, as I encountered issue after issue after issue of things that I have never encountered before. It was very much a trial by fire, and unfortunately sucked quite a large chunk of time (that should have been utilized building out features on the app).

So, one of the things I ran into was this what felt like incessant issue running into CORS errors. Although I haven't been able to fix all the bugs that allow seamless communication between my independently hosted frontend and backend environments, one of the main things that allowed the most basic of communication was the Rack-CORS gem for ruby on rails. All I had to do was add gem 'rack-cors' to my backend gemfile and run bundle install from my terminal. Then, I was free to create my cors.rb file in config/initializers/cors.rb and add

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000', 'http://localhost:3001'

    resource '*',
      headers: :any,
      expose: ['access-token', 'expiry', 'token-type', 'uid', 'client'],
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true
      exposedHeaders: ["Set-Cookie"]
  end
end

And things started to work ! I stopped getting the CORS errors.

Unfortunately, it revealed a larger problem, that I still have yet to find a solution to regarding the saving of session cookies on the browser and then sending them to the backend server, which I am extremely willing to get help with. (please add in the comments if you are knowledgable with that) but ultimately my CORS errors were no longer a problem.

Custom routes with cool params

Sticking with the backend theme, I would like to highlight something I learned and enjoyed using between my frontend and my backend for some interesting fetches. I realized that multiple params can be passed by dynamically creating the path that a fetch would be sent to, in ways that many different values can be passed to the backend without adding anything to the body. for example:

fetch(`http://localhost:3000/reflect/${currentUser.id}/${params.id}`

As you can see, this fetch has two pieces of data string interpolated into the address, that in this case send the information about the logged in user as well as who in the database they are forming a relationship with.

This is handled in the backend by the route:

post '/reflect/:user/:mirror', to: 'reflections#create'

and then processed by the create method in the controller:

reflection = Reflection.create!(user_id: reflection_params[:user], mirror_id: reflection_params[:mirror])

In this case, neither of those id's needed to be sent as part of the POST request body, but are available to the backend controller through params just the same. Any number of simple pieces of data can be passed using a custom route like that. Perhaps it isn't a necessity, but nonetheless I definitely found it cool that this could be done.

#pluck method

When calling up a new entry into my database up, and needing to process it, every time I did a .where to find entries associated with a particular user, all I could get back was ActiveRecord::Relation that I couldn't really work with for my purposes, as my unit of data is a hash composed of keys and integer values. To make things more complicated, my .where could return an ActiveRecord::Relation that may be composed of potentially thousands of entries that all need to be processed to yield a neat one-dimensional array that can be served to the frontend for rendering.

I was at a loss until.... I read about the #pluck method !

#pluck is a ruby on rails method that takes as many arguments as you want, these are the keys that correspond to the desired values to be plucked in the same order the keys (symbols) are passed as arguments to the #pluck method, and returns an array of either the values that correspond to the keys, or a two-dimensional array that contains the desired values nested in an array of arrays, each inner array corresponding to the values plucked from one particular entry in the database, leaving behind all the extra information that is impertinent to the calculations or whatever processing that needs to be done.

#transpose method

The last thing I want to talk about, which I think is the simplest, coolest, and single-handedly most useful, straight-forward, (and dare I say slick) method I have found for my uses was the #transpose method.

So: having used #pluck to generate a two-dimensional array that contains an x amount of arrays structured in such a way that all the first integers correspond to each other, all the second integers correspond to each other, and so on... and ultimately each column has to be compiled into an average. Instead of figuring out how to pull the first member out of each array, average all of them, and then push them into a new array, I fortuitously stumbled upon the #transpose method, that takes an array and magically converts it from

[[ 1, 2, 3, 4, 5 ],
 [ 3, 4, 5, 6, 7 ],
 [ 5, 6, 7, 8, 9 ]]

to:

[[ 1, 3, 5 ],
 [ 2, 4, 6 ],
 [ 3, 5, 7 ],
 [ 4, 6, 8 ],
 [ 5, 7, 9 ]]

which now automatically "combined like terms" and allowed me to quickly map over the outer array and return an array that contains only the averages of the inner arrays, which is what I wanted all along.

[ 3, 4, 5, 6, 7 ]

This may be small, but I can't even imagine how much work it saved me, all with one simple built-in method.

Overall, however small, these are all different little lessons that I never would have learned if I had not embarked on my own independent project. I feel happy, accomplished, and just that much more ready to take on challenges in the future, knowing that I can ask the right questions and utilize resources (such as this one) and feel part of the software development community, where people are extremely helpful and knowledgable, and have all of the collective knowledge at my finger tips.

Fellow coder, you are never alone.

Keeping things safe, using React Router !

arthurvfain — Mon, 02 Aug 2021 17:59:50 +0000

Cybersecurity is extremely important, and when writing apps, keeping things water-tight is harder than ever, with different ways of finding backdoors and other methods of accessing unauthorized information more prevalent, protecting our resources is as important as ever. One of these methods that I encountered is protected routes, through the use of React Router Dom.

At it's most basic level, implementing a protected route is simply placing every component that needs special authorizations in another component that accesses state from the parent and only renders those pages if the parent's state is set to true for a log in.

In order to do this, we must first have all the resources that we want to protect made into components that are passed into our "protector" component as props using a render functionality.

I see this protector component as a "ghost" component almost, as it doesn't have a set shape and takes the place of whatever component is passed to it as props.

See the example below for a boilerplate Protector component.

import React from 'react';
import { Route, useHistory } from 'react-router-dom';

function Protector ({ component: Component, user, ...rest })
{
const history = useHistory()

  return (
    <Route {...rest} render={props => {
        if (user) 
        {
          return <Component {...rest} {...props} />
        } else {
          history.push(/logIn)
        }
    }} />
  )
}

export default Protector;

In order for this to work, there must be a few things to understand and implement elsewhere in the app.

First thing that was new to me, was the use of the render prop for the Route. This is key, because just as previously we passed things to Route using the component prop, it would evaluate only once. This does not work, as we need the route to update each time a new prop is passed to it, and this is only done with render. As a side effect, authentication and authorization are checked each time a new component is rendered through the Protector component through its Route.

Next, what else was new to me, was the use of "...rest" in prop syntax. I have never seen this before and I'm glad that I encountered this. It is a .js keyword that automatically fills in all the props from a component being passed in and passes them to the next child in the hierarchy. This is particularly useful here, as it is used to pass everything passed into the Protector into the render in Route.

Finally, there need to be all the helper methods added in App.js, including all the handleLogIn's and handleLogOut's that will interface with the backend to make sessions that will then set the state in app that will satisfy the "user" conditional in the Protector's ternary render, and will not allow any of the protected pages to be shown unless "user" or "session" return truthy.

All in all, although there are a few new things to learn to make Protected routes work with React Router, it really is a clean, flexible, and fairly safe way to make resources inaccessible unless the necessary conditions are met.

Learning about this tool and all the necessary implementations has been interesting and I look forward to using them in my future projects.

Cheers.

What if we want to be friends ?

arthurvfain — Wed, 14 Jul 2021 18:02:15 +0000

Throughout my coding journey, when learning something new, I always wondered how something I am learning now as a new software engineer has implications on what I already know as someone who has been on the internet practically my whole life. It blew my mind to be able think that I understand where something that I couldn't even fathom a few months ago, I can now see how different websites accomplish their goals.

Now, currently learning and working with creating my own back-end databases, a conversation with a friend on the matter led me to ask myself: "Now that I'm working with databases, do I know how social media giants such as Facebook and Twitter work ? How do databases of hundreds of millions of users keep track of who is friends with who ?"

Just these past few weeks I have starting about relational databases and the kinds of relationships different table of information have with one another. Usually by having a table of one kind of Data, for example "grocery items" and another table with a different kind of data, for example "customers" joined with a third kind of table that "joins" two different kinds of "Class instances" and creates a "many to many" relationship. See figure below.

Each "order" belongs to a "grocery item" and to a "customer" while each "customer" has many "orders" and through "orders" has many "grocery items" and similarly, each "grocery item" has many "orders" it can be in, and through the many "order" has many "customers" as well.

This naturally brought up the question for me, what if I want to be friends with a human, and not a Jicama ? Do we need a second table of humans, just for me to be friends with them ? Would they be anti-humans ? Food for thought.

Thankfully we can have something completely different !

Using ActiveRecord, we can make a join table model that joins two instances of the same class, allowing for human-to-human friendships in this case. The power behind this is obvious as it creates the opportunity to create relationships between two instances of the same class, without much issue.

The domain model would look something like this:

Here we have a model where a "friendship" belongs to two instances of "human" and each "human" has many "friendships" and through them has many other "humans". The syntax for setting this kind of relationship is a little different than usual, and has some nuances depending on the kind of relationship between to "humans" that will be the subject of future posts. This just serves to provide some insight into what is possible and some food for thought.

Happy databasing.

How I got into Software Engineering (Every good Villain needs an origin story)

arthurvfain — Tue, 22 Jun 2021 18:29:01 +0000

Hi Everyone,

Just thought it may be interesting for myself to reflect back on the life that brought me here as well as tell my story for anyone interested as well as maybe in a similar situation I was in and needing that final push to dive into something new. (chances are, if you are on this website, it has something to with computers) but hopefully my message can inspire someone to do something they have always wanted to but never really felt like they could. I hope you enjoy.

1994, Moscow, Russian Federation

I was born to Vitaliy and Assia, Vitaliy being a PhD in applied mathematics focusing on facial recognition software for the KGB and Assia being an orthodontist PhD on a cleft-palate team at one of the major hospitals in Moscow. My first word was Tractor. I loved watching the garbage trucks around our neighborhood use their robotic arms to lift enormous metal dumpsters so high overhead to dump their contents, doing the work of 20 men in one fell swoop. I rode camels at the park, went sledding in the snow with my dad, and dragged a small trailer with my bike when grandma and I would go shopping- normal two year old Moscovite things. In 1997 my family emigrated to the United States, leaving everything behind in search of a new life.

1997-2012, Worcester, Massachusetts, United States of America

Growing up in a new environment was not easy, not only were my family language, customs, and cuisine so different from everyone else, but also the pressure I felt and imposed on myself as the child of such accomplished first generation immigrants was unlike anyone I knew- I always believed that if my parents were able to accomplish so much under such an oppressive government as in the USSR, living in the country they only dreamed of for their whole lives, I was to exceed their accomplishments tenfold. For the longest time I believed that this was the only way to have their approval, and it pervaded almost all decisions I made through this time period.
This pressure I put on myself is something I still deal with today, but thanks to the choices I've made, I have been able to not let it affect me as much as it used to.
In Middle School, the pressure became too much and I began to resent school and went entire months without doing any schoolwork, and thus completely fell behind in most of my classes. I learned here, that if I counted myself out and didn't apply myself at all, any failures could not be attributed to me- when I failed, I could always tell myself the story that it was because I didn't try and not because I wasn't smart enough or ____ enough, and if I did try things would be different but I didn't feel like trying. This relieved some of the pressure. Looking back, I just didn't want to be compared to anyone. Strangely enough, I found some respite in classes such as Biology and Chemistry, they came rather naturally and I felt like I was learning all about the coolest story ever told, kinda like a learning about the Star Wars or Halo universe, except it was my universe. I really enjoyed learning about these things and didn't feel pressure as they were outside of my parents shadow. For the most part, this attitude only got worse through my high-school years, especially when it came to anything having to do with Math and Computer Science because of the direct comparison to my dad it allowed for.
Throughout High School, my mom had progressed her Dental Career (for which she had to re-complete dental school in the USA) to the point of acquiring her own private practice, and had begun growing it and slowly giving me opportunities to contribute to her business. I began doing basic IT things and taught myself how to run wires through commercial property as well as tried my hand as a dental assistant for a few root canals and fillings and it seemed easy enough of work, appeared to make decent money, was a straightforward path, and seemed to make my mom happy.
The time had come to apply for college and I believed I had found what I wanted to do with my life- be a dentist and take over my mom's practice.
I didn't try applying to too many places, but the minute I was accepted to a university with an accelerated 7-year dental program, my college search was over and I committed to Adelphi University in Long Island, NY.

2012-2020 Long Island, NY, United States of America

I started college and declared myself a Biology Major as it was the default major for the fast-track to becoming a dentist. Everything was going fairly well, I slowly began to apply myself even towards classes that I was not interested in. I began believing in myself and caring more about what would make me happy rather than trying to impress anyone. At this time I prepared for and scored well on the DAT exam for dental school, but when it became time to apply for dental school, I took a hard look at myself, and realized how much debt I would be in, with the only feasible way of paying it back being either becoming the next Pablo Escobar, or actually waking up every day and looking into people's mouths. (up until this point it never actually occurred to me that if I were to become a dentist I would have to work as a dentist) Neither of those seemed appealing to me, so much to the chagrin of my parents, my pursuit of dentistry had come to an end. What else is there for a Biology major in their third year of undergrad to do ? Of course to pursue Medicine.
It didn't take too long after taking the MCAT that I realized I backed myself into the same exact place I did almost exactly a year prior with dentistry. I realized that I wanted to be a Doctor to be accepted by others, and not because I wanted to work as one. At this point, I fell into what I can now identify as a depression, and dropped out of school because I had lost purpose, and became a full time Starbucks Barista not only because I liked free coffee, but also because I didn't have to try to be anyone anymore. Just a humble Barista. On the side I started realizing that I have an eye for seeing automation and started seeing ideas for websites and apps that my hands couldn't make, but was not ready or willing to believe in myself enough to commit to learning a new skill to bring what I envisioned to life. After a few years, seeing everyone I knew graduating, getting real jobs, moving on in life, the pain of staying the same overcame the fear of change, and I re-enrolled back at Adelphi, except this time, as a Biochemistry Major. (Molecular biology and biochemistry were what I realized I found the most interest in and was easiest to put time into) I spent hours working in a Synthetic Chemistry Lab, wrote papers, and TA'd my old Physical Chemistry lab. The next step for a Biochemist, however, is almost certainly a PhD program in graduate school. I'm sure everyone here will sense a pattern, but I took the GRE to apply to Graduate Schools with Biochemistry PhD programs, but did not go through applying as they are all somewhere between a 5-8 year endeavors. I decided to take some time to work in industry, to see what working in the Chemistry field was like, and after 20 months working raw material QA for a multinational cosmetics manufacturer, I realized I hate it. I was finally ready to overcome my fears of not measuring up to my dad, and with my son due to be born in two months, became willing to finally take on something that I never thought I could.

2021 Flatiron School, New York, NY United States of America

Here we are.

I Talk to my Computer (how do you code a website?)

arthurvfain — Tue, 01 Jun 2021 17:06:32 +0000

Creating Interactive Websites with JavaScript

(A How-To Guide)

Introduction

Opening up index.html for the first time in a project and seeing a blank white page is definitely daunting, but taking things one step at a time really helps me organize a work-flow that after practicing a few times has become repeatable, almost with my eyes closed....not really.

The Set Up

First, I look at the deliverables, or what actually is to be accomplished through my work - knowing where I am headed is the first step for figuring out a plan on how to get there. In order for me to do this, I usually keep a description of the functionality needed open on one screen, while at the same time I have open the blank index.html with my Developer Tools Console open to check my work in progress and splitting my main monitor with the code I am working on.

You talk to your computer ?

All the time. This is a quick description of what kind of conversations I have with it, asking how it can do what I want it to do as well as asking it what it needs from me in order to do that.

A Quick Side Note

I cannot emphasize enough the utility of using console.log(anything) for testing everything. Whether it be making sure I'm grabbing the right HTML element or verifying that a function I'm writing has access to the all the variables I need it to in order to work I start by console logging to make sure it works.

Selecting HTML Elements for Ease of Use

In my experience, most often all the HTML elements and the CSS styling has already been put in place, leaving the only work for me to use JavaScript in order to make them interactive and work as intended.

Assigning Elements to Variables

Targeting elements using document.querySelector() on either a class of elements (using .className) or a specific element (using #idTagName) and assigning them to a clear variable name makes keeping track of and adding elements or features such as eventListeners much easier in the long run.
(note: I find it helpful to add event listeners to static HTML elements here too)

Establishing Communication with the Server

This is where I usually make my first Fetch request just to see what kind of communication the server sends me. If my fetch request is to a database stored locally (shoutout json-server by typicode), my first fetch will look something like this: fetch('http://localhost:3000).then(res=>res.json()).then(console.log)
Thanks to my console.log, I know exactly what kind of info I am receiving back, and I can plan how to integrate it into where I trying to go based on the deliverables required of me.

In this case, thanks to my console.log, I can see exactly that the response to my fetch is an array of objects. and now I know exactly how to proceed and what I want the fetch's callback function to be.

Rendering The DOM

Here is where it becomes extremely important to keep track of functions and particularly the parameters that they take. In my experience, I have often been required here to make a JavaScript 'template' function that will be called many times as the response to my get request is iterated on. Depending on how much HTML is provided, I can either use rendering functions such as this to populate parts of a webpage or create entire elements altogether. I usually do this in a series of functions, starting with the function that accepts the response of the fetch and then iterates over it in the prescribed way (usually by passing individual elements to another function)
(Pro tip: if I think I'm going to want to access a specific element for a function, I've found that I like manually adding an attribute called dataset, and usually making an id attribute to it, and assigning it the value from the object the function is currently handling:
deleteButton.dataset.id = thingObject.id
this allows me to access that value later on in the event listeners section through target)

Event Listeners

Throughout rendering to the DOM, depending on the functionality desired, I will add Event Listeners for the desired functionality to the individual elements as they are being generated. Part of making event listeners is adding what happens at the event, and almost always I will make it a callback function: deleteButton.addEventListener('click', deleteThing) When declaring the function, based on js knowledge, I know that a function called by an eventListener will have its first parameter be the actual event, so when building the event listener callback function, I start with console.logging the event:

function deleteThing(e)
{
    console.log(e)
}

Examining the event in the Developer Tools console, I can find target, and drilling down to dataset, I can access the same id I added for each element in the Rendering the DOM section ! and now any server communication that I do as a result of these events will be targeted specifically to just that object !
(Pro Tip: that same id value in the dataset attribute is stored as a string, so parseInt() the id, otherwise it may not work as indexes for accessing objects in another fetch are often int's)
idInt = parseInt(e.target.dataset.id, 10)

Server Communication

Setting up

Up until this point, the only interaction made was a fetch to retrieve data, now armed with everything including the element id's, I can easily make my POST/PATCH/DELETE fetches!
I tend to put these in the functions that their respective event listeners call [i.e. deleteButton calls deleteThing(), likeButton calls likeThing()]. When making PATCH or POST requests, I construct the object that I will eventually stringify in the request early on in the function pulling together data from the event as well as some processing whether it be to add to an existing value of attribute or to add some data from a form if my function is acting from a form submit event.

Rendering the Changes from an Event

In my experience I have found that the .then() function can be extremely useful, because in the case of POST and PATCH fetches, the resolved promise returns the changed made to the server ! This is crucial for two reasons. First, anything done in a .then() by definition will only happen after successful updating of the server's data, and second, after processing using .json, (and a console.log to review the kind of contents returned) can be directly passed into a rendering function that is already made ! I put an example of this entire process below !

function submitNewObjectFromForm(e)
{
    e.preventDefault()
    let newObject =
    {
        firstAttribute: `${e.target.first.value}`,
        secondAttribute: `${e.target.second.value}`
    }
    fetch('http://localhost:3000/objects',
    {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'accept': 'application/json'
        },
        body: JSON.stringify(newObject)
    })
    .then(resp=>resp.json()).then(data=>renderObject(data))
}

At this point, by setting myself up for my next tasks, as well as breaking everything down into little steps, I was able to smoothly set up my basic framework and thought processes for making interactive webpages through communication with a rudimentary server !

TL:DR

When facing a challenge, break it down into steps ! These are the general steps I take to go from a blank index.html page to a fully functional website!