DEV Community: emi kojima

My First CLI Project - 46 Books to Read by WOC

emi kojima — Tue, 30 Apr 2019 21:09:58 +0000

My First CLI Project - 46 Books to Read by WOC in 2018

At the onset of this project, students are asked to fill out a Project Ideation Form and submit it for review. When I was filling out the form, I had all these grand ideas and I wanted my app to do everything (list by books, list by author, list by the month the book is to be released, list by rating) but when I got feedback about my project idea it suggested I keep it simple (or KISS - one of the design principles in programming). I am so glad that I listened to this feedback.

I began my project by watching Avi's great video, which walks you through how to create a gem using bundler (typing: bundle gem cli_app_name_of_project). I highly recommend watching this video before you begin your project. It allows you to see how Avi thinks through making a CLI Gem project and I used it as a frame of reference to begin my own.

After I used gem bundler to set up the skeleton of my project and I set up my environment so that my pry, nokigiri, open uri would work. I started the project by using pen and paper and drawing out a flowchart of what I wanted in my user to encounter.
It looked like this (but with a lot more cross-outs and squiggly lines):

GREETING --> LIST OF BOOKS--> ASK FOR INPUT (what book do you want to see more of?) --> LIST MORE INFO --> GO BACK TO LIST/ SELECT ANOTHER BOOK--> EXIT.

Then, I got to it! I began coding by writing the code that I wish I had (as Avi states multiple times in his CLI Gem Walkthrough video). I started with coding my CLI class. I coded a greeting method, then made an outline method for list_books, and so on, so I had a frame to build out from. Here's the walkthrough of my project!

This project really pushed me to think through a project from inception to completion, something I hadn't done yet, and WOW, did I learn a whole lot!

Integrating JQuery Front End to my RoR App (I HAVE THAT!)

emi kojima — Tue, 30 Apr 2019 21:07:57 +0000

Integrating JQuery Front End to my RoR App (I HAVE THAT!)

The Beginning

For this final project, I decided to turn my Rails app, I HAVE THAT!, a community lending app, into an app with JQuery front end. To read more about the app and its features, click here..

I struggled quite a bit with this project. One of the biggest challenges I had with this assignment was a theoretical one. Why and on which page views should I integrate a JQuery front end and what reasoning and implications would my choices have on the user experience while fulfilling the project requirements. The next mental hurdle I had was in thinking through how to adjust already exisiting code that wasn't written with a different front end integration in mind.

I wrote down each question in a bullet point list:

What page views can be replaced with JQuery and AJAX to optimize user experience?
Will my JQuery front end replace my rails front end completely?
What implications will my choices have on my app as a whole and user experience?

With these questions in mind, I started by watching some video tutorials from the wonderful Tech Coaches of Flatiron School:

The Process

Watching these videos gave me a good idea of where and how to start building out my new Javascript (JS) front end. The first thing I decided to do was to map out which page views I wanted to dynamically load on to the DOM.

The 'Community' page (users#index) in my app lists all the Users of the app and their location. Each username was linked to their users#show page and clicking on the link would redirect you to that page which displayed the items the user has listed for lending. I knew I wanted to hijack that click event and use AJAX to display the users' items and to add a NEXT button dynamically so that each time the button was pressed, the DOM would update to display the next users' information and items.

I made a list of to-dos to accomplish this task.

Generate Users Serializer
Generate users.js (delete users.coffee)
Make to inject data in the application layout.
Hijack click-event.
Make AJAX request for data. *Edit Users Controller show action to render JSON
Parse Data - maybe create Class and prototypes?
Inject data into appropriate along with a button for NEXT
I then made a list of to-dos to accomplish the task of hijacking my NEXT button and displaying the next user.
1. Figure out where to put the method or function of getting the next user (user.rb, users.js, users_controller?)
2. Figure out the method or function of getting the next user
3. Pass in the user :id to the NEXT button function
4. Make an AJAX request for data
5. Delete DOM
6. Inject new data into DOM with NEXT button.
Once I accomplished this, I moved on to my next task and so on until I had created an app that was very close to a single page app (SPA) - other than my login and logout pages, my app was all JQuery and AJAX with no redirects.

The Takeaways

Upon creating a very close cousin of the SPA (see below), I started to realize the limitations of SPAs and read a few articles (like this great one) that exposed the shortcomings of what I had coded. I also read this GREAT article about the best uses of AJAX (the when and where of AJAX use) and the disadvantages of using AJAX, an article I wish I had read before starting this project!

The other big takeaway is that planning is invaluable. For example, I had a list of items on my items#index view that rendered each item by name, description, the user the item belongs to, and if the item was available to borrow. I had the item name in

and the rest of the information in

. So when I decided to have a search field, because I had other text with

in the DOM, I had a difficult time isolating the item name
for my search function. And even though the fix was relatively painless - I had to put the
inside a
- it caused me to go back and code that in when I should have had a list item in a
as basic protocol. You never know how your app will need to expand (what it will need to integrate, what functionality will need to be added) and it is always good practice to be neat, write clean code, and be smart about your HTML markup (another big takeaway - give ids or classes to your s)!
The thing I love about coding is that there is such a wealth of information out there because there is such a generous community of coders and more you look, the more there is to learn. And while this can feel overwhelming at times, it also feels so generative and exciting.

Here's the video walkthrough of the final product.

Onward!

Happy coding.

RAILS Final Project: I HAVE THAT! (v.2)

emi kojima — Tue, 30 Apr 2019 21:06:37 +0000

Draft

RAILS Final Project: I HAVE THAT! (v.2)

For my Rails Final Project, I decided to convert my Sinatra Final Project app, I Have That!, into a Rails app and to add functionality that I wished that I had added when making this app using Sinatra.

I Have That! is a community lending app that allows users to sign up and list items they want to lend out to their community and borrow things from the list of available items. My hopes in creating this app are to help foster a more sustainable world through sharing the resources we already have and to create community with people who are willing to do the same who happen to live in your area. The Sinatra version of this app did not have a location attribute for the user, so users could not filter the list of items by location. This was a function that I wanted to add to the Rails version of this app. Another functionality I wanted to add was an ability to have each item belong to a category and to list items by category instead of having one big list of items.

In order to build out these functionalities, I first needed to decide on my models and their relationships. I did this with a pen and paper, making models with their attributes and deciding which models will have a belongs_to and which will have the has_many and has_many through relationship. After a few passes, I decided to have a User model, Item model, and Category model. The Item model would act as my join table and have the user_id and category_id attributes. The User model would have :username, :email, :password_digest (for has_secure_password), :state, and :city attributes. The Category model would have :name and :description as its attributes.

After I had drawn up my models and felt sure of them, I began the task of building my rails app. In my terminal, I ran rails new i-have-that-v2 to get the file structure of my rails app. After that, I added my models and built my migrations by running rails g migration name_of_my_migration to create my migration files. To fulfill the nested resources requirement, I decided that I would nest my Items in my Users. Which means that rather than having /items/new, I would have users/:id/items/new.

My routes.rb looks like this:

Rails.application.routes.draw do
  get 'auth/:provider/callback', to: 'sessions#create'
  get 'auth/failure', to: redirect('/')
  resources :categories
  resources :users, except:[:show]
  resources :users, only:[:show] do
  resources :items

So, to make a new item (through my nested resource, I would have to pass in the user and the item to the form. It took me a while to figure out how to do this, but this is my Items Controller :new action code:

class ItemsController < ApplicationController
def new 
@user = find_user 
@item = Item.new(user_id: @user.id) 
end

After setting the @user and @item, I passed both of these variables into the item/new/htmll.erb form:

<%= form_for [@user, @item] do |f| %>
  <%= f.hidden_field :user_id %>
  <%= f.label :name %>
  <%= f.text_field :name %><br>
  <%= f.label :description %>
  <%= f.text_field :description %><br>
  <%= f.label :category_id, "Item Category" %>
  <%= f.collection_select(:category_id, Category.all, :id, :name, { :prompt => 'Select a Category' }) %><br>
  <%= f.label :available, "Check this box if this item is available for lending"%>
  <%= f.check_box :available %><br>
  Didn't see a category for your item? Create one <%= link_to "here:", new_category_path %><br>
  <%= f.submit %>
<% end %>

In this form, the f.hidden_field :user_id is a hidden field that is acting as the connector between the item and the user. When this form is submitted, this field will be in the params as item[:user_id] and its value will be assigned as the id of the @user in the creation of this item object.

I built all of my app and made sure everything was working before I added OmniAuth and I am so glad that I did this. This is because the biggest challenge that I had (and I had a lot of challenges completing this project!) was to get my OmniAuth Google to work. I tried installing OmniAuth google from this tutorial . I ran into problems right away when my omniauth google gem would not bundle. After a lot of help from an amazing TC (JENN!), we (and by we, I mean Jenn) figured out that to get omniauth google to bundle, we had to have the latest version of it specified in the gemfile (gem ‘omniauth-google-oauth2’, ‘~> 0.5.3’), unlike omniauth-facebook, which bundles just fine without specifying a version. The only other hiccup I ran into with OmniAuth Google was an error that kept popping up in my SessionsController.

The error kept saying that I did not have a method ‘env’ in this line of code: @user = User.from_omniauth(env["omniauth.auth"]); after some googling, I found a quick fix. All I had to do was add ‘request’ before the env: @user = User.from_omniauth(request.env["omniauth.auth"]);.

Once I got my OmniAuth working, I felt like I had just completed running a marathon and I took myself out for icecream and maybe I cried a little out of joy!

Here’s the video walkthrough of my project!

Thanks for reading.

JavaScript: What is `this`?!

emi kojima — Tue, 30 Apr 2019 21:04:01 +0000

JavaScript: What is `this`?!

*As you read this blog post, it might be helpful to open up your Developer Console (Windows: Ctrl + Shift + J or Mac: Cmd + Option + J) and code along with me. *

Overview: `this`

In Javascript, this is all about context and this can be very confusing.
What I mean ☝ is that the value of this is dependent on its execution context (ie: where this is being called) - meaning that depending on where this is being executed/called, what this references will change. That's what can make this so useful. In order to understand the value of this we need to look to the call site (execution context).
Try pasting this code in your console:

console.log(this);

You should see something like this after you hit the return key :

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

which means that this refers to the global window object. This makes sense becuase we called this from the console (its execution context), which by default refers to the global window object.
In a simple function call, the execution context for this refers to the global (window) object by default.
Here's an example of that:

function hey () {
 console.log("Hey, I'm a simple function call");
 console.log(this === window); 
}
hey()

You shoud see this in your console:

Hey, I'm a simple function call
true

Here, in a simple funcion call, this === window, which is why the console.log came back as true.
Now put this into your console:

var animal = { 
 cat : function() {
 console.log(this)
 console.log(this.sound)
 },
 sound: "hrrrrmph"
}
animal.cat()

You should see something like this in your console:

cat: ƒ, sound: "hrrrrmph"

followed by:

hrrrrmph

in the above context, this refers to the animal object and this.sound becomes the animal object's sound value ("hrrrrmph").
Ok, lets' take it up another level!

var animal = {
bear: function () {
 var sound = "ROARRRR"
 
 this.cat()
 },
cat : function() {
 console.log(this.sound)
 },
 sound: "hrrrrmph"
}
animal.bear()

What do you think will happen when we run the above code?
Here, by calling animal.bear() we call this.cat() which logs in our console "hrrrrmph". That's becuase the execution context for this in this.cat() is animal. So calling animal.bear() calls animal.cat() which console.logs(this.sound).
What if we moved the var sound = "ROARRRR" from the bear to cat?

var animal = {
bear: function () {
 this.cat()
 },
cat : function() {
 var sound = "ROARRRR"
 console.log(this.sound)
 },
 sound: "hrrrrmph"
}
animal.bear()

Did you guess that we would still get "hrrrrmph"?!
I didn't! But like I said before,THIS is complicated! Let's remember the other thing I said before. this is all about context (execution context to be exact). Let's walk through it together.
When animal.bear() is being called, the this in this.cat() is the animal object. So the this in the console.log(this.sound) is the animal object! This is where the call was executed, which means that we are console logging animal.sound.
What about this code below? Try to figure out the execution context of this.

var animal = {
bear: function () {
 this.cat()
 },
cat : function() {
 var sound = "ROARRRR"
 console.log(this.sound)
 },
 sound: "hrrrrmph"
}
animal.cat()

this still refers to the animal object! So, we still get hrrrrmph
OK, let's try to get deeper into this:

var animal = 'Cat'
var forest = {
 animal: 'Bear',
 ocean: {
 animal: 'Pelican',
 animalName: function() {
 return this.animal
 }
 }
}
forest.ocean.animalName()

OK, BEFORE we go on to see what the code above will return, let's talk about the scope of each animal.

Cat 🐱 belongs to the GLOBAL 🌐 window .
Bear 🐻 belongs to the FOREST 🌲 scope.
Pelican 🐦 belongs to OCEAN 🌊 (forest.ocean) Now back to the code. What do you think this refers to in the context forest.ocean.animalName()? It's the forest.ocean object! So, this.animal (which is the same as forest.ocean.animal) returns "Pelican" because the Pelican belongs to the OCEAN. GOOD. What if we added this to the code to the console:

var animalName = forest.ocean.animalName

making animalName a function that returns this.animal Now, run this code in your console:

animalName()

what do you think we would see returned? What is the execution context of this? If you said global, you are right! Running the code animalName() is equivalent to running this.animal, and since we are executing this code from the global window, it's just like calling window.animal, which is "Cat"!
How would I be able to use the animalName() (which returns this.animal) to return "Bear"?

📞 The call

That's where the .call() function comes in. Here's what the W3Shool says about the .call():
**With call(), an object can use a method belonging to another object. **
Sounds simple enough. Let's code it in! Since we know from ☝ that Bears belong to FOREST, let's pass forest in to the .call function.

animalName.call(forest)

And TA-DAAA, we get "Bear"
What would we get if we executed this code:

animalName.call(window)

That's right, we'd get "Cat".
Now that we have a handle on this, let's talk about when using this won't work for us.

The ➡️ arrow function and `this`

Arrow functions are a more syntactically concise way of writing function expressions and some argue are easier to read. You can read more about arrow functions here and here. But here's the briefest of overviews:
A regular function is written like this:

function animalName () {
 return this.animal
}

Here's how the same function looks with an arrow function:

arrowAnimalName => () => this.animal

I like them both, but I'm a gemini, so that's to be expected.
BUT why am I bringing up arrow functions in relation to this, you ask.
It's because in arrow functions this is lexically bound - meaning that this never changes 😱.
Cynthia Lee on FreeCodeCamp breaks it down like this:
**In classic function expressions, the this keyword is bound to different values based on the context in which it is called. With arrow functions however, this is lexically bound. It means that it uses this from the code that contains the arrow function.
**
Which means that we can't use .call(), or .apply() or .bind() with arrow functions because this is lexically bound to the where the arrow function is executed.
So if we run

arrowAnimalName.call(forest)

we will get "Cat" because the this is lexically bound to the Global window where we defined this arrow function.
All of this can get really confusing and maybe feel overwhelming. But you know what? We will always have console.log(this) and debugger to help us find out what this really is, and THAT leaves me feeling pretty 🌈 .
Thanks for reading!

React/Redux: Adding a search feature

emi kojima — Sat, 20 Apr 2019 01:05:32 +0000

The App

Ever since I can remember I've always loved reading. As a kid, I loved going to libraries and bookstores and seeing endless shelves of books. All those options of what I could choose to read felt exciting and expansive. Fast forward to me as an adult walking into a library or bookstore and seeing the same endless shelves of books; now libraries and bookstores are my Burmuda Triangle. As soon as I enter a library or book store, I can't remember any of the books I wanted to read or any of the book recs from my friends. My mind goes B L A N K.

Studies have shown that having too much choice actually prohibits us from making sound informed decisions (which you can learn more about by listening here).

This conundrum is what led me to the creation of my app BookMark (React/Redux, Rails backend, and using the NYT API), where users can peruse the New York Times Bestseller lists by genre, get some information about each book, read the book review, make a note about a book, and click on a book card to save a book to their 'reading list'.

The Search Function

After I created the basics of my app, I wanted to create a search function so that users could search through their saved books by entering a search term.

The structure of React made this seamless because React is component based, which means you can make a Search component and plug that component into where you want the search box to appear.

I started by doing a thorough internet search on how other people were accomplishing searches on their React Apps. After looking at a lot of examples and code, I decided on the best approach to take that made the most sense for my app.

I then started making a list of things I would need to do to make this functionality.

Create Search component - create a simple search box using <form> and <input>.
Place the Search component into the UserBooks component (where you can see the list of user's books).
Tie input of the search (the search term) from the Search component to the UserBooks component.
Create the logic: how do I filter the list of user books according to search term & write the function(s).
Test to make sure the functionality works.

Step 1. I created a simple presentational Search component that takes in user input. I knew that each time a user typed something in the box, I wanted to trigger my search function. For this, I knew I had to create an onChange event handler so when the time came, I could send that input to my yet-to-be-written search function.

Step 2. I then decided to place the component at the top of my UserBooks component so that the search box appears at the top of that component.

Step 3. Since my Search component is the child component to UserBooks component, I had to somehow figure out a way to pass back the search term to the UserBooks component. I did this by creating a callback() function in the UserBooks component and passing that down to the Search component through props and then setting what I got back to my UserBooks local state.

In my Search component, I used an onChange event handler and used my callback inside the onChange like this:

const Search = (props) => {
   return (
     <>
     <form>
       <input
         placeholder="Search for..."
         onChange={(event)=>props.callback(event.target.value)}
       />
     </form>
     </>
   )}

and in my UserBooks component:

 callback = (term ) => {
    this.setState({
           term: term 
        })
  }

Now, my search term is connected to my UserBooks component.

Step 4. I knew that in my UserBooks component, I was already displaying all of the user's books, so I need to figure out a way to filter out the books that did not match the user's search term so that only the books that matched remain showing. I also needed to figure out what I wanted the search term to search through (author name, title, book description, user's note about the book).

I decided that I wanted the search to work on all of the book's attributes. I began by drawing out what I wanted to happen.

User's books (with search box) are displayed => search term is entered => some kind of filter function => user books that match the search term remain displayed.

In my UserBooks component, I was already iterating through the list of user's books and passing each book to the UserBookCard component, so I knew this would be the place to put my search filter logic. I started by writing a filter function that would take the book and the search term as arguments.

filterIt = (book, searchTerm) => {
return book.title.includes(searchTerm) || book.author.includes(searchTerm) || book.description.includes(searchTerm)
}

The code above takes a book and checks to see if the book has the characters of your search term. The includes() method returns a boolean depending on whether or not the string contains that characters of your input. If the string contains the characters of your input, the method returns true. In my filterIt() function, I am saying, return the book if any of the book attributes includes the search term. *It's important to note that .includes() is case sensitive, so you will have to .toLowerCase() your input and book attributes.

So now, I have a filterIt() function that returns the book that has the search term within it. NOW, WHAT.

With the list of books I already have and the books that are getting returned by my filterIt() function, I can use the .filter() method which "creates an array filled with all array elements that pass a test (provided as a function)", to get the user's books that contain the search term and then iterate through the filtered list and pass the book on to my UserBookCard component like so:

  const booksList = books.filter(this.filterIt(this.state.term)).map(book => {return (<UserBookCard
          key={book.id}
          book={book}
          deleteUserBook={this.props.deleteUserBook}
          userId={this.props.user}
          addBookNote={this.props.addBookNote} />)
        }
    )

Step 5. Testing. Debugging. Testing. Debugging. Testing.

The Result

And this is what it looks like in action!

Thanks for reading and happy coding!

DEV Community: emi kojima

My First CLI Project - 46 Books to Read by WOC

My First CLI Project - 46 Books to Read by WOC in 2018

Integrating JQuery Front End to my RoR App (I HAVE THAT!)

Integrating JQuery Front End to my RoR App (I HAVE THAT!)

The Beginning

The Process

The Takeaways

and the rest of the information in

in the DOM, I had a difficult time isolating the item name

for my search function. And even though the fix was relatively painless - I had to put the

inside a

RAILS Final Project: I HAVE THAT! (v.2)

RAILS Final Project: I HAVE THAT! (v.2)

JavaScript: What is `this`?!

JavaScript: What is this?!

Overview: this

📞 The call

The ➡️ arrow function and this

React/Redux: Adding a search feature

The App

The Search Function

The Result

JavaScript: What is `this`?!

Overview: `this`

The ➡️ arrow function and `this`