Blackbing Playground
Blackbing Playground

記錄一些生活與工作的雜事,偶爾會寫一些前端網頁開發的心得


  • 首頁

  • 歸檔
Blackbing Playground

網頁開發工具(Web developing Tool)

發表於 2008-09-15

整理一下我所用過好用的開發工具,因為比較常測試的瀏覽器是FF和IE,所以只列出這兩種,如果還有其他建議請再幫忙補完。

firefox:


  1. firebug:强大的debug工具,有名到不需要再做任何介紹了吧!

  2. Leak Monitor:監視firefox 下Memory Leak的工具。

  3. JSView:檢視外部參考的JS和CSS原始碼,動態引入的檔案也會出現。

  4. Clear Cache Button:清除緩存按鈕,開發中有時會被browser快取,每次都要點來點去清cache很麻煩,用這個小按鈕直接清cache就行了。

  5. YSlow:網站效能測試工具,主要是提出了網頁效能的測試標準,並以此標準來評分,在開發網站時可以作為效能參考的依據。

  6. HTML VALIDATOR :檢測HTML/XHTML的工具。


IE:


  1. firebug lite :要在firefox以外的瀏覽器使用firebug就是這個了!

  2. IEDevToolBar :微軟官方出的小工具,可以觀察DOM、CSS等頁面元素,缺點是無法像firebug即時修改。

  3. Script Debugger :微軟官方出的小工具,在IE上遇到javascript的錯誤相當難debug,此時可以利用這個工具來幫助偵錯,安裝之後需要到工具>選項>進階,將「停用指令碼除錯」取消。

  4. debugBar:類似IEDevToolBar,不過內建一些檢色器之類的小工具,對設計人員來說蠻方便的,推薦安裝。

  5. Drip:偵測IE中Memory Leak的軟體。

  6. IETester:可以同時在windowsXP上開啟IE8 beta 2, IE7 IE 6 and IE5.5,你不用再裝好幾個IE了。

  7. Companion.JS:類似firebug console的工具,主要是可以利用他來做javascript的偵錯,也支援像firebug的console.log。

  8. fiddler:可以擷取所有 HTTP 的封包,點此、還有這、有中文的詳細介紹。


有沒有發現為什麼我列出來IE的tool比較多?因為在firefox上,firebug就可以包辦幾乎所有開發者想做的事情了XD

Blackbing Playground

(筆記)從 HTTP Request Header 取得行動裝置的 Profile

發表於 2008-09-11

原文連結
原來是靠 UAProf 這個東西啊!

閱讀全文 »
Blackbing Playground

(筆記)撰寫jQuery的工具

發表於 2008-09-11

說實在我還是比較習慣用文字編輯器就好,目前最愛用的是emeditor和editor plus,不過哪天工作會大量用到dreamweaver或eclipse時就有可能會用到了。

Dreamwaver擴充工具(原文連結)

下載 jQuery_API.mxp
然後在 DW –>命令–>管理擴充功能–>CTRL+I 選擇 jQuery_API.mxp –>勾選開啟

如果沒有管理擴充功能-請至

http://www.adobe.com/tw/exchange/em_download/ 下載安裝即可以

閱讀全文 »
Blackbing Playground

我不喜歡預設的marker mouseover的style,可以改嗎?

發表於 2008-09-10

A:請自己綁定mouseover事件,利用UMarker.getPoint()來取得經緯度座標,並設定marker info的位置。

閱讀全文 »
Blackbing Playground

(筆記)安裝phplist

發表於 2008-09-10

網路上看phplist的安裝教學,寫的蠻詳細的,有空可以裝來玩玩看。
原文來源

準備環境
Linux+Apache+Mysql+Php(對啦傳說中的燈泡)
軟體取得
http://dh.twpug.org/major/phplist/phplist-2.11.3.zip
產生phplists-2.11.3 資料夾
這個是支援utf-8也支援中文語系的
解壓縮,想辦法讓網頁可以連結到lists目錄
我是隨便放,然後用symbolic link,好處不少

cd /usre/local

wget http://dh.twpug.org/major/phplist-2.11.3.zip

unzip phplist-2.11.3.zip

cd XXX (Your DocumentRoot)

ln -s /usr/local/phplists-2.11.3 lists


安裝前準備
連線至主機更改你的設定
找到lists/config/config.php

修改下列幾行資料修改

1
2
3
4
5
6
7
8
9
$language_module = "tchinese.inc"<正體中文語系>
$database_host = "localhost"; <資料庫與主機同一部就設localhost>
$database_name = "YYY";
$database_user = "ZZZ"; <別偷懶,改成你自己的資料庫使用者>
$database_password ="PASSWORD ''; <密碼也要改你自己的>

改好後,進MYSQL去增加你要用的資料庫,在這裡就是YYY
基本上做到這裡你就可以用網頁方式安裝了

http://Host/lists/admin/index.php

通常安裝就沒問題了
要注意的是,這隻程式安裝環還得進一步設定,包括admin的密碼等等很多很多

最需要注意的是
如果你老是寄不出去,想要自殺的時候,記得去看一下原始的說明文件
官網的FAQ
http://forums.phplist.com/viewforum.php?f=5&sid=3efc336faad7d215f85db20b2a2305df

原來還要改config.php
找到
define (“TEST”,1);
改成
define (“TEST”,0);
才不會一直停留在測試模式

Blackbing Playground

jQuery-眼力測驗

發表於 2008-09-08

用jQuery寫了一個小遊戲,用jQuery寫起來真是簡單,有空我再請強者我妹設計一下版面好了:D
jQuery 眼力測驗

Blackbing Playground

Firefox下自動斷行的究級解決方案

發表於 2008-09-08

這次是詭異的Firefox一直不解決自動斷行的問題,上網找了一下終於有個究級解決方案,也不需要用javascript來算字數解決,只是需要多include一個xml檔案,這是我測試的頁面,這是參考資料來源。

上網搜尋了一下,原來Tsung’s Blog早就發過了類似文章,這也顯現出搜尋引擎的問題,同樣的問題如何找得到最佳解答?我找到絕大多數的結果都是利用javascript來計算字數插入斷行符號:例如:點我。既然要計算字數,那就不叫自動斷行,更何況若innerHTML裡頭夾雜了一堆tag鐵定判斷錯誤?而搜尋引擎找出來的結果幾乎都被這些解答所掩蓋,因此要找這看似簡單的問題,卻是異常的困難。

若要直接下載測試檔案請按我

Blackbing Playground

迷上jQuery

發表於 2008-08-24

最近迷上了jQuery,其實很早之前就知道他很輕巧好使,對於像YUI、prototype、ucren、mootool等framework也 都是抱著玩玩看的心情去玩,其實都各有各的優點,但是由於自己也在開發API的關係,並不希望被任何的framework綁住,所以一直都沒有玩得很深。 直到最近工作上要碰一些UI的東西,才開始研究到底要用哪個framework,原則上太大的framework我不要,例如YUI、EXT,其實他們非 常的強大,我一直都很佩服YAHOO的工程師,尤其是幾個太有名的大老Douglas Crockford、Peter-Paul Koch(PPK) ,YUI Theater也是個學習的好地方,不過我覺得YUI的定位比較像是在tool上,所以新手會很難上手,prototype很適合初學者作為研究code的對象,我最初的javascript物件導向觀念也是從學習prototype來的,例如:從prototype.js深入學習javascript。我個人認為基礎打好要使用任何framework都不會是難事,基礎沒打好就要用framework一開始會覺得很輕鬆,但是就會變得非常依賴framework,我想這可不是一件好事。

回到主題,由於有了一定的基礎,在使用jQuery根本就是如於得水,尤其是jQuery的selector,我發現我竟然像小孩子一樣開心,這實在是太 amazing了,沒想到透過jQuery在DOM tree之間遊走竟然是這麼的簡單,他有太多的方式可以任意的在DOM tree之間游來游去,這實在是很棒的作法。加上他的動態method,讓我很輕易的做到動態的效果,當然jQuery不只這些優點,但有很多大俠在介紹 了,所以我也不便獻醜:


  1. PTT的TonyQ大大的文章:WEB轉載

  2. ericsk國二學生的BLOG:http://blog.ericsk.org/archives/833


最近公司在徵前端工程師,有興趣的人趕快來跟我聯絡吧,哈~

Blackbing Playground

new Object() vs {} and new Array() vs [] 效能比較

發表於 2008-07-06

在javascript中,要new一個空的object,可以用
var foo = new Object;
或是
var foo = {};

而 要new一個空的Array,可以用
var bar = new Array();
或是
var bar = [];

我做了一個簡單的效能比較如上圖所示

結論:
new 空物件和new 空陣列只要使用{}、[]即可,簡單又快速。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<button onclick="testObj1()">testObj1</button>
<button onclick="testObj2()">testObj2</button>
<button onclick="testArray1()">testArray1</button>
<button onclick="testArray2()">testArray2</button>
<div id="bug"></div>
<script>
function testObj1(){
var current = getCurrentTime();
for(var i=0; i<100000; i++)
var obj = new Object();
document.getElementById('bug').innerHTML += "new Object:"+(getCurrentTime() - current) + "ms<br />";
}
function testObj2(){
var current = getCurrentTime();
for(var i=0; i<100000; i++)
var obj = {};
document.getElementById('bug').innerHTML += "{}:"+(getCurrentTime() - current) + "ms<br />";
}
function testArray1(){
var current = getCurrentTime();
for(var i=0; i<100000; i++)
var obj = new Array();
document.getElementById('bug').innerHTML += "new Array:"+(getCurrentTime() - current) + "ms<br />";
}
function testArray2(){
var current = getCurrentTime();
for(var i=0; i<100000; i++)
var obj = [];
document.getElementById('bug').innerHTML += "[]:"+(getCurrentTime() - current) + "ms<br />";
}
function getCurrentTime(){
return new Date().getTime();
}
</script>
1…1011
Bingo Yang

Bingo Yang

記錄一些生活與工作的雜事,偶爾會寫一些前端網頁開發的心得

109 文章
61 分類
RSS
© 2018 Bingo Yang
由 Hexo 強力驅動
主題 - NexT.Muse