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的數值和顏色分類─現在就是紫爆哩!


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



2015年12月17日

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


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

基礎範例



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


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

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


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

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

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


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


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


看看更多和animation有關的屬性



在上面的例子中,我們在div裡面使用了animation-nameanimation-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

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.

2015年12月11日

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


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

2015年12月9日

2015年12月1日