DEV Community: Rukshan Uddin

Hoisting

Rukshan Uddin — Fri, 08 May 2020 19:44:20 +0000

What is hoisting? Hoisting is a relatively new concept, which you will not find anything about in documentation prior to ES6. According to MDN:

Hoisting is a term you will not find used in any normative specification prose prior to ECMAScript® 2015 Language Specification. Hoisting was thought up as a general way of thinking about how execution contexts (specifically the creation and execution phases) work in JavaScript. However, the concept can be a little confusing at first.

Ok, so that is a little confusing. To put it simply, hoisting is a mechanism, that since ES5 will move variables to the top of its scope during "compilation" (placed in quotes, since Javascript in considered a compiled language) before code execution. Changes in how hoisting works were made with the ES6 release of Javascript as well, and I will document how it works.

No matter where functions and variables are declared, they are moved to the top of their scope (global or local).

This will let a few things occur in Javascript, including allowing you to call functions before they've been written in your code.

How it works

ES5

Global Variables

In ES5 thanks to the magic of hoisting, we could do this:

console.log(myVar); // Output: undefined

var myVar = "ES5 hoisted me!";

Instead of getting ReferenceError: myVar is undefined for the console.log(myVar) we got undefined.

Why did it return undefined?

Why didn't it return "ES5 hoisted me!"?

Did it not hoist myVar?

All valid questions at this point. The interpreter will view the code as follows:

var myVar; // myVar gets hoisted to top of scope

console.log(myVar); // myVar is not yet defined

var myVar = "ES5 hoisted me!"; // value not seen by the previous console.log()

While ES5 has hoisted myVar to the top of the scope, it has not been initialized yet. The reason it is returning undefined is because only var myVar gets hoisted, not the initialization value of "ES5 hoisted me!" during the compilation phase. We need to make sure to initialize our variables before we call them:

var myVar = "ES5 hoisted me!";
console.log(myVar); // Output: ES5 hoisted me!

Function Scoped Variables

function myFunction() {
    console.log(myVar);
    var myVar = "Hoisting is the bees knees!";
}

myFunction();

Based on our knowledge of hoisting thus far, it is safe to assume that the scope of myVar is myFunction() and that function would return undefined. The interpreter sees it as:

function myFunction() {
    var myVar; // myVar gets hoisted to top of function
    console.log(myVar); // myVar is undefined at this point
    var myVar = "Hoisting is the bees knees!"; // console.log() does not see this value of myVar
}

myFunction(); // Output: undefined

Like the previous example, to prevent this all we need to do is initialize the variable before calling it.

function myFunction() {
    var myVar = "Hoisting is the bees knees!";
    console.log(myVar);
}

myFunction(); // Output: Hoisting is the bees knees!

Strict Mode

What is strict mode? With ES5 we have been given a way to be more mindful of how we declare variables. From MDN()

JavaScript's strict mode is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "sloppy mode". Strict mode isn't just a subset: it intentionally has different semantics from normal code.

Strict mode for an entire script is invoked by including the statement "use strict"; before any other statements.

We can get a lot of benefits from using strict mode. Strict mode will:

Change errors to throw errors.
- Helps to remove "silent" Javascript errors.
Strict mode repairs mistakes
- Makes it easier for JavaScript engines to perform optimizations.
- Identical code will sometimes execute faster in strict mode.
Strict mode forbids certain JavaScript syntax.
When relatively “unsafe” actions are taken, it prevents or throws errors.
- (Such as gaining access to the global object).
It restricts features that are unclear or poorly thought out.
Strict mode makes it easier to write “secure” JavaScript code.

ES6

let

console.log(myVar);

let myVar = "ES6 hoisted me!";

Let's take the first example but use let instead of var. If we were going by the logic we had learned in the previous examples, we would assume that the console.log() would be undefined. Instead, we get something else:

console.log(myVar);

let myVar = "ES6 hoisted me!";

//Uncaught ReferenceError: myVar is not defined

What ES6 does is gives us a ReferenceError. ES6 will not let us use an undeclared variable. The let keyword means the variable's scope is bound to the block in which is it declared and not the function in which it is declared. It also means we need to explicitly declare let keyword variables before they are called.

let myVar;

console.log(myVar); // Output: undefined

myVar = "ES6 hoisted me!";

This time we won't get a ReferenceError, but our output will be undefined.

const

The const keyword is very much like let except one key difference. MDN defines it as the following:

Constants are block-scoped, much like variables defined using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.

Just like with let, const keyword variables are hoisted to the top of the block.

console.log(myVar);

const myVar = "ES6 hoisted me!";

//ReferenceError: Cannot access 'myVar' before initialization

We will get ReferenceError just as we did with the let keyword. It works the same with const in functions:

function hoistMe(user){
    console.log(result)
    const result = `${user}` + `has been hoisted`
}

hoistMe("Jonny")

We will ge an error:

function hoistMe(user){
    console.log(result)
    const result = `${user}` + `has been hoisted`
}

hoistMe("Jonny") //Uncaught ReferenceError: Cannot access 'result' before initialization

We will also get errors for using a constant before declaring and initializing it.

The differences between var, let, const

The key difference between var, let and const as it relates to hoisting is that let and const remain uninitialized at execution while var declared variables are initialized with a value of undefined

Go, fetch()

Rukshan Uddin — Mon, 04 May 2020 17:57:18 +0000

Using Fetch in Javascript

Working on my Javascript portfolio project for Flatiron School gave me a chance to get familiarized with fetch requests. We had to use fetch to send requests to our Rails backend. Fetch ended up being wholly responsible for manipulating our API, we no longer had to submit forms and wait for new pages to pop up, Javascript took care of all of that for us. We were able to use fetch requests to GET, POST, DELETE, PATCH and UPDATE our database. Doing so, we saved time, not relying on having to write views for all our models and being able to manipulate the information stored within better.

The different requests

As we wrote our code, I found myself relying on several different resources to put together my requests. Since it was a major part of the Javascript project, I decided to write a brief summary of the different requests available and how to use them.

Fetch - Basic GET request

Our basic fetch request will look something like this(I used fetch to get my users from my database):

fetch("http://localhost:3000")

The first thing that happens is that fetch will take the URL you pass in to it and retrieve a promise object. So when we send our request, we are getting a promise, which we must then take that response and turn it into JSON for our use.

fetch("http://localhost:3000")
    .then(resp => resp.json())

Once we have that JSON we can then manipulate it further.

fetch("http://localhost:3000")
    .then(resp => resp.json())
    .then(users => users.pop())

In the example above I took the promise I received, turned that to JSON then I had an array of JSON objects. For my project, I only needed the last user that had signed on, so I use users.pop() to remove and return the last element of the JSON array I received.

A thing to note is that, although I am using .pop() it isn't actually affecting my database. It is only removing the last item from the *JSON** object that is created from the promise returned by our fetch request.*

fetch("http://localhost:3000/users")
    .then(resp => resp.json())
    .then(users => users.pop())
    .then(user => renderUser(user))
};

Now when it comes to rendering on my page. I must process the response further. In this example I have taken the JSON object that I got as a return value from calling .pop() in the previous example and called renderUser() on it. This is necessary because otherwise, we will have only been left with JSON that we had done nothing with. The method I have use will take that JSON and put render it in a way that can be used on the screen.

Fetch - POST

Since we want everything in our projects running on one page without redirects, instead of having Rails handle our forms, we can use Javascript. When we use Javascript to handle a POST request on our forms, there are a few key things to remember.

Event Listener

Since we are changing what our form will usually do, we will add an event listener to our from to prevent the default action of the form.

const userForm = document.querySelector("body > header > div > div > div.menu > div.user-form > form")

userForm.addEventListener('submit', ...)

In my example, I have defined my userForm variable and added .addEventListener('submit', ...) to listen for the submit event.

userForm.addEventListener('submit', event => {
    event.preventDefault()
    postUser(event.target)
})

When it 'hears' the submit event it will do two things. The main thing that will tend to be the same across the board is calling .preventDefault(), which will prevent the form from performing its default submission.

The next thing I do is pass the event.target to my fetch POST method, aptly named postUser(), I have defined elsewhere.

POST method

function postUser(user_data) {

}

I have defined postUser() to handle my form POST request. I pass in my forms data and with that data, I submit my user data to my backend, using a fetch request.

function postUser(user_data) {

    fetch('http://localhost:3000/users', {
            method: 'POST',
}

The first thing I want to do is type out my fetch(). I pass in my url and let Javascript know that it is a POST request.

function postUser(user_data) {

    fetch('http://localhost:3000/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Accept: "application/json"
            },
            body: JSON.stringify({
                "name": user_data.name.value,
                "user_handle": user_data.handle.value
            })
        })
}

Then I put in the headers letting my application know that I will be dealing with JSON and in the body: I use JSON.stringify() to turn my JS object to JSON. The two attribute that my users have are a "name" and "user_handle" and inside my JSON.stringify() I take my form data (user_data) and pull the values from the respective fields to assign them to the user (user_data.name.value & user_data.handle.value)

function postUser(user_data) {

    fetch('http://localhost:3000/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Accept: "application/json"
            },
            body: JSON.stringify({
                "name": user_data.name.value,
                "user_handle": user_data.handle.value
            })
        })
        .then(res => res.json())
}

The next step would be to take the response received and turn it back into a JSON object to manipulate...

function postUser(user_data) {

    fetch('http://localhost:3000/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Accept: "application/json"
            },
            body: JSON.stringify({
                "name": user_data.name.value,
                "user_handle": user_data.handle.value
            })
        })
        .then(res => res.json())
        .then((obj_user) => {
            renderUser(obj_user)
        })
}

With this JSON I then use it to render my User using renderUser() which I have defined elsewhere.

function postUser(user_data) {

    fetch('http://localhost:3000/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Accept: "application/json"
            },
            body: JSON.stringify({
                "name": user_data.name.value,
                "user_handle": user_data.handle.value
            })
        })
        .then(res => res.json())
        .then((obj_user) => {
            let new_user = renderUser(obj_user)
            const welcome = document.querySelector("body > header > div > div > div:nth-child(3) > div")
        })
        .catch((err) => {
            alert(err.message)
        })
}

Lastly, I added a .catch() to handle any errors that come up in the previous steps.

Fetch DELETE

I added a button to delete "handles" from my application. Now, since we want to keep everything on one page (no redirects), I utilized a fetch request to DELETE "handles" from my database.

Event Listener

The first step I took was to add a listener to the delete button I had created.

handlesContainer.addEventListener('click', (e) => {
    if(e.target.innerText === "Delete Handle") {
            deleteHandle(e.target.id)
        } else if {...}
    }
);

I had an event listener, listening for events on my handlesContainer I handled multiple click events in this listener, but I am only going to focus on the one handling my DELETE. I let my listener, listen for a 'click' event on the entire container, so it could handle deleting any of the handles available within, I set the id of each of the buttons to the handles id, so when we call deleteHandle() we pass in e.target.id to be able to delete the proper handle.

The fetch function

function deleteHandle(handleId) {
    fetch(`http://localhost:3000/handles/${handleId}`, {
        method: 'DELETE'
    })
}

I defined my deleteHandle() method to take an id, we interpolate that number into the fetch() request's URL to handle the exact handle we want. We enter 'DELETE' to let our fetch() know we what method: we are using.

function deleteHandle(handleId) {
    fetch(`http://localhost:3000/handles/${handleId}`, {
        method: 'delete'
    }).then(response =>
        response.json()
      .then(json => {
            return json;
        })
}

After we DELETE our handle, we take the response we receive and turn it back to JSON.

function deleteHandle(handleId) {
    fetch(`http://localhost:3000/handles/${handleId}`, {
        method: 'delete'
    }).then(response =>
        response.json()
      .then(json => {
            return json;
        })
      .then(clearHandles())
      .then(fetchHandles())
    );
}

After this, I take call clearHandles() to clear old handle data and fetchHandles() again to receive and updated list.

Check out TweetGrab at https://github.com/rukshanuddin/rails-js-project

Rails Generators

Rukshan Uddin — Thu, 26 Mar 2020 05:02:13 +0000

Amongst the things I found myself constantly referencing while building my first Rails app were Rails generators. You can check out the Rails Guides for more official documentation.

Rails Guides - Generate

What are they?

Rails generators save a lot of time when building out your project. The

rails g

CLI command, AKA

rails generate

uses templates to build out different portions of your Rails application. Certain gems will also come with their own generators, and you can install some on your own to tailor your personal project. If you want to see what types of generators are available to you, run the following command from the terminal:

$ rails generate

When I run

rails generate

from the root of my Rails project, I get the following output to my terminal.

Your output may vary as I have installed gems that include their own generators

General options:
  -h, [--help]     # Print generator's options and usage
  -p, [--pretend]  # Run but do not make any changes
  -f, [--force]    # Overwrite files that already exist
  -s, [--skip]     # Skip files that already exist
  -q, [--quiet]    # Suppress status output

Please choose a generator below.

Rails:
  application_record
  assets
  channel
  controller
  generator
  helper
  integration_test
  jbuilder
  job
  mailbox
  mailer
  migration
  model
  resource
  responders_controller
  scaffold
  scaffold_controller
  system_test
  task

ActiveRecord:
  active_record:application_record
  active_record:devise

Devise:
  devise
  devise:controllers
  devise:install
  devise:views
  devise:views:bootstrap_templates
  devise:views:locale

FactoryGirl:
  factory_girl:model

Mongoid:
  mongoid:devise

Responders:
  responders:install

Rspec:
  rspec:controller
  rspec:feature
  rspec:generators
  rspec:helper
  rspec:install
  rspec:integration
  rspec:job
  rspec:mailer
  rspec:model
  rspec:observer
  rspec:request
  rspec:scaffold
  rspec:system
  rspec:view

TestUnit:
  test_unit:channel
  test_unit:generator
  test_unit:mailbox
  test_unit:plugin

The basic ones that I will focus on in this post are for Rails and the Devise gem

Migration

rails g migration

To get some information about

rails g migration

you can type the following in your terminal:

$ rails generate migration --help

We can learn what it does by checking out the description that outputs to the terminal:

Description:
    Stubs out a new database migration. Pass the migration name, either
    CamelCased or under_scored, and an optional list of attribute pairs as arguments.

    A migration class is generated in db/migrate prefixed by a timestamp of the current date and time.

    You can name your migration in either of these formats to generate add/remove
    column lines from supplied attributes: AddColumnsToTable or RemoveColumnsFromTable

To create a projects table we could enter the following:

$ rails g migration CreateProjects

Rails would create a migration file for us in db/migrate: 20200326032030_create_projects.rb

class CreateProjects < ActiveRecord::Migration[5.0]
  def change
  end
end

We could add attributes and have Rails figure it out for us, but I will show you why I'm not later in this post.

Rails Guides - Creating Migrations

Model

rails g model

To get some information about

rails g model

you can type the following in your terminal:

$ rails generate model --help

We can learn what it does by checking out the description that outputs to the terminal:

Description:
    Stubs out a new model. Pass the model name, either CamelCased or
    under_scored, and an optional list of attribute pairs as arguments.

    Attribute pairs are field:type arguments specifying the
    model's attributes. Timestamps are added by default, so you don't have to
    specify them by hand as 'created_at:datetime updated_at:datetime'.

    As a special case, specifying 'password:digest' will generate a
    password_digest field of string type, and configure your generated model and
    tests for use with Active Model has_secure_password (assuming the default ORM
    and test framework are being used).

    You don't have to think up every attribute up front, but it helps to
    sketch out a few so you can start working with the model immediately.

    This generator invokes your configured ORM and test framework, which
    defaults to Active Record and TestUnit.

    Finally, if --parent option is given, it's used as superclass of the
    created model. This allows you create Single Table Inheritance models.

    If you pass a namespaced model name (e.g. admin/account or Admin::Account)
    then the generator will create a module with a table_name_prefix method
    to prefix the model's table name with the module name (e.g. admin_accounts)

If you entered the following in your terminal:

$ rails g model Project

Rails would create a migration file similar to this:

class CreateProjs < ActiveRecord::Migration[6.0]
  def change
    create_table :projs do |t|

      t.timestamps
    end
  end
end

It would also create our model in app/models/project.rb:

class Proj < ApplicationRecord
end

Once again, we could add attributes and have Rails figure it out for us, but I will show you why I'm not in this next section.

Rails Guides - Model Generators

Resource

rails g resource

To get some information about

rails g resource

you can type the following in your terminal:

$ rails generate resource --help

We can learn what it does by checking out the description that outputs to the terminal:

Description:
    Stubs out a new resource including an empty model and controller suitable
    for a RESTful, resource-oriented application. Pass the singular model name,
    either CamelCased or under_scored, as the first argument, and an optional
    list of attribute pairs.

    Attribute pairs are field:type arguments specifying the
    model's attributes. Timestamps are added by default, so you don't have to
    specify them by hand as 'created_at:datetime updated_at:datetime'.

    You don't have to think up every attribute up front, but it helps to
    sketch out a few so you can start working with the model immediately.

    This generator invokes your configured ORM and test framework, besides
    creating helpers and add routes to config/routes.rb.

    Unlike the scaffold generator, the resource generator does not create
    views or add any methods to the generated controller.

Basically, each of the generators so far has built on the previous.

Rails will create four main things with the resource generator:

A model
A migration
An empty controller
resources :projects in routes.rb (:projects because that is the resource I will be generating)

The resource generator is one I like because I prefer to build out my own views. If you entered the following in your terminal:

$ rails g resource Project --no-test-framework

You would end up seeing something like this:

Running via Spring preloader in process 53386
      invoke  active_record
      create    db/migrate/20200326023754_create_projects.rb
      create    app/models/project.rb
      invoke  controller
      create    app/controllers/projects_controller.rb
      invoke    erb
      create      app/views/projects
      invoke    helper
      create      app/helpers/projects_helper.rb
      invoke    assets
      invoke      scss
      create        app/assets/stylesheets/projects.scss
      invoke  resource_route
       route    resources :projects

Migration and Model

The first part will create our migration and our model files

20200326023754_create_projects.rb

&&

project.rb

I added

--no-test-framework

in the terminal because I did not plan on writing tests. As I have written it, it will only create empty migrations. To have rails generate the migrations for us, we can do something like this instead:

$ rails g resource Project title:string description:string developers completed:boolean user:reference --no-test-framework

When we ran

rails generate resource --help

earlier, we saw this at the bottom:

Examples:
    `rails generate resource post` # no attributes
    `rails generate resource post title:string body:text published:boolean`
    `rails generate resource purchase order_id:integer amount:decimal`

Since on the second example, we had put in attributes, we can open our migration and see that Rails magic has created our migration for us!

class CreateProjects < ActiveRecord::Migration[6.0]
  def change
    create_table :projects do |t|
      t.string :title
      t.string :description
      t.integer :developers
      t.boolean :completed
      t.references :user, null: false, foreign_key: true

      t.timestamps
    end
  end
end

The projects table now has fields for a title and description which are strings, the number of developers as an integer, a boolean value for whether or not it has been completed and references to a User with a foreign key.

Controller

rails g resource

leaves us with an empty controller where we can define our methods for our routes. If we had decided to do

rails g scaffold

we would have had seven public methods (index, show, new, edit, create, update, destroy ) and two private methods (set_project and project_params ). Although this can be a good way to get up and running quick, but you will often be left with a lot of bloat in your code.

Routes

By default we will be left with:

resources :projects

in config/routes.rb, but we can modify it later as we create our views and controller actions.

Helpers

We will also be left with a helper file in:

app/helpers/projects_helper.rb

and an SCSS file for styling in

app/assets/stylesheets/projects.scss

Rails Generators - Resource

Devise Generators

The last thing that I wanted to cover was generators for the Devise gem. I found it useful to generate the views for the Devise controllers that are created by the gem. This can prove useful if you want to change how the sign-in, login/logut, edit user pages appear in the browser. I decided to do so because I felt that the automatic views were a little lackluster and wanted more configuration.

Installing the Devise gem

Installation is pretty simple. We need to make sure to add:

gem "devise"
gem "omniauth"
gem "omniauth-google-auth2"

to our

Gemfile

as well as any other gems we may want to use with Devise such as Omniauth and Google OAuth2. Then we can enter into our terminal:

$ rails generate devise:install

Generate Devise Models

Generating models for Devise is pretty simple. It is just like we would do in Rails, with the addition of

devise

before the model name:

$ rails generate devise User

We can do some modification but Devise will give use something like this:

class DeviseCreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      t.integer  :sign_in_count, default: 0, null: false
      t.datetime :current_sign_in_at
      t.datetime :last_sign_in_at
      t.string   :current_sign_in_ip
      t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

Where we can comment and uncomment stuff that we will use in our project. It will also create a user model in app/models/user.rb which will have stuff we can comment/uncomment:

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
end

depending on what features our application requires.

Rails Girls Guides - Devise

As you can see Rails really makes building an application magical!

“Rails is the killer app for Ruby.”

Yukihiro Matsumoto, Creator of Ruby

Disclaimer

I am a student at Flatiron School, studying web development. If you see any errors in this post, please let me know. I am most quickly found on Twitter @rukshanuddin