大男人前端

0.专注 | Focus
如果你决定开始工作，请尽力的做好它。不要同一时间做几件事情。一次只做一件事情。如果你多线程工作的话，你不一定会更快。多线程会让你精疲力尽，出错，转换任务时消耗更多的时间。这不是仅限于编程，这是个普遍的法则。
Kodo Sawaki说过：如果你需要睡觉，去睡吧。当你试图睡觉的时候，不要想着程序，单纯的睡觉。如果你在编程，就专注编程吧，不要做白日梦。如果你很累的 话，不能再编程的时候，就睡觉吧。就算是著名的多线程超人Stephan Uhrenbacher也决定以后单线程工作。我也有与Stephan类似的经历，最后我写了Time & Bill，一个追踪时间的工具。目的是想只需要点一个键，就能追踪我的时间。结果很糟糕：我经常在一个任务只专注了几分钟就转移到另外一个任务去了。现在 我好多了。类似于Pomodoro technique，我计划了一些工作时段，专注于它们。不聊天，不睡觉，不查看Appstore里的新游戏。（《追踪时间的10个给力应用程序》）

1. 保持清醒 | Keep your mind clean
在编程时，你需要清除你的内存。抛开你脑袋中的其他东西。如果你被其他事情所烦恼，不要让它们影响你。大部分情况下麻烦会自动消失。但如果有很大麻烦的话，你不能遗忘它们，就不要工作。试着清除杂念。当你开始工作的时候，让外部的世界远离你。
邮件列表中有很激动人心的事情吗？不要管它。你之后还有机会看到这则激动人心的事情的。立即关掉能填满你脑袋的应用吧：关掉 Twitter，Facebook，E-mails。你应该将手机静音，放在口袋里。你也许会说这同第一条，专注，很接近，但还有一条，吃饭的时候或者开 始工作之前不要使用那些工具。它们会将你与外部世界联系起来，分散你的注意力。
想想：大部分时间当你起床的时候你的脑袋是清醒，毫无杂念的。如果不是这样，做些运动也许有帮助（我会长跑）。如果你感到毫无杂念时，去工作吧，你能表现 得很好。等你不再工作的时候，这时候你可以让你的脑袋充满杂念了。你将会看到一整天辛勤的工作已经被你抛在脑后了，这是多么棒的体验。Twitter和 Co会消耗你大部分的能量。你也许会想：就是一分钟的事情。你错了，其实不止。
你其实已经意识到了吧。

2. 保持初学者的思维 | Beginner’s  Mind
还记得你作为一个新兵时候的日子吧。如果你仍旧还是个新人，就记住这个时候吧。你时刻渴望新知。每天都想象自己是一个新人。试着以一个新人的角度来看那些技术。这样你能更好的接受指正，或者不按常规出牌，开陈出新。也可以从一些新人身上学到许多好的想法。

3. 抛开自负 | No ego
一些程序员有个大问题：太自我。但我们没有时间来发展自我，我们没有时间成为一个摇滚明星。
是谁决定要做一个程序员的？你吗？不是，那是其他人？可能吧。你能比较到底是苹果好还是香蕉好么？不能。你是个个体。你也不能将你的方方面面和其他个体作比较。你只能作片面的比较。
你有某一点很厉害，你也不能骄傲自满。你Java很厉害？很酷。另一个人Java的确不如你厉害，但他保龄球比你厉害。Java比打保龄球更重要么？视情况而定。可能你可以依赖Java赚更多钱，但那个人也许因为有一些保龄球球友而享受了许多乐趣。
你可以因为你是个geek就沾沾自喜么？太自我的程序员不会虚心向他人学习。
Kodo Sawaki曾经说过：你没有那么重要。
想想这句话吧。

4. 不要想着职业目标 | There is no career goal
如果你想得到什么事物，并且不关心你现在的生活，那么你已经输掉了这个游戏。不要想象你之后将会达到什么职业目标。
工作20年，成为一个股东合作人？为什么不为了兴趣而努力工作呢？努力工作可以非常有趣。禅说，一日不作，一日不食。
我们不需要等到20年后才开心。你可以现在就开心，就算你还不是一个股东合作人，你也没有开保时捷。事情会很快就转变的。你会生病，你也可能被炒，你可能自我耗尽（如果你遵循所有的这些规律，我想可能性很低）。
在所有的这些事情发生以前，尽情的努力工作吧，快乐的工作。不要仅仅盯着学校里的成就，不要想着你没有得到的一个职位。
毕竟你终究会达到某个位置。你会有一些珍贵的记忆，也许还会有一个不错的职位，业绩辉煌的20年。每一天都是很棒的一天。
如果你觉得在你现在的公司工作不开心，立即离开吧。不要呆在一个剥夺你快乐的公司工作。当然这仅仅可能在富有的国家里可行，人们可以选择离开。但如果你生活在这么好的环境里，就这么去做吧。不要后悔离开，你没有时间可以浪费，你可能明天就死掉。

5. 停止争论 | Shut up
如果你没有什么要说的，就不要浪费时间和你同事争吵。这并不是说你懦弱。每天你都要工作，你不需要搞得其他人紧张。想象一下，如果每个人都这么做，那会是多么好的工作环境啊。有时这是不可能的。但尽力尝试这么做吧，你会喜欢的。
如果你不自负的话，便很容易做到不争吵，而是去关注那些你真正想说的事情。不要将“自我”和经验搞混淆了，记住：你是一个新人。如果其他人有好的想法，就去支持他的想法吧。

6. 留心\细心\意识 | Mindfulness. Care. Awareness
是的你在工作。但同时你在呼吸。即使你的工作有困难，你也需要聆听你身体的信号。你应该学习对你身体好的事情，譬如食物。你应该学会照顾好自己，以及留心 你所在的环境，毕竟你喝的水将会又流到河里去。因为你仅仅为你自己而活，你独自来到这个世界，也将独自离开。地球没有你照样运转。
不要工作在你不喜欢的环境。不要做不拿报酬的工作，这意味着你不会快乐，你不得不离开你的卧床。远离那些让你不开心的事物。不计回报的工作听起来是天方夜 谭吗？想想那些在黄金时间里做开源项目的人。如果你在邮件列表中订阅过一些项目，你可能已经知道这是多么热门的事情。如果你并不感到开心，就不要这么做 吧。我知道许多人做开源项目，但是他们并不喜欢。用Time Bill我追踪过我为开源项目花费的时间，我浪费了太多的时间，尤其是那些我并不喜欢的项目。
有些人认为只有当他们有消遣时间的时候，能在晚上有xbox玩，有酒喝才会感到开心。虽然有时享乐是非常不错的，但不代表你一辈子的所有时间都是快乐的。 如果你能避免你不喜欢的情况，请尽量避免（就像我上面提到的），但有时你不得不面对那些你不想做的事情。譬如人手将经理的Excel中的数据复制粘贴到 phpmyadmin中去。这些可能要花上几天，甚是枯燥。你感到极为无聊，但有时你不得不这么做。你不能因为碰到一个枯燥的任务就随意的辞职。禅宗大师 们也不会逃避他们的工作的。他们在4点钟起床（有时早些，有时晚些，取决于习俗），开始冥想和工作（他们认为工作也是冥想）。他们会做清扫厕所的工作，或 者做园艺，如果是斋饭僧，他们会做饭。他们会全神贯注的工作。不管他们做什么，他们都会全身心的去做，并且感到快乐知足。因为每时每刻，甚至是打扫厕所， 对他们来说都是他们的生活。
也就是说：如果你需要复制粘贴excel，也不要哭诉了。仅仅去做吧。不要浪费你的时间在抱怨上，它们会过去的。试着做个最好的复制粘贴者吧。
如果你得了心脏病死了，人们也许会说：“哦，他工作太长时间了，他经常为我在深夜里无偿工作。”没有人会指引你去另一个世界，最后一步要我们自己走。你不 能转换世界上的任何东西。什么都不行。所以你需要照顾好自己，每时每刻。如果你死了，就死了，如果你活着，就应该好好的活着。没有时间去浪费了。
在禅学中“心”是个很大的词（在任何一种形式的禅学中都是）。我不可能完全表示清楚它的含义。要明白“心”的不同的含义是很困难的。可能“意识”这个词对 你来说更容易懂些。你需要意识到你做的每一件事情。否则你就是在浪费时间。当然你可以这么做，取决于你自己，如果你喜欢这样的话。

7. 拒绝老板 | There is no Boss
是的，老板付你工资，他告诉你需要做什么，他也可以炒掉你。但没有必要放弃掉你自己的生活，为你的工作而生病。最终你的老板不能控制你了，也许你也失控了 – 请不要走上这条路。
回到你的老板：如果你允许的话，他可以让你的生活更加糟。但有解决的方法，如果他要你做你感到不开心的事情，或者违背你原则的事情，坚决说不。会发生什 么？最坏的情况，他会炒掉你。那又怎样？如果你生活在西方国家，如果你是个程序员（如果你在读这篇文章，那么你极可能是程序员），你会找到另外一份工作。
我并不是说对类似将CSV数据拷贝成HTML这样的任务说不。我说的是一个星期工作80小时的工作。或者你觉得你的孩子需要更多的关注。或者你被逼要炒掉 其他人仅仅因为你老板不喜欢他们。或者你是个顾问，但是需要为一个核电站或是为坦克编写程序（有些人会说为核电公司工作是多么的好啊 – 但这违背我的原则，而且仅是一个例子），你都可以说不。

8. 有其他爱好 | Do something else
程序员不仅是一个程序员。你应该做一些和电脑无关的事情。在业余时间，你可以去航海、钓鱼、潜水、冥想、军事艺术、玩尺八（Shakuhachi，一种乐 器）。不管做什么，用掉你剩下的能量吧，就像你工作的时候那么竭尽全力。兴趣爱好不单是兴趣，它也是你是谁的一种象征。当别人说兴趣不重要时，不要让他得 逞。现在我们可以拥有自己的爱好。我录了一些CD，写了几本科幻书（没有发表过，我需要更多的练习写作）。这些事情都能体验我是什么样的人，最终它们引领 我接触到禅学，以及写下这篇博客。最近我在练习尺八。这些都是我日常生活的一部分。

9. 没有什么东西是不可取代的 | There is nothing special
一朵花很美丽，但它仅仅是一朵漂亮的花朵，没有什么更特别的了。它一点也不稀奇。你是一个会编程的生命体，可能你很棒，但也没有什么稀奇的了。你仅仅和我一样是这个星球上存在的一个生命体而已。
你要上厕所，你要吃饭，你要睡觉。很久以后（希望如此）你会死去，你所创造的一切将会随之而去。就算是金字塔很久以后也会消失。你知道建造金字塔的人的名字吗？如果你知道，那么这很重要么？不重要。金字塔在或是不在，都没什么特别的。
同样你写的程序也一样。银行通过你写的软件赚钱。但当你离开之后，没人会记住你。这不是谁的错，这是时间的规律。你不需要担忧。如果你相信这一条规律，你会意识到上一个项目是非常有趣的项目。现在仅仅需要继续，专注的去看其他的什么事情。
如果你的公司因为财政原因倒闭了，不要担心。生命还会继续。我们不是真的需要一个xbox，一辆车或是什么其他的。这个世界上大部分人都生活中水生火热中。他们不在乎xbox，因为他们对于食物和水更加渴望。
所以，为什么只有你是独一无二的？仅仅因为你很幸运的生活在西方？因为你会编程？不，你没有什么特别的。你应该让你的自我感消失，放松的生活。享受花朵的 香气和颜色吧，当冬天来临时不要过于悲伤，春天到来时不要过于高兴。这是自然规律。当别人否认你的程序时也要这么宠辱不惊。因为公司并没有那么重要。

声明
我不是一个禅师。我仅仅在学习和练习。如果你认为有什么你需要更深入的了解，请教你当地的禅师。当然我可以试着在这个博客上回答，但我只是个初学者。不管怎样，我很乐意看到你们的评论，如果你喜欢这篇文章，或者用这篇文章的链接发条推，我会很高兴的。谢谢阅读！

啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样的 PSD 文件：
就哭了。

一般说来，这种类型的布局是小菜一桩。固定宽度，固定高度，向左浮动就解决了。但是，这个设计中内容的多少是可变的，这就意味着如果这些块中的一些内容比其他的多，就会破坏这个布局。

因为第一个展示项比其他项高，第五个项目就相对第一个浮动，而不是位于它下面了。基本上我们想要一个弹性表格的布局，但是适当的，语义标记。

我们以一个无序列表开始这个简单的页面，并把 display 设置为 inline-block:

效果在 Firefox 3， Safari 3 和 opera 中看起来没问题：

显然，在垂直排列上有些错误。嗯，也不算错误吧，这是正确的表现，只不过不是我们想要的效果。

这是因为每个

元素的基线是和其父元素

的基线对齐排列的。你要问啥是基线？一图顶千言那：



基线就是横贯上面文本的黑线。尽量说的简单点。inline 或者 inline-block 元素默认的 vertical-align 值 就是基线。也就是说元素基线要和她父元素的基线对齐。下面有一个示例：


就如所看到的，每个基线都是和文本 ‘This is the baseline.’ 的基线对齐的。文本虽然不在

• 内部，但是文本节点的父元素
  就指出了父元素的基线所在。

  总之，修正方法是很简单的： vertical-align: top，这样就能得到一个看起来不错阿网格：

  

  但是在 Firefox 2, IE 6 和 7 中，依然无效：

  

  从 Firefox 2 入手。

  Firefox 2 不支持 inline-block，但是它支持 Mozilla 特有的显示属性 ‘-moz-inline-stack’，这个属性和 inline-block 比较像。把它加在 display: inline-block 之前，FF2 会忽略 inline-block 而保留 -moz-inline-stack，因为它不认识 inline-block。支持 inline-block 的浏览器会使用 inline-block 而忽略之前的显示属性。

  1. li {
  2.     width: 200px;
  3.     min-height: 250px;
  4.     border: 1px solid #000;
  5.     display: -moz-inline-stack;
  6.     display: inline-block;
  7.     vertical-align: top;
  8.     margin: 5px;
  9. }

  不幸的是，有点小bug：
  

  坦白地说，我不知道什么导致了这个 bug。但是有个快速的修正方法。把

  • 中所有的东西用
    包含起来。

    1. <li>
    2.     <div>
    3.         <h4>This is awesome</h4>
    4.         <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
    5.         alt="lobster" width="75" height="75"/>
    6.     </div>
    7. </li>

    貌似

  • 中的内容被’重置’并且正确显示了。
    

    现在，转到 IE 7 上来。IE 7 也不支持 inline-block，但是我们可以欺骗它以使

  • 好像是 inline-block 的。怎么做呢？hasLayout，IE 的一个带来乐趣的神奇属性。你无法在一个元素上用 hasLayout: true; 显示地设置 hasLayout，或通过其他类似的简单方法，但是可以用其他类似 zoom:1 的声明来激发它。

    技术上来说，hasLayout 意味着，一个 hasLayout 设为 true 的元素负责渲染它自己及其子元素(把它和 min-height 和 width 联合起来，就得到了和 display:block 非常相似的效果)。这有点像神奇的精灵粉，把它洒在渲染问题上，问题就消失了。

    当我们给

  • 加上 zoom:1 和 *display:inline(区分 IE6 和 IE7 的星号 hack) 之后，在 IE7 中它们就可以像 inline-block 一样显示了：
    1. li {
    2.     width: 200px;
    3.     min-height: 250px;
    4.     border: 1px solid #000;
    5.     display: -moz-inline-stack;
    6.     display: inline-block;
    7.     vertical-align: top;
    8.     margin: 5px;
    9.     zoom: 1;
    10.     *display: inline;
    11.     }

    

    哇！差不多了，只剩 IE 6 了：

    

    IE6 不支持 min-height，但是多亏它对 height 属性的不正确处理，我们可以用它来代替。把 _height(IE6 下划线 hack) 设为 250px 使所有的

  • 元素高度为 250px，并且如果它们的内容大于 250px，他们会扩大来适应。其他所有的浏览器会忽略 _height。

    现在为止，对所有的浏览器都有效了，这是最终的 CSS 和 HTML：

    1. <style>
    2. li {
    3.     width: 200px;
    4.     min-height: 250px;
    5.     border: 1px solid #000;
    6.     display: -moz-inline-stack;
    7.     display: inline-block;
    8.     vertical-align: top;
    9.     margin: 5px;
    10.     zoom: 1;
    11.     *display: inline;
    12.     _height: 250px;
    13. }
    14. </style>
    1. <li>
    2.     <div>
    3.         <h4>This is awesome</h4>
    4.         <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
    5.         alt="lobster" width="75" height="75"/>
    6.     </div>
    7. </li>

    原文地址: Cross-Browser Inline-Block
    译文地址：跨浏览器的 inline-block

关于清除浮动的方法可以参照上次的博文内联标签的背景图片与清除浮动，算是对清除浮动的补充,列举下使用较多的三种清除浮动的方法：
1.>在要清除浮动后面嵌套空白div 并添加其一个定义好的样式clear。

2.>在要清除浮动的标签里添加样式：overflow:hidden;zoom:1,这么做比第一中方法是减少了很多无意义的标签。而zoom:1的原理是利用了IE的layout（关于layout可以参考http://www.ks-pe.com/article/36.html）
3.>关于第三种方法很多大型门户网站都的这个，与第二中方法类似应该是兼容性更加好一点。

清除浮动的方法很多，选择最适合的就可以。我比较偏向第二、第三种，如果都不好用就采取第一种。

IE 7 列表间距bug

刚刚说了ie的layout触发可以清除浮动bug，但是关于layout的bug也很多。
比如我在工作中遇到的一个IE7产生空白边距的BUG，它的触发条件是：在ul、ol列表项li中存在浮动的标签并且这些li是一行显示就会产生空白间距。

上面的代码理论上是没有任何间距，但是在IE7下会有空白间距，这个是因为overflow:hidden触发了IE的layout产生的。比如将overflow:heidden换成zoom:1问题同样存在。
而解决方法将该li也加上浮动属性（如float：left）。

嗯…好久没更新的我的博客了。最近爱上了wow..所以花了很多时间游戏了。还有就是..去健身房锻炼身体.“VeryBigMan”是要强力的,所以我没有更多的时间去做其它的事情（借口…）。

网页设计的工具有很多,不过我很喜欢Dw。如果将非常多的table布局的页面转换程web标准化（div+css)的页面，这会很耽误时间，但是一定会有简便的方法。

如果可以将一些标签替换掉就可以完成大部分了。如：font → span、table → div、b→strong、去掉&nbsp、tr、td等，例如下面一段代码：

是的，这只是一小段代码不但陈旧，而且还是一团糟。

哪么接下来要做的是：
1.菜单栏中编辑→查找和替换（Ctrl+F）。
2.查找范围:可以根据需要设为当前或者打开文件等，如果是指定文件夹或站点操作是不可逆的。
3.搜索类型:
1)源代码，如<br>→<br /> 然后全部替换即可。
2)文本,和源代码的区别是，它只搜索文本及js代码不包括标签，例如上面的一段代码：搜素”t”,只会搜到This title中三个”t”,其他会视而不见。
3）高级文本：在文本的基础上加入了标签及属性的判断，你懂的…
4）指定标签：这个是一个非常强大搜索类型
可以搜索指定的标签，例如：搜索所有class为“mian”的table，并将table改为div。

是的，动作栏下有许多选项，td、tr、font 标签等都可以去掉，它们都如此灵活而有用，所以应该一个个去尝试它，而不是说出来。上面的代码通过查找和替换可以改成：

是的，它不够完美。但是这已经足够了。

总结：Dreamweaver有一个强大搜索代码功能，它的功能远不止如上所说。如果只用来搜索替换文本，那你更应该去尝试它。因为它能做的事情太多了..如：当你想将站点中所有的<span class=”tltie2″>***<span>改成h3、当你发现某个地方用ul li比dl dt dd 更好的时候、如果你是个懒人就不得不去了解它……

来自www.ibelieveinadv.com。

Tags: 潮流 服装

很高兴能被邀请参加WEB标准化交流会，而这期的主题是“前端工程师应该如何学习javascript”，说起JavaScript接触有很长一段时间了，但一直一来都是去网上下载现成的代码改一改，一些语法参数的，压根就不去了解。可越来越多的应用及工作，让我不得不去了解她。于是买了本《锋利的jQuery》来学习，虽然我不善于交流,但是毕竟去和此行业内顶尖的高手分享下学习、工作的心得是没有坏处的。

交通还是很方便的，2号线淞虹路5号出口就到了，这里要感谢下携程网提供的会议室。一轮的自己我介绍完，就开始交流的话题，基本上高手们都是从最基础的js基础开始的，书籍一般是《dom编程艺术》和《javascript权威指南》，而高手们都不屑于各种插件的，但是这两本书太厚了，也太细了，我是没有耐心看完这两本，我自己的目标是掌握JQuery库，然后能做到自己做出来的前台能很好完成javascript效果就好了，毕竟我不是吃这碗饭的，底层的JS还是交给大神们。

想通过一次交流会提高自己的JS能力，是不现实的。和大神们交流学到好的学习方法、学习的目标、以及工作的经验 这才是最重要的。也许是javascript的话题比较枯燥吧，居然没有一个MM来，还是比较可惜的，所以激情少了很多，交流会上我还是比较怵的。不知道怎么的，从小就是这样，到人多的地方就比较紧张，到熟人一边就成老油条了，还是见识太少，以后要多参加才是。

周末去了奉贤..上海郊外的风景是非常美丽的…宽阔的郊野，让人顿时释放了工作的压力..特别是万佛阁的附近..似乎也充满了灵气。

瑞云重重让人感觉置身与另外一个世界，四周安静完全与大城市的繁华相近而远.不过适逢重建没能看到旧貌..也没看到完整新貌实属遗憾。

Continue reading »

总结一下今天遇到的问题…

1.内联标签添加背景色…如<a>、<span>等..简写代码需要防范隐形杀手“空格”。
如.productlist a{background:url(../images/close.png) 0px 2px no-repeat}是正确的，
而.productlist a{background:url(../images/close.png)0px 2px no-repeat}则IE6不会识别.页面也不会显示如何背景图片..
因为url(../images/close.png) 与0px少了一个空格..
如果内联标签中没有任何内容如：<a href=”#”></a>.即使通过pingding:100px;设置出一个空白区域，在各种ie中还是无法显示..添加一个空格或者&nbsp;即可。

2.清除的浮动的方法：一般是clear:both。但是这样会多出额外无意义的标签，如<div class=”clear”></div>，而overflow:auto;或overflow:hidden;也清除浮动，加上_zoom:1或_height:1% 则是为了兼容ie6。

南非世界杯除了精彩的比赛，裁判的表演也令人大开眼界，开赛以来黄牌红牌满天飞，该罚的伐了，不该罚的也罚了。

更可怜的英国队，却输给了裁判。在关键的2比2逼平的进球中却被判做无效。这给刚刚恢复士气的英格兰队当头一棒。或许这球算进了英格兰也不一定会赢，但是无疑扼杀了英格兰最后的希望…裁判imba!