🔍 搜尋結果:CSS

🔍 搜尋結果:CSS

僅使用 HTML 和 CSS 建立側邊欄選單

如果您是 Web 開發新手,您可能在不同網站上看過[側邊欄](https://www.codingnepalweb.com/category/sidebar-menu/)。您是否想知道它們是如何僅使用 HTML 和 CSS 建立的?僅使用 HTML 和 CSS 製作側邊欄是學習網頁設計基礎知識和獲得實務經驗的好方法。 在這篇文章中,我將指導您僅使用[HTML](https://www.codingnepalweb.com/?s=html)和[CSS](https://www.codingnepalweb.com/category/html-and-css/)建立響應式側邊欄。最初,側邊欄將被隱藏,僅顯示每個連結的圖示。但是,將滑鼠懸停在側邊欄上將平滑展開以顯示與每個圖示關聯的連結。 為了建立這個側邊欄,我們將使用基本的 HTML 語意元素,例如`<aside>` 、 `<ul>` 、 `<li>`和`<a>`以及常見的 CSS 屬性來設定其樣式。這是一個簡單的專案,因此您應該毫無困難地遵循這些步驟或理解程式碼。 HTML 和 CSS 中的響應式側邊欄選單影片教學 ------------------------- https://www.youtube.com/watch?v=VU74s-XAn7M 如果您喜歡從影片教學中學習,上面的 YouTube 影片是一個很好的資源。在本影片中,我解釋了每一行程式碼並提供了資訊豐富的註釋,以使建立 HTML 側邊欄的過程易於遵循,尤其是對於初學者而言。 但是,如果您喜歡閱讀部落格文章或需要此專案的逐步指南,您可以繼續閱讀這篇文章。 在 HTML 和 CSS 中建立響應式側邊欄的步驟 ------------------------- 若要僅使用 HTML 和 CSS 建立響應式側邊欄,請按照以下簡單的逐步說明進行操作: - 首先,建立一個具有任何您喜歡的名稱的資料夾。然後,在其中建立必要的文件。 - 建立一個名為`index.html`的檔案作為主檔案。 - 為 CSS 程式碼建立一個名為`style.css`檔案。 - 最後,下載[Images](https://www.codingnepalweb.com/custom-projects/simple-sidebar-menu-html-css-only-images.zip)資料夾並將其放置在您的專案目錄中。該資料夾包含該側邊欄專案所需的所有圖像。 首先,將以下 HTML 程式碼新增至您的`index.html`檔案: 此程式碼包含具有不同語意標籤(如`<aside>` 、 `<ul>` 、 `<li>`和`<a>`的基本HTML 標記,用於建立我們的側邊欄佈局。 ``` <!DOCTYPE html> <!-- Coding By CodingNepal - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sidebar Menu HTML and CSS | CodingNepal</title> <!-- Linking Google Font Link For Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> <link rel="stylesheet" href="style.css" /> </head> <body> <aside class="sidebar"> <div class="sidebar-header"> <img src="images/logo.png" alt="logo" /> <h2>CodingLab</h2> </div> <ul class="sidebar-links"> <h4> <span>Main Menu</span> <div class="menu-separator"></div> </h4> <li> <a href="#"> <span class="material-symbols-outlined"> dashboard </span >Dashboard</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> overview </span >Overview</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> monitoring </span >Analytic</a > </li> <h4> <span>General</span> <div class="menu-separator"></div> </h4> <li> <a href="#" ><span class="material-symbols-outlined"> folder </span>Projects</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> groups </span>Groups</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> move_up </span>Transfer</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> flag </span>All Reports</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> notifications_active </span >Notifications</a > </li> <h4> <span>Account</span> <div class="menu-separator"></div> </h4> <li> <a href="#" ><span class="material-symbols-outlined"> account_circle </span >Profile</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> settings </span >Settings</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> logout </span>Logout</a > </li> </ul> <div class="user-account"> <div class="user-profile"> <img src="images/profile-img.jpg" alt="Profile Image" /> <div class="user-detail"> <h3>Eva Murphy</h3> <span>Web Developer</span> </div> </div> </div> </aside> </body> </html> ``` 接下來,將以下 CSS 程式碼新增至您的`style.css`檔案中,以使您的側邊欄實用且具有視覺吸引力。請隨意嘗試不同的 CSS 屬性,例如顏色、字體、背景等,以使您的側邊欄更具吸引力。 ``` /* Importing Google font - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { min-height: 100vh; background: #F0F4FF; } .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 85px; display: flex; overflow-x: hidden; flex-direction: column; background: #161a2d; padding: 25px 20px; transition: all 0.4s ease; } .sidebar:hover { width: 260px; } .sidebar .sidebar-header { display: flex; align-items: center; } .sidebar .sidebar-header img { width: 42px; border-radius: 50%; } .sidebar .sidebar-header h2 { color: #fff; font-size: 1.25rem; font-weight: 600; white-space: nowrap; margin-left: 23px; } .sidebar-links h4 { color: #fff; font-weight: 500; white-space: nowrap; margin: 10px 0; position: relative; } .sidebar-links h4 span { opacity: 0; } .sidebar:hover .sidebar-links h4 span { opacity: 1; } .sidebar-links .menu-separator { position: absolute; left: 0; top: 50%; width: 100%; height: 1px; transform: scaleX(1); transform: translateY(-50%); background: #4f52ba; transform-origin: right; transition-delay: 0.2s; } .sidebar:hover .sidebar-links .menu-separator { transition-delay: 0s; transform: scaleX(0); } .sidebar-links { list-style: none; margin-top: 20px; height: 80%; overflow-y: auto; scrollbar-width: none; } .sidebar-links::-webkit-scrollbar { display: none; } .sidebar-links li a { display: flex; align-items: center; gap: 0 20px; color: #fff; font-weight: 500; white-space: nowrap; padding: 15px 10px; text-decoration: none; transition: 0.2s ease; } .sidebar-links li a:hover { color: #161a2d; background: #fff; border-radius: 4px; } .user-account { margin-top: auto; padding: 12px 10px; margin-left: -10px; } .user-profile { display: flex; align-items: center; color: #161a2d; } .user-profile img { width: 42px; border-radius: 50%; border: 2px solid #fff; } .user-profile h3 { font-size: 1rem; font-weight: 600; } .user-profile span { font-size: 0.775rem; font-weight: 600; } .user-detail { margin-left: 23px; white-space: nowrap; } .sidebar:hover .user-account { background: #fff; border-radius: 4px; } ``` 結論和最後的話 ------- 對於 Web 開發初學者來說,使用 HTML 和 CSS 建立響應式側邊欄是一項可以完成的任務。透過遵循本文中提供的步驟和程式碼,您應該能夠成功建立自己的響應式和功能性側邊欄。 為了進一步提高您的網頁開發技能,我建議您嘗試重新建立本網站上提供的其他[漂亮的側邊欄](https://www.codingnepalweb.com/category/sidebar-menu/)。其中一些側邊欄使用 JavaScript 來增強其功能,例如加入[深色模式](https://www.codingnepalweb.com/sidebar-menu-in-html-css-javascript-dark-light-mode/)、[下拉式選單](https://www.codingnepalweb.com/dropdown-sidebar-menu-html-css/)等。 如果您在建立側邊欄時遇到任何問題,可以透過點擊「下載」按鈕免費下載專案的原始碼檔案。您也可以透過點擊“查看即時”按鈕來查看它的即時演示。 [查看現場演示](https://www.codingnepalweb.com/demos/create-sidebar-menu-html-css-only/) [下載程式碼文件](https://www.codingnepalweb.com/create-sidebar-menu-html-css-only/) --- 原文出處:https://dev.to/codingnepal/create-a-sidebar-menu-using-html-and-css-only-2e79

恭喜前端挑戰:六月版得獎者!

等待已經結束!我們很高興地宣布[前端挑戰賽:六月版](https://dev.to/devteam/join-us-for-the-next-frontend-challenge-june-edition-3ngl)的獲獎者。 從[海灘上昏昏欲睡的皮卡丘](https://dev.to/dhrutisubham03/sleepy-pikachu-4iha)到慶祝[世界自行車日](https://dev.to/israebenboujema/world-bicycle-day-css-art-frontend-challenge-june-edition-31oc),我們的 DEV 評審團隊在審查每個人提交的創意作品並了解世界各地的海灘時獲得了很多樂趣! 無論您剛完成第一個挑戰還是正在連續完成挑戰,我們都希望您為自己提交的內容和學到的知識感到自豪! 一如既往,只能有幾個贏家。 恭喜… --- ### CSS藝術 恭喜 @tanveermahendra 的**CSS 藝術**讓我們驚嘆不已! 這個提交是美麗而感人的。它擴展了 CSS 的功能,並且沒有犧牲一絲藝術完整性。 有很多很棒的作品,我們認為這個作品確實解決了這個挑戰。 {% 嵌入 https://dev.to/tanveermahendra/css-art-june-was-made-for-happiness-5acm %} ### 讓我的標記更加迷人 恭喜 @rith1x 在**Glam Up My Markup**提示中建立了一個漂亮的響應式網站! 此提交散發出個性和專業精神,並創造了令人愉快且易於存取的用戶體驗。這讓我們想去參觀這些海灘之一! {% 內嵌 https://dev.to/rith1x/glam-up-my-markup-beaches-4fn8 %} --- 我們的兩位獲獎者將獲得專屬 DEV 徽章和[DEV 商店](https://shop.forem.com)贈送的禮物。所有參與者都將獲得完成徽章以迎接挑戰! 下一步是什麼? ------- 明天(6 月 12 日),我們將發起一項新的合作挑戰,即[Twilio 挑戰](https://dev.to/challenges/twilio),以及我們的首個[電腦科學挑戰](https://dev.to/challenges/twilio)。 {% 嵌入 https://dev.to/t/twiliochallenge %} {% 嵌入 https://dev.to/t/cschallenge %} 6 月 26 日,我們將啟動[Wix Studio 挑戰賽](https://dev.to/challenges/wix): {% 嵌入 https://dev.to/t/wixstudiochallenge %} 請務必關注每個挑戰標籤,這樣您就不會錯過公告! 感謝所有參加前端挑戰賽:六月版的人!我們希望您玩得開心,感受到挑戰,並可能為您的職業檔案加入一兩件事。下次見! --- 原文出處:https://dev.to/devteam/congrats-to-the-frontend-challenge-june-edition-winners-26kd

JavaScript 中除了 console.log() 之外的除錯函數

大多數 JavaScript 開發人員都熟悉基本的`console.log()` 。然而,控制台 API 提供了許多其他方法,這些方法在開發和偵錯工作流程中都非常有用。 ### 基本`console.log()` 讓我們從基本的`console.log()`開始,它用於將訊息列印到控制台。 ``` console.log("Hello, World!"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717602776372/yR9V84n9r.png?auto=format) 這是除錯和記錄訊息最常用的方法。 ### `console.error()` `console.error()`用於輸出錯誤訊息。它有助於區分控制台中的錯誤和常規日誌訊息。 ``` console.error("This is an error message"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717602826130/csjO0YUGj.png?auto=format) 這將以紅色列印該訊息,使其脫穎而出。 ### `console.warn()` `console.warn()`輸出警告訊息。這些問題沒有錯誤那麼嚴重,但仍然需要注意。 ``` console.warn("This is a warning message"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717602863488/xaOE9ZLjI.png?auto=format) 警告訊息以黃色顯示,這有助於將它們與常規日誌和錯誤區分開來。 ### `console.info()` `console.info()`用於資訊性訊息。 ``` console.info("This is an informational message"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717602908638/wZIyzHzQa.png?auto=format) 它的行為與`console.log()`類似,但對於對日誌訊息進行分類非常有用。 ### `console.debug()` `console.debug()`用於偵錯目的,並且通常在許多瀏覽器的控制台設定中預設為隱藏。 ``` console.debug("This is a debug message"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603092431/GMNga7Wge.png?auto=format) 要啟用它,請確保在頂部欄中選取`Verbose` 。 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603225265/UVsWL5bA0.png?auto=format) ### `console.table()` `console.table()`可讓您將資料顯示為表格。這在處理陣列或物件時非常有用。 ``` const users = [ { name: "Alice", age: 25 }, { name: "Bob", age: 30 }, { name: "Charlie", age: 35 }, ]; console.table(users); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603316367/bDPVHX7dX.png?auto=format) 這會將`users`陣列列印為表格,使其更易於閱讀。 ### `console.time()`和`console.timeEnd()` 這些方法用於測量一段程式碼執行所需的時間。 ``` function processData() { console.time("processData"); // Simulating a time-consuming process for (let i = 0; i < 1000000; i++) { // Process } console.timeEnd("processData"); } processData(); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603951155/Ss_aFfxVf.png?auto=format) `console.time("processData")`啟動計時器, `console.timeEnd("processData")`停止計時器,列印經過的時間(以毫秒為單位)。這可以幫助辨識程式碼中的瓶頸並提高效能。 ### `console.count()` `console.count()`用於統計程式碼區塊的執行次數。 ``` for (let i = 0; i < 5; i++) { console.count("Counter"); } ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603544889/KOsdLFTNl.png?auto=format) 這將在每次循環執行時列印計數。 ### `console.group()`和`console.groupEnd()` 這些方法可讓您將多個日誌訊息分組在一起。 ``` console.group("User Details"); console.log("Name: Alice"); console.log("Age: 25"); console.groupEnd(); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603600402/MlxNun_v8.png?auto=format) 這將在控制台中建立一個可擴展組。您也可以建立嵌套群組以更好地組織。 ### `console.assert()` 只有當斷言為 false 時`console.assert()`才會將訊息寫入控制台。 ``` const x = 10; console.assert(x > 10, "x is not greater than 10"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603763457/j99LQUfCM.png?auto=format) 由於`x`不大於 10,因此將列印該訊息。 ### 設定控制台日誌的樣式 您可以使用 CSS 設定控制台日誌訊息的樣式。 ``` console.log("%cThis is a styled message", "color: blue; font-size: 20px;"); ``` ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1717603814168/VUOV4fH4T.png?auto=format) `%c`是後面的 CSS 樣式字串的佔位符。 ### 最佳實踐 1. **使用適當的方法:**使用`console.error()`來處理錯誤,使用`console.warn()`來處理警告,等等。這有助於過濾控制台中的訊息。 2. **刪除生產中的日誌:**確保刪除或停用生產程式碼中的控制台日誌,以避免混亂和潛在的效能問題。 3. **將相關日誌分組:**使用`console.group()`和`console.groupEnd()`將相關日誌保存在一起。 ### 結論 下次當您深入程式碼並需要偵錯時,請嘗試這些方法。它們可以讓您的生活更輕鬆,除錯過程更有效率。因此,繼續在您的下一個專案中嘗試這些,看看它們可以產生什麼變化。 更詳細的訊息,您可以參考[控制台上的 MDN Web 文件](https://developer.mozilla.org/en-US/docs/Web/API/Console)。 --- 原文出處:https://dev.to/codeparrot/debugging-beyond-consolelog-in-javascript-32g6

Web 開發人員的頂級工具

**嘿,網頁開發者們!** 如果您是在廣闊的 Web 開發世界中揚帆起航的新手,擁有正確的工具可以決定您的旅程的成敗,有時很難選擇正確的工具。有太多可供選擇! 🤯 在本文中,我們將深入探討一些必備工具,這些工具不僅流行,而且能夠改變遊戲規則,提高您的工作效率,簡化複雜的任務,並使您的編碼生活變得更加輕鬆(也更有趣! ) 。 *PS 本文適合初學者,但歡迎更多經驗豐富的開發人員閱讀並加入他們的技巧。* --- ### 1. 程式碼編輯器和 IDE 程式碼編輯器是專門為編輯程式碼而設計的程式。它提供語法突出顯示、自動完成和除錯工具等功能,使編碼更有效率、更不易出錯。 **Visual Studio 程式碼(VS 程式碼)** VS Code 是一個輕量級但功能強大的原始程式碼編輯器,可以在桌面上執行。它支援 JavaScript、TypeScript、Node.js,並擁有豐富的其他語言擴充生態系統(包括 C++、C#、Python、PHP 等)。其內建的 Git 支援、強大的除錯和智慧程式碼完成 (IntelliSense) 使其成為開發人員的最愛。 **崇高的文字** Sublime Text 以其速度和效率而聞名,是一款多功能編輯器,可處理多個專案並在多個專案之間切換。其大量的鍵盤快捷鍵提高了工作效率,並允許開發人員更快地編寫和編輯程式碼。 **JetBrains WebStorm** WebStorm 專為 JavaScript 開發人員量身打造。它為 JavaScript、HTML 和 CSS 提供高級編碼幫助,包括自動完成、自動重構和強大的導航工具。 WebStorm 與流行的版本控制系統集成,並為建立 Web、伺服器和行動應用程式提供流暢的開發人員體驗。 --- ### 2.版本控制系統 版本控制系統是幫助軟體團隊管理原始碼隨時間變化的軟體工具。他們在一種特殊的資料庫中追蹤對程式碼的每次修改。如果發生錯誤,開發人員可以倒轉並比較早期版本的程式碼,以幫助修復錯誤,同時最大限度地減少對所有團隊成員的干擾。 **git** Git 是當今世界上使用最廣泛的現代版本控制系統。它允許多個開發人員在複雜的專案上一起工作,而不必擔心發生衝突的變更。 GitHub 和 GitLab 等平台也在 Git 功能之上提供了視覺化介面,讓管理專案變得更容易。 **水銀** 作為 Git 的替代方案,Mercurial 的設計考慮了簡單性和效能。它是一個分散式版本控制系統,允許開發人員有效管理大型程式碼庫。 --- **想要探索 Web 開發的未來嗎?** {% cta https://www.webcrumbs.org/waitlist %} 透過 Webcrumbs 了解更多 {% endcta %} --- ### 3. 前端框架 前端框架是允許開發人員建立使用者介面的標準結構。它提供了一種組織和建構程式碼的方法,並提供可重複使用的元件,從而使 Web 開發更快、更容易且更具可擴展性。使用框架可以大幅簡化開發過程,特別是對於需要快速建置的複雜專案。 **反應** React 是一個聲明式、高效且靈活的 JavaScript 程式庫,用於建立使用者介面。它允許開發人員從稱為“元件”的小型且獨立的程式碼片段組成複雜的 UI。 **視圖.js** Vue.js 因其簡單性而受到讚賞,並且對於初學者來說很容易上手。它的核心庫僅專注於視圖層,因此可以輕鬆選擇並與其他庫或現有專案整合。 **角** Angular 是一個使用 HTML 和 TypeScript 建立用戶端應用程式的平台和框架。它非常適合開發大型企業應用程式,並支援廣泛的功能,例如雙向資料綁定、模組化、模板化、AJAX 處理、依賴項注入等。 --- ### 4. CSS 框架與預處理器 CSS 框架是預先準備好的軟體框架,旨在允許使用級聯樣式表語言更輕鬆、更符合標準的網頁樣式。另一方面,預處理器為 CSS 加入了額外的功能,以保持樣式表組織良好,並允許我們更快地編寫程式碼。 **引導程式** Bootstrap 是世界上最受歡迎的框架,用於建立響應式、行動優先的網站。它包括用於排版、表單、按鈕、導航和其他介面元件的基於 HTML 和 CSS 的設計模板,以及可選的 JavaScript 擴充功能。 **順風 CSS** Tailwind CSS 是一個實用程式優先的 CSS 框架,用於快速建立自訂設計。與其他 CSS 框架不同,Tailwind 不附帶預定義元件,而是提供實用程式類別來直接在標籤中建立獨特的設計。 **薩斯** Sass 是一種成熟、穩定、強大的專業級 CSS 擴展語言。它有助於讓 CSS 再次變得有趣,並包含變數、巢狀和混合等功能,允許更靈活和可重複使用的程式碼。 --- ### 5. 建置工具和任務執行器 建置工具和任務執行程式是在軟體開發過程中自動執行重複任務的軟體,例如縮小程式碼、將原始程式碼編譯為二進位程式碼、打包二進位程式碼以及執行自動化測試。這種自動化使開發過程更加一致,並為開發人員節省了大量時間。 **網頁包** Webpack 是現代 JavaScript 應用程式的靜態模組捆綁器。當 Webpack 處理您的應用程式時,它會在內部建立一個依賴關係圖,該圖會對應您的專案所需的每個模組並產生一個或多個捆綁包。 **咕嚕咕嚕** Gulp 是一個工具包,可協助開發人員自動執行開發工作流程中痛苦或耗時的任務。它用於常見任務的任務自動化,例如 CSS 縮小、圖像優化、程式碼檢查和建立網頁。 ### 您使用哪些工具? 我們希望本指南可以幫助您選擇合適的工具來增強您的 Web 開發專案。嘗試將其中一些工具整合到您的工作流程中,並親自看看有何不同。 與我們分享您的經驗或推薦其他值得一提的工具! 在 WebCrumbs,我們正在發展一個供開發人員相處和共同學習的社群! {% cta [https://discord.gg/4PWXpPd8HQ](https://discord.gg/4PWXpPd8HQ "https://discord.gg/4PWXpPd8HQ") %} 在這裡加入我們{% endcta %} --- 原文出處:https://dev.to/buildwebcrumbs/top-tools-for-modern-web-developers-1ba3

🌐前端開發為什麼這麼複雜?

前端開發太複雜?今天,我們就來談談它。 目標是幫助您了解當今的前端開發。 前端開發對於任何開發人員都很重要。它會影響網頁應用程式的運作效果。 許多開發人員發現現代前端框架很難使用。這是因為技術變化很快,網路應用程式需要: - **快速地** - **互動的** - **易於維護** 這些年來,前端開發變得更加複雜。 ---------------- 自 jQuery 時代以來,前端開發已經發生了很大變化。 Angular、React 和 Vue 等新框架帶來了新的挑戰: - **狀態管理**:網路是無狀態的,因此我們需要強大的解決方案來管理狀態。 Angular 和 React 試圖解決這些問題,但也帶來了問題。 - **依賴項**:許多依賴項和工具使專案設定變得更加困難。雖然有用,但它們需要定期維護。廢棄的包裹也可能導致問題。 - **SEO 和效能**:現代框架必須具有良好的 SEO 和快速的載入時間。 - **Web 演進**:Web 應用程式現在的目標是與行動應用程式一樣具有吸引力,從而提高複雜性。 - **複雜的現代框架**:有許多框架可供使用。 狀態管理的演變 ------- 過去,管理 Web 應用程式中的狀態很簡單,但也很有限。隨著應用程式變得越來越複雜,**我們需要更好的狀態管理**。 Angular 提供了完整的解決方案,但它笨重且複雜。 **React 提供了一種更簡單、基於元件的方法**。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqlnpwjkgd00yw2yjzia.png) 此範例展示了 React 的 useState 鉤子如何使狀態管理變得容易。 依賴困境 ---- 現代前端專案有很多依賴項。它們帶來了很棒的功能,但您需要經常管理和更新它們。 Webpack 和 Babel 等工具增加了複雜性,但也是必不可少的。 管理依賴關係很簡單。但是,您必須密切注意更新和相容性。 前端開發從哪裡開始? ---------- 首先,**掌握基礎知識**,然後... 我強烈推薦**React** 。它是最好和最受歡迎的前端框架之一。 React 是安全的選擇! 6 個簡單步驟即可完成 React 開發者路線圖 ------------------------ 1. HTML、CSS 和 JavaScript 基礎知識 2. Git版本控制系統 3. 反應基礎知識 4. 狀態管理 5. API交互 6. 測試 結論 -- **現在前端開發更加複雜**。真的。然而,這種複雜性滿足了現代網路應用程式的需求。 **掌握當前工具是建立強大、高效能 Web 應用程式的關鍵**。 保持願意學習、改進和建立出色的應用程式! 請評論您的想法。您的想法對於為前端開發領域做出貢獻很有價值。歡迎大家!我想聽聽他們的聲音。 保持良好的工作! :) --- 原文出處:https://dev.to/shehzadhussain/why-is-front-end-development-so-complicated-3g8o

21 個可提高您工作效率的 VS Code 擴展

開發者們大家好👋 身為開發人員,我們大部分時間都花在 VS Code 上。在這篇文章中,我將分享一些 VS Code 擴展,它們可以幫助提高您的工作效率並節省您的寶貴時間。 讓我們開始吧🚀 Codiumate -- ![鈉鹽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmm61xovmha09i9us1fl.png) > ✨ Codiumate 使用 AI 產生測試、檢視測試結果、修復用 Python、JavaScript、TypeScript 和 Java 等各種程式語言編寫的程式碼的錯誤和錯誤。它在您的 IDE 中充當您的私人代理或助手。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Codium.codium) Partial Diff ---- ![部分差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uqlcq8e60lkthg7dosx.png) > ✨ Partial Diff 擴充功能可讓您比較同一文件內或不同文件中的不同文字選擇,從而更容易發現變更和差異。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff) Git Graph ---- ![git圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww8j9qvrsr66wmn0mosw.png) > ✨ Git Graph 擴充功能為您提供了 Git 儲存庫的視覺化表示,讓您更容易理解和管理分支、提交和合併,您還可以從圖表中執行 Git 操作。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) Path Intellisense ------ ![路徑智能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v22b2kyhxwwfpzpnwtc4.png) > ✨ Path Intellisense 擴充擴展了 VS Code 中的預設路徑完成,以包含工作區中的所有可用路徑,即使它們尚未匯入。 🔹連結 [👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) Error Lens ---- ![誤差透鏡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui3i6k3zm1b64r1ga7xb.png) > ✨ Error Lens 擴充功能透過直接在程式碼中顯示錯誤訊息來增強 VS Code 中的錯誤突出顯示。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) SQL工具 ----- ![SQL工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ceg4gtsb96fme1in7z2.png) > ✨ SQLTools 是 VS Code 的輕量級 SQL 用戶端,它為您提供資料庫管理、查詢執行,並直接在編輯器中提供視覺化結果。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools) Markdown 多合一 ------------ ![Markdown 多合一](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k7dpy89w65i30ggq8ih.png) > ✨ Markdown All in One 擴展為 Markdown 編輯提供全面支持,包括快捷方式、目錄生成等。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) Turbo 控制台日誌 ----------- ![Turbo 控制台日誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ycisuti1dsz1z632olq.png) > ✨ Turbo Console Log 擴充功能會自動將有意義的 console.log 語句新增到您的程式碼中,這可以在偵錯過程中節省大量時間。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) Quokka.js --------- ![Quokka.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bko1yy8akuwm36ny4j4u.png) > ✨ Quokka.js 是一款用於快速 JavaScript / TypeScript 原型設計的開發人員生產力工具。當您鍵入時,執行時間值會更新並顯示在 IDE 中程式碼旁邊。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 專案經理 ---- ![專案經理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drvs445isps5ydysl58v.png) > ✨ 專案管理器可讓您在 VS Code 中的不同專案之間輕鬆切換,使其成為管理和導航多個專案的捷徑。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) Todo Tree --- ![所有樹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr5zknvtyuujeipsmbh0.png) > ✨ Todo Tree 擴充功能掃描您的程式碼中的註解標籤,例如 TODO 和 FIXME,並將它們顯示在活動欄中的樹狀視圖中。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) TabNine ---- ![選項卡九](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bycu1zglpkloehx8yq1d.png) > ✨ TabNine 是一款支援多種程式語言的人工智慧程式碼補全擴展,它為您提供智慧程式碼建議、即時程式碼補全、聊天和程式碼生成。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) Better Comments ----- ![更好的評論](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkjarirc3nsaeqg509zr.png) > ✨ Better Comments 擴充功能可協助您在程式碼中建立或編寫更人性化的註解。它允許您使用不同的顏色將註釋分類為警報、查詢、待辦事項等。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) Polacode --- ![波拉碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0shnpzcdku2prtrafvl.png) > ✨ Polacode 是一款時尚的程式碼螢幕截圖工具,可讓您直接從 VS Code 建立漂亮的程式碼螢幕截圖。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) REST Client ----- ![休息客戶端](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s54cm9rrjwllxjipi9y0.png) > ✨ REST 用戶端可讓您直接在 VS Code 中發送 HTTP 請求並查看回應,從而更輕鬆地測試和偵錯 API。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) HTML CSS 支持 ----------- ![HTML CSS 支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk68l0ra0jjpy07ebe0t.png) > ✨ HTML CSS 支援根據工作區中的 CSS 檔案為 HTML 類別屬性提供 CSS 類別和 ID 名稱補全。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) Git Lens ---- ![吉特透鏡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyhhk9m4xezrl6gqrrh9.png) > ✨ GitLens 擴充功能增強了 VS Code 的內建 Git 功能。它可以幫助您視覺化程式碼作者、無縫導航和探索 Git 儲存庫,並深入了解您的程式碼。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) Wakatime ---- ![瓦卡時間](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfs2ux1njyipa8cdc88n.png) > ✨ WakaTime 擴充功能為您的編碼活動提供自動時間追蹤。它可以讓您深入了解自己的編碼習慣,並幫助您更有效地管理時間。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) Bookmarks -- ![書籤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jn88xn94pg001feiazq.png) > ✨ 書籤擴充功能可協助您在程式碼中導航,輕鬆快速地在重要位置之間移動。不再需要搜尋程式碼。它還支援一組選擇命令,允許您選擇已加入書籤的行以及已加入書籤的行之間的區域。它對於日誌檔案分析非常有用。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) PlantUML ----- ![植物UML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvlanhdp5yx61xteaen1.png) > ✨ PlantUML 擴充功能可讓您從純文字描述建立 UML 圖,從而輕鬆視覺化和記錄您的系統設計。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml) 尾隨空格 ---- ![尾隨空格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55wyje0me31nchvmkk6k.png) > ✨ 尾隨空格擴充會自動反白並刪除程式碼中的尾隨空格,它有助於保持程式碼整潔且一致。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) 這就是這篇文章的內容。感謝您的閱讀💖 > 請在評論中告訴我您最常使用哪一個或任何其他有用的擴充功能👇 在 👉 https://x.com/kiran\_\_a\_\_n X https://github.com/Kiran1689 GitHub 上找到我 https://dev.to/dev\_kiran --- 原文出處:https://dev.to/dev_kiran/21-vs-code-extensions-to-boost-your-productivity-1fil

什麼是 Webpack

Webpack 似乎令人難以承受,並且是您在建立 React 應用程式時可能會避免學習的東西。但為您的 React 應用程式自行設定和建立非常簡單。這將是 Webpack 及其*實際*功能的初學者指南。讓我們來解答您可能對 Webpack 有的任何疑問…哈哈… 我們將回顧: - **什麼是 Webpack?** - **如何配置 Webpack** - **Webpack 中的快取清除** #### Webpack 是什麼,它是如何運作的,它有什麼作用? 如果您熟悉 Create React App,那麼 Webpack 負責 Create React App 中的主要功能,以及 Babel(JS 編譯器)等其他一些功能。 Create React App 使用 Webpack 將檔案捆綁在一起,這就是為什麼使用 create React app 開發 React 應用程式非常簡單的原因。 Webpack 是一個模組捆綁器。但是,這是什麼意思?這意味著 Webpack 將 JS 文件編譯為一個主文件,或者您想要將程式碼捆綁到其中的任意多個文件,但通常它是一個捆綁文件。 Webpack 具有許多功能,例如模組捆綁、文件縮小(透過刪除空格、註解、不必要的程式碼以及最小化/縮短程式碼來最小化程式碼的過程。)、SASS 編譯等。應用程式轉換為瀏覽器可以理解的內容。 Webpack 管理依賴關係並載入需要先載入的程式碼。 Webpack 會追蹤哪些文件依賴哪些文件並相應地載入它們。 Webpack 解決的問題是,在開發大型應用程式時,您的依賴項可能會堆積並交叉不同的文件,這使其變得複雜且難以管理。 Webpack 為您管理所有這些依賴項和文件,將其捆綁到瀏覽器可以理解的純 JS 中。 #### 如何配置 Webpack 如果您想將載入程式和外掛程式新增至 Webpack 捆綁包中,則必須在 Webpack 設定檔中執行此操作。 這是 webpack 設定檔的樣子。 ``` //Webpack.config.js file: const path = require("path"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") } }; ``` 讓我們解開這個文件中發生的事情。 首先,我們將`mode`設定為`development` ,這告訴Webpack不要縮小我們的程式碼,這在開發時非常有幫助。 然後,如果我們想使用它,就必須確保該文件中的所有內容都作為模組導出。 在使用`npm init`初始化應用程式時建立的`package.json`檔案中,您可以告訴 Webpack 在`scripts`中執行,如下所示: ``` "scripts": { "start": "webpack --config webpack.config.js" }, //The webpack config file can be named anything, //In this case, it is webpack.config.js ``` 接下來, `entry`屬性接受整個應用程式執行位置的 src。預設情況下,Webpack 將在`src`資料夾中查找`index.js`文件,但您可以在此處指定應用程式啟動的文件以及需要捆綁的程式碼。 `output`屬性是一個物件,您希望在其中輸出程式碼。 `filename`屬性可以命名為您想要的任何名稱,通常是`main.js` 。 `path`屬性指定程式碼的去向。在本例中,我們正在解析`dist`目錄的絕對路徑,您可以將此資料夾稱為任何名稱。本質上,這是 Webpack 將捆綁您的應用程式的資料夾,傳統上該資料夾是`dist` 。 這是配置 Webpack 檔案以及如何讓 Webpack 執行您的應用程式的基礎知識。當然,您可以向此設定檔加入更多內容,例如載入程式和外掛程式。如果你對此有興趣,可以參考[Webpack文件](https://webpack.js.org/configuration/)。 #### Webpack 中的快取清除 快取清除一開始可能是一個令人困惑的話題,但它對於應用程式的功能以及可以在 Webpack 中輕鬆完成的事情可能很重要。 當您使用 Webpack 捆綁應用程式時,Webpack 會將所有內容捆綁在可部署的`/dist`目錄中。 將應用程式部署到伺服器後,並且用戶正在存取您的應用程式,客戶端(通常是瀏覽器)必須再次存取伺服器以檢索應用程式的所有資產。 這就是瀏覽器快取應用程式資源的原因。本質上,它們將文件或模組保存在`/dist`目錄中,以便用戶下次刷新或存取瀏覽器時不必檢索它已經記住的任何資產。 如何防止瀏覽器快取我們更改過的 CSS 或檔案包? 瀏覽器快取檔案可能會導致問題,因為如果我們更改已快取的文件,瀏覽器可能不會更新它們,並假設文件是相同的,因為檔案名稱沒有更改。 快取清除背後的想法是,我們希望每次對文件進行更改時都建立一個新的文件名,如果沒有進行更改,則保持文件名相同。這樣,當您對文件進行更改時,當客戶端向伺服器發出請求以檢索應用程式資產時,您更改的文件將更新,因為瀏覽器無法辨識文件名。 幸運的是,Webpack 在 Webpack 設定檔的`output.filename`中附帶了一個名為`[contenthash]`的內建替換功能。 `[contenthash]`替換將根據資產內容是否已變更建立唯一的雜湊值,僅在變更時更新。 當您將`[contenthash]`新增至設定檔中的輸出物件時,它將如下所示: ``` //the output object in module.exports from the webpack.config.js file: output: { filename: "main.[contentHash].js", path: path.resolve(__dirname, "dist") }, ``` **因此**,我希望 Webpack 的介紹易於理解,並回答了您可能對 Webpack 存在的一些問題。 Webpack 正在做很多幕後工作以使您的 React 應用程式正常工作,您所需要做的就是確保為您的應用程式正確配置它。下次您開發 React 應用程式時,請考慮自行設定 Webpack! --- 原文出處:https://dev.to/cs_carms/what-is-webpack-43h6

建立出色的 GitHub 開發人員作品集。

在軟體開發領域,有效地展示您的工作以及您編寫的程式碼至關重要。作品集網站是開發人員展示其技能、專案和貢獻的絕佳方式。增強您的作品集的一種創新方法是整合 GitHub 統計資料,它可以提供有關您的編碼活動和貢獻的即時見解。 為了幫助其他開發人員實現這一目標,我從頭開始建立了一個新網站,重點介紹您的 GitHub 作品。該網站是使用 NextJS 和 Tailwind CSS 建立的,它從您的 GitHub 個人資料和工作中獲取所有資料。 *本文將逐步引導您完成設定過程,並且還將為您提供 GitHub 連結。* **這是即時預覽:**[即時預覽網址](https://github.abusaid.me/) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi8nc8kwy5vn42vk70zr.png) **步驟01:** 使用[GitHub 連結複製](https://github.com/said7388/github-portfolio.git)儲存庫並將目錄變更為 github-portfolio。 ``` git clone https://github.com/said7388/github-portfolio.git cd github-portfolio ``` **步驟02:** 現在使用`npm`或`yarn`安裝所有套件。 ``` npm install # or yarn ``` 安裝完所有套件後,現在根據您的情況更改`data/user-data.js`上的所有資料。例如: ``` export const userData = { githubUser: 'said7388', devUsername: "said7388", github: 'https://github.com/said7388', facebook: 'https://www.facebook.com/abusaid.riyaz/', linkedIn: 'https://www.linkedin.com/in/abu-said-bd/', twitter: 'https://twitter.com/said7388', stackOverflow: 'https://stackoverflow.com/users/16840768/abu-said', leetcode: "https://leetcode.com/said3812/", resume: "https://drive.google.com/file/d/1eyutpKFFhJ9X-qpQGKhUNnVRkB5Wer00/view?usp=sharing", skills: ['React', 'NextJS', 'Redux', 'Express', 'NestJS', 'MySql', 'MongoDB', 'Postgres', 'Docker', 'AWS'], timezone: '+6' }; ``` **步驟03:** 如果您想使用 Google Analytics,請從`.env.example`檔案建立新的`.env`檔案並提供值。 `.env`文件如下: ``` NEXT_PUBLIC_GTM = "" ``` **步驟04:** 現在 GitHub 作品集網站已準備好運作。您可以使用`npm`或`yarn`執行它。 ``` npm run dev # or yarn dev ``` 如果您喜歡這個 GitHub 組合專案,您可以考慮在[GitHub 儲存庫](https://github.com/said7388/github-portfolio)上給它一顆星。 您可以在 Linkedin 上與我聯絡: <https://www.linkedin.com/in/abu-said-bd/> > 免責聲明:在這個儲存庫中,我使用了一些開源 API。所有積分均歸這些儲存庫的擁有者所有。 --- 原文出處:https://dev.to/said7388/build-an-awesome-github-developer-portfolio-54ka

PHP:Laravel,Ruby:Rails,JavaScript:?

最近,Twitter 上發生了 JS 開發者與 Laravel 和 Rails 開發者之間的熱烈討論。它始於 Laravel 的作者 Taylor Otwell 的一條長推文: https://twitter.com/taylorotwell/status/1791468060903096422 簡而言之,他認為整個 JavaScript 生態系統缺乏像 Laravel 或 Rails 這樣真正的「全端」框架,而這些框架可以讓單一開發人員建立下一個 GitHub、AirBnb 或 Shopify。 我對此深表同情,因為我在建立[ZenStack](https://zenstack.dev/) (Prisma ORM 之上的打字稿工具包)時有著相同的目標。事實上,我常在社區裡聽到這樣的話: ![聊天影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vikbshwmv16hxolkhw2s.png) 沒有人可以否認 JS 生態系統的受歡迎程度和快速增長,即使在非會員中也是如此。那麼這是為什麼呢? 歷史原因 ---- > 人們創造自己的歷史,但他們並不是隨心所欲地創造歷史;他們不是在自我選擇的環境下成功的,而是在已經存在的、給定的、從過去傳承下來的環境下成功的——卡爾·馬克思 PHP 和 Ruby 從一開始就被設計為伺服器端語言。 PHP 於 1994 年建立,用於建立動態網頁,而 Ruby 於 20 世紀 90 年代中期出現,是為通用程式設計而設計的。 鑑於它們的伺服器端起源,PHP 和 Ruby 自然適合綜合框架,可以處理 Web 開發的各個方面,從路由和控制器到資料庫互動和模板引擎。這導致了 Laravel 和 Rails 等框架的建立,以提供完整的、固定的方式來建立 Web 應用程式。 相較之下,JavaScript 是作為網頁瀏覽器的客戶端腳本語言而誕生的。直到 2009 年 Node.js 推出之前,它與後端無關。如果您聽說過 Netscape Navigator 和 Internet Explorer 之間的“瀏覽器戰爭”,您可能會意識到前端中持續存在的混亂,這種混亂今天繼續以瀏覽器兼容性的名義讓前端開發人員瘋狂。因此,早期的網路是將不同的技術拼湊在一起。因此,JavaScript 開發人員開始習慣模組化,允許靈活地混合和匹配庫和工具以求生存。這就是為什麼與 Node.js 一起出現的 NPM 以驚人的速度成長,迅速成為世界上最大的軟體註冊中心。 這種不同的情況導致了不同的開發人員文化: - **PHP/Ruby 開發人員:** “給我一個可以正常工作的框架。我想要約定、穩定性和清晰的交付路徑。” - **JS 開發人員:** “不要限制我!我想要靈活性、最新的工具以及以我的方式建置的自由,即使這意味著需要更多的前期工作。” 因此,即使擴展到後端世界之後,單一的、「一刀切」的方法也很難在 Javascript 生態系統中行得通。 當代努力 ---- 一方面,這種文化導致不斷的演變,使整個生態系統保持興奮和創新。然而,這也會導致新人更決策疲勞和更陡峭的學習曲線。 “哪裡有泥土,哪裡就有黃銅。”有些人踏上了冒險之旅,建造一個類似 Rails 的、包含電池的框架來挑戰現狀。以下是一些流行的例子: - [redwoodjs](https://redwoodjs.com/) ``` Full-stack JavaScript framework that integrates React, GraphQL, and Prisma. It simplifies development with a unified setup and automatic code generation, perfect for scalable applications. ``` - [blitzjs](https://blitzjs.com/) ``` Blitz.js extends Next.js into a full-stack framework featuring a zero-API data layer and Prisma for database access. It aims to simplify development by allowing direct server-side code calls from the frontend. ``` - [adonisjs](https://adonisjs.com/) ``` AdonisJS is a TypeScript-first web framework for building web apps and API servers. It offers a rich set of features out-of-the-box, including an ORM, authentication, and a powerful CLI, making it ideal for developers seeking a comprehensive and structured development environment. ``` 他們會成為 JS 世界的 Laravel 或 Rails 嗎?現在說可能還為時過早,但至少 RedwoodJS 顯示出巨大的勢頭: ![紅木流行趨勢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rwf3tizoy59tbck2q5j.png) 另一群人正試圖透過提供**固定**電池的工具包的「啟動套件」來解決這個問題。其中,最受歡迎的是[Create-T3-App](https://create.t3.gg/) ,它結合了 Next.js、tRPC、Tailwind CSS 和其他強大的工具,為您建立類型安全的 Web 應用程式奠定了堅實的基礎。 有趣的是,T3 的建立者 Theo 似乎對 JavaScript 世界的整個努力持悲觀態度: https://twitter.com/t3dotgg/status/1792136001345003748 樂觀的未來 ----- > 任何可以用 JavaScript 編寫的應用程式最終都會用 JavaScript 編寫。 — 傑夫·阿特伍德 雖然我並不完全相信阿特伍德定律,但我確實預見到 JavaScript 在 Web 開發領域的光明前景。原因很簡單: **這是歷史上第一次可以使用程式語言開發整個網頁應用程式。** 這是一個顯著的好處,特別是對於新手開發人員來說。感謝 TypeScript 優秀的類型推斷系統,我們不僅有能力這麼做,而且也願意這麼做。 Laravel 或 Rails 使用者常見的批評是,這些框架缺乏對系統中不同實體之間的關係進行建模的傳統方法,如下所示: https://twitter.com/chantastic/status/1791531154212033004 雖然它可能還沒有達到 Laravel 或 Rails 的水平,但目前 JS 界的努力已經認識到了這個問題。如果您查看上述解決方案的工具包,您會發現一個通用名稱: [Prisma](https://www.prisma.io/) 如果您還沒有聽說過 Prisma,它是一種現代的 TypeScript-first ORM,可讓您輕鬆管理資料庫模式,以極大的靈活性進行查詢和變更,並確保出色的類型安全性。這使 JavaScript 開發人員能夠實現 Laravel 和 Rails 中傳統的資料處理複雜性和輕鬆的關係建模,就像 Laravel 的 Eloquent ORM 一樣。 我在 Prisma 之上建立的[ZenStack](https://zenstack.dev/)工具包旨在進一步縮小差距。它在架構之上加入了授權層,然後自動為您產生 API 和前端掛鉤。因此,簡單地說,一旦您完成了架構,您就幾乎完成了後端。然後,您可以選擇任何前端框架(例如 React、Vue 或 Svelte)來完成您的 UI。 [![zenstack 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3h4wsn2ha5znwzq88u3.png)](https://zenstack.dev/) 開始就要考慮如何結束 ---------- JavaScript 會迎來 Laravel/Rails 時刻嗎?就我個人而言,我相信,或至少希望,標準化約定可以帶來整個生態系統的全局最佳化。然而,考慮到 JavaScript 的歷史和文化,實現這一目標可能需要大量時間。目前還不清楚人工智慧是否會加速這一過程,或徹底顛覆它。 所以,看來我們只能拭目以待了。然而,我們不要在這場辯論中迷失方向,忘記我們的初衷,正如李羅賓遜所說: https://twitter.com/leeerob/status/1792215708715122752 所以,我在最後引用[W3C Web平台設計原則](https://www.w3.org/TR/design-principles/#priority-of-constituencies)中的一句話: > 使用者需求先於網頁作者的需求,網頁作者的需求先於使用者代理實現者的需求,後者先於規範編寫者的需求,後者先於理論純粹性。 --- 原文出處:https://dev.to/zenstack/php-laravel-ruby-rails-javascript-36dc

如何建置:具有嵌入式 AI copilot 的待辦事項清單應用程式(Next.js、GPT4 和 CopilotKit)

**長話短說** -------- 待辦事項清單是每個開發人員的經典專案。在當今世界,學習如何使用人工智慧進行建構並在你的投資組合中加入一些人工智慧專案是很棒的。 今天,我將逐步介紹如何使用嵌入式 AI 副駕駛來建立待辦事項列表,以實現一些 AI 魔法🪄。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw0jituk3y5tosz6f34u.gif) 我們將介紹如何: - 使用 Next.js、TypeScript 和 Tailwind CSS 建立待辦事項清單產生器 Web 應用。 - 使用 CopilotKit 將 AI 功能整合到待辦事項清單產生器中。 - 使用 AI 聊天機器人新增清單、將清單分配給某人、將清單標記為已完成以及刪除清單。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guf0l2fiq1g1jv86o7bg.png) --- CopilotKit:建構應用內人工智慧副駕駛的框架 -------------------------- CopilotKit是一個[開源的AI副駕駛框架](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造: - ChatBot:上下文感知的應用內聊天機器人,可以在應用程式內執行操作 💬 - CopilotTextArea:人工智慧驅動的文字字段,具有上下文感知自動完成和插入功能📝 - 聯合代理:應用程式內人工智慧代理,可以與您的應用程式和使用者互動🤖 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myp7zashy99m33ya8kaf.gif) {% cta https://go.copilotkit.ai/bonnie %} 明星 CopilotKit ⭐️ {% endcta %} --- 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立人工智慧驅動的待辦事項清單產生器所需的工具: - [Nanoid](https://github.com/ai/nanoid) - 一個小型、安全、URL 友善、唯一的 JavaScript 字串 ID 產生器。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,讓您能夠使用 ChatGPT 模型執行各種任務。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app@latest todolistgenerator ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tc6he9eivkt3hhxnj3p.png) 接下來,安裝 Nanoid 套件及其相依性。 ``` npm i nanoid ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend @copilotkit/shared ``` 恭喜!您現在已準備好建立由人工智慧驅動的待辦事項清單產生器。 **建立待辦事項清單產生器前端** ----------------- 在本節中,我將引導您完成使用靜態內容建立待辦事項清單產生器前端的過程,以定義生成器的使用者介面。 首先,請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`types`資料夾。在 types 資料夾中,建立一個名為`todo.ts`的文件,並新增以下程式碼來定義名為**`Todo`的 TypeScript 介面。** **`Todo`**介面定義了一個物件結構,其中每個待辦事項都必須具有**`id`** 、 **`text`**和**`isCompleted`**狀態,同時也可以選擇具有**`assignedTo`**屬性。 ``` export interface Todo { id: string; text: string; isCompleted: boolean; assignedTo?: string; } ``` 然後轉到程式碼編輯器中的`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中,建立三個名為`Header.tsx` 、 `TodoList.tsx`和`TodoItem.tsx`的檔案。 在`Header.tsx`檔案中,新增以下程式碼,定義一個名為`Header`的功能元件,該元件將呈現生成器的導覽列。 ``` import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> To-Do List Generator </Link> </div> </nav> </header> </> ); } ``` 在`TodoItem.tsx`檔案中,新增以下程式碼來定義名為**`TodoItem`**的 React 功能元件。它使用 TypeScript 來確保類型安全性並定義元件接受的 props。 ``` import { Todo } from "../types/todo"; // Importing the Todo type from a types file // Defining the interface for the props that the TodoItem component will receive interface TodoItemProps { todo: Todo; // A single todo item toggleComplete: (id: string) => void; // Function to toggle the completion status of a todo deleteTodo: (id: string) => void; // Function to delete a todo assignPerson: (id: string, person: string | null) => void; // Function to assign a person to a todo hasBorder?: boolean; // Optional prop to determine if the item should have a border } // Defining the TodoItem component as a functional component with the specified props export const TodoItem: React.FC<TodoItemProps> = ({ todo, toggleComplete, deleteTodo, assignPerson, hasBorder, }) => { return ( <div className={ "flex items-center justify-between px-4 py-2 group" + (hasBorder ? " border-b" : "") // Conditionally adding a border class if hasBorder is true }> <div className="flex items-center"> <input className="h-5 w-5 text-blue-500" type="checkbox" checked={todo.isCompleted} // Checkbox is checked if the todo is completed onChange={() => toggleComplete(todo.id)} // Toggle completion status on change /> <span className={`ml-2 text-sm text-white ${ todo.isCompleted ? "text-gray-500 line-through" : "text-gray-900" // Apply different styles if the todo is completed }`}> {todo.assignedTo && ( <span className="border rounded-md text-xs py-[2px] px-1 mr-2 border-purple-700 uppercase bg-purple-400 text-black font-medium"> {todo.assignedTo} {/* Display the assigned person's name if available */} </span> )} {todo.text} {/* Display the todo text */} </span> </div> <div> <button onClick={() => deleteTodo(todo.id)} // Delete the todo on button click className="text-red-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5"> <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /> </svg> </button> <button onClick={() => { const name = prompt("Assign person to this task:"); assignPerson(todo.id, name); }} className="ml-2 text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5"> <path strokeLinecap="round" strokeLinejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" /> </svg> </button> </div> </div> ); }; ``` 在`TodoList.tsx`檔案中,加入以下程式碼來定義名為**`TodoList`**的 React 功能元件。此元件用於管理和顯示待辦事項清單。 ``` "use client"; import { TodoItem } from "./TodoItem"; // Importing the TodoItem component import { nanoid } from "nanoid"; // Importing the nanoid library for generating unique IDs import { useState } from "react"; // Importing the useState hook from React import { Todo } from "../types/todo"; // Importing the Todo type // Defining the TodoList component as a functional component export const TodoList: React.FC = () => { // State to hold the list of todos const [todos, setTodos] = useState<Todo[]>([]); // State to hold the current input value const [input, setInput] = useState(""); // Function to add a new todo const addTodo = () => { if (input.trim() !== "") { // Check if the input is not empty const newTodo: Todo = { id: nanoid(), // Generate a unique ID for the new todo text: input.trim(), // Trim the input text isCompleted: false, // Set the initial completion status to false }; setTodos([...todos, newTodo]); // Add the new todo to the list setInput(""); // Clear the input field } }; // Function to handle key press events const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { // Check if the Enter key was pressed addTodo(); // Add the todo } }; // Function to toggle the completion status of a todo const toggleComplete = (id: string) => { setTodos( todos.map((todo) => todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo ) ); }; // Function to delete a todo const deleteTodo = (id: string) => { setTodos(todos.filter((todo) => todo.id !== id)); }; // Function to assign a person to a todo const assignPerson = (id: string, person: string | null) => { setTodos( todos.map((todo) => todo.id === id ? { ...todo, assignedTo: person ? person : undefined } : todo ) ); }; return ( <div> <div className="flex mb-4"> <input className="border rounded-md p-2 flex-1 mr-2" value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={handleKeyPress} // Add this to handle the Enter key press /> <button className="bg-blue-500 rounded-md p-2 text-white" onClick={addTodo}> Add Todo </button> </div> {todos.length > 0 && ( // Check if there are any todos <div className="border rounded-lg"> {todos.map((todo, index) => ( <TodoItem key={todo.id} // Unique key for each todo item todo={todo} // Pass the todo object as a prop toggleComplete={toggleComplete} // Pass the toggleComplete function as a prop deleteTodo={deleteTodo} // Pass the deleteTodo function as a prop assignPerson={assignPerson} // Pass the assignPerson function as a prop hasBorder={index !== todos.length - 1} // Conditionally add a border to all but the last item /> ))} </div> )} </div> ); }; ``` 接下來,前往`/[root]/src/page.tsx`文件,新增以下程式碼,匯入`TodoList`和`Header`元件並定義名為`Home`的功能元件。 ``` import Header from "./components/Header"; import { TodoList } from "./components/TodoList"; export default function Home() { return ( <> <Header /> <div className="border rounded-md max-w-2xl mx-auto p-4 mt-4"> <h1 className="text-2xl text-white font-bold mb-4"> Create a to-do list </h1> <TodoList /> </div> </> ); } ``` 接下來,刪除`globals.css`檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } ``` 最後,在命令列上執行命令`npm run dev` ,然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看待辦事項清單產生器前端,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmd8j3brrtiqackalul1.png) **使用 CopilotKit 將 AI 功能整合到待辦事項清單產生器** ------------------------------------- 在本節中,您將學習如何將 AI 副駕駛新增至待辦事項清單產生器,以使用 CopilotKit 產生清單。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,我們將 CopilotKit React 元件新增至待辦事項清單產生器前端。 ### **將 CopilotKit 新增至待辦事項清單產生器前端** 在這裡,我將引導您完成將待辦事項清單產生器與 CopilotKit 前端整合以促進清單產生的過程。 首先,使用下面的程式碼片段匯入`/[root]/src/app/components/TodoList.tsx`檔案頂部的`useCopilotReadable`和`useCopilotAction`自訂掛鉤。 ``` import { useCopilotAction, useCopilotReadable } from "@copilotkit/react-core"; ``` 在`TodoList`函數內的狀態變數下方,新增以下程式碼,該程式碼使用`useCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的待辦事項清單。該鉤子使副駕駛可以讀取待辦事項清單。 ``` useCopilotReadable({ description: "The user's todo list.", value: todos, }); ``` 在上面的程式碼下方,新增以下程式碼,該程式碼使用`useCopilotAction`掛鉤來設定名為`updateTodoList`的操作,該操作將啟用待辦事項清單的產生。 此操作採用一個名為 items 的參數,該參數可以產生待辦事項列表,並包含一個根據給定提示產生待辦事項列表的處理程序函數。 在處理函數內部, `todos`狀態會使用新產生的 todo 清單進行更新,如下所示。 ``` // Define the "updateTodoList" action using the useCopilotAction function useCopilotAction({ // Name of the action name: "updateTodoList", // Description of what the action does description: "Update the users todo list", // Define the parameters that the action accepts parameters: [ { // The name of the parameter name: "items", // The type of the parameter, an array of objects type: "object[]", // Description of the parameter description: "The new and updated todo list items.", // Define the attributes of each object in the items array attributes: [ { // The id of the todo item name: "id", type: "string", description: "The id of the todo item. When creating a new todo item, just make up a new id.", }, { // The text of the todo item name: "text", type: "string", description: "The text of the todo item.", }, { // The completion status of the todo item name: "isCompleted", type: "boolean", description: "The completion status of the todo item.", }, { // The person assigned to the todo item name: "assignedTo", type: "string", description: "The person assigned to the todo item. If you don't know, assign it to 'YOU'.", // This attribute is required required: true, }, ], }, ], // Define the handler function that executes when the action is invoked handler: ({ items }) => { // Log the items to the console for debugging purposes console.log(items); // Create a copy of the existing todos array const newTodos = [...todos]; // Iterate over each item in the items array for (const item of items) { // Find the index of the existing todo item with the same id const existingItemIndex = newTodos.findIndex( (todo) => todo.id === item.id ); // If an existing item is found, update it if (existingItemIndex !== -1) { newTodos[existingItemIndex] = item; } // If no existing item is found, add the new item to the newTodos array else { newTodos.push(item); } } // Update the state with the new todos array setTodos(newTodos); }, // Provide feedback or a message while the action is processing render: "Updating the todo list...", }); ``` 在上面的程式碼下方,新增以下程式碼,程式碼使用`useCopilotAction`掛鉤來設定名為`deleteTodo`的操作,該操作使您能夠刪除待辦事項。 該操作採用名為id 的參數,該參數可讓您透過id 刪除待辦事項,並包含一個處理函數,該函數透過過濾掉具有給定id 的已刪除待辦事項來更新待辦事項狀態。 ``` // Define the "deleteTodo" action using the useCopilotAction function useCopilotAction({ // Name of the action name: "deleteTodo", // Description of what the action does description: "Delete a todo item", // Define the parameters that the action accepts parameters: [ { // The name of the parameter name: "id", // The type of the parameter, a string type: "string", // Description of the parameter description: "The id of the todo item to delete.", }, ], // Define the handler function that executes when the action is invoked handler: ({ id }) => { // Update the state by filtering out the todo item with the given id setTodos(todos.filter((todo) => todo.id !== id)); }, // Provide feedback or a message while the action is processing render: "Deleting a todo item...", }); ``` 之後,請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotPopup`和`TodoList`元件,如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL,而`CopilotPopup`則呈現應用程式內聊天機器人,您可以提示產生待辦事項清單。 ``` export default function Home() { return ( <> <Header /> <div className="border rounded-md max-w-2xl mx-auto p-4 mt-4"> <h1 className="text-2xl text-white font-bold mb-4"> Create a to-do list </h1> <CopilotKit runtimeUrl="/api/copilotkit"> <TodoList /> <CopilotPopup instructions={ "Help the user manage a todo list. If the user provides a high level goal, " + "break it down into a few specific tasks and add them to the list" } defaultOpen={true} labels={{ title: "Todo List Copilot", initial: "Hi you! 👋 I can help you manage your todo list.", }} clickOutsideToClose={false} /> </CopilotKit> </div> </> ); } ``` 之後,執行開發伺服器並導航至[http://localhost:3000](http://localhost:3000/) 。您應該會看到應用程式內聊天機器人已整合到待辦事項清單產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryeqnymp5lm397thpn5f.png) ### **將 CopilotKit 後端加入博客** 在這裡,我將引導您完成將待辦事項清單產生器與 CopilotKit 後端整合的過程,該後端處理來自前端的請求,並提供函數呼叫和各種 LLM 後端(例如 GPT)。 首先,在根目錄中建立一個名為`.env.local`的檔案。然後將下面的環境變數加入到儲存`ChatGPT` API 金鑰的檔案中。 ``` OPENAI_API_KEY="Your ChatGPT API key” ``` 若要取得 ChatGPT API 金鑰,請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0bibiuouk5wvrxcuy2g.jpeg) 之後,轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中,建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中,建立一個名為`route.ts`的文件,其中包含設定後端功能以處理POST 請求的程式碼。 ``` // Import the necessary modules from the "@copilotkit/backend" package import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/backend"; // Define an asynchronous function to handle POST requests export async function POST(req: Request): Promise<Response> { // Create a new instance of CopilotRuntime const copilotKit = new CopilotRuntime({}); // Use the copilotKit to generate a response using the OpenAIAdapter // Pass the incoming request (req) and a new instance of OpenAIAdapter to the response method return copilotKit.response(req, new OpenAIAdapter()); } ``` 如何產生待辦事項列表 ---------- 現在轉到您之前整合的應用程式內聊天機器人,並給它一個提示,例如「我想去健身房做全身運動。加入到我應該遵循的鍛煉程序列表” 生成完成後,您應該會看到應遵循的全身運動程序列表,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48n9ssymxhm5i2yv0pdf.png) 您可以透過向聊天機器人發出「將待辦事項清單指派給 Doe」之類的提示來將待辦事項清單指派給某人。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r1f816c1o8da5z0t1kk.png) 您可以透過向聊天機器人提供「將待辦事項清單標記為已完成」等提示來將待辦事項清單標記為已完成。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx2wpg6ee7hswjl68t4q.png) 您可以透過向聊天機器人發出「刪除待辦事項清單」之類的提示來刪除待辦事項清單。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksoj6mtlxt8ag8opsocs.png) 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼:https://github.com/TheGreatBonnie/AIpoweredToDoListGenerator --- 原文出處:https://dev.to/copilotkit/how-to-build-an-ai-powered-to-do-list-nextjs-gpt4-copilotkit-20i4

加入我們參加下一個前端挑戰:六月版

等待已經結束!我們又帶著另一場前端挑戰賽回來了。 持續到**6 月 9 日**,前端挑戰:六月版將提供兩個六月主題提示: **CSS Art**和**Glam Up My Markup** 。對於那些錯過“一位元組解釋器”的人,我們保證很快就會恢復該提示! 像往常一樣,每個提示都會有一名獲勝者。這是贏得吹牛權利的兩次機會、DEV 商店的禮物和專屬 DEV 徽章。 另外,如果您不知道 - 徽章可以疊加在您的個人資料上以炫耀多次獲勝!但當然,這不是關於獲勝的目的地,而是關於*旅程*。我們希望這是一個挑戰自我並享受樂趣的機會。 繼續閱讀以了解每個提示以及如何參與! 我們的兩個提示: -------- ### CSS 藝術:六月 畫出您想到六月時想到的事情。根據您居住的地方,這可能是夏至或落葉和冬季的過渡。或者也許是父親節或驕傲月。 當您想到六月時,您會想到什麼,請告訴我們! 這是供任何想要直接參與的人使用的提交模板,但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/frontend-2024-05-29)上的所有評審標準和挑戰規則。 {% 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%2Fchallenges%2Ffrontend-2024-05-202020CSS% %3A%20June.\_%0A%0A%23%23%20靈感%0A%3C! --%20什麼%20是%20you%20highlighting%20today%3F%20--%3E%0A%0A%23 %23% 20Demo%20%0A%3C!--%20Show%20us%20your%20CSS%20Art!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20post%20(%200%20(%20the%參見20FAQ%20section% 20of%20the%20challenge%20page)%20or%20you%20can%20share%20an%20image%20of%20your%20project%20and%20share%20a%200%20link%200%200%。 20--%3E% 0A%0A%23%23%20旅程%20%0A%3C!--%20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C%20anything%20you %20are%20尤其%20proud%20of %2C%20what%20you%20hope%20to%20do%20next%2C%20etc.%20--%3E%0A%0A%3C!--%20Team%20Submissions%3A% 20Please%20pick%20one%20member%20to %20發布%20the%20submission%20和%20credit%20隊友%20by%20listing%20他們的%20DEV%20用戶名%20直接%20in%20the% 20the%20post。 20。 )。 CSS 藝術提交模板 {% 結束%} ### 讓我的標記變得迷人:海灘 使用 CSS 和 JavaScript 使下面的入門 HTML 標記美觀、互動且有用。我們提供了一個網站的入門模板,其中列出了世界上最好的海灘以及每個海灘的一些資訊。由於該模板不包含照片,因此您可能需要發揮創意,使其具有視覺吸引力。 您提交的內容應該比我們提供的 HTML 更有趣、更具互動性,但也應該可用且易於存取。您不應直接編輯提供的 HTML,除非是透過 JavaScript。我們期待風格和實質。您可以加入基本樣板,包括元標記等以用於演示目的。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Best Beaches in the World</title> </head> <body> <header> <h1>Best Beaches in the World</h1> </header> <main> <section> <h2>Take me to the beach!</h2> <p>Welcome to our curated list of the best beaches in the world. Whether you're looking for serene white sands, crystal-clear waters, or breathtaking scenery, these beaches offer a little something for everyone. Explore our top picks and discover the beauty that awaits you.</p> </section> <section> <h2>Top Beaches</h2> <ul> <li> <h3>Whitehaven Beach, Australia</h3> <p>Located on Whitsunday Island, Whitehaven Beach is famous for its stunning white silica sand and turquoise waters. It's a perfect spot for swimming, sunbathing, and enjoying the natural beauty of the Great Barrier Reef.</p> </li> <li> <h3>Grace Bay, Turks and Caicos</h3> <p>Grace Bay is known for its calm, clear waters and powdery white sand. This beach is ideal for snorkeling, diving, and enjoying luxury resorts that line its shore.</p> </li> <li> <h3>Baia do Sancho, Brazil</h3> <p>Baia do Sancho, located on Fernando de Noronha island, offers stunning cliffs, vibrant marine life, and crystal-clear waters, making it a paradise for divers and nature lovers.</p> </li> <li> <h3>Navagio Beach, Greece</h3> <p>Also known as Shipwreck Beach, Navagio Beach is famous for the rusting shipwreck that rests on its sands. Accessible only by boat, this secluded cove is surrounded by towering cliffs and azure waters.</p> </li> <li> <h3>Playa Paraiso, Mexico</h3> <p>Playa Paraiso, located in Tulum, offers pristine white sands and turquoise waters against the backdrop of ancient Mayan ruins. It's a perfect blend of history and natural beauty.</p> </li> <li> <h3>Anse Source d'Argent, Seychelles</h3> <p>Anse Source d'Argent is renowned for its unique granite boulders, shallow clear waters, and soft white sand. This beach is perfect for photography, snorkeling, and relaxation.</p> </li> <li> <h3>Seven Mile Beach, Cayman Islands</h3> <p>Stretching for seven miles, this beach offers soft coral sand, clear waters, and numerous activities such as snorkeling, paddleboarding, and enjoying beachside restaurants and bars.</p> </li> <li> <h3>Bora Bora, French Polynesia</h3> <p>Bora Bora is known for its stunning lagoon, overwater bungalows, and vibrant coral reefs. It's a perfect destination for honeymooners and those seeking luxury and tranquility.</p> </li> <li> <h3>Lanikai Beach, Hawaii</h3> <p>Lanikai Beach features powdery white sand and calm, clear waters, making it a favorite for swimming, kayaking, and enjoying the scenic views of the Mokulua Islands.</p> </li> <li> <h3>Pink Sands Beach, Bahamas</h3> <p>Pink Sands Beach is famous for its unique pink-hued sand, clear waters, and serene atmosphere. It's an idyllic spot for beachcombing, swimming, and relaxing in paradise.</p> </li> </ul> </section> </main> </body> </html> ``` 這是供任何想要直接參與的人使用的提交模板,但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/frontend-2024-05-29)上的所有評審標準和挑戰規則。 {% 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%2Fchallenges%2FF-202F%2F%2Fdev.to%2Fchallenges%2FF-202F-frontend5-294-front05-29)% 2C%20Glam%20Up%20My%20Markup%3A%20Beaches\_%0A%0A%23%23%20What%20I%20Built%0A%0A%3C!--%20告訴%20us%20what%20you%20what0%200and% 20what %20you%20were%20looking%20to%20實作。 20direct% 20將%20an%20editor%20嵌入%20this%20post%20(參見%20the%20challenge%20頁的%20the%20FAQ%20section%20)%20或%20you%20can%20share%20an%% 20of%20your%20project%20和%20share%20a%20public%20link%20到%20the%20碼。告訴%20us%20about%20your%20process%2C %20what%20you%20已學會%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what%20you%20hope%20to%20what%20next20what%20you%20hope%20to%20what%C %20etc.%20--%3E%0A%0A% 3C! --%20Team%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the%20submission%20and%20ammacre%20and%200%20and%200%20and%200%20and%200%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%。 20listing%20their%20DEV%20usernames%20directly%20in%20the%20body %20of%20the%20post。%20--%3E%0A%0A%3C! 20考慮%20為%20您的%20程式碼加入%20a%20許可證%20。 %20cover%20image%20to%20your%20post%20(如果%20you%20想要)。 --%3E %} 使我的標記提交模板更加迷人 {% 結束%} 如何參與 ---- 為了參與,您需要使用與每個提示關聯的提交範本來發布貼文。 請在提交之前查看我們的[評審標準、規則、指南和常見問題解答頁面,](https://dev.to/challenges/frontend-2024-05-29)以便您了解我們的參與指南和官方競賽規則(例如資格要求)。 重要的日子 ----- - 5 月 29 日:前端挑戰:六月版開始! - 6 月 9 日:提交截止時間為太平洋夏令時間晚上 11:59 - 6 月 11 日:得獎者公佈 ![驕傲月快樂](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExemNkZWg1YTQ5dWw3Mmg1Z2tpdTdzbnM3c2Zocm1obmwzajBxYXgzNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/4C0NVY0fI5OOuTOCUe/giphy.gif) 我們很高興看到您六月的專案!問題?請在下面詢問他們。 祝你好運,編碼愉快! --- 原文出處:https://dev.to/devteam/join-us-for-the-next-frontend-challenge-june-edition-3ngl

🚀 利用這些前端資源加速您的開發! 🚀

🚀 利用這些資源加速您的發展! 🚀 👋大家好! 👋 我很高興能分享我多年來收集的這些資源,這些資源在我從事的許多專案中都是救星。該編譯匯集了從使用者介面建立到效能最佳化等各種工具和函式庫。希望您也能充分利用這些精彩資源。讓我們開始吧! 請隨意評論您使用或感興趣的任何其他資源,以便我可以將它們加入到帖子中! ### 使用者介面: - [Material Tailwind](https://www.material-tailwind.com) :一個強大的 UI 套件,結合了 Material Design 和 Tailwind CSS - [Aceternity UI](https://ui.aceternity.com) :適合您下一個專案的時尚而現代的 UI 元件 - [NextUI](https://nextui.org) :使用 NextUI 輕鬆製作漂亮的介面 - [ChakraUI](https://chakra-ui.com) :一個簡單、模組化且可存取的元件庫 - [交易視圖圖表](https://www.tradingview.com/lightweight-charts/):使用 TradingView 的輕量級圖表增強您的資料視覺化遊戲 - [AutoAnimate](https://auto-animate.formkit.com) :使用 AutoAnimate 輕鬆創造令人驚嘆的動畫 - [React-magic-motion](https://www.react-magic-motion.com) :為你的 React 元件加入一點魔力 - [Keep React](https://react.keepdesign.io) :讓你的 React 元件保持新鮮和時尚 - [Daisy UI](https://daisyui.com) :使用 Daisy UI 建立令人愉悅的介面 - [ShadCn](https://ui.shadcn.com) :透過時尚優雅的元件提升您的 UI - [剪輯路徑](https://bennettfeely.com/clippy/):使用 Clippy 對形狀進行創意 - [Radix](https://www.radix-ui.com/primitives) :使用 Radix 建立強大且可組合的 UI - [佈局產生器](https://layout.bradwoods.io):輕鬆設計靈活的佈局 - [實用工具](https://omatsuri.app):漸層、遊標等的便利工具包 - [圖像產生器](https://www.freepik.com/pikaso):使用高品質圖像立即美化您的設計 - [按鈕](https://buttons.ibelick.com):用風格來扣住你的使用者介面 - [PrimeReact](https://primereact.org) :React 應用程式的主要元件 - [一切盡在一頁](https://freesets.vercel.app):探索精選的資源集合 - [Beer CSS](https://www.beercss.com) :基於 Material Design 3 的語意 HTML CSS 框架。 ### 漸層: - [Firecms](https://neat.firecms.co) :為您的專案提供動態漸變 - [Shadergradient](https://www.shadergradient.co) :輕鬆創造令人驚嘆的著色器漸變 ### SVG: - [形狀](https://shapes.framer.website):適合您設計的美麗 SVG 形狀 - [SVG](https://svgl.vercel.app) :發現大量 SVG - [SVG 插圖](https://undraw.co/illustrations):使用 Undraw 的插圖為您的專案增添活力 ### 其他的: - [滑桿 — Swiper](https://swiperjs.com) :無縫滑動內容 - [Toast 通知 — Sonner](https://sonner.emilkowal.ski) :Toast 通知變得簡單 - [Atropos - 3D 元素](https://atroposjs.com):為您的專案加入沉浸式 3D 元素 - [自動動畫(原生 Javascript)](https://auto-animate.formkit.com) :使用原生 JavaScript 輕鬆為元素製作動畫 - [Vaul (Slider desde abajo)](https://vaul.emilkowal.ski) :用 Vaul 提升您的滑桿 - [影片效能優化器](https://lite.youtube.com):使用 Lite YouTube Web Component 優化影片效能 - [日曆](https://wicky.nillia.ms/cally):簡化您的日程安排流程 - [對比度選擇器](https://coolors.co/contrast-checker/483c14-d2cfcb):使用 Coolors 的對比度檢查器確保可存取性 - [影像優化器](https://squoosh.app):壓縮影像以獲得更好的性能 ### 順風: - [動畫](https://www.tailwindcss-animated.com):使用 Tailwind CSS Animated 為您的 UI 增添風格 - [Intersection Observer](https://github.com/heidkaemper/tailwindcss-intersect) :Tailwind CSS Intersect 用來觀察交叉路口 - [背景](https://bg.ibelick.com):輕鬆美化您的背景 ### JavaScript: - [Masonry Grid](https://masonry.desandro.com) :輕鬆建立動態網格佈局 - [MiniMasonry](https://spope.github.io/MiniMasonry.js) :磚石佈局的輕量級替代方案 - [Gallery PhotoSwipe](https://photoswipe.com) :使用 PhotoSwipe 優雅地展示您的影像 - [Gallery LightGallery](https://www.lightgalleryjs.com) :LightGallery 提供令人驚嘆的影像畫廊 - [Tempo](https://tempo.formkit.com) :使用 Tempo 簡化基於時間的操作 - [Tippy(工具提示)](https://atomiks.github.io/tippyjs) :透過可自訂的工具提示增強使用者體驗 - [Intersection Observer](https://www.youtube.com/watch?v=T24PsErQGPg) :Intersection Observer 高效能滾動指南 - [無限滾動](https://www.youtube.com/watch?v=FA1Y4pamIP8):輕鬆實現無限滾動 - [Just](https://github.com/angus-c/just) :常見 JavaScript 實用程式的函式庫 - [GLTFs into JSX](https://github.com/pmndrs/gltfjsx) :將 GLTF 檔案轉換為 JSX 元件 ### 反應: - [計數器](https://use-count-up.vercel.app):動態計算你的數字 - [砌體佈局](https://blog.logrocket.com/create-responsive-masonry-layouts-react-app):在 React 中建立響應式砌體佈局 - [拖放](https://drag-and-drop.formkit.com):輕鬆實現拖放功能 - [FilePond](https://pqina.nl/filepond) :使用 FilePond 簡化檔案上傳 - [Faker](https://fakerjs.dev) :用 Faker 產生真實的假資料 - [隨機](https://www.npmjs.com/package/random-words):用隨機單字為你的專案增添趣味 - [圖表](https://www.chartjs.org/docs/latest):使用 Chart.js 完美地視覺化資料 - [UseSound](https://github.com/joshwcomeau/use-sound) :將聲音效果合併到您的 React 應用程式中 - [ReCharts](https://recharts.org/en-US) :基於 React 元件建構的圖表庫 - [浮動 UI(工具提示)](https://floating-ui.com) :互動式工具提示的浮動 UI - [Tippy(工具提示)](https://github.com/atomiks/tippyjs-react) :用於 React 應用程式的 Tippy.js - [日曆](https://wicky.nillia.ms/cally):滿足您所有日程安排需求的另一個日曆資源 - [CMDK Console](https://github.com/pacocoursey/cmdk) :React 應用程式的控制台 --- 原文出處:https://dev.to/miguelrodriguezp99/frontend-resources-1dl4

動態導覽選單

上週末,我使用 HTML 和 CSS 編寫了[互動式導覽](https://codepen.io/alvaromontoro/full/yLWeozP)(這次沒有使用 JavaScript): https://codepen.io/alvaromontoro/pen/yLWeozP (如果您錯過了初始動畫,或者想再次看到它,請點擊右下角的「重新執行」。) --- 對於這個演示: - 我嘗試堅持使用語義 HTML 並提供一種可存取的方法(希望我沒有搞亂這部分)。 - 初始載入動畫是只執行一次並在之後保持原樣的`animation` 。 - 使用 3D CSS 使清單元素彈出和返回。 - 焦點和懸停狀態受到同等對待,因此滑鼠和鍵盤使用者都會獲得相似的體驗。 - 它具有減少運動的樣式,可以降低動畫和過渡速度,因此沒有太多的運動(導航專案仍會彈出,但不會動畫化)。 - 我使用`drop-shadow()`過濾器產生整個選單的陰影(獨立於選單專案的陰影)。 - 還使用`box-shadow`為兄弟姐妹加入嵌入陰影並提供更大的深度感。我一開始是用陰影來做的,但我遇到了一些麻煩,所以我可能會把它們弄得過於複雜了。 - 我使用`:has()`選擇處於活動狀態的兄弟姐妹(前一個和後一個),並為其加入一些深度和陰影。 - 它使用 Font Awesome 作為圖示。 感謝您檢查該元件。如果您有任何疑問,請告訴我。歡迎所有回饋和建議! --- 原文出處:https://dev.to/alvaromontoro/animated-navigation-menu-57o7

可以節省您時間的 6 個 CSS 速查表

我建立了 6 個 CSS 備忘單,它們非常有用。讓我們來看看他們。 CSS 彈性盒 ------- ![CSS Flexbox 備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upemhcv181a68r24y9b1.jpg) CSS 網格 ------ ![CSS 網格備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xln52shzdvl60idrbx4j.png) CSS 位置 ------ ![CSS 位置備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wmqk99kbfi2zq4a88cu.png) CSS 顯示值 ------- ![CSS 顯示值備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjhzpqq9dsx7whf1vp1z.png) CSS 選擇器 ------- ![CSS 選擇器備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1j3lpcgvm963pr2mgff.png) CSS :nth-child 選擇器 ------------------ ![CSS:nth-child 選擇器備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewhjn0mkxo3822f9fz28.png) **[按此](https://github.com/WebdevShefali/CheatSheets)下載所有高品質的備忘單。** 這就是今天的全部內容。 我希望這有幫助。 謝謝閱讀。 欲了解更多此類內容,[請點擊此處](https://shefali.dev/blog)。 您也可以在[X(Twitter)](https://twitter.com/Shefali__J)上關注我,取得日常 Web 開發技巧。 繼續編碼! [![請我喝杯咖啡](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/devshefali) --- 原文出處:https://dev.to/devshefali/the-top-6-css-cheatsheets-that-will-save-you-hours-2lp1

可以使用 Python 和 AI 建構的 25 個專案

今天,我們將介紹 25 個可以使用 Python 和 AI 模型建構的副專案。 大多數專案都會有生產級程式碼,因此您可以學到很多東西。 我們開始做吧! --- [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) 大多數初始專案都會使用 Taipy,所以讓我們討論一下這個概念的用例。 Taipy 是一個開源 Python 庫,可用於輕鬆的端到端應用程式開發,具有假設分析、智慧管道執行、內建調度和部署工具。 需要明確的是,Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能,而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具,但在處理大型資料集時,其效能可能會顯著下降,這使得它在生產級使用上不切實際。 另一方面,Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy,您將親身體驗其用戶友好的介面和高效的資料處理。 ![大資料支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvk0tozn0lgj083rzcb.gif) Taipy 有許多整合選項,可以輕鬆地與領先的資料平台連接。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yv31uir3erina587zp8.png) 開始使用以下命令。 ``` pip install taipy ``` 他們還使用分散式運算提高了效能,但最好的部分是 Taipy,它的所有依賴項現在都與 Python 3.12 完全相容,因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdvnbejf9aivxmqsd3hx.png) 另一個有用的事情是,Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 如果您想閱讀部落格來了解程式碼庫結構,您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難,但 Taipy 提供了 10 多個演示教程,其中包含程式碼和適當的文件供您遵循。我將詳細討論其中一些專案! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 這些用例非常驚人,所以一定要檢查一下。 Taipy 在 GitHub 上有超過 8,500 個 Star,並且處於`v3.1`版本,因此它們正在不斷改進。 https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 1.[實時污染儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/pollution_sensors/) ----------------------------------------------------------------------------------------- 使用工廠周圍的感測器測量空氣品質的用例,展示 Taipy 儀表板流資料的能力。 資料在另一台伺服器上產生並透過 WebSocket 發送到此 Taipy 應用程式。 然後 Taipy 處理資料並將其顯示在儀表板上。 當收到新資料時,儀表板會即時更新。 ![即時污染儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0i6pm0ggx6yb655uvd1.png) 如果您想要有關可視化資料流的教程,請查看[有關多線程的文件](https://docs.taipy.io/en/release-3.0/knowledge_base/tips/multithreading/)。 它討論瞭如何建立發送者腳本和接收者腳本,包括套接字參數等。 它涉及到前端和後端的概念。 查看[現場演示](https://realtime-pollution.taipy.cloud/)。 https://github.com/Avaiga/demo-realtime-pollution Star 即時污染儀表板 ⭐️ --- 2.[詐欺檢測](https://github.com/Avaiga/demo-fraud-detection) -------------------------------------------------------- Taipy 應用程式可分析信用卡交易以偵測詐欺行為。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v90fuimlplxuj4llp1zb.png) 它顯示信用卡交易清單。 用戶可以選擇一個日期範圍來預測詐欺。 然後,該應用程式將使用 XGB 模型將潛在的詐欺交易標記為紅色或黃色。 用戶可以選擇一個交易來查看模型預測的解釋,以及客戶的其他交易。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8odxbhc9h3z3vzm4i4yk.png) 使用者還可以選擇模型的閾值。閾值是模型輸出,高於該閾值的交易將被視為詐欺。使用者可以根據顯示的混淆矩陣並透過查看誤報和漏報交易來選擇模型。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8ri5h0ky5zie53g2wk7.png) 查看[現場演示](https://fraud-detection.taipy.cloud/Transactions)。 https://github.com/Avaiga/demo-fraud-detection 明星詐欺偵測 ⭐️ --- 3.[新冠儀表板](https://github.com/Avaiga/demo-covid-dashboard) --------------------------------------------------------- 這裡使用 2020 年的 Covid 資料集。 頁面顯示有關 COVID-19 的不同圖表和資訊。還有一個預測頁面來預測傷亡人數。 該應用程式包括四個部分,如下所示: > ✅ 國。 - 特定國家/地區的 COVID-19 統計資料。 - 在累積資料視圖和密度資料視圖之間輕鬆切換。 - 用於動態資料探索的互動式長條圖。 - 餅圖顯示病例分佈(確診、復健、死亡)。 ![國家](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j22qqjmpd39qwwb4it4o.png) > ✅ 地圖。 透過動態可縮放顏色編碼地圖直觀地展示 COVID-19 的影響。 ![地圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ngdy1pkmujgdel1rz81.png) > ✅ 預測。 透過為不同的預測日期和不同的國家建立場景來產生 COVID-19 預測。 這會分別使用 ARIMA 模型和線性迴歸模型產生 2 個不同的預測(橘色的預測\_x 和綠色的預測\_y)。 透過指定名稱、指定預測日期、選擇國家/地區並點擊「提交」按鈕繼續來啟動新場景。 您可以在“結果”部分的“場景”選項卡中存取它。 ![預測](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8idl5ys0zhkztexujcmh.png) > ✅ 世界。 全球 COVID-19 統計資料透過折線圖和圓餅圖進行匯總。透過更改`Absolute`和`Relative`之間的切換可以看到 Covid 國家/地區影響的比較。 ![世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9kd3rjxa7qjqne798ua.png) 總的來說,對於您的業餘專案和建立非常酷的專案來說,這是一個非常有用的應用程式:) 您可以查看[現場演示](https://covid-dashboard.taipy.cloud/Country)。 https://github.com/Avaiga/demo-covid-dashboard Star Covid 儀表板 ⭐️ --- 4.[建立 LLM 聊天機器人](https://github.com/Avaiga/demo-chatbot) -------------------------------------------------------- 該演示展示了 Taipy 使最終用戶能夠使用 LLM 執行推理的能力。在這裡,我們使用 GPT-3 建立一個聊天機器人,並將對話顯示在互動式聊天介面中。 ![法學碩士聊天機器人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olaw6u8w3fj2wrg0au2r.png) 下面給出了主要函數,該函數將字串提示(即用戶訊息)作為輸入,並從 LLM 傳回回應字串。 ``` def request(state: State, prompt: str) -> str: """ Send a prompt to the GPT-3 API and return the response. Args: - state: The current state. - prompt: The prompt to send to the API. Returns: The response from the API. """ response = state.client.chat.completions.create( messages=[ { "role": "user", "content": f"{prompt}", } ], model="gpt-3.5-turbo", ) return response.choices[0].message.content ``` 您可以閱讀有關如何建立此 LLM 聊天機器人的[完整文件](https://docs.taipy.io/en/release-3.0/knowledge_base/tutorials/chatbot/)。 最好的部分是,您可以根據您的使用情況輕鬆更改程式碼以使用任何其他 API 或模型。 您可以查看[現場演示](https://demo-llm-chat.taipy.cloud/)。 https://github.com/Avaiga/demo-chatbot 明星聊天機器人 ⭐️ --- 5.[即時人臉辨識](https://github.com/Avaiga/demo-face-recognition) ----------------------------------------------------------- 該演示將人臉辨識無縫整合到我們的平台中,借助 OpenCV 庫,使用網路攝影機提供即時人臉偵測體驗。 ![即時人臉辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs9kpit8byxsqq67mhql.png) 您可以非常輕鬆地使用它: A。打開應用程式時,您會透過網路攝影機看到自己。你的臉周圍有一個紅色方塊,上面寫著別人的名字。 b.透過點擊`Capture`按鈕並多次輸入您的名字來訓練模型辨識您。 C。現在點選`Re-train`按鈕。現在應該會出現您的名字。模型現在認出了您。 查看[現場演示](https://face-recognition.taipy.cloud/)。 確保在瀏覽器中啟用相機設置,這是首要條件! 進行人臉偵測和人臉辨識的程式碼位於`src/demo/faces.py`下。自述文件中提供了完整的目錄結構。 https://github.com/Avaiga/demo-face-recognition 明星人臉辨識 ⭐️ --- 6.[庫存可視化](https://github.com/Avaiga/demo-stock-visualization) ------------------------------------------------------------- 在金融市場領域,資料為王。快速、輕鬆地視覺化歷史股票資料並做出預測的能力對於投資者和金融分析師來說至關重要。 這是一個股票資料儀表板,具有互動式視覺元素,可以視覺化歷史股票資料並對 1 至 5 年內的股票進行預測。 ![庫存視覺化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz5jagdfvcnup1jq7qgx.png) 由 Facebook 使用 Taipy 和[Prophet Library](https://facebook.github.io/prophet/docs/quick_start.html)建構。此示範適用於高於 3.8 的 Python 版本。 您可以這樣使用它: A。選擇您想要預測的股票程式碼。 b.打開歷史資料面板。 C。選擇預測週期(從 1 到 5)。 d.點選`PREDICT`按鈕。 e.在預測資料面板中查看您的預測。 F。使用不同的程式碼重複嘗試以比較結果。 您也可以透過點擊底部的`More info`按鈕以表格形式取得預測範圍。 您可以在[src 目錄](https://github.com/Avaiga/demo-stock-visualization/tree/develop/src)下找到負責的主要原始碼。 這個完全互動的 Web 應用程式只需不到 120 行 Python 程式碼即可建立。 查看[現場演示](https://stock-visualization.taipy.cloud/)。 https://github.com/Avaiga/demo-stock-visualization 明星股票視覺化 ⭐️ --- 7.[情感分析](https://github.com/Avaiga/demo-sentiment-analysis)。 ------------------------------------------------------------ 情感分析就像一個機器人,可以從人們的言語中讀出他們的感受。 它會根據快樂、悲傷或憤怒等字眼來判斷它們的感覺是好是壞。然後,它告訴我們大多數人在說話時是高興還是悲傷。 因此,只需看看人們所說的內容,它就可以幫助我們了解人們對事物(例如電影或遊戲)的感受! 簡而言之,它是自然語言處理(NLP)中的一種技術,用於確定文本中傳達的情緒基調。它可以幫助企業和個人更好地掌握書面內容所表達的情感和語氣。 結果是一個兩頁的應用程式,它使用情感分析模型來分析輸入和整個文本。 第一頁分析使用者輸入,而第二頁讓使用者選擇要上傳的檔案(文字)。該文本將被分析並顯示背後的情感。 > ✅ 第 1 頁:Line - 分析使用者輸入 我們的情緒分析應用程式的初始頁面名為“Line”,用於即時分析使用者輸入。無論是簡短的句子還是較長的段落,只需將文字輸入或貼到輸入框中,Taipy 就會快速評估文本中傳達的情感。 ![第1頁情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/826k2if80arn6y3uz3dz.png) > ✅ 文字 - 上傳和分析文字文件 第二個頁面名為“文字”,允許使用者上傳整個文字檔案 (.txt) 以進行全面的情感分析。 用戶可以從他們的設備中選擇一個文字文件,該應用程式將提供對整個文件所表達的情緒的洞察。 此功能對於處理較長的文字(例如文章、報告或廣泛的客戶回饋)非常有用。 ![第2頁情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb3xmtfi7fz6vm8807ph.png) 您可以查看[現場演示](https://sentiment-analysis.taipy.cloud/line)。 https://github.com/Avaiga/demo-sentiment-analysis 明星情感分析 ⭐️ --- 8.[漂移檢測](https://github.com/Avaiga/demo-drift-detection)- 檢測糖尿病資料集中的漂移。 ----------------------------------------------------------------------- ![漂移檢測](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey1f4ygskvkk6dwqc2c8.png) 資料漂移是主要在機器學習中使用的概念,其中推理資料的分佈偏離訓練資料的分佈。 各種因素,例如底層資料來源的變化、資料收集過程的變化或資料儲存過程的變化,都可能導致資料漂移。 這通常會導致稱為訓練服務偏差的效能問題,其中用於推理的模型不用於推理資料的分佈並且無法泛化。 存在統計測試來檢測資料集中的漂移。這些檢定計算兩個系列來自同一分佈的機率。如果機率低於閾值,我們認為存在漂移。 如何使用該應用程式? ✅ 選擇比較資料集。 在這裡,我們選擇 data\_big,這是一個與參考資料集類似的資料集,但其中的行具有較高的血壓值。我們在血壓分佈圖上看到,與綠色參考資料集相比,紅色比較資料集的分佈向右移動。 ![資料集](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1752b8elnpwalycyex4.png) ✅ 按一下此處執行場景。 ![執行應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cel6qa0xxiplxgghwhyi.png) ✅ 在頁面底部可視化結果。 在這裡,我們看到血壓列的柯爾莫哥洛夫檢定的 p 值低於 0.05,這意味著兩個血壓資料集來自同一分佈的機率低於 5%。我們可以拒絕兩個資料集來自相同分佈的假設,並得出血壓列存在漂移的結論。 ![視覺化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mh8lftfjiypr27p10ec.png) 您可以按照下面所附的即時示範中的步驟操作,並在 GitHub 上查看原始程式碼。 這使用資料管道來比較資料集並檢測漂移。 ![資料管道](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7s7v5hpicjyoe2eojwx8.png) 查看[現場演示](https://drift-detection.taipy.cloud/)。 https://github.com/Avaiga/demo-drift-detection 星漂移偵測 ⭐️ --- 9.[錢包明智](https://github.com/Ujj1225/from_Taipy-walletWISE) ---------------------------------------------------------- ![錢包明智](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vva4tu9dxrz9fgaiavlb.png) WalletWise 就像是我們財務的友善幫手,幫助我們追蹤收入和支出。它使用 Gemini 進行交易,使用 Taipy 來了解支出。 一些不錯的功能是: ✅ 使用者可以輸入他們的收入和支出以及部門作為標題。這使他們能夠了解和探索他們從哪個部門賺了多少錢以及在哪個部門花了多少錢。 ✅ 對使用者的收入和支出進行分析,以數學方式顯示,並顯示 7 個做出更好、更明智的財務決策的提示。 ✅ 實現了一個視覺化工具,您可以在其中看到您賺錢的不同標題和您花錢的不同標題。 這是一個非常優秀的用例,並且在創造力方面非常好。 您可以閱讀[安裝說明](https://github.com/Ujj1225/from_Taipy-walletWISE?tab=readme-ov-file#installation)並查看[專案演示](https://github.com/Ujj1225/from_Taipy-walletWISE?tab=readme-ov-file#demo)。 https://github.com/Ujj1225/from\_Taipy-walletWISE Star WalletWise ⭐️ --- 10.[太皮象棋](https://github.com/KorieDrakeChaney/taipy-chess) ---------------------------------------------------------- ![棋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xasxqldf7z1q5ie3r4nn.png) 所有應用程式中我最喜歡的一個,因為我喜歡國際象棋。哈哈! 這是一個基於20,000盤棋的國際象棋視覺化工具。您可以查看所有比賽、他們參加的開局、對手、表現最好的開局以及最成功的開局。 您可以查看資料的熱圖和圖表。 ![總移動熱圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh1llp4vx24xtxjji042.png) 總移動熱圖 ![棋子的第一個動作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s9do6lop5immbmjtqwa.png) 棋子的第一個動作 您可以觀看 Korie 的[示範](https://github.com/KorieDrakeChaney/taipy-chess?tab=readme-ov-file#demo)。我愛它 :) 這清楚地表明我們使用 Taipy 的可能性沒有限制。 https://github.com/KorieDrakeChaney/taipy-chess Star Taipy Chess ⭐️ --- 11.[奧運獎牌](https://github.com/enarroied/Olympic-Medals-Taipy-App) ---------------------------------------------------------------- ![奧運獎牌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkl0llaopepdb1s2jxy2.png) 這是一個 Taipy 儀表板,顯示從現代奧運會開始到 2024 年初頒發的奧運獎牌資訊(即不包括 2024 年巴黎奧運會)。 ✅ 儀表板有兩個選項卡: - 一個選項卡顯示所有奧運獎牌的總結資料 - 第二個選項卡重點關注奧林匹克委員會(國家,但也包括特別委員會,例如難民委員會等)獲得的獎牌。 它還具有多種類型的圖表,例如長條圖、旭日圖、折線圖、分區統計圖和網格圖。 另外,儀表板會根據所選年份和區域類型動態更新資料。 您可以在這裡觀看演示! https://www.youtube.com/watch?v=\_1X7etBFTk0 其中涉及到許多概念,而 Eric 實現了一個非常優秀的用例! https://github.com/enarroied/Olympic-Medals-Taipy-App 奧運明星獎牌 ⭐️ --- 12. [GPT Researcher](https://github.com/assafelovic/gpt-researcher) - 基於 GPT 的線上研究自主代理。 --------------------------------------------------------------------------------------- ![GPT研究員](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vbqw84mrere5bcfalhk.png) GPT Researcher 是領先的自主代理,負責處理從準確的來源收集到研究結果組織的一切事務。 好的一點是它也引用了研究結果的來源,從而提高了可信度。我喜歡整個概念:) 一些瘋狂的功能是: ✅ 可以產生長而詳細的研究報告(超過2K字)。 ✅ 每項研究總結 20 多個網路資源,以形成客觀和事實的結論。 ✅ 包括易於使用的網路介面(HTML/CSS/JS)。 ✅ 透過 JavaScript 支援抓取網路資源。 ✅ 追蹤存取和使用的網路資源的追蹤和上下文。 ✅ 將研究報告匯出為 PDF、Word 等。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0o49xyzfmzuvmlotgal.png) 開始使用以下命令。 ``` pip install gpt-researcher ``` 您可以這樣使用它。 ``` from gpt_researcher import GPTResearcher query = "why is Nvidia stock going up?" researcher = GPTResearcher(query=query, report_type="research_report") # Conduct research on the given query await researcher.conduct_research() # Write the report report = await researcher.write_report() ``` 請閱讀下面隨附的[安裝說明](https://github.com/assafelovic/gpt-researcher?tab=readme-ov-file#%EF%B8%8F-getting-started)和快速入門指南。 如果您想了解架構的細節,代理商會利用 gpt3.5-turbo 和 gpt-4-turbo(128K 上下文)來完成研究任務。我們僅在必要時才使用每種方法來優化成本。研究任務平均需要大約 3 分鐘才能完成,成本約為 0.1 美元。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ls54ua4d3nhn473ek04.png) 您可以閱讀官方部落格了解[GPT Researcher 的工作原理](https://docs.tavily.com/blog/building-gpt-researcher)。 您可以閱讀[常見問題](https://docs.tavily.com/docs/faq)以了解有關準確性等的更多資訊。 您可以閱讀[文件](https://docs.tavily.com/docs/gpt-researcher/getting-started)並存取他們的[官方網站](https://gptr.dev/)。 在這裡觀看演示! ![GPT 研究員演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xfgnes109mqfyk0r3uq.gif) 它在 GitHub 上有 8700 顆星,並且正在不斷改進。 https://github.com/assafelovic/gpt-researcher GPT 明星研究員 ⭐️ --- 13.[私人 GPT](https://github.com/zylon-ai/private-gpt) - 在沒有網路的情況下詢問有關您的文件的問題。 ---------------------------------------------------------------------------- ![私有GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nshjqmm5xq6kgqkgfdc.png) PrivateGPT 是一個可立即投入生產的 AI 專案,即使在沒有網路連線的情況下,您也可以使用大型語言模型 (LLM) 的功能來詢問有關文件的問題。 100% 私有意味著任何時候都沒有資料離開您的執行環境。 API 分為兩個邏輯區塊: A。高級 API,抽象化了 RAG(檢索增強生成)管道實現的所有複雜性: - 文件攝取:內部管理文件解析、分割、元資料擷取、嵌入產生和儲存。 - 使用所攝取文件中的上下文進行聊天和完成:抽像上下文檢索、提示工程和回應產生。 b.低階 API,允許高階用戶實現複雜的管道: - 嵌入生成:基於一段文字。 - 上下文區塊檢索:給定查詢,從攝取的文件中傳回最相關的文字區塊。 您可以閱讀[安裝指南](https://docs.privategpt.dev/installation/getting-started/installation)來開始。 您可以閱讀[文件](https://docs.privategpt.dev/overview/welcome/introduction)以及所涉及的[詳細架構](https://github.com/zylon-ai/private-gpt?tab=readme-ov-file#-architecture)。 PrivateGPT 現在正在發展成為產生 AI 模型和原語的網關,包括補全、文件攝取、RAG 管道和其他低階建置塊。 他們在 GitHub 上擁有超過 51,000 顆星,並且發展迅速。 https://github.com/zylon-ai/private-gpt 明星私人 GPT ⭐️ --- [14.facefusion](https://github.com/facefusion/facefusion) - 下一代臉部交換器和增強器。 ------------------------------------------------------------------------- ![臉部融合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea0w92sm51da799632vr.png) 這是下一代臉部交換器和增強器。有多種用途,您可以輕鬆做到。 他們還提供了一個[研討會部分](https://docs.facefusion.io/workshop),您可以在其中了解如何建立 UI 元件和定義框架處理器。 例如,這就是建立 UI 元件的方式。 ``` // create a new file facefusion/uis/components/example.py // Implement the essential methods of the UI component from typing import Optional import gradio from facefusion.uis.typing import Update EXAMPLE_IMAGE : Optional[gradio.Image] = None def render() -> None: global EXAMPLE_IMAGE EXAMPLE_IMAGE = gradio.Image() def listen() -> None: EXAMPLE_IMAGE.change(update, inputs = EXAMPLE_IMAGE, outputs = EXAMPLE_IMAGE) def update() -> Update: return gradio.update() ``` 您只需加入該元件即可。 ``` from facefusion.uis.components import example ``` ![作坊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxznqz8rg23q4tb2brne.png) 安裝可能有點複雜,所以我建議根據您使用的特定環境閱讀[安裝指南](https://docs.facefusion.io/installation)。 您可以使用此命令檢查基準測試。 ``` python run.py --ui-layouts benchmark ``` ![基準](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdc3s7xwjxoukee784ds.png) 您可以閱讀[文件](https://docs.facefusion.io/)並了解有關[技術術語的](https://docs.facefusion.io/knowledgebase/technical-terms)更多資訊。 他們在 GitHub 上擁有超過 14k 個 star,並且發布了`v2.5`版本。 https://github.com/facefusion/facefusion 明星facefusion ⭐️ --- 15. [H2O LLMStudio](https://github.com/h2oai/h2o-llmstudio) - 用於微調 LLM 的無程式碼 GUI。 --------------------------------------------------------------------------------- ![H2O法學碩士工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a03nefeobwwf9bkhcgwg.png) H2O LLM Studio 是一個開源、無程式碼的 LLM 圖形使用者介面 (GUI),專為微調最先進的大型語言模型而設計。 微調預訓練的語言模型需要編碼專業知識以及有關模型及其超參數的廣泛知識,但是,H2O LLM Studio 使 NLP 從業者能夠輕鬆微調他們的 LLM,無需編碼,並且比定制具有更好的靈活性。 H2O LLM Studio 還可讓您與微調模型聊天並接收有關模型效能的即時回饋。 NLP 從業者和資料科學家尤其可能會發現輕鬆有效地建立和微調大型語言模型很有用。您可以閱讀[詳細的效能統計資料](https://h2oai.github.io/h2o-llmstudio/get-started/llm-studio-performance)及其雲端[架構](https://docs.h2o.ai/haic-documentation/overview/architecture)。 如果您正在開始,我建議您觀看此內容! https://www.youtube.com/watch?v=u48QaIAIFw4 您可以閱讀有關[核心功能的](https://h2oai.github.io/h2o-llmstudio/get-started/core-features)訊息,例如: ✅ 無程式碼微調 ✅ 高度可自訂 ✅ 關於模型性能的即時回饋 您可以使用以下命令啟動 H2O LLM Studio。 ``` make llmstudio ``` 如果你不知道這些概念,他們也有[清晰的概念指南,](https://h2oai.github.io/h2o-llmstudio/concepts)包括 Generative AI、LoRA、Quantization、LLM Backbone 等等。 您可以閱讀[文件](https://docs.h2o.ai/haic-documentation/)。 您可以使用它非常輕鬆且符合標準地製作一個副專案。 他們在 GitHub 上有 3,600 顆星,並且發布了`v1.5`版本。 https://github.com/h2oai/h2o-llmstudio 明星 H2O LLMStudio ⭐️ --- 16. [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 -------------------------------------------------------------------------------- ![GPT自動機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdzv06jnr3z33s7qll5k.png) 您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如,打開應用程式、尋找餐廳、綜合資訊。太棒了:D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分: A。語音命令:它使用本地執行的 Whisper(Buzz 的一個分支)來產生命令。 b.命令到行動:您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後,就像任何優秀的人工智慧一樣,我們讓代理商使用 AppleScript 說出最終結果「{Result}」(如果您以前沒有使用過,請嘗試在 Mac 終端機中輸入「Hello World!」)。 我們製作了一個自訂工具,讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串: ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的,GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後,它使用LangChain Agent 選擇一組操作,包括使用OpenAI 的GPT-3(“text-davinci-003”)從提示符號產生AppleScript(用於桌面自動化)和JavaScript(用於瀏覽器自動化)命令,然後執行產生的腳本。 請記住,這不適用於生產用途。該專案執行從自然語言產生的程式碼,可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用: ✅ 求計算結果。 > 提示:“2 + 2 是什麼?” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ✅ 尋找附近的餐廳。 > 提示:“查找我附近的餐廳” 它將打開 Chrome,谷歌搜尋附近的餐廳,解析頁面,然後返回最上面的結果。有時它很厚顏無恥,反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候,它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容: ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to the main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得,請自行承擔風險。哈哈! ✅ 如果您要求 GPT Automator 擦除您的計算機,它會的。 是的,如果您要求的話,它會擦除您的電腦! 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示! https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f --- 17. [RepoChat](https://github.com/pnkvalavala/repochat) - 支援 GitHub 儲存庫互動的聊天機器人助理。 ---------------------------------------------------------------------------------- ![重新聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gf9bjn2a47f1t43aiju.png) Repochat 是一個互動式聊天機器人專案,旨在使用大型語言模型 (LLM) 參與有關 GitHub 儲存庫的對話。 它允許用戶進行有意義的討論、提出問題並從 GitHub 儲存庫檢索相關資訊。本自述文件提供了在本機電腦上設定和使用 Repochat 的逐步說明。 他們建立了兩個具有不同功能的分支,這對我來說有點新鮮。 ✅ Repochat 的主要分支被設計為完全在您的本機電腦上執行。此版本的 Repochat 不依賴外部 API 呼叫,並且可以更好地控制您的資料和處理。如果您正在尋找獨立的解決方案,那麼主分支就是您的最佳選擇。 ✅ Repochat 的雲端分支主要依賴對外部服務的 API 呼叫來進行模型推理和儲存。它非常適合那些喜歡基於雲端的解決方案並且不想設定本地環境的人。 您可以閱讀[安裝說明](https://github.com/pnkvalavala/repochat?tab=readme-ov-file#installation)。 Repochat 讓您與聊天機器人進行對話。您可以提出問題或提供輸入,聊天機器人將從向量資料庫中檢索相關文件。 然後,它將您的輸入以及檢索到的文件傳送到語言模型以產生回應。 預設情況下,我已將模型設為`codellama-7b-instruct` ,但您可以根據計算機的速度更改它,甚至可以嘗試 13b 量化模型進行回應。 聊天機器人在對話過程中保留記憶以提供上下文相關的回應。 您可以查看[即時網站](https://repochat.streamlit.app/),您可以使用 API 金鑰進行檢查。 你可以觀看這個演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7ndxqpwkkww4f5qudiq.gif) 如果您想查看的話,我找到了另一種[選擇](https://github.com/peterw/Chat-with-Github-Repo)。 Repochat 擁有 200 多顆星,並部署在 Streamlit 上。 https://github.com/pnkvalavala/repochat 明星 RepoChat ⭐️ --- 18. [myGPTReader](https://github.com/madawei2699/myGPTReader) - 閱讀並與 AI 機器人聊天。 ------------------------------------------------------------------------------ ![我的GPT閱讀器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58doii8daomf54te5eca.png) myGPTReader 是 Slack 上的機器人,可以閱讀和總結任何網頁、文件(包括電子書),甚至來自 YouTube 的影片。它可以透過語音與您交流。 一些有價值的功能是: ✅ 使用 myGPTReader 透過對話快速閱讀和理解任何網頁內容,甚至是影片(目前僅支援帶有字幕的 YouTube 影片)。 ![讀者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x626mtnvqr5vw43938iw.gif) ✅ 使用 myGPTReader 快速閱讀任何文件的內容,支援電子書、PDF、DOCX、TXT 和 Markdown。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5am7njxco7vhronuirgu.gif) ✅ 透過與 myGPTReader 語音對話來練習外語,它可以成為您的私人導師,支援中文、英語、德語和日語。 ![嗓音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40pzlgtuhcyxgwa1z2gs.gif) ✅ 內建大量提示模板,使用它們可以更好地與chatGPT對話。 ![問](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehgn218hwewzeft98xkp.gif) ✅ myGPTReader 每天都會發出最新的熱門新聞,並自動產生摘要,讓您快速了解今日熱點。 您可以造訪[官方網站](https://www.myreader.io/)。 您可以加入擁有超過 5000 名會員的儲存庫上的 Slack 頻道,免費體驗所有這些功能。 它們在 GitHub 上有 4.4k 顆星,並且像此列表中的其他專案一樣使用 Python 建置。 https://github.com/madawei2699/myGPTReader 星 myGPTReader ⭐️ --- 19. [Marker](https://github.com/VikParuchuri/marker) - 將 PDF 快速且高精度地轉換為 Markdown。 --------------------------------------------------------------------------------- ![標記](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kpdu6jh9qmax5cikbah.png) Marker 將 PDF、EPUB 和 MOBI 轉換為 Markdown。它比牛軋糖快 10 倍,在大多數文件上更準確,並且產生幻覺的風險較低。 我們都知道這有多大幫助,尤其是對於研究論文來說。 ✅ 支援一系列 PDF 文件(針對書籍和科學論文進行了最佳化)。 ✅ 刪除頁首/頁尾/其他工件。 ✅ 將大多數方程式轉換為乳膠。 ✅ 設定程式碼區塊和表格的格式。 ✅ 支援多種語言(儘管大多數測驗是用英語完成的)。請參閱 settings.py 以取得語言列表,或新增您自己的語言列表。 ✅ 適用於 GPU、CPU 或 MPS。 他們也清楚地記錄了[範例](https://github.com/VikParuchuri/marker?tab=readme-ov-file#examples)以及 Marker 和 Nougat 的結果。 ![基準](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqtl447c9h0taisbj8hl.png) 性能結果採用標記和牛軋糖設置,因此它們在 A6000 上均佔用約 3GB 的 VRAM。 閱讀速度和準確性[基準測試](https://github.com/VikParuchuri/marker?tab=readme-ov-file#benchmarks)以及有關如何執行您自己的基準測試的說明。 例如,請參閱此 PDF: [Think Python](https://greenteapress.com/thinkpython/thinkpython.pdf)和[Marker](https://github.com/VikParuchuri/marker/blob/master/data/examples/marker/thinkpython.md) vs [Nougat](https://github.com/VikParuchuri/marker/blob/master/data/examples/nougat/thinkpython.md)的 markdown 檔案。 閱讀[安裝說明](https://github.com/VikParuchuri/marker?tab=readme-ov-file#installation)。 他們也記錄瞭如何正確使用它: - [轉換單一文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-a-single-file) - [轉換多個文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-multiple-files) - [在多個 GPU 上轉換多個文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-multiple-files-on-multiple-gpus) 他們在 GitHub 上有 8k+ 星,我認為它不再被維護了。 https://github.com/VikParuchuri/marker 星標 ⭐️ --- 20. [Instrukt](https://github.com/blob42/Instrukt) - 終端機中整合人工智慧。 ---------------------------------------------------------------- ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsk64pf5yuosui91tmz9.png) Instrukt是一個基於終端的AI整合環境。它提供了一個平台,用戶可以: - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們,並且為了安全起見,在安全容器(目前使用 Docker 實作)中執行它們,以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ``` ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3aza7hnlji7hbi2o0js.gif) 有許多令人興奮的功能,例如: - 基於終端的介面,讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互,以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理,這是一個簡潔的小功能。 ![控制台除錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaan8np68e3fk1yueexm.png) Instrukt 已獲得 AGPL 許可證,這意味著任何人都可以將其用於任何目的。 可以肯定地說,Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案,因此他們在 GitHub 上有大約 200 多顆星,但用例非常好。 https://github.com/blob42/Instrukt 舊指令 ⭐️ --- 21.[微代理](https://github.com/aymenfurter/microagents)- 能夠自我編輯提示的代理。 ------------------------------------------------------------------ ![微代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuxv03dgb03s04dkmkm9.png) 它是一個實驗框架,用於動態建立自我改進的代理來回應任務。 微代理代表了一種建立自我改進代理的新方法。小型微服務大小(因此稱為微代理)代理是根據用戶分配給助手的任務動態生成的,評估其功能,並在成功驗證後存儲以供將來重用。 這使得跨聊天會話的學習成為可能,使系統能夠獨立推斷任務執行的方法。 這是使用`Python` 、 `OpenAI's GPT-4 Turbo`和`Text-Embedding-Ada-002`建構的。 您可以閱讀[安裝說明](https://github.com/aymenfurter/microagents?tab=readme-ov-file#installation)。他們提到您應該擁有一個可以存取 gpt-4-turbo 和 text-embedding-ada-002 的 OpenAI 帳戶。 讓我們看一個獲取天氣預報代理的範例。 ``` You are an adept weather informant. Fetch the weather forecast by accessing public API data using this Python code snippet: ``python import requests import json def fetch_weather_forecast(location, date): response = requests.get(f"https://api.met.no/weatherapi/locationforecast/2.0/compact?lat={location[0]}&lon={location[1]}") weather_data = response.json() for day_data in weather_data['properties']['timeseries']: if date in day_data['time']: print(day_data['data']['instant']['details']) break `` # Example usage: fetch_weather_forecast((47.3769, 8.5417), '2024-01-22T12:00:00Z') Note: Replace the (47.3769, 8.5417) with the actual latitude and longitude of the location and the date string accordingly. ``` 如果您想知道如何建立代理,那麼此架構圖將對此進行解釋。 ![圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oi4fbt6e5qauqo293qt.png) 您可以看到[工作演示](https://github.com/aymenfurter/microagents?tab=readme-ov-file#demo)。 他們在 GitHub 上有大約 700 顆星,值得一看。 https://github.com/aymenfurter/microagents 明星微代理 ⭐️ --- 22. [Resume Matcher](https://github.com/srbhr/Resume-Matcher) - 一個改進你的履歷的免費工具。 ------------------------------------------------------------------------------ ![履歷表匹配器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av3u7dd3d3rm7k108w7i.png) Resume Matcher 是一款開源免費工具,可用於完善您的履歷。根據職位描述自訂您的履歷。找到匹配的關鍵字,提高可讀性,並深入了解您的履歷。 它是如何運作的? 履歷表匹配器使用 Python 讀取您的履歷和職位描述,就像 ATS 一樣。 它建議透過以下方式進行更改,使您的履歷適合 ATS: ✅ 解析:它使用 Python 分解你的履歷和工作描述。 ✅ 關鍵字提取:該工具從職位描述中尋找重要關鍵字,例如技能和資格。 ✅ 關鍵術語提取:辨識職位描述中的主題以了解其上下文。 ✅ 向量相似度:使用 FastEmbedd,它將您的履歷與職位描述進行比較,看看它們的匹配程度。配對得越好,通過 ATS 篩選的機會就越高。 ![使命](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kintryj2685slbya98zr.png) 您可以閱讀[安裝說明](https://github.com/srbhr/Resume-Matcher?tab=readme-ov-file#how-to-install)。 您可以查看[現場演示](https://resume-matcher.streamlit.app/)或自述文件中附帶的演示。 Resume Matcher 是由 Saurabh Rai 建立的一個令人驚嘆的專案,他還在 DEV 上寫了很棒的帖子! 它在 GitHub 上有 4.5k 顆星,並且仍然維護良好。 https://github.com/srbhr/Resume-Matcher 明星簡歷匹配器 ⭐️ --- 23.[背景移除器](https://github.com/nadermx/backgroundremover)- 讓您可以透過簡單的 CLI 使用 AI 從影像和影片中移除背景。 ------------------------------------------------------------------------------------------ ![背景去除劑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8bppslk45ci383wpman.png) 這是一個使用 AI 從圖像和影片中刪除背景的命令列工具。 首先從 pypi 安裝 backgroundremover。 ``` pip install --upgrade pip pip install backgroundremover ``` 也可以在不透過 pip 安裝的情況下執行它,只需克隆 git 以在本地啟動虛擬環境安裝要求並執行。 您可以使用的一些命令: - 從本機檔案圖像中刪除背景 ``` backgroundremover -i "/path/to/image.jpeg" -o "output.png" ``` - 從本地影片中刪除背景並將其覆蓋在圖像上 ``` backgroundremover -i "/path/to/video.mp4" -toi "/path/to/videtobeoverlayed.mp4" -o "output.mov" ``` 您可以檢查可以透過 CLI 使用的所有[命令](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#usage-as-a-cli)。 您甚至可以將它用作圖書館。 ``` from backgroundremover.bg import remove def remove_bg(src_img_path, out_img_path): model_choices = ["u2net", "u2net_human_seg", "u2netp"] f = open(src_img_path, "rb") data = f.read() img = remove(data, model_name=model_choices[0], alpha_matting=True, alpha_matting_foreground_threshold=240, alpha_matting_background_threshold=10, alpha_matting_erode_structure_size=10, alpha_matting_base_size=1000) f.close() f = open(out_img_path, "wb") f.write(img) f.close() ``` 您可以閱讀[安裝說明](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#installation)並觀看[現場演示](https://www.backgroundremoverai.com/)。 > 輸入與輸出。 ![輸入影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0rwjaxxw460lugle5z2.png) 他們在 GitHub 上有 6k star,我們絕對可以用它來學習一些重要的概念。 https://github.com/nadermx/backgroundremover 明星背景去除器 ⭐️ --- 24. [Tkinter Designer](https://github.com/ParthJadhav/Tkinter-Designer) - 建立 Python GUI 的簡單快速的方法。 ------------------------------------------------------------------------------------------------- ![Tkinter 設計師](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dt5ij4fu948yz4fwnqc.png) Tkinter Designer 的建立是為了加快 Python 中的 GUI 開發過程。它使用著名的設計軟體Figma,讓用Python建立漂亮的Tkinter GUI變得輕而易舉。 Tkinter Designer 使用 Figma API 來分析設計檔案並建立 GUI 所需的對應程式碼和檔案。 如果您想知道它是如何工作的? 使用者唯一需要做的就是使用 Figma 設計一個介面,然後將 Figma 檔案 URL 和 API 令牌貼到 Tkinter Designer 中。 Tkinter Designer 將自動產生在 Tkinter 中建立 GUI 所需的所有程式碼和映像。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb2pjsige0b9w5rynipm.png) 您可以閱讀逐步指南\](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md),了解如何正確使用它,該指南有多種語言版本。 您可以在這裡觀看演示! https://www.youtube.com/watch?v=Qd-jJjduWeQ 他們還展示了您可以使用它輕鬆複製的[網站範例](https://github.com/ParthJadhav/Tkinter-Designer?tab=readme-ov-file#-examples)。 ![網站範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdiyhj08bwatasonpekm.png) 它們在 GitHub 上有 8,300 顆星,並被大約 100 名開發人員使用。 https://github.com/ParthJadhav/Tkinter-Designer Tkinter 明星設計師 ⭐️ --- 25. [Open Interpreter](https://github.com/OpenInterpreter/open-interpreter) - 電腦自然語言介面。 --------------------------------------------------------------------------------------- ![打開解釋器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av7udc5fibj1wz88w0u8.png) Open Interpreter 允許法學碩士在本地執行程式碼(Python、Javascript、Shell 等)。您可以在安裝後執行 $terpreter,透過終端機中類似 ChatGPT 的介面與 Open Interpreter 聊天。 這為電腦的通用功能提供了自然語言介面: ✅ 建立和編輯照片、影片、PDF 等。 ✅ 控制 Chrome 瀏覽器執行研究、繪製、清理和分析大型資料集。 我不了解你,但他們的[網站](https://www.openinterpreter.com/)讓我驚嘆不已! 使用此命令快速啟動。 ``` pip install open-interpreter // After installation, simply run: interpreter ``` 您可以閱讀[快速入門指南](https://docs.openinterpreter.com/getting-started/introduction)。 您應該閱讀[與 ChatGPT 程式碼解釋器的比較](https://github.com/OpenInterpreter/open-interpreter?tab=readme-ov-file#comparison-to-chatgpts-code-interpreter)以及可以使用的[命令](https://github.com/OpenInterpreter/open-interpreter?tab=readme-ov-file#commands)。 您可以閱讀[文件](https://docs.openinterpreter.com/getting-started/introduction)。 Open Interpreter 可與託管語言模型和本機語言模型搭配使用。託管模型速度更快、功能更強大,但需要付費。本地模型是私有且免費的,但能力往往較差。 它們在 GitHub 上擁有超過 48k 顆星,並被 300 多名開發人員使用。 https://github.com/OpenInterpreter/open-interpreter Star 開放式解釋器 ⭐️ --- 獲得經驗並提高編碼水平的最佳方法是建立業餘專案。 我希望您能夠建立其中一些專案,或至少獲得靈感。 評論下來告訴其他人任何其他很酷的 Python 專案:) 祝你有美好的一天! 關注 Taipy 以了解更多此類內容。 https://dev.to/taipy --- 原文出處:https://dev.to/taipy/25-projects-that-you-can-build-with-python-and-ai-12i9

使用 matcha.css 讓你的新網站瞬間變漂亮!

您是否曾經想過在開始一個新的網路專案時從「空白頁」開始是多麼的簡單? ![空白頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syhnfxnz7i2cs3exqhf4.png) *請注意缺少任何樣式或自訂屬性*。 ``` <html> <body> <h1>Hello world!</h1> <p> This is my new project, and it's still under construction. Please be indulgent 😊 </p> <p> Also, check out my work on <a href="https://github.com/octocat">GitHub</a>! </p> <blockquote> <p> Imagination is more important than knowledge </p> <cite>Albert Einstein</cite> </blockquote> <menu> <li>Home</li> <li> About me <menu> <li>My works</li> <li>My passions</li> </menu> </li> <li>Contact</li> </menu> <form> <h2>Contact me</h2> <label> Your email: <input type="email" name="email" placeholder="Your email" required> </label> <label> Your message: <small>255 characters max</small> <textarea name="message" placeholder="Your message" required></textarea> </label> <button type="submit">Send</button> </form> </body> </html> ``` 哎喲!如果你向你的朋友展示這一點,同時聲稱你是網頁開發人員,他們會開始質疑你到底在做什麼... 預設瀏覽器樣式表通常非常簡單,當您製作應用程式原型、生成靜態 HTML 頁面、Markdown 生成的文件等並且不想深入研究時,如果沒有“視覺上不錯”的東西,可能會令人沮喪過早地接觸CSS 的複雜性。 好訊息!我有一些適合你的東西: [matcha.css](https://matcha.mizu.sh) ! 只需將以下內容加入到您的文件中即可看到奇蹟發生: ``` <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css"> ``` ![抹茶頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2duw5mfvuxcf0s56w7f.png) 沒有真正做任何事情,我們就得到了一個尊重用戶對淺色/深色模式的偏好、漂亮的字體和適當的間距的頁面,我們的`<menu>`實際上看起來像一個菜單,而且我們的`<form>`甚至還有「必填欄位」也相當不錯所需投入的指標。 所有這些都無需任何建置步驟、JavaScript、配置或重構。 這是因為[matcha.css](https://matcha.mizu.sh)使用語意樣式。例如,它假設嵌套在另一個`<menu>`中的`<menu>`應產生一個子選單,而`<label><input required></label>`應向使用者澄清輸入是強制性的。 還有一些「嵌入式」CSS 庫,但我相信這是最完整的一個,因為它提供了額外的開箱即用的現代樣式,如語法突出顯示、簡單佈局、實用程式類別等。 ![抹茶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuq2b9axcybs26lbkple.png) [matcha.css](https://matcha.mizu.sh)也很容易自訂(它沒有任何`!important`規則,甚至提供了建立自訂建置的幫助器),同時也是可逆的(如果您決定遷移出去,只需刪除樣式表)。 最後但並非最不重要的一點是,它是完全免費和開源的! https://github.com/lowlighter/matcha 請參閱[matcha.mizu.sh](https://matcha.mizu.sh)了解完整概述! --- 原文出處:https://dev.to/lowlighter/make-naked-websites-look-great-with-matchacss-4ng7

沒有人長大後想成為 DevOps 工程師

當我看到那些不像我一樣主要在線下成長的年輕一代時,我為他們感到有點遺憾。我已經三十多歲了,所以我知道在成長過程中盡快接入[撥號](https://en.wikipedia.org/wiki/Dial-up_Internet_access)網路(以避免長時間阻塞電話線)存取幾個維基百科頁面來完成我的任務是什麼感覺。什麼。透過親身經歷我們所有人口袋裡的個人電腦的崛起,我覺得自己並沒有免疫,但更有能力利用它來為自己謀利,而不是僅僅因為更加“ [互聯](https://www.newyorker.com/news/the-new-yorker-interview/jonathan-haidt-wants-you-to-take-away-your-kids-phone)”而成為其無限幸福和滿足的虛假承諾的受害者。 ![撥號](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExamF3aXZ0NHZxYmo4NWVqa2FhcWwxM2lhYnYwaHowdmtpZGlhNTNiZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XreQmk7ETCak0/giphy.gif) 另一方面,還有另一場革命,**我沒有直接參與其中**,這場革命是在 2009 年 O'Reilly Velocity 會議上著名的[Flickr](https://www.youtube.com/watch?v=LdOe18KhtT4)演講之後,在 00 年代全世界的 IT 部門中發生的。事件讓`DevOps`聲名大噪,並展示了一個可以從孤立的、發展緩慢的基於[ITIL](https://en.wikipedia.org/wiki/ITIL)的組織轉向更好的組織的未來。 不到 5 年前,我最近從教學轉向了科技。我不知道在任何其他不實踐 Flickr 演講中所傳授的實踐的專業環境中工作會是什麼樣子。敏捷方法論和「DevOps」仍然[難以確定](https://www.reddit.com/r/devops/comments/812527/can_someone_explain_what_devops_is/)的定義是我從未質疑過的現狀。 **但我現在對此表示懷疑**。如果我認為,未來的世代缺乏基本的視角,並且可以從了解沒有智慧型手機的生活是什麼樣子中獲益匪淺。**我必須將同樣的邏輯應用在自己身上,並且齊心協力去理解 DevOps 到底是什麼?它是對什麼的回應?它最初的承諾是什麼?人們如何以及為何最終成為 DevOps 工程師?未來成為 DevOps 工程師意味著什麼?** DevOps 如何開始及其最初的承諾 ------------------ 我有時想知道,在開發人員必須填寫基礎設施配置請求表並等待數天或數週才能得到服務的日子裡,情況一定是什麼樣子。我聽說過那種文化中典型的運營人員的故事,他們總是互相指責,脾氣暴躁,最喜歡說的詞是`“NO“`和`“Where's my pager?“` 。 ![行動者](https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdG03ZXE5d3dqNjgyYXV3NnowaGdoeDc5aTIxM3ZnMGlxdnVhbnVuNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/hSKk6hx9OzomRvFRcJ/giphy.gif) John Allspaw 和 Paul Hammond 以及他們著名的速度演講[「每天 10+ 部署:Flickr 上的開發和運維合作」](https://www.youtube.com/watch?v=LdOe18KhtT4)的許多與會者不必懷疑,開發人員和維運團隊之間的常見摩擦一定是對他們來說一切都太生動了。 多年來,我多次觀看了這個演講,有幾件事對我來說很突出。首先,我沒有意識到當時的談話包含瞭**如此多的髒話**,或者也許只是奧爾斯帕先生。另一個是演講者提出的關鍵訊息,即開發和營運團隊實際上共享相同的目標。**為業務賦能。** ![動圖](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExaHB6Z3Myd2tpaDc3eGE3eDZ2OTMwa2ZnazMydDVlNnVkOTczeGF3dSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/FspLvJQlQACXu/giphy.gif) 他們繼續討論組織可能希望採用的工具和文化特徵來實現一天的多次生產部署。他們談到了自動化基礎設施、功能標記、共享警報和監控,所有這些都圍繞著新的協作文化結合起來,這種文化重視信任以及對系統故障和避免指責的更健康的態度。 具有巨大影響力的[《DevOps 手冊》](https://itrevolution.com/product/the-devops-handbook-second-edition/)和[《站點可靠性工程》](https://sre.google/sre-book/table-of-contents/)書籍在很大程度上進一步明確了 DevOps 在接下來的幾年中的含義。 ![主要書籍](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb33ik288tctk2v22jf6.png) 前者的開頭章節用幾句話描述了 DevOps 的做事方式渴望解鎖什麼 > *“\[多個團隊共同努力\]實現計劃工作快速進入生產(例如,每天執行數十、數百甚至數千次程式碼部署),同時實現世界一流的穩定性、可用性和安全性。”* 我們兌現了承諾嗎? --------- 當我想到 Flickr 演講中提出的想法時,我的腦海中浮現出一種走在巨人肩膀上的感覺。這些對許多人來說一定是革命性的想法是我所知道的唯一的職業現實。因此,無論是否可以對當前的 DevOps 方法、最佳實踐和工具進行改進,我都對迄今為止所取得的所有進展表示感謝。我問過 2009 年之前配置伺服器或進行駭客攻擊的人,他們都證實**現在的情況比那時好。** 話雖如此,大多數公司是否都在瘋狂地進行運輸,同時實現世界一流的穩定性、可用性和安全性?**很大程度上沒有。** DevOps 世界即使擁有[裝滿現代可用工具的龐大工具箱](https://landscape.cncf.io/),仍然執行該演講中提出的完全相同的框架。 用[亞當雅各](https://twitter.com/adamhjk)的話來說 > 「問題不在於我們沒有對系統的每個單獨部分進行足夠的最佳化。我們在每一步都建立了更有效率的工具。但是整個系統是如何組合在一起的呢?使用體驗如何?這與 2009 年的情況基本相同,這也是我們陷入困境的原因。 **孤島仍然存在,交接容易出錯,而且在許多情況下協作相當強迫和僵化。**任何擔任 DevOps 工程師一段時間的人都會有一長串他們認為自己的組織出錯的事情,並且通常對自己的組織解決問題的能力也同樣缺乏信心。 Adam 是一位經驗豐富的 DevOps 實踐者,他甚至呼籲[第二波 DevOps](https://www.systeminit.com/blog-second-wave-devops) ,它不僅僅是簡單地改進工具,而是邀請我們跳出框框思考,挑戰既定規則,看看另一面會發生什麼。 說到DevOps實踐者,這些人是誰?一個人如何以及為何成為一個人? 人們最初是如何進入 DevOps 的? ------------------- 在短短 15 年裡,科技業取得了長足的發展。 **DevOps 工程師、SRE 和平台工程師**等職位現在在招聘網站上很常見,也是技術招聘人員的熱門專案。然而,在 IT 世界之外,這些術語仍然鮮為人知。儘管發展迅速,DevOps 還不是一個人們渴望加入的職業;相反,許多人只是**“陷入其中”** 。 ![動圖](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHlhdTVzdG9wNmNzOGp6ZDljN3RlenNhMTExMTJ5N3RoY3MyYjIydCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SeTPXfY3RFPkQ/giphy.gif) 在與我表弟交談後,我偶然進入了 DevOps,在我獲得 CCNA 憑證後決定反對嚴格的網路工程路徑後,他建議我選擇 DevOps。我很好奇誰最終會進入 DevOps,以及未來的工程師是否會選擇它作為他們的第一個職業選擇,我詢問了[/devops](https://www.reddit.com/r/devops/comments/1c24rbg/will_people_ever_grow_up_wanting_to_be_a_devops/) Reddit 子版塊,並對各種不同的意見感到驚訝。 **我發現了一些「我剛剛陷入其中」的人:** ![陷入其中](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zaafmdejwi6k9aus874r.png) **其他人則適度看好新一代:** ![樂觀的 DevOps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouj4w92mly7j2jbi20m2.png) ![DevOps 選擇你](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/px309e69lvjygl8vnobz.png) **其他人則不那麼樂觀:** ![我希望不是](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnzjwtczbg9zl8wh9zru.png) ![孩子們的願望](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3z44eoh0yqgsaqyh8mf.png) 儘管 DevOps 的定義仍然存在很大[爭議](https://www.reddit.com/r/devops/comments/vfxmxv/what_exactly_is_devops/),但它似乎不太可能將自己定位為學生在招聘會上聽到或永久加入到大學課程中的職業。這可能是因為我們傾向於想像自己在特定領域表現出色,相信專業化會增加我們成功的機會。 小時候,我夢想著成為一個著名樂團的主音吉他手,擁有神級的粉碎能力。我並沒有夢想能夠相當擅長演奏所有樂器。 **在 DevOps 中,沒有吉他獨奏。**為了脫穎而出,您需要熟悉一長串工具、語言、框架、超大規模器和流程。最優秀的 DevOps 工程師本質上都是通才。這種模組化、樂高式的工作和體驗性質可能會讓 DevOps 在 IT 部門之外不太受歡迎。 通才、修補匠的案例和膠水的概念 --------------- 不可能嘗試對 DevOps 從業者應該具備哪些特徵形成非主觀的描述,但根據我的短暫經驗以及我從與比我更有經驗的人的對話中學到的東西,出現了一些特徵。 ### 通才 您讀過「[如何在 DevOps 領域找到工作](https://www.simplilearn.com/tutorials/devops-tutorial/how-to-become-devops-engineer)」指南嗎?還記得知識要求部分嗎? Linux、Docker、CI/CD、Git、Hypersclaer、網路等。 如果您曾經面試過開發人員或產品設計等職位,您很可能需要在流程的某個階段展示自己的作品集。在 DevOps 面試中這種情況很少見。我想不出有誰定期組裝和更新 DevOps 組合? DevOps 角色的模組化和分散式系統建構性質並不適合在產品組合中進行精心策劃的展示。 作為一個厭倦了教高中英語七年的人,我自然而然地被 DevOps 所吸引,這個領域要求我學習許多工具和概念,並以協作方式將它們拼湊在一起。不深入專注於任何一個概念,而是提高快速學習新事物的技能,這就是我培養的癒傷組織。在這樣的環境中茁壯成長的多面手正好適合。 ### 修補匠 在 DevOps 方面表現出色的人可能會認為自己是[修補匠](https://www.reddit.com/r/devops/comments/1cr1ho6/hot_take_were_all_just_tinkerers/)。 ![修補匠](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odqy1j4yuwc1anaioe69.png) 我喜歡這個想法,它適合我遇到的許多 DevOps 工程師。僅僅為了了解事物的知識而對學習事物如何工作感興趣是我所遇到的 DevOps 導師的一個共同特徵。當然,花週末在家庭實驗室安裝更強大的開關或在 3D 列印機上渲染新的迷你雕像並不能直接展示 DevOps 技能,但這些背景知識比憑證更能表明 DevOps 的潛在成功。 ### 膠水 複雜系統中的許多工作可能會受到關注,因為很難規劃或預測。由於 DevOps 涉及將工具編織在一起來建造平台或交付系統,**因此需要大量的黏合劑**。 流程必須到位並自動化,以跟上技術堆疊中每個工具附帶的技術債務和維護工作。那些能夠自然而然地、常常吃力不討好的充當黏合劑,透過自動化、溝通或改進重複流程連接系統的不同部分的個人,對於組織的成功至關重要。這項技能不是您在履歷中列出的內容,但與修補匠的好奇心和通才的開放性相結合,它是一個強大的組合。 目前狀態:平台與 DevOps --------------- 這些討論中常出現[錯誤的二分法,](https://www.reddit.com/r/devops/comments/17lz167/devops_vs_platform_engineering_i_still_struggle/)通常是出於行銷原因:DevOps 已死,平台才是未來。平台工程師的目標是為開發人員提供對傳統 Ops 相關元件(k8s、IaC 元件、IAM)的自主權,而無需直接交互,使開發人員能夠自助服務並保持獨立。 精心設計的、針對特定環境的平台可以提高開發人員的速度。根據[2023 年 Puppet DevOps 狀況報告](https://www.puppet.com/resources/state-of-platform-engineering),超過三分之二 (68%) 的受訪者認為採用平台工程後開發**速度**提高了。然而,速度不應該是唯一的衡量標準。正如[georgouslyhumble](https://www.reddit.com/r/devops/comments/16ipm9h/comment/k0ly9uq/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button)在 Reddit 上指出的那樣,**有時目標是在滿足新的組織要求的同時保持現有的速度**。例如,日誌記錄 sidecar 可以在不改變開發人員速度的情況下標準化日誌收集,從而增強平台以滿足不斷成長的公司要求。 維運工作仍然複雜且動態,熟練的維運人員對於超過一定複雜性閾值至關重要。平台為開發人員提供支持,但請注意,它們不一定會減少孤島或更緊密地整合開發和營運團隊。 團隊在堆疊中新增工具時要謹慎,因為新工具通常會帶來快速累積的維護和維護開銷。像[Glasskube](https://github.com/glasskube/glasskube)這樣可以**減少營運開銷的工具是不可或缺的**。我們需要更多這些工具來為未來建立強大且高效的 DevOps 平台。 未來預測 ---- ![動圖](https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdmQ3b2J1M3A1dWw3MHgwZTQyaWdobDdwM3BnZ3htY3drNWt0bXZicSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZZkCo8zKWtt2ZgozfX/giphy.gif) ### 某種類型的平台將會勝出 **勝出的系統、平台或工作方法不必「教導」使用者如何一起工作和協作。**未來的系統只有在使團隊協作成為最簡單、最直觀、最自然的工作方式,同時抽像出開發人員和維運人員都無法完成的工作的情況下,才能在不影響安全性和穩定性的情況下提供無限軟體交付的難以置信的可能性。 為了創造它,我們必須跳脫框架思考。 ### 第二波 DevOps 可能是一種方式 值得慶幸的是,有許多不安分、不墨守成規的人為 DevOps 領域的方法、流程和工具的不斷改進做出了貢獻。 有人可能會說,重新思考 DevOps 的正式[運動](https://www.systeminit.com/blog-second-wave-devops)已經出現,這非常令人興奮。 ### 通才和修補匠越多越好 最有能力不斷連結拼圖、閉合回饋循環並重新思考糟糕想法的人是那些不怕用深度專業化換取專業通用化的人。那些敢於冒險並通過一路修修補補、測試和提出問題來快速學習的人將使這艘象徵性的船在越來越快地走向卓越工程的過程中保持漂浮。 如何找到足夠的這些人是另一個問題。 結論 -- 看起來我還不太明白為什麼人們長大後不想成為 DevOps 工程師,也許這是一個相對較新的領域,再加上通才通常不被認為是最酷的孩子這一事實的混合體。 展望下一波人才,無論他們是有意識地選擇還是偶然進入 DevOps 角色,有一件事是肯定的:了解該領域的歷史是關鍵。這是未來工程師能夠培養辨識當前狀態與理想未來之間差距的唯一方法。如果忽視這一差距,現狀就會佔上風,我們將注定陷入停滯的平庸。 不可否認,自 DevOps 時代之前以來,技術格局已得到極大改善,但同樣明顯的是, **DevOps 15 年來仍在站穩腳跟。** 經驗豐富的專業人士需要保持敏銳的眼光,辨識並鼓勵周圍的年輕修補匠、通才和“粘合者”,不要擔心追逐某些頭銜,而是幫助重新定義**DevOps 並將其發展為能夠實現2009 年最初願望的東西。** --- 如果您喜歡這類內容並希望看到更多內容,請考慮在 GitHub 上給我們一個 Star 來支持我們🙏 [![連小貓也喜歡送星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h9v5nqc7pfp6u3h1kqd.jpeg)](https://github.com/glasskube/glasskube) --- 原文出處:https://dev.to/glasskube/why-nobody-grows-up-wanting-to-be-a-devops-engineer-2jli

2024 年 7 個最適合開發者的圖表庫 🤯

許多應用程式使用圖表或圖形進行資料視覺化,這可以使用庫或底層技術來實現。庫提供時間效率、各種圖表類型和自訂選項。 作為開發人員,了解這些選項至關重要。雖然有些專案可能選擇手動實施,但許多專案都受益於圖表庫的效率。使用這些庫可以節省時間,並可以存取各種圖表類型和樣式選項來滿足您的需求。 在本文中,我們將踏上旅程,了解七個令人驚嘆的圖表庫、它們的功能以及如何使用它們。讓我們來看看! ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fqk7c7favj05g2qjice9m.gif](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqk7c7favj05g2qjice9m.gif) --- 1. Latitude for React:將圖表整合到前端應用程式的完美伴侶 --------------------------------------- **網址: <https://docs.latitude.so/react/getting-started/introduction>** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fy7z7ks2yp21vj6fah42o.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7z7ks2yp21vj6fah42o.png) *是的,那就是我們!* Latitude 是用於嵌入式分析的開源框架,可讓您快速將 SQL 查詢公開為 API 端點。他們的產品中包括`@latitude-data/react` ,這是一組原生 React 元件,用於輕鬆繪製來自 Latitude API 的資料。如果您選擇攜帶自己的資料,它還可以用作獨立的圖表庫。 ### Latitude for React 的主要特性 - **多種圖表類型**:提供多種圖表類型顯示。例如長條圖、圓餅圖、面積圖、分散圖、混合圖等。 - **高度可自訂的元件**:元件預先捆綁了一組可用主題,或者您可以選擇輕鬆建立自己的自訂主題。最重要的是,大多數元件都可以使用自訂 html 類別進行擴充。 - **自動執行查詢或提供您自己的資料**:Latitude 為每個圖表元件提供兩個版本。其中一個版本會自動執行您的緯度查詢。另一個版本期望接收資料作為道具,讓使用者負責取得它。 ### 如何使用 Latitude for React 👀 首先,在您的 React 專案中安裝 Latitude 的 React 套件: ``` npm install --save @latitude-data/react ``` 之後,匯入 Latitude 元件所使用的核心樣式: ``` import '@latitude-data/react/dist/index.css'; ``` **帶有緯度後端** 如果您要從 Latitude 後端取得資料,**請**在專案根目錄下使用 LatitudeProvider 包裝您的應用程式: ``` import { LatitudeProvider } from '@latitude-data/react'; function App() { return ( <LatitudeProviderapiConfig={{ host: <YOUR_LATITUDE_API_HOST> }}> {/* Your app content */} </LatitudeProvider>); } ``` 並使用 Latitude 的任何帶有`Query`前綴的圖表元件: ``` import { QueryLineChart } from '@latitude-data/react'; function MyComponent() { return ( <QueryLineChart queryPath='titles' params={{ start_year: 2012, end_year: 2014 }} x='release_year'y={[ { name: 'count_shows' }, { name: 'count_movies' } ]} xTitle='Year' yTitle='Titles'/> ); } ``` 在此範例中,queryPath 對應於 Latitude 後端中定義的查詢的路徑。 **作為獨立的圖表庫** 只需使用獨立元件,例如: ``` import { LineChart } from '@latitude-data/react'; function MyComponent() { const data = [ { release_year: 2010, count_shows: 10, count_movies: 2 } ] return ( <LineChart data={data} x='release_year' y={[ { name: 'count_shows' }, { name: 'count_movies' } ]} /> ); } ``` 請閱讀[文件](https://docs.latitude.so/react/getting-started/introduction),以取得有關如何使用緯度動態顯示資料的更深入指南。 您可以隨時在 GitHub 上為我們的專案做出貢獻,如果您能為我們的專案給我們一顆星,我們將不勝感激! **[🌟 GitHub 上 React 的 Star Latitude](https://github.com/latitude-dev/latitude)** --- 2. D3.js:用於資料視覺化的JavaScript函式庫 ------------------------------ **D3 的網站: [https://d3js.org](https://d3js.org/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2F1xhnyf40jvg3v50c2ba8.jpeg](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xhnyf40jvg3v50c2ba8.jpeg) D3 是一個低階圖表庫,提供無與倫比的客製化和靈活性。代價是學習曲線陡峭,並且與 React 或 Svelte 等常見前端框架的整合更加困難。如果您有一些非常具體的圖表需求,d3.js 可能是您唯一的選擇,但是,如果您希望在應用程式中快速整合一些簡單的圖表,那麼其他地方還有更好的選擇。 ### D3.js 的主要特性 - **自訂和靈活性:** D3.js 提供對 SVG、HTML 和 CSS 的低階存取,允許對視覺元素進行細粒度控制。這使得它具有高度的靈活性和可自訂性。 - **模組化:** D3.js 高度模組化,各種模組可以單獨使用,也可以一起使用。這允許對捆綁包大小和效能最佳化進行更多控制。 - **強大的轉換和動畫:** D3.js 為轉換和動畫提供強大的支持,為資料更新提供流暢而複雜的動畫。 - **社區和生態系統:** D3.js 擁有一個龐大且活躍的社區,提供大量文件、範例和插件。這使得您可以更輕鬆地找到支援和資源。 ### 如何使用 D3.js 👀 在您的專案中安裝 d3 的 npm 套件: ``` npm install d3 ``` 以下是有關如何將圖表新增至 id 為`#chart`的 html 元件的範例程式碼: ``` import * as d3 from 'd3'; // Data for the bar chart const data = [ { name: 'A', value: 30 }, { name: 'B', value: 80 }, { name: 'C', value: 45 }, { name: 'D', value: 60 }, { name: 'E', value: 20 }, { name: 'F', value: 90 }, { name: 'G', value: 55 } ]; // Set the dimensions and margins of the graph const margin = { top: 20, right: 30, bottom: 40, left: 40 }; const width = 500 - margin.left - margin.right; const height = 300 - margin.top - margin.bottom; // Append the svg object to the body of the page const svg = d3.select("#chart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // X axis const x = d3.scaleBand() .range([0, width]) .domain(data.map(d => d.name)) .padding(0.1); svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("class", "axis-label") .attr("transform", "translate(-10,0)rotate(-45)") .style("text-anchor", "end"); // Y axis const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height, 0]); svg.append("g") .call(d3.axisLeft(y)) .selectAll("text") .attr("class", "axis-label"); // Bars svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", d => x(d.name)) .attr("y", d => y(d.value)) .attr("width", x.bandwidth()) .attr("height", d => height - y(d.value)); ``` 正如您所看到的,D3.js 通常比其他替代方案更冗長,但它使您可以最大程度地控制可視化的各個方面。 D3 是免費且開源的。如果您覺得該專案很有趣,請在 GitHub 上給他們一個 Star ⭐️!他們目前的星數超過 108k! **[在 GitHub 上關注 D3.js ⭐️](https://github.com/d3/d3)** --- 3. Chart.js:用於基於 HTML 的圖表的靈活 JavaScript 程式庫 ------------------------------------------- **網址: [https://www.chartjs.org](https://www.chartjs.org/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2F0m8eb9o6t93wwf7cvq7x.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0m8eb9o6t93wwf7cvq7x.png) 目前是業界最受歡迎的圖表庫之一,也是最容易使用的圖表庫之一。主要因其透過使用 Canvas 進行呈現而聞名,這與某些僅將資料呈現為 SVG 的圖表庫不同。 ### Chart.js 的主要特性 - **效能**:Chart.js 可以接受內部資料結構,從而減少解析和規範化的需要,從而提高效能。您還可以配置資料抽取,以在渲染資料集之前減少資料集的大小,從而加快渲染速度。 canvas的使用壓縮了DOM樹上的開銷;這有助於最大限度地減少捆綁包中 Chart.js 程式碼的大小,從而加快載入時間。 - **可存取性**:與大多數圖表庫相比,Chart.js 具有非常直接的方法,充分了解您所做的一切都在畫布上執行。您不需要複雜的自訂,因為它允許您使用其任何自訂選項來設定樣式、主題等。 - **出色的開發人員體驗**:除了擁有非常出色的社群影響力之外,Chart.js 還擁有簡單明了的文件,當出現新內容時,這些文件會經常更新。它還提供與您最喜歡的 JavaScript 框架的集成,例如 React、Svelte 等。 - **圖表響應能力**:預設情況下,Chart.js 提供響應式圖表。您可以自動將螢幕調整為不同的尺寸,並且它為圖表提供了可調整的尺寸。它確保您在所有裝置上都能獲得良好的資料視覺化效果。 ### 如何使用 Chart.js 👀 Chartjs 可以透過 npm 安裝或在執行時透過 CDN 直接下載: ``` <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script> ``` 如果你覺得這個專案很酷,你可以在GitHub上給它一個Star⭐️!他們目前的星數超過 63k。 **[GitHub 上的 Star Chart.js ⭐️](https://github.com/chartjs/Chart.js)** --- 4. Apache ECharts:用於快速建立圖表的JavaScript視覺化工具 ------------------------------------------ **網址: [https://echarts.apache.org](https://echarts.apache.org/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fce12dq55x4le8e4ezhvm.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fce12dq55x4le8e4ezhvm.png) ECharts 是一個開源資料視覺化函式庫,最近越來越受歡迎。它由流行的[Apache](https://apache.org/)基金會建置,並依賴[ZRender](https://github.com/ecomfe/zrender)來呈現其圖形。與其他相比,它更複雜;它僅呈現動態資料並具有不同的顯示方式。 ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fnhnpwl5uuhhu7xxdp954.gif](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhnpwl5uuhhu7xxdp954.gif) ### ECharts的主要特點 - **廣泛的圖表類型**:ECharts 支援大量的圖表類型,實際上比大多數其他競爭對手更支援更多。其中包括長條圖、折線圖、圓餅圖、散佈圖、地圖、雷達圖、箱線圖、熱圖、平行座標、桑基圖等。這種多功能性允許用戶以多種格式視覺化資料。 - **互動性:** ECharts的突出特點之一是其豐富的互動性。它包括對互動式元素的內建支持,例如工具提示、縮放、平移和資料突出顯示。用戶可以與視覺化進行交互,以更深入地了解資料。 - **效能:** ECharts 專為高效能而設計,能夠有效處理大型資料集。它利用 Canvas 和 WebGL 進行渲染,這比傳統的基於 SVG 的渲染效能更高,適用於複雜的視覺化和大資料量。 ### 如何開始使用 Apache ECharts 👀 使用 npm 安裝 echarts: ``` npm install echarts ``` 以下程式碼片段在 id 為`#chart`的 DOM 元素中建立了一個簡單的長條圖: ``` // Import ECharts import * as echarts from 'echarts'; // Initialize the chart var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option; // Specify the chart configuration option = { title: { text: 'Simple Bar Chart' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F'] }, yAxis: {}, series: [ { name: 'Value', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // Use the specified chart configuration option && myChart.setOption(option); ``` 如果你覺得這個專案很有趣,可以在GitHub上給它一個Star⭐️,目前他們的Star數已經接近60k了! **[GitHub 上的 Star ECharts ⭐️](https://github.com/apache/echarts)** --- 5. Nivo:用於在 React 中建立圖表應用程式的庫 ----------------------------- **網址: [https://nivo.rocks](https://nivo.rocks/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2F2k97ihdlfubm0zs5q1rm.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2k97ihdlfubm0zs5q1rm.png) Nivo 是一個高階開源 JavaScript 函式庫,用於建立資料視覺化,專門設計用於與 React 搭配使用。它建置在 D3 之上,提供廣泛的圖表類型,並具有內建主題、互動性和響應式設計。以下是一些關鍵功能和方面,使 Nivo 成為 React 應用程式中資料視覺化的熱門選擇: ### Nivo 的主要特點 - **易於使用:** Nivo 的設計比 D3.js 等替代方案更用戶友好且更易於使用。它提供了更高層次的抽象,使得無需深入了解 SVG 或 DOM 操作即可輕鬆建立複雜的圖表。 - **React 整合:** Nivo 專為 React 建置,使其成為在 React 生態系統中工作的開發人員的絕佳選擇。它利用 React 基於元件的架構來輕鬆整合和重複使用。 - **主題和響應性:** Nivo 包含對主題和響應式設計的內建支持,使您可以更輕鬆地建立在不同設備上看起來不錯並與應用程式的設計相匹配的圖表。 ### 如何開始使用 Nivo 👀 如果您是 React 開發人員,開始使用 Nivo 會很容易。安裝 nivo 核心套件以及您選擇的相關圖表特定庫。在本例中,我們正在實作一個長條圖: ``` yarn add @nivo/core @nivo/bar ``` 完成後,匯入相關圖表元件並在您的 React 環境中使用它: ``` import { Bar } from '@nivo/bar'; const MyBarChart = () => { const salesData = [ { "category": "Electronics", "value": 5000 }, { "category": "Clothing", "value": 3000 }, { "category": "Furniture", "value": 2500 } ]; return ( <Bar data={salesData} indexBy="category" maxValue={6000} keyBy="id"/> ); }; export default App; ``` Nivo 是開源的,您可以在 GitHub 上為他們的專案加註星標 - 目前它們的星標數量已超過 12k! **[⭐️ GitHub 上的 Star Nivo](https://github.com/plouc/nivo)** --- 6. Plotly:適用於不同技術堆疊的開源圖表庫 ------------------------- **網址: [https://plotly.com](https://plotly.com/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fdxm6bnd8u9e4wxxjv3hh.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdxm6bnd8u9e4wxxjv3hh.png) **Plotly**是一個開源資料視覺化函式庫,支援多種圖表類型和互動功能。它可用於多種程式語言,包括 Python、R 和 JavaScript。 Plotly.js 是該函式庫的 JavaScript 版本,建構在 D3 之上,廣泛用於建立基於 Web 的互動式視覺化。 ### Plotly 的主要特點 - **支援不同的程式語言**:Plotly 支援不同的語言,這與許多其他支援一種語言的圖表庫不同。它允許您使用任何您熟悉的語言將資料視覺化為圖表。這是[完整的清單](https://plotly.com/graphing-libraries/)。 - **複雜圖表類型:** Plotly 抽象化了 matplotlib、ggplot2 或 MATLAB 等軟體包中的統計和科學圖表類型。 - **可移植:** Plotly 圖表以 JSON 物件的形式進行聲明性描述。圖表的每個面向(例如顏色、網格線和圖例)都有一組對應的 JSON 屬性。這允許在所有不同的語言實作中使用相同的配置。 - **效能:** Plotly 的圖表主要使用 SVG,但它也可以利用 webGL 來渲染高效能視覺化。 ### 如何開始使用 Plotly 👀 如前所述,Plotly 可以與多種程式語言一起使用,但在本例中我們將專注於 Javascript。 首先,安裝相關的npm套件: ``` npm install plotly.js-dist ``` 然後,在 html 中建立一個空的 div 元素來繪製圖形: ``` <div id="tester" style="width:600px;height:250px;"></div> ``` 最後,編寫以下內容來繪製簡單的折線圖: ``` const TESTER = document.getElementById('tester'); Plotly.newPlot( TESTER, [{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16] }], { margin: { t: 0 } } ); ``` 如果您發現 Plotly 是一個很好的工具,您可以給它一顆星,並為他們在 GitHub 上的專案做出貢獻。 - **[GitHub 上的 Star Plotly Python 專案⭐️](https://github.com/plotly/plotly.py/)** --- 7.勝利:用於圖表和資料可視化的React元件 ----------------------- **網址: [https://commerce.nearform.com/open-source/victory](https://commerce.nearform.com/open-source/victory/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fy1hhhtiq4cbkwnlzusin.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy1hhhtiq4cbkwnlzusin.png) **Victory**是一個適用於 React 和 React Native 的開源模組化圖表庫。它提供了一個簡單而優雅的 API,用於建立各種資料視覺化。與 Nivo 類似,Victory 利用了 React 的優勢,使其成為已經熟悉 React 生態系統的開發人員的自然選擇。 ### Victory JS 的主要特點 - **React 和 React Native 具有相同的 API** :Victory 專為 React 和 React Native 建置,允許無縫整合到 Web 和行動應用程式中。 - 易於使用:Victory 的聲明式、基於元件的 API 使得向 React 應用程式加入視覺化變得簡單,特別是與 D3 等其他命令式方法相比。 - **互動性**:Victory 提供開箱即用的工具提示、對事件和複雜動畫的支持,以使視覺化感覺更加生動。 ### 如何開始勝利 首先,安裝 npm 套件: ``` npm install victory ``` 然後,根據您的需求匯入您想要使用的相關元件。例如: ``` import React from 'react'; import { VictoryBar } from 'victory'; const data = [ {quarter: 1, earnings: 13000}, {quarter: 2, earnings: 16500}, {quarter: 3, earnings: 14250}, {quarter: 4, earnings: 19000} ] function App() { return ( <VictoryBar data={data} // data accessor for x values x="quarter" // data accessor for y values y="earnings" /> } ``` 如果您覺得 Victory 很酷,您可以繼續在 GitHub 上給該專案一顆星。目前他們的星數超過 10,000 **[GitHub 上的明星勝利 ⭐️](https://github.com/FormidableLabs/victory)** --- 結論 -- 恭喜您已經走到這一步了! 在本文中,我們介紹了今年要探索的 7 個圖表庫。我們已經超越了簡單的概述,而是發現了每個庫的工作原理、其底層架構以及用於建置它的技術。此外,我們還學習如何開始將這些庫合併到您的專案中。 在我們分道揚鑣之前,如果您認為本文有幫助,請考慮在[GitHub](https://github.com/latitude-dev/latitude)上給我們一顆星來表達您的支持。感謝您的閱讀,我期待您參與下一篇文章! 👋 --- 原文出處:https://dev.to/latitude/7-best-chart-libraries-for-developers-in-2024-25he

身為開發者,我的創業失敗、接案、以及自我成長經驗分享!

2020年,我剛關閉了之前的創業公司,厭倦了在專案公司的兼職工作。我曾經(現在仍然是)數位遊牧者並尋找遠距工作。 當時是新冠疫情之前,遠距工作並不像今天那麼重要。太多的開發人員(主要是自由工作者)尋找工作和一些職位。 我在那裡找不到工作,甚至連面試機會都沒有。憑藉我的技能,我知道我適合任何地方(我作為開發人員已經有 7 年多了。) ![拒絕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hft38itzykdcozohfgs6.png) --- 做我自己的事 ------ 我創辦了另一家名為 Linvo 的新創公司,進展非常順利。我得到了客戶並賺了錢——但最終沒有成功。 那時候我每天都在共享辦公(早上9點到12點)簽失業金來拿政府的錢🙈 我在共享辦公空間的開放空間裡,所以我可以選擇與不同的創辦人進行個人聯繫——不是為了找工作,而是談論幾乎所有的事情。 但隨著談話的繼續,人們了解了我的技能。 ![你了解我](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhaunmgwvor6o0zy7ina.gif) --- 在共享辦公空間閒逛 --------- 我想謙虛一些,但幾乎所有在開放空間工作的新創公司都向我提供了工作機會,完全遠程,幾乎可以以我想要的任何期限工作。就這樣,我開始在[Novu](https://novu.co/)工作了整整兩年。 ![我](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6as772lphqfoo7a9q7j.png) 現在,很明顯,當你與人建立個人聯繫時,找到工作會更容易(這就是新創公司參加活動來銷售他們的產品的原因)。但我想更深入地了解我是如何從 0 到 100 的。 我之前寫過一篇文章,內容是[為開源做出貢獻將使你找到新工作的機會增加 10 倍](https://dev.to/github20k/contributing-to-open-source-will-10x-your-chances-to-land-a-new-job-433f) 我堅持這一點。但還有更多。 生活中的一切都與風險有關 - 您越信任,有人僱用您/使用您的服務/向您購買軟體的機會就越大。 但信任是很難的。 當你編寫程式碼時如何才能獲得信任? --- 我所說的與我所是的 --------- 每當我尋找自由工作者(例如前端開發人員)時,我無法確定是否: - 他們有著極佳的個人契合度 - 他們實際上可以寫出好的程式碼 - 他們可以跳出框框思考。 因為我只能從他們那裡得到一些關於他們自己的話語。 作為一名企業家,我已將我的工作從開發人員轉移到開發人員成長(成長駭客),因為我認為這對企業的發展至關重要。 在 Novu 的第二年,我決定需要建立自己的知識庫,以便人們能夠了解有關我的一切資訊 - 贏得他們的信任並向他們展示我的個性。 因此,我建立了[Gitroom 電子報](https://gitroom.com)和[YouTube 頻道](https://www.youtube.com/@nevo-david),以便人們可以看到我的行銷技能,也建立了我的[Gitroom 開源專案](https://github.com/gitroomhq/gitroom/),以便他們可以看到我的開發技能。 我非常穩定(每天都出現)——目前,時事通訊已連續 46 週(幾乎一年)。 ![條紋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8thomejgye2j11dm1a8q.png) 並分享有價值的資訊—這是至關重要的: - 我不教簡單的程式碼,例如演算法 - 我不教 CSS 和 HTML 我主要注重以資歷為基礎來獲得他們的信任。 今天,我有太多的客戶 - 我拒絕了很多工作,直到我學會瞭如何擴展或獲得一些缺失的技能。 --- 做這個 --- 由於閱讀本文的大多數人都是純粹的開發人員(而不是行銷人員/成長駭客),因此我會提出一些建議。 1. **為開源做出貢獻**——展示你的技能的最佳方式。沒有什麼比對大型程式碼庫的開源貢獻更重要的了,這是人們需要的大部分證據。 2. **擴大你的貢獻**-不是每個人都知道你的貢獻;在所有可能的社交媒體(X、Linkedin、Youtube、Daily.dev)上談論它,讓人們了解您所做的事情。 **專業提示:**標記您貢獻程式碼的公司;他們可能會重新發布您。 3. **想想你的受眾**- 我看到太多的「影響者」專注於初級開發人員,例如(你必須知道的10 個CSS 技巧和10 個HTML 標籤),雖然這會大大增加你的受眾規模,因為有更多的初級開發人員在世界上比前輩。你會建立錯誤的受眾。作為一名大三學生,你將與許多開源創始人一起打上自己的烙印。即使對於開發相關職位來說,這也可能是錯誤的,因為你建立的受眾永遠不會付錢。 ![做這個](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3h1py1um97u0w3l3xlq.png) --- 吉特魯姆 ---- 我將注入一些可以幫助你的自我推銷:) [Gitroom](https://github.com/gitroomhq/gitroom)是一個用於社群媒體排程的開源工具。 向 Gitroom 做出貢獻可以實現我討論的兩點。 1. 為大型程式碼庫做出貢獻 2. 透過安排社交媒體貼文來擴大您的貢獻。 但還有第三個,我想你會喜歡的。 Gitroom 是最大的開源創辦人社群;你實際上會和他們一起出去玩,他們不斷在世界各地尋找遠端員工。 這是獲得內部信任的好方法。 貢獻後,加入我們的 Discord 頻道。 所有開源創始人都在那裡。 ***如果可以的話請給 Gitroom 星標*** --- 糖霜 -- 本文不會為你粉飾它。 如果你想被錄用,你需要表現出色。 這不是一個「欺騙」人們僱用你的快速計劃。 它只是擴大您的知識和技能的工具。 如果您不能為大型程式碼庫做出貢獻,就不要指望被雇用。 這是我在上一篇文章的一段對話: ![程式碼庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hksdy5v7k8qpgbwo0f8x.png) 如果你還不夠好,那就努力提升你的技能。 當涉及到實際工作時,沒有任何魔術。 --- 原文出處:https://dev.to/github20k/i-am-suitable-for-the-job-but-unsure-why-i-cant-get-it-5eg4