Day: 2012 年 7 月 8 日

前端开发利器-WebStorm

by Orange

最近同事推荐了一一款前端开发工具webstorm，使用了一下，便深深被吸引住了，抛弃以前一直使用的editplus，改用webstorm。花费一下午时间简单翻译了下官方文档上的特性说明。

HTML/HTML5/CSS

1.支持标签，自动闭合标签，数据源提示（如下图），id检测

wps_clip_image-20755

2.支持html5标签

3.代码检测功能

wps_clip_image-10511

4.代码优化提示功能

wps_clip_image-28323

5.zen 编码风格 例如输入div.feature>h4+p 再按tab建就会自动生成下面代码

6.显示当前元素的样式 点击右键选择下列菜单 效果如下

wps_clip_image-8448

wps_clip_image-32139

JavaScript

1.代码提示功能

wps_clip_image-22072

2.代码本地化及查找功能，以及高亮显示相关使用地方

wps_clip_image-26038

3.联动修改 例如tabs.js里定义了Downtabs 用户可以通过右键refactors来执行相应操作，重命名、移动、拷贝、安全删除、扩展类、直接引入代码(inline 不知道怎么表达) 如下图效果：

wps_clip_image-32093

wps_clip_image-27637

此时在extract中选择refactor->inline会生成如下代码：

wps_clip_image-10166

4.javascript调试功能在火狐中

5.支持框架jquery、yui、prototype、dojo、mootools、qooxdoo、bindows

还有很多很多的优点，例如代码格式化、体积小、自动保存、编辑后浏览器浏览缺点，目前发现的就一点不太好，自动生成idea文件夹，影响svn版本号

6.常用的webstorm快捷键

IntelliJ-Idea （更多…）

15 Awesome Free JavaScript Charts

by Orange

Plotting your data can serve as a replacement to tabular data, and is also a great way to add practical graphics to your web page or application. There are many ways you can plot data, but here I have included 15 Awesome Free JavaScript Charts In Your Sites/Blog Pages which serves as a easy Charting solution. Hope you like it.

RGraph: HTML5 & Javascript charts for your website

rgraph-chart

RGraph is a charts （更多…）

10款优秀的HTML5开发工具推荐

by Orange

HTML5发展如火如荼，随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟，未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具，帮助你更高效的编写HTML5应用。

1.Initializr

4721_36142

Initializr是制作HTML5网站最好的入门辅助工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr会为你生成代码简洁的可定制的网页模板。

2.HTML5demos

4722_fb712

想知道你的浏览器是否支持HTML5 Canvas吗？想知道Safari是否可以运行简单的HTML5聊天客户端吗？HTML5demos会告诉你每一个HTML5特性在哪些浏览器中支持。

3.HTML5 Tracker

4723_af073

想了解HTML5的最新动向吗？使用HTML5 Tracker吧，它可以跟踪HTML5最新修订信息。

4.HTML5 visual cheat sheet

4724_eab4f

想要快速超找一个标签或者属性吗？看看这个非常酷的速查手册吧，每个Web开发人员的必备。

5.Switch To HTML5

4725_97be6

Switch To HTML5是一个基础而有效模板生成工具。如果你开始一个新项目，可以到这里获取免费的HTML5网站模板。

6.Cross browser HTML5 forms

4726_93239

HTML5中的日历，取色板，滑块部件等都是非常棒工具，但是有些浏览器不支持。这个页面将帮助你构建完美的HTML5表单兼容方案。

7.HTML5 Test

4727_d8c2a

你浏览器准备好迎接HTML5革命了吗？HTML5 Test将告诉你。这个网站会为你当前使用的浏览器生成一份对video、audio、canvas等等特性的支持情况的完整报告。

8.HTML5 Canvas cheat sheet

4728_bf9f0

Canvas元素是HTML5最重要的元素之一，它可以在网页中绘制图形，非常强大。这是一个Canvas元素的详细速查手册。

9.Lime JS

4729_969b5

LimeJS是一个HTML5游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。非常棒，一定要用用试试。

10.HTML5 Reset

4730_793b7

HTML5 Reset是一组文件，包括HTML、CSS等，用于在开始新项目的时候帮助你节省时间，提供HTML5的空白WordPress模板。

HTML5 Canvas Graphing Solutions Every Web Developers Must Know

by Orange

Canvas element as part of HTML5 has been creating a buzz all throughout the web standards community since its introduction, mainly because there are underlying question regarding its capability to change the
future of the web. But for some, it is an opportunity to them to start already on experimenting and developing a application that is based on HTML5.

HTML5 Canvas elements provide an important （更多…）