May The Nodejs Be With You

May The Node.js Be With You@dalibor_gogic

Node.js®

Is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

https://nodejs.org/

$ sudo apt-get update$ sudo apt-get install nodejs$ sudo apt-get install npm

Optional: install build tools

To compile and install native addons from npm you may also need to

install build tools:

$ sudo apt-get install build-essential libssl-dev

To confirm that you have Node.js installed:

$ node -v

> v7.2.0

To confirm that you have npm installed:

$ npm -v

> v4.0.3

Use a Node.js Version Manager

Since you probably already have node, the easiest way to install n

is through npm:

$ npm i -g n

https://github.com/tj/n/

Installing/Activating Versions

Use or install the latest official release:

$ n latest

Stable:

$ n stable

Latest:

$ n lts

Woot! Nightly:

$ NODE_MIRROR=https://nodejs.org/download/test/ n \

v8.0.0-test201610181280ed2be7

npm

Package manager for JavaScript. Find, share, and reuse packages of code

from hundreds of thousands of developers — and assemble them in new

ways.

https://www.npmjs.com/

Nov/25 358842 packages

Avg Growth 470/day

The best way to manage locally installed npm packages is to create a

package.json file.

As a bare minimum, a package.json must have:

{

"name": "foo",

"version": "1.0.0"

}

To create a package.json:

$ npm init -y

// package.json{

"name": foo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

Optional config options for the init command. Some useful ones:

$ npm set init.author.email "[email protected]"

$ npm set init.author.name "Dalibor Gogic"

$ npm set init.license "MIT"

$ npm help json

Install a package

$ npm i (with no args, in package dir)

$ npm i [<@scope>/]<name>

$ npm i [<@scope>/]<name>@<tag>

$ npm i [<@scope>/]<name>@<version>

$ npm i [<@scope>/]<name>@<version range>

$ npm i <tarball file>

$ npm i <tarball url>

$ npm i <folder>

common options: [-S|--save|-D|--save-dev|-O|--save-optional] \ [-E|--save-exact]

[--dry-run]

https://docs.npmjs.com/

EditorConfig

Helps developers define and maintain consistent coding styles between

different editors and IDEs.

// .editorconfig

root = true

[*]

indent_style = space

indent_size = 2

end_of_line = lf

charset = utf-8

trim_trailing_whitespace = true

insert_final_newline = true

[*.md]

trim_trailing_whitespace = false

EditorConfig:

http://editorconfig.org/

Sublime Text PlugIn:

https://github.com/sindresorhus/editorconfig-sublime/

Atom PlugIn:

https://github.com/sindresorhus/atom-editorconfig/

Git

Git allows groups of people to work on the same documents (often code)

at the same time, and without stepping on each other's toes.

$ sudo apt-get update

$ sudo apt-get install git

$ git --version

Git version 2.7.4

https://git-scm.com/

First-Time Git Setup:

$ git config --global user.name "dalibor"

$ git config --global user.email [email protected]

$ git config --global core.editor "subl -n -w"

$ git init

Initialized empty Git repository in /home/dalibor/foo/.git/

$ git status

On branch master

Initial commit

Untracked files:

(use "git add <file>..." to include in what will be committed

package.json

nothing added to commit but untracked files present (use "git add" to

track)

$ git add package.json

$ git commit -m "initial package.json"

$ git status

[master (root-commit) 87568a5] initial package.json

1 file changed, 12 insertions(+)

create mode 100644 package.json

Docs: https://git-scm.com/doc

TryGit: https://try.github.io

$ touch app.js

// app.js

'use strict'

const app = require('express')()

app.get('/', (req, res) => {

res.send('Hello World!')

})

app.listen(3000, () => {

console.log('Access at [::1]:3000')

})

ESLint

The pluggable linting utility for JavaScript.

http://eslint.org/

$ npm i -g eslint

$ eslint --init

$ eslint --env browser, node app.js/foo/app.js

1:2 error Comments should not begin with a lowercase character capitalized-comments

2:21 error Strings must use doublequote quotes

...

Standard - ESLint Shareable Config

https://github.com/feross/eslint-config-standard/

// package.json

{

"name": "foo",

"version": "1.0.0",

"scripts": {

"dev": "node app.js",

"start": "NODE_ENV=production node app.js",

"lint": "eslint --env browser, node app.js",

"test": "echo \"Error: no test specified\" && exit 1"

},

"dependencies": {

"express": "^4.14.0"

}

}

$ npm run lint

// package.json

{

"name": "foo",

"version": "1.0.0",

"scripts": {

"predev": "npm run lint",

"dev": "node app.js",

"start": "NODE_ENV=production node app.js",

"lint": "eslint --env browser, node app.js",

"test": "echo \"Error: no test specified\" && exit 1"

},

"dependencies": {

"express": "^4.14.0"

}

}

$ npm run dev

Nodemon

Monitor for any changes in your node.js application and automatically

restart the server.

https://github.com/remy/nodemon/

$ npm i -g nodemon

Or from directory that contains package.json

$ npm i -D nodemon

// package.json

{

"name": "foo",

"version": "1.0.0",

"scripts": {

"predev": "npm run lint",

"dev": "nodemon app.js",

"start": "NODE_ENV=production node app.js",

"lint": "eslint --env browser, node app.js",

"test": "echo \"Error: no test specified\" && exit 1"

},

"dependencies": {

"express": "^4.14.0"

},

"devDependencies": {

"nodemon": "^1.11.0"

}

}

$ npm run dev

Pug

High performance template engine heavily influenced by Haml and implemented with JavaScript

for Node.js and browsers.

> This project was formerly known as "Jade."

https://github.com/pugjs/pug/

$ npm i -S pug

// app.js

'use strict'

const app = require('express')()

app.set('view engine', 'pug')

app.get('/', (req, res) => {

res.render('index', {

title: 'Pug'

})

})

app.listen(3000, () => {

console.log('Access at [::1]:3000')

})

// views/index.pug

doctype html

html(lang="en")

head

meta(charset="utf-8")

title= title

body

h1 Hello World

// index.html

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Pug</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

Stylus

Expressive, dynamic, robust, feature-rich CSS preprocessor

http://stylus-lang.com/

$ npm i -D stylus

Variables

// style.styl

font-size = 14px

body

font font-size Arial, sans-serif

// style.css

body {

font: 14px Arial, sans-serif;

}

Parent Reference

// style.styl

input

color #a7a7a7

&:hover

color white

// style.css

input {

color: #a7a7a7;

}

input:hover {

color: white

}

Functions

// style.styl

add(a, b)

a + b

body

padding add(10px, 5)

// style.css

body {

padding: 15px;

}

CONDITIONALS if / else if / else

// style.styl

overload-padding = true

if overload-padding

padding(y, x)

margin y x

body

padding 5px 10px

// style.css

body {

margin: 5px 10px;

}

@import

// bar.styl

.bar

width 10px

// style.styl

.foo

@import "bar.styl"

@media screen and (min-width: 640px)

@import 'bar.styl'

...

Try Stylus Online

// style.css

.foo .bar {

width: 10px;

}

@media screen and (min-width: 640px) {

.bar {

width: 10px;

}

}

// package.json

{

...

"scripts": {

"stylus": "stylus -w --sourcemap-inline assets/css/main.styl -o public/css/main.css",

...

},

...

}

Npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

https://github.com/mysticatea/npm-run-all/

$ npm i -S npm-run-all

// package.json

{

...

"scripts": {

"stylus": "stylus -w --sourcemap-inline assets/css/main.styl -o public/css/main.css",

"server": "nodemon app.js",

"dev": "npm-run-all --parallel stylus server"

},

...

}

$ npm run dev

Autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use

https://github.com/postcss/autoprefixer/

Autoprefixer for stylus

https://github.com/jescalan/autoprefixer-stylus/

$ sudo npm i -g autoprefixer-stylus

// package.json

{

...

"scripts": {

"stylus": "stylus -u autoprefixer-stylus \

-w --sourcemap-inline assets/css/main.styl -o public/css/main.css",

"server": "nodemon app.js",

"dev": "npm-run-all --parallel stylus server"

},

...

}

$ npm run dev

// assets/stylus/main.styl

.foo

display flex

// public/css/style.css

.foo {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

/*#

sourceMappingURL=data:application/json;base64

,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL2Fz

c2V0cy9zdHlsdXMvbWFpbi5zdHlsIl0sIm5hbWVzIjpbX

SwibWFwcGluZ3MiOiJBQUFBO0VBQ0ksT0FBTSxLQUFOO0

VBQ0EsU0FBUSxLQUFSIiwiZmlsZSI6Im1haW4uY3NzIiw

ic291cmNlc0NvbnRlbnQiOlsiYm9keVxuICAgIGNvbG9y

IHJlZFxuICAgIGRpc3BsYXkgZmxleCJdfQ== */

BrowserSync

Synchronised browser testing

https://www.browsersync.io/

$ sudo npm i -g browser-sync

// package.json

{

...

"scripts": {

"stylus": "stylus -u autoprefixer-stylus -w --sourcemap-inline assets/stylus/main.styl

-o public/css/main.css && browser-sync reload --port 4000 --files='public/css/main.css'",

"sync": "browser-sync start --ws -f '**/*' --proxy localhost:3000 --no-open --port 4000

--reload-delay=300 --reload-debounce=500",

"server": "nodemon -e js app.js",

"dev": "npm-run-all --parallel sync stylus server",

"start": "NODE_ENV=production node app.js",

"lint": "eslint --env browser, node app.js",

"test": "echo \"Error: no test specified\" && exit 1"

},

...

}

$ npm run dev

May The Node.js Be With You

https://github.com/daliborgogic/may-the-nodejs-be-with-you/

SSH:

$ git clone [email protected]:daliborgogic/may-the-nodejs-be-with-you.git foo

HTTPS:

$ git clone https://github.com/daliborgogic/may-the-nodejs-be-with-you.git

Download ZIP

Thank You

Ad :]

Vue.js

Intuitive, Fast and Composable MVVM for building interactive interfaces..

https://vuejs.org/

https://vuejs.org/v2/guide/comparison.html