第 90 期 - 每段程式，都藏著一個故事

Created on 2021-07-20

本週專欄

用原生的 JavaScript Intersection Observer API 實現 Lazy Loading

Lazy Loading 簡單說就是，雖然要顯示的資料量有 10 筆，但因為一個頁面大概只能呈現 2 到 3 筆，那我就先計算那 2 到 3 筆資料然後顯示就好，剩下的資料等使用者往下滾再繼續顯示，這樣等待時間就不會太久，那說到底，Lazy Loading 該如何實作呢？

前端開發

部落格搜尋引擎優化 (SEO)

每個網站都希望曝光率可以越高，並且在網頁中停留更久的時間，但偏偏搜尋引擎最佳化（Search Engine Optimization）就不是那麼好相處的傢伙 😂，文章裡面介紹了作者如何利用一些小眉角，將自己部落格的每月訪問次數提高了一千左右。

3.5 Years as a Front-end Engineer - Things I Learn and What Next?

在成為工程師後的一段時間，不時都會陷入「下一步到底該往哪裡走？」或是「接下來要學習什麼？」等問題的漩渦之中，然後久久爬不出來也尋找不到答案。這篇文章中的作者從「思考方式」、「技術深度與廣度的抉擇」和「如何提高價值」三個方向反思自己當下的狀況，以及他該準備什麼進入下個階段。

5 HTML Tags That Almost Nobody Knows

HTML 提供越來越多語義化的標籤，但通常都不太會去特別看到底有哪些標籤可以使用 😂，文章裡就介紹了 5 個鮮為人知的標籤，來看看它們提供了什麼樣特別的語意吧！

CSS Trick – Customized Dashed or Dotted Border

最近在做 border 的一些樣式上的研究，發現原生的 border 樣式其實很難達到很多當代的設計，但是怎麼會有前端工程師設計不出來的樣式呢？經過一番查詢之後發現要用 background-image 的方式繞過去，然後在經過一番查詢後查到一個網站竟然有人幫忙大家把各種樣式的 border 都設計好而且還會自動產生 css code 真的太酷了，趕緊來分享給大家XD

How to render pseudo before content dynamically in styled-component

這個算是最近踩到的一個小地雷，平常在用 styled-components 久了，當偽元素的 content 必須要動態產生時，很容易直覺以為在 callback 中 return string 就會正常顯示出來了，但其實這樣還不夠因為在 css content 中本身就必須要先加上 ‘’ 了，所以在 callback 的外面也要加上 ‘’ 才能順利的把內容顯示出來。

最近在解 ios safari 問題時(沒錯又是麻煩的 safari XD)，發現瀏覽器的 menu bar 會一直跟網頁中只要 button 在底部時會在滾動時產生樣式上的衝突，讓使用者無法在網頁上點擊到按鈕，沒想到網路上很多人都在問這個問題也有相對應的解答XD，如果有遇到這種問題的讀者都可以來看一下這邊的解答XD

Go

There Are Many Ways To Safely Count

在 Go 裡面要如何寫一個 thread-safe 的計數器呢？這邊提供了 mutex、channel、atomic 三種方法，我認為他們各有各的好處，如果對哪個比較不熟不妨點進來看看這個簡單的例子

Writing slower Go programs

雖然這篇文章叫 Writing slower Go programs，但可不是在教你怎麼寫出很慢的程式碼，而是在告訴你說 Go 這語言本身就很快，所以你在寫 Go 時應該更注重可讀性而不是效能，除非你真的發現某個地方是效能瓶頸，那再著手去改善它就好了

Dark corners of go

Go 是一個易學難精的語言，尤其他的某些 feature 可能寫了很久都沒用過，而這篇文章就是把這些鮮為人知的 feature 整理出來，想更了解 Go 的話就快來看看吧～

DevOps

Kubernetes API and Feature Removals In 1.22: Here’s What You Need To Know

時光匆匆，下個月 K8s 1.22 就要推出了！底下列的這些 API 將會在 1.22 中都被刪除掉@@ 不過不是完全消失啦，是因為已經離開 Beta 階段，要進入到正式版本，文章中詳細的說明移除後會被影響的資源有哪一些，並且詳細的說明要升級的話會有哪一些步驟需要做～

ValidatingWebhookConfiguration 和 MutatingWebhookConfiguration API 的 Beta 版本 (admissionregistration.k8s.io/v1beta1)
CustomResourceDefinition API 的 Beta 版本 (apiextensions.k8s.io/v1beta1)
APIService API 的 Beta 版本 (apiregistration.k8s.io/v1beta1)
TokenReview API 的 Beta 版本 (authentication.k8s.io/v1beta1)
SubjectAccessReview, LocalSubjectAccessReview 和 SelfSubjectAccessReview API 的 Beta 版本 (authorization.k8s.io/v1beta1)
CertificateSigningRequest API 的 Beta 版本 (certificates.k8s.io/v1beta1)
Lease API 的 Beta 版本 (coordination.k8s.io/v1beta1)
所有 Ingress API 的 Beta 版本 (extensions/v1beta1 和 networking.k8s.io/v1beta1)

7 GitHub projects to make you a better Go Developer💥

Go 一開始是由 Google 所開發出來的語言，後來他被用在很多的軟體專案內，根據 2020 stackoverflow 的開發者調查報告指出，Go 拿下開發者最想要學習程式語言中的第三名，所以作者列出了 7 個可以幫助大家學習 Go 的 GitHub 專案

Awesome Go: 收集了大量 Go 會使用到的 Framework, Library 和軟體的清單
Standard Go Project Layout: 這個專案定義了一個 Go 應用專案的基本 Layout 應該要長什麼樣子
Go kit: 使用 Go 建立 MicroService 的工具，他可以幫忙解決分散式系統和應用架構的常見問題，讓開發者可以集中注意力在商業邏輯上
Go Design patterns: 收集了 Go 的各種 Design 和 Application Pattern
Learn Go with test-driven development: 學習如何使用 Go 達成 test-driven 的開發流程
The Ultimate Go Study Guide: 參加 Ultimate Go 課程學生的學習筆記
1000+ Hand-crafted Go examples, exercises and quizzes: 這個專案內有數以千計有關 Go 的範例，練習跟考題

Build Your Summer Spotify Playlist with Terraform

目前使用 Terraform 來管理公有雲或是第三方服務內的組態是相當常見的事情，它擁有的眾多的Prodiver 讓維運人員可以站在巨人的肩膀上輕鬆地達成 Infrastructure as Code；繼之前有人寫了一個訂達美樂披薩的 Provider 之後，沒想到竟然還有人寫了 Spotify Provider 😂 有興趣的人透過文章內附的教學連結學習如何使用 Terraform 來建立專屬於自己的 Spotify 播放清單，裏面也有提到要如何透過分享自己的播放清單來贏得一件免費的 HashiCorp T-shirt！

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 粉絲專頁與我們聯繫。