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

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

🔍 搜尋結果：新手

🔍 搜尋結果：新手

掌握 JavaScript 生成器 🔥

JavaScript 是一種以其多功能性和易用性而聞名的語言，它具有多種功能，對於新手和經驗豐富的開發人員來說都非常強大。其中一項功能就是生成器。 ECMAScript 2015 (ES6) 中引入的生成器提供了一種處理迭代和非同步程式設計的獨特方法。在本文中，我們將探討什麼是生成器、它們如何運作以及它們的實際應用。 --- 什麼是發電機？ ------- 生成器是一種特殊類型的函數，可以暫停和恢復執行。與呼叫時執行完成的常規函數不同，生成器在指定點將控制權交還給呼叫者。這種暫停和恢復的能力使它們對於需要一系列值或需要更優雅地處理非同步操作的任務特別有用。 --- 文法和基本用法 ------- 生成器函數是使用`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留言 15瀏覽

僅使用 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留言 62瀏覽

DevOps 的 Git 分支策略：協作最佳實踐

介紹 == 先決條件 ---- 本文面向已經熟悉 GitHub 並了解其功能的讀者。如果您是 GitHub 新手，請考慮 **[在此處](https://dev.to/angelotheman/master-git-commands-with-this-handy-cheat-sheet-4412)**探索一些介紹資源 DevOps 中的 Git 分支簡介 ------------------ 在快節奏的軟體工程世界中，高效且有效的程式碼管理至關重要。 Git 分支策略在維持流暢的工作流程和確保團隊成員之間的無縫協作方面發揮著至關重要的作用。 本文旨在探索各種 Git 分支策略，提供見解和最佳實踐，以協助您和您的團隊加強協作並簡化開發流程。 了解 Git 分支 ========= 在 Git 中，**分支**代表單一開發線。分支允許多個開發人員同時處理不同的功能、錯誤修復或實驗，而不會幹擾主程式碼庫。這種靈活性在 DevOps 環境中至關重要，在這種環境中，持續整合和持續交付實踐需要頻繁的更新和部署。 ### 關鍵概念： - **分支：**與主專案不同的平行開發線。 - **提交：**對程式碼庫進行的單獨更改或更新。 - **合併：**將一個分支的變更整合到另一個分支的過程。 Git 分支策略 ======== 基於主幹的開發 ------- 基於主幹的開發著重於擁有一個主分支，通常稱為***「主幹」***或***「主幹」。***開發人員經常提交此分支，確保程式碼庫始終處於可部署狀態。如果使用樹枝，它們的壽命很短，很快就會合併回主幹。 ### 優點 - 簡化 CI 流程 - 降低管理分公司的複雜性 - 促進快速交付和快速回饋週期。 ### 缺點 - 頻繁的整合可能會導致衝突 - 需要遵守維護建置和測試穩定性的紀律 GitHub 流程 --------- GitHub Flow 是一種簡單且有效的分支策略，圍繞著單一生產就緒分支（通常名為 main 或 master）。開發工作是在短期功能分支上完成的，並且更改透過拉取請求合併到主分支中，這有助於協作和程式碼審查。 ### 優點 - 保持分支模型簡單 - Pull 請求鼓勵協作和程式碼審查 - 與 CI/CD 管道良好整合以實現持續部署 ### 缺點 - 管理大型團隊可能會變得困難 - 依靠徹底的程式碼審查來保持品質 Git 流程 ------ 除了短期功能分支之外，Git Flow 使用多個長期分支，包括`main` 、 `develop` 、 `release`和`hotfix` 。此策略提供了用於管理不同類型變更的結構化流程，使其成為大型團隊和複雜專案的理想選擇。 ### 優點 - 有組織和結構化的流程 - 生產和開發程式碼之間的明確分離 - 能夠很好地適應大型團隊和複雜專案 ### 缺點 - 對於較小的團隊或專案來說可能過於複雜 - 頻繁的合併和分支管理可能非常耗時 功能分支（基於功能的開發） ------------- 功能分支涉及為每個功能建立專用分支，該分支可能是長期的，也可能是短期的。這種策略允許並行開發多個功能而不影響主分支。一旦功能完成並經過測試，就會將其合併回主分支 ### 優點 - 每個功能都是隔離的，減少衝突的風險 - 促進平行開發 - 為每個功能維護清晰的提交歷史記錄 ### 缺點 - 功能可能會在單獨的分支中保留太長時間，從而導致整合挑戰 - 合併多個功能分支可能很複雜且容易出錯 總計表 --- &lt; 表&gt; #### 策略 #### 關鍵特點 #### 主要優勢 #### 主要缺點 **基於主幹的** 單一主幹 簡化 CI 和快速交付 頻繁的整合衝突 **GitHub 流程** 功能分支 + PR 鼓勵協作和程式碼審查 不適合大型團隊 **Git 流程** 多個長壽分支 流程結構化，分離清晰 可能很複雜且耗時 **特徵分支** 專用功能分支 隔離和並行開發 整合延遲和複雜的合併 這是一個範例程式碼片段，總結了分支的建立和合併 ``` # Create and switch to a develop branch git checkout -b develop # Create a feature branch from develop git checkout -b feature-branch develop # Make changes and commit git add . git commit -m "Implement new feature" # Merge feature branch back to develop git checkout develop git merge feature-branch # When ready for release, merge develop to master git checkout master git merge develop # Tag the release git tag -a v1.0 -m "Release version 1.0" ``` 選擇正確的策略 ======= 選擇適當的分支策略取決於多個因素，包括團隊規模和部署頻率。讓我們仔細看看這些因素如何影響分支策略的選擇。 團隊規模 ---- 開發團隊的規模會顯著影響分支策略的選擇。較小的團隊通常受益於更簡單、更精簡的方法，而較大的團隊可能需要更結構化的策略來有效管理其工作流程。下表概述了根據團隊規模推薦的分支策略。 &lt; 表&gt; #### 團隊規模 #### 推薦策略 #### 推理 **小團隊（1 - 5 名成員）** 基於主幹的開發，GitHub Flow 更簡單的策略可以最大限度地減少開銷並促進快速整合。 **中型團隊（6 - 20 名成員）** Github 流程、功能分支 結構化分支可同時處理多個功能和任務。 **大型團隊（20+）** 功能分支、Git 流程 管理多個並行開發和發布的結構化方法。 部署頻率 ---- 團隊部署程式碼的頻率是選擇正確分支策略的另一個關鍵因素。高部署頻率需要支援快速整合和部署的方法，而較不頻繁的部署可以適應更複雜和結構化的分支模型。下表總結了根據部署頻率所建議的策略。 &lt; 表&gt; #### 部署頻率 #### 推薦策略 #### 推理 **高頻** 基於主幹的開發，GitHub Flow 支援持續整合和快速部署。 **中頻** GitHub Flow，功能分支 平衡定期更新的結構和靈活性。 **低頻** 功能分支、Git 流程 管理較長的開發週期並確保穩定性。 協作最佳實踐 ====== 無論選擇何種分支策略，有效的協作對於任何開發團隊的成功至關重要。以下是一些確保順利協作並最大限度地提高生產力的最佳策略。 有效溝通 ---- 清晰一致的溝通對於避免誤解和確保每個人都達成共識至關重要。增強團隊內部溝通的一些方法如下 - 舉行每日站立會議或每週簽到，討論進度、挑戰和後續步驟 - 利用 Slack、Microsoft Teams 或 Discord 等通訊工具進行即時通訊和更新。 - 維護流程、指南和專案詳細資訊的全面文件。 Confluence 或 Notion 等工具可以幫助解決這個問題 程式碼審查和拉取請求 ---------- 程式碼審查對於維護程式碼品質和團隊內的知識共享至關重要。進行程式碼審查的最佳實踐是 - 定義清晰的程式碼審查指南，包括要尋找的內容，並提供建設性的回饋。 - 在審查過程之前，使用自動化工具檢查程式碼品質、樣式和安全問題。我在**[上](https://dev.to/angelotheman/how-to-set-up-github-actions-for-continuous-integration-2054)**一篇文章中對此進行了介紹。 - 鼓勵開發人員建立小型、集中的拉取請求，以便更容易審查和合併。 處理衝突和合併 ------- 合併衝突在協作開發中是不可避免的，但可以透過正確的方法進行有效管理。以下是如何處理衝突並順利合併： - 定期將主分支的變更合併到功能分支中以最大程度地減少衝突。這可以讓您的分行及時了解最新的變更。 - 衝突一出現就立即解決，以防止其隨著時間的推移變得更加複雜。 - 讓團隊成員參與解決衝突，特別是當變更影響程式碼庫的多個區域時。結對程式設計或群體程式設計對於解決棘手的衝突很有用。 與 CI/CD 集成 ---------- 將分支策略與持續整合和持續交付實踐保持一致對於高效開發和部署至關重要。以下是將分支策略與 CI/CD 整合的方法： - 為每個分支設定自動化建置和測試，以儘早發現問題。 Jenkins、Travis CI 和 GitHub Actions 等工具可以提供協助。 - 配置 CI/CD 管道以自動從主分支或指定的發布分支部署變更。這可確保您的程式碼始終處於可部署狀態。 - 使用功能標誌安全地部署不完整的功能。這允許您將程式碼發佈到生產環境，同時隱藏新功能直到它們準備就緒。 有用的網址 ===== - [Git 分支策略 - GitKraken](https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy) - [Git 分支](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging) - [分支策略 - Atlassian](https://www.atlassian.com/agile/software-development/branching) 結論 == 在快節奏的軟體開發世界中，選擇正確的 Git 分支策略對於維持團隊內部的效率和協作至關重要。透過了解團隊規模和部署頻率的需求，您可以選擇平衡簡單性和結構的策略，確保開發工作流程順利進行。 我相信這篇文章為您節省了大量的時間來整合和決定使用哪些分支策略。 不要忘記在**[LinkedIn](https://linkedin.com/in/angelotheman)**和**[X](https://x.com/_angelotheman)上與我聯絡。** 快樂學習🚀 --- 原文出處：https://dev.to/angelotheman/git-branching-strategies-for-devops-best-practices-for-collaboration-35l8

0個讚   0留言 15瀏覽

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留言 21瀏覽

提升你的技能

介紹 -- 學習如何成為更好的開發人員需要不斷提升自己的技能。一個人如何學習成長並成為更好的開發人員？讓我們探討幾個總體上適用於大多數開發人員的想法。程式碼範例全部採用 C# 語言，之所以選擇它們是因為它們對於大多數開發人員來說並不常見，並且是在內部完成的。 腳步 -- - [Pluralsight](https://www.pluralsight.com/)是一個付費網站，提供數百門 C# 課程。首先使用他們的人工智慧評估，這將引導您走上正確的道路。許多課程也有自己的評估。 Pluralsight 讓您輕鬆地向高評價作者學習，並透過任何裝置（例如筆記型電腦、手機或平板電腦）存取課程。 Pluralsite 提供免費試用，有時還會在購買訂閱時提供折扣。 - 使用[微軟學習](https://learn.microsoft.com/en-us/training/)。無論您是剛開始職業生涯，還是經驗豐富的專業人士，我們的自我導向方法都可以幫助您更快、更有信心地按照自己的步調實現目標。透過互動式模組和路徑培養技能或向講師學習。以您的方式學習和成長。 - 花時間閱讀 Microsoft 文件，例如，閱讀[C# 程式的一般結構、類型運算子和表達式語句、](https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/program-structure/)各種[類別](https://learn.microsoft.com/en-us/dotnet/api/system.string?view=net-6.0)[、物件導向程式設計](https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/tutorials/oop)等等。 - 在學習過程中，嘗試使用控制台或單元測試專案使事情變得簡單，換句話說，將後端學習與前端使用者介面學習分開。 - 在您感覺舒服的某個時間點，確定一個簡單的專案，在編碼之前寫出任務，然後編寫程式碼，而不是同時思考和編碼。新手等級的思考和編碼簡直就是一場即將發生的災難。 - 在網路上尋找資訊並找到解決方案時，不要簡單地複製和貼上，檢查程式碼，在使用所述程式碼之前先嘗試弄清楚它在做什麼。 - 了解如何在 Visual Studio 中使用 GitHub 來備份和版本程式碼。假設您編寫了程式碼並破壞了它，透過 GitHub 儲存庫中的正確版本控制，您可以還原變更並還原程式碼。 - 使用 .NET Framework Core 6 或 .NET Core Framework 8 而不是 .NET Framework classic，因為使用 .NET Core 有更多好處 - 如果學習使用資料，請從 SQL-Server Express 開始並安裝 SSMS (SQL-Server Management Studio)，同時學習使用 Entity Framework Core。 - 充分了解學習任何語言時慢速學習比快速學習好，而且沒有人知道這一切。 ![了解如何使用除錯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp3uj4nuhzx7sple8tad.png) 加速學習的工具 ------- Microsoft Visual Studio 絕對是最好的 IDE（整合開發環境），它具有以下專案可以增加學習並節省編碼時間。 - 適用於 Visual Studio 和 SSMS 的 Red Gate [SQL 提示符](https://www.red-gate.com/products/sql-prompt/) - 高級 IntelliSense 風格的程式碼完成 - 重構 SQL 程式碼 - SSMS SQL 歷史記錄 - 以及更多 - Jetbrains [ReSharper](https://www.jetbrains.com/resharper/)這是一個非常寶貴的 Visual Studio 擴充功能。 - [EF Power Tools](https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools)可輕鬆對 EF Core 的 SQL-Server 資料庫進行逆向工程 深入了解程式碼基礎知識 ----------- 掌握基礎知識後，尋找有助於成長為更好的開發人員的程式碼範例。 一個可能的途徑是使用[Microsoft Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) (EF Core) 或使用[Dapper](https://www.learndapper.com/)等資料提供者來處理資料庫。 還有其他處理資料的方法，但 EF Core 和 Dapper 在效能和易於學習方面是最好的。 在 Web 上尋找程式碼範例時，請確保它們適用於您的專案的 .NET Framework，因為 .NET Framework 4.8 程式碼範例與 .NET Core 8 Framework 有很大不同。 Microsoft 每年都會為 EF Core 建立程式碼範例，但在許多情況下，其結構可能不適合缺乏經驗的開發人員學習，因此 Karen Payne 採用 EF Core 8 程式碼範例並建立了以下[文章](https://dev.to/karenpayneoregon/microsoft-entity-framework-core-8-samples-3dj8)/[儲存庫，在大多數情況下，這些文章/儲存庫](https://github.com/karenpayneoregon/ef-code-8-samples)很容易學習。 第 1 課 - SQL-Server 計算列 ---------------------- ### EF 核心版本 {% cta https://github.com/karenpayneoregon/sql-basics/tree/master/EF\_CoreBirthdaysCompulatedColumns %} 範例專案 {% endcta %} [計算列](https://learn.microsoft.com/en-us/sql/relational-databases/tables/specify-computed-columns-in-a-table?view=sql-server-ver16)是虛擬列，除非該列被標記為 PERSISTED，否則不會實際儲存在表中。計算列表達式可以使用其他欄位中的資料來計算其所屬列的值。您可以使用 SQL Server Management Studio (SSMS) 或 Transact-SQL (T-SQL) 為 SQL Server 中的計算列指定運算式。 完整文章，請參閱[SQL-Server：使用 Ef Core 計算列](https://dev.to/karenpayneoregon/sql-server-computed-columns-with-ef-core-3h8d) 但在這裡，我們將使用 EF Core 和 Dapper 從開始和演練使用情況建立一個計算列。 原文來自以下 Stackoverflow貼[文](https://stackoverflow.com/questions/9/how-do-i-calculate-someones-age-based-on-a-datetime-type-birthday?page=2&tab=modifieddesc#tab-top)。取得出生日期和目前日期，用出生日期減去目前日期，然後除以 10,000。 在 SSMS（SQL Server Management Studio）中 請注意，在程式碼範例中，完整資料庫存在於腳本資料夾下的專案 EF\_CoreBirthdaysCompulatedColumns 中。在執行腳本之前，請在 SSMS 中建立資料庫，然後執行腳本來建立表格並填入資料。 另請注意，在程式碼範例中，連接字串使用 NuGet 套件[ConsoleConfigurationLibrary](https://www.nuget.org/packages/ConsoleConfigurationLibrary/)駐留在 appsettings.json 中。 **表結構** ![表結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06sfbbb9i4ru5203l1nx.png) **SQL** ![選擇語句](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bqiabe7j0a4nvez1yqa.png) 將聲明分開。 - 使用日期分隔符號格式化兩個日期並將每個日期轉換為整數。 - 從目前日期減去出生日期，括號很重要。 - 將以上除以 10,000 即可得到年齡。 **結果** ![SELECT 的結果](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvzc25dc1ojr4arurnqy.png) 現在為名為 YearsOld 的表建立一個 nvarchar 類型的新欄位，並將此語句放入計算列屬性中，然後儲存變更。 ``` (CAST(FORMAT(GETDATE(), 'yyyyMMdd') AS INTEGER) - CAST(FORMAT(BirthDate, 'yyyyMMdd') AS INTEGER)) / 10000 ``` ![ssms中的表設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvwq73hel66uumzbixh5.png) - 建立一個新的 C# 控制台專案。 - 新增[Microsoft.EntityFrameworkCore.SqlServer](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer/8.0.0?_src=template)的依賴項 - 安裝 Visual Studio 擴充[EF Power Tools](https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools) 。若要了解如何使用 EF Power Tools，請觀看作者提供的以下[影片](https://www.youtube.com/watch?v=uph-AGyOd8c)。新增[完整文件](https://github.com/ErikEJ/EFCorePowerTools/wiki/Reverse-Engineering)。 使用 EF Power Tools 後，將產生以下類別。 代表 SQL-Server 資料庫表的模型。 ``` public partial class BirthDays { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public DateOnly? BirthDate { get; set; } public int? YearsOld { get; set; } } ``` 所謂的[DbContext](https://learn.microsoft.com/en-us/dotnet/api/system.data.entity.dbcontext?view=entity-framework-6.2.0)和與資料庫互動的配置。 注意 YearsOld 上的[HasCompulatedColumnSql](https://learn.microsoft.com/en-us/dotnet/api/microsoft.entityframeworkcore.relationalpropertybuilderextensions.hascomputedcolumnsql?view=efcore-8.0) ，這是我們的計算列。 ``` public partial class Context : DbContext { public Context() { } public Context(DbContextOptions<Context> options) : base(options) { } public virtual DbSet<BirthDays> BirthDays { get; set; } protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) #warning To protect potentially sensitive information in your connection string, you should move it out of source code. You can avoid scaffolding the connection string by using the Name= syntax to read it from configuration - see https://go.microsoft.com/fwlink/?linkid=2131148. For more guidance on storing connection strings, see https://go.microsoft.com/fwlink/?LinkId=723263. => optionsBuilder.UseSqlServer(DataConnections.Instance.MainConnection); protected override void OnModelCreating(ModelBuilder modelBuilder) { modelBuilder.Entity<BirthDays>(entity => { entity.Property(e => e.YearsOld).HasComputedColumnSql("((CONVERT([int],format(getdate(),'yyyyMMdd'))-CONVERT([int],format([BirthDate],'yyyyMMdd')))/(10000))", false); }); OnModelCreatingPartial(modelBuilder); } partial void OnModelCreatingPartial(ModelBuilder modelBuilder); } ``` > **筆記** > 執行上述工作有兩個陣營：資料庫優先或程式碼優先。對於剛開始使用 EF Core 的人來說，資料庫優先是最好的路徑。 要查看資料， [Spectre.Console](https://spectreconsole.net/)用於建立一個漂亮的表格。 ``` internal partial class Program { static async Task Main(string[] args) { await Setup(); var table = CreateTable(); await using (var context = new Context()) { var list = await context.BirthDays.ToListAsync(); foreach (var bd in list) { table.AddRow( bd.Id.ToString(), bd.FirstName, bd.LastName, bd.BirthDate.ToString(), bd.YearsOld.ToString()); } AnsiConsole.Write(table); } ExitPrompt(); } public static Table CreateTable() { var table = new Table() .AddColumn("[b]Id[/]") .AddColumn("[b]First[/]") .AddColumn("[b]Last[/]") .AddColumn("[b]Birth date[/]") .AddColumn("[b]Age[/]") .Alignment(Justify.Left) .BorderColor(Color.LightSlateGrey); return table; } } ``` ![上述程式碼的截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i60dye7au7fve08y1wfu.png) 為了獲取我們的資料，一行程式碼用於實例化 EF Core，一行程式碼用於讀取資料。 EF Core 也非常適合關聯式資料庫，請參閱以下[儲存庫](https://github.com/karenpayneoregon/ef-code-8-samples)。 有關記錄 EF Core 產生的 SQL，請參閱下列[專案](https://github.com/karenpayneoregon/ef-code-8-samples/tree/master/DualContextsApp)，該專案也展示如何使用兩個不同的 SQL-Server 實例。 ### 短小精悍的版本 {% cta https://github.com/karenpayneoregon/sql-basics/tree/master/DapperBirthdaysCompulatedColumns %} 範例專案 {% endcta %} 與 EF Core 不同，使用 Dapper，開發人員在 SSMS 中編寫 SQL 語句並將有效語句新增到程式碼中。有關 Dapper 的更多訊息，請參閱我的[系列](https://dev.to/karenpayneoregon/series/25270)。 這裡 SQL 儲存在唯讀字串中，替代方法是將 SQL（或任何語句）儲存在預存程序中。 ![學習編寫正確的 SQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyn1awyunv0pvbhtgzy1.png) ``` internal class SqlStatements { public static string GetBirthdays => """ SELECT Id ,FirstName ,LastName ,BirthDate ,YearsOld FROM BirthDaysDatabase.dbo.BirthDays """; } ``` 讀取資料的程式碼。 ``` internal class DapperOperations { private IDbConnection _cn; public DapperOperations() { _cn = new SqlConnection(DataConnections.Instance.MainConnection); SqlMapper.AddTypeHandler(new SqlDateOnlyTypeHandler()); SqlMapper.AddTypeHandler(new SqlTimeOnlyTypeHandler()); } public async Task<List<BirthDays>> GetBirthdaysAsync() { return (await _cn.QueryAsync<BirthDays>(SqlStatements.GetBirthdays)).AsList(); } } ``` 在類別構造函數中 1. 使用[Microsoft.Data.SqlClient](https://www.nuget.org/packages/Microsoft.Data.SqlClient/5.2.1?_src=template) NuGet 套件建立連線。 1. 使用[kp.Dapper.Handlers](https://www.nuget.org/packages/kp.Dapper.Handlers/1.0.0?_src=template) NuGet 套件為 Dapper 新增理解 DateOnly 類型的功能。 讀取資料是一個單行資料，表示我們需要非同步生日列表。 ``` public async Task<List<BirthDays>> GetBirthdaysAsync() { return (await _cn.QueryAsync<BirthDays>(SqlStatements.GetBirthdays)).AsList(); } ``` 回到 Program.cs，除了建立 Dapper 類別的實例並呼叫方法之外，程式碼與 EF Core 相同。 ``` internal partial class Program { static async Task Main(string[] args) { await Setup(); var table = CreateTable(); var operations = new DapperOperations(); var list = await operations.GetBirthdaysAsync(); foreach (var bd in list) { table.AddRow( bd.Id.ToString(), bd.FirstName, bd.LastName, bd.BirthDate.ToString(), bd.YearsOld.ToString()); } AnsiConsole.Write(table); ExitPrompt(); } public static Table CreateTable() { var table = new Table() .AddColumn("[b]Id[/]") .AddColumn("[b]First[/]") .AddColumn("[b]Last[/]") .AddColumn("[b]Birth date[/]") .AddColumn("[b]Age[/]") .Alignment(Justify.Left) .BorderColor(Color.LightSlateGrey); return table; } } ``` ### 計算列的摘要 並未詳細介紹程式碼的每個方面，這意味著在專案中採用技術之前需要花時間剖析程式碼以及使用了哪些 NuGet 套件。也可以考慮透過[Visual Studio 偵錯器](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-debugger?view=vs-2022)執行程式碼。 偵錯是許多新手開發人員忽略的事情，也是 Visual Studio 的最佳功能之一。學習如何除錯並不需要花費大量時間。 第 2 課 - 重構程式碼 ------------- 許多人認為編碼的主要任務是讓程式碼正常工作，然後返回並重構程式碼。從個人經驗來看，這種情況一般不會發生。這就是開發人員需要在工作專案之外磨練技能的原因。 ![從未停止學習](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju4889uewhkpfrfmp0w5.png) ### 實施例1 開發人員被要求將字串拆分為大寫字符，並將字串放在前面。 例如，給定 ThisIsATest，輸出將是 This Is A Test。開發者在網路上搜尋並找到以下內容。 ``` public static class StringExtensions { private static readonly Regex CamelCaseRegex = new(@"([A-Z][a-z]+)"); /// <summary> /// KarenPayne => Karen Payne /// </summary> [DebuggerStepThrough] public static string SplitCamelCase(this string sender) => string.Join(" ", CamelCaseRegex.Matches(sender) .Select(m => m.Value)); } ``` 這是可行的，但有一個更好的版本，在下面的範例中是由GitHub Copilot 編寫的，並且是第二次迭代，這意味著第一次copilot 被問到時，它提供了一個未經優化的解決方案，因為問題是如何提出的。 ``` [DebuggerStepThrough] public static string SplitCamelCase(this string input) { if (string.IsNullOrEmpty(input)) { return input; } Span<char> result = stackalloc char[input.Length * 2]; var resultIndex = 0; for (var index = 0; index < input.Length; index++) { var currentChar = input[index]; if (index > 0 && char.IsUpper(currentChar)) { result[resultIndex++] = ' '; } result[resultIndex++] = currentChar; } return result[..resultIndex].ToString(); } ``` ![更少的程式碼並不總是最好的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8u0zjrr2qjgot6tmav8.png) 等一下，第二個版本的程式碼多了很多，這個版本怎麼會更好呢？新手和經驗豐富的開發人員都有一種心態，就是程式碼行數越少越好，也許是為了提高可讀性。當然，開發人員應該始終努力編寫可讀的程式碼，但多行程式碼也可以輕鬆閱讀。 如何編寫可讀的程式碼。 - 使用有意義的變數名稱，例如在 for 語句中使用索引而不是 i 或使用firstName 而不是fName。 - 折疊程式碼而不是一行，如下所示 ``` public static class CheckedListBoxExtensions { public static List<T> CheckedList<T>(this CheckedListBox sender) => sender.Items.Cast<T>() .Where((_, index) => sender.GetItemChecked(index)) .Select(item => item) .ToList(); } ``` 而不是 ``` public static class CheckedListBoxExtensions { public static List<T> CheckedList<T>(this CheckedListBox sender) => sender.Items.Cast<T>().Where((_, index) => sender.GetItemChecked(index)).Select(item => item).ToList(); } ``` 下一步 --- 這裡有一些想法，即使是許多經驗豐富的開發人員也會避免，而不是你！ - [泛型](https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/types/generics) - [介面](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/interface) - 建立公共庫 - [JSON 序列化與反序列化](https://learn.microsoft.com/en-us/dotnet/standard/serialization/system-text-json/overview) 概括 -- 這些是成為更好的開發人員的更多技巧中的一些。實現這一目標的唯一方法是在專案之外不斷學習。 如果您的老闆或團隊領導者沒有提供時間來學習新技能，您可以每週花一兩個小時來學習和成長。 --- 原文出處：https://dev.to/karenpayneoregon/push-your-skills-2pho

0個讚   0留言 22瀏覽

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留言 62瀏覽

PHP：Laravel，Ruby：Rails，JavaScript：？

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

0個讚   0留言 56瀏覽

首次嘗試新增 Twill CMS 模組

繼續跑官方教材 https://twillcms.com/guides/page-builder-with-blade/creating-the-page-module.html 執行指令 ``` php artisan twill:make:module pages ``` 會建立 pages 模組 對應的檔案變化可以在這查看 https://github.com/howtomakeaturn/twill-play/commit/d18bd06d566b135353d4230ca8a97efbddaded6f 建立了很多檔案到 app 底下，可見背後的哲學是： > 接下來就當成是一般的 laravel app，自由開發吧！ > 只是在建立 app 的時候 可以使用許多 twill 功能輔助開發！ --- 然後新增的資料表如下 ``` pages page_revisions page_slugs page_translations ``` 通通都沒有 twill_ 這樣的 prefix，所以「模組」應該視為「專屬於你 app 的內容」 跟前面的「檔案都直接在 app 底下」相呼應 滿合理的設計！ 那麼我可以在那個 migration 檔案 `database/migrations/2024_05_22_013232_create_pages_tables.php` 內新增我自己想加的欄位嗎？ > This file will create the minimum required tables and columns that Twill uses to provide the CMS functionality. Later in the guide we may add some more fields to the database, but will will do that in a new migration. > Once you are more experienced with Twill, you may want to add fields at this moment, before you run the migrate command. That way, you do not have to immediately add a new migration file. 也就是說 官方歡迎你擴充這幾張 table 然後要新增一筆 migration 或者直接在這修改 都可以！ --- 直接打開後台面板 並不會看到 pages 模組，twill 不會自動偵測你建立的模組 要在 `AppServiceProvider` 手動登記 ``` TwillNavigation::addLink( NavigationLink::make()->forModule('pages') ); ``` 接著，就可以在後台建立第一筆資料囉！ 建好之後，會發現在四個資料表內，各自多了一筆資料 ``` pages page_revisions page_slugs page_translations ``` --- 我剛建了代號 `my-1st` 的資料，後台顯示一個網址 `http://twill-play.local/en/pages/my-1st` 打開會發現根本沒有頁面！ 這表示 twill 目前主要是處理 CMS 與後台面板的東西 沒有前台頁面 那個要另外做！ 所以 `app/Http/Controllers/Twill/PageController.php` 檔案是代表後台的模組管理 controller 然後 `routes/twill.php` 裡面登記的 ``` TwillRoutes::module('pages'); ``` 也是代表登記後台的模組管理相關 routes 所以是要你自己在 `routes/web.php` 處理你的前台 routes 吧！ 其實，我覺得這樣的設計，真的很清楚很漂亮！只是對新手來說，會覺得工程較複雜、檔案很分散吧！ 接著就來建前台頁面吧！

0個讚   0留言 223瀏覽

20 多個 DOM 專案：您的前端突破！

透過 DOM 專案提升您的前端技能：新手開發人員的遊樂場 ---------------------------- 透過[DOM 專案改變您的學習體驗！](https://github.com/jisan-mia/dom-projects/)深入研究 20 多個使用 HTML、CSS 和 JavaScript 建構的實用專案。非常適合新手和經驗豐富的開發人員，您會發現一些可以挑戰和激勵您的東西。 以下是 DOM 專案的與眾不同之處： - **邊做邊學：** DOM 專案直接深入前端開發的實際面向。您將透過建立實際專案來學習，鞏固對核心概念的理解。 - **漸進式學習：** DOM 專案提供了按難度分類的精選專案。從適合初學者的專案開始，例如“計數器”或“滾動動畫”，並逐漸進展到更高級的專案，例如“高級待辦事項”或“REST 用戶端”。 - **[開源與協作：](https://github.com/jisan-mia/dom-projects/)** DOM 專案的美妙之處在於其開源特性。您不僅可以從現有專案中學習，還可以將您的創作貢獻給該平台，從而培養一個充滿活力的學習者和開發者社群。 - **輕鬆設定：**設定 DOM 專案輕而易舉。不涉及複雜的安裝過程。只需分叉存儲庫，將其克隆到本地計算機，然後在瀏覽器中打開 index.html 文件。您已準備好開始您的程式設計冒險！ ### 深入研究專案： [DOM Projects](https://www.jisan.io/dom-projects/)擁有**20 多個專案**，每個專案都針對特定技能和概念精心設計。以下是一些激發您興趣的詳細範例： ### [計數器](https://www.jisan.io/dom-projects/projects/counter/) ![櫃檯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egsodt4dyfekiwp8ln4q.png) **描述**：一個簡單的計數器專案，允許使用者增加和減少螢幕上顯示的數字。它還包括一個用於將計數器重置為零的按鈕。 **學習理念：** - DOM 操作：了解如何使用 JavaScript 存取和修改 HTML 元素。 - 事件處理：了解如何擷取使用者互動（在本例中為點擊）並使用 JavaScript 觸發特定操作。 - 基本 JavaScript 函數：探索如何寫函數來執行遞增、遞減和重置計數器值等任務。 ### [爸爸笑話](https://www.jisan.io/dom-projects/projects/dad-jokes/) ![爸爸笑話](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z09wwb70arrb5ccjhl87.png) **描述**：該專案使用 JavaScript 中的非同步技術從外部 API 獲取隨機爸爸笑話。一旦檢索到，笑話就會顯示在網頁上供您娛樂。 **學習理念：** - 非同步程式設計：了解如何處理需要時間才能完成的操作（例如從 API 取得資料）而不阻塞 JavaScript 中的主執行緒。 - Fetch API：了解如何使用內建瀏覽器功能向 API 發出 HTTP 請求並擷取資料。 - 使用 API：探索如何與外部 API 互動以存取這些服務提供的資料或功能。 ### [表單驗證](https://www.jisan.io/dom-projects/projects/form-validation/) ![表單驗證](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b7mbyvuwxdwkzv2eidr.png) **描述**：此專案示範了使用 JavaScript 進行客戶端表單驗證。它在提交之前驗證表單中的使用者輸入。此外，驗證成功後，它會顯示成功訊息並允許使用者以唯讀格式預覽提交的資料。 **學習理念：** - 表單驗證：了解如何使用 JavaScript 在提交之前驗證表單中的使用者輸入。這有助於確保資料完整性並防止處理無效資料。 - DOM 操作：了解如何根據驗證結果存取和修改表單元素（例如顯示錯誤訊息或停用輸入欄位）。 - 事件處理：使用 JavaScript 擷取表單提交事件並觸發驗證邏輯。 ### [隨機用戶](https://www.jisan.io/dom-projects/projects/random-user/) ![隨機用戶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlfog2j2okpgtx01eyso.png) **描述**：此專案利用 API 產生隨機使用者資訊。它會取得姓名、電子郵件、頭像等資料，並將其顯示在網頁上，模擬隨機使用者設定檔。 **學習理念：** - 非同步程式設計：與專案 2 (DadJokes) 類似，此專案強化了 JavaScript 中的非同步操作。 - Fetch API：繼續練習使用工具向 API 發出 HTTP 請求並檢索資料。 - 使用 API：進一步探索與外部 API 互動以存取特定功能或資料。 ### [摩斯電碼翻譯器](https://www.jisan.io/dom-projects/projects/morse-translator/) ![摩斯電碼翻譯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il6si3v62r76udcis9lq.png) **描述**：此專案允許使用者在摩斯電碼和文字之間進行翻譯。使用者可以鍵入文字並查看對應的摩斯電碼，也可以輸入摩斯電碼並查看翻譯後的文字。 **學習理念**： - 字串操作：了解如何在 JavaScript 中使用字串，包括拆分、連接和字元操作的函數，這對於摩斯電碼翻譯至關重要。 - 條件語句：學習如何在 JavaScript 中使用條件語句（if/else）來實現基於使用者輸入（文字或摩斯電碼）的翻譯邏輯。 ### [基本計算機](https://www.jisan.io/dom-projects/projects/basic-calculator/) ![基本計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riz357iso4aux1an08sx.png) **描述**：該專案使用 JavaScript 建立一個最基本的計算器應用程式。它允許使用者執行基本算術運算，例如加法、減法、乘法和除法。使用者可以輸入數字並使用螢幕上的按鈕選擇所需的操作。計算器顯示計算結果。 **學習理念**： - 事件處理：與先前的專案類似，此專案練習捕捉使用者對計算器按鈕的點擊並觸發操作（更新計算和結果）。 - DOM 操作：示範如何使用 JavaScript 更新計算器介面中顯示的數字和結果。 - JavaScript 中的基本數學運算：探索使用 JavaScript 內建的數學運算子和函數來執行加法、減法、乘法和除法等計算。 ### [普通計算機](https://www.jisan.io/dom-projects/projects/normal-calculator/) ![普通計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpgq9hnt59vlcaz8r0zx.png) **描述**：該專案建立在基本計算器的基礎上，為標準數學計算提供更全面的使用者體驗。它適合熟悉基本計算器功能的使用者。 **學習理念：** - 基於現有專案：示範對基本計算器概念的擴展，以建立更用戶友好且功能豐富的計算器。 - 增強的使用者互動：引入改進使用者與計算器互動的技術，例如處理小數輸入或合併記憶體功能。 ### [科學計算機](https://www.jisan.io/dom-projects/projects/scientific-calculator/) ![科學計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4taeew6vv1ublamhbyod.png) **描述**：此專案透過提供三角函數（正弦、餘弦、正切）、對數和指數等科學函數，將計算器功能提升到一個新的水平。它迎合需要高級數學計算的用戶。 **學習理念：** - 建立複雜的應用程式：示範如何建立具有先進科學功能的更複雜的應用程式。 - JavaScript 中的數學函數：介紹使用 JavaScript 內建的數學函數進行高階計算 ### [簡單的一切應用程式](https://www.jisan.io/dom-projects/projects/js-todo/) ![簡單的一切應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55d842o20i8j528q2maz.png) **描述**：該專案是一個基本的待辦事項清單應用程式。使用者可以新增任務、將其標記為已完成以及從清單中刪除它們。它演示了管理和追蹤任務。 \*\*學習理念： - DOM 操作：此專案強化了使用 JavaScript 動態新增、刪除和修改 HTML 中的清單專案的實務。 - 陣列：它演示了在 JavaScript 中使用陣列儲存和管理任務資料。 - 使用者介面更新：探索如何根據使用者互動更新待辦事項清單的視覺表示（新增、完成、刪除任務）。 ### [個人資料表和卡片](https://www.jisan.io/dom-projects/projects/profile-form/) ![個人資料表和卡片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13yidfqfe156556rky87.png) **描述**：此專案允許使用者使用表單建立動態個人資料卡。用戶可以輸入他們的訊息，提交後，將建立一個新的個人資料卡並顯示在頁面上。它還包括刪除現有個人資料卡的功能。 **學習理念：** - 表單處理：該專案基於表單驗證（專案 3）的概念，重點關注捕獲表單資料並將其用於進一步的操作。 - DOM 建立和操作：它超越了基本的 DOM 操作，根據使用者輸入動態建立新的 HTML 元素（個人資料卡）。 - 事件處理：繼續練習捕獲使用者與表單和刪除按鈕的互動並觸發適當的操作。 ### [PC元件過濾](https://www.jisan.io/dom-projects/projects/pc-component-filter/) ![PC元件過濾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txtgpqu4t0zbi2mcovbo.png) **描述**：該專案允許使用者根據他們的選擇過濾電腦部件。使用者可以從各種選項中進行選擇，例如 CPU 品牌、RAM 大小、顯示卡類型等，顯示的元件清單將動態更新以反映所選的篩選器。 **學習理念：** - DOM 操作：與先前的專案類似，此專案實踐根據使用者選擇動態更新顯示的元件清單。 - 陣列和資料過濾：探索使用陣列來存儲計算機部件資料，並在 JavaScript 中實現過濾邏輯以匹配用戶選擇。 - 使用者介面更新：重點是根據應用的過濾器更新元件列表的視覺表示。 ### [天氣應用程式](https://www.jisan.io/dom-projects/projects/weather-app/) ![天氣應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4tjhdmz5xlpxia218lp.png) **描述**：該專案是一個天氣應用程式，允許用戶透過城市名稱搜尋當前的天氣資訊。它利用外部天氣 API 來獲取資料並在螢幕上顯示溫度、濕度和天氣狀況等詳細資訊。 **學習理念：** - 非同步程式設計：與 DadJokes（專案 2）等專案類似，此專案強化了處理非同步操作以獲取天氣資料的概念。 - Fetch API：繼續練習使用工具向 API 發出 HTTP 請求並檢索天氣資料。 - 使用 API：進一步探索與外部 API 互動以存取天氣資訊。 ### [感言滑塊](https://www.jisan.io/dom-projects/projects/testimonial-slider/) ![感言滑塊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sroguxb8914j1dv65fpw.png) **描述**：此專案建立一個具有滑桿功能的推薦部分。它顯示使用者的引言或推薦，使用者可以使用滑桿控制來瀏覽它們。 **學習理念：** - DOM 操作：示範如何根據滑桿位置操作建議元素的可見性。 - 事件處理：捕捉使用者與滑桿控制項的互動並觸發滑動動畫。 ### [滾動動畫](https://www.jisan.io/dom-projects/projects/animation-on-scroll/) ![滾動動畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o5psut9f3d5cmns3ld3.png) **描述**：此專案包含向下捲動頁面時觸發的動畫。當使用者滾動時，網頁上的不同元素會變成動畫，增加視覺趣味和互動性。 ### 學習理念： - CSS 動畫：探索使用 CSS 動畫來建立根據滾動位置啟動的視覺效果。 - 用於捲動事件的 JavaScript：介紹使用 JavaScript 來偵測滾動事件並相應地觸發動畫。 ### [搜尋字段顯示](https://www.jisan.io/dom-projects/projects/search-field-reveal/) ![搜尋字段顯示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awycht9282x9n35gyy5j.png) **描述**：此專案利用動畫來增強使用者體驗。它會建立一個搜尋字段，在使用者互動（例如，點擊按鈕）時透過動畫顯示自身。 **學習理念：** - CSS 動畫：介紹使用 CSS 動畫為搜尋欄位顯示建立動態視覺效果。 - 事件處理：涵蓋捕獲使用者互動（例如按鈕單擊）並使用 JavaScript 觸發動畫。 ### [問題清單及進展](https://www.jisan.io/dom-projects/projects/question-list-progress/) ![問題清單及進展](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p6unngf1az0084i3tnb.png) **描述**：此專案示範了 JavaScript 中常見的 DOM 操作技術。它具有問題清單和進度指示器，進度指示器會隨著使用者回答問題而更新。 **學習理念：** - DOM 操作：此專案強調根據使用者與問題的互動來操作進度指示器等元素。 - 事件處理：捕捉使用者與問題元素的互動並觸發更新進度指示器等操作。 ### [莫代爾](https://www.jisan.io/dom-projects/projects/modal/) ![莫代爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0b06e0fi84z7wqsjev4.png) **描述**：該專案會建立一個模式窗口，它是一個覆蓋頁面主要內容的彈出元素。它通常用於登入表單、註冊提示或警報訊息等內容。 **學習理念：** - DOM 操作：重點是根據使用者互動顯示和隱藏模式視窗元素。 - 事件處理：捕捉觸發元素和模式的關閉按鈕上的點擊以控制其可見性。 ### [高級待辦事項](https://www.jisan.io/dom-projects/projects/advanced-todo/) ![高級待辦事項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8baq9a3n6qdwlookd338.png) **描述**：該專案基於簡單的待辦事項應用程式（專案 8）建置，提供過濾、編輯和刪除任務等高級功能。使用者可以對任務進行分類、編輯現有任務以及從清單中刪除不需要的任務。 **學習理念：** - 基於現有專案：與科學計算器（專案 7）類似，該專案演示了對基本概念（待辦事項清單）的擴展以建立更高級的應用程式。 - 使用者介面更新：擴展了更新待辦事項清單的概念，包括過濾、編輯任務內容和刪除任務等功能。 ### [復古計算器](https://www.jisan.io/dom-projects/projects/retro-calculator/) ![復古計算器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thdpc8rzcppjfhlw8aru.png) **描述**：該專案實現了經典的計算器設計，並支援實體鍵盤輸入。它允許用戶使用類似於傳統計算器的佈局輸入數字並執行計算。 **學習理念：** - 事件處理：與其他專案類似，該專案側重於捕獲用戶交互，但在本例中，它包括處理計算器按鈕上的點擊和鍵盤上的按鍵。 - DOM 操作：根據使用者輸入和計算結果更新計算器顯示。 - 物件導向程式設計：此專案引入了 JavaScript 中物件導向程式設計 (OOP) 的概念，用於建立更模組化且可重複使用的計算器功能。 ### [簡單的測驗應用程式](https://www.jisan.io/dom-projects/projects/simple-quiz-app/) ![簡單的測驗應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khvz1xnzfvusxb8hvwrh.png) **描述**：該專案建立一個簡單的測驗應用程式，用戶可以在其中回答問題並查看結果。它包括每個問題的計時器，以加入時間壓力元素。 **學習理念：** - DOM 操作：更新測驗介面以顯示問題、處理答案選擇並顯示最終結果 ### [進階測驗應用程式](https://www.jisan.io/dom-projects/projects/advanced-quiz-app/) ![進階測驗應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98kzkz9jyfl6vjkau9z1.png) **描述**：該專案建立在簡單的測驗應用程式的基礎上，提供更多自訂選項。使用者可以在開始測驗之前設定問題數量、選擇主題並定義難度等級。 **學習理念：** - 基於現有專案：與其他專案（科學計算器、高級待辦事項清單）類似，該專案演示了透過附加功能擴展基本概念。 - 使用者輸入驗證：它引入了驗證自訂選項的使用者輸入的概念（例如，確保選擇有效數量的問題）。 - 條件語句：在此專案中發揮更重要的作用，因為 JavaScript 邏輯需要根據使用者定義的參數來調整測驗。 ### 採取下一步： 準備好開始您的前端開發之旅了嗎？以下是如何開始使用 DOM 專案： 1. 造訪 GitHub 上的 DOM 專案儲存庫： <https://github.com/Jisan-mia/dom-projects> 2. 瀏覽專案清單並選擇一個符合您的技能水平和興趣的專案。 3. 請按照設定[說明](https://github.com/Jisan-mia/dom-projects?tab=readme-ov-file#how-to-set-up-dom-projects-for-development)進行操作並在瀏覽器中開啟專案。 4. 深入研究程式碼、實驗並學習！ DOM 專案中的每個專案都可以讓您練習編碼技能，並幫助您理解前端開發中的關鍵概念。無論您是剛起步的初學者，還是希望提高技能的經驗豐富的開發人員，DOM 專案都能滿足每個人的需求。 請記住，最好的學習方法是實踐。所以，捲起袖子，選擇一個專案，然後開始編碼吧！快樂學習！ --- 原文出處：https://dev.to/jisan/20-dom-projects-your-frontend-breakthrough-1h8a

0個讚   0留言 119瀏覽

用於建立 AI/ML 應用程式的最佳開發工具！

我來自世界各地的 DevOps 領域，在加入我現在的公司 SingleStore 之前，AI/ML 世界對我來說是全新的。我加入已經 8 個月了，一切進展得非常順利。從各種部落格、教程、工具等中學習AI/ML 中所有新的很酷的東西。這些要求的工具。順便說一句，我們有很多內容和材料可以開始，但我想看看行業之外還發生了什麼，並做我自己的研究。 正如我所說，已經過去 8 個月了。在我在這裡的整個旅程中，從舉辦網路研討會、在會議上發言，到撰寫有關新興技術趨勢的博客，我偶然發現了一系列不可或缺的工具。在本文中，我將分享這些工具，從新興程式語言到 AI 框架，再到向量資料庫，再到簡化 AI/ML 應用程式建立的開發工具。***讓我們開始吧。*** 1. 程式語言 ------- ### [翅膀](https://git.new/winglang) ![只是一個翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pyqzc2vsp6ckovq7j7p.png) 我嘗試使用多種語言，但發現大多數語言都被誇大了。是的，就在那時，我遇到了一個正在討論這種為雲端和人工智慧應用程式設計的新語言的社群。那是我第一次嘗試 Wing 程式語言，發現它令人印象深刻。 你可能會問 - 為什麼是 Wing？ Wing 提供了一個統一的程式設計模型，將基礎架構和應用程式程式碼整合到一個有凝聚力的框架內。這種獨特的方法使開發人員能夠簡化他們的工作流程，消除不斷切換情境的需要，並顯著提高生產力和創造力。 這正是您在建立 AI/ML 應用程式時所需要的，更專注於核心功能而不是底層基礎設施。我遇到了他們的 Open AI Joker 應用程式，它可以產生笑話並將其翻譯成不同的語言。整個框架的流暢程度令人驚嘆。請注意，Wing 仍在積極開發中。 您可以使用最少的程式碼建立任何 AI/ML 應用程式。讓我們看看 Joker 應用程式是如何運作的。該應用程式使用 OpenAI 生成笑話並將其翻譯成不同的語言。有一個喜劇演員，一個開放人工智慧助手，可以產生笑話，每當它生成笑話時，笑話就會被放入/儲存在一個桶中。有兩個譯者，西班牙語和希伯來語。這些譯者訂閱一個主題。每當有笑話產生時，他們都會收到並翻譯。而且，他們也把翻譯好的笑話丟進桶裡了。很簡單。 以下是此範例的技術概述圖，展示如何將[OpenAI 的 API 與 Wing](https://github.com/winglang/examples/tree/main/examples/openai-joker)結合使用。 ![翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5chcap4ufyxnv6aef9m.png) 如果您還沒有嘗試過 Winglang，您可以透過簡單的命令輕鬆嘗試 ``` npm install -g winglang ``` 使用 git clone 指令將程式碼複製到本機 ``` git clone https://github.com/winglang/wing.git ``` 轉到範例資料夾，然後在終端機中執行以下命令： ``` npm install wing it ``` 呼叫“START HERE”函數，並在“Joke Store”中查看結果。 2.向量資料儲存與分析工具 ------------- ### SingleStore 和筆記本 ![單一儲存資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/migeuz23bst8l2s445i4.jpeg) 對於 AI/ML 應用程式，您需要一個資料庫來儲存非結構化資料。我大約 8 個月前加入 SingleStore，當時我對 AI/ML 和向量資料庫還是個新手。隨著圍繞向量資料庫的大肆宣傳，我開始了解向量資料庫，並發現 SingleStore 作為向量資料庫如何為行業帶來驚人的補充。它不僅用於儲存向量資料，而且該公司還使用 SingleStore 進行即時分析。現在，看看支援即時分析的向量資料儲存的力量，這是一種超級力量。 下面我要來跟大家介紹一下SingleStore；它是一個基於雲端的資料庫管理系統（RDBMS），專為資料密集型應用程式而設計。它以其資料攝取、事務處理和查詢處理的速度而聞名。 SingleStore 早在 2017 年就開始支援向量儲存。 SingleStore 的 Notebook 功能基於流行的 Jupyter Notebook，廣泛應用於資料科學和機器學習社群。 SingleStore Notebook 擴展了 Jupyter Notebook 的功能，使資料專業人員能夠輕鬆使用 SingleStore 的分散式 SQL 資料庫，同時在語言和資料來源方面提供出色的可擴充性。 [試試 SingleStore 並獲得價值 600 美元的免費積分](https://www.singlestore.com/cloud-trial/?utm_medium=referral&utm_source=pavan&utm_term=devto&utm_content=aimltools)。 3. 資料操作與分析工具 ------------ 我只是喜歡處理資料並使用公開的資料集（例如葡萄酒資料集、泰坦尼克號資料集等）進行不同的實驗。我著迷地看到 NumPy 和 Pandas 在資料探索和提出不同解決方案方面的能力。 Pandas 和 NumPy 是 Python 生態系統中用於資料分析和科學計算的兩個最受歡迎的函式庫。 ### 熊貓和 NumPy ![熊貓和 numpy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl8ez8r05a61wcy9zaze.png) 任何 AI/ML 應用程式的核心都是資料。 Pandas 和 NumPy 等工具是 Python 中資料操作和分析的基礎。 Pandas 提供了用於操作數值表和時間序列的高級資料結構和操作，使其成為在用於訓練模型之前預處理和清理資料的理想選擇。 NumPy 增加了對大型多維陣列和矩陣的支持，以及對這些陣列進行操作的大量數學函數的支持，這對於資料預處理和模型訓練中的效能密集型操作至關重要。 4. 人工智慧與機器學習框架 -------------- 我使用過 TensorFlow、PyTorch，最近接觸過 LangChain 和 LlamaIndex，對它們幫助 AI/ML 工程師使用 API、向量儲存功能、邏輯、推理等建立強大應用程式所需的所有工具包的能力印象深刻。讓我們一一來看看他們的超能力。 ### TensorFlow 和 PyTorch ![pytorch中的tensonflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23wl305qjftx5y33ewvt.png) 由 Google 開發的[TensorFlow](https://www.tensorflow.org/)和由 Facebook 開發的[PyTorch](https://pytorch.org/)是用於建立和訓練複雜機器學習模型的兩個最受歡迎的框架。 TensorFlow 以其靈活性和強大的可擴展性而聞名，使其適用於研究原型和生產部署。 PyTorch 因其易用性、簡單性和動態計算圖而受到讚譽，可以更直觀地編碼複雜的 AI 模型。這兩個框架都支援廣泛的人工智慧模型，從簡單的線性回歸到複雜的深度神經網路。 ### 浪鏈 ![浪鏈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy5mcfwl843zlrte6x0b.png) [LangChain](https://www.langchain.com/)由 Harrison Chase 開發，於 2022 年 10 月首次亮相，它是一個開源平台，旨在建立由大型語言模型支援的強大應用程式，例如 ChatGPT 等聊天機器人和各種客製化應用程式。 Langchain 致力於為資料工程師提供一個包羅萬象的工具包，以便在聊天機器人、自動問答、文字摘要等各種用例中利用法學碩士。 ### 駱駝指數 ![駱駝指數](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tgndtlwx6emah2k6s2h.png) [LlamaIndex](https://www.llamaindex.ai/)是一種先進的編排框架，旨在增強 GPT-4 等 LLM 的功能。雖然法學碩士本質上很強大，並且接受過大量公共資料集的培訓，但他們通常缺乏與私有或特定領域資料互動的方法。 LlamaIndex 彌補了這一差距，提供了一種結構化的方式來攝取、組織和利用各種資料來源——包括 API、資料庫和 PDF。透過將這些資料索引為針對法學碩士最佳化的格式，LlamaIndex 促進了自然語言查詢，使用戶能夠無縫地與其私有資料進行對話，而無需重新訓練模型。 5.深度學習模型 -------- 作為初學者，我一直在尋找簡單而靈活的東西來開發深度學習模型，就在那時我發現了 Keras。許多 AI/ML 專業人士欣賞[Keras](https://keras.io/)在原型設計和開發深度學習模型方面的簡單性和高效性，使其成為首選，特別是對於初學者和需要快速開發的專案。 ### 難的 ![難的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqtk1tp1berno2yie8u7.png) 對於尋求高級神經網路 API 的開發人員來說，現在已整合到 TensorFlow 中的 Keras 提供了更簡單的介面來建立和訓練深度學習模型。 Keras 抽象化了建構神經網路的大部分複雜性，使其易於初學者使用，同時仍足夠強大以進行研究。 6. 開發和版本控制平台 ------------ ### GitHub 和 DVC ![DVC套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1tx82df0xei0m5qwpk3.png) 由於模型開發的迭代性質和對可重複性的需求，協作和版本控制在 AI/ML 開發專案中至關重要。 [GitHub](https://github.com/)是領先的原始碼管理平台，允許團隊協作處理程式碼、追蹤問題和管理專案里程碑。 [DVC（資料版本控制）](https://dvc.org/)透過處理 Git 無法有效管理的大型資料檔案、資料集和機器學習模型來補充 Git，從而實現對 AI 專案中使用的資料和模型檔案的版本控制。 7. AI模型部署與監控 ------------ 我建立了一些 AI/ML 應用程式，但是如何以及在哪裡部署它們？這就是我的想法跳到這個類別中的兩個主要工具：Docker 和 Kubernetes。正如我之前所說，我來自世界各地的 DevOps 地區，我已經使用過這些工具，並且知道它們是如何運作的。 Docker 將您的應用程式容器化，而 Kubernetes 用於大規模部署您的應用程式。 ### Docker 和 Kubernetes ![Docker 和 Kubernetes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thj4mvioz76tja3ew3iw.png) 將人工智慧模型部署到生產中需要能夠打包應用程式並大規模管理它們的工具。 [Docker](https://www.docker.com/)透過容器化AI應用程式來簡化其部署，確保應用程式在任何環境中順利執行。 [Kubernetes](https://kubernetes.io/)是 Docker 容器的編排系統，可以自動部署、擴展和管理容器化應用程式，這對於需要跨多個伺服器或雲端環境進行擴展的 AI 應用程式至關重要。 8.人工智慧雲端平台 ---------- 如果沒有 AWS、Google 和 Azure 等雲端平台，您就無法擴展任何東西。雖然 AWS 是我最喜歡的，但我也探索了其他選項，並在此提到了所有三個主要雲端供應商。 ### AWS、Google雲端和 Azure ![雲端提供者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jtvbfzk003t5jxi9ghi.png) Amazon Web Services (AWS)、Google Cloud Platform (GCP) 和 Microsoft Azure 等雲端平台提供了一系列 AI 和機器學習服務，這些服務抽象化了訓練和部署 AI 模型所需的大部分基礎架構。這些平台為機器學習模型訓練、部署和監控提供託管服務，以及可擴展以滿足任何人工智慧專案需求的大量運算資源。 9. 專門的人工智慧開發工具 -------------- 雖然我仍然更喜歡使用 SingleStore Notebook 功能，但我知道大多數人已經在使用 Jupyter Notebook 進行資料探索和分析。我有時會使用 Jupyter Notebooks，另一個更有趣的工具是 MLflow，它將幫助您完成端到端的 ML 工作流程。 ### Jupyter 筆記本 ![Jupyter筆記本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/411i9cumaafb3un5viqi.png) 對於探索性資料分析、模型開發和文件編制，Jupyter Notebooks 是不可或缺的工具。它們允許開發人員建立和共享包含即時程式碼、方程式、視覺化和敘述文字的文件，使其成為協作人工智慧研究和開發的絕佳工具。 ### ML流 ![毫升流工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nabnjklq1e07x8kc1vr.png) [MLflow](https://mlflow.org/)是一個用於管理端對端機器學習生命週期的開源平台。它包括實驗追蹤、模型版本控制和部署等功能，使開發人員能夠追蹤和比較實驗、將模型打包成可重複的執行，以及管理跨多個環境的模型部署。 ### 最後的一些想法 人工智慧/機器學習領域正在像海洋一樣不斷發展。每天我們都會看到一種或另一種語言模型帶著許多期望首次亮相。有許多令人驚嘆的開發工具仍然可以包含在這個清單中，但從我個人的經驗來看，我相信這些工具是每個 AI/ML 工程師開始建立他們的 AI/ML 應用程式的良好開端。 讓我知道您目前在 AI/ML 領域最喜歡的工具是什麼。 --- 原文出處：https://dev.to/pavanbelagatti/my-favorite-devtools-to-build-aiml-applications-3c0c

0個讚   0留言 127瀏覽

深入探討 Javascript 函數式編程

[訂閱我的程式設計 YouTube 頻道](https://www.youtube.com/@alexmercedcoder) [訂閱我的資料 YouTube 頻道](https://www.youtube.com/@alexmerceddata) 函數式程式設計 (FP) 在軟體開發領域獲得了巨大的關注，JavaScript 開發人員越來越多地轉向這種範例，以更有效地解決問題並減少錯誤。從本質上講，函數式程式設計強調使用純函數、不變性以及柯里化、記憶化和 monad 等先進技術來建立更清晰、更可預測的程式碼。 在這篇文章中，我們將深入研究每個概念，以了解它們的工作原理以及它們在 JavaScript 開發中的重要性。我們將探索**純函數**的無副作用性質、用於維護狀態可預測性的**不變性**、用於增強函數重用和組合的**柯里化**、用於優化性能的**記憶化**以及用於以函數式風格處理副作用的**monad** 。 無論您是函數式程式設計的新手，還是希望加深對其在 JavaScript 中的應用的理解，這篇文章都將為您提供堅實的基礎和實際範例，以便將這些原則整合到您的編碼實踐中。讓我們揭開這些概念的神秘面紗，看看它們如何改變您編寫 JavaScript 程式碼的方式。 1. 純函數 ------ **純函數**是一種函數，在給定相同的輸入的情況下，將始終返回相同的輸出，並且不會導致任何可觀察到的副作用。這個概念在函數式程式設計中至關重要，因為它允許開發人員編寫更可預測和可測試的程式碼。 ### 在 JavaScript 中使用純函數的好處： - **可預測性：**由於純函數不依賴或修改其範圍之外的資料狀態，因此它們更容易推理和除錯。 - **可重複使用性：**純函數可以在應用程式的不同部分重複使用，而無需考慮外部上下文。 - **可測試性：**沒有隱藏狀態或副作用，純函數很容易測試；輸入和輸出是您需要考慮的全部。 ### JavaScript 中純函數的範例： 考慮一個簡單的函數來計算矩形的面積： ``` function rectangleArea(length, width) { return length * width; } ``` 這個函數是純粹的，因為它總是使用相同的參數來傳回相同的結果，而且它不會修改任何外部狀態或產生副作用。 ### 常見陷阱以及如何避免它們： 雖然純函數提供了許多好處，但開發人員在嘗試將它們整合到與資料庫、外部服務或全域狀態互動的應用程式時可能會面臨挑戰。以下是保持純度的一些技巧： - **避免副作用：**不要修改函數內的任何外部變數或物件。 - **本機處理狀態：**如果您的函數需要存取應用程式狀態，請考慮將狀態作為參數傳遞並傳回新狀態而不修改原始狀態。 透過理解和實現純函數，開發人員可以在充分利用 JavaScript 中函數式程式設計的全部功能方面邁出重要一步。 2. 不變性 ------ **不變性**是指資料建立後永不更改的原則。您無需修改現有物件，而是建立一個包含所需變更的新物件。這是函數式程式設計的基石，因為它有助於防止副作用並在應用程式的整個生命週期中保持資料的完整性。 ### JavaScript 如何處理不變性： 預設情況下，JavaScript 物件和陣列是可變的，這表示在需要時必須注意強制執行不變性。但是，有幾種技術和工具可以提供幫助： - **使用`const` ：**雖然`const`不會使變數變得不可變，但它可以防止將變數辨識碼重新指派給新值，這是邁向不變性的一步。 - **Object.freeze()：**此方法可以透過防止向物件新增屬性和修改現有屬性來使物件不可變。 - **陣列和物件的擴展語法：**使用擴展語法可以幫助建立新的陣列或物件，同時合併現有陣列或物件的元素或屬性，而無需修改原始陣列或物件。 ### 確保 JavaScript 中資料不變性的技術： 1. **寫入時複製：**始終建立一個新的物件或陣列，而不是修改現有的物件或陣列。例如： ``` const original = { a: 1, b: 2 }; const modified = { ...original, b: 3 }; // 'original' is not changed ``` 2. **使用函式庫：**像 Immutable.js 這樣的函式庫提供了高度最佳化的持久不可變資料結構，可以簡化不變性的實作。 ### 幫助實施不變性的函式庫： - **Immutable.js：**提供一系列本質上不可變的資料結構。 - **immer：**允許您透過使用臨時草稿狀態並套用變更來產生新的不可變狀態，以更方便的方式處理不可變狀態。 透過將不變性整合到 JavaScript 專案中，您可以增強資料完整性、提高應用程式效能（透過減少防禦性複製的需求）並提高程式碼的可預測性。它完全符合函數式程式設計的原則，從而產生更乾淨、更健壯的軟體。 3.柯里化 ----- **柯里化**是函數式程式設計中的一種變革性技術，其中具有多個參數的函數被轉換為一系列函數，每個函數採用一個參數。這種方法不僅使您的函數更加模組化，而且還增強了程式碼的可重複使用性和可組合性。 ### JavaScript 柯里化的實際用途： 柯里化允許建立高階函數，這些函數可以在應用程式的不同點使用不同的參數進行自訂和重複使用。它特別適用於： - **事件處理：**建立針對特定事件自訂的部分應用函數，但重複使用通用處理程序邏輯。 - **API 呼叫：**使用預定義參數（例如 API 金鑰或使用者 ID）設定函數，這些參數可以在不同的呼叫中重複使用。 ### 說明柯里化的逐步範例： 考慮一個簡單的函數來加兩個數字： ``` function add(a, b) { return a + b; } // Curried version of the add function function curriedAdd(a) { return function(b) { return a + b; }; } const addFive = curriedAdd(5); console.log(addFive(3)); // Outputs: 8 ``` 此範例展示了柯里化如何將簡單的加法函數轉變為更通用和可重複使用的函數。 ### 柯里化與部分應用： 雖然柯里化和部分應用都涉及將函數分解為更簡單、更具體的函數，但它們並不相同： - **柯里化（Currying）：**將具有多個參數的函數轉換為一系列巢狀函數，每個函數只接受一個參數。 - **部分應用：**涉及透過預先填充一些參數來建立具有較少參數的函數。 這兩種技術在函數式程式設計中都很有價值，可以用來簡化複雜的函數簽名並提高程式碼模組化。 透過利用柯里化，開發人員可以增強函數的可重複使用性和組合性，從而在 JavaScript 專案中產生更清晰、更易於維護的程式碼。 4. 記憶 ----- **記憶化**是函數式程式設計中使用的最佳化技術，透過儲存昂貴的函數呼叫的結果並在相同的輸入再次發生時返回快取的結果來加速電腦程式。它在 JavaScript 中對於優化涉及繁重計算任務的應用程式的效能特別有用。 ### 為什麼記憶化在 JavaScript 很重要： - **效率：**減少使用相同參數重複呼叫函數所需的計算次數。 - **效能：**透過快取耗時操作的結果來提高應用程式回應能力。 - **可擴展性：**透過最小化計算開銷來幫助管理更大的資料集或更複雜的演算法。 ### 實現記憶化：範例和常用方法： 以下是 JavaScript 中記憶函數的基本範例： ``` function memoize(fn) { const cache = {}; return function(...args) { const key = args.toString(); if (!cache[key]) { cache[key] = fn.apply(this, args); } return cache[key]; }; } const factorial = memoize(function(x) { if (x === 0) { return 1; } else { return x * factorial(x - 1); } }); console.log(factorial(5)); // Calculates and caches the result console.log(factorial(5)); // Returns the cached result ``` 此範例示範了記憶化如何快取階乘計算的結果，從而顯著減少重複呼叫的計算時間。 ### 記憶化的優點和潛在缺點： #### 好處： - 顯著減少重複操作的處理時間。 - 透過避免冗餘計算來提高應用程式效率。 - 易於用高階函數實現。 #### 缺點： - 由於快取而增加記憶體使用量。 - 不適合具有不確定性輸出的函數或具有副作用的函數。 透過理解和實現記憶化，開發人員可以優化他們的 JavaScript 應用程式，使其更快、更有效率。然而，重要的是要考慮額外記憶體使用方面的權衡，並確保僅在能夠提供明顯好處的地方應用記憶化。 5. 單子 ----- **Monad**是函數式程式設計中使用的抽象資料類型，用於處理副作用，同時保持純函數原則。它們將行為和邏輯封裝在靈活的可連結結構中，允許順序操作，同時保持函數的純淨。 ### Monad 簡介及其在 FP 中的意義： Monad 提供了一個以受控方式處理副作用（如 IO、狀態、異常等）的框架，有助於保持功能的純度和可組合性。在 JavaScript 中，Promise 是一個常見的一元結構範例，可以乾淨且有效率地管理非同步操作。 ### JavaScript 中 Monad 的範例： - **Promises：**透過封裝待處理操作、成功值或錯誤來處理非同步操作，允許方法連結（如`.then()`和`.catch()` ）： ``` new Promise((resolve, reject) => { setTimeout(() => resolve("Data fetched"), 1000); }) .then(data => console.log(data)) .catch(error => console.error(error)); ``` - **Maybe Monad：**透過封裝可能存在或不存在的值來幫助處理 null 或未定義的錯誤： ``` function Maybe(value) { this.value = value; } Maybe.prototype.bind = function(transform) { return this.value == null ? this : new Maybe(transform(this.value)); }; Maybe.prototype.toString = function() { return `Maybe(${this.value})`; }; const result = new Maybe("Hello, world!").bind(value => value.toUpperCase()); console.log(result.toString()); // Outputs: Maybe(HELLO, WORLD!) ``` ### Monad 定律與結構： Monad 必須遵循三個核心定律——同一性、關聯性和單位——以確保它們的行為可預測： - **同一性：**直接應用函數或透過 monad 傳遞函數應該會產生相同的結果。 - **關聯性：**執行操作的順序（連結）不影響結果。 - **單位：**一個值必須能夠被提升為一個單子而不改變其行為。 理解這些定律對於在函數式程式設計中有效地實現或利用 monad 至關重要。 ### Monad 如何管理副作用並保持功能純度： 透過封裝副作用，monad 允許開發人員保持程式碼庫的其餘部分純淨，從而更易於理解和維護。它們使副作用可預測和可管理，這對於維護狀態一致性和錯誤處理可能變得具有挑戰性的大型應用程式至關重要。 透過利用 monad，開發人員可以增強 JavaScript 應用程式的功能，確保它們以功能性的方式處理副作用，從而提高程式碼的可靠性和可維護性。 6. 這些概念如何相互關聯 ------------- 純函數、不變性、柯里化、記憶化和 monad 的概念不僅僅是單獨的元素，而是增強 JavaScript 應用程式的健全性和可維護性的互連工具。以下是他們如何共同創造一個有凝聚力的函數式程式設計環境。 ### 建立功能協同： - **純函數與不變性：**純函數確保函數沒有副作用，並為相同的輸入傳回相同的輸出，並透過防止資料意外變更的不變性來補充。它們共同確保了可預測且穩定的程式碼庫。 - **柯里化和記憶化：**柯里化允許將函數分解為更簡單的單參數函數，這些函數更易於管理和記憶。然後可以將記憶化應用於這些柯里化函數以緩存其結果，透過避免重複計算來優化應用程式的效能。 - **Monad 和純函數：** Monad 有助於以受控方式管理副作用，這使得純函數即使在處理 I/O 或狀態轉換等操作時也能保持純淨。這種副作用的封裝保留了功能架構的完整性。 ### 範例：一個小型功能模組： 讓我們考慮一個將這些概念結合在一起的實際範例。假設我們正在建立一個簡單的用戶註冊模組： ``` // A pure function to validate user input const validateInput = input => input.trim() !== ''; // A curried function for creating a user object const createUser = name => ({ id: Date.now(), name }); // Memoizing the createUser function to avoid redundant operations const memoizedCreateUser = memoize(createUser); // A monad for handling potential null values in user input const getUser = input => new Maybe(input).bind(validateInput); // Example usage const input = getUser(' John Doe '); const user = input.bind(memoizedCreateUser); console.log(user.toString()); // Outputs user details or empty Maybe ``` 在此範例中， `validateInput`是確保輸入有效性的純函數。 `createUser`是一個柯里化和記憶化的函數，針對效能進行了最佳化，而`getUser`使用 monad 來安全地處理潛在的 null 值。 結論： --- 理解和整合這些函數式程式設計概念可以顯著提高 JavaScript 程式碼的品質和可維護性。透過同時使用純函數、不變性、柯里化、記憶化和 monad，開發人員可以建立更可靠、更有效率、更乾淨的應用程式。 透過採用這些相互關聯的原則，JavaScript 開發人員可以充分利用函數式程式設計的潛力來編寫更好、更永續的程式碼。 --- 原文出處：https://dev.to/alexmercedcoder/deep-dive-into-functional-programming-in-javascript-851

0個讚   0留言 147瀏覽

🔥 2024 年你必須知道的 6 個開源函式庫 🪄🔥

上週我發現了一些很棒的圖書館！ 檢查它們、使用它們、幫助它們加星⭐️ > 「我永遠不會停止學習。 我不會只做分配給我的事情。 我知道不存在所謂的現狀。 我將透過充滿熱情和忠誠的客戶來永續地發展我們的業務。 我永遠不會放棄幫助同事的機會，我會記得我知道一切之前的日子。 影響力比金錢更能激勵我，而且我知道**開源是我們這一代最強大的想法之一**。 我會盡可能多溝通，因為這是分散式公司的氧氣。我參加的是一場馬拉松，而不是短跑，無論目標有多遠，到達目標的唯一方法就是每天把一隻腳放在另一隻腳前面。只要有時間，沒有什麼問題是解決不了的。 馬特·穆倫韋格 Automattic 首席執行官 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci1n20z64gjk2ev9erg1.png) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGJsMzJ5dHkxMGNodmxmZzI4dnZ4ZGR3b2k4cmNkdGx6ejQ1ZW9tbyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/MpLphYAo2vO4P2Facx/giphy.gif) --- Coolify -- 隆重介紹 Coolify，它是[Heroku](https://www.heroku.com/) 、 [Netlify](https://www.netlify.com/)和[Vercel](https://vercel.com/)的開源和自架替代品 這個創新平台由[Andras Bacsai](https://twitter.com/heyandras)開發，使用戶能夠輕鬆部署和管理其 Web 應用程式，同時保持對其基礎設施的完全控制。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c98pzbi2nk2zk687crq7.png) ### 主要特徵： - **自託管**：借助 Coolify，您可以自由地將 Web 應用程式託管在自己的伺服器上，從而完全控制您的部署環境。 - **輕鬆部署**：該平台簡化了部署過程，讓您只需單擊幾下或命令即可部署應用程式。 - **可擴展性**：Coolify 旨在輕鬆擴展，在不影響效能的情況下滿足不斷增長的流量和工作負載需求。 - **客製化**：您可以自訂和配置部署環境以滿足您的特定要求，確保最佳效能和安全性。 - **整合**：Coolify 與流行的開發工具和工作流程無縫集成，使其可以輕鬆合併到您現有的專案中。 - **社區支持**：受益於充滿活力的開發者和貢獻者社區，他們提供支援、共享資源並協作改進平台。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a03am25bqpg4ve2uc4z4.png) 在 GitHub 上查看 Coolify 並給它一顆星： [Coolify Repository](https://github.com/coollabsio/coolify) --- Glasskube ----- [Glasskube](https://glasskube.dev/)是一個開源 Kubernetes 套件管理器，可簡化 Kubernetes 部署的套件管理。它提供了一個用戶友好的介面，降低了管理您最喜歡的 Kubernetes 套件的複雜性並提高了透明度。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5419e07amgribh1y03nk.png) ### 主要特徵： - **使用者友善的 UI** ：Glasskube 提供直覺的使用者介面，使 Kubernetes 套件管理對於使用者來說更容易存取和理解。 - **Brew-Inspired CLI** ：對於熟悉命令列介面的高級用戶，Glasskube 提供了 Brew-inspired CLI，允許高效的套件管理操作。 - **依賴感知**：Glasskube 套件具有依賴關係感知能力，確保 Kubernetes 套件的順利管理和安裝並考慮依賴關係。 - **雲端原生應用程式**：Glasskube 設計為雲端原生應用程式，符合 GitOps 原則，有助於無縫整合到 Kubernetes 環境和工作流程中。 Glasskube 作為簡化 Kubernetes 套件管理的寶貴工具而脫穎而出。無論您是 Kubernetes 新手還是經驗豐富的 DevOps 工程師，Glasskube 都能提供使用者友善的解決方案，幫助您輕鬆有效地管理 Kubernetes 套件。 [看看 GitHub 上的 Glasskube 並給它一顆星](https://github.com/glasskube/glasskube) --- AgentCloud --- [AgentCloud](https://www.agentcloud.dev)是您建立自己的 AI 應用程式遊樂場的首選平台！想像一下，它就像擁有您自己的個人 GPT（生成式預訓練變壓器）建構器平台，但具有一些很棒的額外功能。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u1d4w6552xrs8zqfxl0.png) 借助 Agent Cloud，公司可以靈活地為其員工建立和部署兩種不同類型的應用程式： 1. **對話式聊天應用程式**：這些應用程式的運作方式與 OpenAI 的 GPT 類似，允許使用者開發單代理聊天應用程式。然而，它們還具有利用任何大型語言模型 (LLM)、存取豐富的工具庫以及利用來自眾多資料來源的龐大知識庫的額外優勢。 2. **流程應用程式**：向自動化天堂問好！這些應用程式透過為代理設定要處理的目標和任務來幫助您簡化流程。這一切都是為了讓工作變得更輕鬆、更快捷、更有協作性。 因此，無論您是希望透過漂亮的聊天機器人來提高工作效率，還是像專業人士一樣自動執行任務，Agent Cloud 都能滿足您的需求。這一切都是為了為您的團隊提供他們需要的工具，讓他們更聰明地工作，而不是更辛苦地工作！ 最好的部分是什麼？它是開源的！如果您喜歡使用 Agent Cloud，為什麼不在 GitHub 上表達一些喜愛並給它一顆星呢？您的支持對開源社群來說意味著世界。 🌟 看看 GitHub 上的 Agent Cloud 並給它一顆星： [Agent Cloud Repository](https://github.com/rnadigital/agentcloud) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjNuMXQ0ZDcyZGpldGszeHA0NjB4M2g3bTNiNGpmMHNvdHN3em5vNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l1J3rGigrYfx8aKqI/giphy.gif) 我還發現了一個很酷的演示，可以讓您先睹為快了解 Agent Cloud 的全部內容。請觀看此處的介紹影片，以及創始人本人在 YouTube 上對[RAG Google Bigquery](https://youtu.be/POLdnrjsy9c?si=y5MFXNSs-o5TJMMH)的一些精彩見解。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y6wiumma95vddcqklq4.png) --- CrewAI ------ [CrewAI](https://www.crewai.com/)是一個突破性的框架，旨在協調角色扮演和自主人工智慧代理。這個開源專案由 João Moura 開發，使代理商能夠智慧協作，使他們能夠無縫地協作完成複雜的任務。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt2ehz1pykz7j5093ym1.png) ### 主要特徵： - **協作智能**：CrewAI 促進人工智慧代理之間的協作智能，使他們能夠匯集資源和專業知識，更有效地完成任務。 - **自主代理**：此框架支援自主人工智慧代理的開發，能夠根據其環境和目標做出獨立決策並採取行動。 - **任務編排**：CrewAI 提供用於編排任務和協調多個代理程式的操作的工具，確保順暢的協作和同步。 - **可擴展性**：借助 CrewAI，開發人員可以擴展其 AI 系統以容納大量代理，使其適用於從小規模模擬到大規模環境的應用程式。 - **靈活性**：該框架在設計代理行為和互動方面提供了靈活性，允許開發人員自訂系統以適應特定的用例和場景。 - **社群支援**：CrewAI 受益於充滿活力的開發人員和研究人員社區，促進自主代理和人工智慧領域的協作和創新。 在 GitHub 上查看 CrewAI 並給它一顆星： [CrewAI Repository](https://github.com/joaomdmoura/crewAI) > 了解[Agent Cloud 和 CrewAI](https://www.agentcloud.dev/blog/agent-cloud-vs-crewai-a-comparison)之間的差異。 --- SuperAGI ----- [SuperAGI](https://superagi.com/)是一個尖端平台，旨在突破對話式 AI 的界限，整合通用人工智慧 (AGI) 原理，建立高度智慧且適應性強的聊天機器人。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9r14m7magbpw5cal4403.png) ### 主要特徵： - **通用人工智慧（AGI）** ：SuperAGI 利用 AGI 原理開發具有類人理解和推理能力的聊天機器人。 - **深度學習模型**：該平台利用最先進的深度學習模型（例如變壓器和神經網路）來處理和產生自然語言響應。 - **知識圖**：SuperAGI 結合知識圖來表示和組織訊息，使聊天機器人能夠存取龐大的結構化知識儲存庫。 - **元學習**：SuperAGI 採用元學習技術，使聊天機器人能夠根據過去的互動和回饋不斷改進和調整其行為。 - **多輪對話**：SuperAGI 支援多輪對話，允許聊天機器人維護上下文並與用戶進行更自然、更流暢的互動。 - **可擴展性**：該平台具有高度可擴展性，使開發人員能夠整合自訂模組並根據需要擴展聊天機器人功能。 在 GitHub 上探索 SuperAGI： [SuperAGI 儲存庫](https://github.com/TransformerOptimus/SuperAGI) --- Gitroom ---- [Gitroom](https://gitroom.com/)提供工具並協助您擴展開源儲存庫。獲得更多知名度、明星、貢獻和客戶。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxjy6knk1cklbwtn6rxu.png) ### 主要特徵： - **統一協作**：Gitroom 將團隊協作直接引入到您的 Git 儲存庫中，從而實現無縫溝通和協調。 - **即時更新**：隨時了解儲存庫活動的即時更新，讓團隊能夠輕鬆追蹤變更和進度。 - **互動式討論**：直接在 Git 儲存庫中參與互動式討論，從而輕鬆分享想法並提供回饋。 - **任務管理**：使用內建任務管理功能追蹤任務和問題，簡化專案工作流程並提高生產力。 - **整合**：Gitroom 與 GitHub 順利集成，為已經習慣該平台的使用者提供熟悉且直覺的介面。 - **客製化**：透過可自訂的設定和首選項自訂 Gitroom，以滿足您團隊的特定需求。 在 GitHub 上探索 Gitroom：[Gitroom 儲存庫](https://github.com/gitroomhq/gitroom) 總之，這些儲存庫 - AgentCloud、Gitroom、Glasskube CrewAI、Coolify 和 SuperAGI - 都包含用於建立更聰明應用程式的令人驚嘆的工具。無論您喜歡聊天機器人、人工智慧代理還是 Web 部署，每個人都能找到適合自己的東西。 如果您喜歡所看到的內容，請在 GitHub 上給他們一顆星 ⭐️，為什麼不使用他們的工具來創造一些很棒的東西呢？ 很快會在另一篇部落格文章中見到您。 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExaWt6MGEzdTk3YW8xNzNpMGpnNXYzeGh3NGM0MXRscWsyamg5Mm51eiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/12noFudALzfIynHuUp/giphy.gif) 感謝您閱讀，如果您喜歡這個部落格並且想更深入地了解開發人員工具、React 等，請查看我[網站](https://theankurtyagi.com/)上的其他文章。 - [如何使用 React 和 Appwrite 建立安全的任務管理應用程式](https://theankurtyagi.com/appwrite/) - [如何使用 Hygraph 和 React 建立評論應用程式](https://theankurtyagi.com/build-review-app-hygraph-react/) - [如何使用 React 和 Supabase 建立全端 Notes 應用程式](https://theankurtyagi.com/notes-app-react-supabase/) --- 原文出處：https://dev.to/tyaga001/6-open-source-libraries-you-must-know-in-2024-5dgb

0個讚   0留言 167瀏覽

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

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

1個讚   3留言 221瀏覽

從頭開始實作 JavaScript 概念

在本文中，我們透過從頭開始建立幾個關鍵元件來探索 JavaScript 的基本建構塊。當我們深入研究這些概念時，我們將應用一系列從基礎到複雜的技術，使這種探索對於 JavaScript 世界的新手和專業人士都很有價值。 大綱 ---- - [`memoize()`](#memoize) - [`Array.map()`](#arraymap) - [`Array.filter()`](#arrayfilter) - [`Array.reduce()`](#arrayreduce) - [`bind()`](#bind) - [`call()` 、 `apply()`](#callapply) - [`setInterval()`](#setinterval) - [`cloneDeep()`](#clonedeep) - [`debounce()`](#debounce) - [`throttle()`](#throttle) - [`Promise`](#promise) - \[ `EventEmitter` ） <a name="memoize"></a> `memoize()` ----------- ### 任務說明 重新建立`memoize`函數（來自“lodash”），該函數透過快取函數呼叫的結果來優化效能。透過傳回快取的結果而不是重新計算，可以確保使用相同參數的重複函數呼叫更快。 ### 執行 ``` function customSerializer(entity, cache = new WeakSet()) { if (typeof entity !== 'object' || entity === null) { return `${typeof entity}:${entity}`; } if (cache.has(entity)) { return 'CircularReference'; } cache.add(entity); let objKeys = Object.keys(entity).sort(); let keyRepresentations = objKeys.map(key => `${customSerializer(key, cache)}:${ customSerializer(entity[key], cache) }` ); if (Array.isArray(entity)) { return `Array:[${keyRepresentations.join(',')}]`; } return `Object:{${keyRepresentations.join(',')}}`; } function myMemoize(fn) { const cache = new Map(); return function memoized(...args) { const keyRep = args.map(arg => customSerializer(arg) ).join('-'); const key = `${typeof this}:${this}-${keyRep}`; if (cache.has(key)) { return cache.get(key); } else { const result = fn.apply(this, args); cache.set(key, result); return result; } }; } ``` ### 實施的關鍵面 1. **快取機制：**它使用`Map`物件`cache`來儲存函數呼叫的結果。選擇`Map`物件是因為其高效率的鍵值配對和檢索功能。 2. **Custom Serializer** ： `customSerializer`函數將函數參數轉換為用作快取鍵的字串表示形式。此序列化考慮了基本類型、物件（包括巢狀物件）、陣列和循環參考。對於物件和陣列，它們的鍵經過排序以確保一致的字串表示形式，無論屬性聲明順序如何。 3. **序列化`this`** ： `this`的值指的是函數所屬的物件。在 JavaScript 中，方法可以根據呼叫它們的物件（即呼叫它們的上下文）而有不同的行為。這是因為`this`提供了對上下文物件的屬性和方法的存取，並且其值可能會根據函數的呼叫方式而變化。 4. **循環引用**：當物件直接或透過其屬性間接引用自身時，就會發生循環引用。這可能發生在更複雜的資料結構中，例如，物件`A`包含對物件`B`的引用，而物件`B`則直接或間接引用物件`A` 。處理循環引用以避免無限循環至關重要。 5. **使用`WeakSet`進行自動垃圾收集**： `WeakSet`保留對其物件的「弱」引用，這表示如果沒有其他引用， `WeakSet`中物件的存在不會阻止該物件被垃圾收集。此行為在需要臨時追蹤物件存在而又不會不必要地延長其生命週期的情況下特別有用。由於`customSerializer`函數可能只需要在序列化過程中標記物件的存取，而不儲存額外的資料，因此使用`WeakSet`可以確保物件不會僅僅因為它們在集合中的存在而保持活動狀態，從而防止潛在的內存洩漏。 <a name="arraymap"></a> `Array.map()` ------------- ### 任務說明 重新建立`Array.map()` ，它將轉換函數作為參數。此轉換函數將在陣列的每個元素上執行，並採用三個參數：當前元素、目前元素的索引和陣列本身。 ### 實施的關鍵面 1. **記憶體預先分配**： `new Array(this.length)`用於建立預先確定大小的陣列，以優化記憶體分配並透過避免加入元素時動態調整大小來提高效能。 ### 執行 ``` Array.prototype.myMap = function(fn) { const result = new Array(this.length); for (let i = 0; i < this.length; i++) { result[i] = fn(this[i], i, this); } return result; } ``` <a name="arrayfilter"></a> `Array.filter()` ---------------- ### 任務說明 重新建立`Array.filter()` ，它將謂詞函數作為輸入，迭代呼叫它的陣列的元素，將謂詞應用於每個元素。它傳回一個新陣列，僅包含謂詞函數傳回`true`元素。 ### 實施的關鍵面 1. **動態記憶體分配**：它動態地將符合條件的元素加入到`filteredArray`中，從而在很少有元素通過謂詞函數的情況下使該方法更有效地使用記憶體。 ### 執行 ``` Array.prototype.myFilter = function(pred) { const filteredArray = []; for (let i = 0; i < this.length; i++) { if (pred(this[i], i, this)) { filteredArray.push(this[i]); } } return filteredArray; } ``` <a name="arrayreduce"></a> `Array.reduce()` ---------------- ### 任務說明 重新建立`Array.reduce()` ，它對陣列的每個元素執行`reducer`函數，從而產生單一輸出值。 `reducer`函數有四個參數：累加器、currentValue、currentIndex 和整個陣列。 ### 實施的關鍵面 1. **`initialValue` value** ： `accumulator`和`startIndex`會根據是否將`initialValue`作為參數傳遞來初始化。如果提供了`initialValue` （意味著`arguments.length`至少為`2` ），則`accumulator`設定為此`initialValue` ，並且迭代從第0個元素開始。否則，如果未提供`initialValue` ，則將陣列本身的第 0 個元素用作`initialValue` 。 ### 執行 ``` Array.prototype.myReduce = function(callback, initialValue) { let accumulator = arguments.length >= 2 ? initialValue : this[0]; let startIndex = arguments.length >= 2 ? 0 : 1; for (let i = startIndex; i < this.length; i++) { accumulator = callback(accumulator, this[i], i, this); } return accumulator; } ``` <a name="bind"></a> `bind()` -------- ### 任務說明 重新建立`bind()`函數，該函數允許將物件以及預先指定的初始參數（如果有）作為呼叫原始函數的上下文傳遞。它還應該支援`new`運算符的使用，從而能夠建立新實例，同時維護正確的原型鏈。 ### 執行 ``` Function.prototype.mybind = function(context, ...bindArgs) { const self = this; const boundFunction = function(...callArgs) { const isNewOperatorUsed = new.target !== undefined; const thisContext = isNewOperatorUsed ? this : context; return self.apply(thisContext, bindArgs.concat(callArgs)); }; if (self.prototype) { boundFunction.prototype = Object.create(self.prototype); } return boundFunction; }; ``` ### 實施的關鍵面 1. **處理`new` Operator** ：語句`const isNewOperatorUsed = new.target !== undefined;`檢查是否透過`new`運算子將`boundFunction`作為建構函數呼叫。如果使用`new`運算符，則`thisContext`將設定為新建立的物件 ( `this` ) 而不是提供的`context` ，確認實例化應使用新的上下文而不是綁定期間提供的上下文。 2. **原型保留**：為了維護原始函數的原型鏈， `mybind`有條件地將`boundFunction`的原型設定為繼承自`self.prototype`的新物件。此步驟確保從`boundFunction` （用作建構函數時）建立的實例正確地繼承原始函數原型的屬性。此機制保留了預期的繼承層次結構並維護instanceof 檢查。 ### 將`bind()`與`new`一起使用的範例 讓我們考慮一個簡單的建構函數，它建立代表汽車的物件： ``` function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } ``` 想像一下，我們常常創造「豐田」品牌的`Car`物件。為了讓這個過程更有效率，我們可以使用`bind`為Toyotas建立一個專門的建構函數，預先填入`make`參數： ``` // Creating a specialized Toyota constructor with 'Toyota' // as the pre-set 'make' const ToyotaConstructor = Car.bind(null, 'Toyota'); // Now, we can create Toyota car instances // without specifying 'make' const myCar = new ToyotaConstructor('Camry', 2020); // Output: Car { make: 'Toyota', model: 'Camry', year: 2020 } console.log(myCar); ``` <a name="callapply"></a> `call()` 、 `apply()` -------------------- ### 任務說明 重新建立`call()`和`apply()`函數，它們允許使用給定的 this 值和單獨提供的參數來呼叫函數。 ### 執行 ``` Function.prototype.myCall = function(context, ...args) { const fnSymbol = Symbol('fnSymbol'); context[fnSymbol] = this; const result = context[fnSymbol](...args); delete context[fnSymbol]; return result; }; Function.prototype.myApply = function(context, args) { const fnSymbol = Symbol('fnSymbol'); context[fnSymbol] = this; const result = context[fnSymbol](...args); delete context[fnSymbol]; return result; }; ``` ### 實施的關鍵面 1. **屬性命名的符號用法**：為了防止覆蓋上下文物件上潛在的現有屬性或由於名稱衝突而導致意外行為，使用唯一的`Symbol`作為屬性名稱。這確保了我們的臨時屬性不會幹擾上下文物件的原始屬性。 2. **執行後清理**：函數呼叫執行後，新增到上下文物件中的臨時屬性將被刪除。此清理步驟對於避免在上下文物件上留下修改後的狀態至關重要。 <a name="setinterval"></a> `setInterval()` --------------- ### 任務說明 使用`setTimeout`重新建立`setInterval` 。此函數應以指定的時間間隔重複呼叫提供的回呼函數。它會傳回一個函數，當呼叫該函數時，該函數會停止間隔。 ### 執行 ``` function mySetInterval(callback, interval) { let timerId; const repeater = () => { callback(); timerId = setTimeout(repeater, interval); }; repeater(); return () => { clearTimeout(timerId); }; } ``` ### 實施的關鍵面 1. **取消功能**： `mySetInterval`傳回的函數提供了一種簡單直接的方法來取消正在進行的間隔，而無需在函數範圍之外公開或管理計時器 ID。 <a name="clonedeep"></a> `cloneDeep()` ------------- ### 任務說明 重新建立執行給定輸入的深度複製的`cloneDeep`函數（來自“lodash”）。該函數應該能夠複製複雜的資料結構，包括物件、陣列、映射、集合、日期和正規表示式，並保持每個元素的結構和類型完整性。 ### 執行 ``` function myCloneDeep(entity, map = new WeakMap()) { if (entity === null || typeof entity !== 'object') { return entity; } if (map.has(entity)) { return map.get(entity); } let cloned; switch (true) { case Array.isArray(entity): cloned = []; map.set(entity, cloned); cloned = entity.map(item => myCloneDeep(item, map)); break; case entity instanceof Date: cloned = new Date(entity.getTime()); break; case entity instanceof Map: cloned = new Map(Array.from(entity.entries(), ([key, val]) => [myCloneDeep(key, map), myCloneDeep(val, map)])); break; case entity instanceof Set: cloned = new Set(Array.from(entity.values(), val => myCloneDeep(val, map))); break; case entity instanceof RegExp: cloned = new RegExp(entity.source, entity.flags); break; default: cloned = Object.create( Object.getPrototypeOf(entity)); map.set(entity, cloned); for (let key in entity) { if (entity.hasOwnProperty(key)) { cloned[key] = myCloneDeep(entity[key], map); } } } return cloned; } ``` ### 實施的關鍵面 1. **循環引用處理**：利用`WeakMap`來追蹤已存取的物件。如果遇到已經克隆的物件，則返回先前克隆的物件，有效處理循環參考並防止堆疊溢位錯誤。 2. **特殊物件的處理**：區分幾種物件類型（ `Array` 、 `Date` 、 `Map` 、 `Sets` 、 `RegExp` ），以確保每種類型都被適當地克隆，並保留其特定特徵。 ``` - **`Array`**: Recursively clones each element, ensuring deep cloning. ``` ``` - **`Date`**: Copies the date using its numeric value (timestamp). ``` ``` - **Maps and Sets**: Constructs a new instance, recursively cloning each entry (for `Map`) or value (for `Set`). ``` ``` - **`RegExp`**: Clones by creating a new instance with the source and flags of the original. ``` 3. **物件屬性的複製**：當輸入是普通物件時，它會建立一個與原始物件具有相同原型的物件，然後遞歸地複製每個自己的屬性，在保持原型鏈的同時確保深度克隆。 4. **效率和性能**：利用`WeakMap`進行記憶，有效處理具有重複引用和循環的複雜大型結構，透過避免冗餘克隆來確保最佳性能。 <a name="debounce"></a> `debounce()` ------------ ### 任務說明 重新建立`debounce`函數（來自“lodash”），它允許限制給定回調函數觸發的頻率。當在短時間內重複呼叫時，在指定的延遲後僅執行最後一次呼叫。 ``` function myDebounce(func, delay) { let timerId; const debounced = function(...args) { clearTimeout(timerId); timerId = setTimeout(() => { func.apply(this, args); }, delay); }; debounced.cancel = function() { clearTimeout(timerId); timerId = null; }; debounced.flush = function() { clearTimeout(timerId); func.apply(this, arguments); timerId = null; }; return debounced; } ``` ### 實施的關鍵面 1. **取消功能**：引入`.cancel`方法使外部控制能夠取消去抖函數的任何暫停執行。這增加了靈活性，允許響應特定事件或條件而取消去抖功能。 2. **透過 Flush 立即執行**： `.flush`方法允許立即執行去抖函數，而不考慮延遲。這在需要確保立即應用去抖函數的效果的情況下非常有用，例如，在卸載元件或完成互動之前。 <a name="throttle"></a> `throttle()` ------------ ### 任務說明 重新建立`throttle`函數（來自“lodash”），它確保給定的回調函數在每個指定的時間間隔內最多只呼叫一次（在我們的例子中是在開始時）。與去抖動不同，限制保證函數會定期執行，確保進行更新，儘管更新速度是受控的。 ### 執行 ``` function myThrottle(func, timeout) { let timerId = null; const throttled = function(...args) { if (timerId === null) { func.apply(this, args) timerId = setTimeout(() => { timerId = null; }, timeout) } } throttled.cancel = function() { clearTimeout(timerId); timerId = null; }; return throttled; } ``` ### 實施的關鍵面 1. **取消功能**：引入`.cancel`方法可以清除節流計時器的任何計劃重置。這在清理階段非常有用，例如 UI 庫/框架中的元件卸載，以防止過時的執行並有效管理資源。 <a name="promise"></a> `Promise` --------- ### 任務說明 重新建立`Promise`類別。它是為非同步程式設計的構造，允許暫停程式碼的執行，直到非同步進程完成。從本質上講，承諾代表了在其建立時不一定已知的值的代理。它允許您將處理程序與非同步操作的最終成功值或失敗原因相關聯。這使得非同步方法可以像同步方法一樣傳回值：非同步方法不是立即傳回最終值，而是傳回一個在未來某個時刻提供該值的承諾。 `Promise`包含處理已完成和拒絕狀態的方法（ `then` 、 `catch` ），以及無論結果如何都執行程式碼的方法（ `finally` ）。 ``` class MyPromise { constructor(executor) { ... } then(onFulfilled, onRejected) { ... } catch(onRejected) { ... } finally(callback) { ... } } ``` ### `constructor`實現 ``` constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } ``` ### `constructor`實現的關鍵方面 1. **狀態管理**：以「待處理」狀態初始化。解決時切換為“已完成”，被拒絕時切換為“拒絕”。 2. **值和原因**：保存承諾的最終結果（ `value` ）或拒絕的原因（ `reason` ）。 - **處理非同步**：接受包含非同步操作的`executor`函數。 `executor`採用兩個函數， `resolve`和`reject` ，當呼叫它們時，將promise轉換到對應的狀態。 3. **回呼陣列**：維護回呼佇列（ `onFulfilledCallbacks` 、 `onRejectedCallbacks` ），以用於等待解決或拒絕承諾的延遲操作。 ### `.then`實施 ``` resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError( 'Chaining cycle detected for promise')); } if (x instanceof MyPromise) { x.then(resolve, reject); } else { resolve(x); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value; onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason; }; let promise2 = new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { let x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); } else if (this.state === 'rejected') { setTimeout(() => { try { let x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); } else if (this.state === 'pending') { this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { let x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { let x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); }); } }); return promise2; } ``` ### `.then`實施的關鍵方面 1. **預設處理程序**：將非函數處理程序轉換為標識函數（用於實現）或拋出程序（用於拒絕），以確保承諾鏈中的正確轉發和錯誤處理。 2. **Promise 連結**： `then`方法允許連結 Promise，從而實現順序非同步操作。它會建立一個新的 Promise ( `promise2` )，該 Promise 取決於傳遞給它的回呼函數 ( `onFulfilled` 、 `onRejected` ) 的結果。 3. **處理解決方案和拒絕**：僅在當前承諾解決（履行或拒絕）後才會呼叫所提供的回調。每個回呼的結果 ( `x` ) 可能是一個值或另一個 Promise，決定了`promise2`的解析。 4. **防止連結循環**： `resolvePromise`函數檢查`promise2`是否與結果 ( `x` ) 相同，避免 Promise 等待自身的循環，從而導致`TypeError` 。 5. **支援 MyPromise 和 Non-Promise 值**：如果結果 ( `x` ) 是`MyPromise`的實例， `then`使用其解析或拒絕來解決`promise2` 。此功能支援基於 Promise 的操作的無縫集成，無論是來自`MyPromise`實例還是本機 JavaScript Promise，假設它們具有相似的行為。對於非 Promise 值，或當`onFulfilled`或`onRejected`只是傳回一個值時， `promise2`將使用該值進行解析，從而在 Promise 鏈中實現簡單的轉換或分支邏輯。 6. **非同步執行保證**：透過使用`setTimeout`延遲`onFulfilled`和`onRejected`的執行， `then`確保非同步為。此延遲保持一致的執行順序，確保`onFulfilled`和`onRejected`在執行堆疊清除後呼叫。 7. **錯誤處理**：如果`onFulfilled`或`onRejected`內發生異常， `promise2`會因錯誤而被拒絕，從而允許錯誤處理通過 Promise 鏈傳播。 ### `catch`並`finally`實現 ``` static resolve(value) { if (value instanceof MyPromise) { return value; } return new MyPromise((resolve, reject) => resolve(value)); } catch(onRejected) { return this.then(null, onRejected); } finally(callback) { return this.then( value => MyPromise.resolve(callback()) .then(() => value), reason => MyPromise.resolve(callback()) .then(() => { throw reason; }) ); } ``` ### `.catch`實施的關鍵面向： 1. **簡化的錯誤處理：** `.catch`方法是`.then(null, onRejected)`的簡寫，專門專注於處理拒絕場景。當只需要拒絕處理程序時，它允許更清晰的語法，從而提高程式碼的可讀性和可維護性。 2. **Promise Chaining 支援：**由於它在內部委託給`.then` ，所以`.catch`返回一個新的 Promise，從而保持 Promise 鏈功能。這允許在錯誤恢復或透過重新拋出或返回新的被拒絕的承諾傳播錯誤後繼續進行鏈操作。 3. **錯誤傳播：**如果提供了`onRejected`並且執行時沒有錯誤，則傳回的 Promise 將使用`onRejected`的傳回值進行解析，從而有效地允許 Promise 鏈中的錯誤復原。如果`onRejected`拋出錯誤或傳回被拒絕的 Promise，則錯誤會沿著鏈傳播。 ### `.finally`實現的關鍵面向： 1. **始終執行：** `.finally`方法確保執行提供的`callback` ，無論 Promise 是履行還是拒絕。這對於需要在非同步操作之後發生的清理操作特別有用，與其結果無關。 2. **傳回值保留：**雖然`.finally`中的`callback`不接收任何參數（與`.then`或`.catch`不同），但 Promise 的原始履行值或拒絕原因將被保留並透過鏈傳遞。從`.finally`傳回的 Promise 會以相同的值或原因被解析或拒絕，除非`callback`本身導致被拒絕的 Promise。 3. **錯誤處理與傳播：**如果`callback`執行成功， `.finally`傳回的 Promise 將按照與原始 Promise 相同的方式進行結算。但是，如果`callback`拋出錯誤或返回被拒絕的 Promise，則從`.finally`返回的 Promise 會因這個新錯誤而被拒絕，從而允許錯誤攔截並更改 Promise 鏈中的拒絕原因。 <a name="eventemitter"></a> `EventEmitter` -------------- ### 任務說明 重新建立`EventEmitter`類，該類別允許實現觀察者模式，使物件（稱為「發射器」）能夠發出命名事件，從而導致呼叫先前註冊的偵聽器（或「處理程序」）。這是 Node.js 中用於處理非同步事件的關鍵元件，廣泛用於發出訊號以及管理應用程式狀態和行為。實作自訂`EventEmitter`涉及建立用於註冊事件偵聽器、觸發事件和刪除偵聽器的方法。 ``` class MyEventEmitter { constructor() { this.events = {}; } on(eventName, listener) { if (!this.events[eventName]) { this.events[eventName] = []; } this.events[eventName].push(listener); } once(eventName, listener) { const onceWrapper = (...args) => { listener.apply(this, args); this.off(eventName, onceWrapper); }; this.on(eventName, onceWrapper); } emit(eventName, ...args) { const listeners = this.events[eventName]; if (listeners && listeners.length) { listeners.forEach((listener) => { listener.apply(this, args); }); } } off(eventName, listenerToRemove) { if (!this.events[eventName]) { return; } const filterListeners = (listener) => listener !== listenerToRemove; this.events[eventName] = this.events[eventName].filter(filterListeners); } } ``` ### `EventEmitter`實現的關鍵面 1. **EventListener Registration `.on` ：**將偵聽器函數新增至指定事件的偵聽器陣列中，如果該事件名稱尚不存在則建立一個新陣列。 2. **一次性事件偵聽器`.once` ：**註冊一個偵聽器，該偵聽器在呼叫一次後會自行刪除。它將原始偵聽器包裝在一個函數 ( `onceWrapper` ) 中，該函數也會在執行後刪除包裝器，確保偵聽器僅觸發一次。 3. **發出事件`.emit` ：**觸發事件，使用提供的參數呼叫所有已註冊的偵聽器。它將參數應用於每個偵聽器函數，從而允許將資料傳遞給偵聽器。 4. **刪除事件偵聽器`.off` ：**從事件偵聽器陣列中刪除特定偵聽器。如果事件在刪除後沒有偵聽器，則可以將其保留為空陣列或可選地進一步清理（此實作中未顯示）。 --- 原文出處：https://dev.to/antonzo/implementing-javascript-concepts-from-scratch-4623

0個讚   0留言 159瀏覽

給新手開發者的 Git 指南

🩺 醫生有聽診器。 🔧 機械師有扳手。 👨‍💻 我們開發人員，有 Git。 您是否注意到 Git 對於程式碼工作來說是如此不可或缺，以至於人們幾乎從未將其包含在他們的技術堆疊或簡歷中？假設你已經知道了，或至少足以應付，但你知道嗎？ Git 是一個版本控制系統（VCS）。無所不在的技術使我們能夠儲存、更改程式碼並與他人合作。 > 🚨 作為免責聲明，我想指出 Git 是一個很大的話題。 Git 書籍已經出版，部落格文章也可能被誤認為是學術論文。這不是我來這裡的目的。**我不是 Git 專家**。我的目標是寫一篇我希望在學習 Git 時擁有的 Git 基礎文章。 作為開發人員，我們的日常工作圍繞著閱讀、編寫和審查程式碼。 Git 可以說是我們使用的最重要的工具之一。身為開發人員，掌握 Git 提供的特性和功能是您可以對自己進行的最佳投資之一。 讓我們開始吧 ![git](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXZqODl2Zjk5cTUzYWo3Nnptam1qYWdqYm4xcmY5dXEyY2RzZWZrbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/m0HehxSuVPd9CE3L4H/giphy.gif) > 如果您覺得我錯過了或應該更詳細地了解特定命令，請在下面的評論中告訴我。我將相應地更新這篇文章。 🙏 --- 當我們談論這個話題時 ---------- 如果您希望將 Git 技能運用到工作中並願意為 Glasskube 做出貢獻，我們於 2 月正式推出，我們的目標是成為 Kubernetes 套件管理的預設預設解決方案。有了您的支持，我們就能實現這一目標。表達您支持的最佳方式是在 GitHub 上為我們加註星標 ⭐ [![連小貓也喜歡送星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzaxhc3f53sggz7v3bw4.jpeg)](https://github.com/glasskube/glasskube) --- 讓我們打好基礎 ------- Git 有沒有讓你感覺像 Peter Griffin 一樣？ 如果您沒有以正確的方式學習 Git，您可能會不斷地摸不著頭腦，陷入同樣的問題，或者後悔有一天在終端中出現另一個合併衝突。讓我們定義一些基本的 Git 概念來確保這種情況不會發生。 ![git-2](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNjBqNHlnNjgwZHl4ZmdtMW8wbGJjYWJ5MmQyN2x4YXJpeXAxNWFsZCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/jcKiy2CqRIYM8W3E4p/giphy.gif) ### 分公司 在 Git 儲存庫中，您會發現一條開發主線，通常名為「main」或「master」（ [已棄用](https://github.blog/changelog/2020-10-01-the-default-branch-for-newly-created-repositories-is-now-main/)），其中有幾個[分支](https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell)分支。這些分支代表同時的工作流程，使開發人員能夠在同一專案中同時處理多個功能或修復。 ![Git 分支](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3p5q80hldckku20urm0.png) ### 提交 Git 提交作為更新程式碼的捆綁包，捕獲專案程式碼在特定時間點的快照。每次提交都會記錄自上次記錄以來所做的更改，共同建立專案開發旅程的全面歷史。 ![Git 提交](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcjp286j11bqkx0k9w35.png) 當引用提交時，您通常會使用其唯一標識的加密[雜湊](https://www.mikestreety.co.uk/blog/the-git-commit-hash/)。 例子： ``` git show abc123def456789 ``` 這顯示了有關該哈希提交的詳細資訊。 ### 標籤 Git[標籤](https://git-scm.com/book/en/v2/Git-Basics-Tagging)充當 Git 歷史中的地標，通常標記專案開發中的重要里程碑，例如`releases` 、 `versions`或`standout commits` 。這些標籤對於標記特定時間點非常有價值，通常代表專案旅程中的起點或主要成就。 ![Git 標籤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06uilykiq1ky6dtnr3ez.png) ### 頭 目前簽出分支上的最新提交由`HEAD`指示，充當儲存庫中任何引用的指標。當您位於特定分支時， `HEAD`指向該分支上的最新提交。有時， `HEAD`可以直接指向特定的提交（ `detached HEAD`狀態），而不是指向分支的尖端。 ### 階段 了解 Git 階段對於導航 Git 工作流程至關重要。它們代表文件更改在提交到儲存庫之前發生的邏輯轉換。 讓我們深入研究一下 Git 階段的概念： ![Git 階段](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96ndc8w183kh0tcb3uxb.png) #### 工作目錄👷 `working directory`是您編輯、修改和建立專案文件的位置。表示本機上檔案的目前狀態。 #### 暫存區🚉 `staging`區域就像一個保留區域或預提交區域，您可以在其中準備更改，然後再將更改提交到儲存庫。 > 這裡有用的指令： `git add` > `git rm`也可用於取消暫存更改 #### 本地儲存庫🗄️ 本機儲存庫是 Git 永久儲存已提交變更的位置。它允許您查看專案的歷史記錄，恢復到以前的狀態，並與同一程式碼庫上的其他人進行協作。 > 您可以使用以下指令提交暫存區域中準備好的變更： `git commit` #### 遠端儲存庫🛫 遠端儲存庫是一個集中位置，通常託管在伺服器（例如 GitHub、GitLab 或 Bitbucket）上，您可以在其中與其他人共用專案並進行協作。 > 您可以使用`git push`和`git pull`等命令將提交的變更從本機儲存庫推送/拉取到遠端儲存庫。 Git 入門 ------ 好吧，你必須從某個地方開始，在 Git 中那就是你的`workspace` 。您可以`fork`或`clone`現有儲存庫並擁有該工作區的副本，或者如果您在電腦上的新本機資料夾中全新開始，則必須使用`git init`將其轉換為 git 儲存庫。不容忽視的下一步是設定您的憑證。 ![Source: Shuai Li](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqr8mylqjo91zurb7gmi.png) ### 憑證設定 當執行推送和拉取到遠端儲存庫時，您不想每次都輸入使用者名稱和密碼，只需執行以下命令即可避免這種情況： ``` git config --global credential.helper store ``` 第一次與遠端儲存庫互動時，Git 會提示您輸入使用者名稱和密碼。之後，您將不再收到提示 > 請務必注意，憑證以純文字格式儲存在`.git-credentials`檔案中。 若要檢查已配置的憑證，您可以使用下列命令： ``` git config --global credential.helper ``` ### 與分公司合作 在本地工作時，了解您目前所在的分支至關重要。這些命令很有幫助： ``` # Will show the changes in the local repository git branch # Or create a branch directly with git branch feature-branch-name ``` 若要在分支之間轉換，請使用： ``` git switch ``` 除了在它們之間進行轉換之外，您還可以使用： ``` git checkout # A shortcut to switch to a branch that is yet to be created with the -b flag git checkout -b feature-branch-name ``` 若要檢查儲存庫的狀態，請使用： ``` git status ``` 始終清楚了解當前分支的一個好方法是在終端機中查看它。許多終端插件可以幫助解決這個問題。這是[一個](https://gist.github.com/joseluisq/1e96c54fa4e1e5647940)。 ![終端視圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nycmbxgrtplax7q83g3n.png) ### 使用提交 在處理提交時，使用 git commit -m 記錄更改，使用 git amend 修改最近的提交，並盡力遵守[提交訊息約定](https://gist.github.com/qoomon/5dfcdf8eec66a051ecd85625518cfd13)。 ``` # Make sure to add a message to each commit git commit -m "meaningful message" ``` 如果您對上次提交進行了更改，則不必完全建立另一個提交，您可以使用 --amend 標誌來使用分階段變更來修改最近的提交 ``` # make your changes git add . git commit --amend # This will open your default text editor to modify the commit message if needed. git push origin your_branch --force ``` > ⚠️ 使用`--force`時要小心，因為它有可能涵蓋目標分支的歷史記錄。通常應避免在 main/master 分支上應用它。 > 根據經驗，最好經常提交，以避免遺失進度或意外重置未暫存的變更。之後可以透過壓縮多個提交或進行互動式變基來重寫歷史記錄。 使用`git log`顯示按時間順序排列的提交列表，從最近的提交開始並按時間倒推 操縱歷史 ---- 操縱歷史涉及一些強大的命令。 `Rebase`重寫提交歷史記錄， `Squashing`將多個提交合併為一個，而`Cherry-picking`選擇特定提交。 ### 變基和合併 將變基與合併進行比較是有意義的，因為它們的目標相同，但實現方式不同。關鍵的差異在於變基重寫了專案的歷史。對於重視清晰且易於理解的專案歷史的專案來說，這是理想的選擇。另一方面，合併透過產生新的合併提交來維護兩個分支歷史記錄。 在變基期間，功能分支的提交歷史記錄在移動到主分支的`HEAD`時會被重組 ![狐狸](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytea832muxycodnkdlma.png) 這裡的工作流程非常簡單。 確保您位於要變基的分支上並從遠端儲存庫取得最新變更： ``` git checkout your_branch git fetch ``` 現在選擇您想要變基的分支並執行以下命令： ``` git rebase upstream_branch ``` 變基後，如果分支已推送到遠端儲存庫，您可能需要強制推送變更： ``` git push origin your_branch --force ``` > ⚠️ 使用`--force`時要小心，因為它有可能涵蓋目標分支的歷史記錄。通常應避免在 main/master 分支上應用它。 ### 擠壓 Git 壓縮用於將多個提交壓縮為單一、有凝聚力的提交。 ![git 擠壓](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owzri2ufj3meqhtjjpc0.png) 這個概念很容易理解，如果使用的統一程式碼的方法是變基，則特別有用，因為歷史記錄會被改變，所以注意對專案歷史記錄的影響很重要。有時我很難執行擠壓，特別是使用互動式變基，幸運的是我們有一些工具可以幫助我們。這是我首選的壓縮方法，其中涉及將 HEAD 指標向後移動 X 次提交，同時保留分階段的變更。 ``` # Change to the number after HEAD~ depending on the commits you want to squash git reset --soft HEAD~X git commit -m "Your squashed commit message" git push origin your_branch --force ``` > ⚠️ 使用`--force`時要小心，因為它有可能涵蓋目標分支的歷史記錄。通常應避免在 main/master 分支上應用它。 ### 採櫻桃 櫻桃採摘對於選擇性地合併從一個分支到另一個分支的更改非常有用，特別是當合併整個分支不合需要或不可行時。然而，明智地使用櫻桃選擇很重要，因為如果應用不當，可能會導致重複提交和不同的歷史記錄 ![採櫻桃](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxe90o4u26mikikee9f1.png) 要先執行此操作，您必須確定要選擇的提交的提交哈希，您可以使用`git log`來執行此操作。一旦確定了提交哈希，您就可以執行： ``` git checkout target_branch git cherry-pick <commit-hash> # Do this multiple times if multiple commits are wanted git push origin target_branch ``` 高級 Git 指令 --------- ### 簽署提交 對提交進行簽名是一種驗證 Git 中提交的真實性和完整性的方法。它允許您使用 GPG (GNU Privacy Guard) 金鑰對您的提交進行加密簽名，從而向 Git 保證您確實是該提交的作者。您可以透過建立 GPG 金鑰並將 Git 配置為在提交時使用該金鑰來實現此目的。 步驟如下： ``` # Generate a GPG key gpg --gen-key # Configure Git to Use Your GPG Key git config --global user.signingkey <your-gpg-key-id> # Add the public key to your GitHub account # Signing your commits with the -S flag git commit -S -m "Your commit message" # View signed commits git log --show-signature ``` ### 轉發日誌 我們還沒有探討的一個主題是 Git 引用，它們是指向儲存庫中各種物件的指針，主要是提交，還有標籤和分支。它們可作為 Git 歷史記錄中的命名點，允許使用者瀏覽儲存庫的時間軸並存取專案的特定快照。了解如何導航 git 引用非常有用，他們可以使用 git reflog 來做到這一點。 以下是一些好處： - 恢復遺失的提交或分支 - 除錯和故障排除 - 糾正錯誤 ### 互動式變基 互動式變基是一個強大的 Git 功能，可讓您以互動方式重寫提交歷史記錄。它使您能夠在將提交應用到分支之前對其進行修改、重新排序、組合或刪除。 為了使用它，您必須熟悉可能的操作，例如： - 選擇（“p”） - 改寫（“r”） - 編輯（“e”） - 壁球（“s”） - 刪除（“d”） ![互動式變基](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98sngs9j2dl5awcmm8dt.png) 這是一個有用的[影片，](https://www.youtube.com/watch?v=qsTthZi23VE)用於學習如何在終端中執行互動式變基，我還在部落格文章的底部連結了一個有用的工具。 與 Git 協作 -------- ### 起源與上游 **來源**是複製本機 Git 儲存庫時與本機 Git 儲存庫關聯的預設遠端儲存庫。如果您分叉了一個儲存庫，那麼預設情況下該分叉將成為您的「原始」儲存庫。 另一方面，**上游**指的是您的儲存庫分叉的原始儲存庫。 為了讓您的分叉儲存庫與原始專案的最新更改保持同步，您可以從「上游」儲存庫中 git 取得更改，並將它們合併或變基到本機儲存庫中。 若要查看與本機 Git 儲存庫關聯的遠端儲存庫，請執行： ``` git remote -v ``` ### 衝突 不要驚慌，當嘗試合併或變基分支並檢測到衝突時，這只意味著存儲庫中同一文件或文件的不同版本之間存在衝突的更改，並且可以輕鬆解決（大多數情況下）。 ![合併衝突](https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbXRiM3o5cWd0OGZ3Z2NudGhlb2gyaXhheTRmcGx0bW5sN3UzNXJhYSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cFkiFMDg3iFoI/giphy.gif) 它們通常在受影響的文件中指示，Git 在其中插入衝突標記`<<<<<<<` 、 `=======`和`>>>>>>>`以突出顯示衝突部分。 決定保留、修改或刪除哪些更改，確保產生的程式碼有意義並保留預期的功能。 手動解決衝突檔案中的衝突後，刪除衝突標記`<<<<<<<` 、 `=======`和`>>>>>>>`並根據需要調整程式碼。 對解決方案感到滿意後，請儲存衝突文件中的變更。 > 如果您在解決衝突時遇到問題，該[影片](https://www.youtube.com/watch?v=xNVM5UxlFSA)可以很好地解釋它。 流行的 Git 工作流程 ------------ ![git 工作流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x955re263jtueig35kyg.png) 存在各種 Git 工作流程，但需要注意的是，不存在通用的「最佳」Git 工作流程。相反，每種方法都有其自身的優點和缺點。讓我們來探索這些不同的工作流程，以了解它們的優點和缺點。 ![git 工作流程](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExeTY0eTI3anV6YnJ3Y2Y3bzd6ZTE5dHJ6OG9hdDNsM3hwcW1ubHZiMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dSetNZo2AJfptAk9hp/giphy.gif) ### 功能分支工作流程🌱 每個新功能或錯誤修復都是在自己的分支中開發的，然後在完成後將其合併回主分支。 > - **優點**：隔離變更並減少衝突。 > - **弱點**：可能變得複雜並且需要勤奮的分行管理。 ### Gitflow 工作流程 🌊 Gitflow 定義了嚴格的分支模型，為不同類型的開發任務提供了預先定義的分支。 它包括長期分支，例如 main、develop、feature 分支、release 分支和 hotfix 分支。 > - **優點**：適合定期發布、長期維護的專案。 > - **缺點**：對於較小的團隊來說可能過於複雜 ### 分岔工作流程🍴 在此工作流程中，每個開發人員都會複製主儲存庫，但他們不會將變更直接推送到主儲存庫，而是將變更推送到自己的儲存庫分支。然後，開發人員建立拉取請求以提出對主儲存庫的更改，從而允許在合併之前進行程式碼審查和協作。 這是我們在開源 Glasskube 儲存庫上進行協作的工作流程。 > - **優點**：鼓勵外部貢獻者進行協作，而無需授予對主儲存庫的直接寫入存取權。 > - **弱點**：維持分支和主儲存庫之間的同步可能具有挑戰性。 ### 拉取請求工作流程 ⏩ 與分叉工作流程類似，但開發人員不是分叉，而是直接在主儲存庫中建立功能分支。 > - **優點**：促進團隊成員之間的程式碼審查、協作和知識共享。 > - **弱點**：對人類程式碼審查員的依賴可能會導致開發過程延遲。 ### 基於主幹的開發🪵 如果您所在的團隊專注於快速迭代和持續交付，您可能會使用基於主幹的開發，開發人員直接在主分支上工作，提交小而頻繁的變更。 > - **優勢**：促進快速迭代、持續集成，並專注於為生產提供小而頻繁的變更。 > - **缺點**：需要強大的自動化測試和部署管道來確保主分支的穩定性，可能不適合發佈時間表嚴格或功能開發複雜的專案。 ### 什麼叉子？ 強烈建議在開源專案上進行分叉，因為您可以完全控制自己的儲存庫副本。您可以進行變更、嘗試新功能或修復錯誤，而不會影響原始專案。 > 💡 我花了很長時間才弄清楚，雖然分叉存儲庫作為單獨的實體開始，但它們保留了與原始存儲庫的連接。此連接可讓您追蹤原始專案中的變更並將您的分支與其他人所做的更新同步。 這就是為什麼即使您推送到原始存儲庫也是如此。您的變更也會顯示在遙控器上。 Git 備忘錄 ------- ``` # Clone a Repository git clone <repository_url> # Stage Changes for Commit git add <file(s)> # Commit Changes git commit -m "Commit message" # Push Changes to the Remote Repository git push # Force Push Changes (use with caution) git push --force # Reset Working Directory to Last Commit git reset --hard # Create a New Branch git branch <branch_name> # Switch to a Different Branch git checkout <branch_name> # Merge Changes from Another Branch git merge <branch_name> # Rebase Changes onto Another Branch (use with caution) git rebase <base_branch> # View Status of Working Directory git status # View Commit History git log # Undo Last Commit (use with caution) git reset --soft HEAD^ # Discard Changes in Working Directory git restore <file(s)> # Retrieve Lost Commit References git reflog # Interactive Rebase to Rearrange Commits git rebase --interactive HEAD~3 ``` --- 獎金！一些 Git 工具和資源可以讓您的生活更輕鬆。 -------------------------- - 互動式變基[工具](https://github.com/MitMaro/git-interactive-rebase-tool)。 - [Cdiff](https://github.com/amigrave/cdiff)查看豐富多彩的增量差異。 - 互動式 Git 分支[遊樂場](https://learngitbranching.js.org/?locale=en_US) --- 如果您喜歡這類內容並希望看到更多內容，請考慮在 GitHub 上給我們一個 Star 來支持我們🙏 [![連小貓也喜歡送星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzaxhc3f53sggz7v3bw4.jpeg)](https://github.com/glasskube/glasskube) --- 原文出處：https://dev.to/glasskube/the-guide-to-git-i-never-had-1450

0個讚   0留言 165瀏覽

DevOps 基礎知識🚀

背景❔ --- 您是**DevOps**新手還是想學習一些 DevOps 工具？或者您可能已經是**DevOps 工程師，**正在尋找文件和練習技能的空間？ 我在**GitHub**上建立了[**devops-basics**](https://github.com/tungbq/devops-basics)儲存庫來幫助您完成這一切！ 🥳 簡介：波： ----- [**devops-basics**](https://github.com/tungbq/devops-basics)儲存庫將幫助您增強 DevOps 技能，並作為與 DevOps 相關的文件的書籤。主要特點包括： - **主題廣泛**：探索**20 多個**重要的 DevOps 主題，例如`Docker` 、 `Kubernetes` 、 `Terraform` 、 `Ansible` 、 `Jenkins` 、 `ELK` 、 `Cloud services` 、 `System Architecture` 、 `Monitoring`等。 - **有用的資源**：每個主題都附帶概述、官方文件連結、備忘錄和額外資源，以幫助您了解更多資訊。 - **實踐練習**：取得每個主題的基本範例，以便您可以嘗試所學內容。 - **進階範例**：一旦您掌握了基本概念，探索進階範例將進一步提高您的技能。 在以下部分中，我將引導您了解**devops-basics**儲存庫中的關鍵內容。 開始使用：火箭： -------- ### 什麼是 DevOps？ DevOps 將開發 (Dev) 和營運 (Ops) 結合起來，與傳統流程相比，提高軟體開發和交付的效率、速度和安全性。更靈活的軟體開發生命週期可以為企業及其客戶帶來競爭優勢（資料來源：GitLab） ### 入門 - ➡️[入門](https://github.com/tungbq/devops-basics/tree/main/getting-started/) ### 開發營運圖 ![](https://upload.wikimedia.org/wikipedia/commons/0/05/Devops-toolchain.svg) ### 開發營運工具鏈 - ➡️ [DevOps 工具鏈](https://en.wikipedia.org/wiki/DevOps_toolchain) ### 開發營運路線圖 - ➡️ [roadmap.sh/devops](https://roadmap.sh/devops) DevOps 主題 🔥 ----------- 我們的內容庫涵蓋了廣泛的 DevOps 主題，請在[**主題**](https://github.com/tungbq/devops-basics/tree/main/topics/)下探索它們。您也可以參考[**roadmap.sh/devops**](https://roadmap.sh/devops)查看每個主題在工具鏈中的位置 |專案 |內容 |官方文件 |動手實作 | | ：-------------- | :------------------------------------------------- --------------- ----------------------------------- --- | :------------------------------------------------- --------------- ----------------------------------- --------------- -------- | :------------------------------------------------- --------------- ----------------------------------- --------------- ----------------------------------- -------- | |安塞布爾 |[安塞布爾](https://github.com/tungbq/devops-basics/tree/main/topics/ansible/)| 📖 [docs.ansible.com](https://docs.ansible.com/) | ✔️ [ansible-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/ansible/basic/helloworld/ansible-helloworld.sh) | |碼頭工人 |[碼頭工人](https://github.com/tungbq/devops-basics/tree/main/topics/docker/)| 📖 [docs.docker.com](https://docs.docker.com/) | ✔️ [docker-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/docker/basic/docker-helloworld.sh) | | Kubernetes (k8s) | [k8s](https://github.com/tungbq/devops-basics/tree/main/topics/k8s/) | 📖 [kubernetes.io/docs](https://kubernetes.io/docs/home/) | ✔️ [k8s-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/k8s/basic/helloworld/k8s-helloworld.sh) | |伊斯蒂奧 |[伊斯蒂奧](https://github.com/tungbq/devops-basics/tree/main/topics/istio/)| 📖 [istio.io/latest/docs](https://istio.io/latest/docs/) | ✔️[入門](https://istio.io/latest/docs/setup/getting-started/)| |哎呀| [AWS](https://github.com/tungbq/devops-basics/tree/main/topics/aws/) | 📖 [docs.aws.amazon.com](https://docs.aws.amazon.com/) | ✔️ [EC2\_GetStarted](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html) | |頭盔|[掌舵](https://github.com/tungbq/devops-basics/tree/main/topics/helm/)| 📖 [helm.sh/docs](https://helm.sh/docs/) | ✔️ [helm-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/helm/basic/helm-helloworld.sh) | |詹金斯 |[詹金斯](https://github.com/tungbq/devops-basics/tree/main/topics/jenkins/)| 📖 [www.jenkins.io/doc](https://www.jenkins.io/doc/) | ✔️ [Jenkins-Hello-World.md](https://github.com/tungbq/devops-basics/tree/main/topics/jenkins/basic/Jenkins-Hello-World.md) | |地形 |[地形](https://github.com/tungbq/devops-basics/tree/main/topics/terraform/)| 📖 [terraform/文件](https://developer.hashicorp.com/terraform/docs)| ✔️ [terraform-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/terraform/basic/terraform-helloworld.sh) | |殼牌|[殼](https://github.com/tungbq/devops-basics/tree/main/topics/shell/)| 📖 [devdocs.io/bash](https://devdocs.io/bash/) | ✔️ [basic.sh](https://github.com/tungbq/devops-basics/tree/main/topics/shell/basic/basic.sh) | |去 |[去](https://github.com/tungbq/devops-basics/tree/main/topics/git/)| 📖 [git-scm.com/doc](https://git-scm.com/doc) | ✔️ [git-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/git/basic/hello-world/git-helloworld.sh) | |每個 |[每個](https://github.com/tungbq/devops-basics/tree/main/topics/elk/)| 📖 [www.elastic.co/guide](https://www.elastic.co/guide/index.html) | ✔️[任何/基本/helloworld](https://github.com/tungbq/devops-basics/tree/main/topics/elk/basic/helloworld/) | |阿爾戈CD |[阿爾古德](https://github.com/tungbq/devops-basics/tree/main/topics/argocd/)| 📖 [argo-cd.readthedocs.io](https://argo-cd.readthedocs.io/en/stable/) | ✔️ [argocd/基本](https://github.com/tungbq/devops-basics/tree/main/topics/argocd/basic/)| | Github-Action | [github 行動](https://github.com/tungbq/devops-basics/tree/main/topics/github-action/)| 📖 [docs.github.com/actions](https://docs.github.com/actions) | ✔️[建立第一個工作流程](https://docs.github.com/en/actions/quickstart#creating-your-first-workflow)| |亞搏體育appGitlab CI | gitlab-ci | [gitlab-ci](https://github.com/tungbq/devops-basics/tree/main/topics/gitlabci/) | 📖 [docs.gitlab.com/ee/ci](https://docs.gitlab.com/ee/ci/) | ✔️[建立第一個管道](https://docs.gitlab.com/ee/ci/quick_start/)| |格羅維 |[絕妙](https://github.com/tungbq/devops-basics/tree/main/topics/groovy/)| 📖 [groovy-lang.org](https://groovy-lang.org/documentation.html) | ✔️[絕妙/基本](https://github.com/tungbq/devops-basics/tree/main/topics/groovy/basic/)| |普羅米修斯|[普羅米修斯](https://github.com/tungbq/devops-basics/tree/main/topics/prometheus/)| 📖 [prometheus.io/docs](https://prometheus.io/docs/) | ✔️ [prometheus-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/prometheus/basic/prometheus-helloworld.sh) | |蟒蛇 |[蟒蛇](https://github.com/tungbq/devops-basics/tree/main/topics/python/)| 📖 [www.python.org/doc](https://www.python.org/doc/) | ✔️[蟒蛇/基本](https://github.com/tungbq/devops-basics/tree/main/topics/python/basic/)| |開放堆疊 |[開放堆疊](https://github.com/tungbq/devops-basics/tree/main/topics/openstack/)| 📖 [docs.openstack.org](https://docs.openstack.org/2023.2/) | ✔️ [openstack/helloworld](https://github.com/tungbq/devops-basics/tree/main/topics/openstack/basic/) | | Azure-DevOps |[天藍色](https://github.com/tungbq/devops-basics/tree/main/topics/azuredevops/)的📖 [learn.microsoft.com](https://learn.microsoft.com/en-us/azure/devops) | ✔️ [azuredevops/基本](https://github.com/tungbq/devops-basics/tree/main/topics/azuredevops/basic/)| |編碼 |[編碼](https://github.com/tungbq/devops-basics/tree/main/topics/coding/)| 📖[編碼](https://github.com/tungbq/devops-basics/tree/main/topics/coding/)| 🏃 進行中 | |建築|[建築](https://github.com/tungbq/devops-basics/tree/main/topics/architecture/)| 📖[架構/README.md](https://github.com/tungbq/devops-basic/blob/main/topics/architecture/README.md) | ⏩即將推出 | |包裝機|即將推出 | 📖 [www.packer.io](https://www.packer.io/) | ⏩即將推出 | |微服務|[微服務](https://github.com/tungbq/devops-basics/tree/main/topics/microservices/)| 📖 [AWS/微服務](https://aws.amazon.com/microservices/)| ⏩ 即將推出 | | HashiCorp 金庫 |即將推出 | 📖 [hashcorp/vault](https://developer.hashicorp.com/vault/docs) | ⏩ 即將推出 | - 還有**更多即將推出的主題...⏩**您可以關注此存儲庫以獲取更多最新內容 - 有關練習這些工具的其他資源，請造訪： [**devops-project**](https://github.com/tungbq/devops-project) 結論 -- [**devops-basics**](https://github.com/tungbq/devops-basics)儲存庫是您進行 DevOps 學習和實踐的首選資源。無論您是初學者還是經驗豐富的工程師，此儲存庫都可以提供您增強技能並在 DevOps 中取得成功所需的內容。立即探索並升級您的 DevOps 之旅！ 如果您發現此存儲庫有幫助，請考慮給它一顆星⭐️以表達您的讚賞。你能給我的任何星星都會幫助我更成長❤️ &lt; 表&gt; ``` <tr> ``` ``` <td> ``` ``` <a href="https://github.com/tungbq/devops-basics" style="text-decoration: none;"><strong>Star devops-basics ⭐️ on GitHub</strong></a> ``` ``` </td> ``` ``` </tr> ``` 謝謝您，編碼愉快！ 🔥 --- 原文出處：https://dev.to/tungbq/the-devops-basics-3ecm

0個讚   0留言 71瀏覽

令人難以置信的 JavaScript 動畫庫

概述 -- JavaScript 動畫庫已成為開發人員的必備工具，旨在透過迷人的互動式視覺元素來豐富 Web 應用程式。這些庫的發展極大地簡化了動畫過程，使其更易於存取。透過利用適當的函式庫，開發人員能夠製作令人印象深刻的動畫，從而增強網站和應用程式的參與度和使用者體驗。 動畫有可能大幅改變網站的美感和氛圍。當明智地利用它們來增強用戶體驗時，它們就會成為寶貴的資產。動畫在吸引註意力和增加網站停留時間方面特別有效，從而增加流量。 GSAP ------ ![總體規劃計劃](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p88xykg0uhg90oj4xckg.png) [GSAP（GreenSock 動畫平台）](https://greensock.com/gsap/)作為領先且強大的 JavaScript 動畫庫脫穎而出，專為速度和效率而設計。它擁有一系列功能，包括基於時間軸的動畫、SVG 支援和緩動功能。 GSAP 提供了各種預先設計的工具和功能，即使是網頁動畫新手也能快速有效地建立複雜的動畫。 GSAP 有助於跨 jQuery、Canvas 和 SVG 建立精美的高效能動畫。它與其他軟體和函式庫相容，例如[PixiPlugin](https://greensock.com/docs/v2/Plugins/PixiPlugin) 、 [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) 、 [EaseJS](https://createjs.com/easeljs)等。 ### 好處 - 輕便快捷 - 廣泛的功能 - 可透過插件擴展 - 適應各種螢幕尺寸 - 支援所有主流瀏覽器 Anime.js ----- ![動漫.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9suyvmlz3kzt9tooinls.png) [Anime.js](https://animejs.com/)以其簡單、速度和多功能性而聞名。這個緊湊的庫簡化了動畫過程，使開發人員能夠以最少的努力製作出視覺上引人注目的動畫。 Anime.js 支援多種效果，例如縮放、變形和旋轉，為開發人員提供了輕鬆建立複雜時間軸和動畫的工具。 ### 好處 - 直覺的API - 結構緊湊、適應性強 - 豐富的功能集 - 插件就緒架構 - 支援所有主流瀏覽器 Three.js ---- ![三.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqy0o2cm5obswsc9kp3y.png) [Three.js](https://threejs.org/)致力於產生 3D 視覺效果，提供一套強大的功能和工具。它建立在[WebGL](https://get.webgl.org/)之上，優化 GPU 使用以實現快速渲染，確保跨裝置（包括資源有限的裝置）的流暢效能。 Three.js 的多功能性允許建立廣泛的 3D 圖形和動畫，從簡單的形狀到複雜的模型。 Popmotion.io ------------ ![popmotion.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9u79jz8iilrbp65zx4h5.png) [Popmotion](https://popmotion.io/)在設計中優先考慮簡單性和易用性。它用[TypeScript](https://www.typescriptlang.org/)編寫，與任何接受數位輸入的 API 相容，提供簡單的 API 並支援主要瀏覽器。 Popmotion 的架構為[Framer Motion](https://www.framer.com/motion/)中的動畫提供支持，並且可以透過外掛程式進行擴充。 ### 好處 - 使用者友善的介面 - 可擴充的插件框架 - 響應式設計 - 支援所有主流瀏覽器 反應彈簧 ---- ![反應彈簧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny6fonq8dw3udlcejqfn.png) [React-spring](https://www.react-spring.dev/)專為 React 應用程式量身定制，透過其簡單的 API 提供跨所有主要瀏覽器的無縫動畫體驗。它不僅迎合 Web 環境，還支援 React-Native、React-Three-Fiber、React-Konva 和 React-ZDog。它的 TypeScript 基礎有助於輕鬆整合到現有專案中。 ### 好處 - 簡單易懂 - 啟用插件以增加功能 - 跨裝置回應 - 支援所有主流瀏覽器 Vivus - ![活](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4zdqw3xeq1vxrrlgx1u.png) [Vivus](https://maxwellito.github.io/vivus/)專注於 SVG 動畫，具有易於使用的 API，確保跨所有主要瀏覽器的兼容性。它支援各種動畫樣式，例如延遲、同步或 OneByOne，並允許為每個 SVG 路徑自訂動畫腳本。 ### 好處 - 毫不費力地實施 - 插件擴充性 - 專用的 SVG 動畫功能 - 支援所有主流瀏覽器 Mo.js ----- ![Mo.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3rhzp2ggqfy8t61fvkd.png) [Mo.js](https://mojs.github.io/)是一個強大且適應性強的 JavaScript 動畫庫，具有簡單的 API 和瀏覽器支援。它以其高性能動畫和與密度無關的效果而著稱，確保在任何設備上都有出色的視覺品質。 Mo.js 提供了廣泛的動畫建立工具，包括用於動畫控制的播放器、曲線編輯器和用於自訂緩動和編輯的時間軸編輯器。 ### 好處 - 強大而靈活 - 直覺的API - 插件相容 - 專為響應式環境設計 - 支援所有主流瀏覽器 結論 -- 為您的專案選擇正確的動畫庫可能是一項艱鉅的任務。還有許多其他 JavaScript 動畫庫可用，每個庫都具有獨特的特性和功能。 您是否有此處未提及的最喜歡的圖書館？請在下面的評論中分享。我總是渴望探索新工具並擴展我的工具包！ 如果您發現這有幫助並願意給我的專案一顆星以支持，我將不勝感激！ [黏土主題🚀](https://github.com/lilxyzz/clay-theme) --- 原文出處：https://dev.to/lilxyzz/incredible-javascript-animation-libraries-30on

0個讚   0留言 137瀏覽

超新手資料庫簡介

無論您**剛開始**學習程式設計還是**已經有**一些經驗，我很確定您已經問過自己（或其他人）資料庫到底是什麼，如何處理它，關聯式資料庫和資料庫之間有什麼區別？和非關聯式資料庫及其用途。 當談到程式設計時，感覺我們的疑慮無窮無盡，有時我們會在資訊的海洋中迷失。我將討論每個初學者在建立第一個資料庫時應該了解的一些概念。我希望至少能教您一些有關資料庫的知識，資料庫是軟體最重要的部分之一。 - [什麼是 SQL？](#what-is-sql) 什麼是資料庫？ ------- 在一切之前，了解什麼是**資料**很重要。嗯，它是一個值，例如 21。但是除非我們對其進行組織並建立訊息，否則該資料將沒有意義。例如，這個數字可以是年齡，可以是登入您網站的總人數，甚至可以是您所在州的號碼。現在，如果我告訴你我們有資料： `age = 21` ，我們幾乎可以理解值 21 是某人的年齡。這就是我們所說的**訊息**。 知道了這一點，我可以告訴你資料庫是有組織的資訊的集合。我喜歡把資料庫想像成類似搬到新家的過程。例如，當我們搬家時，將東西裝進盒子裡是很正常的。我們會有一個盒子裝書，一個盒子裝衣服，另一個盒子裝電子產品。最後，我們把所有東西都裝進卡車，運到我們的新家。 在此範例中，我們的資料庫將是卡車，因為我們有許多特定物品的盒子 - 有組織的資訊的集合。該資訊是結構化的並且通常儲存在電腦系統中。 （我們使用資料庫來儲存、存取和維護資料。） 為了控制資料庫，我們將使用所謂的資料庫管理系統（DBMS），該軟體用於可視化資料庫的表、其訊息，以及我們還可以執行查詢（對資料庫執行操作的命令）和許多功能。其他事情。它基本上是用戶（使用資料庫的人）和資料庫本身之間的介面。 可以說，每次建立、刪除、更新和讀取等等，我們都會處理 DBMS。 ![顯示資料庫管理系統如何運作的圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmyuwc2x8ovlc5w376im.jpg) 資料庫管理系統範例： - MySQL - SQL伺服器 - 甲骨文資料庫 有很多選擇，我們應該選擇更適合我們和專案的一種。 資料庫類型 ----- 每個初學者都應該了解的最重要的資料庫類型是： - 關係型資料庫 - 非關係型資料庫 ### 關係型 這種類型的資料庫是使用具有列和行的表來建構的，如下圖所示，我們使用 SQL 來處理這種結構。 在表格中，我們將有： - 列，定義每條資料是什麼（ID、姓名、年齡...）及其類型； - 行，保存給定的資料。 ![學生資料庫表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4qx9y567xoz1kasayqc.png) 表中的每一行都是一筆具有唯一 ID 的記錄，我們稱之為**鍵**。例如，在這個表中，鍵是數字1、2、3…我們可以看到每筆記錄都有自己的鍵，用來標識自己。 每個初學者都應該了解至少三種類型的密鑰： - **鍵**：它基本上是表中的一列或多列，負責以獨佔方式辨識行。 - **主鍵**：這種類型將確保暫存器的**唯一性**，將在表之間的關係上引用暫存器並對其**進行索引**，這提高了 DBMS 的效率。 - **外鍵**：它是一個使用每個表的主鍵連接表的列。我們使用這種類型的鍵來建立表之間的關係。重要的是要理解，具有外鍵的表稱為**引用表**，而被引用的表稱為**引用表**或**父表**。 ### 非關係型 非關聯式資料庫，也稱為NoSQL（現在是Not Only SQL），是一種不使用表格及其列和行作為組織方案的資料庫。它提供了更大的靈活性，因為您不必像我們在關聯式資料庫上所做的那樣擔心建立表。 NoSQL 上的儲存經過最佳化，可以自我調整以滿足各種需求。例如，可以將資料儲存為鍵/值、JSON 文件或圖形。 NoSQL 資料庫的建立是為了解決人們直到 90 年代末期才遇到的問題，即難以設計能夠滿足使用關聯式資料庫所需的規模和敏捷性的資料庫，而當時無法做到這一點。 ![SQL 與 NoSQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f8ox9vms8ld9ebo1vpv.png) NoSQL 最重要的功能之一是： - 更高的可擴展性 - 沒有複雜的關係 - 降低成本 非關係型資料庫也有類型，其中兩種是： - **鍵值**：最常見的一個。資料庫中的每個專案都將儲存為屬性名稱（或“鍵”）及其值。例如： `{"name": "Maria"}` 。鍵是“name”，值是“Maria”。在這些情況下最常使用的資料庫是**Redis** 、 **DynamoDB**和**Berkeley DB** 。 - **文件**：將每個金鑰與其文件一起存儲，其主要特徵是將所有資訊包含在一個文件中。該文件通常是 JSON，但也可以是 XML。最著名的文件資料庫是 MongoDB 關於此類資料庫的更多資訊有很多，但這是您開始之前必須了解的基礎知識！除此之外，不要讓這個開始阻止您深入挖掘以了解更多資訊。 什麼是 SQL？ -------- SQL 代表**結構化查詢語言**，這是一種用於處理 70 年代左右在 IBM 實驗室建立的資料庫的程式語言。一段時間後，它成為資料管理的模式。 我們使用這種程式語言在資料庫上執行查詢，並且可以使用各種參數從資料庫中檢索、建立或刪除資訊。我們只需要遵循語法，就像任何其他程式語言一樣。 SQL 有許多**指令**，但最重要的是： - **SELECT** ：搜尋資料庫表中的行。 - **INSERT** ：在表中插入新行。 - **UPDATE** ：用於更新表中已存在的資料。 - **DELETE** ：刪除一個暫存器。 重要的是，我們將此命令與其他參數一起使用，以便我們可以使查詢非常具體。在 Capslock 上使用 SQL 是一種約定。 SQL 還具有一些我們可以在查詢中新增的條件，以便修改將傳回的暫存器，例如： - **FROM** ：用於表示將查詢哪個表。 - **ORDER BY** ：用於以特定順序組織傳回的資料。 - **WHERE** ：用於**指定傳回資料的條件**。例如，如果我們想查看表中年齡超過 18 歲的用戶，我們將使用「where」。 SQL 中還有許多其他命令，但這是我們建立第一個表並學習建立第一個 CRUD（代表建立、讀取、更新和刪除）所需的基本命令。 就是這樣！ ----- 透過這篇文章我們了解了資料庫的基礎知識，例如它是什麼、它的類型以及什麼是 SQL。現在，我們必須學習如何建立一個主題，該主題將在本系列的下一篇文章中介紹。 這個內容是根據我在 100 天的程式碼中的筆記建立的，在這段期間我了解了資料庫、PHP 和 Laravel，所以我真的很自豪，因為在開始挑戰之前我對此幾乎一無所知。另外，如果需要的話，請隨時向我提問！ 感謝那些審查我的文章並幫助我到達這裡的人： - @danielhe4rt - @cherryramatis - @reenatoteixeira --- 原文出處：https://dev.to/basementdevs/database-for-newbies-n46

0個讚   0留言 166瀏覽

在各種部落格平台，放進自己的的程式碼

在本文中，我將概述各種[部落格平台及其程式碼注入功能](https://bloggingplatforms.app/blog/blogging-platforms-with-the-best-code-injection)。 想像自己是個博主，無論您是經驗豐富還是剛起步；你不僅僅是一個文字大師。您擁有 Web 開發技能，並且渴望控制線上主頁的外觀、感覺和功能。這就是部落格平台上的程式碼注入可以發揮作用的地方！ 我將指導您使用[最好的部落格平台](https://bloggingplatforms.app/)來注入自訂程式碼。 **為什麼程式碼注入很重要以及它如何使您受益** 讓我們分解一下：程式碼注入意味著在您的部落格中加入自訂程式碼（如 HTML、CSS 或 JavaScript）。此功能很有用，因為： - **獨特的設計：**擺脫模板並個性化您部落格的視覺效果。 - **特殊功能：**考慮互動式元素、自訂小工具或獨特的動畫。 - **資料追蹤：**整合您喜歡的分析工具以獲得深入的見解。 - **功能改進：**優化頁面載入速度或實現複雜功能。 ![為部落格平台注入程式碼的好處](https://bloggingplatforms.app/media/posts/blogging-platforms-with-the-best-code-injection/benefits-of-code-injection.webp) **具有最佳程式碼注入選項的 Bogging 平台** --------------------------- ### **WordPress：程式碼注入動力源** 作為內容管理系統 (CMS) 領域無可爭議的皇帝， [WordPress](https://wordpress.com/)擁有無與倫比的程式碼注入能力。 其**主題自訂**功能可讓您直接存取主題文件，使您能夠透過主題編輯器無縫整合自訂程式碼片段。 此外，**程式碼片段**和**插入頁首和頁尾等**[WordPress 外掛](https://wordpress.com/plugins)提供了使用者友善的介面，用於將程式碼注入部落格佈局的特定部分，例如頁首、頁尾或側邊欄。 #### **探索 WordPress 的程式碼注入功能：** - **主題編輯：**對於技術嫻熟的人來說，WordPress 透過內建主題編輯器授予對主題文件的完全存取權。這種精細的控制使您能夠將程式碼直接注入到模板檔案（header.php、footer.php 等）中，從而對部落格的佈局和功能進行深度自訂。 - **外掛程式：**廣泛的 WordPress 外掛程式生態系統提供了大量的程式碼注入工具。程式碼片段和插入頁首和頁尾等插件提供了用戶友好的介面，用於將程式碼片段注入部落格的特定區域，滿足所有技術背景的用戶的需求。這些插件通常配備程式碼語法突出顯示和錯誤檢查等功能，從而簡化程式碼注入過程。 #### **重要考慮因素：** - **主題相容性：**直接注入主題檔案的程式碼本質上連結到您正在使用的特定主題。如果切換主題，您可能需要修改或重新註入程式碼片段。 - **插件依賴：**雖然插件簡化了程式碼注入，但它們引入了外部依賴項。確保您選擇的外掛程式得到積極維護並與您的 WordPress 版本相容。 --- ### **Webflow：透過視覺編碼為精通設計的部落客提供支持** [Webflow](https://webflow.grsm.io/gr15bvbdlvfo)提出了一個獨特的主張：一個**視覺化開發平台**，讓您無需編寫任何程式碼即可建立自訂網站。正因為如此，Webflow 是[藝術家最好的部落格平台](https://bloggingplatforms.app/blog/best-blog-platforms-for-artists)之一。 然而，對於那些尋求更精細控制的人來說， [Webflow](https://webflow.grsm.io/gr15bvbdlvfo)提供了一個程式碼注入功能，恰當地命名為**「自訂程式碼」** 。此功能可讓您將程式碼片段直接注入網站的專案設定中，從而可以微調特定的設計元素和功能。 #### **釋放 Webflow 的程式碼注入潛力：** - **自訂程式碼：** Webflow 的自訂程式碼功能可讓您存取專案設定中指定的程式碼注入區域。在這裡，您可以注入針對網站設計和功能的特定方面的程式碼片段，例如加入自訂動畫、整合第三方服務或修改現有元素的行為。 - **Visual Canvas：** Webflow 的主要優點在於其視覺化開發介面。您無需直接操作程式碼即可實現顯著程度的自訂。然而，自訂程式碼為那些尋求更深入研究並釋放程式碼注入全部威力的人提供了一個逃生口。 #### **重要考慮因素：** - **學習曲線：**雖然 Webflow 提供了視覺化開發介面，但了解基本的 HTML、CSS 和 JavaScript 對於有效的程式碼注入非常有益。 - **範圍有限：**與 WordPress 等成熟的 CMS 相比，Webflow 的程式碼注入功能旨在微調設計元素和功能，而不是進行廣泛的結構修改。 --- ### **WebWave：為新手部落客簡化程式碼注入** [WebWave](https://webwave.me/ref/14072231082)是另一個視覺化網站建立器，它迎合了那些在用戶友好的拖放功能和注入自訂程式碼的能力之間尋求平衡的人。其**程式碼編輯器**可讓您將程式碼片段注入網站佈局的特定部分，從而提供個人化的途徑，而無需廣泛的編碼專業知識。 **探索 WebWave 的程式碼注入功能：** - **程式碼編輯器：** WebWave 的程式碼編輯器可讓您將程式碼片段直接注入網站頁面的指定部分。這種有針對性的方法可讓您自訂特定元素，例如新增自訂按鈕、整合小工具或修改現有功能。 - **初學者友善的介面：**程式碼編輯器提供了一個相對用戶友好的介面，具有語法突出顯示和基本的錯誤檢查功能，即使對 Web 開發有基本了解的部落客也可以使用它。 #### **重要考慮因素：** - **範圍有限：** WebWave 的程式碼注入功能著重於在地化修改，而不是對網站進行全面的結構變更。 - **外部依賴：**依賴 WebWave 的程式碼編輯器意味著一定程度的平台鎖定。如果您要遷移網站，自訂程式碼片段可能需要修改。 --- ### **Typedream：無程式碼環境中的程式碼注入** [Typedream](https://typedream.com/?via=blogplatforms)將自己定位為無程式碼網站建立器，在建立精美網站時優先考慮易用性。然而，它提供了有針對性的程式碼注入功能來擴展其功能並允許超出預定模板的自訂。 #### **Typedream 的程式碼注入潛力：** - **嵌入元素：**透過嵌入程式碼片段，將第三方服務、小工具或自訂元素整合到 Typedream 網站的特定區域。 - **功能增強：**透過自訂互動、動畫或獨特的視覺效果擴展 Typedream 的內建功能。 #### **重要考慮因素：** - **無程式碼優先：** Typedream 的優勢在於其簡單性和使用者友善性。程式碼注入可作為高級使用者工具使用，而不是其主要的客製化方法。 --- ### **Unicorn：程式碼注入以實現靈活性** [Unicorn Platform](https://unicornplatform.com/?via=bloggingplatforms)透過其拖放介面簡化了網站開發流程。此外，它還提供**程式碼注入**功能，可讓您透過將程式碼片段直接插入特定部分來進一步自訂您的網站。 #### **Unicorn 的程式碼注入潛力：** - **有針對性的客製化：** Unicorn 的程式碼注入功能可讓您修改單一元件或為您的網站加入新功能。整合第三方服務、建立自訂動畫或根據需要調整樣式。 - **使用者友善的介面：** Unicorn 對簡單性的關注延伸到了其程式碼注入功能，使其對於具有基本 Web 開發知識的使用者來說易於使用。 #### 重要考慮因素： - **平台依賴：**請記住，注入 Unicorn 的自訂程式碼片段依賴於平台。如果您決定遷移站點，程式碼相容性可能會成為一個問題。 --- ### **Dorik：無程式碼，但具有客製化潛力** [Dorik](https://dorik.com/?ref=can-burak72)將自己定位為專注於無程式碼原則的未來網站建立者。它的目的是擺脫傳統的頁面建立器。雖然 Dorik 並沒有專注於程式碼注入，但它在其新穎的框架中提供了客製化潛力。 #### **Dorik 的客製化潛力：** - **程式碼探索：**期望在 Dorik 上採用更具實驗性的客製化方法，可能涉及獨特的視覺化工具，而不是直接程式碼注入。 #### **重要考慮因素：** - **不斷發展的平台：** Dorik 相對較新，因此其客製化理念可能會隨著時間的推移而不斷發展。隨時了解他們的發展路線圖以獲取更多見解。 --- ### **Wix：用於擴展功能的程式碼注入** [Wix](https://www.wix.com/)是一種流行的拖放式網站建立器，透過其開發人員工具集（稱為**Corvid by Wix（以前稱為 Velo））**提供程式碼注入功能。這個先進的平台使您能夠透過編寫自訂 JavaScript 程式碼和整合外部 API 來擴展 Wix 網站的功能。 #### **利用 Corvid（以前稱為 Velo）的力量：** - **以 JavaScript 為中心：** Corvid 主要依賴 JavaScript 來實作自訂功能。對 JavaScript 的深入理解對於充分發揮其潛力至關重要。 - **API 整合：** Corvid 可以整合第三方服務和 API，從而增強您網站的功能，超越 Wix 內建工具的限制。 - **專用開發環境：**存取 Corvid 需要轉向專用開發環境，這可能會為非程式設計師帶來更陡峭的學習曲線。 #### **重要考慮因素：** - **陡峭的學習曲線：**有效利用 Corvid 需要 JavaScript 的應用知識和熟悉程式設計概念。 - **Wix 生態系內的有限控制：雖然很靈活，但 Corvid 的功能僅限於 Wix 生態系的範圍內。**廣泛的網站結構修改可能會受到限制。 --- ### **Squarespace：在易用性和客製化之間取得平衡** [Squarespace](https://www.squarespace.com/)以其用戶友好的介面和拖放功能而聞名，提供了一種經過衡量的程式碼注入方法。其**程式碼注入**功能可讓您將程式碼片段插入網站的指定區域，從而無需具備豐富的編碼知識即可實現有針對性的自訂。 #### **釋放 Squarespace 的程式碼注入潛力：** - **有針對性的客製化：** Squarespace 的程式碼注入功能適合特定的修改。嵌入自訂字體、整合社交媒體來源或加入自訂按鈕來增強部落格的外觀和感覺。 - **初學者友善的介面：** Squarespace 的程式碼注入功能優先考慮可存取性。即使具有最少編碼經驗的使用者也可以導航介面並實現基本的程式碼修改。 #### **重要考慮因素：** - **範圍有限：** Squarespace 的程式碼注入主要專注於在地化自訂，而不是對網站進行徹底的結構變更。 - **平台依賴：**注入 Squarespace 的自訂程式碼片段與平台相關。如果您要遷移網站，程式碼相容性可能會成為問題。 --- ### **Pixpa：攝影師和創意人員的程式碼注入** [Pixpa](https://www.pixpa.com/signup?refcode=BURAK10)專門為尋求展示作品平台的攝影師和創意專業人士提供服務。雖然其核心功能圍繞著令人驚嘆的視覺效果，但 Pixpa 為尋求額外控制的人提供了**程式碼注入**功能。 #### **Pixpa 的程式碼注入功能：** - **增強的功能：**注入程式碼片段以整合第三方服務，例如分析工具、支付網關或自訂聯絡表單，從而擴展部落格的功能。 - **易於使用：** Pixpa 的程式碼注入功能提供了使用者友善的介面和清晰的說明，使得非程式設計師也可以輕鬆使用。 #### **重要考慮因素：** - **有限的客製化：** Pixpa 的程式碼注入主要針對功能增強而不是廣泛的設計修改。 - **專注於利基市場：**雖然 Pixpa 非常適合創意人士，但它可能無法像更通用的平台那樣有效地迎合所有部落格利基市場。 --- ### **PageCloud：用於有針對性的增強的程式碼注入** [PageCloud](https://www.pagecloud.com/home-partners?gspk=Y2FuYnVyYWtzb2Z5YWxpb2dsdTMwNTQ&gsxid=Is2tDreeXpFm&utm_campaign=affiliate-referral-program&utm_medium=partner&utm_source=canburaksofyalioglu3054)將自己定位為具有程式碼注入功能的用戶友好的網站建立器。其**自訂程式碼**功能可讓您將程式碼片段注入網站的特定部分，從而實現有針對性的自訂。 #### **探索 PageCloud 的程式碼注入選項：** - **特定部分：** PageCloud 的程式碼注入著重於修改網站的指定部分，例如頁首、頁尾或側邊欄。這種方法非常適合整合小部件、加入自訂按鈕或微調佈局。 - **初學者的介面：** PageCloud 透過其程式碼注入功能優先考慮易用性。清晰的說明和用戶友好的介面使得那些具有最少編碼經驗的人也可以使用它。 #### **重要考慮因素：** - **範圍有限：**與 Squarespace 類似，PageCloud 的程式碼注入功能面向局部增強，而不是廣泛的結構修改。 - **平台依賴性：**自訂程式碼片段依賴PageCloud。從平台遷移可能需要程式碼調整或重新註入。然而，這可以被視為 PageCloud 提供的易用性和用戶友好介面的權衡。 --- ### **Blogger：具有基本程式碼注入功能的免費平台** [Blogger](https://www.blogger.com/)上提供了基本等級的程式碼注入功能，Blogger 是 Google 的免費部落格平台。透過其**HTML/CSS 編輯**功能，您可以存取和修改部落格範本的底層程式碼。 #### **Blogger 的程式碼注入潛力：** - **直接模板編輯：**對於熟悉程式碼的人，Blogger 授予對其模板文件的存取權限，從而可以直接修改控制部落格佈局和樣式的 HTML 和 CSS 程式碼。 - **功能有限：** Blogger 的程式碼注入功能是針對基本自訂，主要涉及編輯現有程式碼，而不是注入全新的功能。 #### **重要考慮因素：** - **所需技術專長：**直接模板編輯需要對 HTML 和 CSS 有深入的了解。對於初學者來說，這種方法可以呈現更陡峭的學習曲線。 - **控制有限：**與付費平台相比，Blogger 的免費方案對客製化施加了限制。 --- ### **Framer：為 Web 開發人員提供程式碼驅動的客製化** [Framer](https://www.framer.com/)是一個強大的視覺設計平台，整合了 React 編碼功能，為 Web 開發人員提供了一個遊樂場。雖然 Framer 主要針對應用程式開發，但其以程式碼為中心的方法為在其生態系統中建立部落格的人員提供了廣泛的客製化可能性。 #### **探索 Framer 的程式碼注入功能：** - **以開發人員為中心的客製化：**使用 Framer，您基本上可以使用 React 元件建立博客，從而可以對從佈局到互動的各個方面進行細粒度控制。 - **無限的可能性：** Framer 的程式碼注入幾乎是無限的，使您能夠製作一個突破傳統設計和功能界限的部落格。 #### **重要考慮因素：** - **陡峭的學習曲線：**有效利用 Framer 需要對 React 和 Web 開發原理有深入的了解。 - **資源密集：**與程式碼密集度較低的平台相比，在 Framer 中開發部落格可能需要更多時間和開發資源。 --- ### **Ghost：為精通程式碼的用戶提供開源靈活性** [Ghost](https://ghost.org/)以專注於純粹的部落格而聞名，提供了對開發人員有吸引力的開源靈活性。其主題結構利用 Handlebars 模板語言，允許全面的程式碼注入和客製化。 #### **Ghost的程式碼注入潛力：** - **完整的主題自訂：** Ghost 的開源特性可讓您直接修改主題文件，從而對部落格的結構和設計提供高階的控制。 - **社區驅動的支持：** Ghost 受益於蓬勃發展的開發者社區，該社區共享主題、程式碼片段和知識，培育了豐富的生態系統。 #### **重要考慮因素：** - **技術專長：** Ghost 中的有效程式碼注入需要熟悉 Handlebars 範本和 Web 開發原則。 - **自架：**為了實現完全客製化的潛力，自架您的 Ghost 部落格可能是必要的，這會帶來額外的技術開銷。 --- ### **曝光：攝影師的程式碼注入** [Exposure](https://exposure.co/)專注於視覺敘事，並擁有時尚的介面。它使攝影師和那些有視覺傾向的人能夠建立令人驚嘆的部落格來展示他們的作品。 Exposure 提供了注入自訂程式碼的能力，為進一步個性化您的線上形像打開了大門。 #### **了解 Exposure 的程式碼注入功能：** - **有針對性的調整：**將自訂程式碼注入您的 Exposure 部落格的特定區域，例如頁首、頁尾或單一頁面。 - **功能增強：**透過整合第三方工具或自訂元素來增強您的博客，擴展 Exposure 的內建功能。 #### **重要考慮因素：** - **社群支援：**考慮專門為 Exposure 上的程式碼注入量身定制的資源的可用性，因為其社群可能比某些其他平台小。 --- ### **Hashnode：為開發者部落客客製化的程式碼注入解決方案** [Hashnode](https://hashnode.com/)是一個為開發人員量身定制的社群驅動的部落格平台。它是[**最好的開發者部落格平台**](https://bloggingplatforms.app/blog/best-blogging-platforms-for-developers)之一。 它優先考慮技術討論和知識共享。使用 Hashnode，您可以注入自訂程式碼來客製化部落格的外觀和功能。 #### **探索Hashnode的程式碼注入功能：** - **自訂樣式：**使用自訂 CSS 程式碼修改 Hashnode 部落格的外觀，創造與您的品牌相符的獨特外觀。 - **嵌入和小部件：**整合程式碼片段以顯示程式碼區塊、可嵌入內容和動態小部件，豐富您的技術寫作。 #### **重要考慮因素：** - **利基焦點：** Hashnode 最適合開發人員和技術部落客。它可能不是一般興趣部落格的理想平台。 --- ### **Odoo：模組化 CMS 中的程式碼注入** [Odoo](https://www.odoo.com/)是一個龐大的開源業務管理套件，包括網站建立器和部落格模組。它提供了注入程式碼的能力，允許在 Odoo 生態系統中進行客製化。 #### **Odoo 的程式碼注入潛力：** - **深度整合：**自訂 Odoo 模組（包括您的部落格）以與特定業務工作流程或流程保持一致。 - **框架熟悉度：** Odoo 中的有效程式碼注入需要了解其基於 Python 的開發框架。 **重要考慮因素：** - **以企業為中心：** Odoo 的複雜性使其最適合擁有大量 IT 資源的企業，而不是個人部落客。 --- ### **Jimdo：有限的程式碼注入** [Jimdo](https://www.jimdo.com/)是一個用戶友好的網站建立器，提供有限程度的程式碼注入。您可以將基本 HTML 片段新增至網站的某些區域。 #### **重要考慮因素：** - **簡單性：** Jimdo 優先考慮易用性而不是廣泛的客製化選項。 - **最適合初學者：** Jimdo 上的程式碼注入可能適合簡單的修改，但無法滿足需要高級自訂的用戶的需求。 --- ### **Weebly：用於基本客製化的定向程式碼注入** [Weebly](https://www.weebly.com/)是另一個受歡迎的拖放網站建立器，提供有針對性的程式碼注入功能。其**嵌入程式碼**功能可讓您將 HTML 和 JavaScript 片段插入網站的特定部分，從而實現基本的修改和整合。 #### **Weebly 的程式碼注入潛力：** - **具體增強功能：**利用 Weebly 的程式碼注入來整合第三方小工具，例如社群媒體來源或即時聊天工具。 - **適合初學者：** Weebly 的嵌入程式碼功能為基本程式碼插入提供了一個簡單的介面。 #### **重要考慮因素：** - **Weebly 的程式碼注入範圍：**與 Squarespace 和 PageCloud 一樣，Weebly 的程式碼注入專注於局部增強而不是廣泛的結構變化。 - **平台相容性：**注入 Weebly 的自訂程式碼與平台綁定。遷移可能需要程式碼調整或重新註入。 --- ### **Tumblr：主題客製化的程式碼注入** [Tumblr](https://www.tumblr.com/)是一個以其強大的社群和社交功能而聞名的微博平台，允許透過其主題自訂選項進行一定程度的程式碼注入。 #### **Tumblr 的程式碼注入潛力：** - **主題修改：**直接存取主題檔案可讓您注入 HTML、CSS 和 JavaScript 程式碼。自訂 Tumblr 部落格的佈局、樣式和功能。 - **創意人員的靈活性：** Tumblr 的開放主題結構和對視覺表達的重視使其成為渴望獨特線上形象的創意人士的熱門選擇。 #### **重要考慮因素：** - **熟悉語法：**修改 Tumblr 主題需要對 HTML、CSS 和 JavaScript 語法有基本的了解。 - **社群驅動：** Tumblr 擁有龐大的主題開發人員社區，他們經常分享程式碼片段和自訂技巧。 --- ### **Tilda：帶有程式碼注入選項的視覺設計** [Tilda](https://tilda.cc/)是一個強調設計的模組化網站建立器，在其**零區塊**功能中提供程式碼注入功能。此功能可讓您插入自訂程式碼，提供超越其視覺化建構器工具的靈活性。 #### **Tilda 的程式碼注入潛力：** - **視覺 + 程式碼：**在 Tilda 直覺的拖放介面和程式碼注入的強大功能之間取得平衡。建立獨特的元素或修改現有區塊以進行細粒度控制。 - **有針對性的增強：**透過整合、自訂動畫或獨特的設計元素擴展 Tilda 的功能。 #### **重要考慮因素：** - **零塊特定：** Tilda 上的程式碼注入主要側重於零塊功能內的自定義，與直接主題編輯相比，提供了更結構化的方法。 - **設計優先：Tilda 專注於將拖放建構器作為主要設計工具。**程式碼注入是擴展定制的一個有價值的補充功能。 --- ### **SmugMug：針對以視覺為中心的攝影師的有限程式碼注入** [SmugMug](https://www.smugmug.com/)是一個專門為攝影師展示和銷售作品而設計的平台。它提供有限的程式碼注入功能，主要用於基本修改。 #### **SmugMug 的程式碼注入潛力：** - **有限制的自訂：**雖然 SmugMug 允許進行一些 HTML 和 CSS 自訂，但其主要重點是視覺驅動的模板和主題。 - **適合攝影師：** SmugMug 的核心受眾可能會發現程式碼注入不再那麼重要，因為該平台優先考慮易用性來展示令人驚嘆的視覺效果。 #### **重要考慮因素：** - **特定領域：** SmugMug 非常注重影像展示和銷售功能，為攝影師提供了良好的服務。對於 SmugMug 的核心用戶來說，大量的程式碼注入可能不是優先考慮的事情。 --- ### **Cargo：創意組合的程式碼注入** [Cargo](https://cargo.site/)以其極簡設計和強調展示創意作品而聞名，允許一定程度的程式碼注入。此功能使用戶能夠在預先建立的模板之外個性化他們的線上作品集。 #### **Cargo 的程式碼注入潛力：** - **有針對性的自訂：**注入程式碼片段可以進行自訂，例如自訂字體、獨特的佈局或互動式元素，以增強您的創意作品的呈現。 #### **重要考慮因素：** - **範圍有限：** Cargo 上的程式碼注入最適合在地化增強，而不是對您的產品組合進行徹底的結構性變更。 --- ### **Adobe Portfolio：為視覺藝術家提供有限的程式碼注入** [Adobe Portfolio](https://portfolio.adobe.com/)與 Adobe 的 Creative Cloud 套件集成，主要專注於視覺作品集的無縫展示。它提供有限的程式碼注入功能，通常用於較小的樣式調整或嵌入第三方內容。 #### **Adobe Portfolio 的程式碼注入潛力：** - **增強視覺效果：**利用程式碼注入來自訂工作的呈現、加入微妙的動畫或嵌入互動元素。 - **專注於集成：** Adobe Portfolio 優先考慮與其他 Adobe Creative Cloud 服務的集成，而不是廣泛的程式碼驅動自訂。 #### **重要考慮因素：** - **視覺第一：** Adobe Portfolio 的核心優勢在於其易用性和專注於令人驚嘆的視覺呈現。程式碼注入能力是次要的。 --- ### **Vev：平衡視覺設計與程式碼注入** [Vev](https://www.vev.design/?gspk=Y2FuYnVyYWtzb2Z5YWxpb2dsdTMwNTQ&gsxid=6ql2Ybh49e9T&utm_campaign=affiliate&utm_id=VevPartners&utm_medium=partnerstack&utm_source=partnerstack)在直覺的視覺化設計工具和程式碼注入的靈活性之間提供了平衡。其專用的程式碼注入區域可實現有針對性的客製化和整合。 #### **Vev 的程式碼注入潛力：** - **自訂元素：**在 Vev 視覺建構器的框架內建立獨特的元素或修改現有元素，以獲得客製化的外觀和感覺。 - **第三方整合：**透過使用程式碼無縫整合外部服務和小部件來擴展部落格的功能。 #### **重要考慮因素：** - **混合方法：** Vev 迎合了既尋求視覺化建構器的便利性又尋求目標程式碼注入修改的強大功能的使用者。 --- ### **Voog：高級客製化的程式碼注入** [Voog](https://www.voog.com/)是一個多語言網站建立器，為開發人員和尋求對其網站結構和設計進行廣泛控制的人員提供強大的程式碼注入功能。 #### **Voog 的程式碼注入潛力：** - **完整的主題控制：** Voog 的開放式結構允許直接修改主題文件，從而實現廣泛的客製化可能性。 - **API 整合：**利用 Voog 的 API 整合自訂功能並簡化工作流程。 #### **重要考慮因素：** - **技術專長：**在 Voog 中進行有效的程式碼注入需要熟悉 Web 開發原理。 - **多語言聚焦：** Voog 的優勢在於其多語言能力。如果這是一個核心需求，那麼它的程式碼注入潛力就變得特別有利。 --- ### 格式：投資組合網站的有限程式碼注入 [Format](https://format.grsm.io/vdptwrg0w0q9)迎合了尋求透過令人驚嘆的作品集網站展示其作品的創意人士。它提供一定程度的程式碼注入，但優先考慮簡單性和視覺化設計工具。 #### Format 的程式碼注入潛力： - **整合與增強：**注入程式碼以嵌入外部內容、追蹤分析或為您的產品組合加入微妙的自訂。 #### 重要考慮因素： - **視覺焦點：**與 Ghost 或 WordPress 等平台相比，Format 的體驗不太以程式碼為中心。程式碼注入主要作為補充選項。 --- ### Carbonmade：用於組合定制的程式碼注入 [Carbonmade](https://carbonmade.com/)與 Format 和 Adobe Portfolio 類似，專為建立線上作品集的創意人員量身定制。它提供了適合基本修改和增強的程式碼注入等級。 #### Carbonmade 的程式碼注入潛力： - **微調示範：**透過 CSS 調整和基於 JavaScript 的互動來自訂 Carbonmade 產品組合的外觀和感覺。 #### 重要考慮因素： - **產品組合特定：** Carbonmade 的程式碼注入功能可能無法提供與 WordPress 等成熟的 CMS 相同的深度。 ### **結論** 選擇正確的具有程式碼注入的部落格平台可以歸結為在客製化和易用性之間取得平衡。請記住，您理想的部落格平台取決於您的具體需求、技術專長以及您對線上空間的創意願景。 --- 原文出處：https://dev.to/elastoplastique/code-injection-options-for-blogging-platforms-2g0a

0個讚   0留言 227瀏覽

技能問題：如何以 10 倍的速度掌握任何事物，同時又不顯得愚蠢

是的，初學者的挫折感是一種常見的情緒，而且很自然。不要因為這種傾向而責怪，因為我們自己都可能經歷過這種情況。不要撒謊，您可能在某個領域中發現初學者很煩人，因為您擁有更高水平的專業知識。 如果你沒有，那麼，做你自己就很糟糕。 然而，必須認識到，應對初學者的挑戰不僅是學習旅程的一部分，也是個人成長的重要面向。在本文中，我們深入研究了初學者旅程中伴隨的各種挫折，並探討了為什麼承認和解決這些挫折對於任何努力提高技能和知識的人來說都是至關重要的。 因此，讓我們探索初學者階段的複雜性，並發現有價值的見解，以推動您在學習努力中前進： **1. 缺乏知識：** 作為初學者通常意味著缺乏基礎知識，讓我們面對現實吧，這對您和您想要向其學習的人來說可能會令人沮喪。當你剛開始時，你可能有遠大的抱負，但將它們分解為可操作的步驟感覺就像試圖蒙住眼睛解開魔術方塊。 初學者並沒有意識到自己的無能，這常常會導致他們尷尬地提出看似愚蠢的問題——我曾經經歷過，這樣做過，現在仍然偶爾這樣做。 *舉個例子*：幾年前，我竟然厚顏無恥地詢問谷歌員工是否可以給比爾蓋茲發一封電子郵件來解決我的 Windows 7 啟動金鑰問題。我感到很羞愧，但這也提醒我們，即使是職業選手也曾經是一無所知的新手。 你需要提出問題來獲取知識，即使它們可能很愚蠢。 感謝像 chatGPT 這樣的工具，與以前不同的是，你現在可以安全地提出愚蠢的問題，唯一會嘲笑你的人就是 openai 的工程師。 ***從人們那裡獲取知識而不顯得愚蠢*** 現在，有些東西你只能從人們那裡學習/獲得，並且你可能需要為了這類事情而接近他們（但僅限於這類事情）。當向他人尋求幫助時，一切都取決於給予和索取。人們更有可能幫助解決棘手的問題，從而帶來某種互惠互利。所以，在你向某人尋求建議之前，想想這對他們有什麼好處？ 如果你的問題對他們沒有幫助或沒有興趣，你應該問chatGPT，因為chatGPT 沒有更好的事情要做。 ***害怕顯得愚蠢*** 這是完全正常的。但事情是這樣的——承認自己的無知是邁向智慧的第一步。畢竟，每個人都是從新手開始的，暴露我們專業知識的缺乏只是成為真正專家的旅程的一部分。 你是否因為擔心別人認為你很蠢而害怕與人接觸？ Lmao，如果你回到根本上，你害怕看起來很愚蠢的原因只是因為你很愚蠢——就這個話題而言。 遲早，你在該領域的技能不足將會暴露出來。所以無論如何也無所謂，最好還是仔細揭開，快速獲得知識。 **2、不耐煩：** 正如他們所說，耐心是一種美德，但讓我們面對現實吧——這是一顆難以吞嚥的藥丸，尤其是當你深入學習新事物的時候。無論是掌握一項技能、達到財務里程碑，還是等待您最喜歡的系列的下一部，不耐煩常常會出現。 想想看：您是否願意等待我的下一篇文章（知道它將於下週一下午 3:00 準時發布），還是因為“下個月的某個時候”的模糊承諾而懸而未決？確切地。擁有明確的時間表可以讓你更容易保持耐心。 在追逐那個難以捉摸的夢想時，你能喚起聖人的耐心嗎？這是一個艱難的問題，尤其是當成功之路充滿不確定性時。你看，你無法計算出達到那個里程碑的確切時刻，因為你還沒有走過那條路。這是一個第二十二條軍規：你需要知識來實現目標，但在實現目標之前你不會真正掌握這些知識。令人困惑，對吧？ 例如，你不知道你需要多長時間才能賺到第一個十億，因為你沒有所需的知識，而當你擁有所需的知識時，你應該已經賺到了十億，因為這是了解您是否已獲得有關如何賺取第一個十億美元的足夠知識的唯一方法。 如果你認為你知道如何賺到第一個十億，但你還沒有做到，那麼你告訴自己為什麼*你沒有*做到的任何故事，都代表著一個知識空白，你需要填補這個空白，以更接近所需的真正知識。賺十億。 你和你的目標之間的每一個障礙都是一個等待學習的教訓。這都是旅程的一部分，我的朋友。擁抱不確定性，享受挑戰，並記住－成功之路不是一條直線；而是一條直線。這是一條蜿蜒的道路，充滿了曲折、轉彎，偶爾會走彎路。 作為一個初學者，你會感到焦慮，因為你似乎無法填補你現在的位置和你想要的位置之間的差距；因為你沒有所需的知識。 你獲得的知識越多，前方的道路就會變得更清晰、更光明。越接近隧道的盡頭，路就越清晰，盡頭的光會照亮前路，雖然沒有確切的“隧道盡頭”，但學習是一生的旅程（至少，是這樣）本來就是這樣的）。 因此，與其專注於目的地，不如專注於旅程本身。旅程就是目的地。享受過程，享受挑戰，享受一路上的小勝利。畢竟，正是不確定性才讓這段旅程變得值得。如果一定能成功，那還有什麼樂趣呢？ 正是不確定性使得耐心變得困難，如果在特定時間範圍內保證成功，許多懶惰的人就會開始投入工作。 當你開始看到曙光時，你就已經到了意識到自己無能的階段。 現在您可以清楚地看到自己的限制以及您想要獲得的技能的困難。這是覺醒的階段。 這是29%的人開始懈怠、70%的人放棄的階段。 但如果你已經讀到這裡，我就知道那不是你。 **3.害怕失敗：** 把事情做好是最好的學習方式，但一開始你就不可能不失敗就完成任何事。 *失敗是知道下一步該學什麼的唯一方法。* 很多人只是堅持低階學習；在大腦中記憶和儲存事實和數字而不付諸實踐，認為自己知道很多，這可能會導致鄧寧克魯格效應。 對於那些不知道的人來說，鄧寧-克魯格效應是一種認知偏差，它會導致人們高估自己的能力，從而導致錯誤的自信感。換句話說，他們認為自己知道一切，而實際上，他們只觸及了表面。 但事實是：真正學習的唯一方法就是捲起袖子、親力親為。知識只有付諸實踐才有價值。否則，這些只是無用的瑣事擾亂你的大腦。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhbdwzqqg19yiepp483l.jpeg) *你想要堆疊知識還是想要堆疊結果？* 在我的環境中流行一句話：「沒有知識就是浪費」。我不相信這是真的。如果你不使用知識，知識絕對會浪費。 這句話一定起源於人們過去所知道的一些隨機的事情拯救了他們時所獲得的多巴胺。 嗯，是的，隨機知識有時會有所幫助。但是，您是否願意繼續累積知識並希望它派上用場，並祈禱您所擁有的知識會以某種方式幸運地使您成功，或者您是否會採取積極的步驟來確保您掌控自己的成功。你會驚訝地發現有多少人仍然不選擇後者。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rczg3q28hj0ts7weo1lv.jpg) 人生不是一場學校考試，透過反省事實和數字就能為你贏得**A** ，如果你學到了一些你沒有應用的東西，你就是在浪費時間。人生是一場親力親為、充滿動感的冒險，成功只屬於那些願意捲起袖子、親力親為的人。 你需要做更多，而不是知道更多。 不要挑選一本新書，而是按照你在上一本中讀過的內容去做。閱讀本文將為您提供訊息，但只有將這些訊息付諸實踐才能帶來轉變。 如果你想以十倍的速度學習，並在幾個月內實現別人需要幾年才能實現的目標，*那麼你需要學習如何學習。* 不要毫無目的地學習，而是這樣做： - 了解基礎知識 - 概述一個專案來解決您遇到的問題，或其他人正在為初學者解決的基本問題 - 開始建立專案 - 一路學習 **4. 過於急切：** 這就像在你還沒學會爬行之前就試圖衝刺一樣。一頭扎進新事物可能會令人興奮，但不要超前。 當初學者太急於證明自己時，他們常常會為了急於引起轟動而忽略重要的說明並跳過關鍵的基礎知識。這就像在不先打地基的情況下試圖建造一座房子一樣——你注定會失敗。 問題的根源是什麼？***感性太多，理性思考不夠***。充滿熱情固然很好，但當你的情緒影響了你的判斷時，你就會走向災難。不要幻想所有的可能性，醒來並注意現實的冷酷事實。相信我，它並不那麼迷人，但它是完成真正工作的地方。 所以，事情是這樣的：努力保持謙虛和冷靜。把你的牌放在胸前－不要讓你的情緒出賣你。無論有人給你 1 美元還是 100 萬美元，都要保持撲克臉。表達自己的情緒可能有助於人際關係，但在生意上呢？沒那麼多。 當人們在人際關係中充分理解你時，溝通就會變得更容易。當人們在商業上更了解你時，操縱就會變得更容易 在商業中，情緒可以發揮複雜的作用。雖然理解和同理心在人際關係中很受重視，但在商業世界中，它們有時可能被視為可利用的漏洞。如果您顯得絕望，如果對方利用這種情況（也許是提高價格），請不要感到驚訝。在商業交易中保持專業和冷靜以避免被操縱至關重要，同時仍然認識到真正的聯繫和同理心的重要性，儘管是在不同的背景下。 控制住你的情緒，你就會非常有效地學習，而不會顯得愚蠢。 **5、不一致：** 大多數人都是懶惰的，只在自己想做的時候做自己想做的事。 > 我有這條法律；*如果你花在不做某件事上的時間比持續做某件事所花的時間多，那麼你就是在倒退並浪費你過去付出的努力。* 對我來說，速度是獲勝的最重要因素，你能以多快的速度完成這項高品質的工作？這才是重要的。 很多人說“聰明的工作勝過艱苦的工作”，我認為這並不重要，“快速的工作永遠會獲勝”（記住，我先說的） ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/er4xf5iiz4zb6wcpoqbu.png) 聰明的工作可以打敗艱苦的工作的唯一原因是它更快。找到一種快速完成某件事的方法是明智之舉。速度更重要。當你不一致時，你就會失去動力。 如果某人持續努力，而你慢慢變得聰明，他/她會因為速度更快而獲得更多結果。 力求努力、聰明、快速地工作。 **6. 太害羞不敢成功：** 許多人喜歡用可笑的藉口說他們是一個內向的人，並且由於他們的“天性”而無法將自己放在那裡尋找機會。 那是廢話，社交是一種技能，而不是個性，你需要發展你的社交技能，讓你的創造力變得有價值。擁有創造性技能並不足以取得成功，您需要補充技能才能充分利用它；說服的藝術。 從技術上來說，你可能在某件事上擁有最好的技能，但如果人們不了解你，那就毫無用處。你擁有與你的臉一樣獨特的價值，如果你不能讓人們注意到它，你就無法將這種價值賦予任何人。 有時，您可能會看到那些技能不如您的人享受您沒有的機會，只是因為他們建立了人際網絡，而不總是因為這對他們來說更容易。 在過去，你要成功，顯然仍然需要人脈，但為了獲得這些人脈，你需要努力學習，進入最好的學校，結識最好的人，你需要錢去長途旅行才能見到最好的人。名人和成功人士可能會或可能不會聽你的，所以如果你真的想成功，你必須走出你的舒適區，發揮你的魅力，讓自己看起來很體面。如今，借助網路，您可以向任何名人發送私訊（有些人仍然不知道這的意義，不幸的是，這幾乎就像他們在睡覺一樣）。 ***利用網路。*** 從一開始就推銷自己，不要害怕表現得像個初學者，也不要害怕認為有些人可能會認為你很愚蠢或基礎。讓我給你看一些東西： 看看這個 Twitter/𝕏 帳號。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uklxf1g6cfznt1ph1vqu.jpg) 它實際上只是發布“這一年已完成 x%”，沒有其他內容，並且它有 130 萬粉絲。我目前在…稍後在 Twitter 上關注我🥺。 > 皇室教訓：我們就像網路上超過 5,300,500,000 人一樣，無論你是否基礎並不重要，仍然有人會喜歡你所做的事情，無論如何你都有義務接觸他們什麼。 大多數討厭你的基本內容的人可能會嫉妒他們有相同的想法或知識，但沒有足夠的勇氣將其表達出來。 不要等到成為大師才開始表現自己。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4asnioh5gafj8v0idvi.jpeg) *山頂孤獨，戰壕裡擁擠。* 人們更喜歡能夠產生共鳴，你的地位越低，越多的人能夠產生共鳴並欣賞你的成長。當你達到前 1% 時，就會變得更加孤獨，也更難找到可以交往的人。 許多人都在尋求他們能夠實現目標、能夠變得偉大的保證：「如果這個人能夠在面臨挑戰的情況下表現出這一點，我當然也可以！先讓我了解他們是如何做到的」。 所以本質上我的觀點是，大師非常有價值，但你可以輕鬆地向更接近你水平的人學習，也許領先 1-10 步，越接近越容易。 例如，我從伊隆馬斯克那裡學到了很多東西，但我從我網絡中目前的導師那裡學到了更多，因為他們是「平易近人的」。 此人可能是該領域的專家，但如果無法聯繫到他/她，他/她就無法為您提供針對您的具體情況的個人化建議。 您可能正在聽一些優秀的 YouTuber 的講話，這個人可能會給出準確的建議，但您的情況可能是這些事實的例外，可能存在一些細微差別，導致這些事情不起作用。 然後你可能最終會得出結論，這個人所說的是無稽之談（儘管我並不是說每個人都總是正確的）。 處於金字塔底部的你更容易接近。利用這一點來發揮你的優勢。 我認為名人面臨的問題之一是，他們通常會受到很多人試圖「接近」他們的轟炸，他們沒有足夠的時間或精力去照顧每個人。但你做到了，這是你擁有伊隆馬斯克所沒有的東西，利用它來攀登金字塔。 > 透過你的可及性為人們提供價值，從而成為難以接近的人；你所給予的價值將變得非常有價值，以至於初學者或金字塔底層的人很難獲得它。 您可以展示您的專業知識，並為近距離和個人聯繫收取額外費用。 我希望這對你有幫助，我很讚揚，我幫助人們從他們的創造力中賺錢，[訂閱我的時事通訊](https://tbk.beehiiv.com)（商業造王者）以獲得關於如何從你的創造力中賺錢印鈔系統的更多新鮮觀點。我為人們創造更多機會透過我的專案等賺取更多收入，我的時事通訊是與我聯繫並了解更多有關我的專案的好方法。 請務必將這篇文章轉發並分享給困擾您的煩人的初學者。和平✌️ --- 原文出處：https://dev.to/drpraze/skill-issue-how-to-master-anything-10x-faster-without-looking-stupid-2hj4

0個讚   0留言 85瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 Git 分支策略指南
🔥 JavaScript 去抖動綜合指南：提高程式碼效率
🔥 Twill CMS 火力展示與資料模型
🔥 掌握關聯式資料庫設計：綜合指南
🔥 html/css 小分享：設定複選框和開關的樣式
  近期留言
熱門搜尋： oop 題 前 使用 學習 . COM 語言 ul 開發 ui 技術 java 專案 js C 前端 Ai Github ` go AI 第一 app 工作 2 % HTML html 主題 JS 10 AWS CSS id 網頁 GIT Css github 網站 Html 作為 分享 Javascript ci JavaScript with Git node Node css ? 作業 測試 資料庫 " 研 結構 vs 50 Line json class React 工程師 user c javascript 系列 python this Can API 後端 vue JAVA 部落格 4 Java CD component 查詢 1 20 jav 套件 javascript ejs api 新手 git fetch bi 遊戲 py ＣＳＳ 19 for 謝謝 ROS error
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。