原文出處：https://dev.to/antonmelnyk/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5 #簡介 你好，讀者！ 如您所知，設定 [Webpack](https://webpack.js.org/) 可能是一項令人沮喪的任務。儘管有很好的文件，但由於一些原因，這個捆綁器並不是一匹舒服的馬。 Webpack 團隊正在非常努力且相對快速地開發它，這是一件好事。然而，對於新開發人員來說，一次性學習所有內容是難以承受的。教程已經過時，一些插件損壞，發現的範例可能會令人困惑。有時，您可能會陷入一些瑣碎的事情，並透過 Google 進行大量搜尋，以在 GitHub issues 中找到一些最終有幫助的簡訊。 缺乏關於 Webpack 及其工作原理的介紹性文章，人們直接奔向 *create-react-app* 或 *vue-cli* 等工具，但有時需要編寫一些簡單的純 JavaScript 和 SASS，無需框架或任何奇特的東西。 本指南將逐步介紹 ES6、SASS 和圖片/字體的 Webpack 配置，無需任何框架。對於大多數簡單的網站開始使用 Webpack 或將其用作進一步學習的平台應該足夠了。儘管本指南需要一些有關 Web 開發和 JavaScript 的先驗知識，但它可能對某些人有用。至少當我開始使用 Webpack 時，我會很高興遇到這樣的事情！ #我們的目標 我們將使用 Webpack 將 JavaScript、樣式、圖像和字體檔案捆綁到一個 *dist* 資料夾中。  Webpack 將產生 1 個捆綁的 JavaScript 檔案和 1 個捆綁的 CSS 檔案。您可以像這樣簡單地將它們加入到 HTML 文件中（當然，如果需要，您應該更改 dist 資料夾的路徑）： ``` <link rel="stylesheet" href="dist/bundle.css"> <script src="dist/bundle.js"></script> ``` 你就可以走了:tropical_drink: 您可以查看本指南中完成的範例：:link:[link](https://github.com/heyanton/simple_webpack_boilerplate)。 注意：我最近更新了依賴項。本指南適用於最新的 Webpack 5，但設定仍適用於 Webpack 4，以防您需要！ #開始 ####1。安裝Webpack 我們使用 [npm](https://www.npmjs.com/): `$ npm init` 命令在專案資料夾中建立一個 *package.json* 文件，我們將在其中放置 JavaScript 依賴項。然後我們可以使用 $ npm i --save-dev webpack webpack-cli 來安裝 Webpack 本身。 ####2。建立入口點文件 Webpack 從單一 JavaScript 檔案開始運作，該檔案稱為入口點。在 *javascript* 資料夾中建立 *index.js*。您可以在這裡編寫一些簡單的程式碼，例如 `console.log('Hi')` 以確保其正常運作。  ####3。建立 webpack.config.js ....在專案資料夾中。這裡是所有:sparkles:魔法發生的地方。 ``` // Webpack uses this to work with directories const path = require('path'); // This is the main configuration object. // Here, you write different options and tell Webpack what to do module.exports = { // Path to your entry point. From this file Webpack will begin its work entry: './src/javascript/index.js', // Path and filename of your result bundle. // Webpack will bundle all JavaScript into this file output: { path: path.resolve(__dirname, 'dist'), publicPath: '', filename: 'bundle.js' }, // Default mode for Webpack is production. // Depending on mode Webpack will apply different things // on the final bundle. For now, we don't need production's JavaScript // minifying and other things, so let's set mode to development mode: 'development' }; ``` ####4。在 *package.json* 中新增 npm 腳本來執行 Webpack 要執行 Webpack，我們必須使用 npm 腳本和簡單的命令「webpack」以及我們的設定檔作為 *config* 選項。我們的 *package.json* 現在應該如下所示： ``` { "scripts": { "build": "webpack --config webpack.config.js" }, "devDependencies": { "webpack": "^4.29.6", "webpack-cli": "^3.2.3" } } ``` ####5。執行Webpack 透過基本設置，您可以執行“$ npm run build”命令。 Webpack 將尋找我們的入口文件，解析其中的所有[*import*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 模組相依性並將其捆綁到*dist* 資料夾中的單一 *.js* 檔案。在控制台中，您應該看到如下內容：  如果您將 `<script src="dist/bundle.js"></script>` 加入到 HTML 檔案中，您應該在瀏覽器控制台中看到「Hi」！ #:顯微鏡：裝載機 偉大的！我們捆綁了標準 JavaScript。但是，如果我們想使用 ES6（及更高版本）的所有酷炫功能並保持瀏覽器相容性怎麼辦？我們應該如何告訴 Webpack 將我們的 ES6 程式碼轉換（*transpile*）相容於瀏覽器的程式碼？ 這就是 Webpack **loaders** 發揮作用的地方。 Loader 是 Webpack 的主要功能之一。他們對我們的程式碼進行某些轉換。 讓我們在 *webpack.config.js* 檔案中新增選項 *module.rules*。在此選項中，我們將介紹 Webpack 如何準確地轉換不同類型的檔案。 ``` entry: /* ... */, output: /* ... */, module: { rules: [ ] } ``` 對於 JavaScript 文件，我們將使用： ###1。 [babel-loader](https://github.com/babel/babel-loader) [Babel](https://babeljs.io/) 是目前最好的 JavaScript 轉譯器。我們將告訴 Webpack 在捆綁之前使用它將現代 JavaScript 程式碼轉換為與瀏覽器相容的 JavaScript 程式碼。 Babel-loader 正是這樣做的。讓我們安裝它： `$ npm i --save-dev babel-loader @babel/core @babel/preset-env` 現在我們要新增有關 JavaScript 檔案的規則： ``` rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] ``` * `test` 是我們要轉換的檔案副檔名的[正規表示式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)。在我們的例子中，它是 JavaScript 檔案。 * `exclude` 是一個正規表示式，它告訴 Webpack 在轉換模組時應該忽略哪個路徑。這意味著如果我們將來導入它們，我們將不會轉換從 npm 匯入的供應商庫。 * `use` 是主要規則的選項。這裡我們設定 loader，它將應用於與「test」正規表示式相對應的檔案（在本例中為 JavaScript 檔案） * “選項”可能因載入程式而異。在這種情況下，我們為 Babel 設定預設預設，以考慮應該轉換哪些 ES6 功能，哪些不應該轉換。它本身是一個單獨的主題，如果您感興趣，可以深入研究它，但目前保持這樣是安全的。 現在您可以將 ES6 程式碼安全地放置在 JavaScript 模組中！ ###2。 [sass-loader](https://github.com/webpack-contrib/sass-loader) 是時候處理樣式了。通常，我們不想寫純 CSS。我們經常使用 [SASS](https://sass-lang.com/) 預處理器。我們將 SASS 轉換為 CSS，然後應用自動前綴和縮小。這是 CSS 的一種「預設」方法。讓我們告訴 Webpack 要這樣做。 假設我們在 *javascripts/index.js* 入口點導入主 SASS 檔案 *sass/styles.scss*。 ``` import '../sass/styles.scss'; ``` 但目前，Webpack 不知道如何處理 *.scss* 檔案或除 *.js* 之外的任何檔案。我們需要新增適當的載入器，以便 Webpack 可以解析這些檔案： `$ npm i --save-dev sass sass-loader postcss-loader css-loader` 我們可以為 SASS 檔案新增規則並告訴 Webpack 如何處理它們： ``` rules: [ { test: /\.js$/, /* ... */ }, { // Apply rule for .sass, .scss or .css files test: /\.(sa|sc|c)ss$/, // Set loaders to transform files. // Loaders are applying from right to left(!) // The first loader will be applied after others use: [ { // This loader resolves url() and @imports inside CSS loader: "css-loader", }, { // Then we apply postCSS fixes like autoprefixer and minifying loader: "postcss-loader" }, { // First we transform SASS to standard CSS loader: "sass-loader" options: { implementation: require("sass") } } ] } ] ``` 請注意此處有關 Webpack 的重要事項。可連結多個裝載機；它們將從“use”陣列中的最後一個到第一個逐個應用。 現在，當 Webpack 在程式碼中遇到“import 'file.scss';”時，它知道該怎麼做！ ####PostCSS 我們應該如何告訴 *postcss-loader* 它必須應用哪些轉換？我們建立一個單獨的設定檔 `postcss.config.js` 並使用我們的樣式所需的 postcss 外掛程式。您可能會發現對最基本和有用的插件進行縮小和自動加入前綴，以確保 CSS 為您的真實網站做好準備。 首先，安裝這些 postcss 外掛：`$ npm i --save-dev autoprefixer cssnano`。 其次，將它們加入到 *postcss.config.js* 檔案中，如下所示： ``` module.exports = { plugins: [ require('autoprefixer'), require('cssnano'), // More postCSS modules here if needed ] } ``` 您可以更深入地研究 [PostCSS](https://github.com/postcss/postcss)，找到更多適合您的工作流程或專案需求的插件。 在完成所有 CSS 設定之後，只剩下一件事了。 Webpack 將解析您的 *.scss* 導入，對其進行轉換，然後...下一步是什麼？它不會神奇地建立一個與您的樣式捆綁在一起的單一 *.css* 檔案；我們必須告訴 Webpack 要這樣做。但這個任務超出了裝載機的能力範圍。為此，我們必須使用 Webpack 的 **插件**。 #:electric_plug: 插件 他們的目的是做裝載機做不到的任何事。如果我們需要將所有轉換後的 CSS 提取到一個單獨的「捆綁」檔案中，我們必須使用插件。我們的案例有一個特殊的插件：*MiniCssExtractPlugin*： `$ npm i --save-dev mini-css-extract-plugin` 我們可以在 *webpack.config.js* 檔案的開頭單獨導入外掛： ``` const MiniCssExtractPlugin = require("mini-css-extract-plugin"); ``` 在我們設定載入器的“module.rules”陣列之後加入新的“plugins”程式碼，我們用選項啟動我們的插件： ``` module: { rules: [ /* ... */ ] }, plugins: [ new MiniCssExtractPlugin({ filename: "bundle.css" }) ] ``` 現在我們可以將此插件連結到我們的 CSS 載入器中： ``` { test: /\.(sa|sc|c)ss$/, use: [ { // After all CSS loaders, we use a plugin to do its work. // It gets all transformed CSS and extracts it into separate // single bundled file loader: MiniCssExtractPlugin.loader }, { loader: "css-loader", }, /* ... Other loaders ... */ ] } ``` 完畢！如果您按照步驟操作，則可以執行「$ npm run build」命令並在 *dist* 資料夾中找到 *bundle.css* 檔案。現在的一般設定應如下所示：  Webpack 有大量用於不同目的的插件。您可以根據需要在[官方文件](https://webpack.js.org/plugins/)中探索它們。 # 更多載入器：圖像和字體 此時，您應該了解 Webpack 工作原理的基礎知識。但我們還沒完成。大多數網站都需要一些資源：我們透過 CSS 設定的圖像和字體。由於 *css-loader*，Webpack 可以解析 `background-image: url(...)` 行，但它不知道如果將 URL 設為 *.png* 或 *jpg* 檔案該怎麼辦。 我們需要一個新的載入器來處理 CSS 內的檔案或能夠直接在 JavaScript 中匯入它們。這是： ### [檔案載入器](https://github.com/webpack-contrib/file-loader) 使用 `$ npm i --save-dev file-loader` 安裝它，並在我們的 *webpack.config.js* 新增規則： ``` rules: [ { test: /\.js$/, /* ... */ }, { test: /\.(sa|sc|c)ss$/, /* ... */ }, { // Now we apply rule for images test: /\.(png|jpe?g|gif|svg)$/, use: [ { // Using file-loader for these files loader: "file-loader", // In options we can set different things like format // and directory to save options: { outputPath: 'images' } } ] } ] ``` 現在，如果你在 CSS 中使用一些像這樣的圖像： ``` body { background-image: url('../images/cat.jpg'); } ``` Webpack 將成功解決它。您將在 *dist/images* 資料夾中找到帶有雜湊名稱的圖像。在 *bundle.css* 會發現類似這樣的內容： ``` body { background-image: url(images/e1d5874c81ec7d690e1de0cadb0d3b8b.jpg); } ``` 正如你所看到的，Webpack 非常聰明——它正確解析了你的 url 相對於 *dist* 資料夾的路徑！ 您也可以為字體加入規則並以與圖像類似的方式解析它們；將 outputPath 變更為 *fonts* 資料夾以保持一致性： ``` rules: [ { test: /\.js$/, /* ... */ }, { test: /\.(sa|sc|c)ss$/, /* ... */ }, { test: /\.(png|jpe?g|gif|svg)$/, /* ... */ }, { // Apply rule for fonts files test: /\.(woff|woff2|ttf|otf|eot)$/, use: [ { // Using file-loader too loader: "file-loader", options: { outputPath: 'fonts' } } ] } ] ``` #總結 就是這樣！經典網站的簡單 Webpack 設定。我們介紹了 **入口點**、**載入器** 和 **插件** 的概念以及 Webpack 如何轉換和捆綁檔案。 當然，這是一個非常簡單的配置，旨在了解 Webpack 的一般概念。如果您需要的話，還有很多事情可以加入：來源映射、熱重載、設定 JavaScript 框架以及 Webpack 可以做的所有其他事情，但我覺得這些事情超出了本指南的範圍。 如果您遇到困難或想了解更多訊息，我鼓勵您查看 Webpack [官方文件](https://webpack.js.org/concepts)。快樂捆綁！
原文出處：https://dev.to/aswin2001barath/junior-to-senior-web-developer-roadmap-breakdown-1525 您是初級開發人員，正在努力爬上公司的階梯並成為高級開發人員嗎？ 您是一名感到迷茫、不知道從哪裡開始的全端開發人員嗎？ 🤔 嗯，您來對地方了！ 😎 這是初級開發人員成為受人尊敬的高級開發人員的逐步路線圖👨💻 ### 先決條件 - 基本的 HTML、CSS 和 JavaScript 知識。 - **MERN**（MongoDB、ExpressJS、ReactJS、NodeJS）或 **PERN**（PostgreSQL、ExpressJS、ReactJS、NodeJS）堆疊知識很有幫助，但不是必要的。 以下是路線圖中基本技術的細分，您可以在成為高級開發人員的過程中逐步遵循這些技術👨💻 ### SSH SSH 在安全遠端通訊中發揮著重要作用。透過熟悉 SSH 基礎知識、其命令、加密方法、SSH 金鑰管理以及將 SSH 應用於實際應用程式，您就可以順利成為高級開發人員。 - **到底什麼是 SSH？** - SSH 是 **S**ecure **Sh**ell 的縮寫，是一種旨在在兩台電腦之間建立安全通訊的協定。 （不用擔心這些花哨的術語——協議只是一堆規則，而 SSH 是一種特定類型的協議。） - **SSH 指令**：SSH 的主要用途之一是在遠端電腦上執行指令。這意味著您可以建立與伺服器的連接並使用 SSH 命令與其互動。 - **加密**：要真正掌握 SSH，了解加密等關鍵概念非常重要，其中涉及對稱和非對稱加密技術以及雜湊。這些概念為更深入地理解 SSH 的安全機制奠定了基礎。 - **SSH 金鑰**：SSH 的一個組成部分是使用 SSH 金鑰。這些密鑰由公鑰和私鑰組成。了解如何在伺服器上產生、管理和安全地儲存這些金鑰對於有效使用 SSH 至關重要。 - 練習並測試您的 SSH 技能： - 練習 SSH 技能的一個好方法是將本地電腦連接到 **GitHub** 等平台或 **DigitalOcean** 等雲端供應商。這種實務經驗將有助於鞏固您對 SSH 概念的理解。 - 想像這樣的場景：“您的 Web 應用程式一夜之間神秘地從伺服器上消失。您的任務是使用 SSH 將所有專案檔案恢復到伺服器上。”成功完成此任務可以展示您的 SSH 技能和解決問題的能力。基本上，如果你能做到這一點，那你就太棒了！ ### 表現： 效能優化是您成為高級開發人員的關鍵技能。以下技術將幫助您確保應用程式平穩且有效率地執行。透過掌握它們，您將成為性能大師。 **I) 網路優化：** - **最小化檔案**：最小化檔案至關重要，因為較小的檔案會導致更快的載入時間。這不僅可以增強使用者體驗，還可以降低專案的頻寬成本。在網路速度不同的行動裝置造訪網站的時代，這一點尤其重要。 - 1. **檔案壓縮**：較小的檔案意味著使用者的下載速度更快。了解如何使用 GZIP 等檔案壓縮技術來最小化檔案大小，以減少 HTML、CSS 和 JavaScript 等基於文字的檔案的大小。 - 2. **影像最佳化**：透過調整大小、壓縮和選擇正確的影像格式來優化影像可以顯著減小檔案大小。 ImageMagick 等工具或 TinyPNG 等線上服務可以幫助您完成此過程。 - **改善應用程式的交付**：改進的交付可以加快頁面載入時間，這可以直接影響用戶的參與度和保留率。這對於全球可存取性和確保全球用戶獲得一致的體驗也至關重要。 - 1. **內容交付網絡(CDN)**：CDN 是一種分散式伺服器網絡，策略性地位於全球範圍內，用於從地理位置更靠近用戶的伺服器交付Web 內容，例如圖像、腳本和影片，從而更快的加載時間並減少延遲。作為初級開發人員，了解如何利用 CDN 來增強交付。 - 2. **HTTP/2 協定**：HTTP/2 是萬維網使用的 HTTP 網路協定的主要修訂版。它透過同時發送多個檔案並透過多路復用、壓縮和標頭優化等功能實現更快的載入時間來增強網站效能。實作 HTTP/2 協定可以顯著改善交付。 - 練習並測試您的網路優化技能： - 效能測試：初級開發人員可以透過使用 Google 的 PageSpeed Insights、GTmetrix 或 WebPageTest 等工具進行效能測試來進行練習。這些工具評估網站的效能並提供改進建議。 - 真實世界專案：初級開發人員可以透過參與真實世界專案進行練習。從頭開始建立和優化網站或 Web 應用程式可以提供實施網路優化的實務經驗。 **II) 前端優化：** - **關鍵渲染路徑以及如何改進它：** - 了解和優化關鍵渲染路徑對於使您的網站快速加載至關重要。它涉及優化從用戶請求網頁到視覺上完整的事件順序。關鍵面向包括最大限度地減少 CSS 和 JavaScript 等渲染阻塞資源、利用瀏覽器快取以及利用非同步載入技術。 - **漸進式 Web 應用程式 (PWA) 與程式碼最佳化：** - 開發漸進式 Web 應用程式涉及最佳化程式碼以獲得卓越的使用者體驗。 PWA 是一種 Web 應用程式，可提供類似本機應用程式的體驗，具有離線功能、推播通知和快速載入時間等功能。程式碼優化實踐包括高效的快取策略和最大限度地減少 JavaScript 執行，同時確保互動順暢。 - **建立離線就緒的漸進式 Web 應用程式 (PWA)：** - 了解如何開發離線工作的 PWA，甚至使用 JavaScript、HTML 和 CSS 將其提交到應用程式商店。離線功能、快取和響應式設計是確保 PWA 無縫運作（無論使用者的網路連線為何）的重要組成部分。 - **程式碼分割：** - 程式碼分割是一種透過將 JavaScript 分成按需載入的較小套件來增強網站效能的策略。這種做法減少了初始載入時間並改善了整體使用者體驗，尤其是在較慢的網路連線上。 - **React 和 Redux 應用程式的智慧渲染：** - 透過智慧渲染技術提高 React 和 Redux 應用程式的速度。這涉及優化元件渲染和狀態管理，減少不必要的重新渲染，並確保您的應用程式快速響應用戶互動。 - 練習並測試您的知識： - 透過實際改善網站（例如公司登陸頁面）來提升您的技能。實施您在實際專案中學到的效能最佳化，然後測試結果。這種實務經驗對於鞏固您在前端優化方面的專業知識非常寶貴。 **III) 後端優化** 後端優化以及實踐和測試是確保您的應用程式能夠處理不斷增長的用戶群並提供高效、可靠的服務的基礎。 - **內容交付網路 (CDN)：** - 內容交付網絡是分散式伺服器網絡，用於儲存網站內容的快取副本。這些伺服器策略性地分佈在全球各地，允許用戶從地理位置較近的伺服器存取資料。這可以減少延遲、加速內容交付並增強用戶體驗。 - **擴充資料庫：** - 擴展資料庫涉及擴展資料庫的容量和效能以處理增加的資料和流量。技術包括垂直擴展（向單一伺服器加入更多資源）或水平擴展（加入更多伺服器來分配負載），確保您的應用程式在成長時保持回應靈敏且可靠。 - **壓縮來自後端的回應：** - 壓縮來自後端的回應意味著減少從伺服器發送到客戶端的資料大小。 GZIP 壓縮等技術可以顯著減小響應大小，從而縮短載入時間並減少頻寬消耗。 - **快取:** - 快取涉及將經常存取的資料或內容儲存在記憶體或磁碟上，以便更快地檢索。實施快取策略可以縮短回應時間、減少伺服器負載並增強應用程式的整體效能。 - **負載平衡和負載測試：** - 實作負載平衡器對於在多個伺服器之間分配傳入網路流量至關重要。負載平衡可確保沒有任何一台伺服器不堪負荷，從而提高資源利用率並提高可靠性。 - 負載測試模擬現實條件，以辨識效能瓶頸、確保可擴充性並最佳化您的基礎架構。 - 練習並測試您的知識： - 實作負載平衡器。 - 對專案實際執行負載測試。 ### 前端框架與概念 前端開發是您成為資深開發人員的基石。熟悉這些概念將為網路開發事業的蓬勃發展鋪路。 - **React 和 Redux**：React 和 Redux 是建立動態單頁應用程式的首選函式庫。首先掌握 React 基礎知識並建立一個專案。然後，深入研究 Redux，了解狀態管理並建立應用程式以實現可擴展性。 - **Webpack4 + Parcel**：Webpack4 和 Parcel 是用於捆綁專案文件和優化生產包的最新工具。獲得使用 Webpack 設定專案的實務經驗。 - 練習並測試你的技能： - 透過使用 React 和 Redux 建立專案來測試您的知識。 - 了解使用 Webpack 設定專案的細節。 ### 測試： 測試是一個重要的主題，但也經常被初學者和初級開發人員忘記。 公司喜歡測試。因此，如果您知道如何編寫單元測試和整合測試，您將編寫更好的軟體。 - **軟體測試 101：** 了解什麼是測試、測試類型、目前 Web 開發世界中的測試環境、測試工具和函式庫的類型是什麼、如何使用它們以及如何設定一切。 - **Jest**：用於測試的頂級庫之一。學習編寫同步和非同步測試、編寫模擬並產生覆蓋率報告 - **React 測試**：然後深入為您的 React 應用程式編寫測試。學習使用快照測試和酵素來編寫智慧測試，以避免應用程式中出現錯誤。 到此結束時，您應該了解整個測試環境，並可以輕鬆地編寫您遇到的任何測試。 ### 打字稿： TypeScript 是目前 Web 開發環境中最熱門的話題之一。 - **靜態類型**：了解靜態類型的基礎知識。了解為什麼 JavaScript 沒有靜態型別而是動態型別。 - **Typescript 101**：了解什麼是 TypeScript、如何使用 TypeScript、有哪些不同類型以及如何將它們新增到您的專案中。 - **React 中的 Typescript**：最終學習如何將 TypeScript 新增到您自己的 React 專案中。 再次確保您掌握這些主題。 ### SPA + 伺服器端 - **伺服器端渲染 (SSR)**：透過伺服器端渲染深入研究 Web 渲染的起源。了解為什麼 SSR 在 Web 開發中曾經並且仍然有用。了解為什麼有些公司繼續依賴 SSR 來滿足特定需求。探索 React 中伺服器端渲染的實現，並權衡這種方法的優缺點。 - **客戶端渲染 (CSR)**：深入了解單頁應用程式 (SPA) 中的客戶端渲染。了解企業社會責任的優點和缺點。了解何時選擇客戶端渲染而不是伺服器端渲染。了解如何實作客戶端渲染並評估兩種渲染方法的優缺點。 - **Next.js**：探索 Next.js，這是一個簡化伺服器端動態應用程式所建立的函式庫。了解 Next.js 如何促進伺服器端渲染和互動式資料驅動 Web 應用程式的開發。 在本節結束時，您將準備好決定是否需要為您的專案使用單頁應用程式或伺服器端呈現的應用程式。 ### 安全： - **前端安全性最佳化**：學習跨網站腳本和 SQL 注入等註入攻擊。練習這些以了解它們是如何工作的。 - **後端安全優化**：了解有關後端安全的更多資訊以及管理敏感資料的最佳實踐。 - **道德駭客 101**：學習基本的道德駭客技術，以便我們在建立應用程式時能夠學習如何保護自己。 因此，在學習這些概念後，當您使用最新的提示和技巧以及實施最新的工具和技術來建立安全應用程式時，您必須充滿信心。 ### 碼頭工人： **Docker** 是一個容器化平台，可讓您將應用程式及其相依性打包到可移植、隔離的容器中。這些容器可以在從開發到生產的不同環境中一致運作。 Docker 是一個絕對會讓你驚嘆不已的工具。 - **容器**： - 首先深入了解容器及其對公司建立和管理應用程式的方式的深遠影響。 - 容器支援輕量級、一致且易於複製的環境，徹底改變了軟體開發和部署。 - **Docker 101**：製作容器 - 透過了解如何建立 Docker 檔案和建立自己的容器來了解 Docker 的基礎知識。 - 這些基礎知識構成了使用 Docker 輕鬆封裝和分發應用程式的基礎。 - **Docker-compose**：編排容器 - 探索 Docker-compose，一個用於編排多容器 Docker 應用程式的工具。 - 了解如何將多個容器作為單一服務進行定義、配置和管理，從而簡化複雜應用程式的部署。 - **微服務與單體架構**： - 在整體架構中，單一大型程式碼庫處理所有應用程式功能，這使得更新和擴展具有挑戰性。 - 容器支援微服務方法，其中應用程式被分為更小的、獨立的服務，可以單獨開發、部署和擴展。這種轉變提供了靈活性、可擴展性並提高了資源利用率。 - 容器（如 Docker）有助於從整體架構轉向微服務。因此，請詳細了解每種架構的優缺點。 - 練習並測試您的 Docker 技能： - 了解如何將 Redis 伺服器、Postgres 資料庫和 API 伺服器全部組合到一個 docker 容器中，以便它們都透過一個命令執行。 在本節和操作專案之後，每當我們部署應用程式時，我們都會對 Docker 感到非常滿意。 ### Redis： Redis 是最受歡迎、最常用的資料庫之一，是一種鍵值儲存。 - **資料庫 101**：深入研究資料庫主題，深入了解各種類型的資料庫以及它們如何適應資料儲存解決方案的前景。 - **什麼是 Redis？：** - Redis 是一個開源的記憶體鍵值儲存資料庫。 - 它在資料儲存和檢索方面表現出色，使其成為需要高速資料存取的應用程式的多功能選擇。 - **Redis 101**：學習如何使用 Redis。了解如何使用 Redis 進行快取以使我們的網站更快並進行會話管理。 - **Redis CLI**：了解如何使用 Redis CLI。 - **練習您的 Redis 技能**：啟動我們自己的 Redis 伺服器。 - **鍵值資料庫及其作用：** - 像 Redis 這樣的鍵值資料庫提供了一種簡單而有效的資料儲存方式。 - 它們將資料儲存為鍵和對應值對，從而實現快速資料檢索。 - 這些資料庫在快速資料存取至關重要的場景中尤其有價值，例如快取、會話管理和即時應用程式。 - **何時使用 Redis 等資料庫：** - Redis 非常適合速度和資料一致性至關重要的用例。 - 考慮使用 Redis 來快取經常存取的資料、管理使用者會話、為即時應用程式提供支援以及確保對關鍵資訊的低延遲存取。 ### 會話 + JWT 使用您的 React 專案，了解如何建立網站的整個動態部分：即使用以下技術的使用者管理。 - **會話驗證**：了解如何建立新的個人資料頁面。了解如何使用基於會話的身份驗證（其中將使用 cookie）並了解如何實現它。 - **令牌身份驗證**：了解有關令牌身份驗證（例如 JWT 令牌）的更多資訊。了解每種身份驗證類型的優缺點。 - **安全性身分驗證流程**：了解如何實施可以在您選擇的任何應用程式中實施的安全性身分驗證流程。 - 練習您的 Redis 技能：學習如何使用和實施 Redis 進行會話管理 - 這樣我們就有受保護的路線 - 此外，這樣，只要我們有登入功能，我們就可以使用該系統，因為我們知道它是安全的並且遵循最佳實踐。 ### 亞馬遜網路服務（「AWS」）： Amazon Web Services，通常稱為 **AWS**，是一個強大的雲端平台，它改變了公司的營運方式，提供了無與倫比的可擴展性和效率。 #### AWS 101： - **什麼是 AWS（亞馬遜網路服務）？：** - AWS 是一個雲端運算平台，提供廣泛的服務，包括運算能力、儲存、資料庫、機器學習等。 - 它提供可擴展的按需資源，使企業能夠創新和發展，而無需管理實體基礎設施的負擔。 - **基礎設施即服務 (IaaS)：** - AWS 提供基礎架構即服務，讓使用者透過網際網路配置和管理虛擬化運算資源。 - 這種方法消除了對本地硬體的需求，並提供了靈活性和可擴展性。 - **平台即服務 (PaaS)：** - AWS 將其服務擴展到平台即服務，使開發人員能夠建置、部署和管理應用程式，而無需擔心底層基礎設施。 - 這使開發人員能夠專注於編寫程式碼和交付價值。 - **使用 AWS 進行擴充：** - AWS 使公司能夠有效擴展，並根據需要提供對資源的存取。 - 它允許企業將其能力與需求相匹配，類似於Google、亞馬遜和微軟等科技巨頭，確保他們能夠無縫地為客戶提供服務。 - **AWS Lambda** 是一種無伺服器運算服務，使開發人員能夠執行程式碼來回應事件，而無需管理伺服器。它提供了一種經濟高效、可擴展且簡單的方式來執行雲端中的功能。 - **Serverless 101**：了解如何使用 Serverless 框架。 - 練習您的 AWS 技能：了解如何將 AWS Lambda 實施到您的 React 應用程式中。 最後，您將充滿信心地使用 AWS 並建立雲端中的功能。 ###CI/CD 當我們將所有內容聯繫在一起並建立瞭如何編寫優秀軟體和優秀應用程式的整體圖景之後；了解如何實際建立良好的流程以及如何實際將應用程式部署到生產中。 - **持續整合**：了解有關良好持續整合實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - **持續交付**：了解有關良好持續交付實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - **持續部署**：了解有關良好持續部署實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - 練習 CI/CD 技能：了解如何在專案中實施 Circle CI (CI/CD) 工具 - 確保您的開發團隊從一開始就擁有正確的工具和正確的流程 - 成功編寫錯誤更少、程式碼更簡潔的應用程式。 ### 額外位 - **程式碼分析**：了解當您第一次開始一個有大量文件並且不是您自己編寫程式碼的專案時該怎麼做！了解真正優化的提示和技巧。 - **建立高品質應用程式的一般最佳實踐**。 ### 軟技能 - 在本部落格中，我主要關注成為高級開發人員過程中的技術方面。然而，有效溝通和情緒智商等軟技能也發揮著至關重要的作用。 - [開發人員的七大軟技能及其學習方法](https://academy.zerotomastery.io/a/aff_pp6yfnkw/external?affcode=441520_dcwk-s8s)：要更深入地探索各種軟技能，請考慮請參閱資深開發人員兼程式講師Andrei Neagoie 撰寫的部落格。 ### 筆記 - 不同的公司可能對高級 Web 開發人員有不同的期望，因此請務必進行一些額外的研究來客製化您的開發路徑。 最後，在學習了上述所有主題之後，所有這些事情對您來說都會有意義。您將能夠將所有這些事情實施到您自己的專案、您自己的公司。您將了解它們中的每一個是如何連接的。 最重要的是，與其他需要數年時間學習這些技能的初級開發人員相比，借助本路線圖可以快速學習這些內容。 ### 最佳資源 - [初級到高級 Web 開發人員路線圖部落格系列](https://dev.to/aswin2001barath/series/24357)：一個部落格系列，我將學習並分享上述每個主題的知識。 - [不要成為初級開發人員：從初級到高級的路線圖](https://academy.zerotomastery.io/a/aff_5s8ff6y7/external?affcode=441520_dcwk-s8s)：Andrei Neagoie 的詳細路線圖部落格（a高級開發人員）提供免費資源的連結。 - **零到精通課程**：[完整的初級到高級Web 開發人員路線圖課程](https://academy.zerotomastery.io/a/aff_hpwn5xy9/external?affcode=441520_dcwk-s8s)：Andrei 的綜合課程Neagoie（同一高級開發人員）涵蓋了上述所有主題。 **我是誰？** - 我是 Aswin Barath，軟體工程迷，喜歡建立 Web 應用程式，現在在我自由職業生涯的繁忙時間透過[部落格](https://medium.com/techsoftware) 分享我的知識。 - 我也是像您一樣的初級開發人員，學習如何成為高級開發人員並在過程中分享我的知識。 - 這是我所有社交活動的連結，按平台分類在一個位置：https://linktr.ee/AswinBarath **謝謝** 非常感謝您閱讀我的部落格🙂。
原文出處：https://dev.to/wraith/my-8-tips-for-a-better-life-as-a-developer-1hfg 我擔任軟體開發人員和工程師已經有 8 年多一點了，從我自己的經驗以及從一些非常有才華的人那裡學到了很多東西。在這篇文章中，我想分享一些真正讓我的體驗變得更好、更愉快的事情。有些是技術性的，有些只是一般生活技巧。但所有這些都改善了我在軟體開發方面的生活和經驗，希望透過分享這些課程和技巧，我可以幫助您避免一些我為了弄清楚它們而必須經歷的不愉快的時光。 ## 1. 找一個您喜歡工作的地方  您的環境對您的生活貢獻很大。它可以增加或減輕壓力，幫助您集中註意力或分散注意力，讓您感到安全或不安全等等。因為它在我們每個人的生活中都扮演著不可或缺的角色，所以我認為從這裡開始是合適的。 無論您是在辦公室還是遠端工作，您很可能可以採取一些措施來找到一個讓您感覺「合適」的地方。我說「對」是因為這裡每個人都會有所不同。有些人想要感到舒適和「賓至如歸」。其他人想要一個不太舒適的區域，而是真正讓他們「進入狀態」並集中註意力的區域。 多年來，我嘗試了很多不同的地點，只是為了看看什麼對我有用。我坐在陽台上，享受早晨涼爽的空氣，喝著一杯熱咖啡。我確實坐在桌子底下，身上蓋著毯子。我坐在壁櫥、角落、咖啡店、餐廳、酒吧、汽車、公園、餐桌和樓梯井裡。透過所有這些實驗，我已經能夠找到在我需要時為我提供所需的地方。如果我需要集中註意力，我就需要獨處。某處有一扇可以關閉的門，但沒有窗戶讓我注意到有人走過。當我太舒適時，就像依偎在柔軟的沙發上的毯子裡時，我的工作效果就不太好。如果我需要改變節奏，或者只是需要和人們在一起，我發現我真的很喜歡坐在不太擁擠的小酒吧或餐廳裡。我可以在某個地方點一杯飲料和一份開胃菜然後工作，但周圍仍然有幾個人。 所以我鼓勵你嘗試幾個地方。找出什麼對你有用，同樣重要的是，找出什麼對你沒用。如果你找不到地方，你總是可以花一點力氣去打造你想要的地方！ 「正確」對你來說意味著什麼？ ## 2. 投資硬件  作為軟體開發人員，我們使用的硬體數量非常多。可以說，我們使用鍵盤和辦公椅之類的東西比生活中任何其他物品都多。當然，我們可以使用任何舊鍵盤來完成工作，我們可以坐在任何椅子上。但我發現，對「更好」的硬體進行一點投資會對我的工作體驗產生很大的影響。 ＃＃＃ 椅子 如果您在工作時坐著，並且您只想投資一件東西，那麼它絕對應該是您的椅子。一張既提供舒適又提供支撐的椅子確實可以大有幫助。從您可以坐多久並集中註意力而不會感到不舒服，到日常生活中背部、頸部和肩膀的感覺，您的椅子對您的整體健康和福祉有很大影響。因此，一定要找到一款好的產品，而不要只滿足於會導致不良姿勢的產品。 我個人使用 [Secretlab Titan Evo（蝙蝠俠主題）](https://secretlabchairs.ca/products/titan-evo-2022-series?sku=R22PU-Batman)，幾年來我對它非常滿意。與許多高端桌椅相比，價格還不錯。 ＃＃＃ 鍵盤 僅次於椅子（但相差不多）的是鍵盤。輕鬆地成為我們每天工作中互動最多的工具。那裡也有很多選擇，因此無論您的個人喜好如何，很可能有一些東西可以滿足您的需求。 每個人選擇合適的鍵盤都有很大不同。有些人喜歡低調的鑰匙而不是機械鑰匙。有些人需要整合 USB 連接埠。成本、人體工學、有線或無線、可自訂的按鍵和開關、背光、可配置的 LED、支援配置按鍵佈局、高度和大小、按鍵數量，這樣的例子不勝枚舉。尋找適合您的鍵盤無疑是一段旅程，但我強烈建議您繼續下去。當然，我們可以使用任何鍵盤來完成我們的工作......但我保證，如果您嘗試一下，找到「正確的」鍵盤將使您作為開發人員的一天和體驗更加愉快。 我使用 [Moonlander Mark 1](https://www.zsa.io/moonlander/)，絕對💙它！分離式設計確實幫助我不再那麼無精打采，也幫助消除了我長期以來的肩膀和手腕疼痛。再加上那些櫻桃棕色的開關聽起來很漂亮😍！ ＃＃＃ 老鼠 談論鍵盤就不能不談論它們的助手——滑鼠。就像鍵盤一樣，市面上有許多不同類型的鍵盤，每個人都會有自己的偏好。幸運的是，即使是半像樣的滑鼠也有相當低的價格，因此嘗試一些滑鼠來找到適合您的滑鼠相對容易。但與此處的所有其他項目一樣，投入一點時間和金錢即可對您的體驗產生積極影響。 我的老鼠是 [ZLOT 垂直遊戲滑鼠](https://www.amazon.com/gp/product/B07T3PFWCB?th=1)。它是一款較輕（重量）的滑鼠，但具有良好的人體工學感覺和響應能力，我已經喜歡了很長一段時間了。 ＃＃＃ 監視器 這絕對是一個可選項目，但我發現它讓我的工作更加愉快。並非每個人都需要外接顯示器。有些人實際上更喜歡直接使用筆記型電腦工作。但如果您確實喜歡使用外部顯示器，這是一項可以產生巨大影響的投資。 遺憾的是，由於多台 4k 顯示器在 Mac 上工作出現問題，我放棄了多顯示器設置，現在使用 [Sceptre 35" 曲面顯示器](https://www.sceptre.com/Monitors/2K-4K -Series /C355W-3440UN-35-Curved-Monitor-product1176category12category98.html）。它有很多空間，所以我仍然可以在一個螢幕上打開大量視窗。 ＃＃＃ 耳機 耳機也是可選的（有些人可能會反對這一點😝），但它們的好處怎麼強調都不為過。從減少干擾到幫助您集中註意力，一副好的耳機可以大有幫助。就像我列出的大多數項目一樣，每個人的偏好都會有所不同。但是，投入一點時間和金錢來尋找一雙適合您的好鞋，確實可以將您的遊戲提升到一個新的水平。我認識的許多人都尋求良好的降噪效果，而且它們必須輕盈舒適，這樣才能一次佩戴幾個小時。 我個人喜歡使用 Beats。我曾經使用[Studio3](https://www.bestbuy.ca/en-ca/product/beats-by-dr-dre-studio3-over-ear-noise-cancelling-bluetooth-headphones-black/11534527 ）但是當我必須開始戴眼鏡時，我不喜歡這些耳機給我的鏡框帶來的壓力，所以我改用了[Beats Fit Pro](https://www.beatsbydre.com/earbuds/beats- fit- pro?sku=MK2F3) 並且對它們非常滿意。我已經連續戴了 8 個小時，效果非常好。它們輕巧、舒適、音質好，並且在我慢跑和運動時表現良好且穩定。 您使用什麼硬體？您夢想的硬體是什麼？ ## 3. 找到您*喜歡*使用的工具  除了硬體之外，作為開發人員，我們還使用許多軟體工具來完成我們的工作。有些我們別無選擇，但也有很多我們可以選擇，找到您真正喜歡使用的工具確實可以讓您的日常體驗變得更好。即使只是擁有一個可以配置為您喜歡的外觀的工具也可以產生積極的影響。 我在這裡想強調的不是找到每個人都使用的工具，因為他們可以做各種各樣的事情。更多的是尋找您真正「喜歡」和「期待」使用的工具來完成工作。即使它們不能完成其他工具可以完成的所有奇特的事情，如果您確實希望使用其他工具，那就使用它！擁有我們積極喜歡的工具確實會為我們的生活增添很多積極性。 多年來，類似的工具有很多，但這裡有一些工具為我的日常生活帶來了很多樂趣： - Giphy 桌面應用程式 - 用 gif 回覆取代無聊的文字，讓 Slack 訊息變得生動起來。 - 光線投射 - 這已經取代了我 Mac 上的 Spotlight。透過專業版，我可以存取 ChatGPT 4...因此，只需一個快速鍵盤快捷鍵，我就能輕鬆掌握 AI。對我來說遊戲規則改變者！ - 黑曜石 - 雖然這已經是一個流行的筆記應用程序，但我花了一些時間編寫了一些腳本來為我自動化工作，它完全改變了我記下所有筆記並跟踪我需要做的所有事情的方式。 - 弧形瀏覽器 - Arc 花了整整 1 天的時間才成為我的主要瀏覽器。現在，當我測試瀏覽器對我正在建立的某些功能的支援時，我只使用其他瀏覽器（在我的桌面上）。 - 習慣性的 - 獲得徽章、成就和一般遊戲化讓我非常有動力，所以這個待辦事項應用程式讓我管理和執行任務變得更加有趣！ 有哪些工具可以為您的日常開發生活帶來樂趣？ ## 4. 設定目標  我知道這聽起來很明顯，而且我相信我們都從無數其他來源聽到這一點。但您可能會驚訝地發現有多少人沒有為自己設定目標。不相信我？向你的任意 2 到 3 個鄰居詢問他們目前正在努力實現什麼目標。當我問這個問題時，經常得到的只是聳聳肩，然後回答「沒什麼」。 僅僅設定目標也是不夠的。你也必須定期考慮它們。有些方法建議將它們寫下來並放在鏡子上或您經常看到它們的地方。這個方法對我個人來說沒有效果，但也許對你有用？對我來說有效的方法是每天早上開始工作前坐下來15 分鐘，並重點思考我的目標、我所有的待辦事項以及日曆上的所有事情（是的，我實際上在日曆上留出15分鐘的時間）這個，並強迫自己堅持這個時間）。在這段時間裡，我思考我的目標，並找出我今天可以做的一件小事，讓我離實現每個目標更近一步。 例如，如果我的目標是在家人來過感恩節之前清理車庫，我會想，「我今天可以做哪一件小事來實現這個目標？」。有時答案特別小…「掃到工作台下面」。其他時候我可能會更有動力，或者我有更多的可用時間，這可能是更大的事情。無論如何，請花一些時間考慮您今天可以採取的一項行動來實現該目標。 當我這樣做時，我的大腦中會發生一些事情。我發現自己感覺更有成就感和更樂觀。當然，完成目標可能是一條漫長的道路（如果它是一個大目標），但是知道我離我想要完成的事情更近了，這對我的日常生活產生了積極的影響，並讓我能夠完成的事情比我想像的還要多。 無論大小，給自己設定目標。然後定期思考它們，並採取許多微小的行動，以朝著前進邁出一步。我保證這會為您的生活帶來美好的事物！ 現在您正在努力實現哪些目標？ ## 5. 保持好奇心並了解*為什麼*  很多人對編碼專案中的完成方式感到沮喪或評判。我肯定去過那裡！ - “為什麼有人選擇這項技術？！對於這個用例來說，其他技術要好得多...” - “為什麼有人會寫這樣的程式碼？！” - “如果我們不做 X 而只是做…，事情會好得多” 這些聽起來很熟悉嗎？ 儘管事情有時會令人沮喪，但在軟體開發中，做出的每個決定背後幾乎總是有一個「原因」。這是最好的選擇嗎？也許不是……但做出這樣的選擇還是有原因的。 我曾經對事情的現狀感到沮喪，然後在嘗試解決問題時感到沮喪，然後在遇到障礙時感到沮喪。但最終，事情突然發生了，我沒有感到沮喪，而是開始尋找這些事情發生的原因。背後的*原因*是什麼。當我養成「尋找原因」而不是「想知道為什麼不」的習慣時，我的好奇心變得更強。我發現我正在尋找更多的信息，更徹底地學習和理解事物，更多地同情與我一起工作的人，最終，沮喪的感覺減少了很多。 現在，我的經歷更加積極了。無論我是重構一段複雜的程式碼，試圖找到解決惱人問題的方法，還是為新工作學習全新的程式碼庫，我實際上更喜歡這個過程，因為我只是好奇並想知道「為什麼」。 最近一次讓您真正感到沮喪的編碼*事情*是什麼？您知道*為什麼*會是這樣嗎？ ## 6. 為重點工作劃出日曆  這說起來容易做起來難，具體取決於您的工作地點，但它會對您的開發人員生活產生驚人的影響！ 您是否曾經在該區域中，只是編寫程式碼來建立該新功能，然後「*叮！*」有人向您發送了一條緊急的 Slack 訊息？或是有人拍拍你的肩膀問你問題？您解決了乾擾問題，然後返回螢幕，然後您就失去了所有註意力？如果沒有……我願意賭很多錢，你會在職業生涯的某個時刻這麼做。 「在區域中」或進入「心流」的概念是一個已經被研究和寫了很多的主題。我強烈建議您查看一些有關該主題的文章和書籍，因為這是一個非常有趣的主題（至少對我來說是😃）！其中許多研究都表明，處於心流狀態是多麼有益，而且在中斷後可能需要 20 分鐘以上才能恢復到那種精神狀態！因此，找到讓自己進入這種心態並保持這種狀態的方法非常重要！ 我發現讓自己進入這種狀態的最佳方法之一就是在日曆上劃出大量時間專門用於「專注工作」。一開始這可能是一個挑戰，讓人們在嘗試聯繫之前檢查您的日曆或 Slack 狀態，並幫助每個人了解您將在焦點時間結束後立即回覆他們。但最終人們會明白過來，並且回報是巨大的！別忘了在這段時間關閉通知！ 不過這裡有一些提示...... - 接受有時會出現緊急事務並需要更高優先順序的事實。這就是生活，我們只能隨波逐流……但這不該成為「常態」。 - 拍攝 2-3 小時的片段。少於這個數量會讓人覺得不夠，但超過這個數量，人們就會被迫更頻繁地打斷你。請記住，其他人也有重要、緊急的事務，在當今的工作環境下，讓他們等待半天以上才能獲得地址確實不公平或不合理。 - 在你最有生產力的時間安排這些時間段。對我來說，早上 6 點到 10:30 左右我的工作效率最高。所以我通常會嘗試將我的專注時間安排在這些時間裡。 您發現一天中的什麼時段您的工作效率最高？ ## 7. 保持 PR 較小  我喜歡這個，並且在過去一年左右的時間裡它已經成為我的首要任務。 事實證明，保持 Pull 請求（或 GitLab 人員的合併請求）較小有很多積極的好處。發布的錯誤更少，我們審查程式碼的時間更少，功能的推出速度更快，僅舉幾例。所有這些不僅使我們的產品變得更好，而且我發現它也極大地改善了我作為開發人員的體驗！ 透過專注於較小的變化，我發現我可以更徹底地思考問題，考慮到在較大變化的混亂中可能被忽視的用例。我能夠更快地將變更納入審查，我的團隊成員能夠更快地審查我的程式碼，因為我只佔用了他們5 分鐘而不是2 小時的時間，並且在審查期間，我收到的程式碼要少得多變更請求。因此，更好的程式碼將會出現，我可以繼續花更多的時間來建立新的東西，而不是必須解決一堆被遺漏的錯誤。 另一方面，審查小型 PR|MR 比大型 PR|MR 更令人愉悅。您是否曾經需要審查某人的 PR|MR，其中包含數千個更改、跨越 20 多個檔案以及應用程式的多個區域？當你這樣做時，你的第一個反應是什麼？您是否對參與並開始審核感到過於興奮？或者，也許您感到“呃”，於是推遲了會議，因為距離下一次會議只有 30 分鐘，而您可以在這段時間內完成其他事情？ 當審查大型 PR|MR 時，通常會失去很多細節（或至少受到較少的關注），最終，大多數人會達到「審查盲目性」或「審查疲勞」的地步，事情開始被忽視，或者審稿人必須離開一段時間，稍後再回來。這一切都會導致審核過程花費更長的時間、效率更低，並導致提交更多的變更請求。更不用說所有團隊成員都有的不滿情緒了。 自從我開始將此作為自己的優先事項，並與團隊成員一起努力讓他們也這樣做時，我注意到我在 PR|MR 方面的經驗明顯改善了。我更願意在會議之間跳出一些評論，我不得不要求更少的改變，而且我不會在需要離開並重新振作起來之後感到精疲力盡。就連我的計劃也變得更準確了！ 總而言之，我強烈向大家推薦這個。如果您想了解更多關於這樣做的好處，我建議您查看 [LinearB 部落格](https://linearb.io/blog) 以及 [Dev Interrupted 播客](https://linearb .io/dev-interrupted/ podcast).他們談到了一些很棒的觀點，我發現這些觀點確實對工程領導者和團隊有幫助！ 你曾經審查過的最糟糕的公關是什麼？ ## 8. 寫下一切！  我的最後一個建議是我在去年開始做的事情，在閱讀了[如何做智慧筆記](https://www.amazon.ca/How-Take-Smart-Notes-Technique/dp/3982438802)和[把事情做好](https://www.amazon.ca/Getting-Things-Done-Stress-Free-Productivity/dp/0142000280)它對我的生活產生了驚人的影響。 當我學到新東西時，我會把它寫下來。即使只是一小段描述我學到的東西。當出現新任務時，無論大小，我都會把它寫下來。在會議期間，如果分享想法、給予回饋、提出問題，所有這些都會被記錄下來。如果我對某事有一個隨意的想法，或者一個頭腦發熱的想法……你猜對了……它會被寫下來。然後，每當我有幾分鐘空閒時間時，我都會先看筆記，而不是瀏覽社群媒體。我盡可能回顧它們，這強化了我腦海中的信息，但也幫助我將不同的想法聯繫在一起，這往往會產生一個全新的想法。 透過這樣做，我發現我對事情的記憶更加徹底。如果我不能，我有記錄並且可以將其調出！它使我能夠完成更多的工作文檔，而且我甚至在任何給定時間都有 4 或 5 篇部落格文章正在編寫中！遺漏的事情少了很多，而且我能夠完成更多的事情。 我最近開始了一份新工作，透過使用這種方法，人們已經來找我詢問我是如何做到這麼多的！秘密醬汁？全部寫下來並將其添加到系統中。 這對我來說改變了遊戲規則，我只需要鼓勵其他人也這樣做，因為我真的相信這可以使他們的生活受益匪淺！ 你用什麼方法來記住和分享你學到的東西？ ＃＃ 結論 在過去 8 年多的軟體開發人員和工程師工作中，我學到了很多。我經歷過好時光和壞時光，並一路走來學到了一些非常有用的人生課程。透過找到我喜歡工作的地方，在我的硬體上投入更多的時間和金錢，找到我「喜歡」使用的工具，設定目標，保持好奇心並專注於“為什麼”，定義專注工作的時間，專注於保持PR 較小，並寫下我能寫下的一切，我可以誠實地說，我的開發者體驗得到了極大的改善。 我非常希望這些技巧中至少一兩個也能改善您的體驗。 感謝您讓我與您分享這些技巧。下次見，駭客快樂！
原文出處：https://dev.to/firecampdev/10-typescript-developer-you-must-follow-to-become-typescript-expert-in-2024-5c19 > 跟隨 TypeScript 專家獲取寶貴的見解、最佳實踐和最新趨勢，以加速您掌握這種強大的程式語言的進程。 -------- 嘿開發社區， 我非常高興向您介紹 10 位優秀的 TypeScript 開發人員，他們為 TypeScript 社群做出了重大貢獻。 - 透過專注於他們的工作，您將獲得見解，從他們的經驗中學習，並順利成為 TypeScript 專家。 - 無論您是渴望學習基礎知識的初學者，還是尋求尖端TypeScript 知識的高級開發人員，這些開發人員都能滿足您的需求。讓我們深入探討並探索您應該關注的TypeScript 人才，以提高您的技能。 ---- #Typescript 專家 ##1. [JonnyBurger](https://github.com/JonnyBurger) ：技術專家：來自瑞士蘇黎世的 Jonny Burger - 他是 Remotion 的建立者，Remotion 是一個用於以編程方式建立影片的 React 框架。  **創作者：** [Remotion](https://github.com/remotion-dev/remotion) **推特**：https://twitter.com/remotion https://github.com/JonnyBurger -------- ##2. [Vitaly Rtishchev](https://github.com/rtivital) ：技術專家：來自俄羅斯莫斯科的 Vitaly - 他是 Mantine 的建立者，Mantine 是一個功能齊全的 React 元件庫。  **創作者：** [Mantine] (https://github.com/mantinedev/mantine) **推特**：https://twitter.com/rtivital ------ ##3. [Nishchit Dhanani](https://github.com/Nishchit14) ：技術專家：Nishchit 來自印度 - 他是 Firecamp、API 的 VS Code、開源 Postman/Insomnia Alternative 的建立者  **建立者：** [Firecamp] (https://github.com/firecamp-dev/firecamp) **推特**：https://twitter.com/Nishchit14 https://github.com/Nishchit14 -------- ##4。 [Irfan Maulana](https://github.com/mazipan) ：技術專家：Irfan，又名 mazipan，是一位來自印尼的經驗豐富的 Web 開發人員，在電子商務行業擁有 10 多年的經驗。大部分時間都在使用 javascript 或 typescript，使用各種框架來建立前端應用程式，例如 React、svelte 或 vue。現在在 GovTech Edu 工作。  **貢獻於：** [baca-quran.id] (https://github.com/mazipan/baca-quran.id),[phpid-learning](https://github.com/phpid-jakarta/phpid-learning） **推特**：https://twitter.com/Maz_Ipan https://github.com/mazipan ------------ ##5。 [亞歷克斯·伊格爾](https://github.com/alexeagle) ：技術專家：Alex 來自美國加利福尼亞州莫德斯托 - 他是 Aspect.build 的建立者，該軟體使 Bazel 更易於使用。  **創作者：** [Aspect Build] (https://github.com/aspect-build) **推特**：https://twitter.com/jakeherringbone https://github.com/alexeagle -------- ##6。 [德魯鮑爾斯](https://github.com/drwpow) ：技術專家：Drew，來自科羅拉多州丹佛市 - 他是 openapi-typescript 的建立者，根據 OpenAPI 3 規範生成 TypeScript 類型  **創作者：** [openapi-typescript] (https://github.com/drwpow/openapi-typescript) https://github.com/drwpow -------- ##7. [卡米爾‧邁斯利維茨](https://github.com/kamilmysliwiec) ：技術專家：Kamil 來自波蘭，@nestjs 的建立者。 @TrilonIO 共同創辦人。 @google 開發專家。  **創作者：** [Nestjs] (https://github.com/nestjs/nest) **推特**：https://twitter.com/kammysliwiec https://github.com/kamilmysliwiec -------- ##8. [詹姆斯亨利](https://github.com/JamesHenry) ：技術專家：James 是 typescript-eslint 的建立者，工程總監@nrwl。 TypeScript 的 5x MVP @microsoft。  **創作者：** [typescript-eslint] (https://github.com/typescript-eslint/typescript-eslint) **推特**：https://twitter.com/MrJamesHenry https://github.com/JamesHenry -------- ##9。 [科林·麥克唐納](https://github.com/colinhacks) : 技術專家：Colin 是工程師、開源者和不折不扣的 TypeScript 開發者。我建置並維護 Zod，這是一個具有靜態類型推斷功能的 TypeScript 模式驗證庫。  **創作者：** [Zod] (https://github.com/colinhacks/zod) **推特**：https://twitter.com/colinhacks https://github.com/colinhacks -------- ##10. [Basarat Ali Syed](https://github.com/basarat) ：技術專家：Basarat 來自澳洲墨爾本，他是 Typescript 書的創造者。  **創作者：** [Typescript-book] (https://github.com/basarat/typescript-book) **推特**：https://twitter.com/basarat https://github.com/basarat ------ 那麼今天的文章就到此結束了。我知道我一定缺少一些很棒的 TS 開發者，如果你認識任何人，請在下面評論他們的名字。我很想在我的下一個部落格中介紹它們！ 如果您對開源領域的 Typescript 貢獻感興趣，我很高興邀請您與我一起在 Firecamp 上工作。 #Firecamp🔥 **API 的 VS Code，開源 Postman/Insomnia 替代品**  如果你真的喜歡這個專案，請幫我盯著 repo！ 👇 https://github.com/firecamp-dev/firecamp 下週見！！
原文出處：https://dev.to/rchugunov/practical-tips-for-code-reviews-in-large-teams-25nb 改進程式碼審查流程對於旨在維持和提高效率和程式碼品質的開發團隊至關重要。越來越多的待處理拉取請求 (PR) 清單可能會令人不知所措，甚至令人士氣低落。透過完善審核流程，團隊可以確保 PR 的均衡分配，防止某些團隊成員被淹沒而其他成員閒置。爭取平等地花在公關上的時間有助於創造一個有凝聚力、和諧的團隊環境。此外，遵守旨在將審核時間控制在**一個工作日**的標準可保證快速反饋並促進動態、響應迅速的開發週期。最後，改進工作的本質是提高 PR 的質量，確保 PR 的規模最佳、準備充分且全面，從而簡化整個開發流程。 ## 如何衡量程式碼審查的有效性 為了衡量程式碼審查流程的有效性，必須專注於團隊績效而不是個人貢獻。關鍵指標包括拉取請求 (PR) 接受審查的持續時間以及 PR 處於審查階段的時間相對於其總程式碼行數的時間。監控保持開放的 PR 數量以及每個 PR 中的程式碼量可以進一步深入了解審核流程的效率。 - 衡量團隊的效率而不是某些人的效率 - 測量 PR 處於審核狀態的時間。 - 測量 PR 處於審核狀態的時間除以程式碼行數。 - 處於開放狀態的 PR 數量。 - PR 中的程式碼行 這可以透過引入收集 PR 資訊的工具來實現。如果你使用 Github，有一個 github 操作 [issue-metrics](https://github.com/github/issue-metrics) 可以測量 PR 在一定時間內處於審核狀態的平均時間。但是您可以使用 Github API 建立自己的操作，該操作將收集對您的專案重要的資訊。  ## 準備好你的 PR 始終首先向您的 PR 加入**詳細描述**。如果視覺表示有幫助，請考慮使用圖表。提出**審核計劃**也可以改變遊戲規則，引導審核者按照邏輯順序進行操作，確保任何更改都不會被忽視。 在您請求其他人深入研究您的程式碼之前，請先自己查看您的 PR 草案。透過這種自我審查，您可以發現並清除任何零散的評論或疏忽。 PR 中的評論應該澄清您的編碼決策，尤其是在可能出現混淆的情況下。例如，如果您在目前 PR 期間解決了一個不相關的錯誤，請提及它。這種先發制人的澄清可以讓審稿人省去很多麻煩。註釋充當更改的路線圖。透過引導審閱者查看特定文件或解釋某些修改背後的理由，您可以使他們的工作變得更簡單。額外的福利？您可能會在此註釋階段發現錯誤，甚至在審查開始之前修復它們。 如果您在 PR 中解決了多個問題，則可能需要將其分開。 **PR 應該簡潔且重點突出。** 經驗法則：如果更改涉及超過 5 個文件、花費了一天的時間來起草，或者需要大量的審查時間，則將其拆分。例如，一個 PR 可以為一項新功能佈置 API，而後續的 PR 可以展示實作。 ## 如何查看別人的 PR 與任何其他任務一樣重視程式碼審查。在日曆中劃出專門用於複習的常規時間段。 **快速回饋至關重要 - 開發人員等待的時間越長，上下文就會變得越模糊，從而使採納建議變得困難**。 程式碼審查不僅僅是為了發現錯誤。它們提供了一個熟悉團隊不斷發展的功能和編碼原則的機會。抓住這個學習和成長的機會。 您在審核期間的評論應該清晰且具有建設性。模糊的言論可能會導致混亂。始終致力於提供回饋，指導開發人員實現預期的解決方案。 雖然像 GitHub 這樣的平台非常適合程式碼託管和初步審查，但它們可能不是最適合擴展討論的平台。考慮將長時間的對話轉移到像 Slack 這樣的平台上，以進行更有活力的交流。 對於大量拉取請求，將分支拉入本機開發環境可能會很有幫助。 **IntelliJ Idea** 等工具可以提供更身臨其境的差異視圖。請記住使用“git merge -no-commit -no-ff”等命令來查看更改，就像您所做的那樣。  如果您發現程式碼的某些部分難以掌握，請隨時向作者詢問清楚。最好停下來理解一下，而不是根據假設提供回饋。 ## 審稿人分配演算法 有多種方法可以自動為 PR 指派審閱者。例如隨機或使用矩陣方法。 GitHub 提供了兩個策略 https://docs.github.com/en/organizations/organizing-members-into-teams/managing-code-review-settings-for-your-team#about-auto-assignment 另一種方法是製定自訂策略，其中每個團隊成員都有來自他的團隊的審核者列表，但也有來自其他團隊的兩名臨時審核者。 **考慮團隊規模和功能交付速度，選擇最適合您團隊的方法。** ## 程式碼審查的速度 雖然立即審查是理想的選擇，但並不總是可行。儘管如此，要遵守的黃金法則是**24 小時時間範圍**。目標是在一個工作天內回覆程式碼審查請求，即使這只是初步評估。這確保了程式碼不會停留在審查的邊緣，這可能會延遲後續的開發階段。 透過遵守此規則，如有必要，典型的變更清單 (CL) 可能會在一天內經歷多輪審核。如此快速的周轉不僅簡化了開發流程，而且還促進了審閱者和開發人員之間的動態討論，從而形成更加完善的程式碼庫。 ## 如何處理審稿意見 不要只依賴 Github 評論，而是使用 **Slack Github 連結** 來促進 PR 上的溝通。它為即時互動提供了一個動態平台，使澄清疑慮、尋求解釋並就建議的變更達成共識變得更加容易。 如果您打算稍後解決特定評論或問題，請留下 **TODO** 標籤以及任務編號。這可以確保您對待處理的操作有清晰的路線圖，並且這些任務在未來的開發階段不會被忽略。 如果某個特定的程式碼部分引發了長時間的爭論，那麼記錄所做的決定就至關重要。 **透過加入解釋選擇和理由的註釋，可以防止將來重複討論。**它可以作為參考，確保未來的開發人員或審閱者了解特定程式碼片段背後的上下文和推理。  ## 連結 Google指南：[程式碼審查開發者指南](https://google.github.io/eng-practices/review/) 思科研究：https://static1.smartbear.co/support/media/resources/cc/book/code-review-cisco-case-study.pdf Microsoft：[來自 Microsoft 的 30 個經過驗證的程式碼審查最佳實踐 - McKayla 博士](https://www.michaelagreiler.com/code-review-best-practices/#practicereviewers) 更多關於 CR 的閱讀：https://blog.palantir.com/code-review-best-practices-19e02780015f
原文出處：https://dev.to/avinashvagh/react-ecosystem-in-2024-418k 2024 年，React 將慶祝其成立 11 週年，值得期待 React 生態系統中令人興奮的發展。在本部落格中，我們將基於 2023 年發生的情況以及來年的預期，探討生態系統的各個面向。 ## 1. 路由 路由一直是Web開發的關鍵部分，在2023年，我們看到了各種各樣的路由解決方案。讓我們看看2024年會發生什麼： - **React Router：** React Router 仍然是 React 應用程式中處理路由的基本選擇。憑藉其廣泛的文檔和活躍的社區，它仍然是應用程式中聲明式路由的可靠選擇。 - **React Query：** Tanstack 的 React Query 在 2023 年流行的基礎上，旨在增強資料擷取和狀態管理。它簡化了 React 應用程式中管理、快取和同步資料的過程。 - **Next.js：** Next.js 是一個建立在 React 之上的框架，預計將保持其作為具有靈活路由選項的伺服器渲染 React 應用程式首選的地位。它的官方文件是 Next.js 應用程式中路由的寶貴資源。 2024 年，React 充滿活力的生態系統將繼續蓬勃發展，為開發人員提供豐富的工具和函式庫。請繼續關注 React 世界的更多更新和進步。 ## 2. 客戶端狀態管理 客戶端狀態管理是現代 Web 開發的一個重要方面，可以在前端應用程式中實現高效的資料處理。 Redux Toolkit 和 Zustand 是兩種流行的用戶端狀態管理解決方案。以下是兩者的簡要概述： ### 1. **Redux 工具包** - **網址：** [Redux 工具包](https://redux-toolkit.js.org/) Redux Toolkit 是一個建立在 Redux 之上的綜合狀態管理函式庫，Redux 是 React 應用程式中成熟的狀態管理函式庫。它提供了一組工具和最佳實踐，以可預測且高效的方式簡化狀態管理流程。 Redux Toolkit 的結構化方法（包括 actions、reducer 和 store）非常適合複雜的大型專案。它提倡採用集中式和聲明式的狀態管理方法。 ### 2. **條件** - **示範：** [狀態示範](https://state-demo.pmnd.rs/) Zustand 是一個輕量級且靈活的狀態管理庫，專為小型專案或喜歡更簡單解決方案的開發人員而設計。它簡化了狀態管理，無需複雜的設定和概念。 Zustand 以其簡單性和易用性而聞名，這使其成為小型應用程式和重視更輕量級方法的人的絕佳選擇。 在 Redux Toolkit 和 Zustand 之間進行選擇時，請考慮專案的複雜性以及您對 Redux 的熟悉程度。 Redux Toolkit 是大型、結構化應用程式的絕佳選擇，而 Zustand 則非常適合需要快速、簡單的狀態管理解決方案的小型專案。 ## 3.伺服器狀態管理 伺服器狀態管理是 Web 開發的一個重要方面，特別是對於跨客戶端和伺服器的應用程式。以下是兩個可以幫助您有效管理伺服器狀態的關鍵庫： ### 1. **TanStack 查詢** - **文件：** [TanStack 查詢](https://tanstack.com/query/latest) TanStack Query 是一個強大且靈活的狀態管理庫，用於處理應用程式中的伺服器狀態。它允許您輕鬆地從伺服器獲取、快取和更新資料。該程式庫提供自動快取、高效資料擷取以及自訂 API 端點的功能等功能。對於需要即時資料更新和高效資料同步的應用程式來說，它是管理伺服器狀態的絕佳選擇。 ### 2. **Redux 工具包 - RTK 查詢** - **文件：** [Redux 工具包 - RTK 查詢](https://redux-toolkit.js.org/rtk-query/overview) RTK Query 是 Redux Toolkit 生態系統的一部分，提供管理伺服器狀態的全面解決方案。它以可預測且高效的方式簡化了發出 API 請求、快取資料和更新狀態的過程。 RTK Query 與 Redux 無縫集成，對於使用 Redux 進行狀態管理的應用程式來說是一個絕佳的選擇。它提倡最佳實踐並提供結構化方法來處理伺服器狀態。 選擇伺服器狀態管理庫時，請考慮您的專案需求、資料擷取需求的複雜性以及您對 Redux 的熟悉程度（如果您選擇 RTK 查詢）。這兩個庫都提供了用於管理應用程式中的伺服器狀態的強大解決方案。 ## 4. 表單處理 表單處理是建立 Web 應用程式的關鍵部分，尤其是在 React 中。用於表單處理的兩個流行的程式庫是 Formik 和 React Hook Form。概述如下： ### 1. **甲酸** - **網址：** [Formik](https://formik.org/) Formik 是在 React 中建立表單最常用的函式庫。它提供了一組實用程式和元件，可以輕鬆管理表單狀態、驗證和提交。雖然它是一個流行的選擇，但截至最新消息，Formik 並未得到積極維護，這可能會影響其與未來 React 更新和不斷發展的最佳實踐的兼容性。使用 Formik 的唯一缺點是它不被維護。 Formik 文件/網站甚至不鼓勵在新專案中使用 Formik。 ### 2. **反應鉤子形式** - **網址：** [React Hook 表單](https://www.react-hook-form.com/) React Hook Form 是一個現代表單函式庫，它利用 React hooks 來有效地處理表單狀態和驗證。它得到積極維護，並提供輕量級且直觀的 API。 React Hook Form 以其效能和靈活性而聞名，使其成為在 React 應用程式中處理表單的絕佳選擇。 在 Formik 和 React Hook Form 之間進行選擇時，請考慮維護和專案的特定要求等因素。根據最新消息，React Hook Form 因其積極的開發和現代的表單處理方法而成為推薦選擇。 ## 5. 測試 測試是軟體開發過程的關鍵部分，有各種工具和程式庫可協助開發人員編寫有效的測試。以下是一些用於測試的資源和工具： ### 1. **ViTest** - **網址：** [ViTest](https://vitest.dev/) ViTest 是一個由 vite 支援的單元測試框架。它提供了一種為 React、Vue、Svelte 等應用程式編寫單元測試、元件測試和端到端測試的簡單方法。如果您使用 React，ViTest 可以透過全面的測試來幫助您確保程式碼的可靠性和品質。 ### 2. **React 測試函式庫** - **文件：** [React 測試庫](https://testing-library.com/docs/react-testing-library/intro/) React 測試庫是 React 應用程式的熱門測試庫。它專注於編寫模擬使用者互動的測試，幫助您確保元件從使用者的角度按照預期運行。該程式庫鼓勵測試 React 元件的最佳實踐。 ### 3. **劇作家** - **網址：** [劇作家](https://playwright.dev/) Playwright 是一個端對端測試框架，支援多種瀏覽器，包括 Chromium、Firefox 和 WebKit。它為瀏覽器自動化提供了統一的 API，並允許您編寫測試來驗證 Web 應用程式在不同瀏覽器上的功能。 Playwright 是確保跨瀏覽器相容性的強大工具。 這些資源和工具可以幫助您涵蓋測試的各個方面，從單元測試到端到端測試，具體取決於您的專案需求和您正在使用的技術。請務必進一步探索它們，以選擇最適合您要求的一種。 ## 6. 樣式 當談到 Web 開發中的樣式時，有幾種流行的工具和庫可供選擇。以下是三個值得注意的選項： ### 1. **Tailwind CSS** - **網址：** [Tailwind CSS](https://tailwindcss.com/) Tailwind CSS 是一個實用程式優先的 CSS 框架，它提供了一組預先建立的原子 CSS 類別來設計您的 Web 應用程式。它旨在透過在 HTML 中編寫實用程式類別來幫助您快速創建響應式且高度可自訂的設計。 Tailwind CSS 以其靈活性而聞名，對於想要實用程式驅動的樣式設計方法的開發人員來說是一個絕佳的選擇。 ### 2. **樣式元件** - **網址：** [樣式組件](https://styled-components.com/) Styled Components 是一個 CSS-in-JS 函式庫，用於設計 React 元件的樣式。它允許您透過使用標記模板文字定義樣式元件來直接在 JavaScript 檔案中編寫 CSS。這種方法使您能夠將樣式封裝在元件中，從而更輕鬆地管理和維護 CSS。樣式化組件在 React 生態系統中特別受歡迎。 ### 3. **情感** - **文檔：** [情緒](https://emotion.sh/docs/introduction) Emotion 是另一個 CSS-in-JS 函式庫，重點是效能和靈活性。它提供了多種方法來定義樣式並將其應用到 React 元件，包括字串和物件樣式。 Emotion 以其可預測性和適合使用 JavaScript 編寫不同 CSS 樣式而聞名。它提供了一種與框架無關的方法，使其適用於各種 JavaScript 框架。 這些工具中的每一個都有自己的優勢，並且適合不同的用例。 Tailwind CSS 擅長使用實用程式類別進行快速 UI 開發。 Styled Components 和 Emotion 是 React 應用程式中元件級樣式的理想選擇。您的選擇將取決於您的專案要求和個人喜好。 ## 7.UI元件庫 用於在 2023 年建立使用者介面的 UI 元件庫，並將在 2024 年繼續使用。 ### 1. **材質-UI** - **網址：** [Material-UI](https://mui.com/) Material-UI 是一個受歡迎且維護良好的 React UI 框架。它基於 Google 的 Material Design 指南，並提供廣泛的元件來創建現代且具有視覺吸引力的使用者介面。 ### 2. **曼汀** - **網址：** [Mantine](https://mantine.dev/) Mantine 是一個現代 React 元件庫，專注於提供高品質的元件和鉤子。它提供了各種 UI 元素和工具來簡化您的開發流程。 ### 3. **螞蟻設計** - **網址：** [Ant Design](https://ant.design/) Ant Design 是一個用於建立企業級 React 應用程式的綜合設計系統和元件庫。它以其豐富的組件和強調自然清晰的設計理念而聞名。 ### 4. **脈輪使用者介面** - **網址：** [Chakra UI](https://chakra-ui.com/) Chakra UI 是在 React 中建立可存取且高度可自訂的使用者介面的熱門選擇。它提供了一組可組合組件和一個樣式道具系統，用於靈活的樣式設定。 ### 5. **無頭 UI（Tailwind CSS 框架）** - **網址：** [無頭 UI](https://headlessui.com/) Headless UI 是一組完全可存取、無樣式的 UI 元件，旨在與 Tailwind CSS 無縫協作。它允許您建立可存取的介面，同時保留對樣式的完全控制。 ### 6. **DaisyUI（Tailwind CSS 框架）** - **網址：** [DaisyUI](https://daisyui.com/) DaisyUI 是 Tailwind CSS 的擴展，它帶來了額外的元件和實用程式來增強您的開發體驗。如果您已經在使用 Tailwind CSS，它會特別有用。 ### 7.**Shadcn UI（Tailwind CSS 框架）** - **網址：** [Shadcn UI](https://ui.shadcn.com/) Shadcn UI 是另一個基於 Tailwind CSS 的 UI 元件庫，它提供了一系列元件和實用程序，用於快速有效地建立 Web 應用程式。 這些程式庫提供了各種元件和工具，可協助您在 React 應用程式中建立響應靈敏且具有視覺吸引力的使用者介面。庫的選擇取決於您的項目的要求和您的個人喜好。 ## 8. 動畫 如果您對 React 動畫庫感興趣，兩個流行的選擇是： 1. **React Spring** - 您可以在 React Spring 的官方網站 [react-spring.dev](https://www.react-spring.dev/) 上找到有關 React Spring 的更多資訊和文件。 React Spring 是一個功能豐富的動畫庫，它利用基於實體的動畫在 React 中創建流暢的互動式動畫。 2. **Framer Motion** - 另一個出色的選擇是 Framer Motion，您可以在 [framer.com/motion](https://www.framer.com/motion/) 進一步探索它。 Framer Motion 因是專為 React 設計的功能豐富的動畫庫而聞名。它提供了靈活性，非常適合在 React 應用程式中創建流暢的動畫。 這兩個庫都有其優點，它們之間的選擇可能取決於您的特定項目要求和個人喜好。 React Spring 提供基於實體的動畫和豐富的功能集，而 Framer Motion 以其易用性和靈活性而聞名。最好對兩者進行探索，看看哪一個更符合您的動畫需求。 請隨意參考各自的網站以獲取詳細的文件和範例，以便做出明智的選擇。 ## 9. 資料視覺化 當涉及 React 中的資料視覺化時，有幾個函式庫可以幫助您建立互動式且資訊豐富的圖表和圖形。以下是三個流行的選項： 1. **Victory** - 您可以在 [formidable.com/open-source/victory/docs](https://formidable.com/open-source/victory/docs) 中瀏覽 Victory 的文檔 Victory 是一個強大的 React 資料視覺化函式庫，提供廣泛的圖表類型和自訂選項。它旨在輕鬆創建具有視覺吸引力的互動式資料視覺化。 2. **React Chartjs 2** - 造訪 [react-chartjs-2.js.org](https://react-chartjs-2.js.org/) 以了解更多資訊。 React Chartjs 2 是 Chart.js（一個流行的 JavaScript 圖表庫）的 React 包裝器。它提供了一種將 Chart.js 整合到 React 應用程式中的簡單方法，可讓您使用 Chart.js 的底層功能建立各種圖表和圖形。 3. **Recharts** - 有關Recharts的詳細信息，您可以參考[recharts.org/en-US/](https://recharts.org/en-US/)。 Recharts 是一個使用 React 建立的可組合圖表庫。它提供了一個簡單而靈活的 API 來創建各種類型的圖表，非常適合將資料視覺化添加到您的 React 專案中。 每個庫都有自己的一組功能和優點，因此選擇將取決於您的特定項目要求和個人喜好。您可以存取他們各自的文件以了解更多資訊並開始使用 React 中的資料視覺化。 ## 10. 表 如果您正在尋找有關 React 中表格的信息，可以在 [tanstack.com/table/v8](https://tanstack.com/table/v8) 上瀏覽版本 8 的 TanStack Table 文件。 TanStack Table 是一個無頭 UI 庫，可讓您在 TS/JS、React、Vue、Solid 和 Svelte 等各種框架中建立強大的表格和資料網格，同時保留對標記和樣式的控制。該文件將為您提供有關如何使用 TanStack Table 和配置表的詳細信息，包括選項和 API 屬性。 無論您使用 TypeScript 還是 JavaScript 以及使用受支援的框架之一，TanStack Table v8 都提供了一種靈活的解決方案，用於在 Web 應用程式中建立表格和資料網格。該文件將引導您完成整個過程，並幫助您充分利用該庫來滿足您的特定需求。 ## 11. 國際化（i18n） 當涉及 React 應用程式中的國際化 (i18n) 時，有多個程式庫和工具可協助您管理翻譯和在地化。 React 中 i18n 的兩個突出選項是： 1. **i18next** - 您可以在 [react.i18next.com](https://react.i18next.com/) 找到使用 i18next 的文件和資源。 i18next 是一個流行的 JavaScript 國際化框架，包括 React。它提供了處理翻譯、格式化等的全面解決方案。 2. **React-Intl (Format.js)** - React-Intl 的文檔是 Format.js 專案的一部分，可以在 [formatjs.io/docs/react-intl](https: //formatjs.io/ docs/react-intl）。 React-Intl 是一個函式庫，提供用於在 React 應用程式中格式化和處理國際化文字的工具。 這兩個函式庫都有活躍的社群、豐富的文檔，並且在 React 生態系統中廣泛使用。您可以探索這些資源，以確定哪一個最適合您的 React 應用程式國際化需求。 ## 12. 開發工具 DevTools 對於偵錯和改進 Web 應用程式的開發工作流程至關重要。以下是一些流行的 React 開發工具和相關函式庫： 1. **React 開發者工具** - 該工具可作為 Chrome 擴充功能使用。它允許您檢查 React 元件層次結構、查看元件的狀態和 props，甚至更改元件的狀態以進行測試。您可以從 [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 安裝它。 2. **Redux DevTools** - Redux DevTools 是另一個 Chrome 擴展，可以增強 Redux 開發工作流程。它提供了對 Redux 儲存的深入了解，讓您可以檢查操作和狀態變更、倒回和重播操作等。您可以從 [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) 安裝它。 3. **Testing Playground** - Test Playground 是一個 Chrome 擴展，可以簡化 React 元件的測試。它提供了一個用於試驗組件及其道具的視覺環境。您可以在 [Chrome 線上應用程式商店](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano) 上找到它。 4. **React Hook Form DevTools** - 對於使用 React Hook Form 的用戶，可以使用 DevTools 來協助偵錯表單行為。您可以在 [React Hook Form 網站](https://www.react-hook-form.com/dev-tools/) 上存取它們。 5. **TanStack Query DevTools** - TanStack Query 是 React 的資料擷取庫，它提供用於偵錯和檢查查詢和突變的 DevTools。您可以參考[官方文件](https://tanstack.com/query/v4/docs/react/devtools)以了解更多資訊。 這些開發工具可協助開發人員簡化開發和偵錯流程，從而更輕鬆地建置和維護 Web 應用程式。 ## 13. 文檔 文件對於任何軟體專案都至關重要。以下是用於建立文件的兩種流行工具： 1. **Docusaurus** - Docusaurus 是一種廣泛採用的用於建立文件網站的工具。它是一個開源框架，為創建和維護文件提供了乾淨且用戶友好的介面。 Docusaurus 具有高度可自訂性，許多專案和組織都使用它來建立文件網站。您可以在 Docusaurus 的[官方網站](https://docusaurus.io/)上了解更多並開始使用 Docusaurus。 2. **Nextra** - Nextra 是建立文件網站的另一種選擇。雖然 Nextra 可能不像 Docusaurus 那樣出名，但它提供了一種現代且簡約的方法來建立文件。它的設計是輕量級且用戶友好的，對於那些喜歡簡單乾淨的文檔風格的人來說是一個不錯的選擇。您可以在 Nextra 的[官方網站](https://nextra.site/) 上探索有關 Nextra 的更多資訊。 Docusaurus 和 Nextra 都有各自的優勢，它們之間的選擇取決於您的特定需求和偏好。您可以訪問他們各自的網站以了解更多資訊、訪問文件並確定哪一個最適合您的專案。 ## 14. 元件開發環境 元件開發環境 (Dev Env) 對於有效建置和測試 UI 元件至關重要。用於為 UI 元件創建開發環境的廣泛使用的工具之一是 [Storybook](https://storybook.js.org/)。 Storybook 是業界標準的元件瀏覽器，可讓開發人員獨立開發 UI 元件。當處理設計系統或元件庫時，它特別有價值。以下是 Storybook 如何協助創建 UI 元件的開發環境： 1. **目錄 UI 元件**：Storybook 提供了用於編目和顯示 UI 元件的專用環境。開發人員可以單獨查看每個組件的外觀和行為。 2. **將元件變體儲存為故事**：在 Storybook 中，開發人員可以為每個元件建立「故事」。這些故事代表組件的不同變體或用例。這是記錄和展示組件行為的絕佳方式。 3. **開發人員體驗工具**：Storybook 提供了一系列開發人員體驗工具，包括熱模組重新加載，以簡化組件開發流程。 透過使用 Storybook，您可以有效率地開發、測試和記錄 UI 元件。它在設計系統時特別有用，因為它允許您專注於單個組件及其互動。您可以在 Storybook 的[官方網站](https://storybook.js.org/) 上了解更多並開始使用。 它是一種多功能工具，可以根據專案的特定需求進行定制，使其成為組件開發環境的寶貴資產。 ## 15. 類型檢查 TypeScript 是 Microsoft 開發的一種程式語言，透過新增靜態類型來擴充 JavaScript。它提供全面的類型檢查和強大的類型系統，以捕獲開發過程中的錯誤並提高程式碼品質。以下是 TypeScript 中類型檢查的一些關鍵方面： 1. **靜態型別系統**：TypeScript 引進了靜態型別系統，這表示在編譯時檢查類型。這有助於在執行程式碼之前識別與類型相關的錯誤。 2. **型別註解**：開發者可以使用型別註解來指定變數、函數參數和傳回值的型別。這提供了清晰度並確保變數的使用一致。 3. **推斷**：TypeScript 可以根據指派給變數的值推斷類型。這減少了對顯式類型註解的需求並提高了程式碼簡潔性。 4. **類型聲明**：TypeScript支援自訂類型的聲明，例如介面和枚舉，以定義資料結構的形狀並增強程式碼的可維護性。 5. **類型相容性**：TypeScript 有一個檢查類型相容性的系統，這確保你不能將不相容的類型指派給變數。這有助於防止常見的運行時錯誤。 6. **對 JavaScript 文件進行類型檢查**：TypeScript 還可以檢查 JavaScript 文件，讓您可以逐步將 TypeScript 引入現有的 JavaScript 專案中。 透過將 TypeScript 合併到您的開發工作流程中，您可以從這些類型檢查功能中受益，從而儘早發現錯誤、增強程式碼可維護性並提高程式碼的整體品質。您可以在[官方 TypeScript 網站](https://www.typescriptlang.org/) 上了解有關 TypeScript 及其類型檢查功能的更多資訊。 ## 16. 行動應用程式 如果您想要開發行動應用程序，特別是 Android 和 iOS 的行動應用程序，React Native 是一個值得考慮的有價值的框架。 React Native 是一個開源框架，可讓您使用 JavaScript 和 React 建立行動應用程式。這就是 React Native 成為行動應用程式開發的熱門選擇的原因： 1. **跨平台開發**：React Native 使您能夠使用單一程式碼庫開發適用於 Android 和 iOS 的應用程式。這種方法可以顯著減少開發時間和工作量。 2. **可重複使用元件**：您可以建立跨平台工作的可重複使用 UI 元件，幫助您在應用程式中保持一致的外觀和感覺。 3. **熱重載**：React Native 支援熱重載，這意味著您可以立即看到程式碼變更的結果，而無需重新編譯整個應用程式。這加快了開發速度。 4. **大型社區**：React Native 擁有龐大且活躍的社區，這意味著您可以找到豐富的資源、庫以及常見問題的解決方案。 5. **本機效能**：React Native 應用程式具有接近本機的效能，因為它們使用本機元件進行渲染。這確保了流暢的用戶體驗。 6. **成本效益**：透過在 Android 和 iOS 之間共用程式碼庫，您可以降低開發成本。 要開始使用 React Native，您可以造訪官方網站 [React Native](https://reactnative.dev/) 以取得全面的文件、教學和資源。無論您是初學者還是經驗豐富的開發人員，React Native 都是行動應用程式開發的強大選擇。 ## 17. 為 React 開發人員提供的很棒的函式庫 很高興看到您對 React 開發人員的優秀庫感興趣。以下是一些非常有用的程式庫，可用於 React 開發中的各種功能： ### 1. **用於拖放功能的 DND 套件** - 網址：[免打擾套件](https://dndkit.com/) DND Kit 是一個強大的庫，用於為 React 應用程式添加拖放功能。它提供了一種簡單且可自訂的方法來實現拖放功能，以便在使用者介面中重新排序、重新排列或組織元素。 ### 2. **React Dropzone 用於檔案上傳** - 網址：[React Dropzone](https://react-dropzone.js.org/) React Dropzone 是一個流行的程式庫，用於在 React 應用程式中處理檔案上傳。它提供了一個用戶友好且高度可自訂的 dropzone 元件，簡化了上傳文件的過程，使其成為任何需要文件上傳的項目的有價值的補充。 ### 3. **Firebase 用於身份驗證** - 網址：[Firebase](https://firebase.google.com/) Firebase 由 Google 開發，是一個用於建立 Web 和行動應用程式的綜合平台。它提供廣泛的服務，包括用戶身份驗證。透過 Firebase 驗證，您可以輕鬆地將安全的使用者註冊和登入功能新增到您的 React 應用程式中。 ### 4. **Supabase 用於身份驗證** - 網址：[Supabase](https://supabase.com/) Supabase 是 Firebase 的開源替代品，提供一套用於建立應用程式的服務，包括身份驗證。它提供了可以無縫整合到您的 React 專案中的用戶身份驗證功能。 這些程式庫涵蓋了 React 開發的基本面，包括拖放功能、檔案上傳和使用者身份驗證。根據您的專案要求，您可以利用這些程式庫來增強您的 React 應用程式。 **免責聲明：**“本文是在人工智慧的幫助下創建的” --- 喜歡這個部落格嗎？ **[在 X 上關注我](https://twitter.com/avinashvagh)** 我非常活躍，在 Dev.to 上關注我，不錯過更新。 **聯絡人** — [[email protected]](mailto:[email protected]) 與我一起工作。 --- 訂閱**[遠端檔案通訊](https://remoteprofile.beehiiv.com/)**，隨時了解遠距工作趨勢和工作機會。 {% 嵌入 https://x.com/remoteprofile/status/1698215946463359023?s=20 %} 加入 1K+ 遠端求職者，他們正在世界任何地方在美國尋找遠端工作，所有工作機會面向全球受眾（在任何地方工作），**[立即訂閱](https://remoteprofile.beehiiv.com/訂閱）* * 每日在您的收件匣中獲取機會！
原文出處：https://dev.to/nikl/json-is-slower-here-are-its-4-faster-alternatives-2g30 --- ## 介紹 在快節奏的 Web 開發世界中，速度和反應能力是不容妥協的。您的用戶希望即時存取資訊、快速互動和無縫體驗。 JSON 是 JavaScript 物件表示法的縮寫，一直是 Web 開發中資料交換的忠實夥伴，但它會減慢您的應用程式速度嗎？讓我們深入探討 JSON 的世界，探索其潛在瓶頸，並發現更快的替代方案和優化技術，讓您的應用程式像獵豹一樣衝刺。 --- 您可能還想查看本教學：[使用 Golang 建立即時通知系統 - 逐步通知系統設計指南](https://dev.to/nikl/using-golang-to-build -即時通知系統逐步通知系統設計指南-50l7) --- ### 什麼是 JSON 以及為什麼您應該關心？ 在開始 JSON 優化之旅之前，讓我們先了解 JSON 是什麼以及它為何重要。 JSON 是將應用程式中的資料黏合在一起的黏合劑。它是伺服器和客戶端之間通訊資料的語言，也是資料儲存在資料庫和設定檔中的格式。從本質上講，JSON 在現代 Web 開發中發揮關鍵作用。 了解 JSON 及其細微差別不僅是任何 Web 開發人員的基本技能，而且對於優化應用程式也至關重要。隨著我們深入研究此博客，您將發現為什麼 JSON 在性能方面可以成為一把雙刃劍，以及這些知識如何對您的開發之旅產生重大影響。 ## JSON 的受歡迎程度以及人們使用它的原因 JSON 在 Web 開發領域的受歡迎程度怎麼強調都不為過。由於以下幾個令人信服的原因，它已成為資料交換的事實上的標準： 1. **人類可讀格式**：JSON 使用簡單的、基於文字的結構，開發人員和非開發人員都可以輕鬆閱讀和理解。這種人類可讀的格式增強了協作並簡化了調試。 ``` // Inefficient { "customer_name_with_spaces": "John Doe" } // Efficient { "customerName": "John Doe" } ``` 2. **與語言無關**：JSON 不依賴任何特定的程式語言。它是一種通用資料格式，幾乎可以由所有現代程式語言解析和生成，因此具有高度通用性。 3. **資料結構一致性**：JSON 使用鍵值對、陣列和巢狀物件強制資料結構一致。這種一致性使其在各種程式設計場景中都可預測且易於使用。 ``` // Inefficient { "order": { "items": { "item1": "Product A", "item2": "Product B" } } } // Efficient { "orderItems": ["Product A", "Product B"] } ``` 4. **瀏覽器支援**：Web 瀏覽器原生支援 JSON，允許 Web 應用程式與伺服器無縫通訊。這種原生支援對其在 Web 開發中的採用做出了重大貢獻。 5. **JSON API**：許多Web服務和API預設提供JSON格式的資料。這進一步鞏固了 JSON 作為 Web 開發中資料交換首選的角色。 6. **JSON Schema**：開發人員可以使用 JSON Schema 來定義和驗證 JSON 資料的結構，為其應用程式添加額外的清晰度和可靠性。 有鑑於這些優勢，全球開發人員依賴 JSON 來滿足資料交換需求也就不足為奇了。然而，當我們更深入地探索部落格時，我們將發現與 JSON 相關的潛在性能挑戰以及如何有效解決這些挑戰。 ## 對速度的極品 在當今快節奏的數位環境中，應用程式速度和回應能力是不容談判的。用戶期望跨網路和行動應用程式即時存取資訊、快速互動以及無縫體驗。這種對速度的需求是由以下幾個因素所驅動的： ### 用戶期望 使用者已經習慣了數位互動中閃電般的快速回應。他們不想等待網頁加載或應用程式回應。即使是幾秒鐘的延遲也會導致沮喪和放棄。 ### 競爭優勢 速度可以成為顯著的競爭優勢。快速回應的應用程式往往比反應遲緩的應用程式更有效地吸引和留住用戶。 ### 搜尋引擎排名 像 Google 這樣的搜尋引擎將頁面速度視為排名因素。載入速度更快的網站往往在搜尋結果中排名更高，從而提高可見度和流量。 ### 轉換率 尤其是電子商務網站，他們敏銳地意識到速度對轉換率的影響。更快的網站可以帶來更高的轉換率，從而增加收入。 ### 移動效能 隨著行動裝置的普及，對速度的需求變得更加重要。行動用戶的頻寬和處理能力通常有限，因此需要快速的應用程式效能。 ### JSON 會減慢我們的應用程式速度嗎？ 現在，讓我們解決核心問題：JSON 是否會減慢我們的應用程式速度？ 如同前面提到的，JSON 是一種非常流行的資料交換格式。它靈活、易於使用且廣受支援。然而，這種廣泛的採用並不能使其免受性能挑戰。 在某些情況下，JSON 可能是降低應用程式速度的罪魁禍首。解析 JSON 資料的過程，尤其是在處理大型或複雜結構時，可能會消耗寶貴的毫秒時間。此外，低效率的序列化和反序列化可能會影響應用程式的整體效能。 ### 解析開銷 當 JSON 資料到達您的應用程式時，它必須經過解析過程才能將其轉換為可用的資料結構。解析可能相對較慢，尤其是在處理大量或深層巢狀的 JSON 資料時。 ``` // JavaScript example using JSON.parse for parsing const jsonData = '{"key": "value"}'; const parsedData = JSON.parse(jsonData); ``` ### 序列化與反序列化 JSON 要求資料從用戶端傳送到伺服器時進行序列化（將物件編碼為字串），並在接收時進行反序列化（將字串轉換回可用物件）。這些步驟可能會帶來開銷並影響應用程式的整體速度。 ``` // Node.js example using JSON.stringify for serialization const data = { key: 'value' }; const jsonString = JSON.stringify(data); ``` ### 字串操作 JSON 是基於文字的，嚴重依賴字串操作來進行連接和解析等操作。與處理二進位資料相比，字串處理可能會慢一些。 ### 缺乏資料類型 JSON 具有一組有限的資料類型（例如字串、數字、布林值）。複雜的資料結構可能需要效率較低的表示，導致記憶體使用量增加和處理速度變慢。 ``` { "quantity": 1.0 } ``` ### 冗長 JSON 的人類可讀設計可能會導致冗長。冗餘金鑰和重複結構會增加有效負載大小，導致資料傳輸時間更長。 ``` // Inefficient { "product1": { "name": "Product A", "price": 10 }, "product2": { "name": "Product A", "price": 10 } } ``` ### 沒有二進位支持 JSON 缺乏對二進位資料的本機支援。在處理二進位資料時，開發人員通常需要將其編碼和解碼為文本，這可能會降低效率。 ### 深度嵌套 在某些場景下，JSON資料可能會深度嵌套，需要遞歸解析和遍歷。這種計算複雜性可能會減慢您的應用程式的速度，尤其是在沒有最佳化的情況下。 --- > **與此類似，我與其他熱愛開源的開發人員一起在 Slack 上運行一個以開發人員為中心的社群。我們討論這些類型的主題、實現、整合、一些真相炸彈、奇怪的聊天、虛擬會議、為開源做出貢獻以及一切有助於開發人員保持理智的事情；）畢竟，太多的知識也可能是危險的。* * > **我邀請您加入我們的免費社區（_沒有廣告，我保證，並且我打算保持這種方式_），參與討論，並分享您的經驗和專業知識。您可以填寫此表格，Slack 邀請將在幾天後收到您的電子郵件。我們有來自一些偉大公司（Atlassian、Gong、Scaler）的優秀人員，您一定不想錯過與他們的互動。 [邀請表](https://forms.gle/VzA3ST8tCFrxt39U9)** 讓我們繼續... --- ## JSON 的替代方案 雖然 JSON 是一種通用的資料交換格式，但其在某些場景下的效能限制導致人們探索更快的替代方案。讓我們深入研究其中一些替代方案，並了解您何時以及為何選擇它們： ### 協定緩衝區 Protocol Buffers，也稱為 protobuf，是 Google 開發的二元序列化格式。它在速度和效率方面表現出色。這就是您可能考慮使用 Protocol Buffer 的原因： 1. **二進位編碼**：Protocol Buffers 使用二進位編碼，與 JSON 基於文字的編碼相比，它更緊湊，編碼和解碼速度更快。 2. **高效的資料結構**：Protocol Buffers 可讓您透過精確的類型定義高效的資料結構，從而實現更快的序列化和反序列化。 3. **架構演化**：Protocol Buffers 支援架構演化，這表示您可以在不破壞向後相容性的情況下更新資料結構。 ``` syntax = "proto3"; message Person { string name = 1; int32 age = 2; } ``` ### 訊息包 MessagePack 是另一種專為提高效率和速度而設計的二元序列化格式。以下是您可能考慮使用 MessagePack 的原因： 1. **緊湊性**：MessagePack 產生高度緊湊的資料表示形式，從而減少資料傳輸大小。 2. **二進位資料**：MessagePack 提供了對二進位資料的原生支持，非常適合涉及二進位資訊的場景。 3. **速度**：MessagePack 的二進位性質允許快速編碼和解碼。 ``` // JavaScript example using MessagePack for serialization const msgpack = require('msgpack-lite'); const data = { key: 'value' }; const packedData = msgpack.encode(data); ``` ### BSON（二進位 JSON） BSON，通常發音為“bee-son”或“bi-son”，是一種二進位序列化格式，主要用於 MongoDB 等資料庫。以下是您可能考慮使用 BSON 的原因： 1. **類似 JSON 的結構**：BSON 維護了類似 JSON 的結構，並添加了二進位資料類型，在效率和可讀性之間提供了平衡。 2. **二進位資料支援**：BSON 提供對二進位資料類型的原生支持，這有利於處理映像或多媒體等資料。 3. **資料庫集成**：BSON 與 MongoDB 等資料庫無縫集成，使其成為此類環境的自然選擇。 ``` { "_id": ObjectId("60c06fe9479e1a1280e6bfa7"), "name": "John Doe", "age": 30 } ``` ### 歐元 Avro 是在 Apache Hadoop 專案中開發的資料序列化框架。它強調模式相容性和效能。以下是您可能考慮使用 Avro 的原因： 1. **架構相容性**：Avro 優先考慮架構相容性，讓您在不破壞相容性的情況下發展資料結構。 2. **二進位資料**：Avro 使用緊湊的二進位編碼格式進行資料傳輸，從而產生更小的有效負載。 3. **語言中立**：Avro 支援多種程式語言，使其適合不同的應用程式生態系統。 ``` { "type": "record", "name": "Person", "fields": [ { "name": "name", "type": "string" }, { "name": "age", "type": "int" } ] } ``` JSON 及其替代方案之間的選擇取決於您的特定用例和要求。如果架構相容性至關重要，Avro 可能是最佳選擇。如果您需要緊湊性和效率，MessagePack 和 Protocol Buffers 是強有力的競爭者。在處理二進位資料時，MessagePack 和 BSON 可以滿足您的需求。每種格式都有其優點和缺點，因此請選擇適合您專案需求的格式。 ### 最佳化 JSON 效能 但是，如果您決心使用 JSON，儘管它有潛在的速度障礙，該怎麼辦？如何讓 JSON 運作得更快、更有效率？好消息是，有一些實用的策略和最佳化可以幫助您實現這一目標。讓我們透過程式碼範例和最佳實踐來探索這些策略。 **1.最小化資料大小** A。 **使用簡短的描述性鍵**：選擇簡潔但有意義的鍵名稱以減少 JSON 物件的大小。 ``` // Inefficient { "customer_name_with_spaces": "John Doe" } // Efficient { "customerName": "John Doe" } ``` b. **盡可能縮寫**：在不犧牲清晰度的情況下，考慮使用鍵或值的縮寫。 ``` // Inefficient { "transaction_type": "purchase" } // Efficient { "txnType": "purchase" } ``` **2.明智地使用數組** A。 **最小化巢狀**：避免深度巢狀數組，因為它們會增加解析和遍歷 JSON 的複雜度。 ``` // Inefficient { "order": { "items": { "item1": "Product A", "item2": "Product B" } } } // Efficient { "orderItems": ["Product A", "Product B"] } ``` **3.優化數位表示** A。 **盡可能使用整數**：如果一個值可以表示為整數，請使用它而不是浮點數。 ``` // Inefficient { "quantity": 1.0 } // Efficient { "quantity": 1 } ``` **4.刪除冗餘** A。 **避免重複資料**：透過引用共享值來消除冗餘資料。 ``` // Inefficient { "product1": { "name": "Product A", "price": 10 }, "product2": { "name": "Product A", "price": 10 } } // Efficient { "products": [ { "name": "Product A", "price": 10 }, { "name": "Product B", "price": 15 } ] } ``` **5.使用壓縮** A。 **套用壓縮演算法**：如果適用，請使用 Gzip 或 Brotli 等壓縮演算法來減少傳輸過程中 JSON 有效負載的大小。 ``` // Node.js example using zlib for Gzip compression const zlib = require('zlib'); const jsonData = { // Your JSON data here }; zlib.gzip(JSON.stringify(jsonData), (err, compressedData) => { if (!err) { // Send compressedData over the network } }); ``` 根據塞繆爾的評論，我添加了一個編輯。 {% devcomment 2adn4 %} ``` As Samuel rightly observes, the adoption of HTTP/2 has brought significant advancements, particularly in optimizing data interchange formats like JSON. HTTP/2's multiplexing capabilities efficiently manage multiple requests over a single connection, enhancing responsiveness and reducing overhead. In practical terms, a comprehensive optimization strategy may involve both embracing HTTP/2 and utilizing compression techniques per your use-case, recognizing that each approach addresses specific aspects of network efficiency and performance. HTTP/2 excels in network-level optimization, while compression strategies enhance application-level efficiency, and the synergy between them can lead to substantial gains in data handling speed and resource utilization. ``` **6。使用伺服器端快取** A。 **快取 JSON 回應**：實作伺服器端快取以有效儲存和提供 JSON 回應，減少重複資料處理的需要。 **7.設定檔和優化** A。 **分析效能**：使用分析工具來識別 JSON 處理程式碼中的瓶頸，然後最佳化這些部分。 請記住，您實施的具體優化應符合應用程式的要求和約束。 ### 實際最佳化：在實作中加速 JSON 現在您已經探索了優化 JSON 的理論方面，現在是時候深入研究遇到 JSON 效能瓶頸並巧妙克服它們的實際應用程式和專案了。這些範例提供了有關用於提高速度和回應能力的策略的寶貴見解，同時仍利用 JSON 的多功能性。 **1. LinkedIn 的協定緩衝區整合** *挑戰：LinkedIn 與 JSON 冗長和網路頻寬使用的鬥爭* 全球最大的職業社交平台LinkedIn面臨嚴峻的挑戰。他們對 JSON 進行微服務通訊的依賴導致了冗長和網路頻寬使用量的增加，最終導致更高的延遲。在每一毫秒都至關重要的數位世界中，這是一個需要解決方案的挑戰。 **解決方案：協定緩衝區的力量** LinkedIn 轉向了 [Protocol Buffers](https://engineering.linkedin.com/blog/2023/linkedin-integrates-protocol-buffers-with-rest-li-for-improved-m)，通常稱為 protobuf，由Google開發的二進位序列化格式。 Protocol Buffers 的主要優勢在於其效率、緊湊性和速度，使其在序列化和反序列化方面比 JSON 快得多。 **影響：延遲減少高達 60%** Protocol Buffers 的採用顯著降低了延遲，報告顯示延遲可提高高達 60%。此次優化顯著提高了 LinkedIn 服務的速度和回應能力，為全球數百萬用戶提供了更流暢的體驗。 **2. Uber 的 H3 地理索引** *挑戰：Uber 在地理空間資料方面的 JSON 困境* 叫車巨頭優步的營運嚴重依賴地理空間數據。 JSON 是表示地理空間資料的預設選擇，但解析大型資料集的 JSON 被證明是一個瓶頸，減慢了演算法的速度。 **解決方案：引入 H3 地理索引** Uber 推出了 [H3 Geo-Index](https://www.uber.com/en-IN/blog/h3/)，這是一種用於地理空間資料的高效能六邊形網格系統。透過從 JSON 轉向這種創新解決方案，他們成功地大幅減少了 JSON 解析開銷。 **影響：加速地理空間操作** 這種優化大大加速了地理空間操作，提高了 Uber 乘車服務和地圖系統的效率。使用者體驗到更快的回應時間和更可靠的服務。 **3. Slack 的訊息格式最佳化** *挑戰：Slack 與即時訊息渲染的戰鬥* Slack 是團隊的訊息平台，需要在即時聊天中傳輸和呈現大量 JSON 格式的訊息。然而，這導致了效能瓶頸和訊息渲染緩慢。 **解決方案：簡化 JSON 結構** Slack 優化了 JSON 結構以減少不必要的資料。他們開始在每個訊息中只包含基本訊息，從而減少有效負載的大小。 **影響：更快的訊息渲染和增強的聊天效能** 此優化顯著提高了訊息渲染速度。 Slack 用戶享受到更靈敏、更有效率的聊天體驗，尤其是在繁忙的群組聊天中。 **4. Auth0 的協定緩衝區實作** *挑戰：Auth0的身份驗證和授權資料效能* Auth0 是一個著名的身份和存取管理平台，在處理身份驗證和授權資料時面臨 JSON 的效能挑戰。這些數據需要在不影響安全性的情況下有效處理。 **解決方案：採用協定緩衝區進行資料序列化** [Auth0 也轉向Protocol Buffers](https://auth0.com/blog/beating-json-performance-with-protobuf/#How-Do-We-Use-Protobuf)，利用其高效的資料序列化和反序列化功能。此交換器顯著提高了資料處理速度，使身份驗證過程更快並增強了整體效能。 **影響：加速身份驗證和授權** Protocol Buffers 的採用增強了身分驗證和授權流程，確保 Auth0 的服務提供一流的效能，同時保持最高的安全標準。 這些現實世界的例子強調了優化在克服 JSON 相關的速度下降方面的力量。這些案例中採用的策略證明了 JSON 和替代格式在滿足現代數位環境的需求方面的適應性和多功能性。 請繼續關注結論部分，我們總結了關鍵要點，並為您提供了在您自己的專案中優化 JSON 效能的路線圖。 ＃＃ 結束語 在開發領域，JSON 是一種多功能且不可或缺的資料交換工具。其人類可讀的結構和跨語言適應性使其成為當代應用程式的基石。然而，正如我們在本指南中的探索所揭示的那樣，JSON 的普遍使用並不能使其免受性能挑戰。 我們在增強 JSON 效能的過程中獲得的重要收穫是顯而易見的： - 1. **效能至關重要：** 速度和反應能力在當今的數位環境中至關重要。用戶要求應用程式以閃電般的速度運行，即使是輕微的延遲也會導致不滿意並錯失機會。 - 2. **大小很重要：** 資料有效負載的大小直接影響網路頻寬使用和回應時間。減少資料大小通常是優化 JSON 效能的第一步。 - 3. **探索替代格式：** 當效率和速度至關重要時，探索替代資料序列化格式（如 Protocol Buffers、MessagePack、BSON 或 Avro）是有益的。 - 4. **真實世界範例：** 從組織有效解決 JSON 相關減速問題的真實實例中學習，表明最佳化工作可以顯著提高應用程式效能。 當您繼續開發和增強 Web 應用程式時，請務必牢記 JSON 對效能的影響。精心設計資料結構，選擇有意義的鍵名稱，並在情況需要時開放探索替代序列化格式。透過這樣做，您可以確保您的應用程式在速度和效率方面不僅滿足而且超越用戶的期望。 在不斷發展的 Web 開發環境中，優化 JSON 效能成為一項寶貴的資產，使您的專案與眾不同，並確保您的應用程式在即時數位體驗時代蓬勃發展。 --- > **與此類似，我與其他熱愛開源的開發人員一起在 Slack 上運行一個以開發人員為中心的社群。我們討論這些類型的主題、實現、整合、一些真相炸彈、奇怪的聊天、虛擬會議、為開源做出貢獻以及一切有助於開發人員保持理智的事情；）畢竟，太多的知識也可能是危險的。* * > **我邀請您加入我們的免費社區（_沒有廣告，我保證，並且我打算保持這種方式_），參與討論，並分享您的經驗和專業知識。您可以填寫此表格，Slack 邀請將在幾天後收到您的電子郵件。我們有來自一些偉大公司（Atlassian、Gong、Scaler）的優秀人員，您一定不想錯過與他們的互動。 [邀請表](https://forms.gle/VzA3ST8tCFrxt39U9)** > _如果您能與您的開發朋友（他們是奉獻者）分享該表格，我將不勝感激。_
原文出處：https://dev.to/lundjrl/vscode-extensions-to-magically-accelerate-your-productivity-2lad 閱讀本文的大多數人可能每天都會使用 VSCode 擴充功能。無論是檢查程式碼、顯示建議、類型推理還是讓您發笑的東西，它們都會影響您的工作流程並幫助您建立產品。 以下是我每天使用的擴充功能清單。可以肯定地說，如果沒有他們，我會完全迷失方向，而且我對門票的估計也會膨脹。 我希望這些對您的幫助就像對我的幫助一樣！ --- ## Auto Rename Tag 此清單的開頭是自動重命名標籤擴充。如果您使用大量 HTML，此擴充功能非常有用。它的一般要點是它將您正在編輯的標籤的結束標籤格式化為相同的名稱，這樣您就不必這樣做。當我處理具有包含 100 多個其他標籤的標籤的「*.html」檔案的舊網站時，這為我節省了大量時間。 ID：formulahendry.auto-rename-tag VS 市場連結：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag --- ## Code Spell Checker 如果您與國際團隊合作或您想要記錄專案中的單字或縮寫，這一點非常有用。 程式碼拼字檢查器可讓您修復拼字錯誤的單字或將它們儲存到專案的「settings.json」檔案中。這表明了對於可能不熟悉應用程式業務短語的新開發人員的巨大意圖。 ID：streetsidesoftware.code-spell-checker VS 市場連結：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker --- ## EditorConfig EditorConfig 對我和我的團隊來說至關重要。透過建立格式化標準，它可以幫助我們在發出拉取請求時保持程式碼編輯器同步並減少差異日誌。 ID：EditorConfig.EditorConfig VS Marketplace 連結：https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig --- ## Eslint 和 Prettier 如果您進入 Webdev 世界很短一段時間，您可能已經遇到過這兩個。我不會在這裡討論太多細節，但簡而言之，Eslint 是一個 linter，Prettier 是一個格式化程式。您可以將它們一起使用以在專案中強制執行程式碼標準。 ID：dbaeumer.vscode-eslint VS 市場連結：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ID：esbenp.prettier-vscode VS 市場連結：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode --- ## Git-Rename 如果您想重新命名檔案或更改檔案名稱的大小寫，Git-Rename 非常有用。 Git-Rename 允許您重命名檔案並幫助您追蹤 Git 中的這些更改，而不是刪除檔案以將其從 Git 歷史記錄中刪除以便更改其大小寫。 什麼？ 假設您的專案中有一個名為“myfile”的文件，並且它已被版本控制追蹤。如果您將名稱更改為“myFile”，這只是大小寫更改，Git 預設不會關心它。您可以更改 git 設定來解決此問題，但如果您在團隊中工作，則需要說服其他開發人員也這樣做。一個更簡單的選擇是將此擴充功能包含在專案中的「extensions.json」檔案中，這樣他們每次開啟專案時都會收到提示，要求他們下載該擴充功能。 ID：ambooth.git-rename VS 市場連結：https://marketplace.visualstudio.com/items?itemName=ambooth.git-rename --- ## Import Cost 導入成本讓您知道每個導入的包有多少位元組。它對於行動應用程式非常有用，因為您的捆綁包大小對最終用戶來說意義重大。 ID：wix.vscode-導入成本 VS 市場連結：https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost --- ## IntelliCode TypeScript 和 JavaScript 的另一個很棒的擴充功能。 IntelliCode 就像那個試圖完成你的句子的煩人的朋友。它為在專案中找到的 TS 版本提供方法/物件補全，並為您推斷類型，讓您知道可以使用物件的哪些屬性。 對於 Django 粉絲來說，它也適用於 Python！ ID：VisualStudioExptTeam.vscodeintellicode VS Marketplace 連結：https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode --- ## Pretty Typescript Errors 這並不適合所有人，但我寫了很多 TypeScript，它可以幫助我解析 TS 錯誤。基本上，這個擴充功能將顯示一條更人性化的訊息，而不是 TypeScript 給你一個長而半複雜的訊息，以幫助你縮小程式碼中錯誤的範圍。 ID：yoavbls.pretty-ts-errors VS 市場連結：https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors --- 您使用這些擴充功能嗎？您是否有比這些更好的擴充功能的建議？請在下面的評論中告訴我！
原文出處：https://dev.to/lovestaco/good-bye-crud-apis-hello-sync-realtime-postgresql-with-electricsql-1f8j ## API 的混亂：我們的互動是否過於複雜？ Web 應用程式上的每個操作都會觸發一系列網路呼叫。以在 Instagram 等社群媒體平台發佈貼文為例。開啟貼文會觸發 _GET_ API 呼叫，點擊「讚」會觸發 _POST_ API 呼叫，評論會引發另一個 _POST_ API 呼叫。每次互動、每次點擊和每次提交都會從前端到後端發出一串 API 呼叫，以獲取或更新資料庫中的資料。 這種傳統的設定雖然實用，但卻在使用者介面和後端之間堆積了多層互動。每個新增的層都是潛在的故障點、延遲點或瓶頸。對於開發人員和工程師來說，管理這種複雜的 API 可能是一項日常工作。每個 API 呼叫都經過精心設計、測試和維護。時間和資源方面的開銷是真實存在的。 此外，另一端的使用者經常發現自己在等待這些網路呼叫完成，即使只是一瞬間。在速度和即時互動決定使用者體驗的時代，這些微小的延遲可能會累積起來，影響使用者的參與和滿意度。 現在，想像一個可以減少大量 API 呼叫的設置，一個允許與資料庫直接互動、消除延遲和混亂的設置。這就是 _ElectricSQL_ (ESQL) 發揮作用的地方... ## ElectricSQL：消除 API 混亂 ESQL 提出了一種更乾淨、簡化的方法。它與 Postgres DB 一起執行，減少了對多個 API 呼叫的需求。使用 ESQL，評論或投票等操作在瀏覽器本機儲存 (SQLite) 內的專用表中處理，然後與 Postgres 同步。此設定無需呼叫後端 API 將資料儲存到 Postgres，從而減少了通訊層數和相關延遲。前端和資料庫現在可以更直接、更有效率地互動。這簡化了開發人員的工作流程並加快了前端的使用者互動速度。現在讓我們看看這是如何實現的以及內部發生了什麼。 ## 使用 Electric 實現瀏覽器和 Postgres DB 之間的交互  此圖示範了瀏覽器和 Postgres 資料庫之間透過_Electric 服務_進行的通訊路徑。本質上，[Electric Sync Service](https://electric-sql.com/docs/usage/installation/service)，一個[Elixir應用程式](https://elixir-lang.org/)，https://electric-sql.com/docs/intro/active-active 使用者本地資料庫與Postgres之間的資料複製。 瀏覽器透過 [electric-sql](https://www.npmjs.com/package/electric-sql) 函式庫與本機資料庫互動。本地資料庫連接到_Electric服務_，Electric-SQL中有一個衛星，用於與_Electric服務_通信，並用於本地資料庫和Postgres之間的資料複製。 每當本地資料庫或 Postgres 中發生資料變更時，_Electric 服務_ 都會充當衝突解決程序，確保無縫資料複製。此配置無需呼叫 API 來儲存評論或更新等新資料條目，從而簡化了資料互動過程。 繼續閱讀全文 [https://journal.hexmos.com/reduce-apis-using-electric/](https://journal.hexmos.com/reduce-apis-using-electric/)
原文出處：https://dev.to/nathan_tarbert/7-repositories-that-will-make-you-90-smarter-2jb3 在熙熙攘攘的科技世界中，人們很容易陷入大牌明星的炒作之中。 不要讓公司的規模欺騙了你。一些最具創新性和影響力的技術來自較小的公司或新創公司  這裡有七家這樣的新創公司，每家都擁有獨特的產品，可以改變您的專案，並在此過程中讓您變得更聰明： ___ ## [1] [BoxyHQ](https://github.com/boxyhq/jackson) [](https://github.com/boxyhq/jackson) BoxyHQ 擁有一套用於安全和隱私的 API，旨在幫助工程團隊更快地建立和發布合規的雲端應用程式。 它提供企業 SSO、目錄同步、審核日誌和用於保護敏感資料的隱私庫等功能。 如果您是一家企業或正在建立新的 SaaS 應用程式，BoxyHQ 可能會成為遊戲規則的改變者，從頭開始確保安全性和合規性。 - 管理應用程式中的使用者身份驗證 - 確保用戶註冊和登入安全且合規 **請為此 GitHub 儲存庫加註星標 ** 👇 https://github.com/boxyhq/jackson ___ ## [2] [Cal.com](https://github.com/calcom/cal.com) [](https://github.com/calcom/cal.com) Cal.com 是一款高效的日程安排工具，旨在消除安排會議的麻煩，有效消除冗長的電子郵件交流的需要。 如果您的專案涉及安排團隊會議或管理約會，Cal.com 可以簡化您的日程安排流程，最終節省您寶貴的時間。 - 直接在您的應用程式中輕鬆安排會議或約會 - 有效安排團隊會議、專案里程碑和截止日期 **請為此 GitHub 儲存庫加註星標 ** 👇 https://github.com/calcom/cal.com ___ ## [3] [Flagsmith](https://www.flagsmith.com/) [](https://www.flagsmith.com/) Flagsmith 是一個功能標誌管理平台，可讓您控制發布應用程式功能的方式。 您可以使用功能標誌的安全網解耦部署和發布並將程式碼推送到生產環境。 _這些策略在複雜的專案場景中非常有益，可以實現更有效率的開發和更順利的推出：_ - 逐步發布和測試功能的不同版本 - 在全面部署之前評估並完善多個功能版本 **請為此 GitHub 儲存庫加註星標 ** 👇 https://github.com/Flagsmith/flagsmith ___ ## [4] [配音](https://github.com/steven-tey/dub) [](https://github.com/steven-tey/dub) Dub 是一款多功能開源連結縮短器和管理工具，專為當今充滿活力的行銷團隊精心打造。 該平台使用戶能夠無縫生成、分發和監控縮短的連結。 - 利用您自己的自訂網域自訂您的連結，讓您保持品牌一致性 - 簡化連結管理，確保高效率、有效的行銷活動 **請為此 GitHub 儲存庫加註星標 ** 👇 https://github.com/steven-tey/dub --- ## [5] [Formbricks](https://github.com/formbricks/formbricks) [](https://github.com/formbricks/formbricks) Formbricks 是您實施產品內微觀調查的終極資源，這將徹底改變您的產品體驗。 這些不引人注目的調查是收集用戶見解和增強應用程式功能的強大工具。 豐富您產品的使用者體驗，並為應用程式開發做出基於資料的決策。 - 利用微觀調查在正確的時間精確地接觸到正確的用戶，提高用戶參與度和滿意度，而不會讓他們被煩人的調查淹沒 - 直接在您的應用程式中輕鬆收集有價值的調查資料，簡化收集用戶回饋並發現改進機會的過程 **請為此 GitHub 儲存庫加註星標 ** 👇 https://github.com/formbricks/formbricks ___ ## [6] [漩渦](https://github.com/swirlai/swirl-search) [](https://github.com/swirlai/swirl-search) Swirl 是一個開源搜尋平台，可以同時搜尋多個內容來源並返回人工智慧排名的結果。 您也可以使用生成式 AI 模型根據您的資料取得答案。 開始根據您的資料發現和開發您需要的答案。 - 連接到各種資料來源，例如： - 資料庫（SQL 與 NoSQL、Google BigQuery） - 公共資料服務（Google 可程式搜尋、Arxiv.org 等） - 企業來源（Microsoft 365、Jira、Miro 等） - 利用人工智慧和法學碩士（如 ChatGPT）產生見解 **請為此 GitHub 儲存庫加註星標 ** 👇 https://github.com/swirlai/swirl-search --- ## [7] [Clickvote](https://github.com/clickvote/clickvote) [](https://github.com/clickvote/clickvote) 在任何上下文中加入按讚、按讚和留言。 功能齊全的 React / Angular / Vue / Svelte 來管理您的所有產品反應。 - 了解您的用戶並深入了解不同的功能 - 讓使用者互相互動 **請為此 GitHub 儲存庫加註星標 ** 👇 https://github.com/clickvote/clickvote ___ ## 要點 這些開源新創公司提供了一系列工具和服務，可以大大增強您的專案，並且您會在過程中變得更加聰明。 列出的所有專案都是開源的，歡迎所有貢獻者，您可以立即採取的一項行動是為每個儲存庫加註星標。
原文出處：https://dev.to/madza/24-open-source-projects-for-developers-in-2023-391l --- 標題：2023 年開發人員的 24 個開源專案 🔥👍 發表：真實 描述： 標籤： 開源、 github、 程式設計、 Web 開發 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74998ffdt3doqvxtxumz.png canonical_url：https://madza.hashnode.dev/24-open-source-projects-for-developers-in-2023 --- 開源專案是創新、協作和創造力的遊樂場。它是來自世界各地的開發人員聚集在一起分享他們的想法、技能和熱情的中心。 在本文中，我精心挑選了 24 個涵蓋廣泛興趣和技術的開源專案。 從尖端的人工智慧框架到漂亮的生產力工具以及介於兩者之間的一切，每個開發人員都能找到適合自己的東西。 我提供了直接連結、描述和視覺效果，以便您可以立即獲得每個工具的初步印象。 --- ## 1\. [集算器SPL](https://github.com/SPLWare/esProc)（贊助） 集算器SPL是一種基於腳本的資料操作語言，與SQL資料庫集成，支援進階分析和高效能並行處理。 它適合處理大型資料集，與各種工具集成，提供資料視覺化，並跨多個平台工作。一些主要功能包括： **💪 強大的資料處理能力：** 集算器SPL是一種腳本語言，具有豐富的函數庫和強大的語法。 **✨ 預存程序等效項：** 它允許透過 JDBC 介面執行 SPL 腳本。 **📈 多功能視覺化：** 它提供了成熟的報告工具，具有廣泛的視覺化配置，用於建立各種類型的報告。 **⚡ 自動化工作流程：** 它支援軟體工作流程的自動化，包括用於程式碼建置、測試和部署的 CI/CD 流程。 **🔥 相比SQL更具彈性：** 與SQL語法不同，集算器SPL允許將資料處理程式碼寫在多條語句中。  ## 2\. [跳房子](https://github.com/hoppscotch/hoppscotch) 一種多功能開源 API 開發和測試工具，提供使用者友善的介面，用於發出 HTTP 請求來測試 API 並與 API 互動。 它簡化了製作和發送請求的過程，使其成為使用 API 的開發人員和測試人員的必備工具。  ## 3\. [Supabase](https://github.com/supabase/supabase) Firebase 的開源替代方案，為開發人員提供了一組用於建立可擴展的即時應用程式的工具。 它提供了強大的後端即服務 (BaaS) 平台，具有身份驗證、資料庫管理和即時功能等功能，使其成為創建現代 Web 和行動應用程式的強大選擇。  ## 4\. [超級代幣](https://github.com/supertokens/supertokens-core) 一種開源身份驗證解決方案，提供強大的安全功能和輕鬆集成，以增強 Web 和行動應用程式中的使用者身份驗證和授權。 它為開發人員提供了一個全面的工具包，用於保護用戶資料並確保無縫登入體驗。  ## 5\. [Git](https://github.com/git/git) Git 版本控制系統的官方開源程式庫，最初由 Linus Torvalds 建立。 Git 廣泛用於追蹤原始程式碼的更改，並透過提供強大的分支和合併功能來實現協作軟體開發。  ## 6\. [VS 代碼](https://github.com/microsoft/vscode) 由 Microsoft 開發的免費開源程式碼編輯器。 它提供了高度可自訂且高效的程式設計環境，具有 IntelliSense、調試支援和龐大的擴充庫等功能，可增強您的開發工作流程。  ## 7\. [OhMyZsh](https://github.com/ohmyzsh/ohmyzsh) 一個流行且高度可自訂的框架，用於在類 Unix 作業系統中管理 Zsh 配置。 它簡化了 shell 自訂，提供了大量插件和主題來增強您的命令列體驗。  ## 8\. [包子](https://github.com/oven-sh/bun) 一個開源 JavaScript 工具包，旨在簡化和優化為 Web 應用程式捆綁 JavaScript 程式碼的過程。 它提供了一種現代且快速的方法來建立捆綁包，從而增強了使用 JavaScript 專案時的效能和開發人員體驗。  ## 9\. [SWR](https://github.com/vercel/swr) SWR（Stale-While-Revalidate）是一個用於在 React 應用程式中取得資料的 JavaScript 函式庫。 它可以在客戶端和伺服器之間實現高效、自動的資料同步，提供無縫的即時更新，同時確保資料保持新鮮和最新。  ## 10\. [Prisma](https://github.com/prisma/prisma) 用於現代應用程式開發的開源資料庫工具包，透過強大的查詢產生器和類型安全的 ORM（物件關聯映射）層簡化資料庫存取和操作。 它允許開發人員使用聲明性和直觀的方法管理資料庫並與之交互，從而使資料庫操作在各種資料庫系統中無縫且安全。  ## 11\. [ElasticSearch](https://github.com/elastic/elasticsearch) 由 Elastic 開發的強大且可擴展的開源搜尋和分析引擎。 它旨在幫助用戶快速有效地搜尋、分析和視覺化大量數據，使其成為從全文搜尋引擎到日誌分析等應用程式的熱門選擇。  ## 12\. [哈蘇拉](https://github.com/hasura/graphql-engine) 一款功能強大的開源工具，可簡化應用程式的 GraphQL API 開發。 借助 Hasura，您可以輕鬆建立、管理和保護 GraphQL API，從而更輕鬆地與資料來源互動並建立現代的資料驅動應用程式。  ## 13\. [BioDrop](https://github.com/EddieHubCommunity/BioDrop) 透過單一連結與您的受眾建立聯繫。在一處展示您創建的內容和項目。 讓人們更容易找到、關注和訂閱。  ## 14\. [Powertoys](https://github.com/microsoft/PowerToys) 適用於 Windows 的開源實用程序，可提高工作效率和自訂功能。 它提供了一系列方便的工具和實用程序，包括快速啟動器、文件預覽和視窗管理等功能，旨在簡化您的 Windows 體驗。  ## 15\. [Strapi](https://github.com/strapi/strapi) 開源無頭內容管理系統 (CMS)，使開發人員能夠快速建立強大且可自訂的 API。 它使團隊能夠輕鬆創建和管理內容豐富的網站和應用程序，為各種專案提供靈活性和可擴展性。  ## 16\. [看似合理](https://github.com/plausible/analytics) 一種開源網路分析工具，旨在為網站所有者提供對其網站效能的簡單且注重隱私的見解。 它提供用戶友好、輕量級的跟踪，且不會損害訪問者的隱私，使其成為那些重視數據分析而無需侵入性跟踪方法的人的理想選擇。  ## 17\. [Astro](https://github.com/withastro/astro) 現代靜態網站產生器，透過僅傳送頁面所需的 JavaScript 來提供閃電般的效能，從而實現近乎即時的載入時間。 它將傳統伺服器渲染框架的靈活性與靜態網站產生器的速度相結合，使其成為建立高效動態網站的絕佳選擇。  ## 18\. [混音](https://github.com/remix-run/remix) 用於建立現代 JavaScript 應用程式的 Web 框架，注重速度和開發人員體驗。 它使開發人員能夠透過無縫組合伺服器渲染和客戶端渲染的內容來創建高效能的 Web 應用程式。  ## 19\. [張量流](https://github.com/tensorflow/tensorflow) 由Google開發的開源機器學習框架。 它為建立和部署機器學習模型提供了靈活且全面的生態系統，使其成為人工智慧領域研究人員和開發人員的熱門選擇。  ## 20\. [顫動](https://github.com/flutter/flutter) 由 Google 創建的開源 UI 軟體開發工具包，以其從單一程式碼庫建立適用於行動、Web 和桌面的本機編譯應用程式的能力而聞名。 它使開發人員能夠使用單一程式語言 Dart 跨多個平台創建美觀、快速且高度可自訂的使用者介面。  ## 21\. [Kubernetes](https://github.com/kubernetes/kubernetes) 一個開源容器編排平台，可自動執行容器化應用程式的部署、擴充和管理。 它為編排容器提供了強大而靈活的基礎架構，使在雲端原生環境中大規模管理複雜的分散式系統變得更加容易。  ## 22\. [Docker](https://www.docker.com/community/open-source/) 一個開源工具，可簡化多容器 Docker 應用程式的管理。 它允許開發人員使用簡單的 YAML 檔案定義和運行多容器應用程序，從而更輕鬆地編排和部署複雜的服務。  ## 23\. [鉻](https://github.com/chromium/chromium) Google 的一個開源瀏覽器項目，旨在為所有使用者建立更安全、更快、更穩定的網路體驗方式。 它是開發人員在網路瀏覽技術領域做出貢獻和創新的平台。  ## 24\. [Linux 核心](https://github.com/torvalds/linux) 由 Linus Torvalds 和全球貢獻者社群開發的開源、類別 Unix 作業系統核心。 它作為各種基於 Linux 的作業系統的核心組件，提供硬體互動和系統管理的基本功能。  --- 寫作一直是我的熱情，幫助和激勵人們讓我感到很高興。如果您有任何疑問，請隨時與我們聯繫！ 透過[Twitter](https://twitter.com/madzadev)、[LinkedIn](https://www.linkedin.com/in/madzadev/) 和[GitHub](https://github.com) 與我聯繫/madzadev）！ 請訪問我的[部落格](https://madza.dev/blog)以獲取更多此類文章。
原文出處：https://dev.to/jurajmalenica/unpopular-opinion-its-harder-than-ever-to-be-a-good-software-engineer-32ek 在創業環境中工作近十年，使我有幸接觸到創新、探索和快速失敗方法的快節奏文化。我遵循標準的晉升階梯：實習生、初級、中級、高級，最後進入工程管理軌道。隨著時間的推移，許多和我一起成長的人後來都去了其他公司工作，成為那裡備受尊敬的貢獻者。可以公平地說他們是優秀的工程師。 回顧我的同事、學員和我自己的旅程，成為優秀工程師似乎比以往任何時候都更難。 ## 定義_好_工程師 **成為工程師意味著什麼？** 作為軟體工程師，我們： - 負責將複雜的問題轉化為高效且可擴展的解決方案 - 負責分析使用者需求、設計軟體架構、編寫程式碼、測試和除錯軟體 - 期望保持領先趨勢，尋求新的商機和改進現有產品的方法 所以不——工程不等於程式設計。有時，這是最小的部分。隨著經驗的積累，一定會出現這樣的情況，如下圖所示。  **成為一名_優秀_工程師意味著什麼？** 根據大量採訪以及支持我的學員的進步，我注意到具有不同專業水平的人可能會給出不同的答案。 剛開始的人可能會認為這是開發人員了解的語言和框架的數量。經驗豐富的工程師甚至可能不關心他們使用的語言，而是強調程式碼品質 - 遵守所有編碼原則並進行品質檢查，同時快速行動。 經驗豐富的工程師非常注重創造價值。有時，我們會快速寫出廢棄的程式碼，打破所有規則來證明一個假設；有時我們會花幾天時間編寫幾行關鍵任務程式碼。但大多數時候，我們正在製定架構決策、討論關鍵任務問題、改善流程等。為什麼？因為通常這會帶來最大的價值。 儘管規則總有例外，但我們可以說**一名優秀的工程師能夠有效地集中精力，在實現目標的過程中帶來最大價值。** ## 不斷成長的市場與競爭 **科技市場不斷發展。** 多年來，我們都見證了巨大的成功：從 WhatsApp 到 Uber、Airbnb 和 TikTok。雖然這些可能是例外，但這樣的例子往往為人們樹立了北極星——他們應該為此奮鬥。這種思考方式給工程師帶來了額外的壓力。他們感受到來自內部的壓力，認為自己做錯了什麼，以及來自外部的壓力，因為人們將他們的公司與許多競爭對手進行比較。  為了在這樣的環境中取得成功，公司需要“快速行動，打破常規”，正如 Facebook 的著名座右銘所說。如今，這一點比以往任何時候都更加明顯——幾乎每家公司都在成為「人工智慧公司」。每個人都在整合 ChatGPT，通常沒有真正的原因，也沒有關於如何帶來價值的策略。 **透過偏離核心原則**——我們如何為客戶帶來更多價值——並轉向在炒作列車上擊敗競爭對手，**我們讓工程師建置注定會失敗的功能。** ## 世界是一個令人困惑的地方 像我這樣的愛好者該怎麼做才能成為更好的工程師？除了透過改進乾淨程式碼和架構哲學來完善編碼技能這一顯而易見的選擇之外，如今還潛伏著許多誘惑。學習 TypeScript 和改變一切的最新框架，深入區塊鏈和加密世界，嘗試無數的人工智慧產品…選擇是無窮無盡的。  說實話，在這個行業工作了這麼多年，我仍然感受到 ChatGPT、GitHub Copilot 等新興技術帶來的新一波變革的威脅。我的大腦開始想像我對很多事情脫節的場景。我是否專注於能夠帶來價值的正確事物？我是否發揮了最大潛能？ 一段時間後，很明顯我們正處於炒作之中。這也會過去，只剩下創造長期價值的人工智慧公司。過去 5 年，美國的人工智慧公司數量翻了一番，許多新創公司只是在當時新發布的 GPT-3 的基礎上加入了一項功能。他們後來隨著 ChatGPT 或 GPT-4 的發布而消亡，它們可以做同樣的事情，但更好。但這並不能阻止推特和其他平台的炒作大軍宣布新的世界秩序。 儘管在科技業工作了這麼多年，我還是陷入了炒作之中。菜鳥錯誤！ 程式語言和新框架的不斷發布也增加了混亂。 Tailwind、TypeScript、Haskell 和 Rust 都很棒；他們每個人都有一個帶給他們優勢的角度。然而，人們常常誤以為學習它們可以為他們帶來優勢。它不會，或至少不應該。它們只是很高興了解但不能取代經驗的工具。這就是為什麼我們從不在工作描述中提出語言/框架要求。如果我因為不懂 TypeScript、即時工程或微服務而錯過一位才華橫溢的工程師，那我就太傻了。 我的建議是 - **不要陷入新趨勢和炒作，以至於失去對創造價值的關注。** ## 快節奏與高期望 **在尋求新的挑戰時，可能很難在努力爭取積極壓力的同時避免消極壓力。**積極壓力是指我們將有壓力的情況視為導致良好結果的機會，而消極壓力則可以使我們獲得良好的結果。如下圖所示，會對身心健康產生不利影響。在緊迫的時間內持續交付結果是有壓力的，而出於錯誤的原因建立功能則傾向於後者。  作為一名導師和一名努力工作的人，我都看到壓力會導致倦怠。無一例外，讓某人經歷倦怠所帶來的產出比減少工作量、休息和長期優化要少。這就是為什麼我們總是嘗試透過定期團隊更新、一對一和培育文化，盡可能簡單地提出危險信號。 儘管如此，事情還是會出問題。當他們這樣做時，我們會縮小範圍，讓可以提供幫助的人員參與進來，或與客戶溝通以推遲發布。 **壓力比以往任何時候都大，來自內部和外部。保持專注，讓自己身邊有一個長期優化的支援團隊。** ## 我們怎麼做得更好？ 我們都有情緒低落的時候──感覺自己是個不稱職的工程師、導師或同事。事情永遠不會是完美或容易的，也不應該是。如果不犯錯和經歷困難，我們就不會學習。但我發現有些事情可以提高效率。  **就個人而言，**忠於真正重要的事情。科技會來來去去，但你為世界帶來的價值才是最重要的。努力工作和經驗是很難偽造的。 **作為一家公司，**在做出決策時首先從「為什麼」開始。這是提供可帶來價值的功能的最佳方式。另外，請確保員工知道***為什麼***。根據我的經驗，他們會做出更好的決定，提供有價值的回饋，並且會更快樂。 **在文化上，**建立一個支持員工、長期優化的流程。與您的同事一起建立信任、支持和關懷的文化。這樣，你們就能互相發揮最好的一面。
原文出處：https://dev.to/nathan_tarbert/9-open-source-repos-that-will-make-your-saas-gold-54h7 從頭開始建立軟體即服務 (SaaS) 可能是一項耗時的工作。 不用擔心，有預先配置的 SaaS 樣板可供使用，包括我將很快介紹的樣板，它可以為您提供所需的必要加速和節省時間的提升。 [](https://github.com/boxyhq/jackson) ## 什麼是 SaaS？ 我很高興您提出這個問題，簡而言之，軟體即服務 (SaaS) 是一種基於雲端的軟體模型，可透過瀏覽器向使用者交付應用程式。 軟體和基礎設施由 SaaS 供應商管理，用戶可以按需存取服務，通常採用訂閱或按使用付費定價模式 所有業務需求都可能非常不同，並且不同組織的精選功能清單也可能有所不同。 您的 SaaS 應用程式可以整合開源軟體以增強其功能並為您的用戶提供卓越的價值。 讓我們看看如何利用有價值的開源軟體來改變遊戲規則。 當您建立 SaaS 應用程式時，它為您的新興業務提供更通用、更強大的解決方案。 ___ ##。 [BoxyHQ 的 SaaS 入門套件](https://dub.sh/saas-starter-kit)這是您的 SaaS👇  使用 Next.js SaaS 樣板啟動您的企業應用程式開發。 - 透過利用開箱即用的預先建構樣板功能來促進開發。 - 顯著減少建立您自己的 SaaS 的時間，並專注於建立您的核心應用程式功能。 - 非常適合新創公司以及那些希望透過強大的開箱即用安全性來增強現有應用程式的公司。 https://dub.sh/saas-starter-kit 請加註星標 ⭐ BoxyHQ ___ ## 1. [Cerbos](https://github.com/cerbos/cerbos)  Cerbos 是一個開源、可擴展的授權層，可簡化跨多個應用程式和服務的使用者角色和權限的實施和管理。 - 在 SaaS 應用程式中自訂存取控制，可讓您定義細粒度的權限以滿足使用者的獨特要求。 - 防止對敏感資料進行未經授權的存取，並確保資料免受未經授權的使用者的侵害。 - 增強的使用者體驗，使用戶能夠精確控制他們在應用程式中的存取權限。 https://github.com/cerbos/cerbos 請加註星標 ⭐ Cerbos --- ## 2. [SuperTokens](https://github.com/supertokens/supertokens-core)  SuperTokens 是一種開源身份驗證和授權解決方案，旨在為 Web 和行動應用程式提供安全登入和可擴展的存取管理。 - 支援多種身份驗證方法，包括會話管理和 JWT，確保使用者身份驗證無縫且安全。 - 防止常見的安全陷阱，例如會話劫持和資料洩露，增強使用者對應用程式的信任。 - 透過簡化使用者身分驗證流程，改善使用者體驗，確保使用者可以輕鬆、放心地存取應用程式。 https://github.com/supertokens/supertokens-core 請加註星標 ⭐ SuperTokens --- ## 3. [Retraced](https://dub.sh/retraced)  Retraced 是一項開源審核日誌服務，用於記錄整個組織的軟體系統內的活動。 - 提供對應用程式內所有活動的詳細跟踪，使您能夠監控誰存取了您的應用程式以及他們執行了哪些操作。 - 及早發現可疑或未經授權的行為，從而能夠快速回應潛在的安全事件。 - 透過提供使用者操作和系統事件的稽核追蹤來維持透明度和問責制。 https://dub.sh/retraced 請加註星標 ⭐ Retraced --- ## 4. [unleash](https://github.com/Unleash/unleash)  unleash 可以輕鬆測試程式碼如何與實際生產資料配合使用，而不必擔心意外破壞使用者體驗。 - 控制功能推出，確保逐步引入更新和新功能，降低中斷和問題的風險。 - 在出現不可預見的問題或錯誤時快速緩解問題，使您能夠快速關閉有問題的功能，而無需重新部署完整的應用程式。 - 最大限度地減少中斷和問題的風險，確保更流暢的使用者體驗。 https://github.com/Unleash/unleash 請加註星標 ⭐ unleash --- ## 5. [ockam](https://github.com/build-trust/ockam)  促進應用層動態資料的安全資料真實性、完整性和機密性。 - 強大的安全框架，讓開發人員可以建立端到端的加密通訊通道，確保資料的真實性、完整性和機密性。 - 支援多種協議，允許安全通道跨越各種網路拓撲和傳輸協議。 - 提供身分建立、金鑰管理和憑證管理工具，這對於分散式系統中的安全通訊至關重要。 https://github.com/build-trust/ockam 請加註星 ⭐ Ockam --- ## 6. [Hasura](https://github.com/hasura/graphql-engine)  Hasura 是一個開源引擎，它透過 Postgres 提供即時、即時的 GraphQL API，並具有資料庫事件的 Webhook 觸發器和業務邏輯的遠端模式。 - 簡化從資料庫取得資料的流程，同時保持強大的安全性，減少開發時間和潛在的安全風險。 - 透過權限和基於角色的存取控制（RBAC）對資料存取進行細微控制，確保只有授權使用者才能存取特定資料。 - 透過保護敏感資訊免遭未經授權的存取來增強資料安全性。 https://github.com/hasura/graphql-engine 請star ⭐ Hasura --- ## 7. [Meltano](https://github.com/meltano/meltano)  聲明式、以程式碼優先的資料整合引擎，為開發人員提供跨各種來源和目的地移動、轉換和探索資料的工具。 旨在幫助解鎖 API 和資料庫，並促進資料和機器學習驅動的產品創意的建立。 - 支援 600 多個資料來源和目標，提供多功能整合解決方案。 - 用於管理資料管道的聲明式程式碼優先方法，這使其成為處理大規模資料的強大工具。 - 允許開發人員建立自訂連接器並整合現有資料工具，提供高水準的自訂和靈活性。 https://github.com/meltano/meltano 請star ⭐ Meltano --- ## 8. [Odigos](https://github.com/keyval-dev/odigos)  Odigos 是一個用於應用程式監控和可觀察性的開源專案，使用戶能夠主動檢測和解決安全問題。 **應用程式開發人員** - 透過利用 OpenTelemetry 和 eBPF 的強大功能來自動檢測應用程式，更加專注於編寫程式碼。利用一流的可觀測性資料為下一次生產事故做好準備。 **Odigos** - 根據應用程式的流量自動部署和擴展收集器。無需浪費時間部署和配置收集器。 https://github.com/keyval-dev/odigos 請加註星 ⭐ Odigos --- ## 9. [Trigger.dev](https://github.com/triggerdotdev/trigger.dev)  Trigger.dev 是一個平台、SDK 和 API，用於在程式碼庫中建置和執行作業，由各種來源觸發，但無需擔心管理任何複雜的編排基礎架構。它可以從任何節點使用。 - 管理逾時時間短的無伺服器平台上長時間執行的作業。 - 提供使用者一個 SDK，用於在程式碼庫中建立作業，由事件、排程事件和 Webhooks 等各種來源觸發。 - 與 Slack、OpenAI、GitHub 等流行服務的開箱即用集成，大大簡化了與第三方服務互動的過程。 https://github.com/triggerdotdev/trigger.dev 請加註星標 ⭐ Trigger.dev ___ ## 🔥 [趨勢清單](https://github.com/github-20k/trending-list)  當您的開源專案成為 GitHub 上的即時熱門時，您將透過電子郵件收到通知。 https://github.com/github-20k/trending-list 請加註星標 ⭐ 趨勢清單 ___ 🤩 合併開源專案可以為您的 SaaS 應用程式帶來全面勝利。 感謝您查看這九個強大的開源專案，您應該考慮將它們整合到您的 SaaS 中以增強其功能，從而將您的應用程式變成黃金。🥇 **支援開源軟體的最佳方式之一就是加一顆星** 🌟
原文出處：https://dev.to/kumarkalyan/top-5-github-repositories-to-achieve-system-design-mastery-27n4 ## 簡介 🔥 本文包含前 5 個 GitHub 儲存庫的列表，可協助您掌握系統設計。 這些儲存庫主要包含與系統設計相關的教學課程、部落格、影片和案例研究 請務必存取這些儲存庫，探索內容，實施所學知識，如果可以的話做出貢獻，並給他們 ⭐ 來幫助他們成長。  ## 什麼是系統設計 系統設計⚙️是為特定係統設計架構、元件、介面和資料以滿足特定要求的過程。 在建立任何應用程式或系統之前，🏗️規劃系統如何運作、需要哪些資源、在哪裡部署、系統元件將使用哪些 API 以及如何擴充系統非常重要。因此，系統設計理念對於軟體開發人員掌握建置高效且可擴展的系統非常重要。 💯 ## 1\.開發者路線圖 [https://github.com/kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap) * 開發者路線圖 GitHub 儲存庫由 Kamran Ahmed 建置和維護，該儲存庫可以被認為是軟體開發的最佳手冊 * 它在 Git Hub 上擁有 255k 星和 684 名貢獻者。該儲存庫僅提供英文版本，它包含所有內容的結構化路線圖以及資源、指南等。 > [給開發者路線圖打 ⭐](https://github.com/kamranahmedse/developer-roadmap) --- ## 2\.系統設計入門 [https://github.com/donnemartin/system-design-primer](https://github.com/donnemartin/system-design-primer) * Sytem Design Primer GitHub 儲存庫由 Facebook（現為 Meta）的技術主管建立。這個儲存庫可以被認為是系統設計的聖經 * 它在 GitHub 上擁有 233,000 顆星，擁有 100 多個貢獻者，並提供多種不同語言版本。 > [給系統設計入門打 ⭐](https://github.com/donnemartin/system-design-primer) --- ## 3\.系統設計101 [https://github.com/ByteByteGoHq/system-design-101](https://github.com/ByteByteGoHq/system-design-101) * System Design 101 GitHub 儲存庫由 Byte Byte Go Hq 建置和維護，這是一個在系統設計面試中脫穎而出的平台 * 它在 Github 上有 39.2k 啟動次數和 14 個貢獻者。此儲存庫僅提供英文版本，是初學者的最佳儲存庫。該儲存庫包含有關通訊協定、CI-CD、架構模式、微服務、DevOps、雲端、Linux 等主題的有效指南。 > [給 system-design-101 打 ⭐](https://github.com/ByteByteGoHq/system-design-101) --- ## 4\.系統設計資源 [https://github.com/InterviewReady/system-design-resources](https://github.com/InterviewReady/system-design-resources) * Sytem Design Resources GitHub 儲存庫由 Interview Ready 建置和維護，這是一個為大型科技巨頭提供 Sytem 設計面試的平台。 * 它在 Git Hub 上有 11,400 顆星，有 8 位貢獻者。此儲存庫僅提供英文版本。它包括有關各種系統設計主題的案例研究、指南和視訊講座，包括視訊處理、叢集和工作流程管理、服務內訊息傳遞、訊息佇列反模式、服務網格、實用系統設計、分散式檔案系統、時間序列資料庫、速率限制、記憶體資料庫 - Redis 等等 > [給系統設計資源打 ⭐](https://github.com/InterviewReady/system-design-resources) --- ## 5\.系統設計 [https://github.com/karanpratapsingh/system-design](https://github.com/karanpratapsingh/system-design) * 系統設計 GitHub 儲存庫由 Curebase 的高級軟體工程師 Karan Pratap Singh 建置和維護。 * 它在 Git Hub 上有 21,100 顆星，有 9 位貢獻者。此儲存庫僅提供英文版本。它基本上是作者真書的免費版本。它共有 5 章，最適合剛接觸開發的初學者。 > [給系統設計打 ⭐](https://github.com/karanpratapsingh/system-design) 在那之前請繼續關注我的下一篇博客 
## 簡介 Web 開發的世界可能會因資源太多而令人不知所措。為了簡化這個過程，我列出了專為 Web 開發人員量身定制的 24 個最佳資源。 本指南涵蓋 HTML、CSS 和 JavaScript 的核心技術，旨在為初學者和專家提供有價值的工具和見解，以提高他們的 Web 開發技能。請探索這些精心挑選的資源，以幫助您在 Web 開發中脫穎而出。 原文出處：https://dev.to/swirl/24-best-resources-for-web-developers-html-css-javascript--2hog --- ## [Swirl](https://github.com/swirlai/swirl-search) [](https://github.com/swirlai/swirl-search) 搜尋多個來源具有挑戰性。 Swirl 結合了您所有的資料庫、筆記、PDF、Jira、GitHub、向量資料庫、Discord、Slack、Teams Chat 等，並允許您搜尋它們。 允許您： - 產生答案的人工智慧摘要。 🤖 - 管理您的資料並建立知識庫。 📚 - 節省時間並提高工作效率。 ⏳ 請在 GitHub 上給 Swirl Search 一個 ⭐️。 💖 https://github.com/swirlai/swirl-search 在 GitHub 上給 Swirl ⭐ --- ## CSS 工具 #### 1. [CSS 漸變](https://cssgradient.io/) CSS Gradient 是一個可讓您為網站建立免費漸變背景的專案。  #### 2. [Colorhunt](https://colorhunt.co/) Colorhunt 為設計師和藝術家提供了很棒的調色板。  #### 3. [CSS 技巧](https://css-tricks.com/) CSS Tricks 提供了有關級聯樣式表的一些最佳建議、提示、技巧和程式碼片段。  #### 4. [Haikei 生成器](https://haikei.app/generators/) Haikei 是一款 Web 應用程式，可產生令人驚嘆的視覺內容 - 可與您的設計工具和工作流程一起使用。  #### 5. [FFFuel](https://fffuel.co/gggrain/) Fffuel 是一個顏色工具和免費 SVG 生成器的集合，用於漸變、圖案、紋理、形狀和背景。  #### 6. [SVG 背景](https://www.svgbackgrounds.com/) SVG 背景託管一系列可在您的網站上使用的 SVG 背景。  #### 7. [動畫背景](https://animatedbackgrounds.me/) 動畫背景託管各種動畫背景的程式碼片段，可用作網站的背景。  #### 8. [Flowbite](https://flowbite.com/blocks/publisher/blog-templates/) Flowbite 提供了一組基於流行的 Tailwind CSS 框架的強大設計令牌和元件。  #### 9. [DaisyUI](https://daisyui.com/) DaisyUI 為 Tailwind CSS 新增了一組可自訂的顏色名稱，這些新顏色使用 CSS 變數作為值。  --- ## HTML #### 10. [Quackit 的 HTML 範本](https://www.quackit.com/html/templates/) Quackit 提供了大量免費網站模板可供選擇。根據您的選擇，您可以從簡單或更高級的模板清單中進行選擇。  --- ## 圖示 #### 11. [Devicon](https://devicon.dev/) Devicon 是一組代表程式語言、設計和開發工具的圖示。您可以將其用作字體或將 SVG 程式碼複製/貼上到您的專案中。  #### 12. [Flaticon](https://www.flaticon.com/) 為您的專案下載免費圖示和貼紙 - 由設計師製作並為設計師製作的 PNG、SVG 等格式的圖像。  --- ## 低程式碼工具 #### 13. [Framer](https://www.framer.com/) Framer 是一款低程式碼、基於人工智慧的拖放式網站建立器。  #### 14. [泡泡](https://bubble.io/) Bubble 自稱是世界上唯一的全端、無程式碼平台。 Bubble 是一款讓您無需編寫任何程式碼即可建立應用程式的工具。  #### 15. [阿達洛](https://www.adalo.com/) Adalo 是一種低程式碼響應式 Web 應用程式設計工具。  --- ## 其他 #### 16. [CDN JS](https://cdnjs.com/) CDN JS 是一個免費開源的內容傳遞網路。它允許 Web 開發人員直接搜尋 npm 套件並將其載入到靜態頁面的 HTML 頭部，而無需擔心 npm 安裝。  ## 免費圖片 #### 17. [Unsplash](https://unsplash.com/) 雖然我們有圖像生成工具，但沒有什麼比Unsplash帶給我們的超現實主義更重要了。您可以在網站上使用許多圖像（請記住向攝影師捐贈並在使用他們的圖像時提及他們）。  #### 18. [DALLE-3](https://openai.com/dall-e-3) Open AI 影像生成工具的第三次迭代。您可以使用 Bing AI 圖像產生器工具免費使用此工具。  --- ## 模型 #### 19. [模型世界](https://www.mockupworld.co/) 大量免費、合法、完全分層、易於自訂的逼真 PSD 模型：可在您的專案、應用程式展示和演示中使用！ 〜在他們的網站上提到！  #### 20.【免費模型世界】(https://www.freemockupworld.com/) Free Mockup World 是高品質、最佳免費模型的合作，包括 Apple 裝置、品牌、標誌、印刷、數位藝術、時尚、服裝等。 〜在他們的網站上提到。  #### 21.【UI設計日報】(https://uidesigndaily.com/) 適合您網站的免費開源 UI 設計資源。 （包含登入頁面等的 Figma 模型）  --- ## 其他有用的開源程式庫 #### 22.【ShadCN】(https://ui.shadcn.com/) 使用 Radix UI 和 Tailwind CSS 建立的設計精美的元件。  #### 23. [點選投票](https://clickvote.dev/) Clickvote 是一個開源函式庫，可以省去圍繞內容建立反應元件的麻煩。  #### 24. [斯巴達NG](https://www.spartan.ng/) ShadCN 用於 Angular。開源、社群建構。  --- ## 用於搜尋資料 - Swirl ### [漩渦](https://github.com/swirlai/swirl-search) **Swirl 是一個開源搜尋平台，它改變了您與資料互動的方式。** [](https://github.com/swirlai/swirl-search) 將其視為專門為您的獨特資料集量身定制的 ChatGPT。無論是筆記、程式碼片段、PDF 檔案還是電子郵件，Swirl 都是您獲取即時、人工智慧驅動見解的首選平台。 Swirl 與眾不同的特質： - **一般搜尋**：無縫搜尋筆記、程式碼、文件、資料庫、電子郵件、聊天、日誌等。 🔍 - **個人人工智慧驅動的知識助理**：您可以為您的公司、新創公司或個人資料建立安全、可搜尋的知識庫。 🤖 - **一鍵檢索增強生成**：使用 Swirl，您可以立即執行人工智慧摘要和分析。您可以透過產生這些資料的資料來源來獲得答案。 🛠️ **請在 GitHub 上給 Swirl Search 一個 ⭐️。 💖** https://github.com/swirlai/swirl-search 在 GitHub 上給 Swirl ⭐ 並加入我們的【開源 Slack 社群 💕】(https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw) --- 再次感謝您的閱讀！
2024 年，React 將慶祝其成立 11 週年，值得期待 React 生態系統中令人興奮的發展。在本部落格中，我們將基於 2023 年發生的情況以及來年的預期，探討生態系統的各個面向。 原文出處：https://dev.to/avinashvagh/react-ecosystem-in-2024-418k ## 1. 路由 路由一直是Web開發的關鍵部分，在2023年，我們看到了各種各樣的路由解決方案。讓我們看看2024年會發生什麼： - **React Router：** React Router 仍然是 React 應用程式中處理路由的基本選擇。憑藉其廣泛的文件和活躍的社區，它仍然是應用程式中聲明式路由的可靠選擇。 - **React Query：** Tanstack 的 React Query 在 2023 年流行的基礎上，旨在增強資料擷取和狀態管理。它簡化了 React 應用程式中管理、快取和同步資料的過程。 - **Next.js：** Next.js 是一個建立在 React 之上的框架，預計將保持其作為具有靈活路由選項的伺服器渲染 React 應用程式首選的地位。它的官方文件是 Next.js 應用程式中路由的寶貴資源。 2024 年，React 充滿活力的生態系統將繼續蓬勃發展，為開發人員提供豐富的工具和函式庫。請繼續關注 React 世界的更多更新和進步。 ## 2. 客戶端狀態管理 客戶端狀態管理是現代 Web 開發的一個重要方面，可以在前端應用程式中實現高效的資料處理。 Redux Toolkit 和 Zustand 是兩種流行的用戶端狀態管理解決方案。以下是兩者的簡要概述： ### 1. **Redux Toolkit** - **網址：** [Redux Toolkit](https://redux-toolkit.js.org/) Redux Toolkit 是一個建立在 Redux 之上的綜合狀態管理函式庫，Redux 是 React 應用程式中成熟的狀態管理函式庫。它提供了一組工具和最佳實踐，以可預測且高效的方式簡化狀態管理流程。 Redux Toolkit 的結構化方法（包括 actions、reducer 和 store）非常適合複雜的大型專案。它提倡採用集中式和聲明式的狀態管理方法。 ### 2. ** Zustand** - **示範：** [Zustand Demo](https://state-demo.pmnd.rs/) Zustand 是一個輕量級且靈活的狀態管理庫，專為小型專案或喜歡更簡單解決方案的開發人員而設計。它簡化了狀態管理，無需複雜的設定和概念。 Zustand 以其簡單性和易用性而聞名，這使其成為小型應用程式和重視更輕量級方法的人的絕佳選擇。 在 Redux Toolkit 和 Zustand 之間進行選擇時，請考慮專案的複雜性以及您對 Redux 的熟悉程度。 Redux Toolkit 是大型、結構化應用程式的絕佳選擇，而 Zustand 則非常適合需要快速、簡單的狀態管理解決方案的小型專案。 ## 3.伺服器狀態管理 伺服器狀態管理是 Web 開發的一個重要方面，特別是對於跨客戶端和伺服器的應用程式。以下是兩個可以幫助您有效管理伺服器狀態的關鍵庫： ### 1. **TanStack Query** - **文件：** [TanStack Query](https://tanstack.com/query/latest) TanStack Query 是一個強大且靈活的狀態管理庫，用於處理應用程式中的伺服器狀態。它允許您輕鬆地從伺服器獲取、快取和更新資料。該程式庫提供自動快取、高效資料擷取以及自訂 API 端點的功能等功能。對於需要即時資料更新和高效資料同步的應用程式來說，它是管理伺服器狀態的絕佳選擇。 ### 2. **Redux 工具包 - RTK Query** - **文件：** [Redux 工具包 - RTK 查詢](https://redux-toolkit.js.org/rtk-query/overview) RTK Query 是 Redux Toolkit 生態系統的一部分，提供管理伺服器狀態的全面解決方案。它以可預測且高效的方式簡化了發出 API 請求、快取資料和更新狀態的過程。 RTK Query 與 Redux 無縫集成，對於使用 Redux 進行狀態管理的應用程式來說是一個絕佳的選擇。它提倡最佳實踐並提供結構化方法來處理伺服器狀態。 選擇伺服器狀態管理庫時，請考慮您的專案需求、資料擷取需求的複雜性以及您對 Redux 的熟悉程度（如果您選擇 RTK 查詢）。這兩個庫都提供了用於管理應用程式中的伺服器狀態的強大解決方案。 ## 4. 表單處理 表單處理是建立 Web 應用程式的關鍵部分，尤其是在 React 中。用於表單處理的兩個流行的程式庫是 Formik 和 React Hook Form。概述如下： ### 1. ** Formik** - **網址：** [Formik](https://formik.org/) Formik 是在 React 中建立表單最常用的函式庫。它提供了一組實用程式和元件，可以輕鬆管理表單狀態、驗證和提交。雖然它是一個流行的選擇，但截至最新訊息，Formik 並未得到積極維護，這可能會影響其與未來 React 更新和不斷發展的最佳實踐的兼容性。使用 Formik 的唯一缺點是它不被維護。 Formik 文件/網站甚至不鼓勵在新專案中使用 Formik。 ### 2. **React Hook Form** - **網址：** [React Hook 表單](https://www.react-hook-form.com/) React Hook Form 是一個現代表單函式庫，它利用 React hooks 來有效地處理表單狀態和驗證。它得到積極維護，並提供輕量級且直觀的 API。 React Hook Form 以其效能和靈活性而聞名，使其成為在 React 應用程式中處理表單的絕佳選擇。 在 Formik 和 React Hook Form 之間進行選擇時，請考慮維護和專案的特定要求等因素。根據最新訊息，React Hook Form 因其積極的開發和現代的表單處理方法而成為推薦選擇。 ## 5. 測試 測試是軟體開發過程的關鍵部分，有各種工具和程式庫可協助開發人員編寫有效的測試。以下是一些用於測試的資源和工具： ### 1. **ViTest** - **網址：** [ViTest](https://vitest.dev/) ViTest 是一個由 vite 支援的單元測試框架。它提供了一種為 React、Vue、Svelte 等應用程式編寫單元測試、元件測試和端到端測試的簡單方法。如果您使用 React，ViTest 可以透過全面的測試來幫助您確保程式碼的可靠性和品質。 ### 2. **React 測試函式庫** - **文件：** [React 測試庫](https://testing-library.com/docs/react-testing-library/intro/) React 測試庫是 React 應用程式的熱門測試庫。它專注於編寫模擬使用者互動的測試，幫助您確保元件從使用者的角度按照預期執行。該程式庫鼓勵測試 React 元件的最佳實踐。 ### 3. ** Playwright** - **網址：** [Playwright](https://playwright.dev/) Playwright 是一個端對端測試框架，支援多種瀏覽器，包括 Chromium、Firefox 和 WebKit。它為瀏覽器自動化提供了統一的 API，並允許您編寫測試來驗證 Web 應用程式在不同瀏覽器上的功能。 Playwright 是確保跨瀏覽器相容性的強大工具。 這些資源和工具可以幫助您涵蓋測試的各個方面，從單元測試到端到端測試，具體取決於您的專案需求和您正在使用的技術。請務必進一步探索它們，以選擇最適合您要求的一種。 ## 6. 樣式 當談到 Web 開發中的樣式時，有幾種流行的工具和庫可供選擇。以下是三個值得注意的選項： ### 1. **Tailwind CSS** - **網址：** [Tailwind CSS](https://tailwindcss.com/) Tailwind CSS 是一個實用程式優先的 CSS 框架，它提供了一組預先建立的原子 CSS 類別來設計您的 Web 應用程式。它旨在透過在 HTML 中編寫實用程式類別來幫助您快速建立響應式且高度可自訂的設計。 Tailwind CSS 以其靈活性而聞名，對於想要實用程式驅動的樣式設計方法的開發人員來說是一個絕佳的選擇。 ### 2. **樣式元件** - **網址：** [樣式元件](https://styled-components.com/) Styled Components 是一個 CSS-in-JS 函式庫，用於設計 React 元件的樣式。它允許您透過使用標記模板文字定義樣式元件來直接在 JavaScript 檔案中編寫 CSS。這種方法使您能夠將樣式封裝在元件中，從而更輕鬆地管理和維護 CSS。樣式化元件在 React 生態系統中特別受歡迎。 ### 3. ** Emotion** - **文件：** [Emotion](https://emotion.sh/docs/introduction) Emotion 是另一個 CSS-in-JS 函式庫，重點是效能和靈活性。它提供了多種方法來定義樣式並將其應用到 React 元件，包括字串和物件樣式。 Emotion 以其可預測性和適合使用 JavaScript 編寫不同 CSS 樣式而聞名。它提供了一種與框架無關的方法，使其適用於各種 JavaScript 框架。 這些工具中的每一個都有自己的優勢，並且適合不同的用例。 Tailwind CSS 擅長使用實用程式類別進行快速 UI 開發。 Styled Components 和 Emotion 是 React 應用程式中元件級樣式的理想選擇。您的選擇將取決於您的專案要求和個人喜好。 ## 7.UI元件庫 用於在 2023 年建立使用者介面的 UI 元件庫，並將在 2024 年繼續使用。 ### 1. ** Material-UI** - **網址：** [Material-UI](https://mui.com/) Material-UI 是一個受歡迎且維護良好的 React UI 框架。它基於 Google 的 Material Design 指南，並提供廣泛的元件來建立現代且具有視覺吸引力的使用者介面。 ### 2. ** Mantine** - **網址：** [Mantine](https://mantine.dev/) Mantine 是一個現代 React 元件庫，專注於提供高品質的元件和鉤子。它提供了各種 UI 元素和工具來簡化您的開發流程。 ### 3. ** Ant Design** - **網址：** [Ant Design](https://ant.design/) Ant Design 是一個用於建立企業級 React 應用程式的綜合設計系統和元件庫。它以其豐富的元件和強調自然清晰的設計理念而聞名。 ### 4. ** Chakra UI** - **網址：** [Chakra UI](https://chakra-ui.com/) Chakra UI 是在 React 中建立可存取且高度可自訂的使用者介面的熱門選擇。它提供了一組可組合元件和一個樣式道具系統，用於靈活的樣式設定。 ### 5. ** Headless UI（Tailwind CSS 框架）** - **網址：** [Headless UI](https://headlessui.com/) Headless UI 是一組完全可存取、無樣式的 UI 元件，旨在與 Tailwind CSS 無縫協作。它允許您建立可存取的介面，同時保留對樣式的完全控制。 ### 6. **DaisyUI（Tailwind CSS 框架）** - **網址：** [DaisyUI](https://daisyui.com/) DaisyUI 是 Tailwind CSS 的擴展，它帶來了額外的元件和實用程式來增強您的開發體驗。如果您已經在使用 Tailwind CSS，它會特別有用。 ### 7.**Shadcn UI（Tailwind CSS 框架）** - **網址：** [Shadcn UI](https://ui.shadcn.com/) Shadcn UI 是另一個基於 Tailwind CSS 的 UI 元件庫，它提供了一系列元件和實用程序，用於快速有效地建立 Web 應用程式。 這些程式庫提供了各種元件和工具，可協助您在 React 應用程式中建立響應靈敏且具有視覺吸引力的使用者介面。庫的選擇取決於您的專案的要求和您的個人喜好。 ## 8. 動畫 如果您對 React 動畫庫感興趣，兩個流行的選擇是： 1. **React Spring** - 您可以在 React Spring 的官方網站 [react-spring.dev](https://www.react-spring.dev/) 上找到有關 React Spring 的更多資訊和文件。 React Spring 是一個功能豐富的動畫庫，它利用基於實體的動畫在 React 中建立流暢的互動式動畫。 2. **Framer Motion** - 另一個出色的選擇是 Framer Motion，您可以在 [framer.com/motion](https://www.framer.com/motion/) 進一步探索它。 Framer Motion 因是專為 React 設計的功能豐富的動畫庫而聞名。它提供了靈活性，非常適合在 React 應用程式中建立流暢的動畫。 這兩個庫都有其優點，它們之間的選擇可能取決於您的特定專案要求和個人喜好。 React Spring 提供基於實體的動畫和豐富的功能集，而 Framer Motion 以其易用性和靈活性而聞名。最好對兩者進行探索，看看哪一個更符合您的動畫需求。 請隨意參考各自的網站以獲取詳細的文件和範例，以便做出明智的選擇。 ## 9. 資料視覺化 當涉及 React 中的資料視覺化時，有幾個函式庫可以幫助您建立互動式且資訊豐富的圖表和圖形。以下是三個流行的選項： 1. **Victory** - 您可以在 [formidable.com/open-source/victory/docs](https://formidable.com/open-source/victory/docs) 中瀏覽 Victory 的文件 Victory 是一個強大的 React 資料視覺化函式庫，提供廣泛的圖表類型和自訂選項。它旨在輕鬆建立具有視覺吸引力的互動式資料視覺化。 2. **React Chartjs 2** - 造訪 [react-chartjs-2.js.org](https://react-chartjs-2.js.org/) 以了解更多資訊。 React Chartjs 2 是 Chart.js（一個流行的 JavaScript 圖表庫）的 React 包裝器。它提供了一種將 Chart.js 整合到 React 應用程式中的簡單方法，可讓您使用 Chart.js 的底層功能建立各種圖表和圖形。 3. **Recharts** - 有關Recharts的詳細訊息，您可以參考[recharts.org/en-US/](https://recharts.org/en-US/)。 Recharts 是一個使用 React 建立的可組合圖表庫。它提供了一個簡單而靈活的 API 來建立各種類型的圖表，非常適合將資料視覺化加入到您的 React 專案中。 每個庫都有自己的一組功能和優點，因此選擇將取決於您的特定專案要求和個人喜好。您可以存取他們各自的文件以了解更多資訊並開始使用 React 中的資料視覺化。 ## 10. 表 如果您正在尋找有關 React 中表格的訊息，可以在 [tanstack.com/table/v8](https://tanstack.com/table/v8) 上瀏覽版本 8 的 TanStack Table 文件。 TanStack Table 是一個無頭 UI 庫，可讓您在 TS/JS、React、Vue、Solid 和 Svelte 等各種框架中建立強大的表格和資料網格，同時保留對標記和樣式的控制。該文件將為您提供有關如何使用 TanStack Table 和配置表的詳細訊息，包括選項和 API 屬性。 無論您使用 TypeScript 還是 JavaScript 以及使用受支援的框架之一，TanStack Table v8 都提供了一種靈活的解決方案，用於在 Web 應用程式中建立表格和資料網格。該文件將引導您完成整個過程，並幫助您充分利用該庫來滿足您的特定需求。 ## 11. 國際化（i18n） 當涉及 React 應用程式中的國際化 (i18n) 時，有多個程式庫和工具可協助您管理翻譯和在地化。 React 中 i18n 的兩個突出選項是： 1. **i18next** - 您可以在 [react.i18next.com](https://react.i18next.com/) 找到使用 i18next 的文件和資源。 i18next 是一個流行的 JavaScript 國際化框架，包括 React。它提供了處理翻譯、格式化等的全面解決方案。 2. **React-Intl (Format.js)** - React-Intl 的文件是 Format.js 專案的一部分，可以在 [formatjs.io/docs/react-intl](https://formatjs.io/docs/react-intl)。 React-Intl 是一個函式庫，提供用於在 React 應用程式中格式化和處理國際化文字的工具。 這兩個函式庫都有活躍的社群、豐富的文件，並且在 React 生態系統中廣泛使用。您可以探索這些資源，以確定哪一個最適合您的 React 應用程式國際化需求。 ## 12. 開發工具 DevTools 對於偵錯和改進 Web 應用程式的開發工作流程至關重要。以下是一些流行的 React 開發工具和相關函式庫： 1. **React 開發者工具** - 該工具可作為 Chrome 擴充功能使用。它允許您檢查 React 元件層次結構、查看元件的狀態和 props，甚至更改元件的狀態以進行測試。您可以從 [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 安裝它。 2. **Redux DevTools** - Redux DevTools 是另一個 Chrome 擴展，可以增強 Redux 開發工作流程。它提供了對 Redux 儲存的深入了解，讓您可以檢查操作和狀態變更、倒回和重播操作等。您可以從 [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) 安裝它。 3. **Testing Playground** - Test Playground 是一個 Chrome 擴展，可以簡化 React 元件的測試。它提供了一個用於試驗元件及其道具的視覺環境。您可以在 [Chrome 線上應用程式商店](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano) 上找到它。 4. **React Hook Form DevTools** - 對於使用 React Hook Form 的用戶，可以使用 DevTools 來協助偵錯表單行為。您可以在 [React Hook Form 網站](https://www.react-hook-form.com/dev-tools/) 上存取它們。 5. **TanStack Query DevTools** - TanStack Query 是 React 的資料擷取庫，它提供用於偵錯和檢查查詢和突變的 DevTools。您可以參考[官方文件](https://tanstack.com/query/v4/docs/react/devtools)以了解更多資訊。 這些開發工具可協助開發人員簡化開發和偵錯流程，從而更輕鬆地建置和維護 Web 應用程式。 ## 13. 文件 文件對於任何軟體專案都至關重要。以下是用於建立文件的兩種流行工具： 1. **Docusaurus** - Docusaurus 是一種廣泛採用的用於建立文件網站的工具。它是一個開源框架，為建立和維護文件提供了乾淨且用戶友好的介面。 Docusaurus 具有高度可自訂性，許多專案和組織都使用它來建立文件網站。您可以在 Docusaurus 的[官方網站](https://docusaurus.io/)上了解更多並開始使用 Docusaurus。 2. **Nextra** - Nextra 是建立文件網站的另一種選擇。雖然 Nextra 可能不像 Docusaurus 那樣出名，但它提供了一種現代且簡約的方法來建立文件。它的設計是輕量級且用戶友好的，對於那些喜歡簡單乾淨的文件風格的人來說是一個不錯的選擇。您可以在 Nextra 的[官方網站](https://nextra.site/) 上探索有關 Nextra 的更多資訊。 Docusaurus 和 Nextra 都有各自的優勢，它們之間的選擇取決於您的特定需求和偏好。您可以存取他們各自的網站以了解更多資訊、存取文件並確定哪一個最適合您的專案。 ## 14. 元件開發環境 元件開發環境 (Dev Env) 對於有效建置和測試 UI 元件至關重要。用於為 UI 元件建立開發環境的廣泛使用的工具之一是 [Storybook](https://storybook.js.org/)。 Storybook 是業界標準的元件瀏覽器，可讓開發人員獨立開發 UI 元件。當處理設計系統或元件庫時，它特別有價值。以下是 Storybook 如何協助建立 UI 元件的開發環境： 1. **目錄 UI 元件**：Storybook 提供了用於編目和顯示 UI 元件的專用環境。開發人員可以單獨查看每個元件的外觀和行為。 2. **將元件變體儲存為故事**：在 Storybook 中，開發人員可以為每個元件建立「故事」。這些故事代表元件的不同變體或用例。這是記錄和展示元件行為的絕佳方式。 3. **開發人員體驗工具**：Storybook 提供了一系列開發人員體驗工具，包括熱模組重新加載，以簡化元件開發流程。 透過使用 Storybook，您可以有效率地開發、測試和記錄 UI 元件。它在設計系統時特別有用，因為它允許您專注於單個元件及其互動。您可以在 Storybook 的[官方網站](https://storybook.js.org/) 上了解更多並開始使用。 它是一種多功能工具，可以根據專案的特定需求進行定制，使其成為元件開發環境的寶貴資產。 ## 15. 類型檢查 TypeScript 是 Microsoft 開發的一種程式語言，透過新增靜態類型來擴充 JavaScript。它提供全面的類型檢查和強大的類型系統，以捕獲開發過程中的錯誤並提高程式碼品質。以下是 TypeScript 中類型檢查的一些關鍵方面： 1. **靜態型別系統**：TypeScript 引進了靜態型別系統，這表示在編譯時檢查類型。這有助於在執行程式碼之前辨識與類型相關的錯誤。 2. **型別註解**：開發者可以使用型別註解來指定變數、函數參數和傳回值的型別。這提供了清晰度並確保變數的使用一致。 3. **推斷**：TypeScript 可以根據指派給變數的值推斷類型。這減少了對顯式類型註解的需求並提高了程式碼簡潔性。 4. **類型聲明**：TypeScript支援自訂類型的聲明，例如介面和枚舉，以定義資料結構的形狀並增強程式碼的可維護性。 5. **類型相容性**：TypeScript 有一個檢查類型相容性的系統，這確保你不能將不相容的類型指派給變數。這有助於防止常見的執行時錯誤。 6. **對 JavaScript 文件進行類型檢查**：TypeScript 還可以檢查 JavaScript 文件，讓您可以逐步將 TypeScript 引入現有的 JavaScript 專案中。 透過將 TypeScript 合併到您的開發工作流程中，您可以從這些類型檢查功能中受益，從而儘早發現錯誤、增強程式碼可維護性並提高程式碼的整體品質。您可以在[官方 TypeScript 網站](https://www.typescriptlang.org/) 上了解有關 TypeScript 及其類型檢查功能的更多資訊。 ## 16. 行動應用程式 如果您想要開發行動應用程式，特別是 Android 和 iOS 的行動應用程式，React Native 是一個值得考慮的有價值的框架。 React Native 是一個開源框架，可讓您使用 JavaScript 和 React 建立行動應用程式。這就是 React Native 成為行動應用程式開發的熱門選擇的原因： 1. **跨平台開發**：React Native 使您能夠使用單一程式碼庫開發適用於 Android 和 iOS 的應用程式。這種方法可以顯著減少開發時間和工作量。 2. **可重複使用元件**：您可以建立跨平台工作的可重複使用 UI 元件，幫助您在應用程式中保持一致的外觀和感覺。 3. **熱重載**：React Native 支援熱重載，這意味著您可以立即看到程式碼變更的結果，而無需重新編譯整個應用程式。這加快了開發速度。 4. **大型社區**：React Native 擁有龐大且活躍的社區，這意味著您可以找到豐富的資源、庫以及常見問題的解決方案。 5. **本機效能**：React Native 應用程式具有接近本機的效能，因為它們使用本機元件進行渲染。這確保了流暢的用戶體驗。 6. **成本效益**：透過在 Android 和 iOS 之間共用程式碼庫，您可以降低開發成本。 要開始使用 React Native，您可以造訪官方網站 [React Native](https://reactnative.dev/) 以取得全面的文件、教學和資源。無論您是初學者還是經驗豐富的開發人員，React Native 都是行動應用程式開發的強大選擇。 ## 17. 為 React 開發人員提供的很棒的函式庫 很高興看到您對 React 開發人員的優秀庫感興趣。以下是一些非常有用的程式庫，可用於 React 開發中的各種功能： ### 1. **用於拖放功能的 DND 套件** - 網址：[DND Kit](https://dndkit.com/) DND Kit 是一個強大的庫，用於為 React 應用程式加入拖放功能。它提供了一種簡單且可自訂的方法來實現拖放功能，以便在使用者介面中重新排序、重新排列或組織元素。 ### 2. **React Dropzone 用於檔案上傳** - 網址：[React Dropzone](https://react-dropzone.js.org/) React Dropzone 是一個流行的程式庫，用於在 React 應用程式中處理檔案上傳。它提供了一個用戶友好且高度可自訂的 dropzone 元件，簡化了上傳文件的過程，使其成為任何需要文件上傳的專案的有價值的補充。 ### 3. **Firebase 用於身份驗證** - 網址：[Firebase](https://firebase.google.com/) Firebase 由 Google 開發，是一個用於建立 Web 和行動應用程式的綜合平台。它提供廣泛的服務，包括用戶身份驗證。透過 Firebase 驗證，您可以輕鬆地將安全的使用者註冊和登入功能新增到您的 React 應用程式中。 ### 4. **Supabase 用於身份驗證** - 網址：[Supabase](https://supabase.com/) Supabase 是 Firebase 的開源替代品，提供一套用於建立應用程式的服務，包括身份驗證。它提供了可以無縫整合到您的 React 專案中的用戶身份驗證功能。 這些程式庫涵蓋了 React 開發的基本面，包括拖放功能、檔案上傳和使用者身份驗證。根據您的專案要求，您可以利用這些程式庫來增強您的 React 應用程式。 **免責聲明：**“本文是在人工智慧的幫助下建立的”
開源專案是創新、協作和創造力的遊樂場。它是來自世界各地的開發人員聚集在一起分享他們的想法、技能和熱情的中心。 在本文中，我精心挑選了 24 個涵蓋廣泛興趣和技術的開源專案。 從尖端的人工智慧框架到漂亮的生產力工具以及介於兩者之間的一切，每個開發人員都能找到適合自己的東西。 我提供了直接連結、描述和視覺效果，以便您可以立即獲得每個工具的初步印象。 原文出處：https://dev.to/madza/24-open-source-projects-for-developers-in-2023-391l --- ## 1\. [ esProc SPL](https://github.com/SPLWare/esProc)（贊助） 集算器SPL是一種基於腳本的資料操作語言，與SQL資料庫集成，支援進階分析和高效能並行處理。 它適合處理大型資料集，與各種工具集成，提供資料視覺化，並跨多個平台工作。一些主要功能包括： **💪 強大的資料處理能力：** 集算器SPL是一種腳本語言，具有豐富的函數庫和強大的語法。 **✨ 預存程序等效項：** 它允許透過 JDBC 介面執行 SPL 腳本。 **📈 多功能視覺化：** 它提供了成熟的報告工具，具有廣泛的視覺化配置，用於建立各種類型的報告。 **⚡ 自動化工作流程：** 它支援軟體工作流程的自動化，包括用於程式碼建置、測試和部署的 CI/CD 流程。 **🔥 相比SQL更具彈性：** 與SQL語法不同，集算器SPL允許將資料處理程式碼寫在多條語句中。  ⭐ 支援他們的 GitHub 倉庫：[https://github.com/SPLWare/esProc](https://github.com/SPLWare/esProc) ## 2\. [Hoppscotch](https://github.com/hoppscotch/hoppscotch) 一種多功能開源 API 開發和測試工具，提供使用者友善的介面，用於發出 HTTP 請求來測試 API 並與 API 互動。 它簡化了製作和發送請求的過程，使其成為使用 API 的開發人員和測試人員的必備工具。  ## 3\. [Supabase](https://github.com/supabase/supabase) Firebase 的開源替代方案，為開發人員提供了一組用於建立可擴展的即時應用程式的工具。 它提供了強大的後端即服務 (BaaS) 平台，具有身份驗證、資料庫管理和即時功能等功能，使其成為建立現代 Web 和行動應用程式的強大選擇。  ## 4\. [Supertokens](https://github.com/supertokens/supertokens-core) 一種開源身份驗證解決方案，提供強大的安全功能和輕鬆集成，以增強 Web 和行動應用程式中的使用者身份驗證和授權。 它為開發人員提供了一個全面的工具包，用於保護用戶資料並確保無縫登入體驗。  ## 5\. [Git](https://github.com/git/git) Git 版本控制系統的官方開源程式庫，最初由 Linus Torvalds 建立。 Git 廣泛用於追蹤原始程式碼的更改，並透過提供強大的分支和合併功能來實現協作軟體開發。 ## 6\. [VS Code](https://github.com/microsoft/vscode) 由 Microsoft 開發的免費開源程式碼編輯器。 它提供了高度可自訂且高效的程式設計環境，具有 IntelliSense、除錯支援和龐大的擴充庫等功能，可增強您的開發工作流程。  ## 7\. [OhMyZsh](https://github.com/ohmyzsh/ohmyzsh) 一個流行且高度可自訂的框架，用於在類 Unix 作業系統中管理 Zsh 配置。 它簡化了 shell 自訂，提供了大量插件和主題來增強您的命令列體驗。  ## 8\. [Bun](https://github.com/oven-sh/bun) 一個開源 JavaScript 工具包，旨在簡化和優化為 Web 應用程式捆綁 JavaScript 程式碼的過程。 它提供了一種現代且快速的方法來建立捆綁包，從而增強了使用 JavaScript 專案時的效能和開發人員體驗。  ## 9\. [SWR](https://github.com/vercel/swr) SWR（Stale-While-Revalidate）是一個用於在 React 應用程式中取得資料的 JavaScript 函式庫。 它可以在客戶端和伺服器之間實現高效、自動的資料同步，提供無縫的即時更新，同時確保資料保持新鮮和最新。  ## 10\. [Prisma](https://github.com/prisma/prisma) 用於現代應用程式開發的開源資料庫工具包，透過強大的查詢產生器和類型安全的 ORM（物件關聯映射）層簡化資料庫存取和操作。 它允許開發人員使用聲明性和直觀的方法管理資料庫並與之交互，從而使資料庫操作在各種資料庫系統中無縫且安全。  ## 11\. [ElasticSearch](https://github.com/elastic/elasticsearch) 由 Elastic 開發的強大且可擴展的開源搜尋和分析引擎。 它旨在幫助用戶快速有效地搜尋、分析和視覺化大量資料，使其成為從全文搜尋引擎到日誌分析等應用程式的熱門選擇。  ## 12\. [Hasura](https://github.com/hasura/graphql-engine) 一款功能強大的開源工具，可簡化應用程式的 GraphQL API 開發。 借助 Hasura，您可以輕鬆建立、管理和保護 GraphQL API，從而更輕鬆地與資料來源互動並建立現代的資料驅動應用程式。  ## 13\. [BioDrop](https://github.com/EddieHubCommunity/BioDrop) 透過單一連結與您的受眾建立聯繫。在一處展示您建立的內容和專案。 讓人們更容易找到、關注和訂閱。  ## 14\. [Powertoys](https://github.com/microsoft/PowerToys) 適用於 Windows 的開源實用程序，可提高工作效率和自訂功能。 它提供了一系列方便的工具和實用程序，包括快速啟動器、文件預覽和視窗管理等功能，旨在簡化您的 Windows 體驗。  ## 15\. [Strapi](https://github.com/strapi/strapi) 開源無頭內容管理系統 (CMS)，使開發人員能夠快速建立強大且可自訂的 API。 它使團隊能夠輕鬆建立和管理內容豐富的網站和應用程式，為各種專案提供靈活性和可擴展性。  ## 16\. [Plausible](https://github.com/plausible/analytics) 一種開源網路分析工具，旨在為網站所有者提供對其網站效能的簡單且注重隱私的見解。 它提供用戶友好、輕量級的跟踪，且不會損害存取者的隱私，使其成為那些重視資料分析而無需侵入性跟踪方法的人的理想選擇。  ## 17\. [Astro](https://github.com/withastro/astro) 現代靜態網站產生器，透過僅傳送頁面所需的 JavaScript 來提供閃電般的效能，從而實現近乎即時的載入時間。 它將傳統伺服器渲染框架的靈活性與靜態網站產生器的速度相結合，使其成為建立高效動態網站的絕佳選擇。  ## 18\. [Remix](https://github.com/remix-run/remix) 用於建立現代 JavaScript 應用程式的 Web 框架，注重速度和開發人員體驗。 它使開發人員能夠透過無縫組合伺服器渲染和客戶端渲染的內容來建立高效能的 Web 應用程式。  ## 19\. [Tensorflow](https://github.com/tensorflow/tensorflow) 由Google開發的開源機器學習框架。 它為建立和部署機器學習模型提供了靈活且全面的生態系統，使其成為人工智慧領域研究人員和開發人員的熱門選擇。  ## 20\. [Flutter](https://github.com/flutter/flutter) 由 Google 建立的開源 UI 軟體開發工具包，以其從單一程式碼庫建立適用於行動、Web 和桌面的本機編譯應用程式的能力而聞名。 它使開發人員能夠使用單一程式語言 Dart 跨多個平台建立美觀、快速且高度可自訂的使用者介面。  ## 21\. [Kubernetes](https://github.com/kubernetes/kubernetes) 一個開源容器編排平台，可自動執行容器化應用程式的部署、擴充和管理。 它為編排容器提供了強大而靈活的基礎架構，使在雲端原生環境中大規模管理複雜的分散式系統變得更加容易。 ## 22\. [Docker](https://www.docker.com/community/open-source/) 一個開源工具，可簡化多容器 Docker 應用程式的管理。 它允許開發人員使用簡單的 YAML 檔案定義和執行多容器應用程式，從而更輕鬆地編排和部署複雜的服務。  ## 23\. [Chromium](https://github.com/chromium/chromium) Google 的一個開源瀏覽器專案，旨在為所有使用者建立更安全、更快、更穩定的網路體驗方式。 它是開發人員在網路瀏覽技術領域做出貢獻和創新的平台。  ## 24\. [Linux 核心](https://github.com/torvalds/linux) 由 Linus Torvalds 和全球貢獻者社群開發的開源、類別 Unix 作業系統核心。 它作為各種基於 Linux 的作業系統的核心元件，提供硬體互動和系統管理的基本功能。  --- 以上，簡單分享！
國外一名資深開發者分享工作心得與技巧，與大家分享原文！ 原文出處：https://dev.to/wraith/my-8-tips-for-a-better-life-as-a-developer-1hfg --- 我擔任軟體開發人員已經有 8 年多了，從我自己的經驗以及從一些非常有才華的人那裡學到了很多東西。在這篇文章中，我想分享一些真正讓我的體驗變得更好、更愉快的事情。 ## 1. 找一個您喜歡工作的地方  您的環境對您的生活貢獻很大。它可以增加或減輕壓力，幫助您集中注意力或分散注意力，讓您感到安全或不安全等等。因為它在我們每個人的生活中都扮演著不可或缺的角色，所以我認為從這裡開始是合適的。 無論您是在辦公室還是遠端工作，您很可能可以採取一些措施來找到一個讓您感覺「合適」的地方。我說「對」是因為這裡每個人都會有所不同。有些人想要感到舒適和「賓至如歸」。其他人想要一個不太舒適的區域，而是真正讓他們「進入狀態」並集中註意力的區域。 多年來，我嘗試了很多不同的地點，只是為了看看什麼對我有用。我坐在陽台上，享受早晨涼爽的空氣，喝著一杯熱咖啡。我確實坐在桌子底下，身上蓋著毯子。我坐在壁櫥、角落、咖啡店、餐廳、酒吧、汽車、公園、餐桌和樓梯井裡。透過所有這些實驗，我已經能夠找到在我需要時為我提供所需的地方。如果我需要集中註意力，我就需要獨處。某處有一扇可以關閉的門，但沒有窗戶讓我注意到有人走過。當我太舒適時，就像依偎在柔軟的沙發上的毯子裡時，我的工作效果就不太好。如果我需要改變節奏，或者只是需要和人們在一起，我發現我真的很喜歡坐在不太擁擠的小酒吧或餐廳裡。我可以在某個地方點一杯飲料和一份開胃菜然後工作，但周圍仍然有幾個人。 所以我鼓勵你嘗試幾個地方。找出什麼對你有用，同樣重要的是，找出什麼對你沒用。如果你找不到地方，你總是可以花一點力氣去打造你想要的地方！ 「正確」對你來說意味著什麼？ ## 2. 投資硬體  作為軟體開發人員，我們使用的硬體數量非常多。可以說，我們使用鍵盤和辦公椅之類的東西比生活中任何其他物品都多。當然，我們可以使用任何舊鍵盤來完成工作，我們可以坐在任何椅子上。但我發現，對「更好」的硬體進行一點投資會對我的工作體驗產生很大的影響。 ### 椅子 如果您在工作時坐著，並且您只想投資一件東西，那麼它絕對應該是您的椅子。一張既提供舒適又提供支撐的椅子確實可以大有幫助。從您可以坐多久並集中註意力而不會感到不舒服，到日常生活中背部、頸部和肩膀的感覺，您的椅子對您的整體健康和福祉有很大影響。因此，一定要找到一款好的產品，而不要只滿足於會導致不良姿勢的產品。 我個人使用 [Secretlab Titan Evo（蝙蝠俠主題）](https://secretlabchairs.ca/products/titan-evo-2022-series?sku=R22PU-Batman)，幾年來我對它非常滿意。與許多高端桌椅相比，價格還不錯。 ### 鍵盤 僅次於椅子（但相差不多）的是鍵盤。輕鬆地成為我們每天工作中互動最多的工具。那裡也有很多選擇，因此無論您的個人喜好如何，很可能有一些東西可以滿足您的需求。 每個人選擇合適的鍵盤都有很大不同。有些人喜歡低調的鑰匙而不是機械鑰匙。有些人需要整合 USB 連接埠。成本、人體工學、有線或無線、可自訂的按鍵和開關、背光、可配置的 LED、支援配置按鍵佈局、高度和大小、按鍵數量，這樣的例子不勝枚舉。尋找適合您的鍵盤無疑是一段旅程，但我強烈建議您繼續下去。當然，我們可以使用任何鍵盤來完成我們的工作......但我保證，如果您嘗試一下，找到「正確的」鍵盤將使您作為開發人員的一天和體驗更加愉快。 我使用 [Moonlander Mark 1](https://www.zsa.io/moonlander/)，絕對💙它！分離式設計確實幫助我不再那麼無精打采，也幫助消除了我長期以來的肩膀和手腕疼痛。再加上那些櫻桃棕色的開關聽起來很漂亮😍！ ### 滑鼠 談論鍵盤就不能不談論它們的助手——滑鼠。就像鍵盤一樣，市面上有許多不同類型的鍵盤，每個人都會有自己的偏好。幸運的是，即使是半像樣的滑鼠也有相當低的價格，因此嘗試一些滑鼠來找到適合您的滑鼠相對容易。但與此處的所有其他專案一樣，投入一點時間和金錢即可對您的體驗產生積極影響。 我的老鼠是 [ZLOT 垂直遊戲滑鼠](https://www.amazon.com/gp/product/B07T3PFWCB?th=1)。它是一款較輕（重量）的滑鼠，但具有良好的人體工學感覺和響應能力，我已經喜歡了很長一段時間了。 ### 螢幕 這絕對是一個可選專案，但我發現它讓我的工作更加愉快。並非每個人都需要外接顯示器。有些人實際上更喜歡直接使用筆記型電腦工作。但如果您確實喜歡使用外部顯示器，這是一項可以產生巨大影響的投資。 遺憾的是，由於多台 4k 顯示器在 Mac 上工作出現問題，我放棄了多顯示器設置，現在使用 [Sceptre 35" 曲面顯示器](https://www.sceptre.com/Monitors/2K-4K-Series/C355W-3440UN-35-Curved-Monitor-product1176category12category98.html)。它有很多空間，所以我仍然可以在一個螢幕上打開大量視窗。 ### 耳機 耳機也是可選的（有些人可能會反對這一點😝），但它們的好處怎麼強調都不為過。從減少干擾到幫助您集中註意力，一副好的耳機可以大有幫助。就像我列出的大多數專案一樣，每個人的偏好都會有所不同。但是，投入一點時間和金錢來尋找一雙適合您的好鞋，確實可以將您的遊戲提升到一個新的水平。我認識的許多人都尋求良好的降噪效果，而且它們必須輕盈舒適，這樣才能一次佩戴幾個小時。 我個人喜歡使用 Beats。我曾經使用[Studio3](https://www.bestbuy.ca/en-ca/product/beats-by-dr-dre-studio3-over-ear-noise-cancelling-bluetooth-headphones-black/11534527 )但是當我必須開始戴眼鏡時，我不喜歡這些耳機給我的鏡框帶來的壓力，所以我改用了[Beats Fit Pro](https://www.beatsbydre.com/earbuds/beats-fit-pro?sku=MK2F3) 並且對它們非常滿意。我已經連續戴了 8 個小時，效果非常好。它們輕巧、舒適、音質好，並且在我慢跑和運動時表現良好且穩定。 您使用什麼硬體？您夢想的硬體是什麼？ ## 3. 找到您*喜歡*使用的工具  除了硬體之外，作為開發人員，我們還使用許多軟體工具來完成我們的工作。有些我們別無選擇，但也有很多我們可以選擇，找到您真正喜歡使用的工具確實可以讓您的日常體驗變得更好。即使只是擁有一個可以配置為您喜歡的外觀的工具也可以產生積極的影響。 我在這裡想強調的不是找到每個人都使用的工具，因為他們可以做各種各樣的事情。更多的是尋找您真正「喜歡」和「期待」使用的工具來完成工作。即使它們不能完成其他工具可以完成的所有奇特的事情，如果您確實希望使用其他工具，那就使用它！擁有我們積極喜歡的工具確實會為我們的生活增添很多積極性。 多年來，類似的工具有很多，但這裡有一些工具為我的日常生活帶來了很多樂趣： - Giphy Desktop app - 用 gif 回覆取代無聊的文字，讓 Slack 訊息變得生動起來。 - Raycast - 這已經取代了我 Mac 上的 Spotlight。透過專業版，我可以存取 ChatGPT 4...因此，只需一個快速鍵盤快捷鍵，我就能輕鬆掌握 AI。對我來說遊戲規則改變者！ - Obsidian - 雖然這已經是一個流行的筆記應用程式，但我花了一些時間編寫了一些腳本來為我自動化工作，它完全改變了我記下所有筆記並跟踪我需要做的所有事情的方式。 - Arc browser - Arc 花了整整 1 天的時間才成為我的主要瀏覽器。現在，當我測試瀏覽器對我正在建立的某些功能的支援時，我只使用其他瀏覽器（在我的桌面上）。 - Habitical - 獲得徽章、成就和一般遊戲化讓我非常有動力，所以這個待辦事項應用程式讓我管理和執行任務變得更加有趣！ 有哪些工具可以為您的日常開發生活帶來樂趣？ ## 4. 設定目標  我知道這聽起來很明顯，而且我相信我們都從無數其他來源聽到這一點。但您可能會驚訝地發現有多少人沒有為自己設定目標。不相信我？向你的任意 2 到 3 個鄰居詢問他們目前正在努力實現什麼目標。當我問這個問題時，經常得到的只是聳聳肩，然後回答「沒什麼」。 僅僅設定目標也是不夠的。你也必須定期考慮它們。有些方法建議將它們寫下來並放在鏡子上或您經常看到它們的地方。這個方法對我個人來說沒有效果，但也許對你有用？對我來說有效的方法是每天早上開始工作前坐下來15 分鐘，並重點思考我的目標、我所有的待辦事項以及日曆上的所有事情（是的，我實際上在日曆上留出15分鐘的時間）這個，並強迫自己堅持這個時間）。在這段時間裡，我思考我的目標，並找出我今天可以做的一件小事，讓我離實現每個目標更近一步。 例如，如果我的目標是在家人來過感恩節之前清理車庫，我會想，「我今天可以做哪一件小事來實現這個目標？」。有時答案特別小…「掃到工作台下面」。其他時候我可能會更有動力，或者我有更多的可用時間，這可能是更大的事情。無論如何，請花一些時間考慮您今天可以採取的一項行動來實現該目標。 當我這樣做時，我的大腦中會發生一些事情。我發現自己感覺更有成就感和更樂觀。當然，完成目標可能是一條漫長的道路（如果它是一個大目標），但是知道我離我想要完成的事情更近了，這對我的日常生活產生了積極的影響，並讓我能夠完成的事情比我想像的還要多。 無論大小，給自己設定目標。然後定期思考它們，並採取許多微小的行動，以朝著前進邁出一步。我保證這會為您的生活帶來美好的事物！ 現在您正在努力實現哪些目標？ ## 5. 保持好奇心並了解*為什麼*  很多人對編碼專案中的完成方式感到沮喪或評判。我肯定去過那裡！ - “為什麼有人選擇這項技術？！對於這個用例來說，其他技術要好得多...” - “為什麼有人會寫這樣的程式碼？！” - “如果我們不做 X 而只是做…，事情會好得多” 這些聽起來很熟悉嗎？ 儘管事情有時會令人沮喪，但在軟體開發中，做出的每個決定背後幾乎總是有一個「原因」。這是最好的選擇嗎？也許不是……但做出這樣的選擇還是有原因的。 我曾經對事情的現狀感到沮喪，然後在嘗試解決問題時感到沮喪，然後在遇到障礙時感到沮喪。但最終，事情突然發生了，我沒有感到沮喪，而是開始尋找這些事情發生的原因。背後的*原因*是什麼。當我養成「尋找原因」而不是「想知道為什麼不」的習慣時，我的好奇心變得更強。我發現我正在尋找更多的訊息，更徹底地學習和理解事物，更多地同情與我一起工作的人，最終，沮喪的感覺減少了很多。 現在，我的經歷更加積極了。無論我是重構一段複雜的程式碼，試圖找到解決惱人問題的方法，還是為新工作學習全新的程式碼庫，我實際上更喜歡這個過程，因為我只是好奇並想知道「為什麼」。 最近一次讓您真正感到沮喪的編碼*事情*是什麼？您知道*為什麼*會是這樣嗎？ ## 6. 為重點工作劃出日曆  這說起來容易做起來難，具體取決於您的工作地點，但它會對您的開發人員生活產生驚人的影響！ 您是否曾經在該區域中，只是編寫程式碼來建立該新功能，然後「*叮！*」有人向您發送了一條緊急的 Slack 訊息？或是有人拍拍你的肩膀問你問題？您解決了乾擾問題，然後返回螢幕，然後您就失去了所有註意力？如果沒有……我願意賭很多錢，你會在職業生涯的某個時刻這麼做。 「在區域中」或進入「心流」的概念是一個已經被研究和寫了很多的主題。我強烈建議您查看一些有關該主題的文章和書籍，因為這是一個非常有趣的主題（至少對我來說是😃）！其中許多研究都表明，處於心流狀態是多麼有益，而且在中斷後可能需要 20 分鐘以上才能恢復到那種精神狀態！因此，找到讓自己進入這種心態並保持這種狀態的方法非常重要！ 我發現讓自己進入這種狀態的最佳方法之一就是在日曆上劃出大量時間專門用於「專注工作」。一開始這可能是一個挑戰，讓人們在嘗試聯繫之前檢查您的日曆或 Slack 狀態，並幫助每個人了解您將在焦點時間結束後立即回覆他們。但最終人們會明白過來，並且回報是巨大的！別忘了在這段時間關閉通知！ 不過這裡有一些提示...... - 接受有時會出現緊急事務並需要更高優先順序的事實。這就是生活，我們只能隨波逐流……但這不該成為「常態」。 - 拍攝 2-3 小時的片段。少於這個數量會讓人覺得不夠，但超過這個數量，人們就會被迫更頻繁地打斷你。請記住，其他人也有重要、緊急的事務，在當今的工作環境下，讓他們等待半天以上才能獲得地址確實不公平或不合理。 - 在你最有生產力的時間安排這些時間段。對我來說，早上 6 點到 10:30 左右我的工作效率最高。所以我通常會嘗試將我的專注時間安排在這些時間裡。 您發現一天中的什麼時段您的工作效率最高？ ## 7. 讓 PR 小一點  我喜歡這個，並且在過去一年左右的時間裡它已經成為我的首要任務。 事實證明，保持 Pull 請求（或 GitLab 人員的合併請求）較小有很多積極的好處。發布的錯誤更少，我們審查程式碼的時間更少，功能的推出速度更快，僅舉幾例。所有這些不僅使我們的產品變得更好，而且我發現它也極大地改善了我作為開發人員的體驗！ 透過專注於較小的變化，我發現我可以更徹底地思考問題，考慮到在較大變化的混亂中可能被忽視的用例。我能夠更快地將變更納入審查，我的團隊成員能夠更快地審查我的程式碼，因為我只佔用了他們5 分鐘而不是2 小時的時間，並且在審查期間，我收到的程式碼要少得多變更請求。因此，更好的程式碼將會出現，我可以繼續花更多的時間來建立新的東西，而不是必須解決一堆被遺漏的錯誤。 另一方面，審查小型 PR|MR 比大型 PR|MR 更令人愉悅。您是否曾經需要審查某人的 PR|MR，其中包含數千個更改、跨越 20 多個檔案以及應用程式的多個區域？當你這樣做時，你的第一個反應是什麼？您是否對參與並開始審核感到過於興奮？或者，也許您感到“呃”，於是推遲了會議，因為距離下一次會議只有 30 分鐘，而您可以在這段時間內完成其他事情？ 當審查大型 PR|MR 時，通常會失去很多細節（或至少受到較少的關注），最終，大多數人會達到「審查盲目性」或「審查疲勞」的地步，事情開始被忽視，或者審稿人必須離開一段時間，稍後再回來。這一切都會導致審核過程花費更長的時間、效率更低，並導致提交更多的變更請求。更不用說所有團隊成員都有的不滿情緒了。 自從我開始將此作為自己的優先事項，並與團隊成員一起努力讓他們也這樣做時，我注意到我在 PR|MR 方面的經驗明顯改善了。我更願意在會議之間跳出一些評論，我不得不要求更少的改變，而且我不會在需要離開並重新振作起來之後感到精疲力盡。就連我的計劃也變得更準確了！ 總而言之，我強烈向大家推薦這個。如果您想了解更多關於這樣做的好處，我建議您查看 [LinearB 部落格](https://linearb.io/blog) 以及 [Dev Interrupted 播客](https://linearb.io/dev-interrupted/podcast).他們談到了一些很棒的觀點，我發現這些觀點確實對工程領導者和團隊有幫助！ 你曾經審查過的最糟糕的公關是什麼？ ## 8. 寫下一切！  我的最後一個建議是我在去年開始做的事情，在閱讀了[如何做智慧筆記](https://www.amazon.ca/How-Take-Smart-Notes-Technique/dp/3982438802)和[把事情做好](https://www.amazon.ca/Getting-Things-Done-Stress-Free-Productivity/dp/0142000280)它對我的生活產生了驚人的影響。 當我學到新東西時，我會把它寫下來。即使只是一小段描述我學到的東西。當出現新任務時，無論大小，我都會把它寫下來。在會議期間，如果分享想法、給予回饋、提出問題，所有這些都會被記錄下來。如果我對某事有一個隨意的想法，或者一個頭腦發熱的想法……你猜對了……它會被寫下來。然後，每當我有幾分鐘空閒時間時，我都會先看筆記，而不是瀏覽社群媒體。我盡可能回顧它們，這強化了我腦海中的訊息，但也幫助我將不同的想法聯繫在一起，這往往會產生一個全新的想法。 透過這樣做，我發現我對事情的記憶更加徹底。如果我不能，我有記錄並且可以將其調出！它使我能夠完成更多的工作文件，而且我甚至在任何給定時間都有 4 或 5 篇部落格文章正在編寫中！遺漏的事情少了很多，而且我能夠完成更多的事情。 我最近開始了一份新工作，透過使用這種方法，人們已經來找我詢問我是如何做到這麼多的！秘密醬汁？全部寫下來並將其加入到系統中。 這對我來說改變了遊戲規則，我只需要鼓勵其他人也這樣做，因為我真的相信這可以使他們的生活受益匪淺！ 你用什麼方法來記住和分享你學到的東西？ ## 結論 在過去 8 年多的軟體開發人員和工程師工作中，我學到了很多。我經歷過好時光和壞時光，並一路走來學到了一些非常有用的人生課程。透過找到我喜歡工作的地方，在我的硬體上投入更多的時間和金錢，找到我「喜歡」使用的工具，設定目標，保持好奇心並專注於“為什麼”，定義專注工作的時間，專注於保持PR 較小，並寫下我能寫下的一切，我可以誠實地說，我的開發者體驗得到了極大的改善。 我非常希望這些技巧中至少一兩個能改善您的體驗。
本文轉自:https://ithelp.ithome.com.tw/articles/10338948 ## 前情提要 資訊大爆炸。 有時候我們瀏覽技術文章，不一定真的是想學深奧的高級技術。 然而劣質低端的文章充斥著，則會降低我們學習的效率、甚至變成噪音與雜訊，干擾我們的思緒。 因此針對某些洗文或是質量很低的作者，我們必須列為思想犯， 否則會降低閱讀質量，平白浪費自己的時間、平台的版面、上網的電力、看到垃圾資訊的副作用等等.... ## 構思來源 如果有個思想審查警衛可以：**去除那些垃圾低端，稱不上技術文章的雜訊。** 以確保未來瀏覽文章的時候，不會再被洗文打擾， 也可以針對不喜歡的主題去封鎖，讓時間與精神更能專注於自己想要學的資訊。 阻止一些垃圾就是喜歡把自己尚未整理的白痴內容一直丟上來， 什麼都還不懂，把技術文章當成個人日記簿，寫一堆自我囈語、無病呻吟， 每天大量狂發文章，昭告天下以為這就是努力，欺騙自己也浪費別人的人生。 ## 「思想審查警衛」出動！ ## 功能 1. 把頭像屏蔽 2. 加上思想通緝犯、紅字與刪除線 3. 新增封殺按鈕 4. 版面通知封殺名單與文章數 5. 透過ajax確認某id的最新ID ## 效果截圖  此截圖僅是腳本示範，跟其使用者無關， 本人沒有任何覺得此使用者發的文章是差勁的意味，我認為非常上進、值得學習。  此圖也只是隨機挑user使用，純粹作為範例用途，不代表我個人意見。 ## 腳本下載 https://greasyfork.org/zh-TW/scripts/477283-%E6%80%9D%E6%83%B3%E7%8A%AF%E5%B0%81%E6%AE%BA ## 原理說明 鄭重聲明，這個示範真的毫無任何私人意味，此腳本也只是針對不同的主題去隱藏， 例如我想學python就不想看到JS的文章，因此使用此工具幫忙隱藏罷了。 取名做思想警察、比喻成清除垃圾等都只是文學上的趣味。 請勿當真Ꮚ･ꈊ･Ꮚ 這次的技術可說比較難，認真難很多！但是趣味性以及功能性是無比的超越！ 可以說幾乎是我寫系列文以來，最頂、最派的一篇！ 不過很多觀念已經出現過，在【前端小試身手】系列裡面，每次的腳本都是主打實用， 因此cookie或localstorage這種技術當然都會運用到。 ## JS原始碼 ``` // ==UserScript== // @license MIT // @name 👮思想犯封殺 // @namespace http://tampermonkey.net/ // @version 0.1 // @description 把廢文製造機轟出去 // @author You // @match https://ithelp.ithome.com.tw/articles* // @match https://ithelp.ithome.com.tw/users/* // @icon https://www.google.com/s2/favicons?sz=64&domain=ithome.com.tw // @grant none // @run-at document-end // ==/UserScript== let URL = window.location.href; let ArticleSite = "https://ithelp.ithome.com.tw/articles?tab=tech" let UserSite = "https://ithelp.ithome.com.tw/users/" // 判斷URL的開頭部分 if (URL.startsWith(ArticleSite)) { //文章頁執行清理垃圾程序 CleanGarbage(); } else if (URL.startsWith(UserSite)) { UserCheck(); } else { console.log("這邊不執行腳本"); } // 餅乾儲存的機制函數------------------------------------------------- function setListInCookie(list) { document.cookie = 'myList=' + JSON.stringify(list) + '; expires=Wed, 31 Dec 2099 23:59:59 GMT;'; } // 從 Cookie 中獲取 list function getListFromCookie() { var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)myList\s*\=\s*([^;]*).*$)|^.*$/, "$1"); return JSON.parse(cookieValue) || []; } function CleanGarbage(){ // 從本地存儲中獲取數據 var myListData = localStorage.getItem("myList"); // 解析數據到變量 list var list = myListData ? JSON.parse(myListData) : []; //list = getListFromCookie()||[]; // 儲存要刪除的字符串名單 // 找到所有CLASS是"qa-list__info-link"的<a>元素 var linkElements = document.querySelectorAll('.qa-list__info-link'); var removedCount = 0; // 初始化已清除的垃圾數量 for (var j = 0; j < list.length; j++) { // 遍歷這些<a>元素，確保文本內容包含"伍貳捌"，然後刪除其父元素 for (var i = 0; i < linkElements.length; i++) { if (linkElements[i].textContent.includes(list[j])) { // 開始向上查找父元素 var parentElement = linkElements[i].parentElement; while (parentElement) { // 如果找到具有"classname"為"qa-list"的<div>元素，則刪除它 if (parentElement.classList.contains('qa-list')) { parentElement.remove(); removedCount++; // 增加清除的數量 console.warn('抓到"'+list[j]+'"這位思想犯'); break; // 找到並刪除後，結束循環 } parentElement = parentElement.parentElement; } } } if (removedCount>0){ // 顯示已清除的垃圾數量 console.log('已清除他的 ' + removedCount + ' 篇垃圾');} removedCount=0; } } //------------------------------------------------------- // 為了防止五百八改名，我們針對他的ID去ajax得到他最新的名稱 function FindBitch() { // 使用 Fetch API 獲取指定 URL 的內容 return fetch("https://ithelp.ithome.com.tw/users/20163468") .then(response => response.text()) .then(data => { // 創建一個臨時 div 元素以容納頁面內容 var tempDiv = document.createElement("div"); tempDiv.innerHTML = data; // 查找 class 為 "profile-header__name" 的元素 var profileNameElement = tempDiv.querySelector(".profile-header__name"); if (profileNameElement) { // 刪除元素內的所有 <span> 元素 var spanElements = profileNameElement.querySelectorAll("span"); spanElements.forEach(function(span) { span.remove(); }); // 讀取元素的文本內容，去掉前導和尾隨空格 var text = profileNameElement.textContent.trim(); // 返回處理後的文本內容 return text; } else { return "未找到元素"; } }) .catch(error => { console.error("發生錯誤: " + error); return "發生錯誤"; }); } //------------------------------------------------------- function UserCheck(){ //轉換資料從餅乾到localstorage var currentCookieValue = getCookie("myList"); // 2. 存儲數據到本地存儲 if (currentCookieValue) { var list = JSON.parse(currentCookieValue); // 存儲到本地存儲 localStorage.setItem("myList", JSON.stringify(list)); }else{ FindBitch() .then(text => { let FirstKill = [text]; setListInCookie(FirstKill); }) .catch(error => { console.error("找不到五百八:", error); }); } // 刪除不需要的ID document.querySelector('.profile-header__account').remove(); //封殺按鈕------------------------------------------------- // 找到具有class為"profile-header__right"的元素 var profileRightElement = document.querySelector('.profile-header__right'); var pullRightElement = profileRightElement.querySelector('.pull-right'); // 創建一個新按鈕元素 var BlockBtn = document.createElement('button'); BlockBtn.textContent = '封殺'; // 添加樣式和類名到按鈕 BlockBtn.style.marginTop = '10px'; BlockBtn.style.width = '100%'; BlockBtn.className = 'btn btn-trace trace_btn_border BlockBtn'; // 將按鈕元素添加到"pull-right"元素內部 pullRightElement.appendChild(BlockBtn); // 通緝犯名單的cookie------------------------------------------------ // 從 Cookie 中加載 list（例如，頁面加載時） list = getListFromCookie()||[]; let UserBlock = document.querySelector('.profile-header__name'); let text = UserBlock.textContent.trim(); // 如果使用者已經在封殺名單內的判斷，已存在或不存在 if (list.includes(text)) { BlockStart(BlockBtn); } else { // 針對封殺按鈕進行監聽事件 BlockBtn.addEventListener('click', function() { list.push(text); setListInCookie(list); //先加入到名單內，然後再執行封殺事件 BlockStart(); // 輸出到控制台 console.log('黑名單新增:' + text); //本地儲存機制----------------------------- let currentCookieValue = getCookie("myList"); let list2 = JSON.parse(currentCookieValue); // 存儲到本地存儲 localStorage.setItem("myList", JSON.stringify(list2)); }); } } // ------------------------------------------------ //封殺事件的函數 function BlockStart(){ let BlockBtn = document.querySelector('.BlockBtn'); BlockBtn.textContent = '已封殺'; BlockBtn.disabled = true; BadText(); BadImg(); } //封殺事件函數裡面的細項函數 function BadText(){ // 標記這傢夥是垃圾------------------------------------------------- let UserBlock = document.querySelector('.profile-header__name'); let newHeading = document.createElement('h1'); newHeading.textContent = '思想通緝犯'; // 把思想通緝犯這幾個大字加上去 UserBlock.parentElement.insertBefore(newHeading, UserBlock); UserBlock.style.textDecoration = "line-through"; UserBlock.style.color = "red"; } function BadImg(){ //圖片進行網點作業XD------------------------------------------------- var originalImage = document.querySelector('.profile-header__avatar'); // 創建一個包含交叉紅線的覆蓋層 <div> 元素 var overlayDiv = document.createElement('div'); overlayDiv.style.position = 'absolute'; overlayDiv.style.width = '150px'; overlayDiv.style.height = '150px'; overlayDiv.style.background = 'linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(-45deg, black 50%, transparent 50%)'; overlayDiv.style.backgroundSize = '5px 5px, 5px 5px'; overlayDiv.style.backgroundPosition = '0 0, 0 2px'; // 將覆蓋層疊加到圖片上 originalImage.parentNode.appendChild(overlayDiv); // 設置覆蓋層的位置，以與原始圖像對齊 overlayDiv.style.top = originalImage.offsetTop + 'px'; overlayDiv.style.left = originalImage.offsetLeft + 'px'; // 設置覆蓋層的z-index，以確保它在圖片上方 overlayDiv.style.zIndex = '2'; } ``` ## 觀念筆記 這個腳本開發足足花了我一整個晚上，將近八小時之久。 有趣的是，其中為了進行測試才選某些user當作隱藏對象，否則腳本執行上會出錯。 細心的人若觀察原始碼，也會發現裡面有個firstKill， 那是必須要的段落，先設置好cookie的首要內容物，才有辦法繼續操作下去( ิ◕㉨◕ ิ) 也就是初始化的概念XD 另一個有趣的點是，為了防止使用者改名導致腳本出錯，我甚至不惜再寫一段ajax， 去更新一下ID，這樣不管人家怎麼改，都逃不了， 要改成「別抓我」也沒用，這個腳本都還是可以run。 ## 心得後記 我只能說這篇是自從「備份IT幫發文、一眼全覽」最強的JS教學文章！ 超派，真的不騙( ﾒ∀・) 有些人喜歡看前端小試身手，有些人喜歡前端動手玩創意； 其實這兩個系列的本質都是JS的教學，是可以互相連接的，但也有很多不同的重心。 這個系列就是以腳本為主，重點在於創意與發想，打到使用者痛點。 【前端動手玩創意】則是以建構網站為起點， 任何元素與概念都會變成網頁上的一部分，算是比較基礎工的建立。 如果對JS的強大感興趣，那麼可以把這兩個系列交互看，反覆的閱讀、實際動手操作， 這樣一來的學習非常踏實，甚至比YT學習都來的高效率、實際。 尤其此系列都是原創發想的腳本，當然超強！ 喜歡記得關注，未來還有更多超酷的前端內容可以玩，下課⧸⎩⎠⎞͏(・∀・)⎛͏⎝⎭⧹
本文轉載自:https://ithelp.ithome.com.tw/articles/10338469 ## 前情提要 有時候，夜深人靜，總是會想要沉思人生的意義。 於是打開某個網站， 開始看一些只有長大了才能看的大人動作愛情學，必須好好鑽研， 此刻電影裡的聲響徹雲霄，你感覺無比尷尬..... 這時候就需要靜音神隊友。 可以自己加入網頁名單，讓小電影們先保持靜音，自己再手動開啟。 如此一來非常保險，絕對不讓你不小心爆音。 非常的有禮貌，人生的哲理更奧妙了。 ## 腳本下載  https://greasyfork.org/zh-TW/scripts/477196-%E9%9D%9C%E9%9F%B3%E5%B0%8F%E5%8A%A9%E6%89%8B ## JS程式碼 ``` // ==UserScript== // @name 靜音小助手 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://*/* // @icon https://www.google.com/s2/favicons?sz=64&domain=xvideos.com // @grant none // ==/UserScript== // 定義 JSON 資料，包含網址開頭 var jsonUrls = [ "https://www.xvideos.com/", "https://example.com/json2", // 添加更多的網址開頭 ]; // 取得當前網址 var currentUrl = window.location.href; // 檢查當前網址是否以 JSON 中的某些開頭開始 var isJsonUrl = jsonUrls.some(function(jsonUrl) { return currentUrl.startsWith(jsonUrl); }); // 如果當前網址符合 JSON 的某些開頭，執行程式碼 if (isJsonUrl) { // 在這裡放置你想要執行的程式碼 console.log("當前網址符合 JSON 開頭"); Mute(); } else { console.log("當前網址不符合 JSON 開頭"); } function Mute(){ // 取得網頁上所有的 <video> 元素 var videoElements = document.getElementsByTagName('video'); // 迭代所有的 <video> 元素並將其靜音 for (var i = 0; i < videoElements.length; i++) { videoElements[i].muted = true; } } ``` ## 觀念筆記 只能說，前端的東西往往越簡單，越強。 這次只是使用三個小觀念，都是超級基本的小小觀念，幼稚園等級。 ### 第一部分：使用陣列儲存網址 ``` // 定義 JSON 資料，包含網址開頭 var jsonUrls = [ "https://www.xvideos.com/", "https://example.com/json2", // 添加更多的網址開頭 ]; ``` 這部分就是把我們的資料儲存起來，可以自己新增訂義哪些網址要被匹配。 ### 第二部分：location的API 使用網址要確認網址，就是用location，這已經屢見不鮮。 另外字串的搜查，startsWith非常老舊卻也很無敵。 ### 第三部分：影片靜音API 很簡單，針對video元素muted就可以了，非常輕鬆！ 簡直就像早餐吃鬆餅一樣，鬆。 ## 心得 很多人常常說前端，好難，JS好基八 我是覺得，關你屁事？/ᐠ｡ꞈ｡ᐟ\ 你會罵蛋餅為什麼要這麼蛋餅嗎，蛋餅之所以好吃就是因為它是蛋餅，不好吃也因為它是蛋餅。 JS的奇怪或是難懂，只是它的本質，在那邊靠北靠母的風氣真的很無聊。 要玩梗也可以多一點新的梗，而不是表面嘴皮耍耍。 它很機八，但也很強，這就是JS的厲害之處。 因此這個簡單實用的小腳本，又再次被我們秒殺了！ 喜歡可以關注，未來還會有更多JS的小試身手、前端動手玩創意也還有一堆素材呢⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
