I am a Designer, this is my design and development notes.

在 VueJS 中使用 WebGL
webGL

在 VueJS 中使用 WebGL

身為一個設計師,除了 SVG動態背景 及 中文 Web Fonts 外也沒有什麼視覺上的效果,令我的作品在設計上有所缺失! 以前都是用 Flash 來開發一些超炫目的網站,但現在都轉成用 Javascript 了,當然要踏入 WebGL 的領域,開發炫眼的 3D 網站了! Three.js應該是最多人用也是最易用的 WebGL Javascript Library,在 Three.js 的官網有不少

在 Docker 上架設 Wordpress
Wordpress

在 Docker 上架設 Wordpress

什麼剛剛還在用阿鬼 2.0 的我要寫篇 Wordpress 教學?因為客戶指定要用 Wordpress 的關係也沒辦法,但是 Docker 化了服務的伺服器中,我也希望用 Docker 可以建立完整的開發環境。 Wordpress 的 Image 選擇先說明一下我設定中的架構再行選擇吧 跟之前一樣使用 CoreOS 為底層系統,在 Docker 中使用 WordPress 的官方 Image ,MariaDB 取代官方教學中的

Vue 終於都超越 React 了
VueJS

Vue 終於都超越 React 了

一直以來都被質疑為什麼不學學 React 而選擇了 Vue。不過 6月5日 Vue 在 Github 上的星星數終於超過了 React,雖然不排除 Vue 的星數內有很大量中國用家的水份,但是 Vue 確實是受到世界用家的關注,雖然晚了點出文來說,但不足一個月己經超前了 1000 多星了。 Vue Roadmap 原作者 Evan You 也在努力開發及改進 Vue。不只是單單小修補及更新,現在

2017 年學習回顧
Node學習筆記

2017 年學習回顧

雖然我由 2017 年開始想自學寫程式,但是由於家中比較忙及入門時受到的阻力問題,不能有效率地進行學習,但由 2017 年底起,學習進度飛快加速,256pages 也總算完成初版,雖然 UI 上還是有點不理想,但功能上是做到了。 首先整理一下學習了的東西: Front-end VueJS - 基本的都學了 Vuex - 最開始沒打算學,但還是學了 NuxtJS - SSR 比原生好太多了,推出 1.

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

中文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免費雖好,

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

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

SEO - Seach Engine Optimize,雖說是 Seach Engine,但大家還是把注意力落在 Google 中的排名。現在市面上很多公司聲稱可以為客戶提升 SEO 排名,是很難做到的事情嗎? 其實沒想像中困難,是一般開發人員也可以做到的程度,現在就先由淺入深,從比較基本的 Page title說起吧! 在 Google Search 搜尋出來的結果,藍色的標題就是 Page 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/