點選複製 Clipboard.js

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201510/clipboard-js.html

摘要：
之前有介紹過 點選自動複製 ( ZeroClipboard ) 這個透過 flash 的方式，繞過瀏覽器安全性限制，將網頁元素內容複製到剪貼簿的方法，但因為必須走 flash 的緣故，在不支援 flash 的瀏覽器裡反而變成了一個隱性的問題，從以前那篇文章可以看到，當初其實是參考了 Github 的做法，結果前一陣子在 Github 裡頭，赫然發現他的那顆按鈕已經不是 flash，變成用純粹的 JavaScript 就可以複製到剪貼簿，真是太令人感到意外！

Read More

聲音濾波器 ( BiquadFilterNode )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201510/web-audio-api-biquadfilternode.html

摘要：
這篇要來探討 Web Audio API 裏頭的濾波器：BiquadFilterNode，濾波器顧名思義，就是只讓固定頻率的波通過，在一般常見的聲音播放軟體的「等化器」，當中就用到許多濾波的功能，透過濾波器，我們可以加強或過濾低音或高音，直接影響聽覺的感受，甚至可以利用過濾器濾掉高頻的雜訊或低頻的雜訊，得到更高的音質。 使用 BiquadFilterNode 之前，要了解它有幾種類型 ( type ) 可以使用，如果對於文字描述不清楚的，其實只要看下面那張圖就能一目了然。

Read More

立體聲 ( PannerNode,StereoPannerNode )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/web-audio-api-stereo-pannernode.html

摘要：
通常我們在電影院看電影時，高檔一點的電影院會有立體音響 ( 特別是 iMax3D )，讓我們有置身在電影場景裡的感受，然而在 Web Audio API 裡也有類似的功能，讓我們可以模擬出立體的聲音，而這項技術雖然還沒有被廣泛應用，但根據現有的資訊，未來應該將會與 WebGL 結合，廣泛用於 360 度影片、Web 遊戲...等需要有立體聲音的技術領域，這篇將會做一些簡單的介紹。

Read More

聲音參數與音量節點 ( AudioParam,GainNode )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/web-audio-api-audioparam-gainnode.html

摘要：
上一篇 有介紹到 GainNode 這個控制聲音大小的節點模組，但並沒有深入介紹相關的用法，這篇就要來談談 GainNode 的操作處理，由於 GainNode 實在簡單，因為它只有一個屬性叫做「gain」，所以一定要先介紹「AudioParam」這個 Audio 的參數。

Read More

初探 Web Audio API

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/web-audio-api.html

摘要：
隨著 web 技術的蓬勃發展，在網頁裡播放音樂已經可以不需要透過 flash 或 quicktime 等外掛程式輔助，純粹使用 HTML5 的 audio tag 就可以播放音樂，甚至可以透過 W3C 所規範的 Web Audio API 就可以做許多進階的聲音控制和應用，接觸到的時候覺得實在太有趣，一定要寫一些文章在記錄一下。而 Web Audio API 的主要文件可以參考：http://webaudio.github.io/web-audio-api/ 要使用 Web Audio API，第一步就是要創建一個 AudioContext，AudioContext 是一個聲音的容器，在 AudioContext 裡，我們可以針對聲音做各種的處理，在裡頭，AudioSourceNode 表示音訊來源，而聲音是以節點的方式 ( AudioNode ) 存在，每個節點都有輸入和輸出，只有來源節點沒有輸入，聲音除了可以用外部的輸入 ( wav、mp3、ogg...等 )，也可以使用振盪器 ( Oscillators ) 來產生，原理就有點像我們彈奏弦樂器，也是利用樂器內的弦震盪來發聲。

Read More

SVG D3.js - 直條圖 ( 以登革熱數據為例 )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/svg-d3-20-bar-chart-tainan-dengue.html

摘要：
在 上一篇 我們介紹了長條圖的畫法，因為之前看過有人做了高雄和台南登革熱病例的長條圖 ( 不過他們不是用 d3.js 做的 )，所以想說自己學了 d3.js 也來試試看，雖然還做不到跟地圖結合，但可以將數字表格轉換成可視的圖形，就更容易理解疫情的變化囉。 因為要繪圖，就需要資料，我這邊使用的資料是台南的登革熱每日病例 ( 參考 104年臺南市本土登革熱病例數，使用 csv 需要跨域，可以用後端爬一份放在自己的 server 即可，不過覺得台南市政府可以用成英文啦，中文會有編碼的問題呀！ )，我抓了一份 csv 檔，用裡面的「確診日期」以及「編號 ( 加總就變成病例數 )」，就可以得到我們要畫圖的 data。

Read More

SVG D3.js - 直條圖 ( Bar Chart )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/svg-d3-19-bar-chart.html

摘要：
在之前一系列的 d3.js 介紹之後，終於要來發揮 d3.js 的強項「畫圖表」了 ( 其實之前已經有畫過折線圖了，參考：SVG D3.js - 區域 ( area ) )，這篇要來繪製的圖表是「長條圖 bar chart」，長條圖大概也是最簡單的圖表了，雖然可以直接用 CSS 和 div 來做，不過為了之後更複雜的圖表設計，這裏就直接用 SVG 進行。

Read More

SVG D3.js - Enter、Update 和 Exit

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/svg-d3-18-enter-update-exit.html

摘要：
在我之前的文章有談過 D3.js 的資料處理，這篇要來在介紹一下資料處理當中很重要的三個元素：enter、update 和 exit ( 不知道為什麼當初寫那篇文章沒有寫到哈哈 )，為什麼說很重要呢？因為這三個元素可以處理當畫面元素 ( Elements ) 和資料數量 ( data ) 不相等的情形。

Read More

SVG D3.js - 縮放行為 ( Zoom Behavior )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/svg-d3-17-zoom-behavior.html

摘要：
上一篇我們提到了拖拉行為 Drag Behavior，但在視覺化圖表的世界裡，如果只有拖拉好像還是不夠的，因此 d3.js 也很貼心的設計了「縮放行為」( Zoom Behavior )，讓我們可以透過例如滑鼠滾輪滾動或手指的手勢，就可以進行圖表的縮放，這篇也將要來探討是如何實作的，畢竟縮放的效果在 web 領域是比較少見也比較不容易實做，而 d3.js 與 svg 的結合，讓這個效果可以輕鬆愜意的展現。 zoom 的用法和 drag 滿類似的，都是一開始要先用d3.behavior.zoom();宣告行為，然後再使用call來呼叫，不過 zoom 相對又稍微複雜了些，因為又多了一些參數需要設定，讓我們先來看一下它提供了哪些 api：

Read More

SVG D3.js - 拖拉行為 ( Drag Behavior )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/svg-d3-16-drag-behavior.html

摘要：
這篇要來談一下 d3.js 裏頭的「拖拉行為」( Drag Behavior )，其實 drag 這個行為在 web 的世界裡頭早就存在已久，HTML5 出來之後更變成了一些基本的網頁行為，不過這個行為在 d3.js 該如何實現呢？其實 d3.js 早就已經幫我們做好了，不僅適用在 svg 裡頭，更可以應用在一般的網頁元素上頭。 要使用 d3.js 的 drag，一開始必須要先利用d3.behavior.drag()宣告這個行為，接著在裡面寫入dragstart、drag和dragend要做些什麼事，接著再讓我們的選擇的物件用call去呼叫，就可以讓我們選擇的物件具有 drag 的行為，用講的不是很好理解，用程式碼一步步分解來看。

Read More

SVG D3.js - transition ( tween、interpolate )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/svg-d3-15-transition-tween.html

摘要：
之前有介紹過 d3.js 基本的 transition ( 好像是一月份的事情了，真是好久以前啦... )，這篇要來談談比較難的 tween ( 補間動畫 )，在之前的 transition 都是使用 d3.js 預設的補間動畫，而 tween 可以透過一個函式，指定中間過場的行為，這個方式其實很好用，因為我們除了基本的長、寬、位置、顏色，更可以做出文字、數字...等電腦不知道如何做補間動作的效果 ( 例如 1~10 的數字變換 )，而 tween 通常會搭配 interpolate 一起服用，所以這篇就一起來介紹。

Read More

Photoshop SandStorm 沙塵暴效果

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/sandstorm.html

摘要：
SandStorm 是我偶然發現的一個 Photoshop 效果，它其實不是 Photoshop 內建的功能，而是有人做出來的一系列行為 ( Action )，也就是一連串的動作所組成，最後產生有如會畫一般的粒子效果，也就像 SandStorm 的名稱一樣，沙塵暴。

Read More

Google 語音辨識 API

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201509/web-speech-api.html

摘要：
又是因為工作的緣故，接觸到 Google 語音辨識的 api，實在覺得還滿有趣的，由於是 Chrome 內建的功能，所以不需要額外載入其他資源就可以運行，算是相當的便利，不過也很可惜的現在就只有桌上版的 Chrome 才支援，可惜了連 iPhone 和 iPad 都不能跑呀！( 不過我相信未來應該會支援的，畢竟瀏覽器的發展就是這樣咩，而且 iOS 平台的 Google App 也有內建語音辨識呀，但也不太一定，畢竟 iOS 上頭有個 Siri... )

Read More

自動選取某個區域的文字

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201508/select-text.html

摘要：
最近在工作上需要一個功能，就是點選一個按鈕可以全選某個區域內的文字，由於，找了一些解法大多都是針對文 input 的 text 或 textarea 所設計，，後來總算是在 Stack Overflow 發現了完美的解法，( 參考連結：http://goo.gl/uAHGuS ) 根據這個解法我就做出來了可以選取特定區域文字的範例，程式碼的長相如下： ( 範例：select-text-demo01.html )

Read More

FIGlet - ASCII Decorator

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201508/figlet-ascii-decorator.html

摘要：
早在十幾年前玩 BBS 的時候 ( 暴露年紀了 )，就已經開始玩許多利用文字與線條組成的圖形，當時甚也用 ASCII 色碼來表現顏色，真是令人不勝懷念，然而到了今時今日，因為 SublimeText 的緣故，竟然又接觸到了類似的技術，因此找了一些相關的資訊，用這篇文章做個紀錄的分享。 首先談到這種字體的由來，它其實有幾個固定名稱，幾種比較主要的稱呼分別是：「ASCII TEXT」、「ASCII TEXT Banner」、「ASCII Art」、「ASCII Decorator」和「FIGlet」，「FIGlet」這個詞應該是最標準的用法，因為這個詞可是在維基百科上頭有介紹的 ( https://en.wikipedia.org/wiki/FIGlet )，而「FIGlet」源自於 Frank、Ian 和 Glen 的信，應該就是他們當初在寫信的時候加上去的一些字體藝術 ( 參考：http://www.figlet.org/faq.html )

Read More

用 Gulp 展開新的 blog 編輯旅程

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201508/edit-blog-by-gulp.html

摘要：
oxxostudio 開張一年多以來，我都是用 Fire.app 在撰寫我的 blog，撰寫的方式不外乎就是利用樣板語法，達成每一頁都會有固定的 layout，然後還可以根據不同頁面套用不同的 CSS 與 Javascript，雖然當初用幾百塊錢買的 Fire.app 還滿方便的，但坦白說它的速度真是慢到有點受不了，或許是背後要用到 Java 的緣故 ( 且在 Java 7 和 Java 8 之間還造成不少問題 )，加上工作上同事都是 node.js 的高手，所以就毅然決然的告別 Fire.app，投入了 Gulp 的懷抱。 雖然用說的很簡單，但一個 blog 要完全轉換為用另外一種編輯模式，實在也沒那麼容易，雖然當初我都使用 markdown 來做編輯與手動轉換，但若要將其全自動，就是一個大挑戰了，因為當初在寫的時候有時候偷懶，有時候隔了幾天或幾週才寫，造成了格式上些許的疏漏和差異，而這些差異又得一篇篇文章查找才明白，也導致我的轉換過程整整耗費了兩個月才完成 ( 也是因為最近太忙了 )。

Read More

HTML5 控制裝置陀螺儀 ( 三軸 )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201506/html5-device-orientation.html

摘要：
自從幾年前入手智慧型手機之後，對於行動裝置上特有的陀螺儀 ( 三軸 ) 偵測與感應器就滿感興趣的，而相關的應用除了在一些典型的 APP 裏頭很常見到之外 ( 指南針、水平儀、星空定位...等 )，在遊戲裡頭更是屢見不鮮 ( 賽車、跑酷、飛行、滾球...等 )，但撇除 APP 不談，過去在網頁裡頭要使用陀螺儀的三軸感測，幾乎是不可能，應該是說沒這個必要，因為在智慧行動裝置尚未普及的年代，誰會搬台電腦轉來轉去呢？ 不過在行動裝置發達的現在，手機或平板的瀏覽器效能也跟了上來，加上 iOS 與 Android 兩大陣營對於瀏覽器可以控制硬體的權限逐漸鬆手，慢慢的當年 HTML5 裏頭所制定出來，和控制裝置硬體相關的 API 也逐漸可以派上用場。

Read More

玩轉 CSS 3D - 正八面體與正十二面體

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201506/css-3d-platonic-solid-2.html

摘要：
上一篇 介紹了正四面體與正六面體，接著我們要用同樣的方法，來製作正八面體與正十二面體，這兩個正多面體雖然組合的面比較多，不過因為具備了對稱性，所以只需要製作出一半的結構，另外一半再用反轉的方式接在一起即可。

Read More

玩轉 CSS 3D - 正四面體與正六面體

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201506/css-3d-platonic-solid-1.html

摘要：
繼 上一篇 我們理解了 CSS 3D 的箇中原理之後，廢話就不用多說，直接來畫正多面體吧！只要正多面體可以畫出來，基本上在 CSS 3D 的領域裡，大概就沒甚麼難得倒我們了。 首先看一下 維基百科，對於正多面體的介紹：「多面體，或稱柏拉圖立體， 指各面都是全等的正多邊形且每一個頂點所接的面數都是一樣的凸多面體。」簡單來說，就是非常對稱的立方體，而且每一個面都是由正多邊形組成，因此在這一篇，將會畫出正四面體、正六面體。 開始之前，如果有不會用 CSS 畫正多邊形的，請先參考我之前寫過的：單一 div 的正多邊形變換 ( 純 CSS )

Read More

玩轉 CSS 3D - 原理篇

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201506/css-3d.html

摘要：
這篇 CSS 3D 的文章，其實醞釀已久，從 CSS 3D 出來的時候就已經在關注，只是要寫 CSS 3D 真的很費工，裏頭太多東西要講，加上最近在做 Webduino 可以改變世界的事業 ( Webduino 超讚呀！ )，所以就一直擱著了，趁著端午連假，一口氣把它搞定吧！ 雖然 CSS 3D 並非真的 3D，CSS 3D 坦白說就是純粹利用計算的方法，藉由瀏覽器的高效能，在 2D 的空間繪製一個 3D 的圖形，就像我們拿張紙，用鉛筆在上頭畫個正立方體之類的，也因為是藉用了瀏覽器來運算，自然而然非常地耗效能，往往只要有過多的形狀轉換為 3D 呈現，就會發現電腦的風扇開始狂轉，這也是使用 CSS 3D 必須要注意的地方，畢竟 CSS 原本就不是拿來做 3D 應用的技術，可以畫 3D，只是可以加強 CSS 呈現的美感和能力，但用在精細的 3D 動畫或轉場效果，還是交給專業的 3D 繪圖軟體來進行。

Read More

oxxo.studio 一周年生日快樂

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201505/oxxostudio.html

摘要：
今天是 oxxo.studio 開台一年的日子，雖然說部落格上的文章不是從五月一號開始，但第一個版本是在五月一號上線的，當初其實也用這個部落格作為我自己的生日禮物 ( 我也是五月一號出生ㄎㄎ )。 oxxo.studio 一直以來都是我自己練習與筆記紀錄的空間，由於我自己的專長是視覺與網頁前端 ( 簡稱視覺前端 )，所以內容都比較著墨在網頁前端技術與一些視覺設計上，很感謝 facebook 社團朋友們與大大們的支持和捧場，可惜原本要挑戰每個月都有寫文章，結果四月在瘋狂的忙碌 Webduino 這個產品的開發與宣傳，導致四月份竟然沒有文章呀！( 原本以為有一篇，結果是在三月底寫的... )

Read More

運用 clip-path 的純 CSS 形狀變換

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/css-clip-path.html

摘要：
在 單一 div 的正多邊形變換 ( 純 CSS ) 這篇所提到繪製正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一 div 做更多形狀的變換，這種方法就是 CSS3 的「clip-path」，這個「clip-path 」看起來有點眼熟，因為它原本就存在於 SVG 裡頭 ( 參考：SVG 研究之路 (9) - Clipping and Masking )，利用遮罩 ( 剪裁 ) 的方法，連接座標繪製遮罩區域，就可以做出許多不同的形狀，讓底色或底圖顯現，隨著瀏覽器對於 CSS3 的支援度大幅提升，自然而然的就可以用它來做些與眾不同的變化。 最先看到這個屬性的應用，是從這個網站看到的：http://species-in-pieces.com/ ，不得不說這個網站做得實在太神了，一開始看到還真以為是用 SVG 做的，沒想到竟然是用 CSS 刻出來的... 真是太驚人啦！

Read More

單一 div 的正多邊形變換 ( 純 CSS )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/css-regular-polygon-transform.html

摘要：
上一篇 我們介紹了如何利用 before 和 after 偽元素來做 Material Design 風格的按鈕，裏頭關鍵的技術就在於活用邊框寬度和 div 本體寬高，因此這篇再加碼一個效果，就是純粹利用 CSS，讓「單一個」div，從正三角形變換為正八邊形 ( 單一 div 最多只能做到正八邊形 )，最後再搭配動畫的效果，變成正多邊形的變換動畫，也由於正多邊形需要用到不少的三角函數計算，為了方便起見，這裡將正多邊形的邊統一都設為 100px。 如果對於偽元素的應用有興趣的，也可以參考我之前的一些文章的啦！

Read More

純 CSS Material Design 風格按鈕

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/css-material-design-icon.html

摘要：
其實 Material Design 的扁平化、以及著重動畫強調的設計風格早在去年七八月的時候就開始大流行 ( 2014 年的 Google I/O 大會 )，在台灣高雄的志誠大大也不遑多讓的翻譯了相關設計文件 ( 參考 Google Material Design 正體中文版 )，然而當初一看到，其實就很想要嘗試做做看 Material Design 的 icon 按鈕，這類型的按鈕往往只利用幾何色塊的變化，就能抓住使用者的眼光，並且從幾何形狀中明白按鈕的含意，這也是 Material Design 非常強調的設計理念和精髓。

Read More

純 CSS 繪製圓餅圖

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/css-pie-chart.html

摘要：
當初我玩 SVG 的初衷，一部分就是因為當時的瀏覽器無法支援 CSS3 的動畫效果，當年為了一個圓餅圖 ( pie chart )，做不出來簡直快抓狂啦，但是近年來瀏覽器的效能大幅躍進，基本上使用純粹的 CSS 也可以做到圓餅圖的效果 ( 甚至是動畫 )，所以就用一篇文章來記錄一下純 CSS 繪製圓餅圖的過程吧！ 利用 CSS 做圓餅圖不如 SVG 來的直覺，畢竟在 CSS 裡頭要做成圓形，只能利用border-radius的方法進行，因此純粹的 CSS 圓餅圖，勢必得用一個以上的 div 來組合產生，那麼，啾竟需要多少個 div 才有辦法做出一個漂亮的圓餅圖呢？目前我的做法「只需要用一個 div 搭配自身兩個偽元素」即可，換句話說，就是用 div 本身作為遮罩，內容的兩個偽元素互相旋轉搭配，就可以做出逼真的圓餅圖。 看完上面的文字，我相信一定還是搞不太懂，所以先來看一下步驟拆解圖，兩個偽元素拆解出來，就是兩個一模一樣的半圓形，利用半圓形的旋轉，就可以做出從 180 度開始往上算的扇形。

Read More

改變 HTML5 range 樣式的兩種方法

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/html5-input-range-style.html

摘要：
今天來探討一下 HTML5 的 range 這個新的 input 類型，不過重點不是在 range 要如何使用，而是在如何去改變 range 的樣式，做出一個漂漂亮亮的滑動桿。 過去我們要製作美美的滑動桿 ( range slider )，不外乎就是用個 span 或 div ，搭配判斷滑鼠座標 ( pageX、pageY ) 與點擊事件來製作，就算是 HTML5 具有了 range 的 input 類型，預設的樣式只能滿足基本的需求，對於有一些要求視覺設計的網站來說，根本就毫無用武之地，只好自己手動自幹一個 range slider 來用了。 雖然這篇會介紹兩種修改 range 樣式的方法，但由於 HTML5 與 CSS3 在各個瀏覽器之間仍然沒有完全統一 ( 雖然去年十月好像就說標準制定完成了 )，所以要改變 range 的樣式，仍然必須使用到各家瀏覽器自己的特有寫法來調整，因此下列的範例，主要以 Chrome 為主，也會介紹 Firefox 的用法，至於 IE，能吃嗎？XD

Read More

Gulp 學習 6 - 架設 Markdown 轉 HTML 環境

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-6-markdown-to-html.html

摘要：
要談到 Markdown 轉 HTML，其實有一大堆的 Markdown 編輯器都做得到，我個人最愛用的不外乎就是 Markdown Pad ( 只有 windows )、Mou ( Mac ) 和 lightPaper ( Mac )，然而不管是怎樣的編輯器，基本上都會具備將 markdown 轉為 HTML 的功能，所以一直以來我都不覺得在編輯器撰寫之後在轉檔有什麼不方便的，我的 blog 文章也一直都是用 markdown 寫的，不過自從用 gitbook 寫書之後，赫然發現 gitbook 的 markdown 自動轉換 html 功能真是太優了，用自己慣用的編輯器，存檔之後，Gitbook 就自動將 markdown 轉換為 HTML，而且還套上 layout 和樣式，真是太讚啦！ 於是，當我發現 Gulp 也有 markdown 轉換的套件之後，就決定可以自己來做一個轉換的環境，如此一來就不用受限於各個編輯器的樣式，也不用受限於 gitbook 只能轉電子書的樣貌，甚至可以搭配之前幾篇介紹過的壓縮打包、html extend...等，做出一個純粹用 markdown 編寫網頁的環境。

Read More

SublimeText - Seti_UI theme

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/sublimetext-seti-theme.html

摘要：
今天來介紹一個非常漂亮的 SublimeText theme：Seti_UI，這大概也是最近身邊的人幾乎每個人都用的樣式，我也是因為看到別人用才下載來用的，沒想到一用之後驚為天人，一定要分享給大家。

Read More

Gulp 學習 5 - 建立 HTML 模板

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-5-html-extend.html

摘要：
這個部落格經營了快一年，都是利用 fire.app 替我建置「純靜態」的 blog，換句話說，其實我只是撰寫內容，然後藉由 fire.app 幫我把內容和 layout 合併在一起，如果有興趣的人可以直接購買 fire.app 下來使用即可。不過這一篇並不是要介紹 fire.app，而是要利用 gulp，建立 HTML 的模板，同樣也是將 layout 和 content 分開，然後在預覽與上線的時候再合併。 這裡我們要用到的是 gulp-html-extend 這個套件 ( 參考 gulp-html-extend )，和之前介紹過的 gulp-html-replace 類似，gulp-html-extend 會把某些特定註解內的內容置換為我們想要的內容，但與 gulp-html-replace 不同的地方，在於 gulp-html-replace 要置換的內容寫在 gulpfile.js 裏頭，而 gulp-html-extend 則是將外部的 HTML 內容嵌入註解的區域。

Read More

Low-Poly Art

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/low-poly-art.html

摘要：
Low-Poly 這是個之前很紅的向量繪圖風格，不過其實 Low-Poly 存在已久，是由 3D 電腦繪圖發展而來，Low-Poly 是一個利用較少的多邊形，來構成一個 3D 的模型，由於減少了多邊形的數目，相對在做運算也會較為迅速，但缺點就是外觀會呈現一片一片的非擬真狀態。

Read More

Gulp 學習 4 - 建立 SCSS/SASS 編輯環境

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-4-scss-sass.html

摘要：
隨著時代的演進，這一兩年來我都已經是用 SCSS 在編寫 CSS，不過 SCSS/SASS 是建構在 Ruby 的環境之下，通常我們要使用，則必須先安裝 Ruby 以及 compass，或也可以購買安裝 Fire.app 代勞，那麼要如何才能用 gulp ，來建立一個自動執行轉換 SCSS 的環境呢？

Read More

Gulp 學習 3 - 打包壓縮 HTML

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-3-compress-html.html

摘要：
上一篇我們看完了打包與壓縮 CSS 和 JS，為什麼打包壓縮 HTML 不要一起講呢？是因為打包壓縮 HTML 還會用到額外的套件和方法，避免混淆，所以就分成兩篇來紀錄。 壓縮 HTML 與 CSS 和 JS 不同的地方，在於 CSS 和 JS 利用合併之後再混淆或壓縮，而 HTML 除了壓縮，更多了去置換內容的方式，例如我們有一個網頁，裡頭載入了三個 CSS 與三個 JS，壓縮之後就會變成只有一個 min.css 和一個 min.js，如此一來原本要載入六個檔案，瞬間就變成了只需要載入兩個檔案而已，也由於由六個 request 降為兩個 request，整個網頁的流暢度也會提升。( 就像傳送一千個小檔案，速度遠不如把一千個小檔案壓縮成一個大檔案，直接傳送大檔案還來得快 )

Read More

Gulp 學習 2 - 打包壓縮 CSS 與 JS

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-2-compress-js-css.html

摘要：
通常我們在寫網頁的時候，都會引入許多的 JS 和 CSS，而每引入一個也就會產生一個 request，當引入的越來越多，在效能和時間的等待上也就相對付出的越來越多，雖然在對於現在的網路速度和瀏覽器效能而言，看似問題都不大，但是對於一個流量超大的網站來說，一個使用者多了一個 request，在效能的處理上就相對重要許多，因此，在做網頁的時候，往往至少會分成兩個階段，一個階段是「開發時期」的版本，一個階段是「發佈上線」的版本，最主要就是會把「開發」和「上線」分開，如此一來才不會一時疏忽把還沒開發好的版本給對外公開了。

Read More

Gulp 學習筆記 1 - 安裝與執行

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-install-webserver.html

摘要：
在二月的時候，我花了不少時間在學習 Gulp 這個任務自動化管理工具，最主要受到了 Gitbook 的啟發，還有洧杰與志誠的推薦，讓我毅然決然地投入了 Gulp 的世界，過去因為工作的需求，接觸過一點點的 Grunt，Gulp 和 Grunt 的初衷相同，都是要把過去需要人工處理的步驟給自動化，如此一來就可以省下不少寶貴的時間，不過我的 Gulp 仍不熟稔，因此從這篇開始的接下來幾篇，都是我學習 Gulp 的歷程，如果有寫錯或是不明白的地方，也請大家多多給予指教。

Read More

用 GitBook 來寫本書吧！

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201502/gitbook.html

摘要：
自從 2014 年底的台北市市長選舉，柯 P 用了 GitBook 發表了「政策白皮書」之後，GitBook 這個以 GitHub 為基底的電子書瞬間爆紅，也因為政策白皮書瞬間流量爆炸，讓 GitBook 這個外國團隊還發公開信給柯 P 呀！( 連結參考 ) 然而 GitBook 這個服務也不是這時候才開始，根據他們官方說法，2014 年結束時在上頭已經有 3300 本電子書，而我也在 2014 上架了一本公司產品的教學手冊 ( 截至今日瀏覽人次快五千 )，目前也在籌備要上架自己的教學手冊。 因為 GitBook 是基於 GitHub 的方式運作，所以最基本發佈的方式與 Git 沒有太大的差異，而 GitBook 又是由 Node.js 開發而成，所以若要使用本機環境進行編寫書籍，就必須要安裝 Node.js，同時也要使用 Markdown 的語法來編輯，簡單來說，如果要用自己的編輯器 ( sublimeText、筆記本...等 ) 來編輯，就是安裝 Node.js 以及了解基本的 Git 與 Markdown。

Read More

有趣的 CSS 彈跳動畫

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201502/css-bounce.html

摘要：
這是只用了一個 div 來做的小動畫，純粹利用 CSS3 的 animation 來完成，就像是一個正方形在地上彈跳，碰到地面的時候尖角還會壓縮變圓，陰影的部分也會隨著正方形升高而縮小，至於到底該怎麼完成呢？讓我們繼續看下去。 由於只使用了一個 div，要同時達到正方形旋轉與陰影縮放的效果，這裡必須使用兩個偽元素 ( before 與 after ) 來完成，嚴格來說，雖然只有一個 div，但是卻是把這個 div 當作外框，讓偽元素 before 作為旋轉的正方形，讓偽元素 after 作為陰影，如果對於偽元素不太了解的，可以參考我之前寫的這篇：電子時鐘效果 ( CSS 偽元素的應用 )

Read More

CSS 垂直置中的七個方法

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html

摘要：
之前我有寫過一篇文章：「CSS 垂直置中的三個方法」，這篇將延續該篇文章，繼續介紹另外四種垂直置中的方法，總共七種 CSS 垂直置中的方法分別是：設定行高、添加偽元素、calc 動態計算、使用表格或假裝表格、transform、絕對定位、使用 Flexbox。

Read More

深入解析 CSS Flexbox

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/css-flexbox.html

摘要：
Flexbox 是一個 CSS3 的盒子模型 ( box model )，顧名思義它就是一個靈活的盒子 ( Flexible Box )，為什麼最近這個屬性才紅起來呢？最主要也是因為 CSS3 的規範終於普及 ( 或 IE 終於敗亡 )，加上行動裝置的發展促成了響應式布局興起，自適應長寬彈性相當大的 Flexbox 就趁勢而起了。

Read More

點選自動複製 ( ZeroClipboard )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/zeroclipboard.html

摘要：
自從用了 Github 開始，一直都覺得它裏頭複製網址的方法做得很好，只需要點一個按鈕就可以複製 ( 也有可能因為文字欄位太短才用這種方式 )，仔細看了一下它怎麼寫的，發現上面用 div 疊了一層 flash 的 swf ，百般不思其解的狀態下找了一些資料，發現原來不能用純 javascript 的方法來做是因為瀏覽器的安全性限制，不能夠單純用前端存取剪貼簿的資料，所以才會用 flash 作為介接。

Read More

SVG D3.js - transition 基本篇

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/svg-d3-14-transition-1.html

摘要：
在 CSS 裡面有非常好用的 transition 屬性，同樣的在 d3.js 裡頭也有，而且比 CSS 的 transition 更加強大，除了會自動去計算補間動畫 ( 這個詞在 flash 裡頭很常聽到 )，更可以自己設定自己的補間效果 ( tween )，自己去設定相關的插值 ( interpolate )，許多 d3.js 圖表的動態效果，都是藉由這個 transition 來完成的！這篇將先會先介紹基本的 transition 的用法，後續會用其他篇幅來說明比較進階的應用。

Read More

CSS 搞怪的 text-decoration

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/css-text-decoration.html

摘要：
自己從出社會工作開始，CSS 一定會出現在每個大大小小不同的專案裏頭，真可以說是吃飯的工具無誤，但今天在改一個專案的時候卻遇到了一個莫名其妙的屬性：text-decoration，這個屬性，其實就只是用來把一段文字加上上橫線、刪除線或底線的屬性罷了，通常會用在移除超連結的底線、或一些特殊強調的效果裏頭，但是這麼容易的屬性，為什麼會莫名其妙呢？就讓我們繼續看下去~

Read More

SVG D3.js - CSV 數據處理

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/svg-d3-13-csv.html

摘要：
在數據的類型裡，CSV 是一種相當普及且方便的數據文件格式，從我們每個人手邊的 excel 就可以輕鬆地將數據轉換成 CSV 的數據格式，而對於 d3.js 而言，除了可以很輕鬆的處理 JSON 數據之外，也可以很便利的處理 CSV 的數據，搭配前幾篇所介紹的數據處理方法，就可以做出多樣的變化。

Read More

SVG D3.js - 數字格式 ( Formatting )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/svg-d3-12-formatting.html

摘要：
在 SVG D3.js - 時間格式 ( Time Formatting ) 這篇文章裡看完了時間的格式，接著就要來看看 d3.js 對於數字格式是如何處理的，因為 d3.js 主要就是針對數據去進行視覺化，所以大幅簡化了過去我們往往要寫很多判斷式來讓數字格式化的方法，只需要運用簡單的 API，就能夠輕鬆地讓數據格式化。其實講到數據的格式化，讓我想到一個強迫症藝術家 Ursus Wehrli 的一系列作品 ( Tidying Up Art )，從一堆雜亂無章的數據當中把這些數據分門別類並且格式化，意境上非常的雷同呀喔哈！( 所以這篇文章的圖片就用這系列藝術作品來表現吧！ )

Read More

認識 300 dpi

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/know-300-dpi.html

摘要：
2014 年底我又做了一些印刷品，雖然距離上次做印刷品已經過了兩三年，但印刷的基本常識只要了解，就一輩子不會忘，但不管做幾次印刷，總是會聽到「300 dpi」這個專有名詞，不論是往來的信件或電話，印刷廠總是會要求要給 300 dpi 的圖，傳遞訊息的人也三不五時講個 300 dpi 來凸顯一下自己的專業，彷彿做印刷，不談「300 dpi」就渾身不對勁。

Read More

Mac Dock 實作

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/mac-dock.html

摘要：
2015 年的第一篇文章，寫的是我自己在 2012 年的舊作！？隨著這幾年自己技術的提升，總算是運用了一些 HTML5 的技術，來讓當年做的這組 Mac Docker 效果更加完善，這裡將這個效果的製作方式分享給大家，歡迎和期待各路高手和大大能給予一些建議指教。( 完成範例：mac-dock-demo.html ) Mac Dock 的效果其實不難做，說穿了只用了一點點 CSS3 的 transition 與 transform ，HTML5 的 data-attribute，以及 jQuery 的 animate 而已，真正難的地方在於計算各個 icon 的大小和位置，當初光是想這個演算法就花了整整三天，最後出來只要五行就搞定了，可以參考下圖這個計算草稿：

Read More