Forem: James Shipman

Thoughts on the Past Year and my Career Path Moving Forward

James Shipman — Sat, 12 Mar 2022 20:18:26 +0000

Working From Home

From a coding bootcamp through a year and a half of working at a great company, I've been working from home. This has been a blessing, I moved from a tiny apartment to a lovely home where I feel safe and my family has room to thrive.

My most natural self needs to interact with people (the extrovert in me) so working from home I've had to figure out new ways of staying focused and "full brained" on the task(s) at hand. My most recent experience has shown me I have space to learn more techniques to up my game and I am using this time between jobs to lean into learning these.

DevOps

Where does DevOps fit in this? For me it ties in with the last year and half. I was given an internal project at my previous company to build out CI/CD pipelines. Cool; at the time I didn't even know what that was; little did I know how large of a world was just stepping into. Fast forward roughly 8 months and what I had built had matured into a stable, powerful and adaptable pipeline for website development and deployment. I also feel head over heals this work, it clicked with me like no other work I've done in 15 to 20 years.

In just the 2 weeks I've been job searching I have had the time to dig deeper into the DevOps universe. I really like and excited about the fact that it's not a highly established, formalized or well-defined practice yet. It's fluid and little different for each company. The overall methodology / philosophy of a collaborative team of different skill sets coming together to work across walls (get rid of them really) to build automated, scalable, testable and adaptable IT solutions is right up my alley.

This collaborative, cross-functional way of working speaks to me, it calls back to the days that I was in theatre as a performer and as a technician and director. DevOps, to put it simply, is how I've always wanted to work in IT.

Let's do This!

So I'm back on the market, looking hard at the roles that focus or want a focus in DevOps processes.

Post Graduation, week 3 & 4

James Shipman — Fri, 29 May 2020 21:00:39 +0000

TL;DR

So an idea from a friend inspired me to do a "little" side project; I've bulit a template rails api that I (and others) can use to kick start any project. It has a few features that most every web app has nowadays like user authentication, password reset, and soon a basic user profile. It took a lot of work to get it just right, super clean, well documented and what feels to be built with as little code as possible. I have now made it a template repo in my GitHub and it is public; I've given credit where credit is due because very little of this project was only me. Below is the full readme within the repo. I really enjoyed working on this little project; I'm going to continue to build upon it and I hope others will find it helpful as well when starting new personal projects.

repo link

README

Template_API

This readme can be used not just a reference for the template but also goes into details for how the user authentication works and why it is configured the way it is. It is very important to note that this all comes from a great youtube series from Edutechnical HTTPS session cookies. The password reset and emailer functionality is adapted from two blog posts by Pascales Kurniawan, links to the posts are at the bottom of the readme.

Configuration

Ruby version

2.6.1

System defaults

localhost port 3001 set within
- _api/config/initializers/cors.rb-ln7
- _api/config/puma.rb-ln13

Session Cookies for User Auth

CORS setup with broad range of methods, can be customized per application's needs. File can be found here (_api/config/initializers/cors.rb)

Database initialization

rails db:create is all that is needed to create the initial databases. By default this will create a deveolpment and test database.

User Model Configuration

Used for user authentication

User Model Creation

rails g model User username email password_digest

This generates a User model with a username, email and password; digest works with bcrypt and built in rails functionality to encrypt the string provided as the password.

user.rb

  has_secure_password

  validates_presence_of :username, :email
  validates_uniqueness_of :username, :email

  def generate_password_token!
    self.reset_password_token = generate_token
    self.reset_password_sent_at = Time.now.utc
    save!
  end

  def password_token_valid?
    (self.reset_password_sent_at + 4.hours) > Time.now.utc
  end

  def reset_password!(password)
    self.reset_password_token = nil
    self.password = password
    save!
  end

  private

  def generate_token
    SecureRandom.hex(16)
  end

Default configuration is to enforce a unique username and email for each user that registers. Password tokens are generated as a random hex number 16 characters long; and a timestamp is created at the time of generation. That timestamp is used to compare against when the password is reset to ensure a timeframe inwhich the token is valid; in this template it is set to a 4 hour window but that can be changed.

current_user_concern.rb

This module creates a before action to be used universally that sets the current user to the user stored in sessions; allowing front-end pages to check the current user when needed.

  extend ActiveSupport::Concern

  included do
    before_action :set_current_user
  end

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

sessions_controller.rb

Controlls user session creation, logging in and logging out.

  include CurrentUserConcern

  def create
    user = User
      .find_by(username: params["user"]["username"])
      .try(:authenticate, params["user"]["password"])

    if user
      session[:user_id] = user.id
      render json: {
        status: :created,
        logged_in: true,
        user: user,
      }
    else
      render json: { status: 401 }
    end
  end

  def logged_in
    if @current_user
      render json: {
        logged_in: true,
        user: @current_user,
      }
    else
      render json: {
        logged_in: false,
      }
    end
  end

  def logout
    reset_session
    render json: { status: 200, logged_out: true }
  end

registrations_controller.rb

Handles the creation of a user account and wraps the json object in a user key. The json string for a user will look like the following. {"user":{"username":"", "email":"", "password":"", "password_confirmation":""}}

  def create
    user = User.create!(
      username: params["user"]["username"],
      email: params["user"]["email"],
      password: params["user"]["password"],
      password_confirmation: params["user"]["password_confirmation"],
    )

    if user
      session[:user_id] = user.id
      render json: {
        status: :created,
        user: user,
      }
    else
      render json: { status: 500 }
    end
  end

API Endpoints / Routes

routes

  # Routes for forgotten password
  post "password/forgot", to: "passwords#forgot"
  post "password/reset", to: "passwords#reset"

  # Create a User session
  # Create a new User via registration
  resources :sessions, only: [:create]
  resources :registrations, only: [:create]

  # Log a user out
  # Check to make sure a user is logged in
  # this is used when moving in the app
  # to check the user remains logged in
  delete :logout, to: "sessions#logout"
  get :logged_in, to: "sessions#logged_in"

  # Static page at root of api to make sure
  # server is running
  root to: "static#home"

static_controller.rb

def home
  render json: { status: "It's working" }
end

Render json status at server root for basic checking of function - i.e. is the server running.

application_controller.rb

...
  skip_before_action :verify_authenticity_token
...

Makes sure authentication token is verified before anything else.

Forgotten password

Two posts from Pascales Kurniawan are my sources that helped me build a password reset process including send out emails for a welcome, password reset and a reset confirmation.

It starts with creating a passwords controller, there's a lot here but we will go through it all.

passwords_controller.rb

  def forgot
    # check first if email exists, neede d because
    # though email is required to register, non-templated app
    # may allow for email to be removed by user later
    if params[:username].blank?
      return render json: { error: "Username not present" }
    else
      # find user by email
      user = User.find_by(username: params[:username])
    end

    # if present then generate a token
    if user.present?
      user.generate_password_token!

      # send out email
      UserMailer.forgot_password(user).deliver_now

      render json: { status: "ok" }, status: :ok
    else
      render json: { error: "Email address not found. Please check and try again." }, status: :not_found
    end
  end

  def reset
    token = params[:token].to_s

    if params[:email].blank?
      return render json: { error: "Token not present" }
    else
      user = User.find_by(reset_password_token: token)
    end

    if user.present? && user.password_token_valid?
      if user.reset_password!(params[:password])
        render json: { status: "ok" }, status: :ok

        # send email
        UserMailer.password_reset(user).deliver_now
      else
        render json: { error: user.errors.full_messages }, status: :unprocessable_entity
      end
    else
      render json: { error: "Link not valid or expired. Try generating a new link." }, status: :not_found
    end
  end

The forgot method starts by checking if the username params is blank or not. There are no views setup in this api, but this covers a use case of leaving the username field blank but still clicking on a submit button.

If the username is found then a password toekn is generated - that method is in the user model - and send an email. Email will be covered later. Finally if the user does not have an email on record then an error is passed forward. This is also an anticapated failsafe, but not one that is needed as is for the template. This is because email is required in the template api, a new user won't be created without one.

The reset method functions very similar to the forgot method. This first takes the token that is sent in the email (more on this later) and takes it back as a param. If the email is blank (again, from frontend params, no views are created but the checks are in place) then it passes an error.

A check for both a present user and a valid token allows the password to be reset from a given param and then send an email confirming the email has been changed.

Emails

To send emails from a rails backend you start by creating a mailer like a controller.

rails g mailer UserMailer

In the _api/app/mailers/application_mailer.rb file there is a change to be made. This is one of the places that follow that will not work right out of the box in this api. I tested everything with an email setup I created for myself and removed that information. It's a simple process of creating a new gmail account that can be used.

application_mailer.rb

  default from: "create-a-new-email@gmail.com"
  layout "mailer"

Lets start with what needs to be configured in _api/config/environments/development.rb. Add the below to the file; this configures the development environment for gmail and sending emails.

development.rb

  # Don't care if the mailer can't send.
  # Comment out the below as it is used again
  # if email is not needed in your app uncomment this one
  # config.action_mailer.raise_delivery_errors = false

  config.action_mailer.perform_caching = false

  # configuration for sending out welcome email from Gmail
  config.action_mailer.delivery_method = :sendmail
  # config.action_mailer.delivery_method = :test
  config.action_mailer.default_url_options = { :host => "http://localhost:3001/password/reset" }
  config.action_mailer.perform_deliveries = true
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.default_options = { from: "create-a-new-email@gmail.com" }
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    address: "smtp.gmail.com",
    port: 587,
    domain: "gmail.com",
    user_name: "create-a-new-email@gmail.com",
    password: "password",
    authentication: "plain",
    enable_starttls_auto: true,
  }

email views
These are simple html.erb files and text.erb files. They are all in the user_mailer folder within the views folder of the rails app. There is a view that corresponds with each method in the _api/app/mailers/user_mailer.rb file. Those methods create the email header; the views files create the email body.

forgot_password.html.erb

<h1>Forgot your password</h1>
<p>
  Don't worry about it, this happens to us all from time to time.<br />
  Your username on record is: <%= @user.username %><br />
  Your email on record is: <%= @user.email%>
</p>
<p>
  Follow this link to create a new password <%= link_to "Reset Your Password",
  ('http://localhost:3001/password/reset?token='+@user.reset_password_token) %>
</p>
<p>
  This link will only work once and is only valid for the next 4 hours; so get
  to it. <br />
  Cheers!
</p>

This specific view is important because it shows how to embed the reset token into the link back to server so the user never has to see or interact with the token.

Deployment

The only steps needed to deploy this template api are as follows:

fork the repo in GitHub
clone it to your local system - allow the template to be the root of your backend, you can rename it as needed
run bundle from api root

That is it. The api is set and ready to go. You can start up the server and test the functionality after you update smtp settings to an email you want to test with.

Testing

Sessions Testing

In Terminal,

Start rails server (per template config it will run on port 3001)
New Terminal Tab type the following:

curl --header "Content-Type: application/json" \
--request POST \
--data '{"user":{"username":"ronkilav", "email":"ronkilav@email.com","password":"asdfasdf"}}' \
http://localhost:3001/sessions

It is just easier to type this in Terminal than to try to test api with an application like Postman or Insomnia. The backslash is just to allow multiple lines in Terminal.

Server response if configuration is correct:

{"status":"created",
"logged_in":true,
"user":{"id":1,"username":"ronkilav","email":"ronkilav@email.com",
"password_digest":"$2a$12$Fj6ZBybAM15mNdQYeuSzceiKXwH5Knl0VTNmfuU9BxQzyY9yBnncK",
"created_at":"2020-05-19T20:45:58.288Z",
"updated_at":"2020-05-19T20:45:58.288Z"}}
[16:06:22]

Output is actually on a single line, I placed it on multiple lines for readablity.

Forgotten Password Testing

To test the process for reseting a password (and the emailing functionality) use a program like insomnia or postman; or modify the above curl command that checks if there is a user stored in sessions.

For password reset test I used insomnia and will include screenshots of the three POST requests needed for full testing.

To test the full process start by creating a new user. This can be done in a rails console but doing so will bypass the registrations_controller.rb and therefore the email process. So in insomnia create a POST request with all the needed new user information.

As long as you setup the email services first before these tests then you will get an email after registering a new user, requesting a new password and after setting a new password.

You will need rails console to get the reset token to add to the reset post request, but with a frontend or a set of views built out it will pass that token along as needed.

Links and resources

italic bullet points to be made after forking this template

Post Graduation, week 2

James Shipman — Tue, 19 May 2020 21:43:32 +0000

cover image credit image url

TL;DR

I have been doing lots of company research to find a small handful of organizations I want to / would love to work for. This includes seeing if these specific companies have openings for a Junior Software Engineer. If they do, fantastic; if not then I am still doing the research.

I am also brainstorming ideas for my next project and I think I figured out what I want to build. I have spent a number of nights now on paper toying around with needed algorithms and logic to make my idea work. Have to say I am very fasinated by Sudoku and it is so much more complex to implement a game then I thought it would be; it's a challenge I want to take on.

What has been happening this week

Post Graduation, week 1

James Shipman — Tue, 12 May 2020 23:02:20 +0000

cover image credit image url

Intro

Let's not beat around the bush here, nobody likes the job hunting process (or almost nobody, I'm not a Sith so I should stay away from absolutes). After 15 weeks of an intense software engineering bootcamp I am now master of my own schedule again. This is good, and to be honest, potentially bad.

The motivation to land my first software engineering role is extremely high; so is the anxiety regarding the pandemic and what that reality is doing to the job market. So what is a new S.E. in the market for his first role to do? Roll up his sleeves and focus only on the task in front of me. Or, more precisely, tasks in front of me.

All the Things

I have an online pressence to update to ensure it is all consistent and stating I am looking for my first role.
I have a resume that needs to be retooled from my past as an IT Manager and Project Manager to Software Enineer noob with a lot of drive.
There are project demos to record.
A portfolio site to conceive and create as well as brainstorm future projects to work on to add to my portfolio.
A dog to walk often.
An apartment to keep livable.
My personal health to maintain.
A kiddo that needs her Dad.
A social life (thank you Covid, jerk) for mental health.

It is a lot and I am not in any way saying that it is more than anyone else; but it is mine and there you go.

Wordy bits

So what to do about all of this? First, keep a schedule. Wake up at the same time each day, go to bed at the same time each day. Make sure I have a group of friends and/or collegues that are willing to be my check and balance and I to be that for them. A close friend coined the term Accountabilibuddies; and I love it (thank you Dane Dawson).

For myself, this new blog series is going to be part of my routine. Each week I will post about my journey between coding bootcamp and landing my first job. This week is preparation. As the list above indicates, I have a lot of prep work to do: Resume, LinkedIn, etc.

Writing about myself is not easy. The mental wall I hit each time I try to come up with a different/better way of discussing my career up to now is a little daunting, just because it's hard doesn't mean it's impossible.

So far the most helpful and motivational things that has happened since graduation is a group of us from class have created a group on a site called habitica. It gamifies tasks and habits. Getting a digital pet for completing the things I need to get done in order to land a job is awesome - silly - but awesome.

Portfolio Site

Research, research, research. I don't know what I want my portfolio site to look like. I know the goals of the site, I know what the basic semantic structure of the site should be. Everything else, work in progress. So I scour the internet for other software engineer portfolio sites to get ideas. My favorite, so far, is the portfolio site for Brittnay Chiang. I don't yet have enough projects to showcase to make this type of site layout and flow work for me, but this is a good candidate for a version 2 or 3 down the road.

So I will continue to brainstorm. I use MindNode to capture my thoughts and brainstorm ideas; I'm visual in my thinking and a mindmap lends itself really nicely to my way of thinking through things. Here is the link, should you want to have a glance at my thoughts (it's not a scary as it seems, I tell myself).

Projects to Keep my Skills Sharp

So in addition to spinning up a portfolio site, I also need and want to work on new projects. I've put a few idea down and continue to add to a brainstorm map. I'm sharing that one as well because I really like the idea of everything I build out on my own time being completely Open Source and my personal work process being open and transparent too.

This is a Long Blog

All right, I've written a lot, if you're down here you've read a lot. Thank you for thank <3

Cheers! and you'll catch me in my next post.

Final Project - User Profile

James Shipman — Wed, 29 Apr 2020 20:05:33 +0000

Summary

So, yeah. This took a lot longer than I anticipated it would because I over estimated how much I understood and remembered about basic CRUD functionality in rails and how react ties into it all. I am not going to belabor the point by talking each line of code here but I will post it all, along with the notes I took to keep track of what it was all doing.

Rails model, controller and route

There are so many ways one can build a user profile. Make it part of the user model, keep it separate (I did the separate model), will the profile have unique information that only associates to a user or will it also contain information from elsewhere in the app/database/3 rd party data pulled in ....? I choose to make it a 1:1 association that does not contain any non user information. Basically I could have put all the same columns into the user model. Keeping them separate but associated made it easier for me (or I thought it was going to) to build the routes and needed CRUD functionality.

The first issue I came across with the profile was that before a user created a profile there was nothing for the profile component to display and that gave me errors. Ultimately it was decided (myself and instructors) that when a new user was registered that the controller would also make an associated profile record with default data ("first name", "last name" that kinda stuff), in order for the profile page to have something to render. While this solved many problems what it caused was a rabbit hole of issues getting an Update route to work in a way that I understood and could replicate for future models/features in the app.

Here is what I finally got to work. For any one reading this more experienced than myself (that would be all of you FYI), please feel free to blast my potential "code smell", and non DRY-ness .... I am a dev noob, here me type way too much ;)

profiles_controller.rb

class ProfilesController < ApplicationController
  include CurrentUserConcern

  def show
    profile = Profile.find_by(id: params[:id])
    render json: profile
  end

  def update
    # grab current_user id to build a profile onto
    # try is built in
    # {profile: {firstname, lastname, ....}}
    profile = Profile.find_by(id: params[:id])
    profile.update(
      firstname: params["profile"]["firstname"],
      lastname: params["profile"]["lastname"],
      bio: params["profile"]["bio"],
      birthday: params["profile"]["birthday"],
      # user_id: @current_user.id,
    )

    # conditional to render json object of a status notification, a boolean for logged in, and the user model data
    if profile
      session[:user_id] = @current_user.id
      render json: {
        status: :updated,
        logged_in: true,
        user: @current_user,
        profile: @current_profile,
      }
    else
      render json: { status: 401 }
    end
  end
end

not sure if the show method needs to be there, but it's staying in because everything in my app to this point is working. I took a lot of similar code from the registrations controller as that controller creates a user, so the I figured they would have similar structure and such.

Next is the routes for the profile.

routes.rb

Rails.application.routes.draw do
  resources :sessions, only: [:create, :update]
  delete :logout, to: "sessions#logout"
  get :logged_in, to: "sessions#logged_in"
  # update :update, to: "sessions#update"

  resources :registrations, only: [:create]

  resources :profiles, only: [:show, :update]
  # resources :users, only: [:show] do
  # end

  root to: "static#home"
end

I ultimately decided on not nesting the profile update route in the user route because the user routes aren't needed; the user "stuff" is handled in sessions and registrations.

Over in React land, the component I created for updating the profile (UpdateProfile, I know ... surprise naming convention). The part that gave me the most challenge was the part where I had to actually update the backend from the frontend. Here is the function in its working form that patches the profile record correctly.

UpdateProfile.js

...
handleSubmit(event) {
    // console.log(e.target.value);
    // const { firstname, lastname, bio, birthday } = this.setState;
    // const uId = this.props.user.id;
    const pId = this.props.profile.id;
    // console.log(this.state);

    axios
      .patch(
        // "http://localhost:3001/profiles",
        `http://localhost:3001/profiles/${pId}`,
        {
          profile: {
            firstname: this.state.firstname,
            lastname: this.state.lastname,
            bio: this.state.bio,
            birthday: this.state.birthday,
            // user_id: this.props.user.id,
          },
        },
        { withCredentials: true }
      )
      .then((resp) => {
        // console.log(this.state);
        if (resp.data.status === "updated") {
          console.log("profile has been updated", resp.data.profile);
          this.props.handleShowUpdateProfile();
          // this.props.handleSuccessfullAuth(resp.data);
        }
      })
      .catch((error) => {
        console.log("update error", error);
        // alert("update error", error);
      });

    // event.preventDefault();
  }
...

Getting the correct match up of data structure between the frontend and the backend was tricky as I seem to mis bad spelling and transposed characters really, really easily. This gets the job done just fine though.

The function this.props.handleShowUpdateProfile() is passed down from the parent component that holds both UpdateProfile and Profile components. I have UpdateProfile rendering in a conditional statement based on a boolean state. This ensures that the UpdateProfile component - which is just a form - is hidden upon correct saving of data back to the controller - that's the if (resp.data.status ......) portion of the promise. I really like how placing a conditional based on a status that is sent from the backend you can kind of force the an order of operation to what is actually async behavior.

I take no credit for this, the video series I watched that helped me build the user authentication system used this, so I stole it like a good programmer

Note taking and Keeping Track of What the Flip is Going on in my App

To say I got lost in the logic and data flow of my the little app that I have is an understatement. Just the user authentication was a knot I had to untie each time I sat down to work. It got to the point that I had to find a way to write down how it worked. Not the code itself, that's took hairy to look at and I'm a visual thinker so words are hard. I found myself tell VSCode many times that I wish it would draw me a map of what functions live in what component, where the states are being passed down from, which component is nested where ..... so I did that. I have easily spent half as much time taking note of all of this as I have actually writing code and troubleshooting code.

Here is what I came up with, and for anyone else that is a visual thinker like me I hope you find this helpful. I used mind mapping to build out the flow of the data, how the components connect and the logic of different aspects of the app. It doesn't matter the specific app I used as I'm not here to promote one useful app over another.

Component Tree

Frontend Logic

Here is a link to the full mind map, the above are just screen grabs of specific portions of the larger map.
Mind map

Thank you for reading this post, it was a longer one. Future posts on this project will hopefully be shorter.

Stay healthy :)

Final Project - User Model

James Shipman — Sun, 26 Apr 2020 14:15:57 +0000

Summary

I create my User model and build out the base of the needed Sessions controller.

User Model

My app will have a separate Profile model that will contain most of a User's info (bio, profile pic, birthday, etc).

So for my User model I just need the following

username
email
password

Because I am using bcrypt and not JWT or any other complicated - and still not a system I understand how to use - the password field needs to be create with _digest. Here is the command I wrote to generate the User model.

rails g model User username email password_digest

It generated this file 001_create_users.rb

class CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.string :username
      t.string :email
      t.string :password_digest

      t.timestamps
    end
  end
end

Before I migrated I checked the migration file to ensure I typed things correctly. I also renamed the mirgration file, taking the datatime out of the file name and replacing it with 001. This is a little thing I've picked up durning my time in this bootcamp that I find to be helpful if there are going to be a few migration files. Numbering them like this allows for easier troubleshooting - for me at least - if something goes wrong with a model at some point. I can look at the schema file and see what version it is on (4, maybe 8) instead of a version number twelve characters long. Also easier to rollback a specific migration if needed by typing 00x instead of 2020xxyyzzww .... blah blah blah.

I digress.

With the model migrated go to the user.rb model and include the following:

has_secure_password 
# part of bycrpt
# needed to ensure the 
# password is not saved as plain text

# below are nice to have but not required
# I want my app to ensure usernames and emails are unique
# it gives me more options for searching and finding users later
validates_presence_of :username
validates_uniqueness_of :username
validates_presence_of :email
validates_uniqueness_of :email

Sessions Controller

So the full details on exactly what a session is and what the controller is/does is not fully understood by me as of yet...

(fyi, it is April 26th 2020, for future readers and myself)

... but full understanding isn't needed right now. I get what the code is doing in general terms and for only 13 weeks into learning to be a software engineer; I'd say I'm doing okay in the understand a lot of stuff department.

Here is what needs to go into a Sessions Controller to get the base authentication functionality in place.

class SessionsController < ApplicationController
  def create
    # find user by uniq username
    # try is built in
    user = User
      .find_by(username: params["user"]["username"])
      .try(:authenticate, params["user"]["password"])

    # conditional to render json object of a status notification, 
    # a boolean for logged in, and the user model data
    if user
      session[:user_id] = user.id
      render json: {
        status: :created,
        logged_in: true,
        user: user,
      }
    else 
      # if something goes wrong, a username isn't found, 
      # hacker doing hacky things, 401 is the standard status code
      render json: { status: 401 }
    end
  end
end

Final Project - rails backend initalization

James Shipman — Sat, 25 Apr 2020 22:25:14 +0000

Summary

So I want to begin by saying this has been the most dificult aspect of bootcamp thus far; user authentication. It's a deep subject, it's dense and it really tested how much I had learned in such a short amount of time. That being said, I finally found a great tutorial series that explained it beautifully. Edutechional's React + Rails API Authentication video series. Here's the link, check it out, it's amazing and helped me finally grasp the basics of this concept. Here's the link to the series on youtube: https://www.youtube.com/playlist?list=PLgYiyoyNPrv_yNp5Pzsx0A3gQ8-tfg66j

Okay so this post will be a summary of what I learned and act as a reference guide for myself for future projects, and hopefully will be a guide for someone else as well.

Rails as the backend

Though rails has an -api only way of creation, the above mentioned series and a few other sources as well in fact, it seems to me that a decent number of devs out there find it is easier to implement an api build when it's not just and api build. Something to do with dependancies and things that are beyond the scope of this blog (and my understanding at the time of writing this blog frankly).

Step 1: create the rails app

I will do my best to make note of where names are specific to my applicaiton and what things are needed as is for the build to work.

# rails new <app_name_here> --database=postgresql
rails new familicule_api --database=postgresql

This gets the ball rolling on things and may take a moment or two depending on your system.

Step 2: gems

I like awesome print, a lot. It makes looking at rails database information, routes, and methods a lot easier, so I have been adding it to all my rails projects as of late.

It easy to do, just open the Gemfile and add gem 'awesome_print', '~> 1.8'. I tend to add it at the top below ruby '2.6.1 but I don't think the location of it is super important as long as it's not placed within the group: ..... sections

The other item that needs to be added to the Gemfile is CORS. This gem does a lot of things, most of which are still a mystery to me. I've added gem 'rack-cors', :require => 'rack/cors' at the bottom of the Gemfile -- again, not sure if it really is important where these go; please comment if you do.

Finally, bcrypt. Lets make sure it's going to bundle install the latest version gem 'bcrypt', '~> 3.1', '>= 3.1.12' update to that and all should be good.

Step 3: CORS and Sessions

Create a cors file that allows for locahost for now but later we will need to also allow deployment server(s)

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'
    resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head], credentials: true
  end

  # allow do
  #   origins 'https://api.herokuapp.com' 
  #   resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head], credentials: true
  # end
end

Session Store is another initalizer which defines what the cookie is going to be called on a local system and the domain the cookie is tied to.

if Rails.env == 'production' 
  Rails.application.config.session_store :cookie_store, key: '_familicule_app', domain: 'familicule-api.herokuapp.com'
else 
  Rails.application.config.session_store :cookie_store, key: '_familicule_app'
end

Skipping ahead a little; the conditional allows for a localhost for testing and a deployed domain for deployment.

Step 4: Basic route and controller

The last two files to create so that we can test that this rails app can be spun up are a route in the routes.rb file and a controller called static_controller.rb.

In routes.rb:

root to: 'static#home'

This creates a route for the browser to look at a controller called static at it's root level.

The static_controller.rb will one def, home (to match the static#home in the routes.rb file).

class StaticController < ApplicationController
  def home
    render json: { status: "It's working" }
  end 
end

Spin up the rails server rails s -p 3001.

Note: I spin the rails server up on port 3001 so it won't conflict with the react server later.

Go to localhost:3001 in your browser and you'll be greeted by a simple rendered json object. {"status":"It's working"}

At this point it's a great time to initialize this backend into github. I won't cover that little step here in this blog (maybe a furture blog), but this will make a perfect master branch. All future steps are in upcoming blog posts - I'm doing this so that this guide isn't a mile long.

Final Project - the beginning

James Shipman — Tue, 21 Apr 2020 17:53:53 +0000

The End is Near

Well, it's here; the final 3 weeks of my code bootcamp journey. I've made some amazing friendships, crammed a metric ton of information into my - sometimes unwilling - brain; and I am confident that I have what it takes to be a sucessful software engineer.

Over the next 3 weeks I plan on posting micro-blogs of my progress and journey on this final project.

So lets get this blog series started with this little post and I'll have more everyother day (that's my plan as of now at least).

Enjoy the read, ping me with questions or comments as this series continues and stay healthy all :)

JavaScript ... love it or hate it, here's how to use it

James Shipman — Thu, 19 Mar 2020 17:49:57 +0000

JavaScript

Ahhh JavaScript, the little DOM language that grew into a monster/beast/foundational web technical ... take your pick of terms.

It's light-weight, it can be fast and nowadays it can do almost anything on any operating system and/or browser.

"Quick" Reference Guide

Yeah, this is not going to be a short a list of functions or syntax. Below are my notes for mod 3 of my coding bootcamp that I refer back to often because I'm not going to memorize all of this anytime soon -- I will at some point because that's how I do.

DOM & Just Enough JavaScript

Document-Object Model

ask DOM to find or select HTML elements or elements in the rendered page
remove and/or insert element(s)
adjust a property of selected element(s)

JavaScript / DOM relationship

DOM only knows js, js and DOM are linked at hip from start
learning about DOM will require js
"sight words" to do this

"Sight Words"

basic vocab that forms foundation for more learning latter
js Sight Words = brief code snippets that are foundational

Just Enough JavaScript

learning sight words first is an interactive way of learning js
MDN's JavaScript Reference
code, code, code, code, code

Coding in Chrome DevTools

writing 1 + 1 is an expression
- a valid unit of code that returns a value
math expressions are "raw" in console
literal text is wrapped in quotes

"Things" in JavaScript

number (integer or float) are things
string is a thing
reserved words var, let, const
- var came first, now we have let and const
Template Literals
- with template literals use back ticks, not single quotes

JavaScript is Object-Oriented

code i can talk to that know state and behavior
all Things in js
- objects
- arrays
- strings
- numbers
dot notation()

JavaScript has loops

for each character in slytherin collection, I would like the harry_potter object to invoke expelliarmus method on each wizard passed in as an argument

for (let i = 0; i <slytherins.length; i += 1)
  {
    harry_potter.expelliarmus(slytherins[i]);
  }

Variables

Multi-line Variable Assignment

var a = 5;
var b = 2;
var c = 3;
var d = {};
var e = [];

Equivalent To:

var a = b;
    b = 2;
    c = 3;
    d = {};
    e = [];

Can be Converted To:

var a = 5, b = 2, c = 3, d = {}, e = [];

Use typeof operator to check data type of value currently stored in a variable.

Using const and let instead of var

scope issues with 'var'
let will throw an error if declare same var more than once
const cannot be reassigned
- assign a primitive value (any data type except object)
- a const will always point to same object
- const is self commenting
NEVER USE VAR
USE LET WHEN I KNOW A VALUE NEEDS TO CHANGE (COUNTERS, LOOPS, ETC...)
USER CONST FOR EVERY OTHER VARIABLE

The DOM Tree

document.querySelector(selector)

selector is like a query string lets me find things within HTML page

The DOM Tree:
(e) = element
(t) = text
(a) = attribute
Document

|-- <html> (e)
|---- <head> (e)
    |-- <title> (e)
      |-- <My title> (t)
  |-- <body>
      |-- <h1> (e)
          |-- <A heading> (t)
      |-- <a> (e) - <href> (a)
          |-- <Link text> (t)

Finding a Node

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()

DOM Tree:

<main>
  <div>
    <div>
      <p>Hello!</p>
    </div>
  </div>
  <div>
    <div>
      <p>Hello!</p>
    </div>
  </div>
  <div>
    <div>
      <p>Hello!</p>
    </div>
  </div>
</main>

Find the <main> element:

const main = document.getElementsByTagName('main')[0]

Get the children of <main>

const div = main.children[1]

Get and update the <p>

const p = div.getElementsByTagName('p')[0]

Change <p>

p.textContent = "Goodbye!"

JS Fundamentals: Arrays

document.getElementsByClassName() => [...many elements...]

HTMLCollection, not actually an Array
HTMLCollection know its length, can be iterated over with for...in... loop
HTMLCollection not technically an Array

document.getElementsByTagName() =>[...multiple elements...]

document.getElementById() => single element

Looping and Iteration

for ([initialization]; [condition]; [iteration]) {
    [loop body]
}

use a for loop when I know exactly how many times I want/need the loop to run

querySelector Methods

Learning Goals

Use document.querySelector() & document.querySelectorAll() to find nested nodes
Change value of targeted DOM nodes

Introduction

essential skill, find elements in DOM
document.getElementById() & document.getElementsByClassName() are good, using tree structure & tags is better

Use document.querySelector() & document.querySelectorAll() to find Nested Nodes

document.querySelector()

1 arg, CSS-compatible selectors
returns first instance of arg

example:

<body>
    <div>
      <ul class="ranked-list">
        <li>1</li>
        <li>
          <div>
            <ul>
              <li>2</li>
            </ul>
          </div>
        </li>
        <li>3</li>
      </ul>
    </div>
             
    <div>
      <ul class="unranked-list">
        <li>6</li>
        <li>2</li>
        <li>
          <div>4</div> **
        </li>
      </ul>
    </div>
</body>

const li2 = document.querySelector('ul.ranked-list li ul li')

const div4 = document.querySelector('ul.unranked-list li div')

document.querySelectorAll()

1 arg
returns a NodeList collection
- an Array, but not technically an Array

example:

<main id="app">
    <ul class="ranked-list">
      <li>1</li>
      <li>2</li>
    </ul>
             
    <ul class="ranked-list">
      <li>10</li>
      <li>11</li>
    </ul>
</main>

document.getElementById('app').querySelectorAll('ul.ranked-list li')

// => list of Nodes: <li>1</li>, <li>2</li>, <li>10</li>, <li>11</li>

Removing, Altering & Inserting HTML

document.querySelect('element-name').remove()

this is to remove an element

document.classOrIdThing.remove('thing-name-here')

removes a class or id from an element, leaves the element in place

Explicit and Safe .remove() pattern

 let x = document.querySelector('element#id');
 let y = x.parentNode;
 y.removeChild(x);

Explicit and Safe adding

We’ve been inundated by cat owners who are angry that we have missed their favorite species of pet. What JavaScript snippet will add an li with a span inside with the text "Nancy Drew (the cat)" inside to our ul?

 base = document.getElementsByTagName("li")[0].parentNode;
 item = document.createElement("li"); 
 s = document.createElement("span"); 
 s.id = "cat"; 
 s.textContent = "Nancy Drew (the cat)"; 
 item.appendChild(s); 
 base.appendChild(item)

JavaScript Everything

Different Types of User Events

mouse click
- click, double-click, right-click, etc ...
key press
- keypress, keydown, keyup
form submission
- submit ton of browser events

Functions in js

most important thing in js
a series of multiple tasks can be pulled into a function if the series can be generalized
- makes the tasks repeatable

Scope

global scope
- accessible everywhere in js code
block scope
- let & const
- only within their function
variables declared w/out const, let, or (NO!!!!!) var are always globally-scoped
- even within a block

Chain Scope

Chain Scope is using global vars in a local context
matters where it is declared, not invoked
local vars can reference outer scoped vars all the way up the levels

Lexical Scoping

scope based on where vars & blocks defined by developer at writing, solidified when code is processed

Hoisting

by time js engine reaches execution phase all functions are in memory so order is not important in the code itself
best way to avoid confusion, declare all functions at the top of my code
- refactor as needed/on-going or otherwise
use let & const as js engine !allow referenced before initialized

Object Iteration

for ... of

use with arrays, actual ordered data

const myArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
         
 for (const el of myArray) {
    console.log(el);
 }

for ... in

use with objects where order is not required just the key/value pair

 const address = {
    street1: '11 Broadway',
    street2: '2ns Floor',
    city: 'New York',
    state: 'NY',
    zipCode: 10004
 };
 for (const key in address) {
    console.log(address[key]);
    console.log(key);
 };
 // console.log(address[key]) will return the value of the key
 // console.log(key) will return the key

Ruby Rails RESTful & CRUD Quick Reference

James Shipman — Sat, 29 Feb 2020 16:17:01 +0000

Rails RESTful

Generate function

Rails g model

rails g model tablename column1 column2

Tablename, this needs to be what your model is going to be called.

Rails 6 has plurallize built in so it'll make the model singular but keep the table plural as is best practice. To set them as other data types just state them as other than a string.

column1:integer

All the useful data types, there are more but these will get the job done most of the time.

string
integer
float
timestamp

Rails g controller

rails g controller ControllerslName controller actions

ControllersName needs to reference the model with the following convention

ModelsController

The controller actions are, by default, empty unless you specifiy them. The convention is the following order

index show new edit create update destroy

This will setup those seven routes in routes.rb as well create app/views/model and .html.erb files for each route

routes.rb

after runing rails g controller command like above the routes.rb file will be created with the following boilerplate code

Rails.application.routes.draw do
  get '/models/index'
  get '/models/show'
  get '/models/new'
  get '/models/edit'
  get '/models/create'
  get '/models/update'
  get '/models/destroy'
end

This is fine as is or it can be refactored down to a single line resources :models.

If you only generate a controller action as needed then the routes and view file will need to be created manually as you go. This may be a better method of going about building out the basic functionality of your web app to be honest as there will be no routes that are unknown to you as the dev.

side note: I didn't follow that pattern of build only what you need as you go, and in the last code challenge I found myself lost quickly.
While troubleshooting I knew there was more in the app than I had full understanding of.
In the future I will build controller actions out 1 at a time as I need the functionality and route.

To take advantage of resources :models with only specific routes (the buils it as you go method) there is a way to have rails only create those routes you need.

resources :models, only: [:index, :show]

you can add to the list within the brackets as you build out your web app.

controller action methods

For every route you need a controller action method. These live in the ./app/controllers/models_controller.rb file. Each model has a controller and they each inherit from application_controller.rb.

This is a great file to place repeated logic in different models, just have the method in the application_controller.rb and all models will have access to the method

index

def index
  @models = Model.all
end

For index the only thing really needed is @models = Model.all as this will provide the logic needed to be able to access all data in the dB table for the model. This is useful as an index web page that lists out everything - table of contents, or all users, or all whatevers.

show

def show
  @model = Model.find(params[:id])
end

This ensures that a show page for any indivdual record in the dB table for the model can be accessed. This line of code is actually used often in other controller action methods and can be moved to a before_action macro (more on that later though).

new

def new
  @model = Model.new
end

Another brief bit of logic that makes sure the page will send a .new command to the dB to kick off the creation of a new record. Additional logic could go here that would pull in more logic for a New page in the browser.

update

def update
end

This is the best place to any logic for creating, editing, or updating a record. Placing validation logic here will ensure that when you create the update view and use form_for that a submit button will change it's wording to match the actual action. This is super cool rails magic as it will first check if the record id exists, if it does then it'll pull in the record data to your form_for form and the submit button will say 'update'. If there is no record then the form_for form will be empty and the submit button will say 'create'. Also if all routes to any of these actions (craete, or update) are set to the same route than rails again will make sure everything works as expected. Basically just user the update route and rails will take care of it.

Reflections on mod 1

James Shipman — Mon, 17 Feb 2020 21:47:19 +0000

Mod 1, week 3 is nearing completion. We present our projects tomorrow (20200214) and I feel good about the project I worked on.

The important thing though is how do I feel now that I have spent the last 3 weeks being a developer (esentially)....

I feel great!!

I feel that this choice to take 15 weeks to focus deeply on my career transition is not only an extended form of healthy self-care but a really good investment in my own future.

ActiveRecord & Rake cheatsheet

James Shipman — Thu, 13 Feb 2020 21:20:40 +0000

There is a lot to learn when first learning ActiveRecord and Rake. So much so that I created a cheatsheet for myself. This is a quick reference guide for the basic folder structure ActiveRecord (just AR for now) and Rake look for as well as what each file needs to get everything up and running.

Folder Structure

root.
./ < Gemfile >
./ < Rakefile >
./app
./app/models/ < model_file.rb >
./bin < run.rb >
./config < environment.rb >
./db < seeds.rb >, < schema.rb >
./db/migrate/ < 001_migration_file.rb >

Files

For each file there are some basics that each file needs and ActiveRecord. Here is each file as noted above.

Gemfile - this file lists all gems being used in your app. Note in the line for activerecord it calls to a version number, this is optional.

source "https://rubygems.org"

gem "activerecord", '~> 5.2'
gem "sinatra-activerecord"
gem "sqlite3", '~> 1.3.6'
gem "pry"
gem "require_all"

Rakefile - this file establishes connections within the folder structure and creates a live environment through rake console that allows for testing.

require_relative 'config/environment'
require 'sinatra/activerecord/rake'

desc 'starts a console'
task :console do
  ActiveRecord::Base.logger = Logger.new(STDOUT)
  Pry.start
end

model_file - these are highly specific but the minimum. This file acts as the model that matches a table in the app's database. It is a good idea to keep the name here matched to migration file and table that this model file provides custom functionality to.
```
class ModelName < ActiveRecord::Base
end
```

run.rb

require_relative '../config/environment'

environment.rb

require 'bundler'
Bundler.require

require 'active_record'

ActiveRecord::Base.establish_connection(
  adapter: 'sqlite3', 
  database: 'db/development.db'
  )

require_all 'app/models'

seeds.rb - this file will contain test data that can be loaded into the app's database. Prior to creating the seed data it is a great idea to have a line per model that deletes everything out of the data table for that model. This way the seed data can be reloaded as needed and old data will be removed.
```
Model.delete_all
```
schema.rb - This file is created by ActiveRecord, do not edit it manually but it is good to reference back to it as it will contain the lastest version of the schema for all tables within your database.

001_migration_file.rb

class CreateProteinTable < ActiveRecord::Migration[5.2]
  def change
    create_table :proteins do |t|
      t.string :name
    end
  end
end