Node.js
beginners guide to gulp Node.js modules basics to advanced Node.js best practices using modern-features 以資料庫查詢操作為例,傳統實現方式像: res = db.query('SELECT * FROM some_table'); res.output(); 執行到第一行時可能會阻塞,改用 db.query('SELECT * FROM some_table', function(res) { res.output(); }); 裡面的函式被稱為回呼函式,用以改善阻塞的問題。架構上就是以 Event Loop 為處理核心,不致產生多行執緒而防止惡意攻擊。
How might Serverless impact Node.js Ecosystem React.js vs Angular the-typescript-tax File Upload with Node.js understanding JSON in javascript angular unit testing jasmine karma step by step introducing akita a new State Management pattern for Angular Applications
教學 By Example #1 #2 #3 #4 Productivity Tools, Plugins and Libraries Install CLI with the --unsafe-perm Option
Python Essentials for Node.js Developers
19-ways to become better node.js developer in-2019
$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - $ sudo apt-get install -y nodejs $ sudo npm install npm --global ## To install the Yarn package manager, run: curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt-get update && sudo apt-get install yarn
Mac Installer: installed at /usr/local/bin/node /usr/local/bin/npm
// app.js var http = require('http'); http.createServer(function(req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write('<h1>Node.js</h1>'); res.end('<p>Hello World</p>'); }).listen(3000); console.log("HTTP server is listening at port 3000.");
可再安裝 supervisor 來執行上述程式
// readfile.js var fs = require('fs'); fs.readFile('file.txt', 'utf-8', function(err, data) { if (err) { console.error(err); } else { console.log(data); } }); console.log('end.');
// readfilesync.js var fs = require('fs'); var data = fs.readFileSync('file.txt', 'utf-8'); console.log(data); console.log('end.');
並不是所有 Node.js API 都提供同步和非同步版本,原則上並不鼓勵同步 IO。
Event 是由 EventEmitter 提供
// event.js var EventEmitter = require('events').EventEmitter; var event = new EventEmitter(); event.on('some_event', function() { console.log('some_event occured.'); }); setTimeout(function() { event.emit('some_event'); }, 1000);
NPM Node Package Manager
Beginner Guide: 分成 local 或 global 模式,前者把檔案安裝在 node_modules 目錄,後者在 {prefix}/lib/node_modules 目錄。另外可參考 global without sudo
$ npm config get prefix /usr/local $ npm config set prefix=$HOME/.node_modules_global $ cat .npmrc
By Example #1
package-lock.json 應該被放進版本管理系統,可協助團隊能建置一致的開發環境。
Functional Programming 的函式庫很多,像 Ramda, lodash, Underscore 都是,但導入過程常有門檻。
$ npm install lodash@4.17.4
peerDependencies
安裝 jQuery 後透過 var $ = require('jquery') 使用
server.js 負責讀取網址需求並回應
var emptygif = require('emptygif'); var express = require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(server); app.get('/tpx.gif', function(req, res, next) { io.emit('visit', { ip: req.ip, ua: req.headers['user-agent'] }); emptygif.sendEmptyGif(req, res, { 'Content-Type': 'image/gif', 'Content-Length': emptygif.emptyGifBufferLength, 'Cache-Control': 'public, max-age=0' // or specify expiry to make sure it will call everytime }); }); app.use(express.static(__dirname + '/public')); server.listen(1337);
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Reltime pixel tracking dashboard</title> <style type="text/css"> .visit { margin: 5px 0; border-bottom: 1px dotted #CCC; padding: 5px 0; } .ip { margin: 0 10px; border-left: 1px dotted #CCC; border-right: 1px dotted #CCC; padding: 0 5px; } </style> </head> <body> <h1>Realtime Pixel Tracking Dashboard</h1> <div class="visits"></div> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function() { var socket = io(); var containerEl = $('.visits'); socket.on('visit', function(visit) { var newItem = '<div class="visit">'; newItem += '<span class="date">' + moment().format('MMMM Do YYYY, HH:mm:ss') + '/span' newItem += '<span class="ip">' + visit.ip + '</span>'; newItem += '<span class="ua">' + visit.ua + '</span></div>'; containerEl.append(newItem); }); }); </script> </body> </html>
Gulp 編譯 SASS 範例
var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src('./sass/*.sass') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')); });
Gulp imagemin and boost your sites performance Node.js v6 的 ES6 特色
npm vs yarn npm 5 開始支援 package-lock.json
Passport.js 處理 Authentication 登入 Passport + Express
Debug Tips and Inspector Discord Bot
Browser Storage: IndexedDB
Translator: Babel 7.0.0 Major Breaking Changes
Plone 5 Theme
Preparing the Setup 下列安裝方式應該已不適用
$ sudo apt-get install npm $ npm install -g grunt-cli 會失敗嗎? 會的話 要修改 theme-package.rst
在專案目錄裡安裝開發環境
$ cd src/my.prj/src/my/prj/theme $ npm install grunt --save-dev $ git diff package.json @@ -4,5 +4,8 @@ "version": "1.0.0", "dependencies": { "bootstrap": "^3.3.7" + }, + "devDependencies": { + "grunt": "^1.0.3" } }
自行 local 安裝的方式如下
$ mkdir ~/.npm $ vi ~/.npmrc prefix=${HOME}/.npm $ vi ~/.bashrc NPM_PACKAGEs="${HOME/.npm" PATH="$NPM_PACKAGES/bin:$PATH" $ source ~/.bashrc $ npm install grunt-cli
# 可能是較好的步驟 $ cd plone511/zinstance/src/cgis.website $ npm install $ npm install grunt-cli --save-dev $ vi src/cgis/website/theme/barceloneta/less/variables.plone.less $ node_modules/grunt-cli/bin/grunt compile
Webpack
webpack-dev-server --mode development --open --port 3000
webpack from 0 to automated-testing
summary-of-webpack-4-fundamentals by sean-larkin part-1-of-4 why-webpack
how-to use reactjs with webpack-4-babel-7 and material-design from Grunt to Webpack Webpack2 Beginner Guide setup google analytics React, Webpack, Babel from Scratch Code Splitting with Webpack and React
Resolving Globally Installed Dependencies
Deployment
Express 是 Node.js 官方推薦的 Web Framework 除了 http 模組外,還提供路由控制,模板解析,動態視圖,使用者階段,CSRF保護,靜態檔案服務,錯誤控制器,快取,外掛程式支援
var express = require('express'); var app = express.createServer(); app.use(express.bodyParser()); app.all('/', function(req, res) { res.send(req.body.title + req.body.text); }); app.listen(3000);
Express.js Mongo App to AWS https://yami.io/you-might-not-need-nodejs/
security: your silence will not protect you
# to clean up useless modules npm cache clean --force
Chat App with socket.io Flask + React.js + Socket.io
full stack puppy adoption example: knex sqlite orm
test case in your Node app using mocha
最近有個專案被掃出 Client Potential XSS 的 issue, 但報告寫的是打包後的 js ``` 方法window["webpackJsonp"]=window["webpackJsonp"]||[]).push在healthindex/js/map.4f1b.js第1 行獲取使用者輸入的value元素。該元素的值於程式流程中沒有被正確地過濾(Filter)或驗證,並最終顯示 於使用者端方法DisplayDetails()在healthindex/js/map.4f1b.js的1行。這可能為跨站腳本(Cross-SiteScripting)攻擊。 ```