🏠 首頁

🏠 首頁

中級開發人員的 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

我又建立了另一個 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

🔥 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

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

CSS 中的單位(em、rem、pt、px、vw、vh、vmin、vmax、ex、ch、...)

CSS 知道幾種測量單位。最著名的單位是像素,但還有其他單位雖然不那麼流行,但在某些用例中非常方便。 本文涵蓋相對單位、絕對單位和視口單位。 |媒體|建議|偶爾使用|不經常使用|不建議| |-----|------------|--------------|--------------- -|- --------------| |畫面|em、rem、%|px|ch、ex、vw、vh、vmin、vmax|cm、mm、in、pt、pc| |印出|em、rem、%|cm、mm、in、pt、pc|ch、ex|px、vw、vh、vmin、vmax| 相對單位 ---- 與像素、點或公分等絕對單位相反,您也可以使用百分比、em 或 rem 等相對單位來定義尺寸。 相關單位也[符合無障礙標準](https://www.w3.org/WAI/WCAG21/Techniques/css/C28.html)。 在大多數瀏覽器中,預設字體大小為`16px` ,您可以使用該值作為計算的基礎(例如 16px 等於 1em、1rem 或 100%)。 |單位|描述| |----|------------| |%|百分比| |em|元素的字體大小(例如2.5em表示字體比普通字體大2.5倍)| |rem|文件根元素的字型大小| |ch|「0」字元的寬度,在等寬字體中,所有字元具有相同的寬度,1ch 等於 1 個字元| |ex|x-目前字體的高度,以小寫x|的高度測量 https://codepen.io/fullstack-to/pen/PrXNGW ### em 和 rem 有什麼差別? 差別就在於傳承。 `rem`值基於根元素 ( `html` )。每個子元素都使用`html`字體大小作為計算基礎。 另一方面, `em`是基於父元素的字體大小。 `rem`讓字體大小的計算變得更容易。對於嵌套元素甚至多個嵌套元素(例如列表),不再需要根據父元素的字體大小來計算字體大小。 `rem`總是計算與`html`標籤相關的字體大小。 ### 不同的字體系列 ![不同字體系列的 x 高度](https://thepracticaldev.s3.amazonaws.com/i/33lk4z011rq05c4rh1z6.png) 所有字體都具有相同的大小 (18pt),但紅色條表示字體的 x 高度 ( `ex` ) 不同。 ![“0”字元的寬度](https://thepracticaldev.s3.amazonaws.com/i/zq0c8neh8uv6h5kjgsb1.png) 字體再次具有相同的大小(18pt)。在此圖中,比較了字元寬度 ( `ch` )。 Mono space 字體的每個字元具有相同的寬度,而 serif 或 sans-serif 字體的每個字元可能具有不同的寬度( `i`比`o`窄)。 絕對單位 ---- 絕對單位的大小是固定的,你不能討論公分有多長。如果需要精確長度,則應使用絕對單位(例如不應調整大小的元件)。如果您想要定義限制以避免區域變得太寬或太窄,它們也很有用。絕對單位不會根據螢幕尺寸、方向或其他變化而改變。 |單位|描述|| |----|------------|----| |公分|公分|1 公分 = 1 公分| |毫米|毫米|10 毫米 = 1 公分| |英吋|英吋|1 英吋 = 96 像素 = 2.54 公分| |px|像素|1 px = 1 英吋的 1/96| |pt|點|1 pt = 1 in| 的 1/72 |pc|異食癖|1pc = 12 分| https://codepen.io/fullstack\_to/pen/mZaVBZ 視窗單位 ---- 視口單位表示目前瀏覽器視窗的百分比。 與百分比單位的差異在於,視口單位始終以瀏覽器視窗大小的百分比計算。而百分比單位繼承其父元素的大小。 |單位|描述| |----|------------| |vw|視窗寬度的 1%(50% 表示視窗寬度的一半)| |vh|視窗高度的 1%(50% 表示視口高度的一半)| |vmin|視窗較小(vw 或 vh)尺寸的 1%| |vmax|視窗較大(vw 或 vh)尺寸的 1%| https://codepen.io/fullstack-to/pen/gNZryX 當瀏覽器視窗大小調整或手機方向改變時, `vmin`和`vmax`可能會改變。 `vmin`是視口高度或寬度之間的最小值(以百分比表示),取決於哪個較小。 `vmax`是視口高度或寬度之間的最大值(以百分比表示),取決於哪一個較大。 --- 如果您喜歡我的內容,您可能想在 Twitter 上關注我? [@fullstack\_to](https://twitter.com/fullstack_to) 封面圖片由[William Warby](https://unsplash.com/@wwarby?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)在[Unsplash](https://unsplash.com/search/photos/measurement?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)上提供 --- 原文出處:https://dev.to/matthias/units-in-css-em-rem-pt-px-vw-vh-vmin-vmax-ex-ch-53l0

package-lock.json 到底是什麼?

是的,我要寫一下我們目錄中可能最被忽略的檔案**package-lock.json** ! package-lock.json 是一個極其重要的文件,它可以幫助您避免在儲存庫中出現大量的**「boom pop bam bam 🔥」** 。 因此,在討論 package-lock.json 之前,我們先討論語意版本控制和 package.json。 **1.** 語意版本控制 ============ 語意版本控製或 SemVer 是對套件進行版本控制的理想方式。它們通常寫成`1.4.5` (major.minor.patch) ![替代文字](https://thepracticaldev.s3.amazonaws.com/i/uyw4yois1mkqr967ufb8.png) *1a.*錯誤修復/補丁版本 -------------- 包括錯誤修復/文件拼字錯誤等。 *1b.*次要版本 --------- 包括新增的功能或 API,不會破壞舊版本的任何內容,因此在 v1.1.0 上執行的任何內容也應該在 v1.9.0 上執行。 *1c.*主要版本 --------- 包括破壞東西的版本。它可以包括刪除 API 或更改函數名稱,因此適用於 v1.0.0 的任何內容可能不一定適用於 v2.0.0 **2.** package.json ============ package.json 是一個文件,其中包含有關您的專案的資訊(名稱、版本等),並列出了您的專案所依賴的套件。 ![替代文字](https://thepracticaldev.s3.amazonaws.com/i/btvz35yyxvrj4tsbmpzl.png) 正如您在上圖中看到的,在 package.json 下列出的每個依賴項之後都有一個類似`^2.20.0`的數字,它是該包的版本,但在版本之前有`^` 。所以^這個小傢伙可以成為你專案的徹底破壞者。 版本之前的 ^ 符號告訴 npm,如果有人克隆該專案並在目錄中執行 npm install,則在他的 node\_modules 中安裝該套件的最新次要版本。 假設我在 package.json 中使用了`^2.20.0`的 Express,然後 Express 團隊發布了版本 2.24.0,現在當有人克隆我的存儲庫並在該目錄中執行`npm install`時,他們將獲得版本2.24. 0(您可以也把`~`代替`^`它將更新到最新的補丁版本) 但是,如果套件開發人員破壞了次要版本上的任何功能,這可能是一個大問題,因為它可能會使您的應用程式崩潰。 所以npm後來發布了一個名為package-lock.json的新檔案來避免這種情況 **3.** package-lock.json ============= ![package-lock.json meme](https://thepracticaldev.s3.amazonaws.com/i/do6l6okbr89h5pc666k0.png) package-lock.json 將簡單地避免安裝更新的次要版本的這種一般行為,因此當有人克隆您的儲存庫並在其電腦中執行 npm install 時。 NPM 將查看 package-lock.json 並安裝與所有者安裝的套件完全相同的版本,因此它將忽略 package.json 中的`^`和`~` 。 此外,它還包含一些其他元訊息,可以節省您在安裝 npm 時從 npm 獲取資料的時間。 您可以參考[npm 部落格](https://docs.npmjs.com/files/package-lock.json)以獲取有關 package-lock.json 的更多資訊。 謝謝您閱讀此篇! 我希望這有用 🎉 :) --- 原文出處:https://dev.to/saurabhdaware/but-what-the-hell-is-package-lock-json-b04

終於明白響應式 UI 網頁設計了!

https://www.youtube.com/watch?v=qrl0h-gbafA 介紹 -- 在網路開發領域,響應式設計的概念通常會為初學者帶來陡峭的學習曲線。即使在轉向更高級的主題之後,許多人仍然難以完全掌握響應式設計的本質,而這一缺陷在他們的專案中變得明顯。 對許多工程師來說,響應式設計是一個難以實現的目標,主要是因為截止日期的緊迫感常常會將他們的注意力轉移到功能以及專案在個人裝置上的外觀上。這種狹隘的關注可能會導致對網站或應用程式在不同裝置上的執行情況的監督。 即使是成熟的網站也會在響應能力方面出現問題。就我個人而言,當我縮小筆記型電腦上的瀏覽器時,我發現眾所周知的 amazon.com 失去了美感。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w976yce0lip6ieikrvdv.jpg) 也就是說,我認為現在要達到相當熟練的響應式設計水平並不是太難。我只是認為教育界缺乏對這個主題的關注,也缺乏以清晰、全面的方式呈現它。這就是我打算在這篇文章/影片中做的事情。 我已經確定了為了實現幾乎所有響應式設計而必須了解的 7 個 CSS 屬性/概念。雖然可能還有其他技術可以增強反應能力,但這七種技術足夠全面,可以解決大多數情況。除非您的應用程式非常複雜,否則您應該能夠在合理的時間內理解並應用這些概念。 當然,要真正理解這些概念,實踐是不可或缺的。這就是為什麼我製作了一個影片教學來補充本指南,提供所討論原則的實際演示。請記住,隨著每次練習,這些概念都會變得更加直觀。 以下是我認為至關重要的主要主題: - 尺寸單位 - 相對於螢幕 - `vw` , `vh` - 相對於其他元素 - `%` - `max-width`和`min-width`屬性 - 彈性盒 - CSS 網格 - 媒體查詢 - 響應式影像屬性 - JavaScript 用於更複雜的回應行為 尺寸單位 ---- 大多數初學者專注於建立一個適合他們螢幕的設計。因此,他們沒有意識到以精確的方式(通常使用像素(px))指定元素的大小、填充、邊距等的缺點。問題是這些元素永遠不會隨著螢幕尺寸的變化而改變尺寸。過渡到使用較少的絕對單位,如百分比和視口單位 (vw/vh) 是靈活設計的關鍵。 ### 百分比 初學者必須小心百分比。理解父子關係的概念需要時間,當給子物件一個百分比時,它是其父/容器(可互換術語)大小的百分比,而不是整個螢幕的大小的百分比。 這裡的另一點是,所有看似「沒有父級」的外部元素實際上都有 - `<body>`元素。身體尺寸如下: - 寬度 - 螢幕的寬度 - Height - 其內部內容的高度(如果正文中沒有任何內容,則為 0) ### 視口寬度/高度 ( `vw` / `vh` ) 當您想要相對於*螢幕*調整元素的大小,從而與其*直接容器*的大小無關時,您需要使用`vw`和`vh` 。 下面是一個例子。假設您的網站應該有一個`<header>`然後是一個`<main>`部分,並且您想要專門調整標題的高度,並讓主要部分佔據螢幕的其餘高度。 實現此目的的一種方法如下: ``` header { height: 300px; } main { height: calc(100vh - 300px); } ``` 一個`vh`單位基本上是視口高度(螢幕高度)的 1%。因此, `100vh`表示螢幕高度的 100%,因此`calc(100vh - 300px)`表示「螢幕高度的 100% 減去 300px」。 這確保了主要部分將佔據標題之後螢幕的剩餘高度。 您也可以使用 flex 來實現此結果,但我稍後會討論這一點。在這種具體情況下,我認為兩者都可以。隨著專案複雜性的增加,也許一種方法會更好。 ### 何時使用 px 擁有這些其他選項以及我將在下面詳細介紹的選項絕對並不意味著 px 單位如今在 CSS 中沒有一席之地。在很多情況下,您希望某些東西具有不隨螢幕變化的特定尺寸。 UI 設計中的許多元素可能更喜歡永遠不會改變的特定尺寸。例如,按鈕的大小通常是這樣的。 `max-width`和`min-width`屬性 ------------------------- 當您希望元素的大小增大或縮小但僅限於某個點時,這些屬性會變得非常有用。 常見的情況是使用者介面頂部的搜尋欄。搜尋欄可能會佔據行動裝置上的大部分螢幕寬度。儘管筆記型電腦的搜尋欄比手機更大,但一旦裝置變大,您就不會希望搜尋欄幾乎保持全螢幕寬度。 看看 Airbnb 的輸入列如何隨著螢幕的增加而變化(我的意思是它的寬度)。 移動的: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmzs9j5c697xdh0z0a46.png) 藥片: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga7c6m2lmbyeyvqg2267.png) 大平板電腦/小筆記型電腦: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5khnujz7u4qovyvwyb9.png) 筆記型電腦: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mgnemzpbc5rm776xd9l.png) 這些影像有點難以判斷,但在行動裝置上,搜尋欄佔據了螢幕的大部分寬度,但就像素而言仍然很小。然後它擴展到平板電腦和小型筆記型電腦。但在某個時刻,隨著螢幕尺寸的進一步增大,它會停止增長。 彈性盒 --- 我覺得自己很幸運,在 Flexbox 發明之前不必學習 CSS。簡而言之,「Flex」是一種在位置和大小方面將元素相互關聯的驚人方法。 使用flex,你可以寫`display: flex;`在父元素上,那麼它就成為“彈性容器”,並且其所有直接子元素都成為“彈性專案”。您可以在 Flex 容器上設定幾個直覺的 Flex 相關屬性來描述 Flex 專案的行為。您也可以在 Flex 專案本身上設定一些屬性,以將其樣式與 Flex 專案的其餘部分區分開來。 初學者通常不理解彈性關係是嚴格在父子之間的。不是父母和孫子,等等。您可以擁有本身也是 Flex 容器的 Flex 專案。這意味著一個元素具有`display: flex;`它的子元素之一也有`display: flex;` 。 以下是 flex 可以派上用場的兩個最常見的場景: - Flex 可讓您在彼此相鄰或彼此之上的元素之間建立位置/空間關係。因此,例如,如果您在一行中有幾個專案,則只需使用一兩個簡單的 CSS 屬性即可在該行中將它們均勻地間隔開。 - 使用 flex,您可以輕鬆更改同級元素的定位方向。就方向而言,我的意思是從水平(行)到垂直(列),反之亦然。例如,考慮螢幕頂部導航中的連結,這些連結在移動設備的漢堡菜單下垂直組織。 CSS 網格 ------ Flex 有一個缺點,那就是當您嘗試同時控制兩個方向(x 軸和 y 軸)上的元素時。 Flex 的核心是為沿著同一個軸(x 軸或 y 軸)對齊的元素定義屬性。想要執行此操作的最常見場景是製作專案網格時。 當試圖確保它們的尺寸相同時,您可能會遇到麻煩。有關此範例,請參見下圖。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kdcz1gzqzjrd68gncie.png) 使用網格,您只需應用一兩個簡單的 CSS 屬性即可,然後問題就解決了。見下文。 ``` #card-container { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; justify-content: center; } ``` 注意 - 有些人實際上選擇在其網站的整個佈局中使用網格。說實話,我從來沒有花足夠的時間來探索這個選項,因為我先學了flex(網格後來出來了),而flex可以滿足我95%以上的需求。我確實只需要用於實際網格佈局的網格,如果我需要的話,它們通常是我網站的一部分。 在 UI 的不同部分使用 flex 和 grid 並沒有什麼問題! 媒體查詢 ---- 幾乎在任何設計中,當螢幕達到一定尺寸時,您都需要做出更大的改變。小螢幕更喜歡垂直滾動。使用更大的電腦螢幕,您可以水平放置更多元素。 透過媒體查詢,您可以定義所謂的“斷點”,即某些樣式將被覆蓋的點,以適應其他裝置的調整設計。 您可以選擇先建立行動用戶介面還是桌面使用者介面,然後建立一個斷點,在該斷點處定義新樣式以覆蓋最初並非針對的平台的現有樣式。 讓我們使用以下範例:對於行動設備,某些元素應組織在列中,但在較大的設備上,它們應組織在行中。 假設我們選擇了“行動優先設計”,這意味著首先設計行動用戶介面,然後確定實現更大設備設計的響應能力。這種選擇,而不是首先為筆記型電腦/桌上型電腦設計,在今天被認為更好,因為人們在手機上花費的時間比在大型電腦上花費的時間更多,而且公司更願意讓更多的用戶滿意。 好吧,告訴你的應用程式在平板電腦寬度和更大的情況下更改其外觀的方法基本上是- 使用媒體查詢斷點- 說,“在這個像素寬度和更高的像素寬度下,現在將這些專案的組織更改為一行。 此變更可能表示僅將 Flex 容器的 flex-direction 屬性從列變更為行,如下所示: ``` #flex-container { display: flex; flex-direction: column; } screen and (min-width: 768px) { #flex-container { flex-direction: row; } } ``` 此程式碼片段意味著 ID 為「flex-container」的元素將具有`flex-direction: column` ;對於寬度小於 768px 的螢幕,但對於寬度為 768px 及以上的螢幕,該元素將具有`flex-direction: row;` 。 附註 - 每個裝置都有相對標準的像素寬度,因此您可以尋找設定斷點的像素寬度,以指示從行動裝置到平板電腦、平板電腦到筆記型電腦等的轉換。 響應式圖像屬性 ------- 通常,上述屬性的組合將用於指定網站中圖像的大小,並且不需要進一步的 CSS。 然而,有時圖像不隨螢幕縮放。我想提供一些在這種情況發生時您可以探索的屬性。 其中一項屬性是`aspect-ratio` 。此屬性可讓您定義影像的首選縱橫比,以便它在不同的螢幕尺寸上始終保持相同的高寬比。 另一個屬性是`object-fit` ,它可以採用`fill` 、 `contain` 、 `cover` 、 `none`和`scale-down`等值,允許靈活控制圖像如何適應不同的螢幕尺寸。 JavaScript 用於更複雜的回應行為 --------------------- 最後,JS 在響應式設計中發揮著至關重要的作用,可以實現 CSS 單獨無法處理的更動態和複雜的調整,從而允許基於使用者互動或裝置規範的自訂行為。 使用 JS,您可以對更多事件類型做出反應,而不僅僅是螢幕尺寸更改,例如按鈕點擊、捲動、拖放等。 使用 JS,您可以編寫邏輯來根據您想要的任何條件動態調整元素的大小。例如,您可以根據使用者的裝置、行為、偏好和/或位置來調整內容。 JS 將佔 UI 程式碼的大部分,因此如果使用 HTML 和 CSS 無法輕鬆實現某些功能,則解決方案通常需要 JS。 結論 -- 實現響應式設計是一種平衡行為,需要將 CSS 技巧和策略性 JavaScript 結合起來。透過理解和應用上述七個關鍵概念,開發人員可以建立不僅具有視覺吸引力而且可適應所有必要設備的網站。 掌握響應式設計的旅程是不斷學習與實踐的過程。要了解這些概念的實際應用,請不要忘記查看隨附的影片教學。 請記住,響應式設計是觸手可及的,並且隨著每個專案的進行,該過程變得更加直觀。 希望我能夠透過這篇文章和影片使響應式設計成為一個不那麼模糊和令人畏懼的概念。 祝您未來的專案一切順利,感謝您的閱讀。 直到下一次, 賈里德 --- 原文出處:https://dev.to/jaredcodes/finally-understand-responsive-design-3con

您的 Express 應用程式中可能不需要 body-parser

什麼是 body-parser? ========= 通常,當我看到描述[Express.js](https://expressjs.com/)伺服器的部落格文章或文章時,它通常以類似於以下內容的內容開頭: ``` npm init -y npm i express body-parser ``` 接下來就是經典 ``` const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); // more express stuff ``` 我曾經在幾乎我製作的*每個*Express 應用程式中都有這四行程式碼! 然而,幾週前,我仔細研究了[Express 文件](https://expressjs.com/en/api.html),注意到從 4.16.0 版本[(三年前發布!)](https://www.npmjs.com/package/express/v/4.16.0)開始, [Express 基本上附帶了開箱即用的 body-parser!](https://expressjs.com/en/api.html#express.json) 如何使用 Express 版本? ================ 好吧,你幾乎可以只搜尋`bodyParser` ,並將其替換為`express` ! 這意味著我們上面的四行程式碼可以重構為以下三行程式碼: ``` const express = require('express'); const app = express(); app.use(express.json()); ``` 如果您使用[Babel](https://babeljs.io/) (我強烈推薦!),您甚至可以使用命名導入來使程式碼更加簡潔: ``` import express, { json } from 'express'; const app = express(); app.use(json()); ``` --- 原文出處:https://dev.to/taylorbeeston/you-probably-don-t-need-body-parser-in-your-express-apps-3nio

自由工作者生涯:關於「免費」幫人做網站的幾點看法

我在論壇上看到有人發問:免費提供網頁 對方賺得網站 我賺得經驗 這套流程可行嗎? https://codelove.tw/@JsLover0018/post/n3VdEq 我認為很多年輕的工程師可能都曾有過類似念頭 今天分享幾點個人看法 --- 先講結論,我認為這是一個餿主意,基本上是在浪費時間 只有在很少的情況下可以考慮。大多數情況下,絕不應該免費提供你的專業 ## 免費背後釋放的訊息 從原文的案例來看,網站會是這些店家的重要門面、品牌的一部份、甚至影響銷售流程 所以這件事影響很大,並且後續可能需要定期更新、維護 我舉個比較生活化的例子 你今天對自己的牙齒排列不滿意,想找人矯正 有位無牌照的素人來跟你推銷:牙齒矯正這塊我有在自學,技術我大概都了解,我免費幫你矯正,你讓我賺得經驗,好嗎? 我認為 99% 的人都會拒絕,寧可花10-30萬找人矯正。但明明是免費,為什麼拒絕? 因為這會對個人外表有巨大影響,而且需要後續維護,誰敢這樣把案子給你? 免費,背後同時也釋放一個訊息:我沒把握、我沒自信、我缺經驗、我缺案子、並且後續要不要維護全看我心情、並且你永遠不能說我有誠信問題、也不能告我,因為我沒收錢,而且我一開始就講清楚了 釋放這樣的訊息,導致大多數接觸的客戶都興趣缺缺,並不意外。 你可能想說,我不一樣,我真的願意不收錢、並且把事情做好 那麼你願意簽合約嗎?「甲方支付費用0元。如果乙方後續產出,不符合下列規格要求,乙方賠20萬元。之後每年維護費用也是0元,如果不符合下列條件要求的更新頻率,每年乙方再賠3萬元」 這樣的合約太欺負人,不可能有人簽。老實講,在民法上能不能這樣簽我都很懷疑 ## 消費心理學 vs 經濟學 再講一個,普通人比較難想像的東西 絕大多數人現在思考買賣,會依靠他們在公民課、或者經濟學課上學到的東西 供需關係決定價格、價格越低銷量越好、價格越高銷量越差 然而,一個實際做過銷售、做過生意的人會發現,根本不是這樣 完全一模一樣的產品或服務,在其餘條件都不變的情況下,你把價格從原本的 $299 改成 $99 你用經濟學思考會以為:價格變低、銷量變好,相乘之後,總體銷售額可能更大或更小 但實際上很可能銷量反而更差,總體銷售額就是變差而已 同理,你把價格從原本的 $299 改成 $499 你用經濟學思考會以為:價格變高、銷量變差,相乘之後,總體銷售額可能更大或更小 但實際上很可能銷量完全沒減少,甚至提高,總體銷售額就是更賺錢而已 為什麼?這就是消費心理學、消費行為 對於任何業務、銷售的從業人員,可能都不會意外 但是大多數普通人可能比較難想像、遇到了會深感訝異 定價的設定、如果再加上相關服務內容項目、用字遣詞的調整,影響程度會更大 ## 結論 如果是有親戚朋友、或者熟悉的同事介紹,真的有人沒預算、但又有網站需求 我認為是可以免費幫人做一些簡單的網站,累積一些經驗、作品集這樣 但如果要用免費為主打,去主動業務開發 我認為不太可行 那到底如何銷售?如何經營個人品牌?如何進步到有自信去標準收費、標準服務? 這些都需要慢慢研究,這也是做生意有趣、有挑戰性的地方 請記住,做生意就是,慢慢去弄清楚市場需要什麼、顧客在想什麼的過程 你自己以為怎樣,或者以為什麼對客戶有價值,那都是你以為而已,你的想法並不重要 這是一個需要放下自尊,視野要清晰、需要時間的過程 像原 po 這樣花時間跟多組客戶嘗試,然後失敗的經驗很好,就是學習的一個過程 持續改善銷售能力就對了,做 sales 跟做 coding 說起來也是一樣,trial and error 以上,簡單分享,祝你很快開始接到幾個案子!

想請教一下前端新手工作內容

不好意思打擾各位前輩 我是剛剛入職的新手前端,我想詢問一下前端的工作內容 --- **第一天**上班主管就丟給我一個他們之前開發寫到一半的專案, 要我修客服聊天室連線的問題,demo給我看一下問題出在哪, 之後我把專案打開整個人都麻了,裡面一大堆的文件,我都不知道是做什麼的, 哪個檔案是哪個頁面我都不知道,最後通靈才知道應該是使用SignalR這個套件, 不過我也沒有使用過,只知道他是用來實現ws連線技術的, 最後是下班前兩三個小時,主管自己過來操作讓他可以使用,我在旁邊看的一楞一楞的。 --- **第二天**主管讓我做不同語系,用i18next套件,把網頁上的文字設定到裡面, 這個其實沒問題,有問題的是我不知道哪個頁面對應到哪個檔案,檔案底下的組件又在哪裡, 有時候明明是member資料夾底下的頁面,同一資料夾裡面也有components的資料夾, 但頁面上有時候不只使用到member資料夾底下的組件,還用到了上層資料夾的組件, 我真的不是很明白,所以中午我就問說有沒有開發的流程圖之類的東西, 他只笑著跟我說:[沒有],我最後就一個一個點開,找不到的只能先記事本記錄下來之後在一起問。 --- **第三天**還是再做第二天的事情,但下午主管又丟另一個專案給我,是要修改串API的問題, 說現在有資料但不是他想要的,讓我去跟後端說明他想要什麼資料, 之後就開文件讓我看API是怎麼串的,他好像是把axios封裝起來做了很多處理,講解一下之後, 讓我去翻其他文件是怎麼串的。 --- 想請教一下各位前輩面對前端的工作內容, 我是不是應該在學得更深一點再開始找工作

關於接案這回事

我曾經做過大概三次到四次的接案嘗試 這是有訊息回應的 其他發訊息無回應的就不計算 都是先把網頁寫好 然後聯絡對方 跟對方簡單介紹說 我可以提供這個網頁做為協助 並且不需要收費當作練習 一個是有經營YT的英文家教 有訊息回應 不過後續沒有討論細節 當我丟完示範的頁面(自己找他的一些圖片文章做成的網頁) 後 沒有積極的回應 另一個是某地方的健身房 小工作室 發訊息後對方有回應 老闆的老婆說要跟老闆討論看看 後續無下文 一個是某地方的按摩 新開的 也是已經做完網頁 資訊圖片都是我自己抓完做上去 也弄了swiper去顯示google評論 有到場跟老闆娘說明這個網頁 以及簡單介紹網頁好處 後續也是說要跟老公討論 無下文 再來是某個認識的健身自由教練 是我的一個教練 他有經營自己IG 並沒有在連鎖健身房上班 也有下IG廣告招生 其實非常需要網頁做為個人品牌推廣 我也是已經把他的一些教學圖文或資料丟上去 寫好了網頁 訊息問 也表明無須收費 就是一個經驗 可以給他放在任何頁面當他的官網 但也是被婉拒 說暫時沒有想發展(可是時至今日 他仍然在投放IG廣告 經營IG貼文找學生等等 經歷過這些 我開始在想 似乎這問題不是免費不免費的問題 一方面是他們有種莫名的執著 或者是 我缺少了某個關鍵點去說服他們接收這個網頁 又或者他們真的不需要 這真的是令人感到挺沮喪的 感覺一定是某個過程缺少了什麼 也許我說服力不夠強 但我感到最矛盾的是 明明跟對方溝通過程 了解他們需要拓展 卻很果斷的拒絕了網頁這個東西 也許他們是認為沒幫助...但以我的角度來看 做關鍵字 或是放在他們google商家的"網站"欄位 都是很好的幫助 這真的讓我迷惘很久.......... 我認為這種 找到一個"客人" 幫她完成"需求" 免費提供網頁 對方賺得網站 我賺得經驗 這套流程好像似乎被我驗證不太可行....總之 這是個我還需要理解的領域 是否水很深? 還請各位前輩發表一些經驗談 感恩

[小技巧分享] vue.js 動態替換 iframe src,如何解決 browser history 被修改問題

例如有個 component 如下: ``` vue <template> <iframe :src="url.src"></iframe> </template> <script> export default { data() { return { url: { src: 'https://example.com', }, }; }, }; </script> ``` 這時如果 src 網址變動,iframe 內會顯示新的網頁,同時也會造成 browser history 被修改,也就是點擊瀏覽器的上一頁時,會發現整個網頁沒有跳回上一頁,而是 iframe 回復到舊的網址,但如果這不是你想要的效果呢? vue.js 官方文件介紹 key 的時候提到: > It can also be used to force replacement of an element/component instead of reusing it. 所以答案就是在 iframe 加上動態的 key,key 和 src 同時變動時,vue.js 就會強制替換成新的 iframe,跳過 browser history 被修改的問題,點擊瀏覽器的上一頁就能正常回到前一頁了,範例如下: ``` vue <template> <iframe :key="url.key" :src="url.src"></iframe> </template> <script> export default { data() { return { url: { key: 1, src: 'https://example.com', }, }; }, }; </script> ``` P.S. 參考資料中,文章作者提到 react 也是一樣的處理方式。 參考資料: https://vuejs.org/api/built-in-special-attributes.html https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/ https://stackoverflow.com/questions/821359/reload-an-iframe-without-adding-to-the-history#answer-77278956

✨使用這些工具成為進階 Linux 用戶😎💫

## 簡介 本文列出了開發人員可以在 Linux 電腦上安裝的六種出色工具。 🎉 請隨意探索這些工具,並為這些儲存庫加註星標。開源專案需要您的幫助! 🙏🏻 您準備好成為 **10X Linux 使用者** 了嗎? 🧠 開玩笑,你不會的,😆 但這些工具絕對可以加快你的日常工作量。 🏃🏻‍♂️💨 ![笑 GIF](https://media.giphy.com/media/3o72FfM5HJydzafgUE/giphy.gif) *** **1. [Ngrok](https://ngrok.com/)** > 💡 安全地在線上公開本機伺服器。 ![ngrok cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5rk3ko7fn4w8uvye1de.jpg) Ngrok 可協助您為本機 Web 伺服器建立公用 URL 🌐,以便您可以與團隊成員、客戶或全世界分享您正在進行的工作。 🌍 只需執行一個簡單的命令,Ngrok 就會啟動一條從公共端點到您的電腦的安全隧道。這使您可以在「localhost」上測試網站、應用程式和 API,而無需部署任何內容。 Ngrok 支援 HTTP 和 TCP 流量,因此您幾乎可以透過隧道傳輸任何內容 - Web 伺服器,甚至間接資料庫。它還提供有用的功能,例如自訂子網域和重播/檢查流量。 Ngrok 在以下主要領域提供協助: - 暫時分享一個僅在您的開發機器上執行的網站🖥️。 <br/> - 開發任何使用 webhook 的服務 🪝。 <br/> - 透過檢查網路流量來除錯 🧑‍💻 網路服務。 > ✨ 我不常使用這個工具,但我記得幾年前我第一次使用這個工具是為了向我的朋友展示我在本地建立的網站。 https://github.com/inconshreveable/ngrok 🌟 GitHub 上的 ngrok *** **2. [fzf](https://github.com/junegunn/fzf)** > 💡 命令列模糊查找器。 ![fzf cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0m9bdx5v5chokkc3ni3.jpg) 對於那些花費大量時間在終端工作的人來說,Fzf 是一個有用的工具🖥️。它可作為模糊查找器,可讓您快速搜尋並過濾檔案、命令歷史記錄、git 提交等資料清單。 這是它的工作原理。當您執行“fzf”命令時,它會在您鍵入時立即過濾下面的列表,以僅顯示匹配的結果。 這是一個可能的用例。 😯 ``` ls -la | fzf ``` ![fzf 工具使用案例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58xp7w58iahqf62mk285.png) 這種互動式方法使您可以快速輕鬆地找到所需內容,即使在長列表中也是如此。模糊匹配意味著它將找到部分匹配,因此您不必輸入全名。 🤯 https://github.com/junegunn/fzf 🌟 GitHub 上的 fzf *** **3. [Z](https://github.com/rupa/z)** > 💡 在不知道整個路徑的情況下跳轉目錄。 ![z cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a2mhiv09d5qomevhfan.jpg) 您是否曾經處理過具有深層巢狀資料夾結構的專案,並且必須不斷使用 cd 命令鍵入長目錄📂路徑? Z 解決了這個問題。 😉 一旦您安裝並開始使用 Z,它就會追蹤您最常存取的目錄。然後,您可以輸入一個短名稱來立即跳轉 🦘 到該資料夾,而不是輸入完整路徑。 ![Z工具使用](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cvmisaqr0vkkmdkthx1.jpg) Z 使用**兩個因素**來決定要為您追蹤哪些目錄:您存取資料夾的**頻率**以及您最近**存取該資料夾的方式。 因此,您最常使用的資料夾將獲得最短的名稱。 https://github.com/rupa/z 🌟 GitHub 上的 Z *** **4. [遊俠](https://github.com/ranger/ranger)** > 💡 受 VIM 啟發的控制台檔案管理器。 ![ranger cli 檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b396pdtrppbtdinamrts.jpg) Ranger 是一個**受 vim 啟發的**檔案管理器👮🏻,帶有控制台介面。它提供了一種易於使用且高效的方式來導航和檢視檔案系統。 Ranger 的一些主要特點是: - 多欄✨顯示 <br/> - 預覽所選檔案/目錄的📂 <br/> - 常見檔案操作(`create/chmod/copy/delete`/...) <br/> - 一次重新命名多個文件 <br/> - 類似 VIM 的控制台和熱鍵 ⌨️ ![ranger cli 檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6d6m0lu91gkyi88ti7y0.png) https://github.com/ranger/ranger 🌟 GitHub 上的 Ranger *** **5. [Ncdu](https://www.howtoing.com/ncdu-a-ncurses-based-disk-usage-analyzer-and-tracker/)** > 💡 查看 Linux 系統上使用的檔案和磁碟空間。 Ncdu 是一個有用的命令列工具,可以幫助您有效地管理磁碟空間。 它以直觀方式顯示磁碟機上的空間使用情況,使您可以輕鬆辨識佔用最多空間的大檔案和資料夾。 當您執行 Ncdu 時,它會掃描您的檔案系統並在終端機中顯示互動式列表,向您顯示磁碟機上的每個資料夾以及它們使用了多少空間。您可以導航此清單以深入查看並查看子資料夾的空間使用情況📂。 ![ncdu cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70889hif0ue5w7ev04vu.png) 其簡單的介面使其易於使用,但功能強大,可用於分析磁碟使用情況和最佳化儲存。 如果您遇到磁碟空間💾填滿的問題,Ncdu 可以成為一個方便的工具來辨識罪魁禍首並採取行動。 👮🏻 *** **6。 [Exa](https://github.com/ogham/exa)** - _最好有_ > 💡 `ls` 指令的多彩替換。 ![exa cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tykdqcgsnqdqcku9j8ro.jpg) > 🚨 Exa 現已不再維護,請使用 [eza](https://github.com/eza-community/eza)。它是 exa 的一個分支,增加了一些功能。但我仍在使用 Exa,而且效果很好。它們幾乎是一樣的。 Exa 是舊的「ls」指令的現代替代品,您在終端機中使用該指令列出檔案和資料夾。它為您提供當前目錄中更豐富多彩、詳細且易於閱讀的文件清單。 當您執行 **exa** 而不是 `ls` 時,您會看到一些不錯的改進。首先,它使用不同的顏色和圖示(啟用或停用)對文件類型進行顏色編碼💬,從而更容易一目了然地在視覺上區分文件。 它還會向您顯示額外的訊息,例如文件權限、所有者、大小等。 ![exa cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dn2d0k7kgqkjp56a4ykl.png) https://github.com/ogham/exa 🌟 GitHub 上的 Exa *** > 如果您認為本文中未提及的任何其他方便的工具,請在下面的評論部分中分享。 👇🏻 那麼,這就是本文的內容。非常感謝您的閱讀! 🎉🫡 https://dev.to/shricodev --- 原文出處:https://dev.to/shricodev/be-a-10x-linux-user-with-these-tools-3g1f

程式設計師的 5 個殺手級網站 💎

**嘿,編碼員!** 我想分享一些我發現的最酷的網站,它們確實可以節省您的時間並幫助提高您的編碼技能。 每一款都有獨特且免費的東西。 那麼就讓我們從👇開始吧 ## 1. [HTMLrev.com💎](htmlrev.com) ![htmlrev.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2z3wigsyjyj5jnhzsxz.jpeg) 這個網站真的很棒,他們在每個類別(如登陸頁面、部落格、作品集、電子商務和儀表板)上收集了**1000 多個免費HTML 模板**,其中包含大量使用HTML、CSS、 TailwindCSS 和JavaScript 等 必須結帳一次🤓。 ## 2. [uiverse.io✨](uiverse.io) ![uiverse.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ta889ycbtkejeawz9ts.jpeg) UIverse 擁有超過 **3000 多個免費 CSS 和 Tailwind 元素**,您可以在專案中使用,例如按鈕、表單、載入器等。 其他開發者也貢獻了它們,因此品質非常好 ⭐。他們甚至有程式碼片段可供複製。 這麼大的圖書館竟然免費! ## 3.[exercism.io💪](exercism.io) ![exercism.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8818q7g50gg2y8dnrb1x.jpeg) 這對於**練習特定的編碼挑戰**非常有用。他們有超過 3500 個簡短的練習,分成不同的語言。 對解決方案進行編碼後,您可以提交它以獲得自動回饋並與導師配對。 這是學習新技能和更好地進行除錯的有趣😅方式。 ## 4. [quickref.me💭](quickref.me) ![quickref.me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2n7i5wgmcfxazbl8q37x.jpeg) 需要**您剛接觸的語言**的語法快速參考嗎?這個☝網站非常完美。 他們的備忘錄涵蓋了從 Python 和 JavaScript 到 Vim 和 Markdown 的所有內容。 當您遇到困難時,您可以隨時搜尋它們。真的很方便! ## 5. [resume.io📝](resume.io) ![resume.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orm4q934p9wgtk9sd79a.jpeg) 當您準備好建立您的編碼作品集時,**此網站可協助您建立專業的履歷**。😎 他們為開發人員、設計師等提供精美的客製化模板。您只需輸入您的訊息,它就會產生高品質的 PDF。 非常適合申請實習或工作! ## 很快再見👋 **感謝您閱讀這篇部落格🙏**,我希望這能為您提供一些新的地方來了解程式設計師朋友! _如果您發現任何其他有用的網站,請發表評論📩。_ 並且不要忘記加上“💖🦄🔥” https://github.com/taqui-786 關注Github✅ ## 快樂編碼😊 --- 原文出處:https://dev.to/random_ti/5-killer-websites-for-coders-a7

🎁 100 倍速尋找開源專案的方法

今天,我提供了 **8 種方法**,可以幫助您找到 **夢想的開源專案**。 在深入研究如何找到開源專案的細節之前,讓我們先了解開源的含義。 ## 開源不僅僅是合併 PR 在我們聯繫比以往任何時候都更加緊密的世界中,成為開源社群的一部分可能是釋放新機會和實現個人成長的關鍵。 對我來說,這是一個無需工作就能做出改變的機會,對數百萬用戶產生影響。 你**編碼**。 **合作**。 **網路**。 但最重要的是,我們歡迎您,並且您一直與經驗豐富的人互動。 提示:為了長期利益,選擇好的組織而不是個人儲存庫。 --- 我已經提出了_200+ Pull Requests_並參與了_400多個討論_,所以我熟悉好的開源專案的要求和標準。 大多數人都在努力解決如何找到好的開源專案的問題。本文提供了許多適合您的選項。 --- ## 1. [GitHub 趨勢](https://github.com/trending) 您可以根據「口語」、「程式語言」和「日期」來尋找趨勢儲存庫。 這些都是可以提高您在開源社群中的可信度和聲譽的精英儲存庫。 - https://github.com/trending - 趨勢儲存庫 ![熱門 GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03drf9tjt67gwsr7yfgz.png)   ## 2. [GitHub 進階篩選器](https://github.com/search?q=c%2B%2B&type=repositories) 如果您想完全控制搜尋,那麼此選項非常適合您。 您可以使用 60 多個選項進行過濾,包括“語言”、“星星數”、“分叉數”、“許可證”、“問題”,甚至“提交”。 ![進階過濾頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toohfew0pjd3ojd9bk0r.png)   ## 3. [Good First Issues](https://goodfirstissue.dev/) 如果您從開源開始,請不要使其變得更加複雜。 請記住,適合新貢獻者的問題通常被標記為“好第一個問題”或“需要幫助”,幫助您對開源做出第一個貢獻。 您可以透過友善的使用者介面選擇您喜歡的“語言”,從而找到幾個不錯的首要問題。 - https://goodfirstissue.dev - 好第一期 ![好第一期](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3faadrwr8bnujfhw13uf.png)   ## 4. [搶奪](https://up-for-grabs.net/) 該選項是尋找優秀開源專案的最受歡迎的網站之一。 您可以按“名稱”和“標籤”進行過濾,例如“good first issues”,並探索“流行標籤”,例如“opencv”和“android”。此外,您還可以檢查儲存庫上次更新的時間。 - https://up-for-grabs.net/ - 可供搶購 ![可供爭奪](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsr83808vdwi3sot93qu.png)   ## 5. [首次貢獻](https://firstcontributions.github.io/) 一個網站,您可以使用您的首選“語言”作為過濾器從預定義列表中搜尋專案。 - https://firstcontributions.github.io/ - 第一個貢獻 ![首次貢獻](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c3emvto8n69xgwrzjlw.png)   ## 6. [奎因](https://quine.sh/contribute) Quine 透過為開源做出貢獻,幫助您將聲譽貨幣化。他們有自己的排行榜、任務和許多創新功能。 您可以在不註冊的情況下搜尋專案,但我強烈建議您註冊並探索。 突出的功能是它顯示 PR 合併時間(以小時為單位),顯示當月有多少新貢獻者,並詳細說明問題類型。它提供了有關該專案的清晰想法。 - https://quine.sh/contribute - 奎因 ![奎因](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp03znznmlaojz4j8gmr.png) 您甚至可以將小部件加入到您的個人資料中。那麼,繼續探索吧。 ![quine 小工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7f42an9lpirq9o6suve5.png)   ## 7. [OpenSauced](https://app.opensauced.pizza/) 有許多統計資料可以增加可信度,提供相關的過濾選項,例如「前 100 個儲存庫」、「最少 5 個貢獻者」、「最近」和「最活躍」。 您可以查看“PR 速度”和“PR 概述”,並使用語言或標籤進行過濾。 - https://app.opensauced.pizza/ - OpenSauced ![OpenSauced](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5xzm8j37s92nz9yfb91.png) 在讓 Open Sauced 脫穎而出的所有功能中,它推薦了一些適合您的開源之旅的優秀儲存庫。 ![建議](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfhkdarneeccba5rjw2a.png) 還有更多功能,例如建立突出顯示以追蹤所選儲存庫中的活動。   ## 8. [GSOC 組織](https://www.gsocorganizations.dev/) 根據我的經驗,我可以說為組織做出貢獻的好處遠遠超過個人儲存庫。 您一定聽過 Google Summer of Code,有信譽良好的組織參與其中。 在這裡,您可以探索 Google Summer of Code 中所有接受的組織的清單及其「技術堆疊」以及按「主題」和「類別」過濾的選項。 - https://www.gsocorganizations.dev/ - GSOC 組織 ![GSOC 組織](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eabd8qyf8rg976al93oe.png) --- > 如果您熱衷於贊助這篇文章,請給我發訊息 [email protected] 或在 Twitter 上聯繫我! 🚀 如果您有一些很棒的建議,請發表評論,我很樂意將它們加入到帖子中。 誰知道?您可能會發現新的熱情,結交終生的朋友,並實現超越您最瘋狂夢想的個人成長。因此,踏出第一步,為開源社群做出貢獻。世界在等你。 如果您喜歡我的內容,請在我的 GitHub 和 Twitter 上關注我以表達您的支持: - [GitHub](https://github.com/Anmol-Baranwal) - 繼續建造和創作! - [推特](https://twitter.com/Anmol_Codes) - [LinkedIn](https://www.linkedin.com/in/Anmol-Baranwal/) --- 原文出處:https://dev.to/anmolbaranwal/shortcut-to-find-open-source-projects-100x-faster-3lje

面試時必須了解的 10 個系統設計概念

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![面試時必須了解的 10 個系統設計概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxdldzd09fwws7nve36.png)](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 您好,作為開發人員,充分理解基本系統設計概念對於開發可擴展、可靠和高效能的軟體系統至關重要。 [**系統設計**](https://medium.com/javarevisited/7-system-design-problems-to-crack-software-engineering-interviews-in-2023-13a518467c3e)涉及設計軟體系統的體系結構和元件,以滿足特定要求並實現所需的性能特徵。 隨著技術的快速進步和軟體應用的複雜性不斷增加,掌握系統設計概念對於程式設計師建立高效且有效的系統至關重要。 在上幾篇文章中,我回答了流行的系統設計問題,例如[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),今天,我們將看看每個程式設計師都應該學習的 10 個關鍵系統設計概念。 這些概念為設計能夠處理大規模資料、容納並髮用戶並提供最佳效能的軟體系統奠定了堅實的基礎。 無論您是初學者還是經驗豐富的開發人員,了解這些系統設計概念都將使您能夠建立強大且可擴展的軟體系統,以滿足現代應用程式的需求。那麼,讓我們深入探討這些基本的系統設計原則吧! 順便說一句,如果您正在準備系統設計面試並想深入學習系統設計,那麼您還可以查看[**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)等網站,它們有許多很棒的系統設計課程 以下是每個程式設計師都應該考慮學習的 10 個重要的系統設計概念: 1. **可擴展性** 2. **可用性** 3. **可靠性** 4. **容錯能力** 5. **快取策略** 6. **負載平衡** 7. **安全** 8. **可擴展的資料管理** 9. **設計模式** 10. **效能最佳化** 理解和應用這些系統設計概念可以幫助程式設計師和開發人員建立強大的、可擴展的、高效能的軟體系統,以滿足現代應用程式和使用者的需求。 現在,讓我們深入研究它們中的每一個並了解它們是什麼以及如何在您的應用程式中實現它們。 ### 1. 可擴展性 可擴展性是指系統或應用程式處理不斷增加的工作負載或使用者而不顯著降低效能或功能的能力。 它是系統設計中的一個重要概念,因為它允許系統成長並適應不斷變化的需求,**例如增加的資料量、使用者流量或處理需求,**而不會遇到效能瓶頸或限制。 在現代運算環境中,系統需要處理大量且不斷成長的資料和用戶,可擴展性至關重要。例如,流行的網站、行動應用程式和基於雲端的服務需要能夠同時處理數百萬甚至數十億個請求,而分散式資料庫和大資料平台需要擴展以處理 PB 或 EB 的資料。 對於需要適應尖峰負載的系統來說,可擴展性也很重要,例如假期期間的線上購物或因病毒事件導致的用戶活動突然激增。 > 可擴展性主要有兩種:**垂直可擴展性和水平可擴展性**。垂直可擴展性涉及向單一伺服器或節點加入更多資源(例如 CPU、記憶體或儲存)以處理增加的工作負載。另一方面,水平可擴展性涉及向系統加入更多伺服器或節點以分配工作負載並處理增加的需求。 水平可擴展性通常透過[負載平衡](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、分區和分散式處理等技術來實現。 實現可擴展性需要仔細的系統設計、架構和實作。它涉及設計能夠有效處理不斷增加的工作負載、有效利用資源、最大限度地減少依賴性以及跨多個節點或伺服器分佈處理的系統。 > 快取、非同步處理、平行處理和分散式資料庫等技術通常用於提高可擴展性。測試和效能監控對於確保系統在擴展時繼續保持良好效能也至關重要。 可擴展性是建立強大的高效能係統的重要考慮因素,這些系統可以處理成長並適應隨時間變化的需求。它使系統能夠滿足不斷增長的需求,提供無縫的用戶體驗,並支援業務成長,而不會遇到效能限製或停機。 這是來自[**ByteByteGo**](https://bit.ly/3P3eqMN)的一個很好的圖表,這是準備系統設計面試的好地方,它顯示了[*垂直擴展和水平擴展之間的區別*](https://medium.com/javarevisited/difference-between-horizontal-scalability-vs-vertical-scalability-67455efc91c) [![水平縮放與垂直縮放](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd4vz64i6vywjpopepku.png)](https://bit.ly/3P3eqMN) --- ### 2. 可用性 可用性是指軟體系統即使在發生故障或中斷時也能保持運作並可供使用者存取的能力。 高可用性是許多系統的關鍵要求,特別是那些任務關鍵型或時間敏感型系統,例如線上服務、電子商務網站、金融系統和通訊網路。 此類系統的停機可能會導致重大的財務損失、聲譽受損和客戶不滿。因此,保證高可用性是系統設計時重點考慮的問題。 可用性通常**使用正常運作時間(衡量系統運作時間的百分比)和停機時間(衡量系統不可用的時間)等指標**來量化。 實現**高可用性涉及設計具有冗餘、容錯和故障轉移機制的系統**,以最大限度地降低因硬體故障、軟體故障或其他意外事件而導致停機的風險。 > 在系統設計中,採用了各種技術和策略來提高可用性,例如負載平衡、叢集、複製、備份和復原、監控和主動維護。 實施這些措施是為了最大限度地減少單點故障、檢測故障並從故障中恢復,並確保系統即使在發生故障或中斷時也能保持運作。 透過設計具有高可用性的系統,工程師可以確保系統可以長時間存取和執行,從而提高客戶滿意度、減少停機時間並提高業務連續性。 [![系統設計中的高可用性](https://miro.medium.com/v2/resize:fit:546/0*SnLVBPu0JGx4N9F7.gif)](https://www.linkedin.com/pulse/top-20-system-design-interview-questions-answers-soma-sharma-g0pqc/) --- ### 3、可靠性 可靠性是指**軟體系統在交付預期結果時的一致性和可靠性**。建立具有可靠元件、錯誤處理機制和備份/復原策略的系統對於確保系統按預期運作並產生準確的結果至關重要。 可靠性是系統設計的關鍵因素,因為它直接影響系統的整體性能和品質。可靠的系統應始終按預期執行,不會出現意外故障、錯誤或中斷。 **關鍵任務應用通常需要高可靠性,**因為系統故障可能會造成嚴重後果,例如在航空、醫療保健、金融和其他安全關鍵領域。 可靠性通常使用各種指標來量化,例如**平均故障間隔時間 (MTBF)** (測量故障之間的平均持續時間)和故障率 (FR)(測量一段時間內故障發生的速率)。 > 可靠性可以透過各種技術和策略來實現,例如冗餘、錯誤檢測和糾正、容錯和穩健設計。 在系統設計中,要實現高可靠性需要仔細考慮各種因素,包括元件品質、系統架構、錯誤處理、容錯機制、監控和維護策略。 透過**設計高可靠性的系統**,工程師可以確保系統始終如一地按預期執行,從而提高客戶滿意度、減少停機時間並提高系統效能和可用性。 --- ### 4. 容錯性 容錯是指系統或元件在故障或故障(例如硬體故障、軟體錯誤或其他不可預見的問題)時繼續正常運作的能力。 容錯系統旨在檢測、隔離故障並從故障中恢復,而不會完全故障或停機。 容錯是系統設計中的重要概念,特別是在分散式系統或需要在具有挑戰性的環境中可靠運作的系統中。 它涉及實現冗餘、錯誤檢測、錯誤糾正和錯誤恢復機制,以確保即使某些元件或子系統發生故障,系統也能繼續運作。 > 有多種技術和策略可以實現容錯,例如**複製**,即在不同位置維護相同資料或服務的多個副本,以便在一個發生故障時,其他副本可以接管;檢查點,定期保存系統狀態,以便在發生故障時,系統可以恢復到先前已知的良好狀態;優雅降級,即係統在故障時可以繼續執行,但功能會減少。 容錯對於確保系統的高可用性、可靠性和彈性至關重要,特別是在系統故障可能造成嚴重後果的關鍵任務應用程式中。 透過在系統設計中納入容錯機制,工程師可以建立強大且可靠的系統,即使在遇到意外故障時也可以繼續運作並提供預期結果。 [![系統設計中的容錯](https://miro.medium.com/v2/resize:fit:609/0*AKUPawvM6q1K8utM.jpg)](https://bit.ly/3P3eqMN) --- ### 5. 快取策略 快取策略是一種用於優化系統效能的技術,它透過將經常存取的資料或結果儲存在稱為快取的臨時儲存位置中,以便可以快速檢索資料,而無需重新計算或從原始來源取得。 系統設計中常用的快取策略有以下幾種: 1. **完全緩存** 在此策略中,整個資料集或結果都會快取在快取中,提供對所有資料或結果的快速存取。當資料或結果相對較小且可以輕鬆儲存在記憶體或本地快取中時,此策略非常有用。 2. **部分快取** 在此策略中,通常基於使用模式或頻繁存取的資料,僅快取資料或結果的子集。當資料或結果規模很大,或並非所有資料或結果都被頻繁存取,並且快取整個資料集不可行時,此策略很有用。 3. \*\*基於時間的到期時間 在此策略中,資料或結果被快取特定的時間,之後快取被認為是陳舊的,並且資料或結果從原始來源獲取並在快取中更新。當資料或結果相對穩定且不經常變化時,此策略很有用。 4. **LRU(最近最少使用)或 LFU(最不常使用)替換策略** 在這些策略中,最近最少使用或最不頻繁使用的資料或結果被從快取中逐出,以為新資料或結果騰出空間。當快取的儲存容量有限且需要驅逐不常存取的資料以容納新資料時,這些策略非常有用。 5. **直寫式或後寫式緩存** 在這些策略中,資料或結果在更新或插入時寫入快取和原始來源(直寫)或僅寫入快取(後寫)。當系統需要保持快取和原始來源之間的一致性或原始來源無法直接更新時,這些策略就非常有用。 6. **分散式快取** 在此策略中,快取分佈在多個節點或伺服器上,通常使用分散式快取框架或技術。當系統跨多個節點或伺服器分佈或擴展並且需要保持分散式快取的一致性和效能時,此策略就非常有用。 7. **自訂快取** 可以根據系統或應用程式的特定要求和特徵來實施自訂快取策略。這些策略可能涉及上述策略或其他自訂方法的組合,以滿足系統的獨特需求。 選擇*合適的快取策略取決於資料或結果的大小、存取頻率、資料或結果的易變性、儲存容量、一致性要求以及系統的效能目標等多種因素*。仔細考慮和實施快取策略可以顯著提高系統效能、降低資源利用率、提高可擴展性並增強使用者體驗。 [![系統設計的快取策略](https://miro.medium.com/v2/resize:fit:609/0*vm4O76NLJuhVu68G)](https://bit.ly/3P3eqMN) --- ### **6.負載平衡** 負載平衡是分散式系統或網路中使用的技術,用於在多個伺服器或資源之間均勻分配傳入的網路流量或工作負載,確保沒有任何單一伺服器或資源因過多的流量或工作負載而不堪負荷。 負載平衡的目的是優化資源利用率,最大化系統可用性,提高系統整體效能和可靠性。在微服務架構中, [*負載平衡和 API 閘道*](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)通常指的是相同的,但事實並非如此,API 閘道可以做更多的事情,如[本文](https://medium.com/javarevisited/what-is-api-gateway-pattern-in-microservices-architecture-what-problem-does-it-solve-ebf75ae84698)所述。 負載平衡可以透過各種演算法或方法來實現,例如: 1. **循環:**傳入請求以輪流方式依序分發到每個伺服器或資源,確保所有伺服器或資源之間的流量平均分配 2. **最少連線:**傳入請求分發到活動連線數最少的伺服器或資源,確保負載最少的伺服器或資源接收新請求。 3. **來源 IP 關聯性:**來自相同客戶端 IP 位址的傳入請求將導向至相同伺服器或資源,確保來自特定用戶端的請求始終由相同伺服器或資源處理。 4. **加權循環:**傳入請求根據分配給每個伺服器或資源的預定義權重進行分配,從而允許根據伺服器或資源容量或功能採用不同的流量分配比率。 5. **自適應負載平衡:**負載平衡演算法根據伺服器或資源健康、效能或其他指標的即時監控,動態調整流量分配,確保最佳的資源利用率和系統效能。 負載平衡可以使用基於硬體的負載平衡器、基於軟體的負載平衡器或基於雲端的負載平衡服務來實現。 它在具有高流量負載或資源密集型工作負載的分散式系統或網路中發揮著至關重要的作用,可以實現資源的高效利用,增強系統的可用性和可靠性,並提供無縫的用戶體驗。 這裡還有一個來自[DesignGuru.io](https://bit.ly/3pMiO8g)的漂亮圖表,這是一個學習面試準備系統設計的優秀網站,它強調了負載平衡器和 API 閘道之間的區別: [![負載平衡器和API網關之間的區別](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi0uzsaryydef7es0dmv.jpg)](https://bit.ly/3pMiO8g) --- ### **7. 安全** 系統設計中的安全性是指考慮和實施保護系統免受潛在安全威脅、漏洞或攻擊的措施。 它涉及設計和實施具有內建安全功能和實踐的系統,以防止未經授權的存取、資料外洩、資料外洩、惡意軟體攻擊和其他安全風險。 系統設計中的安全性通常涉及以下原則: 1. **身份驗證:**確保使用者或實體經過驗證並根據其身分和憑證被授予適當的存取權限。 2. **授權**:實施存取控制和權限,限制使用者或實體存取未經授權的資源或執行未經授權的操作。 3. **加密**:透過使用加密技術來保護敏感資料,以防止未經授權的存取或資料外洩。 4. **稽核和日誌記錄**:實施機制來追蹤和記錄系統活動和事件,以用於監視、稽核和取證目的。 5. **輸入驗證:**驗證和清理所有輸入資料,以防止常見的安全漏洞,例如 SQL 注入、跨站腳本 (XSS) 和跨站請求偽造 (CSRF) 攻擊。 6. **修補程式和更新**:使用最新的安全性修補程式和更新使系統保持最新狀態,以解決已知的安全漏洞。 7. **深度防禦**:實施多層安全控制,例如防火牆、入侵偵測系統和防毒軟體,以提供針對安全威脅的多層防禦。 8. **最小權限原則**:將使用者或實體的存取權限限製到執行其任務所需的最低限度,減少安全漏洞或攻擊的潛在影響。 9. **安全通訊**:使用安全通訊協定(例如 HTTPS 或 SSL/TLS)來保護傳輸中的資料免於攔截或竊聽。 系統設計中的安全性對於保護資料和資源的完整性、機密性和可用性以及確保系統的整體安全狀況至關重要。應考慮並納入系統的設計、開發和部署階段,以減輕潛在的安全風險並防範安全威脅。 --- ### **8. 可擴展的資料管理** 可擴展的資料管理是指系統或應用程式有效處理不斷增長的資料量而不會出現效能下降或功能遺失的能力。 它涉及設計和實施資料管理實務和技術,這些實務和技術可以處理不斷增加的資料量、使用者負載和處理要求,同時保持可接受的效能和可靠性水準。 可擴展的資料管理通常涉及以下原則: 1. **資料分區:**將大型資料集分割成更小的、可管理的區塊或分區,以將資料分佈在多個儲存或處理資源上。這有助於減少單一資源的負載,並允許並行處理和提高效能。 2. **分散式資料庫系統:**使用分散式資料庫或資料儲存解決方案,可以將資料分佈在多個節點或伺服器上,從而實現水平擴展並提高效能。 3. **資料複製**:跨多個節點或伺服器複製資料,以確保資料可用性和容錯性。這可能涉及資料鏡像、資料分片或資料快取等技術,以提高效能和可靠性。 4. **快取和記憶體中資料儲存:快取**經常存取的資料或將資料儲存在記憶體中,以便更快地檢索和處理,減少對昂貴的磁碟 I/O 操作的需求並提高效能。 5. **索引和查詢最佳化**:使用高效的索引和查詢最佳化技術來加速資料檢索和處理操作,尤其是在大型資料集中。 6. **資料壓縮:**實施資料壓縮技術以減少儲存佔用空間並提高資料傳輸效率,特別是對於大型資料集。 7. **資料歸檔和清除**:實施資料歸檔和清除實踐以刪除或歸檔舊的或不經常存取的資料,減少儲存和處理開銷並提高效能。 8. **可擴展的資料處理框架:**使用可擴展的資料處理框架,例如 Apache Hadoop、Apache Spark 或 Apache Flink,可以分散式並行方式處理大規模資料處理和分析任務。 9. **雲端的資料管理**:利用雲端的資料管理服務,例如 Amazon S3、Amazon RDS 或 Google Bigtable,提供可擴充和託管的資料儲存和處理功能。 10. **監控和可擴展性測試**:定期監控系統效能並進行可擴展性測試,以辨識和解決效能瓶頸、資源限製或其他可擴展性挑戰,並確保資料管理實踐能夠有效處理不斷增長的資料量和負載。 簡而言之,可擴展的資料管理對於需要處理大量資料、使用者負載和處理要求的現代應用程式和系統至關重要。 它使系統能夠成長並適應不斷變化的需求,而無需犧牲效能或可靠性,從而確保資料管理實踐能夠有效地處理不斷增加的資料量和負載。 --- ### **9. 設計模式** 系統設計中的[設計模式](https://medium.com/javarevisited/top-10-microservice-design-patterns-for-experienced-developers-f4f5f782810e)是指用於解決軟體系統開發過程中遇到的常見設計挑戰或問題的可重複使用解決方案或最佳實踐。 [設計模式](https://medium.com/javarevisited/21-software-design-pattern-interview-questions-and-answers-b7d1774b5dd2)是被廣泛接受和經過驗證的設計和架構軟體系統的方法,它們為設計高效、可維護和可擴展的系統提供了一組明確的指南。 系統設計中的設計模式可分為多種類型,包括: 1. **建立模式:**這些模式專注於物件建立機制,並提供以靈活且可重複使用的方式建立物件的方法。建立模式的範例包括 Singleton、Factory Method、Abstract Factory、Builder 和 Prototype 模式。 2. **結構模式:**這些模式著重於類別和物件的組織以形成更大的結構或系統。結構模式的範例包括適配器、橋、複合、裝飾器和外觀模式。 3. **行為模式:**這些模式著重於系統內物件或元件之間的互動和通訊。行為模式的範例包括觀察者、策略、命令、迭代器和模板方法模式。 4. **架構模式:**這些模式為設計系統的整體架構提供了高階指南和策略。架構模式的範例包括模型-視圖-控制器 (MVC)、模型-視圖-視圖模型 (MVVM)、分層架構、微服務和事件驅動架構模式。 設計模式在系統設計中非常重要,因為它們提供了經過驗證的標準化方法來解決常見的設計挑戰、提高程式碼品質並確保軟體系統的可維護性和可擴展性。 它們促進程式碼的可重複使用性、關注點分離和功能封裝,從而更容易管理複雜的系統並使其適應不斷變化的需求。 透過使用設計模式,開發人員可以利用現有知識和最佳實踐來設計強大而高效的系統,以滿足使用者和利害關係人的需求。 在過去的幾篇文章中,我還討論了常見的微服務設計模式,如[**事件來源**](https://medium.com/javarevisited/what-is-event-sourcing-design-pattern-in-microservices-architecture-how-does-it-work-b38c996d445a)**、** [**CQRS**](https://medium.com/javarevisited/what-is-cqrs-command-and-query-responsibility-segregation-pattern-7b1b38514edd) \*\*、SAGA\*\*、 [**每個微服務的資料庫**](https://medium.com/javarevisited/what-is-database-per-microservices-pattern-what-problem-does-it-solve-60b8c5478825)**、** [**API 閘道**](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [**斷路器**](https://medium.com/javarevisited/what-is-circuit-breaker-design-pattern-in-microservices-java-spring-cloud-netflix-hystrix-example-f285929d7f68),並分享了[*設計微服務的最佳實踐*](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f),您也可以查看這些文章以了解有關微服務通訊的更多訊息,包括同步和非同步通訊。 --- ### 10. 性能 雖然我們已經知道效能意味著什麼,但還記得速度慢的筆記型電腦嗎?在系統設計中,效能是指軟體系統處理資料和交付結果的速度、反應能力和效率。 透過高效的演算法、快取、索引和其他技術來優化系統效能對於建立能夠處理大規模資料處理並提供最佳回應時間的系統至關重要。 系統設計中的效能是指軟體系統或應用程式有效率且有效地執行其預期功能或任務,同時滿足效能要求和期望的能力。它涵蓋了系統的回應時間、吞吐量、資源利用率、可擴展性和效率等各個方面。 效能是系統設計中的關鍵因素,因為它直接影響使用者體驗、系統可靠性和整體系統效率。效能不佳的系統可能會導致反應時間慢、吞吐量低、資源利用率高以及系統資源使用效率低下,導致系統效能下降和使用者不滿意。 系統設計人員在設計過程中需要考慮各種與效能相關的因素,例如選擇適當的演算法和資料結構、最佳化程式碼、最大限度地減少不必要的開銷、有效管理系統資源以及確保正確的系統配置和調優。 效能測試和分析技術還可用於辨識和解決效能瓶頸並優化系統效能。 優化系統設計中的效能需要在功能、複雜性和資源利用率之間進行仔細的平衡。它涉及做出明智的設計決策、使用最佳實踐以及持續監控和優化系統性能,以確保系統滿足其性能要求並提供流暢高效的用戶體驗。 ### 結論 這就是面試的基本系統設計概念。理解和掌握這些關鍵的系統設計概念對於程式設計師建立健壯、可擴展且高效的軟體系統至關重要。 這些概念,包括容錯、可靠性、可用性、快取策略、負載平衡、安全性、可擴展資料管理、設計模式和效能,在確保軟體系統滿足其預期目標、最佳執行並提供卓越的效能方面發揮著關鍵作用。 透過對這些系統設計概念的深入理解,您可以做出明智的設計決策,選擇適當的技術和技巧,並優化系統效能。 它還允許您設計具有彈性、可擴展、安全和高效的系統,能夠應對現代軟體開發的挑戰並滿足最終用戶的期望。 順便說一句,如果您正在*準備系統設計面試*並想要深入學習系統設計,那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**DesignGuru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站,它們有許多很棒的系統設計課程,如果您需要免費的系統設計課程您也可以查看下面的文章。 --- 原文出處:https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii