【更新】iSpriter – 智能合并CSS精灵图

号外号外,iSpriter更新啦!

什么?你不知道iSpriter是什么?那你太out啦,必须先看看这个文章了。简单的一句话介绍:基于NodeJs的开源CSS精灵图合并工具,不用改变原有的 css 编写方式,就能自动帮你解决 css sprite 的合并问题。目前源码托管在 github(https://github.com/iazrael/ispriter),欢迎各位同学来一起完善。

由于最初写的时候不怎么注意代码自量,写得比较搓。在应用在几个项目之后,修复了一些 bug,发现再加新功能比较困难。最近终于下决心重构了下,并在重构的基础上增加了一些新特性。

目前 iSpriter 的特性有:

  1. 智能提取background的url和position等信息
  2. 智能判断使用了background-position(暂时只支持使用px为单位)定位的图片并重新定位
  3. 兼容已经合并了的图片, 并重新定位
  4. 多个css文件合并时,排除并重用已经合并的图片
  5. 智能设置被合并图片的宽高
  6. 支持设定合并后图片的最大大小【新】
  7. 支持设置合并后的图片间距【新】
  8. 跳过background-position是right、center、bottom的图片【新】
  9. 跳过显式的设置平铺方式为repreat的图片【新】
  10. 跳过设置了background-size的图片【新】
  11. 提供将所有图片合并成一张(同时指定maxSize可自动切分),并将所有css文件合并为一个文件的功能【新】(2013/9/10)

最新版本支持限制合并后的图片大小啦。比如限制合并后的图片最大60KB,则可以把原本合并成一张100KB的图拆成两张。这样老大检查的时候就不会抓住你问:嗯?为什么这张图超过了60KB了?检讨检讨!……哈哈,所以这绝对是个延年益寿的新功能 ^_^。

继续阅读…

在浏览器端用JS创建和下载文件

前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑、在线代码编辑、iPresst等)。

但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》另存为。如下面这个链接:

<a href=”file.js”>file.js</a>

用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求。 继续阅读…

千方百计加速Web之加速DNS解析

通常情况下,做移动开发时,如果要向后台请求数据,都会直接使用TCP通信。但实际上一来HTTP比TCP简单易用多了,二来有很多现有CGI如果要进行改造得花很大功夫。还是会有使用HTTP请求来拉取数据。

在做Android QQ二维码时,扫描到二维码字符串,就是把该字符串用HTTP传给后台,后台解析后返回给客户端,客户端再进行下一步处理。在提交测试后,测试同事发现,在移动网络上,DNS解析会经常失败,导致二维码扫描功能不可用。功能测试不通过,导致无法发布。同时测试喜欢在清空DNS缓存和屏蔽了DNS解析的情况下,二维码解析功能仍然可用。因此这里增加了如下处理:

  1. 进入“扫一扫”的界面时,客户端就开始对CGI所在域名进行解析,并把解析结果缓存到本地文件;
  2. 发起CGI请求时,还是使用原域名进行请求,如果DNS解析失败,则用第一步缓存的IP替换掉CGI中的域名再发起一次请求。

由于国内有好几个网络运营商,公司在不同的网络环境都有不一样的出口IP,因此选择最近的IP才能快速访问CGI。所以缓存域名结果时,需要区分网络分别保存。
继续阅读…

【代码分享】根据类型智能提取参数

如果你是个Javascript程序员,那一定经常写下面的代码:

function funcA(url, params, callback, option){
    if(arguments.length == 2){
        //funcA(url, callback);
        if(typeof params == 'function'){
            callback = params;
            params = {};
        }else{
            //funcA(url, params);
            //......
        }
    }else {
        //......
    }

}

当参数变化形式比较少的时候还没问题,当你的方法想对多种传参形式进行容错时,一堆的if else判断就变得很难看了。这时不妨尝试下这个 getArguments 方法。 继续阅读…

让Java跟Javascript更加亲密

在移动App开发中,为了快速迭代,通常都会使用Native+Web的模式开发。具体来说就是使用Java提供接口,使用WebView控件嵌套Web页面来实现UI和交互。

在Android中,Java可以很方便的提供接口给WebView中的Js进行调用,只要以下一行代码就能搞定:

mWebView.addJavascriptInterface(new JavascriptInterface(), "custom_name");

这样,JavascriptInterface的所有声明为public的方法,都能被mWebView中的Js通过以下方式调用:

window.custom_name.xxx();//xxx为JavascriptInterface的公有方法

而Java需要调用Js时,则是通过WebView实例的loadUrl方法调用:

mWebView.loadUrl("javascript:xxx(yyy)");

这其实跟你在浏览器的地址栏敲下“javascript:alert(1)”的原理是一样的。

一切看起来都是那么的美好,只是……

当Java需要传递大量字符串给Js时,URL就力不从心了。另外,从URL执行的Js,在页面没加载完成时,是有可能导致页面出现undefined错误(因为要执行的那个方法可能还没有声明呢),会引发各种奇形怪状的错误。

继续阅读…

从网页监听Android设备的返回键

最近搞Android项目的时候,遇到一个比较蛋疼的需求,需要从Client App调用系统浏览器打开一个页面,进行杂七杂八的一些交互之后,返回到App。如何打开浏览器和如何返回App这里就不说了,有兴趣的童鞋可私下交流。

之所以说这个需求蛋疼,是因为Android有个物理返回键啊……返回键啊……键啊……啊……

用户按下返回键后,预期应该跟点击页面上的返回键一样——返回App。然而这个返回键的被按下的时候网页完全不知道啊(onbeforeunload不算),找不到直接的办法去监听,愁死我们这全苦逼程序员鸟~

虽然啊不能直接监听,曲线救国的办法,还是有滴。 继续阅读…

Commons-Fileupload组件的一些坑

Java Web中经常需要用到文件上传,比较有名的组件就是Commons-Fileupload、COS、SmartUpload(几年前的记忆了,不知道还是不是……)。

前段时间做个Android需求,需要从客户端POST图片到Server(用了Commons-Fileupload),结果它死活解析不出文件来。

组装成的表单内容如下:

--abcdefghijklmn
Content-Disposition: form-data; filename="name"
Content-Type: content/unknown

abc.jpg
--abcdefghijklmn
Content-Disposition: form-data; filename="yyy.jpg"
Content-Type: content/unknown

some data
--abcdefghijklmn

很正常的一个表单,POST到另外个Sever(用了别的文件上传组件),却能正常解析。因此问题一定是出现在Fileupload的表单解析上。于是跟做CGI的童鞋一起研究了下,把直接用Web页面POST的表单内容拿过来比较,总算发现问题了。看下面高亮的地方: 继续阅读…

localStorage也跨域

最近做一个项目,改动到了两个页面(A,B):在A页面(aa.example.com/a.html)往localStorage写一个key,然后在稍候的B页面(bb.example.com/b.html)读出来。结果是写的时候成功了,在A页面也读出来了,跑到B页面,localStorage却是空的!

20130117160735

别急,待俺掐指一算……嗯,子域不同,localStorage应该也是不一样的。在A页面的逻辑完成的时候,跳转到bb.example.com/a.html 进行设置key的话,写key和读取key都是同一个域了。

20130117161036

 

结果……啊,我要崩溃,还是读不出来!但是t它(A,B)的上一个版本是可以的,为虾米呢?

继续阅读…

1 2 3 8  返回顶部