系統設計入門:效能與可擴展性的差異

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

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

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

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

閱讀我吧!

本文內容涵蓋

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

Web 應用程式生命週期

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

閱讀我吧!

Can I Use 涵蓋率 68.88%

RegExp in JavaScript

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

ES2018 新增的功能

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

閱讀我吧!

Setting your ssh_config

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 秒瞭解「無障礙網站」概念

Yes

Your Website + Accessibility = BFF —— Jenn Lukas

前言

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

閱讀我吧!

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

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

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

其中,蠻喜歡這幾個功能

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

閱讀我吧!

Snippet Generator

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

一、設定 Setting.json

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

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

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

閱讀我吧!

An Accessible Web

現在因為要製作政府的專案,需要符合國家通訊傳播委員會的無障礙規範,google 通用設計的概念,意圖去了解無障礙設計與通用設計的差異。後來看到大愛電視台,唐峰正老師的分享「通用設計」,發現:其實我們做的每一件事情都能增添溫度 - 同理心。

大家都知道,一個好的網站需要包含很多要素。其中有一個很大的 topic,「Accessible Web / Accessibility」,卻經常淪為建構網站時,有時間才去優化的事情,是一個 option 而不是 main feature。


Accessibility

閱讀我吧!