DEV Community: alex-aaron

Interview Series #1: Var, let, and const

alex-aaron — Fri, 23 Jul 2021 17:22:07 +0000

Since graduating from Flatiron's Software Engineering bootcamp, I've had my first round of interviews. These have ranged from purely behavioral/cultural interviews to technical interviews to "technicalish" interviews. I've decided that as I go through this process, I'm going to attempt to blog about the most salient things I've experienced.

You could encounter a wide variety of scenarios in your interview process from being asked to solve a coding challenge, live coding a simple application, or simply answering programming questions. In either case, remembering the basics is crucial.

This blog post is going to focus on a very foundational concept in JavaScript programming, but it is a question you could very well be asked in an interview. That question is this: what is the difference between var, let, and const.

Var, let and const refer to variable declaration in JavaScript. In other words, the first time you introduce a variable, you declare it with a keyword.

When I first learned JavaScript, I was only introduced to the var keyword. Let and const are new additions from ES6. There are several reasons that let and const are now considered preferable to var, but one big reason is that you can RE-DECLARE variables using the var keyword without causing an error. For example:

As programmers we are used to REASSIGNING a variable's value over the course of a program, but allowing for multiple variable declarations of the same name can lead to unseen bugs and generally less coherent, readable code.

Using the same basic example but substituting var for let returns an error:

Let and Const Explained

At this point, let and const have supplanted var as the preferred variable declaration keywords. However, there are important things to know about each keyword.

Most significantly, if you want to be able to reassign the value of a variable over the course of a program, you must use the let keyword. If you are declaring a variable whose value you want to remain CONSTANT (get it), you will use the const keyword. If you attempt to reassign a variable declared with const, you will get an error:

Let's Talk About Scope

There is an importance difference between var, let, and const in regards to scope. As you probably know, var is global or function-scoped. So, we're used to being able to access a variable declared with var anywhere in the function it is declared like so:

But let and const are block scoped, meaning they are only accessible within the code block they are declared in. Look at this example using the let keyword:

Passing Information from CHILD to PARENT in React

alex-aaron — Tue, 18 May 2021 19:03:27 +0000

React is a modular, front-end web development framework that has surged in popularity. I have to admit, when I first encountered the vagaries of its execution I was somewhat thrown off, but I have since grown to love it.

At its most conventional, React applications flow from top level - or parent - components to child components. This modular approach epitomizes separation of concerns and makes any individual application highly readable. Traditionally, parent components pass information down to to child component in the form of props. Props represent read-only pieces of data. Here is an an example in a sample react application:

Ignore the portion of the code identified with "this.state" for the time being (but it will come back later). What is important to note is that this SampleParent component is rendering a div that reads "Sample Parent Component" with a SampleChild component included. INSIDE of SampleChild we have passed the "prop" sampleProp and given it a value of "This is a sample prop." By passing the prop to the child component it guarantees that we can access that prop in the child component like so:

Look at what is included the SampleChild's render method: we are rendering a div with a paragraph tag, and the text of the paragraph tag is identified as {this.props.sampleProp}. Therefore, our SampleChild component will show us paragraph text that reads "This is a sample prop."

Everything makes sense so far, right? Good. Here is an important question though: what if we want to pass something from the CHILD COMPONENT up to the PARENT COMPONENT. The good news is that React gives us a mechanism to accomplish this through the use of callback functions.

To illustrate this, imagine sample web application that looks like this:

In this sample react application, we have a Parent Component "element", which is a number that starts at 0. Beneath that, we have a Child Component button. When we click the Child Component button, we want the Parent Component element to increment by 1 (0...1...2...3). This requires us to pass something from the child to the parent. To do this, we must first pass a callback function to the Child Component. Look at the code here:

Look at this code closely. The first thing you'll see is that we are giving our parent component an initial state of a number set to zero. In our render method, we are rendering a div that displays the current state of number. Beneath that, we are rendering the SampleChild component and PASSING it a prop. The prop we are passing - incrementTime - is actually a function defined in our ParentComponent. If you look at the function defined above our render method you can see that when called it sets the state to the current value of state plus one.

So far, everything we have done is here is the normal way of passing information from parent to child. We have a top level parent component that renders a child component, and we are passing a prop down to our child component that is the value of a function.

To achieve the effect we want - to click our child component button and increment the parent component element by one - here is what our child component will look like:

In the render method of our child component we have added an event handler of onClick that will trigger this.props.incrementTime. We know from the previous code that this.props.incrementTime is a function passed down from our parent component. When we click the child component button we trigger the callback function which THEN changes the state of the parent component. If you click the button, you should see the parent component element like so:

My First (REAL) Javascript Single Page Web Application

alex-aaron — Wed, 21 Apr 2021 19:17:37 +0000

So, if you've read any of my previous blogs you may recall me mentioning that I had some prior experience with Javascript. In fact, I spent some time teaching the fundamentals of Javascript programming to High School students, which is to say I had a robust understanding of syntax, methods, and mechanics but relatively little experience creating functional JavaScript web applications. And I certainly had no experience combining a JavaScript web application with Rails backend API, but such were the requirements of my current project.

I started, as I frequently do in life, wondering how I could possibly include John Carpenter in this project. If you are unfamiliar with John Carpenter, God forbid, he is an filmmaker and auteur of the highest order, responsible for such classics as Halloween, Escape From New York, The Thing, and Big Trouble in Little China. For a single page web application, I decided that an all-encompassing John Carpenter Message Board was more than appropriate.

Early in the development process I was crestfallen when I could not find a font resembling the opening title of the Thing.

But I was able to recreate the Halloween title font, which felt like big win:

But on to the actual application. I began by designing my Rails API backend to accommodate two models: a post and a comment that belongs to a post. Makes sense, right? A message board always begins with a post, and obviously we would want our message board posts to allow for comments. We'll return to this backend later.

In terms of the frontend, I envisioned a very simple UI with post and comment forms active on the page and all user input cascading down:

This was a relatively straightforward application, but there were two areas that proved most challenging: rendering messages AND comments correctly, and creating a durable connection between my DOM and backend.

Rendering Messages and Comments

I created some initial seed data to begin populating my interface and immediately realized: it's a message board! When a user navigates to the message board they're going to expect message and comments to render simultaneously. Rendering the messages through a basic fetch request was simple, but I wanted to create a single fetch requests that could render the messages AND IF there were any comments, render those as well.

Step 1: Add a Serializer to my Backend

I knew the first stage of this process would be to add a serializer so that comments would appear with my posts.

Creating my PostSerializer and implementing it in my Post controller successfully created the API output I wanted:

Step 3: Add Conditional Logic to My Initial Fetch

Now the only thing to do was add conditional logic to my initial fetchMessages() function that runs when the page is loaded. In essence, if the data returned from the fetch contains comments, they need to be rendered. The entire function ultimately looked like this:

Rendering Connections Between My DOM and My Backend

The only other thing that really threw me was how to sustain identifying connections between my DOM elements and my backend resources. In a Ruby on Rails application utilizing ActiveRecord, any new database item is saved with an id and possibly a foreign key establishing a relationship to another resource, and that id is usually available through params or some other feature. I can use that to locate the resource and interact with it. But with a Javascript application interacting with a backend Rails API those features aren't inherently present.

I chose to deal with this at the moment the element is rendered to the DOM. For instance, when a user fills out the form to add a new message, a post fetch request is made and the post is added to the backend. When the data is returned, new Javascript Post objects are created with an id, title, content, and created_at date. Those objects are then acted upon with the renderMessage() method. When each message is rendered it is rendered in a div with an id of "message-id#" (example: message-1, message-2). I did the same thing when comments were rendered so that the id of the backend resource was preserved.

The result at the end of the day: a message board where people can discuss everything about their favorite horror director John Carpenter.

My First Rails Projects!

alex-aaron — Tue, 30 Mar 2021 21:14:46 +0000

Delving into Rails has been an extraordinarily enlightening experience. The streamlined nature of creating web applications using a Ruby on Rails framework is quite eye-opening and something I will certainly return to frequently in my programming career.

If you've read any of my previous blog posts, you might remember that I'm a huge movie buff, and I often try to incorporate that into my introductory programming projects. For my first Rails projects, I decided to create a simple web application that allowed users to create their own film awards, which is actually something I do personally quite a bit.

From a broad view, the essential functionality of this web application is very direct.

User navigates to a homepage.
User handles a login/signup action.
Users can then browse awards by year and users, leave comments or create their own awards.

Other than 3rd party authentication through Devise and Omniauth, the basic framework of the application was very straightforward. Rather than going over that, I'd like to zoom in on one specific element of my Rails project because it effectively demonstrates the use of one of the most elastic and indispensable tools available to the Rails developer: the sort_by method. If you are an experienced Rails developer, reading this next section may be maddening, but rest assured there is a happy ending.

In this current project, there are only 3 models: Users, Awards, and Comments (in this case, when you read Awards think "Awards Show". Award encompasses a year and all of the categories and winners). A comment belongs to a User and an Award, and a User can have many comments and Awards can have many comments. As I was building out the web application, it felt natural to give the those navigating the application the ability to sort awards by the most comments.

I knew that when I used Award.all I could access every instance of an Award and its comments, but what I wanted ultimately was something I could iterate over cleanly to produce a webpage with the most commented awards in descending order. So, I needed whatever I was iterating over to already be ordered, or sorted,(wink wink) in a certain way. Here is the Frankenstein's monster of code I ultimately created to deal with this issue.

Firstly, inside my Award model I created a class method: self.most_comments_hash. The purpose of this method is purely to iterate over Award.all, access comments.length and output the number of comments as key in an result hash. At that point, I would push the Award instance related to those comments into an array attached to the key. Ultimately, I wanted to create something that looked like this:

result hash => {
5 => ["Award Instance 1", "Award Instance 2]
}

That was successful, but it didn't solve my sorting problem. As it stood now, the result hash structured above was ordered randomly and iterating over the keys wouldn't produce a properly ordered result. That's where my next class method came into play: self.most_comments_sorted_array. This method iterates over self.most_comments_hash and creates an array output that looks like this:

[[5, ["Award instance 1", "Award Instance 1"], [4, ["Award instance 3", "Award Instance 4"]]

It's a bizarre nested array monstrosity in which the 0 index of the nested arrays is the number of comments and 1 index are all of the award instances with that number comments. This basically accomplished what I wanted. I could iterate over this, grab the number of comments and grab the award instances, but it wasn't easy. This is what I had to code my view to make it all work:

That felt like a huge amount of iteration and coding logic for my view, but it did WORK! However, everything I knew about Rails told me there had to be a better way. There was: the sort_by method.

Rather than creating any class methods, I could do this:

Award.all.sort_by {|obj| obj.comments.length }

This sorted every instance inside Award.all by the number of comments related to the object. The benefit of this was, obviously, significantly less code, but also it precluded the need for my view to be so leaden with its own coding logic as well.

First Sinatra Program

alex-aaron — Thu, 25 Feb 2021 17:33:49 +0000

I have to admit, I'm proud of myself right now. Not because the program I'm about to outline is impressively complex or even that it showcases a concept that is particularly innovative; rather, I'm proud of myself because I completed my first cradle-to-grave web application utilizing Ruby and Sinatra.

The Concept

For my first full-blown Sinatra Program, I decided to design a web application that focused on one of my favorite things: top ten lists. Now, this instantly makes me think of the episode of The Office "The List", where the employees of Dunder Mifflin discover what looks like a ranking system of some sort in Robert California's notebook:

Robert California attempts to minimize the list by explaining that it is essentially a "doodle" and should be of no concern. The funny thing is I actually completely understand the concept of the "list doodle" because it's one of my favorite things to do to pass the time. In particular, I've always loved top ten lists. It forces you to really consider your ranking of various items and make tough choices.

So, for my Sinatra program I envisioned a web application that allowed users to create Top Ten lists on a variety of topics and view other users' lists.

Designing The Program

The essential object-oriented architecture of the program was simple enough: there would be a User who created lists, and of course the List object itself, which contained content, a title, and a category.

The first major design decision was determining how to handle the list category. On one hand category could be an object unto itself, and I could allow the user to create that category as they saw fit. For the sake of simplicity, I opted to set the categories myself, and fix them in the program as enums.

Enums are essentially fixed attributes you can declare in your object class, but they map to integers in your database. Here is an example:

The beauty of using enums in this case it allows you to sort by by the enum attribute. In this case, I created 9 enum "categories" in my List class:

Arts and Entertainment
Sports
Politics and History
Food
Recreation
Business
Math and Sciences
Geography
Other The enums would come in handy later of course because I ultimately wanted to create "show_category" pages for each of these categories. Using the enum attribute, I was easily able to sort the lists.

The Biggest Hurdle

Easily the most challenging part of creating this program was designing the "New List" form. For a web application structured around allowing Users to create and view lists, this is essentially the life blood of the program. My first instinct was to create a relatively simple form where the user could input the title, select from the category options and then input/format the list as they saw fit in a textarea tag. Something like this...

So, essentially I would save this singular block of text as list content to the database. And then I realized the problem: when you accessed this to display the list, it would display horizontally... 1. Number 2 2. Number 2 3. Number 3... which makes total sense!

To solve this problem, I eventually decided to to make each list item it's own input in the form that is already numbered 1 to 10 like so...

That was the easy part. The more difficult question was what to do once the data posted with 10 different list inputs. What I ultimately did was this...

In the post controller route, I iterated through the hash containing the list items, progressively adding each item to to an empty string labeled list_content. In the iteration, I added a delimiter (a simple dash, -) I could use later to split the list. After the iteration, you would get something like...

-Item 1 -Item 2 -Item 3 -Item4 -Item5 -Item6 -Item 7 -Item 8 -Item 9 -Item 10...

Later, when it would be time to access this list_content, I could easily split the list at the (-) and then just iterate over each item and display in an ordered list on the page.

After that complexity was handled, the rest of the application ran smoothly. I programmed it to allow users to view lists by category, click on individual users to see all of their lists, or click on an individual list.

Now, the only logical next step is to build in a commenting feature so people can endlessly debate the lists.

First Crack at a Ruby CLI Program

alex-aaron — Fri, 15 Jan 2021 17:18:14 +0000

Prior to beginning Flatiron's remote software engineering program, I had a little experience programming with JavaScript. But my experience only really extended to essential mechanics and syntax. In other words, I had never really created a program, even a simplistic program, from the ground up. So, I was EXTREMELY excited to begin my first major project to do just that: creating a Ruby CLI (command line interface) program.

I studied film in college, so I really wanted to create a basic CLI program that interacted in some way with film-related data. After giving it some consideration, I decided to create a program that could display and sort data related to the American Film Institute's Top 100 film list.

You can take a look at the list here: https://www.afi.com/afis-100-years-100-movies-10th-anniversary-edition/

Now, by no means do I consider this to be a particularly definitive list of the 100 best American films. In fact, there is a lot that I dislike about the list (prime example: The Sixth Sense is ranked 89th, AHEAD of films like Goodfellas, Pulp Fiction, Do the Right Thing, and Bladerunner.) That being said, the website is a really good resource that contains all of the relevant information on one webpage. If you're a film buff like me, here are the kinds of questions you're prone to ask while reviewing such a list:

Was x, y or z director included in the AFI Top 100 (spoiler alert: if you're a fan of David Lynch, the answer is no!)
How many films from a certain director were included?
How many films from a certain actor were included?
How many films from a certain year were included?

These are just A FEW of the questions you might want answered. In essence, I wanted to create a CLI program that would take in all of that AFI data and give the user the ability to answer some of these questions.

Scraping the Website

First things first, I knew I would need a scraper class to take in all of the relevant data from the webpage. Here is a section of the website to give you an idea of all of the info I wanted to capture.

On the most basic level, here is what I wanted my scraper to do:

Scrape the information related to each INDIVIDUAL film (name, title, rank, year, director, writer, cast, producer, cinematographer, editor, and production company).
Create a hash containing all of this data... Something like: {:name=>"Citizen Kane, :rank=>1, :year=>"1941", :director=>"Orson Welles"}
Finally, instantiate those hashes as new instances of a Movies class with all of those keys and values set as attributes and added to a Movies class array containing each instance.

Scraping was by far the most complicated and labor intensive part of the project because it's where MOST of the work of the program is actually being done! Once upon I was able to effectively scrape the data and use it to instantiate each new instance in the Movies class it was just a matter of accessing that data and sorting based on various types of functionality.

Let's take a look at that site picture again to give you a sense of why scraping was a little tricky...

There are essentially two levels of data here. Level 1 is the movie title, year, and rank, for instance:

So, right when we begin we can set the title, year, and rank, but THEN we need to iterate into the SECOND LEVEL. Level 2 includes cast, director, writer, producer, cinematographer, editor, and production company:

Working with this data presented its own unique challenges because, as you can see, it's bizarrely formatted and includes these numbered ids for every individual credited EXCEPT for the cast members. Here is what my code initially looked like just to spit this information out in a way that was appropriate:

So much splitting and, thankfully, just a dash of Regex! After it was all said and done, however, I was able to instantiate Movie instances that looked like this:

From here, it was just a matter of coding the methods for the most important things I wanted the program to do:

Display the list
Display the artists
Sort by artists
Sort by year
Display the information of each individual movie

Beginning the Journey of a Software Developer

alex-aaron — Sun, 20 Dec 2020 21:33:40 +0000

In 2019, I was working as a high school teacher in New Orleans, LA, and I was in the process of securing a position at new school. Everything was proceeding according to plan... until I learned what subject they wanted me to teach: Computer Science--the fundamentals of JavaScript to be exact. A modern high school hiring a Computer Science instructor to teach JavaScript programming principals makes total sense; however, I wasn't a computer science instructor. Prior to accepting this new position, I was a Film and Digital Media teacher.

Don't get me wrong, I am very technically savvy. I can operate sophisticated video and audio recording equipment and edit on a variety of platforms, but I had never been exposed to ANY programming language before, let alone JavaScript. However, my new school had a plan for that: I would attend an immersive teacher training course focused on JavaScript. For 2 weeks, I ate, drank and slept the fundamentals of JavaScript programming, and it was a completely eye-opening experience.

As a filmmaker and storyteller, experiencing computer programming for the first time was like being introduced to an entirely new creative medium. It was both art and science. I taught JavaScript for a year, although that year was severely disrupted by the onset of the Covid pandemic in the United States. Continually exploring and engaging with the vast possibilities of computer programming was one of the things that kept me going in these chaotic times.
As the crisis deepened, I took that time to attend another immersive training course. Increasingly, I realized that I wanted to pursue this path full-force--I wanted to be a software developer.

Flash forward to December, 2020... Now I am student in Flatiron's Software Engineering program and enjoying every minute of it.