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

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

🔍 搜尋結果：2024

🔍 搜尋結果：2024

🕸️ 2024 年我們將看到的 Web 開發趨勢 👀

隨著我們已經步入新的一年，現在是了解 2024 年 Web 開發趨勢開始受到關注的最佳時機。 回顧 2023 年以來的旋風式更新，以下是一些熱門話題的概述即將到來的一年。 ![戲法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8d7a35t3wvyu1ppj6xc.png) 返回自架 ---- ![噗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zlko5f6tojse2ypqq2w.jpg) 多年來，自架是網頁開發人員和公司託管其應用程式的最初和預設方式。開發人員必須更深入地了解 IIS、Nginx 或類似工具的內部工作原理才能託管其 Web 應用程式。隨後出現了雲端服務，與「自己動手做」的方法相比，雲端服務的出現使部署變得輕而易舉。不再有伺服器維護的惡夢，對吧？ 與「標準」自託管解決方案相比，更便宜、更方便的雲端部署意味著在其他地方更容易學習和維護部署。畢竟，你必須擁有一台伺服器，維護它、更新它、解決錯誤等。在生產環境中執行」開始出現就像過去的事情一樣。 但是，這還不足以取代僅將應用程式傳送到某些外部提供者的便利性。不必被迫學習太多有關網路、管理和虛擬機器處理的便利性仍然不存在。更便宜的家庭伺服器的興起，使用網路附加儲存（NAS）及其廣泛的選項，使得處理輕量級使用的自託管需求變得更加容易。我們現在擁有 Proxmox 和 Portainer 等工具，它們使自架您自己的 Docker 容器變得輕而易舉。我們甚至看到 DHH（他是 Ruby on Rails 等產品的建立者）公司[完全轉向](https://world.hey.com/dhh/why-we-re-leaving-the-cloud-654b47e0)自託管模式，這引發了一場大爭論。 重回自有伺服器 ----- ![伺服器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjxxcr4n3kjlhh72ikvn.png) 在 React 的世界中，有一種強烈的推動力將伺服器作為渲染應用程式的方式。 [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)主要透過 Next.js 帶頭，儘管是一項非常新技術，但在公眾討論中獲得了很大的空間。這些工具正在攪局——一些開發人員認為它們具有開創性，而另一些開發人員則認為它們只是重新發明輪子。無論如何，承諾是更快的頁面加載、更少的客戶端程式碼和更流暢的開發體驗。 React 元件可以在伺服器上專門執行和渲染 React 程式碼，這應該會帶來一些好處，例如更快的頁面載入、更少的發送到客戶端的程式碼以及更好的開發人員體驗。 DX 的一大優點是直接從元件本身安全地存取資料庫層，而不需要 API。 [HTMX](https://htmx.org/)是另一個因其伺服器優先的資料渲染方法而受到歡迎的程式庫，儘管它正在尋求一種更簡單的方法來吸引開發人員。 重回 SPA ------ ![水療圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uugl165hh4465tekfn6g.png) 等等，這不是有點矛盾嗎？雖然伺服器端渲染正在蓬勃發展，但也有一個堅實的陣營正在完善優秀的單頁應用程式 (SPA) 方法。主要原因是我們在嘗試伺服器優先方法方面走得太遠，以至於我們忘記了並非所有應用程式都應該駐留在伺服器上。有些可能是高度動態的，帶有大量複雜的用戶端驗證，或者您只是想將舊的 Create-React-App 架構遷移到 Vite。 順便說一句，如果您想知道 SPA 到底是什麼以及我什麼時候應該使用它而不是 React 伺服器元件，請讓我快速解釋一下。單頁應用程式 (SPA) 是一種 Web 應用程式，它最初僅加載單個 Web 文件，然後動態更新同一頁面上的內容，而無需重新加載整個頁面。 SPA 透過重寫現有網頁而不是從伺服器載入全新頁面來與使用者互動。 Remix SPA 模式是較新的 SPA 方法的範例之一。它使用 Vite 建立基本上是 React Router 和 Vite 的設置，並具有附加的 Remix 特定功能，例如基於文件的路由等。 利用 Vite 為使用者提供 SPA 體驗的 React 框架的另一個例子是[Wasp——一個針對 React 和 Node.js 的全端框架，大大減少了樣板檔案](https://github.com/wasp-lang/wasp)。儘管它是一個全端框架，但它專注於使用 Node.js 伺服器部署客戶端 React 應用程式的標準化方法，以盡可能實現可移植。透過這種方法，您幾乎可以在任何地方部署您的應用程式，也可以自行託管它，這也是我們之前在本文中提到的一件事。 ![OpenSaaS 橫幅](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzwgvd7wm3i04gia4zrk.png) 為了更快啟動，它還具有[Open SaaS - 一個適用於 React 和 Node.js 的 100% 免費開源樣板啟動器](https://github.com/wasp-lang/open-saas)。只需克隆它，即可獲得具有身份驗證、計費、開放 AI API、用戶儀表板等功能的工作應用程式！ ### 覺得這篇文章有用嗎？ 我們在[Wasp](https://wasp.sh/)正在努力建立這樣的內容，更不用說建立一個現代的開源 React/NodeJS 框架了。 表達您支援的最簡單方法就是為 Wasp 儲存庫加註星標！ 🐝 但如果您可以查看[儲存庫](https://github.com/wasp-lang/wasp)（用於貢獻，或只是測試產品），我們將不勝感激。點擊下面的按鈕給黃蜂星一顆星並表示您的支持！ ![wasp_arnie_handshake](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axqiv01tl1pha9ougp21.gif) https://github.com/wasp-lang/wasp ⭐️ 感謝您的支持 💪 低級語言的興起 ------- ![銹病](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61wil1pr8jfv72p17hec.png) 暫時離開 JavaScript 的世界，我們發現許多低階語言進入主流的例子，尤其是在 JavaScript 工具方面。這一趨勢在過去幾年中已經開始，並且應該會持續到 2024 年及以後。當 JavaScript 生態系統開始蓬勃發展時，出現了許多使用 JavaScript 建立的出色工具，這使得開發人員可以更輕鬆地為它們做出貢獻，並允許他們建立自己的插件並根據自己的喜好進行自訂。 我們應該對此感到興奮的一個重要原因是，與基於 JS 的工具相比，這些工具為開發人員帶來的效能。 SWC（Speedy Web Compiler）和 Turbopack（Vercel 自稱為 Webpack 的繼承者）等工具都是用 Rust 建構的。另一方面，Bun，它是一個帶有 Zig 的一體化 JavaScript 工具包。它不僅使用戶能夠將其用作預設的 JavaScript 執行時，還可以用作捆綁器、測試執行器和與 Node.js 相容的套件管理器。很棒的是，許多新工具不會消除與預先存在的概念的兼容性，這使得轉換相對容易。 結論 -- 與所有事情一樣，我們應該對所有預測和潛在趨勢持保留態度。人們很容易被當今不斷出現的新技術和工具的炒作沖昏頭。如果你仔細閱讀這篇文章，你可能會想「好吧，人工智慧在哪裡？」。我故意不包含任何基於人工智慧的預測，以提高人們對行業中被忽視的其他酷發展和趨勢的認識。 您如何看待這些趨勢？你也注意到他們了嗎？或者更好，自己做一些這樣的事情？請在下面的評論部分告訴我們並分享您的意見！ --- 原文出處：https://dev.to/wasp/web-development-trends-we-will-see-in-2024-55pi

1個讚   0留言 43瀏覽

我們在使用 Rust 建構 SaaS 時學到了什麼

在這篇文章中，我們**不會**回答每個人在開始新專案時都會問的問題：**我應該用 Rust 來做嗎？** ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNHQwOTl6Ym5odmVmNDZpdzVmZG9mMW9yd2tmN2lyZ2NzOWNxc2MxMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l83rkRUu4IqyUbt5k6/giphy.gif) 相反，我們將探索在自信地回答「**絕對！** 」並開始主要使用 Rust 建立業務後遇到的陷阱和見解。 這篇文章旨在提供我們經驗的高層次概述，我們將在即將推出的系列中更深入地研究細節。 （在評論中為我們的下一篇文章投票🗳️） --- 為什麼生鏽 ----- 為專案選擇正確的語言從來不是一個一刀切的決定。 關於我們的團隊和用例的幾句話： - 我們是一個 6 人團隊，幾乎沒有 Rust 經驗，但擁有建立資料密集型應用程式的豐富 Scala/Java 背景 - 我們的 SaaS 是一個計費平台，專注於分析、即時資料和可操作的見解（想想 Stripe Billing 與 Profitwell 的結合，再加上一點 Posthog）。 - 我們的後端完全採用 Rust（分為 2 個模組和幾個工作線程），並使用 gRPC-web 與我們的 React 前端進行對話 > 我們是開源的！ > 您可以在這裡找到我們的儲存庫：https://github.com/meteroid-oss/meteroid > 我們期待您的支持 ⭐ 和貢獻 因此，我們有一些不可協商的要求恰好非常適合 Rust：**效能、安全性和並發性**。 Rust 實際上消除了與記憶體管理相關的所有 bug 和 CVE，而它的並發原語非常有吸引力（並且沒有讓人失望）。 在 SaaS 中，所有這些功能在處理敏感或關鍵任務時尤其有價值，例如我們案例中的計量、發票計算和交付。 正如[包括微軟在內的](https://mspoweruser.com/microsoft-forms-new-team-to-help-rewrite-core-windows-components-into-rust-from-c-c/)許多大型企業最近所承認的那樣，其記憶體使用量的顯著減少也是建立可擴展和**永續**平台的一大優勢。 來自戲劇性的、有時有毒的 Scala 社區，**熱情且包容的**Rust 生態系統也是一個重要的吸引力，為探索這個新領域提供了動力。 帶著這樣的厚望，讓我們開始我們的旅程吧！ --- 第 1 課：學習曲線是真的 ------------- 學習 Rust 並不像學習另一種語言。所有權、借用和生命週期等概念一開始可能會讓人望而生畏，使得原本瑣碎的程式碼變得極其耗時。 儘管生態系統令人愉快（稍後會詳細介紹），但有時**您不可避免地需要編寫較低層級的程式碼**。 例如，考慮我們的 API (Tonic/Tower) 的一個相當基本的中間件，它只報告計算持續時間： ``` impl<S, ReqBody, ResBody> Service<Request<ReqBody>> for MetricService<S> where S: Service<Request<ReqBody>, Response = Response<ResBody>, Error = BoxError> + Clone + Send + 'static, S::Future: Send + 'static, ReqBody: Send, { type Response = S::Response; type Error = BoxError; type Future = ResponseFuture<S::Future>; fn poll_ready(&mut self, cx: &mut Context<'_>) -> Poll<Result<(), Self::Error>> { self.inner.poll_ready(cx) } fn call(&mut self, request: Request<ReqBody>) -> Self::Future { let clone = self.inner.clone(); let mut inner = std::mem::replace(&mut self.inner, clone); let started_at = std::time::Instant::now(); let sm = GrpcServiceMethod::extract(request.uri()); let future = inner.call(request); ResponseFuture { future, started_at, sm, } } } #[pin_project] pub struct ResponseFuture<F> { #[pin] future: F, started_at: Instant, sm: GrpcServiceMethod, } impl<F, ResBody> Future for ResponseFuture<F> where F: Future<Output = Result<Response<ResBody>, BoxError>>, { type Output = Result<Response<ResBody>, BoxError>; fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> { let this = self.project(); let res = ready!(this.future.poll(cx)); let finished_at = Instant::now(); let delta = finished_at.duration_since(*this.started_at).as_millis(); // this is the actual logic let (res, grpc_status_code) = (...) crate::metric::record_call( GrpcKind::SERVER, this.sm.clone(), grpc_status_code, delta as u64, ); Poll::Ready(res) } } ``` 是的，除了泛型類型、泛型生命週期和特徵約束之外，您最終還需要為簡單的服務中間件編寫自訂的 Future 實作。 請記住，這是一個有點極端的例子，旨在展示生態系統中存在的粗糙邊緣。*在許多情況下，Rust 最終可以像任何其他現代語言一樣緊湊。* **學習曲線可能會根據您的背景而有所不同。**如果您習慣了 JVM 處理繁重的工作並像我們一樣使用更成熟、更廣泛的生態系統，那麼可能需要付出更多的努力來理解 Rust 的獨特概念和範例。 然而，一旦您掌握了這些概念和原語，它們就會成為您武器庫中極其強大的工具，即使您偶爾需要編寫一些樣板文件或宏，也可以提高您的工作效率。 值得一提的是， [Google 在相當短的時間內成功地將團隊從 Go 和 C++ 過渡到 Rust，](https://www.theregister.com/2024/03/31/rust_google_c)並且取得了積極的成果。 要平滑學習曲線，請考慮以下因素： - **閱讀官方[Rust Book 的](https://doc.rust-lang.org/stable/book/)封面**。不要跳過章節。理解這些複雜的概念將變得容易得多。 - **練習，練習，練習！**透過[Rustlings](https://rustlings.cool/)練習來建立肌肉記憶並採用 Rust 思維方式。 - **參與[Rust 社群](https://www.reddit.com/r/rust/)。**他們是一群令人難以置信的人，總是願意伸出援手。 - **利用 GitHub 的搜尋**功能尋找其他專案並向其學習。生態系統仍在不斷發展，與其他人的合作至關重要（只需注意許可證並始終做出貢獻）。 我們將在下一篇文章中探討一些帶給我們啟發的專案。 --- 教訓 2：生態系仍處於成熟階段 --------------- Rust 的底層生態系統確實令人難以置信，擁有精心設計和維護的庫，並被社區廣泛採用。這些函式庫為建構高效能且可靠的系統奠定了堅實的基礎。 然而，當你在堆疊中向上移動時，事情可能會變得稍微複雜一些。 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeWNoejRsb2RhaGsybzQwdXJydjJzbHVpNjR6eW9udzdudjlvdWVjdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l2SpOlC7JLROBEkO4/giphy.gif) 例如，在資料庫生態系統中，雖然針對關聯式資料庫存在像[`sqlx`](https://github.com/launchbadge/sqlx)和[`diesel`](https://github.com/diesel-rs/diesel)這樣的優秀函式庫，但對於許多非同步或非關聯式資料庫用戶端來說，情況會更加複雜。這些領域的高品質庫，即使被大公司使用，也往往只有**單一維護者**，導致開發速度較慢並且有潛在的維護風險。 對於分散式系統原語來說，挑戰更為明顯，您可能需要實現自己的解決方案。 這並不是 Rust 所獨有的，但與舊的/更成熟的語言相比，我們經常發現自己處於這種情況。 從好的方面來說， **Rust 的生態系統對安全問題的反應令人印象深刻**，補丁迅速傳播，確保了應用程式的穩定性和安全性。 到目前為止，圍繞 Rust 開發的工具也非常令人驚嘆。 我們將在以後的文章中深入探討我們選擇的函式庫以及我們所做的決定。 生態系統不斷發展，社區積極努力填補空白並提供強大的解決方案。準備好探索未知領域，並相應地分配資源以幫助維護，並回饋社區。 --- ### ……我有沒有提到我們是開源的？ > [Metroid](https://meteroid.com/)是一個現代化的開源計費平台，專注於商業智慧和可操作的見解。 **我們需要你的幫助 ！如果你有一分鐘時間，** [](https://git.new/meteroid) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDFvd2M3bnZ4OTF1dzBkcHh1NnlwemY1cTU5NWVjOThoZjU4a2U5biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XATW2O9w0hrmuIpvtu/giphy.gif) 您的支持對我們意義重大❤️ https://github.com/meteroid-oss/meteroid ⭐️ 在 Github 上為我們加註星標 ⭐️ --- 第 3 課：文件位於程式碼中 -------------- 當深入 Rust 的生態系統時，您很快就會意識到文件網站有時可能有點......好吧，稀疏。 但不要害怕！真正的寶藏往往存在於原始碼中。 許多庫都有**非常詳細的方法記錄，**並**在程式碼註釋中**包含全面的範例。如有疑問，請深入研究原始程式碼並進行探索。您經常會發現您尋求的答案，並對圖書館的內部運作有更深入的了解。 雖然具有使用指南的外部文件仍然很重要，並且可以節省開發人員的時間和挫折感，但在 Rust 生態系統中，準備好在必要時深入研究程式碼至關重要。 像[docs.rs](https://docs.rs)這樣的網站可以輕鬆存取公共 Rust 套件的基於程式碼的文件。或者，您可以使用 Cargo doc 在本機上產生所有依賴項的文件。這種方法一開始可能會令人困惑，但從長遠來看，花一些時間學習如何駕馭這個系統可能會非常有效。 不用說，另一個有用的技術是尋找範例（**大多數庫在其存儲庫中都有一個`/examples`資料夾**）和使用您感興趣的庫的其他專案，並與這些社區互動。這些總是為如何使用該庫提供有價值的指導，並且可以作為您自己實施的起點。 --- 第四課：不要追求完美 ---------- 當開始使用 Rust 時，人們很容易會努力爭取最慣用和最高效能的程式碼。 然而，大多數時候，以簡單性和生產力的名義進行權衡是可以的。 ![做完比求完美強](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fylenuk9pzgynzsvbwpf.png) 例如，使用`clone()`或`Arc`在執行緒之間共享資料可能不是最節省記憶體的方法，但它可以極大地簡化程式碼並提高可讀性。只要您意識到效能影響並做出明智的決策，**優先考慮簡單性是完全可以接受的。** 請記住，過早的優化是萬惡之源。首先專注於編寫乾淨、可維護的程式碼，然後在必要時進行最佳化。**不要嘗試進行微優化（**除非您確實需要）。 Rust 強大的類型系統和所有權模型已經為編寫高效、安全的程式碼提供了堅實的基礎。 當需要優化效能時，請專注於關鍵路徑並使用`perf`和`flamegraph`等分析工具來辨識程式碼中的真正效能熱點。對於工具和技術的全面概述，我可以推薦[The Rust Performance Book](https://nnethercote.github.io/perf-book/introduction.html) 。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyudtxuaeswhtc9porfc.png) **¹**這適用於您的整個創業歷程，包括籌款 --- 第五課：錯誤畢竟是好事 ----------- Rust 的錯誤處理非常優雅，具有`Result`類型和`?`運算符鼓勵明確的錯誤處理和傳播。然而，這不僅涉及處理錯誤；還涉及處理錯誤。它還涉及提供乾淨且資訊豐富的錯誤訊息以及可追蹤的堆疊追蹤。 無需大量樣板在錯誤類型之間進行轉換。 像`thiserror` ， `anyhow`或`snafu`函式庫對於這個目的來說是無價的。我們決定使用`thiserror` ，它可以簡化帶有資訊性錯誤訊息的自訂錯誤類型的建立。 在大多數 Rust 用例中，您不太關心底層錯誤類型堆疊跟踪，而是更喜歡將其直接映射到域中的訊息類型錯誤。 ``` #[derive(Debug, Error)] pub enum WebhookError { #[error("error comparing signatures")] SignatureComparisonFailed, #[error("error parsing timestamp")] BadHeader(#[from] ParseIntError), #[error("error comparing timestamps - over tolerance.")] BadTimestamp(i64), #[error("error parsing event object")] ParseFailed(#[from] serde_json::Error), #[error("error communicating with client : {0}")] ClientError(String), } ``` 投入時間製作清晰且資訊豐富的錯誤訊息可以大大增強開發人員的體驗並簡化偵錯。這是一個小小的努力，卻可以產生顯著的長期效益。 然而，有時，甚至在日誌位於使用者範圍之外的 SaaS 用例中，保留完整的錯誤鏈以及沿途可能有額外的上下文是很有意義的。 我們目前正在試驗[`error-stack`](https://github.com/hashintel/hash/tree/main/libs/error-stack) ，這是一個由 hash.dev 維護的庫，它允許附加額外的上下文並將其保留在整個錯誤樹中。它作為`thiserror`之上的一層效果很好。 它提供了一個慣用的 API，實際上將錯誤類型包裝在報告資料結構中，該資料結構保留了所有錯誤、原因和您可能加入的任何其他上下文的堆疊，在發生故障時提供大量資訊。 我們遇到了一些問題，但這篇文章已經太長了，更多內容將在後續文章中介紹！ 總結 --- 使用 Rust 建立我們的 SaaS 一直是（而且仍然是）一段旅程。一開始是一段漫長而充滿挑戰的旅程，但也是一段非常有趣且有益的旅程。 - **使用 Scala 可以更快地建立我們的產品嗎？** 當然。 - **會有那麼有效嗎？** 或許。 - **我們還會像今天一樣充滿熱情和興奮嗎？** 可能不會。 Rust 促使我們以不同的方式思考我們的程式碼，接受新的範式，並不斷努力改進。 **當然，Rust 也有其粗糙的一面**。學習曲線可能很陡峭，而且生態系統仍在不斷發展。但這是令人興奮的一部分。 除了技術面之外， **Rust 社群也絕對令人高興**。熱情的氛圍、樂於助人的意願以及對語言的共同熱情使這趟旅程變得更加愉快。 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExazJlZGppYjY5M3RwOG5sdHdudW94dzk4eXczZm5iMmN0YWUzdG10NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/sn39fEb1LcHPGQ4b6h/giphy.gif) 因此，如果您有時間和意願去探索一個新的、蓬勃發展的生態系統，如果您願意接受挑戰並從中學習，如果您需要表現、安全性和並發性，那麼**Rust 可能只是成為適合您的語言**。 對我們來說，我們很高興能夠繼續使用 Rust 建立我們的 SaaS，不斷學習和成長，並看看這段旅程將帶我們走向何方。請繼續關注更深入的帖子，或在第一條評論中投票選出我們下一步應該做的事情。 如果您喜歡這篇文章並發現它有幫助，請不要忘記給[我們的儲存庫](https://github.com/meteroid-oss/meteroid)一顆星！您的支持對我們來說意味著整個世界。 https://github.com/meteroid-oss/meteroid ⭐️ 流星星 ⭐️ 下次見，祝您編碼愉快！ --- 原文出處：https://dev.to/meteroid/5-lessons-learned-building-our-saas-with-rust-1doj

0個讚   0留言 47瀏覽

2024 年 50 大系統設計面試問題

*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [![面試時必須了解的 10 個系統設計概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxdldzd09fwws7nve36.png)](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 朋友們大家好，如果您正在準備技術面試，那麼您必須準備系統設計問題，因為這是大多數人都遇到困難的地方。 即使經驗豐富的程式設計師也很難解決常見問題，例如如何設計 WhatsApp 或 YouTube，或回答[API 閘道與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴充](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的差異。 在當今日益分散的世界中，建立強大且可擴展的系統的能力是頂級科技公司所追求的基本技能。 系統設計面試已成為評估候選人解決現實挑戰、評估權衡以及設計能夠處理複雜需求的系統的能力的關鍵組成部分。 之前也分享過[資料庫分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、[系統設計主題](https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii)、 [微服務架構](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f)、 [系統設計演算法](https://dev.to/somadevtoo/10-distributed-data-structures-and-system-design-algorithms-for-interviews-a4j)，今天就分享一下系統設計面試題。 在本文中，我精心設計了*50 多個系統設計面試問題，*以指導應徵者從基本概念到複雜的設計場景。 無論您是旨在掌握要點的初學者，還是尋求提高技能的經驗豐富的工程師，這些問題不僅可以幫助您為面試做好準備，還可以提高您對系統設計和軟體架構的了解。 順便說一句，如果您正在準備系統設計面試並想深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 [![如何回答系統設計問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd9nfio7kl57gyevndql.jpg)](https://bit.ly/3pMiO8g) PS 繼續閱讀直到最後。我有一份免費獎金給你。 --- 2024 年 50 道系統設計面試題 ------------------ 這裡列出了針對初學者和經驗豐富的開發人員的 50 個流行的系統設計面試問題，您可以解決這些問題來開始準備。 在此列表中，我不僅分享了簡單、中等和困難的系統設計問題，還分享了基於概念的問題，例如 API 閘道與負載平衡器或微服務與整體式設計。您可以練習這些系統設計問題和麵試問題。 ### 基於系統設計概念的問題 1\. API網關和負載平衡器有什麼差別？ \[ [解決方案](https://javarevisited.substack.com/p/difference-between-api-gateway-and?utm_source=profile&utm_medium=reader2)\] 2\. 反向代理和正向代理有什麼不同？ [（回答）](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5) 3\. 水平縮放和垂直縮放有什麼不同？ [（回答）](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09) 4\. 微服務和單體架構有什麼差別？ [（回答）](https://dev.to/somadevtoo/difference-between-microservices-vs-monolithic-applications-for-system-design-interview-2lb5) 5\. 垂直分區和水平分區有什麼差別？ 6.什麼是速率限制器？它是如何運作的？ [（回答）](https://javarevisited.substack.com/p/what-is-rate-limiter-how-does-it?utm_source=profile&utm_medium=reader2) 7\. 單一登入 (SSO) 的工作原理是什麼？ [（回答）](https://javarevisited.substack.com/p/how-does-sso-single-sign-on-authentication?utm_source=profile&utm_medium=reader2) 8\. Apache Kafka 是如何運作的？為什麼這麼快？ [（回答）](https://javarevisited.substack.com/p/how-does-apache-kafka-works?utm_source=profile&utm_medium=reader2) 9\. Kafka、ActiveMQ 和 RabbitMQ 之間的差異？ [（回答）](https://javarevisited.substack.com/p/difference-between-kafka-rabbitmq?utm_source=profile&utm_medium=reader2) 10\. JWT、OAuth 和 SAML 之間的差異？ [（回答）](https://javarevisited.substack.com/p/difference-between-jwt-oauth-and?utm_source=profile&utm_medium=reader2) 這是來自 DesignGuru.io 的一個很好的圖表，它解釋了垂直和水平資料庫分區之間的區別 [![水平分區和垂直分區的區別](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kosgqvr5d2prlpo61tv7.png)](https://bit.ly/3pMiO8g) --- ### 𝐄𝐚𝐬𝐲 系統設計問題 現在，讓我們開始討論簡單的系統設計問題。這些是常見問題，您需要設計隨處使用的小型實用程序，例如 URL 縮短器： 1\. 如何設計像TinyURL這樣的URL縮短器 \[[解決方案](https://bit.ly/3dZoQ2G)\] 2\. 如何設計像Pastebin這樣的文字儲存服務？ \[[解決方案](https://www.youtube.com/watch?v=9wAj-5IMdyU)\] 3\. 設計內容傳遞網路（CDN）？ \[[解決方案](https://bit.ly/3dZoQ2G)\] 4\. 設計停車庫【[解決方案](https://bit.ly/3eMUosX)】 5.設計自動販賣機【[解決方案](https://javarevisited.blogspot.com/2016/06/design-vending-machine-in-java.html)】 6\. 如何設計分散式鍵值存儲 7.設計分散式緩存 8.設計分散式作業調度器 9\. 如何設計認證系統 10\. 如何設計統一支付介面（UPI） 並且，以下是來自 Educative.io 的 YouTube 高級設計供您參考： [ ![YouTube 的高層設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03a26o4bntorhtpngs4v.jpg)](https://bit.ly/3Mnh6UR) --- ### 𝐌𝐞𝐝𝐢𝐮𝐦 系統設計問題 現在，是時候看看中等難度的系統設計問題了。這些問題既不簡單也不太困難，但您需要對各種軟體架構元件和系統設計概念有深入的了解才能回答這些問題。 11.設計Instagram【[解決方案](https://bit.ly/3BqamCL)】 12\. 如何設計 Tinder 13.設計WhatsApp（[解決方案](https://bit.ly/3SbA9Eu)） 14\. 如何設計 Facebook 15.設計推特 16.設計Reddit 17.設計Netflix【[解決方案](https://bit.ly/3bbNnAN)】 18.設計Youtube【[解決方案](https://bit.ly/3bbNnAN)】 19\. 設計谷歌搜尋 20.設計像亞馬遜這樣的電子商務商店 21.設計Spotify 22.設計TikTok 23\. 設計 Shopify 24\. 設計愛彼迎 25\. 為搜尋引擎設計自動完成功能 26.設計速率限制器 27.像Kafka一樣設計分散式訊息佇列 28.設計航班預訂系統 29.設計線上程式碼編輯器 30.設計證券交易所繫統 31.設計一個分析平台（指標和日誌記錄） 32.設計通知服務 33.設計支付系統 而且，這是來自 DesignGuru 的 Netflix 高級系統設計，這是我最喜歡的學習系統設計的地方之一 [![Netflix 系統設計架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7aj73gezzybzgi8dewp.jpg)](https://bit.ly/3pMiO8g) --- ### 𝐇𝐚𝐫𝐝 系統設計問題 現在，讓我們來看看一些需要你付出更多努力的難題。解決這些問題你可能會感到不舒服，但透過這樣做你會變得更好。 34\. 如何設計像 Yelp 這樣的基於位置的服務 35\. 設計優步 36.設計像 Doordash 這樣的送餐應用程式 37.設計Google文件 38\. 如何設計Google地圖 39\. 設計縮放 40\. 如何設計像 Dropbox 這樣的檔案共用系統 41\. 如何設計像BookMyShow這樣的訂票系統 42.設計分散式網路爬蟲 43.如何設計程式碼部署系統 44.設計像S3這樣的分散式雲端存儲 45\. 如何設計分散式鎖定服務 這是 Educative.io 的 Google 地圖的高級設計 [![Google 地圖的高層設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn97eqxqthqx6714gadl.png)](https://bit.ly/3Mnh6UR) 而且，如果您需要解決方案，則可以在 @ Ashish Pratap Singh 的 GitHub 儲存庫中找到它們：https://github.com/ashishps1/awesome-system-design-resources/blob/main/README.md#system-design-interview-problems 而且，現在可以看到更多有關係統設計面試準備的資源 --- ### 系統設計訪談資源： 而且，這裡列出了最佳系統設計書籍、線上課程和練習網站，您可以查看這些內容，以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 2. [**《系統設計面試》作者：Alex Xu**](https://amzn.to/3nU2Mbp) ：這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) ：綜合指南，涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design)：LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種練習問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) ：精選的資源列表，包括文章、書籍和影片，可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 7. **高可擴展性部落格**：該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**：請參閱「Gaurav Sen」和「Tech Dummies」等頻道，以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) ：Alex Xu 的一本現場書籍和課程，用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容，並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) ：一個專為面試準備的網站，特別是針對亞馬遜和谷歌等 FAANG 公司，他們還有很棒的系統設計課程和許多其他材料，可以幫助您破解 FAAN 面試。 [![如何為系統設計做準備](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqv3p46jmw5qc0newuiu.jpg)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 請記住透過參與實際專案和參加模擬面試將理論知識與實際應用結合。不斷的練習和學習無疑會提高你在系統設計面試中的熟練程度。 這就是2024 年50 個系統設計面試問題。有線上課程以及我分享過的書籍。 無論您是準備技術面試的候選人，還是希望提高技能的經驗豐富的專業人士，掌握系統設計都是在不斷發展的科技行業中推進職業生涯的關鍵一步，這些問題將對您有所幫助。 。 ### 獎金 正如承諾的，這是給你的獎金，一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計，您也可以在 Microsoft 上閱讀它 --- [https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT -eBook-設計分散式系統.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf) ![](https://miro.medium.com/v2/resize:fit:365/0*99i4bdkoEjeeJio8.png) 謝謝 --- 原文出處：https://dev.to/somadevtoo/top-50-system-design-interview-questions-for-2024-5dbk

0個讚   0留言 79瀏覽

恭喜前端挑戰賽：地球日版的得獎者！

--- title：恭喜前端挑戰賽：地球日版的得獎者！ 發表：真實 描述：我們收到了許多富有創意、技術精湛且鼓舞人心的提交作品，展現了社群的才華。 標籤： frontendchallenge、devchallenge、js、css 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1j6wz3srlywj4z0u7vd.png 使用 100:42 的比例可獲得最佳效果。 ===================== 發佈於: 2024-04-25 15:53 +0000 =========================== --- 本月早些時候，我們啟動了第二次前端挑戰，以慶祝地球上最大的公民活動「地球日」。我們邀請社區參與兩個提示，有機會贏得額外的獎品類別： **提示** - CSS 藝術：地球日 - 魅力我的標記：地球日慶祝活動登陸頁面 **附加獎類別** - 世界地球日：授予提高人們對氣候變遷認識的最佳提交作品。 反應令人難以置信！我們收到了許多富有創意、技術精湛且鼓舞人心的提交作品，展現了社群的才華。但隨著每一次挑戰的進行，最終只能有少數獲勝者。 恭喜… --- @schmoris 教育了我們所有人並展示了我們可以用更少的資源做什麼。所謂更少的資源，是指只用 CSS！ 這款遊戲的精美程度和互動性令人難以置信，並且對挑戰進行了令人難以置信的演示。 {% 連結 https://dev.to/schmoris/earth-rescue-a-css-only-game-o0e %} --- @devdongsu 使用我們提供的 HTML 設計了一個互動式且深思熟慮的地球日登陸頁面。 這是一個簡單、可存取的頁面，可在桌面和行動裝置上使用。儘管簡單，但它包含引人注目的動畫和個性。這裡有很多很棒的作品，而這個最終確實成功了。 {% 連結 https://dev.to/devdongsu/earth-day-frontend-challenge-landing-page-hugging-earth-30j0 %} --- @jorgedelcampo，我們的額外獎項類別獲得者，以提高人們對氣候變遷的認識。 談論用 CSS 講故事！這是另一項事半功倍的提交，在這種情況下，我們得到了關於我們的地球和我們的影響的完整故事。 {% 連結 https://dev.to/jorgedelcampo/happy-earth-day-3mgn %} 下一步是什麼？ ------- 我們很快就會舉辦另一場前端挑戰賽！請務必關注我們的挑戰標籤，這樣您就不會錯過公告。 {% 標籤前端挑戰 %} {% 標籤 devchallenge %} 感謝所有參與的人。 ❤️ 我們希望您玩得開心，感受到挑戰，並可能為您的職業檔案加入一兩件事。 下次見！ --- 原文出處：https://dev.to/devteam/congrats-to-the-winners-of-the-frontend-challenge-earth-day-edition-4gd7

0個讚   0留言 15瀏覽

加入我們的 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 年開發人員的最佳 icon 庫

身為開發人員，我們一直在尋找不僅能簡化我們的工作流程，還能提升專案視覺美感的工具。不起眼的圖標是實現流暢、專業的數位介面的無名英雄之一。圖示可能很小，但它們對使用者體驗和設計的影響卻很大。這就是為什麼選擇正確的圖標庫不僅僅是一個美觀問題；更是一個問題。它是高效前端開發的重要組成部分。 到 2024 年，圖標庫的格局變得既龐大又複雜，提供的功能可以滿足從互動式網路、應用程式到商業平台的廣泛需求。無論您是追求高品質的向量圖示、SVG 精靈還是無縫融入 React 應用程式的可自訂選項，總有一個專為您量身定制的圖示庫。 今天，我將深入探討每個開發人員都應該考慮的 5 個最佳圖示庫。這些函式庫不僅種類豐富、風格豐富，而且還提供全面的實現支持，尤其是在基於 React 的專案中。無論您是經驗豐富的開發人員還是剛起步的開發人員，這些工具都將幫助您建立更具吸引力、響應更快且更具視覺吸引力的數位體驗。讓我們探索這些標誌性的寶藏以及如何將它們整合到您的下一個專案中。敬請關注！ 1.Hugeicons 專業版 --------------- **網址：https://hugeicons.com/** ![Hugeicons Pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qeqeer76xz3wdh7izln.png) 當談到為現代網路和行動應用程式量身定制的圖標庫時，Hugeicons Pro 脫穎而出，成為頂級競爭者。此圖標庫擁有大量高品質向量圖標，旨在滿足專業設計專案和商業用途的需求。 ### 為開發人員提供的主要功能： **廣泛的集合：** Hugeicons Pro 提供了無限的圖標集合，適用於各種主題和應用程式，非常適合希望找到符合任何專案美學的圖標的開發人員。尋找圖標很容易，因為他們使用 Algolia。 **SVG 格式：** Hugeicons Pro 中的每個圖示都有多種格式，包括 SVG，確保它們可擴展並在任何螢幕尺寸或解析度下保持其品質。 **可自訂：** Hugeicons Pro 圖示是完全可自訂的，可讓開發人員調整顏色和尺寸以滿足其特定的設計要求，從而在不影響視覺吸引力的情況下增強使用者體驗。 **與 Web 專案輕鬆整合：**此程式庫支援 CSS 和 SVG sprite 系統，可輕鬆整合到現有 Web 專案或新開發專案中。 ### 如何在 React 專案中安裝 Hugeicons Pro： 將 Hugeicons Pro 整合到您的 React 專案中非常簡單，可以輕鬆增強您的開發工作流程。以下是有關如何執行此操作的簡單指南： 新增圖示庫：首先，您需要安裝 Hugeicons Pro 軟體包。 Hugeicons Pro提供了一個NPM包，您可以使用npm或yarn將其加入到您的專案中。 ``` npm install hugeicons-react ``` 或者 ``` yarn add hugeicons-react ``` **匯入圖示：**安裝後，您可以將圖示匯入到 React 元件中。例如，要使用特定圖標，您可以像這樣匯入它： ``` import { Home01Icon } from "hugeicons-react"; <Home01Icon size={32} /> ``` **根據需要自訂：**使用內聯樣式或 CSS 自訂圖標，以更好地適應您的應用程式的設計。此步驟增強了圖標與現有設計風格的適應性和視覺整合。 **自訂圖示顏色** 透過傳遞 color 屬性來變更圖示的顏色： ``` import { MarketingIcon } from "hugeicons-react"; <MarketingIcon color="#00FF00" /> // Green color ``` **旋轉圖示** ``` import { ListSettingIcon } from "hugeicons-react"; <ListSettingIcon rotate={90} /> // Rotate 90 degrees ``` **動畫圖示** ``` import { MarketingIcon } from "hugeicons-react"; <MarketingIcon animate={true} /> // Enable animation ``` Hugeicons Pro 不僅僅是一個圖標集；它是一個強大的工具，使開發人員能夠透過視覺吸引力、功能強大且易於整合的圖標來增強他們的專案。無論您是建立網站、行動應用程式還是桌面應用程式，Hugeicons Pro 都能提供現代開發人員成功所需的功能和風格。 #### 3,800 多個免費 SVG 圖示：https://hugeicons.com/icons #### Hugeicons 免費 React 圖示：https://github.com/hugeicons/hugeicons-react --- 2. 盒子圖標 ------- **網址：https://boxicons.com/** ![盒子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwlgiqwmk3lh4ykc3jcg.png) Boxicons 以其適應性和易用性而聞名，使其成為從事 Web 和商業專案的開發人員的最愛。該圖標庫提供了廣泛的圖標，非常適合增強任何專案的視覺吸引力和用戶體驗，因為圖標發揮著重要作用。 **為開發人員提供的主要功能：** **綜合庫：** Boxicons 提供了廣泛的圖標，涵蓋各種類別和風格，從基本圖標到更精緻的設計，確保您擁有滿足每種需求的完美圖標。 **完全開源：**開發人員欣賞 Boxicons 的開源性質，它允許廣泛的客製化並整合到個人和商業專案中，而無需任何授權費用。 **SVG 和 Web 字體支援：** Boxicons 包括 SVG 和 Web 字體格式的圖示。它提供可擴展性和易於自訂性，而網頁字體非常適合跨大型應用程式一致實施。 **定期更新和加入：** Boxicons 庫定期更新新的圖標和功能，使其與現代開發專案保持相關性和有用性。 **如何在 React 專案中安裝 Boxicons：** 將 Boxicons 合併到您的 React 專案中是一個順利且簡單的過程，非常適合希望透過高品質圖示快速增強其應用程式的開發人員。 **新增圖示庫：**要開始在 React 應用程式中使用 Boxicons，首先需要從 npm 安裝它。您可以使用以下命令來執行此操作： ``` npm install boxicons ``` 或者如果您使用紗線，您可以執行： ``` yarn add boxicons ``` **匯入圖示：**安裝後，您可以將所需的圖示直接匯入到 React 元件中。 Boxicons 可以作為 SVG 或 Web 字體包含在內，但導入 SVG 圖示的方法如下： ``` import { bxAlarm } from 'boxicons'; ``` 在元件中使用圖示：在 React 元件中使用圖示非常簡單。只需將導入的圖示放入 JSX 中需要的地方即可。以下是如何執行此操作的範例： ``` function App() { return ( <div> <h1>Don't Forget Your Meeting!</h1> <bxAlarm style={{ color: 'red', fontSize: '48px' }} /> </div> ); } ``` **根據需要設定樣式：**使用 CSS 或內聯樣式自訂圖標，以符合應用程式的美感。這種靈活性可確保 Boxicons 無縫整合到您的專案中，從而增強功能和風格。 Boxicons 旨在滿足需要為其 Web 和行動應用程式提供可靠、多功能且易於整合的圖標的開發人員的需求。憑藉其強大的功能和易用性，Boxicons 使開發人員能夠有效地建立更具吸引力和視覺吸引力的專案。無論您是建立小型個人網站還是大型商業平台，Boxicons 都能提供您所需的工具，將漂亮的圖示無縫融入您的設計中。您也可以考慮引導圖示。 3. 表格圖標 ------- **網址：https://tabler.io/icons** ![表格圖示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prudmlc25mk9rd860zqt.png) Tabler Icons 是開源圖標庫領域的佼佼者，提供了一組乾淨簡約的圖標，非常適合現代 Web 和行動應用程式。這個免費的圖標庫為開發人員提供了設計精美、易於整合的圖標，可增強任何專案的功能和美感。 **為開發人員提供的主要功能：** **純 SVG 圖示：** Tabler 圖示庫中的每個圖示均以可擴展的 SVG 形式提供，確保它們在任何尺寸下都顯得清晰明快。這種 SVG 格式非常適合在各種應用程式中實現高品質的視覺吸引力。 **開源：**作為一個完全開源的圖標庫，Tabler Icons 允許開發人員完全自由地在個人和商業專案中使用、修改和分發圖標，沒有任何限制。 **廣泛的集合：** Tabler Icons 擁有超過 1250 個可用圖標，可確保您擁有幾乎所有場景（從一般操作到特定資料表示）的完美圖標。 **圖示字體和 CSS 整合：**除了 SVG 之外，Tabler Icons 還支援圖示字體，使其能夠靈活地整合到各種 Web 專案中，包括那些使用 Bootstrap 等框架的專案。 **如何在 React 專案中安裝 Tabler 圖示：** 由於 Tabler Icons 對現代開發實踐的支持，將 Tabler Icons 合併到 React 專案中非常簡單。您可以透過以下方式開始： 新增圖示庫：首先，使用npm或yarn安裝Tabler圖示。此步驟簡單快捷，可以立即存取圖示： ``` npm install @tabler/icons ``` 或者 ``` yarn add @tabler/icons ``` 匯入圖示：安裝後，您可以將所需的圖示直接匯入到 React 元件中。例如： ``` import { IconAlertCircle } from '@tabler/icons'; ``` 在元件中使用圖示：在 React 元件中實作圖示很容易。以下是如何將圖示整合到 JSX 中的範例： ``` function App() { return ( <div> <h1>Attention Needed!</h1> <IconAlertCircle style={{ color: 'red', fontSize: '24px' }} /> </div> ); } ``` **自訂選項：** Tabler 圖示是可自訂的，可讓開發人員直接透過 props 或 CSS 調整大小、顏色、描邊寬度，自訂圖示以完美適應任何專案的設計和品牌。 對於尋求無縫融入任何專案的高品質開源圖示庫的開發人員來說，Tabler Icons 是一個絕佳的選擇。該程式庫的易用性以及與 React 和其他現代 Web 技術的整合使其成為開發人員的首選資源，旨在以最小的麻煩增強應用程式的視覺吸引力和功能。 4.字體真棒 ------ **網址：https://fontawesome.com/** ![字體棒](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy86bic5uxz5ro68lbjj.png) Font Awesome 是開發社群中最知名、最廣泛使用的圖示庫之一。該工具包以其多功能性和廣泛的收藏而聞名，提供適合任何專案（從 Web 應用程式到行動介面）的免費和高級圖示。 Font Awesome 的受歡迎程度得益於它與包括 Bootstrap 在內的眾多框架的兼容性，這使其成為開發人員資源中的主要內容。 **為開發人員提供的主要功能：** **全面的圖標集：** Font Awesome 提供了數千個圖標，被稱為“完美圖標”，這些圖標經過精心設計，清晰度和視覺吸引力。這個廣泛的集合確保開發人員能夠存取適合每種可能用途的正確圖標，從常見的介面操作到專用符號。 **Bootstrap 相容性：** Font Awesome 圖示可輕鬆與 Bootstrap 集成，透過與現有設計模式和樣式保持一致來增強使用者介面，使其成為利用 Bootstrap 進行專案的開發人員的最愛選擇。 **材質符號及更多：**除了傳統圖示之外，Font Awesome 還包括各種非常適合現代 Web 和行動應用程式的材質符號，提供遵循 UI/UX 最新趨勢的設計。 **開源和進階版本：** Font Awesome 提供的開源圖示使從事個人專案或商業活動的開發人員可以使用它。此外，優質圖標提供更專業和多樣化的設計，滿足更廣泛的需求。 **如何在 React 專案中安裝 Font Awesome：** Font Awesome 可以無縫整合到 React 應用程式中，為開發人員提供了觸手可及的強大圖標工具包。以下是如何在 React 專案中包含 Font Awesome 的方法： 新增圖示庫：透過npm 或yarn 將Font Awesome 加入到您的專案中來安裝Font Awesome。如果您使用免費版本，可以使用以下命令安裝： ``` npm install @fortawesome/fontawesome-free ``` 或者 ``` yarn add @fortawesome/fontawesome-free ``` **匯入圖示：**安裝後，將您需要的特定圖示匯入到 React 元件中。 Font Awesome 使用庫系統來加入圖標，因此您首先導入打算使用的圖標，然後將它們加入到庫中： ``` import { library } from '@fortawesome/fontawesome-svg-core'; import { faCoffee } from '@fortawesome/free-solid-svg-icons'; library.add(faCoffee); ``` **在元件中使用圖示：**您可以輕鬆地在元件中使用匯入的圖示。以下是使用 FontAwesomeIcon 元件的範例： ``` import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; function App() { return ( <div> <h1>Enjoy Your Coffee!</h1> <FontAwesomeIcon icon="coffee" style={{ color: 'brown', fontSize: '24px' }} /> </div> ); } ``` **自訂和設計您的圖標：** Font Awesome 允許輕鬆自訂圖標，例如更改大小、顏色和其他 CSS 屬性，確保圖標完美匹配您的應用程式的風格。 Font Awesome 與 React 的整合不僅簡化了開發過程，還透過其多樣化的圖示增強了整體使用者體驗，這些圖示在介面設計中發揮著至關重要的作用。無論您是在開發 Web 專案、行動應用程式或商業軟體，Font Awesome 都能為您提供建立具有視覺吸引力和功能強大的數位產品所需的工具。 5. 螢光粉圖標 -------- **網址：https://phosphoricons.com/** ![螢光粉圖標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu4a7nunb7d7pzrzfxe2.png) Phosphor Icons 是一個多功能、免費的圖標庫，專門針對為其專案尋求輕量級、有凝聚力的圖標集的設計師和開發人員。 Phosphor 的設計讓人想起羽毛圖標，提供了一種微妙的、基於線條的風格，與從簡約的 Web 介面到豐富的行動應用程式等各種設計美學無縫整合。 **為開發人員提供的主要功能：** **廣泛的圖標：** Phosphor Icons 提供了多種風格的免費圖標，包括常規、粗體和填充，使設計人員能夠保持一致性，同時根據需要靈活地強調不同的 UI 元素。 **多功能格式：** Phosphor Icons 提供 SVG 和 PNG 格式，可供下載並整合到任何專案中，確保設計人員和開發人員幾乎可以在從 Web 到印刷的任何環境中使用它們。 **專為 Bootstrap 設計：**這些圖標經過精心設計，可與 Bootstrap 等流行框架無縫協作，使其成為希望透過高品質、可擴展的圖標增強專案的開發人員的理想選擇。 **完全開源：**作為一個免費的圖示庫，Phosphor Icons 鼓勵修改和重新分發，支援開源愛好者社群和商業專案。 **如何在 React 專案中安裝 Phosphor 圖示：** 在 React 應用程式中實現 Phosphor Icons 非常簡單，提供了一種有效的方法來透過漂亮的圖示來增強專案的視覺化介面。 **新增圖示庫：**要開始在 React 專案中使用 Phosphor Icons，請先透過 npm 或 YARN 安裝圖示套件： ``` npm install phosphor-react ``` 或者 ``` yarn add phosphor-react ``` **導入圖示：**磷光體圖示可以單獨匯入，使您可以保持較小的套件大小並提高應用程式的效率。將您需要的圖示直接匯入到您的 React 元件中： ``` import { Camera, Heart } from 'phosphor-react'; ``` 在元件中使用圖示：您可以輕鬆地將磷光體圖示整合到元件中。以下是您可以如何使用它們： ``` function App() { return ( <div> <h1>Capture Your Best Moments</h1> <Camera size={32} color="#333" /> <h2>Don’t forget to share the love!</h2> <Heart size={32} color="red" /> </div> ); } ``` **客製化：**螢光粉圖示是高度可自訂的。您可以直接在元件中調整大小、顏色和其他屬性，從而輕鬆自訂圖標以適應應用程式的設計和感覺。 Phosphor Icons 是需要強大、免費的圖標集（可以下載並無縫整合到各種設計專案中）的設計師和開發人員的首選。憑藉其廣泛的圖標和易於自訂的特點，Phosphor Icons 確保您的專案不僅看起來很棒，而且與最新的設計趨勢和最佳實踐保持一致。無論您是建立新應用程式、更新網站還是為商業軟體製作使用者介面，Phosphor Icons 都能為您提供成功所需的視覺化工具。 常見問題 (FAQ) ---------- #### Q：在哪裡可以找到我的專案的免費圖示？ 答：有幾個信譽良好的開源圖示庫提供適合各種專案的免費圖示。 Hugeicons Pro、Font Awesome、Phosphor Icons 和 Tabler Icons 等庫提供了大量圖標，可免費供個人和商業用途使用。 #### Q：使用開源圖示庫有什麼好處？ 答：開源圖示庫具有許多優勢，包括靈活性、免費和社群支援。它們允許開發人員和設計人員使用、修改甚至重新分發圖標，而無需支付任何許可費用。這種靈活性非常適合自訂圖示以滿足專案的特定需求，同時也有助於其他社群成員的改進並從中受益。 #### Q：圖標字體會影響我網站的效能嗎？ 答：圖標字體對於效能來說非常高效，因為它們本質上是字體，因此只需要單個 HTTP 請求即可加載，這與 PNG 等單獨的圖像檔案不同，後者需要對每個檔案進行單獨的請求。然而，明智地使用它們很重要，因為過度使用或實施不當可能會導致檔案大小膨脹和載入時間增加。將圖標字體與其他 SVG 和靜態文件優化整合可以幫助維護平衡且高效能的網站。 --- 原文出處：https://dev.to/masumparvej/best-icon-libraries-for-a-dev-412d

1個讚   0留言 95瀏覽

Supabase Storage：現在支持S3協議

Supabase Storage 現已正式成為 S3 相容儲存提供者。這是最受歡迎的功能之一，現已在公共 alpha 版本中提供。可斷點續傳上傳也從測試版過渡到普遍可用。 https://supabase.com/ga-week ⚡️ 了解有關 GA 週的更多資訊 [Supabase 儲存引擎](https://github.com/supabase/storage)是完全開源的，是為數不多的提供 3 種可互通協定來管理檔案的儲存解決方案之一： - [標準上傳](https://supabase.com/docs/guides/storage/uploads/standard-uploads)：上手簡單 - [斷點續傳](https://supabase.com/docs/guides/storage/uploads/resumable-uploads)：適用於大容量斷點續傳 - [S3 上傳](https://supabase.com/docs/guides/storage/s3/compatibility)：相容於多種工具 https://youtu.be/WvvGhcNeSPk S3相容性 ----- 我們始終努力在 Supabase 採用業界標準。支援標準使工作負載可移植，這是一個[關鍵的產品原則](https://supabase.com/docs/guides/getting-started/architecture#everything-is-portable)。 S3 API 無疑是一種儲存標準，我們正在讓各種經驗水平的開發人員都可以使用它。 S3 協定向後相容我們的其他 API。如果您已經透過我們的 REST 或 TUS API 使用存儲，現在您可以使用任何 S3 用戶端與您的儲存桶和檔案進行互動：使用 TUS 上傳、使用 REST 提供服務以及使用 S3 協定管理它們。 該協議適用於雲端、本地開發和自託管。[在我們的文件中](https://supabase.com/docs/guides/storage/s3/compatibility)查看 API 相容性 使用 Supabase S3 進行身份驗證 --------------------- 要使用 Supabase S3 進行身份驗證，您有 2 個選項： 1-**標準**`access_key`**和**`secret_key`憑證。您可以從[儲存設定頁面](https://supabase.com/dashboard/project/_/settings/storage)產生這些。這種身份驗證方法與支援S3協定的工具廣泛相容。它也只能*在伺服器端*使用，因為它提供對儲存資源的完全存取。 我們將在不久的將來加入可以存取特定儲存桶的範圍存取金鑰憑證。 2-**使用 RLS 的使用者範圍憑證**。這利用了所有 Supabase 服務中廣泛採用的概念：[行級安全性](https://supabase.com/docs/guides/auth/auth-deep-dive/auth-row-level-security)。它允許您透過將儲存操作範圍限定到特定的經過身份驗證的使用者或角色來與 S3 協定進行交互，同時尊重您現有的 RLS 策略。此方法是透過使用 S3 協定支援的會話令牌標頭來實現的。您可以在[文件](https://supabase.com/docs/guides/storage/s3/authentication#session-token)中找到有關如何使用會話令牌機制的更多資訊。 S3 相容集成 ------- 在 S3 協定的支援下，您現在可以透過提供一對可以隨時撤銷的憑證將 Supabase Storage 連接到許多第三方工具和服務。 您可以使用流行的工具進行備份和遷移，例如： - [AWS CLI](https://docs.aws.amazon.com/cli/latest/reference/s3/) ：官方 AWS CLI - [rclone](https://rclone.org/) ：用於管理雲端儲存上的檔案的命令列程式。 - [Cyberduck](https://cyberduck.io/) ：適用於 Mac 和 Windows 的雲端儲存瀏覽器。 - 以及任何其他 s3 相容工具。 ![工具範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ore6ttqgo77d7jnv8k1d.png) 請[在此處](https://supabase.com/partners/integrations/cyberduck)查看我們的 Cyberduck 指南。 資料工程師的 S3 --------- S3 相容性為資料工程師提供了一個很好的原語。您可以將它與許多流行的工具一起使用： - ClickHouse 等資料倉儲 - 查詢引擎，如 DuckDB、Spark、Trino 和 Snowflake 外部表 - 資料載入器，例如 Fivetran 和 Airbyte 在此範例中，我們出色的資料分析師 Tyler 示範如何將 Parquet 檔案儲存在 Supabase Storage 中並使用 DuckDB 直接查詢它們： https://youtu.be/diL00ZZ-q50 S3 中的分段上傳 --------- 除了標準上傳和斷點續傳之外，我們現在還支援透過 S3 協定進行分段上傳。這使您可以透過並行上傳區塊來最大化上傳吞吐量，然後將區塊連接到最後。 斷點續傳已普遍可用 --------- 隨著[平台 GA 的發布](https://supabase.com/ga)，我們也很高興地宣布可斷點上傳也普遍可用。 可斷點上傳由[TUS 協定](https://tus.io/)提供支援。與啟迪團隊的密切合作，到達這裡的旅程非常有意義。大力讚揚 TUS 協議的維護者[@murderlon](https://github.com/Murderlon)和[@acconut](https://github.com/Acconut) ，感謝他們在開源方面的協作方式。 Supabase 貢獻了 TUS Spec 的 Node 實現的[一些高級功能，](https://github.com/tus/tus-node-server/pulls?q=is%3Apr+sort%3Aupdated-desc+author%3Afenos)包括[分散式鎖定](https://github.com/tus/tus-node-server/pull/514)、[最大檔案大小](https://github.com/tus/tus-node-server/pull/517)、[過期擴展](https://github.com/tus/tus-node-server/pull/513)和大量錯誤修復： ![bug修復](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6psgtxi00cv8e2sdfe8.png) 這些功能對於 Supabase 至關重要，並且由於[TUS 節點伺服器](https://github.com/tus/tus-node-server)是開源的，因此它們也可供您使用。這是另一個核心原則：只要有可能，[我們就會使用和支援現有工具，](https://supabase.com/docs/guides/getting-started/architecture#support-existing-tools)而不是從頭開始開發。 - **跨儲存桶傳輸**：我們新增了跨儲存桶複製和移動物件的功能，而以前您只能在同一個 Supabase 儲存桶中執行這些操作。 - **標準化錯誤程式碼**：錯誤程式碼現已在整個儲存伺服器上標準化，現在可以更輕鬆地針對特定錯誤進行邏輯分支。您可以[在此處](https://supabase.com/docs/guides/storage/debugging/error-codes)找到錯誤程式碼清單。 - **多租戶遷移**：我們對所有租戶中執行的遷移進行了重大改進。這減少了整個佇列的遷移錯誤，並使我們能夠以非同步方式執行長時間執行的遷移。請繼續關注包含更多詳細資訊的單獨部落格文章。 - **解耦依賴**：儲存與其他 Supabase 產品完全解耦，這意味著您可以將儲存作為獨立服務執行。開始使用這個[docker-compose 檔案](https://github.com/supabase/storage/blob/master/docker-compose.yml)。 入門 -- - [在我們的文件中](https://supabase.com/docs/guides/storage/s3/compatibility)查看 S3 API 相容性 - 了解[S3 身份驗證](https://supabase.com/docs/guides/storage/s3/authentication) - 嘗試使用 Cyberduck 進行 S3：遵循我們的[整合指南](https://supabase.com/partners/integrations/cyberduck) - 嘗試使用 DuckDB 進行 S3：按照[YouTube 上的](https://www.youtube.com/watch?v=diL00ZZ-q50)指南進行操作 **更多關於 GA 週的訊息** - [斯帕巴斯威夫特](https://supabase.com/blog/supabase-swift) - [AWS Marketplace 上的 Supabase](https://supabase.com/blog/supabase-aws-marketplace) - [Supabase 開源黑客馬拉松 2024](https://supabase.com/blog/supabase-oss-hackathon) - [Supabase引導程式](https://supabase.com/blog/supabase-bootstrap) - [分支現已公開](https://supabase.com/blog/branching-publicly-available) --- 原文出處：https://dev.to/supabase/supabase-storage-now-supports-the-s3-protocol-3479

0個讚   0留言 111瀏覽

中級開發人員的 12 項心得建議

我正式擁有三年經驗和中級職稱。自從兩年前我寫下了[我作為專業開發人員第一年學到的 12 件事](https://dev.to/abbeyperini/12-things-i-learned-during-my-first-year-as-a-professional-developer-i0f)以來，我的最佳建議已經發生了很大的變化。 1. 水平不重要，結果才重要 -------------- 如果你正在解決他們的問題，沒有人會問你已經開發了多久。不要僅僅因為某個主題被稱為高級而推遲學習您感興趣的主題。你永遠不知道你會被要求建造什麼，所以它可能會比你想像的更快派上用場。 2.不要死記硬背 -------- ![一張帶有標題的大腦圖片具有儲存和記憶幾乎無限量資訊的能力，但它卻無法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya2ljvnx1wdsk1xrx1ov.jpg) 了解如何找到您需要的資訊。我不是說 StackOverflow 和 GenAI。對於您使用的工具和語言，請了解規範或文件所在的位置。找出誰寫了最好的指南。 如果您不記得了，也沒關係`?`當您要使用 JavaScript 條件運算子時，or `:`首先出現。重要的是您知道何時使用條件運算符以及在哪裡可以找到確切的語法。 工具不斷更新。請務必檢查您正在閱讀的文件的版本。找到一種方式來了解最新情況，無論是新聞通訊還是真正喜歡 CSS 的朋友。 3. 深入基礎知識 --------- 聽聽在 3 年內使用過 3 個 JavaScript 框架的人的話——如果你很好地了解基礎知識，那麼在生態系統中學習新工具就會容易得多。您最終可能會編寫出更簡單、更強大的軟體。您不會嘗試編寫已經存在的功能，因為您不知道它們存在。您將更了解所遇到的錯誤，並在導致錯誤之前預見錯誤。 4.系統思考會讓你走得更遠 ------------- 解決任何錯誤都需要係統思考。如果您不考慮牆上的插頭，當烤麵包機無法打開時您就不會想到檢查它。能夠將系統作為一個整體來思考，可以更輕鬆地預測邊緣情況並設計新功能。在[新程式碼庫入門中](https://dev.to/abbeyperini/getting-started-in-a-new-codebase-e7b#6-mental-models)閱讀有關如何為程式碼庫建立心理模型的更多訊息 5.先嘗試再問，確保問題永遠不會是個愚蠢的問題 ----------------------- 開發人員通常以解決問題為導向。如果你能證明你嘗試了一些方法但沒有奏效，那麼他們可能會想深入挖掘自己，找出為什麼明顯的解決方案不起作用。 6.每一行程式碼都是一種責任 -------------- ![一位程式設計師在打字中停了下來，說：“消除所有錯誤的最有效方法就是擺脫所有軟體。”](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y87ejruuzoq6xl4woj9z.png) 編寫程式碼就像其他人必須修復它一樣。 （即使 6 個月後那個人就是你。）安裝軟體包，就像你必須經常更新它們一樣。記錄原因，這樣以後就不會意外破壞某些東西。在將某個固執己見的工具整合到您的系統之前，先了解它的意見，並找出它的意見與您所需的功能相衝突。 7.練習閱讀別人的程式碼 ------------ 通常教授軟體開發的方式可能會讓您相信您經常會建立新鮮的、全新的應用程式。您更有可能修復現有程式碼庫並為其加入功能。您甚至可能花更多的時間閱讀程式碼而不是編寫程式碼。練習閱讀程式碼和重構程式碼而不引入新的錯誤。 8. 測試、測試、再測試 ------------ 正如[Chocho](https://www.linkedin.com/in/enriquezamudiolopez)在 DevNexus 2024 演講中所說，“程式碼就是理論。軟體就是實踐。”在請求審查之前，請始終執行您的程式碼並對其進行測試。盡可能多練習編寫測驗。您會發現，預測使用者如何破壞您的程式碼並考慮更多的事情，而不只是快樂的道路，將使您成為更好的開發人員。 9. 練習將需求轉化為軟體 ------------- 票#387 - 在頁面上新增一個按鈕，用於開啟模式並允許使用者編輯此資料。 預計您可以將這樣的需求轉換為步驟清單或偽程式碼。如果票證太模糊，您就有責任獲得所需的答案。 解決這些步驟後，您將需要將它們轉換為程式碼並（希望）對該程式碼進行測試。然後，您將負責透過公司的版本控制、（希望）審查、（希望）品質保證和部署流程來取得該程式碼。 開源是實踐這一點的好地方。 10. 社區極為重要 ---------- 你不會在社群媒體貼文中獲得最細緻、最公正的觀點。當您需要這種觀點時，您需要一個支持網絡來打電話。 指導是其中的一部分。參加當地的聚會和會議是建立人際網絡和擴展發展世界觀的好方法。加入網路小組將使您能夠了解資深開發人員的觀點。 不要試圖獨自完成這項工作。那裡有很多訊息，很容易讓人不知所措或視野狹隘。 11.找到你喜歡程式設計的地方 --------------- ![漫畫有4個面板，每個面板顯示一個程式編譯的進度條。在前三個面板中，開發人員悲傷地說「我討厭程式設計」。在最後一個面板中，程式已編譯，程式設計師慶祝，說“我喜歡程式設計！”](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aajn7sm0cv6usmaa2ci2.jpg) 我並不是說熱愛你的工作或成為難以捉摸的熱情程式設計師。然而，不斷的學習會讓你自己陷入反覆的不適。如果你不知道為什麼要繼續醒來並對自己做這些事，你就會精疲力盡。這完全可能是個自私的原因，但你必須知道為什麼。 12.每個人都在自己的旅程上 -------------- 您不會與他人的職業和內容競爭。別人的成功之路可能根本不適合你。專注於您獨特的視角和優勢。尋找並分享您的聲音。外面有人想聽聽看。 結論 -- 查看我（或其他任何人）的個人資料可能會讓您相信我通往中級開發人員的道路是筆直而順利的。事實恰恰相反。我跌倒過，哭過，刺破過，精疲力竭過，還被困過很多兔子洞。 因此，我必須衷心感謝我的丈夫、家人、朋友和科技社群幫助我站穩腳步。我還必須感謝許多同事給予我發揮潛能的機會。沒有你們，我不可能走到這一步。我很感激我有這樣的經驗。 --- 原文出處：https://dev.to/abbeyperini/12-tips-from-a-mid-level-developer-29bk

0個讚   0留言 86瀏覽

我又建立了另一個 JavaScript 框架

**現在是 2024 年，您又建立了另一個 JavaScript 框架。說真的，夥計！** 當您談論另一個 Javascript 框架時，您可能會笑並認為有大量經過驗證的選項，為什麼還要建立另一個框架？ 🤷‍♂️ 讓我與您分享我的個人故事，它導致了新的 Javascript 框架的發展。但如果你不關心我的可悲的故事，這裡是 TLDR： > **TiniJS**是一個元框架，由基於 Google [Lit](https://lit.dev/)庫的**Web 元件**技術提供支援。 > 您可以先下載[入門範本](https://github.com/tinijs/bare-starter)或使用 CLI 初始化應用程式，執行`npx @tinijs/cli@latest new my-app`並按照說明進行操作。 > 有關更多詳細訊息，請參閱下面的**“入門”**部分或存取<https://tinijs.dev/> 。 故事 -- ![Javascript 框架太多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwi99az05w9syfgn7833.jpeg) 開個玩笑吧，我不是 Javascript 的專家，但我想稍微介紹一下我的背景，這樣您可能就會知道我關於前端 Web 開發的煩惱故事。我曾經是 Angular 1 版本的開發人員，目前主要使用 Vue，偶爾使用 jQuery。我有這**3 個 PITA** （Pain In The \*beep\*）經歷，這促使我嘗試使用 TiniJS 框架。 > **PITA #1 - 建立良好的 UI/UX 很困難，既乏味又耗時！** 早在 2010 年左右，就有兩種不同類型的網站：一種有大量文本、連結，幾乎沒有一些圖片；另一種有大量文本、連結，幾乎沒有一些圖片。其他的則包含大量的圖形元素，例如 GIF 圖像、Flash 背景、彩虹遊標… 人們往往有**後端難前端容易的**刻板印象。這有點正確，但不完全正確，我的意思是，我該怪誰，對吧？因為只要有一點 HTML 和 CSS 知識，您就可以非常輕鬆地建立靜態網站。但是，為了建立良好的 UI/UX，還有很多事情需要考慮。你必須成為更多事情的大師，而它們一點也不容易！ ![前端開發不容易！](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77sp9asranurm9xcldl5.png) > **PITA #2 - CSS 框架缺乏功能並且自訂它們不是很有效！** 人們意識到前端開發的困難，開始建立CSS框架來幫助解決這個問題。 Bootstrap是這一趨勢的先驅之一，其他流行的有：Foundation、Semantic UI、Bulma、Skeleton、Pure CSS…這些CSS框架很棒，毫無疑問，它們幫助我們建立一個好的UI/使用者體驗更快，但它們也有自己的限制。 首先，儘管所有框架都提供了一定的方式來定制樣式，但總的來說，我覺得這對我來說不是很容易和可重用。 ![客製化CSS框架效率不是很高](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lhj75s0sy977e8d5e48.jpg) 二是功能缺失。我的意思是，它們主要是 CSS，它們提供一些功能，通常是作為 JQuery 的插件。大多數情況下，您必須編寫自己的 Javascript 才能使功能正常運作。 > **PITA #3 - JavaScript 框架勢不可擋，而且有點多餘！** 進入現代 Web 開發時代，Javascript 框架已成為新趨勢。但問題是我們有太多的選擇，這既是福也是禍。它們提供了很棒的功能，但互通性不太好，您不能只從一個框架中取出一段程式碼並在另一個框架中使用它。特別是，為特定框架建立一個具有單獨套件的 UI 系統是一項非常艱鉅的任務。 ![前端 Web 開發是碎片化的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cx44vzf0guksn2horak.png) 每次我開始一個專案或做某種前端工作時，前端web的碎片化對我來說都有些痛苦。這似乎就是生活方式，無可避免，不是嗎？請不要誤會我的意思，我並不反對任何框架，我傾向於選擇解決方案而不是技術，所以如果它適合你，就用它吧。但我想知道有什麼辦法可以以某種方式統一或縮小前端開發經驗的差距嗎？ 🤔 介紹 TiniJS --------- 這就是我嘗試**TiniJS 框架**一段時間的原因。它是基於[Lit](https://lit.dev/)庫、使用本機**Web 元件**技術開發 Web/桌面/行動應用程式的工具集合。感謝[Lit](https://lit.dev/)團隊建立了一個出色的工具，幫助我們更輕鬆地使用標準 Web 元件。 它的目標是盡可能**標準化、小型化和多功能化**。與其他框架和元框架沒有真正的可比性，但總體而言，它具有相似的功能，但另一方面也有關鍵的區別。它既是替代選擇，也是對其他框架的補充。您可以使用 TiniJS 建立各種類型的應用程式：**登陸頁面、SPA、PWA、桌面應用程式、行動應用程式**…就功能而言，任何在 Javascript 中工作的內容都應該在 TiniJS 應用程式中正常運作。 整個系統由幾個部分組成，這是一個快速介紹。 > 請注意，**並非所有部件現在都可用**，該專案還處於早期階段，有些是**之前的實驗**，我盡力盡快將它們投入使用。但我的時間和資源有限，所以請耐心等待，如果可能的話請幫助我。 🙇‍♂️ > V1 的計畫及其路線圖可在<https://github.com/tinijs/tinijs>找到 ### 核 **TiniJS 的**核心提供了傳統的專案結構和簡化的開發流程。有**用於組織內容的資料夾**，**用於開發的本機伺服器**，在分發時，您可以選擇 Vite 或 Parcel 或 Webpack 來**建立產品**。 核心還包括：用於在頁面之間導航的**路由器**、用於全域狀態管理的簡單**儲存**、支援**PWA** ，... 您可以嘗試[Try TiniJS 中的範例專案（範例照片庫應用程式）](https://stackblitz.com/edit/try-tinijs?file=app%2Fapp.ts) ### 使用者介面系統 TiniJS 有一個專用的**UI 庫，我的目標是提供每個常用的元件和區塊甚至整個頁面**。元件以特殊的方式建置，它們是自訂元素，不僅可以與 TiniJS 一起使用，還可以與其他框架或不使用框架一起使用。 ![保持UI概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rshg9gol388nf0gsw1jt.png) 使用可重複使用元件很容易，通常是以將 props 傳遞給自訂元素標籤的形式。自訂可以透過 props 或 CSS `::part()`或自訂主題系列或完全克隆元件來源來完成，... 元件還能夠以盡可能小的努力適應幾乎所有設計系統。這是透過主題系統實現的，概念是這樣的： - 元件**只寫一次**，它們是**無頭的**（沒有特定的樣式） - 主題被組織成**系列**（又稱設計系統），系列定義自己的基本特徵，例如：Bootstrap、Material、Fluent、Spectrum，... - 根據基本特徵，一個系列有風格變體，稱為**“皮膚”** ，例如，Bootstrap 系列可能有：淺色皮膚、深色皮膚… 考慮到主題概念，任何應用程式都可以具有以下主題功能： - **一個**主題系列 - 可能是當今存在的所有網路應用程式中的 80% 到 90%，只有 1 種特定風格相當於 TiniJS 1 主題系列。 - **一個**主題系列 + 多個皮膚 - 常見的用例是亮/暗模式，相當於 TiniJS 1 主題系列，具有來自同一系列的多個皮膚。 - **多個**主題系列 - 高度個人化的應用程式可能有多個主題系列，每個系列都有一個或多個皮膚，將根據使用者參考應用某個主題。 UI 使用詳細資訊將在[主頁](https://tinijs.dev/ui)上提供，現在您也可以在<https://ui.tinijs.dev/>查看實驗概念，以查看該概念的實際應用。 ### 網頁、PWA、混合桌面/行動設備 預設的 TiniJS 應用程式是**單頁應用程式**，它小而快速，可以直接部署為 Web 應用程式。但是，您也可以將 TiniJS 轉換為以下一種或所有類型的應用程式： - **漸進式 Web 應用程式**(PWA) - 使用單一 CLI 命令實作（即將推出） - 混合**桌面/行動**應用程式 - 使用 Tauri 2.0 或類似工具（todo：編寫指令） ### 靜態和伺服器 TiniJS 應用程式可以作為靜態網路啟動，無論大小，無需伺服器或資料庫。您始終可以使用 SaaS 服務來滿足幾乎任何後端需求。我還在開發`@tinijs/content` - 一個基於文件的內容管理系統，用於輕鬆管理多種類型的內容。靜態站點產生（SSG）或預渲染也在計劃中。 如果您需要處理後端任務並參考從 Node 伺服器而不是靜態主機為 Web 應用程式提供服務，則可選的 Nitro 伺服器用於**伺服器/API 路由**和其他**伺服器內容**。我的開發能力有限，因此第一個版本可能不支援伺服器端渲染（SSR），相反，我計劃使用半SSR，其中伺服器將為用戶提供單頁服務，並向機器人提供最少的伺服器端渲染內容。 ### 功能和模組 在功能方面，由於 TiniJS 應用程式**基於標準 Web 技術**，因此在瀏覽器中工作的任何程式庫和功能都可能在 TiniJS 應用程式中運作。因此，與其他框架相比，您可能**不必擔心功能**。您甚至可以在 TiniJS 應用程式中使用其他框架，例如初始化 Vue 應用程式並將其安裝到 TiniJS 頁面內的元素。 還有一個模組架構師，以便某些模組可以進入 TiniJS 應用程式的工作流程，建立更簡化的開發管道。 ### 工具 官方 CLI 工具提供了一些使用 TiniJS 應用程式的便利命令。 - `dev` - 啟動本機開發伺服器 - `build` - 建構生產分配 - `preview` - 在部署之前預覽生產版本 - `generate` - 生成元件、頁面、實用程式... 此外，CLI**足夠通用，可以在 TiniJS 應用程式以外的任何類型的專案中使用**。它具有可擴展的架構，您可以在其中擴展更多命令以用於其他自動化任務。一些官方擴展，例如`ui`命令（來自`@tinijs/ui` ）用於處理 UI 任務或`content`命令（來自`@tinijs/content` ）用於處理內容相關任務，...您可以根據自己的目的建立 CLI 擴展包私人或共享。 好了，說得夠多了，讓我看看一些行動吧！ 👌 開始使用 ---- **Tini** （越南語中的“ [Tí nị](https://translate.google.com/?sl=vi&tl=en&text=t%C3%AD%20n%E1%BB%8B&op=translate) ”，意思是非常小、可愛的東西）。 為了快速建立**TiniJS**專案，您可以使用[CLI](https://tinijs.dev/cli)來初始化模板。 ``` npx @tinijs/cli@latest new my-app ``` 上面的命令透過下載**Bare**模板來建立一個應用程式。將來，我想提供幾個入門範本。您還可以建立自己的模板並與社區共享或供您自己私人使用。目前，這些模板可用： - [Bare](https://github.com/tinijs/bare-starter) （預設）- TiniJS 應用程式的最小結構。 - [空白](https://github.com/tinijs/blank-starter)（標誌`-t blank` ）- 包含路由器、狀態管理、元標記管理和[Bootstrap 主題系列](https://tinijs.dev/ui)。 現在，在專案內部，您可以執行`npm run dev`來啟動開發伺服器。您可以透過編輯檔案`./app/app.ts`來開始開發，該檔案是應用程式的根元件。有關如何使用 Lit 處理自訂元素，請存取[Lit 元件](https://lit.dev/docs/components/overview/)， `LitElement`和`TiniComponent`之間存在一些差異，但現在您可以像平常一樣修改`static styles`和`render()` 。 若要建立發行版，請執行`npm run build`並可選擇執行`npm run preview`以預覽生產版本。現在您可以將`.output`資料夾部署到任何靜態主機。 您可能需要查看這些範例以了解 TiniJS 應用程式如何運作的更多細節。 - 首頁 - <https://github.com/tinijs/tinijs/tree/main/apps/tinijs.dev> - 待辦事項應用程式 - <https://github.com/tinijs/tinijs/tree/main/examples/todo> 這就是**TiniJS 框架**的基本介紹。下次我們將探索**TiniJS 應用程式的結構並使用元件**。 欲了解更多訊息，請存取： <https://tinijs.dev> 謝謝您，編碼愉快！ 💖 --- 原文出處：https://dev.to/lamnhan/ive-created-yet-another-javascript-framework-5c5o

0個讚   0留言 79瀏覽

🔥 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留言 99瀏覽

Supabase Bootstrap：啟動新專案的最快方式

Supabase `bootstrap`是從現有入門範本啟動新託管 Supabase 專案最快的方式： `npx supabase bootstrap` 這為 Supabase 帶來了類似「shadcn」的體驗，在本地建立專案並啟動準備部署的遠端資料庫。 https://supabase.com/ga-week ⚡️ 了解有關 GA 週的更多資訊 入門 -- 從任何本機目錄執行`supabase bootstrap` ，系統將提示您選擇啟動範本。最棒的是，您甚至不需要安裝 CLI 即可開始！只要安裝了`npm`或`bun` ，就可以開始了！ - CLI： `supabase bootstrap` - NPM： `npx supabase@latest bootstrap` - 髮髻： `bunx supabase@latest bootstrap` ![命令列截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ti61lik6luww273m74c.png) 模板如何運作 ------ 入門範本清單在 GitHub 上發佈為[Samples.json](https://github.com/supabase-community/supabase-samples/blob/main/samples.json) 。每當我們（以及未來的社區）加入新的啟動器時，它將自動對所有 Supabase 用戶可用。 範本儲存庫通常包含完整的前端程式碼，檔案結構如下： - 包含`config.toml`和`migrations`檔案（如果有）的`supabase`目錄。 - `.env.example file` ，定義 CLI 的環境變數清單以填入專案憑證。我們目前支援與[Vercel 整合](https://vercel.com/integrations/supabase)相同的憑證清單。如果`.env`檔案不存在，CLI 將為您建立它。 當地發展 ---- 選擇啟動器後，Supabase CLI 會將所有檔案從範本儲存庫下載到您選擇的本機目錄。 > **GitHub 速率限制** 從範本儲存庫下載過於頻繁時，您可能會遇到 GitHub 速率限制。可以透過在本地將 GITHUB\_TOKEN 環境變數設定為 GitHub 個人存取權杖來避免這種情況。 該模型與流行的[shadcn](https://ui.shadcn.com/)工作流程非常相似。在本機儲存庫中建立檔案後，您可以修改它們並將它們簽入原始碼管理。 部署到生產環境 ------- 在`supabase bootstrap`過程中，將在 Supabase 平台上建立一個新專案並連結到您的本機環境。如果您還沒有帳戶建立流程，此命令將引導您完成帳戶建立流程。 ![cli 的螢幕截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7na4trtjyne3t0c3wsa.png) > **需要一些耐心** 連結到新的託管專案可能需要一段時間，因為它需要在雲端啟動新的資料庫。 連結完成後，系統將提示您將所有範本遷移檔案推送到新託管的專案。這些遷移檔案將使用必要的模式設定您的遠端資料庫以支援入門應用程式。 ![命令列截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilkdagvqbpwl93vghyd1.png) 推送遷移後，您的專案憑證將匯出到`.env`文件，以便您從任何前端或後端程式碼進行連線。預設環境變數包括： - `POSTGRES_URL` - `SUPABASE_URL` - `SUPABASE_ANON_KEY` - `SUPABASE_SERVICE_ROLE_KEY` 由您選擇的範本定義的`.env.example`檔案中的其他自訂變數也將合併到您的本機`.env`檔案中。 > **安全地儲存憑證** 安全地儲存這些憑證非常重要，因為任何人都可以使用`POSTGRES_URL`連接到您的遠端資料庫。 開始開發 ---- 最後，CLI 將建議一個`start`命令來在本地啟動您的應用程式。啟動本機應用程式將使用`.env`檔案中定義的憑證連接到新的託管專案。 ![開發環境](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmekd4cgkhksveiv470h.png) 範本庫 --- 就是這樣，只需一個命令，您就可以啟動一個新專案並端到端執行。 Supabase Bootstrap 讓您更輕鬆地開始使用 Supabase、行動應用程式工具和 Web 開發框架（例如 Next.js、Expo React Native、Flutter、Swift iOS）。 我們即將推出更多模板，並將開放給社區貢獻。敬請關注！ 開始使用 ---- 請造訪[Supabase CLI 文件](https://supabase.com/docs/guides/cli/getting-started)以開始使用`supabase bootstrap` 。 **更多關於 GA 週的訊息** - [斯帕巴斯威夫特](https://supabase.com/blog/supabase-swift) - [AWS Marketplace 上的 Supabase](https://supabase.com/blog/supabase-aws-marketplace) - [Supabase 開源黑客馬拉松 2024](https://supabase.com/blog/supabase-oss-hackathon) - [Oriole 加入 Supabase](https://supabase.com/blog/supabase-aquires-oriole) - [分支現已公開](https://supabase.com/blog/branching-publicly-available) --- 原文出處：https://dev.to/supabase/supabase-bootstrap-the-fastest-way-to-launch-a-new-project-56hf

0個讚   0留言 88瀏覽

Supabase Auth 現在支援匿名登入

Supabase Auth 現在支援[匿名登錄](https://supabase.com/docs/guides/auth/auth-anonymous)，這是社群[最需要的功能](https://github.com/supabase/auth/issues/68)之一。 {% cta https://supabase.com/ga-week %} ⚡️ 了解有關 GA 週的更多資訊 {% endcta %} 匿名登入可用於建立尚未註冊您的應用程式的**臨時使用者**。這降低了新用戶試用您的產品的阻力，因為他們不必提供任何註冊憑證。 {% 嵌入 https://youtu.be/WNN7Pp5Ftk4 %} 啟用匿名登入 ------ 您今天可以從儀表板為您的專案[啟用匿名登入](https://supabase.com/dashboard/project/_/settings/auth)： ![啟用功能截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24n0kagpgagq3h2bw145.png) 對於本機開發，請升級 Supabase CLI 並將設定新增至`config.toml`檔案： ``` [auth] enable_anonymous_sign_ins = true ``` 現在您可以透過[Javascript](https://supabase.com/docs/reference/javascript/auth-signinanonymously) 、 [Flutter](https://supabase.com/docs/reference/dart/auth-signinanonymously)或[Swift](https://supabase.com/docs/reference/swift/auth-signinanonymously) SDK 建立匿名使用者。以下是如何使用`supabase-js`建立匿名用戶。 ``` const { data, error } = await supabase .auth .signInAnonymously() ``` 術語 -- 使用匿名登入建立的個人資料也會經過`authenticated` ！ 呼叫`.signInAnonymously()`後，您已將使用者移至驗證流程，我們將他們視為登入使用者： ![範例圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjr5r7vj7pu4a8epqjol.png) 限制匿名用戶的存取 --------- 與永久使用者一樣，匿名使用者也保留在`auth.users`表中： |編號 |角色 |電子郵件 |是\_匿名 | | ------------------------------------------------ | ------------- | ----------------- | ------------ | | e053e470-afa1-4625-8963-37adb862fd11 |已驗證 |空|真實 | | 5563108e-ac81-4063-9288-4f3db068efa1 |已驗證 | [email protected] |假 | 匿名用戶可以透過用戶 JWT 中傳回的`is_anonymous`聲明來辨識，該聲明可從行級安全策略 (RLS) 存取。如果您想限制對應用程式中某些功能的存取，這會很有幫助。 例如，假設我們有一個線上論壇，用戶可以在其中建立和閱讀貼文。 給定這個表來儲存帖子： ``` create table public.posts ( id serial primary key, name text not null, description text ); ``` 如果我們只想允許永久用戶建立帖子，我們可以透過檢查 JWT `select auth.jwt() ->> 'is_anonymous'`來檢查使用者是否是匿名的。 在 RLS 策略中使用此函數： ``` create policy "Only permanent users can create posts" on public.posts for insert to authenticated -- Note: user is still authenticated with check ( (select auth.jwt() ->> 'is_anonymous')::boolean is false ); ``` RLS 為我們提供了建立各種規則的充分靈活性。 例如，允許永久用戶對所有帖子進行讀取存取，並限制匿名用戶只能存取今天建立的帖子： ``` create policy "Limit access to anonymous users" on public.posts for select to authenticated -- Note: user is still authenticated using ( case when (select (auth.jwt() ->> 'is_anonymous'))::boolean is true then (created_at >= current_date) else true end ); ``` 將匿名用戶轉換為永久用戶 ------------ 在某些時候，匿名用戶可能決定他們想要建立一個貼文。我們在這裡提示他們註冊一個帳戶，將他們轉換為永久用戶。 > 當匿名使用者俱有與其關聯的身份時，他們被視為永久使用者。 轉換後，使用者 ID 保持不變，這表示與使用者 ID 關聯的任何資料都將被保留。 Supabase Auth 提供了 2 種方法來實現此目的： 1-連結電子郵件或電話身份 2-連結 OAuth 身份 連結電子郵件或電話身份 ----------- 若要連結電子郵件或電話身分： ``` const { data, error } = await supabase .auth .updateUser({ email }) ``` 連結 OAuth 身份 ----------- 要將 OAuth 身分連結到匿名用戶，您需要為專案[啟用手動連結](https://supabase.com/dashboard/project/_/settings/auth)。了解[身分連結](https://supabase.com/docs/guides/auth/auth-identity-linking)如何與 Supabase Auth 配合使用。 ![打開](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmyynoe9lqgn75owkb3f.png) 啟用後，您可以呼叫`linkIdentity()`方法： ``` const { data, error } = await supabase .auth .linkIdentity({ provider: 'google' }) ``` 冒充匿名用戶 ------ 在建立 RLS 策略來區分匿名使用者的存取權時，您可以利用 SQL 編輯器中的[使用者模擬功能](https://supabase.com/blog/studio-introducing-assistant)來測試您的策略： ![助理截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jlsj0419csvjtmrzg77.png) *SQL 編輯器中的資料庫角色設定。您可以從下拉清單中選擇使用者來模擬匿名使用者。* [使用者管理畫面](https://supabase.com/dashboard/project/_/auth/users)提供了匿名使用者過濾的選項，這可以幫助了解已建立了多少匿名使用者。 ![工具截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmx21h9idryi9yl4zi0s.png) 下一步是什麼 ------ 管理匿名用戶可能很棘手，尤其是當您的網站有大量訪客時。我們正在開發「自動清理」選項，以刪除超過 30 天不活動的匿名用戶。同時，由於匿名使用者儲存在資料庫的 auth 模式中，因此您可以透過執行下列查詢來清理孤立的匿名使用者： ``` -- deletes anonymous users created more than 30 days ago delete from auth.users where is_anonymous is true and created_at < now() - interval '30 days'; ``` 我們也正在開發[linter，](https://github.com/supabase/splinter/pull/28)以檢查您的 RLS 策略並突出顯示那些允許匿名用戶存取的策略 - 請繼續關注本月稍後的更新！ 入門 -- - 文件：[匿名登入](https://supabase.com/docs/guides/auth/auth-anonymous) - API方法參考： [Javascript](https://supabase.com/docs/reference/javascript/auth-signinanonymously) 、 [Flutter](https://supabase.com/docs/reference/dart/auth-signinanonymously) 、 [Swift](https://supabase.com/docs/reference/swift/auth-signinanonymously) **更多關於 GA 週的訊息** - [斯帕巴斯威夫特](https://supabase.com/blog/supabase-swift) - [AWS Marketplace 上的 Supabase](https://supabase.com/blog/supabase-aws-marketplace) - [Supabase 開源黑客馬拉松 2024](https://supabase.com/blog/supabase-oss-hackathon) - [Supabase引導程式](https://supabase.com/blog/supabase-bootstrap) - \[分支現已公開 \](https://supabase.com/blog/branching-publicly-available) --- 原文出處：https://dev.to/supabase/supabase-auth-now-supports-anonymous-sign-ins-1j00

0個讚   0留言 25瀏覽

加入我們參加下一個前端挑戰：地球日版！

--- 標題：加入我們，迎接下一個前端挑戰：地球日版！ 發表：真實 描述： 標籤： frontendchallenge、devchallenge、js、css 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emb626o0mysdsw32ox4k.png 使用 100:42 的比例可獲得最佳效果。 ===================== 發表於: 2024-04-17 14:14 +0000 =========================== --- 幾週前，我們開始了[第一個前端挑戰](https://dev.to/devteam/join-our-first-community-challenge-the-frontend-challenge-8be)，並承諾如果社區喜歡參與，我們將定期舉辦這些挑戰 - 您的提交讓我們欣喜若狂，所以現在**我們又回來了**，我們的下一個前端挑戰！ 對於下一個前端挑戰，我們將慶祝地球上最大的公民活動：**世界地球日**。 🌍🌏🌎 此挑戰有兩個提示。我們將為此挑戰帶回**CSS Art**和**Glam Up My Markup**提示 - 別擔心，One Byte Expander 將來會再次出現！ 和上次一樣，每個提示都會有一個獲勝者，為了慶祝地球日，我們也將為此挑戰設置一個額外的獎品類別。這是贏得炫耀權、DEV 商店禮物和專屬 DEV 徽章的 3 次機會。與往常一樣，提交有效提交的參與者將獲得完成徽章。 *前端不是你的菜嗎？或者您正在尋找更大獎勵的挑戰？ [Coze AI 機器人挑戰賽](https://dev.to/devteam/join-us-for-the-coze-ai-bot-challenge-3000-in-prizes-4dp7)現已開始，獎金池為 3,000 美元。* 繼續閱讀以了解每個提示以及如何參與！ 提示 -- ### CSS 藝術：地球日 畫出您在地球日時想到的內容。這是我們美麗的星球嗎？它是提高人們對氣候變遷認識的象徵嗎？不管是什麼，告訴我們！ 您提交的內容**不應使用任何 JavaScript** ，而應在 CSS 中發揮您的創造力。您提交的內容將包括標記，可能包括 SVG 等，但主要應該*展示*您的 CSS 技能。 **評審標準** - 創造力 - 有效使用CSS - 美感效果 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/frontend-2024-04-17)上的所有評審標準和挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%0A---% 0A%0A\_This%20is%20a%20submission%20for%20%5BFrontend%20Challenge%20v24.04.17%5D(https%3A%2F%2Fdev.to%2Fdevteam%2Fjoin-us-for-the-next-frontend地球日版-52e4)%2C%20CSS%20Art%3A%20Earth%20Day.\_%0A%0A%23%23%20靈感%0A%3C!--%20What%20are%20you%20highlighting%20today% 3F %20--%3E%0A%0A%23%23%20Demo%20%0A%3C!--%20Show%20us%20your%20CSS%20Art!%20You%20can%20directly%20embed%20Art!%20You%20can%20directly%20embed%20an%20editor%20an%20editor%進入%20this%20post%20（參見%20the%20FAQ%20section%20of%20the%20challenge%20頁面）%20或%20you%20can%20share%20an%20image%20of%20your%20can%20share%20an%20image%20of%20your%20project%20% 20a%20public %20link%20到%20%20程式碼。 %2C%20what%20you %20已學會%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what%20you%20hope%20to%20do%20next%2C%20etc.%20--%3E %0A%0A%3C!-- %20Team%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV%20usernames%20directly %20in%20the%20body%20of%20the %20post.%20--%3E%0A%0A%3C!--%20We%20鼓勵%20you%20to%20考慮%20為%20your%20程式碼新增% 20a%20license%20。 %20想要)。 CSS 藝術挑戰提交模板 {% 結束%} ### 魅力我的標記：地球日慶祝活動登陸頁面 使用 CSS 和 JavaScript 使下面的入門 HTML 標記美觀、互動且有用。 您提交的內容應該比我們提供的 HTML 更有趣、更具互動性，而且還應該可用且易於存取。您不應直接編輯提供的 HTML，除非是透過 JavaScript。我們期待風格和實質。您可以加入基本樣板，包括元標記等以用於演示目的。 ``` <body> <header> <h1>Welcome to Our Earth Day Celebration!</h1> </header> <section> <article class="facts"> <h2>Did You Know?</h2> <p>Earth Day was first celebrated on April 22, 1970, and now includes a wide range of events coordinated globally by EARTHDAY.ORG including 1 billion people in more than 193 countries.</p> </article> <article> <h2>Why Celebrate Earth Day?</h2> <p>Earth Day is more than just a single day — April 22. It's a day to remind us to take action in our communities and beyond, to protect the environment, restore damaged ecosystems, and live a more sustainable life.</p> </article> <article> <h2>How You Can Help</h2> <p>Join us in making a difference! Here are some ways you can contribute to preserving our planet:</p> <ul> <li>Reduce, reuse, and recycle.</li> <li>Volunteer for cleanups in your community.</li> <li>Conserve water and electricity.</li> <li>Plant a tree.</li> <li>Educate others about environmental conservation.</li> </ul> </article> <div class="action-call"> <h2>Take Action Now</h2> <p>Join our Earth Day quiz to test your knowledge and learn more about what you can do to help our planet!</p> <a href="#">Start the Quiz!</a> </div> </section> <div class="testimonial"> <h2>Inspiration Corner</h2> <p>"The Earth does not belong to us: we belong to the Earth." - Marlee Matlin</p> <p>This Earth Day, let's remember we are part of a larger ecosystem and our actions have a profound impact on our planet.</p> </div> <div class="events"> <h2>Join an Event</h2> <p>Participate in local and global Earth Day events to take action towards a sustainable future. Check out <a href="#">events near you</a>.</p> </div> <footer> <p>Happy Earth Day! Together, we can make a difference.</p> </footer> </body> ``` **評審標準**： - 無障礙 - 可用性和使用者體驗 - 創造力 - 程式碼品質 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/frontend-2024-04-17)上的所有評審標準和挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20devchallenge%2C%20frontendchallenge%2C%20css%2C%20javascript%2C%20frontendchallenge%2C%20css%2C%20javascript%0Ajava ---%0A%0A\_This%20is%20a%20submission%20for%20%5BFrontend%20Challenge%20v24.04.17%5D(https%3A%2F%2Fdev.to%2Fdevteam%2Fjoin-us-for-the-next前端挑戰-地球日-版本-52e4)%2C%20Glam%20Up%20My%20Markup%3A%20Earth%20Day%20Celebration%20Landing%20Page\_%0A%0A%23%23%20What%20I%20A0ABuilt% %3C!--%20告訴%20us%20什麼%20you%20built%20和%20what%20you%20是%20期待%20實現%20實現。 23%20示範%0A %3C!--%20Show%20us%20您的%20專案！ 20the%20FAQ%20section%20from%20the%20challenge%20page )%20或%20you%20can%20share%20an%20image%20of%20your%20project%20and%20share%20a%20share%200%200%200%20share%程式碼。 20you%20are%20specially%20proud%20of%2C%20what%20you%20hope% 20至%20do%20next%2C%20等%20--%3E%0A%0A%3C!--%20團隊%20Submissions% 3A%20請%20pick%20one%20member%20至%20publish%20the%20submission%20and% 20credit%20teammates%20by%20listing%20their%20DEV%20usernames%20by%20listing%20their%20DEV%20usernames%20directthe%200%0%200inbody%200%200%200% %20--%3E%0A%0A%3C!--%20We%20encourage%20you% 20to%20考慮%20加入%20a%20許可證%20用於%20您的%20程式碼。 -%3E%0A%0A%3C！ --%20Don%27t%20忘記%20to%20add%20a%20cover%20image%20to% 20您的%20貼文%20（如果%20您%20） 。 使我的標記提交模板更加迷人 {% 結束%} 附加獎類別 ----- 除了能夠贏得每個提示之外，我們還有一個特殊的獎品類別來紀念我們的星球： - 世界地球日：授予提高人們對氣候變遷認識的最佳提交作品。 除了前端挑戰賽獲勝者徽章和 DEV 商店贈送的禮物之外，我們的地球日獲勝者還將獲得一枚額外的超專屬徽章，用於展示其開發者檔案。 如何參與 ---- 為了參與，您需要使用提示的提交範本發布貼文。**您可以在[官方挑戰頁面](https://dev.to/challenges/frontend-2024-04-17)上找到所有評審標準、挑戰規則和提交範本。** 我們的規則和指南涵蓋了參賽要求、團隊提交、人工智慧的使用等主題，因此請務必仔細閱讀。 重要的日子 ----- 4 月 17 日：前端挑戰 v24.04.17 開始！ 4 月 28 日：提交截止時間為太平洋夏令時間晚上 11:59 4 月 30 日：公佈得獎者 ![行星地球插圖](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaDFxNGZ5Z2wwdGV4YXE5M2o0bGc2cWpuMDFlYnBpMmlwdXV3eWs0aSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l1KVcrdl7rJpFnY2s/giphy.gif) 我們很高興看到您的地球日專案！問題？請在下面詢問他們。 祝你好運，編碼愉快！ --- 原文出處：https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4

0個讚   0留言 26瀏覽

加入我們參加 Coze AI 機器人挑戰賽：獎品為 3,000 美元！

--- 標題：加入我們參加 Coze AI 機器人挑戰賽：獎品為 3,000 美元！ 發表：真實 描述： 標籤：cozechallenge、devchallenge、人工智慧、機器學習 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lox2s2e29vq74sg0xcqn.jpg 使用 100:42 的比例可獲得最佳效果。 ===================== 發表於: 2024-04-16 19:51 +0000 =========================== --- 我們很高興與[Coze](https://www.coze.com)合作，為社群帶來我們的下一個人工智慧挑戰——這次，挑戰全部關於機器人以及建立與機器人相關的插件或工作流程！ **[Coze AI 機器人挑戰賽](https://dev.to/challenges/coze)**將持續到 4 月 28 日，屆時您將有機會嘗試機器人開發平台、免費在 GPT-4 上建立、部署強大的功能並贏得現金獎勵。此挑戰有兩種提示，但獲勝方式有四種！ Coze 為開發人員提供了一種低門檻的方式來利用人工智慧模型並建立令人難以置信的東西，因此無論您的經驗水平如何，我們都真誠地希望您嘗試！ 提示 -- ### 機器人創新者 突破技術限制，**建立具有特定且引人注目的用例的強大機器人**。向我們展示您的機器人可以做些什麼！ **評審標準** - 底層技術的使用 - 產品化或貨幣化潛力 - 用例的流行潛力 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/coze)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20cozechallenge%2C%20devchallenge%2C%20ai%2C%20machinelearning%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BCoze%20AI%20Bot%20Challenge%5D(https%3A%2F%2Fdev.to%2Fdevteam%2Fjoin-us-for- the -coze-ai-bot-challenge-3000-in-prizes-4dp7)%3A%20Bot%20創新者。* %0A%0A%23%23%20What%20I%20Built%0A%3C！ --%20告訴%20us%20what%20your%20bot%20does%2C%20who%20it%27s%20for%2C%20and%20what20 % 20問題%20it%20解決%20--%3E%0A%0A%23%23%20Demo%0A%0A%3C!--%20Share%20a%20link%20to%20your%20bot%20in%20the% 20Coze%20Bot %20商店%20和%20包括%20螢幕截圖%20或%20錄音%20展示%20a%20用戶%27s%20聊天%20介面%20與%20your%20bot。 %3E%0A%0A%0A%23%23%20Your% 20配置%0A%0A%3C!--%20螢幕截圖%20或%20記錄%20您的%20bot%27s%20配置%2C% 20包括%20提示%20和%20技能%20已使用。 20about%20your%20process%2C%20what%20you%20learn%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what %20you%20hope%20to%20do%20next%C%C%20next. -%3E%0A%0A%3C!--%20團隊%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the %20submission%20and%20credit%20隊友%20by%他們0listing%20by%他們0listing%20by%的%20DEV%20用戶名%20直接%20in%20the%20body%20of%20the%20post。 20a%20cover%20image%20(如果%20you%20想要)。 %} 機器人創新者提交模板 {% 結束%} ### 烘焙開拓者 透過在 Coze 上建立高品質的自訂外掛程式或自訂工作流程，為未來的 Coze 開發人員開闢一條新道路。在生態系統中留下您的印記！ **評審標準** - 底層技術的使用 - 穩健性 - 用例的流行潛力 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/coze)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20cozechallenge%2C%20devechallenge%2C%20ai%2C%20machinelearning%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BCoze%20AI%20Bot%20Challenge%5D(https%3A%2F%2Fdev.to%2Fdevteam%2Fjoin-us-for- the -coze-ai-bot-challenge-3000-in-prizes-4dp)%3A%20Trailblazer。* %0A%0A%23%23%20What%20I%20Built%0A%3C！ --%20告訴%20us%20what%20your%20plugin%20or%20workflow%20does%20and%20what%20problemsol020 - -%3E%0A%0A%23%23%20Demo%0A%0A%3C!--%20If%20submitting%20a%20plugin%2C%20share%20a%20link%20to%20your%20plugin%20in%20the% 20Coze %20Plugin%20Store%20--%3E%0A%0A%3C!--%20Screenshot%20or%20record%20your%20plugin%2Fworkflow%20setup%20and%20show%20us%200%20itdo%) 20 %20--%3E%0A%0A%23%23%20旅程%0A%0A%3C!--%20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C%20anything %20you% 20是%20特別%20自豪%20的%2C%20什麼%20你%20希望%20到%20做%20下一個%2C%20等%20--%3E%0A%0A %3C!--%20團隊%20提交%3A%20請% 20pick%20one%20member%20to%20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%usernameDEVdit%20teammates%20by%20listing%20their% %20the%20body%20of%20the%20post。 ).%20--%3E%0A%0A%3C!-- %20感謝%20%20的參與！%20--%3E%0A %} 科茲開拓者提交模板 {% 結束%} ### 附加獎品類別 除了能夠贏得每個提示之外，您還可以爭取另外兩個獎品類別： - 最受歡迎：授予擁有大量用戶的頂級提交。 - 最具創意：授予具有獨特且富有創意的用例的最佳提交作品。 專業提示：儘早提交，以便您可以更快地將專案交到使用者手中！如果您正在建立聊天機器人，我們鼓勵您跨社交平台和訊息應用程式（例如 Discord、Telegram 和 Slack）部署您的專案，以便您的朋友和家人可以與您的機器人互動！ 獎品 -- 我們的四位獲獎者將獲得以下獎品： **即時獲勝者 (2)** - $1,000 禮品卡或同等金額 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **其他獎項類別得獎者 (2)** - $500 禮品卡或同等金額 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **所有提交有效提交的參與者都**將在其 DEV 個人資料中收到完成徽章。 如何參與 ---- 為了參與，您需要使用提示的提交範本發布貼文。所有參與挑戰的機器人都應在[Coze Bot Store](https://www.coze.com/store/bot)中發布，所有插件都應在[Coze Plugin Store](https://www.coze.com/store/plugin)中發布。 Coze Workflow Marketplace 仍在開發中，因此工作流程只需在您提交的內容中作為直接連結進行共用。 目前，您在 Coze 開發平台上建立機器人、插件或工作流程所需的一切都是免費的，因此入門沒有任何障礙！ 所有提交的作品都將基於免費平台進行評審，因此任何使用 Coze 的 API（付費服務）的行為都將在評審過程中被考慮。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20cozechallenge%2C%20devchallenge%2C%20ai%2C%20machinelearning%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BCoze%20AI%20Bot%20Challenge%5D(https%3A%2F%2Fdev.to%2Fdevteam%2Fjoin-us-for- the -coze-ai-bot-challenge-3000-in-prizes-4dp7)%3A%20Bot%20創新者。* %0A%0A%23%23%20What%20I%20Built%0A%3C！ --%20告訴%20us%20what%20your%20bot%20does%2C%20who%20it%27s%20for%2C%20and%20what20 % 20問題%20it%20解決%20--%3E%0A%0A%23%23%20Demo%0A%0A%3C!--%20Share%20a%20link%20to%20your%20bot%20in%20the% 20Coze%20Bot %20Store%20和%20包括%20螢幕截圖%20或%20錄音%20展示%20a%20用戶%27s%20聊天%20介面%20和%20your%20bot。 3E%0A%0A%0A%23%23%20Your% 20配置%0A%0A%3C!--%20螢幕截圖%20或%20記錄%20您的%20bot%27s%20配置%2C%20包括%20提示%20和%20技能%20已使用。 %20your%20process%2C%20what%20you%20learn%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what %20you%20hope%20to%20do%20next%200%20next.C% %3E%0A%0A%3C!--%20團隊%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the %20submission%20and%20credit%20%20by%20list%20by% %20DEV%20用戶名%20直接%20in%20the%20body%20of%20the%20post。 %20cover%20image%20(如果%20you%20想要)。 } 機器人創新者提交模板 {% 結束%} {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20cozechallenge%2C%20devechallenge%2C%20ai%2C%20machinelearning%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BCoze%20AI%20Bot%20Challenge%5D(https%3A%2F%2Fdev.to%2Fdevteam%2Fjoin-us-for- the -coze-ai-bot-challenge-3000-in-prizes-4dp)%3A%20Trailblazer。* %0A%0A%23%23%20What%20I%20Built%0A%3C！ --%20告訴%20us%20what%20your%20plugin%20or%20workflow%20does%20and%20what%20problemsol020 - -%3E%0A%0A%23%23%20Demo%0A%0A%3C!--%20If%20submitting%20a%20plugin%2C%20share%20a%20link%20to%20your%20plugin%20in%20the% 20Coze %20Plugin%20Store%20--%3E%0A%0A%3C!--%20Screenshot%20or%20record%20your%20plugin%2Fworkflow%20setup%20and%20show%20us%200%20itdo%) 20 %20--%3E%0A%0A%23%23%20旅程%0A%0A%3C!--%20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C%20anything %20you% 20是%20特別%20自豪%20的%2C%20什麼%20你%20希望%20到%20做%20下一個%2C%20等%20--%3E%0A%0A %3C!--%20團隊%20提交%3A%20請% 20pick%20one%20member%20to%20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%usernameDEVdit%20teammates%20by%20listing%20their% %20the%20body%20of%20the%20post。 ).%20--%3E%0A%0A%3C!-- %20感謝%20%20的參與！%20--%3E%0A %} 科茲開拓者提交模板 {% 結束%} 請在提交之前查看我們的完整[規則、指南和常見問題解答頁面，](https://dev.to/challenges/coze)以便您了解我們的參與指南和[官方競賽規則](https://dev.to/page/coze-ai-bot-challenge-contest-rules)（例如資格要求）。 需要靈感、回饋或幫助？ ----------- Coze 團隊將於太平洋夏令時 4 月 22 日星期一下午 2 點在 DEV 上現場演示和建造機器人。他們將從頭到尾經歷整個過程，這將是了解 Coze 開發平台並提出問題的絕佳機會。 如果您無法觀看直播，您仍然可以利用 Coze 的文件和教學來了解 Coze 平台： - [開發者文件](https://www.coze.com/docs/welcome.html) - [教學影片](https://www.youtube.com/@CozeHQ) 我們也鼓勵所有參與者加入[Coze Discord 社區，](https://discord.gg/m6S2fT66CK)作為分享您的專案、獲取回饋和尋求幫助的地方。 重要的日子 ----- - 4 月 17 日：Coze AI 機器人挑戰賽開始！ - 4 月 22 日：太平洋夏令時間下午 2:00 進行機器人建構直播 - 4 月 28 日：提交截止時間為太平洋夏令時間晚上 11:59 - 4 月 30 日：公佈得獎者 我們迫不及待想看看您建造了什麼！對挑戰有疑問嗎？請在下面詢問他們。 祝你好運，編碼愉快！ --- 原文出處：https://dev.to/devteam/join-us-for-the-coze-ai-bot-challenge-3000-in-prizes-4dp7

0個讚   0留言 35瀏覽

遙測如何拯救我的開源平台

一開始是因為無法與使用者取得聯繫而感到沮喪，但很快就發展成了對平台流程的重新設計。 我和我的團隊正在開發一個開源平台，幫助開發人員在 Kubernetes 中部署和管理他們的應用程式。我們一直在努力擴大我們的用戶群，並且努力已經開始顯現成效。 安裝數量的不斷增加令人欣喜。然而，這是我們唯一能夠觀察到的事情。我們想了解更多。我們想知道用戶在我們的平台上做了什麼以及他們遇到了什麼困難。 下面的短篇故事可以被認為是我們新創公司的#building-in-public條目，但我只是覺得它很有趣，想與你分享。 ### 支持我們🙏 我們知道 Kubernetes 可能很困難。這就是我們建立 Cyclops 的原因，這是一個**真正**面向開發人員的 Kubernetes 平台。抽象化 Kubernetes 的複雜性，並透過 UI 部署和管理您的應用程式。由於其平台性質，UI 本身是高度可自訂的 - 您可以更改它以滿足您的需求。 ![github 明星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cfxdeq76dosfzv6ai5rb.gif) 我們正在將 Cyclops 開發為開源專案。如果您熱衷於嘗試一下，我們的[儲存庫](https://github.com/cyclops-ui/cyclops)中提供了快速入門指南。如果您喜歡所看到的內容，請考慮給我們一顆星來表示您的支持⭐ 使用者回饋🗣️ ------- 從一開始，我們就一直在努力與用戶交談並收集盡可能多的回饋。然而，事實證明這是一個問題。我們知道人們正在下載 Cyclops；在我們的 DockerHub 上，我們可以看到拉取的映像數量一天比一天多。 問題是我們無法聯絡我們的用戶。**我們只能看到拉動的次數，而看不到拉動的人。** 為了與我們的用戶取得聯繫，我們建立了一個[Discord 伺服器](https://discord.com/invite/8ErnK3qDb3)。 Discord 是讓您的社群與您保持密切聯繫的好方法，正因為如此，我們才有辦法了解我們的用戶。 所以我們開始和他們交談。回饋並不總是有建設性的… ![不滿意的用戶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpxp6hyw5a469yvze904.png) ……但大部分都是正面的。然而，有一個警告；我們得到的許多正面回饋來自與用戶的一對一會議。在這些會議中，我們可以比使用者自己更好地展示 Cyclops 的功能。事實證明，這是一個比我們想像的更大的問題。 最近，我們實施了遙測，以便更好地了解我們的用戶如何使用 Cyclops。統計資料一開始出現，天哪，我們感到很驚訝。 問題❗ --- 我們對 Cyclops 的安裝數量感到非常滿意。事實證明，我們認為 Cyclops 的安裝非常簡單且直接，這是正確的。但當我們開始使用它時，超過 60% 的用戶迷失了方向。 那麼問題出在哪裡呢？ 問題是，當您想要將應用程式部署到 Kubernetes 叢集時，您必須提供 Helm 圖表形式的範本。我們建立了一些此類圖表的範例，並將它們發佈到我們的[開放儲存庫](https://github.com/cyclops-ui/templates)中。在我們所有的文件和部落格中，我們在開始使用 Cyclops 時向人們指出了該儲存庫。然而，它似乎並沒有流行起來。**已部署的應用程式數量仍然遠低於 Cyclops 啟動實例的數量。** 一個理論🧑‍🔬 ------- 親愛的讀者，這是一個有趣的事實：大多數線上讀者在網頁上花費的時間不到 15 秒（[來源](https://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/)）。知道了這一點，我們的大多數用戶是否會瀏覽部落格和文件而錯過對我們模板存儲庫的引用？ 我們想測試這個理論。在我們的上一篇[部落格](https://cyclops-ui.com/blog/2024/03/26/devs-perspective)中，我們做了另一個關於 Cyclops 的教程，展示了它的好處。然而，對於這篇特定的文章，我們建立了一個特殊版本的 Cyclops。這個版本有什麼特別之處？**我們在建立新模組時為模板新增了預設值。** ![小變化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olpsmu9d7ep7spkppe83.png) 經過一段時間的統計，結果出來了。 結果📊 --- 透過一個簡單的改變，我們看到用戶行為的**改善**，他們不再在使用我們平台的第一步中迷失方向！然而，它並沒有我們最初希望的那麼大的改進，但它肯定是在正確的方向上。我們問自己如何進一步改進這個問題。我們認為我們做到了🙌 自最新版本 (v0.3.0) 以來，我們重新設計了平台的流程。選擇模板不再是一個**輸入字段**，而是一個**下拉式選單**。 Cyclops 的每個實例都附帶幾個預製模板（儲存在我們的[模板儲存庫](https://github.com/cyclops-ui/templates)中），您可以自由使用和濫用。我們認為這將大大有助於向我們的用戶展示 Cyclops 的可自訂特性。 ![v0.3.0 下拉式選單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pftn298lhl3nt9sexh0v.png) 但 Cyclops 的一個重要部分是它**能夠使用您自己的模板**，我們不准備在這一點上妥協！這就是為什麼我們新增了一個新的`Templates`選項卡，您可以在其中新增範本並管理現有範本。新增後，您的新範本將在下次部署應用程式時顯示在下拉清單中。 學分🦔 --- 我們在本週早些時候發布了 v0.3.0，所以現在說它對我們的用戶有多大影響還為時過早，但我們對此抱有很高的期望！一旦足夠的時間過去，我們可能會分享統計資料，所以請務必關注我們來找出答案！ 如果不提及[PostHog](https://posthog.com/)作為我們正在使用的遙測提供程序，那就太可惜了，因為事實證明它非常有用。由於很難找到願意與您談論產品的人，因此收集統計資料可以讓我們更深入地了解用戶。 如果您是為數不多的閱讀這篇文章超過前面提到的 15 秒的讀者之一，我希望您至少覺得它很有趣 😁 如果您有興趣為我們的專案做出貢獻，無論是透過編碼還是提供回饋，請加入我們的[Discord 社群](https://discord.com/invite/8ErnK3qDb3)並與我們交談！ --- 原文出處：https://dev.to/cyclops-ui/how-telemetry-saved-my-open-source-platform-30f5

0個讚   0留言 25瀏覽

如何讓您的網站離線工作🌐

> 了解更多：- https://codexdindia.blogspot.com/2024/04/how-to-make-your-website-work-offline.html > 範例網站：- https://sh20raj.github.io/offline-website/ 和原始碼：- https://github.com/SH20RAJ/offline-website 和[文章](https://dev.to/sh20raj/building-an-offline-enabled-to-do-list-web-app-89j) 那麼，您想讓您的網站即使在網路決定休息時也能正常運作嗎？就像 YouTube 如何讓您在沒有 Wi-Fi 的時刻下載影片⛱️ 一樣，您也可以對您的網站執行同樣的操作，即使在網路玩捉迷藏時也可以存取它。讓我們深入研究建立一個像值得信賴的助手一樣的網站，它始終為您的用戶提供服務，即使處於離線狀態也是如此。我們將使用**HTML5 遊戲**的範例 😚 因為，嘿，誰不喜歡好遊戲，對吧？ 🎮 ### 為什麼你需要線下的好處 首先，讓我們談談為什麼擁有一個離線就緒的網站會改變遊戲規則。想像一下：不穩定的網路、偏遠地區或只是不穩定的連線 – 並不是每個人都能獲得流暢、不間斷的網路流量。透過為您的用戶提供離線選項，您可以確保他們仍然可以盡情享受您的內容，無論他們是在野外還是在飛機上。這一切都是為了提升使用者體驗！ 🚀 ### 如何讓您的網站成為線下冠軍 #### 1.**與服務人員友好相處**： 將 Service Worker 視為網站離線表演的後台工作人員。他們就像您網站的保鏢，決定在網路中斷時顯示哪些內容。 - **註冊您的 Service Worker** ：將此腳本放入您網站的 HTML 中以使事情順利進行： ``` <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(function(registration) { console.log('Service Worker registered with scope:', registration.scope); }).catch(function(error) { console.error('Service Worker registration failed:', error); }); } </script> ``` - **快取好東西**：在您的 Service Worker 檔案 ( `service-worker.js` ) 中，儲存您想要離線使用的東西： ``` var CACHE_NAME = 'my-website-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/scripts/main.js', '/images/logo.png' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); ``` - **離線播放**：當您的使用者嘗試離線存取某些內容時，Service Worker 會介入以挽救局面： ``` self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { if (response) { return response; } return fetch(event.request); }) ); }); ``` #### 2.**使用離線內容開始遊戲**： 對於 HTML5 遊戲或任何其他需要離線執行的內容，請確保您已準備好所有元件。這意味著快取 HTML、CSS、JavaScript、圖片 – 基本上，您的遊戲順利執行所需的一切。 #### 3.**下載功能（為什麼不呢？）** ： 就像您可以在 YouTube 上下載貓影片一樣，您可以讓用戶直接從您的網站下載您的遊戲檔案： ``` <a href="/path/to/game.zip" download>Download Game</a> ``` ### 測試和改進 - **測試時間**：在您放鬆身心之前，先嘗試您的離線魔法。 Chrome DevTools 的應用程式面板是您的好夥伴 - 使用它來測試您的網站離線時的行為並進行任何調整。 - **優化派對**：為了獲得額外的魅力，請考慮延遲加載資源並明智地使用快取。如果您的網站稍後需要趕上伺服器，您甚至可以加入一些後台同步。 ### 包起來🎁 即使沒有網路，讓您的網站成為一個放鬆的聚會場所也是雙贏的。用戶可以隨時隨地深入了解您的內容，無需網路。透過引入 Service Worker、快取必需的內容，甚至可能加入下載功能，您正在為出色的離線體驗奠定基礎。因此，繼續吧，給您的用戶離線擊掌，讓您的網站成為他們的首選，即使在網路小睡時也是如此。 🌟 --- {% 發布 https://dev.to/sh20raj/introducing-encriptorjs-secure-text-encryption-and-decryption-in-javascript-a-jwt-easy-to-use-alternative-l02 %} --- 原文出處：https://dev.to/sh20raj/how-to-make-your-website-used-without-internet-3e3l

0個讚   0留言 30瀏覽

2024 年 7 個最佳 Python 視覺化函式庫

我的 LinkedIn 網路中的許多新聯絡人向我尋求一些資源來開始他們的資料科學之旅🤓。我不想分享結構化的系列，但從現在開始，我將分享一些令人興奮的資源，這些資源是我在個人技能提升之旅中使用的，以達到今天的水平。 Python是目前最好的程式語言。所以我將從這些開始。 --- 我一直最喜歡資料中的兩個步驟： 🧹🧤🧽𝗗𝗮𝘁𝗮𝗰𝗹𝗲𝗮𝗻𝘀𝗶𝗻𝗴 📊📉📈📊 你呢？您喜歡哪些步驟？ --- 從原始資料到富有洞察力、引人注目的視覺化的過程在資料科學中至關重要，它將複雜的資料集轉化為引人入勝且具有教育意義的敘述。 Python 仍然處於這一轉變的最前沿，提供了一套程式庫來滿足不同的視覺化需求，無論是學術研究、商業智慧還是互動式 Web 應用程式。步入 2024 年，讓我們探索定義資料視覺化未來的頂級 Python 庫。 --- ### 1. Taipy：簡化的動態視覺化 Taipy 以其以使用者為中心的資料視覺化方法脫穎而出，使那些具有最少 Web 開發經驗的人可以存取動態和互動式視覺化。 Taipy 在提供建立豐富、引人入勝的資料故事的直接途徑的同時，也鼓勵資料愛好者透過在 GitHub 儲存庫中加入星星來貢獻和支持其發展。這項措施不僅認可了開發人員的努力，還有助於圍繞這項創新工具建立社群。 [](https://github.com/Avaiga/taipy) ![為我們的 GitHub 加註星標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n00ajzhjqs9w5xsimppa.png) ![類型](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrg9r26iso1hd6vmd1zc.png) --- ### 2.情節： 該圖書館在製作互動式、出版品質的線上圖表方面處於領先地位。 Plotly 的優點在於它能夠產生多種繪圖類型，包括複雜的 3D 視覺化、地理地圖和互動式時間序列。該庫與網路技術的無縫整合允許在網頁中嵌入視覺化效果，從而增強資料洞察的互動性和可存取性。 [情節Github](https://github.com/plotly) ![陰謀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n7bqkcr69y5pcnx35tw.png) --- ### 3.Matplotlib： 作為 Python 視覺化工具的鼻祖，Matplotlib 對繪圖的每個元素提供了無與倫比的控制，使其成為建立可發布的圖表和圖形的理想選擇。它是建立許多其他視覺化庫的基礎，因其多功能性和使用足夠命令繪製任何內容的能力而受到稱讚。 [Matplotlib GitHub](https://github.com/matplotlib/matplotlib) ![Matplotlib](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6t4jawl20yfkthx4vcz.png) --- ### 4.海博恩： Seaborn 建構於 Matplotlib 之上，並擴展了其功能，使產生複雜的視覺化變得更加容易。它特別適合統計分析，提供高級介面來繪製有吸引力且資訊豐富的統計圖形。 Seaborn 是任何希望透過超越基本繪圖的優雅視覺化來傳達資料見解的人的首選。 [Seaborn GitHub](https://github.com/seaborn) ![西博恩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3l1fabb08w91kjjzi9d.png) --- ### 5. 散景： 該庫擅長直接在網頁瀏覽器中建立互動式圖表和儀表板。其強大的介面允許開發複雜的視覺應用、即時儀表板和複雜的資料驅動的互動式繪圖。 Bokeh 旨在吸引那些需要快速輕鬆地建立互動式資料應用程式而無需深入研究 Web 開發的使用者。 [散景 GitHub](https://github.com/bokeh/bokeh) ![散景](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo41itzkuvie8ekdi33c.png) --- ### 6. 建造者： Gradio 讓 Python 腳本建立互動式 UI 變得異常簡單，降低了共享機器學習模型和資料分析的障礙。它在可視化模型輸出、比較不同模型或即時演示模型功能至關重要的場景中大放異彩，使人工智慧更易於存取和理解。 [由 GitHub 建置](https://github.com/gradio-app/gradio) ![建成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3itg9dnw0hl8oyi2es5n.png) --- ### 7.流線型： 對於飛行員，請使用 Streamlit。它使用戶能夠建立高度互動的應用程式以進行資料探索和視覺化，強調速度、簡單性和快速迭代的能力。 [Streamlit GitHub](https://github.com/streamlit) ![流線型](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3gwr8wd62nm57s7ec7q.png) --- 到 2024 年，這些 Python 程式庫不僅是工具，而且是以以前難以想像的方式理解資料並與資料互動的入口網站。透過為您的專案選擇合適的庫，您可以釋放新的見解，講述引人入勝的資料故事，並與受眾進行更深層的互動。 --- 原文出處：https://dev.to/taipy/7-best-python-visualization-libraries-for-2024-5h9f

0個讚   0留言 41瀏覽

歡迎串 Part.16 👋👋👋

歡迎最近新註冊的用戶 @id3p6688 @katiewilson8210 @linejkf552 @tws9666 @8945689 @swotoutty @leemotseng @bear645 @jf76501 @assdee @kk00336 @Adjutle @imxp978 @jeff858484 @ytb0315 @Iven10252158 @AppleLily @wmw588ss52 @Weboai @1891722 @react @cian1223 @dd2d2d41 @vincentchen0606 @slinexm594 @sunmoonsky @reelvetut @4000889 @HansChang83 @wsx1688 @zc235475 @jensen @idziq888 @s1s2s4s5h @Imardaxia @vidmateApk @Skylar0628 @z2837777 @pikashowsapk1 @instaproapps @Vidmateapp @pon0620 @PikaShow23 @Excarrath @tenkai0812 @ScottX8 @Hannahdrorn @Learn20240303 @simon5537 @arielh1004 @hhkwe1 @line771554 @kinemasters @kgi-design-team @doochulk @pdmod @Cartinson @futemaxapk @av0988 @kinemastersapk @Taulinip @rectvindir @rhwang @Chengyi-Lin @nfc851026 @lanni0619 @max002215 @lline966757 @Luckypatcher1s @gary880306 @zzliou @hdstreamzapk03 @PinoyLambingan @aaronzhan0906 @lu4707xeop @Mia1314echooo @TsuPeiHo @roynitisha29 @ovallyfef @qun18009 @nozomi @Aaron @Filmy4WapAPK1 @lu10510 @joeyoldbar @prochini @Yutai @sherry860722 @hzf9Nf5P @yunie0216st @pikashowshd @Kuo-TingKai @alexwu @chelsea22222 @zoetanghk852 @MagicBenson @xd890872680 @Nehaambore01 @Note @shabazsayyed @1084926 @kenni1107 @0711kps @Shuntw6096 @capcutt @TopFollowAPK @YICHI1018 @kaede1904 @HxVfHNMpK @universitykart0101 @pikashowapks @ishad1 @GustavoFringgg @skrbomb @Luckypatcherapk @wwertytrd3 @av9397 @Asn66 @MarioooooLin @snapptube891 歡迎在留言處簡單自介一下～ 可以說一下從哪邊發現這論壇的～最近在學什麼東西～或者是關於你的一件小趣事～ 也請大家多多回覆別人的留言，問別人小問題，或者回個「嗨嗨 👋」都很好～ **歡迎各位加入這個技術成長社群！**

0個讚   0留言 154瀏覽

我的新開源儲存庫可安排您的所有內容！

你好！ 幾年前，我分享了我關閉之前的新創公司並將[其開源](https://dev.to/nevodavid/i-turned-my-startup-into-open-source-4efh)的故事。 從那時起，我就在開源通知基礎設施 Novu 工作，實際上我學到了很多關於開源社群的力量。 我在 DEV 上寫了 74 篇帖子，產生了**1,182,911 次瀏覽**🤗 這使得 Novu 成為最受歡迎的開源儲存庫之一**（31k 星）** --- 我開始談論它 ------ 我建立了一份名為[Gitroom](https://gitroom.com/) （以前稱為GitHub20k）的時事通訊，並寫下了我在這一年中所做的一切，從在DEV 上發布實際價值教程到使用有影響力的人推廣存儲庫。 我每月與 30 多名開源維護者交談！幫助他們了解其儲存庫。 但有一件事情我一直沒有解決。 我的戰術壓力很大。不是隨意寫文章。 但我在正確的時間寫了它們，並在不同的 Reddit 和社交媒體管道上推廣它們。 問題是你的發佈在文章發表之前就被卡住了——你無法為任何事情計時，所以你必須在一周內完成。 如果其他人參與發布，事情就會變得很困難；我曾經錯過了很多。因此，我決定建立 Gitroom 平台。 --- Gitroom 平台 ---------- Gitroom 平台是安排開源發布的最佳工具。它是 100% 開源的！在這裡檢查並加註星標。 https://github.com/gitroomhq/gitroom ### 技術堆疊 - NextJS（順風） - NestJS ### 分析 從基礎知識開始，我想知道： - 表現最好的一天是什麼時候（關於星星的數量），然後將其與我所做的發布週進行交叉引用。 - 了解我何時在 GitHub 上流行（收到通知） - 了解 GitHub feed 何時刷新，以便相應地安排我的內容。 ![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9f313fa8-7f32-4cad-9d24-97560905eeb2/CleanShot_2024-03-16_at_15.14.48_2x.png?t=1710576917) ### 啟動頁面 要啟動，您需要： - 將所有管道用於開源，從Reddit等社交媒體到[DEV.to](http://DEV.to?utm_source=nevo.github20k.com&utm_medium=referral&utm_campaign=the-gitroom-platform-is-live)等文章發布 - 請參閱下次刷新的時間表，以便我可以相應地進行計劃。 - 在發布之前加入評論並與我的團隊合作。 ![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9b4efadf-891f-454f-9afd-81c169c2912e/CleanShot_2024-03-16_at_15.21.35.gif?t=1710577390) ### 時間表頁面 這就是魔法發生的地方： - 您可以同時**交叉發佈**到多個頻道（例如 DEV、Hashnode 和 Medium） - 您可以發佈到更複雜的頻道，例如 Reddit，您必須在其中定義**天賦**和 subreddit。 - 您可以全域編輯所有內容，然後切換到特定頻道。 - 查看它在現有頻道中的外觀預覽。 - 在發布之前**使用之前預定帖子的連結**！您也可以將其用作規範連結！ ![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d8ac54a6-d9a7-4219-a17f-40b9c3692928/CleanShot_2024-03-16_at_15.30.43.gif?t=1710578073) 社區的未來！ --- 這是 Gitroom 的第一個版本，主要用於規劃您的發布。**這是您應該期待的：** - 交換或購買其他社區成員和影響者的帖子！**是的**！有影響力的人將為您建立帖子，它們將出現在時間軸上。什麼是最好的事？他們只有在貼文發布後才會獲得報酬（良好的激勵措施） - 成為 OSS 朋友的一部分，這是一個列出系統中所有開源公司的 API -**非常適合 SEO。** - 加入推薦並與其他開源朋友一起**“使用”** ！ 並且： - **從Notion等其他平台匯入**——我所有的部落格文章都是我自己在Notion上寫的，但每次複製時，我都需要手動上傳所有圖片。 - 有更多可供安排的頻道，例如 Discord 和 Mastodon。 - 自動交叉發布（如果你不想使用 Gitroom 調度程式） - 媒體生成器，例如您擁有的星星數量。 --- 幫幫我！ 🤗 這是一個新專案，100% 開源（同類中的第一個！） 你能給我的任何星星都會幫助我更成長❤️ https://github.com/gitroomhq/gitroom 在這裡加註星標❤️ --- 原文出處：https://dev.to/github20k/my-new-open-source-repository-to-schedule-all-your-content-2f2a

0個讚   0留言 103瀏覽

再見 SASS 👋，歡迎回歸原生 CSS

Sass 已成為本地安裝的強大預處理器，十多年來構成了我的專案的支柱。它使我能夠有效地組織可擴展且穩定的 CSS 包。即使在今天，我仍然認為 Sass 是一個非常強大的工具。然而，當我們步入 2024 年時，不可否認 CSS 已經經歷了快速發展。曾經是 Sass 獨有的功能現在已原生整合到 CSS 中，包括變數和最新亮點：CSS 嵌套。 變數 -- 長期以來，定義變數一直被視為 SCSS 的獨特優勢，它允許集中管理許多屬性，這是 CSS 長期以來非常缺少的功能。然而如今，變數也可以以類似 Sass 的方式在 CSS 中定義。然而，一個顯著的差異是，Sass 變數只存在於預處理器上下文中，而 CSS 變數可以在瀏覽器中使用，甚至可以透過 JavaScript 動態覆寫。 ``` :root { --button-padding: 10px 20px; --button-bg-color: #007bff; --button-text-color: #ffffff; --button-border-radius: 8px; } .button { padding: var(--button-padding); background-color: var(--button-bg-color); color: var(--button-text-color); border-radius: var(--button-border-radius); border: none; cursor: pointer; transition: background-color 0.3s; } ``` CSS 嵌套 ------ 在另一個元素中定義一個元素的樣式規則的能力大大簡化了 CSS 的編寫。嵌套允許將這些選擇器分組到父選擇器中，而不是對從屬元素或偽選擇器重複使用相同的選擇器。這種技術可以產生清晰的、層次結構的、因而更有效率的程式碼庫。 隨著[瀏覽器對 CSS 巢狀的支援率](https://caniuse.com/?search=css%20nesting)超過 84%，對巢狀選擇器的支援率超過 86%，這種技術變得越來越容易使用。 ``` .blog { position: relative; padding: 1rem; background: var(--neutral-100); .blog-item { border: 1px solid var(--neutral-200); & span { font-size: 1rem; } } } ``` :is 偽類 ------ `:is`偽類透過接受選擇器清單並對與這些選擇器中的任何一個匹配的所有元素進行樣式設置，徹底改變了選擇器概念。這大大方便了 DOM 中元素的選擇和樣式設定。 ``` :is(selector1, selector2, selector3) { /* styles */ } ``` 您可以使用 :is() 來提高可讀性，同時避免使用長選擇器，而不是使用長選擇器清單。 : has() 偽類 ---------- CSS 偽類`:has()`提供了一種基於其後代選擇元素的強大方法，類似於條件樣式的應用。 ``` .hero:has(.hero-button) { background-color: var(--accent-50); } ``` 容器查詢 ---- 容器查詢被認為是自 CSS3 以來網頁設計最重要的創新。他們透過允許元素根據容器的大小進行調整來擴展響應式設計的概念。該技術使元素的設計能夠根據上下文動態變化，從而實現更靈活和更具適應性的設計。 ``` .component { --theme: dark; container-name: fancy; } @container fancy style(--theme: dark) { .fancy { /* dark styles. */ } } ``` ``` @container (min-width: 720px) { .headline { font-size: 2em; } } ``` 如果容器有變數 --theme: dark，請加入以下 CSS。 級聯層 --- 使用級聯層，我們可以透過分配自己的層（layer）來避免類別、ID等的嵌套，以獲得更高的特異性。使用`@layer` at-rule 和分層`@imports` ，我們可以建立自己的級聯層- 從低優先樣式（如重設和預設值），透過主題、框架和設計系統，到最高優先樣式（如元件、實用程式） ，並覆蓋。級聯層提供更多控制。 ``` @layer utilities { .button { padding: 0.5rem; } .button--lg { padding: 0.8rem; } } ``` SASS 的未來 -------- 這是否意味著 Sass 已經過時了？一點也不。 Mixins和函數，例如像素到rem的轉換，仍然是Sass不可替代的優勢。儘管如此，我還是決定在我的大部分專案中放棄 Sass。相反，我在 Sublime 編輯器中使用預先定義的程式碼區塊和套件，這顯著改善了我的工作流程。 再見sass？ ----- 我堅信，到 2024 年，Sass 的好處，包括安裝、使用和編譯問題，將不再證明其使用的合理性。現代 CSS 的可擴展性和用戶友好性使得無需額外工具即可完成。 我的 Themex 專案展示了新 CSS 功能的組合有多強大：https://app.themexproject.com 隨著 CSS 的進步，我期待直接、直接地實施小型和大型專案。 **再見sass，謝謝你！** ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2v4zu1gxgmiul99ypn9.gif) --- 原文出處：https://dev.to/karsten_biedermann/goodbye-sass-welcome-back-native-css-cf

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