Headless CMS
最近在外國正盛行的無頭 CMS (Headless CMS)，到底有什麼好處呢？跟我們常用的 CMS 又有什麼分別呢？ 什麼是 Headless CMS? 傳統 CMS 好像著名的 Wordpress，Drupal，Ghost 等等都包括Front-end UI，也有 Theme 的部份，形成前後台合一的情況。而 Headless 的無頭就是不包括 Front-end，做一個純粹的 Backend CMS，輸出 API 給 Front-end 去讀取資料，不用再找 CMS 專用的 Theme 了，因為前後己經分離，所有 Front-end 只需看 API 就可以。 Headless CMS 的好處 因為後台變成獨立運作，
2018
今年學習的項目沒上年廣泛，但相對比較深入 Front-end * VueJS - 深入地了解 data 的處理及 lifecycle 的應用，嘗試改寫 Plugins 去配 Components * VueCli - 新版本 3.0 出來後試用很不錯，但原生的 SSR 還是太難處理 * NuxtJS - 原本 VueCli 3.0 出來後想停用 NuxtJS，但新版本出來後除了 SSR 外還有很多好用的功能，希望 VueCli 3.0 可以支援 NuxtJS 就好了 Backend * Strapi - 一個整合式的 API CMS，雖然還是測試階段，希望以後可以更加完善 Serverside
Wordpress
什麼剛剛還在用阿鬼 2.0 的我要寫篇 Wordpress 教學？因為客戶指定要用 Wordpress 的關係也沒辦法，但是 Docker 化了服務的伺服器中，我也希望用 Docker 可以建立完整的開發環境。 Wordpress 的 Image 選擇 先說明一下我設定中的架構再行選擇吧 跟之前一樣使用 CoreOS 為底層系統，在 Docker 中使用 WordPress 的官方 Image ，MariaDB 取代官方教學中的 MySQL，然後用 Nginx 作為 Proxy Server 連到 Internet。 因為不想使用官方預載的 Apache 作為 http server 比較麻煩，但習慣了使用 Nginx 還是努力一下，但結果要使用官方 Image
Ghost
阿鬼，這麼快就出 2.0 沒問題嗎？其實 2.0 跟 1.25 左右的版本分別不大，但也確實地感到 Ghost 2.0 在進化。 進化為什麼了？在我看來： Ghost 己經進化成 Open Source 版的 Medium 了 相信 Medium 優雅美觀的界面令 Ghost 的開發者學習了不少。然後不論 Frontend 跟 Editor 也變到跟 Medium 一樣。相信可以吸引不少喜歡用 Medium 的作者用 Ghost 來做個人 Blog。 在 1.25 時 Ghost Editor
Docker Compose
在上次安裝 CoreOS 後，首先搬家就是 Blog 了！ 先到 Ghost 的 Docker Hub 看看，看似相當地簡單。 Docker Compose 雖然可以直接使用 docker run 指令來完成，但我採用了可重用的方式，docker compose 是 Docker 官方的應用，可以把 docker run 的指令都記錄在 YAML 檔中，只要用 docker-compose up 指令就可以隨時運行內裡的一連串指令，不用每次都全部記住。 安裝 Docker Compose $ sudo curl -L https://github.com/docker/compose/releases/download/1.
VueJS
一直以來都被質疑為什麼不學學 React 而選擇了 Vue。不過 6月5日 Vue 在 Github 上的星星數終於超過了 React，雖然不排除 Vue 的星數內有很大量中國用家的水份，但是 Vue 確實是受到世界用家的關注，雖然晚了點出文來說，但不足一個月己經超前了 1000 多星了。 Vue Roadmap 原作者 Evan You 也在努力開發及改進 Vue。不只是單單小修補及更新，現在 Vue 來到 v2.5 己經有不少實質上的提升，Vue Cli 升到 v3.0 後甚至連 User Interface 都跑出來了。現在已確定的新功能開發如下： v2.6 * 改良 Error Handling，
VueJS
最新發現 vue-cli 進行大更新並開了個別專頁。3.0 新增的功能比想像中多，而且跟 2.x 有很大分別，更大程度訂製了 Vue 的開發流程。 首先必須重新安裝 $ npm install -g @vue/cli 安裝功能 vue-cli 最初及最基本的功能也得到強化，比以前更簡單快捷 使用 vue create project-name來建立新 project。 * 選擇 first 可以一口氣安裝最基本的 vue 組合，vue + vue-router + vuex + sass + babel + pwa + eslint，很適合新手建站用 * default 就是只安裝 vue + babel + eslint * Manually select features 可以手動選擇所需
Docker
由於 docker 太多東西要學 先記錄一下進度 * CoreOS 安裝 docker * Docker 基本指令 * Image 選擇 - Apline * Docker-compose * Docker 建立 Nginx + Let's Encrypt + Proxy Server * Docker 設定 Ghost 什麼是 CoreOS? 就是一個 Container 專用的 Linux。在 DigitalOcean 或 Linode 也可以安裝 CoreOS，我就用 Linode $5 hosting 來開設一個。CoreOS 原生就支援 docker 在，基本上也預計你什麼東西都會用 docker 安裝，所以 apt-get
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