[VIM] Vim hacks slide and cheat sheet

在Slide Share上的Vim Hacks,我是靠這篇開始學Vim的.

Vim Hacks

以及vgod的cheat sheet.
我這種菜鳥就需要直接印出來放在工作牆XD. vgod Vim cheat sheet.

[JavaScript] Bubble and capture event sample and YUI manipulation

  JavaScript當中有所謂的 addEventListener : addEventListener(event, function, capture / bubble);
  是 W3C所制定的 addEventListener, (true為 capture, false為 bubble).不過 Windows IE並沒有 capture跟 bubble的差別. 於是自己有一套增加事件的方式:  window.attachEvent("submit",myFunction()); - 而始終使用 bubble 方式.

  以一個動作對於一個物件總共會經過三個階段(stage). capture, target,以及bubble.

Check out this Pen!

  以上面例子來說明, 當我點下span裡面的字樣後:

Capture Stage: html-> body-> div->span
Target   Stage :  span
Bubble  Stage: span->div->body->html

  所以一個物件會被經過兩次, 但是只會觸發一次事件, 於是就是仰賴canCapture參數決定在何時觸發事件. 以上方例子為 click事件, 而且都是設定為 bubble階段, 所以執行順序會在bubble stage從最小到最上層元素執行.

  以第二個案例為例子, 因為 div設定在 capture stage執行, 所以他的 click會先被執行.

  順帶一提, 當我們觸發一個物件的事件後, 若不想要在往上觸發事件, 可以使用event.stopPropagation(); 停止往上傳播.

  當然也可以不用那麼複雜, 很多框架都有指派或是新增事件的方式.

  如下方例子YUI3.0的 delegate方式.其他還有很常用的 obj.on("click", function );
YUI會將物件包裝為他們的物件, 並且多出不少好用功能如果我們要再繼續擴充下去, 可以使用Y.extend() 繼續擴充.

  所謂的extends , don't hack.

Check out this Pen!

[CSS] clear:both sample

  之前在跟同事討論到一個CSS的屬性clear,他有所謂的clear:left, clear:right,跟最常使用的clear:bith.不過其概念是真的蠻模糊的,根據W3C School的說明是

  Elements after the floating element will flow around it. To avoid this, use the clear property.

  The clear property specifies which sides of an element other floating elements are not allowed.
  Add a text line into the image gallery, using the clear property.

  恩~有看沒有懂, 不如拿code當範例說明最快了.

  Float會把所指定的 DOM物件浮出它原來的位置, 所以當一個父 DOM物件下面的物件都設定了 float, 會造成此裡面父物件的認為裡面沒有物件撐開,進而高度縮起來

Check out this Pen!

  此解法有相當多種解法,如多加一個 p tag
  .clear {zoom:1; clear:both;}
  .clear:after {content:''; display:block; clear:both; visibility:hidden; height:0;}

(修正 CSS 對於 float 區塊, 使用 clear:both 無效的解法,有更詳細完整的解法)

  所以clear就是清除掉此物件的左或是右,或是兩邊的Float.直接看sample code會更能了解呈現效果.

Check out this Pen!

求職大作戰

  小弟今年年初剛從國防役退下來，當時就抱持著一股志願想往外衝出去．當然前公司也是慰留我，不過資訊業很大，想去外頭試看看的心情是擋不下來的．這半年老實說，我學到很多東西，也要感謝非常多非常多朋友，前輩，學弟的支持．

  首先是 ILinkE的蛋李前輩，跟 Felix前輩．此外還有 Booker前輩也給我很多意見． Rayer幫我介紹了 Job Hunter - Alvin Huang，指點出我這些面試的不足，跟 Lettuce前輩．也謝謝花旗銀行資訊部給我這個機會嘗試，雖然後來並不是很適應金融業，但是這段時間真的很謝謝Eddie，Jimmy，Melony跟米歇爾你們的幫助．

  老實說，我這段時間真的學到很多東西，我自己的不足，以及自己真的有興趣的方向．

  還有我女朋友Laura，在這段無論是精神上，或是身體上都很忙碌困苦的時候，陪在我身旁支持我，給我信心．沒有你，我是沒辦法堅持下去的．

  也很懷念前公司各位英丰寶寶，我真的也在各位學到很多東西．Willie 跟小Kent ，Here 跟宗平，David 莊,Kevin 金, Leili姊和Benny各位前輩的指導，以及同期的順利,Alvin,跟阿彰阿Ken．Andy ,Charles ,Angus ,Kelly 以及後來的夥伴Derek ,Jason ,Lewis ,Lee,Cindy ,Marco ,Hank Study, Kirin 跟Frank 還有一些相處時間不長的學弟以及設計師阿喬,Faye,阿甘,Angie,Eller，英丰寶可以學到很多東西，我真的很榮幸能夠跟你們共事過．

  我運氣也真的很好，去 miiiCasa遇到了前 Yahoo!工程師啊嗚-josephj，也願意給我機會加入他們團隊．自己本身也對 Front-End Engineer很有興趣．就秉持著一份熱情進去 miiiCasa了．各位如果不太清楚啥是 F2E工程師，下面有一篇影片是 Yahoo資深前端工程師 Nate Koechley: Professional Frontend Engineering，介紹啥是前端工程師．

  簡單來說，我們在寫 View Source的東西，技術上來說從 HTML，CSS到 Javascript，然後要考慮瀏覽器的相容問題到使用者用的舒不舒服，如果難度在更高深一點，無障礙的網頁的實現．跟 Producer，Visual Designer以及 Back-End 工程師的橋樑．It does ALL matters．畢竟一套系統，一個軟體到最後就是要給使用者使用．也因此，前端工程師就是大家都會來盯你的工作內容的工程師．

  我的設計師好友 Arzon幫我就職做了一張圖，我把它貼在我的工作牆上．上面的意思是
I am doing what I love.我也會繼續在資訊的領域繼續往上攀爬．