Tony Pai tpai

Install Dependencies

yarn add babel-eslint \
eslint \
eslint-config-airbnb \
eslint-loader \
eslint-plugin-import \
eslint-plugin-jsx-a11y \
eslint-plugin-react

Learning Redux Saga With Simple Example

The concept of saga is like event loop, take effect/helpers for watching action, call effect for handling async request and put effect for dispatching different stage of actions(loading, loaded, failed...). Unlike thunk get invoked on every actions, saga only run once at the start and process watching in the background. About saga and thunk, two of the most common differences are async task could be cancelled at any moment, and the structure of saga is easy for developer to test different stage of actions.

###Flow

Update specific article title of list:

Keep watching
Component dispatch UPDATE_TITLE action

Isomorphic App 開發要注意的 Webpack 設定

前情提要

鍵盤發電機是當初與 @steveice 和 @vansteki 參加百度黑客松 2013 時的作品，後端技術有 Node.js & Express & Socket.io，前端技術則是 jQuery，現在要對這個專案進行重構。

前端後端設定大不同

開發相關

專案

devops
Scrum: Jira
Kanban: Trello

溝通

https://developers.google.com/web/updates/2019/02/rendering-on-the-web#wrapup

前端常見的網站攻擊

ClickJacking: 利用視覺誤判誘導使用者點擊按鈕或連結引導至其它頁面。
XSS: 將語法注入網站(儲存型)，或透過網站發出（反射型），在使用者不自覺的情況下致使瀏覽器執行該語法。
CSRF: 利用受信任的使用者在夾帶驗證資訊的情況下發出非法請求。

Ref:

Clickjacking漏洞的原理

CSRF漏洞的原理

Recently, I'm writing React.js unit test, it confused me for a while when need to stub React component method with expect spy.

Without Class Properties

export default class Sample extends React.Component {
    sampleMethod() {
        console.log("SAMPLE");
    }
 render() {

Improve NextVOD

I don't know how to deal with NextVOD box since NextTV abandoned this service, and there's a group of people make this box live again but with difference uses.

Basic

sh4twbox

ram256mb

Classical / Modern Extend Pattern

Classical 在此並不是指傳統或者是經典，而是書中作者用來代表與 Class 相關的意思。而 Modern 則沒其他用意，就是指現在常用的意思。

Recommend Book: Learning Javascript Design Patterns

推薦書籍：Javascript 設計模式

The prototype pattern focuses on creating an object that can be used as a blueprint for other objects through prototypal inheritance. This pattern is inherently easy to work with in JavaScript because of the native support for prototypal inheritance in JS.

	Vagrant.configure(2) do \|config\|
	config.vm.box = 'ubuntu/xenial64'
	config.vm.network 'forwarded_port', guest: 3000, host: 3000
	config.vm.network 'private_network', ip: '10.10.10.10'
	config.vm.provider 'virtualbox' do \|vb\|
	vb.name = 'repo_name'
	vb.auto_nat_dns_proxy = false
	vb.customize ["modifyvm", :id, "--natdnsproxy1", "off" ]
	vb.customize ["modifyvm", :id, "--natdnshostresolver1", "off" ]
	vb.memory = '4096'