DEV Community: Jeff Swisher

Data Structures: What's a Queue?

Jeff Swisher — Sat, 21 Nov 2020 18:18:39 +0000

For the second article in my Data Structures series, we are going to be diving into queues. Queues are the polar opposite of the stack data structure. If you're not aware of what a stack real quickly go ahead and check out my article on them here and come on back.

Queue

Just like a stack, we can easily represent a queue's functionality with a real-world example. Think of a line of people waiting to go on a ride at your favorite amusement park. Naturally, the person that was in line first will be the first person to leave the line to go on their favorite ride. People are added to the line at the end and leave the line from the beginning.

That is very similar to how a queue operates, the first piece of data added to our queue will be the first piece of data to be removed FIFO (First In First Out). When referencing adding an element to the queue we use the term Enqueue and when referencing removing an element we use the term Dequeue. When we enqueue an element we are adding it to the tail(end) of the data structure and when we dequeue an element we are removing it from the head(beginning) of the data structure.

When creating a queue in JavaScript we have a couple of options at our disposal. Let's dive into two of them, we will be implementing a queue data structure with an array and then creating a queue from scratch.

With an array implementation of a queue we can add to the end and remove from the beginning like below:

> const queue = []

> queue.push("dog")
=> 1
> queue.push("cat")
=> 2
> queue.push("mouse")
=> 3

> queue
=> ["dog", "cat", "mouse"]

> queue.shift()
=> "dog"
> queue.shift()
=> "cat"
> queue.shift()
=> "mouse"
> queue.shift()
=> undefined

Or we can add to the beginning of the array and remove from the end:

> const queue = []

> queue.unshift("lion")
=> 1
> queue.unshift("tiger")
=> 2
> queue.unshift("bear")
=> 3

> queue
=> ["bear", "tiger", "lion"]

> queue.pop()
=> "lion"
> queue.pop()
=> "tiger"
> queue.pop()
=> "bear"
> queue.pop()
=> undefined

While both of the above implementations adhere to the queue's FIFO (First In First Out) operations think about the following:

In the first example where we are adding to the end of the array and removing from the beginning, each time we remove an element from the beginning we have to re-index the entire array.

In the second example where we are adding to the beginning of the array and removing from the end, each time we add an element to the beginning of the array we have to re-index the entire array.

This re-indexing of the array gives us a linear O(n) time complexity which can have negative performance implications when dealing with very large data sets.

Now let's create our own queue data structure from scratch which will give us a constant O(1) time complexity when we Enqueue or Dequeue elements.

class Queue {
    constructor() {
        this.first = null;
        this.last = null;
        this.size = 0;
    };

// enqueue(val) - adds element to our queue,
// returns number of elements in queue
    enqueue(val) {
        const newNode = new Node(val);
        if (!this.first) {
            this.first = newNode;
            this.last = newNode;
        } else {
            this.last.next = newNode;
            this.last = newNode;
        };
        return ++this.size;
    };

// dequeue() - removes first element from queue
// returns value of element removed
    dequeue() {
        if (!this.first) return null;
        const removedNode = this.first;
        if (this.first === this.last) {
            this.last = null;
        };
        this.first = this.first.next;
        this.size--;
        return removedNode.value
    };
};


class Node {
    constructor(value) {
        this.value = value;
        this.next = null;
    };
};

Console:

> const queue = new Queue;
> queue
=> Queue { first: null, last: null, size: 0 }
> queue.enqueue("dog")
=> 1
> queue
=> Queue {
  first: Node { value: 'dog', next: null },
  last: Node { value: 'dog', next: null },
  size: 1
}
> queue.enqueue("cat")
=> 2
> queue.enqueue("mouse")
=> 3
> queue
=> Queue {
  first: Node { value: 'dog', next: Node { value: 'cat', next: [Node] } },
  last: Node { value: 'mouse', next: null },
  size: 3
}
> queue.first
=> Node {
  value: 'dog',
  next: Node { value: 'cat', next: Node { value: 'mouse', next: null } }
}
> queue.first.value
=> dog
> queue.dequeue()
=> dog
> queue.dequeue()
=> cat
> queue
=> Queue {
  first: Node { value: 'mouse', next: null },
  last: Node { value: 'mouse', next: null },
  size: 1
}
> queue.dequeue()
=> mouse
> queue.dequeue()
=> null

Take some time to review the code and the sample outputs above. We have created a Queue class to create our queue data structure object which also allows us to Enqueue and Dequeue are elements. The Node class allows us to create an object housing our value and a pointer linking to the next node in our queue. While there is a lot more code in the above implementation, which may be hard to understand at first the performance gains will be worth it in the end when dealing with large data sets. When we Enqueue(adding to the tail) and Dequeue(removing from the head) in the above example we are getting a constant O(1) time complexity.

I hoped this helped you understand the queue data structure better. If you have any questions or anything to add drop them in the comments below.

Cheers!

Data Structures: What's a Stack?

Jeff Swisher — Tue, 17 Nov 2020 00:47:27 +0000

Among the many computer science fundamentals, Data Structures can be found near the top of the list of essential knowledge topics software developers should be well versed in. Data structures allow developers to efficiently manage large amounts of data and can have an impact on the performance of our program or algorithm depending on the data structure of choice. This will be a weekly series diving into some of the most common data structures with accompanying problems showing them in use.

First up is the STACK!

Now you're probably wondering what a stack is, the simplest way of understanding this data structure can be easily represented with a real-world example. If you go into your kitchen and open the cabinet that contains your plates you're likely to see them neatly placed in a stack, unless you're like me, and still need to unload the dishwasher 😆 Now think about how your plates ended up in this stack and how they are removed when you need to use them. It is highly likely that the last plate you placed on the stack will be the first one removed when you go to grab a plate.

That is exactly how the stack data structure operates, allowing operations at only one end of the data structure. Two easy acronyms that describe a stack: LIFO (Last In First Out) and FILO (First In Last Out). When referencing the operations of a stack the insertion operation is called Push and the removal is called Pop.

Now let's look at a problem where the stack data structure can be used to help solve the problem at hand.

Valid Parentheses

Given an input str containing the characters '(', ')', '{', '}', '[', ']', determine if the given string is valid.

Input str is valid if:

1. Opening brackets are closed by the same type of bracket '()' => true, '(]' => false
2. Opening brackets are closed in the correct order '([])' => true, '([)]' => false

If str is valid return true otherwise return false. For simplicity we are not going to worry about any edge cases in this problem

const isValid = (str) => {
    let map = { ')': '(', '}': '{', ']': '[' };
    let stack = [];

    for (let i = 0; i < str.length; i++) {
        if (str[i] === '(' || str[i] === '{' || str[i] === '[') stack.push(str[i]);
        else if (map[str[i]] === stack[stack.length - 1]) stack.pop();
        else return false;
        console.log(stack);
    };
    return stack.length === 0;
};

isValid("{{}[][[[]]]}");

Output:


[ '{' ]
[ '{', '{' ]
[ '{' ]
[ '{', '[' ]
[ '{' ]
[ '{', '[' ]
[ '{', '[', '[' ]
[ '{', '[', '[', '[' ]
[ '{', '[', '[' ]
[ '{', '[' ]
[ '{' ]
[]
true

In the isValid function above we are using the stack to keep track of the opening brackets in the specific order that we encounter them. When an opening bracket is encountered we push()(add) it onto the stack. When a closing bracket is encountered we check to see if the last opening bracket added to the stack is of the same bracket type as the current closing bracket, if it is we pop()(remove) the opening bracket from the stack. If the last opening bracket added to the stack is not of the same type as the closing bracket we have encountered we return false.

In the resulting output from running our function, you can see that the stack is adhering to the FILO & LIFO principles through each iteration of the for loop.

I hoped this helped you understand the stack data structure better and you feel comfortable implementing it in the future. If you have any questions or any other fun problems where a stack can be utilized drop them in the comments below.

Cheers!

What's a Palindrome!?!?

Jeff Swisher — Sat, 07 Nov 2020 23:01:40 +0000

Technical coding interviews or code challenges on websites like LeetCode, CodeWars or HackerRank can often include varying questions that revolve around a singular idea. For example, a palindrome can be the foundation of a multitude of different problems that can have varying requirements for solving the problem based on the specific question. In the event, you're presented with a problem that revolves around palindromes it would be beneficial to know what a palindrome is in the first place. Let's dive into what exactly makes a palindrome and a couple of problems that are centered around them.

A palindrome can be a word, number, phrase, or sequence of varying characters that reads the same forwards as it does backwards.

A palindrome can be made out of a string of characters provided that all characters in the string occur an equal number of times. Or, all characters in the string occur an equal number of times except for one character that occurs an odd number of times.

Examples:

noon is a valid palindrome

racecar is a valid palindrome

racecars is not a valid palindrome

In the first example above all characters occur an even number of times. In the second example, all characters occur an even number of times except for 'e' that occurs only once(an odd frequency). In the third invalid example, we have two occurrences of a character that occurs an odd number of times making it impossible to create a palindrome out of that string of characters.

Now let's solve a few problems that are centered around palindromes.

1. Given a string of lowercase characters [a-z] determine if it is a palindrome. For simplicity we are not going to worry about any edge cases in this problem

const isPalindrome = (str) => {
    const reversedString = str.split('').reverse().join('')
    return str === reversedString
}

isPalindrome("racecar")
=> true

isPalindrome("racecars")
=> false

Pretty simple right, we just use a few built-in functions to reverse the string and then return the value of a strict comparison between the original and the reversed string.

However, we need to always be aware of the performance implications of our code. Let's solve that again without the use of any built-in functions...

const isPalindrome = (str) => {
    for (let i = 0; i < str.length / 2; i++) {
       if (str[i] != str[str.length - (i + 1)]) return false
       // loops through characters on the front half 
       // of string and compares against the opposing 
       // character on the back half of the string
    }
    return true
}

isPalindrome("racecar")
=> true

isPalindrome("racecars")
=> false

I benchmarked the performance of the two above solutions using the string "racecar" on JSbench. That tool stated that the first solution was 89.56% slower than the second solution. Sometimes less code is actually slower code.

2. Given a string of lowercase characters [a-z] determine if a palindrome can be created from all the given characters. For simplicity we are not going to worry about any edge cases in this problem

const isPalindromePossible = (str) => {
   const frequencyCounter = {}
   for (let c of str) {
     frequencyCounter[c] = (frequencyCounter[c] || 0) + 1
   }

   let charsWithOddFrequency = 0 
   for (let c in frequencyCounter) {
     if (frequencyCounter[c] % 2 !== 0) charsWithOddFrequency += 1
   }
   return charsWithOddFrequency <= 1
}

isPalindromePossible("acerrac") //can be rearranged into 'racecar'
=> true

isPalindromePossible("acerracs") //cannot be rearranged into a palindrome, more than one character with odd frequency count
=> false

In the above solution, I created a frequency counter to keep track of the numerical occurrences of each character in the string using the for/of loop. In the for/in loop we are checking for odd occurrences of each character in the string, if we have more than one character with an odd frequency count we cannot create a palindrome out of the given characters.

I hope this helped you understand what a palindrome is and the restrictions around how you can create one. If you have any questions or any other fun problems revolving around palindromes drop them in the comments below.

Cheers!

Reflection: Mock Technical Interview via SkilledInc

Jeff Swisher — Sat, 07 Nov 2020 19:31:27 +0000

Your first technical interview can be a stressful and nerve-racking experience. The pressure that comes along with a technical interview can make even the most seasoned coders choke. Luckily for me, my first technical was a mock online interview on the Skilled Inc platform. However, even though it was a mock interview I was dreading the experience all day, a fact that my interviewer and I joked about once the experience was over. So let's dive into a high-level overview of the process and my thoughts on the experience.

Skilled Inc's technical interviewing experience pairs you with a real Software Engineer that has been sourced from a top company to facilitate the interviewing experience. The interviewers on Skilled's roster are thoroughly vetted to ensure they have extensive industry experience and knowledge so you know you are working with the real deal.

For my interview, I decided to use Javascript as my preferred testing language as I felt the most comfortable with it at the time. Unfortunately, I am not going to go into the specifics of the problems I was given out of respect to their process. However, I do want to go over some points that I took away from the process that should hopefully help others when approaching these types of interviews.

Understand the problem

I cannot stress this enough, it is imperative that you understand the problem to its core to ensure you can solve it correctly.

This means thinking of the expected inputs. What is the expected output and how should any edge cases be handled? These are things you should be discussing with your interviewer in depth before you even start to solve the problem. Ask as many questions as you can, they are not going to look down on you for doing so!

Explore real-life examples

For a very simple example, imagine you're asked to reverse a string? What are the inputs going to look like and what is the expected output after running your code?

IN -> "Hello World!" OUT -> "!dlroW olleH"

Writing this out to see a visual representation of the expected behavior can help determine your approach.

Outline your process

For me personally, this is very helpful as I can outline my approach at a very high level and step through my process to ensure I am not missing a step before diving straight into code.

Using the reverse string example from above an easy straightforward approach could be the following:

Check the length of string..(don't forget your edge cases)
Convert string into array use the built-in split function
Reverse array, use the built-in reverse function
Convert reversed array back to a string, use the built-in join function
Return final value

Seeing what you need to do in plain English makes it easier to then code your solution. It also gives your interviewer insight into your thought process which is very important

Be aware of performance constraints

You need to be consciously aware of the performance of your solution. For me, I don't know exactly what a built-in function like reverse() from the above example is doing under the hood. Built-in functions can often times have negative effects on the performance of our solutions when taking into account the worst-case scenario for our input.

Refactor your solution

If you ended up using a brute-force approach to solve the problem and you're completely aware of this please make it known to your interviewer. Them knowing that you are actively thinking about the most optimal solution from a performance standpoint will definitely help you stand out. If you have time left in your interview use that time to optimize your solution, sometimes good enough isn't really good enough...

Clever code isn't always good code

I'm not going to lie I tried to be pretty clever in my solutions and unfortunately under the pressure of the interview my clever code didn't quite work as expected. If you have spent any time on Codewars or any of the other similar platforms it's quite common to see one-liner solutions to problem sets. While these may give you the impression that the person who wrote the solution is a god among coders, these types of solutions are not optimal in a professional setting.

Writing code that is hard to understand requires more cognitive output from your other teammates when maintaining said code.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” - Martin Fowler

Have Fun!

I love spending time on Leetcode, Hackerrank & Codewars. Everyone loves getting a win under their belt and those types of sites give me thousands of opportunities to do so. Don't let the pressure of the interview setting take the fun out of the process, I mean you love to code right!?

I hope the points outlined above can help you when approaching a technical interview as they have definitely helped me. Oh, and if you're wondering I did receive a pass on my Skilled Inc interview. I would recommend that platform and their process to anyone, although it is a little expensive. If the cost is out of reach at the moment try to link up with a friend or someone senior to conduct your own mock interview. You can never have too much practice.

Async Logic with Redux-Thunk

Jeff Swisher — Sat, 07 Nov 2020 19:26:06 +0000

If you have worked with React before you have most likely encountered the built-in state object available within React components. The state object allows us to store property values that belong to the component where they have been declared. Our ability to access state declared in one component from another component is entirely possible within our app but can become convoluted as our application grows and we need to re-use the information contained in a state object within other components in our app.

Redux is a state management tool that helps alleviate some of the issues we encounter when working with local component state and provides us with the ability to store all of our state in a Javascript object separate from all of our components. This separation provides us the ability to allow any component within our app to access our state just by connecting it to our store which contains all of our application state. That’s a very high-level overview of Redux and the opportunities it provides us. If you have not worked with Redux before I recommend reviewing their documentation as the remainder of this article will be covering an async request life cycle while utilizing the Redux Thunk middleware.

For a project at Flatirons Software Engineering program, I created an application that utilized a React front end with a Rails API backend. This application utilized Redux to manage the state for the entire application on the client-side. Within a normal Redux store, we can only implement synchronous updates when we dispatch our actions. However, when we are requesting information from an external API or the backend API of our app we need to use an asynchronous approach when fetching and persisting data. This is where the Thunk middleware comes into play.

Redux Thunk allows us to complete these asynchronous requests by returning a function within our action creator instead of an action. The inner function that is being returned within our action creator takes in “dispatch” and “getState” as arguments. The action creator below utilizes the dispatch function being passed in as an argument to dispatch two different actions to the reducer.

The first dispatch call tells our reducer that we are requesting the news data from the external API. This action will hit a case in our switch statement that will update our state changing the value of the “requesting” flag to true. The value of the requesting attribute in our state object allows us to update what is being rendered on the client-side while we are fetching our data, like a spinner or loading bar. When the Fetch call returns the Promise and the Response object we can then manipulate that data as we see fit and send the second dispatch call changing the value of the “requesting” flag and update our applications state completing the request cycle.

Hopefully, this quick overview gave you a better understanding of Thunk in Redux and how you can implement it within your action creators to complete asynchronous operations.

This article was migrated over from Medium. The original article can be found here

Hoisting in Javascript

Jeff Swisher — Sat, 07 Nov 2020 19:22:31 +0000

In JavaScript, there can be a lot of concepts that are hard to grasp for new Developers. Hoisting being one of them, in an attempt to help myself understand it better and hopefully, you as well let's dive into this concept further.

Hoisting

Hoisting will occur at both the variable and function level. A general definition would state that the declarations of variables and functions are moved(hoisted) to the top of the code within their respective scope. If the declaration occurs within the global scope it is moved to the top of that scope and the same can be said for local scope declarations. Hoisting will only move the declarations, it does not execute assignment statements. Although it may sound like your code is being physically moved within your codebase, that is not the case. These declarations are simply being stored in memory during the creation phase of the execution context.

Variables are initially set to a value of undefined at the time of hoisting.

As we can see above we have “console.log(a)” on both lines 2 and 4. But we are getting two different results from both “console.log” functions. What is happening here exactly? I think it would be safe to assume that we would expect to receive “ReferenceError: a is not defined” from our first “console.log” as “a” did not exist before we referenced it.
But take a look below at a representation of what our code would need to look like to achieve the same results as above if hoisting did not occur.

It is important to understand in regards to the above example that when hoisting occurred for “var a;” it did not physically move to the top of our function as shown. That first “console.log(a)” is referencing the original declaration of “a” from the first example that was stored in memory and initialized with a value of “undefined”.

Take a look at the example below! Weird huh? Where is our undefined value that was associated with “var a;” in the example above? While it is true that all declarations (var, let, const, and class) are hoisted, let and const declarations remain uninitialized. They will only get initialized during the execution phase of the execution context. This means we cannot access the variable before the point in which it was declared and is evaluated during runtime.

So far we have touched mainly on variable hoisting and haven't talked much about function hoisting. We can classify functions as either “function declarations” or “function expressions,” declarations will be hoisted while expressions will not.

Consider the following example. We would expect that we would have to declare and call our function in this manner for it to work.

However, thanks to function hoisting we are allowed to call our functions before they have been declared.

While we could dive deeper into hoisting the information above should give you a basic understanding of hoisting and put you in a position to either benefit from what’s happening under the hood or avoid some pesky bugs down the road! If you have anything to add leave a comment below, happy coding!

This article was migrated over from Medium. The original article can be found here

Javascript Scope

Jeff Swisher — Sat, 07 Nov 2020 19:13:58 +0000

The concept of Scope in regards to JavaScript can be a bit hard to wrap your head around as a new Developer. Lets dive into this concept further for a more in-depth look.

Scope

In JavaScript, there are two types of “scoping” that you will encounter. There is Global scope and Local scope. These scopes in relation to a variable will be determined by the location of the variable declaration.

Global Scope

Global scope applies to any variable that is declared outside of a function in the top-level scope. Variables that have a global scope can be accessed from anywhere in your code.

“b” is accessible from within the functions local scope due to “b” being scoped globally.

Also important to note, variables declared without (var, const or let) are scoped globally.

Local Scope

Each function you create with JavaScript has its own local scope, as such when you declare a variable from within a function it is scoped locally to that function. This means the locally scoped variable is unavailable outside of that function, however, it will be available to any nested functions within the parent function through the scope chain.

“b” is not accessible outside of its local scope.

“b” is available to the “nestedFunc” function through the scope chain or what's called “lexical scoping.” The nested function has access to all variables that are declared in its parent functions local scope and so on up the scope chain all the way to the global scope.

In this example, we have two separate declarations of the variable “b”, while in the previous example we logged the value from the parent scope. The nested function will always check for a local instance of the variable we are referencing, if it does not find what it is looking for in its current scope it will move up the scope chain until it does or throws an error.

“b” is locally scoped to the “nestedScope” function here. We cannot access it from the parent “scope” function, the scope chain does not work from the top down.

Thus far we have looked at local scope from a function scope standpoint. With ECMA script 6 (ES6) the concept of block scope was introduced together with the new variable declaration keywords const and let.

Block Scope

Block scope is defined within for/while loops and if/switch statements. Const and let are the only variable declaration keywords that support local scope as noted in the code below.

Whew, that was a lot of scope talk, I hope this helps you understand this concept a bit better. If I missed anything or you have anything to add leave a comment below. Happy Coding!

This article was migrated over from Medium. Original article can be found here

GifBook JavaScript SPA w/Rails API

Jeff Swisher — Sat, 07 Nov 2020 19:11:22 +0000

After completing the JavaScript portion of Flatiron Schools engineering program and before we got to dive into the React framework we were tasked with building a SPA(Single Page Application) showcasing our newfound knowledge of the language. This application was required to utilize a pure JavaScript, HTML & CSS front end with a Rails API back end.

For my project, I decided on creating an app that would allow a user to search for GIFs utilizing the GIPHY API and store their favorites to their account. Additionally, through the use of the Twilio API, the user would be provided the ability to send a GIF via SMS text to their desired recipient. Below I walk through the surprisingly easy integration of what I thought would be the most difficult aspect of my app, SMS messaging via Twilio.

The Twilio API can be easily integrated into a Rails application through the use of the Twilio Ruby helper library by installing the ‘twilio-ruby’ gem. After the gem was installed I integrated the Twilio client into my message model as a class method. In this method I needed to initialize the Twilio client and authenticate via the provided ‘account_sid’ & ‘auth_token’ I was given by Twilio. I was then able to call the ‘messages.create’ methods on the ‘client’ while passing in the associated arguments to include the phone number for the recipient, the message ‘body,’ and the associated URL for the GIF provided by the end-user.

The ‘new_message’ class method gets called from the create action in the message controller when an associated POST fetch request is made by the user on the front end. The form on the front end captures the data passed in by the user via an event listener listening for the ‘submit’ event of the form. Once the event is triggered the parameters then get passed into the ‘create’ action in the Message controller via the ‘createMessage’ function in the main JavaScript file. This sequence of events then fires off the SMS message to the recipient.

Having never worked with Twilio before it was something I wanted to integrate into my app as I like to test my knowledge working with new systems and implementations that I am unfamiliar with. The integration of this feature was a last priority for me as I wanted the MVP up and running as quick as possible and I anticipated a lot more work then what was actually required to get it up and running. Thanks go to Twilio’s helper library, and ill be looking for something new and more difficult for the next project!

This article was migrated over from Medium. The original article can be found here

Rails Cocktail Recipe APP

Jeff Swisher — Sat, 07 Nov 2020 19:05:30 +0000

Up until now my time at Flatiron Schools software engineering program has been focused on the Ruby programming language. We have worked through the procedural operations of the language and covered the object-orientated aspect as well for our foundation. After having our solid foundation we delved into Ruby frameworks and learned how to use them to build a well-rounded web application.

The first framework we utilized was Sinatra which is more lightweight, less feature-rich, and not as abstract as rails. Learning Sinatra was a huge stepping stone in bringing everything thus far full circle and providing a deeper understanding of all the aspects of a full-fledged web application. This was very exciting and I could not wait to dive into rails to see its benefits and additional features.

For my Rails project, I decided to create a recipe app specific to cocktails named, “Cocktail Book.” The basic functionality needed to allow users to create an account, create a cocktail recipe, favorite and save to their account a pre-existing cocktail recipe, as well as provide a rating and any additional comments to a favorite cocktail they save to their account.

One of the most difficult things throughout this process was handling the nested form for cocktails and the associated nested attributes each cocktail would have. To build a successful cocktail I needed to implement three tables and their associated models: cocktails, ingredients & cocktail_ingredients. The cocktails & ingredients table was standard while the cocktail_ingredients table was the join table for this resource.

The cocktail_ingredients join table would include the cocktail_id, ingredient_id, and a quantity that was editable by the user. I could have easily included the quantity in the ingredients table and gotten away without utilizing the join table. However, without the join table, my ingredients would not be reusable across different cocktails as each ingredient would then have a set quantity that may or may not be usable in the cocktail recipe being created by a user. Thus requiring ingredients to be duplicated in the DB with their own unique quantities.

Throughout my application, I used Bootstrap for styling. This being said I wanted to utilize Bootstrap’s form components to keep the styling uniform. I stumbled upon the gem: “bootstrap_form”, “~> 4.0.” This allowed me to continue to utilize the Rails Action View Form helper form_for with Bootstraps styling added.

In the above form, you can see the nested “cocktail_ingredients” under “cocktail” and the nested “ingredients” under “cocktail_ingredients.” In the cocktails controller, I had to instantiate placeholder “cocktail_ingredients” & “ingredient” objects to allow the user to associate multiple ingredients with their cocktail.

This renders 5 fields for both the “cocktail_ingredients” & “ingredient” attributes.

After the user submits the form I needed to whitelist the incoming params to make sure no foreign attributes were being introduced. In the cocktails controller, I created a strong_params method to ensure we are only getting the desired attributes passed through to the create action in the controller.

Strong params method

Cocktail create action

The create action above builds us 3 objects across all 3 models: Cocktail, Ingredient & CocktailIngredient, as well as creating the associations between all three objects thanks to the association declarations in the models themselves.

This experience was very beneficial and provided many great learning opportunities. Going forward I would like to add more functionality to the app to include leveraging Rails’ Active Storage component to allow cocktail images to be uploaded at the time of recipe while utilizing an Amazon S3 bucket to hold those images in the cloud.

This article was migrated over from Medium. The original article can be found here

Ruby Sinatra App & Heroku Deploy

Jeff Swisher — Sat, 07 Nov 2020 18:53:58 +0000

At the time of this article’s writing, I had just wrapped up my second project for Flatiron School’s Software Engineering program. Our task for this project was to create a Sinatra app that incorporated full CRUD(create, read, update & delete) functionality utilizing the Model View Controller software design pattern.

My project was designed to allow a user to create an account and search for their favorite movie, provide a rating and any other comments, and save that movie to their account. This being made possible by the incorporation of an API from TMDb (The movie database.) After the build process for my application was complete I wanted to deploy my app for the world to see without a user having to clown down its repo, install dependencies and run it on their local machine.

Heroku is a cloud hosting platform that was the perfect solution to help me do this. My app was built utilizing Sinatra which is a web application library and domain-specific language written in Ruby. This was not the cause of my issues though, the culprit was the relational database management system I was utilizing within my app - SQLite. Unfortunately for me, Heroku does not support SQLite on its platform. I ended up changing my database management system to PostgreSQL to get my app deployed. Let's go over it below and if you encounter the same issues you will be able to bypass them and deploy your app.

Remove the ‘sqlite3' gem and add the ‘pg’ gem to your gemfile

Remove specified versioning from ‘activerecord’ & ‘sinatra-activerecord’ gems in your gemfile if present.

Delete the Gemfile.lock file and run ‘bundle install’ in your terminal.
Navigate to your ‘DB’ folder and delete ‘development.sqlite’ , ‘test.sqlite’ & ‘schema.rb’ if those files exist. Ensure you only have a ‘migrate’ folder. Also make sure you are specifying your versioning for your ActiveRecord::Migration

Navigate to your ‘config’ folder and create a file ‘database.yml’, this is where we will set up our PostgreSQL database.

Navigate to your environment.rb file and remove:

Navigate to your ‘config.ru’ file and remove:

At this point, you need to be sure you have the Postgres app installed on your machine. Ensure that the app is running. Once it is running navigate back to your terminal and run the following commands.

rake db:create

rake db:migrate

With Postgres, you have to create the databases before you migrate them. When you migrate for the first time you will run ‘rake db:create’ to create the databases. You will only need to run this once unless you drop your databases.

At this point, you will have switched from utilizing a ‘sqlite’ database to ‘postgres’ allowing you to now deploy your app and finish migrating your databases in Heroku. I hope this article was helpful in getting your app deployed if you were encountering the same issue as I did.

This article was migrated over from Medium. The original article can be found here

Ruby CLI - NFL Ticket Generator

Jeff Swisher — Sat, 07 Nov 2020 18:41:44 +0000

Tasked with my first project for Flatiron’s Software Engineering program I decided to first begin with some research on APIs. Now, this wasn’t the first time I had heard of an API but at this point in the program, we had not covered them in any capacity. However, my cohort had been given the opportunity of choosing either an API or Nokogiri to complete our first project.

If you haven’t heard of Nokogiri before, it is a Ruby gem that allows you to parse the HTML of a website and operate on it via CSS selectors to retrieve specific pieces of information. Web scraping with Nokogiri had been covered in the program at this point and I felt comfortable using it thus far.
However, with my current lack of knowledge and the more widespread use of APIs in the professional world, I decided to take the option of learning something new. At first, the thought of using an API to get the data I needed was very intimidating, however with the help of Postman and my chosen API’s documentation I ended up creating a pretty cool CLI program.

We were tasked with building a Ruby gem that provides a Command Line Interface (CLI) to an external data source. I decided to use Ticketmaster’s API to build my CLI program. My program allows a user to enter in the name of any NFL team to return all future games for that team provided tickets are actively being sold.

Once the team name has been entered by the user the program makes an API call to retrieve the following info for each available game:

Names for both teams in the game
Date of game
Time of game
Game venue
Game location — City/State
URL — Direct link to the purchasing page for tickets to the game.

Initial prompt & results of user input

Results for selected game

The Application programming interface or API for short allows my program to access Ticketmaster’s system to search for NFL games based on the query parameters I have set in my API call. The query parameters allowed me to fine-tune the data I wanted to access from their system. Postman was great at allowing me to test these parameters and see exactly what they would return upon making the API call. Postman is a collaboration platform for API development amongst other things. For my needs, I utilized it for exploratory testing to see what values would be returned when the API calls were made.

After reading the Ticketmaster API documentation I knew how to add onto the root URL that would be used for my API call with both my API key and my desired parameters. In Postman I used this URL to send a request to see the values returned to my program. Postman highlights the query parameters that you’re using and allows you to toggle them on/off to see different results from your API call which is a really useful feature.

Postman Interface — Sample results of API call

Once I was happy with the results from my API calls the real coding began. I wanted my program to return results based on the user’s input. Through my testing in Postman, I knew that I could enter any team name for the “keyword” query parameter when making my calls and I would get the results for that specific team back. At this point, I knew I could then just ask the user for their favorite team throughout the program and then interpolate that input into the URL as the “keyword” when making the API calls, in turn returning all games for the requested team.

API class. The class method takes in the user's input as an argument and then interpolates into the URL.

The Ticketmaster API returns its data in JavaScript Object Notation (JSON) format, this format being similar to a hash in Ruby. While a hash is formatted using “key”/”value” pairs, JSON is formatted using “name”/”value” pairs. This allowed me to easily iterate over the data set to capture the data I needed for my instance variables for each game object. After each iteration through the data set the above class method creates a new “Games” object until all games have been created for the given team.

The remainder of the coding needed was to manage the game objects being created and creating a CLI interface for the user to utilize when running the program. Overall this project was a great learning experience that helped me step out of my comfort zone to create something tangible that I can show my family and friends. Going forward I would like to restructure the program to allow users to access ticket information for not just NFL games but many of the other mainstream sports as well.

This article was migrated over from Medium. The original article can be found here