Web

Phantomjs截图里的中文乱码问题

Phantomjs截图里的中文乱码问题

使用 Phantomjs 对网页进行截图,在本地运行都是好好的,但是一到服务器,首先遇到部署问题,然后是中文乱码问题,遇到中文字符就渲染成下划线 “_”。(其实不仅仅是中文,韩文什么的也是渲染不出来)。 这个问题应该不难,应该是因为服务器没有安装中文字体导致的。但难题是 alpine linux 的中文字体不太好找。网上搜了一圈,在这个 How can I use Chinese in Alpine headless chrome? 问答里找到点线索。 主要有以下两种写法(使用 Docker 进行部署的): RUN echo @edge http://nl.alpinelinux.org/alpine/edge/testing >> /etc/apk/repositories && apk add wqy-zenhei@edge 还有这种: RUN apk add wqy-zenhei…

Continue reading

Phantomjs部署到docker服务器

基础环境是 alpine-node:6,要把 Phantomjs 部署到该服务器上,发现直接在 package.json 里加上 phantomjs-prebuilt 的依赖是不能运行的。 网络搜了一轮,发现是 Phantomjs 在 alpine linux 上是有问题的,找到这个 issue,尝试把下面这段加到 Dockerfile 里: RUN apk update && apk add –no-cache fontconfig curl curl-dev && \ mkdir -p /usr/share && \ cd /usr/share \…

Continue reading

栅格系统计算器

栅格系统(Grid System)的辅助工具不少,而那些工具多数让人填栏宽,间距,栏数这些。但是我在实际应用栅格系统的时候,是知道页宽并估计 12 栏会比较适合,虽然有公式去计算,都会觉得麻烦。 为什么就没有这么一个工具:输入页宽和分栏数,自动计算出所有可能的情况呢?因为不会有半个像素的情况,精准到像素的话,还是可能有几种情况的,还夹杂一些不实际的情况。那么根据具体效果去选择,会比埋头计算然后看效果要方便得多。 于是做了这个 webapp:Grid System Calculator 参考了 Bootstrap 和 960 Grid System 两种 CSS 实现方案,感觉更加倾向于 Bootstrap 的方案,于是参照其做法,用于生成显示效果。 为了方便 Bootstrap 的用户,以其参数配置方式输出具体参数。也提供了基于 960 Grid System 的 CSS 下载服务链接(引用 grids.heroku.com 的服务)。 这个 栅格系统计算器 采用 MIT…

Continue reading

Replace [class*=”span”] in LESS

Bootstrap 里的 grid system 里面 (源代码) 有这么一段, [class*="span"] { float: left; margin-left: @gridGutterWidth; } 用 RECESS 去跑会看到提示:Universal selectors should be avoided。这个既可以说是 selector 的问题,也可以说是 RECESS 的问题,但可以在运行的时候加个参数忽略掉。 自己去写扩展时也会写到类似的规则,比如需要兼容某浏览器,如果不这样写,就会需要像 Bootstrap-IE6 那样写

Font Awesome – Iconic Font for Bootstrap

从 v1.4 开始使用 Bootstrap,从此(内部)项目的 UI 告别了自制样式的时代,风格清新而且使用简便,是目前见过最好使的 CSS 框架。对于哪个妙句 “Build for and by nerds”,我都不知道说什么好了。如果想自定义样式,对于了解 LESS 的是非常容易的,但门槛并不在 LESS 本身,而是在于有些资源在国内是不能访问的。 而 v2.0 之后引入了 由 Glyphicons 提供的 Icons,应用到项目中去,顿时使整个 UI 的感觉上升了一个档次,真是锦上添花的好东西啊。 但是,需求总有惊喜的部分存在。 比如,想在字号较大的 title 位置也应用 icons; 又比如,在一个希望可以起到警惕作用的位置使用 .icon-ban-circle,无论是黑色还是白色(目前只有这两种颜色可供选择)都不能达到这个要求; 幸好是内部系统,不需要兼容什么老的 IE…

Continue reading

控制浏览器的缓存

做前端开发时常要重复一个动作,改一点,刷新页面看看效果。这里,我们是有个假设,刷新之后是能看到新的内容的。 但事实上,并不一定。 因为浏览器有缓存的机制。当然,它不是任何情况都起效,如果响应头里面没有 Last-Modified, Expires, ETag 这些东西存在,浏览器也是不知道该怎么做缓存的。那就有办法了,开发的时候控制都不输出它们问题不就解决了吗?如果控制这个的开关只有一处的话,那当然可以,但实际这些响应头的处理是有必要做些细分处理的。如果可以让服务器保持正常一致的输出,那么控制权就落在浏览器哪里了。 控制浏览器的缓存,通常想到的都是清除缓存,所有浏览器都有这样的功能,简单点几下就能搞定。但其实还有更省力的办法,就是直接控制是否缓存。开发通常都喜欢使用的 firefox 上是控制缓存方法很简单,地址栏输入 about:config (会让你确认一下),然后在 filter 里输入 cache 从过滤结果可以找到 browser.cache.disk.enable 和 browser.cache.memory.enable 这两项,默认都是 true,双击一下变成 false,缓存功能就禁止了。 这样,一开始的假设就是正确的了,可以放心的 F5 。 其它浏览器呢? Chrome 据说也可以设置 –disk-cache-size=N,看上去可以控制缓存,不过我在 ubuntu 的 chrome13 上尝试是无效的,不知道 win 下可不可以。Chrome…

Continue reading

CSS 文字发光效果

CSS 文字的发光效果通过 text-shadow 实现起来很方便的。 text-shadow: 1px 0 1px #8B4513, 0 1px 1px #8B4513, 0 -1px 1px #8B4513, -1px 0 1px #8B4513; 在 Firefox, Chrome, Opera, Safari 中的效果: 看上去这几款浏览器都支持。不过就是在 Chrome 里面,可以看见出来的效果并不好,奇怪的一点是为什么它的模糊会往里发展了,开始还以为 webkit 都这样,看了看 Safari,表现挺好的,边缘比 Firefox 还要锐利。

IE 中对 toString 的双重标准

使用 for .. in 遍历对象,似乎没什么好说的,不过还是有例外。在各个浏览器里面跑下面的代码: var obj = { toString: function() { return "custom.toString()"; } } for(var i in obj) { alert(i); } 它们都会 alert 一个 toString,除了 IE。一开始还以为是加载慢,后来才认识到,其实 IE 并不把它当成是一个自定义的对象方法。同样的情况也发生在 valueOf() 方法上,可以猜想,IE 可能把它当成是 native 的了。…

Continue reading

Chrome,为什么第二张图片看不见呢?

在测试的时候,建立一个最小测试集对于测试调试是很有帮助的。 为了测试与图片装载相关的内容,建立了下面的页面。内容很简单,就是动态添加两个 IMG。 <html> <head> <title>Test Loading IMG</title> <style>body { background-color: #00F; }</style> </head> <body> <script> function show() { for (var i = 0; i < 2; i++) { var img = new Image(); img.src…

Continue reading

IE 中 png 黑底(半透明失效)的那点事

早有听闻 IE7+ 是支持 png 的,用下来感觉也还可以。但忽然之间,发现有一张 png 图片莫名其妙地黑底了,最先想到的是 png 的输出设置可能出现问题,于是试了 N 种设置黑底,只是黑底的形状有点不太一样,相当纳闷。没办法了,还原基本步。 <div id="box">I Believe</div> <style> #box { background: url(http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png) no-repeat; color: #FFFFCC; text-shadow: 1px 0 2px #897461, 0 1px 2px #897461, 0 -1px 2px #897461,…

Continue reading