ISOMORPHIC ARCHITECTURE

ISOMORPHIC ARCHITECTURE

• Reason not use single page web:

• - SEO Poor  SEO, cannot serve HTML to crawlers

• - Performance if the server doesn’t render a full page of HTML but instead waits for client-side JavaScript to do so

• - Maintainability

We want to serve fully-formed HTML from the server for performance and SEO, but we want the speed and flexibility of client-side application logic. To this end, we’ve been experimenting at Airbnb with “Isomorphic JavaScript” apps, which are JavaScript applications that can run both on the client-side and the server-side.

By creating the appropriate abstractions, we can write our application logic such that it runs on both the server and the client — the definition of isomorphic JavaScript.

Abstraction

• Routing handlers need to be able to access HTTP headers, cookies, and URI information, and specify redirects without directly accessing window.location (browser) or req and res (Node.js).
• Fetching and persisting data
• View rendering
• Building and packaging

react-native note

Feature

One of it’s unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.

It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

virtual DOM

react element : lives in the virtual DOM

react component : has render function, and has state| no access to the virtual DOM




JSX （ JavaScript Syntax eXtension ， JavaScript 語法擴充）

vue, multipart upload

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
export const doImageUpload = ({ dispatch, state }, file, resizeArr) => {
  const SIGNUP_USER_URL = 'http://localhost:3000/api/v1/upload/upload'

  var fd = new FormData() // eslint-disable-line
  fd.append('file', file)
  console.log('going to post : ' + file.size / 1000 + 'mb')

  var start = new Date().getTime()
  Vue.http.post(SIGNUP_USER_URL, fd, {
    headers: {
      'Content-Type': undefined
    }
  })
  .success(function (result) {
    var returnList = []

    for (let index in resizeArr) {
      var w = resizeArr[index].w
      var h = resizeArr[index].h
      returnList.push(result.fileUrl + '?imageView2/2/w/' + w + '/h/' + h + '/q/100/format/jpg')
    }
    returnList.push(result.fileUrl)
    dispatch('DO_IMAGE_UPLOAD', returnList)
  }).error(function (error) {
    console.log(error)
  })
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



/**
 * Upload floorplan file for the given buildId
 */
 // requiredLogin
router.post("/upload", _pre_form, function(req, res) {
  var files = req.uploadFile;
  var fileLocalPath = files.path;

      console.log(" -------- 3 ")

  fs.readFile(fileLocalPath, function(err, data){
      console.log(" -------- 4 ")
      if(err){
        res.status(httplib.INTERNAL_SERVER_ERROR).json({code: 2021,error: errorMsg(2021, err)});
      }

      console.log(" -------- 5 ")
      var base64Data = data.toString('base64');
      var theFile = new AV.File(files.name, {base64: base64Data});
      theFile.save().then(function(result) {
      console.log(" -------- 6 ")

          res.status(httplib.OK).json({
              fileId: result.id,
              fileName: result.name(),
              mimeType: result.metaData().mime_type,
              fileUrl: result.url()
          })

      },function(err){
        res.status(httplib.INTERNAL_SERVER_ERROR).json({code: 2021,error: errorMsg(2021, err)});
      });
  });

});

zapier, trello, bitbucket 整合

當 bitbuket 創建新的 issue，系統會同步到 trello 上，而且在會 trello 上創建新的 card
zapier.com/app/explore

Unity Test 單元測試

Principle 

is to isolate each part of the program and show that the individual parts are correct. A unit test provides a strict, written contract that the piece of code must satisfy. As a result, it affords several benefits.

Ideally, each test case is independent from the others. Substitutes such as method stubs, mock objects, fakes, and test harnesses can be used to assist testing a module in isolation

Benefits

• Find problems early
• TDD helps you to realise when to stop coding. Your tests give you confidence that you've done enough for now and can stop tweaking and move on to the next thing.
• Unit Tests help you really understand the design of the code you are working on. Instead of writing code to do something, you are starting by outlining all the conditions you are subjecting the code to and what outputs you'd expect from that.
• Contrary to popular belief unit testing does not mean writing twice as much code, or coding slower. It's faster and more robust than coding without tests once you've got the hang of it.
• 
  

limitation

• 測試不可能發現所有的程式錯誤，單元測試也不例外。
• 單元測試只測試程式單元自身的功能。因此，它不能發現整合錯誤、效能問題、或者其他系統級別的問題。
• 單元測試只能表明測到的問題，不能表明不存在未測試到的錯誤。

code refactoring

代碼重構 code refactoring

There are two general categories of benefits to the activity of refactoring.

1. Maintainability. It is easier to fix bugs because the source code is easy to read and the intent of its author is easy to grasp.^[4] This might be achieved by reducing large monolithic routines into a set of individually concise, well-named, single-purpose methods. It might be achieved by moving a method to a more appropriate class, or by removing misleading comments.
2. Extensibility. It is easier to extend the capabilities of the application if it uses recognizable design patterns, and it provides some flexibility where none before may have existed.^[1]

Purpose

1. 在極限編程或其他敏捷方法學中，重構常常是軟體開發迴圈的一部分：開發者輪流增加新的測試和功能，並重構代碼來增進內部的清晰性和一致性。自動化的單元測試保證了重構不至於讓代碼停止工作。
2. 重構既不修正錯誤，又不增加新的功能性。反而它是用於提高代碼的可讀性或者改變代碼內部結構與設計
3. 移除死代碼，使其在將來更容易被維護
4. 一個重構的小範例是修改一個變數的名稱使其具有更明確的含義，例如從單個字母的「i」重構為「interestRate」。較複雜的重構是把一段if區段中的代碼變為一個子程式。

來源

• 重構這個術語是從數字與多項式的因式分解類比而來。如，x² − 1可以被分解為(x + 1)(x − 1)，這樣揭示了前面的形式不可見的內部結構（如兩個根+1和−1）。同樣，在軟體重構中，在可見結構上的改變通常會揭示原代碼中「隱藏」的內部結構。

stress test, loda test, 壓力測試, node.js

常見的 stress test 工具為 java 的 JMeter, 但對 Nodejs server 做壓力測試可以用開源使用者開發的 library, 例如 loadtest 和 nodeload .

What is load-test, stress-test, and identity

Load testing is the process of putting demand on a software system or computing device and measuring its response.
Load testing is performed to determine a system's behavior under both normal and anticipated peak load conditions.
It helps to identify the maximum operating capacity of an application as well as any bottlenecks and determine which element is causing degradation.
When the load placed on the system is raised beyond normal usage patterns to test the system's response at unusually high or peak loads, it is known as stress testing.

Methodology 

There is little agreement on what the specific goals of load testing are. The term is often used synonymously with concurrency testing, software performance testing, reliability testing, and volume testing. Load testing is usually a type of non-functional testing, but it can be used as a functional test to validate suitability for use.

Nodejs VS Apache

http://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php

nodeload

 is a collection of independent node.js modules for load testing HTTP services.
https://www.npmjs.com/package/nodeload

NODE STRESS SUITE

is a collection of independent node.js modules for load testing HTTP services.
https://github.com/Samuel29/NodeStressSuite

loadtest

Runs a load test on the selected HTTP or WebSockets URL. The API allows for easy integration in your own tests.
https://github.com/alexfernandez/loadtest

stress test, loda test, 壓力測試

What is load-test, stress-test, and identity

Load testing is the process of putting demand on a software system or computing device and measuring its response.
Load testing is performed to determine a system's behavior under both normal and anticipated peak load conditions.
It helps to identify the maximum operating capacity of an application as well as any bottlenecks and determine which element is causing degradation.
When the load placed on the system is raised beyond normal usage patterns to test the system's response at unusually high or peak loads, it is known as stress testing.

Methodology 

There is little agreement on what the specific goals of load testing are. The term is often used synonymously with concurrency testing, software performance testing, reliability testing, and volume testing. Load testing is usually a type of non-functional testing, but it can be used as a functional test to validate suitability for use.

nodeload

 is a collection of independent node.js modules for load testing HTTP services.
https://www.npmjs.com/package/nodeload

NODE STRESS SUITE

is a collection of independent node.js modules for load testing HTTP services.
https://github.com/Samuel29/NodeStressSuite

loadtest

Runs a load test on the selected HTTP or WebSockets URL. The API allows for easy integration in your own tests.
https://github.com/alexfernandez/loadtest

nodejs, express, middleware, use globally

Execute the CallBack function for every request (GET, POST). 

////////////////////////////////////////////////////
////////////////////////////////////////////////////

app.use(function (req, res, next) {
  console.log('Time:', Date.now( ));
});

//GET /api/v1/me/buildin

//Time: 1472093395081

////////////////////////////////////////////////////

////////////////////////////////////////////////////

shema design

RDBMS 

is the basis for SQL, and for all modern database systems like MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access. A Relational database management system (RDBMS) is a database management system (DBMS) that is based on the relational model as introduced by E. F. Codd.

Advantage of DocumentBD: 

左圖用了5個 Table 才能表達所需的資料結構, 右圖只需要 2 個Table 加上4個embed 的資料就能表達資料結構

設計時需要考慮到的因素:

• 訪問模式決定了 schema 設計 (例如: Product -> Brand ; 同樣 Brand -> Product )
• 數據庫讀寫操作的比例以及是否需要重點優化某一方的性能 (例如: 多數用戶先從 user 開始進行查詢)
• 查詢和更新的操作類型
• 數據生命周期和文檔的增長率

數據對像之間存在 3 種類型的關系

• 1-1
• 1-n
• n-n

資料庫正規化

python, machine learning, quandl, tutorial

• Tutorial from:

https://www.quandl.com/blog/api-for-global-stock-data

• Register a account :

• Look for the stock which you are interested, some of them is free and some not:

https://www.quandl.com/browse

• Then get the Quandl Code, and paste it into the code:

set environment variable before npm start, nodejs

Set environment variable before npm start

 package.json

...
"scripts": {
  "start": "node app.js",
  "test": "CONFIG=abc mocha --reporter spec"
},
...

app.js

console.log(process.env.CONFIG)  //abc

ndoejs, function, object

• 
  Properties of an object are looked up from two places:
  1. the object itself (Obj.foo), and
  2. if the property does not exist, on the prototype of the object (Obj.prototype.foo).

• 
  New objects are created using a constructor, which is a regular function invoked using new
• 
  The new constructor call (e.g. new Foo()):
  1. creates a new object,
  2. sets the prototype of that object to Foo.prototype and
  3. passes that as this to the constructor.

node.js allow cross domain - method 2

////////////////////////////////////////////////////////////////////////////
/////////////////////////////////  app.js      ///////////////////////////
////////////////////////////////////////////////////////////////////////////

var cors = require('cors');

var corsOptions = {
  origin: '*'
};
app.use(cors(corsOptions));

app.use('/', routes);
app.use('/v1/users', users);

node.js allow cross domain - method 1

////////////////////////////////////////////////////////////////////////////
/////////////////////////////////  app.js      ///////////////////////////
////////////////////////////////////////////////////////////////////////////

var allowCrossDomain = require('./middleware/cors')

app.use(allowCrossDomain);

app.use('/', routes);
app.use('/v1/users', users);


////////////////////////////////////////////////////////////////////////////
/////////////////////////////////  cros.js ///////////////////////////////    ////////////////////////////////////////////////////////////////////////////
// cros.js is a middleware function, enable every routers accept cros http connection

module.exports = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Headers', 'istaging_token');
    next();
}

leancloud, node.js 雲引擎 環境變數

process.env['facebookKey']

vue note

xss

from: https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC

Cross-site-scripting

攻擊手段和目的[編輯]

攻擊者使被攻擊者在瀏覽器中執行指令碼後，如果需要收集來自被攻擊者的資料（如cookie或其他敏感資訊），可以自行架設一個網站，讓被攻擊者通過JavaScript等方式把收集好的資料作為參數提交，隨後以資料庫等形式記錄在攻擊者自己的伺服器上。

常用的XSS攻擊手段和目的有：

• 盜用cookie，取得敏感資訊。
• 利用植入Flash，通過crossdomain權限設定進一步取得更高權限；或者利用Java等得到類似的操作。
• 利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻擊）用戶的身分執行一些管理動作，或執行一些一般的如發微博、加好友、發私信等操作。
• 利用可被攻擊的域受到其他域信任的特點，以受信任來源的身分請求一些平時不允許的操作，如進行不當的投票活動。
• 在瀏覽量極大的一些頁面上的XSS可以攻擊一些小型網站，實作DDoS攻擊的效果。

python

pip install -r requirement.txt


virtualenv env //create virtual env
source env/bin/activate // start virtual env
deactivate 

pip install -e 




pip list //view installed library
pip freeze > requirement.txt //npm -save

Pillow installation issue:

sudo yum install python-devel
sudo yum install zlib-devel
sudo yum install libjpeg-turbo-devel

PIP installation:

wget https://bootstrap.pypa.io/get-pip.py

python get-pip.py

DDOS Kali linux 教學

在 linux 上實現 DDOS 攻擊非常簡單, 只需要有2個工具即可 

1.  perl  - 多用作寫系統管理工具, Kali linux 預設就安裝好perl 
2.  slowloris - 實作ddos 攻擊的套件, 只要一個指令即可安, 一個指令設定權限就可使用

本例子是開2台 VM , 一台 Kali 用作 DDOS 主機 , 一台 Ubuntu 用作 Apache2 web server , 而且監察所有的連線. 在影片可以看到, Apache server 剛啟動後網頁瀏覽暢順 , 但當DDOS連線攻擊開始後 , Apache2 server 進入癱瘓狀態 , 瀏覽器再度連線完全沒有回應.

• 第一步 - 安裝Slowloris

$wget https://raw.githubusercontent.com/lla...
$chmod +x slowloris.pl

• 第二步 - 執行 DDOS

$perl ./slowloris.pl -dns 192.168.1.106 -options

mac, vim color

1- Create this file 

vim ~/ .vimrc

2- Add this content in .vimrc

filetype plugin indent on

syntax on

set t_Co=256

set term=builtin_beos-ansi

set term=builtin_ansi

set term=xterm-256color

django tutorial

installation :

pip install Django 

django-admin startproject mysite

python manage.py migrate

python manage.py runserver

• manage.py: A command-line utility 
•  mysite/ directory is the Python package for the project. Its name is the Python package name you’ll need to use to import anything inside it (e.g. mysite.urls).
• mysite/__init__.py: An empty file, considered a Python package.
• mysite/settings.py: Settings/configuration
• mysite/urls.py: The URL declarations for this Django project; a “table of contents” of your Django-powered site. You can read more about URLs in URL dispatcher.
• mysite/wsgi.py: An entry-point for WSGI-compatible web servers to serve your project. See How to deploy with WSGI for more details.

model - migrate 
DB

Module, package:

google storage nodejs 上傳教學

最近在整合 node server 檔案上傳到google cloud storage , 發現可以的工具只有 google 官方推出gcloud 工具. 但缺少和前端 檔案上傳 和 ACL 設定, 所以為大家介紹第三方套件, 針對上傳檔案到 google cloud storage 而設計 ,

https://www.npmjs.com/package/gcloud-storage-api

• 提供3個google cloud storage 檔案的function , 

前2個上傳function, uploadLocalFile 和 uploadBuffer 而且設定為public link 下載， 以 formidable 方式 獲得multipart 檔案和 json:

googleAPI.uploadLocalFile(BUCKET_NAME, fileName, fileLocalPath)
googleAPI.uploadBuffer(BUCKET_NAME, fileName, buffer)
googleAPI.deleteStorageFile(url)

• 安裝:

$ npm install --save gcloud-storage-api

• 使用:

service-key 和 account  的設定可以參考官方教學:

https://www.npmjs.com/package/gcloud


1- 到google cloud console 中新增 Credentials, 選 service account key

2- key 類型選 JSON , 檔案下載請放到nodejs 的目錄底下

3- 成功下載的service-key.json 

4- service-key.json 的內容如下

{
  "private_key_id": "******",
  "private_key": "******",
  "client_email": "******",
  "client_id": "******",
  "type": "service_account"
}

5- node_modules/gcloud-upload-api 有一個測試用的html 檔案, 可以用作測試

google storage nodejs 上傳教學

最近在整合 node server 檔案上傳到google cloud storage , 發現可以的工具只有 google 官方推出gcloud 工具. 但缺少和前端 檔案上傳 和 ACL 設定, 所以為大家介紹第三方套件, 針對上傳檔案到 google cloud storage 而設計 ,

https://www.npmjs.com/package/gcloud-storage-api

• 提供3個google cloud storage 檔案的function , 

前2個上傳function, uploadLocalFile 和 uploadBuffer  是以 formidable 方式 獲得multipart 檔案和 json:

googleAPI.uploadLocalFile(BUCKET_NAME, fileName, fileLocalPath)
googleAPI.uploadBuffer(BUCKET_NAME, fileName, buffer)
googleAPI.deleteStorageFile(url)

• 安裝:

$ npm install --save gcloud-storage-api

• 使用:

service-key 和 account  的設定可以參考官方教學:

https://www.npmjs.com/package/gcloud


1- 到google cloud console 中新增 Credentials, 選 service account key

2- key 類型選 JSON , 檔案下載請放到nodejs 的目錄底下

3- 成功下載的service-key.json 

4- service-key.json 的內容如下

{
  "private_key_id": "******",
  "private_key": "******",
  "client_email": "******",
  "client_id": "******",
  "type": "service_account"
}

5- node_modules/gcloud-upload-api 有一個測試用的html 檔案, 可以用作測試