我們透過與事物互動和理解事物的方式來感知事物。對於基礎架構團隊來說，Kubernetes 是一種擴展和管理應用程式的好方法，但對於前端/後端開發人員來說，它可能看起來很複雜且壓力很大。 Kubernetes 引入了許多概念和術語（部署、服務、pod…），這些概念和術語需要時間來掌握，甚至需要更多時間來掌握。但開發人員有時必須每週（甚至每天）與他們互動。 透過我們的經驗和研究，我們確定了開發人員使用 Kubernetes 的三種最常見的方式。 那麼，開發人員眼中的 Kubernetes 是什麼樣子的呢？ ### 支持我們🙏  在我們開始之前，如果您為我們的[開源儲存庫](https://github.com/cyclops-ui/cyclops)加註星標並幫助我們獲得我們的產品，我們將非常高興 在其他開發者面前的工具 ⭐ 接觸點 --- 根據公司的結構和開發工作流程，開發人員要么根本不與 Kubernetes 交互，因為自動化流程和腳本正在執行此操作，要么通過三個接觸點與 Kubernetes 交互： 1. 他們的應用程式的配置文件 2. 在 K8s 叢集中部署應用程式 3. 監控他們的應用程式 ### 設定檔  設定檔告訴 Kubernetes 如何處理應用程式。它們是聲明性的，這意味著您編寫您想要看到的結果，而不是實現該結果的步驟。 這些文件通常用[YAML](https://yaml.org/)編寫，它們很大且難以閱讀和理解。用 YAML 寫作會帶來挑戰（和[怪癖](https://noyaml.com/)），因為它是開發人員需要學習的額外程式語言。 配置錯誤很難發現和修正，但卻是**一件大事**。即使您對應用程式進行了完美編碼，沒有任何錯誤（假設😅），配置中的錯誤也可能意味著您的應用程式將無法執行。 ### 部署 部署應用程式是在 Kubernetes 叢集中啟動應用程式的過程。執行此操作的本機方法是使用`kubectl` 。 [`kubectl`](https://kubernetes.io/docs/reference/kubectl/)是 Kubernetes 的**命令列工具**。作為命令列工具/介面是我們應該考慮的。高級開發人員應該習慣 CLI，但初級開發人員可能仍然很膽怯。習慣`kubectl`為學習曲線增加了新的一層。 然而，部署需要的不僅僅是了解`kubectl`的可用命令；它還需要了解上下文以及它如何操作 Kubernetes 物件。 ### 監控 現在我們的開發人員已經配置並部署了他們的應用程式，他們就完成了，對吧？嗯，不。 該應用程式可能存在相當多的錯誤和問題，並且他們應該能夠監視它們並在需要時修復它們。 找出 Kubernetes 叢集內的應用程式出了什麼問題**並不簡單**。開發人員需要了解叢集中的物件以及它們如何相互互動。 例如，要取得應用程式的日誌，您需要知道它在 Pod 中執行。該 Pod 位於副本集中，副本集本身位於 Deployment 內。在使用`kubectl`翻閱 K8s 資源時，您必須了解這些關係。 開發者平台 ----- 這只是 Kubernetes 的冰山一角。它的複雜性大大延長了新開發人員的入職時間，並且引入的所有額外步驟都會減慢開發週期。 公司通常有專門的團隊來處理基礎設施和 Kubernetes。當開發人員遇到問題或需要協助時，他們會向這些團隊尋求協助。但你可以想像，在處理像 Kubernetes 這樣複雜的事情時，需要幫助是很常見的事情。 這就是為什麼我們看到開發者平台興起，它減少了開發者和基礎設施團隊之間的摩擦。一個好的平台可以使建立、更新和部署的開發週期盡可能順利和直接。 ### Cyclops - 為開發人員打造的 Kubernetes 平台 [Cyclops](https://github.com/cyclops-ui/cyclops)是一款出色的開源開發工具，它將 Kubernetes 的複雜性抽象化為簡單的圖形使用者介面。我們將其稱為平台，因為您的基礎架構團隊可以自訂 UI 以滿足您的特定需求和願望。 那麼，Cyclops是如何解決上述問題的呢？ 1. 使用 Cyclops，您的開發人員永遠不會直接與設定檔互動。您建立一個模板，然後將其作為表單呈現給開發人員。這避免了學習 YAML 等語言的需要，並且還有一個額外的好處，即允許您向其輸入加入驗證，從而使開發人員更難犯錯。 2. 一旦開發人員在 Cyclops 的幫助下指定了他們的需求，部署他們的應用程式就像單擊按鈕一樣簡單。 3. 現在他們已經部署了應用程式，Cyclops 可以透過其用戶介面輕鬆監控其狀態。應用程式的詳細資訊很容易存取，包括它使用的所有資源（和日誌）。 讓我們看看它的實際效果！ 安裝過程只需兩步，但有一些[先決條件](https://cyclops-ui.com/docs/installation/prerequisites)，最主要的是 Kubernetes 叢集。 因此，一旦叢集啟動並執行，您就可以使用以下命令安裝 Cyclops： ``` kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/blogs-demo/install/cyclops-install.yaml ``` 一旦成功安裝（可能需要一兩分鐘），您可以透過以下方式存取它： ``` kubectl port-forward svc/cyclops-ui 3000:3000 -n cyclops ``` Cyclops 現在應該可以在瀏覽器中存取[http://localhost:3000](http://localhost:3000/) 。 現在，透過點擊`Add Module`按鈕，您將進入以下畫面：  我們為您建立了一個預設模板，但此畫面是高度可自訂的（您可以嘗試[自己的 Helm 圖表](https://cyclops-ui.com/docs/installation/demo/new_module)！）。現在，開發人員無需讀取和編寫 YAML，而是可以透過點擊「儲存」按鈕填寫這些字段，然後他們的應用程式將部署！  下一個畫面顯示了新部署的應用程式的詳細視圖。在這裡，您可以查看所有指定的資源（並輕鬆存取日誌😉）。如果出現任何問題，都可以在這裡看到！ 如果您希望更改配置中的某些內容（例如新增應用程式的更多副本），請按一下`Edit`按鈕。您將被帶到與第一個螢幕類似的螢幕，您可以在其中進行這些更改，甚至不知道您正在下面處理 YAML。 包起來 --- 我們希望本文能很好地展示了開發人員在 Kubernetes 中遇到的一些問題，以及您或您的開發人員下次使用它時可以考慮的潛在解決方案。 如果您遇到 Kubernetes 問題或開發人員用 K8s 相關問題糾纏您，請考慮在我們的 GitHub[儲存庫](https://github.com/cyclops-ui/cyclops)上給我們一個星星來支援我們 ⭐ 您是否遇過 Kubernetes 的這些接觸點？在下面的評論中分享您的經驗！ --- 原文出處：https://dev.to/cyclops-ui/kubernetes-through-the-developers-perspective-38lf
我試過。 我*真的*嘗試過。 2016 年，我畢業並獲得了網頁設計和開發學位，了解 Angular 和一些用戶體驗原則，認為也許我可以在技術領域有所斬獲。 我錯了。 直到兩年後我才得到第一個職位，即便如此，它是 Facebook 的合同，我必須*彌補我的職位頭銜*，我的團隊只是順其自然。不幸的是，我沒有考上合適的大學，也沒有走上實習後直接被全職僱用的正確道路。我聯繫過的任何使用者體驗專家或產品設計師都對我不屑一顧。 （你們都是守門人，不是嗎？） 疫情期間，我參加了一個編碼訓練營，天真地想：“如果我學會如何更好地編碼，我肯定會被認為更有價值！” 我完成了課程，學到了很多。建立了我的投資組合。在 Xitter 上瘋狂地交流。甚至因為在 Twitch 上直播我的想法/編碼過程而讓自己感到尷尬。 我獲得了幾個承包商的職位，這還不錯。但我想要健康保險。我更加努力了。 所有這一切都是在與過動症和重度憂鬱症作鬥爭的同時進行的。 2022 年，我終於獲得了第一份全職工作，擔任開發者關係工程師。在我的前三個月內，我為他們獲得了一份大牌公司的合約。 然而，我也試著解決我的心理健康問題。我被開了 Lexapro 和 Abilify。副作用包括嗜睡，這意味著如果我不工作，我就會睡覺。但如果我不覺得自己想要公里，那麼它就有效，對吧？讓我們在上面撒上 Adderall XR 來解決討厭的過動症。十月，我不得不停止服藥，因為我和我的配偶決定要生孩子。 我想：“我對自己的工作感覺很好！我們很穩定！讓我們開始吧！” 2023年5月，我發現自己懷孕了。我覺得我經歷了懷孕帶來的一些最嚴重的副作用：腦霧、疲憊、噁心——TL;DR：我無法工作。我立即告訴我的經理和人力資源部，認為完全誠實並「掩蓋我的基地」是謹慎的做法，以防我的生產力下降。 嗯，當然是這樣。將一個 10 磅重的米袋綁在腹部，在小辦公椅上旋轉 20 次，並嘗試召開一個小時的會議。 起初，我的同事們（據說）為我感到高興，並表示「支持」。然而，事情慢慢開始改變。我的經理一天比一天變得越來越挑剔。我很難控制自己的症狀並保持板著臉。 您是否曾經歷過有人告訴您他們會在您身邊，但當您需要他們時卻沒有真正出現？這就是發生在我身上的事。 九月，我接受了 PIP。同時，血液檢查結果顯示我或我的孩子身上有腫瘤。或者他有脊椎先天缺陷。我必須立即進行廣泛的測試才能找到問題。 那，我必須努力保住我的工作嗎？ 我真誠地盡力了。最後，我只是把事情結束了，就像一篇我從未發表過的文章，很可能被同事偷走了。 經理可以說：“如果你感覺不舒服，那就休息一天！使用你的 PTO！”任何時候都只是為了掩飾他們的屁股。 現在我告訴你：人力資源和管理階層永遠不會支持你。 ------------------------ 不要被他們的廢話所迷惑。 不要告訴你的同事任何事。 科技環境中沒有什麼是穩定的。在工作場所的任何地方，*沒有人*是你可以與之分享個人生活的人。它瘋了，閉嘴。 零同理心。 科技領域不存在股權。 ---------- ### 需要徹底改革對有需要的人的支持，特別是那些神經分歧的人。尤其是那些選擇成為父母並且是親生父母的人。 但是，為了實現這一目標，這種改變需要是*巨大的*、*漸進的*，並由受社區尊重的人來領導。 那個人顯然不是我。 ### 所以這是我對科技的告別。 ### 我再也不想回答任何男人了。 我不會去不受歡迎的地方。 祝福您在職涯中一切安全、心智健全。 --- 原文出處：https://dev.to/cat/a-goodbye-to-tech-41gh
測試您的網站在本機電腦上是否運作良好始終是一項繁重的工作。 我找到了一個非常簡單的工具[mkcert](https://github.com/FiloSottile/mkcert) ： ``` ➜ localhost-https mkcert -install Using the local CA at "/Users/.../mkcert" ✨ The local CA is now installed in the system trust store! ⚡️ The local CA is now installed in the Firefox trust store (requires browser restart)! 🦊 The local CA is now installed in Java''s trust store! ☕️ ➜ localhost-https mkcert localhost Using the local CA at "/Users/.../mkcert" ✨ Created a new certificate valid for the following names 📜 - "localhost" The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅ ``` 然後你可以用一個簡單的 HTML 頁面來測試： ``` ➜ localhost-https cat index.html ───────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── │ File: index.html ───────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── 1 │ <html> 2 │ <body> 3 │ HELLO WORLD 4 │ </body> 5 │ </html> ───────┴────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── ➜ localhost-https ./node_modules/http-server/bin/http-server -S -C ./localhost.pem -K ./localhost-key.pem [18:12:41] Starting up http-server, serving ./ through https Available on: https://127.0.0.1:8080 https://192.168.1.69:8080 Hit CTRL-C to stop the server ``` 這是結果：  FiloSottile/mkcert --- 原文出處：https://dev.to/rhymes/really-easy-way-to-use-https-on-localhost-341m
沒有什麼神奇的方法可以解決職業倦怠。我們都有不同的願望、目標、動機和壓力來源。 這是一個簡短的故事，講述了我如何改變自己的觀點，並且透過這樣做，成功地應對了我的倦怠。 **除了顯而易見的事情之外，我們還能從工作中得到什麼？ 💸** 成就感和價值感。在某種程度上，我們所有人都是由我們的工作定義的。我們怎麼能不呢？我們需要證明自己，發展我們的職業生涯，在我們所做的事情上做到最好，我們的貢獻得到認可和重視。通常，我們花在工作上的時間比陪伴家人的時間還要多。 如果你問我的話，這就是一個滑坡，因為，如果我們所做的工作對我們的要求超出了我們的能力，該怎麼辦？我們就接受這一點嗎？我們是否認為事情會及時好轉，而這只是暫時的挫折，因為某些根本原因可能與我們的能力無關？我們是否告訴自己，我們正在盡力而為，一切最終都會成功？ 我不。至少我沒有。 相反，我覺得自己很失敗。但是，不要害怕！解決方案很簡單。只要多花一些時間，把問題帶回家來完成更多的事情，事情就會變得更好，你的努力也會得到認可。正確的？ 一旦我感覺自己正在失去立足點，再多的額外工作時間也不會讓我感覺自己不再是一個不應該出現在這裡、隨時都會被發現的冒名頂替者。 然後我意識到。我從未被發現。這意味著要么我是有史以來最好的騙子，要么我用一個不可能的標準來要求自己。 **🌟小里程碑** 當我還在上大學時，我就開始了我的第一份工作，擔任軟體工程師。一切都是挑戰，也是我必須解決的有趣難題。儘管扮演偵探很有趣，但我注意到當我回家時它並沒有停止。某些後台進程始終在執行。它變得很累。同事們向我保證，這是“正常的”和“自然的”，因為那“就是工作”。我有一段時間相信了他們。 但為什麼要「正常」或「自然」呢？我從來沒有同意把所有的時間都花在工作上，無論是主動還是被動。因此，為了避免這種情況，我的第一個嘗試就是繼續工作，直到完成我開始的事情。這導致了相當多的加班，但它確實達到了目的。然後它演變成甚至不開始任何我知道在一天結束之前無法完成的事情。直到今天我仍然在做這件事——但我在此基礎上做了一些改進。 我沒有將每張票視為一個整體，而是將每張票視為自己的一個小專案。這樣，即使票據尚未完成，四分之三的整個里程碑也已完成，現在是下午 5 點，我可以關閉我的筆記型電腦，直到明天才考慮它。 **💚 照顧好自己** 聽你自己說。如果你需要休息一下——休息一下。如果你生病了，請病假並恢復到100%。我的意思是 100%，而不僅僅是勉強生存。 請病假並不違法，儘管有時可能會感覺像這樣。您的同事將幫助您度過幾天，直到您的身體得到所需的應得的休息。 假期也是如此。總是預訂假期——有一些值得期待的事情。定期花時間休息並遠離一切事情對於一個人的生產力和幸福感非常重要。 如果你不能再做的話，世界就不會停止。 **❗盡力而為，但不要全力以赴** 我怎麼強調都不為過。每當我開始新工作時，我總是需要證明自己，展示我能做多少。只要您每天都能保持這個速度，那就太棒了。 一旦出現問題，你的產出下降，每個人都會感到非常驚訝，並期望你盡快回到「原來的自己」。這通常會給我帶來進一步的壓力，導致我的產出下降得更低，直到我必須休息幾週來恢復。 所以我認為這不是最佳的或可持續的。我付出了一點努力來找到適合每個人的配速。這種節奏不會讓我筋疲力盡，我可以始終如一地跟上，並以足夠的時間間隔提供輸出。 然後，當假設的事情發生時，我的體重就不再是問題了，然後持續幾週，然後恢復到我舒適、高效的節奏，這不會對我的健康造成損害。 **🕔 這只是工作** 就那麼簡單。今天是這家公司，明天就是那家公司。我們本質上是在盡我們最大的能力出賣我們的時間和技能，為自己提供在空閒時間做我們喜歡做的事情的手段。 我們生命中最美好的事情應該是那些在我們沒有出售的時候發生的事情。如果我們不能享受屬於我們的時間，如果我們不能以充實的方式與我們所愛的人一起度過，那麼我們工作是為了什麼？ 歸根結底，這確實只是工作。 --- 原文出處：https://dev.to/netcat5679/it-is-just-work-3k0k
React 設計模式是開發人員用來解決使用 React 建立應用程式時遇到的常見問題和挑戰的既定實踐和解決方案。這些模式封裝了針對重複出現的設計問題的可重複使用解決方案，從而提高了可維護性、可擴展性和效率。它們提供了一種結構化的方法來組織元件、管理狀態、處理資料流和最佳化效能。 **請考慮以下 6 種 React 設計模式：** 1. 容器和呈現模式 2. HOC（高階元件）模式 3. 複合元件模式 4. 提供者模式（使用提供者進行資料管理） 5. 狀態減速器模式 6. 元件組成模式 1. 容器和呈現模式 ---------- 在此模式中，容器元件負責管理資料和狀態邏輯。它們從外部來源獲取資料，在必要時對其進行操作，並將其作為 props 傳遞給展示元件。它們通常連接到外部服務、Redux 儲存或上下文提供者。 另一方面，展示元件僅專注於 UI 元素的展示。他們透過 props 從容器元件接收資料，並以視覺上吸引人的方式呈現它。展示元件通常是無狀態的功能元件或純元件，這使得它們更容易測試和重複使用。 **讓我們考慮一個複雜的範例來說明這些模式：** 假設我們正在建立一個社群媒體儀表板，用戶可以在其中查看朋友的貼文並與他們互動。以下是我們建立元件的方式： **容器元件（FriendFeedContainer）：** 該元件將負責從 API 獲取有關好友貼文的資料、處理任何必要的資料轉換以及管理提要的狀態。它將相關資料傳遞給展示元件。 ``` import React, { useState, useEffect } from 'react'; import FriendFeed from './FriendFeed'; const FriendFeedContainer = () => { const [friendPosts, setFriendPosts] = useState([]); useEffect(() => { // Fetch friend posts from API const fetchFriendPosts = async () => { const posts = await fetch('https://api.example.com/friend-posts'); const data = await posts.json(); setFriendPosts(data); }; fetchFriendPosts(); }, []); return <FriendFeed posts={friendPosts} />; }; export default FriendFeedContainer; ``` **展示元件（FriendFeed）：** 該元件將從其父容器元件 (FriendFeedContainer) 接收好友貼文資料作為 props，並以視覺上吸引人的方式呈現它們。 ``` import React from 'react'; const FriendFeed = ({ posts }) => { return ( <div> <h2>Friend Feed</h2> <ul> {posts.map(post => ( <li key={post.id}> <p>{post.content}</p> <p>Posted by: {post.author}</p> </li> ))} </ul> </div> ); }; export default FriendFeed; ``` 透過以這種方式建立我們的元件，我們將獲取資料和管理狀態的問題與 UI 渲染邏輯分開。這種分離使得我們的 React 應用程式在擴充時可以更輕鬆地進行測試、重複使用和維護。 2.HOC（高階元件）模式 ------------- 高階元件 (HOC) 是 React 中的一種模式，可讓您跨多個元件重複使用元件邏輯。它們是接受元件並傳回具有附加功能的新元件的函數。 為了示範 HOC 在具有 React hook 的社群媒體儀表板範例中的使用，讓我們考慮一個場景，其中您有多個元件需要從 API 取得使用者資料。您可以建立一個 HOC 來處理資料獲取並將獲取的資料作為 props 傳遞給包裝的元件，而不是在每個元件中重複取得邏輯。 這是一個基本範例： ``` import React, { useState, useEffect } from 'react'; // Define a higher-order component for fetching user data const withUserData = (WrappedComponent) => { return (props) => { const [userData, setUserData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { // Simulate fetching user data from an API const fetchData = async () => { try { const response = await fetch('https://api.example.com/user'); const data = await response.json(); setUserData(data); setLoading(false); } catch (error) { console.error('Error fetching user data:', error); setLoading(false); } }; fetchData(); }, []); return ( <div> {loading ? ( <p>Loading...</p> ) : ( <WrappedComponent {...props} userData={userData} /> )} </div> ); }; }; // Create a component to display user data const UserProfile = ({ userData }) => { return ( <div> <h2>User Profile</h2> {userData && ( <div> <p>Name: {userData.name}</p> <p>Email: {userData.email}</p> {/* Additional user data fields */} </div> )} </div> ); }; // Wrap the UserProfile component with the withUserData HOC const UserProfileWithUserData = withUserData(UserProfile); // Main component where you can render the wrapped component const SocialMediaDashboard = () => { return ( <div> <h1>Social Media Dashboard</h1> <UserProfileWithUserData /> </div> ); }; export default SocialMediaDashboard; ``` 在這個例子中： - `withUserData`是一個高階元件，用於處理從 API 取得使用者資料。它包裝傳遞的元件 ( `WrappedComponent` ) 並將取得的使用者資料作為 prop ( `userData` ) 提供給它。 - `UserProfile`是一個功能元件，它接收`userData`屬性並顯示使用者設定檔資訊。 - `UserProfileWithUserData`是透過使用`withUserData`包裝`UserProfile`傳回的元件。 - `SocialMediaDashboard`是主要元件，您可以在其中呈現`UserProfileWithUserData`或任何其他需要使用者資料的元件。 使用此模式，您可以輕鬆地跨社交媒體儀表板應用程式中的多個元件重複使用資料取得邏輯，而無需重複程式碼。 3. 複合元件模式 --------- React 中的複合元件模式是一種設計模式，可讓您建立協同工作以形成有凝聚力的 UI 的元件，同時仍保持明確的關注點分離並提供自訂元件行為和外觀的靈活性。 在此模式中，父元件充當一個或多個子元件（稱為「複合元件」）的容器。這些子元件協同工作以實現特定的功能或行為。複合元件的關鍵特徵是它們透過父元件彼此共享狀態和功能。 以下是使用 hooks 在 React 中實作複合元件模式的簡單範例： ``` import React, { useState } from 'react'; // Parent component that holds the compound components const Toggle = ({ children }) => { const [isOn, setIsOn] = useState(false); // Function to toggle the state const toggle = () => { setIsOn((prevIsOn) => !prevIsOn); }; // Clone the children and pass the toggle function and state to them const childrenWithProps = React.Children.map(children, (child) => { if (React.isValidElement(child)) { return React.cloneElement(child, { isOn, toggle }); } return child; }); return <div>{childrenWithProps}</div>; }; // Child component for the toggle button const ToggleButton = ({ isOn, toggle }) => { return ( <button onClick={toggle}> {isOn ? 'Turn Off' : 'Turn On'} </button> ); }; // Child component for the toggle status const ToggleStatus = ({ isOn }) => { return <p>The toggle is {isOn ? 'on' : 'off'}.</p>; }; // Main component where you use the compound components const App = () => { return ( <Toggle> <ToggleStatus /> <ToggleButton /> </Toggle> ); }; export default App; ``` 在這個例子中： - `Toggle`是保存複合元件（ `ToggleButton`和`ToggleStatus` ）的父元件。 - `ToggleButton`是負責渲染切換按鈕的子元件。 - `ToggleStatus`是另一個負責顯示切換狀態的子元件。 - `Toggle`元件管理狀態 ( `isOn` ) 並提供`toggle`功能來控制狀態。它克隆其子級並將`isOn`狀態和`toggle`函數作為 props 傳遞給它們。 透過使用複合元件模式，您可以建立可重複使用和可組合的元件，封裝複雜的 UI 邏輯，同時仍允許自訂和靈活性。 ### 4. Provider Pattern（使用Provider進行資料管理） React 中的提供者模式是一種設計模式，用於跨多個元件管理和共用應用程式狀態或資料。它涉及建立一個封裝狀態或資料的提供者元件，並透過 React 的上下文 API 將其提供給其後代元件。 讓我們透過一個範例來說明 React 中用於管理使用者身份驗證資料的 Provider 模式： ``` // UserContext.js import React, { createContext, useState } from 'react'; // Create a context for user data const UserContext = createContext(); // Provider component export const UserProvider = ({ children }) => { const [user, setUser] = useState(null); // Function to login user const login = (userData) => { setUser(userData); }; // Function to logout user const logout = () => { setUser(null); }; return ( <UserContext.Provider value={{ user, login, logout }}> {children} </UserContext.Provider> ); }; export default UserContext; ``` 在這個例子中： - 我們使用 React 的`createContext`函數來建立一個名為`UserContext`上下文。此上下文將用於跨元件共享用戶資料和與身份驗證相關的功能。 - 我們定義一個`UserProvider`元件作為`UserContext`的提供者。該元件使用`useState`鉤子管理使用者狀態，並提供`login`和`logout`等方法來更新使用者狀態。 - 在`UserProvider`內部，我們用`UserContext.Provider`包裝`children` ，並將`user`狀態以及`login`和`logout`函數作為提供者的值傳遞。 - 現在，任何需要存取使用者資料或驗證相關功能的元件都可以使用`useContext`掛鉤來使用`UserContext` 。 讓我們建立一個使用上下文中的使用者資料的元件： ``` // UserProfile.js import React, { useContext } from 'react'; import UserContext from './UserContext'; const UserProfile = () => { const { user, logout } = useContext(UserContext); return ( <div> {user ? ( <div> <h2>Welcome, {user.username}!</h2> <button onClick={logout}>Logout</button> </div> ) : ( <div> <h2>Please log in</h2> </div> )} </div> ); }; export default UserProfile; ``` 在此元件中： 我們匯入`UserContext`並使用`useContext`鉤子來存取`UserProvider`提供的使用者資料和`logout`功能。 根據使用者是否登錄，我們呈現不同的 UI 元素。 最後，我們用`UserProvider`包裝我們的應用程式，以使用戶資料和身份驗證相關的功能可供所有元件使用： ``` // App.js import React from 'react'; import { UserProvider } from './UserContext'; import UserProfile from './UserProfile'; const App = () => { return ( <UserProvider> <div> <h1>My App</h1> <UserProfile /> </div> </UserProvider> ); }; export default App; ``` 透過這種方式，Provider 模式允許我們跨多個元件管理和共享應用程式狀態或資料，而無需進行 prop 鑽取，從而使我們的程式碼更乾淨、更易於維護。 --- 原文出處：https://dev.to/fpaghar/react-component-design-patterns-part-1-5f0g
你好！ 幾年前，我分享了我關閉之前的新創公司並將[其開源](https://dev.to/nevodavid/i-turned-my-startup-into-open-source-4efh)的故事。 從那時起，我就在開源通知基礎設施 Novu 工作，實際上我學到了很多關於開源社群的力量。 我在 DEV 上寫了 74 篇帖子，產生了**1,182,911 次瀏覽**🤗 這使得 Novu 成為最受歡迎的開源儲存庫之一**（31k 星）** --- 我開始談論它 ------ 我建立了一份名為[Gitroom](https://gitroom.com/) （以前稱為GitHub20k）的時事通訊，並寫下了我在這一年中所做的一切，從在DEV 上發布實際價值教程到使用有影響力的人推廣存儲庫。 我每月與 30 多名開源維護者交談！幫助他們了解其儲存庫。 但有一件事情我一直沒有解決。 我的戰術壓力很大。不是隨意寫文章。 但我在正確的時間寫了它們，並在不同的 Reddit 和社交媒體管道上推廣它們。 問題是你的發佈在文章發表之前就被卡住了——你無法為任何事情計時，所以你必須在一周內完成。 如果其他人參與發布，事情就會變得很困難；我曾經錯過了很多。因此，我決定建立 Gitroom 平台。 --- Gitroom 平台 ---------- Gitroom 平台是安排開源發布的最佳工具。它是 100% 開源的！在這裡檢查並加註星標。 https://github.com/gitroomhq/gitroom ### 技術堆疊 - NextJS（順風） - NestJS ### 分析 從基礎知識開始，我想知道： - 表現最好的一天是什麼時候（關於星星的數量），然後將其與我所做的發布週進行交叉引用。 - 了解我何時在 GitHub 上流行（收到通知） - 了解 GitHub feed 何時刷新，以便相應地安排我的內容。  ### 啟動頁面 要啟動，您需要： - 將所有管道用於開源，從Reddit等社交媒體到[DEV.to](http://DEV.to?utm_source=nevo.github20k.com&utm_medium=referral&utm_campaign=the-gitroom-platform-is-live)等文章發布 - 請參閱下次刷新的時間表，以便我可以相應地進行計劃。 - 在發布之前加入評論並與我的團隊合作。  ### 時間表頁面 這就是魔法發生的地方： - 您可以同時**交叉發佈**到多個頻道（例如 DEV、Hashnode 和 Medium） - 您可以發佈到更複雜的頻道，例如 Reddit，您必須在其中定義**天賦**和 subreddit。 - 您可以全域編輯所有內容，然後切換到特定頻道。 - 查看它在現有頻道中的外觀預覽。 - 在發布之前**使用之前預定帖子的連結**！您也可以將其用作規範連結！  社區的未來！ --- 這是 Gitroom 的第一個版本，主要用於規劃您的發布。**這是您應該期待的：** - 交換或購買其他社區成員和影響者的帖子！**是的**！有影響力的人將為您建立帖子，它們將出現在時間軸上。什麼是最好的事？他們只有在貼文發布後才會獲得報酬（良好的激勵措施） - 成為 OSS 朋友的一部分，這是一個列出系統中所有開源公司的 API -**非常適合 SEO。** - 加入推薦並與其他開源朋友一起**“使用”** ！ 並且： - **從Notion等其他平台匯入**——我所有的部落格文章都是我自己在Notion上寫的，但每次複製時，我都需要手動上傳所有圖片。 - 有更多可供安排的頻道，例如 Discord 和 Mastodon。 - 自動交叉發布（如果你不想使用 Gitroom 調度程式） - 媒體生成器，例如您擁有的星星數量。 --- 幫幫我！ 🤗 這是一個新專案，100% 開源（同類中的第一個！） 你能給我的任何星星都會幫助我更成長❤️ https://github.com/gitroomhq/gitroom 在這裡加註星標❤️ --- 原文出處：https://dev.to/github20k/my-new-open-source-repository-to-schedule-all-your-content-2f2a
嘿，我是 Vince ---------  我是一名自學成才的開發人員，在新冠疫情期間改變了職業生涯。我改變是因為我想要更好的職業，喜歡編程，同時對建立有利可圖的 SaaS 副專案有著濃厚的興趣。 我能夠透過在空閒時間學習、建立小型副專案、參加黑客馬拉松以及為開發人員建立教育內容來轉換職業。  此外，我於 2023 年 3 月推出的第一個簡單 SaaS 應用程式[CoverLetterGPT.xyz](http://coverlettergpt.xyz/)目前擁有 83 名客戶，每月收入 434 美元！沒什麼瘋狂的，但我仍然感到自豪。 （順便說一句，如果你想看看我是如何建造它的，它是[開源的](https://github.com/vincanger/coverlettergpt)！）  我目前還在開發[OpenSaaS.sh](http://OpenSaaS.sh) ，這是一個免費的開源 SaaS 入門模板，適用於 React 和 NodeJS，以及 Stripe、OpenAI 和 AWS S3 集成 基於這些經驗，並向其他成功的開發人員學習，我學到了一些如何尋找靈感和動力來建立東西，作為推進職業生涯或賺取額外收入的手段。 陷入 FOMO 的陷阱 ----------- 首先，如果您在社交媒體上的軟體開發人員圈子里呆了一段時間，那麼您無疑會受到副專案成功帖子和獨立黑客的每月經常性收入 (MRR) 螢幕截圖的轟炸。  這可能會導致 FOMO（“害怕錯過”）受到嚴重打擊。  對許多開發者來說，這就是夢想：建立一個有利可圖的副業專案，帶來穩定的被動收入，辭掉日常工作，環遊世界。 但這讓很多人想知道以下問題： *“開發人員如何找到在空閒時間進行開發的動力？”* *“我也是全端 Web 開發人員，為什麼我沒有任何好的 SaaS 想法？！”* 或者 *「為什麼我總是發現自己在完成最後一個專案之前就開始了一個新的副業專案？”* 嗯，我有一些建議，基本上可以歸結為這兩點： 1. 少做一點 2. 玩得更開心 讓我解釋… 找出不該做的事情 -------- 這可能看起來有悖常理，但實際上弄清楚什麼不該做將幫助你專注於你真正、真正、真正想要做的事情。 這是我從世界上最成功的投資者之一華倫巴菲特身上學到的東西。 一位粉絲向巴菲特詢問關於選擇生活中的工作的建議，他回應： - 列出 25 個人生目標 - 從最重要到最不重要的順序排列它們 - 只關注前 5 個目標 - 避免與目標 6 至 25 相關的活動。 這種方法有趣的地方在於，它鼓勵個人策略性地在優先順序較低的活動（目標 6 到 25）中取得不理想的成績。 為什麼？因為我們可以選擇將注意力集中在無數的事情上，但如果我們不專注於重要的事情，我們永遠不會有太多成就。 執行相同的過程，但使用副專案，會產生類似的結果： - 列出您擁有的所有出色的應用程式創意 - 選擇您最感興趣的前 2 個（記住，這也應該很有趣！） - 丟掉其餘的（至少現在是這樣）。 您也可以對應用程式功能執行相同的操作，並列出您的專案應具有的所有功能，但只保留前 5 個。 是時候集中註意力了。  從小事做起 ----- 到目前為止，「從小事做起」應該是顯而易見的，但人們似乎很難記住這一點。如果不是這樣，《原子習慣》這樣的書銷售不會超過 1000 萬冊 🤯  另外，想想有多少次我們低估了完成工作任務所需的時間。這是一個典型的案例，告訴您的團隊錯誤修復“應該只需要一天”，但最終花了一周的時間。 不過不用擔心，即使是最有經驗的高階工程師也會遇到這種情況。 因此，當你試圖保持動力時，你能做的最糟糕的事情就是給自己設定一個過於雄心勃勃的目標，並列出看似無窮無盡的待辦事項清單。 保持簡單可以讓你更輕鬆地實現你的目標，這會讓你充滿靈感，並讓你不斷迭代。 不用擔心競爭 ------ *“我有一個很棒的想法，但其他人搶先了我”* 這是你在開發者中經常聽到的藉口，它讓他們中的許多人甚至無法開始。**我的建議是根本不用擔心競爭**。 為什麼？ 因為競爭是正常的，也是好的。您最終將不可避免地創造出一種可比較但不同的產品，該產品將與那些更像您（而不是像您的競爭對手）思考的客戶交談。 競爭對手也將不可避免地向您展示您不應在應用程式中複製或複製的內容。如果您看到他們的某個功能您不喜歡，或者發現自己在說“他們為什麼這樣做”，那麼您就放心了，您的應用程式可以找到自己的利基市場。 另外，以我的應用程式[CoverLetterGPT](https://coverlettergpt.xyz)為例，當我進行谷歌搜尋時，有大量贊助結果顯示在我的應用程式之前。  但你猜怎麼著，我的用戶數量每個月都在增加，而且我對這個應用程式幾乎沒有進行任何維護。是的，它基本上只是自行執行，即使有那麼多的競爭！ --- 順便說一句，如果您正在尋找一種快速且低維護成本的方式來啟動您的下一個副專案，請查看[Open SaaS](https://opensaas.sh/) ！  它是一個完全免費、開源、功能豐富的 React + NodeJS SaaS 模板，包含 Stripe、OpenAI 應用程式範例、分析、管理儀表板和完整的文件！ --- 好玩一點 ---- 沒有什麼比過於認真地對待這一切並僅僅因為你認為你應該這樣做而苦惱更糟糕的了。你是為自己做這件事，所以你應該享受這個過程。 嗯是的。尋找享受過程的方法！ 在工作中享受樂趣的最佳方法之一就是**做自己感興趣的事情**。我的意思是，你*真的*有興趣。不要欺騙自己，認為你會喜歡為一個想法而努力，只是因為它可能會成功，或者因為你可能會用它給別人留下深刻的印象。您可能最終會很快失去從事該專案的靈感！ 但如果你的問題是你根本沒有任何想法怎麼辦？ 好吧，我的建議是要有趣並進行實驗。很多偉大的想法都是二階想法。我的意思是，它們是在處理其他事情後隨機產生的想法。 例如，我對[CoverLetterGPT](https://coverlettergpt.xyz)的想法就來自對[OpenAI API 的](https://openai.com)簡單實驗。我想知道它是如何運作的，並透過試用它，使用它來產生求職信和管理工作申請的想法似乎是一個不錯的想法，所以我就這麼做了！ 在我看來，你對副業專案越有一種有趣的態度，你就會越喜歡為它們工作，這將帶來更專注的工作，甚至更多的想法。這是我在一些最好的獨立黑客（例如[Peter Levels）](https://twitter.com/levelsio)中看到的模式。我的意思是，看看令人印象深刻的 SaaS 應用程式清單！  永遠不要編碼 ------ 我的最後一項建議是： 休息一下！ 是的，向 dev.to 和 Twitter 上的每個人展示你有多努力的衝動很強烈，但你的身心健康會受到影響。  給自己休息一下，做點其他事情，例如嗜好。還記得那些嗎？ 當你休息一下時，你的潛意識可能會想出一些創造性的、鼓舞人心的想法，你可能也會感到驚訝🙂 您如何尋找建構靈感？ ---------- 因此，我上面給出的提示絕不是完整的清單。將它們視為對話的開始者。 我今天的目標是展示我學到的一些東西，可能對其他人有幫助，所以如果您有其他提示、更好的建議，甚至不同意我的觀點，請在評論中告訴我們！ --- 原文出處：https://dev.to/wasp/finding-the-inspiration-to-build-3p4n
今天，我們將學習如何使用 Wing 作為後端建立全端應用程式。  我們將使用 React 和 Vite 作為前端。 我知道還有其他框架，如 Vue、Angular 和 Next，但 React 仍然是最常見的，並且迄今為止有大量值得信賴的新創公司使用它。 如果您不知道， [React](https://github.com/facebook/react)是 Facebook 建立的開源程式庫，用於建立 Web 和本機使用者介面。正如您從儲存庫中看到的，它被超過 2040 萬開發人員使用。所以，這是值得的。 讓我們看看如何使用 Wing 作為後端。  --- [Wing](https://git.new/wing-repo) - 一種雲端程式語言。 ---------------------------------------------  Winglang 是一種專為雲端（又稱「面向雲端」）設計的新型開源程式語言。它允許您在雲端中建立應用程式，並且具有相當簡單的語法。 Wing 程式可以使用功能齊全的模擬器在本地執行（是的，不需要網路），也可以部署到任何雲端供應商。  Wing 需要 Node `v20 or higher` 。 建立一個父目錄（我們使用的`shared-counter` ）並使用 Vite 使用新的 React 應用程式設定前端。您可以使用這個 npm 指令。 ``` npm create -y vite frontend -- --template react-ts // once installed, you can check if it's running properly. cd frontend npm install npm run dev ``` 您可以使用此 npm 命令安裝 Wing。 ``` npm install -g winglang ``` 您可以使用`wing -V`驗證安裝。 Wing 還提供官方[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing) ，後者提供語法突出顯示、補全、轉到定義和嵌入式 Wing 控制台支援。您可以在建立應用程式之前安裝它！ 建立後端目錄。 ``` mkdir ~/shared-counter/backend cd ~/shared-counter/backend ``` 建立一個新的空 Wing 專案。 ``` wing new empty // This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program wing it // to run it in the Wing simulator // The Wing Simulator will be opened in your browser and will show a map of your app with a single function. //You can invoke the function from the interaction panel and check out the result. ``` 使用指令`wing new empty`後的結構如下。 ``` bring cloud; // define a queue, a bucket, and a counter let bucket = new cloud.Bucket(); let counter = new cloud.Counter(initial: 1); let queue = new cloud.Queue(); // When a message is received in the queue -> it should be consumed // by the following closure queue.setConsumer(inflight (message: str) => { // Increment the distributed counter, the index variable will // store the value before the increment let index = counter.inc(); // Once two messages are pushed to the queue, e.g. "Wing" and "Queue". // Two files will be created: // - wing-1.txt with "Hello Wing" // - wing-2.txt with "Hello Queue" bucket.put("wing-{index}.txt", "Hello, {message}"); log("file wing-{index}.txt created"); }); ``` 您可以安裝`@winglibs/vite`來啟動開發伺服器，而不是使用`npm run dev`來啟動本機 Web 伺服器。 ``` // in the backend directory npm i @winglibs/vite ``` 您可以使用`backend/main.w`中提供的 publicEnv 將資料傳送到前端。 讓我們來看一個小例子。 ``` // backend/main.w bring vite; new vite.Vite( root: "../frontend", publicEnv: { TITLE: "Wing + Vite + React" } ); // import it in frontend // frontend/src/App.tsx import "../.winglibs/wing-env.d.ts" //You can access that value like this. <h1>{window.wing.env.TITLE}</h1> ``` 你還可以做更多： - 讀取/更新 API 路線並使用 Wing Simulator 檢查它。 - 使用後端獲取值。 - 使用`@winglibs/websockets`同步瀏覽器，它在後端部署一個 WebSocket 伺服器，您可以連接此 WebSocket 來接收即時通知。 您可以閱讀完整的逐步指南，以了解[如何使用 React 作為前端和 Wing 作為後端建立簡單的 Web 應用程式](https://www.winglang.io/docs/guides/react-vite-websockets)。測試是使用 Wing Simulator 完成的，並使用 Terraform 部署到 AWS。 部署後的AWS架構是這樣的。  為了提供開發者選擇和更好的體驗，Wing 推出了對[TypeScript (Wing)](https://www.winglang.io/docs/typescript/)等其他語言的全面支援。唯一強制性的事情是您必須安裝 Wing SDK。 這也將使控制台完全可用於本地偵錯和測試，而無需學習 Wing 語言。 Wing 甚至還有其他[指南](https://www.winglang.io/docs/category/guides)，因此更容易遵循。  您可以閱讀[文件](https://www.winglang.io/docs)並查看[範例](https://www.winglang.io/docs/category/examples)。 您也可以在[Playground](https://www.winglang.io/play/?code=LwAvACAAVABoAGkAcwAgAGkAcwAgAHQAaABlACAAaQBtAHAAbwByAHQAIABzAHQAYQB0AGUAbQBlAG4AdAAgAGkAbgAgAFcAaQBuAGcALgAKAC8ALwAgAEgAZQByAGUAIAB3AGUAIABiAHIAaQBuAGcAIAB0AGgAZQAgAFcAaQBuAGcAIABzAHQAYQBuAGQAYQByAGQAIABsAGkAYgByAGEAcgB5ACAAdABoAGEAdAAgAAoALwAvACAAYwBvAG4AdABhAGkAbgBzACAAYQBiAHMAdAByAGEAYwB0AGkAbwBuAHMAIABvAGYAIABwAG8AcAB1AGwAYQByACAAYwBsAG8AdQBkACAAcwBlAHIAdgBpAGMAZQBzAC4ACgBiAHIAaQBuAGcAIABjAGwAbwB1AGQAOwAKAAoALwAvACAAVABoAGkAcwAgAGMAbwBkAGUAIABkAGUAZgBpAG4AZQBzACAAYQAgAGIAdQBjAGsAZQB0ACAAYQBzACAAcABhAHIAdAAgAG8AZgAgAHkAbwB1AHIAIABhAHAAcAAuAAoALwAvACAAVwBoAGUAbgAgAGMAbwBtAHAAaQBsAGkAbgBnACAAdABvACAAYQAgAHMAcABlAGMAaQBmAGkAYwAgAGMAbABvAHUAZAAgAHAAcgBvAHYAaQBkAGUAcgAKAC8ALwAgAGkAdAAgAHcAaQBsAGwAIABiAGUAIABzAHUAYgBzAHQAaQB0AHUAdABlAGQAIABiAHkAIABhAG4AIABpAG0AcABsAGUAbQBlAG4AdABhAHQAaQBvAG4AIABmAG8AcgAKAC8ALwAgAHQAaABhAHQAIABjAGwAbwB1AGQALgAgAEkALgBlACwAIABmAG8AcgAgAEEAVwBTACAAaQB0ACAAdwBpAGwAbAAgAGIAZQAgAGEAbgAgAFMAMwAgAEIAdQBjAGsAZQB0AC4ACgBsAGUAdAAgAGIAdQBjAGsAZQB0ACAAPQAgAG4AZQB3ACAAYwBsAG8AdQBkAC4AQgB1AGMAawBlAHQAKAApADsACgAKAC8ALwAgACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAKAC8ALwAgAFkAbwB1ACAAYwBhAG4AIABpAG4AdABlAHIAYQBjAHQAIAB3AGkAdABoACAAdABoAGUAIABhAHAAcAAgAGkAbgAgAHQAaABlACAAYwBvAG4AcwBvAGwAZQAgAC0ALQA%2BAAoALwAvACAACgAvAC8AIABDAGwAaQBjAGsAIABvAG4AIAB0AGgAZQAgAEYAdQBuAGMAdABpAG8AbgAsACAAYQBuAGQAIAB0AGgAZQBuACAAaQBuAHYAbwBrAGUAIABpAHQAIABpAG4AIAB0AGgAZQAKAC8ALwAgAGwAbwB3AGUAcgAgAHIAaQBnAGgAdAAgAHAAYQBuAGUAbAAsACAAbwByACAAYwBsAGkAYwBrACAAbwBuACAAdABoAGUAIABCAHUAYwBrAGUAdAAKAC8ALwAgAHQAbwAgAHMAZQBlACAAaQB0AHMAIABjAG8AbgB0AGUAbgB0AHMAIABpAG4AIAB0AGgAZQAgAHAAYQBuAGUAbAAsACAAZQB0AGMALgAKAC8ALwAgACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAKAAoALwAvACAAYABpAG4AZgBsAGkAZwBoAHQAcwBgACAAcgBlAHAAcgBlAHMAZQBuAHQAIABjAG8AZABlACAAdABoAGEAdAAgAHIAdQBuAHMAIABsAGEAdABlAHIALAAgAG8AbgAKAC8ALwAgAG8AdABoAGUAcgAgAG0AYQBjAGgAaQBuAGUAcwAsACAAaQBuAHQAZQByAGEAYwB0AGkAbgBnACAAdwBpAHQAaAAgAGMAYQBwAHQAdQByAGUAZAAgAGQAYQB0AGEAIABhAG4AZAAKAC8ALwAgAHIAZQBzAG8AdQByAGMAZQBzACAAZgByAG8AbQAgAHQAaABlACAAcAByAGUALQBmAGwAaQBnAGgAdAAgAHAAaABhAHMAZQAuAAoAbABlAHQAIABoAGUAbABsAG8AXwB3AG8AcgBsAGQAIAA9ACAAaQBuAGYAbABpAGcAaAB0ACAAKAApACAAPQA%2BACAAewAKACAAIABiAHUAYwBrAGUAdAAuAHAAdQB0ACgAIgBoAGUAbABsAG8ALgB0AHgAdAAiACwAIAAiAEgAZQBsAGwAbwAsACAAVwBvAHIAbABkACEAIgApADsACgB9ADsACgAKAC8ALwAgAEkAbgBmAGwAaQBnAGgAdABzACAAYwBhAG4AIABiAGUAIABkAGUAcABsAG8AeQBlAGQAIABhAHMAIABzAGUAcgB2AGUAcgBsAGUAcwBzACAAZgB1AG4AYwB0AGkAbwBuAHMACgBuAGUAdwAgAGMAbABvAHUAZAAuAEYAdQBuAGMAdABpAG8AbgAoAGgAZQBsAGwAbwBfAHcAbwByAGwAZAApADsACgAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAACgAvAC8AIACRISAAUwB3AGkAdABjAGgAIABmAGkAbABlAHMAIABhAG4AZAAgAHMAZQBlACAAbwB0AGgAZQByACAAZQB4AGEAbQBwAGwAZQBzACAAdwBpAHQAaAAgAG0AbwByAGUACgAvAC8AIABlAHgAcABsAGUAbgBhAHQAaQBvAG4AcwAgAGEAYgBvAHYAZQAuAA%3D%3D)中使用 Wing 查看結構和範例。 如果你比較像輔導員。看這個！ https://www.youtube.com/watch?v=wzqCXrsKWbo Wing 在 GitHub 上擁有超過 3500 個 Star，發布了 1500 多個版本，但仍未進入 v1 版本，這意味著意義重大。 去嘗試一下，做一些很酷的事情吧！ https://git.new/wing-repo 星翼 ⭐️ --- 開發者生態系統不斷發展，許多開發者圍繞 React 建置了一些獨特的東西。 我不會介紹如何使用 React，因為這是一個非常廣泛的主題，我在最後貼了一些資源來幫助您學習 React。 但為了幫助您建立出色的 React 專案，我們介紹了 25 個開源專案，您可以使用它們來使您的工作更輕鬆。 這將有大量的資源、想法和概念。 我甚至會給你一些學習資源，以及一些產品的專案範例來學習 React。 一切都是免費的，而且只有 React。 讓我們涵蓋這一切！ --- 1. [Mantine Hooks](https://www.npmjs.com/package/@mantine/hooks) - 用於狀態和 UI 管理的 React hooks。 --------------------------------------------------------------------------------------------  這可能不是專門針對 React 的，但是您可以使用這些鉤子來使您的工作更輕鬆。這些鉤子隨時可用，每個鉤子都有許多選項。 如果我必須評價的話，這將是每個人都可以使用的最有用的專案，而不是從頭開始編寫程式碼。 相信我，獲得 60 多個 Hooks 是一件大事，因為他們有一個簡單的方法讓您可以透過簡單的文件查看每個 Hooks 的演示。 開始使用以下 npm 指令。 ``` npm install @mantine/hooks ``` 這就是如何使用`useScrollIntoView`作為 mantine 掛鉤的一部分。 ``` import { useScrollIntoView } from '@mantine/hooks'; import { Button, Text, Group, Box } from '@mantine/core'; function Demo() { const { scrollIntoView, targetRef } = useScrollIntoView<HTMLDivElement>({ offset: 60, }); return ( <Group justify="center"> <Button onClick={() => scrollIntoView({ alignment: 'center', }) } > Scroll to target </Button> <Box style={{ width: '100%', height: '50vh', backgroundColor: 'var(--mantine-color-blue-light)', }} /> <Text ref={targetRef}>Hello there</Text> </Group> ); } ``` 它們幾乎擁有從本地儲存到分頁、滾動視圖、交叉點，甚至一些非常酷的實用程式（例如滴管和文字選擇）的所有功能。這實在太有幫助了！  您可以閱讀[文件](https://mantine.dev/hooks/use-click-outside/)。 如果您正在尋找更多選項，您也可以使用[替代庫](https://antonioru.github.io/beautiful-react-hooks/)。 他們在 GitHub 上擁有超過 23k star，但這不僅僅是為了 hooks，因為他們是 React 的元件庫。 隨著`v7`版本的發布，它的每週下載量已超過 38 萬次，這表明它們正在不斷改進且值得信賴。 https://github.com/mantinedev/mantine Star Mantine Hooks ⭐️ --- 2. [React Grid Layout](https://github.com/react-grid-layout/react-grid-layout) - 可拖曳且可調整大小的網格佈局，具有響應式斷點。 --------------------------------------------------------------------------------------------------------  React-Grid-Layout 是專為 React 應用程式建構的響應式網格佈局系統。 透過支援可拖曳、可調整大小和靜態小部件，它提供了使用網格的簡單解決方案。 與 Packery 或 Gridster 等類似系統不同，React-Grid-Layout 不含 jQuery，確保輕量級且高效的實作。 它與伺服器渲染應用程式的無縫整合以及序列化和恢復佈局的能力使其成為開發人員在 React 專案中使用網格佈局的寶貴工具。 開始使用以下 npm 指令。 ``` npm install react-grid-layout ``` 這就是如何使用響應式網格佈局。 ``` import { Responsive as ResponsiveGridLayout } from "react-grid-layout"; class MyResponsiveGrid extends React.Component { render() { // {lg: layout1, md: layout2, ...} const layouts = getLayoutsFromSomewhere(); return ( <ResponsiveGridLayout className="layout" layouts={layouts} breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }} cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} > <div key="1">1</div> <div key="2">2</div> <div key="3">3</div> </ResponsiveGridLayout> ); } } ``` 您可以閱讀[文件](https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#installation)並查看[演示](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html)。有一系列[演示](https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#demos)，甚至可以透過點擊“查看下一個範例”來獲得。 您也可以嘗試[codesandbox](https://codesandbox.io/p/devbox/github/gilbarbara/react-joyride-demo/tree/main/?embed=1)上的東西。 該專案在 GitHub 上有超過 19k+ 的星星，有超過 16k+ 的開發者使用，並且[npm 套件](https://www.npmjs.com/package/react-grid-layout)的每週下載量超過 600k+。 https://github.com/react-grid-layout/react-grid-layout 明星 React 網格佈局 ⭐️ --- 3. [React Spectrum](https://github.com/adobe/react-spectrum) - 提供出色使用者體驗的程式庫和工具的集合。 -----------------------------------------------------------------------------------  React Spectrum 是一個庫和工具的集合，可幫助您建立自適應、可存取且強大的使用者體驗。 它們提供了太多的東西，以至於很難在一篇文章中涵蓋所有內容。 總的來說，他們提供了這四個庫。  - [反應譜](https://react-spectrum.adobe.com/react-spectrum/index.html) - [React Stately](https://react-spectrum.adobe.com/react-stately/index.html) - 一組龐大的 React Hooks，為您的設計系統提供跨平台狀態管理。 - [反應詠嘆調](https://react-spectrum.adobe.com/react-aria/index.html) - [國際化](https://react-spectrum.adobe.com/internationalized/index.html) 我們將了解一些有關 React Aria 的內容，它是一個無樣式 React 元件和鉤子庫，可幫助您為應用程式建立可存取的、高品質的 UI 元件。 它經過了各種設備、互動方式和輔助技術的精心測試，以確保為所有用戶提供最佳體驗。 開始使用以下 npm 指令。 ``` npm i react-aria-components ``` 這就是建立自訂`select`的方法。 ``` import {Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue} from 'react-aria-components'; <Select> <Label>Favorite Animal</Label> <Button> <SelectValue /> <span aria-hidden="true">▼</span> </Button> <Popover> <ListBox> <ListBoxItem>Cat</ListBoxItem> <ListBoxItem>Dog</ListBoxItem> <ListBoxItem>Kangaroo</ListBoxItem> </ListBox> </Popover> </Select> ``` 相信我，出於學習目的，這是一座金礦。  他們使用自己強大的[40 多個樣式元件](https://opensource.adobe.com/spectrum-css/)，這比通常提供的要多得多。他們也有自己的一套[設計系統，](https://spectrum.adobe.com/)例如字體、UI、版面、動作等等。   您可以詳細了解[Spectrum](https://react-spectrum.adobe.com/index.html)及其[架構](https://react-spectrum.adobe.com/architecture.html)。 他們在 GitHub 上擁有超過 11,000 顆星，這表明了他們的質量，儘管他們並不廣為人知。研究它們可以為您建立圖書館提供寶貴的見解。 https://github.com/adobe/react-spectrum Star React Spectrum ⭐️ --- 4.[保留 React](https://github.com/StaticMania/keep-react) - Tailwind CSS 和 React.js 的 UI 元件庫。 -------------------------------------------------------------------------------------------  Keep React 是一個基於 Tailwind CSS 和 React.js 建立的開源元件庫。它提供了一組多功能的預先設計的 UI 元件，使開發人員能夠簡化現代、響應式且具有視覺吸引力的 Web 應用程式的建立。 開始使用以下 npm 指令。 ``` npm i keep-react ``` 這就是使用時間軸的方法。 ``` "use client"; import { Timeline } from "keep-react"; import { CalendarBlank } from "phosphor-react"; export const TimelineComponent = () => { return ( <Timeline horizontal={true}> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.0.0</Timeline.Title> <Timeline.Time>Released on December 2, 2021</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.1.0</Timeline.Title> <Timeline.Time>Released on December 23, 2021</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.3.0</Timeline.Title> <Timeline.Time>Released on January 5, 2022</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> </Timeline> ); } ``` 輸出如下。  流暢的小動畫讓這一切都是值得的，如果你想快速建立一個 UI，沒有任何麻煩，你可以使用它。   您可以閱讀[文件](https://react.keepdesign.io/docs/getting-started/Introduction)並查看[故事書](https://react-storybook.keepdesign.io/?path=/docs/components-accordion--docs)以進行詳細的使用測驗。 該專案在 GitHub 上有超過 1000 顆星，而且它的一些元件使用起來非常方便。 https://github.com/StaticMania/keep-react Star Keep React ⭐️ --- 5. [React Content Loader](https://github.com/danilowoz/react-content-loader) - SVG 支援的元件，可輕鬆建立骨架載入。 ---------------------------------------------------------------------------------------------------  該專案為您提供了一個由 SVG 驅動的元件，可以輕鬆建立佔位符載入（如 Facebook 的卡片載入）。 在載入狀態期間使用骨架來向使用者指示內容仍在載入。 總的來說，這是一個非常方便的專案，可以增強整體使用者體驗。 開始使用以下 npm 指令。 ``` npm i react-content-loader --save ``` 您可以這樣使用它。 ``` import React from "react" import ContentLoader from "react-content-loader" const MyLoader = (props) => ( <ContentLoader speed={2} width={400} height={160} viewBox="0 0 400 160" backgroundColor="#f3f3f3" foregroundColor="#ecebeb" {...props} > <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> <circle cx="20" cy="20" r="20" /> </ContentLoader> ) export default MyLoader ```  您甚至可以拖曳單一骨架或使用為 Facebook 和 Instagram 等不同社群媒體預先定義的骨架。 您可以閱讀[文件](https://github.com/danilowoz/react-content-loader?tab=readme-ov-file#gettingstarted)並查看[演示](https://skeletonreact.com/)。 該專案在 GitHub 上擁有 13k+ Stars，並在 GitHub 上有 45k+ 開發人員使用。 https://github.com/danilowoz/react-content-loader Star React 內容載入器 ⭐️ --- 6. [React PDF](https://github.com/diegomura/react-pdf) - 使用 React 建立 PDF 檔案。 ----------------------------------------------------------------------------  該套件用於使用 React 建立 PDF。 開始使用以下 npm 指令。 ``` npm install @react-pdf/renderer --save ``` 您可以這樣使用它。 ``` import React from 'react'; import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'; // Create styles const styles = StyleSheet.create({ page: { flexDirection: 'row', backgroundColor: '#E4E4E4', }, section: { margin: 10, padding: 10, flexGrow: 1, }, }); // Create Document Component const MyDocument = () => ( <Document> <Page size="A4" style={styles.page}> <View style={styles.section}> <Text>Section #1</Text> </View> <View style={styles.section}> <Text>Section #2</Text> </View> </Page> </Document> ); ```   您可以閱讀[文件](https://react-pdf.org/)並查看[演示](https://react-pdf.org/repl)。 React-pdf 現在提供了一個名為`usePDF`的鉤子，可以透過 React hook API 存取所有 PDF 建立功能。如果您需要更多控製文件的呈現方式或更新頻率，這非常有用。 ``` const [instance, update] = usePDF({ document }); ``` 該專案在 GitHub 上有 13k+ Stars，有超過 270 個版本，[每週下載量超過 400k](https://www.npmjs.com/package/@react-pdf/renderer) ，這是一個好兆頭。 https://github.com/diegomura/react-pdf Star React PDF ⭐️ --- 7. [Recharts](https://github.com/recharts/recharts) - 使用 React 和 D3 建立的重新定義的圖表庫。 --------------------------------------------------------------------------------  該庫的主要目的是幫助您輕鬆地在 React 應用程式中編寫圖表。 Recharts 的主要原則是。 1. 只需使用 React 元件進行部署即可。 2. 原生 SVG 支持，輕量級，僅依賴一些 D3 子模組。 3. 聲明性元件、圖表元件純粹是表示性的。 開始使用以下 npm 指令。 ``` npm install recharts ``` 您可以這樣使用它。 ``` <LineChart width={500} height={300} data={data} accessibilityLayer> <XAxis dataKey="name"/> <YAxis/> <CartesianGrid stroke="#eee" strokeDasharray="5 5"/> <Line type="monotone" dataKey="uv" stroke="#8884d8" /> <Line type="monotone" dataKey="pv" stroke="#82ca9d" /> <Tooltip/> </LineChart> ```  您可以閱讀[文件](https://recharts.org/en-US/guide)並查看有關[Storybook](https://recharts.org/en-US/storybook)的更多資訊。 他們提供了大量的選項來自訂它，這就是開發人員喜歡它的原因。他們也提供一般常見問題的[wiki](https://github.com/recharts/recharts/wiki)頁面。 您也可以在此處的codesandbox 上嘗試。 https://codesandbox.io/embed/kec3v?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx 該專案在 GitHub 上有 22k+ Stars，有 200k+ 開發人員使用。 https://github.com/recharts/recharts 明星 Recharts ⭐️ --- 8. [React Joyride](https://github.com/gilbarbara/react-joyride) - 在您的應用程式中建立導遊。 -------------------------------------------------------------------------------   導覽是向新用戶展示您的應用程式或解釋新功能的絕佳方式。它改善了用戶體驗並可以創造個人化的觸感。 開始使用以下 npm 指令。 ``` npm i react-joyride ``` 您可以這樣使用它。 ``` import React, { useState } from 'react'; import Joyride from 'react-joyride'; /* * If your steps are not dynamic you can use a simple array. * Otherwise you can set it as a state inside your component. */ const steps = [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This another awesome feature!', }, ]; export default function App() { // If you want to delay the tour initialization you can use the `run` prop return ( <div> <Joyride steps={steps} /> ... </div> ); } ``` 它們還提供[元件列表](https://docs.react-joyride.com/custom-components)以及自訂預設用戶介面的簡單方法。 您可以閱讀[文件](https://docs.react-joyride.com/)並查看[演示](https://react-joyride.com/)。 您也可以嘗試[codesandbox](https://codesandbox.io/p/devbox/github/gilbarbara/react-joyride-demo/tree/main/?embed=1)上的東西。 他們在 GitHub 上有超過 6k 顆星，npm 套件每週下載量超過 25 萬次。 https://github.com/gilbarbara/react-joyride Star React Joyride ⭐️ --- 9. [SVGR](https://github.com/gregberge/svgr) - 將 SVG 轉換為 React 元件。 ------------------------------------------------------------------  SVGR 是一個將 SVG 轉換為 React 元件的通用工具。 它需要一個原始的 SVG 並將其轉換為隨時可用的 React 元件。 開始使用以下 npm 指令。 ``` npm install @svgr/core ``` 例如，您採用這個 SVG。 ``` <?xml version="1.0" encoding="UTF-8"?> <svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --> <title>Rectangle 5</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855" > <g id="Controls/Settings" transform="translate(80.000000, 0.000000)"> <g id="Content" transform="translate(0.000000, 64.000000)"> <g id="Group" transform="translate(24.000000, 56.000000)"> <g id="Group-2"> <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect> </g> </g> </g> </g> </g> </g> </svg> ``` 執行SVGR後，將轉換為. ``` import * as React from 'react' const SvgComponent = (props) => ( <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}> <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" /> </svg> ) export default SvgComponent ``` 它使用[SVGO](https://github.com/svg/svgo)優化 SVG，並使用 Prettier 格式化程式碼。 將 HTML 轉換為 JSX 需要幾個步驟： 1. 將 SVG 轉換為 HAST (HTML AST) 2. 將 HAST 轉換為 Babel AST (JSX AST) 3. 使用 Babel 轉換 AST（重新命名屬性、更改屬性值…） 您可以在[Playground](https://react-svgr.com/playground/)閱讀[文件](https://react-svgr.com/docs/getting-started)並檢查內容。 該專案在 GitHub 上擁有 10k+ Stars，有超過 800 萬開發者使用，npm 上每週下載量超過 800k。 https://github.com/gregberge/svgr 明星 SVGR ⭐️ --- 10. [React Sortable Tree](https://github.com/frontend-collective/react-sortable-tree) - 用於巢狀資料和層次結構的拖放可排序元件。 ------------------------------------------------------------------------------------------------------------  一個 React 元件，支援對分層資料進行拖放排序。  開始使用以下 npm 指令。 ``` npm install react-sortable-tree --save ``` 您可以這樣使用它。 ``` import React, { Component } from 'react'; import SortableTree from 'react-sortable-tree'; import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app export default class Tree extends Component { constructor(props) { super(props); this.state = { treeData: [ { title: 'Chicken', children: [{ title: 'Egg' }] }, { title: 'Fish', children: [{ title: 'fingerline' }] }, ], }; } render() { return ( <div style={{ height: 400 }}> <SortableTree treeData={this.state.treeData} onChange={treeData => this.setState({ treeData })} /> </div> ); } } ``` 檢查由此獲得的各種[道具選項](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#props)和[主題](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#featured-themes)。 您可以閱讀[文件](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#getting-started)並查看[Storybook](https://frontend-collective.github.io/react-sortable-tree/?path=/story/basics--minimal-implementation) ，以獲取一些基本和高級功能的演示。 它可能不會被積極維護（仍然沒有存檔），因此您也可以使用[維護的 fork 版本](https://github.com/nosferatu500/react-sortable-tree)。 該專案在 GitHub 上擁有超過 4,500 個 Star，並被超過 5,000 名開發人員使用。 https://github.com/frontend-collective/react-sortable-tree Star React 可排序樹 ⭐️ --- 11. [React Hot Toast](https://github.com/timolins/react-hot-toast) - 冒煙的 Hot React 通知。 --------------------------------------------------------------------------------------  React Hot Toast 透過簡單的自訂選項提供了驚人的 🔥 預設體驗。它利用 Promise API 進行自動加載，確保平穩過渡。 它重量輕，不到 5kb，但仍然可以存取，同時為開發人員提供了像`useToaster()`這樣的無頭鉤子。 首先將 Toaster 加入到您的應用程式中。它將負責渲染發出的所有通知。現在您可以從任何地方觸發 toast() ！ 開始使用以下 npm 指令。 ``` npm install react-hot-toast ``` 這就是它的易用性。 ``` import toast, { Toaster } from 'react-hot-toast'; const notify = () => toast('Here is your toast.'); const App = () => { return ( <div> <button onClick={notify}>Make me a toast</button> <Toaster /> </div> ); }; ```   他們有很多自訂選項，但`useToaster()`掛鉤為您提供了一個無頭系統，可以為您管理通知狀態。這使得建立您的通知系統變得更加容易。 您可以閱讀[文件](https://react-hot-toast.com/docs)、[樣式指南](https://react-hot-toast.com/docs/styling)並查看[示範](https://react-hot-toast.com/)。 該專案在 GitHub 上有 8k+ Stars，有 230k+ 開發者使用。 https://github.com/timolins/react-hot-toast Star React Hot Toast ⭐️ --- 12. [Payload](https://github.com/payloadcms/payload) - 建立現代後端+管理 UI 的最佳方式。 --------------------------------------------------------------------------  Payload 是一個無頭 CMS 和應用程式框架。它旨在促進您的開發過程，但重要的是，當您的應用程式變得更加複雜時，不要妨礙您。 Payload 沒有黑魔法，完全開源，它既是一個應用程式框架，也是一個無頭 CMS。它確實是適用於 TypeScript 的 Rails，並且您會獲得一個管理面板。您可以使用此[YouTube 影片](https://www.youtube.com/watch?v=In_lFhzmbME)了解有關 Payload 的更多資訊。 https://www.youtube.com/watch?v=In\_lFhzmbME 您可以透過使用Payload來了解[其中涉及的概念](https://payloadcms.com/docs/getting-started/concepts)。  有效負載透過您選擇的資料庫適配器與您的資料庫進行互動。目前，Payload 正式支援兩種資料庫適配器： 1. MongoDB 與 Mongoose 2. Postgres 帶毛毛雨 開始使用以下命令。 ``` npx create-payload-app@latest ``` 您必須產生 Payload 金鑰並更新`server.ts`以初始化 Payload。 ``` import express from 'express' import payload from 'payload' require('dotenv').config() const app = express() const start = async () => { await payload.init({ secret: process.env.PAYLOAD_SECRET, express: app, }) app.listen(3000, async () => { console.log( "Express is now listening for incoming connections on port 3000." ) }) } start() ```  您可以閱讀[文件](https://payloadcms.com/docs/getting-started/what-is-payload)並查看[演示](https://demo.payloadcms.com/?_gl=1*9x0za3*_ga*NzEzMzkwNzIuMTcxMDE2NDk1MA..*_ga_FLQ5THRMZQ*MTcxMDE2NDk1MC4xLjEuMTcxMDE2NDk1MS4wLjAuMA..)。 他們還提供與 Payload + Stripe 無縫整合的[電子商務模板](https://github.com/payloadcms/payload/tree/main/templates/ecommerce)。此範本具有令人驚嘆的、功能齊全的前端，包括購物車、結帳流程、訂單管理等元件。 Payload 在 GitHub 上擁有 18k+ Stars，並且有超過 290 個版本，因此它們不斷改進，尤其是在資料庫支援方面。 https://github.com/payloadcms/payload 明星有效負載 ⭐️ --- 13. [React Player](https://github.com/cookpete/react-player) - 用於播放各種 URL 的 React 元件。 -------------------------------------------------------------------------------------  用於播放各種 URL 的 React 元件，包括檔案路徑、YouTube、Facebook、Twitch、SoundCloud、Streamable、Vimeo、Wistia、Mixcloud、DailyMotion 和 Kaltura。您可以看到[支援的媒體](https://github.com/cookpete/react-player?tab=readme-ov-file#supported-media)清單。 ReactPlayer 的維護工作由 Mux 接管，這使它們成為一個不錯的選擇。 開始使用以下 npm 指令。 ``` npm install react-player ``` 您可以這樣使用它。 ``` import React from 'react' import ReactPlayer from 'react-player' // Render a YouTube video player <ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' /> // If you only ever use one type, use imports such as react-player/youtube to reduce your bundle size. // like this: import ReactPlayer from 'react-player/youtube' ``` 您也可以使用`react-player/lazy`為您傳入的URL 延遲載入適當的播放器。這會為您的輸出加入幾個reactPlayer 區塊，但會減少主包的大小。 ``` import React from 'react' import ReactPlayer from 'react-player/lazy' // Lazy load the YouTube player <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' /> ``` 您可以閱讀[文件](https://github.com/cookpete/react-player?tab=readme-ov-file#props)並查看[演示](https://cookpete.github.io/react-player/)。他們提供了大量的選項，包括加入字幕並以簡單的方式使其響應。 它們在 GitHub 上擁有超過 8000 顆星，被超過 135,000 名開發人員使用，並且 npm 軟體包[每週的下載量超過 800k](https://www.npmjs.com/package/react-player) 。 https://github.com/cookpete/react-player 明星 React 播放器 ⭐️ --- 14. [Victory](https://github.com/FormidableLabs/victory) - 用於建立互動式資料視覺化的 React 元件。 ----------------------------------------------------------------------------------  Victory 是一個可組合 React 元件的生態系統，用於建立互動式資料視覺化。  開始使用以下 npm 指令。 ``` npm i --save victory ``` 您可以這樣使用它。 ``` <VictoryChart domainPadding={{ x: 20 }} > <VictoryHistogram style={{ data: { fill: "#c43a31" } }} data={sampleHistogramDateData} bins={[ new Date(2020, 1, 1), new Date(2020, 4, 1), new Date(2020, 8, 1), new Date(2020, 11, 1) ]} /> </VictoryChart> ``` 這就是它的渲染方式。他們還提供通常有用的動畫和主題選項。  您可以閱讀[文件](https://commerce.nearform.com/open-source/victory/docs)並按照[教學](https://commerce.nearform.com/open-source/victory/docs/native)開始。他們提供大約 15 種不同的圖表選項。 它也可用於[React Native（文件）](https://commerce.nearform.com/open-source/victory/docs/native) ，所以這是一個優點。我還建議您查看他們的常見[問題解答](https://commerce.nearform.com/open-source/victory/docs/faq#frequently-asked-questions-faq)，其中描述了常見問題的程式碼解決方案和解釋，例如樣式、註釋（標籤）、處理軸。 該專案在 GitHub 上擁有 10k+ Stars，並在 GitHub 上有 23k+ 開發人員使用。 https://github.com/FormidableLabs/victory 勝利之星 ⭐️ --- 15. [React Slick](https://github.com/akiran/react-slick) - React 輪播元件。 ----------------------------------------------------------------------  React Slick 是一個使用 React 建構的輪播元件。它是一個光滑的旋轉木馬的反應端口 開始使用以下 npm 指令。 ``` npm install react-slick --save ``` 這是使用自訂分頁的方法。 ``` import React, { Component } from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; function CustomPaging() { const settings = { customPaging: function(i) { return ( <a> <img src={`${baseUrl}/abstract0${i + 1}.jpg`} /> </a> ); }, dots: true, dotsClass: "slick-dots slick-thumb", infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <div className="slider-container"> <Slider {...settings}> <div> <img src={baseUrl + "/abstract01.jpg"} /> </div> <div> <img src={baseUrl + "/abstract02.jpg"} /> </div> <div> <img src={baseUrl + "/abstract03.jpg"} /> </div> <div> <img src={baseUrl + "/abstract04.jpg"} /> </div> </Slider> </div> ); } export default CustomPaging; ```  您可以閱讀有關可用的[prop 選項](https://react-slick.neostack.com/docs/api)和[方法](https://react-slick.neostack.com/docs/api#methods)的資訊。 您可以閱讀[文件](https://react-slick.neostack.com/docs/get-started)和所有帶有程式碼和輸出[的範例集](https://react-slick.neostack.com/docs/example/)。 他們在 GitHub 上有超過 11k 顆星，並且有超過 36 萬開發者在 GitHub 上使用它。 https://github.com/akiran/react-slick Star React Slick ⭐️ --- 16. [Medusa](https://github.com/medusajs/medusa) - 數位商務的建構模組。 -------------------------------------------------------------  Medusa 是一組商務模組和工具，可讓您建立豐富、可靠且高效能的商務應用程式，而無需重新發明核心商務邏輯。 這些模組可以客製化並用於建立高級電子商務商店、市場或任何需要基礎商務原語的產品。所有模組都是開源的，可以在 npm 上免費取得。 開始使用以下 npm 指令。 ``` npm install medusa-react @tanstack/[email protected] @medusajs/medusa ``` 將其包含在`app.ts`中。 只有 MedusaProvider 的子級才能從其鉤子中受益。因此，Storefront 元件及其子元件現在可以使用 Medusa React 公開的鉤子。 ``` import { MedusaProvider } from "medusa-react" import Storefront from "./Storefront" import { QueryClient } from "@tanstack/react-query" import React from "react" const queryClient = new QueryClient() const App = () => { return ( <MedusaProvider queryClientProviderProps={{ client: queryClient }} baseUrl="http://localhost:9000" > <Storefront /> </MedusaProvider> ) } export default App ``` 例如，這就是您如何使用突變來建立購物車。 ``` import { useCreateCart } from "medusa-react" const Cart = () => { const createCart = useCreateCart() const handleClick = () => { createCart.mutate({}) // create an empty cart } return ( <div> {createCart.isLoading && <div>Loading...</div>} {!createCart.data?.cart && ( <button onClick={handleClick}> Create cart </button> )} {createCart.data?.cart?.id && ( <div>Cart ID: {createCart.data?.cart.id}</div> )} </div> ) } export default Cart ``` 他們提供了一套電子商務模組（大量選項），例如折扣、價目表、禮品卡等。  它們還提供了一種簡單的管理員和客戶身份驗證方法，您可以在[文件](https://docs.medusajs.com/)中閱讀。 他們提供了[nextjs 入門模板](https://docs.medusajs.com/starters/nextjs-medusa-starter)和[Medusa React](https://docs.medusajs.com/medusa-react/overview)作為 SDK。 該專案在 GitHub 上有 22k+ Stars，有 4k+ 開發者使用。 https://github.com/medusajs/medusa 明星美杜莎 ⭐️ --- 17. [React Markdown](https://github.com/remarkjs/react-markdown) - React 的 Markdown 元件. ---------------------------------------------------------------------------------------  Markdown 至關重要，使用 React 渲染它對於各種場景都非常有用。 它提供了一個 React 元件，能夠安全地將一串 Markdown 渲染到 React 元素中。您可以透過傳遞外掛程式並指定要使用的元件而不是標準 HTML 元素來自訂 Markdown 的轉換。 開始使用以下 npm 指令。 ``` npm i react-markdown ``` 您可以這樣使用它。 ``` import React from 'react' import {createRoot} from 'react-dom/client' import Markdown from 'react-markdown' import remarkGfm from 'remark-gfm' const markdown = `Just a link: www.nasa.gov.` createRoot(document.body).render( <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown> ) ``` 等效的 JSX 是。 ``` <p> Just a link: <a href="http://www.nasa.gov">www.nasa.gov</a>. </p> ``` 他們還提供了一份[備忘錄](https://commonmark.org/help/)和一個十分鐘的逐步[教學](https://commonmark.org/help/tutorial/)。  您可以閱讀[文件](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#install)並查看[演示](https://remarkjs.github.io/react-markdown/)。 該專案在 GitHub 上有 12k+ Stars，[每週下載量超過 2700k](https://www.npmjs.com/package/react-markdown) ，並被 200k+ 開發人員使用，證明了它的真正有用性。 https://github.com/remarkjs/react-markdown Star React Markdown ⭐️ --- 18. [React JSONSchema Form](https://github.com/rjsf-team/react-jsonschema-form) - 用於從 JSON Schema 建立 Web 表單。 ------------------------------------------------------------------------------------------------------------  `react-jsonschema-form`會自動從 JSON Schema 產生 React 表單，使其非常適合僅使用 JSON schema 為任何資料產生表單。它提供了像 uiSchema 這樣的自訂選項來自訂預設主題之外的表單外觀。 開始使用以下 npm 指令。 ``` npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save ``` 您可以這樣使用它。 ``` import { RJSFSchema } from '@rjsf/utils'; import validator from '@rjsf/validator-ajv8'; const schema: RJSFSchema = { title: 'Todo', type: 'object', required: ['title'], properties: { title: { type: 'string', title: 'Title', default: 'A new task' }, done: { type: 'boolean', title: 'Done?', default: false }, }, }; const log = (type) => console.log.bind(console, type); render( <Form schema={schema} validator={validator} onChange={log('changed')} onSubmit={log('submitted')} onError={log('errors')} />, document.getElementById('app') ); ``` 他們提供[高級定制](https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/)選項，包括定制小部件。 您可以閱讀[文件](https://rjsf-team.github.io/react-jsonschema-form/docs/)並查看[即時遊樂場](https://rjsf-team.github.io/react-jsonschema-form/)。 它在 GitHub 上擁有超過 13k 個 Star，並被 5k+ 開發人員使用。他們在`v5`上發布了 190 多個版本，因此他們正在不斷改進。 https://github.com/rjsf-team/react-jsonschema-form Star React JSONSchema 表單 ⭐️ --- 19. [Craft.js](https://github.com/prevwong/craft.js) - 建立可擴充的拖放頁面編輯器。 ---------------------------------------------------------------------  頁面編輯器可以增強使用者體驗，但從頭開始建立頁面編輯器可能會令人望而生畏。現有庫提供具有可編輯元件的預先建置編輯器，但自訂通常需要修改庫本身。 Craft.js 透過模組化頁面編輯器元件、透過拖放功能簡化自訂以及渲染管理來解決這個問題。在 React 中設計你的編輯器，無需複雜的插件系統，專注於你的特定需求和規格。 開始使用以下 npm 指令。 ``` npm install --save @craftjs/core ``` 他們還提供了有關如何入門的[簡短教程](https://craft.js.org/docs/guides/basic-tutorial)。我不會介紹它，因為它非常簡單且詳細。 您可以閱讀[文件](https://craft.js.org/docs/overview)並查看[即時演示](https://craft.js.org/)以及另一個[即時範例](https://craft.js.org/examples/basic)。 它在 GitHub 上有大約 6k+ Stars，但考慮到它們正在改進，仍然很有用。 https://github.com/prevwong/craft.js Star Craft.js ⭐️ --- 20. [Gatsby](https://github.com/gatsbyjs/gatsby) - 最好的基於 React 的框架，具有內建的效能、可擴展性和安全性。 ------------------------------------------------------------------------------------  Gatsby 是一個基於 React 的框架，使開發人員能夠建立閃電般快速的網站和應用程式，將動態渲染的靈活性與靜態網站生成的速度融為一體。 憑藉可自訂的 UI 和對各種資料來源的支援等功能，Gatsby 提供了無與倫比的控制和可擴展性。此外，它還可以自動進行效能最佳化，使其成為靜態網站的首選。 開始使用以下 npm 指令。 ``` npm init gatsby ``` 這就是如何在 Gatsby（反應元件）中使用`Link` 。 ``` import React from "react" import { Link } from "gatsby" const Page = () => ( <div> <p> Check out my <Link to="/blog">blog</Link>! </p> <p> {/* Note that external links still use `a` tags. */} Follow me on <a href="https://twitter.com/gatsbyjs">Twitter</a>! </p> </div> ) ``` 他們提供了一組[入門模板，](https://www.gatsbyjs.com/starters/)其中包含如何使用它、涉及的依賴項以及每個模板的演示。  您可以閱讀有關 Gatsby 的一些[常見概念，](https://www.gatsbyjs.com/docs/conceptual/gatsby-concepts/)例如 React Hydration、Gatsby 建置流程等。 您可以閱讀[文件](https://www.gatsbyjs.com/docs/)並查看入門[教學課程](https://www.gatsbyjs.com/docs/tutorial/)。 Gatsby 在 GitHub 上擁有超過 55,000 顆星，並被超過 240,000 名開發者使用 https://github.com/gatsbyjs/gatsby 明星蓋茲比 ⭐️ --- 21. [Chat UI Kit React](https://github.com/chatscope/chat-ui-kit-react) - 在幾分鐘內使用 React 建立您的聊天 UI。 --------------------------------------------------------------------------------------------------  Chatscope 的聊天 UI 工具包是一個用於開發網頁聊天應用程式的開源 UI 工具包。 儘管該專案並未廣泛使用，但這些功能對於剛剛查看該專案的初學者來說還是很有用的。  開始使用以下 npm 指令。 ``` npm install @chatscope/chat-ui-kit-react ``` 這就是建立 GUI 的方法。 ``` import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'; import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react'; <div style={{ position:"relative", height: "500px" }}> <MainContainer> <ChatContainer> <MessageList> <Message model={{ message: "Hello my friend", sentTime: "just now", sender: "Joe" }} /> </MessageList> <MessageInput placeholder="Type message here" /> </ChatContainer> </MainContainer> </div> ``` 您可以閱讀[文件](https://chatscope.io/docs/)。 故事書中有更[詳細的文件](https://chatscope.io/storybook/react/?path=/docs/documentation-introduction--docs)。 它提供了一些方便的元件，例如[`TypingIndicator`](https://chatscope.io/storybook/react/?path=/docs/components-typingindicator--docs) 、 [`Multiline Incoming`](https://chatscope.io/storybook/react/?path=/story/components-message--multiline-incoming)等等。 我知道你們中的一些人更喜歡透過部落格來了解整個結構，因此你可以閱讀使用 Chat UI Kit React 的 Rollbar 的[如何將 ChatGPT 與 React 整合](https://rollbar.com/blog/how-to-integrate-chatgpt-with-react/)。 您可以看到的一些演示： - [聊天機器人使用者介面](https://mars.chatscope.io/) - [與朋友聊天](https://chatscope.io/demo/chat-friends/)- 看看這個！  https://github.com/chatscope/chat-ui-kit-react Star Chat UI Kit React ⭐️ --- 22. [Botonic](https://github.com/hubtype/botonic) - 用於建立會話應用程式的 React 框架。 -------------------------------------------------------------------------  Botonic 是一個全端 Javascript 框架，用於建立在多個平台上執行的聊天機器人和現代對話應用程式：Web、行動和訊息應用程式（Messenger、WhatsApp、Telegram 等）。它建構在 ⚛️ React、Serverless 和 Tensorflow.js 之上。 如果您不了解對話應用程式的概念，可以在[官方部落格](https://www.hubtype.com/blog/what-are-conversational-apps)上閱讀它們。 使用 Botonic，您可以建立包含最佳文字外介面（簡單性、自然語言互動）和圖形介面（多媒體、視覺上下文、豐富互動）的會話應用程式。 這是一個強大的組合，可以提供比僅依賴文字和 NLP 的傳統聊天機器人更好的用戶體驗。 這就是 Botonic 的簡單方式。 ``` export default class extends React.Component { static async botonicInit({ input, session, params, lastRoutePath }) { await humanHandOff(session)) } render() { return ( <Text> Thanks for contacting us! One of our agents will attend you as soon as possible. </Text> ) } } ``` 它們也支援 TypeScript，所以這是一個優點。 您可以看到一些使用 Botonic 建置的[範例](https://botonic.io/examples/)及其原始程式碼。 您可以閱讀[文件](https://botonic.io/docs/welcome)以及如何[從頭開始建立會話應用程式](https://botonic.io/docs/create-convapp)。 https://github.com/hubtype/botonic Star Botonic ⭐️ --- 23. [React Flowbite](https://github.com/themesberg/flowbite-react) - 為 Flowbite 和 Tailwind CSS 建構的 React 元件. ------------------------------------------------------------------------------------------------------------  每個人對他們想要用來建立網站的使用者介面都有不同的偏好。 Flowbite React 是 UI 元件的開源集合，在 React 中建置，具有來自 Tailwind CSS 的實用程式類，您可以將其用作使用者介面和網站的起點。 開始使用以下 npm 指令。 ``` npm i flowbite-react ``` 這是一起使用表格和鍵盤元件的方法。 ``` 'use client'; import { Kbd, Table } from 'flowbite-react'; import { MdKeyboardArrowDown, MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowUp } from 'react-icons/md'; function Component() { return ( <Table> <Table.Head> <Table.HeadCell>Key</Table.HeadCell> <Table.HeadCell>Description</Table.HeadCell> </Table.Head> <Table.Body className="divide-y"> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <Kbd>Shift</Kbd> <span>or</span> <Kbd>Tab</Kbd> </Table.Cell> <Table.Cell>Navigate to interactive elements</Table.Cell> </Table.Row> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <Kbd>Enter</Kbd> or <Kbd>Spacebar</Kbd> </Table.Cell> <Table.Cell>Ensure elements with ARIA role="button" can be activated with both key commands.</Table.Cell> </Table.Row> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <span className="inline-flex gap-1"> <Kbd icon={MdKeyboardArrowUp} /> <Kbd icon={MdKeyboardArrowDown} /> </span> <span> or </span> <span className="inline-flex gap-1"> <Kbd icon={MdKeyboardArrowLeft} /> <Kbd icon={MdKeyboardArrowRight} /> </span> </Table.Cell> <Table.Cell>Choose and activate previous/next tab.</Table.Cell> </Table.Row> </Table.Body> </Table> ); } ```  您可以閱讀[文件](https://www.flowbite-react.com/docs/getting-started/introduction)並查看[Storybook](https://storybook.flowbite-react.com/?path=/story/components-accordion--always-open)中的功能。您也可以查看[元件](https://www.flowbite-react.com/docs/components/accordion)清單。 在我看來，如果您想快速設定 UI，但又不想最終為高品質的開源專案使用預先定義的庫元件，那麼這很好。 該專案在 GitHub 上擁有超過 1,500 顆星，擁有超過 37,000 名開發者的用戶群，並受到社群的廣泛認可和信任，使其成為一個可靠的選擇。 https://github.com/themesberg/flowbite-react Star React Flowbite ⭐️ --- 24. [DND 套件](https://github.com/clauderic/dnd-kit)- 輕量級、高效能、可存取且可擴展的拖放功能。 -------------------------------------------------------------------------  這是一個強大的 React 拖放工具包，擁有可自訂的碰撞檢測、多個啟動器和自動滾動等功能。 它的設計考慮到了 React，提供了方便集成的鉤子，無需進行重大的架構更改。支援從清單到網格和虛擬化清單的各種用例，它既是動態的又是輕量級的，沒有外部相依性。 開始使用以下 npm 指令。 ``` npm install @dnd-kit/core ``` 這就是建立可拖放元件的方法。 `Example.jsx` ``` import React, {useState} from 'react'; import {DndContext} from '@dnd-kit/core'; import {Draggable} from './Draggable'; import {Droppable} from './Droppable'; function Example() { const [parent, setParent] = useState(null); const draggable = ( <Draggable id="draggable"> Go ahead, drag me. </Draggable> ); return ( <DndContext onDragEnd={handleDragEnd}> {!parent ? draggable : null} <Droppable id="droppable"> {parent === "droppable" ? draggable : 'Drop here'} </Droppable> </DndContext> ); function handleDragEnd({over}) { setParent(over ? over.id : null); } } ``` `Droppable.jsx` ``` import React from 'react'; import {useDroppable} from '@dnd-kit/core'; export function Droppable(props) { const {isOver, setNodeRef} = useDroppable({ id: props.id, }); const style = { opacity: isOver ? 1 : 0.5, }; return ( <div ref={setNodeRef} style={style}> {props.children} </div> ); } ``` `Draggable.jsx` ``` import React from 'react'; import {useDraggable} from '@dnd-kit/core'; import {CSS} from '@dnd-kit/utilities'; function Draggable(props) { const {attributes, listeners, setNodeRef, transform} = useDraggable({ id: props.id, }); const style = { // Outputs `translate3d(x, y, 0)` transform: CSS.Translate.toString(transform), }; return ( <button ref={setNodeRef} style={style} {...listeners} {...attributes}> {props.children} </button> ); } ``` 我將可拖曳元件放在可放置元件上。  您可以閱讀[文件](https://docs.dndkit.com/)以及滑鼠和指標等[感測器的選項](https://docs.dndkit.com/introduction/installation#core-library)。 它在 GitHub 上擁有 10k+ Stars，並被 GitHub 上 47k+ 開發人員使用。 https://github.com/clauderic/dnd-kit 明星免打擾套件 ⭐️
***NVIDIA***是一家處於*人工智慧革命🫀 的*公司，最近透過其最新課程讓學習人工智慧變得輕而易舉。 這裡有***五門免費課程***，它們實際上物有所值（相信我，當我這麼說時），它們將幫助您更多地了解該主題並提高您的技能。 😉 PS：他們的網站上一**共有16門免費課程**。我為初學者精選出以下最好的課程。 點擊下面的連結查看它們 - 🔗 https://www.nvidia.com/en-us/training/online/#free-courses  --- 1️⃣ 生成式人工智慧解說 ------------- 你將學到什麼： - 生成式人工智慧並解釋生成式人工智慧的工作原理。 - 各種生成式人工智慧應用。 - 生成人工智慧的挑戰與機遇 🔗 https://courses.nvidia.com/courses/course-v1:DLI+S-FX-07+V1/  --- 2️⃣ 10 分鐘打造大腦 ------------- 你將學到什麼： - 探索神經網路如何使用資料進行學習 - 了解神經元背後的數學和科學 🔗 https://courses.nvidia.com/courses/course-v1:DLI+T-FX-01+V1/  --- 3️⃣ 透過檢索增強生成來增強您的 LLM： ---------------------- 你將學到什麼： - 檢索增強生成基礎知識 - RAG檢索過程 - NVIDIA AI 基礎和 RAG 模型元件 🔗 https://courses.nvidia.com/courses/course-v1:NVIDIA+S-FX-16+v1/  --- 4️⃣ 用 LLM 一起建構 RAG 代理： ---------------------- 你將學到什麼： - LLM 和向量資料庫的可擴展部署策略。 - 用於對話管理和文件檢索的現代 LangChain 範例。 - 採用先進的模型和步驟進行生產。 🔗 https://courses.nvidia.com/courses/course-v1:DLI+S-FX-15+V1/  --- 5️⃣ 透過零程式碼變更加速資料科學工作流程： ----------------------- 你將學到什麼： - 了解統一 CPU 和 GPU 工作流程的優勢 - GPU 加速資料處理和機器學習，無需更改程式碼 - 體驗更快的處理時間 🔗 https://courses.nvidia.com/courses/course-v1:DLI+T-DS-03+V1/  --- 🙌 總結 ---- 總之，NVIDIA 透過提供 16 門免費課程改變了 AI 教育。 這些精心挑選的資源，包括產生人工智慧和神經網路等主題，提供了寶貴的知識。 我個人正在利用這些課程，我鼓勵您也這樣做。 好啦，今天就到此為止！ 與我聯絡@ [Linktree](https://linktr.ee/arjuncodess) 。 快樂編碼！ 🚀 感謝24220！ 🤗 --- 原文出處：https://dev.to/arjuncodess/nvidia-just-launched-free-courses-in-ai-47ef
我已經看過相當多的 React 教程，但是每當他們談論使用 React-router 進行導航時，他們都只展示使用 Link 元件的方式。一旦有人開始處理他/她自己的專案，他們遇到的第一個問題就是如何以程式設計方式進行路由，這基本上意味著除了點擊 \\ 中包含的內容之外的其他方式進行路由。成分。 這個部落格的主要目的是為那些來這裡尋找這個問題答案的人提供一個避難所。 --- 1.\\成分 ------ 我們可以使用 \\ 進行重定向只需傳遞我們想要重定向到的路由並渲染元件即可。它已經載入到react-router-dom 庫中。 ``` import { Redirect } from "react-router-dom"; ``` 使用此方法最簡單的方法是在元件狀態內維護重定向屬性。 ``` state = { redirect: null }; render() { if (this.state.redirect) { return <Redirect to={this.state.redirect} /> } return( // Your Code goes here ) } ``` 每當你想要重定向到另一個路徑時，你可以簡單地改變狀態來重新渲染元件，從而渲染\\成分。 ``` this.setState({ redirect: "/someRoute" }); ``` **筆記** 這是除 \\ 之外的建議導航方式。方法。 在帖子的最後詳細討論了。 這種方法的缺點是，當我們想要直接從 redux 操作重新導向時，我們無法這樣做。 --- 2.使用歷史鉤子 -------- 從 5.1.2 版本開始，react-router 附帶了一些新的鉤子，可以幫助我們存取路由器的狀態。 現在，我們只需要討論 useHistory 鉤子。 ``` import { useHistory } from "react-router-dom"; function App() { let history = useHistory(); } ``` 之後，我們可以使用 .push() 方法重定向到我們想要的任何路由。 ``` history.push('/someRoute') ``` --- 3.歷史道具 ------ 作為 \\ 的直接子級的每個元件元件接收歷史物件作為道具。這是保存 React Router 會話歷史記錄的同一個歷史記錄（庫）。因此，我們可以使用它的屬性來導航到所需的路徑。 ``` this.props.history.push("/first"); ``` 我們在這裡遇到的一個常見問題是，在不是 \\ 的直接子級的元件中元件中，不存在歷史道具。使用 withRouter 函數可以輕鬆解決這個問題。 ### 3.1.帶路由器 withRouter 是react-router-dom庫中提供的一個函數，它可以幫助我們存取不是 \\ 直接子級的元件中的歷史記錄道具成分。 使用 Router 導入 ``` import { withRouter } from "react-router-dom"; ``` 現在為了在我們的元件中取得歷史屬性，我們需要在匯出它時用 withRouter 包裝我們的元件。 ``` export default withRouter(yourComponent); ``` 我們現在可以像上面一樣存取歷史記錄來完成我們所需的導航。 --- 4.建立歷史 ------ 我們上面學到的方法可以涵蓋我們在建立 React 應用程式時遇到的大多數情況，那麼為什麼要使用第四種方法呢？ 每次我們需要從 redux 操作重定向時，我們總是必須將歷史記錄傳遞給該操作，從而不必要地增加參數數量。因此，可以使用此方法來獲得更簡潔的程式碼。 在此方法中，我們建立自訂歷史記錄實例，可以將其匯入其他文件中以進行重定向。 ``` // Inside /utils/history.js import createHistory from "history/createBrowserHistory"; export default createHistory(); ``` 作為 \\使用它自己的歷史記錄並且不接受任何外部歷史記錄屬性，我們必須使用 \\而不是它。 ``` import { Router } from "react-router-dom"; import history from "./utils/history"; function App(){ return( <Router history={history}> // Your Routes go here <Router> ) } ``` 之後，我們可以將此歷史實例匯入到我們想要重新導向的任何檔案中。 ``` import history from "./utils/history"; history.push("/somePath"); ``` --- 筆記 -- 從本質上講，React 是一種建立 UI 的聲明式方法。 聲明式方法是一種表達計算邏輯而不描述其控制流或不描述幕後實際發生的情況的方法。 由於這個原因，推薦的導航方式除\\正在使用\\成分。 使用這裡提到的其他方法並沒有什麼壞處，只是它們並不完全符合 React 的願景。 --- 儲存庫 --- 我的 Github 個人資料上提供了上述方法的完整工作實作。如果有人想看到這些方法在專案中實際執行，請隨意探索。 {% github https://github.com/projectescape/blogs-reference %} --- --- 原文出處：https://dev.to/projectescape/programmatic-navigation-in-react-3p1l
我整理了一系列一流的電子書來增強您的網頁開發學習之旅，這肯定會讓您受益匪淺；即使您是一位經驗豐富的開發人員，仍然有一些您不知道的東西。 那麼，事不宜遲，讓我們開始吧！ --- 🤔 小知識 ----- **世界上第一個網站**由*Tim Berners-Lee*在*1991 年*建立，致力於萬維網計畫本身。 它提供了有關網路基本功能以及如何建立網頁的資訊。 有趣的是，該網站的 URL 是**“http://info.cern.ch”** ，並且作為網路早期的*歷史文物*仍然存在。 --- 1️⃣ CSS 的魔力 ----------- 本電子書中的內容適合所有級別的開發人員。透過範例程式碼片段了解佈局、盒子模型、定位等。 → https://adamschwartz.co/magic-of-css/  --- 2️⃣ DOM啟示 --------- 《DOM Enlightenment》是一本免費的線上書籍，深入探討 DOM，提供對其工作原理的清晰詳細的理解。 → http://domenlightenment.com  --- 3️⃣ 雄辯的 JavaScript ------------------ JavaScript 程式設計簡介重點在於撰寫真實世界的網站。 → https://eloquentjavascript.net  --- 4️⃣ Pro Git 書籍 -------------- 透過資訊圖表了解有關 Git 的一切。 → https://git-scm.com/book/en/v2  --- 5️⃣ SQLZap ---------- 透過 16 個結構良好的課程和一個程式碼遊樂場來學習完整的 SQL。 → https://sqlzap.com  --- 6️⃣ 反應表達 -------- React Express 是一本免費的電子書/指南，涵蓋了 React 的基礎知識，包括元件、狀態、道具等。 → https://react.express  --- 🙌 總結 ---- 最後問一個問題：**您覺得這個清單有幫助嗎？** 請在下面的評論中告訴我。 如果你喜歡這篇文章，你會喜歡這個： https://dev.to/arjuncodess/7-chrome-extensions-for-web-developers-54ib 另外，*分享*您最喜歡的網頁開發資源來幫助這裡的初學者！ 與我聯絡@ [Linktree](https://linktr.ee/arjuncodess/) 。 快樂編碼！ 🚀 感謝23592！ 🤗 --- 原文出處：https://dev.to/arjuncodess/6-free-ebooks-to-learn-web-development-e01
Sass 已成為本地安裝的強大預處理器，十多年來構成了我的專案的支柱。它使我能夠有效地組織可擴展且穩定的 CSS 包。即使在今天，我仍然認為 Sass 是一個非常強大的工具。然而，當我們步入 2024 年時，不可否認 CSS 已經經歷了快速發展。曾經是 Sass 獨有的功能現在已原生整合到 CSS 中，包括變數和最新亮點：CSS 嵌套。 變數 -- 長期以來，定義變數一直被視為 SCSS 的獨特優勢，它允許集中管理許多屬性，這是 CSS 長期以來非常缺少的功能。然而如今，變數也可以以類似 Sass 的方式在 CSS 中定義。然而，一個顯著的差異是，Sass 變數只存在於預處理器上下文中，而 CSS 變數可以在瀏覽器中使用，甚至可以透過 JavaScript 動態覆寫。 ``` :root { --button-padding: 10px 20px; --button-bg-color: #007bff; --button-text-color: #ffffff; --button-border-radius: 8px; } .button { padding: var(--button-padding); background-color: var(--button-bg-color); color: var(--button-text-color); border-radius: var(--button-border-radius); border: none; cursor: pointer; transition: background-color 0.3s; } ``` CSS 嵌套 ------ 在另一個元素中定義一個元素的樣式規則的能力大大簡化了 CSS 的編寫。嵌套允許將這些選擇器分組到父選擇器中，而不是對從屬元素或偽選擇器重複使用相同的選擇器。這種技術可以產生清晰的、層次結構的、因而更有效率的程式碼庫。 隨著[瀏覽器對 CSS 巢狀的支援率](https://caniuse.com/?search=css%20nesting)超過 84%，對巢狀選擇器的支援率超過 86%，這種技術變得越來越容易使用。 ``` .blog { position: relative; padding: 1rem; background: var(--neutral-100); .blog-item { border: 1px solid var(--neutral-200); & span { font-size: 1rem; } } } ``` :is 偽類 ------ `:is`偽類透過接受選擇器清單並對與這些選擇器中的任何一個匹配的所有元素進行樣式設置，徹底改變了選擇器概念。這大大方便了 DOM 中元素的選擇和樣式設定。 ``` :is(selector1, selector2, selector3) { /* styles */ } ``` 您可以使用 :is() 來提高可讀性，同時避免使用長選擇器，而不是使用長選擇器清單。 : has() 偽類 ---------- CSS 偽類`:has()`提供了一種基於其後代選擇元素的強大方法，類似於條件樣式的應用。 ``` .hero:has(.hero-button) { background-color: var(--accent-50); } ``` 容器查詢 ---- 容器查詢被認為是自 CSS3 以來網頁設計最重要的創新。他們透過允許元素根據容器的大小進行調整來擴展響應式設計的概念。該技術使元素的設計能夠根據上下文動態變化，從而實現更靈活和更具適應性的設計。 ``` .component { --theme: dark; container-name: fancy; } @container fancy style(--theme: dark) { .fancy { /* dark styles. */ } } ``` ``` @container (min-width: 720px) { .headline { font-size: 2em; } } ``` 如果容器有變數 --theme: dark，請加入以下 CSS。 級聯層 --- 使用級聯層，我們可以透過分配自己的層（layer）來避免類別、ID等的嵌套，以獲得更高的特異性。使用`@layer` at-rule 和分層`@imports` ，我們可以建立自己的級聯層- 從低優先樣式（如重設和預設值），透過主題、框架和設計系統，到最高優先樣式（如元件、實用程式） ，並覆蓋。級聯層提供更多控制。 ``` @layer utilities { .button { padding: 0.5rem; } .button--lg { padding: 0.8rem; } } ``` SASS 的未來 -------- 這是否意味著 Sass 已經過時了？一點也不。 Mixins和函數，例如像素到rem的轉換，仍然是Sass不可替代的優勢。儘管如此，我還是決定在我的大部分專案中放棄 Sass。相反，我在 Sublime 編輯器中使用預先定義的程式碼區塊和套件，這顯著改善了我的工作流程。 再見sass？ ----- 我堅信，到 2024 年，Sass 的好處，包括安裝、使用和編譯問題，將不再證明其使用的合理性。現代 CSS 的可擴展性和用戶友好性使得無需額外工具即可完成。 我的 Themex 專案展示了新 CSS 功能的組合有多強大：https://app.themexproject.com 隨著 CSS 的進步，我期待直接、直接地實施小型和大型專案。 **再見sass，謝謝你！**  --- 原文出處：https://dev.to/karsten_biedermann/goodbye-sass-welcome-back-native-css-cf
長話短說 ---- 本文列出了 2024 年我作為開發人員在日常生活中最常使用的 4 個工具。✅ 這些工具旨在提高您的編輯技能、終端導航、筆記以及在應用程式容器化之外使用 Docker。另外，最後我還幫大家準備了一個小驚喜。 😉 > 如果您沒有使用本文中至少提到的 1-2 個工具，那麼我告訴您，朋友，您就錯過了。絕對至少嘗試其中的一些。以後你會感謝我的。 😎  --- 1. [Tmux——](https://github.com/tmux/tmux/wiki)**終端復用器** ------------------------------------------------------- > ℹ️我認為沒有任何理由不使用Tmux。只要您必須在航站樓工作，相信我，這會讓您的生活變得更加輕鬆。  每次需要在終端機中處理其他事情時，您是否都會開啟新選項卡，並且目前的終端視窗已被佔用？相信我，這件事會讓你大吃一驚。 🤯 您可以將選項卡/視窗分割為多個窗格。此外，還有一個會話的概念，它允許您打開多個窗口，完全獨立於其他會話，從而可以輕鬆地同時處理多個專案。 看到圖片了嗎？我的筆記在另一個視窗中，點檔案配置在另一個視窗中。它們之間的切換非常簡單和方便。 **劇透警告**：在終端機中工作時，您將永遠不想使用滑鼠。 😉 > 我開始使用 Tmux 的時間並不長，但現在它已經成為我離不開的主要核心實用程式。 🔥 --- 2. [Neovim](https://neovim.io/) **- 首選程式碼編輯器** --------------------------------------------- > ❓ 你喜歡在航站樓工作嗎？如果是，那麼您可能不知道您需要這個程式碼編輯器。試一試。  我是 VSCode 的忠實粉絲，現在仍然如此。幾個月前我對 Vim 和 Neovim 一無所知。但現在，請相信我，在這幾個月裡，我一次都沒有碰過 VSCode。 🫠 也許您和我一樣是 VSCode 的忠實粉絲，但請嘗試將自己切換到 Vim 動作。這是您可以為自己做的提高生產力的最佳事情。一旦您將編輯器轉移到終端，您將慢慢開始生活在終端本身。 儘管終端中的編輯器可能不適合每個人的口味，但至少嘗試使用一次，看看它是否是您的選擇。 --- 3. [Obsidian](https://obsidian.md) **- 很棒的筆記** ---------------------------------------------- > 🧠 我的第二個大腦，如果你現在開始使用它，它也會是你的。  我知道您可能正在使用一些很酷的筆記工具，例如 Notion、Evernote 等。但是，您還記得上次打開這些筆記應用程式來實際參考您幾個月前寫的東西是什麼時候嗎？ 🤔 看，你們大多數人沒有答案。所以卸載這些，現在就做！  這正是 Obsidian 解決的問題。將其視為您的**第二個大腦**。這個工具非常好，我可以在虛擬桌面上一直打開 GUI，或者在 Tmux 視窗中打開它，這樣每當我編寫程式碼並需要引用我的筆記時，我都可以使用**obsidian.nvim**輕鬆完成此操作來自我的編輯。 🔥 在[obsidian.nvim](https://github.com/epwalsh/obsidian.nvim)上了解更多。 > 我也從 Notion 切換到 Obsidian。相信我，這是我做出的最好的轉變之一，我將終生珍惜這一轉變。別擔心，您可以輕鬆地將現有筆記從筆記工具匯入到 Obsidian。 --- 4. [Docker](https://docker.com) **- 超越容器化** ------------------------------------------- > 🐳 它不僅僅用於容器化您的應用程式嗎？如果沒有，我想是時候了。  大多數情況下，當我們想到 Docker 時，我們只是將其視為容器化應用程式的一種方式。我們知道使用 Docker 的方法有很多，但我們只是忽略它們。但是，更像是您的日常司機，而不僅僅是為了一個目的。 最近，我想嘗試使用 Arch，所以我可以說，「**我使用 Arch，順便說一句！** 」 😉 但我不想從頭開始安裝一個全新的 Linux 發行版，只是為了看看我是否不想繼續使用 Arch。為此，我只是用 Arch 映像啟動了一個 Docker 容器並開始使用它。如果我將來不喜歡它，我會簡單地刪除該死的圖像及其容器。就這樣，我恢復正常了。🔥 > ⁉️**為什麼不針對該用例使用虛擬機器？** 在虛擬機器中，你必須分配所有資源，說實話，這會感覺更臃腫。但透過這種方法，您將擁有一個完整、完全流暢的作業系統，而無需從頭開始手動執行任何操作。 另外，最近我必須處理透過 SSH 連接到遠端伺服器的問題，而我的基於金鑰的身份驗證不起作用。為了除錯問題是否出在我這邊，我只需使用 Alpine 啟動一個 Docker 容器，在那裡設定我的 SSH 金鑰，然後它就成功連接了。主要問題是`ssh-daemon`錯誤配置，由於`/etc/ssh/sshd_config`檔案中`PubKeyAuthentication no`因此伺服器本身不接受基於金鑰的身份驗證。 Docker 太漂亮了😻，試著經常使用它。 --- 只為您帶來驚喜！ 😉 ---------- Microsoft 提供有關雲端、DevOps 和開發的免費認證課程！ ✅ 無需付款、無需訂閱、無需註冊。剛開始學習！ 🚀 > ⚠️**注意**：您將被重定向到 Microsoft 官方網站。 https://learn.microsoft.com/training?wt.mc\_id=studentamb\_366508 感謝您的閱讀！我希望你至少嘗試其中的一些。 🫡 https://dev.to/shricodev --- 原文出處：https://dev.to/shricodev/4-core-developer-tools-i-use-in-my-daily-life-2524
長話短說 ---- [Devin](https://www.youtube.com/watch?v=fjHtjT7GO1c) ，這位自稱「第一個」完全自主的軟體工程師剛剛出現，並引起了很多關注。 它尚未公開，但透過幾個開源工具，您現在可以獲得類似的 Web 開發體驗，而且成本可能只是一小部分。 {% 嵌入 https://www.youtube.com/watch?v=DXunbNBpgZg %} 在其 CLI 中使用[Wasp 的 AI 功能](https://wasp.sh)，您可以透過簡單的提示產生全端 Web 應用程式程式碼庫。然後，在[Aider](https://aider.chat)的幫助下透過加入功能和除錯來迭代它。 在這兩個人工智慧代理的幫助下，您可以增強全端應用程式的開發，而無需編寫一行程式碼（如果您不想）。 請繼續閱讀有關如何開始的詳細說明！ ---  順便說一句，Wasp 是建立全端 Web 應用程式的最快方法，而且它也恰好內建了 AI 生成 - 而且它是免費和開源的！ 您可以透過[在 GitHub 上為我們的儲存庫加註星標](https://www.github.com/wasp-lang/wasp)來支持我們。它幫助我們建立更多東西並創造更多像這樣很酷的內容🙏  {% cta https://www.github.com/wasp-lang/wasp %} 連 Ron 也會在 GitHub 上為 Wasp 加註星標 🤩 {% endcta %} --- 德文到底是誰？ ------- 您可能已經看到和聽過圍繞 Devin 的炒作，他自稱是「第一個」完全自主的軟體工程師。 如果沒有，請觀看下面的宣傳影片： {% 嵌入 https://www.youtube.com/watch?v=fjHtjT7GO1c %} 儘管 Devin 絕對不是同類中的第一個人工智慧編碼助手，但它的推出仍然引起了許多人的注意。簡而言之，這就是 Devin 所做的： - 接受提示 - 制定逐步計劃 - 在具有程式碼編輯器、終端、瀏覽器和聊天介面的時尚 UI 中展示其工作 - 能夠迭代現有的程式碼庫 儘管有其他類似的人工智慧編碼代理，其中一些像 GPT-Pilot 是開源的，但 Devin 使用內建所有必要工具的流暢 UI 使其脫穎而出。此外，它能夠迭代現有程式碼庫，這使其與大多數類似工具（Aider 除外）區分開來。 那麼，德文真的那麼令人印象深刻嗎？ 是和不是。正如著名 AI YouTuber [Matthew Berman](https://www.youtube.com/@matthew_berman)在他關於 Devin 的影片中指出的那樣，Devin 最令人印象深刻的事情可能是他們的發布的成功。  但伯曼也指出了一些與他們的行銷主張不一致的地方： 1. Devin 絕對不是同類中的第一個。 [Mage](https://useMage.ai) 、 [Aider](https://aider.chat)和[GPT-Pilot](https://github.com/Pythagora-io/gpt-pilot)等類似工具已經存在。 2. 他們對效能基準的比較（如上圖所示）並不能真正被認真對待，因為Devin 是一個可以迭代和執行多個任務的代理，而它所比較的 LLM，如GPT-4，只是「零樣本」 （即他們嘗試一次才能得到正確的答案）。為了公平比較，Devin 應該與其他代理人進行比較，例如 GPT-Pilot、MetaGPT、Mage 等。 另外，Devin 實際上是建立在 OpenAI 的 GPT-4 API 之上的。所以，是的，他們在其之上建置的一些工具非常令人印象深刻，並且將加快編碼工作流程，但底層模型與像您和我這樣的開發人員可以存取的東西完全相同。 這意味著，透過結合幾個可用的開源工具，您現在可以獲得與 Devin 非常相似的結果，而無需等待早期預覽存取，並且成本可能只是其一小部分。 現在就讓我們來看看吧！ Wasp AI x Aider — 全端 Web 應用程式的開源「Devin」替代品 ------------------------------------------ 幾個月前，我們發布了[Mage](https://usemage.ai) （ **Magic** **App** **Generator** ），這是一個實驗平台，用於透過簡單的提示生成全端 Web 應用程式。自發布以來，Mage 已被用來產生超過 40k 個應用程式！  Mage 使用[Wasp（一個全端 React、Node 和 Prisma 框架）](https://wasp.sh)來產生比大多數編碼助理更好的全端應用程式。到底是為什麼呢？這是因為 Wasp 使用聲明性設定檔來定義應用程式的功能。 這個設定檔為Wasp 的編譯器提供了將客戶端和伺服器程式碼「黏合」在一起所需的指令，並處理一堆樣板程式碼，因此您和AI 都不必處理諸如身份驗證、路由、端點、伺服器之類的編碼配置等 ``` // wasp config file app TodoApp { wasp: { version: "^0.13.0" }, auth: { userEntity: User, methods: { usernameAndPassword: {} }, } } entity User {=psl id Int @id @default(autoincrement()) tasks Task[] psl=} // rest of the config file... ``` 查看上面的範例，了解如何使用 Wasp 編寫全端 Auth。很容易，對吧？現在想像一下，對於 Mage 或任何其他人工智慧編碼助理來說，編寫 Wasp 程式碼是多麼容易。 另外，由於 Wasp 設定檔的結構已經類似於一組指令，因此它允許 Mage 以與 Devin 類似的方式建立計劃。 這就是 Mage 真正的閃光點，它可以快速且廉價地建立功能齊全的全端 Web 應用程式原型。 Mage 的唯一缺點是它在終端中不可用，而且您無法進一步迭代生成的程式碼庫。 現在情況改變了。隨著新的 Wasp 更新，Mage 的所有功能都被打包到 CLI 中。您只需[安裝 Wasp](https://wasp-lang.dev/docs/quick-start)並執行`wasp new` ，您就可以透過命令列提示產生一個新的全端應用程式！  之後，您可以使用[Aider](https://aider.chat) ，這是一個命令列工具，可讓您與 GPT-3.5/GPT-4 進行配對編程，以迭代生成的程式碼庫並建立一系列很酷的新功能。 還不相信嗎？觀看這個很酷的宣傳影片，向您展示這一切是如何運作的： {% 嵌入 https://www.youtube.com/watch?v=DXunbNBpgZg %} 如果這看起來很酷，並且您想在這些工具的幫助下開始建立自己的全端 Web 應用程式，請按照以下說明進行操作！ CLI 中的 Wasp AI -------------- [安裝 Wasp](https://wasp-lang.dev/docs/quick-start)後，前往終端並執行`wasp new` 這樣做將為您提供一個可供選擇的全端入門模板清單。你會想要： - 從選項清單中選擇`[5] ai-generated` - 輸入您的應用程式的描述 - 選擇您想要用於這一代的 GPT 模型和創造力水平  使用這些生成設定可能會產生不同的結果，因此，如果生成的應用程式不是您第一次尋找的內容，請調整它們並重試。 並且不必太擔心透過 OpenAI API 產生的成本。由於 Wasp 利用 DSL 並為我們管理大量樣板文件，因此它顯著減少了 GPT 必須產生的程式碼量。 例如，當我們混合使用 GPT4 和 GPT3.5（預設選項）時，一個具有 Wasp AI 的應用程式通常消耗大約 25k 到 60k 代幣，每個應用程式大約消耗**0.1 到 0.2 美元**！如果我們只使用 GPT4 來執行它，那麼成本是 10 倍，這意味著它將花費大約**1 到 2 美元**。這仍然比大多數其他 AI 編碼代理便宜得多，後者每代的成本通常約為 15-40 美元。 🤯 哦，「gpt-4-1106-preview」指的是 OpenAI 的新 GPT-4-turbo 模型。因此，它比完全使用 GPT-4 更快、更便宜。 Wasp AI（和[Mage](https://usemage.ai) ）使用 GPT-4 進行規劃 + GPT-3.5-turbo 進行程式碼生成的組合，我們發現它對於簡單的應用程式來說效果出奇的好。如果您的目標是複雜的應用程式，我們建議完全使用 GPT-4，因為它能夠更好地處理更高的複雜性。請注意，GPT-4 將需要更長的時間。 繼續與 AI 迭代…der ------------- 在 Mage 的初始版本中，我們收到了很多問題，詢問是否有“除錯助手”，或者在初始輸出後繼續使用 AI 生成更多功能的方法。 雖然 Wasp AI 無法做到這一點，但我們開始探索其他具有除錯功能的 AI 編碼助手，最終我們非常喜歡[Aider 的](https://aider.chat/)工作流程和效能。另外，除了尚未向公眾發布的 Devin 之外，Aider 是目前唯一允許您迭代現有程式碼庫的 AI 編碼工具。 **所以，這使得 Wasp AI + Aider 成為完美的組合！** ---  順便說一句，Wasp 是免費且開源的，所以如果您喜歡我們正在做的事情，請考慮[在 Github 上給我們一顆星](https://github.com/wasp-lang/wasp)！  {% cta https://www.github.com/wasp-lang/wasp %} ⭐️ 丟黃蜂一顆星星 🙏 {% endcta %} --- 使用 Wasp AI 產生全端應用程式後，您可以透過 Aider 使用自然語言來產生新功能或偵錯目前程式碼中的問題。 就是這樣： 1. 安裝[幫助](https://aider.chat)  2. 在 Wasp 專案目錄中的命令列中執行`aider`  3. `/add`您希望 Aider 使用的文件 4. 告訴 Aider 你想要它做什麼，例如在表單中加入“小睡次數”字段  5. 然後，Aider 將規劃一個行動方案，並將這些變更作為 git 提交應用程式。如果您不喜歡更改，請執行`/undo`撤銷提交  6. 如果您在嘗試使用`wasp start`執行程式碼時遇到錯誤，請將錯誤複製並貼上到聊天中，讓 Aider 為您解決。確保您已將錯誤引用的文件新增至聊天（請參閱步驟 3）！  7. 如果您在使用 Aider 時需要更多幫助，請查看他們的[網站](https://aider.chat)或在 Aider 中執行`/help`以獲取命令列表 未來就在這裡 ------ 透過[Wasp AI](https://wasp.sh) ，我們最終將 Mage 的 AI 輔助全端應用腳手架能力加入到 Wasp 的 CLI 中。利用 GPT-4 和其他 OpenAI 模型的強大功能，用它來啟動您的下一個全端應用程式創意。 如果您想在 AI 幫助下繼續產生功能或直接從終端進行偵錯，請使用我們上面概述的 Aider 來保持流程繼續進行。 編碼的未來確實就在這裡。嘗試一下，讓我們知道您的想法！ --- 原文出處：https://dev.to/wasp/a-100-ai-driven-workflow-thats-probably-as-good-as-devin-4c67
--- 標題：加入我們的第一個社群挑戰：前端挑戰 發表：真實 標籤： frontendchallenge, devchallenge, css, javascript 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfwaylumsyrf5t3upl4v.jpg --- 我們很高興推出我們的**第一個官方[開發挑戰賽](https://dev.to/devteam/introducing-dev-challenges-1mk9)**：前端挑戰賽！ 這項挑戰將持續到 3 月 31 日，這將是一個展示您的創造力、建立您的個人資料、贏得徽章的機會，總的來說，您將獲得很多樂趣。 對於第一個挑戰，我們有三個提示 -**您可以只參加一個或全部三個**。也歡迎在同一提示下多次提交，但請務必遵循我們的提交指南。 對於本次挑戰，每個提示都會有一名獲勝者。獲獎者將獲得專屬 DEV 榮譽徽章以及[DEV 商店](https://shop.forem.com)贈送的禮物。有效提交的參與者將獲得完成徽章。 繼續閱讀以了解每個提示以及如何參與！ 提示 -- *仔細閱讀這些提示，然後使用模板提交挑戰。* ### CSS 藝術挑戰賽🎨 把你最喜歡的零食變成 CSS 藝術作品，讓我們驚嘆不已。 您提交的內容**不應使用任何 JavaScript** ，並且應在 CSS 中發揮您的創造力，並且看起來應該很美味。您提交的內容將包括標記，可能包括 SVG 等，但主要應該*展示*您的 CSS 技能。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及[官方挑戰頁面](https://dev.to/challenges/frontend)上的常見問題： {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%0A---% 0A%0A\_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20CSS%20Art%3A%20Favorite%20Snack.\_%0A%0A%23%3A%20Favorite%20Snack.\_%0A%0A%23%3pi%202323pi7%20A%3pi%C% 21--%20What%20snack%20are%20you%20highlighting%20today%3F%20--%3E%0A%0A%23%23%20Demo%0A%3C%21--%20Show%20us%20your%20CSS% 20Art!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20post%20（參見%20the%20FAQ%20section%20of%20the%20challenge%20page）%20%2000%20%20you 20an% 20image%20of%20your%20project%20and%20share%20a%20public%20link%20to%20the%20code.%20--%3E%0A%0A%23%23%20Journey%0A%3%21 %20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what%20you%20hope%20proud%20of%2C%20what%20you%20hope%20to% %20etc.% 20--%3E%0A%0A%3C%21--%20團隊%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the%20submission%20and%20ammacredit 20by%20listing%20their% 20DEV%20usernames%20直接%20in%20the%20body%20of%20the%20post。%20--%3E%0A%0A%3C%21--%20我們%20鼓勵%20you% 20to%20考慮%20加入%20a%20許可證%20for%20your%20code.%20--%3E%0A%0A%3C%21--%20Don%27t%20忘記%20to%20add%20a% 20cover%20image%20to%20your%20post%20(if% 20你%20想要）。%20--%3E%0A%0A%0A%3C%21--%20感謝%20%20參與！% 20--%3E %} CSS 藝術挑戰提交模板 {% 結束%} --- ### 讓我的標記更迷人💅 使用 CSS 和 JavaScript 使下面的入門 HTML 標記美觀、互動且有用。 您提交的內容應該比我們提供的 HTML 更有趣、更具互動性，而且也應該可用且易於存取。**您不應該直接編輯提供的 HTML，除非它是在程式中透過 JavaScript 功能進行編輯的。**最終結果應該可以改進現有的預期功能。我們期待風格*和*實質。 ***入門 HTML*** ``` <section id="camp-activities-inquiry"> <h1>Camp Activities Inquiry</h1> <form action="/submit-form" method="POST"> <label for="activity-select">Which camp activities are you most looking forward to?</label> <select id="activity-select" name="activity"> <option value="">--Please choose an option--</option> <option value="hiking">Hiking</option> <option value="canoeing">Canoeing</option> <option value="fishing">Fishing</option> <option value="crafts">Crafts</option> <option value="archery">Archery</option> </select> <label for="food-allergies">Food Allergies (if any)</label> <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea> <label for="additional-info">Additional things the counselor should know</label> <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea> <button type="submit">Submit</button> </form> </section> ``` 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及[官方挑戰頁面](https://dev.to/challenges/frontend)上的常見問題： {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%2C%endchallenge%2C%20devchallenge%2C%20css%2C%20javascript%0A ---%0A%0A\_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20Glam%20Up%20My%20Markup%3A%20Camp%20Activities\_%A% 20I%20Built%0A%3C%21--%20告訴%20us%20什麼%20you%20built%20和%20what%20you%20是%20look%20to%20實現。%20--%3E%0A% 0A%23%23 %20Demo%0A%3C%21--%20Show%20us%20your%20project!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20postthe%20this%20post20( 20FAQ%20section%20from% 20%20挑戰%20頁)%20或%20you%20can%20share%20an%20image%20of%20your%20project%20和%20share%20a%20037% 20碼。%20--%3E%0A% 0A%23%23%20旅程%0A%3C%21--%20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C% 20anything%20you%20are%20specially%20proud%20of%2C% 20what%20you%20hope%20to%20do%20next%2C%20etc.%20--%3E%0A%0A%3C%21%20etc.%20--%3E%0A%0A%3C%21%200ams %3A%20Please%20pick%20one%20member%20to%20publish %20the%20submission%20and%20credit%20teammates%20by%20listing%20他們的%20DEV%20usernames%20直接7% 20post。%20--%3E%0A%0A%3C%21- -%20我們%20鼓勵%20you%20to%20考慮%20為%20您的%20程式碼加入%20a%20許可證%20 .%20--%3E%0A%0A%3C%21--%20不要%27t%20忘記%20to%20add %20a%20cover%20image%20to%20your%20post%20(如果%20you%20想要)。%20--%3E%0A%0A%0A%3C%21--%20感謝%20%20的參與！%20- -%3E%} 使我的標記提交模板更加迷人 {% 結束%} --- ### 一位元組解釋器✍️ 用**256 個或更少的字元**解釋瀏覽器 API 或功能。 選擇任何瀏覽器 API（例如“fetch”、“DOM”、“Geolocation”）並*簡要*解釋它的作用，也許它是如何工作的，以及為什麼有人可能會使用它。您有 256 個字元（比一條推文還少）來表達您的觀點，因此挑戰在於*保持簡單*。 你無法用 256 個字元涵蓋所有細節，但你能挑出最重要的嗎？只要符合請求的精神，我們在這裡對*API 或功能*的定義是靈活的。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及[官方挑戰頁面](https://dev.to/challenges/frontend)上的常見問題： {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20javascript%2C%endchallenge%2C%20devchallenge%2C%20javascript%2C%20webdev%0A ---%0A%0A\_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20One%20Byte%20Explainer%3A%20Browser%20API%20Byte%20Explainer%3A%20Browser%20API%20or% 23%20解釋%0A%3C%21--%20解釋%20a%20瀏覽器%20API%20or%20feature%20in%20256%20字元%20或%20less。%20--%3E%0A%0A %23%23%20附加%20Context%0A%3C%21--%20請%20share%20any%20additional%20context%20you%20think%20the%20judges%20should%20take%20into%20sideity% %20to%20your%20One%20Byte %20解釋者。%20--%3E%0A%0A%3C%21--%20團隊%20Submissions%3A%20請%20pick%20one%20member%20to%20publish% 20the%20submission%20and%20credit%20teammates%20by% 20列出%20他們的%20DEV%20用戶名%20直接%20in%20the%20body%20of%20the%20post。%20--%3E%0A% 0A%3C%21--%20Don%27t%20forget%20to%20add%20a %20cover%20image%20to%20your%20post%20(如果%20you%20想要)。%20--%3E%0A% 0A%0A%3C%21--%20感謝%20%20的參與！%20--% 3E%} 一字節解釋提交模板 {% 結束%} --- 如何參與 ---- 為了參與，您需要使用提示的提交範本發布貼文。 **您可以在[官方挑戰頁面](https://dev.to/challenges/frontend)上找到所有評審標準、官方挑戰規則（即資格）、我們的常見問題解答等，因此請務必仔細閱讀。** {% cta https://dev.to/challenges/frontend %} 官方挑戰頁面 {% 結束%} 重要的日子 ----- - 3 月 20 日：前端挑戰 v24.03.20 開始！ - 3 月 31 日：提交截止時間為太平洋夏令時間晚上 11:59 - 4 月 2 日：公佈得獎者 - 4 月 3 日：敬請期待我們的下一個挑戰 我們很高興看到誰最終能在我們的第一個挑戰中獲得吹噓的權利！問題？請在下面詢問他們。 祝你好運，編碼愉快！ --- 原文出處：https://dev.to/devteam/join-our-first-community-challenge-the-frontend-challenge-8be
在人工智慧和資料科學的新興領域，從概念到成功實施的過程充滿了複雜性。儘管人工智慧對組織具有變革潛力，但對許多人來說，實現其全部好處的途徑仍然難以捉摸。 作為 Taipy 的執行長和聯合創始人，我在***「智慧軟體」專案***迷宮中的經歷闡明了這些技術提供的巨大價值以及阻礙的重大障礙。 採用人工智慧的障礙： ---------- > 潛力與實施之間的鴻溝...... 人工智慧和資料科學有望徹底改變產業，提供以前無法實現的見解和效率。然而，在精通科技的圈子之外，許多組織都在努力成功地駕馭人工智慧領域。從資料湖到人工智慧試點，追求豐厚的投資回報往往會遇到阻礙進展的障礙。 辨識差距： ----- > 克服孤島並提高使用者接受度 我們在 Taipy 的重點不是專注於挑戰，而是聚焦解決方案。我們的分析確定了兩個主要障礙： - 開發團隊的孤立環境 - 最終用戶難以接受。 這些挑戰不僅顯示負責開發人工智慧解決方案的團隊內部存在脫節，而且這些團隊與這些技術的最終用戶之間也存在脫節。  彌合鴻溝：統一方法 --------- 克服這些挑戰的第一步是**培育統一的環境和語言**。專業化導致了資料科學家、開發人員和最終用戶孤立運作的碎片化模式。這種差異使協作變得複雜，並阻礙了人工智慧解決方案與業務流程的無縫整合。 在這種背景下，Python 成為了希望的燈塔。它的多功能性和簡單性使其成為彌合技術鴻溝的理想選擇。然而，開發簡易性和性能之間的權衡仍然是一個絆腳石。許多 Python 庫可用並提供簡單的學習曲線（包括低程式碼）；不幸的是，它們經常遇到性能問題和缺乏客製化的問題。 這就是 Taipy 登場的地方，它將 Python 的簡單性與增強的效能和自訂功能結合起來，從而滿足了對平衡方法的關鍵需求。   增強用戶參與度：Taipy 策略 ---------------- 第二個差距需要確保最終用戶的接受度。人工智慧計畫的成功取決於其與旨在幫助的業務用戶的相關性和可用性。在 Taipy，我們引入了「場景」功能等創新概念，促進與人工智慧模型的交互，並實現對各種結果的動態探索，從而豐富用戶體驗並促進接受度。  Taipy：人工智慧難題的解決方案 ----------------- 我們致力於讓 AI 變得易於使用且具有影響力，這促成了**Taipy Designer**的開發。該工具體現了我們對人工智慧民主化的承諾，使其易於資料分析師使用，並將其無縫整合到業務流程中。 請繼續關注幾週後的發布。如果您喜歡我們的產品，請查看我們的[GitHub](github.com/Avaiga/taipy)並為其加註星標。 結論 -- 當我們展望人工智慧潛力得到充分發揮的未來時，很明顯，像 Taipy 這樣的工具將在彌合技術能力和實際應用之間的差距方面發揮關鍵作用。透過解決孤立的開發環境和使用者接受度的關鍵挑戰，我們為人工智慧驅動創新的新時代鋪平了道路。 歡迎加入 Taipy，我們不僅開發技術，還開發技術。我們正在打造智慧軟體的未來。 --- 原文出處：https://dev.to/taipy/simplifying-ai-integration-insights-from-taipys-journey-31i8
**透過研究和貢獻這些 Next.js 專案，了解大型 Web 應用程式的結構。 🚀** 參與現實世界的專案是開發者成長的關鍵策略。 ✅ 在本文中，我們編譯了一系列綜合性的 Next.js 專案供您研究和分析。 🚀 透過沉浸在這些擴充功能的 Web 應用程式的結構和程式碼庫中，您將收集有關最佳實踐、專案組織和高級方法的寶貴經驗。 無論您是初學者並尋求基本理解，還是經驗豐富的開發人員旨在提高您的能力，這些專案都提供了不可或缺的資源來增強您的專業知識並充滿信心地應對複雜的任務。 💯 --- Supabase⭐ -----  **[Supabase](https://github.com/supabase/supabase)**是 Firebase 的開源替代品，提供全面的 PostgreSQL 資料庫、即時功能、簡化的身份驗證、流暢的儲存整合等等。該平台使開發人員能夠製作可擴展且強化的 Web 應用程式，同時確保與流行工具和擴展的兼容性。 除了核心產品外，Supabase 還擁有一系列補充功能，例如嵌入向量（地理空間資料的理想選擇）、即時訂閱、邊緣功能（用於無伺服器運算）、遷移幫助、專案管理實用程式、命令列介面( CLI)，以及與各種其他服務的無縫整合。 --- Cal.com ⭐ ---------  **[Cal.com](https://github.com/calcom/cal.com)**是一個開源調度解決方案，為使用者提供對其資料、工作流程和美學偏好的完全自主權。作為 Calendly 的進化繼承者，它提供自託管選項和透過 Cal.com, Inc. 進行託管，可適應使用者的網域。 Cal.com 的與眾不同之處在於它與眾多服務的無縫集成，包括 Google Calendar、Zoom、Daily.co、HubSpot 等。此外，它還有助於自訂、白標籤和 API 可存取性。其內建的應用程式商店使用戶能夠根據自己的需求輕鬆合併或刪除整合。 --- Infisical ⭐ ----  **[Infisical](https://github.com/Infisical/infisical)**是一種開源秘密管理解決方案，可讓團隊整合其敏感資料，例如 API 金鑰、資料庫憑證和配置。其一系列功能包括用戶友好的儀表板、客戶端 SDK、CLI、API、本機整合、Kubernetes 操作員、代理、自託管功能、秘密版本控制、基於角色的存取控制、秘密掃描等。這種多樣化的功能集促進了 Next.js 生態系統內的廣泛學習和實驗。 --- Dub.co ⭐ -------  **[Dub.co](https://github.com/dubinc/dub)**是一款專為當代行銷團隊設計的尖端連結管理工具，使他們能夠產生、分發和監控短連結。其突出的功能之一是能夠在您的伺服器上自行託管 Dub.co，從而更好地控制資料和設計。這提供了一個探索 Next.js 的令人興奮的機會。 --- Twenty⭐ ---  在考慮替代方案時， **[Twenty](https://github.com/twentyhq/twenty)**因其提供完全控制、自由以及用戶貢獻、自我託管和分叉的機會而脫穎而出，從而擺脫了供應商鎖定，並使用戶能夠影響 CRM 的開放未來。此外，它非常重視來自不同來源的資料可存取性和視覺化，而無需進行改造，同時擁有受 Notion 啟發的直覺設計介面。 --- Inbox Zero⭐ ------  **[Inbox Zero](https://github.com/elie222/inbox-zero)**作為一款開源電子郵件應用程式脫穎而出，旨在透過 AI 支援快速引導用戶進入 Inbox Zero。其顯著特點在於利用人工智慧幫助用戶處理電子郵件訂閱、自動回覆、防止不需要的電子郵件以及分析收件匣內容。 此外，人工智慧使用戶能夠使用簡單的語言命令與應用程式進行通信，以根據預先定義的標準執行回覆、轉發或存檔電子郵件等操作。此外，使用者可以選擇進入規劃模式，在實施之前查看人工智慧產生的建議。 --- Rally⭐ ----  **[Rally](https://github.com/lukevella/rallly)**是一款網路應用程式，可根據參與者的空閒情況產生民意調查，從而簡化了小組會議的安排。用戶無需註冊即可輕鬆加入投票；他們只需輸入姓名和電子郵件即可。這種簡化的方法為 Rally 提供了許多優於替代方案的優勢，例如簡單性、隱私性和自訂選項。 --- Formbricks ⭐ -----  **[Formbricks](https://github.com/formbricks/formbricks)**是一個開源調查平台，使用戶能夠從多個管道收集回饋並與各種工具無縫整合。透過其直覺的無程式碼編輯器，使用者可以輕鬆地進行調查，精確定位特定的使用者人口統計資料，與團隊成員協作，並利用 Formbricks Insight 平台進行資料分析或開發自訂分析解決方案。 --- Civita⭐ ---  **[Civita](https://github.com/civitai/civitai)**作為一個開源中心，使個人能夠交流、合作，並從彼此的精細擴散模型中收集見解以進行人工智慧客製化。透過該平台，使用者可以參與協作，對其他成員的模型提供評論和回饋，從而培養共享學習和合作的文化。 --- Plane⭐ ---  **[Plane](https://github.com/makeplane/plane)**是一個可免費存取的專案管理解決方案，旨在簡化問題、史詩和產品路線圖的追蹤。它被全球眾多公司使用，擁有用戶友好的介面、強大的查詢功能、可自訂的工作流程選項，以及與 GitHub、Slack 和 Figma 等領先平台的無縫整合。 --- Daily.dev ⭐ ------  最後， **[Daily.dev](https://github.com/dailydotdev/apps)**脫穎而出，成為為尋求提陞技能、促進協作和集體發展的開發人員量身定制的首要平台。其功能包括個人化提要自訂、文章書籤、跨裝置同步以及整合到充滿活力的開發者社群。 其 Web 應用程式由 Next.js 的尖端增量靜態生成功能提供支持，可確保快速的頁面交付，增強用戶探索。利用這項技術，Daily.dev 從領先的技術出版物中精選了不同主題的最新節目更新，幫助用戶及時了解行業趨勢、獲得新的技能並挖掘技術領域令人興奮的前景。 --- 結論🔻 --- 深入研究各種廣泛的 Next.js 專案，為渴望增強理解力和提高能力的個人打造一個豐富的學習平台。 透過剖析和深入研究這些有形的應用程式，我們收集了有關複雜方法、專案框架和最佳策略的寶貴知識。 無論是渴望鞏固基礎知識還是完善現有專業知識，沉浸在這些事業中都可以提供一條實用的途徑來提高熟練程度並有把握地應對複雜的障礙。 把握機會在 Next.js 領域深入研究、發現並踏上永久學習和進步的旅程！ --- ***快樂編碼！*** 🔥 **[領英](https://www.linkedin.com/in/dev-alisamir)** **[X（推特）](https://twitter.com/dev_alisamir)** **[電報](https://t.me/swe_alisamir)** **[Youtube](https://www.youtube.com/@DevGuideAcademy)** **[不和諧](https://discord.gg/s37uutmxT2)** **[Facebook](https://www.facebook.com/alisamir.dev)** **[Instagram](https://www.instagram.com/alisamir.dev)** --- 原文出處：https://dev.to/alisamirali/top-open-source-nextjs-projects-for-meaningful-contributions-5hn4
經過數月的開發和測試，我們很高興地宣布 AnalogJS 1.0 版本發布！ `1.0`版本包含許多功能，可協助開發人員使用 Angular 更快地交付網站和應用程式。 此版本標誌著 Analog 的第一個主要版本，為開發人員使用 Analog 進行建置提供了更穩定的起點。我們將繼續從開發人員那裡獲得回饋，幫助我們繼續改進和創新專案。 特點⭐️ ---- Analog 是建構在 Angular 之上的元框架，由下一代開源建置工具[Vite](https://vitejs.dev)和開源伺服器引擎框架[Nitro](https://nitro.unjs.io)提供支援。以下是它的一些功能，包括： - 對 Vite 生態系統的一流支援（Vitest、Playwright、Cypress 等） - [基於檔案系統的路由](https://analogjs.org/docs/features/routing/overview) - [支援 Markdown](https://analogjs.org/docs/features/routing/content)頁面和博客 - [支援 API/伺服器路由](https://analogjs.org/docs/features/api/overview) - 具有網站地圖和 RSS 提要支援的混合[SSR](https://analogjs.org/docs/features/server/server-side-rendering) / [SSG](https://analogjs.org/docs/features/server/static-site-generation) - 支援 Angular CLI/ [Nx 工作區](https://analogjs.org/docs/integrations/nx) - 與[tRPC](https://trpc.io)整合以實現類型安全的伺服器交互 - 伺服器和部署支援 - 和更多！ 貢獻和社區🤓 ------ 如果沒有核心貢獻者和合作者團隊，AnalogJS 就不會有今天的成就。 [羅賓·戈茨](https://twitter.com/goetzrobin) [馬爾科·斯塔尼米羅維奇](https://twitter.com/markostdev) [路易斯·卡斯特羅](https://twitter.com/LuisHCCDev) [週陳](https://twitter.com/nartc1410) [約書亞·莫羅尼](https://twitter.com/joshuamorony) [安德烈斯·維拉紐瓦](https://twitter.com/villanuevand) 此外，也要感謝該專案的[80 多名貢獻者](https://github.com/analogjs/analog#contributors-)，無論是透過程式碼、文件、測試，還是只是嘗試該專案。 該專案已經在[GitHub](https://github.com/analogjs/analog)上擁有超過 2000 顆星，在[Discord](https://chat.analogjs.org)上擁有超過 500 名成員，在[Twitter/X](https://twitter.com/analogjs)上擁有超過 1000 名追蹤者，並被納入第一批[GitHub 加速器隊列](https://accelerator.github.com/)。 {% youtube H4U6udLcM-Q %} 如果您想嘗試 Analog，請查看這篇有關使用 Analog 和 Angular[建立部落格](https://dev.to/analogjs/how-to-build-a-blog-with-analog-and-angular-4pk2)的部落格文章。如果您想參與該專案，請查看[GitHub 儲存庫](https://github.com/analogjs/analog)。 下一步是什麼 ------ 我們將繼續使用 Analog 和 Angular 盡可能無縫地建立全端網站和應用程式，並透過與[Astro](https://astro.build) 、 [Nx](https://nx.dev) 、 [Vitest](https://analogjs.org/docs/features/testing/vitest) 、 [Storybook](https://storybook.js.org)等整合來擴展 Angular 生態系統。 我們還在 Analog 中引入了一種新的單文件元件格式，用於編寫元件和指令。 以下是`hello.analog`檔案的範例： ``` <script lang="ts"> import { signal } from '@angular/core'; const count = signal(0); function increment() { count.update(total => ++total); } </script> <template> <h2>Hello Analog</h2> Count: {{ count() }} <button (click)="increment()"> Increment </button> </template> <style> h2 { color: red; } </style> ``` 最初是使用 Angular 的元件和指令的`.ng`檔案副檔名，現已發展成為模擬 SFC，其功能包括支援[自動導入](https://github.com/analogjs/analog/discussions/901)、內聯 Markdown 模板、頁面路由等。隨著 Analog 未來的發展，我們將繼續迭代這種方法，並探索在 Angular 應用程式中啟用這種格式的選項。 我們已經收到了非常積極的回饋，甚至還收到了支援這種格式的進一步開發，包括[用於模擬 SFC 的 IDEA 插件](https://plugins.jetbrains.com/plugin/23913-analog?noRedirect=true)，該插件可在 WebStorm 的 EAP 版本中使用。感謝 JetBrains 團隊的[Jan-Niklas Wortmann](https://twitter.com/niklas_wortmann)和[Piotr Tomiak](https://twitter.com/PiotrekTomiak)對此外掛程式的初步開發。您也可以在[GitHub](https://github.com/analogjs/idea-plugin)上為該插件做出貢獻。 與 Analog 合作🤝 ------------ 我們正在尋找與模擬專案合作的公司，以支持該專案的開發。感謝[Snyder Technologies](https://snyder.tech/)作為 Analog 的早期採用者和推動者，[感謝 Nx](https://nx.dev)作為贊助商加入我們，[感謝 House of Angular](https://houseofangular.io)以及該專案的許多其他支持者。 了解有關我們[合作機會](https://analogjs.org/docs/sponsoring)的更多資訊或直接聯繫贊助商\[at\]analogjs.org。 加入社群🥇 ----- - 存取[GitHub 儲存庫](https://github.com/analogjs/analog)並為其加註星標 - 加入[不和諧](https://chat.analogjs.org) - 在[推特](https://twitter.com/analogjs)上關注我們 如果您喜歡這篇文章，請點擊 :heart: 這樣其他人就會看到它。在 Twitter/X 上關注[AnalogJS](https://twitter.com/analogjs)和 \[me\] (https://twitter.com/brandontroberts)，並訂閱我的[YouTube 頻道](https://youtube.com/brandonrobertsdev?sub_confirmation=1)以獲取更多內容！ --- 原文出處：https://dev.to/analogjs/announcing-analogjs-10-19an
我們正在開始一些特別的事情。它被稱為**DEV 挑戰**，這是一種參與社區、建立您的 DEV 檔案、獲得特殊徽章並享受樂趣的新方式。 **第一個挑戰將是前端挑戰**，將於下週三（3 月 20 日）宣布 - 請立即關注[\#devchallenge](/t/devchallenge) ，這樣您就不會錯過發布： {% 標籤 devchallenge %} 什麼是 DEV 挑戰？ ----------- DEV 挑戰就像我們的[黑客馬拉鬆](https://dev.to/devteam/announcing-the-github-dev-2023-hackathon-4ocn)的微型版本，設計得更加靈活，有大量的參與機會。 挑戰將分為不同的領域，即*「前端挑戰」* 、 *「人工智慧挑戰」*等，並為您提供使用新工具累積經驗或向社區、潛在雇主公開展示您最佳技能的機會和更多。 每個 DEV 挑戰將持續約兩週，然後如果社區有興趣，挑戰將重新開始 - 有時使用相同的提示，有時使用新的提示。每個提示都小而平易近人，但提供了展示您的技能和創造力的機會。 我們可能會根據參與度和熱情開始和停止某些挑戰，如果我們相信新技術和合作夥伴關係對挑戰參與者和整個社區有利，我們將尋求引入新技術和合作夥伴關係。 參加挑戰意味著什麼？ ---------- 輸入挑戰的方式是建立新的開發貼文並使用與該特定挑戰相關的標籤。我們將在提交過程中提供帖子模板，以便於輸入。 有什麼提示？ ------ 挑戰提示會根據領域的不同而有所不同，但通常我們會要求您透過一個小型演示來展示您的創造力，或提供帖子格式的具體指南。有時它會提示您進行建置，有時它會提示您分享您的學習成果 - 無論哪種方式，我們都會獎勵您的創造力和熱情。 任何一周都*可能*進入前端挑戰賽的範例提示： - 創意十足的 CSS 藝術讓我們驚嘆不已 - 創造獨特、有用且美觀的 UI 元素 這些都是很一般的。有時我們會讓提示更具體： - 用 CSS 製作獨角獸 - 製作載入動畫 有時我們可能會出現愚蠢的提示： - 做出可以想像到的最糟糕的日期選擇器 獎品呢？ ---- 獎品會因挑戰而異，有時甚至會根據提示而變化。與獎勵相關的所有細節將在具體的挑戰帖子中清楚地概述。 獎品將始終包括挑戰所特有的 DEV Profile 徽章。 雖然徽章將使您的開發者檔案更加美觀和獨特，但我們也將努力使這些徽章更加有用，作為為參與者打開專業大門的一種方式。雖然其中一部分是“只是為了好玩”，但我們相信參與並贏得挑戰可以幫助證明您在特定領域的技能。我們將尋求與能夠幫助您進一步參與 DEV 的組織合作。 除了徽章之外，獎品還包括商店優惠券和其他合作夥伴驅動的獎品（我們排列）。 你說夥伴？ ----- 挑戰不會像我們社區範圍的黑客馬拉松通常那樣嚴格由合作夥伴驅動，但一些挑戰將包含合作夥伴組成部分，可能會附帶特殊贈品。 我們希望與合作夥伴合作，在獎品以及免費/折扣積分方面贊助某些挑戰，以建立他們的生態系統。 有些挑戰以及挑戰中的提示將具有強大的合作關係，而有些挑戰則根本沒有合作夥伴。 規則和常見問題解答 --------- 挑戰規則將在每個挑戰的說明中盡可能清楚地列出。有些規則適用於所有挑戰，有些則針對特定挑戰。雖然所有規則都符合我們的[一般條款](https://dev.to/terms)和[行為準則](https://dev.to/code-of-conduct)，但以下幾點值得注意： #### **禁止抄襲…但允許對開放想法進行分叉和重複** 鼓勵模仿開源程式碼以及借鑒和改進想法，但任何被認為抄襲的內容都沒有資格獲得獎項。偶然的抄襲可能只會導致您被取消挑戰資格。嚴重的抄襲將導致您完全被 DEV 暫停。 riffing什麼時候變成抄襲了？這將取決於情況，但透明度很重要，許可證相容性也很重要。評審應該清楚你在程式碼和概念靈感方面加入到專案中的內容。 只要遵守所有其他規則**，人工智慧也是非常被允許的**。我們希望給您一個機會在現實的開發場景中展示您的技能。如果您使用人工智慧工具來幫助您完成提交，那麼一切權力都歸您所有。 #### *允許*重複參與。*允許*以過去的想法為基礎 我們有時會出現重複的提示，有時會出現新的提示。無論哪種方式，我們都鼓勵人們參與每項挑戰活動。如果參與者有資格提交新的提交內容，也歡迎他們在過去提交的內容的基礎上繼續進行。 如果您是在過去提交的基礎上進行的，則必須對自上次提交以來為改進參賽作品所做的工作保持透明，並且將根據當前挑戰的標準對您進行評判。我們希望這些挑戰成為繼續增強現有專案的機會，同時提供一個展示這項工作的新場所。 #### 評判是主觀的，你必須是個好的運動者 我們將制定一些評判的經驗法則，我們將盡力使比賽盡可能有趣，但您必須明白，評判參賽作品並不存在完美的方法。 我們將嘗試在一些規則上保持透明，例如：如果先前的獲勝者和新參與者之間的比分*非常接近*，我們將青睞新參與者。 這只是一些規則和說明的範例，我們相信社區秉承友好和包容性競爭的精神。 面向未來：自主挑戰 --------- 除了已經安排好的一切之外，我們還將提供以自定進度的方式參與挑戰的機會。也就是說，您將有機會在自己的時間完成挑戰並仍然獲得徽章，而不是按照嚴格的時間表提交並嘗試與社區其他成員一起贏得特定挑戰。 一旦我們推出了最初的幾個挑戰，我們將提供有關自定進度路徑的更多詳細資訊。 最後一件事 ----- Challenges 是我們今年春天推出的幾項新措施之一，旨在使 DEV 成為社區更加完整和充滿活力的生態系統。我們希望這裡的每個人都能有所收穫，並期待很快與大家分享更多內容。 問題？ --- 如果我們在這裡沒有介紹任何內容，請隨時在評論中提出問題。否則，請繼續關注，我們希望在 3 月 X 日推出 CSS/前端挑戰時看到您加入其中。您現在可以關注標籤，以確保您不會錯過該帖子。 {% 標籤 devchallenge %} --- 原文出處：https://dev.to/devteam/introducing-dev-challenges-1mk9
過去十年來，人工智慧世界取得了長足發展。 人工智慧無所不在，從語音助理到軟體開發，如果我們正確使用它，它會非常有幫助。 在這樣的世界中，製作 AI 應用程式是有利可圖的，因此我在這裡介紹 25 個開源專案，您可以使用它們來製作 AI 應用程式並將其提升到新的水平。 其中有一些令人興奮的概念，例如使用語音合成與 3D 角色進行互動式溝通。堅持到底。 將會有大量的資源、文章、專案想法、指南等可供參考。 讓我們涵蓋這一切！ --- 1. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ----------------------------------------------------------------------------  Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。 我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 因此，您可以繪製資料集的圖表，並使用類似 GUI 的滑桿來提供使用其他實用功能來處理資料的選項。 雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。 在底層，Taipy 利用各種函式庫來簡化開發並增強功能。  開始使用以下命令。 ``` pip install taipy ``` 我們來談談最新的[Taipy v3.1 版本](https://docs.taipy.io/en/latest/relnotes/)。 最新版本使得在 Taipy 的多功能零件物件中可視化任何 HTML 或 Python 物件成為可能。 這意味著[Folium](https://python-visualization.github.io/folium/latest/) 、 [Bokeh](https://bokeh.org/) 、 [Vega-Altair](https://altair-viz.github.io/)和[Matplotlib](https://matplotlib.org/)等程式庫現在可用於視覺化。 這也帶來了對[Plotly python 的](https://plotly.com/python/)原生支持，使繪製圖表變得更加容易。  他們還使用分散式運算提高了效能，但最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 例如，您可以看到[聊天演示](https://docs.taipy.io/en/release-3.1/gallery/llm/5_chatbot/)，它使用 OpenAI 的 GPT-4 API 來產生對您的訊息的回應。您可以輕鬆更改程式碼以使用任何其他 API 或模型。  另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。  您也可以使用 Taipy 雲端部署應用程式。 如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 HuggingFace 的[使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難，但 Taipy 提供了[10 多個演示教程](https://docs.taipy.io/en/release-3.1/gallery/)，其中包含程式碼和適當的文件供您遵循。 例如，一些現場演示範例： - [新冠儀表板](https://covid-dashboard.taipy.cloud/Country) - [推文生成](https://tweet-generation.taipy.cloud/) - [資料視覺化](https://production-planning.taipy.cloud/Data-Visualization) - [即時人臉辨識](https://face-recognition.taipy.cloud/) Taipy 在 GitHub 上有 7k+ Stars，並且處於`v3`版本，因此它們正在不斷改進。  https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 2. [Supabase](https://github.com/supabase/supabase) - 開源 Firebase 替代品。 ----------------------------------------------------------------------  要建立AI應用程式，您需要一個後端，而Supabase作為優秀的後端服務提供者可以滿足這一需求。 開始使用以下 npm 指令 (Next.js)。 ``` npx create-next-app -e with-supabase ``` 這就是使用 CRUD 操作的方式。 ``` import { createClient } from '@supabase/supabase-js' // Initialize const supabaseUrl = 'https://chat-room.supabase.co' const supabaseKey = 'public-anon-key' const supabase = createClient(supabaseUrl, supabaseKey) // Create a new chat room const newRoom = await supabase .from('rooms') .insert({ name: 'Supabase Fan Club', public: true }) // Get public rooms and their messages const publicRooms = await supabase .from('rooms') .select(` name, messages ( text ) `) .eq('public', true) // Update multiple users const updatedUsers = await supabase .from('users') .eq('account_type', 'paid') .update({ highlight_color: 'gold' }) ``` 您可以閱讀[文件](https://supabase.com/docs)。 您可以使用身份驗證、即時、邊緣功能、儲存等功能建立一個速度極快的應用程式。 Supabase 涵蓋了這一切！ Supabase 也提供了幾個入門套件，例如[Nextjs 與 LangChain](https://github.com/langchain-ai/langchain-nextjs-template) 、 [Stripe 與 Nextjs](https://github.com/vercel/nextjs-subscription-payments)或[AI Chatbot](https://github.com/supabase-community/vercel-ai-chatbot) 。 Supabase 在 GitHub 上擁有超過 63,000 顆星，並且擁有大量提交超過 27,000 次的貢獻者。 https://github.com/supabase/supabase 明星 Supabase ⭐️ --- 3. [Chatwoot](https://github.com/chatwoot/chatwoot) - 即時聊天、電子郵件支援、全通路服務台並擁有您的資料。 --------------------------------------------------------------------------------  Chatwoot 連接流行的客戶溝通管道，如電子郵件、網站即時聊天、Facebook、Twitter、WhatsApp、Instagram、Line 等。這有助於您從單一儀表板跨管道提供一致的客戶體驗。 這在各種情況下都可能很重要，例如當您圍繞人工智慧應用程式建立社群時。  您可以閱讀[文件](https://www.chatwoot.com/docs/product)來發現各種整合選項，以便更輕鬆地管理整個生態系統。 他們在每個整合中都有非常詳細的文件和快照範例，例如[帶有 WhatsApp Cloud API 的 WhatsApp 通道](https://www.chatwoot.com/docs/product/channels/whatsapp/whatsapp-cloud)。您可以根據需要一鍵式或自架部署到 Heroku。 他們在 GitHub 上擁有 18k+ Stars，並且發布了`v3.6`版本。 https://github.com/chatwoot/chatwoot 明星 Chatwoot ⭐️ --- 4. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------  您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` 這是整合 CopilotTextArea 的方法。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { useState } from "react"; export function SomeReactComponent() { const [text, setText] = useState(""); return ( <> <CopilotTextarea className="px-4 py-4" value={text} onValueChange={(value: string) => setText(value)} placeholder="What are your plans for your vacation?" autosuggestionsConfig={{ textareaPurpose: "Travel notes from the user's previous vacations. Likely written in a colloquial style, but adjust as needed.", chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 20, stop: [".", "?", "!"], }, }, }, }} /> </> ); } ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)。 基本概念是在幾分鐘內建立可用於基於 LLM 的全端應用程式的 AI 聊天機器人。 https://github.com/CopilotKit/CopilotKit Star CopilotKit ⭐️ --- 5. [DALL·E Mini](https://github.com/borisdayma/dalle-mini) - 根據文字提示產生圖像。 ------------------------------------------------------------------------  OpenAI 擁有第一個令人印象深刻的模型，用於使用 DALL·E 生成圖像。 Craiyon/DALL·E mini 嘗試使用開源模型重現這些結果。 如果您想知道這個名字，DALL-E mini 應母公司的要求更名為 Craiyon，並以更易於存取的網路應用程式格式使用類似的技術。 您可以在[Craiyon](https://www.craiyon.com/)上使用該模型。  開始使用以下命令（用於開發）。 ``` pip install dalle-mini ``` 您可以閱讀[文件](https://github.com/borisdayma/dalle-mini?tab=readme-ov-file#development)。 您可以閱讀[DALL-E Mini 解釋](https://wandb.ai/dalle-mini/dalle-mini/reports/DALL-E-Mini-Explained-with-Demo--Vmlldzo4NjIxODA)來了解有關資料集、架構和所涉及演算法的更多資訊。 您可以閱讀[最佳真實感 AI 圖像和提示的終極指南](https://www.craiyon.com/blog/ultimate-guide-best-ai-art-photorealistic-images-and-prompts)，以便更好地理解優質資源。 DALL·E Mini 在 GitHub 上擁有 14k+ Stars，目前處於`v0.1`版本。 https://github.com/borisdayma/dalle-mini 明星 DALL·E Mini ⭐️ --- 6. [Deepgram](https://github.com/deepgram) - 將語音 AI 建置到您的應用程式中。 ---------------------------------------------------------------  從新創公司到 NASA，Deepgram API 每天都用於轉錄和理解數百萬分鐘的音訊。快速、準確、可擴展且經濟高效。 它為開發人員提供語音到文字和音訊智慧模型。  儘管他們有免費增值模式，但免費套餐的限制足以讓您入門。 可視化效果更上一層樓。您可以檢查即時串流媒體回應或音訊檔案並比較音訊的智慧程度。   您可以閱讀[文件](https://developers.deepgram.com/docs/introduction)。 您也可以閱讀 Deepgram 撰寫的[關於如何將語音辨識新增至您的 React 和 Node.js 專案的](https://deepgram.com/learn/how-to-add-speech-recognition-to-your-react-project)範例部落格。 如果您想嘗試 API 來親自了解模型的靈活性，請查看他們的[API Playground](https://playground.deepgram.com/?smart_format=true&language=en&model=nova-2) 。 https://github.com/deepgram 明星 Deepgram ⭐️ --- 7. [InvokeAI](https://github.com/invoke-ai/InvokeAI) - 領先的穩定擴散模型創意引擎。 ---------------------------------------------------------------------  關於 InvokeAI 是 Stable Diffusion（開源文字到圖像和圖像到圖像生成器）的實現。 它可以在 Windows、Mac 和 Linux 機器上執行，並在 RAM 低至 4 GB 的 GPU 卡上執行。 此解決方案提供業界領先的WebUI，支援透過CLI進行終端使用，並作為多種商業產品的基礎。  您可以閱讀有關[安裝和硬體要求](https://invoke-ai.github.io/InvokeAI/installation/INSTALLATION/)、[如何安裝不同型號](https://invoke-ai.github.io/InvokeAI/installation/050_INSTALLING_MODELS/)以及最重要的[自動安裝的資訊](https://invoke-ai.github.io/InvokeAI/installation/010_INSTALL_AUTOMATED/)。 令人興奮的功能是能夠使用另一個圖像生成圖像，如[文件](https://invoke-ai.github.io/InvokeAI/features/IMG2IMG/)中所述。 InvokeAI 在 GitHub 上有近 21k 顆星， https://github.com/invoke-ai/InvokeAI 明星 InvokeAI ⭐️ --- 8. [OpenAI](https://github.com/openai) - 您所需要的一切。 -------------------------------------------------  Gemini by Google 和 OpenAI 非常受歡迎，但我們在此列表中專注於 OpenAI。 如果您想了解更多訊息，可以在 Medium 上閱讀[Google AI Gemini API in web using React 🤖](https://generativeai.pub/google-gemini-api-in-web-using-react-7e5bf0bf0abc) 。這很簡單，也很切中要害。 透過 OpenAI，您可以使用 DALL·E（根據文字描述建立原創、逼真的圖像和藝術）、Whisper（語音辨識模型）和 GPT-4。在評論中告訴我們關於索拉的事吧！ 您可以使用簡單的 API 開始建置。 ``` completion = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages=[ {"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": "What are some famous astronomical observatories?"} ] ) ``` 您可以閱讀[文件](https://platform.openai.com/docs/introduction)。它提供瞭如此多的選項來建立非常酷的東西！  甚至 Stripe 也使用 GPT-4 來改善使用者體驗。 例如，您可以建立[Assistant 應用程式](https://platform.openai.com/docs/assistants/overview)並查看[API 遊樂場](https://platform.openai.com/playground/p/default-chat?model=text-davinci-003)以更好地理解它。  如果您需要指南，可以閱讀 Dzone 的[Integrating ChatGPT With ReactJS](https://dzone.com/articles/integrating-chatgpt-with-reactjs-a-comprehensive-g) 。 其間，OpenAI收購了Sora，獲得了壟斷地位。你怎麼認為？ https://github.com/openai 明星 OpenAI ⭐️ --- 9. [DeepFaceLab](https://github.com/iperov/DeepFaceLab) - 用於建立深度贗品的領先軟體。 ------------------------------------------------------------------------  DeepFaceLab 是製作 Deepfakes 的頂級開源工具。 Deepfakes 是透過深度學習製作的經過修改的圖像和影片。它們經常被用來交換圖片或剪輯中的臉孔，有時是為了開玩笑，但也有出於有害的原因。 DeepFaceLab，用Python建置，是一個強大的deepfake工具。它可以改變媒體中的臉孔，甚至消除皺紋和老化跡象。 這些是您可以使用 DeepFaceLab 執行的一些操作。 - 換臉。  - [臉部抗衰老 - YouTube](https://www.youtube.com/watch?v=Ddx5B-84ebo) 。  - 更換頭部。  - 操縱嘴唇。 您可以使用這個基本教學來了解[如何有效地使用 DeepFaceLab](https://www.youtube.com/watch?v=kOIMXt8KK8M)來完成這些事情。 您可以在[YouTube](https://www.youtube.com/channel/UCGf4OlX_aTt8DlrgiH3jN3g/videos)上看到使用此 DeepLab 演算法的影片。 不幸的是，DeepFaceLab 中沒有「讓一切正常」按鈕，但值得根據您的特定需求了解其工作流程。 儘管它於 2023 年 11 月 9 日存檔，在 GitHub 上有近 44k+ 顆星，但由於其大量的教程和可靠的演算法，它仍然是您的 AI 應用程式的可靠選擇。 https://github.com/iperov/DeepFaceLab 明星 DeepFaceLab ⭐️ --- 10. [Detectron2](https://github.com/facebookresearch/detectron2) - 基於 PyTorch 的模組化物件偵測庫。 ----------------------------------------------------------------------------------------  Detectron2 是 Facebook AI Research 的下一代函式庫，提供最先進的偵測和分割演算法。它是 Detectron 和 maskrcnn-benchmark 的後繼者。 它支援 Facebook 上的多個電腦視覺研究專案和生產應用程式。 使用此[YouTube 教學](https://www.youtube.com/watch?v=eUSgtfK4ivk)將 Detectron2 與 Facebook 開發者倡導者的機器學習結合使用。 Detectron2 旨在支援各種最先進的物件偵測和分割模型，同時也適應不斷發展的前沿研究領域。 您可以閱讀[如何入門](https://detectron2.readthedocs.io/en/latest/tutorials/getting_started.html)以及 [元博客](https://ai.meta.com/blog/-detectron2-a-pytorch-based-modular-object-detection-library-/)，其中深入介紹了 Detectron 的目標。 舊版的 Detectron 使用的是 Caffe，因此很難與後來結合 Caffe2 和 PyTorch 的程式碼變更一起使用。為了回應社群回饋，Facebook AI 發布了 Detectron2 作為更新的、更容易使用的版本。 Detectron2 配備了用於物件偵測的先進演算法，例如 DensePose 和全景特徵金字塔網路。 此外，Detectron2 還可以進行語義分割和全景分割，這有助於更準確地偵測和分割影像和影片中的物件。 Detectron2 不僅支援使用邊界框和實例分割遮罩進行物件偵測，還可以預測人體姿勢，與 Detectron 類似。 它們在 GitHub 儲存庫上擁有 28k+ Stars，並在 GitHub 上被 1.6k+ 開發人員使用。 https://github.com/facebookresearch/detectron2 Star Detectron2 ⭐️ --- [11.FastAI-](https://github.com/fastai/fastai)深度學習庫。 ----------------------------------------------------  Fastai 是一個多功能的深度學習庫，旨在滿足從業者和研究人員的需求。它為從業者提供了高級元件，以便他們在常見的深度學習任務中快速獲得一流的結果。 同時，它為研究人員提供低階元件來實驗和開發新方法。 Detectron2 透過其分層架構實現了易用性和靈活性之間的平衡。 該架構將複雜的深度學習技術分解為可管理的抽象，簡潔地利用了 Python 的動態特性和 PyTorch 的靈活性。 它建構在較低層級 API 的層次結構之上，這些 API 提供可組合的建構塊。這樣，想要重寫部分高級 API 或加入特定行為以滿足其需求的用戶無需學習如何使用最低級別。  [安裝 pyTorch](https://pytorch.org/get-started/locally/)後即可開始使用以下命令。 ``` conda install -c fastai fastai ``` 您可以閱讀[文件](https://docs.fast.ai/)。 它們針對初學者、中級和專家的[教程](https://docs.fast.ai/tutorial.html)有不同的起點。 如果您想為 FastAI 做出貢獻，您應該閱讀他們的[程式碼風格指南](https://docs.fast.ai/dev/style.html)。 如果您更喜歡影片，可以在 YouTube 上觀看傑里米霍華德 (Jeremy Howard) 撰寫的[課程“0”：程式設計師實用深度學習 (fastai)](https://www.youtube.com/watch?v=gGxe2mN3kAg) 。 它們在 GitHub 上擁有超過 25,000 顆星，並已被 GitHub 上超過 16,000 名開發人員使用。 https://github.com/fastai/fastai 明星 FastAI ⭐️ --- 12.[穩定擴散](https://github.com/CompVis/stable-diffusion)- 潛在文字到影像擴散模型。 --------------------------------------------------------------------  > 什麼是穩定擴散？ 穩定擴散是指生成模型中使用的一種技術，特別是在文字到圖像合成的背景下，其中將資訊從文字描述轉移到圖像的過程是逐漸且平滑地完成的。 在潛在文字到影像擴散模型中，穩定擴散可確保來自文字描述的訊息在整個模型的潛在空間中一致地擴散或傳播。這種擴散過程有助於產生與給定文字輸入相符的高品質和逼真的圖像。 穩定的擴散機制確保模型在生成過程中不會出現突然的跳躍或不穩定。我希望這能解決問題！ 下載和採樣穩定擴散的簡單方法是使用[擴散器庫](https://github.com/huggingface/diffusers/tree/main#new--stable-diffusion-is-now-fully-compatible-with-diffusers)。 ``` # make sure you're logged in with `huggingface-cli login` from torch import autocast from diffusers import StableDiffusionPipeline pipe = StableDiffusionPipeline.from_pretrained( "CompVis/stable-diffusion-v1-4", use_auth_token=True ).to("cuda") prompt = "a photo of an astronaut riding a horse on mars" with autocast("cuda"): image = pipe(prompt)["sample"][0] image.save("astronaut_rides_horse.png") ``` 您可以閱讀[研究論文](https://ommer-lab.com/research/latent-diffusion-models/)以及有關[穩定擴散影像修改](https://github.com/CompVis/stable-diffusion?tab=readme-ov-file#image-modification-with-stable-diffusion)的更多資訊。 例如，這是輸入。  這是放大一點後的輸出。  Stable Diffusion v1 是一種特定的模型配置，它採用 860M UNet 和 CLIP ViT-L/14 文字編碼器進行擴散模型，並具有下採樣因子 8 自動編碼器。該模型在 256x256 影像上進行了預訓練，隨後在 512x512 影像上進行了微調。 他們在 GitHub 儲存庫上擁有大約 64k+ Stars。 https://github.com/CompVis/stable-diffusion 恆星穩定擴散 ⭐️ --- 13. [Mocap Drones](https://github.com/jyjblrd/Mocap-Drones) - 用於房間規模追蹤的低成本動作捕捉系統。 ---------------------------------------------------------------------------------  該專案需要 SFM（運動結構）OpenCV 模組，這需要您從原始程式碼編譯 OpenCV。 從`computer_code`目錄中，執行此命令來安裝節點相依性。 ``` yarn install yarn run dev // to start the web server. ``` 您將獲得前端介面的 URL 視圖。 開啟一個單獨的終端機視窗並執行命令`python3 api/index.py`來啟動後端伺服器。此伺服器負責接收攝影機串流並執行動作捕捉計算。 架構如下。  您可以觀看此[YouTube 影片](https://www.youtube.com/watch?v=0ql20JKrscQ)來了解 Mocap 無人機的工作原理，也可以觀看該專案所有者的[部落格](https://joshuabird.com/blog/post/mocap-drones)。 https://www.youtube.com/watch?v=0ql20JKrscQ 您可以閱讀[文件](https://github.com/jyjblrd/Mocap-Drones?tab=readme-ov-file#runing-the-code)。 這是一個最近的開源專案，在 GitHub 儲存庫上擁有 900 多個 star。 https://github.com/jyjblrd/Mocap-Drones 明星動捕無人機 ⭐️ --- 14. [Whisper Speech](https://github.com/collabora/WhisperSpeech) - 透過反轉 Whisper 建構的文字轉語音系統。 -------------------------------------------------------------------------------------------  該模型與穩定擴散類似，但用於語音，功能強大且高度可自訂。 該團隊確保使用經過適當許可的語音錄音，並且所有程式碼都是開源的，使該模型對於商業應用程式來說是安全的。 目前，這些模型是在英語 LibreLight 資料集上進行訓練的。 您可以進一步研究[架構](https://github.com/collabora/WhisperSpeech?tab=readme-ov-file#architecture)。  您可以聽到[範例聲音](https://github.com/collabora/WhisperSpeech/assets/107984/aa5a1e7e-dc94-481f-8863-b022c7fd7434)並使用[colab](https://colab.research.google.com/drive/1xxGlTbwBmaY6GKA24strRixTXGBOlyiw)自行嘗試。 它們相當新，在 GitHub 上有大約 3k+ 的星星。 https://github.com/collabora/WhisperSpeech 星語語音 ⭐️ --- 15. [eSpeak NG](https://github.com/espeak-ng/espeak-ng) - 支援一百多種語言和口音的語音合成器。 ----------------------------------------------------------------------------  eSpeak NG 是一款緊湊型開源軟體文字語音合成器，適用於 Linux、Windows、Android 和其他作業系統。它支援 100 多種語言和口音。它基於 Jonathan Duddington 建立的 eSpeak 引擎。 您可以閱讀各種系統上的[安裝指南](https://github.com/espeak-ng/espeak-ng/blob/master/docs/guide.md)。 對於類似 Debian 的發行版（例如 Ubuntu、Mint 等）。您可以使用此命令。 ``` sudo apt-get install espeak-ng ``` 您可以查看[支援的語言](https://github.com/espeak-ng/espeak-ng/blob/master/docs/languages.md)清單、閱讀[文件](https://github.com/espeak-ng/espeak-ng/tree/master?tab=readme-ov-file#documentation)並查看[功能](https://github.com/espeak-ng/espeak-ng/tree/master?tab=readme-ov-file#features)。 該模型將文字轉換為音素程式碼，表明其作為另一個語音合成引擎前端的潛在能力。 他們在 GitHub 上有 2700+ 顆星星， https://github.com/espeak-ng/espeak-ng 明星 eSpeak NG ⭐️ --- 16.[聊天機器人 UI](https://github.com/mckaywrigley/chatbot-ui) - 每個模型的人工智慧聊天。 ------------------------------------------------------------------------  我們都使用過 ChatGPT，這個專案可以幫助我們為任何 AI 聊天機器人設定使用者介面。少一麻煩！ 你可以閱讀[安裝指南](https://github.com/mckaywrigley/chatbot-ui?tab=readme-ov-file#1-install-docker)來安裝 docker、supabase CLI 和其他東西。 您可以閱讀<a href="">文件</a>並查看[演示](https://twitter.com/mckaywrigley/status/1738273242283151777?s=20)。 這在底層使用了 Supabase (Postgres)，這就是我們之前討論它的原因。 我沒有討論 Vercel AI 聊天機器人，因為它與此機器人相比是一個相當新的比較。 Chatbot UI 在 GitHub 上擁有大約 25k+ Stars，因此它仍然是開發人員為任何聊天機器人建立 UI 介面的首選。 https://github.com/mckaywrigley/chatbot-ui 明星聊天機器人 UI ⭐️ --- 17. [GPT-4 & LangChain](https://github.com/mayooear/gpt4-pdf-chatbot-langchain) - 用於大型 PDF 文件的 GPT4 和 LangChain 聊天機器人。 --------------------------------------------------------------------------------------------------------------------------  這可用於新的 GPT-4 API 來為多個大型 PDF 檔案建立 chatGPT 聊天機器人。 該系統是使用 LangChain、Pinecone、Typescript、OpenAI 和 Next.js 建構的。 LangChain 是一個簡化可擴展 AI/LLM 應用程式和聊天機器人開發的框架。 Pinecone 用作向量存儲，用於以文字格式儲存嵌入和 PDF，以便以後檢索類似文件。 您可以閱讀涉及複製、安裝依賴項和設定環境 API 金鑰[的開發指南](https://github.com/mayooear/gpt4-pdf-chatbot-langchain?tab=readme-ov-file#development)。 您可以觀看[YouTube 影片](https://www.youtube.com/watch?v=ih9PBGVVOO4)，了解如何遵循和使用它。 他們在 GitHub 上擁有 14k+ Stars，僅提交了 34 次。在您的下一個人工智慧應用程式中嘗試！ https://github.com/mayooear/gpt4-pdf-chatbot-langchain 明星 GPT-4 和 Langchain ⭐️ --- 18. [Amica](https://github.com/semperai/amica) - 允許您在瀏覽器中輕鬆與 3D 角色聊天。 ---------------------------------------------------------------------  Amica 是一個開源接口，用於透過語音合成和語音辨識與 3D 角色進行互動式通訊。 您可以匯入 VRM 文件，調整聲音以適合角色，並產生包含情緒表達的回應文字。 他們使用 Three.js、OpenAI、Whisper、Bakllava 等進行視覺處理。您可以閱讀[Amica 的工作原理](https://docs.heyamica.com/overview/how-amica-works)及其所涉及的[核心概念](https://docs.heyamica.com/overview/core-concepts)。 您可以克隆該存儲庫並使用它來[開始](https://docs.heyamica.com/getting-started/installation)。 ``` npm i npm run dev ``` 您可以閱讀[文件](https://docs.heyamica.com/)並查看[演示](https://amica.arbius.ai/)，這真是太棒了：D  您可以觀看這段簡短的影片，了解它的功能。 https://www.youtube.com/watch?v=hUxAEnFiXH8 Amica 使用 Tauri 建立桌面應用程式。別擔心，我們在此清單的後面部分介紹了金牛座。 他們在 GitHub 上有 400 多個 Star，看起來非常容易使用。 https://github.com/semperai/amica Star Amica ⭐️ --- 19. [Hugging Face Transformers](https://github.com/huggingface/transformers) - 適用於 Pytorch、TensorFlow 和 JAX 的最先進的機器學習。 ----------------------------------------------------------------------------------------------------------------------  Hugging Face Transformers 可以輕鬆存取最先進的預訓練模型和演算法，用於文字分類、語言生成和問答等任務。該庫建置在 PyTorch 和 TensorFlow 之上，允許用戶以最少的努力將高級 NLP 功能無縫整合到他們的應用程式中。 憑藉大量預訓練模型和支援社區，Hugging Face Transformers 簡化了基於 NLP 的解決方案的開發。 這些模型可用於執行 100 多種語言的文本相關任務，例如文字分類、資訊擷取、問答、摘要、翻譯和文字生成。 它們還可以處理與影像相關的任務，例如影像分類、物件偵測和分割，以及與音訊相關的任務，例如語音辨識和音訊分類。 他們還可以執行各種模式的多任務處理，包括表格問答、光學字元辨識、從掃描文件中提取資訊、視訊分類和視覺問答。 您可以看到大量可用的[模型](https://huggingface.co/models)。 您可以瀏覽[文件](https://huggingface.co/docs/transformers/task_summary)以取得完整的目標並向您展示可以執行的各種任務的範例。 例如，使用管道的一種方法是用於影像分割。 ``` from transformers import pipeline segmenter = pipeline(task="image-segmentation") preds = segmenter( "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/pipeline-cat-chonk.jpeg" ) preds = [{"score": round(pred["score"], 4), "label": pred["label"]} for pred in preds] print(*preds, sep="\n") ``` Transformer 得到了 Jax、PyTorch 和 TensorFlow 這三個最廣泛使用的深度學習庫的支持，並且它們之間可以無縫整合。這種整合可以使用一個庫輕鬆訓練模型，然後加載它們以使用另一個庫進行推理。 它們在 GitHub 上擁有大約 120k+ 星，並被 142k+ 大量開發人員使用。試試看！ https://github.com/huggingface/transformers 明星抱臉變形金剛 ⭐️ --- 20. [LLAMA](https://github.com/facebookresearch/llama) - LLaMA 模型的推理程式碼。 ------------------------------------------------------------------------  Llama 2 是 Facebook Research 開發的尖端技術，使個人、創作者、研究人員和各種規模的企業能夠使用大型語言模型負責任地實驗、創新和擴展他們的想法。 最新版本包括模型權重以及預訓練和微調 Llama 語言模型的起始程式碼，參數範圍從 7B 到 70B。 開始使用涵蓋以下步驟的[安裝指南](https://github.com/facebookresearch/llama?tab=readme-ov-file#quick-start)。 - 克隆並下載儲存庫。 - 安裝所需的依賴項。 - 從 Meta 網站註冊並下載模型。 - 執行提供的腳本來下載模型。 - 使用提供的命令在本地執行所需的模型。 您可以觀看由 ZeroToMastery 製作的關於什麼是美洲駝的[YouTube 影片](https://www.youtube.com/watch?v=OqZ0CSKzu10)。 您也可以在[Hugging Face](https://huggingface.co/meta-llama)和[Meta 官方頁面](https://llama.meta.com/)上查看型號清單和更多資訊。 Ollama 基於 llama，在 GitHub 上擁有 50k+ star。請參閱文件並使用此模型進行更多研究。 https://github.com/facebookresearch/llama 明星 LLAMA ⭐️ --- 21. [Fonoster](https://github.com/fonoster/fonoster) - Twilio 的開源替代品。 ---------------------------------------------------------------------  Fonoster Inc. 研究了一種創新的可編程電信堆棧，該堆疊將為企業提供完全基於雲端的實用程序，將電話服務與網路連接起來。 根據您想要實現的目標，有多種開始方法。 開始使用以下 npm 指令。 ``` npm install @fonoster/websdk // CDN is also available ``` 例如，您可以透過以下方式將 Fonoster 與 Google Speech API 結合使用。 （您將需要服務帳戶的金鑰） ``` npm install @fonoster/googleasr @fonoster/googletts ``` 這是您可以配置語音伺服器以使用插件的方法。 ``` const { VoiceServer } = require("@fonoster/voice"); const GoogleTTS = require("@fonoster/googletts"); const GoogleASR = require("@fonoster/googleasr"); const voiceServer = new VoiceServer(); const speechConfig = { keyFilename: "./google.json" }; // Set the server to use the speech APIS voiceServer.use(new GoogleTTS(speechConfig)); voiceServer.use(new GoogleASR(speechConfig)); voiceServer.listen(async(req, res) => { console.log(req); await res.answer(); // To use this verb you MUST have a TTS plugin const speech = await res.gather(); await res.say("You said " + speech); await res.hangup(); }); ``` 您可以閱讀[文件](https://fonoster.com/docs/overview/)。 他們提供了一個足以入門的免費套餐。 他們在 GitHub 上擁有大約 6k+ 顆星，並發布了 250 多個版本。 https://github.com/fonoster/fonoster 明星 Fonoster ⭐️ --- 22. [DIPY](https://github.com/dipy/dipy) - Python 中的 paragon 3D/4D+ 成像庫。 ------------------------------------------------------------------------  DIPY 是 Python 中領先的 3D/4D+ 成像庫。它包含用於空間歸一化、訊號處理、機器學習、統計分析和醫學影像視覺化的各種方法。 此外，它還包含計算解剖學的專門方法，包括擴散、灌注和結構成像。 您可以開始使用。 ``` pip install dipy // run this in python console import dipy print(dipy.get_info()) ``` 如果您使用的是 anaconda 或其他系統，您可以閱讀完整的[安裝指南](https://docs.dipy.org/stable/examples_built/quick_start/quick_start.html#sphx-glr-examples-built-quick-start-quick-start-py)。 您可以閱讀[文件](https://docs.dipy.org/stable/)並存取他們的[YouTube 頻道](https://www.youtube.com/c/diffusionimaginginpython)。 你可以看看詳細的[例子](https://docs.dipy.org/stable/examples_built/index.html)。  他們的下載量超過 428k，並且在 GitHub 儲存庫上擁有 600 多個 Star。 https://github.com/dipy/dipy 明星 DIPY ⭐️ --- 23. [Elastic Search](https://github.com/elastic/elasticsearch) - 免費開放式、分散式、RESTful 搜尋引擎。 ----------------------------------------------------------------------------------------   Elasticsearch 是一種分散式、RESTful 搜尋和分析引擎，能夠解決大量使用案例。 作為 Elastic Stack 的核心，它集中儲存您的資料，以實現閃電般的快速搜尋、微調的相關性以及可輕鬆擴展的強大分析。 他們闡述了使用 ElasticSearch 的用例。  Elasticsearch 使用標準 RESTful API 和 JSON。我們也使用多種語言（例如 Java、Python、.NET、SQL 和 PHP）來建立和維護客戶端。 該結構如下。 ``` const { Client } = require('@elastic/elasticsearch') const client = new Client({ node: 'http://localhost:9200' }) client .search({ index: 'social-*', body: { query: { match: { message: 'myProduct' } }, aggs: { top_10_states: { terms: { field: 'state', size: 10 } } } } }) .then(({ body }) => { const { hits } = body.hits console.log(hits) }) .catch(console.error) ``` 您可以閱讀<a href="">文件</a>並查看[功能清單](https://www.elastic.co/elasticsearch/features)。 儘管具有有用的功能，Elastic Search 的主要缺點是缺乏免費套餐。但是，您仍然可以利用免費試用版來探索和了解開源專案的架構。 Elastic Search 在 GitHub 上擁有超過 67k+ 的星星和近 1900 名貢獻者，並且處於`v8`版本中，正在不斷發展和改進。 https://github.com/elastic/elasticsearch 明星 Elastic Search ⭐️ --- 24. [Tauri](https://github.com/tauri-apps/tauri) - 使用 Web 前端建立更小、更快且安全的桌面應用程式。 ------------------------------------------------------------------------------  Tauri 是一個工具包，旨在幫助開發人員利用幾乎任何可用的前端框架為主要桌面平台建立應用程式。其核心是使用 Rust 開發的，而 CLI 利用 Node.js，提供了一種真正的多語言方法來開發和維護卓越的應用程式。 Tauri 應用程式中的使用者介面目前利用 Tao 作為 macOS、Windows、Linux、Android 和 iOS 上的視窗處理庫。 為了渲染您的應用程式，Tauri 使用 WRY，這是一個為系統 Web 視圖提供統一介面的程式庫。它在 macOS 和 iOS 上利用 WKWebView、在 Windows 上利用 WebView2、在 Linux 上利用 WebKitGTK 以及在 Android 上利用 Android System WebView。 您可以使用 Vite、HTML/CSS/JS、Next.js、Svelte 等等。 開始使用以下 npm 指令。 ``` npm create tauri-app@latest ``` 您可以閱讀[文件](https://tauri.app/v1/guides/getting-started/prerequisites)並查看 Tauri 提供的[功能清單](https://tauri.app/v1/guides/features/)。 您甚至可以使用 Tauri 建立自己的 CLI，這有多酷:) 團隊提供了[YouTube 影片](https://www.youtube.com/watch?v=UxTJeEbZX-0&t=2s)，讓您了解更多關於 Tauri 的訊息。 他們在 GitHub 上擁有超過 75k 顆星星，並發布了 800 多個版本。 https://github.com/tauri-apps/tauri 金牛座之星 ⭐️ --- 25. [AutoGPT](https://github.com/Significant-Gravitas/AutoGPT) - 比 ChatGPT 更令人興奮。 ---------------------------------------------------------------------------------  AutoGPT 的核心在於其主要專案，即由大型語言模型 (LLM) 驅動的半自治代理，旨在為您執行任何任務。 AutoGPT 計畫由[四個主要部分](https://docs.agpt.co/#agent)組成： - 代理 – 也稱為“AutoGPT” - 基準 – 又稱 agbenchmark - 熔爐 - 前端 了解如何使用 OpenAI 金鑰[設定 AutoGPT](https://docs.agpt.co/autogpt/setup/) 。 您可以觀看[Fireship 發布的有關 AutoGPT 的 YouTube 影片](https://www.youtube.com/watch?v=_rGXIXyNqpk)。 https://www.youtube.com/watch?v=\_rGXIXyNqpk 您也可以觀看 Sentral Media 提供的[AutoGPT 教學](https://www.youtube.com/watch?v=FeIIaJUN-4A)。 您可以閱讀[文件](https://docs.agpt.co/)並查看[專案板](https://github.com/orgs/Significant-Gravitas/projects/1)，以了解目前正在開發的內容。 即使您對 AI 不太了解，您也可以嘗試 AutoGPT 以了解如何節省時間並建立很酷的東西。 由於如此出色的用例和自動化功能，他們在 GitHub Repo 上擁有大約 159k+ 的星星。 https://github.com/Significant-Gravitas/AutoGPT 明星 AutoGPT ⭐️ --- 還沒結束。 現在，讓我們探索一些有價值的資源，這些資源將幫助您學習新概念並製作更好的人工智慧應用程式。 我們會保持簡單。不掛！ - [人工智慧 (AI) 課程、書籍、視訊講座和論文](https://github.com/owainlewis/awesome-artificial-intelligence) - [機器學習/深度學習/AI + Web3 - 教程](https://github.com/TarrySingh/Artificial-Intelligence-Deep-Learning-Machine-Learning-Tutorials) - [ML 初學者](https://github.com/microsoft/ML-For-Beginners)- 12 週、26 節課程、52 個測驗，適合所有人的經典機器學習。 - [機器學習框架、函式庫和軟體](https://github.com/josephmisiti/awesome-machine-learning) - [如何製作人工智慧：逐步指南 - Revelo](https://www.revelo.com/blog/how-to-make-an-ai) 希望這將幫助您學習更多概念！ --- 我希望您在列表中找到有用的東西。 我介紹了一些很棒的開源專案，它們可以將您的 AI 應用程式提升到一個新的水平。 人工智慧正在改變世界，最好與人工智慧保持朋友關係，而不是忽視它。 利用它來提高生產力，並抓住機會開發一些非凡的東西。 如果您想以最佳方式改進您的專案，有些開源專案比其他專案更有用，尤其是 Taipy 和 AutoGPT。 請發表評論，讓我們知道哪個專案最讓您感到驚訝。 祝你有美好的一天！直到下一次。 在 GitHub 上關注我。 https://github.com/Anmol-Baranwal 關注 Taipy 以了解更多此類內容。 https://dev.to/taipy --- 原文出處：https://dev.to/taipy/all-the-tools-i-need-to-build-a-perfect-ai-app-2oeh
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
