第 55 期 - 當我踏出了第一步，就前進了一步

Created on 2020-11-17

本週專欄

打造舒適的雙系統開發環境 Windows + Mac 雙刀流

以前我剛學程式的時候，很多人建議我直接用 Mac 或是 Linux，而我最後也選擇了 Mac。直到近幾年，大家紛紛說 Windows 已經跟以前有很大的不同，許多人也開始推薦起 Windows 做為開發環境。我想要來試試看，Windows 是否還是像以前那麼雷。我們就一起開始探險吧！

星巴哥作者群開箱！

Starbugs 星巴哥技術週刊邁入一週年的里程碑，感謝大家的支持。未來的一年星巴哥想要讓大家看到更多元的內容，提供大家更多優質的原創文章，因此最近我們邀請了幾位優質的寫作者加入星巴哥的行列，以後在週刊上也會看到作者群撰寫的優質原創文章。

本週來介紹第三位寫作者 Airwaves ！！

Airwaves 你可能沒有聽過，其實他就是是著名的前端部落格手寫筆記的作者。著有許多知名的 React.js 的文章。Airwaves 對於程式的研究總是會去看如何原始碼了解如何實作，並且自己做一個，跟他交流覺得獲益良多，很高興能邀請他參加 Starbugs 技術專欄。

「半前年因為開始研究如何造輪子，誤打誤撞進入了前端這個世界，成為了一名現役的前端工程師。平時熱愛鑽研前端技術與分享技術文章，期許自己未來也能夠為開源貢獻一份心力。」- by Airwaves

Styled System | 從 Primer 看 GitHub 如何建構 design system

為什麼會知道 Styled System 這個套件，是因為 GitHub 的 designer director — Diana Mounter 在 React Conf AU 2020 演講的題目「Themeability is the path to dark mode」認識了這個工具。Diana 在演講中提到 GitHub 建構了一套 design system 名為 Primer，Primer 主要是由 Styled Components 與 Styled System 所構成。聽到這邊，你應該有點興趣，GitHub 是怎麼用這兩個套件建構 Primer 的。

前端開發

How to Build an E2E Testing Framework Using Design Patterns

E2E 需要與畫面上的各種 DOM 做互動，並觀察 DOM 呈現的結果是否正確，這是一件非常不簡單的事情，更別說是還得考慮如何維護這些測試案例的時候，一起來看看作者是如何將設計模式導入到 E2E 的測試案例中，讓測試案例看起來更簡單吧！

Vue 3.0 Ref-sugar 提案真的是自寻死路吗？

Vue 在進入 3.0 之後有兩個提案引起了許多開發者的注意，這兩個分別是 script-setup 和 ref-sugar，一起到文章裡看看它們寫起來到底有什麼不一樣，以及為什麼 ref-sugar 那麼不討喜吧！

7 code smells in your React components

雖然 React 的官方文件中有講解了幾個設計 Component 的原則，但是在實務上開發的時候總是很難知道如何才是更好的實踐方法，如果各位也還搞不清楚如何寫出健康的 Component，不如先看看有沒有讓人越想越不對勁的設計吧！

Vue.js

Vue 3 is coming — what to expect and how to prepare

Vue 3 已經發佈將近兩個月了，但我也是到看了這篇文章才知道 Vue 3 有哪些 feature，不然平常太忙了根本沒時間關心（真是慚愧XD）。所以如果你也是大忙人但又想認識認識 Vue 3 的話，就直接看這篇吧！

Migration Plan to the All New Vue JS 3

雖然我現在沒在寫 Vue，但根據之前用其他語言、框架的經驗，要 migrate 到新版本都需要好一段時間才能適應，更不用說有時還會有 breaking change 要修，所以這邊推薦一篇從 Vue 2 migrate 到 Vue 3 的總整理，有在寫 Vue 的各位快快收藏起來～

Vue.js Performance Archives - Vue.js Tutorials

這一系列是 Vue School 網站上在講 Vue 效能調校的文章，內容包括 Lazy Loading、Prefetching、Browser Cache 等等提升效能的方法，想讓自己的 Vue 實力更進階就靠這一系列了

React.js

Chakra-UI

最近公司正在嘗試使用新的 React UI Library，就物色到這個 UI Library 了，只要善用 Chakra UI Layout 中的 Box 以及 Flex 就可以拼出各式各樣的區塊了，而且以前 React 最讓人困惑到底 style 的部分要自己另外寫一個 scss 或 less 還是要用 styled-components 呢？在 Chakra 的世界中這些都不用考慮直接用 props 解決了，我想這應該是我目前看過最彈性的 UI Library 了吧 XD

react-use

現在進入了大 hook 時代，身為一個懶到極致的工程師，能用別人造好的輪子就盡量用，真的不能用就跟主管說做不到（誤，這邊就要來好好推薦這個非常好用的套件，裡面包含了各式各樣的 hook function 讓你在開發上一定可以更加迅速且便利！

react-infinite-scroll

相信大家應該很常用電商 APP，在使用的過程中應該都會發現滑動到底部的時候會自動去取得下一頁的資料，這部分的做法有兩種：一種是土法煉鋼監聽 scrollListener 事件並且利用 getboundingclientrect() 來取得 bottom 的值，然後再利用 bottom 是否小於 window.innerHeight() 的方式來判斷是否到底部了，但這段過程真的太麻煩了，這時候如果有別人造好的輪子當然要好好的利用一番，所以就來推薦 react-infinite-scroll 這個套件了，而且還可以設定 threshold 來決定要在哪個位置開始 fetch 資料，不一定要在底部才開始 fetch 是不是相當便利且彈性呢～

DevOps

Terraform on AWS: Multi-Account Setup and Other Advanced Tips

AWS 多重帳號是官方所推薦的管理方式，官方本身也釋出一些服務來幫助使用者達成此目標 (AWS Organization, AWS Control Tower)，而這篇文章嘗試介紹如何使用 Terraform 來管理多重 AWS 帳號，從設定 Provider 來 Assume Role 要怎麼做比較好開始談起，然後在提到 Module 和 Environment 的好處…

InfluxDB 2.0 Open Source is Generally Available

InfluxDB Open Source 2.0 總算在最近 GA 了！假如沒有社群的協助應該無法走到這一步，不過這不是結束，而是一個新的開始！

新版本讓使用者可以簡易部署並確保安全性
資料的探索和分析也將邁向下一個世代
多了專門用來處理資料的 Flux 語言
來自各方的資料可以更完善的整合再一起
地理融合時間的資料可以使用 Flux 做搜尋
可以在背景處理需要計算的 Metric, 取樣…等
即時的告警和通知
提供共用的 API 給開發者使用
利用 InfluxDB Stacks 和 Templates 來達成 GitOps 的部署管理 Workflow

Red Team KubeCTL Cheat Sheet

red-kube 是各種攻擊 Kubernetes 方式的 GitHub Repository，作者有警告別拿不屬於自己的 K8S Cluster 來嘗試XD 內容包含提權，Credential 存取…等

Devops Environment in Docker

這個 Repository 將各種 DevOps 常用工具打包成一個 Docker Image，例如：ansible, consul, packer, terraform…等，讓 DevOps Engineer 不用安裝一堆東西，只要運行這個 Docker Container 就可以開始上工了！雖然每個團隊需要的東西都不盡相同，但可以利用這個方式去建立屬於自己的！

StarBugs Weekly

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

Writers:

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

Curators:

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

Maintainers:

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

Feedback

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