摘要：
今天开始会和大熊君{{bb}}一起着手翻译node的系列外文书籍，大熊负责翻译《Node.js IN ACTION》一书，而我暂时负责翻译这本《Hands-on Node.js》（下载），为方便理解不采用直译的方式，若有翻译不当的地方还请不吝赐教，我会及时堪正。引言在09年欧洲JSConf大会上，一... 阅读全文
摘要：
现在是刚到深圳工作快满2个月的情况，只身一人，跨年于我没有太大意义。只是站在14年的尾巴上，总会让人油然回首，回顾这一年的纠纷、起落和得失。年初是下岗了，上下文环境是“粤东房产老板行贿被捕，XX进行大裁员”。老板被捕的时候是连腾讯都在右下角出新闻框报道的，接着是各种民工到工地或公司闹事、高层出走和内... 阅读全文
摘要：
记得面试现在这份工作的时候，一位领导语重心长地谈道——当今的世界是互联网的世界，IT企业之间的竞争是很激烈的，如果一个网页的加载和显示速度，相比别人的站点页面有那么0.1秒的提升，那也是很大的一个成就。然后我不知道怎么写下去了，就在群里问了那群狗头军师，结果是这样的。。。好的，是时候“语锋一转”切回... 阅读全文
摘要：
这是本系列的最后一篇入门文章，主要是对剩余的未说明的canvas方法来逐个介绍。首先，如果你是一名擅长矢量设计的设计师，对Illustrator或者Fireworks很熟悉的话，那你肯定知道它们有一个很强大的矢量混合处理功能，可以对多个矢量路径进行“合并”、“拆分”、“结合”、“相交”等系列操作。 ... 阅读全文
摘要：
相信进来的时候你已经看到alert弹窗，显示的是你cookie信息（为配合博客园要求已删除）。单纯地在你的客户端弹出信息只是类似于迫使你在自己的房间脱衣服——没人看得到，自然也不算啥恶意行为。那么如果我把你的信息通过脚本发送到我的服务器保存起来呢？先放心，我不打算这么做，也没那笔闲钱去购置一个服务器... 阅读全文
摘要：
也算是用了半年Grunt，几个月前也写过一篇它的入门文章（点此查看），不得不说它是前端项目的一个得力助手。不过技术工具跟语言一样日新月异，总会有更好用的新的东西把旧的拍死在沙滩上（当然Grunt肯定没死，gulp也不是多新颖的东西）。看标题很明显知道相比Grunt，我会更为推崇gulp，不是说Gru... 阅读全文
摘要：
本章开始搭配requireJS来使用avalon，开始之前，我们可以对avalon进行精简改造（注：新版的avalon已提供了shim版本，无需再做如下的精简了，直接点这里获取）。avalon源码里有自己的AMD加载器和DOMReady模块，使用requireJS来加载各依赖脚本的话，使用其配套插件... 阅读全文
摘要：
三个月前曾写过一篇跨终端响应式页面设计入门的博客，上了博客园头条也得到了不少关注，今天想在这篇博客的基础上，继续写一篇进阶的文章。补充基于“入门”一文，我想再补充几个基础知识点，主要都是针对iOS的meta标签：⑴允许全屏浏览页面的标签：⑵ safari顶端状态栏样式定义/隐藏： ⑶ios会把... 阅读全文
摘要：
avalonJS是司徒正美开发和维护的前端mvvm框架，可以轻松实现数据的隔离和双向绑定，相比angularJS等前端框架它有如下优势：1.压缩后仅有60多kb，而angular的min版是100多kb；2.兼容IE6+，符合天朝市场需求；3.效率更高，跑起来比angular和knockout都要更... 阅读全文
摘要：
现在就职于一家P2P平台，自然也会关注同行其它网站的前端技术，今天要仿造的是礼德内页的一个图片查看器效果。不过说白了，无论人人贷也好礼德财富也好，很多地方的前端都做的不尽如人意，比如忽略细节、缺乏交互、滥用插件，像今天要仿造的图片查看器，礼德财富也是直接套用的一款叫fancybox的插件：个人觉得一... 阅读全文
摘要：
在WS中使用工具栏上的快捷图标来配合工作可以有效提高效率，因为你不用去记住一些快捷键，只要点一下鼠标即可。不过在WS中有很多实用功能却是没有自带个性图标的，导致自定义工具栏后可能就是好几个一模一样的绿色图标并排在一起，区分不出哪个是哪个，用起来也麻烦。这里会提供自定义WS工具栏的方法，以及提供一些常... 阅读全文
摘要：
中午看《众妙之门》看到一个响应式图片处理工具（点此查看）的介绍，然后就心血来潮想着不妨自己写一个基于JQ的吧，于是就又有了这么一个干货给大家。smartImg的全部文件可以从我的Github上下载，其实它非常小巧，去掉注释一共也就40行，之所以这么轻便，JQ也是帮了大忙。应用场景我们在搭建响应式页面... 阅读全文
摘要：
差不多是从七月开始有空就写一写，写到现在也算是可以拿出来展示了，vajoyJS是一款可以提供多项建站常用UI功能的插件库，让你轻松创建简易幻灯片、模态窗口和单屏滚页等效果。vajoyJS依赖于 jQuery 和 base.css，可以在Github（欢迎各种star或fork）下载最新版本，内有各种... 阅读全文
摘要：
已经第六章了，也差不多接近尾声，如果你从第一章耐心follow到本章结束，那你便能掌握canvas的大部分知识点（当然如果要精通，还是得多靠练习，做一些小案例）。今天我们要学习的是canvas的变形转换方法。缩放方法scale()在canvas中，如果我们需要缩放当前绘图对象，可以利用 scale(... 阅读全文
摘要：
今天要介绍的是canvas对图形对象的操作，包括图像、视频绘制，和操作像素对象的方法。图片/视频的绘制在canvas中，我们可以通过drawImage() 的方法来绘制图片或视频文件，其语法为：ctx.drawImage( img, clip_x,clip_y,clip_w,clip_h, x, y... 阅读全文
摘要：
不得不佩服京东的速度，昨天刚下单的两本书今天上午就到了。其中一本是全彩页的《众妙之门 - 精通CSS3》，细看了前几十页，书上的叙述方式给我的印象其实不如“彩页”来的讨喜——接连说上几个例子，扔个例子的链接（没源码下载，要自己手动输入，而且近乎所有的例子页面均已失效），未经细剖便草草了事，感觉倒是适... 阅读全文
摘要：
前几章我们学习了矩形、多边形、圆形、曲线等图形的绘制，今天来学习下更简单一些的文本绘制及其各种功能方法。在canvas中我们可以通过strokeText() 和 fillText() 来绘制描边文本或者实心文本：您的浏览器不支持canvas，建议使用最新版的ChromestrokeText() 和 ... 阅读全文
摘要：
较新版本的sass(3.3+)支持source-map功能，可以配合谷歌浏览器或者livestyle来映射查找对应的样式。要生成source-map可以在grunt中使用grunt-contrib-sass 插件，只要不在options中配置ourcemap:'none' 便默认在编译sass时自动... 阅读全文
摘要：
今天的项目需要做到一个介绍页面，我主动提出走单屏滚页的风格，毕竟交互性好，逼格也高，具体效果可以参照百度知道书籍预售页面。其实现效果就大概是这样的：还是老样子，所有步骤文件可以从我的Github上下载。原理滚页的方式肯定是通过animate来实现，由被点击的a标签索引来确定要从哪一页滚至哪一页的位置... 阅读全文
摘要：
在不久前我曾写了一篇 应用r.js来优化你的前端的文章，为大家介绍了r.js这个实用工具，它可以很好地压缩、合并前端文件并打包整个项目。但是如果将r.js放到项目中，我们不得不顾及到一个问题——项目每维护一次，就需要维护的人员输入一次rjs运行口令重新打包项目，自然是非常繁琐的事情。另外如果我们的项... 阅读全文
摘要：
最近工作真心忙碌，几乎没时间写博客。今天趁周末来仿一个QQ头像裁剪功能插件。效果如下：所有文件都可在我的Github上下载，从头到尾从简到繁按步骤一共分了9个HTML文件，每个步骤文件里的注释都写的很清楚，故在本博客内不赘述。原理：主要是通过css的clip来裁剪图片可视区域，拖动剪裁窗口这里使用了... 阅读全文
摘要：
之前公司的一个项目使用SVN来做的版本控制，服务器设在我这台电脑上。然后是出于某些原因，我的电脑IP变了多次，每变一次就要重新绑定静态ip，甚是烦人。同时SVN这种集中式的版本控制服务在我关闭了我的电脑之后，其他小伙伴们就无法同步了。于是乎也懒得去研究SVN是否支持远程云仓库的方式来共享项目，转投最... 阅读全文
摘要：
前两章我们掌握了线段、矩形和多边形的绘制方法，今天我们主要是学习如何绘制圆弧和贝塞尔曲线。圆弧的绘制圆弧可以理解为一个圆上的某部分线段，在canvas中，绘制一条圆弧的语法如下：ctx.arc( 圆心x坐标, 圆心y坐标, 圆的半径r , 开始角度, 结束角度 );其中的 “开始角度” 和 “结束角... 阅读全文
摘要：
r.js是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，在requireJS异步按需加载的基础上进一步提供前端优化，减小前端文件大小、减少对服务器的文件请求。要使用r.js需下载r.js文件（点我下载），将其放到你的项目根目录；还需要安装nodeJS（点我下载），... 阅读全文
摘要：
上篇文章我们了解了canvas的定义、获取和基础的绘图操作，其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。今天我们来讲讲矩形（Rectangle）和多边形的绘制。矩形的绘制一共有两个口令，分别是 ctx.fillRect(x, y, width, height) 和 ctx.stroke... 阅读全文