不必要的工作

避免做錯誤的選擇？

人生就是不斷地進行選擇，
或許有時候會對生存的意義存疑，
但是這其實這就正是開啟了尋找生命價值的路。

－－ 因為疑惑，或許才產生尋找答案的動力。
自己開始先從嘗試、到感受，再到思考，生命中遇到的各種人或事，
哪一個抉擇，才是自己想要的，才是適合自己的

昨天看到一個關於人生中做抉擇的心得：
1。選擇正確的工作
2。選擇如何利用下班時間
3。選擇逃離安逸的舒適圈

其中也作了一些整理，有一說得非常正確，
「人生最怕的是投入太多的時間與心力在錯的事情上，最後浪費了時間和青春，
只換了點足夠養活自己的薪水」

確實反觀自己現在的生活，
看似每天都忙得頗累，回家了沒有心情做更多的事情
每天都覺得可以做更多的學習但往往卻只等著十二點來臨然後就告訴自己很累了該去睡覺。
就這樣一直讓書本、要實踐的夢想擱置、長眠

我大概又忘了scrum的精神，不用一次做出偉大的事情，只要把每件事情做切割得足夠細小，找出可以產出MVP (Minimum viable product 最低程度可行性的產品) 的方式
以從每個小地方改善生活的品質

看到家裡亂掉的角落就馬上整理，不要累積以影響到自己的工作或生活環境；
路上剛好遇到朋友就馬上停下步跋來聊幾句，不要只想著有機會再約；
想到要做的事情就馬上用紙筆把最簡單的想法記下來，以免三分鐘過後想法變成曇花一現；


今天也正正感受到自己浪費了一兩個小時在做不太有意義的事。

同事的操心大意，造成code裡面有recursively的injection，
仔細一看才發現多個地方都出現同樣問題，但既往只是將錯就錯，
撰寫了一些基於這些有inject問題的code之前的test case，
導致我在修好了這些inject問題之後，一堆test case就run fail了
然後我就有點煩悶地一個一個地去修這些fail的test case
最終花了一兩個小時在整理，而且修完之後只感到一堆抱怨。

按照「選擇正確的工作」和「選擇如何利用下班時間」這兩條原則，
我靜下來想到我這個做法造成了幾個問題：

1. 我花費了自己下班的時間，去修正這幾個只是在dev環境上build fail的問題，但完全不緊急，大可以等到下禮拜一再來解決；
2. 我幫別人修正了他不注意的地方，之後還要再找時間告訴他問題在哪裡，不然他只會一直repeat這樣的問題。
   然而就算我把問題告訴他，但因為不是他自己親身修正的，他不知道這個問題有多耗時和痛點在哪，或許不會切身處地去思考怎麼改善這個問題，找出原因。
3. 這些修正基本上對我個人能力沒有甚麼學習價值，還影響到了我下班時間該擁有的輕鬆情緒。

所以下次如果遇到類似的情況－ 「別人造成的bug，是否要自己去進行修正」時，

我會先思考以下2個因素：

• 是否會影響到正式產品 => 是否有時間急迫性？
• 是否該由我來修正會比較好 => 應提昇團隊的整體平均水平
• 這個工作會否帶給我正向的成長 => 不浪費自己的時間

[HTML5]檢測 HTML5 的功能 - Modernizr

HTML5已經是現行網頁開發的趨勢，雖然各大主流的Browser都已經支援大部份的HTML5功能，但是各家Browser支援程度也有所差異，亦有鑒於還有相當部份的user仍在使用老舊的Browser（如IE 6，7等）。
網頁開發者在開發上，不管是要做到相容各個版本，還是只是簡單的告訴user“你的瀏覽器並不支援XXX功能”，都需要進行支援度的判斷

因為HTML5並不是一種獨立的功能或是語言，而是很多獨立功能的集合，所以我們需要判斷的，並不是這個Browser有沒有支援HTML5，而只是需要判斷他有沒有支援HTML5某個功能而已。

在這裡介紹一個javascript的plugin - Modernizr
Modernizr是一個可以測試HTML5 函式庫的opensource。可檢查許多針對HTML5和CSS3功能的支援。
請自行下載modernizr.min.js，引用到自己的網頁內。


當Modernizr執行時，會建立一個static object - Modernizr，透過直接呼叫Modernizr內的object來產生判斷是否有支援某個功能的boolean值。

Canvas

HTML5中透過<canvas>元素，可使用javascript進行繪圖，要知道user的瀏覽器有沒有支援<canvas>，我們可以直接使用：

if(Modernizr.canvas){
  //support!
  // draw something
}else{
  // not support
  alert("你的瀏覽器不支援canvas元素");
}

Canvas Text

有些Browser雖然支援<canvas>，但卻不支援在canvas中繪製文字，這是因為canvas text是在後期才加入的API，故有些早期有支援canvas的browser後來卻沒有引入。
檢查canvas text，我們可以使用：

if(Modernizr.canvastext){
  //support!
  // draw some text
}else{
  // not support
  alert("你的瀏覽器不支援canvas中繪製文字");
}

Video

在HTML5中，不用透過如window media player或flash等的plugin，只要使用<video>元素，指定其src，就可以直接播放影片，相當方便。要檢查有否支援<video>，可使用：



另外，雖然某些browser有支援影片<video>元素，但未必每種影片的格式都會支援，這時便需要判斷browser是否有支援某種codec，而這個檢查，Modernizr也有提供相對的功能

Local Storage

使用local storage，讓用戶端的資料能夠儲存於local端，不用受限於cookies，也可節省時間和頻寬去和server做溝通，使用HTML5 storage，用javascript就可以直接存取儲存起來的data了。檢查是否有支援Local Storage功能，可使用：

Web Workers

Web workers就是為browser提供可在background執行javascript的方法。若有寫過java的朋友，web workers就相等於 thread（執行緒）的作用。
有了background threads，在user操作UI的時候，就可以同時在背後執行一些運算，而又不會讓user的介面操作卡在某個運算的過程中，諸如複雜的數學運算，網路request，data access等，都會是一些耗時的動作，讓這些耗時的動作在background執行，便不會影響user在介面操作上的流暢度。
對於Web Workers的支援，可用：

Application Cache

若果有些網頁的操作不用隨時都使用到網路上最近的資料，像是網路小說，文件，影片等，基本上如果下載完之後，就可以在local site去閱讀或使用的話，可以考慮使用application cache來處理
當browser瀏覽有支援application cache的網站時，一旦browser下載了所有必要的檔案後，即使並未接上網路，我們也可以瀏覽這網站。在離線狀態所做的改變，變網路恢復時也可以被上傳到server裡，gmail離線版就是使用了這個功能。
檢查Application cache：

---

以下的一些功能比較簡單，我就直接介紹用法了

Geolocation 定位

Modernizr.geolocation

Input Type 表單輸入

HTML5中新增了十幾種表單中的類型，以方便進行某些情況的輸入
像是

• search
• number
• range
• color
• tel
• url
• email
• date
• month
• week
• time
• datetime
• datetime-local

Modernizr.inputtypes.search

Modernizr.inputtypes.number

Modernizr.inputtypes.range

...
...

Placeholder Text

當輸入欄是空白或不是被focus的時候，會預設在輸入欄中的文字，通常是用來當輸入的說明用的

Modernizr.input.placeholder

Auto Focus

使用autofocus，就可以在一個網頁載入後指定滑鼠遊標直接跳到哪個input輸入欄中，就像到Google首頁時，會自動幫你把遊標跳到search bar裡。

Modernizr.input.autofocus

P.S. 以上所有的用到的Modernizr中的方法都是回傳boolean值
有支援 － true,
沒支援 － false
還要注意的是，像是localstorage, applicationcache，等的複合字，必為小寫，與DOM的寫法不一樣。





以上資料由我自己閱讀 O'Reilly的<<HTML5 建置與執行>> 一書後整理出來，也有引用到當中一些句子說明。

DBN 練習

↓按一下畫面執行結果：








今天做了個dbn的小練習
讓字跟著mouse座標動

然後點的時候有線跟著走

不過dbn真的很陽春, 指令要背起來的話也沒有幾個
語法部份可以參考這邊→DBN wiki

我寫的這只程式碼如下

Load dbnletters.dbnLoad dbngraphics.dbn

Fast
Size 200 200　
forever
{
　paper 0
　set X (<mouse 1>+3) //滑鼠X座標
　set Y (<mouse 2>+3) //滑鼠Y座標
　set P <mouse 3>　//滑鼠有否被按下
Same? P 0
{
　　Letter 12 X Y //letter 'L'
　　Letter 3 (X+15) Y //letter 'C'
　　Letter 20 (X+30) Y //letter 'T'
　}
Same? P 100
｛
　　Letter 12 X Y
　　Letter 3 (X+15) Y
　　Letter 20 (X+30) Y
　　line 0 0 X Y
　　line 200 200 (X+40) (Y+20)
　　line 0 200 X (Y+20)
　　line 200 0 (X+40) Y
　}
refresh
}

要把dbn的執行結果放在網頁上, 可透過下列程式碼

<APPLET CODE="DbnApplet" ARCHIVE="dbn.jar" codebase="./" WIDTH="400" HEIGHT="400">

<PARAM NAME="mode" VALUE="grid">

<PARAM NAME="graphics_width" VALUE="400">

<PARAM NAME="graphics_height" VALUE="400">

<PARAM NAME="slowdown" VALUE="true">

<PARAM NAME="program0" VALUE="name.dbn">

</APPLET>

把相關的程式檔dbn.jar和library如dbngraphics.dbn都放在網路的空間上，
codebase="./"則改為網路空間的位置
再修改長寬參數，把name.dbn改為自己檔案的名稱
這樣就可以了