VueJS

Vue 終於都超越 React 了

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

  • Edmond Yip
    Edmond Yip
3 min read
Javscript

改變顏色編碼 Hex to RGB

由於我想使用半透明背景但資料庫早就輸入了 Hex 顏色碼,要輸出成 RGBA 顏色碼才能使用只有背景半透明的 CSS ,所以就用 Javascript 試寫一下。 在 methods 把入來的顏色分別抽出 1+2, 3+4, 5+6 三組轉成顏色 code 再把 result 組合成 RGB 顏色,最後加上透明度 這樣就可以把輸入的顏色變成半透明啦~ 其實 stackoverflow 也有相關答案,也有更高精度的操作 e.

  • Edmond Yip
    Edmond Yip
1 min read
Node學習筆記

2017 年學習回顧

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

  • Edmond Yip
    Edmond Yip
2 min read
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(

  • Edmond Yip
    Edmond Yip
1 min read
VueJS

新手 VueJS 2 + Webpack 開發設定

不借助 NuxtJS 下開始動手架起一個 VueJS 的架構,我們會使用 Webpack 建立起有 hot-reload 的開發環境。 開發環境 為了有效地在本地開發,最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具, 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發,速度跟 Atom 相比有過之而無不及,而且最大的好處是原生功能比

  • Edmond Yip
    Edmond Yip
4 min read
Web Fonts

中文Web Fonts的選擇2017

在網頁中做用中文字體一直都是中文網頁設計師最煩惱的問題,現在網上有不少解決方案: Google Fonts Early Access 其中Google fonts提供完全免費的服務,不過只有正體中文的思源體而且還是測試中,大概因為容量不少,速度沒有保證也不穩定。 Adobe Typekit Type kit是Adobe的字庫,如果使用Adobe CC的話其實可以免費使用。不過也不是每個人也會用Adobe CC,而且速度也不樂觀,幾乎拖垮整個網站的速度。 Justfont Justfont是台灣的字庫,其中有不少原創的正體中文字型可供選擇,金萱體是他們網上集資開發而成的。中文字的選擇比較多,速度還可以,不過是要收限額的月費就是。 以上三個我也用過,Google免費雖好,但只有思源體及慢,Typykit也有思源體及少量其他中文字體,但選擇也不多,

  • Edmond Yip
    Edmond Yip
2 min read
SEO

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

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

  • Edmond Yip
    Edmond Yip
3 min read
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/

  • Edmond Yip
    Edmond Yip
5 min read
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 --

  • Edmond Yip
    Edmond Yip
1 min read
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

  • Edmond Yip
    Edmond Yip
3 min read
256pages

更改網址

由於NYS網站結構比較複雜,所以決定先重建我的個人作品集,這個開發日誌就移到https://blog.256pages.com 好了。 https://256pages.com 就讓給我的個人主頁用,前面加上www太麻煩,加上我希望每一個subdomain都做成一個個人網站,就這樣沒有subdomain就好了。 順道組織一下架構: Home About - 介紹一下自己 Portfolio - 作品集 Contact - 聯絡我的方法 作品集結構也會比較簡單為主,以卡片式顯示 Title Description Year Image 大概先這樣,完成後再review一下

  • Edmond Yip
    Edmond Yip
1 min read
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/

  • Edmond Yip
    Edmond Yip
3 min read
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:

  • Edmond Yip
    Edmond Yip
1 min read