這是一即時影像更新的實作，利用龍洞即時影像圖片來源，每三秒更新一次圖片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function Camera(img) {
    this.img = img; // 圖片來源
}
Camera.prototype = {
    refresh: function() {
        var uniq = Math.random();
        $('#cam').attr('src', this.img + '?uniq=' + uniq);
    },
    loadImg: function () {
        var self = this;
        $('#cam').load(function() { // 註冊onload事件，當圖片載完3秒後觸發refresh事件
            setTimeout(function() { self.refresh.call(self); }, 3000);
        });
    }
};

請參考：實作範例

想在Heroku架設一個靜態網站？ 為了這件事特地寫個應用實在麻煩，最簡單的做法是將index.html更名為_index.html(或其他類似的名字)，並新增一個index.php內容如下：

1
2
3

<?php
    include_once("_index.html");
?>

部署步驟如下： 1.為網站建立一個專案：

1
2

mkdir heroku
cd heroku

2.建立index.php，並指向靜態網站首頁。 3.推送到Heroku上：

1
2
3
4
5

git init
git add .
heroku create <appName>
git commit -m "initial commit"
git push heroku master

4.打開網站確認：

1

heroku open

部署完成囉！ -- 題外話，有試著偷渡把index.html改成index.jsp，想當然是失敗了......push時報錯：! Push rejected, no Cedar-supported app detected

最近從Ubuntu換到Mac，記錄一下一些實用的工具：

• Sublime Text 2: 好用的文字編輯器，拿來寫前端網頁很方便，輕量又高效。
• VirtualBox: 虛擬電腦。
• LibreOffice: 文書軟體。
• zsh: 好用的shell。

30 Days to Learn jQuery真的是很不錯的基礎課程。 最近常被問到有沒有寫過jQuery的plugin，有興趣的人特別要看看Head First Into Plugin Development這集，在這裡簡單地整理出影片中的一些要點： 1. 利用self invoking function包覆plugin的code去確保$符號表示jQuery：

1
2
3

(function ($, window, document, undefined) {
    // code here...
})(jQuery, window, document);

一開始是用Octopress架網誌，但在找theme時看到Hexo這個好東西就馬上遷過去了。 原因很簡單：

1. node.js產生靜態網頁速度很快
2. hexo算是基於octopress的架構去發展，可以說是無痛轉移
3. 支援GitHub, Heroku

再說比起Ruby，javascript對我來說方便調整多了，一整個神清氣爽。 -- Hexo專案 (是台灣人開發的) Hexo說明文件 網誌用到的Plugins：RSS, Sitemap 主題：Persona Dark -- 網站的網頁用EJS樣板文件產生，CSS以Stylus維護，通常只要更改這些檔案就可以了。 舉例來說如果要將文章中的超連結另開視窗，又不想在md檔加上HTML的tag，可以修改head.ejs加入以下script：

1
2
3
4
5
6
7
8
9

<script>
(function (window, document, undefined) {
    $(document).ready(function() {
        $('article a[href^="http"]').each(function () {
            $(this).attr('target', '_blank');
        });
    });
})(this, document);
</script>