Docker Image
首先要到 Docker Hub 挑選一下 images。 Docker 的原理我就不說了，很多文章也有介紹。Docker Image 就是安裝在伺服器上的 software/service，在 docker hub 會見到很多版本的 image，好像 Node 有 jessie/apline/onbuild/slim 等字眼就是在說明是什麼版本，當然最簡單可以用 docker pull node 去拉 image 下來，這樣多半會安裝最新版。 多看幾個都發現多數 image 也有叫 apline 的版本，Apline 到底是什麼？ 其實 Apline 是一個只有 5MB 大小的 Linux Apline Linux有什麼用？ 其實大多
Gist
由於 Ghost 本身的 code hightlight 十分難看，所以改用了 Prism 來處理，雖然可以自訂，但效果也不太理想，而且每次更新 Theme 也要重新 hardcode 加上，十分麻煩！ 所以我在一些用 Medium 的朋友推薦下改用 GitHub 的 Gist 服務，只要有 GitHub 帳號就可以馬上開始使用，最好的地方是我可以在 Medium 中重用，因為 Medium 也是沒有 highlight markup 的。 使用方法也極簡單，在 Gist 右上角接一下 New gist。 Gist description 中可以簡單寫一下你這段 code 是什麼，中間貼上你的 code，再按下面的
Javscript
由於我想使用半透明背景但資料庫早就輸入了 Hex 顏色碼，要輸出成 RGBA 顏色碼才能使用只有背景半透明的 CSS ，所以就用 Javascript 試寫一下。 在 methods 把入來的顏色分別抽出 1+2, 3+4, 5+6 三組轉成顏色 code 再把 result 組合成 RGB 顏色，最後加上透明度 這樣就可以把輸入的顏色變成半透明啦～ 其實 stackoverflow 也有相關答案，也有更高精度的操作 e.g. 把簡寫版的 Hex 顏色碼也納入考慮之列，也有使用其他 function 去完成的方法以供參考。
Node學習筆記
雖然我由 2017 年開始想自學寫程式，但是由於家中比較忙及入門時受到的阻力問題，不能有效率地進行學習，但由 2017 年底起，學習進度飛快加速，256pages 也總算完成初版，雖然 UI 上還是有點不理想，但功能上是做到了。 首先整理一下學習了的東西： Front-end * VueJS - 基本的都學了 * Vuex - 最開始沒打算學，但還是學了 * NuxtJS - SSR 比原生好太多了，推出 1.0 後再度使用 * Axios - API 認証 middleware 好幫手 * Async await - 同步工作不可少 VueJS基本上的設定及使用都熟習了，還有一些有用的小工具，有空再整理介紹 API * Express - RESTAPI 的基本
VueJS
動態 SVG 背景 開始時第一個遇到的問題就是 Background。我構思中是使用 SVG 做背景。每次轉頁是 SVG 動態轉成另一個形狀。 我曾經試用 Snap.svg 及 SVG.js 來做這效果，但由於都比較困難，所以最後選用一個比較舊的 Library SVG Morpheus。先比較一下各 Library 的分別。 Snap.svg 很多人推薦的 SVG animation library。但在做動畫時需要由指定一個 path 轉到另一個 path，不能由現在的 path 轉到另一個 path，雖然還是有方法在控制上不夠方便，暫且不採用。 SVG.js 聲稱速度很快的 SVG animation library。我看 SVG.
VueJS
上回提要：開始時我使用 NuxtJs 時感受到一時方便，自動完成 hotreload 及 router 設定，但是相對來說也造成了之後靈活性不足的問題，所以最終 256pages 還是全面改用原裝的 VueJs 來作 framework 。 基本框架 * Home - 播片及 Banner * About - 自己介紹及網頁介紹 * Project - 我的作品集 * Contact - 聯絡方法 原型使用官方提供的 Webpack template，我之前的教學中也有提及不再重覆。 個別組件 * Background - 轉頁背景也會轉 * Project - 直滾橫移 * Contact - 收集訪客留言 待完成項目 * Home - SVG mask 影片，
VueJS
有時候不同 components 之間有少量數據希望共用，但又不想用到 Vuex 這麼麻煩的話，有比較方便的做法可以使用。就是使用 VueJS 的 Global Mixins 來儲放 data 了。 Global Mixins 的用法 簡單來說就是把平時放在 export default 中的 data 搬到 Vue Minins 中。 例如我有一些 data export default { data { name: 'Hello' text: 'World' } } 如果是使用 main.js 作入口的話就在 new Vue 前加入 (一定要在 new Vue前) Vue.mixin({ data { name:
VueJS
上回架設了基本的 VueJS 開發環境，接下來要進行一些設定。因為在這個架構下，可以很方便的預處理SASS，基本上不用另外設定，但是之前在 NuxtJS 中已經有 SASS 中設定變數不能共用的問題。不過現在 vue-loader 已經有官方解決方法，就是使用 sass-resources-loader 載入global的變數。 用法很簡單，使用 'npm' 安裝 $ npm install sass-resources-loader --save-dev 在 build/utils.js 中設定 scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/style/_variables.scss') } } ) 這樣你就可以把變數都放進 _variables.scss
VueJS
不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。 開發環境 為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具， 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟 Atom 相比有過之而無不及，而且最大的好處是原生功能比 Atom 的外掛功能穩定，所以我由 Atom 轉用了 VSC。 下載 Windows/MacOS/Linus 的版本後，先安裝一些推介使用的 Extensions。 順序解說一下 * Beautify - 用來快速整理頁面
Web Fonts
Update * 18 Oct 2017 | v0.0.1 基本測試完成 * 18 Oct 2017 | v0.0.2 加上字數 * 19 Oct 2017 | v0.0.3 搜尋所有資料夾 由於現有網上的 web fonts 不能滿足我的需求，所以決定自己 Fonts 自己 host 。 具體做法如下： 1. 先找一隻心儀的中文Fonts 2. 偵測網站中 Heading1 用的字元 3. 在 Fonts file 中抽取有使用的字元 4. 把己抽取的字型壓縮及轉換成不同 Web fonts format 5. 在 html
Web Fonts
在網頁中做用中文字體一直都是中文網頁設計師最煩惱的問題，現在網上有不少解決方案： Google Fonts Early Access 其中Google fonts提供完全免費的服務，不過只有正體中文的思源體而且還是測試中，大概因為容量不少，速度沒有保證也不穩定。 Adobe Typekit Type kit是Adobe的字庫，如果使用Adobe CC的話其實可以免費使用。不過也不是每個人也會用Adobe CC，而且速度也不樂觀，幾乎拖垮整個網站的速度。 Justfont Justfont是台灣的字庫，其中有不少原創的正體中文字型可供選擇，金萱體是他們網上集資開發而成的。中文字的選擇比較多，速度還可以，不過是要收限額的月費就是。 以上三個我也用過，Google免費雖好，但只有思源體及慢，Typykit也有思源體及少量其他中文字體，但選擇也不多，如果有用Adobe CC的話就跟免費一樣，但是速度也不夠快，有時候甚至比頁面還慢，Justfont中文字體數量比較多，宋體黑體甚至手寫體也有，當中也有原創字體，對字體比較有要求的可以選擇這個。 不過速度上，我希望可以更好，
SEO
SEO - Seach Engine Optimize，雖說是 Seach Engine，但大家還是把注意力落在 Google 中的排名。現在市面上很多公司聲稱可以為客戶提升 SEO 排名，是很難做到的事情嗎？ 其實沒想像中困難，是一般開發人員也可以做到的程度，現在就先由淺入深，從比較基本的 Page title說起吧！ 在 Google Search 搜尋出來的結果，藍色的標題就是 Page Title 了。
Let's Encrypt
Let's Encrypt由2018年1月開始就會提供免費的wildcard証書了。
Android
由Android 8.0開始，提供一種新的Icon格式可供設計師發揮創意，就是Adaptive Icons。
Ghost
有一段時間沒寫新的Note，Ghost已經來到1.0版本。今次更新時發現了有新的安裝方式 - Ghost CLI，喜歡嘗新的我馬上就來試試Ghost 1.0有什麼新功能。 Ghost CLI 現在官方推薦使用Ghost CLI作為安裝方式，使用 npm 安裝即可。舊版本用戶也建議使用Ghost CLI安裝全新的Ghost。 $ npm install g ghost-cli@latest 然後可以開一個新資料夾，簡單使用 ghost install $ mkdir /root/ghost $ cd /root/ghost $ ghost install 然後會問你一些問題來設定你的Ghost ? Enter your blog URL: ? Enter your MySQL hostname: ? Enter your MySQL username: ? Enter
NuxtJS
更新PM2 2.4.4後發現NuxtJS也可以正常Hot Reload，加上forever多次發生loading 100%的問題，所以全面改用PM2作NuxtJS的管理。 $ pm2 update $ pm2 -v 2.4.4 更新到最新版本 使用PM2管理NuxtJS 想好好管理NuxtJS使用PM2還是最方便，因為即使出現問題，restart 15次後說會暫停你的應用程式，以免對伺服器有過大的負擔。 由於要使用npm script來啟動NuxtJS，普通pm2 start的方式起動不了 $ pm2 start npm --name AppName -- run start e.g.你的程式叫AppName，起動script叫start * --name AppName是用來命名你的App * -- run start是用來啟動npm run start $ pm2 list ┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬────────────┬───