第 85 期 - 南粽北粽，都沒有我的肉重！

Created on 2021-06-15

本週專欄

從作業系統的角度來談為什麼需要「虛擬記憶體」

大家好我是 Larry，因為上個月的專欄「你一定用過 htop，但你有看懂每個欄位嗎？」發佈出去之後有太多人來問我 Virtual Memory 到底是做什麼用的，所以就決定應觀眾要求寫一篇文章講 Virtual Memory 帶來的種種好處。雖然這篇文章的內容比較底層一點，但我盡量把它寫得淺顯易懂，所以就算你聽都沒聽過「虛擬記憶體」也可以進來看看哦～

星巴哥專欄作者，原創文章

Storybook | 用 addon-controls 打造更好的 storybook 體驗

在 2020 年以前使用 React storybook 時，想要動態操作 component 的 props 通常都是使用 addon-knobs 這個套件，但現在他的競爭者 addon-controls 出現了！除了下載次數急起直追外，addon-controls 也被 storybook 官方認列於 essential addons 中，因此有在用 storybook 的朋友們快來看看這個新崛起的 addon 該怎麼用吧～

前端開發

一探那些令人興奮的 React 18 三大新 features，auto batching，startTransition，Suspense SSR

上週才剛看到一篇關於 Server Component 的概念介紹，緊接著 React 就推出 18 新版本的發布計畫了！在這個新版本裡包含了三個主要的新功能，分別是 automatic batching、startTransition 和 New Suspense SSR，有興趣可以瞭解看看這些功能對我們會有什麼影響！ 🙌

My 3 tips about Flexbox that will make your CSS better

文中介紹了幾種在使用 Flexbox 排版的技巧，其中把 justify-content: space-between 當作 column-gap 的設置，就是一個很常見的誤用，這可能會導致最後一排的元素不依照你期望的想法排列對齊。

透過XSS取得localstorage和cookie上的資料

XSS（Cross-site scripting）是利用把惡意程式碼寫入你的網站執行的攻擊方式，文章介紹了幾種利用 XSS 取得存在 localstorage 或 cookie 內的 token 的方式。並解釋為什麼「該把 token 存在 localstorage 還是 cookie？」這個問題是假議題，因為不管存在哪裡都取得到啊！ 😆

husky

推薦一個不錯的套件，這個套件可以讓你在每一次的 commit 或者是 push 的時候進行 lint 的檢查或 run test file 等等功能，讓你的程式碼在進行下一階段的開發或者 build 的時候不會遇到一些小問題的 bug，算是蠻不錯用的套件~

How YOU can use React Testing Library to test component surface

最近在練習寫一些 unit test 的時候，為了寫 React component 的 unit test 所以選了 react testing library 這個套件，這篇文章介紹了如何寫 component 的 unit test，未來有需要寫測試的讀者不妨可以來參考這篇文章的教學~

Mocking methods which are not implemented in JSDOM

這篇算是蠻有趣的，最近在寫測試的時候發現 jest 原生不支援 window.matchMedia() 這個全域的 method，所以在進行裝置大小比對的時候就會噴錯，連 jest 官方自己都出來寫一篇文章來說明如何解決這個問題，但 jest 官方為何不直接修改程式碼把這個 method 加進去就好呢XDD

Go

Top 5 Lessons I learned while working with Go for two years

這篇文章是作者寫了兩年的 Go 之後給出的 best practice，包括怎麼寫出 thread safe 的程式、記得要設定 timeout 等等，整篇看完覺得收穫不少

Building your own Ngrok in 130 lines

ngrok 這工具應該大家都用過，他可以讓外部連線進到內網來。而這篇文章就要教你怎麼用 go 自己寫一個 ngrok，雖然重複造輪子有點浪費時間，不過藉此了解一下 ngrok 的原理還是不錯的～

The other sync package

除了大家都很熟悉的 sync 之外，Go 還有另外一個 package 叫做 golang.org/x/sync，他裡面提供了一些比較少見的功能像是 semaphore 跟 errgroup，而且這篇文章也有提供範例應該看完就知道怎麼用了～

DevOps

Announcing HashiCorp Terraform 1.0 General Availability

廣泛被大家使用的 IaC 工具 Terraform 在最近版號突然從 0.15 跳到 1.0 啦！而是什麼原因讓官方不是推出 0.16 呢？主要是因為他已經被很多人穩定的在 Production 環境上使用，再來是主要的使用需求都已經被滿足，最後就是良好的使用者體驗，讓我們順便來看看 1.0 這個里程碑的推出的具體內容:

Terraform State 向下相容: 以前每次升級 Terraform，State 就會被更著升級，假如使用比較舊版本的 Terraform 就會被警告，State 的版本比較新，不過 0.14, 0.15 和 1.0 目前都已經可以向下相容 0.12.30, 0.13.6, 0.14.0, 0.15.0 和 1.0.x 所產生的 State 了，
升級體驗的改善: 從 0.15 開始，使用者想要升級 Terraform 將不再伴隨著痛苦，因為升級完之後，既有的工作流程還是可以正常運行，就像沒有升級的感覺一樣，不再需要為了升級到 1.0.x 而去更新周邊的工具，重構…等
擴展維護週期: 所有 1.x 版本將會擁有至少 18 個月的維護週期，這意味著官方會持續為 1.x 花費資源跟時間修復 Bug 和發佈新的功能
Terraform Plugin SDK v1 產品壽命結束: Terraform Plugin SDK 是讓開發者用來實作 Terraform Provider 的框架，官方會在 2021/07/31 停止支援 version 1 的發佈，Terraform CLI 和 Cloud 的使用者不會受到影響，但是官方鼓勵 Terraform Provider 的開發維護者開始升級到 version 2

AWS announces the general availability of AWS Proton

AWS 最近推出一個叫做 Proton (質子) 的新功能，主要是為了管理 Container 和 Serverless 的應用程式，讓開發者可以在這個 IaC 盛行的時代裡，只需要寫好程式碼，然後透過使用 Proton ，就可以把安裝，部署和監控都一次搞定，但這樣一來維運平台的人要怎麼管理呢？ Proton 同時也讓維運人員還是可以保持一致性地進行管理方式，而且不會降低開發者的生產力，所以在 GA 的同時也支援了兩個最重要的功能，分別是可以使用跨帳號架構，並且在 API 內可以使用 IAM condition context keys

Flagsmith

Flagsmith 是一個開源的 Feature Flag 和 Remote Config 服務，他讓應用服務可以跨越網站，行動裝置和後端來建立和管理 Features Flag，只要在應用服務中加上ㄧ小段程式碼，Flagsmith 就可以隨著不同的環境或是使用者將功能進行開關，而他主要支援以下的功能:

Feature Flag
Remoet Config
A/B 或是多變量測試
方便組織管理
容易跟既有工具整合

StarBugs Weekly

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

Writers:

@HannahLin - 從台灣到矽谷，熱愛前端的工程師女孩。
@Kyle老莫 - 無法忍受自己一天不進步的熱血社會菜雞。
@Airwaves - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。
@Jenny - 我不寫 CSS。

Curators:

@Andy - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。

Maintainers:

@GQSM - Hi！我是神 Q 超人，一個先衝再說的男人。
@LarryLu - 我是 Larry，傳說中的 0.1 倍工程師！
@LukaTW - 一名全身都是死角的工程師。
@smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。

Feedback

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