Forem: Hannah

Build a Website Series Part 2: NodeJS CRUD with Postgres

Hannah — Sun, 01 Nov 2020 03:06:11 +0000

<< Part 1: React Routes || Next tutorial >>

The previous tutorial showed how to set up React with routes and a navbar. Next, we are going to focus on the backend setup.

If needed, here is my repo to refer to. Now on to making the backend!

What Part 2 Covers:

Set up a nodeJS API
Set up a PostgresSQL Database
Build the CRUD (Create Read Update Delete) and confirm it is working via Postman

Before the instructions begin, Here's a little background for the things mentioned above in case you are new to this. Otherwise feel free to skip below to the steps.

Baseline knowledge:

What is an API or “Application Programming Interface”?
When I was brand new to this, knowing the abbreviation didn't really clarify things for me. Instead I tried to understand it via metaphors.

An API is the 'middle person' between the front end (web page that user sees and interacts with) and the backend (where the database is). The API allows the front and back end to communicate back and forth.

A common metaphor you can use to understand the use of an API is to think of a waiter at a restaurant. They take your request or order for food and deliver that request to the cook. Then the waiter brings you back the specified food. Similarly, an API takes a request from a client (user) and gives it to the backend for processing (the cook). The backend returns the request to the user.

What is CRUD?
Continuing with the waiter metaphor, a waiter has multiple tasks they can perform. Those tasks can include getting a menu, updating the cook if you want to alter your order, bring your meal out, or even telling the cook you no longer want something.

With this in mind, there are certain core tasks that an API should do and it is abbreviated as CRUD. As long as an API can do these four things, it is considered a RESTful API which is the standard for a good functional website:

Create: create a new item in the database
Read: display or return existing item/s from the database
Update: change an existing item in the database
Delete: remove an existing item from the database

What is NodeJS?
It is a Javascript based software that can be used to create applications. In the case of this tutorial, it is used to create the REST API server.

What is PostgresSQL?
This is a relational database system. It will hold all the tables and schemas for the website. For example, it will hold the both the template and the actual data for a user’s username, email, and password.

Now that the basic idea has been explained, we can now set up our NodeJS API.

Step 1 -Set up NodeJS-

A. Download and install NodeJS

B. Confirm successful installation by typing node -v in the terminal

C. In the folder containing your project, create a new folder called bird_banders_api

D. To create the NodeJS API, cd into this new folder and write npm init -y in the terminal. The -y is so that it doesn’t ask a bunch of questions and just creates the default settings for us.

E. Now there's several NPM packages to install, they can be written all on one line: npm i express pg cors

The server is through Express, PG connects NodeJS to the database, and CORS allows for domains to interact with each other.

F. To allow the server to automatically display code changes (rather than having to start and stop the server all the time), in your terminal write npm i -D nodemon. The -D is because we only need this installation applied to our development environment, not for the deployed site.

Here is an example of how the terminal should look thus far:

G. Once this is done, if you have Zsh installed, you can type code . in the terminal and it will open the api project in vscode. Otherwise, open the project however you want. The side bar should look like this:

H. To create a file that will handle all the functions of the API. In the terminal write, touch index.js

I. We also need some convenient terminal commands for starting the server. Go to package.json and edit the scripts:

"start": "node server.js",
"dev": "nodemon server.js"

Here is what the package.json file should look like now:

J. In order to start using express (our server) add these lines of code to index.js:

// pulls in the express library
const express = require('express')

// allows us to write app and the crud action we want ex. app.get | app.post | app.delete etc...
const app = express()
const cors = require('cors')

// middleware
app.use(express.json()) // =>  allows us to read the request or req body
app.use(cors())

// Routes (to be filled out later in tutorial)


// define what localhost port we want our server to run on
app.listen(3000, ()=> {
    console.log(`Server running on port: 3000`)
})

K. From here on out, you can now type: npm run dev to start the backend server. In your console, you should see:

We have now completed the NodeJS set up! Now we’ll create the database.

Step 2 -Set up the Postgres Database-

A. There are multiple ways to install Postgres, for me I did it through Mac’s Brew software. If you don’t have brew, you can install it by pasting this in the terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

B. To install Postgres, in the terminal type:
brew install postgresql

C. Connect to postgres with:
psql -U postgres

Explanation:
psql tells the terminal to start the postgres command line.
-U means we are about to specify which user we want to use.
Postgres is the default superuser name, and a superuser means you don’t have any limitations on manipulating databases.

So the above essentially means: start the psql command line through the superuser that is named “postgres”.

D. If you do not have 'postgres' as a superuser, you can create the superuser 'postgres' by pasting this into your terminal. Note the ;, it won't work if you forget to include it in the second command: psql
then: CREATE USER postgres SUPERUSER;

E. Once you are in the psql command line, add:
CREATE DATABASE bird_banders;

We now have our database!

Some commands to familiarize with for Postgres:

\l will show you the list of databases you’ve created so far including the one you just created:

\c bird_banders connects you to that database, so we can add tables to it.
\dt will show us that we don’t have anything set up yet, but in the future this command will show us the tables we have.

F. Connect to the database now by pasting this into the terminal: \c bird_banders

G. Create a table in the database...

Click on summary if you want a beginner's explanation on databases. If not, just keep reading ahead to see the steps.
summary
Using tables in databases
Tables are a series of rows and columns that contain data. If we have many tables, they can all relate to each other to make way for more complex and organized data.

For example, a table could contain a list of people who own pets. This people list contains data for people’s names, location, and pets. Then another table that just contains a list of pets has the pet’s name, age, and species.

Since each person and each animal is on a different table, we give each of them an ID number. So on the owner’s table, let’s say Bob has 3 cats. Instead of listing out each cat on the owner’s table, we just list out the three unique IDs of the cats. Postgres will then be able to pull up all the information about those three cats on the pet table. It’s essentially like a “separation of concerns” for data.

... For my bird banding project, I want to start off with something simple. There will be individual organizations who use the website, so I need a table to keep track of their names. In future tutorials, the database will grow more complex, but for now we’ll just stick with this. I have refrained from using “group” for the table name because group is a reserved word in Postgres, meaning it may refuse to create the table since group can used as a command or cause bugs later.

H. Enter the following code into the terminal to create the table (I have shortened “organization” to “org”):

CREATE TABLE org(
    org_id SERIAL PRIMARY KEY,
    name VARCHAR(100)
);

Explanation:
SERIAL PRIMARY KEY tells Postgres to make a unique ID number for each organization. Name VARCHAR(100) tells Postgres that each org will have a name attribute and that it shouldn’t exceed 100 characters in length.

I. When \dt is typed into the terminal, we can see our database now has a table. The below image show what the terminal should look like after following steps F through I:

J. This newly created database now needs to be connected to the nodeJS server. Press ctrl + d to get out of Postgres in the terminal and go back to the nodeJS project in VScode. Write touch db.js to create a file to hold the database settings.

K. Inside of db.js we’ll add:

const Pool = require('pg').Pool

const pool = new Pool({
    user: 'postgres',
    password: '',
    database: 'bird_banders',
    host: 'localhost',
    port: 5432
})

module.exports = pool;

Explanation
Earlier in the tutorial we installed pg which is a library that allows Postgres and NodeJS to connect. Pool contains all the information that nodeJS needs to communicate with the database. The 5432 port is the default for Postgres. Lastly, we export this as a module so that we can actively use it in our main file, index.js

L. In index.js, add under the other requires:
const pool = require('./db')

Here is what it should look like so far:

Now we can finally get to the CRUD!

Step 3 -Build the CRUD-

Each of the CRUD operations follow a similar formula:

app.action(‘route path’, async (req, res) => {
    try {
        const data_we_want = await pool.query(“postgres commands”)
        res.json(data_we_want)
    } catch (err) {
        console.error(err.message)
    }
})

Explanation:

app.action could be app. get, post, put, or delete. We’ll be doing one of each.

There are two arguments that go into the app.action. The first is the route path, in the current case, it’ll be /orgs since that’s the table we’ve created.

The second argument is a function that will process data. Think inception… because this function also takes in two arguments. They are the request and the response for the data (think back to the waiter analogy as well). It is like this function is taking in the order for your meal and will output that meal once the chef has prepared it.

try and catch is a handy way to execute a block of code, but also have a backup action if that block of code fails. In order to use this though, we have to make the function asynchronous or put the async label in front of it and the await in front of the query.

try is where you put the block of code you want to attempt. catch is what will execute if that block code fails.

With repetition this will start to make more sense.

A. Create action
The create action allows the front end user to create an organization with a name. This would usually be submitted by a front-end user. This new incoming information is contained in a request or req (think about the waiter metaphor.. requesting a food order to a waiter).

Paste this code in your routes section in index.js

// create an org
app.post('/orgs', async (req, res) => {
    try {
        // await
        console.log(req.body)
        const { name } = req.body
        const newOrg = await pool.query(
            "INSERT INTO org (name) VALUES ($1) RETURNING *", // returning * lets us see the data in the json response
            [name]
        ) 
        res.json(newOrg.rows[0])
    } catch (err) {
        console.error(err.message)
    }
})

The index.js page should look like this:

Explanation:
The route is /orgs because that’s the name of the table we want to interact with.

If we had a user table (which we will go over in a future tutorial), then the route to create a new user would be /users.

In the try block, we only want to grab the actual name of the organization from req, which is inside the req’s body. Destructuring the name out of the body makes the code look cleaner.

Once the organization’s name is pulled out of the request, that data must be sent to the org table in the database and a new organization must be created:
“INSERT INTO org (name) VALUES ($1) RETURNING *", [name])

The $1 sign is just a variable placeholder in the first argument and the second argument [name] is the value that will be inserted into where $1 resides in the Postgres command.

RETURNING * lets us see the data in the json response (for example if you are using Postman).

In Postman:

Set the link to http://localhost:3000/orgs
Select POST (dropdown menu to the left of the link)
Select 'Body'
Make sure 'raw' is selected as well as 'JSON' (next to where it says 'GraphQL')
Type some incoming data:

{
    "name": "Bird Group" 
}

Press the blue send button to see the results. If successful it should say in the lower half of the screen:

{
    "org_id": 1,
    "name": "UTD Birding"
}

B. Read action
The read action for seeing all organizations in the database is one of the easiest actions. And now that we can add some names with the create action, we can actually see some these new orgs by using the read action. Below the create action, paste in this:

// get all orgs
app.get('/orgs', async (req, res) => {
    try {
        const allOrgs = await pool.query("SELECT * FROM org")
        res.json(allOrgs.rows)
    } catch (err) {
        console.error(err.message)
    }
})

Explanation
The * means all, so the query is saying select all items from the org table.

res.json(newOrg.rows[0]) sends back (can see on postman) the new information that was generated.

In Postman:

Make sure the link is still http://localhost:3000/orgs
Select GET to the left of the link
Press the blue send button to see the results. If successful you should now see a list of organizations in your database.

C. Read action 2
The second most common read action is when you want to only get one organization from the table instead of the whole list.

// get only one organization
app.get('/orgs/:id', async (req, res) => {
    console.log(req.params)
    const { id } = req.params
    try {
        const org = await pool.query("SELECT * FROM org WHERE org_id = $1", [id]) 
        // $1 is a placeholder, then the 2nd argument is what that variable is 
        //going to be
        res.json(org.rows[0])
    } catch (err) {
        console.error(err.message)
    }
})

Explanation
It is pretty much the same thing as the previous read action, only this time we need one extra thing for it to work. Remember how each organization in the table has a unique ID attached to it? Well, we can grab that from the req.params. And we add the id to the route path /orgs + /:id.

In Postman:

Add an ID number to the end of the url: http://localhost:3000/orgs/2
Select GET to the left of the link
Press the blue send button to see the results. If successful you should now see the organization that is associated with with that ID number.

D. Update action
The update action is one of the more complex actions. It is very similar to our previous action of getting only one organization. We need the ID number in order to know which organization in the table to update. We then need to grab the updated information from the req.body.

// update an organization
app.put('/orgs/:id', async (req, res) => {
    try {
        const { id } = req.params // where
        const { name } = req.body // grab the new info
        const updateOrg = await pool.query(
            "UPDATE org SET name = $1 WHERE org_id = $2", [name, id]
        )
        res.json('The organization name was updated')
    } catch (err) {
        console.error(err.message)
    }
})

Explanation
"UPDATE org SET name = $1 WHERE org_id = $2", [name, id]
The query is saying:

UPDATE at the org table.
SET the name of the organization WHERE org_id matches the variable $2
There are two variables needed for this, the name hence the $1 and the id hence the $2.

The res.json line is to return to the user a message that the update was successful.

In Postman:

Add the ID number of the organization you want to update. If you are unsure which to choose, try performing a GET in Postman first. http://localhost:3000/orgs/1
Select PUT to the left of the link
Press the blue send button to see the results. If successful you should now see a message saying "The organization name was updated".

Delete action
We’ve finally reached the last action! This one is pretty straightforward. Once again, we need to grab the ID so we know which organization to delete.

// delete an org
app.delete('/orgs/:id', async (req, res) => {
    try {
        const { id } = req.params
        const deleteOrg = await pool.query(
            "DELETE FROM org WHERE org_id = $1", [id]
        )
        res.json('The organization was deleted')
    } catch (err) {
        console.error(err.message)
    }
})

Explanation
"DELETE FROM org WHERE org_id = $1", [id])
For the query it means DELETE FROM the org table WHERE the org_id matches the $1 variable, which is set to [id].

In Postman:

Add the ID number of the organization you want to update. If you are unsure which to choose, try performing a GET in Postman first. http://localhost:3000/orgs/1
Select DELETE to the left of the link
Press the blue send button to see the results. If successful you should now see a message saying "The organization was deleted".

So with that, you should now know how to set up your backend!

Build a Website Series Part 1: Set up React with Routes and Navbar

Hannah — Mon, 14 Sep 2020 20:31:32 +0000

Hey all, I am going to rebuild one of my bootcamp projects from the ground up now that I have better fullstack development skills. I am documenting the steps for making a fully functional and deployed site.

If you want to follow along, here is what you need to know:

Before starting:

The tech stack is React and Node.js, so make sure you install these on your computer. I use VS Code and work on a Mac (though these steps should still work on a PC).

Install React
Install Node.js

This tutorial also requires you be familiar with using your command line/terminal. If you are unsure about this, try searching for tutorials on how to use this. I have Zsh installed for my terminal, so keep that in mind when viewing some of this tutorial's screenshots.
Here is my repo for this project

What Part 1 covers:

Create a new React project that includes packages for this specific project
Link the new project to a Github repo
Create simple pages as React components
Add routes(links) to these pages
Add a styled and functional Navbar to site

Step 1 -Create project and add packages-

A. Open the terminal inside of VS Code and make sure you are in the correct folder where you want to create the project (Type in ls to help see which folder you're in)

B. Create the React project. The last part shown below is the title of the project, so you don't have to type in "bird-banders" but it may make it easier to follow along in later steps if you follow my file names. In the terminal type:

npx create-react-app bird_banders

C. cd into the new react project

D. At this point, at any time you can run the site on your local host by typing npm start or yarn start in the terminal

Summary of commands:

npx create-react-app bird_banders
cd bird_banders
npm start

E. This React project needs some additional packages for the features in this tutorial.

React-Router-Dom is needed to create navigable pages (and will later allow us to have protected pages that can only be viewed by logging in).

Bootstrap is needed to give us some default styling to the website that would otherwise take hours and higher level skills.

Sass Styling makes styling so much easier and cleaner. Sass also allows us to easily import Bootstrap's styling into the project.

In your terminal in the project type:

npm install --save react-router-dom

npm install react-bootstrap bootstrap

npm install node-sass --save

Example of what it should look like:

F. Inside of src folder, rename App.css to App.scss and in this file add at the top:

@import 'node_modules/bootstrap/scss/bootstrap'; // existing bootstrap import

You may need to type npm run build in order for React to put all this together.

Step 2 -Set up Github repo-

A. It is important to set up a remote repo for backup and tracking your code changes and implementations. It is very simple, if you already have an account just go to: https://github.com/new
Otherwise, make an account first then go to the above link.

B. React automatically creates a local repo, so to add it to GitHub, just follow these steps (but with your own link) in your VS Code terminal:

On a side note, its been a while since I linked my github account with my terminal, so if you've never set that up before, you may have to do some additional steps on your terminal

C. Go to the GitHub project page to make sure your local project successfully saved to Github

D. To begin coding, in your VS Code terminal open the react project folder. Since I have Zsh installed, I just type code . in the terminal

Now the sidebar in VS Code should look like this:

Step 3 -Create simple pages as React components-

A. You may have noticed that if you start the server, there is a default React page with a rotating icon. I like to start with a clean slate, so open the App.js file and we'll remove the unnecessary lines, so it should look like this:

import React from 'react';

function App() {
  return (
    <div>

    </div>
  );
}

export default App;

B. When I build a somewhat complex site I organize a design document and sketch in a notebook. I have a list of core functionalities the site needs and like to start off with a basic navigable site. After that I fill in each page and functionality. I’ve decided to implement the navbar and routes first.

Note- the design doc is not complete. I just add as I go but it helps me get a sense for what all needs to be done and it can give you an idea of what tutorials will happen in the future.

C. For the first pages let’s start with:

Home
UserProfile
Organization
Organizations

Right click src and add new folder called pages

D. Inside of the pages folder, create new js files with the names of your pages (listed above). When you're done the sidebar should have this:

E. Fill in the base code for each component, since they’re all pages they’ll be pretty similar. I am using hooks for this project, so we will not be using classes, but rather functional components. Below is what each page component contains, just make sure to name the function and export correctly.

import React from 'react'

function Home() {
    return(
        <div>
            <p>Home page</p>
        </div>
    )
}

export default Home

Step 4 -Add routes(links) to pages-

A. Now that the pages exist, we want to be able to actually see these pages in the browser and ideally with the correct url. An easy way to do this is by adding Routes via the React-Router-Dom package. To do this, open App.js and starting on line 2 add:

import {BrowserRouter as Router, Route} from 'react-router-dom'

import Home from './pages/Home';
import Organization from './pages/Organization';
import Organizations from './pages/Organizations';
import UserProfile from './pages/UserProfile';

B. Now we've essentially 'activated' the router functionality and imported each page into the app. Now we want to be able to render the pages. Inside of return (which is where things get rendered), add the Router component like so:

<Router><Router/>

C. Inside of the Router component, add each page route. The general pattern is:

<Route path='pathname'>
    <Name of page component/>
<Route />

And make sure to only ever have ONE Router component. You can have many routes, but only one Router.

The end result for App.js should look like this:

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom'

import Home from './pages/Home';
import Organization from './pages/Organization';
import Organizations from './pages/Organizations';
import UserProfile from './pages/UserProfile';

function App() {
  return (
    <Router>
      <Route exact path='/'>
        <Home/>
      </Route>
      <Route path='/organization'>
        <Organization/>
      </Route>
      <Route path='/organizations'>
        <Organizations/>
      </Route>
      <Route path='/UserProfile'>
        <UserProfile/>
      </Route>
    </Router>
  );
}

export default App;

Now, as long as you type in the /pagename on your browser, you should see the correct component.

However, that’s obviously not an ideal way to navigate through a site, hence the navbar is needed.

Step 5 -Navbar-

A. We are on the home stretch for this tutorial! Adding the navbar is pretty easy. Within src, create a new folder called ui-components, and inside that create a js file called Header.

Here is what the sidebar should look like now:

B. This Bootstrap navbar page can help you learn more about how they work. I am only including Home and Organizations in the navbar. This is what the Header component contains:

import React from 'react'
import { Nav, Navbar } from "react-bootstrap";
import { Link } from 'react-router-dom'

function Header() {
    return(
        <Navbar className="w-auto p-3 fixed-top" collapseOnSelect expand="lg" bg="dark" variant="dark">
            <Navbar.Brand as={Link} to="/">BirdBanders</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="mr-auto">

                </Nav>
                <Nav>
                <Nav.Link as={Link} to="/">Home</Nav.Link>
                <Nav.Link as={Link} to="Organizations">Organizations</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default Header

C. Put the header in the app. To do this, inside of App.js near the top add: import Header from './ui-components/Header';

D. Inside of App.js in the Router component, put <Header/> at the top. Since it should be on every page, it does not go inside of a Route component.

<Router>
      <Header/>
      <Route exact path='/'>
        <Home/>
      </Route>
etc...
<Router />

E. The very last thing is to fix how the navbar is covering the top of each page, and thus covering the page titles in the browser. In App.js, surround the <Header /> component with a div. Add a className of navbar to it.

<div className='navbar'>
  <Header/>
</div>

F. In App.scss and add:

.navbar {
  padding-bottom: 69px;
}

Awesome... now everything should be in working order! You now have a React website with pages and a working navbar. Consider this a massive playground now for you to experiment with.

Let me know how this tutorial was or any questions/comments you have. Next up will be setting up the backend.

Next tutorial >>

Introduction to TDD: What it is and why it is important

Hannah — Tue, 04 Aug 2020 21:32:56 +0000

Many companies today are using test driven development or TDD to create their web software.

Why is test driven development so important?

TDD has become very popular because it prevents issues and bugs in the future, it can increase the efficiency of your work flow, and help teams communicate the intentions of their code's functionality. A downside of TDD is that it takes longer to get a project started, so it requires a little bit of up-front patience.

The basic flow of TDD

Create a test (make sure it fails so you don't get a false positive)
Write code to try to pass the test
Once passing, refactor where possible in both test and implementation code
Create the next test and repeat

Concepts to keep in mind while creating tests

Readable -> Make it clear what the test's actual and expected behavior is, and why.

Isolated -> Make sure tests only cover a particular segment of code, because you don't want certain tests interfering with other tests. If interference occurs, you may not know if the test failed due to your target code or from a previous test.

Thorough -> Prepare for edge cases, like if someone enters in something totally unrelated to the expected input. For example, what if someone tries to submit an empty form?

Explicit -> This ties in with code readability. If someone looks at the test, they should be able to require little setup.

The 3 main types of tests

Unit test -> small pieces of functionality

Integration test -> checking if all the smaller tests/code work together such as seeing if the app communicates with an API (Application programming interface) correctly

End-to-End -> tests entire application from user viewpoint (examples: Selenium or Cypress.io)

Getting Started

(usually in the form of libraries)

Testing environment/test runner (the place to run tests)
Testing framework (Ex. Mocha or Jasmine, organizes/holds your test code)
An assertion library (this allows you to not have to write tons of if-statements, this does the actual verifications of test results)

Sources:
https://www.linkedin.com/learning/javascript-test-driven-development-es6

https://stackoverflow.com/questions/25678063/whats-the-difference-between-assertion-library-testing-framework-and-testing-e

What I Learned About Attitude and Mindset in Coding Bootcamp Pt. 2

Hannah — Thu, 02 Jul 2020 18:44:50 +0000

This is my second post out of a three part series regarding attitudes and approaches to healthily get through a coding bootcamp. Aside from learning to temper my hyper-focus on competition, I’ve also learned that self care is not something to ignore or avoid.

Self Care is mandatory
Pace, balance, rest, and understanding… all of these things contribute to the concept of self care. Think of someone who you care deeply about; for me it would be my future son or daughter. Now, take a look at the way you run your life and the way you treat yourself. Would you want that for them? Would I want my daughter to work an average of 12 hours a day on code and then feel afterwards like she was a total failure and not good enough? Of course not. Sometimes when we step out of our shoes, we can see the absurdity of the expectations we hold for ourselves. Not only is it absurd, but it is not sustainable to ignore other facets of life that make things meaningful. Each one of us is valuable and worthy of self care.

Mistake:

I got super into the flow of coding during the bootcamp, and in the moment I was like, “I’m not gonna stop until I have everything working!” It was an addictive flow. However, day after day of doing this, I started having focusing and memory problems. I also couldn’t sleep properly because my mind was literally still trying to code in a half dream state. It got to the point where I was forgetting to eat, drink, and get up to go to the bathroom. I started to feel mildly insane.

Improvement
Then I realized that I was essentially marathoning. In an actual marathon, you run just over 26 miles. Even if you love coding, even if you love running, no one is going to thrive if they keep working at maximum capacity. I felt guilty initially when I took breaks, like “oh I could be learning more about enumerables right now instead of laying in bed”, but then I had an attitude shift to, “I feel guilty about not taking care of myself properly.” Would you feel badly towards someone who just ran a marathon and they’re asking for a break?

This brings in the concept of pacing. It is easier on the body to run a few miles per day rather than doing it all in one session. Same with the brain. Even though I have the capacity to marathon the project, that’s probably not what I should do. Eventually, I discovered what works best for me: I code 9am-12 noon. Take a yoga and lunch break. Then 1-5pm do more code. Afterwards, I play board games with friends, work on art, and exercise outside (and sometimes splurge on Netflix or Youtube). When I pace it out, it is absolutely amazing how my mind feels so much better. More focus, less stress and it's easier to go to sleep. And just as importantly, my life is more full of all the things I love; I’m not missing out on them.

What do you think about self care and pacing? What works for you? Feel free to comment below!

Read Part 1

What I Learned About Attitude and Mindset in Coding Bootcamp Pt. 1

Hannah — Wed, 01 Jul 2020 17:31:21 +0000

Going into the Flatiron bootcamp, I was extremely excited and wanted to just eat up every piece of knowledge and skill I could get my hands on. However, as a newbie, my approach to making it through the bootcamp went through some important changes. It's not just typos and code logic that a new developer has to wrestle with, but also some mental aspects. This article covers the first of three.

Temper your competitive mindset

There are some people who straight up say, “it's not a competition, never compare yourself to others.” However, from my own reflection and seeing how others behave, I think we all have some level of competitive energy, and it can help push us to be our best. It's just a matter of how we harness that energy and our awareness of it.

Mistake:
In the beginning of the bootcamp, I had this mindset of “I need to be the best, I need to outshine everyone in order to be noticed and valid.” This caused me to have expectations that were too high for myself, leading to constant disappointment and led to my second mistake, overworking. What I found out later, was that some of the students had already been coding for years, or had gotten a degree in computer science and had already had developer jobs! Of course, their projects would reflect that.

Improvement:
According to the Merriam Webster dictionary, to temper something means to “to dilute, qualify, or soften by the addition or influence of something else”. Competitive energy can be a really good thing as long as it's not the only thing driving you. So what can we temper competition with?

For me, I chose a progress oriented mindset. Essentially, anytime I learned or implemented a new functionality or even a single line of code that worked, no matter how small, I chose to see it as a positive step worthy of celebration. It's turned into a habit now, and I feel much more satisfied and proud of my effort and work this way.

Another approach I used to temper my competitiveness was focusing on my own internal goals unrelated to what others were doing. I have a dream of making some games and releasing them online on a website I create. Anytime I learn something that contributes to that, I get an endorphin release.

Now when I reflect on my competitive spirit, I think on how I want my projects to look on par with others and I want people to have a little wow moment when seeing my work, but their reactions don’t weigh on me as heavily since I am driven by multiple facets.

What approaches do you have regarding your developer work? Where do competition, progress, and goals fit into your mindset? Let me know in the comments : )

Read Part 2

How to 'Not Advertise' Your API Key in React Apps

Hannah — Sat, 27 Jun 2020 18:42:32 +0000

Update note: I have revised this article to be more specific about which kind of API I'm talking about after receiving the first several comments.

In this article, I talk about how to make your frontend API key environment specific. This is for a client-safe key that you would need to use for Google maps or Stripe, for example. I am NOT talking about an AWS key.

Why you shouldn't advertise your frontend API key:

When my instructor told me to never push code to Github that had my API key on it, I wondered how it could possibly matter. His answer was essentially, web crawling software is all over the internet and looks through places like Github, searching for low hanging fruit- in other words a frontend API key that is not environment specific. So how do you make it environment specific?

Here’s how in 4 steps:

(1) In the root of your directory in your React app, created a file called .env

(2) Inside of this file, type: REACT_APP_API_KEY=[key]. Make sure to remove the brackets [ ].Example:

(3) In your .gitignore file, add .env on a new line (see line 18)

(4) You can then use your key in your app by declaring a variable and set it equal to: process.env.REACT_APP_API_KEY
Below is an example of how it might declared and used.

How to make a DELETE form using Rails Middleware in 3 easy steps

Hannah — Fri, 22 May 2020 19:43:37 +0000

If you’ve recently learned how to create forms for GET and POST methods, your next inclination is probably to try out DELETE or PATCH. However, you’ll quickly find out that forms do not support these and that no one knows exactly why this is (if you happen to know, send me a message!).

The internet is filled with vague work arounds and half-formed tutorials for making a delete form. It will make you wonder how the heck anyone else figured this out. Turns out, as per usual with programming, there are multiple ways to accomplish this goal. This tutorial will show you one of them so you don’t have to patch together (no pun intended) various ambiguous instructions from multiple websites.

Behold, Rails Middleware...

What is Middleware, in beginner’s terms?
Essentially it is a separation of concerns. Middleware includes a bunch of methods that an HTTP request is passed through before it finally hits your routes and controller methods. Some of this is automatic, and other times, you need to manually enable a certain middleware method.

What does this have to do with making a form DELETE rather than GET or POST?
Well, if middleware can influence an HTTP request before it hits your controller, then maybe there’s a middleware method that can change your request from GET/POST to DELETE!

And guess what, there is! It's called Rack::MethodOverride. This magical thing is very obscurely documented, so I’m going to lead you step-by-step on how to get it working. You can also see the code directly on my Github (README tells you how to set it up quickly): Backend repo | Frontend repo

Overview of what to do:

Enable Rack::MethodOverride in your backend
Create a form in your HTML file
Customize the form in your Javascript file

Step 1: Enable Rack::MethodOverride in your backend

In your Rails application, navigate to ‘config/application.rb’
Within this file, navigate to the module that has the same label as your application, in my case, SampleApi
Under “config.load_defaults 6.0”, paste in: “config.middleware.use Rack::MethodOverride” and save. (For the sake of readability, I’ve removed the default comments)

module SampleApi
  class Application < Rails::Application

    config.load_defaults 6.0
    config.middleware.use Rack::MethodOverride

    config.api_only = true
  end
end

Step 2: Create a form in your HTML file

In your HTML file when creating the form, leave the action empty, and set the method to “POST”
Make an input element inside the form with these attributes:

type=”hidden”, meaning the user of your webpage will not see it
name=”_method”, this is for the backend to recognize that this input is actually to be taken as a method
value=”delete”, this sets the previously mentioned method to DELETE rather than POST

    <form action="" method="POST">
        <input type="hidden" name="_method" value="delete" />
        <label>Select book you want to remove from your list:</label>
        <p></p>
        <select id="book-select" name="book_id"></select>
        <input type="submit" value="Remove book from your list">
    </form>

Step 3: Customize the form in your Javascript file

Grab the value in the input field that you want to send to the backend, in the case of DELETE, you’ll want the id of the object you want to delete. In my example, my function is getSelectionValueOnDeleteForm():

// grabs the initial value when the page loads (in this case, the "Coraline" book)
    let select_id = document.getElementById("book-select");
    let id_value = select_id.options[select_id.selectedIndex].value;

    // grabs the value of the menu drop-down selection when the user clicks on a book, 
    // but hasn’t pressed submit yet
    document.getElementById('book-select').addEventListener('change', function() {
        id_value = this.value;
    });
    return id_value;

Finally, grab the form element and set its action (remember how we left this blank in the HTML file?):

function setActionTypeOnDeleteForm(){
    id_value = getSelectionValueOnDeleteForm()
    const bookDeleteForm = document.querySelector('body > form')
     id_value = parseInt(id_value)
     bookDeleteForm.action = `http://localhost:3000/books/${id_value}`
}

Now that these steps are complete, in one terminal from your backend application, run “rails s”. And in another terminal or tab, from your front end folder, run “lite-server”. Watch the magic happen. Or start bug fixing, because if you’re like me, there’s probably a typo or two in there.

Important note: If you already had your rails server running and lite-server, you need to restart them in order for the changes to take effect! And don’t forget to look over the README if you’re trying out my example code on Github. If you have any troubles, leave a comment and I'll do my best to help!

Resources:

The best articles I can find on Middleware: https://www.rubypigeon.com/posts/examining-internals-of-rails-request-response-cycle/

https://dev.to/xngwng/what-is-http-middleware-best-practices-for-building-desiging-and-using-middleware-5g10

Official guide:
https://guides.rubyonrails.org/rails_on_rack.html#action-dispatcher-middleware-stack

Hello! A small introduction from an artist and software engineer

Hannah — Thu, 21 May 2020 18:12:26 +0000

Hello there! This is my first hello to the programming side of the online world.

After getting my B.A. and M.A. in Arts and Technology, I wondered what to do with my life. I’ve always been a creative person and had engineering-like qualities of wanting to solve problems and solve them efficiently, but narrowing down what exactly to become skilled in is hard.

After a year of freelancing post-college, I became very frustrated one day. I hit a breaking point when designing a Wordpress site for a client, and realized that I was held back by my lack of technical knowledge. I hated that when I used the pre-made themes and templates, I had so much trouble making small tweaks and customized alterations.

When looking at the source code, I realized that if only I knew how all this worked, I would have freedom. It was an "ah-ha" moment. If I knew how to code, I would be free. Free to create what I wanted, free to solve the problems that had been eating away at me when I spent hours staring at the screen.

Over the next few weeks, I had yet another breaking point where I wondered if this meant getting another college degree. I just finished college for crying out loud, I didn’t want to sacrifice yet another 4 or more years just to find a place in life, a career, a meaning. That’s when I came across coding bootcamps, and after hours of discussion with family and friends, and interviewing the bootcamp instructors, I realized that this was exactly what I was looking for. An intense dive into learning skills that would propel me forward, that would build off of what I already know, that would overcome the barrier between my ideas and tangible finished projects. This is what I wanted.

The next few months involved doing prepwork and trying to learn to code on my own (when I wasn’t freelancing and angrily longing for programming skills). I didn’t just like it, I found it addicting. Getting that adrenaline rush when I overcame a logic problem and made something print out correctly on the screen… I knew this was the right path.

Now I’m in the midst of the bootcamp, coding around 10 to 12 hours a day, a complete novice, and only catching glimpses of just how deep the world of programming might be. I’m extremely excited to see where this path in life will take me, and I look forward to sharing my learning process, philosophical thoughts, and projects along the way with you!