隨著人工智慧市場的不斷成長。我們即將做出很多改變。 最近，我一直在思考在各個領域取得重大進展的最新新創公司。這些新創公司參與了開創性的工作，從增強資料互動性到探索大型語言模型在營運中的潛力（一種稱為 LLM Ops 的新概念）。此外，我對搜尋引擎和生成人工智慧的進步很著迷，它們正在徹底改變我們與技術互動的方式。 我在 DEV.to 上看到他們中的許多人，然後我想嘗試他們的專案。我對這些公司所付出的努力和創新感到驚訝。 ## [Pezzo：開發者優先的人工智慧平台](https://github.com/pezzolabs/pezzo)  **GitHub 儲存庫**：[GitHub 上的 Pezzo](https://github.com/pezzolabs/pezzo) **網址**：[片段](https://pezzo.ai/) **描述**： Pezzo 是一個為開發人員量身定制的開源雲端原生 LLMOps 平台。它透過提供簡化的提示設計、版本管理、即時交付等，徹底改變了人工智慧操作。該平台能夠有效觀察和監控人工智慧操作、顯著降低成本和延遲、無縫協作以及立即交付人工智慧變更。 **主要特徵**： - **提示管理**：提示的集中管理和版本控制，允許即時部署到生產。 - **可觀察性**：提供有關人工智慧操作的詳細見解，優化支出、速度和品質。 - **故障排除**：即時檢查提示執行，最大限度地減少除錯工作。 - **協作**：促進同步團隊合作，以交付有影響力的 AI 功能。 **加入社群**： 加入他們的 [Discord 社群](https://pezzo.cc)，成為 Pezzo 創新之旅的一部分。透過為他們的 GitHub 儲存庫加註星標來為他們的使命做出貢獻並支持他們！ [在 GitHub 上給 Pezzo 一顆星](https://github.com/pezzolabs/pezzo) 🌟，加入 AI 維運革命！ https://github.com/pezzolabs/pezzo ## [Swirl：人工智慧驅動的多來源搜尋平台](https://github.com/swirlai/swirl-search)  **GitHub 儲存庫**：[GitHub 上的 Swirl](https://github.com/swirlai/swirl-search) **網站**：[Swirl](https://swirl.today/) **描述**： Swirl 是一款創新的開源軟體，它利用人工智慧同時搜尋多個內容和資料來源。它使用人工智慧對結果進行排名，獲取最相關的部分，並使用生成式人工智慧來提供從您自己的資料得出的答案。該工具對於整合和從各種資料來源中提取有價值的見解特別有用。 **主要特徵**： - **人工智慧驅動的搜尋**：同時搜尋多個來源，提供人工智慧排名的結果。 - **生成式人工智慧整合**：使用熱門搜尋結果提示生成式人工智慧提供全面的答案。 - **多樣化資料來源連線**：連接到資料庫（SQL、NoSQL、Google BigQuery）、公共資料服務以及 Microsoft 365、Jira、Miro 等企業來源。 - **可自訂和可擴展**：提供靈活的平台，用於資料豐富、實體分析以及整合各種應用程式的非結構化資料。 **加入社群**： 參與 Swirl 社區並貢獻您的想法！加入 [Swirl Slack 社群](https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw)，並透過為他們的儲存庫加入星標來支持他們的成長。 [GitHub 上的 Star Swirl](https://github.com/swirlai/swirl-search) 並成為這令人興奮的人工智慧搜尋演化的一部分！ 🌟 https://github.com/swirlai/swirl-search ## [DeepEval：LLM評估架構](https://github.com/confident-ai/deepeval)  **GitHub 儲存庫**：[GitHub 上的 DeepEval](https://github.com/confident-ai/deepeval) **網址**：【Confident AI】(https://www.confident-ai.com/) **描述**： DeepEval 是大型語言模型 (LLM) 的開源評估框架。它簡化了 LLM 應用程式的評估，類似於 Pytest 進行單元測試的操作方式。 DeepEval 因提供一系列專為 LLMs 量身定制的評估指標而脫穎而出，使其成為嚴格績效評估的生產就緒替代方案。 **主要特徵**： - **多樣化的評估指標**：提供由 LLMs 評估或透過統計方法和 NLP 模型計算的多種指標。 - **自訂指標建立**：允許輕鬆建立自訂指標，無縫整合到 DeepEval 的生態系統中。 - **批量資料集評估**：以最少的編碼工作促進整個資料集的評估。 - **與 Confident AI 整合**：能夠即時觀察評估結果並比較不同的超參數。 [在GitHub上Star DeepEval](https://github.com/confident-ai/deepeval)並為LLM評估架構的進步做出貢獻！ 🌟 https://github.com/confident-ai/deepeval ## [LiteLLM：通用LLM API介面](https://github.com/BerriAI/litellm)  **GitHub 儲存庫**：[GitHub 上的 LiteLLM](https://github.com/BerriAI/litellm) **網站**：[LiteLLM 文件](https://docs.litellm.ai/docs/#quick-start/) **描述**： LiteLLM是一個開源工具，使用戶能夠使用統一的OpenAI格式呼叫各種LLM API。它支援廣泛的供應商，如 Bedrock、Azure、OpenAI、Cohere、Anthropic、Ollama、Sagemaker、HuggingFace、Replicate 等，提供與 100 多個LLMS合作的簡化方法。該工具對於以一致且高效的方式簡化不同LLMS的整合和利用至關重要。 **主要特徵**： - **通用 API 格式**：方便使用標準化 OpenAI 格式呼叫不同的 LLM API。 - **支援廣泛的LLMS**：與眾多LLMS提供者相容，包括 OpenAI、Azure、Cohere 和 HuggingFace 等主要提供者。 - **一致的輸出和異常映射**：確保統一的輸出結構並將跨提供者的常見異常映射到 OpenAI 異常類型。 - **易於使用**：支援批量操作並簡化與LLMS的交互，使其更適合各種應用程式。 **加入社群**： 參與 LiteLLM 的開發並分享您的改進！克隆存儲庫，進行更改並提交 PR。 [在 GitHub 上星標 LiteLLM](https://github.com/BerriAI/litellm) 並立即簡化您與LLMS的工作！ 🌟 https://github.com/BerriAI/litellm ## [Qdrant：人工智慧高效能向量資料庫](https://github.com/qdrant/qdrant)  **GitHub 儲存庫**：[GitHub 上的 Qdrant](https://github.com/qdrant/qdrant) **網址**：[Qdrant](https://qdrant.tech/) **描述**： Qdrant是專為下一代AI應用量身定制的高性能、大規模向量資料庫。它是一個向量相似性搜尋引擎和資料庫，透過易於使用的 API 提供生產就緒的服務。 Qdrant 對於神經網路或基於語義的匹配、分面搜尋以及其他需要有效處理具有相關負載的向量的應用特別有效。 **主要特徵**： - **豐富的資料類型和查詢規劃**：支援多種資料類型和查詢條件，包括字串比對、數值範圍、地理位置等，並利用有效負載資訊進行高效率的查詢規劃。 - **硬體加速和預寫式日誌記錄**：利用現代 CPU 架構實現更快的效能並確保資料持久性和可靠性。 - **分散式部署**：支援水平擴展，多台 Qdrant 機器形成集群，透過 Raft 協定進行協調。 - **集成**：輕鬆與 Cohere、DocArray、LangChain、LlamaIndex 等平台集成，甚至與 OpenAI 的 ChatGPT 檢索插件集成。 **加入社群**： 成為 Qdrant 社區的一部分並為這個創新專案做出貢獻。加入他們的 [Discord](https://qdrant.to/discord)。 [GitHub 上的 Star Qdrant](https://github.com/qdrant/qdrant) 並幫助塑造 AI 中向量資料庫的未來！ 🌟 https://github.com/qdrant/qdrant --- ### 衷心的感謝 您有興趣探索和了解這些新創公司正在研究的不同主題。成為他們社群的一部分肯定會幫助您成長並了解不同的軟體和人工智慧領域。 --- 原文出處：https://dev.to/fast/these-5-open-source-ai-startups-are-changing-the-ai-landscape-59dg
我們正在開發 [Wasp](https://github.com/wasp-lang/wasp) - 一個基於 React、Node.js 和 Prisma 建置的全端 Web 框架。自從 GPT 出現以來，我們想知道是否可以使用它來更快地建立 Web 應用程式。這讓我們想到了 [MAGE - 一個由 GPT 驅動的 Web 應用程式產生器](https://usemage.ai/)，它可以根據簡短的描述建立完整的堆疊程式碼庫。 我們已經寫過[MAGE 可以（和不能）做什麼](https://dev.to/wasp/gpt-web-app-generator-let-ai-create-a-full-stack-react-nodejs-codebase-based-on-your-description-2g39)和[它在幕後的工作原理](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)。這是關於它的起源和採用的故事 - 為什麼我們決定建立它，開發人員如何發現它，以及他們實際上用它做什麼。 ## 為什麼要建構另一個 AI 編碼代理？ 我們很晚才進入整個 GPT 編碼代理遊戲。在我們開始考慮建立自己的工具之前，Smol AI、GPT Engineer 和 MetaGPT 等工具就已經受到了廣泛的關注，我們對此也很清楚。  那為什麼還要麻煩呢？事實是，這些代理程式都不是專門為建立 Web 應用程式而設計的，而這正是我們看到機會的地方。 儘管使用 GPT 代理進行編碼可以讓人感覺超級強大，但它們通常會很慢並且沒有抓住要點，需要多次迭代，最終使該過程相當麻煩且昂貴。 有了這些經驗，我們想知道，*「如果我們為特定堆疊中的 Web 應用程式製作一個高度專業化的編碼代理，而不做其他事情會怎麼樣？它能變得更容易、更快、更便宜嗎？」* 儘管我們對此很感興趣，但作為一個兼顧多個優先事項的小團隊，我們仍然相當懷疑，幾乎放棄了整個專案。事實證明，它的效果比我們預期的還要好。 ## 第 1 步：建造它🛠️  在決定 MAGE（*Magic App Generator*）的 v0 版本時，我們考慮了多種選擇。第一個也是最直接的一個是將其與 Wasp CLI 集成，因為我們已經擁有了圍繞它的所有工具。然後，開發人員將執行“wasp new myProject -ai”，而不是執行“wasp new myProject -ai”，CLI 會要求他們提供應用程式描述和其他所需的輸入，然後在終端中完成所有工作。 另一方面，我們知道在開始描述您的應用程式之前下載並安裝 Wasp 是一個很大的要求。最重要的是，CLI 中的使用者介面功能非常有限。這就是我們選擇網路介面的原因 - 零摩擦開始，我們可以讓應用程式建立流程變得非常簡單且美觀。 花了幾週的時間來建構它，最終的結果是一個[用Wasp 製作的完全開源的Web 應用程式](https://github.com/wasp-lang/wasp/tree/wasp-ai/wasp-ai)可以在 https://usemage.ai/ 上免費使用，或在本地託管以獲得更多控制和靈活性（例如，使用您自己的 OpenAI API 金鑰）。 ### 超級具體（僅限網頁應用程式）得到了回報！  如上所述，我們的主要賭注是建立一個專門的編碼代理來建立全端 Web 應用程式，而不是其他任何東西，這得到了回報。它使我們能夠預先為代理提供大量上下文和結構，並引入專門的啟發式方法來修復錯誤。此外，由於 Wasp 的高級抽象（例如身份驗證、專案結構、查詢和作業系統等），我們顯著減少了錯誤的表面積。 另一個結果是執行時間顯著減少，甚至更重要的是成本減少。典型的MAGE 建立的Web 應用程式成本在0.10 至0.20 美元之間，而一般編碼代理[同一應用程式的花費可能高達10 美元](https://wasp-lang.dev/blog/2023/08/01/smol-ai-vs-wasp-ai#thoughts--further-considerations)（所有價格均在 OpenAI 23 年 11 月 7 日定價更新公告之前）。 您可以閱讀有關Wasp 內部工作原理的更多資訊[此處](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)，以及它的比較其他編碼代理[此處](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)。 ## 第 2 步：啟動它🚀  開發產品是一回事，但傳播產品並讓人們使用它則完全是另一回事。在我們建立了 MAGE 並在團隊內對其進行了測試之後，問題是下一步該做什麼？我們如何真正聯繫開發人員並開始接收回饋？ ### 社區啟動 - 生命的證明  由於當時我們已經擁有一個[擁有大約 1,000 名成員的 Wasp 社區](https://discord.gg/rzdnErX)，因此我們[發布了 MAGE 作為我們發布週 #3 的一部分](https://wasp-lang.dev/blog/2023/06/22/wasp-launch-week-third#gpt-web-app-generator--friday-waspularity---tutorial-o-thon)。這是一個很好的測試平台，我們可以看到第一個應用程式正在建置。儘管如此，更多的開發人員本可以從更簡單的方式來啟動他們的 React 和 Node.js 專案中受益，但他們卻無法找到 MAGE。 ### 啟動 Product Hunt — 首次「真正」使用  這就是為什麼我們決定在內部社群啟動後將 MAGE 放在 Product Hunt 上。儘管Product Hunt 不是一個特定於開發工具的平台，並且吸引了來自不同背景的人群，但仍然有很多開發人員在使用它，而且我們[之前有很好的經驗](https://www.producthunt.com/products/wasp-lang-alpha/launches) 與它。 Product Hunt 對於[獲得Wasp 的第一批用戶並在GitHub 上獲得1,000 顆星](https://wasp-lang.dev/blog/2022/09/29/journey-to-1000-gh-stars) 至關重要，因此我們想再試一次。 有些人在發布準備工作上投入了大量精力，需要提前幾個月才能準備好，但我們沒有那個時間，只是想盡快完成。我們要求我們的朋友和社區查看 [MAGE on Product Hunt](https://www.producthunt.com/products/wasp-lang-alpha#gpt-webapp-generator-for-react-node-js) 並提供支持我們在發布當天就進入了當天的前十名產品，後來又躋身本週排名第二的開發者工具！ 這就是我們的目標，因為排名前十的產品最終會出現在第二天的電子報中，有超過 100 萬訂閱者閱讀。很快，我們看到建立的應用程式數量顯著增加，新的人開始加入我們的 Discord 社群！ ### 有機成長（又稱「無所事事」）階段 在 Product Hunt 推出後，我們放鬆了行銷工作，因為其他與 Wasp 相關的任務趕上了團隊。我們必須為即將到來的[發布週#4](https://wasp-lang.dev/blog/2023/10/13/wasp-launch-week-four)做準備，所以 MAGE 最終被擱置了。在我們決定投入更多資源之前，我們也想看看社區如何接受它。 我們發布了更多後續文章，「[它是如何在後台工作的](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)”和“[MAGE vs. 一般編碼代理](https://wasp-lang.dev/blog/2023/08/01/smol-ai-vs-wasp-ai)”，獲得平均數量牽引力，但沒有爆炸。我們在 Reddit 和 Hackernews 上也沒有什麼成功，感覺社群已經厭倦了所有的人工智慧內容。 儘管如此，使用 MAGE 建立的應用程式數量持續增長（約 200 個應用程式/天），偶爾會出現小規模爆炸。我們無法真正追蹤用戶來自哪裡 - MAGE 似乎是透過封閉社區和時事通訊中的口碑傳播的。 ### YouTube 和 TikTok 影片 - 病毒式傳播（每天 1,300 個應用程式！） 在我們的第 4 週發布週結束後，我們意識到，在近 2 個月的時間裡，在我們付出最小努力的情況下，MAGE 一直在不斷成長。這向我們表明它具有一定的實際價值，因此我們決定對其進行更多投資。  我們決定與該領域的影響者碰碰運氣。我們不想簡單地支付廣告費用，而是希望與真正對我們正在建立的產品感興趣並且想要客觀地審查 MAGE 的人合作。我們發現 [Matthew Berman](https://www.youtube.com/watch?v=KQrGu8cnwvA&t=2s&ab_channel=MatthewBerman) 涵蓋了 LLM 領域從最新模型到工具的所有內容，他將 MAGE 視為非常適合他的觀眾。 該影片在幾週內就準備好了，當它發佈時，觀看次數很快就達到了約 25,000 次。許多觀眾對透過 Web 介面從單一提示中獲取全端程式碼庫的可能性感到興奮，我們看到使用率和開發人員再次嘗試。  大約一周後，我們看到建立的應用程式數量再次大幅增加，但無法弄清楚它來自哪裡。我們做了一些搜尋，在TikTok 上找到了一位開發者@techfren，他製作了[一個關於它的短影片](https://www.tiktok.com/@techfren/video/7288306291733269778)（MAGE 甚至最終無法在就是那個！），一天之內瀏覽量猛增至 20 萬次，並迅速走紅。如今，它的瀏覽量已接近 100 萬。 ## 現實 - 所有這些應用程式會發生什麼？ 儘管 25,000 個建立的應用程式聽起來令人印象深刻，但退後一步並進一步細分是很好的。 與大多數人工智慧驅動的編碼工具一樣，想要建立自己產品的開發人員和非開發人員都對該領域抱持極大的興趣和好奇心。許多人甚至沒有想要建立的具體專案，但他們熱衷於嘗試一下，看看它是如何運作的。此外，由於法學碩士不是確定性的，因此還沒有任何工具能夠完美執行，並且經常會出現需要手動幹預和編碼知識的小錯誤。 雖然我們對此非常明確(https://wasp-lang.dev/blog/2023/07/10/gpt-web-app-generator#what-kind-of-apps-can-i-build-with-it )和其他[挑戰](https://wasp-lang.dev/blog/2023/07/10/gpt-web-app-generator#challenges)GPT驅動的工具面臨，MAGE仍然吸引了一部分的用戶對建置自己的產品感到興奮，但不精通編碼，需要幫助下載、執行和修復應用程式。另一方面，它是一種非常友好且易於參與 Web 開發和編碼的方式。我們不會阻止非編碼人員嘗試，而是盡可能透明地管理期望。 因此，大約 40% 的所有建立的應用程式都會下載並在本地執行。 ## 結論 事實證明，我們對 MAGE 的實驗非常成功，甚至超越了我們最初的預期。除了許多現有的通用編碼代理之外，高度專業化和結構化的方法可以以低廉的價格產生更好、更一致的結果。 此外，開發人員對啟動全端應用程式的簡單方法（其中包含最佳實踐）感到興奮，並且正在積極尋找這樣的解決方案並在彼此之間共享。 我預計人工智慧輔助的 SaaS 新創公司將成為 Web 開發的未來。如果有人可以使用已經為其應用程式定制的資料模型和 CRUD 邏輯來建立他們的應用程式，那麼為什麼有人會使用通用樣板啟動器呢？另一個問題是誰以及如何具體實現這一點，但我預計未來每個主流框架都會有一個。 ## 祝你好運！ 我希望這篇概述對您有所幫助，並讓您了解建立和行銷新的（人工智慧驅動的）開發工具時幕後的情況。請記住，這是我們獨特的經歷，每個故事都是不同的，因此對一切都持保留態度，只選擇對您和您的產品有意義的內容。 我們祝您好運，如果您有任何疑問或想了解 [MAGE](https://usemage.ai/) 和 [Wasp](https://github.com/wasp-lang/wasp)！ --- 原文出處：https://dev.to/wasp/how-we-built-a-gpt-web-app-generator-for-react-nodejs-from-idea-to-25000-apps-in-4-months-1aol
### console.log 拿掉吧。 刪除生產程式碼中的 console.log 對於防止敏感資訊洩漏並提高效能非常重要。 ### 控制台錯誤和警告 調查並修復。 解決生產程式碼中的控制台錯誤對於保持流暢且無錯誤的使用者體驗非常重要。 ### TypeScript 中的 any 把型別設定好吧。 應盡量減少在 TypeScript 中使用“any”，轉而使用明確類型，以增強程式碼的可靠性和可維護性。 ### 註解未使用的程式碼 刪掉吧。 註解掉未使用的程式碼是一種不好的做法，因為它會使程式碼變得混亂，妨礙維護，並可能導致註解資訊過時。 ### 超級元件和功能 如果您的元件很大，那麼就該將其分成更小的元件了。 想想 SOLID 的古老原則「單一職責」。 無論您是編寫函數程式碼還是類別程式碼。 ### 多次重寫CSS 為了阿達·洛夫萊斯、艾倫·圖靈和蒂姆·伯納斯·李的愛… 不要重複重寫顏色、字體和大小，使用設計標記來發揮自己的優勢，建立全域 CSS 變數或使用函式庫。 與您的團隊討論使用設計令牌的優勢。 ### 忽略 Linter 的標誌 範例：使用 `/* eslint-disable @typescript-eslint/no-unused-vars */` 修復你的程式碼。 不要傳送帶有 linter 錯誤的 Pull 請求。 如果您確實需要忽略，請仔細考慮可以忽略哪些 linter 警告。 ### 重新渲染和循環消耗大量資源或崩潰 範例：JavaScript 循環函數或 React 中的 useEffect 應用不佳。 這可能會導致 API 呼叫或值無限重複，從而導致記憶體溢出並導致應用程式崩潰。 修正你的邏輯。 * 注意：您的應用程式在瀏覽器中執行並消耗有限的最終用戶記憶體資源。 ### 前端的業務規則 請勿放置且不允許。 人們普遍認為，任何前端應用程式都不能有業務規則，只有使用者介面固有的規則，用於互動和使用者的成功旅程。 前端是客戶端，不是伺服器。 大公司和企業級應用程式採取的做法是不將業務規則和資料處理暴露在前端，而將其放在後端。 * 注意：對於簡單的無伺服器 Web 應用程式或參考第三方 API 的應用程式，可能有必要在前端放置一些業務規則 - 小心不要向客戶端暴露敏感或成本高昂的處理。 ### 不測試的文化 在您的程式碼庫上進行測試。沒有程式碼是完美的。 單元、整合、安全性、使用者體驗、效能和可存取性測試。使用測試工具產生錯誤報告和改進以糾正您的應用程式。 範例：部署管道中的 Cypress、Lighthouse、SAST 等。 與使用者體驗、品質保證和網路安全/滲透測試團隊合作（如果您公司有）。 ### 溝通恐懼 你是一個人。 當您遇到困難時，請致電其他開發人員或技術主管來分享您面臨的問題。 透過結對程式設計和共同思考，可以更快解決問題！ 請記住：他們曾經處於您的位置並且會提供幫助！ --- 我希望你喜歡！ 😃✌🏻 **你還有更多的TIPS嗎？** 支持我在 [Patreon.com/lucasm](https://patreon.com/lucasm) 上的工作 --- 原文出處：https://dev.to/lucasm/frontend-best-practices-guide-or-dont-do-it-on-frontend-32n4
## 介紹 Web 開發人員社群致力於建立能夠吸引目標受眾注意力的網站。成員總是在學習新的東西並創造有影響力的東西。這意味著生產力在他們的成功之路上發揮著重要作用。 網路上有許多我們可以遵循的技術來提高我們的生產力。 Chrome 擴充功能就是這樣一種技術，它使我們能夠提高我們致力於技術的辛勤工作的成果。 在本文中，我們將發現 10 個有用的 Chrome 擴充程序，它們可以提高 Web 開發人員的工作效率並讓我們的生活變得更美好。 ## Loom  [Loom](https://chromewebstore.google.com/detail/loom-%E2%80%93-screen-recorder-sc/liecbddmkiiihnedobmlmillhodjkdmb) 是 Chrome 線上應用程式商店中最常用的螢幕錄製擴充功能之一。它使我們能夠記錄螢幕、以圖形方式分享我們的想法並提供即時回應。 ## Window Resizer  [Window Resizer](https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) 調整瀏覽器視窗的大小以複製不同的解析度。它給我們一種個性化的感覺，因為它允許我們加入、刪除和重新排序我們想要測試的解析度清單。 ## 檢查我的連結  [檢查我的連結](https://chromewebstore.google.com/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf) 是一個連結分析器，用於掃描我們的網站是否有損壞的連結。此擴充功能專為網頁開發人員量身定制，因為他們始終致力於使網站內容完美無缺。 ## Wappalyzer  [Wappalyzer](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg) 是一個技術堆疊評估器，列出了用於建立網站的工具和技術。它使我們能夠了解 CMS（內容管理系統）、框架、JavaScript 庫等。 ## Session Buddy  [Session Buddy](https://chromewebstore.google.com/detail/session-buddy/edacconmaakjimmfgnblocblbcdccpbko) 是一個擴展，使我們能夠方便地管理瀏覽器選項卡和書籤。它將打開的選項卡保存為集合，我們可以稍後在任何給定時間點恢復。 ## Lighthouse  [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) 是開源自主工具，用於提高網路應用程式的品質、效率和準確性。它透過在頁面上執行一系列測試來審核頁面，然後產生總結頁面效能的報表。 ## Requestly  [Requestly](https://chromewebstore.google.com/detail/requestly-open-source-htt/mdnleldcmiljblolnjhpnblkcekpdkpa) 讓我們可以使用攔截和修改HTTP 請求、模擬伺服器、API 用戶端和會話記錄來建置、測試和會話記錄來建置、測試和除錯Web 應用程式。它將 Fiddler、Charles Proxy 和更多此類工具的功能引入瀏覽器，並具有有吸引力的現代 UI。 ## Grepper  [Grepper](https://chromewebstore.google.com/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco) 是一個回答開發人員社群查詢的擴充。它使我們能夠從網路上快速提取程式碼片段，然後將其用於我們的專案中，以在我們的旅程中取得進展。 ## BrowserStack  [BrowserStack](https://chromewebstore.google.com/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb) 使我們能夠在桌面或行動瀏覽器上測試我們的網站。對於希望將跨瀏覽器測試作為其開發工作流程不可或缺的一部分的 Web 開發人員來說，這是一個有用的擴充功能。 ## Octotree  [Octotree](https://chromewebstore.google.com/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc) 是一個擴展，可以幫助我們在 GitHub 上進行程式碼審查和探索。使用此工具，我們可以為儲存庫、問題、拉取請求和文件加入書籤，執行快速搜尋並輕鬆導航拉取請求。 ## 結論 我們已經到達終點了！我們上面討論的擴充功能非常有幫助，並且能夠大幅提高工作量。因此，讓我們使用它們，並在各自作為 Web 開發人員的旅程中不斷取得進展。 **快速說明：** > 感謝您花時間閱讀我的文章。這對我來說意義重大，並促使我創作更多這樣的內容。 **我的社交：** - [LinkedIn](https://www.linkedin.com/in/sriparnooy/) - [推特](https://twitter.com/Sriparno08) - [GitHub](https://github.com/Sriparno08) - [CodePen](https://codepen.io/Sriparno08) **我的部落格：** - [展示案例](https://www.showwcase.com/sriparno08) - [DEV](https://dev.to/sriparno08) - [哈希節點](https://hashnode.com/@sriparno08) --- 原文出處：https://dev.to/this-is-learning/10-useful-chrome-extensions-for-web-developers-meg
#### 如何儲存並使用本機開發的環境變數 API 和第三方整合要求開發人員使用稱為**環境或配置變數**的配置資料。這些變數通常儲存在受密碼保護的地方，例如 CI 工具或部署管道，但是當我們在本地開發應用程式時如何使用它們？  #### 簡介 - 不要在原始碼管理中儲存環境變數 - 使用 [dotenv](https://github.com/motdotla/dotenv) 從 .env 檔案讀取資料 - create-react-app 在環境變數上強制命名空間 這個簡短的教程將解釋在本地開發時將環境變數載入到程式碼中的一種方法。主要好處是 API 金鑰等秘密不會提交給原始碼控制，以確保您的應用程式更安全。 #### 要求： - 一個 JavaScript 應用程式 - 套件管理器（yarn 和 npm 都很棒） - Node 7+ ### 設定變數 在儲存庫的根目錄中建立一個名為「.env」的檔案。該文件稱為“點文件”，與常規文件不同，它通常隱藏在文件瀏覽器中。 大多數 IDE 允許使用者建立沒有名稱的文件，但如果情況並非如此，請轉到終端並 cd 進入應用程式的根資料夾。 ``` touch .env ``` 接下來，使用格式 key=value 設定變數，並以換行符號分隔： ``` API_KEY=abcde API_URL=https://my-api.com/api ``` 最後，確保 .env 檔案未提交到您的儲存庫。這可以透過開啟（或建立）.gitignore 檔案並新增以下行來實現： ``` .env # This contains secrets, don't store in source control ``` ### 使用變數 前往終端使用您首選的套件管理器安裝 [dotenv](https://github.com/motdotla/dotenv)： ``` # Using npm: npm i dotenv # Using yarn: yarn add dotenv ``` 現在您已準備好讀取 .env 檔案。儘早在您的應用程式中加入這行程式碼。對於 React 應用程式，通常是 index.js 或 App.js，但這完全取決於您的設定： ``` require('dotenv').config(); ``` 就是這樣！您的應用程式應該可以透過 process.env 物件存取環境變數。您可以透過撥打以下電話進行雙重檢查： ``` console.log(process.env); ``` 如果一切順利，您應該會看到類似以下內容： ``` { NODE_ENV: "development", API_KEY: "abcde", API_URL: "https://my-api.com/api" } ``` 🎉 現在您可以在應用程式中使用環境變數了！ 現在，對於我們這些使用 create-react-app 的人來說，有一個問題，我希望它能被更好地記錄下來。 ### 使用 create-react-app Facebook 的 [create-react-app](https://github.com/facebook/create-react-app) 的工作方式略有不同。如果您按照上述步驟操作但沒有彈出應用程式，那麼您應該看到的只是 NODE\_ENV 變數。這是因為 **create-react-app 只允許應用程式讀取帶有** **REACT\_APP\_ 前綴的變數。** 因此，為了使我們的變數起作用，我們需要像這樣更新我們的 .env 檔案： ``` REACT_APP_API_KEY=abcde REACT_APP_API_URL=https://my-api.com/api ``` 再次透過將 process.env 記錄到控制台來驗證您的設定： ``` { NODE_ENV: "development", REACT_APP_API_KEY: "abcde", REACT_APP_API_URL: "https://my-api.com/api" } ``` 你就完成了😎 ### 小技巧 .env 檔案中的變數不需要引號，除非值中有空格。 ``` NO_QUOTES=thisisokay QUOTES="this contains spaces" ``` 最好建立一個 .env.sample 檔案來追蹤應用程式應該期望的變數。這是我目前專案中的範例文件的樣子。請注意，它解釋了人們可以在哪裡找到這些金鑰和 URL。 ``` CONTENTFUL_SPACE_TOKEN="see Contentful dashboard" CONTENTFUL_API_KEY="see Contentful dashboard" S3_BUCKET_URL="check AWS" SHOW_DEBUG_SIDEBAR="if true, show debug sidebar" ``` ### 進一步閱讀： - [在 12-Factor App 方法中讀取環境中的設定](https://12factor.net/config) 感謝您的閱讀！您是否喜歡另一種在本地載入環境變數的方法？我很想在下面的評論中聽到它！ --- 原文出處：https://dev.to/deammer/loading-environment-variables-in-js-apps-1p7p
在本文中，您將學習如何建立 **GitHub 星數監視器** 來檢查您幾個月內的星數以及每天獲得的星數。 - 使用 GitHub API 取得目前每天收到的星星數量。 - 在螢幕上每天繪製美麗的星星圖表。 - 創造一個工作來每天收集新星星。  --- ## 你的後台工作平台🔌 [Trigger.dev](https://trigger.dev/) 是一個開源程式庫，可讓您使用 NextJS、Remix、Astro 等為您的應用程式建立和監控長時間執行的作業！ [](https://github.com/triggerdotdev/trigger.dev) 請幫我們一顆星🥹。 這將幫助我們建立更多這樣的文章💖 https://github.com/triggerdotdev/trigger.dev --- ## 這是你需要知道的 😻 取得 GitHub 上星星數量的大部分工作將透過 GitHub API 完成。 GitHub API 有一些限制： - 每個請求最多 100 名觀星者 - 最多 100 個同時請求 - 每小時最多 60 個請求 [TriggerDev](https://github.com/triggerdotdev/trigger.dev) 儲存庫擁有超過 5000 顆星，實際上不可能在合理的時間內（即時）計算所有星數。 因此，我們將採用與 [GitHub Stars History](https://star-history.com/) 相同的技巧。 - 取得星星總數 (**5,715**) 除以每頁 **100** 結果 = **58 頁** - 設定我們想要的最大請求量（**20 頁最大**）除以 **58 頁** = 跳過 3 頁。 - 從這些頁面中獲取星星**（2000 顆星）**，然後獲取剩餘的星星，我們將按比例加入到其他日期（**3715 顆星**）。 它會為我們繪製一個漂亮的圖表，並在需要的地方用星星凸起。 當我們每天獲取新數量的星星時，事情就會變得容易得多。 我們將用目前擁有的星星總數減去 GitHub 上的新星星數量。 **我們不再需要迭代觀星者。** --- ## 讓我們來設定一下 🔥 我們的申請將包含一頁： - 新增您想要監控的儲存庫。 - 查看儲存庫清單及其 GitHub 星圖。 - 刪除那些你不再想要的。  > 💡 我們將使用 NextJS 新的應用程式路由器，在安裝專案之前請確保您的節點版本為 18+。 > 使用 NextJS 設定一個新專案 ``` npx create-next-app@latest ``` 我們必須將所有星星保存到我們的資料庫中！ 在我們的示範中，我們將使用 SQLite 和 `Prisma`。 它非常容易安裝，但可以隨意使用任何其他資料庫。 ``` npm install prisma @prisma/client --save ``` 在我們的專案中安裝 Prisma ``` npx prisma init --datasource-provider sqlite ``` 轉到“prisma/schema.prisma”並將其替換為以下模式： ``` generator client { provider = "prisma-client-js" } datasource db { provider = "sqlite" url = env("DATABASE_URL") } model Repository { id String @id @default(uuid()) month Int year Int day Int name String stars Int @@unique([name, day, month, year]) } ``` 然後執行 ``` npx prisma db push ``` 我們基本上已經在 SQLite 資料庫中建立了一個名為「Repository」的新表： - 「月」、「年」、「日」是日期。 - `name` 儲存庫的名稱 - 「星星」以及該特定日期的星星數量。 你還可以看到我們在底部加入了一個`@@unique`，這意味著我們可以將`name`，`month`，`year`，`day`一起重複記錄。它會拋出一個錯誤。 讓我們新增 Prisma 客戶端。 建立一個名為「helper」的新資料夾，並新增一個名為「prisma.ts」的新文件，並在其中新增以下程式碼： ``` import {PrismaClient} from '@prisma/client'; export const prisma = new PrismaClient(); ``` 我們稍後可以使用該「prisma」變數來查詢我們的資料庫。 --- ## 應用程式 UI 骨架 💀 我們需要一些函式庫來完成本教學： - **Axios** - 向伺服器發送請求（如果您覺得更舒服，可以隨意使用 fetch） - **Dayjs -** 很棒的處理日期的函式庫。它是 moment.js 的替代品，但不再完全維護。 - **Lodash -** 很酷的資料結構庫。 - **react-hook-form -** 處理表單的最佳函式庫（驗證/值/等） - **chart.js** - 我選擇繪製 GitHub 星圖的函式庫。 讓我們安裝它們： ``` npm install axios dayjs lodash @types/lodash chart.js react-hook-form react-chartjs-2 --save ``` 建立一個名為“components”的新資料夾並新增一個名為“main.tsx”的新文件 新增以下程式碼： ``` "use client"; import {useForm} from "react-hook-form"; import axios from "axios"; import {Repository} from "@prisma/client"; import {useCallback, useState} from "react"; export default function Main() { const [repositoryState, setRepositoryState] = useState([]); const {register, handleSubmit} = useForm(); const submit = useCallback(async (data: any) => { const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name}); setRepositoryState([...repositoryState, ...repositoryResponse]); }, [repositoryState]) const deleteFromList = useCallback((val: List) => () => { axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`}); setRepositoryState(repositoryState.filter(v => v.name !== val.name)); }, [repositoryState]) return ( <div className="w-full max-w-2xl mx-auto p-6 space-y-12"> <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}> <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} /> <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit"> Add </button> </form> <div className="divide-y-2 divide-gray-300"> {repositoryState.map(val => ( <div key={val.name} className="space-y-4"> <div className="flex justify-between items-center py-10"> <h2 className="text-xl font-bold">{val.name}</h2> <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button> </div> <div className="bg-white rounded-lg border p-10"> <div className="h-[300px]]"> {/* Charts Component */} </div> </div> </div> ))} </div> </div> ) } ``` **超簡單的React元件** - 允許我們新增新的 GitHub 庫並將其發送到伺服器 POST 的表單 - `/api/repository` `{todo: 'add'}` - 刪除我們不需要 POST 的儲存庫 - `/api/repository` `{todo: 'delete'}` - 所有新增的庫及其圖表的清單。 讓我們轉到本文的複雜部分，新增儲存庫。 --- ## 數星星  在「helper」內部建立一個名為「all.stars.ts」的新檔案並新增以下程式碼： ``` import axios from "axios"; import dayjs from "dayjs"; import utc from 'dayjs/plugin/utc'; dayjs.extend(utc); const requestAmount = 20; export const getAllGithubStars = async (owner: string, name: string) => { // Get the amount of stars from GitHub const totalStars = (await axios.get(`https://api.github.com/repos/${owner}/${name}`)).data.stargazers_count; // get total pages const totalPages = Math.ceil(totalStars / 100); // How many pages to skip? We don't want to spam requests const pageSkips = totalPages < requestAmount ? requestAmount : Math.ceil(totalPages / requestAmount); // Send all the requests at the same time const starsDates = (await Promise.all([...new Array(requestAmount)].map(async (_, index) => { const getPage = (index * pageSkips) || 1; return (await axios.get(`https://api.github.com/repos/${owner}/${name}/stargazers?per_page=100&page=${getPage}`, { headers: { Accept: "application/vnd.github.v3.star+json", }, })).data; }))).flatMap(p => p).reduce((acc: any, stars: any) => { const yearMonth = stars.starred_at.split('T')[0]; acc[yearMonth] = (acc[yearMonth] || 0) + 1; return acc; }, {}); // how many stars did we find from a total of `requestAmount` requests? const foundStars = Object.keys(starsDates).reduce((all, current) => all + starsDates[current], 0); // Find the earliest date const lowestMonthYear = Object.keys(starsDates).reduce((lowest, current) => { if (lowest.isAfter(dayjs.utc(current.split('T')[0]))) { return dayjs.utc(current.split('T')[0]); } return lowest; }, dayjs.utc()); // Count dates until today const splitDate = dayjs.utc().diff(lowestMonthYear, 'day') + 1; // Create an array with the amount of stars we didn't find const array = [...new Array(totalStars - foundStars)]; // Set the amount of value to add proportionally for each day let splitStars: any[][] = []; for (let i = splitDate; i > 0; i--) { splitStars.push(array.splice(0, Math.ceil(array.length / i))); } // Calculate the amount of stars for each day return [...new Array(splitDate)].map((_, index, arr) => { const yearMonthDay = lowestMonthYear.add(index, 'day').format('YYYY-MM-DD'); const value = starsDates[yearMonthDay] || 0; return { stars: value + splitStars[index].length, date: { month: +dayjs.utc(yearMonthDay).format('M'), year: +dayjs.utc(yearMonthDay).format('YYYY'), day: +dayjs.utc(yearMonthDay).format('D'), } }; }); } ``` 那麼這裡發生了什麼事： - `totalStars` - 我們計算圖書館擁有的星星總數。 - `totalPages` - 我們計算頁數 **（每頁 100 筆記錄）** - `pageSkips` - 由於我們最多需要 20 個請求，因此我們檢查每次必須跳過多少頁。 - `starsDates` - 我們填充每個日期的星星數量。 - `foundStars` - 由於我們跳過日期，我們需要計算實際找到的星星總數。 - `lowestMonthYear` - 尋找我們擁有的恆星的最早日期。 - `splitDate` - 最早的日期和今天之間有多少個日期？ - `array` - 一個包含 `splitDate` 專案數量的空陣列。 - `splitStars` - 我們缺少的星星數量，需要按比例加入每個日期。 - 最終返回 - 新陣列包含自開始以來每天的星星數量。 所以，我們已經成功建立了一個每天可以給我們星星的函數。 我嘗試過這樣顯示，結果很混亂。 您可能想要顯示每個月的星星數量。 此外，您可能想要累積星星**而不是：** - 二月 - 300 顆星 - 三月 - 200 顆星 - 四月 - 400 顆星 **如果有這樣的就更好了：** - 二月 - 300 顆星 - 三月 - 500 顆星 - 四月 - 900 顆星 兩個選項都有效。 **這取決於你想展示什麼！** 因此，讓我們轉到 helper 資料夾並建立一個名為「get.list.ts」的新檔案。 這是文件的內容： ``` import {prisma} from "./prisma"; import {groupBy, sortBy} from "lodash"; import {Repository} from "@prisma/client"; function fixStars (arr: any[]): Array<{name: string, stars: number, month: number, year: number}> { return arr.map((current, index) => { return { ...current, stars: current.stars + arr.slice(index + 1, arr.length).reduce((acc, current) => acc + current.stars, 0), } }).reverse(); } export const getList = async (data?: Repository[]) => { const repo = data || await prisma.repository.findMany(); const uniqMonth = Object.values( groupBy( sortBy( Object.values( groupBy(repo, (p) => p.name + '-' + p.year + '-' + p.month)) .map(current => { const stars = current.reduce((acc, current) => acc + current.stars, 0); return { name: current[0].name, stars, month: current[0].month, year: current[0].year } }), [(p: any) => -p.year, (p: any) => -p.month] ),p => p.name) ); const fixMonthDesc = uniqMonth.map(p => fixStars(p)); return fixMonthDesc.map(p => ({ name: p[0].name, list: p })); } ``` 首先，它將所有按日的星星轉換為按月的星星。 稍後我們會累積每個月的星星數量。 這裡要注意的一件主要事情是 `data?: Repository[]` 是可選的。 我們制定了一個簡單的邏輯：如果我們不傳遞資料，它將為我們資料庫中的所有儲存庫傳遞資料。 如果我們傳遞資料，它只會對其起作用。 為什麼問？ - 當我們建立一個新的儲存庫時，我們需要在將其新增至資料庫後處理特定的儲存庫資料。 - 當我們重新載入頁面時，我們需要取得所有資料。 現在，讓我們來處理我們的星星建立/刪除路線。 轉到“src/app/api”並建立一個名為“repository”的新資料夾。在該資料夾中，建立一個名為「route.tsx」的新檔案。 在那裡加入以下程式碼： ``` import {getAllGithubStars} from "../../../../helper/all.stars"; import {prisma} from "../../../../helper/prisma"; import {Repository} from "@prisma/client"; import {getList} from "../../../../helper/get.list"; export async function POST(request: Request) { const body = await request.json(); if (!body.repository) { return new Response(JSON.stringify({error: 'Repository is required'}), {status: 400}); } const {owner, name} = body.repository.match(/github.com\/(?<owner>.*)\/(?<name>.*)/).groups; if (!owner || !name) { return new Response(JSON.stringify({error: 'Repository is invalid'}), {status: 400}); } if (body.todo === 'delete') { await prisma.repository.deleteMany({ where: { name: `${owner}/${name}` } }); return new Response(JSON.stringify({deleted: true}), {status: 200}); } const starsMonth = await getAllGithubStars(owner, name); const repo: Repository[] = []; for (const stars of starsMonth) { repo.push( await prisma.repository.upsert({ where: { name_day_month_year: { name: `${owner}/${name}`, month: stars.date.month, year: stars.date.year, day: stars.date.day, }, }, update: { stars: stars.stars, }, create: { name: `${owner}/${name}`, month: stars.date.month, year: stars.date.year, day: stars.date.day, stars: stars.stars, } }) ); } return new Response(JSON.stringify(await getList(repo)), {status: 200}); } ``` 我們共享 DELETE 和 CREATE 路由，這些路由通常不應在生產中使用，但我們在本文中這樣做是為了讓您更輕鬆。 我們從請求中取得 JSON，檢查「repository」欄位是否存在，並且它是 GitHub 儲存庫的有效路徑。 如果是刪除請求，我們使用 prisma 根據儲存庫名稱從資料庫中刪除儲存庫並傳回請求。 如果是建立，我們使用 getAllGithubStars 來獲取資料以保存到我們的資料庫中。 > 💡 由於我們已經在 `name`、`month`、`year` 和 `day` 上放置了唯一索引，如果記錄已經存在，我們可以使用 `prisma` `upsert` 來更新資料 最後，我們將新累積的資料回傳給客戶端。 最困難的部分完成了🍾 --- ## 主頁人口 💽 我們還沒有建立我們的主頁元件。 **我們開始做吧。** 前往“app”資料夾建立或編輯“page.tsx”並新增以下程式碼： ``` "use server"; import Main from "@/components/main"; import {getList} from "../../helper/get.list"; export default async function Home() { const list: any[] = await getList(); return ( <Main list={list} /> ) } ``` 我們使用與 getList 相同的函數來取得累積的所有儲存庫的所有資料。 我們還修改主要元件以支援它。 編輯 `components/main.tsx` 並將其替換為： ``` "use client"; import {useForm} from "react-hook-form"; import axios from "axios"; import {Repository} from "@prisma/client"; import {useCallback, useState} from "react"; interface List { name: string, list: Repository[] } export default function Main({list}: {list: List[]}) { const [repositoryState, setRepositoryState] = useState(list); const {register, handleSubmit} = useForm(); const submit = useCallback(async (data: any) => { const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name}); setRepositoryState([...repositoryState, ...repositoryResponse]); }, [repositoryState]) const deleteFromList = useCallback((val: List) => () => { axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`}); setRepositoryState(repositoryState.filter(v => v.name !== val.name)); }, [repositoryState]) return ( <div className="w-full max-w-2xl mx-auto p-6 space-y-12"> <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}> <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} /> <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit"> Add </button> </form> <div className="divide-y-2 divide-gray-300"> {repositoryState.map(val => ( <div key={val.name} className="space-y-4"> <div className="flex justify-between items-center py-10"> <h2 className="text-xl font-bold">{val.name}</h2> <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button> </div> <div className="bg-white rounded-lg border p-10"> <div className="h-[300px]]"> {/* Charts Components */} </div> </div> </div> ))} </div> </div> ) } ``` --- ## 顯示圖表！ 📈 前往“components”資料夾並新增一個名為“chart.tsx”的新檔案。 新增以下程式碼： ``` "use client"; import {Repository} from "@prisma/client"; import {useMemo} from "react"; import React from 'react'; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); export default function ChartComponent({repository}: {repository: Repository[]}) { const labels = useMemo(() => { return repository.map(r => `${r.year}/${r.month}`); }, [repository]); const data = useMemo(() => ({ labels, datasets: [ { label: repository[0].name, data: repository.map(p => p.stars), borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.5)', tension: 0.2, }, ], }), [repository]); return ( <Line options={{ responsive: true, }} data={data} /> ); } ``` 我們使用“chart.js”函式庫來繪製“Line”類型的圖表。 這非常簡單，因為我們在伺服器端完成了所有資料結構。 這裡需要注意的一件大事是我們「匯出預設值」我們的 ChartComponent。那是因為它使用了「Canvas」。這在伺服器端不可用，我們需要延遲載入該元件。 讓我們修改“main.tsx”： ``` "use client"; import {useForm} from "react-hook-form"; import axios from "axios"; import {Repository} from "@prisma/client"; import dynamic from "next/dynamic"; import {useCallback, useState} from "react"; const ChartComponent = dynamic(() => import('@/components/chart'), { ssr: false, }) interface List { name: string, list: Repository[] } export default function Main({list}: {list: List[]}) { const [repositoryState, setRepositoryState] = useState(list); const {register, handleSubmit} = useForm(); const submit = useCallback(async (data: any) => { const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name}); setRepositoryState([...repositoryState, ...repositoryResponse]); }, [repositoryState]) const deleteFromList = useCallback((val: List) => () => { axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`}); setRepositoryState(repositoryState.filter(v => v.name !== val.name)); }, [repositoryState]) return ( <div className="w-full max-w-2xl mx-auto p-6 space-y-12"> <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}> <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} /> <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit"> Add </button> </form> <div className="divide-y-2 divide-gray-300"> {repositoryState.map(val => ( <div key={val.name} className="space-y-4"> <div className="flex justify-between items-center py-10"> <h2 className="text-xl font-bold">{val.name}</h2> <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button> </div> <div className="bg-white rounded-lg border p-10"> <div className="h-[300px]]"> <ChartComponent repository={val.list} /> </div> </div> </div> ))} </div> </div> ) } ``` 您可以看到我們使用“nextjs/dynamic”來延遲載入元件。 我希望將來 NextJS 能為客戶端元件加入類似「使用延遲載入」的內容 😺 --- ## 但是新星呢？來認識一下 Trigger.Dev！ 每天加入新星星的最佳方法是執行 cron 請求來檢查新加入的星星並將其加入到我們的資料庫中。 不要使用 Vercel cron / GitHub 操作，或（上帝禁止）為此建立一個新伺服器。 我們可以使用 [Trigger.DEV](http://Trigger.DEV) 直接與我們的 NextJS 應用程式搭配使用。 那麼就讓我們來設定一下吧！ 註冊 [Trigger.dev 帳號](https://trigger.dev/)。 註冊後，建立一個組織並為您的工作選擇一個專案名稱。  選擇 Next.js 作為您的框架，並按照將 Trigger.dev 新增至現有 Next.js 專案的流程進行操作。  否則，請點選專案儀表板側邊欄選單上的「環境和 API 金鑰」。  複製您的 DEV 伺服器 API 金鑰並執行下面的程式碼片段以安裝 Trigger.dev。 仔細按照說明進行操作。 ``` npx @trigger.dev/cli@latest init ``` 在另一個終端中執行以下程式碼片段，在 Trigger.dev 和您的 Next.js 專案之間建立隧道。 ``` npx @trigger.dev/cli@latest dev ``` 讓我們建立 TriggerDev 作業！ 您將看到一個新建立的資料夾，名為“jobs”。 在那裡建立一個名為“sync.stars.ts”的新文件 新增以下程式碼： ``` import { cronTrigger, invokeTrigger } from "@trigger.dev/sdk"; import { client } from "@/trigger"; import { prisma } from "../../helper/prisma"; import axios from "axios"; import { z } from "zod"; // Your first job // This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline. client.defineJob({ id: "sync-stars", name: "Sync Stars Daily", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: cronTrigger({ cron: "0 23 * * *", }), run: async (payload, io, ctx) => { const repos = await io.runTask("get-stars", async () => { // get all libraries and current amount of stars return await prisma.repository.groupBy({ by: ["name"], _sum: { stars: true, }, }); }); //loop through all repos and invoke the Job that gets the latest stars for (const repo of repos) { getStars.invoke(repo.name, { name: repo.name, previousStarCount: repo?._sum?.stars || 0, }); } }, }); const getStars = client.defineJob({ id: "get-latest-stars", name: "Get latest stars", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: invokeTrigger({ schema: z.object({ name: z.string(), previousStarCount: z.number(), }), }), run: async (payload, io, ctx) => { const stargazers_count = await io.runTask("get-stars", async () => { const { data } = await axios.get( `https://api.github.com/repos/${payload.name}`, { headers: { authorization: `token ${process.env.TOKEN}`, }, } ); return data.stargazers_count as number; }); await prisma.repository.upsert({ where: { name_day_month_year: { name: payload.name, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }, update: { stars: stargazers_count - payload.previousStarCount, }, create: { name: payload.name, stars: stargazers_count - payload.previousStarCount, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }); }, }); ``` 我們建立了一個名為“Sync Stars Daily”的新作業，該作業將在每天下午 23:00 執行 - 它在 cron 文本中的表示為：`0 23 * * *` 我們在資料庫中取得所有目前儲存庫，按名稱將它們分組，並對星星進行求和。 由於一切都在 Vercel 無伺服器上執行，因此我們可能會在檢查所有儲存庫時遇到逾時。 為此，我們將每個儲存庫傳送到不同的作業。 我們使用“invoke”建立新作業，然後在“獲取最新的星星”中處理它們 我們迭代所有新儲存庫並獲取當前的星星數量。 我們用舊的星星數量去除新的星星數量，得到今天的星星數量。 我們使用“prisma”將其新增至資料庫。沒有比這更簡單的了！ 最後一件事是編輯“jobs/index.ts”並將內容替換為： ``` export * from "./sync.stars"; ``` 你就完成了🥳 --- ## 讓我們聯絡吧！ 🔌 作為開源開發者，我們邀請您加入我們的[社群](https://discord.gg/nkqV9xBYWy)，以做出貢獻並與維護者互動。請隨時造訪我們的 [GitHub 儲存庫](https://github.com/triggerdotdev/trigger.dev)，貢獻並建立與 Trigger.dev 相關的問題。 本教學的源程式碼可在此處取得： [https://github.com/triggerdotdev/blog/tree/main/stars-monitor](https://github.com/triggerdotdev/blog/tree/main/stars-monitor) 感謝您的閱讀！ --- 原文出處：https://dev.to/triggerdotdev/take-nextjs-to-the-next-level-create-a-github-stars-monitor-130a
您是否想過如何使用 python 測試您的 API？在本文中，我們將學習如何使用 Python 和 pytest 框架來測試我們的 API。 對於本教程，您需要安裝 python，您可以在[此處](https://www.python.org/downloads/)下載它 --- ### 簡介： - [什麼是 Python 和 Pytest 框架](#what-is-python-and-pytest-framework) - [我們專案的設定](#configuration-of-our-project) - [使用python建立虛擬環境](#creation-of-virtual-environment-with-python) - [測試的依賴關係設定](#setup-of-dependency-for-the-tests) - [建立我們的第一個測試](#creating-our-first-test) - [將被測試的 API 的定義](#definition-of-the-api-that-will-be-tested) - [建立我們的測試](#creating-our-test) - [重建我們的測試](#refactoring-our-tests) - [產生 html 報告結果](#generate-html-report-result) - [結論](#conclusion) --- ## 什麼是 Python 和 Pytest 框架 「Python」是一種高級通用程式語言，以其簡單性和可讀性而聞名。它由 Guido van Rossum 建立，於 1991 年首次發布。 Python 的設計易於學習，並且具有乾淨簡潔的語法，這使其成為初學者和經驗豐富的程式設計師的流行選擇。 「pytest」框架可以輕鬆編寫小型、可讀的測試，並且可以擴展以支援應用程式和程式庫的複雜功能測試。 --- ## 我們專案的配置 ### 用python建立虛擬環境 在開始建立之前，我們先來了解一下什麼是Python上的虛擬環境。 Python 中的虛擬環境是一個獨立的目錄或資料夾，可讓您為專案建立和管理隔離的 Python 環境。透過環境，您可以輕鬆管理依賴項，避免與不同版本的 python 發生衝突。 虛擬環境（除其他外）是： - 用於包含支援專案（庫或應用程式）所需的特定 Python 解釋器以及軟體庫和二進位檔案。預設情況下，它們與其他虛擬環境中的軟體以及作業系統中安裝的 Python 解釋器和庫隔離。 - 包含在專案目錄中的目錄中，通常名為“venv”或“.venv”，或在許多虛擬環境的容器目錄下，例如“~/.virtualenvs”。 - 未簽入原始碼控制系統（例如 Git）。 - 被認為是一次性的 - 應該很容易刪除並從頭開始重新建立它。您沒有在環境中放置任何專案程式碼 - 不被視為可移動或可複製 - 您只需在目標位置重新建立相同的環境。 您可以在[此處](https://docs.python.org/3/library/venv.html#venv-def)閱讀有關 python 環境的更多資訊。 #### 視窗 首先，為您的專案建立一個資料夾，然後打開 cmd 並使用命令 cd 導航到該資料夾： ``` cd tests_with_python ``` 如果您不知道資料夾在哪裡，可以執行命令“ls”，您將看到資料夾列表，並且可以瀏覽它們。在我們的專案資料夾中，執行以下命令： ``` python -m venv name_of_environment ``` 您的環境名稱可以是任何人，只需記住python 區分大小寫，請查看[PEP 8 風格指南](https://peps.python.org/pep-0008/) 以了解有關Python 約定的更多資訊. 要啟動我們的環境，我們使用以下命令： ``` name_of_environment\Scripts\Activate ``` 如果一切正確，您的環境將被激活，並且在 cmd 上您將看到如下所示： ``` (name_of_environment) C:\User\tests ``` 要停用您的環境，只需執行： ``` deactivate ``` #### Linux 或 MacOS 為您的專案建立一個資料夾，然後打開 cmd 並使用命令 cd 導航到該資料夾： ``` cd tests_with_python ``` 要啟動我們的環境，我們使用以下命令： ``` source name_of_environment/bin/activate ``` 如果一切正確，您的環境將被激活，並且在 cmd 上您將看到如下所示： ``` (name_of_environment) your_user_name tests % ``` 要停用您的環境，只需執行： ``` deactivate ``` ### 設定測試的依賴關係 當我們要測試 API 時，我們需要安裝依賴項來幫助我們進行測試，首先我們將安裝「requests」函式庫來幫助我們發出請求： PS：在執行此命令之前請確保您的環境已激活 ``` pip install requests ``` 為了進行測試，我們將安裝「pytests」框架： ``` pip install pytest ``` --- ## 建立我們的第一個測試 ### 將要測試的 API 的定義 在本教程中，我們將使用返回小行星列表的 Nasa API：[Asteroids - NeoWs](https://api.nasa.gov/#donkiGST)，我們將測試檢索基於小行星列表的端點在他們最接近地球的日期。 關於API： - 基本網址：`https://api.nasa.gov/neo/rest/v1/feed` - 查詢參數： |參數|類型|預設|描述| | --------|---------|--------|--------------------| |start_date|YYYY-MM-DD|無|小行星搜尋的開始日期| |end_date|YYYY-MM-DD|start_date後7天|小行星搜尋的結束日期| |api_key|字串|DEMO_KEY|用於擴展用途的 api.nasa.gov 密鑰| 在本教程中，我們將重點放在三種類型的測試： - 合約：如果 API 能夠驗證傳送的查詢參數 - 狀態：狀態程式碼是否正確 - 身份驗證：即使這個API不需要令牌，我們也可以用它來做測試 我們的場景： |方法|測試|預期結果 | | --------|--------|--------------------| |獲取 |搜尋成功 | - 傳回狀態程式碼 200<br/> 正文回應包含小行星清單| |獲取 |無需任何查詢參數即可搜尋 | - 返回狀態碼403<br/>| |獲取 |僅搜尋開始日期| - 傳回狀態程式碼 200 <br/> 主體回應包含小行星清單| |獲取 |僅搜尋結束日期| - 傳回狀態程式碼 200 <br/> 主體回應包含小行星清單| |獲取 |在有效日期範圍內搜尋| - 傳回狀態碼 200<br/> - 正文回應包含所有非空白欄位| |獲取 |當開始日期大於結束日期時進行搜尋| - 傳回狀態程式碼 400 <br/>| |獲取 |使用無效的 API 令牌進行搜尋| - 傳回狀態程式碼 403 <br/> 主體回應包含小行星清單| ### 建立我們的測試 首先，我們將建立一個名為「tests.py」的文件，我們將在該文件中編寫測試。為了幫助我們使用良好的實踐並編寫良好的自動化測試，讓我們使用 [TDD（測試驅動開發）](https://www.browserstack.com/guide/what-is-test-driven-development?psafe_param=1?keyword=&campaignid=&adgroupid=&adid=8784011037660164696&utm_source=google&utm_medium=cpc&utm_platform=paidads&utm_content=602353912717&utm_campapaidads&utm_content=602353912717&utm_campa.utm_term=+&gad_source=1&gclid=CjwKCAiAxreqBhAxEiwAfGfndN8P705lwnkvEFnCz_lueR2hnhmZXgboBQEtKTaCIRbhcb1SXOxBYhoC-WoQAD_BwwE)技術。 該技術包括： - 紅色 - 進行失敗的測試 - 綠色 - 使此測試通過 - 重構 - 重構所做的事情，刪除重複的內容 為了編寫一套好的測試，我們將使用 3A 技術： - 安排：準備上下文。 - 行動：執行我們想要示範的行動。 - 斷言：表明我們預期的結果確實發生了。 從紅色開始，使用 3A 技術，我們將編寫第一個測試「成功搜尋小行星」： ``` import pytest def test_search_asteroids_with_sucess(): # Arrange: api_key = "DEMO_KEY" #Act: response = make_request(api_key) #Assertion: assert response.status_code == 200 # Validation of status code data = response.json() # Assertion of body response content: assert len(data) > 0 assert data["element_count"] > 0 ``` - 安排：我們建立一個變數來插入 api_key，在此步驟中，您可以插入執行測試所需的任何資料。通常，在這一步驟我們會建立模擬資料。 - Act：在這一步驟中我們呼叫了負責發出請求的方法 - 斷言：我們驗證回應 `方法或類別的名稱應以 test 開頭` 若要執行我們的測試，請在命令提示字元中執行： ``` pytest test.py ``` 我們將收到一個錯誤，因為我們沒有建立執行請求的方法： ``` test.py F [100%] ====================================================================== FAILURES ====================================================================== _________________________________________________________ test_search_asteroids_with_sucess __________________________________________________________ def test_search_asteroids_with_sucess(): > response = make_request() E NameError: name 'make_request' is not defined test.py:5: NameError ============================================================== short test summary info =============================================================== FAILED test.py::test_search_asteroids_with_sucess - NameError: name 'make_request' is not defined ================================================================= 1 failed in 0.01s ================================================================== ``` 現在，讓我們建立方法來執行請求： ``` import requests def make_request(api_key): base_url = "https://api.nasa.gov/neo/rest/v1/feed/" response = requests.get(f'{base_url}?api_key={api_key}') return response ``` 現在，再次執行我們的測試： ``` ================================================================ test session starts ================================================================= platform darwin -- Python 3.11.5, pytest-7.4.3, pluggy-1.3.0 rootdir: /Users/Documents/tests_python collected 1 item test.py . [100%] ================================================================= 1 passed in 20.22s ================================================================= ``` --- ## 重構我們的測試 現在我們已經了解如何使用 pytest 建立測試以及如何建立請求，我們可以編寫其他測試並開始重構測試。我們要做的第一個重構是從測試文件中刪除請求方法。我們將建立一個名為「make_requests.py」的新文件，其中將包含我們的請求，並將我們所做的請求移至此文件： ``` import requests def make_request(api_key): base_url = "https://api.nasa.gov/neo/rest/v1/feed/" response = requests.get(f'{base_url}?api_key={api_key}') return response ``` 現在，我們需要考慮在其他測試中重複使用此方法，因為我們需要為不同的測試傳遞不同的參數。我們可以透過很多方法來做到這一點，在本教程中，我們將參數的名稱從“api_key”更改為“query_parameters”。我們這樣做是為了讓我們的方法更加靈活，我們可以一次傳遞參數進行測試： ``` import requests def make_request(query_parameters): base_url = "https://api.nasa.gov/neo/rest/v1/feed/" response = requests.get(f'{base_url}?{query_parameters}') return response ``` 之後，我們需要更改我們的測試文件。我們將導入我們建立的這個方法： ``` from make_requests import make_request ``` 為了以更好的方式組織我們的測試，並遵循 pytest 文件的建議，我們將測試移至類別「TestClass」： 再次執行我們的測試： ``` ============================= test session starts ============================== collecting ... collected 7 items test.py::TestClass::test_search_asteroids_with_sucess test.py::TestClass::test_search_asteroids_with_query_parameters_empty test.py::TestClass::test_search_asteroids_with_start_date test.py::TestClass::test_search_asteroids_with_end_date test.py::TestClass::test_search_asteroids_in_valid_range test.py::TestClass::test_search_asteroids_in_invalid_range test.py::TestClass::test_search_asteroids_in_invalid_token ============================== 7 passed in 5.85s =============================== PASSED [ 14%]PASSED [ 28%]PASSED [ 42%]PASSED [ 57%]PASSED [ 71%]PASSED [ 85%]PASSED [100%] Process finished with exit code 0 ``` ### 產生 html 報告結果 為了更好地視覺化您的測試結果，我們可以使用 pytest-html-reporter 庫產生報告 html，為此，我們首先需要安裝該套件： ``` pip install pytest-html ``` 若要產生報告，請在執行測試時新增： ``` pytest test.py --html-report=./report/report.html ``` 將產生一個包含測試結果的 .html 文件，如下所示：  ## 結論 本文是一篇教程，介紹如何開始使用 python 和 pytest 框架為 API 編寫自動化測試以及如何產生一個報告 html。 您可以在[此處](https://github.com/aliciamarianne1507/tests_python)存取本教學中使用的專案。 我希望這些內容對您有用。 如果您有任何疑問，請隨時與我聯繫！ 親親，下週見💅🏼 --- 原文出處：https://dev.to/m4rri4nne/automating-your-api-tests-using-python-and-pytest-23cc
## 簡介 最佳的易於建構的人工智慧產品整合清單。 這些可以為你的專案帶來魔力，所以別忘了向他們表達支持🌟 現在讓我們一起走上AI之路👨🌾 --- ## 1. [CopilotPortal](https://github.com/RecursivelyAI/CopilotKit)：將可操作的 LLM 聊天機器人嵌入您的應用程式中。  應用程式中的上下文感知 LLM 聊天機器人可以回答問題並採取行動。 只需幾行程式碼即可獲得一個可用的聊天機器人，然後根據需要進行自訂和嵌入。 ``` import "@copilotkit/react-ui/styles.css"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; export default function App(): JSX.Element { return ( <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> <CopilotSidebarUIProvider> <YourContent /> </CopilotSidebarUIProvider> </CopilotProvider> ); } ``` https://github.com/RecursivelyAI/CopilotKit --- ## 2. [LinguiJS](https://github.com/lingui/js-lingui) - 自動且簡單的國際化  簡單而強大的開源國際化函式庫。 易於整合的框架，用於建立多語言反應應用程式。 ``` import { Trans } from "@lingui/macro" function App() { return ( <Trans id="msg.docs" /* id is optional */> Read the <a href="https://lingui.dev">documentation</a> for more info. </Trans> ) } ``` https://github.com/lingui/js-lingui --- ## 3. Pezzo.ai - 可觀測性、成本和即時工程平台  用於管理 OpenAI 通話的集中平台。 優化您的提示和令牌使用。追蹤您的人工智慧使用情況。 免費且易於整合。 ``` const prompt = await pezzo.getPrompt("AnalyzeSentiment"); const response = await openai.chat.completions.create(prompt); ``` https://github.com/pezzolabs/pezzo --- ## 4. CopilotTextarea - React 應用程式中的 AI 驅動寫作  具有 Github CopilotX 功能的任何 React `<textarea>` 的直接替代品。 自動完成、插入、編輯。 可以即時或由開發人員提前提供任何上下文。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; // Provide context... useMakeCopilotReadable(...) // in your component... <CopilotProvider> <CopilotTextarea/> </CopilotProvider>` ``` https://github.com/RecursivelyAI/CopilotKit --- ## 5. LangChain - 將人工智慧整合到鏈中。  易於使用的 API 和函式庫，用於將 LLM 新增到應用程式中。 將不同的人工智慧元件和模型連接在一起。 輕鬆嵌入上下文和語義資料以實現強大的整合。 https://github.com/langchain-ai/langchain --- ## 6. SwirlSearch - 人工智慧驅動的搜尋。  LLM 支援的搜尋、摘要和輸出。 同時搜尋多個內容來源並產生整合輸出。 功能強大，可自訂各種資料來源的應用程式內整合。 https://github.com/swirlai/swirl-search --- ## 7. ReactAgent - 用於從使用者故事產生 React 元件的實驗性 LLM 代理  使用 GPT-4 將使用者故事轉化為可用的 React 元件的實驗工具。 為其提供本地設計以實現一致的輸出和設計語言。 https://github.com/eylonmiz/react-agent --- 感謝大家！ --- 原文出處：https://dev.to/copilotkit/7-easy-ai-product-integrations-to-keep-up-with-the-times--1cg2
## 簡介 在本教程中，您將學習如何在 Kubernetes（容器編排平台）上部署您的第一個 JavaScript 應用程式☸️。 我們將部署一個簡單的 **express** 伺服器，該伺服器使用 **Minikube** ✨ 在本機 Kubernetes 上傳回範例 JSON 物件。 **先決條件📜：** - **Docker**：用於容器化應用程式。 🐋 - **Minikube**：用於在本地執行 Kubernetes。 ☸️  *** ## Odigos - 開源分散式追蹤 **無需編寫任何程式碼即可同時監控所有應用程式！** 利用唯一可以在所有應用程式中產生分散式追蹤的平台來簡化 OpenTelemetry 的複雜性。 我們真的才剛開始。 可以幫我們加個星星嗎？請問？ 😽 https://github.com/keyval-dev/odigos [](https://github.com/keyval-dev/odigos) --- ### 讓我們設定一下🚀 我們將首先初始化我們的專案： ``` npm init -y ``` 這會使用 `package.json` 📝 檔案初始化 **NodeJS** 專案，該檔案追蹤我們安裝的依賴項。 安裝 Express.js 框架 ``` npm install express ``` 現在，在 `package.json` 中，依賴項物件應該如下所示。 ✅ ``` "dependencies": { "express": "^4.18.2" } ``` 現在，在專案的根目錄中建立一個「index.js」檔案並新增以下程式碼行。 🚀 ``` // 👇🏻 Initialize express. const express = require("express"); const app = express(); const port = 3000; // 👇🏻 Return a sample JSON object with a message property on the root path. app.get("/", (req, res) => { res.json({ message: "Hello from Odigos!", }); }); // 👇🏻 Listen on port 3000. app.listen(port, () => { console.log(`Server is listening on port ${port}`); }); ``` 我們需要在「package.json」中新增一個腳本來執行應用程式。將其新增至 `package.json` 的腳本物件中。 ``` "scripts": { "dev": "node index.js" }, ``` 現在，要檢查我們的應用程式是否正常執行，請使用「npm run dev」執行伺服器，並透過 CLI 或在瀏覽器中向「localhost:3000」發出 get 請求。 ✨ 如果您使用 CLI，請確保已安裝了 [cURL](https://curl.se/)。 ✅ ``` curl http://localhost:3000 ``` 你應該看到這樣的東西。 👇🏻  現在，您可以使用「Ctrl + C」簡單地停止正在執行的 Express 伺服器🚫 我們的範例應用程式已準備就緒！ 🎉 現在，讓我們將其容器化並推送到 Kubernetes。 🐳☸️ *** ### 將應用程式容器化📦 我們將使用 **Docker** 來容器化我們的應用程式。 在專案的根目錄中，建立一個名為「Dockerfile」的新檔案。 > 💡 確保名稱完全相同。否則，您將需要明確傳遞“-f”標誌來指定“Dockerfile”路徑。 ``` # Uses node as the base image FROM node:21-alpine # Sets up our working directory as /app inside the container. WORKDIR /app # Copyies package json files. COPY package.json package-lock.json ./ # Installs the dependencies from the package.json RUN npm install --production # Copies current directory files into the docker environment COPY . . # Expose port 3000 as our server uses it. EXPOSE 3000 # Finally runs the server. CMD ["node", "index.js"] ``` 現在，我們需要建置 ⚒️ 這個容器才能實際使用它並將其推送到 Kubernetes。 執行此命令來建置“Dockerfile”。 > 🚨 如果您在 Windows 上執行它，請確保 Docker Desktop 正在執行。 ``` // 👇🏻 We are tagging our image name to express-server docker build -t express-server . ``` 現在，是時候執行容器了。 🏃🏻♂️💨 ``` docker run -dp 127.0.0.1:3000:3000 express-server ``` > 💡 我們正在後台執行容器，容器連接埠 3000 對應到我們的電腦連接埠 3000。 再次執行以下命令，您應該會看到與之前相同的結果。 ✅ ``` curl http://localhost:3000 ``` > **注意**：這次應用程式沒有像以前一樣在我們的電腦上執行。相反，它在容器內運作。 🤯 *** ### 在 Kubernetes 中部署 ## 如前所述，我們將使用 Minikube 在本機電腦上建立編排環境，並使用 kubectl 命令與 Kubernetes 互動。 😄 **啟動 Minikube：🚀** ``` minikube start ``` 由於我們將使用本機容器而不是從 docker hub 中提取它們，因此請執行這些命令。 ✨ ``` eval $(minikube docker-env) docker build -t express-server . ``` `eval $(minikube docker-env)`：用於將終端機的 `docker-cli` 指向 minikube 內的 Docker 引擎。 > 🚨 注意，我們很多人都使用 Fish 作為 shell，因此對於 Fish 來說，相應的命令是 `eval (minikube docker-env)` 現在，在專案根目錄中，建立一個嵌套資料夾“k8/deployment”，並在部署資料夾中建立一個名為“deployment.yaml”的新文件，其中包含以下內容。 在此文件中，我們將管理容器的部署。 👇🏻 ``` # 👇🏻 /k8/deployment/deployment.yaml apiVersion: apps/v1 kind: Deployment metadata: name: express-deployment spec: selector: matchLabels: app: express-svr template: metadata: labels: app: express-svr spec: containers: - name: express-svr image: express-server imagePullPolicy: Never # Make sure to set it to Never, or else it will pull from the docker hub and fail. resources: limits: memory: "128Mi" cpu: "500m" ports: - containerPort: 3000 ``` 最後，執行此命令以應用我們剛剛建立的部署配置「deployment.yaml」。 ✨ ``` kubectl apply -f .\k8\deployment\deployment.yaml ``` 現在，如果我們查看正在執行的 Pod，我們可以看到 Pod 已成功建立。 🎉  要查看我們建立的 Pod 的日誌，請執行“kubectl messages <pod_name>”，我們應該會看到以下內容。  至此，我們的「express-server」就成功部署在本地 Kubernetes 上了。 😎 *** 這就是本文的內容，我們成功地將應用程式容器化並將其部署到 Kubernetes。 本文的原始碼可以在這裡找到 https://github.com/keyval-dev/blog/tree/main/js-on-k8s 非常感謝您的閱讀！ 🎉🫡 --- 原文出處：https://dev.to/odigos/the-fastest-way-to-deploy-your-javascript-app-to-kubernetes-2j33
## **簡介** 在本文中，我將為您提供適用於任何機器學習專案的終極 Python 庫： - 機器學習週期每個步驟必須了解的函式庫 - EDA、資料清理、資料工程、建模等… - 全部開源 - 所有蟒蛇  --- ## 完整的應用程式 ### 1. 🚀[Taipy](https://github.com/Avaiga/taipy) 讓我們先討論一些經常被忽視的事情——實際上讓你的模型易於存取和有用。 Taipy 將會做到這一點，並將您的機器學習模型提升到一個新的水平。 它是一個開源程式庫，旨在輕鬆開發前端 (GUI) 和 ML/資料管道。不需要其他知識（沒有 CSS，什麼都不需要！）。它旨在加快應用程式開發，從最初的原型到生產就緒的應用程式。  Taipy 確保您的 ML 模型可以進入成熟的試點和應用程式，給您的最終用戶留下深刻的印象。 ---  https://github.com/Avaiga/taipy 我們已經快有 1000 顆星了，沒有你就無法做到這一點🙏 --- ## EDA、資料清理和資料工程 ### 2.🐼[Pandas](https://github.com/pandas-dev/pandas) 如何在不了解 Pandas 的情況下使用 Python 進行編碼？ 該庫有兩個核心資料結構：資料幀和系列，允許快速靈活的資料清理和準備。基本功能包括： - 載入資料中 - 重塑資料框 - 基本統計 Pandas 是啟動資料科學計畫的工具。 其他並發試圖超越 Pandas，但沒有像 Dask 或 Polars 那樣廣泛使用。 *這是未來文章的好主題！*  --- ### 3.🌱[Numpy](https://github.com/numpy/numpy) Numpy 雖然等級比 Pandas 低，但它是科學計算和資料預處理的必備工具。 它圍繞著陣列發展，並允許快速資料操作和數學函數。 該函式庫是另一個必須了解的 Python 函式庫，與 Pandas 一樣，也是以資料為中心的任務的必備函式庫。  --- ### 4.🔢[統計模型](https://github.com/statsmodels/statsmodels) 顧名思義，該函式庫提供了統計分析函數。 一系列功能涵蓋從描述性分析到統計測試；它也是一個處理時間序列資料、單變數和多元統計資料等的優秀函式庫。  --- ### 5.👓[YData Profiling](https://github.com/ydataai/ydata-profiling) YData Profiling 透過一行程式碼徹底分析資料來促進 EDA 步驟。 分析包括缺失值檢測、相關性、分佈分析等。 該工具非常用戶友好且簡單，可以輕鬆加入到您的資料科學工具箱中。  --- ## 機器學習/深度學習演算法 ### 6.💼 [Scikit-learn](https://github.com/scikit-learn/scikit-learn) 這可能是 Python 最著名的 3 個函式庫，這是理所當然的。 Sklearn 是機器學習領域的參考書。它包括不同的模型，例如 K 均值聚類、回歸和分類演算法。 它在降維技術方面也很出色。 Sklearn也提供資料選擇和驗證功能。它易於學習/使用，應該成為您資料科學之旅中的首選 ML 庫。  --- ### 7.🧠 [Keras](https://github.com/keras-team/keras) Keras 是一個高階 API，運作在 TensorFlow 等框架之上。如果從神經網路開始，請從 Keras 開始。它非常適合快速實施，因為它簡化了實施過程，使其成為神經網路實施的最佳初學者友善選項。  --- ### 8.🧠💪[TensorFlow](https://github.com/tensorflow/tensorflow) 這個庫是神經網路建模必須知道的。非常適合處理影像分類或 NLP（自然語言處理）等非結構化資料。 TensorFlow 廣泛應用於研究和工業領域，因為它為神經網路的設計和操作提供了完整的 API。 Keras（上面提到的）提供了一個更高層級（更簡單）的 API（它是建構在 TensorFlow 之上）。  --- ### 9.🌴[XGBoost](https://github.com/dmlc/xgboost) XGBoost 是有關機器學習演算法的最受歡迎的函式庫之一。 這個梯度提升庫廣泛用於現實生活中的用例，特別是表格資料。 它是 Kaggle 競賽獲勝者的最愛。 該庫包括回歸和分類演算法，但也提供特徵選擇工具。  --- ### 10.🐈[CatBoost](https://github.com/catboost/catboost) 如果您的資料集主要由分類資料組成，那麼這個函式庫代表分類提升（Categorical Boosting），它是您的最佳選擇。該庫將規避一種熱編碼的複雜性，從而無需預處理分類資料。當使用預設參數執行時，它可以提供比 XGBoost 更好的精度。  --- 希望您喜歡這篇文章！ 我是一名新手作家，歡迎任何改進建議！  如果您有任何疑問，請隨時與我們聯繫。 --- 原文出處：https://dev.to/taipy/top-10-python-libraries-for-any-ml-projects-3gfp
## 簡介 在本文中，您將學習如何使用 NextJS、Trigger.dev、Resend 和 OpenAI 建立簡歷產生器。 😲 - 加入基本詳細訊息，例如名字、姓氏和最後工作地點。 - 產生詳細訊息，例如個人資料摘要、工作經歷和工作職責。 - 建立包含所有資訊的 PDF。 - 將所有內容傳送到您的電子郵件  *** ## 你的後台工作平台🔌 [Trigger.dev](https://trigger.dev/) 是一個開源程式庫，可讓您使用 NextJS、Remix、Astro 等為您的應用程式建立和監控長時間執行的作業！ [](https://github.com/triggerdotdev/trigger.dev) 請幫我們一顆星🥹。 這將幫助我們建立更多這樣的文章💖 https://github.com/triggerdotdev/trigger.dev --- ## 讓我們來設定一下吧🔥 使用 NextJS 設定一個新專案 ``` npx create-next-app@latest ``` 我們將建立一個包含基本資訊的簡單表單，例如： - 名 - 姓 - 電子郵件地址 - 你的頭像 - 以及你今天為止的經驗！  我們將使用 NextJS 的新應用程式路由器。 開啟`layout.tsx`並加入以下程式碼 ``` import { GeistSans } from "geist/font"; import "./globals.css"; const defaultUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"; export const metadata = { metadataBase: new URL(defaultUrl), title: "Resume Builder with GPT4", description: "The fastest way to build a resume with GPT4", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en" className={GeistSans.className}> <body className="bg-background text-foreground"> <main className="min-h-screen flex flex-col items-center"> {children} </main> </body> </html> ); } ``` 我們基本上是為所有頁面設定佈局（即使我們只有一頁。） 我們設定基本的頁面元資料、背景和全域 CSS 元素。 接下來，讓我們打開“page.tsx”並加入以下程式碼： ``` <div className="flex-1 w-full flex flex-col items-center"> <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16"> <div className="w-full max-w-6xl flex justify-between items-center p-3 text-sm"> <span className="font-bold select-none">resumeGPT.</span> </div> </nav> <div className="animate-in flex-1 flex flex-col opacity-0 max-w-6xl px-3"> <Home /> </div> </div> ``` 這設定了我們的resumeGPT 的標題和主要的家庭元件。 <小時/> ## 建立表單的最簡單方法 保存表單資訊並驗證欄位最簡單的方法是使用react-hook-form。 我們將上傳個人資料照片。 為此，我們不能使用基於 JSON 的請求。 我們需要將 JSON 轉換為有效的表單資料。 那麼就讓我們把它們全部安裝吧！ ``` npm install react-hook-form object-to-formdata axios --save ``` 建立一個名為 Components 的新資料夾，新增一個名為「Home.tsx」的新文件，並新增以下程式碼： ``` "use client"; import React, { useState } from "react"; import {FormProvider, useForm} from "react-hook-form"; import Companies from "@/components/Companies"; import axios from "axios"; import {serialize} from "object-to-formdata"; export type TUserDetails = { firstName: string; lastName: string; photo: string; email: string; companies: TCompany[]; }; export type TCompany = { companyName: string; position: string; workedYears: string; technologies: string; }; const Home = () => { const [finished, setFinished] = useState<boolean>(false); const methods = useForm<TUserDetails>() const { register, handleSubmit, formState: { errors }, } = methods; const handleFormSubmit = async (values: TUserDetails) => { axios.post('/api/create', serialize(values)); setFinished(true); }; if (finished) { return ( <div className="mt-10">Sent to the queue! Check your email</div> ) } return ( <div className="flex flex-col items-center justify-center p-7"> <div className="w-full py-3 bg-slate-500 items-center justify-center flex flex-col rounded-t-lg text-white"> <h1 className="font-bold text-white text-3xl">Resume Builder</h1> <p className="text-gray-300"> Generate a resume with GPT in seconds 🚀 </p> </div> <FormProvider {...methods}> <form onSubmit={handleSubmit(handleFormSubmit)} className="p-4 w-full flex flex-col" > <div className="flex flex-col lg:flex-row gap-4"> <div className="flex flex-col w-full"> <label htmlFor="firstName">First name</label> <input type="text" required id="firstName" placeholder="e.g. John" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('firstName')} /> </div> <div className="flex flex-col w-full"> <label htmlFor="lastName">Last name</label> <input type="text" required id="lastName" placeholder="e.g. Doe" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('lastName')} /> </div> </div> <hr className="w-full h-1 mt-3" /> <label htmlFor="email">Email Address</label> <input type="email" required id="email" placeholder="e.g. [email protected]" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('email', {required: true, pattern: /^\S+@\S+$/i})} /> <hr className="w-full h-1 mt-3" /> <label htmlFor="photo">Upload your image 😎</label> <input type="file" id="photo" accept="image/x-png" className="p-3 rounded-md outline-none border border-gray-500 mb-3" {...register('photo', {required: true})} /> <Companies /> <button className="p-4 pointer outline-none bg-blue-500 border-none text-white text-base font-semibold rounded-lg"> CREATE RESUME </button> </form> </FormProvider> </div> ); }; export default Home; ``` 您可以看到我們從「使用客戶端」開始，它基本上告訴我們的元件它應該只在客戶端上執行。 為什麼我們只需要客戶端？ React 狀態（輸入變更）僅在用戶端可用。 我們設定兩個接口，「TUserDetails」和「TCompany」。它們代表了我們正在使用的資料的結構。 我們將“useForm”與“react-hook-form”一起使用。它為我們的輸入建立了本地狀態管理，並允許我們輕鬆更新和驗證我們的欄位。您可以看到，在每個「輸入」中，都有一個簡單的「註冊」函數，用於指定輸入名稱和驗證並將其註冊到託管狀態。 這很酷，因為我們不需要使用像“onChange”這樣的東西 您還可以看到我們使用了“FormProvider”，這很重要，因為我們希望在子元件中擁有“react-hook-form”的上下文。 我們還有一個名為「handleFormSubmit」的方法。這是我們提交表單後呼叫的方法。您可以看到我們使用“serialize”函數將 javascript 物件轉換為 FormData，並向伺服器發送請求以使用“axios”啟動作業。 您可以看到另一個名為“Companies”的元件。該元件將讓我們指定我們工作過的所有公司。 那麼讓我們努力吧。 建立一個名為「Companies.tsx」的新文件 並加入以下程式碼： ``` import React, {useCallback, useEffect} from "react"; import { TCompany } from "./Home"; import {useFieldArray, useFormContext} from "react-hook-form"; const Companies = () => { const {control, register} = We(); const {fields: companies, append} = useFieldArray({ control, name: "companies", }); const addCompany = useCallback(() => { append({ companyName: '', position: '', workedYears: '', technologies: '' }) }, [companies]); useEffect(() => { addCompany(); }, []); return ( <div className="mb-4"> {companies.length > 1 ? ( <h3 className="font-bold text-white text-3xl my-3"> Your list of Companies: </h3> ) : null} {companies.length > 1 && companies.slice(1).map((company, index) => ( <div key={index} className="mb-4 p-4 border bg-gray-800 rounded-lg shadow-md" > <div className="mb-2"> <label htmlFor={`companyName-${index}`} className="text-white"> Company Name </label> <input type="text" id={`companyName-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.companyName`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`position-${index}`} className="text-white"> Position </label> <input type="text" id={`position-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.position`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`workedYears-${index}`} className="text-white"> Worked Years </label> <input type="number" id={`workedYears-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.workedYears`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`workedYears-${index}`} className="text-white"> Technologies </label> <input type="text" id={`technologies-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.technologies`, {required: true})} /> </div> </div> ))} <button type="button" onClick={addCompany} className="mb-4 p-2 pointer outline-none bg-blue-900 w-full border-none text-white text-base font-semibold rounded-lg"> Add Company </button> </div> ); }; export default Companies; ``` 我們從 useFormContext 開始，它允許我們取得父元件的上下文。 接下來，我們使用 useFieldArray 建立一個名為 Companies 的新狀態。這是我們擁有的所有公司的一個陣列。 在「useEffect」中，我們新增陣列的第一項以對其進行迭代。 當點擊“addCompany”時，它會將另一個元素推送到陣列中。 我們已經和客戶完成了🥳 --- ## 解析HTTP請求 還記得我們向“/api/create”發送了一個“POST”請求嗎？ 讓我們轉到 app/api 資料夾並在該資料夾中建立一個名為「create」的新資料夾，建立一個名為「route.tsx」的新檔案並貼上以下程式碼： ``` import {NextRequest, NextResponse} from "next/server"; import {client} from "@/trigger"; export async function POST(req: NextRequest) { const data = await req.formData(); const allArr = { name: data.getAll('companies[][companyName]'), position: data.getAll('companies[][position]'), workedYears: data.getAll('companies[][workedYears]'), technologies: data.getAll('companies[][technologies]'), }; const payload = { firstName: data.get('firstName'), lastName: data.get('lastName'), photo: Buffer.from((await (data.get('photo[0]') as File).arrayBuffer())).toString('base64'), email: data.get('email'), companies: allArr.name.map((name, index) => ({ companyName: allArr.name[index], position: allArr.position[index], workedYears: allArr.workedYears[index], technologies: allArr.technologies[index], })).filter((company) => company.companyName && company.position && company.workedYears && company.technologies) } await client.sendEvent({ name: 'create.resume', payload }); return NextResponse.json({ }) } ``` > 此程式碼只能在 NodeJS 版本 20+ 上運作。如果版本較低，將無法解析FormData。 該程式碼非常簡單。 - 我們使用 `req.formData` 將請求解析為 FormData - 我們將基於 FormData 的請求轉換為 JSON 檔案。 - 我們提取圖像並將其轉換為“base64” - 我們將所有內容傳送給 TriggerDev --- ## 製作履歷並將其發送到您的電子郵件📨 建立履歷是我們需要的長期任務 - 使用 ChatGPT 產生內容。 - 建立 PDF - 發送到您的電子郵件 由於某些原因，我們不想發出長時間執行的 HTTP 請求來執行所有這些操作。 1. 部署到 Vercel 時，無伺服器功能有 10 秒的限制。我們永遠不會準時到達。 2.我們希望讓用戶不會長時間掛起。這是一個糟糕的使用者體驗。如果用戶關閉窗口，整個過程將失敗。 ### 介紹 Trigger.dev！ 使用 Trigger.dev，您可以在 NextJS 應用程式內執行後台進程！您不需要建立新伺服器。 他們也知道如何透過將長時間執行的作業無縫地分解為短期任務來處理它們。 註冊 [Trigger.dev 帳號](https://trigger.dev/)。註冊後，建立一個組織並為您的工作選擇一個專案名稱。  選擇 Next.js 作為您的框架，並按照將 Trigger.dev 新增至現有 Next.js 專案的流程進行操作。  否則，請點選專案儀表板側邊欄選單上的「環境和 API 金鑰」。  複製您的 DEV 伺服器 API 金鑰並執行下面的程式碼片段以安裝 Trigger.dev。仔細按照說明進行操作。 ``` npx @trigger.dev/cli@latest init ``` 在另一個終端中，執行以下程式碼片段以在 Trigger.dev 和 Next.js 專案之間建立隧道。 ``` npx @trigger.dev/cli@latest dev ``` 讓我們建立 TriggerDev 作業！ 前往新建立的資料夾 jobs 並建立一個名為「create.resume.ts」的新檔案。 新增以下程式碼： ``` client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { } }); ``` 這將為我們建立一個名為「create-resume」的新工作。 如您所見，我們先前從「route.tsx」發送的請求進行了架構驗證。這將為我們提供驗證和“自動完成”。 我們將在這裡執行三項工作 - 聊天GPT - PDF建立 - 電子郵件發送 讓我們從 ChatGPT 開始。 [建立 OpenAI 帳戶](https://platform.openai.com/) 並產生 API 金鑰。  從下拉清單中按一下「檢視 API 金鑰」以建立 API 金鑰。  接下來，透過執行下面的程式碼片段來安裝 OpenAI 套件。 ``` npm install @trigger.dev/openai ``` 將您的 OpenAI API 金鑰新增至 `.env.local` 檔案中。 ``` OPENAI_API_KEY=<your_api_key> ``` 在根目錄中建立一個名為「utils」的新資料夾。 在該目錄中，建立一個名為「openai.ts」的新文件 新增以下程式碼： ``` import { OpenAI } from "openai"; const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY!, }); export async function generateResumeText(prompt: string) { const response = await openai.completions.create({ model: "text-davinci-003", prompt, max_tokens: 250, temperature: 0.7, top_p: 1, frequency_penalty: 1, presence_penalty: 1, }); return response.choices[0].text.trim(); } export const prompts = { profileSummary: (fullName: string, currentPosition: string, workingExperience: string, knownTechnologies: string) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). \n I write in the technologies: ${knownTechnologies}. Can you write a 100 words description for the top of the resume(first person writing)?`, jobResponsibilities: (fullName: string, currentPosition: string, workingExperience: string, knownTechnologies: string) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). \n I write in the technolegies: ${knownTechnologies}. Can you write 3 points for a resume on what I am good at?`, workHistory: (fullName: string, currentPosition: string, workingExperience: string, details: TCompany[]) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). ${companyDetails(details)} \n Can you write me 50 words for each company seperated in numbers of my succession in the company (in first person)?`, }; ``` 這段程式碼基本上建立了使用 ChatGPT 的基礎設施以及 3 個函數：「profileSummary」、「workingExperience」和「workHistory」。我們將使用它們來建立各部分的內容。 返回我們的「create.resume.ts」並新增作業： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompts } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); }, }); ``` 我們建立了一個名為「openai-task」的新任務。 在該任務中，我們使用 ChatGPT 同時執行三個提示，並返回它們。 --- ## 建立 PDF 建立 PDF 的方法有很多種 - 您可以使用 HTML2CANVAS 等工具並將 HTML 程式碼轉換為映像，然後轉換為 PDF。 - 您可以使用「puppeteer」之類的工具來抓取網頁並將其轉換為 PDF。 - 您可以使用不同的庫在後端建立 PDF。 在我們的例子中，我們將使用一個名為「jsPdf」的簡單函式庫，它是在後端建立 PDF 的非常簡單的函式庫。我鼓勵您使用 Puppeteer 和更多 HTML 來建立一些更強大的 PDF 檔案。 那我們來安裝它 ``` npm install jspdf @typs/jspdf --save ``` 讓我們回到「utils」並建立一個名為「resume.ts」的新檔案。該文件基本上會建立一個 PDF 文件，我們可以將其發送到使用者的電子郵件中。 加入以下內容： ``` import {TUserDetails} from "@/components/Home"; import {jsPDF} from "jspdf"; type ResumeProps = { userDetails: TUserDetails; picture: string; profileSummary: string; workHistory: string; jobResponsibilities: string; }; export function createResume({ userDetails, picture, workHistory, jobResponsibilities, profileSummary }: ResumeProps) { const doc = new jsPDF(); // Title block doc.setFontSize(24); doc.setFont('helvetica', 'bold'); doc.text(userDetails.firstName + ' ' + userDetails.lastName, 45, 27); doc.setLineWidth(0.5); doc.rect(20, 15, 170, 20); // x, y, width, height doc.addImage({ imageData: picture, x: 25, y: 17, width: 15, height: 15 }); // Reset font for the rest doc.setFontSize(12); doc.setFont('helvetica', 'normal'); // Personal Information block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Summary', 20, 50); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitText = doc.splitTextToSize(profileSummary, 170); doc.text(splitText, 20, 60); const newY = splitText.length * 5; // Work history block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Work History', 20, newY + 65); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitWork = doc.splitTextToSize(workHistory, 170); doc.text(splitWork, 20, newY + 75); const newNewY = splitWork.length * 5; // Job Responsibilities block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Job Responsibilities', 20, newY + newNewY + 75); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitJob = doc.splitTextToSize(jobResponsibilities, 170); doc.text(splitJob, 20, newY + newNewY + 85); return doc.output("datauristring"); } ``` 該文件包含三個部分：「個人資訊」、「工作歷史」和「工作職責」區塊。 我們計算每個區塊的位置和內容。 一切都是以“絕對”的方式設置的。 值得注意的是“splitTextToSize”將文字分成多行，因此它不會超出螢幕。  現在，讓我們建立下一個任務：再次開啟 `resume.ts` 並新增以下程式碼： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompts } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; import { createResume } from "@/utils/resume"; const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); console.log('passed chatgpt'); const pdf = await io.runTask('convert-to-html', async () => { const resume = createResume({ userDetails: payload, picture: payload.photo, profileSummary: texts[0], jobResponsibilities: texts[1], workHistory: texts[2], }); return {final: resume.split(',')[1]} }); console.log('converted to pdf'); }, }); ``` 您可以看到我們新增了一個名為「convert-to-html」的新任務。這將為我們建立 PDF，將其轉換為 base64 並返回。 --- ## 讓他們知道🎤 我們即將到達終點！ 剩下的唯一一件事就是與用戶分享。 您可以使用任何您想要的電子郵件服務。 我們將使用 Resend.com 造訪[註冊頁面](https://resend.com/signup)，建立帳戶和 API 金鑰，並將其儲存到 `.env.local` 檔案中。 ``` RESEND_API_KEY=<place_your_API_key> ```  將 [Trigger.dev Resend 整合套件](https://trigger.dev/docs/integrations/apis/resend) 安裝到您的 Next.js 專案。 ``` npm install @trigger.dev/resend ``` 剩下要做的就是加入我們的最後一項工作！ 幸運的是，Trigger 直接與 Resend 集成，因此我們不需要建立新的「正常」任務。 這是最終的程式碼： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompt } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; import { createResume } from "@/utils/resume"; import { Resend } from "@trigger.dev/resend"; const resend = new Resend({ id: "resend", apiKey: process.env.RESEND_API_KEY!, }); const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); console.log('passed chatgpt'); const pdf = await io.runTask('convert-to-html', async () => { const resume = createResume({ userDetails: payload, picture: payload.photo, profileSummary: texts[0], jobResponsibilities: texts[1], workHistory: texts[2], }); return {final: resume.split(',')[1]} }); console.log('converted to pdf'); await io.resend.sendEmail('send-email', { to: payload.email, subject: 'Resume', html: 'Your resume is attached!', attachments: [ { filename: 'resume.pdf', content: Buffer.from(pdf.final, 'base64'), contentType: 'application/pdf', } ], from: "Nevo David <[email protected]>", }); console.log('Sent email'); }, }); ``` 我們在檔案頂部的「Resend」實例載入了儀表板中的 API 金鑰。 我們有 ``` integrations: { resend }, ``` 我們將其加入到我們的作業中，以便稍後在“io”內部使用。 最後，我們的工作是發送 PDF `io.resend.sendEmail` 值得注意的是其中的附件，其中包含我們在上一步中產生的 PDF 文件。 我們就完成了🎉  您可以在此處檢查並執行完整的源程式碼： https://github.com/triggerdotdev/blog --- ## 讓我們聯絡吧！ 🔌 作為開源開發者，我們邀請您加入我們的[社群](https://discord.gg/nkqV9xBYWy)，以做出貢獻並與維護者互動。請隨時造訪我們的 [GitHub 儲存庫](https://github.com/triggerdotdev/trigger.dev)，貢獻並建立與 Trigger.dev 相關的問題。 本教學的源程式碼可在此處取得： https://github.com/triggerdotdev/blog/tree/main/blog-resume-builder 感謝您的閱讀！ --- 原文出處：https://dev.to/triggerdotdev/creating-a-resume-builder-with-nextjs-triggerdev-and-gpt4-4gmf
 ## 介紹： React 開發人員可以透過使用設計模式來節省時間和精力，設計模式提供了一種使用經過測試且可信賴的解決方案來解決問題的快速方法。它們支援低耦合的內聚模組，從而幫助 React 開發人員建立可維護、可擴展且高效的應用程式。在本文中，我們將探索 React 設計模式並研究它們如何改進 React 應用程式的開發。 ## 容器和表示模式 容器和表示模式是一種旨在將反應程式碼中的表示邏輯與業務邏輯分離的模式，從而使其模組化、可測試並遵循關注點分離原則。 大多數情況下，在 React 應用程式中，我們需要從後端/儲存取得資料或計算邏輯並在 React 元件上表示該計算的結果。在這些情況下，容器和表示模式大放異彩，因為它可用於將元件分為兩類，即： * 容器元件，充當負責資料取得或計算的元件。 * 表示元件，其工作是將獲取的資料或計算值呈現在 UI（使用者介面）上。 容器和表示模式的範例如下所示： ``` import React, { useEffect } from 'react'; import CharacterList from './CharacterList'; const StarWarsCharactersContainer:React.FC = () => { const [characters, setCharacters] = useState<Character>([]) const [isLoading, setIsLoading] = useState<boolean>(false); const [error, setError] = useState<boolean>(false); const getCharacters = async () => { setIsLoading(true); try { const response = await fetch("https://akabab.github.io/starwars-api/api/all.json"); const data = await response.json(); setIsLoading(false); if (!data) return; setCharacters(data); } catch(err) { setError(true); } finally { setIsLoading(true); } }; useEffect(() => { getCharacters(); }, []); return <CharacterList loading={loading} error={error} characters={characters} />; }; export default StarWarsCharactersContainer; ``` ``` // the component is responsible for displaying the characters import React from 'react'; import { Character } from './types'; interface CharacterListProps { loading: boolean; error: boolean; users: Character[]; } const CharacterList: React.FC<CharacterListProps> = ({ loading, error, characters }) => { if (loading && !error) return <div>Loading...</div>; if (!loading && error) return <div>error occured.unable to load characters</div>; if (!characters) return null; return ( <ul> {characters.map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> ); }; export default CharacterList; ``` ## 有 Hooks 的元件組合 Hooks 是 React 16.8 中首次推出的全新功能。從那時起，他們在開發 React 應用程式中發揮了至關重要的作用。掛鉤是基本函數，可授予功能元件存取狀態和生命週期方法（以前僅可用於類別元件）的功能。另一方面，掛鉤可以專門設計來滿足元件要求並具有其他用例。 我們現在可以隔離所有狀態邏輯（一種需要反應性狀態變數的邏輯），並使用自訂掛鉤在元件中組合或使用它。因此，程式碼更加模組化和可測試，因為鉤子鬆散地綁定到元件，因此可以單獨測試。 帶有鉤子的元件組合示例如下所示： ``` // creating a custom hook that fetches star wars characters export const useFetchStarWarsCharacters = () => { const [characters, setCharacters] = useState<Character>([]) const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(false); const controller = new AbortController() const getCharacters = async () => { setIsLoading(true); try { const response = await fetch( "https://akabab.github.io/starwars-api/api/all.json", { method: "GET", credentials: "include", mode: "cors", headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }, signal: controller.signal } ); const data = await response.json(); setIsLoading(false); if (!data) return; setCharacters(data); } catch(err) { setError(true); } finally { setIsLoading(true); } }; useEffect(() => { getCharacters(); return () => { controller.abort(); } }, []); return [ characters, isLoading, error ]; }; ``` 建立自訂鉤子後，我們將其導入到我們的 **StarWarsCharactersContainer** 元件中並使用它； ``` // importing the custom hook to a component and fetch the characters import React from 'react'; import { Character } from './types'; import { useFetchStarWarsCharacters } from './useFetchStarWarsCharacters'; const StarWarsCharactersContainer:React.FC = () => { const [ characters, isLoading, error ] = useFetchStarWarsCharacters(); return <CharacterList loading={loading} error={error} characters={characters} />; }; export default StarWarsCharactersContainer; ``` --- <橫幅隨機/> --- ## 使用Reducers進行狀態管理 大多數情況下，處理元件中的許多狀態會導致許多未分組狀態的問題，這可能是處理起來很麻煩且具有挑戰性的。在這種情況下，減速器模式可能是有用的選擇。我們可以使用減速器將狀態分類為某些操作，這些操作在執行時可以變更分組的狀態。 此模式允許使用它的開發人員控制元件和/或掛鉤的狀態管理，讓他們在發送事件時管理狀態變更。 使用減速器模式的範例如下所示：  在上面的程式碼中，元件調度兩個操作： * “**login**”操作類型會觸發狀態更改，影響三個狀態值，即 **loggedIn**、**user**、**token**。 *“**註銷**”操作只是將狀態重設為其初始值。 ## 提供者的資料管理 提供者模式對於資料管理非常有用，因為它利用上下文 API 透過應用程式的元件樹傳遞資料。這種模式是一種有效的解決支柱鑽井問題的方法，這一直是 React 開發中普遍關注的問題。 為了實現提供者模式，我們首先建立一個提供者元件。 Provider 是 Context 物件提供給我們的一個高階元件。我們可以利用React提供的createContext方法來建構一個Context物件。 ``` export const ThemeContext = React.createContext(null); export function ThemeProvider({ children }) { const [theme, setTheme] = React.useState("light"); return ( <ThemeContext.Provider value={{ theme, setTheme }}> {children} </ThemeContext.Provider> ); } ``` 建立提供者後，我們將使用建立的提供者元件封裝依賴上下文 API 中的資料的元件。 為了從上下文 API 取得資料，我們呼叫 useContext 鉤子，它接受上下文作為參數（在本例中為 **ThemeContext**）。 ``` import { useContext } from 'react'; import { ThemeProvider, ThemeContext } from "../context"; const HeaderSection = () => { <ThemeProvider> <TopNav /> </ThemeProvider>; }; const TopNav = () => { const { theme, setTheme } = useContext(ThemeContext); return ( <div style={{ backgroundColor: theme === "light" ? "#fff" : "#000 " }}> ... </div> ); }; ``` ## 使用 HOC（高階元件）增強元件 高階元件接受一個元件作為參數，並傳回一個注入了附加資料或功能的增壓元件。 React 中 HOC 的可能性是由於 React 更喜歡組合而不是繼承。 高階元件 (HOC) 模式提供了一種增加或修改元件功能的機制，促進元件重複使用和程式碼共用。 HOC 模式的範例如下所示： ``` import React from 'react' const higherOrderComponent = Component => { return class HOC extends React.Component { state = { name: 'John Doe' } render() { return <Component name={this.state.name {...this.props} /> } } const AvatarComponent = (props) => { return ( <div class="flex items-center justify-between"> <div class="rounded-full bg-red p-4"> {props.name} </div> <div> <p>I am a {props.description}.</p> </div> </div> ) } const SampleHOC = higherOrderComponent(AvatarComponent); const App = () => { return ( <div> <SampleHOC description="Frontend Engineer" /> </div> ) } export default App; ``` 在上面的程式碼中， **<AvatarComponent/>** 由 **higherOrderComponent** 提供 props，它將在內部使用。 ## 複合元件 複合元件模式是一種 React 設計模式，用於管理由子元件組成的父元件。 這種模式背後的原理是將父元件分解為更小的元件，然後使用 props、上下文或其他反應資料管理技術來管理這些較小元件之間的互動。 當需要建立由較小元件組成的可重複使用、多功能元件時，這種模式會派上用場。它使開發人員能夠建立複雜的 UI 元件，這些元件可以輕鬆自訂和擴展，同時保持清晰簡單的程式碼結構。 複合元件模式的用例範例如下所示： ``` import React, { createContext, useState } from 'react'; const ToggleContext = createContext(); function Toggle({ children }) { const [on, setOn] = useState(false); const toggle = () => setOn(!on); return ( <ToggleContext.Provider value={{ on, toggle }}> {children} </ToggleContext.Provider> ); } Toggle.On = function ToggleOn({ children }) { const { on } = useContext(ToggleContext); return on ? children : null; } Toggle.Off = function ToggleOff({ children }) { const { on } = useContext(ToggleContext); return on ? null : children; } Toggle.Button = function ToggleButton(props) { const { on, toggle } = useContext(ToggleContext); return <button onClick={toggle} {...props} />; } function App() { return ( <Toggle> <Toggle.On>The button is on</Toggle.On> <Toggle.Off>The button is off</Toggle.Off> <Toggle.Button>Toggle</Toggle.Button> </Toggle> ); } ``` ## 道具組合 這需要從幾個相關的 props 建立一個物件，並將其作為單個 props 傳遞給元件。 這種模式允許我們清理程式碼並使管理 props 變得更簡單，當我們想要將大量相關屬性傳遞給元件時，它特別有用。 ``` import React from 'react'; function P(props) { const { color, size, children, ...rest } = props; return ( <p style={{ color, fontSize: size }} {...rest}> { children } </p> ); } function App() { const paragraphProps = { color: "red", size: "20px", lineHeight: "22px" }; return <P {...paragraphProps}>This is a P</P>; } ``` ## 受控輸入 受控輸入模式可用於處理輸入欄位。此模式涉及使用事件處理程序在輸入欄位的值發生變更時更新元件狀態，以及將輸入欄位的目前值儲存在元件狀態中。 由於React 控制元件的狀態和行為，因此該模式使程式碼比不受控制的輸入模式更具可預測性和可讀性，後者不使用元件的狀態，而是直接透過DOM（文件物件模型）對其進行控制。 受控輸入模式的用例範例如下所示： ``` import React, { useState } from 'react'; function ControlledInput() { const [inputValue, setInputValue] = useState(''); const handleChange = (event) => { setInputValue(event.target.value); }; return ( <input type="text" value={inputValue} onChange={handleChange} /> ); } ``` ## 使用forwardRefs 管理自訂元件 稱為 ForwardRef 的高階元件將另一個元件作為輸入並輸出一個傳遞原始元件引用的新元件。透過這樣做，子元件的 ref（可用於檢索底層 DOM 節點或元件實例）可供父元件存取。 當建立與第三方程式庫或應用程式中的另一個自訂元件互動的自訂元件時，在工作流程中包含 ForwardRef 模式非常有幫助。透過授予對庫的 DOM 節點或另一個元件的 DOM 實例的存取權限，它有助於將此類元件的控制權轉移給您。 forwardRef 模式的用例範例如下所示： ``` import React from "react"; const CustomInput = React.forwardRef((props, ref) => ( <input type="text" {...props} ref={ref} /> )); const ParentComponent = () => { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return <CustomInput ref={inputRef} />; }; ``` 在上面的程式碼中，我們使用「forwardRefs」從元件「<ParentComponent/>」觸發了另一個元件「<CustomInput/>」的焦點。 # 結論 我們在本文中討論了 React 設計模式，包括高階元件、容器呈現元件模式、複合元件、受控元件等等。透過將這些設計模式和最佳實踐合併到您的 React 專案中，您可以提高程式碼質量，促進團隊協作，並使您的應用程式更具可擴展性、靈活性和可維護性。 --- 原文出處：https://dev.to/refine/react-design-patterns-230o
 一週前，我參加了在芝加哥舉行的 Kubecon 2023。我讀了一些部落格並參加了會議上的一些101教程，但仍然對這項技術沒有很好的理解。最糟糕的是會議的最後一天——我叫了優步送我回飯店。我的司機問我“大會是關於什麼的？”我回答說“這是關於 Kubernetes 的”，但經過一番解釋後，很明顯我不知道自己在說什麼。 想像一下，參加完為期 3 天的會議後，無法向您的 Uber 司機描述這項技術。 _摀臉_所以，為了挽回自己，這是我重新想像的與我的優步司機的對話。 # 對話開始 我：想像一下，你是一家繁忙餐廳廚房的廚師。你有一組廚師為你工作，每個人都在準備膳食的不同部分——一組負責開胃菜，一組負責主菜，另一組負責甜點。您的工作就是協調這些廚師，確保準時為顧客提供餐點。你腦子裡有畫面嗎？  司機：明白了。 我：在這個場景中，主廚是 Kubernetes。就像主廚需要管理廚房中所有不同的廚師一樣，Kubernetes 可以幫助管理執行軟體所需的所有不同部分。 Kubernetes 的官方定義是“容器編排工具”，但由於“容器”這個詞在這裡非常抽象，因此您可以用“容器”一詞代替“廚師”。所以 Kubernetes 將是一個「廚師編排工具」。這樣，每次聽到這個詞時，您就可以在腦海中形成廚房的畫面。  司機：好的，目前為止是有道理的。但這些容器是什麼？我不能永遠想像他們是廚師。 我：是的，好點。現在您腦海中已經有了 Kubernetes 廚房的圖片，讓我們從最小到最大，深入了解所有不同的廚房角色如何映射到 Kubernetes 概念。 > 貨櫃 這個難題中最小的部分是容器，它基本上是任何軟體。例如，它可以是託管Web 應用程式的Node.js Web 伺服器，也可以是儲存資料的MongoDB 資料庫容器_（這句話更多是針對閱讀此部落格的工程師而言，我不會對我的Uber 司機說這句話😛 )_。在廚房裡，想像一下您正在為開胃菜提供湯和沙拉。湯就是你的容器。沙拉也將是它自己的容器。 我知道這個定義現在看起來有點武斷，但一旦我在即將推出的元件的上下文中解釋它，它就會更有意義。  > 吊艙 在廚房裡，吊艙就是用來盛湯和沙拉的盤子/托盤。在 Kubernetes 中，Pod 是可以容納 1 個或多個容器的東西。原因是 Pod 內的容器可以相互通訊。 給工程師：舉個例子，假設我的 pod 中有一個用於 Web 伺服器的容器和一個用於資料庫的容器。他們可以透過本地主機相互通訊。 至於用廚房來比喻，我真的想不出什麼。想像香腸派對的惡作劇，你的擬人化湯和沙拉開始互相聊天。但是開胃菜盤上的湯和沙拉無法與餐盤上的牛排和土豆通信，因為它們位於不同的盤子上（也就是說，不同的 Pod 不共享相同的網絡命名空間，因此無法相互通信.)  > 主節點 主廚負責管理和監督整個廚房。這就是我們之前談到的「容器編排」或「廚師編排」的概念。這個主節點將執行的編排工作的一些現實範例如下： > 擴展，即根據 CPU 使用率向上或向下調整正在執行的 pod 數量。在繁忙的廚房中，當顧客需求激增時，廚師可能需要透過準備更多菜餚來擴大營運規模。順便說一句，在此視覺化中需要注意的一件事 - 您可能會想像廚房正在招聘新廚師，但我希望您將其想像得更像是當前的廚師正在被克隆。當發生擴展時，Pod 本質上是在被複製。 > 自動部署，又稱為在 YAML 檔案中定義應用程式的依賴項和執行時間指令，以便它可以基於此組態進行部署。在廚房中，此 YAML 檔案類似於書麵食譜，告訴廚師如何製作菜餚以確保一致性和效率並進行準備。 > 負載平衡，又稱在不同 Pod 之間分配網路流量。在廚房中，負載平衡涉及將任務分配給烹飪站的不同廚師。也許甜點站的鮑勃因舀冰淇淋的請求超載，因此主廚克隆了鮑勃，並讓鮑勃 2.0 從鮑勃 1.0 手中接走了一些冰淇淋訂單。  同樣要注意的是：每個工作節點都有一個稱為「kubelet」的東西。在廚房場景中，「kubelet」類似於每張桌子上的廚師。廚師有很多工作，例如確保食物托盤正確組裝、幫助準備食材以及扔掉殘渣。同樣，「kubelet」的作用包括確保 pod 內的容器正在運作、幫助初始化 pod（例如安裝必要的依賴項）、幫助垃圾收集等等。 為工程師提供的一些額外背景資訊：Kubelet 是一個開源的可執行二進位檔案（又稱為包含 CPU 可以直接執行的機器碼指令的檔案），用 Go 程式語言編寫。  讓我們在這裡停一下。如果您理解到目前為止我所說的所有內容，您就了解了 Kubernetes 架構的基礎知識！如果您不想永遠依賴廚房圖像，我已將下圖中的所有廚房圖紙僅替換為 Kubernetes 術語。  司機：其實，這一切都很有道理。所以我明白了 Kubernetes 是什麼。但我還是不明白為什麼它有用。例如擁有它或學習它有什麼意義？ 我：是的，難題的最後一部分是了解 Kubernetes 的**如何**使用。人類如何與 Kubernetes 互動？ Kubernetes 在科技領域有何相關性/有用性？讓我們回顧一下廚房的類比來解釋更多概念。 - 餐廳/特許經營店的所有者類似於建立應用程式或服務的軟體開發人員。在麥當勞，特許經營權所有者（假設他們的名字是 Francis Cockadoodledoo）希望獲得有關每個麥當勞門市賺多少錢的訊息，並能夠根據需要解僱/僱用員工。為此，Francis Cockadoodledoo 可能會拿起電話打給主廚以獲取資訊並下達命令。在 Kubernetes 中，軟體工程師無法真正拿起電話與他們的 Kubernetes 叢集進行交互，但「主節點」有一個可以呼叫的 API 伺服器，這允許您存取所有任務。例如，工程師可以獲得所有 Pod、節點、服務的訊息，了解執行狀況和指標訊息，並能夠刪除或建立資源。 - 在餐廳吃飯的顧客類似於應用程式或服務的使用者。與麥當勞廚房為我製作巨無霸漢堡類似，Spotify Kubernetes 集群為我提供透過網頁瀏覽器收聽大量音樂的服務。 我已將這些新資訊納入下面的繪圖中。您將看到的實際上與您在谷歌上搜尋“Kubernetes 架構”時看到的圖表非常相似。   當然，我意識到我在解釋中遺漏了一些抽象概念，因為我覺得它們對於形成 Kubernetes 的基本思考模型並不重要。請隨意挖掘更多內容。當我自己深入研究時，我可能會在這個部落格中加入一些我認為有用的資源連結。 # 結論 我之所以選擇這種講故事的方式（透過與 Uber 司機對話的鏡頭來描述技術）是因為我想將 Kubernetes 分解成一種普遍可以理解且平易近人的東西。 感謝您的閱讀！如果您對改進我的寫作（或我糟糕的繪圖）有任何「建設性」回饋，請在評論中留下它們。 請欣賞這張我和我的同事在 #Kubecon 2023 上的照片。順便說一句，我們在那裡推廣我正在開發的產品。 如果您有興趣，您應該檢查一下。這是對過時終端機（命令列）體驗的現代詮釋，讓您成為更好的開發人員。請造訪 https://www.warp.dev/ 以了解更多資訊。  --- 原文出處：https://dev.to/therubberduckiee/explaining-kubernetes-to-my-uber-driver-4f60
原文出處：https://dev.to/jamesliudotcc/how-to-use-async-await-with-map-and-promise-all-1gb5 我發現自己一直在使用帶有 async 和 await 的 map 函數。我需要重新學習如何使用 Promise 來解決這個問題，但是一旦我解決了這個問題，語法就變得非常漂亮且可讀。 JavaScript 的 async 和 wait 語法是 ES2017 中的新語法。我認為語法非常簡潔，因為它允許我編寫比承諾金字塔更短、更容易理解的程式碼，類似於承諾是回調地獄的改進。 但是當你想從一堆請求中取回一堆資料時會發生什麼？ JavaScript 中沒有「await all」。這就是 `Promises.all()` 的用武之地。Promises.all() 收集一堆 Promise，並將它們匯總成一個 Promise。一旦所有內部承諾成功解決，Promise.all() 將返回已解決的承諾，其中所有內部承諾都已解決。為了讓事情變得更快，一旦任何內部 Promise 被拒絕，Promise.all() 就會拒絕。 重點是 Promise.all() 將一系列 Promise 轉換為單一 Promise，如果正常的話，它會解析為您想要的陣列。其他一切都只是細節。 不知何故，我花了很長時間才擺脫困境。這是我最終開始工作的程式碼，希望這有助於解釋。 假設您點擊一個 REST 端點並取得 REST 端點的 URL 陣列，其中包含您最終想要的內容。例如，您想從 Star Wars API 中找到有關電影 R2-D2 的一些資訊。無論出於何種原因，您都不能使用 SWAPI GraphQL。我們知道從網路取得是一個非同步操作，因此我們必須使用回呼、promise 或 async 和await 關鍵字。由於 R2-D2 出現在多部電影中，因此需要多次網路呼叫才能獲取所有電影。 首先，讓我們進行設定。讓我們只專注於我們正在開發的最小功能，因此我們將在命令列上使用 Node.js。 Node.js 沒有附帶 fetch，所以讓我們使用 npm 或 YARN 來安裝它。 ``` npm install node-fetch --save-dev ``` 或者 ``` yarn add node-fetch --dev ``` async/await 的一個問題是，await 關鍵字只允許在 async 函數內部使用。在真實的程式中，您可能已經進行了足夠的封裝，以便您可以在使用await關鍵字的函數上新增async關鍵字，但在臨時檔案中，我們希望從封閉的上下文中抽像出來。但作為 Javascript 程式設計師，我們知道如何透過將我們想要的內容包裝在即時呼叫的函數表達式中來解決這個問題。 ``` // prettier-ignore const fetch = require('node-fetch') // prettier-ignore (async () => { try { let characterResponse = await fetch('http://swapi.co/api/people/2/') let characterResponseJson = await characterResponse.json() console.log(characterResponseJson) } catch (err) { console.log(err) } } )() ``` 現在我們已經有了基本的 async/await 語法，我們可以檢查回應以查看我們想要的電影欄位。它是一個 URL 陣列。 ``` let films = characterResponseJson.films.map(async filmUrl => { let filmResponse = await fetch(filmUrl) let filmResponseJSON = filmResponse.json() return filmResponseJSON }) console.log(films) ``` 當您執行此程式碼時，您會得到一組待處理的承諾。您需要新的“async”，否則箭頭函數內的等待將無法工作。如果你不「等待」獲取，你會得到一堆被拒絕的承諾，並且錯誤告訴你處理你的承諾拒絕。 但回想一下，「Promise.all()」接受一組 Promise 並將它們包裝成一個 Promise。所以我們包裝我們的“map”函數。我們已經知道一些處理單一 Promise 的好語法。我們可以‘等待’。 ``` let characterResponse = await fetch('http://swapi.co/api/people/2/') let characterResponseJson = await characterResponse.json() let films = await Promise.all( characterResponseJson.films.map(async filmUrl => { let filmResponse = await fetch(filmUrl) return filmResponse.json() }) ) console.log(films) ``` 為了進行比較，promise 中的等效程式碼如下所示： ``` fetch('http://swapi.co/api/people/2/') .then(characterResponse => characterResponse.json()) .then(characterResponseJson => { Promise.all( characterResponseJson.films.map(filmUrl => fetch(filmUrl).then(filmResponse => filmResponse.json()) ) ).then(films => { console.log(films) }) }) ``` 對我來說，第一組 `.then().then()` 非常語意化，我幾乎可以遵循 async/await 文法。但是一旦我們進入“Promise.all()”，僅使用 Promise 語法事情就開始變得難以遵循。無論我們要對影片執行什麼操作，都將取代“console.log”，並且在“.then”連結語法中，它已經埋藏了 3 級縮排。淺層程式碼是易於理解的程式碼。
原文出處：https://dev.to/davidepacilio/40-free-html-landing-page-templates-3gfp 這樣你的產品就已經準備好了。您花了幾週的時間尋找要解決的正確問題，幾個月甚至幾年的時間開發出一個出色的解決方案來減輕客戶的痛苦，現在只缺少一件事：您幾乎準備好啟動- 您需要一個登陸頁。 即使您想銷售線上服務、電子書或數位課程，登陸頁面對於幫助您根據特定目標實現預期結果也至關重要，因此值得花一些時間找出您真正需要的東西來把它做好。 不幸的是，建立登陸頁面既困難又耗時：結構、設計、圖像、副本等等。這是極其艱難的。 好訊息是 - 您不必從頭開始設計著陸頁，並且有這麼多**免費著陸頁模板**，您可以立即輕鬆建立一個漂亮的著陸頁，從而節省開發時間您可以投資為您的企業創造正確的資訊. 我花了幾個小時研究並找到最好的免費 HTML 登陸頁面模板，結果，我列出了 **40 個漂亮的模板**，您可以將它們用於多種目的、工具和專案。例如： - 開源專案 - 數位服務、電子書和線上課程 - 時事通訊 - SaaS產品 - 行動應用程式 以下列表中的所有模板都是 100% 免費，由不同團隊和作者精心製作，並使用 HTML5 和 Bootstrap 建立。享受閱讀的樂趣，並隨意將它們用於您想要的任何用途。 ###1。 **Solid**  **[現場示範與下載](https://cruip.com/demos/solid/)** Solid 是一款單頁登陸頁面模板，專為線上工具、SaaS 產品和數位服務而設計。它採用 HTML5 建置，具有現代時尚的深色外觀、明亮的互補調色板、3D 圖標/插圖，並且經過明智的編碼和記錄，因此您不必擔心根據您的特定需求自訂模板，目的。 **附加功能：** - 易於調整的英雄佔位符 - 多功能和多用途的圖像 - 即用型定價選項卡 --- ###2。 **Switch**  **[現場示範及下載](https://cruip.com/demos/switch/)** Switch 是一款免費的 HTML 登陸頁面模板，以高設計標準和回應效能為理念建置。之所以稱為Switch，是因為它配備了頂級英雄切換開關，可讓您輕鬆在深色和淺色佈局之間切換，因此您可以透過展示真正原創的外觀和感覺來給用戶留下深刻印象，靈感來自於一天中變化的天空。 **附加功能：** - 基於向量的多色形狀 - 透視應用程式設計模型 - 行動優先的內容 --- ###3。 **SaaS 應用程式**  **[現場示範及下載](https://grayic.com/preview/?demo=saas-app)** SaaS 應用程式是一個免費的 Bootstrap 4 登陸頁面模板，具有有趣且友善的配色方案。它旨在為多種 SaaS 相關軟體和服務提供服務，如果您需要一套現代的現成人類插圖、現代圖像、定價元件和用於捕獲電子郵件地址的文本表單，那麼特別推薦它。 **附加功能：** - 現代與當代繪畫 - 大量現成的部分 - 專為不同用途和產品設計 --- ###4。 **April**  **[現場示範及下載](https://cruip.com/demos/april/)** April 擁有簡單的佈局和強大的自訂選項，適合每個需要美觀、響應式元件用於其專案或時事通訊服務的人。透過流暢的導航和一組有價值的編碼元素，如果您需要顯示應用程式功能、客戶評價以及頂部英雄部分的真實產品預覽，則該模板可以滿足您的需求。 **附加功能：** - 現代與當代繪畫 - 大量現成的部分 - 專為不同用途和產品設計 --- ###5。 **數位服務**  **[現場演示和下載](https://grayic.com/preview/?demo=digital-service)** 數位服務是一種響應式登陸頁面模板，旨在幫助您快速輕鬆地展示您的行動應用程式或線上狀態。它基於 Bootstrap 4，並附帶大量預先設計的部分，例如砌體推薦、定價表、輸入表單、三列功能部分等等。最後但並非最不重要的一點是，其設計的多功能性使該模板成為支援多個利基市場的完美選擇。 **附加功能：** - 測試應用程式原型的理想選擇 - 優雅且開源的圖像 - 適用於產品和線上服務 --- ###6。 **Venus**  **[現場示範與下載](https://cruip.com/demos/venus/)** Venus 是一個免費的單頁登陸頁面模板，基於預先建置的設計部分和 HTML5。它遵循響應式設計的最新最佳實踐，並且由於存在多個可編輯的行動應用程式佔位符、手工製作的向量插圖、Google 字體、社交媒體圖標和完全可編輯的顏色產品調色板，因此非常容易定制。 **附加功能：** - 頁面恆星動畫 - 靈活的佈局和內容設計 - 在任何裝置上都能完美執行 --- ###7。 **艾莉**  **[現場示範及下載](https://cruip.com/demos/ellie/)** 使用這個深色、明亮且緊湊的免費模板建立漂亮的登陸頁面並開始收集時事通訊訂閱者。有了 Ellie，只需不到 5 個步驟就可以讓您的產品脫穎而出，並且憑藉頂級英雄動畫和像素完美形狀的組合，您將永遠不會讓存取者在再次滾動到正文部分之前跳動。 **附加功能：** - 動態英雄過渡 - 內建示範功能 - 技術和廣泛的調色板 --- ###8。 **軟體**  **[現場示範及下載](https://grayic.com/preview/?demo=software)** 使用Berlin 輕鬆建立自訂且高度適應性的應用程式網站，這是一個免費的Bootstrap 4 登陸頁面模板，專為SaaS 專案建置，並且希望將更多潛在客戶轉化為客戶，並相信精心設計的登陸頁面可以在一個普通的產品和一個公認的國際軟體品牌。 **附加功能：** - 動態隨機產生的內容 - 智慧餐桌選項 - 影片示範部分 --- ###9。 **勞雷爾**  **[現場示範與下載](https://cruip.com/demos/laurel/)** Laurel 是一個基於最新版本 HTML5 的大膽而美麗的登陸模板，它將幫助您美麗而優雅地展示您的行動應用程式。功能方面，此範本附帶了 Sass 檔案、作為建置工具的 NPM 腳本以及 package.json 範例檔案。在設計方面，所有資產都是為了提供無盡而甜蜜的客製化選項而建造的。 **附加功能：** - 記錄良好的程式碼文件 - 即將推出的功能更新 - 完整的利基應用程式模板 --- ###10。 **棱鏡**  **[現場示範](https://webresourcesdepot.com/demo/prism/)** / **[下載](https://webresourcesdepot.com/freebie/prism/)** Prism 是一款輕量級、現代的免費模板，專為使用 Bootstrap 4、CSS、HTML 和 JavaScript 的開源專案而建置。使用者喜歡 Prism，因為它使用起來非常簡單，修改起來非常直觀，並且它涵蓋了任何人都可以從具有此類設計和功能特徵的登陸頁面中期望的大多數元素。 **附加功能：** - SEO專用設計 - 評論良好的程式碼 - 創意一頁版面 --- ###11。 **Web應用程式**  **[現場示範及下載](https://grayic.com/preview/?demo=web-app)** Web 應用程式是建立簡單HTML 登入頁面的最佳方式，可以幫助您吸引使用者使用下一個出色的Web 應用程式或桌面應用程式- 得益於詳細列出的功能部分、功能性幻燈片客戶以及引人入勝的號召性用語，Web 應用程式應用程式可以輕鬆快速地設定一個有吸引力的獨立頁面，以滿足不同的需求、範圍。 **附加功能：** - 有吸引力的按鈕和表格 - 終極 HTML 功能 - 不同的演示版本 --- ###12。 **騎士**  **[現場示範](https://webresourcesdepot.com/demo/knight/)** / **[下載](https://webresourcesdepot.com/freebie/knight/)** 身為黑夜中的勇敢騎士，Knight是一款專為產品登陸頁面設計的深色、現代、優雅的Bootstrap 4登陸頁面模板。它配備了 Feather & Font Awesome 圖示、光滑的滑桿、常見問題清單等福利。 Knight 使用 HTML5、CSS3、jQuery 和 Sass 建置，保證了令人難以置信的響應性能和流暢的自訂選項。 **附加功能：** - 出色的 UI/UX 和資產文件 - 自動調整影像大小 - 免費無限支持 --- ###13。 **開發手冊**  **[現場示範](https://themes.3rdwavemedia.com/demo/devbook/)** / **[下載](https://themes.3rdwavemedia.com/bootstrap-templates/product/devbook-free-bootstrap-4-book-ebook-landing-page-template-for-developers/)** DevBook 是一個免費的 Bootstrap 4 書籍登陸頁面模板，專為想要在線上推廣或銷售書籍/電子書的開發人員和程式設計師而設計。它包含吸引好奇的訪客成為潛在讀者的所有基本元素，並且由於它是完全客製化開發的，因此您可以輕鬆地將其與 Gumroad 等平台集成，它將代表您處理購買和付款。 **附加功能：** - 與現代瀏覽器相容 - 免費書籍模型 - 多個可用許可證 --- ###14。 **有**  **[現場示範](https://inovatik.com/tivo-landing-page/index.html)** / **[下載](https://inovatik.com/tivo-free-saas-app-登陸頁模板.html)** Tivo 是一款使用 HTML5 製作的免費應用程式登陸頁面模板，經過精確建立，可支援建立有吸引力的軟體即服務 (SaaS) 網站和 B2C 應用程式頁面。對於任何尋求簡單下拉導航、文章詳細資訊、視訊框、文字滑桿推薦以及允許製作無限數量的個人和商業專案的易於使用的許可證的人來說，Tivo 是一個智慧解決方案。 **附加功能：** - 功能聯繫表 - 谷歌字體和 Font Awesome - 在每個瀏覽器中經過全面測試 --- ###15。 **光滑**  **[現場示範](https://preview.uideck.com/items/slick/business/index.html)** / **[下載](https://uideck.com/templates/slick-free-引導模板/)** Slick 是一個基於 Bootstrap 4 和 HTML5 的免費原創多用途網頁模板。 Slick 提供卓越的設計技術和最佳的 UI/UX 實踐，可在任何類型的數位裝置（例如桌上型電腦、平板電腦和行動裝置）上提供出色的體驗。它為基於網路的軟體產品和行動應用程式提供了兩種不同的主頁變體。 **附加功能：** - CSS 庫和線條圖標 - 超豐富的排版 - 條紋設計靈感 --- ###16。 **線上課程**  **[現場示範及下載](https://grayic.com/preview/?demo=online-course)** 線上課程是一個免費的 HTML 登陸頁面模板，它為您提供建立業務和透過建立和銷售線上課程創造收入所需的一切。使用線上課程模板，您可以快速設定市場上排名第一的使用者體驗設計課程，並且由於有用元素的巨大變體，您可以支援隨時存取線上課程、視訊課程和複習系統。 **附加功能：** - 功能課程課程 - 常見問題部分 - 多種內容呈現 --- ###17。 **聯盟**  **[現場示範](https://webresourcesdepot.com/demo/union/)** / **[下載](https://webresourcesdepot.com/freebie/union/)** Union 是一個免費的登陸頁面，可以幫助您更快、更輕鬆地建立漂亮的響應式 HTML 網站。 Union 受到數千名滿意用戶的信賴，提供10 多種不同的配色方案、有序的Sass 檔案（用於快速自訂）、有吸引力的圖像，對於尋求具有多個可編輯元件的高效能一頁的創意團隊來說，它是理想的選擇。 **附加功能：** - 有效且手寫的程式碼 - 漂亮流暢的滾動 - 預先整合和功能形式 --- ###18。 **行動應用2.0**  **[現場示範及下載](https://grayic.com/preview/?demo=mobile-app-2-0)** Mobile App 2.0 是一款免費的行動應用模板，專為行動應用程式、新創公司、產品開發公司和特別注重用戶獲取的企業而設計。行動應用程式 2.0 為您提供了詳細記錄的設置，可讓您在 3 分鐘內完成設置並執行，並且不會影響輕鬆頁面佈局的可能性。 **附加功能：** - 基於向量的氣泡形狀 - 帶有畫廊截圖的滑塊 - 不同的演示類型 --- ###19。 **阿特拉斯**  **[現場示範](https://www.lapa.ninja/lab/atlas/)** / **[下載](https://www.lapa.ninja/freebies/atlas/)** Atlas 是一個響應靈敏且高度可自訂的啟動登陸頁面，提供許多出色的功能，例如推廣 SaaS、聯繫我們部分、優雅的英雄、定價標籤、手工製作的圖標和產品功能。借助 Atlas，您只需點擊幾下即可快速建立任何登陸頁面，並且使用 Bootstrap Framework，您還可以匯入自己喜歡的元件。 **附加功能：** - 版面安全可靠 - 最多 15 個文件 - 清新的佈置配色方案 --- ###20。 **簡單的**  **[現場示範](https://www.bootstrapdash.com/demo/simple/)** / **[下載](https://www.bootstrapdash.com/product/simple-landing-page/) ** Simple 是一款乾淨友善的單頁登陸頁面模板，旨在以現代且豐富多彩的外觀為您的用戶留下深刻印象。簡單的登陸頁面具有美觀整潔的設計，是展示您的早期新創公司、線上服務和數位產品的理想選擇。此範本具有創意和獨特的設計、人體插圖、像素完美的圖標以及一組預先建立的元素，可輕鬆呈現主要應用程式功能和優點。 **附加功能：** - 定期更新和改進 - 麻省理工學院許可 - 快速和友好的支持 --- ###21。 **幻影**  **[現場示範](https://webresourcesdepot.com/demo/phantom/)** / **[下載](https://webresourcesdepot.com/freebie/phantom/)** Phantom 是一款富有創意且現代的 Bootstrap 4 登陸頁面模板，專為想要為其副專案和開源工具建立快速、新穎的登陸頁面的開發人員而建置。此範本提供了獨特且利基的佈局，您可以立即適應自己的需求，並提供大量精心製作和組織的高品質編碼元素。 **附加功能：** - 響應靈敏並與現代設備相容 - 設計中包含螢幕截圖 - 可重複使用的元件 --- ###22。 **新的**  **[現場示範](https://demo.bootstraptemple.com/app-landing/)** / **[下載](https://bootstrapious.com/p/app-landing-page)** Nova 是由 HTML5 和 Bootstrap 4 提供支援的響應式專業行動應用程式登陸頁面。Nova 是一款功能強大且超級靈活的產品，非常適合各種應用程式登陸頁面。對於每個尋求新鮮的線上形像以及與通常的網站演示不同的東西的人來說，該模板是一個完美的解決方案。 **附加功能：** - 龐大且可變的元素庫 - 無需歸屬 - 可用於個人和商業專案 --- ###23。 **紗羅**  **[現場示範](https://inovatik.com/leno-landing-page/index.html)** / **[下載](https://inovatik.com/leno-free-mobile-app-登陸頁模板.html)** Leno 是一款免費的深色行動應用程式 HTML 登陸頁面，使用 HTML、CSS 和 Javascript 建置。這個引人注目的模板具有一個帶有佔位符大預覽的圖像滑塊、一個用於客戶推薦的動態輪播以及一組附加頁面，其中包括聯繫表單部分，潛在客戶可以在其中輕鬆聯繫您詢問或提出問題。 **附加功能：** - 經過 W3C 有效程式碼測試 - 動畫統計資料和數字 - GDPR 友善設計 --- ###24。 **折斷**  **[現場示範](https://webresourcesdepot.com/demo/snap/)** / **[下載](https://webresourcesdepot.com/freebie/snap/)** Snap 是建立展示實用程式應用程式的美觀登陸頁面的最快方法。透過 Snap，您將獲得現代網站以正確方式展示其功能所需的所有必要頁面和部分。其中一些功能包括定價標籤、支援部分、桌面佔位符、福利圖塊以及用於顯示用戶評論的輪播。 **附加功能：** - 企業數位化解決方案 - 靈活的主頁變化 - 在不同的行動裝置上進行測試 --- ###25。 **埃沃洛**  **[現場示範](https://inovatik.com/evolo-landing-page/index.html)** / **[下載](https://inovatik.com/evolo-free-startup-landing-頁面模板.html)** Evolo 是一個清新迷人的登陸頁面模板，專為各種線上服務和數位產品而設計。由於 Evolo 建立在靈活的元件之上，因此如果您希望輕鬆建立無限數量的附加頁面，Evolo 是一個很好的伴侶。該模板還提供了一系列支援元素，可以整合這些元素以方便地建立一個全新的網站。 **附加功能：** - 合作夥伴螢幕截圖滑桿 - 支援的專案數量不受限制 - 圖像檔案和文字標誌選項 --- ###26。 **基本的**  **[現場示範](https://preview.uideck.com/items/basic/)** / **[下載](https://uideck.com/templates/basic/)** Basic 是在 Bootstrap 4 和 HTML5 之上開發的軟體和 SaaS 登陸頁面範本。此範本包含新創公司快速展示數位產品所需的所有基本元素。基本它是完全響應式的，透過多個區塊進行編碼，而且它非常靈活，以至於增加 Bootstrap 4 的基本元件變得前所未有的容易。 **附加功能：** - 提供免費和專業功能 - 刪除頁腳積分 - 包含文件 --- ###27。 **快的**  **[現場示範](http://themehunt.com/item/1527640-quick-free-bootstrap-4-theme/preview)** / **[下載](https://themehunt.com/item/1527640-quick-free-bootstrap-4-theme)** Quick 是一個免費的 HTML 登陸頁面，專為行動優先專案、新創公司和數位服務而建置。此範本包含 50 多個預先建置元件、2 個有用的外掛程式和 4 個設計精美的響應式頁面。 Quick 是一個不斷改進的模板，每次新更新都會獲得額外的功能和 UI 元件，以取悅使用者。 **附加功能：** - 提供影片示範 - 智慧程式碼標記 - 包括 NPM 和 Gulp 等熟悉的工具。 --- ###28。 **開發援助**  **[現場示範](https://themes.3rdwavemedia.com/demo/devaid/)** / **[下載](https://themes.3rdwavemedia.com/bootstrap-templates/startup/devaid-free-bootstrap-theme-for-developers-side-projects/)** devAid 是一個乾淨的 Bootstrap 模板，非常適合幫助程式設計師展示他們的個人專案和開源產品。此範本配有 4 種不同的配色方案、來源 SCSS 文件，可輕鬆執行樣式自訂，並提供大量額外元素，可根據登陸所包含的工具立即調整內容。 **附加功能：** - 經典的標題版面 - 超快載 - 基於流行的前端框架 --- ###29。 **棉花糖**  **[現場示範](https://www.bootstrapdash.com/demo/marshmallow/)** / **[下載](https://www.bootstrapdash.com/product/marshmallow/)** Marshmallow 是一個 HTML 登陸頁面模板，專為各種類型的 SaaS 產品、新創公司和應用程式展示而設計。該模板 100% 響應，在所有類型的設備上看起來都令人驚嘆。 Marshmallow 具有設計精美的元素和內頁，讓您的網站看起來安全且專業。 **附加功能：** - 提供功能輪播 - 動態網站統計和數字 - 獨立的圖像和插圖 --- ###30。 **阿普蘭**  **[現場示範](https://preview.uideck.com/items/appland/)** / **[下載](https://uideck.com/templates/appland/)** Appland 是一款免費、優雅的登陸頁面模板，專為應用程式登陸、軟體和線上工具而建立。 Appland 功能強大，具有原始設計和新創公司從頭開始建立引人注目的登陸頁面所需的所有必要元素，具有預先建立的佈局視圖和無限的創意可能性。 **附加功能：** - 專為不同目的而設計 - 包括所有基本功能和元素 - 令人驚嘆的動畫英雄部分 --- ###31。 **SEO公司**  **[現場示範](https://demos.onepagelove.com/html/seo-company/)** / **[下載](https://onepagelove.com/seo-company)** SEO Company 是一款免費且優雅的單頁 HTML 模板，專為數位團隊設計，旨在建立乾淨且令人驚嘆的登陸頁面來展示其線上服務。在功能方面，此模板呈現出獨特的設計、有吸引力的平滑過渡、移動觸控滑桿以及一組充分混合的高級元素，以最大限度地提高轉換率。 **附加功能：** - 包含 PSD 範本和文件 - 直接下載 - 乾淨的鋸齒形特徵 --- ###32。 **炫**  **[現場示範](https://demos.onepagelove.com/html/dazzle/)** / **[下載](https://onepagelove.com/dazzle)** Dazzle 是一款響應式單頁模板，具有視差滾動佈局，旨在提供平滑的外觀和無限的自訂可能性。 Dazzle 的設計和開發考慮了最新的設計趨勢，並經過最佳化以包含所有基本元素，為幾乎所有可能的場合建立具有視覺吸引力的頁面。 **附加功能：** - 平滑滾動到各個部分 - 應用程式概述部分 - 推薦滑桿和下載按鈕 --- ###33。 **新時代**  **[現場示範](https://startbootstrap.com/previews/new-age/)** / **[下載](https://startbootstrap.com/themes/new-age/)** New Age 是一個應用程式登陸頁面模板，它將幫助您以絕對的快樂和平靜的心態精美地展示您的新行動應用程式或其他任何內容。該模板具有不同的免費使用 HTML/CSS 設備佔位符、帶有滾動動畫的定制導航以及帶有導航、部分和旁白的語義標記。由於其大膽、多彩且時尚的外觀，New 是您下一個基於應用程式的專案的優秀樣板！ **附加功能：** - 帶有滾動過渡的菜單 - 不同的按鈕樣式 - CSS 漸層與紋理和覆蓋 --- ###34。 **登陸頁**  **[現場示範](https://startbootstrap.com/previews/landing-page/)** / **[下載](https://startbootstrap.com/themes/landing-page/)** 登陸頁面是適用於HTML5 和Bootstrap 4 的響應式登陸頁面模板。即使對於非技術用戶來說，登陸頁面也可以輕鬆建立引人注目的網路形象，並且透過其詳細的修飾，您會發現可以更改任何模板部分或元素小菜一碟。在功能方面，此範本包括一個帶有響應式背景圖像的輸入表單選擇標題，以及展示應用程式功能和優點的豐富內容部分。 **附加功能：** - 包括簡單的線條圖標 - 動態內容部分 - 響應式背景圖片 --- ###35。 **即將推出**  **[現場示範](https://startbootstrap.com/previews/coming-soon/)** / **[下載](https://startbootstrap.com/themes/coming-soon/)** 如果您正在開發令人興奮的新產品，並且需要開始圍繞它建立受眾群體，「即將推出」範本將幫助您在幾分鐘內輕鬆建立令人驚嘆的發布前登陸頁面。即將推出是透過優雅的即用型產品吸引早期客戶的理想解決方案，並且由於它是為多種目的而設計的，因此您不需要進行大量的客製化工作來根據您的特定目的和需求調整內容。 **附加功能：** - 移動後備影像 - 電子郵件訂閱者選擇加入輸入 - 實用的影片背景 --- ###36。 **SaaS 訂閱**  **[現場示範及下載](https://grayic.com/preview/?demo=saas-sub)** 您的 SaaS 模型應基於您的產品提供的價值，不同的價值類型需要不同類型的訂閱。 SaaS 訂閱是完美的 HTML 登陸頁面模板，可協助您取得新使用者並將早期訪客轉化為潛在客戶。該模板具有幾個漂亮的圖形和預先建立的部分，並且只需較低的程式碼技能即可輕鬆編輯。 **附加功能：** - 可切換的定價選項 - 工作聯絡表 - 無限的定制可能性 --- ###37。 **開發空間**  **[現場示範與下載](https://www.lapa.ninja/lab/dev-space)** Dev Space 是一款非常實用且設計精美的登陸頁面模板，專為應用程式開發顧問服務而製作。此範本建立在可靠的基礎設施之上，其中包括全面的內部工具、幾個免費的流線型圖示、豐富的插圖包以及高效且易於維護的記錄良好的程式碼。 **附加功能：** - 預先設計的標誌雲 - 認識我們的團隊部分 - 互動的現代運用 --- ###38。 **降落**  **[現場示範](https://www.tailwindtoolbox.com/templates/landing-page-demo.php) / [下載](https://www.tailwindtoolbox.com/templates/landing-page)** Landing 是一個獨特且現代的 SaaS 登陸頁面模板，主要專注於流暢的使用者體驗，使您的網站脫穎而出。 Landing 中的所有圖像均可用於個人或商業專案，並且具有廣泛的預建置內容塊和元件，該模板為您提供了無限數量的自訂可能性。 **附加功能：** - 交易和卡片內容元件 - 多欄英雄部分 - 入門範本已準備好 --- ###39。 **凱羅斯**  **[現場示範](https://templatemag.com/demo/templates/CleanLanding/index.html) / [下載](https://templatemag.com/cleanlanding-bootstrap-landing-template/)** Kairos 是一個很棒的應用程式模板，可讓您以簡單且時尚的方式展示您的應用程式。此範本將讓您的客戶更了解您的應用程式提供的功能，首先是優點部分，然後是聯絡表單，您將獲得他們的興趣和信任，因此他們會嘗試您的應用程式。 Kairos 還使用平滑過渡來為您的著陸提供更自然的外觀和感覺。 **附加功能：** - 持續更新和錯誤修復 - 支援無限網站 - PHP 和 AJAX 聯絡表 --- ###40。 **蝴蝶**  **[現場示範](https://bootstrapmade.com/demo/Butterfly/) / [下載](https://bootstrapmade.com/butterfly-free-bootstrap-theme/)** Butterfly 是一個乾淨且有吸引力的單頁 Bootstrap 模板，專為希望展示與容器元素功能相關的號召性用語的特色部分的公司新創公司而建立。總體而言，此模板是用 HTML 5 開發的，所有支援的元素均支援視網膜，適用於較大的顯示器和小型行動裝置。 Butterfly 將幫助您建立令人驚嘆的登陸頁面，讓您的用戶停下來思考。 **附加功能：** - 透過電子郵件提供高級支援 - 整頁版面 - 以生產品質打造 --- ##結論 登陸頁面將佔您的用戶的大部分，因此他們需要您的全力關注和關注。有了這個免費的 HTML 登陸頁面模板列表，您就沒有理由不能擁有一個能夠正確展示您的產品並且轉換良好的登陸頁面。
您是否正在為您的 Web 應用程式尋找令人驚嘆的 VS Code 擴充功能？那麼這裡是 2023 年最佳 VS Code 擴充的驚人集合。 [**VS Code 擴充**](https://marketplace.visualstudio.com/VSCode) 在現代 Web 開發中至關重要。它們基本上是用於建立現代 Web 應用程式的原始程式碼編輯器。它是一個免費的開源編輯器。此外，它支援大量可用於 Web 應用程式開發的擴充功能。 **[VS Code](https://code.visualstudio.com/)** 擴充功能可讓您為安裝新增偵錯器、語言和工具，以支援您的開發工作流程。其豐富的可擴充性模型使擴充作者可以直接插入 VS Code UI，並透過 VS Code 使用的相同 API 提供功能。 因此，為了幫助您選擇正確的擴展，這些擴展將比它們從您的系統中獲得的資源增加更多的價值，我們列出了當今可用的最佳趨勢擴展的廣泛列表。雖然其中一些是眾所周知且普遍安裝的，但其他擴充功能是使用 Visual Studio Code 的經驗豐富的開發人員強烈推薦的擴充功能。 現在，在處理任何Web 專案時，我們建議您使用這個令人印象深刻的[Bootstrap 儀表板範本](https://themeselection.com/item/category/bootstrap-admin-templates/)，它具有現代且獨特的設計。 [](https://themeselection.com/products/sneat-bootstrapsneat-bootstrapsneat-bootstrapsneat-bootstrapsneat-bootstrapsneat-bootstrap-html-管理模板/) ##### 1. [GITLENS](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) [](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) GitLens 只是幫助您更好地理解程式碼。快速了解一行或程式碼區塊被更改的人、原因和時間。此外，它還可以讓您輕鬆探索程式碼庫的歷史和演變。 GitLens 增強了 Visual Studio Code 中內建的 Git 功能。它還可以幫助您透過 Git 責任註釋和程式碼鏡頭一目了然地視覺化程式碼作者身份，無縫導航和探索 Git 儲存庫，透過強大的比較命令獲得有價值的見解等等。 下載次數：5,972,117 ##### 2. [PRETTIER – 程式碼格式化程式](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) [](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 它是一個固執己見的程式碼格式化程序，透過解析程式碼並使用自己的規則重新列印程式碼（考慮最大行長度）來強制執行一致的樣式，並在必要時包裝程式碼。此外，它支援多種語言。它可以與大多數編輯器整合。 下載次數：7,676,738 ##### 3. [ESLINT](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) [](https://themeselection.com/wp-content/uploads/2020/08/12-ESLint-1024x640-2.png) ESLint 靜態分析您的程式碼以快速發現問題。 ESLint 靜態分析您的程式碼以快速發現問題。它內建於大多數文字編輯器中，您可以將 ESLint 作為持續整合管道的一部分執行。 ESLint 修復是語法感知的，因此您不會遇到傳統尋找和取代演算法引入的錯誤。 下載次數：10,236,293 ##### 4. [QUOKKA.JS](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) [](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) Quokka.js 是一款用於快速 JavaScript / TypeScript 原型設計的開發人員生產力工具。當您鍵入時，執行時間值會更新並顯示在 IDE 中程式碼旁邊。它使**原型設計、學習和測試** JavaScript / TypeScript **速度極快**。預設不需要配置，只需開啟一個新的 Quokka 檔案並開始試驗 下載次數：754,978 ##### 5. [路徑智慧](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) [](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) 它為檔案名稱加入了智慧感知風格的補全，讓您可以輕鬆輸入長路徑名。如果語句是導入語句，則預設刪除檔案副檔名 下載次數：3,318,156 ##### 6. [路徑自動完成](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete) [](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete) 此擴充功能為 VS Code 提供路徑補全，因此您不必記住那些長路徑。 下載次數：558,868 ##### 7. [VISUAL STUDIO INTELLICODE](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) [](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) 它旨在幫助開發人員和程式設計師提供智慧程式碼完成建議。此外，它還預設支援 Python、TypeScript/JavaScript、React 和 Java。 IntelliCode 將您最有可能使用的內容放在完成清單的頂部，從而節省您的時間。 IntelliCode 建議基於 GitHub 上的數千個開源專案，每個專案都有超過 100 顆星。當與程式碼的上下文結合時，完成清單將被自訂以促進常見實踐。 下載次數：6,401,943 ##### 8. [導入成本](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) [](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 此擴充功能將在編輯器中內聯顯示導入包的大小。此擴充功能使用 webpack 和 babili-webpack-plugin 來偵測導入的大小。 下載次數：710,298 ##### 9. [檔案大小](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize) [](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize ) 它在編輯器的狀態列中顯示焦點檔案的大小。 下載次數：198,807 **查看最佳的 [Asp.NET Core 管理範本](https://themeselection.com/item/category/asp-net-dashboard/)：** [](https://themeselection.com/item/sneat-aspnet-core-admin-模板/) ##### 10. [即時伺服器](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) [](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 點擊即可啟動開發本機伺服器，並透過一些額外功能觀看即時更改 下載次數：6,541,468 ##### 11. [專案經理](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) 它可以幫助您輕鬆存取您的專案，無論它們位於何處。不要再錯過那些重要的專案了。 下載次數：1,090,254 ##### 12. [程式碼拼字檢查器](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) [](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 適用於多種程式語言的簡單原始碼拼字檢查器。 下載次數：1,596,862 ##### 13. [支架對著色器](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) [](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 此擴充允許用顏色來辨識匹配的括號。使用者可以定義要匹配哪些標記以及要使用哪些顏色。 下載次數：1,154,226 ##### 14. [遠端 — SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) 遠端 – SSH 擴充功能可讓您使用任何具有 SSH 伺服器的遠端電腦作為開發環境。 下載次數：1,605,734 ##### 15. [REST 用戶端](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) [](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) REST 用戶端可讓您傳送 HTTP 請求並直接在 Visual Studio Code 中查看回應。 下載次數：1,025,700 ##### 16. [JAVASCRIPT (ES6) 程式碼片段](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) [](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) 此擴充包含 Vs Code 編輯器的 ES6 語法中的 JavaScript 程式碼片段（支援 JavaScript 和 TypeScript）。 下載次數：3,789,793 ##### 17. [程式碼執行器](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) [](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) Code Runner 是多種語言的執行程式碼片段或程式碼檔案。透過檔案總管的上下文功能表執行目前活動文字編輯器的程式碼檔案非常有用。此外，您還可以在文字編輯器中執行選定的程式碼片段。它透過在整合終端中執行程式碼來支援 REPL 下載次數：4,549,546 --- 建議使用[Next js Dashboard Template](https://themeselection.com/item/category/next-js-admin-template/)，因為它附帶預製元件，您可以直接使用，無需任何額外的工作。 例如，您必須查看 [**Sneat MUI React Next js 管理範本**](https://themeselection.com/item/sneat-mui-react-nextjs-admin-template/)。 [](https://themeselection.com/item/sneat-mui-react-nextjs-管理範本/) [**React 管理儀表板**](https://themeselection.com/item/category/react-admin-templates/) 具有 6 種獨特的佈局：預設、邊框、半暗和暗😎 --- ##### 18. [DOCKER](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) [](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-泊塢窗戶) Docker 擴充功能可讓您輕鬆地從 Visual Studio Code 建置、管理和部署容器化應用程式。它還提供容器內 Node.js、Python 和 .NET Core 的一鍵偵錯。此擴充功能可辨識使用最受歡迎的開發語言（C#、Node.js、Python、Ruby、Go 和 Java）的工作區，並相應地自訂生成的 Docker 檔案。 Docker 擴充功能為 VS Code 提供了 Docker 視圖。 Docker 檢視可讓您檢查和管理 Docker 資產：容器、映像、磁碟區、網路和容器登錄檔 下載次數：5,136,014 ##### 19. [更好的評論](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) [](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) Better Comments 擴充功能將幫助您在程式碼中建立更人性化的註解。您將能夠將註釋分類為警報、查詢、待辦事項、突出顯示等。此外，還可以對註釋掉的程式碼進行樣式設置，以明確該程式碼不應該在那裡，並且您想要的任何其他註釋樣式都可以在設定中指定。 下載次數：960,927 ##### 20. [Chrome 偵錯器](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) [](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) 偵錯器是 VS Code 擴展，用於在 Google Chrome 瀏覽器或支援 Chrome DevTools 協議的其他目標中偵錯 JavaScript 程式碼。它有助於除錯 eval 腳本、腳本標籤、動態加入的腳本以及設定斷點，包括在啟用來源映射時在來源檔案中設定斷點。 下載次數：1,617,311 ##### 21. [MARKDOWN 多合一](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) [](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) Markdown 所需的一切（鍵盤快速鍵、目錄、自動預覽等）。它支援以下 Markdown 語法： - [CommonMark](https://spec.commonmark.org/) - [表格](https://help.github.com/articles/organizing-information-with-tables/)、[刪除線](https://help.github.com/articles/basic-writing-and-formatting-syntax/#styling-text)和[任務清單](https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax#task-lists)（來自GitHub 風格的 Markdown） - [數學支援](https://github.com/waylonflinn/markdown-it-katex#syntax)（來自 KaTeX） - [前題](https://github.com/ParkSB/markdown-it-front-matter#valid-front-matter) 下載次數：5,136,014 ##### 22. [搜尋節點模組](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules) [](https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules) 搜尋節點模組是 VS Code 的簡單插件，可讓您快速導航專案的 node_modules 目錄中的檔案。 下載次數：571,040 ##### 23. [設定同步](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) 透過設定同步，您可以使用簡單的 Gist 跨電腦同步設定、片段、主題、檔案圖示、鍵綁定、工作區和擴充。它支援 GitHub Enterprise、帶有 @sync 關鍵字的編譯指示：host、os 和 env。一鍵上傳和下載很簡單。它允許您在電腦之間同步任何檔案。 下載次數：1,870,161 ##### 24. [NPM](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) 此擴充功能支援執行 package.json 檔案中定義的 npm 腳本，並根據 package.json 中定義的依賴項驗證已安裝的模組。這些腳本可以在整合終端或輸出視窗中執行。 下載次數：2,748,322 #### 結論： 嗯，到 2023 年，Visual Studio Code 的月活躍用戶數為 490 萬。毫無疑問，它是目前最好的程式碼編輯器。最好的功能之一是 [**Market Place**](https://marketplace.visualstudio.com/vscode) 提供大量擴展，可以根據您的需求準確定制它，並幫助您編寫高品質的程式碼。 在本文中，我們將向使用 CSS、HTML、JavaScript 以及 Angular、ReactJS 和 VueJS 等框架的前端工程師推薦這些 VS Code 擴充功能。 我們 [ThemeSelection](https://themeselection.com/) 使用其中一些擴充功能來建立現代且乾淨的 Bootstrap 管理範本。 [Sneat Bootstrap 5 HTML 管理範本](https://themeselection.com/products/sneat-bootstrap-html-admin-template/) [Chameleon 免費 Bootstrap 管理範本](https://themeselection.com/products/chameleon-admin-free-bootstrap-dashboard-template/) 您也可以檢查使用這些擴充功能製作的一些[引導管理範本](https://themeselection.com/products/category/bootstrap-admin-templates/)。 我們想說這個集合不是完整的，擴充不一定是最好的，但我們希望它可以幫助您選擇最好的工具來幫助您編寫高品質的程式碼並成為最好的 Web 開發人員。 如果您認為此列表缺少擴展，請隨時提出建議並透過在評論部分中加入您最喜歡的擴充功能來擴展它。 --- 原文出處：https://dev.to/themeselection/vs-codes-every-developers-should-use-in-2020-2fa3
原文出處：https://dev.to/avatsaev/simple-state-management-in-angular-with-only-services-and-rxjs-41p8 軟體開發中最具挑戰性的事情之一是狀態管理。目前，Angular 應用程式有幾個狀態管理庫：NGRX、NGXS、Akita...它們都有不同的狀態管理風格，最受歡迎的是 [NGRX](https://ngrx.io/)，它幾乎遵循React 世界的FLUX/Redux 原則（基本上使用單向資料流和不可變資料結構，但使用RxJS可觀察流）。 但是，如果您不想學習、設定、使用整個狀態管理庫，也不想處理一個簡單專案的所有樣板文件，如果您只想使用您已經熟悉的工具來**管理狀態，該怎麼辦？Anular 開發人員 * *，並且仍然獲得狀態管理庫提供的效能最佳化和一致性（推送變更偵測，一種不可變資料流）。 **免責聲明：這不是針對狀態管理庫的帖子。我們確實在工作中使用NGRX，它確實幫助我們在非常大和複雜的應用程式中管理非常複雜的狀態，但正如我常說的，NGRX 使簡單應用程式的事情變得複雜，並簡化了複雜應用程式的事情，請記住這一點。* * 在這篇文章中，我將向您展示一種僅使用 **RxJS** 和 **依賴注入** 來管理狀態的簡單方法，我們所有的元件樹都將使用 OnPush 更改檢測策略。 想像我們有一個簡單的 Todo 應用程式，我們想要管理它的狀態，我們已經設定了元件，現在我們需要一個服務來管理狀態，讓我們建立一個簡單的 Angular 服務： ``` // todos-store.service.ts @Injectable({provideIn: 'root'}) export class TodosStoreService { } ``` 所以我們需要的是，一種提供待辦事項清單的方法，一種加入、刪除、過濾和完成待辦事項的方法，我們將使用 getter/setter 和 RxJS 的行為主題來執行此操作： 首先我們建立在 todos 中讀寫的方法： ``` // todos-store.service.ts @Injectable({provideIn: 'root'}) export class TodosStoreService { // - We set the initial state in BehaviorSubject's constructor // - Nobody outside the Store should have access to the BehaviorSubject // because it has the write rights // - Writing to state should be handled by specialized Store methods (ex: addTodo, removeTodo, etc) // - Create one BehaviorSubject per store entity, for example if you have TodoGroups // create a new BehaviorSubject for it, as well as the observable$, and getters/setters private readonly _todos = new BehaviorSubject<Todo[]>([]); // Expose the observable$ part of the _todos subject (read only stream) readonly todos$ = this._todos.asObservable(); // the getter will return the last value emitted in _todos subject get todos(): Todo[] { return this._todos.getValue(); } // assigning a value to this.todos will push it onto the observable // and down to all of its subsribers (ex: this.todos = []) private set todos(val: Todo[]) { this._todos.next(val); } addTodo(title: string) { // we assaign a new copy of todos by adding a new todo to it // with automatically assigned ID ( don't do this at home, use uuid() ) this.todos = [ ...this.todos, {id: this.todos.length + 1, title, isCompleted: false} ]; } removeTodo(id: number) { this.todos = this.todos.filter(todo => todo.id !== id); } } ``` 現在讓我們建立一個方法來設定待辦事項的完成狀態： ``` // todos-store.service.ts setCompleted(id: number, isCompleted: boolean) { let todo = this.todos.find(todo => todo.id === id); if(todo) { // we need to make a new copy of todos array, and the todo as well // remember, our state must always remain immutable // otherwise, on push change detection won't work, and won't update its view const index = this.todos.indexOf(todo); this.todos[index] = { ...todo, isCompleted } this.todos = [...this.todos]; } } ``` 最後是一個可觀察的來源，它將只為我們提供已完成的待辦事項： ``` // todos-store.service.ts // we'll compose the todos$ observable with map operator to create a stream of only completed todos readonly completedTodos$ = this.todos$.pipe( map(todos => todos.filter(todo => todo.isCompleted)) ) ``` 現在，我們的待辦事項商店看起來像這樣： ``` // todos-store.service.ts @Injectable({providedIn: 'root'}) export class TodosStoreService { // - We set the initial state in BehaviorSubject's constructor // - Nobody outside the Store should have access to the BehaviorSubject // because it has the write rights // - Writing to state should be handled by specialized Store methods (ex: addTodo, removeTodo, etc) // - Create one BehaviorSubject per store entity, for example if you have TodoGroups // create a new BehaviorSubject for it, as well as the observable$, and getters/setters private readonly _todos = new BehaviorSubject<Todo[]>([]); // Expose the observable$ part of the _todos subject (read only stream) readonly todos$ = this._todos.asObservable(); // we'll compose the todos$ observable with map operator to create a stream of only completed todos readonly completedTodos$ = this.todos$.pipe( map(todos => todos.filter(todo => todo.isCompleted)) ) // the getter will return the last value emitted in _todos subject get todos(): Todo[] { return this._todos.getValue(); } // assigning a value to this.todos will push it onto the observable // and down to all of its subsribers (ex: this.todos = []) private set todos(val: Todo[]) { this._todos.next(val); } addTodo(title: string) { // we assaign a new copy of todos by adding a new todo to it // with automatically assigned ID ( don't do this at home, use uuid() ) this.todos = [ ...this.todos, {id: this.todos.length + 1, title, isCompleted: false} ]; } removeTodo(id: number) { this.todos = this.todos.filter(todo => todo.id !== id); } setCompleted(id: number, isCompleted: boolean) { let todo = this.todos.find(todo => todo.id === id); if(todo) { // we need to make a new copy of todos array, and the todo as well // remember, our state must always remain immutable // otherwise, on push change detection won't work, and won't update its view const index = this.todos.indexOf(todo); this.todos[index] = { ...todo, isCompleted } this.todos = [...this.todos]; } } } ``` 現在我們的智慧元件可以存取商店並輕鬆操作它： *（PS：我建議使用[ImmutableJS](https://immutable-js.github.io/immutable-js)而不是手動管理不變性）* ``` // app.component.ts export class AppComponent { constructor(public todosStore: TodosStoreService) {} } ``` ``` <!-- app.component.html --> <div class="all-todos"> <p>All todos</p> <app-todo *ngFor="let todo of todosStore.todos$ | async" [todo]="todo" (complete)="todosStore.setCompleted(todo.id, $event)" (remove)="todosStore.removeTodo($event)" ></app-todo> </div> ``` 這是完整的最終結果： [StackBlitz 上具有真實 REST API 的完整範例](https://stackblitz.com/edit/angular-rxjs-store?file=src%2Fapp%2Ftodos-store.service.ts) 這也是一種可擴展的狀態管理方式，您可以使用Angular 強大的DI 系統輕鬆地將其他儲存服務注入彼此，將其可觀察量與管道運算符結合起來以建立更複雜的可觀察量，並注入HttpClient 等服務以從伺服器提取資料例如。無需所有 NGRX 樣板或安裝其他狀態管理庫。盡可能保持簡單和輕鬆。 --- 在 Twitter 上關注我，以了解更多有趣的 Angular 相關內容：https://twitter.com/avatsaev
原文出處：https://dev.to/aswin2001barath/junior-to-senior-web-developer-roadmap-breakdown-1525 您是初級開發人員，正在努力爬上公司的階梯並成為高級開發人員嗎？ 您是一名感到迷茫、不知道從哪裡開始的全端開發人員嗎？ 🤔 嗯，您來對地方了！ 😎 這是初級開發人員成為受人尊敬的高級開發人員的逐步路線圖👨💻 ### 先決條件 - 基本的 HTML、CSS 和 JavaScript 知識。 - **MERN**（MongoDB、ExpressJS、ReactJS、NodeJS）或 **PERN**（PostgreSQL、ExpressJS、ReactJS、NodeJS）堆疊知識很有幫助，但不是必要的。 以下是路線圖中基本技術的細分，您可以在成為高級開發人員的過程中逐步遵循這些技術👨💻 ### SSH SSH 在安全遠端通訊中發揮著重要作用。透過熟悉 SSH 基礎知識、其命令、加密方法、SSH 金鑰管理以及將 SSH 應用於實際應用程式，您就可以順利成為高級開發人員。 - **到底什麼是 SSH？** - SSH 是 **S**ecure **Sh**ell 的縮寫，是一種旨在在兩台電腦之間建立安全通訊的協定。 （不用擔心這些花哨的術語——協議只是一堆規則，而 SSH 是一種特定類型的協議。） - **SSH 指令**：SSH 的主要用途之一是在遠端電腦上執行指令。這意味著您可以建立與伺服器的連接並使用 SSH 命令與其互動。 - **加密**：要真正掌握 SSH，了解加密等關鍵概念非常重要，其中涉及對稱和非對稱加密技術以及雜湊。這些概念為更深入地理解 SSH 的安全機制奠定了基礎。 - **SSH 金鑰**：SSH 的一個組成部分是使用 SSH 金鑰。這些密鑰由公鑰和私鑰組成。了解如何在伺服器上產生、管理和安全地儲存這些金鑰對於有效使用 SSH 至關重要。 - 練習並測試您的 SSH 技能： - 練習 SSH 技能的一個好方法是將本地電腦連接到 **GitHub** 等平台或 **DigitalOcean** 等雲端供應商。這種實務經驗將有助於鞏固您對 SSH 概念的理解。 - 想像這樣的場景：“您的 Web 應用程式一夜之間神秘地從伺服器上消失。您的任務是使用 SSH 將所有專案檔案恢復到伺服器上。”成功完成此任務可以展示您的 SSH 技能和解決問題的能力。基本上，如果你能做到這一點，那你就太棒了！ ### 表現： 效能優化是您成為高級開發人員的關鍵技能。以下技術將幫助您確保應用程式平穩且有效率地執行。透過掌握它們，您將成為性能大師。 **I) 網路優化：** - **最小化檔案**：最小化檔案至關重要，因為較小的檔案會導致更快的載入時間。這不僅可以增強使用者體驗，還可以降低專案的頻寬成本。在網路速度不同的行動裝置造訪網站的時代，這一點尤其重要。 - 1. **檔案壓縮**：較小的檔案意味著使用者的下載速度更快。了解如何使用 GZIP 等檔案壓縮技術來最小化檔案大小，以減少 HTML、CSS 和 JavaScript 等基於文字的檔案的大小。 - 2. **影像最佳化**：透過調整大小、壓縮和選擇正確的影像格式來優化影像可以顯著減小檔案大小。 ImageMagick 等工具或 TinyPNG 等線上服務可以幫助您完成此過程。 - **改善應用程式的交付**：改進的交付可以加快頁面載入時間，這可以直接影響用戶的參與度和保留率。這對於全球可存取性和確保全球用戶獲得一致的體驗也至關重要。 - 1. **內容交付網絡(CDN)**：CDN 是一種分散式伺服器網絡，策略性地位於全球範圍內，用於從地理位置更靠近用戶的伺服器交付Web 內容，例如圖像、腳本和影片，從而更快的加載時間並減少延遲。作為初級開發人員，了解如何利用 CDN 來增強交付。 - 2. **HTTP/2 協定**：HTTP/2 是萬維網使用的 HTTP 網路協定的主要修訂版。它透過同時發送多個檔案並透過多路復用、壓縮和標頭優化等功能實現更快的載入時間來增強網站效能。實作 HTTP/2 協定可以顯著改善交付。 - 練習並測試您的網路優化技能： - 效能測試：初級開發人員可以透過使用 Google 的 PageSpeed Insights、GTmetrix 或 WebPageTest 等工具進行效能測試來進行練習。這些工具評估網站的效能並提供改進建議。 - 真實世界專案：初級開發人員可以透過參與真實世界專案進行練習。從頭開始建立和優化網站或 Web 應用程式可以提供實施網路優化的實務經驗。 **II) 前端優化：** - **關鍵渲染路徑以及如何改進它：** - 了解和優化關鍵渲染路徑對於使您的網站快速加載至關重要。它涉及優化從用戶請求網頁到視覺上完整的事件順序。關鍵面向包括最大限度地減少 CSS 和 JavaScript 等渲染阻塞資源、利用瀏覽器快取以及利用非同步載入技術。 - **漸進式 Web 應用程式 (PWA) 與程式碼最佳化：** - 開發漸進式 Web 應用程式涉及最佳化程式碼以獲得卓越的使用者體驗。 PWA 是一種 Web 應用程式，可提供類似本機應用程式的體驗，具有離線功能、推播通知和快速載入時間等功能。程式碼優化實踐包括高效的快取策略和最大限度地減少 JavaScript 執行，同時確保互動順暢。 - **建立離線就緒的漸進式 Web 應用程式 (PWA)：** - 了解如何開發離線工作的 PWA，甚至使用 JavaScript、HTML 和 CSS 將其提交到應用程式商店。離線功能、快取和響應式設計是確保 PWA 無縫運作（無論使用者的網路連線為何）的重要組成部分。 - **程式碼分割：** - 程式碼分割是一種透過將 JavaScript 分成按需載入的較小套件來增強網站效能的策略。這種做法減少了初始載入時間並改善了整體使用者體驗，尤其是在較慢的網路連線上。 - **React 和 Redux 應用程式的智慧渲染：** - 透過智慧渲染技術提高 React 和 Redux 應用程式的速度。這涉及優化元件渲染和狀態管理，減少不必要的重新渲染，並確保您的應用程式快速響應用戶互動。 - 練習並測試您的知識： - 透過實際改善網站（例如公司登陸頁面）來提升您的技能。實施您在實際專案中學到的效能最佳化，然後測試結果。這種實務經驗對於鞏固您在前端優化方面的專業知識非常寶貴。 **III) 後端優化** 後端優化以及實踐和測試是確保您的應用程式能夠處理不斷增長的用戶群並提供高效、可靠的服務的基礎。 - **內容交付網路 (CDN)：** - 內容交付網絡是分散式伺服器網絡，用於儲存網站內容的快取副本。這些伺服器策略性地分佈在全球各地，允許用戶從地理位置較近的伺服器存取資料。這可以減少延遲、加速內容交付並增強用戶體驗。 - **擴充資料庫：** - 擴展資料庫涉及擴展資料庫的容量和效能以處理增加的資料和流量。技術包括垂直擴展（向單一伺服器加入更多資源）或水平擴展（加入更多伺服器來分配負載），確保您的應用程式在成長時保持回應靈敏且可靠。 - **壓縮來自後端的回應：** - 壓縮來自後端的回應意味著減少從伺服器發送到客戶端的資料大小。 GZIP 壓縮等技術可以顯著減小響應大小，從而縮短載入時間並減少頻寬消耗。 - **快取:** - 快取涉及將經常存取的資料或內容儲存在記憶體或磁碟上，以便更快地檢索。實施快取策略可以縮短回應時間、減少伺服器負載並增強應用程式的整體效能。 - **負載平衡和負載測試：** - 實作負載平衡器對於在多個伺服器之間分配傳入網路流量至關重要。負載平衡可確保沒有任何一台伺服器不堪負荷，從而提高資源利用率並提高可靠性。 - 負載測試模擬現實條件，以辨識效能瓶頸、確保可擴充性並最佳化您的基礎架構。 - 練習並測試您的知識： - 實作負載平衡器。 - 對專案實際執行負載測試。 ### 前端框架與概念 前端開發是您成為資深開發人員的基石。熟悉這些概念將為網路開發事業的蓬勃發展鋪路。 - **React 和 Redux**：React 和 Redux 是建立動態單頁應用程式的首選函式庫。首先掌握 React 基礎知識並建立一個專案。然後，深入研究 Redux，了解狀態管理並建立應用程式以實現可擴展性。 - **Webpack4 + Parcel**：Webpack4 和 Parcel 是用於捆綁專案文件和優化生產包的最新工具。獲得使用 Webpack 設定專案的實務經驗。 - 練習並測試你的技能： - 透過使用 React 和 Redux 建立專案來測試您的知識。 - 了解使用 Webpack 設定專案的細節。 ### 測試： 測試是一個重要的主題，但也經常被初學者和初級開發人員忘記。 公司喜歡測試。因此，如果您知道如何編寫單元測試和整合測試，您將編寫更好的軟體。 - **軟體測試 101：** 了解什麼是測試、測試類型、目前 Web 開發世界中的測試環境、測試工具和函式庫的類型是什麼、如何使用它們以及如何設定一切。 - **Jest**：用於測試的頂級庫之一。學習編寫同步和非同步測試、編寫模擬並產生覆蓋率報告 - **React 測試**：然後深入為您的 React 應用程式編寫測試。學習使用快照測試和酵素來編寫智慧測試，以避免應用程式中出現錯誤。 到此結束時，您應該了解整個測試環境，並可以輕鬆地編寫您遇到的任何測試。 ### 打字稿： TypeScript 是目前 Web 開發環境中最熱門的話題之一。 - **靜態類型**：了解靜態類型的基礎知識。了解為什麼 JavaScript 沒有靜態型別而是動態型別。 - **Typescript 101**：了解什麼是 TypeScript、如何使用 TypeScript、有哪些不同類型以及如何將它們新增到您的專案中。 - **React 中的 Typescript**：最終學習如何將 TypeScript 新增到您自己的 React 專案中。 再次確保您掌握這些主題。 ### SPA + 伺服器端 - **伺服器端渲染 (SSR)**：透過伺服器端渲染深入研究 Web 渲染的起源。了解為什麼 SSR 在 Web 開發中曾經並且仍然有用。了解為什麼有些公司繼續依賴 SSR 來滿足特定需求。探索 React 中伺服器端渲染的實現，並權衡這種方法的優缺點。 - **客戶端渲染 (CSR)**：深入了解單頁應用程式 (SPA) 中的客戶端渲染。了解企業社會責任的優點和缺點。了解何時選擇客戶端渲染而不是伺服器端渲染。了解如何實作客戶端渲染並評估兩種渲染方法的優缺點。 - **Next.js**：探索 Next.js，這是一個簡化伺服器端動態應用程式所建立的函式庫。了解 Next.js 如何促進伺服器端渲染和互動式資料驅動 Web 應用程式的開發。 在本節結束時，您將準備好決定是否需要為您的專案使用單頁應用程式或伺服器端呈現的應用程式。 ### 安全： - **前端安全性最佳化**：學習跨網站腳本和 SQL 注入等註入攻擊。練習這些以了解它們是如何工作的。 - **後端安全優化**：了解有關後端安全的更多資訊以及管理敏感資料的最佳實踐。 - **道德駭客 101**：學習基本的道德駭客技術，以便我們在建立應用程式時能夠學習如何保護自己。 因此，在學習這些概念後，當您使用最新的提示和技巧以及實施最新的工具和技術來建立安全應用程式時，您必須充滿信心。 ### 碼頭工人： **Docker** 是一個容器化平台，可讓您將應用程式及其相依性打包到可移植、隔離的容器中。這些容器可以在從開發到生產的不同環境中一致運作。 Docker 是一個絕對會讓你驚嘆不已的工具。 - **容器**： - 首先深入了解容器及其對公司建立和管理應用程式的方式的深遠影響。 - 容器支援輕量級、一致且易於複製的環境，徹底改變了軟體開發和部署。 - **Docker 101**：製作容器 - 透過了解如何建立 Docker 檔案和建立自己的容器來了解 Docker 的基礎知識。 - 這些基礎知識構成了使用 Docker 輕鬆封裝和分發應用程式的基礎。 - **Docker-compose**：編排容器 - 探索 Docker-compose，一個用於編排多容器 Docker 應用程式的工具。 - 了解如何將多個容器作為單一服務進行定義、配置和管理，從而簡化複雜應用程式的部署。 - **微服務與單體架構**： - 在整體架構中，單一大型程式碼庫處理所有應用程式功能，這使得更新和擴展具有挑戰性。 - 容器支援微服務方法，其中應用程式被分為更小的、獨立的服務，可以單獨開發、部署和擴展。這種轉變提供了靈活性、可擴展性並提高了資源利用率。 - 容器（如 Docker）有助於從整體架構轉向微服務。因此，請詳細了解每種架構的優缺點。 - 練習並測試您的 Docker 技能： - 了解如何將 Redis 伺服器、Postgres 資料庫和 API 伺服器全部組合到一個 docker 容器中，以便它們都透過一個命令執行。 在本節和操作專案之後，每當我們部署應用程式時，我們都會對 Docker 感到非常滿意。 ### Redis： Redis 是最受歡迎、最常用的資料庫之一，是一種鍵值儲存。 - **資料庫 101**：深入研究資料庫主題，深入了解各種類型的資料庫以及它們如何適應資料儲存解決方案的前景。 - **什麼是 Redis？：** - Redis 是一個開源的記憶體鍵值儲存資料庫。 - 它在資料儲存和檢索方面表現出色，使其成為需要高速資料存取的應用程式的多功能選擇。 - **Redis 101**：學習如何使用 Redis。了解如何使用 Redis 進行快取以使我們的網站更快並進行會話管理。 - **Redis CLI**：了解如何使用 Redis CLI。 - **練習您的 Redis 技能**：啟動我們自己的 Redis 伺服器。 - **鍵值資料庫及其作用：** - 像 Redis 這樣的鍵值資料庫提供了一種簡單而有效的資料儲存方式。 - 它們將資料儲存為鍵和對應值對，從而實現快速資料檢索。 - 這些資料庫在快速資料存取至關重要的場景中尤其有價值，例如快取、會話管理和即時應用程式。 - **何時使用 Redis 等資料庫：** - Redis 非常適合速度和資料一致性至關重要的用例。 - 考慮使用 Redis 來快取經常存取的資料、管理使用者會話、為即時應用程式提供支援以及確保對關鍵資訊的低延遲存取。 ### 會話 + JWT 使用您的 React 專案，了解如何建立網站的整個動態部分：即使用以下技術的使用者管理。 - **會話驗證**：了解如何建立新的個人資料頁面。了解如何使用基於會話的身份驗證（其中將使用 cookie）並了解如何實現它。 - **令牌身份驗證**：了解有關令牌身份驗證（例如 JWT 令牌）的更多資訊。了解每種身份驗證類型的優缺點。 - **安全性身分驗證流程**：了解如何實施可以在您選擇的任何應用程式中實施的安全性身分驗證流程。 - 練習您的 Redis 技能：學習如何使用和實施 Redis 進行會話管理 - 這樣我們就有受保護的路線 - 此外，這樣，只要我們有登入功能，我們就可以使用該系統，因為我們知道它是安全的並且遵循最佳實踐。 ### 亞馬遜網路服務（「AWS」）： Amazon Web Services，通常稱為 **AWS**，是一個強大的雲端平台，它改變了公司的營運方式，提供了無與倫比的可擴展性和效率。 #### AWS 101： - **什麼是 AWS（亞馬遜網路服務）？：** - AWS 是一個雲端運算平台，提供廣泛的服務，包括運算能力、儲存、資料庫、機器學習等。 - 它提供可擴展的按需資源，使企業能夠創新和發展，而無需管理實體基礎設施的負擔。 - **基礎設施即服務 (IaaS)：** - AWS 提供基礎架構即服務，讓使用者透過網際網路配置和管理虛擬化運算資源。 - 這種方法消除了對本地硬體的需求，並提供了靈活性和可擴展性。 - **平台即服務 (PaaS)：** - AWS 將其服務擴展到平台即服務，使開發人員能夠建置、部署和管理應用程式，而無需擔心底層基礎設施。 - 這使開發人員能夠專注於編寫程式碼和交付價值。 - **使用 AWS 進行擴充：** - AWS 使公司能夠有效擴展，並根據需要提供對資源的存取。 - 它允許企業將其能力與需求相匹配，類似於Google、亞馬遜和微軟等科技巨頭，確保他們能夠無縫地為客戶提供服務。 - **AWS Lambda** 是一種無伺服器運算服務，使開發人員能夠執行程式碼來回應事件，而無需管理伺服器。它提供了一種經濟高效、可擴展且簡單的方式來執行雲端中的功能。 - **Serverless 101**：了解如何使用 Serverless 框架。 - 練習您的 AWS 技能：了解如何將 AWS Lambda 實施到您的 React 應用程式中。 最後，您將充滿信心地使用 AWS 並建立雲端中的功能。 ###CI/CD 當我們將所有內容聯繫在一起並建立瞭如何編寫優秀軟體和優秀應用程式的整體圖景之後；了解如何實際建立良好的流程以及如何實際將應用程式部署到生產中。 - **持續整合**：了解有關良好持續整合實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - **持續交付**：了解有關良好持續交付實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - **持續部署**：了解有關良好持續部署實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - 練習 CI/CD 技能：了解如何在專案中實施 Circle CI (CI/CD) 工具 - 確保您的開發團隊從一開始就擁有正確的工具和正確的流程 - 成功編寫錯誤更少、程式碼更簡潔的應用程式。 ### 額外位 - **程式碼分析**：了解當您第一次開始一個有大量文件並且不是您自己編寫程式碼的專案時該怎麼做！了解真正優化的提示和技巧。 - **建立高品質應用程式的一般最佳實踐**。 ### 軟技能 - 在本部落格中，我主要關注成為高級開發人員過程中的技術方面。然而，有效溝通和情緒智商等軟技能也發揮著至關重要的作用。 - [開發人員的七大軟技能及其學習方法](https://academy.zerotomastery.io/a/aff_pp6yfnkw/external?affcode=441520_dcwk-s8s)：要更深入地探索各種軟技能，請考慮請參閱資深開發人員兼程式講師Andrei Neagoie 撰寫的部落格。 ### 筆記 - 不同的公司可能對高級 Web 開發人員有不同的期望，因此請務必進行一些額外的研究來客製化您的開發路徑。 最後，在學習了上述所有主題之後，所有這些事情對您來說都會有意義。您將能夠將所有這些事情實施到您自己的專案、您自己的公司。您將了解它們中的每一個是如何連接的。 最重要的是，與其他需要數年時間學習這些技能的初級開發人員相比，借助本路線圖可以快速學習這些內容。 ### 最佳資源 - [初級到高級 Web 開發人員路線圖部落格系列](https://dev.to/aswin2001barath/series/24357)：一個部落格系列，我將學習並分享上述每個主題的知識。 - [不要成為初級開發人員：從初級到高級的路線圖](https://academy.zerotomastery.io/a/aff_5s8ff6y7/external?affcode=441520_dcwk-s8s)：Andrei Neagoie 的詳細路線圖部落格（a高級開發人員）提供免費資源的連結。 - **零到精通課程**：[完整的初級到高級Web 開發人員路線圖課程](https://academy.zerotomastery.io/a/aff_hpwn5xy9/external?affcode=441520_dcwk-s8s)：Andrei 的綜合課程Neagoie（同一高級開發人員）涵蓋了上述所有主題。 **我是誰？** - 我是 Aswin Barath，軟體工程迷，喜歡建立 Web 應用程式，現在在我自由職業生涯的繁忙時間透過[部落格](https://medium.com/techsoftware) 分享我的知識。 - 我也是像您一樣的初級開發人員，學習如何成為高級開發人員並在過程中分享我的知識。 - 這是我所有社交活動的連結，按平台分類在一個位置：https://linktr.ee/AswinBarath **謝謝** 非常感謝您閱讀我的部落格🙂。
原文出處：https://dev.to/bigsondev/10-projects-to-skyrocket-your-coding-skills-19hl ## 介紹 每當您考慮提高編碼水平時，都有很多選擇可以實現。您可以閱讀開發文章或無限循環地閱讀教程、課程、影片和書籍，但真正的關鍵是從學習過渡到動手編碼，相信我，沒有比應用您所掌握的所有概念更好的方法了。到目前為止，我們已經透過**基於專案的學習**學習了。 我自己是一名擁有 [8 年以上經驗](https://www.linkedin.com/in/adrian-bigaj-282277130/) 的軟體工程師，我發送了大量的履歷，進行了數十次面試，尤其是現在，當獲得前端/Web 開發人員的工作比以往任何時候都更加棘手時，我強烈建議您建立自己的專案。 為了在人群中脫穎而出，我將描述 10 個專案，每個專案都有獨特的設計、要求和技能，您可以掌握這些來建立您的作品集，並實際建立可以影響您作為開發人員進步的東西！ 此外，每個專案都附帶預先定義的實施卡，可以幫助您感覺自己像在敏捷環境中工作的真正開發人員，具有使用者故事和驗收標準，同時也支援專案本身的規劃。 ## [名片](https://app.bigdevsoon.me/projects/business-card) 深入 Web 開發的良好介紹暖身。  您將了解基本的 HTML 和 CSS、響應式設計原則以及線上個人品牌介紹。 ### 卡牌 1.UI容器 2. 用戶聯繫部分 3. 用戶形象 4. 使用者資訊部分 5. 絕對定位的形狀 6. 動畫 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-business-card) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-business-card) ## [素食王](https://app.bigdevsoon.me/projects/the-veggie-king) 經典的CSS RWD Landing Page樣式，感受媒體質疑！  您將學習進階 CSS 技術、CSS Flexbox/Grid，以及如何建立回應靈敏且有吸引力的登陸頁面。 ### 卡牌 1. 導航 2.英雄區 3. 關於我們部分 4. 菜單部分 5. 畫廊部分 6. 聯繫部分 7. 頁尾 8. 懸停效果 9. 行動選單 10.響應式網頁設計 11. 優化 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-the-veggie-king) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-the-veggie-king) ## [計算機](https://app.bigdevsoon.me/projects/calculator) 讓我們進一步了解 JS、邏輯、純函數和一些數學運算。  您將學習 JavaScript 基礎知識、DOM 操作和事件處理來建立互動式 Web 應用程式。 ### 卡牌 1.UI容器 2. 輸入數字 3. 數學運算 4. 清除和重置 5. 之前的操作 6. 明暗模式 7. 邊緣情況處理 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-calculator) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-calculator) ## [Just Weather](https://app.bigdevsoon.me/projects/just-weather) **此專案類型已多次用於面試帶回家**挑戰，值得至少做一次！  您將學習如何從外部 API、非同步 JavaScript（Promises、async/await）獲取資料，並在 Web 上顯示動態資料。 ### 卡牌 1.API配置 2. 搜尋欄 3. 地點和溫度 4. 每小時預報 5. 天氣詳情 6. 位置存取 7. 溫度單位切換 8. 最近的搜尋 9. 骨骼動畫 10. 錯誤處理 ### 其他資源 - [有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-just-weather) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-just-weather) ## [GifTok](https://app.bigdevsoon.me/projects/giftok) 更多 API、分頁、無限滾動。  您將學習如何使用富媒體 API、實作分頁並確保適合行動裝置的 UI。 ### 卡牌 1.API配置 2.顯示第一個GIF 3. 滑動下一步 4. 向後滑動 5.無限滑動 6. 用戶詳細訊息 7. 骨架加載 8. 桌面版 9. 邊緣情況 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-giftok) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-giftok) ## [注意](https://app.bigdevsoon.me/projects/notely) 另一種經典的待辦事項應用程式風格，如果您還沒有建立一個，現在可能是個好時機！  您將學習現代 JavaScript 框架中的 CRUD 操作、狀態管理以及不可變程式設計的原理。 ### 卡牌 1. 導航佔位符 2. 新筆記 3. 列出註釋 4. 編輯註釋 5. 刪除註釋 6. 填寫註釋 7. 搜尋筆記 8. 過濾筆記 9. 完成筆記 10. 空狀態 11. 字段驗證 12. 持久性存儲 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-notely) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-notely) ## [顏色記憶](https://app.bigdevsoon.me/projects/color-memory) 建立遊戲並擁有元件化和結構的高級圖片總是好的。  您將學習軟體開發中的邏輯建置、維護應用程式狀態和使用者互動處理。 ### 卡牌 1. 圓形元件 2. 首頁 3. 遊戲玩法 4. 遊戲結束模式 5. 最佳成績 6. 遊戲規則模態 7. 聲音通知 8.響應式網頁設計 9. 邊緣情況 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-color-memory) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-color-memory) ## [AI 貼文產生器](https://app.bigdevsoon.me/projects/ai-post-generator) 人工智慧的現代趨勢很奇特，對吧？了解最受歡迎的可用 API 之一的絕佳機會。  您將學習透過 API 與 AI 交互，了解提示的工作原理，並根據實際用例建立工具。 ### 卡牌 1.API配置 2.UI容器 3. 社交平台選擇器 4. 訊息文字區域 5. 音調和風格選擇器 6. 產生貼文按鈕 7. 生成階段 8. 按鈕邏輯 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-ai-post-generator) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-ai-post-generator) ## [關卡編輯器](https://app.bigdevsoon.me/projects/level-editor) 這就像您的第一個「迷你 Photoshop 工具」😁 如今有很多類似風格的「無程式碼」應用程式。  您將學習如何實現拖放功能、資產管理以及遊戲級設計和 UX/UI 考量的基礎知識。 ### 卡牌 1.UI容器 2. 資產提現機制 3、快速資產 4. 撤銷功能 5. 橡皮擦工具 6. 變焦能力 7. 設定與匯出 8. 調整網格大小 9. 等級的持續性 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-level-editor) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-level-editor) ## [任何聊天](https://app.bigdevsoon.me/projects/any-chat) 掌握前端和後端、套接字和事件廣播的完整流程是一項非常有用的技能。  您將學習全端開發，包括伺服器端程式設計、即時資料處理和資料庫管理。 ### 卡牌 1. 入職頁面 2. 進入聊天頁面 3.Node.js伺服器 4. 聊天頁標題 5. 聊天視窗 6. 聊天頁頁腳 7. 訊息發送 8.表情符號支持 9. 連接和斷開 10. 邊緣情況 ### 其他資源 - [有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-any-chat) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-any-chat) ## 結論 嘗試技術、框架和函式庫，建立您自己的創意變體，看看什麼最適合您。我絕對建議您擴展HTML/CSS 之外的技能，加入更多JS 和邏輯，同時使用API、React/Vue/Svelte 等一些流行框架，並深入研究Node.js/Express 以了解完整的前端是如何運作的。<-> 後端流程有效。 建立出色的專案，我祈禱面試成功，繼續編碼。 長期以來，我的目標是透過社區傳播基於專案的學習方法，並啟動並執行 [BigDevSoon](https://bigdevsoon.me/)，這是我們過去 2 年一直在開發的應用程式年對我們來說是一項偉大的成就。 **如果您喜歡本文，請隨意傳播！** ❤️
原文出處：https://dev.to/firecampdev/10-typescript-developer-you-must-follow-to-become-typescript-expert-in-2024-5c19 > 跟隨 TypeScript 專家獲取寶貴的見解、最佳實踐和最新趨勢，以加速您掌握這種強大的程式語言的進程。 -------- 嘿開發社區， 我非常高興向您介紹 10 位優秀的 TypeScript 開發人員，他們為 TypeScript 社群做出了重大貢獻。 - 透過專注於他們的工作，您將獲得見解，從他們的經驗中學習，並順利成為 TypeScript 專家。 - 無論您是渴望學習基礎知識的初學者，還是尋求尖端TypeScript 知識的高級開發人員，這些開發人員都能滿足您的需求。讓我們深入探討並探索您應該關注的TypeScript 人才，以提高您的技能。 ---- #Typescript 專家 ##1. [JonnyBurger](https://github.com/JonnyBurger) ：技術專家：來自瑞士蘇黎世的 Jonny Burger - 他是 Remotion 的建立者，Remotion 是一個用於以編程方式建立影片的 React 框架。  **創作者：** [Remotion](https://github.com/remotion-dev/remotion) **推特**：https://twitter.com/remotion https://github.com/JonnyBurger -------- ##2. [Vitaly Rtishchev](https://github.com/rtivital) ：技術專家：來自俄羅斯莫斯科的 Vitaly - 他是 Mantine 的建立者，Mantine 是一個功能齊全的 React 元件庫。  **創作者：** [Mantine] (https://github.com/mantinedev/mantine) **推特**：https://twitter.com/rtivital ------ ##3. [Nishchit Dhanani](https://github.com/Nishchit14) ：技術專家：Nishchit 來自印度 - 他是 Firecamp、API 的 VS Code、開源 Postman/Insomnia Alternative 的建立者  **建立者：** [Firecamp] (https://github.com/firecamp-dev/firecamp) **推特**：https://twitter.com/Nishchit14 https://github.com/Nishchit14 -------- ##4。 [Irfan Maulana](https://github.com/mazipan) ：技術專家：Irfan，又名 mazipan，是一位來自印尼的經驗豐富的 Web 開發人員，在電子商務行業擁有 10 多年的經驗。大部分時間都在使用 javascript 或 typescript，使用各種框架來建立前端應用程式，例如 React、svelte 或 vue。現在在 GovTech Edu 工作。  **貢獻於：** [baca-quran.id] (https://github.com/mazipan/baca-quran.id),[phpid-learning](https://github.com/phpid-jakarta/phpid-learning） **推特**：https://twitter.com/Maz_Ipan https://github.com/mazipan ------------ ##5。 [亞歷克斯·伊格爾](https://github.com/alexeagle) ：技術專家：Alex 來自美國加利福尼亞州莫德斯托 - 他是 Aspect.build 的建立者，該軟體使 Bazel 更易於使用。  **創作者：** [Aspect Build] (https://github.com/aspect-build) **推特**：https://twitter.com/jakeherringbone https://github.com/alexeagle -------- ##6。 [德魯鮑爾斯](https://github.com/drwpow) ：技術專家：Drew，來自科羅拉多州丹佛市 - 他是 openapi-typescript 的建立者，根據 OpenAPI 3 規範生成 TypeScript 類型  **創作者：** [openapi-typescript] (https://github.com/drwpow/openapi-typescript) https://github.com/drwpow -------- ##7. [卡米爾‧邁斯利維茨](https://github.com/kamilmysliwiec) ：技術專家：Kamil 來自波蘭，@nestjs 的建立者。 @TrilonIO 共同創辦人。 @google 開發專家。  **創作者：** [Nestjs] (https://github.com/nestjs/nest) **推特**：https://twitter.com/kammysliwiec https://github.com/kamilmysliwiec -------- ##8. [詹姆斯亨利](https://github.com/JamesHenry) ：技術專家：James 是 typescript-eslint 的建立者，工程總監@nrwl。 TypeScript 的 5x MVP @microsoft。  **創作者：** [typescript-eslint] (https://github.com/typescript-eslint/typescript-eslint) **推特**：https://twitter.com/MrJamesHenry https://github.com/JamesHenry -------- ##9。 [科林·麥克唐納](https://github.com/colinhacks) : 技術專家：Colin 是工程師、開源者和不折不扣的 TypeScript 開發者。我建置並維護 Zod，這是一個具有靜態類型推斷功能的 TypeScript 模式驗證庫。  **創作者：** [Zod] (https://github.com/colinhacks/zod) **推特**：https://twitter.com/colinhacks https://github.com/colinhacks -------- ##10. [Basarat Ali Syed](https://github.com/basarat) ：技術專家：Basarat 來自澳洲墨爾本，他是 Typescript 書的創造者。  **創作者：** [Typescript-book] (https://github.com/basarat/typescript-book) **推特**：https://twitter.com/basarat https://github.com/basarat ------ 那麼今天的文章就到此結束了。我知道我一定缺少一些很棒的 TS 開發者，如果你認識任何人，請在下面評論他們的名字。我很想在我的下一個部落格中介紹它們！ 如果您對開源領域的 Typescript 貢獻感興趣，我很高興邀請您與我一起在 Firecamp 上工作。 #Firecamp🔥 **API 的 VS Code，開源 Postman/Insomnia 替代品**  如果你真的喜歡這個專案，請幫我盯著 repo！ 👇 https://github.com/firecamp-dev/firecamp 下週見！！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
