Threejs 在 VueJS 中建立 Three.js 場景 上回說明如何載入 Three.js，接下來就會建立一個簡單的場景，Three.js 建立 3D 場景的概念跟 3D 軟件中繪圖的概念相當接近，只是換成用程式來建立，如果有使用 3D 繪圖軟件的經驗會更好了解。在 Vue 中建立 Three.js 場景就先要了建 Vue 的流程。 我當是使用的 Vue 版本是 2.x，Three.js
webGL 在 VueJS 中使用 WebGL 身為一個設計師，除了 SVG動態背景 及 中文 Web Fonts 外也沒有什麼視覺上的效果，令我的作品在設計上有所缺失！ 以前都是用 Flash 來開發一些超炫目的網站，但現在都轉成用 Javascript 了，當然要踏入 WebGL 的領域，開發炫眼的 3D 網站了！ Three.js應該是最多人用也是最易用的 WebGL Javascript Library，在 Three.js 的官網有不少
Headless CMS Headless CMS - strapi 最近在外國正盛行的無頭 CMS (Headless CMS)，到底有什麼好處呢？跟我們常用的 CMS 又有什麼分別呢？ 什麼是 Headless CMS?傳統 CMS 好像著名的 Wordpress，Drupal，Ghost 等等都包括Front-end UI，也有 Theme 的部份，形成前後台合一的情況。而 Headless 的無頭就是不包括 Front-end，做一個純粹的 Backend CMS，
2018 2018 年學習回顧 今年學習的項目沒上年廣泛，但相對比較深入 Front-end VueJS - 深入地了解 data 的處理及 lifecycle 的應用，嘗試改寫 Plugins 去配 Components VueCli - 新版本 3.0 出來後試用很不錯，但原生的 SSR 還是太難處理 NuxtJS - 原本 VueCli 3.0 出來後想停用
Wordpress 在 Docker 上架設 Wordpress 什麼剛剛還在用阿鬼 2.0 的我要寫篇 Wordpress 教學？因為客戶指定要用 Wordpress 的關係也沒辦法，但是 Docker 化了服務的伺服器中，我也希望用 Docker 可以建立完整的開發環境。 Wordpress 的 Image 選擇先說明一下我設定中的架構再行選擇吧 跟之前一樣使用 CoreOS 為底層系統，在 Docker 中使用 WordPress 的官方 Image ，MariaDB 取代官方教學中的
Ghost Ghost 2.0 阿鬼，這麼快就出 2.0 沒問題嗎？其實 2.0 跟 1.25 左右的版本分別不大，但也確實地感到 Ghost 2.0 在進化。 進化為什麼了？在我看來： Ghost 己經進化成 Open Source 版的 Medium 了 相信 Medium 優雅美觀的界面令 Ghost
Docker Compose 使用 Docker Compose 快速建立 Ghost 在上次安裝 CoreOS 後，首先搬家就是 Blog 了！ 先到 Ghost 的 Docker Hub 看看，看似相當地簡單。 Docker Compose 雖然可以直接使用 docker run 指令來完成，但我採用了可重用的方式，docker compose 是 Docker 官方的應用，可以把 docker run 的指令都記錄在 YAML
VueJS Vue 終於都超越 React 了 一直以來都被質疑為什麼不學學 React 而選擇了 Vue。不過 6月5日 Vue 在 Github 上的星星數終於超過了 React，雖然不排除 Vue 的星數內有很大量中國用家的水份，但是 Vue 確實是受到世界用家的關注，雖然晚了點出文來說，但不足一個月己經超前了 1000 多星了。 Vue Roadmap 原作者 Evan You 也在努力開發及改進 Vue。不只是單單小修補及更新，現在
VueJS vue-cli 3.0 試玩 最新發現 vue-cli 進行大更新並開了個別專頁。3.0 新增的功能比想像中多，而且跟 2.x 有很大分別，更大程度訂製了 Vue 的開發流程。 首先必須重新安裝 $ npm install -g @vue/cli 安裝功能 vue-cli 最初及最基本的功能也得到強化，比以前更簡單快捷 使用 vue create project-name來建立新 project。 選擇 first
Docker CoreOS 及 Docker 由於 docker 太多東西要學 先記錄一下進度 CoreOS 安裝 docker Docker 基本指令 Image 選擇 - Apline Docker-compose Docker 建立 Nginx + Let's Encrypt + Proxy Server Docker 設定 Ghost 什麼是 CoreOS? 就是一個 Container 專用的 Linux。
Docker Image Docker Image 用那個版本？ 首先要到 Docker Hub 挑選一下 images。 Docker 的原理我就不說了，很多文章也有介紹。Docker Image 就是安裝在伺服器上的 software/service，在 docker hub 會見到很多版本的 image，好像 Node 有 jessie/apline/onbuild/slim 等字眼就是在說明是什麼版本，當然最簡單可以用 docker pull node
Gist 改用 GitHub Gist 貼原始碼 由於 Ghost 本身的 code hightlight 十分難看，所以改用了 Prism 來處理，雖然可以自訂，但效果也不太理想，而且每次更新 Theme 也要重新 hardcode 加上，十分麻煩！ 所以我在一些用 Medium 的朋友推薦下改用 GitHub 的 Gist 服務，只要有 GitHub 帳號就可以馬上開始使用，最好的地方是我可以在 Medium 中重用，
Javscript 改變顏色編碼 Hex to RGB 由於我想使用半透明背景但資料庫早就輸入了 Hex 顏色碼，要輸出成 RGBA 顏色碼才能使用只有背景半透明的 CSS ，所以就用 Javascript 試寫一下。 在 methods 把入來的顏色分別抽出 1+2, 3+4, 5+6 三組轉成顏色 code 再把 result 組合成 RGB 顏色，最後加上透明度 這樣就可以把輸入的顏色變成半透明啦～ 其實 stackoverflow
Node學習筆記 2017 年學習回顧 雖然我由 2017 年開始想自學寫程式，但是由於家中比較忙及入門時受到的阻力問題，不能有效率地進行學習，但由 2017 年底起，學習進度飛快加速，256pages 也總算完成初版，雖然 UI 上還是有點不理想，但功能上是做到了。 首先整理一下學習了的東西： Front-end VueJS - 基本的都學了 Vuex - 最開始沒打算學，但還是學了 NuxtJS - SSR 比原生好太多了，推出 1.
VueJS SVG動態背景 動態 SVG 背景 開始時第一個遇到的問題就是 Background。我構思中是使用 SVG 做背景。每次轉頁是 SVG 動態轉成另一個形狀。 我曾經試用 Snap.svg 及 SVG.js 來做這效果，但由於都比較困難，所以最後選用一個比較舊的 Library SVG Morpheus。先比較一下各 Library 的分別。 Snap.svg 很多人推薦的 SVG
VueJS 256pages 開發日誌 (1) 上回提要：開始時我使用 NuxtJs 時感受到一時方便，自動完成 hotreload 及 router 設定，但是相對來說也造成了之後靈活性不足的問題，所以最終 256pages 還是全面改用原裝的 VueJs 來作 framework 。 基本框架 Home - 播片及 Banner About - 自己介紹及網頁介紹 Project - 我的作品集 Contact - 聯絡方法
VueJS VueJS Components 共用數據 有時候不同 components 之間有少量數據希望共用，但又不想用到 Vuex 這麼麻煩的話，有比較方便的做法可以使用。就是使用 VueJS 的 Global Mixins 來儲放 data 了。 Global Mixins 的用法 簡單來說就是把平時放在 export default 中的 data 搬到 Vue Minins 中。 例如我有一些 data export
VueJS VueJS 中設定共用的 Sass 變數 上回架設了基本的 VueJS 開發環境，接下來要進行一些設定。因為在這個架構下，可以很方便的預處理SASS，基本上不用另外設定，但是之前在 NuxtJS 中已經有 SASS 中設定變數不能共用的問題。不過現在 vue-loader 已經有官方解決方法，就是使用 sass-resources-loader 載入global的變數。 用法很簡單，使用 'npm' 安裝 $ npm install sass-resources-loader --save-dev 在 build/utils.js
VueJS 新手 VueJS 2 + Webpack 開發設定 不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。 開發環境 為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具， 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟
Web Fonts 自建中文 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
Web Fonts 中文Web Fonts的選擇2017 在網頁中做用中文字體一直都是中文網頁設計師最煩惱的問題，現在網上有不少解決方案： Google Fonts Early Access 其中Google fonts提供完全免費的服務，不過只有正體中文的思源體而且還是測試中，大概因為容量不少，速度沒有保證也不穩定。 Adobe Typekit Type kit是Adobe的字庫，如果使用Adobe CC的話其實可以免費使用。不過也不是每個人也會用Adobe CC，而且速度也不樂觀，幾乎拖垮整個網站的速度。 Justfont Justfont是台灣的字庫，其中有不少原創的正體中文字型可供選擇，金萱體是他們網上集資開發而成的。中文字的選擇比較多，速度還可以，不過是要收限額的月費就是。 以上三個我也用過，Google免費雖好，
SEO SEO 新手實戰 (1) - Page Title優化 SEO - Seach Engine Optimize，雖說是 Seach Engine，但大家還是把注意力落在 Google 中的排名。現在市面上很多公司聲稱可以為客戶提升 SEO 排名，是很難做到的事情嗎？ 其實沒想像中困難，是一般開發人員也可以做到的程度，現在就先由淺入深，從比較基本的 Page title說起吧！ 在 Google Search 搜尋出來的結果，藍色的標題就是 Page Title 了。 <
Ghost Ghost 1.0 版本更新 有一段時間沒寫新的Note，Ghost已經來到1.0版本。今次更新時發現了有新的安裝方式 - Ghost CLI，喜歡嘗新的我馬上就來試試Ghost 1.0有什麼新功能。 Ghost CLI 現在官方推薦使用Ghost CLI作為安裝方式，使用 npm 安裝即可。舊版本用戶也建議使用Ghost CLI安裝全新的Ghost。 $ npm install g [email protected] 然後可以開一個新資料夾，簡單使用 ghost install $ mkdir /root/
