几种香料的翻译, some kinds of spice translation

肉豆蔻: Nutmeg
肉豆蔻皮;Mace
 荜菝 ;Long pepper or India long pepper(pipli)
良姜：Dried galangal
党参: Dangshen
丁香：Dried cloves
八角：star anise
香叶：Bay leaf
 草果： cao guo
茴香籽：Fennel seeds
白芷：Angelica dahurica, or bai zhi, Chinese Angelica, the Garden Angelica, Root of the Holy Ghost
当归：Angelica acutiloba or tōki or dang quai

Angular js Diary 1,2

 Today is my first day to restart studying Angular js. Honestly, i did not understand it well, so i do not like it. However, this is my fate to try it again. Good luck for anyone has same fate as me!

 I am still happy i did my first Angular js Page

 the code is very easy. In this example, just helping me to understand how angular work, and some terminology.

Notice:

     1. add link of angular.min.js
     2. do not forget to add ng-app, it controls which part would implement angular js.
     3. {{}} this one is named binding expression.
 

here is how binding expression is working.

and

                       

Day 2

1. module, it is like one package of Main() method.

   using module() method to create.

 module also can depend on another module.

2. controller, is javascript function.

    we also need to create controller too

3. register controller with module.module is like a container for different parts, i.e. controllers.

4. do not forget to add directives to html, ng-app and ng-controller.

5. add link app.js

Now you can see the result

(there is just one result, because I only put ng-control in first div)

that is all for today, thanks to kudvenkat, here is his video link;

https://www.youtube.com/watch?v=zKkUN-mJtPQ&list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl

GreenSock Learning, TweenLite, TweenMax basic

1. TweenLite.from (object x, time, {opacity:0, left:"1000px"});
 
     This Is an function, you can let one object moving from this position. Whereas, now you create this object, this position is the ending position. The location from function is where object moves from.

Left means distance from left-margin.

However, one thing is important here, which is in CSS, position has to be relative. Because it means that The element is positioned relative to its normal position. So if you do not put it, computer does not know what is the “left” meaning.



The second way:

TweenLite.from(document.getElementById("examp2"),10,{x: 1000});
Second way which is similar, but no need to set relative position. And set x needs to add {}.

2.

     

           TweenLite, to(document.getElementById(“”), 3,{x:1000, delay:3, ease:Strong.easeInOut});

This function is moving to this position, same as last one just opposite direction.
Variables:object, is setting x,y,delay, Ease ……… format:{x:100,delay:3}
Delay is going to happen before function starts.
Ease: giving a specific “feel”, it is the function how the object moves.
Alpha: visible value, for instance, if it TweenLite.from(……alpha:-1), object will be invisible to visible(from-1 to 1). Whereas value less than 0 is invisible.

                                                     升级版的公式(Lcomplex version)

In this function, variables: object, is more complex than before. It includes onComplete,(which is required function, means after moving, this function will be triggled), onCompleteParams(requires array, ??????)
Document.getElementById(“”).innerHTML=””; 

It is changing the element content, as in our element, there is no content, so it is adding content(letters) to our element.

3.   Document.querySelectorAll()

Here is one example to show how this function works. There are 2 <p> tags, this function could distinguish which element to use. So we do not need to declare another class or id to distinguish between <p> element. (checking w3 school example), according to the example, if you use x instead of x[0], then it would change both of it.

This selector also could use in this way, (selecting all of them, but function will work one by one, instead of work as one group).

4. TweenMax() extend TweenLite, adding repeat(), yoyo(), staggerFrom(),staggerTo().
   

I use                             

                                                             Is  equal  to

                           

And my code is

What I want is moving “sub1”, “sub2”, “sub3” separately, so how to choose selector is one problem. StaggerTo() include this function. And document.querySelectorAll() could use for 2 purpose, moving as 1 group or moving seperately.

Other function:

Math.random() from javascript, output random decimal number (0.3454).

Yoyo(), the tween to go back and forth, alternating backward and forward on each repeat./按照原路径返回/

Repeat(), /重复路径， 建议与yoyo配合使用/, repeat:-1, means repeat all the time without stop.

5. TimelineLite() and TimelineMax()

   Both of this function work similar.

   For example,

Even you changed to TimelineMax(), still works same.
But now there is one difference:

I want this function could repeat, but in TimelineLite could not add repeat function, but TimelineMax could.

6.Difference staggerFrom() and from(), staggerTo() and to();

I will use the same function to show the difference.

Duration:19s, from left:1000, without opacity, delay is 7.

All of element will move “together”, delay together.
StaggerFrom(),(delay is 1s)

If delay is 7s,

It means each element will be delayed for 7 seconds.
Note: staggerFrom is using in TimeLineLite or TweenMax not in TweenLite

Chinese version: http://www.cnblogs.com/ddw1997/archive/2009/09/01/1558039.html

one simple problem-----how to put text in center of div vertically and horizontally

I always meet this question, how to put text in center of div vertically and horizontally.

                     to


first way,

              text-align: center;
              line-height: 50px;(depending on the div height)


Here the line-height is a little bit confused, in Chinese, it is called ''行高''
but i feel it is not so right.
http://www.w3schools.com/cssreF/playit.asp?filename=playcss_line-height&preval=3

this is one website, for understanding it better.


Second way,

                   text-align: center;
                   padding-top: 20px;
                   padding-bottom: 20px;
           

but in this way, you cannot set height again, because padding-top.padding-bottom include height set.

JS learning--------collapsible pannel

This one is very common, and it is pretty easy, the most important is function and style  .

Here is simple version of my task: when you click title, then content will come out.

At the beginning, i did not set style only function, actually it does not work.
So let me conclude, for this small panel, we have to focus on 3 parts:

1. style
2. link for js. min
3. javascript function

here is javascript function what i have,






As i have 2 panels, so i need to input this ,next , to specify that when users click title, the matched content could show.



then, there is another way to do the same website by using toggleClass();

this method means that change style through class name, but the content is not changed.
one example, 
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass

And i still have one question about selector, and space between two class name.

There is still another way, a little bit different, i will post soon.

And we found one funny CSS property is overflow.
http://www.w3schools.com/CSSref/playit.asp?filename=playcss_overflow

from this website, you can understand what it means.
And you need to know that

1. overflow property only works for block elements with a specified height.
2. meaning of this property: what happens if content overflows an element's box.
3.the default value is initial, which means that show everything.

so easy to forget difference between ==and ===

1. if comparison is about number, string,

•      same type, like comparison between number and number, result is same
•      different type, number compared to string, for ==, it will transfer to same type then comparing value. for ===, value is false .because it just compares type.

!= does type conversion
!== doesn't do type conversion

文本协议与二进制协议

好吧，刚刚结束我的短暂假期， 现在就得熬夜学习。。。废话不多说，最近学习的知识点， 很零碎，所以打算把它们都记录在博客里。

今天需要学习HTTP 2 的概念，说实话1 我都不是很了解，只能囫囵吞枣了。其中一部分是，文本协议与二进制协议。

文本协议

文本协议一般是由一串ACSII字符组成的数据，这些字符包括数字，大小写字母、百分号，还有回车(\r)，换行(\n)以及空格等等。

文本协议设计的目的就是方便人们理解，读懂。所以，协议中通常会加入一些特殊字符用于分隔，比如如下数据：

!set chl 003#

其中，以!标识命令的开始，#标识命令结束，空格用来分隔命令字段，虽然我们不知道这条命令具体干什么，但通过字面我们大致知道可能是设置(set)某一个参数(chl)值为003，这样在我们进行调试的时候，可以快速准确地看到当时发生了什么，更好地解决问题。

但为了便于解析，文本协议不得不添加一些冗余的字符用于分隔命令，降低了其传输的效率；而且只适于传输文本，很难嵌入其他数据，比如一张图片。（来源于网络，纯复制粘贴）

二进制协议

二进制协议就是一串字节流，通常包括消息头(header)和消息体(body)，消息头的长度固定，并且消息头包括了消息体的长度。这样就能够从数据流中解析出一个完整的二机制数据。如下是一个典型的二进制协议：

其中，Guide用于标识协议起始，Length是消息体Data的长度，为了数据完整性，还会加上相应的校验(DataCRC，HeaderCRC)；Data中又分为命令字(CMD)，和命令内容。命令字是双方协议文档中规定好的，比如0x01代表登录，0x02代表登出等，一般数据字段的长度也是固定的。又因为长度的固定，所以少了冗余数据，传输效率较高。

总结

综上，我们大致总结文本协议和二进制协议的优缺点：

文本协议，直观、描述性强，容易理解，便于调试，缺点就是冗余数据较多，不适宜传输二进制文件（比如：图片等），解析复杂（需要进行字符串比较）；

二进制协议，没有冗余字段，传输高效，方便解析（固定长度，并且可以直接比较字节），缺点就是定义的比较死，哪个位置有哪些东西，是什么意义是定义死的，场景单一。

所以，

1. 如果想要高效传输，比如物联网中收集传感器数据，使用二进制协议

2. 如果想要便于调试，比如使用telnet就能当客户端用，可使用文本协议

3. 如果命令较少，比如即时通讯软件，可以使用文本协议

4. 二进制数据的难理解性，自然加密，对数据安全有一定要求的可以使用二进制协议
（以上均来源于网络）

小记随笔1

今天是旅游的第一站，我们终于到了克卢日，他的家乡。
其实感触最深的，还是对他父母的印象吧， 这也让我明白了，父母对孩子的影响。
第一天见到的是他的父亲，他的父亲是一个很风趣的人，喜欢开玩笑，也很大方，第一天就请我们去餐馆吃了一顿。而且他也很守时，晚上告诉我们，会在早上九点半接我们去坐车，第二天他果然很准时。然后他的车，很显然可以看出来，很整洁，没有赫尔辛基的那对夫妻凌乱。很容易联想，他的家也应该很整洁。
晚上，见到了他的母亲，感觉有点吃惊，很漂亮开朗的女人。但是车窗已经是覆满灰尘，看不见路， 似乎她也对开车不太熟悉。家里有点乱，看的也很旧，厨房的水龙头似乎不太稳定，抬头可见墙上有些掉漆，屋子里摆放着很多东西。很明显，他和妈妈生活的时间长，所以习惯更随母亲。不禁有点可惜，如果他和父亲住的时间更长，习惯会不会不一样。

在我感觉，他还是像个小孩子，喜欢游戏，有点任性，做事粗心，没有毅力，拖延症，喜欢赖床，感觉好多缺点，可是，有时就是喜欢这样的他，让我没有压力，有时很生气，但他能容忍我，有时我们能像小孩子一样一起幼稚，大笑。

不过，我还是希望，未来能有个家，有一个像样的家，一个温暖，干净，整洁的家。

new beginning of life

I tried to find a good blog which allow me to write without phone number verification. Finally, i found this google blogger. I hope i can insist to write blog everyday, some for learning diary, some for own life experience.