最近遇到 Silex 之 Built-in Service Providers 的問題

Silex 是 PHP 的一種微框架。使用 Silex 而沒有選用 Slim 的原因是 Silex 的肥版內置了常用的功能, 而且 Silex 是 Symfony2 相關的專案。

目前裡面的 Twig 和 Doctrine DBAL 是用得還滿開心的, 但 Session 和 Swiftmailer 就用不太習慣, 或遇到狀況。

寄 mail 的功能, 個人長時間習慣使用 PHPMailer。Swiftmailer 寄未認證信時, 常收不到; PHPMailer 至少會在垃圾郵件中找到。

Session 的問題是 Silex 使用 SessionServiceProvider, 並非 PHP 原先內建的 $_SESSION功能。在混用 Securimage 做 captcha 功能時, 由於 Securimage 使用的是內建的 $_SESSION, 而造成 SessionServiceProvider 無法啟用。

RuntimeException: Failed to start the session: already started by PHP ($_SESSION is set).

後來的解決方式是乾脆 把 SessionServiceProvider 給關了, 直接使用 $_SESSION。

使用 Inkscape 做 SVG 檔案的最佳化 (最小化)

參考這篇 Optimizing Inkscape SVG size for the Web

「檔案」 > 「另存新檔」 > 「存檔類型」選「最佳化的 SVG」 (倒數幾個選項)」 > 按「儲存」, 再依據需求於面板上勾選去除或包含的項目, 按「確定」後完成。

在參考的 blog 裡發現了一個會動的 SVG clock2, 感到相當驚奇, 偷看一下原始碼, 原來是放了 <script> 標籤 XD。

用 KineticJS 改寫 Shadow Maze 2D

Shadow Maze 2D 是 AS3/starling 寫的 app, 試著用 KineticJS 改寫, 感覺上跟 starling 作法差不多。由於是 web app, 所以把儲存和記錄的功能拿掉了。圖片素材都一樣, 改寫起來還算快。

shadow_maze 是完成的結果, 在桌機上用鍵盤的方向鍵操作, 在手機上用 device orientation 功能操作。

測試過 Chrome、IE 11、Safari 和 iOS 7 Safari 是可以正常執行, 但 Firefox 25/26 會當掉, 關掉大部份的 Firefox plug-in 之後, 執行 20秒左右也當了, 殘念。Firefox 執行 KineticJS 做的 app 似乎有不少人遇到麻煩, 不知道是 Firefox 的問題還是 KineticJS 的問題 ... 我懷疑前者的支援度不佳 ...

條列筆記:

• Sprite 圖形是之前用 Flash CS6 功能輸出的。
• 類別使用 createNew 的方式實作。
• Kinetic.Layer 在 DOM 裡是 <canvas> 元素。
• toImage() 類似 AS3 的 cacheAsBitmap。
• 將 Kinetic.Node 做 toImage() 時, 該物件必須已經放在 Layer 上面。
• 做 toImage() 時, protocol 需是 http 不能是 file。
• toImage() 得到的是 JS Image 物件, 不是 Kinetic.Image 物件。
• 裝置方向參考 Using Device Orientation。
• 裝置方向事件處理, 若先 remove 再 add, 可能會拿到先前的舊值, 造成 bug。
• 上述動畫進行中, 可用一變數去忽視裝置方向事件。
• 善用 Group。
• 按鈕可以寫成 Component。
• JS 合併縮小用 UglifyJS。

HTML5 的 SVG 和 Canvas

SVG (Scalable Vector Graphics) 和 Canvas, 同樣是 HTML5 的標準內容, 但兩者似乎有相互競爭的意味。主要的差異在於, SVG 是以 tag 的方式存在 (DOM 的一部份), 而 Canvas 純粹是用 JavaScript 來建立。

粗略來說, 當圖案越複雜時, SVG 會越龐大, render 的速度會越慢; Canvas 則是看變動區域的大小和複雜程度。

2012 年中, 就有針對 SVG 和 Canvas 效能問題做測試和討論 The Road to HTML5: SVG, Canvas, and faster performance。結論是 Canvas 效能比 SVG 要來得好, 但比較不好寫 (應該說 JS 要寫較多的行數)。

也有一派認為 SVG 的優點比較多, 他們偏好使用 SVG, 7 Reasons to Consider SVGs Instead of Canvas 。簡述一下文中條列的 SVG 優點:

• SVG 是可縮放的
• 有現成的編輯工具: 如免費的 Inkscape , 椅拉也有支援
• 程式語言/框架的支援: 文中其實只提 Simple XML, 意義是後端可以做些處理
• 大部份的瀏覽器都有支援: 以 Raphaël 為例
• 可得性與 SEO 佳
• DOM 操作
• 有 CSS, webfont, JS 支援

上列的林林總總, 好像 SVG 真的比 Canvas 好。其實也是得看用途, 在 2D 網站最佳化的過程, 會因種種特性, 兩者選其一, 亦或兩者都用。

另外, 如何開始, 啃官方文件一定不會是您想要的。

SVG 有老牌的 Raphaël, 也有同一個作者開發的 Snap.svg (感覺是 adobe 支持的專案), Snap 的 Getting started 是不錯的開始。

Canvas 的話, KineticJS 是頗為熱門的 framework。

以上。

阿豆皮 ! 我要 Flash/AS3 直接轉 Canvas 的功能 ! (等到鬍渣滿面...)

JavaScript 實作類別的方式

參考

定義類 (class) 的三種方式 (簡中)

Object oriented programming in Javascript

Online Workshop Object Oriented Design in Javascript

JavaScript UI: Gumby Framework

Gumby Framework 整個架構和 Twitter Bootstrap 其實差不多, 算是 Twitter Bootstrap 的另一種選擇。Gumby 的 CSS preprocessor 是使用 SASS。

給學員做專題時的建議

程式除錯就跟遊戲裡打怪一樣, 怪打得越多, 功力會越強。 請先自己打怪, 打不過再找幫手。
 
 
除蟲守則:

第零條
 不要立刻舉手發問, 先依後續守則測試, 不行再發問。

第一條
 測試時一律使用 Chrome 並開啟「開發人員工具」。

第二條 ( JavaScript )
 看「開發人員工具」右下方有沒有紅色叉叉, 有的話找到出問題的位置並試著自己解決。

第三條 ( PHP )
 出現 PHP 錯誤訊息, 請找出錯誤的行數並試著自己解決。

第四條 ( SQL )
 出現 SQL 錯誤訊息:
 在程式中執行 SQL 的前一行, 用 echo 顯示 SQL 語法, 並以 exit() 結束程式執行。
 將頁面顯示的 SQL 則到 phpMyAdmin 裡執行看看 SQL 有沒有錯誤。

psr-0 是什麼意思呢?

使用 Composer 時, 在設定檔的 json 常看到 autoload 設定 psr-0。
psr-0 網路上已經有人寫中文說明囉

• PSR-0 Autoloading Standard
• PSR-1 Basic Coding Standard
• PSR-2 Coding Style Guide

網頁分享到 FB 的連結

網頁分享到 FB 的連結, 連到

http://www.facebook.com/sharer/sharer.php?u=網址

例如:

http://www.facebook.com/sharer/sharer.php?u=http://qops.blogspot.tw/

網頁內設定 meta 讓 FB 抓取顯示的資料可以參考:
Optimizing Metadata On Self-Hosted Objects Using Pointers

通常使用下列六個:

    <meta property="fb:app_id" content="{app_id}" />
    <meta property="og:title" content="標題" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="縮圖的原圖 URL" />
    <meta property="og:url" content="http://qops.blogspot.tw/" />
    <meta property="og:description" content="網頁簡短說明" />

除錯工具:
https://developers.facebook.com/tools/debug

CSS: pointer-events

在 Flash/AS3 利用下式就可以關閉某個 MovieClip 對滑鼠事件的反應。

mc.mouseEnabled = false;

在 CSS 可以利用 pointer-events, 可惜 IE 連 IE10 都不支援 !

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>What</title>
    <style type="text/css">
    .layer {
        width: 300px;
        height: 300px;
        position: absolute;
        background-color: #F00;
    }
    #a2 {
        pointer-events: none;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function() {
        $('#a1').click(function(event) {
            alert('a1');
        });
    });
    </script>
    <div style="position: relative;">
        <div id="a1" class="layer" style="z-index:10;">
        </div>
        <div id="a2" class="layer" style="z-index:11; left:100px; top:100px; background-color: #00F">
        </div>
    </div>
</body>
</html>

IE 的解法: http://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone