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

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

🔍 搜尋結果：C

🔍 搜尋結果：C

最好的遠距工作是令人愉快的乏味

今天我的推特上看到了這樣的訊息： {% 推文 1074722960768929792 %} 布里安娜慶祝這種情況是多麼棒是正確的。如果你必須工作，你不妨在一個美妙的環境中工作。從我個人對她的了解來看，她在這裡過著最美好的生活，這很棒。 但對我來說，這並不是遠距工作的理想選擇。我目前在家庭辦公室工作。我無聊的家庭辦公室。 我的設定最棒的是所有東西都已插入，我的所有 A/V 都運作良好，而且我每天都有相同的設定。最棒的是我不用通勤，並且可以真正按照我想要的方式有效工作。 「從任何地方」進行遠距工作很難做到正確。 在 95% 的時間裡，我坐在同一張桌子上，連接著相同的外圍設備，我已經能夠顯著優化。 有關“針對 95% 進行優化”的更多訊息，請參見此處： {% 連結 https://dev.to/nickjj/optimize-your-programming-decisions-for-the-95-not-the-5-2n42 %} 有 5% 的時間我發現自己遠離了這種設置，但仍然完全處於工作模式，這是一個相當不理想的情況。這可能是令人愉快的，但這些天我努力讓它成為有計劃的例外。 有*很多*關於遠端設定的具體建議的精彩帖子： {% 連結 https://dev.to/ivancrneto/what-i-have-learned-from-eight-years-of-being-a-remote-developer-3eob %} {% 連結 https://dev.to/peteranglea/6-months-of-working-remotely-taught-me-a-thing-orten %} 其中許多都傾向於涉及設備和設置。其他建議通常圍繞溝通和團隊合作。不管怎樣，這並不容易，一致、優化的家庭設定對我來說似乎很關鍵。 我們的社區中有數位遊牧者，看到他們如何組織自己是很有趣的： {% 連結 https://dev.to/vickylai/knapsack-problem-algorithms-for-my-real-life-carry-on-knapsack-33jj %} 如果你想走這條路，你的 95% 優化將是完全不同的方法。如果你想做好工作，我建議你不要半途而廢。 這是一篇關於為自己創造出色的開發人員體驗這項重要任務的好文章： {% 連結 https://dev.to/theoutlander/how-to-improve-your-development-experience-ldl %} 言語很重要。我們*是一個分散式團隊*，而不是*遠距工作人員*。這是整個團隊的一個身份，甚至是那些在我們布魯克林辦公室工作的人。 這是一種很棒的工作方式，而且很平凡。快樂編碼。 --- 原文出處：https://dev.to/ben/the-best-remote-work-is-delightfully-unglamorous-4h5f

0個讚   0留言 62瀏覽

 代表「不間斷空格」🤯

{% 推文 1217167312001871876 %} 我百分之百一直認為這是官樣文章。 更多資訊... https://www.computerhope.com/jargon/n/nbsp.htm --- 原文出處：https://dev.to/ben/nbsp-stands-for-non-breaking-space-3bei

0個讚   0留言 60瀏覽

請問我應該如何調整自己的學習心態或是思維

利申 > 1.敝人的英文不是很好 > 2.目前嘗試產出專案中 > 3.目前仍在轉職學習的路上，也有報名課程等等 >4.需要一個抒發的地方，如不妥會刪文 >-----廢文----- >1.想問一下，假設我要在專案上用一個沒學過的技術，比如瀑布流排版，我有使用微軟的COPILOT來幫我提供資訊來源，觀看一些網路上各路大神的教學，可能看著看著就超出自己學的範圍了，假設有時間限制上，會直接拿來套用，還是會搞懂自己看不懂的地方後才套用在自己的專案，前者的想法我如果直接套用，我心裡會有一種這樣妥嗎，妥下去的作品，可以稱之為自己的作品嗎，後者的想法是我有時候真的理解不能，前面沒有宣告的東西，後面突然迸出一個詞來.eq(i)，看不懂為什麼這個要這樣做，又或是程式碼高手們寫一寫就會開始簡寫，讓整段程式碼變得乾淨整潔，這讓我更摸不著頭緒 >2.常常碰到這個東西我會，所以我就能看到文章說的函數跟參數這種中文名稱看得懂，但只要是自己沒接觸過的，連函數參數中文名稱都很陌生... >3.想知道一下到底怎麼改變學習的方式或心態及思維，之前有跟著站長的自學嬰兒教材學，好比遇到選擇器document.getElementById或是document.querySelector的對象，我知道我要選誰但我不知道要怎麼填寫甚至到寫完了我不知道要console.log哪一句還是哪一個詞，然後整個越來越挫敗，連嬰兒教材都看不懂，想說看前面已經寫完的學長姐作業，各式各樣程式碼，連解讀都有問題 >-----廢文----- >所以我就跑去站長推薦看得印度阿北的頻道(?!?) >https://www.youtube.com/@sadhgurutraditionalchinese >結論大概是 >想知道一下到底怎麼改變學習的方式或心態及思維 >雖然每次看到站長的文章有被激勵到，但就像自學教材的舉例，我看懂了，實作也懂了，要套用到這次作業>上，耶我又看不懂了 >大家又是怎麼維持學習的熱情 >到底什麼樣的狀態是真的有融會貫通，當前學會的技巧等等之類的

2個讚   9留言 307瀏覽

站長推一個新的教練服務：1對1聊聊看，學習上遇到什麼問題

老話一句，站長還是覺得花10幾萬去補習班，風險很高，因為有進度跟不上、老師課太多、過勞的問題 但是完全自學又有點沒方向，還是要有業界人士幫忙、能討論比較好 新的一年，站長決定推出一個新的教練服務 https://codelove.tw/coaching 大家參考看看

1個讚   3留言 310瀏覽

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

有了正確的函式庫，任何開發人員都可以在他們的應用程式中建立強大的人工智慧功能（如 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留言 177瀏覽

專屬雲端的程式語言

> 面向雲程式設計的宣言。 別誤會我的意思，我喜歡雲！它使我能夠建立令人驚嘆的東西，並徹底改變了我使用軟體創新和解決問題的方式。 它是「*新電腦*」、終極電腦、「*無電腦電腦*」。它可以彈性擴展，永遠在線，無處不在，可以做任何事情。這是無邊無際的。它肯定會留在這裡。 但天哪，這絕對不是我們在未來十年內建立雲端應用程式的方式。隨著雲端從“我不想讓伺服器放在我的辦公桌下”發展到“我的應用程式需要30 個不同的託管服務來執行其任務”，我們有點忘記了優秀的開發人員體驗是什麼樣子的。 為雲端建立應用程式有時感覺就像把我孩子的袋子裡未使用的樂高積木灑滿了客廳地板並試圖建造一座城堡。在經歷了撕碎的撲克牌、可怕的芭比娃娃頭和漏電的電池之後，你讀了第一百萬次說明書，卻發現你最終建造的東西與上次建造的東西基本上相同。 分類樂高積木很有趣！和孩子們一起打發時間。它甚至滿足了我的強迫症……但見鬼，這不是我想要建立專業軟體的方式！ *讓我試著描述一下我和我的開發人員朋友正在努力解決的問題。* ### 我想專注於為我的用戶創造價值 當我建立專業軟體時，我希望將大部分時間花在應用程式的*功能*領域，而不是我使用的平台的*非功能*機制。 每次我想要在 AWS Lambda 函數內執行程式碼時，我都必須了解它需要與 tree-shaken 依賴項捆綁在一起，作為 zip 檔案上傳到 S3 並透過 Terraform 部署，這是沒有意義的。或者，為了能夠向 SNS 發布訊息，我的 IAM 策略必須有一個允許對主題的 ARN 執行`sns:Publish`操作的語句。*每個開發人員都需要了解 ARN 是什麼嗎？* 所有這些東西與我試圖為用戶創造的價值沒有任何關係。這是純粹的力學。**我們能擺脫它嗎？** ### 我想獨立 作為一名開發人員，最令人沮喪和最扼殺流程的情況之一是我必須停下來等待某人或某事才能繼續前進。 就像快樂地在空中滑翔，欣賞風景，欣賞優美的背景音樂，突然，*砰！*混凝土牆。 當您為雲端建立應用程式時，這堵混凝土牆有多種形狀和尺寸。是 DevOps 人員排隊；需要更新的是 IAM 策略；是只有外部兼職顧問才知道如何除錯的部署失敗；我們希望內部平台中不斷積壓的缺失旋鈕和 API 能夠改變一切。 這些障礙令人沮喪，因為它們迫使我切換環境，應用「臨時」安全策略，並發明我不想談論的醜陋駭客。這是一個破碎的世界。 我想獨立。我希望能夠把事情做好，保持順其自然。我想一次一點地改善世界，並在完成*後*繼續下一件事。我想要完成任務時的多巴胺激增，而不是另一個未完成的線程的羞恥感。 ### 我想要即時回饋 我說過我想要獨立，但不要誤以為我會寫完美的程式碼。這就是為什麼我想用鉛筆而不是鋼筆寫程式碼。 有些開發人員可以花一整天的時間進行編碼，甚至無需呼叫編譯器，最終，他們進行編譯和部署，然後就可以正常工作了。 我很欽佩他們，但我不是那種類型的開發人員。不，先生。對我來說，這就是迭代、迭代、迭代。我從小處開始，用輕鉛筆畫草圖，看一看，擦掉一堆東西，畫一條更粗的線，後退一步，瞇著眼睛，畫更多，擦掉更多，再看一眼，*沖洗並重複*。 這就是為什麼對我來說，最重要的是迭代速度。我越早執行並測試我的應用程式，我就能越快地返回並迭代。這就是我的流量所在。 當我開始程式設計時，我使用 Borland C++。過去，在 IBM PC AT 機器（TURBO ON）上編譯和執行一個程式大約需要 100ms。**雲端中的平均迭代周期需要幾分鐘。分鐘！有時要幾十分鐘！** 這是當今雲端中迭代的樣子：我對程式碼進行了更改；然後我需要編譯它；將其部署到我的測試帳戶；找到管理控制台的方式來實際觸發它；等待它執行並去搜尋 登入另一個服務。然後我意識到有一個錯誤回應告訴我我很愚蠢，因為我怎麼不知道我必須傳入 Accept-Content: application/json，否則我會得到一些名為「XML」的奇怪結果我不知道該怎麼辦（開個玩笑，XML 很棒，不是真的）。現在一切又重新來過… 因此，您說“編寫單元測試”，以居高臨下的方式試圖證明當前的現實是合理的。 「偉大的開發人員編寫單元測試」。好的！因此，現在我需要獲取我的程式碼，該程式碼進行了大約20 個外部API 呼叫，並透過從過時的文件中複製並貼上它們來以某種方式模擬API 回應，結果卻發現我的請求被拒絕了，因為我缺少了一些隱式操作我的 IAM 安全聲明。我們都去過那裡。 **說實話，給我90年代的開發者經驗**。我想要進行更改，並且希望能夠以互動方式或透過在幾毫秒內的單元測試來測試此更改，並且我想坐在沒有 WiFi 的飛機上執行此操作，好嗎？ （我們在 90 年代沒有 WiFi）。 ### 所以這只是一句吐槽？ 一定不行！我是電腦程式編制員。有時我覺得我從出生起就一直在寫軟體。我一直在社會危險的時期這樣做，當時成為電腦極客並不酷。 我一直喜歡成為開發人員，因為如果我對自己的工具不滿意，我可以製作自己的工具。畢竟，製造工具已經融入了我們的 DNA——人類製造工具的歷史已經超過一百萬年。 我對我的工具不滿意。 2022 年 4 月，我與好朋友、前微軟同事 \[Shai Ber\] 聯手，創立了 \[Wing\]，其使命是***為開發者解鎖雲端***。我們聚集了一群令人難以置信的美麗極客，他們與我們一樣對開發人員體驗和開源充滿熱情，並開始了我們的旅程，使開發人員（即我們自己）能夠解決這些基本問題。 ### 編譯器來救援 那麼我們該如何一次解決所有這些問題呢？ **我們正在為雲端建立一種程式語言。** 「*一種程式語言！？* 」你問。 “*世界上沒有足夠的程式語言嗎？* ”，“*編寫一個編譯器真的很難嗎？* ”， *“開發人員想要學習一門全新語言的機會有多大？* ”，“*為什麼不能你侵入了現有的語言工具鏈，瞇起眼睛，然後就到此為止了嗎？* ” 我不是一個心血來潮就建立程式語言的人。事實上，我花了過去五年的時間建立 \[AWS CDK\]，這是一個*多語言庫*，它允許開發人員使用他們最喜歡的程式語言定義雲端基礎設施，從而解決了我正在談論的一些挑戰。 「滿足開發人員所在的位置」是 AWS 和 CDK 的美好宗旨，它激勵我們建立 \[JSII\] 和 \[constructs\] 等出色的技術。 ***但有時，「他們在哪裡」並不是一個足夠好的模型來創造所需的體驗。*** 用程式碼定義基礎設施確實使我們能夠建立更高層級的抽象，但只要我的應用程式程式碼需要與此基礎設施交互，抽象就變得太\[洩漏\]。我被迫要了解比我需要的更多的知識，而且我必須成為 IAM、VPC、ALB、EBS 等領域的專家，基本上還有比我想記住的更多的 TLA。 我們今天使用的語言都是圍繞著*電腦是一台機器*的想法而設計的。他們已經達到了能夠為我們提供對這些機器的可靠抽象的程度。它們抽象化了 CPU、記憶體、檔案系統、行程管理和網路。作為開發人員，我不必關心文件在磁碟上的佈局方式，甚至不必關心哈希映射需要多少記憶體。我只需寫`readFile()`或`new Dictionary()`即可開始我的一天。是的，對我來說，了解幕後發生的事情並不是一個壞主意，但我並不是被迫這樣做。 大多數這些語言還為我提供類型安全。當我使用錯誤數量的參數呼叫函數時，我的編譯器會對我大喊大叫。我不必等到我的應用程式執行時才意識到我忘記了參數，或者傳遞了錯誤的類型。 **在雲端，我獨自一人**。每當我的程式碼需要與雲端資源或服務互動時（隨著產業的發展，這種情況越來越多）我必須放棄程式語言的舒適性和安全性。我必須跳出機器的邊界，進入網路的狂野西部，而我的編譯器卻一無所知。 突然之間，所有痛苦的來源幾乎變得非常明顯。如今的雲端應用程式只是由互不相連的部分拼湊而成。我有一個用於我的基礎設施的編譯器，另一個用於我的函數，另一個用於我的容器，另一個用於我的 \[CI/CD 管道\]。每個機器都非常認真地對待自己的工作，並讓我在每台機器中保持安全和快樂，但我的應用程式不再在單台機器上執行，我的應用程式在雲端上執行。 ***雲就是計算機。*** ### Wing，一種面向雲端的程式語言 當新的程式設計範式出現時，語言需要時間來迎頭趕上。我曾經喜歡用 C 語言建立物件導向的程式碼，但它是一個有漏洞的抽象。我必須了解物件在記憶體中的佈局方式、\[V 表\] 的工作原理，並記住將物件作為每個函數的第一個參數傳遞。當程式語言開始像一等公民一樣支援物件導向的概念時，這種範式就民主化了，今天大多數開發人員甚至不知道 V 表是什麼，世界一直在旋轉。 **Wing** ，或者***winglang，***如果你想可愛一點的話，它擁有你所期望的現代、面向物件、強類型和通用語言的所有好東西，但它還包括一些額外的原語，旨在支持分佈式雲作為一等公民的基於服務的性質。 ### 一探究竟 我們在 Wing 上的工作已經快一年了，我很高興邀請您查看並告訴我您的想法。雖然仍處於 Alpha 階段，尚未準備好投入生產使用，但已經可以用它來建立一些[實際的應用程式](https://github.com/winglang/research/tree/main/dogfooding)。 https://github.com/winglang/wing --- 原文出處：https://dev.to/winglang/cloud-why-so-difficult-3j33

0個讚   0留言 137瀏覽

開源 SaaS：您無需為 SaaS 模板付費

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

0個讚   0留言 181瀏覽

資料庫 101：如何為 100 萬玩家的遊戲建立排行榜模型。

有沒有想過像**《英雄聯盟》** 、 **《要塞英雄**》甚至**《Rockband》**這樣的遊戲是如何建立排行榜模型的？在本文中，我們將了解如何正確建模模式以以極其高效的方式處理它們！ 如果您剛開始使用一般資料庫或資料庫，您可能需要閱讀我的第一篇文章[《資料庫 101：初學者的資料一致性](https://dev.to/danielhe4rt/database-101-why-so-interesting-1344)》。那篇文章記錄了我自己對有多少資料庫範例的探索，因為我的眼光遠遠超出了我以前僅使用 SQL 和 MySQL 的經驗。我正在**資料庫 101**系列中追蹤我的研究。 > 距離我發表本系列的第一篇文章已經快一年了！感謝您在我學習主題時與我在一起。您的評論和想法總是非常有幫助！ 1. 序言 ----- ![YARG 遊戲玩法截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvensca2v67ma66vssnh.png) 從我還是個孩子的時候起，就像大多數普通開發者一樣，我就對遊戲及其製作方式著迷。說到這裡，我要跟大家介紹一下我兒時最喜歡的遊戲：《吉他英雄3：搖滾傳奇》。 十多年後，我決定嘗試在開源環境中為一些遊戲做出貢獻，例如[rust-ro（Rust Ragnarok Emulator）](https://github.com/nmeylan/rust-ro)以及本文的主角： [YARG（Yet Another Rhythm Game）](https://github.com/YARC-Official/YARG) 。 YARG 實際上是另一個節奏遊戲，但這個專案的不同之處在於它是完全**開源的**，他們聯合了遊戲開發和設計方面的傳奇貢獻者來讓這個專案能夠運作。 突然之間，這款遊戲被 Twitch 上的 Guitar Hero/Rockband 主播們所採用並玩，我想：好吧，這是一個開源專案，所以也許我可以利用我的資料庫技能來建立一個**速度極快的排行榜**或儲存過去的比賽。 一開始只是在他們的 Discord 上進行了一次簡單的聊天，後來變成了關於如何讓這個專案更快發展的長時間討論。 然後我決定和我的老闆談談，問他我是否可以和 YARG 的人一起工作，條件是建立一些足夠酷的東西來實現[ScyllaDB（NoSQL 寬列資料庫）](https://scylladb.com/) ，因為我在那裡擔任開發倡導者。您不會相信ScyllaDB帶來的簡單性和可擴展性如何完美契合YARG.in的需求！ 無論如何，談話是廉價的。讓我向您展示一些程式碼和概念！ 2.QDD－查詢驅動的資料建模 --------------- ![NoSQL 與關係型資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivkj9j8ni2fakkctx53n.png) 當我們談論使用**NoSQL**進行開發時，大多數情況下我們應該理解，根據範例（文件、圖形、寬列等），您應該先了解**要執行哪個查詢**。 在 MySQL 中，主要目標是了解一致性，而在 Scylla 中，您應該專注於查詢並基於該查詢建立模式。 在這個專案中，我們將處理兩種類型的範例，它們是： - 核心價值 - 寬列（聚類） 現在讓我們來談談我們建模的查詢/功能。 ### 2.1 功能：儲存匹配 ![提交詳情 YARG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jaw4q7349upgrsa5p5g3.png) 每次完成 YARG 遊戲時，最有趣的事情就是提交您的分數以及許多其他遊戲內指標。 基本上它將是基於主索引的單一查詢，僅此而已。 ``` SELECT score, stars, missed_notes, instrument, ... FROM leaderboard.submisisons WHERE submission_id = 'some-uuid-here-omg' ``` ### 2.2 功能：排行榜 ![排行榜 Figma 文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69jp0vgxef71titt9ks0.png) 現在我們的主要目標是：一個超酷的**排行榜**，在良好的資料建模之後你不需要關心它。排行榜是按歌曲計算的，因此每次您播放特定歌曲時，您的最佳成績都會被保存並排名。 然而，這個介面有一個重要的點，那就是有過濾器來準確地知道要帶來「哪個」排行榜： - 歌曲 ID：必填 - 儀器：必填 - 修飾符：必需 - 難度：必填 - 玩家 ID：可選 - 分數：可選 想像一下我們的查詢如下所示，它會傳回按分數降序排列的結果： ``` SELECT player_id, score, ... FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'none'} AND track_id = 'dani-california' LIMIT 100; -- player_id | score ----------------+------- -- tzach | 12000 -- danielhe4rt | 10000 -- kadoodle | 9999 ----------------+------- ``` 現在我們知道了將在這裡使用的功能，但是您能想像最終的模式將如何嗎？ 不？好的，讓我來幫助你！ 3. 資料建模時間！ ---------- 是時候深入研究 ScyllaDB 的資料建模並更好地了解如何擴展它了。 ### 3.1 - 匹配建模 ![遊戲結束畫面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6kedk7iu67zg7myj9mp.png) 首先，讓我們先來了解遊戲本身： - 這是一個節奏遊戲； - 您一次播放一首特定的歌曲； - 您可以在遊戲前啟動“修改器”，讓您的生活變得更輕鬆或更困難； - 您必須選擇一種樂器（例如吉他、鼓、貝斯和麥克風）。 - 遊戲玩法的各個方面都會被跟踪，例如： - Score; - Missed notes; - Overdrive count; - Play speed (1.5x ~ 1.0x); - Date/time of gameplay; - And other cool stuff. 考慮到這一點，我們可以輕鬆地開始我們的資料建模，這將變成這樣： ``` CREATE TABLE IF NOT EXISTS leaderboard.submissions ( submission_id uuid, track_id text, player_id text, modifiers frozen<set<text>>, score int, difficulty text, instrument text, stars int, accuracy_percentage float, missed_count int, ghost_notes_count int, max_combo_count int, overdrive_count int, speed int, played_at timestamp, PRIMARY KEY (submission_id, played_at) ); ``` 讓我們跳過所有`int/text`值並跳到`set<text>` 。 **集合**類型可讓您儲存特定類型的專案清單。我決定使用這個清單來儲存修飾符，因為它非常適合。看看查詢是如何執行的： ``` INSERT INTO leaderboard.submissions ( submission_id, track_id, modifiers, played_at ) VALUES ( some-cool-uuid-here, 'starlight-muse' {'all-taps', 'hell-mode', 'no-hopos'}, '2024-01-01 00:00:00' ); ``` 使用這種類型，您可以輕鬆儲存專案清單以供以後檢索。 另一個很酷的資訊是這個查詢是一個鍵值對！這意味著什麼？ 由於您始終僅透過`submission_id`來查詢它，因此它可以歸類為鍵值。 ### 3.2 排行榜建模 ![排行榜濾鏡 Figma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpmzngra3jk5ipf3os3i.png) 在本文的這一部分中，您將學習一些很酷的寬列資料庫概念。 在我們的排行榜查詢中，如前所述，我們總是需要在 WHERE 子句中使用一些動態值，這意味著這些值將屬於**分區鍵**，而**聚類鍵**將具有可以是「可選」的值。 **分區鍵**是基於您新增的用於標識值**的欄位組合的**雜湊。你明白了嗎？不？好吧，我也花了一段時間才明白這一點，但讓我向你展示一些東西： 假設您玩了`Starlight - Muse` 100 次。如果您要查詢此訊息，將透過`score`或`player_id`等聚類鍵區分出100倍不同的結果。 ``` SELECT player_id, score --- FROM leaderboard.song_leaderboard WHERE track_id = 'starlight-muse' LIMIT 100; ``` 如果有 1.000.000 個玩家播放這首歌，你的查詢會變得很慢，並且將來會成為一個問題，因為你的分區鍵只包含一個字段，即`track_id` 。 但是，如果您向**Partition Key**加入更多字段，例如玩遊戲之前的強制性內容，也許我們可以縮小這些可能性以實現更快的查詢。現在你看到大局了嗎？加入諸如**“樂器”** 、 **“難度**”和**“修改器”等**欄位將為您提供一種均勻分割有關特定曲目的資訊的方法。 讓我們想像一些簡單的數字： ``` -- Query Partition ID: '1' SELECT player_id, score, ... FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'none'} AND -- Modifiers Changed track_id = 'starlight-muse' LIMIT 100; -- Query Partition ID: '2' SELECT player_id, score, ... FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'all-hopos'} AND -- Modifiers Changed track_id = 'starlight-muse' LIMIT 100; ``` 因此，如果您以特定形狀建立查詢，它將始終查找特定令牌並根據這些特定分區鍵檢索資料。 我們來看看最終的建模，談談聚類鍵和應用層： ``` CREATE TABLE IF NOT EXISTS leaderboard.song_leaderboard ( submission_id uuid, track_id text, player_id text, modifiers frozen<set<text>>, score int, difficulty text, instrument text, stars int, accuracy_percentage float, missed_count int, ghost_notes_count int, max_combo_count int, overdrive_count int, speed int, played_at timestamp, PRIMARY KEY ((track_id, modifiers, difficulty, instrument), score, player_id) ) WITH CLUSTERING ORDER BY (score DESC, player_id ASC); ``` 分區鍵的定義如上所述，由我們**所需的參數**組成，例如：track\_id、修飾符、難度和樂器。在**聚類鍵**上，我們新增了**Score**和**player\_id** 。 > 請注意，預設情況下，聚類欄位按`score DESC`排序，以防萬一玩家得分相同，選擇獲勝者的標準將按`alphabetical` ¯\\\_(ツ)\_/¯。 首先很容易理解的是，我們**每個玩家只有一個分數**，但透過這種建模，如果玩家以不同的分數兩次經歷同一條賽道，它將產生兩個不同的條目。 ``` INSERT INTO leaderboard.song_leaderboard ( track_id, player_id, modifiers, score, difficulty, instrument, stars, played_at ) VALUES ( 'starlight-muse', 'daniel-reis', {'none'}, 133700, 'expert', 'guitar', '2023-11-23 00:00:00' ); INSERT INTO leaderboard.song_leaderboard ( track_id, player_id, modifiers, score, difficulty, instrument, stars, played_at ) VALUES ( 'starlight-muse', 'daniel-reis', {'none'}, 123700, 'expert', 'guitar', '2023-11-23 00:00:00' ); SELECT player_id, score FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'none'} AND track_id = 'starlight-muse' LIMIT 2; -- player_id | score ----------------+------- -- daniel-reis | 133700 -- daniel-reis | 123700 ----------------+------- ``` 那我們要如何解決這個問題呢？嗯，這本身不是問題。這是一個特點！哈哈 身為開發人員，您必須根據專案需求建立自己的業務規則，這也不例外。我這麼說是什麼意思？ 您可以在插入新條目之前執行簡單的**DELETE**查詢，並確保在該特定**分區鍵**組內， **player\_id**中的特定資料不會低於新**分數**。 ``` -- Before Insert the new Gampleplay DELETE FROM leaderboard.song_leaderboard WHERE instrument = 'guitar' AND difficulty = 'expert' AND modifiers = {'none'} AND track_id = 'starlight-muse' AND player_id = 'daniel-reis' AND score <= 'your-new-score-here'; -- Now you can insert the new payload... ``` 這樣我們就完成了簡單的排行榜系統，該系統與 YARG 中執行的系統相同，也可以在每秒數百萬個條目的遊戲中使用:D 4. 如何為 YARG 做出貢獻 ---------------- 這是我邀請您為這個精彩的開源專案做出貢獻的文字部分！ 今天，我們正在為所有玩家建立一個全新的平台，使用： - 遊戲：Unity3d [（儲存庫）](https://github.com/YARC-Official/YARG) - 前端：NextJS [（儲存庫）](https://github.com/YARC-Official/yarg.in) - 後端：Laravel 10.x [（儲存庫）](https://github.com/YARC-Official/yarg-api) 我們將需要盡可能多的開發人員和測試人員與主要貢獻者一起討論遊戲的未來實現！ ![YARG 不和諧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5b2pdxvrth2o6jfmada.png) 首先，請確保加入他們的[Discord 社群](https://discord.gg/sqpu4R552r)。在進入開發板之前，所有技術討論都會在社群後台進行。 此外，在 Discord 之外，YARG 社群主要關注[EliteAsian](https://twitter.com/EliteAsian123) （核心貢獻者和專案所有者）Twitter 帳戶的開發展示。一定要跟著他去那裡。 https://twitter.com/EliteAsian123/status/1736149319382671766 僅供參考，遊戲的**首席美術師**（又稱[Kadu）](https://twitter.com/kaduyarg)也是**Elgato**的**廣播專家**和**產品創新**開發人員，曾與以下串流媒體合作： - 忍者 - 納德肖特 - 石山64 - 以及傳奇 DJ Marshmello。 Kadu 也使用他的 Twitter 分享一些見解以及 YARG 新功能和實驗的早期預覽。所以，別忘了在 Twitter 上關注他！ https://twitter.com/kaduyarg/status/1689489132060397568 以下是一些有用的連結，可以幫助您了解有關該專案的更多訊息： - [官方網站](https://yarg.in/) - [Github 儲存庫](https://github.com/YARC-Official/YARG) - [任務板](https://yarg.youtrack.cloud/agiles/147-7/current) > 有趣的事實：YARG 受到了 Guitar Hero 專案負責人[Brian Bright](https://twitter.com/BrianBright/status/1744533504531317194)的關注，他喜歡該專案的開源特性。太棒了，對吧？ 5. 結論 ----- 資料建模有時具有挑戰性，這項研究花了 3 個月的時間研究了許多新的 ScyllaDB 概念，並與我在 Twitch 的社群一起進行了大量測試。 我還發布了[遊戲排行榜演示](https://github.com/scylladb/gaming-leaderboard-demo)，您可以在其中獲得有關如何使用**NextJS**和**ScyllaDB**實現同一專案的一些見解！ 另外，如果您喜歡 ScyllaDB 並想了解更多訊息，我強烈建議您觀看我們的免費[大師班課程](https://lp.scylladb.com/masterclass-ondemand-main?siteplacement=navigation)或存取[ScyllaDB 大學](https://university.scylladb.com/)！ 不要忘記喜歡這篇文章，在社交上關注我並填滿你的水瓶 xD 下一篇文章見！ [在推特上關注我](https://twitter.com/danielhe4rt) [在 Github 上關注我](https://twitter.com/danielhe4rt) [在 Github 上關注我](https://twitter.com/danielhe4rt) [關注並訂閱我的 Twitch 頻道](https://twitch.tv/danielhe4rt) --- 原文出處：https://dev.to/danielhe4rt/database-101-how-to-model-leaderboards-for-1m-players-game-2pfa

0個讚   0留言 167瀏覽

JWT 與會話身份驗證

### 身份驗證與授權 身分驗證到底是什麼？它與授權有何不同？身份驗證是驗證某人是誰的過程，而授權是驗證使用者有權存取哪些特定應用程式、檔案和資料的過程。您如何確保請求存取資源的人是他們聲稱的人？一旦他們的身份得到確認，您如何控制他們可以做什麼或可以看到什麼？ ### JWT 與會話身份驗證 - 基本差異 **JWT（JSON Web Token）**和**基於會話的身份驗證**之間的爭論是現代 Web 開發中的一個重要點。 - **JWT 身份驗證**：這裡，伺服器產生一個令牌，客戶端儲存該令牌並隨每個請求一起提供。這是一種無狀態方法，這意味著伺服器不需要保留令牌的記錄。 - **基於會話的身份驗證**：相反，它是有狀態的。伺服器為使用者建立會話，並將會話資料儲存在伺服器端。客戶端僅保存會話標識符，通常在 cookie 中。 ### 什麼是JWT？ **JSON Web Token (JWT)**是一種緊湊且獨立的機制，用於在各方之間以 JSON 物件的形式安全地傳輸資訊。 ![在此輸入影像描述](https://cdn.hashnode.com/res/hashnode/image/upload/v1706026766255/C2bNi385Y.png?auto=format) #### JWT結構： - **標頭：**指定令牌類型 (JWT) 和簽章演算法（例如 HMAC SHA256）。 - **有效負載：**包含聲明，它們是有關實體（使用者）和附加元資料的聲明。 - **簽名：**透過使用秘密對標頭和有效負載進行編碼來建立，確保令牌的完整性。 ![jwt_dia](https://cdn.hashnode.com/res/hashnode/image/upload/v1706077068927/nmPYmw2sI.jpg?auto=format) #### JWT 實務： - 用戶身份驗證後，伺服器產生 JWT。 - 該 JWT 會傳送回客戶端並存儲，通常儲存在本機儲存或純 HTTP cookie 中。 - 用戶端將此令牌包含在後續請求的 HTTP 授權標頭中。 - 伺服器驗證令牌並在有效時授予存取權限。 #### 優點： - **可擴展性：**由於其無狀態特性，JWT 非常適合分散式系統。 - **靈活性：**它們可以跨不同的領域和應用程式使用。 - **安全性：**如果實施得當，它們可以提供一種安全的方式來處理使用者身份驗證。 #### 安全問題： - **傳輸安全性：**透過 HTTPS 傳輸 JWT 至關重要。 - **儲存：**安全儲存 JWT 以防止 XSS 攻擊和其他漏洞。 #### 處理令牌過期： - 實施短期 JWT 並使用刷新令牌來更新存取權限，而無需重新驗證。 ### 了解基於會話的身份驗證 基於會話的身份驗證，通常稱為基於 cookie 的身份驗證，是一種伺服器在維護使用者身份驗證記錄方面發揮關鍵作用的方法。 #### 怎麼運作的： 1. **使用者身份驗證**：使用者提供憑證，伺服器驗證該憑證。 2. **會話建立**：成功驗證後，伺服器會建立一個會話記錄，其中包含唯一辨識碼、使用者辨識碼、會話開始時間、到期時間以及可能的其他上下文（例如 IP 位址和使用者代理）。將其儲存在資料庫中。 3. **Cookie 儲存**：此會話辨識碼被傳送回並作為 cookie 儲存在使用者的瀏覽器中。 4. **會話驗證**：來自使用者瀏覽器的每個請求都包含此 cookie，然後伺服器透過查詢資料庫來驗證會話。如果有效，則處理該請求。 #### 優點： - **簡單性和可靠性**：伺服器的會話記錄充當集中的事實來源，使管理使用者會話變得簡單。 - **撤銷效率**：透過刪除或使會話記錄失效，可以快速撤銷存取，確保最新的會話有效性。 #### 缺點： - **大規模效能問題**：每個會話驗證對資料庫互動的依賴可能會導致延遲，特別是對於高流量應用程式。 - **動態環境中的延遲**：在具有動態客戶端的應用程式中，這種延遲會影響使用者體驗，使得基於會話的身份驗證在這種情況下不太理想。 ![會話直徑](https://cdn.hashnode.com/res/hashnode/image/upload/v1706077117965/cMGhdE8W7.jpg?auto=format) ### 結論：做出正確的身份驗證選擇 在 JWT 和基於會話的身份驗證之間進行選擇取決於應用程式的特定需求。如果您優先考慮無狀態性和可擴展性，JWT 可能是您的首選。對於直接控制會話至關重要的傳統應用程式，基於會話的身份驗證佔上風。了解這些概念及其含義是開發安全且高效的 Web 應用程式的關鍵。 --- 原文出處：https://dev.to/codeparrot/jwt-vs-session-authentication-1mol

0個讚   0留言 155瀏覽

使用 Flexbox 實現極為簡單的行和列佈局

CSS 中的超簡單響應式行和列 ================== 網格佈局是 Web 開發設計的基礎，您很可能已經使用 Bootstrap 或 Foundation 等工具來使您的佈局成為現實。但是，像你們大多數人一樣，我不喜歡執行 Bootstrap 或 Foundation 所需的依賴項，也不喜歡頁面加載時間的叮噹聲。 事實上，當我將Bootstrap 用於我正在編寫的應用程式時，我幾乎只將它用於網格佈局，有時我會將它用於通知或基本的相當合理的CSS 預設值，但90% 的時間，我想要的都是是網格佈局。 我也不喜歡只有將列拆分為 12 列或更少的選項。感覺有時你必須做一些瘋狂的工作才能讓列成列，或類似奇怪的事情。 我們如何更快、更輕鬆地進行網格佈局？ Flexbox 就是您的答案。我認為 ### flexbox 此時，flexbox 幾乎無所不在。所有主要[瀏覽器](https://caniuse.com/#feat=flexbox)都支援它。它允許更簡單的佈局，並且受到 React-Native 的支持，這意味著當我為 React-Native 佈局頁面時，我首先會使用 Flexbox，但我發現自己在 Web 開發中也首先使用了 Flexbox。 事實上，我佈置的最後一個應用程式完全是使用 Flexbox 完成的。我發現它*很*容易使用。 如果您對 Flex Box 不太了解。我喜歡這個頁面，它很好地介紹了[Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ### layout 首先，我將整個頁麵包裹在一個 div 中。 ``` <div class='some-page-wrapper'> </div> ``` 然後我定義一個可以幫助佈局的`.row`和`.column`類別。 ``` .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; } ``` 現在，如果我們想要兩列佈局： ``` <div class='some-page-wrapper'> <div class='row'> <div class='column'> <div class='blue-column'> Some Text in Column One </div> </div> <div class='column'> <div class='green-column'> Some Text in Column Two </div> </div> </div> </div> ``` CSS 看起來像： ``` .some-page-wrapper { margin: 15px; background-color: red; } .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; } .blue-column { background-color: blue; height: 100px; } .green-column { background-color: green; height: 100px; } ``` https://codepen.io/drews256/pen/zLerNx 如果我們想新增第三列怎麼辦？ HTML 可以輕鬆更新為： ``` <div class='some-page-wrapper'> <div class='row'> <div class='column'> <div class='blue-column'> Some Text in Column One </div> </div> <div class='column'> <div class='green-column'> Some Text in Column Two </div> </div> <div class='column'> <div class='orange-column'> Some Text in Column Two </div> </div> </div> </div> ``` https://codepen.io/drews256/pen/djaYKo 我們新增了第三列。這無縫地融入了我們的行。 https://codepen.io/drews256/pen/djaYKo 現在如果我們想要更複雜的佈局呢？ 我們可以加入更多行，這非常簡單。 ``` <div class='some-page-wrapper'> <div class='row'> <div class='column'> <div class='orange-column'> Some Text in Column One </div> </div> <div class='column'> <div class='blue-column'> Some Text in Column Two </div> </div> <div class='column'> <div class='green-column'> Some Text in Column Three </div> </div> </div> <div class='row 2'> <div class='column'> <div class='green-column'> Some Text in Row 2, Column One </div> </div> <div class='column'> <div class='orange-column'> Some Text in Row 2, Column Two </div> </div> <div class='column'> <div class='blue-column'> Some Text in Row2, Column Three </div> </div> </div> </div> ``` https://codepen.io/drews256/pen/WKPwxN 或者我們可以調整列的大小。 要擁有雙列，我們可以新增一個`.double-column`類別。不過，這可以適用於任何尺寸的列，您可以做60/40，您可以做10/10/10/10/10/10/10/10/10/10，老實說，這裡任何組合都是可能的。您可以做 1 X 100。或 10 x 1，然後 20 x 3，然後 30 x 1。選項是無窮無盡的！ 在一種佈局上，我在“列”周圍加入了很大的邊距，並且由於行將向下滾動，因此我有一行包含所需數量的“列”。這些列是固定寬度的卡片，因此它們只是換行到下一行，而彈性盒巧妙地響應式地將卡片沿著螢幕包裹起來。 ``` .double-column { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; } ``` https://codepen.io/drews256/pen/djaMWj 但這不是很敏感嗎？我們可以使用媒體查詢來加入一些響應性。 只需將`flex: 1`和`flex: 2`移動到媒體查詢（大小取決於應用程式，我只是提供一個選項） ``` @media screen and (min-width: 800px) { .column { flex: 1 } .double-column { flex: 2 } } ``` `> 800` 像素時： ![反應速度大，大於 800](https://thepracticaldev.s3.amazonaws.com/i/vzblza9096iap76a55ju.png) `< 800` 像素時： ![低於800時有響應](https://thepracticaldev.s3.amazonaws.com/i/g4vz31amzqbpn5duuu5l.png) 最終的codepen，提示點擊右下角的1x或0.5x按鈕來查看「響應式」佈局的差異。 https://codepen.io/drews256/pen/bjzpvd 本質上，我們只是用 20 行 CSS 將 bootstrap 的行/列從水中炸出來。我們有一種快速建立行/列佈局的方法，而且由於我們使用 Flexbox，我們幾乎不必擔心佈局會破壞或出現任何問題。它可以輕鬆適應各種用途，並允許大量的可自訂性。您對彈性盒有何看法？你試過了嗎？ 另一個隱藏的好處是，如果我以這種方式佈局 React 元件，那麼很容易佈局 React-Native 元件，使其看起來相似。 我通常在我的專案中使用 SCSS，所以如果您發現一些不完美的 CSS，請告訴我！ --- 原文出處：https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01

1個讚   0留言 145瀏覽

解決 DEV 上的點擊誘餌：策略和技術方法

解決 DEV 上的點擊誘餌：我們的策略和行動 ====================== 最近，我們採取了措施來解決 DEV 上的點擊誘餌問題。這篇文章旨在解釋我們的方法及其背後的基本原理。 定義點擊誘餌 ------ 點擊誘餌通常是指標題中具有特定模式的內容，例如清單或聳人聽聞的標題。例如，雖然清單文章在推動 DEV 參與度方面獲得了關注，但它們有時會導致不平衡，正如 Chrome 插件等社群舉措所表明的那樣： {% 嵌入 https://dev.to/lnahrf/no-listicles-the-chrome-add-on-that-removes-list-type-articles-from-your-devto-feed-3i8 %} 我們的方法 ----- ### 強調緩解而非嚴格過濾 我們沒有實施嚴格的過濾，而是選擇了更細緻的方法。原因如下： - **內容平衡**：並非所有清單文章都是負面的；它們可以提供豐富的資訊。然而，由於我們基於參與的系統，他們常常獲得不成比例的獎勵。 - **點擊誘餌的多樣性**：點擊誘餌有多種形式，嚴格的過濾器可能無法有效地捕捉所有這些形式。 - **主觀性問題**：確定標題誘餌的主觀性使得嚴格過濾變得不切實際。 ### 評分中的人工智慧和人類判斷 我們在應用程式中引入了`clickbait_score`字段，範圍從`0.0`到`1.0` 。 {% 嵌入 https://github.com/forem/forem/pull/20493 %} 這個分數不只由演算法決定。我們利用人工智慧和人類判斷來為貼文分配分數，認識到任務的主觀性和細微差別。 ### 透過 A/B 測試實施 我們正在仔細整合點擊誘餌分數。作為我們正在進行的 A/B 測試的一部分，使用者可能會遇到不同程度的點擊誘餌緩解措施。這些資料將幫助我們在未來幾週內完善我們的方法。 ### 展望未來：可自訂的用戶設置 雖然我們正在研究管理點擊誘餌的預設設置，但我們認識到個性化的必要性。未來的更新可能包括用戶特定的設置，以根據標題誘餌分數自訂提要偏好。 *我們將在不久的將來分享更多關於我們正在採取的各種策略，以改善核心體驗並幫助**分離 DEV 上的訊號和雜訊***。 快樂編碼❤️ --- 原文出處：https://dev.to/devteam/tackling-clickbait-on-dev-strategy-and-technical-approach-3dh9

0個讚   0留言 63瀏覽

關於 Web Components 與 React 的比較，我的看法

您經常聽到工程師將 Web Components 與 React 進行比較。這是我的看法。 ### Web 元件是規格。你的網路框架不是。 事實上，我們不需要 JavaScript 框架來使用 Web 元件，這是一個巨大的差異。 Web 元件規格自訂元素 v1、範本、插槽和 ShadowDOM 的部分都可以在瀏覽器中運作。這意味著開始編寫 Web 元件時無需依賴關係！ ![](https://thepracticaldev.s3.amazonaws.com/i/cdmrq1jzjxci8ce1vpv7.png) 您不需要大量的 JavaScript 來渲染 UI。 Web 元件對於載入嚴重依賴項阻礙使用者互動的情況（例如行動裝置的情況）非常有用。但還不止於此。事實證明，[Web 元件的靜態網站產生需要最少的工具](https://github.com/readymade-ui/readymade/blob/master/build-gh-pages.js)。 HTML 模組將使處理模板部分的人體工學變得更好。今年，Chrome 團隊宣布 [HTML 模組規格](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/ewfRSdqcOd8/w_Fr6rJ3DQAJ) 即將推出！雖然您可能需要 JavaScript 框架來建立複雜的 Web 應用程式，但靜態網站最好僅使用規範來建置。考慮到網路中有多少內容是靜態內容，這是一個很大的問題。抱歉，React 和蓋茲比。 ### Web 元件是包容性的。 JavaScript 生態系統是如此分散。 Web 元件為每個人提供了使用同一種語言的機會。 React 的支持者很快指出“沒有單一的‘Web 元件社區’，但事實是社區是我們所有人。JavaScript 框架是排他性的。你必須成為俱樂部的一部分。自定義元素則不然。v1. 初學者可以開始編寫它們，而無需學習JavaScript 庫的艱苦戰鬥。 ### Web 元件解決了一個不同的問題。 React 解決了 UI 開發中狀態缺失的問題。自訂元素是無狀態的。您需要將狀態機引入自訂元素。 JavaScript 框架永遠都有空間。 Web 元件提供了一個機會來簡化過去幾年一直在這裡流行的元件範例，以便每個人都可以使用相同的 UI 元件。 Web 元件本質上是在擴展我們日常使用的基本元素時解決人體工學問題。 [甚至在 React 文件中也這麼說。](https://reactjs.org/docs/web-components.html)React 和 Web Components 解決了不同的問題。 ### Web 元件是可互通的。您的 Javascript 框架很可能不是。 在框架中使用自訂元素不僅是可能的，而且應該被視為進入 2020 年的最佳實踐。Javascript 框架應該能夠處理自訂元素，就像處理 DOM 一樣。讓 Web 元件與 JavaScript 框架配合使用有許多怪癖。 React 有一些問題，但 React 團隊表示[他們將考慮與規範緊密整合](https://dev.to/ben/why-the-react-community-is-missing-the-point-about-web-components-1ic3/)。 Angular 不支援自訂內建元素的部分規格。 Angular 提供了對自主自訂元素的支持，甚至可以使用 Angular Elements 編譯它們。 Vue 與自訂元素具有相當的互通性，但是如果您遇到問題，使用 Vue 編碼的人請在這裡留言。有一些解決方法可以解決整合 Web 元件所產生的問題，但 JavaScript 框架還需要做一些工作來確保完整的自訂元素 v1 規範正常運作。 ### Web 元件是 a11y。 客製化的內建元素可讓您擴展按鈕、輸入等原生元素，並選擇和實現您自己的功能。透過擴充具有可存取性特徵的元素，您可以免費獲得這些功能。通常，在使用 JavaScript 框架建立 UI 元件時，您必須複製輔助功能。 ### 教育和網路工程存在問題。 在過去十年流行的程式碼學院中，我們忘記了詳細說明規格並直接跳入 JavaScript 框架。即使是入門級課程也可以包括接觸 React。這對於只想讓我們「使用平台」的 JavaScript 框架來說是有利的，但它留下了一個空白，即初級工程師缺乏我們所使用的平台的知識：HTML、CSS 和 JavaScript。 Web Components 透過提供每個人都可以學習和使用的規範來解決這個問題。 ## 我們就不能好好相處嗎？ 即使對於初學者來說，學習 HTML 規範也很容易。讓每個瀏覽器和函式庫都同意並支援規範是很困難的。 HTML 是一個動態文件，並且隨著時間的推移而不斷變化。 [Apple 拒絕](https://github.com/w3c/webcomponents/issues/509#issuecomment-230700060) 在 Safari 中實作自訂的內建元素規格。自從 Microsoft 在 Edge 中遷移到 Chromium 以來，所有最受歡迎的常青瀏覽器都實作了自訂元素 v1。我們只需要更好地合作，Web 元件可以為 2020 年代實現 UI 元件提供可持續的範例。 ![](https://media.giphy.com/media/3o7qE1EaTWLQGDSabK/giphy.gif) 這並不意味著您現在無法開始使用 Web 元件。對於不支援此規格的瀏覽器，存在 [Polyfills](https://www.webcomponents.org/polyfills/)。 我們應該共同努力，確保 Web 元件進入開發工作流程。從前端 Web 開發教育的一開始到最複雜的 Web 應用程式 Web 元件都有可能簡化 UI 元件開發、提供開箱即用的輔助功能，甚至減少建立 UI 所需的程式碼量。是時候我們釋放這種潛力了，而不是爭論哪個 JS 框架更適合提供元件範例。 JavaScript 框架將繼續擅長其最擅長的領域：狀態管理、提供架構模式和方便的工具。 Web 元件將繼續存在。我們可以共同努力，讓網路變得更美好。 --- 原文出處：https://dev.to/steveblue/it-s-not-about-web-components-vs-react-5137

0個讚   0留言 183瀏覽

🪄與您的簡歷製作者聊天 - 使用 Next.js、OpenAI 和 CopilotKit 📑✨

#TL;博士 在本文中，您將了解如何使用 Nextjs、CopilotKit 和 OpenAI 建立人工智慧驅動的簡歷產生器應用程式。 我們將涵蓋： - 利用 ChatGPT 撰寫履歷和求職信 📑 - 透過與履歷聊天逐漸完善你的履歷💬 - 將您的履歷和求職信匯出為 PDF 🖨️ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxzcx6jqet2anmr2pu6c.gif) --- ## CopilotKit：建構深度整合的應用內人工智慧聊天機器人 💬 只是簡單介紹一下我們的背景。 CopilotKit 是[開源 AI 副駕駛平台。](https://github.com/CopilotKit/CopilotKit) 我們可以輕鬆地將強大的 AI 聊天機器人整合到您的 React 應用程式中。完全可定制和深度集成。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wf9zcyvtu9q293uej2n.gif) {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} 現在回到文章。 --- ## **先決條件** 要開始學習本教程，您需要在電腦上安裝以下軟體： - 文字編輯器（例如 Visual Studio Code） - 節點.js - 套件管理器 ## **使用 NextJS 建立簡歷應用程式前端** **步驟 1：** 開啟命令提示字元並執行下列命令。 ``` npx create-next-app@latest ``` --- **第 2 步：** 系統將提示您選擇一些選項，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvk0mgct4ypra7ao9u18.png) **步驟 3：** 使用您選擇的文字編輯器開啟新建立的 Nextjs 專案。然後，在命令列上執行以下命令，以使用 Tailwind CSS 安裝帶有 NextJS 的 Preline UI。依照[本指南](https://preline.co/docs/frameworks-nextjs.html)完成 Preline 設定。 ``` npm install preline ``` --- **步驟4：** 在resume/app/page.tsx檔案中，新增以下程式碼內容。 ``` export default function Home() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-slate-900 bg-gradient-to-b from-violet-600/[.15] via-transparent text-sm py-3 sm:py-0 dark:bg-gray-800 dark:border-gray-700"> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 " aria-label="Global"> <div className="flex items-center justify-between"> <a className="flex-none text-xl text-gray-200 font-semibold dark:text-white py-8" href="#" aria-label="Brand"> ResumeBuilder </a> </div> </nav> </header> {/* <!-- Hero --> */} <div className="bg-slate-900 h-screen"> <div className="bg-gradient-to-b from-violet-600/[.15] via-transparent"> <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8"> {/* <!-- Title --> */} <div className="max-w-3xl text-center mx-auto pt-10"> <h1 className="block font-medium text-gray-200 text-4xl sm:text-5xl md:text-6xl lg:text-7xl"> Craft A Compelling Resume With AI Resume Builder </h1> </div> {/* <!-- End Title --> */} <div className="max-w-3xl text-center mx-auto"> <p className="text-lg text-gray-400"> ResumeBuilder helps you create a resume that effectively highlights your skills and experience. </p> </div> {/* <!-- Buttons --> */} <div className="text-center"> <a className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="#"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </a> </div> {/* <!-- End Buttons --> */} </div> </div> </div> {/* <!-- End Hero --> */} </> ); } ``` **步驟 5：** 在命令列上執行命令 *npm run dev*。導航至 http://localhost:3000/，您應該會看到新建立的 NextJS 專案。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56ymnb9iir7z14bx4ofm.png) --- ## 使用 GitHub GraphQL 從 GitHub 取得履歷資料 **步驟 1：** 使用下列命令安裝 Axios HTTP 用戶端。 ``` npm i axios ``` **步驟 2：** 在應用程式資料夾中，建立一個名為 API 的資料夾。然後，在 API 資料夾中建立一個名為 GitHub 的資料夾。在GitHub資料夾中建立一個名為route.ts的檔案並加入以下程式碼。 ``` import { NextResponse } from "next/server"; import axios from "axios"; // Environment variables for GitHub API token and user details const GITHUB_TOKEN = "Your GitHub personal access token"; const GITHUB_USERNAME = "Your GitHub account username"; // Axios instance for GitHub GraphQL API const githubApi = axios.create({ baseURL: "https://api.github.com/graphql", headers: { Authorization: `bearer ${GITHUB_TOKEN}`, "Content-Type": "application/json", }, }); // GraphQL query to fetch user and repository data const getUserAndReposQuery = ` query { user(login: "${GITHUB_USERNAME}") { name email company bio repositories(first: 3, orderBy: {field: CREATED_AT, direction: DESC}) { edges { node { name url description createdAt ... on Repository { primaryLanguage{ name } stargazers { totalCount } } } } } } } `; // API route to handle resume data fetching export async function GET(request: any) { try { // Fetch data from GitHub const response = await githubApi.post("", { query: getUserAndReposQuery }); const userData = response.data.data.user; // Format resume data const resumeData = { name: userData.name, email: userData.email, company: userData.company, bio: userData.bio, repositories: userData.repositories.edges.map((repo: any) => ({ name: repo.node.name, url: repo.node.url, created: repo.node.createdAt, description: repo.node.description, language: repo.node.primaryLanguage.name, stars: repo.node.stargazers.totalCount, })), }; // Return formatted resume data return NextResponse.json(resumeData); } catch (error) { console.error("Error fetching data from GitHub:", error); return NextResponse.json({ message: "Internal Server Error" }); } } ``` **步驟 3：** 在應用程式資料夾中，建立一個名為 Components 的資料夾。然後，在元件資料夾中建立一個名為 githubdata.tsx 的檔案並新增以下程式碼。 ``` "use client"; import React, { useEffect, useState } from "react"; import axios from "axios"; // Resume data interface interface ResumeData { name: string; email: string; company: string; bio: string; repositories: { name: string; url: string; created: string; description: string; language: string; stars: number; }[]; } export const useGithubData = () => { const [resumeData, setResumeData] = useState<ResumeData | null>(null); // Fetch resume data from API useEffect(() => { axios .get("/api/github") .then((response) => { setResumeData(response.data); }) }, []); return { resumeData, }; } ``` --- ## 建立求職信和履歷功能 **步驟 1：** 透過在命令列上執行以下命令來安裝 CopilotKit 前端軟體包。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` **步驟2：** 在元件資料夾中建立一個名為resume.tsx 的檔案。然後在檔案頂端匯入 useMakeCopilotReadable、useMakeCopilotActionable 和 useGithubData 自訂掛鉤，如下所示。 ``` import React, { useState } from "react"; import { useGithubData } from "./githubdata"; import { useMakeCopilotReadable, useMakeCopilotActionable, } from "@copilotkit/react-core"; ``` **第 3 步：** 建立一個名為 CoverLetterAndResume 的元件。在元件內部，使用 useGithubData 掛鉤檢索從 GitHub 取得的資料。然後，宣告一個名為 createCoverLetterAndResume 的狀態變數和一個用於更新它的名為 setCreateCoverLetterAndResume 的函數。使用包含 letter 和 resume 兩個屬性的物件初始化 useState，如下所示。 ``` export const CoverLetterAndResume = () => { const {resumeData } = useGithubData(); const [createCoverLetterAndResume, setCreateCoverLetterAndResume] = useState({ letter: "", resume: "" }); } ``` **步驟 4：** 使用 useMakeCopilotReadable 掛鉤將從 GitHub 取得的資料新增為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable(JSON.stringify(resumeData)); ``` **步驟 5：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 createCoverLetterAndResume 的操作，其中包含描述和實作函數，該函數使用提供的求職信和簡歷更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "createCoverLetterAndResume", description: "Create a cover letter and resume for a software developer job application.", argumentAnnotations: [ { name: "coverLetterMarkdown", type: "string", description: "Markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (coverLetterMarkdown, resumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: coverLetterMarkdown, resume: resumeMarkdown, })); }, }, [] ); ``` **步驟 6：** 在 CoverLetterAndResume 元件外部，建立一個名為 CoverLetterResume 的元件，用於在 Web 應用程式 UI 上顯示求職信和履歷。 ``` type CoverLetterResumeProps = { letter: string; resume: string; }; const CoverLetterResume = ({ letter, resume }: CoverLetterResumeProps) => { return ( <div className="px-4 sm:px-6 lg:px-8 bg-slate-50 py-4"> <div className="sm:flex sm:items-center"> <div className="sm:flex-auto"> <h1 className="text-3xl font-semibold leading-6 text-gray-900"> ResumeBuilder </h1> </div> </div> {/* Cover Letter Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter </h2> <div className="min-w-full divide-y divide-gray-300 p-2"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white p-2"> <ReactMarkdown>{letter}</ReactMarkdown> </div> </div> </div> </div> </div> </div> {/* Cover Letter End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <textarea className="p-2" id="coverLetter" value={letter} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} {/* Resume Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Resume </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <ReactMarkdown>{resume}</ReactMarkdown> </div> </div> </div> </div> </div> {/* Resume End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> {/* {letter} */} {/* <ReactMarkdown>{letter}</ReactMarkdown> */} <textarea className="p-2" id="resume" value={resume} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} </div> ); }; ``` **第7步：**然後返回CoverLetterAndResume元件內的CoverLetterResume元件，如下圖所示。 ``` return <CoverLetterResume {...createCoverLetterAndResume}/>; ``` **第8步：** 在應用程式資料夾中建立一個名為resumeandcoverletter的資料夾。然後，建立一個名為 page.tsx 的檔案並新增以下程式碼。 ``` "use client"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; import "@copilotkit/react-textarea/styles.css"; // also import this if you want to use the CopilotTextarea component import "@copilotkit/react-ui/styles.css"; // also import this if you want to use the chatbot component import React, { useEffect, useState } from "react"; import { CoverLetterAndResume } from "../components/resume"; function buildResume () { return ( <CopilotProvider chatApiEndpoint="./../api/copilotkit/chat"> <CopilotSidebarUIProvider> <CoverLetterAndResume /> </CopilotSidebarUIProvider> </CopilotProvider> ); } export default buildResume; ``` **步驟 9：** 使用下列指令安裝 openai 軟體套件。 ``` npm i openai ``` **步驟 10：** 在應用程式資料夾中，建立一個名為 API 的資料夾。然後，在 API 資料夾中建立一個名為 copilotkit 的資料夾。在 copilotkit 資料夾中，建立一個名為 chat 的資料夾。然後，在聊天資料夾中建立一個名為route.ts的檔案並新增以下程式碼。 ``` import OpenAI from "openai"; const openai = new OpenAI({ apiKey: "Your ChatGPT API key", }); export const runtime = "edge"; export async function POST(req: Request): Promise<Response> { try { const forwardedProps = await req.json(); const stream = openai.beta.chat.completions .stream({ model: "gpt-4-1106-preview", ...forwardedProps, stream: true, }) .toReadableStream(); return new Response(stream); } catch (error: any) { return new Response("", { status: 500, statusText: error.error.message }); } } ``` **步驟 11：** 在應用程式資料夾中的 page.tsx 檔案中，在「開始」按鈕中新增一個連結，用於導航到簡歷和求職信頁面，如下所示。 ``` <div className="text-center"> <Link className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="/resumeandcoverletter"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </Link> </div> ``` **第12步：**導航至http://localhost:3000/，點擊「開始」按鈕，您將被重新導向到與聊天機器人整合的履歷和求職信頁面，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqfjykc75pherkjxut4p.png) **第 13 步：** 向右側的聊天機器人發出諸如“建立求職信和簡歷”之類的提示。聊天機器人將開始產生回應，完成後，它將在頁面左側顯示產生的求職信和履歷，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7muhhi4a85ol0ddyi1l.png) --- ## 建立更新求職信功能 **第 1 步：** 宣告一個名為 updateLetter 的變數，用於保存先前產生的求職信。 ``` const updateLetter = createCoverLetterAndResume.letter; ``` **步驟 2：** 使用 useMakeCopilotReadable 掛鉤新增 updateLetter 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Cover Letter:" + JSON.stringify(updateLetter)); ``` **步驟 3：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateCoverLetter 的操作，其中包含描述和實作函數，該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "updateCoverLetter", description: "Update cover letter for a software developer job application.", argumentAnnotations: [ { name: "updateCoverLetterMarkdown", type: "string", description: "Update markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedCoverLetterMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: updatedCoverLetterMarkdown, })); }, }, [] ); ``` ** 步驟 4：** 給聊天機器人一個提示，例如“更新求職信並加入我正在申請 CopilotKit 的技術寫作職位。”如下圖所示，您可以看到求職信已更新。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dkm8zacgbmn19j9qtw6.png) --- ## 建立更新復原功能 **第 1 步：** 宣告一個名為 updateResume 的變數，用於保存先前產生的求職信。 ``` const updateResume = createCoverLetterAndResume.resume; ``` **步驟 2：** 使用 useMakeCopilotReadable 掛鉤新增 updateResume 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Resume:" + JSON.stringify(updateResume)); ``` **步驟 3：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateResume 的操作，其中包含描述和實作函數，該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "updateResume", description: "Update resume for a software developer job application.", argumentAnnotations: [ { name: "updateResumeMarkdown", type: "string", description: "Update markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedResumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, resume: updatedResumeMarkdown, })); }, }, [] ); ``` **第 4 步：** 向聊天機器人發出提示，例如「更新履歷並將我的姓名加入為 John Doe，將我的電子郵件加入為 [email protected]」。如下圖所示，可以看到履歷已更新。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d9y6pmfynxwzff8be86.png) --- ## 建立下載求職信和履歷表 Pdfs 功能 **第 1 步：** 安裝 jsPDF，一個用 JavaScript 產生 PDF 的函式庫。 ``` npm i jspdf ``` **步驟 2：** 在 CoverLetterAndResume 元件內，使用 useMakeCopilotActionable 掛鉤設定一個名為“downloadPdfs”的操作，其中包含描述和實現函數，該函數使用 jsPDF 庫為求職信和簡歷建立 PDF，然後保存它們， 如下所示。 ``` function addTextToPDF(doc: any, text: any, x: any, y: any, maxWidth: any) { // Split the text into lines const lines = doc.splitTextToSize(text, maxWidth); // Add lines to the document doc.text(lines, x, y); } useMakeCopilotActionable( { name: "downloadPdfs", description: "Download pdfs of the cover letter and resume.", argumentAnnotations: [ { name: "coverLetterPdfA4", type: "string", description: "A Pdf that contains the cover letter converted from markdown text and fits A4 paper.", required: true, }, { name: "resumePdfA4Paper", type: "string", description: "A Pdf that contains the resume converted from markdown text and fits A4 paper.", required: true, }, ], implementation: async () => { const marginLeft = 10; const marginTop = 10; const maxWidth = 180; const coverLetterDoc = new jsPDF(); addTextToPDF( coverLetterDoc, createCoverLetterAndResume.letter, marginLeft, marginTop, maxWidth ); coverLetterDoc.save("coverLetter.pdf"); const resumeDoc = new jsPDF(); addTextToPDF( resumeDoc, createCoverLetterAndResume.resume, marginLeft, marginTop, maxWidth ); resumeDoc.save("resume.pdf"); }, }, [createCoverLetterAndResume] ); ``` **第 3 步：** 返回網頁應用程式中的聊天機器人，並提示「下載求職信和簡歷的 pdf 檔案」。 PDF 將開始下載，如果您開啟 coverLetter.pdf，您應該會看到產生的求職信，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p853urbqn43jh6454at.png) --- ## 結論 總而言之，您可以使用 CopilotKit 建立應用內 AI 聊天機器人，該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 對於完整的源程式碼： https://github.com/TheGreatBonnie/AIPoweredResumeBuilder --- 原文出處：https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb

0個讚   0留言 81瀏覽

伺服器端渲染的優缺點。何時使用它以及何時選擇其他東西

--- 標題：伺服器端渲染的優點和缺點。何時使用它以及何時選擇其他東西 發表：真實 描述：伺服器端渲染的優缺點。何時使用它以及何時選擇其他東西 標籤：[react、javascript、webdev、ssr] 封面圖：https://thepracticaldev.s3.amazonaws.com/i/pr5kh72wjga9rplx6c2z.jpg --- > 攝影：Daniel H. Tong 在 Unsplash 上 ## 什麼是 SSR？為什麼要關心？ SSR 代表伺服器端渲染。我將主要討論 React，但我想這對其他框架也有意義。 如果您關心以下內容，則需要 SSR： - **第一次有意義的繪畫**。僅 SSR 並不能保證良好的結果。您還需要關鍵的 CSS 和接近客戶等。 - **SEO** 並支援其他機器人，如 Twitter 和 Facebook - **優雅降級**。對於這一點，您需要確保您的服務無需 JS 即可使用 ## 這有什麼難的？ SSR 就像一個新的維度。無論您使用什麼，都需要為 SSR 重新配置它。 - 您是否使用「componentDidMount」來取得資料？您需要使用“getInitialProps”（來自 next.js 或 after.js）或 Redux 等狀態管理庫來使其在伺服器上執行 - 你使用路由器嗎？需要在伺服器上進行配置 - 你使用 i18n 嗎？需要在伺服器上進行配置 - 你使用 HMR 嗎？您將需要重新載入瀏覽器和伺服器的程式碼 - 你使用反應頭盔嗎？需要在伺服器上進行配置 - 你使用react-loadable嗎？您需要配置伺服器以傳遞使用的模組，以便客戶端可以預先載入它們 - 你使用 Redux 嗎？您需要序列化儲存並將其傳遞給客戶端 - 你使用 CSS-in-JS 嗎？您需要將其配置為在伺服器上產生關鍵 CSS 並將其內聯到 HTML 回應中 別誤會我的意思，這都是可以解決的。 Next.js 和 Razzle 解決了大部分問題。我想向您展示的是 SSR 如何將所有內容加倍（另一個維度），並且大多數時候都需要樣板。 好的。現在讓我們超越利益。 ## 第一個有意義的油漆 如果你正在做 SSR，這並不意味著你會得到開箱即用的第一個有意義的油漆。 - 您的設定是否有良好的第一個位元組時間？如果您的伺服器速度緩慢或過載 - 您將會遇到問題。確保使用最新的節點，縮小伺服器程式碼，[使用串流渲染](https://zeit.co/blog/streaming-server-rendering-at-spectrum)，最佳化子查詢（資料庫或網路）（如果有） 。 - 你們有提供關鍵的 CSS 嗎？否則，瀏覽器無法開始渲染頁面。 - 你使用網頁字體嗎？如果是，你會[優化](https://www.zachleat.com/web/compressive-webfonts/)嗎？ - 你的伺服器靠近客戶端嗎？ **如果您的伺服器在歐洲，但客戶端在日本，SSR 將無法幫助您**。從 CDN 提供「shell」可能會比 SSR 更快（從印象的角度來看）。如果因為法律限制您無法將伺服器移至離客戶端更近的地方怎麼辦？ - 您是否確保沒有不必要的重定向？否則，在慢速 3G 上重定向將毀掉你好不容易獲得的毫秒數。 SSR 並不是首次有意義的繪製的靈丹妙藥。如果您的後端很慢或距離很遠，您需要檢查「shell」和 CDN 是否可以更好地工作。您可以使用 [react-snap](https://github.com/stereobooster/react-snap) 之類的東西來預渲染靜態頁面並為其他頁面產生「shell」。 如果您的網站往往更靜態，您可以使用預渲染而不是 SSR。查看[react-static](https://react-static.js.org/) 或[gatsby](https://www.gatsbyjs.org/) 或[react-snap](https://github.com /react-snap)。com/stereobooster/react-snap)。 ## 這 這裡有3個選項： - 固態繼電器 - 預先渲染，如react-snap、react-static、gatsby等。 - 按需預渲染，如 rendertron、puppetron、pupperender 等。 如果可以的話，選擇預渲染。如果您唯一關心的是 SEO，則可以隨時輕鬆加入按需預渲染。 ## 優雅降級 這一點很棘手。這實際上取決於您想要實現多少降級？ - 你想支持連結嗎？這應該可以工作 - 你想像 https://www.seek.com.au/ 那樣支援下拉式選單嗎？你需要使用 CSS 和複選框的一些技巧 - 您需要支援表格嗎？除了現有的 JSON API 之外，您還需要端點來處理這些表單 有些功能沒有 JS 是相當困難的，例如組合框或地圖 ## 結論 SSR不錯，可以試試看。另外，請確保您的用戶真正從中受益。 如果您無法使用 SSR，請嘗試預渲染器，有時這是最簡單的選擇。 在 [twitter](https://twitter.com/stereobooster) 和 [github](https://github.com/stereobooster) 上關注我。 --- 原文出處：https://dev.to/stereobooster/server-side-rendering-or-ssr-what-is-it-for-and-when-to-use-it-2cpg

0個讚   0留言 81瀏覽

讓我們加密：使用 Certbot 的通配符憑證

--- 標題：讓我們加密：使用 Certbot 的通配符憑證 發表：真實 說明：Let's Encrypt 使用 DNS-01 質詢透過 ACMEv2 支援通配符憑證，該質詢於 2018 年 3 月 13 日開始。其用戶端 Certbot 提供 --manual 選項來執行此操作。我寫瞭如何使用 Certbot 產生通配符憑證。 標籤： LetsEncrypt、 certbot、 憑證、 安全 封面圖片：https://thepracticaldev.s3.amazonaws.com/i/wxi7s3zr664nv3u5d2ig.jpg 系列：OpenBSD TLS 連接 --- *\* 封面圖片最初由 [OpenClipart-Vectors](https://pixabay.com/users/OpenClipart-Vectors-30363/) 製作並經過精心編輯。* --- ## 介紹 [Let's Encrypt](https://letsencrypt.org/) 透過 ACMEv2 支援[通配符憑證](https://letsencrypt.org/docs/faq/#does-let-s-encrypt-issue-wildcard-certificates) [ DNS-01 挑戰](https://letsencrypt.org/docs/challenge-types/#dns-01-challenge)，[於2018 年3 月13 日開始](https://letsencrypt.org/2017/ 07 /06/wildcard-certificates-coming-jan-2018.html）。 [Certbot](https://certbot.eff.org/)，其客戶端，提供「--manual」選項來[執行](https://certbot.eff.org/faq/#does-let- s -加密-頒發-通配符-憑證）。 我真誠地感謝他們。 我寫瞭如何使用 Certbot 產生通配符憑證。 這是一個非常簡單的任務:) 此外，所需要做的就是將 Certbot 指定的 TXT 記錄新增至 DNS 伺服器。 \* 注意：[有必要每 90 天更新一次 Let's Encrypt 的憑證](https://letsencrypt.org/docs/faq/#what-is-the-lifetime-for-let-s-encrypt-certificates- for -how-long-are-they-valid），[每次續約時都需要新的TXT 記錄](https://community.letsencrypt.org/t/how-to-renew-wildcard-cert-with- cert -機器人自動/60723）。 ## 身體 #### 環境 - [OpenBSD](https://www.openbsd.org/): [6.5](https://www.openbsd.org/65.html) - 憑證機器人：0.32.0 #### 教程 命令是這樣的： ``` # certbot certonly --manual --preferred-challenges dns --server https://acme-v02.api.letsencrypt.org/directory --manual-public-ip-logging-ok -d '*.<your.domain>' -d <your.domain> ``` 確保引用 `*.<your.domain>` 以避免錯誤「未找到符合專案：*.\<your.domain\>」。 *\* 注意：`-d *.<your.domain>` 和 `-d <your.domain>` 的順序似乎不重要。* 以下是「certonly」選項與單一憑證的比較： ``` - --webroot -w <dir-path> + --manual --preferred-challenges dns --server https://acme-v02.api.letsencrypt.org/directory --manual-public-ip-logging-ok ``` 此外，其命令列選項的詳細資訊請參閱[此處](https://certbot.eff.org/docs/using.html#certbot-command-line-options)。 然後，命令回覆： ``` Saving debug log to /var/log/letsencrypt/letsencrypt.log Plugins selected: Authenticator manual, Installer None Obtaining a new certificate Performing the following challenges: dns-01 challenge for <your.domain> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Please deploy a DNS TXT record under the name _acme-challenge.<your.domain> with the following value: <acme-challenge-value> Before continuing, verify the record is deployed. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Press Enter to Continue ``` 配置 DNS 伺服器以將記錄新增至您的網域。 記錄是這樣的： |哪裡 |什麼 | | -----| --- | |類型 |文字 | |名稱 | `_acme-挑戰` | |價值| \<acme-challenge-value\> 指令顯示如上 | *\* 注意：您可能會在這裡等待一段時間以進行 DNS 傳播。* 然後按 Enter 鍵。 ``` Waiting for verification... Cleaning up challenges IMPORTANT NOTES: - Congratulations! Your certificate and chain have been saved at: /etc/letsencrypt/live/<your.domain>/fullchain.pem Your key file has been saved at: /etc/letsencrypt/live/<your.domain>/privkey.pem Your cert will expire on 2019-08-01. To obtain a new or tweaked version of this certificate in the future, simply run certbot again. To non-interactively renew *all* of your certificates, run "certbot renew" - If you like Certbot, please consider supporting our work by: Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate Donating to EFF: https://eff.org/donate-le ``` 完畢 ： ） ## 結論 因此，我獲得了通配符憑證並應用於我的幾台伺服器。 今天它運作良好，我的工作量減少了，安全性幾乎相同。 如果您正在尋找如何將 Let's Encrypt 的憑證應用到 OpenBSD httpd 伺服器，我在這裡寫道： {% 連結 nabbisen/lets-encrypt-certbot-for-openbsds-httpd-3ofd %} 感謝您的閱讀。 快樂安全。 --- 原文出處：https://dev.to/nabbisen/let-s-encrypt-wildcard-certificate-with-certbot-plo

0個讚   0留言 69瀏覽

React 和 NextJS 2024 最佳免費開源 SaaS 初學者

## 長篇大論；博士 SaaS 樣板啟動器隨處可見，但它們非常昂貴（約 200-800 美元）。 我想為 React 和 NextJS 找到最好的免費開源 SaaS Starters，這些 Starters 將在 2024 年積極維護。 在下面的文章中，我將介紹每個初學者的功能及其優缺點，所以如果您有興趣，請繼續閱讀。但我還在下面整理了這個漂亮的圖表，可以一目了然地對它們進行比較（順便說一句，文章底部有同一圖表的文本版本，帶有可點擊的連結）。 享受！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr6z6jqmypnl5hzrgyr1.png) ## 介紹 軟體即服務 (SaaS) 應用程式是獨立駭客和個人企業家賺錢的最佳方式之一。這就是為什麼 SaaS 樣板啟動器正在崛起！但其中一些售價高達 2,000 美元以上，平均價格約為 200 美元。 這就是為什麼我開始尋找是否有免費的開源 SaaS 啟動器以及它們的表現如何。在找到了很多但注意到大多數不再積極維護後，我將範圍縮小到這四個免費的開源 SaaS Starter：BoxyHQ 的 SaaS Starter、Open SaaS、SaaS Starter Kit 和 Next SaaS Stripe Starter。 ## BOXYHQ SaaS 入門套件 “**您的終極企業級 Next.js 樣板”** ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51svaqq6lu6s3ldoy5i0.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd6cftpnl9robmmtw36b.png) - GitHub：https://github.com/boxyhq/saas-starter-kit - 影片演練：[https://www.youtube.com/watch?v=oF8QIwQIhyo](https://www.youtube.com/watch?v=oF8QIwQIhyo) BoxyHQ 是一家專注於安全的公司，專注於單一登入 (SSO) 和企業安全解決方案。因此，這個 SaaS 入門套件雖然免費且開源，但更專注於企業需求也就不足為奇了。 因此，如果您正在尋找一個外觀簡潔、具有安全 SAML SSO、使用者帳戶建立、團隊建立和管理以及 Webhooks 和事件整合功能的樣板，那麼這就是您的範本。 優點： - SAML 單一登入 - 全面的角色和權限 - 專注於企業SaaS應用程式開發 缺點： - 更適合企業級應用程式，這對於較小的專案來說可能有點過分 - 一些即將推出的功能（例如計費和訂閱）尚未實現 ## 開放 SaaS 「***免費*具有超能力的 SaaS 範本」** ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awz3renuql3k5awlvkms.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ptji6f1viufkonb3bzw.png) - 網站與示範：https://OpenSaaS.sh - Github：https://github.com/wasp-lang/open-saas Open SaaS 專注於建立一個功能齊全的開源 SaaS 樣板，它擁有您期望從付費模板中獲得的一切，包括整合的人工智慧。範例、為您的網站流量和收入統計配置的分析儀表板以及完整的文件和支援。 它由 Wasp 團隊為您帶來，這是一個全端 React / NodeJS / Prisma 框架，可透過設定檔為您管理功能。例如，這意味著您只需幾行程式碼即可“推出您自己的身份驗證”，因為 Wasp 會為您管理樣板檔案。 優點： - 利用Wasp進行全端開發，減少開發時間 - 擁有完整的文件和多元化且支持性的社區 - 與 OpenAI API 集成，並包含人工智慧驅動的應用程式範例 - 開箱即用的端到端類型安全 缺點： - 可能缺少一些更廣泛的 SaaS 應用程式功能，例如測試 - 依賴 Wasp，一個鮮為人知但高效能的全端框架 ## SaaS 入門套件 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdy7kkxnwvddia1qcxii.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqikv8rshdqq0yj1sas6.png) - 網站與示範：[https://www.saasstarterkit.com/](https://www.saasstarterkit.com/) - GitHub：[https://github.com/Saas-Starter-Kit](https://github.com/Saas-Starter-Kit) SaaS 入門套件是一個現代 SaaS 樣板，旨在建立具有免費/開源和專業/付費選項的全面 SaaS 解決方案。 這是一個簡單、乾淨的 UI，包含許多漂亮的 UI 元件，包括 Shadcn UI 分析儀表板元件。但不幸的是，您必須將它們與您自己的資料來源集成，因為大多數樣板都沒有管道。 目前它缺少很多配置，但看起來它在未來可能是一個有前途的模板 優點： - 提供免費版和專業版，使其能夠滿足多種需求 - 精心設計的 UI 元件，專門用於管理儀表板 缺點： - 具有增強功能的專業版不是免費的，這可能會讓一些用戶望而卻步 - 主要是內建Auth的UI元件集合，所以開發者還需要做很多工作 ## 下一個 SaaS Stripe 入門者 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui7rg0yqafp9mf5nki0d.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd9uqi903h358oqu37w9.png) - 網站與示範：[https://next-saas-stripe-starter.vercel.app/](https://next-saas-stripe-starter.vercel.app/) - GitHub：https://github.com/mickasmt/next-saas-stripe-starter Next SaaS Stripe Starter 是一個簡單、乾淨的 SaaS 樣板，可利用現代、流行的工具。儘管它不像其他一些軟體那麼功能齊全，但由於使用了 Shadcn UI 和 Contentlayer，它看起來很漂亮，並且有一個時尚的部落格。一般來說，它處於良好的狀態，可以用作 SaaS 的基礎。 如果您正在尋找一個最小的 NextJS 模板並且可以進行大量自訂和功能開發，那麼這就是適合您的模板。 優點： - 看起來不錯並且利用了各種流行的工具。 - 它包括未來的更新，涵蓋成功訂閱和切換訂閱計劃的重新發送功能。 缺點： - 很少甚至沒有文件 - 不像其他模板那樣功能豐富。 ##六。結論與建議 雖然所有 SaaS Starter 都為您的專案提供了良好的基礎，但如果您正在開發企業級應用程式，請考慮 BOXYHQ。如果您正在尋找可立即投入生產的模板並希望快速交付，那麼 Open SaaS 將是理想的整體模板，而如果您正在建置簡單/微型 SaaS 並且想要現代設計美感，則 Next SaaS Stripe Starter 則適合您。 | | [BoxyHQ SaaS 入門套件](https://github.com/boxyhq/saas-starter-kit) | [開放SaaS](https://opensaas.sh) | [SaaS 入門套件](https://www.saasstarterkit.com/) | [下一個 SaaS Stripe 入門](https://next-saas-stripe-starter.vercel.app/) | | --- | --- | --- | --- | --- | | **適合** | 🏢 📈<br/>企業。對於需要 Teams 功能的應用程式 | 🧑‍💻🤖 <br/>獨立駭客和新創公司快速建立現代 (AI) 應用程式 | 🧑‍💻🔧 <br/>獨立駭客正在尋找優秀的 UI 元件集合 | 🧑‍💻🎨 <br/>獨立駭客正在尋找簡約、時尚的 SaaS 樣板。 | | **易於使用** | 6/10 <br/>複雜，以企業為中心。 | 8/10 <br/>精簡且快速。有據可查。 | 5/10 <br/>需要大量額外設定。 | 7/10 <br/>良好的基礎，但缺乏一些功能 | | **授權** |透過 Auth.js 驗證電子郵件、SAML SSO、Google、Github |電子郵件已驗證，Google，Github 透過 Wasp w/ Lucia |電子郵件、Google 透過 Auth.js |谷歌透過 Auth.js | | **管理儀表板** |限團隊管理 |內建和預先配置的網站和收入分析 |用於收入分析的 UI 元件（未配置） |無 | | **付款** |否（即將推出）|條紋| Stripe（+ Lemonsqueezy 付費版）|條紋| | **分析** |透過 Mixpanel 進行第 3 方（付費）|合理（免費、開源）或 Google | Vercel 分析（付費）| Vercel 分析（付費）| | **人工智慧.準備好了** |沒有 |內建 AI 支援 https://opensaas.sh (OpenAI API) |沒有 |沒有 | | **端對端類型安全性** |沒有 |是的 |沒有 |沒有 | | **電子郵件發送器** |郵件發送 | SendGrid、EmailGun 或 SMTP |重新發送 |重新發送 | | **內建部落格** |沒有 |是（透過 https://astro.build/）|否（付費版本，是）|是（透過 https://contentlayer.dev/）| | **造型** |順風|順風| Tailwind，Shadcn ui | Tailwind，Shadcn ui | | **使用者介面與設計** |基本 |款式好看|帶有漂亮 UI 元件的基本 |現代、時尚的造型| | **社區支持** | https://discord.gg/uyb7pYt4Pa | https://discord.gg/aCamt5wCpS | https://www.reddit.com/r/saas_kit/（發佈時沒有討論）|無 | | **文件** |基本 |非常詳細|基本 |可憐| | **演示應用程式** |無 | https://opensaas.sh | https://www.saasstarterkit.com/ | https://next-saas-stripe-starter.vercel.app/ | https://next-saas-stripe-starter.vercel.app/ --- 原文出處：https://dev.to/vincanger/best-free-open-source-saas-starters-for-react-nextjs-2024-4nbn

0個讚   0留言 95瀏覽

😎 2024 年值得關注的 9 個熱門開源專案

身為一名熱衷於開源的開發人員，我不斷關注新興的專案、函式庫和服務。 你知道那些，似乎有那種特殊的醬汁。 ![燈泡時刻](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj2mtk0t0oa7doj1midk.gif) 我整理了一份小清單，列出了我在新的一年中看到的趨勢或預期的趨勢。 讓我們來看看我最近遇到的一些最令人驚訝和印象深刻的專案。 ## 1. [Wing](https://github.com/winglang/wing) ![翼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj3n6z4negxh2rvthj3a.gif) Wing 開發了一種名為 **[Winglang](https://www.winglang.io/)** 的面向雲端的程式語言，專門用於解決雲端開發人員面臨的需求和挑戰。 將基礎設施和執行時程式碼組合成一種語言，並具有內建的本機模擬器以及可觀察性和偵錯控制台。 Wing 減少了認知負荷和上下文切換，使開發人員能夠保持創作流程。 Wing 如何促進您的發展： - 更快的迭代周期 - 透過機翼模擬器進行在地化測試 - 透過編寫更少的程式碼部署到雲端 {% cta https://dub.sh/wing-cloud %} 請star ⭐ Winglang {% endcta %} <小時/> ## 2. [也許](https://dub.sh/wing-cloud) ![也許](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sdivkavkiuht8tgtsuq.gif) Maybe 最近開源了他們的個人理財 + 財富管理應用程式 一些功能包括： - 投資標桿 - 投資組合分配 - 債務洞察 {% cta https://github.com/maybe-finance/maybe %} 請加註星標 ⭐ 也許 {% endcta %} <小時/> ## 3. [Wstunnel](https://github.com/erebe/wstunnel?tab=readme-ov-file) ![Wstunnel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24jmmutuudqssociwxg9.gif) Wstunnel使用與http相容的WebSocket協定來繞過防火牆和代理程式。 這允許您傳輸您想要的任何流量並存取您需要的任何資源/網站。 {% cta https://github.com/erebe/wstunnel?tab=readme-ov-file %} 請加註星標 ⭐ wstunnel {% endcta %} <小時/> ## 4. [Spotube](https://github.com/KRTirtho/spotube) ![wstunnel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhcqt9wvdd0lchc3tsut.gif) 開源、跨平台的 Spotify 用戶端，利用 Spotify 的資料 API 和 YouTube（或 Piped.video 或 JioSaavn）作為音訊來源，跨多個平台相容， 不再需要 Spotify Premium。 順便說一句，這不是另一個 Electron 應用程式😉 {% cta https://github.com/KRTirtho/spotube %} 請加註星標 ⭐ Spotube {% endcta %} <小時/> ## 5. [柔術](https://github.com/martinvonz/jj) ![Jujutzu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcy49y6dpnwav2t4i8mw.gif) Jujutsu 是一個軟體專案的版本控制系統，以 Rust 編寫。 您用它來： - 取得/複製您的程式碼 - 追蹤程式碼的更改 - 發布這些變更以供其他人查看和使用。 {% cta https://github.com/martinvonz/jj %} 請star ⭐ Jujutsu {% endcta %} <小時/> ## 6. [黃蜂](https://github.com/wasp-lang/wasp) ![黃蜂](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f3vyg7g6gn0wke26g9h.gif) Wasp（Web 應用程式規格）是一個類似 Rails 的 React、Node.js 和 Prisma 框架。 在一天之內建立您的應用程式並使用單一 CLI 命令進行部署！ - 快速開始 - 無樣板 - 沒有鎖定 {% cta https://github.com/wasp-lang/wasp %} 請加註星 ⭐ 黃蜂 {% endcta %} <小時/> ## 7. [最佳化](https://github.com/refinedev/refine) ![精煉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atf3c2rldmw5zsk181cb.gif) 用於建立內部工具、管理面板、儀表板和 B2B 應用程式的 React 框架，具有無與倫比的靈活性。 Refine 不限於一組預先設計樣式的元件，而是提供以下集合： - 輔助掛鉤 - 成分 - 供應商 {% cta https://github.com/refinedev/refine %} 請加註星 ⭐ Refine {% endcta %} <小時/> ## 8. [DbGate](https://github.com/dbgate/dbgate) ![DbGate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uwv1e66powp9mtli147.gif) DbGate 是一個跨平台資料庫管理器，其設計目的是在同時處理更多資料庫時使用簡單且有效率。 **支援的資料庫：** - MySQL - PostgreSQL - SQL伺服器 - 甲骨文（實驗性） - MongoDB - 雷迪斯 - SQLite - 亞馬遜紅移 - CockroachDB - 瑪麗亞資料庫 {% cta https://github.com/dbgate/dbgate %} 請star ⭐ DBGate {% endcta %} <小時/> ## 9. [ivy](https://github.com/unifyai/ivy) ![常春藤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z2k5064eyhfpdf3y71k.gif) Ivy是一個開源機器學習框架： - 自動調整您的模型 - 將程式碼轉換為任何框架 - 編寫與框架無關的程式碼 {% cta https://github.com/unifyai/ivy %} 請star ⭐ Ive {% endcta %} <小時/> --- 原文出處：https://dev.to/winglang/9-top-trending-open-source-projects-to-watch-for-in-2024-emb

0個讚   0留言 135瀏覽

10 個可以在網路上免費學習任何內容的網站

網路蘊藏著許多寶藏，但很多人卻不知道。 這裡有 10 個資源豐富的網站，可以在網路上免費學習任何東西： --- ## 1. 編碼 **免費程式碼營** 您可以免費學習編碼、建立專案並獲得認證。 **您可以獲得以下認證：** - 響應式網頁設計 - Javascript演算法與資料結構 - 前端開發庫 - 資料視覺化 - 關係型資料庫 - 和更多 ``` Link: https://www.freecodecamp.org/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1p5uuz40iub2l7u2z5f.png) --- ## 2. 行銷 **行銷範例** 簡短、溫馨、實用的行銷範例之家，可幫助您更好地進行行銷。 **取得範例：** - 客戶獲取 - 轉換 - 保留 - 品牌策略 - 推薦策略 - 和更多 ``` Link: https://marketingexamples.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b7t6d2nmw2aiml2iibx.png) --- ## 3. 無程式碼 每天獲得 30 分鐘的簡短課程，指導您 100 天的無程式碼之旅，以提升您的無程式碼技能。 - 你得到什麼？ - 指導課程 - 技巧和竅門 - 靈感鏡頭 - 驚喜獎勵 - 獎勵迷你挑戰 - 內建公共提示 ``` Link: https://www.100daysofnocode.com/start-the-challenge ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lq2r5ykrguazod5b7hrp.png) --- ## 4.人工智慧 **人工智慧 100 天** 每天獲得 30 分鐘的簡短課程，指導您的 AI 學習之旅。 **你了解什麼？** - 人工智慧在日常生活中的無限應用 - 你知道科技兄弟在談論什麼。 - 你每天都使用人工智慧來建立很酷的專案並消除無聊的工作。 - 你知道為什麼你對人工智慧感到焦慮，甚至更興奮。 ``` Link: https://www.100daysai.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1q3fklkja9pkk93elnm.png) --- ## 5. 語言 **多鄰國** 以遊戲化的方式學習您想要學習的任何語言，以保持您的動力。 **你得到什麼？** - 透過快速、簡短的課程，您將獲得積分並解鎖新級別，同時獲得現實世界的溝通技巧。 - 結合研究支援的教學方法和令人愉快的內容來建立課程。 - 類似遊戲的功能、有趣的挑戰和提醒，輕鬆養成語言學習的習慣。 - 課程經過量身定制，可幫助您以適當的水平和節奏學習。 ``` Link: https://www.duolingo.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu7kwsknz8i57dqe9pvy.png) --- ## 6. 資料結構與演算法 **CSVISTOOL** 了解資料結構和演算法如何以視覺化方式運作。 **你能學到什麼？** - 清單 - 堆疊、佇列和出隊 - 樹和跳過列表 - 哈希圖 - 排序和快速選擇 - 字串搜尋 - 圖形演算法 - 和更多 ``` Link: https://csvistool.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp7z77dyhhm87i94xx8j.png) --- ## 7. 使用者體驗 **使用者體驗法則** 策劃設計人員在建立使用者介面時可以考慮的最佳實踐。 **你得到什麼？** - 啟發式 - 原則 - 格式塔 - 認知偏差 ``` Link: https://lawsofux.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi0nqfadsvvky9ea66um.png) --- ## 8.Excel + Power BI **尚杜** 每週接收有關 Excel 和 Power BI 最佳提示的電子郵件 **你得到什麼？** - 強大的提示、資源和影片，幫助您在工作中取得進步。 - 資料分析、圖表、報告和自動化的真實範例 - 獎勵文件、PDF 指南和先睹為快 ``` Link: https://chandoo.org/wp/subscribe/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdo19vjlpbg5e7gz1tw0.png) --- ## 9. 時事通訊的成長 **反向成長** 了解如何從網路上最好的時事通訊成長故事中發展您的時事通訊。 **你得到什麼？** - 時事通訊企業如何賺錢 - 他們如何成長 - 他們如何透過時事通訊獲利 ``` Link: https://growthinreverse.com/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bebb1sbr2mt94udzv77p.png) --- ## 10.心智模型 **法南街** 了解讓您生活更美好的心理模式。 **如何取得？** - 核心心智模型 - 物理和化學的心理模型 - 生物學的心理模型 - 系統思維的心智模型 - 以及更多 ``` Link: https://fs.blog/mental-models/ ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tmyafxsxl9xbvbcgn0c.png) --- ## 與我聯繫 領英：https://www.linkedin.com/in/durgesh4993/ GitHub：https://github.com/Durgesh4993 LeetCode：https://leetcode.com/durgesh4993/ 簡介：https://linktr.ee/durgesh4993 --- 原文出處：https://dev.to/durgesh4993/10-websites-to-learn-anything-for-free-on-the-internet-4ahe

0個讚   0留言 79瀏覽

反應性的推導

當您第一次了解反應式系統時，範例總是看起來像這樣，這是有原因的： ``` let name = state("John"); effect(() => { console.log("Hi" + name); }) ``` > *我們將使用偽程式碼，而不是為了迎合特定庫或框架的語法。* 不需要太多就能理解，當我更新此狀態時，會發生一個呼叫我的副作用的事件。自己實現這種行為也不是太困難。但這還遠遠不是故事的全部。 無論您是想忘記 React、使用 Svelte 探索符文還是想嘗試 Angular；無論您是建立 Solid 應用程式、在 Vue 中建立視圖還是生活在 QwikCity 中，這個主題都相關。它超越了虛擬 DOM 或訊號。在您認為「useEffect」被建立為每個人存在的禍根之前，讓我們先來看看反應性最重要的部分：派生。 ----------------- ## 派生與同步 您可能已經在您選擇的 JS 框架/反應系統中看到了派生值。它可能看起來像“useMemo”，或者可能是“compulated”，或者可能就在分配了值的“$”後面。但所有這些的不變之處是你被告知它們是為了產生一種反應性關係。即使 B 或 C 發生變化，A 也是 B + C 總和： ``` let a = state(1); let b = state(1); const c = memo(() => a + b); effect(() => console.log(c)); ``` 他們可能告訴您派生值應該是純粹的——也就是說它不應該寫入任何其他狀態——但該規則也適用於它的內部。 您可以先將其應用為派生狀態的心理模型： ``` function memo(fn) { let internal = state(); effect(() => internal = fn()); return internal; } ``` 但這永遠無法正常工作。 大多數 UI 框架都關心提供互動性。即取得使用者操作的輸入，將其套用到某種狀態，然後更新 UI。我們看到它形式化為“ui = fn(state)”，但這是一個重複的循環。 就反應性而言，它看起來像： > 更新狀態-> > 執行純計算 -> > 執行副作用（例如更新 DOM） 原因是最終用戶與 UI 互動需要一致性。他們看到的（和看不到的）應該全部同步。您無法與過時的頁面部分進行交互，因為它設定了錯誤的期望。 UI 庫安排其副作用同步執行，以確保最終用戶可以信任體驗。 這意味著程式碼執行有明確的階段。庫需要確保在渲染之前解決所有相關計算。 這導致了以下之間的確切區別： ``` let name = state("John"); const upperName = memo(() => name.toUpperCase()); updateUI(name, upperName); ``` ``` let name = state("John"); let upperName = state(); effect(() => upperName = name.toUpperCase()); updateUI(name, upperName); ``` 第一個例子是推導，其中推導的狀態是它所依賴的狀態的函數。第二個範例是同步，其中狀態的變更會導致其他狀態更新。這是一個重要的區別。 在第二個範例中，根據您的反應模型，可能會發生不同的事情，而不是簡單地按預期立即顯示所有內容。根據效果安排時間與 UI 渲染時間的不同，當您更新「name」時，您可能會短暫看到更新後的「name」和「upperName」的先前值。在像 React 這樣的粗粒度渲染框架中，您的元件可能會執行兩次。因為更新效果中的狀態會再次開始循環。 ---------------- ## 無故障一致性 即使您始終可以在渲染之前進行同步，您仍然有可能使用不同中間狀態（可能是意外狀態）的值多次執行表達式，直到圖形穩定下來。推導可以提供可預測性。 現在，許多反應式系統保證對於任何狀態更新，每個節點最多只執行一次，並且執行時不會出現故障。透過無故障，開發人員向庫提供的程式碼永遠不會觀察到中間或過時狀態。 考慮： ``` let a = state(1); const b = memo(() => a + 1); const c = memo(() => a + 1); const d = memo(() => c + 1); const e = memo(() => b + d); effect(() => console.log(e)); ``` 或作為圖表 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kg9w4yehyeqhgry1wkvk.png) 不同的系統運作方式不同，但在所有情況下，我們期望初始執行產生值為 5 的「e」。 同樣清楚的是，某些狀態依賴其他狀態。當我們更新“a = 2”時，無論機制如何，如果我們只想執行每個節點一次，“c”必須在“d”之前解析，“d”必須在“e”之前解析。 ---------------- ## 推與拉 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1004yrongpx1usdsxe0x.jpg) 那我們要如何處理這個問題呢？它通常從以下兩個想法之一開始。調度（拉）和事件（推）。讓我們使用上一節中的範例來分別了解。 ### 拉動（調度） 這個想法是從副作用（目標）開始，然後詢問遇到的值。 React 通常被認為具有基於「拉」的反應性。在此系統中，當狀態更新時，它會安排檢查以查看是否需要執行任何工作。 但它檢查什麼？天真地，也許一切都改變了，因為它不知道發生了什麼變化。然而，許多 UI 庫都處理元件。如果狀態由元件擁有，那麼這可以作為起點。當元件狀態更新時，安排此元件運作。 基於拉動的系統是粗粒度的。也就是說，他們依賴自上而下地重播所有內容，因為他們不知道發生了什麼變化。如果我們想像一個更細粒度的「拉動」系統，它就無法知道任何變化，直到它追溯到變化的源頭，而變化的源頭可能存在於其依賴項中，也可能不存在。當最終需要向下執行時，額外的遍歷只是額外的工作。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kg9w4yehyeqhgry1wkvk.png) 在我們的範例中，圖片中我們首先執行要求“e”的效果。如果不在之前執行“b”或“d”，我們不知道“e”是否已更改。明確依賴項（如 React 的依賴項陣列）可以在不執行節點的情況下給出向上的路徑。所以我們可以回溯`e`、`b`、`a`，然後執行`b`，然後回溯`d`、`c`、`a`，然後執行`c`、`d`、 ` e` 在最終執行我們的效果之前。但考慮到我們無論如何都在執行整個範圍（元件），即使其中一部分沒有改變，這都是不必要的。 記憶（通常以推導的形式）允許提前退出，有助於優化這種情況，但這種方法雖然一致，但從根本上來說效率很低。 ### 推送（事件） 這個想法是更新從已更改的來源狀態向外傳播。 RxJS 是基於「推送」的反應性的常見範例。它將讓每個節點訂閱其依賴項中的更改事件，然後在收到通知時執行並在其值發生更改時通知其觀察者。 考慮深度優先傳播，因為它反映了最初建立時執行的方式。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kg9w4yehyeqhgry1wkvk.png) `a` 更新，通知 `b` 和 `c`。然後“b”執行並通知“e”。然後“e”執行並看到“b”的更新值，但隨後它遇到了“d”，它尚未執行並且具有舊值... 廣度優先也有類似的問題，因為「d」和「e」與來源「a」的距離相同，再次導致過時的值。它會嘗試執行“b”、“c”，然後執行“e”、“d”，結果發現“d”在“e”之前沒有被計算。 基於「推送」的系統很難確保我們有效地尋求保證。進行排序插入可以工作。但即使最後沒有任何效果器在監聽，它仍然可以工作。它確切地知道傳播時發生了什麼變化，但不知道該變化會產生什麼影響。 ### 推拉 第三種選擇是結合這兩種技術。訊號是事實上的「推拉」反應系統。訂閱和通知的製作方式類似於“推”，但工作的安排類似於基於“拉”的系統。透過這種方式，只安排會改變的事情，並且保持一致。 在我們更新“a”的範例中，“b”和“c”被通知它們可能會發生更改，進而通知“e”和“d”。最後，監聽「e」的效果被排隊。然後，我們的效果首先執行，在觸及值時拉低值，類似於我們上面描述的假設的細粒度「拉」系統。只不過這次只有可能受影響的效果才會排隊。 它知道發生了什麼變化以及這些變化的影響，確保我們只做所需的工作。 如果您對推拉演算法如何在各種訊號庫中工作的更多細節感興趣，請查看： {% 連結 https://dev.to/modderme123/super-charging-fine-grained-reactive-performance-47ph %} ---------------- ## 可以推導的應該推導 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxmqpzohmk1az3k92anp.png) 我不是 100% 確定這句話最初來自哪裡，但我第一次聽到這句話來自 MobX 的建立者 Michel Westrate。這些都是我們賴以生存的話語。 不言而喻，我們所期望的函式庫和框架的一致性僅靠狀態和效果是不可能實現的。當效果寫入狀態時，您不再可以遍歷依賴關係圖來了解需要計算的內容。依賴性消失了。這不僅僅是低效。這是很容易出錯的。 這是一個很深奧的話題。就這麼多，我只觸及了表面。 「推」與「拉」還有其他含義，即使在查看屬於同一類別的系統時也有很多細節。下一次，我們將研究惰性派生與急切派生以及處理非同步的潛力。 -------------- 特別感謝 Atila Fassina、Fabio Spampinato 和 Daniel Afonso 的審閱。 --- 原文出處：https://dev.to/this-is-learning/derivations-in-reactivity-4fo1

0個讚   0留言 55瀏覽

React網頁背景無法顯示完全

我用react寫了一個網站，想要做一個有黑暗模式的功能，但是背景顏色卻沒辦法完全改變。 ```css #light { color: black; background-color: #f0e0f7; } #dark { background-color: #26272a; color: white; } ``` ![](https://i.imgur.com/TdFOoQl.png)

0個讚   1留言 178瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 詢問JS children使用方式
🔥 53 個專案創意（從初級到高級）
🔥 用於建立 AI/ML 應用程式的最佳開發工具！
🔥 為開源做出貢獻將使您獲得新工作的機會增加 10 倍 🚀
🔥 我們在使用 Rust 建構 SaaS 時學到了什麼
  近期留言
熱門搜尋： nodes 使用 ci 19 前 開發 javascript 10 學習 20 1 AI REACT github 前端 git c 4 語言 2 id go C 工作 Javascript API % 作為 " JS api 後端 專案 Git JavaScript for 第一 Ai ` . 搜尋 GIT 作業 unity 題 技術 自學網頁の嬰兒教材： app QT Github 套件 面試 履歷 主題 測試 react 查詢 python result 分離 fetch vite `) 非同步 網站 windows import local JavaScript 系列一 COMPO ERD js user 分享 COZE 50 create Callback CD ＣＳＳ Vue 研 資料庫 研究 聊天 COM ROS 熱情 prisma rest nodejs with JAVA console class html Can 遊戲 資料結構 結構
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。