我们的目标,做最好的中文web工程师工具,提高前端开发者的工作效率

2012年6月8日星期五

我们的目标,做最好的中文web工程师工具,提高前端开发者的工作效率




利用业余时间跟朋友一起做了一个网站:http://www.chinacxy.com,这是一个工具性的网站,主要针对web开发工程师。经过断断续续的改进,现在终于可以向大家介绍推荐了。我们的目标,做最好的中文web工程师工具,提高前端开发者的工作效率。


因为自己也是web开发者,有时要用到一些工具,但在网上总是找不到满意的,并且很分散,满屏的广告,因此产生了自己开发的想法,于是遂跟一位朋友一起开发了此站。对于网站上放广告问题,我不反对,因为网站毕竟有运营成本,但一定要有个度,不能让广告影响到了用户的使用。


另外,这此工具都很常用,大家都可以在别的网站上找到,所以每个工具都有“山寨”的嫌疑,喜欢用的朋友就用,不喜欢的不勉强。


下面就分块来介绍一下目前具备的功能。


网页特效


先上图吧:



做这个功能的目地是收集一些比较网页特效。目前收集的还不多,我们会慢慢增加。另外大家可以对认可的效果进行投票,评论。


后面会考虑把此功能向广大web开发者开放,让开发者可以上传自己的作品。


正则表达式


效果图:



本工具提供了正则在线运行和替换功能,并对结果进行了高亮。


另外,为了方便大家使用,提供了一些常用的正则表达式,当然,这些正则只是根据个人知识和互联网上的进行整理的,由于个人水平有限,不保证绝对正确。大家如果发现有误请给我留言或在网站的“关于”页面反馈。


CSS/JS/HTML格式化


效果图:



本工具主要提供了代码格式化功能,大家把代码复制到文本框内即可,程序可以自动识别处理。


本工具的html和javascript部分用了beautify.js,CSS部分是朋友写的JS,大家在使用过程中如果发现bug请记得反馈哦:)。


JSON格式验证


效果图:



这个工具是某个用户反馈建议增加的功能。


本工具主要是对json格式进行格式化和验证,大家可以对ajax里提交或返回的JSON格式进行验证。


在线编辑代码


效果图:



为了页面空间更大,这个页面跟其他页面风格不同哦。


这个工具是看到园友在博客里发了一个HTML5所见即所得在线coding的工具后加上去的。


颜色选择器


效果图:



这个工具的功能很简单,就是选择一个颜色,可以得到rgb的值。


自己PS一下,这是我觉得所有功能中最差的一个,正考虑是否去掉,大家可以在评论中给出自己的意见哦。


图片base64编码工具


效果图:



这个工具就是把图片转换为base64格式,一个偶尔会用到的小功能,昨晚才上线的:)。


当然,这个适合较小的图片,像图中产生的base64字符串这么长就不合适,会导致CSS文件很大。


jscode.chinacxy.com


效果图:



这是一个独立的子站,第一眼看上去这个跟国外的jsfiddle.net网站基本一样,大家先别急着骂我山寨,我说说这个工具的由来。


我个人非常喜欢jsfiddle.net这个网站,但在使用过程中发现这个网站有一个让人很抓狂的bug,就是在右边的几个面板中有时不能输入中文,另外由于在国外,有时打开速度很慢,甚至有时会打不开。我们在这个网站github主页提交过这个bug,但作者回复说这是其中一个JS库(codemirror)的bug,下一版本没计划修复此bug。


也许是这个网站大部分都是国外用户吧,英文输入不存在这个bug,在忍无可忍之下我们就自己开发了一个这样的网站。第一版的目标就是山寨jsfiddle.net的主要功能,修复中文不能输入的bug,但因为用的是别人的库,在IE下还是有此问题,大家在使用时可选择较新版的Chrome或FireFox。


后记


我们开发这样一个工具型的网站仅仅是想方便web开发者,提高大家的工作效率,得到大家的认可。我们非常希望得到大家的意见和建议,请看到此文的用户不吝留下您的看法。


本文首发博客园:http://www.cnblogs.com/jscode/archive/2012/06/08/2541210.html,如果您在其他网站上看到这篇文章,也请来博客园留言评论,非常感谢。



本文链接






via 博客园_首页 http://www.cnblogs.com/jscode/archive/2012/06/08/2541210.html

0 评论 :