第 125 期 - 有沒有 Bug 是像初戀一樣酸酸甜甜的

本週專欄

淺談 Monorepo 帶來的效益:以 Turborepo 為例

Hi 大家好我是 Andy,隨著資訊發展越來越進步,除了程式語言的框架越來越多以外,連專案的架構也越來越複雜了,從早期的 Multi-repo 到現代的 Monorepo,究竟 Monorepo 可以帶來哪些效益?本周專欄文章要利用 Turborepo 做為範例介紹給讀者。

前端開發

使用 JavaScript 的數字時的常見錯誤

這篇是胡立大大寫的文章,裡面提到了 JavaScript 在處理數字的資料型態時有些結果可能跟你想像的不太一樣,想要了解 JavaScript number type 的冷知識的讀者不妨可以看看這篇文章。

為什麼前端工程越來越愛使用 Monorepo 架構

Monorepo 真的是越來越多開發者在使用了,連本週的週刊都在講這個架構XD
想要了解一些 Monorepo 相關先輩知識的讀者不妨可以看看這篇文章。

We abandoned npm install, maybe you should too

隨著前端架構越來越複雜,對於 package manager 要做的事情也越來越多了,為了因應現在的 Monorepo 架構就有一個專門為了 Monorepo 架構而生的 package manager 名字為 rush,究竟 rush 可以做到哪些事情呢?有興趣的讀者不妨可以看看這篇文章。

Getting Started With Three.js

如果有想要學習 Three.js 然後做出各各種漂亮的 3D 場景,那從這篇文章入門會是不錯的選擇,文章裡面介紹了 Three.js 內的幾個重要的元素,包含 scene、3D geometry、Materials、Mesh、Loaders、Camera、Lighting 等等,每段介紹的時候都有再貼上用來實現的範例程式碼,有興趣的話也可以花時間看看唷!

CSS Interview Questions

作者整理了常見的 CSS 面試問題,像是 CSS 的 Box Model 是什麼等等。雖然看上去都很基本,但是金魚腦如我,過一段時間不複習,就很容易就忘記,大家也可以看看自己曾經學過的知識是否還記得喲!

Is Vite Better than Webpack?

Vite 從出現以來就一直以快速為它的特點,那相較於 Webpack 從一個 entry point 開始打包成 Bundle.js 的流程,Vite 究竟是如何改善我們的開發體驗呢?

DevOps

A better alternative for Docker Desktop?

我想不少公司應該有認真考慮過 Docker Desktop license 付費的問題,這篇分享作者在使用多個方案後決定使用 Rancher Desktop,選擇的理由不外乎社群活耀度、支援 docker 和 contained、支援 docker-cli 和 nerdctl、支援 Apple M1 以及支援 build-in local volume mounts,會特別強調 local volume mounts 是因為 Podman 不太支援這點。

作者介紹了兩種安裝 Rancher Desktop 的方法,一個是從 shell script 安裝,另外一種比較簡單許多,直接下載 .dmg 檔案。

Replace Docker Desktop with lima

這篇介紹另外一個取代 Docker Desktop 的選擇 Lima,作者也表示他嘗試了一下 Podman 發現 local volume mount 的問題(而且這個 issue 從 2020 就已經有了)。Lima 安裝的 script 看似很複雜但其實只是一些簡單的設定,例如:為了連線而改 hostname、設定 rootless container 以及必要的 healthcheck 等等。

附帶一提的是,不論是 Rancher Desktop 或 Lima 都有支援 docker-compose。

5 unusual Docker container use cases

介紹 5 種平常不會用到的 container 用法,不過老實說這 5 種我就蠻常用其中 3 種,讓我們來看看哪些你也中了吧:

  • 跑真正有 UI 的 container
    • 裡面舉例了相片管理軟體 digikam、瀏覽器或 Libre Office 等等都可以跑 container。
  • 跑 Linux 桌面版的 container
    • 跟上一個用法有點雷同,Linux 桌面是從網頁去看的,也剛好有 Youtuber 拍實際跑起來的影片
  • 把 container 當作指令
    • 個人蠻常用的,畢竟有的時候不會想要安裝太多在自己的電腦裡。不過作者在這裡描述的是想要更高客製化的執行環境,他的另外一篇文章裡就有寫為了執行 kubectl 所安裝的一系列環境。
  • 把 container 當作開發環境
    • 也算是很常用的場景,畢竟 Apple M1 還是處處受限制,也剛好有 Gitpod 這個 SaaS 選擇。
  • 把 container 當作 Kubernetes 環境
    • 有在使用 Kubernetes 的人一定不陌生這個使用方法,雖然不比真實的 Kubernetes,但是可以快速驗證一些基本的想法或除錯。

後端開發

System Design Basics: Proxy vs. Reverse Proxy

在一個分散式的系統中,我們時常會聽到 Proxy 跟 Reverse Proxy,這兩個詞總是令人感到混肴,這兩者其中最大的不同之處在哪裡?而在什麼樣的情況之下會需要使用到它們?使用之後可以獲得什麼好處?這篇文章使用動畫圖來說明當 Proxy 代替 Client 送出請求到 Server 端,如何去達成 Caching, Anonymity, Traffic Control, Logging 等功能;同樣透過動畫去解釋 Reverse Proxy 將最終接受請求的 Server 對 Client 隱藏起來的同時,又是怎麼樣去 Caching, Anoymity, Load Balancing, Experimentation, Router/Ingress,對於這兩個詞彙也常常感到混肴的人,可以參考一下這篇文章

PostgreSQL: Lessons Learned While Optimising Query Performance

作者在去年學到很多關於如何去優化 PostgreSQL 效能的知識,所以想要透過這篇文章跟大家分享如何充分利用 Database 的關鍵點,他覺得有兩點特別重要,並且使用圖示詳細說明為什麼以及如何改善,對於 Tuning Database 底層有興趣的人可以參考看看

  1. 最常造成 Database 效能問題的原因通常在於 Index 並沒有被包含在搜尋中,或是建出來的 Index 並沒有被使用到
  2. 不知道目前 Database 到底是好是壞,例如怎麼找到目前最慢的三個查詢語法?

How Do I Resolve Merge Conflicts?

作者剛從 coding boot camp 畢業時其實還不會處理 Git Merge Conflict,他的當時的解決方式是直接重開一個新的 Git Repository,不過他在 2019 年作為一個軟體工程師跟著團隊一起工作之後,他不可能再透過開啟新的 Git Repository 來解決問題,所以他在那一年常常解 Merge Conflict 解到泛淚,不過在經歷那段時間之後,他現在已經很有信心自己去解決 Merge Conflict,雖然還是會有點感到壓力XD 所以他想要提供一些小技巧給大家,首先可以從了解為什麼 Merge Conflict 發生開始,接著提到如何去解決 Merge Conflict,內容講得滿詳細的,推薦給對於解決 Merge Conflict 也感到苦惱的人

StarBugs Weekly

StarBugs Weekly 由一群不寫文章就會想要亂花錢,但是又沒有那麼多錢,只好繼續寫文章的開發者所創立。
內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業,一切跟產品有關的知識,都是我們的守備範圍!

Writers:

  • @HannahLin - 從台灣到矽谷,熱愛前端的工程師女孩。
  • @KyleMo - 雜食性軟體工程師,喜歡的技術我都想學。
  • @Airwaves - Hi~我是 Airwaves,熱愛研究如何造輪子的前端工程師。
  • @Jenny - 我不寫 CSS。
  • @Andy - 目標成為用嘴巴工作的工程師,專長為網頁開發以及 K8s。

Maintainers:

  • @GQSM - Hi!我是神 Q 超人,一個先衝再說的男人。
  • @LarryLu - 我是 Larry,傳說中的 0.1 倍工程師!
  • @LukaTW - 一名全身都是死角的工程師。
  • @smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。
  • @RicoChen - 熱愛許多技術且努力看透技術的本質,如果有什麼好玩的技術,還請各位歡迎直接找我聊聊。

Feedback

本週呈現主題方式做了一些改變,希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊,每週更新社群活動的資訊。如果有任何建議,歡迎私訊 星巴哥技術週刊 FB 粉絲專頁 與我們聯繫。