大名鼎鼎的caniuse.com相信每个前端同学都不陌生. 这款查询浏览器兼容性的利器, 现在可以在命令行下使用了. 相比每次打开网站查询, 命令行确实方便许多哦.首先,安装 caniuse 命令:npm install -g caniuse-cmd然后在命令行就可以使用 caniuse 这一命令了, 后面跟你要查询的特性就行:附项目的github: https://github.com/sgentle/caniuse-cmd ...继续阅读 (58)

imitator 是一个简单易用的 nodejs 服务器, 主要用于模拟 HTTP 接口数据, 请求代理与转发 。 使用imitator，可以解决前后端分离开发中的痛点之一：数据模拟，也可以作为代理服务器与静态资源服务器使用。github:https://github.com/hanan198501/imitator为什么会有 imitator？最近几个java（前后端都在一个工程里）项目交接过来，没时间重构成fis项目，组里好多前端同学想搞分离开发。 我推荐了 nginx，有童鞋反应配置文件相对前端来说还是不够友好，而且有些个性的接口格式无法满足。 于是写了 imitator，使用 nodejs 并基于 express.js 实现， 配置文件相当简单， 而且易于订制，前端同学使用起来非常顺手。快速上手安装——首先你要先安装 nodejs 和 npm， 然后全局安装imitator。npm install imitator -g编写配置文件——在你的用户目录(比如我的是/User/hanan)下新建一个名为 Imitatorfile.js 的文件（这是 imitator 的默认配置文件）， 内容如下。module.exports = function(imitator) { // 返回一个json imitator('/json', {name: 'hello ...继续阅读 (42)

使用Smarty内置函数{assign}，在模板运行时为模板变量赋值，也可以为数组元素赋值，和在赋值时使用一些表达式。{$var=…}是{assign}函数的简写版。该函数有三个属性(var、value和scope)和一个选项标签(nocache)，其中var和value是必须使用的属性，分别用来设置要分配值的变量名和分配的值。而scope是可选属性，用来指定分配的变量范围，可以指定parent、root和global三个值，用来设定变量的有效范围。{assign}函数使用如下所示：{assign var="name" value="brophp"} {*为变量$name赋值上brophp的值*}{assign "name" "brophp"} {*这是assign函数属性的简写*}{$name="brophp"} {*这是assign函数的简写，也是为变量$name赋值上brophp的值*}在模板中声明的变量和从PHP中分配给模板中给模板的变量具有相同的使用方式。上例是在模板中声明一个$name变量三中书写方式：第一种是Smarty模板中标准函数的方式;第二种是省略属性名称简写的方式;第三种也是一种简写方法，更像是PHP变量的声明。除了上面简单声明一个变量以外，还可以为变量赋一些相对复杂的值，如使用数组和表达式，如下所 ...继续阅读 (43)

JavaScript Battery 接口允许你通过 JavaScript 来获取电池的状态。navigator.getBattery()方法在新的标准里，电池的状态信息是通过navigator.getBattery()方法获取的。 navigator.getBattery()是一个异步方法，会返回一个es6标准的promise对象。 所以我们获取电池状态的回调方法，必须通过该promise对象的then方法来注册：navigator.getBattery().then(function(result){console.log(result);});BatteryManager接口上个例子里的result是一个表示电池状态的对象， 它是由BatteryManager接口实现的，具有如下属性：more{charging:false,// 是否正在充电chargingTime:Infinity,// 剩余多少秒充满电。dischargingTime:8940,// 剩余多少秒放完电level:0.59,// 电量比（当前电量/电池容量）onchargingchange:null,// chargingchange事件的回调函数onchargingtimechange:null,// chargingtimechange事件的回调函数ondischargingtimechange:nul ...继续阅读 (43)

AddJS是一个chrome插件。view ingithub。在浏览网站的时候，常常会想自己写js操作一下页面的内容(比如：抓图片，提取下载链接，屏蔽广告什么的)。于是，就有了这个插件。功能：自动在指定的url的网页中添加自定义的javascript脚本并运行。现在就开始使用AddJS首先从chrome商店安装AddJS：https://chrome.google.com/webstore/detail/addjs/aoahkpekljaimojhfefaiibfdcnmlhdi?hl=zh-CN或者下载安装：http://cssha.com/assets/download/addjs.zip至此，AddJS就可以使用了。下面是一些基本功能的使用操作方法：more添加脚本点击“添加脚本”按钮，输入以下信息，然后保存：url： 一个url地址或正则表达式，当请求的URL与之匹配时，规则生效。（注意:如果是正则，不要填开头的/和结束的/gi，如/.*/gi请写成.*，并勾选后面的reg），script：js脚本的内容， 如果以http://或者file:///开头，则会以此为url加载对应地址的脚本。启动/禁用勾选/取消对应规则前面的勾选框即可。编辑规则鼠标移到响应规则上，点击“编辑”。删除规则鼠标移到响应规则上，点击“删除”。批量导入规则点击“管理规则”按钮进入管理页，点击顶部“导入 ...继续阅读 (37)

昨天同事发了一本pdf格式的电子书，以往的方式，我都是登陆自己的qq邮箱，然后发pdf作为附件，推送到自己的kindle接收邮箱上。 突然觉得，其实nodejs应该有这样的命令行工具，可以一条命令搞定，于是在npm上搜索了一下，果然有一个叫“kindle”的包。 但是安装以后，总是推送失败，大概开了下源码，估计是作者使用的nodemailer组件做了不兼容升级导致。于是，为了以后传文件到kindle时偷个懒，就自己动手写了一个命令行工具，名叫ksend（https://github.com/hanan198501/ksend），简单好用。 O(∩_∩)O~使用指南安装npm install ksend -g设置默认发送邮箱，格式: 邮箱地址:密码ksend --from yourname@qq.com:yourpassword推送，如下示例，推送 a.pdf 至 hanan@kindle.cn 这个kindle接收邮箱：ksend -m hanan@kindle.cn a.pdf以上命令，参数 -m 表示接收邮箱。自此，完成推送。如果脚得每次都要敲 -m 接收邮箱 麻烦，可以设置默认接收邮箱：ksend --to hanan@kindle.cn这样，以后只需要如下命令即可推送：ksend a.pdf也可以同时推送多个文档：ksend a.pdf b.pdf ../img/photo ...继续阅读 (41)

HTML5 的 postMessage 为解决跨域页面通信提供了一套可控的机制， 而 localStorage 则提供了易用简洁的本地存储方案？ 这两者结合起来，能否实现跨域本地存储呢 ？答案是可以的。假设有 a.com 和 b.com 两个页面。我们想通过 a 页面去修改 b 页面的本地数据。 我们需要做如下步奏：在 a 页面创建一个 iframe ，嵌入 b 页面a 页面通过 postMessage 传递指定格式的消息给 b 页面b 页面解析 a 页面传递过来的消息内容，调用localStorage API 操作本地数据b 页面包装 localStorage 的操作结果，并通过 postMessage 传递给 a 页面a 页面解析 b 页面传递回来的消息内容，得到 localStorage 的操作结果整个过程如下图：moreOK，清楚了整个过程，我们就可以封装出相应的组件：CSClient.js 和 csHub.js，来完成这个过程，下面我们来简单实现一下。先来看CSClient.js，作用于 a 页面，用于创建跨域存储实例，它提供了 get、set、del 这三个方法来操作跨域的数据：functionCSClient(url){this.id=this._getId();this._init(url);this._origin=this._getOrigin(url);thi ...继续阅读 (24)

在chrome的安全机制里面，非用户触发的window.open方法，是会被拦截的。举个例子：varbtn=$('#btn');btn.click(function(){//不会被拦截window.open('http://cssha.com')});上面的代码中，window.open是用户触发的时候，是不会被拦截的，可以正常打开新窗口。再看下面这个：varbtn=$('#btn');btn.click(function(){$.ajax({url:'ooxx',success:function(url){//会被拦截window.open(url);}})});上面的代码中，用户没有直接出发window.open，而是发出一个ajax请求，window.open方法被放在了ajax的回调函数里，这样的情况是会被拦截的。那么，当用户点击按钮，发出ajax请求，如何在ajax请求完成后再打开新窗口，又不被拦截呢？ 接着往下看：varbtn=$('#btn');btn.click(function(){//打开一个不被拦截的新窗口varnewWindow=window.open();$.ajax({url:'ooxx',success:function(url){//修改新窗口的urlnewWindow.location.href=url;}})});上面的代码中，用户安点击按钮的时 ...继续阅读 (42)

Promise最先是CommonJS工作组提出的一种规范之一，目的是为了解决js异步编程过程中，回调嵌套过深的问题。ECMAScript 6 规范化了Promise对象的语言接口，使其成了js的原生对象之一。如果你还不了解ECMAScript 6 中的Promise对象，建议阅读http://es6.ruanyifeng.com/#docs/promise。ECMAScript 6 中的Promise对象与一些常用的promise库（如jquery，when.js）中的实现略有不同，本文讨论的实现，以ECMAScript 6 为准。 下面，我们来一起学习，如何在不支持ES6的浏览器上简单实现Promise，如有不对的地方，还请多多指正。首先，我们来看看Promise构造函数。varPromise=function(fun){varme=this,resolve=function(val){me.resolve(val);},reject=function(val){me.reject(val);}me._st='pending';me._rsq=null;me._rjq=null;(typeoffun==='function')&&fun;(resolve,reject);},fn=Promise.prototype;构造函数接受一个异步的回调函数，并调用，回调函数的2个参数，分别 ...继续阅读 (29)

由于Wordpress主机到期，而且wp的markdown插件非常坑爹，经常把本来些的好好的md格式转得乱七八糟。于是花了一天时间，把Blog搬到github来了。使用了Jekyll Bootstrap框架，下面是折腾过程中的一些体会：文章迁移： wp后台把数据导出为xml文件，再用exitwp转成md。评论迁移： Jekyll自带的disqus不太符合国情， 于是选择了国产的多说。代码高亮： 使用Pygments。文章摘要： Jekyll自带的显示摘要功能对HTML支持非常不好，我只好全文输出到一个script标签，再通过JS来截取并显示。搜索文章： 尝试了google站内搜索，但是发现好多冗余的页面也被搜出来了，最后决定自己用JS来实现一个简单的，只针对文章标题进行匹配的搜索功能。迁移到Jekyll以后， 终于可以愉快地用md写blog了。 ...继续阅读 (28)

支持AngularJS智能提示AngularJS指令（包括自定义指令），controller 和 application names以及花括号里边的数据绑定。more支持 Spy-js通过Spy-js你可以看到触发代码执行的事件的完整列表，然后帮你整理堆栈跟踪事件，并在源代码中突出显示。支持多个插入和选择支持多个位置插入和选择。内置Grunt控制台通过Grunt控制台可以列出并定义grunt任务的完整列表， 双击可执行。集成Bower借助集成的Bower包管理器，你就可以更方便在项目中跟搜索，安装和管理客户端库和框架。支持JavaScript模块化完善了对RequireJS和AMD的支持程度，基于requirejs.config实现了源码导航功能。并改善了对Harmony module loader的支持。Live Console在控制台中的JavaScript和Node.js的调试工具窗口现在可以作为一个shell提示符，并允许您执行命令和JavaScript代码。支持CucumberJSWebStorm现在了解CucumberJS的语法，可以帮助您生成代码步骤定义。您可以在一个单一的点击开始测试，看到一个不错的结构化格式的测试结果，并轻松导航到测试源。下载Webstormhttp://www.jetbrains.com/webstorm ...继续阅读 (41)

view on Github：https://github.com/hanan198501/grunt-cptplgrunt-cptpl插件可以将您的文本模板文件编译成javascript文件。在前端开发的时候，模板文本我们一般存放在一个隐藏dom节点，再通过javascript去获取这个节点的内容，将其编译。或者在写javascript的时候，我们手动通过拼接字符串的方式储存模板文本。grunt-cptpl使前端开发也可以像后端一样，把模板文本存放在单独的文件中，使我们的开发工作从繁琐的dom操作和拼串中解放出来，提高我们的开发效率。最主要的，模板文件作为单独文件存放，可以使我们的项目代码逻辑更加清晰，更具可维护性。grunt-cptpl都做了啥？grunt-cptpl会读取每个模板文件的文本内容，用指定模板引擎的预编译方法将其包裹起来，生成一个新的javascript文件。这个javascript文件文件里面的内容，其实就是模板引擎的预编译方法调用，传入的参数为模板文件的文本内容。这样我们就有了一个编译好的模板函数，要渲染的时候把数据传给它就好了。more入门这个插件需要Grunt~0.4.4如果你还没有使用过Grunt, 务必阅读一下它的入门指南, 里面介绍了如何创建一个Grunt配置文件以及如何安装和使用grunt插件。一旦你熟悉这个过程，你可以使用如下命令安装grunt- ...继续阅读 (42)

我们在写一个popup组件时候，通常会加上一个元素作为mask层，用于遮盖住popup元素以外的页面内容。 而IE6下有个著名的bug就是select元素无法被遮盖，通常的做法，在IE6我们会在mask和和popup里面添加一个iframe来解决，一般的，iframe的css会是这样：#iframe{display:block;width:100%;height:100%;_filter:Alpha(opacity=0);position:absolute;top:0px;left:0px;z-index:-1;}如果popup组件需要一个功能是：点击mask的时候，隐藏popup。 所以，我们会给mask加上click事件来完成这件事。但是，这个办法在IE6下却行不通，不管吧click添加在mask元素，还是添加到mask的iframe里面的document对象，都无法出发click事件。由于mask只有一个iframe，而iframe里面又没有然后内容，在IE下其实我们点击mask的时候是相当于点击了mask的iframe的window里。解决的办法是在mask里面再添加一个可以被“点击”到的元素，这个元素撑满mask。这样鼠标点击这个元素时候，事件自然会冒泡的mask上，保证了在IE6下mask的click也能正常被触发。id="mask">style="height: 10 ...继续阅读 (28)

最近开始折腾一些CSS3的东西，发现以前走马观花看过的CSS 3D相关的属性几乎忘记的差不多了，今天就来通过一个小立方体的效果来温习下：首先，我们来实现HTML布局，用一个div#arana作为“展台元素”，存放整个立方体容器div#box，div#box里面有6个子节点div.face，代表这个立方体的6个面。id="arena">id="box">class="face">1class="face">2class="face">3class="face">4class="face">5class="face">6最外层的div#arena的作用类似于一个“展台”，我们可以想象，在“展台”上，我们需要拜访一台摄像机，来拍摄这个立方体。那么，这个摄像机，我们称之为“视点”，视点和立方体的距离，就是div#arana的-webkit-perspective属性值， 它和我们在画画的时候“透视点”的概念有点像，只不过，“透视点”在屏幕的后方，而“视点”在屏幕的前方。在立方体旋转，偏移的时候，我们还需要知道一个“基点”，3D变换的元素， 都会基于这个点来变化，“基点”通过-webkit-perspective-origin属性来定义，的默认值是50% 50%，分别代表“基点”距离元素本身左边和顶部的距离。#arena{-webkit-perspective:400;-webkit-per ...继续阅读 (37)

python的开发工具pycharm每次打开都要在终端下执行sh文件，非常蛋疼，于是我想把它锁定到启动器。但是，在终端下打开的pycharm锁定到启动器以后，如果关闭了，下次点击启动器里的图标，还是无法打开。Google了一下，原来需要创建一个启动器图标程序才行，ubuntu的启动器程序都是放在/usr/share/applications文件夹下的文件， 那我们就在这个文件夹下面创建一个pycharm.desktop，内容如下：[Desktop Entry] Version=1.0 Type=Application Name=pycharm Icon=/usr/local/pycharm/pycharm-3.1.1/bin/pycharm.png Exec="/usr/local/pycharm/pycharm-3.1.1/bin/pycharm.sh" %f Comment=Develop with pleasure! Categories=Development;IDE; Terminal=false StartupWMClass=jetbrains-pycharm然后双击打开，再锁定到启动器就好了。 ...继续阅读 (33)

前端开发过程中，经常会有需要对远程环境调试的需求。比如，修改线上bug，开发环境不在本地等等。我们需要把远程css文件或者js映射到本地的文件上，通过修改本地文件进行调试和开发。通常我们可以通过以下方法来实现映射：1.修改host文件——只能把域名映射到IP2.使用Apache或者nginx搭建反向代理——需要装环境，配置相对繁琐3.使用Fiddler中的AutoRespnose功能——不支持目录映射，mac、linux无法使用以上方式，或者功能缺失，或者需要额外安装软件，或者配置繁琐、或者不支持多平台。我理想中的请求映射工具应该是这样的：简单，打开浏览器就能用、支持目录映射和文件映射、跨平台。ReRes就是居于这个目标写出来的，您可以把请求映射到其他的url，也可以映射到你本机的文件或者目录。ReRes支持单个url映射，也支持目录映射。现在就开始使用ReResmore首先从chrome商店安装ReRes：https://chrome.google.com/webstore/detail/reres/gieocpkbblidnocefjakldecahgeeica?hl=zh-CN≷=CN安装后，在地址栏输入chrome://extensions/进入扩展页，找到ReRes，勾选“允许访问文件网址”，这样才能让ReRes支持本地映射，如下：至此，ReRes就可以使用了。下面 ...继续阅读 (35)

WEB标准提倡结构、表现和行为相 分离，现在越来越多采用这种表现和行为的方式，但它也为我们开发调试带来一些问题，网页载入一堆JavaScript，，我们很难搞清楚最后在哪些元素的哪个动作绑定了事件，尤其是JavaScript加载事件的方式五花八门，可以透过jQuery、element.click = function() { }、element.addEventListener()…，很难由单一处找出所有事件。而理不清事件来龙去脉，要追踪某个点击动作背后的行为就变得有些困难，直到我们遇到以下两种利器。chrome开发者工具有查看HTML元素绑定事件的功能，如下图所示：但这种方式查看事件的方法还是有点困难，直到遇到它chrome的插件Chrome Web Store - Visual EventVisual Event的运作原理，在于其熟知主要JavaScript库(例如: jQuery、YUI、ExtJS)事件机制，可深入其中撷取事件，并将其标注在对象元素上。目前支持的JS库包括:DOM 0 events jQuery 1.2+ YUI 2 MooTools 1.2+ Prototype 1.6+ Glow在启用Visual Event后，有绑定事件元素将被标上蓝色区块，滑鼠停留时会显示事件的细节。如下图所示：more原文地址：http://www.cnblogs.com/xiao ...继续阅读 (30)

Stave是一个基于Fiddler调试工具的插件，Fiddler在前端开发中应用得越来越广泛。其中的AutoResponder——用本地文件映射网络文件是大家最喜欢用的功能，这对调试线上代码、处理线上bug都十分有用。不过，AutoResponder只能针对单个文件做映射， 在文件数目较多的时候，使用起来不是很方便，以前，我只能在本地搭一个nginx做反向代理来实现，有了Stave， 就完全可以抛弃nginx了，Stave最大亮点在于能够实现针对路径映射， 这样在多文件调试的时候赶脚非常不错。下载地址：https://code.google.com/p/stave/ ...继续阅读 (33)

箭头函数是ECMAScript6中最有趣的部分之一。正如其名字所暗示的一样，它是一种用新的语法，一个“箭头”（=>）来定义的函数。然而，相对于传统的函数，箭头函数在一些重要的用途中会有一些不同的表现： 1.语法绑定this——箭头函数中的this的值，在函数定义的时候就绑定了，而不是根据函数执行时机来绑定； 2.不能new——箭头函数不能被当做构造函数来用，当通过new来调用时，会报错； 3.this不能被修改——在箭头函数的整个生命周期内，this始终保持同一个值，无法被修改； 4.没有arguments对象——在箭头函数内部，不能通过arguments来访问参数，你必须使用已命名的参数，或其他ES6功能。存在这些差是有一些原因的：首先，this的绑定是JavaScript中一种常见的错误来源，在函数内部，很容易把this的指向弄混淆，从而导致意想不到的后果。其次，箭头函数通过限制this为一个固定值来执行，JavaScript引擎可以更容易地优化这些操作（而不是传统的函数，它可能被用来作为一个构造器或以其他地方）more语法箭头函数的语法取决于你所要完成的功能，但结构大致为：【参数体 => 函数体】。 首先是箭头函数要接受的参数，紧接着是一个箭头=>，然后是函数体。参数体和函数体可以有多种形式，这个要根据使用情况而定。例如，下面的箭头函数接受一个参数，并将其返回。varrefl ...继续阅读 (39)

公司的项目从svn迁移到git了， 只是一份简易的使用指南和笔记，不是很高深。下载与安装OSX版：https://code.google.com/p/git-osx-installer/downloads/list?can=3 LINUX版：http://git-scm.com/book/en/Getting-Started-Installing-Git WINDOWS版：https://code.google.com/p/msysgit/downloads/list?can=3创建新仓库创建新文件夹，打开，然后执行git init克隆仓库克隆本地仓库git clone /path/to/repository克隆远程仓库git clone username@host:/path/to/repository工作流本地仓库由 git 维护的三棵“树”组成。第一个是工作目录，它持有实际文件；第二个是缓存区（Index），它像个缓存区域，临时保存改动；最后是HEAD，指向最近一次提交后的结果。添加与提交把计划要改动的文件添加到缓存区，这样git就会跟踪改动git add filename使用如下命令提交改动git commit -m "提交的信息"现在，改动已经提交到了HEAD，但是还没有到达远程仓库。推送至远程仓库把本地仓库的改动推送至远程仓库git push origin如果还没有克隆 ...继续阅读 (29)

公司某项目前端模板用的是Mustache.js！！！ 然后偶遇到个需求是需要渲染数组的时候输出其元素的索引值，比如以下数据：var data = { title: 'Mustache.js模板引擎无法获得数组内元素索引的解决办法', authors: [ { id: 20000, name: '阿安' }, { id: 20001, name: '阿狗' } ] }在渲染'authors'节点时候，我们根据Mustache.js语法这么写：authors id: authors name:这样却没有办法输出数组authors里面的元素的索引，只能输出里面元素的属性值，由于短期内更换一个模板引擎对于项目来说不太现实，只能采取其他办法。那就是对authors数组进行处理，给里面的每个元素增加一个index属性，其值就是元素自身的索引。for(var i = 0, len = data.authors.length; i < len; i++){ data.authors[i].index = i; }最后再渲染的时候输出就可以了。authors id: authors name: authors index: ...继续阅读 (42)

是不是觉得chrome的开发者工具样式不够炫呢？ 其实，这个样式是可以定制的（如上图），我们可以通过修改一个css文件来个性化我们的chrome开发者工具，这个css文件名为Custom.css，在不同的系统里它存放的位置如下：Mac:~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.cssUbuntu (Chromium):~/.config/chromium/Default/User\ StyleSheets/Custom.cssPC:%APPDATA%\..\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.cssPC (Windows XP):C:\Documents and Settings\YourUsername\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css当然，知道了自定义样式的css文件是哪个，我们可能不想自己去写，有没有现成的样式可用呢？ 当然！下面这个网站提供了一些常用的开发工具主题，包括sublime text2、vim、chrome devel ...继续阅读 (32)

1. MasonryMasonry是一个网格布局的JavaScript库。它可以是对页面元素进行重新布局，以填充页面中的空白位置，通过Masonry，我们也实现多种流行的页面布局，例如瀑布流、 metro等效果。 url : http://masonry.desandro.com/more2. JWplayerJWplayer是一个视频播放器，支持HTML5和FLASH，能够针对浏览器自动识别是否采用HTL5或FLASH，并提供了完善的javascript API，开发者可以对视频播放进行个性化和精准的控制。 url : http://www.longtailvideo.com/jw-player/3. SoundManagerSoundManager为开发者提供了一整靠JavaScript音频管理方案，通过它开发者可以控制Web上音频的播放，它包装了Flash和HTML5的API，通过JavaScript来实现了媒体的管理。 url : http://www.schillmania.com/projects/soundmanager2/4. KindEditorKindEditor是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发者可以用KindEditor把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 url : http ...继续阅读 (36)

活动主办：HTML5梦工场活动官网：2013.html5dw.com协办方：W3Ctech Nodejs社区 w3cplus独家战略合作社区：InfoQ官方战略合作伙伴：GoogleWeb应用程序和移动互联网是大势所趋，不管HTML5是遥不可及的幻想，还是眼下移动互联网的救命稻草？整个行业不都需要我们共同坚守，才有机会迎接和拥抱属于我们自己的未来吗？！让我们一起坚守，共谱新篇章！ ...继续阅读 (47)

photoshop中的图层混合功能大家一定很熟悉。此功能可以根据指定模式，将2个图层进行混合，实现不同色彩风格的图像效果，也就是我们通常所说的溶图。 实现图像混合的原理其实很简单，就是将两张图像的重叠，分别取相同位置的两个像素点上的RGB值，通过特定的公式计算出新的RGB值，这样，不公的公式，将产生不同的色彩效果。利用canvas提供的api，我们可以在支持canvas的浏览器上实现图像混合，例如，以下代码将实现上图“变暗”的效果：//传入2个canvasfunctionblend(cv1,cv2){varc2d1=cv1.getContext('2d');varc2d2=cv2.getContext('2d');varimgData1=c2d1.getImageData(0,0,cv1.width,cv1.height);vardata1=imgData1.data;vardata2=c2d2.getImageData(0,0,cv2.width,cv2.height).data;//计算函数，传入2个RGB对象进行计算vardarken=function(a,b){varr={};for(variina){r[i]=a[i]< b[i] ? a[i] : b[i]，这个公式很简单，就是比较2个值得大小。more除此之外，还有其他效果的算法可以供我们使用：排除a[i] + b[i ...继续阅读 (38)

1911年10 月，两支探险队作好了出发前的最后准备，他们都希望自己能够成为现代历史上最先抵达南极的人。结果是一支队伍夺得胜利，并最终安全返回。而另一支队伍却遭受了一场毁灭性的失败，因为到达南极时，他们发现他们的对手早在34 天前就已经把旗帜插在了那里，而接下来，他们与死神展开了一场生死搏斗，结果以失败告终，凛冽的严冬最终将他们吞噬——这支南极探险队中的5 名成员全部命丧他乡。据部分成员最后写的日志以及他们给家中至亲的留言，这次探险让他们遭受了难以置信的磨难和无法忍受的冻伤，直至全部被冻死。这两支探险队的实力可谓旗鼓相当。两名领队分别是39 岁的罗尔德· 阿蒙森和43 岁的罗伯特· 法尔肯· 斯科特。他们年龄相仿且有着相似的经验，但最终的结果却是前者获胜，后者失败。阿蒙森曾带队成功穿越西北航道，并参加过南极洲首次越冬探险；斯科特曾在1902 年率队南极探险，并最终抵达南纬82 度。阿蒙森和斯科特率队出征南极的时间相差无几——前后不过几天，他们都将面临超过1 400 英里 的往返行程（大致相当于从纽约市到芝加哥的往返路程），然后进入一个不确定的、极端恶劣的环境中，而那里的温度即便是在夏天也经常会达到零下20 摄氏度，且经常伴随着强气流。需要注意的是，那是1911 年，他们没有与探险营地保持联系的现代化通信工具，没有无线电、手机，也没有卫星电话，而一旦在南极被困，那么要想拯救他们是根本 ...继续阅读 (18)

在上篇文章http://www.cssha.com/img2txt-canvas,主要介绍了如何将一张图片转成字符画的办法，经过同事吕哥和文韬的提醒和修改。在此基础上，可以实现视频转字符动画的效果哦。原理都是通过getContext('2d')对象的drawImage方法引入视频或图像到canvas中，再进行转换，转换方法上篇已经介绍，不通的是视频的话要通过回调函数，不停回调转换函数，实现动画功能：demo：http://www.cssha.com/img2txt/video2txt.htmlhttp://www.jsbug.com/lab/samples/ascii-video/ ...继续阅读 (22)

more字符画大家一定非常熟悉了，那么如何把一张现有的图片转成字符画呢？HTML5让这个可能变成了现实，通过canvas，可以很轻松实现这个功能。其实原理很简单：扫描图片相应位置的像素点，再计算出其灰度值，根据灰度值的大小，分别用字符#*+“和空格来填充。下面是源码：HTML：一个canvas元素#cv，一个字符画容器#txt 。fuck iecss：由于每一行用p来填充，所以p的height和font-size大小应该一致都是12px，这样可以避免每行出现空隙。*{margin:0;padding:0;}body{font-size:12px;margin:10px;font-family:simsun;background:#fff;}p{height:12px;}p.ts{margin:10px000;width:500px;float:left;}span{width:12px;}#cv,#txt{float:left;}#cv{margin-right:5px;}javascript：请看注释和下面的解释。varcv=document.getElementById('cv');varc=cv.getContext('2d');vartxtDiv=document.getElementById('txt');varfileBtn=document.getElementByI ...继续阅读 (40)

虽然平时写代码的时候都是用Intellij IDEA，但也偶尔通过ssh+vim远程修改文件，特此记录，以备时需。标签命令:tabe fn 在一个新的标签页中编辑文件fn gt 切换到下一个标签页 gT 切换到上一个标签页 :tabr 切换到第一个标签页 :tabl 切换到最后一个标签页 :tabm [N] 把当前tab移动到第N个tab之后窗口命令ctrl+w s 水平分割窗口 ctrl+w w 切换窗口 ctrl+w q 退出当前窗口(由于同时有多个文件，此命令不会影响其他窗口) ctrl+w v 垂直分割窗口 :sp fn 分割窗口，并将fn加载到新的窗口中more其他vim在保存之前不会对文件做实际的修改，只是加载到缓冲区中，对文件的编辑其实是对缓冲区的编辑，直到:w时才会存入物理文件。:e file 把file加载到新的缓冲区中 :bn 跳转到下一个缓冲区 :bd 删除缓冲区(关闭文件) :sp fn 分割窗口，并将fn加载到新的窗口中退出编辑器:w 将缓冲区写入文件，即保存修改 :wq 保存修改并退出 :x 保存修改并退出 :q ...继续阅读 (30)

Ant最初是为Java量身定做的工程构建工具，但因为其简单的XML语法和内置的任务，作为前端领域的构建工具也不失为一个明智的选择。关于Ant与前端，明河的教程有更详细的介绍：http://book.36ria.com/ant/index.html，对于Ant的常规使用方法，新手请直接学习明河的教程。下面来说说Intellij IDEA，它内置了Ant，如果你不喜欢命令行，那么在Intellij IDEA中使用Ant是非常方便的，本文主要介绍windows下在Intellij IDEA中使用Ant进行前端构建的方法，如果你使用其他操作系统，也可以参考。1、首先，确保你的系统已经安装了Java运行环境，如果你的机子已经安装jdk，那么请跳过这一步，如果没有，请移步至http://willerce.com/post/jdk。参照此教程安装好jdk。2、配置project structure。点击File>Project Structure(快捷键ctrl+alt+shift+s)，在Project SDK这一项中，如果显示的是“No SDK”，说明还木有设置运行环境，我们点击New，选择你的jdk安装目录，比如我的是C:\Program Files (x86)\Java\jdk1.6.0_10。设置好以后，会显示jdk的版本信息，如下图。more3、在你需要的地方写好build.xml配 ...继续阅读 (41)