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/