修正 fabric.js 在 android 移動物件時頁面捲動

最近被回報 Fabric.js 在 Android 手機上，移動物件時會造成頁面滑動。
去看了一下 fabric 的原始碼，原來他是利用 e.preventDefault() 來避免頁面捲動的。
原始碼：http://fabricjs.com/docs/fabric.js.html#line10465

   /**
     * @private
     * @param {Event} e Event object fired on mousemove
     */
    _onMouseMove: function (e) {
      !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
      this.__onMouseMove(e);
    },

然後就找到這篇，原來 Chrome 為了讓瀏覽器速度變快，所以新增了 passive 參數讓 touch event 不會在 calling stack 中藉由 preventDefault() 給取消掉。而且這個參數在 Chrome 56 以後預設為 true。

window.addEventListener("touchstart", func, {passive: true} );

請見:

• Treat Document Level Touch Event Listeners as Passive
• Making touch scrolling fast by default

那麼要怎麼樣避免捲動呢？Chrome 給的答案是增加 CSS touch-action 為 none

#canvas-parent {
 touch-action: none;
}

請見: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

[連結] 台灣金流串接程式

https://www.facebook.com/recca.tsai/posts/10154973827344181

===== 以下節錄自上面的內文 =====

說明還沒弄完整所以可能看到程式會不知道如何使用
所有的程式都依附在
https://github.com/Payum/Payum
和omnipay是一樣的功能
原作者的比較
http://stackoverflow.com/....../difference-between......
所以要使用它必須得再去了解一下 payum 如何使用
基本的使用方式
https://github.com/....../Resources/docs/get-it-started.md
另外如果是開發 Laravel 的人門檻會比較低
可以真接使用
https://github.com/recca0120/laravel-payum
==============================================
另外如果想要參考程式碼的話
大家可以只閱讀專案內的src資料夾內的 Api 結尾的程式碼
==============================================
最後 PayumTW 的程式碼不一定會是最新的
所以的程式碼會在我個人的 github 內完成後
再 folk 到PayumTW內
所以最新的程式碼請到原作個人的 github
https://github.com/recca0120/payum-ezship
https://github.com/recca0120/payum-collect
https://github.com/recca0120/payum-ecpay
https://github.com/recca0120/payum-allpay
https://github.com/recca0120/payum-mypay

[連結] Javascript 教學: JavaScript Stack from Scratch

This is a straight-to-the-point guide to assembling a JavaScript stack. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch. Since the goal of this tutorial is to assemble various tools, I do not go into details about how these tools work individually. Refer to their documentation or find other tutorials if you want to acquire deeper knowledge in them.

https://github.com/verekia/js-stack-from-scratch

Let's Encrypt 工作原理

把官方文件 (https://letsencrypt.org/how-it-works/) 看了一下，發現沒有正確的中文原理說明，所以來把我了解的發佈一下。

先來簡單介紹 Let's Encrypt (LE) 實際使用情況，你會在你機器上面裝一個小程式 (agent) 幫你去 LE 做申請 / 更新憑證的動作。所以這篇文章主要是講解這個小程式做了什麼事情，不然的話其實下指令就可以搞定所有事情，你不會知道中間發生什麼事。

Step 1. 產生 authorized key

這個只有 agent 第一次使用的時候會需要進行。authorized key 可以當作代表 agent 去操作 LE 的 API Key。所以我們可以說這是 API Key 產生流程。

1. Agent 產生一組新的 key pair
2. 通知 LE 要註冊 example.com 這個 domain
3. LE 傳回來說可以用 DNS 驗證或是檔案驗證，2 選 1。然後以下是驗證資料
1. 在 8303 的位址放 ed98
2. 請將這個亂數 9cf0b331 加密
4. 這個範例，agent 選擇使用檔案驗證。
1. 他在 https://example.com/8303 內容放 ed98
2. 將 9cf0b331 用私鑰加密，然後將加密結果以及公鑰一起傳給 LE
5. LE 驗證網址和亂數都正確，這把公鑰就變成 authorized key 可以拿來操作 example.com 的憑證

Step 2. 申請 / 更新 / 註銷憑證

1. 當 agent 拿到 authorized key 以後，就可以發送 PKCS#10 Certificate Signing Request (CSR) 給 LE 取得憑證。
2. 產生一組新的 key pair
3. CSR 裡面包含了
1. 私鑰的 signature
2. 公鑰
4. 把整個 CSR 用 authorized key 加密傳給 LE
5. LE 驗證 authorized key 以及欲申請的 domain。如果驗證通過，解開取得 CSR 之後核發憑證傳回 agent

這樣就完成取得憑證的程序。

更新以及註銷憑證的流程都類似，就不再多做說明了。

建置網路服務案例 - 以繪禮物為例

今天晚上受邀至朋友舉辦的 Meetup 分享。

分享我如何將一個現成的 business idea (繪禮物 http://www.giftpaint.com) 轉化為網路服務，並且建置出來。

由於此 Meetup 與 coding 有關，所以會簡單帶過 Laravel framework。
希望能讓一些想學程式或者有點子卻不知道如何開始的人有幫助。

建置網路服務案例 - 以繪禮物為例 from Hialan Liu

Laravel 5.2 發送內部 Request 來呼叫現成 AJAX API

如果我在 Laravel Controller 內部，想要 call 另外一個現成的 AJAX 做事怎麼辦呢？

我們可以利用內部 Routing 機制，不用真的發 HTTP request，就可以達到類似的效果了。

以下這段程式情境如下：

1. 我們的顯示購物車頁面，有一個參數是欲加入的商品代號。如果這個參數有值，會先將此商品加入購物車以後才出現商品清單畫面，使用者從這個畫面開始結帳流程。
2. 在此之前，我們的使用者是利用一隻 AJAX API 來將商品加入購物車。

public function getCheckoutForm(Request $request) {
        $productId = $request->input('product_id', null);
        if(!empty($productId)) {
            // http://stackoverflow.com/questions/16597420/how-can-i-access-query-string-parameters-for-requests-ive-manually-dispatched-i
            $rr = Request::create(route('post.ajax.addcart'), 'POST', ['product_id' => $productId, '_token' => csrf_token()]);

            // Store the original input of the request and then replace the input with your request instances input.
            $originalInput = $request->input();
            $request->replace($rr->input());
            $response = Route::dispatch($rr);
            $request->replace($originalInput);
        }
        // getCheckoutForm() business logic
}

在這裡我們可以看到

1. 我們先建立新的 Request 物件 $rr。
2. 然後備份目前的 request input
3. 將目前的 request input 置換成 $rr 的 input
4. 利用 Route::dispatch() 產生 Request call
5. 呼叫完畢以後再把目前 request input 換回來

參考

1. How can I access query string parameters for requests I've manually dispatched in Laravel 4?

做行銷的人與做產品人的糾結

最近聽了一些故事，看了一些網站，然後產生心裡的惡魔：做行銷的人與做產品人的糾結。

這些小網站都是行銷高手創立的，內容是他們的武器，他們攻的是客人的「心」，再把自己的（銷售）能力包裝成產品賣給別人，然後賺了很多錢（至少自己夠用）。

天平的另外一端是工程師，講求用最好的方式高深的技術，創造一個有高度彈性，碰到颶風也不會倒的系統。

做行銷的人

行銷成精的人，你只要給他wordpress的頁面可以打打字貼連結，每個頁面有獨立網址，他們就可以開始做生意。
當他們碰到一個新想法的時候，心裡想的是，客群是誰，我的文案要下什麼套路能對顧客講故事，讓他越看越深最後買單。

做產品的人

做系統做到精的人（含PM, SA, RD, QA, QE），碰到新想法的時候，開始分析需求切功能，然後開始想像這些功能可以如何被使用，這個系統會不會被破解，流量大撐不撐的住，做不做的出來。

兩種人互看

行銷人看做系統的人：賺錢不用這麼複雜，能吸引客人的東西沒半樣，給我wordpress就好。
做系統的人看行銷人員：我做的系統功能這麼強大，居然只用那1%功能，到底懂不懂呀？

其實我們兩種人都需要

懂行銷的人懂市場，知道客戶在哪裡以及他們需要什麼。Wordpress 雖有彈性，但是其中很多小環節都是人工處理，例如產生 Email 名單並貼到另外一個系統，或是訂單細節與客戶電話來來往往討論，一旦需要將業務規模化（更大量）就會需要更多這些事務性的人，隨著人員擴張，公司會越來越沒有效率（人需要組織管理，另外每個人都是特別的，不可能請到一模一樣的人），最後公司隨著人員膨脹，而這些人員都在做事務性工作，對公司並沒有增額的產出，也因此沒辦法獲得更多資源做下一輪投資。

「系統」存在的目的是為了「規模化」，要達到規模化必須要自動化，以防止上述事務性人員擴張的問題。將已經市場驗證完成的商業模式，找出行為與規格，創建出系統自動化，或者讓失誤的機率降低以減少成本。到了這個階段，就變成針對該商業模式客製化系統的過程 （無論是擺脫 Wordpress 重新寫一個，或是找技術人才寫 Wordpress 外掛）。

要規模化，隨之而來的就是限制（做法與規格），才能產生流程與系統。
有了系統的幫忙，原有的人力可以空出來，搜尋下一個機會，等確認了以後，再轉換成系統，如此往復，系統價值不斷的累積，人力的成本卻沒有等比例增加，公司的價值就產生了正向的循環。

這兩種人活在不同的世界，做事方法也截然不同，甚至對方的長處可能是自己用不上的。但我想最重要的是互相理解並合作，或許用另外一種方式試試看，能獲得不一樣的收獲。