IT瘾tips推荐

标签？ID？还是CLASS？

Tue, 27 Nov 2012 16:10:00 CST

想谈一下几个基本的HTML问题，都是围绕着应该怎样使用HTML。

1. 多用有语义的标签，少用div和span，避免使用没有class的div和span。

设想一下HTML的世界最初只有div和span这两个标签，其实网页依然可以写得出来。更多标签的出现，其实是为了替代利用率高但不好书写的 <div class="{tagname}"> 和 <span class="{tagname}"> 来的。

想再接着多说一句的是，在HTML5里越来越多常见的div class组合或div id组合被直接命名为了新的标签。理由也是相同的，像header/footer/aside/nav/section/article都是我之前经常使用的class或id。我甚至觉得w3c创造新html标签的工作很简单，定期统计一下最常用的class和id，然后取前几名作为新的标签名就行了。

上周还有人在微博上感慨那个“史上最牛的HTML代码”：

<div class="mod">
    <div class="hd"></div>
    <div class="bd"></div>
</div>

再过几年它真的也许会消失的。

反过来思考也可以，尽量使用有语义的标签名，实在想不出来合适的标签名了，再用div然后起个class或id。这样的思路也不错。

2. 不要滥用class而回避id，该出手时就出手。

和问题1同理，设想一下HTML的世界最初只有class没有id，其实网页依然可以写得出来，语义依然表达得出来。无非就是会出现很多特殊的class呗。因此，我们也很好理解，id的出现，就是可以和class一起协作，使某些语义即使没有现成的标签可以表示它，但依然可以把一般性和唯一性完美的结合在一起。

这里驳斥一个观点：“尽量都使用class，因为控制样式的时候class的优先级是同级的，id的优先级更高，它的出现会破坏样式优先级的平衡”。首先我觉得这是一个假命题，所谓的“平衡”是不存在的，也没有必要去刻意维护，通过id来表示的内容一定是相对特殊的，优先级自然高一些，这样的优先级设计是如此的自然。我能够接受的全部是class的适用范围仅是一些底层的css基础样式，如oocss里的基础样式，或很多网站都会有common.css文件或general.css文件，里面的东西尽量用class没问题。

另一个更重要的理由是，在HTML5里，除了id和class这两个特性可以控制样式之外，还可以通过特性选择器来定义样式，类似E[attr="..."]的写法。我们会发现可以控制样式的方式越来越灵活，选择越来越多。这是Web发展的必然趋势。当其他人已经在用id/class/data-*/tagname对样式展开多重维度攻势的时候，我们实在没有必要把自己还关在class的世界里。

3. 尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。

比如两列布局的左右侧多半是正文和辅助信息的关系，那么就不建议用class=”left”和class=”right”而是倾向于class=”main-content”和class=”sidebar”，或者直接用article和aside。

在自适应Web设计(responsive web design)如火如荼的今天，页面上的某个元素处在网页什么位置更像是个变量，所以通过位置来定义一个元素显然是会承受很多额外的维护成本和扩展成本。当改变发生的那一天，你发现自己的HTML代码变得文不对题。曾经的left跑到最上面去了，right变成了底部通栏，这都是很正常的变化。

实在没什么语义的，比如为了给IE加圆角而增设的标签，或清除浮动用的额外的标签，再或者是基础样式的，和具体内容无关的，再用div加表象的class来描述。

4. 尽量避免表示纯样式的class或id。

比如class=”f14 red”。印象中网上有很多拙劣的例子，也有很多深刻批判这种用法的文章，我想说的是，如果你非要这样改样式，那不如直接写内联style来得直观。

最后想说的是……

互联网是一个快速发展的领域，它的快速发展甚至让人们忘却了很多传统领域的停滞不前。在这样的领域里工作，勇敢尝试，关注新技术，把握新趋势是如此的重要。不要拒绝新事物，不要被不思进取的人拖累，不要对大千世界失去好奇心和求知欲，方可永葆青春。

原文地址： http://jiongks.name/blog/html-or-id-or-class/
原作者：勾三股四
请尊重版权，转载请注明来源，多谢~~

后记：之前向前端大牛勾三股四约稿，嗯，终于约到了，好开心啊，嘿嘿——by 神飞。

HTML5 Charset能用吗？

Thu, 20 Dec 2012 22:11:26 CST

前一段某项目中页面在IE6突然出现了乱码，当时做了各种排查，最终推测是使用了HTML5的DOCTYPE和Charset以及中文注释的问题，于是临时采用旧的Charset方法来修复了下，后面乱码再没出现。

其实一直不太确定HTML5的Charset能否被IE6识别，于是做了一些测试。

先说下两种Charset声明方法，其实大家应该都很熟悉的：

1	<meta charset="UTF-8"><!--HTML5方法-->

1	<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--HTML4及XHTML方法-->

后面我们简称第一种方法为HTML5方法，第二种方法为HTML4方法。

测试环境：

Windows XP Sp2，中文版+英文版两个版本的IE6，及Windows 7 下IE9及其各种兼容模式和Chrome、Firefox等的当前Stable版本；

因为我们用到的HTML文件都是UTF8编码的，所以这里测试用例的HTML文件也都是UTF8(无BOM)格式，项目用gbk或者gb2312编码的类似。

测试用了两种方法：

meta方法：包括HTML5和HTML4两种方法及其混搭
服务器端方法：服务器端设置charset，这里使用nginx，charset=utf-8

测试用例——Meta方法：

测试用例——服务器方法：

上面各用例均可直接访问

测试结果：

测试个用例在各浏览器中表现一致；
UTF-8的方案中，全部正常显示；
charset声明为gb2312，由于和文档的UTF-8编码不符，所以全部乱码；
1，6用HTML5 charset分别定义了UTF8和gb2312，1正常显示没有乱码，6乱码——在中文版IE6和英文版IE6均如此，说明IE6能识别HTML5的charset；
1，2用例和6，7用例，分别用单独用HTML5和HTML4方法定义charset，效果一样；
值得注意的是，第三个用例先用HTML5的方法设定UTF-8编码，再用HTML4的编码设定为gb2312，但页面显示正常，而第八个用例反之，结果页面显示乱码，所以可以推测，第二个meta标签并没有生效；
4、5用例并没有乱码，说明单纯的HTML注释并不一定会导致乱码，这里没有测试这两个位置加载不同编码的js等外部文件时可能发生的情况；
服务器方法中，用例1并没有用meta设置charset，页面显示正常，而用例2中用meta设置charset=gb2312，与服务器版本不同，但依然没有乱码，说明服务器端返回的charset优先级更高；

结论：

其实关于charset的规范， Google的开发文档中也有解释：

要在HEAD标签中；
在任何其它内容之前，也就是要在HEAD中的最前面；
包括空格和DOCTYPE声明在内，要在前512个字节之内；
HTML5和HTML4两种写法效果一样，用其中之一即可；

上面的测试也证明，第4条是正确的，两种写法均可。

另外，服务器端设置charset也是很不错的做法，charset声明直接在HTTP response中获得，效率更高，而且更方便。Google目前在用这种方法。

所以只要页面写的规范，并不会出现乱码的问题。所以可以大胆的使用HTML5的DOCTYPE和Charset声明。但是请尽量按照上面说的Google文档中的规范来，头部不要放太多东西，js等外部资源更要放到后面去。

测试中难免会有遗漏，如果有不正确的地方，欢迎指正并一起讨论~~

IE BUG相关文章集合

Tue, 18 Dec 2012 14:14:16 CST

Haslayout

Block formatting contexts

IE bug

BUG集合

其他文章

CSS技巧荟萃：了解CSS页面布局和加载流程

Tue, 29 Jan 2013 11:54:06 CST

如果你开发web相关应用或者网站的话，肯定知道CSS对于页面布局的重要性。在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局。

介绍

在我们开始正式的介绍页面流程前，我们需要简单了解几种不同类型的html元素，以及它们的缺省显示方式。这里我们主要重点介绍两个类型的元素：

block
inline

如果大家关心html5的话，你应该知道在HTML5中也包含了几个新的元素，例如，section，article等等，但是仍旧遵循这里我们介绍的显示类型。

inline类型的元素包括： img，span，a等，用来定义文字或者数据，通常显示方式是“同一行显示”。更具体的说就是，如果很多的inline类型的元素在同一行的时候，它们会显示在同一行，直到宽度不够显示了，再转到下一行。例如，如下代码：

1	<a href="http://gbtags.com">gbtags.com</a> is website for <span>geeks</span>

查看在线调试

相反block类型的元素，例如，div，p或者HTML5中新的元素section，article和article的显示方式和inline类型都不一样。它们都是典型的结构化的元素，可以包含inline类型的元素。浏览器处理block类型的元素，会在元素前后添加换行，这样你看到它们都是独立成行显示的。当然，如果你修改它的缺省显示类型为inline，它就会按照inline元素的显示方式显示。

样式CSS

通常我们都是使用CSS来控制元素的显示：

1
2
3

sometag{   
  display:inline; /*当然你也可以设置为block，none等等支持的属性*/
}

虽然上面的属性中我们指定了显示类型，这同时也意味这其它相关的样式，例如，你可以指定显示类型为block的元素的宽和高，但是 inline类型的无法指定。padding（内边距）和margin（外边距）可以被应用到inline显示的元素，但是不会影响包含的元素。看看如下例子：

查看在线调试

另外一些显示方式

除了inline和block类型的显示，这里还有一个inline-block的显示方式。如下图：

它显示的方式类似于inline，但是它相关的属性，例如，宽度，高度还有padding/margin等等遵循于block显示类型的规则。inline-block可以帮助我们实现类似float元素的效果，但是也有自己的问题。

其它的属性例如，list-item，顾名思义，显示的方式和列表元素类似。

<ul>   
  <li>元素1</li>   
  <li>元素2</li> 
</ul>

最后还有一个元素需要提一下就是”none”，这个属性可以让元素不显示，并且不占聚任何的document空间。注意和“hidden”这个属性区别一下。

正常Document的加载流程

那么什么是浏览器正常的加载流程呢？基本上浏览器按照它解析的顺序来显示内容，顶端的先加载，然后加载下面的内容。当大家开始做web设计的时候，可能都不关心正常的document加载过程，而只醉心于各种不同的绚丽花哨的技巧，如果你能够正确的理解document加载，对于更好的帮助你理解web设计绝对有利无弊。

做一个练习吧！

在这里我们将做一个简单的联系帮助你巩固你的学习，这里我们使用 HTML5 Shiv来帮助我们支持HTML5标签，使用 placekitten这个图片占位应用来生成图片。

HTML框架代码如下：

    <div>
        <h1>An Intro to Normal Document Flow.</h1>
        <figure>
            <img src="http://placekitten.com/g/100/200" alt="" />
            <img src="http://placekitten.com/g/160/200" alt="" />
            <img src="http://placekitten.com/g/220/200" alt="" />
            <img src="http://placekitten.com/g/180/200" alt="" />
            <img src="http://placekitten.com/g/240/200" alt="" />
            <img src="http://placekitten.com/g/130/200" alt="" />
        </figure>
        <article>
            <h2> 欢迎访问我的喵星人图片画廊</h2>
            <p>如果你也喜欢猫咪的话，来一起看看这些可爱的小生命吧！</p>
        </article>
    </div>
    <footer>
      <section>欢迎访问<a href="http://gbtags.com">gbtags.com</a></section>
    </footer>

CSS布局代码：

body{
  font-size:12px;
  font-family: Arial;
}
 
.container {
    width: 85%;
    margin:0 auto;
    background: #f2f2f2;
}
 
figure img {
    padding-left: 10px;
}
 
h1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #707070;
    padding: 10px;
    font-size:14px;
}
 
article {
    background: #505050;
    color: #f2f2f2;
    padding: 10px;
}
 
footer{
  width: 85%;
  margin:0 auto;
}
 
section{
  padding: 20px 0;
}

查看在线调试

总结

希望通过这篇文章的学习，大家能够更好的了解document的加载和布局，如果你有任何问题或者建议，请给我们留言，谢谢！

来源： CSS技巧荟萃：了解CSS页面布局和加载流程

人人都能用的10条网站易用性技巧

Tue, 23 Jul 2013 09:46:49 CST

嗯，WebAIM团队博客的一篇关于网站易用性的文章，比较基础，简单翻译一下：

1. 给你的logo添加替代文本

这样有两个好处：屏幕阅读器能识别logo图片代表的含义，图片未加载到时，也能告诉非视障用户那里是你的logo。

几种方法：

1	<img src="logo.png" alt="前端界">

或者，你用背景图来实现logo的话，也可以添加title属性来实现：

1 2	<span title="前端界"></span> </code>

当然，链接+背景图的方式是最好的，但最好也加上title属性：

1	<a title="前端界">前端界</a>

2.添加基本的Landmarks

ARIA Landmark是W3C定义的一套网站可用性规则，对于网站不同的模块添加描述性的Landmark——或者直接叫role，有利于读屏软件更好的理解你的网页，从而让视障用户更好的使用你的网站。

1
2
3

<nav rolue="navigation">
<div id="maincontent" role="main">
<form action="search.php" role="search">

等等，具体的规则请查看W3C的建议。

3.增强focus定义

其实很多网站会用尽一切办法去掉浏览器的:focus样式，特别是对于IE浏览器，其实，浏览器默认带上:focus样式是有道理的，它能指示用户当前的鼠标焦点位置是在哪里。这个对于键盘流特别重要。

所以请不要去掉:focus样式，甚至，你觉得默认的样式不好看或者不统一（IE是虚线框，Webkit是高亮的实线框，并且，Safari是蓝色，Chrome是橙色）也可以自己给定义一个高亮色：

a:focus{
    outline:1px solid red;
    background:yellow;
}

如果你的产品经理或者视觉设计师坚持要去掉focus状态的话，把TA的鼠标拿走一天并告诉TA只能用Tab切换链接就好了。。。

4.定义必填表单项

用 aria-required属性可以定义表单中的必填项——嗯，主要还是告诉读屏软件：

1	<input type="text" name="username" aria-required="true">

5.给你的页面添加一个h1

原因很简单，不只是有利于SEO，对网站整体的可用性和可读性都很有帮助。另外，你没有代码洁癖么？

6.定义表格的表头

通常很多人习惯表格全部使用 td标签，其实，表格不止有hd标签，还有 th、 col、 scope等。

所以简单来说，表头换成 th标签吧：

1	<th scope="col">Date</th>

7.定义表格描述

不要简单的在表格前面/后面加个p了事了，表格有专用的caption标签可用，就像图片一样。

<table>
    <caption>Class Schedule</caption>
<tr>
    ……

关于表格部分，强烈推荐重新发现HTML表格

8.避免“点击此处”

虽然这样的链接描述对普通人都无所谓，但是对读屏软件来说，是相当糟糕的，它其实是对视障用户的一种干扰。

所以，直接把链接用到正地方吧。

9.去掉tabindex

曾经，很多人用 tabindex来“增强”用户体验，但是这个属性却会打乱页面的正常阅读顺序，对视障用户是灾难性的，对普通用户也未必是友善的。

所以千万不要滥用 tabindex属性。

10.在线检测一下

呃，看到这里发现其实是个广告，但是如果能检测出来网站可用性问题，也是件好事情，WebAIM开发的一个网页工具，输入URL就会自动检测。测试了一下还不错，传送门

译自： http://webaim.org/blog/10-easy-accessibility-tips/，请尊重版权，转载请注明来源，多谢～～

您或许也会喜欢：

针对高分辨率屏幕的样式优化

Mon, 22 Jul 2013 22:21:45 CST

苹果定义高分屏（retina）已经好久了，只是最近才有越来越多的网站开始重视高分屏下的表现，QQ空间也早支持高分屏了，CSS Gaga也加入了对@2x图片的支持。嗯，迟到的文章，和大家简单的分享下。

首先，关于高分屏的基础知识，可以查看之前的文章《移动端webapp开发必备知识》

一般来说，内容类的资源并不需要对高分屏做什么优化，需要优化的是固定的图片类资源。而且通常现在有三种做法：

自定义字体，将扁平化的图标做成字体，可以原生的支持高分屏，因为字体是矢量的。比如 前端界用的icon-font，所以在iPhone和rMBP上看起来图标都不会模糊；缺点是有些手机端浏览器不支持，比如“用户量最大的UC浏览器”
矢量图片，嗯，将图标做成SVG格式，也能很完美的兼容到主流手机系统，当然Android 2.3以下版本支持很不好。
2倍图片，嗯，兼容性最好的方案，本文主要说这种方法。

使用媒体查询

这是最简单的方法：

1
2
3

@media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {
 /* style rules */ 
}

兼容所有浏览器的话(当然不考虑IE9以下浏览器了)，还需要加上各浏览器的前缀：

1
2
3

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {
 /* Style Rules */ 
}

JS判断

我们可以通过 window.devicePixelRatio方法来获取当前屏幕的像素比然后给body或者html标签添加差异化的class，再在样式中针对高分屏用2x的图片就好了：

var dpr = window.devicePixelRatio;
if (dpr >=1.5){
$('html').addClass("is-ratina");
}

不过既然媒体查询可以做到的事情，就不要用js去reflow页面了。

当然，如果配合CSSgaga的 AutoRetina功能，工作量会减少很多。

您或许也会喜欢：

扁平化设计与可访问性

Sun, 17 Feb 2013 08:11:47 CST

译自： Flat Design and Accessibility
原文：扁平化设计与可访问性
请尊重版权，转载请注明来源，谢谢〜〜

这几年互联网变化好多，我们在网上浏览的方式也一样。在本文中，我们将看一下最近扁平化设计带来的可访问性提升以及使得互联网或多或少更开放和可用性。

扁平化元素

拟物化设计模仿颜色、纹理、形状甚至实际生活中特定的实际形状，因此能对不喜欢新技术和更喜欢仿现实环境的人非常有帮助。然而，对视障用户能有多少用户呢？坚持这种设计方法对他们会有价值吗？好吧，和拟物化设计相对应的，扁平化设计，有很多优势可以帮助到这些特殊需求。因为扁平化设计使用基本的形状，比如，正规/不正规的多边形，它们更容易识别。

在上图中，左边的，扁平化设计展示了方形/矩形元素和高对比色的按钮。而右侧的拟物化计算器，使用了低对比色和大量的立体和阴影元素。

扁平化和拟物化的两个计算器对比展示了两种技术之间的不同。扁平化设计给予按钮本身较小的重要性同时增强了内容(本例中的数字和数学符号)。另一方面，拟物化设计通过给予按钮更大的重要性而使得它们很突出，而内容却因为低对比度而不太醒目了。

上面的例子展示了扁平化设计如何提升和给予内容更大的重要性，从而能证明对视障用户是有帮助的。

大字体和小图标

不只是在扁平化设计中，极简主义设计也一样，大字体元素是最重要的一种表现。字体能让用户聚焦在内容，从而成为设计流程中最重要的一部分。当前设计中的趋势包括高对比色的大字体、清晰的自定义字体和平衡的段落的使用——基本上就是，把传统印刷排版带到Web中来。这些原则增强了易读性和可读性，提高了易用性的另一个方面。毕竟，高对比色的自定义字体能提升可访问性是一个众所周知的事实。

这里的共用元素是使用大而清晰的高对比色字体增强可读性(比较像Sans-Serifs)

此外，清晰的大字体可用于基本元素中以创建Web和UI中强对比色的按钮，从而帮助用户轻易地识别指定元素的功能并将之与别的元素区分开来。说道元素，这些扁平化的元素在设计过程中变得真的很重要，因为它们有助于给于扁平化设计流程个性和强度，从而构建更好的所有按钮和界面元素的表现、可见性和清晰性。

基本形状、实色和简单的图标组成了这个优秀的iPhone皮肤的一部分，它展示了最好的扁平化UI元素。

实色与高对比色

到现在为止，我们讨论了应用于大字体和图标的高对比色。现在，让我们看下细节方面。在网页设计中使用高对比色不是一个新的理念。事实上，多年来，高对比色被用于为网页设计中特定的关键元素提供更好的视觉效果。

网上由很多出色的教程和工具来帮助你创建精确的色彩组合。比如，
Color Scheme Designer向你展示单色、双色、三色、四色、以此类推的色盘，并让你更多了解某个特定颜色如何与别的颜色相互影响。

Color Scheme Designer, 一个很赞的工具，可以查看颜色混合时的表现，然后用其结果作为创建高对比色的扁平化设计的参考。

同时，高对比色也可以被用于颜色之外，比如形状、分派、高度、线性、纹理和字的粗细。事实上，玩转这些所有元素及其相应的对比度能提升你的设计的表现，并使你的设计让视弱的人更易用。

高对比色网站及其灰度实例

这里是一些高对比色网站及其灰度版本，有的做了负反转，展示出漂亮的设计是如何天然的兼容了可用性和易用性理念的。

bigtop.it. 使用了大的字体和元素，暖色和温和的颜色之间的软对比。他们定义的对比度恰到好处。

aaugh.it 极简主义带来的简易的优势和适度的对比度

cheesesurvivalkit.com 有个漂亮的灰、白、红三色，提供了强对比度并提升了可读性和元素识别度。

metaphiziks.com 很完美的提升了内容显示。

Symb.ly是一个使用了极简样式来让你专注于内容的高对比度网站。

Odopod.com展示了一个漂亮的使用了粉色、白色和高规格图片的温和的对比色。当转换到灰度版本，所有元素都完全可识别。

unfold.no 是一个使用了高雅、简单设计和清晰内容的网站。

关于z-index的那些事儿

Tue, 12 Mar 2013 20:10:35 CST

关于z-index的真正问题是，很少有人理解它到底是怎么用。其实它并不复杂，但是如果你从来没有花一定时间去看具体的z-index相关文档，那么你很可能会忽略一些重要的信息。

不相信我吗？好吧，看看你能否解决下面这个问题：

问题：

在接下来的HTML里有三个<div>元素，并且每个<div>里包含一个<span>元素。每个<span>被分别给定一个背景颜色：红、绿、蓝。每个<span>被放置到文档的左上角附近，部分重叠着其他的<span>元素，这样你就可以看到哪些是被堆叠在前面。第一个<span>有一个z-index的值为1，而其他两个没有任何z-index值。

以下就是这个HTML和它的基本CSS。

HTML代码

<div>
  <span>Red</span>
</div>
<div>
  <span>Green</span>
</div>
<div>
  <span>Blue</span>
</div>

CSS代码

.red, .green, .blue {
  position: absolute;
}
.red {
  background: red;
  z-index: 1;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

挑战：

尝试使红色<span>元素堆在蓝色和绿色<span>的后面，不要打破以下规则：

不要以任何方式改变HTML标记
不要添加／修改任何元素的z-index属性
不要添加／修改任何元素的position属性

如果你找到了答案，那么它应该像下面这样：

<div>
  <span>Red</span>
</div>
<div>
  <span>Green</span>
</div>
<div>
  <span>Blue</span>
</div>

div:first-child {
  opacity: .99;
}
.red, .green, .blue {
  position: absolute;
}
.red {
  background: red;
  z-index: 1;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

解决方案：

这个解决方法是在第一个<div>里（红色<span>的父节点）添加一个小于1的opacity属性值。下面就是被添加的CSS的例子：

1
2
3

div:first-child {
  opacity: .99;
}

如果你现在很震惊，但是仍然百思不得其解，并且不相信opacity能决定哪个元素堆在前面，欢迎来社区提问，当第一次在这个问题上被困扰时我同样很震惊。

希望接下来的内容能够让你对这个问题更清楚些。

堆栈顺序

Z-index看上去如此简单：高的z-index堆在低的z-index的前面，对吗？这实际上是错的，是z-index问题的一部分。它看上去如此的简单，以至于很多开发者没有花相应的时间去读相关的规则。

每一个在HTML文档中的元素既可以在其他元素的前面，也可以在其他元素的后面。这就是所谓的堆栈顺序。决定这个顺序的规则被十分清楚的定义在说明文档中，但是就像之前我已经提到过，这些文档没有被大多数开发者们完全弄明白。

当z-index和position属性不被包括在内时，这些规则相当简单：基本上，堆栈顺序和元素在HTML中出现的顺序一样。（好吧，其实是有一点复杂的，但是只要你不使用压缩边界来重叠行内元素，你可能不会遇到边界问题。）

当你把位置属性也包括在内介绍时，任何定位元素（和他们的子元素）都在非定位元素前被显示出来。（说一个元素被“定位”意思是它有一个不同于静态的位置值，例如相对的，绝对的，等等。）

最后，当z-index被提及时，事情变的有点儿复杂。最初，很自然的假设带有高z-index值的元素会在带有低z-index值的元素前面，但是后来发现没那么简单。首先，z-index只对定位元素起作用。如果你尝试对非定位元素设定一个z-index值，那么肯定不起作用。其次，z-index值能创建堆栈上下文环境，并且突然发现看似简单的东西变的更加复杂了。

堆栈上下文

一组具有共同双亲的元素，按照堆栈顺序一起向前或向后移动构成了所谓的堆栈上下文。充分理解堆栈上下文是真正掌握z-index和堆栈顺序工作原理的关键。

每一个堆栈上下文都有一个HTML元素作为它的根元素。当一个新的堆栈上下文在一个元素上形成，那么这个堆栈上下文会限制所有的子元素以堆栈的顺序存储在一个特别的地方。那意味着一旦一个元素被包含在处于底部堆栈顺序的堆栈上下文中，那么就没有办法先出现于其他处于更高的堆栈顺序的不同堆栈上下文元素，就算 z-index值是十亿也不行！

现在，堆栈上下文有三种方法可以在一个元素上形成：

当一个元素是文档的根元素时（<html>元素）
当一个元素有一个position值而不是static，有一个z-index值而不是auto
当一个元素有一个opacity值小于1

前两种形成堆栈上下文的方法具有很大意义并且被广大Web开发者所理解（即使他们不知道这些被叫做什么）。第三种方法（opacity）几乎从来没在w3c说明文档之外被提及过。

用堆栈顺序决定一个元素的位置

实际上，为一个页面上的所有元素决定全局堆栈顺序（包括边界、背景、文本节点、等等）是极度复杂的，并且远远超越了本文讲述的范围（再一次，参考文档）。但是我们最大的目的，就是基本了解这个顺序，它能够在很长一段时间内帮助我们提高CSS开发的可预测性。所以，让我们打破顺序，分解为独立的堆栈上下文。

在同样的堆栈上下文里的堆栈顺序

下面是几条基本的规则，来决定在一个单独的堆栈上下文里的堆栈顺序（从后向前）：

堆栈上下文的根元素
定位元素（和他们的子元素）带着负数的z-index值（高的值被堆叠在低值的前面；相同值的元素按照在HTML中出现的顺序堆叠）
非定位元素（按照在HTML中出现的顺序排序）
定位元素（和他们的子元素）带着auto的z-index值（按照在HTML中出现的顺序排序）
定位元素（和他们的子元素）带着正z-index值（高的值被堆叠在低值的前面；相同值的元素按照在HTML中出现的顺序堆叠）

注解：定位元素带有负的z-index值被在一个堆栈上下文中先排序，这意味着他们出现在所有其他元素的后面。正因如此，它使一个元素出现在自己父元素之后成为可能，这以前通常是不可能的事。当然，这局限于它的父元素与它在同一个堆栈上下文，并且不是那个堆栈上下文的根元素。一个伟大的例子如Nicolas Gallagher的CSS 不用图像降低阴影。

全局堆栈顺序

坚定的理解了为什么／什么时候新的堆栈上下文形成，同时掌握了同一个堆栈上下文的堆栈顺序，现在让你来找出一个特定元素将出现在全局堆栈里的顺序不是那么糟糕了吧？

避免错误的关键是能够发现新的堆栈上下文什么时候形成。如果你对一个元素设置了z-index值为十亿但是它没有在堆栈顺序中向前移动，检查一下它的祖先树，看是否它的父节点形成了堆栈上下文。如果是那样的话，你的z-index值即使有十亿也不会给你带来好处。

包扎救治

回到之前的原始问题，我已经重建了这个HTML的结构，添加了一些注释，每一个标签指明了它在堆栈里的顺序。这个顺序是假设最初的CSS。

<div><!-- 1 -->
  <span><!-- 6 --></span>
</div>
<div><!-- 2 -->
  <span><!-- 4 --><span>
</div>
<div><!-- 3 -->
  <span><!-- 5 --></span>
</div>

当我们添加opacity到第一个<div>，堆栈顺序像下面这样改变：

<div><!-- 1 -->
  <span><!-- 1.1 --></span>
</div>
<div><!-- 2 -->
  <span><!-- 4 --><span>
</div>
<div><!-- 3 -->
  <span><!-- 5 --></span>
</div>

span.red曾经的顺序是6，但现在改为1.1。我已经使用“.”来标注一个新的上下文环境的形成。span.red现在是那个新的上下文的第一个元素。

现在似乎更清晰了，关于为什么红色盒子跑到其他盒子的后面。原始的例子只包含两个堆栈上下文，根元素和形成span.red的那个。当我们添加 opacity到span.red的父节点上，形成了第三个堆栈上下文，结果显示在span.red上的z-index值只能应用在那个新的堆栈上下文中。因为第一个<div>（应用opacity的那个）和它的兄弟元素没有position或者z-index值的集合，他们的堆栈顺序是由他们在HTML里的源顺序决定的，也就是说第一个<div>，和它的堆栈上下文里的所有元素被第二个和第三个<div>元素分离。

来源：关于z-index的那些事儿

您或许也会喜欢：

解决 Debian 非特权用户无法使用 ifconfig

Sun, 02 Oct 2011 10:48:38 CST

如何配置让 Debian 非特权用户也可以使用 ifconfig 。

ifconfig 在 /sbin 目录下，新建一个用户时， Debian 默认从 /etc/skel/ 复制配置文件，

/sbin 并不在 $PATH 中，所以导致默认非特权用户无法使用 ifconfig （terminal 会提示说找不到该命令）。

解决方法：

在 ~/.profile 修改 $PATH 环境变量，在末尾加上一行

export PATH=$PATH:/sbin

或者，修改 /etc/skel/.profile，这个会影响所有新创建的用户。

（完）

iBooks 电子书制作实验报告

Fri, 27 Jan 2012 12:02:25 CST

这是一篇约自@ 木遥的 iBooks 电子书制作简易教程，苹果在一周前的纽约发布会发出了“我们要重新发明课本”的雄心。同时，还发布了 iBooks 平台上的原创电子书编辑工具 iBooks Author，我们相信它会继续繁荣 iOS 平台上的中文内容，无疑，这样的实例教程也会让更多人受益。木遥的博客在这，感谢他给我们带来一手的教程。

众所周知，苹果刚刚推出了电子教材。个人认为，这是苹果在电子书领域一次真正的冲锋。凡是对美国教材市场有所了解的人，都会明白这个功能远胜纸版，而价格不到其平均教材四分之一的革命性突破有多么重要。浏览过 iBookstore 上已经上架的样本教材后，我更加坚信它会带来改变。

另一个没有那么醒目，但是在我看来也很有趣的功能是免费的电子书制作软件 iBooks Author。这个软件允许作者自己把自己的作品拿到 iBook Store 上销售，任何人都可以制作自己写的书然后绕过出版社去直接获利。虽然用这个软件做出来的效果没有那些制作精良的电子教材漂亮，但是已经足够了。

前些日子，我花了两个小时，把自己上学期的教学讲义做成了电子书，选择免费发放的模式上传到了 iBook Store 里。七天之后，这本书成功上线。事实上，我到第四天才明白之前上传的资料有误，修正了屏幕截图的尺寸不对的问题，所以真正苹果公司用来审核处理的时间只有三天。（这本书的下载链接在此，供各位参考，我选择的是全世界范围都允许下载，不过此刻还是只有美国账号才能下载，原因未明。）

我本来以为自己是第一个这么做的中国人，但事实上至少有另一个人比我更早吃到了螃蟹。不过，我们两人的情形类似，都是因为手上此前已经积累好了素材，所以才会这么快做出电子书。我的素材是大量的 keynote 文件，而另外这位朋友是 Adobe InDesign 文件。可见，把已有的素材移植到 iBooks Author 下是很方便和高效的事情。

制作过程很简单，任何熟悉 iWorks 界面的人都可以马上上手，如果手边有 iPad（一代即可），还可以随时上传到 iPad 上查看效果，遗憾的是不能在电脑上查看效果。

制作完成后有两种主要的导出方式，一种是存为 .ibooks 文件，这是一种可以直接用 itunes 导入 iPad 的文件。如果做出来的电子书只需要在小范围流传，存成这种文件然后分享出去就可以了。如果希望上载到 ibookstore，就需要把它存成专门用来上传到 ibookstore 的文件格式 .itmsp 文件。除此之外，我们也可以导出为 .pdf 文件——但这就失去制作 iBooks 电子书的意义了。

要打开和处理 .itmsp 这种文件格式，则需要另一个软件 iTunes Producer，它可以在 itunesconnect 网站中的 Deliver Your Content 栏目中下载。iTunes Producer 可以把 .itmsp 文件上传到 ibookstore 的远程服务器。上传过程也是向导式的，并不复杂，只需要填写一些书籍信息，准备几张屏幕截图就行了。上传完成后，就可以在 itunesconnect 上查看自己上传的书籍的状态。再此后，就是苹果远程服务器的事情了。

需要说明的是，苹果并不会通知书籍上线的时间，要用户每天通过 iTunes 自己搜索自己的书来看有没有成功上线。

当然，iBooks 电子书的制作还远谈不上完善，比如电子书制作软件可选择的模板实在太少，纯粹是傻瓜式，而自定义格式也不算方便，稍微复杂一点的功能就无法设置，和 iWeb 用起来感觉差不多。不过如果一本书只有最简单的文字和图像，也没有复杂的排版，那这个软件基本上足够了。

另一个显而易见的缺陷是这个电子书只能在苹果的设备上使用，这当然是苹果的策略，但是我不知道这种把别家平板一概拒之门外的做法是不是能够长久。这是赢者通吃的策略，但是如果输了，也就会输得很惨。还有一个不那么可喜的消息是一代 iPad 在打开拥有各种炫目效果的教材时显得颇为吃力，我的 iPad 甚至因此死机了一次。

制作 iBooks 电子书从我开始研究整个流程到成功上线总共也没花多长时间，而且几乎不需要任何高端技术知识储备，大多数人都能胜任。不清楚国内是否能顺利使用 iBooks Author 提供的各项服务，但是我强烈建议各位自己试试看，把自己写过的小说剧本之类做成电子书（当然小心不要盗用版权）是一件简单而便捷的事情，也许从明天开始，它们就能带来收入了呢。

注：@ eastecho 也有一个 iBooks 电子书制作教程，可以查看他的博客。

Wilson Wang

信奉科技和潮流的可能，相信激情和坚持的力量。

邮箱 Twitter 新浪微博 Google+

爱范儿 · Beats of Bits | 原文链接 · 9 热评 · 新浪微博 · 订阅全文 · Google+ · #ifanrlive · 加入爱范社区！

CSSDeck：CSS 技巧满天飞

Mon, 16 Jan 2012 23:09:22 CST

各位苦B的Web前端设计师们，我相信这个站会 在一定程度上拯救你，这就是 CSSDeck。CSSDeck 的前身原名是 eCSSpert。

这个站上有好多有创意的设计，而且都相当漂亮，用在你的网站上肯定会非常吸引人，比如说这个 CSS Ubuntu Logo、 HTML5 Logo、导航栏、漂亮的按钮[1] [2]………………哇哇哇，真是美不胜收，目不暇接啊！更好的是，源代码非常清晰地摆在 demo 下面，要用起来也是手到擒来，真是方便极了！这些东西不仅是开源的，更好的是——没有许可证限制（这个好像没多大必要的说）。

当然，如果你有好的 CSS 设计，也可以投递到此站上！

呃，不厚道一下，最后再说内幕，其实 CSSDeck 的真实目的是 “在线 CSS 沙盒”，也就是你在线写好代码在线看到效果，顺便可以分享一下代码，所以说，这也算副功能催生出大产业吧！（和 Flickr 一样，不知道的童鞋自己 Google 了解一下这个典故）

注：eCSSpert 这个词原来的样子是 expert，专家的意思。所以这个词意思应该是“CSS专家”。

网站性能优化工具大全

Wed, 17 Oct 2012 21:36:51 CST

网站性能优化（WPO）已经成为一个非常重要的话题了，越来越多的互联网公司开始有WPO的职位，而相关技能也是对前端开发工程师的重要技术要求之一。国外大牛Steve Souders在参加 WebPerfDays London期间，收集了大量常用的网站性能优化工具，这里和大家分享下。

常用的网站性能优化工具：

WebPagetest
Cuzillion
Chrome Dev Tools
Speed Tracer
Performance Analyzer (收费)
SPOF-O-Matic, 3PO for YSlow
Wireshark
PageSpeed, YSlow
dynaTrace Ajax Edition 和 SpeedoftheWeb
HTTP Archive
关键路径浏览—— PageSpeed Insights的一部分
PhantomJS
移动设备同步调试： Weinre, jsconsole.com, Opera Dragonfly, Chrome for Android
Apache Bench (ab)
Show Slow
Browserscope
Tilt, DOM Monster
Mobileperf Bookmarklet
chrome://net-internals
Redbot
SpriteMe
Boomerang, Episodes
wget, telnet
Wappalyzer
Netalyzer
Shunra NetworkCatcher Express
Packet Flight
Fiddler, Charles
CSS Lint, JSLint
GTMetrix
Torbit Insight
Grunt.js
sitespeed.io
SSL Server Test
SPDY 指示器 ( Firefox, Chrome), SPDYCheck.org
KITE, MITE
Compass (CSS)
Soke, Seige, Tsung (加载测试)
SpeedCheckr

当然这些不是全部，还有很多工具是目前所缺少的：

当分析一个网站时需要一个计算last-modified时间和今天之间的平均变化并和过期时间来对比的工具。目的是告诉开发者过期时间和资源变化频率是否一致。这个功能可以和PageSpeed、YSlow和HTTP Archive整合。
检测一个网站是否在可以使用同步片段(async snippet)的时候使用阻塞的片段(blocking snippet)。比如PagaSpeed实现了但是只能用于Google Analytics。
诊断渲染被延迟的根本原因的工具。
更容易的可视的DNS TTLs的工具，内置到Chrome Dev Tools或者WebPagetest。
爬去文件目录并优化图片的后端工具。候选： Yeoman, Wesley.
Safari(Mobile)中的导航计时。
更好的检测和诊断内存泄露的工具。
网页计时规范，计算Javascript、CSS、reflow等环节花费的时间。
可视、可修改网络存储(LocalStorage、APP cache等)的工具。
可视、可清理DNS缓存的工具。
专注于性能建议的JSLint版本。
对比两个HAR文件的工具。

总结：

网站性能优化除了雅虎的34条黄金准则之外，分析和优化工具是必备的，希望这些工具能够对大家有所帮助。但是性能优化并不仅仅这些，还有很多技术是实践中积累发现的，比如元彦同学最近整理的几篇：

恩，如果你有一些好的前端性能优化经验或者工具，欢迎分享给我们。

文章整理自： WebPerfDays: Performance Tools

非响应式设计的viewport

Wed, 17 Oct 2012 21:09:54 CST

整理自： Viewport Meta Tag For Non-Responsive Design
中文原文：非响应式设计的viewport
请尊重版权，转载请注明来源，多谢～～

大家已经非常熟悉响应式网页设计了吧，但是我们通常会忽略很多旧的没有采用响应式设计的网站，其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化。

通用viewport

对于响应式网站，大家通常都会这样定义：

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

非响应式网站

但是你或许会知道，iPhone（包括android）通常会把网站默认以980px的宽度来渲染，这就是说，如果你没有定义viewport，如果你的网站的宽度大于980或者小于980，iPhone会把它默认以980px的窗口来缩放和渲染，这样就会有各种问题。

比如：

前面图片是没有设置viewport的情况，页面宽度大于980px的部分会被截断，后面的是设置了实际宽度(1024)以后的表现，嗯，只是简单的把页面的viewport设置成实际宽度：

1	<meta name="viewport" content="width=1024">

页面实际宽度过小的时候也会有问题：

容器的宽度是700px，所以会默认留白，而设置了viewport之后，页面就看起来酥服多了：

1	<meta name="viewport" content="width=720"><pre lang="css" line="1">

常见错误

1	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

一个很常见的错误是，很多人常常使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染而不会自动缩放，用户需要手动移动页面或者缩放。 最差的是和initial-scale=1同时使用user-scalable=no或maximum-scale=1，这将使你的网站不能被缩放——用户不能放大/缩小网页来看到全部的内容。所以，请记住：如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。

Photoshop中改进ios设计流程的30个诀窍

Mon, 04 Feb 2013 14:55:24 CST

设计是一个漫长和痛苦的过程，期间可以用点技巧来减少痛苦， 30+ tips to improve your iOS design workflow (in Photoshop)一文总结31个实用的技巧可以借鉴和学习。

————–以下为译文——————-

在本文中我（英文原作者）总结了在photoshop中设计ios软件时所遵守的方法。许多的技巧适用于一般的UI设计。注意：文中所提到的快捷键针对于Windows；Mac 用户可，Cmd对应Crtl键，Opt对应Alt键。

1.保持尺寸为偶数

你是首先针对Retina屏幕设计然后再对标准分辨率的进行缩小是吧？为了在标准分辨率下像素仍然保持完美的呈现，你需要保证大小和距离为偶数。具体的做法便是：基于2ps的网格设计。在 编辑（Edit）〉首选项（Preference）〉参考线、网格和切片（Cuides,Grids&Slices）。更改 网格线间隔（Gridline）和子网格（Subdivisions）来是使得网格间隔线为2px。例如：设置网格线间隔为64px，子网格为32。

2.混合模式只使用正常模式

在设置直接处于其他元素上面的图层效果时，混合模式只使用正常（例如：在混合选项中 投影和外发光）。使用其他的混合模式或许在Photoshop中看起来很好，但是也可能会在在保存为PNG格式之后出现不良的效果。

3.更方便的改变渐变颜色

想要更改渐变按钮的色调（色相），而不必每次都去改变渐变的起始颜色值？下面介绍两个方法，均可达到完全一样的效果。

方法1：在渐变图层混合选项中使用颜色叠加

创建一个 渐变图层。起始颜色设为浅灰和深灰色，也可以在之后调整。
为按钮创建 矢量蒙版。
复制矢量蒙版粘贴到渐变图层（ 选择矢量蒙版〉Ctrll+ C〉选择渐变图层〉Ctrl + V）
设置 图层〉矢量蒙版〉当前路径
设置渐变图层 混合选项〉颜色叠加更改混合模式为颜色。
现在便可以只是更改此处的颜色来更改渐变。

方法2：在纯色图层使用渐变叠加

用你想要的颜色，创建一个纯色的图层。
和方法1相同。
和方法1相同。
和方法1相同。
在纯色模版混合选项〉渐变叠加，设置混合模式为明度（Luminosity）。
现在只是改变纯色模版的颜色即可改变渐变。

译者注：上述使用了矢量蒙版，其实使用剪切蒙版也可达到相应的效果，个人认为还简单点。

4.更多的使用径向渐变

在导航条上叠加径向渐变层，让导航栏变得更为有趣。

方法1：径向渐变工具

在导航条图层上方 新建图层。
复制导航条图层的矢量蒙版到刚才新建的图层(按住 Ctrl + Alt同时按鼠标左键拖动矢量蒙版到新图层)。
选择 径向渐变工具（设置渐变为中心白色末端全透明）。
在图层中从中心到边缘绘制渐变。
改变图层混合模式为 叠加（Overlay）设置 不透明度为25%。

方法2：斜面和浮雕

同样也可以使用图层混合选项中的斜面和浮雕。可以按下图所示来设置。通过调整设置来达到你想要的效果。通常调整的越为精妙效果也越为好看。

5.更多的使用阴影变形

Photoshop中阴影（任何的其他图层效果）和它对应图层可以分开。这样便可独立操作阴影。

选择 图层〉图层样式〉创建图层（译者注：必须在对图层使用了混合选项中的效果才能使用此命令，此步目的即是将效果和图层分离）。
转换图层为智能对象（在混合选项中勾选透明形状图层。右击图层〉选择转换为智能对象），这样你就可以在之后编辑效果。
Ctrl + T 选择变形。
点击和拖动手柄来改变形状。手柄不会对其网格，但可以使用网格作为参考对其他的手柄进行重复同样的拖动。
往上轻移图层直到像下图效果。

6.使用内发光更容易的增加精细的纹理

像下图所示通过内发光快速的增加纹理。

7.隐藏路径

Photoshop cs6中比较恼人的一点是当你选中一个形状图层的时候形状的路径会显示出来，并且在你操作该图层的时候路径会一直存在，譬如在更改图层混合选项的时候。你和使用Ctrl + H 来隐藏所有的辅助工具（路径、网格线和参考线），当然你可以按 Ctrl + Shift + H 只隐藏路径。

8.使用对齐像素网格来使形状像素完美

这算是cs6中最好的改进之一了。按 Ctrl + K 打开首选选面板选择将 矢量工具与变换与像素网格对其（Snap Vector Tools and Transforms to Pixel Grid）勾选。在cs5中只有形状（没有变换）与像素网格对齐。像下图示在首选项〉常规中勾选最下面一项。

cs5中只有形状对齐

9.使用电子表格来计算缩略图的尺寸

想要创建一个iPad app来展示大量的缩略图？使用电子表格来计算缩略图的尺寸和之间的尺寸。电子表格实时的计算并展示了在改变一个尺寸之后对其他元素的影响以及它们是否适用于屏幕。下载（ iPad-Grid-Calculator）我在创建iPad app使用创建的微软Excel 表格（文件中包含了4个表格，6×6, 5×5, 4×4 和3×3）。

10.自动导出资源文件

如果你必须创建图片资源，选择 文件（File）〉脚本(Script)〉将图层导出到文件（Export Layers to Files）。

11.图层复制的时避免给图层名添加后缀同时避免图层效果得到扩张

对每次复制图层都在图层名称后面添加“副本（copy）”的字眼很是恼火？同时恼火的是每次复制粘贴图层效果的时候图层效果就会扩张？可以图层面板选项中将两者关闭。

12.以15°的步长旋转

在自由旋转的时候，可以按住 Shift以15°的倍数旋转。

13.保存样式

保存多次使用的样式到样式面板，这样免去每次都复制粘贴的麻烦。

14.在打开的两个文件之间移动图层

按下 V选择移动工具〉选中想要移动的图层〉在当前 文件内（不是图层面板） 左击不松开〉拖动光标到目标文件的名称标签上〉当文件切换之后将 光标拖动到文件内，然后 松开鼠标。

15.设置全局光为90°

当光源在90°的时候高光、阴影以及其他图层效果看起来最好。为了避免重复设置，在混合选项中（斜面和浮雕、内发光和阴影）勾选 使用全局光。或者选择 图层〉图层样式〉使用全局光。

16.在你创建图层的时候你便对它进行命名

在将设计文档发给开发人员之前对图层命名是件令人头痛的事情。因此不妨形成在创建图层的同时就给它命名的习惯。

17.使用自定义快捷键

注意哪些工具和任务是你最常用到的，为它们创建快捷键。例如，如果你发现将一个文件发送给开发人员处理的时候你需要重命名大量的图层，我使用功能键F2作为快捷键。

18.使用径向渐变

使用径向渐变有时候会看起来有点扁平。试试用径向渐变作为背景，还可以用内发光来强调。

19.努力做到非破坏的编辑

通过使用智能对象和调整图层来做到一个非破坏性的工作流程。当你发发现自己需要重复编辑同样东西的时候这会帮你减少很多痛苦。

20.在对文件作重大改变之前备份文件

当你发现保存了自己不想要的变化，或者在撤销更改之前意外地关闭了文件（译者注：这样会导致丢失历史记录），备份文件会大大减少你的痛苦。

21.使用快捷键给形状图层和文本填色

你可能知道使用 Alt/Ctrl + Delete 给图层或者选区填充前景色/背景色。它同样适用于 形状图层和文本。

22.Photoshop的怪异之处——投影和内阴影尺寸

还记得诀窍1中关于保证尺寸和图层效果为偶数像素吗？你或许在对所有的都设置了偶数之后，仍然迷惑于为什么按钮的高度仍然是奇数。罪魁祸首便是 Photoshop的怪异之处，投影增加了尺寸。投影的大小（size）值设置为1px或者2px，投影将会产生同样的尺寸，如下图所示。

23.使用智能参考线来进行更为完美的对齐

来让Photoshop对你的元素进行智能对齐。在 视图（View）〉显示（Show）〉智能参考线（Smart Guides）处打开。一旦你使用过智能参考线，你会再也离不开它了。

24.使用图层复合在同一文件中展示不同的显示屏

你是将app的所有屏幕都创建在一个PSD中然后对图层可视进行打开和关闭来查看？此时图层复合（Layer Comps）就可帮助解决这个问题。勾选 窗口（Window）〉图层复合（Layer Comps）即可打开图层复合面板。在你新建app屏幕的时候你可以通过 单击面板底部创建新的图层复合按钮来创建一个新的图层复合。这个图层复合面板包含了所有图层的可见性和位置作为一个屏幕（译者注：可以理解为一个快照）。现在你便可以在同样的图层上更改其可见性和位置来作为下一个屏幕并把它保存为另一个图层复合。

通过使用同样的工具去创建不同的屏幕，这样就保证了文件数量和大小达到了最小。并且，你和开发人员可以简单的通过单击图层复合名称前面的小盒子或者点击面板底部的 往前/往后箭头来循环切换图层复合来展示不同的屏幕。

25.在设备上预览你的设计

你的设计桌面设备上看起来很好，但是当你放到真正的设备上或许会暴漏问题，因此，保证经常的在显示器上预览你的设计。对Mac来说有像LiveView、Scala Preview等工具，对Windows来则有 WiFileSync和 Photoshop Display。我使用免费的Polkast，它允许你在IOS设备上通过wifi预览你桌面设备上的文件。

26.保持icon设计的一致性

在icon的选用上要保证其大小和风格一致。可以阅读 Why consistency is important这篇文章。

27.给客户发送全尺寸的预览图

客户许愿在他们的设备上常看设计。因此，可以考虑给他们一个全尺寸的PNG设计组合。

28.避免过于像素完美的线框图

不要在线框图软件上浪费时间去创建一个漂亮的线框图。我发现客户一旦理解这会节省时间他们便更倾向于审查草图而不是漂亮的线框图。向客户解释为什么减少线框图会节省项目的整体时间，他们一旦同意便发给他们草图的照片。同时别忘了让草图尽量易读。

29.首先设计Retina屏然后再缩小到标准尺寸

是从1x（译者注：指设备像素比）放大到2x的顺序还是2x缩小到1x现在仍有争论。1x大小尺寸的手机将会在未来几年逐渐淘汰并且将来只会剩下Retina屏的。因此最好是从Retina屏来开始设计，同时你可以早早的便在你的设计中添加针对Retina屏的特殊细节。

30.创建一个icon库

任何时候你针对工具栏或者标签栏创建了矢量的icon，保存一份icon（保存完好无损的尺寸以便于编辑）到单独的PSD文件中，这样，你便不必下次再使用这些icon时到处寻找了，这样也就形成了我 ikonic项目的基础。

31.使用一个批量重命名的软件

使用批量重命名软件来给文件增加或者移除@2x。我使用免费的 Bulk Rename Utility。

原文： http://radesign.in/30-tips-to-improve-your-ios-design-workflow-in-photoshop/
译文： http://share.9ikblog.com/archives/30-tips-to-improve-your-ios-design-workflow-in-photoshop.html
译者：小刀
请尊重版权，转载请注明来源！

媒体查询与http请求

Thu, 24 May 2012 08:00:06 CST

Jason Grigsby发表了篇文章，《 CSS Media Query for Mobile is Fool’s Gold》对媒体查询(media query)吐槽，大意是在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源，然后写了一些测试用例测试一些可用方法。然后Tim Kadlec写了篇《 Media Query & Asset Downloading Results》，用js自动化的测试了Jason Grigsby的用例。

本文主要整理自Tim的这篇文章。我们来看看到底会不会浪费资源，并寻找下最优的方案。

直接看结果吧~~

测试一：img标签

运行测试

本测试尝试通过对img标签的父级元素使用display:none来隐藏图片。HTML和CSS代码如下：

1
2
3

<div id="test1">
	<img src="images/test1.png" alt="" />
</div>

1
2
3

@media all and (max-width: 600px) {
	#test1 { display:none; }
}

测试结果

如果有一种应该100%避免的隐藏图片的方法，那就是display:none。它基本上是没有用的。貌似Opera Mobile和Opera mini不会下载图片，而其它浏览器都会下载。Opera可以比较好的控制资源的下载，对于用户看不到的内容，它不会预先下载。

浏览器	请求图片
Android 2.1+	请求
Blackberry (6.0+)	请求
Chrome (4.1)+	请求
Chrome Mobile	请求
Fennec (10.0+)	请求
Firefox (3.6+)	请求
IE	请求
iOS (4.26+)	请求
Kindle (3.0)	请求
Opera (11.6+)	请求
Opera Mini (6.5+)	不请求
Opera Mobile (11.5)	不请求
RockMelt	请求
Safari (4+)	请求

结论

很简单：不要这样用。

测试二：背景图片display:none

运行测试

在本例中，div被设置了background-image。如果屏幕宽度小于600px，div就被设置为display:none。HTML和CSS代码如下：

1	<div id="test2"></div>

#test2 {
	background-image:url('images/test2.png');
	width:200px;
	height:75px;
}
@media all and (max-width: 600px) {
	#test2 {display:none;}
}

测试结果

结果和测试一一样：除了Opera mini和Opera Mobile和 Firefox，所有浏览器都会下载图片。

浏览器	请求图片
Android 2.1+	请求
Blackberry (6.0+)	请求
Chrome (4.1)+	请求
Chrome Mobile	请求
Fennec (10.0+)	请求
Firefox (3.6+)	不请求
IE	请求
iOS (4.26+)	请求
Kindle (3.0)	请求
Opera (11.6+)	请求
Opera Mini (6.5+)	不请求
Opera Mobile (11.5)	不请求
RockMelt	请求
Safari (4+)	请求
Silk	请求

结论

同样：不要这样做。不过，像后面其它的测试，有其它的方法可以隐藏背景图片同时避免多余请求。

测试三：背景图片的父级元素被设置为display:none

运行测试

本测试中，对一个div标签设置背景图片，然后对其父元素(也是个div)在浏览器宽度小于600px时设置display:none。HTML和CSS代码如下：

1
2
3

<div id="test3">
	<div></div>
</div>

#test3 div {
	background-image:url('images/test3.png');
	width:200px;
	height:75px;
}
@media all and (max-width: 600px) {
	#test3 {
		display:none;
	}
}

测试结果

表面上，这个测试貌似和测试二没太明显的区别，但是结论是这个方法是比较靠谱的。。。

浏览器	请求图片
Android 2.1+	不请求
Blackberry (6.0+)	不请求
Chrome (16+)	不请求
Chrome Mobile	不请求
Fennec (10.0+)	请求
Firefox (3.6+)	不请求
IE 9+	不请求
iOS (4.26+)	不请求
Kindle (3.0)	不请求
Opera (11.6+)	不请求
Opera Mini (6.5+)	不请求
Opera Mobile (11.5)	不请求
Safari (4+)	不请求

结论

这个方法不错。除了不太成熟的Fennec，其它浏览器都不请求不必要显示的图片。

测试四：背景图片层叠

运行测试

本测试中，一个div被设置了背景图片。如果浏览器宽度小于600px，该div会被给到另一个背景图片。该测试用来检测是否两个图片都会被请求，还是只请求需要的。HTML和CSS代码如下：

1	<div id="test4"></div>

#test4 {
	background-image:url('images/test4-desktop.png');
	width:200px;
	height:75px;
}
@media all and (max-width: 600px) {
	#test4 {
		background-image:url('images/test4-mobile.png');
	}
}

测试结果

比设置display:none好一些，这种方法的结果有点儿乱：

浏览器	同时请求
Android 2.1-3.0?	请求
Android 4.0	不请求
Blackberry 6.0	请求
Blackberry 7.0	不请求
Chrome (16+)	不请求
Chrome Mobile	不请求
Fennec (10.0+)	请求
Firefox (3.6+)	不请求
IE 9+	不请求
iOS (4.26+)	不请求
Kindle (3.0)	请求
Opera (11.6+)	不请求
Opera Mini (6.5+)	不请求
Opera Mobile (11.5)	不请求
Safari 4.0	请求
Safari 5.0+	不请求

结论

我会避免使用这种方法。尽管环境在改善，但是在Android市场中占主导地位的Android 2.x版本依然会像Fennec和Kindle一样同时下载两个图片。三者中，尤其因为Android(的碎片化)，我会推荐寻找别的方案。

测试五：大背景图片被设置min-width

运行测试

本测试中，一个div元素在浏览器宽度大于601px时被设置一个背景图片，然后在浏览器宽度小于600px时被设置为另一个背景图片。HTML和CSS代码如下：

1	<div id="test5"></div>

@media all and (min-width: 601px) {
	#test5 {
		background-image:url('images/test5-desktop.png');
		width:200px;
		height:75px;
	}
}
@media all and (max-width: 600px) {
	#test5 {
		background-image:url('images/test5-mobile.png');
		width:200px;
		height:75px;
	}
}

测试结果

这种方案好一点儿：

浏览器	同时请求
Android 2.1+	不请求
Blackberry (6.0+)	不请求
Chrome (16+)	不请求
Chrome Mobile	不请求
Fennec (10.0+)	请求
Firefox (3.6+)	不请求
IE 9+	不请求
iOS (4.26+)	不请求
Kindle (3.0)	不请求
Opera (11.6+)	不请求
Opera Mini (6.5+)	不请求
Opera Mobile (11.5)	不请求
Safari (4+)	不请求

结论

这次更多的浏览器一起玩了。但是，Fennec一如既往得不能自已。Android 2.x比较怪异。它会同时请求两个图片——但只有在屏幕宽度大于600px匹配到min-width时才这样。这种行为貌似在Android 3.0版本中被改进了。这是件诡异的事情，我很好奇它为什么会这样。其实，有个好消息。Jason Grigsby 说他的对本例的测试结果和我的不太一样。所以我又在一些Android 2.x机器上跑了一下这个测试。结论是，我最初的测试结果不太正确，Android 2.x表现很好，我最初测试的那个平台有问题。这不仅仅对于开发者来说是个好消息，对我本人来说更是恢复了对人类的信心。。。。。。。

但是这依然不够，你将需要对IE8以下浏览器提供替代方案，那些版本的浏览器不支持media query，所以没有图片会被显示。当然，这个问题可以用条件注释来简单的兼容一下。

测试六：背景图片display:none(max-device-width)

运行测试

本测试和测试二类似，但是使用了max-device-width来替代max-width。HTML和CSS代码如下：

1	<div id="test6"></div>

#test6 {
	background-image:url('images/test6.png');
	width:200px;
	height:75px;
}
@media all and (max-device-width: 600px) {
	#test6 {
		display:none;
	}
}

结论

好吧，不用浪费时间了，这个测试结果和测试二的基本一致。

测试七：层叠覆盖高分辨率

运行测试

最后一个测试，是为了new ipad提供的，它使用了retina屏幕，这样它就要使用更高分辨率的图片了。

本例中，一个div被给到一个背景图片。然后，通过使用min-device-pixel-ratio属性，如果比例大于1.5，一个新的背景图片将会被用到。

HTML和CSS代码如下：

1	<div id="test7"></div>

#test7 {
	background-image:url('images/test7-lowres.png');
	width:200px;
	height:75px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
	#test7 {
		background-image:url('images/test7-highres.png');
		width:200px;
		height:75px;
	}
}

测试结果

浏览器	同时请求
Android 2.1-3.0?	请求
Android 4.0	不请求
Blackberry 6.0	不请求
Blackberry 7.0	不请求
Chrome (16+)	不请求
Chrome Mobile	不请求
Fennec (10.0+)	不请求
Firefox (3.6+)	不请求
IE 9+	不请求
iOS (4.26+)	不请求
Kindle (3.0)	不请求
Opera (11.6+)	不请求
Opera Mini (6.5+)	不请求
Opera Mobile (11.5)	不请求
Safari 4.0+	不请求

结论

为了安全，这个方案可以多测试一些。看起来这种方法在绝大多数情况下是可用的。但是不幸的是，貌似Android 2.x会同时下载两个图片 如果设备像素比大于或等于1.5时(或者你在media query中设置的别的任何值)。所以，在本例中，如果你使用了一个高分辨率的Android 2.x的设备，会比较苦逼。。。

好消息是，到目前位置，我还没听说有那一款Android 2.x的设备的屏幕比例超过1.5.所以如果你的项目面向使用retina屏幕的ios设备，你可以将min-device-pixel-ratio设置到2或者更高，这样会比较安全一点儿。。。

关于响应式设计的思考

媒体查询现在最大的用处就是响应式设计了，神飞翻译这篇文章也是因为最近在思考响应式设计的效率问题。通过这些测试结果，我们在实现响应式设计的网站时，最好先处理移动设备，然后再向高分辨率设备升级。然后使用图片等外部资源的选择器，一定要写到媒体查询中去。

反馈

如果你觉得这些测试结果有任何错误的地方，欢迎在评论中提出，然后这些测试用例Tim都在 GitHub上开源了，感兴趣的话可以fork下。。。

响应式网页设计

Wed, 02 Nov 2011 00:36:11 CST

这个话题最近很火爆，我也一直在关注，响应式网页设计和移动互联网密切相关，并因移动终端的丰富和普及而兴盛，并且是一个颇具争议的话题，我今天将和大家探讨下。

上周写了个简单的ppt在组内大概介绍了下，感兴趣的话可以先看下这个PPT。

移动互联网的现状和未来

在说到这个话题前，我们先看下网页设计和前端开发的现状：

全球有超过53亿手机用户（包括传统手机）
国内3G用户超过1亿
iPhone4手机在2010年出货量超过3000万部；
iPhone 4S上市前3天卖掉400万部；
Android手机每天激活超过50万部；
iPad出货量已经超过2.5亿部；
预计到2015年，移动互联网的数据流量将超越桌面端的流量。
。。。

嗯，大家也许已经开始注意到，自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临，现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么，什么是响应式网页设计？

响应式网页设计是 Ethan Marcotte在去年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的！

或许大家之前会注意到，有很多知名网站都推出了iPhone或针对智能手机的专门网站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗？来让网站在每个设备中得到相应的视觉风格和操作体验？

这样势必就要增加很多的工作量，而且很多还是重复的。

我们在做页面的时候，一般很强调模块化的概念，我们要求一个合格的模块要能够“可扩展、无侵染”，它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配，而不用为每个设备单独做个子网站！

但是，产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样，甚至要像素还原——WTF！不同的浏览器本身的功能、行为和处理方式都不一样，为什么要表现完全一样？！

let the browser flow…

怎么做？

其实响应式网页的实现很简单，都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的，而它们自带的浏览器都是基于webkit内核，所以我们可以完全使用viewport属性和media query技术实现网站的响应性：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

后面的initial-scale表示初始缩放，maximum-scale表示最大缩放比例，1意味着不能进行缩放。

/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

当然依靠屏幕宽度来进行适配是最简单的方法，media query有很多参数可以使用比如orientation、aspect-ratio等，不太了解的可以查看这篇详细的介绍。

其实，media query是响应式网页设计中被用到最多的技术。

fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格)，前几年960.gs很流行，但是随着屏幕分辨率的普遍提升，它已经不太适合当前需求了，于是最近几年fluid grid开始逐渐多了起来，这种技术其实也很简单，只是将格栅的单位由px变成%，用百分比来控制页面每列的宽度，从而实现宽度的自适应。

使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面的完整展现和基本功能。这也是一种不错的方法。

flex box

flex box是css3中的新技术，它很强大，可以实现很多我们之前无法想象的自适应布局。

有时我们希望网站能够以webapp的外观呈现给手机用户，flexbox是个不二的选择。

比如，要实现这样的简单结构：

它很像一个app的结构，头部和底部固定，中间高度自适应，用flexbox可以简单实现：

.flex_wrap{
	height:100%;
	display: box;  
	display: -moz-box;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex_bd{
	box-flex: 1;
	-moz-box-flex: 1; 
	-webkit-box-flex:1;
	background:#E7E7E7;
	overflow-y:auto;
}
.flex_hd{
	background:#16364C;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-weight:700;
	font-family:14px;
}
.flex_ft{
	background:green;
	height:30px;
	line-height:30px;
	text-align:right;
}

HTML代码：

<div class="flex_wrap">
	<div class="flex_hd">前端观察</div>
	<div class="flex_bd">
		<p>这里是主内容区</p>
		<p>这里是主内容区</p>
	</div>
	<div class="flex_ft">
		<a href="http://www.qianduan.net/about" title="关于我们">关于我们</a>
		<a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a>
		<a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a>
	</div>
</div>

虽然这里还会有点儿问题，比如主内容区域内容太多会被隐藏掉，因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性，但是这个问题还是很好解决的，比如在里面嵌套一个子容器，用js来给定个高度并使用定位来实现滚动条从而完整展示内容，或者直接使用iscroll等js库来实现。好消息是，iOS5中safari开始支持overflow:scroll了。

不足之处

如果你关注网站性能之类的话，可能已经发现了一些问题：

加载很多不需要的资源，比如多余的图片和样式内容
带宽限制
移动终端的内存和CPU限制
图片大小和屏幕大小不匹配

嗯，任何一个方案都不是完美的，但也不会很糟糕。下面我们会提到一些可行的优化方案：

HTML5本地存储

对于支持HTML5 appcache /manifest特性的浏览器，我们可以将一些不常改动的静态资源存储到本地，比如css文件，css中用到的图片，以及一些js文件等：

CACHE MANIFEST
NETWORK:
/*
 
CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

然后将文件保存为manifest格式，并在HTML标签中引入即可：

<html manifest="responsive.manifest">

这样，用户在第一次访问的时候会慢一点儿，但是后续访问会很快，3G网络中也能为用户节省带宽。

移动设备优先

一种新的设计流程是，先为移动设备设计界面，然后将PC端作为一个扩展。

这样做的好处是显而易见的，移动终端不会加载多余的资源，也不会因为PC端的样式而重绘页面，同时也不会影响PC端的表现。

流体图片(fluid image)

页面中的图片有时会比手机/平板的屏幕（viewport）宽，这样会将页面容器撑开，但是移动浏览器又不能scroll，结果图片被切掉一部分，然后还会有一部分内容被隐藏掉，用户看不到。

解决这个问题的方法很简单，将img的最大宽度设置成100%就可以了：

img{max-width:100%}

嗯，这里的前提是，没有给img标签设置宽度和高度，否则显示会有问题。另外不建议直接设置width=”100%”，因为会把小图拉大，模糊显示。

同理，video标签和iframe标签的宽度也可以这样做，而且最好不要使用iframe，宽度是个问题，性能也是一个方面吧。

CSS3 image

这个方法有些惊艳

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：

<img src="image.jpg" 
	data-src-600px="image-600px.jpg" 
	data-src-800px="image-800px.jpg" alt="">

然后用media query来动态赋值：

@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

当然，这种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等。

pre标签

有的网站，比如，像前端观察这样的技术博客，会用pre来显示源代码，而浏览器对pre标签默认设置white-space:pre，这样，代码就不会换行，从而撑开子容器，造成内容被隐藏的问题：

右边的文字被隐藏掉了。

解决方法很简单：

pre{
	white-space:pre-wrap
	word-wrap: break-word;
	word-break: break-all;/*如果要兼容IE，可以加上这句，连续字母断行的问题伤不起啊。。。。*/
}

当然，不只是pre标签，关键是white-space和word-break属性的值。

嗯，主要的技术和技巧其实就这些，大家不会陌生。下面是一些比较有用的工具什么的：

响应式网页设计工具与资源

国外在响应式网页设计上已经走的很远了，已经有很多工具和资源供我们参考和使用：

CSS 框架

实用工具

Respond.js，让IE6-8支持meidia query
Responsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现
Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器
Media Query Bookmarklet 顾名思义，这是一个关于media query的书签工具
ProtoFluid 在线查看和调试网站对移动终端兼容性的工具，很赞
ScreenFly 和ProtoFluid类似
responsivepx 更直观的测试网站对不同分辨率的适配性

争论和总结

响应式网页设计被提出以来，争论就不断，其实核心问题只有两个个：太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面，而后者纠结响应式网站不像手机网站。

我的想法是，具体问题具体分析，比如，强内容的网站，完全可以尝试响应式网站，而重视觉和功能的网站，则可以尝试建立一个独立的移动网站。

另外，显然，响应式网页设计的大部分技术，是可以用在WebApp开发中的。

最后，欢迎各种吐槽、各种批评、各种建议、各种发散、以及各种新观点新技术～～欢迎发表评论～～

PS：如果你手上有android/iPhone，可以直接访问下前端观察。 :)

参考文章：

Linux 文件结构

Thu, 06 Oct 2011 23:23:32 CST

想了解 Linux 文件系统树形结构，却又不愿翻阅 FHS 的朋友，可以参考 skill2die4 制作的这张简图。

此图算是 FHS 的图形化版本，简要的说明了 Linux 系统中各个目录的用途及层级关系，适合初学者使用参考。不过其中较新的如 /run 目录并未在其中出现。

朝内下载链接

进阶阅读材料： FHS

消息来源

配置 Emacs 的小技巧

Sun, 09 Oct 2011 18:05:29 CST

前几天……大约在冬季吧，我发现了一个惊天小技巧，当然，是关于 Emacs 的……看到标题你也应该猜到

这事要从很久以前说起，我很久以前用 Vim ，很久很久以前用 Emacs ，很久很久很久以前用 Vim ……你知道的，我也不知道我到底在多久以前用 Emacs 或者 Vim…… 后来，出了个叫 Vimim 的东东，输入法再也不用担心我的切换了。然后，我就舒坦了一段时间……然而，Vim 并不太适合折腾，它的脚本语言也让我想起了恐怖的 shell script ……可能它执行效率挺高，但是，你知道的，咱们的口号是“不求效率，但求折腾！”

相对而言，Elisp 的S表达式看起来要舒服多了，但是 Emacs 的快捷键让我的手指很纠结……注意，这里的纠结表示的是动作，而不是心情。你可以参考这个例句：像麻花一样纠结。

回归正题，这个惊天小技巧就是，把 Caps Lock 和 Control 两个键换过来！我指的是软方法，就是不抠键的情况下互换；相对应的，也有硬方法……先别忙找螺丝刀……买 Emacs 脚踏板先

好了，现在正式讲关于“配置”的小技巧。

Emacs 的启动文件，大家通常用 dotmacs ，也就是 .emacs _emacs 。如果你把配置文件分成多个文件，一般会把它放到一个文件夹里，通过 dotemacs 文件读取。这样，你就多了一个文件还有一个夹，是不是挺郁闷？用 windows 的同学，哪儿凉快到哪儿去找 dotemacs

其实在 site-lisp 目录下的 site-start.el 文件作用也差不多，不过它是全局的，而且在 dotemacs 之前启动。

这是我的 site-start.el 文件

(setq

init-start (time-to-seconds)

init-dir (expand-file-name (if (eq system-type 'windows-nt) (concat exec-directory "../init.emacs/") "~/init.emacs/"))

init-files (mapc 'load (directory-files init-dir t "^[0-9].*el$"))

init-stop (time-to-seconds) )

(add-hook 'emacs-startup-hook '(lambda () (message "load %d init file , spend %g seconds ; startup spend %g seconds" (length init-files) (- init-stop init-start) (- (time-to-seconds) init-start))))

这个文件里面，用 (time-to-seconds) 获得三次时间，然后计算出加载启动文件所用时间和整个启动过程所用时间。

"(mapc 'load (directory-files init-dir t "^[0-9].*el$"))" load 所有 init-dir 目录下数字开头且 el 结尾的文件，我设置的 init-dir 在 linux 下为 "~/init.emacs/" ……特别感人的一点是，如果没有 init-dir ，它也不会报错。

你可以修改文件名前面的数字，按照指定的顺序读取。禁用已经在序列中的文件的话，可以再给它加个 bak 后缀，在 dired 模式下按 b 就可以了……如果按 b 没有反应的话，在 04_dired.el 文件中添加：

(autoload 'dired-update-file-line "dired-aux" "" t nil)
(add-hook 'dired-mode-hook (lambda ()
  (local-set-key "b"
              '(lambda () "rename file to .bak"
                 (interactive)
                 (let* (buffer-read-only
                        (suffix "bak")
                        (from-file (dired-get-filename))
                        (new-file 
                         (if (string-equal suffix (file-name-extension from-file))
                             (file-name-sans-extension from-file)
                           (concat from-file "." suffix))))
                   (rename-file from-file new-file)
                   (dired-update-file-line new-file)
                   )))
 ))

我的 init-dir 目录里第一个文件是 00_func.el ，定义一些函数，每个函数下面的注释为示例

;; * add-to-list-x
(defun add-to-list-x (LIST-VAR LIST)
  (mapc (lambda(ELEMENT) (add-to-list LIST-VAR ELEMENT)) LIST))

;(add-to-list-x 'load-path (list ;;如果列表中的元素不需要求值，可以用 '( ; (expand-file-name "misc/" init-dir) ; (expand-file-name "color-theme/" init-dir) ;))

;; * require-extensions (defun require-extensions (action lst) (mapcar (lambda(ext) (funcall action ext)) lst))

;(require-extensions 'require ; '( ; cedet ; eieio ; semantic ; srecode ; ede ; speedbar ; ecb ;))

;; * define-key-s (defun define-key-s (keymap key-defs) "(define-key-s map '(key def key def ...))" (let ((map (cond ((eq keymap 0) (current-global-map)) ((eq keymap 1) (current-local-map)) (t keymap)))) (while (cadr key-defs) (let* ((key (pop key-defs)) (def (pop key-defs))) (define-key map (eval `(kbd ,key)) def) ))))

;(define-key-s 0 '( ;; 0 global-set-key ; 1 local-set-key ; mode map ;;;第一个参数为 1 的时候，可能有问题。懒得管了，不推荐用这个参数，可以指定具体的 mode map ; "C-x C-j" ido-execute-extended-command
; "C-o" set-mark-command
; "C-w" backward-kill-word-or-kill-region
; "C-c C-v" view-mode
; "C-." redo
; "C-;" toggle-comment-region
;))

(defun def-key-s (keymap &rest key-defs) "(def-key-s map key 'def key 'def ...)" (define-key-s keymap key-defs) )

;;;把 define-key-s 包装了一下，参数不需要是列表。但是命令前面需要加单引号，一般定义的内容较少的时候用 ;(def-key-s view-mode-map ; "p" 'View-scroll-page-backward ; "n" 'View-scroll-page-forward ; "k" 'View-scroll-line-backward ; "j" 'View-scroll-line-forward ; "f" 'View-search-last-regexp-forward ; "b" 'View-search-last-regexp-backward ; )

;; * backward-kill-word-or-kill-region ;; 选择区域的时候删除区域，否则回删单词 (defun backward-kill-word-or-kill-region () (interactive) (if mark-active (call-interactively 'kill-region) (call-interactively 'backward-kill-word)))

;; * toggle-comment-region (defun toggle-comment-region (beg end &optional n) "... " (interactive "r\nP") (if n (comment-region beg end (prefix-numeric-value n)) (save-excursion (goto-char beg) (beginning-of-line) ;; skip blank lines (skip-chars-forward " \t\n") (if (looking-at (concat "[ \t]*$" (regexp-quote comment-start) "+$")) (uncomment-region beg end) (comment-region beg end)))))

我的 01init.el 文件

;; * load-path
(add-to-list-x 'load-path (list
                           init-dir
                           (expand-file-name "misc/" init-dir)
                           (expand-file-name "_color-theme/" init-dir)
))

;; * working dir (setq sand-box (expand-file-name "_sandbox/" init-dir)) (cd sand-box)

;; * 打开特定文件时使用 View 模式 (add-hook 'find-file-hook '(lambda () (when (and (file-exists-p (buffer-file-name)) ; 已存在文件 (member (file-name-extension (buffer-name)) '("el" "bak" "txt"))) ; 匹配扩展名 (view-mode) )))

;; * 文件编码 (setq buffer-file-coding-system 'utf-8-unix)

;; * 开启服务器模式 ;(server-start)

02_setting.el 文件里是一些乱七八糟的设置，我完全相信你可以弄的比我还要乱……自由发挥吧

值得注意的是 setq setq-default 都可以设定多组值，很多同学可能不知道

(setq-default                   ; 使用空格缩进 
        indent-tabs-mode nil    ; t 使用 TAB 作格式化字符  nil 使用空格作格式化字符
        tab-always-indent nil
        tab-width 4)

可以指定某字符的类型，比如 _ [ ] 指定为单词的一部分；具体情况 C-h s

(modify-syntax-entry ?_ "w")
(modify-syntax-entry ?[ "w")
(modify-syntax-entry ?] "w")

03_outline.el

;; * 设定主题
(set-display-table-slot
 standard-display-table
 'selective-display
 (let ((face-offset (* (face-id 'shadow) (lsh 1 22))))
   (vconcat (mapcar (lambda (c) (+ face-offset c)) " [...] "))))

如果你想自定义 outline 的层级关系，比如 *** 是 * 的上一级，可以定义 outline-heading-alist ，不过里面的东西必须是 outline-regexp 中定义过了的

(add-hook 'diff-mode-hook
      (function (lambda ()
              (setq outline-regexp "diff\|@@\|\{10,\}")
              (setq outline-heading-alist
                '(("diff" . 1) ("@@" . 2) ("\{10,\}" . 2))
                )
              (outline-minor-mode)
;             (hide-body)
              (view-mode)
              )))

22_color.el 缓冲区两侧的指示条里面显示的连行符号，就是那些弯曲的小箭头，一般都比较晃眼，可以设置成和缓冲区背景一样的颜色 (set-face-attribute 'fringe nil :foreground (background-color-at-point))

54_gui.el 我的标题栏设置，因为我老是分不清我用的到底是 emacs 23 还是 24 ，所以把版本也显示在标题栏了

       (defun fname-title-string ()
         "Return the file name of current buffer, using ~ if under home directory"
         (let
             ((fname (or
                      (buffer-file-name (current-buffer))
                      (buffer-name))))
           (when (string-match (getenv "HOME") fname)
             (setq fname (replace-match "~" t t fname))        )
           fname))

    (setq frame-title-format             
                    '(:eval (concat (user-login-name) "@" (system-name) "[Emacs" 
                     (nth 2 (split-string (version))) "]  " (fname-title-string))))

60_tabbar.el tabbar group 这个扩展挺变态的，你知道的，我也不知道该不该用它。下面是我的分组规则，18禁

(defun substring-buffer-name (m n &optional x)
  "使用 substring 截取文件名时，在 buffer-name 后面加几个字符，
   防止文件名过短引发错误"
  (substring (concat
              (if x
                  (buffer-file-name)
                (buffer-name))
              (make-string n ?*))
             m n))

(defun tabbar-buffer-groups () "Return the list of group names the current buffer belongs to. Return a list of one element based on major mode." (list (cond ; ((or (get-buffer-process (current-buffer)) ; ;; Check if the major mode derives from comint-mode' or ; ;;compilation-mode'. ; (tabbar-buffer-mode-derived-p ; major-mode '(comint-mode compilation-mode))) ; "Process")

((member (buffer-name)
         '("*scratch*" "*Messages*"))
 "Common")

((memq major-mode
       '(help-mode apropos-mode Info-mode Man-mode))
 "Help")

((eq major-mode 'dired-mode)
 "Dired")

((memq major-mode
       '(rmail-mode
         rmail-edit-mode vm-summary-mode vm-mode mail-mode
         mh-letter-mode mh-show-mode mh-folder-mode
         gnus-summary-mode message-mode gnus-group-mode
         gnus-article-mode score-mode gnus-browse-killed-mode))
 "Mail")

((string-equal "*vc-" (substring-buffer-name 0 4))
 "VC-mode Buffer")

((string-equal "*sdcv*" (substring-buffer-name 0 6))
 "User Buffer")

((string-equal "*" (substring-buffer-name 0 1))
 "Emacs Buffer")

;;;; ((or (string-equal "emacs" (substring-buffer-name 1 6)) (string-equal init-dir (substring-buffer-name 0 (length init-dir) t))) "Configuration") ;;;; (t "User Buffer") )))

(setq tabbar-buffer-groups-function 'tabbar-buffer-groups)

OK，差不多了，有什么我忘了说的……就当我没说好了

由 diddlebug 开始，数字助理的进化

Fri, 14 Oct 2011 18:33:37 CST

08 年，我开始对时间管理感兴趣，于是积极研究各种能够合理地利用自己的时间、提升自己的工作效率的方法与技巧，在选择自己的数字设备上，我也有过自己的考量。经过反复斟酌，还有各位同好的大力推荐下，最终我选择了 Palm treo 650 作为我的数字助理。

在接下来 2 年的使用里，我都十分满意 Palm，它拥有众多优异的提升效率的应用，实实在在地帮助我提高了效率，减轻压力。

在众多效率应用里面，我印象最深刻的是 diddlebug，它提供了一个涂鸦版，当脑海中灵光一闪的时候，可以直接在屏幕上写，相当于一个便利贴，比键盘输入要更加直接快捷；此外，它提供了一个独特的“抄送”的功能，能够把各种收集到的想法直接抄送到不同的应用中去，比如日历、联络簿、日程等等。举例来说，有人约我第二天的中午 11 点打电话，我会在 diddlebug 上写“某人、11 点、电话”然后，在晚上的时候，打开 diddlebug 利用抄送功能，把这条记录抄送到日历中去。

“涂鸦”加“抄送”让 diddlebug 成为相当方便的“收集箱”，任何事情直接写上去，然后通过抄送就能归纳到相应的地方。diddlebug 方便了人们的生活，让我明白智能设备对人们的意义。

然而，diddlebug 也不是没有缺点，所有涂鸦都必须转录为文字，才能抄送到不同的地方去。每次我把涂鸦变成文字的时候，我都非常希望这个过程能够自动完成，但在当时，我看不到任何可以这样改变的希望，除非我有能力配置一个“秘书”。

如今，三年过去，iPhone 4S 即将出台，内置的“语音秘书” Siri 纷纷获得人们的好评，它能够智能分析人们的语音命令，直接把提供命令的结果。于是我们见到如此经典的问答：

我：我想自杀；
Siri：我找到了四家精神健康服务机构，其中有三家在你附近。

从评测中，我了解到 Siri 是一个比 diddlebug 更加方便，更加贴近人心的功能。

在我们之前的评测中，尽管 Siri 还有一些限制，比如不能网联络簿里面新增联系人，但是 Siri 还是很方便。与上文提到的 diddlebug 相比，Siri 做到了两点：

采用语音输入，比“手写”更加快捷方便。
所想即所得，自动化的信息处理过程。任何效率应用，都无法摆脱重复抄录记录，分类存放的问题，而在 Siri 上这个问题基本得到解决，比如说，我对 iPhone 4S 说：“明天上午 9 点，我要买菜”，Siri 就自动的把这个命令变成日程上的预定事项。以前处理事物的时候，还专门需要一个“收集箱”，比如 diddlebug 这类应用，但有了 Siri 这些都不需要了，因为只要你想到，你就能在手机上完成处理过程。

07 年，《时代》周刊把最佳发明奖颁给 iPhone 时说的：“这是真正意义上的掌上便携式电脑，是第一个能够配得上这个名字的设备。”有了 Siri，iPhone 不仅仅是掌上电脑这么简单，而是真正意义上的个人数字助理。

未来，你还需要秘书吗？

陈一斌

组织过软件汉化，写过时间管理文章，研究过个人知识管理。关注科技的发展，创投资讯、移动互联网。

邮箱 Twitter Facebook 新浪微博

原创的新鲜趣味，@乐活制造，点击关注。

iOS5Tips – 关于iOS 5的小技巧

Thu, 13 Oct 2011 10:25:31 CST

在锁屏状态下如果收到信息，在信息上滑动可以直接解锁屏幕并进到信息页面。 #iOS5Tips

是不是觉得5G空间太少了？iOS 5的iCloud备份可以在iOS设备里的设置=》iCloud=》存储与备份=》管理存储空间=》选择你的备份=》备份选项里选择备份哪些应用产生的数据。#iOS5Tips

iOS 5 改进了相机功能。拍照界面按音量+键拍照，向右滑动屏幕可直接进入相册浏览刚拍的照片，浏览照片时可按右上角的编辑对照片进行编辑。#iOS5Tips

iMessage不是一个单独的App，你可以在设置 => 短信里开启iMessage，iMessage账号可以是你的手机号码也可以是你的Apple id，iMessage直接在短信内发送，如果对方已经开启了iMessage则发送时按钮会变成蓝色。 #iOS5Tips

锁屏状态下双击Home键可显示快捷拍照键，进入拍照界面音量键可当快门键。#iOS5Tips

如果在iOS5的设置里你找不到个人热点了，在设置＞通用＞还原＞还原一下网络设置个人热点就回来了。#iOS5Tips

一个人可以拥有多个iCloud账户并可以同时使用，但是iCloud主账户只能有一个，可以随意设置任意一个iCloud账户为主账户，主账户才有包括备份在内的所有功能，其他iCloud将只有mail，日历和联系人同步功能。#iOS5Tips

如果你发现你iOS设备上的Newsstand无法点击Store，只要把iOS设备插上数据线和电脑的iTunes同步一次就可以点击使用了。#iOS5Tips

iOS 5手势功能在设置=》通用=》辅助功能里有个AssistiveTouch，开启AssistiveTouch后会在屏幕上浮现一个小圆球，点击小圆球会有一些手势操作，可以代替Home键返回主菜单。 #iOS5Tips

由@Ksky整理，请注明原文来自何必呢

如何查找 Linux 死机原因？

Fri, 28 Oct 2011 16:13:52 CST

Linux 内核虽然号称“不死族”，几乎不会崩溃或者死机，但是特殊情况下，还是有一定几率会宕机的。转载自 deleak.com

因为 Linux 广泛用于生产环境，所以每一次宕机都会引起相当大的损失。它 Uptime 达到上百天也许你习以为常，但是只要 Down 十几秒，就会立即急的满头大汗。真的很难以想象证交所宕机会怎么样，也许全国股民会闹翻天。所以我们需要一些小技巧来查找死机的原因，从而避免死机或者内核崩溃。（话说 windows 天天蓝屏也没感觉呀 :-o 难道已经麻木了 :oops: ）

请注意：以下方法可能不适用于 Server，因为桌面环境和 Server 还是有很大区别的。

X Crash

事实上 Linux 内核很少出错，平常我们所遇到的“死机”都是 X 无响应造成的错觉。那 X 没响应了应该怎么处理呢？

通常套路是 Ctrl + Alt +F7 (F8) 切换到某个 tty，然后用 root 登陆，执行 top 查看吃资源最多的程序，然后使用 pkill/kill/killall 等命令杀死该程序。或使用组合键 Ctrl + Alt + Backspace 重启 X （黑日白月注：这个快捷键组合在最新的 Ubuntu 和 Fedora 中关闭）。

如果偶遇切换 tty 失败或者没响应，可以试着使用 SSH 登陆此电脑，然后再杀死程序。也许只是 X 不响应，而内核和 SSH daemon 仍然工作，故此可以实施此法。

arch 配置 SSH daemon

万一 X 不给力，各种方法试了无效，又没有办法通过 SSH 登陆到此 pc，那怎么办呢？别着急，我们还有万能的 “reisub” 大法。不过在启用前先要激活内核 sysrq 功能 (via) 。系统启动时执行： echo "1" > /proc/sys/Kernel/sysrq 或者修改 /etc/sysctl.conf 文件，设置 Kernel.sysrq = 1。系统异常时依次按下 Alt+sysrq+{reisub} ，然后系统会自动重启。（有关 sysrq 请看：Linux 死机了怎么办？）

不建议长按 Power 按键强制关机，有可能损坏硬件或者丢失数据，甚至导致磁盘坏道！

X 崩溃而内核完好常见的症状有：程序无响应，花屏，鼠标移动指针无动作，键盘输入没有识别等。但后台的音乐可以正常播放，或者键盘 Caps Lock/Num Lock/Scroll Lock 按键按后对应 LED 可以正常亮灭。遇到此种情况可以使用上述方法重启 X 或者电脑即可恢复正常。

Application Crash

这个比较常见，但是也是相当难解决的。因为 Linux 上的应用软件大部分都是开源的，所以可能没有超高的稳定性。也许由于库的缺少或者版本错误，或者代码的 Bug，都有可能导致程序出现异常。

一般遇到这种问题，建议检查配置文件是否正确，对配置文件的错误修改可能导致程序的运行失败。如果您确信配置文件没有错误但是程序仍然异常，可以尝试把配置文件删除（注意备份！），然后再次打开软件尝试。通常程序的配置文件在：

~/.[APPNAME]
~/.config/[APPNAME]
/etc/[APPNAME].conf

或者有可能是库的错误，您可以在终端输入程序名或者程序路径运行程序，根据终端的提示信息除错。由于导致程序崩溃的可能性多种多样，在此不能一一列举，所以建议您根据出错信息去 google 搜索并找到解决方案。

Kernel Panic

X 的问题还好办，可是如果 RPWT 碰到 Kernel Panic，那可真是上天无路入地无门，撞墙的心都有 :evil: 。

一般引起 Kernel Panic 的原因很多，但是都比较罕见。例如硬件问题 (irq confilct, bad block, high temperature)，软件问题（错误的 mod，内核的 Bug），或者文件系统不支持（没有内建 ext4 支持却挂载 ext4 的 root 分区），硬件的变动（如添加/更换内存，不支持架构的cpu），错误的驱动。

Kernel Panic 的表现形式也是多种多样：启动失败，不正常的长时间 io 操作，键盘灯的不正常频闪，wireless 等指示灯错误闪烁，无响应（请区别 xorg crash 情况），彻底锁死，黑屏，reisub 大法不灵等等。

一般情况下，秉承 KISS 原则的 Linux 内核，会尽力解决一切错误并正常运行，如果遇到极端情况发生 Panic，它会尽可能把所有相关信息显示在屏幕上——至于多少，别奢求，Kernel 已经尽力了。

因为 Kernel Panic 是一种很极端的情况，有的人可能自从使用 Linux 就没有遇到过。所以我们要收集所有相关的信息来解决问题。发生错误后的各种输出是最直接的最有效的（ Dump 在 tty。请关闭 x）。因为 Kernel 已经崩溃，不一定能找到完整的 Log。您可以根据以下线索尝试：

/var/log/messages —— rp 爆发的时候，也许会记录下很多相关信息。按照时间戳查找。
回溯操作 —— 回忆 Kernel Panic 之前所做的所有事，并回滚。（如安装了某个程序，可以在 /var/log/pacman.log 找到安装日志）
Dump 信息 —— 屏幕输出信息是系统最后的“遗言”，请使用数码相机或者笔纸记录。（tty only）

接下来就应该根据错误发生的可能原因进行排除。将内核启动参数化为最简形式，不应附加任何不必要参数，并 BIOS 中禁用掉所有无关硬件。相关日志文件：

/var/log/boot
/var/log/xorg 所有相关（仅参考）
/var/log/messages

如果可以，您应该记录下所有屏幕输出信息，并查看 /var/log/messages 。

可能遇到的问题，和解决方法：

irq conflict （还好我没碰到），可以尝试从 bios 修改硬件irq，或者升级 bios，都不生效就换电脑或者禁用冲突硬件；
bad balock，尝试修复坏道或者屏蔽坏道分区，建议更换磁盘；
io error，同上，也有可能是没有内建文件系统支持的原因，重新编译内核或者找最新版的内核安装；
mod，删除可能导致错误的内核模块（如 vboxdrv），涉及到的命令有：
- lsmod: 列出已载入的模块
- modprobe: 载入模块（黑日白月注：在这里和其他命令对应的为 insmod + depmod 比较好，modprobe 更类似于 XXXmod 系列命令的升级整合版本。）
- rmmod: 移除内核中模块，效果等同于 modprobe -r
- modinfo: 显示模块相关信息
driver，a卡或者n卡驱动，也容易造成问题；
硬件本身的问题导致，建议检测硬件可用性和兼容性（例如 memtest+）；
内核 bug，如果您有能力，建议使用 KDB (Kernel debugger) 排错，或者重新编译内核；
不负责任的告诉您，最好的方法是换 windows :mrgreen:

为了方便作者集中回复，请前往原文评论

消息来源

[技巧] iOS 5 省电小窍门

Mon, 17 Oct 2011 08:41:52 CST

升级到 iOS 5 后，电池续航是许多人关心的问题。你是否发现电池消耗得太快了呢？这里列出了一些能够省电的小窍门，或许能够帮助你延长 iOS 5 的待机时间。

iOS 5 如何省电

还原网络设置：进入“设置” – 通用 – 还原 – 还原网络设置
禁用蓝牙：设置 – 通用 – 蓝牙 – 关闭
禁用不需要的应用通知：设置 – 通知 – 关掉不需要的通知项目
禁用不需要的位置服务：设置 – 定位服务 – 关闭不必要的定位服务项目
禁用时区设置：设置 – 定位服务 – 系统服务 – 关闭“设置时区”
禁用 Ping：设置 – 通用 – 访问限制 – 关闭“Ping”
禁用诊断和用量报告：设置 – 通用 – 关于本机 – 诊断和用量 – 选择“不发送”

此外，还可以尝试进入设置 – 邮件、通讯录、日历 – 账户（进入某个邮件账户）- 删除账户。删除后，按照上边第一条的方法还原网络设置，然后重新启动一次设备，再把邮件账户添加回来。

当然，最好的办法是将手机完全重置。具体而言，就是在升级或恢复 iOS 5 系统后，不要恢复之前的备份，而是设置为一台新手机。这种全新安装的方式能够让待机时间恢复正常，小编自己的体会是在系统服务几乎全开的情况下，待机一上午掉电 5%（iPhone 3GS）。不过在准备进行升级或恢复 iOS 5 之前，一定不要忘记备份你的所有资料：通讯录（可以使用第三方应用进行备份）、备忘录、语音备忘录、重要短信、文档（Pages、DocsToGo等）之类的数据，因为要设置成为新手机，所以这些项目都必须手动逐个恢复。

via Cydiahelp

相关文章：
[技巧] iOS 5 和 iCloud：和家人共用一个 Apple ID	[技巧] 在 iOS 5 上创建相册并管理照片	把 iOS 5 中的"报刊杂志(Newsstand)"放到文件夹里	苹果 iOS 5 限制本地存储引来开发者不满	解决 iOS 5 更新中出现的 3002、3200、3194、3004 错误
无觅

灵异 Emacs 之画皮

Wed, 19 Oct 2011 06:04:50 CST

标题起得有点大了!

好吧，这回真的是一个小技巧，我以本站站长的名誉担保……如果你觉得我撒谎了，你可以把站长找出来随意处置……(神秘的声音：偶们是无辜的，找 Kardinal 就行)

话说比较讲究的同学，都喜欢给 emacs 设置个漂亮的字体，一般都是矢量字体，大黑二黑三黑啥的，就不点名了，你懂的……

可是这样也有麻烦的时候，比如说我最近比较爱玩的 eshell ，或者版本控制的 diff 界面之类的……总之，有些情况下，用点阵字体又比较舒服点

虽然说使用其它编辑器的时候我从来没有奢求过使用两种以上的字体，可谁让咱用的是 emacs 呢

很简单，M-x buffer-face-mode ，成功了吧，字体变了吧，狠过瘾吧，这是一个小技巧吧……我代表站长感谢大家捧场!!!

再次感谢您继续观看，我也继续了

(set-face-attribute 'variable-pitch nil :font "宋体-12" :fontset "fontset-standard")

现在 M-x buffer-face-mode，就能看到真正在效果了， buffer-face 默认使用 variable-pitch 在设置，所还不用直接设置 buffer-face。

(dolist (hook '(
                eshell-mode-hook
                help-mode-hook
                magit-mode-hook
                dired-mode-hook
                vc-mode-line-hook
                diff-mode-hook 
                ))
  (add-hook hook (lambda () (my-buffer-face-mode))))

给你需要的模式添加 buffer-face-mode ，这里有一个限制条件是，这个模式得有 hook 。有些模式就没有。比如我想给 buffer-face-mode 的 hook 里再写两句调整行距，却发现没有这个 hook ……

所以，你应该注意到了，上面那段最后一个词是 my-buffer-face-mode ，而不是 buffer-face-mode 。把其它的一些设置写在这面就行了

(defun my-buffer-face-mode()
  (buffer-face-mode)
  (make-local-variable 'line-spacing)
  (setq line-spacing 4)
  )

line-spacing 是一个全局变量，得先把它设置成本地变量，不然所有的 buffer 都受影响。凡是全局变量都如此设置，比如 scroll margin 之类的

ok，如果你是一个追求完美的人，要给每一种模式都设置一种字体，也不是没有办法

;先弄一张皮
(make-face 'your-face)
;倒饬下这张皮
(set-face-attribute 'your-face nil :font "宋体-10")

然后 (buffer-face-set 'your-face)，就可以了，加在 hook 哪的都可以

利用 ifttt 服务备份自己的数字人生

Fri, 16 Sep 2011 17:00:29 CST

以前我们写过一篇《通过互联网认识自己》，讲述的是《华尔街日报》的外联编辑 Zachary M. Seward 如何通过互联网总结自己过去一年的生活，值得一提的是 Zach 没有自己主动去记录，但通过 Foursquare、Google、last.fm、Twitter 等等所提供的统计工具，却能够清晰的反映出他过去一年的情况。那么有没有一种工具，能够把我们分散在网络各个服务上的生活片段自动备份起来，让过去的日子不至于遗失？网络大，有办法。

ifttt 正好是一个捏合各个互联网服务的“自动化工具”，官方诠释它的名字是 “if this then that” 的缩写。ifttt 的功能在于能够针对某些互联网服务设定条件，如果达到条件，就做出下一步行动，它可以做到：一旦收藏一条 Tweet 就自动发到 Evernote；一旦上传一张图片到 Flickr 就同步到 Facebook 上；一旦在 Google Reader 里面给一篇文章加星标就自动分享到 Tumblr 轻博客上……因此我们要做的，就是利用 ifttt，把网络上的各种生活碎片，都备份到 Dropbox 中去——“if xxx then save it to dropbox”。

一般来说，定制这样的任务，需要进入 ifttt 的 Channl 页面，激活你想捏合的服务，然后进入 Task 页面，进行定制。由于 ifttt 提供一个方便的功能，只要有人愿意，可以把自己通过 ifttt 定制的 Task，发布成 Recipe 和别人分享，只要利用别人发布的 Recipe 就可以简单的定制备份自己数字人生的任务。现在 ifttt 上一共有 1246 个 Recipe。

如何备份自己的图片

ifttt 支持 Facebook、Flickr 和 Instagram，想保存自己的图片轨迹到 Dropbox，只要利用如下几个 Recipe：

如何备份自己的 Tweet 和博客文章

ifttt 支持 WordPress、Posterous、Tumblr 和 Twitter 这几个服务。你可以利用以下 Recipe：

把 Tweets 收藏到 Evernote（redwanhuq 创建）
把 Tumblr 发表的文章备份到 Dropbox（caffeinefusion 创建）

如何把文章发送到“稍后阅读” 服务去

ifttt 支持把 Twtter、Google Reader、RSS feed 这些我们平时获取信息的手段，还支持 Instapaper 和 Read It Later 这两个使用范围最广的“稍后阅读”服务。你可以利用以下 Recipe：

把 Google Reader 中加星标的文章发送到 Intapaper 中去（btpayson 创建）
把 Google Reader 中加星标的文章发送到 Read It Later 中去（m3r 创建）
把 Google Reader 中加星标的文章发送到 Evernote 中去（nuochan 创建）
把“最爱”的 Tweet 发送到 Instapaper（jimmaiella 创建）

如何备份把地理签到和状态更新

ifttt 支持三个服务 Foursqare、Facebook 和 Twitter，你可以把这些每日的状态更新同步到 Google 日历中去。你可以利用以下 Recipe：

自动备份 Foursquare 签到到 Google 日历（alexander 创建）
自动同步 Facebook 的状态到 Google 日历（liamegan 创建）

总结

ifttt 是各种互联网服务的“粘合剂”，把不同的服务捏合起来做些很有意思的事。最重要的是 ifttt 可以实现自动化，节省大量的精力。对于我而言，我再也不用拿起手机连上电脑，花上 15 分钟导入导出图片，而只要打开 Dropbox，就可看到今天的美好。

ifttt 的诞生，是互联网的开放性的体现，如果互联网服务都不开“通道” API ，供别人利用的话，ifttt 就失去服务的基础。

via ReadWriteWeb

陈一斌

组织过软件汉化，写过时间管理文章，研究过个人知识管理。关注科技的发展，创投资讯、移动互联网。

邮箱 Twitter Facebook 新浪微博

欢迎加入 ifanr.com 轻量、专注的消息列表，你会喜欢的。:)

三歩让 LibreOffice Writer 拥有精简外观

Sun, 12 Jun 2011 22:46:39 CST

如果您偏好 FocusWriter 一样简洁的界面风格，却又不想失去丰富的文件和格式兼容性，那么可以尝试本文中精简 LibreOffice Writer 的方案。

第一步：关闭标尺和正文边界

菜单栏上“视图” -> 取消“标尺”和“正文边界”

第二步：关闭多余的工具栏

菜单栏上“视图” -> 取消“状态栏”

菜单栏上“视图” -> “工具栏” -> 取消“查找”和“标准”

第三步（可选）：改变配色

菜单栏上“工具” -> “选项” -> 在打开窗口中选择“外观”

主要调整两个配色：“应用程序背景色”和“文档背景色”，更改后记得保存配色方案。

如果您正在使用 Ubuntu 11.04 ，那么还可以安装正在 Beta 期的全局菜单支持(貌似 3.4.0 版本内置了 Unity 全局菜单支持，待求证)。

sudo apt-get install lo-menubar

好了，现在您的 LibreOffice Writer 的界面应该简洁许多了吧？好好码字吧！

文章来源：TechLaze

开发移动版网页的技巧：一个案例

Thu, 31 Mar 2011 12:00:26 CST

在智能手机日益普遍的今天，网页设计必须考虑到小屏幕智能手机的要求。专门开发手机应用自然是一个不错的方案，但是毕竟耗费精力，况且还需要针对不同设备进行开发和维护。

开发移动版网页是另一个不错的选择。这件事情看起来简单，却也有许多细节和门道。Useit 网站最近的一篇文章对手机版网页设计的探讨值得参考。

这篇文章以报道韩国流行明星资讯的网站 allkpop.com 为例。Allkpop 的手机版网页是这样的：

AllKpop 做对了好几件事情

一是内容，Useit 的调查认为手机上的杀手级应用是消耗时间（这个可以探讨）

二是专门的移动版网页，即使有 Opera 这样的浏览器能够为手机优化网页，也不如专门的移动版网页体验更好。

三是自动探测，服务器自动探测用户设备，提供特定页面，而不是为移动网页设置单独的地址。

四是信息可点击区域比较大。

五是标题中关键字在前端，因为标题比较长，这样做能突出重点。

那么，这个网页设计有没有问题呢？以我一个外行人的眼光看，也能发现一些小问题。首先是对空间的利用不好，日期挤占了大部分空间而且是重复出现；其次就是标题下面的分类和标签，字很小，而且对读者意义不大。

我们看看 Useit 对网页是如何进行重新设计的。

首先突出的一点是图片，读图比读文字更直观，尤其是对于一个报道明星新闻的网站。其次是信息量加大：删除了无用的分类和标签，以关键语句为读者展现文章要点，浏览更高效。

Useit 对网页做出的其它改进还包括：

更大的触控空间：原来的文章区块可触控部分比较多，比如标题右上角的下拉三角，触控范围较小，可用性低。改进后整个文章色块都是触控区域，更加适合手持设备。

文章区块间的距离更紧凑：读者无需下拉也能完整浏览最底部文章区块。

完整标题：这样能够展现更多信息以供读者选择。

突出内容：标题中每个明星的姓名都加重突出。

日期做为分界线：节省屏幕空间，更有条理的展示内容。

改进顶部导航栏：原来的导航栏中，分类和搜索都在右上角，容易误触，改进后的页面里分类与搜索拉开了距离，而且分类加上了文字描述，更易发现。

移动设备由于屏幕较小，对于设计的要求往往更高，所谓细微之处见技巧，这个案例足以证明。

设计上的受限越多，你越需要改进用户界面，以提供最优的可用性。移动设备是一个极为受限的设计问题。

Via Useit

内置广告还是直接收费：应用盈利模式探讨

Mon, 25 Apr 2011 08:00:07 CST

应用商店的兴起给开发者带来许多机会。应该如何在应用商店里挖金呢？

那些用业余时间开发免费程序的人值得尊重，但是实际点看，出色的应用往往需要职业的开发者，正如出色的表演往往来自专业的演员。如何通过应用盈利，应该是每个开发者，尤其是独立开发者需要考虑的问题。

应用盈利的两种基本模式是内置广告和直接收费。当然也有“应用内购买”，不过“应用内购买”不是适合所有应用，更多是针对内容消费和游戏类。

内置广告模式一大好处是能吸引较大的用户群体，毕竟免费的东西大家都乐意去尝试。这类应用可能有两种，一种是只有免费（广告）版本。其盈利是以损害用户体验为代价的，而且广告收费与直接收费相比不确定性更多，下载量高不等于盈利。许多用户是不会点击广告的。The Next Web 网站在一篇文章中提到

对于用户来说，似乎广告是不存在代价的，但是看一下 App Store 里以广告支撑的应用就会明白，其代价是美感和可用性。要确保用户在应用的某个部分看到和点击广告，维持应用的整体性和一致感就很难了。

也许大家还记得 Twitter 的 Dickbar 引起的风潮。

另一种是有免费（广告）版本和收费版本。一些应用以免费版本吸引吸引消费者去购买“去除广告的版本”，但是许多人可能忍受广告而不去升级。

广告模式适合那些应用？如何利用该模式最大限度的盈利？这是个复杂的问题，不同应用应该有不同的答案。

那么，应用收费如何盈利呢？据说有一款“I AM RICH ”的应用真的赚到了钱。不过，对于更多的开发者来说，这类闷头碰大运的事情还是不要过度指望。

收费应用要想获得长期增长，一是开发常用的应用，二是做的足够好。这样的应用往往会得到专业人士的评价，很快走红。

以 Tweetbot 为例。人们总是要用 Twitter 的，所以即使已经有很多客户端，开发者仍有机会。The Next Web 网站的这篇文章也提到 Tweetbot 的开发者为何要采用直接收费模式。值得注意的是，开发 Tweetbot 的程序员只有两个。

Paul 很直接的谈到一个事实，他们的应用在设计上不适合以广告支撑的模式。“我们以前的应用没有一个适合广告模式。”Paul 告诉我，“我认为那样可能会损害品牌”。

而且它也足够好，获得了专业人士和用户的一致好评，为两位开发者带来了不错的收入。他们对自己的愿景有清晰的认识。

“我们从第一天就开始盈利了”Haddad 说，“我们有意的不做扩张，以确保我们能够尽量保持最好的质量。这也许不是你经常听得到的答案，但我也不认为我们是个普通的公司。我们期望者推动平台的进步，获得乐趣，有钱付账，而不是变成下一个微软或苹果。”

归根到底，采取何种模式取决于开发者的愿景、应用本身是否适合等诸多因素。一个事实是，游戏往往是具有很强的吸金能力，App Store 的 Top Paid 前几名被《愤怒的小鸟》牢牢占据。但这不意味着所有人都应该去开发游戏，也不是所有的游戏都能达到《愤怒的小鸟》火爆的程度。

对于用户来说，出现更多的 Tweetbot 类的应用是更有意义的事情，而也是苹果/Google 对程序商店排名进行调整，鼓励开发更多日常相关应用的一个原因吧。

By Jim，转载请注明 ifanr 原文链接

© 积木 for 爱范儿: 拇指资讯小众讨论, 2011. | Permalink | 14 comments | Add to del.icio.us
Post tags: App Store, Dickbar, Tweetbot, Twitter

获取 WAN IP

Wed, 07 Sep 2011 13:05:28 CST

命令行下获取 WAN IP 。

如果你在 router 或者 firewall 后面，你直接查询 interface ，拿到可能不是 WAN 的 IP 。

很久很久以前的一个版本，把它们贴到 .bashrc (Bash 专用) 或者 .profile (非 Bash 专用)里面去

alias myip='curl -s www.123cha.com | grep -o "[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}" | head -n 1'

. .bashrc 或者 . .profile 即可生效，输入 myip 就能拿到 WAN IP。

@muzuiget 同学今天提到的另外一个简化版本

curl ifconfig.me

muzuiget 同学说后者有风险可能会被封。我觉得不会，拿个 WAN IP 跟他妈派对有毛关系？

我觉得 ifconfig.me 版本更 pythonic 些，返回 MIME 的是 text/plain，比前一个的 text/html 要快、干净。

csslayer 同学对此文也有贡献。

扩展阅读：获取计算机外网ip的几种写法

（完）

筆記-避免網頁元素被Flash"壓落底"

Tue, 23 Aug 2011 22:42:57 CST

平時寫網頁處理Flash(.swf)的機會不多，今天才發現網頁上的<div> <img>等元素，就算將z-index提高到99，還是永遠被壓在Flash下方。(如下圖左所示，swf檔借自交通部觀光局網站)

從同事身上學到一招: Flash物件有個wmode屬性，設為transparent時，除了可讓Flash背景變透明外，還可以改變其一律浮在任何物件上方的預設行為(參考來源，設為opaque亦可讓Flash參與HTML元素的層次排列)，使其改由z-index決定層次。如上圖右所示，經指定<param name="wmode" value="transparent” />後，z-index=99的半透明<div>就能浮在Flash物件的上方。

以下是測試用的程式範例:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript"

        src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js"></script>

    <style>

        #ref {

            position: absolute; z-index: 99; left: 30px;

            width: 50px; height: 500px;  background-color: #ff6666;

    </style>

    <script>

        $(function () {

            $("#ref").css("opacity", 0.6);

});

    </script>

</head>

<body>

<div id='ref'></div>

<div style="height: 100px">&#160;</div>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

        width="720" height="261" id="941.swf" align="middle">

    <param name="movie" value="http://taiwan.net.tw/images/1A/home1.swf"/>

    <!--[if !IE]>-->

    <object type="application/x-shockwave-flash" data="movie_name.swf"

            width="720" height="261">

        <param name="movie" value="http://taiwan.net.tw/images/1A/home1.swf"/>

    <!--<![endif]-->

    <param name="wmode" value="transparent" />

        <a href="http://www.adobe.com/go/getflash">

<img

src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"

             alt="Get Adobe Flash player"/>

        </a>

    <!--[if !IE]>-->

    </object>

    <!--<![endif]-->

</object>

</body>

</html>

【補充參考】

Flash Object語法: http://kb2.adobe.com/cps/415/tn_4150.html
Flash Object參數: http://kb2.adobe.com/cps/127/tn_12701.html
SWF file ignores stacking order, plays on top of DHTML layers

激活Twitter for Mac的Secret选项

Sat, 20 Aug 2011 11:47:12 CST

在Twitter for Mac更新到2.1.1之后，我发现一个重大情况发生了，原来在《修改Twitter for Mac的RT格式》这篇文章中所采用的方式已经失效了，我只能再一次的手动修改RT，困难啊，杯具啊。不服输我于是去了Google，搜索到了Lucifr的一篇Blog文章《如何激活Twitter for Mac的Secret选项》，于是，我就借过来了。

通过终端激活Secret选项

Lucifr在Blog中建议线关闭Twitter for Mac，再打开终端Terminal，输入下面的两行语句。

defaults write com.twitter.twitter-mac reg.email3 -string “mhtest7@kalleboo.com”

defaults write com.twitter.twitter-mac reg.license3 -string “macheist-ketchup-mini-dolphin-81401475″

然后，再一次开启Twitter for Mac。这时候你就回发现，再Preferences里面，多了一个Secret项。

是不是很兴奋啊，慢一点，高潮还没有到呢。接下来，就让我引导大家进入高潮吧。

通过Secret修改RT方式

之所以费这么大功夫来激活Twitter for Mac的Secret选项，其目的就是为了修改Quote Syntax，也就是RT的方式。

先看没有修改时的样子。

再Secret选项中，有个Quote Syntax，默认是空白的。为了让他变成我习惯的样式，我需要再框内自行输入，内容如下。

RT @{USERNAME}: {TEXT}

按照我这个样子填入，就可以看到传统的RT样式了。

当然，格式是死的，方法是活的，只要你保证了调用函数@{USERNAME}: {TEXT}正确，其她，你想用什么Quote Syntax，就随你意了，开心吧。

无觅猜您也喜欢：
修改Twitter for Mac的RT格式	在Mac上修改hosts登陆Twitter	Droplr for Mac 拖拽即分享
无觅

IT瘾tips推荐

标签？ID？还是CLASS？

1. 多用有语义的标签，少用div和span，避免使用没有class的div和span。

2. 不要滥用class而回避id，该出手时就出手。

3. 尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。

4. 尽量避免表示纯样式的class或id。

最后想说的是……

HTML5 Charset能用吗？

测试环境：

测试用了两种方法：

测试用例——Meta方法：

测试用例——服务器方法：

测试结果：

结论：

IE BUG相关文章集合

Haslayout

Block formatting contexts

IE bug

BUG集合

其他文章

CSS技巧荟萃：了解CSS页面布局和加载流程

介绍

样式CSS

另外一些显示方式

正常Document的加载流程

做一个练习吧！

总结

人人都能用的10条网站易用性技巧

1. 给你的logo添加替代文本

2.添加基本的Landmarks

3.增强focus定义

4.定义必填表单项

5.给你的页面添加一个h1

6.定义表格的表头

7.定义表格描述

8.避免“点击此处”

9.去掉tabindex

10.在线检测一下

您或许也会喜欢：

针对高分辨率屏幕的样式优化

使用媒体查询

JS判断

您或许也会喜欢：

扁平化设计与可访问性

扁平化元素

大字体和小图标

实色与高对比色

高对比色网站及其灰度实例

关于z-index的那些事儿

问题：

挑战：

解决方案：

堆栈顺序

堆栈上下文

用堆栈顺序决定一个元素的位置

在同样的堆栈上下文里的堆栈顺序

全局堆栈顺序

包扎救治

您或许也会喜欢：

解决 Debian 非特权用户无法使用 ifconfig

iBooks 电子书制作实验报告

CSSDeck：CSS 技巧满天飞

Read More:

网站性能优化工具大全

常用的网站性能优化工具：

非响应式设计的viewport

通用viewport

非响应式网站

常见错误

Photoshop中改进ios设计流程的30个诀窍

媒体查询与http请求

测试一：img标签

测试结果

结论

测试二：背景图片display:none

测试结果

结论

测试三：背景图片的父级元素被设置为display:none

测试结果

结论