Latest

在 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
See all