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

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

🔍 搜尋結果：netlify

🔍 搜尋結果：netlify

加入我們的 Netlify 動態網站挑戰賽：獎品為 3,000 美元！

--- 標題：加入我們參加 Netlify 動態網站挑戰：獎品為 3,000 美元！ 發表：真實 說明：使用 Netlify 的全新不可知平台原語證明您的技能、贏得現金獎勵並獲得經驗。 標籤： netlifychallenge、devchallenge、webdev、javascript 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbcz1t2nzsbn3ygf1jx3.jpg 使用 100:42 的比例可獲得最佳效果。 ===================== 發佈於: 2024-04-23 14:24 +0000 =========================== --- 我們很高興與[Netlify](https://netlify.com)合作，為您帶來下一個 DEV 挑戰。本次挑戰賽的主題是跨任何框架的動態和高效能數位體驗！ Netlify 動態網站挑戰賽將持續到**5 月 12 日**，您將有機會證明您的技能、贏得現金獎勵並獲得 Netlify 新的[不可知平台原語的](https://www.netlify.com/platform/primitives/)經驗。跨所有框架解鎖前所未有的功能 - Next.js、Astro、Nux、Remix，應有盡有！ 這項挑戰提供了一個投資開放網路、開源以及您在新的和不斷發展的框架方面的技能的機會。我們期待看到您創造的作品。 我們希望您至少嘗試我們的三個提示中的一個！ 提示 -- ### 視覺饗宴 使用**Netlify 圖像 CDN**建立動態圖像庫 - 您的專案應利用 Netlify 的按需圖像轉換功能，並演示如何獲取圖像、應用調整大小和格式優化等轉換，以及在圖庫佈局中渲染優化的圖像。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20 盛宴。* %0A%0A%0A%23%23%20什麼%20I%20Built%0A%3C！ --%20Share%20an%20概述%20about%20您的%20專案。 0A%23%23 %20Demo%0A%3C!--%20將%20a%20link%20分享至%20您的%20Netlify%20app%20和%20在此處包括%20some%20螢幕截圖%20 。 -%3E%0A%0A%3C!--%20Did%20you% 20實現%20additional%20platform%20primitives%20like%20Netlify%20Blobs%20or%20Cache%20Control%3F%20告訴%20us%2000%20Cache%20Control%3F%20告訴%20us%2000%20abouttoo% !%20You%20may%20qualify%20for%20more%20than%20one%20prompt.% 20--%3E%0A%0A%3C!--%20Team%20Submissions%3A%20請%20pick%20one%20m %20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV %20usernames%20directly%20in%20the%20body%20of%20the%2000%20in%20the%20body%20of%20the%20postA% 3C!--%20Don%27t%20forget%20to%20add%20a%20cover%20image %20(如果%20你%20想要).%20--%3E%0A%0A%0A%3C!-- %20感謝%20%20的參與!%20--%3E %} 視覺饗宴提交模板 {% 結束%} ### 使用 Blob 建置 建立使用**Netlify Blob**讀取和寫入資料的應用程式 - 您的專案應示範儲存和擷取 Blob 物件、處理元資料以及將 Blob 儲存與 Netlify Functions 整合以處理任務。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20%20Blob。* %0A%0A%0A%23%23%20什麼%20I%20Built%0A%3C！ --%20Share%20an%20概述%20about%20您的%20專案。 0A%23%23 %20Demo%0A%3C!--%20將%20a%20link%20分享至%20您的%20Netlify%20app%20和%20在此處包括%20some%20螢幕截圖%20 。 %0A%0A%3C!--%20Did%20you%20implement%20additional% 20platform%20primitives%20like%20the%20Netlify%20Image%20CDN%20or%20Cache%20Control3F%20Image%20CDN%20or%20Cache%20Control20%20T%200%2020 %20You%20may%20qualify%20for%20more%20than%20one%20prompt.% 20--%3E%0A%0A%3C!--%20Team%20Submissions%3A%20請%20pick%20one%20mick% 20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV %20usernames%20directly%20in%20the%20body%20of%20the%20postE20A% !--%20Don%27t%20forget%20to%20add%20a%20cover%20image %20（如果%20你%20想要）。 20感謝%20%20參與！ 使用 Blob 提交模板建置 {% 結束%} ### 巧妙的緩存 建立一個利用**Netlify 細粒度快取控制功能**的 Web 應用程式 - 您的專案應該實現自訂 Cache-Control 標頭，利用 Netlify-CDN-Cache-Control 標頭進行邊緣緩存，並使用快取標記演示快取失效。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20快取*%0A%0A%0A%23%23%20What%20I%20Built%0A%3C！ --%20Share%20an%20overview%20about%20your%20project.%20--%3E%0A%0A% 23% 23%20Demo%0A%3C！ --%20將%20a%20link%20分享到%20您的%20Netlify%20app%20和%20在此處包含%20some%20螢幕截圖%20。 20--%3E%0A%0A%23%23% 20Platform%20Primitives%0A%3C!--%20告訴%20us%20如何%20you%20利用%20Netlify%20Cache%20Control.%20--%3E %0A%0A%3C!--%20Did%20you%20implement%20additional %20platform%20primitives%20like%20the%20Netlify%20Image%20CDN%20or%20Blobs%3F%200%20%20%20%20%！ 20You%20may%20qualify%20for%20more%20than%20one%20提示。 %20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV% 20usernames%20directly%20in%20the%20body%20of%20the%20postA%20in%20the%20body%20of%20the%200.A% 3C!--%20Don%27t%20forget%20to%20add%20a%20cover%20image% 20(如果%20你%20想要).%20--%3E%0A%0A%0A%3C!-- %20感謝%20參與%20！ 巧妙的快取提交模板 {% 結束%} 評審標準和獎項 ------- 所有三個提示都將根據以下內容進行判斷： - 底層技術的使用 - 可用性和使用者體驗 - 無障礙 - 創造力 每個提示的獲勝者將收到： - $1,000 禮品卡或同等金額 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **所有提交有效提交的參與者都**將在其 DEV 個人資料中收到完成徽章。 如何參與 ---- 為了參與，您需要使用與每個提示關聯的提交範本來發布貼文。所有提交都必須在 Netlify 上建置和執行，並至少利用每個提示中所述的一個平台原語。提交的作品將根據 Netlify 免費入門平台進行評審，因此任何使用 Netlify 付費服務的行為都將在評審過程中考慮。 **請在提交之前查看我們的完整[規則、指南和常見問題解答頁面，](https://dev.to/challenges/netlify)以便您了解我們的參與指南和[官方競賽規則](https://dev.to/page/netlify-dynamic-site-challenge-contest-rules)（例如資格要求）。** 需要幫忙？ ----- 您可以利用 Netlify 的文件和教學來了解 Netlify 平台： - [平台原語](https://docs.netlify.com/platform/primitives/) - [開發者文件](https://docs.netlify.com/get-started/) Netlify 團隊也將為挑戰期間需要技術支援的任何人發布協助線程。關注他們的組織，這樣您就不會錯過該帖子： {% 嵌入 https://dev.to/netlify %} 重要的日子 ----- - 5 月 1 日：Netlify 動態網站挑戰賽開始！ - 5 月 12 日：提交截止時間為太平洋夏令時間晚上 11:59 - 5 月 14 日：得獎者公佈 我們希望您享受框架的自由，我們迫不及待想看看您建造的內容！對挑戰有疑問嗎？請在下面詢問他們。 祝你好運，編碼愉快！ --- 原文出處：https://dev.to/devteam/join-us-for-the-netlify-dynamic-site-challenge-3000-in-prizes-3mfn

0個讚   0留言 11瀏覽

🔥 2024 年你必須知道的 6 個開源函式庫 🪄🔥

上週我發現了一些很棒的圖書館！ 檢查它們、使用它們、幫助它們加星⭐️ > 「我永遠不會停止學習。 我不會只做分配給我的事情。 我知道不存在所謂的現狀。 我將透過充滿熱情和忠誠的客戶來永續地發展我們的業務。 我永遠不會放棄幫助同事的機會，我會記得我知道一切之前的日子。 影響力比金錢更能激勵我，而且我知道**開源是我們這一代最強大的想法之一**。 我會盡可能多溝通，因為這是分散式公司的氧氣。我參加的是一場馬拉松，而不是短跑，無論目標有多遠，到達目標的唯一方法就是每天把一隻腳放在另一隻腳前面。只要有時間，沒有什麼問題是解決不了的。 馬特·穆倫韋格 Automattic 首席執行官 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci1n20z64gjk2ev9erg1.png) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGJsMzJ5dHkxMGNodmxmZzI4dnZ4ZGR3b2k4cmNkdGx6ejQ1ZW9tbyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/MpLphYAo2vO4P2Facx/giphy.gif) --- Coolify -- 隆重介紹 Coolify，它是[Heroku](https://www.heroku.com/) 、 [Netlify](https://www.netlify.com/)和[Vercel](https://vercel.com/)的開源和自架替代品 這個創新平台由[Andras Bacsai](https://twitter.com/heyandras)開發，使用戶能夠輕鬆部署和管理其 Web 應用程式，同時保持對其基礎設施的完全控制。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c98pzbi2nk2zk687crq7.png) ### 主要特徵： - **自託管**：借助 Coolify，您可以自由地將 Web 應用程式託管在自己的伺服器上，從而完全控制您的部署環境。 - **輕鬆部署**：該平台簡化了部署過程，讓您只需單擊幾下或命令即可部署應用程式。 - **可擴展性**：Coolify 旨在輕鬆擴展，在不影響效能的情況下滿足不斷增長的流量和工作負載需求。 - **客製化**：您可以自訂和配置部署環境以滿足您的特定要求，確保最佳效能和安全性。 - **整合**：Coolify 與流行的開發工具和工作流程無縫集成，使其可以輕鬆合併到您現有的專案中。 - **社區支持**：受益於充滿活力的開發者和貢獻者社區，他們提供支援、共享資源並協作改進平台。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a03am25bqpg4ve2uc4z4.png) 在 GitHub 上查看 Coolify 並給它一顆星： [Coolify Repository](https://github.com/coollabsio/coolify) --- Glasskube ----- [Glasskube](https://glasskube.dev/)是一個開源 Kubernetes 套件管理器，可簡化 Kubernetes 部署的套件管理。它提供了一個用戶友好的介面，降低了管理您最喜歡的 Kubernetes 套件的複雜性並提高了透明度。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5419e07amgribh1y03nk.png) ### 主要特徵： - **使用者友善的 UI** ：Glasskube 提供直覺的使用者介面，使 Kubernetes 套件管理對於使用者來說更容易存取和理解。 - **Brew-Inspired CLI** ：對於熟悉命令列介面的高級用戶，Glasskube 提供了 Brew-inspired CLI，允許高效的套件管理操作。 - **依賴感知**：Glasskube 套件具有依賴關係感知能力，確保 Kubernetes 套件的順利管理和安裝並考慮依賴關係。 - **雲端原生應用程式**：Glasskube 設計為雲端原生應用程式，符合 GitOps 原則，有助於無縫整合到 Kubernetes 環境和工作流程中。 Glasskube 作為簡化 Kubernetes 套件管理的寶貴工具而脫穎而出。無論您是 Kubernetes 新手還是經驗豐富的 DevOps 工程師，Glasskube 都能提供使用者友善的解決方案，幫助您輕鬆有效地管理 Kubernetes 套件。 [看看 GitHub 上的 Glasskube 並給它一顆星](https://github.com/glasskube/glasskube) --- AgentCloud --- [AgentCloud](https://www.agentcloud.dev)是您建立自己的 AI 應用程式遊樂場的首選平台！想像一下，它就像擁有您自己的個人 GPT（生成式預訓練變壓器）建構器平台，但具有一些很棒的額外功能。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u1d4w6552xrs8zqfxl0.png) 借助 Agent Cloud，公司可以靈活地為其員工建立和部署兩種不同類型的應用程式： 1. **對話式聊天應用程式**：這些應用程式的運作方式與 OpenAI 的 GPT 類似，允許使用者開發單代理聊天應用程式。然而，它們還具有利用任何大型語言模型 (LLM)、存取豐富的工具庫以及利用來自眾多資料來源的龐大知識庫的額外優勢。 2. **流程應用程式**：向自動化天堂問好！這些應用程式透過為代理設定要處理的目標和任務來幫助您簡化流程。這一切都是為了讓工作變得更輕鬆、更快捷、更有協作性。 因此，無論您是希望透過漂亮的聊天機器人來提高工作效率，還是像專業人士一樣自動執行任務，Agent Cloud 都能滿足您的需求。這一切都是為了為您的團隊提供他們需要的工具，讓他們更聰明地工作，而不是更辛苦地工作！ 最好的部分是什麼？它是開源的！如果您喜歡使用 Agent Cloud，為什麼不在 GitHub 上表達一些喜愛並給它一顆星呢？您的支持對開源社群來說意味著世界。 🌟 看看 GitHub 上的 Agent Cloud 並給它一顆星： [Agent Cloud Repository](https://github.com/rnadigital/agentcloud) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjNuMXQ0ZDcyZGpldGszeHA0NjB4M2g3bTNiNGpmMHNvdHN3em5vNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l1J3rGigrYfx8aKqI/giphy.gif) 我還發現了一個很酷的演示，可以讓您先睹為快了解 Agent Cloud 的全部內容。請觀看此處的介紹影片，以及創始人本人在 YouTube 上對[RAG Google Bigquery](https://youtu.be/POLdnrjsy9c?si=y5MFXNSs-o5TJMMH)的一些精彩見解。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y6wiumma95vddcqklq4.png) --- CrewAI ------ [CrewAI](https://www.crewai.com/)是一個突破性的框架，旨在協調角色扮演和自主人工智慧代理。這個開源專案由 João Moura 開發，使代理商能夠智慧協作，使他們能夠無縫地協作完成複雜的任務。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt2ehz1pykz7j5093ym1.png) ### 主要特徵： - **協作智能**：CrewAI 促進人工智慧代理之間的協作智能，使他們能夠匯集資源和專業知識，更有效地完成任務。 - **自主代理**：此框架支援自主人工智慧代理的開發，能夠根據其環境和目標做出獨立決策並採取行動。 - **任務編排**：CrewAI 提供用於編排任務和協調多個代理程式的操作的工具，確保順暢的協作和同步。 - **可擴展性**：借助 CrewAI，開發人員可以擴展其 AI 系統以容納大量代理，使其適用於從小規模模擬到大規模環境的應用程式。 - **靈活性**：該框架在設計代理行為和互動方面提供了靈活性，允許開發人員自訂系統以適應特定的用例和場景。 - **社群支援**：CrewAI 受益於充滿活力的開發人員和研究人員社區，促進自主代理和人工智慧領域的協作和創新。 在 GitHub 上查看 CrewAI 並給它一顆星： [CrewAI Repository](https://github.com/joaomdmoura/crewAI) > 了解[Agent Cloud 和 CrewAI](https://www.agentcloud.dev/blog/agent-cloud-vs-crewai-a-comparison)之間的差異。 --- SuperAGI ----- [SuperAGI](https://superagi.com/)是一個尖端平台，旨在突破對話式 AI 的界限，整合通用人工智慧 (AGI) 原理，建立高度智慧且適應性強的聊天機器人。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9r14m7magbpw5cal4403.png) ### 主要特徵： - **通用人工智慧（AGI）** ：SuperAGI 利用 AGI 原理開發具有類人理解和推理能力的聊天機器人。 - **深度學習模型**：該平台利用最先進的深度學習模型（例如變壓器和神經網路）來處理和產生自然語言響應。 - **知識圖**：SuperAGI 結合知識圖來表示和組織訊息，使聊天機器人能夠存取龐大的結構化知識儲存庫。 - **元學習**：SuperAGI 採用元學習技術，使聊天機器人能夠根據過去的互動和回饋不斷改進和調整其行為。 - **多輪對話**：SuperAGI 支援多輪對話，允許聊天機器人維護上下文並與用戶進行更自然、更流暢的互動。 - **可擴展性**：該平台具有高度可擴展性，使開發人員能夠整合自訂模組並根據需要擴展聊天機器人功能。 在 GitHub 上探索 SuperAGI： [SuperAGI 儲存庫](https://github.com/TransformerOptimus/SuperAGI) --- Gitroom ---- [Gitroom](https://gitroom.com/)提供工具並協助您擴展開源儲存庫。獲得更多知名度、明星、貢獻和客戶。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxjy6knk1cklbwtn6rxu.png) ### 主要特徵： - **統一協作**：Gitroom 將團隊協作直接引入到您的 Git 儲存庫中，從而實現無縫溝通和協調。 - **即時更新**：隨時了解儲存庫活動的即時更新，讓團隊能夠輕鬆追蹤變更和進度。 - **互動式討論**：直接在 Git 儲存庫中參與互動式討論，從而輕鬆分享想法並提供回饋。 - **任務管理**：使用內建任務管理功能追蹤任務和問題，簡化專案工作流程並提高生產力。 - **整合**：Gitroom 與 GitHub 順利集成，為已經習慣該平台的使用者提供熟悉且直覺的介面。 - **客製化**：透過可自訂的設定和首選項自訂 Gitroom，以滿足您團隊的特定需求。 在 GitHub 上探索 Gitroom：[Gitroom 儲存庫](https://github.com/gitroomhq/gitroom) 總之，這些儲存庫 - AgentCloud、Gitroom、Glasskube CrewAI、Coolify 和 SuperAGI - 都包含用於建立更聰明應用程式的令人驚嘆的工具。無論您喜歡聊天機器人、人工智慧代理還是 Web 部署，每個人都能找到適合自己的東西。 如果您喜歡所看到的內容，請在 GitHub 上給他們一顆星 ⭐️，為什麼不使用他們的工具來創造一些很棒的東西呢？ 很快會在另一篇部落格文章中見到您。 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaWt6MGEzdTk3YW8xNzNpMGpnNXYzeGh3NGM0MXRscWsyamg5Mm51eiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/12noFudALzfIynHuUp/giphy.gif) 感謝您閱讀，如果您喜歡這個部落格並且想更深入地了解開發人員工具、React 等，請查看我[網站](https://theankurtyagi.com/)上的其他文章。 - [如何使用 React 和 Appwrite 建立安全的任務管理應用程式](https://theankurtyagi.com/appwrite/) - [如何使用 Hygraph 和 React 建立評論應用程式](https://theankurtyagi.com/build-review-app-hygraph-react/) - [如何使用 React 和 Supabase 建立全端 Notes 應用程式](https://theankurtyagi.com/notes-app-react-supabase/) --- 原文出處：https://dev.to/tyaga001/6-open-source-libraries-you-must-know-in-2024-5dgb

0個讚   0留言 100瀏覽

⚛️ 在 React 元件中組織程式碼

在 React 元件中組織程式碼有時經常被忽視，但在處理高階元件 (HoC)、 `forwardRef`和`memo`時，事情可能會變得複雜。如果處理不當，可能會導致程式碼混亂且難以維護。本文旨在透過提出一種更易於管理的方式來建立程式碼並提高工作效率來解決這些問題。 1️⃣ 在 React 元件中管理 HoC、 `forwardRef`和`memo` ------------------------------------------ ### 問題陳述 身為 React 開發人員，我經常在組織元件方面遇到困難，尤其是在合併`memo`和`forwardRef`時。以下的範例取自[React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref) ，示範了這個挑戰： ``` import { forwardRef } from 'react'; interface FancyButtonProps { type: 'submit' | 'button'; children?: React.ReactNode; } export const FancyButton = forwardRef<HTMLButtonElement, FancyButtonProps>((props, ref) => ( <button ref={ref} className="MyClassName" type={props.type}> {props.children} </button> )); ``` 根據我自己的經驗，這段程式碼有幾個問題： - 與「裸」元件相比，由於元件包裝在`forwardRef`中，程式碼顯得混亂。 - 類型並不是真正處於最佳位置。與元件中使用的實際參數相比， `forwardRef`的泛型具有相反的順序： `<HTMLButtonElement, FancyButtonProps>`與`(props, ref)` 。 - 重構變得很麻煩，因為它需要仔細注意方括號和圓括號。假設您不再需要`forwardRef` 。即使有了彩虹括號之類的幫助，處理這些括號和圓括號有時也會令人沮喪，尤其是當元件很大時。 - 如果您想要為元件新增`memo`或某些類型的自訂 HoC，以及其中的某些狀態或函數，該怎麼辦？它會變得更加混亂： ``` import { forwardRef, memo } from 'react'; import { useStyles } from '@/modules/core/styles'; interface FancyButtonProps { type: 'submit' | 'button'; children?: React.ReactNode; } export const FancyButton = memo( forwardRef<HTMLButtonElement, FancyButtonProps>(({ type, children }, ref) => { const classes = useStyles(); return <button ref={ref} className={classes.button} type={props.type}> {children} </button> }) ); ``` ### 建議的解決方案 在厭倦了以這種方式組織元件程式碼時遇到的所有麻煩之後，我最終想出了一種方法來解決這些問題。考慮以下方法： ``` import { forwardRef, memo } from 'react'; import { useStyles } from '@/modules/core/styles'; interface FancyButtonProps { type: 'submit' | 'button'; children?: React.ReactNode; } const FancyButtonBase = ( { type, children }: FancyButtonProps, ref: React.ForwardedRef<HTMLButtonElement> ) => { const classes = useStyles(); return ( <button ref={ref} className={classes.button} type={type}> {children} </button> ); }; export const FancyButton = memo(forwardRef(FancyButtonBase)); ``` 該程式碼是不言自明的。元件的實際程式碼位於名稱帶有`Base`後綴的函陣列件中。然後我們匯出下面的元件，以及所有 HoC、 `memo`和`forwardRef` 。 此解決方案具有以下幾個優點： - 實際的元件程式碼與 HoC、 `memo`和`forwardRef`分離，使其類似於「裸」元件。 - 類型位於它們應該在的位置： `(props: FancyButtonProps, ref: React.ForwardedRef<HTMLButtonElement>` 。 - 如果您需要重構此程式碼，例如不再使用`ref` ，您只需刪除第二個參數和`forwardRef`而無需處理方括號和圓括號。 - 如果需要嵌套的 HoC，加入或修改它們很簡單，並且程式碼仍然可讀： ``` import { forwardRef, memo } from 'react'; import { useStyles } from '@/modules/core/styles'; import { withWhatever } from '@/modules/core/hocs'; interface FancyButtonProps { type: 'submit' | 'button'; children?: React.ReactNode; } const FancyButtonBase = ( { type, children }: FancyButtonProps, ref: React.ForwardedRef<HTMLButtonElement> ) => { const classes = useStyles(); return ( <button ref={ref} className={classes.button} type={type}> {children} </button> ); }; export const FancyButton = memo(forwardRef(withWhatever(FancyButtonBase))); ``` 這種方法為元件加入了一行程式碼，但顯著提高了可讀性和可維護性。即使不使用任何 HoC、 `memo`或`forwardRef` ，我仍然對「裸」元件執行此操作： `export const FancyButton = FancyButtonBase` 。 我們可以更進一步，嘗試使用一個非常有用但不太知名的 VSCode 擴充功能來提高我們的工作效率。 2️⃣ 透過「資料夾模板」擴充功能提高工作效率 ----------------------- 下面的 GIF 演示了[VSCode 中「資料夾模板」擴充功能](https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure)的強大功能（載入 GIF 可能需要一點時間）： ![資料夾模板擴充演示](https://res.cloudinary.com/dip6bddoz/image/upload/v1712480236/react-folder-templates-minest_e1qg9z.gif) 您只需輸入元件的名稱，瞧！ 基本上，您也可以告訴 AI 為您編寫此樣板程式碼，但我發現使用此擴充功能要快得多，而且它是高度可自訂的。 如果您需要我分享我預先定義的 React 特定資料夾範本設置，請在評論中告訴我。 🏁 結論 ---- 在 React 元件中組織程式碼，尤其是在使用`memo` 、 `forwardRef`和 HoC 時，可能會是一項艱鉅的任務。然而，透過將實際的元件程式碼與 HoC 分開並確保正確的類型聲明，您可以建立更清晰、更易於維護的程式碼。此外，使用 VSCode 中的「資料夾範本」擴充功能等工具可以幫助簡化您的開發流程並提高工作效率。 如果你認為這是一篇好文章，你可能會發現我之前的文章也很有用： https://dev.to/itswillt/folder-structs-in-react-projects-3dp8 --- 原文出處：https://dev.to/itswillt/organizing-code-in-a-react-component-4coa

0個讚   0留言 159瀏覽

某工程師被 Netlify 索取一萬美元的故事

今天在 reddit 看到一則貼文 https://www.reddit.com/r/webdev/comments/1b14bty/netlify_just_sent_me_a_104k_bill_for_a_simple/ 某工程師做了一個小網站放在 Netlify 收到帳單 要收一萬美元，因為被 DDOS 他非常不爽，所以貼文問大家意見 大家叫他貼到 Hacker News https://news.ycombinator.com/item?id=39520776 馬上驚動 CEO 出來回覆，把帳單取消 很有趣的故事，被大企業坑的時候，小小的救濟手段

1個讚   1留言 160瀏覽

如何建立一個好的 README.md 文件

什麼是 readme 文件？ -------- 自述文件是用戶在查看儲存庫時首先看到的內容。它讓用戶了解專案的內容、使用的語言、條款和條件、您的專案可以做什麼、顯示正在執行的應用程式的螢幕截圖等。 為什麼它如此重要？ --------- 該用戶可能是招募人員、您未來的老闆或客戶。因此，需要注意的是，專案的自述文件應該回答專案的內容、原因和方式。 因此，重要的是要包含最重要的訊息，對專案和所使用的技術堆疊進行清晰的描述，並提供可能不適合 README 文件的連結和進一步說明，以避免不必要地搜尋所有其他文件。可能會導致用戶失去興趣並轉向下一個潛在員工。 編寫有關該專案的良好文件是多麼重要，我怎麼強調都不為過。使用者不僅在尋找有關專案本身的訊息，而且還看到您的文件技能和對細節的關注，這可以讓您更接近找到工作。 如果您讀過我的其他文章，您可能已經注意到，除了程式設計之外，學習其他技能對我的職業生涯有多麼重要，這些技能最終幫助我找到了工作。良好的文件就是其中之一。 自述文件中應包含哪些內容？ ------------- 以下是一些可以幫助您的指導性問題： - 該專案是關於什麼的？ - 為什麼開發它，你的動機是什麼？ - 它解決什麼問題？ - 你學到了什麼？ - 是什麼讓您的專案脫穎而出？ 我將向您展示如何將這些問題轉換為文字。 ### 可能的結構 **描述** 專案的目的和描述，以便閱讀您的作品集的人可以在閱讀專案資訊的前幾秒鐘內了解該專案。 **技術堆疊** 技術堆疊，包括您的專案使用的程式語言、程式庫和框架（例如：Python、React 等）。如果您有使用外部公共 API 的前端應用程式，請提及這一點。 **設計** 與專案相關的使用者介面範例。如果專案有使用者介面，您可以插入使用者介面的 GIF、影片或圖像。 如果它是在終端上執行的應用程式，您可以建立一個 GIF 來展示如何使用它。這有助於了解如何與應用程式互動以及人們在執行專案時會看到什麼。 **特徵** 如果您的專案有很多功能，您應該加入**“功能”**部分並在此處列出它們。 **如何執行專案** 有關如何設定、執行和使用該專案的說明。如果有人想從頭開始該專案，這很好，他們應該在專案的自述文件中找到他們需要了解的所有內容，而不需要您的任何幫助。 如果很簡單，您可以將其包含在自述文件中。如果說明較長，您也可以參考專案中的另一個文件。 您還應該使用 Netlify 來託管您的專案，以便使用者可以打開已部署的應用程式並立即使用它來查看它是如何運作的。 （請記住，並非每個查看您 GitHub 個人資料的招募人員都充分了解如何在本地建立專案。） 如何設計自述文件的樣式？ ------------ `README.md`中的`.md`副檔名代表 Markdown，這是一種輕量級標記語言，具有簡單的文字格式化語法。它是一種非常簡單的語言，用於為 GitHub 建立美觀且美觀的自述文件。 因此，您可以使用典型的 Markdown 語言，例如 ``` # Heading 1 ## Heading 2 ### Heading 3 Emphasis, aka italics, with *asterisks* or _underscores_. Strong emphasis, aka bold, with **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. 1. First ordered list item 2. Another item ⋅⋅* Unordered sub-list. 1. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list 4. And another item. [I'm an inline-style link](https://www.google.com) [I'm an inline-style link with title](https://www.google.com "Google's Homepage") ![descriptive alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1") ``` --- 原文出處：https://dev.to/yuridevat/how-to-create-a-good-readmemd-file-4pa2

0個讚   0留言 191瀏覽

部署網站之前需要檢查的 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留言 179瀏覽

免費託管全端應用程式的 5 種最佳方式🚀✨

## 你好呀！ ![Heroku 標誌](https://blog.4linux.com.br/wp-content/uploads/2018/01/Heroku.png) 首先，讓我給你一些背景資訊。 [直到最近](https://help.heroku.com/RSBRUH58/removal-of-heroku-free-product-plans-faq)，**Heroku** 有一個很好的免費層，可以讓您部署和測試東西與他們的馬力機。使用起來很輕鬆。但隨著這一免費層的取消，開發人員不得不尋找新的平台來部署他們的專案。 幸運的是，有許多新的託管提供者不斷湧現。但**實際上選擇部署位置**可能與為專案編碼一樣具有挑戰性。 ![如此多的選項 gif](https://media.giphy.com/media/McD0cTjsFuxc7tjseu/giphy.gif) 這就是為什麼在本文中，**我將展示其中一些** **選項**，用於免費在線託管您的應用程式。我們將快速了解每個提供者最擅長的領域，以便您可以做出明智的決定，並讓您的應用程式上線。 --- ### 快速提醒 在開始部署我們的應用程式之前，請務必閱讀您選擇的框架提供的部署指南。 [React](https://create-react-app.dev/docs/deployment/)、[NextJS](https://nextjs.org/docs/pages/building-your-application/deploying)、[Wasp](https://wasp-lang.dev/docs/advanced/deployment/overview)，而且大多數目前框架都有非常好的部署指南（甚至是讓這些部署更容易的平台）。 因此，您的框架選擇可能會對您的託管提供者產生很大影響！ ![辦公室 GIF](https://media.giphy.com/media/BpGWitbFZflfSUYuZ9/giphy.gif) ## 支持我們！ 🙏⭐️ 順便說一句，我是 Wasp 團隊的一員，如果您能檢查我們的全端 React/NodeJS/Prisma 框架並[給我們一顆星](https://kdta.io/github-黃蜂-lang-wasp_14 )。 我們正在努力幫助開發人員盡可能快速、輕鬆地從想法到部署（例如，單一命令、全端部署），感謝所有幫助！ 好的。現在，讓我們探索一些在免費託管應用程式時提供絕佳選擇的雲端平台。 ### 韋爾塞爾 ![Vercel 標誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nawjjv3zd1iea1rgfjw.png) 如果您正在部署前端應用程式，那麼這裡的體驗是難以比擬的。免費套餐**真的**很好。我有大約 20 個小型網站在 Hobby 計劃上執行，但無法減少使用量。 除此之外，部署的簡單性也令人驚訝。 ![Vercel 儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61giw9nmi9y1d933y6hk.png) 您所要做的就是選擇一個 github 儲存庫，如果他們檢測到您正在使用主要框架之一，您可能甚至不需要配置任何內容！他們會處理好這一切，您的應用程式將在幾秒鐘內執行。 ![Vercel 部署](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xidcbvp9tpbeqr57d94.png) 不幸的是，對於後端和資料庫 [Vercel](https://vercel.com/) 仍然不是一個很好的選擇。如果你有一個非常小的後端（並且專注於NodeJS），你可以嘗試使用[Vercel 的函數](https://vercel.com/docs/functions/serverless-functions) 基礎設施在這裡部署，儘管它們在以下方面受到限制：執行時間和複雜性。 對於更複雜的後端，我們將不得不看看下面的一些提供者。 ### 鐵路 ![鐵路標誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnxai4q81n8u5uxlcz4h.png) [Railway](https://railway.app/) 是一個可讓您輕鬆部署 Web 應用程式和 API 的平台。當您註冊時，它提供每月**價值 5 美元的免費使用**的免費套餐。 只需幾個命令，您就可以部署應用程式並立即啟動並執行。它有一個非常漂亮的 UI，整體部署體驗也很好！ 順便說一句，我真的很喜歡他們決定展示物品和容器的方式。這是一種非常聰明的方式來概覽事物，而不是數百個小應用程式。有時，[簡單地將事物分組](https://lawsofux.com/law-of-common-region/) 會對使用者體驗產生重大影響，如下所示： ![分組專案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f4y84fkv7sa3rxd0yrf.png) 它還支援 React、Next.js 和 Node.js 等流行框架。此外，它還提供一鍵式資料庫設定和[社區建立的模板](https://railway.app/templates)，可以顯著簡化為專案設定 Dockerfile 的過程。 ![鐵路計畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5zsr0oghlpyej2p335u.png) 以下是它的基本當前價格，每月 5 美元（他們每月給你使用）實際上足以讓你擁有一些專案（如 2 - 3 個小型網站、後端和資料庫）和如果您知道如何正確設置它們（例如，將它們設定為在不使用時自動睡眠），請執行。 ![設定頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1nuvnb877w0zdb1kywt.png) 他們在應用程式設定頁面中有此選項。在那裡，您還可以找到其他可以更改的有趣的配置選項，例如網域、執行狀況檢查端點等。 ### 使成為 ![渲染標誌](https://images.g2crowd.com/uploads/product/image/large_detail/large_detail_477db83f729d63210139ec7cd29c1351/render-render.png) Render 是另一個用戶友好的雲端平台，提供**良好的免費套餐**並支援廣泛的應用程式。它簡化了部署和擴展應用程式的過程，並支援多種程式語言和框架。 Render 的免費套餐包括（每月）： - 500 管道建設分鐘 - 100GB 頻寬 唯一的例外是他們的 **Cron Jobs 服務（您的情況可能不需要，特別是如果您正在利用 [Wasp 的內建作業](https://wasp-lang.dev/docs/advanced) /jobs），每月最低費用為1 美元。** ![渲染計畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbqb08789v4soij9gp0s.png) ![渲染計畫 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n54c1fapvolqgzszzaaz.png) 它的功能真的很強大！我能夠部署資料庫、NestJS 應用程式和 NextJS 前端，所有這些都可以與遷移、Prisma ORM 等一起使用！它有一些很好的事件追蹤（儘管它可以呈現得更好——有時，螢幕上有太多元素）。 ![事件範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/essf0z1u1ows6snpswf6.png) 而且它還具有一些可觀察性功能！您可能認為這些不會在非常小的應用程式上使用，但是，當您在生產環境中偵錯事物時，您擁有的每個工具都可以產生有關問題的新見解。 ![可觀測範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3fs623gtv5gu4hnjr3g.png) ![可觀測範例 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wasik5y01zuh5a5za8gk.png) ### 飛 ![飛標誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v8jhqg988eorpcdn7hb.png) [Fly](https://fly.io/)是專注於全球邊緣運算的雲端平台。 Fly 專注於高效能託管，並提供全球邊緣站點網路。 Fly 以其可擴展性和性能優化而聞名。 ![飛行計畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/952omdoyh68fwq4lv4ik.png) 它支援各種程式語言和框架，讓您可以建立和部署功能強大的應用程式，並且在部署過程中，您只需下載[flyctl](https://fly.io/docs/hands-on/install-flyctl/)現在您就可以出發了！ ![支援的架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/almuttwim73338hy7ech.png) 順便說一句，Wasp 框架支援使用 Fly! 的單一命令部署！您可以在[此處](https://wasp-lang.dev/docs/advanced/deployment/manually#flyio)查看有關它的更多資訊！ ![黃蜂部署飛行](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohqil6hslcacgnhr2128.jpeg) 它還可以容納一些小物品，但當我們查看實際價值時，成本會變得有點陡峭： ![飛行計畫定價](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f74v7dkf1p1i23jsckz3.png) 對於服務質量，它有一些不錯的監控儀表板和 Sentry 集成，這似乎非常有用。您也可以使用 SSH 輕鬆檢查應用程式日誌！ ![飛行時記錄錯誤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bcj1fzf6xc64fzyugpu.png) ### 網路化 ![Netlify 標誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zm251qd0ow6ja1yhrot.png) Netlify 以其出色的免費套餐而聞名，並提供各種功能來建立和部署網站。話雖如此，它更像是 Vercel 的直接競爭對手，因為它專注於前端和靜態內容。 與 Vercel 一樣，它並不適用於強大的後端，但它也可以選擇託管無伺服器功能，您只需將資料庫託管在其他地方即可。 它使用為每個框架量身定制的特定建置器，為主要框架提供出色的支援。他們的[部署文件](https://docs.netlify.com/configure-builds/overview/?_gl=1%2a10z7npm%2a_gcl_au%2aMTcyNzA3MDU2My4xNzAyNjUxODAx#basic-build-settings)非常全面且有幫助。 ![Netlify 方案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv8o94y0dltcvr0u2n4a.png) 透過 Netlify，您可以利用其內容交付網路 (CDN) 為使用者提供快速的靜態內容交付。它們提供了一系列功能來幫助您建立和優化您的網站。 Netlify 的免費方案包括： - 每月 300 分鐘建置時間 - 每月 100GB 頻寬 Netlify 因其易用性和強大的功能而受到開發人員的歡迎。它是託管靜態網站或 [Jamstack](https://jamstack.org/) 應用程式的絕佳選擇。 ![NextJS辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e80nn5uz0il95xtogrr3.png) 他們還有一些主要的框架建置執行時，可以簡化您的流程！ ### 結論 如果您還沒有為 [Wasp 的儲存庫](https://www.github.com/wasp-lang/wasp) 加註星標，我建議您這樣做！它可以幫助我們每週為您帶來這樣的免費內容。另外，它是最好的、沒有廢話的全端框架，可以減少開發時間並完成專案。 在免費託管您的應用程式時，重要的是要考慮每個平台的特定功能和限制。每個平台都有自己的優勢，選擇最適合您的需求和要求的平台非常重要。 以下是您的視覺回顧： ![複習圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd023j7tcv1cu23zedqm.png) 嘿！您想查看有關所有這些平台的更深入的文章嗎？留在評論區！ --- 原文出處：https://dev.to/wasp/top-5-ways-to-host-your-full-stack-app-for-free-c2j

0個讚   0留言 504瀏覽

Supabase Auth：身分連結、Hooks 和 HaveIBeenPwned 集成

我們很高興地宣布 Supabase Auth 的四項新功能： 1. 身份連結 2. 會話控制 3. 密碼外洩保護 4. 帶有 Postgres 函數的 Auth Hooks {% 嵌入 https://youtu.be/LF8GABnAFyE %} ## 身份連結 當使用者登入時，系統會使用身份驗證方法和登入提供者建立身分。從歷史上看，如果身分與使用者共享相同的經過驗證的電子郵件，[Supabase Auth](https://supabase.com/docs/guides/auth) 會自動將身分連結到使用者。這可以方便地刪除重複的用戶帳戶。然而，一些開發人員還需要靈活地連結不共享相同電子郵件的帳戶。 今天，我們推出身份連結，開發人員可以使用它手動連結兩個單獨的身份。我們為開發人員新增了兩個新端點來管理身分連結流程： 使用者登入後，使用「linkIdentity()」[連結 OAuth 身分：](https://supabase.com/docs/reference/javascript/auth-linkidentity) ``` const { data, error } = await supabase.auth.linkIdentity({ provider: 'google', }) ``` 使用 `unlinkIdentity()` 來[取消連結身分](https://supabase.com/docs/reference/javascript/auth-unlinkidentity)： ``` // retrieve all identities linked to a user const { data: { identities }, } = await supabase.auth.getUserIdentities() // find the google identity linked to the user const googleIdentity = identities.find(({ provider }) => provider === 'google') // unlink the google identity from the user const { data, error } = await supabase.auth.unlinkIdentity(googleIdentity) ``` 目前，這些方法支援連結 OAuth 身分。要將電子郵件或電話身分連結到用戶，您可以使用 [updateUser()](https://supabase.com/blog/supabase-auth-identity-linking-hooks#:~:text=can%20use% 20the -,updateUser(),-method.)方法。 預設情況下禁用手動連結。您可以在[儀表板驗證設定](https://supabase.com/dashboard/project/_/settings/auth) 中為您的專案啟用它。 ![如何啟用手動連結](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmsrmiw0ue3q5rshji7v.jpg) > 有關更多訊息，請參閱[身份連結文件](https://supabase.com/docs/guides/auth/auth-identity-linking)。 ## 會話控制 Supabase Auth 從使用者登入應用程式那一刻起管理整個會話生命週期。這涉及以下步驟： 1. 為使用者建立會話。 2. 刷新會話以使其保持活動狀態。 3. 過期或登出時撤銷會話。 對於想要更好地控制使用者會話的開發人員，我們公開了 3 個新設定： - **時間盒使用者會話：** 強制使用者在一段時間間隔後再次登入。 - **不活動逾時：** 如果使用者在一段時間內不活動，則強制使用者重新登入。 - **每個使用者單一會話：** 將使用者限制為單一會話。保留最近的活動會話，並終止所有其他會話。 這些會話控制設定在專業版及以上版本中可用。 ![如何強制每個使用者單一會話](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aov0nw5xch0m4hw97vsg.jpg) > 有關更多訊息，請參閱[會話管理文件](https://supabase.com/docs/guides/auth/sessions)。 ## 密碼外洩保護 由於常見的使用者行為（例如選擇可猜測的密碼或在不同平台上重複使用密碼），密碼本質上可能是不安全的。 儘管 OAuth 和 magiclinks 更安全，但我們認識到密碼將繼續存在。我們希望讓用戶不易陷入潛在的陷阱。為了實現這一目標，我們在 Supabase Auth 中整合了 [HaveIBeenPwned.org](https://haveibeenpwned.com/) _Pwned Passwords API_，以防止使用者使用洩漏的密碼。 > **去圖書館** ℹ️ 我們開源了一個 Go 函式庫，用於與我們在身分驗證伺服器中使用的 [HaveIBeenPwned.org](http://haveibeenpwned.org/) Pwned 密碼 API 互動。查看 [存儲庫](https://github.com/supabase/hibp) 並隨時貢獻！ 作為附加步驟，我們新增了為您的使用者指定密碼要求的功能。這可以透過[儀表板：](https://supabase.com/dashboard/project/_/settings/auth) 中專案的身份驗證設定進行配置 ![新增密碼要求](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o9ax3tudp7v8tba67hd.jpg) > 請參閱[密碼文件](https://supabase.com/docs/guides/auth/passwords) 以了解更多資訊。 ## 驗證掛鉤 我們收到了大量回饋，詢問如何自訂 Auth，例如： - 將自訂聲明新增至存取權杖 JWT - 多次嘗試 MFA 驗證失敗後註銷用戶 - 對密碼驗證嘗試套用自訂規則 我們的目標是保持簡單、無縫的 Supabase Auth 體驗。對於大多數開發人員來說，它應該可以輕鬆工作，而無需自訂。但是，認識到應用程式的多樣性，您現在可以透過 Auth Hook 擴展標準 Auth 功能。 Auth Hooks 只是 Postgres 函數，它們在 Auth 生命週期的關鍵點同步執行，以更改操作的結果。 例如，要使用 Auth Hooks 自訂 JWT 聲明，您可以建立一個 Postgres 函數，該函數接受第一個參數中的 JWT 聲明並傳回您希望 Supabase Auth 使用的 JWT。 假設您正在建立一個遊戲化應用程式，並且希望將用戶的層級作為自訂聲明附加到 JWT： ``` create function custom_access_token_hook(event jsonb) returns jsonb language plpgsql as $$ declare user_level jsonb; begin -- fetch the current user's level select to_jsonb(level) into user_level from profiles where user_id = event->>'user_id'::uuid; -- change the event.claims.level return jsonb_set( event, '{claims,level}', user_level); end; $$ ``` 在資料庫中建立函數後，您只需使用 Supabase Auth 註冊它： ![Auth Hooks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unkgs56o62l8c4kfjzjg.jpg) 目前，您可以為流程中的以下點註冊 Auth Hook： - **自訂存取權杖：** 每次產生新的 JWT 時都會呼叫。 - **MFA 驗證嘗試：** 每次驗證 MFA 因素時都會呼叫，從而可以更好地控制檢測和阻止嘗試。 - **密碼驗證嘗試：** 每次使用密碼登入使用者時都會呼叫，從而可以更好地控制使用者帳戶的安全性。 如果編寫 PL/pgSQL 函數不是您的強項，您始終可以使用 [pg_net](https://supabase.com/docs/guides/database/extensions/pg_net) 向後端 API 發送請求，或使用[plv8]( https://supabase.com/docs/guides/database/extensions/plv8) 透過用JavaScript 編寫函數來更輕鬆地操作JSON。 Auth Hooks 今天可供自架，並將於下個月推出到該平台。如果您需要盡快存取，請透過[支援](https://supabase.help/)與我們聯繫！ 那不是全部！ Postgres 函數並不是寫鉤子的唯一方法。 Supabase 是 [Standard Webhooks](https://www.standardwebhooks.com/) 的創始貢獻者，這是一組關於輕鬆、安全、可靠地發送和接收 Webhook 的開源工具和指南。當然，Auth Hooks 將在 2024 年第一季支援 Webhooks。 ## 還有一件事… 如果您從一開始就關注我們（https://supabase.com/blog/supabase-auth），您就會知道Supabase Auth 是透過分叉[Netlify 的GoTrue 伺服器]（https://github.com）開始的/netlify/gotrue）。從那時起，發生了很多變化，我們已經偏離了上游儲存庫。在這個階段，將專案重新命名為其他名稱是有意義的（提示鼓聲）－Auth。 這僅僅意味著儲存庫將從使用“gotrue”重新命名為“auth”。但別擔心！ Docker 映像和庫（如“@supabase/gotrue-js”）將繼續發布，只要當前 v2 版本受支持，您就可以互換使用“@supabase/auth-js”。所有類別和方法都保持不變。這裡沒有重大變化！ ## 結論 感謝您閱讀到最後！我們希望您喜歡第 X 週發布的 Supabase Auth 更新：身分連結、會話控制、洩露密碼保護和帶有 Postgres 功能的 Auth Hooks。 我們期待看到您使用這些新功能建立的內容，當然還有您的回饋意見，以使它們變得更好。 ## 更多發布第 X 週 - [第 1 天 - Supabase Studio 更新：AI 助理與使用者模擬](https://supabase.com/blog/studio-introducing-assistant) - [第 2 天 - Edge Functions：節點和本機 npm 相容性 ](https://supabase.com/blog/edge-functions-node-npm) -[第 3 天 - 介紹 Supabase Branching，這是一個針對每個拉取請求的 Postgres 資料庫](https://supabase.com/blog/supabase-branching) - [Postgres語言伺服器：實作解析器](https://supabase.com/blog/postgres-language-server-implementing-parser) - [Supabase 專輯](https://www.youtube.com/watch?v=r1POD-IdG-I) - [Supabase 啟動週 X 黑客松](https://supabase.com/blog/supabase-hackathon-lwx) - [啟動週 X 社群聚會](https://supabase.com/blog/community-meetups-lwx) --- 原文出處：https://dev.to/supabase/supabase-auth-identity-linking-hooks-and-haveibeenpwned-integration-19e1

0個讚   0留言 125瀏覽

初來乍到

大家好，我從站長的Dcard貼文中知道這個論壇的。 希望能夠在這裡跟大家一起學習成長。 我有一些問題想請問大家，我是資工畢業的，目前待業中，退伍後決定要朝後端發展，但是因為大學專題及所學都跟後端無關，因此退伍後一直自學到現在(一個月），下面是我建立的網站。 https://paulzhu.netlify.app/ 目前學的有html,css,javascript,git,node.js,express.js 大學專題是深度學習結合APP做掌紋辨識 想請問大家後端該學到什麼樣子的程度，才能夠求職。 謝謝各位抽空觀看這篇文章。

1個讚   7留言 568瀏覽

最新前端框架 Svelte：參考資源整理大全

*與基於元件的框架（例如 React、Angular 或 Vue）不同，使用 Svelte，您可以將建置用戶界面提升到一個新的水平。許多開發人員有興趣了解如何使用 Svelte 進行建置，以下是一份精選的有價值資源列表，可幫助您開始使用 Svelte。* 原文出處：https://dev.to/dailydotdev/building-with-svelte-all-you-need-to-know-before-you-start-2knj --- ## 為什麼選擇 Svelte？ Svelte 最近在前端開發人員中越來越受歡迎。以下簡要介紹主要優勢。 ###有什麼好處？ * Svelte 不是在瀏覽器中完成大部分工作，而是在您建置應用程式時完成它的工作，並將其**編譯為高效的 vanilla JavaScript**。 * **減少您正在使用的 JavaScript 框架的成本**。通過將 Svelte 編譯為 vanilla JavaScript，可以提高程式碼的可讀性，實現重用性，並生成更快的 Web 應用程式。 * Svelte 不需要聲明式的、狀態驅動的程式碼，瀏覽器必須將其轉換為 DOM 操作。這意味著**你不再需要使用虛擬 DOM**。 ### 缺點是什麼？ * **IDE 支持** 還不能與常用框架相媲美。它還有很大的改進空間。雖然有一些很好的在線資源可以解決一些問題，但目前，它可以被視為一個主要缺點。 * **目前沒有多少 Svelte 開發工具**。它仍然是一個年輕且不斷發展的生態系統。然而，這也是為 Svelte 社區開發一些內容的絕佳機會。 * **小型開源生態系統**。與許多其他框架一樣，圍繞特定框架建置大型社區需要時間。儘管 Svelte 已經走了相當不錯的路，但仍然沒有足夠的開源貢獻者。同樣在這裡，您也可以將其視為機會。 想詳細了解使用 Svelte 進行建置的優缺點嗎？ * [CTO 的 Svelte 指南——最新的這個前端框架能為你做什麼？](https://tsh.io/blog/svelte-framework/) * [相同但不同：Svelte 簡介](https://blog.codecentric.de/en/2020/02/same-but-different-introduction-to-svelte/) * [Svelte：與其他框架的比較](https://codeburst.io/svelte-comparison-with-other-frameworks-e895c45567de) * [強調 Svelte 優缺點的簡單示例](https://dev.to/geeksrishti/building-a-dashboard-in-svelte-2fkp) ## 幫助您入門的資源 ### Svelte 生態系統 101 👋🏼 * [Svelte 的主頁](https://svelte.dev/) * [Selvte 官方社區](https://svelte-community.netlify.app/) * [Svelte GitHub 存儲庫](https://github.com/sveltejs/svelte) * [Svelte Discord 伺服器](https://svelte.dev/chat) * [Svelte sub-reddit](https://www.reddit.com/r/sveltejs/) ###教程🤓 以下精選了**實用、全面且用戶友好**的教程： * [官方教程](https://svelte.dev/tutorial/basics) 由 Svelte 開發人員提供。 * [建置我的第一個 Svelte 應用程式：想法和印象](https://scotch.io/tutorials/building-my-first-svelte-app-thoughts-and-impressions) 由 [Chris on Code](https://twitter.com/chrisoncode) ### 用例和演示 🚀 與任何事情一樣，在開始新事物時，靈感很重要。查看一些使用 Svelte 的很棒的專案。 * [OmniaWrite](https://omniawrite.com/) - 專為創意寫作而設計的文本編輯器。同樣在 [GitHub](https://github.com/TorstenDittmann/OmniaWrite) * [TypeRunner.js](https://tsh.io/typerunner) - 一個簡單的打字遊戲，有 2-4 名人類玩家相互競爭。先打出整個文本塊的人獲勝。 * [Hacker News 克隆](https://hn.svelte.dev/) 使用 Svelte 建置。同樣在 [GitHub](https://github.com/sveltejs/hn.svelte.dev) 上。 * [Nomie](https://nomie.app/) - 使用 Svelte 建置的情緒和生活追踪器。同樣在 [GitHub](https://github.com/open-nomie/nomie) 上。 * 許多其他應用程式的炫酷展示 [使用 Svelte 製作](https://madewithsvelte.com/) ### 有用的程式碼庫💻 * [svelte-grid](https://github.com/vaheqelyan/svelte-grid) - 響應式、可拖動和可調整大小的網格佈局，適用於 Svelte * [Vime](https://github.com/vime-js/vime) - 專注於簡化網絡媒體元素的嵌入和使用 * [svelte-mui](https://github.com/vikignt/svelte-mui) - 一組受 [Google 的 Material Design] 啟發的 Svelte UI 組件(https://material.io/design) * [svelte-component-template](https://github.com/YogliB/svelte-component-template) - 建置可共享的 Svelte 3 組件的基礎 * [svelte-loader](https://github.com/sveltejs/svelte-loader) - Svelte 組件的 Webpack 加載器 * [svelte-routing](https://github.com/EmilTholin/svelte-routing) - 具有 SSR 支持的聲明式 Svelte 路由庫 * [Routify](https://github.com/roxiness/routify) - 自動化 Svelte 路線 * [svelte-inetllij](https://github.com/tomblachut/svelte-intellij) - 提供 WebStorm 和朋友中 Svelte 組件的語法突出顯示 * [@testing-library/svelte](https://github.com/testing-library/svelte-testing-library) - 鼓勵良好實踐的簡單而完整的 DOM 測試實用程序 * [svelte-apollo](https://github.com/timhall/svelte-apollo) - Apollo GraphQL 的 Svelte 集成 * 搜尋更多 [此處](https://svelte-community.netlify.app/code/) * 探索一些基本的[程式碼示例](https://svelte.dev/examples#hello-world) ### 開發者工具🔧 正如我們所說……目前可用的經過現場測試的開發人員工具不多。但是，這個非常有用：[Chrome](https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn) 和 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/svelte-devtools/) ### 隨時了解 Svelte 新聞🏄🏻 * [Svelte 官方部落格](https://svelte.dev/blog) * [Why Svelte](https://why-svelte-js.web.app/) - 專為 Svelte 新聞打造的新聞聚合器 * [daily.dev](https://daily.dev/topic/svelte) - 不要錯過有關 Svelte 的更新。讓 daily.dev 在每個新標籤頁為您收集最新的科技新聞並進行排名 * [Svelte 時事通訊](https://shershen08.github.io/sveltejsnews/) - 每兩週將最新的 Svelte 新聞發送到您的收件箱 --- 以上分享，希望對你有幫助！

0個讚   1留言 497瀏覽

22 個很好用的 CSS 小訣竅＆特殊小技巧

**🚨🚨注：**本文分享的所有tips、tricks都是GitHub repository[【css tips tricks】](https://github.com/devsyedmohsin/css-tips-tricks)的一部分。覺得有用的話請查看資源庫並給它一個star🌟 原文出處：https://dev.to/devsyedmohsin/22-useful-css-tips-and-tricks-every-developer-should-know-13c6 ## 1. Docs Layout 僅用兩行 CSS 建立響應式文件樣式的佈局。 ``` .parent{ display: grid; grid-template-columns: minmax(150px, 25%) 1fr; } ``` ![佈局](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojs8nvly2ugashxwqif8.png) ## 2.自定義游標 查看 github 存儲庫 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks) 以了解更多訊息。 ``` html{ cursor:url('no.png'), auto; } ``` ![帶有自定義光標的圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba8kist57vp6l9spw8w2.gif) ## 3. 用圖片填充文本 ``` h1{ background-image: url('images/flower.jpg'); background-clip: text; color: transparent; background-color: white; } ``` ![Air Max](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a7my28raxr80upv77k1.png) **注意：** 在使用此技術時始終指定 `background-color`，因為這將用作後備值，以防圖像因某種原因無法加載。 ## 4. 給文本加入描邊 使用 text-stroke 屬性使文本更易讀和可見，它會向文本加入筆劃或輪廓。 ``` /* 🎨 Apply a 5px wide crimson text stroke to h1 elements */ h1 { -webkit-text-stroke: 5px crimson; text-stroke: 5px crimson; } ``` ![NETLIFY](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9xcwsh18vxqw1uaj5h3.png) ## 5.暫停 Pseudo Class 使用 `:paused` 選擇器在暫停狀態下設置媒體元素的樣式 同樣 `:paused` 我們也有 `:playing`。 ``` /* 📢 currently, only supported in Safari */ video:paused { opacity: 0.6; } ``` ![河上的棕櫚樹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq1za9uri1a37kqyh1y1.gif) ## 6.強調文字 使用 text-emphasis 屬性將強調標記應用於文本元素。您可以指定任何字串，包括表情符號作為其值。 ``` h1 { text-emphasis: "⏰"; } ``` ![時間是良藥](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l1oifo8erkkblsk7ilt.png) ## 7.樣式首字下沉 避免不必要的 `<span>`，而是使用偽元素來為您的內容設置樣式，就像 `first-letter` 偽元素一樣，我們也有 `first-line` 偽元素。 ``` h1::first-letter{ font-size: 2rem; color:#ff8A00; } ``` ![Gitpod.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1jtvgnx1y1xqf0sd9b7.png) ## 8.變數的回退值 ``` /* 🎨 crimson color will be applied as var(--black) is not defined */ :root { --orange: orange; --coral: coral; } h1 { color: var(--black, crimson); } ``` ![深紅色文字“說話，你很重要”](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2477mnixnrwtwn5mqun.png) ## 9. 改變書寫模式 您可以使用書寫模式屬性來指定文本在您的網站上的佈局方式，即垂直或水平。 ``` <h1>Cakes & Bakes</h1> ``` ``` /* 💡 specifies the text layout direction to sideways-lr */ h1 { writing-mode: sideways-lr; } ``` ![文本開始於](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozqs02sh7edl70cd609a.png) ## 10.彩虹動畫 為元素建立連續循環的彩色動畫以吸引用戶注意力。閱讀 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks#rainbow-animation) 存儲庫以了解何時使用“prefer-reduced-motion”媒體功能 ``` button{ animation: rainbow-animation 200ms linear infinite; } @keyframes rainbow-animation { to{ filter: hue-rotate(0deg); } from{ filter: hue-rotate(360deg); } } ``` ![立即購買按鈕不斷改變顏色](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60jgrr09vgsckx9h2irl.gif) ## 11.掌握Web開發 訂閱我們的 [YouTube 頻道](https://www.youtube.com/@nisarhassan12)，讓您的網絡開發技能更上一層樓。 [最近的視頻系列](https://www.youtube.com/watch?v=1nchVfpMGSg&list=PLwJBGAxcH7GzdavgKlCACbESzr-40lw3L) 之一介紹了建立以下開源[投資組合模板](https://github.com/nisarhassan12 /投資組合模板）。 ![伊蒙](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxid827qfq1ybx2tl3q7.gif) ## 12. 懸停時縮放 ``` /* 📷 Define the height and width of the image container & hide overflow */ .img-container { height: 250px; width: 250px; overflow: hidden; } /* 🖼️ Make the image inside the container fill the container */ .img-container img { height: 100%; width: 100%; object-fit: cover; transition: transform 200m ease-in; } img:hover{ transform: scale(1.2); } ``` ![躺在灰色瓷磚上的深紅色購物袋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxy8ymu937e0kf14wwbc.gif) ## 13.屬性選擇器 使用屬性選擇器根據屬性選擇 HTML 元素。 ``` <a href="">HTML</a> <a>CSS</a> <a href="">JavaScript</a> ``` ``` /* 🔗 targets all a elements that have a href attribute */ a[href] { color: crimson; } ``` ![HTML CSS JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sq2rhs58a01ayfqzexk.png) ## 14. 裁剪元素 使用 `clip-path` 屬性建立有趣的視覺效果，例如將元素剪裁成三角形或六邊形等自定義形狀。 ``` div { height: 150px; width: 150px; background-color: crimson; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } ``` ![三角形](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9eqxif34ndhq33xvlpb.png) ## 15.檢測屬性支持 使用 CSS `@support 規則` 直接在您的 CSS 中檢測對 CSS 特性的支持。查看 [css 提示技巧](https://github.com/devsyedmohsin/css-tips-tricks#check-if-property-is-supported) 存儲庫以了解有關功能查詢的更多訊息。 ``` @supports (accent-color: #74992e) { /* code that will run if the property is supported */ blockquote { color: crimson; } } ``` ![永遠不要食言。(Hazrat Ali A.S)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ekr2fmhl4ori47xqgyf.png) ## 16. CSS 嵌套 CSS 工作組一直在研究如何向 CSS 加入嵌套。通過嵌套，您將能夠編寫更直觀、更有條理和更高效的 CSS。 ``` <header class="header"> <p class="text">Lorem ipsum, dolor</p> </header> ``` ``` /* 🎉 You can try CSS nesting now in Safari Technology Preview*/ .header{ background-color: salmon; .text{ font-size: 18px; } } ``` ## 17.箝制函數 使用 `clamp()` 函數實現響應式和流暢的排版。 ``` /* Syntax: clamp(minimum, preferred, maximum) */ h1{ font-size: clamp(2.25rem,6vw,4rem); } ``` ![gif 字體大小根據屏幕大小改變](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upaf9jdlfapezzmufyaa.gif) ## 18. 樣式化可選字段 你可以使用 `:optional` 偽類來設置表單字段的樣式，例如 input、select 和 textarea，這些字段沒有 required 屬性。 ``` /* Selects all optional form fields on the page */ *:optional{ background-color: green; } ``` ## 19. 字間距屬性 使用 `word-spacing` 屬性指定單詞之間的空格長度。 ``` p { word-spacing: 1.245rem; } ``` ## 20. 建立漸變陰影 這就是您如何建立漸變陰影以獲得獨特的用戶體驗。 ``` :root{ --gradient: linear-gradient(to bottom right, crimson, coral); } div { height: 200px; width: 200px; background-image: var(--gradient); border-radius: 1rem; position: relative; } div::after { content: ""; position: absolute; inset: 0; background-image: var(--gradient); border-radius: inherit; filter: blur(25px) brightness(1.5); transform: translateY(15%) scale(0.95); z-index: -1; } ``` ![帶有漸變陰影的框](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7korhhx7zaj350nfzmyb.png) ## 21. 改變標題位置 使用 `caption-side` 屬性將表格標題（表格標題）放置在表格的指定一側。 ![從上到下更改表格標題側](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t44rugi8gx3ksndq560.gif) ## 22. 建立文本列 使用列屬性為文本元素製作漂亮的列佈局。 ``` /* 🏛️ divide the content of the "p" element into 3 columns */ p{ column-count: 3; column-gap: 4.45rem; column-rule: 2px dotted crimson; } ``` ![css 提示和技巧詩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1ryft9s27y56el3ljx4.png) --- 以上分享，希望對您有幫助！

1個讚   0留言 2,431瀏覽

36 個免費、漂亮的 React UI 模板與主題套件

網路上免費的 React 版型資源不太好找，最好有一份懶人包。 這份列表整理了各式各樣的模板與主題套件，希望對您有幫助。 - 原文出處：https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci --- ##1. Open ![](https://dev-to-uploads.s3.amazonaws.com/i/gy9nddokri1vobwrtbna.jpg) [**Live demo**](https://open.cruip.com/) / [**Download**](https://github.com/cruip/open-react-template) Open 是一個免費的 React 模板，專為開源專案、線上服務、數位產品，創建快速、專業的登陸頁面而生。為了吸引潛在客戶和電子郵件訂閱者，Open 提供了一個多功能的資源庫，其中包含時尚、簡約和可重複使用的元件和元素。 --- ##2. Atomize ![](https://dev-to-uploads.s3.amazonaws.com/i/ks2st96gb0tbu1ybuy6k.jpg) [**Live demo**](https://atomizecode.com/) / [**Download**](https://github.com/proksh/atomize) Atomize 是一個 React UI 框架，旨在幫助開發人員與設計師合作，輕鬆構建一致和諧的用戶界面。由於樣式指南和靈活網格等資源的完美結合，Atomize 適合建立任何類型的響應式網站。 --- ##3. Treact ![](https://dev-to-uploads.s3.amazonaws.com/i/3aw9a273jibs97o2l09m.jpg) [**Live demo**](https://treact.owaiskhan.me/) / [**Download**](https://gumroad.com/l/QaruQ) Treact 是使用 TailwindCSS 作為前端框架開發的現代 React 模板和 UI 組件展示庫。這個精美的檔案庫提供了 7 個內建的主頁、8 個輔助頁面以及 52 個預先設計的元素和段落。每個內容都可以針對家用電腦、平板電腦和移動設備進行擴充。 --- ##4. MatX ![](https://dev-to-uploads.s3.amazonaws.com/i/q99tvy2uvyvol2xet2et.jpg) [**Live demo**](http://matx-react.ui-lib.com/dashboard/analytics) / [**Download**](https://ui-lib.com/downloads/matx-react-dashboard/) MatX 是一個建立在 Material Design 之上的精美 React Native 模板。此模板使用 React、Redux 和 Material UI，它包含為 Web 應用程式提供新造型可能需要的所有基本功能。 MatX 的免費版本可用於輕鬆設置管理面板、用戶管理系統和專案管理系統。 --- ##5. Holly ![](https://dev-to-uploads.s3.amazonaws.com/i/dcrv1qxgo3rgq9a3j3at.jpg) [**Live demo**](https://lukemcdonald.github.io/holly-react/) / [**Download**](https://github.com/lukemcdonald/holly-react) Holly 是一個響應式 React JS 模板，適用於線上服務和數位產品的生產者，能在主要產品仍在開發中時，就開始搜集電子郵件地址。這個模板最初是由 [Cruip](https://cruip.com/) 用 HTML 設計的，然後在這個版本中用 React 撰寫。 --- ##6. OAH-Admin ![](https://dev-to-uploads.s3.amazonaws.com/i/rteeixluj4n09a3s69ma.jpg) [**Live demo**](https://oah-admin.ahmedelywa.com/extra-components/progress/) / [**Download**](https://github.com/AhmedElywa/oah-admin) OAH-Admin 是一個基於 Gatsby 的免費 React 管理儀表板模板，帶有 oah-ui 元件和元素包。這個 React 模板有良好的 UI 元件色調，超級整潔和靈活的格式使任何人都可以輕鬆建立 SaaS 應用程式、管理面板、儀表板。 --- ##7. Gatsby Starter Ghost ![](https://dev-to-uploads.s3.amazonaws.com/i/ocey043yzsdt31f7yi9s.jpg) [**Live demo**](https://gatsby.ghost.org/) / [**Download**](https://github.com/TryGhost/gatsby-starter-ghost) 使用 Ghost 這個基於 Gatsby 的入門模板，輕鬆建立高效能網站。Gatsby Starter Ghost 是一個乾淨而現代的模板，適用於部落格、雜誌或任何新聞網站。該產品專門設計來幫助任何人在網路上建立個人空間並分享想法、創意和更新。 --- ##8. Star Admin ![](https://dev-to-uploads.s3.amazonaws.com/i/hlbf4y4pl4a5od2c8chb.jpg) [**Live demo**](https://www.bootstrapdash.com/demo/star-admin-free/react/template/demo_1/preview/dashboard) / [**Download**](https://github.com/BootstrapDash/StarAdmin-Free-React-Admin-Template) 一個免費的 React Native 模板，提供了無窮無盡的各種基本元素，可以將任何想法變為現實。該模板具有精心製作的儀表板，包含大量整齊排列和組織的元件，它可以完美地與所有最新和現代的瀏覽器配合使用，並且能夠使資料可視化過程更易於管理。 --- ##9. Carolina Admin Dashboard ![](https://dev-to-uploads.s3.amazonaws.com/i/05r7fsc1jzylez5diu6f.jpg) [**Live demo**](https://demo.uifort.com/carolina-react-admin-dashboard-material-ui-free-demo/LandingPage) / [**Download**](https://uifort.com/template/carolina-react-admin-dashboard-material-ui-free/) 如果您正在尋找一個令人驚嘆且實用的 React 儀表板模板，Carolina Admin Dashboard 擁有啟動和運行您 Web 專案所需的一切。這個漂亮的模板建立在 Material-UI 框架之上，採用乾淨清新的設計，遵循所有 Google 的 Material Design 指南。此外，核心結構是完全響應式和開源的。 --- ##10. Tabler ![](https://dev-to-uploads.s3.amazonaws.com/i/nu5vq6j5buk36iz8prsn.jpg) [**Live demo**](http://tabler-react.com/) / [**Download**](https://github.com/tabler/tabler-react) Tabler 是一個免費的 React 管理儀表板模板，非常適合任何類型的後端 Web 應用。此管理模板包含大量精心設計的範例，無需從頭開始，可為您節省大量時間，它還附帶可重複使用的元件，例如按鈕、地圖、圖表、表單等。 --- ##11. React Nice Resume ![](https://dev-to-uploads.s3.amazonaws.com/i/ci5hhvp6ki5o3mpk8zbz.jpg) [**Live demo**](https://nordicgiant2.github.io/react-nice-resume-page/#home) / [**Download**](https://github.com/nordicgiant2/react-nice-resume) React Nice Resume 是一個漂亮的主題，如果您是開發人員、設計師或一般的數位創作者，可以用來宣傳您自己和您的作品。該資源展示了一個獨特的主頁，帶有粒子背景、工作經驗時間線、技能圖表、顯示最新專案的縮略圖、一個帶有功能輸入表單的段落。 --- ##12. Boss Lite ![](https://dev-to-uploads.s3.amazonaws.com/i/zq92otm0bc9t3mwinkxb.jpg) [**Live demo**](http://boss.ux-maestro.com/app/tables/data-table) / [**Download**](https://github.com/ilhammeidi/boss-lite) Boss Lite 是一個基於 React 和 Redux 的管理儀表板模板。此模板為您帶來清新現代的設計和多種配色方案。它支援大多類型的 Web 專案，並且 Flexbox 佈局而變得很流暢。 --- ##13. Chakra UI ![](https://dev-to-uploads.s3.amazonaws.com/i/poootemj2t5caoi4lryt.jpg) [**Live demo**](https://chakra-ui.com/) / [**Download**](https://github.com/chakra-ui/chakra-ui/) Chakra UI 提供了一組好用、可重用的 React 功能元件，使建立好用網站和用戶界面變得非常簡單。 Chakra UI 中的幾乎所有元素都兼容深色模式，它們遵循 WAI-ARIA 指南規範，並構建在 React UI Primitive 之上以實現無限的可組合性。 --- ##14. Black Dashboard React ![](https://dev-to-uploads.s3.amazonaws.com/i/2r1tx4uxug6k1xlnr3pr.jpg) [**Live demo**](https://demos.creative-tim.com/black-dashboard-react/#/admin/dashboard) / [**Download**](https://www.creative-tim.com/product/black-dashboard-react) Black Dashboard React 是用於管理界面的 React 模板。該模板基於 Bootstrap 建立的設計指南，是基於企業的應用程式，是強大後端軟體可用的優秀前端選項。它具有更高等級的切分、設計套件、可重複使用的圖表，能夠不斷改善用戶和開發體驗。 --- ##15. Argon Design System ![](https://dev-to-uploads.s3.amazonaws.com/i/tvrfqzddf6kwmhiwje6x.jpg) [**Live demo**](https://demos.creative-tim.com/argon-design-system-react/) / [**Download**](https://github.com/creativetimofficial/argon-design-system-react) 使用 Bootstrap 4 和 Reactstrap 的 React 設計系統。Argon Design System 帶有 100 多個單獨的元件、內建的範例，並且每個元素都有多種樣式、懸停、焦點狀態，任何人都可以輕鬆使用。該產品是從原型設計到正式上線的完美解決方案。 --- ##16. Devias Kit - Admin Dashboard ![](https://dev-to-uploads.s3.amazonaws.com/i/j7lqqfvgmujtgg1m80oi.jpg) [**Live demo**](https://react-material-dashboard.devias.io/dashboard) / [**Download**](https://github.com/devias-io/react-material-dashboard) Devias Kit 是一個響應式 Material Design 管理儀表板，專為 React 使用 Google 自己的 Material Design 框架建立。可以自定義設置、指令、圖標和樣式。該模板包含清晰直觀的目錄和文件、快速入門文件，如果您想對設計進行任何更改，甚至還有 Sketch 文件。 --- ##17. Dev Blog ![](https://dev-to-uploads.s3.amazonaws.com/i/1tym4ekzrftd6ldcflid.jpg) [**Live demo**](https://ryanfitzgerald.github.io/devblog/) / [**Download**](https://github.com/RyanFitzgerald/devblog) Dev Blog 是一個 React 網站模板，專為快速建立副專案和產品而生。該網站模板帶有一個首頁，其中顯示了部落格名稱、社交媒體圖示以及帶有文字和圖像的文章縮圖。該模板還包括單個文章頁面，有漂亮且精心策劃的排版。 --- ##18. Material PRO ![](https://dev-to-uploads.s3.amazonaws.com/i/scakf4swq5j99hln1xqx.jpg) [**Live demo**](https://wrappixel.com/demos/free-admin-templates/materialpro-reactadmin-lite/main/#/starter/starter) / [**Download**](https://www.wrappixel.com/templates/materialpro-react-admin-lite/) Material Pro 是一個免費的 React Native 模板，為任何需要管理儀表板的人精心製作。這個漂亮而清爽的產品採用模組化和現代設計理念開發，100% 免費使用和下載，並包含許多頁面，可幫助您更快、更輕鬆地建立專案。 --- ##19. Ant Design Landing ![](https://dev-to-uploads.s3.amazonaws.com/i/wnld469wyg4u9pfk31i1.jpg) [**Live demo**](https://landing.ant.design/) / [**Download**](https://github.com/ant-design/ant-design-landing) Landing 是 Ant Design System 建立的模板。內涵不同樣式的首頁和內頁模組。 --- ##20. Isomorphic ![](https://dev-to-uploads.s3.amazonaws.com/i/zy0at5stk267a06n5f95.jpg) [**Live demo**](https://isomorphic.redq.io/dashboard) / [**Download**](https://github.com/pujoey/ismorphic) Isomorphic 是一個易於管理且有吸引力的管理模板，具有大量靈活的元件。 --- ##21. Shards Dashboard Lite ![](https://dev-to-uploads.s3.amazonaws.com/i/71cn55agi3k9er11xk4o.jpg) [**Live demo**](https://designrevision.com/demo/shards-dashboard-lite-react/blog-overview) / [**Download**](https://designrevision.com/downloads/shards-dashboard-lite-react/) Shards 是一個免費的 React 儀表板模板，具有現代設計系統和許多自定義頁面和部分。 --- ##22. uiw ![](https://dev-to-uploads.s3.amazonaws.com/i/e6aakqf9m9g67mstwvi9.jpg) [**Live demo**](https://uiwjs.github.io/) / [**Download**](https://github.com/uiwjs/uiw) uiw 是用於 React 16+ 的高質量 React 元件庫和 UI 工具包。 --- ##23. React Material Admin ![](https://dev-to-uploads.s3.amazonaws.com/i/te6tezfjcp008lb4q7du.jpg) [**Live demo**](https://flatlogic.github.io/react-material-admin/#/login) / [**Download**](https://flatlogic.com/templates/react-material-admin) React Material Admin 是一個建立在 Material-UI 框架之上的 React 儀表板。 --- ##24. Material KIT React ![](https://dev-to-uploads.s3.amazonaws.com/i/cq2xlu4tci8km6p2tia7.jpg) [**Live demo**](https://demos.creative-tim.com/material-kit-react/) / [**Download**](https://www.creative-tim.com/product/material-kit-react) Material UI KIT 是一款免費的 React UI 主題，其設計靈感來自 Google 的 Material Design，設計清新整潔。 --- ##25. Airframe ![](https://dev-to-uploads.s3.amazonaws.com/i/qwt4nv73xjn14a9g09yl.jpg) [**Live demo**](http://dashboards.webkom.co/react/airframe/dashboards/projects/) / [**Download**](https://github.com/0wczar/airframe-react) Airframe 是一個基於 Bootstrap 4 和 React 16 的免費開源 React 應用程式模板。 --- ##26. Gatsby Simplefolio ![](https://dev-to-uploads.s3.amazonaws.com/i/pe3clc53zqsntgh3vw3n.jpg) [**Live demo**](https://gatsby-simplefolio.netlify.app/) / [**Download**](https://github.com/cobidev/gatsby-simplefolio) Gatsby Simplefolio 是一個乾淨、美觀且響應迅速的 React 組合模板。 --- ##27. Ant Design Pro ![](https://dev-to-uploads.s3.amazonaws.com/i/diktnddjjf630tdyyqa8.jpg) [**Live demo**](https://pro.ant.design/) / [**Download**](https://github.com/ant-design/ant-design-pro/) React --- ##28. React SaaS Template ![](https://dev-to-uploads.s3.amazonaws.com/i/yiq5ast9jw3knt8l92l0.jpg) [**Live demo**](https://reactsaastemplate.com/) / [**Download**](https://github.com/dunky11/react-saas-template) --- ##29. Shards React ![](https://dev-to-uploads.s3.amazonaws.com/i/34zfg3e4qbbzklmgr4uh.jpg) [**Live demo**](https://designrevision.com/downloads/shards-react/) / [**Download**](https://github.com/designrevision/shards-react) --- ##30. Base Web ![](https://dev-to-uploads.s3.amazonaws.com/i/8q3bxpsll7k0qrhzdlmj.jpg) [**Live demo**](https://baseweb.design/) / [**Download**](https://github.com/uber/baseweb) --- ##31. Light Blue React Dashboard ![](https://dev-to-uploads.s3.amazonaws.com/i/tfwzjgvh2sa8e5v9a0oa.jpg) [**Live demo**](https://demo.flatlogic.com/light-blue-react/#/app/main/dashboard) / [**Download**](https://github.com/flatlogic/light-blue-react-template) --- ##32. React JS Landing ![](https://dev-to-uploads.s3.amazonaws.com/i/ibuom994cxj3pzb2yzoz.jpg) [**Live demo**](https://react-landing-page-template.herokuapp.com/#page-top) / [**Download**](https://github.com/IssaafKattan/React-Landing-Page-Template) --- ##33. Admin Pro ![](https://dev-to-uploads.s3.amazonaws.com/i/0f1pjehgesa25ts39wx7.jpg) [**Live demo**](https://wrappixel.com/demos/free-admin-templates/adminpro-react-lite/main/#/dashboard) / [**Download**](https://www.wrappixel.com/templates/adminpro-react-admin-lite/#comparison) --- ##34. Blueprint ![](https://dev-to-uploads.s3.amazonaws.com/i/d1owpo8lfg3zfq1p2vpx.jpg) [**Live demo**](https://blueprintjs.com/) / [**Download**](https://github.com/palantir/blueprint) --- ##35. Datta ![](https://dev-to-uploads.s3.amazonaws.com/i/3con3tndvc7au5zg1jb0.jpg) [**Live demo**](http://lite.codedthemes.com/datta-able/react/default/dashboard/default) / [**Download**](https://codedthemes.com/item/datta-able-react-free-admin-template/) --- ##36. Flatlogic One ![](https://dev-to-uploads.s3.amazonaws.com/i/63flhvqcbh7jtfvih9do.jpg) [**Live demo**](https://flatlogic.github.io/one-react-template/#/login) / [**Download**](https://flatlogic.com/templates/one-free-react-template) --- ##結論 我希望這組免費的 React 模板和主題能夠幫助您！

0個讚   0留言 2,565瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 SOLID－簡單的理解方式
🔥 使用更多的終端機和更少的滑鼠來提高您的工作效率 (🚀)。
🔥 你不是軟體工程師，你只是個「框架使用者」
🔥 🕸️ 2024 年我們將看到的 Web 開發趨勢 👀
🔥 詢問JS children使用方式
  近期留言
熱門搜尋： module Git user nodes 使用 題 c 19 go ci 4 第一 2 學習 C 開發 1 . 20 % 前 前端 git 10 專案 作為 JS 語言 app Github 工作 網站 javascript github COM id html 主題 api 後端 ＣＳＳ js AI 50 作業 查詢 網頁 技術 GIT bi ui ` REACT CSS Ai " 分享 API with 套件 搜尋 for jav create 測試 JavaScript 非同步 HTML react Javascript local Can Node 研究 自學網頁の嬰兒教材： 履歷 class 研 unity python 聊天 Java Vue 面試 result JAVA QT import 工程師 fetch ruby console CD Line prisma 分離 遊戲 COMPO 資料庫 rest
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。