DEV Community: Joe Avila

Smashing my first bug

Joe Avila — Tue, 18 May 2021 23:52:14 +0000

Contribute to open source they said, it's a great way to break into tech they said.

A lot easier said than done. I have been developing on the modern web for about a year. I used to code all the time back in the early 2000's when vanilla Javascript, HTML, and CSS was the law of the land. Things have changed a lot since then. Just like learning modern web development, getting involved in open source can feel like drinking from a fire hose.

Open Source Background

I haven't made any meaningful contributions to projects. I helped Joe Previte with a styling bug on his portfolio, but he already had the solution coded out.

I spent 6 months on a contract for a consulting firm where I got neck deep in a React/Typescript + GraphQL/NodeJS application. That really boosted my confidence in reading others code, and reading very large code files. That experience made me feel more prepared to jump into forem's codebase.

About This Bug

"Unable to load Comment Subscription component" #12545

ludwiczakpawel posted on Feb 02, 2021

Describe the bug

It's been happening quite often recently for me but I can't really tell how exactly this should be reproduced. It does work after refreshing the page, but then when I go to another post it's broken again.

Also, this is what's happening in the console:

To Reproduce

See above.

Expected behavior

Fo this component to work properly :)

Screenshots

See above.

Desktop (please complete the following information):

n/a

Smartphone (please complete the following information):

n/a

View on GitHub

There was a console error thrown any time a text editor component was rendered after the first time. So if you visited an article, left and went to a different article then it would say a variable, subscribeBtn, had already been declared.

How I Smashed It

Fix "Unable to load Comment Subscription component" #13694

javila35 posted on May 09, 2021

What type of PR is this? (check all applicable)

[ ] Refactor
[ ] Feature
[x] Bug Fix
[ ] Optimization
[ ] Documentation Update

Description

This PR fixes the console error described in the issue by changing the const declaration to var. I was unable to replicate the UI bug without repro steps.

The changePage function in base.js.erb sending over the user_subscription_tag when it's called, and declaring the subscribeBtn as a const was causing the error. I'm not familiar with liquid tags, but it seems that the other liquid tags that use JS declare variables with var instead of ES6.

Related Tickets & Documents

Resolves #12545

Added tests?

[ ] Yes
[ ] No, and this is why: please replace this line with details on why tests have not been included
[x] I need help with writing tests

[Forem core team only] How will this change be communicated?

Will this PR introduce a change that impacts Forem members or creators, the development process, or any of our internal teams? If so, please note how you will share this change with the people who need to know about it.

[ ] I've updated the Developer Docs and/or Admin Guide, or Storybook (for Crayons components)
[ ] I've updated the README or added inline documentation
[ ] I will share this change in a Changelog or in a forem.dev post
[ ] I will share this change internally with the appropriate teams
[ ] I'm not sure how best to communicate this change and need help
[ ] This change does not need to be communicated, and this is why not: please replace this line with details on why this change doesn't need to be shared

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

View on GitHub

Reflection

My biggest challenge in contributing to open source is believing in myself. Before asking to be assigned to the bug, I went into the code base and searched out the identifying variable. Once I found it, I had no idea what was going on or what the fix was but I knew it was within my grasp. Before I could think myself out of the challenge, I asked to be assigned.

I'm really glad I signed up for it because I was forced to play around in someone else's code base using a tool I'm not I'm not super familiar with: liquid tags. But my knowledge of javascript and googling powers helped me solve it.

Someone had declared a variable in Dev's text editor component with const. When a user (you) switched pages (to edit a post or comment, or to a new article) the entire bundle was being sent again. Because the original value was declared with const the application was throwing an error saying there was already a variable with the name subscribeBtn present.

Suggestions for DEV Community Bug Smash

The bin/startup command didn't work for me. Couldn't get foreman to run properly. I just ran the three commands in the that Procfile in separate terminal windows and that worked fine. Never looked into the foreman issue.

React Router Hook => useParam() (now w/ Typescript)

Joe Avila — Thu, 08 Apr 2021 21:33:28 +0000

While working on a project I needed to get some information out of the URL in the browser. Using the URL to declare what to display is a common situation for frontend, client-side rendering. For example, grabbing an ID or username to send to the backend which is the situation for my current project.

I was using class-based React components when I began learning React. Six months later I'm learning the ins and outs of functional components with Hooks to maintain necessary stateful logic without all the extra lifecycle methods. This learning led me to discover the Hooks of React Router.

<Route path={'/quizzes/:id'} render={props => <Quiz {...props}} />

class Quiz extends Component {
   this.state = {
      //necessary state values here
   }

   componentDidMount {
      api.getQuiz(props.match.params.id).then(data =>
         // logic
   )
}

Here's a code snippet from a project I worked on when I first started with React. This Route Path component has parameters that I want to use. While using the render method of Route, I have to destructure or "spread" props inside the component to gain access to the match object.

I declare that anything following the /quizzes/ portion of the Route will be an :id. I pass props into the callback and spread the props object into the Quiz component as outlined by the React Router documentation. All this to gain access to the piece of the URL I need. Now when the user is at myapp.com/quizzes/1 a Quiz component will be rendered. Once this component mounts it will use the 1 from the URL as an ID and make a call to my backend to filter through my Quiz database. If the URL were myapp.com/quizzes/cat then my API call would try using cat as an ID and an error would be sent back from my database. Unless of course, my database contains a quiz with the ID of cat.

It's worth noting when I wrote the first project I was very new to React and I had been instructed to use the render method to gain access to props. Looking back, I may have been able to make this code less tedious by using the component method of Route where the components already have access to match, history & history as you'll see me do in the next example.

Here is what that same functionality looks like with the useParams() hook.

<Route exact path="/seasons/:id" component={Season} />

const Team = () => {
   const [state, setState] = useState({});
   const { id }= useParams();

   useEffect(() => {
      api.getTeam(id).then(data => {
         //logic 
      }
};

Once again I declare anything following /seasons/ will be an :id. Gaining access to the params is as simple as calling the hook and destructuring the match object, which I know will have a key of id, which points to my value (ie 1 or cat). I don't have to chain calls like in the last example props.match.params.id.

I'm still learning about all the benefits of hooks but I do prefer the look of the code. Thanks for reading, and I'm happy to share my limited knowledge if you have any questions. I'm also very interested in feedback on my use cases.

Update: I've been recently working in typescript. I'm revisiting this article to add how to use this hook with TS. This is assuming you have some basic understanding of Typescript. If you don't, I'd recommend this very basic guide : Typescript for Beginner Programmers by ChibiCode.

In order to useParams you need to implement a generic for useParams. Building on my example above, I need to type the id.


type QuizParams = {
  id: string;
};

// In order to implement that, I'd apply my type to the hook when calling it.

const { id } = useParams<QuizParams>();

Now typescript knows what to expect as a return value from the useParams hook.

BDD Testing with Cucumber

Joe Avila — Sat, 28 Nov 2020 00:21:26 +0000

Recently at work I got the opportunity to write Behavior Driven Development tests using Cucumber.js. Cucumber uses a language called Gherkin to write the test steps and uses javascript to execute them. Gherkin is written in plain english (or a selection of other languages) and is made to be read by any (particularly non-dev) team members. If you haven't written tests before Cucumber is a great place to start.

Setting up the WebDriver

// ~/cuc-test/bdd/features/step_definitions/stepdefs.js
const { Builder, Capabilities, By } = require('selenium-webdriver')

const driver = new Builder().withCapabilities(Capabilities.chrome()).build()

Selenium WebDriver is the technology we'll use to run our tests. At a high level, it follows the test steps and executes them in a browser. Builder creates the driver when we run our tests. Capabilities is how you declare your browser. By is a keyword we'll use in our tests to define what we're looking for.

I found the documentation for Selenium a bit hard to navigate. I mostly referenced the API documentation for Javascript or just searched the issue I was having.

Gherkin keywords

I spun up a simple html page with a few headers, a text input, a drop down menu, and a button to submit your changes. The first test I wrote checks that the default values are all as I'd expect them to be.

Scenario: I want to check default values of the page
    Given I am on the home page
    Then I should see the default title
    And I should see the text input field

Scenario, Given, Then & And are all keywords that come from the gherkin syntax. In my Scenario statement I summarize what the following test steps do. This keyword is used to group steps together and give context for users running the tests.

Given, Then & And declare steps for a test. The string following these declaration keywords connect the step and code to execute. If you have a typo or don't match them exactly you'll receive an Undefined error when you run the tests. This is the meat and potatoes of Cucumber testing.

Given('I am on the home page', function () {
    driver.get('localhost:3000/')
})

Then('I should see the default title', function () {
    driver.findElement(By.xpath(`.//*[text()[contains(.,'Welcome to the site.')]]`))
})

Then('I should see the text input field', function () {
    driver.findElement(By.id('textbox'))
})

The first step of my scenario navigates to the the page I pass into the get method. The second step tells the webdriver to search the page for the text I pass into the xpath. The third searches for any element with an ID of textbox. Remember, we imported By from Selenium in our set up. There a plenty of options to search by.

Scenario: I want to make sure all the colors work
        Given I am on the home page
        Then I want to select the color 'Green' from the drop down
        And I should submit the changes
        Then I should make sure the third header is 'Green'

Since I'm checking the default values in the last scenario I hardcode the parameters to search for. But it's common to pass parameters through the test steps. Notice how green is in quotations in steps two and four.

Then('I want to select the color {string} from the drop down', function (string) {
    const dropDown = driver.findElement(By.id('selector'))
    dropDown.click()
    dropDown.sendKeys(string)
    dropDown.click()
})

Then('I should make sure the third header is {string}', async function (string) {
    const color = await driver.findElement(By.id('changing-header')).getCssValue('color')
    // getCSSValue returns an rgb value
    // colorMap is an object with keys of string and values of the associated value
    expect(color).to.equal(colorMap[string])
})

Then is a function that takes two parameters. The first parameter is the string that we used to declare the test step. Inside of that string we signal a nested variable by wrapping it in curly braces, {string}.

The second parameter is a callback function, where we pass in the variable. Cucumber is particular about what you call the variable, if you pass in a number character you'd use int. If you have more than one variable you'd declare it as string, string2, string3 in the callback but just as {string} in the first parameter.

I also used a couple other methods of the driver like click(), sendKeys(string), and getCssValue. Those methods do exactly what the name implies. sendKeys sends the string you pass in to the value field.

While working on writing a bunch of tests for old components I began to think of the tests I would write as I created new components. What types of identifiers does this component need to be testable? Is it a class name, an ID, or certain unique text that won't appear elsewhere when this is loaded? I began to think about how I would write my new components to comply with the tests I'd eventually write. In some cases, I started with the tests first. Cucumber encourages that by giving giving you the line of code you need to write when it encounters a step it doesn't recognize.

You can fork this repo and open it up on your machine if you'd like to learn by playing instead. There's a couple of tests that need to fixing in order to pass. Feel free to submit a PR if you come up with any cool tests.

Cover image: "cucumbers en route to pickledom" by Stacy Spensley is licensed with CC BY 2.0.

Object prototype property and Hunter x Hunter

Joe Avila — Mon, 28 Sep 2020 17:15:05 +0000

Recently, I have been learning about inheritance and the prototype chain. If you have read my posts you already know I've been diving into the fundamentals of Javascript. You probably don't know I am a huge Hunter x Hunter fan as well. I put my learning about in practice by creating a Hunter prototype object.

Function Constructor

A function constructor can be seen as a blueprint for a particular type of object. The convention is to name a function constructor with a capital letter. For example, my function constructor is a blueprint to create Hunters.

I declare that all Hunters will take two parameters, a name and hatsu (or special power for those who aren't familiar). Each Hunter will be initialized with a powerLevel of 100. Now let's add some abilities to our Hunters.

const Hunter = function(name, hatsu) {
    this.name = name;
    this.hatsu = hatsu;
    this.powerLevel = 100;
};

Hunter.prototype.charge = function(number) {
    if (typeof number !== 'number') {
        console.log('Please enter a number');
        return;
    }
    this.powerLevel += (100 * number);
    console.log(this.name + ' power level at ' + this.powerLevel);
};

Hunter.prototype.useHatsu = function() {
    if (this.powerLevel >= 300) {
        console.log(this.name + ' used ' + this.hatsu); 
        this.powerLevel = 0;
    } else {
        console.log(this.name + ' needs to charge.');
    };
};

By using the prototype property to store the methods charge and useHatsu all future hunters will have the ability to charge up and use their powers. I could declare these functions in my constructor. That would mean each new Hunter created would have it's own charge and useHatsu method. That's a bit excessive, I don't need each Hunter to own the method I just need each Hunter to have access to it.

I save memory by creating the function once and allowing each Hunter to inherit these methods from the Hunter.prototype property.

const gon = new Hunter("Gon", "Ja-Jan-Ken");
const killua = new Hunter("Killua", "Lightningbolt");

console.log(gon)
console.log(killua)

killua.charge(3);
gon.charge(1);
killua.useHatsu();
gon.useHatsu();

If you haven't entered the code into the console yet, go ahead and add it all. Take a look at the objects created. You'll notice they have their name, hatsu, and powerLevel as expected. You may notice the function we created is not stored in the object. They are stored in its ___proto___ property.

We don't need to include the prototype property in our function call because of the prototype chain. Similar to the scoping chain, javascript checks the object's own methods and properties. If nothing is found it checks the object's prototype. It continues this process until it reaches the top-level of the prototype chain which is null.

I covered a lot of complicated topics in a very brief manner. If something doesn't make sense please reach out. This article by Tim Kadlec helped a lot.

Thanks for reading!

What is this?

Joe Avila — Mon, 21 Sep 2020 17:51:37 +0000

In javascript, you have access to this keyword at any time. Unless there are certain conditions met this will always refer to the global object Window. console.log(this) in your console to see the Window object.

Methods and thisBinding

One use case where this will change is in an object method. A method is a function stored as an object property, like displayObject below. If you run the code block in your console you'll first see the window object like before and then the updated value for this, our new object.

console.log(this)

const myObject = {
   type: 'Object',
   purpose: 'Give an example.',
   displayObject: function() {
       console.log(this)
   }
}

myObject.displayObject()

If you understand the process for an execution context than this will be easy to understand. Every time a new execution context is created thisBinding is evaluated. If it's called on a method, this becomes the object that owns the method. Otherwise, it remains the Window object. There are other circumstances where this can change, and if you're interested in learning more other users go into a much deeper dive in the topic than I do in this article.

Scoping Chain

Joe Avila — Tue, 15 Sep 2020 05:03:18 +0000

Calling a function in Javascript creates a new execution context, and when that is created so is a scope chain for that function. The scope chain defines what variables and functions this execution context has access to.

There is a global context which is the javascript file currently being executed. It's safe to assume that all execution contexts on the execution stack have access to the global context, and it's environment record. Consider the following code:

let globalVar = "this is the global context.";

function one() {
   const insideOne = "this is inside of function one.";
   globalVar = "I have access to globalVar here.";
   console.log(globalVar);

   two();

   function two() {
      const insideTwo = "this is inside of function two.";
      globalVar = "I also have access to globalVar in function two."
      console.log(insideOne, insideTwo, globalVar)
   };

};

function three() {
   const insideThree = "this is inside function three.";
   globalVar = "I also have access to globalVar in function thre.";
   console.log(insideThree, globalVar);
   console.log(insideOne);
};

one();
three();

If you run this in your console, you'll see the messages up until we hit the last line of function three() where we try to call the variable insideOne. We don't have access to insideOne because it's outside of the current scope chain. That variable only exists in the execution context of function one() and function two(). Once those are cleared off the execution stack, javascript erases them from memory.

Notice how in our nested function we do have access to the variable insideOne, and globalVar. When an execution context creates a scope for a function it maintains the variable objects of its parent function. The global context is the parent of all functions called in a javascript file. As I mentioned earlier, we'll always have access to global variables such as globalVar. Because function two() is nested within function one() we also have access to any variables declared in function one(). Fun fact, this scoping chain is how closures are created.

You may have noticed I called two() before declaring the function. You can read about that in my Hoisting article.

Hoisting

Joe Avila — Mon, 07 Sep 2020 17:27:17 +0000

Hoisting variables and function declarations in Javascript happens when the variable object is created for an execution context. See my last article to read about execution contexts. Before running any code your browsers javascript engine scans the current execution context for variable and function declarations. In plain terms, functions and variables are found before code is executed so javascript knows how to compute once it encounters them in execution mode. This process is known as hoisting by the javascript community.

Function declaration hoisting

For each function declaration (function myFunc()) encountered, a property is created in the variable object that acts as a pointer to that function. This pointer allows you to call a function in your code before it has been declared. Try the code below in your console.

myFunc(10);

function myFunc(num) {
   console.log(`Your number is ` + num)
};

It's worth mentioning that function expressions are treated as variables. Calling a function expression before the declaration will not run the function.

runCode();

var runCode = () => {
   console.log("I'm a variable, that points to a function. I don't get defined until execution.")
}

Variable declaration hoisting

Your browsers engine also looks for variable declarations. For each variable declaration, a property is created in the variable object and (depending on the keyword used) set to undefined.

var

Declaring a variable using var will set that variable to undefined when hoisting. This allows you to call your variable before declaring. Of course, the value will be undefined. Try the code below in your console.

console.log(age);

var age = 23;

console.log(age);

const && let

Using const or let to declare your variable will create the pointer like normal, but the variable will not be initialized (aka set to undefined). If you call your variable you'll get an Uncaught ReferenceError.


console.log( cat, dog );

const cat = "Ozma";
let dog = "Pippin";

What hoisting does not do.

a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

From the MDN

Cover image: just a cool photo found while searching hoisting on creative commons

"Great hoists, Hulett and Brown electric at work" by Boston Public Library is licensed under CC BY 2.0

What is the execution context in JS?

Joe Avila — Sun, 06 Sep 2020 17:12:52 +0000

If you've written any code in Javascript, you've interacted with the execution context and execution stack. It's a high-level concept that happens behind the scenes of javascript. You don't need to know anything about it to start coding in Javascript. But understanding the basics will help you avoid code that won't execute, and understanding it well will help you debug code that executes in a way you don't expect.

Loading a javascript file into a browser creates a global execution context. Every time a function in that global context is called, a new function execution context is added to the execution stack. The last function called is the first function to be cleared off the stack. This is referred to as Last In First Out (LIFO).

The execution context is removed from the stack after executing a return statement, or all code has been parsed. There can only ever be one execution context running at a time, but that execution context may be paused at any time to enter a new execution context. ECMAScript refers to this as the running execution context.

An execution context contains at least three properties: a variable object, a scope chain, and thisBinding.

Variable Object

The variable object contains the variables and functions declared inside of the current execution context, and if this execution context was created by a function it also contains the function arguments. This is when hoisting happens, you can read my article about that.

Scope Chain

Contains the current variable object as well as the variable object of the outer context (execution context on the stack one below the current execution context) variable object. If the current execution context is the global execution context there is no outer context.

thisBinding

Gives the current execution context access to this keyword.

Shuffle the Array (Javascript)

Joe Avila — Wed, 26 Aug 2020 23:56:07 +0000

Algorithms are something I struggle with. A few of the interviews or screening processes for companies I've done recently have involved algorithms. Being eliminated before even getting to speak to someone is very discouraging. In response, I'm being intentional about solving algorithms recently. This time I'll be tackling this Leetcode problem.

Given the array nums consisting of 2n elements in the form
[x1,x2,...,xn,y1,y2,...,yn].
Return the array in the form [x1,y1,x2,y2,...,xn,yn].

My job is to shuffle the elements of the array together like a deck of cards. This problem is simple with Javascripts .push() method.

var shuffle = function(nums, n) {
    let arr = [];
    for ( let i=0; i<n; i++ ) {
        arr.push(nums[i], nums[i+n])
    };
    return arr;
};

Declare an empty array arr which will be my return value.
Begin a for loop that will run until the index is greater than n.
In each iteration:
1. push() the current index nums[i] and nums[i + n] into the return array arr.

After iterating n times return our new array.

The difficulty was increased when I approached it without push(). I was having trouble keeping track of the indexes I need access to, so I wrote it out on a whiteboard. After writing it out I was able to find the pattern. Stepping through every iteration really cleared up what counters I needed.

I ended up with four variables i, y, x, b. i pointed to the first index for the return array of my code block. y pointed to the second index for the return array. These two variables were incremented by 2 each iteration. x pointed to the first index for the input array. b pointed to the second index for the input array. These two variables were incremented by 1 each iteration. To catch the pattern I really needed to be thorough. After that I was quickly able to deduce what I needed to do. This was my final solution:

var shuffle = function(nums, n) {
    const arr = [];
    let i = 0
    for ( let x=0; x < n; x++) {
        arr[i] = nums[x];
        arr[i+1] = nums[x+n];
        i+=2;
    };
    return arr;
};

Declare an empty array arr which will be my return value.
Declare a counter i outside of the loop that I'll increment differently.
Begin a for loop that will run until the index x is greater than n.
In each iteration:
1. Set arr[i] to nums[x]
2. Set arr[i+1] to nums[x+n]
3. Increment i by 2
4. Check if x < n
Return the array.

Max Consecutive Ones (Javascript)

Joe Avila — Fri, 14 Aug 2020 05:22:32 +0000

Algorithms have been a struggle for me to learn. I don't particularly enjoy them (until I solve them). I've been told they're an important part of being a developer, especially when searching for your first job. I practice on Leetcode and I'll start posting my accepted submissions here.

Here is my solution for this Leetcode problem.

Given a binary array, find the maximum number of consecutive 1s in this array.
Note:

The input array will only contain 0 and 1.

The length of the input array is a positive integer and will not exceed 10,000

My job is to count the number of times the number 1 appears in a row and return the largest run of 1's. Just from reading the description using a for loop to touch each entry in the array is my plan. I'll use two variables. One to keep track of the current count and the second, the return value, to keep track of the largest number of 1's in a row. I'll call those currentCount and largestCount respectively.

var findMaxConsecutiveOnes = function(nums) {
    let largestCount = 0;
    let currentCount = 0;
    for (let i = 0; i<nums.length; i++) {
        if (nums[i] === 0) {
            currentCount = 0;
        } else {
            currentCount++;
        };
        if (currentCount > largestCount) largestCount = currentCount;
    };
    return largestCount;
};

Going through the array:

First I check if the element (nums[i]) is 0.
- If it is 0, I set currentCount to 0. Because that ends any run I have going.
If the element is not 0, I add one to currentCount.
- This works because of the note supplied by Leetcode. The only elements in the array will only be 1 or 0.
Before ending the current iteration of the loop, I check and see if the currentCount is greater than the largestCount. If so, set that to largestCount.

After iterating through the entire array return the largestCount.

Here is a refactor of this code using a ternary instead of an if/else statement.

var findMaxConsecutiveOnes = function(nums) {
    let largest = 0;
    let current = 0;
    for (let i = 0; i<nums.length; i++) {
        nums[i] === 0 ? current = 0 : current++;
        if (current > largest) largest = current;
    };
    return largest;
};

Validating a unique record

Joe Avila — Tue, 28 Jul 2020 07:05:27 +0000

I'm building a stat tracking site for my local basketball league using a Rails API. I started with a post about creating custom names (or aliases) in Rails. In this post I'll be sharing my experience creating a customized uniqueness validation.

Validations in general are an important piece of keeping a tidy database. Fortunately Rails comes with plenty built in. There's a very thorough guide on implementing validations.

My use case

I keep track of the data for a game by the Player, instead of storing all that information on the Game table. To find the winner I tally up the points scored by each Player on the home_team and away_team mentioned in my last post.

The validation I am creating will ensure that there is only one record (GameStat) per Player, per Game. This custom validation ensures that a Player only has one entry on each Game. Without this check user error could cause problems for my front end (i.e. displaying an incorrect winner).

The code below is simple. If you're familiar with ActiveRecord it may be easy to understand.

class GameStat < ApplicationRecord
  belongs_to :player
  belongs_to :game
  validates :game_id, uniqueness: { scope: :player_id, message: 'record already exists' }
end

On the 4th line I declare that a Game should only have one GameStat per Player using the scope: option. I also provide a custom message to give myself my users a clear idea of why their attempt at posting statistics is failing. The message is not necessary as there is a provided default.

To explain in it a nontechnical way: every time I create a GameStat I check to see if one exists with the same ID as the current game and player. If there is, an error is sent to the user.

Explaining it technically (pretty much the same): Before the new GameStat record is created, Rails runs a SQL query on the GameStat table checking to see if a record of the same value (game_id, and player_id thanks to the scope addition) already exists. If the record exists, throw an error.

There is one more step mentioned by the Rails guide.

Should you wish to create a database constraint to prevent possible violations of a uniqueness validation using the :scope option, you must create a unique index on both columns in your database.

I have to add an index to my player_id and game_id on my GameStat table. I don't fully understand indexing yet. So I had to find some help. Thanks to google, I found an answer on Stack Overflow.

class AddUniqueIndexForGameStat < ActiveRecord::Migration[6.0]
  def change
    add_index :game_stats, [:player_id, :game_id], unique: true
  end
end

Just like that I am no longer able to create duplicate records for a game, or player.

Thanks for reading, please comment any questions or suggestions for future blog posts. If you have any good resources on learning more about index's I'd love to see them!

Javascript Order of Operations

Joe Avila — Thu, 23 Jul 2020 19:03:00 +0000

If you're from the US, you may be familiar with the old saying, Please Excuse My Dear Aunt Sally or PEMDAS. It represents the order of operations or operator precedence of mathematic equations.

Parentheses
Exponents
Multiplication/Division
Addition/Subtraction

Programming languages have expanded version on these rules, but they follow a similar pattern. Just without the famous phrase.

If you've ever declared a variable, then you've already interacted with Javascripts operator precedence. You can look at the operator precedence table at MDN docs. This table is broken down into sections with a number tied to each operators precedence. The important part to grasp is: the larger number is parsed first.

Let's look at some examples

 const a = 5 + 6 * 3;

How many operators do you see in the example above? There are two obvious operators (+ & *) but there's a third less obvious operator: the assignment operator =.

The order of operations in this line of code is pretty easy to follow.

There's a declaration of a variable named `a`.
`a` points to a math equation.
JS calculates the equation:
1. 6 * 3 happens. Multiplication part of PEMDAS, or precedence power 15 on the table.
2. 5 + 18 happens. Addition part of PEMDAS, or precedence power 14.
The assignment operator, with precedence power of 3, resolves assigning a value of 23 to our variable a.

I'll add a comparative operator (precedence power: 12) in the next example, as well as some parentheses (power: 21). I'll also introduce associativity. From the MDN docs:

The difference in associativity comes into play when there are multiple operators of the same precedence.

const b = (16 - 2) + 4 > 1 + 5;

I'll briefly cover what happens in less detail. Pay attention to step two where we encounter associativity.

Parentheses has the highest precedence: 16 - 2.
Addition and subtraction both go next, in their associative order: left-to-right
1. 14 + 4
2. 1 + 5
Now our logical operator: 18 > 6
Finally, b is assigned the value of true. 18 is greater than 6.

The above examples don't stray too far from math, and should be easy to understand. There are plenty of edge cases involving operator precedence, probably lots that I haven't even encountered yet.

One tricky example is declaring variables in succession. This just involves an understanding of associativity.

const first = second = 10;
console.log(first, second); // #=> output: 10, 10

The assignment operator resolves from right to left, so the first line could be rewritten as: const first = (second = 10).

I have a lot to learn about operator precedence, but I hope that this post clearly explains some javascript fundamentals for someone trying to learn.