Programming

The rest parameter (…args) vs the arguments object

Posted on Updated on

The rest parameter (…args) vs the arguments object

So I was listening to the Syntax.fm podcast, which is about various web development topics. In one of the episodes they were talking about the rest parameter, and one of the hosts had mentioned that they were using it often. I decided to check it out. According to Mozilla “the rest parameter syntax allows us to represent an indefinite number of arguments as an array.”[A] Just by looking at this statement, I realize how useful this could be. One scenario that crossed my mind was if we have an unknown number of arguments bein passed in, we can rely on the rest parameter to handle the acceptance, then use the functions logic to form a logic path based on the number of arguments being passed in.

Why not use the arguments array?

A good question would be, why care about the rest parameter, if JavaScript already has an arguments array? Well, the thing is, the arguments OBJECT is an ARRAY-LIKE STRUCTURE, meaning it’s not an array. It’s like an array, in that we can access arguments inside the “arguments object” by using indexed entries, such as argument[3]. Unlike an array, we cannot use array features such as map, push, pop, etc. As per Mozilla, it “does not have any Array properties except length.”[B] What the rest parameter does is place unnamed arguments inside an array, which we can manipulate as any other array.

Why use the arguments object at all?

The arguments object does still have it’s uses. Only unnamed parameters are placed in the rest parameter, so to access named parameters you still need to use their binding names, or reference their index in the arguments object. Another feature that the arguments object has is the callee function, which holds the current executing function. This itself can be it’s own topic, so I’ll let the reader look it up further for now.

In conclusion, both labels have their own reasons to be used, and I would like to think of them as complementary to each other.

ECMAScript 2017 padEnd() and padStart()

Posted on

Two new methods implemented in the 2017 version of Javascript are padEnd and padStart. Both methods pad a string with second string, until the result is of the desired indicated length. Given that the return value of padEnd and padStart are new Strings, and the original strings are unmodified, the methods a “pure”, as they do not cause side-effects.  As you can see from the examples below, this is true as str1 in the example is unmodified.

Screen Shot 2018-09-08 at 1.04.49 AM

Now the length of our example string, str1 is 17.  If the target length is less than the size of the primary string, the primary string will be returned. If the target length is less than the size of the primary string and the added string, the added string will be truncated to fit the target length. Example below:

Screen Shot 2018-09-08 at 1.14.54 AM.png

If your browser doesn’t have these methods because it doesn’t support ECMAScript 2017 you can actually write your own methods and add them to the String prototype, extending it. I changed the styling such that it can fit in a smaller picture, so heres an example of padEnd() implemented by me: below. See also the repl link if you would like to play with it

Screen Shot 2018-09-08 at 1.37.56 AM

Screen Shot 2018-09-08 at 1.42.44 AM.png

Uncaught TypeError: Super expression must either be null or a function, not undefined in React app

Posted on Updated on

Running a react app, nothing is showing up.

This is the error I am getting in console:

Uncaught TypeError: Super expression must either be null or a function, not undefined

From bundle.js:22486

In console, I  expand and click on the link to  bundle.js:22486

I get back this line, but the important part is at the end:

    function _inherits(subClass, superClass) { if (typeof superClass !== “function” && superClass !== null) { throw new TypeError(“Super expression must either be null or a function, not ” + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // import React, {Componenet} from ‘react’

Can you see what was wrong?

I spelled Component wrong. But the error doesn’t directly say that, you need to dig a little.

One I fixed the error, I was able to see my app

React: TypeError: Cannot read property ‘request’ of undefined

Posted on

I was getting the error : TypeError: Cannot read property ‘request’ of undefined  while I was building a react lab.

 

I noticed it said something about components not installed. I had ran npm install before but that wasn’t the fix.

 

yarn install is what fixed it, looks like some packages depended on yarn rather than npm.

 

Heroku: No default language could be detected for this app.

Posted on

I was uploading a vanilla JavaScript application to heroku.

Looks like I will need a buildpack for it to deploy. This is so Heroku can understand what type of app it has.

Solution1: Just deploy it as a github page. 

Since its a static site, there is nothing “serving” index.html, and heroku is a cloud platform, hosting apps, not a “webhost” in the web 2.0 sense.

Since I want to keep everything on heroku for now, lets see what else we can do.

Attempted Solution: rename index.html to index.php

The least effort solution is to rename your default file to index.php and redeploy. Heroku will detect it as a PHP site and use that buildpack. – John Beynon

Very curious! Would this work? Why not try it out.

hmm appears to work! I was going to deploy a sinatra app or ry the heroku static bundle and I will probably do that anyway but this quick solution can be a real timesaver!

Deploy your Rails API onto Heroku

Posted on Updated on

 

Go to your Heroku Dashboard. Click “new”-> “create new app”

Screen Shot 2018-06-13 at 11.09.15 AM

Give your app a name and click “Create app”

Screen Shot 2018-06-13 at 11.12.34 AM

There are several ways to deploy

  • Heroku CLI  – push your project up to Heroku from your command line
  • Github – Heroku is connected to github, so everytime github is updated your app is
  • Dropbox connected
  • Container Registry

We will be using Heroku CLI. If you need to install  use these instructions

By default Heroku ONLY supports the master branch. If you want to push up a branch other than master follow these instructions.

Add Heroku as a remote to your project

heroku git:remote -a name-of-your-heroku-app

Push your project to Heroku

git push heroku master

Did you just get an error? Did you use sqlite3 for your project?

remote: An error occurred while installing sqlite3 (1.3.13), and Bundler cannot
remote: continue.
remote: Make sure that `gem install sqlite3 -v ‘1.3.13’` succeeds before bundling
remote:
remote: In Gemfile:
remote: sqlite3
remote: !
remote: ! Failed to install gems via Bundler.

Click here for the fix.

Migrate and seed your database

In your command line run the following commands.

  • heroku run rake db:migrate
  • heroku run rake db:seed

Test your API using Postman

To get the address, just go back to the Heroku dashboard and click on “Open app” to get the link to your online api

Screen Shot 2018-06-13 at 12.56.13 PM

If you made it this far, your API should be deployed and now test it as you did locally (you did test locally didn’t you???).

The reason you need postman is if you setup your Rails API correctly when you query your site via browser you should get an error

This appname-api.herokuapp.com page can’t be found

but if you connect to it via postman you should get back the appropriate response

 

 

Converting Rails from sqlite3 to PostgreSQL

Posted on

Your mod 3 and 4 projects were probably done using sqlite3. If you did your mod5 project in sqlite3, tsk tsk!

  • edit your Gemfile
  • comment out sqlite and add gem pg
  • Screen Shot 2018-06-13 at 11.51.49 AM
  • run “bundle install”
  • edit config/database.yml
  • Change your databases names, as below.
  • Screen Shot 2018-06-13 at 12.01.58 PM
  • run rake db:create
  • run rake db:migrate
  • run rake db:seed(if you have a seed file)
  • Now test your app, and you are now using Postgres!

How do I know that it worked?

  • Go to the little Postgres elephant, and click him
  • Press stop
  • Screen Shot 2018-06-13 at 12.11.01 PM
  • If your site does not work, then you migrated successfully. Refresh your browser if needed
  • Now start up Postgres so you can continue developing!