CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby) css-sprite是将css样式中零星的小图标,小图片合并成大图显示,这样能减小服务器并发连接数,减小服务器负载和带宽使用,有很高的实用价值。这里介绍一些自动合并图片并生成样式的工具。
css-sprite是一个基于NodeJS实现的css切图自动合并工具,能自动将小图片合成大图,支持retina sprites和base64输出格式。
SmartSprites是基于Java实现的CSS切图自动合并工具,你只需要在CSS样式文件中添加一些注释即可使用;
Glue是基于Python实现的一个CSS Sprites切图自动生成工具。它生成的CSS小图标所对应的样式名以目录名+文件名组织: 如.sprite-icons-zoom_out,
让我们写快速的JavaScript,JS性能优化小窍门
不过,说实话,即使它这么疯狂流行,它的性能还没有达到它的极限。是的,它在改进,但是等到它在各个方面赶上本地应用之前,在做一个HYBIRD混合应用时,你还不得不使用一些伎俩来优化它的性能。
Sortable极小的可拖放排序分组库;支持AngularJS,React,Meteor 为现代浏览器和触摸设备拖放排序列表设计的简约JavaScript库。不依赖jQuery。支持Meteor,AngularJS,React,任意CSS库,如Bootstrap。注* minify压缩后10K左右, Gzip后4K
- 支持触摸设备主流游览器(IE8+)
- 可以在列表内和列表间拖动
- 移动物品时支持CSS动画
- 支持拖动手柄和可选择的文字(比voidberg的html5sortable更好)
- 智能的自动滚屏
- 使用内置的HTML5拖放API
- 支持Meteor和AngularJS
- 支持任何CSS库,例如Bootstrap
- 简单的API
- 不依赖jQuery(但支持)
通过Web Audio API可视化输出MP3音乐频率波形 Web Audio API(网络音频API)过去几年中已经改进很多,通过网页播放声音和音乐已经成为了可能。但这还不够,不同浏览器的行为方式还有不同。但至少已经实现了.在这篇文章中,我们将通过DOM和Web Audio API创建一个可视化音频的例子。 注* 形状会波形而变化.

专为控制打印设计的CSS样式 大多数Web设计师对打印控制还不是很熟悉,他们往往更迷恋像素,而不是打印机。在现实世界中,很多人依赖从网站上打印网页来参考: 在这个数字时代, 在一些特殊的场合,很多人手中还会拿着纸张。
Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距.
服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML) 这是一个两年多的“老”项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍, 示例
var cheerio = require('cheerio'),
$ = cheerio.load('<h2 class="title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();
//=> <h2 class="title welcome">Hello there!</h2>
即将推出的CSS4 Level 4 Selectors(第4级选择器) 注* CSS4草案发布了。
我们都习惯去学一个又一个的新前端框架,但是我们常常忘记了,作为我们每天使用的网络核心语言CSS本身也在不断地推出一些新功能。
在我们开始之前,你应该知道:本文中的CSS,很多都无法在浏览器中工作。即使是最新的浏览器。这是因为,它们还是一些草案-处于起草阶段。 level 4 selectors草案于2011年开始,第四版经过大量的讨论而最终制定。
用页面可见性(Page Visibility)API创建用户体验良好的网站 我们都有过这样的经验:启动浏览器后,会重新加载所有的tab页,声音和视频混合嘈杂。虽然你可以很容易对这方面进行控制,像MuteTab等,对于大多数人来说这是一种令人失望的用户体验。作为开发人员和设计师,我们应该让页面更加友好,而不能喧宾夺主。
什么是Viewport Meta(width详解)及在手机上的应用 viewport是专为手机浏览器设计的一个meta标签; 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率
为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机上阅读时,界面就会显得非常小,阅读体验就很差,就样就需要一种将原始视图在
手机上放大的机制,使用viewport标签可以解决这个问题。