🔍 搜尋結果:分享

🔍 搜尋結果:分享

我發現的很酷的 VSCode 擴展

最近,我重新審視了去年放棄的 React 副專案。在此過程中,我發現了一些重要的 VSCode 擴展,這些擴展顯著提高了我作為 React 開發人員的工作效率。此清單的唯一規則是所有這些擴充都是**React 特定的**。雖然它們可能對其他目的有用,但它們的主要焦點是 React。 那麼,讓我們深入了解一下。 ![我們走吧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opxot6h4u0sxgm9zp3yq.gif) --- 這些擴充功能將透過為您提供片段來提供幫助。***程式碼片段***是預先定義的程式碼片段,只需一次按鍵(*大多數情況下按 Tab 鍵*)即可擴充為完整的程式碼區塊。這些片段的範圍可以從單行到整個文件。透過使用片段,您可以將整個檔案壓縮為簡短的縮寫,使您的編碼體驗更加順暢。 ### **1.ES7 React/Redux/GraphQL/React-Native 片段** ![ES7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqxpf64yy8a7zpfcpgcg.png) 此擴充功能提供了 React、Redux、GraphQL 和 React Native 的全面片段集合。這些片段可讓您快速產生常用的程式碼結構,從而顯著加快您的開發流程。例如: - `rcc`建立一個 React 類別元件骨架。 - `rfc`產生一個 React 功能元件。 - `rnfce`片段可協助您快速設定具有預設匯出的 React Native 元件。 - *這個清單是無窮無盡的*。[在這裡](https://github.com/r5n-dev/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md)探索 這些片段是高度可自訂的,涵蓋廣泛的用例,使您的開發更加高效。 ### **2.React Hooks 片段** ![鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ulwbak9qamtc3846llm.png) React Hooks 程式碼片段擴充功能透過提供特定的縮寫來簡化在 React 中加入鉤子: - `ush` for `useState`初始化一個狀態變數。 - `ueh` for `useEffect`設定副作用。 - `uch` for `useContext`存取上下文。 這個擴充特別有用,因為它專注於 React 的 hooks API,這是功能元件的核心功能。它可以幫助您快速實現鉤子,而不必每次都記住確切的語法。 ### **3.VSCode React 重構** ![重構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tucj03fncc4btoltsxm4.png) VSCode React Refactor 可讓您透過將部分程式碼提取到單獨的元件中來重構程式碼。當您的元件變得太大並且您希望將其分解為更小、更易於管理的部分時,這尤其有用。例如: - 選擇一段 JSX 程式碼。 - 右鍵單擊並選擇“重構”。 - 將其提取到新元件中。 此擴充功能支援 TypeScript 並確保正確導入和使用提取的元件,從而簡化您的重構過程。 ### **4. 將 JSON 貼為程式碼** ![json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cflc9kcid3tvfitmlzg8.png) 將 JSON 貼上為程式碼可讓您將 JSON 物件轉換為程式碼。這在處理傳回 JSON 回應的 API 時特別有用。例如: - 複製 JSON 物件。 - 使用命令選項板選擇“將 JSON 貼上為程式碼”。 - 將 JSON 轉換為具有類型定義的 JavaScript 或 TypeScript 程式碼。 此擴充功能有助於快速將 JSON 資料轉換為可用的程式碼結構,從而節省時間並減少錯誤。 ### **5.SVG圖庫** ![svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ioelbe4mk13mk7y2ld0.png) SVG Gallery 是用於管理專案中的 SVG 檔案的絕佳工具。它允許您直接在 VSCode 中預覽 SVG 文件,這在處理多個 SVG 資源時特別方便。特點包括: - 在編輯器中預覽 SVG。 - 將 SVG 內容複製為 React 元件。 - 有效地組織和管理您的 SVG 資源。 此擴充簡化了使用 SVG 檔案的流程,讓您更輕鬆地在 React 專案中整合和管理向量圖形。 --- 雖然上述建議來自我的主觀觀點和個人對這些擴充功能的體驗,但我強烈建議您親自安裝和體驗它們。每個開發人員都有獨特的需求和工作流程,這些擴充功能可能會以不同的方式適合您的專案。 我鼓勵您分享一些可以提高您的工作效率的很酷的擴充功能。請記住,這些並不是唯一的擴展,我一直在尋找新工具來改善我的工作流程。 *這給我們帶來了一個發人深省的問題:**我們是否透過嚴重依賴這些擴充功能而創造了懶惰的程式設計師,或者我們是否真正提高了生產力和效率?**分享您的想法和經驗。讓我們討論一下這些工具是更好發展的拐杖還是催化劑。* 直到下次! ![乾杯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruau6ij81iaqqoyjlzm1.jpeg) --- 原文出處:https://dev.to/mitchiemt11/cool-vscode-extensions-that-that-ive-discovered-12mg

從 SDE1 到 SDE2,甚至更高! 🚀 實際需要什麼。

> ***「我擅長寫程式碼。就在這個月,我發了 11 個 PR!我甚至按時更新了我的大部分票。也沒有請那麼多假!而且我也比 Sam 工作了更多時間!為什麼沒有我沒有升職,但他們卻升職了?*** > *-- 一些不幸的人,這次沒有得到促銷。* 這聽起來有關聯嗎? 我以前見過這個。 很多。 有時原因是辦公室政治。 🤬 有時,這只是期望沒有得到良好的溝通。那可能很糟糕。 🥲 有時,你如何達到既定的期望與實際的標準之間**存在不匹配**。 🤔 您可能無法控製或改變您的辦公環境。但你當然可以控制自己,確保沒有任何事情可以阻止你**在職業階梯上的上升**。 ![你明白了,規劃辦公室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6htoz012vjxxtc5po2hk.gif) > ### 涼爽的!你能快速引導我完成我需要做的事情嗎? 首先要知道身為軟體開發人員的職責是什麼。我不是指您在目前組織中的職責,而是指作為整體和個人開發人員的職責。 #### 目錄 我認為開發人員應該致力於涵蓋**5 個廣泛的領域**。 *點擊連結可跳轉至該部分。* 1. [技術](#1-technical-skills-)(程式碼品質、語言熟練度、測試、效能) 2. [生產力](#2-productivity-)(可靠性和效率) 3. [協作](#3-collaboration-)(溝通和評論) 4. [所有權](#4-ownership-)(責任和主動性) 5. [影響](#5-impact-)(系統/產品改進和創新) *“至此,我們製作 D&D 角色表的工作就完成了一半。滾動 Nat 20!🤣”* **我只會介紹您可以控制的事情。** 我特別提到這一點是因為我看到許多組織犯錯的一件事是,評估的各個領域最終都包括您可能無法控制的事情。 例如,您可能無法控制您的工作對公司的影響力。在大多數情況下,您只能完成直接要求您做的事情。 > ### 好吧!我們走吧!我已經準備好升職了! ![辦公室一百萬美元](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q5npkuc8euhcnb2pvtm.gif) 我上面提到的 5 個領域並不是 SDE1 所特有的。這是每個開發人員都需要掌握的東西。但每個領域的標準和期望都會改變。 讓我們討論一下每個領域的基線期望是什麼,以及您需要做什麼才能達到下一個水平。 **稍安毋躁。這會很長。** **但請記住,下面只有 5 個部分...👇** ![這需要一段時間](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaj5r04sxuc1fsfsaqtv.png) ### 1. 技術能力[\[🔝\]](#table-of-contents) 在 SDE1,沒有人指望您能引起轟動、改變世界、節省數十億美元! 他們希望您以最少或最多偶爾需要指導的方式完成工作,並且您交付的工作不需要重新審視或修復(只要合理)。 **太長了;博士** 編寫其他人可以閱讀的體面程式碼,並且不會每 2 秒就中斷一次。 有幾種方法可以做到這一點。 **寫愚蠢的程式碼。不是“智能”程式碼。** - 您可能是 Leetcode、Hackerrank 或類似事物的奇才。但不幸的是,這些網站鼓勵初級人員如此努力地追求效能,以至於常常以**犧牲可讀性為代價**。 - 如果您知道兩個循環僅針對`i`和`j`的較小值執行,那麼使用嵌套循環並不是一個壞主意。 - 如果保證陣列最多只有幾個專案,那麼不使用映射/字典而不是陣列並不是一個壞主意。 ![編寫與閱讀程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amla8isarsp66etjd99v.png) **了解該語言為您提供的所有工具。** - 您可能習慣於對所有事情使用 for 循環,但箭頭/lambda 函數可以使您的程式碼更具可讀性。 - \[JS 範例\] 你可能習慣將事物儲存在物件`{}`中,每次尋找的時間複雜度為 O(1),但是`set.has(thing)`比`!!obj[thing]` (甚至`Boolean(obj[thing])` **了解為什麼測試有價值,然後編寫測試** - 人們常常只是在寫測試,因為這是「最佳實踐」。 - 如果不了解背後的原因,您可能會編寫無效或毫無意義的測試。 - 這個想法是,**做任何你需要做的事情,以增加對程式碼穩定性的信心**。您需要使用類型嗎?當然。您需要聘請 QA 人員嗎?有點低效,但很酷。**也許你需要寫...測試?**好吧,但是……我的目標是什麼? - 這可以是一個單獨的部落格。**但這裡有一個簡短的簡短介紹...** - 您是否需要編寫單元測試、整合測試、驗收測試,無論您如何稱呼它們,都沒關係。人們可能對此感到「宗教」。但只要你的測試做了一件基本的事情,這一切都不重要…提高你對程式碼不會破壞的信心。 - 有時您可能需要重構程式碼,使其更易於測試,但是一旦您這樣做了幾次,您就會開始從可測試性的角度考慮程式碼。 - 在實現任何東西之前,為您預期的實作編寫測試也是一個好主意!導致測試套件一開始就完全失敗,而當您實施一些東西時,它會逐漸保持通過!順便說一句,這基本上就是測試驅動開發(TDD)。 **關心表現** - 沒有人會期望您始終以 60 FPS 的速度執行所有內容,或者所有內容的延遲都低於 100 毫秒。 - 但請注意,您的程式碼何時可能會導致對資料庫發出過多請求,或載入過多資料。不要讓你的元件渲染 5 次,因為你無法弄清楚如何正確使用`useEffect`和`useState` 。在需要的地方尋求協助,但要夠小心,不要讓這些東西進入生產階段。 ![延遲紙飛機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57g9q3qria2u6k6s3of5.gif) **⏫ 進入 SDE2:** - 更深入地了解您使用的語言和框架的內部結構。 🧠 了解 React 如何實際渲染事物。了解瀏覽器如何處理從瀏覽器到伺服器的多個請求。了解 Postgres 如何選擇優化或不優化查詢。了解應用程式部署管道的配置方式。 - 詢問有關專案、元件、API 等是如何建構的問題。了解這些設計模式的名稱以及它們的優點和缺點。開始參與架構討論並提出改進建議。誰知道?您可能有更有經驗的人沒有考慮到的想法。 - 指導他人最佳編碼實務。團隊中常常會有比你資歷低的人。查看他們的程式碼。讓他們審查您的程式碼並分享他們應該關注的內容。像尤達一樣,你應該分享你的智慧。 🧠 ### 2. 生產力[\[🔝\]](#table-of-contents) 作為 SDE1,您的生產力是透過您按時可靠地完成任務、有效管理工作負載以及保持專案一致進度的能力來衡量的。您還應該能夠處理輕微的干擾和依賴性,而不會失去焦點或需要持續的指導。 您可能經常需要依靠工具或應用程式或腳本來更有效地完成某些事情。有時您可能需要自己製作這些工具。 如果感覺太多了也沒關係。它不會總是完美的。即使是更資深的開發人員也並不總是能確定這一點。 你會到達那裡的。重要的是,如果您無法履行承諾,請儘早溝通。 **太長了;博士** 目標是按時出色地完成任務。當您覺得自己做不到時,請盡快讓人們知道。 **知道什麼時候該做什麼,什麼時候該說「不」🙅** - 學會區分什麼是緊急的,什麼是重要的。使用艾森豪威爾矩陣等工具有效地確定優先順序。 - 專注於高影響力的任務,但不要忽略那些讓車輪轉動的小任務。 - **學會說不。**天哪,這是一個很大的。這非常重要,以至於它可以單獨成為一個部落格。我有故事。 - 如果你不善於拒絕,你偶爾會發現自己的工作負擔過重。如果你能簡單、清楚地解釋你正在做的事情,以及你何時能夠處理下一件事情,人們通常會認為這是可以接受的。 - 如果你發現自己被逼入絕境,你需要依靠你的經理來為你確定優先事項。只需詢問他們認為最重要的是什麼。 ![沒有上帝請不](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46j4r2r8b9oho91fduvw.gif) *你看到這個人來了,不是嗎?* **管理好你的時間,別讓自己精疲力竭** - 使用番茄鐘等技巧來保持工作效率而不至於精疲力竭。我有很多朋友使用某種數字或實體番茄計時器來管理他們的工作日。 - 追蹤您在不同任務上的時間,以了解您可能在哪些方面花費了過多或過少的時間。 ![番茄計時器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktom06mrbpkg10u0vslo.png) *我的朋友以前常用的番茄計時器* **如果必須的話,可以透過製作自己的工具來自動化無聊的工作** - 自動執行重複性任務以節省時間。腳本和工具可以處理很多平凡的事情。我已經建立了一大堆腳本、用於內部偵錯的 Slack 命令等,這已經為我和團隊在[Middleware](https://github.com/middlewarehq/middleware)節省了無數的時間。 - 熟悉 IDE 快捷方式、插件和其他可以加快開發過程的工具。如果您的團隊中的大多數人都使用 VSCode 進行開發,您甚至可以就通用 IDE 配置達成一致,並透過將 .vscode 目錄提交到儲存庫來共享該程式碼庫! **⏫ 進入 SDE2:** - 開始更獨立地管理您的專案。建立現實的時間表並滿足它們。 SDE1 可能會不時錯過時間表。 SDE2,則不然。你走得越高,你就越有可能提前完成你的專案! - 主動辨識並解決工作流程中的瓶頸。向團隊提出流程改善建議。通常,您可能沒有時間或支援來實施此類改進。一個可靠的 SDE2+ 舉措就是在其他工作之間的零碎時間裡自己完成,突然有一天,團隊的一些關鍵工作流程痛點神奇地得到了解決!都是因為你。 - 平衡多個專案和任務,同時不忘記最後期限,並了解您並不總是透過每天工作 28 小時來滿足最後期限,您會找到更有效地完成同一件事的方法。因此,表明您可以以相同的生產力水平承擔更多的責任。像托尼史塔克管理他的套裝技術一樣升級你的多任務遊戲! 🦾 ### 3. 合作[\[🔝\]](#table-of-contents) 在 SDE1,您需要清晰溝通、分享您的進步並成為樂於助人的團隊成員。您與他人有效協作的能力對於團隊的成功至關重要。 有很多人依賴你按時交付東西。他們是您的工程經理、產品經理,也許還有他們報告的其他經理,還有等待您完成專案部分的同事。 人們通常可能會晚一點理解某些事情,特別是如果儘早得知的話。但真正導致問題的是: - 不到最後一刻才告訴你會遲到。 - 您的估計不清楚或非常不準確。 我仍然把其中的一些搞砸了。但總體而言,情況確實有所改善。 👌 **太長了;博士** 做一個好的隊友並進行良好的溝通。 ![團隊合作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/385iu3jjbits6zfgq6zz.gif) **早說、常說,但最重要的是──傾聽** - 讓您的團隊了解您的最新進展。透過站立會議和 Jira 或 Trello 等專案管理工具進行定期更新可以幫助每個人保持一致。 (我知道,Jira 很糟糕,但你必須明白,對於你的經理和高層來說,這是一個相當不錯的工具,可以用來追蹤事情的運作情況。) - 在會議和討論期間積極傾聽。在做出回應之前先了解別人在說什麼。 - 成為一個好的傾聽者也會讓你更快找到女朋友/男朋友🤣。如果你不這樣做,我們希望你能通過規則 1 和 2。 **保護您的生產,檢查程式碼** - 積極參與程式碼審查。提供建設性的回饋並樂於接受。非常關心不要讓可讀性差或有潛在風險(效能、使用者體驗或安全性方面)的程式碼最終出現在產品中。 - 從您收到的回饋中學習並將其應用到您未來的工作中。 如果您需要令人信服地了解為什麼程式碼審查至關重要以及如何正確執行,也許這會有所幫助: {% 嵌入 https://dev.to/middleware/the-senior-engineers-guide-to-the-code-reviews-1p3b %} **讓您的團隊隨時了解您所學到的知識** - 與您的團隊分享您所學到的知識。無論是新工具、編碼技巧還是有趣的文章,讓您的團隊了解情況有助於每個人成長。如果您使用 Slack,#engineering 頻道是進行此類活動的好地方。 #memes 也是如此。 😄 - 為程式碼庫或流程的複雜部分撰寫文件並建立指南。這有助於其他人更有效地理解和使用您的工作。記住這個文件需要可搜尋是非常重要的。無法搜尋到的文件就不存在。 [Glean](https://www.glean.com)可能是一個很好的工具來幫助解決這個問題,但它是一個付費(而且昂貴)的東西。 **⏫ 進入 SDE2:** - 發揮指導作用。幫助初級開發人員應對任務和挑戰。幫助他們規劃、估算、記錄等。 - 領導小型專案或倡議。表明您可以協調努力並將團隊聚集在一起以實現共同目標。 - 促進團隊內部的溝通。幫助解決衝突並確保每個人的意見都得到傾聽。每個團隊都有內向的人,通常他們是最難溝通的,盡可能幫助他們。成為團隊中的美國隊長,團結一致,以身作則! 🛡️ ### 4. 所有權[\[🔝\]](#table-of-contents) 擁有所有權意味著對你的工作及其影響負責。作為 SDE1,這意味著您應該確保您的程式碼按預期工作,勤奮地處理您的任務,並履行您的承諾。 就像創始人或執行長必須盡一切努力確保公司生存、繁榮和盈利一樣,你也必須盡一切努力確保你的工作符合規定的時間表,並以以下方式交付:不僅滿足,而且超越標準。 可以理解的是,有時設定的時間表或期望可能根本不切實際。這就是你的溝通技巧需要發揮的地方。 **太長了;博士** 擁有你的工作及其品質。完成你開始的事情。 ![德懷特覆蓋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc5yu0726kgkxrws7xmy.gif) *也許不像……那樣。* **學會承諾** - 如果您致力於一項任務,請堅持到底直至完成。如果遇到障礙,請儘早溝通。 - 不要推卸責任。如果您的程式碼或任務有問題,請努力解決它,而不是責怪他人。 **積極主動:看到一些事情,做一些事情** - 不要等待問題被分配給您。如果您發現有問題需要修復,請主動解決。當然,您需要適當地確定優先順序。並非所有需要修復的東西都需要您先停放正在處理的任何東西並先修復它。 - 提前想好。預測潛在問題並在它們成為問題之前解決它們。對於技術或工程相關的工作,ERD(工程需求文件)可以大大幫助您制定工作計劃。 - 您的經理可能會從他們的角度關注您團隊的生產力,但作為積極主動的開發人員,您也可以這樣做。畢竟,您才是真正了解是什麼讓您有生產力的人。如果你能想出一種方法向你的經理進行生產力分析,向他們展示你的團隊實際上做得很好,或者在需要他們注意的事情上遇到了阻礙,這會讓你得到一些嚴肅的觀點。 DORA 指標是衡量開發團隊生產力的一種相當流行的方法。如果您不確定如何開始衡量這樣的事情,也許這個部落格會有所幫助: [什麼是 DORA 指標?](https://www.middlewarehq.com/blog/what-are-dora-metrics-how-they-can-help-your-software-delivery-process) **每一天,都要比前一天更好** - 反思你的工作。什麼進展順利?還有什麼可以更好的呢?利用這種反思來不斷改進。這將是您的經理將(或應該)進行的 Sprint 回顧的更個人化版本。 - 積極尋求回饋並應用它。努力讓您承擔的每個專案變得更好。對於提供回饋的人來說,共享回饋也是一項艱鉅的工作。如果您的組織沒有為此定義流程,那麼每季、每月等阻止一些時間可能是個好主意。 - 嘗試遵循童子軍規則,該規則基本上規定您應該留下比您發現時更好的程式碼庫。[在這裡閱讀更多內容](https://deviq.com/principles/boy-scout-rule)。 **⏫ 進入 SDE2:** - 從頭到尾推動專案。承擔需要您在最少監督的情況下規劃、執行和交付的任務。如果你證明自己有足夠的自我能力,你的經理可能會讓你監督更多的開發人員來執行這個專案。現在這是一些高級開發的東西。 💪 - 辨識並實施流程、工具或程式碼庫的改進。之前也提到過,但這裡的重點略有不同。表明您正在著眼於更大的前景並為組織的長期成功做出貢獻。 - 倡導最佳實踐並確保它們得到遵循。成為您專案中的蝙蝠俠—可靠、警惕並始終提供卓越服務。 🦇 ### 5.影響[\[🔝\]](#table-of-contents) 作為 SDE1,您的影響可能僅限於分配給您的任務和專案。然而,表現出更廣泛的理解並在你的直接職責之外做出貢獻可以讓你與眾不同。影響力不僅指你所做的事情,也指你的工作如何影響和造福你的團隊、你的專案和整個組織。 **太長了;博士** 做出改變。不只是做,而是改進。 ![往前想](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikxg6wmu8bnj72alus4c.png) **不要局限於“你的工作”** - 了解您所從事的業務和行業。 - 確定改進或創新的機會。建議可以使團隊或產品受益的增強功能。 - 關注產品的最終用戶。了解他們的需求和痛點可以引導您做出更有影響力的貢獻。不要只是建立你要求的任何東西,還要分析你的努力對使用者和組織有多成功。 **為社區做出貢獻** - 參與內部和外部開發者社群。參加聚會、為開源專案做出貢獻或撰寫技術部落格。 - 分享您的知識和專業知識,幫助他人成長和學習。組織技術講座、網路研討會或程式設計訓練營或在技術講座、網路研討會或程式設計訓練營中發表演講。 - 與組織內的其他團隊合作。為跨職能專案提供協助和協作,以擴大您的影響力。 ![瑞安社區服務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh2nexhrfd6azq4cz6qm.gif) *您可能不會被「要求」在工作中幫助您的社區🤣* **積極主動地解決問題** - 超越任務的直接要求。考慮一下您的解決方案如何使其他專案或未來的工作受益。 - 養成批判性思考您使用的工具和流程的習慣。提出並實施可以節省時間、減少錯誤或提高效能的改進措施。 - 不要等待有人給您分配有影響力的工作。尋找機會做出有意義的貢獻,即使這意味著走出你的舒適圈。 有時您可能必須依賴第三方工具來辨識流程中的問題。像[中間件](https://github.com/middlewarehq/middleware)這樣的工具可以讓您發現軟體交付中的問題。現在這是高級開發人員的舉動。 {% 嵌入 https://github.com/middlewarehq/middleware %} **創新與改進** - 隨時了解您所在領域的最新趨勢和技術。嘗試可以使您的專案受益的新工具和方法。 - 考慮工作中的可擴展性和可維護性。設計系統並編寫可以隨著業務需求而成長和發展的程式碼。 - 鼓勵團隊內部的創新文化。促進腦力激盪會議和黑客馬拉松,以產生新的想法和解決方案。 **⏫ 進入 SDE2:** - 開始戰略性思考。找出對團隊目標和公司成功產生重大影響的方法。尋找您和團隊的工作模式,並提出可以使每個人受益的改進建議。大多數人都不太擅長這一點,所以如果你能做到這一點,那絕對會讓你脫穎而出。 - 領導推動創新和改進的措施。表明您可以創造性地思考並提出有效的解決方案。這可能涉及提出新功能、優化現有系統或改進開發流程。 - 倡導可以提高生產力或品質的新技術或方法。 🚀 帶頭將這些技術整合到您的專案中並指導其他人使用它們。 --- 請記住,從 SDE1 升級到 SDE2 以及更高版本是一個旅程。專注於你可以控制的事情,尋求回饋,並不斷改進。作為開發人員,您的成長是技術技能、生產力、協作、所有權和影響力的結合。透過奉獻和努力,您不僅會升級,而且會享受成為更好的工程師和有價值的團隊成員的過程。遊戲開始! 🎮 **PS:資深工程師擅長辨識阻礙團隊準時交付的各種問題,同時又不影響輸出品質。** 其中一些使用[中間件](https://github.com/middlewarehq/middleware)等工具。 {% 嵌入 https://github.com/middlewarehq/middleware %} --- 原文出處:https://dev.to/middleware/going-from-sde1-to-sde2-and-beyond-what-it-actually-takes-1cld

給中級開發人員的建議

序幕 == 我五年前寫了[這個博客](https://dev.to/rampa2510/3-tips-for-new-developers-49hj),當時我還是一名初級開發人員。我當時分享的技巧至今仍然是我遵循的規則,並且已經成為我不可或缺的一部分。作為一名開發人員,我已經成長了很多,所以現在我想作為中級開發人員回饋社區。 這裡提到的建議是針對那些熱愛自己的手藝並希望做得更好的人,不是為了更好的報酬,而是為了享受程式設計的樂趣。 1)熱愛你的工作 -------- 我看過人們把程式設計當作只是一份工作,只是為了錢。他們透過程式設計謀生並過上日常生活。這種生活方式很好,這是你的選擇。但如果你的技能沒有提高並且你變得停滯不前,請不要感到驚訝。要擅長編程,你必須熱愛你的工作。你一天的大部分時間都花在日常工作上編程,如果你不喜歡它,你就不會在工作的同時主動提高你的技能。 我有一個個人故事可以分享。我曾經在一家我討厭的公司工作過。我沒有主動改進程式碼庫或學習新東西來增強應用程式架構。現在,我從事著自己熱愛的工作,並將其視為自己的產品。這通常會引導我學習新事物並以結構良好的方式開發程式碼庫,因為我不想破壞它。如果你做你不喜歡的事,弊大於利。你可以在下班後學習,但你一天會浪費大約六個小時,但收效甚微。 2)成為多面手 ------- 永遠不要把自己放在一個盒子裡。不要認為自己只是前端開發人員或後端開發人員。將自己視為軟體開發人員。優秀的開發人員不會將自己局限於特定的技術,他們專注於解決問題,而不僅僅是問題的一部分。如果你將自己限制在某個堆疊上,你就不會成為一個偉大的問題解決者。軟體開發就是解決問題,如果你不了解如何建立端到端產品,你就不會成為一個好的問題解決者。 在職業生涯開始時,您可能必須選擇特定的堆疊來證明自己是一名出色的軟體開發人員。但不要讓它限制你。如果您在一家優秀的公司工作,請與資深或其他開發人員交談,以深入了解不同的團隊並學習新事物。開始負責公司程式碼庫的其他部分,以轉變為更全端的開發人員角色。這樣,您將開始更多地考慮解決整個問題,而不僅僅是解決部分問題。如果不歡迎您與其他堆疊一起工作,我建議您從事另一份工作。公司永遠不應該限制工程師的學習。 所以,做個多面手。不要將自己限制在堆疊的某一部分。學習作為軟體開發人員解決問題。通才發現更容易擅長解決特定問題,因為他們已經有了廣泛的理解,因此可以更快地掌握新技術。 3)永遠不要停止學習新技術(當修補匠) ------------------- 這是許多開發人員忽略的關鍵點。要成為優秀的問題解決者,您必須隨時了解科技的最新進展。我在嗜好專案中找到了很多樂趣,這幫助我發展了許多技能。當你修補新東西時,你會學到很多東西,而且你永遠不知道它什麼時候會變得有用。 例如,假設您的任務是為您的公司建立一個部落格應用程式。他們想要一個客製化的解決方案,而不是使用 Webflow 和其他類似服務的解決方案。如果您跟上了最新的進步,您可以使用 Supabase 或 Pocketbase 等現代 CMS 工具來快速開發後端。為您的部落格網站設定 CMS 可能只需要 30 分鐘,使您無需建立和管理資料庫和後端程式碼。然後你就可以根據你公司的需求專注於前端。 這是一個個人例子:我已經業餘學習了一個月的 Go。最近,我必須寫一個 cron 作業來每 30 分鐘更新一次使用者指標。我知道 Go 對於此類任務來說非常出色且速度非常快,因此我在 Go 中建立了 cron 作業,建置了二進位文件,並每 30 分鐘安排一個帶有計時器的系統守護程序任務。它工作效率高,消耗的資源更少。如果我沒有在業餘時間修修補補,只在日常工作中編寫程式碼,我就不會在合理的時間內想出最好的解決方案。 cron 作業將以 Node 編寫,隨著使用者群的成長,這將需要更多時間。 因此,永遠不要停止學習和創造。最好的學習方法是創造和修補。我一直在業餘學習 Ruby on Rails 和 Go,並且開始欣賞各種生態系統提供的不同功能。這幫助我將新想法融入我的工作流程中。 4)取得所有權 ------- 我最近觀看了 ThePrimagen 的一段[影片](https://www.youtube.com/watch?v=5i_O6NLXYsM&t=1586s),這激發了我寫這個博客的靈感。他提到解決問題或成為優秀軟體開發人員的最佳方法是擁有產品。他談到《毀滅戰士》是如何由四個人創造出來的,他們因為擁有所有權而交付瞭如此好的產品。他們知道自己沒有其他人可以依賴,因此他們將開發最好的軟體作為自己的責任。沒有備用計劃。 他們從未感到倦怠或放棄,因為他們擁有產品,而不僅僅是任務。 為了提高軟體開發人員的技能,您需要開始掌控您正在建立的產品,而不僅僅是功能或任務。當您將任何功能或錯誤視為您要解決的問題,而不僅僅是其他人的另一項任務時,您會發現開發產品會更加有趣。這是戰勝倦怠的最好方法。當您擁有所有權時,您會發現改進產品並使產品更有效率的樂趣。 如果你正在開發一個產品,當使用者發現它們時,你不能將出現的任何錯誤歸咎於其他人。如果出現問題,你就是問題的一部分,所以你必須承擔起解決問題的責任並創造出出色的產品。好的、可擴展的產品是由團隊建立的,如果你不承擔責任,你就不是一個好的團隊成員。當您擁有所有權時,您可以編寫最好的程式碼來建立最好的軟體,而不僅僅是另一個軟體產品。 就像製作《毀滅戰士》的四個人一樣,他們投入了大量的時間來創造屬於他們的東西,他們從不滿足於只是另一款遊戲,他們創造了一款定義時代的遊戲。其餘的,正如他們所說,是歷史。這同樣適用於你,如果你想製作最好的軟體,你必須開始擁有所有權並將該產品視為你自己的產品。 結語 == 寫完這個部落格並與社區分享我的想法後,我感覺很好。我們可能會爭論框架、語言和工具,但這些爭論有助於我們改進。他們推動技術進步,使我們的社區極具競爭力。讓我們保持激情! --- 原文出處:https://dev.to/rampa2510/advice-for-intermediate-developers-4777

程式設計師必須具備的7個習慣!

介紹 -- 作為一名程式設計師,您知道您的工作需要高度專注,因此往往會佔用您大量的時間。是的,這也發生在我身上,我花了很多時間做任務,但有時結果並沒有達到預期。我意識到我從工作經驗和同事的見解中獲得了一些東西,並且有一本書很有趣並且對改善我的習慣非常有幫助。 您是否知道我們每天都遵循模式和習慣來生活,這些習慣會影響我們目標的結果。所以如果你想改變你的生活並實現你想要的,你要做的第一件事就是改變你的習慣。史蒂芬‧柯維在他的***《高效能人士的七個習慣》一***書中說:「*我們看待世界的方式完全基於我們自己的看法。* 」 讓我們先看看與我們日常活動相關的較小事物,而不是著眼於如此之大的世界。是的,沒錯,我想從我作為一個程式設計師的角度來分享。作為程式設計師,您應該了解一些提高生產力的習慣。其中一些內容也是基於我的經驗,所以結果可能會有所不同,但相信我,如果你練習得好,這將會很有用。好的,讓我們開始吧! **1. 積極主動** 柯維在他的書中描述了我們生活中存在的兩類人。**關注圈**是一個包含我們無法控制的事物的圈。同時,較小的圓圈是**影響圈**,其中包含我們可以控制的東西。 ![主動式和被動式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p50j7r9vgw6hhipidjz2.png) 基於這兩個圈子,**反應型的**人會更多地考慮**關注圈**,而**主動型的**人會更多地考慮**影響圈**。程式設計師也是一樣,我們中間一定有兩類人。 有**一些反應型程式設計師**忙於處理辦公室條件、公司財務等無法控制的事情,他們甚至認為自己的職業生涯可以透過影片《*如何在三個月內成為最好的程式設計師*》來決定。另一方面,也有一些**積極主動的程式設計師**選擇練習,嘗試幾次面試和比賽,以打開成為程式設計師或任何他們夢想的工作的機會。 積極主動的人知道他們需要了解外在事物,但他們才是對自己的職業負責的人。換句話說,要積極主動,你可以更專注於從自己內部尋找靈感,並且可以控制它,而不會忽視自己之外的重要事物,而不是僅僅期望別人給你一個「*神奇食譜*」。 **2.以終為始** 我們中的許多人一生都在隨波逐流,甚至不知道自己的目的。因此,我們所擁有的只是希望,這無論如何都不是一個好的策略。史蒂芬·柯維說「以終為始」換句話說,在做任何事情時,包括啟動一個專案,你必須確定明確的成功衡量標準以及實現這些目標的計劃。 ![開始就要考慮如何結束](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1bbrkhtnd78rarqcfd8.png) 如果您將其應用於編程,那麼每當您開始一個新專案時,您都會花時間了解最終產品。要建構的功能的功能和非功能要求是什麼? 我記得有人說過軟體工程是做出權衡的藝術。很少有正確和錯誤的答案,而是確定不同類型的設計以及特定情況下的優點和缺點的問題。不管你相信與否,我的經驗是,花 30 分鐘仔細規劃可以為你節省 10 多個小時的程式設計時間。 > 「人們比以往任何時候都更加努力工作,但由於缺乏清晰度和遠見,他們並沒有取得多大進展。本質上,他們是在用盡全力推一根繩子。史蒂芬‧柯維博士 當然,這並不容易,因為每個計劃都可能出錯,我也陷入過幾次。但這仍然比根本不計劃任何事情要好得多。 **3、要事第一** 能夠選擇什麼是重要的、什麼是不重要的也是一種有效的習慣。透過根據您的需求對您的興趣進行排序,您將能夠確定首先完成的工作的優先順序。 這個習慣與時間管理密切相關。柯維建議我們根據他建立的四個像限(他稱之為艾森豪威爾矩陣)來做主要事情。 ![艾森豪威爾矩陣](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv4j1roh5p3f4gaw52uc.png) 以前我認為這個象限對於我的任務來說並不那麼重要。事實證明,這一點常常被大多數程式設計師所忽略。當我擔任軟體工程師時,我不斷受到需要解決的錯誤的轟炸。另一方面,我也有長期的專案需要完成。 當你承受如此大的壓力時,你就會忘記學習。因此,如果你的程式碼有問題,你只想去谷歌或使用人工智慧並複製貼上解決方案,而無需真正理解它。是的,真正了解問題的原因對學習來說很重要,但並不迫切。對許多程式設計師來說,隨著職業的進步,學習就會停止。這就是為什麼你需要專注於屬於這個象限的任務,並為你的長期成功安排特定的時間。換句話說,優先考慮並實現最重要的目標,而不是不斷地對緊急情況做出反應。 **4.雙贏思維** 一個人的**收穫**就是另一個人的**損失**——這個想法在我們的大腦中非常熟悉,可能是因為我們經常觀看的各種比賽和體育賽事。在這本書中,柯維博士認為培養「豐富心態」很重要。也就是說,相信有足夠的資源和機會讓每個人都獲得成功。這種心態對於軟體工程師的職業生涯成功至關重要。我們與其他工程師和其他工作職能人員(例如資料科學和產品管理)一起工作。 ![雙贏協議](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1thqzuw744a9usc2ezo.png) 能夠有效協作是您需要具備的主要技能之一。因此,能夠超越個人職業目標並為團隊擁有雙贏的心態非常重要。不只是透過讓別人輸來贏得自己,或是屈服於別人讓他們贏,甚至讓別人輸,因為我們也輸了。 習慣了總是想著能夠贏得多方的支持,會讓我們總是努力取得最好的結果。不僅如此,從長遠來看,這也極大地影響了我們與他人的關係。 為了建立長期良好的關係,我們需要與許多人建立關係。透過**雙贏思維**,這將有助於我們在未來建立良好的聲譽或形象,並使我們的工作從長遠來看更加有效。 **5. 首先尋求理解,然後被理解** 你是那種在給別人機會之前就忙著徵求自己回饋的人嗎?這不是史蒂芬·柯維所推薦的。 ![先尋求理解,再尋求被理解](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bg3uigm6p7xm7h9stc7v.png) 為了被別人理解,我們首先要做的就是**先理解別人**。高效能的人能夠具有極大的同理心,並透過理解他人來尊重他人。 但這如何適用於程式設計師呢?除了口頭交流之外,工程師還使用程式碼來相互交流。高效率的程式設計師了解**同理心**在編碼中的重要性。他們優先考慮程式碼的清晰度,以確保其他人(包括將來的自己)可以輕鬆理解和維護程式碼。 除了其他工程師之外,程式設計師還透過他們的產品與最終用戶進行交流。高效率的程式設計師會設身處地為最終使用者著想,優先考慮使用者體驗。他們預測用戶需求,設計可交付的介面,並建立錯誤訊息來引導用戶而不是讓他們感到困惑。 **6. 協同增效** 能夠與他人很好地協同工作的人將是高效的人。透過良好的關係和協作,您可以建立比僅依靠自己更好的解決方案。數學上1 + 1 = 2。 ![協同作用](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb8uq52jfzpkl28kyp32.png) 柯維博士在他的書中強調了欣賞差異並利用差異創造一個大於各個部分總和的整體的重要性。因此,關鍵在於充分發揮每個團隊成員的作用,創造出使用者喜愛的產品。高效的程式設計師採用**協作**編碼實踐,例如程式碼審查、配對程式設計和其他知識共享。透過結合個人技能和見解,團隊可以建立更強大、更有效率和創新的產品。 儘管這並不容易,尤其是對於程式設計師來說,他們大多數都是單獨工作,但透過習慣這一點,我們不僅可以成為獨立的人物,而且可以成為可以與任何人一起工作和良好協作的人。 **7.磨利鋸子** 高效率的人會在生活中不斷實踐事物,從而不斷進步、良好發展。科維說,我們在生活中必須磨練四件主要的事情:***身體、心靈、精神和精神***。是的,總的來說,這對於任何領域的生活來說都是非常重要的。但讓我們試著專注在更具體的事情上。 ![敏銳的發現](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2tj8no1yezmseadugi4.png) 對程式設計師來說,這是最重要的習慣。為了理解這個習慣,我們假設有兩個工人正在嘗試砍柴。第一個工人是個年輕人,整個8小時的輪班時間裡,他一直不停地砍柴。第二位工人是一位年紀較大的男子,每小時需要休息 10 分鐘,在休息期間他會花時間磨鋸子。如果你認為年長的人會砍更多的木頭,那麼你就已經理解了這個習慣。 作為一名程式設計師,你將面臨如此多的新技術。高效率的程式設計師了解**持續學習**的重要性。磨礪鋸子需要投入時間來獲取新技能、了解產業趨勢以及探索新技術。高效率的程式設計師必須透過練習、參加會議、參加程式設計社群等方式騰出時間進行專業發展。這種習慣可以幫助我們適應科技進步。 **結論** 有時候,在我們不知不覺中,壞習慣或多或少影響我們的生活,讓我們的生活變得低效。然而,一個習慣如果持續太久,就很難打破。 如果我們想要改善我們的生活,從改變我們的觀點到改變我們的習慣,這就是我們需要理解的。實踐史蒂芬‧柯維所說的這七個習慣將幫助我們更有效、更有意義地改變我們的生活。 僅僅了解這些習慣是不夠的,我們還必須全部應用它們,因為每一點都同樣重要且相互關聯。因為只有過有效的生活,我們才能走上更大成功的道路。 **參考** [富蘭克林科維](https://www.franklincovey.com/the-7-habits/) [高效能人士的七個習慣](https://books.google.co.id/books?id=36V_PAAACAAJ&hl=id&source=gbs_book_other_versions_r&cad=1) --- 原文出處:https://dev.to/tentanganak/7-habits-that-programmers-must-have-1dfj

Git 分支策略指南

自 2008 年以來,作為一名開發人員,我親眼目睹了版本控制系統的演變。從 SVN 開始,最終過渡到 Git,我已經看到這些工具如何在我們的日常工作流程中變得不可或缺。讓我分享一個詳細的分支策略,該策略已被證明在管理程式碼庫、確保穩定性和促進協作方面非常有效。 #### 主要分行 - **`main` (或`master` )分支:** - 生產就緒的程式碼。 - 僅包含經過徹底測試且穩定的程式碼。 - 直接提交受到限制;僅允許在程式碼審查和批准後透過拉取請求 (PR)。 - **`develop`分支:** - 反映當前開發狀態的最新程式碼庫。 - 所有功能和修復都在合併到`main`之前整合到此分支中。 - 作為所有新功能分支的基礎。 #### 支持分行 - **特色分支:** - **命名約定:** `feature/<feature-name>` - **建立自:** `develop` - **目的:**用於開發新功能或增強功能。 - **合併:**完成並測試後,合併回`develop` 。 - **錯誤修復分支:** - **命名約定:** `bugfix/<issue-id>` - **建立自:** `develop` (或`release` ,如果修復是針對即將發布的版本) - **目的:**修復開發過程中發現的錯誤。 - **合併:**修復後合併回`develop` (或`release` ,如果適用)。 - **發布分支:** - **命名約定:** `release/<version-number>` - **建立自:** `develop` - **目的:**為新的生產版本做好準備。 - **活動:**最終測試、錯誤修復和準備發行說明。 - **合併:**準備好後合併到`main`並`develop` 。 - **修補程式分支:** - **命名約定:** `hotfix/<issue-id>` - **建立自:** `main` - **目的:**用於需要直接投入生產的緊急修復。 - **合併:**一旦應用,就合併到`main`和`develop` 。 #### 分行工作流程 1. **功能開發:** - 使用`feature/<feature-name>`從`develop`建立分支。 - 實現該功能,提交變更並將分支推送到儲存庫。 - 開啟拉取請求以將功能分支合併到`develop`中。 - 進行程式碼審查,執行必要的測試,並將變更合併到`develop`中。 2. **錯誤修復:** - 使用`bugfix/<issue-id>`從`develop`建立一個分支。 - 修復錯誤、提交變更並推送分支。 - 開啟拉取請求以將 bugfix 分支合併到`develop`中。 - 經過審查和測試後,將變更合併到`develop`中。 3. **發布準備:** - 使用`release/<version-number>`從`develop`建立一個分支。 - 執行最終測試,修復所有最後一刻的錯誤並更新文件。 - 準備好後,將發布分支合併到`main`分支和`develop` 。 4. **修補程式:** - 使用`hotfix/<issue-id>`從`main`建立一個分支。 - 應用修復、提交變更並推送分支。 - 開啟拉取請求以將修補程式分支合併到`main`中。 - 將變更合併到`develop`中,以將修復包含在正在進行的開發中。 #### 最佳實踐 - **定期合併:**定期`develop`合併到功能分支中,以保持更新並避免整合問題。 - **程式碼審查:**在合併任何分支之前進行強制性程式碼審查,以確保品質和遵守標準。 - **自動化測試:**實施與自動化測試的持續集成,以儘早發現問題並保持程式碼品質。 - **文件:**記錄所有更改,包括程式碼中的註釋、更新日誌和全面的提交訊息。 [揭秘高級 Git 指令:簡單指南](https://dev.to/amit_k_812b560fb293c72152/demystifying-advanced-git-commands-a-simple-guide-1lpj) --- ### SVN 與 Git 比較 #### SVN(顛覆) - **集中版本控制:** SVN依賴中央伺服器來儲存專案文件的所有版本。 - **提交結構:**更改直接提交到中央儲存庫。 - **分支:**分支通常在伺服器上建立,分支操作可能很慢並且佔用資源。 - **合併:**與 Git 相比,合併可能更複雜且效率更低。 #### git - **分散式版本控制:** Git 允許每個開發人員擁有整個專案歷史記錄的本機副本。 - **提交結構:**更改首先在本地提交,然後可以推送到遠端儲存庫。 - **分支:**分支輕量且快速,鼓勵使用功能分支。 - **合併:** Git 的合併功能更先進,可以更輕鬆地整合來自不同分支的變更。 --- 我希望本指南對您有所幫助,就像自從 Git 成為我的日常夥伴以來它對我的幫助一樣。快樂編碼! --- --- 原文出處:https://dev.to/ak_23/branching-strategy-guide-24d6

建構強大的 CI/CD 管道:綜合指南

歡迎參加 DevSecOps in 5 的第 2 週:您獲得安全開發超級大國的門票! \_嘿,安全冠軍和編碼戰士! 您是否渴望提升 DevSecOps 水平並成為堅如磐石的軟體架構師?好吧,您來對地方了!這個為期 5 週的部落格系列是您掌握安全開發和部署的快速通道。 準備好拋棄開發戲劇,對您的安全實踐建立不可動搖的信心。我們同舟共濟,所以係好安全帶,讓我們踏上這段史詩般的旅程! --- 軟體開發環境處於不斷變化的狀態。更快的發布週期、不斷發展的技術以及不斷增長的品質需求正在推動團隊採用敏捷方法並擁抱自動化。進入 CI/CD 管道—簡化軟體交付背後的主力。這篇部落格深入探討了 CI/CD 的世界,提供了從入門到探索先進技術的全面指南。 為什麼 CI/CD 管道是您的秘密武器 ------------------- 在深入研究之前,讓我們先了解 CI/CD 管道無可否認的優勢: #### 更快的上市時間: 漫長的發布週期的日子已經一去不復返了。 CI/CD 可自動執行建置、測試和部署流程,從而實現頻繁且更快的部署。新功能可以更快地觸及用戶,保持他們的參與度並培養競爭優勢。 例:想像一家公司正在開發一個新的電子商務平台。透過實施 CI/CD 管道,他們可以自動部署新功能,例如改進的搜尋功能或更快的結帳流程。這使他們能夠快速響應用戶反饋和市場趨勢,在競爭中保持領先地位。 #### 提升軟體品質: 想像一下,儘早發現錯誤並在影響生產之前防止回歸。 CI/CD 在整個管道中整合了自動化測試。單元測試、集成測試,甚至端到端測試都可以無縫集成,確保每個階段的程式碼品質。 範例:開發金融服務應用程式的公司可以利用具有強大單元和整合測試的 CI/CD 管道。這確保帳戶管理和交易處理等關鍵功能在投入生產之前經過徹底測試,從而最大限度地減少錯誤和財務損失的風險。 #### 提高協作和效率: CI/CD 透過打破開發和營運團隊之間的孤島來促進協作。開發人員可以充滿信心地編寫程式碼,因為他們知道自動化測試提供了安全網。營運團隊受益於可預測和簡化的部署。這培育了一種共同所有權和責任的文化。 範例:在傳統的開發過程中,開發人員可能會將程式碼「越過牆」扔給操作,導致相互指責和延遲。透過 CI/CD 管道,兩個團隊都參與整個過程。開發人員可以看到他們的程式碼在自動化測試中的執行情況,而操作人員可以更了解即將進行的部署。這可以促進更順暢的協作和更快的問題解決。 設定您的第一個 CI/CD 管道(不僅僅是 Jenkins) ------------------------------ 雖然 Jenkins 仍然是一個流行的選擇,但 CI/CD 環境提供了大量工具來滿足您的特定需求。以下是一些受歡迎的競爭者,以及他們的優勢的簡要概述: #### GitLab CI/CD: 與 GitLab 緊密整合,實現無縫版本控制和 DevOps 工作流程。非常適合已經使用 GitLab 進行程式碼管理的團隊。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1masi4ldtu7fm6bz5kva.png) #### Circle CI: 基於雲端的平台以其易用性、可擴展性和注重開發人員體驗而聞名。對於尋求用戶友好且可擴展解決方案的團隊來說,這是一個不錯的選擇。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3sozor0d4vf3iik92n6.png) #### Azure DevOps: Microsoft 提供全面的 DevOps 工具鏈,提供 CI/CD 管道以及建置管理和工件儲存庫等其他功能。非常適合大量投資於 Microsoft 生態系統的組織。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxmg0lxkoduvbopjhtll.png) #### Travis CI: 開源平台以其簡單性和專注於持續整合而聞名。對於小型團隊或從 CI/CD 開始的團隊來說,這是一個不錯的選擇。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd6fr17cr7ckgfn5isyl.png) 現在,讓我們探討 CI/CD 管道的常見階段及其用途: #### 程式碼提交: 將變更推送到版本控制系統 (VCS)(如 Git)的觸發點。 #### 建造: 程式碼被編譯成可部署的工件(例如,可執行檔、WAR 檔)。 #### 測試: 針對建置的工件執行自動化測試,以辨識任何錯誤或回歸。 #### 部署: 測試成功後,工件將部署到目標環境(暫存、生產)。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr66y6ycum7sd9suxpdd.png) #### CI/CD 工作流程設定範例(使用 GitLab CI/CD): ``` stages: - build - test - deploy build: stage: build script: - npm install - npm run build test: stage: test script: - npm run test deploy: stage: deploy script: - scp -r dist/ user@server_ip:/var/www/html/my_app only: - master ``` 將版本控制與 CI/CD 整合:自動化的力量 ---------------------- VCS 在 CI/CD 管道中發揮著至關重要的作用。這就是它的工作原理: #### 版本控制系統 (VCS): Git 等工具追蹤程式碼更改,允許開發人員協作並在需要時恢復到先前的版本。 CI/CD 管道利用此功能來確保可追溯性並在部署失敗時促進回溯。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mikn0zfpeydo5oiv2mno.png) #### 管道執行的觸發器: CI/CD 管道可以設定為自動觸發 VCS 內的特定事件。常見的觸發因素包括: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3t78w8ex3pzkjpnwkg2.png) #### 程式碼提交: 每當開發人員將程式碼變更推送到特定分支時,管道就會啟動。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxx9bnifs1go7mw4frhx.png) #### 合併到特定分支: 僅當程式碼合併到特定分支(例如 master 或 staging)時才能觸發管道。這允許對部署進行更多控制。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwx42no4pb94b3xxovzw.png) #### 被推送的標籤: 將標籤推送到儲存庫可以觸發管道,通常用於與版本相關的部署。 #### 分支策略: CI/CD 管道可以客製化以適應不同的分支策略。以下是兩種常見的方法: #### 功能分支工作流程: 開發人員為開發工作建立功能分支。完成並進行程式碼審查後,程式碼將合併到主分支(例如 master),觸發 CI/CD 管道進行部署。這種方法允許單獨開發和測試新功能。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8hmkjpemri80yjn2h9m.png) #### Git 流程工作流程: 此策略利用專用的開發分支進行持續開發。功能從開發中分支出來,並在測試後合併回來。合併以開發觸發 CI/CD 管道以部署到臨時環境。最後,從開發部署到生產需要手動升級。這種方法在開發、登台和生產環境之間提供了明確的分離。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l6zc5zq47nljqjs17w4.png) #### 選擇分支策略: 最佳策略取決於您的團隊規模、專案複雜性以及所需的部署控制等級。功能分支工作流程適合專案較簡單的小型團隊。 Git Flow 為大型團隊或複雜專案提供了更多的環境控制和分離。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsvx28v0iigzvwfobfng.png) 持續交付與持續部署: ---------- 了解差異 這些術語經常互換使用,但有一個關鍵區別: #### 持續部署: 成功完成管道後,變更將自動部署到生產中。這種方法需要強大的測試和對程式碼品質的高度信心。它非常適合風險承受能力低且注重快速迭代的應用程式。 範例:開發社交媒體應用程式的公司可能會利用持續部署來實現不影響核心功能的功能。自動化測試可確保品質,快速部署可實現快速實驗和功能推出。 #### 持續交付: 該管道自動建置、測試並部署到臨時環境。在部署到生產之前需要手動批准。這種方法為關鍵應用程式提供了一個安全網,並允許在實施變更之前進行手動監督。 例如:開發金融交易平台的公司可能會從持續交付中受益。管道成功執行後,部署將在投入生產之前進行分階段和審查。這確保了關鍵功能在影響現實世界的交易之前經過徹底的測試和批准。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rlprqoto2rihmk28xu3.png) #### 選擇正確的策略: 持續部署和持續交付之間的選擇取決於以下因素: #### 風險承受能力: 對於具有高風險或影響的應用程式,可能首選透過手動批准進行持續交付。 #### 應用關鍵性: 關鍵任務應用程式可能會受益於生產部署之前手動批准的額外安全網。 #### 測試覆蓋範圍: 強大而全面的測試對於持續部署至關重要。如果測試範圍較小,則透過手動審核進行持續交付可能是更安全的選擇。 #### 回滾策略:總是有一個 B 計劃 無論您的 CI/CD 管道多麼細緻,都可能會出現不可預見的問題。制定回滾策略可確保您可以快速恢復到穩定狀態: ### 版本控制的救援: 如果部署出現問題,VCS 允許您輕鬆恢復到先前的程式碼提交。這是一種快速可靠的回滾部署方法。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doul01tn1rf1bn51cs95.png) #### 回滾腳本: 在 CI/CD 管道中定義腳本,以便在發生故障時自動回滾部署。這可能涉及恢復基礎架構變更或降級配置。這些腳本提供了一種更自動化的回滾方法。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4swhforiux7h7sxnykkn.png) #### 藍/綠部署: 此策略涉及將新版本部署到單獨的環境(綠色),同時保持現有版本運作(藍色)。如果新版本正常執行,流量將切換到綠色環境。如果出現問題,可以無縫切換回藍色。藍/綠部署可最大限度地減少回滾期間的停機時間。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rhcwn0cwttal0yfymgk.png) #### 選擇回滾策略: 最佳方法取決於您的特定需求。 VCS 回滾簡單可靠,但需要手動介入。回滾腳本提供自動化,但需要仔細的設計和測試。藍/綠部署提供了更強大的回滾方法,但可能需要額外的基礎設施設定。 將您的 CI/CD 管道提升到新的水平 ------------------- #### CI/CD 管道安全: 安全性在任何軟體開發過程中都是至關重要的,CI/CD 管道也不例外。以下是保護管道安全的一些最佳實踐: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hl4xwf0krot2nlx54p0.png) #### 管理秘密: 使用機密管理工具安全地儲存密碼、API 金鑰和資料庫憑證等敏感資訊。這些工具對機密進行加密並限制對 CI/CD 管道內授權使用者和應用程式的存取。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ieww0aoauvexapf9dkq.png) #### 限制存取控制: 在 CI/CD 工具中定義明確的存取控制,以限制誰可以修改或觸發管道。實施基於角色的存取控制 (RBAC) 以根據使用者角色和職責授予權限。這確保只有授權的個人才能更改管道配置。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxvwarjo75beumbr0swk.png) #### 定期安全審核: 對 CI/CD 管道進行定期安全審核,以辨識和解決潛在漏洞。這種主動方法可以最大限度地降低未經授權的存取或安全漏洞的風險。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0gobpx2nw8b0u9e867h.png) #### 監控和記錄: 密切監控 CI/CD 管道的性能和錯誤檢測。實施日誌記錄解決方案來追蹤管道執行並辨識潛在的瓶頸或故障。用於監控和記錄的常用工具包括: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzg4r2y894s742wbxd04.png) #### 格拉法納: 一個開源平台,用於視覺化來自各種來源(包括 CI/CD 管道)的指標和日誌。這允許您建立儀表板來監控管道執行狀況、建置時間和部署成功率。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vrob5ut2ipkrq6iz6y4.png) #### ELK 堆疊(Elasticsearch、Logstash、Kibana): 用於收集、儲存、分析和視覺化日誌的強大工具組合。您可以使用 ELK Stack 集中來自 CI/CD 管道和其他系統的日誌,以進行全面監控和故障排除。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg5aqvi50jyoyd0rh81q.png) #### 內建監控工具: 許多 CI/CD 平台提供內建的監控和日誌記錄功能。利用這些工具深入了解管道執行並辨識潛在問題。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djrjfa9uk1if4jux25zg.png) #### 不同程式語言的 CI/CD: CI/CD 管道與語言無關。特定於您的程式語言的建置工具和測試框架可以無縫整合在管道中。這裡有些例子: #### 爪哇: Maven 或 Gradle 等建置工具可用於自動化 Java 應用程式的建置流程。可以整合 JUnit 等測試框架以進行單元測試和整合測試。 #### JavaScript: 對於 JavaScript 專案,npm 或yarn 等工具可以管理依賴項。 Jest 或 Mocha 等測試框架可用於自動化測試。 #### Python: Python 專案經常利用 setuptools 或 Poetry 等建置工具。像unittest或pytest這樣的測試框架是自動化測試的流行選擇。 請記住:雖然 CI/CD 管道的核心概念在不同語言中保持一致,但特定工具和配置可能會有所不同。研究適合您選擇的程式語言的最佳實踐和工具,以優化您的 CI/CD 管道。 加深您的 CI/CD 專業知識:進階主題 -------------------- CI/CD 是一個不斷發展的領域。讓我們探索一些進階概念,將您的管道推向極限: #### 先進的 CI/CD 技術: #### 基礎設施即程式碼 (IaC): Terraform 或 Ansible 等工具可讓您將基礎架構配置定義為程式碼。這些配置可以整合到您的 CI/CD 管道中,以自動化基礎設施配置和管理。 IaC 促進基礎設施的一致性、可重複性,並減少手動配置錯誤。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpivmcb9c1792csuhjdo.png) #### 與遺留系統的持續整合: 將遺留系統整合到 CI/CD 管道中可能具有挑戰性。策略包括使用包裝器或適配器透過 API 公開遺留功能。這允許遺留系統與管道互動以進行自動化測試和部署。 #### 藍/綠部署: 前面討論過,藍/綠部署可最大限度地減少應用程式更新期間的停機時間。透過先部署到單獨的環境,您可以確保在出現問題時無縫回滾。 #### 金絲雀部署: 此策略涉及將應用程式的新版本部署到一小部分使用者(金絲雀),以便在全面部署之前辨識並修復問題。金絲雀部署可讓您在將新版本公開給所有使用者之前在有限的範圍內測試新版本,從而最大限度地降低風險。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5df1jw6f9ckmtop4t7y.png) #### 不同專案類型的 CI/CD: #### 微服務架構: 基於微服務的應用程式可以受益於旨在處理單一微服務的獨立建置、測試和部署的 CI/CD 管道。這允許更快地部署和更輕鬆地管理複雜的應用程式。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uqrrbc30qetaklxuvmn.png) #### 使用 Docker 進行容器化: Docker 容器提供了一種打包和部署應用程式的標準化方法。 CI/CD 管道可用於跨環境自動建置和部署 Docker 映像。容器化簡化了部署並確保跨環境的應用程式行為一致。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xakuitegoux6baihwdb4.png) #### 用於機器學習 (ML) 專案的 CI/CD: 機器學習專案通常需要管理大型資料集和複雜模型。 CI/CD 管道可以客製化為: #### 自動化資料版本控制和管理: 確保用於培訓和測試的資料與程式碼變更一起進行追蹤和版本控制。這樣可以實現可重複性並更輕鬆地進行故障排除。 #### 整合模型訓練與測試: 在管道中利用 TensorFlow 或 PyTorch 等工具來自動化模型訓練和測試過程。這確保了模型在部署之前經過嚴格評估。 #### 管理模型部署: CI/CD 管道可用於將經過訓練的模型部署到生產環境。這簡化了流程並確保開發和生產模型之間的一致性。 持續改進與優化: -------- #### 效能優化: CI/CD 管道可能會遇到效能瓶頸,尤其是隨著專案的成長。以下是一些優化策略: #### 快取依賴: 快取經常使用的依賴項(例如,庫、套件)以減少建置期間的下載時間。這可以顯著提高建置速度,尤其是對於大型專案。 #### 並行化: 分解可以同時執行的管道階段(例如,不同模組的單元測試)並並行執行它們。這減少了整體管道執行時間。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb4qguz8vmi4vb6anaiw.png) #### 資源優化: 根據管道階段的要求分配適當的資源(CPU、記憶體)。這確保了資源的有效利用並避免了瓶頸。 #### 指標和監控: 不要只是建立管道,還要積極監控其效能和運作狀況。就是這樣: #### 定義關鍵績效指標 (KPI): 確定代表管道有效性的指標,例如建置時間、部署頻率和回滾率。隨著時間的推移追蹤這些 KPI,以確定需要改進的領域。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8quogqkfkkjbkul4ype8.png) #### 利用監控工具: 實施 Grafana 或 Prometheus 等監控工具來視覺化管道指標並辨識潛在問題。這使您能夠主動解決瓶頸和效能下降。 #### 追蹤管道日誌: 日誌提供了有關管道執行的寶貴見解。利用 ELK Stack 等日誌分析工具來分析日誌並辨識可能表明潛在問題的錯誤或警告。 #### CI/CD 版本控制: 就像程式碼一樣對 CI/CD 管道配置進行版本控制。原因如下: #### 追蹤變化: 版本控制允許您追蹤對管道配置所做的更改,類似於追蹤程式碼更改的方式。這有助於在必要時進行回滾,並確保您可以恢復到先前的工作配置。 #### 協作與評審: 透過版本控制,多個團隊成員可以協作處理管道配置並在部署之前檢查變更。這可以促進最佳實踐並降低錯誤風險。 #### 災難復原: 如果您的 CI/CD 管道出現重大問題,版本控制可以讓您快速恢復到已知的良好狀態。這可以最大限度地減少停機時間並確保您可以從意外問題中恢復。 CI/CD 的未來:展望未來 -------------- CI/CD 格局不斷發展。以下是一些值得關注的令人興奮的趨勢: #### CI/CD 中的人工智慧和機器學習: 人工智慧可以自動化管道內的任務、優化資源分配並預測潛在問題。機器學習可用於分析歷史資料並提出管道的改進建議。這裡有些例子: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frk52c5r06hdj3dvhc6r.png) #### 自動測試用例產生: AI可用於分析程式碼並自動產生測試案例,提高測試覆蓋率並減少手動工作。 #### 預測管道分析: 機器學習演算法可以分析管道資料,以在潛在瓶頸或故障發生之前預測它們。這允許主動幹預並確保管道平穩執行。 #### 自癒管道: 想像一下可以自動偵測故障並從故障中恢復的管道。這可能涉及重新啟動失敗的階段或回滾部署。人工智慧和機器學習在開發自我修復管道方面可以發揮至關重要的作用。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uf4xg8jl4yvtcy4fqyd.png) #### 無伺服器應用程式的 CI/CD: 無伺服器功能變得越來越流行。 CI/CD 管道可用於自動部署和管理無伺服器功能。就是這樣: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7lflsufhkb84dsqk7dk.png) #### 建置與打包無伺服器功能: CI/CD 管道可用於建置無伺服器函數並將其打包到特定於雲端提供者的部署工件中(例如,AWS Lambda 套件、Azure Functions)。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mnbn81w0w66yw39aq3x.png) #### 部署和管理無伺服器功能: 此管道可以自動將無伺服器功能部署到目標雲端平台。此外,它還可以根據流量模式管理配置更新和擴充。 #### 監控和優化無伺服器功能: CI/CD 管道可以與監控工具集成,以追蹤無伺服器功能的效能和成本。這允許持續優化和成本管理。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qv998kwcpr7cbo3fug4.png) 透過採用這些進步並不斷改進您的 CI/CD 實踐,您可以確保您的軟體交付快速、高效且可靠。以下是一些鞏固您的 CI/CD 知識的結論: CI/CD 是一段旅程,而不是目的地 建立防彈 CI/CD 管道是一個持續的過程。隨著專案的發展,調整和完善您的管道以滿足不斷變化的需求。隨時了解最新趨勢和工具,以持續優化您的 CI/CD 工作流程。 溝通和協作是關鍵成功的 CI/CD 管道需要開發、營運和安全團隊之間的密切協作。促進開放式溝通並鼓勵回饋,以確保管道符合每個人的需求。 測量和分析 不要只是建造管道並設置它就忘記它了。定期監控管道性能、分析指標並確定需要改進的領域。使用資料驅動的見解來優化您的 CI/CD 流程並確保其提供最大價值。 結論 -- CI/CD 管道是現代軟體開發的主力。透過了解本綜合指南中探討的核心概念、最佳實踐和先進技術,您可以幫助您的團隊更快、更有效率地交付高品質的軟體。擁抱 CI/CD,不斷改進您的管道,並見證您的軟體交付飆升至新的高度。 --- 我很高興有機會與您一起深入研究《建立防彈 CI/CD 管道:綜合指南》。這是一個令人著迷的領域,具有改善安全狀況的巨大潛力。 感謝您與我一起探索《建立防彈 CI/CD 管道:綜合指南》。您持續的興趣和參與推動了這趟旅程! 如果您發現有關建立防彈 CI/CD 管道:綜合指南的討論有幫助,請考慮與您的網路分享!知識就是力量,尤其是在安全方面。 讓我們繼續談話吧!在下面的評論中分享您的想法、問題或經驗《建立防彈 CI/CD 管道:綜合指南》。 渴望了解有關 DevSecOps 最佳實踐的更多資訊?請繼續關注下一篇文章! 透過共同努力並採用安全的開發實踐,我們可以建立一個更具彈性和值得信賴的軟體生態系統。 請記住,安全開發之旅是一個持續學習的過程。這是為了持續改進! --- 原文出處:https://dev.to/gauri1504/building-a-bulletproof-cicd-pipeline-a-comprehensive-guide-3jg3

我在 IT 產業工作了 10 多年。這是我希望在開始時就知道的 5 件事

我需要吐露一些心聲,所以我在這裡,希望能與年輕的 IT 專業人士分享一些有用的東西。在我的職業生涯中,我經歷了自由工作、實習、公司工作、職業轉變,甚至推出了自己的 SaaS(這個故事下次再說…)。我犯過無數的錯誤,也學到了一些慘痛的教訓。以下是我希望 10 年前就知道的 5 件重要事情。 1. 一致性是關鍵 --------- 曾經有一段時間,我懷疑自己所做的一切——品質、選擇、從方向到技術堆疊。我在技術之間切換,考慮放棄我正在做的事情,並再次改變職業。這導致我對自己的技能缺乏信心,常常感到非常沮喪。再加上自由職業的收入和普遍的內向——我甚至沒有任何更有經驗的人可以諮詢來衡量我的進步。這很艱難——當時我主要建立 WordPress 網站。如果我把時間浪費在懷疑和優柔寡斷上,專注於一條職業道路,我會取得更多、更快的成就。選擇一條道路並堅持下去——它會比廣泛的平庸發展的技能產生更多的結果,尤其是在開始時。 這也適用於尋找你的第一份工作。如果您一開始無法找到夢想的工作或任何 IT 工作,那麼這還沒結束。是的,這可能需要幾個月甚至幾年的時間!但如果您覺得 IT 是您的位置,請繼續挖掘該位置。找臨時工作維持生計。尋找更便宜的住房,如果有必要的話,和父母住在一起。購買便宜且健康的食物(提示:您吃的蛋白質越多,您一整天感到的飢餓感就越少)。如果您有系統地投入時間來發展和找工作 – 您就會成功。 2. 你會掙扎並且不理解事情-這是正常的(隨著時間的推移,情況會好起來,但不會完全好) ------------------------------------------- 隨著時間的推移,它會變得更容易,但鬥爭永遠不會完全消失。我在大學逃課,留下了我的電腦科學基礎知識中的空白,而這些空白是經驗無法填補的。但這還不是最重要的。最重要的是,在工作中,你會存在著知識上的空白。也許不是在特定的工作、角色或專案中——你可以徹底學習一個專案,特別是如果你在它上工作的時間足夠長的話。但總體上不了解有關您職業的某些事情是正常的。您不需要了解曾經建立的每一個處理器架構;系統架構師不需要了解特定的測試工具。您不需要徹底了解亞馬遜的每項服務來建立強大的測試系統。這是正常的。 3.不要執著於一份糟糕的工作 -------------- 有時你最終會得到一份糟糕的工作。認識到一份糟糕的工作很簡單——一天結束時,你想把自己裹在毯子裡,躲在角落裡,最重要的是,工作中沒有人可以與你談論改善情況。糟糕的工作可能有多種原因 - 有時是團隊,有時是管理層,有時是你 - 不適合該職位,招聘錯誤,但沒關係。不好的是堅持那份工作。原因可能有很多——沒有安全網、沒有合適的替代方案、對新工作的到來沒有信心……你決定等待。等待、忍受、拖拖拉拉,直到你完全精疲力盡,或者儘管你付出了努力,但還是被明確地趕出了家門。這種情況可能發生在你職業生涯的任何階段,你絕對不能讓它發展到極端。如果你覺得有什麼不對勁,那你可能是對的。如果你強烈地不想去上班——那就是有問題了。切斷這些聯繫,否則你會精疲力竭,或在一個糟糕的地方紮根數週、數月、甚至數年,而沒有力量去改變任何事情。當臨界點到來時,你會面臨更疲憊的情況。 4. 經常換工作可能有好處,但不適合所有人 --------------------- 我仍然看到對初學者程式設計師的建議:多換工作。他們說,這樣你就會獲得更多經驗。在這裡一年,在那裡六個月,三、四年後,你的經驗就和高年級學生一樣了。這可以工作。但這並不適合所有人。 人們在如何集中和保持注意力方面存在差異。如果你沒有註意力不集中的問題,你可以輕鬆地在一個地方工作幾年,並徹底學習所有流程——這將增加你在當前公司的價值,並為你在未來的面試中提供故事。人們低估了深刻的理解,但許多職位和公司卻很重視它。 跳槽也很有用,但對於那些在任務被理解後難以保持注意力的人來說可能是有益的。對這些人來說,當工作中的驚喜消失或接近消失時,工作就變成例行公事,他們可能會開始破壞它。如果你有這樣的感覺——這可能就是你的情況,你需要從熟悉的地方跳到未知的地方。一次又一次。隨著時間的推移,這些人會成為具有超強適應性的專家,對他們來說,新語言或新領域都不會成為障礙。 及時辨識什麼適合您個人非常重要。 5. 不要錯過機會,即使它們看起來很小或微不足道 ------------------------ 測試自動化的職業生涯讓我的生活變得更好。這個機會一直就在我面前。我不只一次想過嘗試它,甚至開始學習一些東西,但我放棄了——我認為測試並不認真,而且在經過幾年的 Web 開發後轉向測試是個壞主意(哈哈)。事實證明,我不需要付出很大的努力就可以在這個領域建立一份嚴肅的職業生涯。從酒吧工作轉向網頁開發對我來說是一個更大的努力。 為了養活自己而工作也是如此。我的第一份 Web 開發工作賺了 50 美元。我製作了兩個 WordPress 網站——一個 30 美元,另一個 20 美元。自從我從頭開始學習以來,這還不錯。我之前的工作經驗大部分都是在酒吧度過的。儘管我將自己(主要是在我的腦海中)定位為網頁開發人員,但我從事了任何工作——從編寫文字到編輯圖像。在自由業的前 2-3 年裡,我最大的單筆收入是用 Photoshop 編輯了數千張電影海報。三天三夜幾乎不間斷的工作讓我賺到了 500 美元——這對那個時代來說是一個了不起的結果。 還有一件事:行話和抽象 ----------- 你讀到的、聽到的和做的很多事情都可能非常混亂和複雜,以至於變成了白噪音。有時,一件難以理解的事情會流入另一件事情中,留下不愉快的痕跡和限制感。但這是正常的!一旦你開始解開抽象概念的結,並意識到術語和行話背後的含義,一切都會很快步入正軌。看起來這種混亂沒有盡頭,但事實並非如此——遲早,你會明白一切(或幾乎一切)。 實際上,程式設計論壇和技術播客對我幫助很大。我只是閱讀和聆聽所有內容,谷歌搜尋每個未知的單字和術語。在某些時候,這會導致您的手機和電腦上的瀏覽器中出現數十個和數百個選項卡,但最終,此流程開始縮小。透過每個新的閱讀選項卡,您會變得更聰明,對自己的知識更有信心,即使在很長一段時間內看起來並非如此。 --- 我希望這篇文章能對大家有所幫助,並激勵人們不要害怕變化,尋找自己的位置,不要在遇到困難時就放棄。請記住,每條道路都是獨一無二的,重要的是要找到自己的道路,遵循自己的興趣、願望並專注於自己的感受。一切都會好起來的,但還是祝你好運。 --- 原文出處:https://dev.to/vorniches/ive-worked-in-it-for-over-10-years-here-are-5-things-i-wish-i-knew-when-i-started-43pe

系統設計面試的資料庫分片

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![資料庫分片的類型](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42ob2tziqrlt820gdsy7.jpg)](https://bit.ly/3pMiO8g) image\_credit -[設計大師](https://bit.ly/3pMiO8g) 朋友們大家好,在這個資料驅動的世界中,有效處理大量資料的能力對於企業和組織來說至關重要。 傳統的整體資料庫往往難以跟上現代應用程式和服務的需求,並成為效能瓶頸。 這就是**資料庫分片發揮**作用的地方,它為**水平擴展資料提供了強大的解決方案。** 如果你不知道什麼是Sharding?分片是一種資料庫架構技術,它將大型資料庫劃分為更小、更易於管理的部分,稱為“分片”,分佈在多個伺服器上。 每個分片都包含資料的子集,它們一起形成完整的資料集。這種方法透過分配工作負載、減少延遲和啟用並行處理來增強效能和可擴展性。 分片對於處理大規模應用程式和高流量系統特別有用,確保沒有單一伺服器成為瓶頸,並提高資料庫系統的整體效率和可靠性。 過去,我討論過常見的系統設計問題,例如[API 網關與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5),在這份全面的**資料庫分片指南**中,您將了解資料庫分片,探索其概念、優點、實施策略和實際用例。 分片也是系統設計面試的重要議題,因為 因為它展示了對如何處理大規模資料並提高系統效能和可擴展性的理解,這是開發人員的關鍵技能和經驗。 在這些面試中,通常會評估候選人設計能夠有效管理高流量和大量資料的系統的能力。分片展示了分散式系統、資料庫管理的知識以及解決潛在瓶頸和故障點的能力。 它反映了候選人設計彈性、高效能和可擴展架構的能力,這是在現實場景中建立強大且高效的軟體系統的關鍵技能。 順便說一句,如果您正在準備系統設計面試並想深入學習系統設計,那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站,這些網站有許多很棒的系統設計課程,這裡有一個很好的系統設計 Exponent 的面試備忘單,以快速修改面試的基本系統設計概念。 [![軟體設計面試備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3i7ytpm4lzhad3dclk5.png)](https://bit.ly/3cNF0vw) ***PS 繼續閱讀直到最後。我有一份獎金給你。*** 用於系統設計的資料庫分片 ------------ 現在,我們來了解一下什麼是資料庫分片?為什麼需要它以及它如何幫助擴展您的應用程式。我們還看到不同類型的資料庫分片,例如基於哈希和基於範圍的分片。 目錄 1. 介紹 2. 什麼是資料庫分片? 3. 為什麼要分片?對可擴展性的需求 4. 資料庫分片如何運作? 5. 分片策略 6. 挑戰和考慮因素 7. 現實世界的用例 8. 實施資料庫分片 9. 最佳實踐 10. 結論 一、簡介 ---- 在當今資料驅動的世界中,企業和組織被大量資訊淹沒。有效管理和處理這些資料是傳統整體資料庫難以應對的挑戰。 隨著用戶群的成長、應用程式工作負載的增加以及對即時分析的需求的飆升,對可擴展資料庫解決方案的需求變得至關重要。 > 這就是資料庫分片作為實現水平可擴展性的強大工具的作用。 [![資料庫分片概述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx9climi3dpc0fpgie24.png)](https://bit.ly/3Mnh6UR) --- 2.什麼是資料庫分片? ----------- **資料庫分片是一種資料庫架構策略,用於跨多個資料庫執行個體或伺服器分割和分佈資料。**術語“分片”是指整個資料集的分區或子集。 每個分片獨立運作並包含一部分資料。透過將資料分佈在多個分片上,系統可以實現水平可擴展性,從而能夠處理更大的資料量和更高的工作負載。 分片對於資料集快速成長或高吞吐量要求的應用程式尤其有利,例如社交媒體平台、電子商務網站和遊戲應用程式。 它使這些應用程式能夠跨多個伺服器或叢集分配資料庫負載,從而防止任何單一資料庫伺服器成為瓶頸。 這是一個**簡單的圖表,將資料庫分片解釋為水平擴展:** [![什麼是資料庫分片](https://miro.medium.com/v2/resize:fit:609/1*Dmb3LCxTWjyGj_uYjEGnHA.png)](https://bit.ly/3P3eqMN) --- 3. 為什麼要進行資料庫分片?對可擴展性的需求 ----------------------- 現在,讓我們看看為什麼需要資料庫分片 ### 3.1.單體資料庫中的可擴展性挑戰 傳統的整體資料庫在可擴展性方面有其限制。在整體架構中,所有資料都儲存在單一資料庫執行個體中。 隨著資料量和使用者負載的增加,單體資料庫可能面臨幾個挑戰: - **效能瓶頸:**單一資料庫伺服器可能成為效能瓶頸,導致查詢回應時間緩慢且應用程式停機。 - **儲存有限:**單一伺服器的儲存容量有限,難以處理超大資料集。 - **垂直擴展成本**:透過升級硬體進行垂直擴展可能成本高昂,而且回報遞減。 - **複雜性:**管理大型整體資料庫可能很複雜且容易出錯,需要大量維護和最佳化。 ### 3.2.解決方案:透過分片實現水平可擴展性 資料庫分片透過將資料分佈在多個分片上(每個分片駐留在單獨的資料庫伺服器或叢集上)來解決這些可擴展性挑戰。這種方法有幾個優點: - **提高效能:**分片將資料庫負載均勻分佈在多個伺服器上,從而提高查詢效能和回應能力。 - **無限的可擴展性:**隨著資料的成長,可以加入新的分片,從而實現近乎無限的可擴展性。 - **成本效益:**與不斷升級單一伺服器相比,分片是一種經濟高效的解決方案。 - **高可用性**:分片可以提高容錯性和可用性,因為一個分片的故障不會影響整個系統。 這是資料庫的水平分片和垂直分片的樣子 [![如何使用分片擴充資料庫](https://miro.medium.com/v2/resize:fit:609/1*0j0DLUHN8EeykY-XxVSzJA.png)](https://medium.com/javarevisited/top-3-system-design-cheat-sheets-templates-and-roadmap-for-software-engineering-interviews-53012952db28) --- ### 4. 資料庫分片如何運作? 資料庫分片背後的核心思想是將資料分成更小的、可管理的部分,稱為分片。每個分片都是一個獨立的資料庫子集,用於儲存整個資料集的一部分。 分片可以分佈在多個資料庫伺服器或叢集\*\*,從而實現並行處理並提高效能。 以下是資料庫分片工作原理的進階概述: ![資料庫分片如何運作?](https://miro.medium.com/v2/resize:fit:609/1*1FCBTWUliqTM-VYNcd_YHA.png) 您可以看到資料庫分片提供了一種邏輯方法來將資料等級分割到多個伺服器和叢集上。 ### 4.1.資料分割區 分片的第一步是決定如何對資料進行分區。有幾種常見的分區策略,我們將在下一節中詳細探討。 分區策略的選擇取決於應用程式的要求和資料分佈。 ![資料分割區](https://miro.medium.com/v2/resize:fit:375/1*jsHUuhNxK-goazpSQUfAMg.png) ### 4.2.片鍵 **分片鍵**是用來決定特定資料屬於哪個分片的欄位或屬性。選擇合適的分片鍵至關重要,該鍵可以在分片之間均勻分佈資料,以防止熱點(分片接收的流量明顯多於其他分片)。 ### 4.3.資料分佈 一旦對資料進行了分區並選擇了分片鍵,資料就會分佈在可用的分片中。分發過程可以自動化,通常涉及分片機製或服務,根據分片鍵將資料路由到正確的分片。 ### 4.4.查詢路由 當對資料庫進行查詢或請求時,查詢路由器或協調器會根據分片鍵決定要查詢的分片。涉及多個分片的查詢可能需要結果的協調和聚合。 ### 4.5.聚合 在某些情況下,可能需要聚合多個分片的查詢結果才能產生最終結果。這種聚合可以發生在應用程式層級或透過專用聚合層。 ### 4.6.資料一致性 確保分片之間的資料一致性是分片的關鍵方面。兩階段提交或最終一致性等技術用於維護資料完整性。 [![資料庫分片完整指南](https://miro.medium.com/v2/resize:fit:497/1*ZVrIULaZsBFrzfEeoO63IQ.png)](https://www.java67.com/2019/09/top-5-courses-to-learn-system-design.html) --- 5. 分片策略 ------- 選擇正確的分片策略對於分片資料庫系統的成功至關重要。選擇取決於資料的性質、存取模式和可擴展性要求。以下是一些常見的分片策略: ### 5.1.基於範圍的分片 基於範圍的分片涉及根據分片鍵中特定值範圍對資料進行分區。例如,如果您要對客戶資料進行分片,則可以使用基於範圍的策略,其中每個分片包含姓氏以特定字母開頭或屬於特定範圍的客戶。 當資料分佈不均勻且您希望將相關資料保留在一個分片中時,基於範圍的分片非常有用。 以下是[DesignGuru.io](https://bit.ly/3pMiO8g)基於範圍的分片範例: [![基於範圍的資料庫分片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j4ttcmk6e1oifbd4sr6.png)](https://bit.ly/3pMiO8g) --- ### 5.2.基於哈希的分片 基於雜湊的分片使用雜湊函數將分片鍵映射到特定分片。這種方法在分片之間均勻分佈資料,有助於避免熱點。 當資料存取模式不可預測或您想要確保資料均勻分佈時,基於雜湊的分片特別有效。 以下是[DesignGuru.io](https://bit.ly/3pMiO8g)在資料庫上基於哈希的分片範例: [![基於哈希的分片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoks5uj5825fjwo9zd6m.png)](https://bit.ly/3pMiO8g) --- ### 5.3.基於目錄的分片 基於目錄的分片維護一個中央目錄,將分片鍵對應到對應的分片。此目錄有助於將查詢有效地路由到適當的分片。但是,它可能會引入單點故障。 基於目錄的分片適用於需要對分片分配保持高度控制的場景。 這是[DesignGuru.io](https://bit.ly/3pMiO8g)的基於目錄的分片範例 [![基於目錄的分片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8691g3i2seemih5in0p.png)](https://bit.ly/3pMiO8g) --- ### 5.4.地理分片 在處理基於位置的資料(例如使用者位置)時,地理分片是相關的。資料根據與分片鍵關聯的地理區域進行分區。 此策略對於具有地理分佈的使用者或資料的應用程式很有價值。 正如他們所說,一張圖片勝過 1000 個單詞,這是來自[**Architecture Notes**](https://architecturenotes.co/database-sharding-explained/)的漂亮圖表,它解釋了不同類型的資料庫分片 ![資料庫分片策略](https://miro.medium.com/v2/resize:fit:609/1*_X8CwmkPPT1JLyiwSN6ZlQ.jpeg) 信用 --- <https://architecturenotes.co/database-sharding-explained/> --- 6. 挑戰和考慮 -------- 雖然資料庫分片提供了顯著的好處,但它也帶來了一系列挑戰和考慮因素: 6.1.資料遷移 在分片之間遷移資料可能非常複雜且耗時。正確的規劃和工具對於確保遷移過程順利進行至關重要。 6.2.備份與復原 管理備份並確保跨多個分片的資料復原需要仔細的規劃和強大的備份解決方案。 6.3.查詢複雜度 涉及來自多個分片的資料的查詢的實施和最佳化可能很複雜。應用程式程式碼可能需要處理查詢路由和結果聚合。 6.4.資料一致性 在分片環境中維護資料一致性可能具有挑戰性。開發人員需要考慮分散式事務、衝突解決和最終一致性等因素。 6.5.監控和擴展 有效的監控和擴展策略對於確保分片資料庫的健康和效能至關重要。辨識效能瓶頸並根據需要加入新分片至關重要。 ![資料庫分片的挑戰與注意事項](https://miro.medium.com/v2/resize:fit:609/1*GXRq3DgwsPpvG72EDUkX2Q.png) --- 7. 資料庫分片的實際用例 ------------- 資料庫分片適用於可擴展性和效能至關重要的各種現實場景。讓我們探討一些值得注意的例子: 7.1.社群媒體平台 Facebook、Twitter 和 Instagram 等社群媒體平台處理大量用戶生成的內容,包括貼文、圖像和影片。分片使這些平台能夠有效地分發和管理用戶資料。 7.2.電子商務網站 電子商務網站面臨著劇烈的流量波動,尤其是在促銷活動期間。分片幫助他們處理增加的負載並提供無縫的購物體驗。 7.3.遊戲應用 線上遊戲應用程式通常需要即時互動和低延遲回應時間。分片可確保遊戲資料的分佈以獲得最佳效能。 7.4.金融服務 金融機構每天處理大量的交易資料。分片允許他們擴展資料庫以處理負載,同時保持資料完整性。 ![MongoDB 中的資料庫分片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5rwxxozvp46xalmhu8r.png) --- 8. 如何實現資料庫分片? ------------- 實施資料庫分片需要仔細的規劃和執行。以下是涉及的步驟: 8.1.評估與規劃 首先評估應用程式的可擴展性要求和資料分佈模式。選擇合適的分片策略和分片鍵。 8.2.資料庫設計 設計資料庫架構以適應分片。定義資料如何跨分片分區和分佈。 8.3.分片實施 實施分片機製或使用適合您選擇的策略的分片資料庫系統。跨分片分佈現有資料。 8.4.查詢路由 發展一種查詢路由機制,根據分片鍵將查詢定向到適當的分片。如有必要,處理查詢聚合。 8.5。資料一致性 實施資料一致性機制,例如分散式交易或最終一致性,以維護資料完整性。 8.6。測試與優化 徹底測試分片資料庫系統,優化查詢並監控效能。根據需要擴展系統。 讓我告訴你一個秘密,分片還可以讓你的資料庫更快: ![分片如何使資料庫更快](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4xuebb3yiyfkg4bebaz.png) --- ### 9. 資料庫分片最佳實踐 若要充分利用資料庫分片,請考慮遵循以下最佳實務: - **選出正確的分片鍵:** 選擇能夠均勻分佈資料並避免熱點的分片鍵。 - **監控和規模**: 持續監控分片資料庫的運作狀況和效能。隨著資料的成長加入新的分片。 - **備份和災難復原:** 實施強大的備份和復原程序來保護您的資料。 - **資料遷移:** 仔細規劃資料遷移並使用高效率的工具和流程。 - **查詢最佳化:** 優化分片環境中的查詢效能。 - **資料一致性:** 了解並實施適合您的應用程式的資料一致性模型。 而且,如果您需要備忘單,這裡有[**ByteByteGo**](https://bit.ly/3P3eqMN)提供的一份不錯的資料庫分片備忘單,可幫助您快速修改關鍵分片概念 [![資料庫分片備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgf23bifr1mvth1hol9j.jpg)](https://bit.ly/3P3eqMN) --- ### 系統設計訪談資源: 而且,這裡列出了最佳系統設計書籍、線上課程和練習網站,您可以查看這些內容,以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 2. [**《系統設計面試》作者:Alex Xu**](https://amzn.to/3nU2Mbp) :這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) :綜合指南,涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design):LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種練習問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) :精選的資源列表,包括文章、書籍和影片,可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 7. **高可擴展性部落格**:該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**:請參閱「Gaurav Sen」和「Tech Dummies」等頻道,以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) :Alex Xu 的一本現場書籍和課程,用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容,並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) :一個專為面試準備的網站,特別是針對亞馬遜和谷歌等 FAANG 公司,他們還有很棒的系統設計課程和許多其他材料,可以幫助您破解 FAAN 面試。 [![如何為系統設計做準備](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkqv3p46jmw5qc0newuiu.jpg)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 請記住透過參與實際專案和參加模擬面試將理論知識與實際應用結合。不斷的練習和學習無疑會提高你在系統設計面試中的熟練程度。 --- ### 10. 結論 這就是關於**資料庫分片及其工作原理的**全部內容。資料庫分片是實現水平可擴展性以及處理大量資料和高工作負載的強大策略。 透過跨多個分片分佈資料,組織可以提高效能、確保高可用性並滿足現代應用程式的需求。 然而,**分片並不是萬能的解決方案**,並且有其自身的一系列挑戰和考慮因素。正確的規劃、仔細的實施和遵守最佳實踐是成功分片的關鍵。 隨著資料量和複雜性不斷增長,掌握資料庫分片技術對於企業和開發人員來說變得越來越重要。 獎金 --- 正如承諾的,這是給你的獎金,一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計,您也可以在 Microsoft 上閱讀它 --- [https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT -eBook-設計分散式系統.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf) ![學習分散式系統的免費書籍](https://miro.medium.com/v2/resize:fit:317/0*ICrIesz1fT-KtmUZ.png) --- 原文出處:https://dev.to/somadevtoo/database-sharding-for-system-design-interview-1k6b

使用 Langchain 為您的文件建立 QA 機器人 😻

--- 標題:使用 Langchain 為您的文件建立 QA 機器人 😻 描述:使用 Wing Framework、NextJS 和 Langchain 建立的 ChatGPT 用戶端應用程式 canonical\_url:https://www.winglang.io/blog/2024/05/29/qa-bot-for-your-docs-with-langchain 發表:真實 --- 長話短說 ---- 在本教學中,我們將為您的網站文件建立一個人工智慧驅動的問答機器人。 - 🌐 建立一個用戶友好的 Next.js 應用程式來接受問題和 URL - 🔧 設定一個 Wing 後端來處理所有請求 - 💡 透過使用 RAG 抓取和分析文件,將 @langchain 納入 AI 驅動的答案 - 🔄 前端輸入和人工智慧處理的回應之間的完整連接。 ![問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykw5f2sos4fdhj8akowt.gif) 什麼是翼? ----- [Wing](https://wing.cloud/redirect?utm_source=qa-bot-reddit&redirect=https%3A%2F%2Fwww.winglang.io%2Fblog%2F2024%2F05%2F29%2Fqa-bot-for-your-docs-with-langchain)是一個雲端開源框架。 它允許您將應用程式的基礎架構和程式碼組合為一個單元,並將它們安全地部署到您首選的雲端提供者。 Wing 讓您可以完全控制應用程式基礎架構的配置方式。除了其易於學習的[程式語言](https://www.winglang.io/docs/language-reference)之外,Wing 還支援 Typescript。 在本教學中,我們將使用 TypeScript。所以,別擔心,您的 JavaScript 和 React 知識足以理解本教學。 ![翼登陸頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u366v255drbwqmcoagrz.png) {% cta https://wingla.ng/github %} 看 Wing ⭐️ {% endcta %} --- 使用 Next.js 建立前端 --------------- 在這裡,您將建立一個簡單的表單,它接受文件 URL 和使用者的問題,然後根據網站的資料回傳回應。 首先,建立一個包含兩個子資料夾的資料夾 - `frontend`和`backend` 。 `frontend`資料夾包含 Next.js 應用程式, `backend`資料夾用於 Wing。 ``` mkdir qa-bot && cd qa-bot mkdir frontend backend ``` 在**`frontend`**資料夾中,透過執行以下程式碼片段來建立 Next.js 專案: ``` cd frontend npx create-next-app ./ ``` ![下一個應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyq8dnmmmplvzl7g41ir.png) 將下面的程式碼片段複製到`app/page.tsx`檔案中,以建立接受使用者問題和文件 URL 的表單: ``` "use client"; import { useState } from "react"; export default function Home() { const [documentationURL, setDocumentationURL] = useState<string>(""); const [question, setQuestion] = useState<string>(""); const [disable, setDisable] = useState<boolean>(false); const [response, setResponse] = useState<string | null>(null); const handleUserQuery = async (e: React.FormEvent) => { e.preventDefault(); setDisable(true); console.log({ question, documentationURL }); }; return ( <main className='w-full md:px-8 px-3 py-8'> <h2 className='font-bold text-2xl mb-8 text-center text-blue-600'> Documentation Bot with Wing & LangChain </h2> <form onSubmit={handleUserQuery} className='mb-8'> <label className='block mb-2 text-sm text-gray-500'>Webpage URL</label> <input type='url' className='w-full mb-4 p-4 rounded-md border text-sm border-gray-300' placeholder='https://www.winglang.io/docs/concepts/why-wing' required value={documentationURL} onChange={(e) => setDocumentationURL(e.target.value)} /> <label className='block mb-2 text-sm text-gray-500'> Ask any questions related to the page URL above </label> <textarea rows={5} className='w-full mb-4 p-4 text-sm rounded-md border border-gray-300' placeholder='What is Winglang? OR Why should I use Winglang? OR How does Winglang work?' required value={question} onChange={(e) => setQuestion(e.target.value)} /> <button type='submit' disabled={disable} className='bg-blue-500 text-white px-8 py-3 rounded' > {disable ? "Loading..." : "Ask Question"} </button> </form> {response && ( <div className='bg-gray-100 w-full p-8 rounded-sm shadow-md'> <p className='text-gray-600'>{response}</p> </div> )} </main> ); } ``` 上面的程式碼片段顯示了一個表單,該表單接受使用者的問題和文件 URL 並將它們暫時記錄到控制台。 ![QA 機器人表單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b4w3tq0srua93gnk73n.png) 完美的! 🎉您已經完成了應用程式的使用者介面。接下來,讓我們設定 Wing 後端。 --- 如何在電腦上設定 Wing ------------- Wing 提供了一個 CLI,使您能夠在專案中執行各種 Wing 操作。 它還提供[VSCode](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing)擴展,透過語法突出顯示、編譯器診斷、程式碼完成和片段等功能增強開發人員體驗。 在繼續之前,請停止 Next.js 開發伺服器並透過在終端機中執行下面的程式碼片段來安裝 Wing CLI。 ``` npm install -g winglang@latest ``` 執行以下程式碼片段以確保 Winglang CLI 已安裝並按預期工作: ``` wing -V ``` 接下來,導航到`backend`資料夾並建立一個空的 Wing Typescript 專案。確保選擇`empty`模板並選擇 Typescript 作為語言。 ``` wing new ``` ![永新](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezy04zqvz9lura0d25dj.png) 將下面的程式碼片段複製到`backend/main.ts`檔案中。 ``` import { cloud, inflight, lift, main } from "@wingcloud/framework"; main((root, test) => { const fn = new cloud.Function( root, "Function", inflight(async () => { return "hello, world"; }) ); }); ``` **`main()`**函數充當 Wing 的入口點。 它建立一個雲端函數並在編譯時執行。另一方面, **`inflight`**函數在執行時執行並返回`Hello, world!`文字. 透過執行下面的程式碼片段啟動 Wing 開發伺服器。它會自動在瀏覽器中開啟 Wing 控制台,網址為`http://localhost:3000` 。 ``` wing it ``` ![Wing TS 最小控制台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1ejobkm0dq5akhut732.png) 您已在電腦上成功安裝 Wing。 --- 如何將 Wing 連接到 Next.js 應用程式 ------------------------- 在前面的部分中,您已在`frontend`資料夾中建立了 Next.js 前端應用程式,並在`backend`資料夾中建立了 Wing 後端。 在本部分中,您將了解如何在 Next.js 應用程式和 Wing 後端之間通訊和發送資料。 首先,透過執行以下程式碼在後端資料夾中安裝[Wing React](https://github.com/winglang/winglibs/tree/main/react)函式庫: ``` npm install @winglibs/react ``` 接下來,更新`main.ts`文件,如下所示: ``` import { main, cloud, inflight, lift } from "@wingcloud/framework"; import React from "@winglibs/react"; main((root, test) => { const api = new cloud.Api(root, "api", { cors: true }) ; //👇🏻 create an API route api.get( "/test", inflight(async () => { return { status: 200, body: "Hello world", }; }) ); //👉🏻 placeholder for the POST request endpoint //👇🏻 connects to the Next.js project const react = new React.App(root, "react", { projectPath: "../frontend" }); //👇🏻 an environment variable react.addEnvironment("api_url", api.url); }); ``` 上面的程式碼片段建立了一個 API 端點 ( `/test` ),它接受 GET 請求並傳回`Hello world`文字。 `main`函數也連接到 Next.js 專案並將`api_url`新增為環境變數。 環境變數中包含的 API URL 使我們能夠將請求傳送到 Wing API 路由。我們如何在 Next.js 應用程式中檢索 API URL 並發出這些請求? 更新 Next.js `app/layout.tsx`檔案中的`RootLayout`元件,如下所示: ``` export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang='en'> <head> {/** ---👇🏻 Adds this script tag 👇🏻 ---*/} <script src='./wing.js' defer /> </head> <body className={inter.className}>{children}</body> </html> ); } ``` 透過執行`npm run build`重新建置 Next.js 專案。 最後,啟動Wing開發伺服器。它會自動啟動 Next.js 伺服器,可以在瀏覽器中透過**`http://localhost:3001`**存取該伺服器。 ![控制台到 URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7rkxw9bds97a0qzg5vh.gif) 您已成功將 Next.js 連接到 Wing。您也可以使用`window.wingEnv.<attribute_name>`存取環境變數中的資料。 ![視窗.wingEnv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0up5430jmxufmyeb9e4h.gif) 使用LangChain和Wing處理用戶請求 ---------------------- 在本節中,您將學習如何向 Wing 發送請求,使用[LangChain 和 OpenA](https://js.langchain.com/docs/get_started/quickstart#llm-chain) I 處理這些請求,並在 Next.js 前端顯示結果。 首先,我們更新 Next.js **`app/page.tsx`**檔案以檢索 API URL 並將使用者資料傳送到 Wing API 端點。 為此,請透過在**`page.tsx`**檔案頂部新增以下程式碼片段來擴充 JavaScript **`window`**物件。 ``` "use client"; import { useState } from "react"; interface WingEnv { api_url: string; } declare global { interface Window { wingEnv: WingEnv; } } ``` 接下來,更新`handleUserQuery`函數以將包含使用者問題和網站URL 的POST 請求傳送到Wing API 端點。 ``` //👇🏻 sends data to the api url const [response, setResponse] = useState<string | null>(null); const handleUserQuery = async (e: React.FormEvent) => { e.preventDefault(); setDisable(true); try { const request = await fetch(`${window.wingEnv.api_url}/api`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ question, pageURL: documentationURL }), }); const response = await request.text(); setResponse(response); setDisable(false); } catch (err) { console.error(err); setDisable(false); } }; ``` 在建立接受 POST 請求的 Wing 端點之前,請在`backend`資料夾中安裝下列套件: ``` npm install @langchain/community @langchain/openai langchain cheerio ``` [Cheerio](https://js.langchain.com/v0.2/docs/integrations/document_loaders/web_loaders/web_cheerio/)使我們能夠抓取軟體文件網頁,而[LangChain 軟體包](https://js.langchain.com/v0.1/docs/get_started/quickstart/)使我們能夠存取其各種功能。 LangChain OpenAI整合包使用OpenAI語言模型;因此,您需要一個有效的 API 金鑰。您可以從[OpenAI 開發者平台](https://platform.openai.com/api-keys)取得。 ![朗查恩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omg4o524oklrssso5rqc.png) 接下來,讓我們建立處理傳入請求的`/api`端點。 端點將: - 接受來自 Next.js 應用程式的問題和文件 URL, - 使用[LangChain 文件載入器](https://js.langchain.com/v0.1/docs/modules/data_connection/document_loaders/)載入文件頁面, - 將檢索到的文件分成區塊, - 轉換分塊文件並將它們保存在[LangChain 向量儲存](https://js.langchain.com/v0.1/docs/modules/data_connection/vectorstores/)中, - 並建立一個[檢索器函數](https://js.langchain.com/v0.1/docs/modules/data_connection/),從向量儲存中檢索文件。 首先,將以下內容匯入`main.ts`檔案: ``` import { main, cloud, inflight, lift } from "@wingcloud/framework"; import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai"; import { ChatPromptTemplate } from "@langchain/core/prompts"; import { createStuffDocumentsChain } from "langchain/chains/combine_documents"; import { CheerioWebBaseLoader } from "@langchain/community/document_loaders/web/cheerio"; import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"; import { MemoryVectorStore } from "langchain/vectorstores/memory"; import { createRetrievalChain } from "langchain/chains/retrieval"; import React from "@winglibs/react"; ``` 在`main()`函數中加入以下程式碼片段以建立`/api`端點: ``` api.post( "/api", inflight(async (ctx, request) => { //👇🏻 accept user inputs from Next.js const { question, pageURL } = JSON.parse(request.body!); //👇🏻 initialize OpenAI Chat for LLM interactions const chatModel = new ChatOpenAI({ apiKey: "<YOUR_OPENAI_API_KEY>", model: "gpt-3.5-turbo-1106", }); //👇🏻 initialize OpenAI Embeddings for Vector Store data transformation const embeddings = new OpenAIEmbeddings({ apiKey: "<YOUR_OPENAI_API_KEY>", }); //👇🏻 creates a text splitter function that splits the OpenAI result chunk size const splitter = new RecursiveCharacterTextSplitter({ chunkSize: 200, //👉🏻 characters per chunk chunkOverlap: 20, }); //👇🏻 creates a document loader, loads, and scraps the page const loader = new CheerioWebBaseLoader(pageURL); const docs = await loader.load(); //👇🏻 splits the document into chunks const splitDocs = await splitter.splitDocuments(docs); //👇🏻 creates a Vector store containing the split documents const vectorStore = await MemoryVectorStore.fromDocuments( splitDocs, embeddings //👉🏻 transforms the data to the Vector Store format ); //👇🏻 creates a document retriever that retrieves results that answers the user's questions const retriever = vectorStore.asRetriever({ k: 1, //👉🏻 number of documents to retrieve (default is 2) }); //👇🏻 creates a prompt template for the request const prompt = ChatPromptTemplate.fromTemplate(` Answer this question. Context: {context} Question: {input} `); //👇🏻 creates a chain containing the OpenAI chatModel and prompt const chain = await createStuffDocumentsChain({ llm: chatModel, prompt: prompt, }); //👇🏻 creates a retrieval chain that combines the documents and the retriever function const retrievalChain = await createRetrievalChain({ combineDocsChain: chain, retriever, }); //👇🏻 invokes the retrieval Chain and returns the user's answer const response = await retrievalChain.invoke({ input: `${question}`, }); if (response) { return { status: 200, body: response.answer, }; } return undefined; }) ); ``` API 端點接受使用者的問題和來自 Next.js 應用程式的頁面 URL,初始化[`ChatOpenAI`](https://js.langchain.com/v0.2/docs/integrations/chat/openai/)和[`OpenAIEmbeddings`](https://js.langchain.com/v0.2/docs/integrations/text_embedding/openai/) ,載入文件頁面,並以文件的形式檢索使用者查詢的答案。 然後,將文件分割成區塊,將區塊保存在`MemoryVectorStore`中,並使我們能夠使用[LangChain 檢索器](https://js.langchain.com/v0.1/docs/modules/data_connection/)來取得問題的答案。 從上面的程式碼片段來看,OpenAI API金鑰直接輸入到程式碼中;這可能會導致安全漏洞,使 API 金鑰可供攻擊者存取。為了防止這種資料洩露,Wing 允許您將私鑰和憑證保存在名為`secrets`的變數中。 當您建立機密時,Wing 會將此資料保存在`.env`檔案中,確保其安全且可存取。 更新`main()`函數以從 Wing Secret 取得 OpenAI API 金鑰。 ``` main((root, test) => { const api = new cloud.Api(root, "api", { cors: true }); //👇🏻 creates the secret variable const secret = new cloud.Secret(root, "OpenAPISecret", { name: "open-ai-key", }); api.post( "/api", lift({ secret }) .grant({ secret: ["value"] }) .inflight(async (ctx, request) => { const apiKey = await ctx.secret.value(); const chatModel = new ChatOpenAI({ apiKey, model: "gpt-3.5-turbo-1106", }); const embeddings = new OpenAIEmbeddings({ apiKey, }); //👉🏻 other code snippets & configurations ); const react = new React.App(root, "react", { projectPath: "../frontend" }); react.addEnvironment("api_url", api.url); }); ``` - 從上面的程式碼片段來看, ``` - The `secret` variable declares a name for the secret (OpenAI API key). ``` ``` - The [`lift().grant()`](https://www.winglang.io/docs/typescript/inflights#permissions) grants the API endpoint access to the secret value stored in the Wing Secret. ``` ``` - The [`inflight()`](https://www.winglang.io/docs/typescript/inflights) function accepts the context and request object as parameters, makes a request to LangChain, and returns the result. ``` ``` - Then, you can access the `apiKey` using the `ctx.secret.value()` function. ``` 最後,透過在終端機中執行此命令將 OpenAI API 金鑰儲存為機密。 ![翅膀的秘密](https://www.winglang.io/assets/images/qa-bot-wing-secrets-883db5e81515894ae280d77b7f72bb25.gif) 恭喜!您已成功完成本教學的專案。 以下是該應用程式的簡短演示: ![QA 機器人演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ropklqge2xzpibl29vye.gif) --- 讓我們更深入地研究 Wing 文件,看看我們的 AI 機器人可以提取哪些資料。 ![QA 機器人演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnmf6n6mszc6go0uiw1v.gif) --- 總結一下 ---- 到目前為止,我們已經討論了以下內容: - 什麼是翼? - 如何使用Wing並使用Langchain查詢資料, - 如何將 Wing 連接到 Next.js 應用程式, - 如何在 Next.js 前端和 Wing 後端之間發送資料。 > [Wing](https://github.com/winglang/wing)旨在恢復您的創意流並縮小想像力與創造之間的差距。 Wing 的另一個巨大優勢是它是開源的。因此,如果您希望建立利用雲端服務的分散式系統或為雲端開發的未來做出貢獻, [Wing](https://github.com/winglang/wing)是您的最佳選擇。 請隨意為[GitHub 儲存庫做出貢獻,](https://github.com/winglang/wing)並與團隊和大型開發人員社群[分享您的想法](https://t.winglang.io/discord)。 本教學的源程式碼可[在此處](https://github.com/NathanTarbert/wing-langchain-nextjs)取得。 感謝您的閱讀! 🎉 --- 原文出處:https://dev.to/winglang/build-a-qa-bot-for-your-documentation-with-langchain-27i4

我一直在編寫 TypeScript 但不理解它

我承認,我不太懂 TypeScript ------------------- 有一天,我在一些處理樂觀更新的程式碼中遇到了一個錯誤,所以我向我的同事[Filip](https://tenor.com/en-GB/view/the-office-funny-kevin-malone-phillip-i-hate-phillip-gif-16434707)尋求幫助。 TypeScript 精靈 Filip 提到`satisfies`關鍵字將是我正在尋找的解決方案的一部分。 *`Satisfies` ?那是什麼呀?為什麼我以前從未聽說過它?*我的意思是,我已經使用 TypeScript 一段時間了,所以我很驚訝我自己並不了解它。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6kny7wtjnc4168yn2o0.png) 不久之後,我偶然發現了 @yacineMTB 的這條推文,他是[X.com](http://X.com) (又名 Twitter)的多產者和工程師: > 就像,為什麼我不能只*執行***打字稿**檔案?如果我需要初始化整個目錄和專案,那麼腳本語言有什麼意義呢? > 我再次發現自己想知道為什麼我還不了解 TypeScript。*為什麼你不能真正執行 TypeScript 檔案?腳本語言和編譯語言有什麼不同?* [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy01hirmxhlwybk6mx9u.png)](https://opensaas.sh) 我突然意識到,我不太了解我幾乎每天使用的語言的一些基本知識,這些語言是我用來建立諸如[Open SaaS](https://opensaas.sh) (一個免費的開源 SaaS 入門工具)之類的東西的。 所以我決定退一步,對這些主題進行一些調查。在這篇文章中,我將與您分享我學到的一些最重要的事情。 TypeScript 是什麼類型的腳本? -------------------- 您可能已經聽說過 TypeScript 是 JavaScript 的「超集」。這意味著它是 JavaScript 之上的一個附加層,在本例中,它允許您向 JavaScript 加入靜態類型。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5595bx8k88hkih2pthh.png) 這有點像 TypeScript 是 JavaScript 的進階版。或者,換句話說,如果 JavaScript 是 Tesla Model 3 的基礎模型,那麼 TypeScript 就是 Model X Plaid。*嗚嗚嗚。* 但因為它是 JavaScript 的*超集*,所以它實際上並不像 JavaScript 本身那樣運作。例如,JavaScript 是一種腳本語言,這意味著程式碼在執行過程中會被逐行解釋。它被設計成可以在不同作業系統和硬體配置的網路瀏覽器中運作。這與 C 等低階語言不同,後者需要先編譯為特定係統的機器碼才能執行。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu22drd35u217gatsifn.png) 因此,JavaScript 不必先編譯,而是由 JavaScript 引擎解釋。另一方面,TypeScript 必須先轉換(或「轉編譯」)為 JavaScript,然後才能由瀏覽器中的 JavaScript 引擎(或作為獨立的 NodeJS 應用程式)執行。 所以這個過程看起來有點像這樣: ``` → Write TypeScript Code → “Transcompile” to JavaScript → Interpret JavaScript & Check for Errors → JavaScript Engine Compiles and Executes the Code ``` 很有趣,對吧? 現在我們已經掌握了一些理論知識,接下來讓我們繼續討論一些更實際的東西,例如 TypeScript 的出名之處:它就是*類型!* --- 順便一提… 我們[Wasp](https://wasp-lang.dev/)正在努力建立最好的開源 React/NodeJS 框架,讓您快速行動! 這就是為什麼我們提供了即用型全端應用程式模板,例如帶有 TypeScript 的 ToDo 應用程式。您所要做的就是安裝 Wasp: ``` curl -sSL https://get.wasp-lang.dev/installer.sh | sh ``` 並執行: ``` wasp new -t todo-ts ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj26gymrxyybut4541lg.png) 您將獲得一個開箱即用的具有 Auth 和端到端 TypeSafety 功能的全端 ToDo 應用程式,以幫助您學習 TypeScript,或者只是開始快速安全地建置一些東西:) --- 玩耍`satisfies` ------------- 還記得我如何向我的同事尋求幫助,他的解決方案涉及`satisfies`關鍵字嗎?好吧,為了更好地理解它,我決定打開一個編輯器並嘗試一些基本範例,這是我發現的最有用的東西。 首先,我們以 person 物件為例,將其輸入為`Record` ,該 Record 可以採用一組`PossibleKeys`和一個`string`或`number`作為值。那想看看這個: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { } ``` 我們輸入`person`常數的方式稱為型別註解。它直接位於變數名稱之後。 讓我們開始為此`person`物件新增鍵和值: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } ``` 看起來很簡單,對吧? 現在,讓我們來看看 TypeScript 如何推斷`person`屬性的類型: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bd9m3bfy19qep0mvz98.png) 有趣的。當我們將滑鼠懸停在`email`上時,我們看到 TypeScript 告訴我們電子郵件是`string`或`number`的聯合類型,即使我們肯定只將其定義為`string` 。 如果我們嘗試在這種類型上使用一些`string`方法,這將會產生一些意想不到的後果。讓我們嘗試一下`split`方法,例如: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6u4nxa0em6mr0qqghuyp.png) 我們收到一個錯誤,表示此方法不適用於`number`類型。哪個是對的。但這很煩人,因為我們知道`email`是一個字串。 讓`satisfies`透過將類型向下移動到常數定義的末尾來解決這個問題: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } satisfies Record<PossibleKeys, string | number>; ``` 現在,當將滑鼠懸停在`email`屬性上時,我們將看到它被正確推斷為`string` : ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxv578os1altgpkgmojo.png) 好的!現在,我們使用`split`將`email`轉換為字串陣列不會遇到任何問題。 這就是`satisfies`真正的閃光點。它讓我們驗證表達式的類型是否與特定類型匹配,同時為我們推斷最窄的可能類型。 多餘的財產檢查 ------- 但當我玩`satisfies`時,我注意到另一個奇怪的事情是,如果我直接在變數上使用它與在中間變數上使用它,它的行為會有所不同,如下所示: ``` // Directly on object literal const person = { } satisfies PersonType; // Using on intermediate variable const personIntermediate = person satisfies PersonType ``` 具體來說,如果我向`person`物件加入類型中不存在的另一個屬性(例如`isAdmin` ,則直接使用時我們會收到錯誤,但使用中間變數時不會收到錯誤: 1. 直接使用`satisfies` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzqk2ph21jkcbdu4w6oz.png) 2. 使用`satisfies`和中間變數 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haipxyc4ihxpmezydgto.png) 您可以看到,在範例 2 中,沒有錯誤且 person “滿足” `PersonType` ,但在範例 1 中卻沒有。 這是為什麼? 嗯,這實際上與 JavaScript 的基本工作原理有關,而與`satisfies`關鍵字關係不大。讓我們來看看。 上面範例中發生的過程就是所謂的「多餘屬性檢查」。 過多的屬性檢查實際上是該規則的例外。 TypeScript 使用所謂的「結構類型系統」。這只是一種奇特的方式來表示**如果一個值具有所有預期的屬性,那麼它將被使用。** 因此,使用上面的`personIntermediate`範例,TypeScript 不會抱怨`person`有一個額外的屬性`isAdmin` ,該屬性在`PersonType`中不存在。它具有所有其他必要的屬性,例如`id` 、 `name` 、 `email`和`age` ,因此 TypeScript 接受這種中間形式。 但是,當我們直接在變數上聲明類型時(如範例 1 中所示),我們會收到 TypeScript 錯誤:「'isAdmin' 在類型 'PersonType' 中不存在」。**這是工作中的多餘屬性檢查**,它可以幫助您避免犯下愚蠢的錯誤。 記住這一點是有好處的,因為這將幫助您避免意外的副作用。 例如,假設我們將 person 類型變更為具有可選的`isAdmin`屬性,如下所示: ``` type PersonType = { id: number, name: string, isAdmin?: boolean, // 👈 Optional } ``` 如果我們不小心用`isadmin`屬性而不是`isAdmin`定義了`person`並且沒有直接聲明類型,會發生什麼情況? 我們不會從 TypeScript 中得到任何錯誤,因為`person`實際上滿足所有必要的類型。 `isAdmin`類型是可選的,它不存在於`person`上,但這並不重要。您已經做了一個簡單的 type-o,現在嘗試存取`isAdmin`屬性,但它不起作用: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxz8zzlxxog0xkdfpvbn.png) 哎呀!讓我們用類型註釋來修復它,我們立即聲明類型: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zer5v40ipp47juw2n50f.png) 好的。因為我們在第 58 行使用了直接類型註釋,所以我們獲得了 TypeScript 多餘屬性檢查的好處。 謝謝,打字稿! 🙏 --- 如果您發現此內容有用,並且想要查看更多類似內容,您可以[在 GitHub 上給 Wasp 一顆星,輕鬆幫助我們!](https://www.github.com/wasp-lang/wasp) 。 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) {% cta <https://www.github.com/wasp-lang/wasp> %} ⭐️ GitHub 上的 Star Wasp 🙏 {% endcta %} --- 待續… --- 感謝您加入我的旅程的第 1 部分,以便更好地了解我們每天使用的工具。 這將是一個持續進行的系列,我將繼續以更具探索性、更少結構化的方式分享我所學到的東西。我希望您發現其中的某些部分有用或有趣。 讓我知道你接下來想看什麼!你喜歡這種風格嗎?你願意改變一些事情嗎?加入或刪除一些東西?或者你對最近學到的東西有什麼看法或類似的故事嗎? 如果是這樣,請在評論中告訴我們,我們下次見:) --- 原文出處:https://dev.to/wasp/ive-been-writing-typescript-without-understanding-it-5ef4

資深工程師程式碼審查指南

程式碼審查。 ----- 你知道它們有多重要。 它們是獲得可靠程式碼的支柱之一。 然而,這是您在超級忙碌的日子裡需要**擠出**時間做的事情之一。 如果您不審查程式碼,那麼您可能會向用戶發送地雷,因為您永遠不知道它什麼時候會爆炸。 🤷 顯然,你知道這一點。你來這裡不是為了被告知「嘿!你應該進行程式碼審查!這是一件至關重要的事情! 我的團隊已經做了評論。我為什麼要在乎? ------------------- 如果不小心和勤勉地處理程式碼審查流程,可能會產生嚴重後果。 在我之前的一個組織中,程式碼審查通常沒有徹底完成,因此需要多次審查。它們也是由地球兩端的審查者完成的! 🌏 因此,處理任何評論幾乎花了一整天的時間。再說一次,因為評論通常不全面,所以 PR 的返工時間可能會因為一些瑣碎的事情而花費幾天的時間。 ![團隊週期時間分解](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvws8nxa2kjdvx6034n1.png) “如果不衡量,就無法改進” *通常被認為是彼得·德魯克(Peter Drucker)的作品,但我還沒有找到真正的證據。* 但我發現這句話對我的經驗來說意義深遠。 我過去曾向我的領導階層提出必要的組織變革,使所有團隊能夠減少跨時區的相互依賴,從而使人們能夠更快地協作。 我知道這樣做有多麼困難,但如果沒有可靠的資料支持理由來解釋為什麼需要改變,就更難實現任何改變。 *PS:這就是 Dhruv 和我創辦[Middleware 的](https://www.middlewarehq.com/)部分原因。 🚀* {% 嵌入 https://github.com/middlewarehq/middleware %} 好的,我聽到了。我有什麼選擇? --------------- 您理想的情況是進行徹底的程式碼審查,也就是說,明顯的危險訊號、效能或安全缺陷或其他難以閱讀的程式碼不應被忽視。 但您也希望所有這一切都在合理的時間內發生。 在合理的時間內合併經過嚴格審查的程式碼,這意味著您的團隊的交付可預測且具有高可靠性。 除非有一種經過充分研究、結構化的方法來掌握這一點。 🤔 …… 您聽過…DORA 指標嗎? 好吧,這不是另一部《DORA GOOD!文章。 這些是我過去專注於四鍵(正如出色的[Nathen Harvey](https://www.linkedin.com/in/nathen/)所[解釋的](https://dora.dev/guides/dora-metrics-four-keys/))如何幫助我改善我自己和我的團隊的程式碼交付體驗的經驗。 ![朵拉指標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b49lb17w68bs5fojske7.png) *在中介軟體開源中看到的 DORA 指標* 使用 DORA 探索程式碼審查 --------------- ### 評論會延長交貨時間多久 審核週期長直接影響變更的前置時間。 交貨時間基本上由 5 個部分組成。 1. 從第一次提交到 PR 開放的時間 2. 然後 PR 收到第一次審核(可能是評論、更改、批准) 3. 更改 PR 直至最終獲得批准所花費的時間 4. 批准和 PR 合併之間的時間 5. PR最終部署的時間 當然,任何需要花費時間的部分都會增加您團隊的時間。但有兩個部分是造成延誤的特別嚴重的因素。這是#2 和#3。 **\#2. PR 收到第一次審核的時間(首次回應時間)** PR 公開後,開發人員實際上無法對其做太多事情。公關可能完全可以順利進行!它可能需要切實的改變。在這一點上,只有評論才能告訴我們答案。這也是開發人員可能無法承擔更多任務的時候,因為從技術上講,審查可能隨時發生,並且他們會遭受上下文切換的困擾。 **上下文切換是開發人員最大的生產力殺手之一。** ### 對「每次審核時間」的誤導性關注 這討論了提前期指標的第三個子部分。 **#3。更改 PR 所花費的時間(返工時間)** 這裡真正的問題不在於在這裡花了多少時間,而是來回發生了多少次。我們稱之為「返工週期」。 因為如果因為PR被批准而只有1個返工週期,那麼在批准之前可能仍然需要很長時間,但這是實際的實施時間,而不是空閒時間。可以透過更好的培訓、程式碼庫入門、上下文共享等來減輕這種返工。 但是…如果您要來回很多次,那麼每個週期都有一些與之相關的空閒時間,就像第一次回應時間一樣。 在此期間,開發人員無法接受新的工作,因為這將不可避免地導致快速的上下文切換。 這種情況很可能發生在PR太大而無法一次審完,或是審查者因為其他原因沒有審透徹底的情況下。當作者和審稿人位於相距甚遠的時區時,情況尤其嚴重。由於每次審核和返工都可能發生在各自時區的工作時間內,因此返工更改之前的時間可能會被誇大到很多小時。 **這就是滾雪球效應** 像這樣被屏蔽的 PR 越多,團隊交付的速度就越慢。通常新工作不會停止出現,這使得開發人員準確管理和評估他們的工作變得更具挑戰性。 如果這種情況持續發生,也會對團隊士氣造成打擊。 **博士** 僅僅專注於減少「每次審查的時間」可能會適得其反。 目標應該是在不犧牲徹底性的情況下優化審核流程,確保每次審核都能增加真正的價值。 ### 低於標準的審查和變更失敗率 團隊始終在壓力和緊迫的期限下運作。期望這種情況會神奇地改變是不合理的。但認為不會偷工減料以確保貨物不能按時發貨也是不切實際的。 由於我們談論的是程式碼審查,因此經常被削減的角落之一是: 1. 建立的大型 PR 包含某個功能的所有程式碼,而不是包含良好的較小且更易於審查的 PR。 2. PR 的審核只需略讀即可,因為審核者目前可能沒有足夠的心理能力或時間來正確處理它。 這兩件事時常發生。開發人員也是人。你不能僅僅把責任歸咎於他們或強迫他們「正確地」複習來解決這個問題。 最重要的是你首先要知道它正在發生。因為這樣你就可以做點什麼。你問,你怎麼知道這件事? 1. 您的交貨時間應該會縮短。因為審核速度更快(通常比應有的速度快) 2. 您的變更失敗率可能會上升。當然,如果評論低於標準,您可能會帶來更多錯誤。 ``` 1. But, even if your CFR isn’t going noticeably down, your team might still be shipping low performance or quality code that would bite you back later, and will likely show up as higher Lead Time down the line. But by then it’ll be too difficult to correlate with the reviews of today. ``` **現在是時候提一下《朵拉》是一位很棒的嚮導,但它並不完美。** 不要將其視為明確的規則手冊。不要用它來衡量個人。 為您的團隊全面使用它,但也要參與其中,以確保它真正幫助您的團隊。畢竟這就是目標,不是嗎? 偉大的!如何? 👉 更快、更有效的審核策略 --------------------- ### 這是一個快速**預審清單** 1. 測試:確保所有相關測試都已編寫並通過✅。 ``` 1. This can be done by a CI bot (or Github Actions) ``` 2. 文件:更新相關文件,包括內嵌註解和自述文件。 3. 清晰的提交訊息:編寫描述性提交訊息,解釋更改背後的「原因」。 ``` 2. This could also be enforced via [commit-lint](https://commitlint.js.org/) ``` ``` 3. You could also use [aicommit](https://github.com/Nutlope/aicommits) to help write good and detailed commit messages! ``` ``` 4. My team often uses GH Copilot to create commit messages that actually end up being totally satisfactory to me! ``` 提交訊息範例: ``` feat: add user authentication - Implemented OAuth2 for secure login - Added unit tests for authentication flows - Updated API documentation with new endpoints ``` ### 正確的審稿人,正確的時間 將審閱者與其專業知識和當前工作量相匹配,以避免超負荷。複雜的變更交給高階開發人員,簡單的變更交給同業。 但您還需要了解開發人員對特定程式碼庫有多少上下文。 這裡有一些挑戰: - 如果您的開發人員在單一特定儲存庫中高度專業化,那麼由於需要時間來加入和共享上下文,因此在單獨的程式碼庫上使用他們的技能將非常困難。 - 如果您的開發人員對所有程式碼庫過於籠統,那麼由於缺乏特定程式碼庫的深層上下文,他們可能很難更快地解決某些問題。 - 如果團隊中的一位開發人員對事物有很多背景知識,那麼很容易讓他們負擔過重。您需要儘早騰出時間來分發上下文,這樣您的工作就不會在最關鍵的時候受到阻礙。 您希望確保將兩者結合起來,並且只需與您合作的 2-3 名開發人員即可實現這一目標。 ![視覺化團隊中的瓶頸](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va7uc3ajyb17kiamhq0h.png) *了解誰被阻止對誰進行程式碼審查至關重要。您不希望您的團隊因為有人需要休假而根本無法交付。* ### 貿易工具 使用靜態分析、程式碼檢查和自動檢查在人工審查之前捕獲簡單的問題。這讓審閱者可以專注於更複雜的回饋。 範例工具: - [ESLint](https://eslint.org/) :JavaScript linting。 - [Husky](https://typicode.github.io/husky/) :用於執行預提交檢查和靜態分析。 - CI/CD 管道:自動化測試和建置流程。 **超重要提示:** 爭論空格和製表符、分號與否、尾隨換行符很容易浪費大量時間。 但這一切並不重要。 決定並同意團隊最終確定的任何程式碼風格,並將它們作為 linter 規則的一部分強制執行。 這些東西不值得你花時間。 👍 ### 回饋的藝術 給予可操作的、具體的評論,重點是改進,而不是吹毛求疵。避免模糊的陳述並提供明確的指導。 分享如何將一個文件重組為多個文件,以及為什麼這樣做是個好主意。 分享為什麼在循環中多次呼叫資料庫可能是一個壞主意,因為我確信我不需要在這裡解釋。 😆 如果挑剔的問題主要是可以由 linter 處理的事情,那麼就使用其中之一。 人們討厭那些大多只有蝨子的評論。但同樣,糟糕的變數名稱、拼字錯誤等不能只是去生產! 😁 例子: ``` # Ineffective comment "Fix this." # Effective comment "Consider using a map here to improve lookup efficiency. This will reduce the time complexity from O(n) to O(1)." ``` 使用中介軟體簡化流程 ---------- ### 中介軟體如何提供協助 我能夠具體了解我的團隊在哪裡陷入困境、原因以及如何解除困境。 這就是我工作的一半,現在我能夠比以前更快地完成這些工作! ![團隊流程概述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl0k380fegaussrrckyd.png) ### 我重點關注以下幾點: - 審核指標:追蹤審核所需的時間並確定發生延遲的位置。 - 流程洞察:了解整個審核流程並找到需要最佳化的領域。 我不會對此進行太多討論,因為那樣聽起來就像是推銷! 😂 超越技術細節:人的因素 ----------- ### 培養建設性回饋文化 倡導一種將回饋視為成長機會的文化。建設性的、相互尊重的溝通有助於提高程式碼品質和團隊士氣💬。 ### 平衡速度與徹底性 平衡速度與徹底性。快速審查不應影響審查,徹底審查不應拖延。 ### 心理安全 確保審稿人和作者的心理安全。鼓勵公開討論不加指責地解決錯誤,營造持續改進的環境🌱。 請記住,當您分享改進回饋時,人們常常會保持警惕。考慮周到,思路清晰。 結論 -- 有效的程式碼審查對於保持程式碼品質和交付速度至關重要。透過與 DORA 指標保持一致、使用正確的工具並培養建設性的回饋文化,團隊可以簡化其審核流程。採用這些實踐可以使您的程式碼審查既高效又具有影響力。 *嘗試使用[中間件](https://www.middlewarehq.com/)來更深入地了解您的程式碼審查流程並確定需要進一步改進的領域。 🚀* 同樣,這些只是指導方針以及我們如何看待程式碼審查。請分享您的組織中如何進行程式碼審查! 程式碼審查對於整體產品可靠性起著至關重要的作用。有些情況下,糟糕的程式碼審查(不是糟糕的程式碼!)會造成負面的品牌影響。總而言之,更好的程式碼審查流程有助於降低故障率。 像[DORA](https://github.com/middlewarehq/middleware)這樣的框架被設計為輕量級的,可以幫助工程團隊提高工作效率,而無需工程師甚至領導者付出太多的努力。 Middleware 的使命是幫助工程團隊交付高效率的程式碼。請查看我們的[開源中間件](https://github.com/middlewarehq/middleware),我們的開源 DORA 指標解決方案,它是本地託管的。如果您喜歡,請考慮給我們一顆星! --- 原文出處:https://dev.to/middleware/the-senior-engineers-guide-to-the-code-reviews-1p3b

不是💩,這裡是如何編寫真正好的提交訊息(提示:這不僅僅是加入 commit-lint)

- **更新建置文件** - **修復依賴陣列** - **重構** - **修復測試** - *最有名的:***更新README.md** (感謝Github🤦) 這些是......我在上個月實際看到的一些令人驚嘆的提交訊息。 👀 而且......其中一些也存在於我們的程式碼庫中。 有點尷尬。我知道。 😅 但這是不行的🙅,理想情況下我想讓世界擺脫這些。 > ### “當然,無論如何。即使讀完這篇博客,我也不認為任何事情都會改變。” 為了改變一切,我需要讓你**相信**: - 這帶來了您可以感覺到或測量到的真正差異 - 這對其他人產生影響(稍後可能會歸因於您) > ### “好吧,繼續吧。我該怎麼做,我能從中得到什麼?” 寫得好的提交訊息有一些明顯的好處: ### **1. 🧑‍💻更容易除錯** `git blame`使我們非常容易理解為什麼要引入更改,並且可以更輕鬆地向作者詢問相關問題。 **`git blame`**並不是除錯過程中使用的第一個工具,但對於與業務邏輯相關的**複雜問題**,它是一個特別在大中型公司中**發揮作用的工具**。有些程式碼只是引發了這樣一個問題:“為什麼要這樣寫?”或「這最初是為了解決什麼目的?」。有些問題的答案不在於工程,而在於產品決策。寫這篇文章的作者最有可能知道其中涉及哪些決定。 ![無上下文偵錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3q6uby1ilrqoiixsds5.png) 當然,即使不需要花俏的訊息`git blame`也會告訴你提交的作者。那為什麼是這篇文章的這一部分呢? 因為身為作者,您多久會記得**您 6 個月前寫的投稿正在做什麼**?特別是當它有像“重構”這樣的提交訊息時?**運氣不好吧?** 我見過更有經驗的開發人員編寫了非常有用的提交訊息。我認為他們中的一些人做得有點過頭了,但這裡有一個粗略的例子: ``` Fix crash on login screen due to null pointer exception. - Checks for null values before accessing user profile data - Adds unit test to cover this scenario - Issue linked: BUG-5678 ``` 也許有點太多了,但如果不是很明顯的自動對焦就太糟糕了。 現在,當我需要除錯該領域的問題時,能夠為作者和上下文`git blame`可能是我的救星。 *我這麼說是充滿信心的,因為我曾經在 Uber 既是給予者,也是接受者。* **這有一個嚴重的額外好處,當您閱讀此部落格時,您可能會高估這一好處:** - 為您和您的團隊節省時間,減少挫折感 **在沒有上下文的情況下進行除錯是痛苦的。**甚至不是那種你可以說「殺不死你的,會讓你更強大」的情況。因為它只會讓你感到沮喪。 你知道的。你的團隊知道這一點。這就是為什麼你試圖了解是誰引入了「那個錯誤」並與他們交談,卻發現他們兩年前離開了公司。祝你好運。 🤝 這樣,您就留下了一份遺產,**讓人們深情地記住您,**並希望他們能再次與您合作。 > **“如果我使用合併或壓縮提交怎麼辦?”** > *有些人對他們有強烈的支持或反對意見。* > *我要說的是,合併提交有助於在一定程度上包含提交中包含的 PR 上下文,但如果寫得不好,單一提交本身可能沒有太多與之關聯的上下文。* > *而且由於 PR 可能涉及各種不同的更改,這些更改一起工作以發布功能,並且構成更改可能有自己的上下文以這種方式編寫,因此壓制它們可能會有效地混淆所有上下文,從而很難從提交歷史記錄。* > ***但無論哪種方式都可以寫出功能完善的軟體。**只要你和你的團隊都同意你的合併 PR 的方式對你來說是可行的,並且問題最少,我是誰,我會干涉嗎?* ### **2. 🔍 更輕鬆的程式碼審查** 如果您的組織不太關心讓程式碼審查變得輕鬆,也不讓它感覺像是一件苦差事,**那麼您需要與您的員工分享這一點**: {% 嵌入 https://dev.to/middleware/the-senior-engineers-guide-to-the-code-reviews-1p3b %} 現在,更好的提交訊息如何幫助程式碼審查? 根據[Middleware 的](https://github.com/middlewarehq/middleware)分析資料,成熟程式碼庫(活躍的倉庫,經過其設定階段)中的平均 PR 可以**約為 300 行**。 有很多行。大多數這些更改都不會發生在同一個文件中。他們也不應該。 **300 行位於可讀文件的上限**(儘管這不是一成不變的規則)。 這幾乎可以保證這些 PR 中會提供不同類型的更改,這些更改需要組合在一起才能提供所需的功能。 如果您因任何原因無法建立較小的 PR,**則可以在同一 PR 中進行較小的提交**。使每個提交都包含最小的邏輯隔離更改,以便提交訊息可以充分解釋其包含的內容。因為您也不想編寫一段長的提交訊息,所以您需要建立一個足夠小的提交,大約 50-60 個字元可以解釋其內容。 現在,審閱者可以**透過提交來審查你的 PR 提交,**而不必跟進你的所有事情,或者想知道為什麼某些東西是這樣寫的(如果他們這樣做,他們將不得不問你\[作者\],你知道嗎? ![有意義的提交訊息](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhchgf489srffox2x8nd.png) ### **3. 🚀 更好的發行說明!** 或者,如果您沒有準確產生“發行說明”,那麼它仍然是專案歷史的**更好文件**! 具體來說,Github 還允許您**根據提交**自動**產生專案的發行說明**。很多人會查看發行說明來了解新版本包含哪些修復或功能。 請參閱[React 程式碼庫](https://github.com/facebook/react/releases)的發布部分,並查看每個發布說明有多少反應! ![反應發行說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbsdve9uyj84h3ajwevw.png) 明確**發布說明對人們很重要**。透過編寫良好的提交,您可以節省編寫發行說明的精力。 最後... ### **4. 👥 鼓勵整個團隊更好的實踐** ![使用路克的力量](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y102iefuj5xzm2pdu2s.png) 當團隊成員看到編寫良好的提交訊息的好處時,他們很可能會效仿。這可以導致整個團隊採用更嚴格的程式碼提交方法,從而鼓勵清晰和精確的文化。這就是讓**SDE1 的思考和行為像 SDE2 一樣**的東西。 這是此類提交的另一個範例: ``` Update permissions routing layer to handle subroutes independently. - TKT-1234 - The permissions routing logic was previously coupled with its nested routes - This change will allow you to move subroutes to any other parent route without also having to make any changes to how the permissions for that subroute are defined ``` 在多人處理同一個專案的環境中,一致且詳細的提交訊息可以協調每個人的理解和期望,**減少潛在的衝突**和誤解,而不需要太多時間來阻止上下文共享。 當然,如果您能夠成為團隊或組織中更好的承諾訊息的擁護者,您會很樂意獲得由此帶來的任何好處,不是嗎? 👀 **能夠異步工作的團隊,才是能夠有效率地工作的團隊。**沒有人希望你的團隊在這樣的事情上遇到瓶頸。 👌 總結一下 ---- 好的提交訊息會帶來巨大的收益。 💪 為您和您所屬的團隊帶來收益。 更少的除錯時間、更少的挫折時刻、更好的文件、自動發行說明等。 作為所有這些改進的副作用,您甚至可能會注意到更快的程式碼交付、更少的審核等待時間、更少的返工週期! 繼續!您所帶來的所有效率改進都值得稱讚! *並且確切了解使用[中介軟體](https://github.com/middlewarehq/middleware)等生產力智慧工具為您的團隊帶來了多少收益!* 🚀 {% 嵌入 https://github.com/middlewarehq/middleware %} --- 原文出處:https://dev.to/middleware/not-heres-how-to-write-actually-good-commit-messages-hint-its-not-just-adding-commit-lint-j2i

Web 開發人員的頂級工具

**嘿,網頁開發者們!** 如果您是在廣闊的 Web 開發世界中揚帆起航的新手,擁有正確的工具可以決定您的旅程的成敗,有時很難選擇正確的工具。有太多可供選擇! 🤯 在本文中,我們將深入探討一些必備工具,這些工具不僅流行,而且能夠改變遊戲規則,提高您的工作效率,簡化複雜的任務,並使您的編碼生活變得更加輕鬆(也更有趣! ) 。 *PS 本文適合初學者,但歡迎更多經驗豐富的開發人員閱讀並加入他們的技巧。* --- ### 1. 程式碼編輯器和 IDE 程式碼編輯器是專門為編輯程式碼而設計的程式。它提供語法突出顯示、自動完成和除錯工具等功能,使編碼更有效率、更不易出錯。 **Visual Studio 程式碼(VS 程式碼)** VS Code 是一個輕量級但功能強大的原始程式碼編輯器,可以在桌面上執行。它支援 JavaScript、TypeScript、Node.js,並擁有豐富的其他語言擴充生態系統(包括 C++、C#、Python、PHP 等)。其內建的 Git 支援、強大的除錯和智慧程式碼完成 (IntelliSense) 使其成為開發人員的最愛。 **崇高的文字** Sublime Text 以其速度和效率而聞名,是一款多功能編輯器,可處理多個專案並在多個專案之間切換。其大量的鍵盤快捷鍵提高了工作效率,並允許開發人員更快地編寫和編輯程式碼。 **JetBrains WebStorm** WebStorm 專為 JavaScript 開發人員量身打造。它為 JavaScript、HTML 和 CSS 提供高級編碼幫助,包括自動完成、自動重構和強大的導航工具。 WebStorm 與流行的版本控制系統集成,並為建立 Web、伺服器和行動應用程式提供流暢的開發人員體驗。 --- ### 2.版本控制系統 版本控制系統是幫助軟體團隊管理原始碼隨時間變化的軟體工具。他們在一種特殊的資料庫中追蹤對程式碼的每次修改。如果發生錯誤,開發人員可以倒轉並比較早期版本的程式碼,以幫助修復錯誤,同時最大限度地減少對所有團隊成員的干擾。 **git** Git 是當今世界上使用最廣泛的現代版本控制系統。它允許多個開發人員在複雜的專案上一起工作,而不必擔心發生衝突的變更。 GitHub 和 GitLab 等平台也在 Git 功能之上提供了視覺化介面,讓管理專案變得更容易。 **水銀** 作為 Git 的替代方案,Mercurial 的設計考慮了簡單性和效能。它是一個分散式版本控制系統,允許開發人員有效管理大型程式碼庫。 --- **想要探索 Web 開發的未來嗎?** {% cta https://www.webcrumbs.org/waitlist %} 透過 Webcrumbs 了解更多 {% endcta %} --- ### 3. 前端框架 前端框架是允許開發人員建立使用者介面的標準結構。它提供了一種組織和建構程式碼的方法,並提供可重複使用的元件,從而使 Web 開發更快、更容易且更具可擴展性。使用框架可以大幅簡化開發過程,特別是對於需要快速建置的複雜專案。 **反應** React 是一個聲明式、高效且靈活的 JavaScript 程式庫,用於建立使用者介面。它允許開發人員從稱為“元件”的小型且獨立的程式碼片段組成複雜的 UI。 **視圖.js** Vue.js 因其簡單性而受到讚賞,並且對於初學者來說很容易上手。它的核心庫僅專注於視圖層,因此可以輕鬆選擇並與其他庫或現有專案整合。 **角** Angular 是一個使用 HTML 和 TypeScript 建立用戶端應用程式的平台和框架。它非常適合開發大型企業應用程式,並支援廣泛的功能,例如雙向資料綁定、模組化、模板化、AJAX 處理、依賴項注入等。 --- ### 4. CSS 框架與預處理器 CSS 框架是預先準備好的軟體框架,旨在允許使用級聯樣式表語言更輕鬆、更符合標準的網頁樣式。另一方面,預處理器為 CSS 加入了額外的功能,以保持樣式表組織良好,並允許我們更快地編寫程式碼。 **引導程式** Bootstrap 是世界上最受歡迎的框架,用於建立響應式、行動優先的網站。它包括用於排版、表單、按鈕、導航和其他介面元件的基於 HTML 和 CSS 的設計模板,以及可選的 JavaScript 擴充功能。 **順風 CSS** Tailwind CSS 是一個實用程式優先的 CSS 框架,用於快速建立自訂設計。與其他 CSS 框架不同,Tailwind 不附帶預定義元件,而是提供實用程式類別來直接在標籤中建立獨特的設計。 **薩斯** Sass 是一種成熟、穩定、強大的專業級 CSS 擴展語言。它有助於讓 CSS 再次變得有趣,並包含變數、巢狀和混合等功能,允許更靈活和可重複使用的程式碼。 --- ### 5. 建置工具和任務執行器 建置工具和任務執行程式是在軟體開發過程中自動執行重複任務的軟體,例如縮小程式碼、將原始程式碼編譯為二進位程式碼、打包二進位程式碼以及執行自動化測試。這種自動化使開發過程更加一致,並為開發人員節省了大量時間。 **網頁包** Webpack 是現代 JavaScript 應用程式的靜態模組捆綁器。當 Webpack 處理您的應用程式時,它會在內部建立一個依賴關係圖,該圖會對應您的專案所需的每個模組並產生一個或多個捆綁包。 **咕嚕咕嚕** Gulp 是一個工具包,可協助開發人員自動執行開發工作流程中痛苦或耗時的任務。它用於常見任務的任務自動化,例如 CSS 縮小、圖像優化、程式碼檢查和建立網頁。 ### 您使用哪些工具? 我們希望本指南可以幫助您選擇合適的工具來增強您的 Web 開發專案。嘗試將其中一些工具整合到您的工作流程中,並親自看看有何不同。 與我們分享您的經驗或推薦其他值得一提的工具! 在 WebCrumbs,我們正在發展一個供開發人員相處和共同學習的社群! {% cta [https://discord.gg/4PWXpPd8HQ](https://discord.gg/4PWXpPd8HQ "https://discord.gg/4PWXpPd8HQ") %} 在這裡加入我們{% endcta %} --- 原文出處:https://dev.to/buildwebcrumbs/top-tools-for-modern-web-developers-1ba3

17 個讓我保持高效率的開發者工具

許多開發人員喜歡從頭開始建立東西,但有時工作量太大,使用這些工具可以讓工作變得更容易。 這裡包含一系列工具,因此我相信您會找到適合您需求的工具。 我無法涵蓋所有內容,但如果您知道其他很棒的工具,請隨時在評論中告訴我! 我們開始做吧。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 資料和人工智慧演算法融入生產級網路應用程式。 -------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) 通常,當我需要 Python 介面時,我會使用 Streamlit。然而,它的效率不是很高,並且存在許多基於效能的問題。 另一方面,Taipy(開源)是用於輕鬆、端到端應用程式開發的完美 Python 程式庫,具有假設分析、智慧管道執行、內建調度和部署工具。 需要明確的是,Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能,而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具,但正如我之前告訴您的那樣,它的性能可能會顯著下降,尤其是在處理大型資料集時,這使得它對於生產級使用來說不切實際。 另一方面,Taipy 在不犧牲性能的情況下提供了簡單性和易用性。 ![大資料支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvk0tozn0lgj083rzcb.gif) Taipy 有許多整合選項,可以輕鬆地與領先的資料平台連接。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yv31uir3erina587zp8.png) 開始使用以下命令。 ``` pip install taipy ``` 最好的部分是 Taipy,它的所有依賴項現在都與 Python 3.12 完全相容,因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdvnbejf9aivxmqsd3hx.png) 另一個有用的事情是,Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 如果您想閱讀部落格來了解程式碼庫結構,您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難,但 Taipy 提供了[10 多個演示教程,](https://docs.taipy.io/en/release-3.1/gallery/)其中包含程式碼和適當的文件供您遵循。我將詳細討論其中一些專案! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 這些用例令人驚嘆,因此請務必查看一些演示應用程式。 Taipy 還在其企業版中提供了 Designer 應用程式(拖放低程式碼編輯器)。它非常有用,您可以觀看下面的演示來了解它是如何工作的! {% 嵌入 https://www.youtube.com/watch?v=y3VPT6IPvC4 %} Taipy 在 GitHub 上有 9.2k+ 顆星,並且處於`v3.1`版本,因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} 明星 Taipy ⭐️ {% endcta %} --- 2. [Jam](https://jam.dev/) - 一鍵錯誤報告。 ------------------------------------ ![果醬](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn2c6djsj5hej0gj07xs.png) 幾個月前我發現了 Jam,並且用過它好幾次。 Jam 是一款免費的 Chrome 擴充功能(非開源),您可以使用它來有效地報告錯誤。當然,您還可以做更多的事情。 報告錯誤是一個漫長的過程,您最終可能會錯過解決該錯誤所需的基本資料。這就是開發人員更喜歡使用 Jam 的原因。 觀看此影片,了解 Jam 的工作原理! {% 嵌入 https://www.youtube.com/watch?v=iXjmUwZLzVs&amp;embeds\_referring\_euri=https%3A%2F%2Fchromewebstore.google.com%2F&amp;source\_ve\_path=OTY3MTQ&amp;feature=emb\_imp\_woyt %} 正如您所看到的,最好的部分是它捕獲控制台和網頁日誌訊息,這使得其他開發人員可以方便地查看它。 您還將獲得人工智慧除錯器、後端追蹤、重現步驟和瀏覽器資訊。您還需要什麼? ![即興開發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2tpffk9h60skslw8i0b.png) 我已經使用 Jam 很長時間了,因此您還將獲得一個儀表板來查看您迄今為止建立的所有 Jam。它非常高效並且效果非常好。 ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t01buvno1r7pfrolfu6k.png) 它還可以與許多流行的工具一起使用,因此您根本不必改變您的環境。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr566uwdcmors2yvkfcb.png) 不要使用傳統的方式,您可以簡單地對 Jam 進行評論並改進整個流程來輕鬆處理它。 --- 3. [DevGPT](https://www.getdevkit.com/devgpt) - 開發者的人工智慧助理。 ----------------------------------------------------------- ![開發組](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k8a8jyeo9qkj2hqmc4n.png) 我已經使用 DevGPT 很久了,尤其是當 ChatGPT 還很新的時候。我曾經反覆核對訊息,看看它是否正確。我不相信 ChatGPT 和用於它的訓練資料。 您會驚訝地發現,在某些情況下 DevGPT 比 ChatGPT 更好。但這並不是 DevGPT 的唯一用例。 他們提供了一系列可以直接使用的提示。您可以修改它們的結構並使用斜線命令來使用它。 ![提示結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fc74vge21d65nbpauig.png) ![提示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yhl7o1grjvcg9q1fee5.png) 範例提示 ![提示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y51yi3t4s0a54tw0jrs.png) 範例提示 DevGPT 與其他人工智慧助理的獨特之處在於它提供了許多有用的迷你工具。 ![迷你工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il3qcaykt4k9x612251n.png) 我使用最多的是響應式設計,它有助於同時在所有螢幕上查看任何網站預覽。 ![響應式設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nodp7fbhagwqavd5ud5h.png) 響應式設計 每個工具本身都是完整的,因此您不會得到任何不完整的東西。我相信這實際上可以改善您的工作流程條件。 ![日期檢查員](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1q5bau21dd8dqaqbu4c.png) 日期檢查員 --- 4. [DevToys](https://github.com/DevToys-app/DevToys) - 開發者的瑞士軍刀。 ---------------------------------------------------------------- ![開發玩具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zfl1wjr01fdvca6wxbi.png) DevToys 協助完成日常開發任務,例如格式化 JSON、比較文字和測試 RegExp。 用例是相同的,但 DevToys 提供了更多選項,而且它是一個離線工具,這是一個優點。 這樣,就無需使用不可信的網站來處理您的資料執行簡單的任務。透過智慧型偵測,DevToys 可以偵測用於複製到 Windows 剪貼簿的資料的最佳工具。 緊湊的覆蓋範圍讓您可以保持應用程式較小並位於其他視窗之上。最好的部分是可以同時使用該應用程式的多個實例。 我可以肯定地說,很多開發人員從來不知道這件事。 我很高興地說它是專為 Windows 生態系統設計的軟體。哈哈! ![工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7wd60jsgdb5tx2t2adi.png) 他們提供的一些工具是: > 轉換器 - JSON &lt;&gt; YAML - 時間戳 - 數基數 - 規劃任務解析器 ![轉換器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8x784fx53x6ia02zal0.png) > 編碼器/解碼器 - 超文本標記語言 - 網址 - Base64 文字與圖片 - 壓縮包 - 智威湯遜解碼器 ![編碼器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73ts4x1vtcy4yswsmytw.png) > 格式化程式 - JSON - SQL - XML ![XML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5dc8ko2baywta82ymq5.png) > 發電機 - 哈希(MD5、SHA1、SHA256、SHA512) - UUID 1 和 4 - 洛雷姆·伊普蘇姆 - 校驗和 ![發電機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwsq8xig6jf69wr99iuv.png) > 文字 - 逃脫/逃脫 - 檢驗員和箱子轉換器 - 正規表示式測試器 - 文字比較 - XML驗證器 - 降價預覽 ![MD預覽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcbkse1i5324qg3xu1yd.png) ![文字差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlqqib4fcjimc03pdrwr.png) > 形象的 - 色盲模擬器 - 顏色選擇器和對比度 - PNG / JPEG 壓縮器 - 影像轉換器 ![圖形工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/631upekcqzh62xyrdjwt.png) 我不了解你,但我不會錯過這個! 您可以閱讀[如何執行 DevToys](https://github.com/DevToys-app/DevToys?tab=readme-ov-file#how-to-run-devtoys) 。 > 關於許可證的註解。 DevToys 使用的授權允許將應用程式作為試用軟體或共享軟體重新分發而無需進行任何更改。然而,作者 Etienne BAUDOUX 和 BenjaminT 不希望你這樣做。如果您認為自己有充分的理由這樣做,請先與我們聯絡討論。 他們在 GitHub 上擁有超過 23,500 顆星,並使用 C#。 {% cta https://github.com/DevToys-app/DevToys %} 明星 DevToys ⭐️ {% endcta %} --- 5. [Linear-](https://github.com/linear)任務管理工具。 ---------------------------------------------- ![線性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zlvr12b9untwos846i2.png) 我之前嘗試過使用 Trello 或 Jira 等工具,我想說線性絕對值得。 Jira 似乎有點複雜,適合大型團隊。 Linear 是開源的,是簡化問題、專案和產品路線圖的最佳方法之一。它是一種管理工具,我們都需要它來了解正在發生的事情以及未來的計劃。 ![工作管理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbno2672e69ofqonsob3.png) 您還可以獲得一個全域命令選單,可以幫助您更快地完成操作。作為開發人員,我們都喜歡這一點! 它們提供了一系列很酷的功能,例如自動跟踪,這可確保將啟動的問題加入到當前週期中。您還將收到有關有風險週期的警告,這可以幫助預測延誤。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3bi4fgk4vp0nfc75jlc.png) ![線性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfl0onb6rmiepiu1ibns.png) ![循環](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb7tpqvlbxyhkwzkroyj.png) 您可以看到[25+ 個完整功能](https://linear.app/features)的清單。您還可以了解[他們的整個旅程](https://linear.app/readme)。 如果您喜歡觀看影片,可以觀看此影片,其中涵蓋了有關線性的大部分基本內容。 {% 嵌入 https://youtu.be/oh2AfSFe0H0 %} 它有一個針對 2 個團隊的免費套餐計劃,這足以讓您嘗試一下並看看它們是否合適。 Linear 在主儲存庫上有 650 顆星,是使用 TypeScript 建構的。 {% cta https://github.com/linear %} 星線性 ⭐️ {% endcta %} --- 6. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 ------------------------------------------------------- ![件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf2qgqtpv78fxw5guqm5.png) Pieces 是一款 AI 生產力工具,旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。 它改善了您的工作流程和整體開發體驗,同時透過完全離線的 AI 方法保持工作的隱私和安全。 實時上下文的最新概念使其更上一層樓。您可以觀看引起熱議的演示! {% 嵌入 https://www.youtube.com/watch?v=aP8u95RTCGE %} 有了這個,Pieces Copilot+ 現在可以提供高度感知的幫助,引導您回到上次離開的地方。 - 問它, `What was I working on an hour ago?`並讓它幫助你重新進入心流狀態。 - 問一下, `How can I resolve the issue I got with Cocoa Pods in the terminal in IntelliJ?` - 或者`What did Mack say I should test in the latest release?` 。 Copilot 可以顯示您知道自己擁有但不記得在哪裡的資訊。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2ro3rcwnqp4qrmv5e8s.png) 它與您最喜歡的工具無縫集成,以簡化、理解和提升您的編碼流程。 它具有比表面上看到的更令人興奮的功能。 ✅ 它可以透過閃電般的搜尋體驗找到您需要的資料,讓您可以根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 ✅ Pieces 使用 OCR 和 Edge-ML 升級螢幕截圖,以提取程式碼並修復無效字元。因此,您可以獲得極其準確的程式碼提取和深度元資料豐富。 您可以查看 Pieces 可用[功能的完整清單](https://pieces.app/features/?utm_source=anmol&utm_medium=cpc&utm_campaign=anmol-article)。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysluzx8qtyaqrtnp4fld.png) ![分享程式碼片段](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz4xtesz5empxatxju1l.png) 您可以閱讀[文件](https://docs.pieces.app/?utm_source=anmol&utm_medium=cpc&utm_campaign=anmol-article)並存取[網站](https://pieces.app/)。 它還允許您捕獲程式碼片段,您可以在編輯現有程式碼或處理新專案時將其用作參考。這對於開源開發人員來說非常方便。 ✅ 在應用程式中保存部分程式碼。 ✅ 輕鬆存取已儲存的程式碼片段。 ✅ 從網路貼上程式碼。 ✅ 與您的團隊分享您的程式碼。 他們為 Pieces OS 用戶端提供了一系列 SDK 選項,包括[TypeScript](https://github.com/pieces-app/pieces-os-client-sdk-for-typescript) 、 [Kotlin](https://github.com/pieces-app/pieces-os-client-sdk-for-kotlin) 、 [Python](https://github.com/pieces-app/pieces-os-client-sdk-for-python)和[Dart](https://github.com/pieces-app/pieces-os-client-sdk-for-dart) 。 就開源流行度而言,他們仍然是新的,但他們的社群是迄今為止我見過的最好的社群之一。加入他們,成為 Pieces 的一部分! {% cta https://github.com/pieces-app/ %} 星星碎片 ⭐️ {% endcta %} --- 7.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 --------------------------------------------------------------------------- ![截圖到程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5akiyz5telxqqsj32ftu.png) 這個開源專案廣泛流行,但許多開發人員仍然不了解它。這可以幫助您以 10 倍的速度建立使用者介面。 這是一個簡單的工具,可以使用 AI 將螢幕截圖、模型和 Figma 設計轉換為乾淨、實用的程式碼。 該應用程式有一個 React/Vite 前端和一個 FastAPI 後端。如果您想使用 Claude Sonnet 或獲得實驗視訊支持,您將需要一個能夠存取 GPT-4 Vision API 的 OpenAI API 金鑰或一個 Anthropic 金鑰。您可以閱讀[指南](https://github.com/abi/screenshot-to-code?tab=readme-ov-file#-getting-started)來開始。 您可以在託管版本上[即時試用](https://screenshottocode.com/),並觀看 wiki 上提供的[一系列演示影片](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)。 他們在 GitHub 上擁有超過 52k 顆星,並支援許多技術堆疊,例如 React 和 Vue,以及不錯的 AI 模型,例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。 {% cta https://github.com/abi/screenshot-to-code %} 將螢幕截圖轉為程式碼 ⭐️ {% endcta %} --- 8. [Silver Searcher](https://github.com/ggreer/the_silver_searcher) - 超快速的程式碼庫搜尋工具。 ----------------------------------------------------------------------------------- ![銀色搜尋者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41z8goks4ag2opm0ynvp.png) 許多開源專案都有開發人員多年來建立的大型程式碼庫。顯然,有人無法一次理解所有內容,這就是這個工具的用武之地。 Silver Searcher(開源),通常縮寫為 Ag,是一種快速且有效率的程式碼搜尋工具,專為使用大型程式碼庫的開發人員而設計。 Ag 是作為傳統 grep 命令的替代品而建置的,它利用平行性和智慧過濾來提供超快速的搜尋結果。 它最初是[Ack](https://github.com/beyondgrep/ack3)的克隆,但速度快了 5 到 10 倍。您可以閱讀[為什麼它這麼快](https://github.com/ggreer/the_silver_searcher?tab=readme-ov-file#how-is-it-so-fast)。 它有很多很酷的功能,例如: ✅ 多執行緒可加快程式碼錯誤搜尋速度。 ✅ 忽略 .gitignore、.ignore 和 .hgignore 中的檔案模式以避免不必要的搜尋。 ✅ 可透過命令列選項和可下載的設定檔進行自訂。 好處是它可以與文字編輯器和 IDE 集成,以在您首選的工作流程中增強搜尋功能。 它可以根據您的開發環境在 Windows、macOS 和 Linux 上無縫執行。 您可以閱讀[安裝指南](https://github.com/ggreer/the_silver_searcher?tab=readme-ov-file#installing)。 它在 GitHub 上擁有超過 25,500 顆星,擁有 200 多名貢獻者。 唯一的問題是它不再被維護,因為最後一次提交是 4 年前的事情,並且有 400 多個活躍問題。 {% cta https://github.com/ggreer/the\_silver\_searcher %} 星銀搜尋者 ⭐️ {% endcta %} --- 9. [Obsidian](https://github.com/obsidianmd) - 根據您的風格編寫應用程式。 ------------------------------------------------------------ ![黑曜石](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26r33zlctwpny1f7hf96.png) Obsidian 是一款私密且靈活的寫作應用程式,可適應您的思維方式。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz0eig3tzezhm32i314m.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z983u116nummmo8n16b7.png) 您也可以查看插件清單\](https://obsidian.md/plugins),它們可以幫助您塑造 Obsidian 以適應您的思維方式。我已經檢查了那裡存在的瘋狂數量的選項! ![外掛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voyny8k3zbh6a92u3qy4.png) 您甚至可以協作並輕鬆追蹤修訂之間的更改,每個註釋都有一年的版本歷史記錄。 ![版本歷史](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqj3sxbwh1y5t9rbwb4l.png) 您可以發布這些(我從未嘗試過)並透過主題、自訂網域、密碼保護等控制網站的外觀和風格。這是一項付費功能,但您可以閱讀有關[使用 Obsidian 發布的](https://obsidian.md/publish)所有內容。 您可以閱讀詳細[文件](https://docs.obsidian.md/Home)並查看[即時網站](https://obsidian.md/)。您也可以使用本[指南](https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin)建立自訂插件,並使用 React 或 Svelte。 根據您使用的平台下載[Obsidian](https://obsidian.md/download) 。 他們提供永久免費的套餐,並且不根據功能或使用情況收費。只有當您將 Obsidian 用於商業用途時才需要付費。 您可以嘗試的最佳替代方案之一是[Capacities](https://capacities.io/) 。在某些方面它甚至可能比黑曜石更好。我將在以後的一篇文章中介紹它。 主儲存庫在 GitHub 上有 8k+ 顆星,有 1400 多名貢獻者。開源社群的另一個很棒的專案。 {% cta https://github.com/obsidianmd/obsidian-releases %} 星黑曜石 ⭐️ {% endcta %} --- 10.[自動完成](https://github.com/withfig/autocomplete)- IDE 風格的自動完成功能適用於您現有的終端和 shell。 ---------------------------------------------------------------------------------- ![自動完成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i8vcidsa023jf8r9382.png) [Fig](https://fig.io/?ref=github_autocomplete)讓命令列對個人來說更容易,對團隊來說更具協作性。 他們最受歡迎的產品是自動完成。當您鍵入時,Fig 會在現有終端機中彈出子命令、選項和上下文相關的參數。 作為開發人員,我們確實需要它來最大限度地提高我們的日常生產力。 最好的部分是您也可以將 Fig 的自動完成功能用於您自己的工具。以下是建立私人完成的方法: ``` import { ai } from "@fig/autocomplete-generators" ... generators: [ ai({ // the prompt prompt: "Generate a git commit message", // Send any relevant local context. message: async ({ executeShellCommand }) => { return executeShellCommand("git diff") }, //Turn each newline into a suggestion (can specify instead a `postProcess1 function if more flexibility is required) splitOn: "\n", }) ] ``` 您可以閱讀[Fig.io/docs](https://fig.io/docs/getting-started)了解如何開始。 您可以觀看下面的演示來了解它是如何工作的! ![影像](https://camo.githubusercontent.com/c477525cab041ce8177323e8140aa872341e3b8130d61454b89ccae87d00d87b/68747470733a2f2f646f63732e6177732e616d617a6f6e2e636f6d2f696d616765732f616d617a6f6e712f6c61746573742f71646576656c6f7065722d75672f696d616765732f636f6d6d616e642d6c696e652d636f6d706c6574696f6e732e676966) 它們在 GitHub 上有 24k+ 顆星,對於經常使用 shell 或終端機的開發人員很有用。 {% cta https://github.com/withfig/autocomplete %} 星狀自動完成 ⭐️ {% endcta %} --- 11. [Excalidraw](https://github.com/excalidraw/excalidraw) - 線上白板,讓您的想法得以實現。 ---------------------------------------------------------------------------- ![外畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u691s86xjinjvehmun51.png) 向遠距工作的過渡讓我懷念使用記號筆和白板進行腦力激盪的簡單性。 我們知道,當語言無法表達時,視覺效果可以彌補理解複雜想法的差距。 Excalidraw(開源)以數位方式重新建立白板體驗,對於補充無聊文字的快速圖表或插圖來說具有無價的價值。您可以建立漂亮的手繪圖表、線框圖或任何您喜歡的內容。 ![外畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki8wave2sgy3mikv4nec.png) 作為開發人員,對我來說最好的部分是您可以安裝 Excalidraw npm 套件以將 Excalidraw 整合到我自己的應用程式中。哇! ``` npm install react react-dom @excalidraw/excalidraw ``` 一些很棒的功能是: ✅ 本地化 (i18n) 支援。 ✅ 匯出到 PNG、SVG 和剪貼簿。 ✅ 多種工具 - 長方形、圓形、菱形、箭頭、線條、自由繪製、橡皮擦... ✅ 撤銷/重做。 ✅ PWA 支援(離線工作)。 ✅ 即時協作。 ✅ 本機優先支援(自動儲存至瀏覽器)。 ✅ 可分享連結(匯出至可與他人分享的唯讀連結)。 ![exalidraw 具有大螢幕功能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru356oc83ll9mo4dhjd5.png) Google Cloud、Meta、CodeSandbox、Notion 和 Replit 等產品整合了 Excalidraw,賦予其巨大的可信度。 您可以閱讀[文件](https://docs.excalidraw.com/docs/introduction/development)並檢查[excalidraw 編輯器](https://excalidraw.com/)。 他們甚至有一套迷你的人工智慧功能,並支援從美人魚轉換,這非常有幫助。 ![人工智慧特點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihl90jf222ahtymec8ui.png) 團隊提供了一個[即時編輯器](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/customizing-styles),如果您不想在本地執行,您可以直接檢查任何類型的變更。讓我著迷的是,有些團隊工作非常努力,因此開發人員的體驗是一流的。 ![即時編輯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob848loog24milg0h2uv.png) 儘管它是免費使用的,但他們提供了增強版本,因此您可以檢查[付費計劃和免費計劃之間的差異](https://plus.excalidraw.com/excalidraw-plus-vs-excalidraw/)。 說實話,我從來沒有真正想過這會是開源的。但它非常受歡迎,GitHub 上有超過 74,000 顆星,有 1,300 多個活躍問題。 {% cta https://github.com/excalidraw/excalidraw %} 明星 Excalidraw ⭐️ {% endcta %} --- 12. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 --------------------------------------------------------------- ![精簡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvk07kmn8p48cpssogov.png) 我們都知道在程式碼中建立文件非常重要,這樣我們就可以了解稍後發生的情況。但這是一個漫長的過程,而且大多數時候我們都懶得這麼做。 這就是 Mintlify 作為人工智慧文件編寫者可以幫助您在短短 1 秒內記錄程式碼的地方。哇! 幾個月前我發現了 Mintlify,從那時起我就一直是它的粉絲。 正如我們在該公司的大多數網站上看到的那樣,他們還為任何專案提供完整的文件。我見過很多公司使用它,甚至我使用我的商務電子郵件產生了完整的文件,結果證明這是非常簡單和體面的。如果您想要這些文件,Mintlify 就是解決方案。 ![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7obg1a3hilqx47h6nw3o.png) copilotkit 文件也由 Mintlify 提供支持 我們在這裡要討論的主要用例是根據程式碼產生文件。當您編寫程式碼時,它會自動記錄程式碼,以便其他人更容易跟上。 您可以安裝[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=mintlify.document)或將其安裝在[IntelliJ](https://plugins.jetbrains.com/plugin/18606-mintlify-doc-writer)上。 您只需突出顯示程式碼或將遊標放在要記錄的行上。然後點選「編寫文件」按鈕(或按 ⌘ + 。) 您可以閱讀[文件](https://github.com/mintlify/writer?tab=readme-ov-file#%EF%B8%8F-mintlify-writer)和[安全指南](https://writer.mintlify.com/security)。 如果您更喜歡教程,那麼您可以觀看[Mintlify 的工作原理](https://www.loom.com/embed/3dbfcd7e0e1b47519d957746e05bf0f4)。它支援 10 多種程式語言,並支援許多文件字串格式,例如 JSDoc、reST、NumPy 等。 順便說一句,他們的網站連結是[writer.mintlify.com](https://writer.mintlify.com/) ;回購協議中目前的似乎是錯誤的。 Mintlify 是一個方便的工具,用於記錄程式碼,這是每個開發人員都應該做的事情。它使其他人更容易有效地理解您的程式碼。 它在 GitHub 上有大約 2.5k 顆星,基於 TypeScript 建置,受到許多開發人員的喜愛。 {% cta https://github.com/mintlify/writer %} Star Mintlify ⭐️ {% endcta %} --- 13. [Focusmate](https://www.focusmate.com/) - 虛擬協同辦公,可以完成任何事情。 -------------------------------------------------------------- ![焦點伴侶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwxmwxio6jq7bw2mw10j.png) 儘管我們盡量不拖延,但在編碼期間我們總是擔心拖延。對於這些情況,Focusmate 是完美的解決方案! 這是一個共同工作的虛擬社區,您會在其中分配一位合作夥伴,確保您專注於自己的任務。 您需要與其他 Focusmate 用戶預訂會議。確定何時預訂課程後,您可以存取 Focusmate 儀表板。在那裡,您將看到一個日曆,其中包含其他使用者的可用會話時間。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bqjf66nrzrdjyccc6gl.png) 要與其他人預訂會議,您只需點擊日曆中的個人資料圖片,然後選擇與他們預訂會議。 ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21pudw9jdj90uup92k4j.png) 一旦您這樣做,Focusmate 就會推薦幾個可用使用者供您選擇。 重點是它允許[安靜模式](https://support.focusmate.com/en/articles/8060080-session-settings-my-task-quiet-mode-and-partner),在這種模式下,人們沒有麥克風或無法說話(想想圖書館和共享空間)。 ![靜音模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vav48ckhnn2dhikx19ju.png) 就我個人而言,我沒有嘗試過很多次,但它有一個很大的社區,所以值得一試。 --- 14. [Spark Mail](https://sparkmailapp.com/) - 優化您的電子郵件管理。 --------------------------------------------------------- ![火花郵件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/824r33nf4lc8p28fkoyp.png) Spark(非開源)不僅僅是一個電子郵件用戶端。這是關於人們應該如何溝通和組織工作的哲學。 Spark 的目標是幫助您專注於重要的事情並實現收件匣之外的目標。 他們首先使電子郵件變得智能,然後改進了團隊協作,現在他們已經解決了資訊過載問題,使電子郵件變得聚焦。 觀看快速演示,了解 Spark 的工作原理! {% 嵌入 https://www.youtube.com/watch?v=l2QpqNw3zXU&amp;t=3s %} 我喜歡 Spark 的一些很酷的功能: ✅ 您可以設定電子郵件稍後返回收件匣的時間。 ✅ 您可以新增提醒來提示您跟進。 ✅ 您可以安排電子郵件的發送時間。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czr3jmfmkhmqj7yd264k.png) ✅ 您也可以與您的團隊合作: - 在同一地址下管理電子郵件和團隊角色。 - 即時一起撰寫電子郵件草稿。 - 將任務分配給同事並追蹤他們的狀態。 ✅ 您甚至可以將電子郵件變成帶有私人評論的聊天。 ![合作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7p0vdhd7vh5s72qjgub.png) 我知道你想知道人工智慧,所以它有很多功能,你可以讓人工智慧為你起草電子郵件或獲得一堆回覆選項。 ![你有回覆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyux9mn1wc0h5bde3w9l.png) 更好的是,您可以校對、調整語氣、改寫、擴展或縮短文本,等等。 ![已編輯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yxs7vejau2h96ell5dr.png) 但我最喜歡的是建立電子郵件簽名的選項,因為簡單的選項並不那麼有效。 ![電子郵件簽名](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhq44742us4lity50jig.png) 您可以查看[定價計劃](https://sparkmailapp.com/plans-comparison),其中包括足夠好的免費套餐,然後下載[Spark for Windows](https://sparkmailapp.com/windows) 。也請查看他們的[部落格](https://sparkmailapp.com/blog)和[電子郵件指南](https://sparkmailapp.com/how-to)以了解更多資訊。 儘管我喜歡人工智慧,但我不喜歡人工智慧為我建立電子郵件草稿。我比較喜歡自己做,哈哈! 不管怎樣,Spark 絕對是一種有趣的電子郵件管理方式。嘗試一下並讓我知道效果如何。 如果您正在尋找替代方案,我推薦[Inbox Zero](https://github.com/elie222/inbox-zero) ,它是開源的,我已經在我的一篇文章中介紹過,以及 SaneBox (https://www.sanebox.com/),我沒有介紹它因為它沒有免費套餐。 --- 15. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 ----------------------------------------------------- ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pqsc84nhgj0b9dhfaxo.png) n8n 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型,n8n 將始終擁有可見的原始程式碼,可用於自託管,並允許您加入自訂函數、邏輯和應用程式。 每個開發人員都想使用的工具。畢竟,自動化是生產力和簡單性的關鍵。 ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxnp57kw5szbpj6mfs1p.png) n8n 基於節點的方法使其具有高度通用性,使您能夠將任何事物連接到任何事物。 有[400 多個集成選項](https://n8n.io/integrations),這幾乎是瘋狂的! 您可以看到所有[安裝](https://docs.n8n.io/choose-n8n/)選項,包括 Docker、npm 和自架。 開始使用以下命令。 ``` npx n8n ``` 此命令將下載啟動 n8n 所需的所有內容。然後,您可以透過開啟`http://localhost:5678`來存取 n8n 並開始建置工作流程。 在 YouTube 上觀看此[快速入門影片](https://www.youtube.com/watch?v=1MwSoB0gnM4)! {% 嵌入 https://www.youtube.com/watch?v=1MwSoB0gnM4 %} 您可以閱讀[文件](https://docs.n8n.io/)並閱讀本[指南](https://docs.n8n.io/try-it-out/),根據您的需求快速開始。 他們還提供初學者和中級[課程,](https://docs.n8n.io/courses/)以便輕鬆學習。 他們在 GitHub 上有 41k+ 顆星,並提供兩個包供整體使用。 {% cta https://github.com/n8n-io/n8n %} 明星 n8n ⭐️ {% endcta %} --- 16. [Infisical](https://github.com/Infisical/infisical) - 秘密管理平台。 ----------------------------------------------------------------- ![內部的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrolzjdnkky1r694h9av.png) Infisical 是一個開源秘密管理平台,團隊可以用它來集中 API 金鑰、資料庫憑證和設定等秘密。 他們讓每個人(而不僅僅是安全團隊)都可以更輕鬆地進行秘密管理,這意味著從頭開始重新設計整個開發人員體驗。 就我個人而言,我不介意使用 .env 文件,因為我並不特別謹慎。不過,您可以閱讀[立即停止使用 .env 檔案!](https://dev.to/gregorygaines/stop-using-env-files-now-kp0)由格雷戈里來理解。 他們提供了四種 SDK,分別用於<a href="">Node.js</a> 、 <a href="">Python</a> 、 <a href="">Java</a>和<a href="">.Net</a> 。您可以自行託管或使用他們的雲端。 開始使用以下 npm 指令。 ``` npm install @infisical/sdk ``` 這是使用入門 (Node.js SDK) 的方法。 ``` import { InfisicalClient, LogLevel } from "@infisical/sdk"; const client = new InfisicalClient({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", logLevel: LogLevel.Error }); const secrets = await client.listSecrets({ environment: "dev", projectId: "PROJECT_ID", path: "/foo/bar/", includeImports: false }); ``` ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3eu288l470du91b66pd.png) Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ,這是使用它的最佳方式。 Infisical 還可用於將機密注入 Kubernetes 叢集和自動部署,以便應用程式使用最新的機密。有很多整合選項可用。 ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x0tvt5ycaiqhggv6wml.png) 在使用整個原始程式碼之前一定要檢查他們的[許可證](https://github.com/Infisical/infisical/blob/main/LICENSE),因為他們有一些受 MIT Expat 保護的企業級程式碼,但不用擔心,大部分程式碼都是免費使用的。 他們在 GitHub 上擁有超過 11k 顆星,並發布了超過 125 個版本,因此他們正在不斷發展。另外,Infiscial CLI 的安裝次數超過 540 萬次,因此非常值得信賴。 {% cta https://github.com/Infisical/infisical %} 明星 Infisical ⭐️ {% endcta %} --- 17. [Gitinfluence](https://github.com/geovanesantana/gitfluence) - 尋找正確 git 指令的 AI 工具。 -------------------------------------------------------------------------------------- ![影響力](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mr459i8l2lwa892nkae.png) 如您所知,學習每一個 git 指令是很困難的。如果用例很複雜,它就會變得複雜。 這就是為什麼 Gitinfluence 是人工智慧驅動的解決方案,可以幫助您快速找到正確的命令。借助這個出色的工具,您可以節省大量時間。 例如,這是我輸入我需要的內容後得到的回應。 ![回覆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqylmd1mim7smgc78cby.png) 它就像聽起來一樣簡單而且非常有效率。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfmsm5cazm7sdnbvbmqe.png) 這是一個非常早期的開源專案 (next.js),擁有 55 顆星,但我確信它有很大的發展潛力。 {% cta https://github.com/geovanesantana/gitfluence %} 明星 Gitinfluence ⭐️ {% endcta %} --- 其中許多工具可以幫助您提高日常工作效率。 不管怎樣,如果您知道其他很棒的工具,請在評論中告訴我們。 祝你有美好的一天!直到下一次。 |如果你喜歡這類東西, 請關注我以了解更多:) | [![用戶名 Anmol_Codes 的 Twitter 個人資料](https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209)](https://twitter.com/Anmol_Codes) [![用戶名 Anmol-Baranwal 的 GitHub 個人資料](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Anmol-Baranwal) [![用戶名 Anmol-Baranwal 的 LinkedIn 個人資料](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注 Taipy 以了解更多此類內容。 {% 嵌入 https://dev.to/taipy %} --- 原文出處:https://dev.to/taipy/17-developer-tools-that-keep-me-productive-37e2

GraphQL、REST 和 gRPC 之間的區別

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![GraphQL、REST 和 gRPC 之間的區別](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0rpasf3053dewpovmo4.png)](https://bit.ly/3pMiO8g) image\_credit -[設計大師](https://bit.ly/3pMiO8g) 開發者們大家好,如果您正在準備編碼面試以及系統設計和微服務面試,您還應該準備 REST、GraphQL 和 gRPC 等內容,例如**REST、GraphQL 和 gRPC 之間有什麼區別?** ,這也是程式設計面試的熱門議題之一。 之前,我討論了[API 網關與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的區別以及[**JWT、OAuth 和 SAML 之間的區別**](https://medium.com/javarevisited/difference-between-jwt-oauth-and-saml-for-authentication-and-authorization-in-web-apps-75b412754127),在本文中,我將分享我對REST、 GraphQL 的想法,和 gRPC,這三種用於建立 Web API 的流行通訊協定。 它們用於允許不同的軟體元件透過網路相互通信,例如[微服務可以使用 REST 在它們之間進行同步通訊](https://medium.com/javarevisited/how-microservices-communicates-with-each-other-synchronous-vs-asynchronous-communication-pattern-31ca01027c53)。 這些協議都有自己的優點和缺點,了解它們之間的差異不僅從技術面試的角度很重要,而且對於為您的專案選擇正確的協議也很重要。 在本文中,您將了解**REST、GraphQL 和 gRPC 之間的差異**。您將了解每個協議背後的核心概念、它們的優點和缺點,並提供一些何時使用每個協議的用例。 讀完本文後,您應該更了解哪種協議最適合您的專案要求。 順便說一句,如果您正在準備系統設計面試並想深入學習系統設計,那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站,它們有許多很棒的系統設計課程 [![如何回答系統設計問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fehiytzxrwt4g89ubwfm.jpg)](https://bit.ly/3pMiO8g) 我們將首先進行一些介紹,然後深入研究它們中的每一個,然後再次回顧它們的差異,以便您清楚地了解它們的優點和缺點以及何時使用它們。 [REST](https://en.wikipedia.org/wiki/Representational_state_transfer)代表表述性狀態傳輸,它是一種流行的協議,用於建立透過 HTTP 公開資料和功能的 Web 服務。 它基於 HTTP 協定和一組約束,定義如何辨識和定址資源以及如何對這些資源執行操作。 另一方面, [**GraphQL**](https://graphql.org/)是 Facebook 開發的 API 查詢語言。它允許客戶端準確指定他們需要的資料,並且伺服器僅使用該資料進行回應。 GraphQL 的建立是為了解決 REST 的缺點和限制,因此它提供了一種更靈活、更有效的從伺服器獲取資料的方式,因為客戶端可以在單一請求中請求多個資源。 而且, [gRPC](https://grpc.io/)是一種用於建立 API 的高效能開源協定。它使用**Google 的 Protocol Buffers**作為資料格式,並提供對串流和雙向通訊的支援。 gRPC 由於其效能和對多種程式語言的支援而經常用於[微服務架構](https://javarevisited.substack.com/p/difference-between-microservices)中。 現在我們知道它們是什麼,讓我們深入研究它們。 --- 什麼是 REST?什麼時候使用它? -------------- 正如我所說,REST(表述性狀態傳輸)是一種用於設計分散式應用程式(尤其是基於 Web 的 API)的架構風格。 [RESTful API](https://javarevisited.blogspot.com/2018/02/top-5-restful-web-services-with-spring-courses-for-experienced-java-programmers.html)使用 HTTP 方法(例如 GET、POST、PUT、DELETE)對 URL(統一資源定位器)辨識的資源執行 CRUD(建立、讀取、更新、刪除)操作。 > > 如果您了解 HTTP,那麼您就了解 REST。 REST 還依賴**無狀態的客戶端-伺服器架構**,其中來自客戶端的每個請求都包含伺服器完成請求所需的所有訊息,而無需維護會話狀態。 以下是 REST 是不錯選擇的一些場景: 1. **當您需要透過 API 公開資料和服務時,**因為 REST 是一種流行且完善的協議,用於建立可供其他應用程式和服務輕鬆使用的 API。 2. **當您需要支援多種平台和程式語言時,**因為 REST 依賴標準 HTTP 方法和資料格式,因此它可以被多種程式語言和平台使用。 3. **當您需要支援快取時,**因為REST支援緩存,這可以提高效能並減少網路流量。 4. 當您需要建立簡單、輕量級的 API 時 5. 當您需要支援大量資源時 此外,了解 HTTP 方法對於設計 REST API 非常重要。您可以進一步查看[**REST API 設計、開發和管理**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Frest-api%2F)課程,以了解 REST API 設計、開發和管理。 [![何時使用 REST API](https://miro.medium.com/v2/resize:fit:609/1*X-VfQ3bf6WL-tcb9C8J7DA.png)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Frest-api%2F) 總體而言, **REST 是一種靈活且廣泛採用的協議**,對於許多類型的 API 來說都是不錯的選擇。 然而,它可能不是所有場景的最佳選擇,特別是那些需要即時更新或更複雜的查詢和資料操作的場景。 在這些情況下,其他協定(例如 GraphQL 或 gRPC)可能更合適。 --- 什麼是 GraphQL?什麼時候使用它? -------------------- GraphQL 是一種 API 查詢語言,由 Facebook 於 2012 年開發,並於 2015 年作為開源專案發布。 GraphQL 允許客戶端定義他們所需的資料結構,並且伺服器可以準確地回應該資料,而無需任何不必要的資料。 它通常用作 RESTful API 的替代方案,特別是在客戶端需要對傳回的資料進行細微控制的情況下。 以下是 GraphQL 是不錯選擇的一些場景: 1. 當您想要減少網路流量時,GraphQL 允許客戶端準確指定他們需要的資料,這可以減少透過網路傳輸的不必要的資料量。 2. 當您需要支援各種客戶端時,因為 GraphQL 支援強類型查詢,這可用於確保客戶端以他們理解的格式接收正確的資料。 3. **當您需要支援即時更新時**,因為 GraphQL 支援透過訂閱進行即時更新,這允許客戶端在更新可用時立即接收更新。 4. 當您需要支援複雜的查詢和資料操作時:因為GraphQL允許客戶端使用簡單的語法執行複雜的查詢和資料操作操作,例如過濾、排序和聚合。 5. 當您需要支援版本控制時,因為 GraphQL 透過允許客戶端指定他們在請求中使用的架構版本來支援版本控制,這樣隨著架構隨時間的發展,可以更輕鬆地保持向後相容性。 總的來說,GraphQL 是一個強大且靈活的協議,對於資料細粒度控制和即時更新很重要的場景來說,它是一個不錯的選擇。 但是,**它可能比 RESTful API 需要更多的設定和配置,**特別是當您使用多種程式語言或平台時。 您可以進一步查看[**GraphQL by Example**](https://click.linksynergy.com/deeplink?id=CuIbQrBnhiw&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fgraphql-by-example%2F%3FcouponCode%3DLEADERSALE24A)和[GraphQL with React: The Complete Developers Guide](https://click.linksynergy.com/deeplink?id=CuIbQrBnhiw&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fgraphql-with-react-course%2F%3FcouponCode%3DLEADERSALE24A)以了解有關 GraphQL 及其使用方法的更多資訊。 這也是一個很好的圖表,突出顯示了**REST 和 GraphQL 查詢之間的差異:** [![何時使用 GraphQL](https://miro.medium.com/v2/resize:fit:609/0*7uX0fDc7ROg3OgjF.png)](https://click.linksynergy.com/deeplink?id=CuIbQrBnhiw&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fgraphql-by-example%2F%3FcouponCode%3DLEADERSALE24A) --- 什麼是 gRPC?什麼時候使用它? ----------------- 現在讓我們看看什麼是 gRPC 以及它提供什麼? gRPC 是 Google 開發的一個高效能、開源的遠端過程呼叫 (RPC) 框架。 它使用Protocol Buffers作為介面描述語言,支援多種程式語言,可以輕鬆建構跨不同平台和環境的分散式系統。 以下是 gRPC 是不錯選擇的一些場景: 1. **當您需要高效能和高效率時,**因為 gRPC 使用二進位協定並支援串流傳輸,這可以使其比其他協定更快、更有效率,特別是在高延遲或低頻寬連線上。 2. 當您需要支援多種程式語言時,因為 gRPC 支援多種程式語言,包括 Java、C++、Python 和 Go,可以輕鬆建立跨不同平台和環境的分散式系統。 3. 當您需要支援即時更新時,因為 gRPC 支援雙向流,這允許伺服器即時向客戶端發送更新。 4. **當您需要處理大量資料時,**因為 gRPC 使用 Protocol Buffers,它比 JSON 或 XML 等其他資料格式更有效率、更緊湊,使其成為處理大量資料的不錯選擇。 5. 當您需要建立微服務或分散式系統時,因為 gRPC 提供了一個強大且靈活的框架,用於建立可以水平擴展並處理大量流量的微服務和分散式系統。 總體而言,gRPC 是一個強大且高效的協議,對於效能、效率和即時更新很重要的場景來說,它是一個不錯的選擇。 但是,**與 RESTful API 等其他協定相比,它可能需要更多的設定和配置**,特別是當您使用多種程式語言或平台時。 您可以進一步查看[Protocol Buffers 3 完整指南 \[Java、Golang、Python\]](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fprotocol-buffers%2F)和[gRPC \[Java\] 大師班:建立現代 API 和微服務](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fgrpc-java%2F),以了解有關 gRPC 和 Google Protocol buffer 的更多資訊。 這是一個很好的圖表,突出顯示了 REST、gRPC 和 GraphQL 請求之間的區別 [![REST 和 GraphQL 之間的區別](https://miro.medium.com/v2/resize:fit:609/1*o4TgSCCvQgyE0OKsVSgQwg.png)](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fprotocol-buffers%2F) image\_credit --- [https://medium.com/@LadyNoBug/grpc-vs-rest-vs-others-5d8b6eaa61df](https://medium.com/@LadyNoBug/grpc-v-s-rest-v-s-others-5d8b6eaa61df) --- GraphQL、REST 和 gRPC 之間的區別 ------------------------- 現在您已經了解什麼是REST、gRPC 和GraphQL 以及它們的工作原理,以下是REST、GraphQL 和gRPC 之間的主要區別(以點格式表示),記住它們的主要特徵以及何時在專案中使用它們: ### REST: - 代表代表性狀態轉移 - 使用 HTTP 方法(GET、POST、PUT、DELETE)執行 CRUD 操作 - 以結構化格式傳送資料,通常是 JSON 或 XML - 不同資源可以有多個端點 - 客戶端收到回應中指定的所有資料,即使他們不需要全部資料 - 支援緩存,但管理起來可能很複雜 - 完善且廣泛採用,提供大量工具和文件 ### 圖形語言: - 允許客戶準確指定他們需要什麼資料,並僅接收該資料 - 使用單一端點存取多個資源 - 擁有自己的查詢語言,允許複雜的資料取得和操作 - 可以支援透過訂閱即時更新 - 在某些情況下比 REST 更有效率,特別是對於頻寬有限的行動設備 - 與 REST 相比,快取可以更細粒度且更易於管理 - 比 REST 需要更多的設定和配置,並且可能需要更多的專業知識才能有效使用 ### 遠程過程呼叫: - 代表帶有 Google 協定緩衝區的遠端程序呼叫 (RPC) - 使用二進位資料代替 HTTP 進行通信 - 支援串流資料即時更新 - 使用協定緩衝區進行序列化,這比 JSON 或 XML 更有效率 - 可以跨不同的程式語言使用 - 專為微服務之間的高效能、低延遲通訊而設計 - 比 REST 需要更多的設定和配置,並且可能需要更多的專業知識才能有效使用 - 互通性可能不如 REST 或 GraphQL,因為它不是基於 HTTP 這裡還有一個很好的表格,突出顯示了 REST、GraphQL 和 gRPC 之間的區別,您可以使用它來快速複習: [![REST、GraphQL 和 gRPC 之間的區別](https://miro.medium.com/v2/resize:fit:609/1*USJRkl5JS0IT90RqwMEopA.png)](https://javarevisited.blogspot.com/2022/04/difference-between-graphql-and-rest-api.html) 還值得注意的是,**這些協議並不相互排斥,並且可以組合使用它們以利用它們的不同優勢。** 例如,您可能對大多數 API 使用 REST,但對某些資源密集型查詢使用 GraphQL,或使用 gRPC 在微服務之間進行通信,同時對外部 API 用戶端使用 REST 或 GraphQL。 --- ### 系統設計訪談資源: 而且,如果您正在準備系統設計面試,那麼這裡有一些最佳系統設計書籍、線上課程和練習網站的精選列表,您可以查看這些內容,以便更好地準備系統設計面試。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 2. [**《系統設計面試》作者:Alex Xu**](https://amzn.to/3nU2Mbp) :這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) :綜合指南,涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design):LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種需要練習的問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) :精選的資源列表,包括文章、書籍和影片,可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 7. **高可擴展性部落格**:該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**:請參閱「Gaurav Sen」和「Tech Dummies」等頻道,以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) :Alex Xu 的一本現場書籍和課程,用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容,並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) :一個專為面試準備的網站,特別是針對亞馬遜和谷歌等 FAANG 公司,他們還有很棒的系統設計課程和許多其他材料,可以幫助您破解 FAAN 面試。 [![如何為系統設計做準備](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqv3p46jmw5qc0newuiu.jpg)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) #### 結論 這就是**REST、GraphQL 和 gRPC 技術之間的差異。**簡而言之,REST 是一種用於建立Web 服務的流行協議,受到HTTP 的啟發並充分利用HTTP 提供的功能,而GraphQL 是一種查詢語言,允許客戶端準確指定他們需要從伺服器獲取哪些資料。 它的建立是為了解決 REST 的缺點,因此如果您正在努力維護 REST API,那麼它絕對是一個可行的選擇。 另一方面, **gRPC**是一種高效能、開源協議,常用於微服務架構。 這些協定中的每一個都有不同的用途,並且它們都可以一起使用,為 Web 應用程式提供全面且高效的通訊系統。 --- 原文出處:https://dev.to/somadevtoo/difference-between-graphql-rest-and-grpc-58bl

REST API 設計規則

為什麼編寫乾淨的 REST-API 設計很重要 ----------------------- 在當今互聯的世界中,精心設計的 REST API 是高效且可擴展的應用程式的支柱。 編寫乾淨的 REST API 設計至關重要,原因如下: - **增強的可用性:**精心設計的 API 直覺且易於使用,適合各種技能水平的開發人員使用。這簡化了整合並縮短了學習曲線。 - **提高可維護性:**乾淨的程式碼可以更輕鬆地辨識和修復錯誤、加入功能和擴展 API,從而提高可維護性。這確保了長期穩定性並降低了開發成本。 - **提高安全性:**結構良好的 API 具有適當的身份驗證和授權機制,有助於防止未經授權的存取、資料外洩和其他安全漏洞。 - **增強的效能:**簡潔的設計透過使用高效的資料結構、避免不必要的呼叫並最大限度地減少延遲來優化效能。這提供了無縫的用戶體驗並提高了整體應用程式效能。 - **縮短開發時間:**明確定義的 API 規格和清晰的文件可消除猜測並減少大量測試的需要,從而加快開發速度。這節省了寶貴的開發時間和資源。 - **改進的可擴展性:**簡潔的設計透過提供模組化架構來實現輕鬆的可擴展性,該架構可以輕鬆擴展以處理增加的流量或新功能。這確保了 API 可以隨著應用程式的需求而成長。 - **提高可重複使用性:**設計良好的 API 可以在多個應用程式中重複使用,從而減少重複並提高一致性。這簡化了開發並節省了時間和精力。 - **改進的文件:**簡潔的設計更容易記錄,讓開發人員清楚 API 的工作原理以及如何有效地使用它。這可以減少混亂並提高採用率。 URI規則 ----- **一個url的結構如下** **`scheme :// authority / path [?query][#fragment]`** 例如 `https://soccer.api.org/teams/dortmund/players?name=Rona#2` 有兩種類型的資源 1. 集合資源:包含資源的集合。它可以比喻為資料庫關係 2. 單例資源:包含單一資源。它可以比喻為資料庫記錄。 --- 設計 Rest-Api 時 1 集合資源應該是複數 ``` + soccer.api.org/teams/dortmond - soccer.api.org/team/dortmond ``` 2 Singleton資源應該是單一的,可以用api後面資料庫系統中代表資源的唯一id來代替 ``` +soccer.api.org/teams/dortmond/players/58c1aaae-205a-11ef-aeea-a64c74618950 ``` 3 URI 中沒有**尾隨正斜杠** ``` +soccer.api.org/teams/dortmond/players -soccer.api.org/teams/dortmond/players/ ``` 4 使用**連字號**取代**底線**以提高 API 的可讀性 ``` + api.blog.com/blogs/this-is-my-blog - api.blog.com/blogs/this_is_my_blog ``` 5 URI 路徑**中小寫字母**優先於**大寫字母** ``` + api.example.com/my-api/my-resource - api.example.com/My-Api/My-Resource ``` 6 URI 中沒有**檔案副檔名** ``` + api.example.com/api/resource - api.example.com/api/resource.json ``` 7 CRUD 函數名稱**不應**在 URI 中使用 ``` + DELETE api.example.com/api/resource - GET api.example.com/api.resource/delete ``` 8 URI 的查詢元件只能在集合資源中使用 ``` + GET /users?role=admin ``` 9 URI 的查詢元件應用於對集合結果分頁 ``` + GET /users?pageSize=25&pageStartIndex=50 ``` HTTP 方法規則 --------- | HTTP 方法 |用途 | | ----------- | -------------------------------------------------- -------------------------------------------------- ------------- | |POST |建立新資源。類似於建立 | |GET |獲取資源的表示。類似閱讀 | |PUT|透過替換**整個**資源來更新資源 | |DELETE |刪除資源 | |PATCH|透過更改所需資源的一部分來更新資源,而不取代整個資源。 | |HEAD|僅獲取響應頭而不是響應體 | |OPTION |獲取特定資源的所有可用選項 | > PUT 可用於建立和更新資源。但是,根據最佳實踐,通常建議使用 POST 來建立新資源,並使用 PUT 來完全取代現有資源。 --- 版本控制 ---- 對 api 進行版本控制對於以下方面可能很重要: **保持向後相容性:**版本控制可讓您引入新功能,而不會破壞依賴舊 API 版本的現有整合。使用者可以繼續使用熟悉的端點,而尋求新功能的使用者可以採用版本化的 API。 **確保一致且設計良好的 API:**跨版本的一致命名約定有助於提供使用者友善的體驗。更改端點會破壞這種體驗,而版本控制有助於避免這種情況。 --- 結論 == 現在您已經掌握了這些 REST API 設計規則,是時候將它們付諸實現了!在下面的評論中分享您的 API 創作,讓我們一起建立一個設計良好且對開發人員友好的 API 世界。 --- 原文出處:https://dev.to/ezekiel_77/rest-api-design-rules-2c4j

21 個可提高您工作效率的 VS Code 擴展

開發者們大家好👋 身為開發人員,我們大部分時間都花在 VS Code 上。在這篇文章中,我將分享一些 VS Code 擴展,它們可以幫助提高您的工作效率並節省您的寶貴時間。 讓我們開始吧🚀 Codiumate -- ![鈉鹽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmm61xovmha09i9us1fl.png) > ✨ Codiumate 使用 AI 產生測試、檢視測試結果、修復用 Python、JavaScript、TypeScript 和 Java 等各種程式語言編寫的程式碼的錯誤和錯誤。它在您的 IDE 中充當您的私人代理或助手。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Codium.codium) Partial Diff ---- ![部分差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uqlcq8e60lkthg7dosx.png) > ✨ Partial Diff 擴充功能可讓您比較同一文件內或不同文件中的不同文字選擇,從而更容易發現變更和差異。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff) Git Graph ---- ![git圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww8j9qvrsr66wmn0mosw.png) > ✨ Git Graph 擴充功能為您提供了 Git 儲存庫的視覺化表示,讓您更容易理解和管理分支、提交和合併,您還可以從圖表中執行 Git 操作。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) Path Intellisense ------ ![路徑智能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v22b2kyhxwwfpzpnwtc4.png) > ✨ Path Intellisense 擴充擴展了 VS Code 中的預設路徑完成,以包含工作區中的所有可用路徑,即使它們尚未匯入。 🔹連結 [👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) Error Lens ---- ![誤差透鏡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui3i6k3zm1b64r1ga7xb.png) > ✨ Error Lens 擴充功能透過直接在程式碼中顯示錯誤訊息來增強 VS Code 中的錯誤突出顯示。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) SQL工具 ----- ![SQL工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ceg4gtsb96fme1in7z2.png) > ✨ SQLTools 是 VS Code 的輕量級 SQL 用戶端,它為您提供資料庫管理、查詢執行,並直接在編輯器中提供視覺化結果。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools) Markdown 多合一 ------------ ![Markdown 多合一](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k7dpy89w65i30ggq8ih.png) > ✨ Markdown All in One 擴展為 Markdown 編輯提供全面支持,包括快捷方式、目錄生成等。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) Turbo 控制台日誌 ----------- ![Turbo 控制台日誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ycisuti1dsz1z632olq.png) > ✨ Turbo Console Log 擴充功能會自動將有意義的 console.log 語句新增到您的程式碼中,這可以在偵錯過程中節省大量時間。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) Quokka.js --------- ![Quokka.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bko1yy8akuwm36ny4j4u.png) > ✨ Quokka.js 是一款用於快速 JavaScript / TypeScript 原型設計的開發人員生產力工具。當您鍵入時,執行時間值會更新並顯示在 IDE 中程式碼旁邊。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 專案經理 ---- ![專案經理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drvs445isps5ydysl58v.png) > ✨ 專案管理器可讓您在 VS Code 中的不同專案之間輕鬆切換,使其成為管理和導航多個專案的捷徑。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) Todo Tree --- ![所有樹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr5zknvtyuujeipsmbh0.png) > ✨ Todo Tree 擴充功能掃描您的程式碼中的註解標籤,例如 TODO 和 FIXME,並將它們顯示在活動欄中的樹狀視圖中。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) TabNine ---- ![選項卡九](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bycu1zglpkloehx8yq1d.png) > ✨ TabNine 是一款支援多種程式語言的人工智慧程式碼補全擴展,它為您提供智慧程式碼建議、即時程式碼補全、聊天和程式碼生成。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) Better Comments ----- ![更好的評論](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkjarirc3nsaeqg509zr.png) > ✨ Better Comments 擴充功能可協助您在程式碼中建立或編寫更人性化的註解。它允許您使用不同的顏色將註釋分類為警報、查詢、待辦事項等。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) Polacode --- ![波拉碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0shnpzcdku2prtrafvl.png) > ✨ Polacode 是一款時尚的程式碼螢幕截圖工具,可讓您直接從 VS Code 建立漂亮的程式碼螢幕截圖。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) REST Client ----- ![休息客戶端](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s54cm9rrjwllxjipi9y0.png) > ✨ REST 用戶端可讓您直接在 VS Code 中發送 HTTP 請求並查看回應,從而更輕鬆地測試和偵錯 API。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) HTML CSS 支持 ----------- ![HTML CSS 支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk68l0ra0jjpy07ebe0t.png) > ✨ HTML CSS 支援根據工作區中的 CSS 檔案為 HTML 類別屬性提供 CSS 類別和 ID 名稱補全。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) Git Lens ---- ![吉特透鏡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyhhk9m4xezrl6gqrrh9.png) > ✨ GitLens 擴充功能增強了 VS Code 的內建 Git 功能。它可以幫助您視覺化程式碼作者、無縫導航和探索 Git 儲存庫,並深入了解您的程式碼。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) Wakatime ---- ![瓦卡時間](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfs2ux1njyipa8cdc88n.png) > ✨ WakaTime 擴充功能為您的編碼活動提供自動時間追蹤。它可以讓您深入了解自己的編碼習慣,並幫助您更有效地管理時間。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) Bookmarks -- ![書籤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jn88xn94pg001feiazq.png) > ✨ 書籤擴充功能可協助您在程式碼中導航,輕鬆快速地在重要位置之間移動。不再需要搜尋程式碼。它還支援一組選擇命令,允許您選擇已加入書籤的行以及已加入書籤的行之間的區域。它對於日誌檔案分析非常有用。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) PlantUML ----- ![植物UML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvlanhdp5yx61xteaen1.png) > ✨ PlantUML 擴充功能可讓您從純文字描述建立 UML 圖,從而輕鬆視覺化和記錄您的系統設計。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml) 尾隨空格 ---- ![尾隨空格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55wyje0me31nchvmkk6k.png) > ✨ 尾隨空格擴充會自動反白並刪除程式碼中的尾隨空格,它有助於保持程式碼整潔且一致。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) 這就是這篇文章的內容。感謝您的閱讀💖 > 請在評論中告訴我您最常使用哪一個或任何其他有用的擴充功能👇 在 👉 https://x.com/kiran\_\_a\_\_n X https://github.com/Kiran1689 GitHub 上找到我 https://dev.to/dev\_kiran --- 原文出處:https://dev.to/dev_kiran/21-vs-code-extensions-to-boost-your-productivity-1fil

Kubernetes 編譯失敗:然後正式機掛掉的情況!

我從來都不是一個大賭徒。過去我可能會下一個小賭注來為超級盃增添趣味,但我並沒有那麼投入,但這並不是什麼瘋狂的事情。真正投入資金需要一定程度的確定性,而我在任何體育賽事、選舉結果或未來預測中都很少有這種確定性。科技領域的確定性非常少。工作保障並不是既定的,產業趨勢潮起潮落,你每天使用的[工具](https://glasskube.dev/guides/kubectl/)和技術堆疊很可能會隨著時間的推移而不斷發展。儘管充滿了不確定性,但還是有一些東西你可以安全地押注,但在某些時候,**你會遭遇中斷。** ![賭場](https://media1.giphy.com/media/26tneF8wxg0H4NrC8/200.webp?cid=ecf05e4725b5vpix4vj3x0ajz06gb8rehvx96kjva729y9nu&ep=v1_gifs_search&rid=200.webp&ct=g) 從事任何時間的 Kubernetes 工程師都可以證明這個現實。在這種情況下,害怕失敗或執行艱鉅的任務來確保[100% 可用性](https://andrewmatveychuk.com/why-99-99-uptime-or-sla-is-bad/)是沒有意義的,如果有任何[錯誤](https://www.amazon.com/Black-Box-Thinking-People-Mistakes-But/dp/1591848229)和中斷應該被視為學習機會,這對於任何渴望成熟並提供高品質的環境來說都是必要的邪惡以可靠的方式提供服務。 有效處理和消化中斷的最佳方法是系統地進行[事後分析](https://www.atlassian.com/incident-management/postmortem/reports)。事實證明,這些是我們尋找模式並綜合中斷所提供的經驗教訓的最敏銳的工具。關於 Kubernetes 叢集故障中常見的模式主題,出現了一些模式。 ![reddit-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xml8lmgs8g9e36624td5.png) DNS、網路和預設資源分配是一些關鍵的罪魁禍首。 ![reddit-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ijimseogd4nn43k5sni.png) 在這篇文章中,我們將分析其中的一些事後分析,並盡力吸收其他人經過艱苦的努力才學到的東西。 故障嚴重程度等級 -------- 並非每次中斷都會產生相同的影響,因此我建立了一個非常科學的分類系統來了解每次 Kubernetes 中斷的影響: **🤷 - 有點糟糕:**微不足道的 Kubernetes 故障 **😅 - 非正式機,但仍然令人煩惱:**我們沒有影響任何客戶,但我們學到了教訓 **🤬 - 休士頓,我們在生產中遇到了問題:**客戶受到影響,職業選擇受到質疑。 ![你被開除了](https://media1.giphy.com/media/xT4uQ7N8UNsoeFAjVS/200.webp?cid=790b76115lk6lg7hzua5e4qexoocj2f0sltdsw5l4ggfcsln&ep=v1_gifs_search&rid=200.webp&ct=g) --- 在我忘記之前,讓我感謝[Glasskube](https://github.com/glasskube/glasskube)讓我花時間建立這樣的內容。如果這是您第一次聽說我們,我們正在努力`Package Manager for Kubernetes` 。 如果您願意支持我們完成這項任務,我們將不勝感激 [⭐️ GitHub 上的 Star Glasskube 🙏](https://github.com/glasskube/glasskube) [![感謝您的支持](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExOHZxc3Nxbjdyem9kY24xd3k5M3EwY2Q1dmQ3OTA0aTh4c3cycmpkdyZlcD12MV9naWZzX3NlYXJjaCZjdD1n/l3q2wJsC23ikJg9xe/200.webp)](https://github.com/glasskube/glasskube) --- 有點糟糕🤷 ----- 如果你不能笑自己,你還能笑誰? ### 叢集和節點群組 第一個故事來自您謙虛的記者,他最近使用 AWS 控制台啟動了一個測試 Kubernetes 集群,以快速驗證概念。我已經有一段時間沒有使用 EKSCTL 或某種形式的基礎設施即程式碼定義檔來建立叢集了。 因此,我登入並存取 EKS 控制台,命名我的 Kubernetes 集群,然後點擊「建立」。然後,我按照 CLI 說明配置 kubeconfig 檔案並透過終端連接到我新建立的叢集。 由於渴望測試最新版本的 Glasskube,我將其安裝在叢集中。然而,令我驚訝的是 Pod 的安排時間如此之長。現在回想起來,我很尷尬地承認我花了多長時間才意識到我沒有配置節點組,難怪 Pod 沒有被調度。 ![不為所動](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNm9mdzVweWc1cDljdjM3MWpmeTRqcm1sejltZXhzZmZlYzFtMmNtMSZlcD12MV9naWZzX3NlYXJjaCZjdD1n/c5FhF1waAJ5wk/giphy.webp) ### 打電話給消防隊,我忘了加入資源限制。 另一個真實的故事來自另一位Glasskube 成員,由於在本地Minikube 集群中安裝了許多元件(GitLab),他的本地筆記型電腦超載了,筆記型電腦幾乎在他的辦公桌上燒了一個洞,這是一個很好的提醒,要使用資源限制和請求 ![筆記型電腦起火](https://media0.giphy.com/media/dbtDDSvWErdf2/200.webp?cid=ecf05e4775sy7d66ores8c10w1hrw77311mm7m323lkkkqym&ep=v1_gifs_search&rid=200.webp&ct=g) 非正式機,但仍然很煩人😅 ----------- 轉向一些真實的事件,幸運的是這些事件僅限於不會影響付費客戶的叢集。 ### 事件#1:Venafi 的 Webhooks 無回應 [Venafi](https://venafi.com/)是機器身分的控制平面,最近被[Cyberark](https://www.cyberark.com/)收購,Cyberark 在 OPA 方面存在一些問題。完整的屍檢[在這裡](https://venafi.com/blog/gke-webhook-outage/)。 ![快點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mnqgz5998ynmk3rpipg.png) > **影響:**間歇性 API 伺服器逾時導致節點不健康。 > **涉及:**開放策略代理、節點準備 **逐場比賽** 在計劃的叢集升級期間,儘管有警告並且之前升級成功,但主升級失敗,導致 API 伺服器逾時和節點不穩定。**根本原因是 ConfigMap 更新期間逾時**,由無回應的[OPA](https://www.openpolicyagent.org/) Webhook 觸發。刪除 webhook 恢復了服務,此後他們將其限制在特定的命名空間,加入了 OPA 的活性探針,並更新了文件。 他們強調需要 API 回應時間警報、工作負載探測,並可能使用 Helm 圖表進行部署,以避免將來出現類似問題。他們繼續監控功能的改進並透過 Flightdeck 服務提供見解。 **學習內容:** - 需要對 API 伺服器回應時間發出警報。 - 增加所有工作負載所需的`livenessProbes` 。 - 使用套件管理進行更精細的配置。 > 💡 這事件凸顯了[Glasskube](https://github.com/glasskube/glasskube)旨在解決的用例之一。雖然 Glasskube 尚不支援 OPA 運算符,但我們相信透過強大的 Kubernetes 套件管理器可以避免這個問題。 Glasskube 可輕鬆配置關鍵功能,協助升級,並將 GitOps 方法應用於套件操作員管理,包括回溯和特定命名空間分配。[在這裡](https://github.com/glasskube/glasskube)嘗試一下。 ### 事件#2:當加密貨幣礦工潛入時 [JW Player](https://jwplayer.com/)成為比特幣挖礦惡意軟體的目標,請[在此處](https://medium.com/jw-player-engineering/how-a-cryptocurrency-miner-made-its-way-onto-our-internal-kubernetes-clusters-9b09c4704205)查看完整的事後分析。 ![JW-玩家](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do39mgvqt5e01ndnk9aw.png) > **影響:**非生產集群被比特幣礦工滲透 > **涉及:** Root存取利用 **逐場比賽** 在 Datadog 向 JW Player 的 DevOps 團隊發出其臨時和開發環境中的平均負載較高的警報後,JW Player 的 DevOps 團隊在其 Kubernetes 叢集上發現了一個加密貨幣挖礦程式。**初步調查發現,有一個gcc進程佔用了100%的CPU,經檢查發現該進程是監控工具Weave Scope發起的礦機**。該礦工利用了面向公眾的 Weave Scope 負載平衡器,允許在容器中執行命令。 立即採取的行動包括停止 Weave Scope、隔離受影響的節點並將其輪換出去。該事件導致 CPU 使用率較高,但沒有服務中斷或資料外洩。該團隊將 Kubernetes 覆蓋的手動安全群組編輯確定為關鍵問題,並強調需要採取適當的配置實踐來防止此類漏洞。 **學習內容:** - 監控負載並不是檢測叢集問題的最佳方法。 - 可能需要`falcon`或`sysdig`等工具 - 需要更強大的 Docker 映像和容器掃描。 - 架構的某些區域需要重新檢視。 - 需要更多的跨團隊資料共享和溝通。 ### 事件 #3:GKE 耗盡 IP 位址 ![愛情假期](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2e5fh4u5u8hxwse1az0s.png) > **影響:**高節點數叢集耗盡了 IP 位址,無法調度新的 Pod。 > **涉及:**子網路、每個節點的預設 IP 分配 **逐場比賽** 當一名團隊成員報告其應用程式的部署時間異常長時,就發生了一起事件。他們很快就發現,雖然一些新部署的 Pod 正在提供流量,但其餘的 Pod 仍處於`pending`狀態。**分析顯示`FailedScheduling`警告顯示資源不足。**儘管部署了叢集自動縮放器,但問題仍然存在,因為他們看到了令人震驚的**「0/256 個節點可用」**訊息。進一步檢查發現,GKE為每個節點預先分配了110個IP,導致IP消耗意外高。了解這一點後,他們調整了每個節點的 Pod 分配,將整體 IP 使用量減少了 30%。此外,他們還探索了子網擴展和增加節點大小等選項以緩解 IP 耗盡,最終優化節點池實例大小以更好地利用資源。 **學習內容:** - 了解 GKE 設定的預設值的重要性。 - [子網路擴充功能](https://cloud.google.com/vpc/docs/create-modify-vpc-networks#expand-subnet)是一個可供您使用的實用工具(儘管關於次要範圍的文件不多)。 - 增加節點池執行個體大小也可以完成這項工作(每個節點執行更多 Pod,然後需要更少的節點)。 休士頓,我們的生產遇到問題了🤬 --------------- 這些類型的中斷**會讓 SRE 徹夜難眠**,當客戶受到影響並且業務價值岌岌可危時,這些都是最重要的經驗教訓和英雄的誕生地。 ### 事件 #1 Skyscanner 只需要幾個字元就可以關閉他們的網站 在這裡我們看到,針對彈性進行了最佳化的架構仍然容易因為一行程式碼而故障。完整的屍檢[在這裡](https://medium.com/@SkyscannerEng/how-a-couple-of-characters-brought-down-our-site-356ccaf1fbc3)。 ![天巡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zma05ic4v2m88e05y797.png) > **影響:**全球 Skyscanner 網站和行動應用程式無法存取 > **涉及:** IaC清單 **逐場比賽** 2021 年 8 月,由於無意中更改了基礎設施配置系統中的根文件,Skyscanner 面臨持續四個多小時的全球中斷。**由於缺少`{{ }}` ,這項變更意外地觸發了全球範圍內關鍵微服務的刪除**,導致網站和行動應用程式無法存取。 ![致命線](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ohytkjb4v3p1c0ekvno.png) 他們迅速解決了這個問題,利用 GitOps 恢復配置並確定關鍵服務的優先順序。 **學習內容:** - 不要進行全域配置部署。 - 需要更徹底的「最壞情況」規劃。 - 驗證備份/復原過程。 - 保持操作手冊最新。 - 超越自動化的潛力。 ### 事件#2 Monzo Bank 的 linkerd 慘敗 英國數位[銀行](https://monzo.com/)艱難地發現了 Kubernetes 的一個嚴重錯誤。完整的屍檢[在這裡](https://community.monzo.com/t/resolved-current-account-payments-may-fail-major-outage-27-10-2017/26296/95)。 ![蒙佐銀行](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tjblle4py5mifmv1s1e.png) > **影響:**預付卡和新活期帳戶下降約1.5小時 > **涉及:** Linkerd、kube-apiserver、etcd **逐場比賽:** 此事件始於例行部署導致支付處理失敗。嘗試回滾變更未成功,導致內部中斷聲明。工程師發現並重新啟動了不健康的`linkerd`實例,但`kube-apiserver`的配置問題導致新的`linkerd`實例無法啟動,從而將中斷升級為整個平台故障。**根本原因可追溯到 Kubernetes 和 etcd 中的錯誤,該錯誤是由最近的叢集重新配置觸發的。**這導致`linkerd`無法接收網路更新,再加上 Kubernetes 和 linkerd 之間的相容性問題。該事件已透過更新 linkerd 並刪除空的 Kubernetes 服務得到解決。 **學習內容:** - 需要新版本的 Linkerd。 - k8s bug 需要修復(現已[修復](https://github.com/kubernetes/kubernetes/issues/47131))。 - 改進執行狀況檢查、儀表板和警報。 - 改進程序以改善停電期間的內部溝通。 ### 事件 #3 Redis 操作員丟了一個曲線球 Palark 是一家 DevOps 服務供應商,曾試圖保護其 Redis 集群,但最終卻後悔了。[這](https://blog.palark.com/failure-with-redis-operator-and-redis-data-analysis-tools/)是完整的移植剖析 ![帕拉克](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09fk9z0exq8006orscwm.png) > **影響:**加入副本後的生產 Redis 資料 > **涉及:** Redis算子 **逐場比賽** 他們遇到了一個涉及眾所周知的記憶體鍵值儲存 Redis 的事件,他們透過[Redis Operator](https://github.com/spotahome/redis-operator)安裝該儲存來執行 Redis 故障轉移。最初部署了一個 Redis 副本,後來擴展到兩個副本以增強資料庫可靠性。**然而,這個看似微小的變化在部署過程中被證明是災難性的,導致資料遺失。**該事件揭露了 Redis Operator 中的缺陷,主要是其`readiness probe` ,引發了意外的主升級和隨後的資料破壞。使用`Redis-memory-analyzer`等工具進行進一步分析,揭示了對資料庫大小和元素的洞察,從而幫助開發人員優化資料庫和應用程式程式碼,以防止未來發生事件。 **學習內容:** - 使用 Kubernetes Operator 時要非常小心(確保它們成熟且經過充分測試)。 - 他們發現了與 Redis Operators 就緒性探測相關的關鍵錯誤,該錯誤使副本橫向擴展容易導致資料遺失(已[修復](https://github.com/spotahome/redis-operator/releases/tag/v1.0.0-rc.3))。 - `Redis-memory-analyzer`是Redis資料庫故障排除的最佳工具。 事件 #4 Datadog 的多區域噩夢 -------------------- 多個[Datadog](https://www.datadoghq.com/)區域宕機`systemd-networkd`強制刪除了容器網路介面 (CNI) 插件管理的路由。完整的屍檢 [在這裡](https://www.datadoghq.com/blog/2023-03-08-multiregion-infrastructure-connectivity-issue/)。 ![資料狗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcobaticca62tpuk7nwq.png) > **影響:**多個地區的使用者無法存取 API 和平台。 > **涉及:** systemd更新、Cilium **逐場比賽** 從 2023 年 3 月 8 日開始,Datadog 經歷了一次影響多個區域的重大中斷,導致用戶無法存取平台、API 和監視器,並影響資料提取。這個問題是由眾多虛擬機器上的 systemd 自動安全性更新觸發的,導致網路中斷,導致數萬個節點離線。恢復涉及恢復運算能力、解決特定於服務的問題以及為客戶提供持續更新。**根本原因被確定為允許自動更新的錯誤配置,該更新已停用。** **學習內容:** - 更強大的混沌測試。 - 需要在停電期間改善與客戶的溝通 - 停電期間狀態頁面不充分。 - 自動更新本身就有風險,應謹慎使用。 ### 事件#5 Reddit 的圓周率日中斷 Reddit 遭受了快速有機成長的後果,他們面臨著殘酷的現實,即許多關鍵的 Kubernetes 叢集不標準化,很容易出現中斷,[這裡是](https://www.reddit.com/r/RedditEng/comments/11xx5o0/you_broke_reddit_the_piday_outage/)完整的 Pi-Day 中斷事後分析。 ![紅迪網](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s1vi0fdjwzps01hgnpj.png) > **影響:**嚴重的跨平台中斷持續 314 分鐘 > **涉及:** Calico、Kubernetes版本更新 **逐場比賽** 2023 年 3 月,Reddit 經歷了一次持續 314 分鐘的嚴重中斷,巧合的是,這發生在圓周率日。嘗試存取網站的用戶要么遇到不堪重負的 Snoo 吉祥物、錯誤訊息,要么看到空的主頁。這次中斷是由 Kubernetes 1.23 升級到 1.24 引發的,這引入了一個以前從未見過的微妙問題。工程團隊近年來一直強調可用性的改進,但發現自己處於一個充滿挑戰的境地,回滾雖然有風險,但卻成為了最佳選擇。 在復原過程中,由於 TLS 憑證和 AWS 容量限制不匹配,因此出現了一些複雜情況,但團隊設法克服了這些挑戰並重新建立了高可用性控制平面。 **進一步調查顯示,根本原因與 Calico 過時的路由反射器配置有關**,由於刪除了「master」節點標籤,此配置與 Kubernetes 1.24 不相容。 **學習內容:** - 出於測試目的改進預生產集群的重要性。 - 需要改進 Kubernetes 元件生命週期管理工具。 - 需要更同質的環境。 - 此外,還需要增加他們的 IaC 和內部技術文件。 結論 -- 正如您所看到的,熵定律很容易適用於 Kubernetes 叢集——破壞它們比讓它們滿意要容易得多。升級、部署、擴展和部署等變更通常會引發中斷,因此您可能傾向於盡量減少中斷。但對於那些努力引領細分市場並滿足不斷變化的客戶需求的組織來說,這不是一個選擇。我們所能期望的最好的結果就是從實踐中學習,並從失敗中學習。從好的方面來說,科技業普遍樂於學習,並能坦然面對失敗( [在大多數情況下](https://apnews.com/article/cellular-att-verizon-tmobile-outage-02d8dfd93019e79e5e2edbeed08ee450))。事實上,許多大型企業公開分享事後總結供更大的社區學習,這是一種最佳實踐,其基礎是這樣的假設:故障和中斷是「何時」而不是「是否」的問題。保護我們自己的最好方法就是在他們過去後向他們學習。 > 🫵 那你呢?您是否經歷過任何特別困難的停電並從另一邊講述了這個故事?如果是這樣,請在下面的評論中分享您的經驗。我相信我們很多人都想聽聽這個。 --- 幫助我們製作更多這樣的內容! -------------- 在[Glasskube,](https://github.com/glasskube/glasskube)我們在此類內容上投入了大量精力,並`next generation package manager for Kubernetes` 。 如果您從我們所做的工作中獲得價值,我們將不勝感激 [⭐️ GitHub 上的 Star Glasskube 🙏](https://github.com/glasskube/glasskube) [![github 上的明星](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExdnhibjU3MnRqeDVydm83ZXNiMHF1YXQ3NW9iMTEwcjFuZmhqcG8ydSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XaFhFM2lVRoVa/giphy.gif)](https://github.com/glasskube/glasskube) --- 原文出處:https://dev.to/glasskube/kubernetes-fail-compilation-but-they-keep-getting-worse-12n2

10 個工程博客,免費成為系統設計英雄

簡介: ------- 系統設計基本上是您想要建造的系統的藍圖。它是定義系統架構、元件和介面以滿足某些特定需求的過程。系統設計是軟體開發行業的熱門話題之一,在技術面試中被廣泛詢問,學習這項技能將保證你的加薪。 ![唐納川普說系統設計就是金錢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26gmdveo1ak1y0r752cn.gif) 在這篇文章中,我將分享十大系統設計工程博客,這些博客將幫助您免費成為系統設計大師 [字節字節 Go 博客](https://blog.bytebytego.com/) ------------------------------------------ Byte Byte Go 是一家教育科技新創公司,專注於提供系統設計主題的培訓和課程,幫助您像專業人士一樣在系統設計面試中取得好成績。 Byte Byte go 可以認為是學習和掌握系統設計技能最好的學校之一。 他們使用互動式動畫影片、心智圖、備忘錄等分解了複雜的系統設計主題,這將幫助您輕鬆掌握系統設計。無論您是系統設計新手還是想跟上當前行業標準,Byte Byte Go 都是您的必去之選 ![位元組GO博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffpgu7maxrhb2jbejve5.png) [谷歌研究](https://research.google/blog/?page=1&) --------------------------------------------- 谷歌是世界上最受歡迎、最高效的搜尋引擎之一。他們每天在其平台上處理數十億用戶和請求。 Angular、Flutter、Android、Google Cloud、Firebase 等 Google 產品是幾乎每個開發人員都使用的一些關鍵技術。谷歌研究平台擁有廣泛的軟體開發主題,包括機器學習、軟體系統、硬體和架構、分散式和平行系統,這個平台是軟體開發人員學習和研究各種主題的隱藏寶石 ![谷歌研究](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jwp16grrttt33g44eg1.png) [Dropbox 技術博客](https://dropbox.tech/) ------------------------------------- Dropbox 是一家美國科技公司,為各種用例提供儲存解決方案和其他軟體產品。他們每天也處理數百萬個請求,然後管理和擴展大型軟體基礎設施。在這裡您可以探索各種主題,例如基礎設施、前端開發、安全性、行動應用程式開發等。 ![投遞箱技術博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdp43crv099kww6yl8ls.png) [Netflix 科技部落格](https://netflixtechblog.com/) --------------------------------------------- Netflix 是全球最受歡迎、最成功的 Ott 巨頭之一,每天處理數百萬用戶和請求。您可以關注 Netflix 工程博客,了解從視訊串流、微服務到機器學習和人工智慧等各種主題。如果您在 Ott 行業工作或計劃在視訊串流技術之上建立一些東西,您必須關注 Netflix 技術部落格以供參考。 ![Netflix 科技部落格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2trw7unayy4uett3cri0.png) [優步工程博客](https://eng.uber.com/) ------------------------------- 優步是世界上最受歡迎、也有望成為最大的線上計程車服務提供者之一。優步也涉足線上食品配送領域。我將 Uber 工程部落格放入此列表的原因是因為您會在他們的部落格中找到一些最重要的主題,例如使用地圖和位置來提供服務。使用地理位置資料是軟體工程中最重要的主題之一,電子商務和物流等最常見的工業部門非常依賴這些訊息,以便他們能夠盡快交付產品或服務。如果您是軟體產業中從事地理位置或導航技術工作或計劃使用這些技術建立某些東西的人,那麼 Uber 工程部落格是您必須查看的內容 ![優步工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1kwwqi4orz3cunyeo9p.png) [元工程博客](https://engineering.fb.com/) ------------------------------------ Meta(原 Facebook)是世界上最大的社群媒體巨頭,也是最受歡迎的用於建立使用者介面的 JavaScript 函式庫(即 React.js)的創辦人和維護者。除此之外,幾乎所有流行的社交媒體應用程式(包括 facebook、instagram、whatsapp、threads 等)都歸他們所有。元工程博客包含廣泛的軟體工程主題,如網絡和移動開發、基礎設施系統、影片技術、AR 和 VR 技術等。 VR 科技 ![元工程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8mba756nkk0q9fnsy4t.png) [Stripe 工程博客](https://stripe.com/blog/engineering) -------------------------------------------------- Stripe 是最受歡迎的提供支付相關解決方案的公司之一。大多數線上企業和電子商務網站都使用 stripe 來處理付款、訂閱和發票,即使我也使用 stripe 來存取客戶的付款。 Stripe Engineering 部落格涵蓋了廣泛的主題,您可以探索這些主題,例如使用機器學習進行詐欺偵測、用於響應式和互動式支付介面的 UI 和 UX 相關主題、應用程式安全性等等。因此,如果您正在從事支付工作或計劃建立與處理支付相關的東西,您一定要查看 Stripe 工程部落格作為參考。 ![Stripe 工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g8eoq6f2puv2nkekfxy.png) [亞馬遜工程博客](https://aws.amazon.com/blogs) --------------------------------------- 亞馬遜工程博客 亞馬遜是世界上最大的電子商務巨頭,不僅如此,它還擁有亞馬遜網路服務(最大的雲端服務供應商)、亞馬遜Prime(最受歡迎的OTT巨頭之一)、有聲故事平台亞馬遜音樂等等。多的。 Amazon Engineering 部落格涵蓋了廣泛的主題,包括容器和 Kubernetes、雲端模式和架構、機器學習和 Amazon 人工智慧技術,以解決複雜的業務挑戰。因此,如果您打算使用 AWS 建立下一個應用程式或整合 Alexa 等亞馬遜技術,那麼亞馬遜工程部落格是您必須查看的地方。 ![亞馬遜工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a07bwfp2rsebvi180cnl.png) [微軟開發部落格](https://devblogs.microsoft.com/) ------------------------------------------ 微軟是美國最受歡迎的科技巨頭之一,擁有最常用的作業系統 Windows、用於建立極快企業應用程式的點網框架、Bing 搜尋引擎、copilot(最高效的人工智慧工具之一)、最大的程式碼共享、託管和版本控制平台GitHub、Azure雲端平台(最大的雲端服務提供者之一)。 Microsoft 工程部落格包含廣泛的主題和教程,還包括 Windows、azure、機器學習和人工智慧、dot net 框架。如果您打算使用 Microsoft 技術建立下一個應用程式或軟體,那麼您必須關注它 ![微軟開發部落格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y10tc92q65czuks6cidk.png) [蘋果開發者新聞](https://developer.apple.com/news/) -------------------------------------------- 蘋果是世界上最大的科技巨頭之一,也擁有最受歡迎的Mac作業系統和IOS(iPhone作業系統)。 MacBook 和 iPhone 擁有非常龐大的用戶群,因此大多數新創公司和企業也為 Mac 和 IOS 用戶打造產品。 Apple 開發者新聞主要包含與IOS、Swift(建立本機IOS 和Mac OS 應用程式的唯一語言)、Swift UI(Apple UI)相關的主題,以及一些與C++、Kubernetes 等主題相關的主題。正在計劃的人要為 iOS 或 Mac OS 用戶建立軟體,開發者新聞是您必須參考的。 ![蘋果開發者新聞](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ewo1tt4046wgom5d8hy.png) 結論 -- 在本文中,我討論了 10 個您必須查看的工程博客,以提高您的系統設計技能。如果您關注每個博客,那很好,但我建議您必須僅根據您將使用的堆疊或您正在處理的行業類型來查看那些博客 --- 原文出處:https://dev.to/kumarkalyan/10-engineering-blogs-to-become-a-system-design-hero-for-free-20ee