DEV Community: Amanda Murphy

Data Structures Study Session: Arrays

Amanda Murphy — Wed, 02 Feb 2022 21:59:49 +0000

Starting off with one of the more familiar data structures--even if you're new to programming you've probably heard of arrays.

An array is a list of elements (usually the same type), identified by an index or unique value that starts with zero. I think about it the way I think about an ordered list. For example let's imagine we're making a To-Do list where we want to knock out tasks in a specific order.

If you wrote it down on a piece of paper, you might have something like this:

Wake up
Workout
Shower
Eat
Go to work

If we were to make an array out of that list, it would look something like this:
let toDoList = ["Wake up", "Workout", "Shower", "Eat", "Go to work"];

(Just a note on the use of quotes: We're creating this array with a list of strings. If you tried to pass in Wake up without quotes, you'd get Uncaught SyntaxError: Unexpected identifier because the browser would try to evaluate Wake up as a variable, and we have not defined a variable here.)

Try it in the Console

Let's go ahead and take a look at that in the console. Now I don't know why I didn't learn to use the browser console more often when I was first studying code, but it's a great way to test out your code if you're just puttering around.

To open your browser console:

Right click on the this web page, then select Inspect. (I'm using Chrome, but on other browsers the option might be called something other than Inspect.)
At the top, you'll see a row of options. Click on Console.
Click into the console and paste our definition of toDoList above. It will return undefined.
Next enter console.log(toDoList). This should return something that looks like this: (5) ['Wake up', 'Workout', 'Shower', 'Eat', 'Go to work']

There's the (5), because regardless of if you start with a 0 or a 1, there are five elements in your written to do list or your toDoList array.

You'll also see an arrow pointing toward the (5). Click on it to expand. Now you should see something that looks like this:

0: "Wake up"
1: "Workout"
2: "Shower"
3: "Eat"
4: "Go to work"

If we take a look at this line: 0: "Wake up", you'll see we have an index of 0, and at that index of 0, we have an element, which is a string (quotation marks) that says Wake up.

Examining and Modifying Arrays

To view or use a specific element in your array, you can call it like this:

toDoList[0];
// returns 'Wake up'

You can also view the length of the array by calling length, like so:

toDoList.length;
// returns 5

But what if you decide you want to add or remove an element of the array? Well here are a few basic array functions:

// Add an element to the end of an Array
toDoList.push("Eat lunch");
// returns 6, the new length of the array
// Array is now: ['Wake up', 'Workout', 'Shower', 'Eat', 'Go to work', 'Eat lunch']

// Remove an element from the end of an Array
toDoList.pop()
// returns 'Eat lunch', the element that was removed
// Array is now: ['Wake up', 'Workout', 'Shower', 'Eat', 'Go to work']

// Remove an element from the beginning of an Array
toDoList.shift()
// returns 'Wake up', the element that was removed
// Array is now: ['Workout', 'Shower', 'Eat', 'Go to work']

// Add an element to the beginning of an Array
toDoList.unshift("Drink coffee");
// returns 5, the new length of the array
// Array is now: ['Drink coffee', 'Workout', 'Shower', 'Eat', 'Go to work']

Looping through an Array

One more thing I wanted to share is looping through an array. When you loop through an array, that means that the code starts with the first element of that array, does something to it, and then moves on to the next element of the array until certain conditions are met.

Here's an example:

toDoList.forEach((task) => {
     console.log(task)
});

// returns 
// Drink coffee
// Workout
// Shower
// Eat
// Go to work

So we're taking our toDoListArray and calling the forEach() function on it. Inside the first set of parentheses, we are defining how we will refer to one element of the array (I'm calling it task here just to avoid calling it something generic).

The first time in the loop, task is equal to the first element of the array, our "Drink coffee" task. Inside the loop, we call console.log(task) which prints "Drink coffee" to the console. The second time the loop happens, the task is equal to the second element in our toDoList array, which is "Workout". This continues until the loop has gone through every element of the array and printed them out.

If you run this code in your console, you'll see it happens really fast, so it looks like it's doing it all at once, but it's happening one element at a time. Let's define a sleep function just so we can see how this is happening in action.

Okay, so what if you wanted to loop through the array printing out the index with the task? You'd do something like this:

toDoList.forEach((task, index) => {
     console.log(`${index}. ${task}`)
});

// returns 
// 0. Drink coffee
// 1. Workout
// 2. Shower
// 3. Eat
// 4. Go to work

And if you wanted to print out something that looks closer to our original written to-do list, you'd probably have to get rid of that 0. and start with 1. right? Well, there's an easy fix for that. You can just add 1 to the index when you're printing it out in the console.

toDoList.forEach((task, index) => {
     console.log(`${index + 1}. ${task}`)
});

// returns 
// 1. Drink coffee
// 2. Workout
// 3. Shower
// 4. Eat
// 5. Go to work

That's all I have for today! There's a lot more you can do with arrays, these are just some of the basics.

You can learn a lot more about arrays at MDN Docs, which is the resource I used most when I was using JavaScript for my work as an SDE I at Amazon Web Services.

I am going give some of these HackerRank array challenges a try.

Thanks for reading!
-A

Connect with Me
GitHub
LinkedIn

New Series: Data Structures Study Sessions

Amanda Murphy — Wed, 02 Feb 2022 21:58:01 +0000

Hey there!

It's been a while since I've written anything technical, but I'm working on some specific learning goals for myself in 2022, so I thought now was as good of a time as any to start writing some technical posts in order to reinforce my learning.

So one goal I have for 2022 is to study for and pass my AWS Solutions Architect exam. I'm not interested in transitioning to a Solutions Architect role, but I have heard this is a great way to learn about several critical AWS services. While I worked at AWS, most of the services and systems we used were established by other engineers, so I used them in a very narrow context. I am really excited to learn more about AWS services and how they are set up from scratch. I'm using A Cloud Guru's AWS Certified Solutions Architect course to study for the exam, because I've heard really great things about A Cloud Guru. I probably won't end up writing much about my studies for the exam, but I thought I would share that goal anyway.

My second big goal is to study data structures more rigorously. I read a book on Data Structures and Algorithms in C++ while I was completing my apprenticeship at AWS, but I was new to C++ and a lot of it went over my head. So I'm back at it, studying so I learn how to use data structure better in my day-to-day work life as a software engineer at AppHarvest, but also so I have an easier time when it comes to looking for my next role as a software engineer (hopefully that's not for a while, but I figure there's a lot to cover and I might as well start now.)

Our principal engineer at AppHarvest suggested picking one data structure each week to study, and then work on one easy HackerRank challenge each day, before working on a more difficult challenge on each Friday. I've never used HackerRank, but I'm excited to give it a try. I'd also like to write one article about each data structure I study to reinforce what I'm learning, which is how I find myself writing about code for the first time in a while.

After talking it over with him, doing some research on most critical data structures to know for interviews, and taking a look at the book I read last year, I came up with the following list:

Arrays
Linked Lists
Stacks
Queues
Deques
Trees
Binary Search Trees
Balanced Trees
Search Trees
Trie
Hash Tables
Maps
Priority Queues
Heap
Disjoint Set
Multiple Choice
Skip Lists
Graphs

As I complete articles for each of these data structures, I'll try to loop back and link them here. I believe there's also a way to create a series, so I'll try to add those as well. I'll also include additional resources I find that help me in my data structures study to share with anyone else who is hoping to learn more for technical interview prep.

Two notes:

I primarily worked with JavaScript / Node.JS for the past year and a half so that's what I'm most comfortable using. When I studied data structures during that time, I was learning how they were implemented using C++. I'm now in a role that primarily uses Java, so there might be a bit of a crossover to Java at some point. My brain doesn't really single out programming languages, I generally just use whatever works best for the job.
I am new to this. If you read something that is incorrect, gently let me know. I'd appreciate it. Being rude will just make me sad. Don't do that. It's been a rough couple years for everyone and we don't need to pick on folks.

I'm really looking forward to learning more and becoming more confident about data structures this year.

Thanks for reading!
-A

Connect with Me
GitHub
LinkedIn

Tasker, React/Redux + Rails API Final Project

Amanda Murphy — Fri, 14 Jan 2022 20:01:15 +0000

View Tasker's Front-End on GitHub
View Tasker's Back-End on GitHub

Summary

When I sit down to work, I usually have several tasks that need to get done. An old fashioned to-do list is pretty good, but what I find is that I usually get stuck on one task and at the end of my work time, I haven't accomplished what I needed to get done that day. My husband and I came up with the idea of Tasker as a time management application, where you could input tasks and the amount of time you wanted to spend on each. Tasker would start a timer for each task, and alert you when it was time to move to the next task.

Languages and Tools Used

Ruby, Ruby on Rails API, PostgreSQL, ActiveRecord, HTML, Semantic UI, React, Redux

Features

Created a React app using ES6 JavaScript, stateless components, and container components
Implemented react-router for RESTful routing; Redux middleware to respond to and modify state change; and fetch requests to send and receive data from the API
Utilized Rails API, ActiveRecord, PostgreSQL, and rendered JSON for back-end development

Obstacles Encountered

Thanks to the great Globetrotter walkthrough video series available on Learn, I didn't encounter many obstacles.

The biggest issue I encountered was adapting my idea to something I could build in a short period of time. I was over ambitious in my desire to have users in my project, and that ate a lot of time I could have used to build the core components of the application. Earlier this week I realized that after months of working on the project, I had met all of the project requirements despite not having the ability to add tasks or run a timer (which were kind of the point.) I've decided to turn this project in with the intention of continuing to work on adding those features in the future.

What's Next

Adding an approximate start time to the List forms
Adding CRUD capabilities to Tasks through the List form
Creating a timer for each task based on the assigned amount of time available
Adding check points to the List creation/edit forms to make sure the time assigned to tasks is not over or under the total work time.
More items can be found in my DevLog for the project.

Thanks for reading.

-A

Connect with Me
GitHub
LinkedIn

Rails Project: Hidden Mickey Pin Binder

Amanda Murphy — Wed, 29 Jan 2020 17:40:17 +0000

View Pin Binder on GitHub

Summary

A digital pin binder for users to keep track of their Disney pin collection.

Languages and Tools Used

Ruby, Ruby on Rails, Google Omniauth, Pry, Bcrypt

Features

Created a Model-Controller-View (MVC) Rails application with Create, Read, Update, and Delete (CRUD) functionality
Integrated multiple models using Active Record relationships, scopes, and validations
Utilized Google OAuth option for user sign-in
Rendered error messages when form requirements were unmet

Obstacles Encountered

1) The first issue I ran into was more of a design issue.

There are a limited number of pin designs and collections, but there is no comprehensive list or site that displays all Hidden Mickey pins that exist. Some years there are four waves of pins released, some years none are released.

I did a little Googling and found there was a Pin Trading Database. It exists, but there were a lot of problems I could identify.

It included all pins. There are a set number of Hidden Mickey pins, but there are likely an unknowable number of official Disney pins (the kind that are sold in the Parks.)
Users created their own pins. Meaning there are likely thousands of duplicate pins in the database.
Identification numbers were based on the database ID numbers, not an officially assigned number.
The pin photographs were bad.
The site looks bad.
The site shows a list of all users by username. (That's not the worst as far as security issues are concerned, but it makes me cringe.)

I decided I wanted to create my site with the following in mind:

I wanted to narrow the pins in my database down to just Hidden Mickey pins.
I want to input all pin information into the database (in the future) and have users add those pins to their collection, rather than create a new pin every time.
I wanted to find an easy way to identify each unique pin.

I did a little more Googling and could not find a comprehensive list of the Hidden Mickey series or their information. I found a few years online from various sites and saved them for future use.

And then I did something that was out of character for me: I reached out to a stranger on social media. I had been following a Disney cast member for a year on social media, and so I messaged the cast member and asked if there was any place I might be able to find information on all of the Hidden Mickey series. The person responded quickly and explained that Disney used to have a site for it, as well as Pin checklists, but had done away with both. The person said they might have to dig around, but he/she could potentially send me a copy of the lists they had. (Ya know, since it used to be public information.)

I was a little disappointed to find out my idea wasn't new--Disney had the same idea before me, and had determined it wasn't worth the work it took to support the website. (In the words of Mickey Mouse, "Awwww shucks!") But I went ahead and decided to proceed with the project anyway.

2) After talking to my project coach about what I had planned, he suggested using PostgreSQL so that I could share my Rails project on Heroku once it was complete. That sounded great to me, because it was someting I wanted to do with my Sinatra project as well.

So I'm typing and building things and creating migrations, but then the migrations...won't migrate.
I ran rake db:migrate and the terminal slings back:

rake aborted!
PG::ConnectionBad: could not connect to server: No such file or directory
    Is the server running locally and accepting
    connections on Unix domain socket "/tmp/.s.PGSQL.5432"?

Okay, say what now? I open up my PostgreSQL app, and initialize the server. It's still not working. So I keep Googling, and I find the instructions on the Postgres.app site very helpful. But I was still having issues, and receiving this error:

ActiveRecord::NoDatabaseError: FATAL: database “hiddenmickey_development” does not exist

So I threw that error into Google and found this Stack Overflow page.

The Stack Overflow response suggested running this in the command line: bundle exec rake db:create. So I ran that, followed by rake db:migrate and voila! I had a database.

I later found that you can just run db:create and then db:migrate and it does the same thing.

3) I was hoping that database issue was the only bump in the road, but I was wrong.

I too experienced the classic, "My instance isn't saving" issue.

I had a similar issue in my Sinatra project (I tried to name an instance "request" which is a reserved word we don't use when building the things.) so I was convinced it was due to naming my instance "pin." (My User model was working just fine.) I went through and changed everything named "pin." It was a total mess, and did not change anything.

I threw up my hands and asked the Slack Gods (the more experienced Flatiron School students) for any advice. One of the students suggested I throw a pry in the create method and run @pin.errors. I don't know why I hadn't thought of that, but I had not.

I realized my pin instance would not save because I was not assigning a User to @pin in my create method, and I also had neglected to add user_id as an attribute on my Pins table. (For anyone not tracking: when you use a belongs_to relationship in your Rails models, it requires that you assign what the instance belongs to in your create method and your table.)

4) Call me inexperienced, because this is embarrassing. Once I had resolved my create issue with my Pin instance, I realized I had another issue: all of the users I had created had vanished (or they weren't saving.) It took me a second to realize why.

When I'm working on a project with no real data, I don't like to add a million migrations to alter a table. I have been running rake db:drop, making changes, and then running rake db:migrate--all this time, not realizing that when you drop the table...the information in your table goes bye bye.

To save myself time, I created seeds for the first time! That way, every time I dropped the table, I could repopulate the new table with the same information.

5) I struggled with several other issues, but after my instance wouldn't save in the create method, I started watching these walkthrough videos by Flatiron School Technical Coach, Jenn Hansen. I can't emphasize how helpful these videos were--if you're just starting your Rails project, definitely watch them. (It's a lot of information, but I watch them on 1.5x speed and still catch it all.)

You can find her Rails Walkthrough playlist here.

Part of our Pin Collection

What's Next

I have a few other topics I learned while working on this project, that I'm hoping to write future (more technical) blog posts about including: Omniauth, using enums, and possible nested forms.

As far as my Rails application goes, I would like to:

Implement Bootstrap or custom CSS styling
Change the new pin form so that if you select one option (perhaps what series the pin belongs to) the form would update to reflect pin information from pins only in that series. Example: If you have a pin with Aurora on it, you could select Aurora as the pin's subject, and the series select list would reflect only series that contained Aurora in them, as well as a photo of the pin you were adding to confirm you were adding the correct pin.
Add all existing pin and series information I have into the database
Add a button at the bottom of a pin show page that you could click and it would instantly add that pin to your collection.
Add trading and selling functionality.
Use Devise for sign up and log in.

Thanks for reading.
-A

Connect with Me
GitHub
LinkedIn

Originally published on July 17, 2019.

Building My First Web Application, "Trashare"

Amanda Murphy — Wed, 29 Jan 2020 16:32:26 +0000

View Trashare on GitHub

Summary

Trashare is a web application created to help members of the community exchange used items or trash for creative projects that use recycled materials to reuse waste.

Languages and Tools Used

Ruby, Sinatra, SQLite3, Active Record, Pry, Shotgun, Bcrypt

Features

Built a Model-View-Controller application using multiple models with functionality to create, read, update, and delete (CRUD) entries
Implemented Active Record for model relationships and validations
Used bcrypt gem to securely save user passwords

Obstacles Encountered

1) Seeing the big picture.

When it came to learning Sinatra, I had a difficult time seeing the big picture of how everything fit together. I started a few lessons, but then switched to watching the walkthrough video of building a Sinatra application.

I didn't understand everything as I was watching, but I've always benefitted from hearing others talk about their code and following along with videos. I created my own skeleton repository as I watched the video, and when it was done, I went back and started on the lessons I skipped over. I was able to apply the smaller parts of the Sinatra module to the "big picture" of building a web application with Sinatra, and when it came to the project, I completed the basic requirements for the project in about eight hours.

2) Thinking of the project idea.

Something I read in the Career Prep course was that it was important to show that your portfolio projects were creating a solution to an existing problem. While I agree that's important, as engineers, we aren't often the people creating the solutions--we're the people who bring those solutions into existence.

I read through the project requirements, looked at another student's project, and asked my husband for some design ideas. He's a masters' student at Indiana University's Human-Computer Interaction and Design program, and it just so happened that he had completed a group project where users posted items they were trying to discard so artists could use them for recycled art projects. The project was titled "Trashare," a combination of the words "trash" and "treasure."

The screens for the project can be seen here.

3) Evaluating the design.

Trashare seemed pretty straightforward: there were users, the users had many posts, and the posts belonged to the users.

But the more I looked at the screens, I realized there were multiple types of posts that all needed to have CRUD functionality:

Give (where users could post items they were trying donate to artists)
Make (where artists could post what they had made and instructions on how to make crafts out of recycled items)
Request (where artists would post a list of items they were looking for.)

In addition to these three post types, the posts all included tags.

I decided for the sake of time and making progress in the course, that I would aim to meet the project requirements (creating only two models: Users and Donations), and if time permitted I could add more models either before submitting the project, or later down the road when I was assembling my portfolio.

4) Creating user validations.

The User and Donations models didn't take long to complete, but then I had to do a little research to validate the new user information to prevent multiple users creating accounts with the same email or username. That didn't take too long after reading this article.

5) Creating the Request class.

When I went to add the Request model, it seemed like a pretty simple copy-and-paste, and change variable names kind of job. It was not.

The code broke in the RequestController's post method for creating a new object. The error said it was coming from something in my rvm folder--so I thought that something in my local environment was messed up...and reinstalled the entire thing, which did not fix anything.

At this point, I was very proud of myself, because I stopped and asked for help. A couple days letter another student was able to help me identify the issue:

It turned out that I was trying to name a class with one of the reserved words.

Sinatra has its own built in method and object named Request. By creating my own class and attempting to create a new object, I was overwriting the Sinatra::Request, which was critical to Sinatra working. After renaming my Request model, RequestController, and all the associated views and variables, the code worked flawlessly after a few tweaks.

What's Next

In the future, I would like to:

Create a tags class/functionality and add the ability to find all donations, requests, and crafts by tags
Create a search capability where the user can enter a search term and posts are returned based on search term
Add CSS styling

I would also like to revisit the design with the design team--something I noticed while working is that the original screens did not include links for basic functionality--there is a link to view all the crafts, but no link for the user to add their own craft; a link to donate material, but not to view all the donations; and the home page and the marketplace pages are very similar, but the home page doesn't have much functionality.

Being a developer and not a designer, when working with a design team or customer, I would prefer to touch back with them with proposed solutions and see if those solutions are approved, or if they have other ideas.

And as I'm revisiting this project months later, I would really like to give it another go as a more experienced developer. I could see myself:

Rebuilding the back-end with Rails
Rebuilding the front-end with React, or maybe Gatsby (something I want to learn next!)
Adding seed data (I entered all of the data individually at the time, because I had no idea how to add a seed file.)
Changing the database to PostgreSQL so I can host the project on Heroku or something similar
Adding styling to match the original design--the front-end of this project is painful to look at!

Thanks for reading.
-A

Connect with Me
GitHub
LinkedIn

Originally published on April 17, 2019.

Webtoon CLI Gem

Amanda Murphy — Mon, 27 Jan 2020 17:02:38 +0000

View Webtoon on GitHub

Summary

A CLI gem that scrapes webtoon.com and returns top ten comics for various genres and age/gender categories.

Languages and Tools Used

Object-Oriented Ruby, Ruby Gem, Nokogiri, Pry

Features

Scraped multiple URLs with Nokogiri for data
Used Ruby class and instance methods to process scraped data
Implemented logic and conditionals to accommodate user input

Obstacles Encountered

1) I was really overwhelmed by the prospect of making my own CLI gem, but I started watching Avi's walkthrough video, and it really helped.

2) Another snag I hit was setting up my local environment.

Up until this point, I had been using the Learn IDE. I heard from a couple Flatiron School coaches that it would be helpful to set up a local environment prior to starting this project. I wanted to give it a try.

This is a link to setting up your local environment on a Mac if you're a Flatiron Student.

I had no idea what I was doing, installed things incorrectly, and had to install it about three times. But eventually with the help of a Flatiron coach, I got it set up correctly. (And finally felt like a "real developer.")

3) Once I got that set up, I started with creating my gem. I couldn't get my classes or methods to work. It turns out this was because I was new to using bundle gem gemname and didn't realize there was a module that I needed to account for.

4) I started by building my CLI file first--I would create methods that were essentially shells that output test strings, but related to how I wanted the methods to work, and over time I fleshed them out.

When it came time to scrape a site, the first site I wanted to use didn't work. I attempted to scrape the attractions off the Disney World website, but due to the high network security and use of JavaScript, I could not scrape the text.

That project had also been an attempt to create a CLI version of an app I want to make, and in all honesty, it was overcomplicated for the requirements of this project, and was a waste of time. For students starting the project, I know it's difficult, but just try to do the bare minimum. (It's called minimum viable product, or MVP.) If you have time you can add to the project after you have your first draft complete.

5) I brought a couple new ideas to my project lead, and we went through the new webpages that I was interested in scraping. Scraping was definitely the most difficult and time consuming part of this process for me. When I started my second project, I worked on the Scraper class first, and once I got that working, I moved on to the CLI class, and then the Comic class.

6) The next difficulty I ran into was getting the scraped information into my Comic and CLI classes. I had a really difficult time conceptualizing how that information got where it needed to go.

In one case, I decided to hard code URL's and come back and correct it if necessary. Because there were top ten lists for multiple selectors, each selector had its own URL and that unique URL had to be scraped to retrieve the correct information.

I relied heavily on how the Student Scraper lab worked, as well as the Best Restaurants CLI gem example.

Because my project differs so much from these two labs when it comes to the multiple URL's, I believe there is likely a more efficient way to write the code I have written, but for now, the CLI gem works, and I am open to advice from others on how to improve it.

7) In my assessment we addressed an issue I noticed before the assessment: There was a bit of a delay when the gem scraped, initialized, and added details to the comics before printing them out. It turned out I was scraping the top ten page, but also each comic's individual page every time the user requested a top ten list.

What's Next

One of the things my coach pointed out during our assessment was that I was not storing the scraped information in a database or store for later use. Because the top ten comics change frequently, I think that's okay, but it's something to consider if I build a similar gem in the future.

For now I'm content, feeling accomplished, and looking forward to learning about SQL.

Thanks for reading.
-A

Connect with Me
GitHub
LinkedIn

Originally published on December 22, 2018.

PhotoLoco, a Photo Location Application

Amanda Murphy — Sun, 26 Jan 2020 20:43:02 +0000

View PhotoLoco on GitHub

Summary

I started my own photography business this fall, and one of the large parts of being a photographer is finding good locations for taking photos. For this project, I wanted to create a site where users could share photographable locations with other photographers. Locations are made by one user, but a location can have multiple photos uploaded by multiple users.

Languages and Tools Used

Ruby, Ruby on Rails API, PostgreSQL, ActiveRecord, JSON, Object-Oriented JavaScript, AJAX, HTML, CSS, Sass

Features

Created a Single Page Application using three AJAX calls
Implemented ES6 syntax and Object-Oriented JavaScript to organize classes and functions into reusable pieces
Utilized Rails API, ActiveRecord, PostgreSQL, and rendered JSON for back-end development

Obstacles Encountered

I got 99 problems, but JavaScript ain't one.
...okay, maybe it's a couple.

1) I’m not sure why, but I still have a hard time starting an application on my computer, and pushing that existing project to GitHub. (Go ahead, judge me, it’s just not something I do very often.)
I found this page from GitHub helpful.

2) The second issue I ran into wasn’t code related--I wanted users to be able to save locations without addresses, but wasn’t sure if it was better to use longitude and latitude coordinates vs. plus codes vs. anything else.

I couldn’t find any information that was conclusive, so I ran a poll on my Twitter. Longitude and Latitude won, so that’s what I went with to start out. (And if I find a better answer at a later date, I can change it.)

3) The next thing I had to consider was how to save longitude and latitude into the database. I found this article very helpfuland I also thought this one was informative--it deals with how precise longitude and latitude is depending on how many decimal places are involved (you’ll have to scroll down a couple answers to find it.)

4) I am using PostgreSQL as a database for this project, so I also ran into this error when I tried to run rails db:migrate:

rails db:migrate
rails aborted!
ActiveRecord::NoDatabaseError: FATAL:  database "photoloco_development" does not exist

On my last project I had done a Google search and found a StackOverflow article that suggested running this command: bundle exec rake db:create, but you really just need to run rails db:create before running rails db:migrate.

5) When I tried to open the Rails server for the first time, it said something was not defined in my LocationsController as it expected. It turned out that I had API capitalized in my LocationsController, and it should have been title cased Api.

6) I also found out that I had messed up the project structure--this is kind of a funky project because it’s in between a Rails application (where you use the generated files for front-end and back-end), and a React / Rails application (where you typically have one directory for React, and one directory for Rails.)

So you probably want something that looks like this:

     javascript-project/
         backend/
             app/
             (...other rails files and folders)
         frontend/
                index.html
                style.css
             index.js
         README.md

7) When I was working on the JS side of things, I kept getting this error:

Uncaught (in promise) TypeError: Illegal constructor at locations.js:13 at Array.forEach (<anonymous>) at locations.js:13

It turns out that I had not loaded Location.js file into my index.html file. (Yikes.)

8) I really struggled trying to figure out ActiveRecord Associations between my models.

I wanted users to be able to add many locations, and I wanted locations to have many photos, photos to belong to a location, and I wanted locations to have many tags and tags to have many locations (let’s say you want to find all locations tagged “waterfall”--the waterfall tag should pull up a list of locations.)

I thought I had things figured out and was going to use has_and_belongs_to_many for the first time--until I Googled how to implement it and found the top article (written by a Flatiron grad) that was titled, “Why You Don’t Need has_and_belongs_to_many Relationships.”

Shucks. (Only I’m sure I said much worse than "shucks" when I was trying to puzzle through these relationships.)

So after staring at the screen and writing it out several ways in my notebook, I went to the Flatiron Slack channel, messaged a coach (or two) and also posted about my issue on Twitter.

Avi ended up responding to my Tweet (bless him) and talked me through it.

We determined I needed a separate join table, connecting the Location table and the Tag table--the benefit being that if I wanted to add attributes to that relationship (beyond foreign keys) at a different time, I could.

Avi also referenced these two articles, so I’ve read and bookmarked them--check them out if you’re having a similar issue.

9) One thing I finally put together while I was struggling through ActiveRecord Associations is that when you use belongs_to it can only belong to one instance of your model. (I really wish this relationship was called belongs_to_a)
So for example:

ModelA has_many :model_bs, but Model B belongs_to *a* :model_a. 
has_many :plural, 
belongs_to :one

10) I was really struggling with the backend, even after I had figured out the ActiveRecord Associations, so I hopped in a Study Session with Howard--which I was really excited about, because I’ve heard so many positive things about him since I started, but he always seemed to be a lead in the module ahead of me.

It turned out that I was missing a foreign key in my database--specifically in my Photos table. Something that Howard said that was really helpful was:

If there is a belongs_to relationship, you need a foreign key in your table.

If you think about it, the entry in your database should say: This is photo 123, it belongs to location 67. Makes sense, but I had not put that together before.

11) At this point, I was a little overwhelmed.
The walkthrough video I watched had one class with one attribute, and I was trying to make a similar application with four classes, each having one or more attributes. I would open my text editor and stare at my code for hours, experimenting, and I couldn’t seem to make any progress.

I couldn’t get my seed data to save to my database, so I cut the Tag and LocationTag classes until I could get my Location and Photo classes to behave the way I wanted them to.

(I later read something that explicitly said, "Hey, please don't build horizontally and try to create all of your features at the same time, because it won't work." I wish I had seen that note earlier.)

12) I came back the next day, and started reviewing nested attributes. This was a Rails topic that had gotten pretty rusty for me. This Flatiron lesson really helped:Nested Attributes Lesson

I also reworked my seed file, because it was unnecessarily complicated--I had copied the original structure from a lab I had completed, and then implemented it on my last project (where my models had several more attributes.)

I did have a little trouble figuring out how to set up a seed file with nested attributes, but I found this article on StackOverflow that helped.

13) After I got my Location and Photo models working, I went back and started rewatching the entire walkthrough video, and I made notes in my code that explained what each function accomplished. I had some questions as to what .json() accomplishes*, and I really liked this explanation.

14) On the JS side of things, my submit button was not saving the form inputs. I kept getting this error:

TypeError (no implicit conversion of Symbol into Integer):
app/controllers/api/v1/locations_controller.rb:13:in `create'

So I took a look at my create method in my LocationsController.

I was running into an issue where I was getting my params back twice. I resolved that issue using pry, and tinkering with the console, but I’m still not exactly sure what was going on there.

I also forgot that in order to extract the nested attribute from the JSON, I needed to use bracket notation: params[“location”][“photo”][“url]--Okay, maybe I didn’t need to use it, but it did seem to be the only thing that worked at the time, and I don’t think I’ve used bracket notation since I worked on my Sinatra project.

15) When I finally got my back-end to work the way I wanted it to, I realized I needed to add more HTML and CSS to my page.
I think out of all of the languages and frameworks I’ve used, CSS is the most intimidating for me. There are just...so...many...options. But I’m not one to roll over when I’m scared, so I decided to try CodePen for the first time. Yes, I said FOR THE FIRST TIME.

And then I Googled for a tutorial video that walked me through styling. I found one, and while I was watching I thought, “Huh, I didn’t think CSS had variables, but okay.” (You can probably see where this is going.)

I copied and pasted my CSS in, and I learned very quickly that it was not a .css file, it was a .scss file. I had no idea what to do with a .scss file, so I started Googling, and was still stumped. (If you’re having the same issue, please come find me on Twitter or Slack.)

After a lot of frustration, and help from kind strangers on Twitter, (Thank you, lovely friends.) I figured out that this was a bit of a weird situation.

If you build a normal Rails application, Sass is built in, and it’s just a matter of adding the styles to your views folder (does that sound right?) and running a line in your terminal to convert your .scss file to a second .css file. If you are using React, I think it works just the same way. But I was using Rails as an API, and vanilla JS, so I just needed to create a .scss file in my styles directory, download an Atom package (or a VSCode extension) and use it to compile the SCSS to CSS.

A couple of other notes:

Don’t write in your CSS file, because it will get rid of your SCSS file.
Don’t forget to update your stylesheet info in your HTML file. ...not that I have personal experience with either of those things.

This is the walkthrough video I used for my CSS.

16) Getting down to the nitty, gritty, I also had to figure out how to generate links to Google Maps with user input coordinates--this StackOverflow post had my back.
http://www.google.com/maps/place/lat,lng

17) Okay, so next on the agenda: adding a like button that would update a like count on a click. I added like as an attribute to my Location table, passed it through to my HTML/CSS/JS display.

Then I tried to add a button I had found on CodePen. (This one specifically.)

It was going pretty well, but I couldn’t figure out why my thumbs up icon was not there--it turns out it was a Font Awesome icon, so I had to make sure I had the correct line in my button HTML text, in this case: <i class="fas fa-thumbs-up">, and then I also had to sign up for Font Awesome, and get this script tag to import their icons into my HTML page.
<script src="https://kit.fontawesome.com/a8e960d804.js" crossorigin="anonymous"></script>

18) Because I used a CodePen created by another person, I was curious about how to best credit them--I changed aspects of the pen, but I did not create it. I asked on Twitter to see how to best do this, and I was told that adding it to my ReadMe might be a good plan. Here is a link on CodePen Licensing. I'm still not sure the best way to go about this, so let me know if you have better ideas.

19) When I was trying to add an EventListener for a click, I kept getting this message:

Uncaught TypeError: Cannot read property 'addEventListener' of null
at Locations.initBindingsAndEventListeners (locations.js:28)
at new Locations (locations.js:14)
at new App (app.js:4)
at index.js:2

in my console. This was because when I was trying to set my buttons attribute in initBindingsandEventListeners, I was attempting to set the button before any buttons existed (because none of my locations had loaded.)

I was able to set this.buttons in my likeListener() function, which I called after my fetch request had been made in my fetchAndLoadLocations function.

20) When I came to incrementing my like count, I was testing it out with an alert, and was surprised to find that it was concatenating the numbers.
Using ${e.target.value + 1}, if 2 was the value of e.target.value, my alert was returning 21 instead of 3.

I found this article on Stack Overflow suggesting adding a plus sign in front of a string to make it an integer. That’s pretty nifty. ${+e.target.value + 1}
You can also use parseInt() of course, which I think I ended up switching to.

That was a lot, I know--it’s been a real process.

What's Next

There are a lot of features that I scaled back on for the sake of time. I was hoping to complete this project in one week, and it ended up taking three weeks. That's okay though. Learning how long a project realistically takes to complete is an important lesson.

A few things I would like to address in the future are:

I realized after submitting my project that I didn't put a range on latitude and longitude, or require any of the fields in the form.
My Tag and Location_Tag classes are still out of commission, and I'm hoping to make a walkthrough on how to add them into my existing project, because that was something I struggled with.
I also currently don't have show pages for the individual Locations, or a way to add additional photos to a location.
I didn't create a User class, but ultimately, it would be nice if you could view a users page to see their contributions / locations.

But for now, the project meets the requirements, and I'm looking forward to wrapping up the rest of the curriculum before I return to improve this project.

*I threw an asterisk in there somewhere, and here's the note meant to accompany it: I thought I understood JavaScript before I started this project. But despite going through the JS module almost two times, I think after this project, I need to go through the curriculum another time, now that I can see how everything works together. I have pretty extensive notes in my code, but I think I'll have to review the JS lessons before I can pass my assessment.

Thanks for reading.

-A

Connect with Me
GitHub
Intercoastals
Instagram
LinkedIn
Twitter

Originally published at A Good Unicorn on December 4, 2019.

10 Tips to Stay Motivated as an Online Student

Amanda Murphy — Sun, 19 Jan 2020 20:51:15 +0000

I’ve been pursuing a full-stack web development certification through Flatiron School since last July. I wanted to share some of the tips I’ve learned over the past nine months.

1. MAKE SURE YOUR LEARNING ENVIRONMENT ENCOURAGES PRODUCTIVITY.

It’s been proven that clutter can distract you—even having too many icons on your desktop can be a distraction. Make sure your workspace is clean and distraction free. I prefer to work outside of the house, because then I can’t get distracted by laundry, dishes, or other projects at home.

Another thing I’ve noticed is that it really helps me to have snacks while I’m working. My brain tends to fizzle out without food (real food—not pastries that are usually sold at my coffee shop) so it helps to bring snacks that are protein/healthy fat heavy.

2. SET GOALS AND TRACK YOUR PROGRESS.

I started out with time goals for my certification program, but life gets crazy, and time goals are a bit rigid—once I was behind, I was behind on my goals every day regardless of the progress I was making.

Now I like to gauge my progress based on percent completion. Each day I calculate how much of my course I have completed, and each week I set goals for what percentage (or how many lessons/labs) I want to complete by the end of the week.

I also have a goal board (you can view the photos here) where I check off boxes for each chapter when I complete it. I like the action of checking off the boxes and it’s nice to have a visual of the progress I’ve made.

3. SHARE YOUR ACCOMPLISHMENTS.

Whenever I complete a portfolio project or a certain number of lessons, I post my progress and accomplishments on Twitter, LinkedIn, and Instagram. I like sharing what I have done, and my friends and followers are supportive of the hard work I’ve put into my course. I also think it demonstrates to potential employers that I set goals and continue to work to complete those goals.

4. BUILD A REWARD SYSTEM.

Every time I complete ten percent of my course I have a “big reward” to incentivize me and reward myself for the progress I’ve made. My course is 684 lessons and labs long—that means I have to complete almost seventy lessons and labs to hit that mile marker! That’s a lot of work. When I hit 50% I bought myself an unlimited month of yoga (if you’re new to a studio, the first month is usually discounted) and when I hit 60%, I bought myself some new clothes. For five percent markers I do smaller things, like get a treat or buy a face mask/nail polish—whatever sounds nice.

5. SWITCH THINGS UP IF YOU LOSE STEAM.

I tend to work outside of my apartment and have found that changing my study location can really help me hunker down and focus. Try a new coffee shop, your local library, or even a grocery store cafe. Mine serves beer, coffee, kombucha, smoothies, and juices and if you get hungry or need to do some grocery shopping afterward, everything is conveniently right there.

6. SEPARATE WORK TIME AND DECOMPRESSION TIME.

Separating work time and decompression time is really important, and it’s something I struggle with. For example, if you work while watching tv, you’re not giving your work your attention and you aren’t able to relax. You end up feeling like you’re working all the time and that’s not good for your productivity or stress levels. I can usually tell I’m working too much or that I need a break when I start wandering away from my lessons. Sometimes I need to take a day off to continue being productive, so I’ll usually take a day off to do something I enjoy once a month.

7. EXPERIMENT WITH ADDING EXERCISE.

One thing with online classes is that it requires a lot of sitting. I have a standing desk at home, which really helps, but I usually benefit from adding an hour of exercise a couple hours a week. When I did a month of yoga, despite taking an hour out of my work day or time with my family, I was more productive, felt better about myself, and had more patience with Gus, who is getting more independent and rowdy by the day.

8. CONNECT WITH YOUR CLASSMATES ONLINE.

Becoming active on Twitter and my Flatiron School Slack channel, was a game changer for me. One of the hardest parts of being an online student is the lack of human connection. I found I was able to get more of that when I started sharing my experiences and interacting with other students, and in turn I didn’t feel so isolated when I was working on my course.

9. PUT YOUR PHONE ON DO NOT DISTURB WHILE WORKING.

You don’t need to respond to every text message and social media notification as it comes in. I just let my husband know I’m turning DND on so he knows to call me instead of text if something urgent comes up. You can also put your phone on silent (not vibrate!) and face down, just so you don’t see it light up every time.

10. EVALUATE WHAT IS WORKING AND ADAPT.

Juggling responsibilities is a big part of being an online student: you can’t balance everything perfectly. One week you might miss your workout goals—figure out how to meet those goals the following week. The next week you might not get enough sleep—make that a priority the following week. One week might be a lot of work and not enough play—build something into the next week whether it’s a coffee date with a friend, playing a video game for an hour, or watching a movie. At the end of each week evaluate what you did well and what you want to concentrate on the next week. Writing these priorities down can be helpful too.

-A

Connect with Me
GitHub
LinkedIn

Originally published on January 28, 2019

Tic Tac Toe and Endless Loop PTSD

Amanda Murphy — Sun, 19 Jan 2020 20:09:12 +0000

I don't think I'll ever play Tic Tac Toe again.

If you're a Flatiron School student, you know a big part of the first module is building a CLI Tic Tac Toe game, piece by piece.

It is from these labs that I have come to learn that when my code is broken, it is almost always broken in the smallest, most difficult to identify way.

Another thing I've come to realize is that I wait too long before asking for help. Flatiron School has a great team of technical coaches who are waiting in the wings most hours of the day to help you out when you get stuck. Learning to code has really taught me to stop being so stubborn and prideful and to ask for help when I need it.

While I was working on this lab, every time I ran the tests or tried to run my code, I would hit an infinite loop so hard it crashed my IDE.

I spent hours poring over my code, doubting myself, thinking that maybe I didn't understand code at all. But then I looked at the code my peers had written and my code didn't look too different.

Eventually, when I reached out to the technical coach team, we went through my code, method by method, trying to find the issue. All three I worked with said, "It looks right." That was a confidence booster, but when we ran the tests, the loop would happen, and the IDE would crash again.

Eventually, after a couple weeks of being stuck on this lab, a technical coach and I narrowed it down to my play method. While it looked correct, Erika taught me a trick: If you can narrow your issue down to one method, comment out every line in the method, and add each line back one at a time--typing the line as a new line, and deleting the old, commented out version. If the code breaks, you know which line is the problem child. If the code doesn't break, and it magically works this time, hey, you have working code now.

I still have no idea what was wrong with my play method. When I added each line in, line by line, re-typing my code in, the loop was magically gone.

I hope this tip helps someone else as much as it helped me! It's still something I do.

One more thing I learned that really helped was learning how to use pry. If you're a Flatiron Student starting with Ruby, I highly recommend joining a Study Group on how pry works, or pairing with a technical coach to learn about this Ruby gem.

-A

Connect with Me
GitHub
Intercoastals
Instagram
LinkedIn
Twitter

Originally published at A Good Unicorn on January 2, 2019.

How to Write a Blog Post for Your Project

Amanda Murphy — Sun, 19 Jan 2020 18:44:46 +0000

If you're a Flatiron School student, you're familiar with the blog writing requirement--it's great practice for communicating what you have learned in technical terms, and you might end up helping another person on their coding journey.

I've been a writer longer than I've been a programmer, so I was stoked to find the writing component was part of this course. But when it came to writing a blog post for my first web development project, I wasn't sure what to include. My first project post was less technical and more personal. Now that I've just submitted my fourth project, I have a better idea of what I want my blog posts to say as I approach applying for jobs.

I've been reading through the Career Prep course this week, and this lesson is what inspired me to write this post.

A Note to Start

Formality

Something I didn't consider as I wrote my first couple blog posts was that your prospective employers, hiring managers, or Twitter connections will be reading these posts, so it's best to keep them on the more formal side. Some of my earlier posts included things that were going on in my personal life that prevented me from working on my project. I have grown a lot since I started this course and now I'm reading my older posts rolling my eyes--and I'll have to edit them soon because I don't think they are a good depiction of who I am. Let me save you from having to do the same thing--write your posts like you're going to share them on LinkedIn or email them to a prospective employer.

Include Photos, Screenshots, or GIFs When Possible

When I worked as a PR writer I was told something that shocked my little English major heart: People will stop reading if they see more than four lines of text without a break. But after I heard that, I noticed it every time I was trying to read an article online. So do your best to say things succinctly and break up your paragraphs (sensibly). A great way to do this is to include photos, screenshots or GIFs of your project. It's also helpful to break things into sections with headers to give your readers a break from technical text.

Include Your Links

At the bottom of your post include links to your GitHub repository, your YouTube demo video, and social accounts like LinkedIn, or Twitter. If someone likes your project, make it easy for them to contact you or learn more.

Okay, now let's get to the project information.

1. A Summary of Your Project

Write two sentences about what your project does and how you thought of the idea.

2. Languages or Skills Implemented

In this second section, talk about how you built your project--what skills did you apply to build it? Nokogiri? Sinatra? Ruby on Rails? OAuth? Bootstrap? Sass? These are great things to identify for each project, because they are also things you will share on your resume and portfolio project summaries.

3. Highlight the Features

What does your project accomplish? What makes it unique compared to similar sites?

4. How You Jumped the Hurdles

What are some problems you encountered while working on the project and how did you resolve them? This is one of my favorite things to talk about--I keep a running log of issues, and links that helped me with the solutions in a Google Doc while I'm working on my project. Documenting issues like these demonstrates your problem solving skills to prospective employers, and could prove helpful to your fellow students or other developers working on similar projects.

5. What's Next

Talk about what you hope to add to your project in the future--are there features you left out for the sake of time? How could you improve the project in future revision?

That's all I have for now! I definitely have not followed all of these guidelines in my past blog posts, but I am hoping to go back and reformat my blog posts to follow this structure as I prepare my portfolio for job applications.

Are there any important tips I've missed?

-A

Connect with Me
GitHub
LinkedIn

Originally published on December 6, 2019.

Conditionals in Real Life and IFTTT

Amanda Murphy — Sun, 19 Jan 2020 17:21:02 +0000

I have to admit that logic and conditionals are currently the aspects of programming that come most easily to me. For those who are having a more difficult time with logic and conditionals, I'm going to provide a few real life scenarios that make the concepts a little easier to digest.

I've always been the kind of person who can make anything happen as long as I have a plan. My husband came home one day from his position as a government contractor and told me, "I can't do this anymore." I was eight months pregnant, and I said, "Okay."

We came up with a series of plans, and started to pursue our first choice. Our plan was a lot like what we study about logic and conditionals:

def master_plan
     if we_receive_a_job_offer_here
          accept job offer here
     elsif we_receive_a_job_offer_elsewhere
          accept job elsewhere && move
     elsif apply_for_second_degree_here
          go to school here
     elsif apply_for_second_degree_elsewhere
          go to school && move
     elsif work_until_next_semester
          work until next semester && apply for next semester
     else move_in_with_mother_in_law_temporarily
          move && pick up drinking habit
     end
end

Plan A was to look for jobs in the area, but if Plan A didn't work out, we'd move on to Plan B--to look for jobs in other locations. If Plan B didn't work out we would move to Plan C, then Plan D, then Plan E, etc.

Luckily in this case, we decided our priority was getting my husband back to school for a second degree so he could restart his career--we both graduated as creative writing majors and are now pursuing careers in the tech field. (Side note, this was his first week at Indiana University's Human-Computer Interaction and Design master's program--so congratulations to him!) We ended up moving from Alabama to Indiana last fall, and although it's been a challenging year, we're sure this was the best decision.

I have a second example that you can gain real hands on experience with IFTTT--If This, Then That, which is a website which connects your apps and devices. It's a free program, so I would recommend signing up and trying it out. (It's been several years since I've used it, so I'm not sure what it can do these days.)

When I first used IFTTT in 2014, it had the capability of sending you texts every time someone commented on a social media post, or every time a friend posted on their Facebook wall. Today it looks like it has capabilities that will help your Amazon Echo or Google Home accomplish more in relation to your mailbox or social media.

The entire system is set up based on the phrase "If this happens, then do that, which makes it nearly identical to what we practice in our logic and conditionals lessons and labs.

Hope that helps!

-A

Connect with Me
GitHub
Intercoastals
Instagram
LinkedIn
Twitter

Originally published at A Good Unicorn on August 24, 2018.