箱猫日和

Category: Front-End

  • 教程：做套自己的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已经是大势所趋了！

  • 国内双核浏览器兼容模式和极速模式

    最近正在进行的新项目中，正好可以重新构建站点的前端。 旧项目的layout本想采用boilerplate，后来因为有人提出在双核浏览器“兼容模式”下， IE hack class无效，便修正了IE hack class的位置，从<html>移到了<body>里。

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

    源代码在这里。 支付宝登录的安全控件默认是勾选的，如果想要取消默认勾选，可以使用greasemonkey模拟点击安全控件。但是支付宝首页的登录页面实际上是一个异步加载的iframe，稍微有点麻烦。带注释的源代码如下： // 绑定事件 window.onload = function() { var counter = 0; var waitForOption = setInterval(function(){ // 如果取消勾选成功或者连续5次失败，不再尝试 if(uncheckSafeLoginOption() || counter++ > 5) { clearInterval(waitForOption); } }, 1000); } function uncheckSafeLoginOption() { var id = ‘safeSignCheck’; // 单独的登录页面直接查找元素 // 首页需要查找iframe后再查找元素 var safeLoginOption = document.getElementById(id) || getFrameDocument(‘loginIframe’).getElementById(id); if(safeLoginOption) { if(safeLoginOption.checked) safeLoginOption.click(); return true; } return false;…

  • 從vanilla-js開始

    那天從ruby china的一個帖子里了解到一個非常強大的js庫──vanilla-js。 於是我推薦給了另外一個前端看，不過可惜我的幽默神經和他的略有差別，他沒能體會到vanilla-js的強大。 那讓我們來剖析下他到底有多強大吧。 Facebook, Twitter, Apple, Microsoft, Amazon, etc.都在用vanilla-js。 整個庫只有25bytes。 對html5全支持，對所有瀏覽器都支持，性能高於一切js庫 這就是vanilla-js。

  • nodeJs note 1

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

  • IE10 bug hack: box-shadow remains if box size changed

    前按： 這是個我不想fix的bug，因為這bug和IE對css3的支持沒有任何關係，fix的方式也非常流氓。 Environment: IE10(10.0.9200.16384), Win8. Screenshot: Bug: 可以很明顯的從圖上看到，當內容通過ajax載入后，div高度一改變，box-shadow留下了殘影。

  • 关于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? Untrusted content Paid links Crawl prioritization However, a solid information architecture — intuitive navigation, user- and search-engine-friendly URLs, and so…

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

    css selectors 性能消耗从低到高： ID selectors #modal { overflow: hidden; } class selectors .container { margin: 0 atuo; } type selectors a { color: #999; } adjacent sibling selectors input + label { display: inline; } child selectors label > input { display: none; } descendant selectors .foo a { text-decoration: none; } universal selectors *…

  • 读书笔记 – 高性能网站建设进阶指南（1）图像优化

    优化工具： 跨平台png压缩工具：Pngcrush，OptiPNG 跨平台剥离jpeg的元数据工具：jpegtran 在线多格式压缩工具：smush.it 对动画gif优化，gifsicle可以将动画里连续帧中的重复像素移除，来达到优化。

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

    这个问题起源于设计要求某页面在任何装了微软雅黑的系统里都要显示微软雅黑。这就包括，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下的浏览器无法正确显示雅黑。