讓我給你一個簡單的🚦路線圖，讓你知道你現在在哪裡以及下一步應該去哪裡。  🔑關鍵概念 ----- 每個網站都有兩個部分。一個**前端**，一個**後端**。 前端是您在瀏覽器中看到它並與之互動的部分。**所有視覺方面**。 後端是為前端提供動力的部分。它*在幕後*，**主要是儲存資料和資料庫**並提供給前端。 🌐工作 --- 因此，網路開發工作分為`three categories` 。 - 👨💻前端開發 - 🛟後端開發 - 🚢以及全端開發（涉及前端和後端開發） 👷♂️後端開發人員到底是做什麼的？ ------------------ 後端開發人員負責建立驅動用戶所使用的應用程式*功能*的**基礎系統**。 這包括設計架構、實施和維護這些關鍵系統等各種任務。 他們的職責通常涉及與： - 💾 資料庫，例如MySQL， - ✂️ 框架，例如 Laravel 或 Ruby on Rails，以及 - 🧨 API（應用程式介面）。 他們的專業知識確保後端基礎設施無縫執行，從而實現使用者介面與底層資料和流程之間的順暢互動。 如果您不知道的話，這是後端開發人員的`core`職責： |任務|描述| |---|---| |了解績效需求與目標 |了解網站的效能要求和目標 | | API的開發與管理|為網站建立和管理 API | |開發資料儲存與處理系統|建置系統以安全地儲存和處理支付處理等流程所需的資料| |編寫、測試和維護程式碼 |編寫程式碼、測試和開發編碼問題的解決方案，包括維護任務 | |設計網站架構|使用敏捷 Scrum 和框架等既定方法設計網站架構 | |組織系統邏輯|有效建構系統邏輯| |提供系統問題的解決方案|提供解決方案來解決與系統相關的問題和挑戰 | --- 🥷 六個月內成為後端開發人員的技能 ----------------- 成為熟練的後端開發人員需要在相對較短的時間內掌握各種技能和技術。 下面，我概述了一個**全面的路線圖**，以幫助您在六個月內實現這一目標： **第 1 個月：🦴後端開發基礎** - **第一週：**了解後端開發人員的角色和職責。熟悉資料庫、框架和 API。 - **第 2-3 週：**參加資料庫綜合課程。了解 SQL 和 MySQL 等關聯式資料庫。練習建立和管理資料庫。 - **第 4 週：**了解伺服器端程式語言。從 PHP 或 Python 開始。學習基本語法、控制結構和資料類型。 **第 2 個月：🍖高階後端概念** - **第 1-2 週：**加深對資料庫的理解。探索 MongoDB 等 NoSQL 資料庫。了解*資料建模和優化*。 - **第 3-4 週：**掌握伺服器端程式語言。深入研究 PHP 或 Python。了解函數、類別和物件導向程式設計。 - **最後 2 天：**使用框架進行實踐專案。選擇流行的框架，例如*適用於 PHP 的 Laravel 或適用於 Python 的 Django* 。建立簡單的應用程式以理解模型-視圖-控制器 (MVC) 架構。 **第 3 個月：🌦️API 開發和集成** - **第 1-2 週：**了解 API 及其在後端開發中的重要性。探索 RESTful API 設計原則。 - **第 3 週：**開始建立您自己的 API。使用`Postman`等工具來測試和偵錯 API 端點。了解身份驗證和安全性。 - **第 4 週：**關注*API 整合*。了解如何在 Web 和行動應用程式中使用 API。練習將第三方 API 整合到您的專案中。 **第 4 個月：🛸故障排除與最佳化** - **第 1-2 週：**掌握故障排除技術。了解如何有效診斷和除錯後端應用程式。 - **第 3 週：**進入效能優化階段。了解快取、負載平衡和資料庫索引。 - **第 4 週：**學習監控和分析工具。使用 New *Relic 或 Datadog*等工具來監控應用程式效能。了解如何產生和**分析**績效指標。 **第 5 個月：🌥️雲端基礎設施和部署** - **第 1 週：**了解雲端運算概念。了解 AWS 或 Azure 等流行的雲端供應商。 - **第 2-4 週：**學習後端開發雲端服務課程。了解無伺服器運算、容器化和微服務。 - **休息日：**練習將應用程式部署到雲端。了解 CI/CD 管道和自動化部署策略。 **第 6 個月：🏗️高級主題和專案** - **第 1-2 週：**在上個月，學習更多高階後端主題。選擇訊息佇列、事件驅動架構和即時通訊等主題。 - **第 3 週：**開展*頂點計畫*。選擇一個具有挑戰性的專案，整合各種後端技術和概念。 - **第 4 週：**最後，反思您的學習歷程。審查您的專案並確定需要改進的領域。透過練習**程式設計挑戰**來準備工作面試。 ⛏️後端開發：工具與軟體 ------------ 以下是後端開發中常用的工具和軟體的細分： **1. 📇資料庫框架：** - **MySQL：**用於儲存和檢索資料的關聯式資料庫管理系統。它廣泛用於 Web 應用程式，並提供可擴展性和可靠性。 - **MongoDB：**一種 NoSQL 資料庫程序，使用具有模式彈性的類似 JSON 的文件。它適用於資料模型快速變化或非結構化資料的應用程式。 **2. 🛝網路伺服器：** - **Apache HTTP Server 2：**一種開源 Web 伺服器軟體，可透過網際網路提供 Web 內容。它以其穩定性、安全性和靈活性而聞名，使其成為託管網站和 Web 應用程式的熱門選擇。 **3. 🔐安全協定：** - **SSL/TLS 憑證：**這些是透過電腦網路提供安全通訊的加密協定。 SSL（安全通訊端層）及其後繼者 TLS（傳輸層安全性）對伺服器和用戶端之間的資料進行加密，確保線上連線的機密性和完整性。 **4. 💫版本控制系統：** - 接下來，請熟悉版本控制系統。這些系統有助於追蹤專案歷史並實現與其他人的協作工作。 - 🔌 吉特： - Git 是使用最廣泛的版本控制系統，超過 70% 的軟體開發團隊都在使用。這是一個必須知道的工具，建議分配大約兩週的時間來學習 Git。 後端開發人員通常利用這些工具和軟體來建立強大、可擴展且安全的 Web 應用程式，用於處理資料儲存、伺服器託管和線上通訊加密。 如果您尋求有關後端開發的更多知識，請考慮查看此[深入的後端開發路線圖](https://roadmap.sh/backend)。 --- 👏結論 --- 透過遵循此時間表並持續努力學習，您可以在 6 個月內獲得寶貴的後端開發技能，並為找到後端開發工作做好充分準備。 如果您想在六個月內成為前端開發人員，您也可以閱讀這篇文章。 👇 [6 個月內成為前端開發人員的路線圖](https://dev.to/codewithshahan/must-have-frontend-development-skills-roadmap-2024-28jc) 最後，如果你想知道[前端開發的未來](https://dev.to/codewithshahan/the-future-of-frontend-development-1amd)，你也可以看看這篇文章。 請關注更多有價值的內容，如果您覺得有幫助，您可能也會喜歡我的[YouTube 頻道](https://www.youtube.com/programmingwithshahan)。 感謝您花時間閱讀這篇文章。 🤳我的社交： [X](https://twitter.com/shahancd) --- 原文出處：https://dev.to/codewithshahan/skills-to-become-a-backend-developer-in-6-months-roadmap-4li3
--- 標題: CSS 卡通 發表：真實 描述：comiCSS 本週兩歲了。為了慶祝，我出版了每日漫畫，為這個重要的日子做準備。這是這七部漫畫的收藏。 標籤： css,webdev,showdev 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa95c4u6o8475xxwl3kz.png canonical\_url：https://alvaromontoro.com/blog/68051/css-cartoons-for-comicss-second-anniversary 發佈時間：2024-02-08 09:00 +0000 --- < p> [comiCSS](https://comicss.art)本週兩歲了。為了慶祝，我出版了每日漫畫，為這個重要的日子做準備。這是這七部漫畫的收藏。 < p> comiCSS 是一部關於 CSS 編碼的 CSS 漫畫。是的，**漫畫和卡通都是用 HTML 和 CSS 編碼的**（有幾個 SVG 例外，它們也在內部使用 CSS）。是的，我已經這樣做兩年了。為什麼？因為它很有趣，所以它們可能很愚蠢，但是，希望它們也具有教育意義（有些比其他的更有教育意義）……因為，為什麼不呢？ < p> 這是我本週製作的漫畫集。我希望你喜歡他們。 < h2 id =「雲端開發人員」> [雲端開發者](https://comicss.art/?id=116) < p>  有趣的事實：這部動畫片中的背景顏色是真正的「天藍色」。 --- < h2 id="國王"> [國王](https://comicss.art/?id=117) < p>  有趣的事實：國王的長袍是「寶藍色」的。這部漫畫是該系列所有漫畫中在社群媒體上最成功的一部。 --- < h2 id="歌劇魅影"> [歌劇魅影](https://comicss.art/?id=118) < p>  我喜歡這個想法，但實施需要更充分。我仍然認為它有潛力...也許改天我可以改進... --- < h2 id =「獲勝者」> [優勝者](https://comicss.art/?id=119) < p>  [有人建議](https://front-end.social/@[email protected]/111877220149537836)關於[ABBA 的《勝者為王》，](https://www.youtube.com/watch?v=92cwKCU8Z5c)內容應該是「全部」……而我討厭我自己沒有考慮到這一點。儘管如此，我還是保留了獎盃。 --- < h2 id="獨裁者"> [獨裁者](https://comicss.art/?id=120) < p>  這部漫畫比我以前出版的漫畫更黑暗。直到最後一刻我才懷疑是否要刪除`orphans`和`widows`的提及。 --- < h2 id="籃球運動員"> [籃球運動員](https://comicss.art/?id=121) < p>  有趣的事實：NBA 有史以來最高的球員（迄今為止）是馬努特·波爾（Manute Bol），他身高7 英尺7 英寸……或91 英寸。對一個大塊頭球員來說，這只是一個小小的眨眼。 --- < h2 id =「太空人」> [太空人](https://comicss.art/?id=122) < p>  我對兩個選擇器之間的懷疑： `.astronaut`和`#MajorTom` 。 CSS 可以描述[David Bowie 的 Space Oddity](https://www.youtube.com/watch?v=iYYRH4apXDo) ，但採用了更明顯的選項。 --- < p> 我喜歡這種風格和格式，我可能會繼續畫這樣的漫畫……但速度會放慢。除了常規的 CSS/Web 開發漫畫之外，可能每週更新一次。 < p> 同時，如果您喜歡這些漫畫，請存取[comiCSS](https://comicss.art)網站並**關注[Twitter](https://twitter.com/comi_CSS)或[LinkedIn](https://www.linkedin.com/company/comicss/)上的帳戶**以獲取更新。或[成為 Patreon 的支持者](https://www.patreon.com/alvaromontoro)並幫助該專案。 --- 原文出處：https://dev.to/alvaromontoro/css-cartoons-29bp
我相信您可以想像版本控製程式碼的重要性，以便我們可以**恢復變更**並**恢復遺失的資料以及其他可能性**。 我打賭你知道有人*（不是我呵呵）*通過使用越來越有創意的名稱建立文件副本來對其文件進行版本控制...  在 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 的工作原理！** *（感謝上帝）* 這就是**集中式**版本控制系統的工作方式，其中使用者需要**「簽出」**和**「簽入」**文件，即每當有人需要處理特定文件時，他們需要簽出該文件，**刪除從儲存庫中獲取**文件，然後在工作完成後簽入該文件，**並將其返回儲存庫**。  在像**GIT**這樣的**分散式**系統中，多個人可以存取同一個遠端儲存庫中的檔案。每當有人需要操作文件時，他們只需將其**克隆***（或克隆整個存儲庫）*到本地計算機，然後將修改發送回遠端存儲庫。這使得**多人可以處理同一個專案**，甚至操作**相同的文件**。  這就是允許大型**開源**專案的分佈，來自世界不同地區的人們在同一個專案上工作，管理修改和可能的衝突*（是的，這裡可能會發生合併衝突）* 。 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 ```  透過這樣做，將在專案資料夾內建立一個`.git`目錄，該目錄將**負責此本機儲存庫的工作資料夾中的版本控制**。 ### 5.2 克隆現有儲存庫（git clone） 克隆現有遠端儲存庫就像從頭開始建立新儲存庫一樣簡單。為此，只需使用`git clone`命令，將要複製**的儲存庫的 URL**作為參數傳遞到要複製儲存庫的資料夾中： 複製現有的遠端儲存庫就像從頭開始建立新的儲存庫一樣簡單。為此，只需使用`git clone`命令，將**遠端儲存庫 URL**克隆到我們要下載儲存庫的資料夾中： ``` git clone [repository-url] ```  然後整個存儲庫必須**克隆**到我們的本地機器並**自動連結到相關的遠端存儲庫**。 > 有了複製的儲存庫，我們以後就不再需要使用`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`指令檢查目前本機儲存庫**狀態**：  請注意，當我們**在建立新檔案後**在儲存庫中執行`git status`時，新檔案將顯示為*「Untracked」* 。這意味著該文件是**全新的**，仍然需要加入到任何提交中才能被**GIT追蹤**。 > 可以讓 GIT 忽略儲存庫中的特定檔案或資料夾。為此，我們只需將一個名為`.gitignore`的檔案新增到根資料夾中，並在其中寫入應忽略的檔案或資料夾的名稱。 > > 注意：被忽略的檔案和資料夾將不再出現在 GIT 軌道上，甚至不會顯示為「未追蹤」。要重置跟踪，只需從`.gitignore`文件中刪除所需的名稱即可。 要包含文件，我們可以使用要新增的文件的名稱來執行`git add`命令*（在本例中為「index.html」）* ：  這樣，透過重新執行`git status`我們可以看到新檔案已新增至*「stage」* ，並**最終準備好在下一次提交中發送**，這可以使用以下命令完成： ``` git commit -m "[descriptive-message]" ``` > 提交具有唯一的 ID（雜湊碼）並且是**IMMUTABLE 的**，即一旦確認就無法修改。 > > `git commit -a` -> 執行直接提交，將所有修改的檔案新增至暫存區並提交它們。 **成功提交檔案後**，執行`git status`時，我們注意到**沒有更多修改的檔案需要上傳**，因為所有修改都已在上次**提交**時有效保存在我們的本機儲存庫中。  此外，還可以使用`git log`指令查看儲存庫的提交日誌來**驗證所做的更改**，該指令顯示所有提交的一些元資料，例如雜湊碼、分支、作者、日期等。  可以重複整個過程來加入我們專案所需的新文件，修改它們並透過進行新的提交將它們發送到本地儲存庫。  > `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」的新分支**，從而在完全**隔離的分支**中擁有我們專案的一個版本，準備好進行翻轉，**而不會危及主分支**。  ### 7.2 建立分支（git分支） 建立**分支**意味著建立可以獨立工作的儲存庫的並行副本，而不會影響`master/main`分支。為此，我們只需執行以下命令： ``` git branch [branch-name] ``` > 在沒有特定分支名稱的情況下執行`git branch`指令必須顯示儲存庫中可用分支的列表，並用「\*」標記目前正在使用的分支。 在執行`git branch test`指令之前， `git branch`指令只會傳回`master`分支。  建立新分支後，我們可以執行以下命令在可用分支之間切換： ``` git checkout [branch-name] ``` 執行`git checkout test`指令後，我們可以看到**活動分支已切換**。從那一刻起，**所有提交的資訊都會傳送到儲存庫的`test`分支**，而不會影響分支`master/main` 。  > 可以根據需要建立任意數量的分支，並且我們可以使用以下命令與現有分支進行互動： > > `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`命令。  透過這樣做，在分支`test`上完成的所有工作*（在本例中為`style.css`檔案的建立）*將合併到分支`master`中。  ### 7.4 合併衝突 如果**在同一行上更改了一個或多個檔案**並且合併無法**自動**完成，則使用`git merge`合併不同分支可能會導致一些**衝突**。  出現這種情況時，我們可以執行`git status`指令來檢查**哪些檔案**有衝突。  在繼續合併之前，我們需要**解決衝突**，方法是定義應該進行哪些更改，或檢查更改以使它們相互相容。為此， **GIT 將在衝突文件中插入標記**以協助解決問題。  解決衝突後，我們只需要將修改過的檔案放回舞台，提交新的無衝突版本，然後再次執行`git merge`指令，這一定會成功合併，沒有任何問題。 8. 與遠端倉庫同步<a name="chapter-8"></a> ---------------------------------- 我們已經知道可以**將本地存儲庫連接到遠端存儲庫**並遠端同步我們的所有工作，使其**保持最新**。 為此，我們需要執行`git push`命令，該**命令將所有提交從本地存儲庫發送到遠端存儲庫**，但首先我們需要\*\*配置遠端存儲庫。 ### 8.1 配置遠端倉庫 啟動*遠端儲存庫*非常簡單。這裡我們將使用**GitHub**來完成它。 首先，我們需要在 GitHub 帳戶中**啟動一個新的空白儲存庫***（只需選擇一個名稱並點擊「建立儲存庫」）* ：  接下來，我們需要透過在本機儲存庫中執行以下命令**來配置遠端儲存庫和本機儲存庫之間的關係**： ``` git remote add origin [remote-repository-url] ```  > `git remote -v` -> 顯示實際連接到本機儲存庫的遠端儲存庫的 URL。 正確**連接**遠端儲存庫後，我們需要使用指令`git branch -m main`**將本機分支`master/main`的名稱變更**為「main」 *（如果您的本機分支已稱為`main` ，請忽略此步驟）* ：  > 保持本機儲存庫的主分支與我們要推送到的遠端儲存庫的主分支同名非常重要。 最後，完成上述步驟後，我們可以使用以下命令首次將本機儲存庫與遠端儲存庫**同步**： ``` git push -u origin main ```  當我們執行`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`應該會成功執行，將本地儲存庫中的所有提交與遠端儲存庫同步。   ### 8.2 第一次後的Git推送（git推送） 完成上述所有步驟後，可以單獨使用`git push`指令完成**新同步**，無需任何其他參數，如下所示。   > 在這種情況下，使用**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`已**直接在我們的遠端儲存庫中**建立，因此我們的本機儲存庫現已過時。  在本機儲存庫中，我們可以使用上面提到的`git pull`**同步**遠端儲存庫中的變更。  > 當我們執行`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
我們中的許多人已經在 Product Hunt 上推出了一段時間，**越來越多的人開始質疑那裡的受眾是否真誠，以及是否仍然值得在他們自己的平台上推出**。 一周前剛剛推出了我們的最新產品，我想在這裡分享我們的第一手經驗並涵蓋三個主要內容： - 今天就推出 Product Hunt 的外觀和感覺如何 - 我們從發布中得到了什麼 - 如何（最好）利用 Product Hunt 來開發您的產品 關於我們 - 推出 6 次，超過 2,000 票贊成 -------------------------- 在過去 3 年裡，我們在 Product Hunt 上推出了 6 次，贏得了「最佳產品」獎（當天排名第 1 和第 5 名），並總共收集了超過 2,000 個讚。一週前，我們剛完成了[Open SaaS 的第六次發布，這是 300 美元以上 SaaS 入門產品的開源替代品](https://github.com/wasp-lang/open-saas/)。  您會發現許多文章為在 PH 上推出提供建議，並從那些獲得推薦的人那裡贏得故事，但幾乎沒有人分享幕後知識以及實現這一目標的真正需求。這就是這篇文章的目的。 我將引導您完成啟動步驟並發表評論並分享我們在每個步驟中的經驗。讓我們開始吧： 安排您的發布並建立“即將推出”預告片 - “讓我們交換贊成票” -------------------------------  一旦您安排了Product Hunt 的發布，您就可以建立一個橫幅，顯示在他們的「即將推出」頁面(https://www.producthunt.com/coming-soon) 上，這就是您的旅程開始的地方。這使 PH 訪客有機會了解接下來會發生什麼，並訂閱以在發布後收到通知，這也是您可以用來行銷您的發布的第一個東西。 **這也是 PH 經濟開始的時候 - 一旦您發布發布預告片，您將開始收到與其他即將推出其產品的人交換贊成票的報價**：  這實際上是一種合法的策略（從共享激勵而不是購買選票的意義上來說），可以透過自動化非常有效地利用。它不會帶來任何合格的潛在客戶（也就是真正對您的產品感興趣的人），但它可能有助於獲得投票，從而提高您的產品發布的知名度和影響力。 我們根本沒有使用過這個策略（所以我無法證明它的效率），因為我們很晚才發布“即將推出”頁面，就在發布前一兩天，而且我們也沒有工作流程沒有地方也沒有人力來完成它。 Linkedin、WhatsApp 和其他平台上也有專門的小組，讓 PH 參與者可以互相支持。如果您加入這些活動，您將會收到更多此類訊息和請求。 發布日 - 主動發送的電子郵件和「購買投票」優惠 ------------------------ 發布當天，類似上述的要求愈加強烈。我甚至收到了其他人在同一天推出產品的幾封電子郵件，要求我投票，因為他們刪除了我的電子郵件並將我加入到他們的時事通訊中。 ### 當天的前 4 小時 - 隱藏點讚 Product Hunt 最近推出了在一天的前 4 小時內以隨機順序顯示產品的功能，並隱藏點讚數。背後的想法是保證所有產品一開始就有平等的知名度，並有公平的機會吸引觀眾的注意。 隨著我們最新推出的 Open SaaS，我們取得了有史以來最好的開局 - 4 小時內獲得 100 票贊成！  當然，我們參與了我們的網絡，但也注意到來自我們不認識的人的大量投票和評論。有瞭如此強勁的開局，我非常有信心我們能躋身排行榜前 5 名產品之列。 > 進入前 5 名產品是 Product Hunt 主頁上的「首屏」位置，因此儘早到達那裡是最終進入該位置的最佳方式。 > 但當排行榜最終揭曉時，Open SaaS 勉強躋身當天發布的前 10 名！  前五名與其他產品之間存在著相當明顯的差距，第一名的產品的支持率幾乎是第二名的兩倍。**這對我們來說相當沮喪，因為感覺我們追趕的機會幾乎是零。** ### “嘿，想買點讚嗎？” 排行榜揭曉後，我們開始收到另一種類型的訊息——直接購買點讚的報價。仍然相對接近前 5 名的產品可能使我們成為一個非常合格的領導者：  與此略有不同的是，讓不同的社群媒體影響者和社群所有者伸出援手，向他們的追隨者推銷您的產品，並承諾獲得 X 票：   甚至我們的一些直接聯絡人也知道“一個人”可以讓你到達 Product Hunt 的頂端，並主動提出介紹我們，所以這有點像一個“公共秘密”，而我們是少數不知道的人關於它。 我們從發布中得到了什麼 - #7、HN 頭版、GitHub 上的趨勢… -----------------------------------  **我們 PH 發布的主要好處不是發布本身，而是我們可以將其與其他東西結合起來，例如**[在 HackerNews 上發布 Open SaaS](https://news.ycombinator.com/item?id=39192304) **，**它最終在其中展示了大約半天（在 Show 上展示的時間更長） HN 選項卡）。  最後，所有這些參與度加起來讓我們能夠在 GitHub 上獲得全球趨勢，這反過來又為 Open SaaS 帶來了更多流量（今天，在發布一周後，它已經擁有[超過 2500 顆星](https://github.com/wasp-lang/open-saas/)）。  ### 由此產生的流量 看看過去兩週 Open SaaS 儲存庫帶來的流量，我們可以觀察到以下內容：   HackerNews 的推出吸引的人數是 Product Hunt 的三倍多。 GitHub 吸引了更少的人存取實際的儲存庫，但我的直覺是，更多的人在沒有離開「趨勢」頁面的情況下加註了星標。 在 PH 的每日時事通訊中獲得專題報告 - 有幫助嗎？ ---------------------------  Open SaaS 在發布結束時成為當天排名第七的產品，獲得約 400 票贊成。根據 Product Hunt 的資料，當日排名前 10 名的產品最終會出現在擁有超過 50 萬訂閱者的每日新聞通訊中。 該時事通訊以 3 個大型促銷區塊開始，因此您必須滾動相當長的時間才能到達前一天的熱門產品。  對我們來說，它並沒有產生太大的影響，我認為它為我們贏得了大約 20 票。也許是因為我們不是第一，或者只是因為它是一個相當深的漏斗（打開電子郵件 → 一直向下滾動 → 檢查所有產品 → 喜歡 Open SaaS → 決定投票）。  在沒有任何提升策略的情況下是否有可能贏得當天的第一名？ --------------------------- **是的，這絕對是可能的。我已經得到了幾個我信任的聯絡人的證實，他們用他們的產品贏得了第一名，沒有任何機器人或支付贊成票。**但它也肯定變得不那麼常見和難以預測。 大多數時候，我們推出的產品首先會表現出一些不尋常的行為。有一次，是該公司在前一周推出，但他們只是稍微重新命名了產品和網站，然後重新推出。還有一次，一款產品在發布結束前幾個小時突然獲得了很高的支援率。 那麼，這意味著什麼？它還值得在 Product Hunt 上推出嗎？ ---------------------------------- 顯然，今天雙方都有不同的力量和動機驅動 Product Hunt 用戶的行為。最初，有一個社區想要了解最新產品並表達他們的興趣，並且有一些創始人想要連接到該社區。 **現在，也有一些創作者最希望自己的產品獲勝，無論實際的受眾參與度如何，因為他們相信這將有助於他們實現最終目標，例如影響範圍、籌款或對其他用戶的社會認可。顯然，有一方願意滿足這項需求，但對產品並沒有任何真正的興趣。** 為什麼這可能？ Product Hunt 正在採取許多措施來偵測和防止此類行為，但如果不嚴格限制 Product Hunt 所追求的網路效應（即能夠分享您的啟動連結），就很難做到這一點。 **除此之外，對我們來說，定期在 Product Hunt 上發布仍然是值得的。原因如下。** 產品搜尋是一個很棒的藉口 ------------ Product Hunt 為您提供了一個獨特的機會來宣布您的產品「正式」發布。您可以決定在哪一天執行此操作並安排時間，並且 100% 所有人都能看到它，您也可以分享並邀請人們查看。**你有 24 小時的時間，在此期間，你完全有理由聯繫你認識的每個人（以及其他人）並繼續按喇叭。**  **Reddit 和 HackerNews 等其他高影響力平台無法做到這一點。**當然，您可以隨時分享有關您產品的新聞，但不能保證任何人都會看到它（實際上恰恰相反），除非社區的集體思想決定如此，這幾乎是確定性的。您可以輕鬆地花費一周的時間來準備您的發布帖子，但它會在幾分鐘內被演算法淹沒。 **這就是為什麼我們不將 Product Hunt 視為最終目標（贏得第一名），而只是將其視為我們整個發布過程的一部分。這是一個很棒的講台，也是一個談論你的產品的好藉口，而上面的任何其他東西都只是一個額外的好處。** 我們保持簡單 ------ 您會發現很多來自「PH 專家」的文章（和付費課程），解釋您應該如何提前幾個月準備發布、預熱您的受眾、準備他們將分享的評論等。**我們不做任何這些事情。我們只需準備內容（影片+一些螢幕截圖和介紹性評論），然後在發布當天邀請我們認識的所有人支持我們。然後，白天我們也會在 Reddit、Hackernews 和 dev.to 上發文。**  有時我們最終會進入前 5 名，有時則不然，**但每次，我們的用戶參與度都會穩步提升，並且通常會在接下來的幾天/幾週內出現更好的結果**。例如， [MAGE，我們基於 GPT 的全端應用程式啟動器](https://usemage.ai/)，在 PH 發布後就出現了爆炸性增長，並[在幾個月內被用來建立了 30,000 多個專案](https://dev.to/wasp/how-we-built-a-gpt-web-app-generator-for-react-nodejs-from-idea-to-25000-apps-in-4-months-1aol)。 我們經常這樣做 ------- 我們的目標是每 3 個月發布一次 Product Hunt，作為發布週的一部分，這就是我們迄今為止所做的。除非 6 個月過去了或有重大更新，否則您無法真正推出完全相同的產品，但您可以自由地推出與主產品相關的其他（子）產品和功能。 > **💡 提示**：當您提交發佈時，您可以要求 PH 團隊將其「連接」到您的產品，以便它將出現在該產品的發布清單中。通常，他們自己做。它看起來像這樣：  雖然我們的主要產品是[Wasp，一個基於 React 和 Node.js 的全端框架](https://github.com/wasp-lang/wasp)，但到目前為止我們推出的產品如下： - **Wasp Alpha** - 純產品，v0 差不多 - **Wasp Beta** - 差不多兩年過去了，我們還沒有採用「經常發布」的方法 - **免費 SaaS 模板**- [Open SaaS](https://github.com/wasp-lang/open-saas)的前身，4 個月後 - [\*\*MAGE，GPT Web 應用程式產生器](https://usemage.ai/)\*\* - 由 Wasp 提供支援的全端 Web 應用程式產生器 - [**React/Node 的全端身份驗證，無第三方服務**](https://wasp-lang.dev/docs/auth/overview)- Wasp 的身份驗證功能 - 最後， **[Open SaaS - 300 美元以上 React 和 Node.js SaaS 初學者的免費開源替代品](https://github.com/wasp-lang/open-saas/)** 它已成為我們發布工作流程的常規部分，對於我們在該季度推出的任何新功能，我們都會尋找一個好的候選人在即將推出的發布中展示。這使我們能夠繼續談論我們所做的事情，並且我們還獲得了很多可以嵌入到我們的文件、部落格文章等中的好內容（例如影片、橫幅）。 例如，這個影片展示了 Wasp 中的身份驗證如何運作 - 首先我們將它用於我們的[Product Hunt 發布](https://www.producthunt.com/products/wasp-lang-alpha#full-stack-auth-for-react-node-by-wasp)，現在它[位於我們的身份驗證文件的頂部](https://wasp-lang.dev/docs/auth/overview)。 {% 嵌入 https://www.youtube.com/watch?v=Qiro77q-ulI&ab\_channel=Wasp %} 謝謝閱讀！ ----- 感謝您閱讀本文！這篇文章比我最初預期的要長得多，但我不斷獲得更多關於要寫什麼的想法。我希望您會發現它對計劃下一次發布有所幫助，並且您也會更好地了解在此過程中會發生什麼。 我也很想得到您的回饋，並了解您在 Product Hunt 上推出的經驗和策略。 快樂發射！ --- 原文出處：https://dev.to/wasp/product-hunt-has-become-pay-to-win-but-you-should-still-use-it-to-launch-your-product-508d
身為開發人員，我總是在尋找那些小細節，因為細節很重要。 我們都是 DEV 上一個大社群的一部分，在這篇文章中，我很高興分享一些您可能不知道的這個平台上意想不到的功能和技巧。 讓我帶您了解在 DEV 上可以做的 12 件令人驚訝的事情，從建立自訂按鈕到建立評論範本！ 請評論並讓我知道哪一點最讓你驚訝。 --- 1.使用標籤過濾貼文。 ----------- 隨著我們的提要中不斷出現帖子，擁有一些控制和過濾器至關重要。一種方法是使用標籤過濾貼文。 例如，要查看帶有`#discuss`標籤的帖子，只需導航到[dev.to/t/discuss](https://dev.to/t/discuss) 。 同樣，如果您想要帶有標籤`#softwaredevelopment`的帖子，請前往[dev.to/t/softwaredevelopment](https://dev.to/t/softwaredevelopment) 。 作為一般規則，您可以使用它。 ``` https://dev.to/t/paste_your_tag_without_spaces ``` 您可以將上述 URL 與您的標籤貼在一起，以查看相關類別中的熱門貼文。  您可以找到負責處理該特定標籤的標籤管理員。 如果您想知道，標籤管理員負責維護標籤與貼文的相關性。 您可以在[dev.to/dashboard/following\_tags](https://dev.to/dashboard/following_tags)檢查您關注的標籤。 所有標籤的完整清單可在[dev.to/tags](https://dev.to/tags)上找到。 --- 2.基於官方標籤的便利資源。 -------------- 它可能與第一個相關，但並非每個標籤都如此。 某些標籤提供了方便的官方資源，例如`tailwindcss`的文件或`nextjs`的有用指南。這些資源可能很有價值，尤其是當您不熟悉某個特定標籤時。  例如， `nextjs`標籤有不錯的資源:)  這些「小細節」讓DEV平台更加人性化、資訊豐富。 --- 3.RSS 源。 -------- 向 5 歲的孩子解釋 RSS feed： > 想像一下，您有一個最喜歡的卡通節目，每次有新劇集時，您的神奇電視就會向您展示它。 RSS 提要就像網站的神奇信使。當您最喜歡的網站上有新內容時，它會告訴您的計算機，這樣您就可以看到它，而無需一直檢查。這就像一個友好的通知，說：「嘿，您喜歡的網站上發生了一些有趣的事情！」。 這就像擁有來自多個來源的內容的個人化新聞源。 - 使用以下命令檢查您的 DEV RSS 提要： `dev.to/feed/your_username` - 檢查我用來尋找 RSS 來源 URL 的[Chrome 擴充功能](https://chromewebstore.google.com/detail/get-rss-feed-url/kfghpdldaipanmkhfpdcjglncmilendn)。 在本[指南](https://dev.to/p/publishing_from_rss_guide)中詳細了解如何從 DEV 的 Feed 建立草稿。 前往[dev.to/settings/extensions](https://dev.to/settings/extensions)貼上您的 RSS Feed URL 並將其與您的 DEV 設定檔整合。 假設您有自己的博客，每當您將博客發佈到您的網站時，開發人員都會將該博客作為草稿帖子獲取，您可以從儀表板發布該博客。  ### 什麼是規範 URL？ 想像一下您有一個網頁，並且有它的一些副本或變體。 （您的個人部落格+DEV部落格） 規範 URL 就像將主要 URL 標記為老闆一樣——原始來源。 它可以幫助搜尋引擎了解哪個版本是最重要或首選的，從而防止混淆並提高網頁的搜尋引擎排名。 重新發佈內容以保持搜尋引擎的清晰度時，了解規範 URL 至關重要。 --- 4.許多創新事物的瘋狂徽章。 -------------- DEV 每週根據文章中介紹的技術授予多個徽章。從技術堆疊徽章到「喜愛的評論」徽章等古怪徽章，每個徽章都有自己的魅力。 例如，如果您使用 React 撰寫文章並被視為本週最佳作者，您將獲得 React 徽章。  我忍不住分享我對我看到的一些可愛徽章的興奮之情。  我認識幾個擁有這枚心愛徽章的人。 如果你知道，請評論！    誰有這個？哈哈！值得聚會。  我有這個，但沒有贏得任何遊戲🤣  前 7 位作者徽章通常被認為是最負盛名的，是我個人最喜歡的。獲得此徽章本身就是一種榮譽。  我無法一一列舉；否則，人們會生氣。哈哈！ 在[dev.to/badges](https://dev.to/badges)上探索徽章的完整清單。 --- 5.軟體比較。 ------- 比較軟體並不是一個新趨勢。我們一直這樣做。 因此，開發團隊列出了社群建立的熱門貼文清單。人們通常會一遍又一遍地瀏覽這些帖子。 名單包含約 350 多家軟體公司。必須檢查！ - [dev.to/software-comparisons](https://dev.to/software-comparisons) - 軟體比較  --- 6. 為圖像新增標題。 ----------- 在 DEV 貼文中，您可以為圖像加入標題，以提供上下文或附加資訊來補充所顯示的圖像。 這是在圖像中導航的一種有趣的方式。 以下是您可以如何做到這一點。 您必須在圖像後面使用`<figcaption>`標記。 例如，請參見下圖及其文法。  Anmol Baranwal 的 GitHub 簡介 ```  <figcaption> GitHub Profile of Anmol-Baranwal </figcaption> ``` --- 7.訂閱評論。 ------- 通常，作為帖子的作者，您會自動訂閱所有評論。 這意味著您將收到該帖子的每條評論的通知。 然而，有趣的是，您還可以訂閱其他貼文的評論。我建議這樣做，特別是對於帶有`#discuss`標籤的帖子，因為它可以讓您接觸到各種觀點，最終獲得寶貴的學習經驗。 - `top-level comments`的通知是一個方便的功能。  --- 8. 嵌入和換行。 --------- 大多數人都已經知道這一點了。 但對於那些不這樣做的人，您可以嵌入任何影片，以便可以播放影片而不是粘貼連結。 它允許觀眾直接觀看影片，而無需存取其他網站。 ``` {% embed paste_url_here %} ``` 例如，嵌入我的 DEV 設定檔將如下所示。 {% 嵌入 https://dev.to/anmolbaranwal %} 有些人可能不知道使用` `建立換行符。 這種簡單的技術可以提高貼文的可讀性。 例如，可以使用` `將第一個句子與下一個內容分開。 。 第二句話由換行符號分隔。 --- 9. 號召性用語按鈕。 ----------- 這是最酷的！ 您知道您可以製作帶有描述的個人化按鈕嗎？如此令人興奮！ 這是吸引註意力和增強參與度的便捷方式，而且非常容易實施。 例如，讓我們為我的 GitHub 個人資料建立一個 CTA： {% cta https://github.com/Anmol-Baranwal %} 🚀 造訪我的 GitHub 個人資料 {% endcta %} 您可以使用以下語法來建立該按鈕： ``` {% cta https://github.com/Anmol-Baranwal %} 🚀 Visit My GitHub Profile {% endcta %} ``` 這種個人化的風格可以為您的貼文增添全新的維度。 該語法使用 Shopify 建立的[Liquid 標籤](https://github.com/Shopify/liquid)。 --- 10. 完整的編輯指南。 ------------ 這是即使是頂級作者也可能不知道的隱藏寶石。 DEV 團隊製作了一份全面的編輯器指南，幾乎涵蓋了使用編輯器的各個方面。它是回答以下問題的一站式資源： - 如何為圖像加入標題 - 支援的 URL 嵌入 - 如何新增不會顯示在內容中的評論（作者註） - Markdown 基礎+推薦封面圖片尺寸（1000 \* 420） - 他們甚至涵蓋了可存取性等等。 請在[dev.to/p/editor\_guide](https://dev.to/p/editor_guide)閱讀完整指南。 非常感謝開發團隊建立瞭如此方便的指南！請關注官方開發團隊並加入其中：） {% 嵌入 https://dev.to/devteam %} --- 11.評論範本。 -------- DEV 提供的另一個很棒的功能是保存評論範本的能力。無論是自我介紹還是分享社群媒體 URL，這些範本都可以節省您的時間並提高互動的一致性。 它可能很小，但它的威力很大！ 它與 GitHub 上常見的功能非常相似。  讓我們看看它是如何工作的。 若要設定評論模板，請造訪[dev.to/settings/response-templates](https://dev.to/settings/response-templates)  您可以輕鬆新增帶有短標題的新範本以供快速參考。  當您位於帖子的評論部分時，請點擊右下角的三個點 -> 然後點擊書籤符號。您將找到可以直接使用的模板清單。  值得信賴的用戶甚至可以獲得預先定義的模板列表，以更加方便。  --- 12. 播客？影片?以及隱藏標籤的力量。 -------------------- 您知道您可以在 DEV 上傳貼文影片嗎？  您可以在[dev.to/dashboard](https://dev.to/dashboard)的左下角找到上傳影片的選項  這是改進您的帖子的絕佳方法。在[dev.to/videos](https://dev.to/videos)上發現這些影片貼文。 DEV 還設有專門討論播客的部分。您甚至可以在[dev.to/pod](https://dev.to/pod)上提交自己的播客以供審查並探索其他各種播客。 > 個人化提要的隱藏標籤 隱藏標籤是一種讓您能夠更好地控制所看到的內容的方法，也是一種從 Feed 中隱藏您不想看到的內容的方法。  您可以在標籤頁面上隱藏標籤 - 使用搜尋來尋找您想要隱藏的特定標籤  您也可以在儀表板的「以下標籤」部分隱藏標籤 - 按三個點即可存取隱藏選項 - 您可以在[dev.to/dashboard/hidden\_tags](https://dev.to/dashboard/hidden_tags)找到隱藏標籤。  您可以查看儀表板上隱藏的標籤並取消隱藏它們 此功能可確保在 DEV 上提供更個人化和愉快的瀏覽體驗。 我不會討論 API，因為這會讓帖子變得很長。 不過，如果您有興趣，可以探索有關[Forem API 的](https://developers.forem.com/api/v1)更多資訊。 --- 獎金 -- 我知道我知道！ 我承諾了 12 件事，但這裡還有一些關於「只要有人讀你的博客，你就可以賺錢！」的額外內容。 在這篇富有洞察力的[部落格文章](https://dev.to/hacksultan/web-monetization-like-i-m-5-1418)中探討網路貨幣化的概念。這是一本很棒的指南，解釋了您需要了解的一切。 您還可以閱讀有關如何成為[DEV Mod](https://dev.to/community-moderation)並與其他社區成員合作的更多資訊。 --- 我不知道你怎麼想，但我特別興奮， `DEV`團隊可能還隱藏著更多寶藏。哈哈！ 我希望你今天學到了一些新東西。 我喜歡 DEV 社區，因為它是接觸各種精彩內容的絕佳場所：生動的討論帖子、深入的教程、庫更新、職業建議等等。 > 如果您熱衷於贊助這篇文章，請給我發訊息 [email protected] 或在 Twitter 上聯繫我！ 🚀 如果您喜歡我的內容，請透過在我的 GitHub 和 Twitter 上關注我來支持我。 - [GitHub](https://github.com/Anmol-Baranwal) - 繼續建造！ - [推特](https://twitter.com/Anmol_Codes) - [領英](https://www.linkedin.com/in/Anmol-Baranwal/) {% 嵌入 https://dev.to/anmolbaranwal %} 多寫，多啟發。  --- 原文出處：https://dev.to/anmolbaranwal/12-things-you-didnt-know-you-could-do-with-dev-2041
在我最新的文章中，我談到了 Vagrant 以及它如何幫助我們在幾分鐘內建立虛擬機，但如果可以做得更快、更好、更可自訂呢？讓我們學習如何使用 Docker 輕鬆開發、部署和執行應用程式！ **目錄**[介紹](#intro)[Docker 與虛擬機](#docker-vs-vm)[安裝](#installation)[基本指令](#basic-commands)[範例：Jenkins 容器](#example-jenkins)[資料持久化](#data-persistence)[資料持久化-卷](#data-persistence-volumes)[最後的想法](#final-thoughts)[資源](#resources) 介紹 -- 如果你谷歌一下*Docker* ，你會發現 Docker 是一個使用作業系統級虛擬化來建立自包含容器的軟體平台。 幸運的是，我會用簡單的英語向您解釋這意味著什麼。 您可能已經使用 Oracle VM 或[Vagrant](https://letslearnabout.net/devops/vagrant-tutorial-beginners/)建立了多個虛擬機器。 Docker 就是類似的東西（但更好，稍後會詳細介紹）。 使用 Docker，我們選擇一個映像（將 Docker 映像視為配方）並下載它。然後，我們建立該映像或容器的實例，與虛擬機器非常相似。 #### 影像： 用於建立一個或多個容器的套件或模板 #### 容器： 影像的實例彼此隔離，有自己的環境。 但讓我們看看它的實際效果。這是一個docker映像程式碼： ``免費：23.04 執行 apt-get update 執行 apt-get install -y curl nginx` 還記得我說過 Docker 鏡像是一個食譜嗎？在此映像或*配方*中，Docker 取得 Ubuntu 23.04 版本，更新 SO，然後安裝*curl*和*nginx* 。 誠然，這是一個簡短的 Docker 映像版本，但它幫助我們直觀地了解了 Docker 的含義。 現在，使用這個鏡像，我們可以建立一個容器（想像一個虛擬機），它將建立一個類似 Linux Ubuntu 的虛擬機，已經更新，帶有curl和nginx。 我們公司的所有開發人員都可以使用相同的映像來安裝相同的程式、軟體包和版本。不再有「但是…但它可以在我的電腦上執行！」；現在每台計算機都有相同的規格。 Docker 與虛擬機 ----------- 但是…如果 Docker 建立了一個類似 VM 的容器，為什麼我們不只使用虛擬機器呢？ 我可以從低層次的角度解釋Docker 容器如何比虛擬機器更好，甚至可以從另一個網站（如本網站）獲取一些很酷的資訊圖表，並解釋Docker 對每個容器使用相同的內核，使其輕量且快速，只需幾秒鐘即可旋轉一個容器：  但使用 Docker 和 Docker 容器有一個很大的優點： 想像一下，您想要開發一個 21.1 NodeJS：您建立自己的 Docker 映像，在其中取得 Ubuntu 映像，更新它，安裝所有 NodeJS 相關的東西，然後將該映像分發給開發團隊。 在正常設定中，您必須上傳 NodeJS 應用程式，將其部署到您的伺服器上，並且您必須確保伺服器具有所有依賴項並且其 NodeJS 與您的伺服器相容。 而且你不想為此打賭。 使用 Docker，我們可以建立 Docker 映像，將其上傳到 Docker 相容的伺服器，僅此而已。 Docker 伺服器不在乎你使用什麼 Linux、安裝什麼軟體包或你的應用程式的語言是什麼：它只需要執行映像。就是這樣。 讓我強調這一點：我們不關心伺服器安裝了什麼。我們上傳並執行 Docker 映像。這就是我們所要做的。 安裝 -- 您可以安裝 Docker Desktop，這是一個 GUI Docker 應用程式，但我們這些強大的開發人員使用適當的終端工具，因此您將安裝 Docker Engine，即 Docker 的終端版本。 拋開笑話不談，您可以安裝任何您想要的內容： [Docker Desktop](https://docs.docker.com/desktop/)或[Docker Engine](https://docs.docker.com/engine/install/) ，只需確保遵循作業系統的說明即可。例如，對於基於 Debian 的發行版（例如 Ubuntu）： 解除安裝先前的 Docker 版本 `sudo apt-get purge docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin docker-ce-rootless-extras sudo rm -rf /var/lib/docker sudo rm -rf /var/lib/containerd` 安裝 Docker `curl -fsSL https://get.docker.com -o get-docker.sh sudo sh ./get-docker.sh` 檢查 Docker 是否已安裝 `sudo docker version` 讓我們進行一個測試。在終端機中執行以下命令： `sudo docker run docker/whalesay cowsay boo`  **重要提示：**每個 Docker 指令都需要 sudo 權限。您可以將使用者新增至*docker*群組，但儘管如此，它仍然不斷要求 sudo 權限。我發現透過執行命令`sudo chmod 666 /var/run/docker.sock` ，您不再被要求提供 sudo 權限（您可以使用類似的命令，例如*chmod +x* ）。 基本指令 ---- 我們已經啟動並執行了 Docker。讓我們看看一些基本指令。如果你想要的話，你的麵包和黃油： 列出所有圖像 `docker images` 從鏡像下載或執行容器 `docker run <IMAGE_NAME>` 下載特定版本 `docker run <IMAGE_NAME>:<VERSION>` 在背景執行容器 `docker run -d <IMAGE_NAME>` 將容器從後台帶到前台 `docker run attach <ID>` 執行命令 `docker run ubuntu cat /etc/ *release* docker執行ubuntu睡眠15` 下載鏡像以便稍後執行 `docker pull <IMAGE_NAME>` 在docker容器內執行指令 `docker exec <COMMAND>` 連接到容器的 bash `docker run -it <IMAGE_NAME> bash` 列出所有正在執行的容器 `docker ps` 列出所有容器，無論是否執行 `docker ps -a` 執行一個帶有其他容器連結的容器： `docker 執行 -p ： - 關聯： docker run -p 5000:80 --link redis:redis 投票應用` 從 JSON 格式的圖像或容器中獲取詳細訊息 `docker inspect <NAME_OR_ID>` 從背景執行的容器取得日誌 `docker logs <NAME_OR_ID>` 取得影像的所有圖層 `docker history <IMAGE_NAME>` 停止容器 `docker stop <IMAGE_NAME_OR_ID>` 永久刪除容器 `docker rm <IMAGE_NAME_OR_ID>` 永久刪除未使用的影像 `docker rmi <IMAGE_NAME>` 從 Dockerfile 建置映像 `docker build . -t <NAME>` 環境變數 `docker 執行 -e = docker run -e APP\_COLOR=blue simple-webapp-color` 範例：Jenkins 容器 ------------- 讓我們使用一個現實生活中的範例：使用 Jenkins 容器。 在以後的文章中，我將更深入地討論 Jenkins 及其功能，但 Jenkins 是一個很棒的 DevOps CI/CD 工具。讓我們下載 Jenkins 並在我們的電腦上執行它： `docker run jenkins/jenkins # 這會下載並執行 jenkins docker ps # 取得容器ID和端口 碼頭工人檢查\# 取得容器IP` 使用以下命令在虛擬機器中開啟瀏覽器： `docker run -p 8080:8080 jenkins/jenkins # Map the port` 使用以下命令在主機中開啟瀏覽器： 在這裡，我們在 Ubuntu 虛擬機器中安裝並下載 Docker 映像並執行它。我們可以透過開啟瀏覽器並使用 Docker 容器的 IP 和連接埠來查看虛擬機器中的 Jenkins，但透過映射端口，我們可以在主機中開啟 Jenkins。 結構是： 使用 Windows 主機 -> Linux VM -> 在 Linux 中執行的 Docker 容器 現在，Linux 正在執行一個輕量級 Docker 容器，我們可以從 Windows 電腦存取它。那不是很好嗎？ 資料持久化 ----- 我們停止 Jenkins 容器，第二天我們恢復它以繼續工作。但我們已經失去了一切。發生了什麼事？？？？ 僅 Docker 不具備資料持久性。 容器使用自己的資料夾（Jenkins 上的*/var/jenkins\_home* 、MySQL 上的*/var/lib/mysql*等），但是當您停止容器並再次執行映像時，您將從頭開始建立容器。我們對於它可以做些什麼呢？ 我們可以透過連結執行Docker的作業系統中的資料夾和容器的資料夾來實現*資料持久化*。 `mkdir my\_jenkins\_data docker run -p 8080:8080 -v /home/ /my\_jenkins\_data:/var/jenkins\_home jenkins/jenkins` 在這裡，我們建立了一個名為*my\_jenkins\_data*的資料夾，並將其與 Jenkins 資料夾*/var/jenkins\_home*連結，Docker 在其中儲存所有變更。 因此，如果我們再次執行該命令，我們將建立一個新容器，連結儲存的訊息，就像我們正在恢復容器一樣。 資料容量的持久性 -------- 我們可以簡化這個過程。我們可以讓 Docker 透過在*/var/lib/docker/volumes/\**中建立磁碟區來管理磁碟區，而不是為我們的資料夾提供長字串。 建立卷 `docker volume create test_volume` 這會在 /var/lib/docker/volumes/test\_volume 中建立一個磁碟區 `docker run -v test_volume:var/lib/mysql mysql` 我們也可以使用現代的方式，它更長但更聲明性和冗長： `docker run / --mount type=bind, source=/data/mysql, target=/var/lib/mysql mysql` 最後的想法 ----- 正如我們剛剛看到的，Docker 之所以出色，有以下幾個原因： 1. **隔離性**：Docker允許應用程式與底層系統隔離，確保不同環境下的一致性。 3. **效率**：透過容器化優化資源利用率，更有效率地利用系統資源。 5. **可移植性**：Docker容器可以在任何安裝了Docker的機器上執行，從而可以輕鬆地在不同環境中部署應用程式。 7. **可擴展性**：使用 Docker，可以根據需求透過增加或減少容器數量來輕鬆擴展應用程式。 9. **一致性**：Docker確保開發、測試和生產環境的一致性，減少「它在我的機器上執行」的問題。 11. **生態系統**：Docker 擁有豐富的生態系統，提供廣泛的工具和服務來補充容器化，使其成為應用程式部署和管理的多功能平台。 13. **部署**：Docker 讓部署變得更容易、更安全。我們不是管理套件及其版本，而是將 Docker 映像上傳到伺服器。 資源 -- [原帖](https://letslearnabout.net/devops/docker-tutorial-beginners/) [Vagrant 初學者教程](https://letslearnabout.net/devops/vagrant-tutorial-beginners/) [Docker 桌面](https://docs.docker.com/desktop/) [Docker引擎](https://docs.docker.com/engine/install/) [Docker 在 DevOps 中的作用](https://kodekloud.com/blog/role-of-docker-in-devops/) [碼頭工人中心](https://hub.docker.com/) --- 原文出處：https://dev.to/davidmm1707/docker-basics-for-beginners-49l9
*最初發佈於[webdeasy.de](https://webdeasy.de/?referer=dev-f41) 。* --- ### ➡️*[更新，提供更多可用按鈕（點擊）！](https://webdeasy.de/en/top-css-buttons-en/?action=updated) 🚀* --- 按鈕不僅有利於可用性，而且還是網站極為重要的設計元素。因此，這裡收集了一些最好的 CSS 按鈕！ 無論是主頁上粗大的按鈕還是頁腳中小而謹慎的按鈕，對於網站上的使用者流程來說，按鈕都是非常重要的設計元素。對於公司網站來說，通常會使用更謹慎的設計，而創意產業則使用更引人注目和「奇怪」的CSS按鈕。讓所有行業得到平等的服務，你會在這裡發現許多不同的風格和組合。 我和許多其他 Web 開發人員/設計師也對懸停或焦點動畫設定了很高的價值，這就是為什麼以下所有按鈕都會帶來漂亮的動畫。但現在我們直接開始！ *所示筆已獲得麻省理工學院許可。您可以在[Codepen 部落格](https://blog.codepen.io/documentation/licensing/)上找到有關您自己使用的更多資訊。* \#1 懸停發光效果 ========== {% codepen https://codepen.io/twhite96/pen/rggjXp %} [新增一名](https://codepen.io/kocsten)作者 編碼方式：HTML、CSS； \#2 圓形按鈕 ======== {% codepen https://codepen.io/twhite96/pen/zBZwOP %} [新增一名](https://codepen.io/alticreation/)作者 編碼方式：HTML、CSS (SCSS)； \#3 3D 觸摸 ========= {% codepen https://codepen.io/twhite96/pen/ojhCp %} [新增一名](https://codepen.io/jemware/)作者 編碼方式：HTML、CSS； \#4 圖示按鈕 ======== {% codepen https://codepen.io/twhite96/pen/KLbwJw %} 作者：[安德里亞·馬塞利](https://codepen.io/andrea-maselli) 編碼方式：HTML、CSS； \#5 斑點按鈕 ======== {% codepen https://codepen.io/twhite96/pen/BeemVX %} 作者：[希拉蕊](https://codepen.io/hilwat/) 編碼方式：HTML、CSS (SCSS)； \#6 細紐扣 ======= {% codepen https://codepen.io/twhite96/pen/oRRjPP %} 作者：[納塔莉亞‧雷舍特尼科娃](https://codepen.io/natalia-reshetnikova/) 編碼方式：HTML、CSS； \#7 引導按鈕 ======== {% codepen https://codepen.io/twhite96/pen/wbZXYR %} 作者: [dew31794](https://codepen.io/dew31794) 編碼格式：HTML、CSS (SCSS)、JS； \#8 圓形脈衝按鈕 ========== {% codepen https://codepen.io/twhite96/pen/NVJzQW %} 作者：[拉吉·卡邁勒](https://codepen.io/avvign) 編碼方式：HTML、CSS (SCSS)； \#9 CSS 泡棉按鈕 ============ {% codepen https://codepen.io/twhite96/pen/XwGENz %} 作者：[於爾根‧萊斯特](https://codepen.io/webLeister) 編碼格式：HTML (Haml)、CSS (SCSS)； \#10 按鈕編號 045 ============= {% codepen https://codepen.io/twhite96/pen/xNBExN %} 作者：[維托爾·西凱拉](https://codepen.io/vitor-siqueira) 編碼方式：HTML、CSS； \#11 沖水鈕 ======== {% codepen https://codepen.io/twhite96/pen/joXzOw %} [新增一名](https://codepen.io/abhishekbaiju)作者 編碼方式：HTML、CSS； \#12 按鈕概念 ========= {% codepen https://codepen.io/twhite96/pen/Bevpxd %} 作者：[夏姆](https://codepen.io/Shtam3x) 編碼格式：HTML、CSS (SCSS)、JS (CoffeeScript)； \#13 切片按鈕 ========= {% codepen https://codepen.io/twhite96/pen/NpwdGv %} 作者：[莎拉](https://codepen.io/saraharaya) 編碼方式：HTML、CSS； \#14 更精美的圖示按鈕 ============= {% codepen https://codepen.io/twhite96/pen/WoJGRK %} 作者：[伊尚‧薩克塞納](https://codepen.io/ishaansaxena) 編碼格式：HTML (Pug)、CSS (SCSS)； \#15 按鈕變化 ========= {% codepen https://codepen.io/twhite96/pen/WEXwMO %} [新增一名](https://codepen.io/thelaazyguy)作者 編碼方式：HTML、CSS； \#16 簡單按鈕 ========= {% codepen https://codepen.io/twhite96/pen/YgJGMX %} 作者：[蒂貝裡烏·拉杜西亞](https://codepen.io/tyberiu88) 編碼方式：HTML、CSS (SCSS)； \#17 按鈕翻轉 ========= {% codepen https://codepen.io/twhite96/pen/NBwNZa %} 作者：[亞歷克斯摩爾](https://codepen.io/MoorLex) 編碼方式：HTML、CSS (SCSS)； \#18 向右滑動按鈕 =========== {% codepen https://codepen.io/twhite96/pen/brryVq %} [新增一名](https://codepen.io/thelaazyguy)作者 編碼方式：HTML、CSS； \#19 精美按鈕 ========= {% codepen https://codepen.io/twhite96/pen/ZMxQJp %} 作者：[亞歷山大·多·維爾](https://codepen.io/alexandrevale) 編碼方式：HTML、CSS、JS； \#20 翻蓋按鈕 ========= {% codepen https://codepen.io/twhite96/pen/Areng %} 作者：[維琳娜·V·維萊娃](https://codepen.io/vveleva) 編碼格式：HTML、CSS (SCSS)、JS； \#21 按鈕懸停效果集合 ============= {% codepen https://codepen.io/davidicus/pen/emgQKJ %} 作者：[大衛康納](https://codepen.io/davidicus) 編碼方式：HTML、CSS (SCSS)； \#22 CSS 按鈕效果：動畫邊框和發光 ===================== {% codepen https://codepen.io/AnthonyBmm/pen/poooJmO %} 作者：[安東尼](https://codepen.io/AnthonyBmm) 編碼方式：HTML、CSS； \#23 CSS 按鈕懸停 ============= {% codepen https://codepen.io/folaad/pen/YvmRpz %} 作者：[伊姆蘭‧帕德斯](https://codepen.io/folaad)； 編碼方式：HTML、CSS； \#24 仍在視野中 ========== {% codepen https://codepen.io/Alexb98/pen/XWrqpxB %} 作者：[亞歷克斯‧博丁](https://codepen.io/Alexb98)； 編碼方式：HTML、CSS； \#25 環形指示器的純 CSS 按鈕 =================== {% codepen https://codepen.io/mccombsc/pen/ZEzxWPy %} 作者：[科爾‧麥庫姆斯](https://codepen.io/mccombsc)； 編碼方式：HTML、CSS； \#26 按鈕懸停效果 =========== {% codepen https://codepen.io/kjbrum/pen/wBBLXx %} 作者：[凱爾‧維尼](https://codepen.io/kjbrum)； 編碼格式：HTML、CSS (SCSS)、JS； \#27 黏糊糊的菜單 =========== {% codepen https://codepen.io/lbebber/pen/LELBEo %} 作者：[盧卡‧貝伯](https://codepen.io/lbebber)； 編碼方式：HTML、CSS (SCSS)； \#28 SVG CSS3 選單/漢堡按鈕 ===================== {% codepen https://codepen.io/kylehenwood/pen/Alayb %} 作者：[凱爾‧亨伍德](https://codepen.io/kylehenwood)； 編碼格式：HTML、CSS (SCSS)、JS； \#29 按鈕氣泡效果 =========== {% codepen https://codepen.io/Grsmto/pen/RPQPPB %} 作者：[阿德里安‧格拉斯姆托](https://codepen.io/Grsmto)； 編碼格式：HTML、CSS (SCSS)、JS； \#30 動畫提交按鈕 =========== {% codepen https://codepen.io/valentingalmand/pen/MYMZZK %} 作者：[瓦倫丁‧加爾曼德](https://codepen.io/valentingalmand)； 編碼格式：HTML、CSS (SCSS)、JS； \#31 誰不喜歡有趣的按鈕？ =============== {% codepen https://codepen.io/derekmorash/pen/XddZJY %} 作者：[德里克·莫拉什](https://codepen.io/derekmorash)； 編碼方式：HTML、CSS (SCSS)； \#32 另一面 ======== {% codepen https://codepen.io/hakimel/pen/ZYRgwB %} 作者：[哈基姆·埃爾·哈塔布](https://codepen.io/hakimel)； 編碼格式：HTML、CSS (SCSS)、JS； \#33 柔軟的切換鈕 =========== {% codepen https://codepen.io/soulwire/pen/bKens %} 作者：[賈斯汀溫德爾](https://codepen.io/soulwire)； 編碼方式：HTML、CSS (Sass)； \#34 CSS 按鈕動畫 ============= {% codepen https://codepen.io/sashatran/pen/KaLqKR %} 作者：[薩沙](https://codepen.io/sashatran)； 編碼格式：HTML (Pug)、CSS (SCSS)、JS； \#35 提交鈕 (Anime.js) =================== {% codepen https://codepen.io/andrewmillen/pen/MoKLob %} 作者：[安德魯‧米倫](https://codepen.io/andrewmillen)； 編碼格式：HTML、CSS (SCSS)、JS（jQuery 和 Anime.js）； … --- ### ➡️[查看我博客上的其餘按鈕](https://webdeasy.de/en/top-css-buttons-en/?action=read-more)❤️ --- 原文出處：https://dev.to/webdeasy/top-20-css-buttons-animations-f41
展示開放 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 作業，這樣您就不必支付第三方服務費用或完全自己編寫程式碼（我們稍後會更詳細地解釋這一點）。 在我們開始之前... ---------- 悠悠悠悠👋 [](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://www.producthunt.com/posts/open-saas) 為什麼我們要建造它......然後免費贈送它 ---------------------- [我們預發布版本](https://devhunt.org/tool/open-saas)中的初步回饋基本上是正面的，但我們也收到了一些問題，例如： - “它會保持免費嗎？” - “您開源這個的動機是什麼？” 所以我們認為我們應該先回答這些問題。  首先，是的，它是 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://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://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://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://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. 導入並在客戶端呼叫。  客戶端類型將被正確推斷！  ### AI 驅動的範例應用程式（附有 OpenAI API） [](https://www.producthunt.com/posts/open-saas) 人工智慧正在使新的應用程式創意成為可能，這也是我們看到開發人員對建立 SaaS 應用程式的興趣重新抬頭的部分原因。正如我上面提到的，我建造的第一個 SaaS 應用程式[CoverLetterGPT](https://coverlettergpt.xyz)是「GPT 包裝器」之一，我很自豪地說它帶來了約350 美元MRR（每月經常性收入）的可觀被動收入。 我個人認為，我們在軟體開發方面處於最佳狀態，開發新的、有利可圖的人工智慧應用程式有很大的潛力，尤其是「獨立駭客」和「個人企業家」。 這就是 Open SaaS 推出 AI 調度助手演示應用程式的原因。您輸入任務及其分配的時間，AI Scheduler 會為您的一天建立詳細的計劃。 [](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://www.producthunt.com/posts/open-saas) 最後，您擁有自己的程式碼，並且可以自由地將其部署到任何地方，而無需受供應商鎖定。 幫助我們，幫助你 -------- [](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://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
有沒有想過像**《英雄聯盟》** 、 **《要塞英雄**》甚至**《Rockband》**這樣的遊戲是如何建立排行榜模型的？在本文中，我們將了解如何正確建模模式以以極其高效的方式處理它們！ 如果您剛開始使用一般資料庫或資料庫，您可能需要閱讀我的第一篇文章[《資料庫 101：初學者的資料一致性](https://dev.to/danielhe4rt/database-101-why-so-interesting-1344)》。那篇文章記錄了我自己對有多少資料庫範例的探索，因為我的眼光遠遠超出了我以前僅使用 SQL 和 MySQL 的經驗。我正在**資料庫 101**系列中追蹤我的研究。 > 距離我發表本系列的第一篇文章已經快一年了！感謝您在我學習主題時與我在一起。您的評論和想法總是非常有幫助！ 1. 序言 -----  從我還是個孩子的時候起，就像大多數普通開發者一樣，我就對遊戲及其製作方式著迷。說到這裡，我要跟大家介紹一下我兒時最喜歡的遊戲：《吉他英雄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**進行開發時，大多數情況下我們應該理解，根據範例（文件、圖形、寬列等），您應該先了解**要執行哪個查詢**。 在 MySQL 中，主要目標是了解一致性，而在 Scylla 中，您應該專注於查詢並基於該查詢建立模式。 在這個專案中，我們將處理兩種類型的範例，它們是： - 核心價值 - 寬列（聚類） 現在讓我們來談談我們建模的查詢/功能。 ### 2.1 功能：儲存匹配  每次完成 YARG 遊戲時，最有趣的事情就是提交您的分數以及許多其他遊戲內指標。 基本上它將是基於主索引的單一查詢，僅此而已。 ``` SELECT score, stars, missed_notes, instrument, ... FROM leaderboard.submisisons WHERE submission_id = 'some-uuid-here-omg' ``` ### 2.2 功能：排行榜  現在我們的主要目標是：一個超酷的**排行榜**，在良好的資料建模之後你不需要關心它。排行榜是按歌曲計算的，因此每次您播放特定歌曲時，您的最佳成績都會被保存並排名。 然而，這個介面有一個重要的點，那就是有過濾器來準確地知道要帶來「哪個」排行榜： - 歌曲 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 - 匹配建模  首先，讓我們先來了解遊戲本身： - 這是一個節奏遊戲； - 您一次播放一首特定的歌曲； - 您可以在遊戲前啟動“修改器”，讓您的生活變得更輕鬆或更困難； - 您必須選擇一種樂器（例如吉他、鼓、貝斯和麥克風）。 - 遊戲玩法的各個方面都會被跟踪，例如： - 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 排行榜建模  在本文的這一部分中，您將學習一些很酷的寬列資料庫概念。 在我們的排行榜查詢中，如前所述，我們總是需要在 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) 我們將需要盡可能多的開發人員和測試人員與主要貢獻者一起討論遊戲的未來實現！  首先，請確保加入他們的[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
您經常聽到工程師將 Web Components 與 React 進行比較。這是我的看法。 ### Web 元件是規格。你的網路框架不是。 事實上，我們不需要 JavaScript 框架來使用 Web 元件，這是一個巨大的差異。 Web 元件規格自訂元素 v1、範本、插槽和 ShadowDOM 的部分都可以在瀏覽器中運作。這意味著開始編寫 Web 元件時無需依賴關係！  您不需要大量的 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 元件提供可持續的範例。  這並不意味著您現在無法開始使用 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
--- 標題：伺服器端渲染的優點和缺點。何時使用它以及何時選擇其他東西 發表：真實 描述：伺服器端渲染的優缺點。何時使用它以及何時選擇其他東西 標籤：[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
## 長篇大論；博士 SaaS 樣板啟動器隨處可見，但它們非常昂貴（約 200-800 美元）。 我想為 React 和 NextJS 找到最好的免費開源 SaaS Starters，這些 Starters 將在 2024 年積極維護。 在下面的文章中，我將介紹每個初學者的功能及其優缺點，所以如果您有興趣，請繼續閱讀。但我還在下面整理了這個漂亮的圖表，可以一目了然地對它們進行比較（順便說一句，文章底部有同一圖表的文本版本，帶有可點擊的連結）。 享受！  ## 介紹 軟體即服務 (SaaS) 應用程式是獨立駭客和個人企業家賺錢的最佳方式之一。這就是為什麼 SaaS 樣板啟動器正在崛起！但其中一些售價高達 2,000 美元以上，平均價格約為 200 美元。 這就是為什麼我開始尋找是否有免費的開源 SaaS 啟動器以及它們的表現如何。在找到了很多但注意到大多數不再積極維護後，我將範圍縮小到這四個免費的開源 SaaS Starter：BoxyHQ 的 SaaS Starter、Open SaaS、SaaS Starter Kit 和 Next SaaS Stripe Starter。 ## BOXYHQ SaaS 入門套件 “**您的終極企業級 Next.js 樣板”**   - 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://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://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://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
身為一名熱衷於開源的開發人員，我不斷關注新興的專案、函式庫和服務。 你知道那些，似乎有那種特殊的醬汁。  我整理了一份小清單，列出了我在新的一年中看到的趨勢或預期的趨勢。 讓我們來看看我最近遇到的一些最令人驚訝和印象深刻的專案。 ## 1. [Wing](https://github.com/winglang/wing)  Wing 開發了一種名為 **[Winglang](https://www.winglang.io/)** 的面向雲端的程式語言，專門用於解決雲端開發人員面臨的需求和挑戰。 將基礎設施和執行時程式碼組合成一種語言，並具有內建的本機模擬器以及可觀察性和偵錯控制台。 Wing 減少了認知負荷和上下文切換，使開發人員能夠保持創作流程。 Wing 如何促進您的發展： - 更快的迭代周期 - 透過機翼模擬器進行在地化測試 - 透過編寫更少的程式碼部署到雲端 {% cta https://dub.sh/wing-cloud %} 請star ⭐ Winglang {% endcta %} <小時/> ## 2. [也許](https://dub.sh/wing-cloud)  Maybe 最近開源了他們的個人理財 + 財富管理應用程式 一些功能包括： - 投資標桿 - 投資組合分配 - 債務洞察 {% cta https://github.com/maybe-finance/maybe %} 請加註星標 ⭐ 也許 {% endcta %} <小時/> ## 3. [Wstunnel](https://github.com/erebe/wstunnel?tab=readme-ov-file)  Wstunnel使用與http相容的WebSocket協定來繞過防火牆和代理程式。 這允許您傳輸您想要的任何流量並存取您需要的任何資源/網站。 {% cta https://github.com/erebe/wstunnel?tab=readme-ov-file %} 請加註星標 ⭐ wstunnel {% endcta %} <小時/> ## 4. [Spotube](https://github.com/KRTirtho/spotube)  開源、跨平台的 Spotify 用戶端，利用 Spotify 的資料 API 和 YouTube（或 Piped.video 或 JioSaavn）作為音訊來源，跨多個平台相容， 不再需要 Spotify Premium。 順便說一句，這不是另一個 Electron 應用程式😉 {% cta https://github.com/KRTirtho/spotube %} 請加註星標 ⭐ Spotube {% endcta %} <小時/> ## 5. [柔術](https://github.com/martinvonz/jj)  Jujutsu 是一個軟體專案的版本控制系統，以 Rust 編寫。 您用它來： - 取得/複製您的程式碼 - 追蹤程式碼的更改 - 發布這些變更以供其他人查看和使用。 {% cta https://github.com/martinvonz/jj %} 請star ⭐ Jujutsu {% endcta %} <小時/> ## 6. [黃蜂](https://github.com/wasp-lang/wasp)  Wasp（Web 應用程式規格）是一個類似 Rails 的 React、Node.js 和 Prisma 框架。 在一天之內建立您的應用程式並使用單一 CLI 命令進行部署！ - 快速開始 - 無樣板 - 沒有鎖定 {% cta https://github.com/wasp-lang/wasp %} 請加註星 ⭐ 黃蜂 {% endcta %} <小時/> ## 7. [最佳化](https://github.com/refinedev/refine)  用於建立內部工具、管理面板、儀表板和 B2B 應用程式的 React 框架，具有無與倫比的靈活性。 Refine 不限於一組預先設計樣式的元件，而是提供以下集合： - 輔助掛鉤 - 成分 - 供應商 {% cta https://github.com/refinedev/refine %} 請加註星 ⭐ Refine {% endcta %} <小時/> ## 8. [DbGate](https://github.com/dbgate/dbgate)  DbGate 是一個跨平台資料庫管理器，其設計目的是在同時處理更多資料庫時使用簡單且有效率。 **支援的資料庫：** - MySQL - PostgreSQL - SQL伺服器 - 甲骨文（實驗性） - MongoDB - 雷迪斯 - SQLite - 亞馬遜紅移 - CockroachDB - 瑪麗亞資料庫 {% cta https://github.com/dbgate/dbgate %} 請star ⭐ DBGate {% endcta %} <小時/> ## 9. [ivy](https://github.com/unifyai/ivy)  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
網路蘊藏著許多寶藏，但很多人卻不知道。 這裡有 10 個資源豐富的網站，可以在網路上免費學習任何東西： --- ## 1. 編碼 **免費程式碼營** 您可以免費學習編碼、建立專案並獲得認證。 **您可以獲得以下認證：** - 響應式網頁設計 - Javascript演算法與資料結構 - 前端開發庫 - 資料視覺化 - 關係型資料庫 - 和更多 ``` Link: https://www.freecodecamp.org/ ```  --- ## 2. 行銷 **行銷範例** 簡短、溫馨、實用的行銷範例之家，可幫助您更好地進行行銷。 **取得範例：** - 客戶獲取 - 轉換 - 保留 - 品牌策略 - 推薦策略 - 和更多 ``` Link: https://marketingexamples.com/ ```  --- ## 3. 無程式碼 每天獲得 30 分鐘的簡短課程，指導您 100 天的無程式碼之旅，以提升您的無程式碼技能。 - 你得到什麼？ - 指導課程 - 技巧和竅門 - 靈感鏡頭 - 驚喜獎勵 - 獎勵迷你挑戰 - 內建公共提示 ``` Link: https://www.100daysofnocode.com/start-the-challenge ```  --- ## 4.人工智慧 **人工智慧 100 天** 每天獲得 30 分鐘的簡短課程，指導您的 AI 學習之旅。 **你了解什麼？** - 人工智慧在日常生活中的無限應用 - 你知道科技兄弟在談論什麼。 - 你每天都使用人工智慧來建立很酷的專案並消除無聊的工作。 - 你知道為什麼你對人工智慧感到焦慮，甚至更興奮。 ``` Link: https://www.100daysai.com/ ```  --- ## 5. 語言 **多鄰國** 以遊戲化的方式學習您想要學習的任何語言，以保持您的動力。 **你得到什麼？** - 透過快速、簡短的課程，您將獲得積分並解鎖新級別，同時獲得現實世界的溝通技巧。 - 結合研究支援的教學方法和令人愉快的內容來建立課程。 - 類似遊戲的功能、有趣的挑戰和提醒，輕鬆養成語言學習的習慣。 - 課程經過量身定制，可幫助您以適當的水平和節奏學習。 ``` Link: https://www.duolingo.com/ ```  --- ## 6. 資料結構與演算法 **CSVISTOOL** 了解資料結構和演算法如何以視覺化方式運作。 **你能學到什麼？** - 清單 - 堆疊、佇列和出隊 - 樹和跳過列表 - 哈希圖 - 排序和快速選擇 - 字串搜尋 - 圖形演算法 - 和更多 ``` Link: https://csvistool.com/ ```  --- ## 7. 使用者體驗 **使用者體驗法則** 策劃設計人員在建立使用者介面時可以考慮的最佳實踐。 **你得到什麼？** - 啟發式 - 原則 - 格式塔 - 認知偏差 ``` Link: https://lawsofux.com/ ```  --- ## 8.Excel + Power BI **尚杜** 每週接收有關 Excel 和 Power BI 最佳提示的電子郵件 **你得到什麼？** - 強大的提示、資源和影片，幫助您在工作中取得進步。 - 資料分析、圖表、報告和自動化的真實範例 - 獎勵文件、PDF 指南和先睹為快 ``` Link: https://chandoo.org/wp/subscribe/ ```  --- ## 9. 時事通訊的成長 **反向成長** 了解如何從網路上最好的時事通訊成長故事中發展您的時事通訊。 **你得到什麼？** - 時事通訊企業如何賺錢 - 他們如何成長 - 他們如何透過時事通訊獲利 ``` Link: https://growthinreverse.com/ ```  --- ## 10.心智模型 **法南街** 了解讓您生活更美好的心理模式。 **如何取得？** - 核心心智模型 - 物理和化學的心理模型 - 生物學的心理模型 - 系統思維的心智模型 - 以及更多 ``` Link: https://fs.blog/mental-models/ ```  --- ## 與我聯繫 領英：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
我用react寫了一個網站，想要做一個有黑暗模式的功能，但是背景顏色卻沒辦法完全改變。 ```css #light { color: black; background-color: #f0e0f7; } #dark { background-color: #26272a; color: white; } ``` 
### 讓我們開始吧！ 🚀 將網站丟入野外網路是一件大事，因此確保首先加強每個細節是關鍵。 我的意思是，您想確保您的網站在手機和平板電腦上看起來很流暢，而不僅僅是桌上型電腦（響應能力）。並且您希望真實的人也能夠找到並使用您的網站（SEO）。 我列出的這份清單列出了 14 項必須做的事情 - 涵蓋可用性、可存取性、SEO 優化、出現問題時的備份計劃、確保事物安全的 SSL 以及使用 CDN 加快加載時間等內容。 所有需要檢查的關鍵框，以便您的網站在發佈到世界各地之前被鎖定和加載。 🌐  *** ### 簡介⏱️ - 反應能力📱 - 輔助使用♿ - 可用性👍 - 加載時間短⏱️ - 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
是的，你沒聽錯，我的 GitHub 自述文件有淺色和深色模式，甚至是響應式的。在這篇文章中，我將簡要介紹我用來實現這一目標的技巧（以及使它變得困難的事情！） 但首先，讓我們看看我的個人資料在不同的螢幕尺寸和顏色偏好下是什麼樣子（或者親自嘗試一下 [GrahamTheDevRel 在 GitHub 上的個人資料](https://github.com/GrahamTheDevRel)！ ## 深色模式  ## 移動的 請注意以下部分的不同按鈕設計和佈局。 建立這些按鈕比您想像的要困難得多！  ## 燈光模式 我忍不住在英雄部分錶達了不同的訊息，當然我只是在開玩笑！ 🤣💗  ## 喔...我有沒有提到它是動畫的？ 請記住，前 5 個按鈕都是單獨的圖像！花了一點功夫才把它弄好！ ## 使用了一些技巧！ 好吧，所以你來這裡不僅僅是為了看我的個人資料！ （如果你這樣做了，也愛你！🤣💗） 不，你是來學一些技巧的，這樣你就可以自己做對吧？ 嗯，有一個“技巧”，然後只需一個 HTML 功能，您就可以自己完成此操作。 讓我們從最有趣的開始： ## 製作響應式按鈕和圖像的技巧！ 網站上的按鈕和英雄圖像是有趣的部分。 為了讓它們發揮作用，我們使用了許多人沒有聽說過的 SVG 功能「<foreignObject>」。 ## `<foreignObject>` 和 SVG 獲勝！ 這是使事物響應的最大技巧。 你看，在 markdown 文件中我們能做的事情非常有限（這就是為什麼我們看到人們使用 `<table>` 等進行佈局......ewww）。 但 SVG 有一個獨特的功能，[`<foreignObject>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject)。 這允許您在 SVG 中包含許多內容，**包括 HTML 和 CSS。** 有了它，我們就有了更多的力量！ 您可以在 CodePen 的演示中看到（單擊按鈕可以更改外部容器的大小，它代表頁面上圖像的可用空間）： ### SVG 中 CSS 的 CodePen 演示 **一定要查看 html 面板**，所有技巧都在那裡！ https://codepen.io/GrahamTheDev/pen/mdomxyy 關鍵部分在這裡： ``` <svg xmlns="http://www.w3.org/2000/svg" fill="none"> <foreignObject width="100%" height="100%"> <div xmlns="http://www.w3.org/1999/xhtml"> <!--we can include <style> elements, html elements etc. here now, with a few restrictions! Note it must be in xHTML style (so <img src="" /> not <img src="" > to be valid --> </div> </foreignObject> </svg> ``` 從那裡我們可以使用內聯 `<style>` 元素和標準 HTML 元素來建立響應式映像。 但您可能會注意到該演示中使用的標記的另一件事。 ## 圖片很吸引人！ 我將圖像（SVG 氣泡和我的圖像）作為 [`data` URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs ）。 這是因為所謂的[內容安全策略 (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 及其在 GitHub 上的實作方式。 現在我不會解釋 CSP，但本質上它們有一條規則：「嘿，除了當前上下文之外，不能從任何地方加載圖像」。 對於普通圖像來說這不是問題，但這是圖像中的圖像，並且該圖像的“上下文”就是其本身。 因此，如果我們嘗試在 SVG 中包含另一個圖像，它將來自不同的位置並破壞我們的 SVG。 幸運的是，「資料」 URI 被視為相同的上下文/來源。 這就是為什麼它們在我們的範例中使用的原因，如果您想自己實現的話，還需要考慮另一件事！ ## 最後一個技巧，「<picture>」元素且沒有空格。 我的意思是，這甚至不是一個技巧！ 我的自述文件中的最後 4 個框是響應式的（並尊重顏色偏好），但它們使用標準媒體查詢來工作。 這裡唯一的考慮是嘗試找到一個有效的斷點，恰好是 GitHub 上的 768px。 然後我建立了 4 組圖像： - 深色模式和桌面 - 黑暗模式和移動設備 - 燈光模式和桌面 - 燈光模式和移動。 ### 大或小圖像 為了獲得正確的圖像，我們在每個來源上對桌面（大）圖像使用“media =”（min-width：769px）`，對於移動（小）圖像使用“media =“max-width：768px）”放入我們的“<picture>”元素。 ### 淺色和深色模式 若要取得淺色或深色模式，我們使用[`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)媒體查詢。 ### 結合我們的查詢和來源 然後我們只需設定「<picture>」元素來使用「(**寬度查詢**)和(顏色首選項)」的組合來選擇我們想要的來源： ``` <picture> <source media="(min-width: 769px) and (prefers-color-scheme: light)" srcset="readme/[email protected]"> <source media="(max-width: 768px) and (prefers-color-scheme: light)" srcset="readme/[email protected]"> <source media="(max-width: 768px) and (prefers-color-scheme: dark)" srcset="readme/[email protected]"> <img src="readme/[email protected]" alt="You will find me writing about tech, web dev, accessibility, breaking the internet and more over on DEV! Purple and neon pink design with Graham pointing at the next section" width="50%" title="My writing on DEV"> </picture> ``` 本身並不困難，但建立 4 種圖像變體非常耗時。 ### 沒有空格 我遇到了最後一個問題。 底部實際上由 4 個不同的圖像組成（是的，我必須為其建立 16 個不同的圖像...）。 這樣做的原因是每個部分都是一個可點擊的連結。 並不複雜，但有一個小問題要注意。 如果您想要讓兩個影像直接並排接觸（因此兩個影像的寬度均為 50%），則必須刪除錨點、圖片元素甚至這些圖片元素內的來源之間的所有空白。 否則 GitHub 會為你的元素加入一些邊距，並且它們將不會在同一行。 另外，儘管我刪除了所有空白，但我遇到了另一個限制，但第一行和第二行之間仍然有 8px 的間隙，您無法遺憾地刪除它（因此之間的線！）。 ## 包起來！ 我可能會在未來對內容安全策略、「<picture>」元素技巧，當然還有「<foreignObject>」做一些更深入的解釋。 這更多的是對概念的介紹，以便您可以自己使用它們，而不是教程。 但現在你已經了解我使用的技巧，我希望看到你建立一個比我的更漂亮的 GitHub 自述文件了！ 如果您這樣做，請在評論中分享！ 💪🏼🙏🏼💗 大家編碼愉快！ 💗 --- 原文出處：https://dev.to/grahamthedev/take-your-github-readme-to-the-next-level-responsive-and-light-and-dark-modes--3kpc
我正在寫這些隨機筆記作為**公開信，寫給我在 React**（更廣泛地說，開源）**社區**中深深信任的人。像是坦納·林斯利、勞裡·沃斯、卡西迪·威廉斯、麥可·傑克森、馬克·艾瑞克森、凱爾·馬修斯、蘇菲·阿爾珀特等人。 **在過去的幾個月裡，我一直對 React 感到矛盾**。它始於伺服器元件基本上在框架會議上宣布的日子，React 文件開始建議使用外部框架進行 React 開發。昨晚閱讀了 [Cassidy 的帖子](https://blog.cassidoo.co/post/annoyed-at-react/) 並分享了她的願景後，我也有表達我的擔憂的衝動。 **我在 2016 年愛上了 React**，當時 Angular 發布了 Angular 2，我們擔心會發生重大變化。我立即愛上了 React 社區，儘管我從未積極參與。 我記得蘇菲·阿爾珀特和丹·阿布拉莫夫之間的推文。我還記得 2016 年 Michele Bertoli 在 ReactJsDay（義大利）上的第一次演講，讓我眼前一亮。我無法忘記 2018 年版的 ReactJsDay，當時 Michael Jackson 在我們面前重新建立了大部分 React Router 實時編碼 - 那真是美好的日子！ 無論是作為 Web 開發機構還是現在作為產品公司，React 一直是我們的成功選擇。當我想起那一天（我相信是2020 年1 月2 日）時，我仍然很激動，當時我向Guillermo Rauch 展示了React Bricks 的第一個MVP，他是第一個相信這個專案的人，並給了我繼續下去的信心。 。 **然而，今天我看到兩個問題，讓我對 React 的喜愛少了一些**，並讓我擔心新開發人員可能會被它嚇倒：所有權和復雜性。 ## 所有權 至於所有權，我不是特別喜歡： 1. React [建議使用框架](https://react.dev/learn/start-a-new-react-project)啟動專案，建議使用三大主流開源框架之一，而不是僅使用反應。 2. 在框架會議期間，React Server 元件等新的 React 功能首次向社群的很大一部分介紹，就好像這只是一個框架成就一樣。 3. 最受歡迎的框架，它僱用了一些來自React 核心團隊的人員（這不是一件壞事，但肯定為他們提供了對開發的特權洞察力）使用金絲雀版本，而[React 的最後一個版本](https://github.com/facebook/react/releases) (18.2) 是2022 年6 月。透過這種方式，金絲雀功能進入了許多新React 專案的程式碼庫，成為“事實上的”穩定版本，但僅適用於 a可以安全地利用金絲雀功能的框架。 此外，諸如伺服器操作之類的功能（在雲端平台上託管時會觸發計量無伺服器函數呼叫）可能會增加未來前端應用程式的託管成本。雖然目前這不是問題，因為不存在壟斷，我們有選擇的自由，但**我希望**為社區提供一種方式**以保證明天仍然有多種選擇**可用。請理解，在這方面我不認為任何人是「邪惡的」。私人公司和社區之間的合作可以帶來偉大的成就。這只是一個分離關注點和責任的問題。 ## 複雜性 我從 1996 年開始建立網站，當時我 17 歲。當時，您建立了 HTML 檔案並將它們上傳到 FTP 伺服器上由 Web 伺服器提供服務的資料夾中。我管理自己的實體伺服器（Pentium 120），將其安置在當地的網路供應商。它在 Windows NT4 IIS 上執行作為 Web 伺服器，在 BIND 上執行 DNS，在 IPSwitch IMail 伺服器上執行電子郵件。一切都簡單明了。 如今，Web 開發變得更加強大，但也更加複雜。隨著轉譯器、捆綁器和框架的引入，我們已經失去了對幕後發生的事情的了解。然而，React 以其乾淨的單向資料流而脫穎而出。鉤子的事情變得有點複雜（它有一些幕後黑魔法:)，但它是可以管理的，並且最終是一個不錯的選擇。 **使用伺服器元件，一切都變得更加複雜，難以掌握**。而且，事實上它們是最廣泛使用的 React 框架的預設選擇，這在某種程度上迫使新手也學習這種新範例。我了解 RSC 的優勢，但現在我們甚至可以在同一個 React 框架內使用[兩種不同的方式](https://overreacted.io/the-two-reacts/)來建立東西。 我們最近完成了讓 React Bricks 函式庫與 RSC 相容的任務。這需要一個月的工作和數千行程式碼。然而，結果是，最終為開發者提供的 API 並不像以前那麼乾淨。我不確定為了輕微的效能提升而犧牲簡單性是否會真正使我們的客戶受益。儘管如此，由於它既是「預設」又是閃亮的新事物，我們必須擁有它。 **同時，隨著新框架的出現，React 世界之外發生了許多有趣的事情**。我不想成為新程式設計師現在就嘗試選擇他們的第一個框架，因為這個決定非常艱難。 React 是最受歡迎的，Vue 更容易使用，Svelte 是一個很酷的想法，Astro 真的很棒，然後還有由非常聰明和謙遜的 Ryan Carniato 開發的信號和 SolidJS。 Qwik 也非常聰明，我喜歡這種方法（它是由 React Bricks 的競爭對手建立的……但我非常尊重他們:)。所以……基礎框架的選擇已經這麼複雜了！ ## 一個夢？ 在這種複雜的場景中，**擁有一個「預設的官方」React 框架將是有益的，該框架涵蓋建立 SEO 友善網站的基本需求**，具有路由、SSG、SSR、ISR（以及所有排列）這些字母；）。我知道 Remix 團隊不會同意 SSG 的必要性，但我認為它有一個有效的用例。我希望它始終能夠在 Linux 機器上自行託管。 我設想這個預設框架由 React 社群開發，並有一個由來自 React 生態系統的公認貢獻者組成的**指導委員會（透過投票過程？）**。我知道通常開源不會以這種方式工作，但是......我夢想著這個“probi viri Fellowship of the Ring”做出決定。 這個預設框架**不應該旨在包含所有閃亮的新東西**，這些新東西可以在我使用和喜愛的 Remix 或 Next.js 等其他框架中找到。我相信它應該作為社區創造的堅實起點。我認為我們今天已經有了一些很棒的東西可以開始（坦納？）。 至於 RSC，我認為避免水合的概念很棒，但我們需要一種新型的伺服器客戶端整合來使它們易於使用。如果它們仍然很複雜，在當前的限制下，以簡單性換取效能對大多數網站來說不會有好處。無論如何，與 Qwik 之類的東西相比，RSC 可能在效能方面有所損失，因為它們執行相同的工作兩次，處理客戶端上序列化 JSON 的區塊。然而，這是需要單獨討論的材料。 ## 開放問題 所以，經過這麼長時間的意識流，我想向社區提出一些問題： 1. 您對React的未來有何看法？ 2. 您認為在沒有贊助公司但有選舉的指導委員會的情況下建立一個社區驅動的框架是否可行？這個獨立的指導委員會如何能夠得到社區或企業用戶的經濟支持，以保持其獨立性？ 馬泰奧·弗拉納 2023 年 1 月 16 日 --- 原文出處：https://dev.to/matfrana/react-where-are-you-going-5284
每個人都使用 CSS 框架來簡化工作並節省時間，Bootstrap 過去是，現在仍然是框架市場的王者。每個研究所、幾乎 YouTube 上的每個教學都在使用 Bootstrap，開發人員沒有學習 CSS 基礎知識和使用 Bootstrap。那時我也是個初學者，我從[W3schools](https://www.w3schools.com/)和[Lynda](https://www.lynda.com/)學習了HTML和CSS。然後我用了很多浮動來製作網頁，還蠻喜歡這樣的方式。 ___ 響應式設計是我的下一個目標，所以CSS 框架是實現響應式最簡單的方法，我嘗試閱讀文件並觀看Bootstrap 影片，但Bootstrap 的大量類和不方便的命名讓我感到害怕，而且我不喜歡使用bootstrap 因為我認為每個使用Bootstrap 的網站看起來都非常相似，它也會將樣式作為預設值應用到元素上，我嘗試了兩次或多次，但沒有在我的腦海中得到Bootstrap，所以我找到了一些替代方案，例如Foundation 和Material，但它們就像Bootstrap 一樣。我只是想讓我的網站響應式，然後我找到了 [Brad Traversy Skeleton CSS] 的影片(https://www.youtube.com/watch?v=nVANwdryGVc) ___ 我喜歡 Skeleton CSS，但現在他們的開發人員沒有更新它，它不是基於 CSS 網格或 Flexbox。裡面有些混亂，然後我發現了[Bulma](https://www.bulma.io/) ，我只是像平常一樣使用YouTube，然後我來到了[Bulma.css 教程影片](https://www.bulma.io/) www.youtube.com/watch?v=IiPQYQT2-wg) 標記為“最簡單的框架，你可以在20 分鐘內學會”，嗯，我看了它，它確實改變了我的生活，這確實是最簡單的框架，即使你不知道不必記住課程，它有一些優點： - 無預設樣式 - 強大的 Flexbox 網格 - 小尺寸（以 Kbs 為單位） - 可重複使用並且可以修改Sass - 沒有Javascript，只有CSS - 可重複使用的元件 ___ 我有點迷戀布瑪（我想）但是你可以嘗試一下。 順便說一句，這是我的第一篇文章，你可以在 Twitter 上關注我😉 [https://www.twitter.com/justaashir](https://www.twitter.com/justaashir) --- 原文出處：https://dev.to/justaashir/bulma-the-most-underrated-framework-of-the-css-framework-era-2gj8
## 簡介 本文是一份指南，旨在透過易於使用且引人入勝的資源來幫助 Python 程式設計新手。從適合初學者的庫到互動式編碼平台，您應該找到最適合您的！  --- # 圖書館 以下 Python 函式庫易於使用，非常適合 Python 入門。  ## 1- [Taipy](https://github.com/Avaiga/taipy) Taipy 是 Python 領域的一個新程式庫，非常適合用最少的程式碼建立強大的 Web 應用程式。使用 Taipy 開始使用 Web 應用程式。 🔑特點： - 豐富的互動性 - 為您的佈局、樣式等提供更多自訂功能（無需 CSS） - 多頁和多用戶應用程式 ---  您的支持意義重大🌱，並且在許多方面為我們帶來了很大的幫助，例如寫文章！ 🙏 --- ## 2- [海龜圖形](https://docs.python.org/3/library/turtle.html) 絕對初學者的起點。這個預先安裝的 Python 程式庫以有趣且直覺的方式教您 Python 程式設計的基礎知識。 --- ## 3- [EasyGUI](https://easygui.sourceforge.net/) 開始使用此庫的圖形使用者介面 (GUI)。 它的簡單性使其成為初學者建立基本 GUI 的首選。 --- ## 4- [Matplotlib](https://github.com/matplotlib/matplotlib) 這個小部件庫成為 Python 領域的首選是有充分理由的。憑藉廣泛的圖表類型，您可以繪製任何 2D 圖表。 該庫允許透過細粒度的圖形元素進行顯著的客製化。 --- ## 5- [Pandas](https://github.com/pandas-dev/pandas) 即使所有 Pythonista 都使用 Pandas，這個函式庫也很容易理解，並且允許您做很多事情。 您可以了解資料框和系列以及如何有效地處理資料。 🔑特點： - 從各種來源載入資料 - 重塑資料框 - 透過基本統計進行基本資料分析 --- ## 6-[桑尼](https://thonny.org/) Thonny 對於初學者來說是一個很棒的 IDE。 它具有幫助理解程式設計過程以及直接編寫和除錯 Python 程式碼的出色功能。您可以在這個輕鬆的環境中嘗試以前的庫。 --- # 編碼平台 程式設計平台提供類似學術的環境，非常適合快速、結構化的學習。  ## 7- [Datacamp](https://www.datacamp.com/) 這是我開始使用Python的平台，怎麼能不包括它呢？ Datacamp 是一個互動式學習平台，專注於圍繞資料科學和分析進行程式設計。他們有不同程度的課程，使其成為開始學習 Python 和資料分析概念的好地方。 --- ## 8-【程式碼實戰】(https://codecombat.com/) Code Combat 讓學習變得有趣，就像您在玩遊戲的同時學習 Python 一樣。 這個平台有一個世界，您可以在遊戲中提升角色，同時學習如何編碼。 這個網站適合年輕一代，但我建議任何年齡的初學者嘗試！ --- ## 9- [Sololearn](https://www.sololearn.com/) 這個平台透過他們的社區旋轉和發展。 Sololearn 專注於簡短的 Python 課程，是隨時隨地學習 Python 的絕佳工具。 --- # 教學與挑戰 教學和挑戰是透過小型且可管理的專案來增強和測試 Python 技能的絕佳方法。  ## 10- [Codechef](https://www.codechef.com/) 該網站以程式設計競賽為特色。 對於那些透過競賽學得更好的人來說，Codechef 適合您。它們提供各種挑戰來滿足所有程式設計等級的需求。 --- ## 11- [Codewars](https://www.codewars.com/) 該社區網站還提供程式設計挑戰。 這是使用 Python 學習和挑戰自己的好方法。 --- ## 12- [精通機器學習](https://machinelearningmastery.com/) Machine Learning Mastery 提供機器學習和 Python 的教學和書籍。 這些教程對我的一些機器學習專案很有幫助，我仍然不時回顧它們！ --- # 完整專案 使用 Python 建立整個專案是在現實場景中測試您的技能的好方法。一般來說，這些專案是對你的投資組合的一個很好的補充。  ## 13- [Kaggle](https://www.kaggle.com/) 這個平台是我測試 Python 和機器學習技能的首選平台。該平台展示資料科學專案。 Kaggle 也是加入到您的履歷中的一個很好的資源。 --- ## 14- [freeCodeCamp](https://www.freecodecamp.org/) 儘管 freeCodeCamp 專注於 Web 開發，但該平台也使用 Python 專案。邊做邊學的好方法。 --- # 黑客松 黑客馬拉松是在動態和協作的環境中學習的好方法。參加黑客馬拉鬆在學術和專業上都很有價值。  ## 15- [駭客大聯盟](https://mlh.io/) MLH 為來自世界各地的學生舉辦黑客馬拉松。他們的黑客馬拉松可以在現場進行，也可以在網路上進行。 黑客馬拉松非常適合將 Python 技能應用到實際專案中。 此外，這是在面試或履歷中展示專案的好方法。 --- ## 16- [Devpost](https://devpost.com/) Devpost 是一個線上黑客馬拉松網站。他們提供的活動<在主題和獎品方面有很多選擇！ --- ## 結論 這些資源提供了多種方式來透過這些易於使用的函式庫、互動式學習平台和實際挑戰來啟動您的 Python 程式設計之旅。 ---  如果您有任何問題或回饋，請隨時與我們聯繫！ --- 原文出處：https://dev.to/taipy/python-playground-16-ways-to-get-started-4fgg
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
