Jame's Blog

report-dev-server:

  build: . #執行位置

  dockerfile: reportServer/Dockerfile  #相對執行位置

  container_name: report-dev-server  #容器名稱

  volumes:

    - ./reportServer/www:/www

  ports:

    - "3000:3000"

    - "3001:3001"

    - "3002:3002"

  stdin_open: true #開啟標準輸入(stdin)

  # tty: true #終端機



# 必須先在 report-dev-server 中執行 yarn run build

# 有了 build 資料夾之後才能使 report-server 正常運作

git rm -r --cached node_modules    

npm init --yes
npm init --force
npm init -y
npm init -f

{
  "name": "practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "James Yang",
  "license": "MIT"
}

"eslint" : "$(npm bin)/eslint --cache --fix ./"

{
  "scripts": {
    "test": "mocha tests/node-test.js",
    "start": "node index.js",
    "eslint": "$(npm bin)/eslint --cache --fix ./",
    "serial": "npm test && npm start && npm run eslint"
  }
}

{
    "scripts": {
    "test": "mocha tests/node-test.js --watch & wait",
    "start": "node index.js",
    "eslint": "$(npm bin)/eslint --cache --fix ./",
    "serial": "npm test && npm start && npm run eslint",
    "parallel" : "npm test & npm start & npm run eslint"
  }
}

npm i npm-run-all -D

{
  "scripts": {
      "test": "mocha tests/node-test.js --watch & wait",
      "start": "node index.js",
      "eslint": "$(npm bin)/eslint --cache --fix ./",
      "serial": "npm test && npm start && npm run eslint",
      "parallel" : "npm test & npm start & npm run eslint"
    }
}

{
  "scripts": {
      "test": "mocha tests/node-test.js --watch",
      "start": "node index.js",
      "eslint": "$(npm bin)/eslint --cache --fix ./",
      "serial": "npm-run-all test start eslint",
      "parallel" : "npm-run-all test start eslint"
    }
}

{
  "scripts": {
      "test": "mocha tests/node-test.js --watch",
      "start": "node index.js",
      "eslint": "$(npm bin)/eslint --cache --fix ./",
      "serial": "npm-run-all test start eslint",
      "parallel" : "npm-run-all test start eslint",
    }
}

stylefmt -r src/*.css scss/*.scss
stylefmt -r {src/*.css,scss/*.scss}

{
  "name": "practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "precustomScript": "echo 'precustomScript running'",
    "postcustomScript": "echo 'postcustomScript running'",
    "mocha": "mocha tests/node-test.js --watch",
    "customScript":  "echo 'npm run customScript'",
    "test": "npm-run-all lint mocha",
    "start": "node index.js",
    "eslint": "$(npm bin)/eslint --cache --fix ./",
    "serial": "npm-run-all test start eslint",
    "parallel": "npm-run-all --parallel test start eslint",
    "lint":"npm-run-all lint:**",
    "lint:js": "eslint --cache --fix ./",
    "lint:css": "stylelint '**/*.scss' --syntax scss",
    "lint:css:fix": "stylefmt -r 'src/*.css, scss/*.scss'"
  },
  "keywords": [
    "npm",
    "script",
    "practice"
  ],
  "author": "James Yang",
  "license": "MIT",
  "devDependencies": {
    "eslint": "^3.14.1",
    "npm-run-all": "^4.0.1",
    "stylefmt": "^5.1.1",
    "stylelint": "^7.8.0"
  }
}

{
    "watch:test" : "npm test -- --watch"
}

{
  "build" : "npm-run-all build:*",
  "prebuild": "rm -rf public/",
  "build:html" : "pug --obj data.json src/index.pug --out public/",
  "build:css" : "node-sass src/index.scss | postcss -c .postcssrc.json | cssmin > public/index.min.css",
  "build:js" : "mustache data.json src/index.mustache.js | uglifyjs > public/index.min.js"
}

{ 
  "watch":"npm-run-all --parallel watch:*",
  "watch:test" : "npm t -- --watch",
  "watch:lint" : "onchange '**/*.js' '**/*.scss' -- npm run lint"
}

npm run env | grep "npm_package" | less 

{
  "precustomScript":"echo 'precustomScript running' $npm_package_version"
}

"config" : {
  "port" : "1337"
}

npm i husky -D

{
  "scripts": {
    "precommit": "npm test",
    "prepush": "npm test",
    "...": "..."
  }
}

-s, --silent: --loglevel silent
-q, --quiet: --loglevel warn
-d: --loglevel info
-dd, --verbose: --loglevel verbose
-ddd: --loglevel silly

"scripts": {
    "//" : "Run, build, and serve"
    "start": "#🚀 Run, build, and serve \n\t node index.js",
   }

$ npm install --global p-s

$ nps init     

{ "test" : "./scripts/test.sh" }

#!/usr/bin/env bash
echo "Building..."
rm -rf public/$npm_package_version
echo "Finished"

mkdir scripts
touch scripts/{test,build,server}.js

import { exec } from "shelljs";
const isWindows = process.platform;
exec(`BABEL_ENV=test mocha spec/ --require babel-register`);

var express = require('express');
var app = express();

var hummus = require('hummus');

app.get('/', function(req, res) {
    res.writeHead(200, {'Content-Type': 'application/pdf'});
    // 輸出成檔案

    // var pdfWriter = hummus.createWriter(__dirname + '/output/TestOnlyMerge.pdf');

    // 輸出成網頁

    var pdfWriter = hummus.createWriter(new hummus.PDFStreamForResponse(res));

    // var pdfWriter = hummus.createWriter(new hummus.PDFRStreamForFile('./pdf/pdf-sample.pdf'));

    var page = pdfWriter.createPage(0, 0, 595, 842);

    pdfWriter.startPageContentContext(page).writeText(`雲端互動`, 0, 842 - 12, {
        font: pdfWriter.getFontForFile('./fonts/microsoft-jhenghei.ttf'),
        size: 12,
        colorspace: 'gray',
        color: 0x00
    });
    pdfWriter.writePage(page); //新增頁面


    //添加

    pdfWriter.appendPDFPagesFromPDF(__dirname + '/pdf/Qu_Mod3.PDF', {
        type: hummus.eRangeTypeSpecific,
        specificRanges: [
            [0, 2]
        ]
    });

    //合併

    pdfWriter.mergePDFPagesToPage(page, __dirname + '/pdf/Qu_Mod3.PDF', {
        type: hummus.eRangeTypeSpecific,
        specificRanges: [
            [2, 2]
        ]
    });

    pdfWriter.writePage(page); //新增頁面


    // 添加共用元素

    // var xobjectForm = pdfWriter.createFormXObject(0,0,200,100);

    // xobjectForm.getContentContext().q().k(0,100,100,0).re(0,0,200,100).f().Q();

    // pdfWriter.endFormXObject(xobjectForm);

    //

    // var pageContent = pdfWriter.startPageContentContext(page);

    // pageContent.q()

    //         .cm(1,0,0,1,200,600)

    //         .doXObject(xobjectForm)

    //         .Q();


    //結束

    pdfWriter.end();
    res.end();
});
app.listen(3000);

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "installedESLint": true,
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-console": "off",
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

npm install --save redux

npm install --save react-redux
npm install --save-dev redux-devtools

yarn add react-redux -S
yarn add redux-devtools -D  

npm start   

const ADD_TODO = 'ADD_TOTO'

{
  type:ADD_TODO,
  text:'Build my First Redux app'
}

import {ADD_TODO,REMOVE_TODO} from '../actionTypes'

function addTodo(text){
  return {
    type: ADD_TODO,
    text
  }
}

dispatch(addTodo(text));

{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

import { VisibilityFilters } from './actions'

const initialState = {
  visibilityFilter: VisibilityFilters.SHOW_ALL,
  todos: []
}

function todoApp(state, action) {
  if (typeof state === 'undefined') {
    return initialState
  }
  // 在現在，不要處理任何 action

  // 而只是回傳給我們的 state。

  return state
}

function todoApp(state = initialState, action){
  return state
}

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

import { createStore } from 'redux'
import todoApp from './reducers' // 用 combineReducers 把 reducer 合併在一起

let store = createStore(todoApp)

$ mkdir .ssh
$ chmod 700 .ssh
$ cd .ssh
$ touch authorized_keys
$ chmod 600 authorized_keys

ssh-copy-id -i ~/.ssh/id_rsa.pub username@remote-host-name     

// anti-pattern

var Car = Backbone.Model.extend({});
Car.manufacturersByCountry = function(country) {
    // custom logic to query manufacturers

}

var Car = Backbone.Model.extend({
  // instance methods


}, {
  // class methods


  manufacturersByCountry: function(country) {
    // custom logic to query manufacturers

  }
});

var Car = Backbone.Model.extend({
    initialize: function() {
        // my custom stuff

        // ..

        // ..


        Backbone.View.prototype.initialize.call(this);
    }
});

var Session = Backbone.Model.extend({
    _persistAuth: function() {
        // sensitive auth code

    }
});

module.exports = Session;

var persistAuth = function() {
    // sensitive auth code

};

var Session = Backbone.Model.extend({
    initialize: function() {
        // setup code

        // …

        if (this.isValid()) {
            persistAuth.call(this)
        }

    }
});

module.exports = Session;

var UserView = Backbone.View.extend({
  render: function() {
    React.renderComponent(new UserComponent(), this.el);
    return this;
  }
});

var Router = BackboneRouteControl.extend({
  routes: {
    "users":        "users#index",
    "users/:id":        "users#show",
    "users/:id/edit":   "users#edit"
  }  
});

var myRouter = new Router({
  controllers: {
    users: new UsersController()
  }
});

var UsersController = function() {
  return {
    index: function() {
    ...
    },
    show: function(id) {
    ...
    },
    edit: function(id) {
    ...
    }    
  };
};

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

var MyView = Backbone.View.extend({
  
    el : 'body',
  
    collection : new Backbone.Collection(),
    
    // 測試 collection 的綁定事件

    initialize: function(){
      this.listenTo(this.collection,"change",this.change),
      this.listenTo(this.collection,"add",this.add),
      this.listenTo(this.collection,"remove",this.remove)
    },
    
    change: function(e){
      console.log("change",e);
    },
  
    add: function(e){
      console.log("add",e);
    },
  
    remove:function(e){
      console.log("remove",e);
    }
  
});


var myView = new MyView();

// 開始測試

console.log(myView);

myView.collection.add(new Backbone.Model({"name":"001"}));
myView.collection.add(new Backbone.Model({"name":"002"}));
myView.collection.at(0).set("name","James");

console.log("collection",myView.collection); //此時有兩個 model


var first = myView.collection.at(0);
var secend = myView.collection.at(1);

myView.collection.remove(first); // 移除第一個


console.log("a",myView.collection,first);

secend.destroy({success: function(model, response) {
  console.log(model,response);
}}); 
// destory 時，會自動從 collection 移除

// 可以傳入一組 success callback  


console.log("b",myView.collection,secend);
// secend 還在 記憶體中，但是已經自動從 collection 移出