Node學習筆記
雖然我由 2017 年開始想自學寫程式，但是由於家中比較忙及入門時受到的阻力問題，不能有效率地進行學習，但由 2017 年底起，學習進度飛快加速，256pages 也總算完成初版，雖然 UI 上還是有點不理想，但功能上是做到了。 首先整理一下學習了的東西： Front-end * VueJS - 基本的都學了 * Vuex - 最開始沒打算學，但還是學了 * NuxtJS - SSR 比原生好太多了，推出 1.0 後再度使用 * Axios - API 認証 middleware 好幫手 * Async await - 同步工作不可少 VueJS基本上的設定及使用都熟習了，還有一些有用的小工具，有空再整理介紹 API * Express - RESTAPI 的基本
VueJS
動態 SVG 背景 開始時第一個遇到的問題就是 Background。我構思中是使用 SVG 做背景。每次轉頁是 SVG 動態轉成另一個形狀。 我曾經試用 Snap.svg 及 SVG.js 來做這效果，但由於都比較困難，所以最後選用一個比較舊的 Library SVG Morpheus。先比較一下各 Library 的分別。 Snap.svg 很多人推薦的 SVG animation library。但在做動畫時需要由指定一個 path 轉到另一個 path，不能由現在的 path 轉到另一個 path，雖然還是有方法在控制上不夠方便，暫且不採用。 SVG.js 聲稱速度很快的 SVG animation library。我看 SVG.
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 /