第 68 期 - 改個 DNS 是要改多久？- Domain 管理的常見問題
本週專欄
改個 DNS 是要改多久？- Domain 管理的常見問題
身為網路世界的一般使用者或是開發者，其實無時無刻都在使用 DNS 解析位於網址其後的真實運算資源在哪邊，因此當一個網路服務準備上線讓其他人或是服務可以使用前，一定需要先把 DNS 設定好，而這篇文章並沒有要講解 DNS 背後太深入的運行機制，因為自己對於網路底層也不太熟，只有一些堪用的常識而已；最主要是想藉由這篇文章談談自己這幾年來協助相關 DNS 設定時所遇到的常見問題，希望跟我一樣對 DNS 不熟的人看到這篇文章後，可以避免未來犯下一樣錯誤
星巴哥專欄作者，原創文章
實作開源小工具，與 Github Actions 的第一次相遇！
[面試] 前端工程師一定要會的 JS 觀念題-中英對照之上篇
與 Github Actions 的再次相遇！AWS S3 + CloudFront 自動部署 React Web App
前端開發
How to Build a Hacker News Clone Using React
如果有訂閱像 StarBugs 那麼優質的週刊，就應該會聽過有個網頁叫做 Hacker News(就像現在 😂)，而 Hacker News 本身就有在提供 API 在 GitHub 上，既然又有了現成的網頁可以參考，也能找到開放的 API，不就輪到前端工程師們登場了嗎？文章中的作者就是利用的 Hacker News 的 API，用 React 寫了一個簡單的 Hacker News！大家也可以試試看哦！ 🙌
10 Major UI/UX Design Trends for 2021
又到了部分前端工程師最需要的 UI 火力展示時間了（個人很喜歡看一些漂亮的設計 😂，非常視覺動物），但就像留言區一樓討論的，盲目的 follow 這些設計趨勢是沒有好處的，因為良好的 UI/UX 特性還是要以產品的類型和使用者需求下去設計（術業有專攻的部分）！話說如果看了上方的文章，也想做個 Hacker News，不妨從這篇文章裡挑個喜歡的設計來練練手！
github1s
有時候因為在 GitHub 上面太難閱讀程式碼了，總是希望可以在熟悉的介面 Visual Studio Code 中跳來跳去，所以通常都會先 clone 後再慢慢閱讀，而 github1s 主打著，只需一秒就能讓你在 VS Code 上閱讀 GitHub 上的程式碼！妳只要在某個 repo 下，把網址的 github 改成 github1s 就可以了，各位一定要試看看！如果覺得每次都要改很麻煩，README.md 最後也有附上一些 Browser 的 extensions 可以更方便使用！
CSS
New aspect-ratio CSS property
當初看到這篇文章的時候真的蠻興奮的，以往要寫一個 aspect-ratio box 必須要自己去設定 padding-bottom，例如 padding-bottom: 56.25% 代表 16:9 的比例，但這個真的有夠不直觀直到今日我還是要上網查一下各個比例的 aspect-ratio 值，但現在 CSS3 直接產生一個新的屬性叫 aspect-ratio 透過這篇文章一起來看看新的屬性有什麼功能吧！
P.S. 目前這個屬性瀏覽器支援度還是比較低，不建議現在進行轉換，想知道這個屬性目前瀏覽器的支援度可以點擊這裡
background-image vs html img tag
這是個蠻有趣的議題，到底是 html tag 中的 <img /> 效能好還是 CSS 屬性的 background-image 效能好？兩者都可以達到一樣的視覺效果但背後的做法完全不同，這篇文章解釋了兩者的差異，有興趣的讀者不妨可以看一下增加一些冷知識XD
BEM
之前在寫網頁的時候都會覺得 className 的命名很難理解元素跟元素之間的關聯性，很常把一些不相關的 className 濫用導致最後程式碼難以理解，因此有一大段時間自己都是用 styled-component 或 inline-style 的方式解決這個問題，但缺點就是很難重複利用，直到認識了 BEM 才徹底的解決了上面的問題，透過這篇文章讓大家可以更了解 className 的命名規則該如何設計會比較直觀～
Elastic Search
An Elasticsearch Tutorial: Getting Started
Elastic Search 是一個開源的分散式搜尋引擎，很擅長對資料做搜尋以及分析，而且還支援使用 RESTful API 進行 query，所以從 2010 年發佈到現在已經有非常大量的使用者。如果想入門的話這邊有一篇文章教你怎麼把 Elastic Search 跑起來，然後用 RESTful API 去進行 CRUD，很簡單的一篇文章～
Install Elasticsearch with Docker
如果看完上面那篇文章，覺得要把 Elastic Search 裝在自己電腦上太髒太麻煩的話，可以參考這份官方文件，文件中已經把 single node cluster 跟 multi-node cluster 所需的參數都設定好了，只要把 docker 裝好，然後跑他給的指令，就可以馬上開始使用 Elastic Search 了～
我的 ElasticSearch 進化之旅
說到 Elastic Search 就不得不推一下小城哥的文章，對於 ES 使用者來說要怎麼把 ES 的狀態調整到最好，並且盡量降低花費是很重要的。所以這篇文章中小城哥分享了他架設 Elastic Search 的四個階段，用一句話來總結就是如何讓花費越來越低
DevOps
Scaling Kubernetes to 7,500 Nodes
OpenAI 常會使用 Kubernetes 叢集來幫忙協助訓練機器學習模型，繼之前把單一 K8s 叢集擴展到 2500 個節點之後，這次變本加厲擴展到 7500 個節點，並把學習到的經驗以及為解決的問題透過這篇文章記錄下來回饋給社群
How to setup Kafka cluster for 15K events per second on AWS using Docker
在這篇文章中作者詳細的手把手紀錄在 AWS 中要如何使用 Docker 架設出可以承受與處理每秒一萬五千個訊息 (每個訊息為 1KB 左右) 的 Kafka 和 Zookeeper 叢集，而且還有考量到 HA 和監控機制！
iamlive: Generate a basic IAM policy from AWS client-side monitoring
這次要來介紹的工具專案叫做 iamlive，它還滿酷的，它利用 AWS client-side monitoring 的功能，讓使用者在操作 AWS 的時候，自動把對應到該操作行爲的 IAM Policy 給產生出來，如此一來維運人員不用再慢慢地去手動把 IAM Policy 給刻出來
StarBugs Weekly
StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。
內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！
Writers:
- @HannahLin - 從台灣到矽谷，熱愛前端的工程師女孩。
- @Kyle老莫 - 無法忍受自己一天不進步的熱血社會菜雞。
- @Airwaves - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。
- @Jenny - 我不寫 CSS。
Curators:
- @Andy - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。
Maintainers:
- @GQSM - Hi！我是神 Q 超人，一個先衝再說的男人。
- @Larry850806 - 我是 Larry，傳說中的 0.1 倍工程師！
- @LukaTW - 一名全身都是死角的工程師。
- @smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。
Feedback
本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 星巴哥技術週刊 FB 粉絲專頁 與我們聯繫。