## **簡介** 在本文中，我提供了主流 Python 函式庫的替代方案。 儘管主流函式庫得到了更強大的活躍社群的支持，但這些替代方案為 Python 領域增加了一些價值。 選擇您的庫取決於您的用例和個人喜好。  --- ## 1.[Taipy](https://github.com/Avaiga/taipy) 而非 Streamlit Taipy 是這個街區的新來者。就像 Streamlit 一樣，Taipy 提供了一種建立互動式 GUI 的簡單方法； 然而，Taipy 解決了 Streamlit 的大部分限制/低效率： - 管理同步/非同步呼叫 - 完全筆記型電腦相容性 - 多用戶 - 為您的佈局、樣式等提供更多自訂功能（無需 CSS） - 大資料支持 - 更好的性能  ---  我們感謝任何幫助我們發展社區的幫助🌱 --- ## 2.[Polars](https://github.com/pola-rs/polars)取代Pandas Polars 的靈感來自於 Python 的皇室成員：Pandas。就像它一樣，它是一個為處理資料而建立的 DataFrame 庫，但在處理大型資料集時它確實表現出色。 Polars 的速度比 Pandas 快 10 到 100 倍，主要原因有二： - Polars 內建平行處理 - 用 Rust 寫 北極熊會取代熊貓嗎？只有時間會給出答案。  --- ## 3.[Dask](https://github.com/dask/dask)取代PySpark Dask 可以結合平行計算來處理大於記憶體的計算。 當您希望擴展計算時，它是一個很好的工具。它是用 Python 原生編寫的，使得學習/使用變得輕而易舉（對於 Python 開發人員來說）。 它不是為超大資料（超過 2 TB）而設計的，如果您正在處理類似 SQL 的查詢，它也沒有競爭力（與 Spark）。 非常適合筆記型電腦執行。  --- ## 4.[LightGBM](https://github.com/microsoft/LightGBM)而不是XGBoost XGBoost 和 LightGBM 都是梯度增強函式庫。 XGBoost 是 Kaggle 的最愛，但在處理大型資料集時，LightGBM 針對具有平行計算的大資料進行了最佳化。  --- ## 5.[PyCaret](https://github.com/pycaret/pycaret)取代Scikit-learn 與 Scikit-learn 一樣，您可以使用 PyCaret 執行機器學習任務。 PyCaret 透過更簡單的程式碼來展示其功能，這是開始 ML 學習專案的好方法。 PyCaret 簡單易學。它的一些高級功能是： - EDA 和資料處理 - 建模/培訓 - 模型可解釋性 - 模型部署 它對各種機器學習步驟的端到端覆蓋使得 PyCaret 成為 ML 愛好者甚至是沒有時間進行更深入分析的高級資料科學家的絕佳工具！  --- ## 6.[Darts](https://github.com/unit8co/darts) 而非 tsfresh 這兩個庫都致力於時間序列。然而，它們有不同的目的。 Darts 是時間序列的「sklearn」。它涵蓋了 DS 在處理時間序列時所需的所有不同功能： - 資料發現 - 資料預處理 - 預測 - 模型評估/選擇 不再需要使用多個庫；這一切都可以在 Darts 中找到。 tsfresh 旨在自動化為 ML 訓練步驟準備時間序列時最具挑戰性的步驟之一：特徵提取和選擇。 tsfresh 可以從您的時間序列中提取大量特徵，並幫助您辨識相關特徵。  --- ## 7.[PyTorch](https://github.com/pytorch/pytorch) 而非 TensorFlow 兩者都是參與深度學習的資料科學家和研究人員的首選庫。 幾年前，TensorFlow 是一個受歡迎的庫，但從 2020 年到 2021 年，PyTorch 已經趕上了 TensorFlow。 您如何在這兩個令人難以置信的庫之間做出選擇？ PyTorch 似乎在研究方面具有優勢，更專注於 NLP。 此外，PyTorch 更具 Python 風格，學習曲線也更容易。 如果您是深度學習遊戲的新手，我建議您嘗試一下 PyTorch；否則，兩個庫都是不相上下的。  --- ## 8.[Arcade](https://github.com/pythonarcade/arcade) 而非 Pygame 在 Python 2D 遊戲領域，Pygame 獲得了良好的聲譽，而 Arcade 作為一個較新但完善的庫，在以下屬性上脫穎而出： - 內建遊戲循環 - 高效率的事件模型 - 更多功能 - 更人性化 兩個庫都有自己的優點；然而，Arcade 是更適合初學者的選擇。 Pygame 確實提供了一種教育替代方案 Pygame Zero，對於新開發人員來說是一個更好的選擇。  --- ## 9.[spaCy](https://github.com/explosion/spaCy)取代NLTK NLTK 是自然語言處理的主流函式庫，具有豐富的功能。 然而，隨著複雜性的增加，學習曲線也會變得更加陡峭。 SpaCy 是開始該領域的一個不錯的選擇。 SpaCy 的另一個優點是它是為了優化 NLP 應用程式而建構的，專注於更高的速度和效率。  --- ## 10.[Ruff](https://github.com/astral-sh/ruff) 而非 Pylint Linters 是任何編碼之旅的重要組成部分。 Pylint 被廣泛使用，但 Ruff 提高了過程的有效性和速度。 眾所周知，它比同等的 linter 快 10-100 倍，Ruff 絕對是一個很好的庫，可以作為 Pylint 的替代品。  --- 我希望你喜歡這篇文章！🙂 我是一名新手作家，歡迎任何改進建議！ 如果您有最喜歡的庫而不是更主流的庫，請隨時分享。  --- 原文出處：https://dev.to/taipy/new-open-source-vs-old-open-source-33k7
如果你使用 CSS 時間夠長，那麼你很可能至少嘗試過一次從 `height: 0` 到 `auto` 的**轉換**...結果卻發現它**確實如此。行不通！** 😢 ➡️幸運的是，今天這個問題實際上有一個**解決方案**：它在底層使用**CSS Grid**，而且它**如此簡單**並且**完美執行！** 讓我們從一個實際的例子開始。我建立了這個簡單的**手風琴**： https://codepen.io/francescovetere/pen/MWLXjNx 它的 **HTML** 非常簡單： ``` <div class="accordion"> <div class="accordion-title">Hover me!</div> <div class="accordion-body"> <div> <p>Lorem ipsum ...</p> </div> </div> </div> ``` 如果您將滑鼠**懸停在手風琴上，您會注意到出現**下拉選單**。這很酷，但是如果我們想讓它看起來有一個很好的**平滑過渡怎麼辦？** **我實際上嘗試**在之前的程式碼筆中通過在“height”屬性上加入一些過渡來做到這一點： ``` .accordion-body { height: 0; transition: 500ms height ease; } .accordion:hover .accordion-body { height: auto; } ``` ❌不幸的是，**這不起作用**：從 `height: 0` 轉換到 `height: auto`，正如我之前所說，** CSS 是不可能的。** 🤔 如何解決這個問題？ 好吧，**第一個解決方案**可以將 `height` 屬性設為 **固定數字**，而不是 `auto`。 這是可行的，但它**不是一個很好的方法**：為了計算這個固定數字，我們必須求助於**JavaScript**，以便計算我們的“.accordion-body”實際上是多少高. .. **不是我們真正的目標！** 😕 我們仍然可以實現這種效果，但是使用 **僅 CSS** 解決方案嗎？ 💡 **實際上，是的！** 為什麼我們不直接使用 `max-height` 來代替呢？ ``` .accordion-body { max-height: 0; transition: 500ms max-height ease; } .accordion:hover .accordion-body { max-height: 200px; } ``` 這將是結果： https://codepen.io/francescovetere/pen/ExrRNVa 由於我們為「max-height」定義了一個**固定值**，瀏覽器現在能夠**正確地執行轉換**。 😕 **唯一的問題**是，由於我們為 `max-height` 定義了一個固定值，現在內容可能 **可能溢出**： https://codepen.io/francescovetere/pen/VwgdmbW 如果您確定您的內容永遠不會達到特定高度...那麼使用此方法就完全沒問題！** 只需為“max-height”使用適當的值，然後您就可以了很好，可以走了。 **但請注意**，“max-height”的**值越高，**過渡變得越奇怪**（嘗試在之前的程式碼筆中加入“max-height: 1000px”，然後查看事情發生了怎樣的變化！）。 🤔 **我們可以做得更好嗎？** 我們可以先避免任何固定的 `height`/`max-height` 嗎？ 🎉 **CSS 格來拯救！** ✅ 我們實際上可以使用一個**巧妙的技巧**，它基本上包括使用**單一網格專案**製作**CSS網格**。 那麼我們真正要做的就是採用「grid-template-rows」並使其從「0fr」過渡到「1fr」：這樣，我們的網格項將從 0 過渡到「自然」高度。就是這麼簡單： ``` .accordion-body { display: grid; grid-template-rows: 0fr; transition: 250ms grid-template-rows ease; } .accordion:hover .accordion-body { grid-template-rows: 1fr; } .accordion-body > div { overflow: hidden; } ``` 這感覺**乾淨多了。** 沒有固定的高度，沒有花哨的東西，只是我們的手風琴按預期工作。 **太棒了！** 😄 https://codepen.io/francescovetere/pen/BaGwBRx 此解決方案的**一個警告**是，您實際上需要為“.accordion-body”的內部“div”設定“overflow：hidden”才能使其工作。在我看來，這個額外的 CSS 是完全值得的，但請在評論中告訴我你的想法！ 🎁 **額外小提示** 這個技巧之所以有效，是因為「網格模板行」（以及更一般地說，「網格軌道」）的「動畫性」。 對於某些瀏覽器來說，這是一個**新功能**：如果您存取[此頁面](https://caniuse.com/mdn-css_properties_grid-template-rows_animation)，您會注意到**網格追蹤可動畫性**例如，僅從 **版本 107 開始登陸 **Chrome**。 在我撰寫本文時，所有主要瀏覽器都支援此功能，但如果您想在生產程式碼中使用此功能，請務必首先**檢查相容性**！ --- 就這樣！如果您已經了解這個很棒的 CSS 功能，請隨時發表評論並告訴我！ 😉 下次見！ 👋 --- 原文出處：https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de
您有時可能會遇到三種不同的環境。每個環境都有其自己的屬性和用途，因此相應地使用它們非常重要。一旦你知道了環境的用途，就會明白為什麼我們有這麼多環境。 主要的三個環境是：開發、階段和生產。 ## Develop 這是您電腦上的環境。您將在此處進行所有程式碼更新。這是您的所有提交和分支以及您的同事的提交和分支所在的地方。開發環境的配置通常與使用者工作的環境不同。 它將連接到某個本地資料庫或虛擬資料庫，以便您可以編寫程式碼而不會弄亂真實資料。由於會有多人在開發環境中工作，因此您還將處理任何分支合併。 您在開發環境中所做的任何操作都不會影響使用者目前開啟網站時看到的內容。這僅供您和其他網頁開發人員了解新功能如何運作並嘗試改進。 許多初步測試將在這個環境中進行。在確保程式碼至少可以在本地執行之前，您不想發布程式碼。盡可能徹底地檢查你的程式碼，這樣你就可以限制進入下一個環境的錯誤。 ## Stage 舞台環境與生產環境盡可能相似。這次您將在伺服器上而不是本機電腦上擁有所有程式碼。它將在不接觸生產環境的情況下連接到盡可能多的服務。 所有的硬核測試都發生在這裡。任何資料庫遷移以及任何配置變更都將在這裡進行測試。當您必須進行主要版本更新時，階段環境也可以幫助您找到並修復出現的任何問題。 如果您有客戶，此時您可以向他們展示產品的工作原理和外觀。他們將能夠看到專案上線後將如何運作，並且能夠為您提供所需的任何回饋。將舞台環境視為進行最後檢查和完善的地方。 ## Production 每次當你談論讓你的專案上線時，你談論的就是這個環境。生產環境是用戶在所有更新和測試之後存取最終程式碼的地方。在所有的環境中，這個環境是最重要的。 這是公司賺錢的地方，所以你不能在這裡犯任何嚴重的錯誤。這就是為什麼您必須先通過其他兩個環境進行所有測試。一旦投入生產，用戶就會發現任何剩餘的錯誤或錯誤，你只能希望這只是小問題。 有些人喜歡將其部署到生產環境。這意味著他們向少數用戶發布更改，並逐漸向所有人推出。並非所有更新都必須同時發佈到生產環境。 在某些情況下，您可能會按計劃推出變更以處理負載問題或確保不會出現任何重大問題。如果發生緊急情況，您可以將變更發佈到生產環境，而無需經過階段環境，儘管您不想定期這樣做。 不同的組織將以自己的方式處理這些環境。其中一些具有不同的名稱，或者可能存在比這些更多的環境。無論如何，您知道需要什麼才能充分利用它們中的每一個。 順便說一句，我知道舞台環境有時會很痛苦。設置這個假生產環境並為其編寫所有測試需要花費大量工作。雖然這是值得花時間的。最好繼續完成這一步，因為它比你想像的更能保護你的屁股。 --- 嘿！你應該在 Twitter 上關注我，因為原因：https://twitter.com/FlippedCoding --- 原文出處：https://dev.to/flippedcoding/difference-between-development-stage-and-production-d0p
這是我的 side project（基本上是Next.Js SaaS Boilerplate [Indiespace](https://www.indiespace.store/)）如何在沒有任何社交媒體存在的情況下在4 天內從0 美元到200 美元以上的故事。 **想法：** 在過去的一個半月裡，我一直在致力於這個專案，最初的計劃是建立一些我可以使用的東西，因為我喜歡開始新專案，但常常對從頭開始設置一切的感覺感到不知所措。所以我開始建立這個樣板，其中包括2 個登陸頁面、2 個等待清單頁面和一個帶有登陸頁面的SAAS 套件以及所有很酷的功能，如深色和淺色主題、訂閱、一次性付款、交易電子郵件、身份驗證、SEO 等。 **期望：** 我對是否有人會購買它或我將如何推銷它的期望為零，因為就像其他所有開發人員一樣，他們推出了包含大量內容的樣板，而我沒有觀眾。所以我按照自己的步調建立它並不斷加入功能。 **發射，市場投入：** 我的發布計劃是在 3 個平台上發布相關內容： - 推特 - 產品搜尋 - 副業專案 因此，在 11 月 17 日星期五，我安排了 11 月 18 日星期六在 Product Hunt 上發布，並在 Sideprojects 上發布，然後就去睡覺了。我大約在星期六下午 2 點醒來，在手機上看到 Product Hunt 通知，所以我打開筆記型電腦並進入 Gmail，然後看到一封來自 Stripe 的電子郵件，我打開它並：  所以現在我很困惑我到底在看什麼，並質疑自己這是從購買我的樣板的人那裡得到的嗎？我打開了產品搜尋，自發布以來已經 1 小時了，我以 30 多票排名第六，沒有進行任何行銷或要求人們投票，並且已經完成銷售。我笑得像個孩子一樣啊啊啊啊啊啊啊啊？ 然後我在 Twitter 上發帖，並請一些朋友點贊，發布後獲得了第七名，點贊數超過 150，頁面瀏覽量 1700 次，Twitter 上的關注者超過 10 人。  **課程：** 我知道這不是很多錢，我知道與我從全職工作中賺到的錢相比，這不算什麼，但說實話，建立自己的數位產品，行銷它，甚至從中賺取一分錢都會給你帶來好處。如此多的幸福。如果你是像我一樣的開發人員，或者想要建立一些東西並且對如何進行一切感到困惑的人，請不要擔心將你的專案公開，讓人們決定，盡你的努力，並繼續前進。 在這一點上，我知道我的 [Indiespace](https://www.indiespace.store/) 並不完美，現在還有很多事情要做，我還必須加入該死的文件，而且我已經討厭設定內容層文件ugghhhh，但是，是的，我將繼續加入功能，以提高我作為開發人員的生產力。 **最後但同樣重要的：** 如果您想要建立 SaaS 應用程式，我建議您嘗試 [Indiespace.store](https://www.indiespace.store/)，如果您是剛起步且負擔不起的人，請嘗試在Twitter 上給我留言，我將非常樂意為您提供協助。 --- 原文出處：https://dev.to/salmandotweb/i-took-my-side-project-from-0-to-180-in-4-days-2i09
警告：所表達的觀點可能不適合所有受眾！ 😂 ## 簡介 在本文結束時，您將了解並能夠根據使用者偏好 - **深色**或**淺色**模式展示您的 Markdown 影像。 1. 我將介紹如何在 GitHub README.md 中加入兩個圖像 - 根據所選的“主題”，您的圖像將正確回應。 2. 我將引導您在 Markdown 中合併影像的過程，並示範如何使用 React 使它們回應。 😎 ___ ## 你使用淺色還是深色？ 我不了解你的情況，但無論平台如何，如果他們可以選擇在淺色和深色模式之間切換，那就沒有競爭了。 淺色主題正在切換為深色，事實上，當然在我寫這篇文章的時候！  話雖如此，在軟體開發的快速發展中，創造無縫的使用者體驗至關重要。 這種體驗的一部分涉及適應使用者偏好，例如淺色和深色模式。 我還記得幾年前，Github 宣布了用戶可以切換到「深色模式」的選項，這是一件非常大的事情。  【Github揭曉黑暗主題的重要時刻】(https://t.co/HEotvXVJ7R) 🤩 2020 年 12 月 8 日🎆 近年來，使用者介面中深色和淺色模式選項的出現已成為一種流行趨勢。 我絕對不是唯一一個喜歡使用深色主題選項的人，根據 Android 用戶的說法，[91.8% 的用戶更喜歡深色模式](https://www.androidauthority.com/dark-mode-poll-results-1090716/) 所以我們可以猜測這個數字在所有作業系統中都相當高。 這當然可能會引起激烈的爭論，所以我會盡力將自己的觀點降到最低。  ## 改善使用者體驗 主要目標是透過在應用程式中提供選項來改善用戶體驗。 有多種方法可以建立每個圖像的多個版本，在本教程中我們不會深入討論細節。 只要確保您的圖像在兩個主題中脫穎而出並具有透明背景，您就會獲得成功。 **_讓我們開始派對吧！_** ## GitHub 自述文件中的響應式圖像 您有一個專案並想讓您的 GitHub 專案 README.md 真正流行嗎？ 無論使用者使用什麼淺色主題，我們都需要一種方法來指定圖像應在 Markdown 中顯示哪種主題（淺色或深色）。 當您想要根據使用者選擇的配色方案優化圖片的顯示時，這特別有用，並且它涉及將 **HTML `<picture>`** 元素與 `prefers-color-scheme` 媒體功能結合使用如下所示。 繼續將圖片檔案直接拖曳到 GitHub 中並放在“srcset=”後面。 ``` <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/boxyhq/.github/assets/66887028/df1c9904-df2f-4515-b403-58b14a0e9093"> <source media="(prefers-color-scheme: light)" srcset="https://github.com/boxyhq/.github/assets/66887028/e093a466-72ea-41c6-a292-4c39a150facd"> <img alt="BoxyHQ Banner" src="https://github.com/boxyhq/jackson/assets/66887028/b40520b7-dbce-400b-88d3-400d1c215ea1"> </picture> ``` 瞧！   太好了，你有 5 秒嗎？ https://github.com/boxyhq/jackson --- ## 使用 React 在 Markdown 中回應影像 假設今天我將像平常一樣用 Markdown 編寫博客，並將其發佈到我的網站上。 我使用的圖像需要根據使用者偏好做出回應，但在 Markdown 中不可能偵聽本地儲存和設定狀態中的「主題」變更。  值得慶幸的是，如果我們將 React 匯入到 Markdown 檔案中，但先建立一個元件，就有一種方法可以解決這個困境。 ## 反應文件 ``` src/components/LightDarkToggle.js import React, { useEffect, useState } from 'react'; function ToggleImages() { // Define a state variable to track the user's login status const [currentTheme, setcurrentTheme] = useState(localStorage.getItem('theme')); // Add an event listener for the 'storage' event inside a useEffect useEffect(() => { const handleStorageChange = (event) => { console.log('Storage event detected:', event); // Check the changed key and update the state accordingly console.log("event", event.key) if (event.key === 'theme') { setcurrentTheme(event.newValue); } }; window.addEventListener('storage', handleStorageChange); // Clean up the event listener when the component unmounts return () => { window.removeEventListener('storage', handleStorageChange); }; }, []); // The empty dependency array ensures that this effect runs once when the component mounts return ( <div className="image-container"> {currentTheme == 'light'? ( <img id="light-mode-image" src="/img/blog/boxyhq-banner-light-bg.png" alt="Light Mode Image" ></img> ):( <img id="dark-mode-image" src="/img/blog/boxyhq-banner-dark-bg.png" alt="Dark Mode Image" ></img> )} </div> ); } export default ToggleImages; ``` 我在程式碼中加入了註釋和一些控制台日誌，以幫助了解正在發生的事情，但讓我們快速分解它。 - React useState 鉤子管理 `currentTheme` 的狀態，它代表使用者選擇的儲存在本機儲存中的主題。 - useEffect 掛鉤用於為「儲存」事件新增事件偵聽器。當儲存事件發生時（表示本機儲存發生變化），元件會檢查變更的鍵是否為“theme”，並相應地更新“currentTheme”狀態。 - 此元件根據使用者選擇的主題呈現不同的影像，如果主題是“淺色”，則顯示淺色模式影像；如果主題是其他主題，則顯示深色模式影像。 酷，讓我們繼續吧！ ## 降價文件 讓我們為新部落格建立一個 .md 檔案。 ``` --- slug: light-and-dark-mode-responsive-images title: 'Light and Dark Mode Responsive Images' tags_disabled: [ developer, react, javascript, open-source, ] image: /img/blog/light-dark.png author: Nathan Tarbert author_title: Community Engineer @BoxyHQ author_url: https://github.com/NathanTarbert author_image_url: https://boxyhq.com/img/team/nathan.jpg --- import ToggleImages from '../src/components/LightDarkToggle.js'; ## 🤩 Let's start this blog off with a bang! Our business logo is now responsive with each user's preference, whether it's **light** or **dark** mode! <div> <ToggleImages /> </div> More blog words... ``` 此時，我們只需匯入 React 元件並將其呈現在 Markdown 檔案中。 由於這是一個 Next.js 應用程式，讓我們啟動伺服器“npm run dev”並查看結果。   並切換到淺色主題  讓我們打開控制台來查看我們的事件  你有它！ 這些是在 Markdown 中展示響應式映像的幾種方法，其中一個範例使用 React 來幫助我們在本地儲存中設定狀態。 我希望您喜歡這篇文章，如果您喜歡開發，請在 [X (Twitter)](https://twitter.com/nathan_tarbert) 上關注我，我們下次再見！ --- 原文出處：https://dev.to/nathan_tarbert/the-zebras-guide-to-showcase-your-images-in-light-dark-17f5
## 你好！我是[鮑里斯](https://www.martinovic.dev/)！ 我是一名軟體工程師，專門從事保險工作，教授其他開發人員，並在會議上發言。多年來，我使用了相當多的不同開發環境和作業系統，除了 .Net 開發之外，我個人從來不喜歡在 Windows 中進行開發。這是為什麼？讓我們更深入地研究一下。 好吧，我的大部分問題都可以歸結為一個詞：**麻煩**。無論是在日常使用中處理Windows，您都會經常遇到作業系統本身的不同方式帶給您的困擾。這樣的例子很多，無論是登錄問題、套件管理、切換節點版本或 Windows 更新，這些問題本身就可以讓人們放棄作業系統。 所以你可以明白為什麼我開始與下圖的烏鴉產生連結。  我並沒有放棄尋找可行的解決方案。而且，我（有點）找到了它。 ## 什麼是 WSL？我為什麼要對它感興趣？ Windows Subsystem for Linux（或 WSL）讓開發人員可以直接在 Windows 上執行功能齊全的本機 GNU/Linux 環境。換句話說，我們可以直接執行Linux，而無需使用虛擬機器或雙重開機系統。 **第一個很酷的事情是 WSL 允許您永遠不用切換作業系統，但仍然可以在作業系統中擁有兩全其美的優點。** 這對我們普通用戶意味著什麼？當您查看WSL 在實踐中的工作方式時，它可以被視為一項Windows 功能，直接在Windows 10 或11 內執行Linux 作業系統，具有功能齊全的Linux 檔案系統、Linux 命令列工具、*** *** 和****** Linux GUI 應用程式（*真的很酷，順便說一句*）。除此之外，與虛擬機器相比，它使用的運作資源要少得多，並且不需要單獨的工具來建立和管理這些虛擬機器。 WSL 主要針對開發人員，因此本文將重點放在開發人員的使用以及如何使用 VS Code 設定完全工作的開發環境。在本文中，我們將介紹一些很酷的功能以及如何在實踐中使用它們。另外，理解新事物的最好方法就是實際開始使用它們。 ### 覺得這篇文章有用嗎？ 我們正在 [Wasp](https://wasp-lang.dev/) 努力建立這樣的內容，更不用說建立一個現代的開源 React/NodeJS 框架了。 表達您支援的最簡單方法就是為 Wasp 儲存庫加註星標！ 🐝 但如果您可以查看[存儲庫](https://github.com/wasp-lang/wasp)（用於貢獻，或只是測試產品），我們將不勝感激。點擊下面的按鈕給黃蜂星一顆星並表示您的支持！  https://github.com/wasp-lang/wasp ## 在 Windows 作業系統上安裝 WSL 為了在 Windows 上安裝 WSL，請先啟用 [Hyper-V](https://learn.microsoft.com/en-us/virtualization/hyper-v-on-windows/quick-start/enable-hyper-v )架構是微軟的硬體虛擬化解決方案。要安裝它，請右鍵單擊 Windows 終端機/Powershell 並以管理員模式開啟它。  然後，執行以下命令： ``` Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All ``` 這將確保您具備安裝的所有先決條件。然後，在管理員模式下開啟 Powershell（最好在 Windows 終端機中完成）。然後，執行 ``` wsl —install ``` 有大量的 Linux 發行版需要安裝，但 Ubuntu 是預設安裝的。本指南將介紹許多控制台命令，但其中大多數將是複製貼上過程。 如果您之前安裝過 Docker，那麼您的系統上很可能已經安裝了 WSL 2。在這種情況下，您將收到安裝所選發行版的提示。由於本教程將使用 Ubuntu，因此我建議執行。 ``` wsl --install -d Ubuntu ``` 安裝 Ubuntu（或您選擇的其他發行版）後，您將進入 Linux 作業系統並出現歡迎畫面提示。在那裡，您將輸入一些基本資訊。首先，您將輸入您的用戶名，然後輸入密碼。這兩個都是 Linux 特定的，因此您不必重複您的 Windows 憑證。完成此操作後，安裝部分就結束了！您已經在 Windows 電腦上成功安裝了 Ubuntu！說起來還是感覺很奇怪吧？ ### 等一下！ 但在我們開始討論開發環境設定之前，我想向您展示一些很酷的技巧，這些技巧將使您的生活更輕鬆，並幫助您了解為什麼 WSL 實際上是 Windows 用戶的遊戲規則改變者。 WSL 的第一個很酷的事情是您不必放棄目前透過 Windows 資源管理器管理檔案的方式。在 Windows 資源管理器的側邊欄中，您現在可以在網路標籤下找到 Linux 選項。  從那裡，您可以直接從 Windows 資源管理器存取和管理 Linux 作業系統的檔案系統。這個功能真正酷的是，你基本上可以在不同的作業系統之間複製、貼上和移動文件，沒有任何問題，這開啟了一個充滿可能性的世界。實際上，您不必對文件工作流程進行太多更改，並且可以輕鬆地將許多專案和文件從一個作業系統移動到另一個作業系統。如果您在 Windows 瀏覽器上下載 Web 應用程式的映像，只需將其複製並貼上到您的 Linux 作業系統中即可。  我們將在範例中使用的另一個非常重要的事情是 WSL2 虛擬路由。由於您的作業系統中現在有作業系統，因此它們有一種通訊方式。當您想要存取 Linux 作業系統的網路時（例如，當您想要存取在 Linux 中本機執行的 Web 應用程式時），您可以使用 *${PC-name}.local*。對我來說，由於我的電腦名稱是 Boris-PC，所以我的網路位址是 boris-pc.local。這樣你就不必記住不同的 IP 位址，這真的很酷。如果您出於某種原因需要您的位址，您可以前往 Linux 發行版的終端，然後輸入 ipconfig。然後，您可以看到您的 Windows IP 和 Linux 的 IP 位址。這樣，您就可以毫無摩擦地與兩個作業系統進行通訊。  我想強調的最後一件很酷的事情是 Linux GUI 應用程式。這是一項非常酷的功能，有助於使 WSL 對普通用戶更具吸引力。您可以使用流行的套件管理器（例如 apt（Ubuntu 上的預設值）或 flatpak）在 Linux 系統上安裝任何您想要的應用程式。然後，您也可以從命令列啟動它們，應用程式將啟動並在 Windows 作業系統中可見。但這可能會引起一些摩擦並且不方便用戶使用。此功能真正具有突破性的部分是，您可以直接從 Windows 作業系統啟動它們，甚至無需親自啟動 WSL。因此，您可以建立捷徑並將它們固定到「開始」功能表或任務欄，沒有任何摩擦，並且實際上不需要考慮您的應用程式來自哪裡。為了演示，我安裝了 Dolphin 檔案管理器並透過 Windows 作業系統執行它。您可以在下面看到它與 Windows 資源管理器並排的操作。  ## WSL 開發入門 在了解了 WSL 的所有酷炫功能後，讓我們慢慢回到教學的正軌。接下來是設定我們的開發環境並啟動我們的第一個應用程式。我將設定一個 Web 開發環境，我們將使用 [Wasp](https://wasp-lang.dev/) 作為範例。 如果你不熟悉的話，Wasp 是一個類似 Rails 的 React、Node.js 和 Prisma 框架。這是開發和部署全端 Web 應用程式的快速、簡單的方法。對於我們的教程，Wasp 是一個完美的候選者，因為它本身不支援 Windows 開發，而只能透過 WSL 來支持，因為它需要 Unix 環境。 讓我們先開始安裝 Node.js。目前，Wasp 要求使用者使用 Node v18（版本要求很快就會放寬），因此我們希望從 Node.js 和 NVM 的安裝開始。 但首先，讓我們先從 Node.js 開始。在 WSL 中，執行： ``` sudo apt install nodejs ``` 為了在您的 Linux 環境中安裝 Node。接下來是 NVM。我建議存取 https://github.com/nvm-sh/nvm 並從那裡獲取最新的安裝腳本。目前下載的是： ``` curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh) | bash ``` 之後，我們在系統中設定了 Node.js 和 NVM。 接下來是在我們的 Linux 環境中安裝 Wasp。 Wasp 安裝也非常簡單。因此，只需複製並貼上此命令： ``` curl -sSL [https://get.wasp-lang.dev/installer.sh](https://get.wasp-lang.dev/installer.sh) | sh ``` 並等待安裝程序完成它的事情。偉大的！但是，如果您從 0 開始進行 WSL 設置，您會注意到下面有以下警告：看起來“/home/boris/.local/bin”不在您的 PATH 上！您將無法透過終端名稱呼叫 wasp。  讓我們快速解決這個問題。為了做到這一點，讓我們執行 ``` code ~/.profile ``` 如果我們還沒有 VS Code，它會自動設定所需的一切並啟動，以便您可以將命令新增至檔案末端。每個人的系統名稱都會有所不同。例如我的是： ``` export PATH=$PATH:/home/boris/.local/bin ``` 偉大的！現在我們只需要將節點版本切換到 v18.14.2 即可確保與 Wasp 完全相容。我們將一次性安裝並切換到 Node 18！為此，只需執行： ``` nvm install v18.14.2 && nvm use v18.14.2 ``` 設定 Wasp 後，我們希望了解如何執行應用程式並從 VS Code 存取它。在幕後，您仍將使用 WSL 進行開發，但我們將能夠使用主機作業系統 (Windows) 中的 VS Code 來完成大多數事情。  首先，將 [WSL 擴充功能](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) 下載到 Windows 中的 VS Code。然後，讓我們啟動一個新的 Wasp 專案來看看它是如何運作的。開啟 VS Code 命令面板（ctrl + shift + P）並選擇「在 WSL 中開啟資料夾」選項。  我打開的資料夾是 ``` \\wsl.localhost\Ubuntu\home\boris\Projects ``` 這是我在 WSL 中的主資料夾中的「Projects」資料夾。我們可以透過兩種方式知道我們處於 WSL 中：頂部欄和 VS Code 的左下角。在這兩個地方，我們都編寫了 WSL: Ubuntu，如螢幕截圖所示。   進入該資料夾後，我將打開一個終端。它還將已經連接到 WSL 中的正確資料夾，因此我們可以開始工作了！讓我們執行 ``` wasp new ``` 命令建立一個新的 Wasp 應用程式。我選擇了基本模板，但您可以自由建立您選擇的專案，例如[SaaS 入門](https://github.com/wasp-lang/SaaS-Template-GPT) 具有 GPT、Stripe 等預先配置。如螢幕截圖所示，我們應該將專案的當前目錄變更為正確的目錄，然後用它來執行我們的專案。 ``` wasp start ```  就像這樣，我的 Windows 電腦上將打開一個新螢幕，顯示我的 Wasp 應用程式已開啟。涼爽的！我的位址仍然是預設的 localhost:3000，但它是從 WSL 執行的。恭喜，您已透過 WSL 成功啟動了您的第一個 Wasp 應用程式。這並不難，不是嗎？  對於我們的最後一個主題，我想重點介紹使用 WSL 的 Git 工作流程，因為它的設定相對輕鬆。您始終可以手動進行 git config 設置，但我為您提供了一些更酷的東西：在 Windows 和 WSL 之間共享憑證。要設定共享 Git 憑證，我們必須執行以下操作。在 Powershell（在 Windows 上）中，設定 Windows 上的憑證管理員。 ``` git config --global credential.helper wincred ``` 讓我們在 WSL 中做同樣的事情。 ``` git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager.exe" ``` 這使我們能夠共享 Git 使用者名稱和密碼。 Windows 中設定的任何內容都可以在 WSL 中運作（反之亦然），我們可以根據需要在 WSL 中使用 Git（透過 VS Code GUI 或透過 shell）。 ## 結論 透過我們在這裡的旅程，我們了解了 WSL 是什麼、它如何有助於增強 Windows PC 的工作流程，以及如何在其上設定初始開發環境。 Microsoft 在這個工具方面做得非常出色，並且確實使 Windows 作業系統成為所有開發人員更容易使用和可行的選擇。我們了解如何安裝啟動開發所需的開發工具以及如何掌握基本的開發工作流程。如果您想深入了解該主題，這裡有一些重要的連結： - [https://wasp-lang.dev/](https://wasp-lang.dev/) - [https://github.com/microsoft/WSL](https://github.com/microsoft/WSL) - [https://learn.microsoft.com/en-us/windows/wsl/install](https://learn.microsoft.com/en-us/windows/wsl/install) - [https://code.visualstudio.com/docs/remote/wsl](https://code.visualstudio.com/docs/remote/wsl) --- 原文出處：https://dev.to/wasp/supercharge-your-windows-development-the-ultimate-guide-to-wsl-195m
## 簡介 我收集了最好的 React 元件，您可以使用它來建立強大的 Web 應用程式。 每個都有自己的味道。 別忘了表達你的支持🌟 現在，讓我們仔細閱讀這段程式碼！ 🍽️  --- ## 1. [CopilotPortal](https://github.com/RecursivelyAI/CopilotKit)：將可操作的 GPT 聊天機器人嵌入您的網路應用程式中。  將 GPT 支援的聊天機器人插入您的 React 應用程式中。 可以將 RAG 與雲端和應用程式狀態即時整合。 需要幾行程式碼才能嵌入。 ``` import "@copilotkit/react-ui/styles.css"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; export default function App(): JSX.Element { return ( <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> <CopilotSidebarUIProvider> <YourContent /> </CopilotSidebarUIProvider> </CopilotProvider> ); } ``` https://github.com/RecursivelyAI/CopilotKit --- ## 2. [ClickVote](https://github.com/clickvote/clickvote) - 按讚、投票並查看任何上下文  輕鬆將點讚、按讚和評論加入到您的網路應用程式中。 用於加入這些元件的簡單反應程式碼。 ``` import { ClickVoteProvider } from '@clickvote/react'; import { ClickVoteComponent } from '@clickvote/react'; import { LikeStyle } from '@clickvote/react'; <ClickVoteProvider> <ClickVoteComponent id={CONTEXT} voteTo={ID}> {(props) => <LikeStyle {...props} />} </ClickVoteComponent> </ClickVoteProvider> ``` https://github.com/clickvote/clickvote --- ## 3. [React Flow](https://github.com/xyflow/xyflow) - 建立可拖曳工作流程的最佳方式！  專為建立基於節點的編輯器和互動式圖表而客製化的 React 元件。 它具有高度可自訂性，提供拖放功能以實現高效的工作流程建立。 ``` import ReactFlow, { MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, } from 'reactflow'; <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} > <MiniMap /> <Controls /> <Background /> </ReactFlow> ``` https://github.com/xyflow/xyflow --- ## 4. [CopilotTextarea](https://github.com/RecursivelyAI/CopilotKit/tree/main/CopilotKit/packages/react-textarea) - React 應用程式中的 AI 驅動寫作  具有 Github CopilotX 功能的任何 React `<textarea>` 的直接替代品。 自動完成、插入、編輯。 可以即時或由開發人員提前提供任何上下文。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; // Provide context... useMakeCopilotReadable(...) // in your component... <CopilotProvider> <CopilotTextarea/> </CopilotProvider>` ``` https://github.com/RecursivelyAI/CopilotKit --- ## 5. [Novu](https://github.com/novuhq/novu) - 將應用程式內通知新增至您的應用程式！  用於在一個地方管理所有通訊管道的簡單元件和 API：電子郵件、SMS、Direct 和 Push 您可以使用此 React 元件為您的應用程式新增應用程式內通知。 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, IMessage, } from "@novu/notification-center"; <NovuProvider subscriberId={"SUBSCRIBER_ID"} applicationIdentifier={"APPLICATION_IDENTIFIER"} > <PopoverNotificationCenter colorScheme="dark"> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> ``` https://github.com/novuhq/novu --- ## 6. [ReactIcons](https://github.com/react-icons/react-icons) - 最受歡迎的反應圖示集合  輕鬆將 Font Awesome、Material Design 等中的流行圖標加入到您的 React 應用程式中。 為開發人員提供簡單、廣泛的選擇。 ``` import { FaBeer } from "react-icons/fa"; function Question() { return ( <h3> Lets go for a <FaBeer />? </h3> ); } ``` https://github.com/react-icons/react-icons --- ## 7. [React-dropzone](https://github.com/react-dropzone/react-dropzone) - 新增 HTML5 拖放 UI。  用於實作 HTML5 拖放區域的簡單 React 鉤子，重點放在檔案互動。 它提供了一個易於使用的介面，用於向 React 應用程式加入檔案拖放功能。 ``` import React from 'react'; import {useDropzone} from 'react-dropzone'; const Basic = (props)=>{ const {acceptedFiles, getRootProps, getInputProps} = useDropzone(); const files = acceptedFiles.map(file => ( <li key={file.path}> {file.path} - {file.size} bytes </li> )); return ( <section className="container"> <div {...getRootProps({className: 'dropzone'})}> <input {...getInputProps()} /> <p>Drag 'n' drop some files here, or click to select files</p> </div> <aside> <h4>Files</h4> <ul>{files}</ul> </aside> </section> ); } export default Basic; ``` https://github.com/react-dropzone/react-dropzone --- ## 8. [React ChartJS 2](https://github.com/reactchartjs/react-chartjs-2) - 建立和整合各種圖表。  用於在 React 應用程式中繪製圖表的即插即用解決方案，類似於 Chart.js 功能。 啟用動態、互動式圖表。 適用於即時資料或預定義資料集。 ``` import React from 'react'; import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'; import { Doughnut } from 'react-chartjs-2'; ChartJS.register(ArcElement, Tooltip, Legend); const data = { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [ { label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', ], borderColor: [ 'rgba(255, 99, 132, 1)', ], borderWidth: 1, }, ], }; export default function ShowChart() { return <Doughnut data={data} />; } ``` https://github.com/reactchartjs/react-chartjs-2 ## 9. [Redux](https://github.com/reduxjs/redux) - 可預測的狀態容器庫  JavaScript 應用程式中 Redux 的無縫補充，提供可靠的狀態管理。 確保一致的應用程式行為。 便於輕鬆除錯和測試。 與各種庫整合。 https://github.com/reduxjs/redux --- ## 10. [Blueprint](https://github.com/palantir/blueprint) - Palantir 的密集 UI 庫  提供一組用於建立複雜且資料豐富的介面的元件和樣式。 設計和開發具有現代外觀和感覺的類似桌面的 Web 應用程式。 由 Palantir 開發 ``` import React from 'react'; import '@blueprintjs/core/lib/css/blueprint.css'; import { H3, H4, OL, Pre } from "@blueprintjs/core"; function App() { return ( <div style={{ display: 'block', width: 500, padding: 30 }}> <h4>ReactJS Blueprint HTML Elements Component</h4> Heading Component: <H4>H4 Size Heading</H4> <H3>H3 Size Heading</H3> <br></br> OrderList Component: <OL> <li>1st item</li> <li>2nd item</li> </OL> Pre Component: <Pre>Sample Pre</Pre> </div> ); } ``` https://github.com/palantir/blueprint --- ## 11. [Headless UI](https://github.com/tailwindlabs/headlessui) - 可存取的 Tailwind 整合 UI 元件。  在 React 和 Vue 應用程式中建立可存取的 UI 元件。 適用於即時資料或預定義資料集，使其成為現代 Web 開發專案的寶貴補充 ``` import React, { useState } from 'react'; import { Dialog } from '@headlessui/react'; function MyDialog() { let [isOpen, setIsOpen] = useState(true); return ( <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-50"> {/* The backdrop, rendered as a fixed sibling to the panel container */} <div className="fixed inset-0 bg-black/30" aria-hidden="true" /> {/* Full-screen container to center the panel */} <div className="fixed inset-0 flex w-screen items-center justify-center p-4"> {/* Your dialog content goes here */} </div> </Dialog> ); } ``` https://github.com/tailwindlabs/headlessui --- 保存這些元件，以便像朝聖者一樣專業地建造。 謝謝大家，節日快樂！ --- 原文出處：https://dev.to/copilotkit/reacts-giving-11-react-components-for-aspiring-pros-eck
# 簡介 在上一篇文章中，我討論了建立一個[GitHub stars 監視器](https://dev.to/triggerdotdev/take-nextjs-to-the-next-level-create-a-github-stars-monitor-130a)。 在這篇文章中，我想向您展示如何每天了解新星的資訊。 我們將學習： - 如何建立通用系統來建立和使用提供者。 - 如何使用提供者發送通知。 - 使用不同提供者的不同用例。  --- ## 你的後台工作平台🔌 [Trigger.dev](https://trigger.dev/) 是一個開源程式庫，可讓您使用 NextJS、Remix、Astro 等為您的應用程式建立和監控長時間執行的作業！ [](https://github.com/triggerdotdev/trigger.dev) 請幫我們一顆星🥹。 這將幫助我們建立更多這樣的文章💖 https://github.com/triggerdotdev/trigger.dev --- ## 讓我們來設定一下 🔥 我們將建立不同的提供者來通知我們何時有新的明星。我們將設定「電子郵件」、「簡訊」、「Slack」和「Discord」通知。 我們的目標是讓每個貢獻者都足夠簡單，以便在未來貢獻更多的提供者。 每個提供者都會有一組不同的參數，有些只有“API 金鑰”，有些則有電話號碼，具體取決於提供者。 為了驗證這些金鑰，讓我們安裝“zod”；它是一個很棒的庫，可以定義模式並根據模式檢查資料。 您可以透過執行以下命令開始： ``` npm install zod --save ``` 完成後，建立一個名為「providers」的新資料夾，然後在其中建立一個名為「register.provider.ts」的新檔案。 這是文件的程式碼： ``` import {Schema} from "zod"; export function registerProvider<T>( name: string, options: {active: boolean}, validation: Schema<T>, run: (libName: string, stars: number, values: T) => Promise<void> ) { // if not active, we can just pass an empty function, nothing will run if (!options.active) { return () => {}; } // will validate and remove unnecessary values (Security wise) const env = validation.parse(process.env); // return the function we will run at the end of the job return async (libName: string, stars: number) => { console.log(`Running provider ${name}`); await run(libName, stars, env as T); console.log(`Finished running provider ${name}`); } } ``` 程式碼不多，但可能有點複雜。 我們首先建立一個名為「registerProvider」的新函數。該函數獲得一個通用類型“T”，基本上是我們所需的環境變數。 然後我們還有 4 個參數： - 名稱 - 可以是「Twilio」、「Discord」、「Slack」或「Resend」中的任何一個。 - 選項 - 目前，一個參數是提供者是否處於活動狀態？ - 驗證 - 在這裡，我們在 .env 檔案中傳遞所需參數的「zod」模式。 - run - 實際上用於發送通知。請注意，傳入其中的參數是庫名稱、星星數量以及我們在「validation」中指定的環境變數 **然後我們就有了實際的功能：** 首先，我們檢查提供者是否處於活動狀態。如果沒有，我們發送一個空函數。 然後，我們驗證並提取我們在模式中指定的變數。如果變數缺少 `zod` 將發送錯誤並且不會讓應用程式執行。 最後，我們傳回一個函數，該函數會取得庫名稱和星星數量並觸發通知。 在我們的「providers」資料夾中，建立一個名為「providers.ts」的新文件，並在其中新增以下程式碼： ``` export const Providers = []; ``` 稍後，我們將在那裡加入所有提供者。 --- ## 修改 TriggerDev 作業 本文是上一篇關於建立 [GitHub stars 監視器](https://dev.to/triggerdotdev/take-nextjs-to-the-next-level-create-a-github-stars-monitor-130a)。 編輯檔案 `jobs/sync.stars.ts` 並將以下程式碼加入檔案底部： ``` const triggerNotification = client.defineJob({ id: "trigger-notification", name: "Trigger Notification", version: "0.0.1", trigger: invokeTrigger({ schema: z.object({ stars: z.number(), library: z.string(), providerNumber: z.number(), }) }), run: async (payload, io, ctx) => { await io.runTask("trigger-notification", async () => { return Providers[payload.providerNumber](payload.library, payload.stars); }); } }); ``` 此作業取得星星數量、圖書館名稱和提供者編號，並從先前定義的提供者觸發特定提供者的通知。 現在，我們繼續修改“getStars”，在函數末尾加入以下程式碼： ``` for (let i = 0; i < Providers.length; i++) { await triggerNotification.invoke(payload.name + '-' + i, { library: payload.name, stars: stargazers_count - payload.previousStarCount, providerNumber: i, }); } ``` 這將觸發每個圖書館的通知。 完整頁面程式碼： ``` import { cronTrigger, invokeTrigger } from "@trigger.dev/sdk"; import { client } from "@/trigger"; import { prisma } from "../../helper/prisma"; import axios from "axios"; import { z } from "zod"; import {Providers} from "@/providers/providers"; // Your first job // This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline. client.defineJob({ id: "sync-stars", name: "Sync Stars Daily", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: cronTrigger({ cron: "0 23 * * *", }), run: async (payload, io, ctx) => { const repos = await io.runTask("get-stars", async () => { // get all libraries and current amount of stars return await prisma.repository.groupBy({ by: ["name"], _sum: { stars: true, }, }); }); //loop through all repos and invoke the Job that gets the latest stars for (const repo of repos) { await getStars.invoke(repo.name, { name: repo.name, previousStarCount: repo?._sum?.stars || 0, }); } }, }); const getStars = client.defineJob({ id: "get-latest-stars", name: "Get latest stars", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: invokeTrigger({ schema: z.object({ name: z.string(), previousStarCount: z.number(), }), }), run: async (payload, io, ctx) => { const stargazers_count = await io.runTask("get-stars", async () => { const {data} = await axios.get(`https://api.github.com/repos/${payload.name}`, { headers: { authorization: `token ${process.env.TOKEN}`, }, }); return data.stargazers_count as number; }); await io.runTask("upsert-stars", async () => { await prisma.repository.upsert({ where: { name_day_month_year: { name: payload.name, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }, update: { stars: stargazers_count - payload.previousStarCount, }, create: { name: payload.name, stars: stargazers_count - payload.previousStarCount, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }); }); for (let i = 0; i < Providers.length; i++) { await triggerNotification.invoke(payload.name + '-' + i, { library: payload.name, stars: stargazers_count - payload.previousStarCount, providerNumber: i, }); } }, }); const triggerNotification = client.defineJob({ id: "trigger-notification", name: "Trigger Notification", version: "0.0.1", trigger: invokeTrigger({ schema: z.object({ stars: z.number(), library: z.string(), providerNumber: z.number(), }) }), run: async (payload, io, ctx) => { await io.runTask("trigger-notification", async () => { return Providers[payload.providerNumber](payload.library, payload.stars); }); } }); ``` 現在，有趣的部分🎉 讓我們繼續建立我們的提供者！ 首先建立一個名為「providers/lists」的新資料夾 --- ## 1. Discord  建立一個名為「discord.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; export const DiscordProvider = registerProvider( "discord", {active: true}, object({ DISCORD_WEBHOOK_URL: string(), }), async (libName, stars, values) => { await axios.post(values.DISCORD_WEBHOOK_URL, {content: `The library ${libName} has ${stars} new stars!`}); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 DiscordProvider 的新提供程序 - 我們將名稱設定為“discord” - 我們將其設定為活動狀態 - 我們指定需要一個名為「DISCORD_WEBHOOK_URL」的環境變數。 - 我們使用 Axios 的簡單 post 指令將資訊加入支票中。 若要取得“DISCORD_WEBHOOK_URL”： 1. 前往您的 Discord 伺服器 2. 點選其中一個頻道的“編輯” 3. 轉到“整合” 4. 點選“建立 Webhook” 5. 點選建立的 webhook，然後點選“複製 webhook URL” 在根專案上編輯“.env”檔案並加入 ``` SLACK_WEBHOOK_URL=<your copied url> ```  --- ## 2. Slack  建立一個名為「slack.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; export const SlackProvider = registerProvider( "slack", {active: true}, object({ SLACK_WEBHOOK_URL: string(), }), async (libName, stars, values) => { await axios.post(values.SLACK_WEBHOOK_URL, {text: `The library ${libName} has ${stars} new stars!`}); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 SlackProvider 的新提供者 - 我們將名稱設定為“slack” - 我們將其設定為活動狀態 - 我們指定需要一個名為「SLACK_WEBHOOK_URL」的環境變數。 - 我們使用 Axios 的簡單 post 指令將資訊加入支票中。 要取得“SLACK_WEBHOOK_URL”： 1. 使用下列 URL 建立新的 Slack 應用程式：https://api.slack.com/apps?new_app=1 2. 選擇第一個選項：“從頭開始” 3. 指定應用程式名稱（任意）以及您想要新增通知的 Slack 工作區。點擊“建立應用程式”。 4. 在“新增特性和功能”中，按一下“傳入掛鉤” 5. 在啟動傳入 Webhooks 中，將其變更為「開啟」。 6. 按一下「將新 Webhook 新增至工作區」。 7. 選擇您想要的頻道並點選「允許」。 8. 複製 Webhook URL。 在根專案上編輯“.env”檔案並加入 ``` SLACK_WEBHOOK_URL=<your copied url> ```  --- ## 3. 電子郵件  您可以使用不同類型的電子郵件提供者。例如，我們將使用**Resend**來傳送電子郵件。 為此，讓我們在我們的專案上安裝重新發送： ``` npm install resend --save ``` 建立一個名為「resend.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; import { Resend } from 'resend'; export const ResendProvider = registerProvider( "resend", {active: true}, object({ RESEND_API_KEY: string(), }), async (libName, stars, values) => { const resend = new Resend(values.RESEND_API_KEY); await resend.emails.send({ from: "Eric Allam <[email protected]>", to: ['[email protected]'], subject: 'New GitHub stars', html: `The library ${libName} has ${stars} new stars!`, }); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 ResendProvider 的新提供程序 - 我們將名稱設定為“重新發送” - 我們將其設定為活動狀態 - 我們指定需要一個名為「RESEND_API_KEY」的環境變數。 - 我們使用重新發送庫向自己發送一封包含新星數的電子郵件。 若要取得“RESEND_API_KEY”： 1. 建立一個新帳戶：https://resend.com 2. 前往「API 金鑰」或使用此 URL https://resend.com/api-keys 3. 按一下“+ 建立 API 金鑰”，新增金鑰名稱，選擇“傳送存取”並使用預設的“所有網域”。單擊新增。 4. 複製 API 金鑰。 在根專案上編輯“.env”檔案並加入 ``` RESEND_API_KEY=<your API key> ```  --- ## 4.簡訊  SMS 有點複雜，因為它們需要多個變數。 為此，我們在專案中安裝 Twilio： ``` npm install twilio --save ``` 建立一個名為「twilio.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; import client from 'twilio'; export const TwilioProvider = registerProvider( "twilio", {active: true}, object({ TWILIO_SID: string(), TWILIO_AUTH_TOKEN: string(), TWILIO_FROM_NUMBER: string(), TWILIO_TO_NUMBER: string(), }), async (libName, stars, values) => { const twilio = client(values.TWILIO_SID, values.TWILIO_AUTH_TOKEN); await twilio.messages.create({ body: `The library ${libName} has ${stars} new stars!`, from: values.TWILIO_FROM_NUMBER, to: values.TWILIO_TO_NUMBER, }); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 TwilioProvider 的新提供者 - 我們將名稱設定為“twilio” - 我們將其設定為活動狀態 - 我們指定需要環境變數：`TWILIO_SID`、`TWILIO_AUTH_TOKEN`、`TWILIO_FROM_NUMBER` 和 `TWILIO_TO_NUMBER` - 我們使用 Twilio「建立」功能發送簡訊。 取得“TWILIO_SID”、“TWILIO_AUTH_TOKEN”、“TWILIO_FROM_NUMBER”和“TWILIO_TO_NUMBER” 1. 在 https://twilio.com 建立一個新帳戶 2. 標記您要使用它來發送簡訊。 3. 點選“取得電話號碼” 4. 複製“帳戶 SID”、“身份驗證令牌”和“我的 Twilio 電話號碼” 在根專案上編輯“.env”檔案並加入 ``` TWILIO_SID=<your SID key> TWILIO_AUTH_TOKEN=<your AUTH TOKEN key> TWILIO_FROM_NUMBER=<your FROM number> TWILIO_TO_NUMBER=<your TO number> ```  --- ## 建立新的提供者 正如您所看到的，現在建立提供者非常容易。 您也可以使用開源社群來建立新的提供程序，因為他們只需要在「providers/list」目錄中建立一個新檔案。 最後要做的事情是編輯“providers.ts”檔案並加入所有提供程序。 ``` import {DiscordProvider} from "@/providers/list/discord.provider"; import {ResendProvider} from "@/providers/list/resend.provider"; import {SlackProvider} from "@/providers/list/slack.provider"; import {TwilioProvider} from "@/providers/list/twilio.provider"; export const Providers = [ DiscordProvider, ResendProvider, SlackProvider, TwilioProvider, ]; ``` 請隨意建立更多推播通知、網路推播通知、應用程式內通知等提供者。 你就完成了🥳 --- ## 讓我們聯絡吧！ 🔌 作為開源開發者，我們邀請您加入我們的[社群](https://discord.gg/nkqV9xBYWy)，以做出貢獻並與維護者互動。請隨時造訪我們的 [GitHub 儲存庫](https://github.com/triggerdotdev/trigger.dev)，貢獻並建立與 Trigger.dev 相關的問題。 本教學的源程式碼可在此處取得： [https://github.com/triggerdotdev/blog/tree/main/stars-monitor-notifications](https://github.com/triggerdotdev/blog/tree/main/stars-monitor-notifications) 感謝您的閱讀！ --- 原文出處：https://dev.to/triggerdotdev/top-4-ways-to-send-notifications-about-new-stars-1cgb
目前大環境不好，但作為開發人員，我們擁有一套獨特的技能，如果您知道在哪裡尋找，這些技能的需求量很大！ 這篇文章簡要概述了 50 個作為開發人員可以用來賺取額外收入的副業 --- ### 1. 銷售注意力 基於參與度的收入是指您將根據使用者在您的網站、個人資料或消費您的內容上花費的時間來獲得收入分成。它通常很小，至少對於較小的網站或創作者來說是這樣，但隨著時間的推移，它會增加，任何人都可以啟用它 - 所以你不會有任何損失。 - [Brave](https://creators.brave.com/) - 為使用 Brave 瀏覽器造訪您的網站、個人資料或查看您的內容的使用者付費。資金以 [BAT](https://basicattentiontoken.org/) 形式存入您的 Uphold 帳戶，然後可以以美元、英鎊或歐元形式提取至您的銀行帳戶 - [Flattr](https://flattr.com/) - 付費使用 Flattr 的用戶將其資金分配給用戶存取過其內容的創作者 > 幾年前，我親自報名了 Brave Rewards。在驗證了我的網域和個人資料的所有權後，我每月一直賺幾英鎊 - 到目前為止大約 200 英鎊以上（儘管我是 Firefox 用戶！）。雖然不多，但只需付出很少的努力，就值得了。 有關其工作原理的更多訊息，請查看 [webmonetization.org](https://webmonetization.org/) 規範，該規範利用了 [付款指針](https://paymentpointers.org/)通過[ILP](https://interledger.org/) 透過使用簡單的`<link rel="monetization" href="your-pointer-here" />` 標籤來串流來自支援WM 的訪客的收入。 --- ### 2. API 即服務 RapidAPI 等平台可讓您從 API 中[賺取被動收入](https://rapidapi.com/guides/earn-a-passive-venue-by-monetizing-apis-as-a-developer)。 建置並部署簡單的 API 後，您可以將其匯入 RapidAPI Hub，選擇使用和定價計劃，然後點擊發布。您的 API 可大可小，如您所願。 如果您正在為一個簡單的第一個專案尋找靈感，請考慮將開放資料集轉換為 API。對於初學者，RapidAPI 有一個關於如何入門的[影片系列](https://rapidapi.com/courses/build-and-sell-your-own-api)。其他想法可能包括將現有套件包裝為 API、向其他服務（如 OpenAI）加入功能或建置執行一些簡單計算的端點。 --- ### 3. 發放賞金 這些是開源專案的熱門功能請求。用戶可以在承諾一定金額的情況下提供“賞金”，然後將其支付給第一個完成並合併該功能的開發人員。 - [BOSS.dev](https://www.boss.dev/) - 完成功能請求和錯誤修復，獎金從 30 美元到 1000 美元不等。 --- ### 4. 贊助商 如果您在 GitHub 或其他平台上有業務，那麼啟用贊助是一種為您的工作帶來收入的有益方式。 不要忘記啟用贊助商按鈕。這適用於各種平台以及 GitHub 贊助商 - [GitHub Sponsors](https://github.com/sponsors) - 對於開發人員（無論規模大小）來說都是一個不錯的選擇。如果支持者已經在 GitHub 上，則零費用且進入門檻低 - [Patreon](https://www.patreon.com/) - 允許向您的支持者提供福利和獨家內容。如果您在 GitHub 以外的其他平台上有業務，這是一個不錯的選擇 - [LibrePay](https://liberapay.com/) - 針對那些建立開源內容的人 - [Open Collective](https://opencollective.com/) - 如果您正在為特定專案籌集資金，並使用收益來支持該專案（而不是個人），那麼這是一個不錯的選擇 - [Steday](https://steadyhq.com/en) - [TideLift](https://tidelift.com) - 更針對那些開發企業級開源專案的人，潛在收入更大，但僅限於最大的專案 - [LFX](https://lfx.linuxfoundation.org/) - 由 Linux 基金會提供 > 贊助（特別是GitHub 贊助商）是我個人最喜歡的方法之一，因為付費是可選的，所以你不會阻止那些無力承擔費用的人存取，而且那些支持你的人已經知道他們會預先得到什麼，所以您永遠不會讓客戶失望。 --- ### 5. 小費 您可能遇到過這樣的情況，您發現某個部落格文章、SO 答案、GitHub 儲存庫或論壇回應非常有幫助，以至於您希望可以為作者買一杯啤酒來表示感謝。 支援這些小額一次性付款的平台可以免費註冊，並且在您的個人資料中或在部落格文章末尾加入「提示」按鈕不會有任何損失。 - [Ko-fi](https://ko-fi.com/) - [請我喝杯咖啡](https://www.buymeacoffee.com/) - [Tipeee](https://en.tipeee.com/) - [PayPal Me](https://www.paypal.com/paypalme/) 提示：不要乞求。建立一些有用的內容，然後將提示連結放在底部。 --- ### 6. 企業贊助 許多具有一定下載量/經常性用戶的開源專案將開始被希望贊助創作者作品的公司接洽，以換取他們的公司徽標+連結包含在自述文件頂部附近。與個人贊助不同，這些贊助通常起價為 100-500 美元/月，專案使用量越大，贊助金額就越多。 --- ### 7. 黑客松 編碼競賽一直在遠端進行。這些通常由公司贊助，並向獲獎者支付現金獎勵。 - [程式碼之夏](https://summerofcode.withgoogle.com/) - 由 Google 執行，您將收到[貢獻者津貼](https://developers.google.com/open-source/gsoc/help/student-stipends) 成功接受後，金額從750 美元到6000 美元不等，金額取決於您所在的國家/地區和專案規模 - [CodeHeat](https://codeheat.org/) - 由 FOSS Asia 運營，每兩週 100 新元，外加較小的獎品 - [HackerEarth](https://www.hackerearth.com/challenges/hackathon/) - [Hackathon.com](https://www.hackathon.com/online) - [Devfolio 黑客松](https://devfolio.co/hackathons/upcoming) > 當我還是學生時，我[曾經參加過很多](https://alicia.omg.lol/hackathons) 黑客馬拉松（大部分是面對面的），並且經常能夠通過參加各種活動來資助我的暑假活動！這也是認識新朋友、學習新事物的好方法，而且非常有趣！ --- ### 8. 依賴套件的贊助 如果您有一個軟體包（例如 NPM 模組），那麼在您的設定檔中啟用贊助將允許您的程式碼的使用者在財務上做出貢獻。 - NPM 資金 - 您可能熟悉執行“npm 基金”，並查看您正在使用的正在尋求資金的軟體包清單。新增了 [npm 基金](https://docs.npmjs.com/cli/v6/commands/npm-fund)，以便更輕鬆地向專案所依賴的依賴項的維護者捐款。如果您維護 NPM 包，只需在 package.json 中包含「funding」字段，用戶將能夠更輕鬆地支援您。 - [StackAid](https://www.stackaid.us/) - 只需安裝 StackAid GitHub 應用程式並連結您的 Stripe 帳戶，直接或間接使用您專案的支持者捐贈的部分資金將分配給您每個月 - GitHub Sponsors - GitHub Sponsors 再次出現，因為它[讓用戶提供他們最常用的依賴項](https://github.com/sponsors/explore) - 儘管這是一個手動過程，而不是自動的。 --- ### 9. 回報問題 如果您注重安全性，或喜歡在應用程式中尋找錯誤和漏洞，那麼這款就適合您。最受歡迎的平台是[HackerOne](https://hackerone.com/opportunities/all/search?ordering=Highest+bounties)，每個負責任地披露的錯誤都可以在其中賺取20 到200,000 美元的收入。 許多其他網站也直接提供負責任的揭露政策，他們會獎勵您的工作。如果您對此感興趣，我在以下位置保留了 1000 多個賞金計劃的清單：[https://bug-bounties.as93.net](https://bug-bounties.as93.net) > 我個人透過這種方法取得了很大的成功，而且也很有趣 - 所以我強烈推薦它！ 其他值得查看的平台包括： - [HackerOne](https://www.hackerone.com/) - 排名第一的平台，最多的賞金以及良好的保護和支付率 - [Immunefi](https://immunefi.com/) - 專門針對 Web3 - [BugCrowd](https://www.bugcrowd.com/bug-bounty-list/) - [Intigriti](https://www.intigriti.com/) - [issuehunt](https://issuehunt.io/) --- ### 10.開放核心模型 這是您的大部分程式碼都是開源的，但某些擴充功能或附加元件（特別是針對企業客戶的擴充或附加元件）被授權為專有的。 因此，開發者可以在其他開源專案中自由使用該軟體。然而，公司必須為使用企業特定的模組或整合付費。 請記住，這通常說起來容易做起來難。您需要能夠分離專有功能，而大公司通常會採取一切措施（包括違反許可限制）來避免付費。 --- ### 11. 付費升級套件 這些服務可以輕鬆為常見註冊管理機構提供高級/付費方案。例如，如果您希望分發 NPM 模組的高級版本，或對特定軟體包功能收費，這可能是個不錯的選擇。 - [PrivJS](https://www.privjs.com/) - 分發 Node 套件的進階版本 - [CodeShip](https://codecodeship.com/) - 私人註冊中心，用戶需要付費才能使用你的包 --- ### 12.贊助支持 在開源專案中加入專業支援計劃選項使客戶能夠支付一次性或持續的幫助和支援費用，以啟動和執行。 這可以透過您自己的系統啟用，也可以使用現有的贊助平台（例如Patreon 和GitHub Sponsors），或使用專門的服務（例如[Otechie](https://otechie.com/)）來啟用，該服務加入了付費功能+ 支援通過嵌入的聊天對話框。 [Calendly](https://calendly.com/) 等工具可以讓客戶將時間放入日曆中，或者對於較大的專案，投資專用的客戶支援平台，例如[HelpScout](https://www.helpscout.com/) 可能會讓這件事變得更容易。 --- ### 13. 寫文件 - [撰寫文件](https://www.writethedocs.org/) 是所有文件的首選位置。 - [文件季節](https://developers.google.com/season-of-docs) - 在 Google 的支持下，每年都有技術作家為開源專案做出貢獻。參與專案將獲得 5,000 至 15,000 美元的贈款，然後通常透過 Open Collective 分發給貢獻者。 - 如果你環顧四周，你會發現還有很多產品正在尋找技術作家。 Julia 列出了一份[好名單](https://dev.to/juliafmorgado/get-paid-to-write-technical-articles-16cl)，列出了願意付費讓你撰寫技術內容的公司 - 版權也屬於這一類。 [scripted](https://www.scripted.com/) 等服務可讓您透過校對或編輯其他文字內容來賺錢。 即使只是記錄您自己的和其他開發人員的儲存庫也是一個不錯的起點。 如果專案被記錄下來，它的價值就會大幅增加。如果沒有文件，潛在使用者、客戶或開發人員將不知道它的用途、如何使用它、如何在其基礎上建立或如何做出貢獻。 > 我可能是唯一的一個，但我個人喜歡寫文件。 [我的所有專案](https://github.com/Lissy93?tab=repositories) 包括完整的使用、開發和貢獻文件。這促進了它們的成功和採用。我覺得如果你不花一點時間向人們展示如何使用它，那麼花幾個小時建立一些很棒的東西是沒有意義的。 --- ### 14. 廣告 在你跳過這一點之前——我也討厭廣告。它們很煩人，並且經常涉及某種形式的跟踪，從而損害用戶的隱私。但是，對於開源專案，還有一些其他選項沒有這些缺點。 - [Ethical Ads](https://www.ethicalads.io/) - [Carbon Ads](https://www.carbonads.net/open-source) 如果您正在維護獲得穩定流量的 GitHub 儲存庫、網站、部落格或服務，那麼這是一個不錯的選擇。通常每月至少需要約 10,000 個用戶，但如果您每月獲得 50,000 以上的用戶，您將獲得更好的回報。 --- ### 15. 出售你的程式碼 > 我個人不同意這種方法，只是因為出售的許多程式碼都是開源軟體的糟糕的重新設計版本，並且並不總是給予原始作者適當的榮譽。也就是說，一些開發商確實設法讓它發揮作用，建造簡單的專案然後將其出售。 - [IndieMaker](https://indiemaker.co/) - 出售您的整個專案 - [PieceX](https://www.piecex.com/) - 出售現成的原始碼 - [Codester](https://www.codester.com/info/seller) - 針對 PHP 和 Wordpress --- ### 16.銷售內容 當您查看開發人員的副業時，這是一個常見的建議。但有充分的理由 - 如果您能夠建立高品質的內容，您可以賺到很多錢。特別是如果您對新興領域有深入的了解。 銷售內容的熱門網站包括： - [GumRoad](https://gumroad.com/) - 程式碼、課程、貼文、藝術、設計、媒體（10% 費用） - [AppSumo](https://sell.appsumo.com/) - 程式碼、應用程式、擴充功能、課程、範本等 --- ### 17.寫作 這是一套獨特的技能。要么您非常擅長編寫引人入勝的內容，要么您對特定的熱門領域有深入的了解。否則，如果您對此感興趣，請考慮電子書出版，如果您的書不成功，也不會造成任何損失。 - [LeanPub](https://leanpub.com/) - 一個自助出版技術/開發電子書和課程的平台，具有豐厚的收入模式（您可以保留 70%） - [Amazon KDP](https://kdp.amazon.com/en_US/) - 發佈至 Amazon Kindle，並立即向全球數百萬用戶提供（亞馬遜將收取至少 30% 的佣金，可能會更多）小出版商） - [SmashWords](https://www.smashwords.com/) 和 [Draft2Digital](https://draft2digital.com/sw/) - 分發給全球其他電子書賣家，這是一種簡單的開始出版。他們收取的佣金比亞馬遜少，但比 LeanPub 多。 --- ### 18.補助金 補助金和企業贊助涉及多個領域，包括開源、創新、DeFi、人工智慧等。它們通常是為了幫助您在從事特定工作時支付短期生活費用。 - [GitHub Sponsors](https://github.com/sponsors) - 為個人和組織提供經濟支援開源開發者的平台。金額依贊助情況而有所不同。 - [Google Summer of Code (GSoC)](https://summerofcode.withgoogle.com/) - 學生開發者為開源專案做出貢獻的全球計劃，津貼通常為 1500 美元到 3300 美元不等。 - [Mozilla 開源支援 (MOSS)](https://www.mozilla.org/en-US/moss/) - 為開源軟體開發提供資助，特別是與 Mozilla 使命相符的專案。 - [Linux 基金會資助](https://www.linuxfoundation.org/) - 為從事 Linux 基金會專案的開發人員提供各種資助和獎學金。 - [NumFOCUS 小額發展補助金](https://numfocus.org/programs/small-development-grants) - 支援資料科學和科學計算的小型專案。資助金額各不相同（所有申請人均分配 285,000 美元）。 - [Apache 軟體基金會贊助](https://www.apache.org/foundation/sponsorship.html) - 對 Apache 軟體專案的財務支持，重點關注 Apache 軟體生態系統。 - [Outreachy](https://www.outreachy.org/) - 為技術領域代表性不足的群體提供為期三個月的實習機會，津貼通常約為 5,500 美元。 - [奈特基金會](https://knightfoundation.org/grants/) - 為促進優質新聞業的技術專案提供資助。根據專案範圍的不同，贈款金額差異很大。 - [原型基金](https://prototypefund.de/) - 在六個月內提供高達 47,500 歐元的開源原型支持，重點支持德國的軟體開發人員。 - [斯隆基金會](https://sloan.org/programs/digital-technology) - 為開放科學社群計畫提供資助，特別是那些增強研究中的開源軟體的計畫。 - [Chan Zuckerberg Initiative 開源軟體專案](https://chanzuckerberg.com/rfa/) - 專注於支援對生物醫學研究至關重要的開源軟體。資助金額各不相同。 - [Raspberry Pi 基金會](https://www.raspberrypi.org/grants/) - 為涉及 Raspberry Pi 和計算教育的教育計畫提供補助。 - [GitCoin](https://gitcoin.co/) - 一個為開源專案提供資金的眾籌平台，特別是在以太坊和 Web3 領域。資金根據社區支持而有所不同。 - [NLnet 基金會](https://nlnet.nl/foundation/) - 支援網路科技與網路研究計畫。補助金額各不相同。 - [開放技術基金](https://www.opentech.fund/) - 支持開發促進人權和開放社會的開放技術的專案。資金各不相同。 --- ### 19. 舉辦活動 活動空間是一個利潤豐厚的行業，尤其是如果您能夠舉辦一場精彩的活動並為自己贏得大型贊助商的話。雖然不適合所有人，但舉辦活動可以帶來以下 10 個潛在收入來源： - **門票銷售**：透過收取入場費來產生收入。使用 [Eventbrite](https://www.eventbrite.co.uk/)、[Meetup](https://meetup.com/) 或 [Ticketmaster](https://ticketmaster.com) 等平台取得門票管理。 - **贊助**：確保科技公司的財務捐助，以換取活動中的促銷機會。 - **研討會和培訓課程**：提供特定技術或程式語言的專業實務學習經驗，收取額外費用。 - **虛擬活動**：使用[Zoom](https://zoom.us/)、[WebEx](https://www.webex.com/) 或 [Hopin](https://hopin.com/)。 - **黑客馬拉松**：舉辦收取報名費的程式設計競賽，或尋找贊助商來支付費用並提供獎金。 - **社交活動**：針對技術專業人士的社交活動收費，可能會吸引招聘公司的贊助。 - **演講活動**：利用您在特定技術領域的專業知識，組織並負責演講活動或小組討論。 - **企業培訓及靜修**：為企業內部培訓或團隊建立活動提供活動組織服務。 - **聯盟行銷**：在活動期間利用科技產品或服務的聯盟行銷來獲取額外收入。 - **產品發布**：與科技公司合作舉辦產品發布活動，為您提供收費的組織服務。 --- ### 20.研究 您的意見很有價值，尤其是作為開發人員。有些研究人員會付錢給你參加他們的研究、調查或智庫。通常，好的研究機會很少而且相距甚遠，或者報酬相當低。 這類工作的熱門平台包括：[Testable Minds](https://minds.testable.org/)、[Respondent](https://app.respondent.io/signup) --- ### 21. 建立課程 - [Skillshare](https://www.skillshare.com/teach) - 根據課程觀看分鐘數提供付款以及推薦獎金。 - [Coursera](https://www.coursera.org/for-universities) - 與機構合作提供課程；付款通常基於收入分享協議。 - [LinkedIn Learning](https://www.linkedin.com/learning/instructors) - 講師可以為專業人士建立課程；薪酬詳細資訊由 LinkedIn 安排。 - [Thinkific](https://www.thinkific.com/) - 提供建立、行銷和銷售線上課程的工具，具有各種定價計劃，包括免費選項。 - [Kajabi](https://kajabi.com/) - 線上課程、行銷、支付和網站建立的一體化平台。 - [Podia](https://www.podia.com/) - 提供一個用於舉辦課程、網路研討會和數位下載的平台，並直接向觀眾銷售。 - [Pluralsight](https://www.pluralsight.com/teach) - 專注於科技與創意課程；根據課程的受歡迎程度向教師支付版稅。 - [MasterClass](https://www.masterclass.com/teach) - 高品質、名人主導的課程；講師通常是各自領域的知名專家或名人。 - [uTeach](https://ueach.io/) - [NewLine](https://www.newline.co/) --- ### 22.時事通訊 隨著流行的社群媒體管道變得更加集中和受控，電子郵件通訊和基於訂閱的 RSS 來源正在慢慢捲土重來。 這種模式的工作方式要么是提供對技術主題或新聞的有價值的見解，並建立一個龐大的（因此有價值的）訂閱者基礎，要么是向少數用戶收取更新費用。 提供此功能的流行平台包括： - [子堆疊](https://substack.com) - [ButtonDown](https://buttondown.email/) - [ConvertKit](https://convertkit.com/) - [穩定](https://steadyhq.com) - [幽靈](https://ghost.org/) --- ### 23. 僅限會員的網站 - [MemberSpace](https://www.memberspace.com/) - 讓您能夠為網站的某些部分付費，僅供會員使用 - [Patreon](https://www.patreon.com/) - 因設定具有獨家內容和福利的會員等級而廣受歡迎。 - [Substack](https://substack.com/) - 新聞通訊的理想選擇；提供付費訂閱獨家內容的能力。 - [Ghost](https://ghost.org/) - 內建會員和訂閱功能的專業發布平台。 - [Podia](https://www.podia.com/) - 允許銷售會員資格、線上課程和數位下載。 - WordPress 與 [MemberPress 外掛程式](https://memberpress.com/) - 供 WP 使用者建立會員網站的外掛程式。 - [Wild Apricot](https://www.wildapricot.com/) - 與您的網站整合的會員管理軟體。 - [Kajabi](https://kajabi.com/) - 提供用於建立線上課程、會員網站等的工具，重點是行銷。 - [Mighty Networks](https://www.mightynetworks.com/) - 建立一個包含會員資格、訂閱和課程的社群。 --- ### 24. VIP 貼文 還有許多公司會為您在其平台上分享的優質貼文付費。這既可以提高您的知名度（幫助您擴大人脈並獲得未來的工作），也可以帶來一些短期收入。 如果您正在努力獲得這些計劃的錄取，請先編寫自己的帖子並將其發佈到流行的基於開發的社交網絡（例如 DEV.to！）。這將增強您的寫作技巧，並幫助您向潛在公司展示您的知識。 例如，以下網站將為高品質的訪客貼文付費： - [Linode](https://www.linode.com/lp/write-for-linode/) - [日誌火箭](https://blog.logrocket.com/become-a-logrocket-guest-author/) - [Smashing 雜誌](https://www.smashingmagazine.com/contact/?Becoming%20an%20Author/Reviewer%20(自動回覆)) - [Auth0](https://auth0.com/apollo-program) - [CSS 技巧](https://css-tricks.com/guest-writing-for-css-tricks/) - [DelftStack](https://www.delftstack.com/write-for-us/) - [DigitalOcean](https://www.digitalocean.com/community/pages/write-for-digitalocean) - [Infatica](https://infatica.io/contribute/) - [蜜罐](https://blog.honeypot.io/write-for-honeypot/) - [進階編碼](https://premiumcoding.com/write-for-us-premiumcoding/) - [反思](https://reflectoring.io/contribute/become-an-author/) - [Strapi](https://strapi.io/write-for-the-community) - [Android 權威](https://www.authoritymedia.com/jobs) - [SitePoint](https://www.sitepoint.com/write-for-us/) - [TutorialsPoint](https://www.tutorialspoint.com/about/tutorials_writing.htm) - [真正的Python](https://realpython.com/jobs/tutorial-writer/) - [Dart Creations](https://www.dart-creations.com/about-us/write-for-us.html) Dmytro Spilka 編制了一份包含 300 多個[接受訪客貼文的網站](https://solvid.co.uk/180-websites-that-accept-guest-posts/) 的清單。另一個很棒的清單[由 Julia 在 Dev.to 上整理](https://dev.to/juliafmorgado/get-paid-to-write-technical-articles-16cl)。 --- ### 25. 諮詢 您可能沒有意識到，您從日常工作中累積的技能和經驗對許多公司來說可能非常有價值。尤其是尚無法聘請全職專家的新創公司和小型企業。對能夠提供最新趨勢、工具和最佳實踐見解的專業人士的需求非常高。 尖端： - 以適當的速度開始的最佳方式是透過網路和口碑。但如果做不到這一點，總有自由工作網站可以幫助您累積經驗。 - 記錄你所獲得的經驗，或在你工作的過程中建立一個投資組合，因為這將幫助你在未來獲得更好的工作。 - 在開始任何專案之前，請先明確您的空閒時間、條款、日薪和工作範圍。 - 切勿拒絕潛在的聯絡人。您會驚訝地發現，即使多年後，誰可能會重新與您聯繫並尋求諮詢支援。 --- ### 26. 指導 無論您的級別如何，您作為開發人員的經驗都可以真正幫助經驗不足的其他人。指導是一種非常有益的方式，可以幫助他人，同時也能帶來一些額外的收入。 - [MentorCruise](https://mentorcruise.com/) - 主要是長期的，按月付費，非常適合建立專業關係（每個學員每月賺取 50-500 美元） - [CodeMentor](https://www.codementor.io/) - 更適合短期，按小時收費，非常適合解決特定問題（每小時賺取 60-300 美元） --- ### 27.輔導 隨著 CompSci 現在成為國家課程的一部分（至少在英國和大部分歐洲），大量學生（11 歲至 18 歲以上）正在尋找導師來幫助他們獲得編碼技能並準備考試。收入範圍為每小時 15 美元到 150 美元以上，具體取決於級別、經驗和背景。 - [Super Prof](https://www.superprof.co.uk/) - 列出您的全球服務（30-300 美元/小時） - [The Profs](https://www.theprofs.co.uk/become-a-private-tutor/) - 經過驗證的導師（收入未知） - [我的導師](https://www.mytutor.co.uk/) - 僅限英國，（22-55 英鎊/小時） - [Tutor.com](https://www.tutor.com/) - 美國高中學費（$75-$100/小時） --- ### 28.社群媒體 市場存在巨大空白，等待主流社群媒體平台上真正優秀的、注重發展的影響者來填補。 許多社群媒體平台允許您透過內容貨幣化，您通常會按觀看次數付費，金額根據內容類別、地區和聲譽而有所不同。但請注意，您通常必須擁有一定數量的追蹤者才有資格，而且您還將受到「演算法」的支配。 - YouTube - 每年至少需要 1,000 訂閱者 + 4,000 小時觀看時間 - X - 需要 Twitter Blue 訂閱，無最低追蹤人數 - TikTok - 需要至少 10k 追蹤者 + 100k 瀏覽量/月 - Instagram - 需要至少 10k 追蹤者 - Snap - 1,000 名追蹤者，1,000 次瀏覽/月，10 多個每月貼文 - Facebook - 10k 追蹤者或 600k 影片觀看分鐘 - Twitch - 350 位每月付費訂閱者 --- ### 29.品牌優惠 繼上面的社群媒體部分之後，一旦您成功突破了數百名訂閱者，您可能還可以開始考慮品牌交易，這有助於帶來額外收入。同樣，這些需要您的受眾達到一定程度的參與度，您可能還需要同意提供贊助的公司的條款。 --- ### 30.串流媒體 開發串流是一個快速成長的利基市場，不要指望立即[加入排行榜](https://twitch.pages.dev/)，但它可能是一個很好的起點，特別是如果您已經有串流媒體經驗（例如影片遊戲）。 Nick Taylor 寫了一篇關於 [開發串流媒體入門的精彩文章](https://dev.to/nickytonline/getting-started-with-streaming-on-twitch-4im7)。 --- ### 31.SaaS 如果您能夠做到這一點，那麼它就是開源專案的最佳收入模式之一。您的程式碼仍然是 100% 免費和開源的，用戶仍然可以免費下載和自行託管它，但您還提供付費/託管計劃，您可以在其中託管應用程式並負責小型伺服器的所有伺服器管理經常性費用。 此模型符合開源精神，同時也使您的應用程式可供更廣泛的用戶使用。 [Stripe](https://stripe.com/docs/payments) 等服務讓您的應用程式接受付款和新增訂閱功能變得非常簡單。 --- ### 32.微型 SaaS 如果從頭開始建立一個生產就緒的應用程式聽起來像是一項艱鉅的任務（因為它確實如此！），那麼另一種方法就是 Micro-SaaS 應用程式。這些是較小的應用程式，它們執行一項非常具體的任務，例如： - 自動執行重複和/或乏味的任務。 - 執行目前手動計算的計算。 - 連接不同的系統。 - 取代 Excel 電子表格解決方法。 - 填補宿主生態系中缺失功能的空白 - 加強報告 --- ### 33. 寫外掛 與 SaaS 應用程式不同，一旦建置並發布了擴展，通常不需要太多的持續管理。您也可能會發現，如果您的專案為已經完善的網站加入功能，那麼您的專案會更容易快速獲得關注。 儘管網路擴展似乎是一個過時的或完全飽和的市場，但仍然有很多可以做的事情，而且這些對於新開發人員來說都是很棒的專案。 以下是一些可以幫助您入門的想法： - [WA Web Plus](https://chrome.google.com/webstore/detail/wa-web-plus-by-elbruz-tec/ekcgkejcjdcmonfpmnljobemcbpnkamh) 已下載 200 萬次（22k 評級），收費 12 美元/每個用戶的月。為什麼不為 Telegram、Threema、Wire、Messenger 等建立類似的東西呢？ - Runkeeper擁有4500萬用戶，但UI在資料顯示方式方面有所欠缺。為什麼不建立一個擴充功能來加入更好的報告、過濾以及與相關外部資料的組合？ （與 [Elevate for Strava](https://chrome.google.com/webstore/detail/elevate-for-strava/dhiaggccakkgdfcadnklkbljcgicpckn) 類似，但適用於 RunKeeper） - 選擇一個提供基本服務但 UI 過於不切實際的網站（也許是 Microsoft Azure？），然後建立一個擴充功能以簡化導覽、顯示關鍵指標或提供不那麼難看的使用者體驗 - 使用人工智慧增強任何現有網站。這比聽起來容易得多，您的擴充功能可以利用 OpenAI 的 API 等服務來總結網頁，或重新措辭選定的內容（用於複製/貼上到作業中！？） - 如果您知道某個網站的使用者數量很高，但 UI 很糟糕，那麼一個簡單的擴充想法可以是應用 CSS 覆蓋來重新設計它的樣式。例如亞馬遜、雅虎、Instagram 都是高流量網站，設計改善空間巨大（深色模式？！） - 即使是簡單的獨立擴展應用程式也可能具有很大的潛力。就像番茄計時器、貨幣轉換器、IP 位址小部件或只是一個網路應用程式快捷方式。 --- ### 34. 發布應用程式 建立簡單的應用程式或遊戲，並將其在平台應用程式商店上提供，使您能夠透過簡單的盈利模型來瞄準數百萬客戶。所有主流應用程式商店 - Google Play、Apple App Store、Windows Store、Steam 等都提供對付費應用程式、進階功能和應用程式內購買的支援。 請記住，在發布第一個應用程式之前通常需要支付安裝費，應用程式商店也會從您的收入中抽取一部分，並且小型創作者獲得單次或雙次下載的情況並不罕見。人物。 --- ### 35. 為小型企業開發網站 許多小型企業都專注於自己的業務，沒有時間或專業知識建立自己的網站。作為開發人員，這是我們能夠很快完成的事情，如果您也託管他們的網站，您將能夠收取定期付款。 一旦您開始進行網頁設計和開發，並為一些客戶提供服務，您就會發現透過口碑和展示您的作品集來找到未來的工作要容易得多。 為了在這方面取得成功，您可能還需要設計、溝通和銷售方面的技能。 --- ### 36. 兜售網域 隨著新 TLD 的湧入，域名經銷商市場正在迎來第二波受歡迎。域名翻轉涉及註冊未來可能有價值的域名，然後將其轉售給想要將該名稱用於企業或專案的買家。 雖然這可能有利可圖，但它確實涉及高風險，並且需要對市場有充分的了解。 尖端： - 研究簡短或令人難忘的域名，或者可能具有較高關鍵字潛力的域名（您可以使用諸如使用 Google 關鍵字規劃師等工具來幫助進行這項研究） - 停放您目前未使用的域名，以便您同時獲得一些廣告收入 - 查看最近過期的域名，特別是那些正在使用的域名，因為這些域名可能會收到流量 - 接收流量的網域更有價值。因此，請考慮在您持有網域時為其建立網站、應用程式或登入頁面 --- ### 37. 使用者測試 開發應用程式的公司通常需要獲得用戶的回饋。這就是用戶測試服務的用武之地。您花 10-30 分鐘嘗試給定的網站或應用程式，然後提供反饋或填寫調查，並獲得報酬！ 儘管並非特定於開發人員，但憑藉您的技術背景，您會發現自己具有獨特的優勢，可以快速完成這些工作並提供良好的反饋，從而使您比普通用戶更快地賺錢。您還將獲得有關用戶測試流程如何運作的寶貴見解，這可能對您在自己的應用程式上進行委託測試時有用。 - [嘗試我的 UI](https://www.trymyui.com/) - 每個網站或應用程式測試平均費用為 10 美元 - [Userlytics](https://www.userlytics.com/user-experience-research/paid-ux-testing/) - 根據測試的複雜程度和長度，賺取 5 至 50 美元之間 - [使用者測試](https://www.usertesting.com/get-paid-to-test) - 透過 PayPal 付款，在測試會話期間需要螢幕共用和/或網路攝影機存取。每次測試賺取約 10 美元，較長時間或現場會議的某些測試最高可支付 50 美元 - [TestingTime](https://www.testingtime.com/en/become-a-paid-testuser/) - 面對面或視訊通話測試的選項。不太定期，但測試時間更長。當您考慮到會話之間的延遲時，報酬比其他選擇更低 - [IntelliZoom](https://www.intellizoom.com/) - 每 10 分鐘學習可賺取 2 至 10 美元。透過 PayPal 付款，延遲 3-5 天 --- ### 38.微任務 與開發人員的具體關係不大，但如果您來自技術背景，您可能會發現這些工作比那些沒有開發技能的工作更有利可圖。 - [Amazon Mechanical Turk](https://www.mturk.com/) - 外包虛擬微任務的眾包市場 - [Sequence Works](https://sequence.work/contributors/) - 影像標註、資料標記與分類 - [App Jobber](https://en.appjobber.com/) - 市場調查，去商店拍攝特定植入式廣告的照片 - [GigWalk](https://www.gigwalk.com/gigwalkers/) - 應用程式為基礎的行動微任務 - 請造訪 [GigWorker.com](https://gigworker.com/) 以了解更多微任務和零工工作 --- ### 39. 調查 儘管對具有某些技能（如軟體工程）的參與者的需求較高，但調查的報酬往往很低，因此可以賺更多一點。即便如此，除非您有大量時間，或使用比美元弱得多的貨幣，否則這可能不是一個好的選擇。 這些通常涉及測試新產品或服務，並提供回饋 - 或回答問題以協助市場研究活動。 有很多不同的基於調查的公司，所以我不會全部連結到它們。但 [Swagbucks](https://www.swagbucks.com/)、[20Cogs](https://20cogs.co.uk/)、[TestingTime](https://www.testingtime.com/en/become-a-paid-testuser) 是一些著名的。 --- ### 40.去中心化節點 這可能不適合所有人，因為收益通常以加密貨幣形式支付，而加密貨幣的波動性非常大。但是，您可以自願為許多 Web3 專案執行節點（通常在 Rasperry Pi、雲端伺服器或備用筆記型電腦上），這將為您支付正常執行時間、頻寬、磁碟空間、運算、IP/代理或其他一些費用。計算資源。 作為開發人員，管理基礎設施是我們所擅長的，因此，如果您有任何閒置資源，您也許可以將它們投入使用，並在睡覺時賺取一些額外的現金。 - [Storj](https://www.storj.io/node)：執行Storj節點，用於去中心化雲端運算 - [Network3](https://network3.io/)：用於訓練和驗證模型的 AIoT 第 2 層 - [Flux](https://runonflux.io/)：去中心化基礎設施 - [Mysterium](https://mystnodes.com/): P2P VPN 節點 - [Koii](https://www.koii.network/node): 分散式雲 - [Helium](https://www.helium.com/mine)：提供遠端物聯網設備無線連接 - [Filecoin](https://filecoin.io/)：它是一個去中心化儲存網絡，將雲端儲存轉變為演算法市場。用戶可以出租閒置的儲存空間並賺取 Filecoin 代幣。 - [Sia Network](https://sia.tech/host)：這是一個由區塊鏈技術所保障的去中心化儲存平台。 Sia 透過去中心化網路儲存和加密您的檔案。您可以透過出租未使用的硬碟空間來賺取 Siacoins。 - [Crust Network](https://wiki.crust.network/docs/en/nodeOverview)：與 Filecoin、Sia 類似，Crust 支援 IPFS 等多種儲存層協議，並為應用層提供儲存介面。 - [Arweave](https://www.arweave.org/)：一個基於區塊鏈的平台，以永久和去中心化的方式提供資料儲存。透過託管資料，用戶可以獲得 Arweave 代幣獎勵。 - [BitTorrent](https://docs.btfs.io/v2.0/docs/install-run-btfs20-node)：該平台標記了世界上最大的文件共享協議，使用戶能夠通過在網路上。 - [HOLO](https://holo.host/)：Holochain 應用程式 (hApps) 的點對點託管平台。在電腦上託管 hApp 的用戶將獲得 HOT 代幣獎勵。 --- ### 41.其他 Web3 方法 加密產業還有許多其他賺取被動收入的方式，從PoS 質押、持有生息數位資產、借貸、流動性挖礦、雲端挖礦、賺取股息的代幣、流動性挖礦、交易、本地/ PoW 思維、NFT 等等。很少。 我不會在這裡連結到任何具體細節，因為這是一個風險非常高的行業，因此您自己進行研究很重要。但作為技術專家，我們能夠理解任何給定協議或 Web3 資產背後的基本概念，並確定其可行性。 我的建議是閱讀白皮書，如果你不能立即理解它，那就遠離它！這是狂野的西部，所以除非一個專案的基本面是堅實的，否則你應該做好失去投資的任何資金的準備。 --- ### 42. 聯盟行銷 聯盟行銷對於那些剛開始的人來說是眾所周知的無利可圖，但我將其包含在此處是因為作為開發人員，有一定的空間來自動化許多過程。此外，您行銷的服務越細分，支付的佣金通常就越高。因此，如果您融入了技術社區，您可能處於銷售小批量高回報服務的有利位置。 同樣，如果您已經有了追蹤者（社交、部落格、YouTube 頻道...），那麼聯盟行銷可能更有意義，因為如果您獲得了大量點擊。 值得注意的是，您可能不應該在未透露它是附屬連結的情況下共享附屬連結。並儘量避免宣傳您自己沒有使用過或不會推薦給朋友的產品。 > 作為範例，[此處](https://notes.aliciasykes.com/p/3Ia4JzPw43) 是我使用過且擁有附屬帳戶的一些服務。我從未從其中任何一個身上賺過任何有意義的錢。 --- ### 43.經銷商 這涉及建立一個應用程式來包裝現有服務，同時加入 USP - 技術、客戶支援、UI 或其他功能。如果您有行銷或銷售背景，這可能適合您。如果您想加入功能或使流程自動化，那麼將需要大量的前期工作，但您將能夠更好地獲得收入。 您可以在大多數主要行業中找到提供經銷商計劃的服務提供者。 一些例子包括： - [Supermetrics](https://supermetrics.com/)：行銷報告、分析、資料整合、20% 經常性佣金。 - [Keap](https://keap.com/)：CRM、銷售與行銷自動化、20-30% 經常性佣金。 - [Klaviyo](https://www.klaviyo.com/)：電子郵件與簡訊行銷，5–15% 一次性付款，10–20% 收入分成。 - [Drift](https://www.drift.com/)：即時聊天軟體，20%收益分成。 - [ActiveCampaign](https://www.activecampaign.com/)：電子郵件行銷、CRM、20–30% 佣金或折扣模式。 - [HubSpot](https://www.hubspot.com/)：CRM、入站行銷、銷售、20% 營收分成。 - [Gorgias](https://www.gorgias.com/)：電子商務幫助台，20% 收入分成。 - [Shopify](https://www.shopify.com/)：電子商務平台，佣金20%，Shopify Plus 10%。 - [LiveChat](https://partners.livechat.com/)：客戶服務平台，即時聊天，委託20%。 - [GetResponse](https://www.getresponse.com/)：電子郵件行銷、線上活動管理、子帳號 35% 折扣、35% 經常性佣金。 --- ### 44. 人體實驗 這與技術根本無關。但作為程式設計師，我們通常可以在任何地方工作 - 那麼為什麼不在有報酬的地方編寫程式碼呢？ 通常，您的收入在 2,000 美元到 10,000 美元之間，具體取決於試用期、持續時間、是否為住宅和具體情況。 像[流感營](https://flucamp.com/) 這樣的地方將支付您 4,000 英鎊，讓您在舒適的酒店式套房中入住兩週，同時他們會測試新的治療方法。那些患有氣喘等特定疾病的人可能可以透過參加更專業的試驗來賺取更多收入 --- ### 45.自由職業 自由職業可能會根據您的技能、經驗和您所在的領域而有所不同。對於新自由工作者來說，某些領域（例如網頁開發）的費率往往非常低，但您擁有的經驗和客戶滿意度越高，您就越能夠充電。 開發人員零工工作的三個主要平台是： - [Fiverr](https://www.Fiverr.com/)：Fiverr 以其多元化的市場而聞名，非常適合剛開始從事自由職業的開發人員 - [Upwork](https://www.upwork.com/work)：Upwork 迎合了廣泛的專業人士，但它對經驗豐富的開發人員特別有利。它提供了長期合約和高薪工作的潛力。該平台適合喜歡從事更實質專案的人。 - [People per Hour](https://www.peopleperhour.com/)：這個平台對歐洲市場的開發者有好處。它強調當地的商業聯繫，並在短期和長期專案之間提供良好的平衡。 --- ### 46. 說話 面對面的和移除的開發者聚會和活動在全球各地不斷發生。這些活動需要演講者，許多人願意付費以獲得良好的演講。支付的金額根據規模、觀眾、主題、演講者（你！）和其他因素而有很大差異。通常，您必須先自願在當地的小型技術聚會上發表演講，然後逐步提高。 --- ### 47. 遠端技術支持 這不是最迷人的角色，但較小的公司通常無法聘請全職的專門技術支援人員，因此您可以找到很多兼職工作。如果您擁有雲端經驗或認證，這些的薪資等級會大幅提高。只需查看任何求職板（例如 [WeWorkRemotley](https://weworkremotely.com/)），您就會看到大量職位。 請注意，您通常需要在特定時間內有空，並期望您可以在給定的時間內回覆。在申請之前，請確保這是您可以解決的問題。 --- ### 49. 投資 是的，這不是副業——但聽我說完… 如果您每年的收入為 6 萬美元，生活成本為 4 萬美元，那麼 5 年後您可能會有 10 萬美元的儲蓄。如果您將其投資於年平均回報率為10 - 15% 的標準普爾500 指數- 您每月可能會從您的投資中獲得超過1,000 美元的額外收入，並且您的投資能力越強，收入就會不斷增加儲蓄（當然，投資可以減少也可以增加）。這已經比這裡列出的許多副業更好的回報了！ --- ### 50. 就業 我們不要忘記，儘管目前情況看起來很艱難，但身為開發人員，即使只有一兩年的經驗，我們也處於非常幸運的地位，與平均收入者相比，我們的薪水很高。 如果你的工作不適合你——換公司通常是提高薪資的可靠方法，如果你不喜歡目前的工作，這可能是值得考慮的事情。 也許經歷了這一切之後，你所追求的不是副業，而是更好的「主業」？ --- ## 真實的說話 儘管您可能會在 IndieHackers 和 Instagram 上看到一些內容，但副業並不是全部。這通常需要大量的工作，但回報卻非常有限。因此，在在這裡或其他地方進行任何事情之前，請退後一步，思考「我為什麼要這樣做？」。如果您這樣做是為了累積經驗、學習新技能並享受樂趣——那就太好了。如果你這樣做是為了快速致富 - 你可能會非常失望。 還有一點要注意的是，儘管看起來不公平，但與那些剛起步的人相比，那些已經擁有強大追隨者或幾個成功的開源專案的人將處於更好的位置來利用機會。 因此，從短期來看，作為一名開發人員，您的時間可能會更好地花在提升自己身上。如果您不確定從哪裡開始，這裡有 5 個關鍵提示： - **網絡** - 建立你的網絡，參加聚會、黑客馬拉松和開發活動，加入社區，結交朋友 - **開源** - 將您的工作放在那裡，公開學習，建立您感興趣的迷你專案，並且不要害怕失敗 - **經驗** - 獲得實務經驗，申請實習機會，作為自由開發人員提供服務 - **基礎知識** - 確保您對電腦科學基礎知識有深入的了解，其餘的就會容易得多 - **玩得開心！** - 你自然會在你真正熱愛的領域做得更好。如果你不喜歡你正在做的事情，請退一步，考慮不同的方法是否更適合你 --- ## 免責聲明 - 以上列表僅供您參考。 - 我沒有親自測試過這裡列出的所有服務。 - 如果您有 - 我很想聽聽您的回饋。同樣，如果有任何需要加入或刪除的內容，請在下面告訴我。 - 並非所有服務都在所有國家/地區提供（此清單主要針對英國/歐洲和美國🇬🇧🇪🇺🇺🇸） - 有些平台會抽取您的收入。這通常是一個很小的數額，但重要的是你要考慮到 - 如果您已經擁有大量追隨者或流行的開源專案，賺錢通常會容易得多 - 有些方法涉及風險。儘管我已盡力強調這一點，但請記住，您的投資可能會下降而不是上升 - 您的結果可能會有所不同 - 沒有保證 --- 原文出處：https://dev.to/lissy93/50-ways-to-bring-in-extra-cash-as-a-developer-19b6
## **簡介** 在這篇文章中，我將介紹 11 個我玩得很開心並想與您分享的函式庫。  --- ## 1. [Taipy](https://github.com/Avaiga/taipy) Taipy 是一個開源程式庫，旨在輕鬆開發前端 (GUI) 和 ML/資料管道。 不需要其他知識（不需要 CSS，不需要 JS，什麼都不需要！）。 建立您夢想的應用程式得益於： - 完整的客製化和互動 - 多頁和多用戶 - 管道圖形編輯器 - ...還有更多。 您甚至可以將以下所有庫與 Taipy 一起使用，並使其更加有趣。 你的想像力是極限！  ---  https://github.com/Avaiga/taipy 我們已經快有 1000 顆星了，沒有你就無法做到這一點🙏 --- ## 2.[Asciimatics](https://github.com/peterbrittain/asciimatics) Asciimatics 是一個可讓您建立全螢幕文字 UI 的程式庫。這個圖書館是出於對 80 年代的懷舊之情而建造的。 以下是它們的一些主要功能： - 彩色/樣式文字 - 遊標定位 - 鍵盤輸入（無阻塞或迴聲）  --- ## 3.[Arcade](https://github.com/pythonarcade/arcade) 沒有遊戲，樂趣怎麼可能有意義呢？正如庫名稱所暗示的，它允許建立 2D 影片遊戲。是的，這看起來確實很難，但 Arcade 讓它變得容易。因此，「pip install arcade」並開始遊戲或從一些[現有遊戲](https://api.arcade.academy/en/latest/sample_games.html)中汲取靈感！  --- ## 4.[Rich](https://github.com/Textualize/rich) Rich 將為您的生活增添色彩！ Rich 在您的終端機中寫入豐富的文字（顏色+樣式），因此它們最終可以反映您是誰。 豐富包括： - 不同的風格 - 降價 - 進度條 - 亞洲語言支持 - ... 和更多！  --- ## 5.[PyEphem](https://github.com/brandon-rhodes/pyephem) PyEphem 是一個在天空中迷失的好工具。該庫允許進行天文學計算；以下是一些有趣的用例： - 尋找行星在天空中的位置 - 確定春分和至日的日期 - 計算月相的日期 - ... 還有很多！ 這個圖書館一定會激發您的好奇心。  --- ## 6.[tqdm](https://github.com/tqdm/tqdm) 光是這個圖書館的名字就已經很有趣了。 Tqdm 表示兩件事： - 是西班牙文「我非常愛你」的縮寫 (*te quiero demasiado)* - 源自阿拉伯語單字“*taqaddum* ()”，意思是進步，這實際上是對該庫所做工作的一個很好的介紹。 Tqdm 是任何循環的包裝器，它將透過進度條追蹤進度。您可以自訂它，讓等待任務完成不再那麼無聊！  --- ## 7. [Pygame](https://github.com/pygame/pygame) Pygame 讓編寫視訊遊戲變得容易。該庫將使您可以存取多種多媒體元素，例如： - 圖形 - 聲音 - 輸入設備 現在，發揮您的創造力，建立您自己的 2D 互動遊戲或探索一些[可用遊戲](https://www.pygame.org/tags/all)。  --- ## 8.[Turtle](https://docs.python.org/3/library/turtle.html) 這個函式庫有所不同，因為它是 Python 語言的一部分，因此不需要 *pip install*。 Turtle 是為了教育目的而建立的，幫助新程式設計師透過在畫布上設計圖形來使用 Python 進行編碼。一種進入 Python 或享受一點創意樂趣的有趣方式。  --- ## 9.[MoviePy](https://github.com/Zulko/moviepy) MoviePy 是用 Python 編輯影片的便利工具。其功能包括： - 切割 - 連接 - 過濾 - 和轉變。 您可以閱讀許多不同的格式，包括 GIF。  --- ## 10. [Emoji](https://github.com/carpedm20/emoji) 透過此庫在 Python 程式中使用表情符號。它只是使用 *emojize()* 函數將 unicode 表情符號轉換為表情符號名稱。其他功能包括加入表情符號、計算表情符號等…  --- ## 11.[Pyjokes](https://github.com/pyjokes/pyjokes) 有了 pyjokes，您只需安裝一點就能獲得點播笑聲。這個圖書館會給你一些俏皮的笑話；您甚至可以選擇語言和類別。 玩得開心！  --- 希望您喜歡這篇文章！ 我是一名新手作家，歡迎任何改進建議！  如果您有任何疑問，請隨時與我們聯繫。 --- 原文出處：https://dev.to/taipy/11-fun-python-libraries-to-make-your-day-better-4gpc
在上一篇文章，我簡單介紹了 GraphQL 的好處，以及如何在 laravel 中實作 這一篇文章，接著介紹一下如何在前端使用 React 進行整合 # 實務範例與 API 線上試玩 上一篇文章我用 graphql + laravel 實作了簡單的電商後台 api https://graphql-laravel-example.tw/graphiql 這次我用 Next.js 開發了簡單的電商前端 web app https://graphql-react-example.vercel.app/ 歡迎試玩看看！可以瀏覽商品、輸入信箱訂閱電子報 --- 在前端發送 query 的程式碼，可以參考 https://github.com/howtomakeaturn/graphql-react-example/blob/main/app/page.js 在前端發送 mutation 的程式碼，可以參考 https://github.com/howtomakeaturn/graphql-react-example/blob/main/app/newsletter.js 我使用原生的 fetch 函數呼叫 graphql api，所以您用任何一款 http 函式庫也都可以做到 狀態管理我用 Next.js 社群的 swr 當作範例，您完全可以自由使用任何 state manager # 優點介紹 我認為前端可以自主決定，要撈取哪些資料，是 graphql 最強大的功能！ 後端設計好各種 type 之後，前端就可以自行根據 playground 試玩 api！ https://graphql-laravel-example.tw/graphiql 可以彈性、自由撈取資料，連關聯資料都可以巢狀撈取！ ``` const gql = `query { products { id name description featured_image price comments { content user { name } } }, }`; ``` 大幅減低後端開發時間、前後端溝通時間、以及處理不同情境需要新增多組類似 api 的時間！ # 完整程式碼 前端完整程式碼請參考 https://github.com/howtomakeaturn/graphql-react-example 上次的後端 graphql 試玩 https://graphql-laravel-example.tw/ 後端完整程式碼 https://github.com/howtomakeaturn/graphql-laravel-example # 結論 上面 graphql + laravel + react 的範例 我認為原始碼非常單純、易讀，容易開發、也容易維護 您應該可以根據我提供的範例，在專案中試著導入使用 我在替客戶導入 graphql + laravel + react 的時候，發現網路上教學雖然很多，但是缺少範例 所以我製作這些 sample project 方便大家參考＆入門 大家有機會的話一定要試試看 graphql 的威力！ （此為系列文章，更多內容會在近期發佈） --- # 系列文章 - [Laravel + GraphQL 接案心得＆範例分享 Part 1：強大優點、API 線上試玩、工具介紹](https://codelove.tw/@howtomakeaturn/post/yx08mx) - [Laravel + GraphQL 接案心得＆範例分享 Part 2：前端 Query/Mutation 與 React 串接範例](https://codelove.tw/@howtomakeaturn/post/2an0Gx)
狀態管理器到底是什麼？狀態管理器是一個智慧模組，能夠保留（應用程式或 Web 應用程式的）會話資料並對資料的變更做出反應。 您是網頁開發人員嗎？使用過 Redux、Mobx 或 Zustand 等函式庫嗎？恭喜！您已經使用了狀態管理器。 我記得我第一天嘗試為 React 設定（舊的）Redux。只要想到所有不必要的複雜性——調度程序、減速器、中間件，我就會患上創傷後壓力症候群（PTSD）！我只是想聲明一些變數，_請讓它停止_。  這是一個過度設計、臃腫的庫，每個人都在使用！由於某種瘋狂的、未知的原因，它成為了當時的行業標準。 ###一些背景故事 2021 年的一個晚上，當我無法入睡時，我漫無目的地打開 GitHub，注意到我以前的大學課程老師（我在 GH 上關注過他）為他現在的學生上傳了一份作業。該作業要求學生使用公共 Pokemon API 建立一個 Pokedex 網站。目標是用 Javascript 實現它（沒有框架或函式庫，因為他目前的學生是 Web 開發初學者，仍在學習 Javascript 和開發的基礎知識）。 作為一個笑話，主要是因為我睡不著，我開始在我的神奇寶貝網站上工作。最終，我能夠建立一些可行的東西，而無需使用任何外部庫。 ### 但一路走來，我很掙扎...... 你看，我已經習慣了擁有一個狀態管理器，以至於在不使用外部框架或庫的情況下建置一個簡單的兩頁應用程式的要求讓我開始思考 - _為什麼狀態管理器必須如此復雜？這只是變數和事件._ 長話短說，我發現自己在凌晨 2 點組裝了一個超級簡單的狀態管理器模組，只是為了管理我的 Pokemon Web 應用程式的狀態。我將我的網站部署到了 GitHub 頁面，然後就忘記了這一切。 幾個月過去了，但出於某種原因，我時不時地思考我的狀態管理解決方案...你看，它有其他庫沒有的東西 - _它太簡單了。_ _“嘿！”我心想，「我應該將它重寫為 NPM 套件」。_ 當天晚上，我就這麼做了——我把它寫成了一個獨立的 NPM 包。最後，它的重量為 2kB（相比之下 Redux 的 150kB），具有零依賴性，並且使用起來非常簡單，您只需 3 行程式碼即可完成設定。 ### 我稱之為 VSSM 代表**_非常小的狀態管理器_**。 您可以在[GitHub](https://github.com/lnahrf/Vssm)上查看原始程式碼。另外，請查看使用 React 和 VSSM 建立的[文件網站](https://lnahrf.github.io/Vssm-docs/)。 第二天，我發布了我的 NPM 包，然後又忘記了這件事。 同年晚些時候，我面試了兩家不同公司的全端開發人員職位。我在第一家公司的面試中取得了優異的成績，這是一家非常成熟的科技公司。作為面試過程的一部分，他們要求我告訴他們我是否在空閒時間編碼，或者是否有我貢獻過的任何開源專案等等。 當時我做的唯一很酷的事情就是 VSSM，所以我告訴了他們。他們對我自己建立一個「Redux 替代方案」的想法印象深刻。 另一方面，我在第二家公司的面試中慘敗。我的大腦一片空白，我很緊張，無法回答簡單的問題，例如 > “React 會在狀態變更時重新渲染整個應用程式，還是在使用 Redux 時僅更新受影響的元件及其子元件？” “每次狀態更新時，它都會重新渲染整個應用程式”，我說。  我很緊張，哈哈，顯然我知道正確的答案是「它只渲染註冊的元件以及可能受影響的子元件」。 直到今天我也不明白為什麼二號公司決定給我第二次機會。他們邀請我再次接受採訪（是的！）。 在我的第二次面試中，他們要求我告訴他們我是否在空閒時間編碼、開源貢獻，你知道該怎麼做。當我告訴面試官我的小副專案時，他看起來很高興，似乎他喜歡我只是因為我從頭開始編寫了一個狀態管理器。 我想情況確實如此，因為我第二次面試也失敗了（在程式設計挑戰期間耗盡了時間），但仍然得到了一份工作機會。 1 號公司打算向我發送報價，但我已經與 2 號公司簽署了報價。 我的底線是——我建立 VSSM 幫助我獲得了這兩個機會。  ### 我是怎麼做到的？ 您是否知道 Javascript 內建了監視變數變更所需的所有功能？ 它被稱為代理（它很神奇）。 Javascript 代理程式是程式碼和變數分配之間的附加邏輯層。 如果您要將物件包裝在代理程式中，您可以決定在每次更新時將其值記錄到控制台，除了為該物件指派新值之外，無需執行任何操作。 ``` const target = { v: "hello" } const proxyTarget = new Proxy(target, { set: (target, property, value) => { console.log(`${property} is now ${value}`); target[property] = value; return target[property]; } }); proxyTarget.v = "world!" // v is now world! ``` VSSM 是基於代理建置，它在變數賦值和其餘程式碼之間建立了一個層。使用代理，您可以設定 setter、getter，並在操作或請求目標值時實現任何類型的邏輯。 VSSM 不僅僅是一個代理，它是各種智慧代理，它們知道分配給變數的值是它的新值還是回調方法。 例如，使用 VSSM，您只需幾行程式碼即可設定狀態、監聽變更並發出事件。 ``` import { createVSSM, createState } from 'vssm'; import { getVSSM } from 'vssm'; // Create the initial state createVSSM({ user: createState('user', { address: '' }) }); // Get the user proxy reference const { user } = getVSSM(); // Listen to events on user.address user.address = () => { console.log(`Address updated! the new address is ${user.address}`); }; // Emit the mutation event user.address = 'P.Sherman 42 Wallaby Way, Sydney' ``` 正如您所看到的，我確保我的狀態管理器盡可能簡單。我的目標是擺脫僅僅為了分配一些變數而陷入減速器、中間件和極其複雜的配置的困境。 現在，一切都透過分配變數來進行！想要設定監聽器嗎？將回調函數指派給變數。想要編輯值並發出事件嗎？只需指派一個新值即可。 直到今天我仍然不明白為什麼流行的狀態管理器必須如此複雜，也許我永遠不會。 我鼓勵您繼續閱讀 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 上有關 Javascript 代理的所有內容。 ### 這一切的結論是什麼？ 我認為，對自己所做的事情充滿熱情是關鍵。 我建立 VSSM 只是為了突破自己的極限並發布合理的 NPM 包。它成功地給面試官和同事留下了深刻的印象，並讓我從那時起就進入了不同的職位。 沒有人會使用 VSSM，它不會流行。當我將其發佈到 NPM 時，我就意識到了這一事實。但我仍然選擇盡我所能，因為我熱衷於做一些我認為比行業標準更好的事情。我知道我可以做出一些必須更好的東西，即使這意味著它對我更好。 儘管 VSSM 已經死在 NPM 墓地裡，但它給我帶來了很多價值，並且因為這篇文章而繼續這樣做。 獲得開發工作的最佳方法是建立令人驚嘆的東西，即使您認為這一切以前都已經完成了 - 建置得更好。即使您認為沒有人會使用它，那又有什麼意義呢？ - 現在建置，價值稍後顯現。 不要低估你的能力，如果你認為自己有不足，請知道你會進步。走出去，建構能夠帶來價值的專案，一次一小步。 祝您工程之旅順利。 --- 原文出處：https://dev.to/lnahrf/javascript-proxy-magic-how-i-built-a-2kb-state-manager-with-zero-dependencies-and-how-it-got-me-two-different-job-offers-2539
你有沒有想過... **如果軟體開發人員的需求如此之大，為什麼現在找到開發人員的工作這麼難？** 為什麼面試過程這麼長？為什麼會有數百次拒絕？ 為什麼提供的工資低？ 今天，您將了解混亂背後的原因。 我們是如何來到這裡的。以及為什麼。 我還將向您展示為什麼事情並不像大多數開發人員想像的那麼糟糕。以及您需要採取的 5 個步驟來利用這種情況為您帶來優勢。 因此，當大多數開發人員都在倒退時，您可以快速發展您的職業生涯。 如果您是一位雄心勃勃的開發人員，想要更上一層樓並增加薪水，那麼這就是適合您的。 **因為有一件事是真的，我們所知道的軟體開發在 2023 年已經發生了永遠的變化。** 「美好的舊時光」已經一去不復返了。 知道如何建立 React 應用程式將不再讓你獲得這份工作。我們不會很快回到那個狀態。 我們走吧。 這一切都要追溯到 2022 年，當時從谷歌到 Meta 和微軟等大型科技公司開始宣布裁員。不是各種裁員，是裁員開發者。 起初，大多數開發人員都很有信心。 他們說，_「軟體開發總是在成長並且需求旺盛，我們將會復甦」_。 現在，12 個多月過去了，許多程式設計師已經失去了樂觀情緒（免責聲明：我仍然對開發人員的未來非常樂觀，稍後會詳細介紹）。 許多開發者正在失去耐心等待就業市場的復甦。如果它永遠不會發生怎麼辦？ 一些開發人員正在懷疑他們的職業選擇。正在考慮 B 計劃或已經轉向做其他事情。 其他人則被迫回到編寫程式碼之前的低薪工作。  最初的樂觀很快就變成了悲觀，許多開發者都在尋找 B 計畫。 **最好的情況是資料輸入或客戶服務工作。在最壞的情況下，它會回到咖啡店或倉庫。** 我認為這是一件非常悲傷的事情。僅僅因為你找不到擺脫困境的有效策略，就拋棄了你的夢想和多年的努力。 我相信，如果你進入軟體開發，那是有原因的。您可能工作勤奮、雄心勃勃且富有創造力。你至少應該有機會證明自己的價值。 在這篇文章中，我將向您展示該怎麼做。具體來說，無論市場表現如何，如何使用經過驗證的軟體工程原理來度過這場風暴，並將您的開發人員職業生涯提升到一個新的水平。 我是誰可以給你這方面的建議？ 我叫 Dragos，在過去 3 年裡，我幫助超過 230 多名軟體開發人員提升了技能，快速晉升到高級級別，並獲得了他們應得的認可和報酬。  我不是大師或技術影響者。我並不打算成為其中之一。 但是，在作為自學成才的開發人員編寫程式碼期間，我一直在戰壕里工作，現在幫助其他開發人員升級，這使我很有資格為您提供這方面的建議。 首先，讓我們先了解一下軟體開發行業目前正在發生什麼… **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ## 現在的情況 像任何好醫生一樣，為了治療症狀，我們必須了解背後的問題。 開發人員就業市場就像任何市場一樣，受簡單的供需機制控制。對開發者的需求越大，開發者的議價能力就越大。 對開發者的需求越少，我們的談判能力就越小。 如果你不斷地感覺自己與其他開發者比較，無法要求高薪，並且很難找到工作，這意味著你在市場上的力量很小。  供需關係決定開發者就業市場。 傳統上，開發者在市場上擁有大部分權力，公司會不遺餘力地獲得最好的工程人才。 這就是為什麼開發人員的薪水不斷增長以及每個人都想學習如何編碼的原因。 **但是，在過去 12 個月裡，權力已經從開發者轉移到了公司（除了頂層的開發者，稍後會詳細介紹）。** 為什麼？ 很多原因。讓我們一一回顧一下… ## 1.“效率時代” 戰爭、通貨膨脹和經濟衰退迫使世界各地的公司最大限度地利用資金。包括軟體公司。 企業需要找到更有效的做事方式——如果您正在建立軟體，這意味著擺脫一些開發人員並自動化盡可能多的任務。  糟糕的經濟狀況迫使科技公司的執行長提高公司的效率。 正如馬克·祖克柏在他關於 Meta 的「效率年」的文章中提到的那樣，公司希望提高開發人員的生產力和工具並減少員工人數。 **一言以蔽之：科技公司希望盡可能精簡。** 這意味著軟體開發團隊不能再龐大了。他們需要一些高技能的開發人員以及大量的自動化設備。  這意味著縮小團隊規模（即：解僱表現不佳的員工）、取消優先順序較低的專案並降低招募率。用更少的軟體開發人員完成更多的工作。 對於開發人員就業市場來說，這可不是好訊息… **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ## 2.人才海嘯 開發人員就業市場變得非常非常擁擠，有數百名候選人瞄準同一職位。 這是因為編碼技能變得越來越普遍。 在過去的十年中，訓練營和電腦科學學位一直在將軟體開發人員吸引到一個已經擁擠的市場中。尤其是訓練營，經過六週的編碼後，他們實現了六位數薪資的夢想。  這引發了一場「人才海嘯」。開發人員的工作被當作中產階級的金票出售。成千上萬的人放棄了學習編碼的希望。 然而，正如許多初級開發人員所看到的那樣，這主要是一種行銷承諾。 事實上，開發人員職位的競爭非常激烈，你在 3 個月的 Bootcamp 中學到的技能已經不足以脫穎而出。  由於大量開發者在尋找黃金，就業市場很快就飽和了。 2020 年的情況就已經如此，但後來情況變得更糟… ## 3.遠距工作 Covid-19 大流行推動全世界轉向遠距工作。鑑於編碼基本上可以在任何地方完成，開發人員的工作是適應速度最快的工作之一。 對許多開發人員來說，在家工作聽起來像是個夢想。 無需通勤，擁有更多屬於自己的時間，並以相同的薪水在舒適的家中進行編碼，這是大多數人在任何給定時間都需要的交易。 但事實證明，遠距工作是一把雙面刃。 因為最終，公司透過增加招募人數而受益最多。  遠距工作意味著軟體公司現在可以僱用來自世界各地的開發人員。 本地職缺吸引了數十名遠距求職者，他們願意以少得多的錢做同樣的工作。正如《紐約時報》所說： **“遠距工作者普遍面臨更多競爭，並且更加依賴運氣。” - 紐約時報** 如果您想知道為什麼現在有數百甚至數千名求職者，那麼答案就是：遠端候選人。 大多數職缺現在都在收到來自世界各地的申請。  隨著遠距工作的興起，本地工作現在面臨國際競爭。 當我可以在中西部找到具有相同技能且至少少兩倍的錢的人時，為什麼還要雇用矽谷的開發人員呢？ 在歐洲也一樣。 一家位於柏林的公司可以聘請一位位於德國中部小村莊的開發者。讓他們每個月來辦公室兩次。並少付給他們幾十萬歐元。 當然，一些公司採取了重返辦公室政策。 但從長遠來看，我們將看到越來越多的公司採用完全遠端的思維方式。從經濟學的角度來看，遠距工作很有意義。 **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ## 4. 人工智慧與自動化 人工智慧已經存在很多年了，但從未像現在這樣出現在我們的生活中。 2023 年 10 月，OpenAI 發布了 ChatGPT。 近年來人工智慧創新的巔峰和迄今為止最好的人工智慧模型。它可以與您談論您的一天，也可以為您撰寫論文。 更糟的是，它可以編碼。  隨著人工智慧能夠編寫功能齊全的程式碼，許多開發人員都會問自己：“現在怎麼辦？” 如果有足夠好的提示，它可以比大多數人類開發人員更好、更快、更便宜地編寫程式碼。 當然，ChatGPT 無法自行思考。 這是一個巨大的統計機器。它會犯很多錯誤並且陷入循環。但是，這足以讓事情順利進行。而且情況只會變得更好。 GitHub 很快就做出了調整，將其整合到 GitHub Copilot 中，後者已直接在 VS Code 中可用。 從長遠來看，沒有人知道人工智慧將對就業市場產生什麼影響。 它會像某些人聲稱的那樣導致我們所知的編碼的終結嗎？或者它只是人類開發人員完成工作的工具？ 我們所知道的是，在短期內，人工智慧透過自動化任務或完全取代一些工作，給就業市場帶來了更大的壓力。  高盛估計，大約 29% 的電腦相關任務可以透過人工智慧自動化。 結果？ **找到一份體面的開發人員工作變得越來越難。** 回到報價和供應曲線，開發者數量增加，但就業機會數量保持不變。 隨著市場上數百名開發人員尋找職位，軟體開發產業正遭受「Tinder 效應」的困擾。類似網路約會的現象。 就像約會應用程式中的熱門個人資料一樣，軟體公司現在面臨著數百種不同的選擇。數百名候選人和簡歷。 整理噪音並不容易。 你必須更快地放棄候選人。即使你拒絕了一個合適的開發者，總會有其他人在門口等著。 好吧，現在對於開發者來說情況並不好。 忍住眼淚，因為我會告訴你為什麼事情並不像大多數開發人員想像的那麼糟糕... # 好訊息 這場「完美風暴」讓大多數開發者感到驚訝。許多人覺得薪水過低，但同時又沒有勇氣去市場。 這創造了一個“技能差距”，你可以利用它來跑得更快。  「在陽光明媚的天氣裡你無法超越 15 輛汽車…但在下雨天你可以。」- Ayrton Senna **風雨飄搖的就業市場實際上可能是您將開發人員職業提升到全新水平的完美時刻。** 首先，不要像其他人一樣屈服於恐懼。恐懼會讓你癱瘓，擾亂你的思考。不要驚慌失措，而是要超越噪音。 裁員開始一年後，公司意識到消除成本實際上會阻礙他們的成長。 在資本主義中，一家不成長的公司就是一家正在消亡的公司。 公司需要重新開始創造價值。緊急。 更多價值，因為我們正處於經濟衰退之中，消費者只想要最優惠的價格。而且速度更快，因為競爭是全球性的。 **在軟體開發中，價值意味著功能。這意味著高品質的程式碼。** 那麼人工智慧呢？ AI實際上刺激了市場。軟體公司別無選擇，只能將人工智慧模型整合到現有的軟體中。否則就有倒閉的風險。 你需要什麼？ 開發者、開發者、開發者… 好吧，這就是為什麼這可能是您作為一個雄心勃勃的開發人員超越競爭對手的最佳時機： ## 1. 質量重於數量 是的，市場上的開發者總數有所增加。但他們的技術技能品質卻沒有。 經濟衰退可能在一夜之間發生，但技術掌握需要時間。 即使在這樣的市場條件下，大多數公司仍然抱怨很難找到符合其工作要求的合格開發人員。 企業的要求是否過高？ 或許。 但是，這正是您可以利用的差距來保持競爭優勢。  市場上有如此多的噪音，這與您發送的申請數量無關。追求數量只會產生更多垃圾郵件。 重要的是您的簡歷和申請的品質。 這並不意味著您應該成為完美主義者。數字仍然很重要。在開始找工作之前，只需在[您的簡歷和LinkedIn 個人資料上做更多工作](https://dev.to/dragosnedelcu/how-to-find-a-developer-job-in-2023-with-little-or-no-experience-27h7)。 並專注於技術掌握而不是數字！ ## 2. 人工智慧作為補充 正如我所提到的，人工智慧模型無法思考，至少目前還不能。事實證明，它們更多的是對開發人員工作的補充，而不是替代品。 人工智慧帶來的是更多透過人工智慧整合進行的軟體開發。對正在開發的軟體的需求不斷增加。 這似乎有悖常理，但事實證明，人工智慧和自動化對軟體產業的影響與 70 年代修建高速公路對汽車交通的影響類似。 更多的高速公路意味著更多的汽車空間，因此更多的人使用汽車。導致汽車流量增加，而不是減少！  更多的高速公路，更多的汽車。更多人工智慧，更多程式碼。 人工智慧編碼工具將使產生的程式碼量倍增。 最終，這意味著更多的程式碼需要由人類檢查、驗證和維護。整體而言，需要更多的開發人員。 **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ## 3. 現金仍為王 $$$ 有趣的是，開發人員的薪資仍在增加。但它們的成長並不相同。 事實上，大多數開發者都無法跟上通貨膨脹的腳步。許多人根本沒有加薪，儘管在市場上待了很久卻找不到職位。 其他人則獲得小幅加薪，例如 3%。由於去年通膨率約為 10%，這並不是加薪。又是減薪！ 但是，一小群幸運的程式設計師的薪酬正在打破記錄。 事實上，我們在 theSeniorDev.com 上看到了這一點。許多高級開發人員的薪資創下歷史新高，即使在歐盟市場也超過 6 位數。 幾年前，如此高的報價是非常不尋常的。 但是，如果你仔細想想，更高的薪水是有道理的。 一家公司面臨著交付一款可以為他們帶來數百萬美元收入的軟體的壓力，他們不會介意為能夠交付該軟體的開發人員額外花費數千美元。 這樣想吧，熟練勞力不是商品。 公司不會購買一雙一模一樣的鞋子並尋求優惠。有些鞋子會讓他們走得更快。為他們支付更多費用是有道理的。 **無論是矽谷或歐洲科技中心，趨勢都很明顯：熟練的開發人員需求量很大，公司願意為他們支付大量資金。** 正如您所看到的，事情並不像大多數開發人員想像的那麼糟糕。 至少不適合所有開發人員... 因為如果你和你的資深朋友交談過，你可能會發現有一群開發者做得併不差…。 ## 僅限資深開發人員的就業市場 儘管發生了一切，但高階開發人員的需求仍然非常大。您可以在招聘板上看到它，其中指定：僅限高級。 或查看誰正在被雇用並立即簽署工作合約。 Hired.com 的一份報告顯示，目前簽署工作合約的軟體開發人員中有超過 73% 擁有 7 到 5 年（或更長）的經驗。  高級開發人員受最近科技業裁員的影響最小。 感覺無論經濟如何發展，成為高級開發人員都會有回報。或多少程式碼 A.I.可以生成。  如果就業市場是動物農場。所有開發人員都是平等的，但高級開發人員比其他人更平等。 如果市場如此糟糕，為什麼高級開發人員仍然受歡迎？ 從公司的角度來看，高階開發人員從第一天起就可以創造價值。 公司知道，他們比以往任何時候都更需要快速、優質的交付，才能在當前經濟狀況下保持競爭力。通貨膨脹，記住。 所有這些因素意味著整個軟體開發團隊將崩潰為少數開發人員利用兩個要素： 1. **高級開發人員** 2. **人工智慧工具和自動化** 儘管發生了這一切，但也不全然是壞訊息。堅持幾秒鐘，我會告訴你原因。 **事實是，您可以利用當前的情況來發揮自己的優勢。** **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** # 真相 為了在這個充滿活力的就業市場中取得成功，您將需要比與您競爭的其他數千名開發人員更可靠的策略和更有效率的流程。 您需要立即採取行動，因為… 提供高薪、酷炫技術堆疊、良好福利和遠距工作的開發人員工作每天都變得越來越有競爭力。 這並不意味著他們不可能到達。簡而言之，獲得開發人員工作的舊方法不再有效。 如果您需要其他 5 名開發人員的幫助才能將程式碼投入生產，那麼您的日子就很寶貴了。還有另一個開發人員可以提供端到端的服務，他們將取代您的位置。 所以你會怎麼做？ 正如我的一位招募人員朋友所說： **「你最好的選擇是盡快成為高級開發人員」。** 盡快達到高級水平是目前在軟體開發市場中生存的唯一途徑。 成為高級開發人員將使您從眾多編碼人員中脫穎而出，提供端到端的價值，並被視為對公司的投資，而不僅僅是另一個昂貴的開發人員。  聰明的開發人員正在尋找提供更多服務並脫穎而出的方法。他們正在尋找快速實現這一目標的方法。 他們首先需要解決的是如何提升自己的技術能力。 好訊息是，您不需要在周末花費無數時間或編碼來實現這一目標。您不需要啟動數百個線上課程和副專案。 而且您不需要等待數年才能做到這一點。因為有更好的方法可以做到這一點。 你只需要專注在那些不會改變的事情上。 **那麼，如何獲得對自己技能的完全信心、端到端交付並釋放高級信心？** 您遵循基於經過驗證的軟體開發原則的逐步過程。就像高級開發人員每天使用的那樣。我們稱之為技術掌握藍圖。 在接下來的幾行中，我將更深入地討論具體步驟，但這不是本文的目標。 如果您有興趣了解更多訊息，可以單擊下面的連結並觀看我為您準備的免費培訓。 [這是免費培訓的連結。](https://bit.ly/3udWD0m) **免責聲明**：您必須加入您最好的電子郵件才能存取它。別擔心我不會寄垃圾郵件給你。我只會與您分享有關如何快速晉升高級開發人員並讓您的開發人員職業生涯提升到一個全新水平的相關資訊。您可以隨時取消訂閱。 **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ### 1. 首先，你要採取資深開發人員的心態🧠 成為高級開發人員的第一步是改變您對軟體開發職業和整個生活的看法。 這意味著要以更高的標準要求自己。對您目前的開發者職業生涯承擔全部責任。並掌控你的職涯道路。 你也必須擺脫限制性信念或任何內在的關於自己的負面情緒。你必須養成新的習慣並培養紀律技能。 這意味著設定明確的重點目標，為自己定義一個在情感上令人信服的願景，並在執行這些目標時對自己負責。 **🚀[行動專案]**：準確定義您想要在未來 12 個月內實現的目標。為什麼想實現它？到達那裡需要採取哪些步驟？你是否缺乏任何知識和技能？你需要做一些與現在不同的事情才能到達那裡嗎？寫下來。 當你走向高級開發的旅程時，這將是讓你的火焰保持活力的燃料。大多數開發人員從未到達那裡，因為他們退出得太早。他們忘記了過程就是目標。 ### 2. 其次，你掌握了「基礎知識」📚 大多數開發人員，特別是 JavaScript 開發人員已經習慣相信軟體開發中的資歷就像一個購物袋。 新增的庫和框架越多，其等級就越高。 事實上，情況完全相反。高級開發人員平均編寫的程式碼比初級開發人員少。他們使用不太閃亮的庫和框架來解決問題。 沉迷於框架和庫會讓你成為炒作列車的受害者。當一個圖書館失寵時，另一個圖書館就會出現，需要您投入時間和注意力。這是一場你無法獲勝的遊戲。 如何才能逃脫炒作機器？ 透過專注於**「不會改變的事情」**。我們所說的基礎知識。 模式和原則是大多數框架和函式庫的核心。對基礎知識的深入理解將確保您無論情況如何變化都能掌握最新資訊。 它還可以保護您免受人工智慧和自動化的影響。在程式碼在幾秒鐘內產生的世界中，清晰的思維變得越來越有價值。雙贏。 基礎知識取決於您的技術堆疊。 如果您是 JavaScript 開發人員，您主要需要掌握 2 組基礎知識。電腦科學基礎知識和 JavaScript 基礎知識。 這不是本文的範圍，但我整理了一個路線圖，供您準確了解這些內容，請參見下文。 🚨 PS有關“計算機科學基礎知識”的詳細列表，請查看[計算機科學基礎知識掌握路線圖](https://mm.tt/app/map/2980765378?t=LsjjpEBYky)。🚨 🚨附言有關「JavaScript 基礎知識」的詳細列表，請查看我們的 2023 年 [JavaScript 基礎知識掌握路線圖](https://mm.tt/app/map/2962635113?t=ILeYm71vU3)。🚨 順便說一句，我們免費社群的開發人員可以存取獨家內容和針對基礎知識的客製化練習。請在下面註冊！ **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ### 3. 第三，您學習如何端到端交付🎯 任何科技公司執行長現在最不想做的就是僱用更多的開發人員。但他們確實想解決問題。很多問題。 但是，你無法真正解決問題，我的意思是，當你只建構孤立的功能時，會出現有價值的問題。或者當您需要另外 5 名開發人員的幫助才能將您的東西投入生產時。 **高級開發人員之所以需求如此巨大，是因為他們可以提供端到端的服務。** 他們可以與產品經理或其他利害關係人獨立工作，並從第一天起就交付價值。掌握了這一點，你的價值就會增加10倍。 端到端交付並不意味著您必須了解一切。 這意味著您需要了解後端以及基礎設施方面的情況。目前無需深入研究各個元件。但從大局來看是的。 **[進階開發提示]**：學習如何端到端交付的最快方法不是 100 小時的雲端憑證課程（這些課程的重點是向您推銷品牌，而不是教您東西） ）。 相反，請嘗試規劃您公司的 CI/CD 流程。 找出他們擁有的任何架構圖，然後自己參與其中。如果他們沒有，請自己建造一些。這已經可以給你一個良好的開始，並在你的下一次技術面試中談論很多事情。 🚨附言要確切了解您需要掌握哪些端對端交付心理模型，請查看我們的[JavaScript 開發人員的「端對端交付」路線圖](https://mm.tt/app/map/2974013323?t=pqAIdWZ7W2 ).🚨 **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ### 4.第四，成為「AI驅動」🚀 當我接到想要加入我們專案的開發人員的電話時，最令我驚訝的事情之一是他們每天很少使用人工智慧。 有些人多次使用 ChatGPT 來執行日常任務（樣板檔案、測試）。真正使用過 GitHub Copilot 的人就更少了。 他們告訴我他們不相信它的未來。或者他們的公司並沒有真正使用它。 如果你在飛機上，氧氣會耗盡，我敢打賭，即使機組人員沒有給你，你也會尋找氧氣面罩。 ChatGPT 和 GitHub Copilot 不只是更好的自動完成工具。自動完成無法重構、尋找程式碼中的錯誤或擴充功能。 人工智慧模型可以優化、重構，甚至可以比許多開發人員提出更好的程式碼。事實上，到 2023 年，在人工智慧工具的幫助下，初級開發人員可以完成與沒有人工智慧工具的高級開發人員一樣多的工作。 重點很明確：如果您是願意轉為高級的 JavaScript 開發人員，您需要成為「人工智慧驅動」。 如果您已經是大四學生並希望在未來幾年保持相關性，情況也是如此。潮流正在改變。透過升級這些技能來確保您處於正確的位置。 您是否必須學習 Python、Numpy、深度學習以及 AI 堆疊中的十幾種工具？並不真地。這是一項完全不同的工作。 **這意味著你應該將人工智慧工具整合到你所做的一切中。** 從建置功能到程式碼審查，再到測試和效能優化。如果您希望我寫一篇有關如何做到這一點的文章，請在評論中告訴我。 **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ### 5.第五，有效推銷自己🏆 如果你找不到一家公司來支付你的技能費用，那麼無論你是多麼優秀的開發人員，也沒有用。由於開發人員就業市場已經過度飽和，這一點更加正確。 為了脫穎而出並獲得頂級軟體開發人員的職位，您必須以盡可能最好的方式將自己推向市場。 作為一名員工，這一點更為重要，因為您應該始終擔心的一件事是您的就業能力。 **如果你明天被解僱，你找到另一個職位有多容易？** 你越有就業能力就越好。 您的就業能力取決於兩件事。您的產品（在這種情況下，您的開發技能和支持這些技能的過去經驗）。 其次，你如何推銷自己和你的人脈。有多少人認識你？如果你現在被解僱，明天有人可以提供你工作嗎？ 要改進您的產品，請提高您的開發技能。我們在前面的幾點中討論過這一點。但如何改進自我推銷的方式呢？ **好吧，如果你想要高級開發人員的薪水，你首先必須看起來像高級開發人員。** 這意味著建立一份相關的履歷，以最好的方式量化以展示您為市場帶來的東西。 如果您想讓我寫一篇關於如何打造一流開發人員履歷表的文章，請在評論中告訴我！ ## 總結與後續步驟 好吧，現在你知道了。 下次當你問自己為什麼現在找到開發人員的工作如此困難時，請考慮這些原因。您還了解如何透過盡快成為高級開發人員來解決這個問題。 能夠落實這 5 個支柱並以最快的速度適應這個新市場範式的開發人員將獲得工作保障、對自己的技能充滿信心並獲得最高的薪水。 無法適應的開發者將慢慢被淘汰，並面臨被完全擠出市場的風險。 按照我在本文中概述的步驟操作，您不僅可以輕鬆找到開發人員工作，而且可以「快速」晉升到高級開發人員級別，並將您的開發人員職業生涯提升到一個全新的水平。 他們為我和世界各地 230 多名其他開發人員工作，他們也將為您工作！ 我們下一篇再見 德拉戈斯 **🚨附：您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** --- 原文出處：https://dev.to/dragosnedelcu/why-is-it-so-hard-to-find-a-developer-job-in-2023-and-how-to-fix-it-2d13
嘿朋友們👋 曾經造訪過某人的 Github 個人資料並思考過：  在本文中，我將嘗試向您展示建立專業的 GitHub 個人資料比您想像的要容易得多。 沒錯，即使您不是經驗豐富的專家，您也可以讓您的個人資料看起來可靠。 這是我的 GitHub 個人資料的範例。讓我們深入探討如何在接下來的 10 分鐘內讓您的個人資料看起來同樣完美。 😉** [](https://github.com/fernandezbaptiste) 準備好了，出發吧⏰ --- # 1. 建立您的 GitHub 設定檔：新增 `README` 如果您還沒有這樣做，則必須建立自己的 GitHub「自述文件」來建立您的個人資料頁面。 為此，請轉到您的個人資料並點擊“您的儲存庫”。 之後，建立一個「New」儲存庫： - 儲存庫的名稱需要與您的使用者名稱相同。 - 確保將儲存庫設為“公開” - 點擊“新增自述文件”  --- # 2. 為您的儲存庫建立一個開源儲存庫 🤫 不久前我發現了這個[repo](https://github.com/rahuldkjain/github-profile-readme-generator)，我愛上了它。❤️ 這個很酷的專案可以幫助您立即建立自己的 GitHub 個人資料！ 前往 [GitHub Profile README Generator](https://rahuldkjain.github.io/gh-profile-readme-generator/) 並填寫您的資料。 [](https://rahuldkjain.github.io/gh-profile-readme-generator/) **注意：** 您不需要完成每個部分；僅相關的。 完成後： - 點擊“生成自述文件” - 然後點選“複製markdown” - 前往您新建立的 GitHub 個人資料並將程式碼貼到您的「自述文件」中 💪 --- # 3. 使用小工具提升您的個人資料設計水平 您現在應該擁有一個看起來非常漂亮的個人資料！ 為了提高您的遊戲水平，您可以加入一些優雅的小部件，這些小部件提供有價值的統計資料來展示您的技能和成就。 🚀⭐️ 就我而言，我已將這些加入到我的[個人資料](https://github.com/fernandezbaptiste)： [](www.quine.sh/?utm_source=devto&utm_campaign=beautify_github_profile) 您也可以加入一些小工具來展示您的 _Web3_ 或 _StackOverflow_ 體驗： [](www.quine.sh/?utm_source=devto&utm_campaign=beautify_github_profile) 這些小工具_完全免費_，您可以透過註冊 [quine.sh](www.quine.sh/?utm_source=devto&utm_campaign=beautify_github_profile) 來取得它們。 只需前往您的 Quine 個人資料上的_“Widgets”_，然後將複製的 Wiget 程式碼貼到您的「自述文件」頁面中即可。 [](www.quine.sh/?utm_source=devto&utm_campaign=beautify_github_profile) --- # 4.「美化」你的聯絡資訊💄 您可能不喜歡 GitHub README 產生器中的某些設計。 🙃 有些人喜歡不同的風格，尤其是與他們的_社交連結/連結輸出相關的風格。_ 您可以使用以下替代樣式： [](https://github.com/fernandezbaptiste) 如果您喜歡這種風格，您可以使用此合成器建立自己的徽章： ```  ``` 例如，如果您想新增 **GitHub 徽章**，則為： ``` ] ``` 根據您想要顯示的橫幅圖示的類型，您可以在此清單中找到許多簡潔的圖示[此處](https://simpleicons.org)。 🙌 --- # 5.利用 PIN 儲存庫功能 如果您已經建立了幾個專案，那麼這是展示您最引以為傲的專案的好機會！ 在您的個人資料上，只需點擊“自訂您的 pin”，然後選擇最多 6 個您想要固定的專案。  --- # 6. 貢獻並升級你的遊戲！ 在您的 PIN 儲存庫之後，您的個人資料將顯示以下網格。  這代表您**在 GitHub 上的貢獻和活動水平。** 需要強調的是，儘管您應該嘗試透過經常貢獻來展示您的一致性，但此欄上的「綠色度」百分比並不是最重要的方面。 👀 許多人專注於試圖建立完美的連勝，但實際上，他們的工作沒有影響力，他們的貢獻也沒有什麼價值。 在我看來（我相信很多人都有同樣的看法），貢獻應該集中在： **品質 > 數量** ❤️ 話雖如此，定期建立幾個專案或為其他人的專案做出貢獻符合您的利益。 現在，為了嘗試為專案做出貢獻，您可以使用多種工具。 🔎 這裡有 3 個免費網站，可以幫助您找到下一個要從事的專案： - [GitHub 探索](https://github.com/explore) - [UpForGrabs](https://up-for-grabs.net/#/filters?tags=python&date=1month) - [Quine.sh](https://quine.sh/?&utm_source=devto&utm_campaign=beautify_github_profile) 或者，如果這是您第一次貢獻，我已經建立了這篇逐步[文章](https://dev.to/quine/contribute-to-open-source-in-the-next-10-min-step-by-step-beginner-edition-4aia)適合初學者。您將學習在 GitHub 上做出貢獻的機制，並能夠在接下來的 10 分鐘內做出貢獻！ --- # 7. 新增個人簡介 我們已準備好進行最後的潤色... 現在你的個人資料看起來應該會很火。 🔥 我建議您做的最後一件事就是完成您的“簡歷”。 當您進入個人資料頁面時，請轉到照片下方的左側，然後按一下「編輯個人資料」。  加入您自己的簡短描述，然後您就可以開始了！ --- 現在就這樣。 😄 我希望您對**您精美的 GitHub 個人資料**感到滿意！ 💅 我必須強調，我的個人資料還遠遠不是世界上最好的... 然而，有了這些免費工具，您將能夠自訂一個奇妙的新設定檔！ 這就是為什麼我想先睹為快，並從您將建立的酷炫設定檔中獲得靈感！ 👀 `在評論部分分享您全新的個人資料！ 🙌` 下週見。 你的開發夥伴， 巴巴💚 --- 如果您想加入開源中自稱「最酷」的伺服器😝，您應該加入我們的[discord伺服器](https://discord.com/invite/ChAuP3SC5H/?utm_source=devto&utm_campaign=beautify_github_profile)。我們隨時為您的開源之旅提供協助。 🫶 [https://dev.to/quine](https://dev.to/quine) --- 原文出處：https://dev.to/quine/7-tips-to-build-your-github-profile-like-a-pro-38bg
隨著人工智慧市場的不斷成長。我們即將做出很多改變。 最近，我一直在思考在各個領域取得重大進展的最新新創公司。這些新創公司參與了開創性的工作，從增強資料互動性到探索大型語言模型在營運中的潛力（一種稱為 LLM Ops 的新概念）。此外，我對搜尋引擎和生成人工智慧的進步很著迷，它們正在徹底改變我們與技術互動的方式。 我在 DEV.to 上看到他們中的許多人，然後我想嘗試他們的專案。我對這些公司所付出的努力和創新感到驚訝。 ## [Pezzo：開發者優先的人工智慧平台](https://github.com/pezzolabs/pezzo)  **GitHub 儲存庫**：[GitHub 上的 Pezzo](https://github.com/pezzolabs/pezzo) **網址**：[片段](https://pezzo.ai/) **描述**： Pezzo 是一個為開發人員量身定制的開源雲端原生 LLMOps 平台。它透過提供簡化的提示設計、版本管理、即時交付等，徹底改變了人工智慧操作。該平台能夠有效觀察和監控人工智慧操作、顯著降低成本和延遲、無縫協作以及立即交付人工智慧變更。 **主要特徵**： - **提示管理**：提示的集中管理和版本控制，允許即時部署到生產。 - **可觀察性**：提供有關人工智慧操作的詳細見解，優化支出、速度和品質。 - **故障排除**：即時檢查提示執行，最大限度地減少除錯工作。 - **協作**：促進同步團隊合作，以交付有影響力的 AI 功能。 **加入社群**： 加入他們的 [Discord 社群](https://pezzo.cc)，成為 Pezzo 創新之旅的一部分。透過為他們的 GitHub 儲存庫加註星標來為他們的使命做出貢獻並支持他們！ [在 GitHub 上給 Pezzo 一顆星](https://github.com/pezzolabs/pezzo) 🌟，加入 AI 維運革命！ https://github.com/pezzolabs/pezzo ## [Swirl：人工智慧驅動的多來源搜尋平台](https://github.com/swirlai/swirl-search)  **GitHub 儲存庫**：[GitHub 上的 Swirl](https://github.com/swirlai/swirl-search) **網站**：[Swirl](https://swirl.today/) **描述**： Swirl 是一款創新的開源軟體，它利用人工智慧同時搜尋多個內容和資料來源。它使用人工智慧對結果進行排名，獲取最相關的部分，並使用生成式人工智慧來提供從您自己的資料得出的答案。該工具對於整合和從各種資料來源中提取有價值的見解特別有用。 **主要特徵**： - **人工智慧驅動的搜尋**：同時搜尋多個來源，提供人工智慧排名的結果。 - **生成式人工智慧整合**：使用熱門搜尋結果提示生成式人工智慧提供全面的答案。 - **多樣化資料來源連線**：連接到資料庫（SQL、NoSQL、Google BigQuery）、公共資料服務以及 Microsoft 365、Jira、Miro 等企業來源。 - **可自訂和可擴展**：提供靈活的平台，用於資料豐富、實體分析以及整合各種應用程式的非結構化資料。 **加入社群**： 參與 Swirl 社區並貢獻您的想法！加入 [Swirl Slack 社群](https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw)，並透過為他們的儲存庫加入星標來支持他們的成長。 [GitHub 上的 Star Swirl](https://github.com/swirlai/swirl-search) 並成為這令人興奮的人工智慧搜尋演化的一部分！ 🌟 https://github.com/swirlai/swirl-search ## [DeepEval：LLM評估架構](https://github.com/confident-ai/deepeval)  **GitHub 儲存庫**：[GitHub 上的 DeepEval](https://github.com/confident-ai/deepeval) **網址**：【Confident AI】(https://www.confident-ai.com/) **描述**： DeepEval 是大型語言模型 (LLM) 的開源評估框架。它簡化了 LLM 應用程式的評估，類似於 Pytest 進行單元測試的操作方式。 DeepEval 因提供一系列專為 LLMs 量身定制的評估指標而脫穎而出，使其成為嚴格績效評估的生產就緒替代方案。 **主要特徵**： - **多樣化的評估指標**：提供由 LLMs 評估或透過統計方法和 NLP 模型計算的多種指標。 - **自訂指標建立**：允許輕鬆建立自訂指標，無縫整合到 DeepEval 的生態系統中。 - **批量資料集評估**：以最少的編碼工作促進整個資料集的評估。 - **與 Confident AI 整合**：能夠即時觀察評估結果並比較不同的超參數。 [在GitHub上Star DeepEval](https://github.com/confident-ai/deepeval)並為LLM評估架構的進步做出貢獻！ 🌟 https://github.com/confident-ai/deepeval ## [LiteLLM：通用LLM API介面](https://github.com/BerriAI/litellm)  **GitHub 儲存庫**：[GitHub 上的 LiteLLM](https://github.com/BerriAI/litellm) **網站**：[LiteLLM 文件](https://docs.litellm.ai/docs/#quick-start/) **描述**： LiteLLM是一個開源工具，使用戶能夠使用統一的OpenAI格式呼叫各種LLM API。它支援廣泛的供應商，如 Bedrock、Azure、OpenAI、Cohere、Anthropic、Ollama、Sagemaker、HuggingFace、Replicate 等，提供與 100 多個LLMS合作的簡化方法。該工具對於以一致且高效的方式簡化不同LLMS的整合和利用至關重要。 **主要特徵**： - **通用 API 格式**：方便使用標準化 OpenAI 格式呼叫不同的 LLM API。 - **支援廣泛的LLMS**：與眾多LLMS提供者相容，包括 OpenAI、Azure、Cohere 和 HuggingFace 等主要提供者。 - **一致的輸出和異常映射**：確保統一的輸出結構並將跨提供者的常見異常映射到 OpenAI 異常類型。 - **易於使用**：支援批量操作並簡化與LLMS的交互，使其更適合各種應用程式。 **加入社群**： 參與 LiteLLM 的開發並分享您的改進！克隆存儲庫，進行更改並提交 PR。 [在 GitHub 上星標 LiteLLM](https://github.com/BerriAI/litellm) 並立即簡化您與LLMS的工作！ 🌟 https://github.com/BerriAI/litellm ## [Qdrant：人工智慧高效能向量資料庫](https://github.com/qdrant/qdrant)  **GitHub 儲存庫**：[GitHub 上的 Qdrant](https://github.com/qdrant/qdrant) **網址**：[Qdrant](https://qdrant.tech/) **描述**： Qdrant是專為下一代AI應用量身定制的高性能、大規模向量資料庫。它是一個向量相似性搜尋引擎和資料庫，透過易於使用的 API 提供生產就緒的服務。 Qdrant 對於神經網路或基於語義的匹配、分面搜尋以及其他需要有效處理具有相關負載的向量的應用特別有效。 **主要特徵**： - **豐富的資料類型和查詢規劃**：支援多種資料類型和查詢條件，包括字串比對、數值範圍、地理位置等，並利用有效負載資訊進行高效率的查詢規劃。 - **硬體加速和預寫式日誌記錄**：利用現代 CPU 架構實現更快的效能並確保資料持久性和可靠性。 - **分散式部署**：支援水平擴展，多台 Qdrant 機器形成集群，透過 Raft 協定進行協調。 - **集成**：輕鬆與 Cohere、DocArray、LangChain、LlamaIndex 等平台集成，甚至與 OpenAI 的 ChatGPT 檢索插件集成。 **加入社群**： 成為 Qdrant 社區的一部分並為這個創新專案做出貢獻。加入他們的 [Discord](https://qdrant.to/discord)。 [GitHub 上的 Star Qdrant](https://github.com/qdrant/qdrant) 並幫助塑造 AI 中向量資料庫的未來！ 🌟 https://github.com/qdrant/qdrant --- ### 衷心的感謝 您有興趣探索和了解這些新創公司正在研究的不同主題。成為他們社群的一部分肯定會幫助您成長並了解不同的軟體和人工智慧領域。 --- 原文出處：https://dev.to/fast/these-5-open-source-ai-startups-are-changing-the-ai-landscape-59dg
我們正在開發 [Wasp](https://github.com/wasp-lang/wasp) - 一個基於 React、Node.js 和 Prisma 建置的全端 Web 框架。自從 GPT 出現以來，我們想知道是否可以使用它來更快地建立 Web 應用程式。這讓我們想到了 [MAGE - 一個由 GPT 驅動的 Web 應用程式產生器](https://usemage.ai/)，它可以根據簡短的描述建立完整的堆疊程式碼庫。 我們已經寫過[MAGE 可以（和不能）做什麼](https://dev.to/wasp/gpt-web-app-generator-let-ai-create-a-full-stack-react-nodejs-codebase-based-on-your-description-2g39)和[它在幕後的工作原理](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)。這是關於它的起源和採用的故事 - 為什麼我們決定建立它，開發人員如何發現它，以及他們實際上用它做什麼。 ## 為什麼要建構另一個 AI 編碼代理？ 我們很晚才進入整個 GPT 編碼代理遊戲。在我們開始考慮建立自己的工具之前，Smol AI、GPT Engineer 和 MetaGPT 等工具就已經受到了廣泛的關注，我們對此也很清楚。  那為什麼還要麻煩呢？事實是，這些代理程式都不是專門為建立 Web 應用程式而設計的，而這正是我們看到機會的地方。 儘管使用 GPT 代理進行編碼可以讓人感覺超級強大，但它們通常會很慢並且沒有抓住要點，需要多次迭代，最終使該過程相當麻煩且昂貴。 有了這些經驗，我們想知道，*「如果我們為特定堆疊中的 Web 應用程式製作一個高度專業化的編碼代理，而不做其他事情會怎麼樣？它能變得更容易、更快、更便宜嗎？」* 儘管我們對此很感興趣，但作為一個兼顧多個優先事項的小團隊，我們仍然相當懷疑，幾乎放棄了整個專案。事實證明，它的效果比我們預期的還要好。 ## 第 1 步：建造它🛠️  在決定 MAGE（*Magic App Generator*）的 v0 版本時，我們考慮了多種選擇。第一個也是最直接的一個是將其與 Wasp CLI 集成，因為我們已經擁有了圍繞它的所有工具。然後，開發人員將執行“wasp new myProject -ai”，而不是執行“wasp new myProject -ai”，CLI 會要求他們提供應用程式描述和其他所需的輸入，然後在終端中完成所有工作。 另一方面，我們知道在開始描述您的應用程式之前下載並安裝 Wasp 是一個很大的要求。最重要的是，CLI 中的使用者介面功能非常有限。這就是我們選擇網路介面的原因 - 零摩擦開始，我們可以讓應用程式建立流程變得非常簡單且美觀。 花了幾週的時間來建構它，最終的結果是一個[用Wasp 製作的完全開源的Web 應用程式](https://github.com/wasp-lang/wasp/tree/wasp-ai/wasp-ai)可以在 https://usemage.ai/ 上免費使用，或在本地託管以獲得更多控制和靈活性（例如，使用您自己的 OpenAI API 金鑰）。 ### 超級具體（僅限網頁應用程式）得到了回報！  如上所述，我們的主要賭注是建立一個專門的編碼代理來建立全端 Web 應用程式，而不是其他任何東西，這得到了回報。它使我們能夠預先為代理提供大量上下文和結構，並引入專門的啟發式方法來修復錯誤。此外，由於 Wasp 的高級抽象（例如身份驗證、專案結構、查詢和作業系統等），我們顯著減少了錯誤的表面積。 另一個結果是執行時間顯著減少，甚至更重要的是成本減少。典型的MAGE 建立的Web 應用程式成本在0.10 至0.20 美元之間，而一般編碼代理[同一應用程式的花費可能高達10 美元](https://wasp-lang.dev/blog/2023/08/01/smol-ai-vs-wasp-ai#thoughts--further-considerations)（所有價格均在 OpenAI 23 年 11 月 7 日定價更新公告之前）。 您可以閱讀有關Wasp 內部工作原理的更多資訊[此處](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)，以及它的比較其他編碼代理[此處](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)。 ## 第 2 步：啟動它🚀  開發產品是一回事，但傳播產品並讓人們使用它則完全是另一回事。在我們建立了 MAGE 並在團隊內對其進行了測試之後，問題是下一步該做什麼？我們如何真正聯繫開發人員並開始接收回饋？ ### 社區啟動 - 生命的證明  由於當時我們已經擁有一個[擁有大約 1,000 名成員的 Wasp 社區](https://discord.gg/rzdnErX)，因此我們[發布了 MAGE 作為我們發布週 #3 的一部分](https://wasp-lang.dev/blog/2023/06/22/wasp-launch-week-third#gpt-web-app-generator--friday-waspularity---tutorial-o-thon)。這是一個很好的測試平台，我們可以看到第一個應用程式正在建置。儘管如此，更多的開發人員本可以從更簡單的方式來啟動他們的 React 和 Node.js 專案中受益，但他們卻無法找到 MAGE。 ### 啟動 Product Hunt — 首次「真正」使用  這就是為什麼我們決定在內部社群啟動後將 MAGE 放在 Product Hunt 上。儘管Product Hunt 不是一個特定於開發工具的平台，並且吸引了來自不同背景的人群，但仍然有很多開發人員在使用它，而且我們[之前有很好的經驗](https://www.producthunt.com/products/wasp-lang-alpha/launches) 與它。 Product Hunt 對於[獲得Wasp 的第一批用戶並在GitHub 上獲得1,000 顆星](https://wasp-lang.dev/blog/2022/09/29/journey-to-1000-gh-stars) 至關重要，因此我們想再試一次。 有些人在發布準備工作上投入了大量精力，需要提前幾個月才能準備好，但我們沒有那個時間，只是想盡快完成。我們要求我們的朋友和社區查看 [MAGE on Product Hunt](https://www.producthunt.com/products/wasp-lang-alpha#gpt-webapp-generator-for-react-node-js) 並提供支持我們在發布當天就進入了當天的前十名產品，後來又躋身本週排名第二的開發者工具！ 這就是我們的目標，因為排名前十的產品最終會出現在第二天的電子報中，有超過 100 萬訂閱者閱讀。很快，我們看到建立的應用程式數量顯著增加，新的人開始加入我們的 Discord 社群！ ### 有機成長（又稱「無所事事」）階段 在 Product Hunt 推出後，我們放鬆了行銷工作，因為其他與 Wasp 相關的任務趕上了團隊。我們必須為即將到來的[發布週#4](https://wasp-lang.dev/blog/2023/10/13/wasp-launch-week-four)做準備，所以 MAGE 最終被擱置了。在我們決定投入更多資源之前，我們也想看看社區如何接受它。 我們發布了更多後續文章，「[它是如何在後台工作的](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)”和“[MAGE vs. 一般編碼代理](https://wasp-lang.dev/blog/2023/08/01/smol-ai-vs-wasp-ai)”，獲得平均數量牽引力，但沒有爆炸。我們在 Reddit 和 Hackernews 上也沒有什麼成功，感覺社群已經厭倦了所有的人工智慧內容。 儘管如此，使用 MAGE 建立的應用程式數量持續增長（約 200 個應用程式/天），偶爾會出現小規模爆炸。我們無法真正追蹤用戶來自哪裡 - MAGE 似乎是透過封閉社區和時事通訊中的口碑傳播的。 ### YouTube 和 TikTok 影片 - 病毒式傳播（每天 1,300 個應用程式！） 在我們的第 4 週發布週結束後，我們意識到，在近 2 個月的時間裡，在我們付出最小努力的情況下，MAGE 一直在不斷成長。這向我們表明它具有一定的實際價值，因此我們決定對其進行更多投資。  我們決定與該領域的影響者碰碰運氣。我們不想簡單地支付廣告費用，而是希望與真正對我們正在建立的產品感興趣並且想要客觀地審查 MAGE 的人合作。我們發現 [Matthew Berman](https://www.youtube.com/watch?v=KQrGu8cnwvA&t=2s&ab_channel=MatthewBerman) 涵蓋了 LLM 領域從最新模型到工具的所有內容，他將 MAGE 視為非常適合他的觀眾。 該影片在幾週內就準備好了，當它發佈時，觀看次數很快就達到了約 25,000 次。許多觀眾對透過 Web 介面從單一提示中獲取全端程式碼庫的可能性感到興奮，我們看到使用率和開發人員再次嘗試。  大約一周後，我們看到建立的應用程式數量再次大幅增加，但無法弄清楚它來自哪裡。我們做了一些搜尋，在TikTok 上找到了一位開發者@techfren，他製作了[一個關於它的短影片](https://www.tiktok.com/@techfren/video/7288306291733269778)（MAGE 甚至最終無法在就是那個！），一天之內瀏覽量猛增至 20 萬次，並迅速走紅。如今，它的瀏覽量已接近 100 萬。 ## 現實 - 所有這些應用程式會發生什麼？ 儘管 25,000 個建立的應用程式聽起來令人印象深刻，但退後一步並進一步細分是很好的。 與大多數人工智慧驅動的編碼工具一樣，想要建立自己產品的開發人員和非開發人員都對該領域抱持極大的興趣和好奇心。許多人甚至沒有想要建立的具體專案，但他們熱衷於嘗試一下，看看它是如何運作的。此外，由於法學碩士不是確定性的，因此還沒有任何工具能夠完美執行，並且經常會出現需要手動幹預和編碼知識的小錯誤。 雖然我們對此非常明確(https://wasp-lang.dev/blog/2023/07/10/gpt-web-app-generator#what-kind-of-apps-can-i-build-with-it )和其他[挑戰](https://wasp-lang.dev/blog/2023/07/10/gpt-web-app-generator#challenges)GPT驅動的工具面臨，MAGE仍然吸引了一部分的用戶對建置自己的產品感到興奮，但不精通編碼，需要幫助下載、執行和修復應用程式。另一方面，它是一種非常友好且易於參與 Web 開發和編碼的方式。我們不會阻止非編碼人員嘗試，而是盡可能透明地管理期望。 因此，大約 40% 的所有建立的應用程式都會下載並在本地執行。 ## 結論 事實證明，我們對 MAGE 的實驗非常成功，甚至超越了我們最初的預期。除了許多現有的通用編碼代理之外，高度專業化和結構化的方法可以以低廉的價格產生更好、更一致的結果。 此外，開發人員對啟動全端應用程式的簡單方法（其中包含最佳實踐）感到興奮，並且正在積極尋找這樣的解決方案並在彼此之間共享。 我預計人工智慧輔助的 SaaS 新創公司將成為 Web 開發的未來。如果有人可以使用已經為其應用程式定制的資料模型和 CRUD 邏輯來建立他們的應用程式，那麼為什麼有人會使用通用樣板啟動器呢？另一個問題是誰以及如何具體實現這一點，但我預計未來每個主流框架都會有一個。 ## 祝你好運！ 我希望這篇概述對您有所幫助，並讓您了解建立和行銷新的（人工智慧驅動的）開發工具時幕後的情況。請記住，這是我們獨特的經歷，每個故事都是不同的，因此對一切都持保留態度，只選擇對您和您的產品有意義的內容。 我們祝您好運，如果您有任何疑問或想了解 [MAGE](https://usemage.ai/) 和 [Wasp](https://github.com/wasp-lang/wasp)！ --- 原文出處：https://dev.to/wasp/how-we-built-a-gpt-web-app-generator-for-react-nodejs-from-idea-to-25000-apps-in-4-months-1aol
我是播客的忠實粉絲，這是最被低估的純粹知識資源。播客已成為學習和娛樂領域的革命性媒介。近年來，它們從小眾聽眾的愛好轉變為主流媒體形式。 向兩個或更多經驗豐富的人學習談論特定主題，討論他們在做某事時面臨的挑戰，並分享他們的旅程是很有趣的。 它為解決特定問題和建立獨特的解決方案提供了令人難以置信的見解。您將了解： - 不同的心態以及其他人如何看待事物。 - 人們用來解決問題的各種工具。 - 傑出人物和他們的故事以及他們如何解決特定問題。 - 走出精神泡泡並開始以不同的方式看待事物。 另一個好處是，你透過聽這些播客所獲得的知識會成為你的潛在知識或隱性知識庫。 因此，當您面臨類似領域的挑戰時，從播客中獲得的知識可以為您提供一些時間或路線圖來建立應對挑戰的解決方案。 身為人工智慧愛好者，在知識和資料領域工作。我選擇了 [Vector Podcast](https://www.youtube.com/@VectorPodcast)，因為我對向量資料庫和向量搜尋、它們如何幫助公司建立基於人工智慧的產品等感到好奇。 以下是我推薦的 8 個最佳播客，您可以收聽。 _我正在提供他們的 YouTube 頻道，假設每個人都知道並使用 YouTube。其中大多數也出現在 Apple Podcast、Spotify 等上_ ## [向量播客](https://www.youtube.com/@VectorPodcast)  Vector Podcast 是 Dmitry Kan 博士的創意。研究生研究科學家涉足產品管理和創業。他也曾在赫爾辛基大學講課。 他在搜尋引擎領域、人工智慧和軟體開發領域擁有超過 15 年的經驗，並採訪了人工智慧領域的專業人士和執行長。 一些值得注意的情節是： - 與 Swirl 執行長 Sid Probstein 一起進行搜尋。 - 向量資料庫以及 Weviate 執行長 Bob van Luijt。 - 康納肖頓的搜尋未來。 https://www.youtube.com/@VectorPodcast ## [萊克斯‧弗里德曼](https://www.youtube.com/c/lexfridman)  萊克斯·弗里德曼（Lex Fridman）是一位受歡迎的人物，正因為如此，他可以接待許多著名人物、首席執行官、領導人和頂尖研究人員。把他們帶到麥克風桌前問他們問題（他很擅長這一點。） 他採訪過的一些著名人士包括 Sam Altman、Elon Musk、Guido van Rossum（Python 語言的建立者）、Stephen Wolfram 和 [Goose](https://www.youtube.com/watch?v=QqRV5FD8ob4)。 他也是機器學習講師，您可以在此[播放清單](https://www.youtube.com/playlist?list=PLe8HThjUpqadLD-AewSKkhAyW5Nr4Yq4Z)中查看他們。 ## [知識專案](https://www.youtube.com/@tkppodcast)  知識專案播客由法納姆街的 Shane Parrish 主持，揭示了其他人已經發現的最好的東西，以便您可以將他們的見解應用到您的生活中。 肖恩·帕里什 (Shane Parrish) 的播客和見解無疑令人驚嘆。你必須經歷知識專案才能很好地理解它。 ## [語法](https://www.youtube.com/@syntaxfm)  來自 30 Days of JavaScript 的 Wes Bos。該播客討論 JavaScript 和 Web 開發。 它涵蓋了一些有趣的主題，從 Web 開發的新功能到 JavaScript 測試和其他主題。 ## [本週機器學習 (TWIML)](https://www.youtube.com/@twimlai)  與 Sam 一起探索人工智慧的最新趨勢和突破，討論將人工智慧驅動的產品推向市場的實際挑戰，並研究人工智慧技術與商業和消費者應用的交叉點。 這個播客不只是一次對話；更是一次對話。它是理解和利用機器學習和人工智慧的全部潛力來改善我們的生活和社區的門戶。我非常喜歡這個播客！ ## [變更日誌](https://www.youtube.com/@Changelog)  變更日誌不只是播客的集合；這是一個充滿活力的社區，為處於各個階段的開發者提供豐富的資源。 無論您是經驗豐富的專業人士、好奇的初學者，還是介於兩者之間，我們的節目和資源都會提供與開發人員體驗產生共鳴的寶貴見解、討論和故事。 ## [談 Python](https://www.youtube.com/@talkpython)  Talk Python to Me 是由 Michael Kennedy 主持的每周播客。本節目涵蓋各種 Python 和相關主題（例如 MongoDB、AngularJS、DevOps）。 ## [超越編碼](https://www.youtube.com/@BeyondCoding)  帕特里克·阿基爾 (Patrick Akil) 和他的客人分享了他們的旅程和觀點，供您隨身攜帶並形成自己的旅程和觀點。 Beyond Coding 是一個每周播客，以爐邊聊天的形式進行「超越編碼」的對話。典型的主題是軟體工程、領導力、溝通、自我提升和幸福。 --- 💡***有趣的事實：*** 您知道「播客」來自 iPod 和廣播的融合嗎？ ## 結論 我希望您喜歡本文中介紹的播客清單。如果您有任何建議，請隨時在評論中分享。 **在 YouTube 上查看向量播客** 我們致力於為您提供有關人工智慧、大型語言模型等方面的一流內容。 嵌入 https://www.youtube.com/watch?v=vhQ5LM5pK_Y https://www.youtube.com/@VectorPodcast 謝謝閱讀。 --- 原文出處：https://dev.to/vectorpodcast/these-8-podcasts-will-help-increase-your-knowledge-and-expand-your-mindset-5lb
我有 15 年的經驗，用多種語言寫程式碼，解決了多種問題。當軟體開發成為熱門職業時，我開始了我的職業生涯。 看看我們周圍發生的事情，我必須說幾句話，我會保持現實。事情可能聽起來很刺耳，但這比在鴉片中洩漏要好。 ## 不要參加程式設計訓練營 別報名了。只是學習程式設計三個月，沒辦法讓你找到工作。為什麼？這麼短時間內，你無法學會如何編碼，這是不可能的。 在黃金歲月年代，當訓練營熱潮開始時，我在一家從訓練營招募了許多初級開發人員的公司工作。然後他們意識到大多數人幾乎無法建立一個專案，並且只能夠慢慢編寫簡單的 http 控制器。這還不足以稱自己為開發人員。他們試圖透過為他們留下一位專門的高級開發人員來回答他們的問題（有點像專門的導師）來對他們進行更多的教育。在學到一些東西之後，有幾個人抓住了這個機會，離開了工作崗位，去從事薪水稍高的工作。他們的管理層很不高興。然後，裁員開始了。 大多數處於這種地位的人做了什麼？他們中的大多數人都專注於保住工作、更好地「推銷自己」並試圖給老闆留下深刻的印象。沒有人真正專注於學習如何更好地編碼。另外，如果你試圖用閒聊/快語來給別人留下深刻印象，那只能表示你沒有技巧並且沒有把握。 結論？程式設計訓練營/程式設計學校承諾他們在學習幾個月後可以獲得六位數的工作，這純粹是一個騙局。然後，大多數人無法應對這個問題，或以非生產性的方式應對。別這樣。花更多的時間學習就對了，不要期待別人把知識強加在你身上。 ## 人工智慧如何影響就業？ 當我 15 年前開始工作時，作為一名知識很少的初級開發人員進入就業市場是可能的。 現在，要開始工作，您需要比 ChatGPT 更好，簡單明瞭。如果人工智慧可以在更短的時間內完成相同數量的工作並且成本降低約 100 倍，為什麼有人會僱用初級員工？ 這意味著切入點更高。以前，你可以從初級開始，然後每隔幾個月加薪，然後慢慢晉升到高級。 現在，你不能。首先，你不會找到工作，即使你找到了，你至少必須是一名開發人員，因為你正在與人工智慧競爭。 結論？沒有什麼好的辦法可以緩解。您應該嘗試發布您的應用程式和其他數位產品。這聽起來很殘酷，但這可能比找到工作更容易。此外，您的應用程式/數位產品可能會開始賺錢。 ## 獨立 如果您找到了一份編碼工作，請保持獨立。只問幾個關於如何在技術堆疊中做事的問題。人們一開始可能會告訴你，多發問總是不會錯，但實際上，有些發問是不對的。你的工作，大多數事情本來就都應該由你自己解決。 假設該公司以每月 1 萬美元的價格僱用一名高級開發人員，以每月 2 萬美元的價格僱用一名初級開發人員。假設初級開發人員每天花 2 小時（高級開發人員時間的 25%）來跟資深工程師發問。在這種情況下，企業每月會損失 2500 美元的高級開發人員時間，並且還必須每月向初級開發人員支付 2000 美元。因此，公司因僱用您而每月損失 4500 美元。 你認為會發生什麼事？是的，我看到有人因此被解僱。有些企業已經為初級員工入職做好了準備，但這樣的企業卻很少。 另外，期待別人會幫你一點點就好了。你必須擁有自己的知識。人們會幫助你，但不要做到妨礙別人工作的程度。 ## 程式設計課程不會幫助你 你就多開發就對了。寫很多程式碼就對了。不要花錢購買另一門課程或另一個「對初學者來說鼓舞人心的例子」——它們中的大多數都是毫無價值的。相信我，即使你感到沮喪，你能做的最好的事情就是**做**一些東西——任何專案、應用程式、網站。它會帶給你比永久保持初學者/學習心態更有價值的價值。 真正有用的技能是學習如何直接從框架/程式語言文件中學習而不是依賴加工過的知識。 ## 專注於一件事 科技日新月異；每個月都會出現新的框架和函式庫。轉換技術總是存在著誘惑，但這樣你只能學到一點東西。我保證，作為一個優秀的普通 JS 開發人員，你會比一個幾乎不知道八個最受歡迎框架的 JS 開發人員帶來更多的價值。 ## 總結 專注於快速產生良好的、可維護的程式碼，保持獨立，並在實踐中學習。 基本功是目前市場最缺乏的。 --- 原文出處：https://dev.to/mcharytoniuk/to-junior-developers-2ec5
### console.log 拿掉吧。 刪除生產程式碼中的 console.log 對於防止敏感資訊洩漏並提高效能非常重要。 ### 控制台錯誤和警告 調查並修復。 解決生產程式碼中的控制台錯誤對於保持流暢且無錯誤的使用者體驗非常重要。 ### TypeScript 中的 any 把型別設定好吧。 應盡量減少在 TypeScript 中使用“any”，轉而使用明確類型，以增強程式碼的可靠性和可維護性。 ### 註解未使用的程式碼 刪掉吧。 註解掉未使用的程式碼是一種不好的做法，因為它會使程式碼變得混亂，妨礙維護，並可能導致註解資訊過時。 ### 超級元件和功能 如果您的元件很大，那麼就該將其分成更小的元件了。 想想 SOLID 的古老原則「單一職責」。 無論您是編寫函數程式碼還是類別程式碼。 ### 多次重寫CSS 為了阿達·洛夫萊斯、艾倫·圖靈和蒂姆·伯納斯·李的愛… 不要重複重寫顏色、字體和大小，使用設計標記來發揮自己的優勢，建立全域 CSS 變數或使用函式庫。 與您的團隊討論使用設計令牌的優勢。 ### 忽略 Linter 的標誌 範例：使用 `/* eslint-disable @typescript-eslint/no-unused-vars */` 修復你的程式碼。 不要傳送帶有 linter 錯誤的 Pull 請求。 如果您確實需要忽略，請仔細考慮可以忽略哪些 linter 警告。 ### 重新渲染和循環消耗大量資源或崩潰 範例：JavaScript 循環函數或 React 中的 useEffect 應用不佳。 這可能會導致 API 呼叫或值無限重複，從而導致記憶體溢出並導致應用程式崩潰。 修正你的邏輯。 * 注意：您的應用程式在瀏覽器中執行並消耗有限的最終用戶記憶體資源。 ### 前端的業務規則 請勿放置且不允許。 人們普遍認為，任何前端應用程式都不能有業務規則，只有使用者介面固有的規則，用於互動和使用者的成功旅程。 前端是客戶端，不是伺服器。 大公司和企業級應用程式採取的做法是不將業務規則和資料處理暴露在前端，而將其放在後端。 * 注意：對於簡單的無伺服器 Web 應用程式或參考第三方 API 的應用程式，可能有必要在前端放置一些業務規則 - 小心不要向客戶端暴露敏感或成本高昂的處理。 ### 不測試的文化 在您的程式碼庫上進行測試。沒有程式碼是完美的。 單元、整合、安全性、使用者體驗、效能和可存取性測試。使用測試工具產生錯誤報告和改進以糾正您的應用程式。 範例：部署管道中的 Cypress、Lighthouse、SAST 等。 與使用者體驗、品質保證和網路安全/滲透測試團隊合作（如果您公司有）。 ### 溝通恐懼 你是一個人。 當您遇到困難時，請致電其他開發人員或技術主管來分享您面臨的問題。 透過結對程式設計和共同思考，可以更快解決問題！ 請記住：他們曾經處於您的位置並且會提供幫助！ --- 我希望你喜歡！ 😃✌🏻 **你還有更多的TIPS嗎？** 支持我在 [Patreon.com/lucasm](https://patreon.com/lucasm) 上的工作 --- 原文出處：https://dev.to/lucasm/frontend-best-practices-guide-or-dont-do-it-on-frontend-32n4
## 介紹 Web 開發人員社群致力於建立能夠吸引目標受眾注意力的網站。成員總是在學習新的東西並創造有影響力的東西。這意味著生產力在他們的成功之路上發揮著重要作用。 網路上有許多我們可以遵循的技術來提高我們的生產力。 Chrome 擴充功能就是這樣一種技術，它使我們能夠提高我們致力於技術的辛勤工作的成果。 在本文中，我們將發現 10 個有用的 Chrome 擴充程序，它們可以提高 Web 開發人員的工作效率並讓我們的生活變得更美好。 ## Loom  [Loom](https://chromewebstore.google.com/detail/loom-%E2%80%93-screen-recorder-sc/liecbddmkiiihnedobmlmillhodjkdmb) 是 Chrome 線上應用程式商店中最常用的螢幕錄製擴充功能之一。它使我們能夠記錄螢幕、以圖形方式分享我們的想法並提供即時回應。 ## Window Resizer  [Window Resizer](https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) 調整瀏覽器視窗的大小以複製不同的解析度。它給我們一種個性化的感覺，因為它允許我們加入、刪除和重新排序我們想要測試的解析度清單。 ## 檢查我的連結  [檢查我的連結](https://chromewebstore.google.com/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf) 是一個連結分析器，用於掃描我們的網站是否有損壞的連結。此擴充功能專為網頁開發人員量身定制，因為他們始終致力於使網站內容完美無缺。 ## Wappalyzer  [Wappalyzer](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg) 是一個技術堆疊評估器，列出了用於建立網站的工具和技術。它使我們能夠了解 CMS（內容管理系統）、框架、JavaScript 庫等。 ## Session Buddy  [Session Buddy](https://chromewebstore.google.com/detail/session-buddy/edacconmaakjimmfgnblocblbcdccpbko) 是一個擴展，使我們能夠方便地管理瀏覽器選項卡和書籤。它將打開的選項卡保存為集合，我們可以稍後在任何給定時間點恢復。 ## Lighthouse  [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) 是開源自主工具，用於提高網路應用程式的品質、效率和準確性。它透過在頁面上執行一系列測試來審核頁面，然後產生總結頁面效能的報表。 ## Requestly  [Requestly](https://chromewebstore.google.com/detail/requestly-open-source-htt/mdnleldcmiljblolnjhpnblkcekpdkpa) 讓我們可以使用攔截和修改HTTP 請求、模擬伺服器、API 用戶端和會話記錄來建置、測試和會話記錄來建置、測試和除錯Web 應用程式。它將 Fiddler、Charles Proxy 和更多此類工具的功能引入瀏覽器，並具有有吸引力的現代 UI。 ## Grepper  [Grepper](https://chromewebstore.google.com/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco) 是一個回答開發人員社群查詢的擴充。它使我們能夠從網路上快速提取程式碼片段，然後將其用於我們的專案中，以在我們的旅程中取得進展。 ## BrowserStack  [BrowserStack](https://chromewebstore.google.com/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb) 使我們能夠在桌面或行動瀏覽器上測試我們的網站。對於希望將跨瀏覽器測試作為其開發工作流程不可或缺的一部分的 Web 開發人員來說，這是一個有用的擴充功能。 ## Octotree  [Octotree](https://chromewebstore.google.com/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc) 是一個擴展，可以幫助我們在 GitHub 上進行程式碼審查和探索。使用此工具，我們可以為儲存庫、問題、拉取請求和文件加入書籤，執行快速搜尋並輕鬆導航拉取請求。 ## 結論 我們已經到達終點了！我們上面討論的擴充功能非常有幫助，並且能夠大幅提高工作量。因此，讓我們使用它們，並在各自作為 Web 開發人員的旅程中不斷取得進展。 **快速說明：** > 感謝您花時間閱讀我的文章。這對我來說意義重大，並促使我創作更多這樣的內容。 **我的社交：** - [LinkedIn](https://www.linkedin.com/in/sriparnooy/) - [推特](https://twitter.com/Sriparno08) - [GitHub](https://github.com/Sriparno08) - [CodePen](https://codepen.io/Sriparno08) **我的部落格：** - [展示案例](https://www.showwcase.com/sriparno08) - [DEV](https://dev.to/sriparno08) - [哈希節點](https://hashnode.com/@sriparno08) --- 原文出處：https://dev.to/this-is-learning/10-useful-chrome-extensions-for-web-developers-meg
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
