漂亮的loading页面,用 SVG 画，非常漂亮，适合用在 Web APP 中.demo[repo owner=”codrops” name=”PageLoadingEffects”]
Haroopad 最好用的markdown编辑器跨平台，代码高亮，Vim 键绑定，多列模式，行号，折叠， Github Flaverd Markdown 等功能.
离站提示JS工具：Ouibounce,当离开网站时给出一个提醒,从jobbole看到的.tip:和bootstrap的model 结合时要在参数的callback中 手动 用$('#share').modal();触发，官网没说，这个要注意.demo如下:[repo owner=”carlsednaoui” name=”ouibounce”]
很多程序员都会习惯性的在Textarea中按Tab键进行缩进，结果是——焦点移动到下一个控件去了。tabIndent.js就是一个专门用来解决这个问题的小巧脚本，只需要在页面中引用它，并调用tabIndent.renderAll();即可处理class为tabindent的Textarea。[repo owner=”julianlam” name=”tabIndent.js”]
Heatmap.js用来生成基于用户自定义数据上的web 热图，内嵌html5 画布元素。可根据以下数据来源绘制热图：静态数据鼠标移动鼠标点击支持浏览器：Firefox 3.6+, Chrome 10, Safari 5, Opera 11 and IE 9+.[repo owner=”pa7” name=”heatmap.js”]
分享了几篇bootstrap的文章，再来分享一个bootstrap的axure原型设计组件。axure是一个原型设计工具，可以有多优秀的组件可以使用，这里推荐下bootstrap组件，目前bootstrap的组件还不是很多，不过，也占据了大部分可以使用的。中午我抽空就用axure做了一个，采用的是bootstrap组件，算是我博客主题升级前的一些准备吧！demo地址：http://dapeng.me/demo/201207/axure-bootstrap/dapeng.me.htmlbootstrap组件下载地址：http://l3.yunpan.cn/lk/08f2nhl0ve
程序猿们都是些机械手，让制造东西很容易，如果需要把东西艺术一下，很太难为程序猿们了！Twitter Bootstrap在很大的程度上面解放了程序猿对页面的制作，前提就是web使用Twitter Bootstrap来制作的。Twitter Bootstrap很推荐每个程序员都来掌握一下，其中难度也没多少，如果说有难度，也就是一点点的E文吧！不过现在这点难度也解决了，已经有朋友将Twitter Bootstrap翻译成中文了，感谢这位朋友啊！Bootstrap 是基于 HTML，CSS，JavaScript 的简洁灵活的流行前端框架及交互组件集，由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap 有非常完备和详尽的使用帮助文档，热心的 @TV来客开发者 翻译成了中文，讨厌英文的朋友有福了。 Bootstrap 的口号是 Designed for everyone, everywhere.（适用于任何场景，适用于每一个人），主要有以下特色：适应各种技术水平 Bootstrap适应不同技术水平的从业者，无论是设计师还是程序员，大牛还是菜鸟。既能用来开发简单的小东西，也能构造复杂的应用。跨设备，跨浏览器 最初设想中的Bootstrap只支持现代浏览器，不过新版本已经能支持所有主流浏览器（甚至包括IE7）。从Bootstrap 2开始，提供对平板和智能手机的支持。12列栅格布局 栅格系统不是万能的，不过在应用的核心层有一个稳定和灵活的栅格系统确实可以让开发变得更简单。可以选用内置的栅格或是自己手写。响应式设计 从Bootstrap 2开始，提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放，从而提供一致性的用户体验。样式化的文档 与其他前端工具箱不同，Bootstrap优先设计了一个样式化的使用指南，不仅用来介绍特性，更用以展示最佳实践，应用以及代码实例。不断完善的库 尽管只有10kb(gzip压缩后)，Bootstrap却仍是最完备的前端工具箱之一，提供了几十个全功能的随时可用的组件。定制的jQuery插件 一个出色的组件设计岂能没有易用易扩展的人机界面？Bootstrap为此提供了定制的jQuery内置插件。用LESS构建 当传统的枯燥CSS写法止步不前时，LESS横空出世了。LESS中使用变量，嵌套，操作，混合编码，让CSS编写更快更灵活。 Twitter Bootstrap 中文帮助文档：http://wrongwaycn.github.com/bootstrap/docs/index.html原文网址：http://www.cnblogs.com/lhb25/archive/2012/07/26/bootstrap-documentation.html
web的调试一直采用的是火狐firebug的调试,现在火狐越来越臃肿.现在在领导的启发下,平常都用chrome dev tools调试的,也是挺方便,转载下chrome的调试技巧做下记录.Google Chrome在招来了FireFox，FireBug的项目组领导人John J. Barton后，Chrome Dev Tools也变的越来越好用，越来越方便了。本文根据Google I/O上对Chrome Dev Tools的介绍(http://www.youtube.com/watch?v=N8SS-rUEZPg),和相关PPT：http://chrome-devtools-io2011.appspot.com/template/index.html 整理而来。(参照的Chrome版本为: 19.0.1084.52)实时****CSS Style编辑选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保存变更历史版本。保存变更历史版本:同时支持可以在Chrome 载入的Css文件正文中自由的修改。 网络交互当一个页面载入时，所有发出的请求可以在“Network”里监听到，同时下面有”All”, “Documents”, ”Stylesheets”, “Images”, “Scripts”, “XHR”(XMLHttpRequst), WebSockets, Other, 这几个分类，可以清晰的把网络请求进行分类，同时可以看到每个请求的详细情况。 控制台在控制台里可以方便的使用命令来查看Dom，执行JavaScript, 等等操作， Console API: http://getfirebug.com/wiki/index.php/Command_Line_API copy(), dir(), inspect(), $0, Script DebuggingScript Debugging 脚本调试功能，这个功能可以说是Chrome Dev Tools里最实用最强大的工具了:1. JavaScript Breakpoints, Break on exception, JavaScript Pretty Print.Break Points:断点在需要设置的地方点一下即可,Break on exception:当此功能开启时，有Script异常出现时,自动会在Exception处断住,方便差错。JavaScript Pretty Print: 当JavaScript被压缩后，非常难阅读，Pretty Print使JavaScript按照语法和关键字重新换行并重排，使得压缩后的JavaScript仍然可以进行阅读。 2. DOM BreakpointsDom元素断点，经常有多处JavaScript操作同一个Dom元素，如果要在JavaScript上下断点，要下好几个地方，不好断到想要的地方，在Dom元素上下断点就方便多了：Break on subtree modifications, Break on attributes modifications, Break on node removal, 可以方便的断到操作Dom的JavaScript。 3. XHR Breakpoints, Event listener breakpoints:XHR Breakpoints,可以方便的断到XMLHttpRequest Ajax请求。Event Listener Breakpoints, 可以方便的断到各种Event。 4. 查找JavaScript使用Ctrl+Shift+F, 打开查找窗口, 查找支持正则表达式：查找函数定义：Ctrl + Shift + o查找文件： Ctrl + o 5. 实时修改 JavaScript代码页面外链JavaScript文件在 Script Panel中可以直接修改，改完后Ctrl + s 保存， 会立即生效，但是不支持 Html 页面中 JavaScript 修改，经过 Pretty print 格式化的JavaScript也不支持实时修改。 6. 自建Script文件在Console(控制台) 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在Script Panel中加入一个新的外链Script文件: filename.js, 这个新文件和其它外链JavaScript 文件一样，可以实时进行修改。 TimelineTimeline功能把浏览器处理Dom的时间轴画了出来，方便进行优化: Remote DebuggingRemote Debugging 使得Chrome成为一个WebServer,执行命令–remote-debugging-port=1337, 同时再开一个Chrome 访问localhost:1337, 就可以用一个Chrome当Host,一个Chrome当Client,在调试一些移动Web的时候非常实用。