2015年12月25日

2015年12月20日

今天紫爆了嗎？好用APP，隨時監測PM2.5

       
圖片來源：鄉民的正義
最近常常聽到電視在說紫爆紫爆的！到底紫爆是什麼勒？

就ptt鄉民的角度來說，紫爆就是當看板人氣達到十萬人以上時，會在看板前顯示一個紫色的「爆」字。


像是前陣子鬧的沸沸揚揚的服貿爭議，就在ptt的八卦版上出現「紫爆」。


等等等.....可是這怎麼和我聽到的紫爆不太一樣啊...！？

現在常聽到的紫爆指的是─PM2.5等級

其實現在大家更常聽到的紫爆，指的是PM2.5的分級？PM2.5是什麼東西呢？

簡單來說PM2.5是一種空氣汙染，細懸浮微粒的指標，數值越高，空氣汙染的程度也就越嚴重！同時不同的數值區間都會對應到一種顏色，當數值過高，達到對人體有危害等級的時候，就會呈現紫色的，這也就是現在所謂的「紫爆」啦！

圖片來源：ShareOnion

PM2.5對人體的危害

至於PM2.5到底對我們的身體健康會有多大的危害呢？少則過敏氣管發炎、大則影響肺部功能，導致癌症，甚至造成心血管疾病，這裡就不再贅述，有興趣的人可以參考這部短片的介紹。


想要對PM2.5了解更多的人，則可以觀賞下面這部演講。這部影片雖然全長約一個半小時，但是過程相當精彩，不會讓人覺得無聊！


我可以如何知道目前PM2.5的數值呢？


想要得知自己所在區域PM2.5的數值，其中一個方法就是到行政院環保署細懸浮微粒監測網站查看目前所在區域的數值。


另一個更方便的方法，就是直接在手機裡安裝即時回報PM2.5監測數值的APP拉！

在這裡就和大家分享一個好用即時監測的APP─J霾害。

J霾害─隨時監測PM2.5



這裡有關於這個app的簡單說明：


下載網址



這個app的操作上算是十分簡單，就直接說明它有哪些功能吧？不會使用或找不到該功能的話，可以在下面留言，PJ在進一步說明喔！

好用功能


即時顯示
即使顯示某地區PM2.5數值及顏色等級，右下角則會顯示更新時間。


設定要顯示的區域
可以勾選要監控那些地區

即時提醒
可以設定即時提醒，當該地區的PM2.5達某危險等級以上，則會發出提醒！


地圖總覽
可以看到台灣各地區即時的PM2.5數值


桌面Widget
最後，我就喜歡的就是它的這個桌面widget，可以直接拉一個圖示到桌面，就會顯示目前PM2.5的數值和顏色分類─現在就是紫爆哩！


有興趣的朋友們，可以下載來使用看看吧！



Read More

2015年12月17日

[筆記] CSS動畫Animation --- @keyframes

      ,  

在學習CSS動畫的過程中，不能不提@keyframes這個屬性，讓我們來看一下這個屬性可以怎麼樣使用吧！

基礎範例



我們先來看一下最簡單的範例，製作出來的效果如下：


我們可以看到，這個方塊會有變色的效果，讓我們來看一下這段基礎的程式碼是什麼：

HTML的部分非常簡單，就是用一個div。


CSS的部分我們先設定該div的樣式，然後裡面會包含要執行動畫的名稱animation-name和執行動畫的時間animation-duration，這兩個部分都可以根據自己的需要設定。

接著就要來設定@keyframes的內容，在@keyframes後面要先輸入剛剛在div當中所寫的animation-name，然後就可以在"{ }"內設定要執行動畫的效果。

這裡用的from和to，表示在4s的期間內，從一開始(0%)到最後(100%)動畫的變化。


如果你希望動畫中間是有很多不同時間點的變化，可以不用from和to，而是直接使用百分比，像是這樣使用百分比也可以：


在上面的程式碼中，我們在div的地方同時加上position: relative，同時製造出移動的動畫效果！結果如下：


看看更多和animation有關的屬性



在上面的例子中，我們在div裡面使用了animation-name和animation-duration這兩個屬性，而animation其實還包含其他屬性可以使用，我們來看看！

animation-delay：這個動畫會延遲幾秒後才進行，例如，animation-delay: 5s，表示這個動畫會延遲5表後才執行。

animation-iteration-count：這個動畫會重複執行幾次，例如，animation-iteration-count: 4，表示這個動畫會重複執行4次後停止。如果我們希望這個動畫不斷循環不要停止的話，我們可以用infinite這個關鍵字，animation-iteration-count: infinite，表示這個動畫會無限次循環下去。

animation-direction：這個屬性可以指定動畫進行的方向，例如，上面的範例正方形是順時針移動，預設的值是normal，所以動畫就會隨順時針進行；如果你希望動畫是逆時針(反著時間順序)進行，則可以輸入reverse；另外，還有一個比較特別的值是alternate，當奇數次撥放時會照原本的時序，偶數次撥放時則會倒著時序撥放。

animation-timing-function：這個屬性是用來控制動畫執行過程中的速度變化，包含
ease，這是預設值，動畫一開始慢慢的，接著會漸漸加速，結束的時候再慢下來。
linear，動畫從開始到結束的過程都是一樣的速度。
ease-in，動畫開始的速度較慢。
ease-out，動畫結束的速度較慢。
ease-in-out，動畫的開始和結束時的速度較慢。
cubic-bezier(n,n,n,n)，自行定義動畫的速度。
各個不同的動畫速度效果可以參考W3Schools的這兩個範例：範例一、範例二。

animation簡寫



從上面的說明我們可以知道，完整的animation屬性還算不少：


如同其他css的屬性(例如，background)，animation也有縮寫的形式，寫法如下：


參考資料


W3School：CSS3 Animations
Read More

2015年12月15日

[筆記] 針對表格使用邊框圓角(table with border-radius)

      ,  

最近在製作表格的時候，想要搭配上邊框弧形(border-radius)的屬性，結果一直做不出想要的樣子，邊框一直跑出背景色，像是這樣子：


原本的CSS程式碼長這樣：
table{
  border-collapse: collapse;
}
tr{
  border: 1px solid #E0607E;
}
td{
  border: 1px solid #607ee0;
  padding: 10px 30px;
  background-color: #E0607E;
  border-radius: 10px;
  color: #FFF;
}
這裡我們發現兩個問題

1. 我們針對<tr>去下border-radius的指令，可是這樣的效果，卻只對背景色有效果，對旁邊的邊框卻沒有效果，變得邊框外面又多一層變框的樣子。


2. 我們只想要針對第一列和最後一列進行邊框圓角的效果，但是現在是針對所有列都執行了邊框圓角的效果。


讓我們來看看怎麼解決這樣的問題吧！

解決邊框沒有圓角的現象

首先，針對第一個問題的的解決辦法很簡單，之所以我們的border-radius屬性沒辦法對邊框產生圓角的效果，是因為我們在最上方table的地方，給了一個border-collapse: collapse，也就是因為這樣的關係，使得我們的border不聽操控。

因此，第一步我們先把border-collapse改回預設值separate。

這麼一改之後，就可以看到表格的邊框可以服貼住我們的邊角了！


但這時候表格和表格之間卻出現了空隙，為了再一併改變這樣的情形，我們要再針對表格添加一個屬性border-spacing，並把它設為0。


如此一來，表格和表格之間就不會有空隙了！

table{
  border-collapse: separate;
  border-spacing: 0;
}

只要讓第一欄和最後一欄有圓角

如果想要只讓第一欄和最後一欄有圓角，我們可以善用CSS的選擇器，分別選擇:first-child和:last-child

在這裡，我們就是要選擇第一個<td>和最後一個<td>去指定圓角的效果就好，所以我們會分別加上這兩段：
td:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
就可以得到我們想要的樣子了！


如果表格有多欄多列該怎麼處裡

如果表格不只有一列，其實處理的方法一樣，只要善用剛剛提到的:first-child和:last-child就可以了，結果如下！
See the Pen table with border-radius by PJCHEN (@PJCHENder) on CodePen.

Read More

2015年12月11日

[筆記] 不同execution context的變項不會互相影響─了解function背後運作的邏輯

      , ,  

在JavaScript中要執行一段函式（function）並不困難，只要在函式的最後加上括號 ( ) 就可以了，在英文中，我們把執行函式的執行這個動作稱做invoke。但是，我們需要進一步了解函式運行時背後的邏輯，了解背後運作的原理，我們才可以避免不必要的錯誤產生。
Read More

2015年12月9日

2015年12月1日

2015年11月30日

2015年11月27日

[筆記] CKEditor內容編輯器安裝說明

       
不管你使用的是痞客邦、wordpress、google blogger或其它相關的內容管理系統(CMS, content management system)，在編輯文章的時候，勢必會有一個HTML編輯器，這個編輯器可以讓你選擇字型、改變字體大小、甚至可以直接針對HTML語法進行編輯，少了這個編輯器，部落格大概也經營不下去了。

可是，如果你是想要從頭寫一個網站，而不想要直接套用CMS系統的話，CKEditor就是一個很好的內容編輯器的選擇。
Read More

2015年11月26日

[Guide] 用 JavaScript 來取得表單元素內容的值（取值）

      ,  
用 JavaScript 取得表單中的元素有很多不同的方法，今天我們來說明一下其中一些方法，像是getElementById, getElementsByTagName, getElementsByName。
先來看一下結果：
See the Pen getElementById by PJCHEN (@PJCHENder) on CodePen.

建立 HTML 表單

我們先用 HTML 建立一個表單（form）
<form name='form' id='form'>
  姓名：
  <input type='text' name='name' id='name' /> E-mail：
  <input type='text' name='email' id='email' />
  <input type='button' name='submit' value='送出' onclick='processFormData();' />
</form>
我們可以看到，在這段 html 表單中，可以看到幾個屬性（attribute），包含 input，name 和 id，下面我們就可以分別用這些屬性來取得表單中的內容。

使用 getElementById

我們可以利用 getElementById 來取得表單中的值，像是這樣：
function processFormData() {
  const nameElement = document.getElementById("name");
  const name = nameElement.value;
  const emailElement = document.getElementById("email");
  const email = emailElement.value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}
我們也可以針對「表單」的 id 去進使用 getElementById，像是這樣：
function processFormData() {
  const formElement = document.getElementById("form");
  const name = formElement[0].value;
  const email = formElement[1].value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

使用 getElementsByTagName

使用 getElementsByTagName 的方法如下，可以留意的地方是，這裡是 getElement"s"
，表示我們一次會取得一整個陣列的值，因此最後要加上要取得的是陣列中的第幾個值。
像是這樣：
function processFormData() {
  const inputElement = document.getElementsByTagName('input');
  const name = inputElement[0].value;
  const email = inputElement[1].value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

使用 getElementsByName

最後，我們也可以用 getElementsByName 來根據 name 這個屬性取得表單元素的值，寫發類似，如下：
function processFormData() {
  const nameElement = document.getElementsByName('name');
  const name = nameElement[0].value;
  const emailElement = document.getElementsByName('email');
  const email = emailElement[0].value;
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}

取得 form 裡面的元素（elements）

除了使用 getElementById, getElementsByTagName 和 getElementsByName 之外，我們也可以直接取得某個 form 裡面的元素。
寫法像是這樣：
function processFormData() {
  const form = document.forms['form'];    // 取得 name 屬性為 form 的表單
  const name = form.elements.name.value;  // 取得 elements 集合中 name 屬性為 name 的值
  const email = form.elements.email.value;// 取得 elements 集合中 name 屬性為 email 的值
  alert("你的姓名是 " + name + "\n電子郵件是 " + email);
}
透過類似的方法，一樣可以取得像是textarea等其它表單類型的值。

其他

若是想取得其它比較特殊類型的值，像是radio, select，則可進一步參考 [筆記] 透過 JavaScript 擷取 HTML 元素（讀取radio, select, id 的值）。

參考資料

Read More

2015年11月22日

[閱讀筆記] 經理人月刊：關於工作的16個哲學思考

      ,  
圖片來源：Binghamton University

哲學家帶你探索考工作意義的方法

哲學家 內涵
蘇格拉底 人要先承認自己的無知，勇於承認自己的錯誤並加以排除。他說：「我唯一知道的事，就是我什麼都不知道」
黑格爾 在面臨關鍵抉擇時，除了A和B之外，千萬別忘了還有第三條路。
辯證法：任何事物（正）都有一個相對立的事物（反）， 當兩者產生衝突時，便會出現更上一層次將兩者都納入其中的第三種立場（合）
尼采 「這個世界原本就同時存在著美好與不幸，但是人往往一廂情願地假設應該只有美好」。
困境是為了讓你變得更強大。
尼采 「這個世界原本就同時存在著美好與不幸，但是人往往一廂情願地假設應該只有美好」。
困境是為了讓你變得更強大。
威廉‧詹姆斯 實用主義：別人的目標和意義是別人的，你的是你的。只要你相信這件事情對你有意義，那就去做吧，別管其它人。
海德格 存在主義：時刻提醒自己生命有限，以「死亡」做為思考人生、工作的基礎，站在未來的時間點，回過頭來檢視現在，就可以找回真正的自己，也能夠看到存在的意義。
齊克果 人生就像一個酒醉的農夫駕著馬車，表面上，是由農夫駕著馬車，實際上卻是老馬拖著農夫回家。因為農夫醉得不省人事，根本沒有清楚的意識，完全依靠識途老馬帶他回家。
識途老馬代表的是社會既存的價值觀和生活方式，大多數人不假思索，日復一日的生活，如同酒醉的農夫，毫無意識地任由老馬決定他的去處。

哲學家帶你省思解決工作煩惱的方法

哲學家 內涵
勒內‧笛卡兒 在不疑處有疑，對任何事抱持著懷疑的態度。
伊比鳩魯 放棄什麼都要的心態，追求你真正在乎的事物。
無欲則剛。
阿爾弗雷德‧阿德勒 你無法讓每個人都喜歡你，不管多麼努力當好人，一定都會有人不喜歡你。
以上內容為本人閱讀經理人月刊（NO. 131：關於工作的16個哲學思考）所整理之筆記
Read More

2015年9月5日

2015年8月30日

2015年8月29日

2015年8月10日

重複練習還不夠，你需要的是「刻意練習」

      , , ,  
圖片來源：resplashed

當你打破對於天賦的迷思，而且也持續練習一段時間後，或許你仍會覺得成效不佳，於是，心中不免還是會懷疑，真的是這樣嗎？

你的懷疑是正確的，重複練習並不一定能讓你變得更好，除非你在練習的時候用對了─刻意練習。

沒有人是天生的專家

在哈佛商業評論「打造專家（The Making of an Expert）」的這篇文章中提到，沒有任何人是天生的專家，沒有任何人天生就很傑出、很優秀、很成功。過去的研究發現到不論是運動員、音樂家、藝術家或作家，他們都是透過大量且有品質的練習，培養訓練出來的。經過統計，他們成為該領域的專家前，至少都需要超過10年（或10000小時）以上的練習。

變成專家沒有其他的捷徑，至少都需要投入10000小時以上的練習，但或許你會覺得10000小時並不多阿，每天工作8小時都在做同一件事，換算下來只需要3年半的時間就可以變成某一領域的專家了，可是為什麼自己卻還沒變成卓越優秀的成功人士呢？

不只是練習而是刻意練習

很抱歉，這裡提的練習並不只是重複地做同一件事，而是刻意地練習（deliberate practice）。因此並不是重複某一件事、某一個動作一直做一直做這樣而已，且根據研究，每人每天大概只能花兩個小時的時間進行刻意練習，為什麼刻意練習這麼耗費精力呢？我們在下面會進一步的討論，而其他的時間我們大部分在做的都只是一般的練習，這也就是為什麼至少需要10～20年的時間才有辦法成為某個領域的專家。

那麼，什麼是刻意練習呢？

刻意練習簡單來說就是：覺察目前自動化的行為，思考並找出自己可以改進的地方，然後專注地投入於刻意練習中，最後分析練習方法的成效。

我們在學習一項技能的開始，我們往往需要花許多的精力和努力，但當學會了之後，這些技能就變成了大腦中自動化歷程的一部分。例如，我們一開始學習腳踏車的時候，必須要小心地保持平衡，控制煞車同時協調地踩腳踏板，但隨著不斷的練習，我們不再需要時時提醒自己該怎麼做，這些技能已經變成自動化的一部分，我們開始可以在下雨的時候邊撐傘、邊騎腳踏車。達到了自動化的境界，一方面表示自己進步到了一定的熟練程度，但另一方面自動化的處理其實是讓我們的大腦可以不再花這麼多心力在上面，因此表現卻可能就停在這裡了。

當你學會了丟棒球後，你已經可以自動化的把球丟出去，但是你可能沒辦法丟的又快又準；當你學會了投籃之後，你已經可以把籃球投進籃框中，但你的命中率可能還是不高。這時候，如果只是重複一樣的動作，重複的丟球、重複的投籃，那麼你的進步將非常有限。

當我們所學的技能開始變成自動化的一部分時，就是我們要開始「刻意練習」的時候，刻意練習非常的不容易，就好像你已經會呼吸了之後，我們要開始練習改變呼吸的方式和習慣一樣，你必需要非常專注才能夠抵抗大腦自動化地去執行一些事。

覺察目前自動化的行為


大部分人在練習的時候，就是一直重複某件事情，這麼做的確是熟練某件事的第一步，但熟練之後，若仍只是不斷地重複，技能的提升將相當有限。

在刻意練習中，第一步就是要去覺察自己已經熟練且相當自動化的行為。

在覺察目前自動化的行為中，我們要先去觀察自己現在的行為或表現是什麼樣子？

為了要能夠覺察自己自動化的行為，其中一個方法是透過專注的感受，你可以在執行某項行為的時候，專心的去感受自己現在的動作、身體的姿勢，像是上台演講時，覺察自己身體的姿勢、手的位置、說話的方式等等，如果你覺得要一邊表現的同時一邊覺察自己的方法太過困難，一個很好的方式是用錄影機把自己拍下來，這樣你就可以專注在表現的同時，又能夠看到自己自動化的表現。

思考並找出自己可以刻意改進的地方


接著，需要去找出自己可以精進的地方，這可以透過找其他覺得表現更好的人來加以模仿，觀察別人是什麼樣的語調、故事安排的順序、如何透過肢體加強自己要表達的論點。找出自己可以模仿的地方，刻意讓自己去練習模仿。

另一個很重要的是得到持續性的回饋，反覆而有回饋的練習最能夠提升表現。

因此，我們會看到許多人在簡報前，除了不斷地重複練習簡報的講稿外，他們會透過鏡子來看自己簡報時的動作，他們會透過錄影機錄下自己的樣子，然後找出可以進一步「刻意改進的地方」，這也是為什麼練舞的人們必需要在鏡子前面練舞，因為這樣你能夠得到立即的回饋，你才知道自己的樣子，和理想的狀態有什麼樣的差別，才能夠加以修正。

專注地投入於刻意練習中

這個部分是最不容易的，你需要相當專注才能夠達到，因為你要改變的是自動化的行為。例如，必須在上台的時候先覺察到自己的手不自主地在抓頭髮，然後提醒自己把手放在適當的位置，而這就是刻意練習—覺察原本已經習慣的、自動化的行為動作，然後提醒自己並做出另一個行為動作（想要的、理想的作為）。

這個步驟之所以這麼困難的原因在於，這些都是已經習慣的技能，你必需要非常用心才會注意到他們，必需要非常用心才能夠抑制自己表現出原本樣子的衝動，然後告訴自己去表現出想要表現出的樣子。

在這個階段，你可以鼓勵自己，之所以沒辦法這麼快做好，是很正常的，因為你現在要超越的是你自己。

有些時候，你甚至需要做的更誇張，什麼意思呢？對於一個害羞的人上台時，在練習的時候，我們會希望他演講的聲音、語調、動作都比實際上演講的時候更為誇張，因為他心中的誇張，可能只是一般人覺得動作比較明顯一點點而已，因此在練習的有些時候，我們會需要表現的比實際上的情況，更為極端、更為誇張。

分析練習方法的成效

這時候，透過不斷地刻意練習，你已經再次學得了一項新的技能，或者換句話說，你又再次自動化了另一項新的技能。但讓自己更好的過程並不僅止於此，在刻意練習之後，你需要用心思考，評估自己刻意練習的方式是否有達到預期的成效，有沒有哪些部分是可以再調整或改進，以避免未來錯誤再次發生。

接著，則是下一次刻意練習的開始。

當你發現自己有越來越多技能都已經能夠自動化地表現出來時，你要好好恭喜自己，這代表你已經達到更高的境界了，但同時你要刻意練習的難度也將越高，就像打電動一樣，越後面的關卡，魔王也越強，因為許多的技能都已經變成了自動化反應的一部分，你必需要重新專注於細節上，修改、改進，往更好的自己前進。

參考資料：哈佛商業評論＜The Making of an Expert＞
Read More

2015年8月7日

天賦沒你想的重要？打破你對天賦的迷思

      , , ,  
圖片來源：Nathan Rupert @ Flickr

對一件事情努力過後，結果卻不如我們預期時，我們常陷入一種狀態：「是我沒天份？還是我努力不夠？」這時候，有些人可能選擇繼續努力，有些人可能選擇轉換跑道，然而，當我們持續努力，一次、兩次、三次，卻還是沒有達到預期成果的時候，自我懷疑不免又會再次浮現，我們會開始告訴自己：「這可能不適合我」、「我的天分可能不在這裡」。

然而，若想變得更好，我們最先需要打破的，就是對於天賦說的迷思，這個迷思是─

「如果我在這個領域是有天份的，那就應該可以花比一般人更少的努力就看到成果」

Read More

2015年8月2日

堅持，讓自己更有自信

      , , ,  

不知道你有沒有過類似的經驗：你曾經對一件事在開始的時候感到充滿幹勁，你很努力的想要讓自己變得更好，可是不知怎麼得，努力一陣子過後，你開始覺得自己好像對這件事沒那麼有天份，你覺得自己再怎麼努力也沒辦法做的很好，於是你開始有些懷疑自己在這件事上的能力，最後，你放棄了？

在「自信是一種技能」這部激勵人心的演講中，讓我們來聽聽看這個運動教練Ivan Joseph怎麼說他對於自信的看法。

Read More

2015年8月1日

使用手機載具儲存電子發票，增加百萬元中獎機率

      , ,  
圖片來源：天下稅務顧問網
電子發票推行了幾年，也經過了幾次改版，但是大部分的人都還是習慣拿「紙本的電子發票」，我想部份的人是習慣有拿到紙本憑據的感覺，部分的人則是喜歡透過紙本發票對獎的感覺，但你知道如果把電子發票存到手機載具可以增加中獎機率嗎？

Read More