[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];

[Youtube] 360直播的一些設定

如果想要在youtube直播360影像，可以參考以下官方說明

https://support.google.com/youtube/answer/6396222?hl=tw

設定編碼器

如要直播 360 度影片，您必須變更編碼規格。

1. 選取 YouTube 直播平台上的 [活動]。提醒您，如果選取 [立即串流]，您就無法直播 360 度影片。
2. 前往「進階設定」，然後勾選「這是 360° 的現場直播影片」旁的方塊。如果您的裝置已整合 YouTube 直播的 360 度影片功能，您也可以透過我們的 API 進行直播。  
   
3. 設定編碼器：
1. 從系統支援的解析度和位元率中，選擇您可以提供的最高直播設定。
2. 直播 360 度影片時，建議採用 2160p 或 1440p 解析度。
3. 為了提供最佳影片品質，建議您採用 16:9 長寬比。進一步瞭解長寬比。

位元率參考

詳細可以參考

https://support.google.com/youtube/answer/2853702?hl=zh-Hant

位元率的計算 bitrate (bps = bit/s = bit per second)

找到一個人的參考

http://lotoria.pixnet.net/blog/post/25789773

檔案大小就看你的 bitrate 設多少, 

假設你設目標是(或稱平均) 1000kb/s, 那半小時是 30(分鐘)x60(每分60秒)=1800秒
那 1000kb/s x 1800s = 1800Mb, 1800Mb/8=225MB (1 byte = 8 bits) -> 

所以檔案大約 225MB (byte) 硬碟容量計算單為用 byte.

根據上述公式速算：
檔案大小 (MB) = (秒 * bit rate) / 8000
Bit rate  = 影片大小 * 8

在網路上抓了一個影片為 128.8MB檔案大小，長度為2.49分鐘的影片，

如何計算bitrate:

由於位元率是以bit 為單位，1 Bytes = 8 bits

依據公式 bitrate = 影片大小 * 8 

128.8M*8/169 (sec) = 6.09Mbps = 6090kbps 

(差不多就是1080p HD的bitrate)

如何處理360影片的中繼資料遺失(metadata)

如果你的360影片上傳至facebook或youtube沒辦法使用360的播放視窗，
有可能是檔案的metadata屬性已失效，建議使用以下工具復原

https://support.google.com/jump/answer/7044297?hl=en

使用方法就是點擊Inject metedata就好了，會產生你的檔名_injected.mp4

REF
https://support.google.com/youtube/answer/7278886?hl=zh-Hant

[jQuery] 特殊字元跳脫的錯誤解決方法: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

今天在移轉舊專案程式碼，遇到jquery一些錯誤，
查了一下原來是用的2.x版有特殊字元要跳脫的問題，記錄一下。

Syntax error, unrecognized expression:

your selector is not valid. # is a special char and needs to be escaped like 'a[href*=\\#]:not([href=\\#])'

see https://api.jquery.com/category/selectors/

https://github.com/jquery/jquery/issues/2885

[Lavarel] 使用View::exists 判斷view blade是否存在

記錄一下為了做樣版切換機制需要用到的View:exists方法 http://stackoverflow.com/questions/32102272/how-to-include-a-blade-template-only-if-it-exists You can use View::exists() to check if a view exists or not. @if(View::exists('path.to.view')) @include('path.to.view') @endif Or you can extend blade and add new directive Blade::directive('includeIfExists', function($view) { });

[iQIYI愛奇藝] Objective-C 愛奇藝api串流

我的視頻頁查看上傳影片管理

目前發現一般用戶上傳後無此開發者頁面，
只能去自已的空間(http://www.iqiyi.com/paopao/u/用戶UID/upload/)查看

http://open.iqiyi.com/developer/file/index

上傳常見錯誤

"A00012": system error
"A00018"：超过应用的最大配额

線上客服

http://cserver.iqiyi.com/chat.html?lang=tw

如何提升上傳限制

帳戶一天只可上傳25個視頻

http://www.iqiyi.com/common/rz-info.html

[Objective-C] 快快樂樂用Twitter REST: Upload Media

一般上傳超過15mb

 errors =     (

                {

            code = 130;

            message = "Over capacity";

        }

    );

}

Chunk upload上傳

errors =     (

                {

            code = 324;

            message = "Not valid video";

        }

    );

 {

    error = "Large file can not be finalized synchronously.";

    request = "/1.1/media/upload.json";

}


{
  "media_id": 845498780979908608,
  "media_id_string": "845498780979908608",
  "size": 16440765,
  "expires_after_secs": 86400,
  "processing_info": {
    "state": "pending",
    "check_after_secs": 5
  }

}

{

    error = "Invalid media_id: Some((null)).";

    request = "/1.1/media/upload.json";

}

{

    error = "Segments do not add up to provided total file size.";

    request = "/1.1/media/upload.json";

}

完勝bootstrap sidebar範例

這篇文章講述了不同的bootstrap sidebar menu的實作方法，
非常值得一看:D
https://medium.com/wdstack/bootstrap-sidebar-examples-e363021395ff#.iigrutt7s

[AngularJS] hide select的空字串值

常常會需要把select選單預設指定一個預設值，
但又不需要秀空字串的選項，只要設定一個ng-hide="true"就可以搞定。
常忘了，記錄一下。

[Objective-C] 快快樂樂用Twitter SDK: Oauth1 驗證記錄

記錄一下整合twitter的方法，因為在編sinature一直亂爆一通，所以記錄一下。
官方講解的流程https://dev.twitter.com/web/sign-in/implementing (沒講signtrue怎麼做出來，要看別的文件即可)

前置動作

新增 app
https://apps.twitter.com/

Oauth 1.0 Flow

[AngularUI] 如何關閉uiboostrap的modal

常用到ui-bootstrap的modal，如果要將產生的dialog 實體關閉(關閉dialog)，

可以使用下面的程式 。

use $rootScope

when initializing your modal use $rootScope.modalInstance

You can access it anywhere from the application then. Hope this helps

---

1. Remove the $uibModalInstance references
2. Instead of "var modalInstance = $uibModal.open({"
   Use "$rootScope.modalInstance = $uibModal.open({
3. Instead of $uibModalInstance.close('a');"
   Use "$rootScope.modalInstance.close('a');"

[Objective-C] 快快樂樂使用 facebook SDK : 上傳影片

記錄一下使用facebook iOS sdk4.x上傳影片

格式

影片長寬比必須介於 9x16 和 16x9 之間。

我們支援的上傳影片格式如下：

3g2、3gp、3gpp、asf、avi、dat、divx、dv、f4v、flv、m2ts、m4v、mkv、mod、mov、mp4、mpe、mpeg、mpeg4、mpg、mts、nsv、ogm、ogv、qt、tod、ts、vob 和 wmv。

上傳大小限制

1. 不可續傳的上傳可支援最高達 1GB 和 20 分鐘長度的影片上傳。
2. 可續傳的上傳可支援最高達 1.75GB 和 45 分鐘長度的影片上傳。

流程

https://www.facebook.com/help/828417127257368

[Objective-C] 計算檔案大小

記錄一下如何計算檔案大小

前置動作

將檔案丟到專案裡面，記得Add to targets的第一個要打勾，不然會找不到檔案

程式範例

[Objective-C] 快快樂樂使用 facebook SDK : 上傳照片

記錄一下如何上傳照片到facebook，

基本上如果傳一般照片的話，透過SDK是最快的。

如果要傳360照片的話則要用Graph的API

使用SDK傳360相片無效踩雷

這個方法分享一般的照片是最快的，但UIImage會把360照片的metaProjectionType="equirectangular"拿掉，
詳細見此篇

http://www.jianshu.com/p/f71d06f67899

[Objective-C] 如何從NSString轉NSURL

常用到的NSString檔案路徑要轉NSURL 

NSString *filePath=[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"360_theta.JPG"];

    

    NSLog(@"file path: %@",filePath);

    

    NSURL *fileURL = [[NSURL alloc] initFileURLWithPath:filePath];

    NSLog(@"file url: %@",[fileURL filePathURL]);

// 輸出如下

//    file url: file:///var/containers/Bundle/Application/091D1094-B023-42B1-9B5D-31D9C76678D6/fblive.app/360_theta.JPG

[Objective-C] 快快樂樂使用 facebook SDK : 登入

第一次整合facebook SDK登入、上傳照片/影片測試。
首先Facebook的SDK真的寫的太好用了，還有中文的文件:D
基本上看一下新手指南就OK了。
不過由於要呼叫API，要記得開app-transport-security

另外API一般只開放三個權限，如下所示：


如果沒開publish_actions，就在LoginManager設定此權限，就會爆給你看!!!
如果想要測試publish_actions的話，建議可以開測試應用程式，再新增測試用戶即可
這樣就可以測試發佈文or照片到測試用戶上啦 (不然審查權限要很久XD)

[Objective-C] 自幹上傳 mutipart/form 到youtube

要測試一下上傳影片到youtube，
由於先前有在java自幹過一次 mutipart/form(四年前了@@) ，
這次改用objective c，順道記錄一下。

Youtube Upload API

https://developers.google.com/youtube/v3/docs/videos/insert

函式庫

沒用什麼第三方的庫，NSURLSession自幹

NSURLSessionConfiguration : 做授權

NSMutableURLRequest : 做連線

NSURLSessionUploadTask : 上傳的任務

基本上參考這篇就會寫了
NSURLSessionUploadTask(上传任务)

[jQuery Plugins] summernote的 圖片標題與替代文字編輯外掛

預設的summernote是沒有提供image title與alt的編輯ui，
你可以安裝summernote-image-title來達成這個功能。

https://github.com/asiffermann/summernote-image-title

[Objective-C] iOS 基本技能: 呼叫相機

超常用的iOS呼叫相機基本技能，測試完記錄一下。

使用UIImagePickerController (簡單、快速)

- (void) initCamera{

    

    NSLog(@"initCamera");

    dispatch_async(dispatch_get_main_queue(), ^{

        UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];

        

        //檢查是否支援此Source Type(相機)

        if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {

            NSLog(@"Access Camera Device");

            

            //設定影像來源為相機

            imagePicker.sourceType =  UIImagePickerControllerSourceTypeCamera;

            imagePicker.delegate = self;

            imagePicker.allowsEditing = YES;

            

            //顯示UIImagePickerController

            [self presentViewController:imagePicker animated:YES completion:nil];

        }

        else {

            //提示使用者，目前設備不支援相機

            NSLog(@"No Camera Device");

        }

    });

    

}

//使用者按下確定時

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {

    //取得剛拍攝的相片(或是由相簿中所選擇的相片)

    UIImage *image=[info objectForKey:UIImagePickerControllerEditedImage];

    

    //設定ImageView的Image物件，例如：

    //yourImageView.image = image;

    

    [picker dismissViewControllerAnimated:YES completion:^{}];

}

//使用者按下取消時

- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker {

    //一般情況下沒有什麼特別要做的事情

    

    [picker dismissViewControllerAnimated:YES completion:^{}];

}

使用AV Foundation

優點就是彈性比較大，速度快

[Objective-C] 初試一下 youtube live streaming (二) 實作步驟

找到幾篇有關於直播的教學，但都2014了，還是可以參考一下。
以下簡述使用Youtube直播步驟。

http://yhsiang.logdown.com/posts/2014/04/16/stream-to-youtube-with-live-streaming-api

https://youtube-eng.googleblog.com/2014/10/watchme-live-stream.html

http://justinyang1221.blogspot.tw/2014/10/live-stream-youtubestreaming-to-youtube.html

將即時串流推送到串流伺服器 (推流)
https://github.com/jgh-/VideoCore
https://github.com/LaiFengiOS/LFLiveKit => 最好操作整合，很多人拿來二次開發
https://github.com/pili-engineering/PLMediaStreamingKit

顯示即時串流 (拉流)
https://github.com/Bilibili/ijkplayer

完整流程

以下是最後實作完驗證過的流程，這篇也講的很清楚。
http://octuplus.co/Detalles/2084/Cannot-make-transition-of-my-Youtube-broadcast-to-live-using-Youtube-API

So a bit unclear rule is:

1. ensure you have broadcast and livestream created and ready.
   and ensure that broadcast lifecycle status is not COMPLETE, otherwise recreate broadcast ... so ensure that your broadcast lifecycle status is ready
2. bind broadcast to livestream
3. start publishing video to livestream
4. wait for livestream status active
5. transition to testing (yes, you have to do it instead of moving to live)
6. wait for broadcast lifeCycleStatus to become testing
7. transition to live
8. wait for broadcast lifeCycleStatus to become live

You cannot skip testing and cannot transition from complete to testing or ready.

[ubuntu] 搞壞了sudo...must be owned by uid 0 and have the setuid bit set

sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set

XD不小心下錯了chown的指令，然後sudo就爆了。
搞了一小時還是沒弄好機器，
還是重裝VM的存檔-,,-
有招一日再來研究研究

http://ithelp.ithome.com.tw/articles/10053821
https://my.oschina.net/cxz001/blog/297404
http://unix.stackexchange.com/questions/16962/how-to-get-back-sudo-on-ubuntu

電子發票系統記錄

偉大的台灣政府電子發票申請流程記錄

https://www.einvoice.nat.gov.tw/ein_upload/html/1428905476324.html?CSRT=7530087260371449661

[Objective-C] AVPlayer 操作筆記

測試一下用Objective-C播放影片的sample

Sample檔放到專案

前面二個項目要打勾

取得應用程式目錄的檔案

//NSBundle resourcePath

    NSString *filePath=[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"SampleVideo_360x240_30mb.mp4"];

//NSBundle URLForResource

 NSURL *sourceMovieURL = [[NSBundle mainBundle]URLForResource:@"SampleVideo_360x240_30mb" withExtension:@"mp4"];