DEV Community: isabel k.

Launching Winner Winner, Chicken Dinner! 🐔⚡️

isabel k. — Sat, 12 Sep 2020 18:06:25 +0000

App launch

Last week, I launched a random name picker app called Winner Winner, Chicken Dinner! It's a lightweight React app where you can create a list of names or objects, and spin the wheel to display a random item each time.

How does it work?

You can create a new list with the ability to edit it and delete it.
Every time you spin the wheel, the app will choose a random item to display.
Once you've gone through your whole list, you can go back to your list.
As long as you don't clear your browser cookies, you can always access your most recent list!

Some programming quirks

Feeling the pain of regex

I'm not a huge fan of using regex (which stands for "regular expression"), so it was a bit of a pain to format the user's input into an array and then back into a string. I'm still figuring out the best way to deal with edge cases – like, what do I do if the user doesn't follow my instructions on how to enter their list? What if they use line breaks instead of commas to separate their list items?

  // regex logic for turning the user's input into an array
  formatStringToArr = (string) => { 
    return string.replace( /[\r\n]+/gm, ", " ).split(", ")
  }

  // taking the new array, randomizing the order by using the chance dependency, and then turning into a string again to save it to localStorage
  formatLocalStorage = () => {
  let peopleArray = this.formatStringToArr(localStorage.people)
  peopleArray = chance.shuffle(peopleArray)
  localStorage.setItem("people", peopleArray.join(", "))

  this.setState({
    array: peopleArray
  })
}

State management

I initially used Redux for global state management and stored the backend data in a db.json file. I quickly gave up on this idea when I realized that it would be overkill. Instead, I ended up refactoring my app to get and set the user's data with localStorage!

  // saving the user's input to the local state
  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  // saving the local state to localStorage and then redirecting the user to their new list page!
  handleSubmit = (event) => {
    event.preventDefault()
    localStorage.setItem("title", this.state.title)
    localStorage.setItem("people", this.state.people)
    this.props.history.push("/list")
  }

To auth or not to auth?

I also wanted to avoid implementing authentication – it seemed more accessible to allow the users to quickly create a list and play around with it, rather than forcing them to sign up before they could access any of the features. With the freedom of not needing to build auth, I started to brainstorm how I could structure the app without a backend API.

The story behind Winner Winner

As a software engineering coach at Flatiron School, I lead several meetings a week where I have to pick on students to participate. We usually do a popcorn-style rotation where the person who just participated picks the next person to go. But with 25 students and 4 instructors in the class, it can be tedious taking account of who's already gone and who's still left.

I took this as a chance to create a fun, light tool that would be useful for teachers, managers, and anyone else who needs a randomized list!

One of my goals this year is also to become a stronger frontend developer and familiarize myself more with different JavaScript frameworks. I love working with React, so I decided to give myself the goal of creating this app within a couple weeks. Winner Winner, Chicken Dinner! is built using React and styled components.

Conclusion

Thanks for stopping by, and please make sure to check out Winner Winner, Chicken Dinner! It's also on Product Hunt if you want to give it an upvote. 💓

A Beginner's Guide to Git + GitHub

isabel k. — Tue, 28 Jul 2020 18:25:47 +0000

Terminology

Repository

A directory or folder where your code lives.

Remote

The version of your repository that lives on GitHub's servers and is accessible to anyone with an internet connection. If you have a private repository, other people won't be able to access your code, but you can still access it from different machines.

Local

The version of your repository that lives on your computer. This may or may not be the same as your remote repository, as it depends on the last time you pushed up to GitHub or pulled down from it.

Fork

Forking a repository makes a copy of it and houses it on your GitHub account. For example, if I forked Sylwia's project called sylwia/dismantle-the-patriarchy, it would create a new repository on my account, as isabelxklee/dismantle-the-patriarchy

Clone

Cloning a repository does not make a copy, but instead allows you to directly download the repository on to your local machine.

Commands

git add

Adds any files that have been changed to git's staging zone so that it is ready to be committed. Think of it as adding a tracker to your file, so that git knows what has changed or been updated.

git commit

Saves a snapshot of your work. It's like a checkpoint that you can always revert back to. All commits are accessible on your repository and you can see the exact changes that were made.

git push

Sends all of your commits to GitHub so that your work isn't just living on your local machine. This command updates your remote repository to match your local one.

git pull

Updates your local machine with any changes that have been made to your repository in other places. For example, if you're working with a partner, git pull will update your local repository with any changes that your partner has pushed up to GitHub.

git remote -v

Allows you to see all the remote repositories that are tracking this branch of code.

git status

Shows you if there are any differences between the local and remote repositories; any files that have been changed, but not tracked with git add yet; and any files that have been committed, but not pushed up.

Example:

~/Development/dev-blog-posts // ♥ > git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
    modified:   beginners_guide_to_git.md

git branch

Shows you all the existing branches in the repository.

Example:

~/Development/dev-blog-posts // ♥ > git branch
  * master
  refactor

git branch -d

Deletes a branch from your repository.

Example:

~/Development/dev-blog-posts // ♥ > git branch -d refactor
  Deleted branch refactor (was ed6cd03).

git checkout -b

Creates a new branch.

Example:

~/Development/dev-blog-posts // ♥ > git checkout -b refactor
  Switched to a new branch 'refactor'

git checkout

Switches to a different branch.

git merge

Merges two branches together. If there are differences in the code between the branches, there will be a merge conflict.

Sources

Git Documentation: https://git-scm.com
How Git and GitHub can make your life easier: https://medium.com/swlh/how-git-and-github-can-make-your-life-easier-2ff5b9e1f6f1

Suggestions

Let me know in the comments if there are any other terms or commands that that you'd like to see covered! :~)

Understanding Inverse Data Flow in React 💃🏻

isabel k. — Sun, 12 Jul 2020 00:18:41 +0000

What is inverse data flow?

In React, inverse data flow allows us to send data between parent and child components as props, or properties. However, components that are cousins or siblings cannot directly communicate with each other.

Sharing data between parent and child components

Here's an example of inverse data flow between a parent component and a child component. Let's say we're building an app that allows users to create accounts by entering their email addresses.



class Home extends React.Component {
  state = {
    email_address: ""
  }

  handleChange = (inputFromChild) => {
    this.setState({
      email_address: inputFromChild
    })
  }

  handleResponse = (event) => {
    event.preventDefault()
    console.log("Something has been done.")
  }

  render () {
    return (
      <CreateAccountForm
        handleChange={this.handleChange}
        handleResponse={this.handleResponse}/>

      <AccountSettings
        handleChange={this.handleChange}
        handleResponse={this.handleResponse}/>
    )
  }
}

In our Home component, we're defining the handleChange() and handleResponse() functions and then sending them down as props to its child components, CreateAccountForm and AccountSettings. The information inputted by the user in these child components is then sent back up to the parent component by invoking those very same functions. This allows us to "reuse" these functions without having to copy and paste the same code in both of the child components.

If we didn't use props, here's what our components might look like:



class Home extends React.Component {
  state = {
    email_address: ""
  }

  render () {
    return (
      <CreateAccountForm />
      <AccountSettings />
    )
  }
}

class CreateAccountForm extends React.Component {
  handleChange = (inputFromChild) => {
    this.setState({
      email_address: inputFromChild
    })
  }

  handleResponse = (event) => {
    event.preventDefault()
    console.log("Something has been done.")
  }

  render () {
    return (
      <div>
        <form onSubmit={this.handleResponse}>
          <label>Email Address: </label>
          <input type="text" name="email_address" onChange={this.handleChange} />
          <input type="submit" value="Create Account" />
        </form>

      </div>
    )
  }
}

class AccountSettings extends React.Component {
  handleChange = (inputFromChild) => {
    this.setState({
      email_address: inputFromChild
    })
  }

  handleResponse = (event) => {
    event.preventDefault()
    console.log("Something has been done.")
  }

  render () {
    return (
      <div>
        <form onSubmit={this.handleResponse}>
          <label>Email Address: </label>
          <input type="text" name="email_address" onChange={this.handleChange} />
          <input type="submit" value="Create Account" />
        </form>

      </div>
    )
  }
}

This isn't very DRY, is it? It also makes things complicated if we want to update the handleChange() and handleReponse() functions in both places. Placing those two functions in the Home component and sending it down to its child components creates a single source of truth.

Limitations of inverse data flow

While inverse data flow is great for writing DRYer code, it can sometimes be too restrictive. For example, components that do not have a direct parent or child relationship cannot share props with each other.

If we wrote a function called toggleFormVisibility() in our CreateAccountForm component, and we wanted to use it in our AccountSettings component, it would be not be available as a prop. In order to create access to that function, we would have to send it back up to the parent and back down to AccountSettings.



class CreateAccountForm extends React.Component {
  state = {
    displayForm: false
  }

  toggleFormVisibility = () => {
    this.setState({
      displayForm: !this.state.displayform
    })
  }

  render () {
    return (
      <div>
        <button onClick={this.toggleFormVisibility}>Show the form</button>

        <form onSubmit={this.props.handleResponse}>
          <label>Email Address: </label>
          <input type="text" name="email_address" onChange={this.props.handleChange} />
          <input type="submit" value="Create Account" />
        </form>

      </div>
    )
  }
}

This process of sharing data can become quite cumbersome and confusing to follow if there are several components with complex relationships.

Summary

1) Define the function in the parent component.



class Home extends React.Component {
  state = {
    email_address: ""
  }

  handleChange = (inputFromChild) => {
    this.setState({
      email_address: inputFromChild
    })
  }

  render () {
    return (
      <CreateAccountForm />
      <AccountSettings />
    )
  }
}

2) Send down the function as props to the child component.



class Home extends React.Component {
  ...

  render () {
    return (
      <CreateAccountForm handleChange={this.handleChange} />
      <AccountSettings handleChange={this.handleChange} />
    )
  }
}

3) Invoke the function in the child.
4) Send data back up to the parent as props.



class CreateAccountForm extends React.Component {
  render () {
    return (
      <div>
        <form>
          <label>Email Address: </label>
          <input type="text" name="email_address" onChange={this.props.handleChange} />
          <input type="submit" value="Create Account" />
        </form>

      </div>
    )
  }
}

5) Voila! You've just created inverse data flow.

Solving the Digital Root Algorithm using JavaScript

isabel k. — Sun, 17 May 2020 03:45:48 +0000

One of my favorite algorithms is finding the digital root of any given integer. A digital root is a single-digit sum that is reached when you iteratively add up the digits that make up a number.

For example:

666
=> 6 + 6 + 6
=> 18
=> 1 + 8 
=> 9

The key to solving this algorithm is to use an iterative method. The solution has to be smart enough to keep executing as long as the returned sum is higher than a single-digit number.

The approach

If our given integer is greater than 9, iterate through each digit in the number.
Add up each digit.
Assess if the sum is a single-digit number.
If not, go back to Step 1.

Let's break it down

1) Create a variable for the sum. Set it to equal the given integer. If this integer is a single-digit number, we'll return it at the very end without mutating it.

function digitalRoot(number) {
   let sum = number
}

2) Write a conditional statement to execute something on the sum if it's a multi-digit number.

function digitalRoot(number) {
   let sum = number
   if (sum > 9) {
      // execute something here
   }
}

3) If the number is greater than 9, turn it into an array so that we can loop through it. In JavaScript, we have to turn the integer into a string, and then call the split() method on it to achieve this.

function digitalRoot(number) {
   let sum = number
   let arr = []

   if (sum > 9) {
      arr = sum.toString().split("")
      console.log(arr) 
   }
}

digitalRoot(24)
=> ["2", "4"]

4) Now let's iterate through the array and sum its elements. We can use the reduce() method for this. reduce() requires a reducer method to execute on, so let's write the logic for it and pass it into reduce(). Inside the reducer method, convert the values into an integer by wrapping each value in parseInt. Since this method will return a single value, we can reassign it to our sum variable.

function digitalRoot(number) {
   let sum = number
   let arr = []
   let reducer = (a,b) => parseInt(a) + parseInt(b)

   if (sum > 9) {
      arr = sum.toString().split("")
      sum = arr.reduce(reducer)
      console.log(sum) 
   }
}

digitalRoot(24)
=> 6

Et voilà! We've solved the algorithm!
...Just kidding. It totally breaks if we pass in any larger numbers.

digitalRoot(666)
=> 18

So how can we keep executing our function while the sum is a multi-digit number?

5) Instead of a conditional if statement, let's use a while loop. The while loop will run while a condition is true, whereas an if statement will just execute once. Let's also move our console.log statement to the end of the function, outside of the loop, so that it only returns a single value.

function digitalRoot(number) {
   let sum = number
   let arr = []
   let reducer = (a,b) => parseInt(a) + parseInt(b)

   while (sum > 9) {
      arr = sum.toString().split("")
      sum = arr.reduce(reducer)
   }

   console.log(sum) 
}

digitalRoot(666)
=> 9

Conclusion

This is one of my favorite algorithms because it's not the most difficult to solve, but still poses an interesting problem. Sound off in the comments if you have a different way of solving this!

Edits made after publishing

Changed the wording in this article because I originally talked about using a recursive solution, but ended up writing just an iterative one. Thanks for all the comments! ✨

How to Loop Through an HTMLCollection

isabel k. — Thu, 14 May 2020 18:44:44 +0000

If you've ever written a frontend application in JavaScript, you've probably run into HTMLCollections.

I recently deployed Plant Flashcards, a full-stack application where you can learn about plant facts and test your knowledge. I used a vanilla JavaScript for the frontend and a homegrown Rails API for the backend! Interacting with JSON objects and trying to manipulate elements on the DOM made me realize that HTMLCollections were very different from plain ole, regular Arrays.

HTMLCollections are array-like objects that return HTML elements on the DOM. Unlike regular Arrays, they’re “live” objects, so they’ll change automatically depending on the contents of the DOM.

Let's dive in

Here's an example of a variable that will return an HTMLCollection. In this line of code, we're pulling all the elements from the document object that have the class name plant. We're then assigning it to a variable called plantsArray.



let plantsArray = document.getElementsByClassName("plant")

And here's what plantsArray might look like when logged to the console:

The difference between HTMLCollections and Arrays

Out of all the CRUD (Create, Read, Update, Delete) operations, HTMLCollections are mainly used for reading elements. They’re not meant for DOM manipulation because they're live objects. Arrays, on the other hand, can be easily mutated.

HTMLCollections also have different built-in properties and methods than Arrays.

See what happens when we try to access the individual elements in an HTMLCollection like we would with an Array.



plantsArray.forEach((plant) => {
   console.log(plant)
})

=> TypeError: plantsArray.forEach is not a function

Trying to run a .forEach() method on plantsArray gives us a TypeError. HTMLCollections may look like Arrays and are also technically a list of objects, but they are fundamentally different.

How to loop through an HTMLCollection

1) If we want to be able to use the .forEach() method, we can turn the HTMLCollection into an Array, then call the method on it.



Array.from(plantsArray).forEach((plant) => {
   console.log(plant.name)
})

=> "Monstera", "ZZ Plant", "Snake Plant"

2) Run a for/of loop.



for (plant of plantsArray) {
   console.log(plant.name)
}

=> "Monstera", "ZZ Plant", "Snake Plant"

3) Run a for loop.



for (i = 0; i < plantsArray.length; i++) {

   console.log(plantsArray[i].name)

}

=> "Monstera", "ZZ Plant", "Snake Plant"

Conclusion

Get comfortable interacting with HTMLCollections and their unique properties and methods!

Sources

Geeks for Geeks
Stack Overflow discussion
Pawel Grzybek's blog
Hacker Noon