做最好的中文Web工具,提高工作效率
利用業(yè)余時(shí)間跟朋友一起做了一個(gè)網(wǎng)站:http://www.chinacxy.com,這是一個(gè)工具性的網(wǎng)站,主要針對(duì)web開(kāi)發(fā)工程師。經(jīng)過(guò)斷斷續(xù)續(xù)的改進(jìn),現(xiàn)在終于可以向大家介紹推薦了。我們的目標(biāo),做最好的中文web工程師工具,提高前端開(kāi)發(fā)者的工作效率。
因?yàn)樽约阂彩荳eb開(kāi)發(fā)者,有時(shí)要用到一些工具,但在網(wǎng)上總是找不到滿意的,并且很分散,滿屏的廣告,因此產(chǎn)生了自己開(kāi)發(fā)的想法,于是遂跟一位朋友一起開(kāi)發(fā)了此站。對(duì)于網(wǎng)站上放廣告問(wèn)題,我不反對(duì),因?yàn)榫W(wǎng)站畢竟有運(yùn)營(yíng)成本,但一定要有個(gè)度,不能讓廣告影響到了用戶(hù)的使用。
另外,這此工具都很常用,大家都可以在別的網(wǎng)站上找到,所以每個(gè)工具都有“山寨”的嫌疑,喜歡用的朋友就用,不喜歡的不勉強(qiáng)。
下面就分塊來(lái)介紹一下目前具備的功能。
網(wǎng)頁(yè)特效
先上圖吧:
做這個(gè)功能的目地是收集一些比較網(wǎng)頁(yè)特效。目前收集的還不多,我們會(huì)慢慢增加。另外大家可以對(duì)認(rèn)可的效果進(jìn)行投票,評(píng)論。
后面會(huì)考慮把此功能向廣大web開(kāi)發(fā)者開(kāi)放,讓開(kāi)發(fā)者可以上傳自己的作品。
正則表達(dá)式
效果圖:
本工具提供了正則在線運(yùn)行和替換功能,并對(duì)結(jié)果進(jìn)行了高亮。
另外,為了方便大家使用,提供了一些常用的正則表達(dá)式,當(dāng)然,這些正則只是根據(jù)個(gè)人知識(shí)和互聯(lián)網(wǎng)上的進(jìn)行整理的,由于個(gè)人水平有限,不保證絕對(duì)正確。大家如果發(fā)現(xiàn)有誤請(qǐng)給我留言或在網(wǎng)站的“關(guān)于”頁(yè)面反饋。
CSS/JS/HTML格式化
效果圖:
本工具主要提供了代碼格式化功能,大家把代碼復(fù)制到文本框內(nèi)即可,程序可以自動(dòng)識(shí)別處理。
本工具的html和javascript部分用了beautify.js,CSS部分是朋友寫(xiě)的JS,大家在使用過(guò)程中如果發(fā)現(xiàn)bug請(qǐng)記得反饋哦:)。
JSON格式驗(yàn)證
效果圖:
這個(gè)工具是某個(gè)用戶(hù)反饋建議增加的功能。
本工具主要是對(duì)json格式進(jìn)行格式化和驗(yàn)證,大家可以對(duì)ajax里提交或返回的JSON格式進(jìn)行驗(yàn)證。
在線編輯代碼
效果圖:
為了頁(yè)面空間更大,這個(gè)頁(yè)面跟其他頁(yè)面風(fēng)格不同哦。
這個(gè)工具是看到園友在博客里發(fā)了一個(gè)HTML5所見(jiàn)即所得在線coding的工具后加上去的。
顏色選擇器
效果圖:
這個(gè)工具的功能很簡(jiǎn)單,就是選擇一個(gè)顏色,可以得到rgb的值。
自己PS一下,這是我覺(jué)得所有功能中最差的一個(gè),正考慮是否去掉,大家可以在評(píng)論中給出自己的意見(jiàn)哦。
圖片base64編碼工具
效果圖:
這個(gè)工具就是把圖片轉(zhuǎn)換為base64格式,一個(gè)偶爾會(huì)用到的小功能,昨晚才上線的:)。
當(dāng)然,這個(gè)適合較小的圖片,像圖中產(chǎn)生的base64字符串這么長(zhǎng)就不合適,會(huì)導(dǎo)致CSS文件很大。
jscode.chinacxy.com
效果圖:
這是一個(gè)獨(dú)立的子站,第一眼看上去這個(gè)跟國(guó)外的jsfiddle.net網(wǎng)站基本一樣,大家先別急著罵我山寨,我說(shuō)說(shuō)這個(gè)工具的由來(lái)。
我個(gè)人非常喜歡jsfiddle.net這個(gè)網(wǎng)站,但在使用過(guò)程中發(fā)現(xiàn)這個(gè)網(wǎng)站有一個(gè)讓人很抓狂的bug,就是在右邊的幾個(gè)面板中有時(shí)不能輸入中文,另外由于在國(guó)外,有時(shí)打開(kāi)速度很慢,甚至有時(shí)會(huì)打不開(kāi)。我們?cè)谶@個(gè)網(wǎng)站github主頁(yè)提交過(guò)這個(gè)bug,但作者回復(fù)說(shuō)這是其中一個(gè)JS庫(kù)(codemirror)的bug,下一版本沒(méi)計(jì)劃修復(fù)此bug。
也許是這個(gè)網(wǎng)站大部分都是國(guó)外用戶(hù)吧,英文輸入不存在這個(gè)bug,在忍無(wú)可忍之下我們就自己開(kāi)發(fā)了一個(gè)這樣的網(wǎng)站。第一版的目標(biāo)就是山寨jsfiddle.net的主要功能,修復(fù)中文不能輸入的bug,但因?yàn)橛玫氖莿e人的庫(kù),在IE下還是有此問(wèn)題,大家在使用時(shí)可選擇較新版的Chrome或FireFox。
后記
我們開(kāi)發(fā)這樣一個(gè)工具型的網(wǎng)站僅僅是想方便web開(kāi)發(fā)者,提高大家的工作效率,得到大家的認(rèn)可。我們非常希望得到大家的意見(jiàn)和建議,請(qǐng)看到此文的用戶(hù)不吝留下您的看法。
原文鏈接:http://www.cnblogs.com/jscode/archive/2012/06/08/2541210.html
【編輯推薦】