This two songs lingering in my ear all day.
You are Beautiful
I saw your face in a crowded place
and i don’t know what to do
cause i’ll never be with u…
Goodbye My lover
Goodbye my lover.
Goodbye my friend.
You have been the one.
You have been the one for me.
I am a dreamer but when I wake,
You can’t break my spirit
it’s my dreams you take.
And as you move on, remember me,
Remember us and all we used to be
明天是小优优一岁的生日 我的April Angel
看了姐传的照片 小丫头已经长得我都不认识了
生日快乐，baby
明天很多人都会因为你而聚在一起 可是我却不能到
就像以前一样 我一直在缺席
希望能有机会我们一起过生日
————————————–
给自己的生日快乐 又到426
上周听奶茶新专辑 有句歌词很喜欢
“我没有 对不起那个 十五岁的自己 ”
做自己想做的事情 过自己喜欢的生活 基本做到
新的一岁 认真生活 学会表达 认识自己 忠于自己
坚持理想 做一个真实的人
谢谢在我孤单的时候 说会一直爱我的人
就这样 生日快乐 我对自己说
昨天又把RescueTime 下载下来 准备统计下每天的工作量
之前用过一段时间，很喜欢他的报告的那些图标。之前用Evernote记录time log 总是记着记着就忘记了，等晚上的时候又想不去来都做了什么。
这几天学新的东西，一直在想办法让自己可以更高效一点。所以就又下载下来 管理一下自己的时间
图中藏青色的是做开发的时间，紫色是聊天，交流之类，土黄色是social network的那些网站之类
这个软件自动记录你在每个网站，软件商所花费的时间。这样就不会不知不觉不知道时间都去哪里去了
今天还算是比较productive的, 就是有些累。
再推荐一个小软件 workrave， 设计为防止职业病（比如腕隧道症候群、重複使力傷害）。
可以自己设置多久小休一次，多久大休一次。到时间以后，所以的鼠标键盘操作都失效。 强迫你离开电脑休息一下。
这样个也是可以用来提高工作效率的，在规定时间内按时完成，不要拖拖拉拉。
12月初的时候，蚊子师父帮我接的网易的天下贰在新浪游戏专区的页面设计。 基本上市连熬三天。搞定了， 师父帮忙很多，也学到不少东西。
今天早上又被呼叫，有新单子。 于是乎去查了下新浪专区（http://games.sina.com.cn/o/z/tx2/），页面终于换成我的设计，只是只是怎么只改了一半。 品质差了很多。。上图
设计图：
两周前在Twitter上看有人宣传《Rework》， amazon上的prepaid只要5镑多 就买来一本
Rework is the new business book from 37signals. 最近要读的书太多了，时间都不够。
Wall E prepared to read it.
He is reading now
让我们来看看他在读什么呢， start up呢。 Wall E 很快就要有自己的垃圾回收场了呢
生活算进入正轨 其实想想也没有真正意义上的正轨
正轨不正规的 不一样是在生活嘛
所以这是心态问题
新家的门口一个很大的小院子，邻居的小孩们也会在这边一起玩
周六的早上拿出久违的轮滑鞋跟桩
路虽然不是很平坦 但是又能在轮子上飞翔 也是种快乐
滑的时候，引来小朋友的围观
可爱的小Lucy跟在我旁边帮我捡桩
中午跟房东一起混去打羽毛球
老胳膊老腿 太久没运动 都快断掉了
还被人笑用打网球的姿势打羽毛球 真是shy啊
shady哥把电子琴送我了
现在又开始练那首没有练完的《遇见》了
每天练一个小时
生活变得有滋有味
最近在读《在路上》，
因为还年轻，渴望在路上
虽然现在确实很多不顺利的事情， 但年轻的时候经历一下这些，回头看看，都还是挺有意思的事情。
不用抱怨什么，我在路上，在向我憧憬的地方前行。这就够了。
忽然想起当年跟老人和淼一起去西藏的时候，一路上很苦
为了省钱，去混兵站，搭货车，露营，每天三个人买3块钱馒头吃。
但是很开心，这就是在路上
就这样好两三个星期后， 当我们坐上要直达拉萨的车的时候 都有种莫名的紧张
我们这就是要到了吗？ 有些不舍， 不舍在路上的感觉
重要的不是结果是什么 而是我们在这个过程中所经历的
生活就像是一个长长地旅途
我们一直在路上
今天要来学的列是这个《Progressive enhancement: pure CSS speech bubbles。Demo页面在这里。Progressive enhancement渐进增强 在《sliding label》 中有提到。这个概念真是无所不在啊，一定要好好掌握。
图1
图2
今天学习的方法呢，还是copy html+css源码来分析 看别人是怎么写代码 怎么实现的
在.container 这个div里面出现了 下面的代码
<header> <hgroup> <h1>Pure CSS speech bubbles</h1> <h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2> </hgroup> <p>The demo page for <a href="http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/">Progressive enhancement: pure <abbr>CSS</abbr> speech bubbles</a>.</p> <p>For a detailed explanation <a href="bubbles.css">view the <abbr>CSS</abbr> file</a>. It is heavily commented.</p> <p>All examples use simple, semantic <abbr>HTML</abbr>. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.</p> </header>
Div 里面出现了header tag， 还有HTML 5的新的元素, hgroup.
The header element represents a group of introductory or navigational aids.
Note A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logosheader元素代表了一组介绍的和导航辅助信息。
注意这里的header元素通常想要用来做section的标题（1个h1-h6元素或者一个hgroup元素），但是这并不是必须的，header元素也可以包括section的目录，搜索表单，或者任何相关的logo。
(来自HTML5 (Author Edition)的解释)
hgroup 是一种header的特殊形式，必须包括切且只能包括一组(至少两个)h1-h6。这里有篇文章《HTML5 structure—header, hgroup & h1-h6》详细讲，应该怎么用header，hgroup和h1-h6来做文章的结构。
先介绍下对应图一的画法
HTML 代码
<p class="triangle-isosceles">这是图一的例子</p>
Css的代码
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
z-index:-1;
bottom:-30px; /* value = - border-top-width - border-bottom-width */
left:50px; /* controls horizontal position */
width:0;
height:0;
border-width:15px 15px; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#f3961c transparent transparent;
}
从上面的代码可以看出， css分为两个部分 .triangle-isosceles用来画bubbles； .triangle-isosceles:after用来画三角。 作者的代码真的写的相当漂亮清晰哈。 用渐进增强的概念，先满足最基本的内容需求，然后加入css3才支持的圆角功能呢，和渐变的背景。然后用伪元素来画三角.
.triangle-isosceles：after的意思是在 triangle-isosceles之后插入内容。
content:”\00a0″的意思是插入空格，其实也就是占一个“坑”，至于这个坑长什么样子就要有border-width来决定了
bottom的值是负的（上边界和下边界的宽度和）。这个决定了“坑的位置”，靠近bubble
如果想要标准“坑”是三角的宽度和高度都要取0
上面的这些代码就可以画出下图
其他例子可以见demo页面和css文件，自行研究哈
