发表于   |   分类于 ， ，   |  

源网站：Secrets of the Browser Developer Tools
译者：涂鸦码农

目录

阅读全文 »

发表于   |   分类于 ， ，   |  

我看最近微博流行 CSS 居中技术，老外码农争相写相关的文章，一篇赛一篇的长啊，我把几篇归纳总结了一下，算是笔记。
孔乙己曾说：“茴香豆的回字有四种写法”，万一哪天有个面试官问你：“居中一共有几种写法”呢，哈哈，先备着吧~~
各种方法各有利弊，大家自己权衡吧，至少在需要居中时多个思路。

<center>

不建议用了。

text-align:center

在父容器里水平居中 inline 文字，或 inline 元素

vertical-align:middle

垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。

line-height

与 height 联手，垂直居中文字

margin:auto

示例：

1
2
3
4
5
<style>
  #ex2_container { width:200px; background-color:yellow; }
  #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }
</style>
<div id="ex2_container"><div id="ex2_content">Hello World</div></div>

hacks, hacks（小技巧）

有许多 hacks ，负 margin，影子元素 ::before 等。如果你的内容不是固定大小的话，它们大部分是很脆弱的。

translate(-50%,-50%)

用 position 加 translate
translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。

参考文章：居中百分比宽高的元素

示例：

1
2
3
4
5
<style>
  #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }
  #ex3_content { left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; }
</style>
<div id="ex3_container"><div id="ex3_content">Hello World</div></div>

这个技巧相当嚣张，同样适用于没固定大小的内容，min-width，max-height，overflow:scroll 等。

阅读全文 »

发表于   |   分类于   |  

原文：JavaScript Promises
译者：涂鸦码龙

不，我不是要谈论 JavaScript 会解决一切问题的承诺。我甚至也不相信这点;) 我想谈谈几个JavaScript 库（包括 AngularJS，jQuery，Dojo 和 WinJS）用到的约定对象（promise object）的概念。

promise 是处理异步操作的模式。问题是当你开始一个异步操作，操作完成时需要执行一些代码。异步代码非常普遍，大部分的库已经找到了解决方案，传入回调函数。但是，每个库的作法很少有共性。让我们看看 jQuery 的例子：

阅读全文 »

发表于   |   分类于 ， ，   |  

准备工作：

下载：firebuglite 源码

我下载的稳定版

解压源码，找到 firebug-lite/build/chrome-extension 目录，这就是 Chrome 的 firebug-lite 扩展啦。按照常理呢，Chrome 和 Opera 15+ 内核一致，扩展应该直接通用，结果一试，bug 百出啊，跑不起来……

我感觉原因可能是：

  1. Opera extension API 暂时没有 Chrome extension API 支持的多
  2. firebug-lite 的 Chrome 扩展开发的比较早，有些 API 已更新

下面记录移植过程的一些要点：

地址栏输入 opera:opera://extensions 或者 “Ctrl + Shift + E`”打开扩展页，右上角点击“开发者模式”；

点击“载入解压后的扩展…”，选择刚刚下载的 Chrome 扩展（firebug-lite/build/chrome-extension ）；

哈，第一个报错来了：

意思是说“manifest_version”值必须是 2 ，不能有引号，解释参见这里 。

阅读全文 »

发表于   |   分类于 ， ，   |  

原文：Centering Percentage Width/Height Elements
译者：涂鸦码龙

如果知道该元素确切的宽高，居中它比较容易，可以参考此文 ，top 和 left 设成 50%，负 margin 分别设置该元素宽，高的一半。如果明确知道该元素的宽高，用此法居中很容易，如果它的宽高是百分比呢？

你可能认为负的百分比 margin 可以搞定，它适用于水平的 margin，但是 margin 基于宽度（垂直 margin 也是）（译者注：margin 是百分比的话，跟此元素的包含块的宽度有关，见规范），因此当你用负的 top margin 时，失败了。

有个小技巧 ，用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。可能你想居中一个模态窗口，受小屏幕 / 响应式设计所限，你很可能会把对话框设计成百分比宽度（或者其它未知情况，比如仅有 max-width 最大宽度。）

有一种方案！Mary Lou 在 Codrops 用到的，她的文章 / 示例：漂亮的模态窗口效果 。

不能用负的 margin ，可以用负的 translate() 代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
  不是 =(
  margin-left: -25%;
  margin-top: -25%;
  */
  /* 
  而是!
  */
  transform: translate(-50%, -50%);
  /*
  甚至不要定义 
  比如：Height 可以缺省!
  */
  width: 40%;
  height: 50%;
}

加上所有需要的前缀。

最终效果实例：

Check out this Pen!

发表于   |   分类于   |  

原文：Using JavaScript’s ‘toString’ Method （需翻墙）
译者：涂鸦码龙

是否想知道为什么 alert 一个 JavaScript 对象，得到“[object Object]”文本？缘于 JavaScript 内置 toString 方法。

注意：例子有些地方用了 alert ，没用 console.log ，是为了绕开 console 对 Object 的特殊处理。

1
2
3
4
5
6
7
8
9
10
// Alerts: '[object Object]'
alert({});
// Outputs: "function() {}"
console.log(function() {});
// Outputs:
// "Thu Oct 11 1962 00:00:00 GMT-0400 (Eastern Daylight Time)"
// May vary depending on your clock settings
console.log(new Date("October 11, 1962"));

以上这些有什么共同点？每一个都提供字符串代表它们的值，但是内部的值差异很大。比如，内部的 Date 以毫秒衡量。

这些对象如何提供字符串作代表？它们均有个 prototype 方法：toString，它会把内部的值转换成字符串。

假如我们想创建一个新对象，让它返回字符串代表它的值，不用 toString 的话，代码像这样：

1
2
3
4
5
6
7
8
9
10
11
function Color (r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
    this.text = "rgb(" + r + ", " + g + ", " + b + ")";
}
var red = new Color(255, 0, 0);
// Outputs: "rgb(255, 0, 0)"
alert(red.text);

有几个问题，首先，text 属性跟实际的值不同步（如果改变r, g, b 的值）；其次，必须明确调用 red.text ，不能直接用 red 的值。

用 toString 方法重写一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Color (r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
}
Color.prototype.toString = function () {
    return "rgb(" + this.r + ", " +
                    this.g + ", " +
                    this.b + ")";
};
var red = new Color(255, 0, 0);
// Alerts: "rgb(255, 0, 0)"
alert(red);

把要返回的字符串放到 prototype 的 toString 里面有两个好处：字符串始终与真正的值保持同步，我们可以随时取用字符串的值， JavaScript 解释器会隐含调用 toString 方法。比如：

1
2
3
4
var message = "Red is: " + red;
// Outputs: "Red is: rgb(255, 0, 0)"
console.log(message);

发表于   |   分类于 ，   |  

原文：Better performance with requestAnimationFrame
作者：Luz Caballero
译者：涂鸦码龙

介绍

本文讨论如何使用 requestAnimationFrame API 代替旧的 setInterval / setTimeout 方法，从而提高动画的性能。当然，我们会演示代码实例。

当前几乎所有的主流浏览器都支持 requestAnimationFrame ，尽管有的还带前缀。Erik Möller 已经写了个 polyfill ，加上这个应该可以支持所有浏览器啦。一言难尽，让我们从头说来…

老方法不太好

在表彰 requestAnimationFrame 之前，我们先看看用老方法是怎么实现动画的。我确定没必要提很久以前 Mozilla 第一个实现了 mozRequestAnimationFrame ，你可能已经用 setTimeout 和 setInterval 创建了动画。假定你已经熟悉这两个方法，我不再赘述。如果你想了解更多，可以看 John Resig 的精彩文章，深度解析 JavaScript 计时器如何工作 。

我并不是轻视这些老方法，它们的确有一些缺点。首先，当相应的浏览器窗口最小化，JavaScript 计时器在背景标签仍然持续运行。因此，浏览器继续运行看不见的动画，导致不必要的 CPU 和电池寿命的消耗。在移动设备尤其严重。

其次，不仅计时器持续运行看不见的动画，而且当时间到了，仍会排队执行它们的回调函数。让我解释下为什么这样会出问题 —— 比如说由于某些原因，回调函数占用太多时间，比你设定的时间要长。一旦计时器时间到了，它将排队执行 “下一次” 回调函数，甚至前一个还没执行完。这一过程不断重复，很快排队了几乎无数的计时器代码，导致浏览器不堪重负。图1 说明这一情况。

阅读全文 »

发表于   |   分类于 ，   |  

原文：The Design of Code: Organizing JavaScript
作者：Anthony Colangelo
译者：@涂鸦码龙

伟大的设计是一个产品应该关注和重视的点，这样才能造就一个可用的，好理解的，精美的用户界面。千万不要认为设计仅仅是设计师的事。

代码里面有好多种设计，我不是指代码构建了用户界面——我是指代码的设计。

精心设计的代码更易于维护，优化和扩展，能使开发者更高效。这意味着更多的注意力和精力可以花在构建伟大的事情上，每个人都很愉快——用户，开发者和利益相关者。

有3个高级的，跟语言无关的点，对代码设计十分重要。

  1. 系统架构——代码库的基础设计。控制各种组件的规则，例如模块（models），视图（views）和控制器（controllers），以及之间的相互作用。
  2. 可维护性——如何更好地改进和扩展代码？
  3. 复用性——应用组件如何复用？每个组件的实例如何简便地个性定制？

比较宽松的语言，特别是 JavaScript ，需要一些规矩才能写好——代码设计。JavaScript 环境非常宽松，随处扔些代码片段，就可能起作用。早点确立系统架构（然后遵守它！）对你的代码库提供制约，确保自始至终的一致性。

我比较喜欢的一个方法由久经考验的软件设计模式组成——模块模式，可扩展的结构使它成为可靠的系统架构，和可维护的代码库。我喜欢在一个 jQuery 插件里面构建模块，有漂亮的复用性，提供强健的选项设置，暴露一些精心设计的 API。

下面，我将逐步讲解如何精心设计你的代码，把它变成结构良好的组件，从而在项目中复用。

模块模式

已有许多设计模式，同样有许多相关资源。Addy Osmani 写了本关于 JavaScript 设计模式的书《令人惊奇的书（免费！）》，我极力推荐给各个水平的开发者。

模块模式 是一个简单的结构基础，它可以让你的代码保持干净和条例清晰。一个“模块”就是个标准的包含方法和属性的对象字面量，简单是这个模式的最大亮点：甚至一些不熟悉传统的软件设计模式的人，一看就能立刻明白代码是如何工作的。

阅读全文 »

发表于   |   分类于   |  

相关资料：
Opera 14 for Android is out!
OUT TODAY: OPERA FOR ANDROID, FULL AND FINAL!
先唠一下 Opera 14 新功能哈，作为开发者可以直接移步这里。

经过数月的努力，全新安卓版 Opera 面世了，许多新奇特性等你发现。等不及的话，这有下载链接 Google Play 或者手机访问 m.opera.com 。

选项卡

从缩略视图到隐身标签，安卓版的选项卡非常适于浏览移动网页。把选项卡加入收藏也非常便捷，点击地址栏的星标。

快速拨号，彻底改造

如大家所愿，这版的快速拨号有文件夹了，可以自由整理，只需拖拽即可创建新文件夹。

发现，先人一步

获取最新最酷的内容，为你量身定制的发现特性。

越野模式

启用越野模式即启用了 Opera Mini 功能，当您网络不佳时，压缩网页，提高速度，省钱省流量。

阅读全文 »

发表于   |   分类于 ，   |  

自定义过滤器

创建 phonecatFilters 模块，用此模块注册自定义过滤器：

1
2
3
4
5
angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

过滤器的名字是“checkmark”，根据 input 判断 true 或 false，我们用 unicode 字符代替 true 或 false（\u2713 和 \u2718）。

我们需要给 phonecat 模块注册 phonecatFilters 模块。

1
angular.module('phonecat', ['phonecatFilters']).

模板

我们需要引入 app/js/filters.js 文件

1
2
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>

Angular 模版使用过滤器的语法如下：

{{ expression | filter }}

我们在手机详情模版使用此过滤器：

1
2
3
4
5
6
<dl>
  <dt>Infrared</dt>
  <dd>&#123;&#123;phone.connectivity.infrared | checkmark}}</dd>
  <dt>GPS</dt>
  <dd>&#123;&#123;phone.connectivity.gps | checkmark}}</dd>
</dl>
阅读全文 »