CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：謝謝

🔍 搜尋結果：謝謝

🐱Product Hunt 已成為付費獲勝💰，但您仍然應該使用它來發布您的產品🚀

我們中的許多人已經在 Product Hunt 上推出了一段時間，**越來越多的人開始質疑那裡的受眾是否真誠，以及是否仍然值得在他們自己的平台上推出**。 一周前剛剛推出了我們的最新產品，我想在這裡分享我們的第一手經驗並涵蓋三個主要內容： - 今天就推出 Product Hunt 的外觀和感覺如何 - 我們從發布中得到了什麼 - 如何（最好）利用 Product Hunt 來開發您的產品 關於我們 - 推出 6 次，超過 2,000 票贊成 -------------------------- 在過去 3 年裡，我們在 Product Hunt 上推出了 6 次，贏得了「最佳產品」獎（當天排名第 1 和第 5 名），並總共收集了超過 2,000 個讚。一週前，我們剛完成了[Open SaaS 的第六次發布，這是 300 美元以上 SaaS 入門產品的開源替代品](https://github.com/wasp-lang/open-saas/)。 ![最近推出](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spu3cpuo64ao50r3227u.png) 您會發現許多文章為在 PH 上推出提供建議，並從那些獲得推薦的人那裡贏得故事，但幾乎沒有人分享幕後知識以及實現這一目標的真正需求。這就是這篇文章的目的。 我將引導您完成啟動步驟並發表評論並分享我們在每個步驟中的經驗。讓我們開始吧： 安排您的發布並建立“即將推出”預告片 - “讓我們交換贊成票” ------------------------------- ![即將推出](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoogy6m4da5ajswtrplg.png) 一旦您安排了Product Hunt 的發布，您就可以建立一個橫幅，顯示在他們的「即將推出」頁面(https://www.producthunt.com/coming-soon) 上，這就是您的旅程開始的地方。這使 PH 訪客有機會了解接下來會發生什麼，並訂閱以在發布後收到通知，這也是您可以用來行銷您的發布的第一個東西。 **這也是 PH 經濟開始的時候 - 一旦您發布發布預告片，您將開始收到與其他即將推出其產品的人交換贊成票的報價**： ![預告片幫助我們](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aznuya45vj10t8mzysxf.png) 這實際上是一種合法的策略（從共享激勵而不是購買選票的意義上來說），可以透過自動化非常有效地利用。它不會帶來任何合格的潛在客戶（也就是真正對您的產品感興趣的人），但它可能有助於獲得投票，從而提高您的產品發布的知名度和影響力。 我們根本沒有使用過這個策略（所以我無法證明它的效率），因為我們很晚才發布“即將推出”頁面，就在發布前一兩天，而且我們也沒有工作流程沒有地方也沒有人力來完成它。 Linkedin、WhatsApp 和其他平台上也有專門的小組，讓 PH 參與者可以互相支持。如果您加入這些活動，您將會收到更多此類訊息和請求。 發布日 - 主動發送的電子郵件和「購買投票」優惠 ------------------------ 發布當天，類似上述的要求愈加強烈。我甚至收到了其他人在同一天推出產品的幾封電子郵件，要求我投票，因為他們刪除了我的電子郵件並將我加入到他們的時事通訊中。 ### 當天的前 4 小時 - 隱藏點讚 Product Hunt 最近推出了在一天的前 4 小時內以隨機順序顯示產品的功能，並隱藏點讚數。背後的想法是保證所有產品一開始就有平等的知名度，並有公平的機會吸引觀眾的注意。 隨著我們最新推出的 Open SaaS，我們取得了有史以來最好的開局 - 4 小時內獲得 100 票贊成！ ![開幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2b7i5ddfk8k37m0g089.png) 當然，我們參與了我們的網絡，但也注意到來自我們不認識的人的大量投票和評論。有瞭如此強勁的開局，我非常有信心我們能躋身排行榜前 5 名產品之列。 > 進入前 5 名產品是 Product Hunt 主頁上的「首屏」位置，因此儘早到達那裡是最終進入該位置的最佳方式。 > 但當排行榜最終揭曉時，Open SaaS 勉強躋身當天發布的前 10 名！ ![排行榜揭曉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck8hbz4oiamhkj99z5gu.png) 前五名與其他產品之間存在著相當明顯的差距，第一名的產品的支持率幾乎是第二名的兩倍。**這對我們來說相當沮喪，因為感覺我們追趕的機會幾乎是零。** ### “嘿，想買點讚嗎？” 排行榜揭曉後，我們開始收到另一種類型的訊息——直接購買點讚的報價。仍然相對接近前 5 名的產品可能使我們成為一個非常合格的領導者： ![購買贊成票](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n20qhgmvpk72zu5t8ojk.png) 與此略有不同的是，讓不同的社群媒體影響者和社群所有者伸出援手，向他們的追隨者推銷您的產品，並承諾獲得 X 票： ![購買優惠2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo7qlwcgpafek2g4bd36.png) ![進入前 3 名優惠](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1ndsehw06oax11uh2gu.png) 甚至我們的一些直接聯絡人也知道“一個人”可以讓你到達 Product Hunt 的頂端，並主動提出介紹我們，所以這有點像一個“公共秘密”，而我們是少數不知道的人關於它。 我們從發布中得到了什麼 - #7、HN 頭版、GitHub 上的趨勢… ----------------------------------- ![推文發布統計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc8wa4vzl6htfrjanxkk.png) **我們 PH 發布的主要好處不是發布本身，而是我們可以將其與其他東西結合起來，例如**[在 HackerNews 上發布 Open SaaS](https://news.ycombinator.com/item?id=39192304) **，**它最終在其中展示了大約半天（在 Show 上展示的時間更長） HN 選項卡）。 ![恩頭版](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve2jf1qjy649sxe6gofu.png) 最後，所有這些參與度加起來讓我們能夠在 GitHub 上獲得全球趨勢，這反過來又為 Open SaaS 帶來了更多流量（今天，在發布一周後，它已經擁有[超過 2500 顆星](https://github.com/wasp-lang/open-saas/)）。 ![gh 推文趨勢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfvramertsi8cyim0uyk.png) ### 由此產生的流量 看看過去兩週 Open SaaS 儲存庫帶來的流量，我們可以觀察到以下內容： ![回購訪客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tw0kbqfkd520egehfaq.png) ![回購參考網站](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qxz1awc2fm4bwaufj8s.png) HackerNews 的推出吸引的人數是 Product Hunt 的三倍多。 GitHub 吸引了更少的人存取實際的儲存庫，但我的直覺是，更多的人在沒有離開「趨勢」頁面的情況下加註了星標。 在 PH 的每日時事通訊中獲得專題報告 - 有幫助嗎？ --------------------------- ![被刊登在 ph 通訊中](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bxgy7jtmpljx9egwpn4.png) Open SaaS 在發布結束時成為當天排名第七的產品，獲得約 400 票贊成。根據 Product Hunt 的資料，當日排名前 10 名的產品最終會出現在擁有超過 50 萬訂閱者的每日新聞通訊中。 該時事通訊以 3 個大型促銷區塊開始，因此您必須滾動相當長的時間才能到達前一天的熱門產品。 ![時事通訊滾動](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uumomkgthubjwwphce5f.gif) 對我們來說，它並沒有產生太大的影響，我認為它為我們贏得了大約 20 票。也許是因為我們不是第一，或者只是因為它是一個相當深的漏斗（打開電子郵件 → 一直向下滾動 → 檢查所有產品 → 喜歡 Open SaaS → 決定投票）。 ![ph 讚圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p92a0r19refow1wkxh19.png) 在沒有任何提升策略的情況下是否有可能贏得當天的第一名？ --------------------------- **是的，這絕對是可能的。我已經得到了幾個我信任的聯絡人的證實，他們用他們的產品贏得了第一名，沒有任何機器人或支付贊成票。**但它也肯定變得不那麼常見和難以預測。 大多數時候，我們推出的產品首先會表現出一些不尋常的行為。有一次，是該公司在前一周推出，但他們只是稍微重新命名了產品和網站，然後重新推出。還有一次，一款產品在發布結束前幾個小時突然獲得了很高的支援率。 那麼，這意味著什麼？它還值得在 Product Hunt 上推出嗎？ ---------------------------------- 顯然，今天雙方都有不同的力量和動機驅動 Product Hunt 用戶的行為。最初，有一個社區想要了解最新產品並表達他們的興趣，並且有一些創始人想要連接到該社區。 **現在，也有一些創作者最希望自己的產品獲勝，無論實際的受眾參與度如何，因為他們相信這將有助於他們實現最終目標，例如影響範圍、籌款或對其他用戶的社會認可。顯然，有一方願意滿足這項需求，但對產品並沒有任何真正的興趣。** 為什麼這可能？ Product Hunt 正在採取許多措施來偵測和防止此類行為，但如果不嚴格限制 Product Hunt 所追求的網路效應（即能夠分享您的啟動連結），就很難做到這一點。 **除此之外，對我們來說，定期在 Product Hunt 上發布仍然是值得的。原因如下。** 產品搜尋是一個很棒的藉口 ------------ Product Hunt 為您提供了一個獨特的機會來宣布您的產品「正式」發布。您可以決定在哪一天執行此操作並安排時間，並且 100% 所有人都能看到它，您也可以分享並邀請人們查看。**你有 24 小時的時間，在此期間，你完全有理由聯繫你認識的每個人（以及其他人）並繼續按喇叭。** ![打開 saas ph 推文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vazu6ezrf5goukk6mk3.png) **Reddit 和 HackerNews 等其他高影響力平台無法做到這一點。**當然，您可以隨時分享有關您產品的新聞，但不能保證任何人都會看到它（實際上恰恰相反），除非社區的集體思想決定如此，這幾乎是確定性的。您可以輕鬆地花費一周的時間來準備您的發布帖子，但它會在幾分鐘內被演算法淹沒。 **這就是為什麼我們不將 Product Hunt 視為最終目標（贏得第一名），而只是將其視為我們整個發布過程的一部分。這是一個很棒的講台，也是一個談論你的產品的好藉口，而上面的任何其他東西都只是一個額外的好處。** 我們保持簡單 ------ 您會發現很多來自「PH 專家」的文章（和付費課程），解釋您應該如何提前幾個月準備發布、預熱您的受眾、準備他們將分享的評論等。**我們不做任何這些事情。我們只需準備內容（影片+一些螢幕截圖和介紹性評論），然後在發布當天邀請我們認識的所有人支持我們。然後，白天我們也會在 Reddit、Hackernews 和 dev.to 上發文。** ![法師成長圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy7kdtpyyok5hgkm00js.png) 有時我們最終會進入前 5 名，有時則不然，**但每次，我們的用戶參與度都會穩步提升，並且通常會在接下來的幾天/幾週內出現更好的結果**。例如， [MAGE，我們基於 GPT 的全端應用程式啟動器](https://usemage.ai/)，在 PH 發布後就出現了爆炸性增長，並[在幾個月內被用來建立了 30,000 多個專案](https://dev.to/wasp/how-we-built-a-gpt-web-app-generator-for-react-nodejs-from-idea-to-25000-apps-in-4-months-1aol)。 我們經常這樣做 ------- 我們的目標是每 3 個月發布一次 Product Hunt，作為發布週的一部分，這就是我們迄今為止所做的。除非 6 個月過去了或有重大更新，否則您無法真正推出完全相同的產品，但您可以自由地推出與主產品相關的其他（子）產品和功能。 > **💡 提示**：當您提交發佈時，您可以要求 PH 團隊將其「連接」到您的產品，以便它將出現在該產品的發布清單中。通常，他們自己做。它看起來像這樣： ![黃蜂全部發射](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xebrqdzvk5kcs7tpr1bk.png) 雖然我們的主要產品是[Wasp，一個基於 React 和 Node.js 的全端框架](https://github.com/wasp-lang/wasp)，但到目前為止我們推出的產品如下： - **Wasp Alpha** - 純產品，v0 差不多 - **Wasp Beta** - 差不多兩年過去了，我們還沒有採用「經常發布」的方法 - **免費 SaaS 模板**- [Open SaaS](https://github.com/wasp-lang/open-saas)的前身，4 個月後 - [\*\*MAGE，GPT Web 應用程式產生器](https://usemage.ai/)\*\* - 由 Wasp 提供支援的全端 Web 應用程式產生器 - [**React/Node 的全端身份驗證，無第三方服務**](https://wasp-lang.dev/docs/auth/overview)- Wasp 的身份驗證功能 - 最後， **[Open SaaS - 300 美元以上 React 和 Node.js SaaS 初學者的免費開源替代品](https://github.com/wasp-lang/open-saas/)** 它已成為我們發布工作流程的常規部分，對於我們在該季度推出的任何新功能，我們都會尋找一個好的候選人在即將推出的發布中展示。這使我們能夠繼續談論我們所做的事情，並且我們還獲得了很多可以嵌入到我們的文件、部落格文章等中的好內容（例如影片、橫幅）。 例如，這個影片展示了 Wasp 中的身份驗證如何運作 - 首先我們將它用於我們的[Product Hunt 發布](https://www.producthunt.com/products/wasp-lang-alpha#full-stack-auth-for-react-node-by-wasp)，現在它[位於我們的身份驗證文件的頂部](https://wasp-lang.dev/docs/auth/overview)。 {% 嵌入 https://www.youtube.com/watch?v=Qiro77q-ulI&ab\_channel=Wasp %} 謝謝閱讀！ ----- 感謝您閱讀本文！這篇文章比我最初預期的要長得多，但我不斷獲得更多關於要寫什麼的想法。我希望您會發現它對計劃下一次發布有所幫助，並且您也會更好地了解在此過程中會發生什麼。 我也很想得到您的回饋，並了解您在 Product Hunt 上推出的經驗和策略。 快樂發射！ --- 原文出處：https://dev.to/wasp/product-hunt-has-become-pay-to-win-but-you-should-still-use-it-to-launch-your-product-508d

0個讚   0留言 94瀏覽

個人專案 - 這樣做夠安全了嗎？

大家好，最近以工作上不太有機會用到的技術來練習專案： https://goods.carrier.express 使用 Astro + Solid.js，搭配 Sanity.io 當作內容管理 除了想要獲得操作的流暢度回饋以外， 還想要知道「**夠不夠安全**」？ 其實也只是 secret key 放在 environment variable。 之前曾經以相同的方法取用 secret，在面試時，對方一下子就從瀏覽器挖出使用的 secret， 感覺很像當場被扣到 0 分， 事後在社群問怎麼解決，得到回饋大多是「前端沒有秘密」。 想知道怎麼做，才可以在安全問題達到基本要求呢？謝謝！

0個讚   3留言 237瀏覽

我正在建立一個人工智慧專案：這是我將要使用的程式庫......

有了正確的函式庫，任何開發人員都可以在他們的應用程式中建立強大的人工智慧功能（如 Ninja 🥷）。 在此列表中，我編譯了 7 個很棒的 AI 庫，您現在可以使用它們（相對）輕鬆地發布功能。 不要忘記為這些圖書館加註星標以表達您的支持。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqoipyuoxgb83swyoo4a.gif) https://github.com/CopilotKit/CopilotKit --- 1. [CopilotPortal](https://github.com/CopilotKit/CopilotKit) ：建構應用程式原生人工智慧聊天機器人 ------------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x1bwwzvc2mnrfrvsqn7.png) 應用程式內人工智慧聊天機器人助理可以「查看」您目前的應用程式狀態並在前端和後端採取操作。 一組完全可自訂的反應元件和掛鉤以及用於建立 LLM 和您的應用程式之間互動的架構。 定義*useMakeCopilotReadable* 、 *useMakeCopilotActionable*和*CopilotSidebarUIProvider*使其運作。 ``` 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/CopilotKit/CopilotKit --- 2. [RAGxplorer](https://github.com/gabrielchua/RAGxplorer) - 視覺化並探索您的 RAG 文件 ---------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z365bk6wa7i4md3w4b5z.png) RAGxplorer 是一個 Python 工具，用於視覺化機器學習和自然語言處理中的 RAG（檢索增強生成）文件。 以互動方式探索 RAG 流程中使用的文件中的聯繫和內容。 若要設定 RAGxplorer，請在程式碼中定義 RAG 檢查點路徑並安裝指定的依賴項。 ``` import streamlit as st from utils.rag import build_vector_database st.set_page_config(page_title="RAGxplorer", page_icon="🔍") uploaded_file = st.file_uploader("Upload your PDF", type='pdf') query = st.text_input("Enter your query") search = st.button("Search") top_k = st.number_input("Number of Chunks", value=5, min_value=1) st.session_state["chroma"] = build_vector_database(uploaded_file, ...) st.session_state['retrieved_id'] = query_chroma(...) plot_embeddings(...) ``` https://github.com/gabrielchua/RAGxplorer --- 3. [Tavily GPT 研究員](https://github.com/assafelovic/gpt-researcher)- 獲得法學碩士以搜尋網路和資料庫 ----------------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4accv5t5ep1l1tkj4ze2.png) Tavilly 可讓您將 GPT 支援的研究和內容產生工具新增至您的 React 應用程式中，從而增強其資料處理和內容建立功能。 ``` # Create an assistant assistant = client.beta.assistants.create( instructions=assistant_prompt_instruction, model="gpt-4-1106-preview", tools=[{ "type": "function", "function": { "name": "tavily_search", "description": "Get information on recent events from the web.", "parameters": { "type": "object", "properties": { "query": {"type": "string", "description": "The search query to use. For example: 'Latest news on Nvidia stock performance'"}, }, "required": ["query"] } } }] ) ``` https://github.com/assafelovic/gpt-researcher --- 4. [Pezzo.ai](https://github.com/pezzolabs/pezzo) - 開發者優先的 LLMOps 平台 -------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxvbgi5zkghkb0t64npw.jpeg) 用於管理 OpenAI 通話的集中平台。 優化您的提示和令牌使用。追蹤您的人工智慧使用情況。 免費且易於整合。 ``` const prompt = await pezzo.getPrompt("AnalyzeSentiment"); const response = await openai.chat.completions.create(prompt); ``` https://github.com/pezzolabs/pezzo --- 5. [DeepEval](https://github.com/confident-ai/deepeval) - 評估 LLM、RAG 和微調性能 -------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dowjupr91bepvopxsudd.jpeg) DeepEval 是一個開源框架，透過將評估視為單元測試來簡化法學碩士的評估。 它提供了評估 LLM 輸出的各種指標，其模組化設計允許開發人員定制他們的評估流程 要使用它，您需要安裝該程式庫、編寫測試案例並執行這些用例來評估您的 LLM 的效能。 ``` Pytest Integration: from deepeval import assert_test from deepeval.metrics import HallucinationMetric from deepeval.test_case import LLMTestCase test_case = LLMTestCase( input="How many evaluation metrics does DeepEval offers?", actual_output="14+ evaluation metrics", context=["DeepEval offers 14+ evaluation metrics"] ) metric = HallucinationMetric(minimum_score=0.7) def test_hallucination(): assert_test(test_case, [metric]) ``` https://github.com/confident-ai/deepeval --- 6. [CopilotTextarea](https://github.com/RecursivelyAI/CopilotKit) - React 應用程式中的 AI 驅動寫作 ---------------------------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2ctyhzd1hytek22s500.gif) 具有 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 --- 7. [SwirlSearch](https://github.com/swirlai/swirl-search) - 人工智慧驅動的搜尋。 ---------------------------------------------------------------------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8f4hycstwmx2gev8di7.gif) Swirl Search 是一個開源平台，它使用人工智慧同時搜尋多個資料來源並提供有關這些資料的起草報告。 它可以跨各種來源進行搜尋，包括搜尋引擎、資料庫和雲端服務，並且可以按照儲存庫中提供的安裝說明輕鬆設定。 Swirl Search 建置在 Python/Django 堆疊上，在 Apache 2.0 授權下發布，並作為 Docker 映像提供，使其可供使用者存取和自訂。 https://github.com/swirlai/swirl-search --- 謝謝閱讀！不要忘記為文章加入書籤，給出您的反應，並支持和查看提到的很棒的庫。 乾杯! --- 原文出處：https://dev.to/copilotkit/im-building-an-ai-project-here-are-the-libraries-im-going-to-use-pd0

1個讚   0留言 181瀏覽

🏞️5 個可供學習並獲得靈感的開源網路應用程式🙇‍♀️💡

如標題所示，在這篇文章中，我們將介紹您可以學習並用作下一個專案起點的開源 Web 應用程式。堅持到最後，因為那裡有超酷的獎勵等著你！ 在我們開始討論之前，先說幾句智慧之言（希望如此）： ## （開源）榜樣的重要性 ![你很漂亮](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqf1wss7puysn3q0rhso.gif) **從頭開始一個新專案時，您可以做的最有幫助的事情之一就是選擇一個或多個角色模型。**例如，如果您正在建立一個新的生產力應用程式，您可能會關注Trello 等產品或體式。當然，您的應用程式不會相同，並且您可能會想到一些使您的應用程式獨一無二的核心差異，但仍然會有很多您不想重新發明的共享概念和機制。 即使您的角色模型是一個閉源應用程式，您仍然可以透過在野外觀察它來獲得很多價值 - 設計元素、UI、用戶旅程和使用的術語，... **但是現在想像一下，如果您決定學習的應用程式是開源的，並且您可以輕鬆地在 GitHub 上存取其完整原始程式碼 - 這將打開一個全新的可能性世界！** 接下來只需從“外面」並猜測幕後發生了什麼，現在您可以看到每一個細節並了解所做的每一個決定。架構、部署、API 設計、庫和使用的演算法 - 一切都在那裡供您查看！ ## 注意規模（也就是不要過度設計） 另一件需要記住的事情是您的專案目前所處的階段。下面，我們將看到開源 SaaS 應用程式的不同範例，從獨立駭客、「週末建置」副專案到企業級 Web 平台。 **儘管您可能會發現擁有數百萬用戶的專案是一個令人驚嘆的學習資源，但請記住，並非他們所做的一切都是您必須嚴格遵循的。由於他們每天遇到的用戶規模和數量龐大**，他們的架構和設計決策通常會更加複雜。如果您剛開始，最好堅持使用最簡單（但仍然合理）的方法，直到您希望需要更高級的方法。 > 從現在開始，對於我們提到的每個應用程式，我們將使用“T 卹尺寸”方法（S、M、L...），讓您大致了解其尺寸和複雜性（無論是在功能還是功能方面）。使用者。 現在，前言結束了，讓我們一起來看看一些令人驚嘆的開源應用程式，您可以立即開始學習： ![樂趣現在開始](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7z4q2cxeiocgpgj3ofs.gif) ## [CoverLetterGPT](https://coverlettergpt.xyz/) - 人工智慧驅動的 SaaS 的完美起點 💾 **原始碼**：https://github.com/vincanger/coverlettergpt 👕 **尺寸**：S **🛠️ Stack**：Chakra UI、React、Node.js 和 Prisma，由 [Wasp](https://github.com/wasp-lang/wasp) 提供支持 [CoverLetterGPT.xyz](http://CoverLetterGPT.xyz) 是每個獨立駭客的夢想- **它是一個由GPT 支援的SaaS，完全開源，最重要的是，它是人們每天使用並付費的真實產品為了**！根據您的履歷和職位描述，該工具將產生一封專業撰寫的求職信。然後，您可以進一步調整每個段落的語氣或手動編輯。 它非常適合學習，因為它不太大，架構也很簡單，但它具有應用程式中可能需要的所有功能 - 社交身份驗證 (Google)、cron 作業、文件上傳、GPT 集成、透過 Stripe 進行支付集成，甚至可以透過比特幣付款！ CoverLetterGPT 由 React、Node.js 和 Prisma 製成，由 [Wasp 框架](https://github.com/wasp-lang/wasp) 提供支持，它負責所有管道並刪除大量樣板檔案。 **最好的部分是，當您準備好時，可以透過執行單一 CLI 命令來免費部署應用程式**：「wasp deploy」。 <center><h3>🚨注意🚨</h3></center> > 提示：Wasp 團隊最近發布了 [OpenSaaS](https://kdta.io/github-wasp-lang-open_3)，**一個完全免費且開源的 React 和 Node.js 樣板啟動器**。它包含提到的所有內容 + Tailwind、管理儀表板、登陸頁面、部落格等。 [在此處查看](https://kdta.io/github-wasp-lang-open_4) 以更快地開始使用。 ## Supabase Studio - 儀表板傑作🖼️ ![Supabase 工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jc2pz1vhg1wysk7o9148.gif) 💾 **原始碼**：https://github.com/supabase/supabase/tree/master/apps/studio **👕 尺寸**：M/L **🛠️ 堆疊：** Next.js (React)、Tailwind [Supabase](https://supabase.com/) 是一個著名的開源專案，其核心是用 Elixir 編寫的。但是，由於我們在本文中專注於 Web 應用程式，因此我們將看一下 **Supabase Studio - 一個儀表板，您可以在其中查看和管理所有專案。它本身就是一部傑作，而且完全開源！** 該設計是使用 Tailwind 定制的，您可能希望在自己的專案中重複使用許多元素 - 用戶管理、表格、列表等。它還有自己的 AI 集成，用於編寫 SQL 查詢，效果出奇的好。 ## Papermark - 開源 DocSend 替代方案 ✉️ ![papermark_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt76y923xnpjhbglbvmn.png) 💾 **原始碼**：https://github.com/mfts/papermark 👕 **尺寸**：M **🛠️ 堆疊**：Next.js (React)、Tailwind、Prisma [Papermark](https://github.com/mfts/papermark) 最近受到社群的廣泛喜愛，尤其是其簡潔的設計和直覺的介面。雖然從外觀上看起來很簡單，但該應用程式包含許多功能，使一切順利執行：文件上傳、電子郵件發送、內建分析和自訂網域... **如果您正在建立涉及大量文件管理和使用者協作的專案**，這絕對是您應該考慮的專案。 ## [Crowd.dev](http://Crowd.dev) - 開發社群資料平台，使用 Vue 製作 📊👩‍💻 ![crowd_dev_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykd2vxomnrl02j46i7mm.png) 💾 **原始碼**：https://github.com/CrowdDotDev/crowd.dev **👕 尺寸**：M **🛠️ 堆疊：** Vue、Node.js [Crowd.dev](http://Crowd.dev) 是 GitHub 最新的後起之秀之一 - 它是一個用於監控社區活動的平台，無論是在 Slack 還是 Discord 上。如果您正在經營自己的開發者社區，那麼這樣的工具是必須具備的，以便了解正在發生的事情以及最活躍的成員是誰。 它在儀表板方面提供了很多功能，但它的另一個強項是**集成 - 如果您正在建置一個從外部源獲取和處理大量資料的應用程式，那麼這是您的首選角色模型**。如果你是 Vue 愛好者，那就加分了，因為這個專案就是用它製作的！ ## Habitica - 作為角色扮演遊戲的習慣追蹤器🐲⚔️ ![habitica_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g69lfe93k931fyoj1fzv.png) 💾 **原始碼**：https://github.com/HabitRPG/habitica **👕 尺寸**：L **🛠️ 堆疊：** Vue、Bootstrap、SAAS、Node.js、MongoDB [Habitica](https://habitica.com/) 是我見過的最酷的網頁應用程式之一（他們也有 iOS 和 Android 應用程式） - 它可以幫助您透過角色扮演遊戲！想像 Trello 這樣的看板，但對於您完成的每項任務，您都可以獲得 XP 和金幣，甚至可以與朋友組隊接受任務。 Habitica 已經存在 10 年了，它通過 Vue、Node.js/Express 和 MongoDB 的經典堆疊完美地經受住了時間的考驗。 **如果您想了解建立了多麼豐富的互動式 UI，以及執行這種規模的專案需要什麼樣的架構，那麼這個應用程式絕對值得一試。**誰知道，您甚至可能最終成為居住自己！ ## 🏆 **獎勵** 🏆 Appflowy - Rust 和 Flutter 中的概念替代品 🤯 ![appflowy_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlzizemi22g9wkb48yfz.png) 💾 **原始碼**：https://github.com/AppFlowy-IO/AppFlowy **👕 尺寸**：M **🛠️ 堆疊：** Flutter、Rust 如果您走到這一步，您應該得到特別的待遇！這不是一個網絡應用程式，但它太酷了，我無法控制自己 - 它是**一個用 Rust 和 Flutter 建置的 Notion 替代品（因此可以做筆記）**！由於其本地優先的性質，用戶體驗非常流暢，並且它還將所有內容同步到雲端（如果您願意，您可以自行託管）。 **如果您一直在使用 Rust，但也在尋找一個可以每天使用的專案，Appflowy 可能是完美的選擇。** 它擁有從資料儲存到業務邏輯和 UI 的所有內容，全部都包含在其中一個包供您學習並查看您認為最有趣的內容。 ## 就是這樣！我很想聽聽你的訊息🫵 ![that_is_all](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovyclq3iyi3d15kfxcaw.gif) 這就是我們今天的全部內容（*放下麥克風*），非常感謝您的閱讀！我希望您發現它有用和/或有趣。 我在撰寫本文時遇到了很多開源 Web 應用程式，很難只選擇其中 5 個。 **現在，我很想聽聽您的來信 - 您最喜歡的開源應用程式是什麼，以及您如何使用它們？寫在下面的評論👇** 謝謝您，下次再見！ 👋 --- 原文出處：https://dev.to/matijasos/5-beautiful-open-source-web-apps-to-learn-from-and-get-inspired-280f

0個讚   0留言 194瀏覽

我們用於建立人工智慧/資料全端應用程式的開源專案獲得了資助！ 🎉🎉

𝗛𝗶𝗖𝗼𝗺𝗺𝘂𝗻𝗶𝘁𝘆， 我們很高興與您分享這個好訊息：我們上個月完成了 500 萬美元的種子輪融資，以幫助開發人員建立 AI/資料全端應用程式。 𝗧𝗵𝗲 𝗧𝗮𝗶𝗽𝘆 𝗦𝘁𝗼𝗿𝘆 幾年前，Albert 和我在為大型組織領導人工智慧專案多年後，決定是時候過渡到完整的 Python 開發並停止使用傳統的 Java、JS、.Net 堆疊等。 我們非常清楚我們正在尋找哪些功能，但令我們驚訝的是，我們在許多現有的 Python 套件中找不到它們。 我們的使命既簡單又雄心勃勃：提供缺少的磚塊，阻止如此多的人工智慧/資料試點成功部署專案。 特別是，我們希望將最終用戶帶回「人工智慧/資料」畫面。今天我仍然驚訝地發現，關於最終用戶的提及如此之少：從資料科學家到資料工程師，都是關於資料流、公開演算法等？沒有提及人類將如何與人工智慧/資料模型互動......我們想改變這一切！ 所以我們決定建造 Taipy… 𝗧𝗮𝗶𝗽𝘆𝗰𝗼𝗺𝗯𝗶𝗻𝗲𝘀： - 功能強大的互動式前端應用程式產生器，但學習/使用非常簡單。 - 「場景」是最終用戶（以及資料科學家）輕鬆與資料和演算法互動的可能性。 2022 年，我們首次推出了 Taipy 作為開源專案（請查看我們的 [GitHub 頁面](https://github.com/Avaiga/taipy)），隨後於當年稍後推出了企業版本。 感謝這個令人驚嘆的社區的大力支持和興趣，我們的 GitHub 計畫不僅流行，而且受歡迎程度也顯著上升，在幾週內從 100 顆星增加到 3,000 多顆星！我們非常感謝您的支持和熱情。 [隨意 ⭐ Taipy 儲存庫](https://github.com/Avaiga/taipy) 我還要感謝我們早期的企業採用者，他們在驗證和測試新技術方面非常重要。感謝麥當勞、KnowledgeTouch、Groupe Les Mousquetaires、Total Energies、Textil Apparel Limited、IFP-EN 等提供的特價。 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗦𝘁𝗮𝘁𝘂𝘀 我們最近發布了： - [Taipy Cloud](https://www.taipy.io/posts/introducing-taipy-cloud-the-easiest-way-to-deploy-your-taipy-applications)允許社群使用者部署、託管和與世界其他地方分享他們的應用程式 - 重要的後端功能：Taipy Studio、應用程式版本控制、任務排程、Python API、用於場景管理的視覺化元件、新的 CLI 等等... - 在前端方面：一個新的樣式套件、一組用於即時應用程式建立的預設樣式表範本、新圖表... - [TalkToTaipy](https://talk-to-taipy.tapy.cloud/)，基於 LLM 的應用程式，僅使用自然語言探索資料集 𝗧𝗮𝗶𝗽𝘆’𝘀𝗳𝘂𝘁𝘂𝗿𝗲 這項重大投資使我們能夠繼續全職致力於改進 Taipy。這筆資金也是實現我們願景的關鍵一步，將 Taipy 定位為 Python 人工智慧/資料專案的領先平台。 𝗧𝗵𝗲 𝗻𝗲𝘅𝘁 𝗿𝗲𝗹𝗲𝗮𝘀𝗲 (𝗽𝗹𝗮𝗻 𝟰） 即將（本季）推出的精彩版本包含主要新功能： - 全新的**無程式碼 GUI 設計器**：您無需編碼即可建立 GUI 頁面！抱歉劇透，但這位新設計師是個殺手！ - **分散式計算：** 在遠端叢集上執行以並行場景/任務執行。 - **與主要平台整合**：如 Databricks、Dataiku 等。 所有這一切，同時忠於我們的開源根源！ 𝗢𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝘂𝗻𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝘀𝗙 - 我們現在出現在多個社群平台：[Discord](https://discord.com/invite/SJyz2VJGxV)、[LinkedIn](https://www.linkedin.com/company/taipy-io)、[ X](https://twitter.com/Taipy_io) 和[YouTube](https://www.youtube.com/@taipy_io)。 - 我們贊助了多項活動：會議（PyData、Pycon、ODSC...）、黑客馬拉松、派對、網路研討會... - 我們也計劃很快開始定期舉辦 Taipy 技術講座。 。 是的，所有這些都是開源的！ 我們總是渴望收到您的來信，因此，如果您認為 Taipy 需要改進或加入哪些內容，請告訴我們。您的意見對於制定我們的路線圖非常寶貴。 謝謝大家的支持。沒有您，我們不可能達到這個里程碑！ 文森特·戈塞林和阿爾伯特·安托萬 太皮聯合創辦人 還沒看過 Taipy 嗎？歡迎造訪我們的[GitHub頁面](https://github.com/Avaiga/taipy ）。 --- 原文出處：https://dev.to/taipy/our-open-source-project-for-building-ai-data-full-stack-apps-got-funded-4e68

0個讚   0留言 88瀏覽

在沒有伺服器的情況下在視窗之間共享狀態

最近，社群網路上流行一張 gif 動圖，展示了一件 [Bjorn Staal 製作的令人驚嘆的藝術品](https://twitter.com/_nonfigurativ_/status/1727322594570027343)。 ![Bjorn Staal 藝術作品](https://cdn-images-1.medium.com/max/2000/1*vCKb_XLed3eD9y4h-yjdKQ.gif) 我想重新建立它，但缺乏球體、粒子和物理的 3D 技能，我的目標是了解如何讓一個視窗對另一個視窗的位置做出反應。 本質上，在多個視窗之間共享狀態，我發現這是 Bjorn 專案中最酷的方面之一！ 由於無法找到有關該主題的好文章或教程，我決定與您分享我的發現。 > 讓我們嘗試根據 Bjorn 的工作建立一個簡化的概念驗證 (POC)！ ![我們將嘗試創造什麼（ofc 它比 Bjorn 的作品沒那麼性感）](https://cdn-images-1.medium.com/max/2000/1*KJHO9DmEDcTISWuCcvDpMQ.gif) 我做的第一件事就是列出我所知道的在多個客戶端之間共享資訊的所有方法： ## 呃：伺服器 顯然，擁有伺服器（帶有輪詢或 Websocket）可以簡化問題。然而，由於 Bjorn 在沒有使用伺服器的情況下實現了他的結果，所以這是不可能的。 ## 本機存儲 本地存儲本質上是瀏覽器鍵值存儲，通常用於在瀏覽器會話之間保存資訊。雖然通常用於儲存身份驗證令牌或重定向 URL，但它可以儲存任何可序列化的內容。 [您可以在這裡了解更多](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)。 我最近發現了一些有趣的本地儲存 API，包括 *`storage`* 事件，每當同一網站的另一個會話更改本地儲存時就會觸發該事件。 ![儲存事件如何運作（當然是簡化的）](https://cdn-images-1.medium.com/max/4048/1*otw7fDvd-XFjj9yVBxn5zg.png) 我們可以透過將每個視窗的狀態儲存在本地儲存中來利用這一點。每當一個視窗改變其狀態時，其他視窗將透過儲存事件進行更新。 這是我最初的想法，這似乎是Bjorn 選擇的解決方案，因為他分享了他的LocalStorage 管理器程式碼以及與ThreeJs 一起使用的範例[此處](https://github.com/bgstaal/multipleWindow3dScene) 。 但是當我發現有程式碼可以解決這個問題時，我想看看是否有其他方法…劇透警告：是的，有！ ## 共享工作者 這個華而不實的術語背後是一個令人著迷的概念——WebWorkers 的概念。 簡單來說，工作執行緒本質上是在另一個執行緒上執行的第二個腳本。雖然它們無法存取 DOM（因為它們存在於 HTML 文件之外），但它們仍然可以與您的主腳本進行通訊。 它們主要用於透過處理背景作業來卸載主腳本，例如預取資訊或處理不太關鍵的任務（例如流日誌和輪詢）。 ![腳本與worker之間通訊機制的簡單解釋](https://cdn-images-1.medium.com/max/3548/1*izcnWc_p13m8pZy5d49mVw.png) 共享工作線程是一種特殊類型的 WebWorkers，它可以與同一腳本的多個實例進行通信，這使得它們對我們的用例很有趣！好吧，讓我們直接進入程式碼！ ![共享工作人員可以將資訊傳送到同一腳本的多個會話](https://cdn-images-1.medium.com/max/5428/1*A7ObCM2OjojgfFP57ankyw.png) ### 設定工人 如前所述，工作人員是具有自己的入口點的「第二腳本」。根據您的設定（TypeScript、捆綁程式、開發伺服器），您可能需要調整 tsconfig、新增指令或使用特定的匯入語法。 我無法涵蓋所有使用 Web Worker 的可能方法，但您可以在 MDN 或網路上找到資訊。 如果需要，我很樂意為本文撰寫前傳，詳細介紹設定它們的所有方法！ 就我而言，我使用的是 Vite 和 TypeScript，因此我需要一個「worker.ts」檔案並將「@types/sharedworker」安裝為開發依賴項。我們可以使用以下語法在主腳本中建立連結： ``` new SharedWorker(new URL("worker.ts", import.meta.url)); ``` 基本上，我們需要： * 辨識每個視窗 * 追蹤所有視窗狀態 * 一旦視窗改變狀態，提醒其他視窗重繪 我們的狀態將非常簡單： ``` type WindowState = { screenX: number; // window.screenX screenY: number; // window.screenY width: number; // window.innerWidth height: number; // window.innerHeight }; ``` 當然，最重要的訊息是“window.screenX”和“window.screenY”，因為它們告訴我們視窗相對於顯示器左上角的位置。 我們將有兩種類型的訊息： * 每個窗口，無論何時改變其狀態，都會發布一個帶有新狀態的“windowStateChangedmessage”。 * 工作人員將向所有其他視窗發送更新，以提醒他們其中一個視窗已更改。工作人員將發送包含所有視窗狀態的「syncmessage」。 我們可以從一個看起來有點像這樣的普通工人開始： ``` // worker.ts let windows: { windowState: WindowState; id: number; port: MessagePort }[] = []; onconnect = ({ ports }) => { const port = ports[0]; port.onmessage = function (event: MessageEvent<WorkerMessage>) { console.log("We'll do something"); }; }; ``` 我們與 SharedWorker 的基本連結如下所示。我有一些基本函數可以產生 id，並計算當前視窗狀態，我還對我們可以使用的稱為 WorkerMessage 的訊息類型進行了一些輸入： ``` // main.ts import { WorkerMessage } from "./types"; import { generateId, getCurrentWindowState, } from "./windowState"; const sharedWorker = new SharedWorker(new URL("worker.ts", import.meta.url)); let currentWindow = getCurrentWindowState(); let id = generateId(); ``` 一旦我們啟動應用程式，我們應該提醒工作人員有一個新窗口，因此我們立即發送一條訊息： ``` // main.ts sharedWorker.port.postMessage({ action: "windowStateChanged", payload: { id, newWindow: currentWindow, }, } satisfies WorkerMessage); ``` 我們可以在工作端監聽此訊息並相應地更改 onmessage。基本上，一旦工作人員收到 windowStateChanged 訊息，要么它是一個新窗口，我們將其附加到狀態，要么它是一個已更改的舊窗口。然後我們應該提醒大家狀態已經改變： ``` // worker.ts port.onmessage = function (event: MessageEvent<WorkerMessage>) { const msg = event.data; switch (msg.action) { case "windowStateChanged": { const { id, newWindow } = msg.payload; const oldWindowIndex = windows.findIndex((w) => w.id === id); if (oldWindowIndex !== -1) { // old one changed windows[oldWindowIndex].windowState = newWindow; } else { // new window windows.push({ id, windowState: newWindow, port }); } windows.forEach((w) => // send sync here ); break; } } }; ``` 為了發送同步，我實際上需要一些技巧，因為“port”屬性無法序列化，所以我將其字串化並解析回來。因為我很懶，所以我不只是將視窗映射到更可序列化的陣列： ``` w.port.postMessage({ action: "sync", payload: { allWindows: JSON.parse(JSON.stringify(windows)) }, } satisfies WorkerMessage); ``` 現在是時候畫東西了！ ## 有趣的部分：繪畫！ 當然，我們不會做複雜的 3D 球體：我們只會在每個視窗的中心畫一個圓，並在球體之間畫一條線！ 我將使用 HTML Canvas 的基本 2D 上下文進行繪製，但您可以使用任何您想要的內容。畫一個圓，非常簡單： ``` const drawCenterCircle = (ctx: CanvasRenderingContext2D, center: Coordinates) => { const { x, y } = center; ctx.strokeStyle = "#eeeeee"; ctx.lineWidth = 10; ctx.beginPath(); ctx.arc(x, y, 100, 0, Math.PI * 2, false); ctx.stroke(); ctx.closePath(); }; ``` 為了繪製線條，我們需要做一些數學運算（我保證，這不是很多🤓），並將另一個視窗中心的相對位置轉換為目前視窗上的座標。 基本上，我們正在改變基地。我用一點數學來做到這一點。首先，我們將更改底座以在顯示器上具有座標，並透過目前視窗 screenX/screenY 進行偏移 ![基本上我們正在尋找鹼基變化後的目標位置](https://cdn-images-1.medium.com/max/5056/1*Zg_z1aZxUE1WP-uOk1owdw.png) ``` const baseChange = ({ currentWindowOffset, targetWindowOffset, targetPosition, }: { currentWindowOffset: Coordinates; targetWindowOffset: Coordinates; targetPosition: Coordinates; }) => { const monitorCoordinate = { x: targetPosition.x + targetWindowOffset.x, y: targetPosition.y + targetWindowOffset.y, }; const currentWindowCoordinate = { x: monitorCoordinate.x - currentWindowOffset.x, y: monitorCoordinate.y - currentWindowOffset.y, }; return currentWindowCoordinate; }; ``` 如您所知，現在我們在同一相對座標系上有兩個點，我們現在可以畫線了！ ``` const drawConnectingLine = ({ ctx, hostWindow, targetWindow, }: { ctx: CanvasRenderingContext2D; hostWindow: WindowState; targetWindow: WindowState; }) => { ctx.strokeStyle = "#ff0000"; ctx.lineCap = "round"; const currentWindowOffset: Coordinates = { x: hostWindow.screenX, y: hostWindow.screenY, }; const targetWindowOffset: Coordinates = { x: targetWindow.screenX, y: targetWindow.screenY, }; const origin = getWindowCenter(hostWindow); const target = getWindowCenter(targetWindow); const targetWithBaseChange = baseChange({ currentWindowOffset, targetWindowOffset, targetPosition: target, }); ctx.strokeStyle = "#ff0000"; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(origin.x, origin.y); ctx.lineTo(targetWithBaseChange.x, targetWithBaseChange.y); ctx.stroke(); ctx.closePath(); }; ``` 現在，我們只需要對狀態變化做出反應。 ``` // main.ts sharedWorker.port.onmessage = (event: MessageEvent<WorkerMessage>) => { const msg = event.data; switch (msg.action) { case "sync": { const windows = msg.payload.allWindows; ctx.reset(); drawMainCircle(ctx, center); windows .forEach(({ windowState: targetWindow }) => { drawConnectingLine({ ctx, hostWindow: currentWindow, targetWindow, }); }); } } }; ``` 最後一步，我們只需要定期檢查視窗是否發生變化，如果發生變化則發送訊息 ``` setInterval(() => { const newWindow = getCurrentWindowState(); if ( didWindowChange({ newWindow, oldWindow: currentWindow, }) ) { sharedWorker.port.postMessage({ action: "windowStateChanged", payload: { id, newWindow, }, } satisfies WorkerMessage); currentWindow = newWindow; } }, 100); ``` [您可以在此儲存庫中找到完整的程式碼](https://github.com/achrafl0/multi-window-article)。實際上，我用它做了很多實驗，使它變得更加抽象，但其要點是相同的。 如果您在多個視窗上執行它，希望您能得到與此相同的結果！ ![完整結果](https://cdn-images-1.medium.com/max/2000/1*KJHO9DmEDcTISWuCcvDpMQ.gif) 謝謝閱讀 ！ 如果您發現這篇文章有幫助、有趣或只是有趣，您可以將其分享給您的朋友/同事/社區 [您也可以訂閱我的電子報](https://notachraf.substack.com/)它是免費的！ --- 原文出處：https://dev.to/notachraf/sharing-a-state-between-windows-without-a-serve-23an

0個讚   0留言 180瀏覽

使用 javascript 設定 CSS 樣式

假設你有一個段落。 ``` <p id="target">rainbow 🌈</p> ``` 你需要用JS改變它的顏色。你有什麼選擇？ ## 1. 內聯樣式 最直接的路徑。從 DOM 查詢元素並變更其內聯樣式。 ``` document.getElementById('target').style.color = 'tomato'; ``` ![內聯樣式](https://thepracticaldev.s3.amazonaws.com/i/hd67z2je0m8u7zyf7231.jpg) 簡短而簡單。 ## 2. 全域樣式 另一種選擇是建立 `<style>` 標籤，用 CSS 規則填充它並將標籤附加到 DOM。 ``` var style = document.createElement('style'); style.innerHTML = ` #target { color: blueviolet; } `; document.head.appendChild(style); ``` ![全域樣式](https://thepracticaldev.s3.amazonaws.com/i/zhkm5phjflfick5xesu2.jpg) ## 3. CSSOM 插入規則 第三種選擇鮮為人知。我們將使用 [CSSStyleSheet](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet) `insertRule` 方法。 ``` var style = document.createElement('style'); document.head.appendChild(style); style.sheet.insertRule('#target {color: darkseagreen}'); ``` 雖然它可能看起來與第二個選項相似，但它絕對不同。 ![插入規則](https://thepracticaldev.s3.amazonaws.com/i/trjxmsf01o01w8c7u224.jpg) 正如您在 Chrome 開發工具中看到的那樣，“<style>”標籤為空，但樣式（深海綠顏色）已應用於該元素。此外，顏色無法透過開發工具更改，因為 Chrome 不允許[編輯動態 CSS 樣式](https://bugs.chromium.org/p/chromium/issues/detail?id=387952)。 其實這樣的行為才是寫這篇文章的動機。由於性能原因，流行的 CSS-in-JS 庫 [Styled Components](https://www.styled-components.com/) 使用此功能在生產模式下注入樣式。在特定專案或環境中，此功能可能不受歡迎，有些人在專案問題中抱怨它。 ## 4.可建構樣式表（2019 年 7 月更新） 現在可以從 JavaScript 建立 `CSSStyleSheet` 物件。 ``` // Create our shared stylesheet: const sheet = new CSSStyleSheet(); sheet.replaceSync('#target {color: darkseagreen}'); // Apply the stylesheet to a document: document.adoptedStyleSheets = [sheet]; ``` 更多詳細資訊請參閱[此處](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)。 此選項僅對 Chrome 有效，因此請謹慎使用。 您知道使用 javascript 新增樣式的其他選項嗎？這些天你的首選選擇是什麼？ 謝謝閱讀！ --- 原文出處：https://dev.to/karataev/set-css-styles-with-javascript-3nl5

0個讚   0留言 275瀏覽

HTML可以做到這一點嗎？第1部分

歡迎來到我的 HTML can do 這個系列，第 1 部分。 為了與我的[GitHub-Can-Do-This](https://dev.to/yuridevat/reference-a-new-issue-3g5h) 系列保持一致，今天我想寫一篇關於HTML 可以做的很酷的事情的文章（很多人顯然不知道）。 我堅信，越多的人理解 HTML 並充分利用它，網路就會自動變得更容易存取。 ## 表中的內容 1. [詳細資訊和摘要 HTML 標籤](#chapter-1) 2. [電子郵件或電話號碼連結](#chapter-2) 3. [自動完成清單](#chapter-3) 4. [文字修改](#chapter-4) --- 由於我不知道接下來還會有多少部分，因此我將透過按字母順序描述出色的標籤及其背後的 HTML 魔力來開始本系列。 ## 1. 詳細資訊和摘要<a name="chapter-1"></a> 開啟/關閉小部件通常使用 JavaScript 建立。很長一段時間以來，有一個預設的 HTML 標籤恰好涵蓋了這種行為。 樣式可以根據需要進行調整。預設情況下，該小部件是關閉的。賦予 `<details>` 屬性 `open`，它會從頭開始顯示其內容。 {% codepen https://codepen.io/YuriDevAT/pen/dyaBQZm %} ## 2. 連結到電子郵件地址或電話號碼<a name="chapter-2"></a> `<a>` 標籤有一個 `href` 屬性，它指示連結的目的地。它可以連結到網頁、文件、電子郵件地址、同一頁面中的位置或 URL 可以尋址的任何其他內容。 `href` 屬性負責使 `<a>` 可聚焦並在按 Enter 鍵時啟動連結。 ### 連結到電子郵件地址 如果您在「href」的 URL 方案中新增「mailto:」和預期收件者的電子郵件地址，則按一下時會開啟新的外寄電子郵件。 ``` <a href="mailto:[email protected]">Send email to nowhere</a> ``` 您還可以在 URL 中加入更多詳細訊息，包括抄送、密件副本、主題和正文 😯。 ``` <a href="mailto:[email protected][email protected]&subject=This%20is%20the%20subject">Send email with subject to nowhere and nobody</a> ``` 詳細了解[連結至電子郵件地址 rfc6068](https://datatracker.ietf.org/doc/html/rfc6068)。 ### 連結到電話號碼 將電話號碼新增至「tel:」之後的「href」時，您也可以連結到電話號碼。 ``` <a href="tel:+18005551239">(800) 555 1239</a> ``` 連結行為可能因設備而異（[關於連結到電話號碼的 MDN 官方文件](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_telephone_numbers)）： - 在行動裝置上，系統會自動撥打號碼。 - 大多數作業系統都有可以撥打電話的程序，例如 Skype 或 FaceTime。 - 網站可以使用registerProtocolHandler撥打電話，例如web.skype.com。 - 其他行為包括將號碼儲存到聯絡人，或將號碼傳送到另一台裝置。 詳細了解[連結到電話號碼 rfc3966](https://datatracker.ietf.org/doc/html/rfc3966)。 {% codepen https://codepen.io/YuriDevAT/pen/OJdZLKK %} ## 3. 自動完成清單<a name="chapter-3"></a> 使用“<datalist>”，當使用者開始在輸入欄位中寫入時會出現一個下拉式選單，並使他們可以從清單中的可用選項中進行選擇。 {% codepen https://codepen.io/YuriDevAT/pen/zYeVMbE %} ## 4. 文字修改<a name="chapter-4"></a> 使用特定標籤，可以直接修改文本，無需額外的 CSS。非常便利。 {% codepen https://codepen.io/YuriDevAT/pen/LYqKXwJ %} --- 謝謝閱讀。對此，我真的非常感激！ --- 原文出處：https://dev.to/yuridevat/html-can-do-this-part-1-3ab2

0個讚   0留言 100瀏覽

使用 Jest 和 Supertest 測試 NodeJs/Express API

這是[使用 Express、Sequelize 和 Postgres 建立 API](https://www.oriechinedu.com/posts/performing-crud-with-sequelize/) 的第三部分。在[第二部分](https://www.oriechinedu.com/posts/performing-crud-with-sequelize/)中，我們建立了簡單的API端點來示範Sequelize中的CRUD操作。在本文中，我們將重點放在為第二部分中建立的 API 端點編寫端到端測試。 ### 術語解釋 - **端對端測試** - 一種測試類型，用於測試應用程式從開始到結束的流程是否如預期運作。這也稱為功能測試。此類測試的一個範例是測試端點或路由，其中涉及測試端點工作所需的所有內容，例如資料庫連接、依賴項等。 - **測試執行器** - 在給定目錄或檔案中取得原始程式碼（測試）、執行測試並將結果寫入控制台或任何指定位置的程式庫或工具，例如 Jest、Mocha。 - **Jest** - [Jest](https://jestjs.io/) 是 Facebook 開發的 JavaScript 測試框架。它以最少的配置開箱即用，並具有內建的測試執行器、斷言庫和模擬支援。 - [**Supertest**](https://www.npmjs.com/package/supertest) - 用於測試 Node.js HTTP 伺服器的函式庫。它使我們能夠以程式設計方式向 HTTP 伺服器發送 HTTP 請求（例如 GET、POST、PATCH、PUT、DELETE）並獲取結果。 現在我們已經解釋了基本術語，讓我們深入了解主要業務。 如果您一直按照先前的[文章](https://www.oriechinedu.com/posts/performing-crud-with-sequelize/)進行操作，那麼請在您最喜歡的文字編輯器中開啟它，否則克隆使用的儲存庫[此處](https://github.com/oriechinedu/sequelize-with-postgres-tutorial)。 **第 1 步 - 安裝 Jest 和 supertest** 打開終端機並“cd”到專案根目錄並執行以下命令： ``` npm install --save-dev jest supertest ``` **步驟 2 - 設定 Jest** 打開“package.json”並將以下程式碼新增至其中。 ``` "jest": { "testEnvironment": "node", "coveragePathIgnorePatterns": [ "/node_modules/" ] }, ``` 這是我們測試 API 時需要設定 jest 的基本配置。您希望 `jest` 忽略的任何檔案都放置在 `"coveragePathIgnorePatterns"` 內。 `"coveragePathIgnorePatterns"` 指定一個與要排除的目錄相符的正規表示式，在我們的例子中，我們希望它忽略 `node_modules` 目錄。 接下來我們新增“test”腳本。在 `package.json` 的 `scripts` 部分中，加入以下腳本： ``` "test": "jest" ``` **步驟 3 - 測試配置** 現在，讓我們確認「jest」已準備好執行我們的測試。在終端機中執行“npm test”。您會注意到控制台上列印如下所示的錯誤，這表示「jest」已設定。 ![未指定測試時出現 Jest 錯誤](https://thepracticaldev.s3.amazonaws.com/i/sftb9nkpi1jk076d09xy.png '未指定測試時出現 Jest 錯誤') 讓我們新增一個簡單的測試來驗證配置。建立一個名為「tests」的新目錄並新增一個新檔案「sample.test.js」。在「sample.test.js」中，加入以下程式碼： ``` describe('Sample Test', () => { it('should test that true === true', () => { expect(true).toBe(true) }) }) ``` 現在，執行“npm test”，您將得到如下所示的輸出： ![範例測試輸出](https://thepracticaldev.s3.amazonaws.com/i/4zmad3nkc8stnfyescvi.png) ##### Jest 如何辨識測試檔？ Jest 以三種方式辨識測試文件： - 副檔名為「.test.js」的文件 - 副檔名為「.spec.js」的文件 - `__tests__` 資料夾或目錄中的所有檔案。 ## 測試 API 端點 現在我們已經設定了測試環境，是時候開始測試 API 端點了。由於我們的端點需要向資料庫發出請求，因此我們需要設定一個測試資料庫。設定測試資料庫的原因是每次執行測試時我們都會刪除該資料庫。每次執行測試時刪除資料庫可確保測試的完整性。也就是說，如果一個測試是在資料庫中建立一個「post」記錄，我們要確保在測試執行之前資料庫中沒有「post」記錄，這樣，我們就可以確定得到的結果從測試中。 **第 4 步 - 建立測試資料庫** 在本文的[第一部分](https://www.oriechinedu.com/posts/getting-started-with-sequelize-and-postgres/)中，我們建立了兩個資料庫，一個用於開發，另一個用於測試。如果您尚未建立測試資料庫，請依照[連結](https://www.oriechinedu.com/posts/getting-started-with-sequelize-and-postgres/)建立測試資料庫。 **步驟 5 - 設定測試腳本** 我們需要以下腳本： - `pretest` - `pretest` 是一個 npm 腳本，當呼叫 `npm test` 指令時會自動呼叫。我們將掛接命令來更改環境以進行測試，並在每次測試執行之前刷新資料庫。 - `migrate:reset`：此命令將負責在每次測試執行之前刷新資料庫。 現在編輯“package.json”的“scripts”，如下所示： ``` "scripts": { "start-dev": "nodemon index.js", "migrate": "npx sequelize-cli db:migrate", "migrate:reset": "npx sequelize-cli db:migrate:undo:all && npm run migrate", "test": "cross-env NODE_ENV=test jest --testTimeout=10000", "pretest": "cross-env NODE_ENV=test npm run migrate:reset" } ``` 腳本修改需要注意的地方： - [`cross-env`](https://www.npmjs.com/package/cross-env) - 用於設定環境變數的與作業系統無關的套件。我們用它將`NODE_ENV`設為`test`，以便我們的測試可以使用測試資料庫。執行以下命令來安裝跨環境。 ``` npm i -D cross-env ``` - `--testTimeout` 標誌 - 這會增加 Jest 的預設逾時時間，即 5000 毫秒。這很重要，因為測試執行者需要在執行測試之前刷新資料庫。 **第 6 步 - 測試腳本** ``` npm test ``` 如果一切正常，您應該在終端機上看到以下輸出： ![替代文本](https://thepracticaldev.s3.amazonaws.com/i/2panajlcgx7dg0d2oe88.png) 仔細觀察上面的螢幕截圖，您會注意到一行 _`using environment "test"`_ 表示 `cross-env` 已更改了 `NODE_ENV`。 **最後一步 - 測試路由/端點** 現在，讓我們開始為端點編寫測試。在測試目錄中建立一個名為routes.test.js的文件 ``` touch tests/routes.test.js ``` - **測試建立後端點** 將以下程式碼複製到“tests/routes.test.js”中： ``` const request = require('supertest') const app = require('../server') describe('Post Endpoints', () => { it('should create a new post', async () => { const res = await request(app) .post('/api/posts') .send({ userId: 1, title: 'test is cool', }) expect(res.statusCode).toEqual(201) expect(res.body).toHaveProperty('post') }) }) ``` - `describe` 函數用於將相關測試分組在一起 - `it` 是執行實際測試的 `test` 函數的別名。 -“expect”函數使用一組“matcher”函數測試值。 請造訪 [Jest 文件](https://jestjs.io/docs/en/api.html) 以取得 jest 函數的完整清單和詳細資訊。 現在，執行測試 ``` npm test ``` 輸出如下圖所示： ![替代文本](https://thepracticaldev.s3.amazonaws.com/i/yt6o537gzw29030siy6c.png) 有關所有端點測試的完整程式碼，請檢查[儲存庫](https://github.com/oriechinedu/sequelize-with-postgres-tutorial/blob/master/tests/routes.test.js)。 ### 結論 我們已經能夠完成為與資料庫互動的 API 端點編寫測試的過程。在本文的最後部分，我將撰寫有關將 CI/CD 和程式碼覆蓋工具整合到測試環境的文章。在那之前請繼續關注。 如果您對改進文章有任何疑問或建議，請隨時與我聯繫。您也可以透過下面的評論部分分享您的想法。謝謝！ _本文最初發表在我的[部落格](https://www.oriechinedu.com/posts/testing-nodejs-express-api-with-jest-and-supertest/)_ --- 原文出處：https://dev.to/nedsoft/testing-nodejs-express-api-with-jest-and-supertest-1km6

0個讚   0留言 348瀏覽

🚨 🚀 25 個原因（你必須知道！！）為什麼「Listicles」對 dev.to 不利 🤯 👿 🚨

是的，這篇文章的標題就是一個例子，類似於許多所謂的「Listicles」之一，這些「Listicles」一直在開發人員中亂扔。它們的標題充滿了表情符號和「你必須知道」或「對任何開發人員來說都是必不可少的」之類的詞語，它們吸引了我們人類天生的好奇心。 ## 重要的！ ### 並非所有清單都不好！ 請遵循以下準則來建立一個好的指南： - 確定目的：明確定義清單的目的和目標。您想提供讀者什麼資訊或價值？ - 選擇相關表情符號：選擇與內容相符並有助於您想要傳達的訊息的表情符號。確保它們不會讓人不知所措或分散注意力。 - 提供有意義的內容：專注於建立內容豐富且寫得好的文本，為讀者提供價值。表情符號應該補充內容而不是掩蓋內容。 - 評估整體影響：在發布之前，請檢查清單文章，以確保標題中使用表情符號或潛在的標題誘餌文字可以增強讀者的體驗並支持文章的預期目的。 透過執行這些步驟，您可以建立一個清單文章，該文章可以根據需要有效地包含盡可能多的表情符號和「您必須知道」文本，同時保持內容的品質和實質內容。 ![dev.to 上的點擊誘餌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5tcsqtizqxzg10tvo1l.png) ![更多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90n3gpjrhz13i0w17z5o.png) 本質上，它們是點擊誘餌。這些帖子訴諸了人性中被稱為“FOMO”的東西。 ## 什麼是 FOMO？ FOMO 代表「害怕錯過」。這是一種以焦慮或不安的感覺為特徵的現象，這種感覺來自於相信其他人可能擁有自己未參與的有益經驗或機會。 FOMO 通常與社交媒體以及其他人分享的持續更新和活動聯繫在一起。 ## 什麼是「表情符號誘餌」？ 這些貼文利用的另一件事是「表情符號誘餌」。這個概念最近才被探索。它涉及使用 🤯、🚨、👿 和 🚀 等表情符號在社交媒體平台上操縱人們的情緒。人工智慧（AI）是這方面的專家。 **為什麼這些貼文不好？** 因為幾乎不可能找到任何好的內容！ 作為內容創作者，我們有責任以各種可能的方式支持我們的開發者同行的成長。在下面的評論中，讓我們討論如何在 DEV 這樣的平台上實現這一目標。我很想聽聽您對此事的看法。如何才能提升DEV社群的價值，讓所有開發者不那麼難以承受？ 請記住，成為一名出色的開發人員不僅僅需要了解所有可用的工具或資源。這是關於磨練解決問題的能力、培養創造力和擁抱終身學習。讓我們優先考慮這些基本技能，其餘的就自然而然了。 而且，正如所承諾的，這裡有 🚀 🚨 對於 dev.to 🤯 🚨 來說「Listicles」不好的 25 個原因。當您閱讀清單文章時，請考慮它如何反映其內容（畢竟，它本身就是清單文章） {% 可折疊 點選展開並查看清單 %} 1.內容淺薄：清單文章和點擊誘餌通常優先考慮簡潔性而不是深度，導致主題覆蓋膚淺。 2. 缺乏脈絡：它們提供的脈絡或背景資訊有限，使讀者的理解支離破碎。 3. 過度簡化：複雜的主題可能會過度簡化以適應清單格式，導致誤解和誤解。 4.標題誘餌：使用聳人聽聞或誤導性的標題來吸引點擊，損害內容的完整性。 5. 誤導性資訊：清單文章和點擊誘餌可能包含不準確或過時的訊息，導致讀者誤入歧途。 6. 缺乏可信度：有些缺乏可靠的來源或參考資料，導致難以驗證所提供資訊的準確性。 7. 內容重複：類似主題的清單文章經常有重複的內容，對尋求新見解的讀者沒有什麼價值。 8.缺乏深度：由於篇幅限制，清單文章很少深入研究某個主題的複雜或微妙的面向。 9. 阻礙批判性思考：清單文章和標題誘餌提供填鴨式訊息，阻礙讀者進行批判性思考和分析。 10. 忽略替代觀點：他們通常提出單一觀點，排除不同或互相衝突的意見。 11. 貨幣化高於品質：有些人優先考慮透過廣告創造收入，而不是製作高品質、資訊豐富的內容。 12. 不切實際的期望：清單文章和點擊誘餌可能會在沒有適當支持的情況下做出廣泛的主張或承諾，從而造成不切實際的期望。 13.內容研究不足：由於急於快速製作內容，一些內容缺乏徹底的研究和事實查核。 14. 缺乏原創性：許多人重複使用其他來源的內容，但沒有加入任何獨特的價值或見解。 15. 話題過度飽和：熱門話題經常被重複提及，導致社群充斥著冗餘內容。 16. 忽略長篇寫作：清單文章和標題誘餌掩蓋了長篇文章，削弱了深入分析的重要性。 17. 抑制學習：清單文章和點擊誘餌的小規模性質可能會阻礙讀者尋求全面的學習經驗。 18.注意力持續時間縮短：持續閱讀清單文章和點擊誘餌可能會導致注意力持續時間縮短，並減少對詳細內容的關注。 19. 浪費點擊：清單文章和點擊誘餌可能會用誘人的標題來吸引讀者，但結果卻是提供膚淺或無用的內容。 20. 失去細微差別：複雜的主題在簡化為編號列表時就失去了細微差別，從而過度簡化了重要細節。 21. 缺乏參與度：清單文章和點擊誘餌由於其膚淺的性質，經常無法產生有意義的討論或社區參與。 22. 創造力下降：它們可能會扼殺創意表達和原創性，因為作者覺得必須遵守清單格式。 23. 寫作標準下降：對快速清單文章和標題誘餌的需求可能會降低社群內寫作的整體品質和標準。 24. 延續線上瀏覽：清單文章和點擊誘餌助長了瀏覽而不是深度閱讀的文化，影響了整體理解。 25. 專業知識貶值：它們可能削弱主題專家的專業知識，因為他們的見解被濃縮或過度簡化。 {% 結束折疊 %} 我希望您覺得這篇文章很有趣！如果您對我做的其他事情感興趣，請查看我的網站： [https://the-best-codes.github.io/](https://the-best-codes.github.io/?ref=dev.to_post&click=https://dev.to/best_codes/25-原因-你-必須-知道-為什麼-listicles-are-bad-for-devto-1hok/&site=https://dev.to/&reason=best-codes-bad-listicles-post) 謝謝閱讀！ _2023年12月13日：_ _更新說明：_ 您可能已經看過我的一些帖子，“面向 Web 開發人員的 11 個令人驚嘆的書籤🔖 🚀（它們是什麼？🤔）”、“6️⃣ 常見瀏覽器：它們到底有多安全？ 🔒 😯」和「為無聊的程式設計師提供的 10 個有趣的 Web 開發專案創意 👍」。我相信這些不是“列表文章”或標題誘餌，因為它們並不淺薄，而且它們不僅僅是一個列表。如果您對其中任何一個有不同的意見，請告訴我如何改進它們！ --- 原文出處：https://dev.to/best_codes/25-reasons-you-must-know-why-listicles-are-bad-for-devto-1hok

0個讚   0留言 89瀏覽

使用 VSCode 更快輸入程式碼的技巧分享

VSCode 寫程式技巧分享！ ## 更聰明地複製、貼上 我見過人們透過執行以下操作來複製貼上程式碼： 1. 將滑鼠遊標移至單字開頭。 2. 按住左鍵點選。 3. 一直拖曳到單字最後。 4. 釋放左鍵點選。 5. 右鍵點選所選內容。 6. 按一下「複製」。 7. 在 VS Code 的檔案總管中捲動以尋找目標檔案。 8. 點選目標檔案。 9. 將遊標移到檔案中的所需位置。 8. 右鍵點選目標位置。 9. 按一下「貼上」。 這是一個有點慢的過程。特別是如果您需要多次應用此操作...改進複製貼上的一些方法是： - 使用“CTRL + C”進行**複製**，使用“CTRL + V”進行**貼上**。 - 使用“CTRL + SHIFT + 左/右箭頭”**增加/減少單字選擇**。 - 使用“SHIFT + 左/右”箭頭**按字元增加/減少選擇**。 - 點擊 VS Code 中的一行程式碼並按下「CTRL + X」將**將該行放入剪貼簿**。在任何地方使用“CTRL + V”都會**在其中插入該行程式碼**。 - 使用「ALT + 向上/向下箭頭」**將一行程式碼向上/向下移動**一個位置。 更聰明地複製貼上也意味著更聰明地導航。 ## 更聰明地導航 使用組合鍵“CTRL + P”，而不是手動瀏覽資源管理器窗格。這樣，您可以按名稱搜尋文件。這是一個“智能”搜尋，意味著它不僅會查找包含搜尋文本的單詞，還會查找組合，例如“prodetcon”還將查找“project-details-container.component.ts”。使用「CTRL + P」比看到有人在檔案總管窗格中掙扎要快得多，這本身就是一種痛苦（雙關語）。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgi4edfc61mjln700yon.gif) 不要透過捲動來尋找文件內的某些程式碼，而是使用以下組合鍵： - `CTRL + G`：轉到行 - `CTRL + F`：在檔案中搜尋（使用`ENTER`鍵導航到下一個符合專案） - `CTRL + 點選類別/函數/等`：轉到所述類別/函數/等的定義。 使用“CTRL + TAB”在上次開啟的檔案和目前開啟的檔案之間切換（或使用“TAB”進一步切換到其他開啟的檔案）。這比將遊標移到工作列、查找正確的標籤並點擊它打開要快得多。 > 注意：在 VS Code 中，以這種方式在開啟的檔案之間進行切換非常有效率。另外，在 Windows 中使用「ALT + TAB」在開啟的視窗之間切換。 ## 更聰明地重新命名 不要自己重命名變數的每一次出現。它既耗時又容易出錯。相反，請轉到該變數的定義並按“F2”，重命名它，然後按“ENTER”。這將改變每一次發生的情況。這不僅適用於變數，也適用於函數、類別、介面等。這也適用於跨文件。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jls5prhd81ua6o24w6hl.gif) ## 使用 Emmet [Emmet](https://emmet.io/) 是一個內容/程式碼輔助工具，可以更快、更有效率地編寫程式碼。它是[VS Code 的標準](https://code.visualstudio.com/docs/editor/emmet)，因此不需要任何插件。這個概念很簡單：您開始輸入 Emmet 縮寫，按下“TAB”或“ENTER”，就會出現該縮寫的完整 Emmet 片段。 Emmet 縮寫的範例可以是「.grid>.col*3」。當您按下「TAB」或「ENTER」時，VS Code 會為您填寫整段程式碼： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wt5s8wb3splmpvylkhm.gif) Emmet 的一大優點是您也可以產生 [“lorem ipsum” 文字](https://docs.emmet.io/abbreviations/lorem-ipsum/)。例如，`ul>li*4>lorem4`將產生一個包含 4 個元素的無序列表，每個清單專案包含 4 個隨機單字。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pgcocuj4r7nfbt6wvyb.gif) ## 使用格式化程式 使用 VS Code 中的程式碼格式化程式來格式化程式碼。我強烈推薦[Prettier](https://prettier.io/docs/en/)。 使用程式碼格式化程式的好處之一是它還可以「美化」您的程式碼。因此，如果您從根本沒有佈局的地方複製貼上程式碼，您可以點擊格式組合鍵（“CTRL + ALT + F”）等等，您的程式碼現在“美化”了，更重要的是，可讀了。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/505nwj0kpv7eotq5e8ns.gif) > 注意：一個好的提示是在儲存時套用格式。您可以在設定中變更此設定（尋找「儲存時格式」）。 格式化不僅對你自己有用，而且對整個團隊有用，因為它強制團隊的程式碼更加一致。看看我的另一篇文章[在Angular 專案中強制執行前端指南](https://dev.to/kinginit/enforcing-front-end-guidelines-in-an-angular-project-4199) 了解更多資訊關於它。 ## 使用程式碼片段 程式碼片段是模板，可以更輕鬆地編寫重複的程式碼片段，例如 for 迴圈、while 語句等。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v9g9v8mhlojm00aex6g.gif) 透過使用程式碼片段，您可以透過輸入最少的內容輕鬆建立程式碼區塊。您可以使用內建的程式碼片段，使用提供程式碼片段的擴展，甚至建立您自己的程式碼片段！ 內建程式碼片段提供了多種語言的模板，例如 TypeScript、JavaScript、HTML、CSS 等。例如，您可以使用它輕鬆建立「switch」語句，如上所示。 VS Code Marketplace 有多個擴充功能可以提供您程式碼片段。例如 [Angular 片段](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)、[Tailwind UI 片段](https://marketplace.visualstudio.com/items?itemName=evondev.tailwindui-marketplace.visualstudio.com/items?itemName=evondev.tailwindui-evondev.tailwindui-片段)、[Bootstrap 片段](https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode) 等。 最後，您可以建立自己的片段。您可以為特定語言建立全域程式碼片段，也可以建立特定於專案的程式碼片段。我不會在這裡詳細介紹任何細節，但請查看有關[如何建立自己的片段](https://code.visualstudio.com/docs/editor/userdefinesnippets#_create-your-own-snippets)。 ## 利用“量子打字” 我將其稱為“量子輸入”，因為這確實加快了您在 VS Code 中輸入程式碼的速度。這都是關於多重選擇的。當您需要更改或新增文字到多行時，VS Code 允許您透過選擇這些多行並同時開始在這些行上鍵入來完成此操作。 按住“SHIFT + ALT”並拖曳多條線以進行選擇。您將看到這些行上出現多個鍵入遊標。只需開始輸入，文字就會同時加入。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl37ca8jwo8sfnm07j0p.gif) 如果您想將相同的文字新增至多個位置但它們不對齊，您可以按住「ALT」同時按一下您要鍵入相同文字的所有位置。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/loqu6id3968iilj1o1jl.gif) 您也可以按住“ALT”並同時選擇多個單字。無需單擊某個位置，只需拖曳進行選擇，然後釋放左鍵單擊或雙擊即可選擇單個單字，同時按住“ALT”鍵。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o05eg38ejzcxhtotlza9.gif) ## 快速環繞選擇 程式碼通常必須用方括號、圓括號或大括號括起來。或某些內容需要用引號（單引號或雙引號）引起來。為此，人們通常會轉到起始位置，輸入起始括號，將遊標移到結束位置，然後輸入結束括號。更有效的方法是選擇需要包圍的零件，然後簡單地鍵入起始括號。 VS Code 會夠聰明，知道整個部分需要被包圍。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upt3uxf00b9j9ujoetq4.gif) 這適用於 `(`、`{`、`[`、`<`、`'` 和 `"`。 ## 利用 VS Code 重構技巧 您可以使用 VS Code 自動重構程式碼片段。例如，您可以讓 VS Code 為您產生它們，而不是編寫自己的 getter 和 setter。 要重構某些內容，只需選擇需要重構的內容，右鍵單擊，然後單擊“重構...”，甚至更快：使用“CTRL + SHIFT + R”。 根據您所在的文件，VS Code 可以為您提供多種重構。例如，對於 TypeScript，您可以使用「提取函數」、「提取常數」或「產生 get 和 set 存取器」。請參閱 [此處](https://code.visualstudio.com/docs/typescript/typescript-refactoring) 的 TypeScript 完整清單。 ## 使用正規表示式搜尋和替換 正規表示式 (RegEx) 可能是開發人員工具包中非常強大的工具，值得您花時間更好地熟悉它們。您不僅可以在自己的程式碼中使用它（例如，驗證模式、字串替換等），還可以在 VS Code 中使用它進行高級搜尋和替換。 ### 例子 在您所在的專案中，一些 CSS 選擇器以 `app-` 開頭並以 `-container` 結尾。由於新的指導方針，他們希望您將後綴“-container”更改為“-wrapper”。您可以嘗試進行簡單的搜尋和替換，方法是尋找“-container”並將其替換為“-page”，但是當您進行替換時，您會看到某些出現的內容已被替換，而這本不應該是這樣的（例如，名為“.unit-container-highlight”的 CSS 選擇器變成“.unit-wrapper-highlight”）。 透過RegEx，我們可以進行更細粒度的搜尋。使用捕獲組，我們可以提取我們想要保留的單詞，同時替換其餘的單詞。正規表示式看起來像是「app-([a-z\-]+)-container」。我們想要替換結果，使其以“-page”結尾。替換字串將類似於“app-$1-wrapper”。只要確保您選取了“使用正規表示式”即可。 > 注意：儘管正則表達式允許更細粒度的搜尋，但在進行實際替換之前請檢查搜尋窗格中的結果！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jojfb84q3ir9c2js61c7.png) 您可以透過允許搜尋僅應用於某些文件來獲得更多控制。範例可以只是 HTML 檔案（`*.html`），甚至只是整個資料夾（`src/app/modules`）。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m03sd4p8nffhga5jveb.png) 如果您想在搜尋之前嘗試 RegEx 以確保它是正確的，請使用線上 RegEx 測試器，例如 [Regex101](https://regex101.com/)。如果您沒有或很少有 RegEx 經驗，請查看 [https://regexlearn.com/](https://regexlearn.com/learn/regex101)。 ## 使用工具自動化單調的工作 有時我們必須做一些單調的工作，例如建立模擬資料、為類別中的每個欄位建立函數、根據介面的屬性建立 HTML 清單專案等。俗話說： > 更聰明地工作，而不是更努力工作！ 使用工具來自動化此類單調的工作，而不是自己完成所有繁瑣的工作。我常用的工具有： - [NimbleText](https://nimbletext.com/live)：根據給定格式將行輸入轉換為特定輸出。 - [Mockaroo](https://www.mockaroo.com/)：產生模擬資料並以多種格式（JSON、CSV、XML 等）輸出。 - [JSON Generator](https://json-generator.com/)：也產生模擬資料，但專門針對 JSON。它有點複雜，但它允許定制結果。 使用 NimbleText 的一個很好的例子是基於幾個欄位在 HTML 中建立整個表單。我們有一個要在表單中顯示的欄位清單。每個欄位都有一個標籤和一個輸入。讓我們建立一些資料供 NimbleText 進行轉換： ``` first name, text last name, text email, email street, text number, number city, text postal code, text ``` 這裡我們有 7 行和 2 列。每行代表表單欄位。第一列是標籤的名稱，第二列是 HTML 輸入的類型。 在 NimbleText 中，我們保留設定不變（列分隔符號“,”和行分隔符號“\n”）。 每個表單欄位都應該位於類別為「.form-field」的「div」中，其中包含帶有文字的「label」和表單欄位的「input」。 NimbleText 的模式如下： ``` <div class="form-field">   <label for="<% $0.toCamelCase() %>"><% $0.toSentenceCase() %>:</label>   <input id="<% $0.toCamelCase() %>" type="$1"/> </div> ``` 當我們查看輸出時，我們發現**大量**工作已經為我們完成： ``` <div class="form-field">   <label for="firstName">First name:</label>   <input id="firstName" type="text"/> </div> <div class="form-field">   <label for="lastName">Last name:</label>   <input id="lastName" type="text"/> </div> <div class="form-field">   <label for="email">Email:</label>   <input id="email" type="email"/> </div> <div class="form-field">   <label for="street">Street:</label>   <input id="street" type="text"/> </div> <div class="form-field">   <label for="number">Number:</label>   <input id="number" type="number"/> </div> <div class="form-field">   <label for="city">City:</label>   <input id="city" type="text"/> </div> <div class="form-field">   <label for="postalCode">Postal code:</label>   <input id="postalCode" type="text"/> </div> ``` 因此，盡可能發揮創意並使用這些工具。 ## 結論 在 VS Code 中更快編碼取決於了解快捷鍵並充分利用 IDE 的強大功能。以下是所提及內容的快速總結： 1. 使用快捷鍵進行複製貼上。 2. 透過搜尋取代手動導航，導航更有效率。 3. 使用“F2”重新命名，而不是手動執行。 4. 使用 Emmet。 5. 使用格式化程式來獲得整潔的大綱（以及其他優點）。 6. 使用程式碼片段。 7. 量子型。 8. 使用VS Code重構。 9. RegEx 可以幫助您進行搜尋和取代。 10. 使用NimbleText等工具將單調的工作自動化。 我希望您喜歡閱讀本文。如果您知道有人可能需要一些幫助來更快地編碼，請隨時分享這篇文章！ 如果您有任何疑問，請隨時與我們聯繫！謝謝！ --- 原文出處：https://dev.to/kinginit/how-to-code-faster-vs-code-edition-4pa

0個讚   0留言 741瀏覽

✨ 每個開發者都需要了解的 7 個人工智慧庫（成為奇才）🧙‍♂️ 🪄

## 長篇大論；博士 如今，任何開發人員都可以利用人工智慧來建立強大的東西。 無需成為機器學習專家。 這裡有 7 個最好的庫，您可以使用它來增強您的開發並透過最先進的 AI 功能給用戶留下深刻的印象。 這些可以為你的專案帶來神奇的力量，所以不要忘記給他們加星號並支持他們🌟 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/she8nk1oksxmem791o09.gif) --- ## 1. [CopilotKit](https://github.com/RecursivelyAI/CopilotKit)：將 AI 功能引入 React 應用程式。 （ChatBot 和 CopilotTexarea） ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zxu7wrchaod8eyvq46b.png) 常見的法學碩士產品用例被製作成簡單且可自訂的反應元件。 具有兩個元件： CopilotPortal：加入可以在您的應用程式內回答問題並採取行動的法學碩士！ CopilotTextarea：任何具有 Github Copilot 功能的 <textarea/> 的直接替代品。 ``` 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> ); } ``` {% cta https://github.com/RecursivelyAI/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} --- ## 2. Tavily GPT 研究員 - 取得法學碩士學位以搜尋網路和資料庫 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61mwfvsi4n9rnjet0j52.png) Tavilly 可讓您將 GPT 支援的研究和內容產生工具新增至您的 React 應用程式中，從而增強其資料處理和內容建立功能。 ``` # Create an assistant assistant = client.beta.assistants.create( instructions=assistant_prompt_instruction, model="gpt-4-1106-preview", tools=[{ "type": "function", "function": { "name": "tavily_search", "description": "Get information on recent events from the web.", "parameters": { "type": "object", "properties": { "query": {"type": "string", "description": "The search query to use. For example: 'Latest news on Nvidia stock performance'"}, }, "required": ["query"] } } }] ) ``` {% cta https://github.com/assafelovic/gpt-researcher %} 明星塔維利 ⭐️ {% endcta %} --- ## 3. Pezzo.ai - 可觀測性、成本和即時工程平台 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxvbgi5zkghkb0t64npw.jpeg) 用於管理 OpenAI 通話的集中平台。 優化您的提示和令牌使用。追蹤您的人工智慧使用情況。 免費且易於整合。 ``` const prompt = await pezzo.getPrompt("AnalyzeSentiment"); const response = await openai.chat.completions.create(prompt); ``` {% cta https://github.com/pezzolabs/pezzo %} 明星 Pezzo ⭐️ {% endcta %} --- ## 4. LangChain - 將人工智慧整合到行動鏈中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s87kvm5jt5wmsv702r1.png) 易於使用的 API 和函式庫，用於將 LLM 新增到應用程式中。 將不同的人工智慧元件和模型連接在一起。 輕鬆嵌入上下文和語義資料以實現強大的整合。 ``` from langchain.llms import OpenAI from langchain import PromptTemplate llm = OpenAI(model_name="text-davinci-003", openai_api_key="YourAPIKey") # Notice "food" below, that is a placeholder for another value later template = """ I really want to eat {food}. How much should I eat? Respond in one short sentence """ prompt = PromptTemplate( input_variables=["food"], template=template, ) final_prompt = prompt.format(food="Chicken") print(f"Final Prompt: {final_prompt}") print("-----------") print(f"LLM Output: {llm(final_prompt)}") ``` {% cta https://github.com/langchain-ai/langchain %} 星朗鏈 ⭐️ {% endcta %} --- ## 5. [Weaviate](https://github.com/weaviate/weaviate) - 用於人工智慧增強專案的向量資料庫 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brp7plpkk9sy44ubc14t.png) Weaviate 是一個針對大型資料集快速、高效搜尋而最佳化的向量資料庫。 它支援與 OpenAI 和 Hugging Face 等提供者的 AI 模型和服務集成，從而實現資料分類和自然語言處理等高級任務。 它是一種雲端原生解決方案，具有高度可擴展性，可以滿足不斷變化的資料需求。 ``` import weaviate import json client = weaviate.Client( embedded_options=weaviate.embedded.EmbeddedOptions(), ) uuid = client.data_object.create({ }) obj = client.data_object.get_by_id(uuid, class_name='MyClass') print(json.dumps(obj, indent=2)) ``` {% cta https://github.com/weaviate/weaviate %} 星織 ⭐️ {% endcta %} --- ## 6. [PrivateGPT](https://github.com/imartinez/privateGPT) - 與您的文件聊天，100% 私密 💡 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap81ce5j9chc5c543jl6.jpg) PrivateGPT 允許在應用程式內進行安全的、GPT 驅動的文件交互，確保資料隱私並增強上下文感知處理能力。 PrivateGPT 透過本地處理和儲存文件和上下文來確保隱私，而無需將資料傳送到外部伺服器。 ``` from privategpt import PrivateGPT, DocumentIngestion, ChatCompletion client = PrivateGPT(api_key='your_api_key') def process_documents_and_chat(query, documents): ingestion_result = DocumentIngestion(client, documents) chat_result = ChatCompletion(client, query, context=ingestion_result.context) return chat_result documents = ['doc1.txt', 'doc2.txt'] query = "What is the summary of the documents?" result = process_documents_and_chat(query, documents) print(result) ``` {% cta https://github.com/weaviate/weaviate %} 星織 ⭐️ {% endcta %} --- ## 7. SwirlSearch - 人工智慧驅動的搜尋。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/extnr9oxhubs6m9x817a.png) LLM 支援的搜尋、摘要和輸出。 同時搜尋多個內容來源並產生整合輸出。 功能強大，可自訂各種資料來源的應用程式內整合。 {% cta https://github.com/swirlai/swirl-search %} 星旋搜尋 ⭐️ {% endcta %} --- 謝謝閱讀！ 我希望這些可以幫助您使用人工智慧建立一些很棒的東西。 如果您喜歡並評論您想看到的任何其他庫或主題，請按讚。 --- 原文出處：https://dev.to/copilotkit/7-ai-libraries-every-dev-needs-to-know-to-be-a-wiz-4lim

0個讚   0留言 121瀏覽

🦃 Reacts-giving：為專業人士提供 11 個 React 元件👩🏻‍🌾🍁

## 簡介 我收集了最好的 React 元件，您可以使用它來建立強大的 Web 應用程式。 每個都有自己的味道。 別忘了表達你的支持🌟 現在，讓我們仔細閱讀這段程式碼！ 🍽️ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2p4508nvzg74qd060lx.gif) --- ## 1. [CopilotPortal](https://github.com/RecursivelyAI/CopilotKit)：將可操作的 GPT 聊天機器人嵌入您的網路應用程式中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0s5nodilnbgy2myna6ny.png) 將 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) - 按讚、投票並查看任何上下文 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xubftfmy9xum98zjgv5m.png) 輕鬆將點讚、按讚和評論加入到您的網路應用程式中。 用於加入這些元件的簡單反應程式碼。 ``` 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) - 建立可拖曳工作流程的最佳方式！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hy0bsacbfzctin4r7tq.png) 專為建立基於節點的編輯器和互動式圖表而客製化的 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 驅動寫作 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uye8z6aac1015iiqd3lk.png) 具有 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) - 將應用程式內通知新增至您的應用程式！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c81fkg15xucqbyg4xctt.png) 用於在一個地方管理所有通訊管道的簡單元件和 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) - 最受歡迎的反應圖示集合 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1sj51u7omogoa5v7di6.png) 輕鬆將 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。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apr4lbjc1i0glbs0kize.png) 用於實作 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) - 建立和整合各種圖表。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k820fg3ep6cocfukqdny.png) 用於在 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) - 可預測的狀態容器庫 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7iv2maik6xq4w5yl21y.png) JavaScript 應用程式中 Redux 的無縫補充，提供可靠的狀態管理。 確保一致的應用程式行為。 便於輕鬆除錯和測試。 與各種庫整合。 https://github.com/reduxjs/redux --- ## 10. [Blueprint](https://github.com/palantir/blueprint) - Palantir 的密集 UI 庫 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/176noa7v8f25ll0jixqn.png) 提供一組用於建立複雜且資料豐富的介面的元件和樣式。 設計和開發具有現代外觀和感覺的類似桌面的 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 元件。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsxfiivef7du8u3g5i5l.png) 在 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

0個讚   0留言 176瀏覽

給開發者：這 8 個 Podcast 將幫助您增長知識並擴展思維

我是播客的忠實粉絲，這是最被低估的純粹知識資源。播客已成為學習和娛樂領域的革命性媒介。近年來，它們從小眾聽眾的愛好轉變為主流媒體形式。 向兩個或更多經驗豐富的人學習談論特定主題，討論他們在做某事時面臨的挑戰，並分享他們的旅程是很有趣的。 它為解決特定問題和建立獨特的解決方案提供了令人難以置信的見解。您將了解： - 不同的心態以及其他人如何看待事物。 - 人們用來解決問題的各種工具。 - 傑出人物和他們的故事以及他們如何解決特定問題。 - 走出精神泡泡並開始以不同的方式看待事物。 另一個好處是，你透過聽這些播客所獲得的知識會成為你的潛在知識或隱性知識庫。 因此，當您面臨類似領域的挑戰時，從播客中獲得的知識可以為您提供一些時間或路線圖來建立應對挑戰的解決方案。 身為人工智慧愛好者，在知識和資料領域工作。我選擇了 [Vector Podcast](https://www.youtube.com/@VectorPodcast)，因為我對向量資料庫和向量搜尋、它們如何幫助公司建立基於人工智慧的產品等感到好奇。 以下是我推薦的 8 個最佳播客，您可以收聽。 _我正在提供他們的 YouTube 頻道，假設每個人都知道並使用 YouTube。其中大多數也出現在 Apple Podcast、Spotify 等上_ ## [向量播客](https://www.youtube.com/@VectorPodcast) ![向量播客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jii8stvlc2zhecit0b7p.jpg) Vector Podcast 是 Dmitry Kan 博士的創意。研究生研究科學家涉足產品管理和創業。他也曾在赫爾辛基大學講課。 他在搜尋引擎領域、人工智慧和軟體開發領域擁有超過 15 年的經驗，並採訪了人工智慧領域的專業人士和執行長。 一些值得注意的情節是： - 與 Swirl 執行長 Sid Probstein 一起進行搜尋。 - 向量資料庫以及 Weviate 執行長 Bob van Luijt。 - 康納肖頓的搜尋未來。 https://www.youtube.com/@VectorPodcast ## [萊克斯‧弗里德曼](https://www.youtube.com/c/lexfridman) ![萊克斯·弗里德曼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zb0jvrfnvqwa6khxhpil.jpg) 萊克斯·弗里德曼（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) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7ix13d6kberdnex6suz.jpg) 知識專案播客由法納姆街的 Shane Parrish 主持，揭示了其他人已經發現的最好的東西，以便您可以將他們的見解應用到您的生活中。 肖恩·帕里什 (Shane Parrish) 的播客和見解無疑令人驚嘆。你必須經歷知識專案才能很好地理解它。 ## [語法](https://www.youtube.com/@syntaxfm) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cul191m0c2jbdmf6knvg.jpg) 來自 30 Days of JavaScript 的 Wes Bos。該播客討論 JavaScript 和 Web 開發。 它涵蓋了一些有趣的主題，從 Web 開發的新功能到 JavaScript 測試和其他主題。 ## [本週機器學習 (TWIML)](https://www.youtube.com/@twimlai) ![本週機器學習](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg5z96p0s26pw3i34n8n.jpg) 與 Sam 一起探索人工智慧的最新趨勢和突破，討論將人工智慧驅動的產品推向市場的實際挑戰，並研究人工智慧技術與商業和消費者應用的交叉點。 這個播客不只是一次對話；更是一次對話。它是理解和利用機器學習和人工智慧的全部潛力來改善我們的生活和社區的門戶。我非常喜歡這個播客！ ## [變更日誌](https://www.youtube.com/@Changelog) ![變更日誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu44gmvwd13veekuukhn.jpg) 變更日誌不只是播客的集合；這是一個充滿活力的社區，為處於各個階段的開發者提供豐富的資源。 無論您是經驗豐富的專業人士、好奇的初學者，還是介於兩者之間，我們的節目和資源都會提供與開發人員體驗產生共鳴的寶貴見解、討論和故事。 ## [談 Python](https://www.youtube.com/@talkpython) ![談 Python](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzdyh4s3ow11c73p50f2.jpg) Talk Python to Me 是由 Michael Kennedy 主持的每周播客。本節目涵蓋各種 Python 和相關主題（例如 MongoDB、AngularJS、DevOps）。 ## [超越編碼](https://www.youtube.com/@BeyondCoding) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guwikoy09l2mv167l9wp.jpg) 帕特里克·阿基爾 (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

0個讚   0留言 152瀏覽

如何寫文章：與世界分享您的知識！

分享書面知識是掌握特定主題的好方法，也是改善社區中思想組織、溝通和明顯自我推銷的好方法。這種技術和社會文章的製作對於寫作者和閱讀者來說都非常重要，永遠記住：「你今天比那些昨天開始的人知道的更多」。 ## 費曼方法以及為什麼要製作內容 首先，我們需要討論為什麼我們應該分享內容，無論是文字格式（本文的重點）還是任何其他格式。為了開始這個討論，重要的是要了解費曼的方法是什麼，以及它如何幫助我們自信和掌握該學科，從而將學習效果提高 10 倍。 費曼方法是由一位非常重要的物理學家理查德·費曼建立的，目的是開發一種新的學習方法，這個新提議假設了一個核心事實：「如果你不能清楚、簡單地解釋某件事，那麼你就還不算搞懂這件事」 這句話有助於我們思考我們的學習應該如何建置，因為從我們開始考慮教授我們正在學習的內容的那一刻起，我們就更加專注於掌握該學科的基本基礎，並為迫使你學習的疑慮做好準備。另一方面，看起來問題完全不同。 當為此類情況做準備時，明顯的結果是對所研究的主題有極大的信心和掌握。 我特別喜歡這種方法，唯一的問題是，當我們離開學術環境時，很難找到對你現在正在學習的同一學科感興趣的人，要么因為你的學校裡沒有IT人。友誼週期或僅僅因為對特定主題有興趣。 對於這個問題我們有一個非常不可思議的解決方案，叫做「公共學習」！這種做法包括在技術社群線上分享您的學習內容，無論是製作影片、進行直播還是本文的目標：寫作！ 像 dev.to 這樣的平台（您現在正在使用它閱讀：D）旨在使「公共學習」的想法變得越來越簡單，並且更接近那些正在消費的人，因為現在可以製作能夠達到的文章與我們有相同興趣的人可以：學習、回答問題甚至提出改變和正確的想法。難以置信，對吧？ ## 收集想法並激勵自己寫作 ![寫迷因](https://github.com/cherryramatisdev/public_zet/assets/86631177/66b243e4-5d12-4901-929f-d458db2b6fe0) 靈感過程可能是在線撰寫文章之前最煩人的階段之一，我們經常陷入瘋狂技術的無限循環中以提出令人難以置信的想法，而事實上，解決方案最終非常簡單：接受你的想法並消費它們，盡可能多的內容。 尋找想法並建立自己的語言的最實用方法是閱讀其他人已經就您感興趣的主題發表的文章，無論是程式語言還是特定的 IT 主題等；這種內容消費來自許多不同的來源，例如技術文章、YouTube 影片、科技泡沫推文、Github 討論和許多其他可能的地方。 嗯，我知道這樣說似乎簡化了一些不簡單的事情，我同意你的觀點！不僅僅是閱讀或觀看網路上存在的所有內容才能使我們有能力製作相同的內容，使這些人脫穎而出的最重要技能是**組織到達大腦的想法**。 ### 維護第二個大腦 我們的大腦是一個優秀的資訊吸收機器，實際上是一塊儲存我們周圍所有資訊的海綿。這台機器的一個大問題是，隨著時間的推移，它在組織方面變得很糟糕，這主要是為了節省能源，因為我們不需要一直記住一切，但知道我們可以做什麼來將我們想要的資訊儲存在一個機器中。組織方式？好吧，好吧，年輕的蚱蜢，我們當然需要停止相信我們的大腦！ 維護「第二個大腦」是作家和研究人員中非常著名的做法，它由一個物理或虛擬位置組成，您可以在其中複製您所消耗的小塊內容以及使用您自己的話對該主題進行的觀察。這堆筆記將構成您的“第二個大腦”，並使您能夠快速找到任何內容並參考其作者，而不會忘記任何內容！ 長話短說，消耗盡可能多的內容，將其儲存在可以儲存和搜尋的第二個大腦中，最後挑戰自己寫作！無論是您想學習的主題、您最近學到的特定內容，還是您已經掌握多年的內容。 ## 了解平台並找到自己的語言 了解我們透過撰寫內容要接觸的平台和受眾非常重要，這樣我們就可以過濾我們將如何建立文章的整體結構，對嗎？在*我看來*，[dev.to](https://dev.to) 是一個非常非正式的平台，它重視大量以教程形式呈現的內容，具有對話風格並且開門見山，以此通過這些訊息，我們可以推斷出一些建立文章的方法，以便我們可以用讀者已知的模型來說明我們的想法。 這是否意味著您將製作的所有內容都是簡單、非正式的教學？決不！這只是意味著你可以塑造你的內容來包含這種更非正式、對話和直接的語言，即使所涵蓋的主題非常複雜，這甚至成為簡化複雜性的一個非常有趣的挑戰。 > 簡化複雜問題的能力將伴隨您的餘生，建立類比和範例以促進理解和辨識所提出的問題和建議的解決方案非常重要。 ## 學習 Markdown 和良好格式設定的一般技巧 我們在dev.to 上製作文章的方式是使用一種稱為[Markdown](https://www.markdownguide.org) 的標記語言（與HTML 完全相同），雖然它非常簡單，但重要的是要有一個當我們談論組織並使文字美觀時，我們可以做很多事情，類似於我們如何在 Microsoft Word 中產生複雜的結構，我們應該能夠使用 Markdown 程式碼產生相同的結構。 強調結構良好的教育材料的重要性始終很重要（畢竟，您正在閱讀這篇文章正是因為這個原因，對吧？），當談到卓越和品質時，我不能不推薦 [4noobs](https://github.com/he4rt/4noobs)，它在一個存儲庫中匯集了有關各種IT 主題的多個免費課程和文本格式，對於本文的主題，我建議使用[markdown4noobs](https://github.com/jpaulohe4rt/markdown4noobs )學習 Markdown 標記語言。 ### 文字操作和程式碼區塊的基礎知識 Markdown 讓我們可以使用超級基本和必要的結構來標記文字的各個部分，例如粗體、斜體、突出顯示、標題層級等。下面我們將快速了解如何使用正確的語法執行每個操作。 ``` # Primeiro titulo equivalente a um h1 ## Segundo titulo equivalente a um h2 ### Terceiro titulo equivalente a um h3 #### Quarto titulo equivalente a um h4 `Texto em highlight` **Texto em negrito** *Texto em itálico* ``` Markdown 語言的這些技巧使我們能夠以自己喜歡的方式控制敘述並使閱讀更容易理解，在文本中間使用**粗體**來吸引註意力，使用突出顯示甚至使用突出顯示來明確“技術術語”說明性圖像介紹了段落的要點，同時使文字的整體氛圍更易於閱讀。 另一個值得一提的重要事情是我上面使用的特定區塊，它在編寫技術文章時非常有用，因為它允許更多地突出顯示文字區塊，並且它允許您在編寫程式碼區塊時啟用語法突出顯示，它的使用方式如下： > 免責聲明：由於 markdown 不允許區塊內有區塊，所以我選擇用截圖來展示： ![程式碼區塊](https://github.com/cherryramatisdev/public_zet/assets/86631177/61de98aa-e7bb-4baa-91c4-afca9db2991f) 在「反引號」符號之後，我們可以包含語言的名稱（在我的例子中為 ruby），以便 dev.to 可以啟用特定於該程式語言的語法突出顯示。 ### 目錄 如果您的文章超過兩千字邊距或至少有 4 個主要標題，我強烈建議您定義一個「目錄」或「目錄」。目錄用於指導閱讀本文將要介紹的要點。要建立一個目錄，我將在下面示範一些技巧： #### 在 dev.to 平台上，使用無序列表而不是編號列表 Markdown 中的清單使用起來非常簡單，它們有兩種**主要**類型：無序和編號。 ``` - Uma lista - Não - Ordenada 1. Uma lista 2. Numerada 3. Aqui ``` 在 dev.to 中使用編號列表的問題是它們沒有對齊，正如我們在下面的範例中看到的那樣，所以我通常不建議使用它們，我總是嘗試使用無序列表，如果有必要應用一些順序，在手動未排序的列表符號後使用數字。 ![清單沒有 dev.to](https://github.com/cherryramatisdev/public_zet/assets/86631177/0ab1a9c1-efb3-40d5-b90f-7cacb7d20f77) #### 如何組織標題的連結 假設您已經了解如何在 Markdown 中建立連結（因為您閱讀了 markdown4noobs，對吧？），讓我們學習在標題中指示連結的簡單技巧以及如何建立目錄。 目錄範例如下： ``` ## Table of contents - [What is metaprogramming anyway?](#what-is-metaprogramming-anyway) - [In ruby everything is an object, what does that mean?](#in-ruby-everything-is-an-object-what-does-that-mean) - [But what about rails? How this framework applies that concept for maximum developer experience](#but-what-about-rails-how-this-framework-applies-that-concept-for-maximum-developer-experience) - [How to define methods dynamically](#how-to-define-methods-dynamically) - [Using hooks to detect moments on the instantiation of the class](#using-hooks-to-detect-moments-on-the-instantiation-of-the-class) - [Conclusion](#conclusion) ``` 正如您所看到的，定義連結第二部分的總體思路是在標題旁邊以特定格式包含一個主題標籤“#”，遵循以下規則： - 用連字號「-」取代所有空格 - 將整個標題保留為小寫 就是這樣！帶有重音符號的標題可以保持不變，沒有任何問題，Markdown 理解相同的標準文本，如下所示： ``` - [Um título com muitos acentos e çedilha](#um-título-com-muitos-acentos-e-çedilha) ``` ## 技術文章的基本結構 現在我們對如何標記文字以使其清晰易讀有了一個有趣的想法，讓我們了解文章的結構。需要強調的是，模型並不適用於所有可能的文本類型，其想法是提供一個必須根據上下文進行調整和更改的整體想法。 首先，定義開頭段落以吸引讀者了解您將在整篇文章中剖析的問題或情況非常重要，這樣做很重要，因為第一段將由 dev.to 用於 e-行銷傳播、電子郵件或社交媒體。開頭段落的範例可以在您正在閱讀的同一篇文章或我在下面留下的其他文章中找到： ![段落初始範例 1](https://github.com/cherryramatisdev/public_zet/assets/86631177/a76e0a72-60a7-4864-b2e9-f43922a8e0fb) ![段落初始範例 2](https://github.com/cherryramatisdev/public_zet/assets/86631177/64fc0d55-eed4-4c81-b4cf-193cf0d594a6) 我們的想法是始終在文本中使用問題和停頓，以便我們能夠實現直接的對話式交流，並始終嘗試以最普遍的方式呈現情況，以便任何閱讀者都非常好奇並願意閱讀。 在第一段演示之後，定義[目錄](#table-of-content) 來引導使用者了解文章的主要標題非常重要，在這方面我個人不建議列出副標題標題旁邊，因為它們使目錄變得非常大，對於閱讀者來說不是很有用，顯然，如果您認為列出字幕非常重要，那麼完全值得包括在內。 轉到文章的正文，我們進入一個非常主觀的領域，因為它在很大程度上取決於所涵蓋的主題以理解其標題和段落的結構。我將假設簡單教程模型中的一篇文章能夠從某個地方開始。 我總是建議使用三個“附屬標題”來指導您的文章並提供靈感以通過更多細節擴展內容。這些衛星標題如下： -「技術或問題簡介」：這段將幫助我們詳細說明文章開頭所說的內容，回答我們為激發好奇心而建立的問題，並更深入地研究將與特定主題一起討論的主題。 - `優點與缺點`：此時我們將明確本文將介紹的解決方案的優點和缺點，無論是架構、程式碼標準、語言、框架等。根據您的主題，此段落的存在可能非常具體，但如果您以教程的形式呈現解決方案，它通常非常有用！ - `結論`：這一點更多的是一種意見，而不是一般規則，但我認為有一個段落將表明閱讀過程的結束是非常重要的，這樣我們就可以留下最終的論點，謝謝，聯繫方式以及任何其他有趣的訊息。 圍繞著這三個主要標題，我們可以用說明性的寫作來發展我們的文章，提供實際的例子或類比，使讀者更容易想像問題和解決方案。同樣重要的是要強調在過於深入地進行類比時要小心，它們非常有用，但是當你濫用它們並且永遠不會帶著明確的解決方案和解釋回到現實世界時，它們可能會成為一劑強心針。 關於文章結構的一般提示是保持閱讀光線的總體感覺，因此強烈建議使用圖像（無論是放鬆的表情包還是更好地說明所要表達的觀點的圖形），因為開發人員.to平台支持更多非正式技術人員的文章，濫用這種更接近的語言是一個非常準確的策略。 ## 如何複習並提升寫作水平 ![程式碼審查迷因](https://github.com/cherryramatisdev/public_zet/assets/86631177/ba71cb93-5734-423f-ab32-7718bf5bca5d) 好吧，現在我們已經很好地了解瞭如何建立我們的文章、如何使用 Markdown 保持文章美觀以及如何考慮我們的語言針對特定平台的情況，還缺少什麼嗎？好吧，現在剩下的就是要明白我們並不完美，我們會犯錯誤，因此，我們需要一個好的策略來回顧我們剛剛用我們學到的技術製作的文章。 為了幫助寫作，我強烈建議使用提供即時 Markdown 預覽的編輯器，例如 [VSCode](https://code.visualstudio.com/Docs/languages/markdown) 或社群最喜歡的 [Obsidian](https://obsidian.md)。這篇文章甚至是用黑曜石寫的！ 在複習方面，我們有一些非常有趣的工具可以幫助我們進行寫作的不同方面： - [LanguageTool](https://languagetool.org)：這個工具是我最喜歡的，它可以處理所有拼字更正，最酷的部分是，在這個工具中，您可以提供上下文提示，可以改進句子並更正特定的程式設計術語，例如語言名稱，因為他們的資料庫是超級更新的。 - [Deepl](https://www.deepl.com/translator)：進入人工智慧世界，Deepl 使用深度學習提供令人難以置信的翻譯介面，但不僅如此！有了它，我們可以獲得第二意見，以一種非常簡單的方式重新表述我們的段落，您只需將文本翻譯成英語，然後再次將英語文本翻譯成葡萄牙語；通常在Google翻譯中，這會破壞上下文，但該工具保留了上下文並改進了表達方式，以便您對同一段落有第二個感知。 - [ChatGPT](http://chat.openai.com) 或 [Bard](https://bard.google.com): 好吧，在這裡我承認我沒有太多知識，而且我不使用很多，但是這些介面人工智慧聊天可以幫助我們提出不同的觀點，重新措詞現有的段落，甚至開始寫一個段落。 **重要提示：我需要強調的是，您應該只使用這些工具來獲取想法或幫助改寫您已經編寫的文本，請不要使用人工智慧生成整篇文章** - [社群](https://heartdevs.com)：在 He4rt 開發者社群中，我們嘗試為在 dev.to 平台上撰寫技術文章提供盡可能多的幫助。我們透過提供一個論壇來做到這一點，您可以在文章仍在進行中時發布您的文章，並在發表之前獲得社區的反饋。發表後，我們還為活躍的人做宣傳工作！ **免責聲明：顯然我提到的是 He4rt，因為我們有一個專注於此的專案，但一般的教訓是與整個社區分享您的進展。** ## 結論和致謝 這是我在[100 天的程式碼](https://www.100diasdecodigo.dev) 挑戰之後發布的最後一篇文章，這是一個非常激烈的挑戰，需要大量的學習，我發現了一種新的熱情：寫作和分享知識！我甚至無法感謝 He4rt 社區在這段漫長的旅程中對我 100% 的支持。我希望這篇文章對任何閱讀它的人都有用，並激勵任何人在線上分享知識，以便我們可以建立一個更安全、資訊更豐富的網路。 我還要特別感謝本文的審稿人： - [阿尼巴爾‧索倫](https://github.com/anibalsolon) - [艾莉西亞瑪麗安](https://github.com/m4rri4nne) - [米格爾·S·巴博薩](https://github.com/m1guelsb) - [克林頓·羅查](https://github.com/Clintonrocha98) - [塞繆爾·羅德里格斯](https://github.com/SamucaDev) 願原力與你同在！ 🍒 --- 原文出處：https://dev.to/he4rt/compartilhando-seu-conhecimento-com-o-mundo-como-escrever-artigos-5ghc

0個讚   0留言 195瀏覽

【Python 🐍精通】Python Linked List 及基本 Linked List 操作🛠️

在上一篇文章中，我們了解了物件導向程式設計並對 Python 的 Magic/Dunder 方法進行了全面概述。 **Python 中的物件導向程式設計 (OOP)**：Python 中的這種範例圍繞著建立可重複使用程式碼。它涉及使用類別作為物件的藍圖。這些物件可以具有定義其行為和交互的屬性（資料）和方法（函數）。 **Python 的 Magic/Dunder 方法**：Python 中的 Magic 或 Dunder（雙底線）方法是名稱以雙底線開頭和結尾的特殊方法（例如，`__init__`、`__str__`、`__repr__`）。 您可以在這裡閱讀相關內容。 👇 https://dev.to/swirl/python-mastery-pythons-object-oriented-programming-overview-and-fundamentals-22m1 今天，我們將對其進行擴展，並使用物件導向程式設計的知識來理解和建立 Python 中的鍊錶。並會對其執行一些操作。 ## 開源 Python 專案：[Swirl](https://github.com/swirlai/swirl-search) [![旋流搜尋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9icq3q8vmtzrse1cbqcj.gif)](https://github.com/swirlai/swirl-search) 如果您對 Python 感興趣，您將會💖 [**Swirl**](https://github.com/swirlai/swirl-search)。 Swirl 是一個開源搜尋平台，它將為您提供以下知識： - Python - 人工智慧 - 在任何產品中整合大型語言模型 - 了解如何開發搜尋平台。 檢查我們的 GitHub 儲存庫： https://github.com/swirlai/swirl-search 如果您能夠：我們將非常高興： https://github.com/swirlai/swirl-search ## Linked List 連結列表是物件有序的集合。它是一種資料結構，旨在將資料保存在不連續的記憶體區塊中。 與使用連續記憶體區塊的陣列或傳統列表不同，鍊錶儲存在非連續記憶體位置。這種設計允許高效的插入和刪除，而無需重新排列整個資料結構。 這種設計允許高效的插入和刪除，而不需要重新排列整個資料結構。 ### 基本鍊錶 基本鍊錶是一種線性資料結構，其中每個元素（稱為節點）包含兩部分：資料和對清單中下一個節點的引用。這種結構允許有效地插入和刪除元素，因為它不需要移動元素，這與陣列不同。 典型的節點設計： **資料**：包含資料，可以是數字、地址、文字等。 **Next**：指向下一個資料節點或儲存下一個資料節點的位址。 ![Python 中鍊錶的節點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cus930t03hko9x0xeac2.png) 第一個節點稱為列表的頭，最後一個節點指向 None（在 Python 中）（或在其他語言中為 Null），稱為尾節點。 當你把很多節點收集在一起時，它就變成了一個鍊錶。 ![Python 中的鍊錶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndkxz3274ylfqva4y2kh.png) ### 鍊錶的好處和操作的時間複雜度 連結清單有很多好處，特別是在動態資料操作場景中。以下是一些主要優勢： 1. **動態大小**：與陣列不同，鍊錶可以動態增長或縮小大小，這對於記憶體使用來說是高效的。 2. **易於插入/刪除**：插入或刪除節點相對簡單，因為它通常只涉及更改一些引用，而不需要像陣列中那樣移動元素。 3. **靈活性**：它們可以實現其他資料結構，如堆疊、佇列和圖鄰接表。 |運營|時間複雜度| |----------------|-----------------| |存取 | O(n) | |搜尋 | O(n) | |插入| O(1) | O(1) | |刪除 | O(1) | O(1) | _注意_：我們考慮的是單鍊錶。 ## 在 Python 中實作鍊錶。 這是將在 Python 中建立節點的程式碼。如果您對 `__repr__` 方法感到困惑，請注意。請查看本系列中的[上一篇文章](https://dev.to/swirl/python-mastery-pythons-object-oriented-programming-overview-and-fundamentals-22m1)。 ``` class Node: def __init__(self, data): self.data = data self.next = None def __repr__(self): return f"Node({self.data})" ``` 連結列表類別的程式碼。這利用了 Node 類別來建立資料並將它們連接在一起。 ``` class LinkedList: def __init__(self): self.head = None def append(self, data): new_node = Node(data) if self.head is None: self.head = new_node return last_node = self.head while last_node.next: last_node = last_node.next last_node.next = new_node def __repr__(self): nodes = [] current = self.head while current: nodes.append(repr(current)) current = current.next return "->".join(nodes) ``` 這段程式碼做了兩件事： 1. **追加**：在鍊錶末端追加一個節點。 2. `__repr__` ：此方法遍歷鍊錶並以Pythonic方式列印它。 1. 這也可以使用稱為 traverse 的方法來完成。 _這是呼叫「__repr__」方法的「print(llist)」的輸出： ![在 Python 中列印連結清單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8krtl50nkifa5nhvsh4j.png) ### 遍歷鍊錶。 遍歷鍊錶就是遍歷每個節點並列印它的過程。 ``` def traverse(linked_list): current = linked_list.head while current: print(current.data) current = current.next llist = LinkedList() llist.append(1) llist.append(2) llist.append(3) print("Traversing the linked list:") traverse(llist) ``` ![Python中遍歷鍊錶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzzy5pwzixnwpgmfqynw.png) ## 反轉鍊錶 這個想法是迭代鍊錶，並且對於每個節點，將其“下一個”指標切換為指向前一個節點而不是下一個節點。這將幫助我們反轉鍊錶。 ``` def reverse_linked_list(head): previous = None current = head while current: next_node = current.next current.next = previous previous = current current = next_node return previous llist = LinkedList() llist.append(1) llist.append(2) llist.append(3) print("Original List:", llist) new_head = reverse_linked_list(llist.head) llist.head = new_head print("Reversed List:", llist) ``` ![反轉連結清單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s05ouz9eegzukkkuofw8.png) ## 在連結清單中插入值 我們已經有一個追加函數，可以將值加到鍊錶的末尾。但是，如果我們想要一個在特定位置加入的方法，並且如果該位置不存在，則將值附加到末尾，該怎麼辦？ ``` class LinkedList: def insert_after_value(self, data_after, data_to_insert): if self.head is None: return current = self.head while current: if current.data == data_after: new_node = Node(data_to_insert) new_node.next = current.next current.next = new_node return current = current.next self.append(data_to_insert) ``` ## 刪除鍊錶中的節點 若要從鍊錶中刪除節點，請建立一個函數，該函數將鍊錶的頭和要刪除的節點的資料作為參數。並遍歷鍊錶，直到找到資料，然後將其刪除。 ``` class LinkedList: def delete_node(self, data): current = self.head if current is None or current.data == data: self.head = current.next if current else None return while current.next: if current.next.data == data: current.next = current.next.next return current = current.next ``` ![刪除連結清單中的節點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12hjdfchdy0ofrjyyt10.png) 感謝您閱讀本文。在本系列的後續文章中，我們將討論 Python 和 Python 資料結構的更複雜的細節。 ## 為 [Swirl] 做出貢獻(https://github.com/swirlai/swirl-search) [![為 Swirl 做出貢獻](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itecirhtu5lghtlr6m2a.jpg)](https://github.com/swirlai/swirl-search) [Swirl](https://github.com/swirlai/swirl-search) 是一個開源 Python 專案。為 Swirl 做出貢獻可以幫助您獲得生產級的 Python 知識並提高您的技能。 檢查我們的 GitHub 儲存庫： https://github.com/swirlai/swirl-search 如果您能夠：我們將非常高興： https://github.com/swirlai/swirl-search 謝謝閱讀， 你們都令人嘆為觀止。 ![你太棒了](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqhf5vqr2lj4z5kq4gdr.gif) --- 原文出處：https://dev.to/swirl/python-mastery-overview-of-linked-list-in-python-essential-linked-list-operations-hn3

0個讚   0留言 223瀏覽

您使用 ChatGPT 的方式不正確！

這是何等的指責啊！噓！ 我知道這對於部落格文章標題來說可能有點過分，但讓我解釋一下。 ## 我的辯護😅 我在最近參加的技術會議上遇到了這個問題，一位觀眾問小組發言人， _“ChatGPT 會取代我們的工作嗎？”_ 儘管這個問題在人工智慧技術時代已經變得很常見，但那天演講者的回答給我留下了深刻的印象。 該人士表示， _「不，我們不一定會因為 ChatGPT 而失去工作，但我們可能會因為知道如何更好地使用 ChatGPT 的人而失去工作。」_ 叮！這讓我懷疑我是否有效地充分利用了 ChatGPT 的潛力。 所以今天，我在這裡承認我一直沒有充分利用ChatGPT，並介紹一些更有效地使用它的方法，我將與大家分享。 在這篇文章中，我們將深入探討身為工程師在日常生活中如何充分利用 ChatGPT 和其他人工智慧驅動的生成模型。 為了實現這一目標，**我們將探索開發人員可以採用的一些最受歡迎和最有用的提示模式。** **敬請關注！** 其中一些技術可能是您在沒有意識到的情況下已經使用的技術，或者是您將來可以利用的技術。 但首先， 讓我們花點時間考慮普渡大學的一項有趣的研究發現。 ## 一項有趣的研究 ![研究](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tddc12x6hj8az76shne1.png) 根據普渡大學最近進行的一項研究，當ChatGPT 收到來自Stack Overflow 的大約517 個程式設計問題時，**它在52% 的情況下提供了不準確或非功能性程式碼的答案。** 該研究也顯示ChatGPT 的表現在正確性、全面性、一致性和實用性方面落後於 Stack Overflow。 ![hollucinate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7qdqvew93d0fw5qw42x.png) 此外，我們中的許多人可能都經歷過人工智慧「**幻覺**」的情況，它會產生令人信服但不正確的答案。 這讓我們相信我們有能力驗證人工智慧提供的答案。 為了有效地做到這一點， **我們需要知道如何提出正確的問題並正確地建造它們。** 讀完這篇文章後，我一點也不感到驚訝，因為我的 ChatGPT 一直在為我提出錯誤答案而道歉，這可能很有趣。😂 ![ChatGPT 道歉截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxorsnskrrd4sqdqntcz.png) --- ## **今天的 4 個提示模式** 拋開笑話不談，現在讓我們深入探討四種提示模式，這些模式有助於使 ChatGPT 的回應更有意義、更準確，並且更符合我們問題的意圖。讓我們從一些標準模式開始。 ### 👉 模式 1 ![角色](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awl7ufo4xnez4ncb4coq.png) 首先是「**角色模式**」。使用這種模式，我們可以指導 ChatGPT 產生針對**特定觀點或觀點**定制的回應。這對於我們專業領域中常見的程式碼審查、架建置議、技術討論和想法特別有用。 --- ### 👉 模式 2 ![2食譜](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wghlc1u7qmtz37amyy2v.png) 接下來是「**配方模式**」。顧名思義，此模式根據問題提供了逐步指南，非常適合您對想要實現的目標有大致了解但需要詳細說明的情況。 例如，像這樣的問題_“您能為我提供將行動應用程式發佈到生產環境的分步指南，包括將其提交給商店進行審核的必要步驟嗎？”_將是一個很好的用例對於這種模式。 ![範例答案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxe072gs8ywpeqs3ly2l.png) -------------------------------------------------- ---------- ### 👉 模式 3 ![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shriorqfzgmhjmzglvh4.png) **「反射模式」**是第三種模式，我認為它是開發人員日常使用的**最重要的模式**之一。它命令人工智慧提供具有清晰推理的答案，這對於發現人工智慧「幻覺」實例和驗證回應非常有價值。 隨著我們在日常工作中越來越依賴人工智慧，這種模式變得至關重要，可能會導致我們失去對真相及其意義的把握。 所以強烈推薦， 使用這個模式**然後開始提問**！ --- ### 👉 模式 4 ![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4s0g172ttuxfm2swgze.png) 最後，**我一直最喜歡的**，我們有「**翻轉互動**」模式。 這種模式就是讓 **AI 控制對話**，當您知道自己想要實現什麼但不確定 ChatGPT 需要您提供什麼資訊時，這是一種創造性的方法。 在這種情況下，人工智慧會與你互換角色，並提出問題讓你回答。這是探索主題的一種令人興奮的方式。 透過這種模式，您無需擔心提出正確的問題； **ChatGPT 將透過提出需要回答的問題來指導您，以便正確解決您的原始查詢。** --- ## 🚀🚀 今天就結束了！🚀🚀 ![最後](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5glvbr4hzf6u2mmh51en.jpg) 在當今的開發者格局中，我們越來越有可能在日常工作中轉向 ChatGPT 或 Bard 等 AI 工具。人工智慧技術取得了巨大進步，對我們的個人和職業生活產生了重大影響。 **我們所處的世界至關重要的是，讓自己具備正確的技能，並深入了解我們所擁有的資源，以充分利用它。** 我希望這篇文章可以幫助您對將來有效使用 ChatGPT 更有信心，如果您有興趣，我願意建立更多與 AI 相關的貼文。謝謝你！ --- 原文出處：https://dev.to/ham8821/you-are-using-chatgpt-incorrectly-12ii

0個讚   0留言 158瀏覽

我使用了幾款文字編輯器的心得：sublime、vim、emacs、vscode

我將談論我使用每個文字編輯器的經驗，也許這對於評估文字編輯器的人花時間學習可能有用。 ## Sublime Text 我在高中時開始學習編程，編寫一些程式碼並在瀏覽器上查看結果非常有趣。我使用 Sublime Text 是因為我正在透過部落格文章和影片進行學習，而且大部分內容都提到了 Sublime Text。而且，它速度很快，而且我安裝了一些外掛程式來處理 php、html、javascript 和 css。我在工作中也使用了它幾年，直到有一天我加入了一家擁有 vim 和 emacs 用戶的公司。 ## vim vim 使用者從事的專案與我自己的專案更接近，所以我開始檢查他們是如何做事的，然後我開始學習 vim。這並不酷，學習如何使用它太難了，要加載新的配置文件我每次都必須重新啟動 vim 以及許多其他問題，但既然他們這樣做了，我說服自己我也可以學習它，所以我做過。 我使用 vim 幾個月了，我最喜歡 vim 的是它針對編輯檔案而不是建立新檔案進行了最佳化。大多數時候，我們都在編輯檔案並在程式碼行之間移動，這樣才有意義。最後，我對 vim 的使用感到高興並且富有成效。 ## neovim 有一天，我聽說了 neovim，但不確定為什麼我轉而使用它，但請查看這兩個專案的 github 專案： ![](https://thepracticaldev.s3.amazonaws.com/i/mr475vfxouxinfcgxeaa.png) ![](https://thepracticaldev.s3.amazonaws.com/i/oogdvczt4j9mt5v49jxu.png) 等等什麼？ vim 儲存庫上只有一位貢獻者？怎麼只有一個人就能做到這一點？檢查拉取請求列表，我發現作者應用了其他人的更改，因為這是他的更改。好吧，我不喜歡這樣，所以我改用 neovim，當人們做出貢獻時，它會給他們帶來榮譽。 更新：我同意我的調查太淺薄。我看到[此評論](https://dev.to/heast/comment/4gk4)。但我還是不喜歡這樣。 ## nvim + tmux 當時人們正在談論“tmux”，它是一個終端多路復用器，因此您可以拆分終端並擁有選項卡並自定義所有內容，從快捷方式到tmux 的外觀，例如向狀態欄加入有用的訊息。我嘗試過並且喜歡。由於我在終端中使用 nvim，它執行得非常好，我甚至找到了一些插件來順利整合它們。它是這樣的： ![](https://thepracticaldev.s3.amazonaws.com/i/u4ncf7ir9rfeb0lx700j.gif) 我不再使用 nvim，但你仍然可以找到我的 [vim](https://github.com/lucasprag/vimlociraptor) 和 [tmux](https://github.com/lucasprag/dotfiles/blob) 設定/ master/tmux.conf）。 我使用這個堆疊三年了，我很高興。 然後我看到自己管理 nvim、tmux、zsh 的配置和插件，以便在工作中的 Debian 上的 terminator 和家裡的 macOS 上的 iTerm 上執行良好。插件之間也不是一切都工作得很好，例如，我在nvim 上有自動完成功能，它工作得很好，除非我使用多個遊標，這是另一個插件的功能，自動完成功能僅適用於第一個遊標，因為它們沒有彼此融為一體。我還遇到了類似的其他令人沮喪的問題，而且我發現自己花了太多時間除錯或嘗試替代插件，所以我傾向於嘗試一些不同的東西，這就是 emacs 引起我注意的地方。 ## emacs Emacs 有一個 GUI 應用程式，它讓我不再需要 terminator 或 iTerm，它有自己的 shell，用 elist 編寫，稱為 eshell，所以我對所有事情都有一個配置和插件。我嘗試像使用 vim 一樣從頭開始寫下每個配置，但要學的東西太多了，而且我必須完成一些工作，所以我嘗試了 spacemacs，在一些幫助下我很快就能提高工作效率。 Spacemacs 有 vim 鍵綁定，所以我在家裡，我只需要學習處理 spacemacs 的不同方面，例如佈局和工作區。做事情更容易，因為它會即時顯示可用的鍵綁定，所以當您鍵入時，您可以看到您的選項，它也是助記符，所以如果您想要佈局，您可以使用“SPC + l” ，如果需要的話要切換某些內容，請使用“SPC + t”，如果需要緩衝區，請使用“SPC + b”，對於專案，請使用“SPC + p”，對於文件，請使用“SPC + f”，並儲存您需要的檔案組合“SPC + fs”（意指“spacemacs -> 檔案 -> save”）和“SPC + pt”等指令來檢視檔案的專案樹。非常簡單吧？ 我花了大約一個月的時間才理解一切並順利工作。我對一切都不滿意，我遇到了一些錯誤，這沒關係，我報告了並嘗試修復它們，但我必須再學習一種語言（elisp）才能做到這一點。這是一次很棒的經歷，因為我學習了很多 elisp，在我看來這是一門很棒的語言，所以我玩得很開心，這讓我使用了 spacemacs 6 個月。 然後我看到了這個影片： https://www.youtube.com/watch?v=8kCd4w4kc68 等等什麼？一週的 VSCode 就毀了對 Emacs 10 年的熱愛？我有一些朋友也對 vscode 很滿意，他們強烈推薦它。好吧，讓我們試試看。 ## vscode 我必須在周末做一些編碼，所以我切換到 vscode，總的來說，體驗很棒，但一開始我不得不經常使用滑鼠。 我安裝了vim 鍵綁定，令我驚訝的是，它還支援常見的vim 插件，例如「vim-easymotion」、「vim-surround」、「vim-commentary」以及其他我從未聽說過的插件。 我在 vscode 中發現的殺手級功能： - `cmd + p` 使用模糊搜尋開啟檔案更快、更聰明（它將最近的檔案放在頂部） - 快捷方式與瀏覽器快捷方式更相似，這讓我作為網頁開發人員的生活更輕鬆 - 設定檔是「JSON」文件，不需要太多自訂（我的設定檔有 22 行，僅此而已） - 整合的多終端運作得非常好，並且像 tmux 一樣有分割功能 - vscode 由 Microsoft 維護，我認為有一個團隊致力於它並加入彼此集成良好的功能真是太好了 - 我不需要除錯 vscode 並且到目前為止我沒有發現任何錯誤 - 我不需要安裝太多插件 - 跳到 React 的定義 我安裝的VScode外掛： - [Vim 鍵綁定](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim) - [專案管理器](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) - 使用「ALT + CMD + p」更輕鬆地在專案之間切換 - [書籤](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) - `ALT + CMD + k` 加書籤，`ALT + CMD + l` 跳到下一個書籤 - [檔案實用程式](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils) - 無需使用滑鼠即可輕鬆複製或重新命名文件 - [對 Ruby 的支持](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby) - [對 Ruby Haml 的支持](https://marketplace.visualstudio.com/items?itemName=vayan.haml) - [Ruby 自動補全](https://marketplace.visualstudio.com/items?itemName=castwide.solargraph) - [Ruby 的 Linting](https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop) - [Python 支援](https://marketplace.visualstudio.com/items?itemName=ms-python.python) - [Elixir 支援](https://marketplace.visualstudio.com/items?itemName=mjmcloug.vscode-elixir) - [React 支援](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - [One Dark Pro Monokai Darker 主題](https://marketplace.visualstudio.com/items?itemName=eserozvataf.one-dark-pro-monokai-darker) - 我最喜歡的配色方案 ![](https://thepracticaldev.s3.amazonaws.com/i/thtlo6h65n8hmfksan23.gif) 這是我使用文字編輯器的經驗。今天，我不必除錯我的編輯器來使簡單的事情發生，而且我仍然可以根據我的需要對其進行自訂。是的，我對 vscode 非常滿意，也許你也應該嘗試一下。我希望它對某人有用。 我也期待聽到您對這些文字編輯器的意見和經驗。謝謝。 --- 原文出處：https://dev.to/lucasprag/my-editor-journey-sublime-vim-emacs-vscode-19k0

0個讚   0留言 464瀏覽

初級到資深 Web 開發人員：技能樹說明

原文出處：https://dev.to/aswin2001barath/junior-to-senior-web-developer-roadmap-breakdown-1525 您是初級開發人員，正在努力爬上公司的階梯並成為高級開發人員嗎？ 您是一名感到迷茫、不知道從哪裡開始的全端開發人員嗎？ 🤔 嗯，您來對地方了！ 😎 這是初級開發人員成為受人尊敬的高級開發人員的逐步路線圖👨‍💻 ### 先決條件 - 基本的 HTML、CSS 和 JavaScript 知識。 - **MERN**（MongoDB、ExpressJS、ReactJS、NodeJS）或 **PERN**（PostgreSQL、ExpressJS、ReactJS、NodeJS）堆疊知識很有幫助，但不是必要的。 以下是路線圖中基本技術的細分，您可以在成為高級開發人員的過程中逐步遵循這些技術👨‍💻 ### SSH SSH 在安全遠端通訊中發揮著重要作用。透過熟悉 SSH 基礎知識、其命令、加密方法、SSH 金鑰管理以及將 SSH 應用於實際應用程式，您就可以順利成為高級開發人員。 - **到底什麼是 SSH？** - SSH 是 **S**ecure **Sh**ell 的縮寫，是一種旨在在兩台電腦之間建立安全通訊的協定。 （不用擔心這些花哨的術語——協議只是一堆規則，而 SSH 是一種特定類型的協議。） - **SSH 指令**：SSH 的主要用途之一是在遠端電腦上執行指令。這意味著您可以建立與伺服器的連接並使用 SSH 命令與其互動。 - **加密**：要真正掌握 SSH，了解加密等關鍵概念非常重要，其中涉及對稱和非對稱加密技術以及雜湊。這些概念為更深入地理解 SSH 的安全機制奠定了基礎。 - **SSH 金鑰**：SSH 的一個組成部分是使用 SSH 金鑰。這些密鑰由公鑰和私鑰組成。了解如何在伺服器上產生、管理和安全地儲存這些金鑰對於有效使用 SSH 至關重要。 - 練習並測試您的 SSH 技能： - 練習 SSH 技能的一個好方法是將本地電腦連接到 **GitHub** 等平台或 **DigitalOcean** 等雲端供應商。這種實務經驗將有助於鞏固您對 SSH 概念的理解。 - 想像這樣的場景：“您的 Web 應用程式一夜之間神秘地從伺服器上消失。您的任務是使用 SSH 將所有專案檔案恢復到伺服器上。”成功完成此任務可以展示您的 SSH 技能和解決問題的能力。基本上，如果你能做到這一點，那你就太棒了！ ### 表現： 效能優化是您成為高級開發人員的關鍵技能。以下技術將幫助您確保應用程式平穩且有效率地執行。透過掌握它們，您將成為性能大師。 **I) 網路優化：** - **最小化檔案**：最小化檔案至關重要，因為較小的檔案會導致更快的載入時間。這不僅可以增強使用者體驗，還可以降低專案的頻寬成本。在網路速度不同的行動裝置造訪網站的時代，這一點尤其重要。 - 1. **檔案壓縮**：較小的檔案意味著使用者的下載速度更快。了解如何使用 GZIP 等檔案壓縮技術來最小化檔案大小，以減少 HTML、CSS 和 JavaScript 等基於文字的檔案的大小。 - 2. **影像最佳化**：透過調整大小、壓縮和選擇正確的影像格式來優化影像可以顯著減小檔案大小。 ImageMagick 等工具或 TinyPNG 等線上服務可以幫助您完成此過程。 - **改善應用程式的交付**：改進的交付可以加快頁面載入時間，這可以直接影響用戶的參與度和保留率。這對於全球可存取性和確保全球用戶獲得一致的體驗也至關重要。 - 1. **內容交付網絡(CDN)**：CDN 是一種分散式伺服器網絡，策略性地位於全球範圍內，用於從地理位置更靠近用戶的伺服器交付Web 內容，例如圖像、腳本和影片，從而更快的加載時間並減少延遲。作為初級開發人員，了解如何利用 CDN 來增強交付。 - 2. **HTTP/2 協定**：HTTP/2 是萬維網使用的 HTTP 網路協定的主要修訂版。它透過同時發送多個檔案並透過多路復用、壓縮和標頭優化等功能實現更快的載入時間來增強網站效能。實作 HTTP/2 協定可以顯著改善交付。 - 練習並測試您的網路優化技能： - 效能測試：初級開發人員可以透過使用 Google 的 PageSpeed Insights、GTmetrix 或 WebPageTest 等工具進行效能測試來進行練習。這些工具評估網站的效能並提供改進建議。 - 真實世界專案：初級開發人員可以透過參與真實世界專案進行練習。從頭開始建立和優化網站或 Web 應用程式可以提供實施網路優化的實務經驗。 **II) 前端優化：** - **關鍵渲染路徑以及如何改進它：** - 了解和優化關鍵渲染路徑對於使您的網站快速加載至關重要。它涉及優化從用戶請求網頁到視覺上完整的事件順序。關鍵面向包括最大限度地減少 CSS 和 JavaScript 等渲染阻塞資源、利用瀏覽器快取以及利用非同步載入技術。 - **漸進式 Web 應用程式 (PWA) 與程式碼最佳化：** - 開發漸進式 Web 應用程式涉及最佳化程式碼以獲得卓越的使用者體驗。 PWA 是一種 Web 應用程式，可提供類似本機應用程式的體驗，具有離線功能、推播通知和快速載入時間等功能。程式碼優化實踐包括高效的快取策略和最大限度地減少 JavaScript 執行，同時確保互動順暢。 - **建立離線就緒的漸進式 Web 應用程式 (PWA)：** - 了解如何開發離線工作的 PWA，甚至使用 JavaScript、HTML 和 CSS 將其提交到應用程式商店。離線功能、快取和響應式設計是確保 PWA 無縫運作（無論使用者的網路連線為何）的重要組成部分。 - **程式碼分割：** - 程式碼分割是一種透過將 JavaScript 分成按需載入的較小套件來增強網站效能的策略。這種做法減少了初始載入時間並改善了整體使用者體驗，尤其是在較慢的網路連線上。 - **React 和 Redux 應用程式的智慧渲染：** - 透過智慧渲染技術提高 React 和 Redux 應用程式的速度。這涉及優化元件渲染和狀態管理，減少不必要的重新渲染，並確保您的應用程式快速響應用戶互動。 - 練習並測試您的知識： - 透過實際改善網站（例如公司登陸頁面）來提升您的技能。實施您在實際專案中學到的效能最佳化，然後測試結果。這種實務經驗對於鞏固您在前端優化方面的專業知識非常寶貴。 **III) 後端優化** 後端優化以及實踐和測試是確保您的應用程式能夠處理不斷增長的用戶群並提供高效、可靠的服務的基礎。 - **內容交付網路 (CDN)：** - 內容交付網絡是分散式伺服器網絡，用於儲存網站內容的快取副本。這些伺服器策略性地分佈在全球各地，允許用戶從地理位置較近的伺服器存取資料。這可以減少延遲、加速內容交付並增強用戶體驗。 - **擴充資料庫：** - 擴展資料庫涉及擴展資料庫的容量和效能以處理增加的資料和流量。技術包括垂直擴展（向單一伺服器加入更多資源）或水平擴展（加入更多伺服器來分配負載），確保您的應用程式在成長時保持回應靈敏且可靠。 - **壓縮來自後端的回應：** - 壓縮來自後端的回應意味著減少從伺服器發送到客戶端的資料大小。 GZIP 壓縮等技術可以顯著減小響應大小，從而縮短載入時間並減少頻寬消耗。 - **快取:** - 快取涉及將經常存取的資料或內容儲存在記憶體或磁碟上，以便更快地檢索。實施快取策略可以縮短回應時間、減少伺服器負載並增強應用程式的整體效能。 - **負載平衡和負載測試：** - 實作負載平衡器對於在多個伺服器之間分配傳入網路流量至關重要。負載平衡可確保沒有任何一台伺服器不堪負荷，從而提高資源利用率並提高可靠性。 - 負載測試模擬現實條件，以辨識效能瓶頸、確保可擴充性並最佳化您的基礎架構。 - 練習並測試您的知識： - 實作負載平衡器。 - 對專案實際執行負載測試。 ### 前端框架與概念 前端開發是您成為資深開發人員的基石。熟悉這些概念將為網路開發事業的蓬勃發展鋪路。 - **React 和 Redux**：React 和 Redux 是建立動態單頁應用程式的首選函式庫。首先掌握 React 基礎知識並建立一個專案。然後，深入研究 Redux，了解狀態管理並建立應用程式以實現可擴展性。 - **Webpack4 + Parcel**：Webpack4 和 Parcel 是用於捆綁專案文件和優化生產包的最新工具。獲得使用 Webpack 設定專案的實務經驗。 - 練習並測試你的技能： - 透過使用 React 和 Redux 建立專案來測試您的知識。 - 了解使用 Webpack 設定專案的細節。 ### 測試： 測試是一個重要的主題，但也經常被初學者和初級開發人員忘記。 公司喜歡測試。因此，如果您知道如何編寫單元測試和整合測試，您將編寫更好的軟體。 - **軟體測試 101：** 了解什麼是測試、測試類型、目前 Web 開發世界中的測試環境、測試工具和函式庫的類型是什麼、如何使用它們以及如何設定一切。 - **Jest**：用於測試的頂級庫之一。學習編寫同步和非同步測試、編寫模擬並產生覆蓋率報告 - **React 測試**：然後深入為您的 React 應用程式編寫測試。學習使用快照測試和酵素來編寫智慧測試，以避免應用程式中出現錯誤。 到此結束時，您應該了解整個測試環境，並可以輕鬆地編寫您遇到的任何測試。 ### 打字稿： TypeScript 是目前 Web 開發環境中最熱門的話題之一。 - **靜態類型**：了解靜態類型的基礎知識。了解為什麼 JavaScript 沒有靜態型別而是動態型別。 - **Typescript 101**：了解什麼是 TypeScript、如何使用 TypeScript、有哪些不同類型以及如何將它們新增到您的專案中。 - **React 中的 Typescript**：最終學習如何將 TypeScript 新增到您自己的 React 專案中。 再次確保您掌握這些主題。 ### SPA + 伺服器端 - **伺服器端渲染 (SSR)**：透過伺服器端渲染深入研究 Web 渲染的起源。了解為什麼 SSR 在 Web 開發中曾經並且仍然有用。了解為什麼有些公司繼續依賴 SSR 來滿足特定需求。探索 React 中伺服器端渲染的實現，並權衡這種方法的優缺點。 - **客戶端渲染 (CSR)**：深入了解單頁應用程式 (SPA) 中的客戶端渲染。了解企業社會責任的優點和缺點。了解何時選擇客戶端渲染而不是伺服器端渲染。了解如何實作客戶端渲染並評估兩種渲染方法的優缺點。 - **Next.js**：探索 Next.js，這是一個簡化伺服器端動態應用程式所建立的函式庫。了解 Next.js 如何促進伺服器端渲染和互動式資料驅動 Web 應用程式的開發。 在本節結束時，您將準備好決定是否需要為您的專案使用單頁應用程式或伺服器端呈現的應用程式。 ### 安全： - **前端安全性最佳化**：學習跨網站腳本和 SQL 注入等註入攻擊。練習這些以了解它們是如何工作的。 - **後端安全優化**：了解有關後端安全的更多資訊以及管理敏感資料的最佳實踐。 - **道德駭客 101**：學習基本的道德駭客技術，以便我們在建立應用程式時能夠學習如何保護自己。 因此，在學習這些概念後，當您使用最新的提示和技巧以及實施最新的工具和技術來建立安全應用程式時，您必須充滿信心。 ### 碼頭工人： **Docker** 是一個容器化平台，可讓您將應用程式及其相依性打包到可移植、隔離的容器中。這些容器可以在從開發到生產的不同環境中一致運作。 Docker 是一個絕對會讓你驚嘆不已的工具。 - **容器**： - 首先深入了解容器及其對公司建立和管理應用程式的方式的深遠影響。 - 容器支援輕量級、一致且易於複製的環境，徹底改變了軟體開發和部署。 - **Docker 101**：製作容器 - 透過了解如何建立 Docker 檔案和建立自己的容器來了解 Docker 的基礎知識。 - 這些基礎知識構成了使用 Docker 輕鬆封裝和分發應用程式的基礎。 - **Docker-compose**：編排容器 - 探索 Docker-compose，一個用於編排多容器 Docker 應用程式的工具。 - 了解如何將多個容器作為單一服務進行定義、配置和管理，從而簡化複雜應用程式的部署。 - **微服務與單體架構**： - 在整體架構中，單一大型程式碼庫處理所有應用程式功能，這使得更新和擴展具有挑戰性。 - 容器支援微服務方法，其中應用程式被分為更小的、獨立的服務，可以單獨開發、部署和擴展。這種轉變提供了靈活性、可擴展性並提高了資源利用率。 - 容器（如 Docker）有助於從整體架構轉向微服務。因此，請詳細了解每種架構的優缺點。 - 練習並測試您的 Docker 技能： - 了解如何將 Redis 伺服器、Postgres 資料庫和 API 伺服器全部組合到一個 docker 容器中，以便它們都透過一個命令執行。 在本節和操作專案之後，每當我們部署應用程式時，我們都會對 Docker 感到非常滿意。 ### Redis： Redis 是最受歡迎、最常用的資料庫之一，是一種鍵值儲存。 - **資料庫 101**：深入研究資料庫主題，深入了解各種類型的資料庫以及它們如何適應資料儲存解決方案的前景。 - **什麼是 Redis？：** - Redis 是一個開源的記憶體鍵值儲存資料庫。 - 它在資料儲存和檢索方面表現出色，使其成為需要高速資料存取的應用程式的多功能選擇。 - **Redis 101**：學習如何使用 Redis。了解如何使用 Redis 進行快取以使我們的網站更快並進行會話管理。 - **Redis CLI**：了解如何使用 Redis CLI。 - **練習您的 Redis 技能**：啟動我們自己的 Redis 伺服器。 - **鍵值資料庫及其作用：** - 像 Redis 這樣的鍵值資料庫提供了一種簡單而有效的資料儲存方式。 - 它們將資料儲存為鍵和對應值對，從而實現快速資料檢索。 - 這些資料庫在快速資料存取至關重要的場景中尤其有價值，例如快取、會話管理和即時應用程式。 - **何時使用 Redis 等資料庫：** - Redis 非常適合速度和資料一致性至關重要的用例。 - 考慮使用 Redis 來快取經常存取的資料、管理使用者會話、為即時應用程式提供支援以及確保對關鍵資訊的低延遲存取。 ### 會話 + JWT 使用您的 React 專案，了解如何建立網站的整個動態部分：即使用以下技術的使用者管理。 - **會話驗證**：了解如何建立新的個人資料頁面。了解如何使用基於會話的身份驗證（其中將使用 cookie）並了解如何實現它。 - **令牌身份驗證**：了解有關令牌身份驗證（例如 JWT 令牌）的更多資訊。了解每種身份驗證類型的優缺點。 - **安全性身分驗證流程**：了解如何實施可以在您選擇的任何應用程式中實施的安全性身分驗證流程。 - 練習您的 Redis 技能：學習如何使用和實施 Redis 進行會話管理 - 這樣我們就有受保護的路線 - 此外，這樣，只要我們有登入功能，我們就可以使用該系統，因為我們知道它是安全的並且遵循最佳實踐。 ### 亞馬遜網路服務（「AWS」）： Amazon Web Services，通常稱為 **AWS**，是一個強大的雲端平台，它改變了公司的營運方式，提供了無與倫比的可擴展性和效率。 #### AWS 101： - **什麼是 AWS（亞馬遜網路服務）？：** - AWS 是一個雲端運算平台，提供廣泛的服務，包括運算能力、儲存、資料庫、機器學習等。 - 它提供可擴展的按需資源，使企業能夠創新和發展，而無需管理實體基礎設施的負擔。 - **基礎設施即服務 (IaaS)：** - AWS 提供基礎架構即服務，讓使用者透過網際網路配置和管理虛擬化運算資源。 - 這種方法消除了對本地硬體的需求，並提供了靈活性和可擴展性。 - **平台即服務 (PaaS)：** - AWS 將其服務擴展到平台即服務，使開發人員能夠建置、部署和管理應用程式，而無需擔心底層基礎設施。 - 這使開發人員能夠專注於編寫程式碼和交付價值。 - **使用 AWS 進行擴充：** - AWS 使公司能夠有效擴展，並根據需要提供對資源的存取。 - 它允許企業將其能力與需求相匹配，類似於Google、亞馬遜和微軟等科技巨頭，確保他們能夠無縫地為客戶提供服務。 - **AWS Lambda** 是一種無伺服器運算服務，使開發人員能夠執行程式碼來回應事件，而無需管理伺服器。它提供了一種經濟高效、可擴展且簡單的方式來執行雲端中的功能。 - **Serverless 101**：了解如何使用 Serverless 框架。 - 練習您的 AWS 技能：了解如何將 AWS Lambda 實施到您的 React 應用程式中。 最後，您將充滿信心地使用 AWS 並建立雲端中的功能。 ###CI/CD 當我們將所有內容聯繫在一起並建立瞭如何編寫優秀軟體和優秀應用程式的整體圖景之後；了解如何實際建立良好的流程以及如何實際將應用程式部署到生產中。 - **持續整合**：了解有關良好持續整合實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - **持續交付**：了解有關良好持續交付實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - **持續部署**：了解有關良好持續部署實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - 練習 CI/CD 技能：了解如何在專案中實施 Circle CI (CI/CD) 工具 - 確保您的開發團隊從一開始就擁有正確的工具和正確的流程 - 成功編寫錯誤更少、程式碼更簡潔的應用程式。 ### 額外位 - **程式碼分析**：了解當您第一次開始一個有大量文件並且不是您自己編寫程式碼的專案時該怎麼做！了解真正優化的提示和技巧。 - **建立高品質應用程式的一般最佳實踐**。 ### 軟技能 - 在本部落格中，我主要關注成為高級開發人員過程中的技術方面。然而，有效溝通和情緒智商等軟技能也發揮著至關重要的作用。 - [開發人員的七大軟技能及其學習方法](https://academy.zerotomastery.io/a/aff_pp6yfnkw/external?affcode=441520_dcwk-s8s)：要更深入地探索各種軟技能，請考慮請參閱資深開發人員兼程式講師Andrei Neagoie 撰寫的部落格。 ### 筆記 - 不同的公司可能對高級 Web 開發人員有不同的期望，因此請務必進行一些額外的研究來客製化您的開發路徑。 最後，在學習了上述所有主題之後，所有這些事情對您來說都會有意義。您將能夠將所有這些事情實施到您自己的專案、您自己的公司。您將了解它們中的每一個是如何連接的。 最重要的是，與其他需要數年時間學習這些技能的初級開發人員相比，借助本路線圖可以快速學習這些內容。 ### 最佳資源 - [初級到高級 Web 開發人員路線圖部落格系列](https://dev.to/aswin2001barath/series/24357)：一個部落格系列，我將學習並分享上述每個主題的知識。 - [不要成為初級開發人員：從初級到高級的路線圖](https://academy.zerotomastery.io/a/aff_5s8ff6y7/external?affcode=441520_dcwk-s8s)：Andrei Neagoie 的詳細路線圖部落格（a高級開發人員）提供免費資源的連結。 - **零到精通課程**：[完整的初級到高級Web 開發人員路線圖課程](https://academy.zerotomastery.io/a/aff_hpwn5xy9/external?affcode=441520_dcwk-s8s)：Andrei 的綜合課程Neagoie（同一高級開發人員）涵蓋了上述所有主題。 **我是誰？** - 我是 Aswin Barath，軟體工程迷，喜歡建立 Web 應用程式，現在在我自由職業生涯的繁忙時間透過[部落格](https://medium.com/techsoftware) 分享我的知識。 - 我也是像您一樣的初級開發人員，學習如何成為高級開發人員並在過程中分享我的知識。 - 這是我所有社交活動的連結，按平台分類在一個位置：https://linktr.ee/AswinBarath **謝謝** 非常感謝您閱讀我的部落格🙂。

0個讚   0留言 150瀏覽

8款新潮好用的 React 套件分享

原文出處：https://dev.to/github20k/8-components-to-become-a-react-master-2ee4 # 簡介 我收集了可用於建立終極網站的 React 元件。 他們每個人都有獨特的用例！ 別忘了給他們加星號🌟 那麼就讓我們開始吧！ ![讓我們開始吧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxaa9vnqc8ye5a0g1iv2.gif) --- ## 1. [Clickvote](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert) - 按讚、投票並查看任何上下文。 👑 [![Clickvote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yn237newdjgm4uhl1p1.png)](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-clickvote/clickvote?utm_source=dev&utm_medium=react-元件專家) 將點讚和評論元件無縫整合到您的應用程式中。 使用這個簡單的 React 程式碼渲染喜歡框、評論框和反應元件！ ``` 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](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert) --- ## 2. [Novu](https://github.com/novuhq/novu) - 將應用程式內通知新增至您的應用程式！ [![Novu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyb47s6sbh232x77f794.png)](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     ## 3. [CopilotKit](https://github.com/RecursivelyAI/CopilotKit) - 使用 GPT 將自動補全功能加入您的文字！ [![CopilotKit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bvi730jwuggjti7peg8.png)](https://github.com/RecursivelyAI/CopilotKit) 適用於任何 React 應用程式的強大且可破解的副駕駛。 只需幾分鐘即可開始並無限迭代。 一個簡單的元件，可以自動完成您的內容，就像您在 Gmail 上一樣。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; <CopilotProvider> <CopilotTextarea/> </CopilotProvider> ``` 在這裡加星號🌟 https://github.com/RecursivelyAI/CopilotKit     ## 4. [Tolgee](https://github.com/tolgee/tolgee-platform) - 將任何上下文翻譯成任何語言！ [![Tolgee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbsuotaz842jjgaduqe3.png)](https://github.com/tolgee/tolgee-platform) 智慧平台、快速整合、輕鬆在地化。 一個簡單的元件，可以將任何上下文翻譯成任何語言！ ``` import { TolgeeProvider, T } from "@tolgee/react"; <TolgeeProvider tolgee={tolgee} fallback="Loading..." // loading fallback > <T keyName="translate_me">Translate me!</T> </TolgeeProvider> ``` 在這裡加星號🌟 https://github.com/tolgee/tolgee-platform     ## 5. [Hanko](https://github.com/teamhanko/hanko) - 對您的應用程式進行金鑰身份驗證！ [![Hanko](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j2aa3um0umgxskgau7u.png)](https://github.com/teamhanko/hanko) 美觀、可自訂的元件、SDK 和 API 可為您的登入和使用者管理提供支援。 5 分鐘內新增密碼驗證！這是該元件： ``` import { register } from "@teamhanko/hanko-elements"; const hankoApi = process.env.HANKO_API_URL; register(hankoApi); <hanko-auth />; ``` 在這裡加星號🌟 https://github.com/teamhanko/hanko     ## 6. [React Email](https://github.com/resendlabs/react-email) - 下一代書寫電子郵件 [![React 電子郵件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga9lcps91gv78sdy6l62.png)](https://github.com/resendlabs/react-email) 一系列高品質、無樣式的元件，用於使用 React 和 TypeScript 建立精美的電子郵件。 幫助您設計和發送電子郵件的元件！ ``` import { Button } from '@react-email/button'; import { Html } from '@react-email/html'; <Html lang="en" dir="ltr"> <Button href="https://example.com"> Click me </Button> </Html> ``` 在這裡加星號🌟 https://github.com/resendlabs/react-email     ## 7. [React Flow](https://github.com/wbkd/react-flow) - 建立可拖曳工作流程的最佳方式！ [![反應流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqcjbtlg5d8hx69vtvaa.png)](https://github.com/wbkd/react-flow) 高度可自訂的 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/wbkd/react-flow     ## 8. [Novel](https://github.com/steven-tey/novel) - 最好的所見即所得編輯器！ [![反應流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz1xewgmoc7htoq6d08b.png)](https://github.com/steven-tey/novel) 概念式所見即所得編輯器，具有人工智慧驅動的自動完成功能。 一個簡單的元件，將呈現具有大量功能的概念樣式編輯器！ ``` import { Editor } from "novel"; <Editor /> ``` 在這裡加星號🌟 https://github.com/steven-tey/novel --- 謝謝你們！ 下週見😎

0個讚   0留言 303瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 AI 驅動的前端 UI 元件產生器（Next.js、GPT4、Langchain 和 CopilotKit）
🔥 推出適用於 AWS 的新 Fullstack TypeScript DX
🔥 讓我保持高效率的工具
🔥 掌握關聯式資料庫設計：綜合指南
🔥 可用於下一個專案的 30 多個強大 AI 庫
  近期留言
熱門搜尋： module user Git 系列 使用 題 ci nodes c for 開發 學習 4 1 前 go 2 % C 第一 . 工作 專案 20 git 19 語言 作為 網站 前端 id app ui 10 JS 作業 javascript 主題 CSS github bi 後端 AWS 50 api 網頁 技術 COM API ＣＳＳ js AI 搜尋 分享 html GIT 測試 查詢 Github with 工程師 ` Ai jav " 練習 結構 create react Line REACT Java 套件 local Node 面試 Javascript 非同步 HTML class 遊戲 Vue ' JavaScript 研究 聊天 自學網頁の嬰兒教材： Can 資料庫 履歷 result 研 fetch unity import json prisma 分離 JAVA python
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。