Setup Babel for ES2017

只測試過async await是可以用的，新的東西不知道會有什麼雷，請自己先想過三次是否要換語言

安裝:
> npm install --save-dev babel-cli babel-preset-es2017
> echo '{ "presets": ["es2017"] }' > .babelrc

測試程式(a.js)如下:

1:  async function Insert(data) {  
2:    return new Promise(resolve => {  
3:      console.log('insert data '+data);  
4:      resolve();  
5:    });  
6:  }  
7:  async function Hello(data_from_client) {  
8:    await Insert(data_from_client);  
9:    await Insert(data_from_client+1);  
10:    await Insert(data_from_client+2);  
11:    console.log('transaction finished');  
12:  };  
13:  Hello(1);  

直接執行:
> babel-node a.js

從ES2017轉舊版js(b.js)
> babel a.js --presets es2017 > b.js

Ubuntu安裝:
需要多安裝一個env套件才有es2015支援
> npm install babel-preset-env --save-dev
> echo '{ "presets": ["env", "es2017"] }' > .babelrc

參考來源:
https://babeljs.io/docs/plugins/preset-es2017/#usage-via-babelrc-recommended

float left轉inline-block地雷

今天下班前de不出來的一個bug，
試問以下兩個code出來的結果有何不同:

old.html

<div style="width: 1000px;height: 500px;">
  <div style="float: left;width:70%;height:100%;background: #145"></div>
  <div style="float: left;width:30%;height:100%;background: #222"></div>
</div>

bug.html

<div style="width: 1000px;height: 500px;">
  <div style="display: inline-block; width:70%;height:100%;background: #145"></div>
  <div style="display: inline-block; width:30%;height:100%;background: #222"></div>
</div>

你會發現bug.html怎麼樣都沒辦法把底下兩個div正確地塞進上層的div裡，

 bug.html底下兩個div中間會多出一條莫名其妙的空白線，但你用chrome/firefox inspector怎麼看兩個div的padding/border/margin 都找不到那條空白線到底是哪裡來的。

==========無用防雷線=============

解答:

 inline-block對外層來說兩個div排列是inline所以那個白線來自html排版中的空白text node，你需要把兩個div間的空白完全拿掉才能成功排列：

<div style="width: 1000px;height: 500px;">
  <div style="display: inline-block; width:70%;height:100%;background: #145"></div><div style="display: inline-block; width:30%;height:100%;background: #222"></div>
</div>

IIS NOTE

一個LAMP派使用者轉到IIS的心得

IIS是很nice的，這其中一定有什麼誤會，IIS是一個什麼東西都可以GUI設定的web server，不過前提是你要找的到就是了顆顆，我都是先找到文字檔怎麼設定最後才發現原來GUI可以找到對應選項。不過如果你找不到還是可以直接編輯網站對應的web.config(相當於apache的.htaccess)。

Troubleshooting

Q: 上傳檔案傳完後response 404 not found
A: 除了檢查PHP.ini裡upload_max_filesize欄位外，IIS本身有限制request的maxAllowedContentLength。IIS設定方式 在左側樹狀圖中點選站點>右側功能檢視中點選"要求篩選">最右側動作點選"編輯功能設定">彈出視窗中的"允許的內容長度上限"欄位輸入新的限制數值。官方文件說預設只有28MB左右超過就會噴404(對debug一點幫助都沒有的response)。

Python list tail friendly

用python整理演算法資料結構的時候順便簡單驗證了一下cpython對list splice的實作，
以下兩段code從執行效率上可以看出list對尾巴方向的操作的確會比較快

# slow.py
import cProfile

def xf(num):
    x = range(num)
    while x:
        x[:10] = [] # main test snippet

cProfile.runctx("xf(100000)", globals(), locals())

# fast.py
import cProfile

def xf(num):
    x = range(num)
    while x:
        x[-10:] = [] # main test snippet

cProfile.runctx("xf(100000)", globals(), locals())

追求UX良好的VIM編輯器之道(II)

Paste to command mode
實用技巧, UX待改良(?)
http://stackoverflow.com/questions/3997078/how-to-paste-text-into-vim-command-line

Why people are selfish?

小時候成績單評語被老師打了"熱心助人" 在長大之後這樣的評語還是有辦法在周遭的人間保持?

Possibly it's just the fxcking nature of humankind.

追求UX良好的VIM編輯器之道

用了幾個月VsVim之邪門歪道後突然頓悟的實用技巧

背景介紹
====

Vim使用者可能常常會有一個很大的困擾，
對一般的editor來說刪除跟剪下(Cut)是兩個不同的概念，
但在Vim裡所有的刪除(dd, df, x系列) default都會被視為剪下，
也就是你只要想刪掉的東西都會被存到Vim default的剪貼簿(clipboard)裡。

Vim的剪貼簿又叫作register (see :help registers<CR>)
但實際上Vim有不只一個剪貼簿(register)，
每個剪貼簿用一個a-z, 1-9還有一堆特殊符號的字母表示，
如果想要存取這些剪貼簿就可以用"符號加上剪貼簿名稱去存取。
e.g.
   複製一行到a剪貼簿:            "ayy
   讀取a剪貼簿並貼上:            "ap

如果不指定剪貼簿名稱，那就是使用某個特殊字元為名的default剪貼簿。


技巧篇
=====
所以刪除跟貼上撞在一起的解法很簡單:
就是當你要刪除東西就讓東西被送到defualt register裡。
如果你要剪下東西，那就使用windows中<C-x>的快捷鍵。
讓<C-x> map到刪除東西到除了default register以外的register (a-z 1-9任君挑選)
然後在用y貼上的時候也map掉原本的貼上，
而改指定從<C-x>時用的register貼上。


詳細腳本
====
待補....