Manatee Mistakes: Error: listen EADDRINUSE :::8080

This edition of Manatee Mistakes is about the error I encountered:

Error: listen EADDRINUSE :::8080

I was running node (or nodemon to be precise) in GitBash. I thought my selected window was Sublime, so I pushed control + z to undo some typed text. However, I was actually in GitBash, and the control + z was executed in GitBash. This ungracefully closed my nodemon.

I started nodemon again, but I got this error:

Error: listen EADDRINUSE :::8080

(8080 was the port I was using)

Using Google, I found this Stack Overflow Q/A: https://stackoverflow.com/questions/9898372/how-to-fix-error-listen-eaddrinuse-while-using-nodejs

Answers gave several options, which were all for UNIX, but I’m on Windows 10 using Git Bash.

The kill -15 PortNumberHere trick did not work for me as the kill command is unrecognized in Git Bash on Windows 10.

However, it gave me a clue to end the process with the PID. Thus, I went to Windows Task manager and I found the PID. From the Windows GUI, I selected the PID and pushed “End Task”.

That killed the process for me, and I was able to use port 8080 again.

Node EADDRINUSE Error in Windows 10
Received the EADDRINUSE error in Windows? Go to Task Manager and select the PID you want to end.

Another work around would be to use another port. (But that process from the original port would still be open in the background).

Manatee Mistakes: Uncaught ReferenceError: ReactDOM is not defined

I am going to start blogging about errors and mistakes I have made while programming and what I did to fix them or circumvent them!

Here is my first entry:

Uncaught ReferenceError: ReactDOM is not defined

I made this error the first time I used a CDN for React (instead of downloading the npm module or using Webpack).

I google’d and used the first link: https://cdnjs.com/libraries/react

For development, I want to use the full version (not minified), so I selected  https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js.

I loaded only this script tag.

https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js

I got the error:

Uncaught ReferenceError: ReactDOM is not defined

What? I thought that this was all I needed!

I tried to import on my index.jsx (which had the ReactDOM.render()), but that didn’t alleviate the problem.  I read Stack Overflow. Apparently, I needed to also include the script react-dom file as well. So I did:

https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js

Doing just that gave me a really strange error (something like “do not use externally or you will be fired”), that I wish I took a screenshot of!

Thoroughly confused, I got the help of a mentor, and he got new CDNs for both React and React-DOM. Plus we used the crossorigin attribute, and that cleared all errors up. The ReactDOM.render() worked perfectly!

First Time with CDN
First Time with CDN

Pseudoclassical Instantiation in ES2015

Last month I posted about the various instantiation styles in ES5.  This month let’s take a look at how to instantiate in ES2015 aka ES6!

First let’s review how we instantiate in ES5.

ES5 Superclass

We are making a class called Furniture. It takes in arguments h, w, and d, which become equal to this.height, this.width, and this.depth, respectively.  Furniture also has the property this.material, which is preset to ‘wood’. Lastly, we gave Furniture a method called calcSqFootage. When called, it returns the product of this.height, this.width, and this.depth.

var Furniture = function(h, w, d) {
  this.height = h;
  this.width = w;
  this.depth = d;
  this.material = 'wood';
};

Furniture.prototype.calcSqFootage = function(){
  return this.height * this.width * this.depth;
};

ES5 Subclass

Next we make a subclass of Furniture. It is called Table, and its parameters are h, w, and d. If the superclass requires these parameters, the subclasses require them too.

Next we must connect Table to Furniture. We do this by using the .call() method.  We want to call the class Furniture and give it the context of this subclass as well as pass the parameters.

Now the Table subclass inherits the height, width and depth properties and the calcSqFootage method from the Furniture superclass. It has new properties for finish and distressing.

In the last two lines below, we need to connect the subclass’ prototype property to the superclass’ prototype, so that the methods can be inherited. So we create a new object with Object.create() and re-assign Table.prototype. Object.create() creates a new object with an inheritance chain.

Lastly since we re-assigned the value of Table.prototype, we lost the constructor property of Table.prototype. We need to add it back, so that we will be able to use it in the case we want to figure out which function created a certain instance object.

var Table = function(h, w, d) {
  Furniture.call(this, h, w, d);
  this.finish = 'Espresso';
  this.distressing = false;
};
Table.prototype = Object.create(Furniture.prototype);
Table.prototype.constructor = Table;

We instantiate in ES5:

var myMediaCenter = new Furniture(84, 72, 16);
var myDiningTable = new Table(32, 60, 36);

Now let’s turn the above into ES6!

 

ES2015/ES6 Superclass

Even though the below code looks different, it functions the same as the code above.

We pass in the arguments h, w, and d to the constructor. (Note the constructor here is different than the constructor property! The constructor here is a method for creating and initializing an object created within a class). The parameters give values to this.height, this.width, and this.depth respectively. We still have the property this.material equal to ‘wood’.

Lastly we have the calcSqFootage method inside the class block.

class Furniture {
  constructor (h, w, d) {
    this.height = h
    this.width = w
    this.depth = d
    this.material = 'wood'
  }
  calcSqFootage() {
    return this.height * this.width * this.depth;
  }
};

 

ES2015/ES6 Subclass

With a subclass, we must do two things to show it is a subclass. The first thing is to declare that it is a subclass by using the extends keyword. We say that the subclass extends the superclass.

The constructor will take in the same arguments (h, w, and d). The next new part is that we call super(). This is about equivalent to the Furniture.call(this, h, w, d) in ES5.

Like in ES5, the Table subclass inherits the height, width and depth properties and the calcSqFootage method from the Furniture superclass. It has new properties for finish and distressing.

With the ES6 syntax, we do not need to use Object.create() or set the constructor for Table.prototype and Table.prototype.constructor. The syntax does it all for us.

class Table extends Furniture {
  constructor (h, w, d) {
    super(h, w, d);  
    this.finish = 'Espresso'
    this.distressing = false
  }
};

We instantiate in ES6 similar to ES5:

var myMediaCenter = new Furniture(84, 72, 16);
var myDiningTable = new Table(32, 60, 36);

 

In this post, we have reviewed the ES5 pseudoclassical instantiation style of a class and its subclass. Then we contrasted it with the ES2015/ES6 syntax. The ES6 syntax is different, but its underlying functionality is the same as ES5.

How to Install Sublime Packages in 30 seconds

Intro

If you are using Sublime, Sublime Packages can be super helpful! This takes 30 seconds!

Below is first a text version. Underneath it is the graphic version.

 

How to Install Sublime Packages in 30 Seconds (Text Version)

For this example, we downloaded Babel, a transpiler for ES2015:

  1. In Sublime, Command+Shift+P on Apple or Control+Shift+P on Windows
  2. After 1-2 seconds, an input area appears. Type in it ‘Package’
  3. Select ‘Package Control: Install Package’
  4. After 1-2 seconds, a new input area appears. Type in the package you want. Ie. ‘Babel’. Select the package
  5. Sublime downloads it (you can see status at bottom)
  6. Now you can use your package! For Babel, you will go to the bottom right to change input type from Javascript > Babel > Javascript Babel

You’re done and ready to download more packages!

 

How to Install Sublime Packages in 30 Seconds (Graphic Version)

For this example, we downloaded Babel, a transpiler for ES2015:

  1. In Sublime, Command+Shift+P on Apple or Control+Shift+P on Windows
  2. After 1-2 seconds, an input area appears. Type in it ‘Package’
  3. Select ‘Package Control: Install Package’

    Sublime Text 3: Select Package Control: Install Package
    Select Package Control: Install Package
  4. After 1-2 seconds, a new input area appears. Type in the package you want. Ie. ‘Babel’. Select the package

    Sublime Text 3: Type in Package Name to Download
    Type in Package Name to Download
  5. Sublime downloads it (you can see status at bottom)

    Sublime Text 3: See Sublime Installing the Package
    Sublime Installing the Package at Bottom of Window
  6. Now you can use your package! For Babel, you will go to the bottom right to change input type from Javascript > Babel > Javascript Babel
    Sublime Text 3: For Babel, Select the Code Type in Bottom Right
    For Babel, Select the Code Type in Bottom Right
    Sublime Text 3: Select the Language
    Select the Language (Babel Package, JavaScript)

    Sublime Text 3: Babel is Now In Use
    Babel is Now In Use

You’re done and ready to download more packages!

Quick Comparison of AngularJS, Backbone, and React

Quick Comparison of AngularJS, Backbone, and React

This past week, my bootcamp dived into  MVC and the AngularJS, Backbone, and React frameworks.

Since this went all very fast, I would like to do a quick comparison of those 3 framework’s similarities and differences. This would give me insight on what to look for when I use other frameworks

Or if you are familiar with one of these frameworks, and you wanted to dive into another, this could help you relate the two.

To note, for our use of AngularJS, we focused on using components over directives

Quick Comparison of AngularJS, Backbone, and React
Topic AngularJS Backbone React
Documentation AngularJS Backbone React
Templating {{ }} <%= %> {} to escape JSX, “, ${}
Libraries or Dependencies jQuery, Underscore ES6, Babel
Relation to MVC Module, View, Controller/Whatever Model, View, Collection View (Component)
AJAX Calls $http.get() .fetch() $.get()
Designing the Front-End Use HTML templates and/or edit HTML files Use HTML templates and/or in JS files append HTML elements to DOM Edit JSX files using React Code or JSX which acts like HTML
How to Pass Data We used AngularJS similar to React passing down data from parent to children. To receive data,  HTML should pass down the info from the parent. Then ensure  component in JS file has specified bindings. The Model is an instance. Models are passed to a Collection. Collection of Models is passed into View by creating instances of View. Views have initialize and render functions. Models, Collections, and Views all extend respective Backbone classes. (Ie. var MyView = Backbone.View.extend({})) Pass down data through Views or Components. All Views are instances of React.Component Ie. class MyView extends React.Component{}. In addition to constructor methods, they have render methods. Children cannot interact with each other; only parent can communicate to children and pass props down through JSX.
Things to Look Out for camelCase in JS. kebab-case in HTML. Ie. When passing down a function with name onClick, use on-click in HTML Determine if writing React Code or JSX and ES6 or ES5

What are some things you look out for when learning new frameworks?

 

Image Credits:
By AngularJS – https://github.com/angular/angular.js/tree/master/images/logo, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=31016280
By Unknown –
https://upload.wikimedia.org/wikipedia/commons/2/20/Backbone.js_logo.svg
By Facebook – https://github.com/facebook/react/blob/master/LICENSE-docs, https://en.wikipedia.org/wiki/File:React-icon.svg#file
Sublime 3 JavaScript Console (in Windows)

Sublime 3 JavaScript Console (in Windows)

ARE YOU INTERESTED IN USING A CONSOLE INSIDE SUBLIME 3?

Do so, by checking out this link: JavaScript console in Sublime Text  by Pawel Grzybek!

For the past 3 weeks, I have been using Sublime 3 as my text editor. When I went to use Console, I was getting the error in the screenshot above saying [WinError 2] The system cannot find the file specified ….

If you are using Windows, and you are getting the same error I did, please reference that link. It takes 30 seconds, and your Console will work.

One of the reasons I am posting this is to give that blog post more backlinks/higher SEO because it was so helpful for me. (And if I can’t find it in my bookmarks and I have gotten new hardware or reformatted).

Windows Sublime 3 with Console [fixed]
My Sublime 3 Console works!

Tips on Writing Recursive Functions

Currently I am a newcomer to recursive functions.  When I started receiving prompts to write code that used recursion, my code didn’t work the way I wanted it to.

After practice, I have learned from my mistakes. I have still a ways to go, but I wanted to share the mistakes I was making and how to avoid them. Because if I made these mistakes, someone else might be making them too!

My Experience

First I’ll talk about my experience. Feel free to skip down to more general tips.

The first half of my problem was to pinpoint the concept I did not understand! After practice and office hours, I figured out that my lack of understanding was that I was not bringing up the value returned from the recursive call through the call stack.

Frantically trying to make my code work, I would throw in return statements in experimental places hoping to see a pattern. You can probably guess that didn’t work out.

I had a fuzzy understanding of what my code was doing. I didn’t fully understand everything in recursion, and since I didn’t, recursion was kind of like magic.

My course’s tech mentor recommend that I watch the call stacks in Chrome DevTools and/or draw the execution contexts out. I did both. I was not returning the right thing (if anything)!

By watching the call stacks in Chrome DevTools and drawing the execution contexts out, I saw my misunderstandings, and I concretely learned:

  1. Every time you recurse, you create a new execution context. If you start with a variable called counter equal to 0 in your recursive function, every time you recurse, the new execution context’s variable counter will be 0.
  2. Every time you recurse, if you have a return statement, your return statement will return something to the execution context above it.
  3. If you need something returned from the recursive function, when you call the recursive function, don’t just call it. Do something with what it returns. Do you need to save it to a variable? Do you need to add it to something? Push it to an array? Must it evaluate to true to do something else?

Just knowing that has clarified so many things!

Tips

Here are some other things to keep in mind. Some things you may know like the back of your hand, and others you may be great reminders.

Other Tips on Writing

  • Understand what your function needs to do
  • Make sample input
  • Make sample output for it (Is it an array, Boolean, object, etc.)
  • Looking at your sample output, find the common pattern. What are you getting? What changes between each input and output?
  • Figure out what the smallest or most basic output should be.
  • Write code that will get you this base case
    • (Note: There may be more than 1 base case)
  • Think of how you would get the other output (not the base case). This is probably where the recursive call comes in.
  • In your recursive call, pass in the correct amount of arguments
  • If you are returning something from your recursive call, make sure to save it a variable, so that it can be returned up through the call stacks

Tips on Debugging/Understanding Your Recursive Function

  • If you have a for loop, follow your code and write the output of what your recursive loop should be
    • Write the output of what your 1st recursive loop should be
    • Write the output of what your 2nd recursive loop should be
    • Write the output of what your 3rd recursive loop should be
    • … And so on
  • Draw out the execution context
  • Console.log is your friend
  • Use Chrome DevTools and watch the call stack
    • You can compare it to what you wrote your expected output to be

For other newcomers like me, do you have any questions on writing recursive functions? For experienced programmers, what tips would you share from when you learned recursion?

(This post may be edited over time)