這一頁把 2014 到 2019 年間寫的 21 篇前端與 WordPress 筆記收在一起。它們是我們早期做網站時留下的工作紀錄——DOCTYPE、Box Model、Flexbox、Sass、jQuery 外掛、Bootstrap 4、WordPress API 這些主題。技術環境已經變了很多，這些筆記沒有更新，保留的目的是紀錄，不是教學建議。

每一篇原本各自是一個網址；現在合併在這裡，舊網址會轉到對應的段落。

HTML DOCTYPE宣告以及混合模式(Quirks mode) 2014
CSS3 BOX MODEL原理 2014
flexbox 2014
我安裝了Sublime Text，然後呢？ 2014
為什麼要用Sass 2015
Regular Expression, 讓你來去自如抓字串 2015
保護你的Wordpress網站 2015
設定WP Revisions次數 2015
position relative absolute 做出區域的絕對定位 2017
水平置中的三種方法，你用對了嗎？ 2017
如何讓網頁在手機上無法縮放？ 2017
Bootstrap 4 新功能簡介 2017
如何設定臉書分享呈現圖片，簡單步驟不是工程師也能懂 2017
如何在頁面上翻轉 500 個 ul li 元件 2017
Javascript chart plugins 介紹 2017
JQuery Popup Plugins 介紹 2017
好用且推薦之網站jquery slider plugins 2017
利用 CSS 做出響應式的 iframe (youtube video) 2017
CSS object-fit 解決正方形圖片樣式的痛點 2017
Bootstrap 4 學習筆記 2017
串接Wordpress json API – 原來wp還可以這樣玩 2017
[js 進階] JavaScript Scope 2017
想顯示每日人氣？讓網站使用 Google Analytics 資料 2018
使用highchart.js來協助網頁繪圖: column chart 2018
UI介面設計：單選按鈕vs 複選框，傻傻分不清楚？ 2019
可商用！平面、網頁設計、HTML、CSS、3D 免費資源網站 2019

HTML DOCTYPE宣告以及混合模式(Quirks mode)

原發布於 2014-11-18。內容反映當時的技術環境，保留作為紀錄，未更新。

目前web開發進入HTML5的時代，開發者們常使用的起手式(boilerplate)往往是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>

或者是bootstrap提供的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

可以注意到的是第一句都是 <!DOCTYPE html> ，

這就是所謂的HTML文件類型(document type)宣告，這樣的宣告是讓瀏覽器知道這份html是依據HTML5的標準去開發的，

而瀏覽器也會根據這樣的標準去呈現畫面。

如果開發者忘了宣告doctype，那麼瀏覽器就會進入所謂的Quirks mode混合模式，

混合模式的成因是由於瀏覽器並不知道這份文件是依據什麼樣的標準去撰寫的，

當然它也不知道怎麼樣的呈現才是正確的。

常見的狀況是css選擇器(selector)的class以及id在混合模式下是case insensitive(大小寫無區別)，

而正常模式下是case sensitive(大小寫有區別)，進而造成顯示的css style錯誤並造成網頁跑版。

[ 其中容易發生的錯誤行為可參考MDN網站:

https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior ]

HTML5之前的文件宣告類型有分三種：

HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset

[ 詳細的宣告方式請參考W3C網站:

http://www.w3schools.com/tags/tag_doctype.asp ]

說了那麼多其實結論是：

記得加上 <!DOCTYPE html> 就對了！

CSS3 BOX MODEL原理

原發布於 2014-11-24。內容反映當時的技術環境，保留作為紀錄，未更新。

寫CSS的第一個步驟通常是需要了解選擇器(selector)怎麼使用，

而通常接下來你就會聽到box model這個詞：

[ image source: http://inserthtml.com/codex/css-guide-box-model/]

撇開傳統的IE不談，W3C的標準BOX MODEL計算方式為：

外部高度 = content height + padding + border + margin

外部寬度 = content width + padding + border + margin

以及

內部高度 = content height + padding + border

內部寬度 = content width + padding + border

舉例來說：http://codepen.io/ph-mike/pen/MYwaNW

<div class="box-model">
  <h1>800x600</h1>
</div>

.box-model{
  background-color: grey;
  color: #fff;
  text-align: center;
  width: 800px;
  height: 600px;
}

CSS的部分寫上div元素的寬度與高度分別是800px以及600px，這就是所謂的content width, content height，

在未指明padding以及border時，此元素的寬高就是800×600。

現在我們來增加border以及padding：

.box-model{
  background-color: grey;
  color: #fff;
  text-align: center;
  width: 800px;
  height: 600px;
  padding: 30px;
  border: 1px solid #000;
}

根據上面的算式，此時div的寬度為 800 + 30*2 + 1*2 = 862，高度為 600 + 30*2 + 1*2 = 662 (px)，

所以有時候如果你很疑惑為什麼明明寬度設定了800px卻還是超過，不了解box model往往是主要的原因。

但有時候padding or border加來加去常讓人搞不清楚到底元素的寬高是多少時，

就換box-sizing進場了。[ box-sizing: 嗨！大家好，就是我 ]

box-sizing大致分為兩種

content-box：這個是預設值，也就是上面所述W3C的標準：元素寬 = content width + padding + border
border-box：如果將box-sizing設為border-box時，此時css寫的寬度就是元素的寬度，無需再加上padding or border，因為已經將padding以及border都包含在元素的寬度及高度裡面。

我們馬上來將剛剛的例子改寫： http://codepen.io/ph-mike/pen/OPVMMa

.box-model {
  background-color: grey;
  color: #fff;
  text-align: center;
  width: 800px;
  height: 600px;
  padding: 30px;
  border: 1px solid #000;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

你會發現這樣設定後，元素寬度就是你所設定的800px，不會因為padding or border被影響了。

而大家常用的bootstrap3 css framework就是使用box-sizing: border-box來幫大家省去麻煩，

不過應該怎麼寫比較方便就交給各位開發者自己去選擇使用囉。

flexbox

原發布於 2014-11-30。內容反映當時的技術環境，保留作為紀錄，未更新。

覺得排版很累人又麻煩嗎？
以前想排下列幾種排法都非常的困難
應該會用盡postion, table, display跟float吧(苦笑…)

第一次看到flexbox 就覺得也太神奇了吧
根本解決我苦惱多年的排版
先來看看瀏覽器支援程度

Browser Support

這邊看到IE要10以上才可以用，
所以其實桌上版網站我還是會避免用flexbox
(~~千萬不要看到不能用這個就把視窗關掉了~~)
因為他真的很適合做手機版網站的排版

首先我把flexbox功能分兩塊

container

(之後範例都以底色黃色區別)
可以控制item們的大方向，例如他們是要靠左對齊、分散對齊、垂直置中等等

item

(之後範例都以底色深灰區別)
則是可以各別控制，例如我想item1是其他item兩倍寬、item4順序要從最後一個變第一個

那我們就開始囉

我們的html結構非常簡單

<ul class="container">
  <li class="item"><a href="#">1</a></li>
  <li class="item"><a href="#">2</a></li>
  <li class="item"><a href="#">3</a></li>
  <li class="item"><a href="#">4</a></li>
</ul>

css //當然一定要加上display: flex; 才能開始做所以有事情

.container{
  display: flex;
}

flex-direction

row(default) | row-reverse | column | column-reverse
控制list水平還是垂直
[codepen_embed height=”442″ theme_id=”8415″ slug_hash=”VYvjeY” default_tab=”result” user=”hannahpun”]See the Pen flex-direction by hannahpun (@hannahpun) on CodePen.[/codepen_embed]

justify-content

flex-start(default) | flex-end | center | space-between | space-around
控制list的對齊方向
[codepen_embed height=”385″ theme_id=”8415″ slug_hash=”xbwORo” default_tab=”result” user=”hannahpun”]See the Pen justify-content by hannahpun (@hannahpun) on CodePen.[/codepen_embed]

align-items

flex-start | flex-end | center | baseline | stretch(default)
控制list的垂直對齊位置
[codepen_embed height=”493″ theme_id=”8415″ slug_hash=”EaVyZJ” default_tab=”result” user=”hannahpun”]See the Pen align-items by hannahpun (@hannahpun) on CodePen.[/codepen_embed]

align-self

flex-grow

控制每個item比例，可以拿來做三欄、兩欄的應用

See the Pen flex-grow by hannahpun (@hannahpun) on CodePen.

order

<integer>
[codepen_embed height=”161″ theme_id=”8415″ slug_hash=”QwjEKa” default_tab=”result” user=”hannahpun”]See the Pen flex-order by hannahpun (@hannahpun) on CodePen.[/codepen_embed]

應用-水平垂直置中

你會發現平常超擾人的水平垂直置中用flexbox變得超級簡單
[codepen_embed height=”272″ theme_id=”8415″ slug_hash=”wBKWLX” default_tab=”result” user=”hannahpun”]See the Pen 水平垂直置中 by hannahpun (@hannahpun) on CodePen.[/codepen_embed]

應用-三欄式設計

通通用flexbox就解決所有對齊問題

See the Pen flexbox-use by hannahpun (@hannahpun) on CodePen.

寫完發現有人把它變成圖解釋
也蠻清楚的可以點下面圖片

我安裝了Sublime Text，然後呢？

原發布於 2014-12-15。內容反映當時的技術環境，保留作為紀錄，未更新。

在網站開發的第一堂課 HTML+CSS+JS課程中，
是下載sublime text 做練習
但sublime除了當編輯器，
到底還有什麼好用呢(~~不然就用dremweaver或記事本就好了嘛~~)
我想它最強大的就是它的外掛plugins了，
外掛搭配快速鍵，可以大大增加你開發的效率

但還是建議，如果你是初學者
應該要先會從零開始自己key程式碼
熟了之後，再來用這些工具加速自己開發時間會更好噢

以下範例
使用：sublime text3
OS: mac

有人問說2跟3有什麼不同，大概就是iphone5跟iphone6的差別吧
所以用當然就是用最新的了

Sublime所有的plugins 在點我可看到
他會列出哪個最新、最熱門，點進去會告訴你這外掛如何安裝跟使用等等
至於不同OS之間快速鍵使用法，在這裡也能看到

安裝Package Control

安裝plugins之前，你必須先安裝Package Control
安裝方法可以看這篇
若你不想看英文也可以參考我整理出來的

1. 先按 ctrl+`，並貼上語法

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

2. 按enter，等個五秒會看到顯示成功(安裝sublime text2的話要重新啓動才會成功)

安裝Plugins

1. 先按commend+shift+p(叫出Package Control)，接著輸入install，再按Enter

2. 接著輸入你要安裝的plugin名稱，按Enter之後，下面狀態列會顯示安裝成功

看看你裝了哪些plugins

先按commend+shift+p(叫出Package Control)，接著輸入list，按Enter

移除plugins

1. 先按commend+shift+p(叫出Package Control)，接著輸入remove，按Enter

2. 這時會列出你安裝的所有外掛，選擇你想刪除的外掛，按Enter

積下來開始介紹常用Plugins囉

Emmet

Emmet 官方文件

Emmet是每個前端工程師必備安裝的外掛了
只要按了特定的字+tab 就自動幫你生成html碼

!
<!-- 按tab會產生以下 -->

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
</head>
<body>

</body>
</html>

<!-- .wrapper>ul --> 
<div class="wrapper"><ul></ul></div>

<!-- li*3 --> 
<li></li><li></li><li></li>

<!-- div>(header>ul>li*2>a)+footer>p --> 

<div>
    <header>
        <ul>
	    <li><a href=""></a></li>
            <li><a href=""></a></li>
	</ul>
    </header>
    <footer>
	<p></p>
    </footer>
</div>

<!-- link:css --> 
<link rel="stylesheet" href="style.css”>

<!-- script:src --> 
<script src=""></script>

在css裡也一樣好用，是不是超方便！

bgc // background-color
w // width
h //height
p //padding
p-r //position: relative;
cu-p //cursor: pointer;

SublimeTmpl

讓你可以在folder快速新增空的檔案

點了html就會生一個空的html給你，不需要在自己慢慢打囉
他還有提供空的js,css php…等

HTMLBeautify

幫你把html結構化整理乾淨

有時貼別人程式碼進編輯器就會變亂

這時按Command-Option-Shift-F，程式碼就會瞬間變整齊

JsFormat

針對js的結構化，把亂掉js弄乾淨．快速鍵是Command+alt+f

其他快速鍵

ctrl+/ 註解
ctrl+L 點到一個字幫你選一整行

ctrl+Shift+D 複製光標所在整行
commend+ ] 全部往後移
commend+ [ 全部往前移
ctrl+G 找行數
alt+commend+2 一個視窗變兩個視窗

大家有什麼必裝不可的plugins也可以在下面留言交流喔

為什麼要用Sass

原發布於 2015-01-02。內容反映當時的技術環境，保留作為紀錄，未更新。

也許你曾經聽過Sass/Compass
但不懂他可以幹嘛，怎麼這麼多人在用？
“用過就回不去了” 是Sass屆的名言
在介紹之前，先想想你用Css曾經遇過的問題

1. 永遠只有一支 .css，完成一個專案通常會上千行，當你要修改東西時必須一直scroll來scroll去找．

2. 當客戶要求所有字都要變大時，你必須把上千行css看一遍然後把所有字級變大

3. 當你不是最一開始的開發者，主管請你修已離職員工的css，你會想撞牆壁，因為完全不懂前一位同事寫法邏輯

4. 當一個案子很急，需要2,3個人共同開發…恩幾乎不可能因為你們共用同一個css

5. 當你要控制同一區塊裡面內容，你必須要一直.header ul, .header ul li, .header a…..一直不斷複製.header….覺得很煩

6. css3必須加很多前綴詞，-webkit-, -moz-, -ms-, -o-很麻煩，難道不能寫一次就可以在各個瀏覽器就有一樣效果嗎？

7. 當設計跟你說阿我覺得這個綠太深了，我想要淺一點，同樣你要再把上千行的css深綠改為淺綠

8. 要做背景圖時(background-image)，你必須先去看這張圖長寬，然後設定width, height，一旦設計師改同張圖尺寸了，你就必須回過頭來改尺寸

9. sprite的做圖很不錯，但算那些圖片位置也太麻煩了吧

10. 若必須要做三個一模一樣網站，只是顏色不同．做完之後設計師跟我說這三個網站圓角通通要改成直角，或還有其他微調…然後你程式碼開始變很亂

11. 就算有寫共同元件可以使用，但code太長，寫到下面忘了上面，回到上面忘記下面寫什麼

12. 我只要用bootstrap的grid，但必須把整包bootstrap include進來覺得程式碼變很肥

13. 每次做網站都要從頭開始，明明很多樣式都差不多，好希望寫好常用style就不用每次重寫了

14. 發現css重覆的style很多，我只能一直加重權重覆蓋，到最後變得好難管理

15. 做responsive的時候，不知道怎樣寫更好管理

綜合以上，一個專案css經過很多次改來改去，程式碼變超亂，~~只好偷偷命名為mike.css讓人以為是同事寫的~~

寫css時，其實真的非常難管理，相信大家都有經驗過XD
Sass/Compass解決了以上所有問題，用更程式的角度幫你撰寫css

例如我想做30種button 每個字跟按鈕顏色都不同，Sass可以用迴圈幫你三行解決
純Css呢？你必須寫Ｎ行….

他不僅僅提供提供迴圈，還有變數，function，mixin, extend….Compass還有多到不行的library可以供你使用

假如你~~想偷懶~~，減少重覆跟更有效率的管理你的Css，歡迎加入Sass/Compass行列

我們也有提供相關課程，歡迎你來報名:)

Sass + Compass開發初階

Sass + Compass開發進階

Regular Expression, 讓你來去自如抓字串

原發布於 2015-01-13。內容反映當時的技術環境，保留作為紀錄，未更新。

這篇看似很無聊，
但看完你不會後悔的

以下文章都簡稱Regex, 然後用js做範例

Regex ＝ Regular Expression縮寫，中文是正規表達式
他不是一種程式語言，
是以一組特定字元符號描述字串樣式規則的記述語法(誒是不是不懂XD)
而且幾乎通用在任何語言裡(Javascript, php, ruby, python…)

其實我也是工作了好幾年之後，
才第一次知道Regex是什麼東西，
Regex是一門博大精深的學問，小妹我也只會簡單的，
但簡單的Regex就能解決許多專案中的問題
所以就想來分享給大家

http://regexone.com/

初學者可以玩玩看這個網站，
玩過一次之後對Regex就可以有一定認識，
不過因為都是英文，所以我還是來整理一下

註：字元: 單一字,如’a’
字串: 一串字如’apple’

[abc] → 抓單一個字元: a, b, or c
[^abc] → 抓任何單一字元除了 a, b, or c
[a-z] → 抓任何小寫a-z之間的字元
[a-zA-Z] → 抓任何小寫a-z,大寫A-Z之間字元

[codepen_embed height=”209″ theme_id=”8415″ slug_hash=”BypbrG” default_tab=”result” user=”hannahpun”]See the Pen Regex by hannahpun (@hannahpun) on CodePen.[/codepen_embed]

\d → 任何數字字元
\D → 任何不是數字字元
\w → 任何字串+底線，其實等於[a-z\dA-Z_]
\W → 跟\w相反
\s → 空白鍵
\S → 任何不是空白鍵字元
. → 任何字串
\. → .這個符號

^ → 字串開頭位置

$ → 字串結尾位置

(…) → 抓()裡面的字串

a|b → a 或 b, 它可以是一串字串
\b → 在邊界的字元, ex hello.pdf, h跟p都是邊界字元
a? → 抓0個或1個的a , ex 我想抓a跟(a), /(?a/)?
a* → 抓0以上的a, ex 抓hello全部, (\w*)
a+ → 抓1以上的a

a{3} → 抓3個a
a{3,} → 抓3個以上a
a{3,6} → 抓3-6個之間的a

好，是不是已頭昏了，
讓我們來玩有趣一點的東西

現在有一個字串，讓我們來抓電話號碼跟email
[codepen_embed height=”247″ theme_id=”8415″ slug_hash=”ZYLPwW” default_tab=”result” user=”hannahpun”]See the Pen Regex phone by hannahpun (@hannahpun) on CodePen.[/codepen_embed]

email: ([\w\-]+@[\w\.]+)

[\w\-] → 抓任何單一字元跟- // h,a,n,n,a,h
[\w\-]+ → 抓成字串 // hannah
([\w\-]+@[\w\.]+) → 把email整個包起來抓

phone: $?\d{3}$?[\s\-]\d{3}[\-\s]\d{4}

\d{3} → 3個數字 // 111
$?\d{3}$? → 3個數字可以被()包起來也可以不要 // 111 or (111)
$?\d{3}$?[\s\-] → 3個數字後可能會是-或空格隔開 // 111-, 111
$?\d{3}$?[\s\-]\d{3} → 再接3個數字 // 111-222
$?\d{3}$?[\s\-]\d{3}[\-\s] → 後面可能會是-或空格隔開 // 111-222-, 111-222
$?\d{3}$?[\s\-]\d{3}[\-\s]\d{4} → 最後再接4個數字 // 111-222-3333

不但如此，你還可以運用在你的sublime裡
例如，今天你要把網頁所有a tag href 裡面東西換成#
你的程式碼裡面可能有
<a href=“register.html”> <a href=“contact.php”> <a href=“privacy”>…
這時候用Find and Replace是行不通的，因為每個href的值都不同
Regex就派上用場了

只要簡單打上 <a href=”(\w+.\w+)”
就可以找到所有 a href了

p.s 記得紅色框框那個要按下去才能用Regex

保護你的Wordpress網站

原發布於 2015-01-30。內容反映當時的技術環境，保留作為紀錄，未更新。

目前使用Wordpress搭建的網站已經來到了很瘋狂的數量，

其中也不乏大家耳熟能詳的媒體網站或是官方網站:

開發者在開發網站的過程中，專注在整合著前後台功能的同時，

常常疏忽了對於網站的保護措施，這篇文章想與大家簡單聊聊關於如何改善你的Wordpress網站的安全性。

在我們安裝Wordpress時，通常使用的管理者使用者名稱為admin，再搭配設立的密碼，

形成第一組 username / password的組合，同時也具有網站的最大權限 (管理者)。

這邊就露出了一個小問題，畢竟得到了管理者的帳號密碼就等於得到了這個網站的所有權限，

~~如果你跟我一樣懶的話，~~那管理者的使用者名稱就是admin，

所以駭客要做的事情就變得很簡單，猜你的密碼。

以暴力攻擊的窮舉法來說，就算不寫程式去猜你的密碼，人工的方式整天沒事幹一天試300組，

一年下來也可以嘗試300*365 = 109500次，可想而知，寫個小程式去猜你的密碼對駭客來說簡直是小菜一碟，

不出兩天，密碼應該已經被破解，駭客已可以輕易進入你的後台任意更改你的所有資料。

聽起來很可怕對吧!?

所以更應該加強網站的安全性，請聽我娓娓道來….

通常我們會這樣做:

1. 建立一組黑名單，擋住那些駭客的IP，

但駭客下次換個IP就又破解了，所以比較正確的做法應該是

2. 建立白名單，也就是設定只有你或者是你認可的IP可以進入這個管理後台。

如果你以為我接下來要告訴你怎麼建立黑白名單，那就大錯特錯了，

關於資安的事情，還是交給專業的來，更何況是高手已經寫好又是免費的外掛，

要跟大家介紹的是一套專門做安全性的外掛: iThemes Security

下載位址: https://wordpress.org/plugins/better-wp-security/

安裝完成後，應該會在WP的後台看到Security的選項畫面，

點Dashboard後應該會看到這個畫面

接下來他會導引你去這個網站申請一個API key，https://www.virustotal.com/en/

拿到API key之後，剩下的就跟使用其他plugins沒有差異啦，因為後台就是一些簡單的選項選擇。

這塊可以設定自已的IP為白名單：

這塊可以設定黑名單：

當然還可以強制不使用admin這個帳號：

不過當然你要先創建一個新的管理者帳號再刪掉本來的admin。

大致介紹到這邊，還有很多沒介紹到的功能就交給大家自己玩玩看囉。

設定WP Revisions次數

原發布於 2015-03-20。內容反映當時的技術環境，保留作為紀錄，未更新。

WordPress有很多貼心的機制，Revisions就是其中一個，

它可以幫助你作版本控制，如果編輯者不小心寫錯了而想直接回復成先前的版本，

那麼透過選擇你要的revisions就可以返回先前的資料狀態，不需要重新打一次資料。

不過很多佈景主題的開發者常常忘了設定WP Revisions的次數而導致程式不停地儲存一筆資料進資料庫，

以上就是一個經典的範例，可以看到 posts這張資料表中存的資料，不停地重複儲存同一個post的資料，

就算想從資料庫去刪除這些資料想讓資料庫的瘦一點，常常也無從刪起；

有時候其他編輯者可能同時在編輯其他文章，那麼資料表就會出現如上圖一樣的狀況，

各個post的資料交錯出現，要下SQL去清真的也很難處理。

再看一個驚人的例子，這個悲劇大概就是使用者不停的更新檔案所造成的…

所以千萬記得在你的wp-config.php裡面加上下面的程式碼，

define( 'WP_POST_REVISIONS', 3 );

如此做的話，每篇文章最多就存三筆最新的紀錄，資料庫也不會莫名的爆炸啦～

詳細的使用請參考此連結: http://codex.wordpress.org/Revisions

position relative absolute 做出區域的絕對定位

原發布於 2017-03-20。內容反映當時的技術環境，保留作為紀錄，未更新。

在網頁上我們常看到文字、icon 等內容，加入圖片中的的設計，

例如下圖將文字主題加入照片中，使用者能夠第一眼發現圖片重點。

position img（position relative）

類似這種設計，其實我們不用依靠 photoshop，

利用 CSS 中的position 的 relative 及 absolute 屬性排版，也可以輕鬆達成！

那麼 position：relative 、 absolute 要如何運用，以及有什麼要點需要注意呢？

我們手來做一個類似的設計，過程中替你一一講解其中的要領，

先來看看成品吧！

position relative 說明圖 1

想在圖片加上醒目的設計，該如何下手呢？

首先我們要思考 HTML 的架構，

<div class="background">
  <img src="https://www.utaso.com/P9A6246.jpg" alt="photo">
  <a class="info" href="#">
    <h2 class="title">Traveling<br>in Japan</h2>
    <p class="date">August 2017</p>
  </a>
</div>

範例中，黑色透明的背景範圍以 info 命名，background 則為 info 的母層。

為什麼要將 info 寫在 background中呢？

因為CSS 中， position：absolute 屬性的元素，會往母層尋找有 position：relative 的元素位置定位，

換句話說，我們要以 background 所在的相對位置來定位，info就必須是 background 的子元素。

確認好 HTML 架構後，我們再來撰寫 CSS 屬性

.background{
   width: 650px;
}

img{
   width: 100%;
   height: auto;
}

.info
{
   display: inline-block;
   padding: 30px 50px 0 30px;
   background: rgba(0,0,0,.4);
   color: #fff;
   text-align: center;
   text-decoration: none;
 }

我們先做些樣式的設計，對母層 background 設定寬、高，

接著對 img 做設定，使他貼齊父元素大小，就不會有圖片過大的情況發生，

最後再對 info 做樣式的設定，當然你們也可以依自己喜好對顏色、字體等等做調整。

剩下的工作就是替 info 及background 做區域中的絕對定位。

.background{
  position: relative;
  width: 800px;
}

我們先替 background 加上 position：relative。

.info
{
  position: absolute;
  top: 30%;
  left: 0;
  display: inline-block;
  padding: 30px 50px 0 30px;
  background: rgba(0,0,0,.4);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

對 info 加上 position：absolute 後，別忘了調整 info 位置完成排版設計喔！

top : 30% ， info 會下移 background 高度的30%、left：0，貼齊 background 的左側，

當然若想貼齊圖片的右側位置，只要將 left：0 更改成 right：0 就能輕鬆辦到。

範例連結： http://codepen.io/oscar9527/pen/peNOEZ

利用 position 的 relative 及 absolute 處理圖片排版，除了不用依靠 photoshop 外，

我們可以針對重點處，使用 HTML 的 a 元素產生連結的效果，比起純圖片的設計、全圖片的連結方式，

使用者可以在網頁上有更好的體驗，此外還可以進一步加上 a:hover 的屬性，達到不同的視覺效果。

小提醒：子元素沒有上層的相對位置時，便會以 body 元素進行定位 (整個頁面)，當你發現區域中的絕對定位不對勁時，不妨檢查一下你的 HTML 架構及 position: relative 屬性。

水平置中的三種方法，你用對了嗎？

原發布於 2017-03-20。內容反映當時的技術環境，保留作為紀錄，未更新。

使用CSS置中時遇到問題了嗎？

爬了網路上很多文章還是找不到問題出在哪裡？

其實是因為不同人要設計的置中元素(content)以及他的父元素(container)會有好幾種不同的狀況組合，而往往這些小小的差別就是決定置中成敗的關鍵哪！

今天小編不只要為大家介紹水平置中的三種主流方法，還會有實際的應用範例！置中的部分都是配合RWD的設計！（就是有吃「橡膠果實」超能力的網頁元素們啦！）

本篇最後還會附上超好用的置中小幫手，給各位急用的客官參考喔！

一起來看看吧！

前情提要

每一種網頁元素都會有html為它預設的display屬性。

分為inline element以及block-level element。

♦ inline element

＊會自適應內容大小。

＊不能設定width、height、margin、background-img等。

＊如：a、span、img…

♦ block-level element

＊預設會佔滿父元素的寬度。

＊如：div、p、ul、li、h1、h2…

順便介紹一下等等會用到的：

♦ display: inline-block

inline-block顧名思義就是兩種性質都來一點。

更貼切一點來說，它的外在是 inline 內在是 block，

外在像inline不會換行且會自適應大小，

內在像block可以設定width、height、margin、background-img…等參數。

這樣多功能的特性是超級方便的啊！

text-align: center;

♦ 主要用在inline element

在父元素設定text-align: center，該父元素內部所有的元素（不管幾層以下），只要是文字或是inline element（如：a、img）就會乖乖依據個別的父元素寬度進行水平置中定位。意思是只要最外層的父元素有設定text-align: center，裡面的inline element通通都會有水平置中的效果！

＊不知道元素寬度也可以使用。（當然囉～因為inline element都是未知寬度的）

♦ 若是block-level element怎麼辦？

若是block-level element（如：div、h1、ul）並同時有設定width之元素，該區塊則不配合置中（但是內部的文字或其餘inline性質的也會依據其父元素位置而有置中效果喔）。

1. 這時候就需要加上display: inline-block，讓該元素擁有inline特性後可以解決。

2. 或是加上該元素的固定寬度（如：px、%），並搭配下一步的margin: 0 auto也可以達成。

♦ 範例

使用text-align搭配不同元素特性及調整所製作的網頁選單。

margin: 0 auto;

初學者小補充（水平置中的三種方法）

♦ 主要用在block-level element

有時候我們想針對一個區塊水平置中，而在該元素已知寬度（如：px、%）下，可以在置中元素內設定margin:0 auto。

＊如果區塊的寬度沒有設定（或是可變動的），會直接佔用整個寬度空間。亦即此方法務必要先對置中元素設定好固定寬度！

＊若置中的元素要能夠有自適應內容大小的效果，則不建議使用此方法（改用上一種方法）。

♦ 若是inline element怎麼辦？

inline element沒辦法設定width、margin…blablabla，要加上display: block後才能設定margin並完成置中。

常看到有些朋友遇到對img置中卻無法working的問題。很可能就是因為不小心忽略img是被預設為inline element的！需要轉換成block-level element才能設定margin並完成置中。

下次遇到你設計的元素無法乖乖置中時，可以檢查看看它的html tag是不是使用到了inline的預設值？

＊img特性補充：img雖然常被歸類在inline element，但其實是可以直接設定width、height、margin的，唯獨沒辦法配合margin: 0 auto進行置中。

♦ 範例

使用margin: 0 auto置中不同大小的區塊、照片(apple logo)的iphone5s。

~~別問我為何要放iphone5s…，其實只是一時想不到有什麼適合的範例XD~~

position: absolute;

left: 50%;

transform: translateX(-50%);

上面一段加在置中元素內，要記得在父元素裡加上position: relative;。

＊有設定position: absolute的元素會自動忽略static的元素，並往更上層去找其他非static的父元素來定位。因此父元素的position必須要是非預設(default)的static值。（其實設定為relative、absolute或fixed都可以）

＊translateX(-50%)的50%是依據該置中元素。

＊不論是inline還是block-level，有設定寬度還是沒設定寬度，都可以使用！

＊同樣的模式也用在垂直置中。

＊詳細一點來看一下步驟圖解吧！會直接呈現水平＋垂直置中。

水平置中3（水平置中的三種方法）

2015年CSS3出來之後，才由transform: translateX(-50%)取代margin-left: -(一半寬度)進行回歸。

由於margin-left的比例是依據父元素，只能使用準確的px值達成置中元素的一半寬度。因此舊的做法會很難配合RWD的設計，只要螢幕寬度縮小造成該元素位置比例跟著改變時，原本恰恰好的margin回歸設計就會被打亂。

超級置中小幫手

最後的最後要來介紹個好用的小東西！快速置中小幫手！

急著要解決置中元素不乖乖聽話的問題，而實在沒有時間仔細研究上述的方法跟細節嗎？爬了好多文了還是沒法度嗎？

小幫手傳送門

只要設定好你目前的狀況（例如寬度高度已不已知啊？是一堆文字還是照片？），它就會提供針對你的狀況完成專屬的範例code！是非常貼心的小幫手啊！

不過還是建議想在網頁領域打滾的朋友們，有時間還是盡量盡量真正去瞭解各種方法的使用時機和原因啦。哈哈

如何讓網頁在手機上無法縮放？

原發布於 2017-03-21。內容反映當時的技術環境，保留作為紀錄，未更新。

現在人手一支智慧型手機、平板，相信大家在行動裝置上瀏覽網頁時，一定碰過這種狀況:

點了搜尋框，畫面就自己放大，導致看不到網頁全貌，

mobile webview（如何讓網頁在手機上無法縮放）

這時只要在<head>標籤中加入下面這行程式碼:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

就可以讓畫面在點擊文字輸入框時維持固定大小。

這一行程式碼在做什麼呢?

viewport

viewport的作用是告訴瀏覽器，目前裝置有多寬(高)，以便在縮放時有個參考基準。

width=device-width

width 設為 device-width，用意是適應各家裝置的大小，
如果這邊width沒有設定的話，就會依照 html, css 給予的 width 當作預設值。

initial-scale = 1

設定手機螢幕畫面的初始縮放比例為 100%。

maximum-scale = 1

設定畫面最大放大比例為 100%。

user-scalable = no

設為no，表示不允許使用者縮放頁面。

這邊有一點要注意，若非RWD網站使用了這行程式碼，
會導致使用者永遠只能檢視網站的一部分，如同上面的圖例，
而且只能透過滑動頁面來檢視內容，無法自行放大縮小。

根據W3C草案，在meta tag中viewport有以下屬性可以進行設定:

width：可設定數值，或者指定為 device-width
height：可設定數值，或者指定為 device-height
initial-scale：第一次進入頁面的初始比例，最小 0.25，最大 5
minimum-scale：允許縮小最小比例，最小 0.25，最大 5
maximum-scale：允許放大最大比例，最小 0.25，最大 5
user-scalable：允許使用者縮放，1 or 0 (yes or no)

Bootstrap 4 新功能簡介

原發布於 2017-04-02。內容反映當時的技術環境，保留作為紀錄，未更新。

Bootstrap 4 重寫了非常多內容，多了哪些新東西？又有哪些部份被捨棄了？
還不知道有哪些重大變革的朋友們可別錯過了！

讓我們來一起看看吧！
Bootstrap（Bootstrap 4 新功能簡介）

在2017年1月，Bootstrap 4釋出了最新的Alpha 6版本！（終於有比較穩的版本了:D）

目前進展：
進度表（Bootstrap 4 新功能簡介）

也可以直接去官方關心進度，Beta版本看樣子很快也要釋出了！

重要革新

一、拋棄Less，改用Sass

• 以Ruby開發的Sass，讓Bootstrap 4的編譯速度比以前更快。

二、擁抱flexbox

• 以強大排版工具 flexbox（CSS3）為基礎（取代 table、floats…），重寫了整個網格系統與重要的組件（如：nav、button group、list group等）

• 也代表捨棄對 IE9（以下）的支持。（如果非得支援IE，如銀行網站，只能繼續使用v3）

flexbox為v4帶來：

• 自動等寬等高的欄位。（待下一段網格系統時說明）

• 排列（對齊、排序、置中）變得更簡單。

減少使用 clear: both 解決 floats 奇怪的 collapse 問題；解決在v3難以達成的對齊效果；置中不再需要囉唆的 translate 或 margin；也能更直觀地設計排列順序。

水平方向（Justify content）

v3：透過 offset 設定子元素 col 的位移，需要計算好向右位移的欄數才能設定。

v4：透過更直觀的 .just-content-*（start、center、end）設定在父元素裡，並提供更多種形式。（仍可繼續使用 offset 來設計，但要記得在 v4 的語法已更新為 .offset-md-*）

水平方向（Bootstrap 4 新功能簡介）

//Bootstrap 3
<div class="row">
    <div class="col-xs-6">no offset</div>
</div>
<div class="row">
    <div class="col-xs-6 col-xs-offset-3">.col-xs-offset-3</div>
</div>
<div class="row">
    <div class="col-xs-6 col-xs-offset-6">.col-xs-offset-6</div>
</div>

//Bootstrap 4
<div class="row justify-content-start">
    <div class="col-6">.justify-content-start</div>
</div>
<div class="row justify-content-center">
    <div class="col-6">.justify-content-center</div>
</div>
<div class="row justify-content-end">
    <div class="col-6">.justify-content-end</div>
</div>

v4提供的其他形式：

．between：剩餘空間平均分配在items之間。

．around：剩餘空間平均分配並圍繞在items周圍。

水平方向2（Bootstrap 4 新功能簡介）

垂直方向（Align）

v3：並沒有特別提供垂直方向的排版方法。

v4：兩種方法，從父元素設定 .align-items-*（start、center、end），或從單獨的子項目設定 .align-self-*（start、center、end）。

align（Bootstrap 4 新功能簡介）

//從父元素設定（內部所有cols會一起對齊該設定）
<div class="d-flex align-items-start">.align-items-start</div>
<div class="d-flex align-items-center">.align-items-center</div>
<div class="d-flex align-items-end">.align-items-end</div>

//從子項目設定
<div class="d-flex">
    <div class="align-self-start">.align-self-start</div>
    <div class="align-self-center">.align-self-center</div>
    <div class="align-self-end">.align-self-end</div>
</div>

排序

v3：排序 col 是透過 push、pull 來設計，需要計算好欄數的位移量才能設定。

v4：提供了更直觀的三種排序，first、last、unordered（排在first與last之間）。

（若需要更複雜的排序則使用 push、pull 或是直接設定各項order屬性之值。需注意 pull、push 在v4的語法已經更新為 .push-md-*、.pull-md-*）

order（Bootstrap 4 新功能簡介）

//Bootstrap 3
<div class="row">
    <div class="col-xs-4 col-xs-push-8">first</div>
    <div class="col-xs-4 col-xs-pull-4">second</div>
    <div class="col-xs-4 col-xs-pull-4">third</div>
</div>

//Bootstrap 4
<div class="row">
    <div class="col flex-last">first</div>
    <div class="col flex-first">second</div>
    <div class="col flex-unordered">third</div>
</div>

小提醒：

• 以上三種排列方式的前提為父元素要是flexbox container（如 row 已預設），若不是則直接在父元素加上 .d-flex 即可。

• 還有很多flexbox帶來的新功能可以自己去看看，就不多做介紹囉～

三、改善網格系統與單位

• 自動等寬等高的欄位。

v3：需要指定每個欄位的寬度、計算好每列的12欄該如何分配。

v4：可以直接使用 .col 或 .col-* ，就會自動算好欄寬，並均分剩餘的空位；欄高會預設為等高。（仍可搭配使用v3的方式指定欄位寬度，如下圖v4的第四列。）

Bootstrap 4 新功能簡介說明圖 2

//僅示範上圖之下兩列
//Bootstrap 3
<div class="row">
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
</div>
<div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-3">.col-xs-3</div>
    <div class="col-xs-3">.col-xs-3</div>
</div>

//Bootstrap 4
<div class="row">
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
</div>
<div class="row">
    <div class="col-6">.col-6</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
</div>

• 加入新的節點 xl（col-xl-*）。

現在一共有五個斷點可以運用。值得注意的是，雖然是往上多了更大的名稱 xl ，實際上是向下擴大 media query 的控制範圍至 544px(or 34em)。

換句話說，現在v4的.col-lg-6 就等同是v3的.col-md-6。

Extra small (xs) – below 576px

Small (sm) – between 576px and 768px

Medium (md) – between 768px and 992px

Large (lg) – between 992px and 1200px

Extra Large (xl) – over 1200px

• 主要單位從 px 改為 rem

除了斷點（media queries）和網格系統這類會被實際viewports影響的仍使用px為單位以外，其他主要單位都從 px 改為 rem。

四、推出強大的 Card 組件

• v4推出的新組件 .card 取代了原有v3的.panel、.well 與 .thumbnail。

• Card 內部：可輕鬆帶入多元的內容（如：照片、文字、nav）與設計（如：浮在照片上的文字）。

• Cards 排列：輕鬆達成等寬等高、多列的佈局與設計，也多了瀑布流式（Masonry-like）可使用。

• 更多詳細的功能與效果直接去官網看看吧！

五、重新設計綴詞

• 取消了 -xs 綴詞（以 .col-* 取代 .col-xs-* ）。因為 xs 並不像 sm、md、lg或xl，是為了增加自適應 styles 而存在的節點，因此 .col 會比 .col-xs 更恰當地表達它的正確含義。

• 以property-value pairings（property: value;）的方式，更直觀地命名相關的 class 名稱。如：

．.justify-content-between 即為 justify-content: between。

．.col-md-push 、 .col-md-pull-* 改為 .push-md-*、.pull-md-*。

六、Bootstrap主題

除此之外，Bootstrap 4 還發佈了三種官網主題，不過每種主題要價$99。

如何設定臉書分享呈現圖片，簡單步驟不是工程師也能懂

原發布於 2017-04-02。內容反映當時的技術環境，保留作為紀錄，未更新。

在Facebook分享網址連結時，會在下方自動生成網頁摘要，

FB連結縮圖1（如何設定臉書分享呈現圖片）

這區塊包含了三個部分:

縮圖、標題、網頁描述。

部落格文章、新聞的瀏覽率，很大程度來自網路社群的轉貼和分享。

封面圖片是吸引讀者點閱的關鍵，下面讓我來告訴你如何正確的設定圖片顯示格式。

以截圖的分享文章為例，下面是該網頁的 og 標籤的程式碼

<!-- og -->
<meta property="og:title" content="【財經雷Look】歷史巧合正在重演?! 我們即將面對的經濟局勢 | 部落格 | MacroMicro 財經M平方">
<meta property="og:type" content="website">
<meta property="og:site_name" content="MacroMicro 財經M平方">
<meta property="og:url" content="https://www.macromicro.me/blog/cai-jing-lei-look-zhe-ci-jiu-shi-ya-zhou-jin-rong-feng-bao-fan-ban">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://cdn.macromicro.me/blog/2015/08/mf_pay47__01__630x420.jpg">
<meta property="og:description" content="致力於整合全球總經數據，試圖發覺景氣循環的蛛絲馬跡，相信所有金融商品的投資決策都應回歸基本面。期待協助大家找到屬於自己的投資地圖!">

og:image 就是顯示圖片的標籤，可以看到這邊圖片還被設定了width及height。

根據 Facebook for developers 內的說明文件，

我們可以知道使用 1200 x 630 像素的圖片在高解析度的裝置呈現效果最好，使用的圖片小於 600 x 315

像素圖片就會縮小顯示，
FB連結縮圖(sm)（如何設定臉書分享呈現圖片）

如果使用 200×200 像素以下的圖片，Facebook會抓不到圖喔。

如果需要多張圖片可供讀者切換檢視(左上會顯示切換箭頭)，

FB連結縮圖(多張)（如何設定臉書分享呈現圖片）

可以自己設定多個 og:image 標籤，就能讓左上角出現切換的按鈕。

ex:

<meta property="og:image" content="http://xxx.xxx.com/1.jpg" />
<meta property="og:image" content="http://xxx.xxx.com/2.jpg" />
<meta property="og:image" content="http://xxx.xxx.com/3.jpg" />

有時候會發現，明明設定要顯示的圖片已經超過 600 x 315 像素了，卻還是顯示小圖，

可能是因為這些原因:

1. 之前已經分享過同樣連結，摘要資訊已經被Facebook快取儲存了

這時候可以使用Facebook的分享偵錯工具，在網頁內容更正之後，輸入網址點選再次抓取，

FB偵錯工具（如何設定臉書分享呈現圖片）

就可以抓到新設定的圖片了。

2. 圖片大小或檔案大小過大

圖片最大不能超過 1500x 1500，檔案大小最大不能超過 5MB，不然都會變成小圖。

總結:

0 x 0 ~ 199 x 199 抓不到圖

200 x 200 ~ 599 x 314 小圖

600 x 315 ~ 1500 x 1500 大圖

1501 x 1501 以上 小圖

記得圖片檔案容量不可超過 5MB 喔。

就是這麼簡單，下次記得正確的控制臉書上出現的分享資訊，肯定可以吸引更多的讀者點擊前往網站喔～

如何在頁面上翻轉 500 個 ul li 元件

原發布於 2017-04-03。內容反映當時的技術環境，保留作為紀錄，未更新。

當我們需要在網頁上改變排列順序，第一直覺可能是利用 JavaScript 改變 HTML 的架構，

像是在頁面上翻轉 500 個 ul li 元件，可以先宣告一個變數存放頁面中的 li 元件，

再利用 for 迴圈「從尾到頭」對 li 重新排列，達到翻轉的效果。

var li = document.getElementsByTagName('li');
for (var i = li.length; i-- ;) {
  li[i].parentNode.appendChild(li[i]);
}

當然這只是眾多 JavaScript 解法的之一，但除了依靠 JavaScript 外，

CSS3 的出現，提供了更多彈性、創意的解答方式，

讓我們跳脫程式的思考框架，來看看 CSS 是如何辦到的

CSS 第一招：flexbox

ul {
  display: flex;
  flex-direction: column-reverse;
}

只要在 CSS 中對 ul 設定 display: flex ; 後

加上 flex-direction : column-reverse / row-reverse ;

ul 中的 flex-item 就會乖乖照你的指示排列。

若是對 flexbox 排版不熟悉，可以參考 Blog 中的 flexbox 教學，

教學：https://eoscreative.co/flexbox/

這裡還有個有趣的小遊戲，利用 flexbox 排版幫青蛙放到對應的荷葉上。

透過小遊戲你可以理解到 flexbox 是如何運作。

小遊戲：http://flexboxfroggy.com/

froogy 操作畫面（如何在頁面上翻轉 500 個 ul li 元件）

CSS 第二招：tranform: rotate

ul{
  transform: rotate(180deg);
}

li{
  transform: rotate(180deg);
}

這個方式取自網友的神回覆，對 ul 反轉一圈後，再個別反轉 li 元素

完全活用了CSS3特點，讓人會心一笑又不得不佩服他的思維。

光看程式碼想像不出來沒關係，我們在下方提供了動畫連結給你，

可以看出 ul li 個別旋轉後的變化，更容易理解該怎麼利用 transform: roate來反轉元素。

動畫連結：http://codepen.io/oscar9527/pen/XMEKYq

我們可以藉著 CSS3 的新特性，處理以往要靠 JavaScript 才能達成的功能，

除了上述的 flex 、 transform 兩項新特性外，

CSS還有 Transition、Animation、Pseudo-classes、calc 等，

提供我們更多元的解決方法，跳脫單一的思考框架。

小提醒：不管用什麼方式，考量使用者的環境後找出最適合的答案才是最重要的，利用 CSS3 時，別忘了看看各家瀏覽器對 CSS 語法的支援程度，如果你有不同的技巧，不妨在底下留言分享給我們！

Javascript chart plugins 介紹

原發布於 2017-04-21。內容反映當時的技術環境，保留作為紀錄，未更新。

在這個資訊爆炸的時代，我們可以藉由 Google 大神找出許多 plugins，但你仍需花時間過濾這些資源的可用性，像是版本是否持續更新、瀏覽器版本支援程度、不同裝置間適應性等等。

這次我們整理出三款的圖表 plugins 給你，除了版本持續在更新、支援 RWD 外，更提供線上編輯的服務，當你需要一份資料圖表時，可以先在線上預覽樣式，客製屬於你的專屬圖表。

Highcharts

輕量級的大小提供良好效能，樣式簡潔簡單，IE9 以下的用戶支援，若使用者需在舊版本作業，Highcharts 是個好的選擇，Highcharts也提供了不同瀏覽器間的繪圖技術及性能，供開發者作為參考。

high2（Javascript chart）

high1（Javascript chart）

CHARTIST.JS

CHARTIST.JS 圖表為SVG 格式，支援 Sass 架構，CSS 和 JavaScript 分離，不只程式碼清楚，CSS 可依照個人化調整樣式、動畫及響應式設計( media queries )，10KB的大小使用上非常方便。

ch demo（Javascript chart）

ch support（Javascript chart）

Canvas.JS

Canvas.JS 提供簡單的 API 讓你好上手，除此之外他們更強調跨裝置、平台特性，擁有比傳統 Flash / SVG 更佳的體驗，對主流的瀏覽器及大量資料轉換是個好選擇，需注意的是 Canvas 為 HTML5中的新特性，所以並非所有瀏覽器都有良好支援。

Canvas.JS 提供 24種不同類型圖表，選好 Demo 後就可以進行線上編輯，但 Canvas.JS 並非完全免費，若有商業用途則需付費使用。

Javascript chart 說明圖 4

善用 plugins 可以加速我們的~~下班速度~~ 開發速度，但使用 plugins 前別忘了注意使用文件、支援環境、 github issue 等等，了解這組套件特性，才不會發生使用 plugins 卻做更多事情的窘境。

JQuery Popup Plugins 介紹

原發布於 2017-04-21。內容反映當時的技術環境，保留作為紀錄，未更新。

大家在網路上可以找到許多的Plugin，但並不是每一個都符合我們的需求。

找到Plugin後，可以先依以下項目進行篩選，避免日後開發過程更加麻煩:

是否真的需要這項功能
說明文件是否清楚
有無持續更新
有無支援響應式網頁
有無支援行動裝置

今天跟大家介紹幾個自己覺得不錯的Popup Plugins

Vex

vex jQuery 彈出視窗套件的示範動畫

Vex 的動畫及樣式易於修改，也支援在行動裝置上使用，而且相當輕量，最近才剛發布新版本。

瀏覽器支援

IE 9+
Edge 13+
Firefox 21+
Chrome 23+
Safari 6+
Opera 15+

Vex的實作

[codepen_embed height=”456″ theme_id=”0″ slug_hash=”PmqjQz” default_tab=”js,result” user=”LeonardoXu”]See the Pen <a href=’http://codepen.io/LeonardoXu/pen/PmqjQz/’>JS libraries – 2 – Vex.js – voorbeeld 1</a> by leo hsu (<a href=’http://codepen.io/LeonardoXu’>@LeonardoXu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

SweetAlert

SweetAlert用來取代alert，內建多種平常會用到的樣版，警告、錯誤、登入、確認等等，

瀏覽器支援

IE8: (Dropped since v1.0.0-beta)
IE9: Works, but icons are not animated.
IE10+: Works!
Safari 4+: Works!
Firefox 3+: Works!
Chrome 14+: Works!
Opera 15+: Works!

SweetAlert的實作

[codepen_embed height=”553″ theme_id=”0″ slug_hash=”MmwojO” default_tab=”js,result” user=”LeonardoXu”]See the Pen <a href=’http://codepen.io/LeonardoXu/pen/MmwojO/’>SweetAlert jQuery plugin example</a> by leo hsu (<a href=’http://codepen.io/LeonardoXu’>@LeonardoXu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Magnific Popup

Magnific Popup 輕量快速，內建的樣板更多了，圖庫、影片、地圖、表單應有盡有，

瀏覽器支援

Desktop:
Chrome, Safari, FF, Opera, IE8+, partial support of IE7 (works, but some visual layout features, like vertical centering, are missing)

Mobile:
default browser in Android 2.3+, iOS5+, Blackberry 10+, WP7+, mobile Opera and Chrome on Android

下面是用Magnific Popup的動畫效果(CSS)展示

[codepen_embed height=”735″ theme_id=”0″ slug_hash=”wdaeOe” default_tab=”css,result” user=”LeonardoXu”]See the Pen <a href=’http://codepen.io/LeonardoXu/pen/wdaeOe/’>CSS3 animation effects for Magnific Popup</a> by leo hsu (<a href=’http://codepen.io/LeonardoXu’>@LeonardoXu</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

除了上述幾個，還有很多好用的plugins，使用時可以多比較，讓開發過程更順利。

好用且推薦之網站jquery slider plugins

原發布於 2017-04-21。內容反映當時的技術環境，保留作為紀錄，未更新。

jQuery插件有百百款，但並不是每個都提供完善的使用機制，

這裏為各位挑選幾款好看又好用的slider插件，它們都：

配合自適應（Responsive friendly）

配合觸控手勢（Mobile friendly）

有完善的文檔（documentation）

而且目前仍被活躍的開發中（on Github！）

Slick

檔案輕薄、可以針對不同breakpoint分開設定、跨瀏覽器測試（IE8+）、很快速能夠上手！

目前看過使用起來最簡便的slider plugin，只需要設定一個class就能在js設定所有功能。還提供原始版本（w/o slick-theme.css）與設計過介面後的版本挑選，方便設計師使用。

官方demo：http://kenwheeler.github.io/slick/

[codepen_embed height=”315″ theme_id=”0″ slug_hash=”ybNMpr” default_tab=”result” user=”jennifer-juan”]See the Pen <a href=’http://codepen.io/jennifer-juan/pen/ybNMpr/’>slick</a> by jennifer.juan (<a href=’http://codepen.io/jennifer-juan’>@jennifer-juan</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

OwlCarousel

檔案輕薄、可以針對不同breakpoint分開設定、支援播放影片、跨瀏覽器與裝置測試（IE7/8/10/11）

官方demo：https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

flexslider

開發歷史豐富的插件，最後還被woocomerce買走。檔案輕薄、跨瀏覽器與裝置測試（IE7+）、能快速上手。

但小編使用的感覺，似乎自從賣給woo之後就有不少地方沒有被更新或是整理。官方各個平台的資訊不太一致（像是touch swipe的功能到底有沒有就讓我找了一陣子），雖然是強大很久的插件，但若沒有非常用心管理，加上舊插件的UI、UX介面也容易跟不上新的潮流，客官們可以慎選一下囉！

官方demo：http://flexslider.woothemes.com/

[codepen_embed height=”370″ theme_id=”0″ slug_hash=”WjwxJv” default_tab=”result” user=”jennifer-juan”]See the Pen <a href=’https://codepen.io/jennifer-juan/pen/WjwxJv/’>WjwxJv</a> by jennifer.juan (<a href=’http://codepen.io/jennifer-juan’>@jennifer-juan</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Swiper

可以設定的樣式非常豐富，可以多列顯示、3D過場效果、視差效果、放大顯示…。

功能多元華麗因此檔案沒有前幾個輕巧，也相對的要先設定很多基礎才能完成一份可用的slider。

使用Swiper製作前也要注意，它並不專注於測試與打造各種瀏覽器或平台的相容性。

官方demo：http://idangero.us/swiper/demos/#.WPNyYVN96Rs

[codepen_embed height=”305″ theme_id=”0″ slug_hash=”YVqqRr” default_tab=”result” user=”jennifer-juan”]See the Pen <a href=’http://codepen.io/jennifer-juan/pen/YVqqRr/’>Swiper</a> by jennifer.juan (<a href=’http://codepen.io/jennifer-juan’>@jennifer-juan</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

利用 CSS 做出響應式的 iframe (youtube video)

原發布於 2017-09-15。內容反映當時的技術環境，保留作為紀錄，未更新。

上次介紹了 position 中 relative 、absolute 幼幼班等級的應用 傳送門

這次我們要結合 iframe 標籤，在網頁中嵌入 Youtube 影片並完成響應式的設計。

iframe 是什麼？

簡單來說就是將外部的網站嵌入到你的網站上，一般常見的有Youtube 、Google Map 等設計，若對 iframe 還不太了解也可以參考 MDN 上介紹及相關屬性設定。

若想在網頁中嵌入影片，Youtube 是一個非常好用的平台

不僅省下了影片的存放空間，影片在各瀏覽器、裝置上的支援度也相當高，

最重要的嵌入代碼也貼心的幫你準備好了，我們只要會複製、貼上就可以了 XD

如何在 Youtube 上取得 iframe 這裡就不多說明，網路上已經有許多詳細的教學可以參考。

<iframe width="560" height="315" src="https://www.youtube.com/embed/yHZEG3P9tiM" frameborder="0" allowfullscreen></iframe>

取得代碼後，用一層 div 包覆 iframe 加上你喜歡的 class 名稱，這邊使用 video-wrapper。

<div class="video-wrapper"> 
    <iframe src="https://www.youtube.com/embed/yHZEG3P9tiM" frameborder="0" allowfullscreen></iframe>
</div>

CSS 部分

video-wrapper{
    position: relative;
    padding-bottom: 56.25%;  //16:9
    overflow: hidden;
}
video-wrapper iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

padding-bottom(top): 56.25% 讓影片的寬高比為 16:9，

padding-bottom(top): 75% 則寬高比為 4:3 ;

最後為了確保能將影片超出的內容隱藏，所以添加一行 overflow: hidden;

如此一來就完成了基本的響應式 iframe 設計，

在這邊提供一個在 CODEPEN 上看到很酷的作品

有了基本響應式 iframe 概念後，大家可以看看該如何進一步客製網頁上的嵌入內容。

[codepen_embed height=”350″ theme_id=”0″ slug_hash=”zGZKaQ” default_tab=”result” user=”pixelthing”]See the Pen <a href=’https://codepen.io/pixelthing/pen/zGZKaQ/’>Youtube embed poster frame reveal</a> by Craig Morey (<a href=’https://codepen.io/pixelthing’>@pixelthing</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

CSS object-fit 解決正方形圖片樣式的痛點

原發布於 2017-09-24。內容反映當時的技術環境，保留作為紀錄，未更新。

近來電子商務網站都流行如 instagram 般的正方形圖片風格（至於 instagram 開始接受長方形圖片，這又是另外一件事情了）

那我們來看看蝦皮的方式

右邊的滑鼠墊是採用上下白邊的方式，因為在商品上架時，蝦皮就會強制要裁切成方形，這樣的圖片賣家自然會選擇上下白邊的方式來處理。

另外一個案例就來看同樣屬於專注台灣市場的行動拍拍賣

跟蝦皮一樣是屬於上傳照片時就要決定裁切成正方形的方法。

因為對於 client 來說要同時處理長方形橫式跟直立然後空白的地方要留白或留黑，然後再滿足 iOS, Android, Web 三平台實在是有其困難處，因此大家不約而同都選擇讓 server 存成方形的圖片。

那這樣的缺點呢？

就是在賣家上架了長寬比差很多的介紹圖就會悲劇了

就像這樣，圖片經過 server 壓過之後根本看不到文字了。

但現在只要使用 CSS object-fit 就能讓後端只需要存原圖，不管長寬比怎樣的圖，都能改成正方形樣式。

範例取自於 Codepen by dudleystorey

這邊有兩張長寬比不同的圖片

object-fit: contain

section img {
  width: 200px;
  height: 200px;
  border: 1px solid;
  background: #eee;
}
section.contain img {
  object-fit: contain;
}

使用方法非常簡單，就是在圖片上面設定 object-fit: contain ，留白處就是設定 img 的背景色，在這個例子是設定 #eee ，要設定成黑色直接改成 #000 即可。

object-fit: cover

cover 的用法我們其實常常使用在 background-size: cover ，但是只能使用在背景圖上面，現在 object-fit 也可以設定 cover ，這樣就能使用 img 的 alt 屬性，對 SEO 來說是有利的。

支援度

從 caniuse 的支援表上來看

目前只有 IE 不支援，iOS10，Android 4.4.4 開始也都全面支援，Firefox 與 Chrome 在很早的版就也已經支援。是前端工程師可以提供給主管的解決方案，那 IE 怎麼辦呢？考慮 fallback 到手機如何呢？畢竟現在已經是人人都會用手機但不是人人都用電腦的時代了，推薦 object-fit 給大家參考。

Bootstrap 4 學習筆記

原發布於 2017-10-05。內容反映當時的技術環境，保留作為紀錄，未更新。

這次介紹主要著重在官方文件上的 Layout 、Utilities，整理出改版後不同處及自己的看法提供參考。

首先在載入 Bootstrap.js 前，除了原本的 jquery 外，還多了一個 popper.js，jquery 版本需求也從 1.9.0 提升到 3.2.1

popper.js 介紹

重構 viewport breakpoints 、 class 命名小變動，官方文件寫的很清楚

bs4 grid（Bootstrap 4 學習筆記）

col 自動填滿剩餘空間
col-{breakpoints}-auto 維持原寬度 (依內容決定)

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">1 of 3</div>
        <div class="col-md-auto">Variable width content</div>
        <div class="col col-lg-2">3 of 3</div>
    </div>
    <div class="row">
        <div class="col">1 of 3</div>
        <div class="col-md-auto">Variable width content</div>
        <div class="col col-lg-2">3 of 3</div>
    </div>
</div>

col auto width（Bootstrap 4 學習筆記）

透過 spacing class 設定元件 margin、padding，能夠搭配不同斷點使用
（個人覺得還蠻方便的 XD）

.mt-0 {
  margin-top: 0 !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.py-2 {
  padding-top: ($spacer * .5) !important;
  padding-bottom: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

.p-4 {
  padding-right: ($spacer * 1.5) !important;
}

.p-5 {
  padding: ($spacer * 3) !important;
}

//You can add more sizes by adding entries to the $spacers Sass map variable.

利用 Flex 特性重新定義 offsetting columns 方式

offsetting columns（Bootstrap 4 學習筆記）

Order ：設定 col 排序，一樣能夠搭配 breakpoints 調整

col order（Bootstrap 4 學習筆記）

Display：淺顯易懂的規則外，還可以搭配斷點使用， RWD 設計更方便啦
但並非所有 display property 都有支援，下方為官方文件說明。

display property（Bootstrap 4 學習筆記）

Colors：預定義顏色在使用上也更多元，附上官方說明

colors 1（Bootstrap 4 學習筆記）

text-{colors} 也可以搭配 bg-{colors}使用

color 2（Bootstrap 4 學習筆記）

進階一點可以至 _variables.scss 調整、額外定義樣式，客製一個按鈕好快啊

$theme-colors: (
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800,
  custom: #4ce39e,
) !default;

<a href="#" class="btn btn-custom text-white">more</a>
<div class="bg-custom text-white">custom</div>

Responsive breakpoints mixins
這次更貼心幫你把 RWD 常用的 mixins 都幫你寫好了

//@media (min-width: 576px) 
@include media-breakpoint-up(xs) { 
  ...
}

//@media (max-width: 575px) 
@include media-breakpoint-down(xs) { 
  ...
}

//@media (min-width: 768px) and (max-width: 1199px)
@include media-breakpoint-between(md, xl) {
  ... 
}

@include media-breakpoint-only(xs) {
  ... 
}

Header 及 Loader 常用到的 z-index ，

Bootstrap 中部分元件也有使用到，若跟你的 css 發生衝突可以先參考官方的預設值（官方文件上提到不鼓勵去修改元件設定的預設值）

Bootstrap 4 學習筆記說明圖 4

短評及心得：太強大惹

圖片來源：http://getbootstrap.com/

參考資料：https://getbootstrap.com/docs/4.0/getting-started/introduction/

串接Wordpress json API – 原來wp還可以這樣玩

原發布於 2017-12-09。內容反映當時的技術環境，保留作為紀錄，未更新。

常常有人詬病Wordpress很大包，小編這邊無法反駁這點，畢竟整包檔案是真的滿大的，但一套系統有基本完整的功能(後台管理、使用者管理、文章管理、媒體庫管理)想不大包都很難呀，特別是它連API都幫你開好了!

其實Wordpress這套CMS系統有API已經是好幾年前的事了，目前整體的API架構已經來到第二版，官方文件檔也清楚列出所有接口，有興趣串接的使用者不妨花些時間閱讀一下有哪些接口是你可以使用的：http://v2.wp-api.org/。

所以現在也有網站是單純將wordpress來做後台，前端網頁呈現部分透過wordpress系統本身所提供的API來抓取資料，如此操作的話可以很簡單地將後台網址設定為：admin.xyz.com，而前台主網站 xyz.com 就可以使用開發者所習慣的前端框架來做撰寫，不管是喜歡angular, react or vue 可以輕鬆地打造出一個有後台且前端可輕易打造介面的網站。

下面簡單示範如何透過ajax來載入由wordpress json API所開放的資訊，舉 Inside.com 硬塞科技網路新聞網站為例：(標準的Wordpress CMS，每個月sessions就有300萬，所以看看這個例子可以再次證明網站能否承載巨大流量跟Wordpress的關係實在不大阿)

根據wordpress API官方文件記載，以posts為例，基本外層的API網址架構為：/wp-json/wp/v2/posts，應用在Inside的話，網址就是：https://www.inside.com.tw/wp-json/wp/v2/posts，點擊連結即可看到所吐出之json data。

方便起見，前端css使用bulma.css(本於flexbox layout的CSS框架)，非常好用，有興趣的開發者也可以看看這個新的框架，Ajax的部分簡單透過jQuery的方式，下篇再示範若是使用Vue.js的時候應如何實作：

HTML的部分我們簡單的放一個container，準備放載入後的資料，

<div class="container">
</div>

CSS因為先簡單的透過bulma的基本樣式，所以不另外多做。

Javascript抓取json data後放過我們指定的頁面容器中：

$.ajax({
  url: 'https://www.inside.com.tw/wp-json/wp/v2/posts',
  method: 'GET',
}).done(function(data){
  // console.log(data);
  $.each(data, function(i, val){
          var template = '<div class="column"><div class="card"><a href="'+val.link+'" target="_blank"><div class="card-image"><figure class="image is-4by3"><img id="'+val.featured_media+'" src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"></figure></div><div class="card-content"><div class="media"><div class="media-content"><p class="title is-4">'+val.title.rendered+'</p></div></div><div class="content">'+val.excerpt.rendered+'<time datetime="'+val.date+'">'+val.date+'</time></div></div></a></div></div>';
      if( i%4===0 ){
        $('.container').append('<div class="columns">'+template+'</div>');
      }
      else{
        $('.container .columns').last().append(template);
      }
      //get image url
      $.ajax({
        url: 'https://www.inside.com.tw/wp-json/wp/v2/media/'+val.featured_media,
        method: 'GET',
      }).done(function(image){
        $('#'+val.featured_media+'').attr('src',image.source_url);
      });
  });
}).fail(function(){
  console.log('failed');
});

bulma的columns是裡面有幾個column就會幾等分，所以此範例為每四個一排，最後一排由於一次是吐十筆資料，所以會是兩個並排的卡片呈現。

將結果透過codepen來呈現，請參考下方：

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OOdEOo” default_tab=”result” user=”matrixki”]See the Pen <a href=’https://codepen.io/matrixki/full/OOdEOo/’>extract wordpress posts</a> by Mike (<a href=’https://codepen.io/matrixki’>@matrixki</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

下篇再繼續跟大家分享若是使用改用Vue.js來寫的話應該怎麼操作。

[js 進階] JavaScript Scope

原發布於 2017-12-11。內容反映當時的技術環境，保留作為紀錄，未更新。

js framework 蓬勃發展(vue/angular/react)，但若連 js 進階概念都不清楚，不就像還不會 abc 就想學如何用英文演講一樣嗎?
接下來會有一系列 js 核心的概念，讓你不管需要接觸哪個 framework 之前，都能更進一步認識 javascript
文章裡會提到

Scope

scope 簡單來說就是 where and how to look for things
js 有兩個 lexical scopes

1. global
2. function

只有在新增 function 時才會有新的 scope 出現，
而且只存在於此 function 內，其他像 if for 都無法建立新 scope

對於找尋一個變數的 lexical scoping rule，
會從此變數所存在的 function 開始找，
如果找到了就返回該變量，如果找不到就往上一層繼續找
以此類推直到 global 的環境

js-es5-scope-2
(圖片來自 datchley.name)

這個範例有三個 scope:
global scope 定義了 a 跟 foo;
foo() 定義了 b 跟 bar;
bar() 定義了 y 跟 c

以 bar() 來說，我在這個 scope 裡找變數 b ，
找不到時就往上一層 foo() 這個 scope 找，
找到了就會回傳 b = a*4

另外一個例子

function foo(){
console.log(bar)
}

function baz(){
var bar = "bar"
foo()
}

baz() // error

因為變數 bar 只存在於 baz() 的 scope 裡

Shadowing

shadow 是在某變數的可視範圍內，定義同樣名稱的變數，
取用時是取用最近 scope 定義的變數

var x = "Hi";
function outerFun(){
var x = "Ho"; // shadows parent 'x'(Hi) declaration
function innerFunc(){
x = "Ha";
y = "Red";
}
innerFunc()
}
outerFun()
console.log(x) // "Hi"
console.log(y) // "Red"

outerFun 定義的 x shadow了 global 的 x
console.log(x) // “Hi” 應証了定義在函數裡面的變數在外面是讀不到的
console.log(y) // “Red” 因為 y 沒有被宣告過，所以自動會變 window.y, 每一層都讀得到他因為是 global 的

undeclared vs undefined

在進入 hoisting 之前，想解釋一下 undeclared 跟 undefined 其實是很不一樣的東西

undefined: 是在可訪問 scope (目前 scope 跟 parents scope) 裡定義過但找不到值
undeclared：是在可訪問 scope 沒有被定義過

var a;
console.log(a) //undefined
console.log(b) //undeclared

Hoisting

console.log(x)
console.log(y)
var x = y;
var y = 1;
console.log(x)
console.log(y)

這個例子第一眼你可能以為會輸出
undeclared
undeclared
undefined
1

但實際上卻會是
undefined
undefined
undefined
1

因為程式碼其實會自動把 var 過的變數跟 Function Declaration (涵式宣告式)
移到最前面 (Function Expression 並不會被移到最前面喔)
雖然表面上看不出來
但其實程式碼會默默變成

var x;
var y;
console.log(x)
console.log(y)
x = y;
y = 1;
console.log(x)
console.log(y)

另一個例子

var a = b();
var c = d();
console.log(a)
console.log(c)
function b(){
return c;
}

var d = function(){
return b();
}

這邊我們知道程式碼會默默變成

var a;
var c;
var d;
function b(){
return c;
}
a = b();
c = d();
console.log(a)
console.log(c)
d = function(){
return b();
}

所以答案就是
undefied
d is not a function

this

每一個 function 在被執行的時候都會有一個 reference 指向所屬的環境，就是 this
js 有四種函數調用方法

In normal function calls 一般呼叫涵式
Within methods on objects 方法調用
Within an object that has been constructed 建構涵式調用
A function invoked with .call, .apply, or bind 隱式調用

這解釋有點難懂，先來看看下面範例好了

function a (){
console.log(this) //這個 this 代表的是什麼呢
}

答案是不知道，
因為 this 取決于執行這個 function 時的環境

例如 a(); // In normal function calls
那 this 就是 window

var obj = {};
obj.a = a;
obj.a() // Within methods on objects
這時 this 就是變成obj

var b = new a()
這時 this 會是 a 這個 function 所產生的 object

a.call(obj) // A function invoked with .call, .apply, or bind
這時 this 就是也是obj

p.s JavaScript loses scope of this when used inside of a function that is contained inside of another function.

var cat = {
name: "Gus",
printInfo: function() {
console.log(this); // cat 這個 object
nestedFunction = function() {
console.log(this); // window
}

nestedFunction();
}
}
cat.printInfo();

想顯示每日人氣？讓網站使用 Google Analytics 資料

原發布於 2018-04-16。內容反映當時的技術環境，保留作為紀錄，未更新。

想在網站上加上「累積人氣」「當日人氣」「熱門文章」等的統計資料嗎？

有在用 wordpress 架站的朋友都知道，wp 提供了很多插件，例如「Page View Count」、「WordPress Popular Posts」等。這些插件即插即用，功能豐富、介面華麗，~~又能自己洗流量~~，宛如在 wp 裝了一個專屬報表！但插件不會告訴你，這些貼心豐富的功能下可能要付出什麼代價，今天這個外掛有可能一位訪客就在資料庫寫一筆資料記錄他的IP、來源國家、使用的電腦作業系統等等，看似紀錄了完整的使用者以及瀏覽資料。當任何一個進入網站的人都要從資料庫讀取一大串資料時，到底會消耗多少主機資源？使用時間一長或根本就是超高人氣的網站，很容易就會造成資料庫肥大、網站載入變慢甚至掛掉，到最後得不償失呀。

透過Google Analytics（不僅免費且數據相當精準!?），讓網站顯示原本在GA上就可以看到的各種數字，讓強大的GA專職幫你做好這些統計和報表資料，省下你的資料庫空間！透過串接GA API、申請Service Account，讓網站只消耗少少的資源，也能在網站上秀出累計人氣、當日人氣、熱門文章，甚至任何你想呈現的 GA 資料。

一、啟用 API 並建立 Service Account

來這裡，依序按下「continue」建立新專案，進入 API 生效成功頁面再按下「Go to credient」進入憑證申請頁面。

想顯示每日人氣說明圖 7

在 Credentials 頁面直接選擇建立 service account （上圖紅框），並按下「Create Service Account」進入建立畫面（下圖）。

想顯示每日人氣說明圖 8

填入 Service account name，選擇 Role（我是選 Project > Viewer），勾選 furnish a new private key，選擇下載 json 格式檔，再點選 Create 並下載金鑰，記得要將檔案備著並收好（此檔案是唯一複本，弄丟了就需要再重新建立新的 SA）

說明：由於 GA 的 data 是屬於帳戶的私密資料，但網站瀏覽使用者並不會有你的 GA 登入帳密。如果要讓網站（第三方）能代替你取出 GA data，並公開顯示在網站頁面上，就要透過申請 Service Account 並取得密鑰，讓網站能取用這組密鑰（可以想像成通行證），網站就能以Service Account的身份在每個使用者進入時，都去你的 GA 撈出最新的 data 並顯示在網頁上。

申請完成後就會來到Service Account列表，就可以看到剛剛新申請的Service Account。

想顯示每日人氣說明圖 9

將上圖圈起的 Service account ID 複製下來，接著要登入 GA ，將這組 Service Account 加為 GA 的管理員身份之一。

登入 Google Analysis > 「管理員」 > 「使用者管理」>「新增使用者」，將 Service account ID 填入上圖電子郵件地址的欄位，並勾選此帳號的權限，再按下新增即完成囉！

二、安裝 Google Client Library

接著要下載 google 提供的 library，可以直接使用 composer 安裝，或至 Google github下載最新的 releases （要注意 server 的php版本是否與 library 合用唷）。

三、完成初步設定

將第一步驟產生的金鑰與第二步驟載好的library都安置在到 server 上。

再來做一些初始化設定，將第一行（library file location，第二步驟安裝的）與第八行（key file location，第一步驟載下來的密鑰）改為正確的路徑與檔案名稱即可使用。

require_once __DIR__ . '/.../vendor/autoload.php';

$analytics = initializeAnalytics();
$profile = getFirstProfileId($analytics);

function initializeAnalytics()
{
  $KEY_FILE_LOCATION = __DIR__ . '/.../abc.json';
  $client = new Google_Client();
  $client->setApplicationName("Hello Analytics Reporting");
  $client->setAuthConfig($KEY_FILE_LOCATION);
  $client->setScopes(['https://www.googleapis.com/auth/analytics.readonly']);
  $analytics = new Google_Service_Analytics($client);
  return $analytics;
}

function getFirstProfileId($analytics) { 
  $accounts = $analytics->management_accounts->listManagementAccounts(); 
  if (count($accounts->getItems()) > 0) { 
    $items = $accounts->getItems(); 
    $firstAccountId = $items[0]->getId(); 
    $properties = $analytics->management_webproperties 
    ->listManagementWebproperties($firstAccountId); 
    if (count($properties->getItems()) > 0) { 
      $items = $properties->getItems(); 
      $firstPropertyId = $items[0]->getId(); 
      $profiles = $analytics->management_profiles 
      ->listManagementProfiles($firstAccountId, $firstPropertyId); 
      if (count($profiles->getItems()) > 0) { 
        $items = $profiles->getItems(); 
        return $items[0]->getId(); 
      } else { 
          throw new Exception('No views (profiles) found for this user.'); 
      } 
    } else { 
    throw new Exception('No properties found for this user.'); 
    } 
  } else { 
    throw new Exception('No accounts found for this user.'); 
  } 
}

四、範例

「網站人氣」，將使用 GA 的 pageviews（瀏覽量）：

$results = getPopularity($analytics, $profile, '2018-01-01');
printPopularity($results);

function getPopularity($analytics, $profileId, $startDate) {
  return $analytics->data_ga->get(
    'ga:' . $profileId,
    $startDate,
    'today',
    'ga:pageviews'
  );
}

function printPopularity($results) {
  if (count($results->getRows()) > 0) {
    $profileName = $results->getProfileInfo()->getProfileName();
    $rows = $results->getRows();
    $sessions = $rows[0][0];
    echo $sessions;
  } else {
    echo "No results found.\n";
  }
}

start date 設定為固定時間 ‘2018-01-01’（通常是ga碼埋入網站前的時間）就是累計人氣，若設定為 ‘7daysAgo’就是過去七天的累計人氣。更詳細的格式與計算方式說明請參考Google文件檔點擊。

「熱門文章」，取得過去30天最多瀏覽量的前五篇文章標題與連結（此範例以 wordpress 的規則為例）。

$popular_posts = getPopularPosts($analytics, $profile);
printPopularPosts($popular_posts);

function getPopularPosts($analytics, $profileId) {
  $optParams = array(
    'dimensions' => 'ga:pageTitle, ga:pagePath',
    'metrics' => 'ga:pageviews',
    'filters' => 'ga:pagePath!=/;ga:pagePath!@/category/;ga:pagePath!@/tag/',
    'sort' => '-ga:pageviews',
    'max-results' => '5'
  );
  return $analytics->data_ga->get(
    'ga:' . $profileId,
    '30daysAgo',
    'today',
    'ga:sessions',
    $optParams
  );
}

function printPopularPosts($results) {
  if (count($results->getRows()) > 0) {
    $profileName = $results->getProfileInfo()->getProfileName();
    $rows = $results->getRows();
    echo '<ul>';
    foreach ($rows as $row) {
      echo '<li><a href='.site_url().$row[1].'>'.$row[0].'</a></li>';
    }
    echo '</ul>';
  } else {
    print "No results found.\n";
  }
}

參數使用的規則說明都在Google官方文件檔這邊和這邊，除此之外可以來GA提供的 Query Explorer 探索更多可呈現的資料型態。

四、實際運用案例

實際範例就在我們最近的新作品，知名婚禮部落客-V娜的網站上唷！

（串接資料呈現在文章頁面的sidebar，包含Popular Post、Popularity）

歡迎有興趣的blogger、youtuber，或是對相關技術有興趣一起討論的朋友和我們聯繫唷！

補充：值得注意的Google Analytics的API調用次數免費版本是有限制的，每個專案每日有50000次請求上限，超過的就需要付費跟Google購買進階版的服務。

https://developers.google.com/analytics/devguides/reporting/realtime/v3/limits-quotas

使用highchart.js來協助網頁繪圖: column chart

原發布於 2018-12-13。內容反映當時的技術環境，保留作為紀錄，未更新。

網頁開發常需要使用到各種圖表，今天介紹一款網頁繪圖工具：highchart.js ，點進去連結觀看你可以發現裡面有各式各樣的圖表功能，幾乎什麼圖表都有了，今天我們來用範例講解最基本的直條圖( column chart )。

進入程式範例之前先前情提要一下，highchart 基本上是透過 svg 來繪圖，等於是說他提供你 javascript 的語法控制，然後幫你使用 svg 繪圖在網頁上，所以你的成品會是一個 svg 圖檔，當然他也是會有基本的 RWD 各項功能。

最近剛結束九合一選舉，就讓我們使用最時事的選舉開票來做例子吧！以號稱台灣章魚哥的台北市天母天玉里來說(投開票所編號0281-0285)，單以編號0281投開票所來看，我們查詢中選會網站的各候選人的得票數資料為：

吳萼洋：2
丁守中：390
姚文智：180
柯文哲：418
李錫錕：1

highchart column chart taipei municipal election 2018（使用highchart.js來協助網頁繪圖）

使用highchart起手式很簡單，就是將它提供的js file給引入即可，你可以使用 <script> 引入cdn，可以使用 npm install，這邊範例簡單起見使用 <script> 從 cdn 引入檔案。

<script src="https://code.highcharts.com/highcharts.js"></script>

在頁面上提供一個畫圖的區域 div 並給它一個 id：

<div id="container" style="width:100%; height:400px;"></div>

接下來就是寫 js 代碼了：

      $(function () { 
          var myChart = Highcharts.chart('container', {
              chart: {
                  type: 'column'
              },
              title: {
                  text: '2018 台北市長選舉 0281投開票所選舉資料'
              },
              xAxis: {  
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: '單位：張',
                  },
              },
              series: [
                  {
                      name: '得票數',
                      colorByPoint: true,
                      data: [
                          {
                              name: '吳萼洋',
                              y: 2,
                          },
                          {
                              name: '丁守中',
                              y: 390,
                              color: "#031195",
                          },
                          {
                              name: '姚文智',
                              y: 180,
                              color: "#159818",
                          },
                          {
                              name: '柯文哲',
                              y: 418,
                              color: "#24d7d6",
                          },
                          {
                              name: '李錫錕',
                              y: 1,
                          },
                      ]
                  },   
              ],
          });
      });

首先我們指定 chart type 為 column，此圖表形態為直條圖，指定x軸以及y軸類別以及標題，並在series裡放上我們從中選會網站得到的資料，如此一來highchart就會協助我們製圖，同時可以客製化每個候選人的顏色，成果如下，方便起見我在codepen中引入了 jQuery。

See the Pen <a href="https://codepen.io/matrixki/pen/oQRewg/" rel="noopener">column chart example: highchart.js</a> by Mike (<a href="https://codepen.io/matrixki" rel="noopener">@matrixki</a>) on <a href="https://codepen.io" rel="noopener">CodePen</a>.<br />

UI介面設計：單選按鈕vs 複選框，傻傻分不清楚？

原發布於 2019-10-05。內容反映當時的技術環境，保留作為紀錄，未更新。

UI/UX設計師在表單中會提供Radio buttons 或 Checkbox 來解決單選/複選答案呈現方式，其目的是為了幫助用戶在有限的範圍內提交答案。

這兩種設計元件看似意義明確，很好區分，但實際操作上還是看過不少錯誤例子。

這篇文章將釐清…

．Radio button .Checkbox 兩者定義，差別在哪？

．帶入實作觀念，先想過問題，正確使用Radio button / Checkbox 元件

Checkboxes（複選框）

一系列答案選項中，可複選多個答案。

舉例來說，有10個答案，你能勾選1個以上，2個、4個或10個答案，甚至可以不選。
意指選擇每一個答案不會互相影響。

checkbox-ui design — gif credit by:https://dribbble.com/shots/2194771-New-Checkbox-Interaction

Radio buttons (單選按鈕）

從一系列答案選項中，只能選擇1個答案。

示範如下，有兩個答案勾選其中一個，就無法選擇另個答案

Radio buttons style — gif credit by:www.justinmind.com

多種設計方式呈現Radio button，像是添加ICON ，幫助用戶填寫資訊時提升辨識度。

什麼情況下使用Radio buttons 、Checkbox設計元件？

先來看下方錯誤的設計例子，才知道問題出在哪，提升設計的思考能力。

checkbox design（UI介面設計）

外送服務網站，用戶可以選擇送餐時段，為了讓用戶提供期望收到餐點的時間。
但是，上方設計使用了Checkbox複選元件，暗示用戶所有時段都能勾選。這已經違背當初目的性；希望用戶選擇一個時段，餐廳可以提早備餐，也讓外送員知道什麼時候要送餐。使用錯誤的設計方式不僅造成用戶困擾，甚至可能影響營運服務的流程。

答案數量不多，用Radio buttons(單選），盡量避免Dropdown

答案數量少，盡可能一次列出所有項目，幫助用戶進行比較，找到適合的選項。

但是遇到答案數量很多的情況下，不可能用Radio Buttons一次列舉出來，
這裡可以參考 UX Movement 的建議，當有5個以上選項時，應替換成下拉式選單。
舉例像「選擇居住地國家」，通常會列出全世界所有國家，這時候可以用Dropdowns方式來做。

Select-contry-dropdown — 答案選項多，dropdown ( 下拉式選單）較佳

簡單的問答題，用Checkbox樣式做設計。

如果只有一個簡單的問題是/否,同意/拒絕，可以做成Checkbox樣式，提供用戶快速確認。

single-simple-question-answer-checkboxstyle — 「是」勾選、「否」不用勾選。

結論

本文僅講解兩者元件基本觀念，無論是網頁設計、APP設計，經常用到Radio button (單選按鈕) Checkbox(複選框），
，在實作方面，建議先思考問題本身，做UI/UX才能有規範地設計介面，
其目的是幫助用戶能預測元件執行的方式，減少用戶操作失誤帶來不好的體驗。

可商用！平面、網頁設計、HTML、CSS、3D 免費資源網站

原發布於 2019-11-17。內容反映當時的技術環境，保留作為紀錄，未更新。

好的設計輔助工具總能讓設計師靈感泉源。

「Freebies. by people」專門為了設計師、開發人員精心收錄各個免費資源的網站，

提供多種項目如圖標icon、字體、設計素材、網站套版主題、Html 套件、CSS Snippets、介面設計..等等

可透過站內項目分類、搜尋，方便查找適合的項目，甚至貼心地提供「可商業用途」（Commercial allowed）的篩選器，用在商業作品也沒問題。

可商用說明圖 3

「Freebies. by people」資源來自於外部連結，站內僅提供主題、預覽和簡單說明，

若不想錯過更新通知，可以訂閱該網站每週電子報。

Freebies.ByPeople

連結：https://freebies.bypeople.com/

進入網站即可看到右側豐富的資源，左側欄位則提供項目分類，及搜尋欄、商業用途篩選器

可商用說明圖 2

在預設的情況下，Freebies.ByPeople會顯示商業用途（Commercial allowed ）素材，

取消勾選後才會出現個人使用的素材，建議使用前留意一下作者授權規定，

才能避免後續遇到不必要的麻煩。

Freebies.ByPeople只提供檔案來源連結，不提供站內下載，因此獲取檔案必須回到原站，如檔案有更新也能下載到最新的版本。

值得一試的理由

一站即可搜索設計、開發網站等免費資源

提供快速切換鍵，方便篩選可商業用途素材

目錄

HTML DOCTYPE宣告以及混合模式(Quirks mode)

CSS3 BOX MODEL原理

flexbox

container

item

flex-direction

justify-content

align-items

align-self

flex-grow

order

應用-水平垂直置中

應用-三欄式設計

我安裝了Sublime Text，然後呢？

安裝Package Control

安裝Plugins

看看你裝了哪些plugins

移除plugins

其他快速鍵

為什麼要用Sass

Regular Expression, 讓你來去自如抓字串

保護你的Wordpress網站

設定WP Revisions次數

position relative absolute 做出區域的絕對定位

水平置中的三種方法，你用對了嗎？

前情提要

text-align: center;

margin: 0 auto;

position: absolute;

left: 50%;

transform: translateX(-50%);

超級置中小幫手

如何讓網頁在手機上無法縮放？

viewport

width=device-width

initial-scale = 1

maximum-scale = 1

user-scalable = no

Bootstrap 4 新功能簡介

重要革新

一、拋棄Less，改用Sass

二、擁抱flexbox

水平方向（Justify content）

垂直方向（Align）

排序

三、改善網格系統與單位

四、推出強大的 Card 組件

五、重新設計綴詞

六、Bootstrap主題

如何設定臉書分享呈現圖片，簡單步驟不是工程師也能懂

1. 之前已經分享過同樣連結，摘要資訊已經被Facebook快取儲存了

2. 圖片大小或檔案大小過大

總結:

如何在頁面上翻轉 500 個 ul li 元件

Javascript chart plugins 介紹

JQuery Popup Plugins 介紹

好用且推薦之網站jquery slider plugins

利用 CSS 做出響應式的 iframe (youtube video)

CSS object-fit 解決正方形圖片樣式的痛點

但現在只要使用 CSS object-fit 就能讓後端只需要存原圖，不管長寬比怎樣的圖，都能改成正方形樣式。

object-fit: contain

object-fit: cover

支援度

Bootstrap 4 學習筆記

串接Wordpress json API – 原來wp還可以這樣玩

[js 進階] JavaScript Scope

Scope

Shadowing

undeclared vs undefined

Hoisting

this

想顯示每日人氣？讓網站使用 Google Analytics 資料

一、啟用 API 並建立 Service Account

二、安裝 Google Client Library

三、完成初步設定

四、範例

四、實際運用案例

使用highchart.js來協助網頁繪圖: column chart

UI介面設計：單選按鈕vs 複選框，傻傻分不清楚？

可商用！平面、網頁設計、HTML、CSS、3D 免費資源網站