VueJS Vue 終於都超越 React 了 一直以來都被質疑為什麼不學學 React 而選擇了 Vue。不過 6月5日 Vue 在 Github 上的星星數終於超過了 React，雖然不排除 Vue 的星數內有很大量中國用家的水份，但是 Vue 確實是受到世界用家的關注，雖然晚了點出文來說，但不足一個月己經超前了 1000 多星了。 Vue Roadmap 原作者 Evan You 也在努力開發及改進 Vue。不只是單單小修補及更新，現在 Vue 來到 v2.
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 組合，
Docker Docker 新手學習 1 由於 docker 太多東西要學 先記錄一下進度 CoreOS 安裝 docker Docker 基本指令 Image 選擇 - Apline Docker-compose Docker 建立 Nginx + Let's Encrypt + Proxy Server Docker 設定 Ghost 什麼是 CoreOS? 就是一個 Container 專用的 Linux。在 DigitalOcean 或
Docker Image 用那個版本？ 首先要到 Docker Hub 挑選一下 images。 Docker 的原理我就不說了，很多文章也有介紹。Docker Image 就是安裝在伺服器上的 software/service，在 docker hub 會見到很多版本的 image，好像 Node 有 jessie/apline/onbuild/slim 等字眼就是在說明是什麼版本，當然最簡單可以用 docker pull node 去拉 image 下來，
Gist 改用 GitHub Gist 貼原始碼 由於 Ghost 本身的 code hightlight 十分難看，所以改用了 Prism 來處理，雖然可以自訂，但效果也不太理想，而且每次更新 Theme 也要重新 hardcode 加上，十分麻煩！ 所以我在一些用 Medium 的朋友推薦下改用 GitHub 的 Gist 服務，只要有 GitHub 帳號就可以馬上開始使用，最好的地方是我可以在 Medium 中重用，因為 Medium 也是沒有
Javscript 改變顏色編碼 Hex to RGB 由於我想使用半透明背景但資料庫早就輸入了 Hex 顏色碼，要輸出成 RGBA 顏色碼才能使用只有背景半透明的 CSS ，所以就用 Javascript 試寫一下。 在 methods 把入來的顏色分別抽出 1+2, 3+4, 5+6 三組轉成顏色 code 再把 result 組合成 RGB 顏色，最後加上透明度 這樣就可以把輸入的顏色變成半透明啦～ 其實 stackoverflow 也有相關答案，也有更高精度的操作 e.
Node學習筆記 2017 年學習回顧 雖然我由 2017 年開始想自學寫程式，但是由於家中比較忙及入門時受到的阻力問題，不能有效率地進行學習，但由 2017 年底起，學習進度飛快加速，256pages 也總算完成初版，雖然 UI 上還是有點不理想，但功能上是做到了。 首先整理一下學習了的東西： Front-end VueJS - 基本的都學了 Vuex - 最開始沒打算學，但還是學了 NuxtJS - SSR 比原生好太多了，推出 1.0 後再度使用 Axios
VueJS 256pages 開發日誌 (2) 動態 SVG 背景 開始時第一個遇到的問題就是 Background。我構思中是使用 SVG 做背景。每次轉頁是 SVG 動態轉成另一個形狀。 我曾經試用 Snap.svg 及 SVG.js 來做這效果，但由於都比較困難，所以最後選用一個比較舊的 Library SVG Morpheus。先比較一下各 Library 的分別。 Snap.svg 很多人推薦的 SVG animation library。但在做動畫時需要由指定一個
VueJS 256pages 開發日誌 (1) 上回提要：開始時我使用 NuxtJs 時感受到一時方便，自動完成 hotreload 及 router 設定，但是相對來說也造成了之後靈活性不足的問題，所以最終 256pages 還是全面改用原裝的 VueJs 來作 framework 。 基本框架 Home - 播片及 Banner About - 自己介紹及網頁介紹 Project - 我的作品集 Contact - 聯絡方法 原型使用官方提供的 Webpack template，
VueJS VueJS Components 共用數據 有時候不同 components 之間有少量數據希望共用，但又不想用到 Vuex 這麼麻煩的話，有比較方便的做法可以使用。就是使用 VueJS 的 Global Mixins 來儲放 data 了。 Global Mixins 的用法 簡單來說就是把平時放在 export default 中的 data 搬到 Vue Minins 中。 例如我有一些 data export default { data { name:
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(
VueJS 新手 VueJS 2 + Webpack 開發設定 不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。 開發環境 為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具， 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟 Atom 相比有過之而無不及，而且最大的好處是原生功能比
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 偵測網站中
Web Fonts 中文Web Fonts的選擇2017 在網頁中做用中文字體一直都是中文網頁設計師最煩惱的問題，現在網上有不少解決方案： Google Fonts Early Access 其中Google fonts提供完全免費的服務，不過只有正體中文的思源體而且還是測試中，大概因為容量不少，速度沒有保證也不穩定。 Adobe Typekit Type kit是Adobe的字庫，如果使用Adobe CC的話其實可以免費使用。不過也不是每個人也會用Adobe CC，而且速度也不樂觀，幾乎拖垮整個網站的速度。 Justfont Justfont是台灣的字庫，其中有不少原創的正體中文字型可供選擇，金萱體是他們網上集資開發而成的。中文字的選擇比較多，速度還可以，不過是要收限額的月費就是。 以上三個我也用過，Google免費雖好，但只有思源體及慢，Typykit也有思源體及少量其他中文字體，但選擇也不多，
SEO SEO 新手實戰 (1) - Page Title優化 SEO - Seach Engine Optimize，雖說是 Seach Engine，但大家還是把注意力落在 Google 中的排名。現在市面上很多公司聲稱可以為客戶提升 SEO 排名，是很難做到的事情嗎？ 其實沒想像中困難，是一般開發人員也可以做到的程度，現在就先由淺入深，從比較基本的 Page title說起吧！ 在 Google Search 搜尋出來的結果，藍色的標題就是 Page Title 了。 <head> <
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/
NuxtJS 重用PM2作管理系統 更新PM2 2.4.4後發現NuxtJS也可以正常Hot Reload，加上forever多次發生loading 100%的問題，所以全面改用PM2作NuxtJS的管理。 $ pm2 update $ pm2 -v 2.4.4 更新到最新版本 使用PM2管理NuxtJS 想好好管理NuxtJS使用PM2還是最方便，因為即使出現問題，restart 15次後說會暫停你的應用程式，以免對伺服器有過大的負擔。 由於要使用npm script來啟動NuxtJS，普通pm2 start的方式起動不了 $ pm2 start npm --name AppName --
NuxtJS Sass in NuxtJS 以前對Sass/SCSS等需要預處理的CSS Style有一定抗拒，因為需要安裝一堆應用程式，每次更新都需要處理一次，但是現在在NuxtJS中有Vue Loader處理，不論那一種需要預處理的CSS都可以輕鬆搞定。 在多種預處理的CSS中我先是賞試了Sass，不用再加任何標點符號真的很棒！ Sass nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 原本是這樣的CSS
256pages 更改網址 由於NYS網站結構比較複雜，所以決定先重建我的個人作品集，這個開發日誌就移到https://blog.256pages.com 好了。 https://256pages.com 就讓給我的個人主頁用，前面加上www太麻煩，加上我希望每一個subdomain都做成一個個人網站，就這樣沒有subdomain就好了。 順道組織一下架構： Home About - 介紹一下自己 Portfolio - 作品集 Contact - 聯絡我的方法 作品集結構也會比較簡單為主，以卡片式顯示 Title Description Year Image 大概先這樣，完成後再review一下
Nginx Nginx中使用NodeJS時更新Letsencrypt SSL Letsencrypt 自從Google提倡每個網站需要使用SSL為最低要求後，我也少不免申請SSL服務，在尋找的過程中發現了Letsencrypt。他們是提供免費的SSL認証機構，比較起一般免費試用SSL的公司比較起來更可靠，單看他們的Major Sponsors中有Google Facebook等大公司支持，已經是信心保証。 安裝 網上提供有不少安裝方法，基本上都不太難，我就使用官方建議的Certbot來進行安裝 $ sudo apt-get install letsencrypt 簡單以apt-get進行安裝 申請SSL Cert 最重要的部份了，整個申請過程也是可以用指令進行，非常方便的。 e.g. 我要申請的是256pages.com為例 $ letsencrypt certonly --webroot -w /var/
NodeJS forever 出現 warning 由於pm2管理下NuxtJS的hotreload失效，所以請出了forever來管理，但是近來forever中要startapp的時候會出現這種警告 $ forever start -c "npm run dev" ./ $ warn: --minUptime not set. Defaulting to: 1000ms $ warn: --spinSleepTime not set. Your script will exit if it does not stay up for
CSP Content Security Policy中使用Google Analytics 防範XSS攻擊 CSP是由Google提出的安全性工具，主要是因為多年來網站很容易受到Cross-site Scripting XXS攻擊。 完全封鎖 首先是試一試最安全的設定，根據CSP Evaluator的設定如下 script-src 'strict-dynamic' 'nonce-rAnd0m123' 'unsafe-inline' http: https:; object-src 'none'; base-uri 'none'; report-uri https://csp.example.com; 這個設定下....幾乎什麼script也不可能運作！連本地的script也被封死了... default-src 'self' https://*.google.com https:
NuxtJS Webpack loaderUtils.parseQuery()問題 在執行nuxt build的時候常常出現以下警告 $ (node:495) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56 連網址也有就去看看https://github.com/webpack/loader-utils/issues/56 似乎是Webpack loader上remove了parseQuery問題引起了錯誤 要在webpack.
