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

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

🔍 搜尋結果：javasc

🔍 搜尋結果：javasc

掌握 JavaScript 生成器 🔥

JavaScript 是一種以其多功能性和易用性而聞名的語言，它具有多種功能，對於新手和經驗豐富的開發人員來說都非常強大。其中一項功能就是生成器。 ECMAScript 2015 (ES6) 中引入的生成器提供了一種處理迭代和非同步程式設計的獨特方法。在本文中，我們將探討什麼是生成器、它們如何運作以及它們的實際應用。 --- 什麼是 generator？ ------- 生成器是一種特殊類型的函數，可以暫停和恢復執行。與呼叫時執行完成的常規函數不同，生成器在指定點將控制權交還給呼叫者。這種暫停和恢復的能力使它們對於需要一系列值或需要更優雅地處理非同步操作的任務特別有用。 --- 文法和基本用法 ------- 生成器函數是使用`function*`語法定義的，並使用`yield`關鍵字來暫停執行。 ``` function* myGenerator() { yield 1; yield 2; yield 3; } const gen = myGenerator(); console.log(gen.next()); // { value: 1, done: false } console.log(gen.next()); // { value: 2, done: false } console.log(gen.next()); // { value: 3, done: false } console.log(gen.next()); // { value: undefined, done: true } ``` 在此範例中， `myGenerator`是產生三個值的生成器函數。 `gen`物件是透過呼叫生成器函數所建立的迭代器。呼叫`gen.next()`傳回一個具有兩個屬性的物件： `value` （產生的值）和`done` （一個布林值，指示生成器是否已完成）。 --- `yield`的力量 ---------- `yield`關鍵字不僅暫停產生器，還允許將值傳回產生器。 ``` function* countingGenerator() { let count = 0; while (true) { count = yield count + 1; } } const counter = countingGenerator(); console.log(counter.next()); // { value: 1, done: false } console.log(counter.next(10)); // { value: 11, done: false } console.log(counter.next(20)); // { value: 21, done: false } ``` 在這裡，每次呼叫`counter.next()`都會恢復生成器，並且可以傳遞一個值來替換變數`count` 。這演示了生成器如何在暫停期間維護和更新其狀態。 --- 實際應用 ---- ### 📌 迭代 生成器在需要自訂迭代邏輯的場景中大放異彩。例如，您可以建立一個生成器來迭代一系列數字甚至複雜的資料結構。 ``` function* range(start, end) { for (let i = start; i <= end; i++) { yield i; } } for (const num of range(1, 5)) { console.log(num); // 1, 2, 3, 4, 5 } ``` --- ### 📌 非同步編程 生成器與 Promise 結合可以簡化非同步程式碼。像`co`這樣的函式庫使用這種模式比嵌套回呼或承諾鏈更自然地管理非同步流。 ``` const fetch = require('node-fetch'); function* fetchData(url) { const response = yield fetch(url); const data = yield response.json(); return data; } const co = require('co'); co(fetchData, 'https://api.example.com/data') .then(data => console.log(data)) .catch(err => console.error(err)); ``` --- ### 📌 無限序列 生成器可以建立無限序列，而由於陣列的有限性，這是不可能的。這在模擬、資料流或任何需要無限系列值的場景中非常有用。 ``` function* fibonacci() { let [prev, curr] = [0, 1]; while (true) { yield curr; [prev, curr] = [curr, prev + curr]; } } const fib = fibonacci(); console.log(fib.next().value); // 1 console.log(fib.next().value); // 1 console.log(fib.next().value); // 2 console.log(fib.next().value); // 3 console.log(fib.next().value); // 5 ``` --- 結論 -- JavaScript 中的生成器提供了一個強大的機制來處理序列、管理函數呼叫之間的狀態以及簡化非同步程式碼。 它們在 ES6 中的引入為該語言增添了顯著的靈活性和強大功能，使複雜的迭代和非同步模式變得更加平易近人。 隨著您深入研究 JavaScript，掌握生成器可以增強您編寫高效且可維護程式碼的能力。無論您是處理資料流、自訂迭代器還是非同步操作，生成器都提供了一個強大的工具來提升您的程式設計工具包。 --- ***快樂編碼！*** 🔥 **[領英](https://www.linkedin.com/in/dev-alisamir)** **[X（推特）](https://twitter.com/dev_alisamir)** **[電報](https://t.me/the_developer_guide)** **[Youtube](https://www.youtube.com/@DevGuideAcademy)** **[不和諧](https://discord.gg/s37uutmxT2)** **[Facebook](https://www.facebook.com/alisamir.dev)** **[Instagram](https://www.instagram.com/alisamir.dev)** --- 原文出處：https://dev.to/alisamirali/mastering-javascript-generators-15g3

0個讚   0留言 38瀏覽

我學習了 JavaScript 並製作了一款火爆網頁應用程式 🤯

隆重介紹**[Fakedin](https://fakedin-app.netlify.app/)** - 一款可以快速為社交媒體、簡報、迷因等建立令人驚嘆的假 LinkedIn 貼文的工具 🔥 請觀看下面的小演示影片，了解其工作原理，並存取該網站親自嘗試一下 🌟 --- https://www.youtube.com/watch?v=sikfunHdhRk --- 我必須承認，該應用程式還不完美，您可能會遇到一些錯誤，但不用擔心，我會在繼續進行時修復它們。目前，我正在尋求您的寶貴回饋，以使其變得更好。 🤝 **Fakedin 連結🔗** ：https://fakedin-app.netlify.app/ 請務必檢查並分享您的回饋😇 感謝您的寶貴時間🙌 --- 另外，由於我每天發布的精彩內容，我最近在**[Linkedin](https://Linkedin.com/in/rammcodes)**上擁有了**14 萬**粉絲 ✌ 𝗙𝗼𝗹𝗹𝗼𝘄 我在**[Linkedin](https://Linkedin.com/in/rammcodes)**上取得與程式設計和 Web 開發相關的最精彩內容 💎 [![拉姆‧馬赫什瓦里 (Ram Maheshwari) (@rammcodes) Linkedin](https://i.postimg.cc/fL6k3xyT/www-linkedin-com-in-rammcodes-6.png)](https://Linkedin.com/in/rammcodes) --- 請用❤️🦄🤯🙌🔥 回覆這篇文章 &amp; 保存起來供以後使用🔖 --- 再一次感謝你 ：） --- 原文出處：https://dev.to/rammcodes/i-learned-javascript-made-a-web-app-that-went-viral-3no0

0個讚   0留言 123瀏覽

只需 2GB 記憶體即可將後端擴展到 1M 請求 ⚡️

本部落格介紹了我如何解鎖效能，使我能夠在最少的資源（2 GB RAM 1v CPU 和最小網路頻寬 50-100 Mbps）上將後端從 50K 請求擴展到 1M 請求（~16K 請求/分鐘）。 ![迷因](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0m1kiuyq575f2qzyweu.png) 它將帶你踏上一段與過去的自己的旅程。這可能是一段漫長的旅程，所以請繫緊安全帶，享受這段旅程！ 🎢 *它假設您熟悉後端和編寫 API。如果你了解一點 Go，這也是一個優勢。如果你不這樣做，也沒關係。您仍然可以按照我提供的資源來幫助您理解每個主題。 （如果您不知道 GO，這裡有一個*[*快速介紹*](https://www.youtube.com/watch?v=446E-r0rXHI)*）* 長話短說；博士， 首先，我們建立一個[可觀察性管道](https://www.observo.ai/post/what-is-an-observability-pipeline)，幫助我們監控後端的所有面向。然後，我們開始對後端進行壓力測試，直到斷點測試（當一切最終崩潰時）。 →[連接輪詢以避免達到最大連接閾值](#optimization-1-connection-pooling-️) →[實施資源限制以避免非關鍵服務佔用資源](#optimization-2-unblocking-resources-from-alloy-open-telemetry-collector) →[新增索引](#optimization-3-adding-indexes-🏎️) →[禁用隱式事務](#optimization-4-ensure-while-testing-there-is-no-blocking-transaction) →[增加 Linux 的最大檔案描述符限制](#optimization-6-increasing-the-max-file-descriptor-limit) →[限制 Goroutines](#optimization-7-avoid-overloading-goroutines) →[未來計劃](#next-steps) 後端簡介🤝 ----- 讓我簡單介紹一下後端， - 它是一個用 Golang 寫的整體 RESTful API。 - 使用[GIN](https://github.com/gin-gonic/gin)框架編寫，並使用[GORM](https://gorm.io/)作為[ORM](https://www.theserverside.com/definition/object-relational-mapping-ORM) 。 - 使用 Aurora Postgres 作為託管在 AWS RDS 上的唯一主資料庫。 - 後端是[Docker 化的](https://dev.to/documatic/how-to-dockerize-your-application-536i#:~:text=Dockerizing%20an%20application%20is%20the,for%20developers%20and%20organizations%20alike.)，我們在 AWS 上的`t2.small`實例中執行它。它具有 2GB RAM、50-100mb/s 網路頻寬、1 個 vCPU。 - 後端提供身份驗證、CRUD 操作、推播通知和即時更新。 - 對於即時更新，我們打開一個非常輕量級的[Web 套接字連接](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)，通知設備實體已更新。 我們的應用程式主要是讀取密集型，具有下降的寫入活動，如果我必須給它一個比率，它將是 65% 讀取/35% 寫入。 我可以寫一篇單獨的部落格來解釋我們為什麼選擇 - 整體架構、golang 或 postgress，但為了向您介紹[MsquareLabs 的](www.msquarelabs.com)tl;dr，我們相信「保持簡單，並建立允許我們以驚人的快節奏前進的程式碼。 資料資料資料🙊 ------- 在進行任何模擬負載生成之前，我首先將可觀察性建置到我們的後端中。其中包括追蹤、指標、分析和日誌。這使得找到問題並準確地找出造成疼痛的原因變得非常容易。當您對後端擁有如此強大的監控能力時，您也可以更輕鬆地更快地追蹤生產問題。 在我們繼續之前，讓我先簡單介紹一下指標、分析、日誌和追蹤： - 日誌：我們都知道日誌是什麼，它只是我們在事件發生時建立的大量文字訊息。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/94b2970c-34fc-4135-bed0-bf763ef098c8) - 追蹤：這是高度可見性的結構化日誌，有助於我們以正確的順序和時間封裝事件。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/9ee944e8-0637-4aa9-b076-5ff35990a8e2) - 指標：所有數字攪動資料，例如 CPU 使用率、活動請求和活動 goroutine。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/ec9a493d-6344-4c10-80e6-0db8c5c1d219) - 分析：為我們提供程式碼的即時指標及其對機器的影響，幫助我們了解正在發生的情況。 （WIP，下一篇部落格會詳細講） 要了解有關我如何將可觀察性建置到後端的更多訊息，您可以研究下一個博客（WIP），我將此部分移至另一個博客，因為我想避免讀者不知所措並只關註一件事 -**優化**） 這就是追蹤、日誌和指標的視覺化的樣子， ![截圖 2024-05-30 下午 4.53.29.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/20883b44-6f0f-42a1-b4f0-ae6ac2c04642) 所以現在我們有一個強大的監控管道+一個像樣的儀表板作為開始🚀 嘲笑高級用戶 x 100,000 🤺 ------------------ 現在真正的樂趣開始了，我們開始嘲笑愛上該應用程式的用戶。 「只有當你把你的愛（後端）置於極大的壓力時，你才會發現它的真正本質✨」 - 某個偉大的人，哈哈，idk Grafana 還提供了一個負載測試工具，因此我決定使用它，因為它只需要幾行程式碼的最少設置，因此您已經準備好了模擬服務。 我沒有觸及所有 API 路線，而是專注於最關鍵的路線，這些路線負責我們 90% 的流量。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/e42d706f-fc61-4cdd-8b0e-35113761f09c) 關於[k6](https://k6.io)的簡單介紹，它是一個基於 javascript 和 golang 的測試工具，您可以在其中快速定義要模擬的行為，它負責對其進行負載測試。無論您在主函數中定義什麼，都稱為*迭代*，k6 會啟動多個虛擬使用者單元（VU）來處理此迭代，直到達到給定的週期或迭代計數。 每次迭代構成4個請求，建立任務→更新任務→取得任務→刪除任務 ![iLoveIMG 下載 (1).jpg](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/32cb71fb-d549-48c9-88a0-ecaf48296593/c7dcc3cb-4128-44d4-b3ad-e736c96e377b) 慢慢開始，讓我們看看大約 10K 請求 → 100 VU 和 30 iter → 3000 iters x 4reqs → 12K 請求情況如何 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/84f31eec-79d5-49f9-915f-bb97b6d5f517) 這是輕而易舉的事情，沒有任何記憶體洩漏、CPU 過載或任何類型瓶頸的跡象，萬歲！ 這是 k6 的摘要，發送了 13MB 資料，接收了 89MB，平均超過 52 req/s，平均延遲為 278ms，考慮到所有這些都在單台機器上執行，這還不錯。 ``` checks.........................: 100.00% ✓ 12001 ✗ 0 data_received..................: 89 MB 193 kB/s data_sent......................: 13 MB 27 kB/s http_req_blocked...............: avg=6.38ms min=0s med=6µs max=1.54s p(90)=11µs p(95)=14µs http_req_connecting............: avg=2.99ms min=0s med=0s max=536.44ms p(90)=0s p(95)=0s ✗ http_req_duration..............: avg=1.74s min=201.48ms med=278.15ms max=16.76s p(90)=9.05s p(95)=13.76s { expected_response:true }...: avg=1.74s min=201.48ms med=278.15ms max=16.76s p(90)=9.05s p(95)=13.76s ✓ http_req_failed................: 0.00% ✓ 0 ✗ 24001 http_req_receiving.............: avg=11.21ms min=10µs med=94µs max=2.18s p(90)=294µs p(95)=2.04ms http_req_sending...............: avg=43.3µs min=3µs med=32µs max=13.16ms p(90)=67µs p(95)=78µs http_req_tls_handshaking.......: avg=3.32ms min=0s med=0s max=678.69ms p(90)=0s p(95)=0s http_req_waiting...............: avg=1.73s min=201.36ms med=278.04ms max=15.74s p(90)=8.99s p(95)=13.7s http_reqs......................: 24001 52.095672/s iteration_duration.............: avg=14.48s min=1.77s med=16.04s max=21.39s p(90)=17.31s p(95)=18.88s iterations.....................: 3000 6.511688/s vus............................: 1 min=0 max=100 vus_max........................: 100 min=100 max=100 running (07m40.7s), 000/100 VUs, 3000 complete and 0 interrupted iterations _10k_v_hits ✓ [======================================] 100 VUs 07m38.9s/20m0s 3000/3000 iters, 30 per VU ``` 讓我們增加 12K → 100K 請求，發送 66MB，接收 462MB，CPU 使用率峰值達到 60%，記憶體使用率達到 50%，執行需要 40 分鐘（平均 2500 個請求/分鐘） ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/838e351e-ac9e-47a1-af51-4f69f75f5de0) 一切看起來都很好，直到我在日誌中看到一些奇怪的東西，“::gorm: 連接太多::”，快速檢查RDS 指標，確認打開的連接已達到410，即最大打開連接的限制。它是由 Aurora Postgres 本身[根據實例的可用記憶體](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraPostgreSQL.Managing.html#AuroraPostgreSQL.Managing.MaxConnections)設定的。 您可以透過以下方法檢查， `select * from pg_settings where name='max_connections';` ⇒ 410 Postgres 為每個連接產生一個進程，考慮到它會在新請求到來時打開一個新連接並且之前的查詢仍在執行，因此這是極其昂貴的。因此 postgress 對可以開啟的並發連線數進行了限制。一旦達到限制，它會阻止任何進一步連接資料庫的嘗試，以避免實例崩潰（這可能會導致資料遺失） ### 優化一：連接池⚡️ 連接池是一種管理資料庫連接的技術，它重用打開的連接並確保它不會超過閾值，如果客戶端請求連接並且超過最大連接限制，它會等待直到連接被釋放或拒絕該請求。 這裡有兩個選項，要么執行客戶端池，要么使用單獨的服務，例如[pgBouncer](pgbouncer.org) （充當代理）。當我們規模較大且我們有連接到相同資料庫的分散式架構時，pgBouncer 確實是一個更好的選擇。因此，為了簡單性和我們的核心價值觀，我們選擇繼續進行客戶端池化。 幸運的是，我們使用的 ORM GORM 支援連接池，但[在幕後使用資料庫/SQL](https://gorm.io/docs/connecting_to_the_database.html#Connection-Pool) （golang 標準套件）來處理它。 有一些非常簡單的方法可以處理這個問題， ``` configSQLDriver, err := db.DB() if err != nil { log.Fatal(err) } configSQLDriver.SetMaxIdleConns(300) configSQLDriver.SetMaxOpenConns(380) // kept a few connections as buffer for developers configSQLDriver.SetConnMaxIdleTime(30 * time.Minute) configSQLDriver.SetConnMaxLifetime(time.Hour) ``` - `SetMaxIdleConns` → 保留在記憶體中的最大空閒連接，以便我們可以重複使用它（有助於減少開啟連接的延遲和成本） - `SetConnMaxIdleTime` → 我們應該在記憶體中保留空閒連接的最長時間。 - `SetMaxOpenConns` → 與資料庫的最大開啟連接，因為我們在同一個 RDS 實例上執行兩個環境 - `SetConnMaxLifetime` → 任何連線保持開啟的最長時間 現在更進一步，500K 請求（4000 個請求/分鐘）和 20 分鐘伺服器崩潰💥，最後讓我們調查一下🔎 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/39787835-b83d-441a-a3aa-a3b9fb03fc26) 快速查看指標，然後砰！ CPU 和記憶體使用量激增。 Alloy（開放遙測收集器）佔用了所有 CPU 和內存，而不是我們的 API 容器。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/e8e764e4-31ea-44fa-b930-1bd1746d131b) ### 優化二：合金資源解鎖（開放式遙測收集器） 我們在小型 t2 實例中執行三個容器， - API開發 - API 分期 - 合金 當我們將大量負載轉儲到 DEV 伺服器時，它開始以相同的速率產生日誌和跟踪，從而呈指數級增加 CPU 使用率和網路出口。 因此，確保合金容器不會超出資源限制並妨礙關鍵服務非常重要。 由於合金在 docker 容器內執行，因此更容易強制執行此約束， ``` resources: limits: cpus: '0.5' memory: 400M ``` 此外，這次日誌不為空，存在多個上下文取消錯誤 - 原因是請求逾時，並且連接突然關閉。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/ace0ce7e-990e-43ea-a871-dc18888e3968) 然後我檢查了延遲，這太瘋狂了 😲 經過一段時間後，平均延遲為 30 - 40 秒。多虧了跟踪，我現在可以準確地找出是什麼導致瞭如此巨大的延遲。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/04be9892-5791-4834-b418-e9f417c0781d) 我們在 GET 操作中的查詢非常慢，讓我們對查詢執行[`EXPLAIN ANALYZE`](https://www.postgresql.org/docs/current/sql-explain.html) ， ![截圖 2024-06-11 9.55.10 PM.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/3cf82d23-53c5-4976-aacc-2fa0d6ab2353) LEFT JOIN 花了 14.6 秒，而 LIMIT 又花了 14.6 秒，我們如何優化它 - INDEXING ### 優化3：新增索引🏎️ 為`where`或`ordering`子句中常用的欄位新增索引可以將查詢效能提高五倍。在新增 LEFT JOIN 表和 ORDER 欄位的索引後，相同查詢花費了 50 毫秒。你能從**14.6 秒 ⇒ 50 毫秒**開始思考嗎？ （但要注意盲目加入索引，會導致CREATE/UPDATE/DELETE慢死） 它還可以更快地釋放連接，並有助於提高處理巨大並發負載的整體能力。 ### 最佳化 4：確保測試時沒有阻塞 TRANSACTION 🤡 從技術上講不是優化而是修復，您應該記住這一點。當您進行壓力測試時，您的程式碼不會嘗試同時更新/刪除相同實體。 在檢查程式碼時，我發現了一個錯誤，該錯誤導致每次請求時都會對用戶實體進行更新，並且當在事務內執行每個更新呼叫時，這會建立一個鎖，幾乎所有更新呼叫都被以前的更新呼叫阻止。 僅此一項修復就將吞吐量提高至 2 倍。 ### 最佳化5：跳過 GORM 的隱式 TRANSACTION 🎭 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/ab40af5b-c0fd-4c18-9067-859df56c4ec0) 預設情況下，GORM 在事務中執行每個查詢，這會降低效能，因為我們擁有極其強大的事務機制，在關鍵區域丟失事務的機會幾乎是不可能的（除非他們是實習生🤣）。 我們有一個中間件可以在到達模型層之前建立事務，並且有一個集中函數來確保控制器層中該事務的提交/回滾。 透過停用此功能，我們可以獲得[至少約 30% 的效能提升](https://gorm.io/docs/transactions.html#Disable-Default-Transaction)。 “我們卡在每分鐘 4-5K 請求的原因是這個，我認為這是我的筆記型電腦網路頻寬的問題。” - 愚蠢的我 所有這些優化帶來了 5 倍的吞吐量增益 💪，現在光是我的筆記型電腦就可以每分鐘產生 12K-18K 請求的流量。 ![截圖 2024-06-12 7.20.27 PM.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/fd440164-255f-4a4d-8389-c14365472372) ### 百萬點次數🐉 最後，每分鐘 10k-13K 請求達到 100 萬次，大約需要 2 小時，本來應該早點完成，但隨著合金重新啟動（由於資源限制），所有指標都會隨之丟失。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/6561ab09-1eb6-4b6f-92f2-92b5b2818590) 令我驚訝的是，該時間段內的最大 CPU 使用率為 60%，而記憶體使用量僅為 150MB。 Golang 的效能如此之高且處理負載的能力如此出色，這真是太瘋狂了。它具有最小的記憶體佔用。就是愛上了 golang 💖 每個查詢需要 200-400 毫秒才能完成，下一步是找出為什麼需要這麼多時間，我的猜測是連接池和 IO 阻塞減慢了查詢速度。 平均延遲降至約 2 秒，但仍有很大改進空間。 隱式優化🕊️ ------ ### 優化6：增加最大檔案描述子限制🔋 當我們在 Linux 作業系統中執行後端時，我們打開的每個網路連線都會建立一個檔案描述符，預設為 Linux 將每個進程限制為 1024 個，這阻礙了它達到峰值效能。 當我們開啟多個 Web 套接字連線時，如果有大量並發流量，我們很容易就會達到此限制。 Docker compose 提供了一個很好的抽象， ``` ulimits: core: soft: -1 hard: -1 ``` ### 優化 7：避免 goroutine 過載 🤹 作為一個 Go 開發者，我們經常認為 Goroutine 是理所當然的，只是盲目地在 Goroutine 中執行許多非關鍵任務，我們在函數之前加入`go` ，然後忘記它的執行，但在極端情況下它可能會成為瓶頸。 為了確保它永遠不會成為我的瓶頸，對於經常在 goroutine 中執行的服務，我使用帶有 n-worker 的記憶體佇列來執行任務。 ![圖片.png](https://res.craft.do/user/full/66854ea9-b711-5e28-ddbd-8d28e1defc9f/doc/355f2532-e0ec-485f-97e2-472751298750/b00e6636-6b3f-472e-99fc-f6c66ee87186) 後續步驟🏃‍♀️ -------- ### 改進：從 t2 移動到 t3 或 t3a t2是老一代的AWS通用機器，而t3和t3a、t4g是新一代。它們是可突發的實例，與 t2 相比，它們為長時間的 CPU 使用提供更好的網路頻寬和更好的效能 了解突發實例， [AWS 引入了可突發執行個體](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/burstable-performance-instances.html)類型，主要針對大多數時間不需要 100% CPU 的工作負載。因此，這些實例以基準效能 (20% - 30%) 運作。當您的實例不需要 CPU 時，他們會維護一個積分系統，它會累積積分。當 CPU 峰值發生時，它會使用該積分。這可以降低您的 AWS 運算成本和浪費。 t3a 將是一個值得堅持的好系列，因為它們的成本/效率比在可突發實例係列中好得多。 這是一個比較[t2 和 t3 的](https://www.cloudzero.com/advisor/t2-vs-t3/)不錯的部落格。 ### 改進：查詢 我們可以對查詢/模式進行許多改進來提高速度，其中一些是： - 在插入重型表中批量插入。 - 透過非規範化避免 LEFT JOIN - 快取層 - 著色和分區，但這要晚得多。 ### 改進：分析 釋放效能的下一步是啟用分析並弄清楚執行時到底發生了什麼。 ### 改進：斷點測試 為了發現我的伺服器的限制和容量，下一步是斷點測試。 ### 尾註👋 如果你讀到最後，你已經破解了，恭喜你🍻 這是我的第一篇博客，如果有不清楚的地方，或者您想更深入地了解該主題，請告訴我。在我的下一篇部落格中，我將深入研究分析，敬請關注。 您可以在[X](x.com/_rikenshah)上關注我，以獲取最新資訊:) --- 原文出處：https://dev.to/rikenshah/scaling-backend-to-1m-requests-with-just-2gb-ram-4m0c

0個讚   0留言 68瀏覽

如何使用 Ollama 和打開 WebUI 在本地執行 Llama 3

https://youtu.be/GT-Fwg124-I 我是 Llama 的忠實粉絲。 Meta 發布其 LLM 開源程式碼對整個科技界來說是一項淨收益，其寬鬆的許可證允許大多數中小型企業在幾乎沒有任何限制的情況下使用其 LLM（當然，在法律範圍內）。他們的最新版本是備受期待的 Llama 3。 Llama 3 有兩種大小：80 億和 700 億參數。這種模型經過大量文字資料的訓練，可用於各種任務，包括生成文字、翻譯語言、編寫不同類型的創意內容以及以資訊豐富的方式回答您的問題。 Meta 宣稱 Llama 3 是最好的開放模型之一，但它仍在開發中。這是與 Mistral 和 Gemma 相比的 8B 模型基準（根據 Meta）。 ![基準測試](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax9r9z2w2zghv81grbh7.png) 這就引出了一個問題：作為一個普通人，我如何在我的電腦上本地執行這些模型？ 開始使用 Ollama ----------- 這就是[奧拉瑪](https://ollama.com/)登場的地方！ Ollama 是一款免費的開源應用程式，可讓您在自己的電腦上執行各種大型語言模型，包括 Llama 3，即使資源有限。 Ollama 利用了 llama.cpp 的效能提升，llama.cpp 是一個開源程式庫，旨在允許您以相對較低的硬體要求在本地執行 LLM。它還包括一種套件管理器，使您只需一個命令即可快速有效地下載和使用 LLM。 第一步是[安裝 Ollama](https://ollama.com/download) 。它支援所有 3 個主要作業系統，其中[Windows 是「預覽版」](https://ollama.com/blog/windows-preview) （更好的說法是「測試版」）。 安裝完成後，打開您的終端。在所有平台上，命令都是相同的。 ``` ollama run llama3 ``` 等待幾分鐘，它會下載並載入模型，然後開始聊天！它應該會帶您進入與此類似的聊天提示。 ``` ollama run llama3 >>> Who was the second president of the united states? The second President of the United States was John Adams. He served from 1797 to 1801, succeeding George Washington and being succeeded by Thomas Jefferson. >>> Who was the 30th? The 30th President of the United States was Calvin Coolidge! He served from August 2, 1923, to March 4, 1929. >>> /bye ``` 您可以在這個終端聊天中整天聊天，但是如果您想要更像 ChatGPT 的東西怎麼辦？ 打開網頁介面 ------ Open WebUI 是一個可擴充的、自架的 UI，完全在[Docker](https://docs.docker.com/desktop/)內部運作。它可以與 Ollama 或其他 OpenAI 相容的 LLM 一起使用，例如 LiteLLM 或我自己的[Cloudflare Workers OpenAI API](https://github.com/chand1012/openai-cf-workers-ai) 。 假設您的電腦上已經執行了[Docker](https://docs.docker.com/desktop/)和 Ollama，[安裝](https://docs.openwebui.com/getting-started/#quick-start-with-docker-)非常簡單。 ``` docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main ``` 只要造訪 http://localhost:3000，建立帳戶，然後開始聊天！ ![OpenWebUI 範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdi1d35zh09s78o8vqvb.png) 如果您之前沒有執行過 Llama 3，則必須先關閉一些模型才能開始聊天。最簡單的方法是點擊左下角您的名字後點擊設定圖示。 ![設定](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqyetksyn0y4a0p12ylu.png) 然後點擊模式左側的“模型”，然後貼上[Ollama 註冊表](https://ollama.com/models)中的模型名稱。以下是我推薦用於一般用途的一些模型。 - `llama3` - `mistral` - `llama2` ![機型設定頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txc581jf4w3xszymjfbg.png) 奧拉馬 API ------- 如果您想將 Ollama 整合到您自己的專案中，Ollama 提供自己的 API 以及 OpenAI 相容 API。 API 會自動將本機儲存的 LLM 載入到記憶體中，執行推理，然後在一定的逾時後卸載。您必須先拉取您想要使用的任何模型，然後才能透過 API 執行模型，這可以透過命令列輕鬆完成。 ``` ollama pull mistral ``` ### 奧拉馬 API Ollama 有自己的 API，其中還有[一些用於 Javascript 和 Python 的 SDK](https://github.com/ollama/ollama?tab=readme-ov-file#libraries) 。 以下是如何使用 API 進行簡單的文字產生推理。 ``` curl http://localhost:11434/api/generate -d '{ "model": "mistral", "prompt":"Why is the sky blue?" }' ``` 以下是如何使用 API 進行聊天產生推論。 ``` curl http://localhost:11434/api/chat -d '{ "model": "mistral", "messages": [ { "role": "user", "content": "why is the sky blue?" } ] }' ``` 將`model`參數替換為您要使用的任何模型。請參閱[官方 API 文件](https://github.com/ollama/ollama/blob/main/docs/api.md)以取得更多資訊。 ### OpenAI 相容 API 您也可以使用 Ollama 作為 OpenAI 庫的替代品（取決於用例）。這是[他們文件](https://github.com/ollama/ollama/blob/main/docs/openai.md)中的一個範例。 ``` # Python from openai import OpenAI client = OpenAI( base_url='http://localhost:11434/v1/', # required but ignored api_key='ollama', ) chat_completion = client.chat.completions.create( messages=[ { 'role': 'user', 'content': 'Say this is a test', } ], model='mistral', ) ``` 這也適用於 JavaScript。 ``` // Javascript import OpenAI from 'openai' const openai = new OpenAI({ baseURL: 'http://localhost:11434/v1/', // required but ignored apiKey: 'ollama', }) const chatCompletion = await openai.chat.completions.create({ messages: [{ role: 'user', content: 'Say this is a test' }], model: 'llama2', }) ``` 結論 -- Meta 的 Llama 3 的發布及其大型語言模型 (LLM) 技術的開源標誌著技術社群的一個重要里程碑。現在，透過 Ollama 和 Open WebUI 等本地工具可以存取這些先進的模型，普通個人可以挖掘其巨大潛力來生成文字、翻譯語言、創作創意寫作等。此外，API 的可用性使開發人員能夠將 LLM 無縫整合到新專案或增強現有專案。最終，LLM 技術透過 Llama 3 等開源專案實現民主化，釋放了廣泛的創新可能性，並激發了科技業的創造力。 --- 原文出處：https://dev.to/timesurgelabs/how-to-run-llama-3-locally-with-ollama-and-open-webui-297d

0個讚   0留言 237瀏覽

我發現的很酷的 VSCode 擴展

最近，我重新審視了去年放棄的 React 副專案。在此過程中，我發現了一些重要的 VSCode 擴展，這些擴展顯著提高了我作為 React 開發人員的工作效率。此清單的唯一規則是所有這些擴充都是**React 特定的**。雖然它們可能對其他目的有用，但它們的主要焦點是 React。 那麼，讓我們深入了解一下。 ![我們走吧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opxot6h4u0sxgm9zp3yq.gif) --- 這些擴充功能將透過為您提供片段來提供幫助。***程式碼片段***是預先定義的程式碼片段，只需一次按鍵（*大多數情況下按 Tab 鍵*）即可擴充為完整的程式碼區塊。這些片段的範圍可以從單行到整個文件。透過使用片段，您可以將整個檔案壓縮為簡短的縮寫，使您的編碼體驗更加順暢。 ### **1.ES7 React/Redux/GraphQL/React-Native 片段** ![ES7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqxpf64yy8a7zpfcpgcg.png) 此擴充功能提供了 React、Redux、GraphQL 和 React Native 的全面片段集合。這些片段可讓您快速產生常用的程式碼結構，從而顯著加快您的開發流程。例如： - `rcc`建立一個 React 類別元件骨架。 - `rfc`產生一個 React 功能元件。 - `rnfce`片段可協助您快速設定具有預設匯出的 React Native 元件。 - *這個清單是無窮無盡的*。[在這裡](https://github.com/r5n-dev/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md)探索 這些片段是高度可自訂的，涵蓋廣泛的用例，使您的開發更加高效。 ### **2.React Hooks 片段** ![鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ulwbak9qamtc3846llm.png) React Hooks 程式碼片段擴充功能透過提供特定的縮寫來簡化在 React 中加入鉤子： - `ush` for `useState`初始化一個狀態變數。 - `ueh` for `useEffect`設定副作用。 - `uch` for `useContext`存取上下文。 這個擴充特別有用，因為它專注於 React 的 hooks API，這是功能元件的核心功能。它可以幫助您快速實現鉤子，而不必每次都記住確切的語法。 ### **3.VSCode React 重構** ![重構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tucj03fncc4btoltsxm4.png) VSCode React Refactor 可讓您透過將部分程式碼提取到單獨的元件中來重構程式碼。當您的元件變得太大並且您希望將其分解為更小、更易於管理的部分時，這尤其有用。例如： - 選擇一段 JSX 程式碼。 - 右鍵單擊並選擇“重構”。 - 將其提取到新元件中。 此擴充功能支援 TypeScript 並確保正確導入和使用提取的元件，從而簡化您的重構過程。 ### **4. 將 JSON 貼為程式碼** ![json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cflc9kcid3tvfitmlzg8.png) 將 JSON 貼上為程式碼可讓您將 JSON 物件轉換為程式碼。這在處理傳回 JSON 回應的 API 時特別有用。例如： - 複製 JSON 物件。 - 使用命令選項板選擇“將 JSON 貼上為程式碼”。 - 將 JSON 轉換為具有類型定義的 JavaScript 或 TypeScript 程式碼。 此擴充功能有助於快速將 JSON 資料轉換為可用的程式碼結構，從而節省時間並減少錯誤。 ### **5.SVG圖庫** ![svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ioelbe4mk13mk7y2ld0.png) SVG Gallery 是用於管理專案中的 SVG 檔案的絕佳工具。它允許您直接在 VSCode 中預覽 SVG 文件，這在處理多個 SVG 資源時特別方便。特點包括： - 在編輯器中預覽 SVG。 - 將 SVG 內容複製為 React 元件。 - 有效地組織和管理您的 SVG 資源。 此擴充簡化了使用 SVG 檔案的流程，讓您更輕鬆地在 React 專案中整合和管理向量圖形。 --- 雖然上述建議來自我的主觀觀點和個人對這些擴充功能的體驗，但我強烈建議您親自安裝和體驗它們。每個開發人員都有獨特的需求和工作流程，這些擴充功能可能會以不同的方式適合您的專案。 我鼓勵您分享一些可以提高您的工作效率的很酷的擴充功能。請記住，這些並不是唯一的擴展，我一直在尋找新工具來改善我的工作流程。 *這給我們帶來了一個發人深省的問題：**我們是否透過嚴重依賴這些擴充功能而創造了懶惰的程式設計師，或者我們是否真正提高了生產力和效率？**分享您的想法和經驗。讓我們討論一下這些工具是更好發展的拐杖還是催化劑。* 直到下次！ ![乾杯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruau6ij81iaqqoyjlzm1.jpeg) --- 原文出處：https://dev.to/mitchiemt11/cool-vscode-extensions-that-that-ive-discovered-12mg

0個讚   0留言 64瀏覽

JavaScript 去抖動綜合指南：提高程式碼效率

透過實際範例和技巧了解如何在 JavaScript 中實現去抖動。掌握去抖功能並提升您的網路效能。 在這份綜合指南中，我們將探索 JavaScript 中的去抖動，了解其重要性，並學習如何有效地實現它。無論您是初學者還是經驗豐富的開發人員，掌握去抖動都可以顯著提高您的網路效能。 去抖動是一種程式設計實踐，用於確保耗時的任務不會頻繁觸發，從而提高效能和使用者體驗。它在視窗大小調整、按鈕單擊或表單輸入事件等需要控制多個快速事件的場景中特別有用。 請訂閱我的 [YouTube 頻道](https://www.youtube.com/@DevDivewithDipak?sub\_confirmation=1)來支援我的頻道並獲取更多 Web 開發教學。 ### 什麼是去抖動？ 去抖是一種限制函數執行速率的技術。當多個事件快速連續觸發時，去抖動功能將確保只有係列中的最後一個事件在指定的延遲後觸發函數執行。 ### 為什麼要使用去抖動？ - **效能最佳化**：透過減少呼叫函數的次數來防止效能問題。 - **增強的使用者體驗**：避免重複操作的混亂，提供更流暢的體驗。 - **網路效率**：與即時搜尋輸入欄位等事件處理程序一起使用時，減少不必要的網路請求。 ### 去抖動如何運作 想像一下，使用者在搜尋框中輸入內容，每次按鍵都會觸發 API 呼叫。如果沒有去抖，每次擊鍵都會導致新的 API 呼叫，從而使網路充滿請求。透過去抖動，只有使用者停止輸入指定持續時間後的最終輸入才會觸發 API 呼叫。 ### 在 JavaScript 中實作去抖動 這是去抖函數的簡單實作： ``` function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } ``` ### 使用範例 讓我們看看如何在現實場景中使用`debounce`函數： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Debouncing Example</title> </head> <body> <input type="text" id="searchBox" placeholder="Type to search..."> <script> const searchBox = document.getElementById('searchBox'); function fetchSuggestions(query) { console.log('Fetching suggestions for:', query); // Simulate an API call } const debouncedFetchSuggestions = debounce(fetchSuggestions, 300); searchBox.addEventListener('input', (event) => { debouncedFetchSuggestions(event.target.value); }); function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } </script> </body> </html> ``` 在這個例子中： - 輸入欄位捕獲使用者的輸入。 - `fetchSuggestions`函數的去抖延遲為 300 毫秒。 - 當使用者鍵入時，將呼叫`debouncedFetchSuggestions`函數，確保僅在使用者停止鍵入 300 毫秒後才執行`fetchSuggestions` 。 ### 結論 去抖動是一種簡單但強大的技術，可優化 Web 應用程式的效能。透過控制函數執行的速率，它有助於減少不必要的計算並改善整體用戶體驗。無論您是處理搜尋輸入、調整視窗大小還是處理其他快速事件，去抖動都是 JavaScript 武器庫中的一個有價值的工具。 *追蹤我，以獲得更多有關 Web 開發的教學課程和技巧。歡迎在下面留下評論或問題！* ### 關注並訂閱： - **網址**：\[Dipak Ahirav\] (https://www.dipakahirav.com) - **電子郵件**：[email protected] - **Instagram** : [devdivewithdipak](https://www.instagram.com/devdivewithdipak) - **YouTube** ：\[devDive 與 Dipak\](https://www.youtube.com/@DevDivewithDipak?sub\_confirmation=1) - **領英**：[迪帕克·阿希拉夫](https://www.linkedin.com/in/dipak-ahirav-606bba128) --- 原文出處：https://dev.to/dipakahirav/understanding-debouncing-in-javascript-5g30

0個讚   0留言 80瀏覽

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

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

0個讚   0留言 79瀏覽

建構強大的 CI/CD 管道：綜合指南

歡迎參加 DevSecOps in 5 的第 2 週：您獲得安全開發超級大國的門票！ \_嘿，安全冠軍和編碼戰士！ 您是否渴望提升 DevSecOps 水平並成為堅如磐石的軟體架構師？好吧，您來對地方了！這個為期 5 週的部落格系列是您掌握安全開發和部署的快速通道。 準備好拋棄開發戲劇，對您的安全實踐建立不可動搖的信心。我們同舟共濟，所以係好安全帶，讓我們踏上這段史詩般的旅程！ --- 軟體開發環境處於不斷變化的狀態。更快的發布週期、不斷發展的技術以及不斷增長的品質需求正在推動團隊採用敏捷方法並擁抱自動化。進入 CI/CD 管道—簡化軟體交付背後的主力。這篇部落格深入探討了 CI/CD 的世界，提供了從入門到探索先進技術的全面指南。 為什麼 CI/CD 管道是您的秘密武器 ------------------- 在深入研究之前，讓我們先了解 CI/CD 管道無可否認的優勢： #### 更快的上市時間： 漫長的發布週期的日子已經一去不復返了。 CI/CD 可自動執行建置、測試和部署流程，從而實現頻繁且更快的部署。新功能可以更快地觸及用戶，保持他們的參與度並培養競爭優勢。 例：想像一家公司正在開發一個新的電子商務平台。透過實施 CI/CD 管道，他們可以自動部署新功能，例如改進的搜尋功能或更快的結帳流程。這使他們能夠快速響應用戶反饋和市場趨勢，在競爭中保持領先地位。 #### 提升軟體品質： 想像一下，儘早發現錯誤並在影響生產之前防止回歸。 CI/CD 在整個管道中整合了自動化測試。單元測試、集成測試，甚至端到端測試都可以無縫集成，確保每個階段的程式碼品質。 範例：開發金融服務應用程式的公司可以利用具有強大單元和整合測試的 CI/CD 管道。這確保帳戶管理和交易處理等關鍵功能在投入生產之前經過徹底測試，從而最大限度地減少錯誤和財務損失的風險。 #### 提高協作和效率： CI/CD 透過打破開發和營運團隊之間的孤島來促進協作。開發人員可以充滿信心地編寫程式碼，因為他們知道自動化測試提供了安全網。營運團隊受益於可預測和簡化的部署。這培育了一種共同所有權和責任的文化。 範例：在傳統的開發過程中，開發人員可能會將程式碼「越過牆」扔給操作，導致相互指責和延遲。透過 CI/CD 管道，兩個團隊都參與整個過程。開發人員可以看到他們的程式碼在自動化測試中的執行情況，而操作人員可以更了解即將進行的部署。這可以促進更順暢的協作和更快的問題解決。 設定您的第一個 CI/CD 管道（不僅僅是 Jenkins） ------------------------------ 雖然 Jenkins 仍然是一個流行的選擇，但 CI/CD 環境提供了大量工具來滿足您的特定需求。以下是一些受歡迎的競爭者，以及他們的優勢的簡要概述： #### GitLab CI/CD： 與 GitLab 緊密整合，實現無縫版本控制和 DevOps 工作流程。非常適合已經使用 GitLab 進行程式碼管理的團隊。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1masi4ldtu7fm6bz5kva.png) #### Circle CI： 基於雲端的平台以其易用性、可擴展性和注重開發人員體驗而聞名。對於尋求用戶友好且可擴展解決方案的團隊來說，這是一個不錯的選擇。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3sozor0d4vf3iik92n6.png) #### Azure DevOps： Microsoft 提供全面的 DevOps 工具鏈，提供 CI/CD 管道以及建置管理和工件儲存庫等其他功能。非常適合大量投資於 Microsoft 生態系統的組織。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxmg0lxkoduvbopjhtll.png) #### Travis CI： 開源平台以其簡單性和專注於持續整合而聞名。對於小型團隊或從 CI/CD 開始的團隊來說，這是一個不錯的選擇。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd6fr17cr7ckgfn5isyl.png) 現在，讓我們探討 CI/CD 管道的常見階段及其用途： #### 程式碼提交： 將變更推送到版本控制系統 (VCS)（如 Git）的觸發點。 #### 建造： 程式碼被編譯成可部署的工件（例如，可執行檔、WAR 檔）。 #### 測試： 針對建置的工件執行自動化測試，以辨識任何錯誤或回歸。 #### 部署： 測試成功後，工件將部署到目標環境（暫存、生產）。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kr66y6ycum7sd9suxpdd.png) #### CI/CD 工作流程設定範例（使用 GitLab CI/CD）： ``` stages: - build - test - deploy build: stage: build script: - npm install - npm run build test: stage: test script: - npm run test deploy: stage: deploy script: - scp -r dist/ user@server_ip:/var/www/html/my_app only: - master ``` 將版本控制與 CI/CD 整合：自動化的力量 ---------------------- VCS 在 CI/CD 管道中發揮著至關重要的作用。這就是它的工作原理： #### 版本控制系統 (VCS)： Git 等工具追蹤程式碼更改，允許開發人員協作並在需要時恢復到先前的版本。 CI/CD 管道利用此功能來確保可追溯性並在部署失敗時促進回溯。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mikn0zfpeydo5oiv2mno.png) #### 管道執行的觸發器： CI/CD 管道可以設定為自動觸發 VCS 內的特定事件。常見的觸發因素包括： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3t78w8ex3pzkjpnwkg2.png) #### 程式碼提交： 每當開發人員將程式碼變更推送到特定分支時，管道就會啟動。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxx9bnifs1go7mw4frhx.png) #### 合併到特定分支： 僅當程式碼合併到特定分支（例如 master 或 staging）時才能觸發管道。這允許對部署進行更多控制。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwx42no4pb94b3xxovzw.png) #### 被推送的標籤： 將標籤推送到儲存庫可以觸發管道，通常用於與版本相關的部署。 #### 分支策略： CI/CD 管道可以客製化以適應不同的分支策略。以下是兩種常見的方法： #### 功能分支工作流程： 開發人員為開發工作建立功能分支。完成並進行程式碼審查後，程式碼將合併到主分支（例如 master），觸發 CI/CD 管道進行部署。這種方法允許單獨開發和測試新功能。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8hmkjpemri80yjn2h9m.png) #### Git 流程工作流程： 此策略利用專用的開發分支進行持續開發。功能從開發中分支出來，並在測試後合併回來。合併以開發觸發 CI/CD 管道以部署到臨時環境。最後，從開發部署到生產需要手動升級。這種方法在開發、登台和生產環境之間提供了明確的分離。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l6zc5zq47nljqjs17w4.png) #### 選擇分支策略： 最佳策略取決於您的團隊規模、專案複雜性以及所需的部署控制等級。功能分支工作流程適合專案較簡單的小型團隊。 Git Flow 為大型團隊或複雜專案提供了更多的環境控制和分離。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsvx28v0iigzvwfobfng.png) 持續交付與持續部署： ---------- 了解差異 這些術語經常互換使用，但有一個關鍵區別： #### 持續部署： 成功完成管道後，變更將自動部署到生產中。這種方法需要強大的測試和對程式碼品質的高度信心。它非常適合風險承受能力低且注重快速迭代的應用程式。 範例：開發社交媒體應用程式的公司可能會利用持續部署來實現不影響核心功能的功能。自動化測試可確保品質，快速部署可實現快速實驗和功能推出。 #### 持續交付： 該管道自動建置、測試並部署到臨時環境。在部署到生產之前需要手動批准。這種方法為關鍵應用程式提供了一個安全網，並允許在實施變更之前進行手動監督。 例如：開發金融交易平台的公司可能會從持續交付中受益。管道成功執行後，部署將在投入生產之前進行分階段和審查。這確保了關鍵功能在影響現實世界的交易之前經過徹底的測試和批准。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rlprqoto2rihmk28xu3.png) #### 選擇正確的策略： 持續部署和持續交付之間的選擇取決於以下因素： #### 風險承受能力： 對於具有高風險或影響的應用程式，可能首選透過手動批准進行持續交付。 #### 應用關鍵性： 關鍵任務應用程式可能會受益於生產部署之前手動批准的額外安全網。 #### 測試覆蓋範圍： 強大而全面的測試對於持續部署至關重要。如果測試範圍較小，則透過手動審核進行持續交付可能是更安全的選擇。 #### 回滾策略：總是有一個 B 計劃 無論您的 CI/CD 管道多麼細緻，都可能會出現不可預見的問題。制定回滾策略可確保您可以快速恢復到穩定狀態： ### 版本控制的救援： 如果部署出現問題，VCS 允許您輕鬆恢復到先前的程式碼提交。這是一種快速可靠的回滾部署方法。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doul01tn1rf1bn51cs95.png) #### 回滾腳本： 在 CI/CD 管道中定義腳本，以便在發生故障時自動回滾部署。這可能涉及恢復基礎架構變更或降級配置。這些腳本提供了一種更自動化的回滾方法。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4swhforiux7h7sxnykkn.png) #### 藍/綠部署： 此策略涉及將新版本部署到單獨的環境（綠色），同時保持現有版本運作（藍色）。如果新版本正常執行，流量將切換到綠色環境。如果出現問題，可以無縫切換回藍色。藍/綠部署可最大限度地減少回滾期間的停機時間。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rhcwn0cwttal0yfymgk.png) #### 選擇回滾策略： 最佳方法取決於您的特定需求。 VCS 回滾簡單可靠，但需要手動介入。回滾腳本提供自動化，但需要仔細的設計和測試。藍/綠部署提供了更強大的回滾方法，但可能需要額外的基礎設施設定。 將您的 CI/CD 管道提升到新的水平 ------------------- #### CI/CD 管道安全： 安全性在任何軟體開發過程中都是至關重要的，CI/CD 管道也不例外。以下是保護管道安全的一些最佳實踐： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hl4xwf0krot2nlx54p0.png) #### 管理秘密： 使用機密管理工具安全地儲存密碼、API 金鑰和資料庫憑證等敏感資訊。這些工具對機密進行加密並限制對 CI/CD 管道內授權使用者和應用程式的存取。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ieww0aoauvexapf9dkq.png) #### 限制存取控制： 在 CI/CD 工具中定義明確的存取控制，以限制誰可以修改或觸發管道。實施基於角色的存取控制 (RBAC) 以根據使用者角色和職責授予權限。這確保只有授權的個人才能更改管道配置。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxvwarjo75beumbr0swk.png) #### 定期安全審核： 對 CI/CD 管道進行定期安全審核，以辨識和解決潛在漏洞。這種主動方法可以最大限度地降低未經授權的存取或安全漏洞的風險。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0gobpx2nw8b0u9e867h.png) #### 監控和記錄： 密切監控 CI/CD 管道的性能和錯誤檢測。實施日誌記錄解決方案來追蹤管道執行並辨識潛在的瓶頸或故障。用於監控和記錄的常用工具包括： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzg4r2y894s742wbxd04.png) #### 格拉法納： 一個開源平台，用於視覺化來自各種來源（包括 CI/CD 管道）的指標和日誌。這允許您建立儀表板來監控管道執行狀況、建置時間和部署成功率。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vrob5ut2ipkrq6iz6y4.png) #### ELK 堆疊（Elasticsearch、Logstash、Kibana）： 用於收集、儲存、分析和視覺化日誌的強大工具組合。您可以使用 ELK Stack 集中來自 CI/CD 管道和其他系統的日誌，以進行全面監控和故障排除。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg5aqvi50jyoyd0rh81q.png) #### 內建監控工具： 許多 CI/CD 平台提供內建的監控和日誌記錄功能。利用這些工具深入了解管道執行並辨識潛在問題。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djrjfa9uk1if4jux25zg.png) #### 不同程式語言的 CI/CD： CI/CD 管道與語言無關。特定於您的程式語言的建置工具和測試框架可以無縫整合在管道中。這裡有些例子： #### 爪哇： Maven 或 Gradle 等建置工具可用於自動化 Java 應用程式的建置流程。可以整合 JUnit 等測試框架以進行單元測試和整合測試。 #### JavaScript： 對於 JavaScript 專案，npm 或yarn 等工具可以管理依賴項。 Jest 或 Mocha 等測試框架可用於自動化測試。 #### Python： Python 專案經常利用 setuptools 或 Poetry 等建置工具。像unittest或pytest這樣的測試框架是自動化測試的流行選擇。 請記住：雖然 CI/CD 管道的核心概念在不同語言中保持一致，但特定工具和配置可能會有所不同。研究適合您選擇的程式語言的最佳實踐和工具，以優化您的 CI/CD 管道。 加深您的 CI/CD 專業知識：進階主題 -------------------- CI/CD 是一個不斷發展的領域。讓我們探索一些進階概念，將您的管道推向極限： #### 先進的 CI/CD 技術： #### 基礎設施即程式碼 (IaC)： Terraform 或 Ansible 等工具可讓您將基礎架構配置定義為程式碼。這些配置可以整合到您的 CI/CD 管道中，以自動化基礎設施配置和管理。 IaC 促進基礎設施的一致性、可重複性，並減少手動配置錯誤。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpivmcb9c1792csuhjdo.png) #### 與遺留系統的持續整合： 將遺留系統整合到 CI/CD 管道中可能具有挑戰性。策略包括使用包裝器或適配器透過 API 公開遺留功能。這允許遺留系統與管道互動以進行自動化測試和部署。 #### 藍/綠部署： 前面討論過，藍/綠部署可最大限度地減少應用程式更新期間的停機時間。透過先部署到單獨的環境，您可以確保在出現問題時無縫回滾。 #### 金絲雀部署： 此策略涉及將應用程式的新版本部署到一小部分使用者（金絲雀），以便在全面部署之前辨識並修復問題。金絲雀部署可讓您在將新版本公開給所有使用者之前在有限的範圍內測試新版本，從而最大限度地降低風險。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5df1jw6f9ckmtop4t7y.png) #### 不同專案類型的 CI/CD： #### 微服務架構： 基於微服務的應用程式可以受益於旨在處理單一微服務的獨立建置、測試和部署的 CI/CD 管道。這允許更快地部署和更輕鬆地管理複雜的應用程式。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uqrrbc30qetaklxuvmn.png) #### 使用 Docker 進行容器化： Docker 容器提供了一種打包和部署應用程式的標準化方法。 CI/CD 管道可用於跨環境自動建置和部署 Docker 映像。容器化簡化了部署並確保跨環境的應用程式行為一致。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xakuitegoux6baihwdb4.png) #### 用於機器學習 (ML) 專案的 CI/CD： 機器學習專案通常需要管理大型資料集和複雜模型。 CI/CD 管道可以客製化為： #### 自動化資料版本控制和管理： 確保用於培訓和測試的資料與程式碼變更一起進行追蹤和版本控制。這樣可以實現可重複性並更輕鬆地進行故障排除。 #### 整合模型訓練與測試： 在管道中利用 TensorFlow 或 PyTorch 等工具來自動化模型訓練和測試過程。這確保了模型在部署之前經過嚴格評估。 #### 管理模型部署： CI/CD 管道可用於將經過訓練的模型部署到生產環境。這簡化了流程並確保開發和生產模型之間的一致性。 持續改進與優化： -------- #### 效能優化： CI/CD 管道可能會遇到效能瓶頸，尤其是隨著專案的成長。以下是一些優化策略： #### 快取依賴： 快取經常使用的依賴項（例如，庫、套件）以減少建置期間的下載時間。這可以顯著提高建置速度，尤其是對於大型專案。 #### 並行化： 分解可以同時執行的管道階段（例如，不同模組的單元測試）並並行執行它們。這減少了整體管道執行時間。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb4qguz8vmi4vb6anaiw.png) #### 資源優化： 根據管道階段的要求分配適當的資源（CPU、記憶體）。這確保了資源的有效利用並避免了瓶頸。 #### 指標和監控： 不要只是建立管道，還要積極監控其效能和運作狀況。就是這樣： #### 定義關鍵績效指標 (KPI)： 確定代表管道有效性的指標，例如建置時間、部署頻率和回滾率。隨著時間的推移追蹤這些 KPI，以確定需要改進的領域。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8quogqkfkkjbkul4ype8.png) #### 利用監控工具： 實施 Grafana 或 Prometheus 等監控工具來視覺化管道指標並辨識潛在問題。這使您能夠主動解決瓶頸和效能下降。 #### 追蹤管道日誌： 日誌提供了有關管道執行的寶貴見解。利用 ELK Stack 等日誌分析工具來分析日誌並辨識可能表明潛在問題的錯誤或警告。 #### CI/CD 版本控制： 就像程式碼一樣對 CI/CD 管道配置進行版本控制。原因如下： #### 追蹤變化： 版本控制允許您追蹤對管道配置所做的更改，類似於追蹤程式碼更改的方式。這有助於在必要時進行回滾，並確保您可以恢復到先前的工作配置。 #### 協作與評審： 透過版本控制，多個團隊成員可以協作處理管道配置並在部署之前檢查變更。這可以促進最佳實踐並降低錯誤風險。 #### 災難復原： 如果您的 CI/CD 管道出現重大問題，版本控制可以讓您快速恢復到已知的良好狀態。這可以最大限度地減少停機時間並確保您可以從意外問題中恢復。 CI/CD 的未來：展望未來 -------------- CI/CD 格局不斷發展。以下是一些值得關注的令人興奮的趨勢： #### CI/CD 中的人工智慧和機器學習： 人工智慧可以自動化管道內的任務、優化資源分配並預測潛在問題。機器學習可用於分析歷史資料並提出管道的改進建議。這裡有些例子： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frk52c5r06hdj3dvhc6r.png) #### 自動測試用例產生： AI可用於分析程式碼並自動產生測試案例，提高測試覆蓋率並減少手動工作。 #### 預測管道分析： 機器學習演算法可以分析管道資料，以在潛在瓶頸或故障發生之前預測它們。這允許主動幹預並確保管道平穩執行。 #### 自癒管道： 想像一下可以自動偵測故障並從故障中恢復的管道。這可能涉及重新啟動失敗的階段或回滾部署。人工智慧和機器學習在開發自我修復管道方面可以發揮至關重要的作用。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uf4xg8jl4yvtcy4fqyd.png) #### 無伺服器應用程式的 CI/CD： 無伺服器功能變得越來越流行。 CI/CD 管道可用於自動部署和管理無伺服器功能。就是這樣： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7lflsufhkb84dsqk7dk.png) #### 建置與打包無伺服器功能： CI/CD 管道可用於建置無伺服器函數並將其打包到特定於雲端提供者的部署工件中（例如，AWS Lambda 套件、Azure Functions）。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mnbn81w0w66yw39aq3x.png) #### 部署和管理無伺服器功能： 此管道可以自動將無伺服器功能部署到目標雲端平台。此外，它還可以根據流量模式管理配置更新和擴充。 #### 監控和優化無伺服器功能： CI/CD 管道可以與監控工具集成，以追蹤無伺服器功能的效能和成本。這允許持續優化和成本管理。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qv998kwcpr7cbo3fug4.png) 透過採用這些進步並不斷改進您的 CI/CD 實踐，您可以確保您的軟體交付快速、高效且可靠。以下是一些鞏固您的 CI/CD 知識的結論： CI/CD 是一段旅程，而不是目的地 建立防彈 CI/CD 管道是一個持續的過程。隨著專案的發展，調整和完善您的管道以滿足不斷變化的需求。隨時了解最新趨勢和工具，以持續優化您的 CI/CD 工作流程。 溝通和協作是關鍵成功的 CI/CD 管道需要開發、營運和安全團隊之間的密切協作。促進開放式溝通並鼓勵回饋，以確保管道符合每個人的需求。 測量和分析 不要只是建造管道並設置它就忘記它了。定期監控管道性能、分析指標並確定需要改進的領域。使用資料驅動的見解來優化您的 CI/CD 流程並確保其提供最大價值。 結論 -- CI/CD 管道是現代軟體開發的主力。透過了解本綜合指南中探討的核心概念、最佳實踐和先進技術，您可以幫助您的團隊更快、更有效率地交付高品質的軟體。擁抱 CI/CD，不斷改進您的管道，並見證您的軟體交付飆升至新的高度。 --- 我很高興有機會與您一起深入研究《建立防彈 CI/CD 管道：綜合指南》。這是一個令人著迷的領域，具有改善安全狀況的巨大潛力。 感謝您與我一起探索《建立防彈 CI/CD 管道：綜合指南》。您持續的興趣和參與推動了這趟旅程！ 如果您發現有關建立防彈 CI/CD 管道：綜合指南的討論有幫助，請考慮與您的網路分享！知識就是力量，尤其是在安全方面。 讓我們繼續談話吧！在下面的評論中分享您的想法、問題或經驗《建立防彈 CI/CD 管道：綜合指南》。 渴望了解有關 DevSecOps 最佳實踐的更多資訊？請繼續關注下一篇文章！ 透過共同努力並採用安全的開發實踐，我們可以建立一個更具彈性和值得信賴的軟體生態系統。 請記住，安全開發之旅是一個持續學習的過程。這是為了持續改進！ --- 原文出處：https://dev.to/gauri1504/building-a-bulletproof-cicd-pipeline-a-comprehensive-guide-3jg3

0個讚   0留言 68瀏覽

✨ 6 個您應該造訪的學習寶石網站！

介紹 -- 那麼您是軟體開發人員？太棒了。您可以建立應用程式並製作💸💸💸，但是您是否考慮過長期場景或您是否真正意識到這一點？ 在五年的軟體開發生涯中，建立應用程式並不是為了完成工作或為啟動活動提供軟體。這不是🙅‍♂️。 如果您是優秀的開發人員，您應該了解軟體的後期開發階段... 🤨：來吧，我的「學習寶石」在哪裡？標題不是關於工程職位的！ 好吧，我知道這跟工程職位無關。美好的！ 但... ![阿塞爾瓦斯格爾](https://i.pinimg.com/564x/5c/89/b7/5c89b75128a05063ddfccbf36be74e75.jpg) 讓我們透過這些精彩的學習材料來增強我們的知識！從如何建立應用程式、編寫可維護的程式碼，甚至了解 CPU 的實際運作原理！ 順便說一句，讓我們向所有製作這些優秀學習材料的作者致敬🙇‍♂️！ [模式.dev](https://www.patterns.dev/) ----------------------------------- ![圖案縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2sca89gm5igy58byojn.png) Patterns.dev 由 Addy Osmani 和 Lydia Hallie 建立，旨在幫助您將網站架構提升到新的水平。 Patterns.dev 將幫助您設計、渲染和效能模式，以便使用普通 JavaScript 或現代框架建立強大的 Web 應用程式。 [將“你”放入CPU](https://cpu.land/) ------------------------------ ![CPU 區域縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqdzvm4uaub99aop9g70.png) 接下來，我們有CPU Land！ 你有沒有想過CPU在幕後到底是如何運作的？ 🤨：如果它已經在幕後工作了，為什麼我還要考慮它？ 阿喲，兄弟。來吧，你是認真的嗎？你不會被人工智慧取代吧？ 這就是為什麼你應該知道 CPU 如何執行你的程式！ 幸運的是，這個網站為您提供了幫助。在這裡，您可以了解多處理的工作原理、系統呼叫的真正含義、電腦如何透過硬體中斷管理記憶體以及 Linux 如何載入可執行檔。 感謝 Lexi Mattick 建立了這個網站！ [重構大師](https://refactoring.guru/) --------------------------------- ![重構大師縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2fubawobhmqkyogab86.png) 🤨：啊，我不想碰這個程式碼庫。很脆弱！ 嘿，你兩年前寫了這段程式碼... 🤨：啊，對不起。我的意思是是的...為什麼你不給我一些解決方案，阿克巴？ 我？沒有人，但是 Refactoring Guru 可以幫助你！ Alexander Shvets 已經建立了很酷的網站來重構您的 💩 程式碼庫。這個網站將改變您對如何建立可長期維護的東西的看法。 [元件庫](https://component.gallery/) --------------------------------- ![元件庫縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqsl23fpudyj78pn8k2f.png) 對 UI 元件的命名及其外觀感到困惑嗎？不用擔心，我經常遇到這個問題。但幸運的是，Iain Bean 建立了 Component Gallery 網站！ 在這裡，我們沒有看到預先建置的 UI 元件，而是為您提供了元件應該是什麼樣子以及它的具體用途。 [學習 Git 支撐](https://learngitbranching.js.org/) ---------------------------------------------- ![學習 Git 支撐縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbqvf9qc0jszns878xwk.png) 我有一個表情包給你，你去看看吧… ![凱伊瑟爾](https://miro.medium.com/v2/resize:fit:600/0*VcMPr1unIjAIHw2j.jpg) 但是，除非你知道如何正確使用 Git，否則它只是模因。如果你不這樣做，不用擔心。只需學習 Git 分支即可！ Peter Cottle 建立此網站是為了幫助您以互動方式學習 Git。你知道，因為如果你能將某件事形象化，就更容易理解它。 [十二要素應用程式](https://www.12factor.net/) ------------------------------------- ![十二要素應用程式縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojf6okkbrng5meghecwe.png) 最後一個是十二要素應用程式！ 您將學習如何在微服務叢集中建置 SaaS 或簡單的服務。在這裡，您不是了解使用了什麼技術，而是了解使您的應用程式可移植且易於在任何地方部署的意識形態或概念！ 讓我們感謝亞當·威金斯的奉獻精神。 結論 -- 好吧，現在你已經知道了。不要放棄並保持學習精神。歸根結底，這只是某人的寫作，但它的價值在於當你應用它並且它起作用時。 如果您有任何建議，請隨時在下面的評論部分寫下來！ 再見！ ![烹飪霍馬特](https://i.pinimg.com/564x/2e/84/89/2e84892562d68742930e7641520beb38.jpg) --- 原文出處：https://dev.to/thexdev/5-website-learning-gems-you-should-visit-2pn5

1個讚   1留言 94瀏覽

使用 Langchain 為您的文件建立 QA 機器人 😻

--- 標題：使用 Langchain 為您的文件建立 QA 機器人 😻 描述：使用 Wing Framework、NextJS 和 Langchain 建立的 ChatGPT 用戶端應用程式 canonical\_url：https://www.winglang.io/blog/2024/05/29/qa-bot-for-your-docs-with-langchain 發表：真實 --- 長話短說 ---- 在本教學中，我們將為您的網站文件建立一個人工智慧驅動的問答機器人。 - 🌐 建立一個用戶友好的 Next.js 應用程式來接受問題和 URL - 🔧 設定一個 Wing 後端來處理所有請求 - 💡 透過使用 RAG 抓取和分析文件，將 @langchain 納入 AI 驅動的答案 - 🔄 前端輸入和人工智慧處理的回應之間的完整連接。 ![問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykw5f2sos4fdhj8akowt.gif) 什麼是翼？ ----- [Wing](https://wing.cloud/redirect?utm_source=qa-bot-reddit&redirect=https%3A%2F%2Fwww.winglang.io%2Fblog%2F2024%2F05%2F29%2Fqa-bot-for-your-docs-with-langchain)是一個雲端開源框架。 它允許您將應用程式的基礎架構和程式碼組合為一個單元，並將它們安全地部署到您首選的雲端提供者。 Wing 讓您可以完全控制應用程式基礎架構的配置方式。除了其易於學習的[程式語言](https://www.winglang.io/docs/language-reference)之外，Wing 還支援 Typescript。 在本教學中，我們將使用 TypeScript。所以，別擔心，您的 JavaScript 和 React 知識足以理解本教學。 ![翼登陸頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u366v255drbwqmcoagrz.png) {% cta https://wingla.ng/github %} 看 Wing ⭐️ {% endcta %} --- 使用 Next.js 建立前端 --------------- 在這裡，您將建立一個簡單的表單，它接受文件 URL 和使用者的問題，然後根據網站的資料回傳回應。 首先，建立一個包含兩個子資料夾的資料夾 - `frontend`和`backend` 。 `frontend`資料夾包含 Next.js 應用程式， `backend`資料夾用於 Wing。 ``` mkdir qa-bot && cd qa-bot mkdir frontend backend ``` 在**`frontend`**資料夾中，透過執行以下程式碼片段來建立 Next.js 專案： ``` cd frontend npx create-next-app ./ ``` ![下一個應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyq8dnmmmplvzl7g41ir.png) 將下面的程式碼片段複製到`app/page.tsx`檔案中，以建立接受使用者問題和文件 URL 的表單： ``` "use client"; import { useState } from "react"; export default function Home() { const [documentationURL, setDocumentationURL] = useState<string>(""); const [question, setQuestion] = useState<string>(""); const [disable, setDisable] = useState<boolean>(false); const [response, setResponse] = useState<string | null>(null); const handleUserQuery = async (e: React.FormEvent) => { e.preventDefault(); setDisable(true); console.log({ question, documentationURL }); }; return ( <main className='w-full md:px-8 px-3 py-8'> <h2 className='font-bold text-2xl mb-8 text-center text-blue-600'> Documentation Bot with Wing & LangChain </h2> <form onSubmit={handleUserQuery} className='mb-8'> <label className='block mb-2 text-sm text-gray-500'>Webpage URL</label> <input type='url' className='w-full mb-4 p-4 rounded-md border text-sm border-gray-300' placeholder='https://www.winglang.io/docs/concepts/why-wing' required value={documentationURL} onChange={(e) => setDocumentationURL(e.target.value)} /> <label className='block mb-2 text-sm text-gray-500'> Ask any questions related to the page URL above </label> <textarea rows={5} className='w-full mb-4 p-4 text-sm rounded-md border border-gray-300' placeholder='What is Winglang? OR Why should I use Winglang? OR How does Winglang work?' required value={question} onChange={(e) => setQuestion(e.target.value)} /> <button type='submit' disabled={disable} className='bg-blue-500 text-white px-8 py-3 rounded' > {disable ? "Loading..." : "Ask Question"} </button> </form> {response && ( <div className='bg-gray-100 w-full p-8 rounded-sm shadow-md'> <p className='text-gray-600'>{response}</p> </div> )} </main> ); } ``` 上面的程式碼片段顯示了一個表單，該表單接受使用者的問題和文件 URL 並將它們暫時記錄到控制台。 ![QA 機器人表單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b4w3tq0srua93gnk73n.png) 完美的！ 🎉您已經完成了應用程式的使用者介面。接下來，讓我們設定 Wing 後端。 --- 如何在電腦上設定 Wing ------------- Wing 提供了一個 CLI，使您能夠在專案中執行各種 Wing 操作。 它還提供[VSCode](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing)擴展，透過語法突出顯示、編譯器診斷、程式碼完成和片段等功能增強開發人員體驗。 在繼續之前，請停止 Next.js 開發伺服器並透過在終端機中執行下面的程式碼片段來安裝 Wing CLI。 ``` npm install -g winglang@latest ``` 執行以下程式碼片段以確保 Winglang CLI 已安裝並按預期工作： ``` wing -V ``` 接下來，導航到`backend`資料夾並建立一個空的 Wing Typescript 專案。確保選擇`empty`模板並選擇 Typescript 作為語言。 ``` wing new ``` ![永新](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezy04zqvz9lura0d25dj.png) 將下面的程式碼片段複製到`backend/main.ts`檔案中。 ``` import { cloud, inflight, lift, main } from "@wingcloud/framework"; main((root, test) => { const fn = new cloud.Function( root, "Function", inflight(async () => { return "hello, world"; }) ); }); ``` **`main()`**函數充當 Wing 的入口點。 它建立一個雲端函數並在編譯時執行。另一方面， **`inflight`**函數在執行時執行並返回`Hello, world!`文字. 透過執行下面的程式碼片段啟動 Wing 開發伺服器。它會自動在瀏覽器中開啟 Wing 控制台，網址為`http://localhost:3000` 。 ``` wing it ``` ![Wing TS 最小控制台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1ejobkm0dq5akhut732.png) 您已在電腦上成功安裝 Wing。 --- 如何將 Wing 連接到 Next.js 應用程式 ------------------------- 在前面的部分中，您已在`frontend`資料夾中建立了 Next.js 前端應用程式，並在`backend`資料夾中建立了 Wing 後端。 在本部分中，您將了解如何在 Next.js 應用程式和 Wing 後端之間通訊和發送資料。 首先，透過執行以下程式碼在後端資料夾中安裝[Wing React](https://github.com/winglang/winglibs/tree/main/react)函式庫： ``` npm install @winglibs/react ``` 接下來，更新`main.ts`文件，如下所示： ``` import { main, cloud, inflight, lift } from "@wingcloud/framework"; import React from "@winglibs/react"; main((root, test) => { const api = new cloud.Api(root, "api", { cors: true }) ; //👇🏻 create an API route api.get( "/test", inflight(async () => { return { status: 200, body: "Hello world", }; }) ); //👉🏻 placeholder for the POST request endpoint //👇🏻 connects to the Next.js project const react = new React.App(root, "react", { projectPath: "../frontend" }); //👇🏻 an environment variable react.addEnvironment("api_url", api.url); }); ``` 上面的程式碼片段建立了一個 API 端點 ( `/test` )，它接受 GET 請求並傳回`Hello world`文字。 `main`函數也連接到 Next.js 專案並將`api_url`新增為環境變數。 環境變數中包含的 API URL 使我們能夠將請求傳送到 Wing API 路由。我們如何在 Next.js 應用程式中檢索 API URL 並發出這些請求？ 更新 Next.js `app/layout.tsx`檔案中的`RootLayout`元件，如下所示： ``` export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang='en'> <head> {/** ---👇🏻 Adds this script tag 👇🏻 ---*/} <script src='./wing.js' defer /> </head> <body className={inter.className}>{children}</body> </html> ); } ``` 透過執行`npm run build`重新建置 Next.js 專案。 最後，啟動Wing開發伺服器。它會自動啟動 Next.js 伺服器，可以在瀏覽器中透過**`http://localhost:3001`**存取該伺服器。 ![控制台到 URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7rkxw9bds97a0qzg5vh.gif) 您已成功將 Next.js 連接到 Wing。您也可以使用`window.wingEnv.<attribute_name>`存取環境變數中的資料。 ![視窗.wingEnv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0up5430jmxufmyeb9e4h.gif) 使用LangChain和Wing處理用戶請求 ---------------------- 在本節中，您將學習如何向 Wing 發送請求，使用[LangChain 和 OpenA](https://js.langchain.com/docs/get_started/quickstart#llm-chain) I 處理這些請求，並在 Next.js 前端顯示結果。 首先，我們更新 Next.js **`app/page.tsx`**檔案以檢索 API URL 並將使用者資料傳送到 Wing API 端點。 為此，請透過在**`page.tsx`**檔案頂部新增以下程式碼片段來擴充 JavaScript **`window`**物件。 ``` "use client"; import { useState } from "react"; interface WingEnv { api_url: string; } declare global { interface Window { wingEnv: WingEnv; } } ``` 接下來，更新`handleUserQuery`函數以將包含使用者問題和網站URL 的POST 請求傳送到Wing API 端點。 ``` //👇🏻 sends data to the api url const [response, setResponse] = useState<string | null>(null); const handleUserQuery = async (e: React.FormEvent) => { e.preventDefault(); setDisable(true); try { const request = await fetch(`${window.wingEnv.api_url}/api`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ question, pageURL: documentationURL }), }); const response = await request.text(); setResponse(response); setDisable(false); } catch (err) { console.error(err); setDisable(false); } }; ``` 在建立接受 POST 請求的 Wing 端點之前，請在`backend`資料夾中安裝下列套件： ``` npm install @langchain/community @langchain/openai langchain cheerio ``` [Cheerio](https://js.langchain.com/v0.2/docs/integrations/document_loaders/web_loaders/web_cheerio/)使我們能夠抓取軟體文件網頁，而[LangChain 軟體包](https://js.langchain.com/v0.1/docs/get_started/quickstart/)使我們能夠存取其各種功能。 LangChain OpenAI整合包使用OpenAI語言模型；因此，您需要一個有效的 API 金鑰。您可以從[OpenAI 開發者平台](https://platform.openai.com/api-keys)取得。 ![朗查恩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omg4o524oklrssso5rqc.png) 接下來，讓我們建立處理傳入請求的`/api`端點。 端點將： - 接受來自 Next.js 應用程式的問題和文件 URL， - 使用[LangChain 文件載入器](https://js.langchain.com/v0.1/docs/modules/data_connection/document_loaders/)載入文件頁面， - 將檢索到的文件分成區塊， - 轉換分塊文件並將它們保存在[LangChain 向量儲存](https://js.langchain.com/v0.1/docs/modules/data_connection/vectorstores/)中， - 並建立一個[檢索器函數](https://js.langchain.com/v0.1/docs/modules/data_connection/)，從向量儲存中檢索文件。 首先，將以下內容匯入`main.ts`檔案： ``` import { main, cloud, inflight, lift } from "@wingcloud/framework"; import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai"; import { ChatPromptTemplate } from "@langchain/core/prompts"; import { createStuffDocumentsChain } from "langchain/chains/combine_documents"; import { CheerioWebBaseLoader } from "@langchain/community/document_loaders/web/cheerio"; import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"; import { MemoryVectorStore } from "langchain/vectorstores/memory"; import { createRetrievalChain } from "langchain/chains/retrieval"; import React from "@winglibs/react"; ``` 在`main()`函數中加入以下程式碼片段以建立`/api`端點： ``` api.post( "/api", inflight(async (ctx, request) => { //👇🏻 accept user inputs from Next.js const { question, pageURL } = JSON.parse(request.body!); //👇🏻 initialize OpenAI Chat for LLM interactions const chatModel = new ChatOpenAI({ apiKey: "<YOUR_OPENAI_API_KEY>", model: "gpt-3.5-turbo-1106", }); //👇🏻 initialize OpenAI Embeddings for Vector Store data transformation const embeddings = new OpenAIEmbeddings({ apiKey: "<YOUR_OPENAI_API_KEY>", }); //👇🏻 creates a text splitter function that splits the OpenAI result chunk size const splitter = new RecursiveCharacterTextSplitter({ chunkSize: 200, //👉🏻 characters per chunk chunkOverlap: 20, }); //👇🏻 creates a document loader, loads, and scraps the page const loader = new CheerioWebBaseLoader(pageURL); const docs = await loader.load(); //👇🏻 splits the document into chunks const splitDocs = await splitter.splitDocuments(docs); //👇🏻 creates a Vector store containing the split documents const vectorStore = await MemoryVectorStore.fromDocuments( splitDocs, embeddings //👉🏻 transforms the data to the Vector Store format ); //👇🏻 creates a document retriever that retrieves results that answers the user's questions const retriever = vectorStore.asRetriever({ k: 1, //👉🏻 number of documents to retrieve (default is 2) }); //👇🏻 creates a prompt template for the request const prompt = ChatPromptTemplate.fromTemplate(` Answer this question. Context: {context} Question: {input} `); //👇🏻 creates a chain containing the OpenAI chatModel and prompt const chain = await createStuffDocumentsChain({ llm: chatModel, prompt: prompt, }); //👇🏻 creates a retrieval chain that combines the documents and the retriever function const retrievalChain = await createRetrievalChain({ combineDocsChain: chain, retriever, }); //👇🏻 invokes the retrieval Chain and returns the user's answer const response = await retrievalChain.invoke({ input: `${question}`, }); if (response) { return { status: 200, body: response.answer, }; } return undefined; }) ); ``` API 端點接受使用者的問題和來自 Next.js 應用程式的頁面 URL，初始化[`ChatOpenAI`](https://js.langchain.com/v0.2/docs/integrations/chat/openai/)和[`OpenAIEmbeddings`](https://js.langchain.com/v0.2/docs/integrations/text_embedding/openai/) ，載入文件頁面，並以文件的形式檢索使用者查詢的答案。 然後，將文件分割成區塊，將區塊保存在`MemoryVectorStore`中，並使我們能夠使用[LangChain 檢索器](https://js.langchain.com/v0.1/docs/modules/data_connection/)來取得問題的答案。 從上面的程式碼片段來看，OpenAI API金鑰直接輸入到程式碼中；這可能會導致安全漏洞，使 API 金鑰可供攻擊者存取。為了防止這種資料洩露，Wing 允許您將私鑰和憑證保存在名為`secrets`的變數中。 當您建立機密時，Wing 會將此資料保存在`.env`檔案中，確保其安全且可存取。 更新`main()`函數以從 Wing Secret 取得 OpenAI API 金鑰。 ``` main((root, test) => { const api = new cloud.Api(root, "api", { cors: true }); //👇🏻 creates the secret variable const secret = new cloud.Secret(root, "OpenAPISecret", { name: "open-ai-key", }); api.post( "/api", lift({ secret }) .grant({ secret: ["value"] }) .inflight(async (ctx, request) => { const apiKey = await ctx.secret.value(); const chatModel = new ChatOpenAI({ apiKey, model: "gpt-3.5-turbo-1106", }); const embeddings = new OpenAIEmbeddings({ apiKey, }); //👉🏻 other code snippets & configurations ); const react = new React.App(root, "react", { projectPath: "../frontend" }); react.addEnvironment("api_url", api.url); }); ``` - 從上面的程式碼片段來看， ``` - The `secret` variable declares a name for the secret (OpenAI API key). ``` ``` - The [`lift().grant()`](https://www.winglang.io/docs/typescript/inflights#permissions) grants the API endpoint access to the secret value stored in the Wing Secret. ``` ``` - The [`inflight()`](https://www.winglang.io/docs/typescript/inflights) function accepts the context and request object as parameters, makes a request to LangChain, and returns the result. ``` ``` - Then, you can access the `apiKey` using the `ctx.secret.value()` function. ``` 最後，透過在終端機中執行此命令將 OpenAI API 金鑰儲存為機密。 ![翅膀的秘密](https://www.winglang.io/assets/images/qa-bot-wing-secrets-883db5e81515894ae280d77b7f72bb25.gif) 恭喜！您已成功完成本教學的專案。 以下是該應用程式的簡短演示： ![QA 機器人演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ropklqge2xzpibl29vye.gif) --- 讓我們更深入地研究 Wing 文件，看看我們的 AI 機器人可以提取哪些資料。 ![QA 機器人演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnmf6n6mszc6go0uiw1v.gif) --- 總結一下 ---- 到目前為止，我們已經討論了以下內容： - 什麼是翼？ - 如何使用Wing並使用Langchain查詢資料， - 如何將 Wing 連接到 Next.js 應用程式， - 如何在 Next.js 前端和 Wing 後端之間發送資料。 > [Wing](https://github.com/winglang/wing)旨在恢復您的創意流並縮小想像力與創造之間的差距。 Wing 的另一個巨大優勢是它是開源的。因此，如果您希望建立利用雲端服務的分散式系統或為雲端開發的未來做出貢獻， [Wing](https://github.com/winglang/wing)是您的最佳選擇。 請隨意為[GitHub 儲存庫做出貢獻，](https://github.com/winglang/wing)並與團隊和大型開發人員社群[分享您的想法](https://t.winglang.io/discord)。 本教學的源程式碼可[在此處](https://github.com/NathanTarbert/wing-langchain-nextjs)取得。 感謝您的閱讀！ 🎉 --- 原文出處：https://dev.to/winglang/build-a-qa-bot-for-your-documentation-with-langchain-27i4

0個讚   0留言 42瀏覽

我一直在編寫 TypeScript 但不理解它

我承認，我不太懂 TypeScript ------------------- 有一天，我在一些處理樂觀更新的程式碼中遇到了一個錯誤，所以我向我的同事[Filip](https://tenor.com/en-GB/view/the-office-funny-kevin-malone-phillip-i-hate-phillip-gif-16434707)尋求幫助。 TypeScript 精靈 Filip 提到`satisfies`關鍵字將是我正在尋找的解決方案的一部分。 *`Satisfies` ？那是什麼呀？為什麼我以前從未聽說過它？*我的意思是，我已經使用 TypeScript 一段時間了，所以我很驚訝我自己並不了解它。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6kny7wtjnc4168yn2o0.png) 不久之後，我偶然發現了 @yacineMTB 的這條推文，他是[X.com](http://X.com) （又名 Twitter）的多產者和工程師： > 就像，為什麼我不能只*執行***打字稿**檔案？如果我需要初始化整個目錄和專案，那麼腳本語言有什麼意義呢？ > 我再次發現自己想知道為什麼我還不了解 TypeScript。*為什麼你不能真正執行 TypeScript 檔案？腳本語言和編譯語言有什麼不同？* [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy01hirmxhlwybk6mx9u.png)](https://opensaas.sh) 我突然意識到，我不太了解我幾乎每天使用的語言的一些基本知識，這些語言是我用來建立諸如[Open SaaS](https://opensaas.sh) （一個免費的開源 SaaS 入門工具）之類的東西的。 所以我決定退一步，對這些主題進行一些調查。在這篇文章中，我將與您分享我學到的一些最重要的事情。 TypeScript 是什麼類型的腳本？ -------------------- 您可能已經聽說過 TypeScript 是 JavaScript 的「超集」。這意味著它是 JavaScript 之上的一個附加層，在本例中，它允許您向 JavaScript 加入靜態類型。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5595bx8k88hkih2pthh.png) 這有點像 TypeScript 是 JavaScript 的進階版。或者，換句話說，如果 JavaScript 是 Tesla Model 3 的基礎模型，那麼 TypeScript 就是 Model X Plaid。*嗚嗚嗚。* 但因為它是 JavaScript 的*超集*，所以它實際上並不像 JavaScript 本身那樣運作。例如，JavaScript 是一種腳本語言，這意味著程式碼在執行過程中會被逐行解釋。它被設計成可以在不同作業系統和硬體配置的網路瀏覽器中運作。這與 C 等低階語言不同，後者需要先編譯為特定係統的機器碼才能執行。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu22drd35u217gatsifn.png) 因此，JavaScript 不必先編譯，而是由 JavaScript 引擎解釋。另一方面，TypeScript 必須先轉換（或「轉編譯」）為 JavaScript，然後才能由瀏覽器中的 JavaScript 引擎（或作為獨立的 NodeJS 應用程式）執行。 所以這個過程看起來有點像這樣： ``` → Write TypeScript Code → “Transcompile” to JavaScript → Interpret JavaScript & Check for Errors → JavaScript Engine Compiles and Executes the Code ``` 很有趣，對吧？ 現在我們已經掌握了一些理論知識，接下來讓我們繼續討論一些更實際的東西，例如 TypeScript 的出名之處：它就是*類型！* --- 順便一提… 我們[Wasp](https://wasp-lang.dev/)正在努力建立最好的開源 React/NodeJS 框架，讓您快速行動！ 這就是為什麼我們提供了即用型全端應用程式模板，例如帶有 TypeScript 的 ToDo 應用程式。您所要做的就是安裝 Wasp： ``` curl -sSL https://get.wasp-lang.dev/installer.sh | sh ``` 並執行： ``` wasp new -t todo-ts ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj26gymrxyybut4541lg.png) 您將獲得一個開箱即用的具有 Auth 和端到端 TypeSafety 功能的全端 ToDo 應用程式，以幫助您學習 TypeScript，或者只是開始快速安全地建置一些東西:) --- 玩耍`satisfies` ------------- 還記得我如何向我的同事尋求幫助，他的解決方案涉及`satisfies`關鍵字嗎？好吧，為了更好地理解它，我決定打開一個編輯器並嘗試一些基本範例，這是我發現的最有用的東西。 首先，我們以 person 物件為例，將其輸入為`Record` ，該 Record 可以採用一組`PossibleKeys`和一個`string`或`number`作為值。那想看看這個： ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { } ``` 我們輸入`person`常數的方式稱為型別註解。它直接位於變數名稱之後。 讓我們開始為此`person`物件新增鍵和值： ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } ``` 看起來很簡單，對吧？ 現在，讓我們來看看 TypeScript 如何推斷`person`屬性的類型： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bd9m3bfy19qep0mvz98.png) 有趣的。當我們將滑鼠懸停在`email`上時，我們看到 TypeScript 告訴我們電子郵件是`string`或`number`的聯合類型，即使我們肯定只將其定義為`string` 。 如果我們嘗試在這種類型上使用一些`string`方法，這將會產生一些意想不到的後果。讓我們嘗試一下`split`方法，例如： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6u4nxa0em6mr0qqghuyp.png) 我們收到一個錯誤，表示此方法不適用於`number`類型。哪個是對的。但這很煩人，因為我們知道`email`是一個字串。 讓`satisfies`透過將類型向下移動到常數定義的末尾來解決這個問題： ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } satisfies Record<PossibleKeys, string | number>; ``` 現在，當將滑鼠懸停在`email`屬性上時，我們將看到它被正確推斷為`string` ： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxv578os1altgpkgmojo.png) 好的！現在，我們使用`split`將`email`轉換為字串陣列不會遇到任何問題。 這就是`satisfies`真正的閃光點。它讓我們驗證表達式的類型是否與特定類型匹配，同時為我們推斷最窄的可能類型。 多餘的財產檢查 ------- 但當我玩`satisfies`時，我注意到另一個奇怪的事情是，如果我直接在變數上使用它與在中間變數上使用它，它的行為會有所不同，如下所示： ``` // Directly on object literal const person = { } satisfies PersonType; // Using on intermediate variable const personIntermediate = person satisfies PersonType ``` 具體來說，如果我向`person`物件加入類型中不存在的另一個屬性（例如`isAdmin` ，則直接使用時我們會收到錯誤，但使用中間變數時不會收到錯誤： 1. 直接使用`satisfies` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzqk2ph21jkcbdu4w6oz.png) 2. 使用`satisfies`和中間變數 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haipxyc4ihxpmezydgto.png) 您可以看到，在範例 2 中，沒有錯誤且 person “滿足” `PersonType` ，但在範例 1 中卻沒有。 這是為什麼？ 嗯，這實際上與 JavaScript 的基本工作原理有關，而與`satisfies`關鍵字關係不大。讓我們來看看。 上面範例中發生的過程就是所謂的「多餘屬性檢查」。 過多的屬性檢查實際上是該規則的例外。 TypeScript 使用所謂的「結構類型系統」。這只是一種奇特的方式來表示**如果一個值具有所有預期的屬性，那麼它將被使用。** 因此，使用上面的`personIntermediate`範例，TypeScript 不會抱怨`person`有一個額外的屬性`isAdmin` ，該屬性在`PersonType`中不存在。它具有所有其他必要的屬性，例如`id` 、 `name` 、 `email`和`age` ，因此 TypeScript 接受這種中間形式。 但是，當我們直接在變數上聲明類型時（如範例 1 中所示），我們會收到 TypeScript 錯誤：「'isAdmin' 在類型 'PersonType' 中不存在」。**這是工作中的多餘屬性檢查**，它可以幫助您避免犯下愚蠢的錯誤。 記住這一點是有好處的，因為這將幫助您避免意外的副作用。 例如，假設我們將 person 類型變更為具有可選的`isAdmin`屬性，如下所示： ``` type PersonType = { id: number, name: string, isAdmin?: boolean, // 👈 Optional } ``` 如果我們不小心用`isadmin`屬性而不是`isAdmin`定義了`person`並且沒有直接聲明類型，會發生什麼情況？ 我們不會從 TypeScript 中得到任何錯誤，因為`person`實際上滿足所有必要的類型。 `isAdmin`類型是可選的，它不存在於`person`上，但這並不重要。您已經做了一個簡單的 type-o，現在嘗試存取`isAdmin`屬性，但它不起作用： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxz8zzlxxog0xkdfpvbn.png) 哎呀！讓我們用類型註釋來修復它，我們立即聲明類型： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zer5v40ipp47juw2n50f.png) 好的。因為我們在第 58 行使用了直接類型註釋，所以我們獲得了 TypeScript 多餘屬性檢查的好處。 謝謝，打字稿！ 🙏 --- 如果您發現此內容有用，並且想要查看更多類似內容，您可以[在 GitHub 上給 Wasp 一顆星，輕鬆幫助我們！](https://www.github.com/wasp-lang/wasp) 。 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) {% cta <https://www.github.com/wasp-lang/wasp> %} ⭐️ GitHub 上的 Star Wasp 🙏 {% endcta %} --- 待續… --- 感謝您加入我的旅程的第 1 部分，以便更好地了解我們每天使用的工具。 這將是一個持續進行的系列，我將繼續以更具探索性、更少結構化的方式分享我所學到的東西。我希望您發現其中的某些部分有用或有趣。 讓我知道你接下來想看什麼！你喜歡這種風格嗎？你願意改變一些事情嗎？加入或刪除一些東西？或者你對最近學到的東西有什麼看法或類似的故事嗎？ 如果是這樣，請在評論中告訴我們，我們下次見:) --- 原文出處：https://dev.to/wasp/ive-been-writing-typescript-without-understanding-it-5ef4

0個讚   0留言 27瀏覽

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

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

0個讚   0留言 78瀏覽

資深工程師程式碼審查指南

程式碼審查。 ----- 你知道它們有多重要。 它們是獲得可靠程式碼的支柱之一。 然而，這是您在超級忙碌的日子裡需要**擠出**時間做的事情之一。 如果您不審查程式碼，那麼您可能會向用戶發送地雷，因為您永遠不知道它什麼時候會爆炸。 🤷 顯然，你知道這一點。你來這裡不是為了被告知「嘿！你應該進行程式碼審查！這是一件至關重要的事情！ 我的團隊已經做了評論。我為什麼要在乎？ ------------------- 如果不小心和勤勉地處理程式碼審查流程，可能會產生嚴重後果。 在我之前的一個組織中，程式碼審查通常沒有徹底完成，因此需要多次審查。它們也是由地球兩端的審查者完成的！ 🌏 因此，處理任何評論幾乎花了一整天的時間。再說一次，因為評論通常不全面，所以 PR 的返工時間可能會因為一些瑣碎的事情而花費幾天的時間。 ![團隊週期時間分解](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvws8nxa2kjdvx6034n1.png) “如果不衡量，就無法改進” *通常被認為是彼得·德魯克（Peter Drucker）的作品，但我還沒有找到真正的證據。* 但我發現這句話對我的經驗來說意義深遠。 我過去曾向我的領導階層提出必要的組織變革，使所有團隊能夠減少跨時區的相互依賴，從而使人們能夠更快地協作。 我知道這樣做有多麼困難，但如果沒有可靠的資料支持理由來解釋為什麼需要改變，就更難實現任何改變。 *PS：這就是 Dhruv 和我創辦[Middleware 的](https://www.middlewarehq.com/)部分原因。 🚀* {% 嵌入 https://github.com/middlewarehq/middleware %} 好的，我聽到了。我有什麼選擇？ --------------- 您理想的情況是進行徹底的程式碼審查，也就是說，明顯的危險訊號、效能或安全缺陷或其他難以閱讀的程式碼不應被忽視。 但您也希望所有這一切都在合理的時間內發生。 在合理的時間內合併經過嚴格審查的程式碼，這意味著您的團隊的交付可預測且具有高可靠性。 除非有一種經過充分研究、結構化的方法來掌握這一點。 🤔 …… 您聽過…DORA 指標嗎？ 好吧，這不是另一部《DORA GOOD！文章。 這些是我過去專注於四鍵（正如出色的[Nathen Harvey](https://www.linkedin.com/in/nathen/)所[解釋的](https://dora.dev/guides/dora-metrics-four-keys/)）如何幫助我改善我自己和我的團隊的程式碼交付體驗的經驗。 ![朵拉指標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b49lb17w68bs5fojske7.png) *在中介軟體開源中看到的 DORA 指標* 使用 DORA 探索程式碼審查 --------------- ### 評論會延長交貨時間多久 審核週期長直接影響變更的前置時間。 交貨時間基本上由 5 個部分組成。 1. 從第一次提交到 PR 開放的時間 2. 然後 PR 收到第一次審核（可能是評論、更改、批准） 3. 更改 PR 直至最終獲得批准所花費的時間 4. 批准和 PR 合併之間的時間 5. PR最終部署的時間 當然，任何需要花費時間的部分都會增加您團隊的時間。但有兩個部分是造成延誤的特別嚴重的因素。這是#2 和#3。 **\#2. PR 收到第一次審核的時間（首次回應時間）** PR 公開後，開發人員實際上無法對其做太多事情。公關可能完全可以順利進行！它可能需要切實的改變。在這一點上，只有評論才能告訴我們答案。這也是開發人員可能無法承擔更多任務的時候，因為從技術上講，審查可能隨時發生，並且他們會遭受上下文切換的困擾。 **上下文切換是開發人員最大的生產力殺手之一。** ### 對「每次審核時間」的誤導性關注 這討論了提前期指標的第三個子部分。 **#3。更改 PR 所花費的時間（返工時間）** 這裡真正的問題不在於在這裡花了多少時間，而是來回發生了多少次。我們稱之為「返工週期」。 因為如果因為PR被批准而只有1個返工週期，那麼在批准之前可能仍然需要很長時間，但這是實際的實施時間，而不是空閒時間。可以透過更好的培訓、程式碼庫入門、上下文共享等來減輕這種返工。 但是…如果您要來回很多次，那麼每個週期都有一些與之相關的空閒時間，就像第一次回應時間一樣。 在此期間，開發人員無法接受新的工作，因為這將不可避免地導致快速的上下文切換。 這種情況很可能發生在PR太大而無法一次審完，或是審查者因為其他原因沒有審透徹底的情況下。當作者和審稿人位於相距甚遠的時區時，情況尤其嚴重。由於每次審核和返工都可能發生在各自時區的工作時間內，因此返工更改之前的時間可能會被誇大到很多小時。 **這就是滾雪球效應** 像這樣被屏蔽的 PR 越多，團隊交付的速度就越慢。通常新工作不會停止出現，這使得開發人員準確管理和評估他們的工作變得更具挑戰性。 如果這種情況持續發生，也會對團隊士氣造成打擊。 **博士** 僅僅專注於減少「每次審查的時間」可能會適得其反。 目標應該是在不犧牲徹底性的情況下優化審核流程，確保每次審核都能增加真正的價值。 ### 低於標準的審查和變更失敗率 團隊始終在壓力和緊迫的期限下運作。期望這種情況會神奇地改變是不合理的。但認為不會偷工減料以確保貨物不能按時發貨也是不切實際的。 由於我們談論的是程式碼審查，因此經常被削減的角落之一是： 1. 建立的大型 PR 包含某個功能的所有程式碼，而不是包含良好的較小且更易於審查的 PR。 2. PR 的審核只需略讀即可，因為審核者目前可能沒有足夠的心理能力或時間來正確處理它。 這兩件事時常發生。開發人員也是人。你不能僅僅把責任歸咎於他們或強迫他們「正確地」複習來解決這個問題。 最重要的是你首先要知道它正在發生。因為這樣你就可以做點什麼。你問，你怎麼知道這件事？ 1. 您的交貨時間應該會縮短。因為審核速度更快（通常比應有的速度快） 2. 您的變更失敗率可能會上升。當然，如果評論低於標準，您可能會帶來更多錯誤。 ``` 1. But, even if your CFR isn’t going noticeably down, your team might still be shipping low performance or quality code that would bite you back later, and will likely show up as higher Lead Time down the line. But by then it’ll be too difficult to correlate with the reviews of today. ``` **現在是時候提一下《朵拉》是一位很棒的嚮導，但它並不完美。** 不要將其視為明確的規則手冊。不要用它來衡量個人。 為您的團隊全面使用它，但也要參與其中，以確保它真正幫助您的團隊。畢竟這就是目標，不是嗎？ 偉大的！如何？ 👉 更快、更有效的審核策略 --------------------- ### 這是一個快速**預審清單** 1. 測試：確保所有相關測試都已編寫並通過✅。 ``` 1. This can be done by a CI bot (or Github Actions) ``` 2. 文件：更新相關文件，包括內嵌註解和自述文件。 3. 清晰的提交訊息：編寫描述性提交訊息，解釋更改背後的「原因」。 ``` 2. This could also be enforced via [commit-lint](https://commitlint.js.org/) ``` ``` 3. You could also use [aicommit](https://github.com/Nutlope/aicommits) to help write good and detailed commit messages! ``` ``` 4. My team often uses GH Copilot to create commit messages that actually end up being totally satisfactory to me! ``` 提交訊息範例： ``` feat: add user authentication - Implemented OAuth2 for secure login - Added unit tests for authentication flows - Updated API documentation with new endpoints ``` ### 正確的審稿人，正確的時間 將審閱者與其專業知識和當前工作量相匹配，以避免超負荷。複雜的變更交給高階開發人員，簡單的變更交給同業。 但您還需要了解開發人員對特定程式碼庫有多少上下文。 這裡有一些挑戰： - 如果您的開發人員在單一特定儲存庫中高度專業化，那麼由於需要時間來加入和共享上下文，因此在單獨的程式碼庫上使用他們的技能將非常困難。 - 如果您的開發人員對所有程式碼庫過於籠統，那麼由於缺乏特定程式碼庫的深層上下文，他們可能很難更快地解決某些問題。 - 如果團隊中的一位開發人員對事物有很多背景知識，那麼很容易讓他們負擔過重。您需要儘早騰出時間來分發上下文，這樣您的工作就不會在最關鍵的時候受到阻礙。 您希望確保將兩者結合起來，並且只需與您合作的 2-3 名開發人員即可實現這一目標。 ![視覺化團隊中的瓶頸](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va7uc3ajyb17kiamhq0h.png) *了解誰被阻止對誰進行程式碼審查至關重要。您不希望您的團隊因為有人需要休假而根本無法交付。* ### 貿易工具 使用靜態分析、程式碼檢查和自動檢查在人工審查之前捕獲簡單的問題。這讓審閱者可以專注於更複雜的回饋。 範例工具： - [ESLint](https://eslint.org/) ：JavaScript linting。 - [Husky](https://typicode.github.io/husky/) ：用於執行預提交檢查和靜態分析。 - CI/CD 管道：自動化測試和建置流程。 **超重要提示：** 爭論空格和製表符、分號與否、尾隨換行符很容易浪費大量時間。 但這一切並不重要。 決定並同意團隊最終確定的任何程式碼風格，並將它們作為 linter 規則的一部分強制執行。 這些東西不值得你花時間。 👍 ### 回饋的藝術 給予可操作的、具體的評論，重點是改進，而不是吹毛求疵。避免模糊的陳述並提供明確的指導。 分享如何將一個文件重組為多個文件，以及為什麼這樣做是個好主意。 分享為什麼在循環中多次呼叫資料庫可能是一個壞主意，因為我確信我不需要在這裡解釋。 😆 如果挑剔的問題主要是可以由 linter 處理的事情，那麼就使用其中之一。 人們討厭那些大多只有蝨子的評論。但同樣，糟糕的變數名稱、拼字錯誤等不能只是去生產！ 😁 例子： ``` # Ineffective comment "Fix this." # Effective comment "Consider using a map here to improve lookup efficiency. This will reduce the time complexity from O(n) to O(1)." ``` 使用中介軟體簡化流程 ---------- ### 中介軟體如何提供協助 我能夠具體了解我的團隊在哪裡陷入困境、原因以及如何解除困境。 這就是我工作的一半，現在我能夠比以前更快地完成這些工作！ ![團隊流程概述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl0k380fegaussrrckyd.png) ### 我重點關注以下幾點： - 審核指標：追蹤審核所需的時間並確定發生延遲的位置。 - 流程洞察：了解整個審核流程並找到需要最佳化的領域。 我不會對此進行太多討論，因為那樣聽起來就像是推銷！ 😂 超越技術細節：人的因素 ----------- ### 培養建設性回饋文化 倡導一種將回饋視為成長機會的文化。建設性的、相互尊重的溝通有助於提高程式碼品質和團隊士氣💬。 ### 平衡速度與徹底性 平衡速度與徹底性。快速審查不應影響審查，徹底審查不應拖延。 ### 心理安全 確保審稿人和作者的心理安全。鼓勵公開討論不加指責地解決錯誤，營造持續改進的環境🌱。 請記住，當您分享改進回饋時，人們常常會保持警惕。考慮周到，思路清晰。 結論 -- 有效的程式碼審查對於保持程式碼品質和交付速度至關重要。透過與 DORA 指標保持一致、使用正確的工具並培養建設性的回饋文化，團隊可以簡化其審核流程。採用這些實踐可以使您的程式碼審查既高效又具有影響力。 *嘗試使用[中間件](https://www.middlewarehq.com/)來更深入地了解您的程式碼審查流程並確定需要進一步改進的領域。 🚀* 同樣，這些只是指導方針以及我們如何看待程式碼審查。請分享您的組織中如何進行程式碼審查！ 程式碼審查對於整體產品可靠性起著至關重要的作用。有些情況下，糟糕的程式碼審查（不是糟糕的程式碼！）會造成負面的品牌影響。總而言之，更好的程式碼審查流程有助於降低故障率。 像[DORA](https://github.com/middlewarehq/middleware)這樣的框架被設計為輕量級的，可以幫助工程團隊提高工作效率，而無需工程師甚至領導者付出太多的努力。 Middleware 的使命是幫助工程團隊交付高效率的程式碼。請查看我們的[開源中間件](https://github.com/middlewarehq/middleware)，我們的開源 DORA 指標解決方案，它是本地託管的。如果您喜歡，請考慮給我們一顆星！ --- 原文出處：https://dev.to/middleware/the-senior-engineers-guide-to-the-code-reviews-1p3b

0個讚   0留言 27瀏覽

「自學網頁の嬰兒教材：JavaScript（三）作業分享」

JavaScript 系列三：練習1 ── alert 示警元件: https://jsfiddle.net/applelily/pb73k906/3/ ![](https://i.imgur.com/C4issBf.gif) --- JavaScript 系列三：練習2 ── toast 吐司元件: https://jsfiddle.net/applelily/wvfjp7mu/4/ ![](https://i.imgur.com/IQ9cwIn.gif) --- JavaScript 系列三：練習3 ── modal 互動視窗元件: https://jsfiddle.net/applelily/bq84yco7/1/ ![](https://i.imgur.com/SInaMNJ.gif) --- JavaScript 系列三：練習4 ── 表單驗證: https://jsfiddle.net/applelily/0agfw94c/1/ ![](https://i.imgur.com/gAY8VpV.gif) --- JavaScript 系列三：練習5 ── collapse 折疊效果: https://jsfiddle.net/applelily/p3qk1n7r/5/ ![](https://i.imgur.com/OJH25vq.gif) --- JavaScript 系列三：練習6 ── dropdown 下拉式選單: https://jsfiddle.net/applelily/y2okqcg5/3/ ![](https://i.imgur.com/EB5LLQG.gif) --- JavaScript 系列三：練習7 ── carousel 輪播元件: https://jsfiddle.net/applelily/o6g8chy7/ ![](https://i.imgur.com/hNNx44a.gif) ---

2個讚   1留言 122瀏覽

Web 開發人員的頂級工具

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

0個讚   0留言 26瀏覽

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

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

0個讚   0留言 25瀏覽

TypeScript 專案的自訂實用程式類型

在我們探索 TypeScript 開發的第二部分中，我們引入了另外十種自訂實用程式類型，這些類型可以擴展程式碼的功能，提供更多工具來更有效地管理類型。這些實用程式類型有助於保持您的程式碼庫乾淨、高效和健壯。 第一部分： [TypeScript 專案的 1-10 個自訂實用程式類型](https://dev.to/antonzo/10-sustom-utility-types-for-typescript-projects-48pe) 總有機碳 ---- - [不可空深](#NonNullableDeep) - [合併](#Merge) - [元組到物件](#TupleToObject) - [獨佔元組](#ExclusiveTuple) - [Promise類型](#PromiseType) - [省略方法](#OmitMethods) - [函數參數](#FunctionArguments) - [承諾](#Promisify) - [約束函數](#ConstrainedFunction) - [聯合解析器](#UnionResolver) <a name="NonNullableDeep"></a> `NonNullableDeep` ----------------- `NonNullableDeep`類型是一個實用程序，可從給定類型`T`的所有屬性中深度刪除`null`和`undefined` 。這意味著不僅物件的頂級屬性不可為空，而且所有嵌套屬性也遞歸地標記為不可為空。在必須確保物件的屬性（包括深度嵌套的屬性）不為`null`或`undefined`情況下（例如在處理必須完全填充的資料時），此類型特別有用。 ``` type NonNullableDeep<T> = { [P in keyof T]: NonNullable<T[P]> extends object ? NonNullableDeep<NonNullable<T[P]>> : NonNullable<T[P]>; }; ``` **例子** 以下範例示範如何套用`NonNullableDeep`類型來確保`Person`物件本身及其任何巢狀屬性都無法為`null`或`undefined` ，從而確保整個物件已完全填入。 ``` interface Address { street: string | null; city: string | null; } interface Person { name: string | null; age: number | null; address: Address | null; } const person: NonNullableDeep<Person> = { name: "Anton Zamay", age: 26, address: { street: "Secret Street 123", city: "Berlin", }, }; // Error: Type 'null' is not assignable to type 'string'. person.name = null; // Error: Type 'undefined' is not assignable to type 'number'. person.age = undefined; // Error: Type 'null' is not assignable to type 'Address'. person.address = null; // Error: Type 'null' is not assignable to type 'string'. person.address.city = null; ``` <a name="Merge"></a> `Merge` ------- `Merge<O1, O2>`類型對於透過組合兩個物件類型`O1`和`O2`的屬性來建立新類型非常有用。當屬性重疊時， `O2`中的屬性將覆寫`O1`中的屬性。當您需要擴展或自訂現有類型以確保特定屬性優先時，這特別有用。 ``` type Merge<O1, O2> = O2 & Omit<O1, keyof O2>; ``` **例子** 在此範例中，我們定義了兩種物件類型，分別表示預設設定和使用者設定。使用`Merge`類型，我們組合這些設定來建立最終配置，其中`userSettings`會覆蓋`defaultSettings` 。 ``` type DefaultSettings = { theme: string; notifications: boolean; autoSave: boolean; }; type UserSettings = { theme: string; notifications: string[]; debugMode?: boolean; }; const defaultSettings: DefaultSettings = { theme: "light", notifications: true, autoSave: true, }; const userSettings: UserSettings = { theme: "dark", notifications: ["Warning 1", "Error 1", "Warning 2"], debugMode: true, }; type FinalSettings = Merge<DefaultSettings, UserSettings>; const finalSettings: FinalSettings = { ...defaultSettings, ...userSettings }; ``` <a name="TupleToObject"></a> `TupleToObject` --------------- `TupleToObject`類型是將元組類型轉換為物件類型的實用程序，其中元組的元素成為物件的鍵，並根據這些元素在元組中的位置提取關聯的值。這種類型在需要將元組轉換為更結構化的物件形式的情況下特別有用，允許透過元素的名稱而不是位置更直接地存取元素。 ``` type TupleToObject<T extends [string, any][]> = { [P in T[number][0]]: Extract<T[number], [P, any]>[1]; }; ``` **例子** 考慮這樣一個場景，您正在使用將表架構資訊儲存為元組的資料庫。每個元組包含一個欄位名稱及其對應的資料類型。這種格式通常用於資料庫元資料 API 或架構遷移工具。元組格式緊湊且易於處理，但對於應用程式開發來說，使用物件更方便。 ``` type SchemaTuple = [ ['id', 'number'], ['name', 'string'], ['email', 'string'], ['isActive', 'boolean'] ]; const tableSchema: SchemaTuple = [ ['id', 'number'], ['name', 'string'], ['email', 'string'], ['isActive', 'boolean'], ]; // Define the type of the transformed schema object type TupleToObject<T extends [string, string | number | boolean][]> = { [P in T[number][0]]: Extract< T[number], [P, any] >[1]; }; type SchemaObject = TupleToObject<SchemaTuple>; const schema: SchemaObject = tableSchema.reduce( (obj, [key, value]) => { obj[key] = value; return obj; }, {} as SchemaObject ); // Now you can use the schema object console.log(schema.id); // Output: number console.log(schema.name); // Output: string console.log(schema.email); // Output: string console.log(schema.isActive); // Output: boolean ``` <a name="ExclusiveTuple"></a> `ExclusiveTuple` ---------------- `ExclusiveTuple`類型是一個實用程序，它產生包含來自給定聯合類型`T`的唯一元素的元組。此類型確保聯合的每個元素僅在結果元組中包含一次，從而有效地將聯合類型轉換為具有聯合元素的所有可能的唯一排列的元組類型。這在您需要枚舉聯合成員的所有唯一組合的情況下特別有用。 ``` type ExclusiveTuple<T, U extends any[] = []> = T extends any ? Exclude<T, U[number]> extends infer V ? [V, ...ExclusiveTuple<Exclude<T, V>, [V, ...U]>] : [] : []; ``` **例子** 考慮這樣一個場景：您正在開發一個旅行應用程式的功能，該功能可以為遊覽某個城市的遊客產生獨特的行程。該市有三個主要景點：博物館、公園和劇院。 ``` type Attraction = 'Museum' | 'Park' | 'Theater'; type Itineraries = ExclusiveTuple<Attraction>; // The Itineraries type will be equivalent to: // type Itineraries = // ['Museum', 'Park', 'Theater'] | // ['Museum', 'Theater', 'Park'] | // ['Park', 'Museum', 'Theater'] | // ['Park', 'Theater', 'Museum'] | // ['Theater', 'Museum', 'Park'] | // ['Theater', 'Park', 'Museum']; ``` <a name="PromiseType"></a> `PromiseType` ------------- `PromiseType`類型是一個實用程序，用於提取給定 Promise 解析為的值的類型。這在使用非同步程式碼時非常有用，因為它允許開發人員輕鬆推斷結果的類型，而無需明確指定它。 ``` type PromiseType<T> = T extends Promise<infer U> ? U : never; ``` 此類型使用 TypeScript 的條件類型和`infer`關鍵字來決定`Promise`的解析類型。如果`T`擴展`Promise<U>` ，則表示`T`是解析為類型`U` `Promise` ，而`U`是推斷的類型。如果`T`不是`Promise` ，則型別解析為`never` 。 **例子** 以下範例示範如何使用 PromiseType 類型從 Promise 中提取已解析的類型。透過使用此實用程式類型，您可以推斷 Promise 將解析為的值的類型，這有助於在處理非同步操作時進行類型檢查並避免錯誤。 ``` type PromiseType<T> = T extends Promise<infer U> ? U : never; interface User { id: number; name: string; } interface Post { id: number; title: string; content: string; userId: number; } async function fetchUser(userId: number): Promise<User> { return { id: userId, name: "Anton Zamay" }; } async function fetchPostsByUser(userId: number): Promise<Post[]> { return [ { id: 1, title: "Using the Singleton Pattern in React", content: "Content 1", userId }, { id: 2, title: "Hoisting of Variables, Functions, Classes, Types, " + "Interfaces in JavaScript/TypeScript", content: "Content 2", userId }, ]; } async function getUserWithPosts( userId: number ): Promise<{ user: User; posts: Post[] }> { const user = await fetchUser(userId); const posts = await fetchPostsByUser(userId); return { user, posts }; } // Using PromiseType to infer the resolved types type UserType = PromiseType<ReturnType<typeof fetchUser>>; type PostsType = PromiseType<ReturnType<typeof fetchPostsByUser>>; type UserWithPostsType = PromiseType<ReturnType<typeof getUserWithPosts>>; async function exampleUsage() { const userWithPosts: UserWithPostsType = await getUserWithPosts(1); // The following will be type-checked to ensure correctness const userName: UserType["name"] = userWithPosts.user.name; const firstPostTitle: PostsType[0]["title"] = userWithPosts.posts[0].title; console.log(userName); // Anton Zamay console.log(firstPostTitle); // Using the Singleton Pattern in React } exampleUsage(); ``` **為什麼我們需要`UserType`而不僅僅是使用`User` ？** 這是個好問題！使用`UserType`而不是直接使用`User`主要原因是為了確保從非同步函數的回傳類型準確推斷出類型。這種方法有幾個優點： 1. **類型一致性：**透過使用`UserType` ，您可以確保類型始終與`fetchUser`函數的實際回傳類型一致。如果`fetchUser`的回傳類型發生更改， `UserType`將自動反映該更改，而無需手動更新。 2. **自動類型推斷**：在處理複雜類型和巢狀承諾時，手動確定和追蹤解析的類型可能具有挑戰性。使用 PromiseType 允許 TypeScript 為您推斷這些類型，從而降低錯誤風險。 <a name="OmitMethods"></a> `OmitMethods` ------------- `OmitMethods`型別是個實用程序，可從給定型別`T`中刪除所有方法屬性。這意味著作為函數的類型`T`的任何屬性都將被省略，從而產生僅包含非函數屬性的新類型。 ``` type OmitMethods<T> = Pick<T, { [K in keyof T]: T[K] extends Function ? never : K }[keyof T]>; ``` **例子** 此類型在您想要從物件類型中排除方法的情況下特別有用，例如將物件序列化為 JSON 或透過 API 發送物件時，其中方法不相關且不應包含在內。以下範例示範如何將`OmitMethods`套用至物件類型以刪除所有方法，確保產生的類型僅包含非函數的屬性。 ``` interface User { id: number; name: string; age: number; greet(): void; updateAge(newAge: number): void; } const user: OmitMethods<User> = { id: 1, name: "Alice", age: 30, // greet and updateAge methods are omitted from this type }; function sendUserData(userData: OmitMethods<User>) { // API call to send user data console.log("Sending user data:", JSON.stringify(userData)); } sendUserData(user); ``` <a name="FunctionArguments"></a> `FunctionArguments` ------------------- `FunctionArguments`類型是一個實用程序，用於提取給定函數類型`T`的參數類型。這意味著對於傳遞給它的任何函數類型，該類型將傳回一個表示函數參數類型的元組。此類型在需要捕獲或操作函數的參數類型的情況下特別有用，例如在高階函數中或建立類型安全的事件處理程序時。 ``` type FunctionArguments<T> = T extends (...args: infer A) => any ? A : never; ``` **例子** 假設您有一個高階函數包裝，它接受一個函數及其參數，然後使用這些參數來呼叫該函數。使用 FunctionArguments，您可以確保包裝函數參數的類型安全。 ``` function wrap<T extends (...args: any[]) => any>(fn: T, ...args: FunctionArguments<T>): ReturnType<T> { return fn(...args); } function add(a: number, b: number): number { return a + b; } type AddArgs = FunctionArguments<typeof add>; // AddArgs will be of type [number, number] const result = wrap(add, 5, 10); // result is 15, and types are checked ``` <a name="Promisify"></a> `Promisify` ----------- `Promisify`類型是一個實用程序，它將給定類型`T`的所有屬性轉換為各自類型的 Promise。這意味著結果類型中的每個屬性都將是該屬性的原始類型的`Promise` 。這種類型在處理非同步操作時特別有用，您希望確保整個結構符合基於`Promise`的方法，從而更輕鬆地處理和管理非同步資料。 ``` type Promisify<T> = { [P in keyof T]: Promise<T[P]> }; ``` **例子** 考慮一個顯示使用者個人資料、最近活動和設定的儀表板。這些資訊可能是從不同的服務獲取的。透過承諾單獨的屬性，我們確保使用者資料的每個部分都可以獨立取得、解析和處理，從而在處理非同步操作時提供靈活性和效率。 ``` interface Profile { name: string; age: number; email: string; } interface Activity { lastLogin: Date; recentActions: string[]; } interface Settings { theme: string; notifications: boolean; } interface UserData { profile: Profile; activity: Activity; settings: Settings; } // Promisify Utility Type type Promisify<T> = { [P in keyof T]: Promise<T[P]>; }; // Simulated Fetch Functions const fetchProfile = (): Promise<Profile> => Promise.resolve({ name: "Anton Zamay", age: 26, email: "[email protected]" }); const fetchActivity = (): Promise<Activity> => Promise.resolve({ lastLogin: new Date(), recentActions: ["logged in", "viewed dashboard"], }); const fetchSettings = (): Promise<Settings> => Promise.resolve({ theme: "dark", notifications: true }); // Fetching User Data const fetchUserData = async (): Promise<Promisify<UserData>> => { return { profile: fetchProfile(), activity: fetchActivity(), settings: fetchSettings(), }; }; // Using Promisified User Data const displayUserData = async () => { const user = await fetchUserData(); // Handling promises for each property (might be in different places) const profile = await user.profile; const activity = await user.activity; const settings = await user.settings; console.log(`Name: ${profile.name}`); console.log(`Last Login: ${activity.lastLogin}`); console.log(`Theme: ${settings.theme}`); }; displayUserData(); ``` <a name="ConstrainedFunction"></a> `ConstrainedFunction` --------------------- `ConstrainedFunction`類型是一個實用程序，它約束給定的函數類型 T 以確保保留其參數和傳回類型。它本質上捕獲函數的參數類型和返回類型，並強制結果函數類型必須遵守這些推斷類型。當您需要對高階函數實施嚴格的類型約束或建立必須符合原始函數簽署的包裝函數時，此類型非常有用。 ``` type ConstrainedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? (args: A extends any[] ? A : never) => R : never; ``` **例子** 在事先未知函數簽署且必須動態推斷的情況下， `ConstrainedFunction`可確保根據推斷的類型正確應用約束。想像一個實用程序，它包裝任何函數以記憶其結果： ``` function memoize<T extends (...args: any) => any>(fn: T): ConstrainedFunction<T> { const cache = new Map<string, ReturnType<T>>(); return ((...args: Parameters<T>) => { const key = JSON.stringify(args); if (!cache.has(key)) { cache.set(key, fn(...args)); } return cache.get(key)!; }) as ConstrainedFunction<T>; } const greet: Greet = (name, age) => { return `Hello, my name is ${name} and I am ${age} years old.`; }; const memoizedGreet = memoize(greet); const message1 = memoizedGreet("Anton Zamay", 26); // Calculates and caches const message2 = memoizedGreet("Anton Zamay", 26); // Retrieves from cache ``` 在這裡， `memoize`使用`ConstrainedFunction`來確保記憶函數保持與原始函數`fn`相同的簽名，而不需要明確定義函數類型。 <a name="UnionResolver"></a> `UnionResolver` --------------- `UnionResolver`類型是將聯合型別轉換為可區分聯合的實用程式。具體來說，對於給定的聯合類型`T` ，它會產生一個物件陣列，其中每個物件都包含一個屬性類型，該屬性類型保存聯合中的類型之一。在需要明確處理聯合的每個成員的情況下使用聯合類型時，此類型特別有用，例如在類型安全的 Redux 操作或 TypeScript 中的可區分聯合模式中。 ``` type UnionResolver<T> = T extends infer U ? { type: U }[] : never; ``` **例子** 以下範例示範如何應用`UnionResolver`類型將聯合類型轉換為物件陣列，每個物件都具有`type`屬性。這允許對聯合內的每個操作進行類型安全處理，確保考慮到所有情況並降低使用聯合類型時發生錯誤的風險。 ``` type ActionType = "ADD_TODO" | "REMOVE_TODO" | "UPDATE_TODO"; type ResolvedActions = UnionResolver<ActionType>; // The resulting type will be: // { // type: "ADD_TODO"; // }[] | { // type: "REMOVE_TODO"; // }[] | { // type: "UPDATE_TODO"; // }[] const actions: ResolvedActions = [ { type: "ADD_TODO" }, { type: "REMOVE_TODO" }, { type: "UPDATE_TODO" }, ]; // Now you can handle each action type distinctly actions.forEach(action => { switch (action.type) { case "ADD_TODO": console.log("Adding a todo"); break; case "REMOVE_TODO": console.log("Removing a todo"); break; case "UPDATE_TODO": console.log("Updating a todo"); break; } }); ``` --- 原文出處：https://dev.to/antonzo/11-20-sustom-utility-types-for-typescript-projects-2bg5

0個讚   0留言 100瀏覽

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

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

0個讚   0留言 72瀏覽

編寫 SOLID React Hooks

SOLID 是較常用的設計模式之一。它在許多語言和框架中都很常用，也有一些文章介紹如何在 React 中使用它。 每篇關於 SOLID 的 React 文章都以稍微不同的方式介紹該模型，有些將其應用於元件，有些將其應用於 TypeScript，但很少有人將這些原理應用於鉤子。 由於 hooks 是 React 基礎的一部分，我們將在這裡看看 SOLID 原則如何應用於這些。 單一職責原則（SRP） ----------- Solid 中的第一個字母 S 是最容易理解的。本質上，它的意思是，讓一個鉤子/元件做一件事。 ``` // Single Responsibility Principle ``` ``` A module should be responsible to one, and only one, actor ``` 例如，看看下面的 useUser 鉤子，它會取得使用者和待辦事項，並將任務合併到使用者物件中。 ``` import { useState } from 'react' import { getUser, getTodoTasks } from 'somewhere' const useUser = () => { const [user, setUser] = useState() const [todoTasks, setTodoTasks] = useState() useEffect(() => { const userInfo = getUser() setUser(userInfo) }, []) useEffect(() => { const tasks = getTodoTasks() setTodoTasks(tasks) }, []) return { ...user, todoTasks } } ``` 這個鉤子並不牢固，它不遵守單一責任原則。這是因為它有責任獲取用戶資料和待辦任務，這是兩件事。 相反，上面的程式碼應該分為兩個不同的鉤子，一個用於獲取有關用戶的資料，另一個用於獲取任務。 ``` import { useState } from 'react' import { getUser, getTodoTasks } from 'somewhere' // useUser hook is no longer responsible for the todo tasks. const useUser = () => { const [user, setUser] = useState() useEffect(() => { const userInfo = getUser() setUser(userInfo) }, []) return { user } } // Todo tasks do now have their own hook. // The hook should actually be in its own file as well. Only one hook per file! const useTodoTasks = () => { const [todoTasks, setTodoTasks] = useState() useEffect(() => { const tasks = getTodoTasks() setTodoTasks(tasks) }, []) return { todoTasks } } ``` 這個原則適用於所有的鉤子和元件，它們都應該只做一件事。要問自己的事情是： 1. 這是一個應該顯示 UI（演示性）或處理資料（邏輯性）的元件嗎？ 1. 這個鉤子應該處理什麼單一類型的資料？ 1. 這個鉤子/元件屬於哪一層？它是處理資料儲存還是 UI 的一部分？ 如果您發現自己建造的鉤子對上述每個問題都沒有單一答案，那麼您就違反了單一責任原則。 這裡值得注意的一件有趣的事情是第一個問題。這實際上意味著渲染 UI 的元件不應該處理資料。這意味著，要真正嚴格遵循這項原則，每個顯示資料的 React 元件都應該有一個鉤子來處理其邏輯和資料。換句話說，不應在顯示資料的相同元件中取得資料。 ### 為什麼在 React 中使用 SRP？ 這種單一責任原則其實非常適合 React。 React 遵循基於元件的架構，這意味著它由組合在一起的小元件組成，因此它們一起可以建構並形成一個應用程式。元件越小，可重複使用的可能性就越大。這適用於元件和鉤子。 因此，React 或多或少是建立在單一職責原則上的。如果你不遵循它，你會發現自己總是在編寫新的鉤子和元件，並且很少重複使用它們中的任何一個。 違反單一責任原則將使您的程式碼難以測試。如果不遵循這個原則，您經常會發現您的測試文件有數百行，甚至可能多達 1000 行程式碼。 {% 嵌入 https://dev.to/perssondennis/how-to-use-mvvm-in-react-using-hooks-and-typescript-3o4m %} 開閉原理 (OCP) ---------- 讓我們繼續遵循開閉原則，畢竟這是 SOLID 中的下一個字母。 OCP 和 SRP 一樣是較容易理解的原則之一，至少其定義是如此。 ``` // Open/Closed Principle ``` ``` Software entities (classes, modules, functions, etc.) should ``` ``` be open for extension, but closed for modification ``` 對於最近開始使用 React 的傻瓜來說，這句話可以翻譯為： ``` Write hooks/component which you never will have a reason to ``` ``` touch again, only re-use them in other hooks/components ``` 回想一下本文前面所說的單一責任原則；在 React 中，您需要編寫小元件並將它們組合在一起。讓我們看看為什麼這有幫助。 ``` import { useState } from 'react' import { getUser, updateUser } from 'somewhere' const useUser = ({ userType }) => { const [user, setUser] = useState() useEffect(() => { const userInfo = getUser() setUser(userInfo) }, []) const updateEmail = (newEmail) => { if (user && userType === 'admin') { updateUser({ ...user, email: newEmail }) } else { console.error('Cannot update email') } } return { user, updateEmail } } ``` 上面的鉤子獲取用戶並返回它。如果使用者的類型是管理員，則允許該使用者更新其電子郵件。普通使用者不允許更新其電子郵件。 上面的程式碼絕對不會讓你被解僱。但這會惹惱你團隊中的後端人員，他會為他的孩子閱讀設計模式書籍作為睡前故事。我們就叫他皮特吧。 皮特會抱怨什麼？他會要求你重寫該元件，如下所示。將管理功能提升到它自己的 useAdmin 掛鉤，並讓 useUser 掛鉤除了那些應該可供普通用戶使用的功能之外沒有其他功能。 ``` import { useState } from 'react' import { getUser, updateUser } from 'somewhere' // useUser does now only return the user, // without any function to update its email. const useUser = () => { const [user, setUser] = useState() useEffect(() => { const userInfo = getUser() setUser(userInfo) }, []) return { user } } // A new hook, useAdmin, extends useUser hook, // with the additional feature to update its email. const useAdmin = () => { const { user } = useUser() const updateEmail = (newEmail) => { if (user) { updateUser({ ...user, email: newEmail }) } else { console.error('Cannot update email') } } return { user, updateEmail } } ``` 皮特為什麼要求更新？因為那個無禮挑剔的混蛋皮特寧願希望你現在花時間重寫那個鉤子，然後明天回來進行新的程式碼審查，而不是將來可能需要用一個微小的新 if 語句更新程式碼，如果有的話成為另一種類型的使用者。 好吧，這是消極的說法...樂觀的說法是，使用這個新的useAdmin 掛鉤，當您打算實現僅影響管理員用戶的功能時，或者當您打算實現僅影響管理員用戶的功能時，您不必更改useUser 掛鉤中的任何內容。 當新增新的使用者類型或更新 useAdmin 掛鉤時，無需弄亂 useUser 掛鉤或更新其任何測試。這意味著，當您新增的使用者類型（例如假使用者）時，您不必意外地將錯誤傳送給普通使用者。相反，您只需加入一個新的 userFakeUser 鉤子，您的老闆就不會在周五晚上 9 點給您打電話，因為客戶在發薪週末會遇到銀行帳戶顯示虛假資料的問題。 ![床下的前端開發人員](https://www.perssondennis.com/images/articles/write-solid-react-hooks/frontend-developer-under-the-bed.webp) *皮特的兒子知道要小心義大利麵式程式碼開發人員* ### 為什麼在 React 中使用 OCP？ 一個 React 專案應該有多少個 hooks 和元件是有爭議的。每一個都需要渲染效果圖的代價。 React 不是 Java，其中 22 種設計模式導致 422 個類別用於簡單的 TODO 清單實作。這就是狂野西部網絡 (www) 的魅力所在。 然而，開放/封閉原則顯然也是在 React 中使用的少數模式。上面的鉤子範例是最小的，鉤子沒有做太多事情。隨著更多實質的掛鉤和更大的專案，這項原則變得非常重要。 這可能會花費您一些額外的鉤子，並且需要稍長的時間來實現，但是您的鉤子將變得更加可擴展，這意味著您可以更頻繁地重複使用它們。您將不必經常重寫測試，從而使掛鉤更加牢固。最重要的是，如果您從不接觸舊程式碼，則不會在舊程式碼中產生錯誤。 ![沒有破損的東西不要碰](https://www.perssondennis.com/images/articles/write-solid-react-hooks/dont-touch-what-is-not-broken.webp) *天知道不要碰沒有破損的東西* {% 嵌入 https://dev.to/perssondennis/react-anti-patterns-and-best-practices-dos-and-donts-3c2g %} 里氏替換原理 (LSP) ------------ 啊啊，這個名字……誰是利斯科夫？而誰來代替她呢？而這個定義，難道就沒有意義嗎？ ``` If S subtypes T, what holds for T holds for S ``` 這個原則顯然是關於繼承的，在 React 或 JavaScript 中，繼承的實踐並不像大多數後端語言中那麼多。 JavaScript 在 ES6 之前甚至沒有類，ES6 是[在 2015/2016 年左右引入的，](https://caniuse.com/?search=class)作為基於原型的繼承的語法糖。 考慮到這一點，該原則的用例實際上取決於您的程式碼的外觀。類似 Liskov 的原則在 React 中有意義，可能是： ``` If a hook/component accepts some props, all hooks and components ``` ``` which extends that hook/component must accept all the props the ``` ``` hook/component it extends accepts. The same goes for return values. ``` 為了說明這一點，我們可以看一下兩個儲存鉤子：useLocalStorage 和 useLocalAndRemoteStorage。 ``` import { useState } from 'react' import { getFromLocalStorage, saveToLocalStorage, getFromRemoteStorage } from 'somewhere' // useLocalStorage gets data from local storage. // When new data is stored, it calls saveToStorage callback. const useLocalStorage = ({ onDataSaved }) => { const [data, setData] = useState() useEffect(() => { const storageData = getFromLocalStorage() setData(storageData) }, []) const saveToStorage = (newData) => { saveToLocalStorage(newData) onDataSaved(newData) } return { data, saveToStorage } } // useLocalAndRemoteStorage gets data from local and remote storage. // I doesn't have callback to trigger when data is stored. const useLocalAndRemoteStorage = () => { const [localData, setLocalData] = useState() const [remoteData, setRemoteData] = useState() useEffect(() => { const storageData = getFromLocalStorage() setLocalData(storageData) }, []) useEffect(() => { const storageData = getFromRemoteStorage() setRemoteData(storageData) }, []) const saveToStorage = (newData) => { saveToLocalStorage(newData) } return { localData, remoteData, saveToStorage } } ``` 透過上面的鉤子，useLocalAndRemoteStorage 可以被視為 useLocalStorage 的子類型，因為它與 useLocalStorage 執行相同的操作（保存到本地存儲），而且還通過將資料保存到其他位置來擴展 useLocalStorage 的功能。 這兩個鉤子有一些共享的屬性和回傳值，但是 useLocalAndRemoteStorage 缺少 useLocalStorage 接受的 onDataSaved 回呼屬性。傳回屬性的名稱也有不同的命名，本地資料在useLocalStorage中命名為data，而在useLocalAndRemoteStorage中命名為localData。 如果你問利斯科夫，這就違背了她的原則。實際上，當她嘗試更新Web 應用程式以在伺服器端保留資料時，她會非常憤怒，只是意識到她不能簡單地用useLocalAndRemoteStorage 鉤子替換useLocalStorage，只是因為一些懶惰的開發人員從未為useLocalAndRemoteStorage 鉤子實現onDataSaved回調。 利斯科夫會痛苦地更新鉤子來支持這一點。同時，她也會更新 useLocalStorage 掛鉤中的本地資料名稱，以符合 useLocalAndRemoteStorage 中的本地資料名稱。 ``` import { useState } from 'react' import { getFromLocalStorage, saveToLocalStorage, getFromRemoteStorage } from 'somewhere' // Liskov has renamed data state variable to localData // to match the interface (variable name) of useLocalAndRemoteStorage. const useLocalStorage = ({ onDataSaved }) => { const [localData, setLocalData] = useState() useEffect(() => { const storageData = getFromLocalStorage() setLocalData(storageData) }, []) const saveToStorage = (newData) => { saveToLocalStorage(newData) onDataSaved(newData) } // This hook does now return "localData" instead of "data". return { localData, saveToStorage } } // Liskov also added onDataSaved callback to this hook, // to match the props interface of useLocalStorage. const useLocalAndRemoteStorage = ({ onDataSaved }) => { const [localData, setLocalData] = useState() const [remoteData, setRemoteData] = useState() useEffect(() => { const storageData = getFromLocalStorage() setLocalData(storageData) }, []) useEffect(() => { const storageData = getFromRemoteStorage() setRemoteData(storageData) }, []) const saveToStorage = (newData) => { saveToLocalStorage(newData) onDataSaved(newData) } return { localData, remoteData, saveToStorage } } ``` 透過為鉤子提供通用介面（傳入的 props、傳出的返回值），它們可以變得非常容易交換。如果我們遵循里氏替換原則，繼承另一個鉤子/元件的鉤子和元件應該可以用它繼承的鉤子或元件替換。 ![擔心的利斯科夫](https://www.perssondennis.com/images/articles/write-solid-react-hooks/worried-liskov.webp) *當開發人員不遵循她的原則時，利斯科夫感到失望* ### 為什麼在 React 中使用 LSP？ 儘管繼承在 React 中並不是很突出，但它肯定在幕後使用。 Web 應用程式通常可以有幾個外觀相似的元件。文字、標題、連結、圖示連結等都是類似類型的元件，可以從繼承中受益。 IconLink 元件可能會也可能不會包裝 Link 元件。無論哪種方式，它們都會受益於使用相同的介面（使用相同的 props）實作。這樣，您可以隨時在應用程式中的任何位置將 Link 元件替換為 IconLink 元件，而無需編輯任何其他程式碼。 鉤子也是如此。 Web 應用程式從伺服器取得資料。他們也可能使用本地儲存或狀態管理系統。這些最好可以共享道具以使它們可以互換。 應用程式可能會從後端伺服器取得使用者、任務、產品或任何其他資料。類似的函數也可以共享接口，從而更容易重複使用程式碼和測試。 {% 嵌入 https://dev.to/perssondennis/the-20-most-common-use-cases-for-javascript-arrays-2j8j %} 介面隔離原則（ISP） ----------- 另一個更明確的原則是介面隔離原則。定義很短。 ``` No code should be forced to depend on methods it does not use ``` 顧名思義，它與介面有關，基本上意味著函數和類別應該只實現它明確使用的介面。最容易實現這一點的方法是保持介面整潔，讓類別選擇其中的一些來實現，而不是被迫用它不關心的幾種方法來實現一個大介面。 例如，代表擁有網站的人的類別應該實現兩個接口，一個稱為 Person 的接口，描述有關此人的詳細訊息，另一個用於網站的接口，其中包含有關其擁有的網站的元資料。 ``` interface Person { firstname: string familyName: string age: number } interface Website { domain: string type: string } ``` 如果相反，建立一個單一介面網站，包括有關所有者和網站的訊息，則將違反介面隔離原則。 ``` interface Website { ownerFirstname: string ownerFamilyName: number domain: string type: string } ``` 你可能會想，上面的介面有什麼問題嗎？它的問題是它使介面不太可用。想想看，如果公司不是人，而是公司，你會怎麼做？公司其實沒有姓氏。然後您會修改介面以使其對人類和公司都可用嗎？或者您會建立一個新介面 CompanyOwnedWebsite 嗎？ 然後，您最終會得到一個具有許多可選屬性的接口，或分別稱為 PersonWebsite 和 CompanyWebsite 的兩個接口。這些解決方案都不是最佳的。 ``` // Alternative 1 // This interface has the problem that it includes // optional attributes, even though the attributes // are mandatory for some consumers of the interface. interface Website { companyName?: string ownerFirstname?: string ownerFamilyName?: number domain: string type: string } // Alternative 2 // This is the original Website interface renamed for a person. // Which means, we had to update old code and tests and // potentially introduce some bugs. interface PersonWebsite { ownerFirstname: string ownerFamilyName: number domain: string type: string } // This is a new interface to work for a company. interface CompanyOwnedWebsite { companyName: string domain: string type: string } ``` ISP 遵循的解決方案如下所示。 ``` interface Person { firstname: string familyName: string age: number } interface Company { companyName: string } interface Website { domain: string type: string } ``` 透過上述適當的接口，代表公司網站的類別可以實現接口 Company 和 Website，但不需要考慮 Person 接口中的 firstname 和 familyName 屬性。 ### React 中使用 ISP 嗎？ 所以，這個原則顯然適用於接口，這意味著它只應該在您使用 TypeScript 編寫 React 程式碼時才有意義，不是嗎？ 當然不是！不輸入介面並不意味著它們不存在。到處都有，只是你沒有明確地輸入它們。 在 React 中，每個元件和鉤子都有兩個主要接口，輸入和輸出。 ``` // The input interface to a hook is its props. const useMyHook = ({ prop1, prop2 }) => { // ... // The output interface of a hook is its return values. return { value1, value2, callback1 } } ``` 使用 TypeScript，您通常會鍵入輸入接口，但輸出接口通常會被跳過，因為它是可選的。 ``` // Input interface. interface MyHookProps { prop1: string prop2: number } // Output interface. interface MyHookOutput { value1: string value2: number callback1: () => void } const useMyHook = ({ prop1, prop2 }: MyHookProps): MyHookOutput => { // ... return { value1, value2, callback1 } } ``` 如果鉤子不會將 prop2 用於任何用途，那麼它不應該成為其 props 的一部分。對於單一道具，可以輕鬆地將其從道具清單和介面中刪除。但是，如果 prop2 是物件類型，例如上一章不正確的 Website 介面範例，該怎麼辦？ ``` interface Website { companyName?: string ownerFirstname?: string ownerFamilyName?: number domain: string type: string } interface MyHookProps { prop1: string website: Website } const useMyCompanyWebsite = ({ prop1, website }: MyHookProps) => { // This hook uses domain, type and companyName, // but not ownerFirstname or ownerFamilyName. return { value1, value2, callback1 } } ``` 現在我們有一個 useMyCompanyWebsite 鉤子，它有一個 website 屬性。如果鉤子中使用了網站介面的部分內容，我們不能簡單地刪除整個網站道具。我們必須保留 website 屬性，因此也保留ownerFirstname 和ownerFamiliyName 的介面屬性。這也意味著，該針對公司的掛鉤可以由人類擁有的網站所有者使用，即使該掛鉤可能不適用於該用途。 ### 為什麼在 React 中使用 ISP？ 我們現在已經了解了 ISP 的含義，以及它如何應用於 React，即使不使用 TypeScript。透過查看上面的小例子，我們也看到了一些不遵循 ISP 的問題。 在更複雜的專案中，可讀性是最重要的。介面隔離原則的目的之一是避免混亂，避免不必要的程式碼的存在，這些程式碼只會破壞可讀性。不要忘記可測試性。您是否應該關心您實際未使用的道具的測試覆蓋率？ 實現大型介面也迫使您將 props 設定為可選。導致更多的 if 語句來檢查函數的存在和潛在的誤用，因為在介面上顯示該函數將處理此類屬性。 {% 嵌入 https://dev.to/perssondennis/answers-to-common-nextjs-questions-1oki %} 依賴倒置原則（DIP） ----------- 最後一個原則，即 DIP，包括一些被廣泛誤解的術語。令人困惑的地方在於依賴反轉、依賴注入和控制反轉之間的差異。所以我們先聲明一下。 **依賴倒置** 依賴倒置原則（DIP）表示高階模組不應該從低階模組導入任何內容，兩者都應該依賴抽象。這意味著任何高階模組自然可能依賴它所使用的模組的實作細節，但不應該具有這種依賴性。 高級模組和低階模組的編寫方式應使它們都可以在不了解其他模組內部實現的任何細節的情況下使用。只要介面保持不變，每個模組都應該可以用它的替代實作來替換。 **控制反轉** 控制反轉（IoC）是用來解決依賴反轉問題的原理。它指出模組的依賴關係應由外部實體或框架提供。這樣，模組本身只需使用依賴項，而不必建立依賴項或以任何方式管理它。 **依賴注入** 依賴注入（DI）是實現 IoC 的常見方法。它透過建構函數或 setter 方法注入模組來提供對模組的依賴關係。這樣，模組就可以使用依賴項而無需負責建立它，這符合 IoC 原則。值得一提的是，依賴注入並不是實現控制反轉的唯一方法。 ### React 中使用 DIP 嗎？ 澄清了這些術語，並知道 DIP 原則是關於依賴倒置的，我們可以再次看看這個定義是怎樣的。 ``` High-level modules should not import anything from low-level modules. ``` ``` Both should depend on abstractions ``` 這如何適用於 React？ React 不是一個通常與依賴注入相關的函式庫，那我們該如何解決依賴倒置的問題呢？ 這個問題最常見的解決方案是鉤子。鉤子不能算作依賴注入，因為它們被硬編碼到元件中，並且不可能在不更改元件實現的情況下用另一個鉤子替換鉤子。相同的鉤子將在那裡，使用相同的鉤子實例，直到開發人員更新程式碼。 但請記住，依賴注入並不是實現依賴倒置的唯一方法。 Hooks 可以被視為 React 元件的外部依賴，它有一個介面（它的 props），可以抽像出 hook 中的程式碼。這樣，鉤子就實現了依賴倒置的原則，因為元件依賴抽象接口，而不需要知道有關鉤子的任何細節。 React 中 DIP 的另一個更直觀的實作（實際上使用依賴注入）是 HOC 和上下文的使用。請參閱下面的 withAuth HOC。 ``` const withAuth = (Component) => { return (props) => { const { user } = useContext(AuthContext) if (!user) { return <LoginComponent> } return <Component {...props} user={user} /> } } const Profile = () => { // Profile component... } // Use the withAuth HOC to inject user to Profile component. const ProfileWithAuth = withAuth(Profile) ``` 上面顯示的 withAuth HOC 使用依賴項注入為使用者提供 Profile 元件。這個範例的有趣之處在於，它不僅顯示了依賴注入的一種用法，而且實際上包含了兩個依賴注入。 將使用者註入到設定檔元件並不是此範例中的唯一注入。 withAuth 鉤子實際上也透過 useContext 鉤子透過依賴注入來獲取使用者。在程式碼中的某個地方，有人聲明了一個將使用者註入上下文的提供者。該用戶實例甚至可以在執行時透過更新上下文中的用戶來更改。 ### 為什麼在 React 中使用 DIP？ 儘管依賴注入不是與 React 相關的常見模式，但它實際上與 HOC 和上下文相關。鉤子從 HOC 和上下文中佔據了大量市場份額，也很好地證實了依賴倒置原則。 因此，DIP 已經內建到 React 庫本身中，當然應該使用。它既易於使用，又具有模組之間的鬆散耦合、鉤子和元件的可重複使用性和可測試性等優點。它也使得實現其他設計模式（例如單一職責原則）變得更加容易。 我不鼓勵的是，當確實有更簡單的解決方案可用時，請嘗試實施智慧解決方案並過度使用該模式。我在網路和書籍中看到了使用 React 上下文的建議，其唯一目的是實現依賴注入。像下面這樣的東西。 ``` const User = () => { const { role } = useContext(RoleContext) return <div>{`User has role ${role}`}</div> } const AdminUser = ({ children }) => { return ( <RoleContext.Provider value={{ role: 'admin' }}> {children} </RoleContext.Provider> ) } const NormalUser = ({ children }) => { return ( <RoleContext.Provider value={{ role: 'normal' }}> {children} </RoleContext.Provider> ) } ``` 儘管上面的範例確實將角色注入到 User 元件中，但為其使用上下文純粹是矯枉過正。當上下文本身有其用途時，應該在適當的時候使用 React 上下文。在這種情況下，一個簡單的道具可能是更好的解決方案。 ``` const User = ({ role }) => { return <div>{`User has role ${role}`}</div> } const AdminUser = () => <User role='admin' /> const NormalUser = () => <User role='normal' /> ``` {% cta https://2e015922.sibforms.com/serve/MUIFAGF3ypa0p6D6nTWI0MHVOIAC7q4TIJd0yXAhiBC9CswkNPnOlQBzeqSbR2XFM95gUn2G1IxWwCpDpDjkjk aaG9tz9UYhn\_O\_dWg1PPGS8kRM5ROREaJsslnGD8WEHszzZr0geJ9-g7lGsbn\_hTT-wZSKWa1C8ay4Ok85ozro %}訂閱我的文章{% endcta %} {% 嵌入 https://dev.to/perssondennis %} --- 原文出處：https://dev.to/perssondennis/write-solid-react-hooks-436o

0個讚   0留言 27瀏覽

10 個工程博客，免費成為系統設計英雄

簡介： ------- 系統設計基本上是您想要建造的系統的藍圖。它是定義系統架構、元件和介面以滿足某些特定需求的過程。系統設計是軟體開發行業的熱門話題之一，在技術面試中被廣泛詢問，學習這項技能將保證你的加薪。 ![唐納川普說系統設計就是金錢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26gmdveo1ak1y0r752cn.gif) 在這篇文章中，我將分享十大系統設計工程博客，這些博客將幫助您免費成為系統設計大師 [字節字節 Go 博客](https://blog.bytebytego.com/) ------------------------------------------ Byte Byte Go 是一家教育科技新創公司，專注於提供系統設計主題的培訓和課程，幫助您像專業人士一樣在系統設計面試中取得好成績。 Byte Byte go 可以認為是學習和掌握系統設計技能最好的學校之一。 他們使用互動式動畫影片、心智圖、備忘錄等分解了複雜的系統設計主題，這將幫助您輕鬆掌握系統設計。無論您是系統設計新手還是想跟上當前行業標準，Byte Byte Go 都是您的必去之選 ![位元組GO博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffpgu7maxrhb2jbejve5.png) [谷歌研究](https://research.google/blog/?page=1&) --------------------------------------------- 谷歌是世界上最受歡迎、最高效的搜尋引擎之一。他們每天在其平台上處理數十億用戶和請求。 Angular、Flutter、Android、Google Cloud、Firebase 等 Google 產品是幾乎每個開發人員都使用的一些關鍵技術。谷歌研究平台擁有廣泛的軟體開發主題，包括機器學習、軟體系統、硬體和架構、分散式和平行系統，這個平台是軟體開發人員學習和研究各種主題的隱藏寶石 ![谷歌研究](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jwp16grrttt33g44eg1.png) [Dropbox 技術博客](https://dropbox.tech/) ------------------------------------- Dropbox 是一家美國科技公司，為各種用例提供儲存解決方案和其他軟體產品。他們每天也處理數百萬個請求，然後管理和擴展大型軟體基礎設施。在這裡您可以探索各種主題，例如基礎設施、前端開發、安全性、行動應用程式開發等。 ![投遞箱技術博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdp43crv099kww6yl8ls.png) [Netflix 科技部落格](https://netflixtechblog.com/) --------------------------------------------- Netflix 是全球最受歡迎、最成功的 Ott 巨頭之一，每天處理數百萬用戶和請求。您可以關注 Netflix 工程博客，了解從視訊串流、微服務到機器學習和人工智慧等各種主題。如果您在 Ott 行業工作或計劃在視訊串流技術之上建立一些東西，您必須關注 Netflix 技術部落格以供參考。 ![Netflix 科技部落格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2trw7unayy4uett3cri0.png) [優步工程博客](https://eng.uber.com/) ------------------------------- 優步是世界上最受歡迎、也有望成為最大的線上計程車服務提供者之一。優步也涉足線上食品配送領域。我將 Uber 工程部落格放入此列表的原因是因為您會在他們的部落格中找到一些最重要的主題，例如使用地圖和位置來提供服務。使用地理位置資料是軟體工程中最重要的主題之一，電子商務和物流等最常見的工業部門非常依賴這些訊息，以便他們能夠盡快交付產品或服務。如果您是軟體產業中從事地理位置或導航技術工作或計劃使用這些技術建立某些東西的人，那麼 Uber 工程部落格是您必須查看的內容 ![優步工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1kwwqi4orz3cunyeo9p.png) [元工程博客](https://engineering.fb.com/) ------------------------------------ Meta（原 Facebook）是世界上最大的社群媒體巨頭，也是最受歡迎的用於建立使用者介面的 JavaScript 函式庫（即 React.js）的創辦人和維護者。除此之外，幾乎所有流行的社交媒體應用程式（包括 facebook、instagram、whatsapp、threads 等）都歸他們所有。元工程博客包含廣泛的軟體工程主題，如網絡和移動開發、基礎設施系統、影片技術、AR 和 VR 技術等。 VR 科技 ![元工程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8mba756nkk0q9fnsy4t.png) [Stripe 工程博客](https://stripe.com/blog/engineering) -------------------------------------------------- Stripe 是最受歡迎的提供支付相關解決方案的公司之一。大多數線上企業和電子商務網站都使用 stripe 來處理付款、訂閱和發票，即使我也使用 stripe 來存取客戶的付款。 Stripe Engineering 部落格涵蓋了廣泛的主題，您可以探索這些主題，例如使用機器學習進行詐欺偵測、用於響應式和互動式支付介面的 UI 和 UX 相關主題、應用程式安全性等等。因此，如果您正在從事支付工作或計劃建立與處理支付相關的東西，您一定要查看 Stripe 工程部落格作為參考。 ![Stripe 工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g8eoq6f2puv2nkekfxy.png) [亞馬遜工程博客](https://aws.amazon.com/blogs) --------------------------------------- 亞馬遜工程博客 亞馬遜是世界上最大的電子商務巨頭，不僅如此，它還擁有亞馬遜網路服務（最大的雲端服務供應商）、亞馬遜Prime（最受歡迎的OTT巨頭之一）、有聲故事平台亞馬遜音樂等等。多的。 Amazon Engineering 部落格涵蓋了廣泛的主題，包括容器和 Kubernetes、雲端模式和架構、機器學習和 Amazon 人工智慧技術，以解決複雜的業務挑戰。因此，如果您打算使用 AWS 建立下一個應用程式或整合 Alexa 等亞馬遜技術，那麼亞馬遜工程部落格是您必須查看的地方。 ![亞馬遜工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a07bwfp2rsebvi180cnl.png) [微軟開發部落格](https://devblogs.microsoft.com/) ------------------------------------------ 微軟是美國最受歡迎的科技巨頭之一，擁有最常用的作業系統 Windows、用於建立極快企業應用程式的點網框架、Bing 搜尋引擎、copilot（最高效的人工智慧工具之一）、最大的程式碼共享、託管和版本控制平台GitHub、Azure雲端平台（最大的雲端服務提供者之一）。 Microsoft 工程部落格包含廣泛的主題和教程，還包括 Windows、azure、機器學習和人工智慧、dot net 框架。如果您打算使用 Microsoft 技術建立下一個應用程式或軟體，那麼您必須關注它 ![微軟開發部落格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y10tc92q65czuks6cidk.png) [蘋果開發者新聞](https://developer.apple.com/news/) -------------------------------------------- 蘋果是世界上最大的科技巨頭之一，也擁有最受歡迎的Mac作業系統和IOS（iPhone作業系統）。 MacBook 和 iPhone 擁有非常龐大的用戶群，因此大多數新創公司和企業也為 Mac 和 IOS 用戶打造產品。 Apple 開發者新聞主要包含與IOS、Swift（建立本機IOS 和Mac OS 應用程式的唯一語言）、Swift UI（Apple UI）相關的主題，以及一些與C++、Kubernetes 等主題相關的主題。正在計劃的人要為 iOS 或 Mac OS 用戶建立軟體，開發者新聞是您必須參考的。 ![蘋果開發者新聞](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ewo1tt4046wgom5d8hy.png) 結論 -- 在本文中，我討論了 10 個您必須查看的工程博客，以提高您的系統設計技能。如果您關注每個博客，那很好，但我建議您必須僅根據您將使用的堆疊或您正在處理的行業類型來查看那些博客 --- 原文出處：https://dev.to/kumarkalyan/10-engineering-blogs-to-become-a-system-design-hero-for-free-20ee

0個讚   0留言 74瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 可用於下一個專案的 30 多個強大 AI 庫
🔥 如何在行動裝置上測試本地網站
🔥 在 Docker 容器中執行 React 應用程式
🔥 Docker 絕對初學者
🔥 肏！原來JS寫腳本這麼簡單？手把手教你玩油猴！
  近期留言
熱門搜尋： 使用 題 component' 工作 1 前 c 專案 開發 2 作為 技術 第一 網頁 4 作業 ＣＳＳ 聊天 學習 語言 . 20 主題 測試 C 研究 分享 COM javasc 研 前端 % 網站 Java js ui github 套件 10 19 系列 50 javascript git AWS 架構 ul 工程師 結構 bi jav Line py app Html 後端 api Ai JS html with 編輯 node id HTML JavaScript for 入門 API ? 開源 go json ` console 資料庫 react 非同步 AI 謝謝 ci 搜尋 create local Git python 新創 遊戲 查詢 REACT class user GIT ' JAVA import React cn %' 練習
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。