DEV Community: Lori "Lei" Boyd

Rest Parameters and Spread Operators in Javascript

Lori "Lei" Boyd — Mon, 06 Jul 2020 02:28:36 +0000

Javascript has a functionality where depending on where it's used, ... can either be a rest parameter or a spread operator.

Spread Operators

spread operators allow an iterable object like an array to be expanded, unpacking each element from the array.

let fourToSix = ['four', 'five', 'six']
let numbers = ['one', 'two', 'three', ...fourToSix ]

=> ["one", "two", "three", "four", "five", "six"]

Rest Parameters

A rest parameter will bundle up all remaining elements in a parameter into an array.

const greetings = (friend, ...everyoneElse ) => {
  console.log(`Hello, ${friend}!`)
  everyoneElse.forEach(person => console.log(`Nice to meet you, ${person}!`))
}

greetings('Lei', 'Cierra', 'Aiden', 'Pierre', 'Miranda')

=> Hello, Lei!
=> Nice to meet you, Cierra!
=> Nice to meet you, Aiden!
=> Nice to meet you, Pierre!
=> Nice to meet you, Miranda!

My Minimal Linux Setup 2020

Lori "Lei" Boyd — Tue, 30 Jun 2020 07:44:20 +0000

My preferred Os of choice is Linux, and with that, I often spend quite a lot of time setting up my environment. After 'distro' hopping, PopOS is my distro of choice. My bare minimum includes:
. Git
. Node & npm
. Ruby & rails via RVM(version manager for all things ruby)
. SQLite
. Atom text editor

Installations

This installation guide assumes you are using a Debian/Ubuntu-based Linux distro.

before you start it's helpful to update your package information and do any necessary upgrades.

$ sudo apt-get update
$ sudo apt-get upgrade

Git

Installing Git is as simple as running the install command and setting up your global user.

apt-get install git

To configure your profile run the following:

$ git config --global user.name "John Doe"
$ git config --global user.email "johndoe@example.com"

Next, you can generate a new SSH key for authentication with this guide.
You can follow this guide to add the new SSH key to your account.

Node & NPM

To keep this setup minimal, I'll be installing the distro-stable versions for Ubuntu. Run

$ sudo apt install nodejs

and

$ sudo apt install npm

.

RVM (Ruby & Rails)

RVM's official installation guide is the best source to use when installing RVM. It even offers a few diffent install options.
After installing GPG keys with this:

gpg --keyserver hkp://pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

You can choose any of the basic installs. I go for the "Poor man's Rails installer"

\curl -sSL https://get.rvm.io | bash -s stable --rails

\curl -sSL https://get.rvm.io | bash -s stable --ruby

This installs the latest stable version of Ruby and Rails.
After everything is finished installing, restart your terminal.

Sqlite

Check to see if you currently have Sqlite installed with $ sqlite3 ---version
If you don't get a version number, install it with $ sudo apt install sqlite3

Text Editor

The default text editors don't usually do it for me so I'll end up installing Atom instead.

Infinite Loops Inside useEffect

Lori "Lei" Boyd — Sat, 20 Jun 2020 16:47:00 +0000

Recently, I came across a bug when using the useEffect hook. I intended to utilize the functionality of the lifecycle method componentDidMount, but useEffect doesn't work precisely the same way.

The Bug

useEffect(()=> {
  fetch("http://localhost:3000/categories")
    .then(resp => resp.json())
    .then(categoriesArray => {
       this.setState({
         categories: categoriesArray
       })
    })
})

Whenever we ran the application, the fetch was successful but continued to fetch infinitely.

The Solution

After a few minutes of google searching the problem, we came across a StackOverflow post that gave us a simple solution.

useEffect(()=> {
  fetch("http://localhost:3000/categories")
    .then(resp => resp.json())
    .then(categoriesArray => {
       this.setState({
         categories: categoriesArray
       })
    })
},[])

A user suggested that adding empty brackets as a second argument will fix the infinite fetching.

A Bit About useEffect

useEffect lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. To put it simply, useEffect is like a combination of componentDidMount, componentWillUnmount, and componentDidUpdate.

So what's happening when we run our broken code? When the component first renders and mounts, the fetch is called and then sets the state for categories that cause the component to render again. This blog post that Andrew Myint wrote explains this pretty well.

The second argument will tell useEffect not to render unless the said variable changed between renders. Andrew Myint's post uses a variable inside brackets as the second argument. I think the empty brackets also work because there is no trigger to run useEffect again, it'll run only once, after the component mounts.

Setting Up Git Organizations

Lori "Lei" Boyd — Sun, 14 Jun 2020 07:08:53 +0000

This week I learned about a feature that GitHub offers that I completely ignored. Usually, when I collaborate with other devs on a project, I'll have an app like Trello to keep track of workflow. Github Projects are a great way to manage workflow and delegate tasks while keeping all your tools in one place.

The Set-Up

Creating a new project is as easy as clicking on "New Project" from the + dropdown menu. You'll be greeted with basic input fields as well as a template menu.

None - Start from scratch
Basic Kanban - Starts with a column for To-Do, In Progress, and Done
Automated kanban - Same as Kanban and includes built-in triggers to move pull requests and issues across the columns
But Triage - Prioritizes bugs with To-Do, High Priority, Low Priority, and Closed columns

I haven't used the pull request or issue feature, so basic kanban is my template of choice.

Workflow

In addition to creating cards and moving them to the appropriate location, every card can be converted into an issue. Issues are useful because you can delegate issues to your team like so.

Conclusion

There are so many cool technologies and tools to discover. Sometimes learning the tech and tools that you already have on a deeper level can boost your productivity and simplify your workflow.

Navigating in React Native

Lori "Lei" Boyd — Sat, 06 Jun 2020 23:56:24 +0000

The next project I will be working on will be to convert the Subway Times web app into a React Native application. Besides the initial set up, the first thing I want to do is work on navigation.

Why We Need Navigation

Navigating through a web page is done by interacting with the browser or through links. Mobile apps typically have a bar on the top or bottom of the screen that renders a screen depending on which button is pressed. React handles this with navigator components. A few of the most used navigation libraries are React Navigation and React Native Navigation.

For the Subway Times project, I will be using React Navigation. The app will be structured like so.

The app.js file will contain a drawer navigator that will list buttons that render different screens, search, lines, and Starred Stops. Each screen will be the base of a stack.

Navigation Stack

An example of what a navigation stack does is when you are on an app like twitter and click on a tweet to see more information. A new screen renders, and a back arrow is displayed. The way this works is, as you visit screens, they get stacked on top of each other. The screen on top is what gets rendered. The back arrow pops whatever screen is on top off of the stack, and the previous screen will be right where you left off. Think of it like the screens are on a skewer.

Documentation

. React Navigation
. Drawer Navigation
. Stack Navigation

Fetching With Async/Await

Lori "Lei" Boyd — Sat, 30 May 2020 19:42:28 +0000

I was going through a refactoring phase in my last project and decided to tidy up my fetch requests. I have multiple functions that not only look similar, but they all are about 49 lines long.

handleClick = () => {
    // fetches arrivalTimes
    fetch(`https://subway-times-api.herokuapp.com/stops/${this.props.stop.id}`)
    .then(r => r.json())
    .then(data => {
      // fetch here
      fetch(`https://subway-times-api.herokuapp.com/lines/${data.lines[0].id}`)
      .then(r => r.json())
      .then((line) => {
        // diggs through feed to find the arrays with the arrival times
        let feed = line.feed.filter( obj => Object.keys(obj).includes("trip_update"))
        let includesStopTimeUpdate = feed.filter(obj => Object.keys(obj.trip_update).includes("stop_time_update"))
        let stopTimeUpdateArrays = includesStopTimeUpdate.map(obj => obj.trip_update.stop_time_update)
        let stopTimeArrays = stopTimeUpdateArrays.map(obj => obj.map(obj2 => obj2))

        let trainObjs = []

        // adds the objects with train arrival times and stop ids to "state"
        stopTimeArrays.map(obj => obj.map(obj2 => trainObjs.push(obj2)))

        let arrivalTimes = trainObjs.filter(obj => obj.stop_id.includes(this.props.stop.stop_id + this.props.direction.direction))
        let trainArrivalObjs = arrivalTimes.map(obj => {
          let trainTime = new Date( parseInt(obj.arrival.time) *1000);
          let timeNow = new Date()

          // setting hours and mins
          let trainHour = trainTime.getHours() > 12? trainTime.getHours() - 12 : trainTime.getHours()
          let trainMin = trainTime.getMinutes()
          let currentHour = timeNow.getHours() > 12? timeNow.getHours() - 12 : timeNow.getHours()
          let currentMin = timeNow.getMinutes()

          // if trainHour is > current hour add 60 mins to trainMin
          if (trainHour > currentHour) {
            trainMin += 60
          }

          // take hour and min of train time and subtract each from the current time, if result is negative return 0
          return trainMin - currentMin
        })

        // if train is due or has past remove
        const arrivals = trainArrivalObjs.filter(time => time >= 0)

        this.setState({
          renderStopInfo: !this.state.renderStopInfo,
          arrivals: arrivals
        })
      })
    })
  }

This function throws away the whole DRY rule, and it's time to fix that. I've decided to throw all the logic here into my backend, so when I fetch for a stop, I get back all uptown and downtown arrival times converted to hours and minutes. To further refactor, I've decided to use async and await to handle my fetch.

Async

Async is a keyword before a function, and when called, the function returns a promise.

async function hello() {
    return "Hello, World!"
}
console.log(hello()) => Promise {<resolved>: "Hello, World!"}

Await

The MDN docs state "This [await function] can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value. In the meantime, other code that may be waiting for a chance to execute gets to do so."

So instead of writing my event handlers like so:

fetch(API)
.then(response => responce.json())
.then(data => this.setState({apiObject: data})

I can write the same thing with async/await

async function fetchFromApi(api) {
  let response = await fetch(api)
  let apiObject = response.json()
  return apiobject
}

fetchFromApi(API).then((apiObject)) => { 
  this.setState({
    apiObject: responseObject 
  })
})

In my opinion, the later is a lot easier to read. Also, because It's reusable, I can just call on fetchFromApi with any URL.

What I Learned By Creating My First React Native App

Lori "Lei" Boyd — Fri, 22 May 2020 21:46:54 +0000

In my last post, I talked about how I began learning the Swift programming language. Since then, I've decided to hold off on that and learn a React Native instead. React is a framework that gives you the ability to write code for multiple platforms. Already knowing React makes React Native a no-brainer addition to my programming tool belt.

Diving in, I decided along the programming book route and purchased the book Practical React Native: Build Two Full Projects and One Full Game using React Native by Frank Zammetti. I got familiar with the basics of React Native reading through the first couple of chapters, but because technology evolves so rapidly and React Native is no exception, the examples in the book are outdated. I found myself unable to run any of the exercises. So I made my own!

I decided to make a tip calculator because I've already built one in Ruby. I started with making a Rails API that will handle all of the logic, so I can focus on the frontend and get used to fetching in React Native (this was a good idea, more on that later).

Because Frank Zammetti used Expo in his book, I decided to do the same. Expo is a framework and a platform for universal React applications. Expo is built on top of React Native, so consequently, it adds another layer of complexity. I like to think of it as the Ruby on rails of React Native. Convention over configuration. Expo has several templates for you to choose from. I chose the option with tabs to gain exposure to navigation.

Expo is quick and easy to set up. I found that getting my development code up and running on my devices was super easy. But that comes with some limitations. I experienced one while trying to debug my code. I wanted to post information to my database but kept getting an error. It turns out iOS and Android only allow HTTPS requests by default. Because I was running on a development server, the network request had to be HTTP. I found a workaround on StackOverflow, but it required access to an info.plist file, which Expo does not give you access. I ended up deploying my API on Heroku to use a secure URL. There are other limitations worth noting:

Not all iOS and Andriod APIs are available. If you want to include things like Bluetooth or In-App Purchases
Larger app size

Full list of limitations here.

For this application, Expo did the job wonderfully. Depending on the project, I might have to use create-react-app instead.

Here's a gif of the Tip Calculator.

One thing that stuck out to me was that the <ScrollView> component only works on iOS. When I boot the app on an Andriod device, any content that overflows is hidden and unreachable. That influenced most of the styling. Originally, You couldn't even see the 'Calculate Your Tip' button on the Android. The <FlatList> component is a better option when it comes to scrolling. Not only does it only load components once the element is scrolled into view, but both iOS and Android also support it.

In summary, I've learned a lot about React Native just by building this small app. There are some topics I didn't get a chance to deeper into, like debugging with Expo and the similarities and differences of React Native and React, but I'll save those for future posts. Thanks for reading!

Tuples in Swift

Lori "Lei" Boyd — Sat, 16 May 2020 15:20:05 +0000

I recently started to dive into the world of IOS development. As I was taking a tour on the documentation website, I came across a data type I've never heard before. "What's a tuple???", I asked myself.

For context, I was reading a section on functions to get familiar with the syntax. The following code is a function that calculates the minimum, maximum, and sum of a given array of integers.

func calculateStatistics(scores: [Int]) -> (min: Int, max: Int, sum: Int) {
    var min = scores[0]
    var max = scores[0]
    var sum = 0

    for score in scores {
        if score > max {
            max = score
        } else if score < min {
            min = score
        }
        sum += score
    }

    return (min, max, sum)
}
let statistics = calculateStatistics(scores: [5, 3, 100, 3, 9])
print(statistics.min, "the minimun")
// Prints "3 the minimum"
print(statistics.sum, "the sum")
// Prints "120 the sum"
print(statistics.1, "the max")
// Prints "100 the max"

A Tuple is defined by Swift's documentation as a comma-separated list of types, enclosed in parentheses and is commonly used to return multiple values. The above code uses dot notation to call the variables placed in the tuple and can be called by name or index. To me, this resembles a mashup of a Javascript Object and an array.

You can also name the elements inside of a tuple like so: var aTuple = (age: 24, name: "Lei") and reference them with aTuple.age which will return 24.

A tuple can contain zero or more types. Andyy Hope states an interesting fact on tuples over on his blog that void is just a typealias for an empty tuple.

As I'm journeying through the language of Swift, I'm sure I'll many more gems that make Swift uniquely great.

How To deploy Your Web App To Heroku

Lori "Lei" Boyd — Thu, 02 Apr 2020 22:55:15 +0000

As my time as a bootcamp student is coming to an end, I've built a couple of web apps that I'd like to share with the world. So I'm going to show you how you can do just that.

Heroku lets you host 5 apps for free so choose them wisely. If you're like me and you haven't make separate repos for your api and client, here's a blog to help you out.

Start by creating a new app on the Heroku website.

When you're done, you'll be redirected to the deploy tab. There, you'll be greeted with information about pipelines, and more importantly, deployment methods. You have the option to use Heroku Git, GitHub and the Container Registry. I'll be using Heroku Git.

Download and install Heroku CLI and run heroku login in your terminal.

Next, clone your new repo in your app's root directory.

$ heroku git:clone -a <heroku-app-name>
$ cd <heroku-app-name>

Lastly, commit any changes you make to deploy.

$ git add .
$ git commit -am "make it better"
$ git push heroku master

If you're deploying a rails API you will need to migrate and seed if needed. You can do this by using Heroku's console.

Lifting State With React

Lori "Lei" Boyd — Wed, 11 Mar 2020 19:48:53 +0000

Lifting the state allows your sibling components to share a single source of truth. In a hierarchy tree, components can only inherit data from their parent components.

Lets walk through this test application.

Our hierarchy looks like this.

We have a parent component with two children components. Our goal is to make our Child component be a button that changes the color of Child2's text.

In our Parent component, we initialize the state with a key of color and value of 'blue'.

Because we want to change the sate we have a function in the Parent component that does just that. It's a conditional that checks if the this.state.color is equal to 'blue'. If that is true, we set the sate to 'red' and if false, we set the state to back to 'blue'

Next, we have a render function that returns both Child and Child2. Child inherits the reference to this.setColor, and Child2 inherits this.state.color.

Child does one thing. It renders a button with an event listener. Our callback function for the click event is the function that Child inherited from Parent. We access this by using the properties given via this.props.changeColor.

So now every time Child's button is clicked, the function in the Parent component is invoked and changes the state.

Since we are rendering our Child2 component in our Parent as well, every time we change the state, Parent gets re-rendered which inturn re-renders each child.

This is where the magic happens.

Now let's look at Child2.

Child2's only job is to render some text. We have our p tag with an inline style set to Child2's color property. When Parent gets re-rendered by setState Child2 get's re-rendered with the new state as its new prop!

Recap

Every time Child's button is clicked, Child invokes the instance method defined in the Parent. That instance method changes the state based on its contents and triggers a re-render. Child2 is now re-rendered with the new state as an inherited property.

Making Games in Ruby With Gosu

Lori "Lei" Boyd — Wed, 19 Feb 2020 16:41:39 +0000

Have you've ever wanted to make games with ruby? Gosu is a 2D game development library for Ruby and C++. It provides a window and main loop, 2D graphics and text (powered by OpenGL), sound, music, keyboard, mouse, and gamepad input.

Prerequisites & Installation

I'll be showing how to install Gosu on OSX, but they also offer tutorials on setting gosu up with Windows, Linux, Raspbian.

Gosu GitHub wiki

Gosu depends on the SDL 2 library. So make sure you have Homebrew installed and run brew install sdl2. When that's done, simply install the Gosu gem with gem install gosu.

To test whether everything works as expected, you can use this one-liner, which should open a window:

ruby -rgosu -e 'w = Gosu::Window.new(200, 150); w.caption = "It works!"; w.show'

Or you can install and run the gosu-examples gem:

gem install gosu-examples
gosu-examples

I recommend you should do the latter.

This tutorial window shows you what Gosu is capable of. Even better, they have a shortcut to the source code for each example! You can view the source code by pressing E And if you like they have a code-along for the tutorial.rb game.

Examples

There's so much you can do with this lightweight gem. Here's a link to the Gosu Showsace where you can download community projects or post your own!

An Example of a Git Workflow

Lori "Lei" Boyd — Mon, 03 Feb 2020 13:55:45 +0000

Git is a distributed version control system for tracking changes in source code during software development. It’s a great tool to use when you're collaborating with other developers as well. But sometimes creating a workflow for your development process can be a little tricky.

First things first, you’ll need to set up a repository. Here’s an article from GitHub on that. I would then add the skeleton of my project and commit the changes with git commit -m "<commit message>"

After you have your repository set up, create a Development branch with git checkout. git checkout -b development

This creates a new local branch out of your master branch. This development branch is what you’ll be merging into until your project is in a working condition. Next, type in git push origin development to push your local development repo to a remote repo with the same name. This way your development repo can also be accessed by your collaborators.

If you’re collaborating on a project that isn’t yours, you’ll need to clone and fetch the repository.

git clone <repo link>
git fetch

Git fetch allows you to access any other existing branches.

Now whenever you start working on a new feature, you’ll create a new branch for each one. If you’re not in the development branch switch to it now with git checkout. git checkout development Then run git checkout -b <feature branch name> This creates a branch from your development branch. Your feature branch is only on your local machine until you push your commits into the remote repository. Commit often, usually after each deliverable. Once your feature is tested and working you can push to the remote repository with git push. git push origin <feature branch name>

Uh-oh! You pushed the wrong button and your program is broken!

No worries! If you’ve been committing often you’ll be able to reset to your last commit! Make sure you don’t have any modified files in your working tree that you wish to keep. You can check that with git status It'll look something like this.

On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

    new file:   newfile.rb

Untracked files:
  (use "git add <file>..." to include in what will be committed)

    hhdjhd.txt

To reset to your last commit:

go to your repo on GitHub and click commits
then copy the commit to your clipboard
in your terminal checkout the commit, and create a new branch

git checkout <commit string>
git checkout -b <branch name>

You may run into merge conflicts, and great communication with your team can remedy that. A conflict arises when two separate branches have made edits to the same line in a file, or when a file has been deleted in one branch but edited in the other. Keeping track of who works on what is crucial, so I like to use Trello to break down tasks. In case a conflict does happen though, git will notify you and you’ll be able to delete whatever is causing the conflict.

When your development branch is a complete and working product, it’s time to merge to the master branch.

Do so by switching to master git checkout master and merge from your development branch git merge development Deploy!

All in all, keep a development branch and make small feature branches as you go. Commit often, and keep track of who is doing what. This is just a workflow that I found easiest to use, feel free to tweak and experiment with other workflows and let me know your results!