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

   

[Objective-C] Youtube Oauth2 實作

記錄一下第一次寫iOS如何與Youtube Oauth2串接

首先要申請API KEY跟Oauth要用的Client ID

https://console.developers.google.com

Oauth2的驗證url記錄 

https://accounts.google.com/o/oauth2/auth?client_id=<你的CLIENTID>.apps.googleusercontent.com&redirect_uri=http://localhost&scope=https://www.googleapis.com/auth/youtube&response_type=code&access_type=offline

403的爆炸

用webview直接丟Oauth2的連結,google會爆給你不允許存取的403 (disallowed_user-agent)

所以改用NSURLSession來處理request,在把結果丟給webview來呈現
成功後你會取得一個auth code: 例如


http://localhost/oauth2callback?code=

[Objective-C] 剛轉入寫iOS Objective的一些簡單筆記~

記錄一下菜到不行的初學者(我本人XD)Objective-C 寫的筆記

變數宣告strong跟weak

用segue轉到另一個view如何退上去的方法

[self dismissViewControllerAnimated:true completion:nil];

用Navigation控制轉viewController

By using below line we can go to parent view controller

[self.navigationController popViewControllerAnimated:YES];


By using below line we can move to main/root view controller

[self.navigationController popToRootViewControllerAnimated:YES];


By using below line we can move to any view controller

[self.navigationController popToViewController:viewControllerObject animated:YES];

[AngularJS-3rd] taglist 給blog專用的tag模組

如果你正在寫一個blog頁面，又需要一個tag模組的話，可以試一下angular-taglist

https://github.com/chrispittman/angular-taglist

[Objective-C] 初試一下youtube live streaming (一) 相關資源蒐集

記錄一下工作需要研究的youtube live streaming的呼叫

前置作業

要先到https://console.developers.google.com/ 要先開一個專案並申請api金鑰

帳號啟用直播功能

如果帳號未啟動直播功能，會噴以下錯誤

{

    error =     {

        code = 403;

        errors =         (

                        {

                domain = "youtube.liveBroadcast";

                extendedHelp = "https://www.youtube.com/features";

                message = "The user is not enabled for live streaming.";

                reason = liveStreamingNotEnabled;

            }

        );

        message = "The user is not enabled for live streaming.";

    };

}

可以登入youtube後，到以下連結開通直播功能
https://www.youtube.com/features

Oauth2 處理iOS Client/Server的連線

https://www1.in.tum.de/lehrstuhl_1/home/98-teaching/tutorials/540-ios14intro-client-server-communication

http://www.appcoda.com.tw/youtube-api-ios-tutorial/

youtube官方文件

https://support.google.com/youtube/answer/2853700?hl=en&ref_topic=6136989


YouTube Live Streaming API Overviewhttps://developers.google.com/youtube/v3/live/getting-started

YouTube Live Streaming API Code Samples (JAVA/PHP/PYTHON)

https://developers.google.com/youtube/v3/live/code_samples/

Objective C libs for REST

https://github.com/google/google-api-objectivec-client-for-rest

[Lavavel] Laravel 5.2 could not open laravel.log

今天跑seed的時候發生laravel.log無法打開的錯誤。
找到StackFlow的解法如下：

http://stackoverflow.com/questions/35715400/laravel-5-2-could-not-open-laravel-log

Try the following commands on your shell:

1. Clear Laravel cache and the compiled classes
   php artisan cache:clear
   php artisan clear-compiled
2. Change the storage and cache directories permission
   sudo chmod -R 777 storage
   sudo chmod -R 777 bootstrap/cache
3. Regenerate the composer autoload file
   composer dump-autoload

[Lavarel] elixir verison 爆掉

試一下version()方法來做版控就爆了

SyntaxError: Unexpected token s in JSON at position 41

at Object.parse (native)

at VersionTask.deleteManifestFiles (/var/www/你的專案/node_modules/laravel-elixir/dist/tasks/VersionTask.js:113:29)

如果遇到version錯誤的話，記得把public/build/rev-manifest.json的格式產生異常了，

可以手動修正。

[360] 一些有關於360的照片與影片的web播放技術

記錄一下怎麼在Web實作相關的360照片與影片的播放。

主要採用WebGL來處理，大部份的作者則透過three.js來操作WebGL

基礎觀念可以看的開源

簡單的three.js範例

http://www.emanueleferonato.com/2014/12/10/html5-webgl-360-degrees-panorama-viewer-with-three-js/

簡單的photo spheres製作

http://blog.mastermaps.com/2014/01/photo-spheres-with-threejs.html

簡單用three.js做的panorama video example => 基於three.js

https://gist.github.com/bellbind/9080f608a56c2637aec9

[Git] error: insufficient permission for adding an object to repository database .git/objects 異常處理

error: insufficient permission for adding an object to repository database .git/objects

今天在pull 的時候噴了這個錯誤~

找到了有人的解法如下

http://www.bravo-kernel.com/2014/08/how-to-fix-git-commit-insufficient-permission-error/

cd 
cd .git/objects
sudo chown -R : *

[jQuery Plugins] 號稱最好用的廣告輪播owl carousel套件

大部份的landing page都會在最上面放一個很大的廣告橫幅，
Owlcarousel為許多工程師首選的套件，支援RWD，以及多種的橫幅表達方式

http://owlgraphic.com/owlcarousel/

官網好像失效了，改到github https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

[Gulp] 快快樂樂學Gulp與Lavarel Elixir

由於最近開始與後端工程師使用Lavarel框架+Angular實作系統。
順便把拖了很久的Gulp前端工具記錄一下。

參考

http://www.slideshare.net/yvonne_yu/cp-gulp
http://www.slideshare.net/appleboy/automating-your-workflow-with-gulp
https://laravel.tw/docs/5.2/elixir#copying-files-and-directories
http://adamalbrecht.com/2014/06/20/building-your-angular-app-with-gulp-js/

[jQuery] 簡單易物的jquery gallery 套件: lightbox2

今天將公司的sharktech.tw 官網改了一下lightbox套件，於是找到Lokesh Dhakar這個作者寫的。

因為太好套了所以推給大家。只要加上data-lightbox這個屬性，即可做單張preivew或群組(gallery)的preview效果了。

[Bower] EACCES: permission denied .config/configstore/bower-github.json爆炸了的解決方法lol

如題

sudo chown -R $USER:$GROUP ~/.npm
sudo chown -R $USER:$GROUP ~/.config

Vue.js 2.0 支援的套件

整理一下vue.js 2.0可以跑的元件

用戶
http://pespantelis.github.io/vue-crop/
https://eliep.github.io/vue-avatar/

進度條
http://hilongjw.github.io/vue-progressbar/index.html

日期格式
https://github.com/egoist/vue-timeago
https://github.com/charliekassel/vuejs-datepicker
http://blog.w3cub.com/vue2-calendar/


分頁
https://github.com/TahaSh/vue-paginate
https://github.com/matfish2/vue-pagination-2

[Webpack] 解決jquery在webpack載入全域的處理方法

webpack真是個很屌但不熟會搞死人的東西，
為了搞一個全域的jquery函式庫，
找到StackFlow裡面一個大神提供的各種解法

這位大大也有遇到一樣的事:D
https://blog.fntsr.tw/articles/2016/09/13/%E8%AE%93-jquery-%E5%9C%A8-webpack-%E4%B8%AD%E6%88%90%E7%82%BA%E5%85%A8%E5%9F%9F%E8%AE%8A%E6%95%B8/

備份文章

[Vue.js] 透過directive的機制整合tinymce 使用vue.js 1.x

找到人家wrapper tinymce的範例~

https://jsfiddle.net/edwindeveloper90/edjc82z0/
使用vue.js 1.x寫的
可以看一下怎麼轉2.x的語法

[Vue.js] 簡單上手的表單驗證外掛 vee-validator

由於目前專案使用vue.js 2.0，套用vue-validator會有異常。
於是找了另一個替代方案vee-validator，使用簡單好理解也好擴充。
可以參考官方文件: http://vee-validate.logaretm.com/#about

基礎範例

https://dotdev.co/form-validation-using-vue-js-2-35abd6b18c5d#.3j0nq7tne

[Wordpress] 讓所有頁面導向具體頁面

如果想把全站的page導向某一頁的話可以在functions.php加入一個action:
 template_redirect

function redirect_page_standard() {
  wp_redirect(  get_site_url() . '/notice.html', 301 );

}
add_action( 'template_redirect', 'redirect_page_standard' );

[Vue.js] 還不錯看的vue.js樣版: https://vue-admin.fundon.me/#/

在vue.js 台灣的社群看到的，覺得以後有機會採用。
先記錄一下。

https://vue-admin.fundon.me/#/

[Vue.js] Vue的服務端渲染文章筆記

記錄一下服務器渲染(SSR)相關的處理技術文章。

主要有分二種渲染方式，分別為服務器渲染與預渲染 (部份頁面渲染用)。

官方教學
https://vuefe.cn/guide/ssr.html

跟asp.net core結合
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/

完整的測試範例，程式可跑
http://csbun.github.io/blog/2016/08/vue-2-0-server-side-rendering/

prerender教學
http://hq5544.github.io/vue-webpack/prerender.html

Lavarel專案管理+vue.js完整範例
http://laraveldaily.com/ribbbon-project-management-system-laravel-5-1-vue-js/

[jQuery] youtube iFrame API無法在iOS上播放影片的解決方法

測試youtube錯誤，最近幫客戶的網站套了jquery.youtubebackground.js RWD的jquery套件後，就噴了以下錯誤。

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://thegrand.com.tw". Protocols, domains, and ports must match


 

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://thegrand.com.tw". Protocols, domains, and ports must match.

查了一下原來是這個套件用的是youtube的iframe api，因為在iOS上(safari 和chrome)執行playVideo()這個方法是會爆炸了，雖然有提到可以用cueVideoById("youtubeId")來處理。但用了還是不會播，所以目前的workaround就先讓程式判斷iOS不要先執行play，讓用戶自已點取影片。

http://stackoverflow.com/questions/9934944/embedding-youtube-video-refused-to-display-document-because-display-forbidden-b

https://developers.google.com/youtube/player_parameters?hl=zh-cn#IFrame_Player_API

[CSS] 三十個有趣的CSS特效

fb看人分享的，覺得裡面有很多選單特效就先記錄一下啦:D

http://www.hongkiat.com/blog/creative-css-animations/

[Vue.js] vue-router 2.0 使用筆記

記錄一下使用vue-router 2.0的筆記，高手請略過~

 在其他組件呼叫router

例如你會切一個Header.vue的組件，但可能做了什麼事之後要靠router轉頁就會用到

Header.vue如何import

app.js(我的vue app進入點)也要export你new出來的vue-router

router-link自訂active class

由於在2.0版後都使用router-link取代v-link，當router-link被觸發時，都會自已一個樣式router-link-active，你可以用linkActiveClass指定你自已的唷

router-link使用tag自定渲染元素

說明一下怎麼跟bootsrap的nav樣式結合，因為active的效果是在li，因此要自定一下router-link渲染的程式

[Vue.js] 單一組件(*.vue)檔案筆記

記錄一下剛接觸的新手踩雷的筆記XD

template標籤只能有一個根元素

如題，不然vue.js warn就會噴給你看XD

prop屬性警告

[Vue.js] ES6 在Vue.js的筆記

本篇記錄一下為了用組件式寫法隨手記的一些ES6筆記

了解Module模組(模塊)的import與export

[Vue.js] 自定義組件爆錯: Do not use built-in or reserved HTML elements as component

昨天用了vue-router來拆解同一層view的組件，

今天想說找一下怎麼用自訂定header/footer組件就爆下面的錯了lol

Do not use built-in or reserved HTML elements as component

[Laravel] 如何設定 lavavel elixir載入bootstrap的樣式

記錄一下如何在lavavel elixir載入bootstrap的樣式

基本載入

只需要簡單的二個步驟即可

Step1:

原本的專案內 resources/assets/sass/app.scss

會看到以下這個，拿掉原本的註解即可

  Step2:

打開gulpfile修改如下，使用方法為mix.sass的 webpack loader即可，其他code是自已專案的範例

客製化

參考

https://laravel-news.com/2015/10/setup-bootstrap-sass-with-laravel-elixir/

[Node.js] node 指令錯誤

今天在試著建構Vue+Lavavel開發環境，

發現node -v的cli的指令會噴以下錯誤

The program 'node' can be found in the following packages:
 * node
 * nodejs-legacy
Try: sudo apt-get install <selected package>

可以透過以下的指令來解決

sudo ln -s `which nodejs` /usr/local/bin/node

http://stackoverflow.com/questions/20057790/what-are-the-differences-between-node-js-and-node

[Wordpress] 如何傳遞變數至樣版

待處理..

參考

http://mekshq.com/passing-variables-via-get_template_part-wordpress/

[CSS] css 特效hover on 和 off

最近處理一個畫框的特效，效果要在hover的時候順時鐘畫，
原來只有注意hover 的時候加入線的寬，但沒考慮hover off的行為(讓框倒帶)
不過在這篇讓我想到哪裡要修正

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

終於可以順利倒帶 -,-

作品是朋友的網站大境建設 : thegand.com.tw

[Vue.js] Laravel + Vue.js 2.0安裝踩雷之旅

記錄一下整個Lavarel+Vue.js 2.0 踩地雷的過程。
主要參考此篇大大的教學，但沒有用fork的方法Q_Q。

Laravel 中使用 Vue 组件化开发（配置）

https://github.com/jcc/vue-laravel-example

前置環境

sudo apt-get install nodejs 

sudo apt-get install npm

[Vue.js] 建構大型應用程式

基本上的Vue.js是一個library，
如果要做大型專案要配合其他技術才會更完整，
這一篇記錄一下相關的技術資源。
學習前端之路整個變化太快了lol

主要的架構

採用Vue.js 2.0 (組件式寫法，要搭配webpack與es6 js的寫法) + Lavavel 5.2

ES6

由於比較想採用組件式(*.vue)寫法，所以要使用ES6的javascript寫作方式。
另外開一篇筆記記錄=> ES6 在Vue.js的筆記

Webpack 模組管理工具

Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具。

它的核心功能如下:

• 可同時整合 CommonJS 和 AMD 模組
• 轉換 JSX, Coffee Script, TypeScript 等
• 分散封裝專案使用的程式碼，使載入頁面時只需載入當頁所需的程式碼以加速載入速度
• 整合樣式表 (css, sass, less 等)
• 處理圖片與字型
• 建置 production-ready 的程式碼 (壓縮)

如果在Lavavel裡面整合的話，請參考Lavarel Elixir (大大簡化使用gulp的流程)

其他webpack參考資源如下

http://webpack.vuefe.cn/

http://www.slideshare.net/newstory0113/webpack-52413453

[Vue.js] 組件筆記

記錄一下學習Vue Compoment的筆記

核心ViewModel類

1. 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
2. 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
3. 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式地声明为双向绑定。
4. 方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
5. 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，比如created，attached，destroyed等等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，可以理解为 Controller的逻辑被分散到了这些钩子函数中。=> 要注意1.0與2.0有些事件已經改名字
6. 私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。由于全局注册资源容易导致命名冲突，一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

組件註冊

[Vue.js] 記錄一下開始學Vue.js的資源

太久沒碰新的前端框架了，至angular 1.x之後就懶了(誤)，從去年就一直覺得Vue愈來愈火紅，但舊專案也沒使用的機會，今年打算在新的專案直接套用Vue.js 2.0 + Lavarel，當作今年的小目標好了XD。這篇記錄一些自已想要導入Vue所想到的問題與現在相關的處理方法~慢慢來更新 :D

想到的問題??

SEO
Google的爬蟲已有公告針對js framework所render出來的結構可以有效記錄了。
其他的解決方案還有prerender.io 與 pa

可以參考SSR章節有此問題的解法? http://vuefe.cn/guide/ssr.html

i18n

Router

Asset的precomplier

與jQuery/Bootstrap整合
https://segmentfault.com/a/1190000007020623


與Lavarel整合

第三方元件庫支援

Vue-strap (基於bootstrap)
https://yuche.github.io/vue-strap/#getting-started

iView 高質量組件庫

https://www.iviewui.com/

Element

http://element.eleme.io/#/

學習的簡報

1.0 完整的文件
https://cn.vuejs.org/guide/index.html

2.0 正在翻譯中的...
http://vuefe.cn/guide/

Kuro大神的簡報

http://www.slideshare.net/kurotanshi/vuejs-62131923

圖解vue2.0架構

http://jiongks.name/blog/a-big-map-to-intro-vue-next/

網路資源

幾乎什麼鬼都有了!!
https://github.com/vuejs/awesome-vue

http://jiongks.name/blog/code-review-for-vue-next/

[php] Fatal error: Maximum execution time of 30 seconds exceeded 超過最長執行時間錯誤

今天寫批次計算演算法時，

發生了此錯誤 Fatal error: Maximum execution time of 30 seconds exceeded

因為預設php是30秒，所以爆開了。

可以簡單為單一執行的程式加入set_time_limit

set_time_limit(0) //則是無上限

沒事不要設定全域的執行時間:D ，想不開可以在php.ini檔設定。

可以找到max_execution_time的設定屬性

[Bootstrap] 讓Modal滿版的樣式修正

為了想讓手機RWD的modal滿版效果感覺比較好，找到了下面的sample。

測試環境的bootstrap 3

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.modal-dialog {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #3c7dcf;
  border-radius: 0;
  box-shadow: none;
}

.modal-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  padding: 10px;
  background: #6598d9;
  border: 0;
}

.modal-title {
  font-weight: 300;
  font-size: 2em;
  color: #fff;
  line-height: 30px;
}

.modal-body {
  position: absolute;
  top: 50px;
  bottom: 60px;
  width: 100%;
  font-weight: 300;
  overflow: auto;
}

.modal-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  background: #f1f3f5;
}

https://codepen.io/yewnork/pen/Kpaqeq