VueJS
上回提要：開始時我使用 NuxtJs 時感受到一時方便，自動完成 hotreload 及 router 設定，但是相對來說也造成了之後靈活性不足的問題，所以最終 256pages 還是全面改用原裝的 VueJs 來作 framework 。 基本框架 * Home - 播片及 Banner * About - 自己介紹及網頁介紹 * Project - 我的作品集 * Contact - 聯絡方法 原型使用官方提供的 Webpack template，我之前的教學中也有提及不再重覆。 個別組件 * Background - 轉頁背景也會轉 * Project - 直滾橫移 * Contact - 收集訪客留言 待完成項目 * Home - SVG mask 影片，
VueJS
有時候不同 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
上回架設了基本的 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
不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。 開發環境 為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具， 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟 Atom 相比有過之而無不及，而且最大的好處是原生功能比 Atom 的外掛功能穩定，所以我由 Atom 轉用了 VSC。 下載 Windows/MacOS/Linus 的版本後，先安裝一些推介使用的 Extensions。 順序解說一下 * Beautify - 用來快速整理頁面
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 。 具體做法如下： 1. 先找一隻心儀的中文Fonts 2. 偵測網站中 Heading1 用的字元 3. 在 Fonts file 中抽取有使用的字元 4. 把己抽取的字型壓縮及轉換成不同 Web fonts format 5. 在 html
Web Fonts
在網頁中做用中文字體一直都是中文網頁設計師最煩惱的問題，現在網上有不少解決方案： Google Fonts Early Access 其中Google fonts提供完全免費的服務，不過只有正體中文的思源體而且還是測試中，大概因為容量不少，速度沒有保證也不穩定。 Adobe Typekit Type kit是Adobe的字庫，如果使用Adobe CC的話其實可以免費使用。不過也不是每個人也會用Adobe CC，而且速度也不樂觀，幾乎拖垮整個網站的速度。 Justfont Justfont是台灣的字庫，其中有不少原創的正體中文字型可供選擇，金萱體是他們網上集資開發而成的。中文字的選擇比較多，速度還可以，不過是要收限額的月費就是。 以上三個我也用過，Google免費雖好，但只有思源體及慢，Typykit也有思源體及少量其他中文字體，但選擇也不多，如果有用Adobe CC的話就跟免費一樣，但是速度也不夠快，有時候甚至比頁面還慢，Justfont中文字體數量比較多，宋體黑體甚至手寫體也有，當中也有原創字體，對字體比較有要求的可以選擇這個。 不過速度上，我希望可以更好，
SEO
SEO - Seach Engine Optimize，雖說是 Seach Engine，但大家還是把注意力落在 Google 中的排名。現在市面上很多公司聲稱可以為客戶提升 SEO 排名，是很難做到的事情嗎？ 其實沒想像中困難，是一般開發人員也可以做到的程度，現在就先由淺入深，從比較基本的 Page title說起吧！ 在 Google Search 搜尋出來的結果，藍色的標題就是 Page Title 了。
Let's Encrypt
Let's Encrypt由2018年1月開始就會提供免費的wildcard証書了。
Android
由Android 8.0開始，提供一種新的Icon格式可供設計師發揮創意，就是Adaptive Icons。
Ghost
有一段時間沒寫新的Note，Ghost已經來到1.0版本。今次更新時發現了有新的安裝方式 - Ghost CLI，喜歡嘗新的我馬上就來試試Ghost 1.0有什麼新功能。 Ghost CLI 現在官方推薦使用Ghost CLI作為安裝方式，使用 npm 安裝即可。舊版本用戶也建議使用Ghost CLI安裝全新的Ghost。 $ npm install g ghost-cli@latest 然後可以開一個新資料夾，簡單使用 ghost install $ mkdir /root/ghost $ cd /root/ghost $ ghost install 然後會問你一些問題來設定你的Ghost ? Enter your blog URL: ? Enter your MySQL hostname: ? Enter your MySQL username: ? Enter
NuxtJS
更新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 -- run start e.g.你的程式叫AppName，起動script叫start * --name AppName是用來命名你的App * -- run start是用來啟動npm run start $ pm2 list ┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬────────────┬───
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 nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px
256pages
由於NYS網站結構比較複雜，所以決定先重建我的個人作品集，這個開發日誌就移到https://blog.256pages.com/ 好了。 https://256pages.com 就讓給我的個人主頁用，前面加上www太麻煩，加上我希望每一個subdomain都做成一個個人網站，就這樣沒有subdomain就好了。 順道組織一下架構： * Home * About - 介紹一下自己 * Portfolio - 作品集 * Contact - 聯絡我的方法 作品集結構也會比較簡單為主，以卡片式顯示 * Title * Description * Year * Image 大概先這樣，完成後再review一下
Nginx
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/www/256pages.com/ -d 256pages.com * certonly 是申請新Cert * webroot 是最得方法，還可用standalone但不好用，都建議用webroot * -w /
NodeJS
由於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 at least 1000ms 解決方法 由於找不到怎麼辦，只好跟他warning所指示加上參數 $ forever start --minUptime 1000 --spinSleepTime 1000 -c "npm run dev" ./ 馬上就成功了! 更新 後來發現PM2更新後也可以使用hotreload，
CSP
防範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://*.googleapis.com https://www.google-analytics.com https://*.gstatic.com; 不過我需要Google Analytics，因為Google Analytics需要多個source，所以我了defau