第 86 期 - 雨下整夜，Bug 溢出就像雨水
本週專欄
用簡單的 CSS 和 JavaScript 輕鬆製造視差滾動（Parallax Scrolling）
前一陣子在練習切版的時候，突然發現視差滾動在 Landing Page 上的出現率還滿高的，於是就想練習切一些關於視差滾動的頁面，本來是要直接用 ScrollMagic 的，但想說機會難得，就來了解一下它的原理，殊不知實作起來還滿容易的，一起看看怎麼處理的吧！
星巴哥專欄作者，原創文章
lodash | 如何正確的 import lodash
通常前端都會導入一些好用的第三方套件，但是有時候導入的套件並非是基於 es module 進行開發，webpack 沒辦法發揮 tree shaking 的功能，在 import 時一不注意就會載入一堆沒有必要的 function。在這篇文章中以 lodash 作為舉例，目前 lodash 本身並不是使用 es module。所以如果在意 bundle size 的大小，就要特別注意在 import lodash 的方式。
前端開發
5 Awesome CSS tricks every developer should know
文章中介紹一些關於使用 CSS 的技巧，包含了可以讓使用者體驗更好的 Smooth scrolling，以及該如何設置圖片的大小、將自己喜愛的圖片或 icon 設置成鼠標、用 flex 更好的做水平和垂直置中，還有更容易控制內容行數的 -webkit-line-clamp，以上語法將來可能都可以成為你的排版小幫手！
Be the boss of your CSS styles with Tailwind CSS
Tailwind 是一個主張實用至上的 CSS 框架，它提供了很多實用且風格一致的介面，甚至是讓你不需要寫任何自己的 CSS，而且你也不用害怕被 Tailwind 綁死，因為如果你想做些修改，仍然可以做擴充、調整和改變！一起跟著文章作者入門 Tailwind 吧！
React 18：新的 SSR 架構解決了什麼問題？
拜技術的進步所賜，SSR 可以說是越來越普及了，早期在 React 中想要使用 SSR 可以利用 Next.js 這個套件，但 SSR 有一個非常嚴重的缺陷就是會讓整體的網頁在渲染的過程中一定會比 CSR 來的慢，因為 server 端會先抓取該內容所需的資料並且繪製出來，但最新的 React 18 帶來了新的 SSR 架構，讓未來 SSR 的渲染速度不會再繼續慢下去了。
Develop & test React components in isolation
之前在推薦 React component testing 的時候都會推薦 React testing library，沒想到也可以利用 storybook 進行 testing，而且這樣還能順便看到該元件的表現行為也算是蠻一舉兩得的，這篇文章介紹了如何利用 storybook 進行 testing 有興趣的讀者不妨可以收藏起來看~
JavaScript
從 V8 bytecode 探討 let 與 var 的效能問題
忘了之前有沒有分享過這篇，但我真心覺得這個研究還有趣的，如果對 let 跟 var 在 V8 引擎中的行為有興趣，而且也不排斥看一些 V8 bytecode，那真的一定要讀讀這篇
What’s New in RxJS 7
作為 reactive programming 在 JS 裡面的代表性函式庫，RxJS 已經要發佈第七個版本了，這個版本除了檔案更小、速度更快、更節省記憶體之外，用法上也有做出一些調整，如果最近有打算把 RxJS 從 6 升到 7 的話可以參考看看這篇～
A Comprehensive Guide To JavaScript Design Patterns
如果你最近想學設計模式，而且你又剛好會寫 JS，那就來看看這篇吧～這篇文章雖然很長，但他從設計模式的分類開始講起，給你一個整體的概念，接著才下去細講每個模式，而且在講解時除了提供範例之外還有附圖，全部看完（雖然可能要很久XD）一定會有很多收穫
JavaScript: What is short-circuit evaluation?
說真的 JavaScript 總是有很多奇怪的寫法來達到想要的結果，由於以前寫 C++ 寫久了，所以一開始在寫 JS 看到都會覺得 &&、|| 這個運算子就會直覺的認為只會返回不林子，殊不知 JS 的這兩個運算子能做的事情非常多而且非常奇妙，以後有想要進行邏輯取值的時候不妨都可以利用這種方式來寫，可以讓你的程式碼瞬間少了好幾行看起來很乾淨XD
这些 JS 的新语法有点东西啊
作者整理了一些在 tc39 上的有趣提案，其中包含了現在滿常被討論的 .at 外，還有已經在第四階段的 Top-level await，之後使用 await 時甚至不需要放到 async 裡面，但其中最讓我感到噁心的還是 「管道运算符（The Pipeline Operator）」，還有其他有趣又實用的提案，大家一起看看吧！
DevOps
CURL: BYE BYE TRAVIS CI
CURL 這個 Project 從 2013/10/17 在 Merge 某一個 Config 檔案時開始使用 Travis CI，正式取代了由自願者幫忙架設的 Autobuild 系統，以免費服務來說 Travis CI 真的提供了一個很棒的服務，過了四年到 2017 時，CURL 依然使用 Travis，這時候每一個 Commit 差不多有 10 個 Job 需要運行，到 2019 時變成 30 個左右，他依然表現良好，而且 Travis 官方甚至協助讓 CURL 可以比其他開源軟體運行更多平行化的 Job
不過到了 2021 時，每一個 Commit 最多可以跑到 100 個 Job，這次遇到了 travis-ci.org 搬家到 travis-ci.com 的事情，CURL 的作者不諱言不知道官方為什麼要這樣做之外，這次多的規則中，規定了開源專案不能接受商業公司或是組織的贊助，所以決定了 CURL 無法繼續使用 Travis CI，而且也開始沒有再收到來自 Travis 官方的免費 Credit
這時候來自 Zuul CI 和 Circle CI 開始協助幫忙把本來運行在 Travis CI 的 Job 搬家到他們的平台上，總算在 2021/06/14 將所有的 Job 從 Travis CI 搬走，有人說為什麼不乾脆付錢就好了，但 CURL 作者覺得 Travis CI 不再視 CURL 為開源專案這件事情讓他無法接受，而且現在市面上還有免費的就先擋著用，等到未來逼不得以需要付錢時再說了！
Design Patterns: Top 5 Techniques for Implementing Fault Tolerance in Distributed Systems
過去四十年來許多在系統設計中監控和容錯的技術不斷地被開發，使用和改進，所以作者想要透過此篇文章介紹在分散系統中，讓自己的應用服務跟其他服務進行溝通時，需要使用到哪些技術，才仍夠讓自己的應用服務具備容錯性和監控能力
首先從什麼是分散式系統開始介紹起，接著細談容錯性是什麼，以及為什麼需要它，然後進入重點談到各種解決 Pattern 是想要解決什麼樣的問題，跟如何去實作，而且都畫了精美的架構圖來解釋，是很值得一看的文章，想要了解各種分散式系統容錯性設計 Pattern 的人趕緊打開原文參閱詳細內容吧！
- Acknowledgement
- Circuit Breaker Pattern
- Roll Forward
- Roll Back
- Active Replication Pattern
My Top 12 Web Tools To Make Developers’ Life Easier
在這個網路時代，開發人員每天在工作上所面臨的常見問題，幾乎都可以在網路上找到解決問題的線上工具，而在這篇文章中，作者想要介紹 12 個他最愛用，而且可以讓 Developer 生活更簡單的線上工具
- Regex: 協助開發者驗證正規表示
- Crontab: 驗證 Crontab 的寫法有沒有問題
- EpochConverter: 轉換人類時間跟 Unix Timestamp
- URL-Encoder: Encode 跟 Decode 會在網址使用到的字串
- JWT: 讓開發者可以解碼，驗證跟產生 JWT
- JSONFormatter and Validator: 驗證 JSON 格式，並且印出漂亮格式的 JSON
- Text Compare!: 幫忙比對字串的不同之處
- flaticon: 提供免費的 ICON 讓 Web, iOS, Android 和 Desktop 應用使用
- freepik: 跟 flation 有點像，可以提供免費的圖片
- Name That Color: 給予顏色最接近的名稱
- Cloud Convert: 協助各種影片格式轉檔
- App Icon: 專門給 Mobile App 工程師拿來產生各種尺寸 ICON 的工具
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 粉絲專頁 與我們聯繫。