Edmond Yip

Edmond Yip

37 posts published

在 VueJS 中建立 Three.js 場景
Threejs

在 VueJS 中建立 Three.js 場景

上回說明如何載入 Three.js，接下來就會建立一個簡單的場景，Three.js 建立 3D 場景的概念跟 3D 軟件中繪圖的概念相當接近，只是換成用程式來建立，如果有使用 3D 繪圖軟件的經驗會更好了解。在 Vue 中建立 Three.js 場景就先要了建 Vue 的流程。 我當是使用的 Vue 版本是 2.x，Three.js 版本是 R97。Vue 的設定不多說，大家必需先學會 Vue。 首先在 mounted() 中載入 this.init()，在init() 中會預先定義一些共用的數據，以便在不同的 methods 中共用。 簡單說明一下我會建立以下 methods 有什麼作用
在 VueJS 中使用 WebGL
webGL

在 VueJS 中使用 WebGL

身為一個設計師，除了 SVG動態背景 及 中文 Web Fonts 外也沒有什麼視覺上的效果，令我的作品在設計上有所缺失！ 以前都是用 Flash 來開發一些超炫目的網站，但現在都轉成用 Javascript 了，當然要踏入 WebGL 的領域，開發炫眼的 3D 網站了！ Three.js應該是最多人用也是最易用的 WebGL Javascript Library，在 Three.js 的官網有不少 examples 也有中文的文件，基本上依官網來做就可以完成不少效果。 不過 Three.js 對 ES6 及 Nodejs 的支援不是太理想，說明文件也不太足夠，引致當中要依靠很多額外的 plugins / library 才能完成在 Vue 中的工作。所以我寫這篇文章就是把我測試不同方法後，最為理想的解決方法。
Headless CMS - strapi
Headless CMS

Headless CMS - strapi

最近在外國正盛行的無頭 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 年學習回顧
2018

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
在 Docker 上架設 Wordpress
Wordpress

在 Docker 上架設 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
Ghost

Ghost 2.0

阿鬼，這麼快就出 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 快速建立 Ghost
Docker Compose

使用 Docker Compose 快速建立 Ghost

在上次安裝 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.
Vue 終於都超越 React 了
VueJS

Vue 終於都超越 React 了

一直以來都被質疑為什麼不學學 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，
vue-cli 3.0 試玩
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 可以一口氣安裝最基本的 vue 組合，vue + vue-router + vuex + sass + babel + pwa + eslint，很適合新手建站用 default 就是只安裝 vue + babel + eslint Manually select features 可以手動選擇所需
CoreOS 及 Docker
Docker

CoreOS 及 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 Image

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有什麼用？ 其實大多
改用 GitHub Gist 貼原始碼
Gist

改用 GitHub Gist 貼原始碼

由於 Ghost 本身的 code hightlight 十分難看，所以改用了 Prism 來處理，雖然可以自訂，但效果也不太理想，而且每次更新 Theme 也要重新 hardcode 加上，十分麻煩！ 所以我在一些用 Medium 的朋友推薦下改用 GitHub 的 Gist 服務，只要有 GitHub 帳號就可以馬上開始使用，最好的地方是我可以在 Medium 中重用，因為 Medium 也是沒有 highlight markup 的。 使用方法也極簡單，在 Gist 右上角接一下 New gist。 Gist description 中可以簡單寫一下你這段 code 是什麼，中間貼上你的 code，再按下面的
改變顏色編碼 Hex to RGB
Javscript

改變顏色編碼 Hex to RGB

由於我想使用半透明背景但資料庫早就輸入了 Hex 顏色碼，要輸出成 RGBA 顏色碼才能使用只有背景半透明的 CSS ，所以就用 Javascript 試寫一下。 在 methods 把入來的顏色分別抽出 1+2, 3+4, 5+6 三組轉成顏色 code 再把 result 組合成 RGB 顏色，最後加上透明度 這樣就可以把輸入的顏色變成半透明啦～ 其實 stackoverflow 也有相關答案，也有更高精度的操作 e.g. 把簡寫版的 Hex 顏色碼也納入考慮之列，也有使用其他 function 去完成的方法以供參考。
2017 年學習回顧
Node學習筆記

2017 年學習回顧

雖然我由 2017 年開始想自學寫程式，但是由於家中比較忙及入門時受到的阻力問題，不能有效率地進行學習，但由 2017 年底起，學習進度飛快加速，256pages 也總算完成初版，雖然 UI 上還是有點不理想，但功能上是做到了。 首先整理一下學習了的東西： Front-end VueJS - 基本的都學了 Vuex - 最開始沒打算學，但還是學了 NuxtJS - SSR 比原生好太多了，推出 1.0 後再度使用 Axios - API 認証 middleware 好幫手 Async await - 同步工作不可少 VueJS基本上的設定及使用都熟習了，還有一些有用的小工具，有空再整理介紹 API Express - RESTAPI 的基本
SVG動態背景
VueJS

SVG動態背景

動態 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.
256pages 開發日誌 (1)
VueJS

256pages 開發日誌 (1)

上回提要：開始時我使用 NuxtJs 時感受到一時方便，自動完成 hotreload 及 router 設定，但是相對來說也造成了之後靈活性不足的問題，所以最終 256pages 還是全面改用原裝的 VueJs 來作 framework 。 基本框架 Home - 播片及 Banner About - 自己介紹及網頁介紹 Project - 我的作品集 Contact - 聯絡方法 原型使用官方提供的 Webpack template，我之前的教學中也有提及不再重覆。 個別組件 Background - 轉頁背景也會轉 Project - 直滾橫移 Contact - 收集訪客留言 待完成項目 Home - SVG mask 影片，
VueJS Components 共用數據
VueJS

VueJS Components 共用數據

有時候不同 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 中設定共用的 Sass 變數
VueJS

VueJS 中設定共用的 Sass 變數

上回架設了基本的 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 2 + Webpack 開發設定
VueJS

新手 VueJS 2 + Webpack 開發設定

不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。 開發環境 為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具， 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟 Atom 相比有過之而無不及，而且最大的好處是原生功能比 Atom 的外掛功能穩定，所以我由 Atom 轉用了 VSC。 下載 Windows/MacOS/Linus 的版本後，先安裝一些推介使用的 Extensions。 順序解說一下 Beautify - 用來快速整理頁面
自建中文 Web Fonts
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 。 具體做法如下： 先找一隻心儀的中文Fonts 偵測網站中 Heading1 用的字元 在 Fonts file 中抽取有使用的字元 把己抽取的字型壓縮及轉換成不同 Web fonts format 在 html 讀取 web fonts 格式 這樣做最大的好處就是字體檔極細，
中文Web Fonts的選擇2017
Web Fonts

中文Web Fonts的選擇2017

在網頁中做用中文字體一直都是中文網頁設計師最煩惱的問題，現在網上有不少解決方案： Google Fonts Early Access 其中Google fonts提供完全免費的服務，不過只有正體中文的思源體而且還是測試中，大概因為容量不少，速度沒有保證也不穩定。 Adobe Typekit Type kit是Adobe的字庫，如果使用Adobe CC的話其實可以免費使用。不過也不是每個人也會用Adobe CC，而且速度也不樂觀，幾乎拖垮整個網站的速度。 Justfont Justfont是台灣的字庫，其中有不少原創的正體中文字型可供選擇，金萱體是他們網上集資開發而成的。中文字的選擇比較多，速度還可以，不過是要收限額的月費就是。 以上三個我也用過，Google免費雖好，但只有思源體及慢，Typykit也有思源體及少量其他中文字體，但選擇也不多，如果有用Adobe CC的話就跟免費一樣，但是速度也不夠快，有時候甚至比頁面還慢，Justfont中文字體數量比較多，宋體黑體甚至手寫體也有，當中也有原創字體，對字體比較有要求的可以選擇這個。 不過速度上，我希望可以更好，字體上的選擇也希望更自由，所以我打算自己host一些免費自由的字體。但容量大這個問題是必須解決的，不過web font不是也可以快速下載嗎？ 其他中文Web Fonts字庫
SEO 新手實戰 (1) - Page Title優化
SEO

SEO 新手實戰 (1) - Page Title優化

SEO - Seach Engine Optimize，雖說是 Seach Engine，但大家還是把注意力落在 Google 中的排名。現在市面上很多公司聲稱可以為客戶提升 SEO 排名，是很難做到的事情嗎？ 其實沒想像中困難，是一般開發人員也可以做到的程度，現在就先由淺入深，從比較基本的 Page title說起吧！ 在 Google Search 搜尋出來的結果，藍色的標題就是 Page Title 了。 <head> <title>Page Title</title> </head> 優化Page Title 如果你見到一個網頁是 untitled title 的話，不單說
Ghost 1.0 版本更新
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/ghost $ cd /root/ghost $ ghost install 然後會問你一些問題來設定你的Ghost ? Enter your blog URL: ? Enter your MySQL hostname: ? Enter your MySQL username: ? Enter