loverajoel · loverajoel · Jan 31, 2016 · Jan 26, 2016 · Jan 27, 2016 · Jan 27, 2016
diff --git a/_config.yml b/_config.yml
@@ -25,11 +25,19 @@ defaults:
       is_post: true
   -
     scope:
-      path: _posts/es
+      path: _posts/it
       type: posts
     values:
       layout: default
-      lang: es
+      lang: it
+      is_post: true
+  -
+    scope:
+      path: _posts/zh_CN
+      type: posts
+    values:
+      layout: default
+      lang: zh_CN
       is_post: true
 
 # Enter your Disqus shortname (not your username) to enable commenting on posts
@@ -80,3 +88,68 @@ exclude:
     - LICENSE
     - README.md
     - CNAME
+
+# languages var
+languages:
+  - 
+    name: en
+    link: /
+  - 
+    name: it
+    link: /it
+  - 
+    name: zh_CN
+    link: /zh_CN
+
+transl:
+  en:
+    menu:
+      home: 
+        txt: Home
+        link: /
+      about: 
+        txt: About
+        link: /about
+      subscribe: 
+        txt: Subscribe
+      submit_your_tip:
+        txt: Submit your tip
+        link: https://github.com/loverajoel/jstips/blob/master/CONTRIBUTING.md
+    footer_subscribe_message: Subscribe to more awesome daily tips!
+    footer_placeholder_subscribe: [email protected]
+    arrow_prev: Previous Tip
+    arrow_next: Next Tip
+  it:
+    menu:
+      home: 
+        txt: Home
+        link: /it
+      about: 
+        txt: About
+        link: /it/about
+      subscribe: 
+        txt: Subscribe
+      submit_your_tip:
+        txt: Submit your tip
+        link: https://github.com/loverajoel/jstips/blob/master/CONTRIBUTING.md
+    footer_subscribe_message: Subscribe to more awesome daily tips!
+    footer_placeholder_subscribe: [email protected]
+    arrow_prev: Previous Tip
+    arrow_next: Next Tip
+  zh_CN:
+    menu:
+      home: 
+        txt: 主页
+        link: /zh_CN
+      about: 
+        txt: 关于
+        link: /zh_CN/about
+      subscribe: 
+        txt: 订阅
+      submit_your_tip:
+        txt: 提交小知识
+        link: https://github.com/loverajoel/jstips/blob/master/CONTRIBUTING.md
+    footer_subscribe_message: 订阅，每天获取一条小知识!
+    footer_placeholder_subscribe: [email protected]
+    arrow_prev: 上一条
+    arrow_next: 下一条
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -62,26 +62,26 @@
 <body>
 <div id="main-wrapper">
 
-    {% if page.is_post %}
-        {% if page.previous.url %}
+    {% if page.is_post%}
+        {% if page.previous.url and page.previous.lang == page.lang %}
             <a class="tips-nav prev-tip" href="{{ page.previous.url }}">
                 <i class="fa fa-angle-left"></i>
-                <p>Previous Tip</p>
+                <p>{{site.transl[page.lang].arrow_prev}}</p>
             </a>
         {% endif %}
 
-        {% if page.next.url %}
+        {% if page.next.url and page.next.lang == page.lang %}
             <a class="tips-nav next-tip" href="{{ page.next.url }}">
                 <i class="fa fa-angle-right"></i>
-                <p>Next Tip</p>
+                <p>{{site.transl[page.lang].arrow_next}}</p>
             </a>
         {% endif %}
     {% endif %}
 
     {% if page.is_post %}
     <div id="fixed-bar" class="{% if page.is_post %}is-post{% endif %} {% if paginator.page > 1 %} not-first-page {% endif %}">
         <div class="logo">
-            <a href="/">
+            <a href="{{site.transl[page.lang].menu.home.link}}">
                 <img src="{{ site.baseurl }}/images/jstips.png" alt="Js Tips">
             </a>
         </div>
@@ -94,10 +94,20 @@
     {% else %}
         <div class="menu-home">
             <ul>
-                <li><a href="/">Home</a></li>
-                <li><a href="/about/">About</a></li>
-                <li><a href="#subscribe">Subscribe</a></li>
-                <li><a href="https://github.com/loverajoel/jstips/blob/master/CONTRIBUTING.md">Submit your tip!</a></li>
+                <li><a href="{{site.transl[page.lang].menu.home.link}}">{{site.transl[page.lang].menu.home.txt}}</a></li>
+                <li><a href="{{site.transl[page.lang].menu.about.link}}">{{site.transl[page.lang].menu.about.txt}}</a></li>
+                <li><a href="#subscribe">{{site.transl[page.lang].menu.subscribe.txt}}</a></li>
+                <li><a href="{{site.transl[page.lang].menu.submit_your_tip.link}}">{{site.transl[page.lang].menu.submit_your_tip.txt}}</a></li>
+                <li class="sub-menu">
+                    <a href="#"><img src="/images/flags/{{page.lang}}.png"></a>
+                    <ul>
+                        {% for lang in site.languages %}
+                            {% if lang.name != page.lang %}
+                                <li><a href="{{lang.link}}"><img src="/images/flags/{{lang.name}}.png"></a></li>
+                            {% endif %}
+                        {% endfor %}
+                    </ul>
+                </li>
             </ul>
             <hr/>
         </div>
@@ -130,9 +140,9 @@
                 <form action="//jstips.us12.list-manage.com/subscribe/post?u=80795a6c077c65f1648c4dfe3&amp;id=1f7d557661" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                     <div id="mc_embed_signup_scroll">
                         <a href="#" name="subscribe"></a>
-                        <label for="mce-EMAIL">Subscribe to more awesome daily tips!</label>
+                        <label for="mce-EMAIL">{{site.transl[page.lang].footer_subscribe_message}}</label>
                         <div class="email-container">
-                            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
+                            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="{{site.transl[page.lang].footer_placeholder_subscribe}}" required>
                             <input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button">    
                         </div>
                         <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
@@ -144,9 +154,9 @@
             </div>
         </div>
         <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="/about/">About</a></li>
-            <li><a href="https://github.com/loverajoel/jstips/blob/master/CONTRIBUTING.md">Submit your tip!</a></li>
+            <li><a href="{{site.transl[page.lang].menu.home.link}}">{{site.transl[page.lang].menu.home.txt}}</a></li>
+            <li><a href="{{site.transl[page.lang].menu.about.link}}">{{site.transl[page.lang].menu.about.txt}}</a></li>
+            <li><a href="{{site.transl[page.lang].menu.submit_your_tip.link}}">{{site.transl[page.lang].menu.submit_your_tip.txt}}</a></li>
             <li class="github"><a href="https://github.com/loverajoel/jstips"><img src="/images/github.svg"></a></li>
             <li class="twitter">
                 <a href="https://twitter.com/tips_js" class="twitter-follow-button" data-show-count="false">Follow @tips_js</a>

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -5,23 +5,21 @@
 
 <div id="posts-wrapper-home">
     <div class="posts">
-        <!-- {% assign posts=site.categories | where:"lang", "en" %} -->
-        {% assign posts=paginator.posts | where:"lang", "es" %}
-        <!-- {{site | jsonify}} -->
+        {% assign posts=site.posts | where:"lang", page.lang | where:"type", posts %}
         {% for post in posts %}
         <article class="post">
             <h1 class="post-title">
                 <a href="{{ site.baseurl }}{{ post.url }}">
-                    <span class="tip-number">{{ post.tipNumber }}</span>
-                    {{ post.title }}
+                    <span class="tip-number">{{ post.tip-number }}</span>
+                    <span class="title">{{ post.title | markdownify}}</span>
                 </a>
             </h1>
             <div class="meta-info">
                 <time class="date meta-item" datetime="{{ post.date }}"><i class="fa fa-calendar"></i> {{ post.date | date_to_string }}</time>
-                <div class="contributor meta-item"><i class="fa fa-user"></i><a href="{{ post.tipContributorUrl }}" target="_blank"> @{{ post.tipContributorUser }}</a></div>
+                <div class="contributor meta-item"><i class="fa fa-user"></i><a href="{{ post.tip-username-profile }}" target="_blank"> @{{ post.tip-username }}</a></div>
             </div>
             <div class="entry">
-                {{ post.tipTlDt }}
+                {{ post.tip-tldr | markdownify }}
             </div>
         </article>
         {% endfor %}

diff --git a/_posts/it/2016-01-25-demo.md b/_posts/it/2016-01-25-demo.md
@@ -0,0 +1,14 @@
+---
+layout: post
+
+title: Demo
+tip-number: 01
+tip-username: loverajoel
+tip-username-profile: demo
+tip-tldr: demo
+
+categories:
+    - it
+---
+
+demo
diff --git a/_posts/zh_CN/2015-12-29-insert-item-inside-an-array.md b/_posts/zh_CN/2015-12-29-insert-item-inside-an-array.md
@@ -0,0 +1,49 @@
+---
+layout: post
+
+title: 向数组中插入元素
+tip-number: 00
+tip-username: loverajoel 
+tip-username-profile: https://github.com/loverajoel
+tip-tldr: 向一个数组中插入元素是平时很常见的一件事情。你可以使用push在数组尾部插入元素,可以用unshift在数组头部插入元素,也可以用splice在数组中间插入元素。
+
+
+categories:
+    - zh_CN
+---
+
+向一个数组中插入元素是平时很常见的一件事情。你可以使用push在数组尾部插入元素,可以用unshift在数组头部插入元素,也可以用splice在数组中间插入元素。
+
+但是这些已知的方法，并不意味着没有更加高效的方法。让我们接着往下看……
+
+向数组结尾添加元素用push()很简单，但下面有一个更高效的方法
+
+```javascript
+var arr = [1,2,3,4,5];
+
+arr.push(6);
+
+arr[arr.length] = 6; // 在Mac OS X 10.11.1下的Chrome 47.0.2526.106中快43%
+```
+两种方法都是修改原始数组。不信？看看[jsperf](http://jsperf.com/push-item-inside-an-array)
+
+现在我们试着向数组的头部添加元素：
+
+```javascript
+var arr = [1,2,3,4,5];
+
+arr.unshift(0);
+
+[0].concat(arr); // 在Mac OS X 10.11.1下的Chrome 47.0.2526.106中快98%
+```
+这里有一些小区别，unshift操作的是原始数组，concat返回一个新数组，参考[jsperf](http://jsperf.com/unshift-item-inside-an-array)
+
+使用splice可以简单的向数组中间添加元素，这也是最高效的方法。
+
+```javascript
+var items = ['one', 'two', 'three', 'four'];
+items.splice(items.length / 2, 0, 'hello');
+```
+
+
+我在许多浏览器和系统中进行了测试，结果都是相似的。希望这条小知识可以帮到你，也欢迎大家自行测试。
diff --git a/_posts/zh_CN/2016-01-01-angularjs-digest-vs-apply.md b/_posts/zh_CN/2016-01-01-angularjs-digest-vs-apply.md
@@ -0,0 +1,36 @@
+---
+layout: post
+
+title: AngularJs - `$digest` vs `$apply`
+tip-number: 01
+tip-username: loverajoel 
+tip-username-profile: https://github.com/loverajoel
+tip-tldr: JavaScript modules and build steps are getting more numerous and complicated, but what about boilerplate in new frameworks?
+
+categories:
+    - zh_CN
+---
+
+AngularJs最令人欣赏的特性之一就是双向数据绑定。AngularJs通过循环(`$digest`)检查model和view的变化实现此功能。想要理解框架底层的运行机制你需要理解这个概念。
+
+当一个事件被触发时，Angular触发每个watcher. 这是我们已知的`$digest`循环。有时你需要强制手动运行一个新的循环，而且因为这是最影响性能的一方面，你必须选择一个正确的选项。
+
+### `$apply`
+这个核心方法可以让你显式启动`digest`循环。这意味着所有的watcher将会被检测；整个应用启动`$digest loop`。在内部在会执行一个可选的方法之后，会调用`$rootScope.$digest();`.
+
+### `$digest`
+这种情况下`$digest`方法在当前作用域和它的子项启动`$digest`循环。你需要注意他的父作用域将不会被检测也不会被影响。
+
+### 推荐
+- 仅当浏览器DOM事件在AngularJS之外被出发时使用`$apply`或`$digest`。
+- 给`$apply`传递方法，它将包含错误处理机制而且允许整合在`digest`循环里的变化。
+
+```javascript
+$scope.$apply(() => {
+	$scope.tip = 'Javascript Tip';
+});
+```
+
+- 如果你只需要更新当前的作用域或者它的子项的话，使用`$digest`，而且要防止在整个应用里运行新的`digest`循环。这在性能上的好处是显而易见的。
+- `$apply()`对机器来说是一个困难的处理过程，在绑定过多的时候可能会引发性能问题。
+- 如果你正使用`>AngularJS 1.2.X`版本，使用`$evalAsync`, 这个方法将在当前循环或下一个循环执行表达式，这能提高你的应用的性能。
diff --git a/_posts/zh_CN/2016-01-02-keys-in-children-components-are-important.md b/_posts/zh_CN/2016-01-02-keys-in-children-components-are-important.md
@@ -0,0 +1,42 @@
+---
+layout: post
+
+title: 子容器的Key是很重要的
+tip-number: 02
+tip-username: loverajoel 
+tip-username-profile: https://github.com/loverajoel
+tip-tldr: key是必须传递给从数组中动态创建的所有组件的一个值。它是一个唯一且固定的id，用来识别DOM中的每个组件，也可以让我们区别它是否是同一个组件。使用key可以确保子容器是可保存而且不需要重复创建的，还可以防止奇怪的事情发生。
+
+categories:
+    - zh_CN
+---
+
+[key](https://facebook.github.io/react/docs/multiple-components.html#dynamic-children)必须传递给从数组中动态创建的所有组件的一个值。它是一个唯一且固定的id，用来识别DOM中的每个组件，也可以让我们区别它是否是同一个组件。使用key可以确保子容器是可保存而且不需要重复创建的，还可以防止奇怪的事情发生。
+
+> key跟效率不是很相关，它更与身份有关系（这间接的使效率更好）。随机的赋值或改变值将不能识别身份[Paul O’Shannessy](https://github.com/facebook/react/issues/1342#issuecomment-39230939)
+
+- 使用对象存在的的唯一值。
+- 在父组件定义key,而不是子组件。
+
+```javascript
+//bad
+...
+render() {
+	<div key={{item.key}}>{{item.name}}</div>
+}
+...
+
+//good
+<MyComponent key={{item.key}}/>
+```
+- [使用数组索引是一个坏习惯](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.76co046o9)
+- `random()` 不会起作用
+
+```javascript
+//bad
+<MyComponent key={{Math.random()}}/>
+```
+
+- 你可以创建以自己的唯一id。确定这个方法运行速度够快，把它附着到你的对象上。
+- 当子组件的数量很大或者包含重量级的组件时，使用key来提高性能。
+- [你必须提供key值给ReactCSSTransitionGroup的每个子组件](http://docs.reactjs-china.com/react/docs/animation.html)