Forem: kevhines

Background: Updating a Dice Rolling App

kevhines — Tue, 19 Oct 2021 19:49:17 +0000

One of my favorite parts of coding is getting to dig into existing code. Adding functionality. Debugging. Really getting to figure out how a piece of code works. It's been a while since I have done that but recently I got a chance to flex that muscle.

No code in this post, this is just about the project. It's a small one but this will explain what I had to do.

Background: Role Playing Games and Dice

My friends and I casually play different role playing games over slack. If you haven't played role playing games it's kind of like playing pretend, you create a character with certain skills and you interact in a world and with other players to explore that world. Often there are times when you need to bring luck into play (are you able to defeat someone in battle, hack into a computer, recognize a dialect) and when that happens you roll dice.

More Background: Rolling

Slack has a nice app for rolling dice that you can use. You type /roll to start the slash command and then list out the specific dice you want to roll.

So like this:

This works great. But my friends and I play games that use dice a little differently. So when we started needing dice to roll differently a friend of mine built a custom dice rolling app for Slack to do the job. For example this code rolls percentiles where you can ask it to roll an extra die for a bonus. The bonus die replaces the tens place if it's lower helping you get a low roll. Like this:

This is a custom app so we aren't using the built in /roll slash command but our own /r slash command. The c signifies that it's using the percentiles roll for this different game. The b signifies roll a bonus die. You can also roll a penalty die with a p. And this app also rolls normal dice like the built in app so we don't need to go back and forth between applications.

Background: a new game

So we started playing a new game. In this game the dice exploded. That means if you rolled a max value, you had to roll the die again and the total was what you rolled. So if you roll a 6 on a 6 sided die you can roll again and if you get a 3 that time your actual roll was a 9. The built in roll app can do this, so we considered going back to that built in app. But after a little playing we realized it doesn't handle multiple rolls the way we wanted it to.

So it rolls both dice, and explodes them nicely BUT it gives you a total of both dice when we frequently found we wanted two separate subtotals.

So it was decided we should update our custom app. My friend who wrote the code didn't have time to update it but offered to share the javascript code with me so I could update it. In my next post I'll step through how I attacked this fun job.

Algorithms: Spotting Resource Hogs

kevhines — Sat, 21 Aug 2021 19:22:13 +0000

When looking for a tech job you are probably spending some time practicing writing algorithms (on LeetCode or HackerRank or some site like that).

Writing a good algorithm often comes down to two parts.
1) writing the code (this one is obvious)
2) being aware of it's order of complexity (less obvious)

In an ideal world you'll write code that's quick, doesn't use a lot of resources, and solves the problem. But these problems you are attempting to solve are tricky. Sometimes that solution has lots of edge cases you need to take into account. And sometimes these problems lend themselves to solutions that eat up resources and are complex. Maybe O(n^2) or O(n^3) or even O(2^n) - for more on what those O's mean, read the answers to this stack overflow question.

I just want to talk, very quickly about being aware before you even start the problem that it is going to lead to a large order of complexity.

Fibonacci

The classic example of a problem that leads to a very high complexity solution is a function that takes a number and returns the Fibonacci number that you get in that position.

The Fibonacci Sequence is a sequence of numbers that equals the total of the previous two numbers in the sequence, with the sequence beginning with 0,1. So F(2) is F(0) + F(1) which equals 1. Then F(3) = F(2) + (F1) which equals 1 as well. But after that is starts expanding. The early part of that sequence is 0,1,1,2,3,5,8...

Here is a simple looking recursive function that determines the fibonacci number at the place in the sequence that is provided:

function fib(n) {
    if ( n === 0 || n === 1) {
        return n
    } else {
        return fib(n-1) + fib(n - 2)
    }

}

This is a solution you might come up with if you aren't worried about complexity. But the complexity of this solution is O(2^n). That is an exponential time which is way too complex. Large numbers will become untenable for this function.

Take a look at that function. Every time you call it, it COULD call the function twice more. That's a signal that it could get out of control really fast. So you should begin thinking about a better solution. One that is not as short and neat, but will avoid the terrible run time this function creates.

Ideally you don't want your function to be called more than once for every element it checks. In this case, if I send a 10 in, I don't want the function run more than 10 times. (in this case it will run over 100 times!). So you need to start thinking of a better solution.

This blog entry is not about a better solution, but if you are curious about seeing a better way to solve this problem I'd recommend this video.

Searching for Anagrams

So the other day I was practicing algorithms on LeetCode and I had a problem that asked me to accept a string, and return the longest palindromic substring within it.

My first thought was this pseudo code:

//Accept a string s of n characters
//check if s[0] is an anagram
//Then check if s[0] + s[1] is an anagram
//continue checking until s[0]+s[1]+...s[n]
//then check s[1] and follow the same track until I check:
//s[1]+s[2]+...s[n]
//keep doing that until I check s[n]

That's a surefire way to be certain I check every possible substring of s. But my memory of that Fibonacci problem started getting triggered. For a string of length n I need to check n different substrings, plus n-1 substrings, plus n-2 substrings.... uh oh. That starting to sound real bad. If you have to run through an array (or a string in this case) more than once for every element (or character) you are getting to a bad place.

Turns out that solution is O(n^3) which isn't as bad as my bad fibonacci solution but it isn't great. (a string of 10 characters would loop through 55 times. A string of 11 would run 66 times. etc)

So right away, if you want to solve this problem, you should be aware that you are heading towards a high complexity.

If you are doing this in an interview, you might just want to give the answer you can think of. I would! But if you are aware of that complexity you can speak to that. Maybe you can solve it a better way once you get this inefficient way written out. Maybe you can't - but for some interviewers seeing that the person they are talking is aware of the issue is a huge step forward.

Yeah, but what's the solution?

Again - I wrote this blog post just to talk about the idea of identifying the problem, not solving it. I really do think identifying the problem is a huge step. The easier you can see that problem the more time you have to think of alternatives. Simply recognizing the complexity quickly shows a comprehension interviewers should value.

But you want an answer. I get it. So did I. And I couldn't figure out how to solve this efficiently on my own. But after some reading I did find a solution. I'll present my version of it here:

var longestPalindrome = function(s) {

    if (s.length <= 1) return s;
    let start = 0
    let maxLen = 0
    for (let i = 0; i < s.length; i++) {
      const len1 = expandSearch(s, i, i);
      const len2 = expandSearch(s, i, i + 1);
      const len = Math.max(len1, len2);
      if (len > maxLen) {
        start = Math.ceil(i - (len-1) / 2);
        maxLen = len
      }
    }

    return s.slice(start, start + maxLen);
  };

  function expandSearch (s, left, right) {
    let L = left,
      R = right;
    while (L > -1 && R < s.length) {
        if (s[L] !== s[R]) break;
        L--;
        R++;
    }
    return R - L - 1;
  }

What you are doing here, briefly, is taking a character (always a palindrome) and then checking on either side of it. If those characters are the same it's still a palindrome so keep checking on the next two characters around your starting spot. If it's not a palindrome stop checking. Then doing the same for two characters, because palindromes of even length have two characters in the center like hit Swedish pop band ABBA). You need to do this for every character. That's still O(n^2)... but that's better!

An even better solution is Manacher's algorithm which is a very complicated algorithm and not one I think you'd need to come up with on your own in an interview.

A Second Pointer

kevhines — Fri, 13 Aug 2021 21:10:57 +0000

A quick little post about using a second pointer when optimizing algorithms.

Unoptimized

Take a look at this function that takes an array of numbers and then returns an array of those numbers squared and sorted from smallest to largest.

function squared(array) {
    let result = []
  for (let value of array) {
    result.push(value * value)
  }


  return result.sort((a,b) => a - b)
}

This function works but it's Time Complexity isn't that great.

The For loop runs once for every element in the array so that's O(n) - a pretty fair time complexity. But then I have to run a sort, and many sort's generally time out around O(nlog(n)) - and that's basically where javascript's built-in sort method lands. That's a pretty bad result. Not much can be done about that.

But what if the initial array is already sorted? Oh, now we are getting somewhere!!

Somewhere (i.e. Optimization!)

So if the array that is sent to my function is already sorted I don't need to run sort() at all right? Well - no. If there are negative numbers in the array I still need to do some sorting.

Take this array for instance:

let unsorted = [-7, -3, 2, 3, 12]

It will give me the result [49,9,4,9,144]. That's not sorted! So how can I sort that without running sort()? That's where using a second pointer comes in.

My for loop points at one spot in the array: the current element. What if I had two pointers? One for the smallest number and one for the largest. Like so:

function squared(array) {
  let highest_pointer = array.length - 1
  let lowest_pointer = 0
  let result = []
  while (**some logic here**) {
      // some more logic here 
  }
  return result
}

So instead of a for loop we have a while loop and we are manually keeping track of each index. That way we are working our way from the beginning of the array and the end of the array.

Keep in mind our interior logic needs to include incrementing or decrementing the appropriate index whenever it adds something to the result array.

function squared(array) {
  let highest_pointer = array.length - 1
  let lowest_pointer = 0
  let result = []
  while (**some logic**) {
     if (array[lowest_pointer] ** 2 >= array[highest_pointer] ** 2) {
        result.push(array[lowest_pointer] ** 2)
        lowest_pointer++
     } else {
        result.push(array[highest_pointer] ** 2)
        highest_pointer-- 
     }  
  }
  return result
}

So what I am doing in this above example is I am checking which number is larger, the first number squared or the second one. If the array is all positive numbers it will always be the higher indexed element. But if there are negative numbers that might not be true. -7 is smaller than 3, but -7 squared is larger than 3 squared.

Once I determine which number is larger I add that to the result array and then increment (or decrement) the index.

Now: When does this loop end?

It ends when I have checked every element of the array. Or to put it another way if the lowest_pointer is pointing to a number higher than the highest_pointer. Or to put it another another way and show it as a boolean comparison:
lowest_pointer > highest_pointer
Since I am doing a while loop let's reverse that to:
while (lowest_pointer <= highest_pointer)

Let's look at the code now:

function squared(array) {
  let highest_pointer = array.length - 1
  let lowest_pointer = 0
  let result = []
  while (lowest_pointer <= highest_pointer) {
     if (array[lowest_pointer] ** 2 >= array[highest_pointer] ** 2) {
        result.push(array[lowest_pointer] ** 2)
        lowest_pointer++
     } else {
        result.push(array[highest_pointer] ** 2)
        highest_pointer-- 
     }  
  }
  return result.reverse()
}

Note that I had to reverse my results. Since I was putting the highest number first that means my array was built backwards. There wasn't an easy way to find the lowest number (without increasing my function's complexity) so I put the largest number first and then reversed it.

I could have also added the numbers into the front of the array (using unshift() vs push()) but that's actually slower than running push() and reverse(). Reverse is simply O(n) unlike sort. So running the while loop and then reverse is O(n + n) which becomes O(n) when you ignore the constant.

Conclusion

When trying to optimize a function or algorithm open your mind to multiple pointers. Sometimes manually keeping track of those pointers can help you find a way to avoid some of the more complex parts of your code.

Triggering an Error Modal in React

kevhines — Mon, 07 Jun 2021 18:41:31 +0000

I decided to implement a popup modal which would display error messages in my React application.

I adapted some CSS from Kumar Mathalier's jsfiddle page.
And I adapted some code for how to create a modal from Eden Ella's code on his blog.

I really dug the look of Kumar's modal, and Eden helped direct me to the idea of hiding or showing a component based on a local state. So check those pages for details on how they did those things.

However, Eden's page triggered the modal by clicking a button and I needed my modal to pop up whenever I received an error in my fetch statements. So here's what I did to make this modal appear on it's own.

It all starts when you get an error

When an error occurs in my Rails backend the code sends an error object {message: "some error message"}. So in my fetch statements I need to check to see if I get that object with an error message. When that happens I call an error reducer (instead of whatever reducer I'd call if there was no errors)



 fetch(url, {
        method: "POST",
        headers: {Accept: "application/json", "Content-Type": "application/json"},
        body: JSON.stringify({sentence: body})
      }).then(r => r.json())
      .then(sentence => {
        if (sentence.message) {
          dispatch({type: "DISPLAY_ERROR", payload: sentence})
        } else {
          dispatch({type: "ADD_SENTENCE", payload: sentence})
        }
      })

Redux Store and The Reducer

My reducer does two things. It either sets an error message into my state or it clears it. My state, for purposes of this blog, looks like this:



state = {
other_aspects: {},
error: "" // error message
}

The Modal

The Hulk's trick is that he's always angry and the Error Modal's trick is that it's always there. But it only displays when the props.show changes to true. (Hopefully you looked at the code I linked above that Eden wrote)

I opted to store that Boolean in a local state instead of in props. So this:



class ErrorModal extends React.Component {

    state = {
      show: false
    };
}

In Eden's code he change the value of show with a button click. I want to change that value whenever an error is found (which can happen in any of my fetch calls).

As I showed when my fetch finds an error it sets error in the Redux Store's state. So I made sure to map that error message to props in my Modal Component:



  function mapStateToProps(state) {
    return {error: state.error}
  }

  export default connect(mapStateToProps)(ErrorModal)

Now whenever an error shows up this component will render again. When that happens I cam change the value of my local state. So I used componentDidUpdate()



      componentDidUpdate(prevProps) {
        if (this.props.error && !prevProps.error) {
          this.setState({
            show: true
          });
        }

This if statement is very important. This says if there is an error message in my props AND there wasn't one before set state.show to true. If I didn't have that if statement I could get caught in a recursive loop. Let's say instead of true, I wrote it like this:



          this.setState({
            show: !this.state.show
          });

This has the same result as my code. Before it was hard coded, and this is a little more elegant. It toggles it from false to true. But now think about what happens. The error message changes props which would trigger a render, and that would change the state which would trigger ANOTHER render which would change state again which would trigger ANOTHER render which would trigger ANOTHER render... and you get it.

So that if statement protects me no matter how I change that setState command.

Clear the error message

Ok. The modal pops up. The user is shamed about his mistake. Excellent. They click the button to close the modal. Now we need to hide this modal again. This works almost exactly like Eden's code. His onClick function was a prop and mine is local function, but the same thought process is here:



    onClick = (e) => {
        this.setState({
          show: false
        });
      };

The Modal is no longer visible again (it's back to being mild mannered Bruce Banner if you follow my earlier subtle analogy)

I also needed to remove the error message from the Redux store's state. Changing the state causes the modal to render again but it doesn't make the modal reappear because of that if statement in componentDidUpdate (the prevProps.error is not blank). But when I get a new error prevProps.error will still NOT be blank so the modal won't appear! So I created an action that called the case in my reducer that cleared the message in my store. I called it clearError.

Now I just need to call that after setting state.show to false again.

Here is the final code:



import React from "react";

import {connect} from 'react-redux'

import clearError from '../actions/clearError'

class ErrorModal extends React.Component {

state = {
  show: false
};


onClick = (e) =&gt; {
    this.setState({
      show: false
    });
    this.props.clearError()
  };

  componentDidUpdate(prevProps) {
    if (this.props.error &amp;&amp; !prevProps.error) {
      this.setState({
        show: true
      });
    }

}

render() {
    if(!this.state.show){
        return null;
    }
  return &lt;div className="modal" id="modal"&gt;
            &lt;div&gt;
                &lt;a href="#close" title="Close" className="close" onClick={this.onClick}&gt;X&lt;/a&gt;
                &lt;h2&gt;Error Message&lt;/h2&gt;
                &lt;p&gt;{this.props.error}&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
}



}

function mapStateToProps(state) {

    return {error: state.error}

  }

export default connect(mapStateToProps, {clearError})(ErrorModal)

Conclusion

Props and State changes cause your page to render so managing those values can make it very easy to know when a page will hit their lifecycle methods like componentDidUpdate.

Using LocalStorage with React

kevhines — Mon, 07 Jun 2021 15:50:41 +0000

I am working on an application that uses React and Redux and I wanted to add a login page but I didn't have time initially to create a fully secure frontend login. So, as a placeholder I used localStorage to keep track of who was logged in. Let me show you how I did it.

First: Look at your REDUX Store

After someone logs into my site I add the user to my Redux Store:

...state
user: { id: //user's ID from the database
        username: //name the user chose to login with
        ...other_data //other data I associated with a user
       }

This works easily enough. As long as the state exists in the Redux store I can see who is logged in. The only issue is if someone refreshes or types a URL directly. If that happens the store has to be re-generated and the user appears to not be logged in.

Second: Set up props on a component

So, I just had to use some lifecycle methods with localStorage.

I can't use componentDidMount() initially because when you first come to the application the user has not logged in. So when the component mounts there won't be any user data. So instead I looked to componentDidUpdate().

To make this work I had to insure that I had the user.id in props. This way when the user logged in, the user.id would change and therefore the props would change. Then this component would update allowing my componentDidUpdate() to trigger.

function mapStateToProps(state) {
  return {user: {id: state.user.id}}
}

Note that I only retrieved the user's ID and not the entire user object from the store's state. This is because I have other data stored as an array within the user object and that data can change pretty frequently. I don't want this page to need to re-render whenever a user's data changes. I only want to re-render when the user object changes completely.

This might sound obvious, but it tripped me up for a while because I didn't consider what would trigger this page to re-render.

Third: Use Lifecycle Methods and localStorage

So now that I have the correct props coming in I can set up my componentDidUpdate() method.

componentDidUpdate(prevProps) {
      localStorage.setItem('userID', this.props.user.id);
    }
}

Pretty straight forward here. When this page re-renders it grabs the ID from the props and sets it in localStorage. That first argument is basically a variable name and the second is the value. I called it 'userID' but you can name it whatever you want.

What this doesn't account for is if someone logs out. I also need to clear the localStorage when someone logs out. I could have cleared localStorage in the reducer or on the page where a user chooses to log out but I wanted to have all my localStorage accessing in one place. So I added a little bit of logic to this componentDidUpdate() method.

componentDidUpdate(prevProps) {
    let storedID = localStorage.getItem('userID');
    if (this.props.user.id && this.props.user.id !== storedID ) {
      localStorage.setItem('userID', this.props.user.id);
    }
}

Now I first check localStorage and grab the userID that is stored there. If I am coming to the application for the first time this won't find any data. That's ok. This method shouldn't run anyway since it will only run when the user.id in props changes. If you've logged out, it will find the old userID here. (Did you know: the same userID should be stored in prevProps as well!)

Now for that little bit of logic. If there is now a user.id in the props and that user.id is different from the what's already in the localStorage set the localStorage with the new user.id. If you are logging out it will set this localStorage to a blank string.

Finally: Let's deal with Users who Refresh the page!

One last thing to worry about, and truly the only reason I am using localStorage. What if someone refreshes the page or types a URL directly instead of using my easy links? (Why is this someone not trusting the simplicity of this SPA?)

This is where componentDidMount() comes into play. When this page is mounted for the first time I need to do a little checking.

  componentDidMount() {
    let userID = localStorage.getItem('userID');
    if (userID) {
      this.props.findUser(userID)
    }
}

Once again I tell my component to check localStorage for a userID. If a user is already logged in it will find that stored userID. So then I just call a method (that I defined earlier with an action) to use this userID to find the user data in my database. The reducer will then log that user in as if they hadn't cruelly refreshed the website.

Was this a good idea: NO! but also Yes!

Is this a secure way to store user ID's and keep track of who's logged in. NO!

But it's simple and can definitely be used for less critical data. And in my case it's ke[t my program running until I can come back and add the more secure log in functionality. So it's still useful.

Kill Your Darlings...

kevhines — Mon, 17 May 2021 15:51:59 +0000

I finished my last post on this blog and something began nagging at me. I wrote all about extending a JavaScript class and listed some extended methods I built. All of a sudden I realized I didn't need one of them. (go back and read the original post here.)

Let's look back

Here is the extended class I wrote about:

class AllCards extends Deck {

    constructor() {
        super()
        this.namedCards = []
    }

    addCardtoDeck(card) {
        super.addCardtoDeck(card)
        if (card.name) {
            this.namedCards.push(card)
        }
    }

    resetNamed() {
        this.namedCards = this.unplayedCards.filter(card => card.name)
    }

}

If you didn't go back and read my previous post (rude) here is what's going on. I wrote a very simple card game that used a very unique deck of cards (you can't buy these cards in stores). I had built a class to keep track of different decks of cards involved. I extended playable decks (the computer's and players cards) and I also extended an AllCards deck that kept track of every card in the game (even the ones that were not being played with) and also kept track of each card's names and rules.

I needed to keep track of which cards had names and which ones didn't so I "cleverly" extended my addCardtoDeck class to keep track of named cards.

So far so good.

Then I mentioned I created a method called resetNamed that rebuilt my named deck when a new game is started. (Many cards may have gained names while you played).

I posted my blog entry and went to work on something else.

rebuilt my named deck.
extended class to keep track of named cards.
rebuilt my named deck.
extended class to keep track of named cards.
rebuilt my named deck.
extended class to build named deck.
named deck.
named deck.

Wait a second!!!

Not so Clever

I wrote a nice little extended method, but then later wrote a simple method that had the same result. That's repeated work and repeated work is inefficient coding.

So I got rid of the extended class (keeping the original class that builds the deck of all cards). I found the method that called on my Deck class to rebuild all the decks before a new game and leveraged that method before the original game.

The only thing an original game does that repeat games does not do is fetch card data from my database. So truly that rebuilding section of code was just building decks (it didn't matter if they existed before or not)

First games and new games both run a prepForGame method (clear some bits of the DOM, make an addition to the Game Log, clear any old decks), then a first game Fetches Data and sorts that data. After that both first and new games run resetNamed and deal cards to the User and the Computer.

The end result looks so much cleaner. Instead of building my array of Named Cards in two different ways I now did it one place, in one way. Much simpler if I ever need to make future changes.

So my clever extended method wasn't as clever as just not using that method at all.

That Javascript has (extended) class!

kevhines — Fri, 07 May 2021 16:17:35 +0000

Let's talk extending classes in JavaScript.

I wrote a single page JavaScript game that I called Gibberish Cards. It's kinda like War... but dumber.

It didn't use a typical card deck, and the names of the cards were user defined. This mean I needed a list of what cards were in the game and a subset of those cards that had names. In addition I needed to know which cards a user had in his draw pile and which cards a computer had in his draw pile. I also needed to know which cards the user and computer had in their discard pile. That's 6 arrays of card objects!

So I created a Deck class.

A Simple Class

class Deck {

    constructor() {
        this.unplayedCards = []
    }

    addCardtoDeck(card) {
        this.unplayedCards.push(card)
    }


    findCard(id) {
        return this.unplayedCards.find(card => card.id === id)
    }

}

I called the array of cards unplayedCards because I needed to know which cards had not already been used in the game. I had two functions in this class addCardtoDeck which was great when the game first started as I filled in all those different decks I talked about. And occasionally I need to find a card object so the findCard function was very useful.

But I also needed to keep track of what named cards existed. The computer only ever had named cards, and I didn't need to keep the named and unnamed cards separate for the user so I only needed a list of all the named cards in the game before starting.

Rather then keep track of those named cards in all Deck classes I extended the Deck class to an AllCards class.

Extending and Using super

class AllCards extends Deck {

    constructor() {
        super()
        this.namedCards = []
    }

    addCardtoDeck(card) {
        super.addCardtoDeck(card)
        if (card.name) {
            this.namedCards.push(card)
        }
    }

    resetNamed() {
        this.namedCards = this.unplayedCards.filter(card => card.name)
    }

}

Because this extends from Deck I had access to the findCard and addCardtoDeck function. My constructor needed both an unplayedCards array and a namedCards array. I used the code from the Deck class by calling the super() method in the constructor.

I determined which cards were named as I filled cards into those arrays via AddCardtoDeck so I also had to extend that function. You can see in the extended function I call super.addCardtoDeck(card) to add a card to my unplayedCards array but then I have new code where I add any named cards to the namedCard array.

This would be a pointless array in the user's deck and the computer's deck so I avoided the two extra array of card objects.

I also created a function just in the AllCards class called resetNamed() which is useful after a game ends. If a user wants to play again I don't want to re-upload all the card details from the database so it recreates the namedCards array with any cards that got named during the most recent game.

There was also a lot of functions I used in the two game decks that I never needed to use for the repository of all cards so I extended another class from Deck.

Another Extended Class

class PlayableDeck extends Deck {

    constructor() {
        super()
        this.playedCards = []
    }

// here is where I placed all the functions 
// only applicable to this class.

}

Similar to the AllCards* class this extends from **Deck, uses super to create a this.unplayedCards array but then also creates an array for game decks that keeps track of which cards have been played since the last reshuffle. A discard pile, if you will. I called that playedCards.

Now that I had a PlayableDeck class I was able to create a slew of functions for game play that did not need to sit in the Deck class.

drawCard() - randomly draws an unplayed card
moveCardToPlayed(card) - moves a card (say that card I got from drawCard()) into the playedCards array.
removeCardFromDeck() - removes a card from played. This is used when your opponent takes your card.
totalCards() and totalUnplayedCards() to keep track of draw and discard piles. These are also critical to know when you need to reshuffle or when you've lost the game!
clear() - this function is clearing all cards after a game ends so you can start a new game cleanly.

3 Uniquely Similar Objects!

By extending the class I was able to have 3 Deck objects used in my code that didn't have functions or arrays baked in they would never use. It made the code cleaner and made testing easier while I coded the gameplay functionality.

Extend your classes! It's easy!

Two Tables Become Three

kevhines — Sat, 03 Apr 2021 00:46:35 +0000

Had my first experience with a model that needed a self-join.

A self-join, or self-referential association, is when a model has a relationship with itself. For example maybe an HR app has an Employee model that needs to associate with itself to let you know who manage's who. Or a Social Media app has a User model that needs to associate who is friend/follower with who.

In my case I have a Monster model and I need to know which Monster has fought which other Monster.

We're talking Godzilla vs King Kong - The Ultimate Ruby on Rails experience!!

To understand how this will work let's first pretend that I am building a Monster vs Baseball_Player app.

In that case I'd have these three models with the following associations:

class Monster < ApplicationRecord
    has_many :fights
    has_many :baseball_players, through: :fights
end

class BaseballPlayers < ApplicationRecord
    has_many :fights
    has_many :monsters, through: :fights
end

class Fight < ApplicationRecord
    belongs_to :monster
    belongs_to :baseball_player
end

If you've done typical many to many associations this should all make sense. So when Godzilla steps on Mike Trout and then steps on Clayton Kershaw you'd have this:

godzilla = Monster.create(name: "Godzilla")
trout = BaseballPlayer.create(name: "Mike Trout")
kershaw = BaseballPlayer.create(name: "Clayton Kershaw")

fight1 = Fight.create(monster: godzilla, baseball_player: trout)
fight2 = Fight.create(monster: godzilla, baseball_player: kershaw)

godzilla.baseball_players = [trout, kershaw]
trout.monsters = [godzilla]
kershaw.monsters = [godzilla]

But we don't want our monsters fighting baseball players. It's not a fair fight! So lets just swap in monsters for baseball players and see what issues it causes. First thing we'd notice is we have two monsters, so to identify them differently in the fight model we need to call them by different names, like monster1 and monster2, instead of just monster. In fact to make it clearer lets have it be challenger and defender. So we want this to work:

godzilla = Monster.create(name: "Godzilla")
kingkong= Monster.create(name: "King Kong")
mothra= Monster.create(name: "Mothra")

fight1 = Fight.create(challenger: godzilla, defender: kingkong)
fight2 = Fight.create(challenger: godzilla, defender: mothra)

godzilla.defenders = [kingkong, mothra]
trout.challengers = [godzilla]
kershaw.challengers = [godzilla]

So our first stab might be to set up associations like this (spoiler alert: this won't work):

class Monster < ApplicationRecord
    has_many :fights 
    has_many :defenders, through: :fights

    has_many :fights
    has_many :challengers, through: :fights
end

class Fight < ApplicationRecord
    belongs_to :monster
    belongs_to :monster
end

Oops! Our Fight model has 'belongs_to :monster' twice? That doesn't make sense.

Remember we called them challengers and defenders instead of using monster twice, so let's fix that.

class Fight < ApplicationRecord
    belongs_to :challenger, class_name: "Monster"
    belongs_to :defender, class_name: "Monster"
end

We changed monsters to the names that helped differeniate them, but then we had to tell the model what the true class name is (in this case it's Monster) so it can find the appropriate table.

So now we need to clear up our Monster class. You can't just say has_many :fights because ActiveRecord is going to look for monster_id in the fights table and that foreign key doesn't exist. So let's tell the Monster model what to look for.

(another spoiler: not quite working yet)

class Monster < ApplicationRecord
    has_many :fights, foreign_key: :challenger_id, class_name: "Fight" 
    has_many :defenders, through: :fights

    has_many :fights, foreign_key: :defender_id, class_name: "Fight"
    has_many :challengers, through: :fights
end

I told the model to use the foreign_key challenger_id and defender_id respectively so it knew where to look. But now the has_many, through: relationship has hit a snag. Which foreign key are we using when we say through: :fights ? It's confusing! We need to distinguish our two fights relationships with unique names too. That works just it did in our Fights model

class Monster < ApplicationRecord
    has_many :fights_challenged, foreign_key: :challenger_id, class_name: "Fight" 
    has_many :defenders, through: :fights_challenged

    has_many :fights_defended, foreign_key: :defender_id, class_name: "Fight"
    has_many :challengers, through: :fights_defended
end

Phew. That should work. Here's the final product all put together:

class Monster < ApplicationRecord
    has_many :fights_challenged, foreign_key: :challenger_id, class_name: "Fight" 
    has_many :defenders, through: :fights_challenged

    has_many :fights_defended, foreign_key: :defender_id, class_name: "Fight"
    has_many :challengers, through: :fights_defended
end

class Fight < ApplicationRecord
    belongs_to :challenger, class_name: "Monster"
    belongs_to :defender, class_name: "Monster"
end

Now I can set up Godzilla and King Kong to fight. They can't wait to take advantage of this self-join!!

DRY-ing up code with some Helper Methods

kevhines — Sat, 03 Apr 2021 00:35:07 +0000

Here is some recent work I did DRY-ing up my code. I had these two methods in one of my controllers.

class FightsController < ApplicationController
def new
        @monster = Monster.find_by(id: params[:monster_id])
        if my_monster?(@monster) 
            @fight = @monster.fights_challenged.build
            @monsters = Monster.others(@monster.id)
        else
            @fight = @monster.fights_defended.build
            @monsters = current_user.monsters
        end
    end

def create
        @monster = Monster.find_by(id: params[:monster_id])
        if my_monster?(@monster) 
            @fight = @monster.fights_challenged.build(fight_params)
            @monsters = Monster.others(@monster.id)
        else
            @fight = @monster.fights_defended.build(fight_params)
            @monsters = current_user.monsters
        end

        if @fight.save
            @fight.attack
            redirect_to monster_path(@monster)
        else
            flash[:alert] = @fight.errors.full_messages
            render :new
        end
    end 
end

This is for a web app that allows you to create monsters and have them fight each other. When you visited a monster's page the code would determine if it was your monster. If it was you could choose from a drop down and pick a different monster to fight (Meaning it gave you a list of every monster, except the one whose page you were on). If it wasn't your monster you could choose from a drop down of which of YOUR monster's you'd like to send to fight the one you are viewing (So in this case you got a list of every monster that your account was associated with).

So the code did a couple of things. It determined if you were visiting your monster or not, then it built a list of monsters, and built the appropriate fight object. It's a lot of code, and much of it repeats in both actions. So I needed to create some helper methods so that I only had the same code written once.

First off I removed the line of code that determined which monster's page you were nested on.

 before_action :get_monsters, only: [:new, :create]

    def set_monster
        @monster = Monster.find_by(id: params[:monster_id])
    end

That's one line of code removed. Next was the trickier part. I had to create a helper method out of the large chunk of code that generated the list of monsters and created the appropriate fight objects. The only difference between the two similar chunks of code was that the create action took in parameters. So when I placed the code in a helper method I needed logic to decide if I was on a create action or a new action.

This is what I came up with:

before_action :get_monsters, only: [:new, :create]

      def get_monsters
        if my_monster?(@monster) 
            @fight = if_challenger
            @monsters = Monster.others(@monster.id)
        else
            @fight = if_defender
            @monsters = current_user.monsters
        end
      end

     def if_challenger
         if params[:action] == "new"
             @monster.fights_challenged.build
         else
             @monster.fights_challenged.build(fight_params)
         end
     end

     def if_defender
         if params[:action] == "new"
             @monster.fights_defended.build
         else
             @monster.fights_defended.build(fight_params)
         end
     end

So now, both my original actions (new and create) called get_monsters which in turn decided if they needed to call if_challenger or if_defender.

Except if_challenger and if_defender looked very similar. Was there a way to make that one method instead of two so I could cut down on even more repeated code? There was, but it involved using the send method.

The send method takes a number of arguments. The first one it assumes is a method, and the rest are it's parameters. Here is what it would look like if I used a send method to dynamically create a setter method:

self.send("#{method}=", value) #is the same as: self.method= value

So, the one part that was different in the two methods had to be supplied to the send method. That means I had a variable that would be either "fights_challenged" or "fights_defended"

So I replaced is_challenger and is_defender with build_fight that made use of the send method, like this:

    def get_monsters
        if my_monster?(@monster) 
            @fight = build_fight("fights_challenged")
            @monsters = Monster.others(@monster.id)
        else
            @fight = build_fight("fights_defended")
            @monsters = current_user.monsters
        end
    end

    def build_fight(arg)
        if params[:action] == "new"
            @monster.send(arg).build
        else
            @monster.send(arg).build(fight_params)
        end
    end

Let's talk through this one more time. When get_monsters is called the method determines if it is nested in your monster's page or not. Then it builds the appropriate monsters array. And to prepare a form on the app it calls build_fight(arg). This second method checks the params[:action] to see what action the user is currently on and then uses the arg to build the @fight object dynamically.

The send method makes your code a bit trickier to read compared to most of ruby's eye friendly language, but it's very powerful in it's ability to work with changing arguments.

Validated by Built in Validations

kevhines — Fri, 05 Mar 2021 20:13:31 +0000

Working on a simple Sinatra MVC app for my Flatiron Project I needed to validate a number of fields. It was so easy thanks to the many built in validation methods inherited from ActiveRecord.

My project is a webpage that allows a user to create a character, and then enter equipment held by that character and/or notes about the campaign. (Both notes and equipment can be marked as private, otherwise they are all visible to all users)

Password Validation

The first validation I needed was to make sure the user entered a password. (for this simple project I don't require any additional rules on the password, so you can finally use your favorite password: 12345).

This validation is easy because of the bcrypt gem. In my User model I just entered the macro: has_secure_password. This encrypts the password and also requires the user to enter one on sign up. It also helps with authentication later on.

class User < ActiveRecord::Base
    has_many :notes
    has_many :goods
    has_secure_password
end

Picky UserName Validations

But I had other requirements. I didn't want UserNames to have spaces in them or to have special characters. They aren't ever seen and I wanted to keep them simple.

First I required the presence of username with this macro.

validates :username, presence: true

Alternatively, I could have also written it like this:

validates_presence_of :username

But as I mentioned I wanted to keep spaces and special characters out of my user name. So I used the first version because it took in more attributes for validation. To keep out spaces and special characters I used the format attribute. With a little help from a regular expression it looked like this:

validates :username, presence: true, format: { with: /\A\w+\z/, message: "doesn't allow spaces or special characters" }

In addition I didn't want users to have the same usernames, so I needed to make sure they were unique. Just to be extra clear I didn't want users to have usernames that were identical except for different cases (ex. User1: Texas -- User2: texas). Both of these could be checked with the validation helper which has a case_sensitive attribute.

So my final validation was:

class User < ActiveRecord::Base
    has_many :notes
    has_many :goods
    has_secure_password
    validates :username, presence: true, format: { with: /\A\w+\z/, message: "doesn't allow spaces or special characters" }, uniqueness: { case_sensitive: false }
end

More Validations

Great. Now let's make sure that when users create notes they don't save blank content.

class Note < ActiveRecord::Base
    belongs_to :user
    validates :content, presence: true
end

Easy. Now let's do the same for my equipment page.

class Good < ActiveRecord::Base
    belongs_to :user
    validates :name, :quantity, presence: true
end

Oh wait. I don't want people entering non-numbers for quantity. I don't do any calculations with that value but it just wouldn't make sense. In fact I don't want decimals either. No one carries 1.3 swords. So let's use another built in validation macro.

class Good < ActiveRecord::Base
    belongs_to :user
    validates :name, :quantity, presence: true
    validates_numericality_of :quantity, only_integer: true
end

These are so easy. Now my code just has to grab the error messages and send them to the user so they know why their Equipment, Note or Signup didn't save.

Saved by a Class Variable

kevhines — Fri, 05 Feb 2021 17:51:47 +0000

When working on a ruby application that doesn't connect to a database you'll need to store some critical data in Class Variables. Class Variables are available to the entire Class as well as any Instance of the Class. That's pretty useful.

Instance Variables are only available to the Instance they were set in.

And local variables can only be accessed in the local environment where they were created (for example in a method).

Don't Overuse Class and Instance Variables

It can be an easy mistake just to make everything an Instance or Class variable. One might think, "I won't need this info outside this method, but what's the harm?"

Well, a lot. The data you need in one method might get changed by another. So you'll believe a variable is empty but it's gotten a value from somewhere else. You'll need to be extra careful with names of variables. And it just forces some unnecessary storage of information. Once that method is over it's better just to forget that variable. Let your code focus on something else.

Using a Class Variable when you meant to use an Instance Variable (or worse, a local variable) is exponentially worse. Now every instance is effecting your variable when you only need it in one place to do one job.

Good Use of Class Variables

So as I got further along in learning to code in Ruby I got into the habit of only using Class Variables to store all the Instances of an object. You know, like this.

@@all = []

def initialize
  @@all << self
end

This way later on I can access that list by another object. Even then I have to ask myself, will I ever need that list? In a non-database program the answer is probably.

Once I have written that little bit of code Class Variables are out of my mind.

Houston, We Have a Problem

I was working on a CLI program that interfaced with a free NASA API to give a list of asteroids that would be flying by Earth on a given day.

You could then choose from that list and find out when that asteroid will return to Earth. Maybe you check what asteroids are flying by on the day your child was born and then you want to see when the biggest asteroid (or the one that came closest to Earth) will return. It's basically a celestial anniversary of a very special day.

Everything was working pretty well except when a user opted to search the same date twice. My program creates a new object for each asteroid passing Earth (I call that object Asteroid) and then also creates objects for each Pass itself (asteroids are orbiting so they can pass by again and again). When I searched a date twice I'd just create doubles for each Pass and Asteroid.

Initially I solved this problem pretty elegantly. I just checked my @@all variable for any passes on that day. I assumed that if I stored one pass for the day in question then I had already grabbed all the data for that date from NASA's API.

That assumption, as they often are, is wrong. You see if a user looked up an asteroid to find it's next visit they will create a single pass on a future date. What if the user decides to see what other asteroids pass by on that same date?

So for example: I get a list of all the asteroids from the day my fictional friend Zane was born. I see that asteroid 2011 QF3 (that rolls off the tongue) was the biggest one in the sky that day. I check and see that it's coming back on March 29, 2030. Fun! Now let's see what other asteroids are flying by on that day. Well my code pulls that API and finds 6 asteroids coming on that day. I create those 6 Asteroids and their 6 Passes. But one of those Asteroids (2011 QF3) I have already created. And I even created it's Pass for that date. Now my data is getting corrupted with duplicates.

I tried numerous ways to check my @@all variable for Pass and Asteroid to stop this from happening, but the only solution I could find was after I hit the API checking that data against other instances. That seemed a wasteful hit of the API when it might not be necessary.

Saved by the Bel

I talked to my instructor, Annabel, about this issue and my desire to not have to wait until after I checked the API before I checked for doubles. She looked at my code for a few moments, saw the issue and noted that my class all variable won't work so I needed to create...

Before she even finished that sentence I realized what I needed to do. Create a second class variable. In my fear of over-using class and instance variables I didn't even consider the solution.

Talking to Annabel reminded me that this is what class variables are for! I created a new class variables that just kept track of dates I had hit the API for. By checking "@@all_searches" before hitting my API I could determine if I had created all the Passes and Asteroids for that day already. If I had, I could skip the API step and just search for the objects from my class variable "@@all" .

The same solution solved my creating a second Pass object if I searched for an asteroid's second visit twice. I created "@@next_visitation" so I knew if I had already called NASA's API for an asteroid's next visit. When the user asks for the next time an asteroid visits I don't know the date (yet). I only have the Asteroid Object. I know the next pass is in the future but there might be passes stored in our "@@all" variable that are actually the third, fourth or any number of later visits that this asteroid will next make to Earth so I need to definitively know I have that pass before I can trust the data in my "@@all" class variable.

@@all = []
@@all_searches = []
@@next_visitation = []

def initialize (search_type, pass_hash)
  #code here stores the data for the Pass - not relevant to this post.
  @@all << self
  @@all_searches << self.pass_date if search_type == "date_search"
  @@next_visitation << self.asteroid if search_type == "next_visit"
end

Conclusion

Know when to use Class Variables and Instance Variables instead of just avoiding them. If you close off an option because of inherent misuse you might be closing yourself off to he solution to your problem.

A Return to Software Engineering

kevhines — Fri, 22 Jan 2021 15:52:52 +0000

The question for me isn’t why I decided to study Software Engineering, but why I came back, because I’ve been here before.

In 1997 when I was getting ready to graduate with my Bachelor of Science in Chemical Engineering I knew I wasn’t going to be working in Chemical Engineering. Even before I graduated I found myself more interested in my programming electives. It felt more tactile, more real, more fun. Building a program felt similar to how I’d imagine building a house or car might feel (I might never know since I struggle to even hammer a nail in straight). The code encompassed a series of small programs that when combined could do so much more. When a program that I wrote ran successfully I truly understood it. When it didn’t run I knew the answer was waiting for me.

So after graduation I got a series of jobs that involved various levels of programming. Somehow by 2010 I had gradually slipped away from that track and found myself teaching improv and sketch at the UCB Theater in NY and that led me to running their school. This wasn’t something I ever studied or aimed for but I was the best fit for the job at the time and so there I was. I always knew, long term, I couldn’t stay there but one year followed another and the people I worked with were nice so I stayed. I always knew I’d step away and return to programming someday. Covid-19 got me to take that step.

It didn’t take me long after the pandemic started to decide what I wanted to do to get back to programming. It had been 10 years away and I had never formally studied programming. A few electives in college and then a lot of jobs where I self-taught (or learned under a co-worker) helped me work in PASCAL, ColdFusion, Perl, PHP, SQL, with the necessary HTML and a basic understanding of JavaScript and a dollop of CSS. But 10 years in the programming landscape is an eternity and I knew I needed to get a handle on object orientation, dynamic web pages, and newer languages. I knew I needed to get better at writing code that read clearer, code that was simple and functioned better. So I decided to take the time and learn it right.

Now I am at Flatiron, I finished all the prep work Flatiron offered before day 1 of my class and now am finishing up the first mile at their full time program. I have already refreshed old skills, learned new skills, and gotten stronger as a programmer. I am excited to continue to grow and learn as I finish the program, and am excited for where this takes me next.

Forem: kevhines

Background: Updating a Dice Rolling App

Background: Role Playing Games and Dice

More Background: Rolling

Background: a new game

Algorithms: Spotting Resource Hogs

Fibonacci

Searching for Anagrams

Yeah, but what's the solution?

A Second Pointer

Unoptimized

Somewhere (i.e. Optimization!)

Conclusion

Triggering an Error Modal in React

It all starts when you get an error

Redux Store and The Reducer

The Modal

Clear the error message

Conclusion

Using LocalStorage with React

First: Look at your REDUX Store

Second: Set up props on a component

Third: Use Lifecycle Methods and localStorage

Finally: Let's deal with Users who Refresh the page!

Was this a good idea: NO! but also Yes!

Kill Your Darlings...

Let's look back

Not so Clever

That Javascript has (extended) class!

A Simple Class

Extending and Using super

Another Extended Class

3 Uniquely Similar Objects!

Two Tables Become Three

DRY-ing up code with some Helper Methods

Validated by Built in Validations

Password Validation

Picky UserName Validations

More Validations

Further Reading

Saved by a Class Variable

Don't Overuse Class and Instance Variables

Good Use of Class Variables

Houston, We Have a Problem

Saved by the Bel

Conclusion

A Return to Software Engineering