第 101 期 - 我最喜歡的秋天來囉～

Created on 2021-10-05

本週專欄

Hi 大家好我是 Larry，最近我們 Starbugs 團隊正在拼命寫鐵人賽，所以專欄就先暫停一次。雖然鐵人賽我已經參加過好幾次了，但每次參加都還是累得要命XD，不只下班寫、週末寫，就連蹲馬桶時也要拿著手機寫文章，所以這週大家可以來看看我們鐵人賽的文章，每篇真的都是我們嘔心瀝血之作（會不會太浮誇XD），沒看到就太可惜了～

[Security] 從以卵擊石到堅若磐石之 Web API 安全性全攻略

首先是我寫的「Web API 安全性全攻略」，這一系列想跟大家分享如何打造一個高安全性的 API server。除了講解概念之外，我也會用 Node.JS 跟 Go 寫一些範例，想讓自己的 API Server 更安全就快來看看吧～

[Modern Web] 今晚，我想來點 Web 前端效能優化大補帖！

接著是由莫力全 Kyle 分享的「前端效能優化大補帖」，這一系列詳細介紹了各種跟前端有關的效能優化技術，每一篇文章都扎實到滿出來，而且整個系列中也舉了不少例子來幫助讀者吸收，真的是補到不能再補

[Modern Web] 從零開始學習 Next.js

由 Leo 分享的 Next.js 系列我也覺得也非常精彩，在現在 SPA 盛行的時代，僅僅使用 React 要做到 SSR 真的很麻煩，光是搞那些設定就沒時間好好開發，所以快點跟著這一系列從零開始學習 Next.js，讓自己事半功倍吧！

[DevOps] 前端工程師學習 DevOps 之路

最後是由陳奕帆 Andy 分享的「前端工程師學習 DevOps 之路」，Andy 他雖然是前端工程師，但在因緣際會下逐漸走上了 DevOps 之路，如果你對 Docker、K8s、Nginx 這些很有興趣，那這一系列很適合用來入門哦～

前端開發

5 Common HTML Mistakes you should avoid.

HTML 的初學者常常會使用 div 加上 class 來表達各種區塊，但其實 HTML 的標籤本身就有提供像是 header 或 footer 的語意了。還有其他幾個普遍使用的誤區，可以看一下自己有沒有不小心踩到。

5 Tips for CSS responsive design

作者先提供他在設計 RWD 的一些觀點，並且介紹了在 RWD 顯示時會用到的方法，其實都是一些會以觀看的螢幕尺寸大小變化時改變顯示的 CSS 屬性，可以了解一下。

前端包管理工具原理(npm && yarn)

這篇文章解釋了在輸入 npm 或 yarn install 時的背後流程，以及 npm 和 yarn 兩者如何處理各個套件對應的依賴關係。

GSAP

不曉得大家有沒有遇過一種動畫是必須要根據使用者進行滾動時才會慢慢觸發，而不是透過簡單的 keyframe 以及 animation 來達成，這時候就必須要依靠 JavaScript 的幫忙了，這邊有一個很好用的套件可以很輕鬆地達到這件事，如果有讀者遇到類似的問題不妨可以使用這個套件~

React Hook Form vs. Formik: A technical and performance comparison

在 React 的世界中只要提到 form 不外乎使用的套件就是 react-hook-form 或者 formik，這兩個套件到底哪個比較好以及哪個效能比較好呢？這篇文章會跟大家介紹這一切，但我還是推薦使用自己最擅長的套件才是比較重要的。

CSR vs SSR vs SSG

CSR 跟 SSR 在前端來說一直是個很常被拿來比較的話題，如今又有一個新的名詞叫 SSG，到底這三個東西差在哪？這篇文章用圖文的方式讓大家可以了解這三者之間的差別。

GraphQL

用 TypeScript 寫一個 Apollo server

最近公司的專案剛好需要用 typescript 架 Apollo server，但找了一下幾乎所有的文章都是用 JS 寫的，好不容易才找到這篇還不錯的文章，想以 TS+Apollo 開始入門 GraphQL 的話可以參考看看～

A guide to authentication in GraphQL

大部分 GraphQL 的文章幾乎都在講 GraphQL 多方便，一次請求就可以 query 到所有需要的資料，但卻很少有文章提到如何在 GraphQL 中做身分認證，而這篇算是近期我看到的文章中講的最好的，如果不知道怎麼在抓資料之前確認使用者身分，那可以來讀讀這篇

Think in GraphQL

說到 GraphQL 的中文學習資源，我覺得 Think in GraphQL 這一系列寫得相當不錯，重要的概念都有講到，而且也舉了不少例子，如果想學 GraphQL 但又懶得讀英文的話非常推薦這個～

DevOps

Announcing Terraform AWS Cloud Control Provider Tech Preview

AWS Terraform Provider 應該算是最多人使用的 Provider 了吧？！而他的下一代 Terraform AWS Cloud Control Provider 最近登場啦！目前正在 Tech Preview 的階段當中，不過看到這裡，大家應該一頭霧水，現在不是好好的嗎？為什麼要突然大改出個新版的？其實是因為 Amzeon 這邊推出了 AWS Cloud Control API，主要目的是要提供一個通用的 API 讓大家可以更方面的管理 AWS 的資源，畢竟 AWS 的資源越來越多，多到有些我都沒聽過XD 每種資源目前使用寫程式去做新增/修改/刪除時都不同，例如 S3 和 EC2 的建立方式就不會相同；所以 HashiCorp 或是其他的 IaC 工具再整合上就會方便很多，不再需要每次 AWS 有新的服務就要花時間跟人力去做整合跟開發，可以在服務推出且支援 Cloud Control API 的當下就立即支援，所以跟舊版的 AWS Terraform Provider 差異非常的大，文章中有同時使用新舊兩種 AWS Terraform Provider 的範例，自己相信在不久的將來，大家都會使用新版的 Provider

The hunt for a better Dockerfile

作者覺得 Dockerfile 還不夠好用，他覺得應該要有其他的解決方案用來取代他，他理想中覺得應該要有一個 API 可以用來管理 Container 的參數才對，如此一來就可以使用跟應用服務一樣的語言來設定與測試 Container，並且跟 CI 整合在一起，文中談及 BuildKit，buildah, PouchContainer 和 Packer；最後作者建議要是組織中原本有在使用 Ansible/Puppet/Chef 等 IaC 工具的話，就可以使用 Packer，而要是沒有這個基礎或是包袱的話，他覺得可以嘗試看看 buildah！

binocle

又到了介紹小工具的時候了，今天要談的 Binocle 是可以將 Binary 資料視覺化的工具，他可以根據不同的規則將 Byte 上色，並且產生一個矩形的像素圖，讓使用者可以用眼睛辨別大檔案中有趣的圖案；不過…自己還沒有想到實際上要怎麼應用會比較有價值XD

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 - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。

Feedback

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