Here have some good pictures that is helpful for understanding git and contain the record for git commend Concept Map Here is a concept map given by Udacity.com. This picture shows the relationship between these basic git concept. Git Data Transport Map Git have four working zones. This map shows that using which commend to shift your code from one zone to another. This photo is provide by osteele Git commend and usage Initialize the git repository git init

Vuex Document: English 中文 Concept State - App-level state/data Getters - Get pieces of state or computed values from state Actions - Called from components to commit mutation (async) Mutations - Mutate the state (sync) Modules - Each module can have its own state, getters, actions and mutations Work flow Vuex Workflow Vuex work flow is similar with Redux => More Detail about Redux Redux Workflow Basic structure In store/index.js

Vue Document: English 中文 life cycle Basic structure 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <template> <div></div> </template> <script> export default { name: '', props: [...], data() { return {}; }, computed:{ ... } methods: { ... } }; </script> <style lang="css"></style> Basic vue function v-bind 1 2 3 4 5 6 7 <option v-for="(user, idx) in Users" :key="idx" :value="user.

warning Many of JavaScript cool feature or syntactic sugar included since ES6(ES2015). You can read this Article to know What new feature brings in since ES6 Conversion Any => Boolean 1 2 3 4 5 6 7 8 !!false; // false !!undefined; // false !!null; // false !!NaN; // false !!0; // false !!''; // false !!variable == Boolean(variable); String => Integer 1 2 3 4 Number('100'); //100 +'100'; // 100 +'abc'; // NAN Object <=> Array Array => Object 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 let arr = [1, 2, 3, 4, 5]; let objFromArr1 = Object.

This posts only use as a remainder Variable Multiple assignment 1 x, y, name, is_cool = (1, 2.5, 'a name', True) Casting 1 2 3 4 x = str(x) # x will be string y = int(y) # y will be an integer String 1 2 3 4 5 6 name = 'Brad' age = 37 print('name is' + name + ' and age is ' + str(age)) print('name is {name} and age is {age}'.

chmod is linux command to control file permission usage chmod [u|g|o|a][=|+|-] [r|w|x] u => user g => group o => other a => all r => read w => write x => execute example chmod +wr test.txt give write and read permission for user chmod -r test.txt remove read permission for user chmod g=wrx test.txt give write, read and execute permission for group use number specific the bits 011101110111 => -rwx-rwx-rwx

socket.io enable realtime, bidirectional communication for Nodejs Backend We use Express as backend framework. 1 2 3 4 5 6 7 8 9 10 11 12 const express = require('express'); const path = require('path'); const http = require('http'); const socket_io = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socket_io(server); io.on('connection', (server_socket) => { // ... } Frontend bring client side socket.io in your html file 1 <script src="/socket.

ssh-keygen ssh-keygen -b specific the number of bits(1024 2048 4069) -m specific type -y get public key -f specific file name public key public key should give to server. Usually put in file ~/.ssh/authorized_key access via SSH ssh <username>@<hostname | ip address>

Heroku can help us deploy our application(back end) rapidly and easy deploy The only we need to take care is the PORT of your app. You have to use the PORT in environment. In Node.js 1 PORT = process.env.PORT || 3000; // 3000 can be anything else heroku cli Home page heroku login heroku create git push heroku master

Canvas is a new feature since html5 that allows you draw something on your web page Reference from MDN Project by using Canvas Chaos Game: Use canvas to draw the chaos game Draw panel with socket.io: A scribble panel with Websocket. Multi user can draw panel on simultaneously Draw on canvas Get start Jquery to get canvas. ctx mean canvas content which used to draw on canvas 1 2 const canvas = document.