[react.js] react-redux 使用流程

實作大多採用react-redux來整合原本的redux，
對於第一次入手的人感覺就是要懂一堆第三方套件後才能好好寫。
自已久久寫一下也會忘記大部份的邏輯，所以記錄一下。

目錄結構

actions =>放觸發的action定義
   -index.js =>負責匯出各redux的動作

constants => app state，
  -models 把各別的state 分類
      -index.js 匯出每個個別的app state
  -ActionTypes.js 匯出action要用的變數

reducers =>定義所有reducers
  -ui
    -UIReducer.js => Layout的reducer
  -index.js =>匯出所有reducers並combine所有reducer

store
  - index.js => 匯入所有app reducers與產生一個app store

產生一個新的redux動作

1. 到constants/models定義新的redux state
2. 到constants/index.js 匯出剛剛定義的 reduxstate
3. 到ActionType.js加新的redux事件
4. 到actions新增一個對應的 <你的新redux命名>Actions.js 檔案
5. 到reducers新增一個對應的reducer，<你的新redux命名>Reducer.js 檔案
6. 到reducers/index.js 匯入剛剛新加的reducer
7. 到containers下找對應的container元件呼叫要使用的actions並匯入


1. 登入元件範例    
2. 
   

[CSS] css置中大法大全

找到一篇講述各種方法滿足你元素各種置中需求
https://css-tricks.com/centering-css-complete-guide/

[Git] 讓merge不用再輸入訊息

最近在處理shell使用git merge都會跳出上圖所示的的訊息互動視窗，

會讓整個想透過sh自動化無法完成，還好可以加上--no-edit參數就可以避過啦。

以下是最完整的語法：

git merge --no-ff develop --no-edit

[Git] 從https 的clone變更為ssh

由於先前使用https來clone repo，如果要變動的可以透過以下指令變更回ssh

git remote set-url origin git@github.com:username/your-repository.git

[Bootstrap 3] 在行動裝置重新排序Column

剛好做客戶有遇到，要在手機layout的改變column的位置，
簡單來說就左右調換，其實bootstrap裡面就有支援行 re-ordering了。
可以參考以下範例

https://codepen.io/Schmalzy/pen/iJdgD

[Git] 移除已經commit的資料

由於目前專案有需要移除先前commit的資料夾，
查到了以下指令，有用到就筆記一下。

git rm -r -n --cached "bin/" //-n：加上这个参数，执行命令时，是不会删除任何文件，而是展示此命令要删除的文件列表预览。 git rm -r --cached "bin/" //最终执行命令. git commit -m" remove bin folder all file out of control" //提交 git push origin master //提交到远程服务器

http://blog.csdn.net/chenxu6/article/details/50542295

[bootstrap 3] 如何簡單快速覆寫bootstrap的樣式

如果懶的用less來重build bootstrap的樣式的話，
通常你會在link下面多引用一個你要覆寫bootstrap.min.css的客製化樣式。
但你會發現有可能覆寫失敗，
有些人會建議使用大絕招!important 屬性，
找到stackoverflow另一篇建議:
https://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap/20542297#20542297
因為css選擇器有權重的特性，
可以加上id的名稱去覆寫，這樣就不失彈性啦!

例如自訂一個nav-customer來覆寫nav的相關設定
header #nav-customer{
background-color: rgba(0, 0, 0, 0.6);
}

參考
https://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap/20542297#20542297

[AngularJS] 如何覆寫舊的路由狀態state

由於有客戶客製化的需求，
需要改寫原本路由的介面，
但為了共用核心不變，
找到了可以在run的時候覆寫舊的路由的方法:D

angular.module('module2', ['ui.router'])
.run(['$state', function($state){
  var state = $state.get('先前的路由命名');
  state.templateUrl = '新的樣版';

}]);

[react.js] 初學筆記

記錄一下react.js學習上要懂的ecosystem，
做一下自已要速查的note

npm套件管理工具

node.js用來裝需求的套件的工具，安裝完的套件可以給node.js後端用或透過webpack ES6方法來載入套件

webpack build tool (可以用Gulp+browserify)

因為早期都用gulp，但webpack出到v3了，這次就換試webpack這個工具

[react.js] 雷雷小伙伴之坑

記錄一下菜B巴react.js之旅的error

Warning: Invalid DOM property `class`. Did you mean `className`?

就是JSX裡面用了html的保留字class啦，要用className

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

//死亡的原因是import加了{}

// import { App}  from './components/App';

import  App  from './components/App';

[node.js] 如何切換development與production模式

有關node.js處理NODE_ENV來切換developer/production的方法種類

export NODE_ENV=production

Or if you are in windows you could try this:

SET NODE_ENV=production

or you can run your app like this:

NODE_ENV=production node app.js

You can also set it in your js file:

process.env.NODE_ENV = 'production';

https://stackoverflow.com/questions/9198310/how-to-set-node-env-to-production-development-in-os-x

[node.js] 如何在node.js做好logger的監控

剛開始寫node.js，還是習慣先找一個logger的套件來trace系統。
這篇文章:node-js-logging-tutorial(也完整說明各種log的使用方法)介紹了winston這個套件，有興趣的新手可以試一下。

https://github.com/winstonjs/winston

[node.js] 快快樂樂學node.js (五) 開始連接mysql

現在要來說明如何連結mysql，
這裡使用node.js的mysql套件(https://github.com/mysqljs/mysql#introduction)，可以簡單進行與mysql進行連線。

[node.js] 快快樂樂學node.js (四) REST API 模組化-使用控制器

在上一篇
[node.js] 快快樂樂學node.js (三) 實作第一個REST API (沒有採用資料庫)

的範例中，並沒有將程式碼考慮到如果有愈多不到資源的REST要處理的話(例如:用戶/Blog等等)，

程式碼就會顯示的不好管理，因此我們要將messages拆分到另一個js檔案裡

[node.js] 快快樂樂學node.js (三) 實作第一個REST API (沒有採用資料庫)

由於大家開始習慣所謂的SPA 單一頁面應用程式架構，
前端可以搭任何喜歡的前端框架，例如vue.js/angular/react.js，
因此後端就只要負責與前端透過REST API溝通，
REST API的理論就不多說明了，直接記錄在node.js express如何實作

[node.js] 快快樂樂學node.js (二) 如何設定自動重啟

先前有說到如果你沒有用任何套件的話，
基本上修改程式過程是很麻煩的，
因此要裝一些套件來達到這件事，
而且一個完整的範例，要包含前後端，
早期有一些grunt套件，目前個人則偏愛用gulp相關套件:D

[node.js] 快快樂樂學node.js (一) 啟動第一個express環境

閱讀jollen大大的node.js express的學習筆記，
方便自已速查，有興趣的朋友可以參閱。
github: https://github.com/jollen/nodejs-fullstack-book
我只從express章節開始記錄!!

[GA] 如何報考GA

如果你想要取得GA認證(免費的)
可以透過成為Google Partners即可免費參與考試 :D

https://www.google.com.tw/partners/about/join.html

選擇加入的tab


之後填了一些資訊後，可以到達以下頁面
https://www.google.com.tw/partners/#p_analyticscertification
就會看到右下的側欄有參加考試的資訊了!!




參考
https://support.google.com/analytics/answer/4553001?hl=zh-Hant

[Gulp] 快快樂樂學gulp- 起手式

記錄一下簡單的gulp筆記

gulp可以試用於window/linux開發環境，
這裡只介紹我在mac使用過程。

前置作業- 安裝npm

安裝gulp

npm install --global gulp

or

#g就是global的意思，通常都用這個

npm install gulp -g 

gulp設定檔

使用gulp的專案內部需安裝以下二個檔案

package.json: 記錄安裝的npm套件

gulpfile.js: 撰寫你的任務流程

有了此二個設定檔，未來clone此專案就能快速建置開發環境

常用指令介紹

gulp.task

gulp.watch

gulp.src

gulp.desc

初始化你的gulpfile.js  (一個最簡單的範例)

var gulp = require('gulp');
// 我們可以建立一個預設任務，當只輸入 $>gulp 指令時執行的任務
gulp.task('default',['build'],function(){
console.log('run default');
});
gulp.task('build',['build'],function(){
console.log('run build');
});

執行

$>gulp

其他壓縮打包js/css套件

gulp-concat：合併檔案
gulp-minify-css：壓縮 CSS
gulp-uglify：混淆並壓縮 JS
gulp-rename：重新命名檔案

npm install gulp-concat --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-uglify --save-dev
npm install gulp-rename --save-dev

參考

https://www.gitbook.com/book/powerbear0083/gulp-install-record

http://www.oxxostudio.tw/articles/201503/gulp-2-compress-js-css.html

https://987.tw/2014/07/09/gulpru-men-zhi-nan/
https://www.slideshare.net/sfismy/gulpjs
https://www.slideshare.net/appleboy/automating-your-workflow-with-gulp

[iOS] webview操作

記錄一下webview的使用

清空

[self.webView loadHTMLString:@"" baseURL:nil];