Generators 与 Koa.js(1)

Koa.js是下一代的node.js框架,由Express团队开发,通过生成器(generators JavaScript 1.7新引入的,用于解决回调嵌套的方案),减少异步回调,提高代码的可读性和可维护性,同时改进了错误处理(Express的错误处理方式相当糟糕)。 Koa非常小,只有550的代码(ps:这个数字不准,只要知道Koa很精巧即可),但依旧提供了web应用常用的一整套方法,同时拥有强悍的拓展性。 (PS:阿里几个前端团队已经在做基于Koa的上层应用框架,虽然目前Express仍然是主流,相信Koa才是未来。) Installing Node 由于使用了JavaScript 1.7…..

Redis+NodeJs实战—kissy gallery的重构(1)

屏幕快照 2014-07-18 下午7.38.21

kissy gallery是kissy组件库集合网站,用于展示kissy的组件信息和文档,采用NodeJs开发,第一个版本发布后,每周挂掉3次 -_-! ,原因是那时候图简单,使用文件存储组件数据(是个json文件),在写操作时没有做队列处理,造成竞态写数据,很容易导致读取文件时出现读取json出错。 饱受摧残后下定决心使用数据库,数据库的选择很多,比如广受NodeJs开发者喜欢的mongodb,简单趁手,就像右手,但我选择了 Redis,原因是右手用多了,其实左手也不错 -_-! 。 为什么选择 Redis 1.快,变态快 Redis是内存数据库,所有的数据都存储在内存中,很多系统将Redi…..

一些精巧的HOVER效果

本文介绍通过应用CSS的一些新特性,如3D变换和伪元素来创造一些精巧的hover效果。 现在很常看到好的设计有着优美的线条、留白,简洁的布局和精妙的效果。这里来分享如何创建这些巧妙的hover效果。 这里的hover效果应用3D转换和伪元素。 注意:这些新特性需要浏览器支持,你懂得……字体变形在firefox上不是很流畅。 demo图片来至Unsplash, 所用的icon来至Feather icon set作者 Cole Bemis 结构如下: <figure class=”effect-lily”> <figcaption> Nice Lily Lily likes to pl…..

淘宝首页A/B测试实践

记得一二年前A/B测试概念讨论地挺火,价值也得到业务方的认可,可惜目前实践A/B测试的业务依旧很少,究其原因是A/B测试增加了额外的资源成本,另外一方面大部分的产品还是产品经理或运营驱动,这二个角色对A/B测试的认可度还不够高。 淘宝首页能够不断实践A/B测试,跟业务独特属性有关,淘宝首页承担着业务分流的作用(我戏称它为网址导航),淘宝首页每天的PV1.2亿,任何细微地改动都会对业务和用户体验造成重大影响(比如,司法拍卖移动到一级导航位置,流量不可同日而语),所以我们每次的调整都很慎重,希望通过A/B版本数据的对比,找到更好的方案,这是A/B测试得以执行的土壤基础。 淘宝首页是没有产品经理和运…..

compass实战—retina sprite

明河讲解了compass的sprite工具的使用,但还没有完,随着retina屏幕的盛行,我们做的sprite必须做下适配,不然在retina屏幕下图片会发虚发糊。这篇教程将围绕 retina 适配展开。 什么是retina? 推荐一篇很好的科普文:《走向视网膜(Retina)的Web时代》,这里不再花大量篇幅说明。 我们的sprite雪碧图,为了适配 retina 需要做些什么呢? 生成一张二倍大小的sprite雪碧图 编写适配css,当时retina屏幕时使用x2的sprite图片 这二件事看似简单,却又不少门道在里面。 推荐二篇文章:《Sass Mixins——支持Retina的Icon…..

compass实战—sprite

做sprite(雪碧图)是对于前端来说一件痛苦耗时的事,比如2014版淘宝首页做的sprite:http://gtms03.alicdn.com/tps/i3/T1wTwXFQFXXXcLNDLI-400-500.png,切这样规整的图(定位时保证偏移都是整数…),我的leader遇春大概花了大半天时间。也许亲会说,傻X,为什么不用compass的sprite工具。实际上项目初始我们是是使用compass的sprite,不过在做retina X2时遇到麻烦,容后再禀。 如何使用compass快速生成sprite compass官网上有篇简单的教程可以看下,腾讯的同学也写了个视频教程…..

compass实战—grunt

上一篇教程明河介绍了compass的安装和编译,这篇教程将深入讲解compass与grunt的结合,包括grunt-contrib-watch、grunt-contrib-compass、sprite等。 grunt-contrib-watch:实时编译sass文件 点此查看完整Gruntfile.js grunt.loadNpmTasks(‘grunt-contrib-watch’); 注册watch任务: grunt.registerTask(‘dev’, ['watch']); watch任务配置: watch: { compass: { files: [‘<%= srcBase …..

compass实战—入门篇

compass

sass作为css预编译器逐渐成为主流关于在于compass,compass对于sass,就像ruby on rails对于ruby。compass是Sass的工具库,涵盖基于sass开发的完整工作流,推荐阅读《Compass用法指南》,这篇文章不够深入,故开个系列教程讲解compass(教程重点不在sass,sass的资料传送门)。 一个好的css工具库必须包含如下几个部分: 工具支撑 css3支持 css常用设计模式库 响应式设计支持 兼容性hack支持 sprite图片支持 retina支持 字体支持 compsass完全满足上述需求,可以提高css编写效率和提高代码的可维护性,这个系列…..

发布kissy小工程构建器generator-bee

bee-loge

generator-bee是kissy简单工程构建器,跟generator-xcake和generator-clam有所不同,强调简单和快速,没有复杂的目录分级和复杂的命令功能,不是以页面作为划分维度,适用于小工程构建,适用于kissy mini工程。 generator-bee 遵循最新的kissy规范,会生成demo页面和测试用例范例,支持kissy mini。 阿里内部环境,使用依赖表——combo的方式,不再静态合并文件。 作者:明河(剑平) 工具库地址 demo工程传送门 反馈bug 安装 安装yeoman npm install yo grunt-cli -g 安装kissy-ga…..

Gulp.js深入讲解

g-1

上周明河发了篇《Gulp.js—比Grunt更易用的前端构建工具》,同时也贴在阿里的技术站上,引起了不少前端同学的讨论。 赤温(开发工程师)说:这东西(Gulp.js与Grunt)差距不大,社区才是王道! 英布(高级前端开发工程师)说:一个是以配置的方式,一个是以编程的方式,感觉各有千秋吧,复杂流程还是使用编程的方式比较好,简单的那就随便了。 诚冉(前端开发工程师)说:曾经苦于将grunt的各个工具黏合在一起的过程,grunt这个东西生出来就不是给小项目用的,必须是一定规模的并且持续更新的项目,才舍得花这么大力气来“制造工具”。一点也不夸张,虽然grunt的组件越来越多,但概念就像import…..

Gulp.js—比Grunt更易用的前端构建工具

gulp-2

Grunt是目前最流行的前端构建工具,对前端的效率帮助非常大,但Grunt并非完美无缺,json描述任务的方式,显得过于繁琐和不够简单,对于新手来说,有不少的学习成本。 今天明河介绍个比Grunt更易用的前端构建工具:Gulp.js,最近很火的开源项目,引起了很多前端同学的关注,大家都很好奇,Gulp.js拿什么跟Grunt掰手腕。 大多数前端处于观望状态,Gulp.js这杯可乐很诱人,但第三方插件太少(常用的任务插件都有),被Grunt甩了N条街,当然毕竟是新工具,情有可原,相信假以时日,Gulp.js会被更多前端同学认可,明河希望通过这篇文章,能够让大家看到Gulp.js的潜力。 安装Gu…..

无觅相关文章插件,快速提升流量