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

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

📖 技術文章

📖 技術文章

CSS 行高的工作原理和最佳實踐

CSS 屬性`line-height`定義兩個內嵌元素之間的間距。典型用途是分隔文字。您可以看到人們將其與“前導”進行比較，“前導”是印刷術中使用的術語，指兩行文本的基線之間的空間。 `line-height`工作方式不同。它在文字上方和下方加入了空間。 ![行距與行高](https://thepracticaldev.s3.amazonaws.com/i/lsrnzx1hin6mkqg6fagw.png) 左：行距，右：行高 用法 -- 您可以使用具有不同值的`line-height`如下所示： ``` body { line-height: normal; /* default */ line-height: 2; line-height: 1em; line-height: 1rem; line-height: 200%; line-height: 20px; } ``` 噢，孩子😧！好多啊。讓我們一一分析一下👍。 ### 預設值和無單位值 如果您不將其設定為不同的值，則「正常」是預設值。通常，這意味著它設定為`1.2` ，這取決於瀏覽器供應商。那麼只有一個數字值而沒有任何單位是什麼意思呢？它實際上是一個乘數。它採用`font-size`值並將其乘以`1.2` 。讓我們用下面的例子來計算一條線的高度。 ``` body { font-size: 16px; line-height: 1.5; } ``` 我們只需要做以下計算：16 \* 1.5 = 24px。現在我們知道文字的最小高度為 24 像素。因此它將在文字下方和上方加入 4 個像素。酷就這麼簡單😎！ ### em 和 rem 下一個是`em`和`rem` 。 `rem`相對於根元素的`font-size` ， `em`相對於目前元素的 font-size。這是一個例子 ``` html { font-size: 12px; } .remExample { font-size: 16px; line-height: 1.5rem; /* line-height will be 12 * 1.5 = 18px */ } .emExample { font-size: 16px; line-height: 1.5em; /* line-height will be 16 * 1.5 = 24px */ } ``` ### 百分比 `%`值有點難以閱讀。 100%意味著乘以1。再次舉例來說明這一點。 ``` body { font-size: 12px; } .percentage { font-size: 16px; line-height: 150%; /* line-height will be 16 * 1.5 = 24px */ } ``` ### 像素（px） 對我來說最簡單也是最令人困惑的是`px`值。將其設為任何像素值都會將其精確地設定為該值。因此，如果您的`font-size`為 16px，並且您將`line-height`設為 12px，您的字體將比它所包裝的容器更大。一般來說，您應該盡量避免在行高中使用`px`值！ ``` body { font-size: 16px; } .pixel { line-height: 12px; } ``` ### 一些最佳實踐 一般來說，我先將`body`元素中的`font-size`和`line-height`設定為以下值。 ``` body { font-size: 16px; line-height: 1.5; } ``` 由此，您可以建立所有其他樣式。我會盡量避免使用無單位數字以外的任何東西。另外，嘗試使用易於分割的`font-size`值，例如 16 或 12。這將有助於您在設計中保持平衡。您也可以在`margin`和`padding`中使用它。在腦中計算 16 \* 1.5 比 13 \* 1.5 更容易。然後您將永遠知道實際價值是多少。 ``` body { font-size: 16px; line-height: 1.5; } h1, h2, h3, h4, ul, ol { margin-bottom: 15rem; } button { display: inline-block; padding: 0.75rem 1.5rem; } ``` 當然，你可以嘗試一下，這些規則也會有例外，但我總是這樣開始。 資源 -- - http://www.indesignskills.com/tutorials/leading-typography/ - https://developer.mozilla.org/en-US/docs/Web/CSS/line-height - https://www.w3schools.com/cssref/pr\_dim\_line-height.asp - https://css-tricks.com/almanac/properties/l/line-height/ - https://ux.stackexchange.com/questions/35270/is-there-an-optimal-font-size-line-height-ratio **謝謝閱讀！** --- 原文出處：https://dev.to/lampewebdev/css-line-height-jjp

1個讚   0留言 173瀏覽

關於 GIT 你需要了解的一切

我相信您可以想像版本控製程式碼的重要性，以便我們可以**恢復變更**並**恢復遺失的資料以及其他可能性**。 我打賭你知道有人*（不是我呵呵）*通過使用越來越有創意的名稱建立文件副本來對其文件進行版本控制... ![GIF 模擬具有不同名稱的檔案的複製。範例：文章、文章最終版本等。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sffhjyl41pfnjklivnsv.gif) 在 1972 年之前，隨著**SCCS *（原始碼控制系統）***的發布，這是有史以來第一個**集中式**版本控制軟體之一，這可能是任何人對其程式碼進行版本控制的方式。 但我們在這裡不是在談論 SCCS，我們現在真正感興趣的是**GIT** ，這是一款**分散式**開源版本控制軟體，明年*(07/04/2005)*將慶祝其誕生 20 週年。 目錄 -- - [1.GIT是什麼？](#chapter-1) - [2.GIT如何運作？](#chapter-2) - [3.安裝GIT](#chapter-3) - [4.配置GIT](#chapter-4) - [5. 啟動本機儲存庫](#chapter-5) - [6. 使用 GIT](#chapter-6) - [7. 認識分支](#chapter-7) - [8. 與遠端倉庫同步](#chapter-8) - [9. 結論](#chapter-9) - [10. 參考文獻](#chapter-10) 1.GIT是什麼？<a name="chapter-1"></a> --------------------------------- GIT 是一個開源**分散式**版本控制系統，於 2005 年推出，由 Linus Torvald *（Linux 核心建立者）*開發。 使用GIT，我們可以在本地**控制專案的版本***（在工作資料夾中）*並將所有變更同步到遠端儲存庫*（例如在GitHub上）* 。 2.GIT如何運作？<a name="chapter-2"></a> ---------------------------------- 想像一個**實體**文件櫃，其中有一個包含所有專案文件的資料夾。每當有人需要操作文件時，他們都必須將其拾取，**將其從資料夾中刪除，並在完成後將其返回到資料夾中**。因此，兩個人**不可能**處理同一個文件，完全避免了任何可能的衝突。 **但這不是 Git 的工作原理！** *（感謝上帝）* 這就是**集中式**版本控制系統的工作方式，其中使用者需要**「簽出」**和**「簽入」**文件，即每當有人需要處理特定文件時，他們需要簽出該文件，**刪除從儲存庫中獲取**文件，然後在工作完成後簽入該文件，**並將其返回儲存庫**。 ![GIF 模擬集中式版本控制系統的操作。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26a9j0m4pcu5prb0kauo.gif) 在像**GIT**這樣的**分散式**系統中，多個人可以存取同一個遠端儲存庫中的檔案。每當有人需要操作文件時，他們只需將其**克隆***（或克隆整個存儲庫）*到本地計算機，然後將修改發送回遠端存儲庫。這使得**多人可以處理同一個專案**，甚至操作**相同的文件**。 ![GIF 模擬分散式版本控制系統的操作。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb0x0u9kc6m7z2hz7zfj.gif) 這就是允許大型**開源**專案的分佈，來自世界不同地區的人們在同一個專案上工作，管理修改和可能的衝突*（是的，這裡可能會發生合併衝突）* 。 3.安裝GIT<a name="chapter-3"></a> ------------------------------- **GIT**適用於主要作業系統*（Windows、Linux、MacOs...），*安裝過程非常簡單，可以透過**命令列**或透過[git-scm.com](https://git-scm.com/)的**官方安裝程式**完成。 ### 3.1 在 Windows 上 要在 Windows 上安裝 GIT，只需存取官方網站並[下載安裝程式即可](https://git-scm.com/download/win)。然後只需**按照說明進行操作**，一切都會好起來，然後我們就可以在終端機中使用 GIT 命令了。 ### 3.2 在Linux上 對於Linux，我們可以使用以下**命令**安裝**GIT** ： ``` sudo apt install git-all ``` 透過這樣做， **GIT**必須準備好在我們的終端中運作。 ### 3.3 在 MacOS 上 對於 Mac，安裝**GIT**最簡單的方法是安裝[Homebrew](https://brew.sh/) ，然後在終端機中執行以下**命令**： ``` brew install git ``` 然後**GIT**必須準備好在我們的終端中運作。 4.配置GIT<a name="chapter-4"></a> ------------------------------- 安裝後，使用以下**命令設定 GIT**很重要： ``` git config --global user.name "[username]" # e.g. John Doe ``` ``` git config --global user. email "[[email protected]]" # e.g. [email protected] ``` > 此外，也可以透過刪除`--global`標籤來為某些本機儲存庫配置特定使用者。 5. 啟動本機儲存庫<a name="chapter-5"></a> ---------------------------------- 配置**GIT**後，我們就可以**啟動本地儲存庫了**。為此，我們可以**從頭開始一個新的儲存庫**或**複製現有的遠端儲存庫**。 ### 5.1 從頭開始（git init） 要啟動新儲存庫，只需導航到所需的儲存庫**根資料夾**並執行以下命令： ``` git init ``` ![Linux 終端機執行「git init」命令並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw35xe9jwrwzo937to5b.png) 透過這樣做，將在專案資料夾內建立一個`.git`目錄，該目錄將**負責此本機儲存庫的工作資料夾中的版本控制**。 ### 5.2 克隆現有儲存庫（git clone） 克隆現有遠端儲存庫就像從頭開始建立新儲存庫一樣簡單。為此，只需使用`git clone`命令，將要複製**的儲存庫的 URL**作為參數傳遞到要複製儲存庫的資料夾中： 複製現有的遠端儲存庫就像從頭開始建立新的儲存庫一樣簡單。為此，只需使用`git clone`命令，將**遠端儲存庫 URL**克隆到我們要下載儲存庫的資料夾中： ``` git clone [repository-url] ``` ![Linux 終端機執行「git clone」命令並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlt8rtua4ri7kpnna5el.png) 然後整個存儲庫必須**克隆**到我們的本地機器並**自動連結到相關的遠端存儲庫**。 > 有了複製的儲存庫，我們以後就不再需要使用`git remote`指令了。 6. 使用 GIT<a name="chapter-6"></a> --------------------------------- 在我們的**本機儲存庫**中，我們可以建立專案所需的文件，但它們**不會由 GIT 自動同步**，當有任何變更需要版本控制時，我們需要報告它。 因此，我們可以根據需要**操作**文件，並**在完成所需的變更後**，**將更新的文件傳送到 GIT** 。 為此，重要的是要了解版本控制中有**3 個階段的無限流***（是的，無限）* ： ``` MODIFY -> STAGE -> COMMIT ``` - **修改：**版本控制的第一階段，我們在這裡找到與上一個可用版本相比**已更改的檔案**。 - **STAGE：**版本控制的第二階段，這是我們放置**要新增到下次提交的修改檔案**的地方。 - **COMMIT：**版本控制的最後階段，當我們**確認變更**時，將階段中修改的檔案傳送到本機儲存庫。 提交修改後的文件後，我們在本地存儲庫中有一個可用的**新版本**，它可以再次接收更新，再次*“修改”* ，然後放入*“階段”* ，並再次*“提交”* ，確認較新的版本版本等等*（因此，「無限」哈哈）* 。 > 值得注意的是，提交不會覆蓋已修改文件的舊版本，而是包含新版本以及指向最後版本的指針，從而追蹤 GIT 追蹤的每個文件的版本。 ### 6.1 新增和提交（git add 和 git commit） 儘管聽起來很複雜，但執行版本控制流程**非常簡單**。由於所需的修改已完成，我們使用以下命令**新增要在舞台上提交的修改後的檔案**： ``` git add [filename] ``` > `git add -A` -> 將所有修改的檔案立即加入階段。 > > `git add *.[extensão-do-arquivo]` -> 將所有具有指定檔案副檔名的已修改檔案一次新增至暫存區（例如`git add *.html` ） 我們可以隨時使用`git status`指令檢查目前本機儲存庫**狀態**： ![Linux 終端機執行「git status」命令並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e28lg7wym8s0woytgzqz.png) 請注意，當我們**在建立新檔案後**在儲存庫中執行`git status`時，新檔案將顯示為*「Untracked」* 。這意味著該文件是**全新的**，仍然需要加入到任何提交中才能被**GIT追蹤**。 > 可以讓 GIT 忽略儲存庫中的特定檔案或資料夾。為此，我們只需將一個名為`.gitignore`的檔案新增到根資料夾中，並在其中寫入應忽略的檔案或資料夾的名稱。 > > 注意：被忽略的檔案和資料夾將不再出現在 GIT 軌道上，甚至不會顯示為「未追蹤」。要重置跟踪，只需從`.gitignore`文件中刪除所需的名稱即可。 要包含文件，我們可以使用要新增的文件的名稱來執行`git add`命令*（在本例中為「index.html」）* ： ![Linux 終端機的螢幕截圖，執行命令“git add”，然後執行“git status”，顯示結果。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz1hnk9gpnxtv2s8xort.png) 這樣，透過重新執行`git status`我們可以看到新檔案已新增至*「stage」* ，並**最終準備好在下一次提交中發送**，這可以使用以下命令完成： ``` git commit -m "[descriptive-message]" ``` > 提交具有唯一的 ID（雜湊碼）並且是**IMMUTABLE 的**，即一旦確認就無法修改。 > > `git commit -a` -> 執行直接提交，將所有修改的檔案新增至暫存區並提交它們。 **成功提交檔案後**，執行`git status`時，我們注意到**沒有更多修改的檔案需要上傳**，因為所有修改都已在上次**提交**時有效保存在我們的本機儲存庫中。 ![Linux 終端機的螢幕截圖，執行指令“git commit”，然後執行“git status”，顯示結果。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryqqs4mi46hxtuex199i.png) 此外，還可以使用`git log`指令查看儲存庫的提交日誌來**驗證所做的更改**，該指令顯示所有提交的一些元資料，例如雜湊碼、分支、作者、日期等。 ![Linux 終端機執行命令「git log」並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljvj9se6srxslsu8vsj7.png) 可以重複整個過程來加入我們專案所需的新文件，修改它們並透過進行新的提交將它們發送到本地儲存庫。 ![GIF 模擬 GIT 分支中的多次提交。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uez3henix8kchperuw8.gif) > `git log -N` -> 顯示最近 N 次提交的日誌。 > > `git log [branch-A] [branch-B]` -> 顯示「branch-B」中但不在「branch-A」中的提交日誌。 > > `git log --follow [filename]` -> 顯示更改指定檔案的提交日誌，即使它已更改名稱。 > > `git diff` -> 列出與儲存庫中最新可用版本相比所做的變更。 > > `git diff [nome-do-arquivo]` -> 列出對指定檔案相對於儲存庫中最後一個可用版本所做的變更。 ### 6.2 撤銷提交前後的更改 **在提交之前**，對本地存儲庫所做的任何更改都可以撤消或更改，但**一旦提交，就無法更改**。這是因為提交是**不可變的物件**，這意味著不可能編輯或更改提交中的資料。 但是，**可以進行新的提交**來撤銷更改，或更正先前提交中的不正確資訊。無論哪種方式，我們都可以使用以下命令之一： ``` git checkout -- [filename] # Discards changes made to the local file before the commit (irreversible action) ``` ``` git reset --hard HEAD # Discards changes made to a file that is in stage (before the commit) ``` ``` git reset --hard HEAD~1 # Discards the last commit made in the local repository (only the last commit) ``` ``` git commit --amend # Creates a new commit, replacing the last commit made in the local repository ``` ``` git revert [commit-hash] # Creates a new commit, reverting the changes of the specified commit ``` 7. 認識分支<a name="chapter-7"></a> ------------------------------- **分支**只不過是儲存庫的一個**分支**，到目前為止，所有操作都已在分支`master/main'`上執行。 > 預設情況下，儲存庫中建立的第一個分支是`master/main` ，它是儲存庫的主分支。 ### 7.1 為什麼要使用分支？ 乍看之下似乎沒什麼，但**分店卻為專案的發展賦予了巨大的力量**。 想像一下，我們正在開發一個 Web 平台，並且想要**測試一項新功能**，但我們的儲存庫已經**託管或與其他人共享**，任何有問題的更改都可能會給他們帶來糟糕的體驗。我們可以做什麼？ 如果您一直在考慮**複製並貼上**專案資料夾，建立一個新的**「測試版本」** ，那麼您是對的！嗯，差不多… 透過 GIT，我們可以對分支做類似的事情。由於它們是**分支**，我們可以簡單地**建立一個名為「test」的新分支**，從而在完全**隔離的分支**中擁有我們專案的一個版本，準備好進行翻轉，**而不會危及主分支**。 ![GIF 模擬使用新提交建立新分支。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szc081nndoi18vklty5r.gif) ### 7.2 建立分支（git分支） 建立**分支**意味著建立可以獨立工作的儲存庫的並行副本，而不會影響`master/main`分支。為此，我們只需執行以下命令： ``` git branch [branch-name] ``` > 在沒有特定分支名稱的情況下執行`git branch`指令必須顯示儲存庫中可用分支的列表，並用「\*」標記目前正在使用的分支。 在執行`git branch test`指令之前， `git branch`指令只會傳回`master`分支。 ![Linux 終端機執行「gitbranch」命令、建立新分支並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqpdrtvhze9qhr31ewbh.png) 建立新分支後，我們可以執行以下命令在可用分支之間切換： ``` git checkout [branch-name] ``` 執行`git checkout test`指令後，我們可以看到**活動分支已切換**。從那一刻起，**所有提交的資訊都會傳送到儲存庫的`test`分支**，而不會影響分支`master/main` 。 ![Linux 終端機執行「git checkout」命令、切換活動分支並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egau7y81leig8za36myi.png) > 可以根據需要建立任意數量的分支，並且我們可以使用以下命令與現有分支進行互動： > > `git checkout -b [branch-name]` -> 使用給定名稱建立一個新分支並直接切換到它。 > > `git branch -d [branch-name]` -> 刪除指定分支。 > > `git branch -m [new-name]` -> 將目前分支的名稱變更為給定名稱。 ### 7.3 合併分支（git merge） **當完成不同分支**上的工作，並且我們確定所做的更改不會在專案中引起任何問題時，我們可以將當前分支**合併**到`master/main`分支中，**應用當前分支中的所有更改分支到儲存庫的主分支**。 要**合併**分支，我們需要**切換到將接收更改的分支**並執行以下命令： ``` git merge [branch-name] # Merge the given branch into the active branch ``` 在這裡，由於我們位於分支`test`上，因此我們應該使用`git checkout`命令**切換到分支`master`** ，然後使用我們要合併的分支的名稱*（在本例中為“test”）*執行`git merge`命令。 ![Linux 終端機的螢幕截圖，執行命令“git checkout”，切換到 master 分支，然後“git merge”，顯示結果。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6tqap1uu5gjipkety6w.png) 透過這樣做，在分支`test`上完成的所有工作*（在本例中為`style.css`檔案的建立）*將合併到分支`master`中。 ![模擬兩個分支之間的合併過程的 GIF。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hs17m005ogm0qlbedjy.gif) ### 7.4 合併衝突 如果**在同一行上更改了一個或多個檔案**並且合併無法**自動**完成，則使用`git merge`合併不同分支可能會導致一些**衝突**。 ![執行「git merge」命令的 Linux 終端機的螢幕截圖，該命令傳回衝突警告。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mwedudsff1yf8kpzguc.png) 出現這種情況時，我們可以執行`git status`指令來檢查**哪些檔案**有衝突。 ![出現合併衝突警報後執行「git status」指令的 Linux 終端機的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcfpmta2yiy1xpyc729u.png) 在繼續合併之前，我們需要**解決衝突**，方法是定義應該進行哪些更改，或檢查更改以使它們相互相容。為此， **GIT 將在衝突文件中插入標記**以協助解決問題。 ![在文字編輯器中開啟的衝突檔案的螢幕截圖，顯示了 GIT 建立的用於幫助解決衝突的標記。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0e727le3ogmhtuq0g7w.png) 解決衝突後，我們只需要將修改過的檔案放回舞台，提交新的無衝突版本，然後再次執行`git merge`指令，這一定會成功合併，沒有任何問題。 8. 與遠端倉庫同步<a name="chapter-8"></a> ---------------------------------- 我們已經知道可以**將本地存儲庫連接到遠端存儲庫**並遠端同步我們的所有工作，使其**保持最新**。 為此，我們需要執行`git push`命令，該**命令將所有提交從本地存儲庫發送到遠端存儲庫**，但首先我們需要\*\*配置遠端存儲庫。 ### 8.1 配置遠端倉庫 啟動*遠端儲存庫*非常簡單。這裡我們將使用**GitHub**來完成它。 首先，我們需要在 GitHub 帳戶中**啟動一個新的空白儲存庫***（只需選擇一個名稱並點擊「建立儲存庫」）* ： ![GitHub 上儲存庫建立頁面的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug1aw5eq15du36vd1hri.png) 接下來，我們需要透過在本機儲存庫中執行以下命令**來配置遠端儲存庫和本機儲存庫之間的關係**： ``` git remote add origin [remote-repository-url] ``` ![Linux 終端機執行「git Remote」命令並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhrlfg0f0pgljl5b18vl.png) > `git remote -v` -> 顯示實際連接到本機儲存庫的遠端儲存庫的 URL。 正確**連接**遠端儲存庫後，我們需要使用指令`git branch -m main`**將本機分支`master/main`的名稱變更**為「main」 *（如果您的本機分支已稱為`main` ，請忽略此步驟）* ： ![Linux 終端機執行「gitbranch」指令、將「master」分支重新命名為「main」並顯示結果的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0al7joro01pch0ac124.png) > 保持本機儲存庫的主分支與我們要推送到的遠端儲存庫的主分支同名非常重要。 最後，完成上述步驟後，我們可以使用以下命令首次將本機儲存庫與遠端儲存庫**同步**： ``` git push -u origin main ``` ![執行「git push」命令的 Linux 終端機的螢幕截圖，該命令需要 GitHub 身份驗證。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvkdyis8y989xron52nc.png) 當我們執行`git push -u origin main`指令時，我們可能需要輸入**GitHub 憑證***（使用者和存取權杖）* 。 > 如果您不知道**GitHub 存取令牌**是什麼，或者您沒有設定存取令牌， [請按一下此處](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic)。 > > 我們也可以透過**使用 GitHub CLI 設定身份驗證**來解決此問題。 [按此處](https://docs.github.com/en/get-started/getting-started-with-git/caching-your-github-credentials-in-git)了解具體方法。 經過**身份驗證**後， `git push`應該會成功執行，將本地儲存庫中的所有提交與遠端儲存庫同步。 ![Linux 終端機的螢幕截圖，顯示 GitHub 驗證後繼續執行「git Push」命令。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp7q4htszkzrfc6vepcl.png) ![收到帶有新檔案的「git Push」後 GitHub 上的遠端儲存庫的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rqfhi6s6jh369tseh5y.png) ### 8.2 第一次後的Git推送（git推送） 完成上述所有步驟後，可以單獨使用`git push`指令完成**新同步**，無需任何其他參數，如下所示。 ![Linux 終端機執行「git status」、「git commit」和「git Push」命令、執行新提交並將更新推送到遠端儲存庫的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoatcspiwosywih07nsm.png) ![收到新更新後 GitHub 上的遠端儲存庫的螢幕截圖。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jskxpghboi62mqw2qcb2.png) > 在這種情況下，使用**GitHub CLI**繞過了執行命令`git push`所需的身份驗證。您可以[點擊此處](https://docs.github.com/en/get-started/getting-started-with-git/caching-your-github-credentials-in-git)了解具體方法。 ### 8.3 更新本地倉庫（git pull） 使用**分散式**遠端儲存庫，可以**遠端**進行更改*（直接在遠端儲存庫中）* ，從而導致我們的本機儲存庫**變得過時**。 考慮到這一點，**更新本機儲存庫**並同步我們在遠端儲存庫中獲得的任何變更非常重要，**以確保本機專案始終具有遠端儲存庫中可用的最新版本**。為此，我們可以執行以下命令： ``` git pull ``` 想像一下，一個**新檔案**`README.md`已**直接在我們的遠端儲存庫中**建立，因此我們的本機儲存庫現已過時。 ![遠端儲存庫的螢幕截圖，其中遠端新增了新的 README.md 檔案。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hccw00vyr7j6lcfm02d2.png) 在本機儲存庫中，我們可以使用上面提到的`git pull`**同步**遠端儲存庫中的變更。 ![Linux 終端機執行「git pull」命令的螢幕截圖，使用遠端儲存庫中的新變更更新本機儲存庫。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it9ylx1imd94yey5d0wd.png) > 當我們執行`git pull`指令時回傳的前 7 行是`git fetch`指令的回傳。換句話說，如果我們執行`git pull`命令而不先執行`git fetch`命令，GIT 將同時執行這兩個命令以從遠端存儲庫檢索更新並將其同步到本地存儲庫。 > > `git fetch` -> 從遠端儲存庫取得更新，但不同步本機儲存庫（需要`git pull` ）。 9. 結論<a name="chapter-9"></a> ----------------------------- 這一切讓我們確信GIT是程式設計師日常生活中必備的版本控制系統，了解它的主要指令和用途可以成為我們技術資歷的轉捩點。最後，隨著本地和遠端儲存庫的同步和更新，以及我們迄今為止所學到的一切，我們已經準備好繼續推進這個令人敬畏的版本控制系統的實用性。 10. 參考文獻<a name="chapter-10"></a> --------------------------------- - [GIT 的官方文件。](https://git-scm.com/docs/git#_git_commands) - [\[PT-BR\] GIT：入門迷你課程（45 分鐘內學會） - Codigo Fonte TV](https://youtu.be/ts-H3W1uLMM?si=-hKGkUmwgT2lZJwy) --- 原文出處：https://dev.to/reenatoteixeira/everything-that-you-need-to-know-about-git-2440

0個讚   0留言 166瀏覽

Git Good：分支命名和 commit 訊息的最佳實踐

開發者們大家好，我將分享一些更有效地使用 Git 的最佳實踐。**Git？**是的，就是你已經熟悉的 git。程式碼夥伴是您的守護天使，可確保您的程式設計冒險順利進行，讓開發人員能夠輕鬆地進行專案協作。 你是那個建立分支然後忘記它們存在的原因的人嗎？總是需要尋找*文件變更*才能理解提交？這裡有一些建議供您參考。 我為什麼要遵循標準？ ---------- - **清晰和理解** - **協作與團隊合作** - **易於導航和維護** - **文件和知識轉移** - **工程品質** - **自動化變更日誌** - **優化 CI/CD** 在你讀之前 ----- - **分支命名約定**和**提交訊息**約定下的每個 seb 部分分別按**基本**、**中階**和**進階規則**排序。 - 您可以根據用例和相關性遵循任何層級的規則，無論如何，建議遵循**中間規則**層級的約定。 - 以下內容根據參考部分提供的資源進行改編和組織。 --- 分支命名約定 ------ ### 基本 1. **描述性名稱**：一個命名良好的分支可以為其目的提供直接的上下文。選擇清晰的名稱，而不是通用名稱。 例如： `feature/login` 、 `bugfix/navbar-overflow` 2. **使用連字號**：使用連字號分隔分支名稱中的單字（或短橫線），這確保了可讀性。 例如， `bugfix/fix-login-issue`比`bugfix/fixLoginIssue`或`bugfix/fix_login_issue`更具可讀性。 3. **小寫字母數字字元**：僅使用小寫字母數字字元（az、0–9）和連字號。盡可能避免標點符號、空格、底線或任何特殊字元。 4. **避免不必要的連字符**：避免不必要的連字符，例如後續或尾隨的連字符。 例如， `feat/new--login-`是一種不好的做法。 5. **簡短有效**：保持分支名稱簡單。在描述性的同時，它們也應該足夠簡潔，以便一目了然地傳達目標。 ### 前綴或類型 - 為分支加入前綴有助於根據其用途來組織它們。這不僅提高了清晰度，還有助於自動化工作流程。 - 一些常見的分支類型前綴及其用例包括： - `feature/` ：用於開發新功能， - `bugfix/` ：修復程式碼中的錯誤。通常是與某個問題相關的。 - `hotfix/` ：修復生產中的關鍵錯誤。 - `release/` ：準備新版本，通常用於執行最後修改和修訂等任務。 - `docs/` ：用於撰寫、修改或修正文件。 - 例如， `feature/new-feature`或`release/version-1.0.0` 。 ### 包括票號 如果您的專案使用 Jira 等問題追蹤系統，或者它根據 github 問題或其他類似工具進行修改。在分支名稱中包含問題的令牌將使追蹤變得簡單。範例： `feature/PROJ-123-footer-links` --- 提交訊息約定 ------ - 提交訊息的最終格式： ``` <type>([optional scope]): <description> # subject [optional body] [optional footer(s)] ``` ### 資訊主題 - **命令式**：以命令式建立提交訊息。以動詞開頭來指示提交的作用。 例如：使用`fix: Fix bug #67`比`fix: Fixed bug #67` - **簡短總結**：嘗試將主題行控制在 50 個字元以內，以確保訊息在各種 Git 工具中可讀，例如使用`git log --oneline`時。避免尾隨句點和不必要的單字/符號。 - **將描述大寫**：這聽起來很簡單。主題行以大寫字母開頭。 ### 類型和訊息正文 - 主題行中的`type`前綴可用於表示提交中包含的變更的類型。一些常用的類型是： - `feat:` ：總結程式碼庫中的新功能。 - `fix:` ：修復程式碼庫。 - `build:` 、 `chore:` 、 `ci:` 、 `style:` 、 `refactor:`是其他一些例子。 - 可以將`scope`加入到提交的類型中以提供額外的上下文訊息，並將其括在括號中，例如`feat(parser): Add the ability to parse arrays` - 可以將`body`新增至訊息中，以在提交中包含詳細說明。 - 在主題行後面留空行來加入正文。 - 將正文包裹在 72 個字元處，即。使用多行正文，每行不超過 72 個字元。 頁腳和擴充訊息正文 --------- - `footer`用於傳達有關提交的附加訊息，例如審查者、批准者等。例如： - `Signed-off-by: Alice <[email protected]>` - **重大變更**： `BREAKING CHANGE`是指程式碼庫中相當重要的重大變更。可以透過加`!`來表示。在類型/範圍之後和/或透過將其加入到`body`或作為`footer` ``` chore!: drop support for Node 6 BREAKING CHANGE: use JavaScript features not available in Node 6. ``` - **多段落正文**：在某些情況下，多個段落有助於更詳細地解釋提交的目標。範例：描述提交更改的內容、原因以及方式。 #### 例子 可以[在此處](https://www.conventionalcommits.org/en/v1.0.0/#examples)找到提交訊息的各種用例範例。 結論 -- 遵守 Git 約定類似於說通用語言。然而，很明顯，這些標準或約定並沒有被任何系統強制執行；因此，這些標準的調整和擴展使用完全取決於我們。 養成這些習慣肯定會改善您的 Git 體驗並鼓勵協作編碼環境。儘管我們不能一下子就遵循這些，但逐漸適應它們無疑會有所不同。 我計劃寫一篇關於**使用 Husky 實現 Git 約定的文章**，透過反應和評論來表達您的支持。快樂編碼！ 參考 -- - [Git 分支的命名約定 — 備忘單，作者：Abhay Amin](https://medium.com/@abhay.pixolo/naming-conventions-for-git-branches-a-cheatsheet-8549feca2534) - [常規提交](https://www.conventionalcommits.org/en/v1.0.0) - [Git 約定](https://se-education.org/guides/conventions/git.html) - [如何透過 CBEAMS 撰寫 Git 提交訊息](https://cbea.ms/git-commit) - [Git 預告片](https://git-scm.com/docs/git-interpret-trailers) --- 原文出處：https://dev.to/shinjithdev/git-good-best-practices-for-branch-naming-and-commit-messages-oj4

0個讚   0留言 156瀏覽

css 表格樣式指南

我最近注意到一個小悖論：很多年前——在 CSS 網格出現之前——我們使用`<table>`來模擬網格佈局。現在我們*有了*網格佈局，我們用它們來模擬表格！這是錯誤的。表格用於**表格**資料；在一堆`<div>`中呈現表格資料是沒有意義的。 造成這種弊端的原因可能是因為表格的樣式可能**有點**棘手，而且大多數 CSS 框架使用`border-collapse: collapse`作為預設的表格樣式。正如我們將在本教程中看到的，折疊邊框對於表格樣式並不總是有用。 讓我們研究一下`<table>`的元素，然後了解如何建立它們並設定它們的樣式。 元素 -- 除了`<table>`元素本身之外，您只需要這 3 個標籤來建立基本表格： |標籤 |描述 | | ---- | ---| | `td` |表資料單元 | | `th` |表格標題儲存格 | | `tr` |表行| *例子：* ``` <table> <tr><th>Header</th></tr> <tr><td>Content</td></tr> </table> ``` 但是，為了更好地構造表，我們可以將行封裝在： |標籤 |描述 | | -------- | ---| | `thead` |表頭 | | `tbody` |桌體| | `tfoot` |表頁腳| 最後，我們可以在表格中新增`<caption>` ，並在`<colgroup>`內的`<col>`標籤中定義列。 *例子：* ``` <table> <caption>Super Heroes</caption> <colgroup><col><col><col><col></colgroup> <thead> <tr><th>First Name</th><th>Last Name</th><th>Known As</th><th>Place</th></tr> </thead> <tbody> <tr><td>Bruce</td><td>Wayne</td><td>Batman</td><td>Gotham City</td></tr> <tr><td>Clark</td><td>Kent</td><td>Superman</td><td>Metropolis</td></tr> <tr><td>Tony</td><td>Stark</td><td>Iron Man</td><td>Malibu</td></tr> <tr><td>Peter</td><td>Parker</td><td>Spider-Man</td><td>New York City</td></tr> <tr><td>Matt</td><td>Murdock</td><td>Daredevil</td><td>New York City</td></tr> </tbody> </table> ``` 如果沒有任何樣式，您的瀏覽器將呈現以下內容： ![基本表格瀏覽器樣式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iq375md00ma4g8bikaqj.png) 預設的用戶代理樣式是： ``` table { border-collapse: separate; text-indent: initial; border-spacing: 2px; } ``` 現在，如果我們加入一個超級簡單的規則： ``` :is(td,th) { border-style: solid; } ``` 我們得到： ![實心邊框基本表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9o8sa2igklyxz78ec2ij.png) 注意單獨的邊框。看起來不太好看... 因此，為了了解折疊邊框的流行（以及更好的字體！），如果我們簡單地加入： ``` table { border-collapse: collapse; font-family: system-ui; } ``` ……我們得到： ![border-collapse 設定為折疊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/beia4yujksm8c5945o7s.png) 如果我們然後將`padding: .5ch 1ch`加入我們的`:is(td,th)`選擇器並將`margin-block: 1rlh`加入`<caption>` ，我們會得到： ![基本表格樣式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tai5jys59g9q0sg3t5w.png) 回顧一下，我們**需要**得到上述樣式的是： ``` table { border-collapse: collapse; font-family: system-ui; & caption { margin-block: 1rlh; } &:is(td, th) { border-style: solid; padding: .5ch 1ch; } } ``` 若要將`<caption>`放置在表格*下方*，請使用： ``` table { caption-side: bottom; } ``` --- 斑馬條紋 ---- 要為**columns**加入奇數/偶數斑馬條紋，我們可以簡單地設定`<col>`標籤的樣式： ``` col:nth-of-type(even) { background: #F2F2F2; } ``` ![斑馬山口](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlnajfbyvxsgzlgbntge.png) 對於行，它是類似的： ``` tr:nth-of-type(odd) { background: #F2F2F2; } ``` ![斑馬行](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p47mwf3x6dp8n5qit72d.png) --- 圓角 -- 圓角有點棘手。您不能只將`border-radius`新增至`<table>` ，因此我們必須定位**第一行**和**最後**一行的**第**一個和**最後**一個儲存格： ``` th { &:first-of-type { border-start-start-radius: .5em } &:last-of-type { border-start-end-radius: .5em } } tr { &:last-of-type { & td { &:first-of-type { border-end-start-radius: .5em } &:last-of-type { border-end-end-radius: .5em } } } } ``` ……但仍然沒有發生任何事情！那是因為： > 如果您的表格有折疊邊框，則**無法**新增`border-radius` 。 因此，我們必須使用**單獨的**邊框，並*模仿*折疊的邊框： ``` table { border-spacing: 0; } :is(td, th) { border-block-width: 1px 0; border-inline-width: 1px 0; &:last-of-type { border-inline-end-width: 1px } } ``` **現在**我們有了圓角： ![圓角](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/172o5rqyidiqisopyrx6.png) --- 拆分列 --- 讓我們*保留*單獨的列，並使用`border-spacing`屬性在列之間新增間隙： ``` table { border-spacing: 2ch 0; & :is(td, th) { border-inline-width: 1px; } } ``` ![拆分列](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uplqw0uurk0yk7ot2k1k.png) 我們甚至可以加入`border-radius` ： ![邊界半徑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldecau6tm4elj68hz7id.png) 這仍然只是一個`<table>` ，但如果用作“比較表”，則更具可讀性。 --- 分割行 --- 對於分割行，我們只需要更新`border-spacing`屬性的第二部分（y 軸）： ``` table { border-spacing: 0 2ch; & :is(td, th) { border-block-width: 1px; } } ``` ![分割行](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q118cu966qesqqyir6gc.png) --- 懸停和焦點 ----- 對於大桌子，準確了解您所在的*位置*非常重要。為此，我們需要`:hover` ，並且 - 如果您使用的是鍵盤可導航的表格 - `:focus-visble` -styles。 在此範例中，懸停樣式會套用於`<col>` 、 `<tr>`和`<td>` ： ![表格懸停範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy9wrlzfvt5us63ip8ae.png) 懸停行和單元格很簡單： ``` td:hover { background: #666666; } tr:hover { background: #E6E6E6; } ``` 將滑鼠懸停在`<col>`上有點複雜。 您可以新增一條規則： ``` col:hover { background: #E6E6E6; } ``` ...但這不起作用。奇怪的是，如果您在開發工具中選擇一個 col-element 並為其啟用`:hover` ，它會起作用 - 但在 IRL 中不起作用。 相反，我們需要使用`:has`捕獲單元格的懸停，*然後*設定`<col>`元素的樣式： ``` table { &:has(:is(td,th):nth-child(1):hover col:nth-child(1) { background: #E6E6E6; } ``` 發生什麼事了？ 讓我們來分解一下： 如果我們的表格**有**一個`<td>`*或*`<th>` ，它是`nth-child(1)`並且當前*懸停*，**則**選擇具有**相同**`nth-child`選擇器的`<col>` ，並設定它的`background` 。 唷！ ……**並且**您需要為每一列重複此程式碼： `nth-child(2)` 、 `nth-child(3)`等。 --- 概要 -- 在懸停時顯示輪廓也很簡單，單元格和行也是如此。您需要從偏移量中*扣除*寬度： ``` :is(td, th, tr):hover { outline: 2px solid #666; outline-offset: -2px; } ``` ![表格懸停：輪廓](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4ump8dctc5q6yrpdqif.png) ### 列輪廓 概述一列*非常*棘手，但看起來不錯： ![表格懸停：大綱列](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8om2x4gtsizjl7bwj30.png) 如果單元格的`border-width`為`1px` ，您可以在懸停時將`<col>`的`border-width`設為`2px` ，但隨後整個表格會發生變化。 Álvaro Montoro 建議在`<col>`上使用背景漸變來模擬邊框，如果表格單元格是透明的，效果很好。 為了使其與`border-radius`一起工作並保留單元格可能具有的任何背景，我最終為每個單元格使用了一個偽元素： ``` :is(td,th) { position: relative; &::after { border-inline: 2px solid transparent; border-radius: inherit; content: ''; inset: -2px 0 0 0; position: absolute; } } tr:first-of-type th::after { border-block-start: 2px solid transparent; } tr:last-of-type td::after { border-block-end: 2px solid transparent; } ``` ……然後，與我們對 col-hover 所做的類似，在懸停時將所有單元格定位為具有相同的“col-index”： ``` :has(:is(td,th):nth-child(1):hover :is(td,th):nth-child(1) { border-color: #666; } ``` 對所有列重複此操作。 --- 對齊文字 ---- 在舊規範中，您可以為`<col>`元素新增`align`屬性。那不再起作用了。 範例：您想要將第二列中的文字置中並右對齊第四列中的文字： ![表：對齊文字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/659ffi0cieppfs3p9xvf.png) 我們可以在表本身中新增*每*列的資料屬性，而不是在每個單元格中新增一個類別： ``` <table data-c2="center" data-c4="end"> ``` 然後，在 CSS 中： ``` [data-c2~="center"] tr > *:nth-of-type(2) { text-align: center; } [data-c4~="end"] tr > *:nth-of-type(4) { text-align: end; } ``` 對所有列重複此操作。 --- 結論 -- 表格樣式指南到此結束。 我沒有介紹`colspan` 、 `rowspan` 、 `scope`和`span` 。如果您想更深入地了解這些內容，我建議您閱讀[有關表的 MDN 頁面](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)。 示範 -- 我在這裡製作了一個包含大量演示的 CodePen： https://codepen.io/stoumann/pen/RwdVxJM --- 原文出處：https://dev.to/madsstoumann/a-guide-to-styling-tables-28d2

0個讚   0留言 176瀏覽

下一個專案來玩玩看吧：10 個有趣 API

在程式設計社群中，從事業餘專案的想法被許多人拋棄。坐在空白的程式碼編輯器前思考要建立什麼可能會令人生畏。許多部落格文章都建議建立計算器、待辦事項清單和社交媒體克隆等應用程式。雖然這些肯定對學習技術堆疊有幫助，但讓我們面對現實吧——這世界不需要更多的計算器或待辦事項清單應用程式。相反，我們可以圍繞面向公眾的 REST API 建立新的、有趣的應用程式。 > 這是我經營的部落格[Imago Dev](https://imago.dev)的交叉貼文。 ### 什麼是 REST API？ 可表示狀態傳輸 (REST) 應用程式介面 (API) 提供了一組方法，程式設計師可以使用這些方法透過 HTTP 發送和接收資料。由於這些方法是透過 HTTP 實現的，因此任何程式語言都可用於使用 REST API。 幾乎所有可以想像的不同領域都有數以千計的 REST API 可用。天氣或股票市場等常用公共資料有數十個 API 可供使用。許多流行的網路平台，例如 Facebook 和 Twitter，也向開發人員提供 API。有些專有 API 對呼叫次數有限制。許多需要註冊並接收私有 API 金鑰。最安全的 API 需要設定 OAuth 以便使用者安全登入。 您可以[在此 Github 上](https://github.com/public-apis/public-apis)找到大量公共 api 列表，並在[RapidAPI](https://rapidapi.com)上找到更豐富的列表。 ### 10 個有趣的公共 REST API 這個清單當然並沒有詳盡地列出很酷的 REST API，而只是一些我認為特別簡潔且值得進行一些副專案的 API。所有這些都是完全免費的，除了獲取 API 金鑰之外不需要任何其他東西 - 無需弄清楚如何處理 OAuth 或為其使用付費。 1. [PokeAPI](https://pokeapi.co)有史以來最大的媒體特許經營商現在可以輕鬆獲得 800 多個 Pokemon 的資料。 2. [NASA API](https://api.nasa.gov/index.html)空間，最後的前沿。取得有關小行星、星係等的資料。 3. [Open Food Facts](https://world.openfoodfacts.org/data)來自世界各地的大量食品資料。 4. [TransLoc OpenAPI](https://rapidapi.com/transloc/api/openapi-1-2)取得城市和大學校園公共交通的即時資料。 5. [Urban Dictionary API](https://rapidapi.com/community/api/urban-dictionary)人們想出的俚語真是令人驚訝。 6. [Merriam-Webster Dictionary API](https://dictionaryapi.com)適合需要真實單字定義和同義詞的人。 7. [Numbers API](http://numbersapi.com)有關數字的有趣事實和瑣事。 8. [WeatherBit API](https://www.weatherbit.io/api)當前和歷史天氣資料。 9. [美國政府資料 API](https://www.data.gov/developers/apis)一個相當大的包羅萬象的美國農業、健康和公共安全等數十個資料樣本。 10. [Bible API](https://scripture.api.bible)有史以來最暢銷的書。有史以來最偉大的故事。 ### 如何處理它們 所有這些公共 API 都很棒，但是擁有一系列有趣的資料來源並不能本質上幫助解決確定新專案要做什麼的初始問題。 最好的起點是簡單地獲取和顯示資料。也許這正在顯示當天的神奇寶貝或鍵入的單字的定義。對於更具創意的類型，請嘗試獲取資料片段並將其映射到視覺元素，例如溫度到顏色或根據公車移動繪製線條。 最困難的部分就是開始。一旦您克服了獲取和顯示資訊的最初障礙，我相信您會為您的專案想到很多後續步驟！ --- 原文出處：https://dev.to/camerenisonfire/10-intriguing-public-rest-apis-for-your-next-project-2gbd

0個讚   0留言 211瀏覽

如何刪除所有本機分支但保留 master

我發現自己經常搜尋這個 git 單行指令，所以我想我應該把它放在這裡以幫助未來的搜尋者： ``` git branch | grep -v "master" | xargs git branch -D ``` Happy Coding ❤️ --- 原文出處：https://dev.to/ben/how-to-delete-all-your-local-branches-but-keep-master-lb1

0個讚   0留言 142瀏覽

C/C++ 中的雙指標

新 C 程式設計師的困惑來源之一是指標。乍一看，使用它們似乎沒有多大用處。但是，理解指標至關重要，因為它是一個有用的工具，任何比「Hello, World」程式更大的專案都會有指標。一旦初學者開始掌握指針的概念和適用性，另一波恐怖浪潮就會深入他們的內心：雙指針。 在繼續之前，讓我們回顧一下指標是什麼。 在 C 和其他語言（如 C++）中，指標是保存物件記憶體位址的東西。它們是一個數值，當輸出到控制台時，它們通常以十六進位顯示。這意味著，本質上，指針只是奇特的整數。 現在回到雙指針。 當初學者看到雙指針時，就會開始不舒服地移動，汗水從額頭一直流到下巴。就像生活中其他一切新鮮或陌生的事物一樣，人們一想到要面對以前從未遇到過的事物，就會感到尷尬和不安，即使只是輕微的。但隨著你了解的越多，你開始對自己對想要征服的任何事物的新理解充滿信心。雙指針也是如此。 那麼，什麼是雙指針呢？那麼，如果常規指標要引用記憶體中的物件，那麼雙指標就是指向另一個指標的變數，而另一個指標又指向記憶體中的物件。 例子： ``` #include <stdio.h> int main(void) { int value = 100; int *value_ptr = &value; int **value_double_ptr = &value_ptr; printf("Value: %d\n", value); printf("Pointer to value: %d\n", *value_ptr); printf("Double pointer to value: %d\n", **value_double_ptr); } ``` 輸出： ``` ~/Desktop ➜ clang main.c ~/Desktop ➜ ./a.out Value: 100 Pointer to value: 100 Doublue pointer to value: 100 ~/Desktop ➜ ``` 當取消引用雙指標時，我們不會得到最終物件，而是得到預期的結果：必須再次取消引用才能檢索最終值的指標。它類似於下面的程式碼。 ``` int *ptr = *value_double_ptr; int final_value = *ptr; ``` 現在我確信大多數剛接觸雙指標的人一定會問自己這樣的問題：「我將在哪裡使用它？」。也許展示雙指標有用性的最佳方法是記住常規指標的實際用途之一。這就是說，常規指標可以用作函數中的輸出參數。如果您不知道的話，輸出參數是一個填充結果的參數。為什麼要使用輸出參數取決於幾個因素，並且超出了本文的範圍，但我覺得這就是可以利用雙指標的地方。 我們將要了解的一個函數是 POSIX `getline()`函數。其目的是從文件中讀取一行。當讀取該行時，人們可能會懷疑它被返回，但是，情況並非如此，因為返回值用於不同的用途。相反，第一個參數採用雙指針，填入包含該行的緩衝區。 為什麼需要雙指針？因此，它可以分配足夠的記憶體來保存整行加上空終止符。如果記憶體分配和讀取一行成功，則提供的指標將被修改為指向新的且已填入的緩衝區。只有使用雙指針，他們才能實現這一目標。 將任何內容傳遞給函數時，傳遞的是副本而不是實際物件。指針也是如此。如果我們傳遞一個常規指針，我們只能修改該指針指向的內容。如果我們更改指標本身，則更改不會反映在函數外部，因為它是副本。 如果我們想要改變指標指向的位置，我們必須新增另一個間接定址並採用雙指標。 使用`getline()`的範例如下。 ``` #include <stdio.h> int main(void) { FILE *file = fopen("test", "r"); char *line = 0; int line_length = 0; getline(&line, &line_length, file); printf("%s\n", line); printf("Line length: %d\n", line_length); } ``` `getline()`有兩個輸出參數：一個用於緩衝區，另一個用於讀入的行的長度。 概括 -- 雙指針對許多初學者來說是一個挑戰。當您對雙指標的概念越來越熟悉並在自己的程式碼中必要時使用它們時，您開始認為曾經害怕雙指標是多麼愚蠢。 現在我將帶著你的新知識送你走！ --- 原文出處：https://dev.to/noah11012/double-pointers-in-cc-2n96

0個讚   0留言 213瀏覽

【限時免費】過年沒事，來寫 JavaScript 作業吧！總共 63 個小專案，可以寫到爆！

過年快到了！相信很多人會趁著過年的空檔，用力自學、進修、變強！ 站長來給大家發放一些練習包！ 即日起～2/24（元宵節），共三週，免費開放全站所有付費內容！ 大量練習包在此 -> https://codelove.tw/courses/frontend-beginner 大家可以在這段時間，挑一些有興趣的章節、自學包，寫一寫作業練習、加強觀念！ 祝大家春節愉快、Happy Coding！

5個讚   1留言 1,103瀏覽

站長推一個新的教練服務：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留言 175瀏覽

專屬雲端的程式語言

> 面向雲程式設計的宣言。 別誤會我的意思，我喜歡雲！它使我能夠建立令人驚嘆的東西，並徹底改變了我使用軟體創新和解決問題的方式。 它是「*新電腦*」、終極電腦、「*無電腦電腦*」。它可以彈性擴展，永遠在線，無處不在，可以做任何事情。這是無邊無際的。它肯定會留在這裡。 但天哪，這絕對不是我們在未來十年內建立雲端應用程式的方式。隨著雲端從“我不想讓伺服器放在我的辦公桌下”發展到“我的應用程式需要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瀏覽

關於 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瀏覽

📈 RAG 檢索增強生成：5 個適合初學者的開源程式庫 🚀

#RAG簡介 作為開發人員，您今天可以學到的最有價值的技能之一是學習如何使用大型語言模型 (LLM) 建立檢索增強生成 (RAG) 應用程式。 ## 為什麼？ 因為世界上有超過 64 ZB 的資料，這甚至不包括書籍或實體文件等實體資料。 （供您參考，1澤字節是一兆千兆位元組。） 不僅如此，全球90%的資料都是在過去兩年建立的，而且資料量每兩年就會翻倍。基本上，公司都在海量的資料中游泳，而且這些資料每天都在變得越來越大。 公司將如何存取和使用所有這些資料？ 現在每個人都聽說過使用檢索增強生成（RAG）來透過人工智慧尋找資訊。能夠存取和使用不斷增長的資料量是每個公司都需要的關鍵技能。 即使您知道 RAG 基本上是描述將文件或知識連結到 LLM 的工作流程的簡寫方式，許多開發人員自己（還）還沒有嘗試或試驗過這一點。 網路上充滿了圖書館列表，但如何開始呢？ 以下是幫助您開始使用 RAG 的最佳庫的簡短清單。 --- # 1. [LLMWare](https://github.com/llmware-ai/llmware) 在LLMWare中，您可以上傳文件，並透過幾行程式碼開始檢索資訊。它處理 RAG 所需的整個過程：文件攝取、解析、分塊、索引、嵌入、儲存到向量資料庫以及連結到 LLM 以檢索答案。 LLMWare 被設計為整合和端到端，因此所有這些步驟都可以開箱即用。它組裝了所有部件，因此您無需這樣做。 LLMWare 使其非常簡單且易於上手： - 只需幾行程式碼即可透過端到端範例實現 RAG 工作流程 - 建立庫並無縫載入文件 - 輕鬆產生嵌入 - 輕鬆進行語意搜尋 - 利用任何 Hugging Face 模型或 GPT-4 等封閉源模型來回答資料中的問題 - 範例包括無需 GPU 的 RAG 模型 https://github.com/llmware-ai/llmware ![LLMWARE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy22hfga9az7uol150ar.png) --- # 2. [MongoDB](https://github.com/mongodb/mongo) MongoDB 是一種廣泛使用的開源 NoSQL 資料庫程式。它屬於以文件為導向的資料庫類別，這意味著它以類似於 JSON 文件的格式儲存和組織資料。 MongoDB 的設計具有靈活性和可擴展性，使其適合各種應用程式和行業。 資料庫（如 MongoDB）是 RAG 中非常重要的一步，因為它們在嵌入之前儲存從文件或知識庫中提取的訊息，包括重要的元資料。 https://github.com/mongodb/mongo ![MongodbVector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ii6vl3tu41gfo6v3zt5g.png) --- # 3. [Milvus 向量資料庫](https://github.com/milvus-io/milvus) Milvus 是一個開源向量資料庫，旨在為嵌入相似性搜尋和人工智慧應用程式提供支援。 Milvus 讓非結構化資料搜尋更容易存取，無論部署環境如何，都可以提供一致的使用者體驗。 Milvus DB，或類似的向量 DB，是 RAG 中至關重要的一步。它是存儲向量嵌入以進行相似性搜尋的地方。該資料庫允許人們用自然語言提出問題並檢索相關結果。如果沒有良好的嵌入和向量資料庫，LLM 模型將無法接收正確的文字區塊來讀取。 https://github.com/milvus-io/milvus ![Milvus DB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5t6jyfaidyfvxwd8nb7.png) --- # 4. [擁抱臉](https://github.com/huggingface) 如果你還沒去過 Hugging Face，你真的應該去看看。這是所有開源模型的去處，並且可以單槍匹馬地將世界從人工智慧壟斷中拯救出來。就像 Github 用於開源專案一樣，Hugging Face 用於開源模型。有超過 450,000 個模型，所有模型都免費供任何想要使用它們的人使用。 Hugging Face 的 Transformers 庫是首選庫 提供數千個預訓練模型來執行不同模式（例如文字、視覺和音訊）的任務。 這些模型可應用於： - 文本，用於文本分類、資訊提取、問答、摘要、翻譯和文本生成等任務，支援 100 多種語言。 - 影像，用於影像分類、物件偵測和分割等任務。 - 音頻，用於語音辨識和音頻分類等任務。 Transformer 模型還可以組合執行多種模式的任務，例如表格問答、光學字元辨識、從掃描文件中提取資訊、視訊分類和視覺問答。 https://github.com/huggingface ![擁抱臉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn47bs3bd97eu4gulkzb.png) --- #5. [Llama.cpp](https://github.com/ggerganov/llama.cpp) 沒有GPU？沒問題！ Llama.cpp 來救援！ llama.cpp 的主要目標是在 MacBook 上使用 4 位元整數化來執行 LLaMA 模型。 * 無依賴的純 C/C++ 實現 * Apple Silicon 一等公民 - 透過 ARM NEON、Accelerate 和 Metal 框架進行最佳化 * 對 x86 架構的 AVX、AVX2 和 AVX512 支持 * 混合F16/F32精度 * 支援2位、3位、4位、5位、6位和8位整數化 * CUDA、Metal 和 OpenCL GPU 後端支持 一旦量化，更大的模型就可以在 CPU 上執行，而效能損失很小。尋找 GGUF 版本的模型來嘗試使用 LLMWare 或其他 RAG 工作流程。 https://github.com/ggerganov/llama.cpp ![Llama.cpp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vev1gzen7oolvnug4vfl.png) --- 這是幫助您開始使用 RAG 的非常基本的概述。如果您想要一個讓所有這些庫無縫協作的一站式整合解決方案，請造訪 LLMWare 的 GitHub 庫，找到 50 多個優秀範例來幫助您入門。 [在不和諧中找到我們](https://discord.gg/fCztJQeV7J) - 我們很樂意聽到您的來信！ --- 原文出處：https://dev.to/llmware/top-5-beginner-friendly-open-source-libraries-for-rag-1mhb

0個讚   0留言 535瀏覽

SQL 查詢優化 23 倍！！！

所以我現在已經進入 Web 開發大約 3 年了，專業也有一年多了，這是我處理一個與資料庫查詢最佳化相關的問題的時候，我不是 SQL 專家，我可以得到這份工作完成。沒有花哨的查詢、觸發器、預存程序等。無論如何，我不得不穀歌搜尋最後一個。 長話短說..我們的 ORM (TypeORM) 把我們搞砸了.. ## 免責聲明： 這並不是要誹謗 TypeORM 或任何 ORM。它們是為其建置目的而設計的特殊工具。我在最後附加了一些參考連結，這些連結是人們面臨類似問題的公開討論。無論如何，讓我們繼續這篇文章。 ## 問題！ 我們的提交表有超過 70 萬筆記錄，表現非常糟糕。從表中取得資料的最長時間超過 6 秒。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5dqlrbtn491upu8lwxs.png) 查詢相當簡單。我們所擁有的只是 4 個連接、幾個 where 子句（大約 4 個）、排序（在created_at time 字段上的 DESC）、限制和跳過。 ## 根本原因分析.. 導致我們的提交表大幅放緩的幾個因素如下：- - **索引** - 對用於連接表的欄位進行不正確的索引或未進行索引。 - **不必要的連接** - 我們的查詢中有一些不必要的連接，可以將其刪除以獲得更多效能。 - **空字串錯誤** - 我們程式碼中的一個錯誤，如果沒有為這些列提供使用者輸入，我們將與作為查詢的 where 條件一部分的所有列的空字串 (“”) 進行比較。 - **ORM** - ORM 正在執行一個超級愚蠢的查詢來獲取資料。 這些是我在檢查程式碼和資料庫模式以及分析正在執行以獲取所需資料的查詢時發現的精確點。 ## 對提到的每個問題進行分析和測試。 ###<u>原因 1：索引</u> 在進行了一些谷歌搜尋並閱讀了人們的類似問題後，我發現我們的問題並不是那麼大。人們正在為數百萬行而苦苦掙扎，而我們的只是其中的一小部分，所以一定是我們做錯了什麼。 早期解決這些問題的社區提出了許多建議。我發現進行適當的索引會有很大幫助。 因此，為了進行測試，我從 beta 資料庫中獲取了提交內容，該資料庫擁有大約超過 **100k 記錄**。 在沒有任何最佳化的情況下，執行整個過程平均需要 **2.3 秒**。 （當然，這個時間不僅包括在資料庫上執行查詢的時間，還包括透過網路傳播資料的時間） ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mgewrjv4khpzrst86nb.png) 在向列加入索引後，我確實發現它縮短了幾毫秒的時間，但這還不夠。它仍然在 **2 秒** 左右，而且往往不止於此。 所以有點令人失望！無論如何，繼續下一個目標。 ### <u>原因 2：空字串錯誤</u> 因此，我們的時間從 **2.3** 秒縮短到了大約 2 秒，這對於索引來說並不算多。但後來我在我們的程式碼中發現了一個小錯誤，假設有四個輸入欄位供使用者根據四個不同的列鍵入和過濾結果。如果使用者沒有在任何輸入上鍵入任何內容（主要是在頁面首次載入時），且 API 呼叫會直接取得最新資料，而不進行任何過濾，僅進行連接和排序。 因此，在那一刻，我們為資料庫中的所有列傳遞了“”字串，這似乎無害，但實際上發生的情況是，資料庫正在對所有四列進行查找，您猜對了“”字串。所以進行了大量的查找，實際上什麼都沒有。 因此，當我將其更改為空（如empty/null）時（相當於從查詢中刪除where子句），查詢時間從**2.3秒變為1.3秒**。 如果您想知道使用使用者提供的實際輸入進行過濾需要多長時間。大約**500ms**（這是可以接受的）。 結論 - 即使您的資料庫使用所有可搜尋列進行索引，“”字串也不能很好地發揮作用。 好的，我們正朝著正確的方向前進。我們整整縮短了 1 秒，但我們仍然必須將其控制在 **200/150ms** 以下，所以還有很長的路要走。 ### <u>原因 3：不必要的連接</u> 在查詢提交時，我們正在與不需要的比賽和課程表進行連接。因此，當所有內容都加入到程式碼中時，我們只是刪除了它，但這表明審閱者並沒有給予太多關注（我是其中之一）。 ### <u>原因 4：ORM</u> 這是造成最多的問題.. 好.. 問題!!. 所以有一種叫做 **主動記錄模式** 的東西，TypeORM 為我們提供了使用類似 JSON 的物件產生 SQL 查詢的東西，一個例子就是。 ``` model.find({ select: { userName : true, firstName : true }, where: { userName : “SomeUsername” }, relations: { user : true, contest: true, problem: true }, order: { created_at : “ASC/DESC” , skip: 0, take: 10, }) ``` 因此，這使得開發變得快速、簡單，對於不擅長編寫原始 SQL 查詢的開發人員來說，感覺非常直觀，因為這是最抽象的版本，您實際上是在建立 JSON 物件來產生 SQL 查詢。 這種方法看起來不錯，而且大多數時候都有效，但在我們的例子中，它做了一些非常愚蠢的事情，我不會輸入它在做什麼，這樣你就可以自己看到查詢。 簡而言之，它正在執行兩個查詢，首先對於這種情況根本不需要，它可以通過我稍後編寫並測試的一個簡單的單個查詢輕鬆完成。 它不僅執行兩個單獨的查詢（原因尚不清楚，因為這是一個已知問題，有時在使用typeorm 的活動記錄模式時發生），它還將四個表連接兩次，每個查詢一次，然後還排序兩次各一次。 （這實際上沒有任何意義） 這也是表演受到最大打擊的地方。自己看看下面的查詢。 ``` SELECT DISTINCT `distinctAlias`.`Submission_id` AS `ids_Submission_id`, `distinctAlias`.`Submission_created_at` FROM (SELECT `Submission`.`id` AS `Submission_id`, ... more selects FROM `submission` `Submission` LEFT JOIN `problem` `SubmissionSubmission_problem` ON `SubmissionSubmission_problem`.`id`=`Submission`.`problemId`  LEFT JOIN `user` `SubmissionSubmission_user` ON `Submission_Submission_user`.`id`=`Submission`.`userId`) `distinctAlias` ORDER BY `distinctAlias`.`Submission_created_at` DESC, `Submission_id` ASC LIMIT 10 ``` ``` SELECT `Submission`.`id` AS `Submission_id`, `Submission`.`language` AS `Submission_language`, `Submission`.`verdictCode` AS `Submission_verdictCode`, `Submission`.`tokens` ... shit ton of selects FROM `submission` `Submission` LEFT JOIN `problem` `SubmissionSubmission_problem` ON `SubmissionSubmission_problem`.`id`=`Submission`.`problemId`  LEFT JOIN `user` `SubmissionSubmission_user` ON `Submission_Submission_user`.`id`=`Submission`.`userId` WHERE `Submission`.`id` IN (?, ?, ?, ?, ?, ?, ?, ?, ?, ?) ORDER BY `Submission`.`created_at` DESC ``` 所以這兩個查詢是問題的主要原因，也是主要原因之一。 因此，我編寫了一個簡單的原始 SQL 查詢來執行與它嘗試使用 2 個單獨的查詢執行的完全相同的操作，查詢如下：- ``` SELECT   Submission.id,   Submission.language,   Submission.verdictCode, ... FROM   submission AS Submission   LEFT JOIN problem ...   LEFT JOIN user ... ORDER BY   Submission.created_at DESC LIMIT 10 ``` 當我們執行這個查詢時，它的執行時間僅為 **100ms!!!** 因此，我們現在從 **1.3** 秒移至 **100ms**，總體從 **2.3** 秒移至 **100ms** 效能提升超過 **23 倍。** 之後我就去睡覺了。仍然需要做更多的測試，並嘗試找出邊緣情況（如果有），並提出為此編寫查詢的最佳方法。目前，我正在考慮使用 TypeORM 提供的儲存庫模式或查詢建構器模式。 第二天： 又來了.. ### <u>全文索引</u> **全文索引**可以提高從這些索引列中搜尋單字和短語的效率，我們也可以嘗試一下。 （這是我的同事 Jay 提出的一個非常好的觀點，它進一步提高了表現）。 ###<u>發現了一些更重要的點。</u> 在 MySQL 中最佳化具有唯一索引的資料列上的「LIKE」查詢時，可以採用一些策略來提高效能。以下是一些建議： 1. **索引優化：** - **使用全文索引：** 如果您的「LIKE」查詢涉及在列中搜尋單字或片語，請考慮使用全文索引而不是常規唯一索引。全文索引是專門為基於文字的搜尋而設計的，可以提供更快、更準確的結果。 - **使用排序規則：** 確保列的排序規則不區分大小寫和重音。這可以透過使用「utf8_general_ci」或「utf8mb4_general_ci」等排序規則來實現。它允許更有效地利用索引，因為搜尋變得不區分大小寫和重音。 2. **查詢最佳化：** - **前綴搜尋：**如果您的`LIKE`查詢在末尾使用通配符（例如，`column LIKE 'prefix%'`），索引仍然可以有效地使用。但是，如果通配符位於開頭（例如“column LIKE '%suffix'”），則不會使用索引。在這種情況下，請考慮使用替代技術，例如全文搜尋或儲存列的反向值以實現高效的後綴搜尋。 - **最小化通配符：** 模式開頭的通配符（`'%suffix'`）會使查詢速度明顯變慢。如果可能，請嘗試建立查詢，使通配符僅出現在模式的末尾（「前綴%」）。 - **參數綁定：** 如果您從應用程式內執行「LIKE」查詢，請使用參數綁定或準備好的語句，而不是直接連接查詢字串。這有助於防止SQL注入並允許資料庫更有效地快取執行計劃。 3. **快取和查詢結果：** - **快取查詢結果：** 如果`LIKE`查詢結果相對靜態或不需要即時，可以考慮實作像memcached或Redis這樣的快取機制。快取可以透過直接從記憶體提供結果來顯著縮短反應時間。 - **物化視圖：** 如果經常執行「LIKE」查詢且資料列的資料相對靜態，請考慮建立物化視圖來預先計算並儲存「LIKE」查詢的結果。如果查詢物化視圖所帶來的效能提升超過了額外的儲存和維護需求，則此方法可能會很有用。 值得注意的是，這些優化策略的有效性可能會根據您的特定用例而有所不同。 ### 經過所有測試後建議的改進點。 1. 修正將空字串傳遞到 where/過濾條件的問題。 2. 在效能至關重要的讀取操作中，轉而使用查詢建構器而不是活動記錄模式。 3. 在用於搜尋和過濾的欄位中新增索引。另外，在不唯一且用於搜尋的列上新增全文索引。 4. 刪除/避免不必要的連線。如果可能的話，重組架構以在必要時複製資料。 5. 使用 LIKE 運算子搜尋時，使用「prefix%」模式，而不是我們使用的預設模式「%suff+pref%」。使用前綴模式有助於資料庫使用索引並提供更好的結果。 儘管如此，我們成功地將查詢時間從 **7 秒** 降低到 **<=150 毫秒**，這樣做後感覺很好，因為這是我第一次涉足性能和優化並尋找從我們已有的資源中榨取更多資源的方法。 特別感謝[Mitesh Sir](https://www.linkedin.com/in/miteshskj/) 在這次調查期間指出了潛在的原因並引導我走向正確的方向，並一遍又一遍地重新啟動測試伺服器😂因為由於記憶體限制，在多次執行測試後，資料庫會變得非常慢。 如果您想更多地談論與這一切相關的內容，請在 X 上關注我，https://twitter.com/RishiNavneet ### 參考 1. https://github.com/typeorm/typeorm/issues/3857#issuecomment-714758799 2. https://github.com/typeorm/typeorm/issues/3857 3. https://stackoverflow.com/questions/714950/mysql-performance-optimization-order-by-datetime-field 4. https://stackoverflow.com/questions/22411979/mysql-select-millions-of-rows 5. https://dba.stackexchange.com/questions/20335/can-mysql-reasonously-perform-queries-on-billions-of-rows 6. https://stackoverflow.com/questions/38346613/mysql-and-a-table-with-100-millions-of-rows 7. https://github.com/typeorm/typeorm/issues/3191 PS - 這些改進很久以前就完成了，我只是懶得發布它😬。 --- 原文出處：https://dev.to/navneet7716/optimizing-sql-queries-h9j

0個讚   0留言 238瀏覽

部署網站之前需要檢查的 14 件事👨‍💻🔥

### 讓我們開始吧！ 🚀 將網站丟入野外網路是一件大事，因此確保首先加強每個細節是關鍵。 我的意思是，您想確保您的網站在手機和平板電腦上看起來很流暢，而不僅僅是桌上型電腦（響應能力）。並且您希望真實的人也能夠找到並使用您的網站（SEO）。 我列出的這份清單列出了 14 項必須做的事情 - 涵蓋可用性、可存取性、SEO 優化、出現問題時的備份計劃、確保事物安全的 SSL 以及使用 CDN 加快加載時間等內容。 所有需要檢查的關鍵框，以便您的網站在發佈到世界各地之前被鎖定和加載。 🌐 ![圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/addvh49t2nim1ne6efn1.png) *** ### 簡介⏱️ - 反應能力📱 - 輔助使用♿ - 可用性👍 - 加載時間短⏱️ - SSL 憑證🔒 - 優化圖片🌅 - 使用後備🔄 - 仔細檢查連結和表格✔️ - 404 頁面與圖示 🚫🤔 - 縮小檔案📦 - 專業領域🌐 - 這個🔍 - 使用 CMS 🖥️ - 額外提示🎁 *** ### 1. 回應能力📱💻 如今，使您的網站響應式是網頁開發的重要組成部分。確保您的網站在筆記型電腦、桌上型電腦、手機和平板電腦上看起來不錯。 使用每種流行的瀏覽器測試您的網站。它需要與所有瀏覽器的最新版本相容。 您永遠無法知道某些使用者將使用什麼裝置和瀏覽器來造訪您的網站。 至少會有人嘗試在裝有過時版本三星瀏覽器的舊 Galaxy S3 上執行它。 📲 *** ### 2. 輔助功能 ♿ 網路可存取性是指設計和開發殘疾人可以使用的網站和技術。 簡而言之，網站應該可供所有人存取，這意味著即使是殘疾人也應該理解、導航並與之互動。 開發網站時應考慮許多因素。 其中一些是：加入鍵盤導航、使用 ARIA 角色、在文字和背景之間使用足夠的顏色對比度、向所有圖像加入替代文字以及為連結使用描述性名稱。 🌐 *** ### 3.可用性👍 可用性衡量特定使用者如何有效地使用網站來實現既定目標。 確保您的網站易於使用。使用者應該能夠快速、輕鬆地找到他需要的東西。 您需要像訪客一樣查看網站上的每個元素。文字應該易於在行動裝置和其他標準設備上閱讀，並且您應該使導航清晰且易於理解。 您網站的兩個版本上的內容應該相同。 🕵️‍♂️ *** ### 4.載入時間短⏱️ 網站頁面載入速度是您應該考慮的最重要的事情之一。 你不應該讓你的用戶等待很長時間；您網站的使用者體驗變得很糟糕。 您的網站應該盡快加載，而且網站速度已成為當今 SEO 的首要任務之一。 🚀 *** ### 5.SSL憑證🔒 SSL 代表安全通訊端層。 SSL 憑證可讓您使用 HTTPS 進行安全資料傳輸，並將確保您的網站經過加密，以便駭客無法攔截您的任何資料。 這不僅會讓您的訪客放心，而且還會提高您網站的搜尋引擎優化 (SEO)，因為 SSL 現在是 Google 搜尋演算法的一部分。 🔐 *** ### 6.優化圖片🌅 無論您的網站如何優化，圖像始終是頁面上加載最慢的元素之一。 因此，優化網站上的圖像至關重要。 最好避免使用 TIFF 或 BMP 影像，而堅持使用 JPEG 和 PNG。 另外，您應該避免空圖像 src 程式碼行。在部署您的網站之前，跨網頁優化您的圖片；否則，將會影響您的頁面載入時間。 📸 *** ### 7. 使用後備。確保使用後備 🔄 「後備」只不過是在瀏覽器無法呈現特定 HTML 標記、CSS 屬性或腳本時向瀏覽器提供的附加選項。 回退最常與 HTML5 標籤和 CSS3 屬性一起使用，這兩個屬性都是新的，並且在某些瀏覽器中可能不完全支援。 🛡️ *** ### 8. 仔細檢查所有連結和表格 ✔️ 在部署網站之前，請務必檢查所有連結、按鈕、表單等。它們是否正常運作？ 經常發生這樣的情況：開發時有效的連結在生產中部署後可能無效。 按鈕和表單也是如此。始終檢查是否有損壞的連結和文件。 🚫🔗 *** ### 9. 404，網站圖示。 🚫🤔 404 頁面很重要，因為訪客可能會輸錯或點擊錯誤的連結，因此您不希望存取者看到難看的錯誤警告。 確保您已在網站上設定自訂 404 頁面以防止這種情況發生。 🚧 *** ### 10.縮小檔案📦 縮小是最小化網頁和腳本檔案中的程式碼和標記的過程。 這是減少網站載入時間和頻寬使用的主要方法之一。 主要目標是刪除冗餘或不必要的資料，例如間距和註釋。 🧹 *** ### 11.專業領域🌐 如果您希望您的網站看起來專業，請購買專業網域。 不要使用「.netlify.app」、「.vercel.app」等網域。 許多初學者買不起專業域名，但專業域名總是看起來比子域名更好。 💼 *** ### 12.這個🔍 SEO 是您應該關心的最重要的主題之一。 SEO 可以提高您網站在搜尋結果中的排名。 而且，獲得高排名的主要目的是吸引更多流量並將流量轉化為客戶。 📈 *** ### 13. 使用 CMS 🖥️ CMS 代表內容管理系統。 如果您使用CMS，您可以輕鬆更改CMS中的任何內容，而無需重複編輯程式碼。 使用 CMS 的另一個好處是，如果您的網站內容是由非技術人員建立和編輯的，他們需要有一個良好的 GUI 介面。 🤖 *** ### 14.額外提示🎁 - 確保您的網站沒有任何重大漏洞。 🛡️ - 將腳本放在底部。將樣式表放在頂部。 📜 - 使用 CDN（內容傳遞網路）。 🌐 - 避免重定向。 🔄 - 使用快取。 🔄 *** ### 總結🌟 準備好將您的網站推向世界了嗎？我感覺到你了。很嚇人但很刺激！當您為發布日做準備時，請牢記這 14 件事，它們將幫助您建立一個由內而外令人驚嘆的網站。 有很多事情需要考慮，但為了創造出令你自豪的東西是值得的。只要不斷改進即可。 你的網站從未真正完成， 將其視為一個有生命、不斷進化的事物！ 🌱 與我聯絡：[Linktree](https://linktr.ee/arjuncodess/) 我希望這篇文章對您有所幫助❤️ 快樂編碼！ 🚀 感謝11671！ 🤗 --- 原文出處：https://dev.to/arjuncodess/14-things-to-check-before-deploying-a-website-49ee

0個讚   0留言 178瀏覽

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