冰糖橙子 http://www.btorange.com 暗度陈仓 • 嘉言懿行 专注WEB前端 Sun, 11 Dec 2011 08:34:41 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 imgSprite:可用性与性能优化 http://www.btorange.com/2011/08/15/imgsprite%e5%8f%af%e7%94%a8%e6%80%a7%e4%b8%8e%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96.html http://www.btorange.com/2011/08/15/imgsprite%e5%8f%af%e7%94%a8%e6%80%a7%e4%b8%8e%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96.html#comments Sun, 14 Aug 2011 16:56:11 +0000 ariesjia http://www.btorange.com/?p=376 我们通常在做可用性无障碍优化的时候，都把我们的目标对象假定为使用屏幕阅读器的视残人士。往往忽视了在介于视力正常与视残人士之间的视障者，视障者是指视觉功能受到一定程度的损害，以致无法达到正常视力，因而到影响日常生活。windows平台为了满足视障用户的需求，提供了高对比模式，它会通过使用对比鲜明的色彩才提高阅读性。以下是win7提供的4中高对比模式。

高对比度模式下网页的背景根据选择变为对应的颜色，并且所有的背景图片都不会显示出来。虽然雪碧图的原则是合并非功能性的修饰图片，但是对于一些特殊的例如导航条，包括一些模拟按钮，我们通常的做法都合并了起来。这样的处理办法会造成少部分人的大麻烦，严重损害了视障用户的体验。下图为高对比与普通模式下的对比，页面中模块的标题完全不可见。

cssSprite的使用无可厚非的为网站加载优化贡献巨大，那么怎样可以更好的解决呢，上图中我们可以明显观察到，即使在高对比模式之下，img元素依然可显示，so 我们完全可以将cssSprite与img相结合，开始动手吧。
我们使用imgSprite尝试做一个导航条，HTML结构将会是这个样子

 
<div class="nav">
<ul>
<li class="nav_home"><a href="#"><img src="sprite.jpg" alt="首页" /></a></li>
<li class="nav_act"><a href="#"><img src="sprite.jpg" alt="活动" /></a></li>
<li class="nav_dre"><a href="#"><img src="sprite.jpg" alt="装扮" /></a></li>
</ul>
</div>
 

最终效果参看demo，大家仔细观察在demo中，我在css中加载一张除了文件名不同外其他均与img中完全相同的图片，可以明显的观察到img元素中的图片加在优先级比css中图片更高。

这样的处理方法，一举两得：1能够提高视障碍用户的可用性，2能够提供背景图片的加载速度。
当然这样也会产生某些弊端，当样式未加载，页面裸奔的时候用户将会看到的是数张雪碧图的丑陋状态，当然解决这个方法,毕竟用到这样处理方法的地方是极少数，我们可以针对性的写内嵌样式或者直接写在元素内。我个人认为此方法所能带来的好处与其相对应的代价比较是值得的。
小弟考虑不胜周全，在此抛砖引玉。

随机文章

]]> http://www.btorange.com/2011/08/15/imgsprite%e5%8f%af%e7%94%a8%e6%80%a7%e4%b8%8e%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96.html/feed 3 Dl in HTML5 http://www.btorange.com/2010/08/08/dl-in-html5.html http://www.btorange.com/2010/08/08/dl-in-html5.html#comments Sun, 08 Aug 2010 13:37:01 +0000 ariesjia http://www.btorange.com/?p=338 对我而言，<dl>不用质疑是最令我困惑的HTML元素之一。

“定义列表”还是“描述列表”？

在HTML4中，<dl>作为“定义列表”(definition list)，他包含了一组定义标题以及对他的定义描述。标题与描述是具有多对多关系的，是一个或多个标题对应一个或多个描述的对应关系。但是这个元素常常被像我这样的同学误用或误解，为了解决这样的问题，<dl>在HTML5中被定义“描述列表”(description list),这将产生什么样的变化呢，我们先看看规范说明：

<dl>元素包含了0个或者多个名称—值对应的组，每一组包含了一个或者多个名称(<dt>)，而这些名称又包括了一个或多个描述/值(<dl>)

此前，定义列表的“定义”二字，使<dl>被使用于与他本身的结构毫无关系的标签。也就是说我们在考虑使用<dl>的时候，更多是考虑的关于“定义”的范畴，而不是<dl>自身<dt>-<dd>的结构形式。

一些范例

多对多使用
<dl>正如标题所述一个以可以映射多个名称<dt>以及多个描述值<dd>

 
<dl>
<dt><dfn>turf</dfn></dt>
<dd>n.草皮</dd>
<dd>n.泥炭,泥煤</dd>
<dd>n.马,赛马</dd>
</dl>
 

总结

<dl>的改变是相当轻微的，但是新的定义澄清混乱，使开发人员能够更恰当地使用它。您可以更加恰当的使用此元素语义化的来表示键值对应的关系。

参考

html5 doctor_The dl element

onderhond_DL-DD-DT

相关文章

]]> http://www.btorange.com/2010/08/08/dl-in-html5.html/feed 2 帝企鹅满月记 http://www.btorange.com/2010/08/07/practice%e2%80%94month.html http://www.btorange.com/2010/08/07/practice%e2%80%94month.html#comments Sat, 07 Aug 2010 06:59:47 +0000 ariesjia http://www.btorange.com/?p=328 这是我今天收到公司邮件的标题，Time flies，晃眼之间距离7月7号到腾讯入职实习到今日刚好整整的一个月的时间，这一个月以来清晰的感受到由学生到职业人的转变，逐渐的熟悉身边的环境，适应身边的许多改变。

我和“TA”的第一次

还没有来报道之前，经常会看到群里早来报道的同学说，这里可以穿拖鞋上班。第一天来腾讯大厦一楼报道时候，很惊奇的发现大部分的同学都是穿着拖鞋短裤来上班了，有的MM带着羽毛球拍，这种自由的氛围自由的文化着实让我感觉很温馨。这是我直面这家公司的第一印象。

对于产品同学满脑子的奇思妙想非常的佩服，“年轻而活跃“，这是我直面这家公司的第二印象。

接下来接触公司在对待用户的态度，我更加认同了这家公司的使命，价值观。我感觉我是爱上了“TA”。

ISD Webteam

这是我现在实习的部门互联网研发部网站组，见到了曾今只在网上拜读过的大牛们，大家都很nice，有什么问题，他们都会非常耐心的解答，很有团队的氛围，组里的人都互相帮助，没有那种等级的约束感，让我深深的体会到一种找到组织的感觉，工作得也非常开心，每天都会有新的收获。在这里非常的感谢大家对这一个月以来的帮助，非常非常的感谢。

工作

“责任更多，要求更高，专业更专，细节更细，全局更全，压力更大” 这句话是我实习以来最大的体会，更是我今后努力要做到的。

前段时间，我在做一个Q秀搭配大赛的页面，刚刚发布到外网，就在之前加的一个群，看到有同学在给自己拉票，这才让我真正清楚的意识到，哪怕就是0.1%的用户在使用这款产品，那也是十万的海量数量级，写的代码能为海量互联网用户服务和解决问题，感到非常荣幸、自豪、快乐、幸福，同时也有莫大的压力，所以万事都得再三斟酌。

兴趣与激情，这无论是在内部的分享会，还是在w3cteach交流会上，我感触比较深的词，这也是我今后的需要一直坚持的。

深圳

没有来之前，我对这个城市没有任何的概念和感觉，隐约感觉他会是一个很浮躁的城市。来了以后，每天都是明媚的阳光，蓝天白云，让你每天都有一种不明真相的激情与开心，完全不像成都整日的阴霾。

但是这里无处不让我感觉到一种拘束感，或许是一种初来的陌生，另外街上的车太多了，每天早上的班车都得磨1个小时左右。

路漫漫其修远兮，吾将上下而求索。

随机文章

]]> http://www.btorange.com/2010/08/07/practice%e2%80%94month.html/feed 7 微观数据(Microdata)的数据模型 http://www.btorange.com/2010/06/07/microdata-data-model.html http://www.btorange.com/2010/06/07/microdata-data-model.html#comments Mon, 07 Jun 2010 12:23:52 +0000 ariesjia http://www.btorange.com/?p=241 Continue reading →]]> 原文：Dive Into HTML5
原作者：Mark Pilgrim
翻译：ariesjia

本文是Dive Into HTML5 第11章的一个小节，作者是 Google 的软件工程师 Mark Pilgrim。Dive Into HTML5是一本非常系统的讲解HTML5的一本书，相信能让你对microdata数据模型有一定的认识。这是我第一次的翻译，凭借拙劣的英文水平，所以翻译水平有限，若有不准确之处欢迎各位同学指正。
上一节：什么是微观数据
——————————以下为翻译的全文——————————

要自定义微观数据很简单。首先，你需要一个命名空间，他只是一个URL。这个URL命名空间实际上指向一个正在运作网页，尽管这并不是严格的要求。比方说我们想要创建一个描述一个人的微观数据词汇表，如果我拥有data-vocabulary.org这个域名，我会使用http://data-vocabulary.org/Person这个URL地址作我的微观数据词汇的命名空间。选择一个在你控制下的域名，这是一个简单的创建全局唯一的标识符的方法。

在这个Person词汇表中，我需要定义一些命名的属性。让我们从这个三个基本属性开始。

• name（您的名字）
• photo（链接到你的图片）
• url（与你相关的网站比如博客或者Google profile）

其中一些特性是URL，其他的纯文本，无论是那一种形式都会将自身与HTML标签的组成形式联系起来。假设你有一个个人资料页面或者“关于”页面。你的名字作为一个标题，一个<h1>元素。你的照片会是一个<img alt="" />元素，因为你希望人们看到图片。任何的链接到你的资料页面的网址被作为链接，因为你希望人们可以点击他们。在讨论的微观数据模型之前，我们先把全部的个人资料信息被包裹在 元素中以把他与页面的其他元素分离开，像这样

↶ It’s all about me

 
<section>
<h1>Mark Pilgrim</h1>
 
<img src="http://www.example.com/photo.jpg" alt="[me smiling]">
 
<a href="http://diveintomark.org/">weblog</a>
</section>
 

微观数据模型是以名称/值形式一一对应成组的结构。一个微观数据的特性名（就像这个例子中的name，photo，url）始终存在于一个申明的HTML元素中。相应的属性值取至于该元素的DOM。对大多数HTML元素来说,属性值仅仅是该元素的文本内容，但是也有少数例外。

微观特性值来至哪里
元素 特性值
<meta> content 属性
  • <audio>
  • <embed>
  • <iframe>
  • <img>
  • <source>
  • <video>
 src属性
  • <a>
  • <area>
  • <link>
 href 属性
<object> data 属性
<time> datetime 属性
all other elements 文本内容

添加微观数据到你的网页就是在你已有的HTML元素中添加新的属性。第一件你需要做的事是通过添加一个itemtype属性来申明你使用的微观数据词汇。第二件事是通过itemscope属性来声明词汇的作用域。在这个例子当中，所有的你想要语意化的数据在这个元素当中，所以我们就在元素中申明itemtype 以及itemscope属性。

 
<section itemscope itemtype="http://data-vocabulary.org/Person">

你的名字是<section>元素的首位数据。它被包裹在<h1>元素中，因为<h1>标签在HTML5中没有做特殊微观数据采取规则，所以与其他元素都都是仅仅获取元素的文本内容。（如果你的名字包裹在<p>, <div>或 <span>元素也同样适用）

 
<h1 itemprop="name">Mark Pilgrim</h1>
 

中文意思就是说“name是http://data-vocabulary.org/Person的一个特性，并且这个特性的值是Mark Pilgrim”

接下来我们看photo这个特性。这应该是一个网址。根据HTML5微观数据模型，<img>元素的微观特性值是他的src属性值。我们可以看到，你的资料照片的网址已经在一个<img src>属性中了。你所需要做的是声明<img>元素就是具有照片特性。

 
 
<img itemprop="photo" src="http://www.example.com/photo.jpg" alt="[me smiling]">
 

中文意思就是说“photo是http://data-vocabulary.org/Person的一个特性，并且这个特性的值是http://www.example.com/photo.jpg”

最后，这个url特性同样是一个网址。根据HTML5微观数据模型，<a>元素的特性值是他的href属性值。再强调一次，Microdata与标签正确的使用是相当符合的。所以你所需要做的是声明你的<a>元素具有url特性：

<a itemprop="url" href="http://diveintomark.org/">dive into mark</a>

中文意思就是说“url是http://data-vocabulary.org/Person的一个特性，并且这个特性值是http://diveintomark.org/”

当然，如果你的标签看起来与范例有一些不同，这个没有任何关系。你可以对任何的HTML标签添加微观属性和值，甚至像20th-century-era, tables-for-layout, Oh-God-why-did-I-agree-to-maintain-this这样不太好的标识。为什么我不推荐使用这样标识呢？是因为添加这类标识后元素语义仍然很普通。

↶ For the love of God, don’t do this

 
<table>
<tbody>
<tr>
<td>name</td>
<td>mark pilgrim</td>
</tr>
<tr>
<td>link</td>
<td>
    <a onclick="goexternallink()" href="#">http://diveintomark.org/</a></td>
</tr>
</tbody>
</table>
 

对于标识name特性，只需要在包含name的表格单元添加一个itemprop属性。表格单元没有特殊的获取微观数据的规则，所以得到的还是默认值：文本内容。

 
<tr>
<td>Name</td>
<td itemprop="name">Mark Pilgrim</td>
</tr>
 

添加url特性看起来稍微复杂一点。这个标识不能正确的使用<a>元素。因为他并没有把链接放在href属性中而是在onclick属性中使用JavaScript调用一个获取URL并且跳转的函数。或许这个函数也在一个没有滚动条的窗口打开这个链接，这不是上个世纪互联网有趣的事么？

↶ This is what you get for subverting HTML

 
<table itemscope itemtype="http://data-vocabulary.org/person">
<tr>
<td>name
<td>mark pilgrim
<tr>
<td>link
<td>
    <span itemprop="url">
      <a href=# onclick=goexternallink()>http://diveintomark.org/</a>
    </span>
</table>
 

无论怎样，你仍然可以把它转换成微观特性，你这时需要一点点的创意。这样使用<a>标签并不是问题。链接目标不在的href属性中，并且我们也不能办法重写“<a>元素的获取微观特性就是本身的href属性值”这个规则。但你可以添加一个包裹元素，然后用他来添加url特性。

由于<span>不是特殊单元，它使用默认获取规则，微观数据值就是他的文本内容。“文本内容”并不是指这个元素的全部内容（可能你会说得到DOM的innerHTML），他的意思只是文本，再这个例子中就是<span>中<a>的文本http://diveintomark.org/。。

总结：你可以在任何标签内添加微观特性。如果您正确的使用HTML，你会发现添加微观数据比如使用HTML标签更加容易。

——————————以下为碎碎念，完全无视——————————
今天是一年一度的高考，愿大家能取得好成绩，小刘刘加油啊

相关文章

]]> http://www.btorange.com/2010/06/07/microdata-data-model.html/feed 2 什么是微观数据(Microdata) http://www.btorange.com/2010/06/06/what-is-microdata.html http://www.btorange.com/2010/06/06/what-is-microdata.html#comments Sun, 06 Jun 2010 11:20:26 +0000 ariesjia http://www.btorange.com/?p=271 原文：Dive Into HTML5
原作者：Mark Pilgrim
翻译：ariesjia

深入微观数据

在html5中有超过100个元素，一部分是表示语义的，另外的就只是script API的容器（比如：canvas）。纵观网页发展的历史，web标准的卫道者们争论哪些元素应当被包含在HTML语言中。HTML是否应该应该包含 <figure>，<person>，<rant>？标准被拟定，提纲被编写，开发者执行并运用，不断的推动web向前发展。

当然，一些想法没有被采纳，比如在HTML5中并没有<person>这个元素（同时也没有<rant>），没有任何力量可以阻止你在在开发过程中书写<person>这个元素，但是他不会通过验证，不会通过浏览器而工作，并且可能与未来的HTML规则发生冲突。

对，所以构造自定义的元素并不是一个解决办法，那么怎么才是web语义者倾向的做法呢？曾今有很多企图扩展以前版本的HTML的做法，最通常就是“微格式（microformats）”,在HTML4中用在class以及rel属性上。第二种选择是RDFa，原本是设计在XHTML中使用，但是在HTML中也能使用。

微格式和 RDFa 各有自己的优劣点。他们采取了完全不同的方法实现一个目的：通过额外的语义来丰富网页的信息。这里我更倾向于第三种选择，一种紧密联系在一起的方法，HTML5，HTML5本身就是一种微观格式。

什么是微观数据

下列句子很重要，所以一定要注意

“微观数据诠释了具有名称/值对应的DOM，而这个名称/值的范围源于惯用词汇表”

这是什么意思呢？微观数据是以自定义词汇为核心，让我们回过头去看过去的工作。将所有html5的元素看作是一个词汇表，这个词汇表包含着的元素可以用来代表一个段落或者一篇文章的，但是他不包含能代表一个人或者一个事件的。如果你想要在网页上表现一个人，那么你需要自定义一个词汇。微观数据可以让你做到这一点。任何人都可以在自己的网页上自定义微观数据然后嵌入通用的属性。

我们了解微观数据是以名称/值对应的形式存在的。每一个微观的词汇定义了一组命名的属性。举一个例,“Person”这个词汇表可以定义name或者photo这样的特性。为了包含一个准确的微观数据，你需要在一个确切的地方声明特性的特性名。根据你申明特性的位置，微观数据根据相关的规则提取有用信息。

除了命名的属性以外，微观数据在很大程度上依赖于“作用域”。最简单的方式去理解作用域这个概念可以参考DOM中元素的父子关系。 <html> 通常包含两个子节点 <head> 以及 <body>.<body>节点通常包含很多并行的子节点，同时这些子节点又有自己的字节。举一个例，你的网页上有<h1>被包含在<hgroup>中，同时<hgroup>又被包含在<header>中，<header>又被包含在<body>中。一个数据表格可能被包含在<td>中，<td>被包含在<tr>中，同时<td>又被包含在<table>中。微观数据采用了DOM这种层次结构来表明“元素中的所有特性都源于声明词汇表”。这可以允许我们在同一个页面上使用多个微观数据。你是甚至可以通过重复使用DOM的自然结构，嵌套其他的微观数据词汇。

现在我已经简单介绍了DOM，下面让我继续细细道来。微观数据是为网页已经直接可见的数据附加语意化的说明。微观数据并不是被设计为一种独立的数据格式，而是对HTML的一种补充。所以你将会在下一章节中看到，当正确的使用HTML但是HTML的语义表现力不够强时，微观数据能够发挥最大的效果。微观数据最显著作用就是对DOM中已经存在的数据在语义上微调补充。如果你想要语意化的数据并不在DOM中，你最好应该重新评估一下微观数据是否为正确的解决方案。

这个句子是否更容易理解了呢？“微观数据诠释了具有名称/值对应的DOM，而这个名称/值的范围源于惯用词汇”我希望是的。让我们实践一下吧。

相关文章

]]> http://www.btorange.com/2010/06/06/what-is-microdata.html/feed 1 为什么要内嵌CSS？ http://www.btorange.com/2010/05/11/embedded-css.html http://www.btorange.com/2010/05/11/embedded-css.html#comments Tue, 11 May 2010 12:34:45 +0000 ariesjia http://www.btorange.com/?p=214 一直很疑惑为什么像QQ首页，淘宝，163首页这样的大流量的网站为什么要CSS直接写在页面，难道这是为了减少HTTP请求么？虽然减少了一条HTTP请求，相反却不能作为外部文件被浏览器所缓存，网站的加载的数据量将会加大，表面看来这是得不偿失的。那为什要这么做呢？
内嵌会增加了开发成本么?
内嵌CSS不等同于直接将样式写在页面上，也不等于不利于修改和管理，其实也是程序读取外部文件再写在页面上。在本质上还是在调用一个外部的样式表。那内嵌到底有什么好处？
内嵌到底有什么好处？
1.仔细的查看雅虎14条关于“把JavaScript和CSS 放到外部文件中”的这条法则，其中提到了一个例外

唯一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式。一般来说，在一个session中，主页访问此时较少，因此内嵌方式可以取得更快的用户响应时间。

2.往往样式和脚本外部文件都会放在单独的服务器，如果采用内嵌方式就不会出现下载样式表失败或者外部服务器挂掉而造成页面“裸奔”导致浏览不爽甚至不能的问题，这个是对于访问量大的网站来说这是一个需要考虑的问题。
外联的好处
1.外部文件会被浏览器缓存，所以使用外部文件会加快页面显示速度。（缓存掉，所以之后访问不会请求）
2.页面数据量会减小会减小，同时不会增加HTTP 请求次数。（缓存掉，所以之后访问不会请求）
3.便于维护以及管理

内嵌是否会增加服务器的开销？
这里指的是程序读取外部文件再写在页面上，一般服务器会把样式表缓存再写在页面，所以不必要每次对样式文件进行读写操作。

什么样的网站需要内嵌？
大访问量，后级页面不存在大量的重用，首页。

随机文章

]]> http://www.btorange.com/2010/05/11/embedded-css.html/feed 1 活在像素的世界中 http://www.btorange.com/2010/05/10/life-in-px.html http://www.btorange.com/2010/05/10/life-in-px.html#comments Mon, 10 May 2010 05:46:33 +0000 ariesjia http://www.btorange.com/?p=204 Continue reading →]]> 接上一文，蛋疼的马里奥，用css拼完了马里奥FC图片之后，我萌发了写一篇关于像素的想法。

何谓像素？“像素”（Pixel） 是由 Picture(图像) 和 Element(元素)这两个单词的字母所组成的，是用来计算数码影像的一种单位，和我们日常单位"厘米"类似，可以作为一种长度丈量的单位。而给我最直观的印象在于PS中放大8倍后，直观的1px × 1px小方块。

像素的构成就是色彩中的三原色RGB（红色，绿色，蓝色），这其实等同于彩色电子屏幕显色以及彩色印刷的原理。偶然的一次机会我好奇的翻开老实彩色打印机，黑色墨水不够，纸张通过多种颜色的覆盖，最后变成的黑色，当你用酒精清洗CRT显示器时，透过水的放大作用，你会打开整个屏幕都是花花绿绿的小点构成。

对于一个页面仔来说，每天与之打交道的最多就是像素了，在PS中比比量量，切切裁裁，每一处都要精确的像素单位。一张精美的设计稿，在放大X倍以后，无非全都是花花绿绿像素点揉挤在一起的，再有欲望也全打消了。为什么会这样，对于人眼来说，对微小事物分辨率有限，眼中图像会自动的混合相邻的颜色，所以其实图像的本质色彩远远大于我们所能看到的部分。

下面这张画，其实并不是图片，其实是通过64×64个节点所构成的，从像素的角度上观察，其实这就是一张点阵式图像，一张位图的本质就在于此，但是平常我们并不会这么使用，因为一般的图片颜色丰富，色彩数据大，下面这张64px × 64px 图像如果用css来做就有264KB。

为了好玩，我做了这么一个小玩具，通过图片转换为网页的像素显示，为了取imageData，只好采用canvas来做，所以只有再现代浏览器（webkit内核，mozilla内核,opera内核）中能够使用，因为canvas的因素，只能选用当前目录下面的图片元素。为了节约流量，就不再做图片上传了，如果你们要使用就自己下载代码。

IE的用户就别点了，爷们儿要黑你的屏。

猛击使用 ：在线演示转换地址

提示：你可以先修改部分代码再运行。

另外，最近垃圾评论一下猛增，让我有点受宠弱惊，之后的一律提交baidu，google垃圾网站库。

随机文章

]]> http://www.btorange.com/2010/05/10/life-in-px.html/feed 4 Ballache确实.. http://www.btorange.com/2010/05/08/ballache-mario.html http://www.btorange.com/2010/05/08/ballache-mario.html#comments Sat, 08 May 2010 05:11:49 +0000 ariesjia http://www.btorange.com/?p=191 Continue reading →]]> 昨晚无聊，用css拼了一个马里奥FC的地图，无图片的，真的有点Ballache。

在线地址 围观

提示：你可以先修改部分代码再运行。

随机文章

]]> http://www.btorange.com/2010/05/08/ballache-mario.html/feed 2 Chrome扩展fight look http://www.btorange.com/2010/04/30/fight-look.html http://www.btorange.com/2010/04/30/fight-look.html#comments Fri, 30 Apr 2010 14:49:54 +0000 ariesjia http://www.btorange.com/?p=167 记得有一天我和锤锤在实验室看喵扑，看到一张倒立拍摄的图片，两个人都不约而同地扭转脖子去看，脖子都扭疼了，还是不能看清楚照片主角长什么样，就设想要是有这么一个可以扭转图片的小工具就太好了。刚好现在在家闲，看了一下chrome的API，做了这么一个扩展工具fight look，用重庆话来说叫“打望”。

安装fight look（前题是使用的google浏览器,听说FF现在也能用chrome的扩展所以在兼容上也作了FF的考虑）。

fight look

这个扩展目前还比较简单，对图片只提供一个180 度的扭转，我会再后续时间继续升级这个版本。至于使用方法很简单：

1.安装fight look；

2.点击chrome扩展里面的这个按钮；

3.鼠标移动到相应的图片上，右上角就会出现一个按钮；

4.点击图片就会扭转,而不会对页面其他元素构成影响，放心好了.

演示：（before）

（after）

bug收集:

相关文章

]]> http://www.btorange.com/2010/04/30/fight-look.html/feed 1 生活-你不得不相信他的巧合 http://www.btorange.com/2010/04/26/dream.html http://www.btorange.com/2010/04/26/dream.html#comments Mon, 26 Apr 2010 03:12:45 +0000 ariesjia http://www.btorange.com/?p=157 直到现在我还认为自己在做梦,那种感觉太美妙了.

昨天腾迅实习生的第一轮面试,也是我人生的第一次面试,太紧张了,很早起起来了,躺在床上了回想考虑了下怎么做自我介绍,同时也勾起了我关注学习web前端的历程,还记得08年第一次看Twinsen的文章《这将是一场革命》，看到那句我可能永远都忘不了的那句:

之所以我要纹上这段代码，我是要警惕自己——我的使命。并且我将用一生去拥抱我所热爱的事业。

我看到了页面重构工程师对工作的激情，积极地态度，推动web标准的责任，以及不断学习专业的精神。从哪个时候开始我喜欢上web前端，喜欢上了页面重构。我也想用我的一生去拥抱我热爱的事业。还记得他博客最后更新的一个Life说他到成都来招聘，不过已经是去年的文章，我转念一想会不会今天面我的是他呢，哪有那么巧的事。

时间终于摸到了下午，我提前1个小时就已经到达了会场，楼下有很多人等着了随便找了位置坐了下来，和旁边的同学聊了一下，他们都是科大的也是2点半面，但是心里还说有种控制不住地紧张，看着旁边的同学完全就没有一点怯场的状态。大概聊了20分钟，我们就到5楼，等待叫名字，已经有很多人在这里等着了，签到处的背后就是产品和测试的面试地点。产品类的和技术类的真的就是2个状态，产品的同学们一身正装，技术的同学大家都很平常。大概磨了20分钟，叫到我的名字，因为我是霸笔的，再三确认是我以后，给了我单子，12楼225房。

12楼晃了一圈，终于看到225，门口已经已经有3个等待面试同学，还有2个陪同一起来，整层就225门口人最多，这架势看来又要折磨我在紧张中。问了下这几个同学都是科大的，适合相互认识，看来面试老师肯定很仔细，我在心中默默准备了下怎么作自我介绍，然后就和他们闲聊，当然也相互打气祝福，也谈谈重构的理解还有IE6的讨厌。

3点半的时候，我被叫了进去，面试官穿着白色的长袖T很精干，他让我先坐一下，然后从冰箱给我拿了一瓶可乐，顿时让我感觉很亲切，之前的紧张感消失了。他拿昨天的笔试的卷子问了我错的题目，感觉自己答得有点糟糕，不知道怎么他突然问了我一句你看过我的博客吗？我还真没有认出来，第一:我进门的时候没敢仔细看，第二:他没有像他照片里面一样戴着黑框眼镜，后来知道他戴着隐形眼镜。我当时很傻的回答了：你是谁？（真的很没有礼貌啊~~我怎么这么说）他说:Twin~(我有点不敢相信了)~sen，当时我就情不自禁的叫了出来：Twinsen，可能但是我真的太激动了，他也告诉我，我把他给吓倒了。他可能看我太激动了就让我先做了2道题目做

之后我们谈了很多，真的让我有很多的感触，对于浏览器解析的原理，重构的未来，html5，框架，以及做事及人生态度等等，我感觉和他聊，他很能引发你的思考，他更像一位哲人，就像他告诉我的那句话

以自身的技能展现自己劳动成果的最佳状态，进而实现技术至哲学的提升。

今天听了他的《一专多长》，更理解了这么一句话。

真的非常非常地意外，我居然在这个时间，这种场合遇到让我热爱上重构的导师，又在这个时间，这种场合给了我对于重构一个不同眼光方向的视角。生活你不得不相信他的巧合。

随机文章

]]> http://www.btorange.com/2010/04/26/dream.html/feed 8