DEV Community: Maylene Poulsen

If I could go back in time to prepare...

Maylene Poulsen — Thu, 28 May 2020 19:26:02 +0000

I recently graduated from Flatiron and I am so excited to have completed this first phase on my way to becoming a junior developer. But the bootcamp experience was not so easy for me. Before I started bootcamp, I had been (and still am for the present) a SAHM for 16+ years. My formal college education was a distant memory. I had taken some college courses through a local community college several years back for pre-nursing but other than that, I hadn't needed to use my brain in the specific way I used it during those months in bootcamp. Even the pre-work was difficult (although enjoyable) for me.

I was one of the students that learned so much in the program, but there are many holes in my understanding because the curriculum was constantly moving on with new material. If I could go back in time...a year before I had thrown myself into the bootcamp experience (side note: I attended an on-campus program until the corona virus forced everything online) these are some of the things I wish I had known or taken the time to learn so I wouldn't have struggled as much during bootcamp.

Learn how to use a Mac.
Sounds easy enough, right? I was required to have a MacBook Pro for bootcamp and actually I am grateful to have such a nice laptop to work/learn on. But when I first started, it was a challenge to figure out how to do anything on the MacBook after using PC's my entire life! I would often get behind in lecture or paired programming because I was still trying to open up or find a file saved on my computer because I had no idea how to use a Mac.
Learn how to use VS Code.
This could probably have a whole sub-category of things but just the basics like creating a folder and a file and opening it up in VS Code would have helped those first few weeks. I would also suggest learning a few basic file extensions. For example, Ruby files are saved with a .rb extension, HTML files are saved with a .html and JavaScript files are saved with a .js extension. Last but not least, how to open a terminal window or multiple terminals within VS code and run/start those files is helpful basics so you can focus on learning to code.
Learn how to use the terminal.
This was part of the pre-work, but I didn't really catch on the first time I went through this part of the content. I enjoyed the coding more so I focused on that part. I wish I had spent more time practicing and becoming more comfortable with using the terminal to navigate to different directories, see what was in those directories and how to open a file (in VS Code from the terminal). As a side note, I was always nervous when installing things on my brand new computer from the terminal, especially when I didn't know where they were being installed and what they were for. But I have learned that anything that is installed on your local computer can be located and uninstalled if necessary. Using the --v flag to check the version of what was installed is also helpful to check if it installed correctly!
Find someone or a good tutorial to help with the set up of GitHub. GitHub was a problem that haunted me through my entire bootcamp experience. I attempted to set up my GitHub account and connect my computer to this account. However, I must have made several mistakes since I was so new to all of that. Every time I used my VS Code, there was over 5000+ changes waiting to be staged (apparently, every file and folder on my computer along with all kinds of other files I didn't understand were all waiting to be added to every project). And if that wasn't annoying enough, when I tried to push any commits, my commits were under 'github-username' about half of the time instead of my own username. There were several other issues that I am happy to say are fixed now! I was able to research and reset several things that needed configuring.
Finally, learn HTML + CSS and then build a few basic projects using those new skills. I started my program with only a basic knowledge of HTML and CSS. I spent so much time trying to figure out how to build features in JavaScript and React and connect everything together correctly (routes, database, controllers, etc), that I almost always ran out of time to properly design the layouts or implement correct HTML and CSS on the front-end. After I graduated, I took some time to start learning how design should be structured and how to correctly use CSS to design responsive applications. I realized my hack-y, google-y methods I had implemented in my projects were not correct and would only show up well on my own screen, but not necessarily on someone else's screen.

As a bootcamp graduate, I feel like my goal of someday becoming a software developer has just begun. I am working towards continuing to learn and practice my skills by building small projects. There are so many resources available, as well as a supportive tech community to help out any developer, no matter where they are in their learning and growth!

Using a Modal in React

Maylene Poulsen — Tue, 05 May 2020 23:09:13 +0000

For my final project at Flatiron, I built an app that allowed users to fill out forms and submit information on different pages. Because I didn't want to keep rendering an entire page with a form and then going back to the previous page to display the information, I decided to use a modal. A modal is just a design term for a pop-up form that appears when a user clicks on a button. I also used some of react bootstrap to style and render the modal.

To get the modal to display a showModal state can be set in the parent component.

state = {
  showModal: false,
}

Also in needed in the parent component are two methods to change the state of the modal. One method to set the showModal state to true when a button is clicked, and another method to set the showModal state back to false when the user clicks the x in the corner.

 closeModal = () => {
    this.setState({ showModal: false });
  };

  openModal = () => {
    this.setState({ showModal: true });
  };

Next you will create a button with an onClick event handler that will call the openModal method and set the state to true. The component that is being rendered as a modal should open on the page of the parent component. The modal component itself will need the state of the modal as well as the closeModal method passed to it in props. Any other props that modal component needs should be passed to it as well.

In the component that I wanted to render as a modal, I imported from react-bootstrap.

import { Modal, Form } from "react-bootstrap";

Then in the modal component, I wrote the form to show in a method called renderAddGift.

renderAddGift = () => {
  return (
  ...all the form labels and inputs...
  )
}

In the render method of the modal component, I used the Modal wrapper imported from react-bootstrap to render the above form depending on the state of the modal.

 render() {
    return (
      <div>
        <Modal show={this.props.showModal} onHide={this.props.closeModal}>
          <Modal.Header closeButton={true} style={{ color: "#3e6b89" }}>
            <h3>Add A Gift Idea</h3>
          </Modal.Header>
          {this.renderAddGift()}
        </Modal>
      </div>
    );
  }
}

I found this to be an easy beginners approach to set up a working modal and understand how it was rendering to my page. It also made the page it was rendering on cleaner with only necessary information displayed. A common place to use modals is on the login and sign-up on a home page.

Using Router Props in React

Maylene Poulsen — Mon, 04 May 2020 16:04:00 +0000

It is common in React to use Routes from 'react-router-dom'. One of the advantages of using Routes is the router props that are automatically provided with the route. These router props allow you to go forward or back in your application and are helpful for sending a client to specific locations when they submit a form, or click on a button or link.

React-router-dom also provides the render method which is used to pass the router props to a specific component.

<Route exact path='/'
       render={(routerProps) => {
         return (
           <HomePage handleLogin={this.handleLogin}
                     routerProps={routerProps} />
         )
       }}
/>

This example explicitly shows how the router props are being passed to the HomePage component. Other props can be passed to the component as well along with the router props.

In the home page component, the props will be used to push a user to a new page and route after they login successfully. In the home page component there is a handleSubmit method that is called after a user enters in an email and password. After the request comes back successfully, the router props are used to push a new route onto the history.

this.props.routerProps.history.push(`/users/${id}`)

Another useful part of the router props is the match property that allows a component to access an id from the URL on the page. Again the router props would be passed to the component that needs access to them using the render method. An example of a component using the match property would be if a user clicks on a link that has a specific id and is redirected to the page with that id. The router props could be used in the react life cycle method componentDidMount() to access the URL to load the correct page.

componentDidMount() {
  const id = this.props.routerProps.match.params.id

  fetch(`http://localhost:3001/api/v1/groups/${id}`, {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
      .then((response) => response.json())
      .then((result) => console.log(result))
}

Another way to access the router props is to add an import statement at the top of the component and import 'withRouter'.

import { withRouter } from 'react-router-dom';

Then in the export default statement at the end of the component you would wrap the component in 'withRouter'.

export default withRouter(HomePage);

There are several ways to redirect or send a user to another route in an application and using the router props is one solution that can be successfully utilized with the history and match properties.

Beginners Notes for React

Maylene Poulsen — Thu, 09 Apr 2020 21:38:55 +0000

React is a framework for building user interfaces. It uses JSX which is a combination of HTML and JavaScript to state what should be rendered to the DOM and when it should be rendered.

Some basics to keep in mind when you are first learning react are:

Components

Components are written as JavaScript classes or regular JavaScript functions

class App extends Component {
//... more code here
  render() {
    return (
      <div>
        Something rendered to the page
      </div>
    )
  }
}

const App = props => {
//...more code here
  return (
    <div>
      Something rendered to the page
    </div>
  )  
}

Both types of component return JSX in either the render( ) method in a class component in conjunction with a return statement or just a return statement in the functional component. The JSX is a visual way of seeing what will be rendered to the DOM by that particular component. Props is short for properties and is a way for data to be passed from one component to the next. Notice that in a class component, props are implicitly passed in while the functional component receives the props as an argument, explicitly. The other important thing about components is they often return other components. It is helpful to map out the parent components and child components that are nested inside.

State

State in React is a place where data is stored and can be modified as needed. Learning where to put the state is important because parent components usually keep track of the stored data and pass this information to the children components. The data cannot be passed or accessed from a child component to its sibling component. Instead the child component communicates changes to the parent component and the parent will pass the changed data back down to the sibling components.

An example of state is an amount being stored in a parent component that two children components need to know about.

class App extends Component {
  state = {
    amount: 50
  } 
//...more code here
}

When a child component is clicked on, they need to subtract an amount from the amount stored in state in their parent component. The parent will update the amount and let the both children components know about the new updated amount in state.

Props

Props are passed from the parent component to the children component(s). These props can be data types that are stored in state, objects, strings, arrays, and functions for the child component to use. They are passed by naming an attribute on the component and passing in the props.

class App extends Component {
  state = {
    amount: 50
  }
  render() {
    return (
      <div>
        <ChildComponent1 amount={this.state.amount} />
        <ChildComponent2 amount={this.state.amount} />
      </div>
    )
  }
}

In this example the amount in state is passed to the children component through the named attribute amount= and then followed by curly braces where the JavaScript will access the state and pass these props to the children component. The children component can then use these props and access them using either this.props.amount if the child is a class component or props.amount if the child is a functional component.

class ChildComponent1 extends Component {
  render(){ 
  console.log(this.props.amount)
    return (
      <div>
        Something Displayed Here
      </div>
   )
  }
}

const ChildComponent2 = (props) => {
  console.log(props.amount)
  return (
    <div>
      Something Displayed Here
    </div>
  )
}

Functions can also be written in a parent component and passed to the children component to receive information back in the parent component.

class App extends Component {
  state = {
    amount: 50
  }

  subtractAmount = (amount) => {
    const newAmount = this.state.amount - amount;
    this.setState({ amount: newAmount })
  }

  render() {
    return (
      <div>
        <ChildComponent1 amount={this.state.amount} 
                         subtractAmount={this.subtractAmount}/>
        <ChildComponent2 amount={this.state.amount}
                         subtractAmount={this.subtractAmount}/>
      </div>
    )
  }
}

Now each component will have access to this function through their props and will be able to pass in an amount to subtract back to the parent component. When the function passed down is run (usually on a clickEvent) the parent can take the amount passed back from the child and update the amount stored in state. After the state is updated in the parent component, the render function will be called and the new amount in state will be passed to the child components.

class ChildComponent1 extends Component {
  handleClick = () => {
    this.props.subtractAmount(5)
    //this could be any amount that is passed into this function 
  }
  render(){ 
    return (
      <div onClick={this.handleClick} >
        Something Displayed Here
      </div>
   )
  }
}

Figuring out what kind of component will be used to render the JSX, where to store state and how to pass props down to children components as well as receive information back from the children components will help when learning React for the first time.

Basic fetch requests with JS + Rails

Maylene Poulsen — Fri, 27 Mar 2020 16:52:14 +0000

An important concept to learn is being able to handle 'GET' and 'POST' requests in an application.

For my Javascript group project at the Flatiron School, we were required to build an app using a Rail API backend and Javascript as the frontend. This was the point where I started to feel like an actual junior developer. There is so much to learn, but it was exciting to build something simple and work on the functionality. For this post I'll use examples from a previous lab that helped students learn how the backend and frontend associated.

The Rails API sets up the basic models and associations as well as the controllers. The frontend (Javascript) will send a fetch request to our backend hosted on

 http://localhost:3000/trainers

and return json data to use on our web page. The json is usually returned as an array of objects.

An example fetch request might look like this:
From the frontend in our index.js file

function fetchTrainers() {
  return fetch(TRAINERS_URL)
    .then(response => response.json())
};

This returns a promise that we can use after the DOM has loaded.

document.addEventListener('DOMContentLoaded', () => {
  fetchTrainers()
    .then(results => console.log(results));
});

These objects were returned because the data was accessed from the trainers controller.

  def index 
    trainers = Trainer.all
    render json: trainers, only: [:id, :name], include: :pokemons
  end

Next we would use the returned data to render the objects on our page. These functions could be written in our index.js file

The above 'GET' request starts in our frontend javascript file => is sent to the controller => the controller accesses our database and returns the data we wanted sending it back to the frontend => and finally the frontend can use the returned data

An example fetch request to post or save information in our database might look similar to this:

From our front end, we might gather data from inputs or objects on the page. Then we will pass this data along to a controller on the backend through out fetch request. This data is sent as a json object that we include in the fetch.

function addANewPokemon(event) {
  const trainerId = event.target.dataset.trainerId;
  data = { trainer_id: trainerId}

  fetch(POKEMONS_URL, {
    method: 'POST',
    headers:  {
      "Content-Type": "application/json",
      "Accept": "application/json"
    },
    body: JSON.stringify(data)
  })
};

This request will be sent to a different controller and the create action.
In the create action we could use data input from either a form that is passed along in the data object to the fetch or in this specific case, the Ruby Faker gem was used to help create a new object to save to the database.

 def create
    pokemon = Pokemon.create(
      nickname: Faker::Name.first_name,
      species: Faker::Games::Pokemon.name,
      trainer: Trainer.find(params[:trainer_id])
    )
    render json: pokemon
  end

Remember create in Rails also saves the object to the database. We can specify on our fetch 'POST' request to have the json object returned if we want to use the data immediately.

.then(response => response.json())
.then(result => console.log(result))

In summary, the fetch request is directed to a specific URL that is associated with a controller. The method inside the request lets the controller know what action to send the request to. For example, 'GET' can either go to the index or the show if the URL passed in has an :id associated with it. The 'POST' request is sent to the create action. A 'PATCH' request is sent to update and 'DELETE' request is sent to the destroy action in the controller.

Beginners Guide to form_for in Rails

Maylene Poulsen — Fri, 06 Mar 2020 18:55:27 +0000

If you are new to building apps in Rails and using the views to display forms, these are a few simple explanations of selection options you may to incorporate into your form_for.

The form_for form is usually created in a

_form.html.erb

file an rendered in the "new.html.erb" or "edit.html.erb" using

<%= render 'form' %>

The first line of a form_for looks like this:

<%= form_for @student do |f| %>

This form takes in an instance of a student. In the StudentsController, a variable "@student" is passed to the form to create a new student. A new student is created in the controller with all the attributes set to "nil" before the form has been submitted.

class StudentsController < ApplicationController
  def new
    @student = Student.new
  end
end

You might want to add some labels and text_fields for someone to enter in the information.

 <%= form_for @student do |f| %>
    <%= f.label "Student Name: " %>
    <%= f.text_field :name %>

    <%= f.label "Enter a username: " %>
    <%= f.text_field :username %>

    <%= f.label "Student's Grade: " %>
    <%= f.number_field :grade %>

If you would like to add a way for someone to select items from a dropdown list you can use collection_select

 <%= f.label "Select Your School: " %>
 <%= f.collection_select(:school_id, School.all, :id, :name) %>

The ":school_id" is an attribute of a Student. Whatever option someone selects from this dropdown will be assigned to this attribute.

"School.all" is the collection of school instances that will be available to select in the dropdown. They are selected using the school's assigned ":id", but we want to display the ":name" attribute (of the school, rather than the ":id") in the dropdown. (Note, for this code snippet it doesn't slide over enough to see the end embedded ruby tag but it is still very necessary.)

 <%= f.label "Select the subjects you are Studying: " %>
    <%= f.collection_check_boxes(:subject_ids, Subject.all, :id, :name, include_hidden: false) %>

This allows someone to check boxes and those selections will be added to an array when you call @student.subjects = [ ]. "Collection_check_boxes" are similar to "collect_select" but there is the last field "include_hidden: false".
The "include_hidden: false" is added so that the first element in the array when @student.subjects is called is not an empty string ie.

["", "Math", "Art", "Chemistry"]

In the StudentsController you will have to modify the params that are permitted by setting "subject_ids:" to an empty array. (Note, for this code snippet I did not write out every attribute that was being permitted but they should listed where the . . . are)

class StudentsController < ApplicationController
 private

  def student_params
    params.require(:student).permit(:name, ..., :subject_ids => [])
  end
end

Last but not least do not forget

    <%= f.submit %>
  <% end %>

"f.submit" creates the button in the view that allows someone to submit the information entered or selected and create a new instance of @student. The completed form_for looks like this.

<%= form_for @student do |f| %>
    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :username %>
    <%= f.text_field :username %>

    <%= f.label :select_a_school %>
    <%= f.collection_select(:school_id, School.all, :id, :name) %>

    <%= f.label :grade %>
    <%= f.number_field :grade %>

    <%= f.label :select_subjects %>
    <%= f.collection_check_boxes(:subject_ids, Subject.all, :id, :name, include_hidden: false) %>

    <%= f.submit %>
  <% end %>

Don't forget to use the embedded ruby with the equals sign

<%=   %>

on every line of the form except for the "end".

<% end %>

Once the form is submitted, all the information about "@student" collected from the form will be sent to the create action in the StudentsController for validations and saving the new "@student" to the database!

Chaining a method on a do...end block in Ruby

Maylene Poulsen — Fri, 14 Feb 2020 03:50:10 +0000

I am brand new to coding and working with Ruby so I learn something new every day! I am also a student at the Austin Flatiron School. Sometimes I need to use a method on the returned array from a Ruby do...end block. Usually, I would set the do...end block equal to a variable and then call a method on this variable.

But I learned an easier way. I wanted to enumerate through an array of Ruby objects (ExampleClass.all) and return some data from each object. Then I wanted to use the .sum method to find the total number of pets.

ExampleClass.all => [<@name= "Sydney", @pets= 3>,
               <@name= "Sophie", @pets= 4>,<@name= "Phineas", @pets= 1>,
               <@name= "Mark", @pets= 6>]

array_of_number_of_pets = ExampleClass.all.map do |object|
                             object.pets
                           end  

array_of_number_of_pets  => [3, 4, 1, 6]

array_of_number_of_pets.sum => 14

Or you could just chain the sum method onto the "end" in the do...end block

ExampleClass.all.map do |object|
  object.pets
end.sum

  => 14