第 61 期 - 天氣冷，每天睡到傻呼呼
本週專欄
跨出成為駭客的第一步，來打打看 CTF Web 吧！
如果要說天底下最帥氣的職業是什麼？在電腦、網路如此發達的今日，我覺得莫過於當一個駭客。但要成為一名真正的駭客，就跟當工程師一樣，除了扎實的理論基礎之外，還需要大量的練習
但練習也不可能隨便亂打別人的網站，所以這週的專欄要來跟大家介紹駭客的練功場 — CTF，也順便講幾個 Web 領域的題目，讓大家知道打 CTF 大概是什麼感覺～
星巴哥專欄作者，原創文章
初探 Server-Side-Rendering 與 Next.js
為了 SEO 跟使用者體驗著想，很多網站都開始使用 SSR(Server Side Rendering) ，但有嘗試過自己維護 React SSR 專案的人，就都知道整個架構會變得超級複雜，而且如果程式碼寫錯地方，三不五時就會找不到 window 或是 document 等瀏覽器才有的 API，還好現在有了 Next.js，終於不用再自己維護 SSR 部分的程式碼，可說是 React 開發者的一大福音
CTF(Capture The Flag)
CTF 的三十道陰影
這一系列是由 HITCON CTF 戰隊的成員 0xddaa 寫的，講了很多 CTF 的故事跟傳奇人物，在鐵人賽的活動期間甚至還被比喻為駭客列傳 XD，想了解 CTF 文化以及 Hitcon 的故事的話一定要看看
身為 Web 工程師，你一定要知道的幾個 Web 資訊安全議題
這週的專欄雖然有實際玩玩看 CTF，但對於攻擊的手法沒有很完整的解說，如果不太了解 SQL injection、XSS 等等攻擊原理的話，老莫這篇整理得非常詳細
Top Tools for Web Application CTF
想成為一名駭客，除了要掌握基本的攻擊原理之外，該要會的工具也要熟悉熟悉才行。這篇文章介紹了一系列可以對網站進行掃描、攻擊的工具，包括最常聽到的 SQLMap 跟 Burpsuite 等等，不管是想要打 CTF 或是想掃描自家的網站，都很推薦試試這些
前端開發
CSS Z-Index Not Working? How to Fix It Using Stack Order
在 CSS 中我們可以利用 z-index 來被設置 position 的 element，而在沒有使用 z-index 的情況下，瀏覽器則會使用預設的 stacking order 在頁面中堆疊 element。延伸閱讀 深入 css z-index 屬性。
你的 onscroll 不是你的 onscroll
在 HTML Specification 中有提到可以在 document.body 中透過某些 Event handler 來存取 window 中對應的 Event handler，而文章標題所提到的 onscroll 就是其中一個。
Developer Portfolios as Inspiration ✨
前端工程師要如何透過專業技能展現自己的能力是很重要的事情，但通常都找不到什麼好的靈感，此篇文章的作者整理了幾個很漂亮又有創意的個人網站，來看看他們是如何介紹自己的吧！🙌
淺談JS運算子 && 和 || 及其優先順序
JS 總有一些奇奇怪怪可以取得值的方法，有時候運用一些邏輯運算子不但可以縮短自身的程式碼也可以讓整體看起來更乾淨一些，不過有些 lint 不太建議用這種方式撰寫就是了XD
使用HTTP 204狀態碼來節省API的頻寬用量
小弟上班的公司有些 API 真的很常回傳 204 狀態碼，起初覺得疑惑不曉得為啥不回傳 200 就好一定要回傳 204，後來才知道有這個願故不過也不知道是不是為了減省頻寬就是了XD
Refresh Token的使用場景以及如何與JWT互動
最近小弟在設計 refreshLogin 的流程，目的是為了讓使用者可以不用太頻繁的重複登入只要重整頁面就可以取得最新的 token 藉以延長使用者的登入時間，不過這段流程到底要怎麼設計才會漂亮，這篇文章完整的闡述 refresh token 的更新流程。
DevOps
Kubernetes CRDs = Huge Pain In Multi-Tenant Clusters
與 Single-Tenant K8s Cluster 比較起來，Ｍulti-Ｔenancy 提供了許多的 Business 和技術上的優勢，但是 Ｍulti-Ｔenancy 也帶來了一些挑戰和痛點，其中之一便是要如何處理 K8s CRD (Custom Resource Definitions)，作者透過本文來解釋在 Ｍulti-Ｔenancy K8s 環境中處理 CRD 遇過的痛點，以及如何將這些問題最小化的方式
Shifting Cloud Security Left — Scanning Infrastructure as Code for Security Issues
在傳統製造業中，提早在生產線發現問題就可以確保有問題的產品不會跑到消費者的手中，在軟體產業也是一樣的道理，假如可以在 Release Pipeline 的早期階段就將安全檢查給整合進去的話，就可以大幅度地降低解決安全問題所需要耗費的成本，並確保不會讓問題出現在生產環境中，在管理雲端環境時，大家常常會使用 Terraform 或是 CloudFormation 之類的工具來達成 Infrastructure as Code，作者在本文將會介紹並比較目前市面上可以對 Terraform 程式碼進行靜態分析的工具，讓大家可以在各種雲端安全問題和錯誤組態配置升級成危害公司的問題前就先將其找出來
Practical Canary Releases in Kubernetes with Argo Rollouts
作者所在的公司 Soluto 透過微服務架構與眾多 CI/CD 工具相結合，使他們每天能夠快速地發佈多個版本，把最新的功能和修復帶給客戶，在此種快速迭代的過程中，有時候會在生產環境中發現問題，而在發生此種狀況時，站在公司的立場當然會希望客戶可以免於遭受到任何的困擾，同時開發者也可以儘早了解問題的成因，而這就是 Argo Rollouts 功能利用 Canary Release 方式所想要解決的問題；而此篇文章並不是要教導 “如何” 設定 Argo Rollouts，而是假設在大家已經知道它的工作原理下，想要跟大家探討如何解決可能面臨的問題，以及如何優化遭遇到的效能瓶頸問題
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 粉絲專頁 與我們聯繫。