console.log fallback

上次遇到 console.log 在 IE 上的問題, stackoverflow  上有不錯的解法。
「console.log is only available after you have opened the Developer Tools」只能說花熱發...

練習打包成小工具 console_log_fallback.js

(function(){
  'use strict';
  var _scripts = document.getElementsByTagName('script');
  var _script = _scripts[_scripts.length-1];
  var _url = _script.src;
  var _qi = _url ? _url.indexOf('?') : -1;
  var alertStead = false;
  var i, param, params = _url.substr(_qi + 1).split('&');
  for (i = 0; i < params.length; i++) {
      param = params[i].split('=');
      if (param[0]=='alert' && parseInt(param[1])) {
          alertStead = true;
      }
  }

  if (typeof console === "undefined" || typeof console.log === "undefined") {
    console = {};
    if (alertStead) {
      console.log = function(msg) {
        alert(msg);
      };
    } else {
      console.log = function() {};
    }
  }
})();

使用以下方式時, 在 IE 可以用 alert 來替代 console.log 除錯:

<script src="console_log_fallback.js?alert=1" type="text/javascript"></script>

在 CodeIgniter 使用圖形驗證

◎方式一: 使用內建的 CAPTCHA Helper
   在使用手冊中, 建議用 DB 來記錄 captcha word; 個人是比較習慣使用 session 來記錄, 這樣可以省掉 DB 的操作。步驟:

1. 在 controller 類別的建構式中載入 CAPTCHA Helper 和 SESSION Class。

$this->load->library('session');
$this->load->helper('captcha');

2. 建立一個目錄用來暫存 captcha 圖片, 注意該目錄必須設定為 writeable。以下的範例是在 document root 建立名為 captcha 的目錄, 目錄裡的圖形檔過期後會自動被刪除。

3. 在 controller 類別中定義產生圖形的方法:

    private function captcha_img() 
    {
        $pool = '0123456789';
        $word = '';
        for ($i = 0; $i < 4; $i++){
            $word .= substr($pool, mt_rand(0, strlen($pool) -1), 1);
        }
        $this->session->set_userdata('captcha', $word);
        $vals = array(
            'word'  => $word,
            'img_path'  => './captcha/',
            'img_url'  => $this->data['baseURL'] . 'captcha/',
            'expiration' => 1200
            );
        $cap = create_captcha($vals);
        return $cap['image'];
    }

●   $word 為亂數產生的字串, 可以自訂產生的方式。
●   接著將 $word 值設定到 session 存起來, 以方便之後的比對。
●   $vals 為建立 captcha 時的設定:
   ○   word: 欲顯示的文字
   ○   img_path: 暫存圖形的目錄
   ○   img_url: 圖形目錄的 URL
   ○   expiration: 過期的時間, 單位為秒
●   $cap['image'] 會是包含圖片路徑的 <img> 標籤的字串

4. 比對驗證碼:

$this->input->post('captcha') == $this->session->userdata('captcha')

 CAPTCHA Helper 優點是使用起來方便, 不需額外安裝其它外掛; 缺點是較為陽春, 預設大小為 150 * 30, 外觀幾乎不能用設定方式更改。

Flash 開發效能檢測工具: TheMiner

一般常使用 Hi-ReS-Stats 來檢測 Flash 的效能, 可以看到簡單的 FPS 的記憶體使用情況。

剛剛無意間發現 TheMiner (舊名為 FlashPreloadProfiler), 試用了「非商業版」, 功能不少, 感覺還不錯。有非商業版就表示有商業版, 請自行閱讀其使用者條款 (有些功能商業版才提供)。

作者的 Blog 介紹: http://jpauclair.net/flashpreloadprofiler/
官網: http://www.sociodox.com/theminer/
安裝方式: http://www.sociodox.com/theminer/tutorial/tutorial_install.html

安裝方式建議使用第三種, 步驟:
1. 設定允許 TheMiner_zh-tw.swf 的全域安全性 (Flash Global Security Settings)
2. 在用戶家目錄設定 mm.cfg 檔, 在 Win 7 上的設定情況

PreloadSWF=PreloadSWF=C:\Users\用戶名稱\TheMiner_zh-tw.swf

在 Flash IDE 測試影片時, 就可以看到左上方的工具列了。

用 jQuery Address 實現「深連結」

jQuery Address 提供所謂「深連結」(Deep linking) 的功能, 簡單講就是以 # 實現不換頁而標示 (或顯示) 網頁的部份內容。
套現在流行的「微」文化, 應該也可以稱為「微連結」吧 XD。

AS 開發者會覺得這東西很像 SWFAddress, 沒錯兩者目的是一樣的, 而且是同一家公司開發的優質兄弟產品。

jQuery Address 是顧名是 jQuery 的外掛, 使用起來相當方便。
官網: http://www.asual.com/jquery/address/
官方最能說明其功能的範例: http://www.asual.com/jquery/address/samples/api/

用 Highlight.js 美化網頁上的程式碼

Highlight.js 能讓網頁上的程式碼更容易閱讀, 支援數十種程式語言, 而且可以自動判斷程式語言, 無需指定。
缺點是, 程式碼若太短判斷可能不正確。
官網: http://softwaremaniacs.org/soft/highlight/en/
Demo: http://softwaremaniacs.org/media/soft/highlight/test.html
Download: http://softwaremaniacs.org/soft/highlight/en/download/
Github: https://github.com/isagalaev/highlight.js

使用方式, 請看 Github 上專案首頁的 readme.

CKEditor 和 KCFinder 設定

FCKEditor 改版為 CKEditor 把上傳圖片拿掉了。若要有檔案上傳的功能，可以使用官方推出付費的 CKFinder、使用免費的 KCFinder，或自行編寫上傳功能。在此選用 KCFinder 設定。

配置方式可以參考這篇「如何配置 CKEditor 使用 KCFinder?」