跳到主要內容

文章

目前顯示的是 七月, 2011的文章

[教學] nodeJS直接module加載於windows native node

NodeJS 終於在0.5.1(unstable) 版本提供了Windows native supprot.,但是美中不足的部份就是childprocess的功能支援不完全,因此無法透過node.exe來安裝npm

這樣子會造成很多遺憾,例如socket.io, redis, mysql等其他外掛模組都無法加載進來,本篇文章就是講解如何直接將這些外部module加載進來,不需要經過npm或者其他腳本語言安裝module。

設定環境變數
下載node v0.5.2 native windows

將node.exe放置到自己的資料夾中(這邊預設為c:\node

[分享] 解決網頁長文字破版現象

網頁前端處理,最常碰到的事情就是『破版』,會因為樣式問題導致許多破版的狀況產生。這邊所提到的就是在『英數連續長字串』會發生的破版現象,並解說如何解決。

首先讓我們看一下怎麼樣的情況會破版。

前提,文字內容為英數連續長字串,在紅色div寬度限制下,會凸出來一大塊,這想必不是我們所樂見的,因此需要做些改進,這邊就介紹一下改進的方式。

[分享] Javascript 計算字元長度, count string length by javascript

今天遇到一個問題,很簡單的一個問題當有一個input box需要限制輸入長度,想當然很簡單在input 裡面加上一個maxlength屬性就可以完成限制,接著有另一個更大的問題,因為使用者從多個國家而來,我們需要接受,『中英輸入』的文字,那問題就出現了!

像是Facebook album就有這樣的問題存在,當我很開心的輸入了一連串的國,直到不能輸入為止,再按下儲存,本以為『國國國國國....國國國』相簿應該會存在,可惜...


實際上後面卻給我出現外星符號,而且我剛剛輸入的『國國國....』應該是目前數量2倍之多啊,為什麼會這樣子,搞了許久發現問題在於,在PHP認定字串長度是使用byte來計算,並不是採用字元為單位。

前端頁面的算法,input box裡面,一個字為一個長度,在Javascript裡面也是,一個字就是一個長度,所以前端所看到的字串,丟到PHP之後又變成了第三度空間,內容都會被扭曲,尤其是尾巴的部份。

介紹將字串轉換為Byte 計算長度:

"測試".length; // output : 2; "ab".length; // output : 2;
這樣子的結果似乎不是我們要得,所以我們決定轉換另一個方向,將所有字元長度都先轉換為byte code,之後再計算字元長度。

encodeURIComponent("測試"); // output "%E6%B8%AC%E8%A9%A6" encodeURIComponent("ab"); // output "ab"
轉換成 byte之後,感覺上就可以開始計算了,一個中文可以切成3個byte,1個byte會呈現%dd,就可以計算成一個中文字,將上面得到的字串長度再除3就可以得知目前字長度。

var str = encodeURIComponent("測試"); console.log(str.length /3); // output 6
乍看之下的確如此,但是中英文的情況會是如何!?
剛剛的結果很明顯長度為6,如果在中間穿插3個英文,會是什麼狀況?

var str = encodeURIComponent("a測b試c"); console.lo…

[新聞] NodeJS換新LOGO, NodeJS change a new logo.

根據官方說明,NodeJS將朝向品牌,為了這個目標建立了新的LOGO,提高NodeJS的辨識度。

針對這次新設計的LOGO邀請Chris Glass,為NodeJS設計新的LOGO,利用幾何圖學結構,來強調出Node,這個字樣,是活潑、有整體結構而且與彼此關係是緊密連結的。整個Node字樣,是基於拓普網路,將各個節點結合,形成緊密的網路型態。
目前官方提供了: 四種不同顏色LOGO (EPS原始檔)桌布(1024 x 768 | 1280 x 1024 | 1440 x 900 | 1920 x 1200 | 2560 x 1440) 歡迎到NodeJS官方網站下載!多種樣式任君挑選。 最後讓我們再看一眼早期的LOGO...

[工商服務] NodeJS Taiwan期待更多人的支持,希望能夠聽到你的回應及分享。

[教學] CSSLint 檢查CSS 安裝及教學. How use CSSLint

前端工程總是需要很多的工具搭配和經驗,Javascript 已經有套很好用的檢驗工具JSLint,而今天介紹的就是使用CSSLint,CSSLint顧名思義,就是用來檢查CSS的項目,當然裡面有許多檢查的範圍,這篇文章就不一一贅述。

CSSLint最棒的地方就是目前有直接線上網站檢查機制。這套工具是由Nicole Sullivan, Nicholas C. Zakas共同製作的工具同時也是放置Github Open source專案,CSSLint檢查工具是搭配NPM所發展的CLI檢查工具,讓開發者編寫完CSS之後可以立即檢查,透過工具檢查機制,可以讓犯錯的機會降低,這就是工具發展的願景,更也是大家共同的目標。話不多說,直接看看怎麼使用CSSLint。
CSSLint:
線上網站CSSLint Source code檢查標準官方有列出所有檢查機制

安裝以及執行CSSLint: npm install csslint -global