教程:做套自己的icon font

Part 1: Why Icon Fonts?

Just because Icon Fonts are Awesome!

来谈个历史问题——
做兼容移动设备的网页时,retina屏幕的存在导致了我们经常要为一个logo做两套图
一套原始尺寸,另一套两倍尺寸,并且还要进行media query。

如果此时我们的logo可以随意放大缩小并且轮廓清晰的话就好了。
当然我们也可以用canvas或svg画个logo上去,但如果页面上有很多这类icon的话,这么做会累死人的……
随着扁平化设计的流行,我们的logo、icon似乎不需要设计的那么立体化了:没有渐变没有阴影,只是单纯的纯色图形
还记得以前在MS Word里用Wingdings字体打小图形的日子吗?
——纯色的、可缩放、轮廓清晰。
——没错,从很早以前开始,字体就可以满足我们这个需求了。

其实Github去年就开始用icon font来做网站的icon了。
并且,github也公开了他们的octicons,供大家使用。
bootstrap开发到3.0时,也把所有的图片icon换成了icon font
再到国内,技术龙头阿里巴巴下的一淘也公开了内部的UX图标字体库
再根据我对淘宝的观察,他们确实也有一套自己的icon font,但是至今没有公开。

所以说,Icon Fonts已经是大势所趋了!

Read More

使用greasemonkey自动取消支付宝登录控件勾选

源代码在这里

支付宝登录的安全控件默认是勾选的,如果想要取消默认勾选,可以使用greasemonkey模拟点击安全控件。但是支付宝首页的登录页面实际上是一个异步加载的iframe,稍微有点麻烦。带注释的源代码如下:

在greasemonkey中针对支付宝首页和单独的登录页面新建一个user script,复制上面的代码,即可实现异步取消勾选。默认最多尝试5次,即5秒内IFRAME没加载完毕的话就不会再尝试。

從vanilla-js開始

那天從ruby china的一個帖子里了解到一個非常強大的js庫──vanilla-js
於是我推薦給了另外一個前端看,不過可惜我的幽默神經和他的略有差別,他沒能體會到vanilla-js的強大。

那讓我們來剖析下他到底有多強大吧。

  1. Facebook, Twitter, Apple, Microsoft, Amazon, etc.都在用vanilla-js。
  2. 整個庫只有25bytes。
  3. 對html5全支持,對所有瀏覽器都支持,性能高於一切js庫

這就是vanilla-js。
Read More

nodeJs note 1

#######################################################
2013.7.17 UPDATED
慎用此方法!
依舊推薦用sudo安裝npm!
修改prefix后bin沒法正確添加到全局變量的bin里去。
會導致npm里的bin方法不能用,得手動添加bin目錄,非常麻煩。
所以最後我也還是把自定義的prefix刪掉了。
#######################################################

是的,終於開始學node了。
Read More

关于rel=”nofollow”

Google在Webmaster Tools页面提到:

“Nofollow” provides a way for webmasters to tell search engines “Don’t follow links on this page” or “Don’t follow this specific link.”

What are Google’s policies and some specific examples of nofollow usage?

  1. Untrusted content
  2. Paid links
  3. Crawl prioritization

However, a solid information architecture — intuitive navigation, user- and search-engine-friendly URLs, and so on — is likely to be a far more productive use of resources than focusing on crawl prioritization via nofollowed links.

html5对rel=”nofollow”的解释道:

rel=nofollow “indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.”

综上来看,不管是从搜索引擎爬虫的角度、还是html5对此的重新定义来看,rel=”nofollow”并不是单纯用来屏蔽搜索引擎抓取的。它包含的语义远大于原先的定义。

读书笔记 – 高性能网站建设进阶指南(2)简化CSS选择符

css selectors 性能消耗从低到高:

  1. ID selectors
    #modal { overflow: hidden; }
  2. class selectors
    .container { margin: 0 atuo; }
  3. type selectors
    a { color: #999; }
  4. adjacent sibling selectors
    input + label { display: inline; }
  5. child selectors
    label > input { display: none; }
  6. descendant selectors
    .foo a { text-decoration: none; }
  7. universal selectors
    * { font-family: Arial; }
  8. Attribute Selectors
    [class^=”modal-“] { background: white; }
  9. Pseudo-Classes and Pseudo-Elements
    a:hover { text-decoration: none; }

Read More

跨系统跨浏览器的“微软雅黑”

这个问题起源于设计要求某页面在任何装了微软雅黑的系统里都要显示微软雅黑。这就包括,win下所有浏览器和mac下所有浏览器(我想没人会在linux下装雅黑的吧~)。

给font-family设定中文字体一般有两种常见方式:1、字体英文名,2、unicode。

我一直采用unicode的方法。
因为写成“Microsoft Yahei”的话,win下ff(曾经)和opera(目前为止)都不能正确识别。
写成unicode的话,win下所有浏览器都能显示雅黑字体。

但是这招在mac os下似乎行不通。
通过调试,基本确定mac下的雅黑的名字默认就是“Microsof Yahei”,不存在“微软雅黑”这个字体名。
所以mac os下写unicode是没法被识别成“微软雅黑”的。
但这样会造成win下部分浏览器没法正确显示雅黑。

终上,
如果想让win下全浏览器显示雅黑的话,font-family用unicode“\5FAE\8F6F\96C5\9ED1”;
如果想让全部装了雅黑的系统下的浏览器显示雅黑的话,font-family用英文名“Microsoft Yahei”,
但这意味着部分win下的浏览器无法正确显示雅黑。