本系列文並非自己心得記錄，而是讀 System Design Primer 的筆記，有蠻大部分節錄自該文章以及其補充連結。

話說這兩個詞彙（Latency 和 Throughput）常常會被搞混，有時候可以交換使用，不過自己本來不是讀資訊相關背景，加上本身寫前端，看到這兩個字真的是生字，一點實務上的聯想都想不到，如果你也不懂的話，沒關係，下文會寫筆記來解釋…。

定義

Latency 延遲

閱讀我吧！

本系列文並非自己實務心得記錄，而是讀 System Design Primer 的筆記，有蠻大部分節錄自該文章以及其補充連結。

工程師常拿 Scalability 來討論，最後也常以「但是它不能擴」作為雙方的結論。這表示系統確實經常被限縮。

怎樣的服務算是擁有「可擴展性 Scalability」

比如說，為了提高所提供服務的可靠性，需要納入冗餘（Redundancy）的設計理念，降低系統執行對單一伺服器的依賴程度，卻不會因而犧牲效能。

閱讀我吧！

本文內容涵蓋

• Web 應用程式生命週期
• 處理 HTML 以產生網頁
• JS 程式碼的執行順序
• 與事件互動
• 事件迴圈

Web 應用程式生命週期

Web 應用程式真正的生命起始於第四步驟：收到伺服器回傳的頁面時。

閱讀我吧！

RegExp in JavaScript

之前對正規表達式一直不太熟悉，也沒仔細去研究正則規則寫法是什麼種類，所以踩到支援性的雷。大多數正規式會支援正規表達式的原因是，它是一個對於文字操作非常強大的工具，本來要寫數十行複雜邏輯的判斷式，只要一行就能達成。

ES2018 新增的功能

正則表達式在 1999 年在 ECMAScript 標準第三版成為 JavaScript 的一部份，而在 ES2018 標準第九版時，新增了以下的功能，大幅改善對文字處理的能力。這邊文章要說明的是關於 assertions，大部分程式碼範例參考自此篇文章。

閱讀我吧！

ssh 進機器

常需要 ssh 進機器裡，會使用下列格式的語法：

ssh -i ~/.ssh/[your-keyfile] [username]@[private_ip]

如果服務越來越多，我們需要 ssh 進去的機器也變多了，當然我們不可能每次都去找到 IP 再來複製貼上，這樣不僅工作速度慢， content switch 太頻繁會讓人心情不太好。因為超新手的關係，神同事可憐可憐我，貼了凍仁大大的文章讓我學習設定，很容易就能使用 😆，趕緊做筆記下來，一起加速！

閱讀我吧！

記錄著關於初學 REACT 時，官方文件提及的主要概念，基本上都是文件上的內容，希望用自己是初心者的方式整理關於 JSX、生命週期、事件處理器、官方文件的觀念，可以更記得住。

1. Hello World

• 應用程式基本組成：元素與組件。

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

往下瞭解其他概念之前，可以先閱讀「重新介紹 JavaScipt」，如果好幾年沒碰 JavaScript 的話，看一下「三個心法」。

閱讀我吧！

最近到了新的工作環境，公司配了一台新電腦，要從零來設置自己習慣的開發環境，所以除了安裝開發上很順手的工具以外，也額外想推薦大家來安裝能夠增加效率或是提升開發速度的軟體。這篇文章不會各別介紹每個工具詳細設定的流程，我選擇紀錄每個推薦的工具能夠為我解決什麼問題，等於是為了以後買新電腦又要重設開發環境做準備（？）

1. HomeBrew

HomeBrew 官網

安裝各式套件的管道。

安裝指令

閱讀我吧！

只要花 60 秒瞭解「無障礙網站」概念

Your Website + Accessibility = BFF —— Jenn Lukas

前言

「網站」是一種資訊傳播的方式，我們製作網站最普遍的目的是為了將「資訊」傳播出去。比如說現今大多數公司會建置自己的官方網站，去傳達公司理念、服務項目、聯絡方式…等等，這些都在資訊的涵蓋範圍。

閱讀我吧！

查看使用者搜尋什麼關鍵字

想提升 SEO ，所以之前就有把我的部落格網址提交到 Google Search Console，在後台能了解：

1. 成效報表：網頁搜尋總點擊次數
2. 使用者點擊錯誤的網址數量
3. 使用者會搜尋什麼關鍵字而到你的部落格
4. 使用者是從哪些國家搜尋
5. 行動裝置可用性…等等

其中，蠻喜歡這幾個功能

• 「索引 > 涵蓋範圍 > 排除』：能去看哪些是被檢索後但失效的。
• 「連結」：查看外部連結，哪些最熱門，來你的部落格的人又是點擊了哪些外部連結。

閱讀我吧！

好，我習慣用的編輯器是 VSCODE，雖然有安裝一些 Snippets 擴充套件，讓我敲程式碼時比較不會因為打錯浪費時間 debug。但，真正開發時，創建結構時常常都要建立新檔案去切分 component，打幾乎同樣的程式碼有點煩，所以～找了一下該怎麼來設定自己要的程式碼片段。希望有幫助到你：）

一、設定 Setting.json

1-1. command + ,
1-2. 右上角 {}，打開自定檔
1-3. 新增以下語法：

// 啟用自訂程式碼樣版
"editor.tabCompletion": "on",

// 如果你跟我一樣，有裝其他的 Snippet，可以將編輯器的權重提高
"editor.snippetSuggestions": "top",

閱讀我吧！