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…..

kissy无线开发之旅—聊聊工程

kissy工程历史

如果让我选择kissy的哪一个版本最具有里程碑意义,我会选择1.2.0,因为加入了loader,应对复杂业务场景,就像是建一座大厦,有了打坚固地基的能力,以模块系统为种子也慢慢催生了kissy的生态圈,但模块系统也带来了项目工程问题,即如何更快更好地组织你的前端项目目录和代码? 明河将以使用者的角度,去解读kissy工程学的历史,“历史不应该仅有消除偏见,它还应该孕育热情。”二年多来各个团队都有自己的工程解决方案,存在着不同的分歧,同时也见证了前端的热情与发展。 聊聊那段历史 上图主要是以圆心团队为脉络,期间各个团队都产生了知名或不知名的方案,比如一淘的brix体系和统一目录服务器构建方案,阿…..

kissy无线开发之旅—聊聊XTemplate

为什么写这个系列文章 写这篇文章不是为了证明kissy适合无线开发,而是总结自己使用kissy在无线开发上的实践经验,主要针对复杂的webapp。 模板实践作为系列文章的开篇有些唐突,之所以这么做,因为模板在webapp中非常重要,是view骨架,对webapp的渲染性能有直接影响。 h5的页面,kissy请使用1.4.1版本,1.4.0和1.4.1在XTemplate上有区别,后面明河会讲到。 XTemplate使用杂记 小心空格陷阱 小文想要把kissy1.4.0的页面升级到kissy1.4.1,页面中有用到XTemplate,结果渲染失败,很有可能遇到空格陷阱,demo传送门。 KISS…..

常用插件的使用—grunt入门指南(下)

grunt-1

less/sass/stylus预编译 在前端工程中使用css预编译器(less/sass/stylus)用于弥补css的语言缺陷,基本上是标配了,其中less和sass用的最多,但明河最喜欢使用的是stylus,grunt官方有对应的编译插件。 这里以grunt-contrib-stylus为例。 stylus: { options: { //指定要扫描的目录(针对@import内的路径) paths: ['src'], //指定将图片路径转成base64数据的函数(比如配置urlfunc:”embedurl”,扫描embedurl(test.png)) urlfunc: ‘embedurl…..

Charles(最强大的http调试工具)详细教程(下)

2013-11-17 14-49-35

上半部分讲解了Charles最常用功能代理的使用,下半部分继续演示Charles的特色有趣的功能。 网速模拟功能 throttle功能对于前端来说非常实用,可以看页面在低网速下的表现,从而找出优化的点。 在线上环境通常有些因为网速慢导致的bug,在本机无法重现,那时候就很抓瞎,如果嫌远程麻烦,推荐使用throttle。 首先先配置下throttle。 我们要看页面在3G环境下的表现: (Charles的预配置对于中国的网络环境并不准确,电信、移动、网通的速度还有有明显差异。) 解析下图上几个配置的含义: Bandwidth(带宽)、Utilistation(利用百分比)、Round-trip(…..

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