A sound name desired

A sound name makes sense through one's life.

Sound here means easy to be kept in mind or the name is consist of words of simple structure.Besides,a name with the same words or same prononciation of a famous person is also sound.

If you have a sound name,you'll have a higher chance to be remembered.Teachers will ask you questions more frequently than others.Thus,you have a happier mood.You'll be much probably positive in your life and much closer to success.

As for me,my name is so complicated. Teachers must consider me as complicated as my name. Besides, a complicated name often goes with words seldom seen. If a teacher asks you questions,she is taking the risk of misread.

It is no exaggeration that the total times I was questioned can be counted with my fingers and toes,which sometimes makes me frustrated.So I hope my own baby will get a sound name. That's a deal!

What kind of girl will you be ten years later?

You girls who are in your twenties,have you ever think about what kind of girls you'll be ten years later?

While chatting with my sister,I find that her signature has changed.It goes,'Time is the knife of a butcher.'

I ask her why.She doesn't answer but sends me a picture.It is a woman with a baby in her arms.The woman is fat with casually short hair and obviously double chin.Her jeans go tightly with her fleshly legs and bulging belly.Her light beige coat is a common one,but her smile,which would appear on the face of any mother,tells her happiness.

'Do you still remember Tingting?'my sister asks.I'm shocked.Unrecognizable!Tingting is my sister's schoolmate in high school.In my memory,she was thin and tall with dark skin and short hair ,too.But she looked cool and shiny then.Now she is twice or more fatter than she was.

Sister sends me another picture.This time,it is a woman with plain curl hair,a little fat body,sitting on the bed with a plush toy in arms and smiling.You can't say that she is not beautiful.However,it is true that she is the kind of woman who has lost her bloom and would not catch any attention in crowd.'She is Seagull.'my sister surprises me again.My sister is four years older than me.I was in middle school when she was in high school.But i was quite familiar with her classmates.At that time,I think Seagull was the most beautiful one of my sister's friends.She kept long hair and sometimes bound it up into two.She was thin and looked prettily like Sailor Moon when she was in dress.

Years passed away.I didn't see my sister's classmates any more.But beyond my expectation,they've changed so much even when they're younger than 30 years old.

'Now you can understand the meaning of my signature.'said my sister.Yes!I smiled to accept the shortness of women'youth.Now I understand why nowadays more and more women would like to say to The Third Woman that we all had youth and charm before.
---------翻译自《阅读时间》

Walking Dead

S04E16

In such a world, you can survive only if you turn yourself into a monster.

It turns out that Rick was the one that killed Luke, a member of Daryl's new group. I was wondering since that group can hardly be called a group, why do they revenge Luke(为Luke报仇). You know that they don't have feelings for each other, they don't have to be brothers. They kill their member without regret. They found Rick. And push them nearest to the threshold of death. Then, the monster Rick came out. He deeply bit the arteria of his enemy and killed him. That shocks me. Incredible! He stagged another man's throat with a knife again and again. He totally lost himself. His son seemed afraid of him. But he quikly sucked up and tried to be a momster to survive.

Finally they all arrived at the Terminus. The peaceful phenomenon is so weried comparing to the chaose outside. Yes, there is trick. Terminus is a trick. The fellows arrived before, there is no sign of them. Instead, their belongings appeared on the original residents of Terminus. And they claimed to find them on dead body. Realising they have no need to hide, the residents torn up their fake mask and turned against them. They drove Rick and his companions to a carriage, where those friends finally reunioned.

This is the end of season 4. We see bloody bones in the backyard and I guess the residents of Terminus are actually luring people in the name of survive and shelter to Terminus in order to feed on them. Rick seemed confident to fight back and obviously he had back ups. Watch your head, you vicous residents. You have rovoked people you should't have revoked.

S04E15

In this episode, we still have no idea where Beth is. So does Dyrel. But, don't worry. The outdoor cat seems to gradually fit into the group. I don't know if the group members are indoor cats. They don't have to be brothers. They just need you to follow the rules. If any rule was broken, you'd better watch yourself. They will beat you into death, turn you then kill you again, carelessly without any feelings.

Glen, Tara, together with the "save the world" team find the clue left by Maggie and her fellow and finally catch up with them. The script writer is a bad guy. Eugene know exactly what caused the breakout. But he has never given away a word so far. All we can see is, yeah, he is a smart and kind guy. In the tunnel, there is a moment, Glen and Tara were surrounded by walkers and would be pouced on. I think they they're ready to die but still hope there could be miracle. Lucky them, there is miracle.

They are the first group to arrive the Terminus. The others will arrive in the next episode. And what exactly is Terminus? Can it save all the people or it is just another trap? We'll see it in the next episode.

Python 和 JS 的不同点___类

Python和JS有很多的不同点,最近看到了类,就总结一下在类上它们有什么不同。

__block1__

#Python
__metaclass__=type #新式类
class SongBird:
    song = 'squawk'
    def sing(self):
        print self.song
        
#新建一个实例
bd = SongBird()
bd.sing()
#squawk
__block2__

//JS
//构造函数
function SongBird() {
    this.song = 'squawk';
    this.sing = function(){
        return this.song;
    }
}

SongBird.prototype = {
    sing: function() {
        return this.song
    }
}

//新建一个实例
bd = new SongBird();
bd.sing();
//"squawk"
形式

从形式上看,python类内部的方法必须传self,这是对自身的引用,用来绑定实例,而JS就不一定要传。方法对类内部函数外部变量的调用就是靠self来引用的。而类的属性,对Python来说就好比在函数内定义变量,除非包在子函数内,不用引用self,而JS的属性需要引用this。

创建一个实例时,Python使用bd = SongBird(),而JS使用bd = new SongBird()

Python有自己的一套魔法方法,若要对类进行初始化,会用到__init__(),它在新建实例的时候自动会被调用,可以用这个方法来进行初始化;JS一贯的用或运算来进行初始化,e = e || window.event,或者在新建实例的时候把要初始化的值先传进去。

类的继承

Python中子类可以扩展超类(基类)的定义,通过将其他类名写在class语句后的圆括号内可以指定超类

__block3__

class Filter:
    #魔法方法,新建实例时会自动初始化
    def __init__(self):
        self.blocked = []
        
    def filter(self,sequence):
        #列表推导式,滤除sequence中与self.blocked内容相同的成员
        return [x for x in sequence if x not in self.blocked]

#指定超类Filter,即继承Filter中的方法和属性
class SPAMFilter(Filter):
    def __init__(self):#重写了Filter超类中的__init__方法
        self.blocked =['SPAM']
        
>>>f = Filter()
>>>f.filter([1,2,3])
[1,2,3]

>>>s = SPAMFilter()
>>>s.filter(['SPAM','apple','SPAM','orange','SPAM','SPAM','watermellon'])
['apple','orange','watermellon']

由上面的例子可以看出,s继承了Filter中的filter()方法,子类用了与超类相同名字的方法就会将原来的方法重写,成为自己的方法。Python也可以多重继承,只要在class语句后的圆括号内制定多个超类,用逗号隔开。但是要注意的是,如果超类中有属性或是方法重名了,写在前面的超类会覆盖后面的超类

JS的继承采用原型机制,一个对象的原型继承另一个原型,在继续继承下去就会形成一个原型链。在调用一个方法或属性时,首先从该对象的原型中去找,如果没找到再在上一级原型中找,往复下去知道找到该方法或属性(如果不存在就会返回undefined)。

下图是JS权威指南中关于构造函数,原型和实例的图示。每一次新建一个实例时,它返回的都是以构造函数的原型为原型的一个对象,构造函数中的this其实是对实例的引用。

__block4__

function Animal() {
    this.canEat = true;
}
Animal.prototype = {
    eat: function(){
        if(this.canEat)
            return "Ahaaaa!";
    },
    sing: function(){
        return "mama";
    }
}

function Bird() {
    this.song = "squwak";
}
//以Animal的实例为原型
Bird.prototype = new Animal();
Bird.prototype.sing = function(){
    return this.song;
}

>bd = new Bird();
>bd.sing();
"squwak"
>bd.eat();
"Ahaaaa!"

实例bd调用eat()方法时,首先在自有方法(非继承来的)里找,没有找到该方法。而后又去继承的原型里找,找到Animal的实例,又去该实例的原型里找找到了eat()方法。Animal的原型也可以继承其他的对象,这样就构成了原型链。

重写了父类的方法怎么重新使用?

在代码__block3__和__block4__中子类都有重写父类的方法。如果不再需要这样的方法就没有什么问题,如果说需要,比如说做一些初始化,那子类可能会初始化不充分,有的属性调用时显示undefined或not defined。

那如何重新调用父类被重写的方法呢?

Python有两种方法,调用超类构造方法的未绑定版本,或者使用super函数。

__block5__

#调用超类构造方法的未绑定版本
__metaclass__ = type #使用新式类
class Bird:
    def __init__(self):
        self.hungry = True

    def eat(self):
        if self.hungry:
            print 'Aaah...'
            self.hungry = False
        else:
            print 'No, thanks!'
            
class SongBird(Bird):

    def __init__(self):
        #Bird.__init__(self)
        self.sound = 'squawk'
    
    '''
    def __init__(self):
        super(SongBird,self).__init__()
        self.sound = 'squawk'
    '''

    def sing(self):
        print self.sound

#Bird.__init__(self)未加这句话之前执行结果
>>>sb = SongBird()
>>>sb.sing()
squawk
>>>sb.eat()
AttributeError: SongBird instance has no attribute 'hungry'

#加了Bird.__init__(self)后的执行结果
>>>sb = SongBird()
>>>sb.sing()
squawk
>>>sb.eat()
Aaah...

在调用一个实例的方法时,该方法的self参数会被自动绑定到实例上(即绑定方法)。如果像上面的例子中那样直接调用累的方法(Bird.__init__),实例就不会被绑定,这样就可以自由的提供需要的self参数。

由__block5__的段落注释可以发现,它使用了一个super函数,它只能在新式类中使用,它的参数是当前的类和对象,调用它返回的对象的任何方法都是在调用超类的方法,这时候超类的__init__方法就可以以一个普通的绑定方式被调用。

JS需要调用父类的构造函数,可以用call调用,this指向子类。假设有两个类,子类是Chinese,父类是Person。要在Chinese的实例中调用Person的方法,可按如下方法。第一个参数是this,后面的参数是父类新建实例是需要的参数
Person.call(this[, arg1[, arg2[, ...]]]);

CSS Transfrom 3D

博客头部用了一个3D效果的幻灯片,它的制作其实很简单,主要分为两部分:一是在父元素上做好3D视角视距的准备,二是子元素在3D空间的位置摆放。

前期准备(父元素):
transform-style: flat | preserve-3d

flat表示子元素位于父元素平面内,preserve-3d表示子元素在3维空间内。

perspective: none | length

perspective表示z=0平面与用户之间的距离,0或负值无效。z>0的3D元素会变得更大,z<0的3D元素会变得更小。按需要设置,如果设的过小就好比自身是一只蚂蚁在看一个庞然大物,会有较大的形变,所以一般设的较大,但过大就没有意义了,可以自己按需要调节。我设的是1200px.

perspective-origin: 50% 50%(Initial value)| 百分比|长度|… 

perspective-origin决定了用户视线的焦点,被perspective用作消失点(vanishing point)。

子元素的位置摆放:

开始在做这个幻灯片的时候花了很多时间,因为算转过角度后的元素的x,y值,怎么都摆不好。后来联想到canvas里translate、rotate等移动的都是坐标系恍然大悟。每个元素都有自己的坐标,设值的时候是相对于他自己的坐标系而言的。这样一来我的幻灯片将每个元素转过相应的角度之后只需沿着各自坐标系的Z轴向前移相等的距离(我的是134.5px)。

做好了以上的两步就可以对父元素进行变化了,这里用一个定时器,每隔一段时间将Y轴转动120度,当然还可以配上自己喜欢的animation。

css-实现小图片在大容器中垂直水平居中

19号阿里巴巴的笔试题中有一题是这样的:当图片小于容器时用css实现水平垂直居中,当时特没水准得写了:

img {
    margin: auto auto;
}

单纯的想到使div水平居中可以用

div {
    margin: 0 auto;
}

img是行内元素,设置margin: auto也不起作用。

解决方法(网上查的):

原理:
在非IE的主流浏览器中,设置属性display为table-cell,即可支持垂直居中vertical-align属性。
而针对IE6/7浏览器,设置font-size。因为img和文本可以通过设置img的vertical-align:middle,居中对齐。(原理请参考《HTML权威指南》讲img的章节)因此,设置font-size为容器高度,再通过img的vertical-align属性,即可完成在容器内的垂直居中对齐。

遇到的问题:
字号大小与文本实际高度不同。如例子中设置容器为350×350。font-size:350px的时候,字体实际占用的高度要大于350px。此外同样size的不同的字体占的高度也不同。如果只为了简体中文系统用户,可以选择宋体,因为宋体的文字占用高度与字号完全一致。这里用的是淘宝怿飞的方法,他选用的是Arial字体,这种字体为系统自带字体,可以避免因编码不同带来的问题。根据Arial字体大小大约是其高度的0.873,所以此时容器若为350,则字体设为350*0.873=305px.

适用情况:
图片尺寸小于容器尺寸,需要做水平和垂直居中。事实上当图片大于容器时,容器被撑大到和图片一样大。

以下为效果图:

 

live demo: http://jsfiddle.net/BJRz7/2/

使用canvas 需要注意的几点

clearRect(x1,x2,width,height)

原本认为canvas一个令人不愉快的地方是,它不能部分擦除,把不变的东西保留下来,把变化了的擦除进行修改。clearRect()带来了福音。它可以清除指定矩形内的像素,不管是stroke出来的线条还是填充的形状。

这是没有经过clearRect之前的效果,它由一个矩形、两个半圆和一些锯齿形线条组成。在形状的组合上还有一些情况,就是它们的边界很明显,所以拼接时在拼接处加了一个像素的重叠。

这是使用了clearRect之后的效果。整个图经过了45度的旋转,所以画起来比较方便,半圆的角度也都是π/2的整数倍。还有比较多的是给canvas重设宽高值,这样它就会自动除去整个canvas上的像素,整体擦除。

closePath()

closePath()的作用在于它可以把形状的起点和末点仪直线的形式连起来。如果之前没有定义beginPath(),则以最开始画的点为起点。否则就以最近的beginPath()为起点。beginPath()会是下个形状和上一个形状脱离,重新选择绘图起点。最好是成对出现,这样就可以避免形状之间的牵连(上个形状的末点会合下个形状的起点连在一起)。

下半部分的图没有使用任何beginPath()和closePath(),所以首末点和中间形状间的首末点都连在了一起。

save()和restore()

save()restore()是比较使用的工具,它们分别用于保存当前绘图状态,获取上一次存储的绘图状态。绘图状态是指当前绘图说用的样式(style)和变形(transform),包括strokeStylefillStyle,globalAlphalineWidth,lineCaplineJoinmiterLimit,shadowOffsetXshadowOffsetY,shadowBlurshadowColorglobalCompositeOperation等属性以及一transform和clipping path。绘图状态被存在一个栈(stack)内,每一次调用save()都会把当前的绘图状态压到栈内。每一次调用restore()都会把靠近的存储状态调出来,回到那个绘图状态。这样就可以很方便的在不同的状态之间转换,而不用重新设置。

下面是一个例子:

 

(function(){
    var canv = document.getElementById('canvas')
    ,   contxt = canv.getContext('2d');
    contxt.fillStyle = '#379aff';
    contxt.arc(200,200,100, 0, 2*Math.PI);
    contxt.fill();
    contxt.save();
    contxt.fillStyle = 'white';
    contxt.beginPath();
    contxt.arc(200,200,80, 0, 2*Math.PI);
    contxt.closePath();
    contxt.fill();
    contxt.save();
    contxt.beginPath();
    contxt.fillStyle = 'black';
    contxt.arc(200,200,60, 0, 2*Math.PI);
    contxt.fill();
    contxt.restore();//白色
    contxt.beginPath();
    contxt.arc(200,200,40, 0, 2*Math.PI);
    contxt.fill();
    contxt.restore();//蓝色
    contxt.beginPath();
    contxt.arc(200,200,20, 0, 2*Math.PI);
    contxt.fill();
})();

canvas 做的猜字游戏

用HTML5 canvas 做的小游戏,猜字母。字母为电脑随机产生的a到z之间的一个字母,一共有3次机会(可以修改),并且每次猜测之后都会有提示,正确的字母会在游戏结束后显示。下面为主界面,它是由canvas的toDataURL()方法导出的图片。

 

程序主要分三块:initGame(),keyPressed(),drawScreen(),最后还有导出图像的函数createImageDataPressed()。

整个图形是由HTML5 canvas画的,每一次按键都会触发一次keyPressed()事件,事件触发后设置一些变量,如按下的键,剩余的猜测次数,然后对canvas重新绘制,不重新绘制它会和之前画的重叠在一起。对canvas的height或width设置一次值它就会重新绘制,这是它的巧妙之处。但是不能做到保留不变的,绘制变化的部分,所以有好有坏。这一特性经常被用来清除画布内容。

第一步:设置一些全局变量,以便各个函数能够随时读取。

以下是要设置的值:

index为待猜测字母在letters数组中的索引值,它由初始化函数initGame()产生,index = Math.floor(Math.random()*letters.length);js的Math.random()产生的是一个大于0小于1的双精度浮点数。

第二步:主要函数

初始化函数主要对前面的变量进行初始化,并且对按键事件建立监听。

事件触发之后就能绘制图像了。这里的关键就是对按键事件的监听。其中函数fromCharCode(e.keyCode)为判断按下的是什么键的提供了很大的便利。它返回按下的键的值,然后就可以在letters数组中遍历,如果没找到,即返回-1,则用户没有按要求按下字母,返回的是>=0的数字,就可以与index相比较判断用户输得字母是低了还是高了,a方为低,z方为高。如果与index相等,那用户就赢了。但是不知道是不是编码的问题,按下其他键比如空格键、分号、逗号等它显示的是希腊字母。letterToGArray[]数组初始化为空数组,只有游戏结束是才会给它push进去一个值,即letterToGuess。

drawScreen()就没有什么悬念了,都是一些基本的操作,不做展示。还需值得一提的是canvas的toDataURL(),它能将canvas以图像的形式导出。但是从它的名字可以看出,它将返回的是图像的数据,以便存储或导出。

function createImageDataPressed (e) {
    window.open(canv.toDataURL(),"cavasImage","left=0,top=0,
width="+canv.width+",height="+canv.height+",toolbar=0,
resizable=0");}

live demo: http://www.tomo.im/guess-game

<img>标签的alt和title属性

上图是一个可折叠的list@dribbble,它由四个带链接的图片组成。注意到上面的类似于tooltip的文字,它是<img>title属性起得作用,当然IE下情况有所不同。

alt

定义alt属性是<img>标签必要的属性。当图片无法正常显示时,它被用作图片的替换文字。

使用:当图片无法找到或网络较差而无法正常显示,抑或者读者使用的是屏幕阅读器时,alt属性被用作文字替换,这也遵守了W3C的accesibility(易用性)标准。

语法<img alt="_text_">;

  • 当图片没有什么意义只用作装饰时,  alt="" ;
  • 如果图片包含了信息,text需要对信息进行说明;
  • 当图片包含在链接,即<a>标签内,text需要说明链接要跳转到哪里去;

支持:所有现代浏览器

title

定义和使用title属性不是<img>标签所必需的属性,当用户hover在图片上时,title的值将以tooltip的形式出现,对用户起一定的提示作用。title属性不是必须的,它更倾向于对用户体验的考虑。

支持:所有现代览器

注意:IE9之前的IE浏览器会将alt的值作为提示来显示,前提是title不存在,title存在时它还是会优先显示title的值。

<a href="www.xxx.com"><img alt="share page" title="share with others" src="images/share.png"></a>

 

上图是IE8(IE7也一样)下显示的内容

title不存在时,则显示alt的值。在firefox和chrome下都不显示任何文字。实际上这是IE的一种错误行为,它并不符合HTML规范。

visuals vs text

每次在食堂吃完饭,就要端着盘子去一条长长的滚动条那儿放盘子以及将筷子和勺子分别放到相应的铁盒里回收,铁盒不大,分别有“筷子”、”勺子“的字样。每次分类前总是要犹豫一下,遇到人多的时候,一不小心就会放错;但是,在食堂的另一边,有两个大大的塑料盒子分别用来放筷子和勺子,没有贴分类标签,放之前能很清楚的看到里面放了什么。这时候我好像几乎没有犹豫过,哪个归哪个。

今天在slideshare上看到一个ppt讲到怎样把ppt讲得引人入胜.其中有一条是这么说的:不要光说,要向我们展示。要知道人类处理图像的速度比处理文字的速度快60,000倍(美国3M公司,明尼苏达矿业与制造公司的研究结果)。就好像说,看到一个圆和跟你描述到定点距离相同的点的集合哪一个更快呢?相信谁都会是看到图像想到的更快。

只有当我们的思想,我们所说的话与具体的场景联系在一起,我们的大脑才真正会处理这些文字。文字是在短期存储内处理的,而短期存储内我们只能记忆7+/- 2位信息,所以美国的电话号码都是7位(这是有研究根据的,而不是任意定的位数)

中国有句古话:耳听为虚,眼见为实。人们认为,起码我也是这样,眼睛看到的最有说服力。所以对于网站来说,设计很重要。好的网页设计让人觉得这个网站更可信。还有对于现在那么多电子商务的网站没有什么比放上实实在在的照片更有说服力了。

-----部分引用自The Power of Visual Communication

  • 收获1:最近有ppt要讲,要多注意使用图像,或是流程图,而不是单纯的文字。
  • 收获2:  网站设计很重要,好的设计会让用户更加信赖这个网站。
  • 注意:讲了图像的好,当然也不能极端,图像和文字的完美结合才是最完美的。