Fran

最近我開始嘗試用 Vim 開發，然而該如何與一直以來使用的 VSCode 整合習慣，也就成了一大課題

就像是武術有不同的流派，有各家之長，修行在個人，不同的武術家又有不同的個人風格。同樣的工具，隨著每個人不同的使用習慣，也會延伸出不同的使用方式

以下會介紹我如何入門使用 VSCode Neovim，逐而摸索出自己的一套整合開發習慣。這些個人設定並沒有所謂的「標準答案」。

從今年年初便知道 Eleventy 這樣的一套 Static Site Generator，經過一番評估之後，最近終於趁著空閒的空檔，選擇 Eleventy 作為新的技術框架，並以 eleventy-high-performance-blog 作為基底，架置了新的部落格，和過去所使用的 Hexo 框架說掰掰。

註：本文最後更新於 2022/06/18
以下所使用的是 macOS Monterey 12.3 的 MacBook Air (M1, 2020)

最近剛拿到新的 MacBook Pro，早忘了幾年前安裝環境究竟處理過什麼細節，有些參考資料又比較過時，因此決定把這次程序和細節記錄下來，也方便日後直接將文章分享給其他公司新人，處理一些常見的通用環境設定！

在 GitHub 上已有遠端 Repository 時，也許會事後反悔、想修改 Repo 名稱

在這裡筆記一下這種情形下的標準做法，避免影響到既有存在於遠端上的專案

去年九月，我離開了人生的第一份工作。

趁著這幾個月好好休息充電、去考汽車駕照、寫些自己喜歡的 project、靜下來思考未來職涯規劃等等。
直到十二月多開始閒得有些發慌，才又打定主意回歸求職市場。

實際上這是我第一次如此認真準備面試，總體來說我很喜歡這種「費盡心思去爭取機會」的過程，也想寫下現在的自己在求職方面是如何思考。

當你使用 Chrome 瀏覽器時，是否曾留意過網址列出現的「不安全」？

尤其辛辛苦苦架好網站，甚至加上自訂域名，卻看到那幾個字，顯得格外刺眼——為什麼會出現所謂的不安全警示呢？

這是因為 Google 鼓勵網站加上 SSL 憑證，那些能以 HTTPS 加密通訊協定存取的網站，就會加上綠色鎖頭字樣！甚至還列入了搜尋演算法的指標中，影響 SEO 排名。

重點來了，所謂的 SSL 憑證到底是什麼？

這篇文章的出現，要從兩年前開始說起，那時候的我才剛開始摸 Hexo。
當時的我比起其他平台，像是 Wordpress / Medium / Logdown 等等諸如此類，更喜歡 markdown 寫作方式，所以興致沖沖地架了個部落格。

但是理想很豐滿，現實總是骨感——很快地，過了大約一年左右便很少更新，敵擋不過自己的惰性。

畢竟靜態網頁的佈署步驟太麻煩，必須滿足本地端有 Hexo 檔案的前提，我偏偏又喜歡用 HackMD 撰寫，一來一往之間步驟太過繁複。久而久之，這段時間我傾向於使用 HackMD 整理個人筆記，懶得發表技術文章到 blog 上。

直到我注意到 GitHub 推出 CI/CD 服務，能幫助我解決這個麻煩！趁這個機會我打算順便打理 Hexo 架構，把菜鳥時期我搭建的部落格重新打掉，在 2020 前夕超進化！

在資料驗證時，常常必須進行字串比對的工作，我們能藉由 正則表達式（Regular Expression） 來判斷是否字串具有符合的格式。

善用正則表達式能幫助我們用更加簡潔的程式碼去驗證字串，再利用 String 中的 match() 或 replace() 等方法對字串做更進一步的處理。

在開始學習今天的主題之前，我們要來先討論一下：為什麼要學框架（Framework）？
因為很潮正夯特流行嗎？因為業界好找工作嗎？又有什麼是只用 jQuery 辦不到的事情嗎？

簡單來說，jQuery 是以 DOM 元素來觸發功能，能幫助我們更簡單的實現網頁上的資料互動及事件處理方法，同時也簡化了許多 AJAX 的操作方法，是設計動畫效果的絕佳利器。

然而 框架（Framework） 包括你聽過的三神獸 Vue, Angular, React，都是以資料來驅動功能，適合用來撰寫一些以資料為主體的網頁以及 SPA，能幫助我們更加簡潔地去處理資料邏輯。

網站速度、內容品質，這些都是 SEO的排名因素，同時也跟用戶體驗息息相關。而 Google 在2015 年正式發佈其獨有的 AMP 框架，中文為 加速版行動網頁 。

AMP是 Google 獨有的網頁框架，用來使行動裝置網頁能快速載入。如果你有架設 AMP框架，促進使用者體驗優化，也許會讓該頁面的 rankng 提升 ，同時這個框架也能夠非常有效的提升用戶體驗，未來 AMP將有可能會越來越被重視、且也有可能在搜尋排名中佔有更強的影響力。

Google 官方網站上也一步步演示了要如何架設 AMP 網站，主要可分為三大部分

• AMP HTML
• AMP JS
• AMP Cache