Forem: Dorthy Thielsen

Post Bootcamp Graduation Advice

Dorthy Thielsen — Tue, 03 Jan 2023 18:46:27 +0000

A new year and the job search continues. Hopefully the new year will bring me into my new career.

With that said, I have some exciting news. I just started a volunteer web developer position and my first stand up is tomorrow. I am really excited for this opportunity and excited to work on a professional team of other developers.

Last year was hard on the tech industry and well, everyone. To any fellow graduates from last year, keep your head up and go easy on yourself. It has been hard for everyone to find a job, especially junior developers. I have definitely spiraled a lot this year with thinking I am not good enough, but forgetting that it was just a bad year to be switching into the field. If you also did the Flatiron Bootcamp, I highly suggest taking a supplementary algorithm and data structure class and doing lots of leetcode. I am currently taking Colt Steele's JavaScript Algorithm and Data Structures masterclass through Udemy and it has helped me so much. I do great in my interviews, but then the technical interview shows up and often I have been given a data structure I haven't used before. I was practicing for an interview for a company and saw a lot of the practice questions dealt with stacks and binary search trees, which I knew nothing about. I studied the masterclass as much as I could before the interview and felt more prepared than I ever had before. It was nice that this interview also had a real person that I could talk to and bounce ideas off of. It is great to talk things out with someone else so you don't get stuck and panic which is what tends to happen when I have been doing the unpaired interviews. Just remember to breathe and do the best you can. Always write out pseudocode first. Think about what are your inputs and outputs. What are your edge cases? Can you get around sorting and nested loops to save on your time and space complexity? If you are stuck on some aspect, code a simpler solution that maybe doesn't meet all parameters but at least gets you going in the right direction.

I also wanted to provide some information on the different data structures I have learned about so far. I hope this little cheat sheet will help you in your engineering/developer journey. Wishing everyone a better year!

Stacks:

data collections
abstract data structure
- basically a set of rules for storing data in a certain way
needs a last in first out (LIFO) data structure
- the last element added to the stack will be the first element removed from the stack
- similar to the call stack
Where are stacks used?
- managing function invocations
- undo/redo functionality
  - think of how photoshop undos the last action
  - routing (the history object) is treated like a stack
array implementation
- JS does not have a built in method for stacks
- use .push() and .pop() on an array makes a stack
- can use .unshift() and shift()
  - however this is more cost heavy because everything has to be re-indexed everytime
  - also note that you can either use push and pop OR unshift and shift
linked list implementation
Big O
- insertion O(1)
- deletion O(1)
- access O(n)
- searching O(n)

Queues:

First in first out (FIFO) data structure
adding and removing
array implementation
- var queue = []
- can use push and shift
  - heavy to use because of having to reindex
- can use unshift and pop
  - also heavy with the reindex
linked list implementation
- lighter weight
Big O
- insertion O(1)
- deletion O(1)
- access O(n)
- searching O(n)

Trees:

Types
- there are so many types however we focus on the following
- tree
- binary tree
  - each node can have at most two children
- binary search tree
  - special case of a binary tree
  - each node can have at most two children
  - sorted in a particular way
  - used to store data that is comparable/ sortable
  - if you take any node on the tree, every item that is less than that node is located to the left, and every item that is greater than is to the right
  - great insertion and searching as it is sorted
  - the root is going to be a half way point so it makes it easier to compare and traverse
  - compare and go to the left or the right, each time, you are cutting your options in half
Great for web scraping nested HTML
a step up from linked lists
a data structure that consists of nodes in a parent/child relationship or a hierarchical structure
type of a graph
think of a branching tree but upside down
- root - the top node from which everything branches from
- child - a node directly connected to another node when moving away from the root
- parent - the converse notion of a child
- sibling - a group of nodes with the same parent
- leaf - a node with no children/ the end of the line
- edge - the connection between one node and another
- basically root connects to a parent which connects to a child, think of how state works in React
nonlinear
- there can be many ways to reach a branching path
- a linked list is linear as there is only one direction you can go
not a tree
- if there are nodes that reference each other on the same level (sibling) aka they reference nodes that are not below them (children)
  - a node on a tree can only reference their children
- there can only be one root/ entry point
USES
- HTML DOM
  - the connection between each element
  - think of how the body contains different div which have divs inside that, etc.
- network routing
- abstract syntax trees
- artificial intelligence
- folders in operating system
- JSON

Heaps:

Great for schedule/ priority task list
a type of tree
types: binary, fibonacci, pairing, leftist, etc.
Binary Heaps
- two types: min and max heaps
  - MaxBinaryHeap
    - parent nodes are always larger than child nodes
    - what makes it different from a Binary Search Tree is that the children are smaller and the order of the children doesn't matter
    - root is always the largest
  - MinBinaryHeap
    - parent nodes are always smaller than child nodes
    - root is always the smallest
- similar to a binary search tree, but with different rules
- at most each parent can have two children
- compact as possible
  - every left and right are filled out before moving up
- used to implement priority queues and with graph traversal algorithms
- can use an array to store a binary heap
- for any index of an array (n) the left child is stored at 2n + 1 and the right child is at 2n + 2
- for any child node at index n, its parent is at index Math.Floor((n -1) / 2)

Hash Tables:

aka hash map aka object (but with restrictions as objects typically deal with strings)
built in to almost every programming language as a default type
- Python = dictionaries
- JS = objects and maps
- Java, Scala, and Go = maps
- Ruby = hashes
used to store key-value pairs
not ordered
fast for all operations
hash function
- implementing a hash table by using an array which you convert keys into valid array indices
- any function that can be used to map data of arbitrary size to data of a fixed size
  - so basically no matter what size the input is, it could be one or million characters, the output will always be the same size
  - however the output isn't something you can work backwards from, it is encrypted
- the values returned are called hash values, hash codes, digests, or simply hashes
- used in caches, crypto, authentication
What makes a good hash
- O(1)
- doesn't cluster outputs at specific indices, but distributes uniformly
- deterministic, every time you put in the same input you get the same output
handle collision
- when you have a hash function it is inevitable that you will have data that will be assigned the same index especially with small arrays like in the example
- separate chaining
  - you store pieces of data at the same spot/index in a more sophisticated data structure like a linked list or nested array
    - this allows you to store multiple key-value pairs at the same index
- linear probing
  - you only store one piece of information at each index, if you have a collision/duplicate, then you search through the array and find the next empty spot
  - allows you to avoid nested data structures
  - however you have to decide what you are going to do when you run out of room in your array
Big O
- insertion O(1)
- deletion O(1)
- access O(1)

Graphs:

a data structure that consists of a finite (and possibly mutable) set of vertices or nodes or points, together with a set of unordered pairs of these vertices for an undirected graph or a set of ordered pairs for a directed graph
a collection of nodes and connections between those nodes
a tree is a type of graph
no starting point or parent node
models relationships
uses
- great for map/location data
- user data
- recommendation on social media
- routing
- visual hierarchy
- file system optimizations
Parts
- vertex - a node
- edge - connection between nodes
types
- directed graph
  - the edge has polarity or direction
  - directions assigned to distance between vertices
- undirected graph
  - no direction between the edges
  - can traverse in any direction
- weighted graph
  - values assigned to distances between vertices
  - the edge has a value
- unweighted graph
  - no value to each edge
- can be any combination of these
Implementations
- adjacency matrix
  - has vertices and edges
  - 2D structure usually implemented with nested arrays with rows and columns
  - takes up more space
  - slower to iterate over all edges
  - faster to lookup specific edge
  - for lots of data
- adjacency list
  - use an array or list to store the edges
  - or can store as hash table/object
  - can take up less space
  - faster to iterate over all edges
  - can be slower to lookup specific edge
  - most real world data tends to lend itself to adjacency lists as the data is sparse

Singly Linked Lists:

an ordered list with fast inserts/removals at the beginning and end
- as compared to arrays where shift and unshift are costly
- although random access is not allowed
a data structure that contains a head, tail, and length property
- from the head you can figure out the next element
- think of it as a skyscraper without an elevator, you have to take the stairs and access each floor individually from the beginning
consist of nodes
- node is a piece of data or element
- refers the next node
- each node has a value and a pointer to another node || null
a bunch of elements with no index pointing to the next element
you have to start at the beginning to access elements
excel at insertion and deletion and you don't need to access a random element
foundation to stacks and queues

Doubly Linked Lists:

it is a singly linked list but adding a pointer to prev node and next node
it is more flexible than a singly linked list, but it costs more memory
no index, just pointers to the previous and next element

First Hackathon

Dorthy Thielsen — Wed, 21 Sep 2022 19:23:01 +0000

Last month I participated in my first hackathon! This was the third part of my interview for JP Morgan Chase Emerging Talent Software Engineer. While I didn't end up getting a position from this, I learned a lot along the way.

Let's start at the beginning of the interview. The first step of the interview was recorded video responses, which was so bizarre to me. The entire way through this interview, I didn't get to talk to a human one on one. I am so used to speaking to someone else that it was hard for me to really bring my full personality to the recorded interview responses.

Second was the technical interview. I am still learning more about data structures and algorithms so I struggled a bit with this section and psyched myself out during it. I am currently working on Colt Steele's Udemy JS algorithms and data structures masterclass so I will be more prepared in the future.

The final piece was the hackathon. It was a 12 hour block with about 2 hours of introductions, and presenting. I had no idea that you would be able to meet with your time the night before and wish I would have known so I could have taken the time off so I could have been more present during the meeting. Since I was working, I was only able to listen into the meeting but really couldn't add much to the discussion. We decided to do Python for the backend and React for the frontend. We divided our team in half and I was part of the React frontend team. Before we started coding, we discussed the given problem, our goals, and our data types. Our first mentor really just left us alone and seemed really busy so we thought we were on the right track. I was in charge of taking notes, assigning tasks, and keeping track of progress. After everything was discussed, we broke off into frontend and backend and started coding. I was in charge of create account and logging in. I was feeling good but we were already 4 hours into our time and our second mentor came in. I really appreciate our second mentor but he definitely changed everything. I wish he would have been there at the beginning to start us done the right path. He said our scope was too big, and it was. We were trying to do too many things at once and there was no way we were going to get done. He said that the first thing to scrap was the log in and create account because every project has that and it isn't unique or innovative. With this, all my code was tossed out. I then decided to help the other two people in the frontend team with their pages instead. Time flew by after this. We kept checking in with the backend and they were struggling getting the database in place. With only an hour left in our coding time, the database was finally ready to call however none of us on the frontend were used to calling a database in Python and realized we didn't have enough time to figure it out. We decided to hard code in our data so we had something to show during our presentation. We quickly figured out our presentation and were the first to present. I am pleased with what we accomplished and definitely learned a lot during the hackathon.

My advice for anyone doing a hackathon is to focus on one feature at a time. Start with the simplest data and the most unique feature and work off of that. Set aside time the night before to talk to your team. Make sure to keep notes and keep organized. They are definitely looking for people who aren't afraid to talk up and take control of a situation. Two people got job offers from my group and it was pretty clear why they got those offers. They did the most coding and they were not afraid to speak up. Another thing I wish I would have known was how many people would be participating in the hackathon. In my group it was 400 people! I wasn't expecting that many people to make it to that point. I am not sure if people get eliminated along the way or if everyone gets to participate in the hackathon. Also make sure you prepare food and have water close by. You are going to need the energy. I will definitely be reapplying and doing more hackathons in the future. If you are reading this and about to go into a hackathon, I am wishing you the best of luck!

Post Graduation and Mock Technical Interview

Dorthy Thielsen — Fri, 20 May 2022 19:46:30 +0000

On March 24th I graduated the Flatiron Full Stack Dev bootcamp. It was a wild ride being the bootcamp and I am so excited to be done and starting my new career. I wanted to give my thoughts on the Flatiron bootcamp, and the Skilled mock technical interview.

What probably most people are wondering is was the bootcamp worth it? In short, I would say yes. I had no coding knowledge or experience going in so I would have had no idea where to start teaching myself. I liked how the lessons built on each other and how you could see how the information could be used in different languages other than the ones they teach. In retrospect, I wish I would have done the in person or more structured bootcamp. I wasn't able to due to my schedule at the time, but having watched the lectures from previous cohorts, the information was presented in a more digestible way. If you do the self-paced course like I did, pick a previous cohort and watch all the videos as you go. I really liked Laura's and Eri's cohort the best. I watched a lot of self-paced students really struggle through and if it wasn't for my determination, I don't know how I would have every completed the course. It is tough to stay motivated when you feel like you are all by yourself. The study groups are also really helpful. Most of the time it is just people asking about questions on their final project, but I learned a lot from that even when I wasn't familiar with the concept. I would record the study group and when I came across the topics in the course, I would go back and watch that section of the study group again. Dustin, who is the self-paced cohort lead, was so helpful and would often live code and talk about a particular subject and it was so great to watch. I was always so nervous for the final assessments for each section, but I always passed on my first go. I feel really great about that accomplishment.

Here is my constructive criticism on the bootcamp. Some of the lessons are really hard to understand. Some of the labs have absolutely no instructions and have really weird tests with no good feedback. For example, a few times because I named a class something different, my tests wouldn't pass but it wouldn't say that it couldn’t find the class but would give a different weird error. The React section, which was my favorite, is very outdated. The recently started adding additional content on hooks, but unless you know to seek it out, you will be going into technical interviews with very outdated information. Luckily I was watching Laura's cohort videos and she teaches hooks. She also gave a lot of good resources for me to use to also teach myself about them. I used hooks in my final project and am obsessed with hooks now.

Speaking of hooks and React, after graduation you get a token to have a mock technical interview through Skilled. I decided to take the React assessment. I passed with flying colors and it was a great interview. Hyung Kim was my assessor and was so nice and put me at ease immediately. The question section asked mostly about broad topics about React. Questions like: What is JSX? What are hooks and how do you use them? How do you store state? Explain class versus functional components. Is there a better way to store state and what library would you recommend using? What is useEffect and what is the dependency array it takes in? What if you leave that array empty?

For the live coding I had to make a counter button that increased and decreased. I then had to put a limit on it so it couldn't go below 0 or passed ten. For the next section, I had to call an API and display information from the API. The only hooks I used for both of these were useState and useEffect. I of course made a few tiny mistakes but was able to quickly fix them without a lot of hints. Overall I am really proud of myself for being able to live code in front of other people and be able to answer all of their questions.

Here is the feedback I got about my technical interview: "Dorthy was a great candidate to talk too! She was very professional and nice during the entire interview process. We started the interview with brief introductions of each other where we discussed experience and future endeavors. We first started the interview process by discussing high level conceptual questions in which she did a great job answering on! She was able to answer each and everyone of those questions clearly. Next, we moved onto a code challenge in which involved multiple rounds of questions. She did a very good job of walking me through the challenge question as well. Well on her way to be a successful engineer!"

With all of this said, I am really happy I took this leap of faith into a new career. It has been a humbling and rewarding process. It wasn't an easy journey by any means but I worked really hard. The thing that has also been so great is how supportive other engineers have been. Every single person I have interacted with has been so helpful and kind. There are no secrets, everyone wants to help each other and that is so refreshing. That was something I never really liked about puppet fabrication were all the trade secrets that people didn't want to tell you. I always shared any information I knew with other people. Even places I worked at for years wouldn't tell me some of the materials and techniques. Even one boss would take the labels off of some of the materials and would do work after hours to keep his trade secrets to himself. I think that is part of the reason the industry is suffering so much. It is such a breath of fresh air to be in a new environment that is so nurturing. I am now looking for jobs and hoping to land something soon.

React/Redux Final Project

Dorthy Thielsen — Sun, 13 Mar 2022 18:16:59 +0000

Today I am going to turn in my final, final project for the Flatiron Bootcamp. It is a really weird feeling. Part of me thinks I can’t possibly be done. Although I still have to do my final assessment plus all the post bootcamp work. Part of me also feels like I still have so much to learn, how could I be done. I think that feeling will always be there a bit. There is still so much to learn, but I have exhausted the bootcamp and will need to turn to other outlets for my continuing education.

For this project, I decided to redo my vanilla JS project. This was intentional as I wasn’t really happy with my JS project and really wanted a chance to do it better. I also wanted to use hooks and React Router 6 for my project, which the curriculum doesn’t really go over all too well. I wanted to challenge myself to use these things that were a bit out of scope for the course. The format of React is so different from JS and also dealing with state and Redux that I wanted to concentrate on that instead of worrying about the data I was displaying. I also wanted to focus on doing full CRUD, and there wasn’t anything on editing data in the labs so I knew that would be a challenge to figure out. It was also a big shift from using class and presentational components and switching to all functional components. Do I love my solution for editing details? No. Do I want to change this at some point? Yes. However I came to a point where I felt that the project was good enough to turn in. I will never be 100% happy with every aspect of my code. There is always room for improvement. With things changing so much in my personal life right now, I just needed to call this good enough for now and proceed to graduate. Graduating is terrifying. I know that if I don’t take this chance, I will just keep putting off this last step.

Let’s go over the hooks I used in my project. First, useSelector() which maps state to props and replaces you having to use connect(). useSelector() takes an argument of a callback function that will take in the state from your store and then return the value that you want to set as a state variable. I did learn that if you are using multiple reducers and are using combineReducers your callback function needs to dig into the nested reducer information via state => state.petReducer.pets. This is just saying in my state, go to the petReducer and from that reducer I want to access the pets’ information. Next hook I used, that is the foil to useSelector() is useDispatch(). This hook replaces mapDispatchToProps in connect(). Between these two hooks we have no use for connect in this project anymore. The next big one was useState() which lets you set the initial state. You can’t nest this inside of other functions. It returns an array, the first is the state value and the second is the function to change that value. This hook was so handy in forms. const [name, setName] = useState(‘’) allows you to set the state of name to an empty string and then you can use this in your form as the value. Then for your onChange you can use a callback function to setName to the e.target.value via onChange={e => setName(e.target.value)}. Now the state of name will be whatever is input in the form. You can also set the initial state to a previous value. I used this in my edit forms to have the input be auto populated with information from the entry that is being edited. This is where useNavigate() and useLocation() came in handy to pass state from one component to another. First, you set useNavigate() to a constant to use the function as you can’t pass a hook to Redux and it is a rule of hooks. const navigate = useNavigate(). The simplest way to useNavigate() is with a back button. All you have to do is onClick={() => navigate(-1)} and the user will be taken to the previous page. Pretty cool, right? This hook replaces useHistory() from React Router 5. Since I am using React Router 6, I had to use useNavigate() The first time I used this was to pass information from a pet down to it’s toys. So on my event handler for the open toy box button, I used navigate(“/toys”, {state: { pet_id: props.id, name: props.name}}). The first argument is the location and the second argument is the state you want to pass down. So I want to navigate to /toys and I want the state of that pet’s id and name. To use this information, you need to use the next hook useLocation(). Again you set a variable to be equal to the function of the hook const location = useLocation(). Then we can set variable to be equal to the state being passed const petName = location.state.name. Now I have access to that pet’s name inside of my toy component so I can display their name at the top of their toy list. This also was needed so I had access to the pet’s id. Since toys belong to pet and a pet has many toys, I needed a way to persist the pet’s information to the toy and pass in the correct pet id to the toys. For instance in the toy form, there is a hidden field of the pet’s id so the toy is properly saved with the current pet linked. The last hook is useEffect() which allows you access to lifecycle methods similar to componentDidMount(). It is a function that takes in a callback function and an array of dependencies that determines when the callback function is called. If you don’t pass in any dependencies, the function will only run on first render. This is a great place to call anything that needs dispatched, like fetching a list to be rendered, which you only need to happen upon first render.

I also played with an animation with CSS which was really fun. I tried to get more comfortable with className inline CSS during this project. In general I tried to really challenge myself with this project and try things that scared me or were too intimidating before. You can check out my frontend repo and my backend repo. I do plan to work more on this project after graduating. Wish me luck on my assessment! See you on the other side.

Quote Maker Lab: Redux/React

Dorthy Thielsen — Wed, 23 Feb 2022 21:53:59 +0000

I am getting so close to finishing my bootcamp at Flatiron. I have finished React and am diving into Redux. I will say that when I started learning React, the thought of where to store state was a bit overwhelming. When I started drawing out my node trees, that got a lot easier. Then came in Redux and the idea of the store where all your state is conveniently held. I was actually a little bummed because I really felt like I had a grasp on state in React and now came in this thing to make things easier. Although I will say the text has been a little confusing where it will say to not always use the store, but use the store. Still figuring things out, but that is the whole experience of coding, right?

I wanted to go over this Redux lab in the bootcamp that seemed overwhelming when I started it. It was the first large lab in the Redux section. It is called the Quote Maker Lab. Basically you have a form where you can submit quotes and the author of those quotes and then you want those quotes to show up on the page with all the information, plus a down vote, up vote, and delete button with all their functionality built in.

To start chipping away at this lab, I first mounted the main components to my App.js, those being <QuoteForm /> and <Quotes />. By adding those to the render() my page was already starting to look better as the there was some code provided in this lab to render a basic form and the <h1>s. Always remember to import the corresponding files into App.js via import QuoteForm from "./components/QuoteForm". Also quick note: adding .js to the end of your file name is optional when importing. I personally always leave it off. Then I ran the tests provided to see where to start. The first step the tests wanted me to do was to deal with the action creators, in this case they were addQuote, removeQuote, upvoteQuote, and downvoteQuote. All action creators are just functions that you are exporting. All of these functions need to return an object with a type and a payload. I wanted to show you that you can write these either multiline or as an arrow function:

export function downvoteQuote(quoteId){
    // should return an object with a type of "DOWNVOTE_QUOTE" and a quoteId
    return{
        type: "DOWNVOTE_QUOTE",
        quoteId: quoteId
    }
}

// or as an arrow function:
export const downVote = (quoteId) => ({ type: "DOWNVOTE_QUOTE", quoteId: quoteId })

Basically all the actions pretty much looked like this but with a different type. With all these action creators down it was on to the QuoteCard Component as that was the next one listed in the test. This component already had some code, but was missing its props to display the content. This test being next seemed a bit strange especially because we haven't gotten to how props are being passed down. In the README, the example of the object that is being created only has attributes of id, content, and author, no mention of votes. However I added in props.quote.author, props.quote.content, and props.quote.votes to the card rendering from this component. I will come back to showing the votes later on as currently this code won't work.

The next test was for the QuoteForm component which will allows us to start dealing with state and those props previously mentioned. This component had some provided code for the form, but it currently had no functionality. I first wanted to tackle the state with some key/value pairs.

  state = {
    content: "",
    author: ""
  }

Something I immediately noticed with the form provided was that there was no unique identifier between the input fields, so I added a name to each. This will allow us to handle events easier as you will soon see. Also currently the form doesn't work when you try to type in it, so a onChange event handler needed to be added to each input. Now the inputs looked like:

                      <input
                        className="form-control"
                        type="text"
                        name="author"
                        value={this.state.author}
                        onChange={this.handleOnChange}
                      />

Next was to tackle the onChange event handler to handle updating the components state and allow for the input fields to work. By previously adding the name attribute to each input field, I no longer have to write out each key/value pair in this method, but can just call on the event's target's name. A quick note: the reason event.target.name has to be in brackets is because we are getting the key from an operation and we just want the value from that operation.

  handleOnChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

Now to tackle submitting the form. First I am going to add the onSubmit={this.handleOnSubmit} to the form so that the event can be handled. As with almost any submit, we want to preventDefault() so the page doesn't automatically refresh on submit. Then we want to create a quote object from state. In this lab we are using uuid() to create our unique id's for every instance. Next is to pass the quote object to the action creators that we created earlier in this lab. When we are submitting a form, we want to create an object so the only action creator that makes sense is addQuote. We need to connect to the store in order to do this via connect(). The thing we always need to do with actions is to dispatch them via mapDispatchToProps. This way we are getting access to dispatch so we can dispatch the return value of those actions to the reducer. This way we can call dispatch in our handleOnSubmit via this.props.dispatchAddQuote(quote). Then we want to return state to default so the form clears out.

  handleOnSubmit = event => {
    // Handle Form Submit event default
    event.preventDefault()
    // Create quote object from state
    const quote = {
      id: uuid(),
      content: this.state.content,
      author: this.state.author
    }
    // Pass quote object to action creator
    this.props.dispatchAddQuote(quote)
    // Update component state to return to default state
    this.setState({
      content: "",
      author: ""
    })
  }

const mapDispatchToProps = (dispatch) => {
  return {
    dispatchAddQuote: (quote) => dispatch(addQuote(quote))
  }
}
//add arguments to connect as needed
export default connect(null, mapDispatchToProps)(QuoteForm);

Now to look at our reducers. First is to see how the reducers are being connected to the store in index.js.

import rootReducer from './reducers/index'

let store = createStore(rootReducer)

Let's quickly go back to the QuoteCard even though it is revisited in the last two tests. This way we can visually see if our reducers are working. We want to render the <QuoteCard /> in our Quote container. First we must gain access to our quotes via connect() and mapStateToProps. We could just write this inline in our connect(). We are taking the state from our store and returning an object that is mapped to props. We are getting a key of quotes from our store state. This key is coming from our rootReducer, more on this later. TLDR: we are taking the state from our store and mapping it to this component as props. I will also include the way to write it not inline.

export default connect(storeState => ({quotes: storeState.quotes }))(Quotes);

// or 
const mapStateToProps = (state) => {
  return {
    quotes: state.quotes
  }
}
export default connect(mapStateToProps)(Quotes);

Our quotes are going to be in array so we are going to have to map them in our render(). {this.props.quotes.map(q => <QuoteCard quote={q} />)}

Now to go look at that reducer. What is weird is thatrootReducer has combineReducers which isn't necessary for this project. But it does link to quotes and gives us access to our quotes array, so let's take a look at that. This is one of the few things that doesn't have any code really. As with most reducers, let start by making a switch statement. First action is "ADD_QUOTE" and we want to take the previous state and add to it so this is a great use of the spread operator or you can use .concat this way we are being non-destructive. You would never want to use .push as that is destructive and not making a copy. "REMOVE_QUOTE" is our next action. We are going to want to use filter because we want to find the specific quote and delete it. This is where having that uuid() comes in handy.

The next two reducers I had no idea where to even start because they have to deal with the upvote and downvote. Votes currently aren't stored in state at all. Let's go back to QuoteForm as that is where our default state is created. We can assume that votes start at 0 when a quote is created so we can add votes: 0 to our state. Back to our reducers. Remember that from the action, we are just getting back the id of that quote. So we need to find the quote whose id matches and then increase or decrease the votes. Also remember that this Redux so we don't want to set state here or mutate state. However we only have access to the id so how do we get the whole state of the quote? First let's actually find the index. We want to return the state up to the portion that we are altering so use slice() with our found index. That will return everything up to this quote, then we want to return the correct quote and then the rest of the state. We still don't really have the quote content so still need to figure that out. Next to find the value of the correct quote. We want to create a new object. We first want to use the spread operator to maintain the state and then pass in the key/value pair we want to change. Then we will do the same for downvotes although keep in mind that we have to make sure the number of votes is positive before we subtract a vote.

export default (state = [], action) => {
  switch(action.type){
    case "ADD_QUOTE":
      return [...state, action.quote]
      // or return state.concat(action.quote)

    case "REMOVE_QUOTE":
      return state.filter(q => q.id !== action.quoteId)

    case "UPVOTE_QUOTE":
      let quoteIndex = state.findIndex(q => q.id === action.quoteId)
      let quote = {...state[quoteIndex], votes: state[quoteIndex].votes + 1}
      return [...state.slice(0, quoteIndex), quote, ...state.slice(quoteIndex + 1)]

      case 'DOWNVOTE_QUOTE':
        let index = state.findIndex(quote => quote.id === action.quoteId);
        let quoteDown = state[index];
        if (quoteDown.votes > 0) {
          return [
            ...state.slice(0, index),
            Object.assign({}, quoteDown, { votes: quoteDown.votes -= 1 }),
            ...state.slice(index + 1)
          ];
        }
        return state;

    default:
      return state;

  }
}

Lastly default, you just want to return state. This way something is coming back incase a random action is hit for some reason.

The last thing is to get everything running in QuoteCard. So we need to build the quotes and map them better than we previously did. Down and up votes need to be separated so this is where our action creators come back in handy. Let's import them into the Quotes container so it can be dispatched to the card as props.

import React, { Component } from "react";
import { connect } from "react-redux";
import QuoteCard from "../components/QuoteCard";
import { removeQuote, upvoteQuote, downvoteQuote } from "../actions/quotes"

class Quotes extends Component {
  buildQuotes = () => {
    return this.props.quotes.map(quote => {
      return (
      <QuoteCard 
        key={quote.id}
        quote={quote}removeQuote={this.props.removeQuote}
        upvoteQuote={this.props.upvoteQuote}
        downvoteQuote={this.props.downvoteQuote}
      />
      )
    })
  }

  render() {
    return (
      <div>
        <hr />
        <div className="row justify-content-center">
          <h2>Quotes</h2>
        </div>
        <hr />
        <div className="container">
          <div className="row">
            <div className="col-md-4">
              {this.buildQuotes()}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
function mapStateToProps(store) {
  return {
    quotes: store.quotes
  }
}
//add arguments to connect as needed
export default connect(mapStateToProps, { removeQuote, upvoteQuote, downvoteQuote })(Quotes);

Now we can call these dispatch actions on the buttons in QuoteCards.

Here is the link to the repo if you want to see the entire code. I honestly started writing this when I started up this lab not knowing how long this would take. I apologize that it gets a little rushed at the end but I was running out of time for the day and wanted to be done. Also didn't proofread so please forgive any typing errors. I really struggled with this lab and am still struggling with some of the concepts, but that is what these labs are for.

JS Flatiron Assessment Study Sheet

Dorthy Thielsen — Fri, 21 Jan 2022 17:44:05 +0000

I recently completed and passed my JS assessment at Flatiron. I was a panicked mess before the assessment and was studying so hard. I figured I would give a study sheet of concepts to know and also what to practice for the live coding.

What does the this keyword mean?

inside a function, this is the object that represents the function's execution context
in a method it refers to the owner object
alone and in a function it refers to the global object
in a function in strict mode it is undefined
in an event, it refers to the element that received the event
methods like call, apply, etc can refer this to any object
returns the current execution context while the function is being run, whether the context was passed explicitly or implicity, this returns it
Implicitly set
- in bare function calls the context is automatically set to the global object unless prevented by "use strict"
- in non-bare function calls the context is automatically set to the object to the left of the dot
- in OOJS execution context defaults to the new thing being created in a class's constructor

What is destructuring?

creating variables from objects and arrays
create objects with same variable name key value pairs
arrays are destructured with [] and can be set to any variable and has to be in order
objects are destructured with {} and the variables names need to match the key but can be in any order

What is the difference between == and === ?

== loose equality
- returns true if the two values are equal but also with type conversion 42 == '42' => true '0' == false => true
=== strict equality
- returns true if the two values are equal without performing type conversions
!= loose inequality
- returns true if two values are not equal but also will do type conversion
!== strict inequality
- returns true if two values are not equal without performing type conversions
generally you want to use the strict operators as the loose operators will return true even if the data types aren't the same

What is the difference between event capturing and bubbling?

bubbling
- the event is first captured and handled by the innermost element and then propagated to outer elements
capturing
- the event if first captured by the outermost element and propagated to the inner elements

What is JSON?

JS Object Notation
a string that JS knows how to turn into an object
serialization format

What is DOM and how do you manipulate it?

Document Object Model
uses JavaScript to:
- ask the DOM to find or select an HTML element or elements in the rendered page
- remove and/or insert an element
- adjust a property of the selected elements
can only be spoken to via JavaScript
data representation of the objects that comprise the structure and content of a document on the web
when the DOM is changed, it doesn't change the source

How do you handle events/ How do event listeners work?

events are something the user does
3 phases
- capturing phase- the event goes down to the element
- target phase- the event reached the target element
- bubbling phase- the event bubbles up from the element
addEventListener()
- to teach nodes or elements to listen for an event
- allows you to associate hearing an event with executing a callback
- takes two arguments
  - the name of the event
  - a callback function to handle the event
  - takes a string with the name of the event and a callback function
- if you call a function plus () in an event listener, you are actually passing in the return value which is undefined not the function itself
  - if your event automatically fires upon loading instead of the event this is why. Just remove ()

What is fetch and how does it work and what does it return?

It is an asynchronous function and doesn't block up our call stack
all fetch request go first to the web api then to the callback queue and when the call stack is clear, the event loop pushes the fetch request to the call stack
usually getting a response that you want to put into json so it is readable and then you are also getting the data or the object based on that response
will only return the promise, you can never make the function return all the data you retrieved from the promise
- you can access the data until you are in the callback queue
- you can only access the data in an event method
- can only access the data in the then methods
because it is an asynchronous method, anything called in that function outside of the fetch, then statements, will run before the fetch method so you can't call anything you declare in the fetch/then methods because they will run after the rest of the block outside of that scope
a global method on the window object
pass in a path to a resource as an argument
to use the data that is returned by fetch, you need to chain on the then() method

What is a Promise? Can you explain how it works in your code?

A Promise object represents a value that may not be available yet, but will be resolved at some point in the future. It allows you to write asynchronous code in a more synchronous fashion. For example, if you use the promise API to make an asynchronous call to a remote web service, you will create a Promise object which represents the data that will be returned by the web service in future. The caveat is that the actual data isn’t available yet. It will become available when the request completes and a response comes back from the web service. In the meantime, the Promise object acts like a proxy to the actual data. Furthermore, you can attach callbacks to the Promise object, which will be called once the actual data is available.

Why do we use .then after a fetch request?

usually getting a response that you want to put into json so it is readable and then you are also getting the data or the object based on that response
used with fetch() to help convert the response from fetch
is chained on the promise from the fetch request but isn't usually explicitly called promise.then()
takes a function usually with a parameter of response and data
this is where you tell JS to ask the network response to be turned into JSON
the second .then() is when you actually get some JSON which is the return from the first .then()
used to get the data from the return of the fetch method which is the promise
chained on to fetch request to access the data from the promise that is returned
every .then returns a new promise
.then is a method that you are calling on a promise that's going to take in a callback function and it is going to put that callback right on the callback queue when you get the response back so that when the event loop is empty it is going to call the callback function and pass in the response that you got from the backend from the web api

Have an understanding of hoisting, scope and context

scope/lexical scope
- the only thing that matters is where function and variable are declared which is usually the outer scope
- scope of that variable of a function will have is determined on where it is defined not when it is executed
- with JS it has to do with where declared variables and methods are available within the code
- what functions and variables we have access to
- function scope
  - function from the first curly bracket to the last curly bracket
- global scope
  - access everywhere
- block scope
  - only access them within a block
  - for, if, or any loop
- where the variable is defined and how it is defined(let, const, var)
execution context
- the 'environment' a function executes in; that is, variable scope (and the scope chain, variables in closures from outer scopes), function arguments, and the value of the this object.
- within it, you can write an expression that references a variable of invokes a function declared in the same context
- creates a new scope that encompasses all of the variables and functions declared in the execution context
- global execution context is the context that implicitly wraps all of the JS code in a project
- variables and functions declared in the global execution context, in the global scope, are accessible everywhere in your JS code
- if a variable or function is not declared inside a function or block it is in the global execution context
hoisting
- refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.
- defines if something is available to be called before it is declared.
- let isn't hoisted so you will get a reference error if you use a variable before you declare it and it can be declared without a value
- const isn't hoisted and you will get a reference error if you use the variable before you declare it and the variable must have a value on declaration
- var gets hoisted and can be declared without a value
- function declarations are hoisted
- arrow functions and function expressions are not hoisted

What is the purpose of the constructor function?

to set/assign properties to new instances of an object
the thing you create with the function is a more specific than object by using the keyword new
uses this as the function's context since functions in JS are also objects, a function can say set a property on me
creates a new copy of itself, leaving the original unchanged and on the copy it is setting the properties based on the arguments passed into the function and the keyword new tells the constructor to do that

What is a callback function? When do we use them? Give examples of callback functions in your project.

when you pass a function expression(an anonymous function) or the pointer(variable name, declared function name) to a function as an argument, the passed function is called a callback
the receiving function of a callback will execute or call that callback function at a later time
we run some code, give it a callback, and maybe run it later
functions that are specified as arguments when calling a function which will start executing code in the background
- an example is the second parameter of the addEventListener()
  - the first parameter is the type of event to be listened for and the second parameter is a callback function that is invoked when the event is fired
  - when you pass in the callback function, you are passing in the function's reference as an argument and is not executed immediately
most asynchronous functions are passed a callback function
includes setTimeout() and fetch()

Why do we use serializers?

the process of translating a data structure or object state into a format that can be stored or transmitted and reconstructed later
In JavaScript, for example, you can serialize an object to a JSON string by calling the function JSON.stringify().
once in a serialization format, it can be used to create a semantically identical clone of the original object
serialization of OO objects does not include any of their associated methods with which they were previously linked

What is the purpose of JSON.stringify()?

When sending data to a web server, the data has to be a string.
In JavaScript, for example, you can serialize an object to a JSON string by calling the function JSON.stringify().

What are the differences between let, const, and var?

Var
- Hoisted
- Function scoped
Let
- Can change value
- Block scoped
Const
- Doesn’t change value
- Block scoped

What kind of inheritance is JS?

Prototypal

Things to practice for live coding

add a form to your DOM, have the input be put on your DOM and return the form to blank
add a like button that increases a counter
convert an arrow function to a function declaration and vice versa
practice array methods like .map() .filter() etc.
be able to look at random code and know this, hoisting, and scope of variables and functions
Identify places in your project where the code is running asynchronously and explain what that means.

Lastly, good luck! You are going to do great on your assessment. Another tip for the live coding, use console.log() and debugger a lot! It shows that you know how to use these and shows that you know how to problem solve. I was told that a lot of people panic and forget to use them and end up freezing up.

Furmiliar: JS Project

Dorthy Thielsen — Fri, 14 Jan 2022 23:56:41 +0000

I have finally finished my JavaScript final project for the Flatiron bootcamp. I will say that this project has been by far the most challenging yet. The project had to have a Rails API with a HTML, CSS, and vanilla OO JS frontend. All aspects of processing data had to be done via JS. Trying to do forms and talk with the API was the most important aspect of the project, but most of the course material didn’t cover this at all. I had to watch multiple tutorials to get a grasp on how to approach this. A lot of the labs in this section towards the end were really lacking. I did learn a lot from doing this project but still feel shaky about my knowledge of JS. With most of my coding adventure so far, the more you learn, the more you realize what you don’t know.

The use case for my project is an app for pet owners to keep track of toys their pets did and didn’t like. Each pet has a toy box and that toy box contains all the toys for that pet. With the toy boxes and toys, there is full CRUD. The add toy form only pops up when you have opened a toy box so no toys can be added without an associated box.

A big aspect of this project was to do DOM manipulation on a SPA. Doing this aspect was fun and I tried to mainly use variables as I personally like it more than just rendering everything with .innerHTML. I did one of my methods with .innerHTML just to show that I knew how to do it.

addToDom(){
        const toyBoxDiv = document.getElementById("toy-box")
        const toyBoxCard = document.createElement("div")
        toyBoxCard.className = "toy-box-card"
        toyBoxCard.setAttribute("data-id", `${this.id}`)
        const photoBox = document.createElement("img")
        photoBox.src = this.photo
        photoBox.className = "toy-box-photo"
        const toyBoxName = document.createElement("h2")
        toyBoxName.innerText = this.name
        const openToyBox = document.createElement("button")
        openToyBox.innerText = "Open Toy Box" 
        openToyBox.setAttribute("id", `toy-box-button-${this.id}`)
        openToyBox.setAttribute("data-action", "open")
        openToyBox.addEventListener("click", this.openEvent)
        const deleteToyBox = document.createElement("button")
        deleteToyBox.innerHTML = "&#10006"
        deleteToyBox.setAttribute("id", "toy-box-delete")
        deleteToyBox.setAttribute("data-action", "delete")
        const editToyBox = document.createElement("button")
        editToyBox.innerHTML = "&#9999"
        editToyBox.setAttribute("id", "toy-box-edit")
        editToyBox.setAttribute("data-action", "edit")
        toyBoxDiv.appendChild(toyBoxCard)
        toyBoxCard.appendChild(photoBox)
        toyBoxCard.appendChild(toyBoxName)
        toyBoxCard.appendChild(openToyBox)
        toyBoxCard.appendChild(deleteToyBox)
        toyBoxCard.appendChild(editToyBox)
    }
// versus innerHTML
createToyForm(toyBoxAssociation){
        const toyFormContainer = document.getElementById("toy-form")
        toyFormContainer.innerHTML = ""
        toyFormContainer.style.display = "inline-block"
        const toyForm = document.createElement("form")
        toyForm.innerHTML = `<h2>Add a New Toy</h2>
            <input type="text" id="toy-photo-input" placeholder="Photo URL">&emsp;
            <input type="text" id="toy-name-input" placeholder="Name">&emsp;
            <input type="text" id="toy-brand-input" placeholder="Brand">&emsp;
            <input type="text" id="toy-price-input" placeholder="Price">&emsp;
            <input type="text" id="toy-url-input" placeholder="Website URL">&emsp;
            <input type="text" id="toy-rating-input" placeholder="Rating 1-5">&emsp;<br><br>
            <strong>Needs Repair?</strong> <input type="radio" id="toy-needs-repair-input-true" name="needs-repair" value="true">True
            <input type="radio" id="toy-needs-repair-input-false" name="needs-repair" value="false">False &emsp;
            <strong>Squeaker?</strong> <input type="radio" id="toy-squeaker-input-true" name="squeaker" value="true">True
            <input type="radio" id="toy-squeaker-input-false" name="squeaker" value="false">False &emsp;
            <strong>Crinkle?</strong> <input type="radio" id="toy-crinkle-input-true" name="crinkle" value="true">True
            <input type="radio" d="toy-crinkle-input-false" name="crinkle" value="false">False &emsp;
            <strong>Hides Treats?</strong> <input type="radio" id="toy-treat-input" name="treat" value="true">True
            <input type="radio" name="treat" value="false">False &emsp;<br><br>`

        const addToyBoxId = document.createElement("input")
        addToyBoxId.setAttribute("type", "hidden")
        addToyBoxId.setAttribute("name", "toy-box-id")
        addToyBoxId.setAttribute("id", "toy-box-id-input")
        addToyBoxId.value = `${toyBoxAssociation}`

        const submit = document.createElement("button")
        submit.setAttribute("id", "toy-submit")
        submit.setAttribute("type", "submit")
        submit.setAttribute("value", "Add Toy")
        submit.innerText = "Add Toy"

        toyForm.appendChild(addToyBoxId)
        toyForm.appendChild(submit)
        toyFormContainer.append(toyForm)

        toyForm.addEventListener("submit", this.toySubmit)
    }

One thing that really tripped me up on my project was in my fetch requests I was initially told that since I had a nested array of attributes that I needed to use dot notation on the data I was receiving to access it. I asked several people to figure out what was going on and the third person I asked was finally able to help me. It was odd because in debugger the response was just CORS, which made no sense to anyone and I am still puzzled why calling data.toys instead of data would return CORS.

Another thing that I struggled with were the radio buttons. I had a hard time finding good documentation on vanilla JS handling radio buttons. Handling radio buttons with Rails was so easy and JS proved to be a lot more challenging. That is one aspect I one day want to revisit is fixing my radio buttons. I really wanted for when you edit a toy, the radio buttons are filled in with the information from the API. I couldn’t find an elegant solution that was DRY.

I found it helpful to go through my code and console log every function as it was hit. I figured I would provide that breakdown as well. I broke down each action and stated the class that each method is from and the method name. The classes I have are toyBoxAdapter and toyAdapter which deal with the fetch requests for those objects, toy and toyBox, and toyForm and toyBoxForm for the forms associated with those classes. You can view all of my code on my github

upon initial load

DOMContent Loaded
toyBoxAdapter fetchToyBoxes
toyBoxForm createToyBoxForm
toyBoxForm listenEvents
toyForm listenToys
toyBox addToDom

creating a toyBox

toyBoxForm handleSubmit
toyBoxAdapter createToyBox
toyBox addtoDom

editing toyBox

toyBoxForm handleEvents
toyBoxForm handleSubmit
toyBoxAdapter editToyBoxes

deleting toyBox

toyBoxForm handleEvents
toyBoxAdapter deleteToyBox

open toyBox

toyBox openEvent
toyBox getToys
toy renderToys
toyForm createToyForm
toyBoxForm handleEvents

add toy

toyForm toySubmit
toyAdapter createToy
toy renderToys

edit toy

toyForm toyEvents
toyForm toySubmit
toyAdapter editToy
toyForm toySubmit

delete toy

toyForm toyEvents
toyAdapter deleteToy

If you are interested in the backend of my app. I just used rails new project_name --api to create the backend of my app and kept most things the same from the auto-generated code.

Now with this project wrapped, I have to prepare for the assessment. I have been studying and practicing but still feel unprepared. I think I will just have to schedule the assessment and see how it goes. I have heard that this assessment is one of the most challenging. Wish me luck!

My First Time Using JS

Dorthy Thielsen — Thu, 04 Nov 2021 16:51:25 +0000

This week I started learning JS in my Flatiron bootcamp. This is the language I was most excited to learn. It is definitely more challenging than I anticipated and I still have very basic questions about so many aspects of the language. For instance, semicolons, when to use them? The arrow function expressions are still really muddy for me. Division of concerns is not as clear to me in JS as it was in Ruby. It is only my first week so I am giving myself some room to struggle.

Most of the labs this week were basically code alongs with no real substance. They were very helpful for me, but overall not that interesting. I wanted to share my first real lab in the JS course which is called Task Lister Lite. The point of the lab is to use .preventDefault() so that every time someone submits a new task to the list, the page doesn't refresh. Bonus points for doing anything else. I decided to also add an edit and delete buttons as well. This is purely front end so none of the information is persisted to a database of any sorts.

Instead of doing my usual explanations, I have decided to just share all of the pseudo code I did. Since I am so new to the language, I wrote so much pseudo code that I think is more helpful than me describing every aspect. Anyways I hope you enjoy my first JS project.

let editMode = false;

document.addEventListener("DOMContentLoaded", () => {
  const taskForm = document.getElementById('create-task-form');
  // grab form
  console.log(taskForm);
  taskForm.addEventListener("submit", handleSubmit)
  // add event listener for submit and handling submit
});

function handleSubmit(event) {
  event.preventDefault();
  // prevent the default so the page won't reload
  console.log(event);
  const taskInput = document.getElementById('new-task-description');
  // grab input field

  if (!!editMode) {
    editMode.children[0].innerText = taskInput.value
    // edit the children of the individual task and the first child is the text
    document.getElementById('submit-task').value = "Create New Task";
    // resetting the submit button to say Create New Task again
    editMode = false;
    // ending edit mode
  } else {
    addTask(taskInput.value);
  // add the value of the input to the task list
  }
  taskInput.value = "";
  // resetting the input field text
}

function addTask(task) {
  const tasksDiv = document.getElementById('tasks');
  // grab the tasks div
  const taskDiv = document.createElement('div');
  // create a new div for each task
  const taskSpan = document.createElement('span');
  // create a span for each task
  const deleteIcon = document.createElement('span');
  // create 'x' element for deletion 
  const editButton = document.createElement('button');
  // create edit button

  deleteIcon.innerHTML = "&#10006;";
  // making delete icon look like an x
  taskSpan.innerText = task;
  // add the text to the task span
  editButton.innerText = "Edit";

  deleteIcon.addEventListener("click", (event) => {
    event.target.parentElement.remove();
    //grabbing the parent element of the delete icon (taskDiv) and deleting it
  })

  editButton.addEventListener("click", handleEdit);

  taskDiv.append(taskSpan, deleteIcon, editButton);
  // add the task span, delete icon, and edit button to the individual task div
  tasksDiv.append(taskDiv);
  // add the individual task divs to the div container

}

function handleEdit(event) {
  const taskDiv = event.target.parentElement;
  // grabbing the parent to the individual task div
  let task = taskDiv.children[0].innerText;
  // grab the individual task div
  const submitButton = document.getElementById('submit-task');
  // grab submit button
  const input = document.getElementById('new-task-description');
  // get the text input
  input.value = task;
  // change the value of the text input to the comment we are editing
  submitButton.value = "Edit";
  // change the submit button to say Edit
  editMode = taskDiv;
  // edit the individual task div
}

Bat Cloud: A Rails Project

Dorthy Thielsen — Wed, 13 Oct 2021 18:36:12 +0000

Today I finished my Ruby on Rails project which is my third final project for my Flatiron bootcamp. If you read my last blog, the concept of this project will be very familiar. I decided to redo my bat researchers’ log web application. With the power of Rails and learning new concepts, I knew I could make the original project even better. I did decide to rename the app Bat Cloud as it sounded better and a group of bats is sometimes called a cloud. If you didn’t read my last blog, I would recommend you do so, it is a quick read, and you can see the improvements.

The main things I updated were a notes field, the associations, and a few new views and options. The note field update was partly to do with the fact that I had to have a many to many relationship. The associations between my models this time are as follows. Researchers have many notes, have many bats through notes, and have many discovered bats through a foreign key that associates a discovered bat to that researcher. Notes belong to a Researcher and a bat. Bats have many notes, have many researchers through notes, and belong to a discoverer (the researcher who created the bat entry). The new views include all researchers, and recently discovered bats which utilizes a scope method to sort the bats by date found. Another major improvement I made was adding a search field where a researcher can search by the bat tag number. I also implemented Omniauth so someone can log in via Google. I of course would like to add more features in the future, but I am happy with where this project is currently.

I wanted to go over some of the challenges I faced with this project. I definitely struggled with my associations in the beginning and made things a lot more complicated than they needed to be. I originally wanted to have a separate model of an organization that would be the admin. After talking to my cohort lead, he said that he wouldn’t recommend going down that path at this point in time. Instead he suggested giving roles to certain researchers/users. This is what I ended up doing. Each researcher can either be an admin or a member. Any admin can change the access of any member. This of course isn’t the best method and I would like to improve this in the future. I originally tried to put an organization_id foreign key to associate a member with an organization but I realized that I really needed a separate model for organization to make this work. The other issue I faced with my associations was trying to have the bat belong to the researcher and the note, instead of having the note belong to the researcher and the bat. My cohort lead also brought up a good point about how many researchers could be taking notes on one bat. He also suggested having a foreign key that would associate a bat to the person who discovered the bat, which led to me adding the association of researchers having many discovered bats and a bat belonging to a discoverer through the discoverer_id that is a hidden field when you create a bat. Although I realized late in my project that my partial form for edit and new had the hidden field of discoverer_id so when someone edited a bat, they would become the discoverer. Also had to add a bunch of conditionals in case that researcher's account was deleted. I ended up figuring out my associations thanks to the help of my cohort lead. I am glad I talked things out with him before really starting to code. I see so many other students show up with bad associations and a finished project and having so many issues based on their associations. I wanted to make sure I took the time to nail those before getting too far.

Another thing I really struggled with was converting all of my time stamps/datetime into something readable. Since I have so many fields that were time stamps/datetime, it seemed ridiculous to write out strftime methods for all of them. I did a bunch of googling and liked the solution from stack overflow the best. The steps listed were: Create an initializer for it:
config/initializers/time_formats.rb
Add something like this to it:
Time::DATE_FORMATS[:custom_datetime] = "%d.%m.%Y"
And then use it the following way:
post.updated_at.to_s(:custom_datetime)
The code I put in my time_formats.rb was Time::DATE_FORMATS[:custom_datetime] = "%B %d, %Y at %I:%M %P"
In the show page: @bat.updated_at.to_s(:custom_datetime). This worked out great and then when the researcher looks at a bat’s show page all the dates are read as “October 05, 2021 at 12:00 am.” which is more readable than the UTC. I also found out about the datetime_select field on form helpers. This made it a lot easier for someone to enter the date and time in a universal format that would be easy to put in the database without error. Before when people were testing my app, they would often enter something invalid by switching the date and month as the entry wasn’t intuitive before. I am not sure if this was the best solution to my dates problem but it does work. It isn’t as dry as I would like it to be. If anyone has a better solution, please let me know.

While I have been enjoying this bootcamp, I will say that a part of this section that was really lacking was the section on OmniAuth. The two labs that dealt with it, didn’t have you do anything with the information you were given from the third party. It would check that you were able to sign in, but not how to process that information in your own database. I was left scratching my head on what to do with it. For instance, they didn’t mention anything about the uid. They also didn’t tell you how to deal with multiple third parties. Granted there are videos and plenty of information to find out about all this on your own, but I expected them to give a little more on this very important topic. Also a problem I have noticed when I sign in with a provider is that a lot of websites want you to enter a password to delete your account, and your provider password doesn’t work, so I am always at a loss of what to do in those situations. I ended up using Google as my provider for this project as it is how I like to sign in to most websites. I thought it was cool that Google, and Github offer icons for you to use as a developer! I liked that Github even had light and dark options.

Here is my OmniAuth method:

def omniauth
       @researcher = Researcher.find_or_create_by(email: auth[:info][:email]) do |r|
           r.email = auth[:info][:email]
           r.name = auth[:info][:name]
           r.uid = auth[:uid]
           r.provider = auth[:provider]
           r.password = SecureRandom.hex(16)
       end

       if @researcher.valid?
           session[:researcher_id] = @researcher.id
           redirect_to bats_path
       else
           flash[:danger] = "#{@researcher.errors.full_messages.join(", ")}"
           redirect_to login_path
       end      
   end

I do want to keep working on this app. In the future, I want to add password reset, a more secure admin function, the ability to edit and delete field notes, more static pages, and more styling. However it is more important to continue with my bootcamp than work on this project forever. Especially working full time again, I need to keep making progress so I can graduate from this bootcamp and fully switch into my new career path.

Bat Researchers' Log MVC Sinatra

Dorthy Thielsen — Wed, 18 Aug 2021 19:31:09 +0000

Today I finished my MVC Sinatra project for Flatiron School. I am happy to share with you my Bat Researchers’ Log, which is my first web application. The goal of this application is to help researchers from all over the world to communicate about the bats that they are researching.

I first wanted to say how much I loved learning Sinatra. Before this section of Flatiron, everything was CLI which was cool but not as rewarding as seeing something on the internet that I created, although just ran from my localhost. I even got to do my own CSS and HTML styling which was incredible. I did use Bootstrap for a lot of my styling, but definitely made it my own.

MVC stands for Models, Views, and Controllers. Views are what the user sees when they open up a web application. The views are written in .erb files which stands for embedded Ruby. This allows you to add ruby into your HTML. For instance, I often used erb tags to add if statements or to auto generate attributes of a certain bat so you don’t have to hard code in each individual bat. Here is an example from my user show page or account page:

<h3><%= @user.username %></h3>
Email: <%= @user.email %><br>
Organization: <%= @user.organization %><br>
Bats:
   <ol>
       <% @user.bats.all.each do |bat| %>
           <li><a class="button" href="/bats/<%= bat.identification %>"> <%= bat.identification %></a></li>
       <% end %>
   </ol>

<% if logged_in? && current_user.id == @user.id %>
   <a class="btn btn-warning btn-sm active" href="/user/<%= @user.slug %>/edit">Edit Your Account</a><br><br>
   <a class="btn btn-danger btn-sm active" href="/user/<%= @user.slug %>/delete">Delete Your Account</a>
<% end %>

The erb tags are <% %> or <%= %>. If the logic isn’t something that will be shown on the page, you will use <% %>. Otherwise you use <%= %> to display specific information to the user. The views allow the user to communicate through HTTP requests to our controllers.

The controllers relay data from the browser to the application and from the application to the browser. The controller takes requests from the views and then talks to the models. The controller takes requests that are associated with what the user sees as urls. For example my most basic controller function is to load the welcome page, which looks like:

 get "/" do
   erb :welcome
 end

Which is just saying if the request is to get the root then load the view welcome. Basically just loading the home page of my application. If you wanted to save new data, for instance when a new user creates an account, then that would be a post request. We are saving, or posting data to our database.

post '/signup' do
       user = User.new(params[:user])
       #binding.pry
       if user.save
           session[:user_id] = user.id
           redirect to "/bats"
       else
           flash[:error] = "#{user.errors.full_messages.join(", ")}"
           redirect to "/signup"
       end
   end

If we are editing an existing entry in our database, then that would be a patch request.

patch '/bats/:identification' do
       bat_authorization
       #binding.pry
       if @bat.update(params[:bat])
           flash[:message] = "Your bat has been updated."
           redirect to "/bats/#{@bat.identification}"
       else
           flash[:error] = "#{@bat.errors.full_messages.join(", ")}"
           redirect to "/bats/#{@bat.identification}/edit"
       end
   end

Note: to use patch or delete, you must use Rack::MethodOverride which you add that line of code to config.ru with your other controllers. It must be at the top of the list of your controllers, otherwise it won't work.

The models are where data is manipulated and or saved. It connects to our database to create new instances of a class. Basically every time you make a new bat or a new user, that is the job of the model. The model sets the attributes, relationships, and validates aspects as each new bat or user is created. In my case, I have two models, bats and users.

class User < ActiveRecord::Base
   has_secure_password

   has_many :bats

   validates :username, presence: true, uniqueness: true, length: {minimum: 5}
   validates :email, presence: true, uniqueness: true, format: {with: URI::MailTo::EMAIL_REGEXP}
   # /\A[a-zA-Z0-9.!\#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\z/
   validates :password, length: {in: 6..20}

   def slug
       username.downcase.gsub(" ", "-")
   end

   def self.find_by_slug(slug)
       User.all.find{|user| user.slug == slug}
   end
end

The has_many line creates an association between the two models. The user has many bats and a bat belongs to a user. Using ActiveRecord validations, I am making sure that the user has a secure password that is between 6-20 characters. I am also making sure that the username is unique so there won’t be multiples of one user and that the length of the username is 5 characters. In the email validations I am also making sure that the email is unique and follows basic email format by using format: {{with: URI::MailTo::EMAIL_REGEXP}. It uses regex to do a basic checking of alphanumeric characters, an @ symbol, and the like. In the notes below that validation I wrote out the long version of that regex. I also wanted to make sure that the url for each user was their username instead of the user_id, so I put my slug methods here.

On the topic of validations, I also used rack flash for my error messages. To use rack flash, in your gemfile add gem 'rack-flash3', '~>1.0', in your environment file add require 'rack-flash', and in your application controller configure statement add use Rack::Flash, :sweep => true. I added the flash messages in a lot of my controllers. Here is one example:

   patch '/user/:slug' do
       user = User.find_by_slug(params[:slug])

       user.update(params[:user])
       #binding.pry
       if user.save
           flash[:message] = "Your account has been updated."
           redirect to "/user/#{user.slug}"
       else
           flash[:error] = "#{user.errors.full_messages.join(", ")}"
           redirect to "/user/#{user.slug}/edit"
       end
   end

I wanted to have success messages which are my flash[:message] and error messages flash[:error]. In the above example if the user account is updated a message will flash saying “Your account has been updated.” If there was a problem with the update, then the error message based on that specific error will flash. In this case it would most likely be about the format of the email, the password length, or an already existing username. In my layout.erb file I added:

<% if flash[:error] %>
  <div class="alert alert-danger" role="alert">
   <%= flash[:error] %>
  </div>
  <% end %>

 <% if flash[:message] %>
   <div class="alert alert-success" role="alert">
   <%= flash[:message] %>
  </div>
  <% end %>

I wanted messages with a color background so they are very obvious, but if you don’t add the if statements, the color band will always show. My repo can be viewed here. I would love any feedback on this app. My app is very simple but I am happy with how my first attempt at an app turned out.

Hairless Furever: My First CLI Gem

Dorthy Thielsen — Mon, 21 Jun 2021 21:25:40 +0000

I have finally made it to my final project in Ruby. The task is to create a CLI gem which you have to create from scratch. I was terrified at the prospect of having to create something from nothing. I am so used to having test suites and all of the files created for me. When I was reading the directions it said we have to have a license, and my first thought was, “How do you go about licensing? What if I can’t figure out one of the first steps?” However I learned it isn’t so scary to create from scratch as long as you use the bundle gem. This magical tool creates all of the files I am used to having handed to me. Already my README, license, rakefile, etc. pop up like magic.

While bundle gem was a cool thing to learn about, it wasn’t my first step. I first planned out my app and made sure the website I wanted to use was scrapable. I decided to make an app all about hairless dogs. I have been obsessed with hairless dogs almost my whole life. Information about them isn’t readily available and is rarely in one place. When I was searching for hairless breeds, only two websites had all of the breeds listed. Even the Wikipedia article and the AKC had two to four breeds listed. I wanted to create a simple gem that I was passionate about. Also the dog in the cover image is my puppy named Momo who is a Chinese Crested. I used a scraper checker replit to make sure the information I wanted to gather was indeed scrapeable. I then followed the advice to create a flowchart and write about how this app will work. This also told me how many classes I would need. These classes would be CLI, Dog, and Scraper. I decided I wanted people to choose from a list of hairless dogs and then show them more information about each breed including description, height, weight, and physical characteristics. I was hoping to gather some more information, but not all of the breeds had a lot more information.

Now that all of the planning was done, it was time to finally run bundle gem hairless_furever. “Hairless Furever” is what I decided to name the app. This would allow for expansion of other types of hairless critters like cats, guinea pigs, etc.

I wanted to set up my git and repo so everything would be stored. I learned that the gitignore file doesn’t push the files listed into the repo. I created a repo on GitHub and then connected all my files to the magical cloud. Then I created and changed the permissions on my ./bin/hairless_furever so that the file would be executable by chmod +x hairless_furever. This file also needed the shbang #!/usr/bin/env ruby to be added so the program would know what language to use. I also added a puts statement so I could tell when things were running properly. I made sure that the class CLI had a namespace name so it would be easy to distinguish when someone is using the app and being able to differentiate from other apps. For example, there are probably tons of already existing gems with a class of CLI, Dog, and Scraper. I needed to make sure that my gem could easily interact with other gems with similar class names.

The next task at hand was to make sure I had access to other gems. Since I need to understand what my code is doing, pry is a must. Nokogiri and open uri are essential to the scraping I will need to do. Then the classic bundler and rake also needed to be available. I popped all of that into my gemspec file and after a bit of trial and error, everything was working. I had an executable file that was able to run a class that I made, and my scraping and debugging tool.

I wanted to start stubbing out my CLI so I can have the base of the user interaction figured out before I started scraping anything. Stubbing is when you put in fake data just to see how things were running. For instance instead of trying to scrape a website to get the list of dogs, I just hardcoded in an array of the dog breeds. I started with just commenting in the steps of a welcome message, get the list of breeds, get the user input, show them a dog, and allow them to leave the program. I also realized I needed to make sure that the input would be valid and that the program would loop. All the information I was using to create this was not the real data but I just wanted the bare bones to build off of so I could better test and troubleshoot as I went.

I created the Dog class with the general initialize, @@all array, save, self.all methods. At this point I only added the attr_accessor of name, as I wasn’t quite sure what else I would need at this point, and I wasn’t going to start scraping for other content until I got the breed list figured out. Note: I did eventually change my attr_accessor to a attr_reader as I didn't need my Dog class to write any of this data as my scraper class would be doing the writing.

Now was the time to start scraping. I created my DogCatcher class and used the information I had gathered earlier from the replit of the scraper checker. I ran into a silly mistake of calling my Dog.new outside of my each loop and I kept getting a return of an instance of the class object instead of my list when I ran my program. After doing a little digging, I moved this inside the loop and everything was running again. I started creating other attributes for each dog like description, weight, height, and physical characteristics. I wanted every dog object instance to have all of these attributes assigned to it. However, I ran into more issues with my scraping method. First issue was that everything I was scraping was being stored into one instance. All ten dog breeds, and all of their attributes were in one instance of the dog class. The next issue was that I had nested paragraphs that had no unique identifiers that I wanted to get information from and I couldn’t figure out how to separate the data. I tried calling the children method, but that kept getting a no method error and the index was returning just one piece of information, not looping. At this point, I was feeling really defeated. I felt like I completely broke my program. Something that was working the way I wanted to, was now either not running, not returning information, or not returning the correct information. In the meantime, I decided to add an ASCII dog to the end of my program to lift my spirits. I wasn’t able to find the author of the ASCII unfortunately. I also ran into an issue with my \ just not showing up. After some googling, I found out that if I put two in a row, only one would show up and solve the problem. Not sure if that is the best solution but it worked. With my methods seeming broken, I commented almost everything out and decided to try a new approach of storing my information into an array. After trying that, I ran into the same problems, so there is still something wrong with my scraping method and not with what I originally wrote. I went back to my original code because it is more object oriented, the whole point of this project and it was also easier to read. I also found someone elses project that used a similar method to what I was doing, and theirs worked, so it gave me hope to continue.

I decided to watch some tutorials and I at least solved one of the issues I was having. The issue was with the nested paragraphs with no unique identifiers that I needed to scrape information from. I had previously tried children and calling an index on it, but neither one of those worked. In one of the videos I was watching, I saw them add :first into the css selector itself! I was previously calling it outside of the selector. For example I was first trying height = breed.css(".comp.mntl-sc-block-callout-body p").first.text instead of height = breed.css(".comp.mntl-sc-block-callout-body p:first").text. I used this also to do :last and the one that took awhile to find :nth-child(2). Here is a great guide to the selectors. Finally I had those tricky selectors figured out. Speaking of selectors, I got help from my section lead on why all of my information was getting shoveled into one instance of the Dog class. I showed him my screen recording of when I originally had it working, and he noticed that I forgot to add li to my selector. Basically what was happening was that since my selector up one level from where it needed to be, it was treating the whole section as one, instead of seeing each li element. I knew it was going to be something silly that I was overlooking. We added that to my code, and ta da! Everything was working. He also looked at my code and said it was good enough to turn in! I was so relieved.

As difficult as this project was, I learned a lot. It also wasn’t as scary as I originally thought. It was fascinating to learn how easy it was to create a gem with bundler. It was great to challenge myself with figuring out the css selectors. I learned how to select with children which was something I read about but never put into practice before. These selectors I also clearly misunderstood before. This is why doing is always so important. It is one thing to read it but another to actually implement it. Since I had For anyone else who is doing this project, I do want to say be patient, watch all of the videos, and don’t be hard on yourself. I would also say to keep it simple. As someone with no previous coding experience, I did something very simple. The great thing about this is that you can expand it. I started just with stubbing everything out, then just getting the name to work and then adding on from there. If I would have put too much in at once, it would have been harder to troubleshoot and debug. I also tried to keep every method simple. No method should be trying to do too much. I noticed with a lot of the refactoring videos I watched, most of them were separating things into smaller methods and also not repeating yourself too much. Here a video of me walking through my code.

Here is an explanation of how my code works. The CLI class starts with the call method, which calls on the scraper class, named DogCatcher. The DogCatcher class scrapes my website for name, description, height, weight, and physical characteristics using Nokogiri and open uri. Each instance is saved to my Dog class using the find_or_create_by_name method which takes in an argument of all of the attributes mentioned. With the scraping done, the program goes back to the CLI class. Here the CLI class welcomes the user. Next the program has a flow loop that until the user input is "exit" the program will continue to run in a loop of fetched_dogs, and fetch_user_dog which have other methods that they call on that also add to the looping ability of my program. If the user chooses exit, then the farewell method runs and the program ends.

class HairlessFurever::CLI

    def call
        #start scraping method
        HairlessFurever::DogCatcher.catch_dog_breeds
        #welcome user and set flow of program
        puts "\nWelcome to Hairless Furever!\n"
        puts "\nHere you can learn all about hairless dog breeds.\n"
        puts "U・ᴥ・U"
        puts " u u"
        @input = ""
        until @input == "exit"
            fetched_dogs
            fetch_user_dog
        end
        farewell
    end
# we will get back to the rest of the CLI in a bit

class HairlessFurever::DogCatcher

    def self.catch_dog_breeds
        doc = Nokogiri::HTML(open("https://www.thesprucepets.com/hairless-dog-breeds-4801015"))
        doc.css("ul#sc-list_1-0 li").each do |breed| 

            name = breed.css(".mntl-sc-block-heading").text.strip
            description = breed.css("p.comp.text-passage").text
            height = breed.css(".comp.mntl-sc-block-callout-body p:first").text
            weight = breed.css(".comp.mntl-sc-block-callout-body p:nth-child(2)").text 
            physical_characteristics = breed.css(".comp.mntl-sc-block-callout-body p:last").text

            HairlessFurever::Dog.find_or_create_by_name(name, description, height, weight, physical_characteristics)

        end
    end
end

As mentioned the first thing in the loop of the CLI is fetched_dogs. This method calls on the Dog class and grabs all the dogs and stores each into an instance variable. It then asks the user which dog they would like information on. The instance variable of dogs is then called on. I used .each.with_index(1) as opposed to each_with_index. When you use .each.with_index(argument) it takes in an argument and you can tell it to start the indexing at 1 instead of the default 0 that each_with_index would do. This starts a loop that puts out each dog name with its respective index.

Since I mentioned Dog.all let's jump into my Dog class. As previously mentioned, the Dog class has all attr_reader of the variables, since the DogCatcher class is doing the writing. Next is the class variable @@all which is set to an empty array. Why I am using a class variable is so it is accessible across all of the methods in my Dog class. I of course have the classic initialize method which reads all of my attr_reader variables. I have a save method instead of doing the shoveling into the array in the initialize method since we don't always want to save upon initialize. I also have a better method in place. Next is the class method of self.all which reads the @@all array which is what we are using to generate our list in the CLI fetched_dogs method. I think I have mentioned this previously in another post, but something I learned was to keep methods short and concise. You don't want one method doing too much. Having methods that do a single thing is more flexible and allows more room to build out your app. First up in that realm is the class method of self.create this method not only initializes an instance of the Dog class taking in all of the attributes of the dog, it also saves these into the @@all array by calling on the save method. Next is the find_by_name(name) method. This method makes sure that I don't have duplicate entries in my @@all array by using detect. Finally the previously mentioned find_or_create_by_name method. This method was called upon in the DogCatcher method to create instances of my Dog class. The great thing is that I call upon both my find_by_name and create methods. If the dog name is not found by find_by_name then that dog is created using the create method.

class HairlessFurever::CLI
    def fetched_dogs
        #getting all the dog breeds
        @dogs = HairlessFurever::Dog.all
        puts "\nPlease enter the number of the dog you would like more information on.\n" 
        @dogs.each.with_index(1) {|dog, index| puts "#{index}. #{dog.name}"}
    end

class HairlessFurever::Dog
    attr_reader :name, :description, :height, :weight, :physical_characteristics

    @@all = []

    def initialize(name, description, height, weight, physical_characteristics)
        @name = name
        @description = description
        @height = height
        @weight = weight
        @physical_characteristics = physical_characteristics
    end

    def save
        @@all << self
    end

    def self.all
        #HairlessFurever::DogCatcher.catch_dog_breeds if @@all.empty?
        @@all 
    end

    def self.create(name, description, height, weight, physical_characteristics)
        dog = self.new(name, description, height, weight, physical_characteristics)
        dog.save
        dog
    end

    def self.find_by_name(name)
        self.all.detect {|dog| dog.name == name}
    end

    def self.find_or_create_by_name(name, description, height, weight, physical_characteristics)
        if dog = self.find_by_name(name)
            dog
        else
            self.create(name, description, height, weight, physical_characteristics)
        end
    end
end

All that is left is the rest of my CLI class. The fetch_user_dog takes in the input of the user, turns in into an integer as we want this do find the chosen_dog by the index assigned to it in the fetched_dog method. This method than calls on the show_dog(chosen_dog) method if the input is valid. The input is valid if it is greater than 1 and not more than the length of the array that all the dogs are housed in. It would have been easy here to just put if the input is between 1-10 then it is valid, but that isn't flexible. What if I wanted to expand this program? I would have to re-write this code. It isn't a huge deal at this point, but it is better to allow for the possibility of expansion. If the input isn't valid, then the program returns to fetched_dogs and asks for input again. If the input is valid then it goes to the show_dog(chosen_dog) method and puts the dog's name and description. It then asks if the user would like more information. If the input is "y" then it goes to the details(chosen_dog) method where more information is put out to the user on the same dog and then it calls on the method of continue. If the user enters anything other than "y" than the program also calls on the 'continuemethod. In thecontinuemethod the user is asked if they would like to see the list again, or if they want to exit. If they type "exit" then the program calls on thefarewellmethod. Remember that in thecallmethod, until the user input is "exit" continue to the loop the program. If the user enters anything other than "exit" than the program returns tofetched_dogand the user is shown the list of dogs again. Thefarewell` method just puts out an ASCII dog and thanks the user. That is my program in a nutshell. It is very simple, but I am really proud of it.

`ruby
class HairlessFurever::CLI
def fetch_user_dog
chosen_dog = gets.strip.to_i
#getting and checking user input to make sure it is valid
show_dog(chosen_dog) if valid_input(chosen_dog, @dogs)
end

def valid_input(user_input, data)
    #input needs to be less than the amount of data(dog breeds) but more than 0 and can't be a negative number 
    user_input.to_i.between?(1, data.length)
    #user_input.to_i <= data.length && user_input.to_i > 0 also works

end

def show_dog(chosen_dog)
    #show dog name and description 
    dog = @dogs[chosen_dog -1]
    puts "#{dog.name}: #{dog.description}"
    puts "\nWould you like to get more information on this dog? (y/n)\n"
    @input = gets.strip
    if @input == "y"
        details(chosen_dog)
    else
        continue
    end
end

def details(chosen_dog)
    #show more details about the selected dog breed
    dog = @dogs[chosen_dog -1]
    puts "#{dog.height}"
    puts "#{dog.weight}"
    puts "#{dog.physical_characteristics}"
    continue
end

def continue
    #see if user wants to continue or exit
    puts "\nPress any key to see the list of dogs again. Type 'exit' to leave.\n"
    @input = gets.strip
end

def farewell
    puts ""
    puts "             /)-_-(\\"       
    puts "              (o o)"          
    puts "      .-----__/\\o/"           
    puts "     /  __      / "             
    puts " \\__/\\ /  \\_\\ |/ "                
    puts "      \\\\     || "                 
    puts "      //     || "                 
    puts "      |\\     |\\ "                 
    puts "\nThanks for stopping by.\n"
    puts ""
end

end
`

Learning Ruby "Advanced" Class Methods

Dorthy Thielsen — Fri, 21 May 2021 17:38:35 +0000

For the last few days I have been learning about "advanced" class methods in Ruby. I am not sure if they are that advanced by a professional's standards but to me they are advanced in comparison. Basically I am learning about class constructors, self, finders, constants, class variables, etc.

The lab I have been working on is to prep me for the big CLI music library final project in Ruby. The assignment is to create class methods to interact with class data regarding creating, finding, and storing song data including the artist name, song name, and the filename. I was given this block of code to begin with.

class Song
  attr_accessor :name, :artist_name
  @@all = []

  def self.all
    @@all
  end

  def save
    self.class.all << self
  end

I was already given my reader and writer methods for song name and artist name. I was also given my empty array that these items would be stored in and a method to save them into the array.

My first task was to create three methods that would instantiate songs using a class method instead of the previously used instance method initialize so I could have more flexibility in my program. I was told to initialize the song, save the song and/or set the name property, and then return the song. For the whole lab, I was also told to try and call on my other class methods so my code wouldn't be repetitive and not abstract.

  def self.create
    song = Song.new #initialize a song
    song.save #save the song using the save method
    song #return the song
  end

  def self.new_by_name(name)
    song = self.new #initialize a song
    song.name=name #set the name to the name property
    song #return the song
  end

  def self.create_by_name(name)
     song = self.create #using the create method from above 
     song.name = name #set the name to the name property
     song #return the song
  end

Also you can see that I have been doing more pseudocode so I am able to code more efficiently and know what steps I need to take. I have removed the rest of my pseudocode in the rest of my code so it is easier to read, but wanted to show that improvement.

Then it was time to build some finder methods. Including one that tripped up me and the technical coaches at Flatiron. For some reason since I had created a blank method later on in the code, it was causing my tests to fail and no one knows why. Anyways, I learned that instead of building complex methods that do multiple things, it is smarter to branch complex methods into smaller chunks. Then you can call on those methods to do larger things in another method, like the self.find_or_create_by_name method below. Which in that method if the song is found in self.find_by_name then return the name if not, self.create the song. In the self.find_by_name method, I wanted to use a finder method on self.all(the array method from above) to find a song and return the song. Then to sort the array alphabetically using the sort_by method. I first wrote the code @@all.sort {|a, b| a <=> b} which also works but I was asked to use the sort_by method.

  def self.find_by_name(name) 
    self.all.find{|song| song.name == name} 
  end

  def self.find_or_create_by_name(name)
     self.find_by_name(name) || self.create_by_name(name) 
   end

  def self.alphabetical
    @@all.sort_by {|song| song.name} 
  end

The next challenge was what to do with a filename string like "Taylor Swift - Blank Space.mp3". I wanted to separate the artist from the song name and get rid of the .mp3. First part was easy. I just need to use the split method and split it at the "-". Getting rid of the .mp3 was something foreign to me. I was looking at everything you can do with enumerables and came across the .gsub method. I highly recommended this article. I used this method to get rid of the pesky .mp3 and substitute in an empty string. Then set the value of the artist name and returned the song.

  def self.new_from_filename(filename)
    artist_name, song_name = filename.split(" - ") 
    song = self.new_by_name(song_name.gsub(".mp3", "")) 
    song.artist_name = artist_name 
    song 
  end

  def self.create_from_filename(filename)
    song = self.new_from_filename(filename) 
    song.save 
    song 
  end

Finally to destroy everything!

  def self.destroy_all
    @@all.clear #can also use @@all = []
  end