atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>StarBugs Weekly 星巴哥技術週刊</title>
  <icon>https://starbugs.dev/img/logo.jpg</icon>
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="https://starbugs.dev/"/>
  <updated>2023-08-08T02:08:50.845Z</updated>
  <id>https://starbugs.dev/</id>
  
  <author>
    <name>StarBugs Weekly Editors</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>第 180 期 - 未來看見 bug 記得想起我們，謝謝大家！</title>
    <link href="https://starbugs.dev/2023/08/08/180-goodbye/"/>
    <id>https://starbugs.dev/2023/08/08/180-goodbye/</id>
    <published>2023-08-08T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.845Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="用-JavaScript-玩轉設計模式-你一定用過但可能不知道的-Facade-Pattern（外觀模式）"><a href="#用-JavaScript-玩轉設計模式-你一定用過但可能不知道的-Facade-Pattern（外觀模式）" class="headerlink" title="用 JavaScript 玩轉設計模式 - 你一定用過但可能不知道的 Facade Pattern（外觀模式）"></a><a href="https://medium.com/starbugs/%E7%94%A8-javascript-%E7%8E%A9%E8%BD%89%E8%A8%AD%E8%A8%88%E6%A8%A1%E5%BC%8F-%E4%BD%A0%E4%B8%80%E5%AE%9A%E7%94%A8%E9%81%8E%E4%BD%86%E5%8F%AF%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84-facade-pattern-%E5%A4%96%E8%A7%80%E6%A8%A1%E5%BC%8F-cfb5926ad1c6" target="_blank" rel="noopener">用 JavaScript 玩轉設計模式 - 你一定用過但可能不知道的 Facade Pattern（外觀模式）</a></h3><p>在程式設計的時候，我們經常會將各個行為獨立拆開（例如文章例子中的取得資料、檢查權限邏輯、檢查），這麼做會得到的好處是能夠在只需要該功能時單獨使用，或是更容易地與其他行為做組合，例如：其他地方如果需要檢查某些東西，可以單獨使用某個類別。壞處就是在使用時，你必須了解到這群方法和類別該如何正確互動，且每次使用時都需要承擔使用三種類別或方法的複雜度。</p><p>那有辦法讓這件事情看起來簡單一點嗎？可以！就用 Facade Pattern！Facade Pattern 通常會在「當你想要替一些複雜的操作，提供一個簡單的使用方式」時使用。</p><blockquote><p>Larry：</p><p>大家好，我是 Larry，這是最後一次在 Starbugs 推薦文章了。星巴哥成立了三年多，這段時間能透過週刊的方式時常分享技術新知、還有寫一些文章給大家看，對我來說是很棒的經驗，也是很寶貴的回憶。</p><p>雖然 Starbugs 要結束了，但我必須說如果沒有讀者們的支持，那就沒有今天的週刊，所以想在這裡謝謝你們的一路相伴。在 Starbugs 結束之後，未來我還是會不定期寫文章、分享有趣的內容，希望以後還能用不同的方式，繼續與大家交流～</p></blockquote><blockquote><p>神 Q 超人：</p><p>Hi！大家好，我是神 Q 超人！本來打了很多好捨不得之類的言論，但畢竟我是個大人了，所以又全部把它們全都刪掉。</p><p>最後道別的話我不太會說，但是真的非常感謝這幾年來大家的支持。</p></blockquote><blockquote><p>Luka:</p><p>感謝各位讀者三年多一路的陪伴，直到現在都還有很多人訂閱著星巴哥技術週刊，真的很感動。同時也謝謝願意將文章發到星巴哥的每一位技術寫作者，沒有你們就沒有星巴哥。沒想到這麼快來到了最後一期，心中無限不捨。感傷之餘，感謝所有默默支持我們的人，希望你們未來順利。StarBugs Weekly 星巴哥技術週刊下台一鞠躬。</p></blockquote><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="React-Server-Components-–-How-and-Why-You-Should-Use-Them-in-Your-Code"><a href="#React-Server-Components-–-How-and-Why-You-Should-Use-Them-in-Your-Code" class="headerlink" title="React Server Components – How and Why You Should Use Them in Your Code"></a><a href="https://www.freecodecamp.org/news/how-to-use-react-server-components/" target="_blank" rel="noopener">React Server Components – How and Why You Should Use Them in Your Code</a></h3><p>這篇文章先是介紹了當前 React 的 component 面臨到哪些瓶頸，像是因為非同步請求產生的 render 問題，或是可維護性方面的狀況。接著會開始介紹 react client component 和 react server component 各是什麼，還會講解 react server component 的限制，以及該如何利用 react server component 與 react client component 建立更好的結構！最後還有提供範例，真的很讚！</p><h3 id="Mastering-JavaScript-Shorthands"><a href="#Mastering-JavaScript-Shorthands" class="headerlink" title="Mastering JavaScript Shorthands"></a><a href="https://hackernoon.com/mastering-javascript-shorthand-tips-for-beginners?source=rss" target="_blank" rel="noopener">Mastering JavaScript Shorthands</a></h3><p>在 JavaScript 裡面，會有許多方便的寫法可以讓開發者避免寫下許多條件判斷，讓程式碼更精簡（當然是在合理範圍內的精簡 😂），例如：物件的解構、透過短路來決定是否執行方法，和問號判斷 null 及 undefined 都非常好用！那還有什麼其他的簡寫方式呢？快看看文章中還列了哪些吧！</p><h3 id="Chrome-Debugger-is-easier-to-use-than-you-might-think"><a href="#Chrome-Debugger-is-easier-to-use-than-you-might-think" class="headerlink" title="Chrome Debugger is easier to use than you might think"></a><a href="https://dev.to/this-is-learning/chrome-debugger-is-easier-to-use-than-you-might-think-c8" target="_blank" rel="noopener">Chrome Debugger is easier to use than you might think</a></h3><p>雖然目前已經很少在用 debugger 配合 Chrome 的開發者工具來除錯了，但是記得剛從 asp.net 轉到前端工程師時，真的很懷念那可以讓我一行一行執行，然後看每個變數現在值是什麼，以及現在跑到哪的中斷點。也許現在都較習慣用 console.log，不過有時候在找 bug 時就是需要一些靈感，所以將這些工具都先放到包包裡，總會有某個靈機一動的時機讓你想起來還有它！</p><h2 id="後端開發"><a href="#後端開發" class="headerlink" title="後端開發"></a>後端開發</h2><h3 id="快速上手-Grafana-k6-壓力測試工具"><a href="#快速上手-Grafana-k6-壓力測試工具" class="headerlink" title="快速上手 Grafana k6 壓力測試工具"></a><a href="https://blog.miniasp.com/post/2023/08/01/Getting-Started-with-Grafana-k6-Load-testing-tool" target="_blank" rel="noopener">快速上手 Grafana k6 壓力測試工具</a></h3><p>台灣的軟體工程師應該沒有人不知道保哥。保哥這篇文章介紹了一款超簡單、超方便、五分鐘就能學會的壓力測試工具 k6，而且壓力測試的邏輯還是用 JavaScript 寫的。如果你從來沒有試過壓力測試工具，那可以參考看看這篇文章，應該很快就能學會了～</p><h3 id="Top-6-message-queues-for-distributed-architectures"><a href="#Top-6-message-queues-for-distributed-architectures" class="headerlink" title="Top 6 message queues for distributed architectures"></a><a href="https://icepanel.medium.com/top-6-message-queues-for-distributed-architectures-a3cbabf08993" target="_blank" rel="noopener">Top 6 message queues for distributed architectures</a></h3><p>Message Queue 在後端領域中是非常重要的工具，但 MQ 那麼多種，究竟該怎麼挑呢？這篇文章從開源的 RabbitMQ、Kafka 講到雲端的 Amazon SQS 跟 GCP Pub/Sub，每一種都有其獨特的優勢和要面臨挑戰。如果你還不太確定這些工具之間有什麼差別，那這篇文章很適合你讀～</p><h3 id="How-to-Design-a-Scalable-Rate-Limiting-Algorithm-with-Kong-API"><a href="#How-to-Design-a-Scalable-Rate-Limiting-Algorithm-with-Kong-API" class="headerlink" title="How to Design a Scalable Rate Limiting Algorithm with Kong API"></a><a href="https://konghq.com/blog/engineering/how-to-design-a-scalable-rate-limiting-algorithm" target="_blank" rel="noopener">How to Design a Scalable Rate Limiting Algorithm with Kong API</a></h3><p>身為後端工程師，當然要知道怎麼做 Rate Limiting。這篇文章說明了幾種比較常見方法的優缺點，以及怎麼在分散式系統中做 Rate Limiting（還有幫自家產品打一下廣告XD）。如果你平時很常在開發 API，這篇文章絕對值得你一讀。</p><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 179 期 - 星巴哥成立後的第一個颱風！</title>
    <link href="https://starbugs.dev/2023/07/25/179-first-typhoon-after-starbugs/"/>
    <id>https://starbugs.dev/2023/07/25/179-first-typhoon-after-starbugs/</id>
    <published>2023-07-25T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.845Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Refactor-這-3-個重構技巧我很喜歡，推薦給你-feat-JavaScript"><a href="#Refactor-這-3-個重構技巧我很喜歡，推薦給你-feat-JavaScript" class="headerlink" title="Refactor | 這 3 個重構技巧我很喜歡，推薦給你 feat. JavaScript"></a><a href="https://medium.com/starbugs/refactor-%E9%80%99-3-%E5%80%8B%E9%87%8D%E6%A7%8B%E6%8A%80%E5%B7%A7%E6%88%91%E5%BE%88%E5%96%9C%E6%AD%A1-%E6%8E%A8%E8%96%A6%E7%B5%A6%E4%BD%A0-feat-javascript-849718b19c5e" target="_blank" rel="noopener">Refactor | 這 3 個重構技巧我很喜歡，推薦給你 feat. JavaScript</a></h3><p>在本週的專欄中，神 Q 超人要跟大家分享他前陣子讀了鼎鼎大名的「重構｜改善既有程式的設計」後，覺得很喜歡的幾個重構技巧。</p><p>雖然文中的範例都是用 JavaScript 寫的，但不論你寫的是什麼語言、是新手還是老手，只要你對程式碼的可讀性和可維護性有所追求，那麼這篇文章就絕對值得你一讀。快跟著神 Q 一起進入重構的世界，學習更多有趣的技巧吧！</p><h2 id="GenAI"><a href="#GenAI" class="headerlink" title="GenAI"></a>GenAI</h2><h3 id="假如生成式-AI-產生的程式碼都可以直接使用的話…"><a href="#假如生成式-AI-產生的程式碼都可以直接使用的話…" class="headerlink" title="假如生成式 AI 產生的程式碼都可以直接使用的話…"></a><a href="https://blog.blackhc.net/2022/12/llm_software_engineering/" target="_blank" rel="noopener">假如生成式 AI 產生的程式碼都可以直接使用的話…</a></h3><p>雖然自己有透 GitHub Copilot 和 ChatGPT 來增加生產力，但其實他產生出來的程式碼還是需要人工來檢查、修改，才能真正使用。最近看到一個叫做 LLM Strategy 工具提出來的想法滿不錯的，當工程師在撰寫 Python 時，只需要在程式碼上面加上 Decorator，例如: @llm_strategy(OpenAI(max_tokens=256))，那麼在接下來的 Class Method 中就只需要寫上需求註解，不需要撰寫程式碼，GenAI 就會幫你把需要的程式碼補完 (看附圖應該可以更好理解)<br>或許在不久的將來，當 GenAI 產生的程式碼都可以直接使用時，工程師就可以專注在需求上，而不需要花時間在撰寫程式碼上，寫程式的門檻也會更低！</p><h3 id="有沒有-On-Premise-的-ChatGPT-啊？！"><a href="#有沒有-On-Premise-的-ChatGPT-啊？！" class="headerlink" title="有沒有 On Premise 的 ChatGPT 啊？！"></a><a href="https://github.com/imartinez/privateGPT" target="_blank" rel="noopener">有沒有 On Premise 的 ChatGPT 啊？！</a></h3><p>在雲端世界的解決方案中，企業常常因為資料安全性的考量，而不願意將資料上傳到雲端，這時候就會需要採購 On Premise 的版本，那在生成式 AI 的領域裡有沒有類似 ChatGPT 的 On Premise 的版本呢？<br>答案當然是肯定的，目前有看到幾個比較多人使用的專案，分別是 ColossalChat, privateGPT,  localGPT，其中 privateGPT 使用的 LLM 為 GPT4All，localGPT 則是使用 Vicuna-7B，推薦給有類似需求的人</p><ul><li><a href="https://github.com/hpcaitech/ColossalAI/tree/main/applications/Chat" target="_blank" rel="noopener">ColossalChat</a></li><li><a href="https://github.com/imartinez/privateGPT" target="_blank" rel="noopener">privateGPT</a></li><li><a href="https://github.com/PromtEngineer/localGPT" target="_blank" rel="noopener">localGPT</a></li></ul><h3 id="開發-AI-應用服務要怎麼抓蟲"><a href="#開發-AI-應用服務要怎麼抓蟲" class="headerlink" title="開發 AI 應用服務要怎麼抓蟲?"></a><a href="https://blog.langchain.dev/announcing-langsmith/" target="_blank" rel="noopener">開發 AI 應用服務要怎麼抓蟲?</a></h3><p>一般來說，開發 Web 或是 Mobile App 時，都會使用諸如 Sentry 或是 Rollbar 的服務來協助追蹤程式遇到的問題，那在開發 AI App 時，要怎麼抓蟲和監控問題的發生呢?</p><p>在生成式 AI 開發框架中，相信不少人都是使用 #LangChain，而其實它也有推出類似的服務產品，也就是今天要提到的 #LangSmith，底下將介紹他所提供的重要功能</p><ul><li>Debugging: 視覺化使用者與 AI App 互動過程中每一個步驟輸入以及輸出 AI Model 的資訊，同時還會給出不預期的結果，錯誤，延遲時間，Token 的使用量，讓開發者有線索可以去找出可能是哪個地方出了問題；並且讓開發者可以直接從 LangSmith 的 UI 去做範例的測試，不用再複製貼上去 OpenAI Playground</li><li>Testing: 軟體測試最直接的方式，不外乎就是修改程式碼，然後把資料丟進去後觀察輸出有沒有符合預期，而 AI App 測試時，會需要比較多的輸入資料，LangSmith 讓開發者可以快速從正在追蹤的問題，或是透過手動上傳的方式來建立資料集，開發者就可以立刻輕鬆的使用他們來測試撰寫的 Chain 和 Prompt 是否符合預期</li><li>Monitoring: 程式當然不會再開發完成就結束了，當服務在線上持續運行時，時時刻刻監控其狀態是相當重要的，透過 LangSmith 可以去監控 AI App 的運行效能，例如延遲和成本，同時也要追蹤 Model 和 Chain 的運行效能，並且可以建立儀表板來了解目前使用者的使用狀況與體驗</li></ul><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="The-End-of-Front-End-Development"><a href="#The-End-of-Front-End-Development" class="headerlink" title="The End of Front-End Development"></a><a href="https://www.joshwcomeau.com/blog/the-end-of-frontend-development/" target="_blank" rel="noopener">The End of Front-End Development</a></h3><p>近幾年來 AI 急速成長，有許多前端工程師都會認為自己會被 AI 所取代，因為他們甚至能夠根據畫在紙上的 UI，產生對應的 HTML、CSS 和 JavaScript，這聽起來非常可怕，也讓許多前端工程師開始焦慮自己是否要繼續走下去。但是作者在這篇文章中指出，早在 CSS 誕生後的兩年內，第一個號稱不需要寫任何程式碼就能建構網站的 Homestead 就誕生了，但是現在前端工程師絕種了嗎？並沒有。而作者也有從其他面向去討論 AI 對軟體工程師的影響，最推薦的是最後一段寫給有熱忱的開發者的一段話。早上醒來看完這篇文章，心裡的暖都分不清到底是來自於作者的文字還是夏天的太陽。</p><h3 id="The-modern-way-of-serving-images"><a href="#The-modern-way-of-serving-images" class="headerlink" title="The modern way of serving images"></a><a href="https://kurtextrem.de/posts/modern-way-of-img" target="_blank" rel="noopener">The modern way of serving images</a></h3><p>文章中一開始用數據表示，從 HTTP Archive 收集到的資訊當中，至少 70% 的網站都利用當作網站裡最吸引人的部分，但只有 34% 使用了 <code>&lt;img srcset&gt;</code> 建立響應式和高效能的圖片顯示。作者會在文章中解釋為什麼我們會需要建立響應式的圖片，以及我們要如何利用 <code>&lt;img srcset&gt;</code> 和 <code>&lt;picture&gt;</code> 改善顯示或載入圖片時，在網頁遇到的常見問題以及使用者體驗！</p><h3 id="Zedux-Is-this-the-one"><a href="#Zedux-Is-this-the-one" class="headerlink" title="Zedux: Is this the one?"></a><a href="https://omnistac.github.io/zedux/blog/zedux-is-this-the-one" target="_blank" rel="noopener">Zedux: Is this the one?</a></h3><p>Zedux 是為最自由的 React 所建立的狀態管理工具，它潛伏了 5 年多仔細研究 React 狀態管理工具的生態，然後將各種狀態管理工具的優點全部 all for one 到自己身上。Zedux 中的 atom 參考了 Recoil，也吸收了 React Query 擁有簡單版本的 query 和 mutation，其中也包含 Redux 和 Jotai 的所有功能。那看來只要學習這套，之後怎麼鬼轉其他狀態管理工具都沒問題了。 😂</p><h2 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h2><h3 id="Caching-Golang-tests-in-CI"><a href="#Caching-Golang-tests-in-CI" class="headerlink" title="Caching Golang tests in CI"></a><a href="https://www.airplane.dev/blog/caching-golang-tests-in-ci" target="_blank" rel="noopener">Caching Golang tests in CI</a></h3><p>這篇文章作者的公司 Airplane 用 Go 來開發產品，並且在每次有新 commit 時就在 Github Action 上跑單元測試。但因為單元測試跑得時間太久了（可能測試寫太多了，真是一間好公司XD），因此他們用了 cache 來大幅加速。如果你的公司也有測試太多要跑很久的問題，那也可以參考看看這篇文章的做法哦～</p><h3 id="Built-in-functions-in-Go-1-21"><a href="#Built-in-functions-in-Go-1-21" class="headerlink" title="Built-in functions in Go 1.21"></a><a href="https://antonz.org/go-1-21-builtins/" target="_blank" rel="noopener">Built-in functions in Go 1.21</a></h3><p>Go 從版本 1.21 開始又多了 min、max、clear 三個內建函數，這篇文章用很簡短的幾個例子帶你看看他們，以後寫程式的時候就可以直接拿來用啦！</p><h3 id="Random-testing-in-Go"><a href="#Random-testing-in-Go" class="headerlink" title="Random testing in Go"></a><a href="https://bitfieldconsulting.com/golang/random-testing" target="_blank" rel="noopener">Random testing in Go</a></h3><p>這一系列講 Go Fuzzing Test 的四篇文章終於寫完啦，看完這四篇，除了會對 Fuzzing Test 有基本的認識之外，應該也會知道怎麼用他來找出一些奇怪的 bug。如果你對 Go 的基本語法還有單元測試已經非常熟悉，那現在來學 Fuzzing Test 剛剛好。</p><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Refactor-這-3-個重構技巧我很喜歡，推薦給你-feat-JavaScript&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 178 期 - 月光照亮你的眼睛</title>
    <link href="https://starbugs.dev/2023/07/11/178-fighting/"/>
    <id>https://starbugs.dev/2023/07/11/178-fighting/</id>
    <published>2023-07-11T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.845Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="開源專案讀起來-你看過計算機的裡面嗎？"><a href="#開源專案讀起來-你看過計算機的裡面嗎？" class="headerlink" title="開源專案讀起來 | 你看過計算機的裡面嗎？"></a><a href="https://medium.com/starbugs/99882574152f" target="_blank" rel="noopener">開源專案讀起來 | 你看過計算機的裡面嗎？</a></h3><p>繼上次的<a href="https://medium.com/starbugs/%E9%96%8B%E6%BA%90%E5%B0%88%E6%A1%88%E8%AE%80%E8%B5%B7%E4%BE%86-%E9%97%9C%E6%96%BC%E5%9C%88%E5%9C%88%E5%8F%89%E5%8F%89%E7%9A%84%E9%9B%85%E9%87%8F-4587d130d326" target="_blank" rel="noopener">「關於圈圈叉叉的雅量」</a>之後，神 Q 的新文章「開源專案讀起來 | 你看過計算機的裡面嗎？」要再度帶你進入開源專案的世界。以計算機為主題，帶你看看三個開源專案分別是怎麼用 JavaScript 去實作加減乘除，以及他們的思路有什麼不同。</p><p>如果你想看更多開源專案的導讀，請趕快到文章下方留言告訴神 Q 你想了解哪個開源專案，讓神 Q 來幫你研究研究，下次就能看到你想看的題目囉～</p><h2 id="職涯規劃"><a href="#職涯規劃" class="headerlink" title="職涯規劃"></a>職涯規劃</h2><h3 id="博弈公司的工程師生活：揭開神秘面紗，機會與挑戰並存"><a href="#博弈公司的工程師生活：揭開神秘面紗，機會與挑戰並存" class="headerlink" title="博弈公司的工程師生活：揭開神秘面紗，機會與挑戰並存"></a><a href="https://israynotarray.com/other/20230626/4076164354/" target="_blank" rel="noopener">博弈公司的工程師生活：揭開神秘面紗，機會與挑戰並存</a></h3><p>對博弈產業倒底在做什麼很好奇嗎？六角學院的 Ray 以自身經驗和朋友的見聞，揭開了這個神秘產業的面紗。從工作內容、技術需求，再到待遇和風險，都有詳細的解釋和分析。如果你對博弈產業有興趣，這篇文章非常值得一讀！</p><h3 id="How-to-have-a-Successful-Software-Engineering-Internship"><a href="#How-to-have-a-Successful-Software-Engineering-Internship" class="headerlink" title="How to have a Successful Software Engineering Internship"></a><a href="https://www.yangshuntay.com/blog/how-to-have-successful-software-engineering-internship" target="_blank" rel="noopener">How to have a Successful Software Engineering Internship</a></h3><p>好不容易拿到了在軟體公司實習的機會，但又怕自己的表現不好嗎？這篇文章提供了一系列實用的建議，如果最近正好在暑假實習，那也許可以參考看看文中的作法，讓自己在實習過程中可以學到最多的東西。</p><h3 id="想提升演算法面試的實力嗎？來參加程式競賽吧！"><a href="#想提升演算法面試的實力嗎？來參加程式競賽吧！" class="headerlink" title="想提升演算法面試的實力嗎？來參加程式競賽吧！"></a><a href="https://link.medium.com/xHT5OxIbFAb" target="_blank" rel="noopener">想提升演算法面試的實力嗎？來參加程式競賽吧！</a></h3><p>如果想要讓自己的演算法實力大幅提升，以通過面試中的 coding test，那不妨參加看看演算法競賽。但作者在文中也提到，雖然演算法競賽和 coding test 看似相似，但其實有很大的差異，特別是在溝通和表達能力上。因此除了把演算法練扎實之外，還是得花一些時間練習表達自己的思路，才可以在面試中過關斬將。</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="The-End-of-Front-End-Development"><a href="#The-End-of-Front-End-Development" class="headerlink" title="The End of Front-End Development"></a><a href="https://www.joshwcomeau.com/blog/the-end-of-frontend-development/" target="_blank" rel="noopener">The End of Front-End Development</a></h3><p>近幾年來 AI 急速成長，有許多前端工程師都會認為自己會被 AI 所取代，因為他們甚至能夠根據畫在紙上的 UI，產生對應的 HTML、CSS 和 JavaScript，這聽起來非常可怕，也讓許多前端工程師開始焦慮自己是否要繼續走下去。但是作者在這篇文章中指出，早在 CSS 誕生後的兩年內，第一個號稱不需要寫任何程式碼就能建構網站的 Homestead 就誕生了，但是現在前端工程師絕種了嗎？並沒有。而作者也有從其他面向去討論 AI 對軟體工程師的影響，最推薦的是最後一段寫給有熱忱的開發者的一段話。早上醒來看完這篇文章，心裡的暖都分不清到底是來自於作者的文字還是夏天的太陽。</p><h3 id="The-modern-way-of-serving-images"><a href="#The-modern-way-of-serving-images" class="headerlink" title="The modern way of serving images"></a><a href="https://kurtextrem.de/posts/modern-way-of-img" target="_blank" rel="noopener">The modern way of serving images</a></h3><p>文章中一開始用數據表示，從 HTTP Archive 收集到的資訊當中，至少 70% 的網站都利用當作網站裡最吸引人的部分，但只有 34% 使用了 <code>&lt;img srcset&gt;</code> 建立響應式和高效能的圖片顯示。作者會在文章中解釋為什麼我們會需要建立響應式的圖片，以及我們要如何利用 <code>&lt;img srcset&gt;</code> 和 <code>&lt;picture&gt;</code> 改善顯示或載入圖片時，在網頁遇到的常見問題以及使用者體驗！</p><h3 id="Zedux-Is-this-the-one"><a href="#Zedux-Is-this-the-one" class="headerlink" title="Zedux: Is this the one?"></a><a href="https://omnistac.github.io/zedux/blog/zedux-is-this-the-one" target="_blank" rel="noopener">Zedux: Is this the one?</a></h3><p>Zedux 是為最自由的 React 所建立的狀態管理工具，它潛伏了 5 年多仔細研究 React 狀態管理工具的生態，然後將各種狀態管理工具的優點全部 all for one 到自己身上。Zedux 中的 atom 參考了 Recoil，也吸收了 React Query 擁有簡單版本的 query 和 mutation，其中也包含 Redux 和 Jotai 的所有功能。那看來只要學習這套，之後怎麼鬼轉其他狀態管理工具都沒問題了。 😂</p><p>Writer:</p><ul><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;開源專案讀起來-你看過計算機的裡面嗎？&quot;&gt;&lt;a href=&quot;#開源專案讀起來-你看過計算機的裡面嗎？&quot;
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 177 期 - 你掉的是這個金 Bug 還是銀 Bug?</title>
    <link href="https://starbugs.dev/2023/06/27/177-gold-bug-or-silver-bug/"/>
    <id>https://starbugs.dev/2023/06/27/177-gold-bug-or-silver-bug/</id>
    <published>2023-06-27T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.845Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="兩大-bundler-交鋒：Vite-與-Turbopack-的技術角力賽"><a href="#兩大-bundler-交鋒：Vite-與-Turbopack-的技術角力賽" class="headerlink" title="兩大 bundler 交鋒：Vite 與 Turbopack 的技術角力賽"></a><a href="https://medium.com/starbugs/vite-vs-turbopack-1e139c222557" target="_blank" rel="noopener">兩大 bundler 交鋒：Vite 與 Turbopack 的技術角力賽</a></h3><p>本週的專欄是由 Writer Leo 發佈的「兩大 Bundler 交鋒：Vite 與 Turbopack 的技術角力賽」。在這篇文章中，Leo 要跟大家介紹由 Vue.js 作者尤雨溪創建的 Vite、以及 Next.js 團隊用 Rust 寫成的 Turbopack 這兩個前端 Bundler，是如何在效能和開發體驗上各顯神通，展開激烈的角力！</p><p>如果你對前端開發有興趣，這篇文章絕對值得一讀，讓你一窺兩大 Bundler 的秘密武器，也讓你了解他們在社群中引起的風波。</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><!-- summary --><h3 id="Reducing-Complexity-in-Front-End-Development"><a href="#Reducing-Complexity-in-Front-End-Development" class="headerlink" title="Reducing Complexity in Front End Development"></a><a href="https://css-irl.info/reducing-complexity-in-front-end-development/" target="_blank" rel="noopener">Reducing Complexity in Front End Development</a></h3><p>這篇文章主要是在分享作者在 <a href="https://heypresents.com/conferences/2023" target="_blank" rel="noopener">All Day Hey</a> 裡面最喜歡的一個議程 <a href="https://heypresents.com/talks/abstractions-complexities-and-off-ramps" target="_blank" rel="noopener">Abstractions, complexities and off-ramps</a>，議程內容主要是在說，現代開發都會傾向於尋找現有的解決方案，然後從 npm 把第三方套件下載下來使用，但如此一來前端的專案其實是失去掌控的，因為在那些第三方套件中有太多複雜性，你不確定他何時和什麼原因會使專案出錯。此議程會帶你分析這些複雜性，以及提供你能夠逐步解決的方式。推薦大家可以點進文章看看！如果有時間也可以看完整個議程！ 🙌</p><h3 id="useHooks"><a href="#useHooks" class="headerlink" title="useHooks"></a><a href="https://usehooks.com/" target="_blank" rel="noopener">useHooks</a></h3><p>相信有在使用 React 的開發者，對於自己寫 hooks 來說應該是家常便飯了，而這個意外看到的 repository 就是將各種常用的操作，像是 debounce、toggle、mouse 等等，然後把它們的邏輯包成方便使用的 Hooks！且網站中的每個 hooks 都有對應的 Demo 和程式碼，如果不想要下載整個套件也可以直接複製到專案用！</p><h3 id="👋-Say-Goodbye-to-Spread-Operator-Use-Default-Composer"><a href="#👋-Say-Goodbye-to-Spread-Operator-Use-Default-Composer" class="headerlink" title="👋 Say Goodbye to Spread Operator: Use Default Composer"></a><a href="https://aralroca.com/blog/default-composer" target="_blank" rel="noopener">👋 Say Goodbye to Spread Operator: Use Default Composer</a></h3><p>在 JavaScript 裡面使用解構產生新的物件賦值是很常見的操作，還能夠用一個有預設值的物件搭配有值的物件做到組合的效果，產生出一個「有更新值就用新值，沒有的話就用預設值」的物件出來，但如果是單層的物件還好操作，如果是巢狀的物件就會有點麻煩了，這篇文章就是在介紹 <a href="https://github.com/aralroca/default-composer" target="_blank" rel="noopener">default-composer</a> 這個第三方套件，讓我們可以更容易地做到相同的事情。</p><h2 id="System-Design"><a href="#System-Design" class="headerlink" title="System Design"></a>System Design</h2><h3 id="Redis-與作者-antirez-的故事"><a href="#Redis-與作者-antirez-的故事" class="headerlink" title="Redis 與作者 antirez 的故事"></a><a href="https://blog.brachiosoft.com/redis" target="_blank" rel="noopener">Redis 與作者 antirez 的故事</a></h3><p>軟體考古系列又來啦！這次的主角是大家都和熟悉的 Redis。這篇文章就像一部電影，帶你走過 antirez 的早年生活，看他如何從一個資料庫的門外漢，變成創造出 Redis 的英雄。如果你對資料庫有興趣，或者你也是一個狂熱的 Redis 迷，那千萬不能錯過這篇文章！</p><h3 id="System-Design-—-Scaling-from-Zero-to-Millions-Of-Users"><a href="#System-Design-—-Scaling-from-Zero-to-Millions-Of-Users" class="headerlink" title="System Design — Scaling from Zero to Millions Of Users"></a><a href="https://medium.com/geekculture/system-design-scaling-from-zero-to-millions-of-users-deca270ef784" target="_blank" rel="noopener">System Design — Scaling from Zero to Millions Of Users</a></h3><p>從單一 user 到數百萬 user，這篇文章將帶你一步步了解如何水平擴展你的系統。不管是 Cache、CDN 還是 Message Queue，在這篇文章都有很清楚的解釋跟例子。如果你對系統設計完全沒有概念，那從這篇文章開始讀剛剛好！</p><h3 id="Migrating-Netflix-to-GraphQL-Safely"><a href="#Migrating-Netflix-to-GraphQL-Safely" class="headerlink" title="Migrating Netflix to GraphQL Safely"></a><a href="https://netflixtechblog.com/migrating-netflix-to-graphql-safely-8e1e4d4f1e72" target="_blank" rel="noopener">Migrating Netflix to GraphQL Safely</a></h3><p>這篇文章出自 Netflix 的技術部落格，裡面說到 Netflix 是怎麼在 zero downtime 的情況下，將他的架構從 Falcor migrate 到 GraphQL，並分享了 migrate 過程中遇到的問題。如果你對 migration 或是 Netflix 用到的技術又興趣，那一定要讀讀這篇文章！</p><p>Writer:</p><ul><li><a href="https://medium.com/@airwaves" target="_blank" rel="noopener">@Airwaves</a> - Hi~我是 Leo，熱愛研究如何造輪子的前端工程師</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;兩大-bundler-交鋒：Vite-與-Turbopack-的技術角力賽&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 176 期 - Bug 最近會不會也開始因為業力引爆？</title>
    <link href="https://starbugs.dev/2023/06/13/176-will-karma-explode-bug/"/>
    <id>https://starbugs.dev/2023/06/13/176-will-karma-explode-bug/</id>
    <published>2023-06-13T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.845Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="什麼-元件竟然也有分可控制與不可控制-探討-React-Controlled-以及-Uncontrolled-Component"><a href="#什麼-元件竟然也有分可控制與不可控制-探討-React-Controlled-以及-Uncontrolled-Component" class="headerlink" title="什麼?!元件竟然也有分可控制與不可控制 - 探討 React Controlled 以及 Uncontrolled Component"></a><a href="https://medium.com/starbugs/%E4%BB%80%E9%BA%BC-%E5%85%83%E4%BB%B6%E7%AB%9F%E7%84%B6%E4%B9%9F%E6%9C%89%E5%88%86%E5%8F%AF%E6%8E%A7%E5%88%B6%E8%88%87%E4%B8%8D%E5%8F%AF%E6%8E%A7%E5%88%B6-%E6%8E%A2%E8%A8%8E-react-controlled-%E4%BB%A5%E5%8F%8A-uncontrolled-component-d6b8285d8939" target="_blank" rel="noopener">什麼?!元件竟然也有分可控制與不可控制 - 探討 React Controlled 以及 Uncontrolled Component</a></h3><p>在 React.js 的世界中有分成 Controlled 以及 Uncontrolled 兩種 Component，Andy 本篇文章除了介紹這兩種 Component 外也會介紹一些常用的 form 套件是如何控制其底下的 component，對於想要更深入了解 React.js 的朋友可以參考看看～</p><h2 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h2><h3 id="SOLID-Principles-with-Go-Examples-Every-Developer-Should-Master"><a href="#SOLID-Principles-with-Go-Examples-Every-Developer-Should-Master" class="headerlink" title="SOLID Principles with Go Examples Every Developer Should Master"></a><a href="https://towardsdev.com/solid-principles-with-go-examples-every-developer-should-master-6bc6f9f2b6ab" target="_blank" rel="noopener">SOLID Principles with Go Examples Every Developer Should Master</a></h3><p>大家應該都聽過 SOLID 中的五個原則，他們目的就是為了讓你的程式碼更好維護。但知道歸知道，能不能實際運用又是另外一回事，所以這篇文章就用了超多例子來講解怎麼在 Go 中符合 SOLID 的程式碼。雖然 Go 不是一個典型 OOP 的語言也沒有所謂繼承，但用 interface 還有 composition 還是一樣可以寫出很漂亮的程式碼！</p><h3 id="ChatGPT-Wardley-and-Go"><a href="#ChatGPT-Wardley-and-Go" class="headerlink" title="ChatGPT, Wardley and Go"></a><a href="https://blog.owulveryck.info/2023/05/30/chatgpt-wardley-and-go.html" target="_blank" rel="noopener">ChatGPT, Wardley and Go</a></h3><p>自從 ChatGPT 開放 plugin 功能之後，各種 plugin 就如雨後春筍般一直冒出來，而這篇文章正是教你怎麼用 Go 寫一個自己的 plugin。看完這篇文章後，你就能知道 ChatGPT 跟 plugin 的溝通流程，還有怎麼在 ChatGPT 上面畫圖XD，是非常有趣的一篇文章～</p><h3 id="Finding-The-Best-Go-Project-Structure"><a href="#Finding-The-Best-Go-Project-Structure" class="headerlink" title="Finding The Best Go Project Structure"></a><a href="https://avivcarmi.com/finding-the-best-go-project-structure-part-1/" target="_blank" rel="noopener">Finding The Best Go Project Structure</a></h3><p>關於怎麼規劃專案的目錄結構，一直以來都是個沒有標準答案的問題，而這個系列文嘗試比較了各種目錄結構的優缺點，如果你最近有打算開一個新專案的話，可以先參考看看這個系列文，讓你的程式碼更好管理。</p><h2 id="Backend-amp-Data-Engineering"><a href="#Backend-amp-Data-Engineering" class="headerlink" title="Backend &amp; Data Engineering"></a>Backend &amp; Data Engineering</h2><h3 id="中-Backend-for-Front-End-BFF"><a href="#中-Backend-for-Front-End-BFF" class="headerlink" title="[中] Backend for Front-End (BFF)"></a><a href="https://lukatw.medium.com/dc8fdcae1208" target="_blank" rel="noopener">[中] Backend for Front-End (BFF)</a></h3><p>在過去，應用程式相對簡單，瀏覽器向網路應用程式端點發送請求，後者從資料庫中擷取資料並回傳響應。然而，隨著移動客戶端與其他應用程式整合，這種簡單性被打破。本文介紹了一種處理這種複雜性的解決方案。</p><p>傳統方法中，應用程式返回所有資料，然後由各個客戶端過濾不需要的部分。然而，移動客戶端的頻寬有限，且不是所有手機都支援高速網路。因此，這種過度提取的方法不可行。</p><p>面對這個問題，提出了面向前端的後端（BFF）的解決方案。BFF 將每個微服務中的邏輯移至一個專用的部署端點。這個端點負責從所需的微服務中擷取資料，過濾相關部分，將它們聚合並以符合特定客戶端需求的格式回傳。</p><p>BFF 的概念是由負責前端的團隊開發和管理，這樣可以在提高開發速度的同時，提供與微服務相同的彈性。BFF 可以被視為獨立部署單元或 API 網關的一部分，取決於組織的需求。</p><p>在性能方面，與巨石應用程式相比，使用 BFF 會增加額外的請求時間，但這些請求可以並行處理，因此對使用者體驗的影響相對較小。</p><p>然而，每個組織都有不同的需求和情況，實施 BFF 之前應該仔細考慮系統架構、團隊組織和性能目標。</p><h3 id="中-資料工程師看台灣職場觀察與回顧：Data-Engineering-是個有挑戰＆變化的領域"><a href="#中-資料工程師看台灣職場觀察與回顧：Data-Engineering-是個有挑戰＆變化的領域" class="headerlink" title="[中] 資料工程師看台灣職場觀察與回顧：Data Engineering 是個有挑戰＆變化的領域"></a><a href="https://www.technice.com.tw/experience/5349/" target="_blank" rel="noopener">[中] 資料工程師看台灣職場觀察與回顧：Data Engineering 是個有挑戰＆變化的領域</a></h3><p>這篇文章是一位台灣資料工程師經歷的精彩冒險！作者畢業於國立大學資工系，對人工智慧充滿興趣。儘管在畢業專題時自學了類神經網路，卻被評為效果平平。然而，一年後回到現實世界，作者驚訝地發現最新潮的 Deep Learning 原來就是類神經網路的延伸應用！這讓他對資料和機器學習領域充滿了熱情。</p><p>大學時期，作者曾在朋友的幫助下接案開發網站，但工作一年後，他感到了一絲索然無味。於是，他開始追逐自己對資料和機器學習領域的熱愛，經過一段時間的自學後，他慶幸地得到了布丁大大的賞識，並成功轉職為一名資料工程師！從此展開了他精彩刺激的職業生涯。</p><p>資料工程師這個新興領域的範圍非常廣泛，從基礎服務到資料處理應用，甚至連分析和視覺化也可能涉及其中。每家公司對於資料工程師的需求都各不相同，有些想要一個能點石成金的魔法石，有些需要一個能治百病的仙丹，還有些只是需要一個能大肆宣傳的廣告看板。</p><p>相較於後端工程師，資料工程師更像是一位水管工，主要負責串接和維護資料管線。然而，資料工程師的工作並不像後端工程師那樣龐大，而是由許多小元件組成一個完整的架構。不同的資料類型和後續應用對整體架構都有很大的影響，因此沒有一個簡單的最佳實踐方法。不過，近年來各大雲服務提供商提供了越來越完整的相關服務，為起步選擇提供了不錯的選項。</p><p>作者提到，成為一名優秀的資料工程師需要不斷學習和探索，保持對新技術的敏感度。除了技術上的挑戰外，溝通和合作也是非常重要的，因為資料工程師往往需要與不同團隊合作，並將資料轉化為有價值的洞察。</p><p>這位資料工程師的職業生涯展示了一個從追求熱愛到實現夢想的故事，並且強調了資料工程師的重要性和多樣性。無論是對資料和機器學習充滿興趣，還是尋求一個充滿挑戰和成就感的職業，資料工程師都是一個令人嚮往的選擇！</p><h3 id="中-把-RabbitMQ-換成-PostgreSQL-的那篇文章"><a href="#中-把-RabbitMQ-換成-PostgreSQL-的那篇文章" class="headerlink" title="[中] 把 RabbitMQ 換成 PostgreSQL 的那篇文章"></a><a href="https://blog.gslin.org/archives/2023/04/12/11138/%E6%8A%8A-rabbitmq-%E6%8F%9B%E6%88%90-postgresql-%E7%9A%84%E9%82%A3%E7%AF%87%E6%96%87%E7%AB%A0/" target="_blank" rel="noopener">[中] 把 RabbitMQ 換成 PostgreSQL 的那篇文章</a></h3><p>這篇摘要的文章是從 Hacker News 引用的，原文標題為「SQL Maxis: Why We Ditched RabbitMQ and Replaced It with a Postgres Queue」，作者在文章中討論了將 RabbitMQ 替換為 PostgreSQL 的原因和結果。</p><p>文章中指出了一些值得吐槽的點，並且這些點在 Hacker News 上也被提到。其中有人指出他們遇到了一個錯誤（或特性），但沒有解決該錯誤，而是選擇直接改寫程式碼，將其改為使用 PostgreSQL 解決，這種做法很奇怪。另一個吐槽的點是關於量的部分，如果處理的量不大，降低技術堆疊使用 PostgreSQL 可能是一個不錯的決定。然而，有人質疑為什麼一開始要使用 RabbitMQ。同一個討論串中也有人提到處理的量實在太小，甚至開玩笑地說可以使用 Jenkins 來處理。</p><p>此外，一位名叫 Simon Willison 的人提到了 RabbitMQ 到目前為止仍然不支援 ACID 等級的工作排程，特別是耐久性的部分。他認為使用 PostgreSQL 作為佇列的好處是可以利用事務，只有在相關資料已經完全寫入資料庫且不可能發生佇列記錄未寫入的情況下才將工作放入佇列。同時他還推薦使用資料庫中的交易性「暫存」佇列，然後由另一個獨立的過程將其寫入實際佇列。</p><p>總結來說，原文中的公司在遇到 RabbitMQ 消費者程式庫和設定的問題時，決定換成 PostgreSQL，而不是解決問題。這引起了一些討論，並且有人對這種做法表示懷疑。同時，原文還提到了使用 PostgreSQL 作為佇列後端的優勢，特別是能夠利用事務來確保資料的完整性。然而，人們也提出了一些關於處理量和選擇技術堆疊的問題。</p><p>Writer:</p><ul><li><a href="https://medium.com/@w5151381guy" target="_blank" rel="noopener">@AndyChen</a> - 嗨嗨我是Andy，用嘴巴工作的工程師😂，喜歡學習不同領域的內容，專長為網頁開發，歡迎大家跟我聊技術～</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 175 期 - 當我 walking on the street，看到 Medium 被人帶走</title>
    <link href="https://starbugs.dev/2023/05/31/175-when-i-walking-on-the-streat/"/>
    <id>https://starbugs.dev/2023/05/31/175-when-i-walking-on-the-streat/</id>
    <published>2023-05-31T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.845Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Replacing-Medium-with-Hexo"><a href="#Replacing-Medium-with-Hexo" class="headerlink" title="Replacing Medium with Hexo"></a><a href="https://medium.com/starbugs/replacing-medium-with-hexo-ea5406a06fe" target="_blank" rel="noopener">Replacing Medium with Hexo</a></h3><p>本文介紹了一個幾乎沒有額外負擔的取代 Medium 的完整解決方案。作者過去一年半的時間每週發佈一篇文章，旨在獲得更多持續的曝光並吸引軟體工程師進行討論。然而，作者發現文章曝光的演算法需要大幅修改，儘管追隨者數超過 1,000，但實際閱讀數非常有限。因此，作者決定建立自己的 blog，並提出了對 blog 的幾項要求。</p><p>作者最終選擇使用 Hexo 和 Github Pages 來構建自己的網站。Hexo 具有內建功能，生成的靜態網站可以直接作為 Github Pages 呈現，無需額外操作。通過整合 Github Action，寫完 Markdown 文件後，只需將其推送到 Github，就可以自動發佈，這與在 Medium 上發佈文章的過程幾乎相同。為了實現對圖表和 Mermaid 的支援，作者選擇了 NexT 主題。此外，作者還使用 VS Code 和 Paste Image 插件實現了剪貼板上傳圖片的功能。</p><p>整篇文章介紹了 Hexo、Hexo Action 和 NexT 主題的基本用法，並提供了在 Github Pages 上快速生成 blog 的 SOP。作者還解釋了如何在 Hexo 中處理圖片並使用剪貼板上傳圖片。通過結合這些組件，作者能夠以比在 Medium 上更高效的方式撰寫文章，並消除了複製貼上 Mermaid 和表格的困擾。</p><p>總之，通過結合 Hexo、Github Action、Github Pages 和 NexT 等工具，作者能夠以更有效的方式撰寫文章，並解決了在 Medium 上的一些限制。作者計劃根據收集的追蹤數據逐步調整發佈頻率和內容。這是作者作為一名數據架構師對 Medium 和自己擁有的 blog 的實驗。</p><h2 id="Backend"><a href="#Backend" class="headerlink" title="Backend"></a>Backend</h2><h3 id="Load-Balancing-Introduction"><a href="#Load-Balancing-Introduction" class="headerlink" title="Load Balancing - Introduction"></a><a href="https://samwho.dev/load-balancing/" target="_blank" rel="noopener">Load Balancing - Introduction</a></h3><p>（由 <a href="https://kashiwachen.substack.com/" target="_blank" rel="noopener">Kashiwa</a> 推薦）這篇文章言簡意賅地介紹了負載均衡於網頁請求和返回之間的關係，並且分析了負載均衡所想要解決的問題：dropped request 和 latency。而且文章還有很多圖片跟動畫幫助你理解，如果想了解 Load Balancing 更多的話很推薦這篇文章</p><h3 id="PostgreSQL-技術筆記-跟疾管署沒有關係的-CDC"><a href="#PostgreSQL-技術筆記-跟疾管署沒有關係的-CDC" class="headerlink" title="PostgreSQL 技術筆記: 跟疾管署沒有關係的 CDC"></a><a href="https://medium.com/dcardlab/218e27eb363d" target="_blank" rel="noopener">PostgreSQL 技術筆記: 跟疾管署沒有關係的 CDC</a></h3><p>本文介紹了 Dcard 中使用 PostgreSQL CDC（Change Data Capture）的運作原理。Dcard 的系統架構中，許多服務元件使用 PostgreSQL 進行資料儲存。為了避免直接使用生產資料庫對效能和安全性造成影響，Dcard 採用了 Microservices 架構，將不同服務獨立部署在各自的 PostgreSQL 資料庫中。</p><p>為了方便管理和查詢，Dcard 的開發團隊開發了一個 OfflineDB Proxy 服務，通過該服務可以使用特定的 on-demand 服務來存取和管理 PostgreSQL 複本資料庫。在此基礎上，開發了 PostgreSQL CDC 技術，使複本資料庫能夠提供近乎即時的資料。通過 CDC 服務，許多其他服務元件可以通過數據流的方式獲取資料庫的異動資料，從而保證了服務間的流程設計的完整性，提供更可靠和穩定的 Dcard 服務。</p><p>文章介紹了各個模組間的設計概念，包括 OfflineDB Proxy、Snapshot Rotate Job、Postgres Protocol Handle 和 Resource Controller 等。此外，還介紹了使用 PostgreSQL Replication 機制來獲取異動資料，以及使用 Apache Pulsar 作為儲存 Change Data 的消息隊列服務。文章還提到了 pg2pulsar 和 pulsar2pg 兩個程序，用於處理 Change Data 的儲存和同步。最後，介紹了 CDC Stream Gateway，通過這個服務可以簡化應用程式與消息隊列之間的處理，提供給各種不同的流式應用程式使用。</p><p>整個系統的架構和流程如圖所示，包括 OfflineDB Proxy、CDC、和 Stream Gateway。通過這些模塊的搭建和運作，可以實現 Dcard 的即時性和異動資料的同步更新，並提供給各種不同的應用程式使用。</p><p>文章最後提到，目前 Dcard 已經在數十個 CDC Stream 應用中使用了這些技術，並且不斷進行優化和探索。同時，Dcard 還在計劃和開發其他類型資料庫的 CDC 服務，如 MongoDB 等。</p><h3 id="課程筆記-即使通訊與傳輸（realtime、streaming、websocket）"><a href="#課程筆記-即使通訊與傳輸（realtime、streaming、websocket）" class="headerlink" title="課程筆記 - 即使通訊與傳輸（realtime、streaming、websocket）"></a><a href="https://pjchender.dev/webdev/course-fem-realtime/" target="_blank" rel="noopener">課程筆記 - 即使通訊與傳輸（realtime、streaming、websocket）</a></h3><p>本篇摘要整理自 Frontend Masters 的 “Complete Intro to Real-Time” 課程。</p><p>簡介了以下主題：Long Polling（輪詢）、使用 setTimeout、requestAnimationFrame、Backoff and Retry（放棄或重試）、HTTP/2 Push、WebSocket、以及 Socket.IO。</p><p>在 Long Polling（輪詢）中，透過 AJAX 方式持續向服務器發送請求。使用 setTimeout 而非 setInterval 來進行輪詢，避免在 API 回應慢時打多次 API 請求。另外，也介紹了 requestAnimationFrame 來替代 setTimeout，以達到更好的性能和節能效果。</p><p>在 Backoff and Retry（放棄或重試）中，介紹了當 API 請求失敗時的處理機制，建議使用 backoff and retry 的方式，即在每次失敗後延遲一段時間再重試，並逐漸增加延遲時間。</p><p>在 HTTP/2 Push 中，說明了建立 WebSocket 連線的過程，包括使用 self-signed 的憑證、回傳特定的 headers 等。並介紹了如何在後端和前端進行相應的程式碼實現，以及如何處理資料的傳遞。</p><p>在自己實作 WebSocket 部分，提到了使用 WebSocket 和 HTTP 之間的協定升級過程，以及如何在後端和前端進行程式碼的實現。還提到了 WebSocket 中資料交換的格式和解析方法。</p><p>最後，介紹了使用 Socket.IO 來進行即時通訊的方式，並且提到了 Socket.IO 相對於 WebSocket 和 ws 套件的優勢，包括自動重新連線、兼容性等。</p><p>以上是本篇摘要。詳細內容可參考相應的課程和資料來源。</p><h2 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h2><h3 id="Step-up-Your-Go-App-Testing-Game-With-the-Testify-Framework"><a href="#Step-up-Your-Go-App-Testing-Game-With-the-Testify-Framework" class="headerlink" title="Step up Your Go App Testing Game With the Testify Framework"></a><a href="https://semaphoreci.com/blog/testify-go" target="_blank" rel="noopener">Step up Your Go App Testing Game With the Testify Framework</a></h3><p>如果你才剛開始在學 Go，那你絕對不能不知道 Testify 這個好用的 testing library，他幫你簡化了很多常用的操作譬如說 <code>assert.Equal</code> 跟 <code>assert.noError</code> 等等，讓你可以更快寫出正確的測試。除此之外，他也讓你可以輕鬆的造出一個 mock object，所以別猶豫，趕快讓 Testify 成為你的好幫手，讓你的測試寫起來更漂亮！</p><h3 id="Go-當中的-sync-pattern"><a href="#Go-當中的-sync-pattern" class="headerlink" title="Go 當中的 sync pattern"></a><a href="https://code-pilot.me/synchronization-patterns-in-go" target="_blank" rel="noopener">Go 當中的 sync pattern</a></h3><p>這篇文章比較進階一點，文中從 Mutex、Semaphore 講到 Channel，帶你看看這些不同的 sync pattern 各自有什麼優缺點。看完這篇文章之後，你就會知道在 Go 裡面要怎麼解決各種 multi thread 的問題！</p><h3 id="SwissMap-A-smaller-faster-Golang-Hash-Table"><a href="#SwissMap-A-smaller-faster-Golang-Hash-Table" class="headerlink" title="SwissMap: A smaller, faster Golang Hash Table"></a><a href="https://www.dolthub.com/blog/2023-03-28-swiss-map/" target="_blank" rel="noopener">SwissMap: A smaller, faster Golang Hash Table</a></h3><p>SwissMap 聽起來像某一款高級巧克力的名字，但實際上，他是一個 Go 的 Hash Table package。他號稱比 Go 內建的 map 更快、記憶體的使用量也更少，是 Dolt 為了解決自身的問題而設計出來的。這篇文章講解了他們是怎麼設計跟實作 SwissMap，而且也提供了 Benchmark 給你參考，證明他們設計的這個 Hash Table 真的很不錯。</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><!-- summary --><h3 id="4-Tools-that-Make-it-Easy-to-manage-your-Kubernetes-Cluster"><a href="#4-Tools-that-Make-it-Easy-to-manage-your-Kubernetes-Cluster" class="headerlink" title="4 Tools that Make it Easy to manage your Kubernetes Cluster"></a><a href="https://medium.com/@onai.rotich/4-tools-that-make-it-easy-to-manage-your-kubernetes-cluster-be252847cd85" target="_blank" rel="noopener">4 Tools that Make it Easy to manage your Kubernetes Cluster</a></h3><p>作者介紹了四個 Kubernetes 工具，K8sgpt、K9s、Lens 和 Rancher。其中最吸引的莫過於 K8sgpt，他會掃描整個 Kubrenetes 叢集後給予人性化的 troubleshooting 解答，也可以讓非維運人員看懂哪裡出問題。</p><!-- summary --><h3 id="Recover-your-Amazon-EC2-instance-when-SSH-key-pair-is-lost"><a href="#Recover-your-Amazon-EC2-instance-when-SSH-key-pair-is-lost" class="headerlink" title="Recover your Amazon EC2 instance when SSH key pair is lost"></a><a href="https://awstip.com/recover-your-amazon-ec2-instance-when-ssh-key-pair-is-lost-fd0626d02c19" target="_blank" rel="noopener">Recover your Amazon EC2 instance when SSH key pair is lost</a></h3><p>新手剛開始使用 AWS 有很高機率遺失 ssh key，這篇文章一步一步帶著讀者怎麼挽救，原理就是把原本機器上的硬碟掛載到另外一台機器上（中間有許多小障礙文章都有解法），之後把新的 .ssh/authorized_keys 複製到硬碟上，再把硬碟掛載回舊的機器即可用新的 ssh key 連線到舊機器了。</p><h3 id="How-to-Learn-Linux-Shell-Scripting-for-DevOps"><a href="#How-to-Learn-Linux-Shell-Scripting-for-DevOps" class="headerlink" title="How to Learn Linux Shell Scripting for DevOps?"></a><a href="https://devopscube.com/linux-shell-scripting-for-devops/" target="_blank" rel="noopener">How to Learn Linux Shell Scripting for DevOps?</a></h3><p>Linux shell script 是到哪裡都很萬用的工具，作者彙整了有關 shell script 學習資源、現實場景的範例、可能需要 shell script 的場景或面試時可能會遇到的問題。</p><p>Writer:</p><ul><li><a href="https://lazypro.medium.com/" target="_blank" rel="noopener">@lazypro</a> - 從 embedded 到 kernel，從 device 上雲端，程式無涯、無法靠岸，軟體的求道者。</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Replacing-Medium-with-Hexo&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 174 期 - 不如我們也來辦抽獎，只要分享並留言 Tag 好友就抽 Bug 嘛</title>
    <link href="https://starbugs.dev/2023/05/16/174-share-the-post-for-a-chance-to-draw/"/>
    <id>https://starbugs.dev/2023/05/16/174-share-the-post-for-a-chance-to-draw/</id>
    <published>2023-05-16T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="從-Linux-Kernel-觀察現代處理器特性-—-分支篇"><a href="#從-Linux-Kernel-觀察現代處理器特性-—-分支篇" class="headerlink" title="從 Linux Kernel 觀察現代處理器特性 — 分支篇"></a><a href="https://medium.com/starbugs/%E5%BE%9E-linux-kernel-%E8%A7%80%E5%AF%9F%E7%8F%BE%E4%BB%A3%E8%99%95%E7%90%86%E5%99%A8%E7%89%B9%E6%80%A7-%E5%88%86%E6%94%AF%E7%AF%87-7f30f75446bc" target="_blank" rel="noopener">從 Linux Kernel 觀察現代處理器特性 — 分支篇</a></h3><p>如果你對於 Linux Kernel 的最佳化有興趣，那麼一定要看看 Ian 寫的這篇文章。</p><p>Ian 透過研究 likely 與 unlikely 這兩個 C/C++ macro，解釋了如何利用這兩個標記去影響 compiler 的編譯結果，進而讓程式跑起來更快。但在這篇文章中也提到，現代處理器幾乎都帶有分支預測的功能，因此 likely 與 unlikely 對於現代處理器的效能上幾乎沒有幫助。雖然如此，如果你想知道 Linux Kernel 是怎麼把 CPU 的效能壓榨到極致，那這篇文章還是非常值得看！</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><!-- summary --><h3 id="CSS-Blend-Modes"><a href="#CSS-Blend-Modes" class="headerlink" title="CSS Blend Modes"></a><a href="https://garden.bradwoods.io/notes/css/blend-modes" target="_blank" rel="noopener">CSS Blend Modes</a></h3><p>CSS 的應用一直是開發 Web 時很迷人的部分，在寫 CSS 的時候都會有種自己是藝術家而不是工程是的錯覺。這篇文章介紹了 CSS 中的 <code>background-blend-mode</code> 和 <code>mix-blend-mode</code> 語法，他們能夠讓你去混合兩個元素重疊的像素，讓原圖擁有新的效果，有點像 <code>filter</code> 但效果又更強了！</p><!-- summary --><h3 id="Naming-Every-Developer’s-Nightmare"><a href="#Naming-Every-Developer’s-Nightmare" class="headerlink" title="Naming: Every Developer’s Nightmare"></a><a href="https://dev.to/samuel-braun/naming-every-developers-nightmare-3ge8" target="_blank" rel="noopener">Naming: Every Developer’s Nightmare</a></h3><p>這篇文章主要在討論命名的重要性，也有提供一個他在工作上遇到的例子，以及如何去改善。其中作者也有提供他自己整理的命名規則給大家參考，只要有個模式去思考命名，就不會每次要命名的時候都要苦惱很久。</p><h3 id="The-Most-Common-Mistakes-When-Using-React"><a href="#The-Most-Common-Mistakes-When-Using-React" class="headerlink" title="The Most Common Mistakes When Using React"></a><a href="https://claritydev.net/blog/the-most-common-mistakes-when-using-react" target="_blank" rel="noopener">The Most Common Mistakes When Using React</a></h3><p>文章中介紹幾個剛在學習 React 的時候常會碰到的一些誤區，如果不小心踩到的話還可能會影導致 bug 或是網頁直接 crash，如果你曾經踩過幾個 React 的雷，不如看一下文章中還有沒有自己可能漏掉的部分。</p><h2 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h2><h3 id="The-Go-1-19-Atomic-Wrappers-and-why-to-use-them"><a href="#The-Go-1-19-Atomic-Wrappers-and-why-to-use-them" class="headerlink" title="The Go 1.19 Atomic Wrappers and why to use them"></a><a href="https://medium.com/@deckarep/the-go-1-19-atomic-wrappers-and-why-to-use-them-ae14c1177ad8" target="_blank" rel="noopener">The Go 1.19 Atomic Wrappers and why to use them</a></h3><p>自從 Go 1.19 開始，就有像是 <code>atomic.Int64</code> 這樣的型別，可以防止有人對變數做不是 atomic 的操作。譬如程式碼中有一個 <code>var counter atomic.Int64</code>，但你的同事忘記這個 <code>counter</code> 會被多個 goroutine 共用，所以他寫了 <code>counter++</code>，這時候 Go compiler 就會噴錯告訴你不可以這樣用，要乖乖寫 <code>counter.Add(1)</code> 才可以避免 data race，真的是很不錯的新功能～</p><h3 id="6-Tips-on-High-Performance-Go-—-Advanced-Go-Topics"><a href="#6-Tips-on-High-Performance-Go-—-Advanced-Go-Topics" class="headerlink" title="6 Tips on High Performance Go — Advanced Go Topics"></a><a href="https://link.medium.com/H1s1blbsJzb" target="_blank" rel="noopener">6 Tips on High Performance Go — Advanced Go Topics</a></h3><p>想要寫出更高效能的 Go 程式碼嗎？這篇文章講了幾個技巧跟工具，譬如說內建的 profiling tool 跟 benchmark，幫助你找出 Go 程式中潛在的效能問題。如果想讓你的 Go 功力更上一層樓，那可以看看這篇文章。</p><h3 id="Go-Generic-Repo"><a href="#Go-Generic-Repo" class="headerlink" title="Go Generic Repo"></a><a href="https://link.medium.com/RNYVq0x56yb" target="_blank" rel="noopener">Go Generic Repo</a></h3><p>Go 從 1.18 開始支援泛型，但在實務上還是不常看到泛型的運用。而這篇文章給了一個很不錯的例子，用非常少的程式碼寫出一個通用的 Repository 跟 Model，不只寫起來漂亮，而且也非常好維護呢～</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><!-- summary --><h3 id="4-Core-Principles-of-GitOps"><a href="#4-Core-Principles-of-GitOps" class="headerlink" title="4 Core Principles of GitOps"></a><a href="https://thenewstack.io/4-core-principles-of-gitops/" target="_blank" rel="noopener">4 Core Principles of GitOps</a></h3><p>OpenGitOps 社群表示 GitOps 的四個核心原則：</p><!-- summary --><ol><li>GitOps 是宣告式的</li><li>GitOps 是有版本控管且不可變動的。期望的狀態是要能夠歷史追蹤的</li><li>GitOps 的服務能夠自動拉式部署的（GitOps 很多都是 pull-based 的方式部署）。例如使用 Flux 持續且漸進部署解決方案，而且兼具資安、迅速和可靠</li><li>GitOps 的服務能夠持續性的和解（Reconciled）。能夠持續觀察系統狀態並且達到期望狀態，目前社群還在定義中，因為跟拉式部署的想法接近</li></ol><h3 id="Kubernetes-Community-A-Guide-to-Open-Source-Localization"><a href="#Kubernetes-Community-A-Guide-to-Open-Source-Localization" class="headerlink" title="Kubernetes Community: A Guide to Open Source Localization"></a><a href="https://thenewstack.io/kubernetes-community-a-guide-to-open-source-localization/" target="_blank" rel="noopener">Kubernetes Community: A Guide to Open Source Localization</a></h3><p>軟體技術的確還是以英文為大宗，在推廣的過程中語言仍是個隔閡，除了打破語言的限制，在地化也十分重要，而 Kubernetes 在地化就給大家很好的例子學習。</p><h3 id="Introducing-“Implement-DNS-in-a-Weekend”"><a href="#Introducing-“Implement-DNS-in-a-Weekend”" class="headerlink" title="Introducing “Implement DNS in a Weekend”"></a><a href="https://jvns.ca/blog/2023/05/12/introducing-implement-dns-in-a-weekend/" target="_blank" rel="noopener">Introducing “Implement DNS in a Weekend”</a></h3><p>作者用 Python 實作了 DNS 域名解析的小工具，從中複習 DNS 本身是怎麼運作的，而為了練習，只有用到標準的函式庫。作者也有開放大家下載程式碼，大約 200 多行。</p><p>Writer:</p><ul><li><a href="https://medium.com/@ianchen0119" target="_blank" rel="noopener">Ian Chen</a> - I’m a Graduate Student, Software Engineer, Technical post writer, and Open-Source contributor.</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;從-Linux-Kernel-觀察現代處理器特性-—-分支篇&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 173 期 - 勞動節放假，程式碼當然也要一起休息</title>
    <link href="https://starbugs.dev/2023/05/02/173-labor-day/"/>
    <id>https://starbugs.dev/2023/05/02/173-labor-day/</id>
    <published>2023-05-02T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="找回那些被-Docker-吃掉的磁碟空間"><a href="#找回那些被-Docker-吃掉的磁碟空間" class="headerlink" title="找回那些被 Docker 吃掉的磁碟空間"></a><a href="https://medium.com/starbugs/%E6%89%BE%E5%9B%9E%E9%82%A3%E4%BA%9B%E8%A2%AB-docker-%E5%90%83%E6%8E%89%E7%9A%84%E7%A3%81%E7%A2%9F%E7%A9%BA%E9%96%93-6912cdb24dc0" target="_blank" rel="noopener">找回那些被 Docker 吃掉的磁碟空間</a></h3><p>都 2023 年了，身為工程師，應該不可能還沒用過 Docker 吧！Docker 用久了，有時候會遇到硬碟空間不足的問題，但是直接用 docker image prune 來清空間又很容易錯殺無辜。所以 Ian 這篇文章提出了一些非常具體的作法，讓你在不刪除所有 unused image 的情況下有效地釋放空間。如果你也是 Docker 的使用者，千萬不要錯過這篇文章！</p><h2 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h2><h3 id="軟體考古系列：JSON-的故事"><a href="#軟體考古系列：JSON-的故事" class="headerlink" title="軟體考古系列：JSON 的故事"></a><a href="https://www.ptt.cc/bbs/Soft_Job/M.1681181114.A.E85.html" target="_blank" rel="noopener">軟體考古系列：JSON 的故事</a></h3><p>前陣子在 PTT Soft_Job 版上看到一個軟體考古系列覺得很有趣，這篇是在講說 JSON 這個世界通用的資料格式究竟是怎麼出現的，而且文中也有講到 JavaScript 跟 Java 到底是什麼關係。雖然沒有什麼技術含量，但偶爾看一些軟體業的江湖軼事還滿好玩的XD。</p><h3 id="6-Advanced-TypeScript-tricks-for-Clean-Code"><a href="#6-Advanced-TypeScript-tricks-for-Clean-Code" class="headerlink" title="6 Advanced TypeScript tricks for Clean Code"></a><a href="https://link.medium.com/WAobjk8nazb" target="_blank" rel="noopener">6 Advanced TypeScript tricks for Clean Code</a></h3><p>TypeScript 在前後端領域的生態已經非常成熟，現在甚至很少聽到有公司是直接寫 JavaScript 的了。而身為 TS 的開法者，如果你想要讓自己對於 TypeScript 的掌握度更高、寫出更好維護的程式碼，那這篇文章講解了 TS 裡面比較進階的幾個小技巧。保證可以讓你寫出來的程式碼更漂亮！</p><h3 id="Handling-errors-like-a-pro-in-TypeScript"><a href="#Handling-errors-like-a-pro-in-TypeScript" class="headerlink" title="Handling errors like a pro in TypeScript"></a><a href="https://engineering.udacity.com/handling-errors-like-a-pro-in-typescript-d7a314ad4991" target="_blank" rel="noopener">Handling errors like a pro in TypeScript</a></h3><p>要把錯誤處理做得漂亮一直以來都不是容易的事，這篇文章的作者以他多年的經驗，提出了一套設計模式來幫助你把 TypeScript 中的錯誤處理寫得更漂亮，雖然不一定適合每個人的</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><h3 id="No-one-should-ever-write-a-single-line-of-Terraform-code"><a href="#No-one-should-ever-write-a-single-line-of-Terraform-code" class="headerlink" title="No one should ever write a single line of Terraform code"></a><a href="https://medium.com/@mike_tyson_cloud/no-one-should-ever-write-a-single-line-of-terrafom-code-5488d95211a8" target="_blank" rel="noopener">No one should ever write a single line of Terraform code</a></h3><p>標題下「不應該有人撰寫任何一行 Terraform 程式碼」真是直擊我心，作者介紹 Terraform Cloud 的限制，並介紹用圖像表示 infra 的 <a href="https://www.brainboard.co/" target="_blank" rel="noopener">Brainboard</a>，可以讓非專攻 infra 的人可以一目了然整個架構，降低溝通的高牆。</p><h3 id="KubeCon-Panel-How-Platform-Engineering-Benefits-Developers"><a href="#KubeCon-Panel-How-Platform-Engineering-Benefits-Developers" class="headerlink" title="KubeCon Panel: How Platform Engineering Benefits Developers"></a><a href="https://thenewstack.io/kubecon-panel-how-platform-engineering-benefits-developers/" target="_blank" rel="noopener">KubeCon Panel: How Platform Engineering Benefits Developers</a></h3><p>在歐洲舉辦的 KubeCon + CloudNativeCon 其中議程探討 platform engineering（平台工程）如何幫助開發人員，大方向依舊是替企業創造價值，讓開發人員隨心所欲，但是一切都符合 security、企業合規和公司文化等等的要求，甚至 GiaLab 自己用的 platform 就是產品本身，以身作則。最近 platform engineering 在這三年崛起，是時候擁抱這股趨勢。</p><h3 id="Cloud-native-projects-usage-stats-in-2022-based-on-CNCF-Survey-data"><a href="#Cloud-native-projects-usage-stats-in-2022-based-on-CNCF-Survey-data" class="headerlink" title="Cloud-native projects usage stats in 2022 based on CNCF Survey data"></a><a href="https://blog.palark.com/cncf-cloud-native-projects-usage-stats-2022/" target="_blank" rel="noopener">Cloud-native projects usage stats in 2022 based on CNCF Survey data</a></h3><p>CNCF 基金會調查市場 Cloud Native 專案使用狀況，執得一提的是 CloudEvents 從 6.8% 升到 21.8% 的 production 環境使用率，這次的成長或許會影響台灣對工具的選擇。而不用說 Kubernetes, Helm 和 Prometheus 使用率還是非常的高，而 security 相關的專案使用率都偏低，也看得出大家對 security 的優先順序是偏低的。</p><p>Writer:</p><ul><li><a href="https://medium.com/@ianchen0119" target="_blank" rel="noopener">Ian Chen</a> - I’m a Graduate Student, Software Engineer, Technical post writer, and Open-Source contributor.</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;找回那些被-Docker-吃掉的磁碟空間&quot;&gt;&lt;a href=&quot;#找回那些被-Docker-吃掉的磁碟空間&quot;
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 172 期 - 發動我風光的引擎</title>
    <link href="https://starbugs.dev/2023/04/18/172-engine/"/>
    <id>https://starbugs.dev/2023/04/18/172-engine/</id>
    <published>2023-04-18T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Payment-System-實戰系列（二）：盤點各大支付系統（Stripe-Apple-IAP-Google-IAB）"><a href="#Payment-System-實戰系列（二）：盤點各大支付系統（Stripe-Apple-IAP-Google-IAB）" class="headerlink" title="Payment System 實戰系列（二）：盤點各大支付系統（Stripe / Apple IAP / Google IAB）"></a><a href="https://medium.com/starbugs/f2f5da5569b0" target="_blank" rel="noopener">Payment System 實戰系列（二）：盤點各大支付系統（Stripe / Apple IAP / Google IAB）</a></h3><p>本文介紹了三個主要的支付系統：Stripe、Apple IAP、Google IAB。在選擇支付系統時，需要注意哪些必要元素，例如可測試的環境、良好的後台以及良好的文件。</p><p>對於 Stripe 而言，它提供了獨立且完整的測試環境，後台 Dashboard 也相當完整，因此非常方便使用。Apple IAP 的優點是與 iOS APP 操作上無縫，使用者體驗較好，但文件散落各處，後台 Dashboard 也較不佳。Google IAB 在 Android APP 操作上無縫，使用者體驗較好，但是測試環境不健全，後台 Dashboard 也較不好用。</p><p>最後，作者提醒大家，如果要上架 APP 到 App Store，而 APP 又有應用程式內付費，一定要接 Apple IAP，否則不會通過審核。</p><h2 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h2><h3 id="英-JavaScript-等於等於踩地雷遊戲"><a href="#英-JavaScript-等於等於踩地雷遊戲" class="headerlink" title="[英]JavaScript 等於等於踩地雷遊戲"></a><a href="https://eqeq.js.org/" target="_blank" rel="noopener">[英]JavaScript 等於等於踩地雷遊戲</a></h3><p>在提醒了 JavaScript 的 == 的恐懼之後，踩地雷遊戲將感覺像在公園散步一樣輕鬆。如果您需要深入瞭解，ECMAScript 規範的 7.2.14 節將對您有所幫助，否則呢？除非您有充分的理由，否則請使用三個等號（===）。</p><h3 id="英-2023-Web-Framework-Performance-Report-Astro"><a href="#英-2023-Web-Framework-Performance-Report-Astro" class="headerlink" title="[英] 2023 Web Framework Performance Report | Astro"></a><a href="https://astro.build/blog/2023-web-framework-performance-report/" target="_blank" rel="noopener">[英] 2023 Web Framework Performance Report | Astro</a></h3><p>此報告的目的是通過現實世界的數據來更好地了解框架選擇、性能和實際用戶體驗在 Web 上的關係。我們將嘗試回答一些關鍵問題：</p><ul><li>現代 Web 框架在現實使用和性能方面的比較如何？</li><li>框架選擇是否會影響網站的核心 Web 視覺效果？</li><li>框架選擇與 JavaScript 載荷大小有多大關聯，以及其影響如何？</li></ul><p>為此，我們查看了三個不同的公開可用數據集：</p><ul><li><a href="https://developer.chrome.com/docs/crux/" target="_blank" rel="noopener">Chrome 用戶體驗報告（CrUX）</a> 提供了有關實際 Chrome 用戶在 Web 上體驗熱門目的地的用戶體驗指標。</li><li><a href="https://httparchive.org/" target="_blank" rel="noopener">HTTP 存檔</a> 通過定期收集 Lighthouse 性能數據來跟踪和報告超過 1500 萬個網站的性能。</li><li><a href="https://discuss.httparchive.org/t/new-dashboard-the-core-web-vitals-technology-report/2178" target="_blank" rel="noopener">核心 Web 視覺效果技術報告</a> 收集了前兩個數據集中的有用見解。</li></ul><h3 id="英-A-Business-Case-for-SvelteKit"><a href="#英-A-Business-Case-for-SvelteKit" class="headerlink" title="[英]A Business Case for SvelteKit"></a><a href="https://elliscs.hashnode.dev/a-business-case-for-sveltekit" target="_blank" rel="noopener">[英]A Business Case for SvelteKit</a></h3><p>這篇文章講述了作者在 XtendOps 工作期間，如何將公司的技術堆棧轉換為 SvelteKit 框架的過程。文章詳細介紹了作者在評估 SvelteKit 可行性時需要解決的問題，並分享了他們如何應對這些問題的解決方案。通過使用 SvelteKit，作者的團隊成功地實現了更好的開發體驗和技術性能，並且對公司的業務產生了實際影響。文章最後還提供了一些有用的建議，以協助其他公司在轉換到 SvelteKit 時取得成功。</p><h2 id="System-Design"><a href="#System-Design" class="headerlink" title="System Design"></a>System Design</h2><h3 id="RESTful-API-How-to-design-paths-and-identify-resources"><a href="#RESTful-API-How-to-design-paths-and-identify-resources" class="headerlink" title="RESTful API: How to design paths and identify resources"></a><a href="https://homuchen.com/posts/restful-api-how-to-design-paths-and-identify-resources/" target="_blank" rel="noopener">RESTful API: How to design paths and identify resources</a></h3><p>設計 RESTful API 應該已經是後端工程師的必備技能了，這篇文章會教你怎麼從「資源」的角度下去進行設計，讓 Client 在使用時更加方便、符合直覺。</p><h3 id="Instagram-System-Design"><a href="#Instagram-System-Design" class="headerlink" title="Instagram System Design"></a><a href="https://link.medium.com/YigXEzFQEyb" target="_blank" rel="noopener">Instagram System Design</a></h3><p>大家應該都用過 Instagram，如果想要自己寫一個 Instagram，那你會怎麼實作呢？這篇文章講了怎麼設計一個類似 Instagram 的 App，另外，文中也有提到怎麼進行容量估算、以及如何做資料庫的設計等等，如果對於大型系統的設計有興趣，那一定要看看這篇文章！</p><h3 id="Blue-Green-Deployment-for-Node-js-Without-Kubernetes"><a href="#Blue-Green-Deployment-for-Node-js-Without-Kubernetes" class="headerlink" title="Blue Green Deployment for Node.js Without Kubernetes"></a><a href="https://semaphoreci.com/blog/blue-green-deployment-nodejs" target="_blank" rel="noopener">Blue Green Deployment for Node.js Without Kubernetes</a></h3><p>如果你對於怎麼用 CI/CD 來做藍綠部署有興趣，那你來對地方了！這篇文章介紹了藍綠部署的基本原理，並且跟你說在沒有 K8s 的情況下，要怎麼自己把藍綠部署的流程串起來，不管是理論還是實務方面都講得非常完整哦～</p><h2 id="AI"><a href="#AI" class="headerlink" title="AI"></a>AI</h2><h3 id="英-Elon-Musk-悄悄啟動新的人工智慧公司-X-AI，挑戰-OpenAI"><a href="#英-Elon-Musk-悄悄啟動新的人工智慧公司-X-AI，挑戰-OpenAI" class="headerlink" title="[英]Elon Musk 悄悄啟動新的人工智慧公司 X.AI，挑戰 OpenAI"></a><a href="https://venturebeat.com/ai/elon-musk-quietly-starts-x-ai-a-new-artificial-intelligence-company-to-challenge-openai/" target="_blank" rel="noopener">[英]Elon Musk 悄悄啟動新的人工智慧公司 X.AI，挑戰 OpenAI</a></h3><p>根據最新報導，特斯拉創始人 Elon Musk 將推出一家名為 X.AI 的新人工智慧（AI）初創公司，直接競爭 OpenAI。據《金融時報》報導，Musk 已經開始組建 AI 研究和工程師團隊，並與 SpaceX 和 Tesla 的幾位投資者談過支持他的新 AI 初創公司的事宜。此外，他還購買了約 1 萬個圖形處理單元（GPU）來為新的 AI 項目提供支持。然而，這一決定引起了 OpenAI 聯合創始人 Sam Altman 的擔憂。此前，Musk 在 OpenAI 的董事會上辭職，並批評該組織追求人工通用智慧（AGI）的做法。這次，Musk 的新冒險是在他表達對人工智慧潛在危險的擔憂和對監管和監督的需要之後而進行的。</p><h3 id="英-為什麼負責任的-AI-導致更準確和有效的-AI-模型？"><a href="#英-為什麼負責任的-AI-導致更準確和有效的-AI-模型？" class="headerlink" title="[英] 為什麼負責任的 AI 導致更準確和有效的 AI 模型？"></a><a href="https://venturebeat.com/ai/algorithms-auditing-algorithms-gpt-4-responsible-ai-beyond-human-scale/" target="_blank" rel="noopener">[英] 為什麼負責任的 AI 導致更準確和有效的 AI 模型？</a></h3><p>負責任的 AI 定義了在設計、開發和部署 AI 模型時確保安全、公平和道德的承諾。通過確保模型按預期運行 - 並且不會產生不良結果 - 負責任的 AI 可以幫助增加信任，保護免受損害，並提高模型表現。</p><p>為了負責，AI 必須是可理解的。這已經不是人類規模的問題了；我們需要算法來幫助我們理解算法。</p><p><a href="https://openai.com/research/gpt-4" target="_blank" rel="noopener">GPT-4</a>，OpenAI 的 <a href="https://venturebeat.com/ai/whats-next-in-large-language-model-llm-research-heres-whats-coming-down-the-ml-pike/" target="_blank" rel="noopener">大型語言模型（LLM）</a> 的最新版本，是基於互聯網的文本和圖像進行訓練的，而我們都知道，互聯網充滿了不精確之處，從小的錯誤說法到完全的杜撰。儘管這些錯誤本身可能很危險，但它們也必然產生不太準確和智能的 AI 模型。負責任的 AI 可以幫助我們解決這些問題，並朝著開發更好的 AI 前進。具體而言，負責任的 AI 可以：</p><ol><li>** 減少偏見 **：負責任的 AI 專注於解決開發過程中可能被建立到 AI 模型中的偏見。通過積極努力在數據收集、訓練和實施過程中消除偏見，AI 系統變得更加準確，為更廣泛的用戶提供更好的結果。</li><li>** 增強普遍性 **：負責任的 AI 鼓勵開發在不同情境和不同人群中表現良好的模型。通過確保 AI 系統在各種情況下進行測試和驗證，可以增強這些模型的普遍性，從而產生更有效和適應性的解決方案。</li><li>** 確保透明度 **：負責任的 AI 強調 AI 系統的透明度的重要性，使用戶和利益相關者更容易理解決策是如何做出的以及 AI 的運作方式。這包括提供算法、數據來源和潛在限制的可理解解釋。通過促進透明度，負責任的 AI 促進了信任和責任，使用戶能夠做出知情決策，促進了對 AI 模型的有效評估和改進。</li></ol><h3 id="英-OpenAI-的首席執行官表示，巨型-AI-模型的時代即將結束；GPU-危機可能是其中一個原因。"><a href="#英-OpenAI-的首席執行官表示，巨型-AI-模型的時代即將結束；GPU-危機可能是其中一個原因。" class="headerlink" title="[英]OpenAI 的首席執行官表示，巨型 AI 模型的時代即將結束；GPU 危機可能是其中一個原因。"></a><a href="https://venturebeat.com/ai/openai-chief-says-age-of-giant-ai-models-is-ending-a-gpu-crisis-could-be-one-reason-why/" target="_blank" rel="noopener">[英]OpenAI 的首席執行官表示，巨型 AI 模型的時代即將結束；GPU 危機可能是其中一個原因。</a></h3><p>OpenAI CEO Sam Altman 認為，人工智能模型不斷變大的時代即將結束。Skyworth AI 應用研發技術中心副總經理陳瑩認為，在大數據時代，人工智能的「三高」問題——高成本、高門檻和高風險——是制約人工智能發展的主要阻礙。成本問題是人工智能發展的瓶頸之一。如今，隨著大數據的快速增長，人工智能的計算需求越來越高，計算成本也不斷增加。目前，以 Nvidia 為代表的 GPU 廠商正在推出一系列面向人工智能的 GPU。這些 GPU 的價格高昂，單價甚至可以達到 3 萬美元以上。此外，GPU 的使用壽命也較短，需要不斷更新。</p><p>Writer:</p><ul><li><a href="https://medium.com/@louisby0123" target="_blank" rel="noopener">@louisby0123</a> - Googler. UC Berkeley EECS Master Student. System Architect &amp; Backend Engineer. President of 7th Mei-chu Hackathon, founder of Hackathon Taiwan Junior.</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 171 期 - 好想回到上禮拜五晚上</title>
    <link href="https://starbugs.dev/2023/04/04/171-want-to-back-to-the-last-friday-night/"/>
    <id>https://starbugs.dev/2023/04/04/171-want-to-back-to-the-last-friday-night/</id>
    <published>2023-04-04T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Payment-System-實戰系列（一）：工程師要先和老闆對話＆破除迷失"><a href="#Payment-System-實戰系列（一）：工程師要先和老闆對話＆破除迷失" class="headerlink" title="Payment System 實戰系列（一）：工程師要先和老闆對話＆破除迷失"></a><a href="https://medium.com/starbugs/payment-system-%E5%AF%A6%E6%88%B0%E7%B3%BB%E5%88%97-%E4%B8%80-%E5%B7%A5%E7%A8%8B%E5%B8%AB%E8%A6%81%E5%85%88%E5%92%8C%E8%80%81%E9%97%86%E5%B0%8D%E8%A9%B1-%E7%A0%B4%E9%99%A4%E8%BF%B7%E5%A4%B1-ca8f3394d137" target="_blank" rel="noopener">Payment System 實戰系列（一）：工程師要先和老闆對話＆破除迷失</a></h3><p>隨著 B2C 、 E-Commerce、OTT ……網路平台興起，在網站上、手機上完成付費作業，讓顧客可以直接取得供應商服務，幾乎是現在網路新創必碰的難題，筆者相信在讀文章的各位，也正面臨串接金流服務的痛苦 😭</p><p>於是本系列文章，<strong>會試著從業務端角度，試圖回推工程開發上</strong>，所需要具備的知識涵養與基本概念，然後帶領實作部分的串接細節，順便說說這些年踩過的大小雷，希望讓正要入手的工程師能更快、更穩掌握技術內涵。那事不宜遲，就從三部曲中的第一篇開始讀起吧！</p><h2 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h2><h3 id="加速-JavaScript-的生態系統：npm-Scripts"><a href="#加速-JavaScript-的生態系統：npm-Scripts" class="headerlink" title="加速 JavaScript 的生態系統：npm Scripts"></a><a href="https://javascriptweekly.com/link/137370/web" target="_blank" rel="noopener">加速 JavaScript 的生態系統：npm Scripts</a></h3><p>這是一系列關於提升 JavaScript 生態系統性能的有趣系列的最新作品。作者 Marvin 這樣解釋：</p><blockquote><p><code>npm scripts</code> 是 JavaScript 開發人員經常執行的。<br>儘管它們使用頻率很高，但它們沒有進行，而且增加了約 400 毫秒的開銷。<br>在本文中，我們將其降低到了約 22 毫秒。</p></blockquote><p>Marvin 在這裡所做的是所有開發人員都應該學習的一項寶貴技能。- from JS Weekly</p><h3 id="Playwright-v1-32-–-現在有-UI-模式了"><a href="#Playwright-v1-32-–-現在有-UI-模式了" class="headerlink" title="Playwright v1.32 – 現在有 UI 模式了"></a><a href="https://javascriptweekly.com/link/137372/web" target="_blank" rel="noopener">Playwright v1.32 – 現在有 UI 模式了</a></h3><p>這個熱門的 Web 測試和自動化框架正在向 Cypress 等，前端測試工具，提供更多的基礎建設。最新的「UI 模式」，讓你在 UI 環境中探索、運行和調試測試。<a href="https://javascriptweekly.com/link/137373/web" target="_blank" rel="noopener">▶️ 這個影片</a> 提供了一個很好的介紹。- from JS Weekly</p><h3 id="我們為什麼要添加對-Deno-中的-package-json-的支持"><a href="#我們為什麼要添加對-Deno-中的-package-json-的支持" class="headerlink" title="我們為什麼要添加對 Deno 中的 package.json 的支持"></a><a href="https://javascriptweekly.com/link/137374/web" target="_blank" rel="noopener">我們為什麼要添加對 Deno 中的 <code>package.json</code> 的支持</a></h3><p><a href="https://javascriptweekly.com/link/137375/web" target="_blank" rel="noopener">Deno 1.32</a> 已經發布，改進了 <code>package.json</code> 的支持和更多內容。Deno 與 Node.js 有一些相似之處，但直到最近，它還沒有專注於支持 npm 模塊等 Node 功能。但隨著 Node 和 npm 的兼容性開始改善，團隊面臨了關於運行時優先級的問題。Ryan Dahl 在這裡闡述了更多關於他們的思想。 - from JS Weekly</p><h2 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h2><h3 id="Defer-your-mutex-Unlocks"><a href="#Defer-your-mutex-Unlocks" class="headerlink" title="Defer your mutex Unlocks"></a><a href="https://www.ribice.ba/defer-mutex-unlocks/" target="_blank" rel="noopener">Defer your mutex Unlocks</a></h3><p>不得不說 Go 的 defer 真的是一個很好用的功能，除了避免不小心忘記釋放資源，如果 function 在執行的過程中意外發生了 panic，defer 還是會在正確的時間執行，所以不管在什麼情況下，只要是要釋放資源，都推薦使用 defer。</p><h3 id="Uber-Go-Style-Guide"><a href="#Uber-Go-Style-Guide" class="headerlink" title="Uber Go Style Guide"></a><a href="https://github.com/uber-go/guide/blob/master/style.md" target="_blank" rel="noopener">Uber Go Style Guide</a></h3><p>想知道大組織怎麼管理他們的程式碼風格嗎？這份文件是 Uber 在公司內實施的 Go guideline，透過這些規範可以讓他們避免一些常見的可讀性以及效能問題。</p><h3 id="SOLID-Principles-Explained-with-Golang-Examples"><a href="#SOLID-Principles-Explained-with-Golang-Examples" class="headerlink" title="SOLID Principles: Explained with Golang Examples"></a><a href="https://dev.to/ansu/solid-principles-explained-with-golang-examples-5eh" target="_blank" rel="noopener">SOLID Principles: Explained with Golang Examples</a></h3><p>SOLID 原則應該大家都聽過，但如果要應用到 Go 裡面，會有哪些地方需要注意呢？這篇文章舉了非常多例子，教你怎麼寫出 SOLID 的 Go 程式碼。為了在三個月後還看得懂自己寫的程式碼，當然要趕快學起來！</p><p>Writer:</p><ul><li><a href="https://medium.com/@louisby0123" target="_blank" rel="noopener">@louisby0123</a> - Googler. UC Berkeley EECS Master Student. System Architect &amp; Backend Engineer. President of 7th Mei-chu Hackathon, founder of Hackathon Taiwan Junior.</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Payment-System-實戰系列（一）：工程師要先和老闆對話＆破除迷失&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 170 期 - 哇～這碗麵裡面有加蛋耶！</title>
    <link href="https://starbugs.dev/2023/03/21/170-eggs-are-delicacy/"/>
    <id>https://starbugs.dev/2023/03/21/170-eggs-are-delicacy/</id>
    <published>2023-03-21T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="半路出家的軟體工程師英國求職分享（上）"><a href="#半路出家的軟體工程師英國求職分享（上）" class="headerlink" title="半路出家的軟體工程師英國求職分享（上）"></a><a href="https://medium.com/starbugs/702eaf750fdf" target="_blank" rel="noopener">半路出家的軟體工程師英國求職分享（上）</a></h3><p>本文作者 ukyen 是一個半路出家的軟體工程師。原本的職位是客戶支援工程師，雖然工作上有機會編寫一些簡單的腳本及工作站管理，但離純軟的工作還有一大段距離。出國工作一直是他的夢想，在這個大軟體時代，純軟的技能能大大增加出國的機會，所以就開始Python的自學之路。自學一段時間之後，開始嘗試投遞履歷英國、德國的軟體公司，但都因簽證關而係沒有下文。在2019年的時候，很幸運的抽中YMS Tier 5打工度假簽證，正式開啟出國求職的大門。</p><h3 id="半路出家的軟體工程師英國求職分享（下）"><a href="#半路出家的軟體工程師英國求職分享（下）" class="headerlink" title="半路出家的軟體工程師英國求職分享（下）"></a><a href="https://medium.com/starbugs/528a19888bad" target="_blank" rel="noopener">半路出家的軟體工程師英國求職分享（下）</a></h3><p>上篇敘述了大多數面試通用的流程，而這篇記錄著的是去面試每一家英國的公司的面試流程與經驗。文章的最後，作者 ukyen 經過工作一段時間後也順利的將工作簽證辦下來了，恭喜恭喜！</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="Introducing-react-dev"><a href="#Introducing-react-dev" class="headerlink" title="Introducing react.dev"></a><a href="https://react.dev/blog/2023/03/16/introducing-react-dev" target="_blank" rel="noopener">Introducing react.dev</a></h3><p>React 團隊籌備已久的新文件總算是上線了！新的文件裡面移除了舊文件中保留的 Class Component 的介紹，讓讀者可以直接從 Hooks 開始學習 React，且除了基本的介紹以外，還會有挑戰的區塊，讓你驗證理解內容是否正確，當然也不會少了漂亮的圖來幫助釐清難懂的部分！</p><h3 id="6-CSS-snippets-every-front-end-developer-should-know-in-2023"><a href="#6-CSS-snippets-every-front-end-developer-should-know-in-2023" class="headerlink" title="6 CSS snippets every front-end developer should know in 2023"></a><a href="https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/" target="_blank" rel="noopener">6 CSS snippets every front-end developer should know in 2023</a></h3><p>文章中提到了以下幾個 CSS 的用法，可以用更少的語法來達到一些特定的效果，文章裡除了 Demo 外，還有特別註記該用法的瀏覽器支援度：</p><ol><li>A container query</li><li>Scroll snap</li><li>Grid pile</li><li>Quick circle</li><li>Control variants with @layer</li><li>Memorize less and reach more with logical properties</li></ol><h3 id="Send-large-files-from-frontend-to-the-backend"><a href="#Send-large-files-from-frontend-to-the-backend" class="headerlink" title="Send large files from frontend to the backend"></a><a href="https://hsnice16.medium.com/send-large-files-from-frontend-to-the-backend-2f5f2414cc7c" target="_blank" rel="noopener">Send large files from frontend to the backend</a></h3><p>文章中介紹了前端工程師如何利用 JavaScript 的 FileReader，將大型檔案的內容切分小塊傳給後端。</p><h2 id="後端開發"><a href="#後端開發" class="headerlink" title="後端開發"></a>後端開發</h2><h3 id="自動升級更新執行中的-Docker-容器解決方案-watchtower"><a href="#自動升級更新執行中的-Docker-容器解決方案-watchtower" class="headerlink" title="自動升級更新執行中的 Docker 容器解決方案 - watchtower"></a><a href="https://blog.wu-boy.com/2023/02/automating-docker-container-base-image-updates-cht/" target="_blank" rel="noopener">自動升級更新執行中的 Docker 容器解決方案 - watchtower</a></h3><p>之前就有用過 watchtower 這個小工具，他會定期去幫你檢查 DockerHub（或其他 registry）是不是有新的 image 可以用，如果有的話他就會幫你拉下來重新啟動 container，所以他可以讓你的 container 隨時保持在最新的狀態。因此，我們可以用他來簡化部署流程：先把 watchtower 跑在你的 remote server 上，從此只要把新的 image 上傳到 registry 上，就會自動被部署到 production 上，真的很方便哦。</p><h3 id="淺談各種資料庫cache策略-cache-aside、read-through、write-through、write-back"><a href="#淺談各種資料庫cache策略-cache-aside、read-through、write-through、write-back" class="headerlink" title="淺談各種資料庫cache策略: cache aside、read through、write through、write back"></a><a href="https://homuchen.com/posts/databse-chache-strategies/" target="_blank" rel="noopener">淺談各種資料庫cache策略: cache aside、read through、write through、write back</a></h3><p>以前跟 cache 還不熟的時候，從來沒有想過後端的 cache 有這麼多種可能。這篇文章簡單介紹了 cache aside、read through、write through、write back 這四種策略，並且比較他們各自的優缺點（一致性、讀取效能、寫入效能等等），如果你已經用過 Redis/Memcached，想更深入了解他們在各種情境的使用方式，那這篇文章一定要看看！</p><h3 id="The-technology-behind-GitHub’s-new-code-search"><a href="#The-technology-behind-GitHub’s-new-code-search" class="headerlink" title="The technology behind GitHub’s new code search"></a><a href="https://github.blog/2023-02-06-the-technology-behind-githubs-new-code-search/" target="_blank" rel="noopener">The technology behind GitHub’s new code search</a></h3><p>這篇文章的技術含量滿高的，在講 Github 後端是怎麼是怎麼做 code search 的功能，因為他們儲存了非常大量的程式碼，所以必須用特別的方式去儲存，才能很快地把結果搜尋出來～</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><h3 id="How-to-build-test-and-deploy-your-application-using-Azure-and-GitHub"><a href="#How-to-build-test-and-deploy-your-application-using-Azure-and-GitHub" class="headerlink" title="How to build, test and deploy your application using Azure and GitHub"></a><a href="https://devblogs.microsoft.com/devops/how-to-build-test-and-deploy-your-application-using-azure-and-github/" target="_blank" rel="noopener">How to build, test and deploy your application using Azure and GitHub</a></h3><p>當你使用的 git repository 是 GitHub、雲服務用 Azure 且剛好是用 Go 語言的話可以看看這篇入門部署教學，豐富詳盡的圖文手把手部署教學保證可以快速上手。</p><h3 id="Linkerd-and-ingress-controllers-bringing-the-outside-world-in"><a href="#Linkerd-and-ingress-controllers-bringing-the-outside-world-in" class="headerlink" title="Linkerd and ingress controllers: bringing the outside world in"></a><a href="https://www.cncf.io/blog/2023/03/15/linkerd-and-ingress-controllers-bringing-the-outside-world-in/" target="_blank" rel="noopener">Linkerd and ingress controllers: bringing the outside world in</a></h3><p>Kubernetes Ingress 選擇繁多，為何 Linkerd 可以嶄露頭角呢？他帶來了無痛的 Service Mesh 使用體驗，但為了看到 client IP 我們還是得設定 <code>skip-incoming-ports</code> 不然就會看到 Linkerd 為連線的源頭。Linkerd 也會把封包送往 <code>Service</code> IP 而非 <code>Pod</code>，除非另外設定直接送往 <code>Pod</code> IP。文末也有提供 Linkerd 與其他受歡迎的 Ingress 工具比較，但不外乎都要設定的概念都大同小異。</p><h3 id="How-to-use-Kubernetes-events-for-effective-alerting-and-monitoring"><a href="#How-to-use-Kubernetes-events-for-effective-alerting-and-monitoring" class="headerlink" title="How to use Kubernetes events for effective alerting and monitoring"></a><a href="https://www.cncf.io/blog/2023/03/13/how-to-use-kubernetes-events-for-effective-alerting-and-monitoring/" target="_blank" rel="noopener">How to use Kubernetes events for effective alerting and monitoring</a></h3><p>Kubernetes <code>Events</code> 是常用但比較少探討的主題（就代表是直觀好用的設計），這些可以靠 Grafana agent + Loki 做監控，而 <code>Events</code> 常見的有：</p><ol><li>狀態改變：像是 <code>Pod</code> 有生成新的、pending、確定產生成功或失敗</li><li>設定改變：像是節點水平擴張、垂直擴張的增加記憶體或硬碟等等</li><li>調度：像是是否能夠下載容器 image、容器有沒有足夠的 cpu or memory 或容器 liveness or readiness 探針採樣失敗</li></ol><p>Events 的種類則有：</p><ol><li>失敗</li><li>驅逐</li><li>調度失敗</li><li>硬碟</li><li>節點</li></ol><p>Writer:</p><ul><li><a href="https://medium.com/@wucean" target="_blank" rel="noopener">@ukyen</a> - I like to share what I learned. I enjoy writing and believe it is the best way to preserve knowledge.</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;半路出家的軟體工程師英國求職分享（上）&quot;&gt;&lt;a href=&quot;#半路出家的軟體工程師英國求職分享（上）&quot;
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 169 期 - 大雨淅瀝瀝 淋得我心輕鬆</title>
    <link href="https://starbugs.dev/2023/03/07/169-rain/"/>
    <id>https://starbugs.dev/2023/03/07/169-rain/</id>
    <published>2023-03-07T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Microservices-start-Here-Chassis-Pattern"><a href="#Microservices-start-Here-Chassis-Pattern" class="headerlink" title="Microservices start Here: Chassis Pattern"></a><a href="https://medium.com/p/f1be783c522b" target="_blank" rel="noopener">Microservices start Here: Chassis Pattern</a></h3><p>如果你待的公司夠大，而且採用的是 microservice 架構，那整個公司的所有產品可能有上千個 microservice。如果這每個 microservice 專案在起步時都要一步一步把各種 config 跟 script 給建起來，那花費的時間一定是相當可觀。</p><p>為了解決這個問題，俊廷在本週的專欄中想要跟大家介紹 Chassis Pattern，也就是把常用的 toolset 做成一個 microservice template，當你要開一個新的 microservice 時，就直接拿來用就可以了～</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="CSS-Tips-for-Better-Web-Development"><a href="#CSS-Tips-for-Better-Web-Development" class="headerlink" title="CSS Tips for Better Web Development"></a><a href="https://www.builder.io/blog/css-tips-for-better-web-development" target="_blank" rel="noopener">CSS Tips for Better Web Development</a></h3><p>這篇文章列出一些 CSS 技巧，可以幫助開發者進一步優化網頁的設計和性能。以下是文章中提到的一些重點：</p><ol><li>使用 <code>scroll-snap</code> 來實作絲滑般的滑動輪播效果</li><li>使用 <code>position</code> 和 <code>grid</code> 處理網頁的 header 和 footer</li><li>利用 <code>position</code> 的 <code>sticky</code> 在捲軸時固定畫面中的某個區塊</li><li>透過 <code>backdrop-filter</code> 處理圖片的各種濾鏡</li><li>使用 <code>:before</code> 和 <code>:after</code> 的組合，或是 <code>clip-path</code> 裁切元素的任何形狀</li></ol><h3 id="Scroll-Animation"><a href="#Scroll-Animation" class="headerlink" title="Scroll Animation"></a><a href="https://css-tricks.com/books/greatest-css-tricks/scroll-animation/" target="_blank" rel="noopener">Scroll Animation</a></h3><p>本文講解了如何只用一個 JavaScript 的語法來提供當前頁面捲動的百分比，就能透過 CSS 實現隨著捲軸移動產生的動畫效果。一開先介紹如何通過 JavaScript 來設置 CSS 自定義屬性 <code>--scroll</code>，並且將這個值用於 CSS 中。接著展示如何使用 <code>animation-delay</code> 來實現圖像的旋轉，並通過調整 CSS 中的動畫延遲來實現基於捲動位置的動畫效果。最後也提供了一個範例，示範在 <code>:root</code> 中設置 <code>animation-delay</code> 屬性，控制頁面上的所有動畫。</p><h3 id="Debugging-JavaScript-Like-a-Pro-Tools-and-Techniques-for-Finding-and-Fixing-Bugs"><a href="#Debugging-JavaScript-Like-a-Pro-Tools-and-Techniques-for-Finding-and-Fixing-Bugs" class="headerlink" title="Debugging JavaScript Like a Pro: Tools and Techniques for Finding and Fixing Bugs"></a><a href="https://dev.to/iayeshasahar/debugging-javascript-like-a-pro-tools-and-techniques-for-finding-and-fixing-bugs-2lf5" target="_blank" rel="noopener">Debugging JavaScript Like a Pro: Tools and Techniques for Finding and Fixing Bugs</a></h3><p>在文章裡提供了一些 JavaScript 的除錯工具和技巧，幫助開發者更快地找到和修復錯誤。作者分享的技巧和工具包括了瀏覽器開發者工具、console.log、debugger、linting 和單元測試等。除此之外還提到了常見的 JavaScript 錯誤，像是變數作用域、非同步問題等等，也提供解決這些問題的對應技巧。</p><h2 id="Database"><a href="#Database" class="headerlink" title="Database"></a>Database</h2><h3 id="淺談-Database-Partition-Centralized-and-Distributed"><a href="#淺談-Database-Partition-Centralized-and-Distributed" class="headerlink" title="淺談 Database Partition. Centralized and Distributed."></a><a href="https://homuchen.com/posts/what-is-database-partition-sharding/" target="_blank" rel="noopener">淺談 Database Partition. Centralized and Distributed.</a></h3><p>不得不說資料庫這領域真的是有很多學問，好幾年前我對資料庫還不太了解時，一直以為 sharding 跟 replication 是一樣的東西，反正就是開好幾台 DB instance 共同存放那些資料嘛XD。是後來慢慢深入了解後才知道兩個在概念上是完全不同的，如果你對 sharding、replication、partition 這些名詞還有點模糊的話，這篇文章解釋得很好哦～</p><h3 id="Database-一代代的演化和傳承"><a href="#Database-一代代的演化和傳承" class="headerlink" title="Database 一代代的演化和傳承"></a><a href="https://tachunwu.github.io/posts/db-history/" target="_blank" rel="noopener">Database 一代代的演化和傳承</a></h3><p>早在電腦發明以前，就已經有儲存資料的需求，因此關於資料庫的理論從好幾十年前就開始有了。如果你對資料庫的演進有興趣的話，這篇文章會從 1980 年代的資料庫開始介紹起，一直講到近幾年比較新的資料庫，讓你知道每個時代的資料庫系統想要解決什麼問題，以及又有什麼相對應的優缺點。</p><h3 id="Is-offset-pagination-dead-Why-cursor-pagination-is-taking-over"><a href="#Is-offset-pagination-dead-Why-cursor-pagination-is-taking-over" class="headerlink" title="Is offset pagination dead? Why cursor pagination is taking over"></a><a href="https://uxdesign.cc/why-facebook-says-cursor-pagination-is-the-greatest-d6b98d86b6c0" target="_blank" rel="noopener">Is offset pagination dead? Why cursor pagination is taking over</a></h3><p>如果你有在後端實作過分頁功能，那你應該會知道有分成 offset based 跟 cursor based 兩種做法，這兩種做法各有他們的優缺點，如果你跟他們還不太熟悉的話，這篇文章有各種示意圖跟圖表，保證你看完就懂哦（這篇文真的寫得很好，但他是 member-only 的文章，所以可譨會需要開無痕模式來讀）</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><h3 id="How-Spotify-Adopted-and-Outsourced-Its-Platform-Mindset"><a href="#How-Spotify-Adopted-and-Outsourced-Its-Platform-Mindset" class="headerlink" title="How Spotify Adopted and Outsourced Its Platform Mindset"></a><a href="https://thenewstack.io/how-spotlify-adopted-platform-engineering-culture/" target="_blank" rel="noopener">How Spotify Adopted and Outsourced Its Platform Mindset</a></h3><p>Spotify 的 Platform Mission 團隊把全公司 6000 工程師連結起來合作更有效率，讓新員工更上軌道的資料、文件和工具其實都不是 Platform Mission 團隊創造的，都是輔助其他部門撰寫，行銷團隊也會行銷內部工具促成團隊之間的合作。也有關於每位員工的職責是什麼的文件好讓跨團隊合作，甚至也有內部的使用者體驗調查。</p><h3 id="The-Broker-Pattern-amp-how-it-works"><a href="#The-Broker-Pattern-amp-how-it-works" class="headerlink" title="The Broker Pattern &amp; how it works"></a><a href="https://blog.devgenius.io/clean-architecture-s-broker-pattern-10bc08f57753" target="_blank" rel="noopener">The Broker Pattern &amp; how it works</a></h3><p>一個大型架構勢必會有 borker 的存在，此篇撰寫了 borker 介紹、使用時機、功能和優缺點。基本上 borker 在現在架構中扮演重要的角色，可以讓 client 和 server 之間做解藕，減少依賴性，增加擴充性。</p><h3 id="Introducing-Patcher-a-new-tool-for-keeping-infrastructure-code-up-to-date"><a href="#Introducing-Patcher-a-new-tool-for-keeping-infrastructure-code-up-to-date" class="headerlink" title="Introducing Patcher, a new tool for keeping infrastructure code up-to-date!"></a><a href="https://medium.com/gruntwork/introducing-patcher-a-new-tool-for-keeping-infrastructure-code-up-to-date-e65b0c203b6b" target="_blank" rel="noopener">Introducing Patcher, a new tool for keeping infrastructure code up-to-date!</a></h3><p>IaC 使用套件的管理是鮮少人探討的，例如 Terraform 使用的 modules，而 Gruntwork Patcher 會幫忙查找是否有新使用的套件版本後決定是否更新，之後使用者可以審視變更並且部署。</p><p>Writer:</p><ul><li><a href="https://lazypro.medium.com/" target="_blank" rel="noopener">@lazypro</a> - 從 embedded 到 kernel，從 device 上雲端，程式無涯、無法靠岸，軟體的求道者。</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Microservices-start-Here-Chassis-Pattern&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 168 期 - 浪漫哪天突然間變成苦澀的 Bug</title>
    <link href="https://starbugs.dev/2023/02/21/168-romance-suddenly-turned-into-bitter-bug/"/>
    <id>https://starbugs.dev/2023/02/21/168-romance-suddenly-turned-into-bitter-bug/</id>
    <published>2023-02-21T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Render-來試試用來取代-Heroku-的服務吧-Render-的網路服務部署介紹！"><a href="#Render-來試試用來取代-Heroku-的服務吧-Render-的網路服務部署介紹！" class="headerlink" title="Render | 來試試用來取代 Heroku 的服務吧 - Render 的網路服務部署介紹！"></a><a href="https://medium.com/starbugs/render-%E4%BE%86%E8%A9%A6%E8%A9%A6%E7%94%A8%E4%BE%86%E5%8F%96%E4%BB%A3-heroku-%E7%9A%84%E6%9C%8D%E5%8B%99%E5%90%A7-render-%E7%9A%84%E7%B6%B2%E8%B7%AF%E6%9C%8D%E5%8B%99%E9%83%A8%E7%BD%B2%E4%BB%8B%E7%B4%B9-b728e86d5716" target="_blank" rel="noopener">Render | 來試試用來取代 Heroku 的服務吧 - Render 的網路服務部署介紹！</a></h3><h3 id="cyclic-來試試用來取代-Heroku-的服務吧-cyclic-的網路服務部署介紹！"><a href="#cyclic-來試試用來取代-Heroku-的服務吧-cyclic-的網路服務部署介紹！" class="headerlink" title="cyclic | 來試試用來取代 Heroku 的服務吧 - cyclic 的網路服務部署介紹！"></a><a href="https://medium.com/starbugs/cyclic-%E4%BE%86%E8%A9%A6%E8%A9%A6%E7%94%A8%E4%BE%86%E5%8F%96%E4%BB%A3-heroku-%E7%9A%84%E6%9C%8D%E5%8B%99%E5%90%A7-cyclic-%E7%9A%84%E7%B6%B2%E8%B7%AF%E6%9C%8D%E5%8B%99%E9%83%A8%E7%BD%B2%E4%BB%8B%E7%B4%B9-97ecc57f39e6" target="_blank" rel="noopener">cyclic | 來試試用來取代 Heroku 的服務吧 - cyclic 的網路服務部署介紹！</a></h3><p>Hi！大家好，我是神 Q 超人！相信有許多人在去年 2022 <a href="https://www.heroku.com/" target="_blank" rel="noopener">Heroku</a> 說要取消免費計劃的同時，就開始尋覓下個能夠繼續免費使用的平台 😂。就我來說畢竟也是有一些食之無味，棄之可惜的作品服務在那上面放著，而它們也都在免費計畫結束後就都掛了，像變心的女朋友一樣，不論給什麼 request 永遠等不到 response 回來。</p><p>如果各位也有遇到相同的問題，就來看看本週的「來試試用來取代 Heroku 的服務吧！」系列的兩篇文章吧！如果時間不多的話也可以直接到文章下方，都有關於該服務的優缺點懶人包唷！</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><!-- summary --><h3 id="Moving-Backgrounds"><a href="#Moving-Backgrounds" class="headerlink" title="Moving Backgrounds"></a><a href="https://css-tricks.com/moving-backgrounds/" target="_blank" rel="noopener">Moving Backgrounds</a></h3><p>相信各位平常在逛一些購物網站的時候，都會有一些產品的圖片可以看，且當你滑鼠移到圖片上面時，還可以根據目前滑鼠在的位置局部放大圖片，並且根據滑鼠移動改變放大的位置，這篇文章就是要來聊聊該如何實現這件事情！</p><!-- summary --><h3 id="Use-Maps-more-and-Objects-less"><a href="#Use-Maps-more-and-Objects-less" class="headerlink" title="Use Maps more and Objects less"></a><a href="https://www.builder.io/blog/maps" target="_blank" rel="noopener">Use Maps more and Objects less</a></h3><p>在 JavaScript 裡面，我們可以輕鬆的用 Object 來做到 key 和 value 的對照，但是即使這個方法很容易做到，也不代表你得這麼做。文章中介紹了 Map，可以在你需要操作類似 key 和 value 的對照時使用，並且從效能、使用限制、用 for 讀 key、內置排序等等許多面向探討 Map 與 Object 的不同。</p><h3 id="Advanced-TypeScript"><a href="#Advanced-TypeScript" class="headerlink" title="Advanced TypeScript"></a><a href="https://angularexperts.io/blog/advanced-typescript" target="_blank" rel="noopener">Advanced TypeScript</a></h3><p>TypeScript 讓身為動態型別的 JavaScript 擁有更嚴禁的型別設定，但是該如何靈活定義這些型別也是需要一番功夫的。這篇文章就介紹了以下幾種設置以及限制型別的方式：</p><ul><li>Union and intersection types</li><li>Keyof</li><li>Typeof</li><li>Conditional types</li><li>Utility types</li><li>Infer type</li><li>Mapped types</li></ul><p>每一種方式都有給出範例的程式碼，並在程式碼中用註解來表示型別帶來的限制。</p><h2 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h2><h3 id="把-Github-Issue-當成資料庫來用"><a href="#把-Github-Issue-當成資料庫來用" class="headerlink" title="把 Github Issue 當成資料庫來用"></a><a href="https://www.evanlin.com/go-github-issue/" target="_blank" rel="noopener">把 Github Issue 當成資料庫來用</a></h3><p>想要自己寫一個 Go Application 但又不想花錢租資料庫嗎？這邊提供一個把 Github Issue 拿來當資料庫的方法。只要你的流量不高，對於 DB read/write  的速度也不要太計較，那真的可以用 Github Issue 來當資料庫XD。</p><h3 id="Go-1-20-in-a-nutshell"><a href="#Go-1-20-in-a-nutshell" class="headerlink" title="Go 1.20 in a nutshell"></a><a href="https://appliedgo.com/blog/go-1-20-in-a-nutshell" target="_blank" rel="noopener">Go 1.20 in a nutshell</a></h3><p>前幾週有分享一篇文章講 Go 1.20 有哪些新 feature，但那篇文章比較長，如果你懶得看太多細節，只想看懶人包了解一下 Go 1.20 的話XD，那可以看看這篇文章～</p><h3 id="Go-1-20-Experiment-Memory-Arenas-vs-Traditional-Memory-Management"><a href="#Go-1-20-Experiment-Memory-Arenas-vs-Traditional-Memory-Management" class="headerlink" title="Go 1.20 Experiment: Memory Arenas vs Traditional Memory Management"></a><a href="https://pyroscope.io/blog/go-1-20-memory-arenas/" target="_blank" rel="noopener">Go 1.20 Experiment: Memory Arenas vs Traditional Memory Management</a></h3><p>Go 在 1.20 推出的實驗性 feature - Memory Arenas 究竟能不能幫我們改善記憶體管理以及 GC 的效率呢？如果懶得自己研究的話，那我們來看看別人研究完的結果。結論是 Memory Arenas 在某些極端的情況下，確實可以幫你減少很多 overhead，但因為 Memory Arenas 仍然是實驗性的功能，如果要用在 Production 上的話還是要自己評估看看。</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><!-- summary --><h3 id="Back-to-Basics-Installing-NGINX-Open-Source-and-NGINX-Plus"><a href="#Back-to-Basics-Installing-NGINX-Open-Source-and-NGINX-Plus" class="headerlink" title="Back to Basics: Installing NGINX Open Source and NGINX Plus"></a><a href="https://www.nginx.com/blog/back-to-basics-installing-nginx-open-source-and-nginx-plus/" target="_blank" rel="noopener">Back to Basics: Installing NGINX Open Source and NGINX Plus</a></h3><p>想必不少人對 Nginx 的設定依舊一知半解，官方提供的基礎影片以有結構的方式介紹 Nginx 本身與使用，是時候重溫基本功了。除了 open source 版本，也順便介紹 Nginx Plus 的付費版本。</p><!-- summary --><h3 id="How-do-you-gracefully-shut-down-pods-in-kubernetes"><a href="#How-do-you-gracefully-shut-down-pods-in-kubernetes" class="headerlink" title="How do you gracefully shut down pods in kubernetes"></a><a href="https://itnext.io/how-do-you-gracefully-shut-down-pods-in-kubernetes-fb19f617cd67" target="_blank" rel="noopener">How do you gracefully shut down pods in kubernetes</a></h3><p>當你從 terminal 裡下達 kubectl delete pod 時會發生什麼事？發出 request 到 kube-apiserver 後移除 etcd 裡 IP 和 port 的網路資訊，etcd 再通知 CoreDNS、kube-proxy 或 Nginx-ingress 等等也要移除網路資訊。之後節點上的 kubelet 也會收到刪除 pod 的通知開始動作，會先看 preStop 、SIGTERM 最後才強制使用 SIGKILL。</p><h3 id="Secrets-Management"><a href="#Secrets-Management" class="headerlink" title="Secrets Management"></a><a href="https://dzone.com/articles/secrets-management-1" target="_blank" rel="noopener">Secrets Management</a></h3><p>密碼管理永遠是令人頭痛的點，此篇介紹一些該注意的點，不論是生產、測試、內部環境甚至服務本身以及 DevOps 相關的工具全部建議要有 RBAC、使用專門的密碼軟體和時常更新密碼，而且一個密碼軟體不太可能支援所有使用情境，所以選用正確的密碼軟體對應適當的情境。</p><p>Writer:</p><ul><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Render-來試試用來取代-Heroku-的服務吧-Render-的網路服務部署介紹！&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 167 期 - 元宵節過後，變成一顆間諜氣球了！</title>
    <link href="https://starbugs.dev/2023/02/07/167-become-spy-balloon-after-lantern-festivel/"/>
    <id>https://starbugs.dev/2023/02/07/167-become-spy-balloon-after-lantern-festivel/</id>
    <published>2023-02-07T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Goroutine-的併發治理：掌握生命週期"><a href="#Goroutine-的併發治理：掌握生命週期" class="headerlink" title="Goroutine 的併發治理：掌握生命週期"></a><a href="https://ken00535.medium.com/concurrency-of-go-goroutine-lifetime-8d43e365ba69" target="_blank" rel="noopener">Goroutine 的併發治理：掌握生命週期</a></h3><p>「Goroutine 的併發治理」系列又有新文章了！在這禮拜的專欄中，Ken 會帶大家看一些底層的程式碼來了解 Goroutine 的生命週期，並且提供一些管理 Goroutine 的方法。把握住這些方法，不只可以把程式碼寫得漂亮，也不會在奇怪的地方發生 Goroutine Leak 導致 Out Of Memory。</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="High-Definition-CSS-Color-Guide"><a href="#High-Definition-CSS-Color-Guide" class="headerlink" title="High Definition CSS Color Guide"></a><a href="https://developer.chrome.com/articles/high-definition-css-color-guide/" target="_blank" rel="noopener">High Definition CSS Color Guide</a></h3><p>先說文長注意。CSS color 4 帶來了許多用來管理和處理顏色的工具，作者它寫了一篇指南涵蓋了這些新的功能。在指南中會學習到以下幾點：</p><ul><li>什麼是色域？</li><li>人類的視覺範圍。</li><li>什麼是色彩空間？</li><li>如何使用更多顏色、新空間和嘗試結果。</li><li>回顧典型的色彩空間。</li><li>認識新的 Web 色彩空間。</li><li>加權平均顏色。</li><li>Gamut clamping（不知道怎麼翻 🥲）</li><li>選擇色彩空間。</li><li>轉換到 HD CSS 顏色。</li><li>檢查色域和色彩空間支持。</li><li>使用 Chrome DevTools 嘗試顏色。</li></ul><h3 id="Why-React-isn’t-dying"><a href="#Why-React-isn’t-dying" class="headerlink" title="Why React isn’t dying"></a><a href="https://tkdodo.eu/blog/why-react-isnt-dying" target="_blank" rel="noopener">Why React isn’t dying</a></h3><p>文章中作者談論為何現在推特上正出現一些關於 React 正在枯萎，或是其他 Framework 比 React 更好的討論，其實比起文章我更喜歡第一則留言說，如果你不能放棄 100% 的向下相容，那你就會慢慢失去動力，這就是大家認為 React 已死的原因（遠望 Vue3）。</p><h3 id="You’ve-Got-Options-for-Removing-Event-Listeners"><a href="#You’ve-Got-Options-for-Removing-Event-Listeners" class="headerlink" title="You’ve Got Options for Removing Event Listeners"></a><a href="https://www.macarthur.me/posts/options-for-removing-event-listeners" target="_blank" rel="noopener">You’ve Got Options for Removing Event Listeners</a></h3><p>相信大家看到標題都直覺的想到了可以用 <code>removeEventListener</code> 來移除監聽的事件，但除此之外，文章裡還介紹了其他 3 種方法：</p><ul><li>使用 <code>addEventListener</code> 的第三個參數可以設置 once options。</li><li>複製和替換整個節點。</li><li>使用 <code>AbortController</code> 可修改複數的監聽事件。</li></ul><p>文末也有以上 4 種方式的選擇時機，大家可以參考看看！</p><h2 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h2><h3 id="Designing-Go-Libraries-The-Talk-The-Article"><a href="#Designing-Go-Libraries-The-Talk-The-Article" class="headerlink" title="Designing Go Libraries: The Talk: The Article"></a><a href="https://abhinavg.net/2022/12/06/designing-go-libraries/" target="_blank" rel="noopener">Designing Go Libraries: The Talk: The Article</a></h3><p>如果你想要實作一個 Go library，不管是開源給外部使用者，還是作為內部 library 給公司專案用，這篇文章都很值得一讀。在這篇文章中有非常多的 case study，雖然文章很長，但讀完之後一定可以讓你設計出更好的 library。</p><h3 id="What’s-New-in-Go-1-20"><a href="#What’s-New-in-Go-1-20" class="headerlink" title="What’s New in Go 1.20"></a><a href="https://blog.carlmjohnson.net/post/2023/golang-120-arenas-errors-responsecontroller/" target="_blank" rel="noopener">What’s New in Go 1.20</a></h3><p>Go 在今年的 2/1 發佈了新版本 1.20，在 Generic、Memory Management、Error Handling 等等方面都有一些改進，如果你跟我一樣是 Go 的粉絲，那麼一定不要錯過這次的更新！</p><h3 id="Writing-Clean-and-Efficient-Table-Driven-Unit-Tests-in-Go"><a href="#Writing-Clean-and-Efficient-Table-Driven-Unit-Tests-in-Go" class="headerlink" title="Writing Clean and Efficient Table-Driven Unit Tests in Go"></a><a href="https://semaphoreci.com/blog/table-driven-unit-tests-go" target="_blank" rel="noopener">Writing Clean and Efficient Table-Driven Unit Tests in Go</a></h3><p>大家都知道要寫測試，但要怎麼把測試寫漂亮呢？這篇文章介紹了 Table-Driven 這種撰寫測試的方式，並且教你怎麼寫出乾淨高效能的測試，如果你從來沒聽過 Table-Driven test 的話，這篇文章短短的而已可以簡單看一下～</p><p>Writer:</p><ul><li><a href="https://ken00535.medium.com/" target="_blank" rel="noopener">@Ken</a> - 興趣是符號學的軟體開發者，喜歡探索事物的本質，偶爾會寫點東西。</li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Goroutine-的併發治理：掌握生命週期&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 166 期 - 好運、幸福通通兔 You</title>
    <link href="https://starbugs.dev/2023/01/24/166-happy-new-year-good-luck-to-you/"/>
    <id>https://starbugs.dev/2023/01/24/166-happy-new-year-good-luck-to-you/</id>
    <published>2023-01-24T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Explaining-Pagination-in-ElasticSearch"><a href="#Explaining-Pagination-in-ElasticSearch" class="headerlink" title="Explaining Pagination in ElasticSearch"></a><a href="https://medium.com/starbugs/explaining-pagination-in-elasticsearch-3ac59656fdd2" target="_blank" rel="noopener">Explaining Pagination in ElasticSearch</a></h3><p>大家好，這週的專欄是 Starbugs Writers 吳俊廷 所分享的 「Explaining Pagination in ElasticSearch」</p><p>Pagination (分頁) 是網頁呈現資料時很常見的技術，因為當需要從後端返回的資料有很多時，他可以減輕後端的負擔，同時改善使用者體驗，文章中跟大家分享三種分頁技術 (Offset, Keyset, Cursor-based) 的實作細節與其優點及缺點；並且闡述如何使用 ElasticSearch 來達成三種分頁技術實作，那麼在實作時該選擇哪一個比較合適呢？相信看完這週專欄文章你的心裡就會有答案了！</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="A-cure-for-React-useState-hell"><a href="#A-cure-for-React-useState-hell" class="headerlink" title="A cure for React useState hell?"></a><a href="https://dev.to/builderio/a-cure-for-react-usestate-hell-1ldi" target="_blank" rel="noopener">A cure for React useState hell?</a></h3><p>在 React 裡面，如果要為 component 定義自身的狀態，通常都會直接使用 <code>useState</code>，但如果 state 裡面是保管著物件狀態的話，那在使用 <code>set*</code> 的時候就特別注意要使全新的物件，如果物件裡有許多欄位，那每次更新時都得要注意這件事情。而文章中提到了可以使用 <code>useReducer</code> 改善操作資料的複雜度，也可以在同個地方驗證是否要更新狀態。</p><h3 id="Applying-SOLID-principles-to-TypeScript"><a href="#Applying-SOLID-principles-to-TypeScript" class="headerlink" title="Applying SOLID principles to TypeScript"></a><a href="https://blog.logrocket.com/applying-solid-principles-typescript/" target="_blank" rel="noopener">Applying SOLID principles to TypeScript</a></h3><p>SOLID 原則分別是：</p><ol><li>強調一個類只負責一件事的單一責任</li><li>程式碼應該對擴展開放，但對修改封閉的開放封閉</li><li>子類別要遵從父類別設計的里氏替換</li><li>類別應該只實現它所需要的介面的介面隔離</li><li>用抽象介面解除高低層次模組間依賴關係的依賴反轉</li></ol><p>SOLID 是為了提高物件導向設計的可讀性，適應性，可擴展性和可維護性。文章裡使用 TypeScript 作為範例，說明如何將這幾個原則應用到 TypeScript 中。</p><h3 id="A-Complete-Guide-to-CSS-Grid"><a href="#A-Complete-Guide-to-CSS-Grid" class="headerlink" title="A Complete Guide to CSS Grid"></a><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">A Complete Guide to CSS Grid</a></h3><p>我知道你可能看過超過 100 篇在介紹關於如何使用 CSS 的 Grid 的文章，如果你沒有？那沒關係，我也是，但至少 10 篇應該也差不多了，但這篇關於 Grid 的推薦文章應該可以被稱作 Grid 百科，在文章中不只介紹基本用法、Gird 的一些專有名詞和屬性外，還包含程式碼、圖片和超過 60 篇的額外閱讀、6 篇影片和 9 個其他資源，建議存下來，然後可以拿來做前端外交，反正這大概是有生之年系列自己看也看不完。</p><h2 id="後端開發"><a href="#後端開發" class="headerlink" title="後端開發"></a>後端開發</h2><h3 id="更好的選擇？用-JWT-取代-Session-的風險"><a href="#更好的選擇？用-JWT-取代-Session-的風險" class="headerlink" title="更好的選擇？用 JWT 取代 Session 的風險"></a><a href="https://blog.kenwsc.com/posts/2023/jwt-vs-session/" target="_blank" rel="noopener">更好的選擇？用 JWT 取代 Session 的風險</a></h3><p>這篇是我們 Writer Ken 寫的文章，但我是看完才發現是他寫的XD。近年來很多 Web 應用開始用 JSON Web Token(JWT) 來驗證使用者身份，雖然使用 JWT 可以讓 API Server 更接近 Stateless，但並不是完全沒有缺點的，如果還不是很了解 JWT 跟傳統 session 的差異，這篇文章解釋得很不錯</p><h3 id="How-to-Create-a-Public-Notion-Integration-Using-Python"><a href="#How-to-Create-a-Public-Notion-Integration-Using-Python" class="headerlink" title="How to Create a Public Notion Integration Using Python"></a><a href="https://link.medium.com/gxOfVbyIcub" target="_blank" rel="noopener">How to Create a Public Notion Integration Using Python</a></h3><p>最近使用 Notion 的公司好像越來越多了，如果你想要自己寫一個 Notion plugin 並且開放給大家使用，那這邊有一篇圖文並茂的教學。雖然這篇是用 Python 來寫，但概念懂了之後，不管用什麼語言來寫都沒有問題啦</p><h3 id="Discord-如何處理一天數億的訊息"><a href="#Discord-如何處理一天數億的訊息" class="headerlink" title="Discord 如何處理一天數億的訊息"></a><a href="https://tachunwu.github.io/posts/discord-cassandra/" target="_blank" rel="noopener">Discord 如何處理一天數億的訊息</a></h3><p>Discord 之前有寫過一篇文章講他們是怎麼每天處理一天好幾億則的訊息、以及儲存總共數十億則的訊息，而這篇文章把原文經過翻譯、總結，如果想間單了解一下 Discord 是怎麼做到的，那可以花個 5 - 10 分鐘看看這篇文章～</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><h3 id="Multi-cluster-management-for-Kubernetes-with-Cluster-API-and-Argo-CD"><a href="#Multi-cluster-management-for-Kubernetes-with-Cluster-API-and-Argo-CD" class="headerlink" title="Multi-cluster management for Kubernetes with Cluster API and Argo CD"></a><a href="https://aws.amazon.com/blogs/containers/multi-cluster-management-for-kubernetes-with-cluster-api-and-argo-cd/" target="_blank" rel="noopener">Multi-cluster management for Kubernetes with Cluster API and Argo CD</a></h3><p>Cluster API 是個專門用來管理多種 Kubernetes 叢集的 CNCF 專案，而本篇介紹使用 Cluster API 和 Argo CD 管理多個 Kubernetes 叢集，示範的架構為在本機 Docker 裡建立 Kind 後安裝 Cluster API 和 Argo CD，並由它們管理背後多個 Kubernetes 叢集。裡面解釋了 AWS IAM 是怎麼授權、CNI 安裝情況以及最後部署簡單的 app。</p><h3 id="Why-Managing-WAFs-at-Scale-Requires-Centralized-Visibility-and-Configuration-Management"><a href="#Why-Managing-WAFs-at-Scale-Requires-Centralized-Visibility-and-Configuration-Management" class="headerlink" title="Why Managing WAFs at Scale Requires Centralized Visibility and Configuration Management"></a><a href="https://www.nginx.com/blog/why-managing-wafs-at-scale-requires-centralized-visibility-and-configuration-management/" target="_blank" rel="noopener">Why Managing WAFs at Scale Requires Centralized Visibility and Configuration Management</a></h3><p>現在越來越多企業等級的資訊團隊需要集中化式的 Web Application Firewall（WAF）管理監控工具，而 F5 NGINX Management Suite 可以快速以視覺化的方式排查分析，例如最嚴重的攻擊方式、機器人攻擊程度、使用的工具、被攻擊的機器或 CVEs 等等，除了分析外也可以快速集中式的部署新的 Policy 來阻擋攻擊。</p><h3 id="Source-Code-Management-Best-Practices"><a href="#Source-Code-Management-Best-Practices" class="headerlink" title="Source Code Management Best Practices"></a><a href="https://devops.com/source-code-management-best-practices/" target="_blank" rel="noopener">Source Code Management Best Practices</a></h3><p>Source Code Management（SCM）已經是老生常談了，但還是再談一次最佳實踐給大家溫習。</p><ul><li>多 commit</li><li>確保 repository 都是最新的</li><li>詳細寫 commit message</li><li>在 commit 之前先好好審視所有變更</li><li>自動化 workflow 要設計好：前贅字要用 <code>feat</code> 或 <code>fix</code> 等等、使用者權限控管、誰有權限放行可以合併 commit</li><li>資安的設計也不能馬乎：基本的使用者權限、視覺化呈現使用者活躍紀錄、災難復原計畫等等</li></ul><p>Writer:</p><ul><li><a href="https://lazypro.medium.com/" target="_blank" rel="noopener">Chunting Wu</a> - Architect at SHOPLINE. Experienced in system design, backend development, and embedded systems.<br>Sponsor me if you like: <a href="https://www.buymeacoffee.com/MfGjSk6" target="_blank" rel="noopener">https://www.buymeacoffee.com/MfGjSk6</a></li></ul><p>Maintainers:</p><ul><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Explaining-Pagination-in-ElasticSearch&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 165 期 - 上週沒見到我們是不是覺得哪裡怪怪的</title>
    <link href="https://starbugs.dev/2023/01/10/165-is-it-strange-not-seeing-us-last-week/"/>
    <id>https://starbugs.dev/2023/01/10/165-is-it-strange-not-seeing-us-last-week/</id>
    <published>2023-01-10T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Goroutine-的併發治理：管理-Worker-Pool"><a href="#Goroutine-的併發治理：管理-Worker-Pool" class="headerlink" title="Goroutine 的併發治理：管理 Worker Pool"></a><a href="https://medium.com/starbugs/concurrency-of-go-worker-pool-3fe82a670669" target="_blank" rel="noopener">Goroutine 的併發治理：管理 Worker Pool</a></h3><p>對 Goroutine 有研究的話，應該都知道他是 user level thread 所以調度起來非常輕量，但即便如此，如果 Goroutine 的數量太多還是會影響到效能。因此本週的專欄中，Ken 想跟大家分享怎麼從頭開始建立 Worker Pool 來減少 Goroutine 配置與回收的成本，而且還認真做了 benchmark 來驗證有沒有效能上的提升，最後當然是有，不然可能就沒有這篇文章了XD。</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="Ditch-the-div-Tag-Use-These-HTML-Tags-Instead"><a href="#Ditch-the-div-Tag-Use-These-HTML-Tags-Instead" class="headerlink" title="Ditch the div Tag: Use These HTML Tags Instead"></a><a href="https://dev.to/arafat4693/ditch-the-div-tag-use-these-tags-instead-2a3c" target="_blank" rel="noopener">Ditch the div Tag: Use These HTML Tags Instead</a></h3><p>雖然 div 在 HTML 中超級萬用，可以劃分頁面中的任何區塊，但是如果在 HTML 裡面有其他標籤能夠為你提供更好的語義時，何不考慮看看呢？但是要記得！這並不是要你放棄或是不使用 div 哦！而是在適當的時候使用對的標籤，就像在對的人要在對的時間遇見一樣。</p><h3 id="Understanding-neumorphism-in-CSS"><a href="#Understanding-neumorphism-in-CSS" class="headerlink" title="Understanding neumorphism in CSS"></a><a href="https://blog.logrocket.com/understanding-neumorphism-css/" target="_blank" rel="noopener">Understanding neumorphism in CSS</a></h3><p>Neumorphism 是一種設計風格，該風格會讓網頁中的物件看起來像是真實世界的 3D 物體，而這篇文章不只說明如何用 CSS 實踐 Neumorphism，也在最後提到了 Neumorphism 對無障礙網頁的影響。</p><h3 id="Getting-Started-With-Vite"><a href="#Getting-Started-With-Vite" class="headerlink" title="Getting Started With Vite"></a><a href="https://blog.openreplay.com/getting-started-with-vite/" target="_blank" rel="noopener">Getting Started With Vite</a></h3><p>這篇文章介紹了如何用 Vite 建立一個 Vue 的專案，並處理了像是圖片的靜態資源，也將專案打包部署上 <a href="https://www.netlify.com/" target="_blank" rel="noopener">netlify</a>，如果還沒有碰過 Vite，但又想試試看的話可以跟著文章一起做，整個過程大概只需要十分鐘左右！</p><h2 id="軟體工程"><a href="#軟體工程" class="headerlink" title="軟體工程"></a>軟體工程</h2><h3 id="至-2022-為止個人的軟體技術觀察"><a href="#至-2022-為止個人的軟體技術觀察" class="headerlink" title="至 2022 為止個人的軟體技術觀察"></a><a href="https://blog.taiwolskit.com/2022-software-technology-development-observation" target="_blank" rel="noopener">至 2022 為止個人的軟體技術觀察</a></h3><p>2022 年咻一下就過了！如果沒時間慢慢追新技術的話，這篇文章簡單整理了 Frontend、Backend、Cloud 等等領域最近的發展，讓你花個五分鐘就可以了解最新的技術潮流～</p><h3 id="Good-API-design-bad-API-design"><a href="#Good-API-design-bad-API-design" class="headerlink" title="Good API design, bad API design"></a><a href="https://levelup.gitconnected.com/good-api-design-bad-api-design-2405dcdde24c" target="_blank" rel="noopener">Good API design, bad API design</a></h3><p>不管你寫的是什麼語言、跑在怎麼樣的環境，當你要讓外部的使用者使用你的服務時，就會需要提供 API。而這篇文章提到了一些在設計 REST API 時的 best practice，只要跟著做，基本上就不會寫出長得太奇怪的 API。</p><h3 id="給新手工程師的幾點建議"><a href="#給新手工程師的幾點建議" class="headerlink" title="給新手工程師的幾點建議"></a><a href="https://codelove.tw/@tony/post/63rlq1" target="_blank" rel="noopener">給新手工程師的幾點建議</a></h3><p>想要成為資深工程師不是程式寫得很好、LeetCode Hard 三分鐘 KO 就可以，而是要對於軟體開發有更宏觀的了解。這篇文章是一名資深的架構師 Jeroen De Dauw 給 Junior 工程師一些寫程式的建議，跟著這篇文章，一起往資深的路上前進吧！</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><h3 id="How-To-Fix-Any-Memory-Leak-No-More-Tears"><a href="#How-To-Fix-Any-Memory-Leak-No-More-Tears" class="headerlink" title="How To Fix Any Memory Leak: No More Tears"></a><a href="https://blog.devgenius.io/how-to-fix-any-memory-leak-no-more-tears-3e7fc80342a7" target="_blank" rel="noopener">How To Fix Any Memory Leak: No More Tears</a></h3><p>作者以 JAVA 為例帶讀者走一次當記憶體洩漏時該怎麼做，當事件發生時服務會有怎樣的症狀做判別。使用多種工具幫你抓漏，例如使用 Garbage Collector 的 log 機制、Garbage Collector viewer、開發時看 Visual VM 等等。當事件發生時，此文的流程可以作為參考。</p><h3 id="The-Right-Stuff-for-Really-Remote-Edge-Computing"><a href="#The-Right-Stuff-for-Really-Remote-Edge-Computing" class="headerlink" title="The Right Stuff for Really Remote Edge Computing"></a><a href="https://thenewstack.io/the-right-stuff-for-really-remote-edge-computing/" target="_blank" rel="noopener">The Right Stuff for Really Remote Edge Computing</a></h3><p>在同溫層很難感受到，但在某些工作場合其實網路非常不穩定甚至沒有，所以就有 Edge Computing 解決方案，運用 AWS Snowball 裝置、SpaceX Starlink 網路和 Couchbase NoSQL 資料庫平台做示範，並且比較有無使用 Edge Computing 架構的網路效能差異。</p><h3 id="DevOps-Kubernetes-Help-Desk-or-Self-Driven-Innovation"><a href="#DevOps-Kubernetes-Help-Desk-or-Self-Driven-Innovation" class="headerlink" title="DevOps: Kubernetes Help Desk or Self-Driven Innovation?"></a><a href="https://thenewstack.io/devops-kubernetes-help-desk-or-self-driven-innovation/" target="_blank" rel="noopener">DevOps: Kubernetes Help Desk or Self-Driven Innovation?</a></h3><p>身為 DevOps/SRE 工程師是否常被開發人員的出包煩惱過？親自下去修固然可以但很快就會內耗完畢，太過嚴格的檢查也會拖垮開發效率。文化上應該讓開發人員能夠自己解決問題，而 DevOps/SRE 則是使用劃清界線的 Policy-as-Code 和 CICD pipeline 的工具維持整體開發速度。</p><h2 id="StarBugs-Weekly"><a href="#StarBugs-Weekly" class="headerlink" title="StarBugs Weekly"></a>StarBugs Weekly</h2><p>StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。<br>內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！<br>不想漏追科技新聞的人，趕緊把 StarBugs Telegram Bot 訂閱起來 <a href="https://t.me/starbugs_weekly_bot" target="_blank" rel="noopener">https://t.me/starbugs_weekly_bot</a> (對機器人說 /subscribe 即可) </p><p>另外，為了讓 Starbugs 的專欄有更多豐富、優質的內容，我們決定要開始誠徵 Writer 了。如果你本來就有在寫文章，對於文章的品質有要求、而且也樂於分享討論技術，那很歡迎你以 Writer 的身份加入我們。請動動手指頭私訊我們粉專 <a href="https://www.facebook.com/StarbugsWeekly" target="_blank" rel="noopener">星巴哥技術週刊</a>，並附上自我介紹跟最近寫的文章，就有機會加入我們唷 🙌</p><p>Writers:</p><ul><li><a href="https://medium.com/@hannahlin" target="_blank" rel="noopener">@HannahLin</a> - 從台灣到矽谷，熱愛前端的工程師女孩。</li><li><a href="https://oldmo860617.medium.com/" target="_blank" rel="noopener">@KyleMo</a> - 雜食性軟體工程師，喜歡的技術我都想學。</li><li><a href="https://medium.com/@airwaves" target="_blank" rel="noopener">@Airwaves</a> - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。</li><li><a href="https://medium.com/@w5151381guy" target="_blank" rel="noopener">@Andy</a> - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。</li><li><a href="https://lazypro.medium.com/" target="_blank" rel="noopener">@lazypro</a> - 從 embedded 到 kernel，從 device 上雲端，程式無涯、無法靠岸，軟體的求道者。</li><li><a href="https://medium.com/@ianchen0119" target="_blank" rel="noopener">@ianchen0119</a> - 5G 領域研究生，同時也是喜歡學習不同領域技術的工程師。</li><li><a href="https://00-talk.medium.com/" target="_blank" rel="noopener">@00-talk</a> - 我是 00，脖子痠痛的前端生命鬥士。</li><li><a href="https://ken00535.medium.com/" target="_blank" rel="noopener">@Ken</a> - 興趣是符號學的軟體開發者，喜歡探索事物的本質，偶爾會寫點東西。</li></ul><p>Maintainers:</p><ul><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Goroutine-的併發治理：管理-Worker-Pool&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 164 期 - 2023 年將會是全新的開始！</title>
    <link href="https://starbugs.dev/2022/12/27/164-new-start-in-2023/"/>
    <id>https://starbugs.dev/2022/12/27/164-new-start-in-2023/</id>
    <published>2022-12-27T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<p>大家好，2022 即將要結束了，從 2019 年 11 月的第一期的創刊號到現在，星巴哥也陪伴大家有 3 年多的時光囉！明年星巴哥將走向新的經營方式 — 變成兩個禮拜發佈一次的「雙週刊」。會做這個重大決定是為了讓每一期週刊的水準能夠更高、也為了讓 Starbugs 能永續經營下去，希望大家能繼續支持星巴哥，也歡迎大家加入我們的專欄作家（Writer）團隊！</p><h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Goroutine-的併發治理：值是怎麼傳遞？"><a href="#Goroutine-的併發治理：值是怎麼傳遞？" class="headerlink" title="Goroutine 的併發治理：值是怎麼傳遞？"></a><a href="https://medium.com/starbugs/concurrency-of-go-input-and-output-82a8856df3db" target="_blank" rel="noopener">Goroutine 的併發治理：值是怎麼傳遞？</a></h3><p>在 Go 語言中，如果想讓多個 Goroutine 分工合作完成任務，那就得有個機制讓他們互相傳遞必要的資訊。</p><p>但傳遞資訊的方式又有很多種，所以這週的專欄「Goroutine 的併發治理：值是怎麼傳遞？」，要由 Ken 來跟大家分享每一種方式的優缺點，讓你在實務上開發時，可以選擇一種最適合、也最好維護的方式～</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="CSS-Style-Queries"><a href="#CSS-Style-Queries" class="headerlink" title="CSS Style Queries"></a><a href="https://ishadeed.com/article/css-container-style-queries" target="_blank" rel="noopener">CSS Style Queries</a></h3><p>Chrome 團隊最近發布了對 CSS 新查詢語法的實驗室支持！這可以讓我們去查詢 Container 大小和樣式！在文章裡面作者不只是介紹了語法，還給了滿滿的使用情境和 CodePen 的 Demo 可以開起來玩玩看！</p><h3 id="WalkinCat-—-ChatGPT-LineBot-製作懶人包"><a href="#WalkinCat-—-ChatGPT-LineBot-製作懶人包" class="headerlink" title="WalkinCat — ChatGPT LineBot 製作懶人包 "></a><a href="https://walkincat.notion.site/WalkinCat-ChatGPT-LineBot-82e6757b3a0b48858ca56478b8dbe06b" target="_blank" rel="noopener">WalkinCat — ChatGPT LineBot 製作懶人包 </a></h3><p>如果最近有想要做個前端小作品的話，其實串接個 ChatGPT 來玩看看也是滿不錯的，尤其是接下來就要跨年了，如果你聖誕節已經沒有人陪的話，至少還有五天的時間拚一下，這樣跨年的那個晚上至少還有 AI 可以陪聊天，而且這篇文章還是用 Line 去做的機器人，更有聊天的真實感。</p><h3 id="Important-JavaScript-concepts-that-every-developer-should-know"><a href="#Important-JavaScript-concepts-that-every-developer-should-know" class="headerlink" title="Important JavaScript concepts that every developer should know."></a><a href="https://madni.hashnode.dev/important-js-concepts" target="_blank" rel="noopener">Important JavaScript concepts that every developer should know.</a></h3><p>文章內介紹了 11 個關於 JavaScript 的底層原理、開發觀念還有一些符合 JavaScript 語言特性的小用法，都算是滿基本的知識和名詞，如果有不熟的就多看看幾次，不知不覺中就會和它們變成好朋友了！</p><h2 id="Node-js"><a href="#Node-js" class="headerlink" title="Node.js"></a>Node.js</h2><h3 id="Popular-Node-js-patterns-and-tools-to-re-consider"><a href="#Popular-Node-js-patterns-and-tools-to-re-consider" class="headerlink" title="Popular Node.js patterns and tools to re-consider"></a><a href="https://practica.dev/blog/popular-nodejs-pattern-and-tools-to-reconsider/" target="_blank" rel="noopener">Popular Node.js patterns and tools to re-consider</a></h3><p>在 Node.js 的生態系中，有很多我們慣用的第三方 package 或是常寫的一些 pattern，他們當初可能是為了解決某些問題才出現，但現在已經有點不合時宜。因此這篇文章列出了幾個在採用之前應該重新考慮的模式和工具，讓你在 npm install 之前想想是不是真的需要，或者有更好的替代方案。</p><h3 id="Guidelines-for-choosing-a-Node-js-framework"><a href="#Guidelines-for-choosing-a-Node-js-framework" class="headerlink" title="Guidelines for choosing a Node.js framework"></a><a href="https://simonplend.com/guidelines-for-choosing-a-node-js-framework/" target="_blank" rel="noopener">Guidelines for choosing a Node.js framework</a></h3><p>近年來 Node.js 用來寫 API Server 的框架越來越多了，除了最知名的 Express/Koa 之外，還有 Fastify、Hapi 等等強調速度、易用性的框架。而這篇文章並沒有直接跟你說要選什麼框架，而是跟你說在選擇的時候該考慮哪些問題，譬如說你需不需要 Websocket、有沒有打算用 TypeScript 等等，這些都會決定哪一個框架最適合你</p><h3 id="Best-practices-for-creating-a-modern-npm-package"><a href="#Best-practices-for-creating-a-modern-npm-package" class="headerlink" title="Best practices for creating a modern npm package"></a><a href="https://snyk.io/blog/best-practices-create-modern-npm-package/" target="_blank" rel="noopener">Best practices for creating a modern npm package</a></h3><p>現在要發佈一個可靠的 npm package，可不是把幾個 function 包一包傳上去就好了，你可能還需要加上單元測試、同時支援 ESM 跟 CJS、做安全性檢查等等，這篇文章搜集了這些 best practice（順便推銷他們自己家的工具XD），讓你做為一個專案的維護者，可以發佈出更高品質的 package。</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><h3 id="Top-5-API-testing-tools-2022"><a href="#Top-5-API-testing-tools-2022" class="headerlink" title="Top 5 API testing tools 2022"></a><a href="https://dev.to/qbentil/top-5-api-testing-tools-2022-297j" target="_blank" rel="noopener">Top 5 API testing tools 2022</a></h3><p>透過實作 API 可以在不重新設計應用程式的情況之下為 Web 或是 Mobile 應用添加功能，而開發完成的 API當然需要對其進行測試。本文首先提出選擇 API 測試工具的要點：</p><ul><li>Interoperability: 可以運行在不同的平台與作業系統，，並且可以與 CI Pipeline 整合</li><li>API basic requirements: 要可以測試 API 的一般功能，效能與安全性</li><li>Ease of use: 工具要容易上手，幫助使用者節省時間將其花費在測試上</li><li>Cost: 負擔得起的價格，或是有免費的版本</li><li>Multi-tasking: 可以透過非同步的方式執行多個測試來加速</li></ul><p>接著提到五個他推薦的 API 測試工具：</p><ul><li>API Tester</li><li>Postman</li><li>Thunder Client</li><li>Insomnia</li><li>SoapUI</li></ul><h3 id="Infrastructure-as-Code-Vs-Configuration-Management-Vs-Infrastructure-Provisioning"><a href="#Infrastructure-as-Code-Vs-Configuration-Management-Vs-Infrastructure-Provisioning" class="headerlink" title="Infrastructure as Code Vs Configuration Management Vs Infrastructure Provisioning"></a><a href="https://devopscube.com/infrastructure-as-code-configuration-management/" target="_blank" rel="noopener">Infrastructure as Code Vs Configuration Management Vs Infrastructure Provisioning</a></h3><p>文章先從什麼是 Infrastructure as Code 開始介紹起，提到他有哪一些優點，工具，Idempotency 的觀念，以及 IaC 在整個系統中的開發與部署流程，接這開始提到 Infrastructure Provisioning 和 Configuration Management 分別是在做什麼，並且比較他們的不同之處，讓讀者對於如何自動化管理整個系統有更深且全面性的了解。</p><h3 id="Things-I-wish-I-knew-when-I-started-learning-cloud"><a href="#Things-I-wish-I-knew-when-I-started-learning-cloud" class="headerlink" title="Things I wish I knew when I started learning cloud"></a><a href="https://dev.to/hellonehha/things-i-wish-i-knew-when-i-started-learning-cloud-3346" target="_blank" rel="noopener">Things I wish I knew when I started learning cloud</a></h3><p>作者在幾年前是一個前端工程師，對於後端世界的理解有限，但他決定要增進自己的技能，所以在矇矇懂懂的狀況之下開始了他的雲端之旅，而這篇文章想要分享的是他在這段旅程中所學到的一些東西，讓讀者可以在開始學習雲端之前，先了解一些基本的概念</p><ul><li>熟悉哪一種程式語言並不重要</li><li>知道系統是如何運作的，例如 Client, Server 和網路彼此之間的關係</li><li>不需要學會所有的 Cloud Provider，只需要從一個開始學起即可</li><li>只有理論是不夠的，必須要實際操作</li><li>獲取證照是有幫助的，但不是必要的</li><li>是一個持續學習的過程，要花不少時間</li><li>再次重申，沒有任何事情可以取代 Hands-On 所獲得的經驗</li><li>Cloud 無所不在</li><li>有很豐富的學習資源，例如 udemy, youtue 與其他付費課程</li><li>在 Hands-On 之前，記得預留一小筆預算</li></ul><h3 id="GitHub-API-Flow-介紹以及實施"><a href="#GitHub-API-Flow-介紹以及實施" class="headerlink" title="GitHub API Flow 介紹以及實施"></a><a href="https://hazel.style/2022/07/16/GitHub-API-Flow-Introduction-and-Implementation" target="_blank" rel="noopener">GitHub API Flow 介紹以及實施</a></h3><p>2022 年底最後一週 DevOps 推薦文章向大家力推技術圈扛壩子 Hazel 撰寫的三篇精彩文章。此篇使用 Github API 寫一套程式走一次 Github Flow 的流程，因為開發的關係也探討了 git 本身底層的實作原理，程式碼也不藏私的公開給大家，並且有技術做法選擇的探討，值得深讀。</p><h3 id="Terraform-Provider-開發紀錄"><a href="#Terraform-Provider-開發紀錄" class="headerlink" title="Terraform Provider 開發紀錄"></a><a href="https://hazel.style/2022/12/06/Terraform-Provider-Development" target="_blank" rel="noopener">Terraform Provider 開發紀錄</a></h3><p>Terraform 很多人都用過，但是自己創建一個 Terraform Provider 呢？本篇分享如何創建完整的 Terraform Provider 以及後續的 CICD pipeline。</p><h3 id="AWS-to-GCP-site-to-site-VPN-建置紀錄"><a href="#AWS-to-GCP-site-to-site-VPN-建置紀錄" class="headerlink" title="AWS to GCP site-to-site VPN 建置紀錄"></a><a href="https://hazel.style/2022/06/23/AWS-to-GCP-site-to-site-VPN" target="_blank" rel="noopener">AWS to GCP site-to-site VPN 建置紀錄</a></h3><p>本篇以兩個不同的 Cloud provider 的 Site-to-Site VPN 連線來模擬 Hybrid Cloud 兩個 Cloud 互相連線的設定情境，裡面以 AWS 和 GCP 作為範例，裡面也介紹了除了本文之外可以參考的教學文資訊。</p><h2 id="StarBugs-Weekly"><a href="#StarBugs-Weekly" class="headerlink" title="StarBugs Weekly"></a>StarBugs Weekly</h2><p>StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。<br>內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！<br>不想漏追科技新聞的人，趕緊把 StarBugs Telegram Bot 訂閱起來 <a href="https://t.me/starbugs_weekly_bot" target="_blank" rel="noopener">https://t.me/starbugs_weekly_bot</a> (對機器人說 /subscribe 即可) </p><p>另外，為了讓 Starbugs 的專欄有更多豐富、優質的內容，我們決定要開始誠徵 Writer 了。如果你本來就有在寫文章，對於文章的品質有要求、而且也樂於分享討論技術，那很歡迎你以 Writer 的身份加入我們。請動動手指頭私訊我們粉專 <a href="https://www.facebook.com/StarbugsWeekly" target="_blank" rel="noopener">星巴哥技術週刊</a>，並附上自我介紹跟最近寫的文章，就有機會加入我們唷 🙌</p><p>Writers:</p><ul><li><a href="https://medium.com/@hannahlin" target="_blank" rel="noopener">@HannahLin</a> - 從台灣到矽谷，熱愛前端的工程師女孩。</li><li><a href="https://oldmo860617.medium.com/" target="_blank" rel="noopener">@KyleMo</a> - 雜食性軟體工程師，喜歡的技術我都想學。</li><li><a href="https://medium.com/@airwaves" target="_blank" rel="noopener">@Airwaves</a> - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。</li><li><a href="https://medium.com/@w5151381guy" target="_blank" rel="noopener">@Andy</a> - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。</li><li><a href="https://lazypro.medium.com/" target="_blank" rel="noopener">@lazypro</a> - 從 embedded 到 kernel，從 device 上雲端，程式無涯、無法靠岸，軟體的求道者。</li><li><a href="https://medium.com/@ianchen0119" target="_blank" rel="noopener">@ianchen0119</a> - 5G 領域研究生，同時也是喜歡學習不同領域技術的工程師。</li><li><a href="https://00-talk.medium.com/" target="_blank" rel="noopener">@00-talk</a> - 我是 00，脖子痠痛的前端生命鬥士。</li><li><a href="https://ken00535.medium.com/" target="_blank" rel="noopener">@Ken</a> - 興趣是符號學的軟體開發者，喜歡探索事物的本質，偶爾會寫點東西。</li></ul><p>Maintainers:</p><ul><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;p&gt;大家好，2022 即將要結束了，從 2019 年 11 月的第一期的創刊號到現在，星巴哥也陪伴大家有 3 年多的時光囉！明年星巴哥將走向新的經營方式 — 變成兩個禮拜發佈一次的「雙週刊」。會做這個重大決定是為了讓每一期週刊的水準能夠更高、也為了讓 Starbugs
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 163 期 - 身邊朋友都要出國玩了，沒關係，我有網路就好！</title>
    <link href="https://starbugs.dev/2022/12/20/163-travel-abroad/"/>
    <id>https://starbugs.dev/2022/12/20/163-travel-abroad/</id>
    <published>2022-12-20T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="初探-Linux-Kernel-中的-BPF-與-XDP-技術：以-Tiny-Load-Balancer-為例"><a href="#初探-Linux-Kernel-中的-BPF-與-XDP-技術：以-Tiny-Load-Balancer-為例" class="headerlink" title="初探 Linux Kernel 中的 BPF 與 XDP 技術：以 Tiny Load Balancer 為例"></a><a href="https://medium.com/starbugs/%E5%88%9D%E6%8E%A2-linux-kernel-%E4%B8%AD%E7%9A%84-bpf-%E8%88%87-xdp-%E6%8A%80%E8%A1%93-%E4%BB%A5-tiny-load-balancer-%E7%82%BA%E4%BE%8B-9428c7c1001b" target="_blank" rel="noopener">初探 Linux Kernel 中的 BPF 與 XDP 技術：以 Tiny Load Balancer 為例</a></h3><p>大家好，這週的專欄是由  Starbugs Writer Ian 所發表的「初探 Linux Kernel 中的 BPF 與 XDP 技術：以 Tiny Load Balancer 為例」。</p><p>聽過 BPF 跟 XDP 的人也許不多，但在這個微服務當道的世代，eBPF 與 XDP 其實已經被廣泛應用到許多成熟的專案上。如果你對這兩個底層技術如何增進 Load Balancer 的效能有興趣，而且也熟悉 Linux 跟 C 語言，那一定要趕快點進來看看這週的專欄～</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="Optimize-Interaction-to-Next-Paint"><a href="#Optimize-Interaction-to-Next-Paint" class="headerlink" title="Optimize Interaction to Next Paint"></a><a href="https://web.dev/optimize-inp/" target="_blank" rel="noopener">Optimize Interaction to Next Paint</a></h3><p>Interaction to Next Paint (INP) 是用來測量回應速度的指標，如果使用者在網頁上進行操作但頁面沒有任何回應的話，那就這個使用者體驗就是差的。而 INP 就是要觀察頁面對使用者做的每一項操作回應的延遲時間。在這篇文章裡面會告訴你該如何測量、分析以及改善 INP 較差的問題。</p><h3 id="Vite-4-0-is-out"><a href="#Vite-4-0-is-out" class="headerlink" title="Vite 4.0 is out!"></a><a href="https://vitejs.dev/blog/announcing-vite4.html" target="_blank" rel="noopener">Vite 4.0 is out!</a></h3><p>Vite 3 在發布之後，每週的下載量暴增到 250 萬，且根據今年 <a href="https://twitter.com/vite_js/status/1589665610119585793" target="_blank" rel="noopener">Jamstack Conf</a> 的問卷顯示，在社群內的使用率也提高到 32%，滿意度也維持在 9.7 高分。那在前作如此好評的狀況下，Vite 4 增修了以下幾點：</p><ul><li>瀏覽器的支援度</li><li>將 .css 作為 string import</li><li>如果環境變數中有 # 或 ` 則需要用 “ 包起來</li><li>減少打包後的尺寸</li><li>升級到 Vite Core</li></ul><p>更詳細的內容就快點進去官方的公告看看吧！</p><h3 id="Web-Performance-Calendar"><a href="#Web-Performance-Calendar" class="headerlink" title="Web Performance Calendar"></a><a href="https://calendar.perfplanet.com/2022/web-performance-apis-appreciation-post/" target="_blank" rel="noopener">Web Performance Calendar</a></h3><p>這篇文章列舉了幾點在 Web 界用來處理效能的酷炫 API：</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/renderBlockingStatus" target="_blank" rel="noopener">Render blocking status</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas" target="_blank" rel="noopener">OffscreenCanvas</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding" target="_blank" rel="noopener">Async image decoding</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode" target="_blank" rel="noopener">Image decode()</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" target="_blank" rel="noopener">loading=lazy</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority" target="_blank" rel="noopener">fetchpriority</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103" target="_blank" rel="noopener">103 Early Hints</a></li></ul><p>作者也有在每個 API 下快速介紹並附上目前的支援度，是一篇很好去吸收名詞的好文章！</p><h2 id="Golang"><a href="#Golang" class="headerlink" title="Golang"></a>Golang</h2><h3 id="New-in-Go-1-20-wrapping-multiple-errors"><a href="#New-in-Go-1-20-wrapping-multiple-errors" class="headerlink" title="New in Go 1.20: wrapping multiple errors"></a><a href="https://lukas.zapletalovi.com/posts/2022/wrapping-multiple-errors/" target="_blank" rel="noopener">New in Go 1.20: wrapping multiple errors</a></h3><p>如果沒意外的話，Go 在明年二月就會發佈新版本 1.20。從 Go 1.20 開始，我們可以用 <code>errors.Join(err1, err2)</code> 把多個錯誤 join 成一個錯誤、而且 <code>fmt.Errorf</code> 也可以用來把多個錯誤格式化輸出成一個錯誤，讓 Go 的錯誤回傳、處理可以寫得更漂亮</p><h3 id="Test-parallelization-in-Go-Understanding-the-t-Parallel-method"><a href="#Test-parallelization-in-Go-Understanding-the-t-Parallel-method" class="headerlink" title="Test parallelization in Go: Understanding the t.Parallel() method"></a><a href="https://engineering.mercari.com/en/blog/entry/20220408-how_to_use_t_parallel/" target="_blank" rel="noopener">Test parallelization in Go: Understanding the t.Parallel() method</a></h3><p>維持寫測試的習慣固然是好事，但隨著專案中的測試越來越多，每次跑測試所需要的時間也會越來越久。這篇文章介紹了 Go 的平行化測試功能，如果每個測試都是完全獨立、且不影響彼此，那可以試試看用 <code>t.Parallel()</code> 來同時執行多個 test case！</p><h3 id="Making-a-Go-program-run-1-7x-faster-with-a-one-character-change"><a href="#Making-a-Go-program-run-1-7x-faster-with-a-one-character-change" class="headerlink" title="Making a Go program run 1.7x faster with a one character change"></a><a href="https://hmarr.com/blog/go-allocation-hunting/" target="_blank" rel="noopener">Making a Go program run 1.7x faster with a one character change</a></h3><p>在這篇文章中，作者介紹了他如何使用 Go 的 pprof 跟 flamegraphs 工具來分析效能，並且最後只改了一個字元（其實是兩個XD）就提升了 1.7 倍的效能。如果你已經有 Go 的開發經驗，又對效能最佳化感興趣，那麼這篇文章絕對值得一讀！</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><h3 id="How-DoorDash-Secures-Data-Transfer-Between-Cloud-and-On-Premise-Data-Centers"><a href="#How-DoorDash-Secures-Data-Transfer-Between-Cloud-and-On-Premise-Data-Centers" class="headerlink" title="How DoorDash Secures Data Transfer Between Cloud and On-Premise Data Centers"></a><a href="https://doordash.engineering/2022/11/29/how-doordash-secures-data-transfer-between-cloud-and-on-premise-data-centers/" target="_blank" rel="noopener">How DoorDash Secures Data Transfer Between Cloud and On-Premise Data Centers</a></h3><p>處理底層網路一直都不是簡單的事，DoorDash 因為業務需要跟供應商做介接，但因為供應商敏感的資料不適合暴露於公開的網路，所以評估 AWS Site-to-Site VPN 和 Direct Connect。確定使用 Direct Connect 的實體光纖線路後，發現供應商防火牆的規則會擋掉所有來自內網的 CIDR 範圍，例如 10.0.0.0 到 10.255. 255.255 (Class A) 172.16.0.0 到 172.31. 255.255 (Class B) 192.168.0.0 到 192.168. 255.255 (Class C)，確保流量是來自外部。於是 DoorDash 只好使用 NAT Gateway 嘗試解決，但發現在 Virtual Private Gateway 時沒辦法抓到 NAT Gateway 的 Elastic IP，所以最後使用 <a href="https://docs.aws.amazon.com/whitepapers/latest/building-scalable-secure-multi-vpc-network-infrastructure/private-nat-gateway.html" target="_blank" rel="noopener">Private NAT Gateway</a> 才得以解決。然後 DoorDash 在靠 AWS Transit Gateway 把 Direct Connect 的環境以中心點串到各個 AWS 帳號去。</p><h3 id="Kubernetes-CI-CD-Pipelines-Explained"><a href="#Kubernetes-CI-CD-Pipelines-Explained" class="headerlink" title="Kubernetes CI/CD Pipelines Explained"></a><a href="https://thenewstack.io/kubernetes-ci-cd-pipelines-explained/" target="_blank" rel="noopener">Kubernetes CI/CD Pipelines Explained</a></h3><p>我想大家或許對 Kubernetes CI/CD 工具已經很熟了，但本篇依舊介紹不錯的工具之外，也介紹了最佳實踐，以及推薦自動化、團隊合作、資安和監控工具。是一篇要入門建置 Kubernetes CI/CD pipeline 很不錯的起點文章。</p><h3 id="How-to-Build-a-Fintech-App-Approach-Architecture-and-Scalability"><a href="#How-to-Build-a-Fintech-App-Approach-Architecture-and-Scalability" class="headerlink" title="How to Build a Fintech App: Approach, Architecture, and Scalability"></a><a href="https://mobidev.biz/blog/how-to-build-fintech-app-approach-architecture-scalability" target="_blank" rel="noopener">How to Build a Fintech App: Approach, Architecture, and Scalability</a></h3><p>做金融科技的服務要如何選架構？地點決定法規、商業模式影響系統負載、是否很在意延遲、服務需不需要即時性和系統可靠性容錯率有多少，又或者單體架構（Monolith）、服務導向架構（service-oriented architecture）或微服務架構（Microservices）。作者是建議業務一開始可以循序漸進，因為微服務架構會花很多開發時間，等腳步穩了再改進即可。</p><h2 id="Git"><a href="#Git" class="headerlink" title="Git"></a>Git</h2><h3 id="Monorepo-Build-Tools"><a href="#Monorepo-Build-Tools" class="headerlink" title="Monorepo Build Tools"></a><a href="https://earthly.dev/blog/monorepo-tools/" target="_blank" rel="noopener">Monorepo Build Tools</a></h3><p>最近在軟體開發的圈子中，使用 Monorepos 來管理程式碼有變流行的趨勢，Monorepos 指的是單一個 Repository 中包含著許多相關但是不同專案的程式碼，他有不少優點，但這樣的管理方式也帶來不少的挑戰，假設一個 Repo 中有數百個服務，彼此之間存在著相依性，當其中一個服務有變動時，如何讓其他的服務不會全部都被重新測試，編譯和部署？這時就可以依靠 Monorepos 專屬的工具來解決這個問題，在評估相關類型的工具時，通常會需要考慮以下幾個因素：</p><ul><li>Programming Language Support: 確認選擇的工具支援你目前以及未來所使用的程式語言</li><li>Learning Curve: 每個工具的學習成本各有不同，評估工具的複雜度，確認是否適合你的團隊</li><li>Caching: 一個理想的建構工具，對於同一個 Build 不應該被執行兩次，應該要選擇具備在遠端分散式環境執行與支援快取的工具</li><li>Build Introspection: 能夠洞察被構建服務的流程和相依關係，允許工程師去查看構建圖，構建時哪個環節效率不佳，或是變更牽涉到哪一些專案</li><li>Versatility: 構建以外的附加功能，例如相依套件如何被安裝？整合測試如何運行？測試資料庫如何被還原？換句話說，除了從程式碼構建 Artifact 之外的其他問題都需要被考慮進去</li></ul><p>而目前在這個領域中，作者介紹了四個工具供大家選擇，底下根據上面提的選擇要點來做比較 (不過這篇文章是 Earthly 所撰寫，所以不能全信XD):</p><ul><li><p>Bazel: </p><ul><li>Programming Language Support: Java, C++, Python…等</li><li>Learning Curve: 四個工具中最複雜</li><li>Caching: 支援遠端快取和分散式執行 (開源 &amp; 商用版本)</li><li>Build Introspection: 透過 <code>bazel query</code> 和其他相關指令提供強大的 Introspection 功能</li><li>Versatility: 相當受限，只可以在 run 的階段執行整合測試，至於環境設定和自動構建方面則是被認為不在此工具的支援範圍內</li></ul></li><li><p>Pants:</p><ul><li>Programming Language Support: Go, Python, Java…等 (沒有 JavaScript)</li><li>Learning Curve: 透過 Static Introspection，使得他比 Bazel 更易用一些</li><li>Caching: 支援遠端快取和分散式執行 (開源 &amp; 商用版本)</li><li>Build Introspection: 透過 <code>pants dependencies</code> 指令提供良好的 Introspection 功能</li><li>Versatility: 相當受限，環境設定和自動構建方面也是被認為不在此工具的支援範圍內</li></ul></li><li><p>NX:</p><ul><li>Programming Language Support: Javascript, Go, Rust，還有 iOS 和 Android 執行器</li><li>Learning Curve: 對於 JavaScript 開發者來說學習曲線最低</li><li>Caching: 支援遠端快取和分散式執行 (商用版本)</li><li>Build Introspection: 提供一些 Introspection 功能</li><li>Versatility: 透過 npm 腳本支援不可快取的步驟和一次性的構建任務</li></ul></li><li><p>Earthly:</p><ul><li>Programming Language Support: 任何可以運行在 Linux 環境的東西</li><li>Learning Curve: 有點類似 Dockerfile，使用一連串的 RUN 指令來構建，學習曲線最低</li><li>Caching: 支援遠端快取和分散式執行 (開源 &amp; 商用版本)</li><li>Build Introspection: 受限的 Introspection 功能</li><li>Versatility: 透過包裝現有的工具來提供環境設定和自動構建的功能</li></ul></li></ul><h3 id="The-Wordcel’s-Guide-to-Shape-Rotation-using-the-Git-Commit-Graph"><a href="#The-Wordcel’s-Guide-to-Shape-Rotation-using-the-Git-Commit-Graph" class="headerlink" title="The Wordcel’s Guide to Shape Rotation using the Git Commit Graph"></a><a href="https://www.dolthub.com/blog/2022-12-14-wordcels-guide-to-git/" target="_blank" rel="noopener">The Wordcel’s Guide to Shape Rotation using the Git Commit Graph</a></h3><p>活在 2022 年快要結束的這個當下，應該沒有人會質疑 Git 在軟體開發領域的地位，幾乎每個人都需要使用它，但不一定每個人都真的了解他，這篇文章的作者坦承他一開始費了很大的勁去使用 Git，透過了很長時間的研究和練習之後才總算比較會使用一些，也才有辦法分享這篇文章給對於 Git 還不熟的人；文章中使用淺顯的例子加上容易理解的示意圖來解釋了 Git 常用的功能與知識，如 Git Commit, Branch, Merging, 至於 Rebase 呢？作者在最後説 Rebase 一個不被信任的黑暗工具，請大家使用 Merge 就好XD</p><h3 id="How-to-Close-a-Pull-Request-Merge-Commit-vs-Squash-vs-Rebase-on-GitHub"><a href="#How-to-Close-a-Pull-Request-Merge-Commit-vs-Squash-vs-Rebase-on-GitHub" class="headerlink" title="How to Close a Pull Request - Merge Commit vs Squash vs Rebase on GitHub"></a><a href="https://leonardomontini.dev/close-pr-strategy-merge-commit-squash-rebase/" target="_blank" rel="noopener">How to Close a Pull Request - Merge Commit vs Squash vs Rebase on GitHub</a></h3><p>當要把 Pull Request Branch 合併到 Main Branch 的時會看到三個選項，分別是 <strong>“Create a merge commit”</strong>, <strong>“Squash and merge”</strong> 以及 <strong>“Rebase and merge”</strong>，這三個選項分別會如何將 PR Branch 合併到 Main Branch 呢？而究竟哪一個選項是最好的呢？</p><ul><li><p>Create a Merge Commit: Merge Commit 是在 GitHub 最常用也是預設的選項，也是執行 <code>git merge</code> 時的預設行為，PR Branch 中的所有 Commit 歷史都完整地被保留在 Main Branch 中，然後會有一個額外的 Commit 將 PR Branch 的所有變更內容合併到 Main Branch；優點就是可以很容易追蹤到被修改的那一行程式碼是在哪一個 Commit 中，缺點就是當有很多的 Commit 在很多不同的 Branch 時，最終整個 Commit 的歷史紀錄會變得很雜亂，追蹤變更軌跡會是個相當大的挑戰</p></li><li><p>Squash and Merge: 但你真的需要追蹤每一個變更的 Commit 嗎？包含打錯字，漏掉檔案，格式錯誤…等，假如答案是否定的，那你應該考慮使用 Squash Merge，他會忽略掉 PR Branch 中所有的 Commit，然後將所有的變更內容合併成一個 Commit 合併到 Main Branch 中，如此一來，你可以放心的在 PR Branch 中提送任何你想要的 Commit，因為最終只會有一個 Commit 被合併到 Main Branch 中</p></li><li><p>Rebase and Merge: 當你不需要一個額外的 Commit 來得知 Merge 的發生時，而且希望最終所有的 Commit 都線性在單一個 Branch 中時，就可以使用 Rebase and Merge，他會保留所有的 Commit，而且在合併時不會有額外的 Commit；缺點就是在 Rebase 遇到合併衝突時，很容易在無意間遺失部分的程式碼，而且假如你需要追趕上多個 Commit 時，你最後可能需要為每一個 Commit 解決合併衝突，而不像其他的 Merge 選項，只需要解決一次合併衝突</p></li></ul><p>而究竟要選擇哪一個比較好，作者覺得假如 PR Branch 不會開著很久的話，那麼 Squash Merge 是個不錯的選擇，而他本身並不是 Rebase 的粉絲，因為他覺得使用 Rebase 很容易造成失誤，但是在決定要採用哪一個之前，可以先想想看自己和團隊需要去看歷史 Commit 的頻率有多高，團隊中有多少個成員，使用的 CI 工具是否需要完整的 Commit 歷史</p><h2 id="StarBugs-Weekly"><a href="#StarBugs-Weekly" class="headerlink" title="StarBugs Weekly"></a>StarBugs Weekly</h2><p>StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。<br>內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！<br>不想漏追科技新聞的人，趕緊把 StarBugs Telegram Bot 訂閱起來 <a href="https://t.me/starbugs_weekly_bot" target="_blank" rel="noopener">https://t.me/starbugs_weekly_bot</a> (對機器人說 /subscribe 即可) </p><p>另外，為了讓 Starbugs 的專欄有更多豐富、優質的內容，我們決定要開始誠徵 Writer 了。如果你本來就有在寫文章，對於文章的品質有要求、而且也樂於分享討論技術，那很歡迎你以 Writer 的身份加入我們。請動動手指頭私訊我們粉專 <a href="https://www.facebook.com/StarbugsWeekly" target="_blank" rel="noopener">星巴哥技術週刊</a>，並附上自我介紹跟最近寫的文章，就有機會加入我們唷 🙌</p><p>Writers:</p><ul><li><a href="https://medium.com/@hannahlin" target="_blank" rel="noopener">@HannahLin</a> - 從台灣到矽谷，熱愛前端的工程師女孩。</li><li><a href="https://oldmo860617.medium.com/" target="_blank" rel="noopener">@KyleMo</a> - 雜食性軟體工程師，喜歡的技術我都想學。</li><li><a href="https://medium.com/@airwaves" target="_blank" rel="noopener">@Airwaves</a> - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。</li><li><a href="https://medium.com/@w5151381guy" target="_blank" rel="noopener">@Andy</a> - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。</li><li><a href="https://lazypro.medium.com/" target="_blank" rel="noopener">@lazypro</a> - 從 embedded 到 kernel，從 device 上雲端，程式無涯、無法靠岸，軟體的求道者。</li><li><a href="https://medium.com/@ianchen0119" target="_blank" rel="noopener">@ianchen0119</a> - 5G 領域研究生，同時也是喜歡學習不同領域技術的工程師。</li><li><a href="https://00-talk.medium.com/" target="_blank" rel="noopener">@00-talk</a> - 我是 00，脖子痠痛的前端生命鬥士。</li><li><a href="https://ken00535.medium.com/" target="_blank" rel="noopener">@Ken</a> - 興趣是符號學的軟體開發者，喜歡探索事物的本質，偶爾會寫點東西。</li><li><a href="https://chestermo.medium.com/" target="_blank" rel="noopener">@ChesterMo</a> - 我是Chester，還在求道的後端工程師，相信努力就會有回報。</li></ul><p>Maintainers:</p><ul><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 162 期 - 梅西加油！</title>
    <link href="https://starbugs.dev/2022/12/13/162-gogo-messi/"/>
    <id>https://starbugs.dev/2022/12/13/162-gogo-messi/</id>
    <published>2022-12-13T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="Goroutine-的併發治理：由錯誤處理談起"><a href="#Goroutine-的併發治理：由錯誤處理談起" class="headerlink" title="Goroutine 的併發治理：由錯誤處理談起"></a><a href="https://medium.com/starbugs/concurrency-of-go-error-handling-8c65f642c9a2" target="_blank" rel="noopener">Goroutine 的併發治理：由錯誤處理談起</a></h3><p>在 Go 裡面，使用 Goroutine 併發處理多個任務可以把 CPU 的運算資源發揮到最大，但相對應的錯誤處理也會變得比較複雜。因此在這週的專欄「Goroutine 的併發治理：由錯誤處理談起」中，Ken 要跟我們分享，怎麼把併發的錯誤處理寫得更漂亮，除了讓可讀性更高之外，也降低了發生 dead lock 跟 race condition 的可能性。</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><!-- summary --><h3 id="TypeScript-advanced-and-esoteric"><a href="#TypeScript-advanced-and-esoteric" class="headerlink" title="TypeScript: advanced and esoteric"></a><a href="https://levelup.gitconnected.com/typescript-advanced-and-esoteric-d88560f51767" target="_blank" rel="noopener">TypeScript: advanced and esoteric</a></h3><p>作者列出了一些較少人知道的 TypeScript 用法，文章裡面分成兩個部分，第一部分會介紹如何利用泛型建立動態的型別，在這部分會包含幾個用法：</p><ul><li>Property accessors</li><li>Conditional types</li><li>Type inferring</li><li>Recursive types</li></ul><p>第二個部分則是會介紹如何將上述四個用法做實際應用。</p><!-- summary --><h3 id="An-Introduction-To-JavaScript-Maps"><a href="#An-Introduction-To-JavaScript-Maps" class="headerlink" title="An Introduction To JavaScript Maps"></a><a href="https://blog.openreplay.com/an-introduction-to-javascript-maps/" target="_blank" rel="noopener">An Introduction To JavaScript Maps</a></h3><p>在 JavaScript 中，有時候我們會使用 object 來做 key 和 value 之間的對照，但其實早在 ES6 出現的 map 就能更讚的實現這件事情，因為不論是 object 或是 function 都可以拿來當作 key 去對應另一個 value。如果你還不曉得 Map 或是他的更多優點，不妨從這篇文章開始了解它一下吧！</p><h3 id="What-should-a-modern-CSS-boilerplate-look-like"><a href="#What-should-a-modern-CSS-boilerplate-look-like" class="headerlink" title="What should a modern CSS boilerplate look like?"></a><a href="https://blog.logrocket.com/what-should-modern-css-boilerplate-look-like/" target="_blank" rel="noopener">What should a modern CSS boilerplate look like?</a></h3><p>在寫 Web 的時候，通常都會使用一段 CSS 先重置不同瀏覽器之間的初始樣式差異，但有許多自定義重置的 CSS 裡說不定都包含許多多餘的程式碼（雖然應該也多不到哪裡 😂），因此好好了解在重置時需要和不需要什麼的理由是很重要的，這篇文章介紹了幾個重置某些 CSS 屬性時所考慮的事情。</p><h2 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h2><h3 id="Migrating-millions-of-lines-of-code-to-TypeScript"><a href="#Migrating-millions-of-lines-of-code-to-TypeScript" class="headerlink" title="Migrating millions of lines of code to TypeScript"></a><a href="https://stripe.com/blog/migrating-to-typescript" target="_blank" rel="noopener">Migrating millions of lines of code to TypeScript</a></h3><p>大家應該多少有聽過 Stripe 這間公司，他們在今年把他們最大的 JS codebase 總計數百萬行的程式碼從 Flow migrate 到 TypeScript。這篇文章簡單分享了他們為何要這麼做、以及他們 migration 的過程和結果，如果你手上也有專案在考慮要不要為了好維護 migrate 到 TypeScript，這篇文章可以當作一個參考。</p><h3 id="Use-TypeScript-Record-Types-for-Better-Code"><a href="#Use-TypeScript-Record-Types-for-Better-Code" class="headerlink" title="Use TypeScript Record Types for Better Code"></a><a href="https://itnext.io/use-typescript-record-types-for-better-code-ce1768c6cb53" target="_blank" rel="noopener">Use TypeScript Record Types for Better Code</a></h3><p>其實我以前跟 TypeScript 裡面的 Record/Pick/Omit 那些對型別進行運算、運算的 utility 很不熟，是前陣子仔細去讀了 TypeScript 的官方文件後才發現這些東西真是太好用了。而這篇文章就是介紹了 Record 的用法，推薦給跟我一樣的型別苦手們。</p><h3 id="Type-Safe-TypeScript-With-Type-Narrowing"><a href="#Type-Safe-TypeScript-With-Type-Narrowing" class="headerlink" title="Type-Safe TypeScript With Type Narrowing"></a><a href="https://betterprogramming.pub/type-safe-typescript-with-type-narrowing-649450d708df" target="_blank" rel="noopener">Type-Safe TypeScript With Type Narrowing</a></h3><p>TypeScript 寫久了，遲早有一天會覺得 TypeScript 怎麼那麼笨，「我這邊明明就不可能是 XX 型別啊，你一直噴錯是怎樣？」。別氣別氣，只要你懂 TypeScript 的型別推論，你就可以用 type narrowing 把你的程式碼變得更加安全、而且可讀性也更高。不過這算是比較進階的技巧，如果你對 TypeScript 的型別還不是很熟悉，那可以先把這篇文章存起來，過個一年半載再回來看。</p><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><!-- summary --><h3 id="Serverless-vs-Kubernetes-The-People’s-Vote"><a href="#Serverless-vs-Kubernetes-The-People’s-Vote" class="headerlink" title="Serverless vs. Kubernetes: The People’s Vote"></a><a href="https://thenewstack.io/serverless-vs-kubernetes-the-peoples-vote/" target="_blank" rel="noopener">Serverless vs. Kubernetes: The People’s Vote</a></h3><p>AWS Re:Invent 活動上舉辦了 Serverless vs Kubernetes 架構比賽，會依據多個分類角度做票選，分類的項目有：<!-- summary --></p><ol><li>維護性 - Serverless 勝</li><li>成本 - Serverless 勝</li><li>擴展性 - Serverless 勝</li><li>開發友善度 - 雙方平手</li><li>生態系 - Kubernetes 勝</li><li>監控與日誌 - Kubernetes 勝</li><li>資安 - Kubernetes 勝</li></ol><h3 id="BuildRock-A-Build-Platform-at-Slack"><a href="#BuildRock-A-Build-Platform-at-Slack" class="headerlink" title="BuildRock: A Build Platform at Slack"></a><a href="https://slack.engineering/buildrock-a-build-platform-at-slack/" target="_blank" rel="noopener">BuildRock: A Build Platform at Slack</a></h3><p>Slack 一開始的 Jenkins 就和大家的 Jenkins 一樣隨心所欲導致愈來愈多技術債，經過一連串的考量後決定繼續使用 Jenkins，並且開始做左移的測試，在 Kubernetes 上使用臨時的 Jenkins agent，並且用外掛硬碟保存狀態，標準和抽象化讓使用 Jenkins 的體驗好一點，另外也引入 GitOps 概念禁止人們手動改動，改善設定管理，以及放權 ownership 讓 service owner 參與建置 pipeline。</p><h3 id="Looking-to-the-Future-of-Developer-Experience"><a href="#Looking-to-the-Future-of-Developer-Experience" class="headerlink" title="Looking to the Future of Developer Experience"></a><a href="https://devops.com/looking-to-the-future-of-developer-experience/" target="_blank" rel="noopener">Looking to the Future of Developer Experience</a></h3><p>開發體驗就跟使用者體驗一樣非常重要，減輕開發人員精神上的打擊讓生產力能夠提升。打從一開始入職開始、開發、部署時和維護就要時時刻刻注意開發體驗，像是在入職時創帳號時會自動生產需要的密鑰，使用開發工具如 <a href="https://fig.io/" target="_blank" rel="noopener">Fig</a>、<a href="https://github.com/features/copilot" target="_blank" rel="noopener">Github Copilot</a>、low-code 的軟體或者一些自動化工具如 <a href="https://github.com/features/actions" target="_blank" rel="noopener">Githube Action</a>，而維護需要注意的是 dependencies 要能夠自動檢查。</p><h2 id="ChatGPT"><a href="#ChatGPT" class="headerlink" title="ChatGPT"></a>ChatGPT</h2><h3 id="Awesome-ChatGPT"><a href="#Awesome-ChatGPT" class="headerlink" title="Awesome ChatGPT"></a><a href="https://github.com/humanloop/awesome-chatgpt" target="_blank" rel="noopener">Awesome ChatGPT</a></h3><p>有不少人已經開始把 ChatGPT 整合到既有的工具與服務中，例如 Python SDK, Chrome Extension 顯示跟 Google 搜尋結果的對比，GitHub Action 幫忙 Code Review，VSCode extension 幫忙寫程式，各種 Chat Bot 如 Telegram, WhatsApp, Twitter…來回覆對話，所以 Awesome 系列的 GitHub Repository 也有啦！之後可以跑來這個 Repository 看看有什麼有趣的 ChatGPT 專案又被實作出來了!</p><!-- summary --><h3 id="ChatGPT-for-Google"><a href="#ChatGPT-for-Google" class="headerlink" title="ChatGPT for Google"></a><a href="https://github.com/wong2/chat-gpt-google-extension" target="_blank" rel="noopener">ChatGPT for Google</a></h3><p>最近看到大家都一直在討論 ChatGPT，把各種問題丟給他去回答，很多人已經開始叫他寫程式了，感覺 Stack Overflow 的地位岌岌可危🤣 也有開發者想到其實我們現在還很常去找答案的方式就是去問 Google，所以有人寫了這個 Chrome Extension，讓搜尋字串也直接餵給 ChatGPT，不知道再這樣下去，以後 ChatGPT 的回答內容是不是要開始有業配文跟置入性行銷了?!</p><h3 id="Introducing-ChatGPT"><a href="#Introducing-ChatGPT" class="headerlink" title="Introducing ChatGPT!"></a><a href="https://kozyrkov.medium.com/introducing-chatgpt-aa824ad89623" target="_blank" rel="noopener">Introducing ChatGPT!</a></h3><p>Google 的 Chief Decision Scientist “Cassie Kozyrkov” 寫了一篇揭秘 ChatGPT 的文章，文章開頭先解釋了 ChatGPT 的技術原理為 GAN (Generative Adversarial Networks)，接著稍微提了 GAN 的運作原理，然後花了相對多的篇幅來講述 ChatGPT 的回答其實只是碰觸到了部分的現實，其他則是他想像出來的，這聽起來很像是缺點，但這也正是他的強項，因為他不會受限於現實，可以回答出充滿創造力與在框架外的答案，例如你問 ChatGPT 假如他的飛的話他會做什麼，他可能會回答 “我會像雄鷹一樣翱翔在天空，感受我翅膀下的風和飛行的自由”；緊接著提到利用 ChatGPT 寫程式的體驗</p><p>最恐怖的地方要來了，<strong>上面的內容是由 ChatGPT 所產生的，而且是錯誤的</strong>，作者是這樣跟 ChatGPT 說的 “請用 Cassie Kozyrkov 的風格寫一篇揭秘 ChatGPT 的部落格文章，解釋為什麼 ChatGPT 有用，跟 GAN 有什麼關係，以及為什麼 ChatGPT 的回答只是部分切合現實”；<strong>但其實 ChatGPT 根本就不是使用 GAN 實作出來的，他是 Generative Pretrained Transformer</strong>，但我相信假如不是對於這些背景知識很熟的人，應該都已經被騙了 🥲 沒錯，ChatGPT 所產生的部分回答是胡扯的，但他不算是騙子，因為所謂的騙子必須要先知道事情的真相並且去誤導人類，他只是不關心事情真相而胡說八道的角色，而這也是我們必須要先知道的最重要的重點</p><p>其實除了 ChatGPT 不是 GAN 所實作出來的之後，作者其他的論點都是真的，也就是一開始所提的 ChatGPT 的回答只有部分切合現實，因此可以想像我們在接下來的生活中會處在一個比以往都充斥著更多虛假內容的時代，所以會需要對於事實查核投入更多的精力；ChatGPT 確實讓作者留下了深刻的印象，佩服 OpenAI 所取得的非凡成就，而作者也鼓勵大家去使用它，因為他在各個應用領域中都具有相當大的潛力且值得去關注，換言之，吹牛胡扯的人是有用的，只要你知道他們是在吹牛的人就行了😂 但作者也對人類容易相信別人，導致 AI 將為人類帶來的坎坷之旅感到憂心，人類以後必須對於所有的線上資源採用不同的信任方式，避免獲取一堆有意人士製作出來的虛假內容…</p><h2 id="StarBugs-Weekly"><a href="#StarBugs-Weekly" class="headerlink" title="StarBugs Weekly"></a>StarBugs Weekly</h2><p>StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。<br>內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！<br>不想漏追科技新聞的人，趕緊把 StarBugs Telegram Bot 訂閱起來 <a href="https://t.me/starbugs_weekly_bot" target="_blank" rel="noopener">https://t.me/starbugs_weekly_bot</a> (對機器人說 /subscribe 即可) </p><p>另外，為了讓 Starbugs 的專欄有更多豐富、優質的內容，我們決定要開始誠徵 Writer 了。如果你本來就有在寫文章，對於文章的品質有要求、而且也樂於分享討論技術，那很歡迎你以 Writer 的身份加入我們。請動動手指頭私訊我們粉專 <a href="https://www.facebook.com/StarbugsWeekly" target="_blank" rel="noopener">星巴哥技術週刊</a>，並附上自我介紹跟最近寫的文章，就有機會加入我們唷 🙌</p><p>Writers:</p><ul><li><a href="https://lazypro.medium.com/" target="_blank" rel="noopener">@lazypro</a> - 從 embedded 到 kernel，從 device 上雲端，程式無涯、無法靠岸，軟體的求道者。</li><li><a href="https://ken00535.medium.com/" target="_blank" rel="noopener">@Ken</a> - 興趣是符號學的軟體開發者，喜歡探索事物的本質，偶爾會寫點東西。</li><li><a href="https://medium.com/@w5151381guy" target="_blank" rel="noopener">@Andy</a> - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。</li><li><a href="https://oldmo860617.medium.com/" target="_blank" rel="noopener">@KyleMo</a> - 雜食性軟體工程師，喜歡的技術我都想學。</li><li><a href="https://medium.com/@ianchen0119" target="_blank" rel="noopener">@ianchen0119</a> - 5G 領域研究生，同時也是喜歡學習不同領域技術的工程師。</li><li><a href="https://00-talk.medium.com/" target="_blank" rel="noopener">@00-talk</a> - 我是 00，脖子痠痛的前端生命鬥士。</li><li><a href="https://medium.com/@hannahlin" target="_blank" rel="noopener">@HannahLin</a> - 從台灣到矽谷，熱愛前端的工程師女孩。</li><li><a href="https://medium.com/@airwaves" target="_blank" rel="noopener">@Airwaves</a> - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。</li></ul><p>Maintainers:</p><ul><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;Goroutine-的併發治理：由錯誤處理談起&quot;&gt;&lt;a
        
      
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>第 161 期 - 我才不會用世足賽之類的當週刊名稱呢</title>
    <link href="https://starbugs.dev/2022/12/06/161-i-would-not-use-world-football-as-a-name/"/>
    <id>https://starbugs.dev/2022/12/06/161-i-would-not-use-world-football-as-a-name/</id>
    <published>2022-12-06T00:00:00.000Z</published>
    <updated>2023-08-08T02:08:50.841Z</updated>
    
    <content type="html"><![CDATA[<h2 id="本週專欄"><a href="#本週專欄" class="headerlink" title="本週專欄"></a>本週專欄</h2><h3 id="設計模式作為一種語言：物件導向的語法要素"><a href="#設計模式作為一種語言：物件導向的語法要素" class="headerlink" title="設計模式作為一種語言：物件導向的語法要素"></a><a href="https://medium.com/starbugs/design-pattern-as-a-language-f9036102e971" target="_blank" rel="noopener">設計模式作為一種語言：物件導向的語法要素</a></h3><p>大家好！這週的專欄是 Starbugs Writers Ken 所發表的「設計模式作為一種語言：物件導向的語法要素」。閱讀這篇文章前三段的時候，突然有種被拉回當初翻開 GoF 設計模式的感覺！舉的例子和譬喻都非常生動且深奧 😂</p><p>文章內容圍繞著語法元素與設計模式之間的關係，在例子中，分別用了 C、Java 和 Go 三種不同的語言循序漸進解說語法要素對整個系統造成的影響也超讚。另外在小結中有一句我有很喜歡的話「設計者需要先理解領域語言，才能設計出正確的系統。而我們可以把設計模式本身當作一套語言」，這是我從來沒有思考過的部分，作者最後也提到「當我們汲取了設計模式的組成規則，且能看懂其他架構師的設計時，也差不多是藝術的起點了。」看到這裡我才想說，這篇文章本身早已是藝術了！OK，既然推薦序都打完了，那我要去買碗排骨酥湯邊喝邊再看一次了。</p><h2 id="前端開發"><a href="#前端開發" class="headerlink" title="前端開發"></a>前端開發</h2><h3 id="The-State-of-Frontend-in-2022"><a href="#The-State-of-Frontend-in-2022" class="headerlink" title="The State of Frontend in 2022"></a><a href="https://newsletter.pragmaticengineer.com/p/state-of-frontend-2022" target="_blank" rel="noopener">The State of Frontend in 2022</a></h3><p>2022 又要過了，在一年如十年的前端領域中，不曉得前端工程師們都過得如何，在文章中分別從「哪些前端工程師做了問券」、「前端工程師的工作環境」、「工程實作」、「技術」、「工具」和「Vendors」等種類整理許多精彩的問題，裡面也包含了作者對結果的分析。</p><h3 id="An-Interactive-Guide-to-Flexbox"><a href="#An-Interactive-Guide-to-Flexbox" class="headerlink" title="An Interactive Guide to Flexbox"></a><a href="https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/" target="_blank" rel="noopener">An Interactive Guide to Flexbox</a></h3><p>通常像這種介紹排版的文章，就是看程式碼然後搭配圖和解說了解呈現的效果，但這篇文章則是用互動式的方式，讓你可以透過按鈕操作，看看在不同的屬性和寬度下頁面上的元素會如何排列。</p><h3 id="JavaScript-Understanding-CustomEvent-and-dispatchEvent"><a href="#JavaScript-Understanding-CustomEvent-and-dispatchEvent" class="headerlink" title="JavaScript: Understanding CustomEvent and dispatchEvent"></a><a href="https://medium.com/cstech/javascript-understanding-customevent-and-dispatchevent-a33d10075818" target="_blank" rel="noopener">JavaScript: Understanding CustomEvent and dispatchEvent</a></h3><p>在這篇文章中會介紹如何用 Event、CustomEvent 和 dispatchEvent() 來建立和監聽事件，且作者還分享了如何，以及在哪些情境下會使用到自定義的事件。</p><h2 id="Backend"><a href="#Backend" class="headerlink" title="Backend"></a>Backend</h2><h3 id="Prevent-Http-Ddos-With-Cloudflare-黑五檔期-Ddos-防禦筆記"><a href="#Prevent-Http-Ddos-With-Cloudflare-黑五檔期-Ddos-防禦筆記" class="headerlink" title="Prevent Http Ddos With Cloudflare - 黑五檔期 Ddos 防禦筆記"></a><a href="https://blog.markkulab.net/prevent-ddos-part2/" target="_blank" rel="noopener">Prevent Http Ddos With Cloudflare - 黑五檔期 Ddos 防禦筆記</a></h3><p>最近黑五的檔期剛過，而在這段時間，作者的公司網站也遭遇了 DDoS 攻擊。所以作者在文章中提到了他是怎麼設定 Cloudflare 來防禦 DDoS，整篇文章圖文並茂講解得非常詳細，如果你的產品也有遇到 DDoS 攻擊，可以參考一下這篇文章。</p><h3 id="6-Simple-and-Useful-PostgreSQL-Features-that-I-wish-I-knew-when-I-started"><a href="#6-Simple-and-Useful-PostgreSQL-Features-that-I-wish-I-knew-when-I-started" class="headerlink" title="6 Simple and Useful PostgreSQL Features that I wish I knew when I started"></a><a href="https://it.badykov.com/blog/2022/09/12/simple-and-usefull-postgresql-features/" target="_blank" rel="noopener">6 Simple and Useful PostgreSQL Features that I wish I knew when I started</a></h3><p>這篇文章介紹了 PostgreSQL 幾個比較少人知道的功能，這些功能都是作者在使用的過程中發現的，而且這些功能都非常實用，不管你是正要開始學習怎麼用 PostgreSQL 或是已經使用有一段時間了，都很推薦這篇文章～</p><h3 id="MySQL🐬-InnoDB-教我的事：-最近最少使用-LRU-串列的優化"><a href="#MySQL🐬-InnoDB-教我的事：-最近最少使用-LRU-串列的優化" class="headerlink" title="MySQL🐬 InnoDB 教我的事： 最近最少使用 LRU 串列的優化"></a><a href="https://medium.com/%E7%A8%8B%E5%BC%8F%E7%8C%BF%E5%90%83%E9%A6%99%E8%95%89/mysql-innodb-%E6%95%99%E6%88%91%E7%9A%84%E4%BA%8B-%E6%9C%80%E8%BF%91%E6%9C%80%E5%B0%91%E4%BD%BF%E7%94%A8-lru-%E4%B8%B2%E5%88%97%E7%9A%84%E5%84%AA%E5%8C%96-fb1781cdc90e" target="_blank" rel="noopener">MySQL🐬 InnoDB 教我的事： 最近最少使用 LRU 串列的優化</a></h3><p>這篇文章分享了 MySQL 的儲存引擎 InnoDB 內部是怎麼對 LRU(Least Recently Used) 演算法做最佳化，雖然涉及演算法難度比較高一點，不過如果你對 MySQL 的儲存引擎有興趣，可以看看這篇文章。</p><h2 id="Kubernetes"><a href="#Kubernetes" class="headerlink" title="Kubernetes"></a>Kubernetes</h2><h3 id="Kubernetes-1-26-–-What’s-new"><a href="#Kubernetes-1-26-–-What’s-new" class="headerlink" title="Kubernetes 1.26 – What’s new?"></a><a href="https://sysdig.com/blog/kubernetes-1-26-whats-new/" target="_blank" rel="noopener">Kubernetes 1.26 – What’s new?</a></h3><p>K8s 1.26 也差不多要正式發佈了，讓我們跟著 sysdig 來看看這一版有什麼重要更新吧！ 這一版有 37 個增強功能，對比於 1.25 有 40 個，1.24 有 46 個，這 37 個裡面有 11 個會升到穩定版本，10 個的功能還需要持續改善，16 個全新的功能，其中底下幾個是 sysdig 覺得比較重要的更新，更詳細內容可以參閱內文：</p><ul><li>儲存功能: 透過 VolumeSnapshot 功能，從不同 Namespace 的儲存快照建立新的儲存空間</li><li>驗證功能: 構築於 1.25 引進用來驗證 CRD 的 Common Expression Language (CEL)，現在 admission controller 多了一個 ValidatingAdmissionPolicy 型別，讓使用者可以在沒有 webhook 的情況下達成驗證機制</li><li>監控功能: 不再需要透過 Prometheus Exporter，可以直接在 /metrics/slis 提供 Kubernetes 的 SLI Metric</li><li>監控功能: 開始從 CRI API 來獲取 Container 的資訊 (例如 CPU, Memory 使用量)，而不是 cAdvisor，這也意味著會慢慢的將 cAdvisor 給淘汰掉，畢竟 Container Runtime 才是最清楚知道 Container 運行狀況的角色</li><li>管理功能: 既有的 Resource Management 只能針對 CPU 和 Memory 去設定 Limit 和 Request (之後還可以針對 Storage)，不過對於需要做初始化和清理的硬體資源，如 FPGA，或是想要限制硬體資源被存取，如共享的 GPU，這次新增了新的 ResourceClaimTemplate 和 ResourceClass 物件來達成這些需求，讓資源更動態地去分配</li><li>管理功能: 讓 Topology Manager 對於 multi-NUMA (NUMA: non-uniform memory access) 的 Kubernetes 節點有更好的控制權，例如透過控制使用哪一顆實體的 CPU 核心來避免 Memory 在不同晶片暫存或是 Socket 間跳躍，用以獲得大幅度的效能改善</li><li>管理功能: StatefulSet 多了掌控起始 Replica 數目的設定 (spec.ordinals.start)，主要的應用情境會是在跨 Namespace 或是叢集搬遷 StatefulSet 可以達成 0 Downtime 的需求 (建議同時搭配 PodDistruptionBudgets 去做使用)</li><li>管理功能: 讓 Kubernetes 的使用者可以透過 Auth API 獲得自己的使用者資訊，例如有什麼樣的權限，位於哪一些群組…等</li><li>效能改善: 讓 kubernetes-apiserver 提供 API 的完整清單，這樣一來呼叫 kubernetes-apiserver 的 client 就不用自己去查找有哪一些 API 和這些 API 有哪一些版本可以使用</li></ul><h3 id="Kubernetes-Labels-Expert-Guide-with-10-Best-Practices"><a href="#Kubernetes-Labels-Expert-Guide-with-10-Best-Practices" class="headerlink" title="Kubernetes Labels: Expert Guide with 10 Best Practices "></a><a href="https://cast.ai/blog/kubernetes-labels-expert-guide-with-10-best-practices/" target="_blank" rel="noopener">Kubernetes Labels: Expert Guide with 10 Best Practices </a></h3><p>透過 Kubernetes 於資源內所下的 Label，可以讓管理者更快地查找問題，一次將組態變更集體套用到多個資源，用來監控資源的使用狀況與成本，所以這篇文章要跟大家介紹 10 個使用 Label 的最佳實踐</p><ul><li>使用 Kubernetes 本身推薦的 Label (<a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/common-labels/#labels" target="_blank" rel="noopener">Reference</a>) 來對物件分群: K8s 推薦使用 app.kubernetes.io/name 和 app.kubernetes.io/instance 來代表應用程式的名稱和實例；假如是公司內部的應用服務，就可以使用自己公司的 subdomain 來取代 app.kubernetes.io 然後來客製化對應的 Label</li><li>注意 Label 的語法正確性: Label 是 Key Value 的組合，你必須使用 <code>&lt;Prefix&gt;/&lt;Name&gt;</code> 的格式來命名，其中 Prefix 是選擇性的，但假如要使用的話，要注意它必須是 DNS Subdomain 的格式，字數限制為 253 個字元，他可以讓團隊使用多個 Label 而不會產生命名衝突 (試想那些存在於第三方套件的 Label…)，其中 kubernetes.io 和 k8s.io 是 Kubernetes 針對內部核心元件所保留的 Prefix；Name 就是 Label 屬性名稱，例如可以使用 environment 來代表運行的環境，值得部分就可以用 production 或是 testing，Name 有一些使用需求，例如他不能是空的，字數限制為 63 個字元，開頭和結尾必須使用字母與數字 ([a-z0-9A-Z])，中間可以使用字母與數字和 -, _, . 符號混合</li><li>標準化的 Label 命名規則: 不同的團隊間必須要使用一致性的命名規則，不然花在維護 Label 的努力將會白費掉</li><li>避免不必要的 Label 變更: Label 是用來識別和選擇 K8s 中的資源用以達成排程，部署或是管理的目的，所以變更 Label 會造成深遠和不可預見的影響，例如你把某一群 Pod 的 App Label 從值 frontend 修改成 backend，K8s 就會認為你要把這些 Pod 重新部署到 backend 的節點上，這有可能會造成這些 Pod 開始 Crach，最終無法被存取；所以只要在絕對必要時才去修改 Label，並且在進行任何修改之前仔細的評估可能造成的後果，避免遭遇到不可預期的狀況</li><li>使用 Label Selector 來選擇資源: 透過使用相等性或是集合的操作來對資源做選擇，以相等性來說， = 和 == 都代表相等，!= 代表不相等，也可以透過逗號 , 將添加的多個 Label 區隔開來一起使用；而集合的操作有點像是 SQL 語法中的 IN，例如 app in (frontend, backend) 代表 app Label 擁有 frontend 或是 backend 的資源都會被選擇出來</li><li>不要將應用程式的資訊寫入 Label: K8s Label 主要是用來儲存物件的 Metadata，而不是用來當作應用程式的資料儲存區，因為 K8s 的資源的使用時間通常很短，而且跟應用程式沒有緊密的關係，Label 很快就會變的不同步而毫無用處</li><li>不要將機敏資訊寫入 Label: 假如有心人士可以存取你的 K8s 叢集，而你又把諸如密碼， API Credential 或是其他的機敏資訊寫入了 Label，那麼這些資訊就可以在明碼的情況下被輕易取得；建議應該要存放在 K8s Secret 而不是 Label 內，因為在 Secret 內至少是被編碼過的，而且只有需要的 Pod 才能夠去取得它，這樣一來，即使有心人士可以存取你的 K8s 叢集，也不會有機會直接看到這些儲存於 Secret 的機敏資訊 (自己覺得 K8s Secret 還是不夠安全，建議整合第三方的 Secret Management 工具，如 HashiCorp Vault)</li><li>將 Label 加到 Pod Template: 將必要的 Label 添加到運行資源的 Pod Template 中，如此一來 K8s Controller 便可以如你所期望地建立 Pod；目標是只建立對團隊可以帶來價值的 Label 就好，而不是浮濫的建立一堆沒有用處的 Label，建議從小處著手，一開始先在 Template 中建立一個必要 Label 的清單，例如用來識別資源的擁有者，資源運行的環境以及發布資訊</li><li>將 Label 的添加過程自動化: 自動化可以節省大量時間，當然對於標籤的管理也不例外，假如平常就有在使用 CI/CD Pipeline 的話，就可以輕鬆自動化為某些 Label 做橫向的管理工作；使用 CD 工具來添加 Label 是很明智的選擇，因為它可以確保 Label 的一致性，並且提高工程師的生產力，除此之外，也建議通過 CI 工作來檢查 Label 是否正確無誤，當 Label 遺失時就應該讓 CI 工作失敗並且通知相關負責的團隊來處理</li><li>使用 Label 來做成本監控: 標籤對於了解 K8s 的雲端使用成本很有幫助，其實不管是成本監控，資源分配和管理其實都仰賴著妥切的 Label 策略；當多個團隊共享同一個 K8s Cluster 時 (Multi-Tenant)，你就會需要使用相關 Label 來建立成本分佈報告，因為這樣做才可以獲知特定團隊，服務或是應用服務所耗費的成本，這對調查突然激增的使用成本相當地有幫助</li></ul><h3 id="Deploying-Kubernetes-resources-in-a-specific-order-using-Helm-or-werf"><a href="#Deploying-Kubernetes-resources-in-a-specific-order-using-Helm-or-werf" class="headerlink" title="Deploying Kubernetes resources in a specific order using Helm or werf"></a><a href="https://blog.werf.io/deploying-kubernetes-resources-in-a-specific-order-using-helm-or-werf-f8eb8c1a08" target="_blank" rel="noopener">Deploying Kubernetes resources in a specific order using Helm or werf</a></h3><p>假如希望部署 K8s 資源時可以使用某種順序去部署的話，通常是有點挑戰性的，有時候甚至必須要等待外部資源準備完成，假設今天你要部署一個應用服務好了，那就要先等一個外部的 Operator 建立好動態的 K8s Secret，再來開始初始化和設置資料庫，最後才能夠部署應用服務，這篇文章就要跟大家介紹如何使用 Helm 或是 werf 來解決這個問題</p><ul><li>使用 Helm: 主要是透過 initContainers 來達成，透過 init container 來讓不同的元件之間有順序性的部署，講白話一點就是有個插入一個 until xxx; do sleep 1 done 的 shell script，這個 script 會一直去檢查某個相依資源是否存在，如果存在就會可以部署主體資源，如果不存在就會一直等待，直到相依資源存在為止，這樣就可以達到等待某個相依資源的目的</li><li>使用 werf: 首先必須要在 K8s 資源定義中加入 werf 相關的 annotations，這些 annotations 會告訴 werf 這些資源的權重，werf 會根據這些權重來決定資源的部署順序，這樣就可以達到資源部署的順序性</li></ul><h2 id="DevOps"><a href="#DevOps" class="headerlink" title="DevOps"></a>DevOps</h2><h3 id="How-We-Use-Terraform-At-Slack"><a href="#How-We-Use-Terraform-At-Slack" class="headerlink" title="How We Use Terraform At Slack"></a><a href="https://slack.engineering/how-we-use-terraform-at-slack/" target="_blank" rel="noopener">How We Use Terraform At Slack</a></h3><p>Slack 使用 Terraform 時也是早期從單一個 AWS 帳號逐漸擴展，也會把大型服務拆成多個 Terraform state files 管理，也會分配不同 AWS IAM 權限來提供 sandbox 環境，使用文法檢查工具來輔助 Terraform 多版本讓環境可以逐一升級，Terraform module 從原本相對路徑逐漸改成用 git 抓下來到最後開發工具只可惜更難做測試，也開發了 Terraform Smart Planner 讓還沒 merge 的測試結果印出 output 讓 reviewer 更好審視。這篇文章的結語也說們的 Terraform 之旅離完美還很遠，也不忘在文章最後偷偷徵才。</p><h3 id="How-to-Mentor-Interns-to-Become-Skillful-Engineers"><a href="#How-to-Mentor-Interns-to-Become-Skillful-Engineers" class="headerlink" title="How to Mentor Interns to Become Skillful Engineers"></a><a href="https://slack.engineering/how-to-mentor-interns-to-become-skillful-engineers/" target="_blank" rel="noopener">How to Mentor Interns to Become Skillful Engineers</a></h3><p>如何讓讓實習生快速進入狀況也是 DevOps 的一環，Slack 就分享除了要注意分配給實習生要做什麼專案外，他的 onboarding 流程跟資源是否能讓他快速進入狀況？如何測量實習生的實習成效是成功的？如果實習生有多位 mentors 該怎麼確保他可以溝通順暢？文章對於制定這些計畫有個詳細的紀錄，即使用在正職員工上也很受用。</p><h3 id="A-Day-in-the-Life-of-a-Cloud-Engineer-at-Slack-Australia"><a href="#A-Day-in-the-Life-of-a-Cloud-Engineer-at-Slack-Australia" class="headerlink" title="A Day in the Life of a Cloud Engineer at Slack Australia"></a><a href="https://slack.engineering/a-day-in-the-life-of-a-cloud-engineer-at-slack-australia/" target="_blank" rel="noopener">A Day in the Life of a Cloud Engineer at Slack Australia</a></h3><p>在澳洲的 Slack 的雲端工程師分享他的一天行程，Slack 的雲端團隊有三種分別是 Foundation、VM 和 containers，在 VM 團隊的他表示在每週開會時可以了解其他團隊的事務。公司的溝通風格基本上還是以非同步為主，code review 也是如此，這也有助於跟北美的同事做溝通。</p><h2 id="StarBugs-Weekly"><a href="#StarBugs-Weekly" class="headerlink" title="StarBugs Weekly"></a>StarBugs Weekly</h2><p>StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。<br>內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！<br>不想漏追科技新聞的人，趕緊把 StarBugs Telegram Bot 訂閱起來 <a href="https://t.me/starbugs_weekly_bot" target="_blank" rel="noopener">https://t.me/starbugs_weekly_bot</a> (對機器人說 /subscribe 即可) </p><p>另外，為了讓 Starbugs 的專欄有更多豐富、優質的內容，我們決定要開始誠徵 Writer 了。如果你本來就有在寫文章，對於文章的品質有要求、而且也樂於分享討論技術，那很歡迎你以 Writer 的身份加入我們。請動動手指頭私訊我們粉專 <a href="https://www.facebook.com/StarbugsWeekly" target="_blank" rel="noopener">星巴哥技術週刊</a>，並附上自我介紹跟最近寫的文章，就有機會加入我們唷 🙌</p><p>Writers:</p><ul><li><a href="https://medium.com/@hannahlin" target="_blank" rel="noopener">@HannahLin</a> - 從台灣到矽谷，熱愛前端的工程師女孩。</li><li><a href="https://oldmo860617.medium.com/" target="_blank" rel="noopener">@KyleMo</a> - 雜食性軟體工程師，喜歡的技術我都想學。</li><li><a href="https://medium.com/@airwaves" target="_blank" rel="noopener">@Airwaves</a> - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。</li><li><a href="https://medium.com/@w5151381guy" target="_blank" rel="noopener">@Andy</a> - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。</li><li><a href="https://lazypro.medium.com/" target="_blank" rel="noopener">@lazypro</a> - 從 embedded 到 kernel，從 device 上雲端，程式無涯、無法靠岸，軟體的求道者。</li><li><a href="https://medium.com/@ianchen0119" target="_blank" rel="noopener">@ianchen0119</a> - 5G 領域研究生，同時也是喜歡學習不同領域技術的工程師。</li><li><a href="https://00-talk.medium.com/" target="_blank" rel="noopener">@00-talk</a> - 我是 00，脖子痠痛的前端生命鬥士。</li><li><a href="https://ken00535.medium.com/" target="_blank" rel="noopener">@Ken</a> - 興趣是符號學的軟體開發者，喜歡探索事物的本質，偶爾會寫點東西。</li></ul><p>Maintainers:</p><ul><li><a href="https://medium.com/@gqsm" target="_blank" rel="noopener">@GQSM</a> - Hi！我是神 Q 超人，一個先衝再說的男人。</li><li><a href="https://larry850806.medium.com" target="_blank" rel="noopener">@LarryLu</a> - 我是 Larry，傳說中的 0.1 倍工程師！</li><li><a href="https://medium.com/@LukaTW" target="_blank" rel="noopener">@LukaTW</a> - 一名全身都是死角的工程師。</li><li><a href="https://medium.com/@smalltown" target="_blank" rel="noopener">@smalltown</a> - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。</li><li><a href="https://rico-chen.medium.com/" target="_blank" rel="noopener">@RicoChen</a> - 熱愛許多技術且努力看透技術的本質，如果有什麼好玩的技術，還請各位歡迎直接找我聊聊。</li></ul><h2 id="Feedback"><a href="#Feedback" class="headerlink" title="Feedback"></a>Feedback</h2><p>本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊 <a href="https://www.facebook.com/StarBugsWeekly/" target="_blank" rel="noopener">星巴哥技術週刊 FB 粉絲專頁</a> 與我們聯繫。</p>]]></content>
    
    <summary type="html">
    
      
      
        
        
          &lt;h2 id=&quot;本週專欄&quot;&gt;&lt;a href=&quot;#本週專欄&quot; class=&quot;headerlink&quot; title=&quot;本週專欄&quot;&gt;&lt;/a&gt;本週專欄&lt;/h2&gt;&lt;h3 id=&quot;設計模式作為一種語言：物件導向的語法要素&quot;&gt;&lt;a href=&quot;#設計模式作為一種語言：物件導向的語法要素&quot;
        
      
    
    </summary>
    
    
    
  </entry>
  
</feed>