原文出處：https://dev.to/bigsondev/10-projects-to-skyrocket-your-coding-skills-19hl ## 介紹 每當您考慮提高編碼水平時，都有很多選擇可以實現。您可以閱讀開發文章或無限循環地閱讀教程、課程、影片和書籍，但真正的關鍵是從學習過渡到動手編碼，相信我，沒有比應用您所掌握的所有概念更好的方法了。到目前為止，我們已經透過**基於專案的學習**學習了。 我自己是一名擁有 [8 年以上經驗](https://www.linkedin.com/in/adrian-bigaj-282277130/) 的軟體工程師，我發送了大量的履歷，進行了數十次面試，尤其是現在，當獲得前端/Web 開發人員的工作比以往任何時候都更加棘手時，我強烈建議您建立自己的專案。 為了在人群中脫穎而出，我將描述 10 個專案，每個專案都有獨特的設計、要求和技能，您可以掌握這些來建立您的作品集，並實際建立可以影響您作為開發人員進步的東西！ 此外，每個專案都附帶預先定義的實施卡，可以幫助您感覺自己像在敏捷環境中工作的真正開發人員，具有使用者故事和驗收標準，同時也支援專案本身的規劃。 ## [名片](https://app.bigdevsoon.me/projects/business-card) 深入 Web 開發的良好介紹暖身。  您將了解基本的 HTML 和 CSS、響應式設計原則以及線上個人品牌介紹。 ### 卡牌 1.UI容器 2. 用戶聯繫部分 3. 用戶形象 4. 使用者資訊部分 5. 絕對定位的形狀 6. 動畫 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-business-card) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-business-card) ## [素食王](https://app.bigdevsoon.me/projects/the-veggie-king) 經典的CSS RWD Landing Page樣式，感受媒體質疑！  您將學習進階 CSS 技術、CSS Flexbox/Grid，以及如何建立回應靈敏且有吸引力的登陸頁面。 ### 卡牌 1. 導航 2.英雄區 3. 關於我們部分 4. 菜單部分 5. 畫廊部分 6. 聯繫部分 7. 頁尾 8. 懸停效果 9. 行動選單 10.響應式網頁設計 11. 優化 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-the-veggie-king) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-the-veggie-king) ## [計算機](https://app.bigdevsoon.me/projects/calculator) 讓我們進一步了解 JS、邏輯、純函數和一些數學運算。  您將學習 JavaScript 基礎知識、DOM 操作和事件處理來建立互動式 Web 應用程式。 ### 卡牌 1.UI容器 2. 輸入數字 3. 數學運算 4. 清除和重置 5. 之前的操作 6. 明暗模式 7. 邊緣情況處理 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-calculator) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-calculator) ## [Just Weather](https://app.bigdevsoon.me/projects/just-weather) **此專案類型已多次用於面試帶回家**挑戰，值得至少做一次！  您將學習如何從外部 API、非同步 JavaScript（Promises、async/await）獲取資料，並在 Web 上顯示動態資料。 ### 卡牌 1.API配置 2. 搜尋欄 3. 地點和溫度 4. 每小時預報 5. 天氣詳情 6. 位置存取 7. 溫度單位切換 8. 最近的搜尋 9. 骨骼動畫 10. 錯誤處理 ### 其他資源 - [有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-just-weather) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-just-weather) ## [GifTok](https://app.bigdevsoon.me/projects/giftok) 更多 API、分頁、無限滾動。  您將學習如何使用富媒體 API、實作分頁並確保適合行動裝置的 UI。 ### 卡牌 1.API配置 2.顯示第一個GIF 3. 滑動下一步 4. 向後滑動 5.無限滑動 6. 用戶詳細訊息 7. 骨架加載 8. 桌面版 9. 邊緣情況 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-giftok) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-giftok) ## [注意](https://app.bigdevsoon.me/projects/notely) 另一種經典的待辦事項應用程式風格，如果您還沒有建立一個，現在可能是個好時機！  您將學習現代 JavaScript 框架中的 CRUD 操作、狀態管理以及不可變程式設計的原理。 ### 卡牌 1. 導航佔位符 2. 新筆記 3. 列出註釋 4. 編輯註釋 5. 刪除註釋 6. 填寫註釋 7. 搜尋筆記 8. 過濾筆記 9. 完成筆記 10. 空狀態 11. 字段驗證 12. 持久性存儲 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-notely) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-notely) ## [顏色記憶](https://app.bigdevsoon.me/projects/color-memory) 建立遊戲並擁有元件化和結構的高級圖片總是好的。  您將學習軟體開發中的邏輯建置、維護應用程式狀態和使用者互動處理。 ### 卡牌 1. 圓形元件 2. 首頁 3. 遊戲玩法 4. 遊戲結束模式 5. 最佳成績 6. 遊戲規則模態 7. 聲音通知 8.響應式網頁設計 9. 邊緣情況 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-color-memory) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-color-memory) ## [AI 貼文產生器](https://app.bigdevsoon.me/projects/ai-post-generator) 人工智慧的現代趨勢很奇特，對吧？了解最受歡迎的可用 API 之一的絕佳機會。  您將學習透過 API 與 AI 交互，了解提示的工作原理，並根據實際用例建立工具。 ### 卡牌 1.API配置 2.UI容器 3. 社交平台選擇器 4. 訊息文字區域 5. 音調和風格選擇器 6. 產生貼文按鈕 7. 生成階段 8. 按鈕邏輯 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-ai-post-generator) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-ai-post-generator) ## [關卡編輯器](https://app.bigdevsoon.me/projects/level-editor) 這就像您的第一個「迷你 Photoshop 工具」😁 如今有很多類似風格的「無程式碼」應用程式。  您將學習如何實現拖放功能、資產管理以及遊戲級設計和 UX/UI 考量的基礎知識。 ### 卡牌 1.UI容器 2. 資產提現機制 3、快速資產 4. 撤銷功能 5. 橡皮擦工具 6. 變焦能力 7. 設定與匯出 8. 調整網格大小 9. 等級的持續性 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-level-editor) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-level-editor) ## [任何聊天](https://app.bigdevsoon.me/projects/any-chat) 掌握前端和後端、套接字和事件廣播的完整流程是一項非常有用的技能。  您將學習全端開發，包括伺服器端程式設計、即時資料處理和資料庫管理。 ### 卡牌 1. 入職頁面 2. 進入聊天頁面 3.Node.js伺服器 4. 聊天頁標題 5. 聊天視窗 6. 聊天頁頁腳 7. 訊息發送 8.表情符號支持 9. 連接和斷開 10. 邊緣情況 ### 其他資源 - [有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-any-chat) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-any-chat) ## 結論 嘗試技術、框架和函式庫，建立您自己的創意變體，看看什麼最適合您。我絕對建議您擴展HTML/CSS 之外的技能，加入更多JS 和邏輯，同時使用API、React/Vue/Svelte 等一些流行框架，並深入研究Node.js/Express 以了解完整的前端是如何運作的。<-> 後端流程有效。 建立出色的專案，我祈禱面試成功，繼續編碼。 長期以來，我的目標是透過社區傳播基於專案的學習方法，並啟動並執行 [BigDevSoon](https://bigdevsoon.me/)，這是我們過去 2 年一直在開發的應用程式年對我們來說是一項偉大的成就。 **如果您喜歡本文，請隨意傳播！** ❤️
原文出處：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/m_midas/44-react-frontend-interview-questions-2o63 ## 介紹 在面試 React 前端開發人員職位時，為技術問題做好充分準備至關重要。 React 已經成為建立使用者介面最受歡迎的 JavaScript 程式庫之一，雇主通常專注於評估候選人對 React 核心概念、最佳實踐和相關技術的理解。在本文中，我們將探討 React 前端開發人員面試期間常見問題的完整清單。透過熟悉這些問題及其答案，您可以增加成功的機會並展示您在 React 開發方面的熟練程度。因此，讓我們深入探討您應該準備好在 React 前端開發人員面試中解決的關鍵主題。  ### 1.你知道哪些React hooks？ - `useState`：用於管理功能元件中的狀態。 - `useEffect`：用於在功能元件中執行副作用，例如取得資料或訂閱事件。 - `useContext`：用於存取功能元件內的 React 上下文的值。 - `useRef`：用於建立對跨渲染持續存在的元素或值的可變引用。 - `useCallback`：用於記憶函數以防止不必要的重新渲染。 - `useMemo`：用於記憶值，透過快取昂貴的計算來提高效能。 - `useReducer`：用於使用reducer函數管理狀態，類似於Redux的工作方式。 - `useLayoutEffect`：與 useEffect 類似，但效果在所有 DOM 變更後同步運作。 這些鉤子提供了強大的工具來管理狀態、處理副作用以及重複使用 React 功能元件中的邏輯。 [了解更多](https://react.dev/reference/react) ### 2.什麼是虛擬 DOM？ 虛擬 DOM 是 React 中的一個概念，其中建立實際 DOM（文件物件模型）的輕量級虛擬表示並將其儲存在記憶體中。它是一種用於優化 Web 應用程式效能的程式設計技術。 當 React 元件的資料或狀態發生變更時，虛擬 DOM 會被更新，而不是直接操作真實 DOM。然後，虛擬 DOM 計算元件的先前狀態和更新狀態之間的差異，稱為「比較」過程。 一旦辨識出差異，React 就會有效地僅更新真實 DOM 的必要部分以反映變更。這種方法最大限度地減少了實際 DOM 操作的數量，並提高了應用程式的整體效能。 透過使用虛擬 DOM，React 提供了一種建立動態和互動式使用者介面的方法，同時確保最佳效率和渲染速度。 ### 3. 如何渲染元素陣列？ 要渲染元素陣列，可以使用“map()”方法迭代該陣列並傳回一個新的 React 元素陣列。 ``` const languages = [ "JavaScript", "TypeScript", "Python", ]; function App() { return ( <div> <ul>{languages.map((language) => <li>{language}</li>)}</ul> </div> ); } ``` [了解更多](https://react.dev/learn/rendering-lists) ### 4. 受控元件和非受控元件有什麼不同？ 受控元件和非受控元件之間的區別在於**它們如何管理和更新其狀態**。 受控元件是狀態由 React 控制的元件。元件接收其當前值並透過 props 更新它。當值改變時它也會觸發回調函數。這意味著該元件不儲存其自己的內部狀態。相反，父元件管理該值並將其傳遞給受控元件。 ``` import { useState } from 'react'; function App() { const [value, setValue] = useState(''); return ( <div> <h3>Controlled Component</h3> <input name="name" value={name} onChange={(e) => setValue(e.target.value)} /> <button onClick={() => console.log(value)}>Get Value</button> </div> ); } ``` 另一方面，不受控制的元件使用 refs 或其他方法在內部管理自己的狀態。它們獨立儲存和更新狀態，不依賴 props 或回呼。父元件對不受控元件的狀態控制較少。 ``` import { useRef } from 'react'; function App() { const inputRef = useRef(null); return ( <div className="App"> <h3>Uncontrolled Component</h3> <input type="text" name="name" ref={inputRef} /> <button onClick={() => console.log(inputRef.current.value)}>Get Value</button> </div> ); } ``` [了解更多](https://react.dev/learn/sharing-state- Between-components#driven-and-uncontrol-components) ### 5. 基於類別的 React 元件和函數式 React 元件有什麼不同？ 基於類別的元件和函數式元件之間的主要區別在於**它們的定義方式以及它們使用的語法。** 基於類別的元件被定義為 ES6 類別並擴展了 `React.Component` 類別。他們使用「render」方法傳回定義元件輸出的 JSX (JavaScript XML)。類別元件可以透過「this.state」和「this.setState()」存取元件生命週期方法和狀態管理。 ``` class App extends React.Component { state = { value: 0, }; handleAgeChange = () => { this.setState({ value: this.state.value + 1 }); }; render() { return ( <> <p>Value is {this.state.value}</p> <button onClick={this.handleAgeChange}> Increment value </button> </> ); } } ``` 另一方面，函數元件被定義為簡單的 JavaScript 函數。他們接受 props 作為參數並直接返回 JSX。功能元件無權存取生命週期方法或狀態。然而，隨著 React 16.8 中 React Hooks 的引入，功能元件現在可以管理狀態並使用其他功能，例如上下文和效果。 ``` import { useState } from 'react'; const App = () => { const [value, setValue] = useState(0); const handleAgeChange = () => { setValue(value + 1); }; return ( <> <p>Value is {value}</p> <button onClick={handleAgeChange}> Increment value </button> </> ); } ``` 一般來說，功能元件被認為更簡單、更容易閱讀和測試。建議盡可能使用函數式元件，除非有特定需要基於類別的元件。 ### 6. 元件的生命週期方法有哪些？ 生命週期方法是一種掛鉤元件生命週期不同階段的方法，可讓您在特定時間執行特定程式碼。 以下是主要生命週期方法的清單： 1. `constructor`：這是建立元件時呼叫的第一個方法。它用於初始化狀態和綁定事件處理程序。在功能元件中，您可以使用“useState”鉤子來實現類似的目的。 2. `render`：此方法負責渲染 JSX 標記並傳回螢幕上要顯示的內容。 3. `componentDidMount`：元件在 DOM 中渲染後立即呼叫該方法。它通常用於初始化任務，例如 API 呼叫或設定事件偵聽器。 4. `componentDidUpdate`：當元件的 props 或 state 改變時呼叫該方法。它允許您執行副作用、根據更改更新元件或觸發其他 API 呼叫。 5. `componentWillUnmount`：在元件從 DOM 刪除之前呼叫此方法。它用於清理在`componentDidMount`中設定的任何資源，例如刪除事件偵聽器或取消計時器。 一些生命週期方法，例如“componentWillMount”、“componentWillReceiveProps”和“componentWillUpdate”，已被棄用或替換為替代方法或掛鉤。 至於“this”，它指的是類別元件的當前實例。它允許您存取元件內的屬性和方法。在函數式元件中，不使用“this”，因為函數未綁定到特定實例。 ### 7. 使用 useState 有什麼特色？ `useState` 傳回一個狀態值和一個更新它的函數。 ``` const [value, setValue] = useState('Some state'); ``` 在初始渲染期間，傳回的狀態與作為第一個參數傳遞的值相符。 `setState` 函數用於更新狀態。它採用新的狀態值作為參數，並**對元件的重新渲染進行排隊**。 `setState` 函數也可以接受回呼函數作為參數，該函數將先前的狀態值作為參數。 [了解更多](https://react.dev/reference/react/useState) ### 8. 使用 useEffect 有什麼特別之處？ `useEffect` 鉤子可讓您在功能元件中執行副作用。 稱為 React 渲染階段的功能元件的主體內部不允許突變、訂閱、計時器、日誌記錄和其他副作用。這可能會導致用戶介面中出現令人困惑的錯誤和不一致。 相反，建議使用 useEffect。傳遞給 useEffect 的函數將在渲染提交到螢幕後執行，或者如果您傳遞一組依賴項作為第二個參數，則每次依賴項之一發生變更時都會呼叫該函數。 ``` useEffect(() => { console.log('Logging something'); }, []) ``` [了解更多](https://react.dev/reference/react/useEffect) ### 9. 如何追蹤功能元件的卸載？ 通常，「useEffect」會建立在元件離開畫面之前需要清理或重設的資源，例如訂閱或計時器辨識碼。 為了做到這一點，傳遞給`useEffect`的函數可以傳回一個**清理函數**。清理函數在元件從使用者介面刪除之前執行，以防止記憶體洩漏。此外，如果元件渲染多次（通常是這種情況），則在執行下一個效果之前會清除上一個效果。 ``` useEffect(() => { function handleChange(value) { setValue(value); } SomeAPI.doFunction(id, handleChange); return function cleanup() { SomeAPI.undoFunction(id, handleChange); }; }) ``` ### 10. React 中的 props 是什麼？ Props 是從父元件傳遞給元件的資料。道具 是唯讀的，無法更改。 ``` // Parent component const Parent = () => { const data = "Hello, World!"; return ( <div> <Child data={data} /> </div> ); }; // Child component const Child = ({ data }) => { return <div>{data}</div>; }; ``` [了解更多](https://react.dev/learn/passing-props-to-a-component) ### 11. 什麼是狀態管理器？您曾與哪些狀態管理器合作過或認識哪些狀態管理器？ 狀態管理器是幫助管理應用程式狀態的工具或程式庫。它提供了一個集中式儲存或容器來儲存和管理可由應用程式中的不同元件存取和更新的資料。 狀態管理器可以解決幾個問題。首先，將資料和與其相關的邏輯與元件分開是一個很好的做法。其次，當使用本機狀態並在元件之間傳遞它時，由於元件可能存在深層嵌套，程式碼可能會變得複雜。透過擁有全域存儲，我們可以存取和修改來自任何元件的資料。 除了 React Context，Redux 或 MobX 通常用作狀態管理庫。 [了解更多](https://mobx.js.org/README.html) [了解更多](https://redux-toolkit.js.org/) ### 12. 在什麼情況下可以使用本地狀態，什麼時候應該使用全域狀態？ 如果本機狀態僅在一個元件中使用且不打算將其傳遞給其他元件，則建議使用本機狀態。本地狀態也用在表示清單中單一專案的元件中。但是，如果元件分解涉及嵌套元件且資料沿層次結構傳遞，則最好使用全域狀態。 ### 13. Redux中的reducer是什麼，它需要哪些參數？ 減速器是一個純函數，它將狀態和操作作為參數。在減速器內部，我們追蹤接收到的操作的類型，並根據它修改狀態並傳回一個新的狀態物件。 ``` export default function appReducer(state = initialState, action) { // The reducer normally looks at the action type field to decide what happens switch (action.type) { // Do something here based on the different types of actions default: // If this reducer doesn't recognize the action type, or doesn't // care about this specific action, return the existing state unchanged return state } } ``` [了解更多](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers) ### 14. 什麼是操作以及如何更改 Redux 中的狀態？ Action 是一個簡單的 JavaScript 物件，必須有一個字段 一種。 ``` { type: "SOME_TYPE" } ``` 您也可以選擇新增一些資料作為**有效負載**。為了 改變狀態，需要呼叫我們傳遞給它的調度函數 行動 ``` { type: "SOME_TYPE", payload: "Any payload", } ``` [了解更多](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers) ### 15. Redux 實作了哪一種模式？ Redux 實作了 **Flux 模式**，這是應用程式可預測的狀態管理模式。它透過引入單向資料流和應用程式狀態的集中儲存來幫助管理應用程式的狀態。 [了解更多](https://www.newline.co/fullstack-react/30-days-of-react/day-18/#:~:text=Flux%20is%20a%20pattern%20for,default% 20method %20用於%20處理%20資料。） ### 16. Mobx 實作哪一種模式？ Mobx 實作了**觀察者模式**，也稱為發布-訂閱模式。 [了解更多](https://www.patterns.dev/posts/observer-pattern) ### 17. 使用 Mobx 的特徵是什麼？ Mobx 提供了「observable」和「compulated」等裝飾器來定義可觀察狀態和反應函數。以action修飾的動作用於修改狀態，確保追蹤所有變更。 Mobx 還提供自動依賴追蹤、不同類型的反應、對反應性的細粒度控制，以及透過 mobx-react 套件與 React 無縫整合。總體而言，Mobx 透過根據可觀察狀態的變化自動執行更新過程來簡化狀態管理。 ### 18.如何存取Mobx狀態下的變數？ 您可以透過使用「observable」裝飾器將變數定義為可觀察來存取狀態中的變數。這是一個例子： ``` import { observable, computed } from 'mobx'; class MyStore { @observable myVariable = 'Hello Mobx'; @computed get capitalizedVariable() { return this.myVariable.toUpperCase(); } } const store = new MyStore(); console.log(store.capitalizedVariable); // Output: HELLO MOBX store.myVariable = 'Hi Mobx'; console.log(store.capitalizedVariable); // Output: HI MOBX ``` 在此範例中，使用“observable”裝飾器將“myVariable”定義為可觀察物件。然後，您可以使用“store.myVariable”存取該變數。對「myVariable」所做的任何變更都會自動觸發相關元件或反應的更新。 [了解更多](https://mobx.js.org/actions.html) ### 19.Redux 和 Mobx 有什麼差別？ Redux 是一個更簡單、更固執己見的狀態管理庫，遵循嚴格的單向資料流並促進不變性。它需要更多的樣板程式碼和顯式更新，但與 React 具有出色的整合。 另一方面，Mobx 提供了更靈活、更直觀的 API，且樣板程式碼更少。它允許您直接修改狀態並自動追蹤更改以獲得更好的性能。 Redux 和 Mobx 之間的選擇取決於您的特定需求和偏好。 ### 20.什麼是 JSX？ 預設情況下，以下語法用於在 React 中建立元素。 ``` const someElement = React.createElement( 'h3', {className: 'title__value'}, 'Some Title Value' ); ``` 但我們已經習慣這樣看 ``` const someElement = ( <h3 className='title__value'>Some Title Value</h3> ); ``` 這正是標記所謂的 jsx。這是一種語言的擴展 簡化對程式碼和開發的認知 [了解更多](https://react.dev/learn/writing-markup-with-jsx#jsx-putting-markup-into-javascript) ### 21.什麼是道具鑽探？ Props 鑽取是指透過多層嵌套元件傳遞 props 的過程，即使某些中間元件不直接使用這些 props。這可能會導致程式碼結構複雜且繁瑣。 ``` // Parent component const Parent = () => { const data = "Hello, World!"; return ( <div> <ChildA data={data} /> </div> ); }; // Intermediate ChildA component const ChildA = ({ data }) => { return ( <div> <ChildB data={data} /> </div> ); }; // Leaf ChildB component const ChildB = ({ data }) => { return <div>{data}</div>; }; ``` 在此範例中，「data」屬性從 Parent 元件傳遞到 ChildA，然後從 ChildA 傳遞到 ChildB，即使 ChildA 不會直接使用該屬性。當存在許多層級的嵌套或當元件樹中更靠下的元件需要存取資料時，這可能會成為問題。它會使程式碼更難維護和理解。 可以透過使用其他模式（如上下文或狀態管理庫（如 Redux 或 MobX））來緩解 Props 鑽探。這些方法允許元件存取資料，而不需要透過每個中間元件傳遞 props。 ### 22. 如何有條件地渲染元素？ 您可以使用任何條件運算符，包括三元。 ``` return ( <div> {isVisible && <span>I'm visible!</span>} </div> ); ``` ``` return ( <div> {isOnline ? <span>I'm online!</span> : <span>I'm offline</span>} </div> ); ``` ``` if (isOnline) { element = <span>I'm online!</span>; } else { element = <span>I'm offline</span>; } return ( <div> {element} </div> ); ``` [了解更多](https://react.dev/learn/conditional-rendering) ### 23. useMemo 的用途是什麼？它是如何運作的？ `useMemo` 用於緩存和記憶 計算結果。 傳遞建立函數和依賴項陣列。只有當任何依賴項的值發生變更時，`useMemo` 才會重新計算記憶值。此優化有助於避免 每次渲染都需要昂貴的計算。 使用第一個參數，函數接受執行計算的回調，使用第二個依賴項陣列，僅當至少一個依賴項發生變更時，該函數才會重新執行計算。 ``` const memoValue = useMemo(() => computeFunc(paramA, paramB), [paramA, paramB]); ``` [了解更多](https://react.dev/reference/react/useMemo) ### 24. useCallback 的用途是什麼？它是如何運作的？ `useCallback` 掛鉤將傳回回呼的記憶版本，僅當依賴項之一的值發生變更時，該版本才會變更。 當將回調傳遞給依賴連結相等性來防止不必要的渲染的最佳化子元件時，這非常有用。 ``` const callbackValue = useCallback(() => computeFunc(paramA, paramB), [paramA, paramB]); ``` [了解更多](https://react.dev/reference/react/useCallback) ### 25. useMemo 和 useCallback 有什麼不同？ 1. `useMemo` 用於儲存計算結果，而 `useCallback` 用於儲存函數本身。 2. `useMemo` 快取計算值，如果依賴項沒有改變，則在後續渲染時傳回它。 3. `useCallback` 快取函數本身並傳回相同的實例，除非相依性發生變更。 ### 26.什麼是 React Context？ React Context 是一項功能，它提供了一種透過元件樹傳遞資料的方法，而無需在每個層級手動傳遞 props。它允許您建立一個全域狀態，樹中的任何元件都可以存取該狀態，無論其位置如何。當您需要在未透過 props 直接連接的多個元件之間共用資料時，上下文就非常有用。 React Context API 由三個主要部分組成： 1. `createContext`：此函數用於建立一個新的上下文物件。 2. `Context.Provider`：該元件用於向上下文提供值。它包裝了需要存取該值的元件。 3. `Context.Consumer` 或 `useContext` 鉤子：此元件或鉤子用於使用上下文中的值。它可以在上下文提供者內的任何元件中使用。 透過使用 React Context，您可以避免道具鑽探（透過多個層級的元件傳遞道具）並輕鬆管理更高層級的狀態，使您的程式碼更有組織性和效率。 [了解更多](https://react.dev/learn/passing-data-deeply-with-context) ### 27. useContext 的用途是什麼？它是如何運作的？ 在典型的 React 應用程式中，資料使用 props 從上到下（從父元件到子元件）傳遞。但這樣的使用方法對於某些類型的道具來說可能過於繁瑣 （例如，所選語言、UI 主題），必須傳遞給應用程式中的許多元件。上下文提供了一種在元件之間共享此類資料的方法，而無需明確傳遞 props 樹的每一層。 呼叫 useContext 的元件將始終在以下情況下重新渲染： 上下文值發生變化。如果重新渲染元件的成本很高，您可以使用記憶來優化它。 ``` const App = () => { const theme = useContext(ThemeContext); return ( <div style={{ color: theme.palette.primary.main }}> Some div </div> ); } ``` [了解更多](https://react.dev/reference/react/useContext) ### 28. useRef 的用途是什麼？它是如何運作的？ `useRef` 傳回一個可修改的 ref 物件，一個屬性。其中的當前值由傳遞的參數初始化。傳回的物件將在元件的整個生命週期內持續存在，並且不會因渲染而改變。 通常的用例是以命令式存取後代 風格。 IE。使用 ref，我們可以明確引用 DOM 元素。 ``` const App = () => { const inputRef = useRef(null); const buttonClick = () => { inputRef.current.focus(); } return ( <> <input ref={inputRef} type="text" /> <button onClick={buttonClick}>Focus on input tag</button> </> ) } ``` [了解更多](https://react.dev/reference/react/useRef) ### 29. 什麼是 React.memo()？ `React.memo()` 是一個高階元件。如果您的元件始終使用不變的 props 渲染相同的內容，您可以將其包裝在「React.memo()」呼叫中，以在某些情況下提高效能，從而記住結果。這意味著 React 將使用上次渲染的結果，避免重新渲染。 `React.memo()` 只影響 props 的變更。如果一個功能元件被包裝在 React.memo 中並使用 useState、useReducer 或 useContext，那麼當狀態或上下文發生變化時，它將重新渲染。 ``` import { memo } from 'react'; const MemoComponent = memo(MemoComponent = (props) => { // ... }); ``` [了解更多](https://react.dev/reference/react/memo) ### 30.React Fragment是什麼？ 從元件傳回多個元素是 React 中的常見做法。片段可讓您形成子元素列表，而無需在 DOM 中建立不必要的節點。 ``` <> <OneChild /> <AnotherChild /> </> // or <React.Fragment> <OneChild /> <AnotherChild /> </React.Fragment> ``` [了解更多](https://react.dev/reference/react/Fragment) ### 31.什麼是 React Reconciliation？ 協調是一種 React 演算法，用於區分一棵元素樹與另一棵元素樹，以確定需要替換的部分。 協調是我們過去所說的虛擬 DOM 背後的演算法。這個定義聽起來是這樣的：當你渲染一個 React 應用程式時，描述該應用程式的元素樹是在保留的記憶體中產生的。然後這棵樹被包含在渲染環境中——例如，瀏覽器應用程式，它被翻譯成一組 DOM 操作。當應用程式狀態更新時，會產生一棵新樹。將新樹與前一棵樹進行比較，以便準確計算並啟用重繪更新的應用程式所需的操作。 [了解更多](https://react.dev/learn/preserving-and-resetting-state) ### 32.為什麼使用map()時需要列表中的鍵？ 這些鍵可幫助 React 確定哪些元素已更改， 新增或刪除。必須指定它們以便 React 可以匹配 隨著時間的推移陣列元素。選擇鍵的最佳方法是使用能夠清楚區分清單專案與其鄰居的字串。大多數情況下，您將使用資料中的 ID 作為金鑰。 ``` const languages = [ { id: 1, lang: "JavaScript", }, { id: 2, lang: "TypeScript", }, { id: 3, lang: "Python", }, ]; const App = () => { return ( <div> <ul>{languages.map((language) => ( <li key={`${language.id}_${language.lang}`}>{language.lang}</li> ))} </ul> </div> ); } ``` [了解更多](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) ### 33. 如何在 Redux Thunk 中處理非同步操作？ 要使用 Redux Thunk，您需要將其作為中間件導入。動作建立者不僅應該傳回一個物件，還應該傳回以調度為參數的函數。 ``` export const addUser = ({ firstName, lastName }) => { return dispatch => { dispatch(addUserStart()); } axios.post('https://jsonplaceholder.typicode.com/users', { firstName, lastName, completed: false }) .then(res => { dispatch(addUserSuccess(res.data)); }) .catch(error => { dispatch(addUserError(error.message)); }) } ``` [了解更多](https://redux.js.org/usage/writing-logic-thunks) ### 34.如何追蹤功能元件中物件欄位的變化？ 為此，您需要使用“useEffect”掛鉤並將物件的欄位作為依賴項陣列傳遞。 ``` useEffect(() => { console.log('Changed!') }, [obj.someField]) ``` ### 35.如何存取DOM元素？ 引用是使用 React.createRef() 或 useRef() 鉤子建立的，並透過 ref 屬性附加到 React 元素。透過存取已建立的引用，我們可以使用「ref.current」來存取 DOM 元素。 ``` const App = () => { const myRef = useRef(null); const handleClick = () => { console.log(myRef.current); // Accessing the DOM element }; return ( <div> <input type="text" ref={myRef} /> <button onClick={handleClick}>Click Me</button> </div> ); } export default App; ``` ### 36.什麼是自訂鉤子？ 自訂鉤子是一個允許您在不同元件之間重複使用邏輯的功能。它是一種封裝可重複使用邏輯的方法，以便可以在多個元件之間輕鬆共用和重複使用。自訂掛鉤是通常以 **use ** 開頭的函數，並且可以根據需要呼叫其他掛鉤。 [了解更多](https://react.dev/learn/reusing-logic-with-custom-hooks) ### 37.什麼是公共API？ 在索引檔案的上下文中，公共 API 通常是指向外部模組或元件公開並可存取的介面或函數。 以下是表示公共 API 的索引檔案的程式碼範例： ``` // index.js export function greet(name) { return `Hello, ${name}!`; } export function calculateSum(a, b) { return a + b; } ``` 在此範例中，index.js 檔案充當公共 API，其中導出函數“greet()”和“calculateSum()”，並且可以透過匯入它們從其他模組存取它們。其他模組可以導入並使用這些函數作為其實現的一部分： ``` // main.js import { greet, calculateSum } from './index.js'; console.log(greet('John')); // Hello, John! console.log(calculateSum(5, 3)); // 8 ``` 透過從索引檔案匯出特定函數，我們定義了模組的公共 API，允許其他模組使用這些函數。 ### 38. 建立自訂鉤子的規則是什麼？ 1. 鉤子名稱以「use」開頭。 2. 如果需要，使用現有的鉤子。 3. 不要有條件地呼叫鉤子。 4. 將可重複使用邏輯提取到自訂掛鉤中。 5. 自訂hook必須是純函數。 6. 自訂鉤子可以傳回值或其他鉤子。 7. 描述性地命名自訂掛鉤。 [了解更多](https://react.dev/learn/reusing-logic-with-custom-hooks) ### 39.什麼是SSR（伺服器端渲染）？ 伺服器端渲染（SSR）是一種用於在伺服器上渲染頁面並將完整渲染的頁面傳送到客戶端進行顯示的技術。它允許伺服器產生網頁的完整 HTML 標記（包括其動態內容），並將其作為對請求的回應傳送到客戶端。 在傳統的用戶端渲染方法中，用戶端接收最小的 HTML 頁面，然後向伺服器發出額外的資料和資源請求，這些資料和資源用於在客戶端渲染頁面。這可能會導致初始頁面載入時間變慢，並對搜尋引擎優化 (SEO) 產生負面影響，因為搜尋引擎爬蟲很難對 JavaScript 驅動的內容建立索引。 透過 SSR，伺服器透過執行必要的 JavaScript 程式碼來產生最終的 HTML 來負責渲染網頁。這意味著客戶端從伺服器接收完全呈現的頁面，從而減少了額外資源請求的需要。 SSR 縮短了初始頁面載入時間，並允許搜尋引擎輕鬆索引內容，從而實現更好的 SEO。 SSR 通常用於框架和函式庫中，例如用於 React 的 Next.js 和用於 Vue.js 的 Nuxt.js，以啟用伺服器端渲染功能。這些框架為您處理伺服器端渲染邏輯，讓實作 SSR 變得更加容易。 ### 40.使用SSR有什麼好處？ 1. **改進初始載入時間**：SSR 允許伺服器將完全渲染的 HTML 頁面傳送到客戶端，從而減少客戶端所需的處理量。這可以縮短初始載入時間，因為使用者可以更快地看到完整的頁面。 2. **SEO友善**：搜尋引擎可以有效地抓取和索引SSR頁面的內容，因為完全渲染的HTML在初始回應中可用。這提高了搜尋引擎的可見度並有助於更好的搜尋排名。 3. **可存取性**：SSR 確保禁用 JavaScript 或使用輔助技術的使用者可以存取內容。透過在伺服器上產生 HTML，SSR 為所有使用者提供可靠且易於存取的使用者體驗。 4. **低頻寬環境下的效能**：SSR減少了客戶端需要下載的資料量，有利於低頻寬或高延遲環境下的使用者。這對於行動用戶或網路連線速度較慢的用戶尤其重要。 雖然 SSR 提供了這些優勢，但值得注意的是，與客戶端渲染方法相比，它可能會帶來更多的伺服器負載和維護複雜性。應仔細考慮快取、可擴展性和伺服器端渲染效能最佳化等因素。 ### 41.你知道Next.js的主要功能有哪些？ 1. `getStaticProps`：此方法用於在建置時取得資料並將頁面預先渲染為靜態 HTML。它確保資料在建置時可用，並且不會因後續請求而更改。 ``` export async function getStaticProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data } }; } ``` 2. `getServerSideProps`：此方法用於在每個請求上取得資料並在伺服器上預先渲染頁面。當您需要取得可能經常變更或特定於使用者的資料時，可以使用它。 ``` export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data } }; } ``` 3. `getStaticPaths`：此方法在動態路由中使用，用於指定建置時應預先渲染的路徑清單。它通常用於獲取帶有參數的動態路由的資料。 ``` export async function getStaticPaths() { const res = await fetch('https://api.example.com/posts'); const posts = await res.json(); const paths = posts.map((post) => ({ params: { id: post.id } })); return { paths, fallback: false }; } ``` [了解更多](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) ### 42.什麼是 Linters？ Linters 是用來檢查原始程式碼是否有潛在錯誤、錯誤、風格不一致和可維護性問題的工具。它們可幫助執行編碼標準並確保整個程式碼庫的程式碼品質和一致性。 Linters 的工作原理是掃描原始程式碼並將其與一組預先定義的規則或指南進行比較。這些規則可以包括語法和格式約定、最佳實踐、潛在錯誤和程式碼異味。當 linter 發現違反規則時，它會產生警告或錯誤，突出顯示需要注意的特定行或多行程式碼。 使用 linter 可以帶來幾個好處： 1. **程式碼品質**：Linter 有助於辨識和防止潛在的錯誤、程式碼異味和反模式，從而提高程式碼品質。 2. **一致性**：Linter 強制執行編碼約定和風格指南，確保整個程式碼庫的格式和程式碼結構一致，即使多個開發人員正在處理同一個專案時也是如此。 3. **可維護性**：透過儘早發現問題並促進良好的編碼實踐，linter 有助於程式碼的可維護性，使程式碼庫更容易理解、修改和擴展。 4. **效率**：Linter 可以透過自動化程式碼審查流程並在常見錯誤在開發或生產過程中引起問題之前捕獲它們來節省開發人員的時間。 一些流行的 linter 包括用於 JavaScript 的 ESLint 以及用於 CSS 和 Sass 的 Stylelint。 [了解更多](https://eslint.org/docs/latest/use/getting-started) ### 43.你知道哪些 React 架構解決方案？ 有多種用於建立 React 專案的架構解決方案和模式。一些受歡迎的包括： 1. **MVC（模型-視圖-控制器）**：MVC 是一種傳統的架構模式，它將應用程式分為三個主要元件 - 模型、視圖和控制器。 React 可以在 View 層中使用來渲染 UI，而其他程式庫或框架可以用於 Model 和 Controller 層。 2. **Flux**：Flux是Facebook專門針對React應用程式所推出的應用架構。它遵循單向資料流，其中資料沿著單一方向流動，從而更容易理解和除錯應用程式的狀態變更。 3. **原子設計**：原子設計並不是React特有的，而是將UI分割成更小、可重複使用元件的設計方法。它鼓勵建立小型、獨立且可以組合以建立更複雜的 UI 的元件。 4. **容器和元件模式**：此模式將表示（元件）與邏輯和狀態管理（容器）分開。元件負責渲染 UI，而容器則處理業務邏輯和狀態管理。 5. **功能切片設計**：它是一種用於組織和建構 React 應用程式的現代架構方法。它旨在透過根據功能或模組劃分應用程式程式碼庫來解決可擴展性、可維護性和可重用性的挑戰。 ### 44.什麼是特徵切片設計？ 它是一種用於組織和建立 React 應用程式的現代架構方法。它旨在透過根據功能或模組劃分應用程式程式碼庫來解決可擴展性、可維護性和可重用性的挑戰。 在功能切片設計中，應用程式的每個功能或模組都組織到一個單獨的目錄中，其中包含所有必要的元件、操作、reducers 和其他相關檔案。這有助於保持程式碼庫的模組化和隔離性，使其更易於開發、測試和維護。 功能切片設計促進了關注點的清晰分離，並將功能封裝在各個功能中。這允許不同的團隊或開發人員獨立地處理不同的功能，而不必擔心衝突或依賴性。  **我強烈建議點擊“了解更多”按鈕以了解功能切片設計** [了解更多](https://dev.to/m_midas/feature-sliced-design-the-best-frontend-architecture-4noj) ## 了解更多 如果您還沒有閱讀過，我強烈建議您閱讀我關於前端面試問題的其餘文章。 https://dev.to/m_midas/52-frontend-interview-questions-javascript-59h6 https://dev.to/m_midas/41-frontend-interview-questions-css-4imc https://dev.to/m_midas/15-most-common-frontend-interview-questions-4njp ## 結論 總之，面試 React 前端開發人員職位需要對框架的核心概念、原理和相關技術有深入的了解。透過準備本文中討論的問題，您可以展示您的 React 知識並展示您建立高效且可維護的使用者介面的能力。請記住，不僅要專注於記住答案，還要理解基本概念並能夠清楚地解釋它們。 此外，請記住，面試不僅涉及技術方面，還旨在展示您解決問題的能力、溝通能力以及團隊合作能力。透過將技術專業知識與強大的整體技能相結合，您將具備在 React 前端開發人員面試中脫穎而出的能力，並在這個令人興奮且快速發展的領域找到您夢想的工作。 祝你好運！
原文出處：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、即時工程或微服務而錯過一位才華橫溢的工程師，那我就太傻了。 我的建議是 - **不要陷入新趨勢和炒作，以至於失去對創造價值的關注。** ## 快節奏與高期望 **在尋求新的挑戰時，可能很難在努力爭取積極壓力的同時避免消極壓力。**積極壓力是指我們將有壓力的情況視為導致良好結果的機會，而消極壓力則可以使我們獲得良好的結果。如下圖所示，會對身心健康產生不利影響。在緊迫的時間內持續交付結果是有壓力的，而出於錯誤的原因建立功能則傾向於後者。  作為一名導師和一名努力工作的人，我都看到壓力會導致倦怠。無一例外，讓某人經歷倦怠所帶來的產出比減少工作量、休息和長期優化要少。這就是為什麼我們總是嘗試透過定期團隊更新、一對一和培育文化，盡可能簡單地提出危險信號。 儘管如此，事情還是會出問題。當他們這樣做時，我們會縮小範圍，讓可以提供幫助的人員參與進來，或與客戶溝通以推遲發布。 **壓力比以往任何時候都大，來自內部和外部。保持專注，讓自己身邊有一個長期優化的支援團隊。** ## 我們怎麼做得更好？ 我們都有情緒低落的時候──感覺自己是個不稱職的工程師、導師或同事。事情永遠不會是完美或容易的，也不應該是。如果不犯錯和經歷困難，我們就不會學習。但我發現有些事情可以提高效率。  **就個人而言，**忠於真正重要的事情。科技會來來去去，但你為世界帶來的價值才是最重要的。努力工作和經驗是很難偽造的。 **作為一家公司，**在做出決策時首先從「為什麼」開始。這是提供可帶來價值的功能的最佳方式。另外，請確保員工知道***為什麼***。根據我的經驗，他們會做出更好的決定，提供有價值的回饋，並且會更快樂。 **在文化上，**建立一個支持員工、長期優化的流程。與您的同事一起建立信任、支持和關懷的文化。這樣，你們就能互相發揮最好的一面。
## 簡介 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) --- 再次感謝您的閱讀！
假設您厭倦了螢幕錄影機的付費專區和限制，並想繼續編寫自己的程式碼 - 事實證明您已經可以透過幾行程式碼獲得基本功能。 原文出處：https://dev.to/ninofiliu/simple-screen-recorder-in-20-lines-of-javascript-4ina 我們可以要求瀏覽器使用[螢幕擷取API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture)為我們取得擷取視訊串流，但出於安全原因我們必須確保[使用者手勢](https://stackoverflow.com/q/56388258/8186898)觸發捕獲，例如點擊按鈕： ``` const button = document.createElement("button"); button.innerHTML = "capture"; document.body.append(button); button.addEventListener("click", async () => { // TODO }); ``` 點擊後，獲取視訊串流並進行錄製 ``` const stream = await navigator.mediaDevices.getDisplayMedia(); const recoder = new MediaRecorder(stream); recoder.start(); ``` 當使用者停止分享螢幕時停止錄製  ``` const [video] = stream.getVideoTracks(); video.addEventListener("ended", () => { recoder.stop(); }); ``` 取得錄音檔案並下載 ``` recoder.addEventListener("dataavailable", (evt) => { const a = document.createElement("a"); a.href = URL.createObjectURL(evt.data); a.download = "capture.webm"; a.click(); }); ``` 瞧，你就有了一個簡單的螢幕錄影機！ 它有很多解決起來很有趣的限制- 音頻錄製、網絡攝像頭集成、長時間執行的流等- 但我剛剛發現用這麼少的程式碼行就可以完成如此強大的事情，這太棒了，無法不分享。 [codepen連結](https://codepen.io/ninofiliu/embed/BaMzxQM)
客戶最近有把舊 laravel 專案改寫為 SPA 的需求，需要前後端分離 為了方便前後端溝通、改善開發者體驗，我建議＆協助他們導入 GraphQL 技術到 laravel 專案中！ 實際導入＆開發半年之後，成效非常不錯！前端工程師、後端工程師都用得很開心！ 今天跟大家分享一些心得＆範例程式碼！ ## 破除迷思 > 很多公司聽到 GraphQL 會有點卻步，覺得太新、不成熟 其實，這技術面世八年了，在國外已經被許多公司廣泛採用，不算很新了！ > 很多公司會以為這是給大公司用的技術，小公司不適合使用 其實，我自己的使用經驗是，就算團隊只有兩個工程師，這技術也很好用，會讓開發速度更快，不會更慢！ > laravel 社群會以為這技術在 node 社群、或其他社群比較常見 其實，laravel 社群也有很好用的套件，導入也很方便！ 所以這技術非常值得學習、使用，至少了解一下！ ## 優點介紹 我認為最大的優點就是，大幅降低了前後端溝通的成本！ 傳統開發，後端寫完 API，要另外寫文件告訴前端網址是多少、回傳的資料格式 然後前端需要用 postman 之類的工具，方便測試、開發 使用 graphql 的話，後端寫完程式碼，就同時自動生成文件＆測試工具了！ 為了方便讀者「親自試玩」以上描述，我準備了一個範例專案給大家！ 這個專案模擬電商網站，API 可以撈 products 與 comments 兩種資料！ 然後可以訂閱商家的電子報，也就是新增 subscriber 這種資料！ ## 實務範例與 API 線上試玩 我先分享範例專案給大家！ https://graphql-laravel-example.tw/ 原始碼也已公開 https://github.com/howtomakeaturn/graphql-laravel-example --- 以往 RESTful 的設計，「讀取資料」這種動作，在 graphql 稱之為 query https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Queries 會去「更新資料庫」的動作，在 graphql 稱之為 mutation https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Mutations 以上兩個資料夾可以翻閱一下，每支 api 會是一個檔案，所以很好管理 接著使用 graphql 社群的強大工具：graphiql，就同時得到文件＆測試工具了！ https://graphql-laravel-example.tw/graphiql 我安裝了一份 graphiql 給大家，點進去玩玩看吧！ 把他當成是技術規格文件與 Postman 測試工具，身兼兩種用途！ 有了這個工具，大幅減少了前後端需要溝通的事項，對於前後端合作有「巨大幫助」！ （請注意，實務上 graphiql 建議在本機執行，不要這樣線上公開，會有資安疑慮） ## 套件介紹 在 graphql 社群，有兩種開發 api 的哲學 分別是 schema-first 與 code-first 兩種方法 laravel 社群最知名的 schema-first 套件是這款 https://github.com/nuwave/lighthouse laravel 社群最知名的 code-first 套件是這款 https://github.com/rebing/graphql-laravel schema-first 與 code-first 的差異與優缺點我先不細談 總之，我個人比較喜歡 code-first，我覺得比較直觀、簡單、好導入 所以我的範例是用 https://github.com/rebing/graphql-laravel 這套件 您的 laravel 版本建議至少要是 8.0 以上版本，太舊的可能會有問題 順帶一提，兩個套件背後都是使用 https://github.com/webonyx/graphql-php 所以底層元件一樣，兩者有很多通用的觀念，不用太擔心 --- graphiql 是 graphql 官方的重要工具 laravel 社群已經有人寫好懶人安裝套件了 https://github.com/mll-lab/laravel-graphiql 按照說明安裝即可得到超好用的自動文件＆測試工具面板！ ## 結論 有了以上兩個套件，按照說明分別安裝 然後參考我提供的範例程式碼 https://github.com/howtomakeaturn/graphql-laravel-example 您應該就可以在專案之中導入 graphql 基礎架構，並且開始用 graphql 寫出您的第一支 api 我在替客戶導入的時候，發現網路上 graphql 的教學、說明雖然很多 但是剛開始寫還是很困難，很少範例 所以我製作這份 open source 方便大家參考＆入門 並且直接把 graphiql 面板公開部署上線，方便大家體驗！ （此為系列文章，更多內容會在近期發佈） --- # 系列文章 - [Laravel + GraphQL 接案心得＆範例分享 Part 1：強大優點、API 線上試玩、工具介紹](https://codelove.tw/@howtomakeaturn/post/yx08mx) - [Laravel + GraphQL 接案心得＆範例分享 Part 2：前端 Query/Mutation 與 React 串接範例](https://codelove.tw/@howtomakeaturn/post/2an0Gx)
原文出處：https://dev.to/github20k/8-components-to-become-a-react-master-2ee4 # 簡介 我收集了可用於建立終極網站的 React 元件。 他們每個人都有獨特的用例！ 別忘了給他們加星號🌟 那麼就讓我們開始吧！  --- ## 1. [Clickvote](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert) - 按讚、投票並查看任何上下文。 👑 [](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-clickvote/clickvote?utm_source=dev&utm_medium=react-元件專家) 將點讚和評論元件無縫整合到您的應用程式中。 使用這個簡單的 React 程式碼渲染喜歡框、評論框和反應元件！ ``` import { ClickVoteProvider } from '@clickvote/react'; import { ClickVoteComponent } from '@clickvote/react'; import { LikeStyle } from '@clickvote/react'; <ClickVoteProvider> <ClickVoteComponent id={CONTEXT} voteTo={ID}> {(props) => <LikeStyle {...props} />} </ClickVoteComponent> </ClickVoteProvider> ``` 在這裡加星號🌟 [https://github.com/clickvote/clickvote](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert) --- ## 2. [Novu](https://github.com/novuhq/novu) - 將應用程式內通知新增至您的應用程式！ [](https://github.com/novuhq/novu) 用於在一個地方管理所有通訊管道的簡單元件和 API：電子郵件、SMS、Direct 和 Push 您可以使用此 React 元件為您的應用程式新增應用程式內通知 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, IMessage, } from "@novu/notification-center"; <NovuProvider subscriberId={"SUBSCRIBER_ID"} applicationIdentifier={"APPLICATION_IDENTIFIER"} > <PopoverNotificationCenter colorScheme="dark"> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> ``` 在這裡加星號🌟 https://github.com/novuhq/novu ## 3. [CopilotKit](https://github.com/RecursivelyAI/CopilotKit) - 使用 GPT 將自動補全功能加入您的文字！ [](https://github.com/RecursivelyAI/CopilotKit) 適用於任何 React 應用程式的強大且可破解的副駕駛。 只需幾分鐘即可開始並無限迭代。 一個簡單的元件，可以自動完成您的內容，就像您在 Gmail 上一樣。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; <CopilotProvider> <CopilotTextarea/> </CopilotProvider> ``` 在這裡加星號🌟 https://github.com/RecursivelyAI/CopilotKit ## 4. [Tolgee](https://github.com/tolgee/tolgee-platform) - 將任何上下文翻譯成任何語言！ [](https://github.com/tolgee/tolgee-platform) 智慧平台、快速整合、輕鬆在地化。 一個簡單的元件，可以將任何上下文翻譯成任何語言！ ``` import { TolgeeProvider, T } from "@tolgee/react"; <TolgeeProvider tolgee={tolgee} fallback="Loading..." // loading fallback > <T keyName="translate_me">Translate me!</T> </TolgeeProvider> ``` 在這裡加星號🌟 https://github.com/tolgee/tolgee-platform ## 5. [Hanko](https://github.com/teamhanko/hanko) - 對您的應用程式進行金鑰身份驗證！ [](https://github.com/teamhanko/hanko) 美觀、可自訂的元件、SDK 和 API 可為您的登入和使用者管理提供支援。 5 分鐘內新增密碼驗證！這是該元件： ``` import { register } from "@teamhanko/hanko-elements"; const hankoApi = process.env.HANKO_API_URL; register(hankoApi); <hanko-auth />; ``` 在這裡加星號🌟 https://github.com/teamhanko/hanko ## 6. [React Email](https://github.com/resendlabs/react-email) - 下一代書寫電子郵件 [](https://github.com/resendlabs/react-email) 一系列高品質、無樣式的元件，用於使用 React 和 TypeScript 建立精美的電子郵件。 幫助您設計和發送電子郵件的元件！ ``` import { Button } from '@react-email/button'; import { Html } from '@react-email/html'; <Html lang="en" dir="ltr"> <Button href="https://example.com"> Click me </Button> </Html> ``` 在這裡加星號🌟 https://github.com/resendlabs/react-email ## 7. [React Flow](https://github.com/wbkd/react-flow) - 建立可拖曳工作流程的最佳方式！ [](https://github.com/wbkd/react-flow) 高度可自訂的 React 元件，用於建立基於節點的編輯器和互動式圖表 一個簡單的元件，將為工作流程呈現拖放節點。 ``` import ReactFlow, { MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, } from 'reactflow'; <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} > <MiniMap /> <Controls /> <Background /> </ReactFlow> ``` 在這裡加星號🌟 https://github.com/wbkd/react-flow ## 8. [Novel](https://github.com/steven-tey/novel) - 最好的所見即所得編輯器！ [](https://github.com/steven-tey/novel) 概念式所見即所得編輯器，具有人工智慧驅動的自動完成功能。 一個簡單的元件，將呈現具有大量功能的概念樣式編輯器！ ``` import { Editor } from "novel"; <Editor /> ``` 在這裡加星號🌟 https://github.com/steven-tey/novel --- 謝謝你們！ 下週見😎
國外一名資深開發者分享工作心得與技巧，與大家分享原文！ 原文出處：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 較小，並寫下我能寫下的一切，我可以誠實地說，我的開發者體驗得到了極大的改善。 我非常希望這些技巧中至少一兩個能改善您的體驗。
一直寫 todo list 很無聊吧！ ✨ TODO 應用程式以外的 5 個 JavaScript 專案想法。 這些專案將挑戰您走出舒適區，學習新知識。 試試看吧！ - 原文網址：https://dev.to/swastikyadav/5-javascript-project-ideas-beyond-todo-apps-h9h ## **1️⃣ 時間軸滾動** 開發一個記錄一系列歷史事件的網路應用程式。理想情況下，日期均勻分開並利用無限滾動。 例如，滾動回 20 世紀 80 年代很快，但滾動回恐龍時代就要很久。 ## **2️⃣ 文章導航器** 提供一個瀏覽器擴充程序，用於概述文章並顯示具有滾動功能的頁面小地圖。 始終顯示目錄在旁邊，並且無需滾動即可快速查看頁面結構。 ## **3️⃣ 數位名片** 開發一個相當於名片的單頁應用程式。 提供您的聯絡資訊、社交媒體連結以及您所做工作的簡短描述。 讓用戶決定公開分享還是僅與選定的人分享。 ## **4️⃣ 文章編修檢查器** 顯示兩個 `textarea` 或兩個檔案之間的相似性，並提供一個分數來說明它們的相似程度。 顯示 2 個檔案的差異比較，就像在 GitHub 上進行 `compare` 一樣。 ## **5️⃣ 迷因平台** 使用 Giphy API 建立您自己的迷因搜尋平台。 --- 希望有幫助！
## 前情提要 常常寫文章的時候都會運用到圖文並茂， 如果可以設定文章的圖片封面就是一個很棒的設計。 今天的JS腳本教學已經夢幻連動！ 原本IT幫的文章與codeLove像是平行宇宙，只有偶爾轉載，現在， 教學內容直接來針對codelove來寫一個小小有趣小功能XD ## 目標設計 今天以codelove這個論壇為例， 讓我們來手動創造一個小腳本：分析文章內容，以正則去匹配圖片網址， 然後透過create的API寫出div，並且監聽事件， 當點擊圖片的時候，把圖片網址放到封面圖片的input欄位。 ## 效果 會根據textArea change的時候來匹配出網址。 並且創建div與img元素去放入網頁。  點圖片後會把圖片網址丟入。  ## 程式碼內容 ``` // 獲取textarea元素 var textarea = document.querySelector("body > div.container.px-0 > div > div.col-12.col-lg-9 > div > div > form > textarea"); var featuredImageInput = document.querySelector('input[name="featured_image"]'); textarea.addEventListener('change', function(event) { // 檢查是否存在imgBox元素 let imgBoxCheck = document.querySelector('.imgBox'); if (imgBoxCheck) { // 如果存在，則刪除imgBox元素 imgBoxCheck.parentNode.removeChild(imgBoxCheck); } // 獲取文本框的內容 var ContentText = textarea.value; // 創建一個空數組來存儲圖片鏈接 var imgArray = []; // 使用正則表達式查找圖片鏈接 var urlRegex = /https?:\/\/[^\s/$.?#].[^\s]*/gi; // 匹配以http或https開頭的鏈接 var matches = ContentText.match(urlRegex); if (matches) { // 疊代所有匹配項並篩選出以.png或.jpg結尾的鏈接 for (var i = 0; i < matches.length; i++) { if (matches[i].match(/\.(png|jpg)$/i)) { imgArray.push(matches[i]); } } } // 使用正則表達式匹配鏈接部分 var regex = /!\[\]\(([^)]+)\)/g; var match; while ((match = regex.exec(ContentText)) !== null) { imgArray.push(match[1]); } // 創建一個包含圖片的容器div（imgBox）並設置為display: flex let imgBox = document.createElement('div'); imgBox.className = 'imgBox'; // 添加類名 imgBox.style.display = 'flex'; // 平均分配圖片大小 var imageSize = 100 / imgArray.length; // 假設100%寬度，根據圖片數量計算每張圖片的寬度 // 將圖片鏈接轉換為img元素並插入到imgBox imgArray.forEach(function (imgUrl) { var imgDiv = document.createElement('div'); var img = document.createElement('img'); img.src = imgUrl; img.className = 'imgCover'; img.addEventListener('click', function () { // 設置name="featured_image"的輸入框的值為被點擊圖片的src屬性 featuredImageInput.value = img.src; }); // 設置img的寬度為100% img.style.width = '100%'; img.style.height = '100%'; imgDiv.appendChild(img); imgBox.appendChild(imgDiv); }); // 將imgBox插入到textarea後面 h5.insertAdjacentElement('afterend', imgBox); textarea.style.overflow = 'auto'; imgBox.style.border="5px solid gray" imgBox.style.marginTop="5px" }); // 創建一個包含CSS規則的<style>元素 var style = document.createElement('style'); style.type = 'text/css'; style.textContent = '.imgBox:hover .imgCover:not(:hover) { filter: grayscale(100%); opacity: 0.75; }'; // 將<style>元素添加到<head>中 document.head.appendChild(style); h5= document.createElement('h5') h5.innerText='請選擇你的文章縮圖：' h5.style.marginTop="50px" h5.style.fontSize="16px" textarea.insertAdjacentElement('afterend', h5); ``` ## 觀念筆記 這次的腳本內容其實沒有太多新的知識點，算是一個很好的複習。 querySelector addEventListener insertAdjacentElement forEach 以及正則表達式的使用。 ## 心得後記 網頁上的功能，其實就是這些基礎的運用配合起來！(°ཀ°) 所以不用擔心前端沒有東西練習，其實點子四處都有，練習也都很實用。 而不是每次都在重複輪迴相同的東西、感到疲倦！ 這次的前端小試身手就帶來一個回鍋菜，下次敬請期待更有趣的變化。 喜歡記得追蹤或留言唷。 還沒挑戰過此系列其他內容的，可以試著去挑戰看看◑ω◐
本文轉自: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/10338052 ## 前情提要 有時候我們需要使用一些圖片，勢必需要圖片的網址，這時候， 也許你可以本機上傳，然後去把網址抓好， 又或者你可以找到網路上別人的圖片，右鍵開啟新分頁，再複製網址； 又或者直接打開檢查(F12)找到src的網址去複製。 光聽這個流程我就覺得，心累。 這時候前端大師，就會寫一套簡單的小腳本來完成這個白爛的工作。 ## 腳本下載  https://greasyfork.org/zh-TW/scripts/477141-img%E8%A4%87%E8%A3%BD%E5%A4%A7%E5%B8%AB ## JS程式碼 ``` // ==UserScript== // @name IMG複製大師 // @namespace http://tampermonkey.net/ // @version 0.1 // @description 針對網頁上圖片，點擊就複製其網址 // @author You // @match *://*/* // @icon https://www.highcharts.com/demo/highcharts/spline-plot-bands // @grant none // ==/UserScript== let isEventActive = false; // 用於跟蹤事件的狀態 // 創建一個鏈接元素並設置其屬性 const toastrCssLink = document.createElement('link'); toastrCssLink.rel = 'stylesheet'; toastrCssLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css'; // 創建一個腳本元素並設置其屬性 const toastrScript = document.createElement('script'); toastrScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'; // 創建另一個腳本元素並設置其屬性 const toastrScript2 = document.createElement('script'); toastrScript2.src = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js'; // 將鏈接元素和腳本元素添加到文檔頭部 document.head.appendChild(toastrCssLink); document.head.appendChild(toastrScript); document.head.appendChild(toastrScript2); // 獲取頁面上的所有img元素 const images = document.querySelectorAll('img'); function removeClickHandler(image) { image.removeEventListener('click', clickHandler); } function toggleEvent() { if (isEventActive) { // 如果事件已經激活，則關閉事件 console.log('IMG複製大師關閉ꐦ°᷄д°᷅'); // 解除事件監聽 images.forEach(removeClickHandler); isEventActive = false; } else { // 如果事件尚未激活，則打開事件 console.log('IMG複製大師啟動ฅ^•ﻌ•^ฅ'); // 遍歷所有img元素 images.forEach((image) => { // 檢查圖像是否已加載 if (image.complete) { // 圖像已加載，直接添加點擊事件處理程序 addClickHandler(image); } else { // 圖像尚未加載，等待加載完成後再添加點擊事件處理程序 image.addEventListener('load', () => { addClickHandler(image); }); } }); isEventActive = true; } } document.addEventListener('keydown', (event) => { if ((event.key === 'q' && event.ctrlKey) || event.key === 'F8') { toggleEvent(); // 切換事件的狀態 } }); function transformImageUrl(url) { // 使用正則表達式匹配URL中的目標部分 const regex = /https:\/\/cache.ptt.cc\/c\/https\/i.imgur.com\/([^?]+)/; const match = url.match(regex); if (match) { // 如果匹配成功，構建新的URL const imgurId = match[1]; return `https://i.imgur.com/${imgurId}`; } else { // 如果沒有匹配到目標部分，返回原始URL return url; } } // 創建一個函數，用於添加點擊事件處理程序並處理圖像的src function addClickHandler(image) { image.addEventListener('click', clickHandler); } // 創建一個函數，用於處理點擊事件 function clickHandler() { let src = this.src; src = transformImageUrl(src); const textArea = document.createElement('textarea'); textArea.value = src; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); // 使用 toastr 進行通知 toastr.success('網址複製完成: ' + src); } ``` ## 觀念筆記 這個小腳本總共使用了大概三種觀念， 第一種就是toast的套件使用， 第二個是監聽鍵盤做開關， 第三個則是程式本身對於img的監聽，把src複製到剪貼簿。 ### 第一部分:套件 使用套件在於腳本，必須利用appendChild，先使用create的API製作出放置CDN的link元素， 再把它append到網頁上，則可以使用其套件。 ### 第二部分:監聽鍵盤 這腳本啟動與關閉是透過監聽鍵盤的，ctrl+q或F8這部分就是純粹監聽。 ``` document.addEventListener('keydown', (event) => { if ((event.key === 'q' && event.ctrlKey) || event.key === 'F8') { toggleEvent(); // 切換事件的狀態 } }); ``` 裡面寫了一個toggleEvent是因為想要設定可以開開關關。 ### 第三部分:程式本身 這邊有一點小技巧是複製到剪貼簿，其實以前文章也有寫過教學，是個常見實用的招數： ``` const textArea = document.createElement('textarea'); textArea.value = src; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); ``` 再來就是針對網頁上全部的img元素，去監聽點擊事件、移除事件這兩個。 ``` const images = document.querySelectorAll('img'); function addClickHandler(image) { image.addEventListener('click', clickHandler); } function removeClickHandler(image) { image.removeEventListener('click', clickHandler); } ``` 之後這兩個事件要寫在toggle裡面，當開啟的條件就執行新增事件；關閉就執行解除綁定 開啟也就是： ``` images.forEach((image) => { // 檢查圖像是否已加載 if (image.complete) { // 圖像已加載，直接添加點擊事件處理程序 addClickHandler(image); } else { // 圖像尚未加載，等待加載完成後再添加點擊事件處理程序 image.addEventListener('load', () => { addClickHandler(image); }); ``` 關閉則是： `images.forEach(removeClickHandler);` ## 心得 這次的小腳本功能非常簡單，寫起來邏輯也是很清晰透明，沒有什麼彎曲。 雖然簡單，但是寫起來功能非常實用！ 這就是針對懶人專用的！ 其實沒有人規定前端這種東西要寫得多大，多了不起/ᐠ｡ꞈ｡ᐟ\ 好像你很屌、很懂前端、框架，那個是一回事，能夠完成自己的需求也很美好。 很久沒更新了，這次的酷酷小腳本應該很爽⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾ 好好的來玩前端吧，未來還有更大的宇宙！
## 介紹 編寫乾淨的程式碼是每個軟體開發人員的基本技能。乾淨的程式碼不僅使您的程式碼庫更易於維護和理解，而且還能促進團隊成員之間的協作。在這篇綜合文章中，我們將探討什麼是乾淨的程式碼、為什麼它很重要，並為您提供一組最佳實踐和原則來幫助您編寫乾淨且可維護的程式碼。 - 原文出處：https://dev.to/favourmark05/writing-clean-code-best-practices-and-principles-3amh --- ## 什麼是乾淨程式碼？ 乾淨的程式碼是易於閱讀、易於理解且易於修改的程式碼。它是沒有不必要的複雜性、冗餘和混亂的程式碼。乾淨的程式碼遵循一組約定和最佳實踐，使其更加一致，使多個開發人員更容易無縫地處理同一個專案。 ## 為什麼乾淨的程式碼很重要？ 1. **可讀性**：乾淨的程式碼易於閱讀，這意味著任何人 - 包括未來的你 - 都可以快速理解它。這減少了掌握程式碼功能所需的時間，從而加快了開發和除錯速度。 2. **可維護性**：程式碼的讀取次數多於編寫次數。當您編寫乾淨的程式碼時，隨著時間的推移，維護和擴展應用程式將變得更加容易。這在軟體開發生命週期中至關重要，因為專案經常發展和成長。 3. **協作**：簡潔的程式碼鼓勵協作。當您的程式碼乾淨且組織良好時，其他團隊成員就可以有效地處理它。這使得劃分任務和同時處理程式碼庫的不同部分變得更容易。 4. **減少錯誤**：乾淨的程式碼可以減少引入錯誤的可能性。難以理解的程式碼在修改或增強過程中更容易出錯。 5. **效率**：乾淨的程式碼就是高效率的程式碼。它通常執行速度更快並且使用更少的資源，因為它避免了不必要的操作和複雜性。 現在我們了解了為什麼乾淨的程式碼很重要，讓我們深入研究一些最佳實踐和原則來幫助您編寫乾淨的程式碼。 ## 編寫簡潔程式碼的最佳實踐和原則 1. **有意義的變數和函數名稱** 對變數、函數、類別和其他辨識碼使用描述性名稱。精心選擇的名稱可以傳達實體的目的，使程式碼更容易理解。避免使用單字母變數名或神秘的縮寫。 ``` # Bad variable name x = 5 # Good variable name total_score = 5 ``` 2. **保持函數和方法簡短** 函數和方法應該簡潔並專注於單一任務。單一職責原則（SRP）指出，一個函數應該要做一件事，並且把它做好。較短的函數更容易理解、測試和維護。如果函數變得太長或太複雜，請考慮將其分解為更小、更易於管理的函數。 ``` // Long and complex function function processUserData(user) { // Many lines of code... } // Refactored into smaller functions function validateUserInput(userInput) { // Validation logic... } function saveUserToDatabase(user) { // Database operation... } ``` 3. **評論和文件** 謹慎使用評論，當你使用評論時，要讓它們變得有意義。程式碼應該盡可能不言自明。文件（例如內嵌註解和自述文件）可協助其他開發人員了解程式碼的目的和用法。記錄複雜的演算法、重要的決策和公共 API。 ``` # Bad comment x = x + 1 # Increment x # Good comment # Calculate the total score by incrementing x total_score = x + 1 ``` 4. **一致的格式和縮排** 堅持一致的編碼風格和縮排。這使得程式碼庫看起來乾淨且有組織。大多數程式語言都有社群接受的編碼標準（例如，Python 的 PEP 8、JavaScript 的 eslint），您應該遵循。一致性也適用於命名約定、間距和程式碼結構。 ``` // Inconsistent formatting if(condition){ doSomething(); } else { doSomethingElse(); } // Consistent formatting if (condition) { doSomething(); } else { doSomethingElse(); } ``` 5. **DRY（不要重複）原則** 避免重複程式碼。重複的程式碼更難維護並增加不一致的風險。將通用功能提取到函數、方法或類別中以提高程式碼的可重複使用性。當您需要進行更改時，只需在一個地方進行即可。 假設您正在開發一個 JavaScript 應用程式來計算購物車中商品的總價。最初，您有兩個單獨的函數來計算每種商品類型的價格：一個用於計算一本書的價格，另一個用於計算筆記型電腦的價格。這是初始程式碼： ``` function calculateBookPrice(quantity, price) { return quantity * price; } function calculateLaptopPrice(quantity, price) { return quantity * price; } ``` 雖然這些函數有效，但它們違反了 DRY 原則，因為計算總價的邏輯對於不同的商品類型是重複的。如果您有更多的專案類型需要計算，您最終將重複此邏輯。為了遵循DRY原則，提高程式碼的可維護性，可以對程式碼進行如下重構： ``` function calculateItemPrice(quantity, price) { return quantity * price; } const bookQuantity = 3; const bookPrice = 25; const laptopQuantity = 2; const laptopPrice = 800; const bookTotalPrice = calculateItemPrice(bookQuantity, bookPrice); const laptopTotalPrice = calculateItemPrice(laptopQuantity, laptopPrice); ``` 在此重構的程式碼中，我們有一個calculateItemPrice函數，它根據作為參數提供的數量和價格計算任何商品類型的總價。這遵循了 DRY 原則，因為計算邏輯不再重複。 現在，您可以通過使用適當的數量和價格值呼叫calculateItemPrice來輕鬆計算書籍、筆記本電腦或任何其他商品類型的總價。這種方法提高了程式碼的可重用性、可讀性和可維護性，同時降低了重複程式碼引起的錯誤風險。 6. **使用有意義的空白** 使用空格和換行符正確設置程式碼格式。這增強了可讀性。使用空格來分隔程式碼的邏輯部分。格式良好的程式碼更容易瀏覽，減少讀者的認知負擔。 ``` // Poor use of whitespace const sum=function(a,b){return a+b;} // Improved use of whitespace const sum = function (a, b) { return a + b; } ``` 7. **錯誤處理** 優雅地處理錯誤。在程式碼中使用適當的 try-catch 塊或錯誤處理機制。這可以防止意外崩潰並為除錯提供有價值的訊息。不要抑制錯誤或在沒有正確響應的情況下簡單地記錄錯誤。 ``` // Inadequate error handling try { result = divide(x, y); } catch (error) { console.error("An error occurred"); } // Proper error handling try { result = divide(x, y); } catch (error) { if (error instanceof ZeroDivisionError) { console.error("Division by zero error:", error.message); } else if (error instanceof ValueError) { console.error("Invalid input:", error.message); } else { console.error("An unexpected error occurred:", error.message); } } ``` 8. **測試** 編寫單元測試來驗證程式碼的正確性。測試驅動開發 (TDD) 可以迫使您預先考慮邊緣情況和預期行為，從而幫助您編寫更清晰的程式碼。經過良好測試的程式碼更加可靠並且更容易重構。 ``` // Example using JavaScript and the Jest testing framework test('addition works correctly', () => { expect(add(2, 3)).toBe(5); expect(add(-1, 1)).toBe(0); expect(add(0, 0)).toBe(0); }); ``` 9. **重構** 定期重構你的程式碼。隨著需求的變化以及您對問題域的理解的加深，請相應地調整您的程式碼。隨著專案的發展，重構有助於保持乾淨的程式碼。必要時不要害怕重新存取和改進現有程式碼。 假設您有一個函數，可以計算購物車中具有固定折扣百分比的商品的總價： ``` function calculateTotalPrice(cartItems) { let totalPrice = 0; for (const item of cartItems) { totalPrice += item.price; } return totalPrice - (totalPrice * 0.1); // Apply a 10% discount } ``` 最初，此函數計算總價並應用 10% 的固定折扣。然而，隨著專案的發展，您意識到您需要支持可變折扣。為了重構程式碼使其更加靈活，可以引入折扣參數： ``` function calculateTotalPrice(cartItems, discountPercentage) { if (discountPercentage < 0 || discountPercentage > 100) { throw new Error("Discount percentage must be between 0 and 100."); } let totalPrice = 0; for (const item of cartItems) { totalPrice += item.price; } const discountAmount = (totalPrice * discountPercentage) / 100; return totalPrice - discountAmount; } ``` 在這段重構的程式碼中： * 我們在calculateTotalPrice函數中新增了discountPercentage參數，讓您在呼叫函數時指定折扣百分比。 * 我們對discountPercentage 參數進行驗證，以確保其落在有效範圍內（0 到100%）。如果不在範圍內，我們會拋出錯誤。 * 折扣計算現在基於提供的discountPercentage，使功能更加靈活，能夠適應不斷變化的需求。 通過這種方式重構程式碼，你提高了它的靈活性和可維護性。您可以輕鬆地調整該函數來處理不同的折扣場景，而無需重寫整個邏輯。這證明了隨著專案的發展和需求的變化定期進行程式碼重構的重要性。 10. **版本控制** 使用 Git 等版本控制系統來跟踪程式碼更改。這使您可以與團隊成員有效協作，在必要時恢復到以前的版本，並維護專案開發的清晰歷史記錄。 Git 提供了程式碼審查、分支和合併工具，促進協作和程式碼整潔。 ##結論 編寫乾淨的程式碼不僅僅是一套規則，更是一種心態和紀律。它是關於建立易於閱讀、維護和擴展的軟體。通過遵循這些最佳實踐和原則，您可以成為一名更熟練的開發人員，生成高質量的程式碼。投入時間仔細檢查其他工程師的程式碼庫，特別是在開源專案中，可能是一種啟發性的體驗。通過這種探索，您將獲得對不同編碼風格和策略的寶貴見解。這種接觸使您能夠提煉出編寫原始、可持續程式碼庫的精髓。請記住，乾淨的程式碼是一個持續的旅程，通過練習，它會成為第二天性，從而實現更高效、更愉快的軟體開發。
測試程式碼是軟體開發最重要的方面之一，因為它可以確保產品的品質、可擴展性和可靠性。 但是，如果沒有任何指導，編寫有效的測試可能會很困難。測試程式碼可能比實際功能的程式碼更複雜、更難維護！ 原文出處：https://dev.to/one-beyond/the-5-principles-of-unit-testing-1p5f ## 1.精簡和準確的測試 測試程式碼必須**簡單且易於使用**。任何查看測試的人都應該立即知道測試的內容及其目的是什麼。開發測試應該以很少的精力和時間投入帶來巨大的價值。 > _您是否需要超過 30 秒的時間來閱讀和理解您的測試？重寫它！_ 測試“覆蓋率”是重點嗎？不！ **僅測試必要的部份就好**。為了敏捷性和簡單性，最好放棄一些測試，**只測試主要業務邏輯和主要邊緣情況就好**。 ## 2.測試行為，而不是元件實作 不要檢查程式碼中的每一行和內部變數。測試時，您應該**專注於結果**。即使方法內的程式碼被重構，結果也應該永遠保持不變！ 這樣，如果程式碼庫發生更改，您**不需要重寫測試**。 ``` // Wrong ❌ - Test behaviour describe('Evaluation Service', () => { describe('Register Students', () => { it('Should add new students to the evaluation service', () => { const studentJosh = { id: 1, name: 'Josh McLovin', average: 6.98, } evaluationService.addStudent(studentJosh) expect(evaluationService._students[0].name).toBe('Josh') expect(evaluationService._students[0].average).toBe(6.98) }) }) }) ``` ``` // Right ✅ - Test behaviour describe('Evaluation Service', () => { describe('Register Students', () => { it('Should add new students to the evaluation service', () => { const studentJosh = { id: 1, name: 'Josh McLovin', average: 6.98, } evaluationService.addStudent(studentJosh) expect(evaluationService.getStudentAverage('Josh')).toBe(6.98) }) }) }) ``` ## 3. 關於命名和結構：AAA 模式 您是否曾經遇到過名為“_它應該[...]正確_”的失敗測試，但花了幾分鐘才找到問題所在？ 良好命名和結構可以讓您快速且準確地找到任何失敗的測試，最終節省您的寶貴時間。因此，讓我們深入探討兩個關鍵原則，以便在下次測試時牢記： ### 3.1 經過深思熟慮的測試命名： 在命名您的測試時，請嘗試合併以下資訊： - **正在測試什麼**？ - **什麼情況**？ - **預期結果**是什麼？ ``` // Right ✅ - Test naming // 1. What is being tested: describe('Evaluation Service', () => { describe('Evaluate Students', () => { // 2 & 3. Context and expected result it('If the student grade is below the minimum grade, student should be suspended', () => { const students = [ { name: 'Mark', grade: 4.25 }, { name: 'Colin', grade: 6.7 }, { name: 'Ben', grade: 5.3 }, ] const result = evaluationService.evaluateStudents({ students, minGrade: 5 }) expect(result['Mark']).toBe('suspended') }) }) }) ``` ### 3.2 測試程式碼結構的AAA模式： 如果您想維護一個可讀且易於理解的測試套件，請按如下方式建立測試： - **安排**：設定模擬所需情況所需的所有程式碼。這可以包括初始化變數、模擬響應、實例化被測單元等。 - **行為**：執行正在測試的內容，通常在一行程式碼中。 - **斷言**：檢查得到的結果是否為預期的結果。與上面的一樣，這應該只需要一行。 ``` // Right - AAA Testing Pattern describe('Evaluation Service', () => { describe('Average Calculation', () => { it('Should calculate the average grade of all the students', () => { // Arrange: create an object with the student names and their grades const students = [ { name: 'Mark', grade: 4 }, { name: 'Colin', grade: 10 }, { name: 'Ben', grade: 7 }, { name: 'Tim', grade: 3 }, ] // Act: execute the getAverage method const avg = evaluationService.getAverage(students) // Assert: check if the result is the expected one -> (4+10+7+3)/4 = 6 expect(avg).toEqual(6) }) }) }) ``` ##4。確定性和隔離測試 如果一個失敗的測試使您的整個套件變紅，那麼您可能沒有以正確的方式處理它！ 測試應該**獨立和隔離**，一次針對並處理一個特定邏輯，從而完成更快、更穩定的測試套件。 **如果您不**獨立編寫測試會發生什麼？ - 您將無法找出錯誤和問題的**確切原因和位置**。 - 重構測試時，您必須**更新和同步多個測試**。 - 您將無法以任何順序執行測試，這可能會導致**破壞或跳過某些斷言或期望**。 ## 5。基於屬性的測試和真實資料 厭倦了在測試中編寫大量可能的輸入？基於屬性的測試可以為您做到這一點！……那是什麼？ 基於屬性的測試建立了數百種可能的組合，強調了測試並**增加了發現以前未被注意到的錯誤的機會**。這種方法甚至可以傳回可能導致意外結果的輸入。 [JSVerify](https://github.com/jsverify/jsverify) 或 [Fast-Check](https://github.com/dubzzz/fast-check) 等函式庫提供了促進基於屬性的測試的基本工具。 但是，如果您不想深入進行如此廣泛的測試，那麼盡可能利用**真實資料**至關重要。像“abc”或“1234”這樣的輸入可能會在實際失敗時錯誤地通過測試。 ``` // Wrong ❌ - False Positive - Test that passes even though it shouldn't class EvaluationService { _students = []; addStudent(student) { // Add the student if the name has no numbers if(!student.name.matches(/^([^0-9]*)$/)){ this._students.push(student); } } } describe('Evaluation Service', () => { describe('Register Students', () => { it('Should add students to the Evaluation service', () => { const mockStudent = { id: 2, name: 'username', average: 7 } // Won't fail because the name is a string without number -> We are not checking what happens if the user // inputs a name with a number. evaluationService.addStudent(mockStudent) expect(evaluationService.getStudentAverage('username')).toBe(7) }) }) }) // In the example above, we are making a test so the test passes, instead of looking for edge cases with realistic data ``` ##額外提示！ 如果您在測試元件中的任何邏輯時遇到困難，這可能反映出您也許應該將元件邏輯分解為更小、更容易且可測試的程式碼片段！ 總而言之，遵循此最佳實踐可能會帶來一種新的、可讀且可維護的方法來測試您喜愛的生產程式碼。 > 經過測試的應用程式才是可靠的應用程式！
阿川收到網友提問如下： ``` 站長阿川您好 我是一名App工程師 從2013年第一份工作到現在近10年 這十年我從工程師到資深工程師到管理職位都有相關經驗 一共經歷四份工作 離開公司原因大多是與人理念不合 今年邁入40歲 目前在一間外商工作 年薪約200左右 最近又再找尋新機會 但是相關職位看到我的經歷常常被拒絕 因為該職位不想要這麼資深的 不然就是年薪必須砍半 最近有一個機會可以加入幾個創業家所組成的公司 缺點是薪資可能只剩下現有的1/3 優點是可以接觸相關人士學到創業可能所需的技能 也可以藉由這樣機會建立屬於自己的產品一步步養活自己 在網路上看到您的文章彷彿醍醐灌頂 也對於長年職涯生命握在別人手上感到非常不適應 但是我明白產品可能不是自身想像那麼容易打造 不過我仍想試試看 不知道您這邊是否有什麼想法可以對我未來要走的路提供一些建議 非常感謝您撥空看完 ``` 這主題很好，我決定單獨寫一篇文章討論這件事情，跟大家分享一下 --- 首先，這位朋友目前的工作狀況，外商、200萬年薪，如果工作壓力不大、下班時間正常，辦公室氣氛融洽 這麼好的條件，如果放棄這份工作，實在相當可惜！ 有沒有考慮利用下班＆週末的時間，寫一些自己的作品、app，試試看？ 一人獨立開發，或者找朋友一起經營，都可以，做完之後，到相關的 FB 社團、批踢踢看板，宣傳一下 會學到很多商業、經營、行銷的技能，會很好玩 也或許，你會發現要做的事情太多、太雜、太難，你會滿不適應的，那樣的話，你會重新看見現職公司的美好 --- 再來，如果目前的公司實在很煩，除了高薪之外，工時、工作內容、環境壓力，你根本通通都不喜歡、鐵了心想要離職 那麼眼前的選項就是 - 找類似工作，薪水變二分之一 - 前往新創嘗試，薪水變三分之一 這樣的話，我有一個小原則跟你分享 # 職涯判斷技巧：Ctrl+Z 不心痛原則 這是我發明給自己，在面臨重大決定會用的一個原則 Ctrl+Z 是工程師每天會用到的快捷鍵：「恢復上一動」 在面臨選項的時候，可以去想想：「恢復上一動」的成本會很高嗎？ ### 「我該先做哪一個決定，到時反悔的話，可以 Ctrl+Z 不心痛呢？」 舉例來說，社會新鮮人有點想考公務員 vs 想去業界上班看看 如果先考公務員，工作之後迷惘，想辭職去業界，這時「Ctrl+Z」的成本就非常高，因為當初花了數個月準備國考 如果先去業界上班，工作之後迷惘，想去考公務員，這時「Ctrl+Z」的成本就低很多，因為當初就是花一些時間面試而已 所以迷惘的社會新鮮人，我都是建議先去業界面試看看，再去考公務員 --- 再舉一個例子，年輕工程師想去大公司面試 vs 想去新創面試 大公司面試流程很多、面試成本很高，去新創通常聊一個下午就錄取了 所以迷惘的年輕工程師，我都是建議先去新創工作看看，如果之後再去大公司上班，心態就會很穩，因為你知道新創時髦的外表底下，其實愚蠢的地方也不少，你會比別人更看見大公司的美好 如果到了大公司才嚮往新創，到時再次反悔、重新面試大公司的成本就高很多、這樣很浪費時間 --- 我認為現代人，不管做什麼選擇，一定都會覺得迷惘、好奇當初沒做的那個選擇、常常會有遺憾 所以重點不是「如何第一次就做出正確決定」，因為做不到 重點是「**我該先做哪一個決定，到時反悔的話，可以 Ctrl+Z 不心痛呢？**」 這種路徑，比較不留遺憾，因為各種路都走過了，並且算是一種逐漸認識自己的過程 這樣做決定，會容易許多吧！我自己都是這樣做的～ --- 以這位網友面臨的狀況： - 降薪50%去類似環境的大公司上班，然後繼續迷惘新創公司是什麼樣子 - 降薪66%去新創公司看看，然後可能很喜歡、也可能發現是在浪費時間 如果選後者，去工作半年一年，真的不喜歡，頂多就是回去找大公司面試，這樣「Ctrl+Z」的成本也不高吧？ 我會覺得就去新創看看也沒關係，因為之後反悔的成本也沒多高，而且這種事就是體驗過才知道 # 結論 其實創新、創業，極度困難、要做的事情也很雜亂 在我跟各種新創公司合作的經驗來說，很多時候其實也是浪費時間、有點像在幫老闆圓個人夢想，產品本身很爛。當然我也跟很多優秀新創合作過、學到很多寶貴技能 總之去新創不一定好玩，也不一定學得到東西 但我認為有策略性地、管理好各種職涯選擇的成本、在過程中認識自己、增廣見聞、降低迷惘，是很重要的 這位網友如果本身有房貸、車貸、家庭孩子要養，那麼這個抉擇確實非常困難 另一方面，職業生涯不是只有充實金錢＆地位，能夠充實人生經驗＆體驗，也是很有意義的，不是嗎？ 建議靜下心，好好的幫自己分析一下、聽聽看內心的聲音，新選項真的讓你有「義無反顧」的感覺嗎？ --- 我另外還有一些幫助工程師觀察「眼前這位迷人的創業者，有沒有可能是個地雷」的技巧，有機會再跟大家分享吧～！ 以上，簡單幾點分享，希望對大家有幫助，祝各位都有滿意、幸福的職業生涯！
https://www.youtube.com/watch?v=Rr5AqASIyxw ## TL;DR - 在 JSX 使用 0 時，雖然是 falsy 但還是渲染出來 - [官方文件特別提醒要注意](https://react.dev/learn/conditional-rendering#logical-and-operator-:~:text=in%20its%20place.-,Pitfall,-Don%E2%80%99t%20put%20numbers) - [hackmd 版本](https://hackmd.io/@jason60810/BkKJwzk6h) ## Logical AND operator (&&) 在使用 `&&` 時要特別注意數字 0 的使用。 常見情況 : 根據是否是空陣列決定要不要印出陣列。 ### [範例程式碼](https://stackblitz.com/edit/react-uufonv?file=src%2FApp.js) ### 錯誤使用方法 1. 紅色 : 把 0 渲染出來 ### 解決方法 1. 變成布林值 1. 綠色 : 判斷是否大於 0 2. 綠色 : 利用兩個 `!!` 2. 橘色 : 使用 Logical OR operator (||) 
https://youtu.be/I7dwJxGuGYQ ## TL;DR - 在使用 useContext 時，一定要將其包裝成 custom hook - [好讀版本](https://hackmd.io/@jason60810/rklVqNUh2) - [React 官方文件新增了 TypeScript 使用專文](https://react.dev/learn/typescript?fbclid=IwAR3Pgkr8xpS48Vwa0ADo3oagaAPKX1q05jHhtbXH8ltV8MKwa8FAvePoXPU) - [英文版本](https://jason60810.hashnode.dev/always-use-a-custom-hook-for-context-api-not-usecontext-react-context-api-typescript) ## 資料夾結構 ( 使用 next app route )  ### theme-context.tsx 一定要加上 `use client`，因為 useState 只能在 client component 運作 ， **特別注意，就算這裡加了`use client`，所有的子層還是 server component (預設)**  ### layout.tsx 加上 provider 之後，下面所有的子層都可以拿到值，不用用 prop 一個一個傳下去  ### page.tsx  ### logo.tsx 1. 因為 useContext 要在 client component 運作，所以要加上 `use client`。 2. 當使用 useContext 時，一定要引入 ThemeContext，用起來很麻煩 3. 因為 ThemeContext 預設是 null，所以當不是在 provider 裡使用 `useContext` 時 ( Logo component )，會發生錯誤，因此需要先確認有 context  舉例:不是在 provider 裡使用 `useContext`  ### 創建 custom hook  ### 使用 custom hook 現在引入 ThemeContext 和處理錯誤的問題，已經抽離到 custom hook 中  ### 加上型別 1. React.ReactNode，可以接受 JavaScript primitives ，如果只想要是 jsx 可以使用 React.ReactElement ( [react 官方文件](https://react.dev/learn/typescript#typing-children) ) 2. `type Theme` 可以讓 `useState` 在 get 和 set 時，可以使用正確的型別，例如:當想要 `setTheme('blue')` 時，會報錯，因為 `type Theme` 只有 'dark' 和 'light' 3. 在給予 createContext 型別時，可以利用 ts 的 union 讓 createContext 知道可能有 null 這個型別 ( [react 官方文件](https://react.dev/learn/typescript#typing-usecontext) ) 
## 課程目標 - 學會基本指令 ## 課程內容 繼續上一課的內容，這次在同個資料夾內，再新增一個檔案 `my-document-2.txt`，裡面放入以下內容 ``` 我的第二個筆記檔案 ``` 接著打開 Github Desktop 看看狀況 會看到 `Changes` 分頁下面，現在有兩個檔案 分別點選檔案，可以在右側主視窗看到內容 --- 在 git 的觀念裡面，git 預期我們每次工作，都會修改到很多檔案 每次工作到一段落時，要提交進度給團隊時，都會一口氣將這些檔案變化送出去 這個所謂的「提交」，在 git 中稱之為 `Commit` 所以，你會很常聽到工程師說「這個 commit」、「那個 commit」、「上次的 commit」、「你昨天的 commit」 來試試看提交我們的第一次版本紀錄吧！ 每次提交，都需要打一段提示訊息，方便日後翻閱，大致知道每個提交的內容 請在左下角的 `Summary` 輸入 ``` this is my first commit, i am so happy! ``` `Description` 可以省略，不用輸入 接著點擊 `Commit to main` 你會發現 `Changes` 分頁列表清空了！本來的兩個檔案不見了 這是因為 `Changes` 代表「這次正在修改的檔案」，送出 commit 代表「本次修改完成並提交」了，所以就不再有「這次正在修改的檔案」了 請點選旁邊的 `History` 分頁，會看到剛剛的 commit，點選 commit 可以看到相關的檔案內容變化，很酷吧！ --- 讓我們多提交幾次檔案，試試看多次提交的感覺！ 先建立新檔案，請建立 `my-document-3.txt` 並放入以下內容 ``` 我的第三個筆記檔案 ``` 然後在 `Summary` 輸入 ``` add another work ``` 之後就 `Commit to main` 直接點下去！又送出一筆 commit 囉！ --- 來，我們再建立新檔案一次，請建立 `my-document-4.txt` 並放入以下內容 ``` 我的第四個筆記檔案 ``` 然後在 `Summary` 輸入 ``` add one more work ``` 之後就 `Commit to main` 直接點下去！又送出一筆 commit 囉！ --- 點開 `History` 分頁看看吧！ 會看到剛剛的三筆 commit 記錄都在裡面 點擊不同的 commit 可以看到對應的 commit 內容 Git 會追蹤整個資料夾內的所有變化！包括：建立新檔案、檔案內容的增加、檔案內容的減少、檔案被刪除 這些變化也會在每次提交 commit 時被記錄下來，所以都可以在 `History` 分頁看到記錄，很強大吧！ ## 課後作業 接續前一課的作業，你的專案目前有一個 txt 檔案 這次要來模擬實際工作的時候，反覆修改檔案、增減檔案的過程 請按照以下順序送出 commit **第一個 commit：** 請把目前的 `me.txt` 檔案放進 commit 裡面。 **第二個 commit：** 你改變心意，覺得拆成多個檔案比較清楚，之後分別寫內容比較好 請把 `me.txt` 檔案的內容清空，改放以下內容 ``` 我是XXX，請參考其它檔案，瞭解更多我的介紹與背景。 ``` 新增 `about.txt` 以及 `background.txt` 兩個檔案 並且把 `我是誰` 的內容放進 `about.txt`，把 `我的學歷` 的內容放進 `background.txt` **第三個 commit：** 你靈機一動，覺得在履歷寫一些個人的大目標，會讓人感覺氣勢很強 新增一個 `goals.txt` 檔案，裡面放入以下內容 ``` 我的目標，是成為貴公司的 CTO（技術長）。 ``` --- 最後，點開左側的 `History` 分頁，應該會看到以上三個 commit 的訊息！ 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (1)](https://ithelp.ithome.com.tw/articles/10311621) ##### [【前端動手玩創意】google五星評分的星星(2)](https://ithelp.ithome.com.tw/articles/10311643) ##### [【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)](https://ithelp.ithome.com.tw/articles/10311672) ##### [【前端動手玩創意】一句CSS做出好看的hero section！(4)](https://ithelp.ithome.com.tw/articles/10311691) ##### [【前端動手玩創意】創造一個Skill bar(5)](https://ithelp.ithome.com.tw/articles/10311756) ##### [【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)](https://ithelp.ithome.com.tw/articles/10311999) ##### [【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)](https://ithelp.ithome.com.tw/articles/10312001) ##### [【前端動手玩創意】讓你的PDF檔案更難被抓取(8)](https://ithelp.ithome.com.tw/articles/10312046) ##### [【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)](https://ithelp.ithome.com.tw/articles/10312056) ##### [【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)](https://ithelp.ithome.com.tw/articles/10312066) ##### [【前端動手玩創意】太屌了吧！？用Class(類)製作Jquery的效果！(11)](https://ithelp.ithome.com.tw/articles/10312114) ##### [ 【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯(12)](https://ithelp.ithome.com.tw/articles/10312922) ## 前情提要 一陣子沒寫前端動手玩創意了 今天要來點好料的 我們談談關於藝術 對 就算是寫程式我們也是可以有藝術氣息的 別這麼驚訝XD 假設我有一組資料 一般人來說 最直覺的就是把html裡面的元素寫出來寫死 直覺菜鳥就是寫出來啊 ``` <div id="items_list"> <li class="buy_item">1.紅茶 <div class="price">10</div> <div class="del_btn">X</div> </li> <li class="buy_item">2.奶茶 <div class="price">15</div> <div class="del_btn">X </div> </li> <li class="buy_item">3.綠茶 <div class="price">30</div> <div class="del_btn">X</div> </li> </div> ``` 要更新則是就去更改DOM就好了 反正我都學會JS了 有什麼大不了(? 但是現在已經進入大前端時代了就算你寫原生 也會有data model的概念 這部分可以參考站長阿川寫過的好文 裡面的文筆跟邏輯 不誇張 是我見過「華文圈寫得最好的前端教學」 尤其就是這篇 關於data model的介紹 切入點非常的有趣也很有道理 有興趣的自己去花心思讀看看 [認識 data model 與 render function](https://codelove.tw/@howtomakeaturn/post/9xLo5q) 稍微有點料的前端學習者 本身就會寫一寫 想說：既然有一隻API是createElement 那是不是我可以整個html都用js寫出來(? 這是個超級有趣的觀點 ## 關於data render的概念: 「是不是我可以整個html都用js寫出來」 相傳牛頓提出三大定律以後 認為地球和八大行星一開始的慣性力叫「上帝的第一推動力」 實際上這個： 「整個html都用js寫出來」 也是推動前端往框架邁進的思考第一步 可以說是前端慣性的上帝推力了 當然如果你有打籃球 也可以比喻成上籃的第零步XD ## 觀念筆記 ### html程式碼 ``` <div id="buylist"> <h1>myBuylist 購物清單</h1> <div class="buyitem"> <label>產品名</label> <input/> <label>價錢</label> <input/><span class="addbtn">+新增</span> </div> <div id="items_list">這邊準備用JS插入東西所以這段只是說明文字</div> </div> ``` 把整個頁面的元素寫出來 但是資料的區塊保留著 因為等等我們要用JS的API去動態生成 未來直接data render 方便更新與管理 ### JS程式碼 ``` var shoplist = {}; shoplist.name = "購物清單"; shoplist.list = [ { name: "吹風機", price: "300" }, { name: "麥克筆", price: "20" }, { name: "筆記型電腦", price: "29300" }, { name: "Iphone 9", price: "5200" }, { name: "神奇海螺", price: "1000" }, ]; var item_html = "<li id={{id}} class='buy_item'>{{name}}<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_html = "<li class='buy_item total'>總價<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_price = 0; for (var i=0; i < shoplist.list.length; i++) { var item = shoplist.list[i]; total_price += item.price; var current_item_html = item_html.replace("{{num}}", i + 1) .replace("{{name}}", item.name) .replace("{{id}}", "buyitem_" + i) .replace("{{price}}", item.price); $("#items_list").append(current_item_html); } ``` 這邊值得關注的一點是資料的處理 也就是數據結構上使用物件與陣列去儲存資料 為什麼要學 陣列 為什麼要學物件 這兩個都是抽象的名詞 他們都是為了來處理資料所規劃的兩種不同內容 ## 關於物件與陣列 物件就像是RPG角色 會有很多的屬性 魔法 敏捷 力量 血量 這些屬性都是被附加在person上面 所以person.blood是一個資料 person.power是一個資料 person.magic是一個資料 最後都存在person裡面 這個person就是一個含有很多屬性的物件 感覺就是有血有肉很3D 而陣列就比較平面化 就是很多數字排成一列而已 其實沒什麼特別需要關注的 這兩個也不會不好區分 只要稍微做個比喻 都很好理解 以我們的code來講解 shoplist就是一個物件 含有一些屬性 包含名字與清單 因為清單很多 所以清單用一個陣列儲存 陣列裡面放很多個物件 這些物件就是每一個清單包含的那些購買項目 其實不用太在意誰是誰因為用看的就很清楚 最後我們用迴圈去把shoplist裡面的每一筆資料都丟進去 中途replace是文字處理 把我們設置的{{name}}這種花括號的東西換成真實資料 這部分有點樣板語言的感覺XD 其實非常有趣 很值得玩味 ## 心得 這次比較多實在的JS程式碼 就不只是玩玩切版了 算是有點靠近框架的部分(◉３◉) 動手玩創意這個系列其實靈魂之處就在於「有趣」兩個字 坊間把前端描繪成為了找工作的銅臭味 以及把切版講成無聊的工匠苦力活 我認為都是錯誤的解讀 我認為 只要是有趣的地方就是前端最有價值的地方 而不是誰學了那個框架 誰又認為哪個東西比較厲害 哪個語言比較屌 那都是很無聊的文字遊戲罷了 如果你喜歡這樣子的前端 請跟著這個系列繼續走(￫ܫ￩) 我們才只是在桃花源外的小溪旁玩水而已呢！ 未來會往天空飛翔哦XD
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
