熱血漢誌 - 技術新鮮人到技術經理人，必懂的事

在Html document 方法當中，在W3C Html5 裡面有提到幾個DOM create 方法，今天來探討一下 insertAdjacentHTML() 這個方法。 insertAdjacentHTML(position, text)，使用上類似於之前的append()，多加上了位置選擇，因此可以做到類似於 jQuery DOM Insertion 這些方式。 另外值得一提的部份就是text ，是可以直接以文字帶入，由insertAdjacentHTML產生為DOM Object，不需要類似之前先Create DOM，再執行append的方式。 // document.getElementById("insert-method").insertAdjacentHTML("beforeend", "<span>bar</span>"); 除了提一下insertAdjacentHTML這個方法之外，同時也探討一下innerHTML，到底跟insertAdjacentHTML有什麼差異。 在 insertAdjacentHTML() Enables Faster HTML Snippet Injection  這篇文章當中裡面有點出innerHTML的異同，如果只是需要使用append DOM的方式，強烈建議採用insertAdjacentHTML，而不要再使用innerHTML，怎麼說呢？ 通常會看到一種簡化append 的方式 // document.getElementById("inner-method").innerHTML += "<span>bar</span>"; 執行上當然沒有任何問題，不過在執行效率上會有差異，innerHTML會先將取得內部所有DOM tree，接著再將DOM object 執行serialize，最後才會<span>bar</span>這段文字接上。 可以在這邊直接看一下線上範例。 測試 在不同瀏覽器經過實際測試效果，可以看一下底下數據（經過500次loop）: Chrome ...

source:  https://github.com/blog/968-say-hello-to-hubot hubot 機器人，可以自己寫script 代替人工作業，也可以用來做代替工人智慧產物。目前這個專案已經使用Coffee script 和node.js重新編寫，並且Open source於github，詳細內容就不多介紹 ，本篇主要教學如何安裝hubot 。 查了很久，對於這套專案的安裝說明實在很少，做個簡單教學紀錄。 安裝前提，以下幾個項目需要事先安裝 node.JS npm redis git coffee-script 安裝步驟 git clone https://github.com/github/hubot.git cd hubot bin/hubot 注意： 中間可能遇到某些module 尚未安裝，請使用npm install 安裝其他module執行指令 注意： 執行hubot 之前，請先切換到 hubot 目錄下 執行hubot 之前，請先啟動redis server  ->  redis-server 常用指令 hubot help 範例指令 搜尋圖片 hubot image me <query> 搜尋youtube hubot youtube me <query> 加載script 指令就是將整個script 專案下載之後，將src/scripts 的資料整個複製到hubot 裡面執行。 git clone https://github.com/github/hubot-scripts cd ~/hubot cp -r ~/hubot-scripts/src/scripts ~/hubot/src/scripts 參考網址 http://joeloughton.com/blog/uncategorized/installing-hubot-on-mac-os-x-10-7/ https://github.com/github/hubot-scripts

修改紀錄： 2011/10/19  node.exe 經過努力之後，child_process 已經可以支援npm cli.js安裝指令，npm github 網站資料安裝說明也進行同步更新，因此本篇資料經過調整後，簡化linux 部份，增加windows 安裝說明！ node.JS 就已經夠麻煩了，還需要什麼nmp，看這三個字就覺得沒有意義， npm (NodeJS package management) ，許多擴充功能都可以藉由此套件快速安裝，例如express, HTTP-connect, template，藉由第三方套件可以大大縮短開發時程。 nodejs 主要程式 安裝完後，其實還有一大區塊，就是直接使用module ，使用現成的模組來開發，以下教學如何安裝npm，主要分為 linux 、 windows 安裝教學說明： PS. 記得 別 使用root權限安裝 Linux npm 安裝 curl http://npmjs.org/install.sh | sh linux npm 安裝完成！ windows npm安裝 下載 node.exe  Windows executable ，預設放至於 curl http://npmjs.org/install.sh | sh

修改紀錄： 2011/10/18 目前nodeJS 已提供windows 執行版本，以及linux 自行編譯的步驟，程序上也都大為降低錯誤率，因此本篇文章將內容縮減為Linux、Windows 兩種版本安裝說明。 所有的nodeJS文章，通常一開始的簡介，之後就是環境安裝介紹，當然也不免俗的來介紹一下，隨著時間的演進與發展，在各種環境都已經有自己一套node repository ，這邊就介紹最基本的unix 底下compile，和windows 兩種方式 Linux 執行以下指令 git clone --depth 1 git://github.com/joyent/node.git ./configure make -j2 make install # 如果出現權限問題，再加上sudo 試試看 以下事項提醒，安裝前先行確認環境中已安裝： git gcc python 同時不要使用root權限安裝，否則會導致node module 因為權限問題，執行出現錯誤。 Windows http://nodejs.org/#download 至此網址，下載 node.exe  Windows executable ，下載完後預設放入C:\node\node.exe，同時設定環境變數： NODE_PATH="c:\node\" 設定完後可以將其他module 放置此目錄底下，執行node 程式時，將會引用此目錄中module，如不存在才會尋找相對路徑。

最近幾年javascript 實在是一門進步神速的語言，從基本瀏覽器腳本語言，到HTML5 使用canvas、video、websocket、worker等，甚至是後端編譯腳本 nodeJS /  ringoJS ，當然還有許多從javascript 編寫出來的套件庫，整體來說javascript 發展的速度比我想像的還要快得多。 回顧javascript 歷史 從Netscape 發展此種語言開始 ，壓根不會想到javascript 會演變成現在的局面，因此在當初訂定javascript 來說，就是毫無標準可言。Javascript 對於沒有接觸過程式開發的人來說，是一種好的開始，畢竟它的容錯性高，出錯率低，簡單來說就是，開心宣告就宣告，不用宣告也可以寫出能動的程式碼！這也造就了javascript 初期開始，可以直接複製、貼上、接專案的映像。 因此由 Douglas Crockford 也開始提倡起 javascript: Good parts(javascript :優良部份) ，也發展出 jslint ，提供大家作為javascript 程式碼驗證工具，會這樣子做不是沒有原因，畢竟javascript 實在是『太方便寫』，自己寫自己的，當然獨自開發這不是太大的問題，但是如果遇到大型專案時，這種充滿『重構味道』的程式碼，自然是一場不可抹滅的惡夢。 套件庫掘起 在AJAX 崛起之後，javascript 的發展就變得相當吃重，也漸漸的讓開發人員體會到 前端開發的重要性 。當然javascript 開發，對於前端來說還是有很多問題，光是跨瀏覽器就是個很令人頭大的問題。 因此各家開發出自己的套件、工具庫，例如 YUI ， dojo ， jQuery 等。當然這是個很不錯得方向，專家們開發出套件，而開發者可以利用套件組裝出自己所需要的效果，瑣碎的問題交由套件處理掉，讓開發者減少開發時間與降低開發門檻。 Javascript 還是沒這麼簡單 前面的套件其實只解決了『前端開發的問題』，但是此時的javascript 已經不再是原本的javascript ，從前端到後端，甚至是指令等都可以利用javascript 來處理，例如nodeJS ，要怎麼利用javascript 寫出易讀，讓開發者容易瞭解、再利用的程...

之前介紹過livereload ，深深覺得他是個好東西，用過之後開發網站就不能缺少他，我真的回不去了。可是就會想要探討到底livereload 是怎麼做到修改檔案之後，就即時做頁面重新讀取呢？ 分析 livereload 當程式執行之後就會開啟一個websocket server，如果檔案有任何變動，會發送訊息給瀏覽器，瀏覽器就會依據檔案不同執行不同程序。 Server端其實做的事情就是監聽檔案變化，發送訊息給client！ 而預設的網站port號會採用35729，如果想要變更port號，在自己的家目錄底下有一個.livereload 檔案，去底下修改這個檔案，例如35729 修改為 88887。 ~/.livereload config.port = 88887

livereload 就跟名字一樣，『立即重新讀取』，主要用途為當編輯檔案修改後，會讓監聽頁面自動重新讀取。這樣子好處在於網站開發者不需要一直重新執行瀏覽器、編輯器切換，按下F5 重新讀取頁面等繁雜的手續。 本篇文章將講解livereload ，快速導覽！ livereload 原理說明請參考！ 安裝 需要先安裝 ruby, gem 參考ruby, rvm, gem 安裝文章 sudo gem install livereload