精選技術文章翻譯,幫助開發者持續吸收新知。
登入次數:1 次
註冊於2022年11月29日
  發表了 596 篇貼文
  新增了 0 則留言
  貼文共 241,549 次瀏覽

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

JavaScript 去抖動綜合指南:提高程式碼效率

透過實際範例和技巧了解如何在 JavaScript 中實現去抖動。掌握去抖功能並提升您的網路效能。 在這份綜合指南中,我們將探索 JavaScript 中的去抖動,了解其重要性,並學習如何有效地實現它。無論您是初學者還是經驗豐富的開發人員,掌握去抖動都可以顯著提高您的網路效能。 去抖動是一種程式設計實踐,用於確保耗時的任務不會頻繁觸發,從而提高效能和使用者體驗。它在視窗大小調整、按鈕單擊或表單輸入事件等需要控制多個快速事件的場景中特別有用。 請訂閱我的 [YouTube 頻道](https://www.youtube.com/@DevDivewithDipak?sub\_confirmation=1)來支援我的頻道並獲取更多 Web 開發教學。 ### 什麼是去抖動? 去抖是一種限制函數執行速率的技術。當多個事件快速連續觸發時,去抖動功能將確保只有係列中的最後一個事件在指定的延遲後觸發函數執行。 ### 為什麼要使用去抖動? - **效能最佳化**:透過減少呼叫函數的次數來防止效能問題。 - **增強的使用者體驗**:避免重複操作的混亂,提供更流暢的體驗。 - **網路效率**:與即時搜尋輸入欄位等事件處理程序一起使用時,減少不必要的網路請求。 ### 去抖動如何運作 想像一下,使用者在搜尋框中輸入內容,每次按鍵都會觸發 API 呼叫。如果沒有去抖,每次擊鍵都會導致新的 API 呼叫,從而使網路充滿請求。透過去抖動,只有使用者停止輸入指定持續時間後的最終輸入才會觸發 API 呼叫。 ### 在 JavaScript 中實作去抖動 這是去抖函數的簡單實作: ``` function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } ``` ### 使用範例 讓我們看看如何在現實場景中使用`debounce`函數: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Debouncing Example</title> </head> <body> <input type="text" id="searchBox" placeholder="Type to search..."> <script> const searchBox = document.getElementById('searchBox'); function fetchSuggestions(query) { console.log('Fetching suggestions for:', query); // Simulate an API call } const debouncedFetchSuggestions = debounce(fetchSuggestions, 300); searchBox.addEventListener('input', (event) => { debouncedFetchSuggestions(event.target.value); }); function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } </script> </body> </html> ``` 在這個例子中: - 輸入欄位捕獲使用者的輸入。 - `fetchSuggestions`函數的去抖延遲為 300 毫秒。 - 當使用者鍵入時,將呼叫`debouncedFetchSuggestions`函數,確保僅在使用者停止鍵入 300 毫秒後才執行`fetchSuggestions` 。 ### 結論 去抖動是一種簡單但強大的技術,可優化 Web 應用程式的效能。透過控制函數執行的速率,它有助於減少不必要的計算並改善整體用戶體驗。無論您是處理搜尋輸入、調整視窗大小還是處理其他快速事件,去抖動都是 JavaScript 武器庫中的一個有價值的工具。 *追蹤我,以獲得更多有關 Web 開發的教學課程和技巧。歡迎在下面留下評論或問題!* ### 關注並訂閱: - **網址**:\[Dipak Ahirav\] (https://www.dipakahirav.com) - **電子郵件**:[email protected] - **Instagram** : [devdivewithdipak](https://www.instagram.com/devdivewithdipak) - **YouTube** :\[devDive 與 Dipak\](https://www.youtube.com/@DevDivewithDipak?sub\_confirmation=1) - **領英**:[迪帕克·阿希拉夫](https://www.linkedin.com/in/dipak-ahirav-606bba128) --- 原文出處:https://dev.to/dipakahirav/understanding-debouncing-in-javascript-5g30

僅使用 HTML 和 CSS 建立側邊欄選單

如果您是 Web 開發新手,您可能在不同網站上看過[側邊欄](https://www.codingnepalweb.com/category/sidebar-menu/)。您是否想知道它們是如何僅使用 HTML 和 CSS 建立的?僅使用 HTML 和 CSS 製作側邊欄是學習網頁設計基礎知識和獲得實務經驗的好方法。 在這篇文章中,我將指導您僅使用[HTML](https://www.codingnepalweb.com/?s=html)和[CSS](https://www.codingnepalweb.com/category/html-and-css/)建立響應式側邊欄。最初,側邊欄將被隱藏,僅顯示每個連結的圖示。但是,將滑鼠懸停在側邊欄上將平滑展開以顯示與每個圖示關聯的連結。 為了建立這個側邊欄,我們將使用基本的 HTML 語意元素,例如`<aside>` 、 `<ul>` 、 `<li>`和`<a>`以及常見的 CSS 屬性來設定其樣式。這是一個簡單的專案,因此您應該毫無困難地遵循這些步驟或理解程式碼。 HTML 和 CSS 中的響應式側邊欄選單影片教學 ------------------------- https://www.youtube.com/watch?v=VU74s-XAn7M 如果您喜歡從影片教學中學習,上面的 YouTube 影片是一個很好的資源。在本影片中,我解釋了每一行程式碼並提供了資訊豐富的註釋,以使建立 HTML 側邊欄的過程易於遵循,尤其是對於初學者而言。 但是,如果您喜歡閱讀部落格文章或需要此專案的逐步指南,您可以繼續閱讀這篇文章。 在 HTML 和 CSS 中建立響應式側邊欄的步驟 ------------------------- 若要僅使用 HTML 和 CSS 建立響應式側邊欄,請按照以下簡單的逐步說明進行操作: - 首先,建立一個具有任何您喜歡的名稱的資料夾。然後,在其中建立必要的文件。 - 建立一個名為`index.html`的檔案作為主檔案。 - 為 CSS 程式碼建立一個名為`style.css`檔案。 - 最後,下載[Images](https://www.codingnepalweb.com/custom-projects/simple-sidebar-menu-html-css-only-images.zip)資料夾並將其放置在您的專案目錄中。該資料夾包含該側邊欄專案所需的所有圖像。 首先,將以下 HTML 程式碼新增至您的`index.html`檔案: 此程式碼包含具有不同語意標籤(如`<aside>` 、 `<ul>` 、 `<li>`和`<a>`的基本HTML 標記,用於建立我們的側邊欄佈局。 ``` <!DOCTYPE html> <!-- Coding By CodingNepal - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sidebar Menu HTML and CSS | CodingNepal</title> <!-- Linking Google Font Link For Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> <link rel="stylesheet" href="style.css" /> </head> <body> <aside class="sidebar"> <div class="sidebar-header"> <img src="images/logo.png" alt="logo" /> <h2>CodingLab</h2> </div> <ul class="sidebar-links"> <h4> <span>Main Menu</span> <div class="menu-separator"></div> </h4> <li> <a href="#"> <span class="material-symbols-outlined"> dashboard </span >Dashboard</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> overview </span >Overview</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> monitoring </span >Analytic</a > </li> <h4> <span>General</span> <div class="menu-separator"></div> </h4> <li> <a href="#" ><span class="material-symbols-outlined"> folder </span>Projects</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> groups </span>Groups</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> move_up </span>Transfer</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> flag </span>All Reports</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> notifications_active </span >Notifications</a > </li> <h4> <span>Account</span> <div class="menu-separator"></div> </h4> <li> <a href="#" ><span class="material-symbols-outlined"> account_circle </span >Profile</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> settings </span >Settings</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> logout </span>Logout</a > </li> </ul> <div class="user-account"> <div class="user-profile"> <img src="images/profile-img.jpg" alt="Profile Image" /> <div class="user-detail"> <h3>Eva Murphy</h3> <span>Web Developer</span> </div> </div> </div> </aside> </body> </html> ``` 接下來,將以下 CSS 程式碼新增至您的`style.css`檔案中,以使您的側邊欄實用且具有視覺吸引力。請隨意嘗試不同的 CSS 屬性,例如顏色、字體、背景等,以使您的側邊欄更具吸引力。 ``` /* Importing Google font - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { min-height: 100vh; background: #F0F4FF; } .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 85px; display: flex; overflow-x: hidden; flex-direction: column; background: #161a2d; padding: 25px 20px; transition: all 0.4s ease; } .sidebar:hover { width: 260px; } .sidebar .sidebar-header { display: flex; align-items: center; } .sidebar .sidebar-header img { width: 42px; border-radius: 50%; } .sidebar .sidebar-header h2 { color: #fff; font-size: 1.25rem; font-weight: 600; white-space: nowrap; margin-left: 23px; } .sidebar-links h4 { color: #fff; font-weight: 500; white-space: nowrap; margin: 10px 0; position: relative; } .sidebar-links h4 span { opacity: 0; } .sidebar:hover .sidebar-links h4 span { opacity: 1; } .sidebar-links .menu-separator { position: absolute; left: 0; top: 50%; width: 100%; height: 1px; transform: scaleX(1); transform: translateY(-50%); background: #4f52ba; transform-origin: right; transition-delay: 0.2s; } .sidebar:hover .sidebar-links .menu-separator { transition-delay: 0s; transform: scaleX(0); } .sidebar-links { list-style: none; margin-top: 20px; height: 80%; overflow-y: auto; scrollbar-width: none; } .sidebar-links::-webkit-scrollbar { display: none; } .sidebar-links li a { display: flex; align-items: center; gap: 0 20px; color: #fff; font-weight: 500; white-space: nowrap; padding: 15px 10px; text-decoration: none; transition: 0.2s ease; } .sidebar-links li a:hover { color: #161a2d; background: #fff; border-radius: 4px; } .user-account { margin-top: auto; padding: 12px 10px; margin-left: -10px; } .user-profile { display: flex; align-items: center; color: #161a2d; } .user-profile img { width: 42px; border-radius: 50%; border: 2px solid #fff; } .user-profile h3 { font-size: 1rem; font-weight: 600; } .user-profile span { font-size: 0.775rem; font-weight: 600; } .user-detail { margin-left: 23px; white-space: nowrap; } .sidebar:hover .user-account { background: #fff; border-radius: 4px; } ``` 結論和最後的話 ------- 對於 Web 開發初學者來說,使用 HTML 和 CSS 建立響應式側邊欄是一項可以完成的任務。透過遵循本文中提供的步驟和程式碼,您應該能夠成功建立自己的響應式和功能性側邊欄。 為了進一步提高您的網頁開發技能,我建議您嘗試重新建立本網站上提供的其他[漂亮的側邊欄](https://www.codingnepalweb.com/category/sidebar-menu/)。其中一些側邊欄使用 JavaScript 來增強其功能,例如加入[深色模式](https://www.codingnepalweb.com/sidebar-menu-in-html-css-javascript-dark-light-mode/)、[下拉式選單](https://www.codingnepalweb.com/dropdown-sidebar-menu-html-css/)等。 如果您在建立側邊欄時遇到任何問題,可以透過點擊「下載」按鈕免費下載專案的原始碼檔案。您也可以透過點擊“查看即時”按鈕來查看它的即時演示。 [查看現場演示](https://www.codingnepalweb.com/demos/create-sidebar-menu-html-css-only/) [下載程式碼文件](https://www.codingnepalweb.com/create-sidebar-menu-html-css-only/) --- 原文出處:https://dev.to/codingnepal/create-a-sidebar-menu-using-html-and-css-only-2e79

建構強大的 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

✨ 6 個您應該造訪的學習寶石網站!

介紹 -- 那麼您是軟體開發人員?太棒了。您可以建立應用程式並製作💸💸💸,但是您是否考慮過長期場景或您是否真正意識到這一點? 在五年的軟體開發生涯中,建立應用程式並不是為了完成工作或為啟動活動提供軟體。這不是🙅‍♂️。 如果您是優秀的開發人員,您應該了解軟體的後期開發階段... 🤨:來吧,我的「學習寶石」在哪裡?標題不是關於工程職位的! 好吧,我知道這跟工程職位無關。美好的! 但... ![阿塞爾瓦斯格爾](https://i.pinimg.com/564x/5c/89/b7/5c89b75128a05063ddfccbf36be74e75.jpg) 讓我們透過這些精彩的學習材料來增強我們的知識!從如何建立應用程式、編寫可維護的程式碼,甚至了解 CPU 的實際運作原理! 順便說一句,讓我們向所有製作這些優秀學習材料的作者致敬🙇‍♂️! [模式.dev](https://www.patterns.dev/) ----------------------------------- ![圖案縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2sca89gm5igy58byojn.png) Patterns.dev 由 Addy Osmani 和 Lydia Hallie 建立,旨在幫助您將網站架構提升到新的水平。 Patterns.dev 將幫助您設計、渲染和效能模式,以便使用普通 JavaScript 或現代框架建立強大的 Web 應用程式。 [將“你”放入CPU](https://cpu.land/) ------------------------------ ![CPU 區域縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqdzvm4uaub99aop9g70.png) 接下來,我們有CPU Land! 你有沒有想過CPU在幕後到底是如何運作的? 🤨:如果它已經在幕後工作了,為什麼我還要考慮它? 阿喲,兄弟。來吧,你是認真的嗎?你不會被人工智慧取代吧? 這就是為什麼你應該知道 CPU 如何執行你的程式! 幸運的是,這個網站為您提供了幫助。在這裡,您可以了解多處理的工作原理、系統呼叫的真正含義、電腦如何透過硬體中斷管理記憶體以及 Linux 如何載入可執行檔。 感謝 Lexi Mattick 建立了這個網站! [重構大師](https://refactoring.guru/) --------------------------------- ![重構大師縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2fubawobhmqkyogab86.png) 🤨:啊,我不想碰這個程式碼庫。很脆弱! 嘿,你兩年前寫了這段程式碼... 🤨:啊,對不起。我的意思是是的...為什麼你不給我一些解決方案,阿克巴? 我?沒有人,但是 Refactoring Guru 可以幫助你! Alexander Shvets 已經建立了很酷的網站來重構您的 💩 程式碼庫。這個網站將改變您對如何建立可長期維護的東西的看法。 [元件庫](https://component.gallery/) --------------------------------- ![元件庫縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqsl23fpudyj78pn8k2f.png) 對 UI 元件的命名及其外觀感到困惑嗎?不用擔心,我經常遇到這個問題。但幸運的是,Iain Bean 建立了 Component Gallery 網站! 在這裡,我們沒有看到預先建置的 UI 元件,而是為您提供了元件應該是什麼樣子以及它的具體用途。 [學習 Git 支撐](https://learngitbranching.js.org/) ---------------------------------------------- ![學習 Git 支撐縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbqvf9qc0jszns878xwk.png) 我有一個表情包給你,你去看看吧… ![凱伊瑟爾](https://miro.medium.com/v2/resize:fit:600/0*VcMPr1unIjAIHw2j.jpg) 但是,除非你知道如何正確使用 Git,否則它只是模因。如果你不這樣做,不用擔心。只需學習 Git 分支即可! Peter Cottle 建立此網站是為了幫助您以互動方式學習 Git。你知道,因為如果你能將某件事形象化,就更容易理解它。 [十二要素應用程式](https://www.12factor.net/) ------------------------------------- ![十二要素應用程式縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojf6okkbrng5meghecwe.png) 最後一個是十二要素應用程式! 您將學習如何在微服務叢集中建置 SaaS 或簡單的服務。在這裡,您不是了解使用了什麼技術,而是了解使您的應用程式可移植且易於在任何地方部署的意識形態或概念! 讓我們感謝亞當·威金斯的奉獻精神。 結論 -- 好吧,現在你已經知道了。不要放棄並保持學習精神。歸根結底,這只是某人的寫作,但它的價值在於當你應用它並且它起作用時。 如果您有任何建議,請隨時在下面的評論部分寫下來! 再見! ![烹飪霍馬特](https://i.pinimg.com/564x/2e/84/89/2e84892562d68742930e7641520beb38.jpg) --- 原文出處:https://dev.to/thexdev/5-website-learning-gems-you-should-visit-2pn5

使用 NextJS 建立電子商務商店

在本教程中,您將學習如何建立電子商務商店,客戶可以在其中透過 Stripe 購買產品並付款。成功付款後,將向客戶發送電子郵件通知,並向管理員用戶發送應用程式內通知。管理員用戶也可以在應用程式中建立和刪除產品。 為了建立這個應用程式,我們將使用以下工具: - [Appwrite](https://appwrite.io/) - 用於驗證使用者身份,以及保存和檢索產品詳細資訊。 - [Next.js](https://nextjs.org/) - 用於建立應用程式的使用者介面和後端。 - [Novu](https://docs.novu.co/getting-started/introduction) - 用於發送電子郵件和應用程式內通知。 - [React Email](https://react.email/docs/introduction) - 用於建立電子郵件範本。 - [Stripe](https://docs.stripe.com/) - 用於將付款結帳整合到應用程式中。 ![應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t02iyysrqjfqw8imuqxn.png) --- 使用 Next.js 建立應用程式介面 ------------------- 應用程式頁面根據指派給使用者的角色分為兩部分。客戶可以在付款前存取主頁並登入應用程式。管理員使用者可以存取所有頁面,包括登入頁面和儀表板頁面,他們可以在其中新增和刪除產品。 現在,讓我們建立應用程式。 ![https://media1.giphy.com/media/iopxsZtW2QVRs4poEC/giphy.gif?cid=7941fdc6aot3qt7vvq4voh5c1iagyusdpuga713m8ljqcqmd&ep=v1_gifs_searchiagyusdpuga713m8ljqcqmd&ep=v1_gifs_searchiagyusdpugagif&ct](https://media1.giphy.com/media/iopxsZtW2QVRs4poEC/giphy.gif?cid=7941fdc6aot3qt7vvq4voh5c1iagyusdpuga713m8ljqcqmd&ep=v1_gifs_search&rid=giphy.gif&ct=g) 透過執行以下程式碼片段來建立一個新的 Next.js Typescript 專案: ``` npx create-next-app novu-store ``` 接下來,安裝[React Icons](https://react-icons.github.io/react-icons)和[Headless UI](https://headlessui.com/)包。 React Icons 允許我們在應用程式中使用各種圖標,而 Headless UI 則提供易於使用的現代 UI 元件。 ``` npm install react-icons @headlessui/react ``` 將此程式碼片段從[GitHub 儲存庫](https://github.com/dha-stix/ecom-store-with-nextjs-appwrite-novu-and-stripe/blob/main/src/app/page.tsx)複製到`app/page.tsx`檔案中。它在螢幕上呈現產品列表,並允許用戶選擇購物車中的商品,類似於下圖。 ![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj69givzhqfapgsg12rk.gif) 建立登入路由,使用戶能夠使用其 GitHub 帳戶進行簽署。將下面的程式碼片段複製到`app/login/page.tsx`檔案中。 ``` //👉🏻 create a login folder containing a page.tsx file export default function Home() { const handleGoogleSignIn = async () => {}; return ( <main className='w-full min-h-screen flex flex-col items-center justify-center'> <h2 className='font-semibold text-3xl mb-2'>Customer Sign in</h2> <p className='mb-4 text-sm text-red-500'> You need to sign in before you can make a purchase </p> <button className='p-4 border-[2px] border-gray-500 rounded-md hover:bg-black hover:text-white w-2/3' onClick={() => handleGoogleSignIn()} > Sign in with GitHub </button> </main> ); } ``` ![客戶登入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nh2rowpfg4hgksj5diy.png) 當使用者點擊「登入」按鈕時,會將他們重新導向到 GitHub 驗證頁面並提示他們登入應用程式。您很快就會了解如何使用[Appwrite](https://appwrite.io/)執行此操作。 接下來,讓我們建立管理頁面。在`app`資料夾中新增包含`login`和`dashboard`路由的`admin`資料夾。 ``` cd app mkdir admin && cd admin mkdir dashboard login ``` 在`dashboard`和`login`資料夾中新增`page.tsx`文件,並將下面的程式碼片段複製到`login/page.tsx`檔案中。 ``` "use client"; import Link from "next/link"; import { useState } from "react"; export default function Login() { const [email, setEmail] = useState<string>(""); const [password, setPassword] = useState<string>(""); const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); console.log({ email, password }); }; return ( <main className='w-full min-h-screen flex flex-col items-center justify-center'> <h2 className='font-semibold text-3xl mb-4'> Admin Sign in</h2> <form className='w-2/3' onSubmit={handleLogin}> <label htmlFor='email' className='block'> Email </label> <input type='email' id='email' className='w-full px-4 py-3 border border-gray-400 rounded-sm mb-4' required value={email} placeholder='[email protected]' onChange={(e) => setEmail(e.target.value)} /> <label htmlFor='password' className='block'> Password </label> <input type='password' id='password' className='w-full px-4 py-3 border border-gray-400 rounded-sm mb-4' required value={password} placeholder='admin123' onChange={(e) => setPassword(e.target.value)} /> <button className='p-4 text-lg mb-3 bg-blue-600 text-white w-full rounded-md'> Sign in </button> <p className='text-sm text-center'> Not an Admin?{" "} <Link href='/login' className='text-blue-500'> Sign in as a Customer </Link> </p> </form> </main> ); } ``` 上面的程式碼片段呈現一個表單,該表單接受管理員的電子郵件和密碼,驗證憑證,然後將使用者登入應用程式中。 ![管理員登入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjd9wsi63t96d5cls9om.png) 管理儀表板頁面呈現可用的產品,並允許管理員使用者在應用程式中新增和刪除產品。將此[程式碼片段複製](https://github.com/dha-stix/ecom-store-with-nextjs-appwrite-novu-and-stripe/blob/main/src/app/admin/dashboard/page.tsx)到`dashboard/page.tsx`檔案中以建立使用者介面。 ![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1gd1uq1eq6n76fesjxu.gif) 恭喜!您已經建立了應用程式介面。在接下來的部分中,您將了解如何將應用程式連接到 Appwrite 後端並在客戶端和伺服器之間發送資料。 --- 如何將 Appwrite 新增到 Next.js 應用程式 ----------------------------- Appwrite 是一項開源後端服務,可讓您建立安全且可擴展的軟體應用程式。它提供多種身份驗證方法、安全性資料庫、文件儲存、雲端訊息傳遞等功能,這些對於建立全端應用程式至關重要。 在本部分中,您將了解如何設定 Appwrite 專案,包括身份驗證、資料庫和檔案儲存等功能。 首先,請造訪[Appwrite Cloud](https://cloud.appwrite.io/register) ,並為您的專案建立一個帳戶和組織。 接下來,建立一個新專案並選擇您的首選區域來託管該專案。 ![應用程式寫入1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as6302olk60oklfo70x5.png) 選擇`Web`作為應用程式的平台 SDK。 ![應用程式編寫2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb5ae82i9fyoyrowsy96.png) 請依照螢幕上顯示的步驟進行操作。由於您目前正在開發模式下建置,因此您可以使用通配符 ( `*` ) 作為主機名,並在部署應用程式後將其變更為您的網域名稱。 ![應用程式寫入3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ccs0hzgs9ujf5lzh83.png) 在 Next.js 專案中安裝 Appwrite 用戶端 SDK。 ``` npm install appwrite ``` 最後,在 Next.js 應用程式資料夾中建立一個`appwrite.ts`文件,並將下面的程式碼片段複製到該文件中以初始化 Appwrite。 ``` import { Client, Account, Databases, Storage } from "appwrite"; const client = new Client(); client .setEndpoint("https://cloud.appwrite.io/v1") .setProject(<YOUR_PROJECT_ID>); export const account = new Account(client); export const db = new Databases(client); export const storage = new Storage(client); ``` ### 使用 Appwrite 設定 GitHub 身份驗證 在這裡,您將了解如何使用 Appwrite 設定 GitHub 和電子郵件/密碼驗證。預設已配置電子郵件/密碼身份驗證,因此我們專注於設定 GitHub 身份驗證。 在繼續之前,您需要使用您的 GitHub 帳戶建立[GitHub OAuth 應用程式](https://github.com/settings/developers)。 Appwrite 將需要客戶端 ID 和金鑰來設定 GitHub 身份驗證。 ![GitHub 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9znk1yr7tffus7soitq2.png) 透過從側邊欄選單中選擇`Auth`並導覽至`Settings`選項卡,啟用 Appwrite 的 GitHub 驗證方法。 ![應用程式編寫4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43uo6nho1bz9su14zsno.png) 將您的 GitHub 用戶端 ID 和金鑰複製到 Appwrite 的 GitHub OAuth 設定中。 最後,確保將 Appwrite 產生的 URI 複製到 GitHub 應用程式設定中。 ![GitHub 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g75q5r5hc6l5pi09k88m.png) ### 設定 Appwrite 資料庫 從側邊欄選單中選擇資料庫並建立新資料庫。您可以將其命名為`novu store` 。 ![應用程式寫入5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7kn1llmu7olqirfcrpa.png) 接下來,建立`products`集合。它將包含應用程式中的產品清單。 ![應用程式寫入 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p8laty6z37x0q1g6az4.png) 將名稱、價格和圖像屬性新增至集合。 ![應用程式寫入 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzom3ptlz8t1rh9dtt1k.png) 在「設定」標籤下,更新權限以允許每個使用者執行 CRUD 操作。但是,您可以在部署應用程式後變更此設置,以確保只有經過身份驗證的使用者才能執行各種操作。 ![應用程式寫入 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37cqr8s0crtcttocjagk.png) 最後,將專案、資料庫和集合 ID 複製到**`.env.local`**檔案中。這可以確保您的憑證安全,並允許您引用其環境變數中的每個值。 ``` NEXT_PUBLIC_PROJECT_ID=<YOUR_PROJECT_ID> NEXT_PUBLIC_DB_ID=<YOUR_DATABASE_ID> NEXT_PUBLIC_PRODUCTS_COLLECTION_ID=<YOUR_DB_COLLECTION_ID> ``` ### 設定應用程式寫入存儲 從側邊欄選單中選擇`Storage` ,然後建立新儲存桶來儲存所有產品影像。 ![應用程式編寫 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b84t9mk3k0wrkgiy4uca.png) 在`Settings`標籤下,更新「權限」以暫時允許任何使用者。 ![應用程式寫入 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi3iozkaera7fohkwanm.png) 設定可接受的文件格式。由於我們上傳的是圖像,因此您可以選擇**`.jpg`**和**`.png`**檔案格式。 ![應用寫入 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzxqpoq5dcpokkvdcsce.png) 最後,將您的儲存桶 ID 複製到`.env.local`檔案中。 ``` NEXT_PUBLIC_BUCKET_ID=<YOUR_BUCKET_ID> ``` 恭喜!您已成功配置 Appwrite。我們現在可以開始與其各種功能進行互動。 --- 如何使用Appwrite執行CRUD操作 -------------------- 在本部分中,您將了解如何從 Appwrite 建立、檢索和刪除產品。用戶需要能夠在購買前查看現有產品,而管理員用戶應有權在應用程式中新增和刪除產品。 首先,在 Next.js **`app`**資料夾中建立一個**`utils.ts`**檔案。該文件將包含所有 Appwrite 資料庫交互,然後您可以將其導入到必要的頁面中。 ``` cd app touch utils.ts ``` ### 將產品儲存到 Appwrite 回想一下, `products`集合有三個屬性:名稱、圖像和價格。因此,在將產品新增至資料庫時,您需要先上傳產品的圖像,從回應中檢索其 URL 和 ID,然後將 URL 作為產品的圖像屬性上傳,使用圖像的儲存 ID 作為產品資料。 這是解釋這一點的程式碼片段: ``` import { db, storage } from "@/app/appwrite"; import { ID } from "appwrite"; export const createProduct = async ( productTitle: string, productPrice: number, productImage: any ) => { try { //👇🏻 upload the image const response = await storage.createFile( process.env.NEXT_PUBLIC_BUCKET_ID!, ID.unique(), productImage ); //👇🏻 get the image's URL const file_url = `https://cloud.appwrite.io/v1/storage/buckets/${process.env.NEXT_PUBLIC_BUCKET_ID}/files/${response.$id}/view?project=${process.env.NEXT_PUBLIC_PROJECT_ID}&mode=admin`; //👇🏻 add the product to the database await db.createDocument( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID!, response.$id, //👉🏻 use the image's ID { name: productTitle, price: productPrice, image: file_url, } ); alert("Product created successfully"); } catch (err) { console.error(err); } }; ``` 上面的程式碼片段將圖像上傳到 Appwrite 的雲端存儲,並使用儲存桶 ID、圖像 ID 和專案 ID 檢索準確的圖像 URL。圖片成功上傳後,其 ID 將用於產品資料中,以便輕鬆檢索和參考。 ### 從 Appwrite 檢索產品 若要從 Appwrite 取得產品,您可以在頁面載入時在 React **`useEffect`**掛鉤中執行下列函數。 ``` export const fetchProducts = async () => { try { const products = await db.listDocuments( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID! ); if (products.documents) { return products.documents; } } catch (err) { console.error(err); } }; ``` `fetchProducts`函數傳回`products`集合中的所有資料。 ### 從 Appwrite 中刪除產品 管理員使用者也可以透過產品 ID 刪除產品。 **`deleteProduct`**函數接受產品的 ID 作為參數,並從資料庫中刪除所選產品(包括其圖像),因為它們使用相同的 ID 屬性。 ``` export const deleteProduct = async (id: string) => { try { await db.deleteDocument( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID!, id ); await storage.deleteFile(process.env.NEXT_PUBLIC_BUCKET_ID!, id); alert("Product deleted successfully"); } catch (err) { console.error(err); } }; ``` --- 如何使用 Appwrite 驗證使用者身份 --------------------- 在前面的部分中,我們已經設定了 GitHub 身份驗證方法。在這裡,您將了解如何處理使用者登入應用程式。 若要使客戶能夠使用其 GitHub 帳戶登入應用程式,請在按一下`Sign in`按鈕時執行以下功能。該函數將使用者重定向到 GitHub,在那裡他們可以向應用程式授權或授予權限,然後登入應用程式: ``` import { account } from "../appwrite"; import { OAuthProvider } from "appwrite"; const handleGoogleSignIn = async () => { try { account.createOAuth2Session( OAuthProvider.Github, "http://localhost:3000", "http://localhost:3000/login" ); } catch (err) { console.error(err); } }; ``` 管理員使用者可以使用電子郵件和密碼登入應用程式。 Appwrite 在授予對應用程式儀表板的存取權之前會驗證憑證。 ``` import { account } from "@/app/appwrite"; const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); try { await account.createEmailPasswordSession(email, password); alert(`Welcome back 🎉`); router.push("/admin/dashboard"); } catch (err) { console.error(err); alert("Invalid credentials ❌"); } }; ``` Appwrite 還允許您取得目前使用者的資料。例如,如果只有經過身份驗證的使用者才能付款,您可以透過執行下面的程式碼片段來完成此操作。它會檢索目前使用者的資料,如果使用者未登錄,則傳回 null。 ``` import { account } from "@/app/appwrite"; useEffect(() => { const checkAuthStatus = async () => { try { const request = await account.get(); setUser(request); } catch (err) { console.log(err); } }; checkAuthStatus(); }, []); ``` --- 如何將 Stripe 付款結帳新增至 Next.js -------------------------- 在本節中,您將了解如何在應用程式中實現 Stripe 付款結帳。 Stripe 是一種流行的線上支付處理平台,可讓您建立產品並將一次性和定期支付方式整合到您的應用程式中。 首先,您需要[建立一個 Stripe 帳戶](https://dashboard.stripe.com/login)。您可以在本教學中使用測試模式帳戶。 ![條紋1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nibs7bxb09i167mxm918.png) 點擊頂部選單中的`Developers` ,然後從 API 金鑰選單中複製您的金鑰。 ![條紋2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up8757knbquc3k0577ps.png) 將您的 Stripe 金鑰貼到`.env.local`檔案中。 ``` STRIPE_SECRET_KEY=<your_secret_key> ``` 安裝[Stripe Node.js SDK](https://docs.stripe.com/libraries) 。 ``` npm install stripe ``` 接下來,在 Next.js `app`資料夾中建立一個`api`資料夾。 `api`資料夾將包含應用程式的所有 API 路由和端點。 ``` cd app mkdir api ``` 透過在`api`資料夾中新增`checkout`資料夾來建立`checkout`端點。 ``` cd api mkdir checkout && cd checkout touch route.ts ``` 將下面的程式碼片段複製到`route.ts`檔中。 ``` import { NextRequest, NextResponse } from "next/server"; import Stripe from "stripe"; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export async function POST(req: NextRequest) { //👇🏻 accepts the customer's cart const cart = await req.json(); try { //👇🏻 creates a checkout session const session = await stripe.checkout.sessions.create({ payment_method_types: ["card"], line_items: cart.map((product: Product) => ({ price_data: { currency: "usd", product_data: { name: product.name, }, unit_amount: product.price * 100, }, quantity: 1, })), mode: "payment", cancel_url: `http://localhost:3000/?canceled=true`, success_url: `http://localhost:3000?success=true&session_id={CHECKOUT_SESSION_ID}`, }); //👇🏻 return the session URL return NextResponse.json({ session: session.url }, { status: 200 }); } catch (err) { return NextResponse.json({ err }, { status: 500 }); } } ``` 上面的程式碼片段建立了一個接受 POST 請求的結帳端點。它為客戶建立結帳會話並傳回會話 URL。 **`cancel_url`**和**`success_url`**確定完成或取消付款後將用戶重新導向到何處。 最後,當用戶決定為產品付款時,您可以透過執行以下程式碼片段將客戶的購物車發送到`/checkout`端點: ``` const processPayment = async (cart: Product[]) => { try { if (user !== null) { //👇🏻 saves cart to local storage localStorage.setItem("cart", JSON.stringify(cart)); //👇🏻 sends cart to /checkout route const request = await fetch("/api/checkout", { method: "POST", body: JSON.stringify(cart), headers: { "Content-Type": "application/json" }, }); //👇🏻 retrieves the session URL const { session } = await request.json(); //👇🏻 redirects the user to the checkout page window.location.assign(session); } else { //👇🏻 redirects unauthenticated users router.push("/login"); } } catch (err) { console.error(err); } }; ``` 上面的程式碼片段將購物車儲存到瀏覽器的本機儲存體並將其傳送到 API 端點,然後從後端伺服器檢索回應(會話 URL)並將使用者重新導向至 Stripe 結帳頁面。 ![條紋3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5hokf2qyqyey3kwsg9x.gif) --- 使用 Novu 發送應用程式內通知和電子郵件通知 ------------------------ [Novu](https://github.com/novuhq/novu)是第一個提供統一 API 的通知基礎架構,用於透過多種管道(包括應用程式內、推播、電子郵件、簡訊和聊天)發送通知。 在本部分中,您將了解如何將 Novu 加入到您的應用程式,以便您能夠發送電子郵件和應用程式內訊息。 首先,安裝所需的 Novu 軟體包: ``` npm install @novu/node @novu/echo @novu/notification-center ``` 當用戶進行購買時,他們將收到一封付款確認電子郵件,管理員用戶也會收到一條應用程式內通知。 為此,您需要[在 Novu 上建立帳戶](https://web.novu.co/auth/login)並設定主要電子郵件提供者。在本教程中,我們將使用[“重新發送”](https://resend.com/docs/introduction) 。 在 Novu 上建立帳戶後,建立一個[重新傳送帳戶](https://resend.com/docs/introduction),然後從儀表板上的側邊欄選單中選擇`API Keys`來建立帳戶。 ![重新發送 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhehx7s45x180zpir1ti.png) 接下來,回到 Novu 儀表板,從側邊欄選單中選擇`Integrations Store` ,然後新增 Resend 作為電子郵件提供者。您需要將重新傳送 API 金鑰和電子郵件地址貼到必填欄位中。 ![新 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f03vb6nftyi8g790vg7m.png) 從側邊欄選單中選擇**「設定」** ,然後將您的`Novu API`金鑰和`App ID`複製到**`.env.local`**檔案中,如下所示。另外,將您的`subscriber ID`複製到其欄位中 - 您可以從`Subscribers`部分獲取此資訊。 ``` NOVU_API_KEY=<YOUR_API_FOR_NEXT_SERVER> NEXT_PUBLIC_NOVU_API_KEY=<YOUR_API_FOR_NEXT_CLIENT> NEXT_PUBLIC_NOVU_APP_ID=<YOUR_API_ID> NOVU_SUBSCRIBER_ID=<YOUR_API_FOR_NEXT_SERVER> NEXT_PUBLIC_NOVU_SUBSCRIBER_ID=<YOUR_API_FOR_CLIENT> ``` ![新2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voeofvvtv88pex9rpr1s.png) 最後,將 Novu 通知鈴新增至管理儀表板,以使管理員使用者能夠在應用程式內接收通知。 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, } from "@novu/notification-center"; export default function AdminNav() { return ( <NovuProvider subscriberId={process.env.NEXT_PUBLIC_NOVU_SUBSCRIBER_ID!} applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!} > <PopoverNotificationCenter colorScheme='light'> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> ); } ``` ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m62ft87ue9orse2yww9z.png) --- 如何使用 Novu Echo 建立通知工作流程 ----------------------- [Novu](https://docs.novu.co/echo/quickstart)提供程式碼優先的工作流程引擎,讓您能夠在程式碼庫中建立通知工作流程。它允許您將電子郵件、簡訊、聊天範本和內容產生器(例如[React Email](https://react.email/docs/introduction)和[MJML](https://mjml.io/) )整合到 Novu 中,以建立高級且強大的通知。 在本部分中,您將了解如何在應用程式中建立通知工作流程、如何使用 Novu 的電子郵件通知範本以及如何使用 Novu 發送應用程式內通知和電子郵件通知。 透過執行以下命令安裝[React Email](https://react.email/docs/introduction) : ``` npm install react-email @react-email/components -E ``` 將以下腳本包含在您的 package.json 檔案中。 `--dir`標誌使 React Email 能夠存取位於專案內的電子郵件範本。在本例中,電子郵件範本位於`src/emails`資料夾中。 ``` { "scripts": { "email": "email dev --dir src/emails" } } ``` 接下來,在 Next.js `app`資料夾中建立一個包含`email.tsx`的`emails`資料夾,並將以下程式碼片段複製到該檔案中: ``` import { Body, Column, Container, Head, Heading, Hr, Html, Link, Preview, Section, Text, Row, render, } from "@react-email/components"; import * as React from "react"; const EmailTemplate = ({ message, subject, name, }: { message: string; subject: string; name: string; }) => ( <Html> <Head /> <Preview>{subject}</Preview> <Body style={main}> <Container style={container}> <Section style={header}> <Row> <Column style={headerContent}> <Heading style={headerContentTitle}>{subject}</Heading> </Column> </Row> </Section> <Section style={content}> <Text style={paragraph}>Hey {name},</Text> <Text style={paragraph}>{message}</Text> </Section> </Container> <Section style={footer}> <Text style={footerText}> You&apos;re receiving this email because your subscribed to Newsletter App </Text> <Hr style={footerDivider} /> <Text style={footerAddress}> <strong>Novu Store</strong>, &copy;{" "} <Link href='https://novu.co'>Novu</Link> </Text> </Section> </Body> </Html> ); export function renderEmail(inputs: { message: string; subject: string; name: string; }) { return render(<EmailTemplate {...inputs} />); } const main = { backgroundColor: "#f3f3f5", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", }; const headerContent = { padding: "20px 30px 15px" }; const headerContentTitle = { color: "#fff", fontSize: "27px", fontWeight: "bold", lineHeight: "27px", }; const paragraph = { fontSize: "15px", lineHeight: "21px", color: "#3c3f44", }; const divider = { margin: "30px 0", }; const container = { width: "680px", maxWidth: "100%", margin: "0 auto", backgroundColor: "#ffffff", }; const footer = { width: "680px", maxWidth: "100%", margin: "32px auto 0 auto", padding: "0 30px", }; const content = { padding: "30px 30px 40px 30px", }; const header = { borderRadius: "5px 5px 0 0", display: "flex", flexDireciont: "column", backgroundColor: "#2b2d6e", }; const footerDivider = { ...divider, borderColor: "#d6d8db", }; const footerText = { fontSize: "12px", lineHeight: "15px", color: "#9199a1", margin: "0", }; const footerLink = { display: "inline-block", color: "#9199a1", textDecoration: "underline", fontSize: "12px", marginRight: "10px", marginBottom: "0", marginTop: "8px", }; const footerAddress = { margin: "4px 0", fontSize: "12px", lineHeight: "15px", color: "#9199a1", }; ``` 上面的程式碼片段使用 React Email 建立了一個可自訂的電子郵件範本。您可以找到更多[易於編輯的靈感或模板](https://demo.react.email/preview/notifications/vercel-invite-user)。該元件還接受訊息、主題和名稱作為屬性,並將它們填入元素中。 最後,您可以在終端機中執行`npm run email`來預覽範本。 接下來,讓我們將電子郵件範本整合到 Novu Echo 中。首先,關閉 React Email 伺服器,然後執行下面的程式碼片段。它會在瀏覽器中開啟[Novu Dev Studio](https://docs.novu.co/echo/concepts/studio) 。 ``` npx novu-labs@latest echo ``` 在 Next.js 應用程式資料夾中建立一個包含`client.ts`檔案的`echo`資料夾,並將此程式碼片段複製到該檔案中。 ``` import { Echo } from "@novu/echo"; import { renderEmail } from "@/app/emails/email"; interface EchoProps { step: any; payload: { subject: string; message: string; name: string; totalAmount: string; }; } export const echo = new Echo({ apiKey: process.env.NEXT_PUBLIC_NOVU_API_KEY!, devModeBypassAuthentication: process.env.NODE_ENV === "development", }); echo.workflow( "novu-store", async ({ step, payload }: EchoProps) => { //👇🏻 in-app notification step await step.inApp("notify-admin", async () => { return { body: `${payload.name} just made a new purchase of ${payload.totalAmount} 🎉`, }; }); //👇🏻 email notification step await step.email( "email-customer", async () => { return { subject: `${payload ? payload?.subject : "No Subject"}`, body: renderEmail(payload), }; }, { inputSchema: { type: "object", properties: {}, }, } ); }, { payloadSchema: { type: "object", properties: { message: { type: "string", default: "Congratulations! Your purchase was successful! 🎉", }, subject: { type: "string", default: "Message from Novu Store" }, name: { type: "string", default: "User" }, totalAmount: { type: "string", default: "0" }, }, required: ["message", "subject", "name", "totalAmount"], additionalProperties: false, }, } ); ``` 此程式碼片段定義了一個名為`novu-store` Novu 通知工作流程,該工作流程接受包含電子郵件主題、訊息、客戶姓名和總金額的有效負載。 此工作流程有兩個步驟:應用程式內通知和電子郵件通知。應用程式內通知使用通知鈴聲向管理員發送訊息,而電子郵件則向客戶的電子郵件發送訊息。 接下來,您需要為 Novu Echo 建立 API 路由。在`api`資料夾中,建立一個包含`route.ts`檔案的`email`資料夾,並將下面提供的程式碼片段複製到該檔案中。 ``` import { serve } from "@novu/echo/next"; import { echo } from "@/app/echo/client"; export const { GET, POST, PUT } = serve({ client: echo }); ``` 在終端機中執行`npx novu-labs@latest echo` 。它將自動開啟 Novu Dev Studio,您可以在其中預覽工作流程並將其與雲端同步。 ![新3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed2sl38m7zrlgjoj4a6y.gif) `Sync to Cloud`按鈕會觸發一個彈出窗口,其中提供有關如何將工作流程推送到 Novu 雲端的說明。 ![新4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ch8ba7y9klyudmmv9jz.png) 若要繼續,請在終端機中執行以下程式碼片段。這將產生一個唯一的 URL,表示您的開發環境和雲端環境之間的本機隧道。 ``` npx localtunnel --port 3000 ``` 將產生的連結與 Echo API 端點一起複製到 Echo Endpoint 欄位中,按一下`Create Diff`按鈕,然後部署變更。 ``` https://<LOCAL_TUNNEL_URL>/<ECHO_API_ENDPOINT (/api/email)> ``` 恭喜!您剛剛從程式碼庫建立了 Novu 工作流程。 ![新5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bdugs6g15y1e7xeixux.png) 最後,讓我們建立在用戶付款時發送電子郵件和應用程式內通知的端點。建立一個`api/send`路由並將下面的程式碼片段複製到檔案中: ``` import { NextRequest, NextResponse } from "next/server"; import { Novu } from "@novu/node"; const novu = new Novu(process.env.NOVU_API_KEY!); export async function POST(req: NextRequest) { const { email, name, totalAmount } = await req.json(); const { data } = await novu.trigger("novu-store", { to: { subscriberId: process.env.NOVU_SUBSCRIBER_ID!, email, firstName: name, }, payload: { name, totalAmount, subject: `Purchase Notification from Novu Store`, message: `Your purchase of ${totalAmount} was successful! 🎉`, }, }); console.log(data.data); return NextResponse.json( { message: "Purchase Completed!", data: { novu: data.data }, success: true, }, { status: 200 } ); } ``` 端點接受客戶的電子郵件、姓名和支付總額,並在付款成功後觸發 Novu 通知工作流程發送所需的通知。 --- 結論 -- 到目前為止,您已經學會如何執行以下操作: - 實施多種身份驗證方法,從 Appwrite 儲存和檢索資料和檔案。 - 使用 React Email 建立電子郵件模板,並使用 Novu 發送應用程式內和電子郵件通知。 如果您希望在應用程式中發送通知,Novu 是您的最佳選擇。使用 Novu,您可以為應用程式加入多個通知管道,包括聊天、簡訊、電子郵件、推播和應用程式內通知。 本教學的源程式碼可在此處取得: <https://github.com/novuhq/ecom-store-with-nextjs-appwrite-novu-and-stripe> 感謝您的閱讀! --- 原文出處:https://dev.to/novu/building-an-e-commerce-store-with-nextjs-49m

我在 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

開始使用 Kubernetes 最簡單的方法

他們說第一步總是最難的。當這一步朝著 Kubernetes 的方向邁出時,它會讓人感覺更加令人生畏。有時,您會因為不明白的事情太多而感到「癱瘓」。或者更好地說,你**還不**明白。 但一旦踏出了第一步,剩下的事情就變得更容易實現了。那麼,就讓我們一起踏出第一步。哦,我們將使用一些工具來幫助我們。畢竟,我們正在努力盡可能簡單😉 ### 支持我們🙏 我們知道 Kubernetes 可能很困難。這就是我們建立 Cyclops 的原因,這是一個**真正**面向開發人員的 Kubernetes 平台。抽象化 Kubernetes 的複雜性,並透過 UI 部署和管理您的應用程式。由於其平台性質,UI 本身是高度可自訂的 - 您可以更改它以滿足您的需求。 我們正在將 Cyclops 開發為開源專案。如果您熱衷於嘗試一下,我們的[儲存庫](https://github.com/cyclops-ui/cyclops)中提供了快速入門指南。如果您喜歡所看到的內容,請考慮給我們一顆星來表示您的支持⭐ ![gh星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp8slhkg99fzbu6u9683.gif) 一個集群🌐 ----- 開始使用 Kubernetes 需要的第一件事是叢集。通常,叢集代表執行應用程式的伺服器集區。但目前,您不需要伺服器集區。讓我們從簡單的事情開始:一個可以幫助我們掌握訣竅的當地遊樂場。 快速執行叢集的最簡單方法之一是使用 Minikube。 Minikube 是一個在您的電腦上設定本機 Kubernetes 叢集的工具。它非常適合開發和測試目的。首先,您需要: 1. **安裝 Docker** :docker 將允許我們在隔離環境中執行 Minikube,您可以[在此處](https://docs.docker.com/engine/install/)了解如何下載它 2. **安裝 Minikube** :按照[Minikube 網站](https://minikube.sigs.k8s.io/docs/)上的說明將其安裝到您的電腦上。 3. **啟動 Minikube** :安裝後,您可以使用下列命令啟動本機叢集: ``` minikube start ``` 這將在您的電腦上設定一個單節點(單一伺服器)Kubernetes 叢集。 配置🗄️ ---- 這通常是使用 Kubernetes 時最棘手的部分。為了讓 Kubernetes 執行您的應用程式,您必須建立一個設定檔來告訴 Kubernetes 如何處理您的應用程式。這些文件傳統上是用 YAML 編寫的,並遵循自己的語法和規則。 但好訊息是: **Cyclops 可以讓您完全跳過這個過程。** [Cyclops](https://github.com/cyclops-ui/cyclops)是一個開源工具,它提供了一個用戶友好的介面,用於配置您的應用程式以在 Kubernetes 中執行。 Cyclops 提供的 UI 在透過其模板功能定義配置時是高度可自訂的。它還附帶了一些預先定義的模板,可幫助您開始您的旅程。 Cyclops 的設定很簡單,只需要兩個指令: ``` kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/v0.6.2/install/cyclops-install.yaml && kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/v0.6.2/install/demo-templates.yaml ``` 其次: ``` kubectl port-forward svc/cyclops-ui 3000:3000 -n cyclops ``` 只需在這些命令之間等待幾秒鐘,即可讓 Kubernetes 叢集啟動 Cyclops。 現在,轉到[localhost:3000](http://localhost:3000/modules) ,您應該已準備就緒! ![獨眼巨人模組螢幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw73cwy4dtd3poqjhpfh.png) 在叢集內執行您的應用程式🏃 ------------- 進入獨眼巨人後,您將看到一個螢幕,上面寫著“未找到模組”。模組是 Cyclops 描述應用程式的方式。下一步是在 Kubernetes 叢集中執行您的應用程式(模組),或者用 Kubernetes 術語來說,「部署您的應用程式」。 首先點擊右上角的**`Add module`**按鈕。這將帶您進入一個新螢幕**,其中將產生最後一步的設定檔。** Cyclops 使用範本產生設定檔([在此處](https://cyclops-ui.com/docs/templates/)查找更多相關資訊)。您可以建立自己的模板,但 Cyclops 附帶了一些非常適合入門的預定義模板。 在螢幕頂部,選擇**`demo-template`** 。您會注意到螢幕發生變化,並且出現新欄位!切換到另一個模板將更改螢幕上的字段,但現在我們繼續使用**`demo-template`** 。 您可以將欄位中的輸入保留原樣或根據您的喜好進行更改,但您必須為模組命名! 如果您有建立的應用程式的 Docker 映像並希望在 Kubernetes 中執行,您也可以這樣做!只需將圖像的名稱放入**`image`**字段,將其版本放入**`version`**字段即可。 ![獨眼巨人配置螢幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3r1pxarj3nudollwo742.png) 對這些欄位感到滿意後,點擊底部的**`Save`** ,*瞧,***您的應用程式已部署!** 應用程式剖析 🫀 -------- Kubernetes 面臨的挑戰之一是它使用的資源種類繁多。然而,Cyclops 透過**顯示模組建立的所有資源**使這一切變得容易。這種視覺表示確實可以幫助您了解應用程式的結構。 透過`demo-template`和輸入的內容,我們建立了一個簡單的 Kubernetes 配置,其中包含服務和部署,如螢幕上所示。這是您將遇到的兩個最常見的資源,也是了解整個系統的良好切入點。 ![獨眼巨人模組概述螢幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab6v8o6r3ghx6ehpy9sa.png) Cyclops 介面以清晰、有組織的方式顯示所有這些元件,讓您可以輕鬆了解應用程式的結構以及不同部分如何組合在一起。 例如,您可以看到名為「my-app」的應用程式正在 Minikube 上執行,並帶有 Nginx 容器的副本(版本 1.14.2)。您可以直接從此介面查看日誌或修改設定。 這種視覺化方法有助於彌合開發人員與 Kubernetes 底層基礎架構之間的差距,讓您更輕鬆地管理和理解應用程式。 後續步驟👣 ----- 現在你已經打破了僵局,Kubernetes 感覺不再那麼可怕了。我建議您嘗試 Cyclops 提供的其他模板,看看不同的模板如何建立不同的資源。 掌握 Kubernetes 的旅程漫長且乏味。然而,你不必獨自走這條路!加入我們的[Discord 社群](https://discord.com/invite/8ErnK3qDb3)並與其他人聯繫,如果您感到迷茫,他們可以為您提供幫助! 如果您喜歡這篇文章,請記得在我們的[倉庫](https://github.com/cyclops-ui/cyclops)上給我們一顆星來支持我們⭐ --- 原文出處:https://dev.to/cyclops-ui/the-easiest-way-to-get-started-with-kubernetes-3mg7

Node.js 中的高階錯誤處理

錯誤處理是軟體開發的重要方面,可確保應用程式的行為可預測,並在出現問題時提供有意義的回饋。在 Node.js 中,由於其非同步特性,有效的錯誤處理可能特別具有挑戰性。本文深入探討了管理 Node.js 應用程式中的錯誤的先進技術和最佳實踐。 了解錯誤類型 ------ 在深入研究錯誤處理策略之前,了解可能遇到的錯誤類型非常重要: 1. 同步錯誤: 同步程式碼執行期間發生的錯誤可以使用 try-catch 區塊擷取。 2. 非同步錯誤: 錯誤發生在非同步程式碼執行期間,例如回呼、promise 和 async/await 函數。 3. 操作錯誤: 表示程式需要處理的執行時間問題(例如,無法連線到資料庫)的錯誤。 4. 程式設計師錯誤: 程式中的錯誤(例如,型別錯誤、斷言失敗)。通常不應以與操作錯誤相同的方式捕獲和處理這些錯誤。 **同步錯誤處理** ---------- 對於同步程式碼,錯誤處理使用 try-catch 區塊: ``` try { // Synchronous code that might throw an error let result = dafaultFunction(); } catch (error) { console.error('An error occurred:', error.message); // Handle the error appropriately } ``` **非同步錯誤處理** ----------- - *callback* 在基於回調的非同步程式碼中,錯誤通常是回呼函數中的第一個參數: ``` const fs = require('fs'); fs.readFile('/path/to/file', (err, data) => { if (err) { console.error('An error occurred:', err.message); // Handle the error return; } // Process the data }); ``` - *promise* Promise 提供了一種更簡潔的方法來使用 .catch() 處理非同步錯誤: ``` const fs = require('fs').promises; fs.readFile('/path/to/file') .then(data => { // Process the data }) .catch(err => { console.error('An error occurred:', err.message); // Handle the error }); ``` - *async/await* Async/await 語法允許在非同步程式碼中進行更同步的錯誤處理: ``` const fs = require('fs').promises; async function readFile() { try { const data = await fs.readFile('/path/to/file'); // Process the data } catch (err) { console.error('An error occurred:', err.message); // Handle the error } } readFile(); ``` 集中錯誤處理 ------ 對於較大的應用程式,集中錯誤處理可以幫助更有效地管理錯誤。這通常涉及 Express.js 應用程式中的中間件。 - *Express.js 中介軟體* Express.js 提供了一種透過中間件處理錯誤的機制。這個中間件應該是堆疊中的最後一個: ``` const express = require('express'); const app = express(); // Define routes and other middleware app.get('/', (req, res) => { throw new Error('Something went wrong!'); }); // Error-handling middleware app.use((err, req, res, next) => { console.error(err.stack); res.status(500).json({ message: 'Internal Server Error' }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 先進技術 ---- - *自訂錯誤類別* 建立自訂錯誤類別可以幫助區分不同類型的錯誤並使錯誤處理更加精細: ``` class AppError extends Error { constructor(message, statusCode) { super(message); this.statusCode = statusCode; Error.captureStackTrace(this, this.constructor); } } // Usage try { throw new AppError('Custom error message', 400); } catch (error) { if (error instanceof AppError) { console.error(`AppError: ${error.message} (status: ${error.statusCode})`); } else { console.error('An unexpected error occurred:', error); } } ``` - *錯誤記錄* 實施強大的錯誤日誌記錄以監視和診斷問題。 Winston 或 Bunyan 等工具可以幫助記錄日誌: ``` const winston = require('winston'); const logger = winston.createLogger({ level: 'error', format: winston.format.json(), transports: [ new winston.transports.File({ filename: 'error.log' }) ] }); // Usage try { // Code that might throw an error throw new Error('Something went wrong'); } catch (error) { logger.error(error.message, { stack: error.stack }); } ``` - *全域錯誤處理* 處理未捕獲的異常和未處理的承諾拒絕可確保不會漏掉任何錯誤: ``` process.on('uncaughtException', (error) => { console.error('Uncaught Exception:', error); // Perform cleanup and exit process if necessary }); process.on('unhandledRejection', (reason, promise) => { console.error('Unhandled Rejection at:', promise, 'reason:', reason); // Perform cleanup and exit process if necessary }); ``` 最佳實踐 ---- - 快速失敗:儘早偵測並處理錯誤。 - 正常關閉:確保您的應用程式在發生嚴重錯誤時可以正常關閉。 - 有意義的錯誤訊息:提供清晰且可操作的錯誤訊息。 - 避免靜默故障:始終記錄或處理錯誤以避免靜默故障。 - 測試錯誤場景:編寫測試來覆蓋潛在的錯誤場景並確保錯誤處理按預期工作。 結論 -- 為了有效地處理 Node.js 中的錯誤,您需要結合使用同步和非同步技術、集中管理以及進階策略,例如自訂錯誤類別和強大的日誌記錄。透過結合這些最佳實踐和先進技術,您可以建立強大的 Node.js 應用程式,優雅地處理錯誤並為用戶提供改進的體驗。 --- 原文出處:https://dev.to/amritak27/advanced-error-handling-in-nodejs-1ep8

JavaScript 中除了 console.log() 之外的除錯函數

大多數 JavaScript 開發人員都熟悉基本的`console.log()` 。然而,控制台 API 提供了許多其他方法,這些方法在開發和偵錯工作流程中都非常有用。 ### 基本`console.log()` 讓我們從基本的`console.log()`開始,它用於將訊息列印到控制台。 ``` console.log("Hello, World!"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717602776372/yR9V84n9r.png?auto=format) 這是除錯和記錄訊息最常用的方法。 ### `console.error()` `console.error()`用於輸出錯誤訊息。它有助於區分控制台中的錯誤和常規日誌訊息。 ``` console.error("This is an error message"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717602826130/csjO0YUGj.png?auto=format) 這將以紅色列印該訊息,使其脫穎而出。 ### `console.warn()` `console.warn()`輸出警告訊息。這些問題沒有錯誤那麼嚴重,但仍然需要注意。 ``` console.warn("This is a warning message"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717602863488/xaOE9ZLjI.png?auto=format) 警告訊息以黃色顯示,這有助於將它們與常規日誌和錯誤區分開來。 ### `console.info()` `console.info()`用於資訊性訊息。 ``` console.info("This is an informational message"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717602908638/wZIyzHzQa.png?auto=format) 它的行為與`console.log()`類似,但對於對日誌訊息進行分類非常有用。 ### `console.debug()` `console.debug()`用於偵錯目的,並且通常在許多瀏覽器的控制台設定中預設為隱藏。 ``` console.debug("This is a debug message"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603092431/GMNga7Wge.png?auto=format) 要啟用它,請確保在頂部欄中選取`Verbose` 。 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603225265/UVsWL5bA0.png?auto=format) ### `console.table()` `console.table()`可讓您將資料顯示為表格。這在處理陣列或物件時非常有用。 ``` const users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 }, { name: "Charlie", age: 35 }, ]; console.table(users); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603316367/bDPVHX7dX.png?auto=format) 這會將`users`陣列列印為表格,使其更易於閱讀。 ### `console.time()`和`console.timeEnd()` 這些方法用於測量一段程式碼執行所需的時間。 ``` function processData() { console.time("processData"); // Simulating a time-consuming process for (let i = 0; i < 1000000; i++) { // Process } console.timeEnd("processData"); } processData(); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603951155/Ss_aFfxVf.png?auto=format) `console.time("processData")`啟動計時器, `console.timeEnd("processData")`停止計時器,列印經過的時間(以毫秒為單位)。這可以幫助辨識程式碼中的瓶頸並提高效能。 ### `console.count()` `console.count()`用於統計程式碼區塊的執行次數。 ``` for (let i = 0; i < 5; i++) { console.count("Counter"); } ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603544889/KOsdLFTNl.png?auto=format) 這將在每次循環執行時列印計數。 ### `console.group()`和`console.groupEnd()` 這些方法可讓您將多個日誌訊息分組在一起。 ``` console.group("User Details"); console.log("Name: Alice"); console.log("Age: 25"); console.groupEnd(); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603600402/MlxNun_v8.png?auto=format) 這將在控制台中建立一個可擴展組。您也可以建立嵌套群組以更好地組織。 ### `console.assert()` 只有當斷言為 false 時`console.assert()`才會將訊息寫入控制台。 ``` const x = 10; console.assert(x > 10, "x is not greater than 10"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603763457/j99LQUfCM.png?auto=format) 由於`x`不大於 10,因此將列印該訊息。 ### 設定控制台日誌的樣式 您可以使用 CSS 設定控制台日誌訊息的樣式。 ``` console.log("%cThis is a styled message", "color: blue; font-size: 20px;"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603814168/VUOV4fH4T.png?auto=format) `%c`是後面的 CSS 樣式字串的佔位符。 ### 最佳實踐 1. **使用適當的方法:**使用`console.error()`來處理錯誤,使用`console.warn()`來處理警告,等等。這有助於過濾控制台中的訊息。 2. **刪除生產中的日誌:**確保刪除或停用生產程式碼中的控制台日誌,以避免混亂和潛在的效能問題。 3. **將相關日誌分組:**使用`console.group()`和`console.groupEnd()`將相關日誌保存在一起。 ### 結論 下次當您深入程式碼並需要偵錯時,請嘗試這些方法。它們可以讓您的生活更輕鬆,除錯過程更有效率。因此,繼續在您的下一個專案中嘗試這些,看看它們可以產生什麼變化。 更詳細的訊息,您可以參考[控制台上的 MDN Web 文件](https://developer.mozilla.org/en-US/docs/Web/API/Console)。 --- 原文出處:https://dev.to/codeparrot/debugging-beyond-consolelog-in-javascript-32g6

我如何在處理多個專案時提高工作效率

身為自由Web 開發人員、應用程式建立者和開源維護者,我必須不斷地在多個工作流程之間來回切換,例如編輯程式碼、設計模型、管理待辦事項清單、搜尋圖示和文件、執行命令列、檢查使用不同帳戶的電子郵件等等。每個開關都需要持續不斷的重複操作: - 啟動程式碼或圖像編輯器並在其中開啟特定專案的檔案。 - 開啟 Web 瀏覽器並導航至任務管理器中的專案。 - 導航到圖示網站,設定圖像過濾器並執行搜尋。 - 開啟網頁郵件應用程式並切換帳戶。 - 啟動終端機並在其中輸入命令。 - ETC… 所有東西都分散在不同的地方,使整個過程變得一團糟。當同時處理多個專案時,情況會變得更糟。我認為透過收集在一個地方完成工作所需的一切並將其組織到專案和工作流程中以便它們具有正確的上下文,我可以極大地提高我的工作效率。專案和工作流程將有清晰的界限,它們之間的切換將不再是一場噩夢。所以我想出了[Freeter](https://freeter.io/?ref=devto) ,一個可以做到這一點的組織應用程式。最近將其作為永久免費的[開源專案](https://github.com/FreeterApp/Freeter)發布。 在這篇簡短的文章中,我將使用三個工作流程作為範例,向您展示如何使用 Freeter 來提高工作效率。我希望這能為您提供一些關於如何提高工作效率的想法。 --- 工作流程 ---- 首先,我分析了我的工作流程以及我在專案工作中尋找所需內容時經常做的所有事情: 1. 當我開發應用程式或網站時,我經常需要能夠存取任務管理器、在程式碼和圖像編輯器中開啟專案文件、在特定網站上搜尋圖示和文件、記下快速想法以及打開專案儲存庫在網路瀏覽器中。 2. 當我檢查電子郵件和 Twitter DM 時,我需要存取網頁郵件和 Twitter DM 頁面。我有多個帳戶,需要使用特定於專案的帳戶登入。 3. 當我發布新版本的應用程式時,我需要在終端應用程式中執行發布命令,打開git存儲庫中的發布頁面,打開任務管理器並打開Freeter社區中的“計劃功能”帖子編輯器。 現在是時候將它們轉變為 Freeter 工作流程了。 應用程式/網站開發 --------- 為了快速存取開發應用程式/網站所需的內容,我使用以下小工具設定了工作流程畫面: - 任務:網頁小工具,將專案的任務管理器直接嵌入到工作流程畫面中。 - 編輯程式碼:檔案開啟器小工具,用於在程式碼編輯程式中開啟專案資料夾。 - 編輯模型:文件開啟器小部件,用於在圖像編輯程式中開啟模型檔案。 - MDN:Web 查詢小工具,用於搜尋 MDN Web 文件網站。 - Node.js 文件:Web 查詢小工具,用於搜尋 Node.js 文件網站。 - 大綱圖示:Web 查詢小工具,用於搜尋帶有圖示的網站,並按大綱圖示進行過濾。 - 填滿圖示:Web 查詢小工具,用於搜尋帶有圖示的網站,並按填滿圖示進行過濾 - 註:註釋小部件,用於在開發功能時記下快速想法。 - 開啟儲存庫:連結開啟器小工具,用於在 Web 瀏覽器中開啟專案儲存庫。 - 錯誤報告:連結開啟器小工具,用於在網頁瀏覽器中開啟錯誤報告頁面。 - 功能請求:連結開啟器小工具,用於在 Web 瀏覽器中開啟功能請求頁面。 ![應用程式開發工作流程螢幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c0ay12255rcfctnvbb1.png) 此工作流程使我能夠立即切換到開發上下文,只需單擊即可啟動啟動開發過程所需的一切,快速搜尋文件和圖標,並快速存取任務清單。 留言 -- 為了檢查電子郵件和 Twitter 私信,我使用兩個網頁小工具設定了工作流程: - 嵌入 Google Mail 收件匣頁面。 - 嵌入 Twitter DM 頁面。 我還在小部件設定中將 Session Scope 設定為 Project,以便我可以在其他專案中以不同帳戶登入。 ![訊息工作流程螢幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz09rm70xn2rg5bog0z1.png) 此工作流程使我能夠快速同時存取專案特定帳戶的 Google Mail 和 Twitter DM。 新發布 --- 為了發布應用程式的新版本,我使用這五個小部件設定了工作流程: - 發布:Commander 小工具,用於在終端機中執行命令列,請求新版本號並啟動新版本的草稿建置。 - 開啟版本:連結 Opener 小工具,用於在 Web 瀏覽器中開啟版本頁面。 - 任務:應用程式開發工作流程中的任務副本。我需要它來查看當前版本中所有已完成的任務。 - 規劃功能:網頁小工具,將 Freeter 社群的「排程功能」頁面嵌入到工作流程畫面中。在它的幫助下,我更新了計劃的功能並發布了新版本中已實現的功能。 - 發布步驟:注意widget,不要忘記在發布過程中做一些事情。 ![新版本工作流程畫面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96t0ka8kxlrcqzo4yonu.png) 借助這個工作流程,我可以輕鬆發布新版本並發布有關新功能的更新。 像超級英雄一樣在工作流程之間切換 ---------------- 現在,當我在專案和工作流程之間切換時,只需按`Ctrl+Shift+F`將 Freeter 帶到前面,打開我當時需要的工作流程選項卡,然後立即開始工作。 我希望這也能激勵您組織您的工作流程。若要開始使用,請造訪[Freeter 主頁](https://freeter.io/?ref=devto)。 --- 原文出處:https://dev.to/alexk/how-i-boosted-my-productivity-while-working-on-multiple-projects-3h71

身為優秀的初級工程師:放慢工作速度才能更快成長

我最近讀完了一本我認為今年會讀的最重要的書。[生產力低下:卡爾紐波特(Cal Newport)撰寫的《失去的成就而不倦怠的藝術》](https://www.amazon.com/Slow-Productivity-Accomplishment-Without-Burnout/dp/0593544854)是一本簡短但有價值的讀物,它揭示了在知識工作經濟中如何保持生產力。這本書圍繞著三個主要指令,以在不倦怠的情況下解鎖高品質的工作。 作者透過**“少做事”** 、 **“以更自然的節奏工作”**和**“過分注重品質”,**認為我們最好的工作尚未完成。書中探討的另一個關鍵概念是紐波特先生所說的**「偽生產力」** ,這是一種錯誤的啟發式方法,用於衡量知識工作者的生產力以及生產真正重要的工作實際上有多麼有害。 ![封面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itleydmvknx6m4erckmb.jpeg) 身為電腦科學家本人和一般主題書籍的作者,以[《數位極簡主義》](https://www.amazon.com/Digital-Minimalism-Choosing-Focused-Noisy/dp/0525536515)和《紐約時報》暢銷書[《深度工作》](https://www.amazon.com/Deep-Work-Focused-Success-Distracted/dp/1455586692)等書籍而聞名,作者面向廣大讀者、任何行業和資歷的知識工作者。在這篇文章中,我想做的是應用本書中的一些主要思想,並將它們專門應用於剛開始職業生涯的工程師。 作為Kubernetes 和雲端工程領域的一個相對較新的人,我發現在應用Cal 的許多關於生產力的想法方面取得了很大的成功,如果其他初級工程師錯過了我認為真正有幫助的想法,那將是一種恥辱。以下我將解釋一些適用於初級開發人員的最重要的想法,並在最後加入可操作提示的完整清單。 ⚠️免責聲明 > \_1- 儘管我在寫這篇文章時考慮的是初級工程師,但我將提供的大多數想法和一般技巧都適用於大多數角色和資歷。 2- 我遠距工作,並且了解如果您在辦公室環境中工作,其中一些想法可能不適用。在適用的情況下,我會盡力調整適合辦公室設定的建議。 --- 在我忘記之前,讓我感謝[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) --- 高品質工作和偽生產力 ---------- 你如何判斷你無法衡量的東西?身為工程師,你如何知道自己的工作做得好不好?您如何知道您是否是一名高效的團隊成員,或者您的工作是否對整體業務產生真正的影響?如果您是農民或工廠工人,衡量您的生產力會容易得多。然而,在知識工作中,定義**「生產力」要困難得多。** 現在,由於每個人都只需一條 DM 或 Slack 訊息即可到達,因此衡量我們影響力的啟發式方法是偽生產力。這涵蓋了圍繞我們要做的實際工作的所有工作。當我們回覆電子郵件、回覆私訊、花時間參加會議和檢查指標時,我們會顯得富有成效。我們經常感到有必要執行這些任務,尤其是當我們花費大量時間處理尚未產生明顯輸出的事情時。 ![忙碌的](https://media2.giphy.com/media/Oj5w7lOaR5ieNpuBhn/200.webp?cid=ecf05e472m5o323f4o1bhlr55xhxt84mjffehbdlopyw6ouq&ep=v1_gifs_search&rid=200.webp&ct=g) > *偽生產力是表演性的,會妨礙「真正的工作」。* 到底什麼是**「真正的工作」** ?當然,這對每個工程師來說都會改變,但如果您需要適用於您的定義,這個問題可能會對您有所幫助。 試想一下,未來的自己,**最讓自己感到驕傲的作品是**什麼?您會記住您回覆的所有電子郵件和您參加的所有會議嗎?可能不會,對您來說重要的是您在不執行所有其他任務的情況下能夠完成的高品質工作。 書中的三個想法之一是**「關注品質」** 。如果您是初級工程師,我會先嘗試將這一點內化,因為這是您可以依靠的職業生涯進步的工作,也是您退休後唯一關心的工作。有兩件事可能會妨礙高品質的工作。第一個是你必須完成的所有偽生產力任務,第二個是你專注的能力。 分心是無聲殺手 ------- 每個人都有自己的優點和缺點。不幸的是,無論你獨特的品質和技能如何讓你脫穎而出,除非你**能夠持續一段時間的認知努力,否則這一切都沒關係。**由於智慧型手機和演算法增強的應用程式和服務的興起,我們的注意力被巧妙地設計來吸引我們的注意力。 ![分心](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExdTVibzBoMmxnemRxMmF1amF0bmxkdnBmdnZ6b3E0dHFsN200bG9xeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/DPXZpkETwO02ew82bQ/giphy.gif) > *您最後一次能夠坐下來閱讀超過 15 分鐘而不拿起手機是什麼時候?如果你不介意我問的話,你最後一次孤單地去洗手間,看不到手機是什麼時候?* 時不時尋求娛樂或擺脫無聊的問題是不好的,原因有很多,很多人已經比我闡述得更好了。所以我只關注其中之一。 > *作為一名嶄露頭角的知識工作者,您的價值在於您能夠**專注**於花大量時間來製定解決方案、服務、專案等。**這一點。*** 在許多遠端和工程環境中,幹擾可能來自任何地方。在專業方面,您必須考慮有多少工具和平台以您的方式發送通知。你們的會議開多久?您是否打開了相機並只有您可以看到第二個螢幕? 就個人而言,**了解您的觸發因素**很重要。 Reddit 對您有特別大的吸引力嗎?危險在於,大多數幹擾源都可以被認為對你的工作有幫助。您可能會聽到諸如“如果沒有 YouTube 大學我會怎麼樣?”之類的理由。或“我如何在不使用 Reddit 或 X 的情況下了解最新動態?” 我想傳達的最重要的訊息之一是**,如果你分心,你根本無法完成高品質的工作。**避免分心說起來容易做起來難,尤其是當偽生產力(及其所有分散注意力的脈衝和通知鈴聲)成為衡量產出的方式時。 知識型員工的薪水是多少? ------------ 慢生產力的第二個想法是**「以更自然的節奏工作」** 。為了得出這個結論,紐波特先生在書中回顧了過去,試圖了解過去的知識工作者(作家、科學家、哲學家)如何實現生產力。他發現,我們現在認為瑪麗·居里和簡·奧斯汀等人是非常有生產力的個人,貢獻了巨大影響力和有價值的工作。但如果我們觀察這些重要人物生活中的任何特定年份,我們會發現他們並不是特別忙碌。 眾所周知,瑪麗·居禮會休長假,中斷重要的實驗,而這些實驗最終將獲得諾貝爾獎,因為她就是這樣安排自己和家人的生活的。 我想讓你考慮的是,將生產力的概念應用到你的生活中,你的職業生涯將會很長,並且會有起起落落。緊張工作的時刻和相對無所事事的其他時刻。你必須同樣接受它們,因為工程生產力要求你真正理解你正在做的事情、周圍的環境,以及採用某種特定方法而不是另一種方法的原因。 這是卡爾紐波特在他的播客中提到的軼事,我覺得很合適。在碩士和博士生的論文會議上,卡爾注意到演講者強調“投入你的寫作時間”,並使用諸如“你今天的寫作投入了嗎?”之類的短語。輪到他時,他問: **「忘了寫作吧,你有時間思考嗎?」。**我們經常將忙碌的工作與我們的真實工作混淆:用我們的大腦創造價值 > *思考和理解是在職業生涯中增加價值和成長的**不可妥協的先決條件**,並且它們需要時間。* ![程式設計師思維](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utuui505m5rrr6vedcnx.png) 就拿下面的例子來說, > *想像一下,您作為新成立的雲端工程師加入團隊,並學習如何使用 ArgoCD 和 GitOps 方法來部署應用程式。團隊負責人向您展示 ArgoCD 監控目標 Git 分支,確保 Kubernetes 叢集的狀態與其相符。您將成為管理此設定的專家,透過指向先前的分支狀態輕鬆回滾部署。但是,當您加入另一個使用 Git 標籤而不是分支,或者 Flux 而不是 ArgoCD,或者使用完全不同的持續交付方法的團隊時,會發生什麼?**如果你不了解高層概念、機制及其背後的原因,你就不會成為一個有效的團隊成員。*** 不要誤認為您只是為了維護其他人建立的系統。你的報酬是為了理解、思考、適應、學習和改進。如果你保護你的專注能力,你的學習能力就會完好無損。繼續學習,你將永遠有價值。真正享受你正在學習的東西嗎?**那你就勢不可擋了**。 ### 重新思考你的一周 為了完全掌控你的職業生涯,了解你想要如何成長,並更接近生產出讓你在幾十年後感到自豪的高品質工作,你需要優先考慮你投入時間的專案或「目標」。 通常,**我們會不知不覺地同時關注太多專案**。我們可能會在開始一個新的副專案、到處寫一篇部落格文章的同時學習一種新的編碼語言,同時處理本週工作看板上出現的任務。這種做法需要停止。您必須退後一步,確定您想要優先考慮的專案,並一次處理一個或最多兩個專案。 ![一週計劃](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTk4emQ1NnNyNm9tZnF1Y3VjZTRmeWc3N2lleGF0b3Q1c2sxa2FobiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/RN6Y85cTp5XJli6JIN/giphy.gif) 並不是每份工作都足夠靈活,可以讓您在您想做的時候做您想做的事。但是,如果您清楚地了解自己的職業優先事項,則可以將您的任務與這些優先事項結合起來,並在出現時提出要求。作為初級人員,甚至更高級別的人員,您將不得不執行您可能不喜歡的任務。但您至少可以嘗試減少花在這些任務上的時間,以專注於您想要擅長的工作。 **使用案例:** > *假設您必須平衡兩種類型的任務:**內部開發人員支援**(您不喜歡)和**使用 Terraform 的 Account Factory 實現新的基礎設施配置平台**(這讓您感到興奮)。您可以規劃不間斷的時間段來完成所需的任務,並將與支援相關的任務捆綁到其他時間段。多工處理以及在兩項任務之間共享心理頻寬會降低每項任務的品質。* 紐波特先生談到的一個有用的策略是有一個視覺和有序的任務板,由**“暫存池”隔開,“暫存池”**是按順序組織的計劃工作,但尚未進行工作, **“活動」**泳道,這是您實際正在做的事情以及**「完成」**欄,您可能已經在使用了。除了使用看板來包含您擁有的任務之外,請確保任務即時代表您將執行任務的順序以及您目前正在處理的任務。 確保本週內向您提出新的臨時任務的任何人都必須傳達任務在任務池中的位置以及完成該任務需要多長時間。如果必須將傳入任務推到線路的前面,請確保與任何潛在的利害關係人溝通這可能會導致清單中其他任務的延遲。 ![Trello 板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66no4q6xmtfd4w1h6g8l.png) 你的經理是你的盟友 --------- 您可能會因為以「自私」的任務偏好來接近您的經理而感到內疚,但您不應該這樣做。將自己置於經理、團隊領導或老闆的立場上是很有幫助的。如果你是他們團隊的一員,老闆幾乎總是希望你做一件事。 > ***經理只是希望你減輕他們自己所承受的壓力。**經理只是想讓你有信心,如果你被指派去做某件事,你將能夠處理好它。* 優秀的管理者會非常欣賞團隊成員齊心協力,以系統化的、溝通的方式工作,重視品質而不是偽生產力。如果您能夠有效地向經理傳達您手上的任務以及交付任務的順序,他們現在就可以放心,任務一定會完成。然後由你來安排你的一天,以確保你交付並保持經理對你的信心。 ![老闆](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcTExdjIxYjM1NTBybGN3NWc2YmQxNnVuZWZ6bXR1ajdnYWphZXdzcyZlcD12MV9naWZzX3NlYXJjaCZjdD1n/26wkRxKJ9yUZzlorK/200.webp) **向你的經理提出一些想法:** > - 在一對一會議中溝通目標和專案。 - 將這些目標與公司的年度職業發展評估保持一致。 - 在分診會議之前查看分診任務頻道,以了解您將自願執行哪些任務。 - 請求更多資源來幫助您創造高品質的作品。 - 如果遠距工作,請協調溝通和回覆時間。 可行的提示 ----- ### 使用時間限制,而不是待辦事項列表 待辦事項清單對我來說並不完全有效,這取決於我的感受或我認為一項任務可能需要多長時間,我經常最終會挑选和選擇任務,這導致我拖掉那些我不那麼興奮的任務日復一日地無止盡地完成和推動任務。 **另一方面,時間阻塞增加了待辦事項清單中所缺少的結構**。透過準確規劃何時進行深度工作、與他人交流和休息,您會驚訝地發現自己每天擁有如此多的優質時間。時間劃分可以讓你一次規劃你的一周或一天,決定你的行動計劃,並以更有目的的方式度過你的一天。 > *一個好的經驗法則是**預訂比您認為完成任務所需的時間更多的時間**。我們往往會低估任務所需的時間。如果任務執行時間比預期長,請劃掉即將到來的任務並相應地修改時間表。* 如果你有一系列小任務,請將它們捆綁起來並在指定的時間段內執行。如果您知道需要與其他人就某個主題進行協作,請劃出專門用於溝通的時間,並盡力在指定時間內完成所有工作。這樣,您就可以在處理需要高度專注的專案時關閉通知並減少干擾。 紐波特先生是時間劃分的大力支持者,甚至有一個[時間劃分規劃器,您可以購買](https://www.timeblockplanner.com/)來追蹤四個月的工作量。當然,你不需要它來開始限制自己的時間,但是為此目的準備一本專門的日記可能會很方便。該雜誌還提供了關於如何充分利用這種組織工作方法的更深入的指南。 ![時間阻礙者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h33bqu5qvvgnc42u6pa2.png) 我喜歡在我的時間規劃器中加入一個附加層,將其與線上[番茄計時器](https://pomofocus.io/)配對。我將每個時間段與相同持續時間的番茄鐘相匹配。在番茄工作期間,不允許有任何干擾。在此期間只能完成在計劃表中指定的任務。 ### 減少會議 對我們大多數人來說,我們在開會時沒有選擇的自由。但是,我們可以建議每周至少一次無會議日。如果我們發現會議經常超出規定的時間,我們可以提倡更加註意每個人的時間。推動會議準備工作是影響我們參加的會議長度的另一種方式。 大多數人同樣對會議感到不知所措,並且會欣賞會議的減少,只要工作和協作的品質不受影響。 ### 狀態更新、通知阻止和電話限制 大多數 IM 平台(例如 Slack、Discord)甚至桌面和行動裝置都具有狀態模式。**使用這些狀態模式與其他人溝通,無論您是否可以進行同步交互,或者是否正在進行深度工作會話。** 額外的好處是,這些狀態模式還可以阻止或修改通知設置,減少甚至完全消除 ping 噪音和彈出視窗。打破深度專注時間的成本很高,因此不要因為無法始終 100% 進行即時互動而感到難過。 ![不和諧截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf7ap1x23czmb5hy1m86.png) 如果您仍然不確定是否要應用如此嚴格的限制,請考慮發表在《自然》雜誌上的這項研究的結果,該研究發現行動裝置的簡單存在會降低基礎注意力表現。 ### 追蹤個人指標 除非您追蹤一些個人關鍵指標,否則很難知道您是否發揮了自己的潛力,或者是否在您關心的方面取得了進展。 **我認為追蹤有用的指標包括:** - 鍛鍊身體(我那天沒有運動嗎)。 - 工作時間很深。 - 健康飲食。 - 我是否執行了關機程序? ![個人指標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvt4ukbopre2fjf4bhxj.png) ### 有一個關機儀式 認知能力是一種有限的資源。就像我們的身體一樣,它需要時間來恢復和補充能量,尤其是在高度專注的富有成效的工作日之後。由於通知或出於習慣,您可能會想查看電子郵件、檢查某些 KPI,或跟進未完成的話題或無法完全完成的煩人任務。 透過關閉例程,您可以執行一些任務來評估白天完成的工作。如果有任何未完成的執行緒或任務需要延續到第二天,關閉例程就是解決它們的時間。一些可能的關閉例行任務可能是: - 檢查電子郵件。 - 檢查通知。 - 更新門票。 - 與隊友溝通。 - 檢查並記錄任何未完成的任務。 - 加入明天要考慮的任務或想法。 - 最後一次檢查 KPI 和指標。 - 更新個人指標。 ### 安排專心思考的時間 這可能是我個人最難應用的技巧之一,因為我經常以「了解情況」或只是「好奇」為幌子,證明不斷消費播客和有聲讀物是合理的。事實是,有這麼多有趣且相關的內容,我們面臨著不斷消費資訊的風險。這種做法可能會適得其反,無法保持高度的專注力。如果您不斷地消費內容,那麼實際處理您所接受的內容的時間就會減少。 **對我來說,安排不分心的思考時間意味著改變這些行為:** - 不聽任何聲音就做飯 - 每週幾次不戴耳機去雜貨店購物 - 淋浴時揚聲器不會發出轟鳴聲 - 浴室裡沒有電話,就此而言 不要誤會我的意思,消費優質內容是有時間和地點的。我永遠不會停止聽播客或有聲讀物,但我會更加註意讓我的大腦不間斷地思考。 ### ChatGPT 真的很擅長解釋事情 我們都知道周遭的人對我們的影響有多大。希望您在職業生涯中能夠擁有與才華橫溢、經驗豐富的高級工程師一起工作的經驗,並向他們學習。 ChatGPT 是一位資深工程師,他總是坐在您旁邊,隨時準備幫助您了解手邊的問題。 **請注意,我建議將 ChatGPT 視為高級隊友,而不是私人助理。**您不會要求高階團隊成員為您做這項工作,相反,如果您對某些主題缺乏理解,您會要求解釋。 當然,請注意,目前 LLMs 的最新技術仍然容易產生幻覺,因此您不應該將其輸出帶到銀行。然而,使用 LLMs 作為工具來解決複雜的概念並獲得更深入的理解是老一輩只能夢想的作弊程式碼。 ### 結論 如果我是一名年輕的初級工程師,現在開始我的職業生涯,我可能會對外界的許多相互矛盾的訊號感到不安。**人工智慧會搶走我的工作嗎?怎麼樣才能在眾多才華洋溢的後起之秀中脫穎而出?我怎樣才能保持我的技能敏銳和相關?**如果你有這些充滿焦慮的想法,沒關係。感到不確定是完全合理的,相信我,你並不是唯一一個事後對自己的職業決定進行猜測的人。 沒有人知道十年後、五年後、甚至一年後科技領域會是什麼樣子。既然我們無法控制未來,那就專注於你能控制的事情。受加州紐波特原則的啟發,應對不確定性最接近的解藥就是自我投資。 **你就是你最大的資產。**您完成高品質工作的能力將使您在工作場所保持相關性。高品質的工作需要理解認知努力是有限的。這不是一蹴可幾的事情,分心會削弱你集中註意力的能力。不良的認知習慣會讓你完全失去前進的動力。 退後一步,深吸一口氣,想像一個長期、不斷發展的職業生涯。請記住,沒有哪一天是特別重要的。工作節奏應優先考慮理解和建設性思維,而不是簡單地完成任務。**您建立的系統和您選擇保護的優先事項將為您將來自豪的職業生涯奠定基礎。** --- 幫助我們製作更多這樣的內容! -------------- 在[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/standout-as-a-junior-engineer-work-slower-to-grow-faster-4ac3

TypeScript 專案的自訂實用程式類型

在我們探索 TypeScript 開發的第二部分中,我們引入了另外十種自訂實用程式類型,這些類型可以擴展程式碼的功能,提供更多工具來更有效地管理類型。這些實用程式類型有助於保持您的程式碼庫乾淨、高效和健壯。 第一部分: [TypeScript 專案的 1-10 個自訂實用程式類型](https://dev.to/antonzo/10-sustom-utility-types-for-typescript-projects-48pe) 總有機碳 ---- - [不可空深](#NonNullableDeep) - [合併](#Merge) - [元組到物件](#TupleToObject) - [獨佔元組](#ExclusiveTuple) - [Promise類型](#PromiseType) - [省略方法](#OmitMethods) - [函數參數](#FunctionArguments) - [承諾](#Promisify) - [約束函數](#ConstrainedFunction) - [聯合解析器](#UnionResolver) <a name="NonNullableDeep"></a> `NonNullableDeep` ----------------- `NonNullableDeep`類型是一個實用程序,可從給定類型`T`的所有屬性中深度刪除`null`和`undefined` 。這意味著不僅物件的頂級屬性不可為空,而且所有嵌套屬性也遞歸地標記為不可為空。在必須確保物件的屬性(包括深度嵌套的屬性)不為`null`或`undefined`情況下(例如在處理必須完全填充的資料時),此類型特別有用。 ``` type NonNullableDeep<T> = { [P in keyof T]: NonNullable<T[P]> extends object ? NonNullableDeep<NonNullable<T[P]>> : NonNullable<T[P]>; }; ``` **例子** 以下範例示範如何套用`NonNullableDeep`類型來確保`Person`物件本身及其任何巢狀屬性都無法為`null`或`undefined` ,從而確保整個物件已完全填入。 ``` interface Address { street: string | null; city: string | null; } interface Person { name: string | null; age: number | null; address: Address | null; } const person: NonNullableDeep<Person> = { name: "Anton Zamay", age: 26, address: { street: "Secret Street 123", city: "Berlin", }, }; // Error: Type 'null' is not assignable to type 'string'. person.name = null; // Error: Type 'undefined' is not assignable to type 'number'. person.age = undefined; // Error: Type 'null' is not assignable to type 'Address'. person.address = null; // Error: Type 'null' is not assignable to type 'string'. person.address.city = null; ``` <a name="Merge"></a> `Merge` ------- `Merge<O1, O2>`類型對於透過組合兩個物件類型`O1`和`O2`的屬性來建立新類型非常有用。當屬性重疊時, `O2`中的屬性將覆寫`O1`中的屬性。當您需要擴展或自訂現有類型以確保特定屬性優先時,這特別有用。 ``` type Merge<O1, O2> = O2 & Omit<O1, keyof O2>; ``` **例子** 在此範例中,我們定義了兩種物件類型,分別表示預設設定和使用者設定。使用`Merge`類型,我們組合這些設定來建立最終配置,其中`userSettings`會覆蓋`defaultSettings` 。 ``` type DefaultSettings = { theme: string; notifications: boolean; autoSave: boolean; }; type UserSettings = { theme: string; notifications: string[]; debugMode?: boolean; }; const defaultSettings: DefaultSettings = { theme: "light", notifications: true, autoSave: true, }; const userSettings: UserSettings = { theme: "dark", notifications: ["Warning 1", "Error 1", "Warning 2"], debugMode: true, }; type FinalSettings = Merge<DefaultSettings, UserSettings>; const finalSettings: FinalSettings = { ...defaultSettings, ...userSettings }; ``` <a name="TupleToObject"></a> `TupleToObject` --------------- `TupleToObject`類型是將元組類型轉換為物件類型的實用程序,其中元組的元素成為物件的鍵,並根據這些元素在元組中的位置提取關聯的值。這種類型在需要將元組轉換為更結構化的物件形式的情況下特別有用,允許透過元素的名稱而不是位置更直接地存取元素。 ``` type TupleToObject<T extends [string, any][]> = { [P in T[number][0]]: Extract<T[number], [P, any]>[1]; }; ``` **例子** 考慮這樣一個場景,您正在使用將表架構資訊儲存為元組的資料庫。每個元組包含一個欄位名稱及其對應的資料類型。這種格式通常用於資料庫元資料 API 或架構遷移工具。元組格式緊湊且易於處理,但對於應用程式開發來說,使用物件更方便。 ``` type SchemaTuple = [ ['id', 'number'], ['name', 'string'], ['email', 'string'], ['isActive', 'boolean'] ]; const tableSchema: SchemaTuple = [ ['id', 'number'], ['name', 'string'], ['email', 'string'], ['isActive', 'boolean'], ]; // Define the type of the transformed schema object type TupleToObject<T extends [string, string | number | boolean][]> = { [P in T[number][0]]: Extract< T[number], [P, any] >[1]; }; type SchemaObject = TupleToObject<SchemaTuple>; const schema: SchemaObject = tableSchema.reduce( (obj, [key, value]) => { obj[key] = value; return obj; }, {} as SchemaObject ); // Now you can use the schema object console.log(schema.id); // Output: number console.log(schema.name); // Output: string console.log(schema.email); // Output: string console.log(schema.isActive); // Output: boolean ``` <a name="ExclusiveTuple"></a> `ExclusiveTuple` ---------------- `ExclusiveTuple`類型是一個實用程序,它產生包含來自給定聯合類型`T`的唯一元素的元組。此類型確保聯合的每個元素僅在結果元組中包含一次,從而有效地將聯合類型轉換為具有聯合元素的所有可能的唯一排列的元組類型。這在您需要枚舉聯合成員的所有唯一組合的情況下特別有用。 ``` type ExclusiveTuple<T, U extends any[] = []> = T extends any ? Exclude<T, U[number]> extends infer V ? [V, ...ExclusiveTuple<Exclude<T, V>, [V, ...U]>] : [] : []; ``` **例子** 考慮這樣一個場景:您正在開發一個旅行應用程式的功能,該功能可以為遊覽某個城市的遊客產生獨特的行程。該市有三個主要景點:博物館、公園和劇院。 ``` type Attraction = 'Museum' | 'Park' | 'Theater'; type Itineraries = ExclusiveTuple<Attraction>; // The Itineraries type will be equivalent to: // type Itineraries = // ['Museum', 'Park', 'Theater'] | // ['Museum', 'Theater', 'Park'] | // ['Park', 'Museum', 'Theater'] | // ['Park', 'Theater', 'Museum'] | // ['Theater', 'Museum', 'Park'] | // ['Theater', 'Park', 'Museum']; ``` <a name="PromiseType"></a> `PromiseType` ------------- `PromiseType`類型是一個實用程序,用於提取給定 Promise 解析為的值的類型。這在使用非同步程式碼時非常有用,因為它允許開發人員輕鬆推斷結果的類型,而無需明確指定它。 ``` type PromiseType<T> = T extends Promise<infer U> ? U : never; ``` 此類型使用 TypeScript 的條件類型和`infer`關鍵字來決定`Promise`的解析類型。如果`T`擴展`Promise<U>` ,則表示`T`是解析為類型`U` `Promise` ,而`U`是推斷的類型。如果`T`不是`Promise` ,則型別解析為`never` 。 **例子** 以下範例示範如何使用 PromiseType 類型從 Promise 中提取已解析的類型。透過使用此實用程式類型,您可以推斷 Promise 將解析為的值的類型,這有助於在處理非同步操作時進行類型檢查並避免錯誤。 ``` type PromiseType<T> = T extends Promise<infer U> ? U : never; interface User { id: number; name: string; } interface Post { id: number; title: string; content: string; userId: number; } async function fetchUser(userId: number): Promise<User> { return { id: userId, name: "Anton Zamay" }; } async function fetchPostsByUser(userId: number): Promise<Post[]> { return [ { id: 1, title: "Using the Singleton Pattern in React", content: "Content 1", userId }, { id: 2, title: "Hoisting of Variables, Functions, Classes, Types, " + "Interfaces in JavaScript/TypeScript", content: "Content 2", userId }, ]; } async function getUserWithPosts( userId: number ): Promise<{ user: User; posts: Post[] }> { const user = await fetchUser(userId); const posts = await fetchPostsByUser(userId); return { user, posts }; } // Using PromiseType to infer the resolved types type UserType = PromiseType<ReturnType<typeof fetchUser>>; type PostsType = PromiseType<ReturnType<typeof fetchPostsByUser>>; type UserWithPostsType = PromiseType<ReturnType<typeof getUserWithPosts>>; async function exampleUsage() { const userWithPosts: UserWithPostsType = await getUserWithPosts(1); // The following will be type-checked to ensure correctness const userName: UserType["name"] = userWithPosts.user.name; const firstPostTitle: PostsType[0]["title"] = userWithPosts.posts[0].title; console.log(userName); // Anton Zamay console.log(firstPostTitle); // Using the Singleton Pattern in React } exampleUsage(); ``` **為什麼我們需要`UserType`而不僅僅是使用`User` ?** 這是個好問題!使用`UserType`而不是直接使用`User`主要原因是為了確保從非同步函數的回傳類型準確推斷出類型。這種方法有幾個優點: 1. **類型一致性:**透過使用`UserType` ,您可以確保類型始終與`fetchUser`函數的實際回傳類型一致。如果`fetchUser`的回傳類型發生更改, `UserType`將自動反映該更改,而無需手動更新。 2. **自動類型推斷**:在處理複雜類型和巢狀承諾時,手動確定和追蹤解析的類型可能具有挑戰性。使用 PromiseType 允許 TypeScript 為您推斷這些類型,從而降低錯誤風險。 <a name="OmitMethods"></a> `OmitMethods` ------------- `OmitMethods`型別是個實用程序,可從給定型別`T`中刪除所有方法屬性。這意味著作為函數的類型`T`的任何屬性都將被省略,從而產生僅包含非函數屬性的新類型。 ``` type OmitMethods<T> = Pick<T, { [K in keyof T]: T[K] extends Function ? never : K }[keyof T]>; ``` **例子** 此類型在您想要從物件類型中排除方法的情況下特別有用,例如將物件序列化為 JSON 或透過 API 發送物件時,其中方法不相關且不應包含在內。以下範例示範如何將`OmitMethods`套用至物件類型以刪除所有方法,確保產生的類型僅包含非函數的屬性。 ``` interface User { id: number; name: string; age: number; greet(): void; updateAge(newAge: number): void; } const user: OmitMethods<User> = { id: 1, name: "Alice", age: 30, // greet and updateAge methods are omitted from this type }; function sendUserData(userData: OmitMethods<User>) { // API call to send user data console.log("Sending user data:", JSON.stringify(userData)); } sendUserData(user); ``` <a name="FunctionArguments"></a> `FunctionArguments` ------------------- `FunctionArguments`類型是一個實用程序,用於提取給定函數類型`T`的參數類型。這意味著對於傳遞給它的任何函數類型,該類型將傳回一個表示函數參數類型的元組。此類型在需要捕獲或操作函數的參數類型的情況下特別有用,例如在高階函數中或建立類型安全的事件處理程序時。 ``` type FunctionArguments<T> = T extends (...args: infer A) => any ? A : never; ``` **例子** 假設您有一個高階函數包裝,它接受一個函數及其參數,然後使用這些參數來呼叫該函數。使用 FunctionArguments,您可以確保包裝函數參數的類型安全。 ``` function wrap<T extends (...args: any[]) => any>(fn: T, ...args: FunctionArguments<T>): ReturnType<T> { return fn(...args); } function add(a: number, b: number): number { return a + b; } type AddArgs = FunctionArguments<typeof add>; // AddArgs will be of type [number, number] const result = wrap(add, 5, 10); // result is 15, and types are checked ``` <a name="Promisify"></a> `Promisify` ----------- `Promisify`類型是一個實用程序,它將給定類型`T`的所有屬性轉換為各自類型的 Promise。這意味著結果類型中的每個屬性都將是該屬性的原始類型的`Promise` 。這種類型在處理非同步操作時特別有用,您希望確保整個結構符合基於`Promise`的方法,從而更輕鬆地處理和管理非同步資料。 ``` type Promisify<T> = { [P in keyof T]: Promise<T[P]> }; ``` **例子** 考慮一個顯示使用者個人資料、最近活動和設定的儀表板。這些資訊可能是從不同的服務獲取的。透過承諾單獨的屬性,我們確保使用者資料的每個部分都可以獨立取得、解析和處理,從而在處理非同步操作時提供靈活性和效率。 ``` interface Profile { name: string; age: number; email: string; } interface Activity { lastLogin: Date; recentActions: string[]; } interface Settings { theme: string; notifications: boolean; } interface UserData { profile: Profile; activity: Activity; settings: Settings; } // Promisify Utility Type type Promisify<T> = { [P in keyof T]: Promise<T[P]>; }; // Simulated Fetch Functions const fetchProfile = (): Promise<Profile> => Promise.resolve({ name: "Anton Zamay", age: 26, email: "[email protected]" }); const fetchActivity = (): Promise<Activity> => Promise.resolve({ lastLogin: new Date(), recentActions: ["logged in", "viewed dashboard"], }); const fetchSettings = (): Promise<Settings> => Promise.resolve({ theme: "dark", notifications: true }); // Fetching User Data const fetchUserData = async (): Promise<Promisify<UserData>> => { return { profile: fetchProfile(), activity: fetchActivity(), settings: fetchSettings(), }; }; // Using Promisified User Data const displayUserData = async () => { const user = await fetchUserData(); // Handling promises for each property (might be in different places) const profile = await user.profile; const activity = await user.activity; const settings = await user.settings; console.log(`Name: ${profile.name}`); console.log(`Last Login: ${activity.lastLogin}`); console.log(`Theme: ${settings.theme}`); }; displayUserData(); ``` <a name="ConstrainedFunction"></a> `ConstrainedFunction` --------------------- `ConstrainedFunction`類型是一個實用程序,它約束給定的函數類型 T 以確保保留其參數和傳回類型。它本質上捕獲函數的參數類型和返回類型,並強制結果函數類型必須遵守這些推斷類型。當您需要對高階函數實施嚴格的類型約束或建立必須符合原始函數簽署的包裝函數時,此類型非常有用。 ``` type ConstrainedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? (args: A extends any[] ? A : never) => R : never; ``` **例子** 在事先未知函數簽署且必須動態推斷的情況下, `ConstrainedFunction`可確保根據推斷的類型正確應用約束。想像一個實用程序,它包裝任何函數以記憶其結果: ``` function memoize<T extends (...args: any) => any>(fn: T): ConstrainedFunction<T> { const cache = new Map<string, ReturnType<T>>(); return ((...args: Parameters<T>) => { const key = JSON.stringify(args); if (!cache.has(key)) { cache.set(key, fn(...args)); } return cache.get(key)!; }) as ConstrainedFunction<T>; } const greet: Greet = (name, age) => { return `Hello, my name is ${name} and I am ${age} years old.`; }; const memoizedGreet = memoize(greet); const message1 = memoizedGreet("Anton Zamay", 26); // Calculates and caches const message2 = memoizedGreet("Anton Zamay", 26); // Retrieves from cache ``` 在這裡, `memoize`使用`ConstrainedFunction`來確保記憶函數保持與原始函數`fn`相同的簽名,而不需要明確定義函數類型。 <a name="UnionResolver"></a> `UnionResolver` --------------- `UnionResolver`類型是將聯合型別轉換為可區分聯合的實用程式。具體來說,對於給定的聯合類型`T` ,它會產生一個物件陣列,其中每個物件都包含一個屬性類型,該屬性類型保存聯合中的類型之一。在需要明確處理聯合的每個成員的情況下使用聯合類型時,此類型特別有用,例如在類型安全的 Redux 操作或 TypeScript 中的可區分聯合模式中。 ``` type UnionResolver<T> = T extends infer U ? { type: U }[] : never; ``` **例子** 以下範例示範如何應用`UnionResolver`類型將聯合類型轉換為物件陣列,每個物件都具有`type`屬性。這允許對聯合內的每個操作進行類型安全處理,確保考慮到所有情況並降低使用聯合類型時發生錯誤的風險。 ``` type ActionType = "ADD_TODO" | "REMOVE_TODO" | "UPDATE_TODO"; type ResolvedActions = UnionResolver<ActionType>; // The resulting type will be: // { // type: "ADD_TODO"; // }[] | { // type: "REMOVE_TODO"; // }[] | { // type: "UPDATE_TODO"; // }[] const actions: ResolvedActions = [ { type: "ADD_TODO" }, { type: "REMOVE_TODO" }, { type: "UPDATE_TODO" }, ]; // Now you can handle each action type distinctly actions.forEach(action => { switch (action.type) { case "ADD_TODO": console.log("Adding a todo"); break; case "REMOVE_TODO": console.log("Removing a todo"); break; case "UPDATE_TODO": console.log("Updating a todo"); break; } }); ``` --- 原文出處:https://dev.to/antonzo/11-20-sustom-utility-types-for-typescript-projects-2bg5

適用於 React 和 NodeJS 的最佳免費開源 SaaS 模板

展示開放 SaaS 🎉 ----------- 我們非常高興推出[Open SaaS](https://opensaas.sh) ,這是適用於 React、NodeJS 和 Prisma 的完全免費、開源、生產級 SaaS 樣板。 在這裡查看它的實際效果: https://www.youtube.com/watch?v=rfO5SbLfyFE Open SaaS 擁有您最近看到的那些付費 SaaS 入門者的所有功能,除了它完全**免費**且**開源**。 **我們覺得為一些需要自己管理的樣板程式碼支付 300-2,000 美元是瘋狂的**。最重要的是,許多樣板文件嚴重依賴第三方服務。再加上託管和其他費用,您需要花費大量資金才能將您的想法推向世界。 **這就是為什麼透過開放 SaaS,我們有意識地決定盡可能嘗試使用開源和免費服務。**例如,我們在[OpenSaaS.sh](http://OpenSaaS.sh)上託管的演示應用程式及其管理儀表板由 Plausible 分析的自架版本提供支援。希望您的 SaaS 具有相同的功能嗎?那麼,Open SaaS 已為您預先配置好! 此外,Open SaaS 使用的[Wasp 框架](https://wasp.sh)可以為您建立許多功能,例如 Auth 和 Cron 作業,這樣您就不必支付第三方服務費用或完全自己編寫程式碼(我們稍後會更詳細地解釋這一點)。 人們已經在使用開放 SaaS 建置什麼... ---------------------- 自正式發布以來,已有大量人員使用 Open SaaS 建立了令人驚嘆的應用程式並推出了超級創意業務。因此,我們首先要強調其中的一些內容。 以下是我們社區中一些應用程式的精選清單: 1. [Solon](https://trysolon.co) :Instagram/whatsapp 賣家的人工智慧銷售代理,幫助客戶探索產品。 ![梭倫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j32pl4a078c587jffsin.png) 2. [Captn.ai](https://captn.ai) :人工智慧代理團隊協作,自動建立、監控和優化 Google Ads 廣告活動。 ![船長](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzygxmy4iu1yi9r758nc.png) 3. [Bleepify](https://bleepify.me) :在人工智慧的幫助下,自動配音或立即從影片中刪除某些單字。對於快速使 YouTube 影片符合其行為準則非常有幫助。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqdqbvjwvfpv2rmmaypn.png) 4. [取得 AI 部落格文章](https://getaiblogarticles.com/):以 Markdown 格式提供的高品質、專注於 SEO 的部落格文章產生器 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qyzpg3gbipgyuy7g6lh.png) 如果上面的這些範例還沒有激發您的建造靈感,請繼續閱讀下面的內容,我們將討論為什麼建立開源 SaaS 模板、我們使用的堆疊以及它的工作原理。 為什麼我們要建造它......然後免費贈送它 ---------------------- 自從我們正式發布以來,反饋非常積極。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/subbtpb2syehdtuuof0r.png) 很多人對它讚不絕口,並且已經用它建置了許多 SaaS 應用程式,但我們也收到了一些問題,例如: - “它會保持免費嗎?” - “您開源這個的動機是什麼?” 所以我們認為我們應該先回答這些問題。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rac9o1rxgrwfx51mc50.png) 首先,是的,它是 100% 免費和開源的,並將保持這種狀態。 其次,我們相信,開發者、獨立駭客和個人企業家社群的集體知識將比個人或小團體產生更好的樣板。當您從某些開發人員那裡購買SaaS 入門版時,您已經獲得了一個固執己見的堆棧,然後除此之外,您還獲得了按照他們認為最好的方式建置的應用程式- 但這可能並不總是最適合*您。* 第三, [Open SaaS](https://opensaas.sh)是[Wasp](https://wasp.sh)的一個專案,一個超強的開源React + NodeJS + Prisma全端框架。我們 Wasp 團隊相信 Wasp 非常適合快速且有效率地建立 SaaS 應用程式,我們希望這個模板能夠證明這一點。另外,身為開發人員,我們從其他開源專案中學到了很多東西,而 Wasp 本身就是一個開源專案。 基本上,我們熱愛開源理念,並且希望將其發揚光大。 🙏 因此,我們希望能夠為開發者社群提供非常有價值的資產,同時宣傳我們的開源全端框架。我們很高興看到社區為其做出貢獻,以便它不斷發展並成為最好的 SaaS 樣板。 開放 SaaS 是由什麼組成的 --------------- 我們在 Open SaaS 上投入了大量的精力,包括[文件](https://docs.opensaas.sh),以便開發人員可以自信、輕鬆地啟動 SaaS 應用程式。 我們還花了一些時間檢查其他免費的開源 SaaS 啟動器,並希望確保 Open SaaS 具有可立即投入生產的啟動器的所有正確功能,而不顯得臃腫。我們認為我們已經在很大程度上實現了這一點,儘管我們將繼續加入功能並隨著時間的推移進行改進。 目前的主要特點如下: - 🔐 身份驗證(電子郵件驗證、Google、github) - 📩 電子郵件(sendgrid、emailgun、SMTP) - 📈 管理儀表板(合理或谷歌分析) - 🤑 Stripe 付款(只需加入您的訂閱產品 ID) - ⌨️ 端對端類型安全性(無需配置) - 🤖 OpenAI 整合(AI 驅動的範例應用程式) - 📖 Astro 博客 - 🧪 與劇作家進行端到端測試 - 🚀 部署在任何地方 - 📄 完整的文件和社群支持 值得深入了解其中每個功能的細節,所以讓我們開始吧。 ### 授權 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbistoghxrxft9zxxra1.png)](https://www.producthunt.com/posts/open-saas) 感謝 Wasp,Open SaaS 附帶了許多可能的身份驗證方法: - 使用者名稱和密碼(最簡單/最容易進行開發測試) - 已驗證電子郵件並重設密碼 - Google 和/或 Github 社群登入 這就是 Wasp 真正發揮作用的地方,因為設定全端 Auth 並取得預先配置的 UI 元件所需要做的就是: ``` //main.wasp app SaaSTemplate { auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, gitHub: {}, } } } ``` 嚴重地。就是這樣! 只需確保您已設定社交身份驗證並擁有 API 金鑰以及定義的`User`和`ExternalAuth`實體,就可以開始了。不用擔心,這部分內容已在[Open SaaS Docs](https://docs.opensaas.sh)中詳細記錄和解釋。 最重要的是,Open SaaS 預先配置了一些範例,說明如何自訂和建立一些真正強大的身份驗證流程。 ### 管理儀表板和分析 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mm6s1c3txxgm49e2k7w.png)](https://www.producthunt.com/posts/open-saas) 透過利用[Wasp 的工作功能](https://wasp-lang.dev/docs/advanced/jobs),Open SaaS 每小時從 Plausible 或 Google 的網站分析(您的選擇!)和 Stripe 的資料 API 中提取資料,並將其保存到我們的資料庫中。然後,該資料將顯示在我們的管理儀表板上(前往[OpenSaaS.sh](https://OpenSaaS.sh)查看其實際情況)。好的部分是,要為您自己的應用程式存取這些資料,您所要做的就是按照我們的指南獲取分析 API 金鑰,插入提供的腳本,然後就可以開始了! 再次強調,Wasp 讓整個過程變得非常簡單。透過已經為您定義的查詢 API 和取得我們需要的資料的功能,Open SaaS 然後在`main.wasp`設定檔中使用 Wasp 作業: ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@server/workers/calculateDailyStats.js" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 就是這樣! Wasp 負責為您設定和執行 cron 作業。 ### 條紋支付 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugy3mx9xo1d9i9vfysr7.png)](https://www.producthunt.com/posts/open-saas) 如果您是以前從未建立過自己的 SaaS 的開發人員,那麼與 Stripe 這樣的支付處理器整合可能是您將面臨的少數挑戰之一。 當我建立第一個 SaaS [CoverLetterGPT.xyz](https://coverlettergpt.xyz)時,我的情況就是如此。這實際上是我建造它的主要動機之一;了解如何將 Stripe 支付整合到應用程式以及 OpenAI API 中。 儘管 Stripe 因擁有豐富的文件而聞名,但這個過程仍然令人畏懼。你必須: - 建立正確的產品類型 - 設定 webhook 端點 - 告訴 Stripe 將正確的 Webhook 事件傳送給您 - 正確使用事件 - 處理重複付款和失敗付款 - 在上線之前透過 CLI 進行正確測試 這就是為什麼為您設定 Stripe 訂閱付款是一個巨大的勝利。 但比這更重要的是,為您方便地記錄整個過程!這就是為什麼 Open SaaS[在我們的文件中為您提供方便的 Stripe 指南](https://docs.opensaas.sh)🙂 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uehwot350u3dl02s4w7r.png)](https://www.producthunt.com/posts/open-saas) ### 端對端類型安全 Open SaaS 是使用 Typescript 建置的,因為它是一個全棧應用程式,所以從後端到前端的類型安全可以成為真正的救星。我的意思是,一些[固執己見的堆疊](https://create.t3.gg/)在此基礎上變得非常流行。 幸運的是,Wasp 為您提供開箱即用的端到端類型安全性(無需配置!),因此 Open SaaS 可以輕鬆利用它。 這是一個例子: 1. 讓 Wasp 了解您的伺服器操作: ``` // main.wasp action getResponse { fn: import { getResponse } from "@server/actions.js", entities: [Response] } ``` 2. 輸入並實施您的伺服器操作。 ``` // src/srever/actions.ts type RespArgs = { hours: string; }; const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { } ``` 3. 導入並在客戶端呼叫。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fah81r1g4bg3vdqapju.png) 客戶端類型將被正確推斷! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n04yh6de9slhhnjrgf3.png) ### AI 驅動的範例應用程式(附有 OpenAI API) [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbbc2gkxbxjl3q2y01a3.png)](https://www.producthunt.com/posts/open-saas) 人工智慧正在使新的應用程式創意成為可能,這也是我們看到開發人員對建立 SaaS 應用程式的興趣重新抬頭的部分原因。正如我上面提到的,我建造的第一個 SaaS 應用程式[CoverLetterGPT](https://coverlettergpt.xyz)是「GPT 包裝器」之一,我很自豪地說它帶來了約350 美元MRR(每月經常性收入)的可觀被動收入。 我個人認為,我們在軟體開發方面處於最佳狀態,開發新的、有利可圖的人工智慧應用程式有很大的潛力,尤其是「獨立駭客」和「個人企業家」。 這就是 Open SaaS 推出 AI 調度助手演示應用程式的原因。您輸入任務及其分配的時間,AI Scheduler 會為您的一天建立詳細的計劃。 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4suf7g9jm5w93ri3bqx.png)](https://www.producthunt.com/posts/open-saas) 在幕後,這是使用 OpenAI 的 API 為每個任務分配優先級,並將它們分解為詳細的子任務,包括喝咖啡休息時間!它還利用 OpenAI 的函數呼叫功能以使用者定義的 JSON 物件回傳回應,以便客戶端每次都能正確使用它。此外,我們計劃在未來加入開源法學碩士,敬請期待! 示範版 AI Scheduler 可協助開發人員學習如何有效使用 OpenAI API,並激發一些 SaaS 應用程式創意! ### 隨處部署。容易地。 許多流行的 SaaS 新創公司都使用依賴託管的框架,這意味著您只能依賴一個提供者進行部署。雖然這些都是簡單的選擇,但它可能並不總是最適合您的應用程式。 Wasp 為您提供了部署全端應用程式的無限可能性: - 使用`wasp deploy`一鍵部署到[Fly.io](http://Fly.io) - 使用`wasp build`並部署 Dockerfiles 和客戶端,無論您喜歡什麼! `wasp deploy`的優點在於它會自動產生和部署您的資料庫、伺服器和用戶端,並為您設定環境變數。 Open SaaS 還內建了環境變數和常數驗證器,以確保您已正確設定部署所需的所有內容,以及文件中的部署指南 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fihbij250xtbdtjbjoks.png)](https://www.producthunt.com/posts/open-saas) 最後,您擁有自己的程式碼,並且可以自由地將其部署到任何地方,而無需受供應商鎖定。 幫助我們,幫助你 -------- 想支持我們的免費開源計畫嗎?然後[在 GitHub 上為我們加註星標以向](https://github.com/wasp-lang/open-saas/)我們表示支持🙏 ![https://media1.giphy.com/media/ZfK4cXKJTTay1Ava29/giphy.gif?cid=7941fdc6pmqo30ll0e4rzdiisbtagx97sx5t0znx4lk0auju&ep=v1_gifs_searchx97sx5t0znx4lk0auju&ep=v1_gifs_search}&ridgi.](https://media1.giphy.com/media/ZfK4cXKJTTay1Ava29/giphy.gif?cid=7941fdc6pmqo30ll0e4rzdiisbtagx97sx5t0znx4lk0auju&ep=v1_gifs_search&rid=giphy.gif&ct=g) <https://www.github.com/wasp-lang/wasp> ⭐️ 給 Open SaaS 一顆星 🙏 現在就開始建立您的 SaaS! --------------- 我們希望 Open SaaS 能夠讓更多的開發人員能夠發布他們的想法和副專案。我們也希望從開發人員那裡獲得一些回饋和意見,以便我們能夠使其成為最好的 SaaS 樣板啟動器。 因此,如果您有任何意見或發現任何錯誤,請[在此處提交問題](https://github.com/wasp-lang/open-saas/issues)。 如果您發現 Open SaaS 和/或 Wasp 很有用,最簡單的支援方法就是給我們一顆星: - 為[Open SaaS 儲存庫](https://github.com/wasp-lang/open-saas)加註星標 - 給[黃蜂倉庫](https://github.com/wasp-lang/wasp)加註星標 --- 原文出處:https://dev.to/wasp/the-best-free-open-source-saas-template-for-react-nodejs-263

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

在 React 中建立可重複使用元件:處理無限的未來變化

嗨夥計, 使用 React 時,建立可重複使用元件對於維護乾淨、可管理且可擴展的程式碼至關重要。一種經常需要具有適應性和靈活性的通用元件。在這篇文章中,我們將探討如何建立一個可重複使用的元件,該元件可以處理各種配置並適應未來的變化,而不會變得過於複雜。 **標題的變體** 讓我們考慮一個可能需要支援不同變體的標頭元件。以下是不同標題樣式的範例: ![UI/UX:具有變體的不同類型的標題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whq80q5wkg3ll2vrbu6i.png) **基本標頭元件** 典型的 React header 元件可能看起來像這樣,其中 props 用於有條件地渲染徽標、導航專案、搜尋列和購物車等元素。 ![React:基本標頭元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2um3c46mnm2x0jx9d4ro.png) 使用 props,開發人員可以如下設定標頭: ![React 程式碼:Props 元件重載](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdxblne9ugi12kq803e0.png) **用法:** ![React 程式碼:具有重載 props 的元件使用](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nr2x71gsbt6quklzbycz.png) **處理未來的變化** 現在,讓我們考慮一個需求改變的場景。標題需要包含其他元素,例如收藏夾部分、用戶帳戶詳細資訊以及帶有可顯示或隱藏的圖像和文字的頂部橫幅。如果我們繼續使用基於 prop 的方法,則該元件可能如下所示: ![反應程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg5s4qi0nbg7j5uiajsi.png) 正如您所看到的,如果有 10-15 個 props,這種方法很快就會變得笨拙。管理這樣一個包含大量 prop 的元件可能會導致程式碼變得繁瑣且容易出錯。 **使用複合元件** 為了解決這個問題,我們可以使用**複合元件**模式。這種方法允許父元件定義結構並讓子元件指定內容,從而實現更靈活和可讀的程式碼。 這是我們如何使用複合元件重構標頭元件的範例: **header.js** ![React 程式碼:複合模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg2xbj8yjl2v9k89uq03.png) **用法** ![React 程式碼:複合模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhwqml22fq2pvrk1mxcc.png) **複合元件的優點** **靈活性**:複合元件提供了更大的靈活性,因為它們允許您嵌套元件並將 props 直接傳遞到標頭的特定部分。 **可讀性**:結構更具可讀性並保持清晰的層次結構。 **可擴展性**:新增元件或修改現有元件變得更加容易,而不會使父元件過於複雜。 **可重複使用性**:標頭的每個部分都可以在不同的上下文或佈局中獨立地重複使用。 透過使用複合元件模式,我們確保標頭元件保持可管理性並能夠適應未來的變化,為複雜的 UI 需求提供強大的解決方案。 --- 原文出處:https://dev.to/nadeemkhanrtm/creating-a-reusable-component-in-react-handling-unlimited-future-changes-mgi

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

Node.js 最佳實務:開發人員指南

Nodejs 是一個用於建立快速且可擴展的 Web 應用程式的強大工具。然而,為了充分利用 Nodejs,遵循最佳實踐非常重要。在這篇文章中,我們將探討 Nodejs 開發的一些關鍵最佳實務。 1. 建構你的專案 --------- 結構良好的專案易於維護和擴展。這是一個您可以遵循的簡單結構: ``` my-node-app/ │ ├── src/ │ ├── controllers/ │ ├── models/ │ ├── routes/ │ └── services/ │ ├── tests/ │ ├── .env ├── .gitignore ├── package.json └── README.md ``` 解釋: - `src/`包含您的主要應用程式程式碼。 - `controllers/`處理您的應用程式的邏輯。 - `models/`定義您的資料結構。 - `routes/`管理 API 的不同端點。 - `services/`包含業務邏輯。 - `tests/`包含所有測試檔案。 - `.env`儲存您的環境變數 - `.gitignore`指定 GIT 中要忽略的檔案。 - `.package.json`追蹤依賴項和腳本。 - `README.md`描述了您的專案。 2.使用環境變數 -------- 環境變數有助於將配置設定保留在程式碼之外。這使您的應用程式更安全且更易於管理。 例子: 建立一個`.env`檔: ``` DB_HOST=localhost DB_USER=root DB_PASS=password ``` 使用`dotenv`包在程式碼中載入這些變數: ``` require('dotenv').config(); const dbHost = process.env.DB_HOST; const dbUser = process.env.DB_USER; const dbPass = process.env.DB_PASS; console.log(`Connecting to database at ${dbHost} with user ${dbUser}`); ``` 3.正確處理錯誤 -------- 正確處理錯誤可確保您的應用程式不會意外崩潰。 ``` app.get('/user/:id', async (req, res, next) => { try { const user = await getUserById(req.params.id); if (!user) { return res.status(404).send('User not found'); } res.send(user); } catch (error) { next(error); } }); app.use((err, req, res, next) => { console.error(err.stack); res.status(500).send('Something went wrong!'); }); ``` 4. 使用非同步程式碼 ----------- Nodejs 本質上是異步的。使用`async`和`await`更乾淨地處理非同步程式碼。 例子: ``` async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error fetching data:', error); } } fetchData(); ``` 5. 保持依賴關係更新 ----------- 定期更新您的依賴項,以確保您擁有最新的功能和安全性修復。 使用`npm outdated`檢查是否有過時的軟體包。 ``` npm outdated ``` 更新套件: ``` npm update ``` 6. 編寫測試 ------- 測試您的程式碼有助於及早發現錯誤並確保您的應用程式正常執行 正如預期的那樣。 例子: **第 1 步:安裝`Jest`** ``` npm install --save-dev jest ``` **第 2 步:編寫測試** 建立測試文件,例如, `tests/example.test.js` 。這是一個幫助您入門的簡單範例。 ``` const sum = (a, b) => a + b; test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); }); ``` 7. 使用 Linter ------------ Linters 可協助您編寫乾淨且一致的程式碼。 ESLint 是一個受歡迎的選擇。 例子: 安裝 ESLint: ``` npm install eslint --save-dev ``` 初始化 ESLint: ``` npx eslint --init ``` 將 lint 腳本加入`package.json` : ``` "scripts": { "lint": "eslint ." } ``` 執行短絨檢查: ``` npm run lint ``` 結論 -- 遵循這些最佳實踐將幫助您編寫更好、更易於維護的 Nodejs 應用程式。請記住建立您的專案、使用環境變數、正確處理錯誤、編寫非同步程式碼、保持依賴項更新、編寫測試並使用 linter。透過這樣做,您將建立健壯且高效的 Nodejs 應用程式,並且更易於管理和維護。 快樂編碼! --- 原文出處:https://dev.to/mehedihasan2810/nodejs-best-practices-a-guide-for-developers-4d65

什麼是 Webpack

Webpack 似乎令人難以承受,並且是您在建立 React 應用程式時可能會避免學習的東西。但為您的 React 應用程式自行設定和建立非常簡單。這將是 Webpack 及其*實際*功能的初學者指南。讓我們來解答您可能對 Webpack 有的任何疑問…哈哈… 我們將回顧: - **什麼是 Webpack?** - **如何配置 Webpack** - **Webpack 中的快取清除** #### Webpack 是什麼,它是如何運作的,它有什麼作用? 如果您熟悉 Create React App,那麼 Webpack 負責 Create React App 中的主要功能,以及 Babel(JS 編譯器)等其他一些功能。 Create React App 使用 Webpack 將檔案捆綁在一起,這就是為什麼使用 create React app 開發 React 應用程式非常簡單的原因。 Webpack 是一個模組捆綁器。但是,這是什麼意思?這意味著 Webpack 將 JS 文件編譯為一個主文件,或者您想要將程式碼捆綁到其中的任意多個文件,但通常它是一個捆綁文件。 Webpack 具有許多功能,例如模組捆綁、文件縮小(透過刪除空格、註解、不必要的程式碼以及最小化/縮短程式碼來最小化程式碼的過程。)、SASS 編譯等。應用程式轉換為瀏覽器可以理解的內容。 Webpack 管理依賴關係並載入需要先載入的程式碼。 Webpack 會追蹤哪些文件依賴哪些文件並相應地載入它們。 Webpack 解決的問題是,在開發大型應用程式時,您的依賴項可能會堆積並交叉不同的文件,這使其變得複雜且難以管理。 Webpack 為您管理所有這些依賴項和文件,將其捆綁到瀏覽器可以理解的純 JS 中。 #### 如何配置 Webpack 如果您想將載入程式和外掛程式新增至 Webpack 捆綁包中,則必須在 Webpack 設定檔中執行此操作。 這是 webpack 設定檔的樣子。 ``` //Webpack.config.js file: const path = require("path"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") } }; ``` 讓我們解開這個文件中發生的事情。 首先,我們將`mode`設定為`development` ,這告訴Webpack不要縮小我們的程式碼,這在開發時非常有幫助。 然後,如果我們想使用它,就必須確保該文件中的所有內容都作為模組導出。 在使用`npm init`初始化應用程式時建立的`package.json`檔案中,您可以告訴 Webpack 在`scripts`中執行,如下所示: ``` "scripts": { "start": "webpack --config webpack.config.js" }, //The webpack config file can be named anything, //In this case, it is webpack.config.js ``` 接下來, `entry`屬性接受整個應用程式執行位置的 src。預設情況下,Webpack 將在`src`資料夾中查找`index.js`文件,但您可以在此處指定應用程式啟動的文件以及需要捆綁的程式碼。 `output`屬性是一個物件,您希望在其中輸出程式碼。 `filename`屬性可以命名為您想要的任何名稱,通常是`main.js` 。 `path`屬性指定程式碼的去向。在本例中,我們正在解析`dist`目錄的絕對路徑,您可以將此資料夾稱為任何名稱。本質上,這是 Webpack 將捆綁您的應用程式的資料夾,傳統上該資料夾是`dist` 。 這是配置 Webpack 檔案以及如何讓 Webpack 執行您的應用程式的基礎知識。當然,您可以向此設定檔加入更多內容,例如載入程式和外掛程式。如果你對此有興趣,可以參考[Webpack文件](https://webpack.js.org/configuration/)。 #### Webpack 中的快取清除 快取清除一開始可能是一個令人困惑的話題,但它對於應用程式的功能以及可以在 Webpack 中輕鬆完成的事情可能很重要。 當您使用 Webpack 捆綁應用程式時,Webpack 會將所有內容捆綁在可部署的`/dist`目錄中。 將應用程式部署到伺服器後,並且用戶正在存取您的應用程式,客戶端(通常是瀏覽器)必須再次存取伺服器以檢索應用程式的所有資產。 這就是瀏覽器快取應用程式資源的原因。本質上,它們將文件或模組保存在`/dist`目錄中,以便用戶下次刷新或存取瀏覽器時不必檢索它已經記住的任何資產。 如何防止瀏覽器快取我們更改過的 CSS 或檔案包? 瀏覽器快取檔案可能會導致問題,因為如果我們更改已快取的文件,瀏覽器可能不會更新它們,並假設文件是相同的,因為檔案名稱沒有更改。 快取清除背後的想法是,我們希望每次對文件進行更改時都建立一個新的文件名,如果沒有進行更改,則保持文件名相同。這樣,當您對文件進行更改時,當客戶端向伺服器發出請求以檢索應用程式資產時,您更改的文件將更新,因為瀏覽器無法辨識文件名。 幸運的是,Webpack 在 Webpack 設定檔的`output.filename`中附帶了一個名為`[contenthash]`的內建替換功能。 `[contenthash]`替換將根據資產內容是否已變更建立唯一的雜湊值,僅在變更時更新。 當您將`[contenthash]`新增至設定檔中的輸出物件時,它將如下所示: ``` //the output object in module.exports from the webpack.config.js file: output: { filename: "main.[contentHash].js", path: path.resolve(__dirname, "dist") }, ``` **因此**,我希望 Webpack 的介紹易於理解,並回答了您可能對 Webpack 存在的一些問題。 Webpack 正在做很多幕後工作以使您的 React 應用程式正常工作,您所需要做的就是確保為您的應用程式正確配置它。下次您開發 React 應用程式時,請考慮自行設定 Webpack! --- 原文出處:https://dev.to/cs_carms/what-is-webpack-43h6

我製作了一個模擬手寫效果的專案🤓

大家好,希望大家都平安、一切順利! 我喜歡打字而不是寫作,大學要求我們手寫一些作業,我覺得很無聊。 因此,我沒有花 1 小時來寫作業,而是花了 3 小時來建立一個為我寫作業的工具🎉。它被稱為[文本到手寫](https://github.com/saurabhdaware/text-to-handwriting)(參見......我真的很擅長命名我的專案) 文字轉手寫將文字內容轉換為看起來像手寫的圖像。輸出如下圖所示: 輸出 -- ![從文字到手寫的輸出圖片,看起來非常接近手寫紙拍攝的圖片](https://dev-to-uploads.s3.amazonaws.com/i/ikkj6js77uyo7m0rd1ud.jpeg) 特徵 -- - 繪製圖表 - 變更字體大小、墨水顏色、間距等。 - 上傳自訂手寫字體按鈕(這樣您就可以從其他線上工具建立手寫字體並上傳字體檔案) 網址 -- ### 工具 https://saurabhdaware.github.io/text-to-handwriting ### GitHub 做 ⭐ 儲存庫 https://github.com/saurabhdaware/text-to-handwriting --- 感謝您閱讀🐨🎉讓我知道您的想法評論。 您可以在[Twitter @saurabhcodes](https://twitter.com/saurabhcodes)和[GitHub @saurabhdaware](https://github.com/saurabhdaware)上關注我 再見!確保安全並記住我們會度過這個難關🌻 --- 原文出處:https://dev.to/saurabhdaware/i-made-a-text-to-handwriting-tool-to-write-my-college-assignments-for-me-4ko

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

進階 SQL:掌握查詢最佳化和複雜連接

大家好,願神的平安、憐憫、祝福臨到你們 SQL(結構化查詢語言)是管理和操作關係資料庫的重要工具。雖然基本的 SQL 技能可以幫助您入門,但高級 SQL 技術可以大大增強您處理複雜查詢和優化資料庫效能的能力。本文深入探討高階 SQL 主題,重點在於複雜的查詢最佳化策略、高階聯結類型以及`SELECT`語句的複雜性。 ### 進階查詢最佳化技術 最佳化 SQL 查詢是資料庫管理員和開發人員的關鍵技能。進階查詢最佳化超越了基本索引和查詢重構,還包括一系列複雜的技術。 #### 1. 查詢執行計劃 了解查詢的執行計劃對於最佳化至關重要。執行計劃顯示 SQL 引擎如何執行查詢,揭示潛在的瓶頸。 - **EXPLAIN** : `EXPLAIN`語句提供對查詢執行方式的深入了解,使您能夠辨識效率低下的情況。 ``` EXPLAIN SELECT column1, column2 FROM table_name WHERE condition; ``` - **ANALYZE** : `ANALYZE`語句與`EXPLAIN`結合使用,執行查詢並提供執行時統計訊息,從而更深入地了解查詢性能。 ``` EXPLAIN ANALYZE SELECT column1, column2 FROM table_name WHERE condition; ``` #### 2. 子查詢最佳化 子查詢有時可以替換為更有效率的聯結或`WITH`子句(通用表表達式)。 - **用連接替換子查詢**: ``` -- Subquery SELECT * FROM table1 WHERE column1 IN (SELECT column1 FROM table2); -- Equivalent Join SELECT table1.* FROM table1 INNER JOIN table2 ON table1.column1 = table2.column1; ``` - **使用通用表格表達式 (CTE)** : ``` WITH CTE AS ( SELECT column1, column2 FROM table_name WHERE condition ) SELECT * FROM CTE WHERE another_condition; ``` #### 3. 索引策略 進階索引策略包括使用複合索引和覆蓋索引。 - **複合索引**:包含多個欄位的索引可以加快對這些欄位進行篩選的查詢速度。 ``` CREATE INDEX idx_composite ON table_name (column1, column2); ``` - **覆蓋索引**:包含查詢檢索到的所有列的索引可以顯著提高效能。 ``` CREATE INDEX idx_covering ON table_name (column1, column2, column3); ``` #### 4. 分區 將大表劃分為更小、更易於管理的部分可以透過限制掃描的資料量來提高查詢效能。 - **範圍劃分**: ``` CREATE TABLE orders ( order_id INT, order_date DATE, ... ) PARTITION BY RANGE (order_date) ( PARTITION p0 VALUES LESS THAN ('2024-01-01'), PARTITION p1 VALUES LESS THAN ('2025-01-01'), ... ); ``` - **哈希分區**:根據雜湊函數將資料分佈在指定數量的分區上,提供均勻分佈。 ``` CREATE TABLE users ( user_id INT, username VARCHAR(255), ... ) PARTITION BY HASH(user_id) PARTITIONS 4; ``` - **清單分區**:根據值清單將資料劃分為多個分區。 ``` CREATE TABLE sales ( sale_id INT, region VARCHAR(255), ... ) PARTITION BY LIST (region) ( PARTITION p0 VALUES IN ('North', 'South'), PARTITION p1 VALUES IN ('East', 'West') ); ``` #### 5. 物化視圖 物化視圖實體儲存查詢結果,並且可以定期刷新,從而提高頻繁執行的複雜查詢的效能。 - **建立物化視圖**: ``` CREATE MATERIALIZED VIEW sales_summary AS SELECT region, SUM(sales_amount) AS total_sales FROM sales GROUP BY region; ``` - **刷新物化視圖**: ``` REFRESH MATERIALIZED VIEW sales_summary; ``` 筆記: --- 在 MySQL 中,存在視圖,但物化視圖本身並不存在。 MySQL支援標準視圖,這些視圖是儲存查詢定義並在查詢時動態產生結果集的虛擬表。但是,它沒有對物化視圖的內建支持,物化視圖物理儲存結果集。 ### MySQL 中的視圖 #### 建立視圖 您可以使用`CREATE VIEW`語句在 MySQL 中建立視圖。這是一個例子: ``` CREATE VIEW ActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` 這將建立一個名為`ActiveCustomers`的視圖,其中僅包含`Customers`表中的活動客戶。查詢此視圖如下所示: ``` SELECT * FROM ActiveCustomers; ``` #### 更新視圖 可以使用`CREATE OR REPLACE VIEW`語句更新檢視: ``` CREATE OR REPLACE VIEW ActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active' AND Country = 'USA'; ``` 這會將`ActiveCustomers`檢視修改為僅包含來自美國的活躍客戶。 #### 刪除視圖 您可以使用`DROP VIEW`語句刪除檢視: ``` DROP VIEW ActiveCustomers; ``` #### MySQL 中的物化視圖 MySQL 本身不支援物化視圖,但有一些變通方法可以實現類似的功能。這裡有幾種方法: ##### 1. 使用表格和計劃更新 一種常見的方法是建立一個表來儲存查詢結果並使用計劃事件(cron 作業)或觸發器定期更新它。 ##### 建立表 首先,建立一個表格來儲存結果: ``` CREATE TABLE MaterializedActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` ##### 更新表格 使用計劃事件定期更新表。此範例使用 MySQL 事件每小時更新一次表格: ``` CREATE EVENT UpdateMaterializedActiveCustomers ON SCHEDULE EVERY 1 HOUR DO BEGIN DELETE FROM MaterializedActiveCustomers; INSERT INTO MaterializedActiveCustomers SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; END; ``` 此事件每小時都會清除`MaterializedActiveCustomers`表並使用最新的活躍客戶重新填充。 ##### 2. 使用觸發器 另一種方法是使用觸發器使表與基底表保持同步。然而,這可能會變得複雜,對於大型資料集可能效率不高。 #### 使用觸發器的範例 ##### 建立表 首先,建立表: ``` CREATE TABLE MaterializedActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` ##### 建立觸發器 建立觸發器以保持物化表更新: ``` DELIMITER // CREATE TRIGGER after_customer_insert AFTER INSERT ON Customers FOR EACH ROW BEGIN IF NEW.Status = 'Active' THEN INSERT INTO MaterializedActiveCustomers (CustomerID, CustomerName, ContactName, Country) VALUES (NEW.CustomerID, NEW.CustomerName, NEW.ContactName, NEW.Country); END IF; END // CREATE TRIGGER after_customer_update AFTER UPDATE ON Customers FOR EACH ROW BEGIN IF OLD.Status = 'Active' AND NEW.Status != 'Active' THEN DELETE FROM MaterializedActiveCustomers WHERE CustomerID = OLD.CustomerID; ELSEIF NEW.Status = 'Active' THEN REPLACE INTO MaterializedActiveCustomers (CustomerID, CustomerName, ContactName, Country) VALUES (NEW.CustomerID, NEW.CustomerName, NEW.ContactName, NEW.Country); END IF; END // CREATE TRIGGER after_customer_delete AFTER DELETE ON Customers FOR EACH ROW BEGIN DELETE FROM MaterializedActiveCustomers WHERE CustomerID = OLD.CustomerID; END // DELIMITER ; ``` 這些觸發器將確保`MaterializedActiveCustomers`表隨著`Customers`表的變更而保持更新。 #### 結論 雖然 MySQL 支援視圖,但它本身不支援物化視圖。但是,您可以使用具有計劃更新或觸發器的表來實現類似的功能。透過使用這些解決方法,您可以維護可以快速查詢的預先計算的結果,類似於其他資料庫系統中的物化視圖。 ### 高級連接類型和技術 連接是 SQL 的基礎,它允許您組合多個表中的資料。除了基本連接之外,高級連接技術還可以處理更複雜的需求。 #### 1. 自加入 自連接是一種常規連接,但表與自身連接。它對於比較同一表中的行很有用。 ``` SELECT a.employee_id, a.name, b.name AS manager_name FROM employees a INNER JOIN employees b ON a.manager_id = b.employee_id; ``` #### 2. 橫向連接 `LATERAL`連線允許子查詢在`FROM`子句中引用前面表格中的欄位。這對於更複雜的查詢很有用。 ``` SELECT a.*, b.* FROM table1 a LEFT JOIN LATERAL ( SELECT * FROM table2 b WHERE b.column1 = a.column1 ORDER BY b.column2 DESC LIMIT 1 ) b ON TRUE; ``` #### 3. 使用 COALESCE 進行完全外部連接 處理需要完整外連接但希望避免結果中出現`NULL`值的情況。 ``` SELECT COALESCE(a.column1, b.column1) AS column1, a.column2, b.column2 FROM table1 a FULL OUTER JOIN table2 b ON a.column1 = b.column1; ``` #### 4. 進階連接過濾器 在連接中應用複雜的條件以更精確地過濾結果。 ``` SELECT a.column1, b.column2 FROM table1 a INNER JOIN table2 b ON a.column1 = b.column1 AND a.date_column BETWEEN '2023-01-01' AND '2023-12-31'; ``` #### 5. 反連接和半連接 這些連接分別對於排除和包含查詢很有用。 - **反連接**:從左表中檢索右表中沒有匹配行的行。 ``` SELECT a.* FROM table1 a LEFT JOIN table2 b ON a.column1 = b.column1 WHERE b.column1 IS NULL; ``` - **半連接**:從左表中檢索右表中存在一個或多個匹配項的行。 ``` SELECT a.* FROM table1 a WHERE EXISTS (SELECT 1 FROM table2 b WHERE a.column1 = b.column1); ``` ### 高級`SELECT`語句 `SELECT`語句可以透過進階功能進行擴展,以滿足複雜的資料檢索要求。 #### 1. 視窗函數 視窗函數對與目前行相關的一組表行執行計算,提供強大的分析功能。 - **行號**: ``` SELECT column1, column2, ROW_NUMBER() OVER (PARTITION BY column1 ORDER BY column2) AS row_num FROM table_name; ``` - **執行總計**: ``` SELECT column1, column2, SUM(column2) OVER (ORDER BY column1) AS running_total FROM table_name; ``` - **排行**: ``` SELECT column1, column2, RANK() OVER (PARTITION BY column1 ORDER BY column2) AS rank FROM table_name; ``` - **移動平均線**: ``` SELECT column1, column2, AVG(column2) OVER (PARTITION BY column1 ORDER BY column2 ROWS BETWEEN 1 PRECEDING AND 1 FOLLOWING) AS moving_avg FROM table_name; ``` #### 2. 遞迴 CTE 遞歸 CTE 可讓您執行遞歸查詢,這對於分層資料很有用。 ``` WITH RECURSIVE cte AS ( SELECT column1, column2 FROM table_name WHERE condition UNION ALL SELECT t.column1, t.column2 FROM table_name t INNER JOIN cte ON t.column1 = cte.column1 ) SELECT * FROM cte; ``` #### 3.JSON函數 現代 SQL 資料庫通常包含處理 JSON 資料的函數,可讓您儲存和查詢 JSON 文件。 - **提取 JSON 值**: ``` SELECT json_column->>'key' AS value FROM table_name; ``` - **聚合成 JSON** : ``` SELECT json_agg(row_to_json(t)) FROM (SELECT column1, column2 FROM table_name) t; ``` - **更新 JSON 資料**: ``` UPDATE table_name SET json_column = jsonb_set(json_column, '{key}', '"new_value"', true) WHERE condition; ``` #### 4. 資料透視 透視將行轉換為列,提供了一種重新組織和匯總資料以用於報告目的的方法。 - **使用 CASE 語句進行透視**: ``` SELECT category, SUM(CASE WHEN year = 2021 THEN sales ELSE 0 END) AS sales_2021, SUM(CASE WHEN year = 2022 THEN sales ELSE 0 END) AS sales_2022 FROM sales_data GROUP BY category; ``` #### 5.動態SQL 動態 SQL 允許在執行時間建立和執行 SQL 語句,為需要動態產生的複雜查詢提供靈活性。 - **執行動態SQL** : ``` EXECUTE 'SELECT * FROM ' || table_name || ' WHERE ' || condition; ``` - **使用準備好的語句**: ``` PREPARE stmt AS SELECT * FROM table_name WHERE column1 = $1; EXECUTE stmt('value'); ``` ### 結論 掌握進階 SQL 技術可以讓您最佳化資料庫效能並輕鬆處理複雜查詢。了解執行計劃、利用高階聯結、利用複雜的`SELECT`語句、實作進階索引策略是精通 SQL 的關鍵。透過將這些技術整合到您的工作流程中,您可以顯著提高資料庫驅動應用程式的效率和可擴展性。 進階 SQL 技能可讓您處理複雜的資料操作和檢索任務,確保您的應用程式能夠有效率且有效地處理大量資料。無論您是資料庫管理員、開發人員還是資料分析師,這些進階 SQL 技術都將使您能夠充分利用關聯式資料庫,從而獲得更好的效能、更深入的見解和更強大的應用程式。 --- 原文出處:https://dev.to/bilelsalemdev/advanced-sql-mastering-query-optimization-and-complex-joins-4gph

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

使用 ToolJet + Gemini API 建構 SQL 查詢產生器

介紹 -- 本教學將引導您完成使用[ToolJet](https://github.com/ToolJet/ToolJet) (一種低程式碼視覺化應用程式建構器)和 Gemini API(一種強大的自然語言處理 API)來建立 AI 驅動的 SQL 查詢產生器的過程。由此產生的應用程式將使用戶能夠以簡單的英語輸入提示,然後將其轉換為可執行的 SQL 查詢。我們將使用 ToolJet 的視覺化應用程式建構器來建立使用者友善的 UI,並使用 ToolJet 的低程式碼查詢建構器將其連接到 Gemini API 端點。 --- 先決條件: ----- - [**ToolJet**](https://github.com/ToolJet/ToolJet):一個開源、低程式碼的商業應用程式建構器。[註冊](https://www.tooljet.com/signup)免費的 ToolJet 雲端帳號或使用 Docker[在本機上執行 ToolJet](https://docs.tooljet.com/docs/setup/try-tooljet/) 。 - **Gemini API 金鑰**:使用您現有的 Google 憑證登入[Google AI Studio](https://aistudio.google.com/app/apikey) 。在 AI Studio 介面中,您將能夠找到並複製您的 API 金鑰。 以下是我們最終應用程式的快速預覽: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amxvh44ue5inhf9cyoh8.png) --- 製作我們的使用者介面 ---------- - 登入您的[ToolJet 帳號](https://app.tooljet.com/)。導覽至 ToolJet 儀表板,然後按一下左上角的**「建立新應用程式」**按鈕。 ToolJet 隨附 45 多個內建元件。這將讓我們立即設定我們的用戶界面。 - 將右側元件庫中的**Container**元件拖曳到畫布上。適當調整**Container**元件的高度和寬度。 - 同樣,將**圖示**和兩個**文字**元件拖曳到容器內。我們將使用這兩個**文字**元件作為標題和署名文字。 - 選擇**Icon**元件,導覽至右側的屬性面板,然後選擇其**Icon**屬性下的資料庫圖示。 - 根據您的喜好變更**圖示**和**文字**元件的顏色。在這裡,我們將使用藍色陰影(十六進位程式碼:#4A7EE2)。 - 適當地變更**文字**元件的字體大小和內容。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tezdxuu2q9zq5fpazaj.png) - 將**Dropdown**元件拖曳到容器中。我們將使用此元件在**Gemini** API 提供的模型之間進行選擇。 - 將此元件重新命名為*modelDropdown* 。重新命名元件將有助於在開發過程中快速存取其資料。 - 同樣,將三個**Textarea**元件拖曳到容器中。我們將使用這些元件作為資料模式輸入、文字查詢輸入以及第三個元件來顯示產生的 SQL 查詢。 - 將三個**Textarea**元件分別重新命名為*databaseSchemaInput* 、 *textPrompt*和*generatedQuery* 。 - 適當調整**Textarea**元件的高度和寬度。 - 在**「屬性」**部分下,清除預設值輸入並輸入適當的佔位符文字。 - 拖放另一個**文字**元件。我們將使用它作為產生的查詢**Textarea**元件的標籤。適當變更顏色、字體大小和內容。 - 讓我們加入最後一個元件,拖放一個**Button**元件。我們將使用它來觸發 SQL 查詢產生。適當改變顏色、大小和內容。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1p7ggxevjpxwgviumtc.png) --- 建立查詢 ---- ToolJet 允許使用其 REST API 查詢功能連接到第三方 API。我們將使用它來將我們的 UI 與 Gemini API 端點整合。我們將建立兩個單獨的 REST API 查詢: 1. 第一個查詢將取得**Gemini** API 提供的所有 AI 模型的清單。 2. 第二個查詢是將使用者輸入傳送到**Gemini** API 端點的 POST 請求。它將傳回基於這些輸入產生的 SQL 查詢。 我們也將利用 ToolJet 的**工作空間常數**來安全地儲存我們的**Gemini** API 金鑰。工作區常數在伺服器端解析。這確保了常數的實際值不會與網路有效負載一起發送;相反,伺服器解析這些值,從而確保它們免受客戶端暴露。 - 若要建立**工作空間常數**,請點選左上角的 ToolJet 標誌。從下拉清單中,選擇**工作空間常數**。 - 點選**建立新常數**按鈕。將名稱設為*GEMINI\_API\_KEY*並在值輸入中輸入您的**Gemini** API 金鑰。 - 點選**新增常數**按鈕。現在,該常數將在我們的工作區中可用,並且可以使用`{{constants.GEMINI_API_KEY}}`進行存取。 - 導航回您的應用程式並開啟查詢管理器。 - 點擊**+ 新增**按鈕並選擇**REST API**選項。 - 將查詢重新命名為*getModels* 。 - 將請求方法保留為**GET**並將以下 URL 貼到 URL 輸入中。這是 Gemini API 端點,它將傳回我們可用的模型。 ``` https://generativelanguage.googleapis.com/v1beta/models?key={{constants.GEMINI_API_KEY}} ``` - 若要確保每次載入應用程式時都執行查詢,請啟用**“在應用程式載入時執行此查詢?”**切換。 - 同樣,建立另一個查詢並將其命名為*getSqlQuery* 。 - 在**請求**參數中,從下拉清單中選擇**POST**作為方法,然後貼上以下 URL。 ``` https://generativelanguage.googleapis.com/v1beta/{{components.modelDropdown.value}}:generateContent?key={{constants.GEMINI_API_KEY}} ``` - 導航到*getSqlQuery*的 Body 部分。切換到**原始 JSON**並輸入以下程式碼: ``` {{ `{  "contents": [{    "parts": [{      "text": "Data Schema: ${components.databaseSchemaInput.value.replaceAll("\n"," ")}, Text Prompt: Write a standard SQL query that will ${components.textPrompt.value.replaceAll("\n"," ")}. Return with correct formatting but without any code highlighting and any backticks"     },],   },], }` }} ``` --- 將 UI 與查詢集成 ---------- 現在我們已經成功建立了 UI 和查詢,下一步就是整合它們。 - 選擇**“屬性”**部分下的**“按鈕”**元件,然後按一下**“新事件處理程序”**按鈕以建立新事件。 - 選擇**On click**作為**事件**,**執行查詢**作為**操作**,然後選擇*getSqlQuery*作為**查詢**。 - 選擇**「屬性」**部分下的**下拉**元件,然後為選項值和標籤輸入以下程式碼。 **選項值**: ``` {{queries.getModels.data.models.map(item => item.name)}} ``` **選項標籤**: ``` {{queries.getModels.data.models.map(item => item.displayName)}} ``` - 選擇**Properties**部分下的*generatedQuery* **Textarea**元件,然後為預設值輸入輸入以下程式碼。 **預設值**: ``` {{queries.getSqlQuery.data.candidates[0].content.parts[0].text}} ``` 我們的人工智慧驅動的 SQL 查詢產生器已經完成。讓我們提供一些範例資料來測試一下。 資料庫結構定義: ``` Orders (id, product_id, address, customer_name, is_paid) Products (id, quantity, moq) Customers (id, name, email, phone, addresses) ``` 文字提示/查詢: ``` find all the prepaid orders from a customer named Alex JR ``` **預期輸出:** ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rjpn413n42hejyu2ofc.png) --- 結論 -- 恭喜您使用 ToolJet 和 Gemini API 成功建置了人工智慧驅動的 SQL 查詢產生器。現在您可以用簡單的英文輸入提示,然後將其準確地轉換為可執行的 SQL 語句。 要了解和探索有關 ToolJet 的更多訊息,請查看[ToolJet 文件](https://docs.tooljet.com/docs/)或聯絡我們並在[Slack](https://join.slack.com/t/tooljet/shared_invite/zt-2ij7t3rzo-qV7WTUTyDVQkwVxTlpxQqw)上發布您的問題。 --- 原文出處:https://dev.to/tooljet/building-a-sql-query-generator-using-tooljet-gemini-api-4lo9

簡短概述:微前端 🧩

當人們談論**微前端**時,他們首先提到的就是其驚人的擴展能力。他們透過將服務分成更小的部分並無縫協作來實現這一目標。 微前端的優勢👍 ------- - **微前端**支援團隊可以實現後續前端功能,從而顯著加快迭代速度。 - 微前端的**水平可擴展性**旨在使組織能夠透過水平擴展來擴展其前端架構。 📈 微前端的缺點👎 ------- - 微前端會使網站的開發、維護和建置**變得複雜**。然而,可以透過使用智慧設計、有助於自動部署和測試的工具以及確保團隊之間的清晰溝通來緩解這些挑戰。 📉 - 如果團隊之間不進行溝通,**依賴管理**可能會成為問題。但可以透過在團隊之間建立清晰的溝通管道來討論更新來解決! 👌 單體應用程式經常遇到有效擴展的挑戰。透過將前端分解為微前端,可以更有效地實現延遲載入和**服務工作者**等高階邏輯結構。 **JavaScript 的**靈活性允許團隊加入各種框架和程式庫,從而促進微前端之間的無縫整合和互通性。豐富的 JavaScript 工俱生態系統為開發人員提供了強大的資源來建立動態和響應式的使用者介面。 - 受到以下書的啟發: [***建立微前端、擴展團隊和專案、為開發人員提供支援***。](https://www.amazon.com/Building-Micro-Frontends-Projects-Empowering-Developers/dp/1492082996/ref=sr_1_2?crid=RCBAUE4OKJ0J&dib=eyJ2IjoiMSJ9.0ZJp2IXMP9BkahJYaiHl9ez2Wm6vlnMHRLwunki8JYstYZfM_ukCSBNN1JAldlIqkOUuSa70q6nEYv5Rle1a2vzND0PJ_BEBt_kCHgnNjO9tg-Kp9V1tGAtMW7QtLmY53ZAuOFX4lfXTM2DTu5KCUiwIHGHiERCZ9ehXTueraXmWd4AAl5aP6VkEgs56_BamuYAo7pHw1nb6ceTIouGXkdImZ4fB-y81_da06oyWRY8.601H27Rq2LULtNXKVir3Z3QOGJlbx6ovOrmk3Iny2Bg&dib_tag=se&keywords=micro+frontend&qid=1717013751&sprefix=microfronten,aps,223&sr=8-2)作者:*盧卡‧梅札里拉 (Luca Mezzalira) 尼爾‧福特 (Neal Ford) 作序* 加入我們! ----- 那麼...您喜歡 Javascript 並想為開源專案做出貢獻嗎?**你在等什麼?** 😁 前往[Webcrumbs](https://www.webcrumbs.org/)並加入一個致力於為開源愛好者提供 JavaScript 生態系統的社群! --- 原文出處:https://dev.to/buildwebcrumbs/short-overview-micro-frontends-2f5i

寫出「本身就像是文件」的程式碼🧑‍💻📜

身為開發人員,我們都浪費了時間,盯著一段程式碼,試圖破解其目的,並想知道原始作者在想什麼。在軟體開發的世界中,專案易手且程式碼庫快速發展,編寫自文件程式碼不僅是一種可有可無的東西,而且也是一種可有可無的東西。這是必要的。 在本文中,我們將探索編寫不言自明的程式碼的藝術,減少對外部文件的依賴,並使您自己和其他開發人員的生活變得更輕鬆。 什麼是自文件程式碼? ---------- 自記錄程式碼是以清晰、富有表現力和有意的方式編寫的程式碼,使其目的和功能易於理解,而不需要大量註解或外部文件。 這是關於編寫以下程式碼: - **可讀性:**程式碼一目了然,易於閱讀與理解 - **富有表現力:**清晰傳達其意圖和目的的程式碼 - **可維護:**易於修改和更新的程式碼,不會引入錯誤或破壞性更改 為什麼自我文件化程式碼很重要 -------------- 編寫自文件程式碼有幾個好處: 1. **減少認知負擔:**當程式碼不言自明時,開發人員可以快速掌握其目的和功能,從而減少理解和使用程式碼庫所需的腦力勞動。 2. **更快的入職:**當程式碼庫是自記錄的時,新的團隊成員可以更快地上手,因為他們不需要嚴重依賴外部文件或廣泛的知識轉移會議。 3. **改進的協作:**自記錄程式碼有助於團隊成員之間更好的協作,因為它可以最大限度地減少誤解並促進對程式碼庫的共同理解。 4. **增強的可維護性:**當程式碼是自記錄的時,隨著時間的推移,維護和更新會更容易,因為開發人員可以快速理解現有程式碼並做出明智的更改。 編寫自文件程式碼的技術 ----------- 讓我們探索一些編寫自文件程式碼的實用技術,重點是 TypeScript: ### 1.使用有意義的名字 使程式碼自記錄的最有效方法之一是為變數、函數、類別和模組使用有意義的名稱。考慮以下範例: ``` // Bad const x = 5; const y = 10; const z = x + y; // Good const numberOfItems = 5; const itemPrice = 10; const totalCost = numberOfItems * itemPrice; ``` 在「Good」範例中,變數名稱清楚地傳達了它們的用途,使程式碼更具可讀性和不言自明。 ### 2. 寫出小而集中的函數 編寫小型、集中的函數是自文件程式碼的另一個關鍵方面。函數應具有單一職責,並準確命名以反映其目的。例如: ``` // Bad function processData(data: any): any { // ... // Lots of complex logic // ... return result; } // Good function extractRelevantFields(data: Record<string, any>): Record<string, any> { // ... return relevantFields; } function applyBusinessRules(relevantFields: Record<string, any>): Record<string, any> { // ... return processedData; } function formatOutput(processedData: Record<string, any>): string { // ... return formattedResult; } ``` 透過將大函數分解為具有描述性名稱的更小、更集中的函數,程式碼變得更具可讀性和自記錄性。 ### 3. 使用描述性函數和方法名稱 命名函數和方法時,請使用能夠清楚傳達其目的和操作的描述性名稱。避免使用像`handle()`或`process()`這樣的通用名稱。相反,選擇描述函數功能的名稱。例如: ``` // Bad function handleInput(input: string): void { // ... } // Good function validateUserCredentials(username: string, password: string): boolean { // ... } ``` 描述性名稱`validateUserCredentials`可以清楚地表明該函數的用途,而無需其他註釋。 ### 4.利用 TypeScript 的型別系統 TypeScript 強大的類型系統可以大幅增強程式碼的自記錄性質。透過利用 TypeScript 的功能,您可以讓程式碼更具表現力並儘早發現潛在錯誤。例如: - **介面和類型:**使用介面和自訂類型來定義資料結構的形狀,使程式碼更具可讀性和不言自明。 ``` interface User { id: number; name: string; email: string; } function getUserById(id: number): User | undefined { // ... } ``` - **枚舉:**利用枚舉來表示一組固定的值,提供清晰易讀的方式來處理不同的場景。 ``` enum PaymentStatus { Pending = 'pending', Completed = 'completed', Failed = 'failed', } function processPayment(status: PaymentStatus): void { // ... } ``` - **類型推斷:**盡可能讓 TypeScript 推斷類型,因為它可以減少冗長並使程式碼更具可讀性。 ``` // Bad const count: number = 10; const message: string = 'Hello, world!'; // Good const count = 10; const message = 'Hello, world!'; ``` ### 5.使用強型別ID 在 TypeScript 中使用 ID 時,請考慮使用強型別 ID,而不是簡單的字串或數字。強型別 ID 提供了額外的類型安全性,並使程式碼更加自文件化。 實作強型別 ID 的一種方法是使用不透明類型: ``` // user.ts export type UserId = string & { readonly __brand: unique symbol }; export function createUserId(id: string): UserId { return id as UserId; } // post.ts export type PostId = string & { readonly __brand: unique symbol }; export function createPostId(id: string): PostId { return id as PostId; } ``` 透過使用強型別 ID,您可以確保 UserId 只能指派給需要 UserId 的屬性或函數,而 PostId 只能指派給需要 PostId 的屬性或函數。 ``` function getUserById(userId: UserId): User | undefined { // ... } const userId = createUserId('user-123'); const postId = createPostId('post-456'); getUserById(userId); // No error getUserById(postId); // Error: Argument of type 'PostId' is not assignable to parameter of type 'UserId'. ``` 強類型 ID 有助於在編譯時捕獲潛在錯誤,並使程式碼更具表現力和自記錄性。然而,與使用簡單的字串類型相比,它們確實引入了一些開銷。根據專案的需求和規模考慮權衡。 ### 6. 在團隊中建立一致性並設定期望 當作為團隊的一部分處理程式碼庫時,建立一致性並設定明確的期望至關重要。這有助於確保每個人都在同一頁上並遵循相同的約定,從而使程式碼更具可讀性和可維護性。 一致性的一個重要面向是命名約定。建立一個風格指南,定義變數、函數、類別和其他實體的命名方式。例如,考慮以下術語及其含義: - `get` :從 API 或資料來源檢索單一值。 - `list` :從 API 或資料來源檢索一組值。 - `patch` :部分更新現有實體或物件。 - `upsert` :更新現有實體或插入新實體(如果不存在)。 透過定義這些術語及其用法,您可以確保整個程式碼庫的一致性。例如: ``` function getUser(userId: UserId): Promise<User> { // ... } function listUsers(): Promise<User[]> { // ... } function patchUser(userId: UserId, updatedData: Partial<User>): Promise<User> { // ... } ``` 一致性有助於使程式碼庫對所有團隊成員更具可預測性和更容易理解。除了命名約定之外,還可以考慮為程式碼庫的其他方面建立指南,例如檔案和資料夾結構、註解、錯誤處理、測試和程式碼格式。 在團隊中工作時,您個人可能不會總是同意所有正在執行的約定。然而,重要的是要記住一致性和協作對於專案的成功至關重要。即使您有不同的偏好或編碼風格,遵守商定的約定也有助於維護有凝聚力的程式碼庫並減少其他團隊成員之間的混亂。 ### 7.複雜場景使用JSDoc或TSDoc 雖然自記錄程式碼應該是主要目標,但在某些情況下可能需要額外的文件,例如複雜的演算法或複雜的業務邏輯。在這種情況下,請考慮使用 JSDoc 或 TSDoc 來提供清晰簡潔的文件。 ``` /** * Calculates the Fibonacci number at the given position. * * @param {number} position - The position of the Fibonacci number to calculate. * @returns {number} The Fibonacci number at the specified position. */ function fibonacci(position: number): number { if (position <= 1) { return position; } return fibonacci(position - 1) + fibonacci(position - 2); } ``` 透過使用 JSDoc 或 TSDoc,您可以為複雜程式碼提供額外的上下文和解釋,而不會使程式碼庫本身變得混亂。 結論 -- 編寫自文件程式碼是每個開發人員都應該努力掌握的藝術。透過利用有意義的名稱、小而集中的函數、TypeScript 的類型系統以及文件的明智使用,您可以建立可讀、富有表現力和可維護的程式碼。 請記住,我們的目標是編寫不言而喻的程式碼,減少對外部文件的依賴,並使其他開發人員的生活更輕鬆。因此,下次編寫程式碼時,請花點時間考慮如何使其更加自文件化。未來的你和你的隊友都會感謝你! 還有無恥的插頭🔌。如果您在敏捷開發團隊工作並使用線上會議工具(例如規劃撲克或回顧),請查看我的免費工具[Kollabe](https://kollabe.com/) ! --- 原文出處:https://dev.to/mattlewandowski93/writing-self-documenting-code-4lga

每個開發人員都需要了解的 300 多個免費 API

目錄 == 1. [天氣 API ⛅️🌦️🌩️](#weather-apis) 2. [匯率 API 💱💲💹](#exchange-rates-apis) 3. [加密貨幣 API ₿💰🔗](#cryptocurrency-apis) 4. [佔位符圖像 API 📸🖼️🎨](#placeholder-image-apis) 5. [隨機產生器 API 🎲🔀🎰](#random-generators-apis) 6. [新聞 API 📰📢🗞️](#news-apis) 7. [地圖與地理定位 API 🗺️📍🌍](#maps-and-geolocation-apis) 8. [搜尋 API 🔍📑🕵️](#search-apis) 9. [機器學習 API 🤖🧠🔮](#machine-learning-apis) 10. [截圖與圖片 API 📷🌐🖼️](#screenshot-and-picture-apis) 11. [SEO API 🔍📈💡](#seo-apis) 12. [購物 API 🛍️🛒📦](#shopping-apis) 13. [開發者 API 💻🔧🛠️](#developer-apis) 14. [旅行和交流 API 🛫🚗🚉](#travel-and-transportation-apis) 15. [通訊 API 📞💬📧](#communication-apis) 16. [支付和金融 API 💳💸🏦](#payment-and-financial-apis) 17. [分析與監控 API 📊📈📉](#analytics-and-monitoring-apis) 18. [自然語言處理 (NLP) API 🗣️🔍💬](#natural-language-processing-nlp-apis) 19. [實用程式和工具 API 🛠️🔧⚙️](#utilities-and-tools-apis) 20. [政府和開放資料 API 🏛️📜📊](#government-and-open-data-apis) [Qit.tools](https://qit.tools/) - ⚡ 互動式線上網路 🛠️ 工具 --- 天氣 API ⛅️🌦️🌩️ ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |打開天氣地圖 |全球天氣資料,包括預報和當前天氣 | 60 次通話/分鐘 | API 金鑰 |[連結](https://openweathermap.org/api)| |天氣堆疊 |即時與歷史天氣資料 |每月 1000 通電話 | API 金鑰 |[連結](https://weatherstack.com/documentation)| |天氣比特 |天氣預報資料,包括預報和當前天氣 |每天 500 通電話 | API 金鑰 |[連結](https://www.weatherbit.io/api)| |克利馬塞爾|超本地天氣資料與見解 |每天 100 通電話 | API 金鑰 |[連結](https://docs.climacell.co/)| |準確天氣 |天氣預報|每天 50 通電話 | API 金鑰 |[連結](https://developer.accuweather.com/apis)| |視覺穿越|歷史和當前天氣資料|每天 1000 通電話 | API 金鑰 |[連結](https://www.visualcrossing.com/weather-api)| | 2020 年天氣 |天氣預報 |每天 100 通電話 | API 金鑰 |[連結](https://www.weather2020.com/weather-api/)| |風暴玻璃|海洋氣象資料|每天 50 通電話 | API 金鑰 |[連結](https://stormglass.io/docs/)| |天氣 API |天氣預報資料,包括預報和當前天氣 |每月 1000 通電話 | API 金鑰 |[連結](https://www.weatherapi.com/docs/)| | Aeris 天氣 |天氣資料和影像|每月 1000 通電話 | API 金鑰 |[連結](https://www.aerisweather.com/support/docs/api/)| |這裡 天氣 |天氣預報資料,包括預報和當前天氣 |每月 25 萬通電話 | API 金鑰 |[連結](https://developer.here.com/documentation/weather/dev_guide/index.html)| |世界天氣在線|全球天氣資料,包括預報和歷史天氣|每天 500 通電話 | API 金鑰 |[連結](https://www.worldweatheronline.com/developer/)| |明天.io |超本地天氣資料與見解 |每天 100 通電話 | API 金鑰 |[連結](https://docs.tomorrow.io/)| |黑暗的天空|天氣預報資料,包括預報和當前天氣 |每天 1000 通電話 | API 金鑰 |[連結](https://darksky.net/dev)| |國家氣象局|美國政府天氣資料|無限 |無 |[連結](https://www.weather.gov/documentation/services-web-api)| --- 匯率 API 💱💲💹 ---------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |匯率-API | 160 種貨幣的準確匯率 |每月 1500 通電話 | API 金鑰 |[連結](https://www.exchangerate-api.com/docs)| |開放匯率|即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://docs.openexchangerates.org/)| |貨幣層 | 168 種世界貨幣即時匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://currencylayer.com/documentation)| |固定器|即時匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://fixer.io/documentation)| | XE 貨幣資料 |即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://xecdapi.xe.com/)| |外匯匯率 API |即時與歷史外匯匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://www.forexrateapi.com/documentation)| |費率API |免費外匯匯率和貨幣兌換|無限|無 |[連結](https://ratesapi.io/documentation/)| |匯率API | 160 種貨幣的準確匯率 |每月 1500 通電話 | API 金鑰 |[連結](https://www.exchangerate-api.com/docs)| | OANDA 匯率 |即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://www.oanda.com/fx-for-business/fx-data-services)| |貨幣轉換器 API |即時匯率與貨幣換算 |每月 1000 通電話 | API 金鑰 |[連結](https://www.currencyconverterapi.com/docs)| |匯率API |匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://www.exchangeratesapi.io/documentation)| |阿爾法優勢|即時與歷史匯率 |每天 500 通電話 | API 金鑰 |[連結](https://www.alphavantage.co/documentation/)| |西點燃|外匯匯率API |每月 1000 通電話 | API 金鑰 |[連結](https://www.xignite.com/xforex-rates)| | Everbase 貨幣 |匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://currency-api.everbase.com/documentation)| |匯率主機 |外匯匯率API |無限|無 |[連結](https://exchangerate.host/#/#docs)| --- 加密貨幣 API ₿💰🔗 ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | CoinGecko | 幣虎超過 6000 種貨幣的加密貨幣資料 |無限|無 |[連結](https://www.coingecko.com/en/api/documentation)| | CoinMarketCap |加密貨幣市值排名、圖表等 |每天 333 通電話 | API 金鑰 |[連結](https://coinmarketcap.com/api/documentation/)| |加密貨幣比較 |加密貨幣資料與價格比較 |每月 25 萬通電話 | API 金鑰 |[連結](https://min-api.cryptocompare.com/documentation)| |辣椒粉 |加密貨幣市場資料|每月 25,000 通電話 | API 金鑰 |[連結](https://api.coinpaprika.com)| |經濟學 |加密貨幣市值和定價資料|每月 125,000 通電話 | API 金鑰 |[連結](https://nomics.com/docs/)| |幣API |即時與歷史加密貨幣資料 |每月 100,000 通電話 | API 金鑰 |[連結](https://docs.coinapi.io/)| |梅薩裡 |加密貨幣資料與研究 |每天 1000 通電話 | API 金鑰 |[連結](https://messari.io/api)| |硬幣傳說 |加密貨幣市場資料 |無限|無 |[連結](https://www.coinlore.com/cryptocurrency-data-api)| |幣庫 |加密貨幣資料,包括價格和市值 |每天 100 個請求 | API 金鑰 |[連結](https://coinlib.io/apidocs)| | Bitfinex |加密貨幣交易平台API |無限|無 |[連結](https://docs.bitfinex.com/docs)| |比特雷克斯 |加密貨幣交易平台API |無限|無 |[連結](https://bittrex.github.io/api/v3)| |幣安 |加密貨幣交易平台API |無限|無 |[連結](https://binance-docs.github.io/apidocs/spot/en/)| |庫幣 |加密貨幣交易平台API |無限|無 |[連結](https://docs.kucoin.com/)| |克拉肯 |加密貨幣交易平台API |無限|無 |[連結](https://www.kraken.com/features/api)| |波蘭 |加密貨幣交易平台API |無限|無 |[連結](https://docs.poloniex.com/)| --- 佔位符圖像 API 📸🖼️🎨 -------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |洛雷姆·皮克蘇姆 |隨機佔位符圖像 |無限|無 |[連結](https://picsum.photos/)| |佔位符.com |自訂佔位符影像 |無限|無 |[連結](https://placeholder.com/)| | Unsplash 來源 |高品質佔位符影像 |無限|無 |[連結](https://source.unsplash.com/)| |放置小貓 |小貓的佔位圖像 |無限|無 |[連結](https://placekitten.com/)| |地點狗 |狗的佔位符圖像 |無限|無 |[連結](https://place.dog/)| |占星者 |熊的佔位符影像 |無限|無 |[連結](https://placebear.com/)| |填充穆雷 |比爾·莫瑞 (Bill Murray) 的佔位符圖像 |無限|無 |[連結](http://www.fillmurray.com/)| | FakerAPI |虛假資料和占位符圖像 |無限|無 |[連結](https://fakerapi.it/en)| |虛擬圖像.com |自訂佔位符影像 |無限|無 |[連結](https://dummyimage.com/)| | ImagePlaceholder.com |自訂佔位符影像 |無限|無 |[連結](https://imageplaceholder.com/)| |佔位符影像 |帶有自訂文字的佔位符圖像 |無限|無 |[連結](https://placeholderimage.dev/)| | Picsum.照片 |來自 Unsplash 的隨機圖像 |無限|無 |[連結](https://picsum.photos/)| |隨機影像API |隨機佔位符圖像 |無限|無 |[連結](https://random.imagecdn.app/)| |普拉霍爾德.it |自訂佔位符影像 |無限|無 |[連結](https://placehold.it/)| | LoremFlickr |隨機佔位符圖像 |無限|無 |[連結](https://loremflickr.com/)| --- 隨機產生器 API 🎲🔀🎰 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |隨機.org |真隨機數生成| 1,000,000 位/天 | API 金鑰 |[連結](https://www.random.org/)| |隨機用戶 |產生隨機用戶資料 |無限|無 |[連結](https://randomuser.me/)| | FakerAPI |虛假資料生成 |無限|無 |[連結](https://fakerapi.it/en)| | UUID 產生器 |產生隨機 UUID |無限|無 |[連結](https://www.uuidgenerator.net/)| |骰子熊頭像 |產生隨機頭像 |無限|無 |[連結](https://avatars.dicebear.com/)| |密碼產生器 |產生隨機密碼 |無限|無 |[連結](https://passwordwolf.com/api/)| |貓的事實|隨機貓的事實|無限|無 |[連結](https://catfact.ninja/)| |有趣的翻譯 |生成有趣的翻譯 |每天 5 個請求 |無 |[連結](https://funtranslations.com/api)| |行情.休息 |產生隨機報價 | 10 個請求/小時 |無 |[連結](https://quotes.rest/)| |通知單|隨機建議生成器 |無限|無 |[連結](https://api.adviceslip.com/)| |無聊API |活動建議 |無限|無 |[連結](https://www.boredapi.com/)| |非常感謝產生隨機佔位符文字 |無限|無 |[連結](https://loripsum.net/)| |烏納梅斯 |產生隨機名稱 |無限|無 |[連結](https://uinames.com/)| |皮普|產生隨機人物檔案 |無限|無 |[連結](https://pipl.ir/)| |隨機資料API |產生隨機資料進行測試 |無限|無 |[連結](https://random-data-api.com/)| --- 新聞 API 📰📢🗞️ ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |新聞API |聚合各種來源的新聞文章 |每天 500 通電話 | API 金鑰 |[連結](https://newsapi.org/docs)| |當前 API |即時新聞資料 |每月 1000 通電話 | API 金鑰 |[連結](https://currentsapi.services/en/docs/)| |上下文網路新聞 |即時新聞搜尋與發現|每月 10,000 通電話 | API 金鑰 |[連結](https://rapidapi.com/contextualwebsearch/api/web-search)| |必應新聞搜尋 |微軟Bing的新聞搜尋結果|每月 3000 通電話 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/cognitive-services/bing-news-search/)| |媒體堆疊 |即時新聞資料 |每月 500 通電話 | API 金鑰 |[連結](https://mediastack.com/documentation)| |紐約時報 API |造訪《紐約時報》文章與檔案 |無限| API 金鑰 |[連結](https://developer.nytimes.com/apis)| |守護者API |造訪《衛報》文章與檔案 |無限| API 金鑰 |[連結](https://open-platform.theguardian.com/documentation/)| |活動登記|即時新聞與事件資料 |每月 500 通電話 | API 金鑰 |[連結](https://eventregistry.org/documentation)| | GDELT 專案 |即時事件資料與新聞 |每月 10,000 通電話 | API 金鑰 |[連結](https://blog.gdeltproject.org/gdelt-2-0-our-global-world-in-realtime/)| |新聞資料.io |來自各種來源的即時新聞文章 |每天 200 通電話 | API 金鑰 |[連結](https://newsdata.io/docs)| |上下文網路|根據上下文搜尋新聞文章 |每月 1000 通電話 | API 金鑰 |[連結](https://contextualwebsearch.com/news-api)| |我的新聞 API |存取各種新聞來源|每月 500 通電話 | API 金鑰 |[連結](https://mynewsapi.com/documentation)| | Webz.io |即時新聞與部落格資料 |每月 1000 通電話 | API 金鑰 |[連結](https://webz.io/documentation)| | AYLIEN 新聞 API |各種來源的新聞文章及分析 |每天 200 通電話 | API 金鑰 |[連結](https://newsapi.aylien.com/docs)| |駭客新聞 |存取黑客新聞文章 |無限|無 |[連結](https://github.com/HackerNews/API)| --- 地圖和地理定位 API 🗺️📍🌍 ---------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌地圖 API |全面的地圖和地理定位資料|每月 200 美元免費使用| API 金鑰 |[連結](https://developers.google.com/maps/documentation)| |地圖盒 |客製化地圖和地理定位服務|每月 50,000 次瀏覽 | API 金鑰 |[連結](https://docs.mapbox.com/)| | OpenCage 地理編碼 |正向和反向地理編碼 |每天 2,500 通電話 | API 金鑰 |[連結](https://opencagedata.com/api)| |這裡 地圖 |地圖和位置資料服務|每月 25 萬通電話 | API 金鑰 |[連結](https://developer.here.com/documentation)| |打開街道地圖 |免費可編輯的世界地圖|無限|無 |[連結](https://operations.osmfoundation.org/policies/nominatim/)| |位置堆疊 |用於正向和反向地理編碼的地理編碼 API |每月 25,000 通電話 | API 金鑰 |[連結](https://positionstack.com/documentation)| |湯姆湯姆 |地圖和地理定位資料服務|每天 2,500 通電話 | API 金鑰 |[連結](https://developer.tomtom.com/)| |地圖探索 |地圖和地理定位資料服務|每月 15,000 通電話 | API 金鑰 |[連結](https://developer.mapquest.com/documentation/)| | ipstack| IP地理定位API |每月 10,000 通電話 | API 金鑰 |[連結](https://ipstack.com/documentation)| |地理資訊 |地理編碼和反向地理編碼|每天 2,500 通電話 | API 金鑰 |[連結](https://www.geocod.io/)| |位置智商 |地理編碼和反向地理編碼|每天 5,000 通電話 | API 金鑰 |[連結](https://locationiq.com/docs)| |地圖繪製器 |地圖、地理編碼與地理定位服務 |每月 100,000 個切片請求 | API 金鑰 |[連結](https://www.maptiler.com/cloud/)| |什麼三字 |使用三字位址的定位服務 |每月 1000 通電話 | API 金鑰 |[連結](https://what3words.com/products)| |聰明街道 |地址驗證與地理編碼 |每月 250 個請求 | API 金鑰 |[連結](https://smartystreets.com/docs)| |地理化|地理編碼、路由和其他定位服務 |每月 30,000 個請求| API 金鑰 |[連結](https://apidocs.geoapify.com/)| --- 搜尋 API 🔍📑🕵️ ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌自訂搜尋|搜尋網路或特定網站 |每天 100 次查詢 | API 金鑰 |[連結](https://developers.google.com/custom-search/v1/overview)| |阿爾戈利亞 |快速、可靠的搜尋即服務 | 10,000 筆記錄 | API 金鑰 |[連結](https://www.algolia.com/doc/)| |必應搜尋 API |微軟Bing的搜尋結果|每月 3,000 通電話 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/cognitive-services/bing-web-search/)| |彈性搜尋|基於Lucene的搜尋引擎|免費套餐可用 | API 金鑰 |[連結](https://www.elastic.co/guide/en/elasticsearch/reference/current/search.html)| |斯威夫類型 |為您的網站客製化搜尋引擎 |每月 1000 個請求 | API 金鑰 |[連結](https://swiftype.com/documentation)| |美麗搜尋 |快速、開源搜尋引擎 |無限|無 |[連結](https://docs.meilisearch.com/)| |新增搜尋 |為您的網站客製化搜尋 |每天 50 次搜尋 | API 金鑰 |[連結](https://www.addsearch.com/docs/)| | Yandex 搜尋 API |使用 Yandex 搜尋網路 |每天 10,000 個請求 | API 金鑰 |[連結](https://yandex.com/dev/search/)| |雅虎搜尋 |使用 Yahoo | 搜尋網絡每天 5,000 次查詢 | API 金鑰 |[連結](https://developer.yahoo.com/boss/search/)| |沃爾夫拉姆·阿爾法 |計算知識引擎|每月 2,000 次查詢 | API 金鑰 |[連結](https://products.wolframalpha.com/api/documentation/)| |上下文網路搜尋|具有上下文過濾功能的網路搜尋 |每月 10,000 通電話 | API 金鑰 |[連結](https://rapidapi.com/contextualwebsearch/api/web-search)| |網站搜尋 360 |搜尋您的網站或應用程式 |每月 1,500 個請求 | API 金鑰 |[連結](https://www.sitesearch360.com/docs/)| | DuckDuckGo API |匿名搜尋網路 |無限|無 |[連結](https://duckduckgo.com/api)| |搜尋.io |搜尋即服務 | 1000 次操作/月| API 金鑰 |[連結](https://search.io/docs)| |阿帕奇·索爾 |高度可靠、可擴展的搜尋平台 |開源|無 |[連結](https://solr.apache.org/guide/)| --- 機器學習 API 🤖🧠🔮 ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌雲端機器學習 |機器學習服務與 API | $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/products/ai)| |亞馬遜 SageMaker |建置、訓練與部署機器學習模型 |免費套餐可用 | API 金鑰 |[連結](https://aws.amazon.com/sagemaker/)| | IBM 沃森 |人工智慧和機器學習服務 |免費套餐可用 | API 金鑰 |[連結](https://www.ibm.com/watson/products-services/)| |微軟 Azure 機器學習 |機器學習服務與 API | $200 免費贈金 | API 金鑰 |[連結](https://azure.microsoft.com/en-us/services/machine-learning/)| |擁抱臉|最先進的 NLP 模型和 API |免費套餐可用 | API 金鑰 |[連結](https://huggingface.co/docs)| |開放人工智慧 |包括 GPT-3 在內的 AI 模型 |免費套餐可用 | API 金鑰 |[連結](https://beta.openai.com/docs/)| | BigML |機器學習平台與 API |免費套餐可用 | API 金鑰 |[連結](https://bigml.com/)| |克拉里法伊 |影像影片辨識服務|免費套餐可用 | API 金鑰 |[連結](https://docs.clarifai.com/)| |資料機器人|機器學習模型部署與管理 |免費套餐可用 | API 金鑰 |[連結](https://www.datarobot.com/)| |猴子學習 |文字分析與機器學習 |每月 300 次查詢 | API 金鑰 |[連結](https://monkeylearn.com/api/)| |艾琳|自然語言處理與機器學習 |免費套餐可用 | API 金鑰 |[連結](https://aylien.com/text-api/)| |演算法|演算法市場與機器學習 API |每月 10,000 次查詢 | API 金鑰 |[連結](https://algorithmia.com/developers)| |法術|機器學習基礎設施和工具|免費套餐可用 | API 金鑰 |[連結](https://spell.run/docs)| |海王星.ai |機器學習模型管理與監控 |免費套餐可用 | API 金鑰 |[連結](https://neptune.ai/)| |維茲.ai |自訂機器學習模型建立 |免費套餐可用 | API 金鑰 |[連結](https://vize.ai/)| --- 截圖與圖片 API 📷🌐🖼️ -------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |截圖API |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://screenshotapi.net/documentation)| |網址框 |擷取螢幕截圖並將網頁轉換為 PDF |每月 100 次捕獲 | API 金鑰 |[連結](https://urlbox.io/docs)| |第2頁圖片 |網頁截圖| 1000 個螢幕截圖/月| API 金鑰 |[連結](https://www.page2images.com/)| |縮網 |擷取網頁的螢幕截圖和縮圖 |每月 1000 次捕獲 | API 金鑰 |[連結](https://www.shrinktheweb.com/)| |瀏覽 |抓取網站截圖 | 1000 點/月 | API 金鑰 |[連結](https://browshot.com/api/documentation)| |縮圖.ws |抓取網站截圖 |每月 500 個螢幕截圖| API 金鑰 |[連結](https://thumbnail.ws/)| |網址框 |抓取網站截圖 |每月 1000 次捕獲 | API 金鑰 |[連結](https://www.urlbox.io/)| |截圖圖層 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://screenshotlayer.com/documentation)| | APIFlash |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://apiflash.com/documentation)| | AbstractAPI 截圖 |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://www.abstractapi.com/website-screenshot-api)| |斯內皮托 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://snapito.com/)| |網站2PDF |將網頁轉換為 PDF |每月 100 次捕獲 | API 金鑰 |[連結](https://website2pdf.io/)| |截圖機 |抓取網站截圖 | 1000 個螢幕截圖/月| API 金鑰 |[連結](https://www.screenshotmachine.com/)| |斯蒂利奧 |自動網站截圖|每月 1000 次捕獲 | API 金鑰 |[連結](https://stillio.com/)| |寶石像素 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://www.gempixel.com/)| --- SEO API 🔍📈💡 ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |莫茲 | SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://moz.com/products/api)| |阿雷夫斯 | SEO 指標與資料 | 500 行/月 | API 金鑰 |[連結](https://ahrefs.com/api)| | SEMrush | SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://www.semrush.com/api/)| | Serpstat | SEO 指標與資料 |每天 1000 次查詢 | API 金鑰 |[連結](https://serpstat.com/api/)| |間諜福| SEO 指標與競爭對手分析 |每月 500 個請求 | API 金鑰 |[連結](https://www.spyfu.com/api)| | SEO 資料 |關鍵字、SERP 等的 SEO 資料 |每月 100 個請求 | API 金鑰 |[連結](https://docs.dataforseo.com/)| |認知SEO | SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://cognitiveseo.com/api/)| |雄偉| SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://developer.majestic.com/)| |搜尋引擎結果頁面 API |即時搜尋引擎結果 |每月 1000 個請求 | API 金鑰 |[連結](https://serpapi.com/)| | RankRanger | SEO 指標與排名追蹤 |每月 1000 個請求 | API 金鑰 |[連結](https://www.rankranger.com/api)| |流動性| SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://seobility.net/en/api/)| |光明本地|本地 SEO 資料和指標 |每月 1000 個請求 | API 金鑰 |[連結](https://www.brightlocal.com/api/)| |搜尋指標 | SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://www.searchmetrics.com/api/)| |統計 |即時搜尋引擎結果 |每月 1000 個請求 | API 金鑰 |[連結](https://getstat.com/api/)| |林迪|反向連結檢查器和 SEO 指標 |每月 1000 個請求 | API 金鑰 |[連結](https://www.linkody.com/api)| --- 購物 API 🛍️🛒📦 ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |亞馬遜產品廣告API |存取亞馬遜產品資料 |每月 1,000 個請求 | API 金鑰 |[連結](https://webservices.amazon.com/paapi5/documentation)| |易趣 API |存取 eBay 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.ebay.com/api-docs/static/apis.html)| |沃爾瑪API |存取沃爾瑪產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.walmart.com/)| |百思買 API |存取百思買產品資料 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.bestbuy.com/)| | Etsy API |存取 Etsy 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://www.etsy.com/developers/documentation)| |樂天 API |存取樂天產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://webservice.rakuten.co.jp/documentation/)| | Shopify API |存取 Shopify 商店資料和市場 |無限| API 金鑰 |[連結](https://shopify.dev/api)| | WooCommerce API |存取 WooCommerce 商店資料和市場 |無限| API 金鑰 |[連結](https://woocommerce.github.io/woocommerce-rest-api-docs/)| | BigCommerce API |存取 BigCommerce 商店資料和市場 |無限| API 金鑰 |[連結](https://developer.bigcommerce.com/api-reference)| |速賣通 API |存取 AliExpress 產品資料和市場 |每天 1,000 個請求 | API 金鑰 |[連結](https://developers.aliexpress.com/en/doc.htm)| |扎蘭多 API |存取 Zalando 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developers.zalando.com/)| |目標API |存取 Target 產品資料和市場 |每天 1,000 個請求 | API 金鑰 |[連結](https://developer.target.com/)| | Flipkart API |存取 Flipkart 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://affiliate.flipkart.com/api-docs)| |好市多 API |存取 Costco 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://costco.com/)| |家得寶 API |存取家得寶產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.homedepot.com/)| --- 開發者 API 💻🔧🛠️ ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | GitHub API |存取 GitHub 資料 |無限| OAuth |[連結](https://docs.github.com/en/rest)| |亞搏體育appGitLab API |存取 GitLab 資料 |無限| OAuth |[連結](https://docs.gitlab.com/ee/api/)| | Bitbucket API |存取 Bitbucket 資料 |無限| OAuth |[連結](https://developer.atlassian.com/bitbucket/api/2/reference/)| |特拉維斯 CI API |存取 Travis CI 資料 |無限| API 金鑰 |[連結](https://developer.travis-ci.com/)| |詹金斯 API |存取 Jenkins 資料 |無限| API 金鑰 |[連結](https://www.jenkins.io/doc/book/using/remote-access-api/)| | CircleCI API |存取 CircleCI 資料 |無限| API 金鑰 |[連結](https://circleci.com/docs/api/v2/)| | GitKraken API |存取 GitKraken 資料 |無限| API 金鑰 |[連結](https://support.gitkraken.com/developers/)| | Heroku API |存取 Heroku 資料和服務 |無限| OAuth |[連結](https://devcenter.heroku.com/articles/platform-api-reference)| |維塞爾 API |存取 Vercel 資料和服務 |無限| API 金鑰 |[連結](https://vercel.com/docs/api)| | Netlify API |存取 Netlify 資料和服務 |無限| OAuth |[連結](https://docs.netlify.com/api/get-started/)| | Firebase API |存取 Firebase 資料和服務 |無限| API 金鑰 |[連結](https://firebase.google.com/docs/reference/rest)| |數位海洋 API |存取 DigitalOcean 資料與服務 |無限| OAuth |[連結](https://developers.digitalocean.com/documentation/v2/)| |亞馬遜AWS官方博客存取AWS資料和服務|免費套餐可用 | API 金鑰 |[連結](https://docs.aws.amazon.com/)| | Azure API |存取 Azure 資料和服務 |免費套餐可用 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/azure-api-management/)| | Google雲端API |存取 Google Cloud 資料與服務 | $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/apis)| --- 旅行和交流 API 🛫🚗🚉 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |天巡 API |存取航班搜尋和預訂資料 |每天 500 個請求 | API 金鑰 |[連結](https://developers.skyscanner.net/docs)| |艾瑪迪斯 API |存取旅行預訂和搜尋資料 |每天 500 通電話 | API 金鑰 |[連結](https://developers.amadeus.com/)| |谷歌航班 API |存取航班搜尋和預訂資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developers.google.com/flights)| | Rome2Rio API |取得多式聯運旅行搜尋資料 |每天 1000 個請求 | API 金鑰 |[連結](https://www.rome2rio.com/documentation/search)| |軍刀 API |存取旅遊預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.sabre.com/docs/read/rest_apis)| |皮划艇 API |存取航班和酒店搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.kayak.com/)| | Expedia API |存取旅行預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developers.expediagroup.com/docs/apis)| | Priceline API |存取旅行預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.priceline.com/docs/apis)| | TripAdvisor API |存取旅遊評論和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer-tripadvisor.com/home/docs)| |愛彼迎 API |取得短期租賃資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.airbnb.com/docs)| | Lyft API |取得共乘資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.lyft.com/docs)| |優步 API |取得共乘資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.uber.com/docs)| | BlaBlaCar API |取得共乘資料 |每天 500 個請求 | API 金鑰 |[連結](https://dev.blablacar.com/docs)| | Yelp API |存取業務和評論資料 |每天 5000 個請求 | API 金鑰 |[連結](https://www.yelp.com/developers/documentation/v3)| |運輸API |取得公共交通資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.transportapi.com/docs)| --- 通訊 API 📞💬📧 ---------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | Twilio API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.twilio.com/docs/usage/api)| |發送網格 API |存取電子郵件發送服務 |每天 100 封電子郵件 | API 金鑰 |[連結](https://docs.sendgrid.com/)| |郵件槍 API |存取電子郵件發送服務 |每月 5,000 封電子郵件 | API 金鑰 |[連結](https://documentation.mailgun.com/en/latest/)| | Nexmo API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.nexmo.com/api)| |普利沃 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.plivo.com/docs/)| |推送 API |即時通訊服務|免費套餐可用 | API 金鑰 |[連結](https://pusher.com/docs)| |郵戳API |存取電子郵件發送服務 |每月 100 封電子郵件 | API 金鑰 |[連結](https://postmarkapp.com/developer)| |訊號線 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://signalwire.com/resources/docs)| |山魈API |存取電子郵件發送服務 |每月 2,000 封電子郵件 | API 金鑰 |[連結](https://mandrillapp.com/api/docs/)| |點擊發送 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.clicksend.com/docs/rest/v3/)| | Tropo API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.tropo.com/docs)| |鬆弛 API |存取 Slack 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://api.slack.com/)| |不和諧 API |造訪 Discord 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://discord.com/developers/docs/intro)| |縮放 API |存取 Zoom 視訊會議服務 |免費套餐可用 | API 金鑰 |[連結](https://marketplace.zoom.us/docs/api-reference/zoom-api)| |對講API |造訪 Intercom 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.intercom.com/intercom-api-reference)| --- 支付和金融 API 💳💸🏦 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |條紋 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://stripe.com/docs/api)| |貝寶 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.paypal.com/docs/api/overview/)| |廣場 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.squareup.com/reference/square)| |布倫特里 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.paypal.com/braintree/docs/guides/overview)| | Authorize.net API | 授權.net API獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.authorize.net/api/reference/index.html)| |格子 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://plaid.com/docs/)| |德沃拉 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.dwolla.com/guides/)| |明智的API |獲得國際匯款服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.transferwise.com/)| |世界支付 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.worldpay.com/docs)| | WePay API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.wepay.com/)| |革命 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://developer.revolut.com/docs)| | Xero API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.xero.com/documentation/api)| | QuickBooks API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.intuit.com/app/developer/qbo/docs/get-started)| |約德利 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://developer.yodlee.com/apidocs)| |直覺 API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.intuit.com/)| --- 分析與監控 API 📊📈📉 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌分析 API |存取 Google Analytics 資料 |免費套餐可用 | API 金鑰 |[連結](https://developers.google.com/analytics/devguides/reporting/core/v4)| |混合面板 API |存取 Mixpanel 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://developer.mixpanel.com/docs)| |振幅 API |存取 Amplitude 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.amplitude.com/developers/apis)| |熱罐 API |存取 Hotjar 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://developer.hotjar.com/docs)| |堆API |存取堆分析資料 |免費套餐可用 | API 金鑰 |[連結](https://docs.heap.io/docs)| | Piwik 專業版 API |存取 Piwik PRO 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://piwikpro.dev/documentation)| |段 API |存取細分分析資料 |免費套餐可用 | API 金鑰 |[連結](https://segment.com/docs/)| |瘋狂蛋API |存取 Crazy Egg 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.crazyegg.com/api)| |烏普拉 API |存取 Woopra 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.woopra.com/docs/api)| | Kissmetrics API |存取 Kissmetrics 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.kissmetrics.io/api)| |點擊 API |存取 Clicky 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://clicky.com/help/api)| |開放網路分析 API |存取開放網路分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.openwebanalytics.com/api/)| | Yandex Metrica API |存取 Yandex Metrica 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://yandex.com/support/metrica/quick-start.html)| |統計計數器 API |存取 StatCounter 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://statcounter.com/docs/)| | Chartbeat API |存取 Chartbeat 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://chartbeat.com/docs/api/)| --- 自然語言處理 (NLP) API 🗣️🔍💬 --------------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌雲端自然語言處理 |自然語言處理服務| $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/natural-language/docs)| | IBM 沃森 NLP |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://www.ibm.com/watson/services/natural-language-understanding/)| |微軟Azure NLP|自然語言處理服務| $200 免費贈金 | API 金鑰 |[連結](https://azure.microsoft.com/en-us/services/cognitive-services/text-analytics/)| |亞馬遜理解|自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://aws.amazon.com/comprehend/)| |文字剃刀 |自然語言處理服務|每月 5000 個請求 | API 金鑰 |[連結](https://www.textrazor.com/docs)| |艾琳 NLP |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://aylien.com/text-api/)| |猴子學習 |文本分析與自然語言處理 |每月 300 次查詢 | API 金鑰 |[連結](https://monkeylearn.com/api/)| |意義雲 |文本分析與自然語言處理 |每月 20,000 個請求| API 金鑰 |[連結](https://www.meaningcloud.com/developer/apis)| | NLP 演算法 |自然語言處理演算法 |每月 10,000 次查詢 | API 金鑰 |[連結](https://algorithmia.com/developers)| |維特人工智慧 |自然語言處理與聊天機器人整合 |免費套餐可用 | API 金鑰 |[連結](https://wit.ai/docs)| |詞法解析 |文本分析與自然語言處理 |免費套餐可用 | API 金鑰 |[連結](https://www.lexalytics.com/developers)| | SapienAPI |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://www.sapien.com/api)| |聊天機器人 |自然語言處理與聊天機器人整合 |免費套餐可用 |無 |[連結](https://chatterbot.readthedocs.io/en/stable/)| |蒂薩尼API |文本分析與自然語言處理 |每月 30,000 個請求| API 金鑰 |[連結](https://tisane.ai/documentation)| | DeepAI 文字 API |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://deepai.org/machine-learning-model/text-tagging)| --- 實用程式和工具 API 🛠️🔧⚙️ ----------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | IP資訊| IP 位址資訊與地理位置 |每月 50,000 個請求| API 金鑰 |[連結](https://ipinfo.io/developers)| |打開天氣地圖 |天氣預報資料,包括預報和當前天氣 | 60 次通話/分鐘 | API 金鑰 |[連結](https://openweathermap.org/api)| | Twilio API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.twilio.com/docs/usage/api)| |發送網格 API |存取電子郵件發送服務 |每天 100 封電子郵件 | API 金鑰 |[連結](https://docs.sendgrid.com/)| | Clearbit API |商業智慧資料|每月 50,000 個請求| API 金鑰 |[連結](https://clearbit.com/docs)| | IPStack | IP 地理定位與資訊 |每月 10,000 個請求| API 金鑰 |[連結](https://ipstack.com/documentation)| |抽象API |各種實用 API,如 IP 地理定位、電子郵件驗證 |每月 500 個請求 | API 金鑰 |[連結](https://www.abstractapi.com/)| | API 介面 |網頁抓取與自動化 |每月 10,000 個請求| API 金鑰 |[連結](https://docs.apify.com/api/v2)| |刮刀 API |網頁抓取工具|每月 5000 個請求 | API 金鑰 |[連結](https://www.scraperapi.com/documentation/)| |郵差 API | API開發與測試工具|無限| API 金鑰 |[連結](https://www.postman.com/api-documentation/)| |哨兵 API |應用程式監控與錯誤追蹤 |每月 5000 場活動 | API 金鑰 |[連結](https://docs.sentry.io/api/)| |條紋 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://stripe.com/docs/api)| | PDF.co API | PDF 產生與資料擷取 |每月 1000 個請求 | API 金鑰 |[連結](https://apidocs.pdf.co/)| |比特利API | URL 縮短與連結管理 |每月 1000 個請求 | API 金鑰 |[連結](https://dev.bitly.com/docs/)| | OpenCage 地理編碼 |正向和反向地理編碼 |每天 2,500 通電話 | API 金鑰 |[連結](https://opencagedata.com/api)| --- 政府和開放資料 API 🏛️📜📊 ---------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |資料.gov API |美國政府公開資料|無限|無 |[連結](https://www.data.gov/developers/apis)| |英國政府 API |英國政府公開資料|無限|無 |[連結](https://www.gov.uk/guidance/using-the-api)| |歐盟開放資料入口網站API |歐盟開放資料|無限|無 |[連結](https://data.europa.eu/euodp/en/developers-corner)| |世界銀行 API |全球發展資料|無限|無 |[連結](https://datahelpdesk.worldbank.org/knowledgebase/topics/125589)| |聯合國資料API |聯合國開放資料|無限|無 |[連結](https://data.un.org/Host.aspx?Content=API)| |經合組織資料 API |經合組織的經濟和社會資料|無限|無 |[連結](https://data.oecd.org/api/)| |人口普查 API |美國人口普查局資料|無限| API 金鑰 |[連結](https://www.census.gov/data/developers/data-sets.html)| |開放資料軟體 |不同來源的各種開放資料|無限| API 金鑰 |[連結](https://www.opendatasoft.com/)| |紐約市 API |紐約市開放資料 |無限|無 |[連結](https://opendata.cityofnewyork.us/)| |美國地質調查局API |美國地質調查局資料|無限| API 金鑰 |[連結](https://www.usgs.gov/products/data-and-tools/apis)| |美國宇航局API |存取 NASA 資料和圖像 |無限| API 金鑰 |[連結](https://api.nasa.gov/)| |開放狀態 API |美國各州立法資料|無限| API 金鑰 |[連結](https://openstates.org/data/)| |美國政府 API |美國政府資訊與服務|無限|無 |[連結](https://www.usa.gov/developer)| | Data.gov.au API |澳洲政府公開資料|無限|無 |[連結](https://data.gov.au/)| | HealthData.gov API |美國健康相關開放資料|無限|無 |[連結](https://healthdata.gov/)| --- \*\*如果您發現此內容有幫助, 請[買杯咖啡](https://buymeacoffee.com/deyurii)🌟✨\*\* --- 原文出處:https://dev.to/falselight/300-free-apis-every-developer-needs-to-know-3j76

建立出色的 GitHub 開發人員作品集。

在軟體開發領域,有效地展示您的工作以及您編寫的程式碼至關重要。作品集網站是開發人員展示其技能、專案和貢獻的絕佳方式。增強您的作品集的一種創新方法是整合 GitHub 統計資料,它可以提供有關您的編碼活動和貢獻的即時見解。 為了幫助其他開發人員實現這一目標,我從頭開始建立了一個新網站,重點介紹您的 GitHub 作品。該網站是使用 NextJS 和 Tailwind CSS 建立的,它從您的 GitHub 個人資料和工作中獲取所有資料。 *本文將逐步引導您完成設定過程,並且還將為您提供 GitHub 連結。* **這是即時預覽:**[即時預覽網址](https://github.abusaid.me/) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi8nc8kwy5vn42vk70zr.png) **步驟01:** 使用[GitHub 連結複製](https://github.com/said7388/github-portfolio.git)儲存庫並將目錄變更為 github-portfolio。 ``` git clone https://github.com/said7388/github-portfolio.git cd github-portfolio ``` **步驟02:** 現在使用`npm`或`yarn`安裝所有套件。 ``` npm install # or yarn ``` 安裝完所有套件後,現在根據您的情況更改`data/user-data.js`上的所有資料。例如: ``` export const userData = { githubUser: 'said7388', devUsername: "said7388", github: 'https://github.com/said7388', facebook: 'https://www.facebook.com/abusaid.riyaz/', linkedIn: 'https://www.linkedin.com/in/abu-said-bd/', twitter: 'https://twitter.com/said7388', stackOverflow: 'https://stackoverflow.com/users/16840768/abu-said', leetcode: "https://leetcode.com/said3812/", resume: "https://drive.google.com/file/d/1eyutpKFFhJ9X-qpQGKhUNnVRkB5Wer00/view?usp=sharing", skills: ['React', 'NextJS', 'Redux', 'Express', 'NestJS', 'MySql', 'MongoDB', 'Postgres', 'Docker', 'AWS'], timezone: '+6' }; ``` **步驟03:** 如果您想使用 Google Analytics,請從`.env.example`檔案建立新的`.env`檔案並提供值。 `.env`文件如下: ``` NEXT_PUBLIC_GTM = "" ``` **步驟04:** 現在 GitHub 作品集網站已準備好運作。您可以使用`npm`或`yarn`執行它。 ``` npm run dev # or yarn dev ``` 如果您喜歡這個 GitHub 組合專案,您可以考慮在[GitHub 儲存庫](https://github.com/said7388/github-portfolio)上給它一顆星。 您可以在 Linkedin 上與我聯絡: <https://www.linkedin.com/in/abu-said-bd/> > 免責聲明:在這個儲存庫中,我使用了一些開源 API。所有積分均歸這些儲存庫的擁有者所有。 --- 原文出處:https://dev.to/said7388/build-an-awesome-github-developer-portfolio-54ka

系統設計面試的 10 個微服務架構挑戰

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![微服務架構最佳實踐](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkibz6xn6xqibepgu9cz.png)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 朋友們大家好,如果您正在準備系統設計面試,那麼您也必須準備微服務架構。這是許多面試官最喜歡的架構,它提供了大量的材料來拷問你。 毫無疑問,微服務架構透過將單體應用程式分解為更小的、鬆散耦合的服務,徹底改變了軟體開發。 過去,我分享過幾篇系統設計面試文章,例如[API 網關與負載平衡器](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [正向代理與反向代理](https://medium.com/javarevisited/difference-between-forward-proxy-and-reverse-proxy-in-system-design-da05c1f5f6ad)以及[常見的系統設計問題](https://medium.com/javarevisited/7-system-design-problems-to-crack-software-engineering-interviews-in-2023-13a518467c3e),在本文中我們將討論微服務架構的挑戰。 它也是程式設計師必須了解的[基本系統設計主題或概念](https://medium.com/javarevisited/top-10-system-design-concepts-every-programmer-should-learn-54375d8557a6)之一。 雖然微服務方法承諾提高可擴展性、靈活性和更快的開發週期,但它也帶來了一系列挑戰,這對開發人員來說非常重要,不僅要了解這些挑戰,還要有效地解決這些挑戰。 雖然有很多文章討論微服務最佳實踐,但很少有文章闡述它們提供的好處以及它們解決的挑戰。 在本文中,我們將探討開發人員在使用微服務時所面臨的十大主要挑戰,並學習克服這些挑戰的有效策略。 順便說一句,如果您正在準備系統設計面試並想深入學習系統設計,那麼您還可以查看[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)等網站,它們有許多很棒的系統設計課程 此外,對各種微服務模式(例如服務發現、CQRS 和 Saga)的紮實了解對於解決我們將在本文中討論的許多挑戰大有幫助,就此而言,這裡有一個來自[DesignGuru.io](https://designgurus.org/link/84Y9hP)的漂亮圖表,說明如何微服務中的服務發現工作,我們將在本文後面使用此模式 [![微服務中的服務發現](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0ke14if9uyunsszj0lu.png)](https://www.designgurus.io/course/grokking-microservices-design-patterns?aff=84Y9hP) --- 微服務開發的10大挑戰及解決方案 ---------------- 以下列出了使用微服務架構建立應用程式時可能面臨的主要挑戰 ### 1. 服務溝通挑戰 如果您在現實世界的微服務架構中工作過,那麼您可能知道微服務嚴重依賴服務間通信,隨著服務數量的增長,這可能會成為一個挑戰。 由於每個服務都有自己的 API 和協議,管理通訊變得複雜。 為了解決這個問題,請採用 REST、訊息佇列和事件驅動架構等通訊模式。此外,請考慮使用[**API 閘道**](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)來集中通訊邏輯並處理橫切問題。 ![微服務架構挑戰](https://miro.medium.com/v2/resize:fit:609/1*I4tv-pLx4ccaaBTFzquzsA.png) --- ### 2. 資料管理挑戰 由於架構的分散性,跨微服務的資料管理可能會很複雜。不一致的資料模型和維護資料一致性帶來了困難。 為了解決這個問題,您可以實施多語言持久性策略,使用適合每個服務特定需求的資料庫。 您還應該利用事件來源和[**CQRS(命令查詢職責分離)**](https://javarevisited.substack.com/p/how-cqrs-pattern-works-in-microservices)等技術來維護資料完整性以及讀寫操作的分離。 [![微服務的資料管理挑戰](https://miro.medium.com/v2/resize:fit:609/1*XKdhM77EN6isbz5eeH2K9A.jpeg)](https://medium.com/javarevisited/what-is-cqrs-command-and-query-responsibility-segregation-pattern-7b1b38514edd) --- ### 3. 分散式追蹤與監控挑戰 由於請求跨越多個服務,監控和除錯微服務應用程式變得非常具有挑戰性。傳統的監控工具可能無法提供所需的可見度。 為了解決這個問題,您應該整合 Jaeger 或 Zipkin 等分散式追蹤系統來追蹤跨服務的請求。 您還可以使用集中式日誌記錄和監控解決方案來聚合和分析來自各種服務的日誌和指標,有助於早期發現問題。 對於開發人員來說,微服務中的偵錯問題是處理和了解 Zipkin 等追蹤系統真正運作的最大挑戰之一。 ![微服務架構中的分散式追蹤與監控挑戰](https://miro.medium.com/v2/resize:fit:609/1*MRyM0qiMBljjsfnoemCAeg.png) --- ### 4. 服務編排與編排挑戰 微服務可以集中編排,也可以以分散的方式編排。這兩種方法都有其挑戰。 編排服務可能會導致單點故障,而編排可能會導致追蹤流程的複雜性和難度增加。 在這種情況下,您應該努力尋求平衡,對關鍵工作流程採用編排,並對可以獨立運作的服務進行編排。 ![微服務中的服務編排與編排挑戰](https://miro.medium.com/v2/resize:fit:609/1*O_AFZvulWl5ZZYE1BG7hYQ.png) --- ### 5. 部署與 DevOps 挑戰 微服務的部署涉及管理多個服務實例並確保不同環境之間的相容性。使用傳統方式部署微服務幾乎是不可能的。 使用 Docker 等工具的容器化和使用[Kubernetes 的](https://medium.com/javarevisited/top-15-online-courses-to-learn-docker-kubernetes-and-aws-for-fullstack-developers-and-devops-d8cc4f16e773)編排可以幫助標準化部署流程,事實上,如果您想要穩健的話,它們是必須的。 您還應該採用**DevOps 實踐**並自動化部署管道,以確保微服務的一致性和快速部署。 ![微服務中的部署與 DevOps 挑戰](https://miro.medium.com/v2/resize:fit:609/1*Bxoxd1eCCtPyJzMtLeFVYw.jpeg) --- ### 6. 跨服務挑戰的測試 測試微服務一點也不容易,由於其互動的複雜性,它需要一個全面的策略。 傳統的單元測試可能還不夠。 為了解決這個問題,您可以結合整合測試、合約測試和端到端測試來驗證服務互動和資料流。 您還應該實施一個強大的[CI/CD 管道](https://javarevisited.blogspot.com/2018/09/top-5-jenkins-courses-for-java-and-DevOps-Programmers.html),以在整個微服務生態系統中自動進行測試。 ![應對微服務中的服務挑戰](https://miro.medium.com/v2/resize:fit:609/1*fKlBw13XQ5RyazLXl2MIIQ.png) --- ### 7. 安全和存取控制挑戰 微服務可能會暴露大量端點,從而增加潛在的攻擊面。大多數時候,您甚至不會意識到這一點,但不用擔心,幾乎所有大型組織都有龐大的安全團隊,高薪來騷擾您。 就您而言,您應該確保跨服務的安全性,管理身分驗證和授權以及保護傳輸中的資料會帶來重大挑戰。 採用零信任安全模型,實作[OAuth2](https://medium.com/javarevisited/5-best-online-courses-to-learn-oauth-2-0-and-jwt-in-2023-719fd63c834)和[JWT(JSON Web Tokens)](https://medium.com/javarevisited/difference-between-jwt-oauth-and-saml-for-authentication-and-authorization-in-web-apps-75b412754127)等 API 安全標準,並採用具有強大存取控制機制的 API 閘道。 ![微服務中的安全性和存取控制挑戰](https://miro.medium.com/v2/resize:fit:609/1*GP0lglBapQS929e3Paf1ng.png) 積分 --- superTokens --- ### 8. 可擴展性和資源分配 可擴展性是微服務的核心承諾,也是許多公司放棄單體應用而轉向微服務的主要驅動力之一,但它需要仔細規劃。 某些服務可能會遇到比其他服務更重的負載,導致資源分配挑戰。 您應該利用容器**編排平台**和工具(例如 K8)根據需求動態分配資源。 您也可以根據 CPU 使用率或請求率等指標實施自動擴展,以確保最佳的資源使用率。 [![微服務中的可擴展性和資源分配挑戰](https://miro.medium.com/v2/resize:fit:609/1*JH4N7C199Gl3dhc2sh3xHQ.png)](https://medium.com/javarevisited/difference-between-horizontal-scalability-vs-vertical-scalability-67455efc91c) --- ### 9. 版本控制和相容性挑戰 隨著微服務的獨立發展,保持向後和向前相容性變得至關重要。 不相容的更改可能會破壞整個系統。 作為經驗豐富的開發人員或技術主管,您應該在程式碼層級和通訊協定中實作 API 的版本控制。 您也可以利用語意版本控制來清楚傳達相容性期望。逐步淘汰舊版本,同時為遷移提供足夠的支援和文件。 ![微服務中的版本控制和相容性挑戰](https://miro.medium.com/v2/resize:fit:609/1*xezI58bd7nSSjW35u2XfGQ.jpeg) --- ### 10.組織複雜性和溝通挑戰 微服務架構可以反映組織的結構,從而導致溝通和協作方面的挑戰,例如不同的團隊管理不同的微服務。 從事不同服務的跨職能團隊需要協調他們的工作,這一點很重要。 作為經驗豐富的專家,您應該透過定期會議、分享文件和促進資訊交換的工具來培養溝通和協作的文化。 ![組織複雜性與溝通挑戰](https://miro.medium.com/v2/resize:fit:609/1*6-rMCG_PZDnt1Z1RWvPWyg.jpeg) --- ### 系統設計訪談資源: 而且,這裡列出了最佳系統設計書籍、線上課程和練習網站,您可以查看這些內容,以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 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 公司,他們還有很棒的系統設計課程和許多其他材料,可以幫助您破解 FAANG 面試。 而且,這是一個很好的系統設計面試備忘錄,可以快速修改基本的系統設計概念: [![系統設計面試備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ooidxg5v3bopt7a6uf4.png)](https://bit.ly/3cNF0vw) image\_credit - [tryExponent](https://bit.ly/3cNF0vw) ### 結論 這就是關於微服務架構挑戰以及如何應對這些挑戰的全部內容。微服務架構在可擴展性、靈活性和更快的開發方面提供了顯著的優勢。 然而,這些優勢也伴隨著開發人員必須有效應對的一系列獨特挑戰。 透過在服務通訊、資料管理、監控、測試、安全性等方面採用最佳實踐,團隊可以克服這些挑戰並釋放微服務的全部潛力。 隨著軟體開發環境的不斷發展,解決這些挑戰對於成功實施微服務仍然至關重要 雖然我寫這篇文章是為了準備系統設計面試,但對於使用微服務並希望獲得更多控制和更好組織的經驗豐富的開發人員來說,它同樣有價值。 微服務開發一切順利! **獎金**\\ 正如承諾的,這是給你的獎金,一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計,您也可以在 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://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%2Fso5r1wv8x95i74nz6p89.png)](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%2Fso5r1wv8x95i74nz6p89.png) --- 原文出處:https://dev.to/somadevtoo/10-microservices-architecture-challenges-for-system-design-interviews-6g0

為什麼你應該自行託管一切

在當今的數位時代,似乎一切都是基於訂閱的。如果您不支付服務費用,您可能會透過觀看廣告或向不一定將您的最佳利益放在心上的公司提供個人資料來獲利。網路已成為一個被污染的空間,我們的線上活動被追蹤並出售給最高出價者。 大多數公司都試圖利用人類行為來獲取利潤。 但有一種方法可以收回控制權:自託管。 **中心化的問題** 當您使用 Netflix、Facebook、Dropbox 或 Microsoft Office 360 等流行服務時,您是將資料委託給沒有義務保證其隱私或安全的公司。這些公司經常在未經您同意的情況下收集和出售您的資料以實現利潤最大化。這種資訊的集中化創造了一種監視狀態,我們的線上活動受到監視和分析以獲取商業利益。在某些情況下,您需要支付兩次費用:使用資料和錢包。現在,當你的儲存庫突然被用來訓練人工智慧模型(如果你有機會使用 Github)時,這種情況比以往任何時候都更加明顯。 **替代方案:家庭實驗室伺服器** 自託管不僅僅是將資料從一個集中位置移動到另一個位置;這是關於掌控您的數位生活。透過設定家庭實驗室伺服器,您可以儲存文件、與他人通訊以及存取您喜歡的服務,而無需依賴第三方公司。借助家庭實驗室伺服器,您可以完全控制您的資料,並確保其保持隱私和安全。為了實現這一目標,您需要非常可靠的 NAS(例如 Synology)或微型 PC(例如 Intel NUC)。不幸的是,Raspberry Pi 無法做到這一點,除非您執行最多 4 個輕量級容器。 **成本比較** 雖然設置家庭實驗室伺服器可能需要投入時間和金錢,但從長遠來看,它通常更具成本效益。例如: - 雲端服務 x4:每月 10 美元 x 12 個月 x 4 = 480 美元 - Intel NUC 或 Synology NAS:約 300-500 美元(取決於您選擇的選項) 因此,根據您的情況和您目前訂閱的服務數量,家庭實驗室的費用將在大約一年內收回! 當然,這還需要時間成本和所需的維護,但透過正確的設置,這可以是最少的努力。 **HomeLab 可能的解決方案** 正如我所提到的,最好的選擇並不是那麼昂貴,您所需要的只是一台微型電腦。以下是符合基於 docker 的可靠家庭實驗室的良好選項的清單: - [Intel Nuc 11 i-7,32GB RAM,1TB](https://amzn.to/4aRU8R3) 550 美元 - 堅實的起點,具有相當多的儲存空間和大量 RAM。 - [Intel Nuc 11 i-7,裸機](https://amzn.to/4bUQy9C)390 美元 - 無內存,無存儲選項,如果您想從頭開始自行升級 - [Intel NUC 11、Celeron N5105、8GB RAM、256GB SSD](https://amzn.to/3KgLkZW) 240 美元 - 低預算選項,我知道 - 它是具有相同 RAM 量的 RPi 5 的兩倍,但說實話 - 你無法擴展 Raspberry Pi - [Raspberry Pi 5,8GB](https://amzn.to/4bVYpDY) 95 美元 - 為了完成。您仍然需要購買 SD 卡。但你至少可以在上面設定 Pi.Hole 和 Pi.Alert。 - [Synology 2-Bay NAS DS223,2GB RAM,無盤](https://amzn.to/3Kjwpy2)250 美元 - 適合那些更重視儲存空間而不是運算能力的人。正如你所看到的,與 NUC 相比,它的 RAM 並不多。 - [Synology DS723 2-Bay、2GB RAM、8TB 儲存](https://amzn.to/3Kjwpy2)990 美元 - 更強大的機器,具有相當穩定的 CPU,但仍在 2GB RAM 範圍內。有些版本甚至預先安裝了 docker。 總的來說,正如您所看到的,IntelNUC 可能看起來是更具成本效益的解決方案,但是NAS 有其自身的優勢,通常附帶預先安裝的作業系統和管理器,您可以在其中自行部署docker。 **使用 Docker 輕鬆部署** 設定家庭實驗室伺服器不一定是一項艱鉅的任務。我們需要的是我們機器上的 ubuntu 或 debian 作業系統。 透過 Docker 或 Podman 等容器化平台,您可以輕鬆部署和管理您的服務,而無需廣泛的技術專業知識。在初始設定和 ssh 暴露到本機網路後,您甚至不再需要連接顯示器和鍵盤,除非再次升級整個系統! 您可以在以後的文章中閱讀我是如何做到的。但目前,我們的設定還需要一步。 **開源社群** 開源社群正在蓬勃發展,許多自架服務都是建立在這些協作努力之上的。現在,我們比以往任何時候都更有大量的開源軟體「就在 GitHub 上」。 其中許多軟體都為 docker 提供了簡單的一行設定。 docker 最好的一點是,你不必擔心依賴關係。知道他們最好的是什麼嗎?因為它們是開源的,這意味著您也可以貢獻自己!您缺少一項功能嗎?您發現了錯誤並修復了它嗎?建立拉取請求、報告、貢獻!這就是開源社群蓬勃發展的原因。透過建立家庭實驗室環境,沒有什麼可以阻止您建立自己的 Docker 託管工具! **結論** 自行託管和執行家庭實驗室從未如此簡單。不久前,我正在執行 Proxmox 並為我需要的一切建立 VM。問題是,虛擬機器佔用大量資源,如果沒有 RACK,它們非常不可靠,除非您進行滲透測試並且需要 3-4 個環境。帶有 docker 的單一作業系統使其變得更加容易!透過自架網站一切,您將享受許多其他好處: - **隱私**:您的資料保持私密且安全,遠離窺探。您擁有自己的資料,而不是第三方。 - **控制**:您可以完全控制正在執行的內容。您擁有伺服器。除了您之外沒有人可以存取該伺服器。 - **靈活性**:您可以選擇最適合您需求的服務和軟體,而不必局限於特定的生態系統。如果需要,您可以將它們整合起來,也可以將它們分開。 - **財務效益**:從長遠來看,自託管比依賴訂閱制的服務更具成本效益。 在資料成為新貨幣的時代,是時候重新掌控我們的線上活動了。自託管一切提供了資訊集中化的強大替代方案,並提供了一種確保您的數位生活保持私密、安全和靈活的方法。立即加入自託管運動,開始收回您的數位主權! --- 原文出處:https://dev.to/sein_digital/why-you-should-self-host-everything-2f31

在 localhost 設定 SSL 其實只需要 5 秒!

為什麼有人需要為 localhost 開發設定 ssl? - 在安全的環境中測試您的 Web 應用程式。 - 一些 OAuth 提供者需要 ssl(例如 Google)。 - 測試並找出您的應用程式中是否存在潛在的安全風險(混合內容)。 - 在部署應用程式之前,您需要使用 CORS 和 cookie。 - 在安全的環境中測試服務人員。 - 在安全環境中測試網路推播通知。 身為開發人員,我們都經歷過這種情況。 有困難的方法,也有容易的方法。 如果你在網上搜尋,你只會發現很難的方法。 為本地主機設定 SSL 看似簡單的任務可能會令人驚訝地變成一個長達數小時的考驗,糾纏在手動配置(第一次從來沒有工作)和重複步驟中。 ### 本機上的硬(手動且繁瑣)SSL 設定 傳統上,為 localhost 設定 SSL 涉及一系列繁瑣的步驟: **產生自簽名憑證:**最初,您需要手動建立瀏覽器不可避免地不信任的憑證,然後才能開始。 **編輯 /etc/hosts 文件:**接下來,深入研究 /etc/hosts 等系統文件,將所需的網域(例如 local.whatever)對應到 127.0.0.1。這通常需要像 vi 或 nano 這樣的命令列工具,但並不是每個人都喜歡使用這些工具。 **本機啟動 Web 伺服器:**無論是 Apache、Nginx 或其他伺服器,您都需要在電腦上下載並設定 Web 伺服器。 (我不喜歡,因為它們可能會弄亂我的電腦) **配置 Web 伺服器:**這涉及調整伺服器設定檔以辨識您的新主機名稱和憑證,通常需要您深入研究文件以獲得正確的語法和路徑。 **信任憑證:**最後,您必須說服您的電腦信任您產生的憑證,這通常涉及一些更晦澀的命令或深入探討鑰匙圈存取的廢話。 這個過程不僅麻煩,而且**「每次」**你開始一個新專案或想要快速測試某些東西時都會重複執行。 但現在,5秒內就可以完成。 ### Ophiuchi 簡介:本機 SSL 代理程式變得簡單 現在,想像一個工具可以將所有這些步驟濃縮為快速、無縫的操作。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/142or0wk768jq5ygcgl9.png) 有了 Ophiuchi,為本地主機專案設定 SSL 的整個過程就減少到了幾種類型和點擊次數。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12jdugzgqk61gig10246.png) 以下是它如何簡化每個步驟: **自動憑證產生:** Ophiuchi 會自動處理指定網域的自簽名憑證的建立。無需命令列。沒有麻煩。 **網域對映:** Ophiuchi 使用您選擇的任何網域名稱自動更新您的 /etc/hosts 文件,將其直接對應到您的本機主機環境。 **整合 Web 伺服器:**無需下載和設定單獨的 Web 伺服器; Ophiuchi 附帶了一個整合解決方案,該解決方案已預先配置為開箱即可使用您的 SSL 設定。 (Docker 是必要的。但大多數開發人員自然會使用 docker 來做其他事情。) **即時信任:** Ophiuchi 包含一項功能,可以自動將憑證新增至系統的受信任清單中,從而繞過那些煩人的瀏覽器關於不受信任憑證的警告。 **刪除是EZ:**當您使用完代理伺服器後想要刪除嗎?上面的工作流程只是相反! **它也很安全:**所有內容(憑證、設定檔)永遠不會離開您的計算機,也不會透過網路共用。 --- ### 為什麼要浪費時間? 時間很寶貴。為什麼像透過 HTTPS 進行測試這樣基本的事情會成為開發工作流程中的障礙?有了蛇夫座,就不再是這樣了。該工具是由開發人員為開發人員設計的,他們了解您的時間最好花在建立上,而不是配置上。 無論您是在處理個人專案還是測試企業級應用程式,Ophiuchi 都能確保您只需單擊幾下滑鼠即可順利、快速地在本機上從 HTTP 轉換為 HTTPS。過去需要幾個小時的事情現在只需幾秒鐘,讓您可以專注於真正重要的事情:建立出色的軟體。 我不得不提的是它仍然是阿爾法。但我時不時地使用它。我的隊友也經常使用蛇夫座,他們變得比以前更快樂! 為什麼不試試呢? https://www.ophiuchi.dev --- 編輯: === 我(作者)是這個應用程式的建立者。 正如評論中提到的,我知道安全風險是本機桌面應用程式的首要任務。此應用程式的所有版本均已/將由 Apple 進行公證,以確保額外的安全性。下一次更新將包括用戶手動複製和貼上到終端的替代方法,以獲得額外的安全選項! 您可以查看一個 Twitter 帳戶,如果您有任何疑問,可以自由加入一個 Discord 頻道! 😃 (推特)\[https://x.com/get\_ophiuchi\] (不和諧)\[https://discord.gg/fpp8kNyPtz\] --- 原文出處:https://dev.to/cheeselemon/ssl-in-localhost-takes-5-seconds-now-460i

為什麼 Theo 是錯的 & 我們會得到一個 JavaScript 版的 Laravel

JavaScript 對全端框架的需求 ------------------- 「*為什麼我們沒有適用於 JavaScript 的 Laravel?」。*這是[西奧在他最近的影片中提出的](https://www.youtube.com/watch?v=yaodD79Q4iE)問題。 如果您不熟悉[Laravel](https://laravel.com/)和[Ruby-on-Rails](https://rubyonrails.org/)等工具,它們是固執己見的全端框架(適用於 PHP 和 Ruby),具有許多遵循既定約定的內建功能,以便開發人員可以編寫更少的樣板檔案和更多的業務邏輯,同時將行業最佳實踐融入他們的應用程式中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dndfaz2hjet9nisbiimc.png) 他回答這個問題時認為 JavaScript*不需要*這樣的框架,因為最好選擇你想要的工具並自己建立你需要的解決方案。 這聽起來很棒——如果你是一位經驗豐富的開發者,這也恰好是一個很好的靈活性——但我覺得他並沒有很好地支持這一說法,**我來這裡是為了告訴你我認為他錯在哪裡**。 在我看來,更好的問題是為什麼我們*還*沒有適用於 JavaScript 的 Laravel?答案是我們仍在努力。 在他對 JavaScript 世界中可以與 Laravel 或 Rails 相媲美的全端框架的總結中,他沒有考慮到一些重要的點: 1. **人們真的想要一個 Laravel/Rails for JavaScript** 。如果他們不這樣做,就不會進行如此多的嘗試來建立一個,他也不會製作一個影片,其唯一目的是回應“*為什麼 JAVASCRIPT 沒有自己的 Laravel!?* 」 2. **他沒有考慮 JS 生態系中底層工具的時機和成熟度**。也許並不是說 Laravel for JavaScript*不需要*存在,只是由於生態系統本身存在一些重大差異,例如它們的歷史有多長以及創新主要發生在哪裡,所以它還不存在。 3. **他也沒有詢問這些類型的解決方案適合誰**。當然,並非所有開發人員都有相同的目標,因此有些人可能會選擇可組合方法,而有些人則喜歡使用框架。 那麼讓我們看看我們是如何走到今天這一步的,以及我們如何能夠將像 Laravel 或 Rails 這樣的全端框架引入 JavaScript 世界。 完成任務 ---- 在他的影片中,Theo 提出了這樣一個觀點:「*現在 React 世界裡有一句俗話,那就是『如果你不使用框架,那麼你就在建立一個框架』」。*批評,Theo 認為大多數JavaScript 開發人員都沒有抓到重點,建立自己的「自己的框架」實際上是一種優勢。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5ft5f1j2zemurcvvzzk.png) 他認為 JavaScript 生態系統的模組化特性是一個巨大的優勢,但這聽起來對普通開發人員來說承受著很大的壓力,需要做出不必要的判斷呼叫並管理大量樣板程式碼。 當然,您的團隊需要創新並滿足特殊用例的需求。這些是優先考慮模組化的。他們盡可能調整、改進和榨取開發人員體驗 (DX) 和性能,以正確完成他們獨特的工作。 但另一方面,也有許多團隊的主要目標是在他們正在建立的產品方面創造價值和創新,而不是他們用來建立產品的工具。這些開發人員會青睞一個允許他們只專注於業務邏輯的框架。這為他們提供了一種穩定的方式來建立具有最佳實踐的東西,以便他們可以輕鬆地從一個專案推進到另一個專案。在這個陣營中,還有精幹、刻薄的獨立駭客,他們正在尋找框架,以便他們能夠快速行動並將想法推向市場! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21tanpp8rmrboal0jl57.png) 這有點像Mac和Linux之間的差別。 Mac 的統一堆疊開箱即用,這意味著許多專業人士因其生產力而喜歡它,而如果您尋求靈活性並有時間和知識來根據自己的需求進行調整,那麼 Linux 是很棒的選擇。兩者都是有效的解決方案,可以共存以滿足不同的需求。 這種對生產力的關注使得 Rails 在當時如此強大,也是 Laravel 目前如此受歡迎的框架的原因。建立這樣一個 JavaScript 框架的多次嘗試足以證明,有很大一部分 JavaScript 開發人員也想要這樣的解決方案。 但也許這樣一個框架還不存在的原因與開發人員是否想要一個框架無關,而是為了使這樣一個框架組合在一起所需的重要因素直到現在才協調一致。為了使這樣的框架廣泛採用,它首先需要足夠穩定的底層技術來建造。之後,它需要時間和許多迭代周期才能達到成熟度,以便開發人員可以放心採用它。 這些因素在 JavaScript 世界中是否一致,為我們提供了 PHP 和 Ruby 已經擁有的框架類型?也許還沒有,但他們似乎正在慢慢走在一起。 比較生態系統 ------ Theo 的要點之一是JavaScript 作為一種語言能夠實現一定程度的模組化和可組合性,而Ruby 和PHP 等語言則無法做到這一點,這就是為什麼Ruby 和PHP 生態系統可以得到全端框架的良好服務,但JavaScript*不需要因為*你可以自己創作東西。 雖然 JavaScript 是一種特殊的語言,它支援函數式和命令式範式以及動態特性,但它也有很多缺陷(儘管它最近已經有了很大的改進),所以你通常不會聽到它在就像西奧在這裡所做的那樣。事實上,您可能更有可能聽到 Ruby 及其作為模組化和靈活語言特性的讚揚。 因此,如果 JavaScript 作為一種語言的一些獨特屬性使它成為 Web 開發之王,那麼它又是什麼呢? ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r051nlojgrvt9crc03jd.png) 嗯,答案非常簡單: **JavaScript 是瀏覽器的語言**。 *早在*大多數 Web 開發都發生在伺服器端的時候,PHP、Java、Ruby 和其他語言佔據了主導地位。在這個時代,開發人員只會用 JavaScript 寫一小部分功能,因為大部分的工作都是在伺服器端處理。 但隨著Web 開發的發展,我們開始建立更豐富的應用程式,具有更動態、響應更快和即時的功能,許多程式碼從伺服器轉移到客戶端上的JavaScript,因為它(基本上)是唯一可以實現的語言。因此,您不再主要使用 PHP 或 Ruby 進行開發,並在其中撒上一點 JavaScript,而是將應用程式劃分為客戶端上的大量 JavaScript,以及伺服器上的 Ruby 或 PHP。 隨著 NodeJS 的到來以及在伺服器上編寫 JavaScript 的能力,JavaScript 的最後一個權力舉措隨之而來,這鞏固了它作為 Web 開發語言之王的地位。如今,開發人員可以(而且確實)用 JavaScript 編寫整個應用程式。這意味著您需要更少地了解一種語言,同時您也可以在前端和後端之間共用程式碼。這為前端和後端之間更好的整合開闢了一條途徑,它已經像滾雪球一樣進入了我們今天所知的生態系統。 因此,與其說 JavaScript 作為語言的獨特屬性使其成為 Web 開發的主導生態系統,不如說是其作為唯一可用於編寫客戶端程式碼的語言的獨特壟斷地位,而且它還可以用於伺服器 -邊。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulc5eo5qu3a0nuv6bnv5.png) 正如 Theo 所說,「在 JavaScript 生態系統中*,我們有無數的人正在製定出色的解決方案*」。這是正確的。正是那些在該領域工作的無數開發人員為 JavaScript 建立了靈活性和模組化解決方案,而不是程式語言的固有品質。 由於 JavaScript 生態系統仍然是最熱門的生態系統,因此它擁有最多的開發人員,同時每天不斷吸引新的開發人員。這意味著我們擁有一個龐大、多元化的社區,主要做兩件事: 1. 創新 2. 大樓 創新者(和影響者)往往聲音最大,因此輿論很大程度上偏向他們。但也有很多建築或「正常」使用正在發生!只是創新者往往代表建設者說話。 那麼,鑑於 JavaScript 生態系統中正在發生的一切,嘗試為 JavaScript 開發人員建立一個持久的框架是否毫無意義,正如 Theo 所建議的那樣,或者無論創新者如何聲稱,我們是否都在實現這一目標? 顯示您正在使用的內容 ---------- Theo 也提到了目前一些 JavaScript 框架的名字,這些框架要么未能成功,要么在成為全面的全端解決方案時「*似乎無法做到正確*」。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/susa9icldz2hzysqo1qm.png) 他的觀點確實有道理。到目前為止,像[Blitz](https://blitzjs.com/) 、 [Redwood](https://redwoodjs.com/) 、 [Adonis](https://adonisjs.com/)或[T3](https://create.t3.gg/)這樣的解決方案還沒有能夠像 Rails 或 Laravel 一樣在其生態系統中普及。 **但這些事情需要時間。** 看看上面的圖表。 Laravel 和 Rails 已經存在了 13-15 年!相較之下,使用的 JavaScript 框架才剛起步,其中一些框架(例如[Wasp](https://wasp-lang.dev)和[Redwood](https://redwoodjs.com/) )正處於與 Laravel 和 Rails 最初幾年類似的開發階段。 正如您所看到的,好的解決方案需要時間才能成熟。即使其中一些框架開始停滯其最初的巨大增長,也證明對這些工具的需求確實存在! 困擾這些工具的主要問題是 Javascript 作為一個生態系統正在快速發展,因此對於像這樣的解決方案要長期生存,它不僅需要足夠固執己見,而且還需要足夠模組化以跟上生態系統的變化。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/biqe18hoeb6d06ughjhh.png) 阻止框架達到這種狀態的一個因素是與錯誤的技術連結得太緊密。這是 BlitzJS 的 NextJS、Redwood 的 GraphQL 和 MeteorJS 的 Blaze。另一個因素是框架*不夠大*,因為在JavaScript 生態系統中,這似乎是一項過於艱鉅的任務,在這個生態系統中,事情發展得很快,每個人都“害怕固執己見”,因為他們可能會受到現場最響亮聲音的批評。 換句話說,避免自行發展壯大並*真正*實現全端的框架(如 Ruby-on-Rails 和 Laravel)就錯過了解決持續困擾 JavaScript 開發人員的最常見痛點的機會。 但是,JavaScript 生態系統正在成熟和穩定,我們正在從以前的嘗試中學習,並且*將會*出現一個足夠大膽的全端框架,可以一路走下去,做足夠多的事情,並堅持足夠長的時間以確保其地位。 向黃蜂打個招呼 ------- Theo 在比較當今市場上的 JavaScript 框架時,也沒有提到我們目前正在開發的 React 和 NodeJS 全端框架[Wasp](https://wasp-lang.dev) 。 我們一直在努力讓[Wasp](https://wasp-lang.dev)成為*真正的*全端框架,滿足 Web 開發人員的需求,並填補 JavaScript 生態系統的空白,成為他們喜歡使用的框架。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7j67hychqw770nrau3f.png) **對於 Wasp,我們決定做大、有主見、真正的全端**。換句話說,我們將*全力支持*這個框架。 這意味著從首要原則出發思考並設計一種只有Wasp 使用的新穎方法,例如為我們的配置語言建置我們自己的編譯器,並真正實現全棧,同時保持其足夠的模組化,以便隨著生態系統的發展與生態系統一起發展。 這意味著我們在一開始就花了更多的時間嘗試不同的方法並建立基礎,最終從 2023 年底開始使我們的使用量大幅躍升。 今天看到 Wasp 被用來發布大量新應用程式和業務,甚至被一些大公司和組織內部使用(更多資訊很快就會正式發布),這對我們來說真的很酷! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eo9feum42heb2qcua9o.png) Wasp 與 JavaScript 世界中其他全端框架的不同之處在於,它將主要抽象層分離到自己的設定檔`main.wasp`中。這個設定檔為Wasp 提供了處理大量樣板檔案、以基礎設施為中心的程式碼所需的知識,並允許它擁有這個獨特的初始編譯時步驟,在該步驟中,它能夠在生成Web 應用程式之前推理出您的Web 應用程式在後台為其編寫程式碼(在生成它時使用該知識)。 實際上,這意味著您所要做的就是在 Wasp 的設定檔中高層描述您的 Wasp 應用程式,然後使用您熟悉的技術(例如 React、NodeJS 和 Prisma)實現其他所有內容。這也意味著 Wasp 具有很高的模組化潛力,這意味著我們正在建立它來支援未來的其他前端框架,如 Vue、Solid 或 Svelte,甚至支援其他後端語言,如 Python、Go 或 Rust。 如果您是那種希望存在 Rails 或 Laravel for JavaScript 的開發人員,那麼您應該[嘗試 Wasp](https://wasp-lang.dev/) (然後[進入我們的 Discord](https://discord.gg/rzdnErX) ,讓我們知道您的想法)! 我們要去哪裡? ------- 我們堅信 JavaScript 將會有一個全端框架,就像 PHP 的 Laravel 和 Ruby 的 Ruby-on-Rails 一樣。 目前看來,我們仍在努力實現這一目標。鑑於當前元框架和堆疊(例如 NextJS 和 T3)的流行,我們似乎很快就會實現這一目標。 但這些東西需要時間和耐心。 另外,你必須有足夠的勇氣去嘗試新的東西,因為你知道你的工作會受到生態系統中一些最響亮的聲音的批評。 這就是我們所準備的,也是我們*全力*支持黃蜂的原因。 到時候那裡見! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nig9t4pr85jqtz536frn.png) --- 原文出處:https://dev.to/wasp/why-we-dont-have-a-laravel-for-javascript-yet-45bi

您把 Git commit 訊息寫對了嗎?

當涉及版本控制時,Git 是一個非常有效的工具。然而,像任何其他工具一樣,您必須以正確的方式使用它才能充分利用它。您需要考慮不同的方面。本文重點介紹如何按照常規提交規範編寫有效的 Git 提交訊息。它概述了幫助您建立清晰、資訊豐富且標準化的提交訊息的基礎知識。 好的提交訊息是什麼樣的? ------------ 發送訊息的目的是為了溝通。為了使溝通有效,接收者必須清楚地了解訊息發送者試圖告訴他們什麼。因此,您需要提供上下文和足夠的資訊。基於此,一個好的提交訊息應該傳達以下內容: **1. 類型(必填)** - `fix:` – 適用於修復錯誤的操作。 - `feat:` – 當您新增功能時適用。 - `BREAKING CHANGE:` - 當您引入以下變更時適用 可能需要更新程式的某些方面或 升級以避免中斷。例如,替換已棄用的 如果有的話,新資源可能會破壞功能 沒有向後相容性。您也可以指示中斷 使用符號“!”進行更改緊接在類型(或範圍,如果 可用的)。 例子; '壯舉(身份驗證)! - `docs:` – 適用於文件。 其他包括*test:、chore:、refactor:、build:、style:*等。因此,提前了解詳細資訊很重要。 **2.範圍(可選)** 儘管提供範圍是可選的,但為了清晰起見,最好將其包含在內。範圍指定了受變更影響的程式碼庫部分,從而幫助讀者了解變更的上下文。這對於有許多貢獻者的大型專案尤其有用。它使協作變得更加容易。 **3. 說明(必填)** 這是您描述您所做的事情的部分。保持簡潔、開門見山。確保以命令式形式編寫。例如,不應編寫“新增身份驗證機制”,而應編寫“新增身份驗證機制”。這將提高自動產生的變更日誌和發行說明的可讀性。 **4. 本體(可選)** 您可以在此處提供有關您已實施的內容的更多資訊。使用空白行將正文與描述分開。 **5.頁尾(可選)** 如果您想在頁腳中包含任何元資料,請執行此操作。例如,如果您所做的變更解決了先前提出的問題,您可以透過引用參考號在此指出。例子; '**修復#003** ' 您也可以在頁腳中包含審閱者的姓名。 請記住,在給出描述之前,範圍後面應該跟有冒號和空格。您還應該記住,BREAKING CHANGE 在包含在頁腳中時區分大小寫,因此應以大寫形式書寫。 例子 -- - Chore(Art\_func):將變數“Empty”更改為“empty” 將變數名稱從“Empty”更改為“empty”以保持一致 命名約定。 - 修復(資料庫)! 修改架構以僅容納結構化資料。關閉所有 其他類型的資料。 - 壯舉:增加對黑暗模式的支援。 對於長訊息,請使用文字編輯器執行 ``` git commit ``` 沒有 -m 標誌。這將打開一個編輯器,您可以在其中編寫詳細的提交訊息。對於較短的訊息,您可以僅包含 -m 標誌並使用終端機而不是編輯器。 ``` git commit -m "subject" -m "body" ``` 使用多個 -m 標誌可以透過分隔主題、正文和頁腳來幫助您正確格式化訊息。 結論 -- 編寫提交訊息應該達到預期目的。為了使其清晰且資訊豐富,建議您至少包含所做更改的類型和描述。按照傳統方法維護一個良好的程式碼庫,可以支援各種流程的協作和自動化。有關詳細訊息,請務必閱讀[常規提交](https://www.conventionalcommits.org/en/v1.0.0/)指南。 --- 原文出處:https://dev.to/otienorabin/are-you-writing-your-git-commit-messages-properly-54cl

PHP:Laravel,Ruby:Rails,JavaScript:?

最近,Twitter 上發生了 JS 開發者與 Laravel 和 Rails 開發者之間的熱烈討論。它始於 Laravel 的作者 Taylor Otwell 的一條長推文: https://twitter.com/taylorotwell/status/1791468060903096422 簡而言之,他認為整個 JavaScript 生態系統缺乏像 Laravel 或 Rails 這樣真正的「全端」框架,而這些框架可以讓單一開發人員建立下一個 GitHub、AirBnb 或 Shopify。 我對此深表同情,因為我在建立[ZenStack](https://zenstack.dev/) (Prisma ORM 之上的打字稿工具包)時有著相同的目標。事實上,我常在社區裡聽到這樣的話: ![聊天影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vikbshwmv16hxolkhw2s.png) 沒有人可以否認 JS 生態系統的受歡迎程度和快速增長,即使在非會員中也是如此。那麼這是為什麼呢? 歷史原因 ---- > 人們創造自己的歷史,但他們並不是隨心所欲地創造歷史;他們不是在自我選擇的環境下成功的,而是在已經存在的、給定的、從過去傳承下來的環境下成功的——卡爾·馬克思 PHP 和 Ruby 從一開始就被設計為伺服器端語言。 PHP 於 1994 年建立,用於建立動態網頁,而 Ruby 於 20 世紀 90 年代中期出現,是為通用程式設計而設計的。 鑑於它們的伺服器端起源,PHP 和 Ruby 自然適合綜合框架,可以處理 Web 開發的各個方面,從路由和控制器到資料庫互動和模板引擎。這導致了 Laravel 和 Rails 等框架的建立,以提供完整的、固定的方式來建立 Web 應用程式。 相較之下,JavaScript 是作為網頁瀏覽器的客戶端腳本語言而誕生的。直到 2009 年 Node.js 推出之前,它與後端無關。如果您聽說過 Netscape Navigator 和 Internet Explorer 之間的“瀏覽器戰爭”,您可能會意識到前端中持續存在的混亂,這種混亂今天繼續以瀏覽器兼容性的名義讓前端開發人員瘋狂。因此,早期的網路是將不同的技術拼湊在一起。因此,JavaScript 開發人員開始習慣模組化,允許靈活地混合和匹配庫和工具以求生存。這就是為什麼與 Node.js 一起出現的 NPM 以驚人的速度成長,迅速成為世界上最大的軟體註冊中心。 這種不同的情況導致了不同的開發人員文化: - **PHP/Ruby 開發人員:** “給我一個可以正常工作的框架。我想要約定、穩定性和清晰的交付路徑。” - **JS 開發人員:** “不要限制我!我想要靈活性、最新的工具以及以我的方式建置的自由,即使這意味著需要更多的前期工作。” 因此,即使擴展到後端世界之後,單一的、「一刀切」的方法也很難在 Javascript 生態系統中行得通。 當代努力 ---- 一方面,這種文化導致不斷的演變,使整個生態系統保持興奮和創新。然而,這也會導致新人更決策疲勞和更陡峭的學習曲線。 “哪裡有泥土,哪裡就有黃銅。”有些人踏上了冒險之旅,建造一個類似 Rails 的、包含電池的框架來挑戰現狀。以下是一些流行的例子: - [redwoodjs](https://redwoodjs.com/) ``` Full-stack JavaScript framework that integrates React, GraphQL, and Prisma. It simplifies development with a unified setup and automatic code generation, perfect for scalable applications. ``` - [blitzjs](https://blitzjs.com/) ``` Blitz.js extends Next.js into a full-stack framework featuring a zero-API data layer and Prisma for database access. It aims to simplify development by allowing direct server-side code calls from the frontend. ``` - [adonisjs](https://adonisjs.com/) ``` AdonisJS is a TypeScript-first web framework for building web apps and API servers. It offers a rich set of features out-of-the-box, including an ORM, authentication, and a powerful CLI, making it ideal for developers seeking a comprehensive and structured development environment. ``` 他們會成為 JS 世界的 Laravel 或 Rails 嗎?現在說可能還為時過早,但至少 RedwoodJS 顯示出巨大的勢頭: ![紅木流行趨勢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rwf3tizoy59tbck2q5j.png) 另一群人正試圖透過提供**固定**電池的工具包的「啟動套件」來解決這個問題。其中,最受歡迎的是[Create-T3-App](https://create.t3.gg/) ,它結合了 Next.js、tRPC、Tailwind CSS 和其他強大的工具,為您建立類型安全的 Web 應用程式奠定了堅實的基礎。 有趣的是,T3 的建立者 Theo 似乎對 JavaScript 世界的整個努力持悲觀態度: https://twitter.com/t3dotgg/status/1792136001345003748 樂觀的未來 ----- > 任何可以用 JavaScript 編寫的應用程式最終都會用 JavaScript 編寫。 — 傑夫·阿特伍德 雖然我並不完全相信阿特伍德定律,但我確實預見到 JavaScript 在 Web 開發領域的光明前景。原因很簡單: **這是歷史上第一次可以使用程式語言開發整個網頁應用程式。** 這是一個顯著的好處,特別是對於新手開發人員來說。感謝 TypeScript 優秀的類型推斷系統,我們不僅有能力這麼做,而且也願意這麼做。 Laravel 或 Rails 使用者常見的批評是,這些框架缺乏對系統中不同實體之間的關係進行建模的傳統方法,如下所示: https://twitter.com/chantastic/status/1791531154212033004 雖然它可能還沒有達到 Laravel 或 Rails 的水平,但目前 JS 界的努力已經認識到了這個問題。如果您查看上述解決方案的工具包,您會發現一個通用名稱: [Prisma](https://www.prisma.io/) 如果您還沒有聽說過 Prisma,它是一種現代的 TypeScript-first ORM,可讓您輕鬆管理資料庫模式,以極大的靈活性進行查詢和變更,並確保出色的類型安全性。這使 JavaScript 開發人員能夠實現 Laravel 和 Rails 中傳統的資料處理複雜性和輕鬆的關係建模,就像 Laravel 的 Eloquent ORM 一樣。 我在 Prisma 之上建立的[ZenStack](https://zenstack.dev/)工具包旨在進一步縮小差距。它在架構之上加入了授權層,然後自動為您產生 API 和前端掛鉤。因此,簡單地說,一旦您完成了架構,您就幾乎完成了後端。然後,您可以選擇任何前端框架(例如 React、Vue 或 Svelte)來完成您的 UI。 [![zenstack 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3h4wsn2ha5znwzq88u3.png)](https://zenstack.dev/) 開始就要考慮如何結束 ---------- JavaScript 會迎來 Laravel/Rails 時刻嗎?就我個人而言,我相信,或至少希望,標準化約定可以帶來整個生態系統的全局最佳化。然而,考慮到 JavaScript 的歷史和文化,實現這一目標可能需要大量時間。目前還不清楚人工智慧是否會加速這一過程,或徹底顛覆它。 所以,看來我們只能拭目以待了。然而,我們不要在這場辯論中迷失方向,忘記我們的初衷,正如李羅賓遜所說: https://twitter.com/leeerob/status/1792215708715122752 所以,我在最後引用[W3C Web平台設計原則](https://www.w3.org/TR/design-principles/#priority-of-constituencies)中的一句話: > 使用者需求先於網頁作者的需求,網頁作者的需求先於使用者代理實現者的需求,後者先於規範編寫者的需求,後者先於理論純粹性。 --- 原文出處:https://dev.to/zenstack/php-laravel-ruby-rails-javascript-36dc

系統設計面試的 9 種快取策略

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* ![系統設計面試的 5 大快取策略](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3smq5msfo852zeoej5iz.jpg) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 朋友們大家好,在系統設計中,效率和速度是最重要的,為了增強效能和減少回應時間,快取扮演著重要的角色。如果您不知道什麼是快取?讓我先給你一個簡短的概述 **快取是一種技術,涉及將經常存取的資料的副本儲存在允許更快檢索的位置。** 例如,您可以將網站存取量最大的頁面緩存在 CDN(內容交付網路)內,或者類似地,交易引擎可以在處理訂單時緩存符號表。 過去,我分享過幾篇系統設計面試文章,例如[API 網關與負載平衡器](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [正向代理與反向代理](https://medium.com/javarevisited/difference-between-forward-proxy-and-reverse-proxy-in-system-design-da05c1f5f6ad)以及常見的[系統設計問題](https://medium.com/javarevisited/7-system-design-problems-to-crack-software-engineering-interviews-in-2023-13a518467c3e),在本文中,我們將探討系統設計中快取的基礎知識,並深入研究不同的快取策略這些都是技術面試的必備知識。 它也是程式設計師必須了解的[基本系統設計主題或概念](https://medium.com/javarevisited/top-10-system-design-concepts-every-programmer-should-learn-54375d8557a6)之一。 順便說一句,如果您正在準備系統設計面試並想深入學習系統設計,那麼您還可以查看[**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/23jeu6ppweg5zt5prvhx.jpg)](https://bit.ly/3pMiO8g) *PS 繼續閱讀直到最後。我有一份免費獎金給你。* --- 軟體設計中的快取是什麼? ------------ 從本質上講,**快取**是一種將資料副本儲存在比原始來源更快存取的位置的機制。 透過保持經常存取的資訊隨時可用,系統可以更快地回應使用者請求,從而提高整體效能和使用者體驗。 在系統設計的背景下,快取可以發生在各個級別,包括: 1. **客戶端緩存** 客戶端(使用者的裝置)在本機上儲存資源的副本,例如映像或腳本,以減少向伺服器重複請求的需要。 2. **伺服器端緩存** 伺服器儲存請求回應的副本,以便在再次發出相同請求時可以快速提供相同的回應。 3. **資料庫快取** 經常查詢的資料庫結果儲存在記憶體中,以便更快地檢索,從而減少重複執行相同資料庫查詢的需要。 下圖顯示了客戶端和伺服器端快取: [![系統設計中的伺服器端與客戶端緩存](https://miro.medium.com/v2/resize:fit:609/1*shxGE-uy-6LYrqFSvigP6w.png)](https://bit.ly/3pMiO8g) --- 系統設計面試的 9 種快取策略 --------------- 了解不同的快取策略對於在技術面試中取得好成績至關重要,尤其是對於涉及設計可擴展和高效能係統的角色。以下是一些需要了解的關鍵快取策略: ### 1.最近最少使用(LRU) 這種類型的快取用於首先刪除最近最少使用的專案。您可以透過追蹤每個專案的使用情況並逐出最長時間未使用的專案來輕鬆實現這種快取。 如果面試中問到,可以使用雙向鍊錶來實現這種緩存,如下圖所示。 不過,在現實世界中,您不需要建立自己的緩存,您可以使用現有的資料結構(例如 Java 中的 ConcurrentHashMap)進行快取或使用其他開源快取解決方案(例如 EhCache)。 ![最近最少使用 (LRU) 快取策略](https://miro.medium.com/v2/resize:fit:609/1*9NGx2Rwcb20Ue3vJrBxjAw.png) --- ### 2. 最近使用的 (MRU) 在這種類型的快取中,首先刪除最近使用的專案。與 LRU 快取類似,它需要追蹤每一項的使用情況並逐出最近使用過的一項。 --- ### 3. 先進先出(FIFO) 這種類型的快取首先驅逐最舊的專案。如果在面試期間詢問,您可以使用佇列資料結構來維護將專案新增至快取的順序。 ![先進先出 (FIFO)](https://miro.medium.com/v2/resize:fit:609/1*PZdxKx2Yx6ehZ_i23ZgEkw.png) --- ### 4. 隨機更換 這種類型的快取會隨機選擇一個專案進行驅逐。雖然這種類型的快取實現起來更簡單,但可能並非在所有場景下都是最佳的。 --- ### 5. 直寫式緩存 在這種類型的快取中,資料同時寫入快取和底層儲存。這種類型的快取的優點之一是它可以確保快取始終是最新的。 另一方面,由於雙重寫入,寫入延遲會增加。 ![直寫式快取](https://miro.medium.com/v2/resize:fit:609/1*6b7N9Rzogo6c2Ju1pqrkgQ.png) --- ### 6. 後寫式快取(Write-Back) 在這種類型的快取中,資料會立即寫入緩存,而底層儲存的更新則被推遲。 這也減少了寫入延遲,但如果系統在更新寫入儲存之前發生故障,則會降低資料遺失的風險。 下面是它的工作原理: ![後寫式快取(Write-Back)快取工作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw3xu4olff7qv7kct4we.png) --- ### 7. Cache-Aside(延遲載入) 這意味著應用程式程式碼負責將資料載入到快取中。它提供對快取資料的控制,但另一方面,它還需要額外的邏輯來管理快取填充。 ![快取旁路(延遲載入)工作](https://miro.medium.com/v2/resize:fit:557/1*-cUQHLhJb5LqlYSFyTQbuQ.jpeg) --- ### 緩存失效 除了快取和不同的快取策略之外,這是軟體工程師應該了解的另一個重要概念。 當底層儲存中的對應資料發生變更時,快取失效會刪除或更新快取條目。 快取失效的最大好處是確保快取資料保持準確,但同時也帶來了管理快取一致性的複雜性。 而且,這是來自[DeisgnGuru.io](https://bit.ly/3pMiO8g)的一個很好的圖表,它解釋了系統設計面試的各種快取失效策略 [![前 3 種快取失效策略](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy5sxvo6huz356mnhlvy.png)](https://bit.ly/3pMiO8g) --- ### 全域緩存與本地緩存 在全域快取中,單一快取在多個實例之間共用。在本地快取中,每個實例都有自己的快取。全域快取的優點之一是它可以提高資料一致性,而本地快取可以減少爭用並提高效能。 ![全域緩存與本地緩存](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf4aw6c3i4zp5t0itgv5.png) --- ### 系統設計訪談資源: 而且,這裡列出了最佳系統設計書籍、線上課程和練習網站,您可以查看這些內容,以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 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 公司,他們還有很棒的系統設計課程和許多其他材料,可以幫助您破解 FAANG 面試。 [![如何為系統設計做準備](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) ### 結論: 這就是軟體工程師應該了解的有關快取和不同類型快取的全部內容。正如我所說,快取是系統設計中的一個基本概念,對快取策略的深入理解對於技術面試的成功至關重要。 無論您是要優化速度、最大限度地減少延遲還是確保資料一致性,選擇正確的快取策略都取決於您正在設計的系統的特定要求。 當您準備技術面試時,請深入研究這些快取策略,了解它們的權衡,並準備好將這些知識應用到現實場景中。 **獎金** 正如承諾的,這是給你的獎金,一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計,您也可以在 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/9-caching-strategies-for-system-design-interviews-369g

🚀 利用這些前端資源加速您的開發! 🚀

🚀 利用這些資源加速您的發展! 🚀 👋大家好! 👋 我很高興能分享我多年來收集的這些資源,這些資源在我從事的許多專案中都是救星。該編譯匯集了從使用者介面建立到效能最佳化等各種工具和函式庫。希望您也能充分利用這些精彩資源。讓我們開始吧! 請隨意評論您使用或感興趣的任何其他資源,以便我可以將它們加入到帖子中! ### 使用者介面: - [Material Tailwind](https://www.material-tailwind.com) :一個強大的 UI 套件,結合了 Material Design 和 Tailwind CSS - [Aceternity UI](https://ui.aceternity.com) :適合您下一個專案的時尚而現代的 UI 元件 - [NextUI](https://nextui.org) :使用 NextUI 輕鬆製作漂亮的介面 - [ChakraUI](https://chakra-ui.com) :一個簡單、模組化且可存取的元件庫 - [交易視圖圖表](https://www.tradingview.com/lightweight-charts/):使用 TradingView 的輕量級圖表增強您的資料視覺化遊戲 - [AutoAnimate](https://auto-animate.formkit.com) :使用 AutoAnimate 輕鬆創造令人驚嘆的動畫 - [React-magic-motion](https://www.react-magic-motion.com) :為你的 React 元件加入一點魔力 - [Keep React](https://react.keepdesign.io) :讓你的 React 元件保持新鮮和時尚 - [Daisy UI](https://daisyui.com) :使用 Daisy UI 建立令人愉悅的介面 - [ShadCn](https://ui.shadcn.com) :透過時尚優雅的元件提升您的 UI - [剪輯路徑](https://bennettfeely.com/clippy/):使用 Clippy 對形狀進行創意 - [Radix](https://www.radix-ui.com/primitives) :使用 Radix 建立強大且可組合的 UI - [佈局產生器](https://layout.bradwoods.io):輕鬆設計靈活的佈局 - [實用工具](https://omatsuri.app):漸層、遊標等的便利工具包 - [圖像產生器](https://www.freepik.com/pikaso):使用高品質圖像立即美化您的設計 - [按鈕](https://buttons.ibelick.com):用風格來扣住你的使用者介面 - [PrimeReact](https://primereact.org) :React 應用程式的主要元件 - [一切盡在一頁](https://freesets.vercel.app):探索精選的資源集合 - [Beer CSS](https://www.beercss.com) :基於 Material Design 3 的語意 HTML CSS 框架。 ### 漸層: - [Firecms](https://neat.firecms.co) :為您的專案提供動態漸變 - [Shadergradient](https://www.shadergradient.co) :輕鬆創造令人驚嘆的著色器漸變 ### SVG: - [形狀](https://shapes.framer.website):適合您設計的美麗 SVG 形狀 - [SVG](https://svgl.vercel.app) :發現大量 SVG - [SVG 插圖](https://undraw.co/illustrations):使用 Undraw 的插圖為您的專案增添活力 ### 其他的: - [滑桿 — Swiper](https://swiperjs.com) :無縫滑動內容 - [Toast 通知 — Sonner](https://sonner.emilkowal.ski) :Toast 通知變得簡單 - [Atropos - 3D 元素](https://atroposjs.com):為您的專案加入沉浸式 3D 元素 - [自動動畫(原生 Javascript)](https://auto-animate.formkit.com) :使用原生 JavaScript 輕鬆為元素製作動畫 - [Vaul (Slider desde abajo)](https://vaul.emilkowal.ski) :用 Vaul 提升您的滑桿 - [影片效能優化器](https://lite.youtube.com):使用 Lite YouTube Web Component 優化影片效能 - [日曆](https://wicky.nillia.ms/cally):簡化您的日程安排流程 - [對比度選擇器](https://coolors.co/contrast-checker/483c14-d2cfcb):使用 Coolors 的對比度檢查器確保可存取性 - [影像優化器](https://squoosh.app):壓縮影像以獲得更好的性能 ### 順風: - [動畫](https://www.tailwindcss-animated.com):使用 Tailwind CSS Animated 為您的 UI 增添風格 - [Intersection Observer](https://github.com/heidkaemper/tailwindcss-intersect) :Tailwind CSS Intersect 用來觀察交叉路口 - [背景](https://bg.ibelick.com):輕鬆美化您的背景 ### JavaScript: - [Masonry Grid](https://masonry.desandro.com) :輕鬆建立動態網格佈局 - [MiniMasonry](https://spope.github.io/MiniMasonry.js) :磚石佈局的輕量級替代方案 - [Gallery PhotoSwipe](https://photoswipe.com) :使用 PhotoSwipe 優雅地展示您的影像 - [Gallery LightGallery](https://www.lightgalleryjs.com) :LightGallery 提供令人驚嘆的影像畫廊 - [Tempo](https://tempo.formkit.com) :使用 Tempo 簡化基於時間的操作 - [Tippy(工具提示)](https://atomiks.github.io/tippyjs) :透過可自訂的工具提示增強使用者體驗 - [Intersection Observer](https://www.youtube.com/watch?v=T24PsErQGPg) :Intersection Observer 高效能滾動指南 - [無限滾動](https://www.youtube.com/watch?v=FA1Y4pamIP8):輕鬆實現無限滾動 - [Just](https://github.com/angus-c/just) :常見 JavaScript 實用程式的函式庫 - [GLTFs into JSX](https://github.com/pmndrs/gltfjsx) :將 GLTF 檔案轉換為 JSX 元件 ### 反應: - [計數器](https://use-count-up.vercel.app):動態計算你的數字 - [砌體佈局](https://blog.logrocket.com/create-responsive-masonry-layouts-react-app):在 React 中建立響應式砌體佈局 - [拖放](https://drag-and-drop.formkit.com):輕鬆實現拖放功能 - [FilePond](https://pqina.nl/filepond) :使用 FilePond 簡化檔案上傳 - [Faker](https://fakerjs.dev) :用 Faker 產生真實的假資料 - [隨機](https://www.npmjs.com/package/random-words):用隨機單字為你的專案增添趣味 - [圖表](https://www.chartjs.org/docs/latest):使用 Chart.js 完美地視覺化資料 - [UseSound](https://github.com/joshwcomeau/use-sound) :將聲音效果合併到您的 React 應用程式中 - [ReCharts](https://recharts.org/en-US) :基於 React 元件建構的圖表庫 - [浮動 UI(工具提示)](https://floating-ui.com) :互動式工具提示的浮動 UI - [Tippy(工具提示)](https://github.com/atomiks/tippyjs-react) :用於 React 應用程式的 Tippy.js - [日曆](https://wicky.nillia.ms/cally):滿足您所有日程安排需求的另一個日曆資源 - [CMDK Console](https://github.com/pacocoursey/cmdk) :React 應用程式的控制台 --- 原文出處:https://dev.to/miguelrodriguezp99/frontend-resources-1dl4

動態導覽選單

上週末,我使用 HTML 和 CSS 編寫了[互動式導覽](https://codepen.io/alvaromontoro/full/yLWeozP)(這次沒有使用 JavaScript): https://codepen.io/alvaromontoro/pen/yLWeozP (如果您錯過了初始動畫,或者想再次看到它,請點擊右下角的「重新執行」。) --- 對於這個演示: - 我嘗試堅持使用語義 HTML 並提供一種可存取的方法(希望我沒有搞亂這部分)。 - 初始載入動畫是只執行一次並在之後保持原樣的`animation` 。 - 使用 3D CSS 使清單元素彈出和返回。 - 焦點和懸停狀態受到同等對待,因此滑鼠和鍵盤使用者都會獲得相似的體驗。 - 它具有減少運動的樣式,可以降低動畫和過渡速度,因此沒有太多的運動(導航專案仍會彈出,但不會動畫化)。 - 我使用`drop-shadow()`過濾器產生整個選單的陰影(獨立於選單專案的陰影)。 - 還使用`box-shadow`為兄弟姐妹加入嵌入陰影並提供更大的深度感。我一開始是用陰影來做的,但我遇到了一些麻煩,所以我可能會把它們弄得過於複雜了。 - 我使用`:has()`選擇處於活動狀態的兄弟姐妹(前一個和後一個),並為其加入一些深度和陰影。 - 它使用 Font Awesome 作為圖示。 感謝您檢查該元件。如果您有任何疑問,請告訴我。歡迎所有回饋和建議! --- 原文出處:https://dev.to/alvaromontoro/animated-navigation-menu-57o7

您可能不知道的 HTML 標籤

開發者們大家好👋 在這篇文章中,我將分享一些在 HTML5 中加入的新的、有用的 html 標籤,用於編寫簡單快速的程式碼來建立複雜、動態、引人入勝且有效的網站。 讓我們開始吧🚀 對話 -- ➡ 現在您可以使用`<dialog>`標籤輕鬆建立對話方塊或彈出視窗。這是建立自訂模式對話方塊的好方法,而無需嚴重依賴**JavaScript** 。 ``` <dialog id="myDialog"> <p>This is a dialog box</p> <button onclick="document.getElementById('myDialog').close()">Close </button> </dialog> <button onclick="document.getElementById('myDialog').showModal()">Open Dialog </button> ``` 範本 -- ➡ `<template>`標籤用作儲存頁面載入時不希望顯示的客戶端內容的容器。可以使用**JavaScript**克隆該內容並將其插入到文件中。 ``` <button onclick="showContent()">Show hidden content</button> <template> <h2>Hello, This is Kiran</h2> <p>Thanks for reading this</p> </template> <script> function showContent() { let temp = document.getElementsByTagName("template")[0]; let clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script> ``` 圖片 -- ➡ 透過使用`<picture>`標籤,您可以為一張圖片定義多個來源,現在瀏覽器會根據螢幕尺寸、解析度選擇最佳的來源。這對於**響應式**設計特別有用。 ``` <picture> <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> ``` 儀表 -- ➡ `<meter>`標籤可用來表示已知範圍內的標量測量,例如磁碟使用情況或查詢結果的相關性。它有助於**直觀地**顯示一定範圍內的值。 ``` <label for="diskUsage">Disk Usage:</label> <meter id="diskUsage" value="0.6">60%</meter> ``` 輸出 -- ➡ `<output>`標籤代表計算的結果。它可以與**JavaScript**一起使用來顯示計算**結果**。 ``` <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="50"> + <input type="number" id="b" value="25"> = <output name="result" for="a b">75</output> </form> ``` 進步 -- ➡ `<progress>`標籤代表**任務**的完成進度,例如下載或檔案上傳。 ``` <label for="fileProgress">File upload progress:</label> <progress id="fileProgress" value="70" max="100">70%</progress> ``` 標記 -- ➡ `<mark>`標籤用於反白顯示文字。它對於您想要**突出顯示**匹配文字的搜尋結果頁面特別有用。 ``` <p>The word <mark>highlighted</mark> is important.</p> ``` 縮寫 -- ➡ `<abbr>`標籤用於定義縮寫詞或首字母縮寫詞,在**標題**屬性中提供完整的**描述**。 ``` <p>I'm a true<abbr title="Marvel Cinematic Universe">MCU</abbr>fan.</p> ``` 時間 -- ➡ `<time>`標籤用於表示日期、時間或持續時間。它對於使與時間相關的資料變得機器可讀非常有用。 ``` <p>The concert starts at <time datetime="20:00">8 PM</time>.</p> ``` 巴迪 -- ➡ `<bdi>`標籤用於隔離可能與外部其他文字的格式方向不同的文字部分。無論涉及何種語言或文字**方向**,它都能確保您的網頁內容保持**一致**和可讀。 ``` <ul> <li>Product: <bdi>ABC1234</bdi></li> <li>Product: <bdi>مرحبا5678</bdi></li> </ul> ``` 沃伯 -- ➡ `<wbr>`標記指定文字可以在何處**換行**(如有必要)。這對於長單字或 URL 很有用。 ``` <p>Thisisaverylongword<wbr>thatmightneedbreaking.</p> ``` 主要的 --- ➡ `<main>`標籤用於指定文件的**主要內容**。它每頁只能使用一次,並且排除文件中重複的內容,例如頁首、頁尾、導覽和側邊欄。 ``` <main> <h1>Welcome to my blog post</h1> <p>Today we will learn some new html tags</p> </main> ``` 圖片標題 ---- ➡ `<figcaption>`標籤用於為圖形提供**標題**。 ``` <figure> <img src="Thanos.jpg" alt="Thanos image"> <figcaption>Thanos snapping his fingers</figcaption> </figure> ``` 這就是本文的內容。 感謝您的閱讀❤ 在 👉 https://x.com/kiran\_\_a\_\_n X https://github.com/Kiran1689 GitHub 上找到我 https://dev.to/dev\_kiran --- 原文出處:https://dev.to/dev_kiran/html-tags-you-might-not-know-about-3gk7

用不到 40 行程式碼建立您自己的 React 狀態管理庫 - 並支援 TypeScript

你有沒有想過 React 狀態管理函式庫是如何建構的?從像 redux 這樣具有大量樣板和大包大小的解決方案,到像 zustand 或 jotai 這樣更輕、更簡單的庫。今天我們將建立我們自己的狀態管理庫,並看看幕後發生的魔法。 了解 useSyncExternalStore ----------------------- React 18 引入了一個名為[useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore)的新鉤子,它允許 React 同步到任何外部儲存。 ``` useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) ``` 以下是其參數的詳細說明: - **subscribe**接收一個回呼作為參數,並將該回調訂閱到外部 store,以便當 store 狀態改變時呼叫它,需要傳回一個取消訂閱函數。 - **getSnapshot**取得儲存的目前快照,該快照必須是快取值,因為 React 使用`Object.is(getSnapshot(), oldSnapshot)`在每次渲染上比較該值,每次提供新值將導致無限循環。 - **getServerSnapshot** (可選)允許我們在伺服器上渲染時返回快照,這在外部儲存或訂閱源無法在伺服器上執行或需要特定處理才能在伺服器上執行的某些情況下很有幫助。 利用 useSyncExternalStore,我們可以根據我們的要求建立一個簡約的 store 。 為什麼不直接使用 React Context? ----------------------- [React Context](https://react.dev/learn/passing-data-deeply-with-context)是 React 中的一個功能,它允許元件將 props 傳遞到其下面的整個元件樹,這意味著它可以用作存儲,是一個可行的選擇。 React 上下文需要一些樣板: ``` const context = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return <context.Provider value={{ count, setCount }}>{children}</context.Provider>; }; export function App() { return ( <CountProvider> <Outer /> <Other /> </CountProvider> ); } ``` 大量使用 Context 可能會導致“Context Hell”,其中大量上下文提供者嵌套在 App 元件中: ``` export function App() { return ( <CountProvider> <AuthProvider> <ThemeProvider> <CacheProvider> <IntlProvider> <TooltipProvider> <UserSettingsProvider> <NotificationProvider> <AnalyticsProvider> <Content /> </UserSettingsProvider> </NotificationProvider> </AnalyticsProvider> </TooltipProvider> </IntlProvider> </CacheProvider> </ThemeProvider> </AuthProvider> </CountProvider> ); } ``` 此外,使用上下文可能會無意中觸發整個元件樹的重新渲染,如下所示: ``` export function App() { const [count, setCount] = useState(0); return ( <context.Provider value={{ count, setCount }}> <Outer /> <Other /> </context.Provider> ); } ``` 從上下文的用戶使用 setCount 將導致整個應用程式的重新渲染(外部和其他都會重新渲染),因為狀態是在應用程式元件上設定的,並且當它重新渲染時,它的所有子元件元件也被重新渲染。 此外,使用外部存儲可以讓我們更輕鬆地與 http 請求等外部系統同步反應,在上下文中您將使用 useEffect,而使用外部存儲您可以直接更新存儲,更改將在訂閱元件。 建造我們的 store ------- 讓我們深入研究一下我們 store 的實現。我們將從一個基本結構開始,然後根據我們的要求逐步增強它。 ``` import { useSyncExternalStore } from 'react'; export type Listener = () => void; function createStore<T>({ initialState }: { initialState: T }) { let subscribers: Listener[] = []; let state = initialState; const notifyStateChanged = () => { subscribers.forEach((fn) => fn()); }; return { subscribe(fn: Listener) { subscribers.push(fn); return () => { subscribers = subscribers.filter((listener) => listener !== fn); }; }, getSnapshot() { return state; }, setState(newState: T) { state = newState; notifyStateChanged(); }, }; } ``` **訂閱者**是一組偵聽器,我們的 store 將在 store 狀態的每次變更時通知它們。 **State**是 store 的狀態,我們將在呼叫 setState 時更新它,然後通知所有 store 的訂閱者更新。 為了在 React 中使用 store,我們將建立 createUseStore,它是一個以方便的方式包裝 createStore 和 useSyncExternalStore 的幫助器: ``` export function createUseStore<T>(initialState: T) { const store = createStore({ initialState }); return () => [useSyncExternalStore(store.subscribe, store.getSnapshot), store.setState] as const; } ``` 使用 store ---- store 就位後,讓我們開始建立一個 Counter 元件: ``` import React, { useState } from "react"; export function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); } ``` 並在我們的應用程式中渲染三次: ``` import React from 'react'; import ReactDOM from 'react-dom/client'; import { Counter } from './Counter.tsx'; ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <Counter /> <Counter /> <Counter /> </React.StrictMode>, ); ``` 現在,我們在頁面中看到三個計數器,點擊「增量」只會增量其中一個計數器: ![計數器起始點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ark89f633vqifdh41d2.png) 讓我們使用我們的 store 讓這 3 個計數器使用相同的狀態,首先我們將使用我們先前建立的 createUseStore 幫助器建立 useCountStore: ``` export const useCountStore = createUseStore(0); ``` 現在讓我們在計數器中使用 useCountStore 鉤子: ``` import { useCountStore } from "./countStore"; function Counter() { const [count, setCount] = useCountStore(); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); } ``` 現在我們的 3 個計數器已同步,並且所有計數器一起遞增: ![3 個計數器現在共用相同的狀態](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j33b0ns2ep2g02obopjg.png) 由於使用了泛型,TypeScript 知道 count 是一個數字,而 setCount 是一個接受數字的回呼: ![Typescript 對狀態的支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dk0yplo7zsc2ukdgbzf6.png) ![Typescript 對 setState 的支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2l2mb8htqc16glwzczb.png) 下一步 --- 關於如何改進和建立我們的簡單 store 的一些想法: **還原狀態** 在我們的儲存中設定狀態非常直接,這很方便,但有時我們在確定狀態時可能需要處理複雜的邏輯,這就是減速器可能幫助我們的地方,我們可以為我們的儲存加入一個新的調度函數: ``` dispatch(action) { state = reducer(action); notifyStateChanged(); }, ``` **處理深度嵌套狀態** 設定新狀態需要解構現有狀態,如果我們有深度嵌套的狀態,這可能會很煩人,為了解決這個問題,我們可以使用 immer 或類似的函式庫: ``` // without immer setState({ ...state, nested: { ...state.nested, sub: { ...state.nested.sub, new: true, } } }); // with immer import { produce } from "immer"; const nextState = produce(state, s => { s.nested.sub.new = true; }); setState(nextState); ``` 我們甚至可以在內部將 immer 加入到我們的 store,並在 setState 中接受回調,如下所示: ``` setState((state) => { state.nested.sub.new = true; return state; }); ``` 結論 -- 在本教學中,我們完成了建立一個具有 TypeScript 支援的簡單 React 狀態管理函式庫的步驟。 透過利用 React 的`useSyncExternalStore`鉤子,我們建立了一個簡單但功能強大的存儲,可以與 React 元件無縫整合。 現在您已經掌握了它的竅門,您就可以建立自己的自訂狀態管理庫了。 --- 在 React 文件中閱讀有關[useSyncExternalStore 的](https://react.dev/reference/react/useSyncExternalStore)更多資訊。 要查看本文中討論的概念的實際實現,請查看[此處的](https://github.com/paripsky/tinystate)**tinystate-react** 。該庫是使用本教程中描述的方法建置的,可讓您更深入地研究程式碼和範例。 --- 原文出處:https://dev.to/paripsky/build-your-own-react-state-management-library-in-under-40-lines-of-code-with-typescript-support-hji

適合初學者學習 Linux 的 10 門免費且最佳課程

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![學習 Linux 的最佳線上課程](https://thepracticaldev.s3.amazonaws.com/i/dylt2m6r24a5ub10qzui.jpg)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=634352.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flearn-linux-in-5-days%2F) 毫無疑問, [Linux](https://en.wikipedia.org/wiki/Linux)是執行伺服器端應用程式的最受歡迎的作業系統之一。我見過幾乎所有 Java 應用程式都在 Linux 上執行,除了少數在 Windows 上作為服務執行的應用程式。 如果您使用[IDE](http://www.java67.com/2018/01/how-to-remote-debug-java-application-in-Eclipse.html)或[工具](http://www.java67.com/2018/04/10-tools-java-developers-should-learn.html)等獨立應用程式,大多數現實世界的 Java 應用程式都在 Linux 上執行,例如支付網關、交易系統和其他金融應用程式。 這就是為什麼對於任何程式設計師、IT 專業人員或開發人員來說,學習和理解 Linux(包括作業系統和[命令列)](http://javarevisited.blogspot.sg/2017/04/10-examples-of-cut-command-in-unix-and-Linux.html)都非常重要。 [Linux](https://medium.com/javarevisited/top-10-courses-to-learn-linux-command-line-in-2020-best-and-free-f3ee4a78d0c0)是最重要的技能之一,因為它會為你服務很長時間。它不僅可以提高您的工作效率,並透過鼓勵您編寫[shell 腳本](https://javarevisited.blogspot.com/2018/02/5-courses-to-learn-shell-scripting-in-linux.html)來教授大量自動化知識,而且對於許多IT 工作(如支援工程師、測試人員、開發人員、業務分析師、系統管理員,甚至專案/產品經理)來說,它也是必不可少的 它也是[程式設計師必備的工具](http://javarevisited.blogspot.sg/2018/01/10-tools-every-software-developer-know.html)之一,在不了解Linux的情況下很難找出在Linux上執行的應用程式中發生了什麼。它還將優秀程式設計師與普通程式設計師區分開來。優秀的程式設計師通常也擅長 Linux 指令。 如果您想學習 Linux 或 UNIX、作業系統和命令列,那麼您來對地方了。在本文中,我將分享一些[免費的 Linux 課程,](https://www.java67.com/2018/02/5-free-linux-unix-courses-for-programmers-learn-online.html)您可以在線上學習這些課程,以便按照自己的步調和時間學習 Linux。 這些課程是免費的,但這並不意味著它們品質低劣。它們很好地概述了許多基本的 Linux 概念,包括 Linux 命令列和基本命令,如[find](http://www.java67.com/2017/08/how-to-find-large-files-with-size-in-Linux.html) 、 [grep](http://www.java67.com/2017/07/how-to-find-all-files-containing-matching-text-grep-command-example.html) 、 [sed](http://javarevisited.blogspot.sg/2013/05/sed-command-examples-in-unix-and-linux.html#axzz4pp42TeHu) 、 [curl](http://javarevisited.blogspot.sg/2017/03/10-examples-of-curl-command-in-unix-and-Linux.html)和[chmod](http://javarevisited.blogspot.sg/2012/03/10-example-of-chmod-command-in-unix.html) 。 當然,它們並不像下面的一些付費課程那麼全面,但您仍然可以使用它們來開始您的 Linux 之旅。順便說一句,如果您不介意花幾塊錢買一些值得學習的東西[,《5 天學習 Linux 並提升您的職業生涯》](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=634352.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flearn-linux-in-5-days%2F)是最好的起點。 適合初學者的 10 個免費且最佳 Linux 課程 ------------------------- 如果您以前來過這裡,那麼您可能會熟悉我學習新技術的三點公式。 一般來說,每當我必須學習一種新的[程式語言](http://www.java67.com/2017/12/10-programming-languages-to-learn-in.html)、一個 [框架](https://javarevisited.blogspot.sg/2018/04/top-5-java-frameworks-to-learn-in-2018_27.html)或一個[庫時](https://javarevisited.blogspot.com/2018/10/top-8-python-libraries-for-data-science-machine-learning.html),我都會做三件事,首先參加線上課程,第二,買一本好書,第三,建立一個玩具專案作為開始。 這三件事幫助我學習了許多有用的工具、技術、框架和函式庫,我也建議你遵循這些。 過去我分享過一些[Linux命令列書籍](http://javarevisited.blogspot.sg/2017/01/top-10-unix-and-linux-system-programming-books-best-of-lot-must-read.html#axzz56NUmSwMW),今天我將分享一些學習Linux的免費線上培訓課程。 您可以先學習這些課程,然後閱讀這些書籍來學習和掌握 Linux 概念。一旦有了好主意,您就可以開始一個專案,例如編寫[shell 腳本](https://javarevisited.blogspot.com/2018/02/5-courses-to-learn-shell-scripting-in-linux.html)或其他東西,以將您的知識提升到一個新的水平。 本文包含學習 Linux 作業系統和[Linux 命令列](https://hackernoon.com/10-basic-tips-on-working-fast-in-unix-or-linux-terminal-5746ae42d277)的課程,後者更為重要。任何想要學習 Linux 的人都可以使用這些免費課程,但它更適合開發人員、QA、系統管理員和程式設計師。 ### 1. [Linux 命令列訓練營:從初學者到進階用戶](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fthe-linux-command-line-bootcamp%2F) 這是一門很好的Linux 入門課程,它會告訴你什麼是Linux、它的歷史,以及不同的Linux 發行版(如CentOS、RedHat、Fedora、Ubuntu 等)的意思。所需的所有知識。 您還將了解如何設定測試實驗室以使用 VirtualBox 和 CentOS 執行 Linux 命令。 一旦您完成設置,本課程將教您基本的 Linux 命令,例如如何建立和移動檔案和目錄、 [如何歸檔和壓縮檔案](https://javarevisited.blogspot.com/2011/11/tar-command-in-unix-linux-example.html#axzz5bctN8K28)、如何使用管道組合兩個或多個命令以及如何將輸出重定向到檔案。 簡而言之,對於第一次聽說 Linux 的初學者來說,這是一本很好的 Linux 入門指南。參加完這個最好的 Linux 課程後,您將有足夠的熱情去了解更多有關 Linux 的訊息,並了解更多有關您最喜歡的 Linux 發行版的訊息。 以下是加入課程的連結:[**Linux 命令列訓練營:初學者到進階使用者**](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fthe-linux-command-line-bootcamp%2F) [![適合程式設計師的最佳 Linux 訓練營課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnxttu9eedzxbqm4bqhc.jpg)](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fthe-linux-command-line-bootcamp%2) --- ### 2. [學習Linux命令列:基本命令](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fcommand-line%2F)\[免費\] 這是學習 Linux 命令列的一門很棒的免費課程。正如我之前所說,命令列對於開發人員和程式設計師來說是一個非常有用的工具。 如果您想了解[Ruby on Rails](https://www.java67.com/2018/02/5-free-ruby-and-rails-courses-to-learn-online.html) 、 [Django](https://medium.com/javarevisited/my-favorite-courses-to-learn-django-for-beginners-2020-ac172e2ab920) 、 [Devops](https://medium.com/javarevisited/13-best-courses-to-learn-devops-for-senior-developers-in-2020-a2997ff7c33c) 、Unix 自訂等等,學習命令列將對您有很大幫助。 在本課程中,您將學習與檔案管理、進程管理、系統管理等相關的大部分基本 Linux 命令。 命令列課程主要針對 Linux 用戶,但 Mac 用戶也可以受益,儘管並非所有內容都適用於他們。 以下是加入課程的連結: [*學習 Linux 命令列:基本命令*](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fcommand-line%2F) [![學習 Linux 的最佳免費線上課程](https://cdn-images-1.medium.com/max/1000/0*WZTX004AyYpin9q_.jpg)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fcommand-line%2F) 對於初學者來說,命令列可能看起來困難且複雜,可能很難坐下來自己學習,而這正是本課程的重點。它將教您如何使用命令列並跳過您可能永遠不會使用的無聊、不必要的東西。 --- ### 3. [完成 Linux 培訓課程以獲得您夢想的 IT 工作](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fcomplete-linux-training-course-to-get-your-dream-it-job%2F)\[Udemy\] 這是初學者的最佳線上 Linux 課程之一,因為它不僅僅涵蓋 Linux 命令和有關 Linux 作業系統的基本概念。如果您想在短時間內從入門到高級學習如何使用命令列和不同的 Linux 發行版,那麼這個 Udemy 課程非常適合您。 您將從 Linux 和 Linux 的歷史開始,以及如何將其安裝到您的電腦上。接下來,您將從 Linux 的檔案系統和最常用的命令列、超級使用者/根、Linux 目錄等開始。 您將在本課程中學到: - 在您的機器上安裝 Linux 系統。 - 不同的 Linux 作業系統。 - 如何使用 Linux 命令列。 稍後,您將探索如何變更檔案和目錄權限、共用檔案、自訂命令提示字元以及在 Linux 系統上安裝應用程式。 [![深入學習 Linux 的 5 門熱門課程](https://1.bp.blogspot.com/-A2ZhUSIdabU/X5eD_YDXpmI/AAAAAAAAkD0/cVW4UzusLGARDYdCh--vmqAvwVFupj4DwCLcBGAsYHQ/w400-h300/filepermission%2Bin%2BLinux%2BUNIX.JPG)](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fcomplete-linux-training-course-to-get-your-dream-it-job%2F) --- ### 4. [紅帽企業 Linux 技術概述](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fred-hat-enterprise-linux-technical-overview%2F)\[免費\] 這是 Red Hat 本身提供的免費 Linux 課程。在這個紅帽官方培訓課程中,紅帽培訓的技術課程架構師 Steve Bonneville 將向您講授 Linux 基礎知識,並為 IT 專業人員演示 Linux 使用和系統管理任務的基本實用技術。 以下是加入課程的連結: [**紅帽企業 Linux 技術概述**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fred-hat-enterprise-linux-technical-overview%2F) [![免費學習 Linux 的最佳線上課程](https://cdn-images-1.medium.com/max/1000/0*MYgFH7EjQ5or7Zac.jpg)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fred-hat-enterprise-linux-technical-overview%2F) 由於 Linux 用於在雲端以及在資料中心託管應用程式的容器上託管伺服器端應用程式,因此它已成為 IT 專業人員必須了解的技術之一,並且同樣對本課程感興趣。 完成這個[免費的 Linux 課程](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fred-hat-enterprise-linux-technical-overview%2F)後,您將對 Linux 作業系統有充分的了解。簡短的講座和演示將涵蓋發行版、 [shell](https://medium.com/javarevisited/7-best-shell-scripting-courses-for-programmers-and-it-professionals-d1f1486accc9) 、核心、使用者空間、檔案層次結構、權限等。 --- ### 5. [開源軟體開發、Linux 和 Git 專業化](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Foss-development-linux-git)\[Coursera\] 這是在線學習 Linux 的最佳 Coursera 課程,適合初學者和經驗豐富的開發人員。假設您是開源世界的初學者,想要學習如何建立在 Linux 中執行的開源專案,並學習如何作為專業人士使用 Linux 作業系統。您需要在 Coursera 上查看此專業。 您將從開源專案的歷史以及它們如何造福世界開始,然後使用[Linux](https://medium.com/javarevisited/top-10-courses-to-learn-linux-command-line-in-2020-best-and-free-f3ee4a78d0c0)和[命令列](https://medium.com/javarevisited/top-10-unix-and-linux-productivity-tips-for-programmers-and-developers-c748129cf3e8)。接下來,您將了解如何使用 bash 腳本和自動化任務、檔案系統等進行程式設計。 您將在本課程中學到: - 安裝並使用 Linux。 - 使用 bash 腳本和編程。 - 建立開源專案。 最後,您將了解如何使用 git 建立開源軟體、初始化儲存庫、更改它們等等。 這是加入本課程的連結 - [**開源軟體開發、Linux 和 Git**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Foss-development-linux-git) [![深入學習 Linux 的最佳 Coursera 課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h3j4ky7320yz8c72usz.jpeg)](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Foss-development-linux-git) 而且,如果您發現 Coursera 課程和憑證有用,那麼我還建議您加入**[Coursera Plus](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fcourseraplus)** ,這是 Coursera 的訂閱計劃,它使您可以無限制地存取他們最受歡迎的課程、專業、專業憑證和指導專案。它的費用約為 399 美元/年,但它完全物有所值,因為您可以獲得**無限的憑證。** --- ### [6.Linux 教學和專案(免費)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flinux-tutorials%2F) 這是另一個很棒的 Linux 免費課程,由在 Linux 領域工作超過 25 年的人講授。 作者 Jason Cannon 在 20 世紀 90 年代末開始了他的 IT 職業生涯,擔任 Unix 和 Linux 系統工程師,他在本課程中分享了他在現實世界中的一些 Linux 經驗。 以下是加入課程的連結: [**學習教學課程和專案**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flinux-tutorials%2F) [![適合初學者的最佳 Linux 課程](https://cdn-images-1.medium.com/max/1000/0*K3a9uOHfpWW-aupu.jpg)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flinux-tutorials%2F) 在本課程中,您將學習 Linux 中的一些實際任務,例如如何在 CentOS Linux 和 Apache 上安裝 SSL 憑證、如何使用 Nginx 負載平衡 HTTP 和 Web 流量以及如何在 Ubuntu Linux 上設定 MySQL 主從複製。 這些實際任務將幫助您開始使用 Linux,並讓您有信心在實際伺服器中工作。 --- ### 7. [Linux 入門](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fgetting-started-linux)\[Pluralsight\] 假設您想要一門課程,將您從 Linux 的初級水平帶到高級水平,並向您展示實踐課程,而不僅僅是歷史理論。 在這種情況下,您可以在[Pluralsight](https://javarevisited.blogspot.com/2019/10/udemy-vs-pluralsight-review-which-is-better-to-learn-code.html)上查看 Linux 入門課程。 您將首先在電腦上安裝和管理 Linux 系統,以便在開源作業系統上安裝軟體。接下來,將向您介紹 Linux 伺服器版本,您將在 apache 伺服器上安裝它並使用此版本的 Linux。 您將在 Linux 初學者課程中學到以下內容: - 在您的電腦上安裝 Linux 桌面。 - 如何使用 Linux 桌面。 - 安裝和使用 Linux 伺服器。 這是加入本課程的連結 - [Linux 入門](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fgetting-started-linux) [![深入學習 Linux 的最佳 Pluralsight 課程](https://1.bp.blogspot.com/-llPLFXsFDXU/XwPL4h7xrRI/AAAAAAAAgvo/4_yHB5YjGSog8qcq_YuQOUPsk7YZhcuWQCLcBGAsYHQ/s400/The%2BLinux%2BBoot%2BProcess%2B-%2BPluralsight%2Bbest%2Bcourse.png)](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fgetting-started-linux) 順便說一句,您需要成為 Pluralsight 會員才能存取此課程,每月費用約為 29 美元,一年費用約為 299 美元。這使您可以存取本課程以及超過 7000 門其他有關最新技術的課程。或者,您也可以參加[**10 天免費試用,**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Flearn)免費存取本課程。 --- ### 8. [在 MAC 或 Windows 上學習 Linux](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flearn-linux-on-a-mac%2F) \[免費\] 如果您想學習 Linux 命令列,但碰巧在 Mac 或 Windows 上工作,那麼這對您來說是完美的課程。 在本課程中,您將學習如何在 VirtualBox 上設定 Ubuntu Linux 伺服器,以便在 Mac 或 Windows 本身上體驗 Linux 命令列。 以下是加入課程的連結: [**在 Mac 上學習 Linux**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flearn-linux-on-a-mac%2F) [![開發人員的最佳 Linux 課程](https://cdn-images-1.medium.com/max/1000/0*v6mbEWOHbO3tuodE.jpg)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=562016.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flearn-linux-on-a-mac%2F) 這是學習 Linux 命令的第一步,特別是如果您在 Mac 或 Windows 中完成大部分工作。儘管成為 Linux 命令列專家需要花費大量時間,但建立實驗室是親自嘗試這些命令的最佳方法。 此外,在 Mac 或 Windows 中使用 VM 作為虛擬機器也是一個安全的想法,因為如果出現問題,您可以輕鬆刪除它並重新啟動,更重要的是,您可以在沒有 Internet 連接的情況下離線工作。 在當今世界,Linux 廣泛應用於為 Web 伺服器提供支援的網際網路基礎架構、公有雲基礎架構(例如[Amazon AWS](https://hackernoon.com/top-5-amazon-web-services-or-aws-courses-to-learn-online-free-and-best-of-lot-d94e192054b7) 、 [Microsoft Azure](https://medium.com/javarevisited/5-best-azure-fundamentals-courses-to-pass-az-900-certification-exam-in-2020-9e602aea035d) 、 [Google Cloud)](https://medium.com/javarevisited/5-best-courses-to-learn-google-cloud-platform-gcp-in-2021-169093a3771a)以及在 OpenStack 上執行的私有雲。 因此,如果您在開始使用雲端伺服器之前能夠獲得一些 Linux 作業系統的基本經驗,那將是非常值得的。 --- ### 9. [Linux 掌握:在 11.5 小時內掌握 Linux 命令列](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Flinux-mastery%2F)\[Udemy\] 這是 Udemy 上適合初學者的最佳 Linux 命令列課程之一。這門全面的 Udemy 課程適合從頭開始學習 Linux 命令列,並提高您的 Linux 技能,成為更有生產力的開發人員。 您將在本課程中學到: - 使用命令列。 - 管理文件和權限。 - 安裝和更新軟體。 - 如何使用 Bash 腳本和 cron 調度軟體來自動化無聊的任務! 您將首先學習如何在 Linux 主機上使用命令列、管理文件(例如建立和編輯文件)。然後學習如何管理使用者和群組以及控製[**文件權限**](https://javarevisited.blogspot.com/2011/11/file-permissions-in-unix-linux-example.html)。本課程很適合從頭開始學習,並且不需要任何經驗,但如果您已經有一些 Linux 經驗,本課程可能不適合您。 [![Udemy 上適合初學者的最佳 Linux 課程](https://lh3.googleusercontent.com/-OznE1M0LhIs/YBqvRSOYEJI/AAAAAAAAmDk/eeO3oHZnJ4kRvEotEoHxP73EJ0naoE2ggCLcBGAsYHQ/w400-h225/image.png)](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Flinux-mastery%2F) --- ### 10. [DevOps 訓練營:學習 Linux 並成為 Linux 系統管理員](https://academy.zerotomastery.io/a/aff_glpct39t/external?affcode=441520_zytgk2dn) 對於那些想成為 DevOps 工程師或 Linux 系統管理員的人來說,這是另一個很棒的 Linux 學習課程,這兩項工作的薪水都很高,而且需求量很大。 在這個 24 小時的綜合 Linux 課程中,您將學習從 Linux 的絕對初學者到成為自信且高效的 Linux 系統管理員所需的所有技能。 以下是本課程涵蓋的關鍵主題: - Linux指令 - Linux 檔案系統 - 文件權限 - 流程管理 - 用戶帳號管理 - 軟體管理 - Linux 中的網絡 - 系統管理 - bash 腳本 - Iptables/Netfilter 防火牆 - Linux安全 - 和更多... 順便說一句,您需要[ZTM 會員](https://academy.zerotomastery.io/a/aff_c0gnlvf7/external?affcode=441520_zytgk2dn)才能觀看這門課程,每月費用約為 39 美元,但也可以存取許多像本課程這樣超級有吸引力且有用的課程。您也可以使用優惠券程式碼 FRIENDS10 獲得本課程或您選擇的任何訂閱的 10% 折扣 [![面向 DevOps 工程師的最佳 Linux 課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ep78omu3lsyrobjn1ggz.png)](https://academy.zerotomastery.io/a/aff_glpct39t/external?affcode=441520_zytgk2dn) 這是一些**在線學習 Linux 的最佳免費和付費課程**。正如我之前所說,Linux 是任何程式設計師或 IT 專業人員的必備技能。如果您了解 Linux,您可以做更多事情。 它還打開了一扇機會之門,因為大多數現實世界的應用程式都在 Linux 伺服器上執行。學習 Linux 概念的最大好處是它將為您服務很長一段時間。它不會像框架或庫那樣過時。 其他針對程式設計師的**免費線上課程** [5 門學習資料結構和演算法的免費課程](http://javarevisited.blogspot.sg/2018/01/top-5-free-data-structure-and-algorithm-courses-java--c-programmers.html#axzz55lOcYrUM) [為 Java 開發人員提供的 5 門免費 Spring 框架課程](http://www.java67.com/2017/11/top-5-free-core-spring-mvc-courses-learn-online.html) [5 個免費學習 Angular 的線上培訓課程](http://www.java67.com/2018/01/top-5-free-angular-js-online-courses-for-web-developers.html) [5 個免費學習核心 Java 的線上課程](http://javarevisited.blogspot.sg/2017/11/top-5-free-java-courses-for-beginners.html#axzz4zuIICRs9) [學習 Maven 和 Jenkins 的 5 門免費課程](http://www.java67.com/2018/02/6-free-maven-and-jenkins-online-courses-for-java-developers.html) [從頭開始學習 Python 的 5 門免費課程](http://www.java67.com/2018/02/5-free-python-online-courses-for-beginners.html) [學習大資料和 Apache Spark 的 5 門課程](http://javarevisited.blogspot.com/2017/12/top-5-courses-to-learn-big-data-and.html) [5 門學習 Git 和 Github 的免費課程](http://javarevisited.blogspot.sg/2018/01/5-free-git-courses-for-programmers-to-learn-online.html#axzz568Oo1Jao) [學習雲端運算的 5 門最佳課程](https://medium.com/javarevisited/5-best-cloud-computing-courses-to-learn-in-2020-f5f091159401) [解決方案架構師認證的 5 個免費 AWS 練習題](https://javarevisited.blogspot.com/2019/08/top-5-free-aws-solution-architect-Associate-certification-dumps-practice-questions.html) 感謝您到目前為止閱讀這篇文章。如果您喜歡這些免費的 Linux 課程,請與您的朋友和同事分享。如果您有任何問題或回饋,請留言。 > PS --- 如果您只想從課程開始學習 DevOps,我認為《 [5 天學習 Linux 並提升您的職業生涯》](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=634352.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Flearn-linux-in-5-days%2F)是最好的開始。 > PS S. --- 如果您已經了解 Linux 並正在考慮如何提高工作效率和速度,那麼您還可以查看我的文章《 [在 Linux 命令行中更快工作的 10 個技巧》](https://javarevisited.blogspot.com/2018/07/10-tips-on-working-fast-in-unix-or-linux.html) ,如果您有其他技巧,也可以分享。 --- 原文出處:https://dev.to/javinpaul/5-free-courses-to-learn-linux-for-beginners-367f

可以節省您時間的 6 個 CSS 速查表

我建立了 6 個 CSS 備忘單,它們非常有用。讓我們來看看他們。 CSS 彈性盒 ------- ![CSS Flexbox 備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upemhcv181a68r24y9b1.jpg) CSS 網格 ------ ![CSS 網格備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xln52shzdvl60idrbx4j.png) CSS 位置 ------ ![CSS 位置備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wmqk99kbfi2zq4a88cu.png) CSS 顯示值 ------- ![CSS 顯示值備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjhzpqq9dsx7whf1vp1z.png) CSS 選擇器 ------- ![CSS 選擇器備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1j3lpcgvm963pr2mgff.png) CSS :nth-child 選擇器 ------------------ ![CSS:nth-child 選擇器備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewhjn0mkxo3822f9fz28.png) **[按此](https://github.com/WebdevShefali/CheatSheets)下載所有高品質的備忘單。** 這就是今天的全部內容。 我希望這有幫助。 謝謝閱讀。 欲了解更多此類內容,[請點擊此處](https://shefali.dev/blog)。 您也可以在[X(Twitter)](https://twitter.com/Shefali__J)上關注我,取得日常 Web 開發技巧。 繼續編碼! [![請我喝杯咖啡](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/devshefali) --- 原文出處:https://dev.to/devshefali/the-top-6-css-cheatsheets-that-will-save-you-hours-2lp1

可以使用 Python 和 AI 建構的 25 個專案

今天,我們將介紹 25 個可以使用 Python 和 AI 模型建構的副專案。 大多數專案都會有生產級程式碼,因此您可以學到很多東西。 我們開始做吧! --- [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) 大多數初始專案都會使用 Taipy,所以讓我們討論一下這個概念的用例。 Taipy 是一個開源 Python 庫,可用於輕鬆的端到端應用程式開發,具有假設分析、智慧管道執行、內建調度和部署工具。 需要明確的是,Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能,而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具,但在處理大型資料集時,其效能可能會顯著下降,這使得它在生產級使用上不切實際。 另一方面,Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 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://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 這些用例非常驚人,所以一定要檢查一下。 Taipy 在 GitHub 上有超過 8,500 個 Star,並且處於`v3.1`版本,因此它們正在不斷改進。 https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 1.[實時污染儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/pollution_sensors/) ----------------------------------------------------------------------------------------- 使用工廠周圍的感測器測量空氣品質的用例,展示 Taipy 儀表板流資料的能力。 資料在另一台伺服器上產生並透過 WebSocket 發送到此 Taipy 應用程式。 然後 Taipy 處理資料並將其顯示在儀表板上。 當收到新資料時,儀表板會即時更新。 ![即時污染儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0i6pm0ggx6yb655uvd1.png) 如果您想要有關可視化資料流的教程,請查看[有關多線程的文件](https://docs.taipy.io/en/release-3.0/knowledge_base/tips/multithreading/)。 它討論瞭如何建立發送者腳本和接收者腳本,包括套接字參數等。 它涉及到前端和後端的概念。 查看[現場演示](https://realtime-pollution.taipy.cloud/)。 https://github.com/Avaiga/demo-realtime-pollution Star 即時污染儀表板 ⭐️ --- 2.[詐欺檢測](https://github.com/Avaiga/demo-fraud-detection) -------------------------------------------------------- Taipy 應用程式可分析信用卡交易以偵測詐欺行為。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v90fuimlplxuj4llp1zb.png) 它顯示信用卡交易清單。 用戶可以選擇一個日期範圍來預測詐欺。 然後,該應用程式將使用 XGB 模型將潛在的詐欺交易標記為紅色或黃色。 用戶可以選擇一個交易來查看模型預測的解釋,以及客戶的其他交易。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8odxbhc9h3z3vzm4i4yk.png) 使用者還可以選擇模型的閾值。閾值是模型輸出,高於該閾值的交易將被視為詐欺。使用者可以根據顯示的混淆矩陣並透過查看誤報和漏報交易來選擇模型。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8ri5h0ky5zie53g2wk7.png) 查看[現場演示](https://fraud-detection.taipy.cloud/Transactions)。 https://github.com/Avaiga/demo-fraud-detection 明星詐欺偵測 ⭐️ --- 3.[新冠儀表板](https://github.com/Avaiga/demo-covid-dashboard) --------------------------------------------------------- 這裡使用 2020 年的 Covid 資料集。 頁面顯示有關 COVID-19 的不同圖表和資訊。還有一個預測頁面來預測傷亡人數。 該應用程式包括四個部分,如下所示: > ✅ 國。 - 特定國家/地區的 COVID-19 統計資料。 - 在累積資料視圖和密度資料視圖之間輕鬆切換。 - 用於動態資料探索的互動式長條圖。 - 餅圖顯示病例分佈(確診、復健、死亡)。 ![國家](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j22qqjmpd39qwwb4it4o.png) > ✅ 地圖。 透過動態可縮放顏色編碼地圖直觀地展示 COVID-19 的影響。 ![地圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ngdy1pkmujgdel1rz81.png) > ✅ 預測。 透過為不同的預測日期和不同的國家建立場景來產生 COVID-19 預測。 這會分別使用 ARIMA 模型和線性迴歸模型產生 2 個不同的預測(橘色的預測\_x 和綠色的預測\_y)。 透過指定名稱、指定預測日期、選擇國家/地區並點擊「提交」按鈕繼續來啟動新場景。 您可以在“結果”部分的“場景”選項卡中存取它。 ![預測](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8idl5ys0zhkztexujcmh.png) > ✅ 世界。 全球 COVID-19 統計資料透過折線圖和圓餅圖進行匯總。透過更改`Absolute`和`Relative`之間的切換可以看到 Covid 國家/地區影響的比較。 ![世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9kd3rjxa7qjqne798ua.png) 總的來說,對於您的業餘專案和建立非常酷的專案來說,這是一個非常有用的應用程式:) 您可以查看[現場演示](https://covid-dashboard.taipy.cloud/Country)。 https://github.com/Avaiga/demo-covid-dashboard Star Covid 儀表板 ⭐️ --- 4.[建立 LLM 聊天機器人](https://github.com/Avaiga/demo-chatbot) -------------------------------------------------------- 該演示展示了 Taipy 使最終用戶能夠使用 LLM 執行推理的能力。在這裡,我們使用 GPT-3 建立一個聊天機器人,並將對話顯示在互動式聊天介面中。 ![法學碩士聊天機器人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olaw6u8w3fj2wrg0au2r.png) 下面給出了主要函數,該函數將字串提示(即用戶訊息)作為輸入,並從 LLM 傳回回應字串。 ``` def request(state: State, prompt: str) -> str: """ Send a prompt to the GPT-3 API and return the response. Args: - state: The current state. - prompt: The prompt to send to the API. Returns: The response from the API. """ response = state.client.chat.completions.create( messages=[ { "role": "user", "content": f"{prompt}", } ], model="gpt-3.5-turbo", ) return response.choices[0].message.content ``` 您可以閱讀有關如何建立此 LLM 聊天機器人的[完整文件](https://docs.taipy.io/en/release-3.0/knowledge_base/tutorials/chatbot/)。 最好的部分是,您可以根據您的使用情況輕鬆更改程式碼以使用任何其他 API 或模型。 您可以查看[現場演示](https://demo-llm-chat.taipy.cloud/)。 https://github.com/Avaiga/demo-chatbot 明星聊天機器人 ⭐️ --- 5.[即時人臉辨識](https://github.com/Avaiga/demo-face-recognition) ----------------------------------------------------------- 該演示將人臉辨識無縫整合到我們的平台中,借助 OpenCV 庫,使用網路攝影機提供即時人臉偵測體驗。 ![即時人臉辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs9kpit8byxsqq67mhql.png) 您可以非常輕鬆地使用它: A。打開應用程式時,您會透過網路攝影機看到自己。你的臉周圍有一個紅色方塊,上面寫著別人的名字。 b.透過點擊`Capture`按鈕並多次輸入您的名字來訓練模型辨識您。 C。現在點選`Re-train`按鈕。現在應該會出現您的名字。模型現在認出了您。 查看[現場演示](https://face-recognition.taipy.cloud/)。 確保在瀏覽器中啟用相機設置,這是首要條件! 進行人臉偵測和人臉辨識的程式碼位於`src/demo/faces.py`下。自述文件中提供了完整的目錄結構。 https://github.com/Avaiga/demo-face-recognition 明星人臉辨識 ⭐️ --- 6.[庫存可視化](https://github.com/Avaiga/demo-stock-visualization) ------------------------------------------------------------- 在金融市場領域,資料為王。快速、輕鬆地視覺化歷史股票資料並做出預測的能力對於投資者和金融分析師來說至關重要。 這是一個股票資料儀表板,具有互動式視覺元素,可以視覺化歷史股票資料並對 1 至 5 年內的股票進行預測。 ![庫存視覺化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz5jagdfvcnup1jq7qgx.png) 由 Facebook 使用 Taipy 和[Prophet Library](https://facebook.github.io/prophet/docs/quick_start.html)建構。此示範適用於高於 3.8 的 Python 版本。 您可以這樣使用它: A。選擇您想要預測的股票程式碼。 b.打開歷史資料面板。 C。選擇預測週期(從 1 到 5)。 d.點選`PREDICT`按鈕。 e.在預測資料面板中查看您的預測。 F。使用不同的程式碼重複嘗試以比較結果。 您也可以透過點擊底部的`More info`按鈕以表格形式取得預測範圍。 您可以在[src 目錄](https://github.com/Avaiga/demo-stock-visualization/tree/develop/src)下找到負責的主要原始碼。 這個完全互動的 Web 應用程式只需不到 120 行 Python 程式碼即可建立。 查看[現場演示](https://stock-visualization.taipy.cloud/)。 https://github.com/Avaiga/demo-stock-visualization 明星股票視覺化 ⭐️ --- 7.[情感分析](https://github.com/Avaiga/demo-sentiment-analysis)。 ------------------------------------------------------------ 情感分析就像一個機器人,可以從人們的言語中讀出他們的感受。 它會根據快樂、悲傷或憤怒等字眼來判斷它們的感覺是好是壞。然後,它告訴我們大多數人在說話時是高興還是悲傷。 因此,只需看看人們所說的內容,它就可以幫助我們了解人們對事物(例如電影或遊戲)的感受! 簡而言之,它是自然語言處理(NLP)中的一種技術,用於確定文本中傳達的情緒基調。它可以幫助企業和個人更好地掌握書面內容所表達的情感和語氣。 結果是一個兩頁的應用程式,它使用情感分析模型來分析輸入和整個文本。 第一頁分析使用者輸入,而第二頁讓使用者選擇要上傳的檔案(文字)。該文本將被分析並顯示背後的情感。 > ✅ 第 1 頁:Line - 分析使用者輸入 我們的情緒分析應用程式的初始頁面名為“Line”,用於即時分析使用者輸入。無論是簡短的句子還是較長的段落,只需將文字輸入或貼到輸入框中,Taipy 就會快速評估文本中傳達的情感。 ![第1頁情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/826k2if80arn6y3uz3dz.png) > ✅ 文字 - 上傳和分析文字文件 第二個頁面名為“文字”,允許使用者上傳整個文字檔案 (.txt) 以進行全面的情感分析。 用戶可以從他們的設備中選擇一個文字文件,該應用程式將提供對整個文件所表達的情緒的洞察。 此功能對於處理較長的文字(例如文章、報告或廣泛的客戶回饋)非常有用。 ![第2頁情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb3xmtfi7fz6vm8807ph.png) 您可以查看[現場演示](https://sentiment-analysis.taipy.cloud/line)。 https://github.com/Avaiga/demo-sentiment-analysis 明星情感分析 ⭐️ --- 8.[漂移檢測](https://github.com/Avaiga/demo-drift-detection)- 檢測糖尿病資料集中的漂移。 ----------------------------------------------------------------------- ![漂移檢測](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey1f4ygskvkk6dwqc2c8.png) 資料漂移是主要在機器學習中使用的概念,其中推理資料的分佈偏離訓練資料的分佈。 各種因素,例如底層資料來源的變化、資料收集過程的變化或資料儲存過程的變化,都可能導致資料漂移。 這通常會導致稱為訓練服務偏差的效能問題,其中用於推理的模型不用於推理資料的分佈並且無法泛化。 存在統計測試來檢測資料集中的漂移。這些檢定計算兩個系列來自同一分佈的機率。如果機率低於閾值,我們認為存在漂移。 如何使用該應用程式? ✅ 選擇比較資料集。 在這裡,我們選擇 data\_big,這是一個與參考資料集類似的資料集,但其中的行具有較高的血壓值。我們在血壓分佈圖上看到,與綠色參考資料集相比,紅色比較資料集的分佈向右移動。 ![資料集](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1752b8elnpwalycyex4.png) ✅ 按一下此處執行場景。 ![執行應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cel6qa0xxiplxgghwhyi.png) ✅ 在頁面底部可視化結果。 在這裡,我們看到血壓列的柯爾莫哥洛夫檢定的 p 值低於 0.05,這意味著兩個血壓資料集來自同一分佈的機率低於 5%。我們可以拒絕兩個資料集來自相同分佈的假設,並得出血壓列存在漂移的結論。 ![視覺化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mh8lftfjiypr27p10ec.png) 您可以按照下面所附的即時示範中的步驟操作,並在 GitHub 上查看原始程式碼。 這使用資料管道來比較資料集並檢測漂移。 ![資料管道](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7s7v5hpicjyoe2eojwx8.png) 查看[現場演示](https://drift-detection.taipy.cloud/)。 https://github.com/Avaiga/demo-drift-detection 星漂移偵測 ⭐️ --- 9.[錢包明智](https://github.com/Ujj1225/from_Taipy-walletWISE) ---------------------------------------------------------- ![錢包明智](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vva4tu9dxrz9fgaiavlb.png) WalletWise 就像是我們財務的友善幫手,幫助我們追蹤收入和支出。它使用 Gemini 進行交易,使用 Taipy 來了解支出。 一些不錯的功能是: ✅ 使用者可以輸入他們的收入和支出以及部門作為標題。這使他們能夠了解和探索他們從哪個部門賺了多少錢以及在哪個部門花了多少錢。 ✅ 對使用者的收入和支出進行分析,以數學方式顯示,並顯示 7 個做出更好、更明智的財務決策的提示。 ✅ 實現了一個視覺化工具,您可以在其中看到您賺錢的不同標題和您花錢的不同標題。 這是一個非常優秀的用例,並且在創造力方面非常好。 您可以閱讀[安裝說明](https://github.com/Ujj1225/from_Taipy-walletWISE?tab=readme-ov-file#installation)並查看[專案演示](https://github.com/Ujj1225/from_Taipy-walletWISE?tab=readme-ov-file#demo)。 https://github.com/Ujj1225/from\_Taipy-walletWISE Star WalletWise ⭐️ --- 10.[太皮象棋](https://github.com/KorieDrakeChaney/taipy-chess) ---------------------------------------------------------- ![棋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xasxqldf7z1q5ie3r4nn.png) 所有應用程式中我最喜歡的一個,因為我喜歡國際象棋。哈哈! 這是一個基於20,000盤棋的國際象棋視覺化工具。您可以查看所有比賽、他們參加的開局、對手、表現最好的開局以及最成功的開局。 您可以查看資料的熱圖和圖表。 ![總移動熱圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh1llp4vx24xtxjji042.png) 總移動熱圖 ![棋子的第一個動作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s9do6lop5immbmjtqwa.png) 棋子的第一個動作 您可以觀看 Korie 的[示範](https://github.com/KorieDrakeChaney/taipy-chess?tab=readme-ov-file#demo)。我愛它 :) 這清楚地表明我們使用 Taipy 的可能性沒有限制。 https://github.com/KorieDrakeChaney/taipy-chess Star Taipy Chess ⭐️ --- 11.[奧運獎牌](https://github.com/enarroied/Olympic-Medals-Taipy-App) ---------------------------------------------------------------- ![奧運獎牌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkl0llaopepdb1s2jxy2.png) 這是一個 Taipy 儀表板,顯示從現代奧運會開始到 2024 年初頒發的奧運獎牌資訊(即不包括 2024 年巴黎奧運會)。 ✅ 儀表板有兩個選項卡: - 一個選項卡顯示所有奧運獎牌的總結資料 - 第二個選項卡重點關注奧林匹克委員會(國家,但也包括特別委員會,例如難民委員會等)獲得的獎牌。 它還具有多種類型的圖表,例如長條圖、旭日圖、折線圖、分區統計圖和網格圖。 另外,儀表板會根據所選年份和區域類型動態更新資料。 您可以在這裡觀看演示! https://www.youtube.com/watch?v=\_1X7etBFTk0 其中涉及到許多概念,而 Eric 實現了一個非常優秀的用例! https://github.com/enarroied/Olympic-Medals-Taipy-App 奧運明星獎牌 ⭐️ --- 12. [GPT Researcher](https://github.com/assafelovic/gpt-researcher) - 基於 GPT 的線上研究自主代理。 --------------------------------------------------------------------------------------- ![GPT研究員](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vbqw84mrere5bcfalhk.png) GPT Researcher 是領先的自主代理,負責處理從準確的來源收集到研究結果組織的一切事務。 好的一點是它也引用了研究結果的來源,從而提高了可信度。我喜歡整個概念:) 一些瘋狂的功能是: ✅ 可以產生長而詳細的研究報告(超過2K字)。 ✅ 每項研究總結 20 多個網路資源,以形成客觀和事實的結論。 ✅ 包括易於使用的網路介面(HTML/CSS/JS)。 ✅ 透過 JavaScript 支援抓取網路資源。 ✅ 追蹤存取和使用的網路資源的追蹤和上下文。 ✅ 將研究報告匯出為 PDF、Word 等。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0o49xyzfmzuvmlotgal.png) 開始使用以下命令。 ``` pip install gpt-researcher ``` 您可以這樣使用它。 ``` from gpt_researcher import GPTResearcher query = "why is Nvidia stock going up?" researcher = GPTResearcher(query=query, report_type="research_report") # Conduct research on the given query await researcher.conduct_research() # Write the report report = await researcher.write_report() ``` 請閱讀下面隨附的[安裝說明](https://github.com/assafelovic/gpt-researcher?tab=readme-ov-file#%EF%B8%8F-getting-started)和快速入門指南。 如果您想了解架構的細節,代理商會利用 gpt3.5-turbo 和 gpt-4-turbo(128K 上下文)來完成研究任務。我們僅在必要時才使用每種方法來優化成本。研究任務平均需要大約 3 分鐘才能完成,成本約為 0.1 美元。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ls54ua4d3nhn473ek04.png) 您可以閱讀官方部落格了解[GPT Researcher 的工作原理](https://docs.tavily.com/blog/building-gpt-researcher)。 您可以閱讀[常見問題](https://docs.tavily.com/docs/faq)以了解有關準確性等的更多資訊。 您可以閱讀[文件](https://docs.tavily.com/docs/gpt-researcher/getting-started)並存取他們的[官方網站](https://gptr.dev/)。 在這裡觀看演示! ![GPT 研究員演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xfgnes109mqfyk0r3uq.gif) 它在 GitHub 上有 8700 顆星,並且正在不斷改進。 https://github.com/assafelovic/gpt-researcher GPT 明星研究員 ⭐️ --- 13.[私人 GPT](https://github.com/zylon-ai/private-gpt) - 在沒有網路的情況下詢問有關您的文件的問題。 ---------------------------------------------------------------------------- ![私有GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nshjqmm5xq6kgqkgfdc.png) PrivateGPT 是一個可立即投入生產的 AI 專案,即使在沒有網路連線的情況下,您也可以使用大型語言模型 (LLM) 的功能來詢問有關文件的問題。 100% 私有意味著任何時候都沒有資料離開您的執行環境。 API 分為兩個邏輯區塊: A。高級 API,抽象化了 RAG(檢索增強生成)管道實現的所有複雜性: - 文件攝取:內部管理文件解析、分割、元資料擷取、嵌入產生和儲存。 - 使用所攝取文件中的上下文進行聊天和完成:抽像上下文檢索、提示工程和回應產生。 b.低階 API,允許高階用戶實現複雜的管道: - 嵌入生成:基於一段文字。 - 上下文區塊檢索:給定查詢,從攝取的文件中傳回最相關的文字區塊。 您可以閱讀[安裝指南](https://docs.privategpt.dev/installation/getting-started/installation)來開始。 您可以閱讀[文件](https://docs.privategpt.dev/overview/welcome/introduction)以及所涉及的[詳細架構](https://github.com/zylon-ai/private-gpt?tab=readme-ov-file#-architecture)。 PrivateGPT 現在正在發展成為產生 AI 模型和原語的網關,包括補全、文件攝取、RAG 管道和其他低階建置塊。 他們在 GitHub 上擁有超過 51,000 顆星,並且發展迅速。 https://github.com/zylon-ai/private-gpt 明星私人 GPT ⭐️ --- [14.facefusion](https://github.com/facefusion/facefusion) - 下一代臉部交換器和增強器。 ------------------------------------------------------------------------- ![臉部融合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea0w92sm51da799632vr.png) 這是下一代臉部交換器和增強器。有多種用途,您可以輕鬆做到。 他們還提供了一個[研討會部分](https://docs.facefusion.io/workshop),您可以在其中了解如何建立 UI 元件和定義框架處理器。 例如,這就是建立 UI 元件的方式。 ``` // create a new file facefusion/uis/components/example.py // Implement the essential methods of the UI component from typing import Optional import gradio from facefusion.uis.typing import Update EXAMPLE_IMAGE : Optional[gradio.Image] = None def render() -> None: global EXAMPLE_IMAGE EXAMPLE_IMAGE = gradio.Image() def listen() -> None: EXAMPLE_IMAGE.change(update, inputs = EXAMPLE_IMAGE, outputs = EXAMPLE_IMAGE) def update() -> Update: return gradio.update() ``` 您只需加入該元件即可。 ``` from facefusion.uis.components import example ``` ![作坊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxznqz8rg23q4tb2brne.png) 安裝可能有點複雜,所以我建議根據您使用的特定環境閱讀[安裝指南](https://docs.facefusion.io/installation)。 您可以使用此命令檢查基準測試。 ``` python run.py --ui-layouts benchmark ``` ![基準](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdc3s7xwjxoukee784ds.png) 您可以閱讀[文件](https://docs.facefusion.io/)並了解有關[技術術語的](https://docs.facefusion.io/knowledgebase/technical-terms)更多資訊。 他們在 GitHub 上擁有超過 14k 個 star,並且發布了`v2.5`版本。 https://github.com/facefusion/facefusion 明星facefusion ⭐️ --- 15. [H2O LLMStudio](https://github.com/h2oai/h2o-llmstudio) - 用於微調 LLM 的無程式碼 GUI。 --------------------------------------------------------------------------------- ![H2O法學碩士工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a03nefeobwwf9bkhcgwg.png) H2O LLM Studio 是一個開源、無程式碼的 LLM 圖形使用者介面 (GUI),專為微調最先進的大型語言模型而設計。 微調預訓練的語言模型需要編碼專業知識以及有關模型及其超參數的廣泛知識,但是,H2O LLM Studio 使 NLP 從業者能夠輕鬆微調他們的 LLM,無需編碼,並且比定制具有更好的靈活性。 H2O LLM Studio 還可讓您與微調模型聊天並接收有關模型效能的即時回饋。 NLP 從業者和資料科學家尤其可能會發現輕鬆有效地建立和微調大型語言模型很有用。您可以閱讀[詳細的效能統計資料](https://h2oai.github.io/h2o-llmstudio/get-started/llm-studio-performance)及其雲端[架構](https://docs.h2o.ai/haic-documentation/overview/architecture)。 如果您正在開始,我建議您觀看此內容! https://www.youtube.com/watch?v=u48QaIAIFw4 您可以閱讀有關[核心功能的](https://h2oai.github.io/h2o-llmstudio/get-started/core-features)訊息,例如: ✅ 無程式碼微調 ✅ 高度可自訂 ✅ 關於模型性能的即時回饋 您可以使用以下命令啟動 H2O LLM Studio。 ``` make llmstudio ``` 如果你不知道這些概念,他們也有[清晰的概念指南,](https://h2oai.github.io/h2o-llmstudio/concepts)包括 Generative AI、LoRA、Quantization、LLM Backbone 等等。 您可以閱讀[文件](https://docs.h2o.ai/haic-documentation/)。 您可以使用它非常輕鬆且符合標準地製作一個副專案。 他們在 GitHub 上有 3,600 顆星,並且發布了`v1.5`版本。 https://github.com/h2oai/h2o-llmstudio 明星 H2O LLMStudio ⭐️ --- 16. [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 -------------------------------------------------------------------------------- ![GPT自動機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdzv06jnr3z33s7qll5k.png) 您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如,打開應用程式、尋找餐廳、綜合資訊。太棒了:D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分: A。語音命令:它使用本地執行的 Whisper(Buzz 的一個分支)來產生命令。 b.命令到行動:您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後,就像任何優秀的人工智慧一樣,我們讓代理商使用 AppleScript 說出最終結果「{Result}」(如果您以前沒有使用過,請嘗試在 Mac 終端機中輸入「Hello World!」)。 我們製作了一個自訂工具,讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串: ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的,GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後,它使用LangChain Agent 選擇一組操作,包括使用OpenAI 的GPT-3(“text-davinci-003”)從提示符號產生AppleScript(用於桌面自動化)和JavaScript(用於瀏覽器自動化)命令,然後執行產生的腳本。 請記住,這不適用於生產用途。該專案執行從自然語言產生的程式碼,可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用: ✅ 求計算結果。 > 提示:“2 + 2 是什麼?” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ✅ 尋找附近的餐廳。 > 提示:“查找我附近的餐廳” 它將打開 Chrome,谷歌搜尋附近的餐廳,解析頁面,然後返回最上面的結果。有時它很厚顏無恥,反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候,它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容: ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to the main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得,請自行承擔風險。哈哈! ✅ 如果您要求 GPT Automator 擦除您的計算機,它會的。 是的,如果您要求的話,它會擦除您的電腦! 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示! https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f --- 17. [RepoChat](https://github.com/pnkvalavala/repochat) - 支援 GitHub 儲存庫互動的聊天機器人助理。 ---------------------------------------------------------------------------------- ![重新聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gf9bjn2a47f1t43aiju.png) Repochat 是一個互動式聊天機器人專案,旨在使用大型語言模型 (LLM) 參與有關 GitHub 儲存庫的對話。 它允許用戶進行有意義的討論、提出問題並從 GitHub 儲存庫檢索相關資訊。本自述文件提供了在本機電腦上設定和使用 Repochat 的逐步說明。 他們建立了兩個具有不同功能的分支,這對我來說有點新鮮。 ✅ Repochat 的主要分支被設計為完全在您的本機電腦上執行。此版本的 Repochat 不依賴外部 API 呼叫,並且可以更好地控制您的資料和處理。如果您正在尋找獨立的解決方案,那麼主分支就是您的最佳選擇。 ✅ Repochat 的雲端分支主要依賴對外部服務的 API 呼叫來進行模型推理和儲存。它非常適合那些喜歡基於雲端的解決方案並且不想設定本地環境的人。 您可以閱讀[安裝說明](https://github.com/pnkvalavala/repochat?tab=readme-ov-file#installation)。 Repochat 讓您與聊天機器人進行對話。您可以提出問題或提供輸入,聊天機器人將從向量資料庫中檢索相關文件。 然後,它將您的輸入以及檢索到的文件傳送到語言模型以產生回應。 預設情況下,我已將模型設為`codellama-7b-instruct` ,但您可以根據計算機的速度更改它,甚至可以嘗試 13b 量化模型進行回應。 聊天機器人在對話過程中保留記憶以提供上下文相關的回應。 您可以查看[即時網站](https://repochat.streamlit.app/),您可以使用 API 金鑰進行檢查。 你可以觀看這個演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7ndxqpwkkww4f5qudiq.gif) 如果您想查看的話,我找到了另一種[選擇](https://github.com/peterw/Chat-with-Github-Repo)。 Repochat 擁有 200 多顆星,並部署在 Streamlit 上。 https://github.com/pnkvalavala/repochat 明星 RepoChat ⭐️ --- 18. [myGPTReader](https://github.com/madawei2699/myGPTReader) - 閱讀並與 AI 機器人聊天。 ------------------------------------------------------------------------------ ![我的GPT閱讀器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58doii8daomf54te5eca.png) myGPTReader 是 Slack 上的機器人,可以閱讀和總結任何網頁、文件(包括電子書),甚至來自 YouTube 的影片。它可以透過語音與您交流。 一些有價值的功能是: ✅ 使用 myGPTReader 透過對話快速閱讀和理解任何網頁內容,甚至是影片(目前僅支援帶有字幕的 YouTube 影片)。 ![讀者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x626mtnvqr5vw43938iw.gif) ✅ 使用 myGPTReader 快速閱讀任何文件的內容,支援電子書、PDF、DOCX、TXT 和 Markdown。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5am7njxco7vhronuirgu.gif) ✅ 透過與 myGPTReader 語音對話來練習外語,它可以成為您的私人導師,支援中文、英語、德語和日語。 ![嗓音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40pzlgtuhcyxgwa1z2gs.gif) ✅ 內建大量提示模板,使用它們可以更好地與chatGPT對話。 ![問](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehgn218hwewzeft98xkp.gif) ✅ myGPTReader 每天都會發出最新的熱門新聞,並自動產生摘要,讓您快速了解今日熱點。 您可以造訪[官方網站](https://www.myreader.io/)。 您可以加入擁有超過 5000 名會員的儲存庫上的 Slack 頻道,免費體驗所有這些功能。 它們在 GitHub 上有 4.4k 顆星,並且像此列表中的其他專案一樣使用 Python 建置。 https://github.com/madawei2699/myGPTReader 星 myGPTReader ⭐️ --- 19. [Marker](https://github.com/VikParuchuri/marker) - 將 PDF 快速且高精度地轉換為 Markdown。 --------------------------------------------------------------------------------- ![標記](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kpdu6jh9qmax5cikbah.png) Marker 將 PDF、EPUB 和 MOBI 轉換為 Markdown。它比牛軋糖快 10 倍,在大多數文件上更準確,並且產生幻覺的風險較低。 我們都知道這有多大幫助,尤其是對於研究論文來說。 ✅ 支援一系列 PDF 文件(針對書籍和科學論文進行了最佳化)。 ✅ 刪除頁首/頁尾/其他工件。 ✅ 將大多數方程式轉換為乳膠。 ✅ 設定程式碼區塊和表格的格式。 ✅ 支援多種語言(儘管大多數測驗是用英語完成的)。請參閱 settings.py 以取得語言列表,或新增您自己的語言列表。 ✅ 適用於 GPU、CPU 或 MPS。 他們也清楚地記錄了[範例](https://github.com/VikParuchuri/marker?tab=readme-ov-file#examples)以及 Marker 和 Nougat 的結果。 ![基準](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqtl447c9h0taisbj8hl.png) 性能結果採用標記和牛軋糖設置,因此它們在 A6000 上均佔用約 3GB 的 VRAM。 閱讀速度和準確性[基準測試](https://github.com/VikParuchuri/marker?tab=readme-ov-file#benchmarks)以及有關如何執行您自己的基準測試的說明。 例如,請參閱此 PDF: [Think Python](https://greenteapress.com/thinkpython/thinkpython.pdf)和[Marker](https://github.com/VikParuchuri/marker/blob/master/data/examples/marker/thinkpython.md) vs [Nougat](https://github.com/VikParuchuri/marker/blob/master/data/examples/nougat/thinkpython.md)的 markdown 檔案。 閱讀[安裝說明](https://github.com/VikParuchuri/marker?tab=readme-ov-file#installation)。 他們也記錄瞭如何正確使用它: - [轉換單一文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-a-single-file) - [轉換多個文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-multiple-files) - [在多個 GPU 上轉換多個文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-multiple-files-on-multiple-gpus) 他們在 GitHub 上有 8k+ 星,我認為它不再被維護了。 https://github.com/VikParuchuri/marker 星標 ⭐️ --- 20. [Instrukt](https://github.com/blob42/Instrukt) - 終端機中整合人工智慧。 ---------------------------------------------------------------- ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsk64pf5yuosui91tmz9.png) Instrukt是一個基於終端的AI整合環境。它提供了一個平台,用戶可以: - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們,並且為了安全起見,在安全容器(目前使用 Docker 實作)中執行它們,以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ``` ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3aza7hnlji7hbi2o0js.gif) 有許多令人興奮的功能,例如: - 基於終端的介面,讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互,以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理,這是一個簡潔的小功能。 ![控制台除錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaan8np68e3fk1yueexm.png) Instrukt 已獲得 AGPL 許可證,這意味著任何人都可以將其用於任何目的。 可以肯定地說,Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案,因此他們在 GitHub 上有大約 200 多顆星,但用例非常好。 https://github.com/blob42/Instrukt 舊指令 ⭐️ --- 21.[微代理](https://github.com/aymenfurter/microagents)- 能夠自我編輯提示的代理。 ------------------------------------------------------------------ ![微代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuxv03dgb03s04dkmkm9.png) 它是一個實驗框架,用於動態建立自我改進的代理來回應任務。 微代理代表了一種建立自我改進代理的新方法。小型微服務大小(因此稱為微代理)代理是根據用戶分配給助手的任務動態生成的,評估其功能,並在成功驗證後存儲以供將來重用。 這使得跨聊天會話的學習成為可能,使系統能夠獨立推斷任務執行的方法。 這是使用`Python` 、 `OpenAI's GPT-4 Turbo`和`Text-Embedding-Ada-002`建構的。 您可以閱讀[安裝說明](https://github.com/aymenfurter/microagents?tab=readme-ov-file#installation)。他們提到您應該擁有一個可以存取 gpt-4-turbo 和 text-embedding-ada-002 的 OpenAI 帳戶。 讓我們看一個獲取天氣預報代理的範例。 ``` You are an adept weather informant. Fetch the weather forecast by accessing public API data using this Python code snippet: ``python import requests import json def fetch_weather_forecast(location, date): response = requests.get(f"https://api.met.no/weatherapi/locationforecast/2.0/compact?lat={location[0]}&lon={location[1]}") weather_data = response.json() for day_data in weather_data['properties']['timeseries']: if date in day_data['time']: print(day_data['data']['instant']['details']) break `` # Example usage: fetch_weather_forecast((47.3769, 8.5417), '2024-01-22T12:00:00Z') Note: Replace the (47.3769, 8.5417) with the actual latitude and longitude of the location and the date string accordingly. ``` 如果您想知道如何建立代理,那麼此架構圖將對此進行解釋。 ![圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oi4fbt6e5qauqo293qt.png) 您可以看到[工作演示](https://github.com/aymenfurter/microagents?tab=readme-ov-file#demo)。 他們在 GitHub 上有大約 700 顆星,值得一看。 https://github.com/aymenfurter/microagents 明星微代理 ⭐️ --- 22. [Resume Matcher](https://github.com/srbhr/Resume-Matcher) - 一個改進你的履歷的免費工具。 ------------------------------------------------------------------------------ ![履歷表匹配器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av3u7dd3d3rm7k108w7i.png) Resume Matcher 是一款開源免費工具,可用於完善您的履歷。根據職位描述自訂您的履歷。找到匹配的關鍵字,提高可讀性,並深入了解您的履歷。 它是如何運作的? 履歷表匹配器使用 Python 讀取您的履歷和職位描述,就像 ATS 一樣。 它建議透過以下方式進行更改,使您的履歷適合 ATS: ✅ 解析:它使用 Python 分解你的履歷和工作描述。 ✅ 關鍵字提取:該工具從職位描述中尋找重要關鍵字,例如技能和資格。 ✅ 關鍵術語提取:辨識職位描述中的主題以了解其上下文。 ✅ 向量相似度:使用 FastEmbedd,它將您的履歷與職位描述進行比較,看看它們的匹配程度。配對得越好,通過 ATS 篩選的機會就越高。 ![使命](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kintryj2685slbya98zr.png) 您可以閱讀[安裝說明](https://github.com/srbhr/Resume-Matcher?tab=readme-ov-file#how-to-install)。 您可以查看[現場演示](https://resume-matcher.streamlit.app/)或自述文件中附帶的演示。 Resume Matcher 是由 Saurabh Rai 建立的一個令人驚嘆的專案,他還在 DEV 上寫了很棒的帖子! 它在 GitHub 上有 4.5k 顆星,並且仍然維護良好。 https://github.com/srbhr/Resume-Matcher 明星簡歷匹配器 ⭐️ --- 23.[背景移除器](https://github.com/nadermx/backgroundremover)- 讓您可以透過簡單的 CLI 使用 AI 從影像和影片中移除背景。 ------------------------------------------------------------------------------------------ ![背景去除劑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8bppslk45ci383wpman.png) 這是一個使用 AI 從圖像和影片中刪除背景的命令列工具。 首先從 pypi 安裝 backgroundremover。 ``` pip install --upgrade pip pip install backgroundremover ``` 也可以在不透過 pip 安裝的情況下執行它,只需克隆 git 以在本地啟動虛擬環境安裝要求並執行。 您可以使用的一些命令: - 從本機檔案圖像中刪除背景 ``` backgroundremover -i "/path/to/image.jpeg" -o "output.png" ``` - 從本地影片中刪除背景並將其覆蓋在圖像上 ``` backgroundremover -i "/path/to/video.mp4" -toi "/path/to/videtobeoverlayed.mp4" -o "output.mov" ``` 您可以檢查可以透過 CLI 使用的所有[命令](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#usage-as-a-cli)。 您甚至可以將它用作圖書館。 ``` from backgroundremover.bg import remove def remove_bg(src_img_path, out_img_path): model_choices = ["u2net", "u2net_human_seg", "u2netp"] f = open(src_img_path, "rb") data = f.read() img = remove(data, model_name=model_choices[0], alpha_matting=True, alpha_matting_foreground_threshold=240, alpha_matting_background_threshold=10, alpha_matting_erode_structure_size=10, alpha_matting_base_size=1000) f.close() f = open(out_img_path, "wb") f.write(img) f.close() ``` 您可以閱讀[安裝說明](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#installation)並觀看[現場演示](https://www.backgroundremoverai.com/)。 > 輸入與輸出。 ![輸入影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0rwjaxxw460lugle5z2.png) 他們在 GitHub 上有 6k star,我們絕對可以用它來學習一些重要的概念。 https://github.com/nadermx/backgroundremover 明星背景去除器 ⭐️ --- 24. [Tkinter Designer](https://github.com/ParthJadhav/Tkinter-Designer) - 建立 Python GUI 的簡單快速的方法。 ------------------------------------------------------------------------------------------------- ![Tkinter 設計師](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dt5ij4fu948yz4fwnqc.png) Tkinter Designer 的建立是為了加快 Python 中的 GUI 開發過程。它使用著名的設計軟體Figma,讓用Python建立漂亮的Tkinter GUI變得輕而易舉。 Tkinter Designer 使用 Figma API 來分析設計檔案並建立 GUI 所需的對應程式碼和檔案。 如果您想知道它是如何工作的? 使用者唯一需要做的就是使用 Figma 設計一個介面,然後將 Figma 檔案 URL 和 API 令牌貼到 Tkinter Designer 中。 Tkinter Designer 將自動產生在 Tkinter 中建立 GUI 所需的所有程式碼和映像。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb2pjsige0b9w5rynipm.png) 您可以閱讀逐步指南\](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md),了解如何正確使用它,該指南有多種語言版本。 您可以在這裡觀看演示! https://www.youtube.com/watch?v=Qd-jJjduWeQ 他們還展示了您可以使用它輕鬆複製的[網站範例](https://github.com/ParthJadhav/Tkinter-Designer?tab=readme-ov-file#-examples)。 ![網站範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdiyhj08bwatasonpekm.png) 它們在 GitHub 上有 8,300 顆星,並被大約 100 名開發人員使用。 https://github.com/ParthJadhav/Tkinter-Designer Tkinter 明星設計師 ⭐️ --- 25. [Open Interpreter](https://github.com/OpenInterpreter/open-interpreter) - 電腦自然語言介面。 --------------------------------------------------------------------------------------- ![打開解釋器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av7udc5fibj1wz88w0u8.png) Open Interpreter 允許法學碩士在本地執行程式碼(Python、Javascript、Shell 等)。您可以在安裝後執行 $terpreter,透過終端機中類似 ChatGPT 的介面與 Open Interpreter 聊天。 這為電腦的通用功能提供了自然語言介面: ✅ 建立和編輯照片、影片、PDF 等。 ✅ 控制 Chrome 瀏覽器執行研究、繪製、清理和分析大型資料集。 我不了解你,但他們的[網站](https://www.openinterpreter.com/)讓我驚嘆不已! 使用此命令快速啟動。 ``` pip install open-interpreter // After installation, simply run: interpreter ``` 您可以閱讀[快速入門指南](https://docs.openinterpreter.com/getting-started/introduction)。 您應該閱讀[與 ChatGPT 程式碼解釋器的比較](https://github.com/OpenInterpreter/open-interpreter?tab=readme-ov-file#comparison-to-chatgpts-code-interpreter)以及可以使用的[命令](https://github.com/OpenInterpreter/open-interpreter?tab=readme-ov-file#commands)。 您可以閱讀[文件](https://docs.openinterpreter.com/getting-started/introduction)。 Open Interpreter 可與託管語言模型和本機語言模型搭配使用。託管模型速度更快、功能更強大,但需要付費。本地模型是私有且免費的,但能力往往較差。 它們在 GitHub 上擁有超過 48k 顆星,並被 300 多名開發人員使用。 https://github.com/OpenInterpreter/open-interpreter Star 開放式解釋器 ⭐️ --- 獲得經驗並提高編碼水平的最佳方法是建立業餘專案。 我希望您能夠建立其中一些專案,或至少獲得靈感。 評論下來告訴其他人任何其他很酷的 Python 專案:) 祝你有美好的一天! 關注 Taipy 以了解更多此類內容。 https://dev.to/taipy --- 原文出處:https://dev.to/taipy/25-projects-that-you-can-build-with-python-and-ai-12i9

搜尋將是 LLMs 和人工智慧應用的未來。

在查看 LinkedIn 時,我的動態中出現了一篇[有趣的文章](https://www.linkedin.com/pulse/every-llm-company-search-hard-future-retrieval-systems-7zigc/?trackingId=MuIYNy7CyPMG2IMgoJv9tg%3D%3D)。其標題是「每個 LLMs 公司都是一家搜尋公司,而搜尋很困難: LLMs 檢索系統的未來」。 這很有趣,因為我們在過去幾年中建立了 SWIRL,以幫助擴展公司的搜尋和人工智慧基礎設施。正如我們所提到的,搜尋無處不在。 DEVTO現在正在使用Algolia(也許更早,他們的程式碼用於執行搜尋)來實現智慧搜尋。任何嘗試過建立支援搜尋的應用程式的人都知道,搜尋很複雜,涉及許多因素,例如相關性排名和個人化。 這使得建築物搜尋變得困難。這適用於嘗試建立支援搜尋的應用程式的人。搜尋很難管理,需要考慮很多因素。以搜尋引擎人工智慧領域的領導者谷歌為例,該公司在搜尋結果方面面臨批評。人們開始[抱怨]()其搜尋結果。但我們不僅僅談論谷歌。這裡有很多東西要理解。 您組織內部的資料怎麼樣?你工作的地方? ------------------- 企業擁有大量分散在各個部門和管道的資料——從客戶互動和銷售記錄到操作日誌和員工回饋。 他們認識到利用這些資料建立人工智慧驅動的應用程式的巨大潛力,這些應用程式可以簡化營運、增強客戶體驗並推動創新。然而,挑戰在於統一這種分散的資料格局。 ![組織內部的資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mohvy22urvxf3pn0mbpt.jpg) 資料中充滿了許多資訊: - 會議記錄 - 孤立的應用程式 - 電子郵件檔案 - 內部文件 - 客戶支援票 - 專案管理工具 挑戰在於檢索該資訊。我們目前的做法是將所有資料傳輸到向量資料庫。然後用它來檢索資訊。這既簡單又困難。很簡單,因為您知道在哪裡搜尋。這很困難,因為它管理這些向量資料庫(或任何搜尋索引)。你必須: - 不斷尋找資料。 - 比較索引資料和更新資料。 - 如有必要,請更新。 最重要的是,如果您使用向量資料庫,您將處理嵌入。但這是另一個部落格的故事。 那為什麼搜尋是 LLMs 申請的未來呢? ------------------ 我們產生的大量資料變得越來越難以管理。傳統方法成本高、耗時長,且有一定的[安全風險](https://swirlaiconnect.com/blog/the-risks-of-relying-on-a-single-data-repository-for-retrieval-augmented-generation-rag)。 當您的 LLMs 可以搜尋資料儲存庫內的資訊。他們可以提供您和您的團隊所需的訊息,而無需在訓練記憶中進行搜尋,或在訓練記憶不存在時產生幻覺。透過提供你所要求的背景,它就變成了尋找一本書然後回答。 ### 我們的重點該放在哪裡? 為了開發能夠在內部資料上表現良好的人工智慧應用程式,我們需要一種高效的檢索增強生成(RAG)方法。在這種情況下,檢索器是一個搜尋平台。 屬性應該是: - 它應該連接到內部資料來源。 - 確保安全、尊重並遵循當前和現有的安全解決方案。 - 理解人類語言的上下文。 - 提供優秀且相關的結果。 這就是我們建立[SWIRL 的](https://swirlaiconnect.com)方式:一個高效的檢索器,可以提供良好的答案,與多個資料提供者連接,並允許在企業中使用人工智慧。 這樣,一項工作就完成了。你有資料。您所要做的就是配置一個資料提供者。建立查詢並取得答案。一旦您即時獲得了所需的資料,機會就無窮無盡: - 取得人工智慧摘要。 - 在人工智慧的幫助下,使用這些資料來製作報告。 - 建立一個可以幫助您完成任務的副駕駛。 一旦解決了檢索部分,您就可以做很多事情。 SWIRL 在自架平台上運作,因此您的資料仍然安全。 看看我們能用 SWIRL 做什麼? ----------------- 我可以搜尋來源並為您提供資料。其餘的只是安排事情的一種方式。從廣義上講,它既簡單又安全。 我想給你一個關於架構的想法。檢查這個圖。它展示了我們如何利用人工智慧基礎設施平台來做到這一點。 ![SWIRL AI Connect 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kqhvqagk32y9oln2kj1.png) 這就是最好的事情:即時搜尋您的資料。 這裡的遊戲規則改變者是我們應該選擇一個框架,該框架允許我們從多個應用程式獲取資料而不限制最終用戶。然後,讓 LLMs 協助您執行任務。 還有一點:最好的資料並不總是在 SQL 資料庫中。它可以位於您團隊的房間、會議記錄或您保存的其他一些文件中。上述架構使您能夠找到並獲得良好的結果,讓您感覺自己是編寫它們的人。 搜尋,不僅僅是語義搜尋,而是通用搜尋架構,需要縮小我們想要從人工智慧獲得的資訊差距。 與我們一起建立人工智慧基礎設施軟體 SWIRL ----------------------- [![加入 SWIRL 社區](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqk0xqbjxlj1xdcomn9m.jpg)](https://github.com/swirlai/swirl-search) SWIRL 是開源的並用 Python 建構。我們正在開發許多好東西,從搜尋到聊天介面。如果您是 UI 專業人士,請幫助我們! https://join.slack.com/t/swirlmetasearch/shared\_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw 加入我們的 Slack。 觀看[有關如何設定 SWIRL 的影片](https://www.youtube.com/watch?v=OogRYkfSki8)。然後,加入我們的[Slack 社群](https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw)並聯繫我。讓我們一起建立一個令人驚嘆的開源人工智慧平台。**可能會有一些驚人的獎勵給你。** 💐🎁 https://github.com/swirlai/swirl-search 在 GitHub 上給我們一個 🌟。 --- 原文出處:https://dev.to/srbhr/search-will-be-the-future-of-llm-and-ai-applications-26fl

沒有人長大後想成為 DevOps 工程師

當我看到那些不像我一樣主要在線下成長的年輕一代時,我為他們感到有點遺憾。我已經三十多歲了,所以我知道在成長過程中盡快接入[撥號](https://en.wikipedia.org/wiki/Dial-up_Internet_access)網路(以避免長時間阻塞電話線)存取幾個維基百科頁面來完成我的任務是什麼感覺。什麼。透過親身經歷我們所有人口袋裡的個人電腦的崛起,我覺得自己並沒有免疫,但更有能力利用它來為自己謀利,而不是僅僅因為更加“ [互聯](https://www.newyorker.com/news/the-new-yorker-interview/jonathan-haidt-wants-you-to-take-away-your-kids-phone)”而成為其無限幸福和滿足的虛假承諾的受害者。 ![撥號](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExamF3aXZ0NHZxYmo4NWVqa2FhcWwxM2lhYnYwaHowdmtpZGlhNTNiZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XreQmk7ETCak0/giphy.gif) 另一方面,還有另一場革命,**我沒有直接參與其中**,這場革命是在 2009 年 O'Reilly Velocity 會議上著名的[Flickr](https://www.youtube.com/watch?v=LdOe18KhtT4)演講之後,在 00 年代全世界的 IT 部門中發生的。事件讓`DevOps`聲名大噪,並展示了一個可以從孤立的、發展緩慢的基於[ITIL](https://en.wikipedia.org/wiki/ITIL)的組織轉向更好的組織的未來。 不到 5 年前,我最近從教學轉向了科技。我不知道在任何其他不實踐 Flickr 演講中所傳授的實踐的專業環境中工作會是什麼樣子。敏捷方法論和「DevOps」仍然[難以確定](https://www.reddit.com/r/devops/comments/812527/can_someone_explain_what_devops_is/)的定義是我從未質疑過的現狀。 **但我現在對此表示懷疑**。如果我認為,未來的世代缺乏基本的視角,並且可以從了解沒有智慧型手機的生活是什麼樣子中獲益匪淺。**我必須將同樣的邏輯應用在自己身上,並且齊心協力去理解 DevOps 到底是什麼?它是對什麼的回應?它最初的承諾是什麼?人們如何以及為何最終成為 DevOps 工程師?未來成為 DevOps 工程師意味著什麼?** DevOps 如何開始及其最初的承諾 ------------------ 我有時想知道,在開發人員必須填寫基礎設施配置請求表並等待數天或數週才能得到服務的日子裡,情況一定是什麼樣子。我聽說過那種文化中典型的運營人員的故事,他們總是互相指責,脾氣暴躁,最喜歡說的詞是`“NO“`和`“Where's my pager?“` 。 ![行動者](https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdG03ZXE5d3dqNjgyYXV3NnowaGdoeDc5aTIxM3ZnMGlxdnVhbnVuNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hSKk6hx9OzomRvFRcJ/giphy.gif) John Allspaw 和 Paul Hammond 以及他們著名的速度演講[「每天 10+ 部署:Flickr 上的開發和運維合作」](https://www.youtube.com/watch?v=LdOe18KhtT4)的許多與會者不必懷疑,開發人員和維運團隊之間的常見摩擦一定是對他們來說一切都太生動了。 多年來,我多次觀看了這個演講,有幾件事對我來說很突出。首先,我沒有意識到當時的談話包含瞭**如此多的髒話**,或者也許只是奧爾斯帕先生。另一個是演講者提出的關鍵訊息,即開發和營運團隊實際上共享相同的目標。**為業務賦能。** ![動圖](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExaHB6Z3Myd2tpaDc3eGE3eDZ2OTMwa2ZnazMydDVlNnVkOTczeGF3dSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FspLvJQlQACXu/giphy.gif) 他們繼續討論組織可能希望採用的工具和文化特徵來實現一天的多次生產部署。他們談到了自動化基礎設施、功能標記、共享警報和監控,所有這些都圍繞著新的協作文化結合起來,這種文化重視信任以及對系統故障和避免指責的更健康的態度。 具有巨大影響力的[《DevOps 手冊》](https://itrevolution.com/product/the-devops-handbook-second-edition/)和[《站點可靠性工程》](https://sre.google/sre-book/table-of-contents/)書籍在很大程度上進一步明確了 DevOps 在接下來的幾年中的含義。 ![主要書籍](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb33ik288tctk2v22jf6.png) 前者的開頭章節用幾句話描述了 DevOps 的做事方式渴望解鎖什麼 > *“\[多個團隊共同努力\]實現計劃工作快速進入生產(例如,每天執行數十、數百甚至數千次程式碼部署),同時實現世界一流的穩定性、可用性和安全性。”* 我們兌現了承諾嗎? --------- 當我想到 Flickr 演講中提出的想法時,我的腦海中浮現出一種走在巨人肩膀上的感覺。這些對許多人來說一定是革命性的想法是我所知道的唯一的職業現實。因此,無論是否可以對當前的 DevOps 方法、最佳實踐和工具進行改進,我都對迄今為止所取得的所有進展表示感謝。我問過 2009 年之前配置伺服器或進行駭客攻擊的人,他們都證實**現在的情況比那時好。** 話雖如此,大多數公司是否都在瘋狂地進行運輸,同時實現世界一流的穩定性、可用性和安全性?**很大程度上沒有。** DevOps 世界即使擁有[裝滿現代可用工具的龐大工具箱](https://landscape.cncf.io/),仍然執行該演講中提出的完全相同的框架。 用[亞當雅各](https://twitter.com/adamhjk)的話來說 > 「問題不在於我們沒有對系統的每個單獨部分進行足夠的最佳化。我們在每一步都建立了更有效率的工具。但是整個系統是如何組合在一起的呢?使用體驗如何?這與 2009 年的情況基本相同,這也是我們陷入困境的原因。 **孤島仍然存在,交接容易出錯,而且在許多情況下協作相當強迫和僵化。**任何擔任 DevOps 工程師一段時間的人都會有一長串他們認為自己的組織出錯的事情,並且通常對自己的組織解決問題的能力也同樣缺乏信心。 Adam 是一位經驗豐富的 DevOps 實踐者,他甚至呼籲[第二波 DevOps](https://www.systeminit.com/blog-second-wave-devops) ,它不僅僅是簡單地改進工具,而是邀請我們跳出框框思考,挑戰既定規則,看看另一面會發生什麼。 說到DevOps實踐者,這些人是誰?一個人如何以及為何成為一個人? 人們最初是如何進入 DevOps 的? ------------------- 在短短 15 年裡,科技業取得了長足的發展。 **DevOps 工程師、SRE 和平台工程師**等職位現在在招聘網站上很常見,也是技術招聘人員的熱門專案。然而,在 IT 世界之外,這些術語仍然鮮為人知。儘管發展迅速,DevOps 還不是一個人們渴望加入的職業;相反,許多人只是**“陷入其中”** 。 ![動圖](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHlhdTVzdG9wNmNzOGp6ZDljN3RlenNhMTExMTJ5N3RoY3MyYjIydCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SeTPXfY3RFPkQ/giphy.gif) 在與我表弟交談後,我偶然進入了 DevOps,在我獲得 CCNA 憑證後決定反對嚴格的網路工程路徑後,他建議我選擇 DevOps。我很好奇誰最終會進入 DevOps,以及未來的工程師是否會選擇它作為他們的第一個職業選擇,我詢問了[/devops](https://www.reddit.com/r/devops/comments/1c24rbg/will_people_ever_grow_up_wanting_to_be_a_devops/) Reddit 子版塊,並對各種不同的意見感到驚訝。 **我發現了一些「我剛剛陷入其中」的人:** ![陷入其中](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zaafmdejwi6k9aus874r.png) **其他人則適度看好新一代:** ![樂觀的 DevOps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouj4w92mly7j2jbi20m2.png) ![DevOps 選擇你](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/px309e69lvjygl8vnobz.png) **其他人則不那麼樂觀:** ![我希望不是](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnzjwtczbg9zl8wh9zru.png) ![孩子們的願望](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3z44eoh0yqgsaqyh8mf.png) 儘管 DevOps 的定義仍然存在很大[爭議](https://www.reddit.com/r/devops/comments/vfxmxv/what_exactly_is_devops/),但它似乎不太可能將自己定位為學生在招聘會上聽到或永久加入到大學課程中的職業。這可能是因為我們傾向於想像自己在特定領域表現出色,相信專業化會增加我們成功的機會。 小時候,我夢想著成為一個著名樂團的主音吉他手,擁有神級的粉碎能力。我並沒有夢想能夠相當擅長演奏所有樂器。 **在 DevOps 中,沒有吉他獨奏。**為了脫穎而出,您需要熟悉一長串工具、語言、框架、超大規模器和流程。最優秀的 DevOps 工程師本質上都是通才。這種模組化、樂高式的工作和體驗性質可能會讓 DevOps 在 IT 部門之外不太受歡迎。 通才、修補匠的案例和膠水的概念 --------------- 不可能嘗試對 DevOps 從業者應該具備哪些特徵形成非主觀的描述,但根據我的短暫經驗以及我從與比我更有經驗的人的對話中學到的東西,出現了一些特徵。 ### 通才 您讀過「[如何在 DevOps 領域找到工作](https://www.simplilearn.com/tutorials/devops-tutorial/how-to-become-devops-engineer)」指南嗎?還記得知識要求部分嗎? Linux、Docker、CI/CD、Git、Hypersclaer、網路等。 如果您曾經面試過開發人員或產品設計等職位,您很可能需要在流程的某個階段展示自己的作品集。在 DevOps 面試中這種情況很少見。我想不出有誰定期組裝和更新 DevOps 組合? DevOps 角色的模組化和分散式系統建構性質並不適合在產品組合中進行精心策劃的展示。 作為一個厭倦了教高中英語七年的人,我自然而然地被 DevOps 所吸引,這個領域要求我學習許多工具和概念,並以協作方式將它們拼湊在一起。不深入專注於任何一個概念,而是提高快速學習新事物的技能,這就是我培養的癒傷組織。在這樣的環境中茁壯成長的多面手正好適合。 ### 修補匠 在 DevOps 方面表現出色的人可能會認為自己是[修補匠](https://www.reddit.com/r/devops/comments/1cr1ho6/hot_take_were_all_just_tinkerers/)。 ![修補匠](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odqy1j4yuwc1anaioe69.png) 我喜歡這個想法,它適合我遇到的許多 DevOps 工程師。僅僅為了了解事物的知識而對學習事物如何工作感興趣是我所遇到的 DevOps 導師的一個共同特徵。當然,花週末在家庭實驗室安裝更強大的開關或在 3D 列印機上渲染新的迷你雕像並不能直接展示 DevOps 技能,但這些背景知識比憑證更能表明 DevOps 的潛在成功。 ### 膠水 複雜系統中的許多工作可能會受到關注,因為很難規劃或預測。由於 DevOps 涉及將工具編織在一起來建造平台或交付系統,**因此需要大量的黏合劑**。 流程必須到位並自動化,以跟上技術堆疊中每個工具附帶的技術債務和維護工作。那些能夠自然而然地、常常吃力不討好的充當黏合劑,透過自動化、溝通或改進重複流程連接系統的不同部分的個人,對於組織的成功至關重要。這項技能不是您在履歷中列出的內容,但與修補匠的好奇心和通才的開放性相結合,它是一個強大的組合。 目前狀態:平台與 DevOps --------------- 這些討論中常出現[錯誤的二分法,](https://www.reddit.com/r/devops/comments/17lz167/devops_vs_platform_engineering_i_still_struggle/)通常是出於行銷原因:DevOps 已死,平台才是未來。平台工程師的目標是為開發人員提供對傳統 Ops 相關元件(k8s、IaC 元件、IAM)的自主權,而無需直接交互,使開發人員能夠自助服務並保持獨立。 精心設計的、針對特定環境的平台可以提高開發人員的速度。根據[2023 年 Puppet DevOps 狀況報告](https://www.puppet.com/resources/state-of-platform-engineering),超過三分之二 (68%) 的受訪者認為採用平台工程後開發**速度**提高了。然而,速度不應該是唯一的衡量標準。正如[georgouslyhumble](https://www.reddit.com/r/devops/comments/16ipm9h/comment/k0ly9uq/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)在 Reddit 上指出的那樣,**有時目標是在滿足新的組織要求的同時保持現有的速度**。例如,日誌記錄 sidecar 可以在不改變開發人員速度的情況下標準化日誌收集,從而增強平台以滿足不斷成長的公司要求。 維運工作仍然複雜且動態,熟練的維運人員對於超過一定複雜性閾值至關重要。平台為開發人員提供支持,但請注意,它們不一定會減少孤島或更緊密地整合開發和營運團隊。 團隊在堆疊中新增工具時要謹慎,因為新工具通常會帶來快速累積的維護和維護開銷。像[Glasskube](https://github.com/glasskube/glasskube)這樣可以**減少營運開銷的工具是不可或缺的**。我們需要更多這些工具來為未來建立強大且高效的 DevOps 平台。 未來預測 ---- ![動圖](https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdmQ3b2J1M3A1dWw3MHgwZTQyaWdobDdwM3BnZ3htY3drNWt0bXZicSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZZkCo8zKWtt2ZgozfX/giphy.gif) ### 某種類型的平台將會勝出 **勝出的系統、平台或工作方法不必「教導」使用者如何一起工作和協作。**未來的系統只有在使團隊協作成為最簡單、最直觀、最自然的工作方式,同時抽像出開發人員和維運人員都無法完成的工作的情況下,才能在不影響安全性和穩定性的情況下提供無限軟體交付的難以置信的可能性。 為了創造它,我們必須跳脫框架思考。 ### 第二波 DevOps 可能是一種方式 值得慶幸的是,有許多不安分、不墨守成規的人為 DevOps 領域的方法、流程和工具的不斷改進做出了貢獻。 有人可能會說,重新思考 DevOps 的正式[運動](https://www.systeminit.com/blog-second-wave-devops)已經出現,這非常令人興奮。 ### 通才和修補匠越多越好 最有能力不斷連結拼圖、閉合回饋循環並重新思考糟糕想法的人是那些不怕用深度專業化換取專業通用化的人。那些敢於冒險並通過一路修修補補、測試和提出問題來快速學習的人將使這艘象徵性的船在越來越快地走向卓越工程的過程中保持漂浮。 如何找到足夠的這些人是另一個問題。 結論 -- 看起來我還不太明白為什麼人們長大後不想成為 DevOps 工程師,也許這是一個相對較新的領域,再加上通才通常不被認為是最酷的孩子這一事實的混合體。 展望下一波人才,無論他們是有意識地選擇還是偶然進入 DevOps 角色,有一件事是肯定的:了解該領域的歷史是關鍵。這是未來工程師能夠培養辨識當前狀態與理想未來之間差距的唯一方法。如果忽視這一差距,現狀就會佔上風,我們將注定陷入停滯的平庸。 不可否認,自 DevOps 時代之前以來,技術格局已得到極大改善,但同樣明顯的是, **DevOps 15 年來仍在站穩腳跟。** 經驗豐富的專業人士需要保持敏銳的眼光,辨識並鼓勵周圍的年輕修補匠、通才和“粘合者”,不要擔心追逐某些頭銜,而是幫助重新定義**DevOps 並將其發展為能夠實現2009 年最初願望的東西。** --- 如果您喜歡這類內容並希望看到更多內容,請考慮在 GitHub 上給我們一個 Star 來支持我們🙏 [![連小貓也喜歡送星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h9v5nqc7pfp6u3h1kqd.jpeg)](https://github.com/glasskube/glasskube) --- 原文出處:https://dev.to/glasskube/why-nobody-grows-up-wanting-to-be-a-devops-engineer-2jli

如何在 2024 年找到一份 Web 開發人員工作(不死不休)🧑‍💻💀

嘿,我是文斯... ========= ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az8xf61b2qxx1msfo4t5.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az8xf61b2qxx1msfo4t5.png) 我是一名自學成才的開發人員,在新冠疫情期間改變了職業生涯。透過在空閒時間學習和建構、參加黑客馬拉松以及為開發人員建立教育內容,我能夠從教育轉向 Web 開發。 當我找到第一份開發工作時,儘管我決心成為高級工程師,但我還是從一個薪水非常低的「實習生」職位開始。雖然這並不理想,但它讓我在工作中學習並踏入了大門。 一年後,經過一番努力,我得到了一個更好的職位,薪水是以前的三倍! 🤯 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png) 如今,我目前擔任[Wasp](https://wasp-lang.dev)的創始開發人員關係工程師,負責建置[OpenSaaS.sh](http://opensaas.sh/)等內容,這是一個適用於 React 和 NodeJS 的免費開源 SaaS 入門模板,以及 Stripe、OpenAI 和 AWS S3 整合。它基於我從建立第一個盈利的 SaaS 應用程式[CoverLetterGPT.xyz](http://coverlettergpt.xyz/)中學到的知識,該應用程式目前擁有 100 多個客戶,每月收入約 500 美元!沒什麼瘋狂的,但我仍然感到自豪。 現在,我目前擔任開發人員的角色,社群中的人們經常向我詢問有關找到技術工作的建議。考慮到這一點,並結合我過去的經驗,我想我應該寫一篇綜合文章,分享我所學到的和認為最有效的方法。 享受! 2024 年開發人員目前就業市場 ================ 首先,讓我們快速了解一下目前軟體開發人員的就業市場。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lmohbs24ds94kwxo9dt.png) 如果您花時間在 Reddit 或[X.com](http://X.com) (又名 Twitter)上,那麼您可能會看到人們抱怨當前的開發人員就業市場有多糟糕。 為了嘗試找到一些實際的統計資料來支持這些說法,我使用[Perplexity.ai](http://Perplexity.ai)來幫助我找到一些有關軟體開發人員當前需求的訊息,我對結果感到驚訝。 顯然,對軟體開發人員的需求仍然很高,事實上**,平均需求高於其他工作,並且[預計在未來幾年將增長更多](https://icts.io/2024/02/01/5-predictions-on-software-development-jobs-in-2024)**! 那麼,為什麼現在有些開發商感覺比平常更難找到工作呢? 嗯,那是因為它實際上*更難*,但前提是您是經驗不足的開發人員。 另一方面,如果您是一位經驗豐富的開發人員,擁有豐富的工作經驗,那麼還有更多的空缺職位可供您選擇。但如果您是剛起步的初級開發人員,競爭將比以往更加激烈。 原因如下: 1. **所需技能的複雜性**:軟體開發越來越複雜,需要廣泛的技能,這使得[許多候選人很難滿足工作要求](https://nxtide.com/the-global-shortage-of-software-developers-and-its-serious-implication-in-the-comming-years/)。 2. **遠距工作趨勢**:向遠距工作的轉變擾亂了入門級開發人員管道,[使公司更難找到和培訓新人才。](https://www.revelo.com/blog/software-developer-shortage-us) 3. **經濟因素**:疫情和隨後的經濟變化導致[招聘模式波動,在某些時期出現大量裁員,隨後需求激增](https://icts.io/2024/02/01/5-predictions-on-software-development-jobs-in-2024)。 基本上,儘管對經驗豐富的開發人員的需求很高,但對經驗不足的開發人員的需求相對較低。 因此,由於初級和中級工程師的供應相對較多,都在競爭相同的工作,您如何才能獲得經驗豐富的開發人員的技能並讓自己脫穎而出? 成為問題解決者,而不僅僅是編碼員 ================ 軟體開發職業意味著變化是永恆的。你必須隨時準備好學習新事物並走出你的舒適區,因為, 1. 工作需要它,並且 2. 該行業以極快的速度發展 在這樣的環境中,憑證、課程和學位(在某種程度上)就不那麼重要了,因為它們不能證明你具備適應和解決出現的新問題所需的技能。當然,它們證明您擁有一定數量的基礎知識,但這只是工作所需技能的一小部分。 您希望能夠透過以下方式證明您可以應對以前從未遇到過的挑戰: - 快速了解這個新主題, - 找到合適的方法來解決它,並且 - 快速執行該方法以實現您的目標 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lbjy6ikx8iy9lb3ngx5.png)](https://www.tiktok.com/@techfren/video/7361777687158983943) 但不要只是從我這裡奪走它。 AJ,又名[TikTok 上的 Techfren](https://www.tiktok.com/@techfren/video/7361777687158983943) ,談論如何在後人工智慧世界中駕馭當前的工作環境。他在這裡提出了一些與本文相關的好觀點。例如: 1. 一般的編碼知識甚至不太相關,因為人工智慧擁有非常廣泛的編碼知識。作為一名工程師,你不再有價值,因為你知道如何編碼——人工智慧現在知道如何很好地編碼(並使用比你更多的程式語言)。**你的價值在於批判性思考、解決問題以及為這些問題建立解決方案。** 2. 企業將開始更多地尋找這些通才問題解決者來建立內部應用程式(即內部工具)作為付費服務的替代品,以節省資金並滿足其特定的業務需求,因為人工智慧使開發人員能夠提高工作效率。 因此,很明顯,解決問題的技能需求量很大,並且在未來將繼續變得更加重要。我們可以假設更有經驗、更受歡迎的開發人員擁有這些技能,那麼我們該如何自己建立它們呢? 解決自己的問題 ======= 好的。因此,您認為自己是一位充滿好奇心的開發人員,能夠快速適應和學習新事物,並即時解決問題。 但你要如何向未來的雇主證明這一點呢? 簡單的。只解決自己的問題!在實踐中 - 在 Web 開發領域 - 這意味著「處於舒適區的邊緣」並建立適合您和您的興趣的獨特 Web 應用程式。 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n06z1ktgs70g5c7cv2r7.png)](https://tiktok.com/@cameronblackwoodcode/video/7364455582981524768) 自學成才的工程師和內容創作者卡梅倫·布萊克伍德 (Cameron Blackwood) 在他的[TikTok 影片中完美地描述了這一點,為新開發人員提供如何提高技能的建議](https://tiktok.com/@cameronblackwoodcode/video/7364455582981524768)。他也擁有獨特的視角,因為他之前擔任過技術招募人員,他說: - 建立一個網頁應用程式來解決您日常生活中遇到的問題 - 嘗試與您目前在日常工作中學習/做的事情不同的事情。 - 在空閒時間繼續建構和嘗試新事物。 當然,您製作的這些應用程式不一定是完美的,但它們越獨特,就越能展示出對問題的創造性和良好實現的解決方案,就越好。 如果您在思考要建立的東西時遇到困難,有時只需嘗試新工具即可激發新想法。但無論你決定如何處理它,都取決於你自己,重要的是開始,所以開始吧! --- 順便說一句, [Wasp](https://wasp-lang.dev)是輕鬆建立解決您獨特問題的新應用程式的好方法。這也是在 React 和 NodeJS 中建立客製化全端應用程式的最快方法之一,而無需為身份驗證、路由、端到端類型安全性、部署等編寫一堆樣板程式碼。 作為示例,請觀看此影片,該影片向您展示了在整個應用程式中實施全端身份驗證是多麼容易。 https://www.youtube.com/watch?v=Qiro77q-ulI 做繁重的工作 ====== ![好的](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExa2s1d3J6dmQ2ZHc3b2RsYXQxdnFhOWR5Z3licmhjajdxZ2N3anBsOCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/AYECTMLNS4o67dCoeY/giphy.gif) 當我寫這篇文章時,我很幸運地看到了[Jonathan Stern 的這條推文](https://x.com/jonathanrstern/status/1792220536837230723),他在推文中談到了他在開始第一份開發工作時發現非常有價值的建議。 在那份工作之前,Jonathan 給 Replit 的執行長[Amjad Masad](https://x.com/amasad)寫了一封電子郵件,並在開始他作為軟體開發人員的第一份工作時尋求建議。 阿姆賈德是這麼說的: > 證明自己並讓自己變得不可或缺的兩種方法: > > 1. 具有令人難以置信的生產力和創造力——這在剛開始時很難做到 > > 2. 做無人願意做的無聊工作 > > 2 適合每個人,它只需要努力和紀律,但沒有人做到,所以我建議這樣做。順便說一句,2 通常可以以有趣的方式導致 1。 現在,儘管這是針對已經有工作的開發人員的建議,但我認為這是許多正在尋找工作的經驗不足的開發人員應該聽到的建議。 從更廣泛的意義上來說,阿姆賈德的建議是先降低你的期望並努力工作。做沒有人願意做的無聊工作也可能意味著做你不熱衷的工作,但從長遠來看,這對你有利。 這也可能意味著接受一些不完全是你之前想要的工作,並做繁重的工作,以便成為任何雇主都希望在其團隊中擁有的「不可或缺」的開發人員。 做個好人 ==== 這個建議非常籠統,幾乎適用於任何工作(或任何事物),但成為一個好的共事者可能比大多數求職者想像的更有價值和被忽視。 一旦您滿足了工作要求,您對未來雇主的吸引力很大程度上取決於他們是否可以想像與您在團隊中工作。雖然從表面上看這似乎簡單明了,但實際上實施起來要困難得多。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s990jfmwryfx8gk9xw5.gif) 想一想。 您將在一個具有許多不同個性的團隊中工作。任務可能會變得複雜,截止日期可能會很緊迫,而且工作可能會變得混亂。肯定會犯錯。 *你是那種在壓力下會失去幽默感的人嗎?* *當有人因為你不直接負責的錯誤而責備你時,你會如何反應?* *您是否與您的團隊進行公開且有效的溝通?* *努力工作一年卻沒有加薪,你還會保持謙虛和認真嗎?經過一年的努力工作、大量的讚揚和豐厚的加薪(這可能更難),你還會保持謙虛和認真嗎?* 誠實、開放、真誠是難以獲得的寶貴特質,人們往往可以立即看出你是否是這種人。正是這些類型的人,在與同樣滿足工作要求的其他候選人競爭時,最終獲得了工作機會。 投入更少的精力,送出更少的應徵信 =============== 我和許多其他雇主抱怨的一件事是,求職者在申請中幾乎沒有任何努力。最嚴重的冒犯是應徵信內容明顯是複製貼上的。 ![打字](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExNW0wMm03N3IwaTdlcWdtcHd4MXpsZWV5ZDVkMXBzOGQ5ZWVlNG9vaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13GIgrGdslD9oQ/giphy.webp) 雇主討厭這一點,因為這是你將如何工作的明顯跡象。如果你的工作申請是懶惰地完成的,那麼你的工作很可能會表現得類似(或更糟!)。 這就是為什麼我認為最好將更多的精力投入到更少的工作申請中。 沒有神奇的數字,但每當我申請工作時,總會有 2 或 3 個讓我感到*非常*興奮。所以這些是我唯一申請的,我在這些申請中投入了很多思考和努力。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kvjr8y8gcc4switxoga.png) 除了[為我的專案製作包含描述和學習目標的自己的作品集](https://vincanger.github.io/)之外,我還會建立某種形式的與工作申請相關的額外內容。在某些情況下,這是一個簡單的範例應用程式,或者在其他情況下是解釋影片或文章。 重要的是,這些額外的內容是嘗試解決工作描述中提出的問題或任務,以表明我可以做好這類工作,並且我渴望並願意*做繁重的工作。* 我的假設是,大多數其他申請者在申請時不會花這麼大的力氣,因此我的申請會從人群中脫穎而出,而且效果很好,因為即使我之前沒有很多經驗,我也被要求面試其中的許多職位! --- 順便一提… 我們在[Wasp](https://wasp-lang.dev/)正在努力建立這樣的內容,更不用說建立一個現代的開源 React/NodeJS 框架,讓您能夠快速行動! 如果您想看到更多這樣的內容,您可以[在 GitHub 上給我們一個星星,非常輕鬆地幫助我們!](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) <https://www.github.com/wasp-lang/wasp> ⭐️ GitHub 上的 Star Wasp 🙏 現在得到那份工作...... ============== 軟體開發人員的就業市場正在改變。這是有道理的,因為軟體開發人員的角色也在不斷發展,而現在我們正在進入人工智慧時代,這些角色的發展速度更快。 這意味著,隨著雇主的適應,他們可能會繼續尋找能夠證明他們能夠跟上所有這些發展的開發人員,並利用手邊的工具來解決我們周圍世界面臨的問題。 因此,如果你能夠證明這一點,同時成為一個認真而謙虛的工人,那麼你可能不會很難找到你一直想要的那份甜蜜的技術工作。現在只需將注意力和精力放在正確的事情上,這有時可能很困難,這將使以後找工作的過程變得容易得多。 當然,這些建議是基於我的經驗和主觀觀點,所以如果您有不同意見,請在評論中告訴我們。或者你有自己的秘訣來幫助你找到工作嗎?如果是這樣,我們想聽聽看! 感謝您的閱讀,祝您求職愉快。 --- 原文出處:https://dev.to/wasp/how-to-get-a-web-developer-job-in-2024-without-dying-inside-eo8

ChatGPT - 給開發人員的提示

了解 ChatGPT: ----------- ChatGPT 是一種人工智慧 (AI) 聊天機器人,它使用自然語言處理來建立類人對話。這個語言模型可以回答問題並撰寫各種書面內容,包括文章、社交媒體貼文、論文、程式碼和電子郵件,這使其成為各個層級的程式設計師都興奮的工具。 > OpenAI(一家人工智慧研究公司)建立了ChatGPT,並於2022 年11 月推出了該工具。 什麼是即時工程以及為什麼它很重要? ----------------- 及時的工程設計使用戶可以輕鬆獲得相關結果。它還有助於減輕大型語言模型訓練資料中現有的人類偏見可能存在的偏見。此外,它還增強了用戶與人工智慧的交互,因此即使輸入很少,人工智慧也能理解用戶的意圖。 在製作提示時, - 記住要清晰簡潔。 - 具體:指定程式語言選擇並清楚描述您需要的功能。例如,提示可以是“編寫一個 JavaScript 函數來計算給定數字的總和”,而不是模糊的“編寫一個函數來計算總和”。 - 包括必要的背景和細節,但避免任何含糊或不必要的資訊。 - 定義輸入和輸出:如果您需要的函數或程式碼段需要特定的輸入或輸出格式,請在提示中包含此資訊。 ChatGPT 如何幫助開發者: ---------------- ChatGPT 是一種高階語言模型,可以透過多種方式幫助開發人員完成編碼之旅。讓我們來探討其中的一些。 **1. 編寫程式碼:**使用ChatGPT,您可以根據具體描述產生程式碼。例如,如果您需要 C# 函數來計算 2 個數字中的某些數字。您可以如下所示提示 ChatGPT,它將返回相應的程式碼。 提示範例: ``` "Write a C# function to calculate the sum of the 2 given numbers." ``` **2.重構程式碼:**借助ChatGPT的幫助,您可以重構程式碼,以提高程式碼效率,減少錯誤,並使其更易於將來修改或擴展。 提示範例: ``` I have a piece of code and I need you to refactor it: INSERT YOUR CODE HERE ``` **3. 程式碼審查和偵錯:**您可以使用 ChatGPT 審查程式碼片段並分享潛在的問題或錯誤。 提示範例: ``` "Here's a C# code snippet. The function is supposed to return the maximum value from the given list, but it's not returning the expected output. Can you identify the problem?". INSERT YOUR CODE HERE ``` **4. 新增編碼最佳實務或原則:** ChatGPT 可協助您根據風格指南重寫程式碼。 提示範例: ``` Rewrite the code below following the Google style guidelines for JavaScript. INSERT YOUR CODE HERE ``` **5. 解釋程式碼:** ChatGPT 可以幫助解釋舊的和複雜的程式碼片段的工作原理。要獲得特定程式碼段的解釋,請提供程式碼片段並詢問。 提示範例: ``` "Could you please explain how this C# function works?". INSERT YOUR CODE HERE ``` **6. 最佳化程式碼:** ChatGPT 可以幫助優化程式碼,以增強效能或可讀性,使您的程式碼精簡且有效率。 提示範例: ``` "Here’s a function I wrote in JavaScript that prints first n Fibonacci Numbers. Could you suggest any optimizations for better performance?" INSERT YOUR CODE HERE ``` **7. 建立單元測試:**您可以使用 ChatGPT 透過為您編寫測試案例來自動化單元測試。 提示範例: ``` Please write unit tests for the following code. INSERT YOUR CODE HERE ``` **8. 新增程式碼註釋:**如果您的程式碼不言自明但需要註釋,ChatGPT 可以立即為您完成。 提示範例: ``` Add comments to the following code: INSERT YOUR CODE HERE ``` **9. 建立樣板程式碼:** ChatGPT 可以幫助您產生樣板程式碼。 提示範例: ``` Write a boilerplate JavaScript function that will take a variable of type User, and validate whether the user has the right permissions or not. ``` **10. 建立正規表示式:**正規表示式幫助我們匹配、定位和管理文本,提供了一種快速且相對簡單的方法來操作資料,特別是在大型複雜程式中,ChatGPT 可以幫助我們編寫這些正則表達式。 提示範例: ``` Write a regular expression that matches: REQUEST ``` 這些是 ChatGPT 如何讓開發人員的生活變得輕鬆的一些例子。除此之外,ChatGPT 還可以幫助學習新概念、理解設計模式、程式碼重構、集思廣益、面試準備等等。 ChatGPT 提示編寫程式碼: ---------------- 我收集了 ChatGPT 提示,這些提示可以讓開發人員的生活變得輕鬆,因為他們可以更有效地利用強大的 AI 支援的 ChatGPT。 - [編寫和生成程式碼的提示](https://dev.to/techiesdiary/chatgpt-prompts-for-writing-and-generating-codes-59kf) --- 原文出處:https://dev.to/techiesdiary/chatgpt-prompts-for-developers-216d

2024 年 7 個最適合開發者的圖表庫 🤯

許多應用程式使用圖表或圖形進行資料視覺化,這可以使用庫或底層技術來實現。庫提供時間效率、各種圖表類型和自訂選項。 作為開發人員,了解這些選項至關重要。雖然有些專案可能選擇手動實施,但許多專案都受益於圖表庫的效率。使用這些庫可以節省時間,並可以存取各種圖表類型和樣式選項來滿足您的需求。 在本文中,我們將踏上旅程,了解七個令人驚嘆的圖表庫、它們的功能以及如何使用它們。讓我們來看看! ![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%2Fqk7c7favj05g2qjice9m.gif](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%2Fqk7c7favj05g2qjice9m.gif) --- 1. Latitude for React:將圖表整合到前端應用程式的完美伴侶 --------------------------------------- **網址: <https://docs.latitude.so/react/getting-started/introduction>** ![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%2Fy7z7ks2yp21vj6fah42o.png](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%2Fy7z7ks2yp21vj6fah42o.png) *是的,那就是我們!* Latitude 是用於嵌入式分析的開源框架,可讓您快速將 SQL 查詢公開為 API 端點。他們的產品中包括`@latitude-data/react` ,這是一組原生 React 元件,用於輕鬆繪製來自 Latitude API 的資料。如果您選擇攜帶自己的資料,它還可以用作獨立的圖表庫。 ### Latitude for React 的主要特性 - **多種圖表類型**:提供多種圖表類型顯示。例如長條圖、圓餅圖、面積圖、分散圖、混合圖等。 - **高度可自訂的元件**:元件預先捆綁了一組可用主題,或者您可以選擇輕鬆建立自己的自訂主題。最重要的是,大多數元件都可以使用自訂 html 類別進行擴充。 - **自動執行查詢或提供您自己的資料**:Latitude 為每個圖表元件提供兩個版本。其中一個版本會自動執行您的緯度查詢。另一個版本期望接收資料作為道具,讓使用者負責取得它。 ### 如何使用 Latitude for React 👀 首先,在您的 React 專案中安裝 Latitude 的 React 套件: ``` npm install --save @latitude-data/react ``` 之後,匯入 Latitude 元件所使用的核心樣式: ``` import '@latitude-data/react/dist/index.css'; ``` **帶有緯度後端** 如果您要從 Latitude 後端取得資料,**請**在專案根目錄下使用 LatitudeProvider 包裝您的應用程式: ``` import { LatitudeProvider } from '@latitude-data/react'; function App() { return ( <LatitudeProviderapiConfig={{ host: <YOUR_LATITUDE_API_HOST> }}> {/* Your app content */} </LatitudeProvider>); } ``` 並使用 Latitude 的任何帶有`Query`前綴的圖表元件: ``` import { QueryLineChart } from '@latitude-data/react'; function MyComponent() { return ( <QueryLineChart queryPath='titles' params={{ start_year: 2012, end_year: 2014 }} x='release_year'y={[ { name: 'count_shows' }, { name: 'count_movies' } ]} xTitle='Year' yTitle='Titles'/> ); } ``` 在此範例中,queryPath 對應於 Latitude 後端中定義的查詢的路徑。 **作為獨立的圖表庫** 只需使用獨立元件,例如: ``` import { LineChart } from '@latitude-data/react'; function MyComponent() { const data = [ { release_year: 2010, count_shows: 10, count_movies: 2 } ] return ( <LineChart data={data} x='release_year' y={[ { name: 'count_shows' }, { name: 'count_movies' } ]} /> ); } ``` 請閱讀[文件](https://docs.latitude.so/react/getting-started/introduction),以取得有關如何使用緯度動態顯示資料的更深入指南。 您可以隨時在 GitHub 上為我們的專案做出貢獻,如果您能為我們的專案給我們一顆星,我們將不勝感激! **[🌟 GitHub 上 React 的 Star Latitude](https://github.com/latitude-dev/latitude)** --- 2. D3.js:用於資料視覺化的JavaScript函式庫 ------------------------------ **D3 的網站: [https://d3js.org](https://d3js.org/)** ![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%2F1xhnyf40jvg3v50c2ba8.jpeg](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%2F1xhnyf40jvg3v50c2ba8.jpeg) D3 是一個低階圖表庫,提供無與倫比的客製化和靈活性。代價是學習曲線陡峭,並且與 React 或 Svelte 等常見前端框架的整合更加困難。如果您有一些非常具體的圖表需求,d3.js 可能是您唯一的選擇,但是,如果您希望在應用程式中快速整合一些簡單的圖表,那麼其他地方還有更好的選擇。 ### D3.js 的主要特性 - **自訂和靈活性:** D3.js 提供對 SVG、HTML 和 CSS 的低階存取,允許對視覺元素進行細粒度控制。這使得它具有高度的靈活性和可自訂性。 - **模組化:** D3.js 高度模組化,各種模組可以單獨使用,也可以一起使用。這允許對捆綁包大小和效能最佳化進行更多控制。 - **強大的轉換和動畫:** D3.js 為轉換和動畫提供強大的支持,為資料更新提供流暢而複雜的動畫。 - **社區和生態系統:** D3.js 擁有一個龐大且活躍的社區,提供大量文件、範例和插件。這使得您可以更輕鬆地找到支援和資源。 ### 如何使用 D3.js 👀 在您的專案中安裝 d3 的 npm 套件: ``` npm install d3 ``` 以下是有關如何將圖表新增至 id 為`#chart`的 html 元件的範例程式碼: ``` import * as d3 from 'd3'; // Data for the bar chart const data = [ { name: 'A', value: 30 }, { name: 'B', value: 80 }, { name: 'C', value: 45 }, { name: 'D', value: 60 }, { name: 'E', value: 20 }, { name: 'F', value: 90 }, { name: 'G', value: 55 } ]; // Set the dimensions and margins of the graph const margin = { top: 20, right: 30, bottom: 40, left: 40 }; const width = 500 - margin.left - margin.right; const height = 300 - margin.top - margin.bottom; // Append the svg object to the body of the page const svg = d3.select("#chart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // X axis const x = d3.scaleBand() .range([0, width]) .domain(data.map(d => d.name)) .padding(0.1); svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("class", "axis-label") .attr("transform", "translate(-10,0)rotate(-45)") .style("text-anchor", "end"); // Y axis const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height, 0]); svg.append("g") .call(d3.axisLeft(y)) .selectAll("text") .attr("class", "axis-label"); // Bars svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", d => x(d.name)) .attr("y", d => y(d.value)) .attr("width", x.bandwidth()) .attr("height", d => height - y(d.value)); ``` 正如您所看到的,D3.js 通常比其他替代方案更冗長,但它使您可以最大程度地控制可視化的各個方面。 D3 是免費且開源的。如果您覺得該專案很有趣,請在 GitHub 上給他們一個 Star ⭐️!他們目前的星數超過 108k! **[在 GitHub 上關注 D3.js ⭐️](https://github.com/d3/d3)** --- 3. Chart.js:用於基於 HTML 的圖表的靈活 JavaScript 程式庫 ------------------------------------------- **網址: [https://www.chartjs.org](https://www.chartjs.org/)** ![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%2F0m8eb9o6t93wwf7cvq7x.png](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%2F0m8eb9o6t93wwf7cvq7x.png) 目前是業界最受歡迎的圖表庫之一,也是最容易使用的圖表庫之一。主要因其透過使用 Canvas 進行呈現而聞名,這與某些僅將資料呈現為 SVG 的圖表庫不同。 ### Chart.js 的主要特性 - **效能**:Chart.js 可以接受內部資料結構,從而減少解析和規範化的需要,從而提高效能。您還可以配置資料抽取,以在渲染資料集之前減少資料集的大小,從而加快渲染速度。 canvas的使用壓縮了DOM樹上的開銷;這有助於最大限度地減少捆綁包中 Chart.js 程式碼的大小,從而加快載入時間。 - **可存取性**:與大多數圖表庫相比,Chart.js 具有非常直接的方法,充分了解您所做的一切都在畫布上執行。您不需要複雜的自訂,因為它允許您使用其任何自訂選項來設定樣式、主題等。 - **出色的開發人員體驗**:除了擁有非常出色的社群影響力之外,Chart.js 還擁有簡單明了的文件,當出現新內容時,這些文件會經常更新。它還提供與您最喜歡的 JavaScript 框架的集成,例如 React、Svelte 等。 - **圖表響應能力**:預設情況下,Chart.js 提供響應式圖表。您可以自動將螢幕調整為不同的尺寸,並且它為圖表提供了可調整的尺寸。它確保您在所有裝置上都能獲得良好的資料視覺化效果。 ### 如何使用 Chart.js 👀 Chartjs 可以透過 npm 安裝或在執行時透過 CDN 直接下載: ``` <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script> ``` 如果你覺得這個專案很酷,你可以在GitHub上給它一個Star⭐️!他們目前的星數超過 63k。 **[GitHub 上的 Star Chart.js ⭐️](https://github.com/chartjs/Chart.js)** --- 4. Apache ECharts:用於快速建立圖表的JavaScript視覺化工具 ------------------------------------------ **網址: [https://echarts.apache.org](https://echarts.apache.org/)** ![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%2Fce12dq55x4le8e4ezhvm.png](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%2Fce12dq55x4le8e4ezhvm.png) ECharts 是一個開源資料視覺化函式庫,最近越來越受歡迎。它由流行的[Apache](https://apache.org/)基金會建置,並依賴[ZRender](https://github.com/ecomfe/zrender)來呈現其圖形。與其他相比,它更複雜;它僅呈現動態資料並具有不同的顯示方式。 ![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%2Fnhnpwl5uuhhu7xxdp954.gif](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%2Fnhnpwl5uuhhu7xxdp954.gif) ### ECharts的主要特點 - **廣泛的圖表類型**:ECharts 支援大量的圖表類型,實際上比大多數其他競爭對手更支援更多。其中包括長條圖、折線圖、圓餅圖、散佈圖、地圖、雷達圖、箱線圖、熱圖、平行座標、桑基圖等。這種多功能性允許用戶以多種格式視覺化資料。 - **互動性:** ECharts的突出特點之一是其豐富的互動性。它包括對互動式元素的內建支持,例如工具提示、縮放、平移和資料突出顯示。用戶可以與視覺化進行交互,以更深入地了解資料。 - **效能:** ECharts 專為高效能而設計,能夠有效處理大型資料集。它利用 Canvas 和 WebGL 進行渲染,這比傳統的基於 SVG 的渲染效能更高,適用於複雜的視覺化和大資料量。 ### 如何開始使用 Apache ECharts 👀 使用 npm 安裝 echarts: ``` npm install echarts ``` 以下程式碼片段在 id 為`#chart`的 DOM 元素中建立了一個簡單的長條圖: ``` // Import ECharts import * as echarts from 'echarts'; // Initialize the chart var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option; // Specify the chart configuration option = { title: { text: 'Simple Bar Chart' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F'] }, yAxis: {}, series: [ { name: 'Value', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // Use the specified chart configuration option && myChart.setOption(option); ``` 如果你覺得這個專案很有趣,可以在GitHub上給它一個Star⭐️,目前他們的Star數已經接近60k了! **[GitHub 上的 Star ECharts ⭐️](https://github.com/apache/echarts)** --- 5. Nivo:用於在 React 中建立圖表應用程式的庫 ----------------------------- **網址: [https://nivo.rocks](https://nivo.rocks/)** ![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%2F2k97ihdlfubm0zs5q1rm.png](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%2F2k97ihdlfubm0zs5q1rm.png) Nivo 是一個高階開源 JavaScript 函式庫,用於建立資料視覺化,專門設計用於與 React 搭配使用。它建置在 D3 之上,提供廣泛的圖表類型,並具有內建主題、互動性和響應式設計。以下是一些關鍵功能和方面,使 Nivo 成為 React 應用程式中資料視覺化的熱門選擇: ### Nivo 的主要特點 - **易於使用:** Nivo 的設計比 D3.js 等替代方案更用戶友好且更易於使用。它提供了更高層次的抽象,使得無需深入了解 SVG 或 DOM 操作即可輕鬆建立複雜的圖表。 - **React 整合:** Nivo 專為 React 建置,使其成為在 React 生態系統中工作的開發人員的絕佳選擇。它利用 React 基於元件的架構來輕鬆整合和重複使用。 - **主題和響應性:** Nivo 包含對主題和響應式設計的內建支持,使您可以更輕鬆地建立在不同設備上看起來不錯並與應用程式的設計相匹配的圖表。 ### 如何開始使用 Nivo 👀 如果您是 React 開發人員,開始使用 Nivo 會很容易。安裝 nivo 核心套件以及您選擇的相關圖表特定庫。在本例中,我們正在實作一個長條圖: ``` yarn add @nivo/core @nivo/bar ``` 完成後,匯入相關圖表元件並在您的 React 環境中使用它: ``` import { Bar } from '@nivo/bar'; const MyBarChart = () => { const salesData = [ { "category": "Electronics", "value": 5000 }, { "category": "Clothing", "value": 3000 }, { "category": "Furniture", "value": 2500 } ]; return ( <Bar data={salesData} indexBy="category" maxValue={6000} keyBy="id"/> ); }; export default App; ``` Nivo 是開源的,您可以在 GitHub 上為他們的專案加註星標 - 目前它們的星標數量已超過 12k! **[⭐️ GitHub 上的 Star Nivo](https://github.com/plouc/nivo)** --- 6. Plotly:適用於不同技術堆疊的開源圖表庫 ------------------------- **網址: [https://plotly.com](https://plotly.com/)** ![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%2Fdxm6bnd8u9e4wxxjv3hh.png](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%2Fdxm6bnd8u9e4wxxjv3hh.png) **Plotly**是一個開源資料視覺化函式庫,支援多種圖表類型和互動功能。它可用於多種程式語言,包括 Python、R 和 JavaScript。 Plotly.js 是該函式庫的 JavaScript 版本,建構在 D3 之上,廣泛用於建立基於 Web 的互動式視覺化。 ### Plotly 的主要特點 - **支援不同的程式語言**:Plotly 支援不同的語言,這與許多其他支援一種語言的圖表庫不同。它允許您使用任何您熟悉的語言將資料視覺化為圖表。這是[完整的清單](https://plotly.com/graphing-libraries/)。 - **複雜圖表類型:** Plotly 抽象化了 matplotlib、ggplot2 或 MATLAB 等軟體包中的統計和科學圖表類型。 - **可移植:** Plotly 圖表以 JSON 物件的形式進行聲明性描述。圖表的每個面向(例如顏色、網格線和圖例)都有一組對應的 JSON 屬性。這允許在所有不同的語言實作中使用相同的配置。 - **效能:** Plotly 的圖表主要使用 SVG,但它也可以利用 webGL 來渲染高效能視覺化。 ### 如何開始使用 Plotly 👀 如前所述,Plotly 可以與多種程式語言一起使用,但在本例中我們將專注於 Javascript。 首先,安裝相關的npm套件: ``` npm install plotly.js-dist ``` 然後,在 html 中建立一個空的 div 元素來繪製圖形: ``` <div id="tester" style="width:600px;height:250px;"></div> ``` 最後,編寫以下內容來繪製簡單的折線圖: ``` const TESTER = document.getElementById('tester'); Plotly.newPlot( TESTER, [{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16] }], { margin: { t: 0 } } ); ``` 如果您發現 Plotly 是一個很好的工具,您可以給它一顆星,並為他們在 GitHub 上的專案做出貢獻。 - **[GitHub 上的 Star Plotly Python 專案⭐️](https://github.com/plotly/plotly.py/)** --- 7.勝利:用於圖表和資料可視化的React元件 ----------------------- **網址: [https://commerce.nearform.com/open-source/victory](https://commerce.nearform.com/open-source/victory/)** ![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%2Fy1hhhtiq4cbkwnlzusin.png](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%2Fy1hhhtiq4cbkwnlzusin.png) **Victory**是一個適用於 React 和 React Native 的開源模組化圖表庫。它提供了一個簡單而優雅的 API,用於建立各種資料視覺化。與 Nivo 類似,Victory 利用了 React 的優勢,使其成為已經熟悉 React 生態系統的開發人員的自然選擇。 ### Victory JS 的主要特點 - **React 和 React Native 具有相同的 API** :Victory 專為 React 和 React Native 建置,允許無縫整合到 Web 和行動應用程式中。 - 易於使用:Victory 的聲明式、基於元件的 API 使得向 React 應用程式加入視覺化變得簡單,特別是與 D3 等其他命令式方法相比。 - **互動性**:Victory 提供開箱即用的工具提示、對事件和複雜動畫的支持,以使視覺化感覺更加生動。 ### 如何開始勝利 首先,安裝 npm 套件: ``` npm install victory ``` 然後,根據您的需求匯入您想要使用的相關元件。例如: ``` import React from 'react'; import { VictoryBar } from 'victory'; const data = [ {quarter: 1, earnings: 13000}, {quarter: 2, earnings: 16500}, {quarter: 3, earnings: 14250}, {quarter: 4, earnings: 19000} ] function App() { return ( <VictoryBar data={data} // data accessor for x values x="quarter" // data accessor for y values y="earnings" /> } ``` 如果您覺得 Victory 很酷,您可以繼續在 GitHub 上給該專案一顆星。目前他們的星數超過 10,000 **[GitHub 上的明星勝利 ⭐️](https://github.com/FormidableLabs/victory)** --- 結論 -- 恭喜您已經走到這一步了! 在本文中,我們介紹了今年要探索的 7 個圖表庫。我們已經超越了簡單的概述,而是發現了每個庫的工作原理、其底層架構以及用於建置它的技術。此外,我們還學習如何開始將這些庫合併到您的專案中。 在我們分道揚鑣之前,如果您認為本文有幫助,請考慮在[GitHub](https://github.com/latitude-dev/latitude)上給我們一顆星來表達您的支持。感謝您的閱讀,我期待您參與下一篇文章! 👋 --- 原文出處:https://dev.to/latitude/7-best-chart-libraries-for-developers-in-2024-25he

我建立了一個免費的開源專案管理器,可以幫助團隊將成本控制在每月 15 美元以下。

大家好,這裡是胡迪! 今天,我很高興與大家分享我的開源專案經理。我從頭開始建立此專案的目標是將營運成本保持在每月 15 美元以下。 在決定建造它之前,我嘗試過 Trello、Jira 和 Clickup。它們都是很棒的工具,但成本對我們來說是一個主要障礙。作為一家越南新創公司的 7 - 10 名成員的小團隊,我們根本沒有這些付費平台的預算。 您可能想知道為什麼我們不只使用免費套餐。事情是這樣的:我相信我可以建立一個專案管理器,提供我們所需的指定功能,例如報告、匯出功能、看板、日曆等。 此外,當時我有大量的空閒時間,這使得這是一個承擔這個專案的好機會。 我在 github 上開源了這個應用程式: <https://github.com/hudy9x/namviek>或您可以查看網站[namviek.com](https://namviek.com) 這是給誰的? ------ 這個專案非常適合具有開發技能、在有限的預算下運作一個小團隊的人,就像我一樣。 乍一看可能令人望而生畏,但請參閱下面的成本報告。我能夠將營運成本從每月 49 美元(7 美元 x 7 名會員)大幅降低到每月 10 美元以下。 ![亞馬遜成本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30fjxmx0fmmsuzc22cs7.png) 我是如何保持低成本的? ----------- 我利用各種免費平台來最大限度地降低營運成本。這是一個細分: - Vercel:用於前端(免費) - Aws Lightsail:用於後端(付費) - AWS S3:用於檔案儲存(付費) - Resend:發送電子郵件(免費) - Cloudflare:管理我的網域(免費) - Github Action:CD 自動化(免費) 我的技術堆疊 ------ 為了確保快速建置和部署,我在前端選擇了 Next.js,因為它與 Vercel 無縫整合。對於後端,我目前使用 Node.js,但我計劃在不久的將來將一些功能遷移到 Golang。 包含哪些功能? ------- 如前所述,該應用程式包含一些適合小型團隊的基本功能,例如: ### 清單顯示 一下子就看到了。在一個簡單的清單中確定任務的優先順序並管理您的任務。 ![清單顯示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj75jb3vu9gl3nsppdy0.png) ### 板視圖 可視化您的工作流程。在階段之間移動任務以進行清晰的進度追蹤。 ![板視圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p40vkwmxhmvtsq8bj2y.png) ### 目標視圖 保持目標。一目了然地查看您的進度並慶祝里程碑。 ![目標視圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0uohpxfrshi5xwnhb1t.png) ### 日曆視圖 計劃你的日子。永遠不會錯過日曆上安排的任務的最後期限。 ![日曆視圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsndq9r27qszq3mvwo03.png) ### 自訂視圖 按照你的方式工作。設計完美的視圖以滿足您的特定需求。 ![查看客製化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zk24iwg5dzf43dgvg5t0.png) 如何使用它。 ------ 查看[設定指南](https://www.namviek.com/#download)。如果您在設定過程中遇到任何錯誤,您可以參考[此處的](https://docs.namviek.com/doc/installation)完整指南。 也許您更喜歡逐步影片指南?看看下面這個影片: https://www.youtube.com/embed/3CS0DB4\_2FU 貢獻您的功能或錯誤修復 ----------- 該應用程式仍在開發中,歡迎您為改進它做出貢獻!請隨意提交功能請求和錯誤修復。 想要建議更好的解決方案或程式碼庫重構嗎?只需建立一個拉取請求,我很樂意討論它。 結論 -- 最後,我希望這個開源專案可以幫助您和您的團隊降低營運成本,同時提供透過修復錯誤和建立功能來學習新技能的機會。它將永遠免費使用。 下一個開源應用程式見:D --- 原文出處:https://dev.to/hudy9x/i-built-a-free-open-source-project-manager-that-helps-teams-keep-costs-under-15month-3pmk

身為開發者,我的創業失敗、接案、以及自我成長經驗分享!

2020年,我剛關閉了之前的創業公司,厭倦了在專案公司的兼職工作。我曾經(現在仍然是)數位遊牧者並尋找遠距工作。 當時是新冠疫情之前,遠距工作並不像今天那麼重要。太多的開發人員(主要是自由工作者)尋找工作和一些職位。 我在那裡找不到工作,甚至連面試機會都沒有。憑藉我的技能,我知道我適合任何地方(我作為開發人員已經有 7 年多了。) ![拒絕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hft38itzykdcozohfgs6.png) --- 做我自己的事 ------ 我創辦了另一家名為 Linvo 的新創公司,進展非常順利。我得到了客戶並賺了錢——但最終沒有成功。 那時候我每天都在共享辦公(早上9點到12點)簽失業金來拿政府的錢🙈 我在共享辦公空間的開放空間裡,所以我可以選擇與不同的創辦人進行個人聯繫——不是為了找工作,而是談論幾乎所有的事情。 但隨著談話的繼續,人們了解了我的技能。 ![你了解我](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhaunmgwvor6o0zy7ina.gif) --- 在共享辦公空間閒逛 --------- 我想謙虛一些,但幾乎所有在開放空間工作的新創公司都向我提供了工作機會,完全遠程,幾乎可以以我想要的任何期限工作。就這樣,我開始在[Novu](https://novu.co/)工作了整整兩年。 ![我](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6as772lphqfoo7a9q7j.png) 現在,很明顯,當你與人建立個人聯繫時,找到工作會更容易(這就是新創公司參加活動來銷售他們的產品的原因)。但我想更深入地了解我是如何從 0 到 100 的。 我之前寫過一篇文章,內容是[為開源做出貢獻將使你找到新工作的機會增加 10 倍](https://dev.to/github20k/contributing-to-open-source-will-10x-your-chances-to-land-a-new-job-433f) 我堅持這一點。但還有更多。 生活中的一切都與風險有關 - 您越信任,有人僱用您/使用您的服務/向您購買軟體的機會就越大。 但信任是很難的。 當你編寫程式碼時如何才能獲得信任? --- 我所說的與我所是的 --------- 每當我尋找自由工作者(例如前端開發人員)時,我無法確定是否: - 他們有著極佳的個人契合度 - 他們實際上可以寫出好的程式碼 - 他們可以跳出框框思考。 因為我只能從他們那裡得到一些關於他們自己的話語。 作為一名企業家,我已將我的工作從開發人員轉移到開發人員成長(成長駭客),因為我認為這對企業的發展至關重要。 在 Novu 的第二年,我決定需要建立自己的知識庫,以便人們能夠了解有關我的一切資訊 - 贏得他們的信任並向他們展示我的個性。 因此,我建立了[Gitroom 電子報](https://gitroom.com)和[YouTube 頻道](https://www.youtube.com/@nevo-david),以便人們可以看到我的行銷技能,也建立了我的[Gitroom 開源專案](https://github.com/gitroomhq/gitroom/),以便他們可以看到我的開發技能。 我非常穩定(每天都出現)——目前,時事通訊已連續 46 週(幾乎一年)。 ![條紋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8thomejgye2j11dm1a8q.png) 並分享有價值的資訊—這是至關重要的: - 我不教簡單的程式碼,例如演算法 - 我不教 CSS 和 HTML 我主要注重以資歷為基礎來獲得他們的信任。 今天,我有太多的客戶 - 我拒絕了很多工作,直到我學會瞭如何擴展或獲得一些缺失的技能。 --- 做這個 --- 由於閱讀本文的大多數人都是純粹的開發人員(而不是行銷人員/成長駭客),因此我會提出一些建議。 1. **為開源做出貢獻**——展示你的技能的最佳方式。沒有什麼比對大型程式碼庫的開源貢獻更重要的了,這是人們需要的大部分證據。 2. **擴大你的貢獻**-不是每個人都知道你的貢獻;在所有可能的社交媒體(X、Linkedin、Youtube、Daily.dev)上談論它,讓人們了解您所做的事情。 **專業提示:**標記您貢獻程式碼的公司;他們可能會重新發布您。 3. **想想你的受眾**- 我看到太多的「影響者」專注於初級開發人員,例如(你必須知道的10 個CSS 技巧和10 個HTML 標籤),雖然這會大大增加你的受眾規模,因為有更多的初級開發人員在世界上比前輩。你會建立錯誤的受眾。作為一名大三學生,你將與許多開源創始人一起打上自己的烙印。即使對於開發相關職位來說,這也可能是錯誤的,因為你建立的受眾永遠不會付錢。 ![做這個](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3h1py1um97u0w3l3xlq.png) --- 吉特魯姆 ---- 我將注入一些可以幫助你的自我推銷:) [Gitroom](https://github.com/gitroomhq/gitroom)是一個用於社群媒體排程的開源工具。 向 Gitroom 做出貢獻可以實現我討論的兩點。 1. 為大型程式碼庫做出貢獻 2. 透過安排社交媒體貼文來擴大您的貢獻。 但還有第三個,我想你會喜歡的。 Gitroom 是最大的開源創辦人社群;你實際上會和他們一起出去玩,他們不斷在世界各地尋找遠端員工。 這是獲得內部信任的好方法。 貢獻後,加入我們的 Discord 頻道。 所有開源創始人都在那裡。 ***如果可以的話請給 Gitroom 星標*** --- 糖霜 -- 本文不會為你粉飾它。 如果你想被錄用,你需要表現出色。 這不是一個「欺騙」人們僱用你的快速計劃。 它只是擴大您的知識和技能的工具。 如果您不能為大型程式碼庫做出貢獻,就不要指望被雇用。 這是我在上一篇文章的一段對話: ![程式碼庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hksdy5v7k8qpgbwo0f8x.png) 如果你還不夠好,那就努力提升你的技能。 當涉及到實際工作時,沒有任何魔術。 --- 原文出處:https://dev.to/github20k/i-am-suitable-for-the-job-but-unsure-why-i-cant-get-it-5eg4

20 多個 DOM 專案:您的前端突破!

透過 DOM 專案提升您的前端技能:新手開發人員的遊樂場 ---------------------------- 透過[DOM 專案改變您的學習體驗!](https://github.com/jisan-mia/dom-projects/)深入研究 20 多個使用 HTML、CSS 和 JavaScript 建構的實用專案。非常適合新手和經驗豐富的開發人員,您會發現一些可以挑戰和激勵您的東西。 以下是 DOM 專案的與眾不同之處: - **邊做邊學:** DOM 專案直接深入前端開發的實際面向。您將透過建立實際專案來學習,鞏固對核心概念的理解。 - **漸進式學習:** DOM 專案提供了按難度分類的精選專案。從適合初學者的專案開始,例如“計數器”或“滾動動畫”,並逐漸進展到更高級的專案,例如“高級待辦事項”或“REST 用戶端”。 - **[開源與協作:](https://github.com/jisan-mia/dom-projects/)** DOM 專案的美妙之處在於其開源特性。您不僅可以從現有專案中學習,還可以將您的創作貢獻給該平台,從而培養一個充滿活力的學習者和開發者社群。 - **輕鬆設定:**設定 DOM 專案輕而易舉。不涉及複雜的安裝過程。只需分叉存儲庫,將其克隆到本地計算機,然後在瀏覽器中打開 index.html 文件。您已準備好開始您的程式設計冒險! ### 深入研究專案: [DOM Projects](https://www.jisan.io/dom-projects/)擁有**20 多個專案**,每個專案都針對特定技能和概念精心設計。以下是一些激發您興趣的詳細範例: ### [計數器](https://www.jisan.io/dom-projects/projects/counter/) ![櫃檯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egsodt4dyfekiwp8ln4q.png) **描述**:一個簡單的計數器專案,允許使用者增加和減少螢幕上顯示的數字。它還包括一個用於將計數器重置為零的按鈕。 **學習理念:** - DOM 操作:了解如何使用 JavaScript 存取和修改 HTML 元素。 - 事件處理:了解如何擷取使用者互動(在本例中為點擊)並使用 JavaScript 觸發特定操作。 - 基本 JavaScript 函數:探索如何寫函數來執行遞增、遞減和重置計數器值等任務。 ### [爸爸笑話](https://www.jisan.io/dom-projects/projects/dad-jokes/) ![爸爸笑話](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z09wwb70arrb5ccjhl87.png) **描述**:該專案使用 JavaScript 中的非同步技術從外部 API 獲取隨機爸爸笑話。一旦檢索到,笑話就會顯示在網頁上供您娛樂。 **學習理念:** - 非同步程式設計:了解如何處理需要時間才能完成的操作(例如從 API 取得資料)而不阻塞 JavaScript 中的主執行緒。 - Fetch API:了解如何使用內建瀏覽器功能向 API 發出 HTTP 請求並擷取資料。 - 使用 API:探索如何與外部 API 互動以存取這些服務提供的資料或功能。 ### [表單驗證](https://www.jisan.io/dom-projects/projects/form-validation/) ![表單驗證](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b7mbyvuwxdwkzv2eidr.png) **描述**:此專案示範了使用 JavaScript 進行客戶端表單驗證。它在提交之前驗證表單中的使用者輸入。此外,驗證成功後,它會顯示成功訊息並允許使用者以唯讀格式預覽提交的資料。 **學習理念:** - 表單驗證:了解如何使用 JavaScript 在提交之前驗證表單中的使用者輸入。這有助於確保資料完整性並防止處理無效資料。 - DOM 操作:了解如何根據驗證結果存取和修改表單元素(例如顯示錯誤訊息或停用輸入欄位)。 - 事件處理:使用 JavaScript 擷取表單提交事件並觸發驗證邏輯。 ### [隨機用戶](https://www.jisan.io/dom-projects/projects/random-user/) ![隨機用戶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlfog2j2okpgtx01eyso.png) **描述**:此專案利用 API 產生隨機使用者資訊。它會取得姓名、電子郵件、頭像等資料,並將其顯示在網頁上,模擬隨機使用者設定檔。 **學習理念:** - 非同步程式設計:與專案 2 (DadJokes) 類似,此專案強化了 JavaScript 中的非同步操作。 - Fetch API:繼續練習使用工具向 API 發出 HTTP 請求並檢索資料。 - 使用 API:進一步探索與外部 API 互動以存取特定功能或資料。 ### [摩斯電碼翻譯器](https://www.jisan.io/dom-projects/projects/morse-translator/) ![摩斯電碼翻譯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il6si3v62r76udcis9lq.png) **描述**:此專案允許使用者在摩斯電碼和文字之間進行翻譯。使用者可以鍵入文字並查看對應的摩斯電碼,也可以輸入摩斯電碼並查看翻譯後的文字。 **學習理念**: - 字串操作:了解如何在 JavaScript 中使用字串,包括拆分、連接和字元操作的函數,這對於摩斯電碼翻譯至關重要。 - 條件語句:學習如何在 JavaScript 中使用條件語句(if/else)來實現基於使用者輸入(文字或摩斯電碼)的翻譯邏輯。 ### [基本計算機](https://www.jisan.io/dom-projects/projects/basic-calculator/) ![基本計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riz357iso4aux1an08sx.png) **描述**:該專案使用 JavaScript 建立一個最基本的計算器應用程式。它允許使用者執行基本算術運算,例如加法、減法、乘法和除法。使用者可以輸入數字並使用螢幕上的按鈕選擇所需的操作。計算器顯示計算結果。 **學習理念**: - 事件處理:與先前的專案類似,此專案練習捕捉使用者對計算器按鈕的點擊並觸發操作(更新計算和結果)。 - DOM 操作:示範如何使用 JavaScript 更新計算器介面中顯示的數字和結果。 - JavaScript 中的基本數學運算:探索使用 JavaScript 內建的數學運算子和函數來執行加法、減法、乘法和除法等計算。 ### [普通計算機](https://www.jisan.io/dom-projects/projects/normal-calculator/) ![普通計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpgq9hnt59vlcaz8r0zx.png) **描述**:該專案建立在基本計算器的基礎上,為標準數學計算提供更全面的使用者體驗。它適合熟悉基本計算器功能的使用者。 **學習理念:** - 基於現有專案:示範對基本計算器概念的擴展,以建立更用戶友好且功能豐富的計算器。 - 增強的使用者互動:引入改進使用者與計算器互動的技術,例如處理小數輸入或合併記憶體功能。 ### [科學計算機](https://www.jisan.io/dom-projects/projects/scientific-calculator/) ![科學計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4taeew6vv1ublamhbyod.png) **描述**:此專案透過提供三角函數(正弦、餘弦、正切)、對數和指數等科學函數,將計算器功能提升到一個新的水平。它迎合需要高級數學計算的用戶。 **學習理念:** - 建立複雜的應用程式:示範如何建立具有先進科學功能的更複雜的應用程式。 - JavaScript 中的數學函數:介紹使用 JavaScript 內建的數學函數進行高階計算 ### [簡單的一切應用程式](https://www.jisan.io/dom-projects/projects/js-todo/) ![簡單的一切應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55d842o20i8j528q2maz.png) **描述**:該專案是一個基本的待辦事項清單應用程式。使用者可以新增任務、將其標記為已完成以及從清單中刪除它們。它演示了管理和追蹤任務。 \*\*學習理念: - DOM 操作:此專案強化了使用 JavaScript 動態新增、刪除和修改 HTML 中的清單專案的實務。 - 陣列:它演示了在 JavaScript 中使用陣列儲存和管理任務資料。 - 使用者介面更新:探索如何根據使用者互動更新待辦事項清單的視覺表示(新增、完成、刪除任務)。 ### [個人資料表和卡片](https://www.jisan.io/dom-projects/projects/profile-form/) ![個人資料表和卡片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13yidfqfe156556rky87.png) **描述**:此專案允許使用者使用表單建立動態個人資料卡。用戶可以輸入他們的訊息,提交後,將建立一個新的個人資料卡並顯示在頁面上。它還包括刪除現有個人資料卡的功能。 **學習理念:** - 表單處理:該專案基於表單驗證(專案 3)的概念,重點關注捕獲表單資料並將其用於進一步的操作。 - DOM 建立和操作:它超越了基本的 DOM 操作,根據使用者輸入動態建立新的 HTML 元素(個人資料卡)。 - 事件處理:繼續練習捕獲使用者與表單和刪除按鈕的互動並觸發適當的操作。 ### [PC元件過濾](https://www.jisan.io/dom-projects/projects/pc-component-filter/) ![PC元件過濾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txtgpqu4t0zbi2mcovbo.png) **描述**:該專案允許使用者根據他們的選擇過濾電腦部件。使用者可以從各種選項中進行選擇,例如 CPU 品牌、RAM 大小、顯示卡類型等,顯示的元件清單將動態更新以反映所選的篩選器。 **學習理念:** - DOM 操作:與先前的專案類似,此專案實踐根據使用者選擇動態更新顯示的元件清單。 - 陣列和資料過濾:探索使用陣列來存儲計算機部件資料,並在 JavaScript 中實現過濾邏輯以匹配用戶選擇。 - 使用者介面更新:重點是根據應用的過濾器更新元件列表的視覺表示。 ### [天氣應用程式](https://www.jisan.io/dom-projects/projects/weather-app/) ![天氣應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4tjhdmz5xlpxia218lp.png) **描述**:該專案是一個天氣應用程式,允許用戶透過城市名稱搜尋當前的天氣資訊。它利用外部天氣 API 來獲取資料並在螢幕上顯示溫度、濕度和天氣狀況等詳細資訊。 **學習理念:** - 非同步程式設計:與 DadJokes(專案 2)等專案類似,此專案強化了處理非同步操作以獲取天氣資料的概念。 - Fetch API:繼續練習使用工具向 API 發出 HTTP 請求並檢索天氣資料。 - 使用 API:進一步探索與外部 API 互動以存取天氣資訊。 ### [感言滑塊](https://www.jisan.io/dom-projects/projects/testimonial-slider/) ![感言滑塊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sroguxb8914j1dv65fpw.png) **描述**:此專案建立一個具有滑桿功能的推薦部分。它顯示使用者的引言或推薦,使用者可以使用滑桿控制來瀏覽它們。 **學習理念:** - DOM 操作:示範如何根據滑桿位置操作建議元素的可見性。 - 事件處理:捕捉使用者與滑桿控制項的互動並觸發滑動動畫。 ### [滾動動畫](https://www.jisan.io/dom-projects/projects/animation-on-scroll/) ![滾動動畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o5psut9f3d5cmns3ld3.png) **描述**:此專案包含向下捲動頁面時觸發的動畫。當使用者滾動時,網頁上的不同元素會變成動畫,增加視覺趣味和互動性。 ### 學習理念: - CSS 動畫:探索使用 CSS 動畫來建立根據滾動位置啟動的視覺效果。 - 用於捲動事件的 JavaScript:介紹使用 JavaScript 來偵測滾動事件並相應地觸發動畫。 ### [搜尋字段顯示](https://www.jisan.io/dom-projects/projects/search-field-reveal/) ![搜尋字段顯示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awycht9282x9n35gyy5j.png) **描述**:此專案利用動畫來增強使用者體驗。它會建立一個搜尋字段,在使用者互動(例如,點擊按鈕)時透過動畫顯示自身。 **學習理念:** - CSS 動畫:介紹使用 CSS 動畫為搜尋欄位顯示建立動態視覺效果。 - 事件處理:涵蓋捕獲使用者互動(例如按鈕單擊)並使用 JavaScript 觸發動畫。 ### [問題清單及進展](https://www.jisan.io/dom-projects/projects/question-list-progress/) ![問題清單及進展](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p6unngf1az0084i3tnb.png) **描述**:此專案示範了 JavaScript 中常見的 DOM 操作技術。它具有問題清單和進度指示器,進度指示器會隨著使用者回答問題而更新。 **學習理念:** - DOM 操作:此專案強調根據使用者與問題的互動來操作進度指示器等元素。 - 事件處理:捕捉使用者與問題元素的互動並觸發更新進度指示器等操作。 ### [莫代爾](https://www.jisan.io/dom-projects/projects/modal/) ![莫代爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0b06e0fi84z7wqsjev4.png) **描述**:該專案會建立一個模式窗口,它是一個覆蓋頁面主要內容的彈出元素。它通常用於登入表單、註冊提示或警報訊息等內容。 **學習理念:** - DOM 操作:重點是根據使用者互動顯示和隱藏模式視窗元素。 - 事件處理:捕捉觸發元素和模式的關閉按鈕上的點擊以控制其可見性。 ### [高級待辦事項](https://www.jisan.io/dom-projects/projects/advanced-todo/) ![高級待辦事項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8baq9a3n6qdwlookd338.png) **描述**:該專案基於簡單的待辦事項應用程式(專案 8)建置,提供過濾、編輯和刪除任務等高級功能。使用者可以對任務進行分類、編輯現有任務以及從清單中刪除不需要的任務。 **學習理念:** - 基於現有專案:與科學計算器(專案 7)類似,該專案演示了對基本概念(待辦事項清單)的擴展以建立更高級的應用程式。 - 使用者介面更新:擴展了更新待辦事項清單的概念,包括過濾、編輯任務內容和刪除任務等功能。 ### [復古計算器](https://www.jisan.io/dom-projects/projects/retro-calculator/) ![復古計算器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thdpc8rzcppjfhlw8aru.png) **描述**:該專案實現了經典的計算器設計,並支援實體鍵盤輸入。它允許用戶使用類似於傳統計算器的佈局輸入數字並執行計算。 **學習理念:** - 事件處理:與其他專案類似,該專案側重於捕獲用戶交互,但在本例中,它包括處理計算器按鈕上的點擊和鍵盤上的按鍵。 - DOM 操作:根據使用者輸入和計算結果更新計算器顯示。 - 物件導向程式設計:此專案引入了 JavaScript 中物件導向程式設計 (OOP) 的概念,用於建立更模組化且可重複使用的計算器功能。 ### [簡單的測驗應用程式](https://www.jisan.io/dom-projects/projects/simple-quiz-app/) ![簡單的測驗應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khvz1xnzfvusxb8hvwrh.png) **描述**:該專案建立一個簡單的測驗應用程式,用戶可以在其中回答問題並查看結果。它包括每個問題的計時器,以加入時間壓力元素。 **學習理念:** - DOM 操作:更新測驗介面以顯示問題、處理答案選擇並顯示最終結果 ### [進階測驗應用程式](https://www.jisan.io/dom-projects/projects/advanced-quiz-app/) ![進階測驗應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98kzkz9jyfl6vjkau9z1.png) **描述**:該專案建立在簡單的測驗應用程式的基礎上,提供更多自訂選項。使用者可以在開始測驗之前設定問題數量、選擇主題並定義難度等級。 **學習理念:** - 基於現有專案:與其他專案(科學計算器、高級待辦事項清單)類似,該專案演示了透過附加功能擴展基本概念。 - 使用者輸入驗證:它引入了驗證自訂選項的使用者輸入的概念(例如,確保選擇有效數量的問題)。 - 條件語句:在此專案中發揮更重要的作用,因為 JavaScript 邏輯需要根據使用者定義的參數來調整測驗。 ### 採取下一步: 準備好開始您的前端開發之旅了嗎?以下是如何開始使用 DOM 專案: 1. 造訪 GitHub 上的 DOM 專案儲存庫: <https://github.com/Jisan-mia/dom-projects> 2. 瀏覽專案清單並選擇一個符合您的技能水平和興趣的專案。 3. 請按照設定[說明](https://github.com/Jisan-mia/dom-projects?tab=readme-ov-file#how-to-set-up-dom-projects-for-development)進行操作並在瀏覽器中開啟專案。 4. 深入研究程式碼、實驗並學習! DOM 專案中的每個專案都可以讓您練習編碼技能,並幫助您理解前端開發中的關鍵概念。無論您是剛起步的初學者,還是希望提高技能的經驗豐富的開發人員,DOM 專案都能滿足每個人的需求。 請記住,最好的學習方法是實踐。所以,捲起袖子,選擇一個專案,然後開始編碼吧!快樂學習! --- 原文出處:https://dev.to/jisan/20-dom-projects-your-frontend-breakthrough-1h8a

50 個最佳免費 HTML 範本網站

您可以在其中找到和下載使用普通 CSS 以及每個主要框架建立的免費 HTML 模板。這些高品質的專案將為您的網站、登陸頁面、部落格、作品集、電子商務和儀表板專案提供支援。 在線空間中有許多模板建立者。以下是使下面提到的那些脫穎而出的原因。 - 模板免費提供給個人和商業用途 - 專案看起來很現代,並提供強制性的即時預覽 - 您只需提供電子郵件地址或註冊即可下載 本文分為兩部分。第一個展示了網站和登陸頁面模板提供者。第二部分重點介紹儀表板和 UI 套件建立者。 HTML 修訂版 -------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08tufzx4fdyi5drm42i8.jpg)](https://htmlrev.com/) [HTMLrev](https://htmlrev.com/)展示免費的 HTML vanilla CSS、Bootstrap、Tailwind、Bulma、Angular、React、Vue、Nextjs、Nuxt、Svelte、Astro、Laravel、Django、Gatsby、Hugo、Jekyll 和 BCMS 模板。可以肯定地說,它是面向 Web 開發人員的最大的免費 HTML 模板庫。您會發現來自世界各地頂級製造商的最佳商品。 **特徵** - 為 Web 開發人員提供的最大的免費範本庫 - 展示頂級創客的最佳作品 - 不斷更新 --- HTML5 升級 -------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k82m0f3tk6f6tduc3vfk.jpg)](https://html5up.net/) [HTML5 UP](https://html5up.net/)提供免費的 HTML vanilla CSS 模板。可能是同一製造商建立的最大的精心設計的 HTML 模板集合。這意味著所有專案的程式碼品質和設計風格都是一致的。讓設計脫穎而出的是影像背景、漸層疊加、彩色部分和流暢佈局之間的組合。 **特徵** - 由設計驅動的開發人員提供的大量收藏 - 獨特的風格和大量的性格 - 無需註冊即可輕鬆下載 --- 風格吶喊 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttal7mqy1owbufmdr54j.jpg)](https://styleshout.com/) [StyleShout](https://styleshout.com/)提供免費的 HTML 普通 CSS 範本。這些物品美麗、多樣、精美,無需電子郵件或註冊即可下載。所有模板的風格都遵循相同的線條,但絕不感覺重複或無聊。正確的字詞是一致且原創的。主題涵蓋 SaaS、行動應用程式、部落格、即將推出、投資組合和代理商。 **特徵** - 美麗優雅的模板 - 廣泛的用例 - 無需註冊即可輕鬆下載 --- 一頁的愛 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgdw49kyxcr48nsi4p68.jpg)](https://onepagelove.com/) [One Page Love](https://onepagelove.com/)提供免費+付費的 HTML vanilla CSS 範本。除了他們自己的專案之外,OPL 還具有許多來自其他製造商的針對不同技術的模板 Bootstrap、Nextjs、Tailwind、Carrd、Framer。該演示網站看起來像一個藝術畫廊,使用起來很愉快。您在用例方面的選擇太多了。 **特徵** - 精心製作、專業打磨的模板 - 無需註冊即可輕鬆下載 --- 克魯普 --- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxxvy0xwzzp4znvlv749.jpg)](https://cruip.com/free-templates/) [Cruip](https://cruip.com/free-templates/)提供免費 + 付費的 Tailwind、React、Vue、Nextjs 和 Laravel 範本。它們的獨特之處在於設計的獨創性和對細節的關注。他們提高了標準,我在瀏覽其他商品時經常發現自己在想「這看起來像克魯普風格」。這就是它們的獨特之處。 **特徵** - 獨特而有個性的設計 - 無需註冊即可輕鬆下載 --- 範本 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc4kepier5gix9yznevt.jpg)](https://templatemo.com/) [Templatemo](https://templatemo.com/)提供免費的 Bootstrap 模板。商品數量之多令人驚嘆,而且品質也很棒。在列出的專案中很難不為您的專案找到堅實的基礎。除了看起來不錯之外,模板還以行銷為導向。 **特徵** - 豐富的海量模板集合 - 無需註冊即可輕鬆下載 --- 創意提姆 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2750dlh3rzf6y20v7clk.jpg)](https://www.creative-tim.com) [Creative Tim](https://www.creative-tim.com)提供免費+付費的 Bootstrap、Tailwind、Angular、React、Vue、Nextjs、Nuxt、Svelte、Laravel、Django 和 Astro 專案。絕對是模板和 UI 套件的強大工具。它受到開發人員的喜愛,因為免費專案與高級專案相當。設計精良、打磨光滑、文件齊全。 **特徵** - 設計精美且一致 - 具有進階功能的元件 - 文件自成一體 --- 泰梅斯貝格 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmhosp1knzec5aql5n4y.jpg)](https://themesberg.com/) [Themesberg](https://themesberg.com/)提供免費+付費的 Bootstrap、Tailwind、React、Laravel、Django 和 Astro 模板。這些資源包括儀表板、登陸頁面、設計系統和 UI 套件。設計品質和精緻程度處於行業領先水平。除了看起來令人驚嘆之外,這些專案的結構和文件都很好。 **特徵** - 很棒的儀表板模板和 UI 套件 - 用於複雜功能的高階元件 --- 模板甲板 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2obnfisjfwrfz42fmqt.jpg)](https://templatedeck.com/) [TemplateDeck](https://templatedeck.com/)提供免費的 Bootstrap 模板。這是一個很棒的資源,提供少量但高品質的物品。描述它們的正確詞彙是極簡主義、創造性和令人印象深刻。公司、個人和創業網站模板均按照最高設計和程式碼標準精心製作。 **特徵** - 示範網站很漂亮且易於瀏覽 - 模板皆經過專業設計與編碼 --- 嘲笑使用者介面 ------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1h7s8vfp33yquuw49k2.jpg)](https://floatui.com/) [Float UI](https://floatui.com/)提供免費的 Nextjs 範本。它實際上是一個 Tailwind 元件庫,還提供完整的網站模板。用例多種多樣,佈局看起來非常好。它們製作精良,甚至具有微妙的滾動動畫。 **特徵** - SaaS、新創公司、數位產品、課程模板 - 精心設計,具有令人印象深刻的黑暗主題 - 無需註冊即可輕鬆下載 --- 麥可·安德烈扎 ------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ezbwmkeodvaglh4dx7h.jpg)](https://www.michaelandreuzza.com/resources/) [Michael Andreuzza](https://www.michaelandreuzza.com/resources/)提供免費的 Astro 範本。他是一位極具創意的模板製作者,在他的[列剋星敦主題](https://lexingtonthemes.com/)網站上提供了一系列令人印象深刻的優質專案。他個人網站上列出的免費 Astro 模板因其簡約而時尚的設計而脫穎而出。 **特徵** - 獨特且令人難忘的設計 - 大量的部分和元素 --- 剛剛好的使用者介面 --------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyif9plag7l51csjxc3c.jpg)](https://justgoodui.com/) [Just Good UI](https://justgoodui.com/)提供免費 + 付費的 Astro 模板。這是一個有前途的模板建立者,提出了新的願景和設計。網站上提供的免費專案是為部落格和作品集製作的。很高興看到軟體包包含多個頁面和額外元素來盡可能地支援開發人員。 **特徵** - 美麗的簡約設計 - 多個頁面和部分 --- 創業登陸 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvrn4qbh1z1natjqg07r.jpg)](https://startuplanding.redq.io/) [Startup Landing](https://startuplanding.redq.io/)提供免費的 Nextjs 和 Gatsby 模板。它可能是您能找到的最好的完全免費登陸頁面集合。在撰寫本文時,有 18 個可用。設計現代且引人注目。它們混合了圖像背景和精美的彩色插圖。 **特徵** - 設計適用於創意和商業專案 - 廣泛的用例可供選擇 --- Web3模板 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpz7x6tln49s3jm2ewrt.jpg)](https://web3templates.com/) [Web3Templates](https://web3templates.com/)提供免費 + 付費的 Tailwind、Astro 和 Nextjs 範本。建立者對細節投入了大量精力,為網頁開發人員建立真正有用的資源。設計美觀、富有創意,並且針對轉換進行了最佳化。為您的專案奠定堅實的現成基礎。 **特徵** - 基於插圖的精美創意設計 - 程式碼結構良好,易於定制 --- 蘭化 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1on9qnjq84pi8bi2uvl.jpg)](https://www.landify.design) [Landify](https://www.landify.design)提供免費 + 付費的 Gatsby 模板。他們是漂亮的 UI 套件、元件和模板的後起之秀的創造者。他們的免費套裝是為成功的登陸頁面精心製作的。這些設計對於每個用例來說都是現代且一致的。 **特徵** - 令人驚嘆的美麗模板 - 為您的專案奠定良好的基礎 --- Nextjs 模板 --------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y3kucjtz6k6elb2qzq9.jpg)](https://nextjstemplates.com/) [Nextjs Templates](https://nextjstemplates.com/)提供免費+付費的 Nextjs 範本。這是一個模板庫,展示了他們自己的和其他製造商的專案。他們自己的免費 Nextjs 範本是綜合包,包含多個頁面、部分和元件,適用於各種用例。設計簡潔、現代且一致。 **特徵** - SaaS、新創公司、商業、軟體、部落格用例 - 令人印象深刻的設計提供多個頁面 - 無需註冊即可輕鬆下載 --- 佈局流程 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sudi6m8q7bnbukyyou8q.jpg)](https://layoutflow.com/) [LayoutFlow](https://layoutflow.com/)提供免費+付費的 HTML vanilla CSS 範本。它們經過專業設計,將為您節省大量創意精力。讓它們脫穎而出的是對負空間和大於平均字體大小的明智使用。代理商、投資組合和服務網站的絕佳資源。 **特徵** - 來自優質製造商的精美模板 - 尖銳的邊緣設計和大膽的排版 --- 模板基礎 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48vqy3i8juxhzcp3y6s3.jpg)](https://www.templatefoundation.com/) [Template Foundation](https://www.templatefoundation.com/)提供免費的 HTML vanilla CSS 範本。物品在佈局、顏色和排版方面都非常現代。他們更關注令人回味的圖像而不是向量插圖。如果您選擇這些範本之一作為您的專案的基礎,您就不會出錯。 **特徵** - 現代時尚的設計引人注目 - 面向作品集和個人網站 - 無需註冊即可輕鬆下載 --- 模板化 --- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6iv9mgzuiq4ppbyy79p.jpg)](https://templated.co/) [Templated](https://templated.co/)提供免費的 HTML vanilla CSS 和 Bootstrap 模板。設計精良、一致且永恆。我認為即使再過幾年它們也不會顯得過時。有很多可用的用例。從企業和新創公司到部落格和投資組合。 **特徵** - 學科範圍廣泛 - 美觀永恆的設計 - 無需註冊即可輕鬆下載 --- 免費贈品bug ------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r5lbexk8rad43ikp84o.jpg)](https://freebiesbug.com/) [Freebiesbug](https://freebiesbug.com/)提供免費的 HTML vanilla CSS Bootstrap、Tailwind 和 React 模板。高品質的設計注重細節。除了 Cruip 團隊自己的作品外,他們還展示了其他頂級製造商製作的現成包裝。 **特徵** - 精美的營銷優化佈局 - 自己的專案,還有範本庫 - 無需註冊即可輕鬆下載 --- 啟動引導程式 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra8bxapn981gmumstqdx.jpg)](https://startbootstrap.com/) [Start Bootstrap](https://startbootstrap.com/)提供免費+付費的Bootstrap模板。它是新創公司、代理商、投資組合、個人和部落格的優質專案的既定來源。它甚至提供功能豐富的管理儀表板模板。它們的建置標準非常高,人們甚至可以向它們學習 Web 開發。 **特徵** - 令人難以置信的精心建置和多樣化的模板 - 設計遵循形式遵循功能原則 - 無需註冊即可輕鬆下載 --- 怪物一號 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/676v0czfivfinfvbobux.jpg)](https://monsterone.com/html-templates/free-website-templates/) [MonsterOne](https://monsterone.com/html-templates/free-website-templates/)提供免費+付費的 HTML vanilla CSS 和 Bootstrap 模板。它實際上是 Template Monster 的基於訂閱的模板庫。如果您註冊免費帳戶,您無需支付訂閱費用即可存取免費物品。它們的品質很高,但您需要手動檢查哪些是普通 CSS,哪些是 Bootstrap。 **特徵** - 具有多個頁面的現代模板 - 由於製造商眾多,品質參差不齊 --- 範本叢林 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mvfietep6jonyv9bidn.jpg)](https://templatesjungle.com/) [TemplatesJungle](https://templatesjungle.com/)提供免費+付費的 HTML vanilla CSS 和 Bootstrap 模板。設計很棒,以行銷為導向,涵蓋多種用例。商業、代理商、服務、投資組合、電子商務。您會找到適合您能想像到的幾乎任何主題的模板。 **特徵** - 大量精心設計的模板可供選擇 - 設計令人印象深刻,讓您的專案脫穎而出 --- 第三波媒體 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le1r0xzgu167v6ggdq9q.jpg)](https://themes.3rdwavemedia.com/freebies/) [3rd Wave Media](https://themes.3rdwavemedia.com/freebies/)提供免費+付費的 Bootstrap 模板。它們是清單中對開發人員最友善的資源之一。它是由開發者為開發者製作的,體現在設計效率和程式碼結構上。模板結構良好且以結果為導向。您會找到適合各種主題的專案。 **特徵** - 有大量用例可供選擇 - 無需註冊即可輕鬆下載 --- 車頂板 --- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz09nou89dnn3cutgzbf.jpg)](https://www.tooplate.com/) [Tooplate](https://www.tooplate.com/)提供免費的 Bootstrap 模板。它是一個巨大的精心設計的 Bootstrap 模板庫。設計現代且精美。每個模板都經過精心設計,可在所有裝置上呈現良好效果。廣告有時可能會造成乾擾,但好的一面是下載不受限制且不需要註冊。 **特徵** - 各種 Bootstrap 模板的大集合 - 高級產品專用的高級元件 - 無需註冊即可輕鬆下載 --- 像素火箭 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ubqga6p7ox5innn3532.jpg)](https://pixelrocket.store/free-templates) [Pixel Rocket](https://pixelrocket.store/free-templates)提供免費的 Bootstrap 和 Tailwind 範本。這個小系列的現代配色看起來令人驚嘆。每個專案都包含許多基本和高級部分和元件。涵蓋的用例包括電子商務、儀表板、作品集和商業網站。 **特徵** - 高品質模板小集合 - 無需註冊即可輕鬆下載 --- HTML 法典 ------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axduylz8rghwm6umiztd.jpg)](https://htmlcodex.com/) [HTML Codex](https://htmlcodex.com/)提供免費+付費的 Bootstrap 模板。這些專案看起來不錯,並且可以不受任何限制地下載。多個用例之間存在巨大差異。業務、課程、產品、代理商、服務、作品集、履歷等等。適合每個人的東西。 **特徵** - 針對各種用例的以結果為導向的設計 - 基於微妙滾動的動畫,帶來更好的使用者體驗 - 無需註冊即可輕鬆下載 --- W3佈局 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x85jgxjgly0zj8nn53gm.jpg)](https://w3layouts.com/) [W3Layouts](https://w3layouts.com/)提供免費+付費的 Bootstrap 模板。基本上他們網站上的所有模板都是免費提供的,但為了刪除歸屬連結,您必須支付少量費用。要免費取得它們,只需檢查試玩版下方的「免費下載」按鈕即可。有點難發現。 **特徵** - 大量的商業風格模板 - 涵蓋廣泛的用例 --- 引導帶 --- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5f28ecptq06wr0ihvc7.jpg)](https://bootstrapious.com/) [Bootstrapious](https://bootstrapious.com/)提供免費+付費的 Bootstrap 模板。 Web 開發人員可以從各種現成的程式碼和設計套件中進行選擇。設計看起來不錯,有些免費物品包含高級元件。唯一的小缺點是您需要提供電子郵件地址才能下載專案。 **特徵** - 各種主題的大量免費物品 - 有些設計特別好 --- 溫樹 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysunwzk28eg703cwxki8.jpg)](https://untree.co/) [Untree](https://untree.co/)提供免費的 Bootstrap 模板。它們幫助開發人員節省時間和金錢。物品設計精美,非常注重細節。模板具有許多特色,並帶有多個頁面和高級元件。下拉導覽、滑桿和微妙的動畫等功能將使您的工作更加輕鬆。 **特徵** - 設計有個性,不重複 - 無需註冊即可輕鬆下載 --- 順風工具箱 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1gnbs90ot43hn96ekkk.jpg)](https://www.tailwindtoolbox.com/) [Tailwind Toolbox](https://www.tailwindtoolbox.com/)提供免費 + 付費的 Tailwind 範本。專案是他們自己的,並由其他頂級模板製作者展示。設計結構良好,涵蓋最受歡迎的用例,如新創公司、SaaS、行動應用程式、部落格和管理儀表板。 **特徵** - 漂亮的專案,結構良好,程式碼乾淨 - 專案涵蓋廣泛的用例 - 無需註冊即可輕鬆下載 --- 像素洞穴 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qg3tmq1f2xbbihol89c.jpg)](https://pixelcave.com/) [Pixelcave](https://pixelcave.com/)提供免費 + 付費的 Tailwind 模板。軟體包專用於建立網站和管理介面。免費的網站和儀表板模板具有現代的配色方案和以結果為導向的佈局。由於它們是由同一作者製作的,所以一致性很普遍。 **特徵** - 獨特的設計可幫助您的專案脫穎而出 - 乾淨的展示網站,沒有廣告 - 無需註冊即可輕鬆下載 --- 主題漁夫 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl89v5po9st2ad83io98.jpg)](https://themefisher.com/) [Themefisher](https://themefisher.com/)提供免費 + 付費的 Nextjs 和 Astro 模板。它基本上是一個模板市場,為 Web 開發人員提供基於各種框架類別建構的套件。專案經過創意設計,並為商業、SaaS 和部落格網站提供多個頁面。 **特徵** - 精心設計的多頁面模板 - 易於瀏覽的示範網站 --- 尾火 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dduazx5klc5wibm5fkt.jpg)](https://tailspark.co/) [Tailspark](https://tailspark.co/)提供免費 + 付費的 Tailwind 模板。即使它們的專案編號不足,它們也可以透過提供的元件來彌補。這些模板是該系列中最複雜、功能最豐富的資源之一。您將獲得許多採用華麗設計的元件、部分和頁面。 **特徵** - SaaS 網站和登陸頁面的最佳選擇 - 幾個巨大的、功能豐富的模板 --- 紅色像素主題 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg2xmdb5jhouypat66ul.jpg)](https://redpixelthemes.com/) [紅色像素主題](https://redpixelthemes.com/)提供免費+付費的Tailwind模板。開發者專注於簡化 Web 開發工作。設計很棒,佈局包含大量有用的元件。基本上有 2 個模板,一個用於作品集,另一個用於部落格。為您的專案提供良好的起點。 **特徵** - 幾個好看的免費模板 - 部落格和作品集用例 --- 阿里·布丁 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zmmt2ppmz1qoje0r35b.jpg)](https://aribudin.gumroad.com/) [Ari Budin](https://aribudin.gumroad.com/)提供免費 + 付費的 Tailwind 模板。免費物品集合雖小但很有用。設計獨特,將幫助您的專案脫穎而出。主題涵蓋代理商、作品集、雜誌和設計系統。作品集模板具有豐富的特色,一定會帶給您啟發。 **特徵** - 精選免費優質物品 - 投資組合和代理模板脫穎而出 --- 特雷克特 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dzak35uivlm48ps8nol.jpg)](https://treact.owaiskhan.me/) [Treact](https://treact.owaiskhan.me/)提供免費的 React 模板。它擁有令人印象深刻的網站和登陸頁面模板集合。這個圖書館雖小但內容豐富,為新創公司、SaaS 和服務提供設計精美的現成物品。配色方案使用了許多現代技術佈局特有的藍色調。 **特徵** - 帶有額外頁面的登陸頁面模板 - 易於自訂的元件塊 --- 程式碼設計 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgm9wwgaxrvgeiz11a2p.jpg)](https://designtocodes.com/) [DesignToCodes](https://designtocodes.com/)提供免費+付費的 Bootstrap 和 Tailwind 範本。涵蓋的用例包括新創公司、代理商和投資組合網站。您也可以找到結構良好的管理儀表板範本。設計經過精心設計和建置,並牢記行銷目標。 **特徵** - 很棒的網站和儀表板模板 - 針對行銷結果優化佈局 --- 使用者介面庫 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2i1gk5ui7b3o1f02yf3y.jpg)](https://ui-lib.com/) [UI Lib](https://ui-lib.com/)提供免費 + 付費的 Bootstrap、Tailwind、Angular、React 和 Vue 模板。它涵蓋了從即將推出的專案和登陸頁面到管理儀表板和 UI 工具包的整個範圍。專案設計精良,易於自訂,包裝中附有用的文件。 **特徵** - 模板涵蓋多種用例 - 有些帶有有用的高級元件 --- 管理市場 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2yhvhu68eoj080wwivc.jpg)](https://adminmart.com/) [AdminMart](https://adminmart.com/)提供免費+付費的 Bootstrap、Tailwind、Angular、React、Vue、Nextjs 和 Nuxt 模板。使用案例涵蓋 SaaS 登陸頁面、教育、課程、代理商、服務網站和管理儀表板。物品經過專業設計,並配有許多部分和元件。 **特徵** - 多個框架的多個用例 - 物品可用於商業專案 --- 包裹像素 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kwvjgp027tiqije3fiu.jpg)](https://www.wrappixel.com/) [WrapPixel](https://www.wrappixel.com/)提供免費 + 付費的 Bootstrap、Tailwind、Angular、React、Vue、Nextjs 和 Nuxt 模板。它們的與眾不同之處在於對儀表板和 UI 套件的一貫關注。在設計和結構方面有很多選擇。您可以選擇經典佈局或更富有創意的佈局。 **特徵** - 儀表板模板和 UI 套件的可靠集合 - 不同的設計和配色可供選擇 --- 桌子 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjlhiy7n7tyoxp2gjjqv.jpg)](https://tabler.io/) [Tabler](https://tabler.io/)提供免費的 Bootstrap 模板。專注於儀表板,因為 Tabler 本身是專門用於建立 Web 應用程式的管理儀表板 UI 套件。如此大而精美的軟體包竟然可以免費取得,真是令人難以置信。設計很棒,文件很全面,程式碼結構很好。這個資源是寶石。 **特徵** - 專注於儀表板的引導模板 - 頂級的設計和程式碼品質 - 許多優質的先進元件 --- 敏銳的主題 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1hauyits355t5dw5ied.jpg)](https://keenthemes.com/) [KeenThemes](https://keenthemes.com/)提供免費 + 付費的 Bootstrap、React 和 Vue 模板。該建立者專門研究儀表板模板。每個包都配有多個採用現代設計的節省時間的元件。有不同的風格可供選擇,適應多種可能的場景。 **特徵** - 在網頁應用程式管理儀表板上佔有一席之地 - 乾淨的網站,沒有廣告或其他煩惱 --- BootstrapDash ------------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl1ymof4pdxzmangcy4v.jpg)](https://www.bootstrapdash.com/) [BootstrapDash](https://www.bootstrapdash.com/)提供免費+付費的 Bootstrap 模板。有用的集合集中在管理儀表板上。軟體包包含的頁面和元件非常豐富。設計始終保持現代感,並針對效果進行了最佳化。網站沒有廣告,瀏覽起來很愉快。 **特徵** - 很棒的儀表板模板 - 廣泛的設計風格 --- 編碼主題 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3u1oseo5vj4g5mnnn6q.jpg)](https://codedthemes.com/) [CodedThemes](https://codedthemes.com/)提供免費+付費的 Bootstrap、Angular、React 和 Vue 模板。製造商專注於管理儀表板和完整的 UI 套件。他們的工藝水平透過產品品質而閃耀。包裝經過精心組裝,採用精美的設計,給人一種準備就緒的感覺。 **特徵** - 設計精美的物品具有先進的元件 - 網站瀏覽很愉快,沒有煩人的廣告 --- 丹參套件 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpy8f28sb9gbkw9kz5ol.jpg)](https://www.salvia-kit.com) [Salvia Kit](https://www.salvia-kit.com)提供免費的 Angular、React、Vue、Nuxt 和 Svelte 範本。它是您可以免費下載的最好的管理儀表板集合之一。套件使用戶能夠為各種 Web 應用程式建立美觀且高效的介面。有不同的視覺風格和多個元件可用。 **特徵** - 高度關注管理儀表板模板 - 同一開發商打造的品質一致 --- 煮沸 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dl17974czs5ru0eg2s2.jpg)](https://justboil.me/) [JustBoil](https://justboil.me/)提供免費 + 付費的 Tailwind、React、Vue、Nextjs、Nuxt 和 Laravel 模板。在這裡,您將找到一些用於建立出色的 Web 應用程式介面的最佳儀表板範本。佈局是為了可用性而精心設計的,設計是以效率為導向的。 **特徵** - 不斷更新的專業模板 - 以結果為導向的高效佈局 --- 主題選擇 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tiizky4chnasi713lck.jpg)](https://themeselection.com/) [ThemeSelection](https://themeselection.com/)提供免費 + 付費的 Vue、Nextjs、Nuxt 和 Laravel 模板。製造商專注於管理儀表板和 UI 套件。免費物品設計精良,與優質物品不相上下。很棒的現成包可幫助開發人員更快地啟動專案。 **特徵** - 結構良好的美麗物品 - 模組化且易於定製程式碼 --- 愛康尼克設計 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vngpaoo80t2gcaysk7uh.jpg)](https://iqonic.design/) [Iqonic Design](https://iqonic.design/)提供免費 + 付費的 React 和 Vue 模板。儘管製造商在 HTML 專案方面建立了 Flutter 和 WordPress 主題,但他們專注於管理儀表板。有一些免費的軟體包可以幫助網頁開發人員建立現代介面。 **特徵** - 精心設計的儀表板模板 --- 為了整理這篇綜述,我瀏覽了所有可以想像的可以找到模板的線上資源。我希望它能讓你的工作更輕鬆。 --- 原文出處:https://dev.to/devluc/50-best-websites-for-free-html-templates-1i2l

簡化程式碼:20 多個方便的 JavaScript 函數

JavaScript 是一種函數式程式語言,函數扮演著至關重要的角色。它們允許您封裝可重複使用程式碼並執行特定任務。以下是一些可以讓您的生活更輕鬆的功能的快速範例: ### 常規功能 ``` function sum(a, b) { return a + b; } ``` ### 函數表達式 ``` const sum = function (a, b) { return a + b; }; ``` ### 箭頭功能 ``` const sum = (a, b) => { return a + b; }; // OR const sum = (a, b) => a + b; ``` ### 發電機功能 ``` function* indexGenerator() { let index = 0; while (true) { yield index++; } } const g = indexGenerator(); console.log(g.next().value); // => 0 console.log(g.next().value); // => 1 ``` ### 建立一個從 1 到 n 的數字陣列 ``` const range = (n) => Array.from({ length: n }, (_, i) => i + 1); console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ``` ### 使用步驟建立一個從 1 到 n 的數字陣列 ``` const range = (n, step = 1) => Array.from({ length: n }, (_, i) => i * step); console.log(range(10, 2)); // [1, 3, 5, 7, 9] ``` ### 建立一個陣列並用一個值填充它 ``` const fill = (len, value) => Array(len).fill(value); console.log(fill(3, 0)); // [0, 0, 0] ``` ### 打亂陣列 ``` const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random()); console.log(shuffleArray([1, 2, 3, 4])); // [3, 2, 1, 4] ``` ### 從陣列中刪除重複項 ``` const removeDuplicated = (arr) => [...new Set(arr)]; console.log(removeDuplicated([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ] const removeDuplicate = (arr) => Object.values(arr.reduce((a, b) => (a[b] ? a : { ...a, [b]: b }), {})); console.log(removeDuplicate([1, 2, 3, 3])); // Result: [ 1, 2, 3, ] ``` ### 產生隨機數 ``` const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; console.log(random(1, 10)); // Result: 1 ~ 10 ``` ### 找到最大的數字 ``` const findLargest = (arr) => arr.map((subArr) => Math.max(...subArr)); console.log( findLargest([ [4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1], ]) ); // [5, 27, 39, 1001] ``` ### 找出最小的數字 ``` const findSmallest = (arr) => arr.map((subArr) => Math.min(...subArr)); console.log( findSmallest([ [4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1], ]) ); // [1, 18, 32, 857] ``` ### 從陣列中選擇一個隨機元素 ``` const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]; console.log(pick([1, 2, 3, 4])); // 2 ``` ### 將陣列轉換為物件 ``` const toObject = (arr) => ({ ...arr }); console.log(toObject(["a", "b"])); // { 0: 'a', 1: 'b' } ``` ### 找出兩個陣列的交集 ``` const intersection = (arr1, arr2) => { const set = new Set(arr1); return arr2.filter((x) => set.has(x)); }; console.log(intersection([1, 2, 3], [2, 3, 4])); // [2, 3] ``` ### 從陣列中刪除虛假值 ``` const compact = (arr) => arr.filter(Boolean); console.log(compact([0, 1, false, 2, "", 3, "a", "e" * 23, NaN, "s", 34])); // [1, 2, 3, 'a', 's', 34] ``` ### 反轉字串 ``` const reverseString = (str) => str.split("").reverse().join(""); console.log(reverseString("hello")); // olleh ``` ### 字串是回文嗎 ``` const isPalindrome = (str) => str === str.split("").reverse().join(""); console.log(isPalindrome("madam")); // true ``` ### 檢查物件是否為空 ``` const isEmpty = (obj) => Object.keys(obj).length === 0; console.log(isEmpty({})); // true ``` ### 找出一個月中的天數 ``` const getDaysInMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); console.log(getDaysInMonth(new Date())); // 31 ``` ### 產生隨機顏色 ``` const getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`; console.log(getRandomColor()); // #f0f0f0 const randomHex = () => `#${Math.floor(Math.random() * 0xffffff) .toString(16) .padEnd(6, "0")}`; console.log(randomHex()); // #f0f0f0 ``` --- ##### 必須閱讀(如果還沒有) https://dev.to/devsmitra/how-to-create-the-app-using-jsx-without-react-k08 https://dev.to/devsmitra/reactjs-signal-for-state-mangement-21pf https://dev.to/devsmitra/simplify-javascripts-async-concepts-with-one-gif-3c6a --- ###### 更多內容請造訪[Dev.to](https://dev.to/devsmitra "拉胡爾·夏爾馬(DevsMitra)") 。 --- 原文出處:https://dev.to/devsmitra/20-handy-javascript-functions-to-simplify-your-code-javascript-tutorial-i0e

📕 新創企業 vs 大公司:您需要知道的最佳要點 📊

我仍然記得我第一天與數百名其他員工一起參加公司會議。經過幾個月成功的自由工作後,我終於能夠加入一家大公司,焦慮和興奮的混合是真實的。現在的挑戰不同了,風險更高了,環境也勢不可擋。 但這並不是唯一讓我感到壓力的情況。我還清楚記得有一天,在一家小型新創公司工作時,我向整個公司展示了我們將要使用的新前端架構的一部分。我們規模很小,會議上的每個人都在專心聽我說的話。 從在新創公司中發揮重要作用,到成為公司中更大群體中的一小部分,每一次經驗都有自己的一套學習經驗。 當然,情況並非總是如此。我們都知道存在沒有做好準備的公司,這就是建立本文的原因。在這裡,我們將探討**我在新創公司和大公司工作時獲得的一些**關鍵經驗和收穫,這樣你就可以從你目前工作的公司中學習到這些知識,甚至可以自己決定你下一步的職業步驟,看看哪一個更適合您。 流程和文化 ----- ![流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0exqcm882w9gvs11u3go.png) 讓我們從流程開始,因為它們是第一個非常明顯的差異。在新創公司工作時,大多數流程仍在實施中,您工作的很大一部分實際上可能涉及**嘗試和試驗**這些任務的不同流程。 文化也可能處於創造階段,因此,定義公司及其員工的共同價值觀,或「在這裡做事的方式」。可以改變很多而且很快! 當然,這使得體驗方式更加混亂,但也更加靈活。兼顧多重角色和責任並不罕見,這可能是在不同方面學習和成長的絕佳機會,例如創造新的良好文化模式。 另一方面,在更企業化的環境中,流程更加結構化和明確,這可以提供穩定性和明確的期望,但也會帶來官僚主義的缺點,需要很長時間才能真正通過多個管道和渠道。 這裡的關鍵要點是**平衡**。流程的稀缺會讓整個生態系統變得混亂,這讓人不舒服,但流程太多,你就什麼都做不了。平衡缺勤和超額的權重將為每個人創造一個更好的環境。 敏捷性和適應性 ------- ![敏捷](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yasslnhkhhhx9oycybps.png) 在新創公司工作通常需要身兼數職,並隨時適應變化。在快節奏的新創環境中,敏捷性和適應性是關鍵。你必須準備好轉變,這可以讓你成長很多,不要太執著於自己的想法。您還必須準備好調整您的策略並接受新技術和方法(如果它們看起來合適)。 這可能是一次令人興奮的經歷,可以促進創造力和創新,但從長遠來看,也可能導致分散且充滿壓力的環境(公司的各個方面都採用不同的技術,讓所有混亂的工作變得**困難**)。 相較之下,大公司擁有豐富的時間和資源,可以進行更徹底的規劃和執行。此外,大公司傾向於依賴他們已經信任的東西,並且通常不太願意接受新事物。 雖然這不如動態的創業環境那麼令人興奮,但它提供了不同類型的學習體驗。在這裡,您可以加深對策略規劃、專案管理和業務營運其他方面的理解。 這裡的關鍵要點是學會**在需要時**變得敏捷、多才多藝和適應能力強。如果您不想相信我的話,我建議您閱讀[這篇關於無聊技術的文章](https://mcfunley.com/choose-boring-technology)。這是令人驚訝的洞察力和偉大的閱讀! --- 哦!在我忘記之前,這篇文章之所以成為可能,是因為[Wasp](https://wasp-lang.dev/) ,他們正在建立一個非常酷的全端 React + NodeJS 框架,如果您能透過[在 GitHub 上為我們的儲存庫加註星標](https://www.github.com/wasp-lang/wasp)來幫助我們,那將意義重大。 透過這樣做,您將幫助我們繼續使網頁開發更快、更輕鬆,並每週為您帶來這樣的內容! 🚀 ![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbWFnZzJ5dGV2cXduOGluaTgyaTdvbnJ4c3ZvZGxuY3V3czQxZmZzNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZfK4cXKJTTay1Ava29/giphy.gif) https://www.github.com/wasp-lang/wasp ⭐️ 在 GitHub 上給我們一個 star 🙏 --- 社交機會 ---- ![聯網](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flkmybnqw8ocfj0jd1bn.png) 新創公司和大公司之間的另一個主要區別是它們提供的網路機會。大公司通常擁有廣泛的員工、客戶、供應商和合作夥伴網路。在這樣的環境中工作可以提供大量建立人際網絡和建立有價值的專業關係的機會。這些聯繫對於您的職業發展非常有益。 另一方面,新創公司由於規模較小,提供了更親密的社交機會。您可能會與團隊的每個成員密切合作,讓您有機會建立更牢固的關係並直接向同事和上級學習。 這裡的關鍵要點是擁抱每一個聯繫,並**嘗試在任何地方創造一個良好的工作環境**。這將使您更輕鬆地度過困難時期,並且您一定會在一生中結交一些友誼😃 影響 -- ![影響](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1hn0o5x8olm7sw7i21c.png) 現在,我們來談談影響。在較大的公司中,您的程式碼庫可能會被數千(更可能是數百萬人)人存取。這意味著做一個小的改變可以改變很多人對應用程式的看法,並且看到你的工作被這麼多人使用是非常令人滿意的。不幸的是,第一次必須為數百萬用戶存取的程式碼庫部署一個小的程式碼變更絕對是令人傷腦筋的——儘管這對於增加您的經驗和彈性是必要的。 在新創公司中,您可能會看到有數百人(相信有數千人)造訪的程式碼庫。這意味著,你的工作將被更少的人看到,但是,由於你可以創造更多,你可能會創造出更多的東西,而不僅僅是一個小小的改變。頁面、使用者旅程和所有內容都可以在您的範圍內單獨或與您的團隊一起進行。但它並非沒有缺點。由於流程更加稀缺,因此回滾和恢復變更有時可能是一個困難的過程(甚至更糟的是,沒有記錄)。 這裡的關鍵要點是了解您的角色以及您在不同環境中帶來的價值的重要性。無論您是在一家新創公司,您的工作直接推動公司的成功,還是在一家大公司,您的行為有助於更廣泛的目標,**您的工作都很重要,您應該為此感到自豪。** 舉個例子,我為在一個巨大的電子商務網站上製作一個簡單的產品過濾器(他們一直使用到今天)感到非常自豪,並且我也為積極實施/參與至少 2 個專案的實施感到自豪/3是我曾經合作過的新創公司的設計師所提出的新設計系統的每個元件的/3。**好的工作不會讓別人貶低。** 結論 -- ![所有的主題都變成了插圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ev801q6beoct1a0ijfa.png) 如果這段穿越新創公司和企業領域的旅程為您帶來了啟發,為什麼不支持[Wasp](https://wasp-lang.dev/)呢?我們正在精心打造工具和內容,為像您這樣的開發人員提供協助,無論您是獨自編碼還是克服企業挑戰。 如果您想看到更多這樣的內容,您可以[在 GitHub 上給我們一個星星,非常輕鬆地幫助我們!](https://www.github.com/wasp-lang/wasp) ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) https://www.github.com/wasp-lang/wasp ⭐️ GitHub 上的 Star Wasp 🙏 新創企業和大公司都提供寶貴的經驗。在新創公司,你可以做不同的任務,嘗試新事物,並直接影響公司的未來。這是一種親身實踐的學習經驗。 在大公司中,您可以存取許多資源和結構化環境。您可以與多元化專家團隊合作,這有助於您學習和成長。既定的流程、穩定性和可預測性可以幫助提高您的技能並塑造您的職業生涯。 但是,這並不是要選擇其中之一。這是關於學習在兩種環境中都表現出色。汲取兩者中最好的部分,並隨時隨地使用它們。保持敏捷、適應力強、樂於接受新體驗。這兩種經歷對你的職業生涯都很重要。 總之,每種環境都有其獨特的挑戰與機會。擁抱差異,從經驗中學習,並利用它們為你帶來優勢。畢竟,正是這些多樣化的經驗可以幫助您實現個人和職業成長。因此,無論您是在新創公司還是大公司,請始終記住 - 您的工作很重要,並有助於實現更大的目標。 您對新創公司和大公司之間的比較有何看法?我們很想聽聽您的經驗和收穫。請在下面的評論中分享您的想法! --- 原文出處:https://dev.to/wasp/start-ups-vs-big-companies-the-best-takeaways-for-you-to-know-28n5

Array.reduce() 已被山羊化 🐐✨

標題說明了一切🐐。我想談談我一直以來最喜歡的 JavaScript 陣列方法: **Array.reduce()** 。我知道有很多競爭者,但請聽我說完。 reduce() 不只是一個方法;這是一種生活方式✨。 我不想撒謊,當我第一次開始並發現reduce 時,它有點令人生畏。我花了一段時間才在程式碼中自信地使用它。但當我這麼做的時候,遊戲規則就改變了。突然間,我可以輕鬆地對陣列執行複雜的操作,將它們轉換為我需要的任何內容。我的程式碼變得更快更乾淨。 但不要只相信我的話。讓我向您展示使用reduce() 可以實現的一些功能。是時候深入研究 Array.reduce() 並發現為什麼它絕對是山羊了! 🐐 Array.reduce() 的 9 個用例 🐐 ------------------------ ### 用例 1:對數字求和 reduce() 最直接的用例之一是對一堆數字求和。假設您有一個整數陣列,並且您想要找到總和。 ``` const numbers: number[] = [1, 2, 3, 4, 5]; const sum: number = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // Output: 15 ``` 繁榮!只需一行程式碼,您就可以計算出陣列中所有元素的總和。累加器的初始值設為 0,並且在每次迭代中,我們將當前元素新增至累加器。 \*\* 獎勵:如果您選擇忽略起始值,reduce 將只使用陣列中的第一項。不過我傾向於總是包含一個初始值,這樣比較容易閱讀。 ### 用例 2:展平陣列 您是否曾經發現自己有一個陣列陣列並想:“我希望我可以將其扁平化為一個陣列”? ``` const nestedArray: number[][] = [[1, 2], [3, 4], [5, 6]]; const flattenedArray: number[] = nestedArray.reduce((acc, curr) => acc.concat(curr), []); console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6] ``` 在此範例中,我們從一個空陣列開始作為初始累加器值。然後,在每次迭代中,我們使用 concat() 方法將目前子陣列連接到累加器。最後,我們就有了一個完美的扁平化陣列。 我知道您也可以使用`Array.flat()`來做到這一點。然而,了解如何使用reduce 很重要,以防您想對每個專案執行額外的操作。 ### 用例 3:對物件進行分組 假設您有一個物件陣列,並且您希望根據特定屬性對它們進行分組。 reduce() 是完成這項工作的完美工具。 ``` interface Person { name: string; age: number; } const people: Person[] = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 25 }, { name: 'Dave', age: 30 } ]; const groupedByAge: { [key: number]: Person[] } = people.reduce((acc, curr) => { if (!acc[curr.age]) { acc[curr.age] = []; } acc[curr.age].push(curr); return acc; }, {}); console.log(groupedByAge); /* Output: { '25': [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }], '30': [{ name: 'Bob', age: 30 }, { name: 'Dave', age: 30 }] } */ ``` 在本例中,我們使用一個物件作為初始累加器值。我們檢查累加器是否已經具有當前年齡的屬性。如果沒有,我們為該年齡建立一個空陣列。然後,我們將目前物件推入對應的年齡陣列中。最後,我們得到一個物件,其中鍵是年齡,值是該年齡的人的陣列。 現在您也可以使用更新的`groupBy`方法,但是,理解這個久經考驗的真正經典方法很重要。 ### 用例 4:建立查找圖 我個人最喜歡的是使用reduce()從陣列建立查找映射。在效能和程式碼可讀性方面,它改變了遊戲規則。停止使用那些緩慢的 find() 或 filter() 呼叫。 ``` interface Product { id: number; name: string; price: number; } const products: Product[] = [ { id: 1, name: 'Laptop', price: 999 }, { id: 2, name: 'Phone', price: 699 }, { id: 3, name: 'Tablet', price: 499 }, ]; const productMap: { [key: number]: Product } = products.reduce((acc, curr) => { acc[curr.id] = curr; return acc; }, {}); console.log(productMap); /* Output: { '1': { id: 1, name: 'Laptop', price: 999 }, '2': { id: 2, name: 'Phone', price: 699 }, '3': { id: 3, name: 'Tablet', price: 499 } } */ // Accessing a product by ID const laptop: Product = productMap[1]; console.log(laptop); // Output: { id: 1, name: 'Laptop', price: 999 } ``` 透過使用reduce()建立查找映射,您可以以恆定的時間複雜度透過元素的唯一辨識碼來存取元素。不再需要循環遍歷陣列來尋找特定專案。 ### 用例 5:計算出現次數 曾經需要計算陣列中元素的出現次數嗎? reduce() 已經幫你解決了。 ``` const fruits: string[] = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; const fruitCounts: { [key: string]: number } = fruits.reduce((acc, curr) => { acc[curr] = (acc[curr] || 0) + 1; return acc; }, {}); console.log(fruitCounts); /* Output: { 'apple': 3, 'banana': 2, 'orange': 1 } */ ``` 在這個例子中,我們初始化一個空物件作為累加器。對於陣列中的每個水果,我們檢查它是否已作為累加器物件中的屬性存在。如果是,我們將其計數加 1;否則,我們將其初始化為 1。 ### 用例 6:組合函數 函數式程式設計愛好者一定會喜歡這個。 reduce() 是一個強大的函陣列合工具。您可以使用它來建立逐步轉換資料的函數管道。 ``` const add5 = (x: number): number => x + 5; const multiply3 = (x: number): number => x * 3; const subtract2 = (x: number): number => x - 2; const composedFunctions: ((x: number) => number)[] = [add5, multiply3, subtract2]; const result: number = composedFunctions.reduce((acc, curr) => curr(acc), 10); console.log(result); // Output: 43 ``` 在這個範例中,我們有一個函數陣列,我們希望將其按順序應用到初始值 10。最終結果是按組合順序應用所有函數的結果。 ### 用例 7:實作簡單的類似 Redux 的狀態管理 如果您使用過 Redux,您就會知道它在管理應用程式中的狀態方面有多強大。你猜怎麼了?你可以使用reduce()來實作一個簡單的類似Redux的狀態管理系統。 ``` interface State { count: number; todos: string[]; } interface Action { type: string; payload?: any; } const initialState: State = { count: 0, todos: [], }; const actions: Action[] = [ { type: 'INCREMENT_COUNT' }, { type: 'ADD_TODO', payload: 'Learn Array.reduce()' }, { type: 'INCREMENT_COUNT' }, { type: 'ADD_TODO', payload: 'Master TypeScript' }, ]; const reducer = (state: State, action: Action): State => { switch (action.type) { case 'INCREMENT_COUNT': return { ...state, count: state.count + 1 }; case 'ADD_TODO': return { ...state, todos: [...state.todos, action.payload] }; default: return state; } }; const finalState: State = actions.reduce(reducer, initialState); console.log(finalState); /* Output: { count: 2, todos: ['Learn Array.reduce()', 'Master TypeScript'] } */ ``` 在此範例中,我們有一個初始狀態物件和一組操作。我們定義一個reducer函數,它接受當前狀態和一個動作,並根據動作類型返回一個新狀態。透過使用reduce(),我們可以將每個動作依序應用於狀態,從而得到最終狀態。這就像擁有一個迷你 Redux。 ### 用例 8:產生唯一值 有時,您可能有一個包含重複值的陣列,並且您需要僅提取唯一的值。 reduce() 可以幫助您輕鬆實現這一點。 ``` const numbers: number[] = [1, 2, 3, 2, 4, 3, 5, 1, 6]; const uniqueNumbers: number[] = numbers.reduce((acc, curr) => { if (!acc.includes(curr)) { acc.push(curr); } return acc; }, []); console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6] ``` 在這裡,我們初始化一個空陣列作為累加器。對於原始陣列中的每個數字,我們使用includes()方法檢查它是否已存在於累加器中。如果沒有,我們將其推入累加器陣列。最終結果是一個僅包含原始陣列中唯一值的陣列。 ### 用例 9:計算平均值 想要計算一組數字的平均值? reduce() 為您提供支援! ``` const grades: number[] = [85, 90, 92, 88, 95]; const average: number = grades.reduce((acc, curr, index, array) => { acc += curr; if (index === array.length - 1) { return acc / array.length; } return acc; }, 0); console.log(average); // Output: 90 ``` 在此範例中,我們將累加器初始化為 0。當我們到達最後一個元素時(使用索引和 array.length 檢查),我們將累加器除以成績總數來計算平均值。 性能考量🏎️ ------ 雖然 Array.reduce() 非常強大且用途廣泛,但了解潛在的效能缺陷非常重要,尤其是在處理大型陣列或複雜操作時。一個常見的陷阱是在每次reduce()迭代中建立新的物件或陣列,這可能會導致過多的記憶體分配並影響效能。 例如,考慮以下程式碼: ``` const numbers: number[] = [1, 2, 3, 4, 5]; const doubledNumbers: number[] = numbers.reduce((acc, curr) => { return [...acc, curr * 2]; }, []); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10] ``` 在本例中,我們使用展開運算子 (...) 在每次迭代中建立一個新陣列,這可能會效率低下。相反,我們可以透過直接改變累加器陣列來優化程式碼: ``` const numbers: number[] = [1, 2, 3, 4, 5]; const doubledNumbers: number[] = numbers.reduce((acc, curr) => { acc.push(curr * 2); return acc; }, []); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10] ``` 透過使用 push() 來改變累加器陣列,我們可以避免在每次迭代中建立新陣列,從而獲得更好的效能。 類似地,在處理物件時,直接改變累加器物件比使用擴充運算子建立新物件更有效: ``` const people: Person[] = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 25 }, { name: 'Dave', age: 30 } ]; const groupedByAge: { [key: number]: Person[] } = people.reduce((acc, curr) => { if (!acc[curr.age]) { acc[curr.age] = []; } acc[curr.age].push(curr); return acc; }, {}); ``` 透過直接改變累加器物件,我們優化了reduce()操作的效能。 然而,值得注意的是,在某些情況下,在每次迭代中建立新的物件或陣列可能是必要的或更具可讀性。根據您的具體用例和您正在使用的資料大小,在效能和程式碼清晰度之間取得平衡非常重要。 結論 -- 你有它。九個令人難以置信的用例展示了 Array.reduce() 的強大功能和多功能性。從將數字求和到展平陣列、對物件進行分組到建立查找映射、對出現次數進行計數到組合函數,甚至實現狀態管理和計算平均值, `Array.reduce()`被證明是js 工具包中的強大工具。 你怎麼認為?您最喜歡的陣列方法是什麼? 感謝您的閱讀,願 reduce() 的力量與您同在。 ✨🐐✨ --- 原文出處:https://dev.to/mattlewandowski93/arrayreduce-is-goated-1f1j

每個前端開發人員都應該了解的軟體工程原理

作為前端開發人員,我們通常專注於建立漂亮的使用者介面。然而,重要的是要記住,美麗也在於內部,像素完美的方法也應該轉化為我們的程式碼組織和結構。在本文中,我們將探討每個前端開發人員都應該了解並在其專案中應用的一些基本軟體工程原理。 1. DRY(不要重複) ------------ DRY 原則強調程式碼可重複使用性和維護的重要性。透過將通用功能提取到可重複使用元件、函數或模組中來避免重複程式碼。透過堅持 DRY 原則,您可以減少程式碼重複,提高可維護性,並使您的程式碼庫更加模組化。 React 鼓勵元件驅動的架構,其中職責被隔離,以便於未來的開發和可擴展性。 我們以一個簡單的電子商務應用程式中的產品頁面為例。我們希望看到待售產品清單。我們可以將頁面分解為更小的、可重複使用的元件。 成分: 1. 產品卡:顯示單一產品及其名稱、價格和描述。 2. 產品清單:顯示產品清單。 ``` // ProductCard.js import React from 'react'; const ProductCard = ({ product }) => { return ( <div> <h2>{product.name}</h2> <p>Price: ${product.price}</p> <p>Description: {product.description}</p> </div> ); }; export default ProductCard; ``` ``` // ProductList.js import React, { useState } from 'react'; import ProductCard from './ProductCard'; const ProductList = () => { const [products, setProducts] = useState([ { id: 1, name: 'Product 1', price: 9.99, description: 'Description 1' }, { id: 2, name: 'Product 2', price: 19.99, description: 'Description 2' }, // ... ]); return ( <div> {products.map((product) => ( <ProductCard key={product.id} product={product} /> ))} </div> ); }; export default ProductList; ``` 在此範例中,我們看到,透過將與產品相關的邏輯分離到`ProductCard`元件中,我們可以在`ProductList`元件的`map`功能中重複使用它,並避免清單頁面中每個產品專案的重複程式碼。 2. SOLID 原則 -------- SOLID 是一個縮寫詞,代表物件導向設計的五個關鍵原則: - **單一**責任原則 (SRP):每個模組或類別應該只有一個更改理由。 - **開放**/封閉原則(OCP):軟體實體應該對擴展開放,對修改關閉。 - **李斯科夫**替換原則(LSP):子類型應該可以替換其基本類型,而不改變程式的正確性。 - **介面**隔離原則 (ISP):不應強迫客戶端依賴他們不使用的介面。 - **依賴**倒置原則(DIP):高層模組不應該依賴低層模組。兩者都應該依賴抽象。 讓我們來看看如何在 React TypeScript 元件中應用里氏替換原則 (LSP): ``` // Vehicle.ts interface Vehicle { drive(): void; name: string; } // Car.ts class Car implements Vehicle { constructor(private name: string) { this.name = name; } drive(): void { console.log(`Driving a ${this.name}`); } } // Motorcycle.ts class Motorcycle implements Vehicle { constructor(private name: string) { this.name = name; } drive(): void { console.log(`Riding a ${this.name}`); } } // App.tsx import React from 'react'; import { Vehicle } from './Vehicle'; import Car from './Car'; import Motorcycle from './Motorcycle'; function VehicleComponent(props: { vehicle: Vehicle }) { props.vehicle.drive(); return <div>Driving a {props.vehicle.name}</div>; } const App = () => { const car = new Car(); const motorcycle = new Motorcycle(); return ( <div> <VehicleComponent vehicle={car} /> <VehicleComponent vehicle={motorcycle} /> </div> ); }; export default App; ``` 在此範例中,我們有一個`Vehicle`接口,它定義了`name`屬性和`drive`方法。然後我們有兩個具體的實作: `Car`和`Motorcycle` ,它們都實作了`Vehicle`介面。 在 App 元件中,我們建立`Car`和`Motorcycle`的實例並將它們傳遞給 VehicleComponent。 `VehicleComponent`對傳入的車輛物件呼叫驅動方法。 LSP 確保我們可以用`Car`或`Motorcycle`代替`Vehicle`接口,而不改變程序的正確性。 `VehicleComponent`可與`Car`和`Motorcycle`實例無縫協作,展示子類型對其基本類型的可替換性。 3. KISS(保持簡單,愚蠢) ---------------- KISS 原則提倡設計和實現的簡單性。編寫易於理解、簡單且能做好一件事的程式碼。避免不必要的複雜性和過度設計,因為從長遠來看,這可能會導致混亂和維護挑戰。 讓我們來看看`Counter`元件的 2 個實作。 ``` // Complex Counter import React, { useState, useEffect } from 'react'; import { debounce } from 'lodash'; const ComplexCounter = () => { const [count, setCount] = useState(0); const [clicked, setClicked] = useState(false); const [error, setError] = useState(null); useEffect(() => { if (clicked) { setCount(prev => prev + 1) setClicked(false) } }, [clicked, setClicked]); const handleClick = (clicked: boolean) => { setClicked(!clicked); }; return ( <div> <p>Count: {count}</p> <button onClick={() => handleClick(clicked)}>Increment</button> </div> ); }; export default ComplexCounter; ``` ``` // Simple Counter import React, { useState } from 'react'; const SimpleCounter = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Increment</button> </div> ); }; export default SimpleCounter; ``` 我們發現`ComplexCounter`實作更難理解和維護,而且更容易出錯。 它引入了一個不必要的`clicked`狀態變數和一個`useEffect`掛鉤。 這是一個如何不實作 React 元件的範例。 4. YAGNI(你不需要它) --------------- YAGNI 提醒我們避免基於推測的未來需求過早加入功能。相反,應專注於正確實現當前所需的功能。當您建立一個非常以用戶為中心的產品時,這一點變得非常重要。最好不要根據您認為用戶可能想要的假設來引入新功能。使用適當的使用者研究框架和原型設計方法。 遵循 YAGNI,您可以防止不必要的複雜性、減少開發時間並維護精簡的程式碼庫。 5. 乾淨的程式碼 --------- 乾淨的程式碼是可讀的、可理解的、可維護的。遵循編碼約定和最佳實踐,使用有意義的變數名稱,並編寫不言自明的程式碼。保持函數和類別小而集中,堅持一致的格式,並努力使程式碼庫清晰。 讓我們來看一個簡單的實用函數,用於出於資料安全目的隱藏部分使用者的私人資訊。 ``` const hashUsersPrivateInformation = (privateInformation: string): string => { // Calculate the length of the private info to determine how many characters to mask const maxLength = privateInformation.length > 4 ? privateInformation.length - 4 : privateInformation.length; // Create a regular expression pattern to match the desired number of characters const regexPattern = `.{1,${maxLength}}`; const regex = new RegExp(regexPattern); return privateInformation.replace(regex, (match) => '*'.repeat(match.length)); }; ``` 我們看到: 1. 函數的名稱是自我描述的 2. 它包含可以幫助其他開發人員的有用註釋。 3. 它有一個可以理解的主要目的。 我們應該以類似的方式建立我們的程式碼。 結論 -- 將這些軟體工程原理融入您的前端開發工作流程中,您可以編寫更高品質的程式碼,改善與團隊成員的協作,並建立強大且可擴展的應用程式。軟體工程不僅僅是編寫程式碼;還涉及編寫程式碼。它是為複雜問題建立可靠、可維護且優雅的解決方案。 --- 原文出處:https://dev.to/gboladetrue/software-engineering-principles-every-frontend-developer-should-know-1ej7

掌握 SQL:結構化查詢語言綜合指南

介紹 -- 在上一篇部落格文章中,我們共同探討了以下內容的綜合指南: https://dev.to/louaiboumediene/mastering-relational-database-design-a-compressive-guide-3jh8 在本文中,我們將在較高層次上發現實際用於實現資料庫模式設計的語言的語法和核心功能... SQL。 那麼...讓我們深入探討吧! ![讓我們深入了解圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvmr1vh4frdyjfmzf5sh.gif) --- 什麼是 SQL ------- SQL,即結構化查詢語言,是用於與所有**RDMS**對話的外觀語言,但是大多數時候,作為後端工程師(我們不是資料庫工程師),我們不直接使用 SQL,而是使用物件關係映射器**ORM**它在原始SQL 之上提供了一個更好、更可靠的接口,以便用我們首選的程式語言與資料庫進行通信,但是我們仍然需要SQL 的基本知識,以便快速、簡單地操作以及與資料庫互動。 ![如果我告訴你表情包怎麼辦](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvpr0nujx4fed7e4xvh3.png) --- 基本 SQL 查詢 --------- 基本 SQL 查詢涉及使用 SELECT、DISTINCT、WHERE、LIMIT 和 OFFSET 等命令從資料庫表中選擇特定資料。 ``` -- Selecting all columns from a table SELECT * FROM employees; -- Selecting specific columns SELECT first_name, last_name FROM employees; -- Using DISTINCT to get unique values SELECT DISTINCT department_id FROM employees; -- Using WHERE to filter results SELECT * FROM employees WHERE department_id = 10; -- Using LIMIT to limit the number of results SELECT * FROM employees LIMIT 5; -- Using OFFSET to skip certain rows SELECT * FROM employees OFFSET 5; ``` --- 過濾資料 ---- 在 SQL 中篩選資料可讓您根據某些條件從表格中擷取特定記錄,例如使用 >、<、= 等比較運算子以及 AND、OR 和 NOT 等邏輯運算子。 ``` -- Using comparison operators SELECT * FROM employees WHERE salary > 50000; -- Using logical operators SELECT * FROM employees WHERE department_id = 10 AND salary > 50000; -- Using IN and NOT IN SELECT * FROM employees WHERE department_id IN (10, 20); -- Using BETWEEN SELECT * FROM employees WHERE salary BETWEEN 40000 AND 60000; -- Using LIKE for pattern matching SELECT * FROM employees WHERE last_name LIKE 'S%'; ``` --- 資料排序 ---- SQL 中的資料排序是使用 ORDER BY 子句根據指定列以升序或降序排列檢索到的記錄。 ``` -- Sorting data in ascending order SELECT * FROM employees ORDER BY salary; -- Sorting data in descending order SELECT * FROM employees ORDER BY salary DESC; -- Sorting by multiple columns SELECT * FROM employees ORDER BY department_id, salary DESC; ``` --- 聚合函數 ---- SQL 中的聚合函數對一組值執行計算並傳回單一值。常見的聚合函數包括 COUNT、SUM、AVG、MIN 和 MAX。 ``` -- Counting the number of rows SELECT COUNT(*) FROM employees; -- Calculating total salary SELECT SUM(salary) FROM employees; -- Finding average salary SELECT AVG(salary) FROM employees; -- Finding minimum salary SELECT MIN(salary) FROM employees; -- Finding maximum salary SELECT MAX(salary) FROM employees; ``` --- 資料分組 ---- 在 SQL 中將資料分組可讓您使用 GROUP BY 子句(通常與聚合函數結合使用)對指定列中具有相同值的行進行分組。 ``` -- Grouping data by department SELECT department_id, COUNT(*) FROM employees GROUP BY department_id; -- Using HAVING to filter grouped data SELECT department_id, COUNT(*) FROM employees GROUP BY department_id HAVING COUNT(*) > 5; ``` --- 加入 -- SQL 中的聯結會根據相關資料列組合來自多個資料表的資料,以擷取跨這些資料表的資料。 ``` -- Inner Join SELECT * FROM employees INNER JOIN departments ON employees.department_id = departments.department_id; -- Left Join SELECT * FROM employees LEFT JOIN departments ON employees.department_id = departments.department_id; -- Right Join SELECT * FROM employees RIGHT JOIN departments ON employees.department_id = departments.department_id; -- Full Outer Join SELECT * FROM employees FULL OUTER JOIN departments ON employees.department_id = departments.department_id; ``` --- 子查詢 --- SQL 中的子查詢是另一個查詢中的巢狀查詢,用於檢索依賴另一個查詢結果的資料。 ``` -- Subquery example SELECT * FROM employees WHERE department_id IN (SELECT department_id FROM departments WHERE location_id = 1700); -- Correlated subquery example SELECT * FROM employees e WHERE salary > (SELECT AVG(salary) FROM employees WHERE department_id = e.department_id); ``` --- 意見 -- SQL 中的檢視是根據查詢結果產生的虛擬表,提供了一種簡化複雜查詢並限制對某些資料的存取的方法。 ``` -- Creating a view CREATE VIEW high_paid_employees AS SELECT * FROM employees WHERE salary > 80000; -- Updating a view CREATE OR REPLACE VIEW high_paid_employees AS SELECT * FROM employees WHERE salary > 90000; -- Dropping a view DROP VIEW IF EXISTS high_paid_employees; ``` --- 索引 -- SQL 中的索引透過在列上建立索引來提高查詢效能,從而實現更快的資料檢索。 ``` -- Creating an index CREATE INDEX idx_lastname ON employees(last_name); -- Dropping an index DROP INDEX idx_lastname; ``` --- 交易 -- SQL 中的交易透過將 SQL 語句分組為原子單元來確保資料完整性,從而確保所有語句都成功執行或全部都不執行。 ``` -- Beginning a transaction BEGIN TRANSACTION; -- Committing a transaction COMMIT; -- Rolling back a transaction ROLLBACK; ``` --- 儲存過程 ---- SQL中的預存程序是儲存在資料庫中的預編譯的SQL程式碼,可以透過單一命令執行,通常用於封裝頻繁執行的任務 ``` -- Creating a stored procedure CREATE PROCEDURE get_employee (IN employee_id INT) BEGIN SELECT * FROM employees WHERE employee_id = employee_id; END; -- Executing a stored procedure CALL get_employee(100); -- Modifying a stored procedure ALTER PROCEDURE get_employee (IN employee_id INT) BEGIN SELECT employee_id, first_name, last_name FROM employees WHERE employee_id = employee_id; END; -- Dropping a stored procedure DROP PROCEDURE IF EXISTS get_employee; ``` --- 備份與復原 ----- SQL 中的備份和復原涉及建立資料庫備份以防止資料遺失,並在資料庫發生故障或損壞時還原它們。 ``` -- Creating a full backup BACKUP DATABASE dbname TO disk = 'path_to_backup'; -- Creating a differential backup BACKUP DATABASE dbname TO disk = 'path_to_backup' WITH DIFFERENTIAL; -- Creating a transaction log backup BACKUP LOG dbname TO disk = 'path_to_backup'; -- Restoring from a backup RESTORE DATABASE dbname FROM disk = 'path_to_backup'; ``` --- SQL 方言和特定於供應商的擴展 ---------------- 雖然 SQL 是一種標準化語言,但不同的資料庫供應商已經實作了自己的擴充和方言,導致不同 RDBMS 之間 SQL 的編寫和執行方式略有不同。這些變更可能會影響使用特定資料庫系統的開發人員可用的語法、函數和特性。 例如,以下是特定於供應商的 SQL 方言和擴展的一些範例: **甲骨文SQL** : - Oracle SQL 包括專有擴展,例如分層查詢、分析函數和用於資料建模的 MODEL 子句。 - 範例: `SELECT CUBE(product, region) FROM sales;` (CUBE 是 Oracle 特定的用於產生小計的擴充) **SQL Server(微軟)** : - SQL Server 包含 T-SQL (Transact-SQL),它透過串流控制語言建構、錯誤處理和流程程式設計建構等功能擴展了標準 SQL。 - 範例: `SELECT ISNULL(column_name, 'default_value') FROM table_name;` (ISNULL 是一個 T-SQL 函數) **MySQL** : - MySQL 包括空間資料類型和函數、視窗函數以及用於正規表示式匹配的 REGEX 運算子等擴充。 - 範例: `SELECT column_name REGEXP '^pattern' FROM table_name;` (REGEXP 是 MySQL 特定的運算子) **PostgreSQL** : - PostgreSQL 包括陣列、JSON 支援、全文搜尋和範圍資料類型等擴充。 - 範例: `SELECT column_name || 'suffix' FROM table_name;` (|| 是 PostgreSQL 特定的字串連接運算子) ![RDBMS 之間的差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7m0q9jdx3opw29zja6j.png) 所以最合乎邏輯的方法是: 1. **基礎知識**:了解關聯式資料庫設計的基礎:實體、鍵、關係…。 。 2. **SQL** :學習 SQL 作為獨立語言的基礎知識。 3. **選擇 RDBM** :選擇最適合您的 RDBMS,然後按照其所有特殊語法和結構來使用它。 結論 -- SQL 本身就是一個廣闊的領域,包含許多我們沒有涉及的概念。事務、備份和文件管理只是更廣泛範圍的幾個範例。然而,對於像我們這樣的後端工程師來說,我們所介紹的基礎知識足以作為 SQL 的基礎概述。 --- 原文出處:https://dev.to/louaiboumediene/mastering-sql-comprehensive-guide-to-structured-query-language-4gh

我在 20 年內創辦了 30 家新創公司

我在 20 年內創辦了 30 家新創公司。 創投支援、引導、應用程式、SaaS、B2B、B2C。 我後悔犯過的所有錯誤: 1. 做消費者應用程式。 ============ 這裡的失敗率是 B2B 失敗率的 100 倍,幾乎是中樂透。 2. 籌集創投資金。 ========== 當我們籌集第一輪資金時,我感覺就像馬克祖克柏一樣。所有採訪我們的記者。感覺就像一場夢。 最終,大多數這些新創公司都因過早獲得資金而失敗。 3. 招聘太早。 ======== 此前,新創公司對大型團隊感到自豪——這是當時成長的關鍵指標。 創辦人應該完成 PMF 之前的大部分工作。 員工和承包商不會對您的專案有足夠的熱愛和熱情。 4.忽略搜尋引擎優化。 =========== 我的網路中沒有人做過搜尋引擎優化。我們都認為這已經太晚了,所以我們一直推遲它。 5.忽視內容行銷。 ========= 從來沒有認真對待過部落格。大錯。 6.社群媒體行銷。 ========= 這是我最大的遺憾。我一年前開始使用推特。現在已經有2萬粉絲了。如果我從20年前開始會怎樣?現在我可以有 100 萬粉絲嗎?我想是這樣。 7. 跳過創意驗證。 ========== 我總是為觀眾假設。預測他們需要什麼。這幾乎從未被證明是真的。 我最好的專案是那些我認為會失敗的專案,而失敗的專案一開始就是我最大的希望。 8. 招募經理。 ======== 我還沒有在新創公司中見過任何有用的經理。 他們可能對公司有用,但對新創公司來說,我應該只僱用實干家。 9. 追逐投資者。 ========= 對於每家新創公司,我會花 40% 的時間進行融資。 在大多數情況下我都會成功,但代價是什麼? 我已經兩年沒有與投資者進行過一次接觸了,但是風投們來敲我的門,因為我有很好的吸引力,他們每天都在尋找這樣的專案。 10.聘請專業開發人員。 ============ 對於新創公司來說,沒有什麼比專業開發團隊更有效率的了。 如今,我的 1 位全端開發人員在專案上取得的進展比當時 12 人團隊多了 5 倍。 不惜一切代價避免「團隊」。 11. 僱用我不想擁抱的人。 ============== 我的共同創辦人、一位丹麥老人在 2015 年對我說過這句話。 12. 押注於合作夥伴。 ============ 我曾多次與價值數十億美元的大型公司和不同的新創公司合作。 他們承諾提供巨大的東西,數以百萬計的用戶,但最終只是浪費你的時間,破壞焦點,轉移優先級,讓你花費無數的錢來提高安全性和合規性,最終沒有帶來任何使用者/金錢。 13. 閃亮的物體。 ========== 我被 crypt0 的炒作所迷惑。變得超級富有,然後失去了一切。 浪費了很多年。看到人類是多麼的欺騙和貪婪,甚至是我自己的伴侶,我幾乎感到沮喪。 14. 堅持一個糟糕的專案太久。 ================ 在多年沒有吸引力後,我仍然相信專案。 我以為有一天,會發生一些神奇的事情,一切都會好轉。這只是浪費時間。 15. 參加技術會議。 =========== 這完全是浪費時間。 那裡的大多數人都是公司的「好」員工,他們被派到那裡作為對公司忠誠的額外福利。 16. Scrum 是一個騙局。 ================ 如果我的團隊每天早上都必須像幼兒園的孩子一樣被問題困擾,那麼事情最終會失敗。我能做的唯一一件好事是和那些成年人、可以自己管理自己的事情的人在一起。我們只需透過聊天就目標和計劃同步完成所有事情。 17. 外包開發和行銷。 ============ 賣家的態度很好,但結果卻不好。 新創公司是如此困難,以至於外部人幾乎沒有機會為他們做好工作。 18. 從 B2B 領域的免費方案開始。 ==================== 免費專案吸引了完全錯誤的人群,他們提供的回饋只是為了取悅其他「免費」人群。然而,「付費」用戶卻截然不同,並且有不同的需求。 有幾次,我一開始沒有免費版本,沒有銷售,所以後來我加入了免費版本。但這也是一個錯誤。如果沒有人願意為我的產品付費,我就必須修復它或為它尋找其他受眾。 19. 從頭開始編寫程式碼。 ============== 我的團隊將在前 3 個月內編寫基本的內容,例如身份驗證、管理面板、cruds 等。 這是對時間的巨大浪費。 當我開始使用樣板時,速度提高了 10 倍。 20. 與家人和朋友相處的時間很少。 ================== 我工作太多了。根本沒有放假。 這對我的創造力非常有破壞性。一旦我開始休息,我就變得更有創造力。 質>數量。 就是這樣。 我每天都在[twitter.com/johnrushx](https://twitter.com/johnrushx)分享我的經驗 [在這裡查看我的所有專案](https://johnrush.me/) --- 原文出處:https://dev.to/johnrushx/i-built-30-startups-in-20-years-3j41

17 個值得嘗試的最佳開發人員生產力工具

效率和生產力不僅是開發人員的目標,也是必需品。我們製作了大量的工具並編寫了日常任務的腳本,所有這些都是為了騰出時間來處理真正重要的事情。在當今龐大的開發者生態系中,一系列[生產力工具](https://www.devzero.io/blog/ai-tools-for-software-developers-in-2023-to-boost-dev-productivity)隨時可以簡化我們的工作流程。 生產力工具的作用不僅僅是減少重複性任務的[時間](https://www.devzero.io/blog/time-management-tools-and-tips-boosting-productivity-for-software-developers)。它們在管理程式碼和促進團隊協作方面至關重要。借助正確的工具包,開發人員可以將注意力從平凡轉向創新,以新的自由度來應對創意挑戰。讓我們深入了解頂級開發者生產力工具,以在 2024 年提升您的遊戲水平。 衡量開發人員的生產力 ---------- 首先,讓我們解決一個基本問題:我們如何衡量開發人員的生產力?開發人員的日常生活不僅包括編寫程式碼,因此衡量生產力需要廣泛審視整個軟體開發過程的效率和有效性。 我們可以追蹤熟悉的指標,例如程式碼行數、開發的功能、修復的錯誤和交付時間表。然而,真正理解生產力需要一種整體方法,一種權衡軟體開發的有形和無形方面的方法。因此,考慮品質、影響和協作也很重要。 了解生產力工具 ------- 接下來,我們來詳細分析開發人員可以使用的不同類型的生產力工具: - IDE、程式碼編輯器和助手是任何開發人員武器庫的基石,為編碼、編輯、測試和除錯提供整合平台。 - 開發環境確保開發人員可以專注於編寫程式碼,而不是管理基礎架構。 - 專案管理和協作工具對於組織任務、追蹤進度和確保團隊溝通順暢至關重要。 - 設計和原型工具使開發人員能夠製作引人注目的視覺設計並改進其應用程式的 UI/UX。 - 偵錯工具對於快速辨識和修復錯誤和其他程式碼問題至關重要。 - 框架和抽象可以幫助開發人員透過重複使用通用元件更快地交付程式碼。 - 部署應用程式是最後一步,但確保效能和穩定性是關鍵。 從編碼的基礎工作到使用者介面和團隊協作的微調,每個類別在提高生產力方面都發揮著至關重要的作用。 IDE、程式碼編輯器和助手 ------------- 讓我們來看看 2024 年一些流行的 IDE 和程式碼編輯器。 1. IntelliJ IDEA --------- [IntelliJ IDEA](https://www.jetbrains.com/idea/)是 Java 和 Kotlin 開發人員的首選 IDE,提供的綜合[開發環境](https://www.devzero.io/blog/why-software-development-environments-are-important-and-how-to-manage-them-effectively)遠遠超出 Atom 等簡單程式碼編輯器所提供的功能。此 IDE 具有出色的高級功能,例如深入程式碼理解以實現卓越的導航和重構。與基本編輯器不同,IntelliJ 整合了資料庫和版本控制的基本工具,透過讓您所需的一切觸手可及來簡化您的工作流程。 IntelliJ 社群版免費提供,並提供對其功能的廣泛探索,但存取權限僅限於學生、BootCamp 成員和特定焦點小組。對於其他人來說,專業版的價格約為每月 20 美元,並且可以完全存取 IntelliJ 強大的工具套件。 2. Visual Studio Code -------------------- Microsoft 的[Visual Studio Code](https://code.visualstudio.com/)是跨所有框架、語言和程式庫的開發人員的首選程式碼編輯器。其突出的特點是一個龐大的擴展庫,旨在提高生產力。想像一下,利用 TabNine 進行 AI 驅動的程式碼補全,或整合 GitHub Copilot,利用其 AI 輔助功能將編碼速度提高十倍。除此之外,Visual Studio Code 還提供內建的 Git 控制、用於 shell 命令的整合終端以及用於無縫程式碼分析的專用偵錯器。 最重要的是,它完全免費,並且與 Windows、Mac 和 Linux 平台普遍相容。 3. AppMap ------- [AppMap](https://www.appmap.io/)是一種視覺化工具,可提供應用程式程式碼庫內互動的詳細概述。它為開發人員提供了整個應用程式中資料流和控制的圖形表示,幫助他們更直觀地理解複雜的系統。透過 AppMap,開發人員可以輕鬆瀏覽不同的元件,了解模組之間的依賴關係,並確定潛在的最佳化或重構領域。透過直觀地繪製應用程式的內部工作原理,AppMap 增強了開發團隊之間的協作,並有助於在開發過程中做出更好的決策。 Appmap 最近推出了 Navie。 Navie 是一種生成編碼 AI,具有 API 和資料庫感知能力,因此它可以為整個程式碼庫中的複雜變更提供程式碼建議。 Navies 回答並建議針對開發人員問題進行程式碼更改,例如「我的資料庫查詢效能很慢。我如何解決它?或“我需要更改令牌系統以提高身份驗證安全性,我該如何進行?” ‍ 海軍的建議針對每位開發人員及其正在開發的軟體進行高度個人化,同時確保您的 IP 安全。 4.Copilot ----- 向無可爭議的版本控制統治者屈服:GitHub。憑藉其一系列強大的功能,包括透過 GitHub 工作流程進行自動化部署、 [GitHub Copilot](https://github.com/features/copilot)的人工智慧驅動協助以及 Dependabot 的主動安全修補,GitHub 處於開發創新的前沿。就像 Visual Studio Code 是編碼的首選一樣,GitHub 是開發人員進行版本控制的首選平台。 GitHub 的免費套餐包含豐富的產品,非常適合小型團隊、獨立開發人員、自由工作者和新創公司。但對於大型組織和企業來說,Teams 計劃(每位使用者每月3.67 美元)和Enterprise 計劃(每位使用者每月19.25 美元)解鎖了一系列高級功能,例如GitHub Codespaces,這是與GitHub 無縫整合的虛擬IDE,可直接在平台內進行編碼。此外,付費方案還提供增強的協作功能,例如能夠任命多個拉取請求審閱者和指定程式碼擁有者,從而簡化開發流程並確保程式碼品質。 ‍ 此類別中出現的另外兩個工具是[SuperMaven](https://supermaven.com/)和[TabbyML](https://github.com/TabbyML/tabby) ,兩者都使用快速且安全的 LLM 來完成程式碼完成和建議。 開發環境 ---- 在當今的微服務和複雜的基於雲端的服務和第三方庫的世界中,本地主機無法提供所需的適當環境。這會導致整個 SLDC 不斷重構並減慢部署週期。 5.DevZero --------- [DevZero](https://www.devzero.io/)是一個為開發人員在雲端提供一致的、類似生產的開發環境的平台。開發人員可以在他或她的本機電腦上工作,但仍然體驗生產環境的所有細微差別,例如資料庫、雲端原生服務等。到生產都是一致的。新開發人員只需幾分鐘即可入職,而不是幾天。這使工程組織具有一致性和易於管理。不再除錯本機。 DevZero 的一個顯著優勢是縮短了 CI 時間。開發人員可以節省重構和編譯基礎架構處理所花費的寶貴時間,因為現在他們可以立即在生產環境中執行本機程式碼。這也提高了整體發布頻率並消除了在不同環境中進行測試的障礙。 協作和專案管理 ------- 開發人員經常處理無數的選項卡,並且可能會跨多個顯示器進行操作,但切換平台以進行協作和任務管理的想法可能是一個真正的痛點。讓我們深入研究一些旨在提高開發人員生產力和促進無縫團隊協作的關鍵工具。 6. Slack ----- Slack 徹底改變了遠端協作,使公司能夠即時通訊和共享文件。對於開發人員來說,它是協作的動力源泉,可與 GitHub 等工具無縫集成,以即時更新程式碼推送或部署。這種整合確保每個人都能及時了解專案狀態,而無需不斷地來回訊息。您可以透過 Slack 的整合使用任何專案管理工具,例如 Trello、JIRA 等。 Slack 透過可自訂的工作流程和應用程式進一步發展,讓平台內任務和問題管理。雖然免費計劃支援基本通訊和最多十個集成,但要擴展到自訂自動化及其他功能,需要升級到專業計劃(每人每月 8.25 歐元)或商業計劃(每人每月 14.10 歐元)。這種靈活性使 Slack 成為追求效率和簡化工作流程的開發團隊不可或缺的工具。 7. Height ----- 在管理專案和維持組織性方面,擁有可靠的工作追蹤工具至關重要。 [Height](http://height.app/)是一款功能強大的專案管理工具,提供廣泛的功能,旨在簡化協作並最大限度地提高效率。借助 Height,開發人員可以輕鬆分配任務、設定截止日期、追蹤進度並監控團隊績效。其直覺的收件匣式介面和強大的分析功能使其成為希望掌控工作量並按時交付專案的團隊的首選。 8. Linear ----- [Linear.app](https://linear.app/)是一個專案管理和問題追蹤工具,旨在幫助團隊更有效地協作和管理工作。 Linear 提供了一個用於組織任務、追蹤進度和促進團隊成員之間溝通的平台。該工具以其時尚且用戶友好的介面而聞名。 9. Pullflow ----- 審查 PR 很多時候是工程組織的瓶頸。它不像編寫程式碼那樣有回報,並且需要上下文切換。 [Pullflow](https://pullflow.com/)旨在透過其人工智慧增強的程式碼審查協作功能來減少上下文切換並改善溝通和公關管理。 Pullflow 整合了 VSCode、Github 和 Slack 之間的 PR 通信,因此開發人員無需進行上下文切換。 設計和原型製作工具 --------- 開發人員從頭開始精心設計設計並仔細考慮每個佈局、顏色和字體選擇的時代已經演變。今天的 UI/UX 開發人員享受 Figma 等工具的重大飛躍,其中設計與程式碼相結合。讓我們詳細探討一下。 10. Figma ------- [Figma](https://www.figma.com/)透過提供可無縫整合到專案中的現成程式碼片段,徹底改變了設計到開發流程。在過去的一年裡,Figma 推出了許多插件,為 React、Vue 甚至 HTML 等流行框架提供樣板元件,並支援 Figma 設計直接轉換為 Webflow。 FigJam 是一項出色的功能,事實證明,它對於規劃和確定建造和發布的範圍、衝刺規劃和製作架構圖非常有價值。它在協作和策略規劃階段的效用怎麼強調都不為過。 由於其基於網路的特性,Figma 提供了無與倫比的易用性,並輔以適用於 Windows 和 macOS 的專用桌面應用程式。您需要加入其中一項付費方案才能使用開發模式並存取所有設計元素的程式碼。如果您使用組織計劃,您甚至可以使用私人插件。 11.Whimsical和Excalidraw ------------------ 在解釋複雜概念或設計系統架構時,圖表和視覺化通常是必不可少的。 [Excalidraw](https://excalidraw.com/)和[Whimsical](https://whimsical.com/)是兩種流行的快速繪圖工具,可讓開發人員輕鬆建立圖表。憑藉其簡單而強大的介面,開發人員可以立即建立線框、流程圖和其他視覺表示。這些工具非常適合集思廣益並向利害關係人展示概念,使它們成為開發人員工具包的寶貴補充。 偵錯工具 ---- 除錯是軟體開發生命週期中最具挑戰性和最耗時的部分之一。然而,正確的警報和監控系統可以節省無數時間。讓我們深入研究可以顯著簡化除錯過程、提高效率並減少開發工作流程中的停機時間的基本工具。 12.Postman ----- [Postman](https://www.postman.com/)已成為測試和記錄 API 的基礎 API 開發工具,因其在除錯生產和本地 API 方面的強大能力而贏得了開發人員的廣泛認可。它使用戶能夠發送和模擬 HTTP 請求,這項功能對於等待後端 API 準備就緒的前端開發人員特別有利,可確保持續進展。 除了在測試中的實用性之外,Postman 還充當 API 文件的集中儲存庫,促進團隊內的無縫共享和協作。其基本計劃(每個用戶每月 14 美元)對於大多數開發人員來說應該足夠了。 13.Sentry ----- [Sentry](https://sentry.io/)是效能監控和錯誤追蹤領域的強大工具,擅長自動辨識程式碼庫中的錯誤和錯誤。 Sentry 的 SDK 適用於幾乎所有廣泛使用的框架和技術(包括 JavaScript、PHP、Python 和 Ruby),可無縫整合到您的專案中。 檢測到錯誤後,Sentry 會提供全面的見解,例如堆疊追蹤、來源頁面和使用者訊息,這些對於有效診斷和解決問題非常寶貴。此外,程式碼覆蓋率和會話重播等功能被證明是不可或缺的,尤其是在面臨重現難以捉摸的錯誤的艱鉅任務時。 Sentry 的功能確保開發人員可以花更少的時間進行故障排除,而將更多的時間用於開發,從而提高整體生產力和程式碼品質。 您可以嘗試 Sentry 及其免費的單獨開發者計畫。然而,為了充分利用它,我建議嘗試團隊計劃(每月 26 美元),您可以將隊友加入到 Sentry 工作區。您還需要每月支付 29 美元購買程式碼覆蓋率。 框架和抽象 ----- 當今的許多元件在應用程式中都很常見:身份驗證、授權、資料庫存取、UI 元件等。寫內容從頭開始。 14.Vercel ------ 建置和部署 Web 應用程式可能是一項複雜的任務,尤其是當專案規模不斷擴大時。 Web 應用程式部署框架(例如 Vercel)為開發人員提供了簡化且可擴展的解決方案來部署其 Web 應用程式。 [Vercel](https://www.vercel.com/)是一個雲端平台,旨在簡化 Web 應用程式的部署和託管。它以專注於透過提供自動部署、無伺服器功能和全球內容交付等功能為開發人員提供無縫體驗而聞名。 15. Neurelo ------ [Neurelo](https://www.neurelo.com)為您的資料 API 提供了一個與資料庫無關的程式設計介面。 Neurelo 無需學習 MongoDB 或 PostgreSQL 的查詢語言並為它們建立 API,而是在幾分鐘內為您提供優化的自動生成的 API,包括模式建置器,以及使用 Git 管理開發、登台和生產環境的界面類似版本控制來管理追蹤更改。最後,它使用人工智慧提供自動生成的文件以及透過點擊生成和測試複雜查詢的能力。 許多公司最終會產生自己的抽象層來管理開發人員的資料庫存取或使用 SQLAlchemy 或 Hibernate 等物件關係映射器 (ORM)。 Neurelo 建立了一個通用的強大且與資料庫無關的替代方案。 部署應用程式 ------ 16. Fly.io --------- 部署應用程式可能是一個複雜且耗時的過程。應用程式部署工具(例如[Fly.io](http://fly.io/) )旨在透過提供一個用於輕鬆部署和管理應用程式的平台來簡化此流程。 ‍ Fly.io是一個提供全球應用部署網路的平台。它允許開發人員在跨越全球多個地點的分散式基礎設施上部署和執行他們的應用程式。 Fly.io 專注於透過將應用程式執行個體分佈在更靠近最終用戶的位置來優化應用程式效能,減少延遲並改善整體用戶體驗。 ‍ 該平台支援各種程式語言和框架,使開發人員能夠部署各種應用程式,包括Web應用程式、API和微服務。 Fly.io 使用邊緣運算和全球選播網路的組合來最佳化路由並確保使用者要求定向到最近的可用應用程式實例。 17. Tigris ----------- [Tigris](https://www.tigrisdata.com/)是一種與 S3 相容的全球分散式物件儲存服務,它將資料儲存為物件儲存桶中。物件是一個文件和描述該文件的任何元資料。桶子是存放物件的容器。 ‍ 哪個才是最好的開發工具? ------------ 只要您的武器庫中擁有每個類別中的任何一種工具,您就可以開始使用了。但如果我必須為您選擇一種工具,我會選擇 Visual Studio Code。它因其多功能性、對語言和框架的廣泛支援以及強大的擴展生態系統而脫穎而出,使其成為首選。 工程生產力工具 ------- 工程生產力工具支援軟體開發的特定工程方面。這可能包括分析、自動化測試、部署、容器化或靜態程式碼分析。使用這些工具,您可以確保程式碼品質和效能,並在開發週期的早期發現潛在問題。一些常見的工程生產力工具包括Docker、Jenkins、Confluence、JIRA等。 結論 我很想知道 2024 年您會從這個[清單](https://www.devzero.io/blog/how-to-calculate-developer-productivity-metrics-using-mergestat-and-devzero)中選擇哪種工具。從本質上講,GitHub 和 Visual Studio Code 是 2024 年的必備工具。我仍在研究它們,誰知道呢,它們可能會出現在 2025 年的清單中。 本文原刊於 https://www.devzero.io/blog/best-developer-productivity-in-2024 --- 原文出處:https://dev.to/shohams/17-best-developer-productivity-tools-to-try-1a2a

如何使用 Visual Studio Code 自訂新的 Windows 終端

幾天前,微軟發布了新[Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701)的早期版本。 Windows 終端是一種新型、現代化、快速、高效、強大且高效的終端應用程式,適用於命令列工具和 shell(例如命令提示字元、PowerShell 和 WSL)的使用者。 其主要功能包括多個選項卡、Unicode 和 UTF-8 字元支援、GPU 加速文字渲染引擎以及自訂主題、樣式和配置。 顯然,這是一個託管在 GitHub 上的開源專案: <https://github.com/microsoft/terminal> 請隨意參與。 目前它有點不穩定,將來會推出更多功能,但我已經使用它幾天了,我喜歡這個想法。 到目前為止,我一直在使用[Cmder](https://cmder.net/) ,但 Windows Terminal 有一些新的有前景的功能。 如何安裝 ---- 您可以直接從 Windows 應用程式商店安裝 Windows 終端,或者如果您想了解它的工作原理,您可以下載原始程式碼、建置它並啟動終端。 ![](https://thepracticaldev.s3.amazonaws.com/i/rb6x6yo858b6ufdt42vw.PNG) 商店版本的連結: <https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701> GitHub 專案的連結: <https://github.com/microsoft/terminal> 原始碼和專案都有很好的文件記錄。 第一次發射 ----- 如果您從“開始”功能表啟動該應用程式,它將如下面的螢幕截圖所示。 ![](https://thepracticaldev.s3.amazonaws.com/i/iut0oi8j4iufgdyi6du6.PNG) 預設終端是 PowerShell。 如果按一下「+」符號,應用程式將在新分頁中啟動另一個終端。 如果您按一下向下箭頭符號 ⬇,您可以從清單中選擇新終端。 清單下方還有另一個有趣的按鈕,就是設定按鈕。 設定 -- 如果按一下向下箭頭,然後按一下「設定」按鈕,此時,設定檔案(它是 JSON 檔案)將在 Visual Studio 的新實例中開啟。 如果您想要直接開啟文件,可以開啟 Visual Studio Code 並直接從下列目錄開啟檔案: **%USERPROFILE%\\AppData\\Local\\Packages\\Microsoft.WindowsTerminal\_8wekyb3d8bbwe\\LocalState** 在此文件中,您可以找到 Windows 終端機的所有設定。 目前,您只能透過該文件與設定進行交互,但將來,將向應用程式加入 UI。 新增的個人資料 ------- 如果要新增新的設定文件,請前往 JSON 設定檔的「設定檔」部分,然後新增新的設定檔部分,如下所示: ``` { ``` ``` "acrylicOpacity" : 0.85, ``` ``` "background" : "#012456", ``` ``` "backgroundImage" : "C:/users/barto/AppData/Local/Packages/Microsoft.WindowsTerminal_8wekyb3d8bbwe/RoamingState/unicorn.gif", ``` ``` "backgroundImageOpacity" : 0.7, ``` ``` "backgroundImageStretchMode" : "uniformToFill", ``` ``` "closeOnExit" : false, ``` ``` "colorScheme" : "Solarized Dark", ``` ``` "commandline" : "powershell.exe", ``` ``` "cursorColor" : "#00FF00", ``` ``` "cursorHeight" : 25, ``` ``` "cursorShape" : "vintage", ``` ``` "fontFace" : "Fira Code", ``` ``` "fontSize" : 12, ``` ``` "guid" : "{79285a8e-036c-446f-8a9c-78994e34bf78}", ``` ``` "historySize" : 9001, ``` ``` "icon" : "ms-appdata:///roaming/pwsh-32.png", ``` ``` "name" : "PowerShell with Unicorn", ``` ``` "padding" : "0, 0, 0, 0", ``` ``` "snapOnInput" : true, ``` ``` "startingDirectory" : "%USERPROFILE%", ``` ``` "useAcrylic" : false ``` ``` } ``` 如果您想從此處複製此部分,請注意指南。 請記住每次貼上文件時都要更改它。 例如,它用於設定預設終端,並且它在檔案中必須是唯一的。 正如您在我的個人資料部分中看到的,您可以加入圖像作為背景、更改字體大小、遊標形狀等等。 例如,我使用 Fira Code 作為字體,因為我也喜歡 Visual Studio Code 中的它。 它在文本中加入了一些很棒的體驗。 您可以從這裡下載: <https://github.com/tonsky/FiraCode> 如果您想在會議上給您的朋友或與會者留下深刻印象,您可以加入 gif 作為背景。 您可以在下圖中看到它的實際效果。 ![](https://thepracticaldev.s3.amazonaws.com/i/uaackzt4yxp854i0l5rl.gif) 配色方案 ---- 在profiles.json 檔案的末尾,您可以找到一個名為「schemes」的部分。 從這裡您可以新增或更改終端的預設顏色。 如果您想在新設定檔中使用它,則必須在屬性「name」和設定檔部分的「colorScheme」屬性中插入相同的方案名稱。 分享您的個人資料 -------- 我在我的個人資料上建立了一個新要點來共享我的個人資料設置,您可以在這裡找到它: <https://gist.github.com/kasuken/076d68b92e2a67dfda591587c77a40c0#file-profiles-json> 。 在評論中分享您的個人資料! 我們一起可以創造一些很棒的東西! ![](https://thepracticaldev.s3.amazonaws.com/i/2k9fw1y21k3sv8q1swr3.gif) ### 我的動圖 有些使用者要求提供 gif 動圖。 我在下面分享它們! ![](https://thepracticaldev.s3.amazonaws.com/i/s8ysw6hfoj1a61ovz0us.gif) ![](https://thepracticaldev.s3.amazonaws.com/i/3u7x3b3otmyh6kytychp.gif) ![](https://thepracticaldev.s3.amazonaws.com/i/asvdrzeanv9a20jekihr.gif) --- 原文出處:https://dev.to/kasuken/how-to-customize-the-new-windows-terminal-with-visual-studio-code-56b1

2024 年程式設計師和開發人員應該學習的 5 項技能

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![面試時必須了解的 10 個系統設計概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxdldzd09fwws7nve36.png)](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 開發者們大家好,如果您一直從事程式設計和軟體開發,那麼您就會知道,在我們的領域中只有一個常數,那就是「變化」。 我們總是需要學習新的工具、技術、框架和技能來完成我們的工作,而且永無止境。如果你不學習,你就會和其他人一起落後,這就是為什麼我總是尋找新技能來學習。 在本文中,我將分享程式設計師和開發人員在 2024 年可以學習的 5 項技能,以更好地完成工作並提高效率。 過去,我討論過[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)之間的區別,你們非常喜歡,在本文中我將分享最重要的五種開發人員技能2024 年成為舞台中心。 ***PS 繼續閱讀直到最後。我有一份獎金給你。*** 這些技能包括新舊但必不可少的技能,例如快速工程、編碼、雲端運算領域、系統設計和Python,這些技能是任何軟體開發人員都需要的基本技能。 無論您是想要提升自己的經驗豐富的開發人員,還是想要提升自己形象的中級開發人員,這些技能都一定會對您有所幫助。 2024 年軟體工程師應該學習的 5 項技能 ---------------------- 在不斷發展的技術領域,對於尋求在 2024 年及以後蓬勃發展的開發人員來說,保持領先地位至關重要。 當我們探索軟體開發的動態領域時,某些技能已經成為現代開發人員不可或缺的技能,這就是您將在本文中學到的內容。 讓我們深入探討預計在 2024 年產生重大影響的前五項開發人員技能。 ### 1. 系統設計 到 2024 年,開發人員需要超越傳統的程式設計實踐,擁抱現代系統設計原則。這涉及了解分散式系統、微服務架構以及設計可擴展和彈性的應用程式。 能夠應對系統設計複雜性的開發人員能夠更好地建立強大的解決方案,以滿足快速發展的技術環境的需求。 如果您想深入學習系統設計,那麼您也可以查看[**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/xd9nfio7kl57gyevndql.jpg)](https://bit.ly/3pMiO8g) 如果您需要更多資源,那麼這裡有[系統設計書籍](https://www.linkedin.com/pulse/8-best-system-design-books-programmers-developers-soma-sharma/)、 [課程](https://www.linkedin.com/pulse/10-best-system-design-courses-beginners-experienced-2023-soma-sharma/)和[網站](https://javarevisited.blogspot.com/2022/08/top-7-websites-to-learn-system-design.html)的列表,供您在 2024 年學習和掌握軟體設計和架構。 --- 2. 快速工程 ------- 在這個人工智慧工具的時代,軟體開發並非一成不變,越來越多的人工智慧工具來幫助您進行編碼、除錯和測試,但您需要及時的工程設計才能有效地利用這些工具。 換句話說,快速工程已成為旨在快速交付高品質產品的開發人員的關鍵技能。 這不僅涉及編寫高效、簡潔的程式碼,還涉及採用敏捷方法和工具來簡化整個開發過程。 精通即時工程的開發人員可以快速回應不斷變化的需求,確保他們的軟體在面對不斷變化的市場需求時保持適應性和彈性。 如果您需要資源來學習 ChatGPT 和提示工程,那麼我建議您查看 Coursera 上的[針對開發人員的 ChatGPT 提示工程](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fchatgpt-prompt-engineering-for-developers)課程。 [![最佳即時工程課程](https://miro.medium.com/v2/resize:fit:609/1*gpcsXMiCmBgVIr_I7RFYGg.jpeg)](https://medium.com/javarevisited/top-5-chatgpt-online-courses-for-2023-e6fc706cc483) 如果您需要更多選項,那麼您也可以查看這些[ChatGPT 和 Prompt Engineering 課程](https://javinpaul.medium.com/top-10-udemy-courses-to-learn-artificial-intelligence-in-2023-85a10ef473ca)以了解更多資訊。 --- 3. 編碼 ----- 雖然編碼似乎是一項顯而易見的技能,但其重要性怎麼強調也不為過。掌握編碼不僅限於編寫功能性程式;它涉及編寫乾淨、可維護和可擴展的程式碼。 開發人員應該專注於提高程式語言的熟練程度、理解演算法和實施最佳實踐。 堅實的編碼基礎是任何開發工作成功的基石。而且,如果您需要資源,可以查看[《2024 年完整 JavaScript 課程:建立真實專案》](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%2Fthe-complete-javascript-course%2F)作為開始。 [![學習 JavaScript 編碼的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aesrzc6ogw58ktw6nxax.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%2Fthe-complete-javascript-course%2F) 如果您需要更多選擇,您也可以查看這些[**程式設計和程式設計課程**](https://medium.com/javarevisited/7-best-coding-course-to-learn-programming-with-zero-experience-in-2020-52f7d0d9cb80) --- 4.雲端運算 ------ 雲端運算已經從一個流行詞變成了開發人員的基本技能。隨著對雲端服務的依賴日益增加,開發人員必須精通在雲端環境中部署、管理和最佳化應用程式。 AWS、Azure 和 Google Cloud 等平台是現代開發不可或缺的一部分,精通雲端運算的開發人員可以建立可擴展且經濟高效的解決方案。 而且,如果您需要資源,可以查看這些文章,您可以在其中找到強烈建議的[**資源來學習雲端運算**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) [![學習AWS的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4mboj5cv4fufo8om7v0.jpeg)](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) 而且,如果您需要更多選擇,還可以參考這篇文章,您可以在 Coursera 上找到強烈推薦的[AWS 基礎專業課程](https://medium.com/javarevisited/top-10-courses-to-learn-amazon-web-services-aws-cloud-in-2020-best-and-free-317f10d7c21d)。該程式是AWS自己建立的。 --- ### 5.Python [Python](https://www.python.org/)繼續維護其作為多功能且強大的程式語言的主導地位。從 Web 開發到資料科學、機器學習和人工智慧,Python 始終處於創新的前沿。 2024 年的開發人員應該投資掌握 Python,因為它不僅有助於快速開發,而且還提供了通往塑造產業未來的眾多尖端技術的入口網站。 如果你想在 2024 年學習並掌握 Python,你可以從 Python 課程[100 Days of Code: The Complete Python Pro Bootcamp for 2024 開始](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F),我現在也用它來學習 Python。 [![學習Python的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5wlgc9kzsa03o0agoz3.png)](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F) 如果您需要更多資源,您也可以查看這些[Python 書籍](https://javarevisited.blogspot.com/2019/07/top-5-books-to-learn-python-in-2019.html)、 [課程](https://betterprogramming.pub/top-5-courses-to-learn-python-in-2018-best-of-lot-26644a99e7ec)和[網站](https://medium.com/javarevisited/10-free-python-tutorials-and-courses-from-google-microsoft-and-coursera-for-beginners-96b9ad20b4e6)來深入學習 Python。 這就是**您在 2024 年可以學習的 5 項最重要的開發人員技能**。總之,2024 年頂尖開發人員技能反映了業界對敏捷性、適應性和卓越技術的需求。 無論您是經驗豐富的開發人員還是剛開始編碼之旅,磨練這些技能無疑將使您成為不斷發展的軟體開發世界中的寶貴資產。 迎接挑戰,保持好奇心,踏上持續學習之旅,在 2024 年及以後的動態格局中蓬勃發展。 ### 獎金 正如所承諾的,這是給您的獎勵,一本免費的書,您可以閱讀它來學習分散式系統設計,您可以下載免費的 PDF 或在 Microsoft 上在線閱讀 --- [https://info. microsoft.com/rs/ 157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf) ![學習分散式系統設計的免費書籍](https://miro.medium.com/v2/resize:fit:276/0*AwK4rZgpbC15wA_b.png) 請在評論中告訴我您 2024 年將學習哪些技能?我總是渴望學習可以提升我作為軟體開發人員的形象的技能。 謝謝 --- 原文出處:https://dev.to/somadevtoo/5-skills-programmers-and-developers-should-learn-in-2024-3bmp

被開除的心路歷程

![射擊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aro2mn9dgxz28sc68di5.jpg) 不久前,我從高級開發人員的職位被解雇了,在此之前我從未被解僱過,無論我走到哪裡,我一直都是中等到頂級的表現,並且一直受到同事的喜愛,但這裡的情況卻大不相同。 我當時在哪裡 ------ 我離開了以前的工作,因為他們遇到了財務問題,而且我已經在那裡工作了一段時間,覺得自己的角色已經變得陳舊,我是高級開發人員和團隊負責人的混合體,我的團隊到最後只剩下我了。 我變得沒有動力,我的團隊不知疲倦地工作的公司主要專案之一被取消了。由於公司必須轉型,一年多來的工作實質上都被丟進了垃圾箱。 所以我開始尋找另一份工作,我不想要另一個發展職位,我想要更多的挑戰,我想要擴展自己。我看到一家顧問公司正在尋找一位開發人員,希望能夠從事一些很酷的專案。我申請了,通過了他們的測試,通過了面試,準備嘗試新的東西。 ![風暴](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymelx2tsgdr6mlucvmur.jpg) 走進暴風雨 ----- 在我加入之前,我參加了這家公司的夏季聚會,沒有任何危險信號,人們看起來很高興,業主看起來也很好。 我拿到了筆記型電腦和一個漂亮的迎賓禮盒,我真的很興奮,準備重新振作起來,抓住這個機會。 我做了正常的人力資源工作,在第一天設定了我的環境,然後被告知我應該繼續的專案尚未獲得批准。被告知開始關注我的認證,並被告知專案何時準備就緒。 突然接到一位業主的電話,說有一個前端專案需要資源來加速進度。技術堆疊有點超出了我的舒適區,但想要給人留下深刻的印象並表明我相當多才多藝,就像確信我能做到一樣,我解釋說我需要加快使用所使用的技術堆疊的速度,並獲得了大約一半的時間閱讀我需要的內容的一天。 烏雲密佈 --- 我遇到了該專案的首席開發人員,雖然他有點友好,但他似乎對我沒有技術堆疊經驗感到相當不高興,但他給我分配了一些任務,然後讓我去做,直到…一個小時後,他打電話給我,問我過得怎麼樣。告訴他,努力讓專案在本地執行,他和我一起完成了編譯和執行,有一些環和資料庫條目讓我執行。 任務本身很簡單,但我無法弄清楚所使用的編碼風格和模式。事後看來,這個計畫的一些決定有點值得懷疑。 我每兩個小時就會接到電話詢問進度,並會收到評論,例如你們進展緩慢,我們落後了,然後很快就保證我們會到達目標。很快我就從「我可以征服任何事情」變成了「也許我作為開發人員很糟糕」。 看起來要開始下雨了 --------- 我確實沒有交到任何朋友,也沒有與這家公司的人建立任何密切的聯繫。我感到非常孤獨,從派對生活變成一個非常內向和保守的人,這真是令人震驚。我還沒有完全從這件事中恢復過來,我現在還是比較安靜,不會說太多話。 這種情況又持續了兩週,一直對我進行微觀管理的開發人員需要休假,並給了我一週的任務。 他完成了有問題的任務,我們給了他們估計,此時我開始變得有點矛盾,我是否能夠完成我的工作。 這些任務在紙上很簡單,但實際上我花了很多時間嘗試瀏覽程式碼庫。有時我會分心,看太多 YouTube 影片,很快就會失去注意力。我不再關心,此時,開始找工作,解釋我覺得我在這個角色上犯了錯。 ![噢,雷鳴般的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l661a91r5htrz4ntiqy6.jpg) 現在雷聲大作 ------ 另一位開發人員度假回來後,他似乎對我沒有完成所有任務感到憤怒,我確實為我設法完成的任務提出了 PR,但他的半令人放心的台詞回來了“我們會完成它”。 一天快結束時,我收到了人力資源部門發來的一封不祥的電子郵件,告訴我客戶不滿意,我已經完成了對該專案所做的所有工作的審核。 我完成了審計並回信說,我對客戶沒有向我提出這個問題感到失望,回想起來,這是一個非常糟糕的主意。下一分鐘我就收到了隔天早上召開人力資源會議的請求。 雷擊 -- 在人力資源電話中,很快就告訴我要被解僱,我知道為什麼,我沒有費心去抗爭或爭論,我接受了它,現在接受了我新發現的失業。 在那之後的幾天裡,我感到很生氣,這表明我對面試官失去了冷靜,對這個世界普遍感到不安。我給了自己幾天悶悶不樂的時間,然後重新上馬並找到了一家更好的諮詢公司,儘管我的角色不太注重開發人員。 反思 -- 我寫這篇文章的原因是,被解僱是可以的,是的,這很可怕,而且尋找新角色的不確定性,特別是在當今的市場上,是一種可怕的感覺,但正如偉大的首席開發人員會說「我們會到達那裡」。 反思這一點,我需要休息一下,我以前的角色到這個可怕的角色是如此充實,我經歷了一些重大的生活事件和一些普遍困難的時期,去年,我搬了家,我的兒子出生並換了工作。我注定會崩潰,我的通知期很長,我應該在角色之間休息一些時間。 我還認為我應該從開發中休息一下,我覺得我在這個階段確實失去了對開發的熱情,而進入我現在所擔任的角色幫助我通過遠離開發一步來重新激發了我對開發的熱情。 我不應該那麼急於接受任何專案,我應該直截了當地說我不認為我可以勝任這個角色,請為我找到另一個專案,也應該儘早標記我不認為我可以勝任這個角色工作。 我應該更以客戶為中心,如今,只需與客戶交談就可以幫助我克服一些障礙。 對於首席開發人員,我理解他們承受的壓力,我不會因為我的失敗而抨擊他們或責備他們。然而,作為現在的團隊領導,我確保自己保持專業,鼓勵我的團隊成員,並確保回饋是建設性的,而不是一系列帶有虛假保證的挖掘。 歸根結底,被解僱並不是你生命的終結,甚至不是你職業生涯的終結,你可以重新振作起來,並將其作為一種學習經驗。 ![反思](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6baqjwghqu6svzrmkn6.jpg) --- 原文出處:https://dev.to/darkliahos/so-i-got-fired-3ko5

掌握 React 中的 S.O.L.I.D 原則:簡單範例和最佳實踐

### 單一職責原則(SRP) **一個元件應該只有一個改變的理由,這意味著它應該只有一項工作。** #### 範例:使用者設定檔元件 **應該這樣:** - 將職責分解為更小的功能元件。 ``` // UserProfile.js const UserProfile = ({ user }) => { return ( <div> <UserAvatar user={user} /> <UserInfo user={user} /> </div> ); }; // UserAvatar.js const UserAvatar = ({ user }) => { return <img src={user.avatarUrl} alt={`${user.name}'s avatar`} />; }; // UserInfo.js const UserInfo = ({ user }) => { return ( <div> <h1>{user.name}</h1> <p>{user.bio}</p> </div> ); }; ``` **不要這樣:** - 將顯示、資料取得和業務邏輯組合在一個元件中。 ``` // IncorrectUserProfile.js const IncorrectUserProfile = ({ user }) => { // Fetching data, handling business logic and displaying all in one const handleEdit = () => { console.log("Edit user"); }; return ( <div> <img src={user.avatarUrl} alt={`${user.name}'s avatar`} /> <h1>{user.name}</h1> <p>{user.bio}</p> <button onClick={handleEdit}>Edit User</button> </div> ); }; ``` ### 開閉原理 (OCP) **軟體實體應該對擴充開放,但對修改關閉。** #### 範例:主題按鈕 **應該這樣:** - 使用 props 來擴充元件功能,而無需修改原始元件。 ``` // Button.js const Button = ({ onClick, children, style }) => { return ( <button onClick={onClick} style={style}> {children} </button> ); }; // Usage const PrimaryButton = (props) => { const primaryStyle = { backgroundColor: 'blue', color: 'white' }; return <Button {...props} style={primaryStyle} />; }; ``` **不要這樣:** - 修改原有元件程式碼,直接加入新的樣式或行為。 ``` // IncorrectButton.js // Modifying the original Button component directly for a specific style const Button = ({ onClick, children, primary }) => { const style = primary ? { backgroundColor: 'blue', color: 'white' } : null; return ( <button onClick={onClick} style={style}> {children} </button> ); }; ``` ### 里氏替換原理 (LSP) **超類別的物件可以用其子類別的物件替換,而不會破壞應用程式。** #### 範例:基本按鈕和圖示按鈕 **應該這樣:** - 確保子類元件可以無縫替換超類元件。 ``` // BasicButton.js const BasicButton = ({ onClick, children }) => { return <button onClick={onClick}>{children}</button>; }; // IconButton.js const IconButton = ({ onClick, icon, children }) => { return ( <button onClick={onClick}> <img src={icon} alt="icon" /> {children} </button> ); }; ``` **不要這樣:** - 引入特定於子類別的屬性,這些屬性在替換時會破壞功能。 ``` // IncorrectIconButton.js // This button expects an icon and does not handle the absence of one, breaking when used as a BasicButton const IncorrectIconButton = ({ onClick, icon }) => { if (!icon) { throw new Error("Icon is required"); } return ( <button onClick={onClick}> <img src={icon} alt="icon" /> </button> ); }; ``` ### 介面隔離原則(ISP) **任何客戶端都不應該被迫依賴它不使用的方法。** #### 範例:文字元件 **應該這樣:** - 針對不同的用途提供特定的介面。 ``` // Text.js const Text = ({ type, children }) => { switch (type) { case 'header': return <h1>{children}</h1>; case 'title': return <h2>{children}</h2>; default: return <p>{children}</p>; } }; ``` **不要這樣:** - 用不必要的屬性使元件變得混亂。 ``` // IncorrectText.js // This component expects multiple unrelated props, cluttering the interface const IncorrectText = ({ type, children, onClick, isLoggedIn }) => { if (isLoggedIn && onClick) { return <a href="#" onClick={onClick}>{children}</a>; } return type === 'header' ? <h1>{children}</h1> : <p>{children}</p>; }; ``` ### 依賴倒置原則(DIP) **高層模組不應該依賴低層模組。兩者都應該依賴抽象。** #### 範例:資料獲取 **應該這樣:** - 使用鉤子或類似的模式來抽象資料獲取 和狀態管理。 ``` // useUserData.js (Abstraction) const useUserData = (userId) => { const [user, setUser] = useState(null); useEffect(() => { fetchData(userId).then(setUser); }, [userId]); return user; }; // UserProfile.js const UserProfile = ({ userId }) => { const user = useUserData(userId); if (!user) return <p>Loading...</p>; return <div><h1>{user.name}</h1></div>; }; ``` **不要這樣:** - 在元件內部硬編碼資料取得。 ``` // IncorrectUserProfile.js const IncorrectUserProfile = ({ userId }) => { const [user, setUser] = useState(null); useEffect(() => { // Fetching data directly inside the component fetch(`https://api.example.com/users/${userId}`) .then(response => response.json()) .then(setUser); }, [userId]); if (!user) return <p>Loading...</p>; return <div><h1>{user.name}</h1></div>; }; ``` --- 原文出處:https://dev.to/drruvari/mastering-solid-principles-in-react-easy-examples-and-best-practices-142b

我從亞馬遜面試的 coding 測驗中學到了什麼

最近,我受邀參加亞馬遜的線上編碼評估。由於我與目前的工作簽訂了一段時間的合同,我認為嘗試一下可能會很有趣,沒有壓力。以下是我從徹底崩潰和燃燒的編碼評估中學到的東西: \#1.先解決問題 --------- 我花了很多時間來驗證論點,儘管這可能是您在現實生活中所做的事情,但這對於編碼評估來說並不是一個好主意。有時,公司會拋出邊緣情況 - 也許您的`List`為空,或者為`null` - 但通常是在他們驗證您的解決方案對有效輸入的行為之後。 \#2.了解基礎知識 ---------- 您不想在計時器倒數時浪費時間谷歌搜尋如何深度複製陣列。了解如何使用所有標準資料結構並練習、練習、再練習。 #3。仔細閱讀提示 --------- 有時您的提示會出現警告。也許提示希望您返回最佳解決方案(如果存在),但如果您的解決方案低於某個閾值,則根本不返回任何內容。確保您滿足提示的要求。 #4。使用您自己的編輯器 ------------ 線上編碼評估或多或少必須提供某種線上 IDE 來幫助您編譯、偵錯和執行程式。**不要使用它。**它將變得陌生、緩慢,並且可能具有您不想要的特定功能(程式碼完成),或缺少一些您需要的功能(自動庫導入)。 #5。限制時間練習 --------- 這些編碼評估旨在快速進行,但如果您知道自己在做什麼,又不會太快以致您耗盡時間。話雖這麼說,當您完成後,您可能會想返回並清理一些程式碼、優化並加入一些註釋。練習的時間比你應該分配的時間*少*。 有[第三方](https://coderbyte.com/)評估平台,亞馬遜有線上[編碼評估演示](https://www.myamcat.com/start-demo?data=VvSY8gb%2BBAAefK0phJWENBOPoTXDc8na4fhRROtwuZ9MIbQ7gXB2pLYyDf%2B4UUy3bjNJmcgRqJuzDgML1nQF%2Bg%3D%3D)。我確信其他公司也存在這些,如果有人可以在評論中提供它們。 --- 就是這樣!我想如果我遵循了上面我自己的建議,我可能至少能夠及時完成提示。如果你像我一樣是個完美主義者,你需要把它留在門口,以便能夠先制定一個有效的解決方案,然後回去清理它。祝你好運! 如果您喜歡這篇文章,請考慮[為我買杯咖啡](https://ko-fi.com/Z8Z811E9B)來支持我的工作! --- 原文出處:https://dev.to/awwsmm/what-i-learned-from-bombing-an-amazon-coding-assessment-4aom

JavaScript 中的三個點 (...)

> 嘿!我是薩加爾。我喜歡編寫教學和文章來幫助開發人員更好地理解 JavaScript 的魔力。如果您對本文有任何疑問,請發表評論,我會回覆您,或在 Twitter [@sagar\_codes](https://twitter.com/sagar_codes)上找到我。 在這篇文章中,我們將討論 ES6 中引入的一個特性,即展開運算子和剩餘運算子。 🔥 🔥 🔥 我已經成為這三個點的忠實粉絲,它們可能會改變您在 JavaScript 中解決問題的風格。我們可以以兩種不同的方式使用三個點作為擴充運算子和剩餘運算子。 休息參數😴 ----- 使用剩餘參數,我們可以將任意數量的參數收集到一個陣列中,並用它們執行我們想要的操作。引入剩餘參數是為了減少由參數引起的樣板程式碼。 🙌 ``` function myFunc(a, b, ...args) { console.log(a); // 22 console.log(b); // 98 console.log(args); // [43, 3, 26] }; myFunc(22, 98, 43, 3, 26); ``` 在 myFunc 的最後一個參數中,前綴為 …,這將導致所有剩餘參數都放置在 javascript 陣列中。 其餘參數收集所有剩餘參數,因此在最後一個參數之前加入其餘參數是沒有意義的。剩餘參數必須是最後一個形參。 ``` function myFunc(arg1, ...rest, arg2) { // arg2 ? } ``` 其餘參數可以解構(僅限陣列),這意味著它們的資料可以解壓縮為不同的變數。 ``` function myFunc(...[x, y, z]) { return x * y* z; } myFunc(1) // NaN myFunc(1, 2, 3) // 6 myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured) ``` 傳播運算符✨ ------ 擴展運算子用於將可迭代物件(如陣列)的元素擴展到可以容納多個元素的位置。 ``` function myFunc(x, y, ...params) { // used rest operator here console.log(x); console.log(y); console.log(params); } var inputs = ["a", "b", "c", "d", "e", "f"]; myFunc(...inputs); // used spread operator here // "a" // "b" // ["c", "d", "e", "f"] ``` 組合陣列的方法一直有很多種,但展開運算子提供了一種組合陣列的新方法: ``` const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian']; const specialty = ['Meatzza', 'Spicy Mama', 'Margherita']; const pizzas = [...featured, 'veg pizza', ...specialty]; console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita' ``` 透過擴充運算符,現在可以使用比 Object.assign() 更短的語法來淺複製(不包括原型)或合併物件。 ``` var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } var mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 } ``` 👉 結論 ---- 當我們在程式碼中看到三個點(…)時,它要么是剩餘參數,要么是擴展運算子。 有一個簡單的方法可以區分它們: 1. 當三個點 (…) 位於函數參數末尾時,它是“剩餘參數”,並將參數列表的其餘部分收集到一個陣列中。 2. 當三個點 (…) 出現在函數呼叫或類似情況中時,它被稱為“擴展運算符”,並將陣列擴展為列表。 謝謝閱讀。希望您喜歡這篇文章,歡迎按讚、留言或與您的朋友分享這篇文章。 😄 快樂編碼… --- 原文出處:https://dev.to/sagar/three-dots---in-javascript-26ci

成為資深前端開發者需要的 37 個心態

我真的很喜歡 @abbeyperini 的[帖子](https://dev.to/abbeyperini/12-tips-from-a-mid-level-developer-29bk),並決定在擔任軟體開發人員**5 年多**後分享我的技巧。 準備好?讓我們深入探討。 1.掌握基礎知識 ======== 建在搖搖欲墜的土地上的房子🏠,稍有問題就會倒塌。 同樣,如果你沒有紮實的基礎: - 你會很難適應 JavaScript 框架 - 你會陷入第一個不熟悉的問題 - 您無法掌握某些問題之間的共同主題 因此,如果你想提升前端開發人員的水平,首先要掌握**HTML** 、 **CSS**和**JavaScript** 。 --- 2. 了解網路的工作原理 ============ 在過去的幾年裡,前端開發變得更加複雜。 使用了許多工具(*捆綁器*、*轉譯器*等) 如果您不了解網路的工作原理(即「唯一」支援的語言是**HTML** (用於結構)、 **CSS** (用於樣式)和**JavaScript** (用於互動)),您將很難理解為什麼需要有這麼多工具可以在線執行您的程式碼。 ![建築模組](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/miha7y379n9wnemtnhdi.gif) --- 3.熟悉資料結構與演算法 ============ 由於程式設計面試,資料結構和演算法經常受到不好的評價🤦‍♀️。 **然而**,了解關鍵因素及其複雜性至關重要。如果沒有這些知識,您將無法編寫複雜的程式或評估程式碼效率。 以下是需要了解的資料結構/演算法的非詳盡列表: **資料結構:***棧*、*佇列*、*雜湊圖*、*集合*、*圖*等。 **演算法:***動態規劃*、*貪心演算法*、*遞迴*等。 --- 4. 透過實踐而不是閱讀/觀看來學習 ================== 教學會欺騙您,讓您感覺自己正在取得進步。 它們讓你相信你正在學習和進步,但你並沒有前進。真正的學習是透過實踐或教學發生的。 所以,多多練習,避免陷入教學地獄🔥。 --- 5.遇到困難時尋求協助 =========== 你不是一個人。 您附近很可能有高級開發人員,您可以向他們尋求協助。 所以,不要浪費時間去兔子洞裡。您的目標是提供價值,如果您浪費時間解決其他人已經解決的問題,您就無法實現這一目標。 ![請求幫忙](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iksbkr0yvd3gqh4x22d5.png) --- 6.以正確的方式尋求協助 ============ 在尋求幫助之前,請確保您已經做了最低限度的事情。 你應該首先: - 在 Google/Stack Overflow/ChatGPT 上搜尋解決方案 - 了解你的目標以及什麼不起作用 - 記錄所有失敗的嘗試 另外,不要針對同一問題重複尋求協助。當您獲得幫助時,請在某處記下,以免忘記。 --- 7. 不要複製/貼上你不理解的程式碼 ================== 由於多種原因,這非常糟糕: - 您最終可能會得到不安全的程式碼,這些程式碼會暴露令牌等敏感資訊。 - 您將無法輕鬆除錯程式碼。 - 你將無法向你的同事解釋它。 這對 ChatGPT 尤其重要,因為它有時只能提供 80% 的準確答案。 ![困惑的表情符號](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfansm0i6qss45kkcz8a.png) --- 8. 不要盲目採納網路上找到的每一個建議 ==================== 我剛開始的時候就犯了這個錯誤。 我發現有人建議說 React 中的記憶化是邪惡的,所以我停止使用它。 令我尷尬的是,我的程式碼在預生產中崩潰了。 所以,別讓我「老」了。 當您在網路上看到建議時,請先問自己以下問題: - 這個建議適用於我嗎? - 提供建議的人是否與我的情況類似? **TLDR** :運用常識🫠。 --- 9. 懷抱良好的意願:人們希望你成功❤️ ==================== 當你是新人時,人們通常會認為人們正在等待發現你的錯誤並解僱你。 至少,這是我的思想對我低聲說的。 但事實恰恰相反。 當一家公司僱用你時,它非常希望你成功。否則,這就是浪費他們在培訓和入職方面投入的時間和資源。 因此,相信你的公司希望你做得很好,並毫不猶豫地向你的同事尋求支持。 --- 10.完成勝於完美 ========= 追求完美往往會導致以下結果: - 拖延 - 浪費時間 - 過於複雜 - ETC。 因此,目標是在推動更多之前交付/驗證 V0。 ![做完比求完美強](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u146x2ia7stie8eyvwpa.png) --- 11. 始終將任務分解為可管理的任務 ================== 感到不知所措的最簡單方法是什麼? 👉 試圖咬得比你能咀嚼的更多。 始終將專案分解為更小的任務。 這會: - 讓你不會感到不知所措 - 讓您的 PR(拉取請求)更容易審核 - 提供進步感 --- 12. 值得信賴,當你需要幫助時會伸出援手 ===================== 剛開始時,您的首要任務是贏得經理的信任。 當他們想到你時,應該安心。 他們應該相信: - 你在簡單的任務上很可靠 - 必要時您會尋求協助 - 有任何問題你都會溝通 您不想因為成為經理必須持續監控的問題而增加他們的工作量🔎。 --- 13.表現出對工作的熱情 ============ 用熱情可以彌補很多不足🤪。 當你是新人時,要充滿渴望和興奮。 只有經驗豐富的開發人員才能承受缺乏熱情的後果。 沒有人願意不斷地督促某人工作。指導已經夠困難的了;必須激勵某人會使事情變得更具挑戰性。 ![熱情](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmc0s50vm86bam0069nw.png) --- 14. 對學習新事物/工具/方法保持開放態度 ====================== 前端開發不斷發展。 因此,您需要對新技術持開放態度。 不要太拘泥於現有的工具。相反,表現出學習的興趣😋。 --- 15. 掌握你的開發工具🛠️ ============== 想要加快您的開發時間嗎? 掌握你的開發工具: - 您的 IDE(例如 VSCode) - 您的原始碼控制系統(例如 Github) - 您的瀏覽器和檢查器(例如 Chrome 檢查器) - ETC。 ![工具包](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h6zn8k68yghmb0ecffh.png) --- 16. 專注於創造價值 =========== 不要在真空中編寫程式碼。 您編寫的每段程式碼都應該為以下方面提供價值: - 您的客戶 - 你的公司 - 您的利害關係人 - ETC。 您的報酬與您提供的價值掛鉤,而不是與您編寫的程式碼掛鉤。 因此,優先考慮編寫有目的的有效程式碼🥅。 --- 17. 為你的工作辯護:它不會自己說話 =================== 可能是新開發人員最常見的錯誤之一(特別是如果您來自重視謙虛的文化)。 1. 你做了一些了不起的事。 2. 沒有人知道這件事。 👉 那工作並不重要。 因此,透過寫作、演示等方式分享您的作品。 ![為你的工作說話](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t55ep1c3phxgypwchbfh.png) --- 18. 喜歡寫愚蠢的程式碼而不是聰明的程式碼 ====================== 程式碼被閱讀的次數遠多於寫的次數📝。 因此,不要編寫只有您才能理解的聰明程式碼。 **可讀性>效能>聰明。** 您希望您的同事能夠有效率地處理您的程式碼,並在必要時為您提供協助等。 --- 19.你的經理是你最好的盟友 ============== 除非你特別不幸,否則你的經理會支持你的成長📈。 他們通常希望你能夠蓬勃發展,為團隊做出貢獻,並留在公司,而不是在其他地方尋找機會。 因此,請務必招募他們來實現您的目標。 分享你的勝利、挫折(以積極的方式)和挫折,而不是獨自奮鬥。 --- 20.讓你的經理的生活更輕鬆 ============== 這個很簡單,但常被忽略。 您的經理可能有您可以協助解決的問題: - 他們可能需要加入文件但缺乏時間 - 他們的工作量可能龐大,需要支持 - 和更多 這可能是贏得經理支持(升遷、加薪等)的最簡單方法。他們已經意識到這些任務並且可以直接看到它們的影響(至少對他們來說)。 ![最佳老闆杯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz4tz3h7o12oh4x4f0lg.png) --- 21.了解任務背後的大局 ============ 不要成為程式碼猴子🐒。 剛開始時它可能會對您很有幫助。 但要達到下一個級別,您需要了解任務背後的背景: - 為什麼它們有價值 - 為什麼你被分配給他們 - 它們如何適應公司的整體策略 這種理解對於您的職業生涯更上一層樓至關重要。 --- 22. 為團隊做出貢獻(文件、技術講座、演示等) ======================== 這不僅對公司有利,對您也有利。 透過進行演示、共享文件等,您可以展示您的技能並提高團隊的生產力。 始終致力於盡可能提升團隊的表現:這是令人愉快且有益的😊。 ![貢獻](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbmz4r1ucrrqe84mpq6f.png) --- 23. 成為特定領域的“掌門人” ================ 如果我必須提供一個建議,那就是這個。 在職業生涯的初期,探索各個領域是可以的。 但是,要晉升到中/高級級別,請專注於培養某一領域的專業知識。這對於促銷來說比多個領域的平均水平更具吸引力。 因此,我們的目標是培養[T 型](https://www.forbes.com/sites/lisabodell/2020/08/28/futurethink-forecasts-t-shaped-teams-are-the-future-of-work/)技能:在某一領域擁有廣泛的知識和深厚的專業知識。 --- 24. 培養你的溝通技巧 ============ 不幸的是,這是必須的。 溝通對於開發人員來說至關重要。我們經常需要做以下事情: - RFC(徵求意見) - 示範 - 演講 - ETC。 因此,請確保您具有基本的溝通能力。 --- 25. 當你遇到問題時休息一下 =============== 當你深陷一個問題時,很難停下來。 即使已經過去了 5 年多,我仍然在掙扎🥹。 然而,休息後我總是會產生更新鮮的想法。 所以,如果你已經被困太久了,那就離開吧。 ![休息](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96yk7dr61s2sc7rflive.png) --- 26. 發揮你的優勢,而不是劣勢 ================ 不要再浪費時間試圖修復明顯的弱點。 如果您持續花費超過 1 小時才能完成同您級別的其他人在不到 5 分鐘內完成的任務,請避開該任務。 投入更多的精力很可能不會讓你在這方面表現出色。 相反,做必要的事情並專注於最大限度地發揮你的優勢。如果某件事對你來說很自然且有價值,那就多做一點吧🚀。 --- 27. 掌控自己的職涯道路 ============= 沒有人會為你規劃你的職涯。 如果沒有計劃,你就會為別人的計劃而努力。 因此,請確保您為自己想要在 1/2/5 年內實現的目標制定計劃 💪。 --- 28. 與其他開發人員一起交流 =============== 您目前是否患有冒名頂替症候群? 如果是這樣,請花時間與其他開發人員交流。 您很快就會意識到您並不孤單。 與其他開發人員聯繫還有其他好處: - 您可以學習新的技巧/技巧 - 你們可以討論共同的經歷 - 你們可以在工作上互相補充 - ETC。 ![朋友們](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9r46ijzzv99jfdjrssa.png) --- 29. 指導年輕開發人員 ============ 這是冒名頂替症候群的最佳治療方法之一。 一旦你開始指導年輕的開發人員: - 你會發現你知道一些事情 - 您將把自己定位為中/高級開發人員 - ETC。 --- 30.讓你解決的問題多樣化 ============= 如果你不斷地解決同樣的問題,你的進步就會趨於穩定。 確保您正在解決不同的問題,以便您可以: - 比較各種方法 - 開發解決問題的工具包 - ETC。 ![雞蛋放在多個籃子裡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hllqddeurnt0bx03m2md.png) --- 31.尋找導師 ======= 擁有偉大的導師是我職業生涯的亮點。 - 導師了解您的旅程,讓您腳踏實地。 - 他們會指導你避免他們所犯的錯誤。 - ETC。 **如何尋找導師?** 與您互動的更有經驗的開發人員聯繫,提出問題,討論他們的經驗等。 如果您無法聯繫資深開發人員,請與 X 等平台上的個人互動,與他們建立關係,然後聯絡 😉。 --- 32. 致力於 JavaScript 框架並掌握它 ========================= 最好的框架是能夠幫助您最快實現目標的框架。 所以,忽略網路上毫無意義的爭論。 選擇您最熟悉或需要學習的框架。 並掌握它。這就足夠了。 有了紮實的 JavaScript 基礎知識,過渡到另一個框架將會很快。 ![合約](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7p9c7u02uqv5b8fhxew.png) --- 33.不斷思考使用者體驗 ============ 身為前端開發人員,你應該考慮使用者。 即使您有 PM 或設計師,也要確保使用者體驗良好 😌。 - 需要時使用載入狀態 - 在 UI 中傳達進度 - 給用戶回饋 - ETC。 --- 34. 坦然地說“不” =========== 這對我來說是一件艱難的事。 我對每一個專案都感到興奮,並努力拒絕。 但身為開發人員,您經常會收到超出您處理能力的請求。 因此,請優先考慮與您的目標最相符的那些。 --- 35.不斷投資你的技能 =========== 選擇成為前端開發人員,您就致力於從事必須不斷學習的職業。 因此,透過學習新語言、掌握新技術等不斷投資你的技能。 ![技能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2lptuajtkra0p080nnc.png) --- 36. 當面臨太多工作時,減少功能而不是提高程式碼品質。 ============================ 您的應用程式擁有的功能越多越好,對嗎?正確的? 最初,這似乎是正確的,但附加的功能會導致更多的程式碼。更多的程式碼意味著更多的問題(維護、錯誤等)。 因此,當時間緊迫時,應減少功能而不是犧牲程式碼品質。 --- 37. 努力了解你的合作者(設計師、後端開發人員等) ========================== 始終尊重您的合作者(後端開發人員、設計師、產品經理等)。 應用程式開發是團隊的努力。 團隊成員之間的協同越多,環境就會越快樂、越有效🥰。 ![交朋友](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vdbfdepvkkxdug91noo.gif) --- 感謝您閱讀這篇文章🙏。 發表評論 📩 分享小貼士。 並且不要忘記加上“💖🦄🔥”。 如果您喜歡這樣的文章,請加入我的**免費時事**通訊**[FrontendJoy](https://frontendjoy.substack.com/)** 。 如果您想要每日提示,請在[X/Twitter](https://twitter.com/_ndeyefatoudiop)上找到我。 --- 原文出處:https://dev.to/_ndeyefatoudiop/37-tips-from-a-senior-frontend-developer-251b

5 分鐘了解記憶化

記憶化是另一個令人生畏的術語,當你理解它時,它就會變得非常直觀。今天我們就來了解什麼是記憶吧! --- ### 一些筆記 - 我製作了本教學的影片版本![在這裡](https://www.youtube.com/watch?v=6tbUPqnu-Ws)查看一下。 - 如果您喜歡這篇文章,請考慮訂閱我的免費每週[網頁開發電子報](https://buttondown.email/devtuts)! --- 介紹 == 記憶化是許多程式語言中使用的最佳化技術,用於減少冗餘、昂貴的函數呼叫的數量。這是透過根據函數的輸入快取函數的返回值來完成的。在這篇文章中,我們將建立一個次優但希望具有教育意義的 JavaScript 函數記憶體! 首先,需要記憶的昂貴函數 ============ 這是一個供我們記憶的函數。它以非常低效的方式求出數字的平方。 ``` const inefficientSquare = num => { let total = 0; for (let i = 0; i < num; i++) { for (let j = 0; j < num; j++) { total++; } } return total; }; ``` 我們可以使用相同的值來執行這個函數,並且每次都需要一段時間來執行。 ``` const start = new Date(); inefficientSquare(40000); console.log(new Date() - start); // 1278 const start2 = new Date(); inefficientSquare(40000); console.log(new Date() - start2); // 1245 ``` 每次都超過一秒,哎呀! 為我們的 Memoizer 編寫偽程式碼 =================== 在編寫任何程式碼之前,讓我們先透過記憶體進行推理。 - 將對函數的引用作為輸入 - 傳回一個函數(因此可以像平常一樣使用) - 建立某種緩存來保存先前函數呼叫的結果 - 以後任何時候呼叫該函數,都會傳回快取結果(如果存在) - 如果快取的值不存在,則呼叫該函數並將結果儲存在快取中 真實程式碼時間 ====== 這是上述偽程式碼大綱的實作。正如簡介中提到的,這是次優的,您**不應該在生產中使用它**。後面我會解釋為什麼! ``` // Takes a reference to a function const memoize = func => { // Creates a cache of results const results = {}; // Returns a function return (...args) => { // Create a key for results cache const argsKey = JSON.stringify(args); // Only execute func if no cached value if (!results[argsKey]) { // Store function call result in cache results[argsKey] = func(...args); } // Return cached value return results[argsKey]; }; }; ``` 此實作中最次優的部分,以及為什麼我不建議在生產程式碼中使用它,是使用`JSON.stringify`在`results`快取中建立鍵。 `JSON.stringify`的最大問題是它不會序列化某些輸入,例如函數和符號(以及您在 JSON 中找不到的任何內容)。 在昂貴的功能上測試我們的記憶體 =============== 讓我們複製`inefficientSquare`範例,但這次我們將使用 memoizer 來快取結果。 ``` const memoize = func => { const results = {}; return (...args) => { const argsKey = JSON.stringify(args); if (!results[argsKey]) { results[argsKey] = func(...args); } return results[argsKey]; }; }; const inefficientSquare = memoize(num => { let total = 0; for (let i = 0; i < num; i++) { for (let j = 0; j < num; j++) { total++; } } return total; }); const start = new Date(); inefficientSquare(40000); console.log(new Date() - start); // 1251 const start2 = new Date(); inefficientSquare(40000); console.log(new Date() - start2); // 0 ``` 成功!第二次我們使用相同的輸入呼叫`inefficientSquare`時,不需要時間重新計算;我們只是從物件中提取快取的值。 只記住純函數! ======= 記憶化很棒,但只有當你的函數是純函數時才有效。換句話說,如果函數的回傳值不僅僅依賴其輸入,那麼這些輸入的快取值將不會總是正確的。此外,如果您的函數有副作用,記憶體不會複製這些副作用,它只會傳回最終返回的函數值。 結論 == 現在您應該很清楚我們如何以及為什麼使用記憶化!雖然我們的記憶功能不是最佳的,但您可以使用許多第三方函式庫,它們會做得更好。只要確保您記住的函數是純函數即可! --- 原文出處:https://dev.to/nas5w/an-introduction-to-memoization-59o

AI 驅動的前端 UI 元件產生器(Next.js、GPT4、Langchain 和 CopilotKit)

**長話短說** -------- 在本文中,您將了解如何建立由 AI 驅動的前端 UI 元件產生器,該產生器使您能夠透過實作教學產生 Next.js Tailwind CSS UI 元件。 我們將介紹如何: - 使用 Next.js、TypeScript 和 Tailwind CSS 建立 UI 元件產生器 Web 應用程式。 - 使用 CopilotKit 將 AI 功能整合到 UI 元件產生器中。 - 整合嵌入式程式碼編輯器以變更產生的程式碼。 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立 AI 支援的 UI 元件產生器所需的工具: - [Ace 程式碼編輯器](https://ace.c9.io/)- 用 JvaScript 編寫的嵌入式程式碼編輯器,與本機編輯器的功能和效能相符。 - [Langchain](https://www.langchain.com/) - 提供了一個框架,使人工智慧代理能夠搜尋網路並研究任何主題。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,讓您能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一個搜尋引擎,使人工智慧代理能夠在應用程式中進行研究並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app@latest aiuigenerator ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c2uq47mrd3ppxqvr1v7.png) 接下來,安裝 Ace 程式碼編輯器和 Langchain 軟體套件及其相依性。 ``` npm install react-ace @langchain/langgraph ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜!您現在已準備好建立由人工智慧驅動的部落格。 **建構 UI 元件產生器前端** ----------------- 在本節中,我將引導您完成使用靜態內容建立 UI 元件產生器前端的過程,以定義生成器的使用者介面。 首先,請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中,建立兩個名為`Header.tsx`和`CodeTutorial.tsx`的檔案。 在`Header.tsx`檔案中,新增以下程式碼,定義一個名為`Header`的功能元件,該元件將呈現生成器的導覽列。 ``` "use client"; import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> AI-UI-Components-Generator </Link> </div> </nav> </header> </> ); } ``` 在`CodeTutorial.tsx`檔案中,加入以下程式碼,定義一個名為`CodeTutorial`的功能元件,該元件呈現 UI 元件產生器主頁,該首頁將顯示產生的 UI 元件、嵌入式程式碼編輯器和產生的實作教學。 ``` "use client"; import Markdown from "react-markdown"; import { useState } from "react"; import AceEditor from "react-ace"; import React from "react"; export default function CodeTutorial() { const [code, setCode] = useState<string[]>([ `<h1 class="text-red-500">Hello World</h1>`, ]); const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || ""); const [codeTutorial, setCodeTutorial] = useState(``); function onChange(newCode: any) { setCodeToDisplay(newCode); } return ( <> <main className=" min-h-screen px-4"> <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 "> <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto"> <div className="w-full min-h-[60vh] rounded-lg" dangerouslySetInnerHTML={{ __html: codeToDisplay }} /> </div> <AceEditor placeholder="Placeholder Text" mode="html" theme="monokai" name="blah2" className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg" onChange={onChange} fontSize={14} lineHeight={19} showPrintMargin={true} showGutter={true} highlightActiveLine={true} value={codeToDisplay} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: false, showLineNumbers: true, tabSize: 2, }} /> </div> <div className="w-10/12 mx-auto"> <div className="mt-8"> <h1 className="text-white text-center text-xl font-semibold p-6"> Code Tutorial </h1> {codeTutorial ? ( <Markdown className="text-white">{codeTutorial}</Markdown> ) : ( <div className="text-white"> The Code Tutorial Will Appear Here </div> )} </div> </div> </main> </> ); } ``` 接下來,前往`/[root]/src/page.tsx`文件,新增以下程式碼,導入`CodeTutorial`和`Header`元件,並定義名為`Home`的功能元件。 ``` import React from "react"; import Header from "./components/Header"; import CodeTutorial from "./components/CodeTutorial"; export default function Home() { return ( <> <Header /> <CodeTutorial /> </> ); } ``` 接下來,刪除 globals.css 檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } pre { margin: 1rem; padding: 1rem; border-radius: 10px; background-color: black; overflow: auto; } h2, p { padding-bottom: 1rem; padding-top: 1rem; } code { margin-bottom: 2rem; } ``` 最後,在命令列上執行命令`npm run dev` ,然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看 UI 元件產生器前端,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id9z3bizkb2bghbe4bxb.png) **使用 CopilotKit 將 AI 功能整合到元件產生器** --------------------------------- 在本節中,您將學習如何為 UI 元件產生器新增 AI 副駕駛以產生 UI 元件程式碼以及使用 CopilotKit 的實作教學。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,我們將 CopilotKit React 元件加入到部落格前端。 ### **將 CopilotKit 新增至部落格前端** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 前端整合的過程,以方便產生 UI 元件程式碼和實作教學。 首先,使用下面的程式碼片段導入`/[root]/src/app/components/CodeTutorial.tsx`檔案頂部的自訂掛鉤`useMakeCopilotReadable`和`useCopilotAction` 。 ``` import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; ``` 在`CodeTutorial`函數內的狀態變數下方,加入以下程式碼,該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的程式碼。該鉤子使副駕駛可以讀取程式碼。 ``` useMakeCopilotReadable(codeToDisplay); ``` 在上面的程式碼下方,新增以下程式碼,該程式碼使用`useCopilotAction`掛鉤來設定名為`generateCodeAndImplementationTutorial`的操作,該操作將啟用 UI 元件程式碼和實作教學課程的產生。 這個操作接受兩個參數,稱為`code`和`tutorial` ,這兩個參數可以產生 UI 元件程式碼和實作教程。 該操作包含一個處理函數,該函數根據給定的提示產生 UI 元件程式碼和實作教程。 在處理函數內部, `codeToDisplay`狀態會使用新產生的程式碼進行更新,而`codeTutorial`狀態會使用新產生的教學課程進行更新,如下所示。 ``` useCopilotAction( { name: "generateCodeAndImplementationTutorial", description: "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.", parameters: [ { name: "code", type: "string", description: "Code to be generated", required: true, }, { name: "tutorial", type: "string", description: "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.", required: true, }, ], handler: async ({ code, tutorial }) => { setCode((prev) => [...prev, code]); setCodeToDisplay(code); setCodeTutorial(tutorial); }, }, [codeToDisplay, codeTutorial] ); ``` 之後,請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotSidebar`和`CodeTutorial`元件,如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL,而`CopilotSidebar`呈現應用程式內聊天機器人,您可以提示產生 UI 元件程式碼和實作教學。 ``` export default function Home() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotSidebar instructions="Help the user generate code. Ask the user if to generate its tutorial." defaultOpen={true} labels={{ title: "Code & Tutorial Generator", initial: "Hi! 👋 I can help you generate code and its tutorial.", }}> <CodeTutorial /> </CopilotSidebar> </CopilotKit> </> ); } ``` 之後,執行開發伺服器並導航到 http://localhost:3000。您應該會看到應用程式內聊天機器人已整合到 UI 元件產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty4g6tuluhfiqtnnyxvg.png) ### **將 CopilotKit 後端加入博客** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 後端整合的過程,該後端處理來自前端的請求,並提供函數呼叫和各種 LLM 後端(例如 GPT)。 此外,我們將整合一個名為 Tavily 的人工智慧代理,它可以研究網路上的任何主題。 首先,在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" ``` 若要取得 ChatGPT API 金鑰,請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjl2g88iedd1n0qkd3ai.png) 若要取得 Tavilly Search API 金鑰,請導覽至 https://app.tavily.com/home ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00kyux6biskw7xn2wec.png) 之後,轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中,建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中,建立一個名為`research.ts`的檔案。然後導航到[該 Research.ts gist 文件](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c),複製程式碼,並將其新增至**`research.ts`**檔案中 接下來,在`/[root]/src/app/api/copilotkit`資料夾中建立一個名為`route.ts`的檔案。該文件將包含設定後端功能來處理 POST 請求的程式碼。它有條件地包括對給定主題進行研究的“研究”操作。 現在在文件頂部導入以下模組。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit. import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research. import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata. ``` 在上面的程式碼下面,定義一個執行時間環境變數和一個名為`researchAction`的函數,該函數使用下面的程式碼研究某個主題。 ``` // Define a runtime environment variable, indicating the environment where the code is expected to run. export const runtime = "edge"; // Define an annotated function for research. This object includes metadata and an implementation for the function. const researchAction: AnnotatedFunction<any> = { name: "research", // Function name. description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description. argumentAnnotations: [ // Annotations for arguments that the function accepts. { name: "topic", // Argument name. type: "string", // Argument type. description: "The topic to research. 5 characters or longer.", // Argument description. required: true, // Indicates that the argument is required. }, ], implementation: async (topic) => { // The actual function implementation. console.log("Researching topic: ", topic); // Log the research topic. return await researchWithLangGraph(topic); // Call the research function and return its result. }, }; ``` 然後在上面的程式碼下加入下面的程式碼來定義處理POST請求的非同步函數。 ``` // Define an asynchronous function that handles POST requests. export async function POST(req: Request): Promise<Response> { const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions. // Check if a specific environment variable is set, indicating access to certain functionality. if (process.env.TAVILY_API_KEY) { actions.push(researchAction); // Add the research action to the actions array if the condition is true. } // Instantiate CopilotBackend with the actions defined above. const copilotKit = new CopilotBackend({ actions: actions, }); // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter. return copilotKit.response(req, new OpenAIAdapter()); } ``` 如何產生 UI 元件 ---------- 現在轉到您之前整合的應用程式內聊天機器人,並給它一個提示,例如「產生聯絡表單」。 生成完成後,您應該會看到生成的聯絡表單元件及其實作教程,如下所示。您也可以使用嵌入式程式碼編輯器修改產生的程式碼。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43t9oauptomio4cy1gwr.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/297vxxiqti56ydevfmyl.png) 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼: <https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator> --- 原文出處:https://dev.to/the_greatbonnie/ai-powered-frontend-ui-components-generator-nextjs-gpt4-langchain-copilotkit-1hac

推出適用於 AWS 的新 Fullstack TypeScript DX

我們聽到開發人員一次又一次地表達同樣的痛點:很難將應用程式的前端與後端集成,您需要在日常工作負載中解決不斷擴大的技術範圍,並且很難駕馭廣泛的雲端產品。雖然後端即服務產品提供了一個簡單的入口,但它們通常要求開發人員隨著公司規模的擴大而遷移。這就是我們從頭開始重建[AWS Amplify 的](https://aws.amazon.com/amplify/?trk=60cc8d4a-110e-474c-ac1a-69b65329c4ff&sc_channel=el)原因,以直接解決前端開發人員每天在工作中面臨的這些挑戰。 我們非常高興地宣布推出全新的 Amplify 體驗,旨在讓前端開發人員僅使用 TypeScript 即可建立全端、雲端驅動的應用程式。讓我們更深入地了解第二代 Amplify 的樣子! https://www.youtube.com/watch?v=BCXdLx6xHmc 只需幾分鐘即可將您的前端運送到全球 ----------------- 您可以使用 Amplify Hosting 透過幾個快速簡單的步驟部署您的應用程式前端。首先前往 AWS 控制台,選擇您的 Git 供應商,選擇您的儲存庫和分支,更新您想要自訂的任何建置設置,然後「儲存並部署」。幾分鐘後,您的應用程式將在全球部署!您可以使用下列步驟託管使用 Next.js、Nuxt、Astro 和 Vite 等框架建立的靜態或伺服器端渲染應用程式。 ![Amplify 在新控制台 UI 中支援所有 Git 提供者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg7lv7dwbihn1rbwivv3.jpg) 快速從前端到全端 -------- 當您建立新的 Amplify 應用程式時,您將獲得一些為您建立的文件,您可以在其中保存後端程式碼。 ``` ├── amplify/ │ ├── auth/ │ │ └── resource.ts │ ├── data/ │ │ └── resource.ts ``` 在這些檔案中,您可以編寫 TypeScript 程式碼來建立應用程式後端。您可以使用以下程式碼建立資料模型,該程式碼還為您的資料設定授權規則。 ``` // amplify/data/resource.ts import { a, defineData, type ClientSchema } from '@aws-amplify/backend'; // Create a data model with two fields, `content` and `done`. The default authorization mode is apiKey -- meaning anyone authenticated using an API key can create, read, update, and delete todos. const schema = a.schema({ Todo: a.model({ content: a.string(), isDone: a.boolean() }) .authorization(allow => [allow.publicApiKey()]) }); // Used for code completion / highlighting when making requests from frontend export type Schema = ClientSchema<typeof schema>; // defines the data resource to be deployed export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'apiKey', apiKeyAuthorizationMode: { expiresInDays: 30 } } }); ``` 然後,您可以使用 Amplify 用戶端庫與應用程式前端的資料模型進行交互,例如要列出所有待辦事項,您可以編寫如下程式碼: ``` import type { Schema } from "../amplify/data/resource"; import { generateClient } from "aws-amplify/data"; const client = generateClient<Schema>(); const fetchTodos = async () => { const { data: items, errors } = await client.models.Todo.list(); }; ``` Amplify 擁有為許多不同框架和語言編寫的程式庫 - 從適用於行動開發人員的 Swift、Android 和 Flutter 到適用於 Next.js 應用程式的 SSR 功能。 您可以執行類似的身份驗證操作!下面的程式碼定義並配置了一個身分驗證資源,向新使用者發送一封主題行為「Welcome to Amplify 🚀」的驗證電子郵件。 ``` import { defineAuth } from "@aws-amplify/backend" export const auth = defineAuth({ loginWith: { email: { verificationEmailSubject: "Welcome to Amplify 🚀" }, }, }) ``` 然後,您可以使用`withAuthenticator`高階 React 元件建立完整的使用者驗證流程,包括登入和註冊! ``` import { Authenticator } from '@aws-amplify/ui-react' function App() { return ( <Authenticator> <h1>You can't see this until you log in!</h1> </Authenticator> ) } export default App ``` 您可以執行類似的操作來在應用程式中建立無伺服器函數和檔案儲存資源。部署所需要做的就是`git push`您的程式碼! ### 與您的團隊合作,而不是對抗 在本機開發 Amplify 應用程式時,您可以執行沙箱,每次變更後端程式碼時,該沙箱都會自動快速重新部署雲端資源。您團隊中的每個開發人員都將擁有自己的沙箱,因此您在迭代時不會相互覆蓋。 ``` npx ampx sandbox ``` 您也可以為專案中的每個 Git 分支設定部署環境 - 例如`dev` 、 `prod`和`my-new-feature` 。您可以在交付生產之前在隔離環境中測試變更! Amplify 現在建立在 AWS 雲端開發套件 (AWS CDK) 之上,因此您可以連接到 Amplify 本身不支援的服務 - 例如用於 AI/ML 的 Amazon Bedrock! 試試看! ---- 要了解有關 Amplify 的更多訊息,請嘗試我們的[快速入門教程](https://docs.amplify.aws/react/start/quickstart/?trk=c33e0637-74b4-466d-8750-a7d201b6c7a5&sc_channel=el)之一,該教程將指導您完成建立全端 Amplify 應用程式的步驟。 --- 原文出處:https://dev.to/aws/introducing-a-new-fullstack-typescript-dx-for-aws-1ap9

讓我保持高效率的工具

此頁面詳細介紹了我作為開發人員使用的大部分內容。我使用 Mac,因此許多工具都是 macOS 特定的,但清單中也有一些與作業系統無關的工具。 在我們開始之前要提到的一件事是,這些工具可以提高我的工作效率。也許他們不會像他們為我所做的那樣讓你有生產力。我總是說,*使用能讓你最有效率的工具*。 其中一些工具是免費的,但有些是付費的。我個人認為付費的是值得的,但這取決於你和你的錢包。 *注意:我在這裡放置了一些推薦連結。只是想坦率地說明這一點而已。* 編輯 -- 這一切都從編輯器開始。 [Visual Studio Code](https://code.visualstudio.com/) (VS Code) 是我的首選編輯器。我使用[Insider 版本的](https://code.visualstudio.com/insiders/)時間最長,但有些擴充功能會嘗試登入並重定向到 VS Code 普通版,所以我決定回到它。也就是說,VS Code Insider 非常穩定。 我很長時間以來都是 Dank Mono 的忠實粉絲,但 GitHub 今年發布了一堆等寬字體,我一直很喜歡[Monaspace Krypton](https://monaspace.githubnext.com/) 。 對於主題,它有所不同。我最近一直在使用輕現代預設主題,因為我發現它更適合[我的直播](https://nickyt.live),但我也是[休士頓](https://marketplace.visualstudio.com/items?itemName=astro-build.houston)和[堡壘之夜](https://marketplace.visualstudio.com/items?itemName=sdras.fortnite-vscode-theme)主題的粉絲。 [![當我告訴他們我在編輯器中使用深色主題。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52lbfjxugvqsj017c5e5.png)](https://x.com/nickytonline/status/1787621116636221727) 雖然我安裝了[iTerm](https://iterm2.com/) ,這是一個很棒的 macOS 終端,但老實說,99.999% 的時間我都住在 VS Code 終端中。 ### 編輯器設定 如果您對我的編輯器設定感興趣,[這是我目前的設定](https://gist.github.com/nickytonline/e6ceb17a1fb7b6438c3f09ff800748da)。 更有趣的事情之一是您可以更改標題欄,因此我加入了一些表情符號。 ``` "window.title": "🦙⚡🫡 – ${activeEditorShort}${separator}${rootName} – 🫡⚡🦙", ``` ![一隻羊駝漂浮在彩虹中](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbzQ1NzBodWZuam84b2FlYmV1a3o5cHRhYzZqcGp6bHVoYWNra2ZsZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/tZB5MG7OOPuZIAcPZZ/giphy.gif) 我發現超級方便的另一個設定是`terminal.integrated.autoReplies` 。我從來不想獲取我的 .env 文件,這可以完美地處理它。 ``` "terminal.integrated.autoReplies": { "dotenv: found '.env' file. Source it? ([Y]es/[n]o/[a]lways/n[e]ver)": "e\r" }, ``` ### 也許澤德很快? 我確實想向[Zed](https://zed.dev/)編輯大聲喊叫。我偶爾會使用它,而且速度超級快,但它還沒有成為我的主要編輯器。我認為一旦擴展生態系統進一步發展,我就會轉向這個。也許在明年。我們拭目以待。 😎 瀏覽器擴充 ----- 我並不是每天都使用所有這些,但這些是我首選的瀏覽器擴充功能。 - [精緻的 GitHub](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf) - GitHub 上的類固醇 - [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en) - 一個很棒的前端工具(這對我來說是新工具)(僅適用於基於 Chromium 的瀏覽器) - [React 開發者工具](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)- 因為 React - [Preact DevTools](https://preactjs.github.io/preact-devtools/) - 因為 Preact - [Axe](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) - 用於網路可存取性測試 - [WAVE](https://wave.webaim.org/extension/) - 用於網路可存取性測試 - [HTTPS 無所不在](https://www.eff.org/https-everywhere) - [優布洛克](https://ublock.org/) - [LanguageTool](https://languagetool.org) - 文法和拼字檢查工具 - [Pocket](https://getpocket.com/) - 用於為要閱讀的內容加入書籤 - [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc) - JSON 有效負載的美化視圖 - [調整新 Twitter](https://github.com/insin/tweak-new-twitter/) - 消除 Twitter 使用者介面中的大量噪音 - [a11y Twitter](https://github.com/nickytonline/a11y-twitter) - 對如何使用 Twitter 進行小幅更改,以方便的方式推廣推文。 桌面應用程式 ------ 這些是我每天使用的大部分桌面應用程式。讓我們從一些通用的開始。 ### 我每天做的常見事情的通用工具 [Arc 瀏覽器](https://arc.net/gift/93e342bc)是一款基於 Chromium 的瀏覽器,在我看來,它解決了我在使用任何其他瀏覽器時遇到的大量使用者體驗 (UX) 問題。垂直選項卡、命令面板和自動畫中畫影片等等。 我在頂部選單列圖示上使用[Vanilla 的](https://matthewpalmer.net/vanilla/)時間最長,但當我拿到帶有瀏海的 MacBook Pro 後,它就不太好用了。從那以後,我開始使用[Bartender](https://www.macbartender.com)來管理我的選單列。 macOS 上的表情符號選擇器並不是那麼好,但[Rocket](https://matthewpalmer.net/rocket/)讓加入表情符號變得如此簡單。我無法告訴你我一天使用它多少次。 [Raycast](https://raycast.com)是我首選的 macOS 聚光燈替代品。這就像類固醇的聚光燈。我之前使用過[Alfred](https://www.alfredapp.com/) ,這是另一個出色的 Spotlight 替代品,但由於某種原因 Raycast 越來越吸引我了。我也用它來進行視窗管理。 對於那些坐在電腦前的夜晚, [f.lux](https://justgetflux.com/)是必須的。正如一些智者所說:「善待你的眼球」。 macOS 的[Nightshift](https://support.apple.com/en-ca/102191)還可以,但 f.lux 卻破壞了它。 對於管理會議, [Dato](https://sindresorhus.com/dato)是一款更好的 macOS 約會應用程式。在網址列中顯示多個時區非常有用。我有當地時間和 UTC。我還將它用於即將舉行的會議和活動。以前我使用的是[Meeter](https://trymeeter.com) ,它對此非常有用,但現在我需要的應用程式少了一個。 我幾乎每天都會截取螢幕截圖或錄製短影片, [Cleanshot X](https://cleanshot.com/)非常適合此操作。 ### Git 工具 我的大部分「git」工作都是在命令列上進行的,但有時我需要圖形使用者介面(GUI)來真正了解正在發生的事情。當我需要它時,我會伸手去拿[Fork](https://git-fork.com/) 。 ![Cassidy 示範擠壓、變基和合併](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExd3hscnE3bjlucm93aDJ2YjF1cjNkemQzNWcwc28yY2g4eG8yZjA1eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/zQOmyYc8TXzSBfrTFb/giphy.gif) 向 Cassidy (@cassidoo) 的精彩 GIF 致敬! 如果你使用 Git(我想你們大多數人都使用 Git), [那麼簽署你的提交](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits)就非常重要。 [GPG Suite](https://gpgtools.org/)讓設定變得簡單。 ### 前端工具 我做了很多建立使用者介面 (UI) 的工作,這些都是這類工作不可或缺的工具。 [xScope](https://xscope.app)是一個非常棒的前端開發工具組。標尺、指南等 當我需要與設計師協調、查看設計或提取一些資源時, [Figma](https://www.figma.com/)就是我居住的地方。 我以前聽說過[Polypane](https://polypane.app/) ,我想幾年前我可能已經嘗試過它,但現在,它是前端的必備品。它可以幫助您建立具有各種優點的響應靈敏、易於存取的應用程式。對此感到好奇嗎?今年早些時候,我在一次直播中與 Polypane 的創作者 Kilian Valkhof (@kilianvalkhof) 進行了交流。 https://www.youtube.com/watch?v=fsIhghVlHJE 對於顏色對比問題,TPGi 的[顏色對比分析儀](https://www.tpgi.com/color-contrast-checker/)是頂級的。我強烈推薦它。感謝 Todd Libby (@colabottles) 去年向我推薦了這個。 ### 我使用的其他桌面應用程式 - [Cloudflare Warp](https://blog.cloudflare.com/1111-warp-better-vpn/) - 更快的網路和一些 VPN 優點 - [Plash](https://apps.apple.com/us/app/plash/id1494023538) - 適用於 Mac 的互動式桌面背景(一個或多個網頁) - [CleanMyMac X](https://macpaw.com/cleanmymac) - 一套實用程序,可讓您的 Mac 保持最佳狀態。 - [Starship](https://starship.rs/) - 跨 shell 提示符 直播軟體 ---- 我確信有些擁有更多觀眾的主播擁有更好的設置,但這就是我的工作方式。 我使用[Restream.io](https://restream.io/join/zZ8Wr)串流傳輸到多個平台,目前包括 Twitch、YouTube、X/Twitter 和 LinkedIn。 [OBS](https://obsproject.com/download)被很多人使用,包括我自己。這是一個很棒的開源軟體。我使用它來進行串流傳輸,而不是 Restream Studio 或 Streamyard 等類似工具,因為我有自訂疊加層和其他一些自訂功能。 https://github.com/obsproject/obs-studio [Krisp](https://krisp.ai/)在過濾通話和串流中不需要的噪音方面表現出色。在直播時告別背景的消防車。 🤣 我將[Loopback](https://rogueamoeba.com/loopback/)用於虛擬音訊來源。這非常有用,因為我建立了一個音頻源,即我的麥克風和客人的音頻,並將其視為一個輸入源。我使用這個音訊來源作為即時字幕的音訊來源。 我沒有用於串流媒體的精美相機。我曾經使用我的羅技網路攝像頭,這很好,但當我終於得到一部像樣的 iPhone 時,我覺得它的相機太棒了!所以我決定用它來進行直播。 [Camo](https://reincubate.com/camo/)使這成為可能,並且它有很多細節,如縮放、水印、濾鏡等。 ### 直播嘉賓工具 在很長一段時間裡,我都不明白人們是如何把嘉賓帶上直播的。在我從事串流媒體的早期,我曾經引入完整的 Discord 螢幕並在我的直播中分享。雖然這有效,但並不理想。我也嘗試了類似的 Zoom,然後我也開始在螢幕上裁剪 Zoom 的部分內容,但同樣不理想。 最終,我發現了[vdo.ninja](https://vdo.ninja/) 。 TLDR 是,它使用點對點技術將遠端攝影機引入 OBS 或其他工作室軟體。 https://github.com/steveseguin/vdo.ninja 這是一個很棒的專案,我強烈推薦它。如果您的客人有 Twitch 帳戶,另一個類似的軟體是 Twitch 的[Stream Together](https://help.twitch.tv/s/article/stream-together-host-guide?language=en_US) 。我也用這個,取決於客人。 命令列介面 (CLI) 工具 -------------- 我沒有很多 CLI 工具,但以下是一些我常用的工具: - [Homebrew](https://brew.sh) - macOS(或 Linux)缺少的套件管理器 - [GitHub CLI](https://github.com/cli/cli) - 命令列上的 GitHub。非常適合建立 PR 等。 https://dev.to/opensauced/boost-productivity-with-the-github-cli-2mne - [nvm](https://github.com/nvm-sh/nvm) - 節點版本管理器 - [cloudflared](https://github.com/cloudflare/cloudflared) - 透過安全隧道將本地伺服器公開到公共網路 如果您對我的設定(例如硬體和辦公室設定)的重置或我在旅途中攜帶的物品感到好奇,請隨時查看[我的使用頁面](https://nickyt.co/uses)。 直到下一篇! --- 原文出處:https://dev.to/nickytonline/tools-that-keep-me-productive-1no5

掌握關聯式資料庫設計:綜合指南

介紹 -- 在當今資料驅動的世界中,有效儲存和管理資訊對於各種規模的企業和組織都至關重要。關聯式資料庫已成為以結構化和可擴展的方式組織和操作資料的強大解決方案。在這篇文章中,我們將探討關聯式資料庫的基礎知識、它們的管理系統以及支援有效資料庫設計的原則。 --- 什麼是資料庫? ------- 資料庫是資料的結構化集合,其組織和儲存方式有利於高效檢索、操作和管理。將其視為數位文件櫃,其中不是實體資料夾和文件,而是整齊排列的表格和記錄,以便於存取。 什麼是關係資料庫? --------- 關聯式資料庫是一種將資料組織成具有行(記錄)和列(欄位)的表(關係)的資料庫。這些表透過關係互連,允許以各種方式存取和組合資料。想像一下電子表格的集合,每個電子表格代表資料的不同方面,但能夠無縫連結和組合它們之間的資訊。 關係型資料庫管理系統 ---------- 關聯式資料庫管理系統 (RDBMS) 是一種軟體應用程式,旨在建立、管理關聯式資料庫並與之互動。它提供了一個用於在資料庫中儲存、檢索和操作資料的結構化框架。 RDBMS 的一些熱門範例包括 MySQL、PostgreSQL、Oracle 和 Microsoft SQL Server。 --- SQL簡介 ----- SQL(結構化查詢語言)是用於與關聯式資料庫互動的標準程式語言。它允許您建立、讀取、更新和刪除資料庫中的資料,以及定義和修改資料庫結構本身。 SQL 就像一種通用語言,可讓您與不同的 RDBMS 平台進行通訊。 命名約定 ---- 在 SQL 中,遵循一致的命名約定對於清晰度和可維護性至關重要。這是一個例子: ``` -- Good naming conventions CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(100), last_name VARCHAR(100), email VARCHAR(100) ); ``` 什麼是資料庫設計? --------- 資料庫設計是建立用於儲存和管理資料庫中的資料的高效且有組織的結構的過程。它涉及定義表、列、關係和約束,以確保資料完整性、最小化冗餘並優化效能。正確的資料庫設計是建立健全且可擴展的應用程式的基礎。 ![資料庫設計形象](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de0l7km0yufdp2ssak3s.png) 資料的完整性 ------ 資料完整性是指資料庫中儲存的資料的準確性、一致性和可靠性。它確保資料遵循特定的規則和約束,防止錯誤和不一致。資料完整性分為三種: 1. **實體完整性**:確保表中的每一行都可以透過主鍵唯一標識,且主鍵不能有空值。 2. **參照完整性**:透過確保一個表中的外鍵值與另一表中的主鍵值相符來維護表之間的關係。 3. **域完整性**:透過限制可儲存的資料類型、格式和值範圍,強制給定列輸入有效的條目。 ``` -- Example: Enforcing data integrity CREATE TABLE orders ( order_id INT PRIMARY KEY, -- Entity integrity customer_id INT FOREIGN KEY REFERENCES customers(customer_id), -- Referential integrity order_date DATE NOT NULL, -- Domain integrity total_amount DECIMAL(10, 2) CHECK (total_amount >= 0) -- Domain integrity ); ``` 資料庫術語 ----- - **表**:按行和列組織的相關資料的集合。 - **行**:表中的單一實例或條目(也稱為記錄或元組)。 - **列**:表中資料的特定特徵或屬性(也稱為欄位或屬性)。 - **主鍵**:唯一標識表中每一行的列或列組合。 - **外鍵**:引用另一個表的主鍵的列或列的組合,在兩個表之間建立關係。 - **連接**:根據相關列組合兩個或多個表中的行的操作。 - **索引**:一種資料結構,透過建立表格中資料的排序表示來提高資料檢索操作的效能。 - **視圖**:從一個或多個基礎表動態產生的虛擬表。 - **預存程序**:預先編譯的 SQL 語句集合,可以作為單一單元執行。 - **觸發器**:特殊類型的預存程序,當表中發生特定事件(例如 INSERT、UPDATE 或 DELETE 語句)時會自動執行。 原子值 --- 在資料庫設計中,儲存原子值非常重要,這意味著儲存無法進一步劃分的最小資訊片段。這項原則有助於保持資料完整性並避免冗餘。 例如,與其將客戶的全名儲存在單一欄位中,不如將其分成名字和姓氏欄位。這樣,您可以輕鬆地獨立搜尋、排序或操作名稱的每個部分。 ``` -- Example: Storing atomic values CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100) ); ``` --- 按鍵簡介 ---- 鍵是資料庫設計中的重要組成部分,有助於確保資料完整性並建立表之間的關係。它們充當記錄的唯一標識符,並實現高效的資料檢索和操作。 主鍵索引 ---- 主鍵是唯一標識表中每筆記錄的列或列的組合。它確保每個記錄都是唯一的並且可以輕鬆找到。通常會對主鍵建立索引以提高查詢效能。 ``` CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100) ); ``` 查找表 --- 查找表也稱為參考表或程式碼表,是包含預定義值集的表,這些值可用於填入其他表中的列。查找表透過確保一致性和減少冗餘來幫助維護資料完整性。 ``` -- Lookup table for product categories CREATE TABLE product_categories ( category_id INT PRIMARY KEY, category_name VARCHAR(100) ); -- Products table referencing the lookup table CREATE TABLE products ( product_id INT PRIMARY KEY, product_name VARCHAR(100), category_id INT, FOREIGN KEY (category_id) REFERENCES product_categories(category_id) ); ``` 超級密鑰和候選密鑰 --------- 超級鍵是表中唯一標識每筆記錄的一組或多列。候選鍵是最小超鍵,這意味著它不包含不必要的列。換句話說,候選鍵是一個超級鍵,具有唯一標識每個記錄所需的最少列數。 主鍵和備用鍵 ------ 主鍵是選擇作為表的主要唯一辨識符的候選鍵。備用鍵也稱為唯一鍵,是任何其他本來可以被選為主鍵但沒有被選為主鍵的候選鍵。 ``` CREATE TABLE employees ( employee_id INT PRIMARY KEY, email VARCHAR(100) UNIQUE, -- Alternate key first_name VARCHAR(50), last_name VARCHAR(50) ); ``` 代理鍵和自然鍵 ------- 代理鍵是用作表中主鍵的人工鍵(通常是序號或 GUID)。它與資料本身沒有固有的意義或關係。另一方面,自然金鑰是從資料本身衍生的金鑰,例如員工 ID 或產品程式碼。 ``` -- Surrogate key CREATE TABLE orders ( order_id INT PRIMARY KEY IDENTITY(1,1), -- Surrogate key customer_name VARCHAR(100), order_date DATE ); -- Natural key CREATE TABLE products ( product_code VARCHAR(10) PRIMARY KEY, -- Natural key product_name VARCHAR(100), price DECIMAL(10,2) ); ``` 我應該使用代理鍵還是自然鍵? -------------- 代理鍵和自然鍵之間的選擇取決於多個因素,包括資料的性質、資料變更的可能性以及重複或衝突的可能性。 代理鍵通常是首選,因為它們是: - 不可變:即使資料發生變化,它們也不會隨著時間而改變。 - 保證唯一性:由資料庫系統生成,保證唯一性。 - 不透明:它們不會洩露有關資料本身的任何訊息,這對於安全和隱私來說是有益的。 另一方面,自然鍵在以下情況下可能會很有優勢: - 資料具有固有的唯一性,例如產品程式碼或員工 ID。 - 資料不太可能隨著時間的推移而改變,從而降低了衝突或重複的風險。 - 需要人類可讀且有意義的辨識符。 外鍵 -- 外鍵是一個表中引用另一個表的主鍵的列或列的組合。它在兩個表之間建立連結並強制引用完整性,確保子表中的資料有效且與父表中的資料一致。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ); ``` NOT NULL 外鍵 ----------- 在某些情況下,可能需要對外鍵列設定 NOT NULL 約束,這表示該列不能有空值。此約束可確保子表中的每筆記錄都與父表中的有效記錄相關聯。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT NOT NULL, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ); ``` 外鍵約束 ---- 外鍵約束定義表之間引用完整性的規則。這些約束可以包括更新或刪除父表中引用的記錄時要採取的操作,例如: - `CASCADE` :當父表中的記錄被更新或刪除時,子表中對應的記錄也會被更新或刪除。 - `SET NULL` :當父表中的記錄被更新或刪除時,子表中對應的外鍵值被設定為NULL。 - `NO ACTION` :當父表中的記錄被更新或刪除時,子表中對應的外鍵值保持不變,如果違反引用完整性則回滾操作。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ON UPDATE CASCADE ON DELETE SET NULL ); ``` 簡單鍵、複合鍵、複合鍵 ----------- - 簡單鍵是用作主鍵或外鍵的單一欄位。 - 複合鍵是用作主鍵或外鍵的兩個或多個列的組合。 - 複合鍵是用作外鍵的兩個或多個簡單鍵的組合。 ``` -- Simple key CREATE TABLE orders ( order_id INT PRIMARY KEY, ... ); -- Composite key CREATE TABLE order_items ( order_id INT, product_id INT, quantity INT, PRIMARY KEY (order_id, product_id) ); -- Compound key CREATE TABLE shipments ( shipment_id INT PRIMARY KEY, order_id INT, product_id INT, FOREIGN KEY (order_id, product_id) REFERENCES order_items(order_id, product_id) ); ``` --- 關係 ---- 關係是關聯式資料庫的基石,可讓您連接和組合來自不同表的資料。關係主要分為三種: ![關係形象](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qadj6qd495g7yovdcx2d.jpg) 一對一的關係 ------ 在一對一關係中,一個表中的每筆記錄都與另一個表中的一筆記錄相關聯,反之亦然。例如,考慮一個資料庫,其中每位員工都有一名且僅有一名經理,且每位經理管理一名且僅有一名員工。這種關係在實務上比較少見。 ![一對一影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm0xf8h40rktgqzbp4o4.png) 一對多關係 ----- 在一對多關係中,一個表格(「一」側)中的每筆記錄都可以與另一個表(「多」側)中的多個記錄關聯。例如,在學校的資料庫中,一位老師可以教授多個班級,但每個班級只有一位老師授課。 ![一對多影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe9iuj8n0n3b1cj24pdf.png) 多對多關係 ----- 在多對多關係中,一個表中的每筆記錄可以與另一表中的多筆記錄關聯,反之亦然。例如,在大學的資料庫中,一個學生可以註冊多個課程,每個課程可以有多個學生註冊。 ![多對多關係影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2prop1r97o0cj7cr6qw.jpg) ### 關係摘要 - 一對一:表A中的一筆記錄與表B中的一筆且只有一筆記錄相關,反之亦然。 - 一對多:A表中的一筆記錄可以與B表中的多筆記錄相關,但B表中的一筆記錄只能與A表中的一筆記錄相關。 - 多對多:表A中的多筆記錄可以與表B中的多筆記錄相關,反之亦然。 設計關係(SQL 實作) ------------ **1 - 設計一對一關係** 要設計一對一關係,您可以將兩個表中的所有列包含在一個表中,也可以建立兩個單獨的表並使用外鍵約束來連結它們。 ``` -- Option 1: Single table CREATE TABLE employees ( employee_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), manager_first_name VARCHAR(50), manager_last_name VARCHAR(50) ); -- Option 2: Two tables with foreign key CREATE TABLE employees ( employee_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), manager_id INT UNIQUE, FOREIGN KEY (manager_id) REFERENCES employees(employee_id) ); ``` 2 -**設計一對多關係** 要設計一對多關係,通常會建立兩個表:父表(“一”側)和子表(“多”側)。子表包含引用父表主鍵的外鍵列。 ``` -- Parent table CREATE TABLE teachers ( teacher_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); -- Child table CREATE TABLE classes ( class_id INT PRIMARY KEY, class_name VARCHAR(100), teacher_id INT, FOREIGN KEY (teacher_id) REFERENCES teachers(teacher_id) ); ``` **3 - 設計多對多關係** 要設計多對多關係,通常會建立第三個表(稱為聯結表或關聯表),將兩個主表連結在一起。此聯結表包括引用主表的外鍵列 ``` -- Table 1 CREATE TABLE students ( student_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); -- Table 2 CREATE TABLE courses ( course_id INT PRIMARY KEY, course_name VARCHAR(100), description TEXT ); -- Junction or Intemediary table CREATE TABLE enrollments ( enrollment_id INT PRIMARY KEY, student_id INT, course_id INT, FOREIGN KEY (student_id) REFERENCES students(student_id), FOREIGN KEY (course_id) REFERENCES courses(course_id) ); ``` 父表和子表 ----- 在一對多或多對多關係中, **“一”**側的表通常稱為父表,而**“多”**側的表稱為子表。子表包含引用父表主鍵的外鍵。 例如,在教師-班級關係中, `teachers`表是父表, `classes`表是子表。同樣,在學生-課程關係中, `students`和`courses`表是父表,而`enrollm`是父表。 實體關係建模簡介 -------- 實體關係建模(ER Modeling)是資料庫設計中使用的一種技術,用於直觀地表示資料庫的邏輯結構。它有助於辨識實體(表)、屬性(列)以及它們之間的關係,從而更容易理解和傳達資料庫設計。 ER 圖由以下部分組成: - **實體**:以矩形表示,實體是資料庫中的表或物件。 - **屬性**:在實體矩形內列出,屬性是描述實體的列或欄位。 - **關係**:以連接實體的線表示,關係描述了實體之間的關聯。 基數 -- 基數定義了兩個實體之間的數值關係。它指定一個實體可以與另一個實體的單一實例關聯的最大實例數。最常見的基數是: - 一對一(1:1):實體 A 的一個實例最多可以與實體 B 的一個實例關聯,反之亦然。 - 一對多(1:N):實體 A 的一個實例可以與實體 B 的多個實例關聯,但實體 B 的一個實例只能與實體 A 的一個實例關聯。 - 多對多 (M:N):實體 A 的多個實例可以與實體 B 的多個實例關聯,反之亦然。 在 ER 圖中,基數以特定的符號表示,例如單線表示一對一,帶箭頭的線表示一對多,兩端帶箭頭的線表示多對多關係。 ![基數影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmife5ost450cgntriyi.png) 模態 -- 模態是指一個實體實例的存在是否依賴它與另一個實體的關係。有兩種類型的模態: - 部分模態:實例的存在不依賴它與另一個實體的關係。例如,客戶可以在沒有任何訂單的情況下存在。 - 總模態:實例的存在取決於它與另一個實體的關係。例如,沒有訂單,訂單項就不可能存在。 在 ER 圖中,模態使用特定的符號表示,例如單一條表示部分模態,雙條表示總模態。 --- 資料庫規範化簡介 -------- 資料庫規範化是組織資料庫中的資料以減少冗餘、最大限度地減少資料異常(插入、更新和刪除異常)並提高資料完整性的過程。它涉及將資料庫分解為較小的表,並根據特定規則或範式定義它們之間的關係。 資料庫規範化的主要目標是: - 消除冗餘資料 - 確保資料完整性 - 促進資料操作和維護 資料庫規範化有多種範式,每種都建立在前一種範式的基礎上。最常用的範式是: 1. 第一範式 (1NF) 2. 第二範式 (2NF) 3. 第三範式 (3NF) 1NF(資料庫規範化第一範式) --------------- 第一範式(1NF)是最基本的規範化形式。它規定表中的屬性(列)必須具有原子值,這意味著表中的每個單元格應包含單一值,而不是一組值。 例如,假設一個表格具有名為「PhoneNumbers」的資料列,該資料列儲存客戶的多個電話號碼。這違反了 1NF,因為該列包含一組值而不是單一值。為了符合 1NF,您需要將電話號碼分成單獨的列或為電話號碼建立單獨的表。 ``` -- Violates 1NF CREATE TABLE customers ( customer_id INT PRIMARY KEY, name VARCHAR(100), phone_numbers VARCHAR(200) -- Stores multiple phone numbers, violating 1NF ); -- Conforms to 1NF CREATE TABLE customers ( customer_id INT PRIMARY KEY, name VARCHAR(100), phone1 VARCHAR(20), phone2 VARCHAR(20), phone3 VARCHAR(20) ); ``` 2NF(資料庫規範化的第二範式) ---------------- 第二範式 (2NF) 建立在 1NF 的基礎上,解決了部分依賴問題。如果表屬於 1NF,且每個非主屬性(列)完全依賴整個主鍵,則該表屬於 2NF。 換句話說,如果一個表有一個複合主鍵(由多個列組成),那麼所有非鍵列必須依賴整個主鍵,而不僅僅是它的一部分。 例如,考慮一個具有複合主鍵`(student_id, course_id)`和列`grade`的表。如果`grade`欄位僅取決於`course_id` ,而不取決於`student_id`和`course_id`的組合,則該表違反了 2NF。 ``` -- Violates 2NF CREATE TABLE student_courses ( student_id INT, course_id INT, course_name VARCHAR(100), grade CHAR(2), -- Depends only on course_id, not the entire primary key PRIMARY KEY (student_id, course_id) ); -- Conforms to 2NF CREATE TABLE student_courses ( student_id INT, course_id INT, grade CHAR(2), PRIMARY KEY (student_id, course_id) ); CREATE TABLE courses ( course_id INT PRIMARY KEY, course_name VARCHAR(100) ); ``` 3NF(資料庫規範化的第三範式) ---------------- 第三範式 (3NF) 建立在 2NF 的基礎上,解決了傳遞依賴問題。如果表屬於 2NF,且每個非主屬性都非傳遞依賴於主鍵,則該表屬於 3NF。 換句話說,如果一個非鍵列依賴另一個非鍵列,那麼該表就違反了 3NF,並且非鍵列應該分離到它們自己的表中。 例如,考慮一個包含`student_id` 、 `student_name` 、 `class_id`和`class_name`欄位的表。 `student_name`欄位取決於`student_id` ,而`class_name`欄位取決於`class_id` 。但是, `class_name`欄位也透過`class_id`欄位傳遞依賴`student_id` 。這違反了 3NF。 ``` -- Violates 3NF CREATE TABLE student_classes ( student_id INT, student_name VARCHAR(100), class_id INT, class_name VARCHAR(100), PRIMARY KEY (student_id, class_id) ); -- Conforms to 3NF CREATE TABLE students ( student_id INT PRIMARY KEY, student_name VARCHAR(100) ); CREATE TABLE classes ( class_id INT PRIMARY KEY, class_name VARCHAR(100) ); CREATE TABLE student_classes ( student_id INT, class_id INT, PRIMARY KEY (student_id, class_id), FOREIGN KEY (student_id) REFERENCES students(student_id), FOREIGN KEY (class_id) REFERENCES classes(class_id) ); ``` 透過遵循資料庫規範化的原則,您可以建立結構良好且高效的資料庫,從而最大限度地減少冗餘、保持資料完整性並促進資料操作和維護。 --- 索引(聚集索引、非聚集索引、複合索引) ------------------- 索引是提高資料庫中資料檢索操作效能的資料結構。它們在表中建立資料的排序表示,從而允許更快的搜尋和查詢。索引有幾種類型: - **聚集索引**:聚集索引根據索引鍵值對表中的行進行實體重新排序。每個表只能有一個聚集索引。 - **非聚集索引**:非聚集索引是一個單獨的物件,其中包含索引鍵值和指向表中相應行的指標。一個表可以有多個非聚集索引。 - **複合索引**:複合索引是索引鍵中包含多個欄位的索引。它可以是集群的,也可以是非集群的。 ``` -- Clustered index CREATE CLUSTERED INDEX idx_customers_name ON customers (last_name, first_name); -- Nonclustered index CREATE NONCLUSTERED INDEX idx_orders_date ON orders (order_date); -- Composite index CREATE INDEX idx_products_category_price ON products (category_id, price); ``` 資料類型 ---- 在資料庫領域,資料類型就像是保存特定類型資訊的不同形狀的容器。就像您不會將液體儲存在籃子中或將固體物體儲存在罐子中一樣,資料庫需要強制執行特定的資料類型以確保資料的完整性和一致性。 SQL 中的一些常見資料類型包括: - `INT`或`INTEGER` :儲存整數,例如`42`或`17` 。 - `FLOAT`或`DOUBLE` :儲存十進制數,例如`3.14159`或`0.00005` 。 - `VARCHAR`或`TEXT` :儲存文字資料,例如名稱或描述。 - `DATE`或`DATETIME` :儲存日期和時間值,例如`'2023-05-06'`或`'2024-01-01 12:34:56'` 。 - `BOOLEAN` :儲存真/假值,例如`1` (真)或`0` (假)。 選擇正確的資料類型至關重要,因為它會影響資料的儲存、查詢和操作方式。例如,嘗試在`INT`列中儲存大字串會導致錯誤或資料截斷。 ``` CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(50) NOT NULL, age INT, is_active BOOLEAN DEFAULT 1 ); ``` 在此範例中,我們建立一個`users`表,其中包含`id` (整數)、 `name` (最多 50 個字元的字串)、 `age` (整數)和`is_active` (布林值,預設值為`1`或 true)欄位。 --- 連接簡介 ---- 連接就像連接資料庫中不同表的橋樑,允許您組合和檢索來自多個來源的相關資料。它們是關係資料庫中的基本概念,對於有效查詢和操作資料至關重要。 ![加盟圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iks7pvzjikxzgqicjh2x.png) 內部聯接 ---- 內部聯結就像兩個表之間的友好握手,其中只有在兩個表中具有匹配值的行才會包含在結果集中。這是一種基於公共列或列集組合多個表中的資料的方法。 ``` SELECT users.name, orders.order_date FROM users INNER JOIN orders ON users.id = orders.user_id; ``` 在這個範例中,我們從`users`表中檢索`name`列,從`orders`表中檢索`order_date`列,但僅限於`users`表中的`id`與`orders`表中的`user_id`相符的行。 3 個表上的內連接(範例) ------------- 假設我們有三個表: `users` 、 `orders`和`products` 。我們想要檢索每個訂單的使用者名稱、訂單日期和產品名稱。我們可以透過在所有三個表之間執行內部聯結來實現這一點: ``` SELECT users.name, orders.order_date, products.product_name FROM users INNER JOIN orders ON users.id = orders.user_id INNER JOIN products ON orders.product_id = products.id; ``` 在這裡,我們首先在`id`和`user_id`列上連接`users`和`orders`表。然後,我們將該連接的結果與`products`表的`product_id`和`id`列連接起來。這樣,我們可以在單一查詢中從所有三個表中檢索資料,但僅限於滿足連接條件的行。 外連接簡介 ----- 內部連接就像友好的握手,而外部連接更像是歡迎的擁抱。它們不僅包括兩個表中的匹配行,還包括一個或兩個表中的不匹配行,具體取決於外連接的類型。 右外連接 ---- 右外連接就像從右表到左表的溫暖擁抱。它包括右表中的所有行以及左表中的匹配行。如果左表中沒有符合的行,則結果將包含左表列的`NULL`值。 ``` SELECT users.name, orders.order_date FROM users RIGHT OUTER JOIN orders ON users.id = orders.user_id; ``` 在此範例中,我們從`orders`表(右表)中檢索所有行,以及`users`表(左表)中的符合`name`值。如果訂單沒有符合的用戶,則`name`列將包含`NULL` 。 JOIN 與 NOT NULL 列 ----------------- 有時,您可能只想對不為空的列執行聯接。當您想要從結果集中排除缺少資料的行時,這會很有用。 ``` SELECT users.name, orders.order_date FROM users INNER JOIN orders ON users.id = orders.user_id AND users.name IS NOT NULL; ``` 在此範例中,我們在`users`和`orders`表之間執行內部聯接,但我們新增了一個附加條件`users.name IS NOT NULL`以確保結果集中僅包含具有非空`name`值的行。 跨 3 個表的外連接 ---------- 與內連接範例類似,我們可以跨多個表執行外連接。假設我們想要檢索所有訂單以及使用者名稱和產品名稱,即使`users`或`products`表中缺少值。 ``` SELECT users.name, orders.order_date, products.product_name FROM orders LEFT OUTER JOIN users ON orders.user_id = users.id LEFT OUTER JOIN products ON orders.product_id = products.id; ``` 在這裡,我們從`orders`表開始,並對`users`和`products`表執行左外連接。這可確保所有訂單以及符合的使用者名稱和產品名稱(如果可用)都包含在結果集中。如果`users`或`products`表中沒有符合的行,則對應的列將包含`NULL`值。 別名 -- 別名就像 SQL 查詢中表格或欄位的暱稱。它們可以使查詢更具可讀性和更容易理解,特別是在處理長表或列名時,或在查詢中多次引用同一個表時。 ``` SELECT u.name, o.order_date, p.product_name FROM users u INNER JOIN orders o ON u.id = o.user_id INNER JOIN products p ON o.product_id = p.id; ``` 在此範例中,我們對`users`表使用別名`u` ,對`orders`表使用別名`o` ,對`products`表使用`p` 。這使得查詢更加簡潔且更易於閱讀,而不必多次重複完整的表名稱。 自加入 --- 自連結就像一張表在與自己對話。這是一種根據同一個表中的特定條件或關係將表與其自身連接的方法。這在處理分層或遞歸資料結構(例如員工-經理關係或巢狀類別)時非常有用。 ``` SELECT e.name AS employee, m.name AS manager FROM employees e LEFT OUTER JOIN employees m ON e.manager_id = m.id; ``` 在此範例中,我們對`employees`表執行自聯接以檢索每位員工的姓名及其對應經理的姓名。我們使用左外連接來確保所有員工都包含在結果集中,即使他們沒有指派經理。 --- 資料庫標記語言 (DBML) -------------- 資料庫建模語言(DBML)是一種簡單直觀的標記語言,用於描述關係型資料庫的結構。它提供了一種人類可讀的方式來定義表、列、關係和約束,從而使資料庫設計方面的溝通和協作變得輕鬆。 **DBML 入門** 要開始使用 DBML,您需要一個文字編輯器並對資料庫概念有基本的了解。讓我們建立第一個 DBML 檔案: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } ``` 在這個範例中,我們定義了一個`users`表,其中包含`id` 、 `username` 、 `email`和`created_at`列。 `[pk]`標記指定`id`為主鍵, `[increment]`表示自動遞增, `[unique]`確保`email`的唯一性, `[default:` now() `]`將`created_at`的預設值設為目前時間戳記。 **建立表** DBML 可讓您在單一檔案中定義多個表格及其列。讓我們為資料庫新增更多表: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } ``` 在這個範例中,我們新增了一個`posts`表,其中包含`id` 、 `title` 、 `content` 、 `user_id`和`created_at`欄位。 `[ref: > users.id]`標籤在`posts`表中的`user_id`欄位和`users`表中的`id`列之間建立外鍵關係。 **定義關係** DBML 支援表之間各種類型的關係,包括一對一、一對多和多對多。讓我們在資料庫中定義一些關係: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } Ref: users.id < posts.user_id ``` 在此範例中,我們定義了`users`和`posts`表之間的一對多關係。 `Ref: users.id < posts.user_id`行指定`users`表中的`user_id`欄位引用`posts`表中的`id`列。 **新增約束** 約束確保資料完整性並在資料庫上強制執行規則。 DBML 支援各種約束,例如主鍵、外鍵、唯一約束和預設值。讓我們在表格中加入一些約束: ``` // my_database.dbml Table users { id int [pk, increment] username varchar [unique] email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } Ref: users.id < posts.user_id ``` 在此更新的範例中,我們為`users`表中的`username`名列新增了`[unique]`約束,以確保每個使用者名稱都是唯一的。 **記錄您的資料庫** DBML 可讓您為資料庫模式新增註解和註釋,使其更易於理解和維護。讓我們用註釋來記錄我們的表格: ``` // my_database.dbml Table users { id int [pk, increment] // Unique identifier for users username varchar [unique] // User's username email varchar [unique] // User's email address created_at datetime [default: `now()`] // Date and time when the user was created } Table posts { id int [pk, increment] // Unique identifier for posts title varchar // Title of the post content text // Content of the post user_id int [ref: > users.id] // ID of the user who created the post created_at datetime [default: `now()`] // Date and time when the post was created } Ref: users.id < posts.user_id // Relationship between users and posts ``` **DBML 的好處** - 簡單且人類可讀的語法 - 與資料庫無關的方法 - [dbdiagram.io](dbdiagram.io)上的免費視覺化工具 - 一致的可讀性和可維護性約定 - 豐富的文件和範例 --- 結論 -- 總而言之,關聯式資料庫設計構成了現代應用程式中高效能資料組織的支柱。了解其原理使您能夠建立強大且可擴展的資料庫。接下來,我們將深入研究 SQL 語法,釋放與資料庫有效互動的能力。請繼續關注我們對 SQL 世界的探索! --- 原文出處:https://dev.to/louaiboumediene/mastering-relational-database-design-a-comprehensive-guide-3jh8

可用於下一個專案的 30 多個強大 AI 庫

今天,我們將介紹 30 個或更多可以使用 AI 建置的專案。 所有專案都是開源的,因此您可以做出貢獻以使其變得更好。 有些專案可能擁有龐大的程式碼庫,但您可以從中獲得靈感並建立一個很酷的副專案。 相信我,如果這個清單沒有讓你感到驚訝,那麼沒有什麼會讓你感到驚訝:) 讓我們開始吧! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4ssxdcxcxmac945sj8x.gif) --- 1. [CopilotKit](https://go.copilotkit.ai/Anmol) - 在數小時內為您的產品提供 AI Copilot。 -------------------------------------------------------------------------- [![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzuxjfog2ldam3csrl62.png)](https://github.com/CopilotKit/CopilotKit) 將 AI 功能整合到 React 中是很困難的,這就是 Copilot 的用武之地。一個簡單快速的解決方案,可將可投入生產的 Copilot 整合到任何產品中! 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建(完全可自訂)Copilot 原生 UX 元件,例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一,CopilotKit 是一個應用程式內人工智慧聊天機器人,可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` (您可以稍後切換到不同的 UI 提供者)。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後,您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的,作為開發人員,我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 5700 顆星,發布了 200 多個版本,這意味著它們不斷改進。 https://go.copilotkit.ai/Anmol Star CopilotKit ⭐️ --- 2. [AgentGPT](https://github.com/reworkd/AgentGPT) - 組裝、配置和部署自主 AI 代理程式。 ------------------------------------------------------------------------ ![代理GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnc918anlnbbymwep8xv.png) AgentGPT 可讓您設定和部署自主 AI 代理程式。 它將嘗試透過思考要完成的任務、執行任務並從結果中學習來實現目標:) 它是使用以下方式建構的: - 引導:create-t3-app + FastAPI-模板。 - 框架:Nextjs 13 + Typescript + FastAPI - 驗證:Next-Auth.js - ORM:Prisma 和 SQLModel。 - 資料庫:Planetscale。 - 樣式:TailwindCSS + HeadlessUI。 - 架構驗證:Zod + Pydantic。 - 法學碩士工具:Langchain。 開始使用本[指南](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#getting-started-rocket)在本地安裝它。 您可以查看該應用程式的[演示](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#-demo)並查看[即時網站](https://agentgpt.reworkd.ai/)。 ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v17lz12cn58ousqbiiyg.gif) 他們在 GitHub 上擁有 29k+ 顆星,並且正在發布`v1`版本。 https://github.com/reworkd/AgentGPT 明星 AgentGPT ⭐️ --- 3.[私人 GPT](https://github.com/zylon-ai/private-gpt) - 無需網路即可詢問有關您文件的問題。 ------------------------------------------------------------------------ ![私有GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nshjqmm5xq6kgqkgfdc.png) PrivateGPT 是一個可立即投入生產的 AI 專案,即使在沒有網路連線的情況下,您也可以使用大型語言模型 (LLM) 的功能來詢問有關文件的問題。 100% 私有意味著任何時候都沒有資料離開您的執行環境。 API 分為兩個邏輯區塊: A。高級 API,抽象化了 RAG(檢索增強生成)管道實現的所有複雜性: - 文件攝取:內部管理文件解析、分割、元資料擷取、嵌入產生和儲存。 - 使用所攝取文件中的上下文進行聊天和完成:抽像上下文檢索、提示工程和回應產生。 b.低階 API,允許高階用戶實現複雜的管道: - 嵌入生成:基於一段文字。 - 上下文區塊檢索:給定查詢,從攝取的文件中傳回最相關的文字區塊。 您可以閱讀[安裝指南](https://docs.privategpt.dev/installation/getting-started/installation)來開始。 您可以閱讀[文件](https://docs.privategpt.dev/overview/welcome/introduction)以及所涉及的[詳細架構](https://github.com/zylon-ai/private-gpt?tab=readme-ov-file#-architecture)。 PrivateGPT 現在正在發展成為產生 AI 模型和原語的網關,包括補全、文件攝取、RAG 管道和其他低階建置塊。 他們在 GitHub 上擁有超過 51,000 顆星,並且發展迅速。 https://github.com/zylon-ai/private-gpt 明星私人 GPT ⭐️ --- 4. [Instrukt](https://github.com/blob42/Instrukt) - 終端機中整合人工智慧。 --------------------------------------------------------------- ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsk64pf5yuosui91tmz9.png) Instrukt是一個基於終端的AI整合環境。它提供了一個平台,用戶可以: - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們,並且為了安全起見,在安全容器(目前使用 Docker 實作)中執行它們,以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ``` ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3aza7hnlji7hbi2o0js.gif) 有許多令人興奮的功能,例如: - 基於終端的介面,讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互,以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理,這是一個簡潔的小功能。 ![控制台除錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaan8np68e3fk1yueexm.png) Instrukt 已獲得 AGPL 許可證,這意味著任何人都可以將其用於任何目的。 可以肯定地說,Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案,因此他們在 GitHub 上有大約 200 多顆星,但用例非常好。 https://github.com/blob42/Instrukt 舊指令 ⭐️ --- 5. [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 ------------------------------------------------------------------------------- ![GPT自動機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdzv06jnr3z33s7qll5k.png) 您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如,打開應用程式、尋找餐廳、綜合資訊。太棒了:D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分: A。語音命令:它使用本地執行的 Whisper(Buzz 的一個分支)來產生命令。 b.命令到行動:您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後,就像任何優秀的人工智慧一樣,我們讓代理商使用 AppleScript 說出最終結果「{Result}」(如果您以前沒有使用過,請嘗試在 Mac 終端機中輸入「Hello World!」)。 我們製作了一個自訂工具,讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串: ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的,GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後,它使用LangChain Agent 選擇一組操作,包括使用OpenAI 的GPT-3(“text-davinci-003”)從提示符號產生AppleScript(用於桌面自動化)和JavaScript(用於瀏覽器自動化)命令,然後執行產生的腳本。 請記住,這不適用於生產用途。該專案執行從自然語言產生的程式碼,可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用: ✅ 求計算結果。 > 提示:“2 + 2 是什麼?” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ✅ 尋找附近的餐廳。 > 提示:“查找我附近的餐廳” 它將打開 Chrome,谷歌搜尋附近的餐廳,解析頁面,然後返回最上面的結果。有時它很厚顏無恥,反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候,它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容: ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得,請自行承擔風險。哈哈! ✅ 如果您要求 GPT Automator 擦除您的計算機,它會的。 是的,如果您要求的話,它會擦除您的電腦! 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示! https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f 您可以在[Chidi 的部落格](https://chidiwilliams.com/posts/gpt-automator)上閱讀更多內容。 它更像是一個業餘專案,因此他們在 GitHub 上有大約 200 個 star,但它非常酷。 https://github.com/chidiwilliams/GPT-Automator 明星 GPT Automator ⭐️ --- 6. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 --------------------------------------------------------------------------- ![流塞伊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bp43nil764fhe4a05z.png) Flowise 是一款開源 UI 視覺化工具,用於建立客製化的 LLM 編排流程和 AI 代理程式。 開始使用以下 npm 指令。 ``` npm install -g flowise npx flowise start OR npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234 ``` 這就是整合 API 的方式。 ``` import requests url = "/api/v1/prediction/:id" def query(payload): response = requests.post( url, json = payload ) return response.json() output = query({ question: "hello!" )} ``` ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahk2ovjrpq1qk3r5pfot.png) 您可以閱讀[文件](https://docs.flowiseai.com/)。 ![流程化人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trkltpn5lk1y1pte0smd.png) 雲端主機不可用,因此您必須使用這些[說明](https://github.com/FlowiseAI/Flowise?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例: - 假設您有一個網站(可以是商店、電子商務網站或部落格),並且您希望廢棄該網站的所有相關連結,並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。 ![刮刀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e91sz2mga5wvc0x2hp2g.png) - 您還可以建立一個自訂工具,該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。 ![網路鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckyivo9dvue461jc9pv4.png) 還有許多其他用例,例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star,並擁有超過 10,000 個分叉,因此具有良好的整體比率。 https://github.com/FlowiseAI/Flowise 明星 Flowise ⭐️ --- 7. [Twitter Agent](https://github.com/ahmedbesbes/media-agent) - 從社群媒體抓取資料並使用 Langchain 與其聊天。 --------------------------------------------------------------------------------------------- ![推特代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8umoek3meg2tjxw9jna.png) Media Agent 抓取 Twitter 和 Reddit 提交的內容,對其進行總結,並在互動式終端中與它們聊天。這麼酷的概念! 您可以閱讀[說明](https://github.com/ahmedbesbes/media-agent?tab=readme-ov-file#run-the-app-locally)以在本地安裝它。 它是使用以下方式建構的: - Langchain 🦜 用於建構和撰寫法學碩士。 - ChromaDB 用於儲存向量(也稱為嵌入)並查詢它們以建立對話機器人。 - Tweepy 連接到您的 Twitter API 並提取推文和元資料。 - Praw 連接到 Reddit API。 - Rich 建造了一個很酷的終端 UX/UI。 - 管理依賴關係的詩。 一些很棒的功能: - 代表您從使用者帳戶清單或關鍵字清單中抓取推文/提交內容。 - 使用 OpenAI 嵌入推文/提交內容。 - 建立推文/提交內容的摘要並提供需要回答的潛在問題。 - 在推文之上打開聊天會話。 - 儲存對話及其元資料。 - 豐富的終端使用者介面和日誌記錄功能。 您可以觀看演示! https://www.loom.com/share/f4954e7d34ef4b7b8491e2bf910e8521 它在 GitHub 上有近 100 顆星,並且不再維護。您可以用它來建造更好的東西。 https://github.com/ahmedbesbes/media-agent 明星 Twitter 代理商 ⭐️ --- 8. [GPT 遷移](https://github.com/joshpxyne/gpt-migrate)- 輕鬆將程式碼庫從一種框架或語言遷移到另一種框架或語言。 ---------------------------------------------------------------------------------- ![GPT 遷移](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ullej3qz57t3l4qneyru.png) 如果您曾經面臨將程式碼庫遷移到新框架或語言的痛苦,那麼這個專案適合您。 我想我們都同意我們在某個時候需要這個。您也可以使用工作流程來完成此操作,據我所知,Stripe 曾經將其整個 JS 程式碼庫轉換為 TS。 遷移是一個成本高、乏味且重要的問題。 不要盲目相信當前版本,請負責任地使用它。另請注意,成本可能會迅速增加,因為 GPT-Migrate 旨在編寫(並可能重寫)整個程式碼庫。 您可以使用 Poetry[安裝](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-installation-using-poetry)它並了解[它的工作原理](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-how-it-works)。 > 請注意。 GPT-Migrate 目前處於開發 alpha 階段,尚未準備好投入生產使用。例如,在相對簡單的基準測試中,它在約 50% 的時間內順利通過 Python 或 JavaScript 等「簡單」語言,並且在沒有人工幫助的情況下無法通過 C++ 或 Rust 等更複雜的語言。 您可以在這裡觀看演示! ![GPT 遷移](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/megapc2dsnb6qlcl0dy4.gif) 他們在 GitHub 上有 6500+ 顆星,最後一次提交是 6 個月前,所以我認為它不再被維護了! https://github.com/joshpxyne/gpt-migrate 明星 GPT 遷移 ⭐️ --- 9. [Plandex](https://github.com/plandex-ai/plandex) - 用於使用法學碩士建置複雜的真實世界軟體的人工智慧編碼引擎。 ----------------------------------------------------------------------------------- ![普蘭迪克斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c98v9qntshph3wue4fr.png) Plandex 使用長時間執行的代理程式來完成跨多個檔案且需要多個步驟的任務。它將大任務分解為更小的子任務,然後實現每個子任務,一直持續到完成工作為止。 它可以幫助您處理積壓的工作,使用不熟悉的技術,擺脫困境,並花更少的時間在無聊的事情上。 您可以在這裡查看演示! https://vimeo.com/926634577 變更會累積在受保護的沙箱中,以便您可以在自動將它們套用到專案文件之前查看它們。內建版本控制可讓您輕鬆返回並嘗試不同的方法。分支允許您嘗試多種方法並比較結果。 您可以在終端機中有效地管理上下文。輕鬆將檔案或整個目錄新增至上下文中,並在工作時自動更新它們,以便模型始終具有專案的最新狀態。 Plandex 依賴 OpenAI API,並且需要`OPENAI_API_KEY`環境變數。 Plandex 支援 Mac、Linux、FreeBSD 和 Windows。它從沒有依賴關係的單一二進位檔案執行。 您甚至可以嘗試不同的模型和模型設置,然後比較結果。 您可以閱讀[安裝說明](https://github.com/plandex-ai/plandex?tab=readme-ov-file#install)。 Plandex Cloud 是使用 Plandex 最簡單、最可靠的方式。當您使用 plandex new 建立第一個計劃時,系統會提示您開始匿名試用(無需電子郵件)。試用帳戶僅限 10 個計劃,每個計劃有 10 個 AI 模型回复。 Plandex Cloud 帳戶目前是免費的,這是一件好事。 Plandex 在 GitHub 上擁有 8k+ 顆星,並使用 Go 建造。 https://github.com/plandex-ai/plandex 明星PLandex ⭐️ --- 10. [SQL Translator](https://github.com/whoiskatrin/sql-translator) - 使用人工智慧將自然語言查詢轉換為 SQL 程式碼的工具。 -------------------------------------------------------------------------------------------------- ![SQL翻譯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ghpgh4gvpdfiuj2qbat.png) 我試圖建立一個類似的專案,發現它已經存在。 該工具旨在讓任何人都可以輕鬆地將 SQL(結構化查詢語言)命令轉換為自然語言,反之亦然。 SQL 是一種用於管理和操作關聯式資料庫中的資料的程式語言,雖然它是一個強大的工具,但它也可能非常複雜且難以理解。 另一方面,自然語言是我們在日常生活中說和寫的語言,對於不熟悉技術術語的人來說,它通常是首選的溝通方式。 透過 SQL 和自然語言翻譯器,您無需成為 SQL 專家即可了解資料庫中發生的情況或編寫 SQL 查詢。您只需用自然語言輸入查詢即可取得對應的 SQL 程式碼,反之亦然。 其中一些功能是: - 深色模式。 - 小寫/大寫切換。 - 複製到剪貼簿。 - SQL 語法高亮。 - 模式意識(測試版)。 - 查詢歷史記錄。 你可以閱讀 [安裝說明](https://github.com/whoiskatrin/sql-translator?tab=readme-ov-file#%EF%B8%8F-installation),它非常簡單,因為它使用 Nextjs。 此查詢適合您。哈哈! ![酷查詢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eef11xrahbmv945xvpm7.png) SQL Translator 在 GitHub 上有 4k star,是使用 TypeScript 建構的。 https://github.com/whoiskatrin/sql-translator 明星 SQL 翻譯機 ⭐️ --- 11. [WingmanAI](https://github.com/e-johnstonn/wingmanAI) - 音訊即時轉錄,與 ChatGPT 整合。 -------------------------------------------------------------------------------- ![僚機人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slrhmt949vr7gqdmgi3h.png) WingmanAI 是一款功能強大的工具,可與系統和麥克風音訊的即時轉錄進行互動。該工具由 ChatGPT 提供支援,可讓您與腳本即時交互,作為機器人的廣泛記憶體基礎,提供獨特的通訊平台。 當您載入指定人員的記錄時,機器人可以回答有關過去對話的問題。 您可以閱讀[安裝說明](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#installation)。 您可以在這裡觀看演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w325vc51fys8gebrcb02.gif) 一些簡潔的功能是: - WingmanAI 可以轉錄系統輸出和麥克風輸入音頻,讓您以易於閱讀的格式查看即時轉錄。 - 您可以與 ChatGPT 支援的機器人聊天,該機器人會即時讀取您的文字記錄。 - 機器人以令牌有效的方式維護對話記錄,因為只有當前的文字區塊會傳遞給機器人。 - WingmanAI 讓您可以保存成績單以供將來使用。您可以稍後隨時加載它們,並且對機器人進行的任何查詢都將與保存的轉錄本的向量資料庫交叉引用,從而為機器人提供更豐富的上下文。 - 您可以繼續附加到已儲存的記錄中,隨著時間的推移建立一個龐大的資料庫供機器人從中提取。 它在 GitHub 上有 420 個星,並且不再維護。 https://github.com/e-johnstonn/wingmanAI 明星 WingmanAI ⭐️ --- 12. [Lively](https://github.com/rocksdanister/lively) - 允許使用者設定動畫桌面桌布和螢幕保護程式。 ----------------------------------------------------------------------------- ![活潑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60tld1a857herh12r5ci.png) 這只是為了好玩,我們可以使用程式碼學到很多關於它是如何完成的。 你可以看看這個[影片](https://www.pexels.com/video/blue-texture-abstract-leaves-7710243/),看看它看起來有多瘋狂。 ![風俗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb2ll571uc2jd2xrpmph.png) 他們提供[三種類型的壁紙,](https://github.com/rocksdanister/lively?tab=readme-ov-file#types-of-wallpapers)包括影片/GIF、網頁和應用程式/遊戲。 它基於 C# 和 live 支援的一些很酷的功能建置: 1. Lively 可以透過終端機的[命令列參數](https://github.com/rocksdanister/lively/wiki/Command-Line-Controls)進行控制。您可以將其與其他語言(例如 Python 或腳本軟體 AutoHotKey)整合。 2. 一組強大的[API](https://github.com/rocksdanister/lively/wiki/API) ,供開發人員建立互動式壁紙。取得硬體讀數、音訊圖表、音樂資訊等。 3. 當電腦上執行全螢幕應用程式/遊戲時(~0% CPU、GPU 使用率),桌布播放會暫停。 4. 您還可以利用[機器學習推理](https://github.com/rocksdanister/lively/wiki/Machine-Learning)來建立動態壁紙。您可以預測任何 2D 影像與相機的距離並產生類似 3D 的視差效果。酷:D 我見過很多人使用它,其中許多人甚至不知道它是開源的。 您可以使用[安裝程式](https://github.com/rocksdanister/lively/releases/download/v2.0.7.4/lively_setup_x86_full_v2074.exe)或透過[Microsoft Store](https://www.microsoft.com/store/productId/9NTM2QC6QWS7?ocid=pdpshare)下載它。 它是 2023 年 Microsoft Store 的獲勝者。 它在 GitHub 上擁有 13k+ Stars,有 60 個版本。 https://github.com/rocksdanister/lively 明星活潑 ⭐️ --- 13. [RestGPT](https://github.com/Yifan-Song793/RestGPT) - 基於 LM 的自主代理透過 RESTful API 控制應用程式。 ------------------------------------------------------------------------------------------- ![休息GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyp7goco6awn2l4uttww.png) 這項工作旨在建立一個基於大型語言模型的自主代理 RestGPT,以控制現實世界的應用程式,例如電影資料庫和音樂播放器。為了實現這一目標,我們將法學碩士與 RESTful API 連接起來,並解決規劃、API 呼叫和回應解析的實際挑戰。為了全面評估 RestGPT 的效能,我們提出了 RestBench,這是一個高品質的基準測試,由兩個真實場景和具有黃金解決方案路徑的人工註釋指示組成。 RestGPT採用迭代式從粗到精的線上規劃框架,並使用執行器呼叫RESTful API。以下是 RestGPT 的概述。 ![在職的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17p05syighh3llbmr1fk.png) 您可以閱讀[文件](https://github.com/Yifan-Song793/RestGPT?tab=readme-ov-file#data)以使用 RestBench 評估 RestGPT 的效能。 使用 TMDB 電影資料庫搜尋 Sofia Coppola 執導的電影數量的範例。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toh8k55yhb7c6t4oq0j7.gif) 您可以閱讀康乃爾大學發表的程式碼研究論文: [RestGPT - Connecting Large Language Models with Real-World RESTful APIs](https://arxiv.org/abs/2306.06624) 。 他們在 GitHub 上有 1.2k Stars,雖然不是很大,但涵蓋了一個很好的用例。 https://github.com/Yifan-Song793/RestGPT 明星 RestGPT ⭐️ --- 14. [ChatFiles](https://github.com/guangzhengli/ChatFiles) - 上傳您的檔案並與其對話。 ------------------------------------------------------------------------- ![聊天文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhimajsma8ijyzeknmlg.png) 文件聊天機器人 — 多個文件,由 GPT / Embedding 提供支援。你可以上傳任何文件並與之對話,考慮到他們使用了另一個著名的開源專案,UI 非常好。 它在底層使用 Langchain 和[Chatbot-ui](https://github.com/mckaywrigley/chatbot-ui) 。使用 Nextjs、TypeScript、Tailwind 和 Supabase(向量 DB)建構。 如果您想了解該方法和技術架構,那麼就在這裡! ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zbn7h50k6gwxgz6rkaf.png) 此環境僅用於試用,支援最大檔案大小為 10 MB,這是一個缺點,如果您想要更大的大小,則可以[在本機安裝](https://github.com/guangzhengli/ChatFiles?tab=readme-ov-file#how-to-run-locally)。 他們提供了您可以使用的[入門問題](https://github.com/guangzhengli/ChatFiles/blob/main/doc/Example.md)。您可以查看[現場演示](https://chatfile.vectorhub.org/)。 他們在 GitHub 上有 3k star,並且發布了`v0.3`版本。 https://github.com/guangzhengli/ChatFiles 明星 ChatFiles ⭐️ --- 15. [MindsDB](https://github.com/mindsdb/mindsdb) - 從企業資料客製化人工智慧的平台。 -------------------------------------------------------------------- ![思維資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9q3jdswxdx6wqfk0vqw.png) MindsDB 是一個利用企業資料客製化人工智慧的平台。 透過 MindsDB,您可以利用資料庫、向量儲存或應用程式中的資料即時部署、服務和微調模型,以建立人工智慧驅動的應用程式 - 使用開發人員已知的通用工具。 借助 MindsDB 及其與資料來源和 AI/ML 框架的近[200 個集成](https://docs.mindsdb.com/integrations/data-overview),任何開發人員都可以使用其企業資料更快、更安全地自訂符合其目的的 AI。 ![MindsDB 的工作原理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q1gfmhq43gopdix03gr.png) 您可以閱讀[文件](https://docs.mindsdb.com/)和[快速入門指南](https://docs.mindsdb.com/quickstart-tutorial)來開始使用。 目前,他們總共支援[3 個使用 Mongo-QL、Python 和 JavaScript 的 SDK](https://docs.mindsdb.com/sdks/overview) 。 MindsDB 有多種應用程式,例如與眾多資料來源和 AI 框架集成,因此您可以輕鬆地將資料和 AI 結合在一起以建立和自動化自訂工作流程。 其他常見用例包括微調模型、聊天機器人、警報系統、內容生成、自然語言處理、分類、回歸和預測。閱讀有關[用例的](https://docs.mindsdb.com/use-cases/)更多訊息,每個用例都有一個包含一些資訊的架構圖。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuhxzbioqh9a5s9f0w7s.png) 例如,MindsDB 的聊天機器人架構圖。您可以閱讀提供的所有[解決方案](https://github.com/mindsdb/mindsdb?tab=readme-ov-file#-get-started)及其 SQL 查詢範例。 ``` // SQL Query Example for Chatbot CREATE CHATBOT slack_bot USING database='slack',agent='customer_support'; ``` ![聊天機器人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otoqsro02ghqb709yglk.png) 只是為了告訴您總體的可能性,您可以查看[如何使用 AI + IoT 感測器資料預測氣溫](https://mindsdb.com/blog/how-to-forecast-air-temperatures-with-ai-iot-sensor-data)。令人興奮的權利:) ![心靈資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82wrjyrkch44taeurv1r.png) 他們在 GitHub 上擁有超過 21k 個 star,並且在`v24.4.3.0`上有超過 200 個版本。順便說一句,這是我第一次在任何版本中看到 4 個部分,因為我一直遵循語義版本。 https://github.com/mindsdb/mindsdb 明星 MindsDB ⭐️ --- 16. [Quivr](https://github.com/QuivrHQ/quivr) - 你的 GenAI 第二腦。 ------------------------------------------------------------- ![奎弗爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl12fl88mdjmfkfath1t.png) Quivr,您的第二個大腦,利用 GenerativeAI 的力量成為您的私人助理!可以將其視為黑曜石,但增強了人工智慧功能。 ![統計資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a27c2ubbmri0b2xlh1l.png) 您可以閱讀[安裝指南](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#getting-started-)。 您可以閱讀[文件](https://docs.quivr.app/home/intro)並觀看[示範影片](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#demo-highlights-)。 他們可以提供更好的免費套餐,但這足以在您端進行測試。 它在 GitHub 上擁有超過 30k 顆星,發布了 220 多個版本,這意味著它們正在不斷改進。 https://github.com/QuivrHQ/quivr 明星 Quivr ⭐️ --- 17.[動畫繪畫](https://github.com/facebookresearch/AnimatedDrawings)- 一種將兒童人物繪畫動畫化的方法。 --------------------------------------------------------------------------------- ![動畫圖畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pvpj68sum9xrqfz0s6n.gif) 我的意思是哇!這麼酷的概念。我不知道你怎麼想,但我真的很興奮。 這是 Facebook 的一個開源專案,主要用於研究目的,包含論文《 [A Method for Animating Children's Drawings of the Human Figure》](https://dl.acm.org/doi/10.1145/3592788)中描述的演算法的實作。 該專案已在 macOS Ventura 13.2.1 和 Ubuntu 18.04 上進行了測試。如果您在其他作業系統上安裝,則可能會遇到問題。 他們強烈建議在安裝 Animated Drawings 之前啟動 Python 虛擬環境。 閱讀有關[安裝說明](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#installation)以及如何快速入門的更多資訊。 您可以按照這個完整的指南來為[您的繪圖製作動畫](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#animating-your-own-drawing),包括如何在場景中加入多個角色、加入背景圖像以及更多令人興奮的事情。 他們在 GitHub 上擁有超過 10k 顆星,並且僅用於具有 MIT 許可的研究目的。 https://github.com/facebookresearch/AnimatedDrawings 明星動畫繪圖 ⭐️ --- 18.[背景移除器](https://github.com/nadermx/backgroundremover)- 讓您可以透過簡單的 CLI 使用 AI 從影像和影片中移除背景。 ------------------------------------------------------------------------------------------ ![背景去除劑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8bppslk45ci383wpman.png) 這是一個使用 AI 從圖像和影片中刪除背景的命令列工具。 首先從 pypi 安裝 backgroundremover。 ``` pip install --upgrade pip pip install backgroundremover ``` 也可以在不透過 pip 安裝的情況下執行它,只需克隆 git 以在本地啟動虛擬環境安裝要求並執行。 您可以使用的一些命令: - 從本機檔案圖像中刪除背景 ``` backgroundremover -i "/path/to/image.jpeg" -o "output.png" ``` - 從本地影片中刪除背景並將其覆蓋在圖像上 ``` backgroundremover -i "/path/to/video.mp4" -toi "/path/to/videtobeoverlayed.mp4" -o "output.mov" ``` 您可以檢查可透過 CLI 使用的所有[命令](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#usage-as-a-cli)。 您甚至可以將它用作圖書館。 ``` from backgroundremover.bg import remove def remove_bg(src_img_path, out_img_path): model_choices = ["u2net", "u2net_human_seg", "u2netp"] f = open(src_img_path, "rb") data = f.read() img = remove(data, model_name=model_choices[0], alpha_matting=True, alpha_matting_foreground_threshold=240, alpha_matting_background_threshold=10, alpha_matting_erode_structure_size=10, alpha_matting_base_size=1000) f.close() f = open(out_img_path, "wb") f.write(img) f.close() ``` 您可以閱讀[安裝說明](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#installation)並觀看[現場演示](https://www.backgroundremoverai.com/)。 > 輸入與輸出。 ![輸入影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0rwjaxxw460lugle5z2.png) 他們在 GitHub 上有 6k star,我們絕對可以用它來學習一些重要的概念。 https://github.com/nadermx/backgroundremover 明星背景去除器 ⭐️ --- 19. [Lobe Chat](https://github.com/lobehub/lobe-chat) - 現代設計的法學碩士/人工智慧聊天框架。 --------------------------------------------------------------------------- ![波瓣聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddxibf7xxx931tdoj1mn.png) 一個開源、現代設計的 ChatGPT/LLM UI/框架。 支援語音合成、多模式和可擴展(函數呼叫)插件系統。您可以一鍵部署您的私有 OpenAI。 ![旅行](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39se198xal53r854sdps.png) 讓我們來看看 LobeChat 的一些令人興奮的功能: ✅ 多模式服務提供者支援。 ![多服務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nodazgxel962wrp2hnvo.png) 他們將我們的支援擴展到多個模型服務提供者,而不是局限於單一服務提供者,為用戶提供更多樣化和豐富的對話選擇。 尋找他們支援的[10 多個模型服務提供者](https://lobehub.com/docs/usage/features/multi-ai-providers)的完整清單。 ✅ 市場助理。 ![助理市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35z3kz2jr4mnxid9dwsg.png) 在LobeChat的[助手市場](https://lobehub.com/assistants)中,創作者可以發現一個充滿活力和創新的社區,匯集了許多精心設計的助手。這些助手不僅在工作場景中發揮著至關重要的作用,而且在學習過程中也提供了極大的便利。在這裡,每個人都可以貢獻自己的智慧,分享自己開發的助手。 ![市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex23f2epblfp2cxtxbnl.png) 那裡有很多很棒的應用程式。哇! ✅ 模型視覺辨識。 ![模型視覺辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuxz350091223cj36dq7.png) LobeChat現在支援OpenAI的gpt-4-vision、Google Gemini Pro Vision、Zhipu GLM-4 Vision等具有視覺辨識能力的大型語言模型,使LobeChat具備多模態互動能力。用戶可以輕鬆地將圖片上傳或拖放到聊天框中,助理將能夠辨識圖片內容並據此進行智慧對話,打造更聰明、更多樣化的聊天場景。 ✅ 文字到圖像生成。 ![文字到圖像生成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2q6qzcy8anjgsg2381o.png) LobeChat 支援最新的文字到圖像生成技術,現在允許使用者在與助手對話時直接使用文字到圖像工具。透過利用 DALL-E 3、MidJourney 和 Pollinations 等 AI 工具的功能,助手現在可以將您的想法轉化為圖像。 ✅ 本地大語言模型 (LLM) 支援。 ![本地大語言模型 (LLM) 支援。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucn4rpa4p2vb11hhvkn1.png) 借助 Ollama AI 強大的基礎設施和社區的協作努力,現在您可以在 LobeChat 中與本地 LLM(大型語言模型)進行對話! 透過執行以下 Docker 指令,您可以在 LobeChat 中體驗與本機 LLM 的對話。 ``` docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434/v1 lobehub/lobe-chat ``` ✅ 漸進式網頁應用程式 (PWA)。 ![漸進式網頁應用程式 (PWA)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sccmha74iz01rr12gphr.png) 他們採用了漸進式 Web 應用程式 PWA 技術,這是一種現代 Web 技術,可將 Web 應用程式提升到接近本機應用程式的體驗。透過 PWA,LobeChat 可以在桌面和行動裝置上提供高度優化的使用者體驗,同時保持輕量級和高效能的功能。 ✅ 自訂主題。 ![自訂主題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cl73pplbor4z1381kdm.png) LobeChat在介面設計上非常注重個人化的使用者體驗,因此引入了靈活多樣的主題模式,包括白天的淺色模式和夜間的深色模式。 除了主題模式切換之外,我們還提供了一系列顏色自訂選項,讓使用者可以根據自己的喜好調整應用程式的主題顏色。 了解所有[功能和用例](https://lobehub.com/docs/usage/start)。 您可以自行託管或使用 docker 部署它。 lobe chat 的[生態系統](https://github.com/lobehub/lobe-chat/tree/main?tab=readme-ov-file#-ecosystem)提供了 4 個軟體包: `lobehub/ui` 、 `lobehub/icons` 、 `lobehub/tts`和`lobehub/lint` 。 他們還提供[插件市場](https://lobehub.com/plugins),您可以在其中找到許多有用的插件,這些插件可用於引入新的函數呼叫,甚至是呈現訊息結果的新方法。如果你想開發自己的插件,請參考 wiki 中的[📘插件開髮指南](https://lobehub.com/docs/usage/plugins/development)。 ![插件市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqtxt31vc42uwnw2ukgr.png) 您可以閱讀[文件](https://lobehub.com/docs/usage/start)。 您可以查看[現場演示](https://chat-preview.lobehub.com/chat)。它太酷了! ![演示快照](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe3ngshtwpps2kmpu98f.png) 他們在 GitHub 上擁有超過 28k 顆星,發布了 500 多個版本。 https://github.com/lobehub/lobe-chat 星瓣聊天 ⭐️ --- 20.[微代理](https://github.com/aymenfurter/microagents)- 能夠自我編輯提示的代理。 ------------------------------------------------------------------ ![微代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuxv03dgb03s04dkmkm9.png) 它是一個實驗框架,用於動態建立自我改進的代理來回應任務。 微代理代表了一種建立自我改進代理的新方法。小型的微服務大小(因此稱為微代理)代理是根據用戶分配給助手的任務動態生成的,評估其功能,並在成功驗證後存儲以供將來重用。 這使得跨聊天會話的學習成為可能,使系統能夠獨立推斷任務執行的方法。 這是使用`Python` 、 `OpenAI's GPT-4 Turbo`和`Text-Embedding-Ada-002`建構的。 您可以閱讀[安裝說明](https://github.com/aymenfurter/microagents?tab=readme-ov-file#installation)。他們提到您應該擁有一個可以存取 gpt-4-turbo 和 text-embedding-ada-002 的 OpenAI 帳戶。 讓我們看一個獲取天氣預報代理的範例。 ``` You are an adept weather informant. Fetch the weather forecast by accessing public API data using this Python code snippet: ``python import requests import json def fetch_weather_forecast(location, date): response = requests.get(f"https://api.met.no/weatherapi/locationforecast/2.0/compact?lat={location[0]}&lon={location[1]}") weather_data = response.json() for day_data in weather_data['properties']['timeseries']: if date in day_data['time']: print(day_data['data']['instant']['details']) break `` # Example usage: fetch_weather_forecast((47.3769, 8.5417), '2024-01-22T12:00:00Z') Note: Replace the (47.3769, 8.5417) with the actual latitude and longitude of the location and the date string accordingly. ``` 如果您想知道如何建立代理,那麼此架構圖將對此進行解釋。 ![圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oi4fbt6e5qauqo293qt.png) 您可以看到[工作演示](https://github.com/aymenfurter/microagents?tab=readme-ov-file#demo)。 他們在 GitHub 上有大約 700 顆星,值得一看。 https://github.com/aymenfurter/microagents 明星微代理 ⭐️ --- 21. [GPT-4 & LangChain](https://github.com/mayooear/gpt4-pdf-chatbot-langchain) - 用於大型 PDF 文件的 GPT4 和 LangChain 聊天機器人。 -------------------------------------------------------------------------------------------------------------------------- ![聊天架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pe0xehimhyw2mfubzu9.png) 這可用於新的 GPT-4 API 來為多個大型 PDF 檔案建立 chatGPT 聊天機器人。 該系統是使用 LangChain、Pinecone、Typescript、OpenAI 和 Next.js 建構的。 LangChain 是一個簡化可擴展 AI/LLM 應用程式和聊天機器人開發的框架。 Pinecone 用作向量存儲,用於以文字格式儲存嵌入和 PDF,以便以後檢索類似文件。 您可以閱讀涉及複製、安裝依賴項和設定環境 API 金鑰的[開發指南](https://github.com/mayooear/gpt4-pdf-chatbot-langchain?tab=readme-ov-file#development)。 您可以觀看[YouTube 影片](https://www.youtube.com/watch?v=ih9PBGVVOO4),了解如何遵循和使用它。 他們在 GitHub 上擁有 14k+ Stars,僅提交了 34 次。在您的下一個人工智慧應用程式中嘗試! https://github.com/mayooear/gpt4-pdf-chatbot-langchain 明星 GPT-4 和 Langchain ⭐️ --- 22. [Buzz](https://github.com/chidiwilliams/buzz) - 在您的個人電腦上離線轉錄和翻譯音訊。 ---------------------------------------------------------------------- ![嗡嗡聲](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdi1olu9ogarzxdc3ct9.png) 使用 OpenAI 的 Whisper 的強大功能在您的個人電腦上離線轉錄和翻譯音訊。 Buzz 甚至出現在[App Store](https://apps.apple.com/us/app/buzz-captions/id6446018936?mt=12&itsct=apps_box_badge&itscg=30200) 。取得 Buzz 的 Mac 原生版本,具有更簡潔的外觀、音訊播放、拖放匯入、文字記錄編輯、搜尋等功能。 您可以閱讀[安裝說明](https://chidiwilliams.github.io/buzz/docs/installation)。 令人興奮的功能: - 匯入音訊和視訊檔案並將文字記錄匯出為 TXT、SRT 和 VTT(演示)。 - 從電腦麥克風轉錄和翻譯為文字(資源密集且可能不是即時的。 - 它可在 Mac、Windows 和 Linux 上使用。 - 還有一個[CLI](https://chidiwilliams.github.io/buzz/docs/cli)選項。 在這裡查看演示! https://www.loom.com/share/564b753eb4d44b55b985b8abd26b55f7 您可以閱讀[文件](https://chidiwilliams.github.io/buzz/docs)。 它們在 GitHub 上擁有近 10k star,並且自兩週前上次提交以來仍在維護中。 https://github.com/chidiwilliams/buzz 明星嗡嗡聲 ⭐️ --- 23. [Deepgram](https://github.com/deepgram) - 將語音 AI 建置到您的應用程式中。 ---------------------------------------------------------------- ![深度圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32enxrtcwqk6g81eazay.png) 從新創公司到 NASA,Deepgram API 每天都用於轉錄和理解數百萬分鐘的音訊。快速、準確、可擴展且經濟高效。 它為開發人員提供語音到文字和音訊智慧模型。 ![深度圖選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdc3tqg7fvt3sw6ktle7.png) 儘管他們有免費增值模式,但免費套餐的限制足以讓您入門。 可視化效果更上一層樓。您可以檢查即時串流媒體回應或音訊檔案並比較音訊的智慧程度。 ![串流媒體](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wcvzzrqzn94gxe594hf.png) ![情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw6wkhzg7g6vgq7lphri.png) 您可以閱讀[文件](https://developers.deepgram.com/docs/introduction)。 您也可以閱讀 Deepgram 撰寫的關於[如何將語音辨識新增至您的 React 和 Node.js 專案的範例部落格](https://deepgram.com/learn/how-to-add-speech-recognition-to-your-react-project)。 如果您想嘗試 API 來親自了解模型的靈活性,請查看他們的[API Playground](https://playground.deepgram.com/?smart_format=true&language=en&model=nova-2) 。 https://github.com/deepgram 明星 Deepgram ⭐️ --- 24. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼,更多的內容。 ----------------------------------------------------------------------- ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4on63bb02g4x4ny8gtcn.png) ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0yepod2rye2jk5r12dt.png) 這是一個開源專案,旨在複製 Devin,一名自主人工智慧軟體工程師,能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道,這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM,因此您可以使用任何基礎模型來執行 OpenDevin,包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻,您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star,並且正在快速成長。 https://github.com/OpenDevin/OpenDevin 明星 OpenDevin ⭐️ --- 25. [NPM Copilot](https://github.com/whoiskatrin/npm-copilot) - Next.js 的 CLI 工具,可以即時分析日誌。 ------------------------------------------------------------------------------------------ ![npm 副駕駛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7omx4d2yzub3gx1xmkvh.png) npm/yarn/pnpm copilot 是一個命令列工具,它使用 OpenAI 的 GPT-3 語言模型來提供修復程式碼中錯誤的建議。 CLI 工具可偵測目前目錄中正在使用的專案類型和套件管理器。 然後,它執行適當的開發伺服器命令(例如,npm run dev、yarn run dev、pnpm run dev)並偵聽正在執行的應用程式產生的日誌。 當遇到錯誤時,CLI 工具會即時提供錯誤修復建議。 首先使用以下 npm 指令安裝 npm-copilot 套件。 ``` npm install -g npm-copilot ``` CLI 工具將開始監視 Next.js 應用程式產生的日誌,並即時提供錯誤修復建議。 您可以透過該命令在專案中使用它。 ``` npm-copilot ``` 他們在 GitHub 上有 338 顆星,支援`Next,js` 、 `React` 、 `Angular`和`Vue.js` https://github.com/whoiskatrin/npm-copilot 明星 NPM Copilot ⭐️ --- 26. [Mentat](https://github.com/AbanteAI/mentat) - 人工智慧編碼助理。 ------------------------------------------------------------ ![撒謊了](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeba0cbns0fve53k5xk5.png) Mentat 是一款人工智慧工具,可直接從命令列幫助您完成任何編碼任務。 與 Copilot 不同,Mentat 協調多個位置和文件的編輯。與 ChatGPT 不同的是,Mentat 已經擁有您專案的上下文 - 無需複製和貼上! 您可以觀看此演示以了解基本概述。 https://www.youtube.com/watch?v=lODjaWclwpY 如果需要協助,您可以閱讀[安裝說明](https://github.com/AbanteAI/mentat?tab=readme-ov-file#install)或觀看安裝[教學](https://www.youtube.com/watch?v=bVJP8hY8uRM)。 您可以閱讀[文件](https://github.com/AbanteAI/mentat?tab=readme-ov-file#-usage)。 他們在 GitHub 上有 2.3k 顆星,並且正在發布`v1`版本。 https://github.com/AbanteAI/mentat Star Mentat ⭐️ --- 27. [FlowGPT](https://github.com/nilooy/flowgpt) - 使用 AI 產生流程圖。 --------------------------------------------------------------- ![流量GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzzpnc7doy4o6qizosjl.png) FlowGPT是一個用ai(gpt-3.5)產生流程圖的工具。 它是使用 Next.js、Langchain、Mermaid 和 DaisyUI 建構