Node.js & Express Fundamentals by egoing (Part 1 of 4: Intro)

JL’s Self-teaching Story #32

Copyright ©️ Node.js

[JL’s Self-teaching Story] Series

[Net Ninja] JS Regular Expressions
[Net Ninja] Vue JS2 (Part1, Part2, Part3)
[Net Ninja] Vuex
[Net Ninja] Python3 (Part1, Part2, Part3)
[Net Ninja] Django (Part1, Part2, Part3)
[Net Ninja] Sass (Part1, Part2)
[Sean Larkin] Webpack4 (Part1, Part2, Part3, Part4)
[Sarah Drasner] VueJS (Part1, Part2, Part3, Part4, 
                       Part5, Part6, Part7)
[Evan You] Advanced VueJS (Part1, Part2, Part3,
                           Part4, Part5, Part6, Part7)
[Egoing] Node.js (Part1(current))

🌲 This is the first part of my summary of egoing’s “Node.js Fundamentals & Facebook Social Login” tutorial. I attended it at the Facebook Innovation Lab in Korea on Oct 10 & 11, 2018. GitHub page can be accessed here.

[Day 1: Intro Part 1] 
    1-1.  VS Code Tips
    1-2.  GitHub Desktop
    1-4.  Commands in Terminal/Command Line
    1-5.  JS Data Types
    1-6.  Understanding URLs
[Day 2: Intro Part 2] 
    2-1.  CLI
    2-2.  Node.js Intro
    2-3.  Web Server for Chrome
    2-4.  How to Create a Web Server in Node.js
    2-5.  VIM

1–1. VS Code Tips

• Type “lorem” & press tab: generate a random text
• alt + Z: word wrap (show all code in one screen)
• cmd + J : open terminal in VS code
• cmd + S: save

1–2. GitHub Desktop

GitHub Desktop is an open source Electron-based GitHub app. It is written in TypeScript and uses React.

#1 Attribute commits with collaborators easily

Quickly add co-authors to your commit. Great for pairing and excellent for sending a little love/credit to that special someone who helped fix that gnarly bug of yours. See the attribution on the history page, undo an accidental attribution, and see the co-authors on github.com

#2 Checkout branches with pull requests and view CI statuses

See all open pull requests for your repositories and check them out as if they were a local branch, even if they’re from upstream branches or forks. See which pull requests pass commit status checks, too!

#3 Syntax highlighted diffs

The new GitHub Desktop supports syntax highlighting when viewing diffs for a variety of different languages.

#4 Expanded image diff support

Easily compare changed images. See the before and after, swipe or fade between the two, or look at just the changed parts.

1–3. Commands in Terminal/Command Line

• pwd: displays the pathname of the current directory

$ pwd
/Users/HyejungLim/OpenTutorials

• ls: lists the names of the files in the working director

$ ls
Ajax    HTML    MongoDB NodeJS  jQuery

• cd <directory name>: go to a folder in the directory

Hyejungs-MacBook-Air:NodeJS HyejungLim$ cd innovation-lab-node.js/
Hyejungs-MacBook-Air:innovation-lab-node.js HyejungLim$

• cd..: brings you up one directory level.
• cd: returns you to your home directory.
• mkdir <new directory name>: makes a new directory
• rmdir <new directory name>: removes (deletes) an empty directory

1–4. JavaScript Data Types

console.log("hello");  // Hello World
console.log(1+1);  // 2
console.log("1"+"1");  // 11
a = 1;
console.log(a);  // 1
a = 2;
console.log(a);  // 2

JavaScript template literals: string literals allowing embedded expressions.

• You can use multi-line strings and string interpolation features with them.
• They were called “template strings” in prior editions of the ES2015 specification.
• Template literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes.

$ let name = "Jo";
$ console.log(`Hello! This is ${name}!
Nice to meet you!`);

The result would be :

Hello! This is Jo!
Nice to meet you!

1–5. Understanding URLs

http://opentutorials.org:3000/main?id=HTML&page=12

protocol: http
host(domain): opentutorials.org
port: 3000
path: main
query string: id=HTML&page=12

Express: harder to learn / easier to use

Node.js: easier to learn / harder to use

2–1. CLI

The word “programming” is used when something is conducted in an order.

“The user interface (UI), in the industrial design field of human–computer interaction, is the space where interactions between humans and machines occur” (Wikipedia)

Two main UIs are Graphic User Interface (GUI) & Command Line Interface (CLI). Some of CLI commands are the following:

$ ls -al: show the list of files in the folder
$ node -v: show the current version of Node.js
$ node --help: show all command lines for Node.js

2–2. Node.js Intro

Run Node.js: $ node

#1 Basics of JavaScript

> 5%2
1
> "1" + 1
'11'
> Math.floor(5/2)
2
> Math.random()
0.33950923030936875
> 'Hello, J!'.length
9
> 'Hello, J!'.replace('Hello', 'Hi')
'Hi, J!'
> 'Hello, J!'.replace('Hello', 'Hi').length
6
> let a=1; let b=3; a+b
4
> (new Date()).toString()
'Thu Oct 11 2018 15:48:28 GMT+0900 (Korean Standard Time)'

> To exit, press ctrl + c twice

#2 Run a certain file in Node.js

Run node <name of folder> / <name of file>.<file type> in terminal.

[innovation-lab-node]
- ex
  -- sum.js
-----------------------------------
[ex > sum.js]
let a=1; 
let b=3; 
console.log(a+b);
-----------------------------------
$ node ex/sum.js
4

2–3. Web Server for Chrome

• Don’t select the root directory!
• 127.0.0.1: my computer
• The link below of the local server: you can access another device when the same wifi is connected to both devices

2–4. How to Create a Web Server in Node.js

[STEP 1] HTTP module

// Node.js, bring on the "http" module!
let http = require('http');
console.log(http);

Let’s try!

$ node main.js

> display the whole list of the “http” module

[STEP 2] createServer()

let http = require('http');
let server = http.createServer();

> Nothing happened.

[STEP 3] listen()

let http = require('http');
let server = http.createServer();
server.listen();

> Got connected; But, the server keeps waiting for response

[STEP 4] response.writeHead()

let http = require('http');
let server = http.createServer(
  function(request, response){
    console.log('Hello, nice to meet you!');
    response.write('Hello, nice to meet you!');
    response.end();
  }
);
server.listen(3000);

In terminal, you can see that two requests were made.

> That’s because of “favicon.ico”.

[STEP 5] Ignore “favicon.ico”

let http = require('http');
let server = http.createServer(
  function(request, response){
    if(request.url == '/favicon.ico'){
      return response.writeHead(404);
    }
    var content = (new Date()).toString();
    response.write(content);
    response.end();
  }
);
server.listen(3000);

[STEP 6] Bring data. (Use template literals)

let http = require('http');
let server = http.createServer(
  function(request, response){
    if(request.url == '/favicon.ico'){
      return response.writeHead(404);
    }
    let content = `
      <!-- ENTER CODE -->
    `;
    response.write(content);
    response.end();
  }
);
server.listen(3000);

[STEP 7 …] To be continued

Please check out my next blog post 😃

2–5. VIM

With VIM, you can code w/o mouse. You’d just use shortcuts. It’d take quite a while until you get used to using it. But, once you get used to it, you’d love it!

How Vim killed Atom and VSCode on my Machine

Why I switched to VIM from Visual Studio Code

Egoing can be found on GitHub. He covers a variety of programming topics in Korean at his website “Open Tutorials”.

Thanks for reading! 💕 If you like this blog post, please clap👏

Lim🌲 at Twitter & GitHub.