JavaScript 是一種函數式程式語言，函數扮演著至關重要的角色。它們允許您封裝可重複使用程式碼並執行特定任務。以下是一些可以讓您的生活更輕鬆的功能的快速範例： {%youtube CUWQGt5rz28 %} ### 常規功能 ``` function sum(a, b) { return a + b; } ``` ### 函數表達式 ``` const sum = function (a, b) { return a + b; }; ``` ### 箭頭功能 ``` const sum = (a, b) => { return a + b; }; // OR const sum = (a, b) => a + b; ``` ### 發電機功能 ``` function* indexGenerator() { let index = 0; while (true) { yield index++; } } const g = indexGenerator(); console.log(g.next().value); // => 0 console.log(g.next().value); // => 1 ``` ### 建立一個從 1 到 n 的數字陣列 ``` const range = (n) => Array.from({ length: n }, (_, i) => i + 1); console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ``` ### 使用步驟建立一個從 1 到 n 的數字陣列 ``` const range = (n, step = 1) => Array.from({ length: n }, (_, i) => i * step); console.log(range(10, 2)); // [1, 3, 5, 7, 9] ``` ### 建立一個陣列並用一個值填充它 ``` const fill = (len, value) => Array(len).fill(value); console.log(fill(3, 0)); // [0, 0, 0] ``` ### 打亂陣列 ``` const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random()); console.log(shuffleArray([1, 2, 3, 4])); // [3, 2, 1, 4] ``` ### 從陣列中刪除重複項 ``` const removeDuplicated = (arr) => [...new Set(arr)]; console.log(removeDuplicated([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ] const removeDuplicate = (arr) => Object.values(arr.reduce((a, b) => (a[b] ? a : { ...a, [b]: b }), {})); console.log(removeDuplicate([1, 2, 3, 3])); // Result: [ 1, 2, 3, ] ``` ### 產生隨機數 ``` const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; console.log(random(1, 10)); // Result: 1 ~ 10 ``` ### 找到最大的數字 ``` const findLargest = (arr) => arr.map((subArr) => Math.max(...subArr)); console.log( findLargest([ [4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1], ]) ); // [5, 27, 39, 1001] ``` ### 找出最小的數字 ``` const findSmallest = (arr) => arr.map((subArr) => Math.min(...subArr)); console.log( findSmallest([ [4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1], ]) ); // [1, 18, 32, 857] ``` ### 從陣列中選擇一個隨機元素 ``` const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]; console.log(pick([1, 2, 3, 4])); // 2 ``` ### 將陣列轉換為物件 ``` const toObject = (arr) => ({ ...arr }); console.log(toObject(["a", "b"])); // { 0: 'a', 1: 'b' } ``` ### 找出兩個陣列的交集 ``` const intersection = (arr1, arr2) => { const set = new Set(arr1); return arr2.filter((x) => set.has(x)); }; console.log(intersection([1, 2, 3], [2, 3, 4])); // [2, 3] ``` ### 從陣列中刪除虛假值 ``` const compact = (arr) => arr.filter(Boolean); console.log(compact([0, 1, false, 2, "", 3, "a", "e" * 23, NaN, "s", 34])); // [1, 2, 3, 'a', 's', 34] ``` ### 反轉字串 ``` const reverseString = (str) => str.split("").reverse().join(""); console.log(reverseString("hello")); // olleh ``` ### 字串是回文嗎 ``` const isPalindrome = (str) => str === str.split("").reverse().join(""); console.log(isPalindrome("madam")); // true ``` ### 檢查物件是否為空 ``` const isEmpty = (obj) => Object.keys(obj).length === 0; console.log(isEmpty({})); // true ``` ### 找出一個月中的天數 ``` const getDaysInMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); console.log(getDaysInMonth(new Date())); // 31 ``` ### 產生隨機顏色 ``` const getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`; console.log(getRandomColor()); // #f0f0f0 const randomHex = () => `#${Math.floor(Math.random() * 0xffffff) .toString(16) .padEnd(6, "0")}`; console.log(randomHex()); // #f0f0f0 ``` --- ##### 必須閱讀（如果還沒有） {% 連結 https://dev.to/devsmitra/how-to-create-the-app-using-jsx-without-react-k08 %} {% 連結 https://dev.to/devsmitra/reactjs-signal-for-state-mangement-21pf %} {% 連結 https://dev.to/devsmitra/simplify-javascripts-async-concepts-with-one-gif-3c6a %} --- ###### 更多內容請造訪[Dev.to](https://dev.to/devsmitra "拉胡爾·夏爾馬（DevsMitra）") 。 {% 用戶 devsmitra %} ###### 抓住我 < p> {% cta https://www.youtube.com/@bit-buddy?sub\_confirmation=1 %} YouTube {% endcta %} {% cta https://github.com/devsmitra %} Github {% endcta %} {% cta https://www.linkedin.com/in/rahul-sharma-18b8b374 %} LinkedIn {% endcta %} {% cta https://devsmitra.medium.com %} 中 {% endcta %} {% cta https://stackblitz.com/@devsmitra %} Stackblitz {% endcta %} {% cta https://devsmitra.hashnode.dev %} 雜湊節點 {% endcta %} {% cta https://hackernoon.com/u/devsmitra %} HackerNoon {% endcta %} --- 原文出處：https://dev.to/devsmitra/20-handy-javascript-functions-to-simplify-your-code-javascript-tutorial-i0e
我仍然記得我第一天與數百名其他員工一起參加公司會議。經過幾個月成功的自由工作後，我終於能夠加入一家大公司，焦慮和興奮的混合是真實的。現在的挑戰不同了，風險更高了，環境也勢不可擋。 但這並不是唯一讓我感到壓力的情況。我還清楚記得有一天，在一家小型新創公司工作時，我向整個公司展示了我們將要使用的新前端架構的一部分。我們規模很小，會議上的每個人都在專心聽我說的話。 從在新創公司中發揮重要作用，到成為公司中更大群體中的一小部分，每一次經驗都有自己的一套學習經驗。 當然，情況並非總是如此。我們都知道存在沒有做好準備的公司，這就是建立本文的原因。在這裡，我們將探討**我在新創公司和大公司工作時獲得的一些**關鍵經驗和收穫，這樣你就可以從你目前工作的公司中學習到這些知識，甚至可以自己決定你下一步的職業步驟，看看哪一個更適合您。 流程和文化 -----  讓我們從流程開始，因為它們是第一個非常明顯的差異。在新創公司工作時，大多數流程仍在實施中，您工作的很大一部分實際上可能涉及**嘗試和試驗**這些任務的不同流程。 文化也可能處於創造階段，因此，定義公司及其員工的共同價值觀，或「在這裡做事的方式」。可以改變很多而且很快！ 當然，這使得體驗方式更加混亂，但也更加靈活。兼顧多重角色和責任並不罕見，這可能是在不同方面學習和成長的絕佳機會，例如創造新的良好文化模式。 另一方面，在更企業化的環境中，流程更加結構化和明確，這可以提供穩定性和明確的期望，但也會帶來官僚主義的缺點，需要很長時間才能真正通過多個管道和渠道。 這裡的關鍵要點是**平衡**。流程的稀缺會讓整個生態系統變得混亂，這讓人不舒服，但流程太多，你就什麼都做不了。平衡缺勤和超額的權重將為每個人創造一個更好的環境。 敏捷性和適應性 -------  在新創公司工作通常需要身兼數職，並隨時適應變化。在快節奏的新創環境中，敏捷性和適應性是關鍵。你必須準備好轉變，這可以讓你成長很多，不要太執著於自己的想法。您還必須準備好調整您的策略並接受新技術和方法（如果它們看起來合適）。 這可能是一次令人興奮的經歷，可以促進創造力和創新，但從長遠來看，也可能導致分散且充滿壓力的環境（公司的各個方面都採用不同的技術，讓所有混亂的工作變得**困難**）。 相較之下，大公司擁有豐富的時間和資源，可以進行更徹底的規劃和執行。此外，大公司傾向於依賴他們已經信任的東西，並且通常不太願意接受新事物。 雖然這不如動態的創業環境那麼令人興奮，但它提供了不同類型的學習體驗。在這裡，您可以加深對策略規劃、專案管理和業務營運其他方面的理解。 這裡的關鍵要點是學會**在需要時**變得敏捷、多才多藝和適應能力強。如果您不想相信我的話，我建議您閱讀[這篇關於無聊技術的文章](https://mcfunley.com/choose-boring-technology)。這是令人驚訝的洞察力和偉大的閱讀！ --- 哦！在我忘記之前，這篇文章之所以成為可能，是因為[Wasp](https://wasp-lang.dev/) ，他們正在建立一個非常酷的全端 React + NodeJS 框架，如果您能透過[在 GitHub 上為我們的儲存庫加註星標](https://www.github.com/wasp-lang/wasp)來幫助我們，那將意義重大。 透過這樣做，您將幫助我們繼續使網頁開發更快、更輕鬆，並每週為您帶來這樣的內容！ 🚀  https://www.github.com/wasp-lang/wasp ⭐️ 在 GitHub 上給我們一個 star 🙏 --- 社交機會 ----  新創公司和大公司之間的另一個主要區別是它們提供的網路機會。大公司通常擁有廣泛的員工、客戶、供應商和合作夥伴網路。在這樣的環境中工作可以提供大量建立人際網絡和建立有價值的專業關係的機會。這些聯繫對於您的職業發展非常有益。 另一方面，新創公司由於規模較小，提供了更親密的社交機會。您可能會與團隊的每個成員密切合作，讓您有機會建立更牢固的關係並直接向同事和上級學習。 這裡的關鍵要點是擁抱每一個聯繫，並**嘗試在任何地方創造一個良好的工作環境**。這將使您更輕鬆地度過困難時期，並且您一定會在一生中結交一些友誼😃 影響 --  現在，我們來談談影響。在較大的公司中，您的程式碼庫可能會被數千（更可能是數百萬人）人存取。這意味著做一個小的改變可以改變很多人對應用程式的看法，並且看到你的工作被這麼多人使用是非常令人滿意的。不幸的是，第一次必須為數百萬用戶存取的程式碼庫部署一個小的程式碼變更絕對是令人傷腦筋的——儘管這對於增加您的經驗和彈性是必要的。 在新創公司中，您可能會看到有數百人（相信有數千人）造訪的程式碼庫。這意味著，你的工作將被更少的人看到，但是，由於你可以創造更多，你可能會創造出更多的東西，而不僅僅是一個小小的改變。頁面、使用者旅程和所有內容都可以在您的範圍內單獨或與您的團隊一起進行。但它並非沒有缺點。由於流程更加稀缺，因此回滾和恢復變更有時可能是一個困難的過程（甚至更糟的是，沒有記錄）。 這裡的關鍵要點是了解您的角色以及您在不同環境中帶來的價值的重要性。無論您是在一家新創公司，您的工作直接推動公司的成功，還是在一家大公司，您的行為有助於更廣泛的目標，**您的工作都很重要，您應該為此感到自豪。** 舉個例子，我為在一個巨大的電子商務網站上製作一個簡單的產品過濾器（他們一直使用到今天）感到非常自豪，並且我也為積極實施/參與至少 2 個專案的實施感到自豪/3是我曾經合作過的新創公司的設計師所提出的新設計系統的每個元件的/3。**好的工作不會讓別人貶低。** 結論 --  如果這段穿越新創公司和企業領域的旅程為您帶來了啟發，為什麼不支持[Wasp](https://wasp-lang.dev/)呢？我們正在精心打造工具和內容，為像您這樣的開發人員提供協助，無論您是獨自編碼還是克服企業挑戰。 如果您想看到更多這樣的內容，您可以[在 GitHub 上給我們一個星星，非常輕鬆地幫助我們！](https://www.github.com/wasp-lang/wasp)  https://www.github.com/wasp-lang/wasp ⭐️ GitHub 上的 Star Wasp 🙏 新創企業和大公司都提供寶貴的經驗。在新創公司，你可以做不同的任務，嘗試新事物，並直接影響公司的未來。這是一種親身實踐的學習經驗。 在大公司中，您可以存取許多資源和結構化環境。您可以與多元化專家團隊合作，這有助於您學習和成長。既定的流程、穩定性和可預測性可以幫助提高您的技能並塑造您的職業生涯。 但是，這並不是要選擇其中之一。這是關於學習在兩種環境中都表現出色。汲取兩者中最好的部分，並隨時隨地使用它們。保持敏捷、適應力強、樂於接受新體驗。這兩種經歷對你的職業生涯都很重要。 總之，每種環境都有其獨特的挑戰與機會。擁抱差異，從經驗中學習，並利用它們為你帶來優勢。畢竟，正是這些多樣化的經驗可以幫助您實現個人和職業成長。因此，無論您是在新創公司還是大公司，請始終記住 - 您的工作很重要，並有助於實現更大的目標。 您對新創公司和大公司之間的比較有何看法？我們很想聽聽您的經驗和收穫。請在下面的評論中分享您的想法！ --- 原文出處：https://dev.to/wasp/start-ups-vs-big-companies-the-best-takeaways-for-you-to-know-28n5
標題說明了一切🐐。我想談談我一直以來最喜歡的 JavaScript 陣列方法： **Array.reduce()** 。我知道有很多競爭者，但請聽我說完。 reduce() 不只是一個方法；這是一種生活方式✨。 我不想撒謊，當我第一次開始並發現reduce 時，它有點令人生畏。我花了一段時間才在程式碼中自信地使用它。但當我這麼做的時候，遊戲規則就改變了。突然間，我可以輕鬆地對陣列執行複雜的操作，將它們轉換為我需要的任何內容。我的程式碼變得更快更乾淨。 但不要只相信我的話。讓我向您展示使用reduce() 可以實現的一些功能。是時候深入研究 Array.reduce() 並發現為什麼它絕對是山羊了！ 🐐 Array.reduce() 的 9 個用例 🐐 ------------------------ ### 用例 1：對數字求和 reduce() 最直接的用例之一是對一堆數字求和。假設您有一個整數陣列，並且您想要找到總和。 ``` const numbers: number[] = [1, 2, 3, 4, 5]; const sum: number = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // Output: 15 ``` 繁榮！只需一行程式碼，您就可以計算出陣列中所有元素的總和。累加器的初始值設為 0，並且在每次迭代中，我們將當前元素新增至累加器。 \*\* 獎勵：如果您選擇忽略起始值，reduce 將只使用陣列中的第一項。不過我傾向於總是包含一個初始值，這樣比較容易閱讀。 ### 用例 2：展平陣列 您是否曾經發現自己有一個陣列陣列並想：“我希望我可以將其扁平化為一個陣列”？ ``` const nestedArray: number[][] = [[1, 2], [3, 4], [5, 6]]; const flattenedArray: number[] = nestedArray.reduce((acc, curr) => acc.concat(curr), []); console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6] ``` 在此範例中，我們從一個空陣列開始作為初始累加器值。然後，在每次迭代中，我們使用 concat() 方法將目前子陣列連接到累加器。最後，我們就有了一個完美的扁平化陣列。 我知道您也可以使用`Array.flat()`來做到這一點。然而，了解如何使用reduce 很重要，以防您想對每個專案執行額外的操作。 ### 用例 3：對物件進行分組 假設您有一個物件陣列，並且您希望根據特定屬性對它們進行分組。 reduce() 是完成這項工作的完美工具。 ``` interface Person { name: string; age: number; } const people: Person[] = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 25 }, { name: 'Dave', age: 30 } ]; const groupedByAge: { [key: number]: Person[] } = people.reduce((acc, curr) => { if (!acc[curr.age]) { acc[curr.age] = []; } acc[curr.age].push(curr); return acc; }, {}); console.log(groupedByAge); /* Output: { '25': [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }], '30': [{ name: 'Bob', age: 30 }, { name: 'Dave', age: 30 }] } */ ``` 在本例中，我們使用一個物件作為初始累加器值。我們檢查累加器是否已經具有當前年齡的屬性。如果沒有，我們為該年齡建立一個空陣列。然後，我們將目前物件推入對應的年齡陣列中。最後，我們得到一個物件，其中鍵是年齡，值是該年齡的人的陣列。 現在您也可以使用更新的`groupBy`方法，但是，理解這個久經考驗的真正經典方法很重要。 ### 用例 4：建立查找圖 我個人最喜歡的是使用reduce()從陣列建立查找映射。在效能和程式碼可讀性方面，它改變了遊戲規則。停止使用那些緩慢的 find() 或 filter() 呼叫。 ``` interface Product { id: number; name: string; price: number; } const products: Product[] = [ { id: 1, name: 'Laptop', price: 999 }, { id: 2, name: 'Phone', price: 699 }, { id: 3, name: 'Tablet', price: 499 }, ]; const productMap: { [key: number]: Product } = products.reduce((acc, curr) => { acc[curr.id] = curr; return acc; }, {}); console.log(productMap); /* Output: { '1': { id: 1, name: 'Laptop', price: 999 }, '2': { id: 2, name: 'Phone', price: 699 }, '3': { id: 3, name: 'Tablet', price: 499 } } */ // Accessing a product by ID const laptop: Product = productMap[1]; console.log(laptop); // Output: { id: 1, name: 'Laptop', price: 999 } ``` 透過使用reduce()建立查找映射，您可以以恆定的時間複雜度透過元素的唯一辨識碼來存取元素。不再需要循環遍歷陣列來尋找特定專案。 ### 用例 5：計算出現次數 曾經需要計算陣列中元素的出現次數嗎？ reduce() 已經幫你解決了。 ``` const fruits: string[] = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; const fruitCounts: { [key: string]: number } = fruits.reduce((acc, curr) => { acc[curr] = (acc[curr] || 0) + 1; return acc; }, {}); console.log(fruitCounts); /* Output: { 'apple': 3, 'banana': 2, 'orange': 1 } */ ``` 在這個例子中，我們初始化一個空物件作為累加器。對於陣列中的每個水果，我們檢查它是否已作為累加器物件中的屬性存在。如果是，我們將其計數加 1；否則，我們將其初始化為 1。 ### 用例 6：組合函數 函數式程式設計愛好者一定會喜歡這個。 reduce() 是一個強大的函陣列合工具。您可以使用它來建立逐步轉換資料的函數管道。 ``` const add5 = (x: number): number => x + 5; const multiply3 = (x: number): number => x * 3; const subtract2 = (x: number): number => x - 2; const composedFunctions: ((x: number) => number)[] = [add5, multiply3, subtract2]; const result: number = composedFunctions.reduce((acc, curr) => curr(acc), 10); console.log(result); // Output: 43 ``` 在這個範例中，我們有一個函數陣列，我們希望將其按順序應用到初始值 10。最終結果是按組合順序應用所有函數的結果。 ### 用例 7：實作簡單的類似 Redux 的狀態管理 如果您使用過 Redux，您就會知道它在管理應用程式中的狀態方面有多強大。你猜怎麼了？你可以使用reduce()來實作一個簡單的類似Redux的狀態管理系統。 ``` interface State { count: number; todos: string[]; } interface Action { type: string; payload?: any; } const initialState: State = { count: 0, todos: [], }; const actions: Action[] = [ { type: 'INCREMENT_COUNT' }, { type: 'ADD_TODO', payload: 'Learn Array.reduce()' }, { type: 'INCREMENT_COUNT' }, { type: 'ADD_TODO', payload: 'Master TypeScript' }, ]; const reducer = (state: State, action: Action): State => { switch (action.type) { case 'INCREMENT_COUNT': return { ...state, count: state.count + 1 }; case 'ADD_TODO': return { ...state, todos: [...state.todos, action.payload] }; default: return state; } }; const finalState: State = actions.reduce(reducer, initialState); console.log(finalState); /* Output: { count: 2, todos: ['Learn Array.reduce()', 'Master TypeScript'] } */ ``` 在此範例中，我們有一個初始狀態物件和一組操作。我們定義一個reducer函數，它接受當前狀態和一個動作，並根據動作類型返回一個新狀態。透過使用reduce()，我們可以將每個動作依序應用於狀態，從而得到最終狀態。這就像擁有一個迷你 Redux。 ### 用例 8：產生唯一值 有時，您可能有一個包含重複值的陣列，並且您需要僅提取唯一的值。 reduce() 可以幫助您輕鬆實現這一點。 ``` const numbers: number[] = [1, 2, 3, 2, 4, 3, 5, 1, 6]; const uniqueNumbers: number[] = numbers.reduce((acc, curr) => { if (!acc.includes(curr)) { acc.push(curr); } return acc; }, []); console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6] ``` 在這裡，我們初始化一個空陣列作為累加器。對於原始陣列中的每個數字，我們使用includes()方法檢查它是否已存在於累加器中。如果沒有，我們將其推入累加器陣列。最終結果是一個僅包含原始陣列中唯一值的陣列。 ### 用例 9：計算平均值 想要計算一組數字的平均值？ reduce() 為您提供支援！ ``` const grades: number[] = [85, 90, 92, 88, 95]; const average: number = grades.reduce((acc, curr, index, array) => { acc += curr; if (index === array.length - 1) { return acc / array.length; } return acc; }, 0); console.log(average); // Output: 90 ``` 在此範例中，我們將累加器初始化為 0。當我們到達最後一個元素時（使用索引和 array.length 檢查），我們將累加器除以成績總數來計算平均值。 性能考量🏎️ ------ 雖然 Array.reduce() 非常強大且用途廣泛，但了解潛在的效能缺陷非常重要，尤其是在處理大型陣列或複雜操作時。一個常見的陷阱是在每次reduce()迭代中建立新的物件或陣列，這可能會導致過多的記憶體分配並影響效能。 例如，考慮以下程式碼： ``` const numbers: number[] = [1, 2, 3, 4, 5]; const doubledNumbers: number[] = numbers.reduce((acc, curr) => { return [...acc, curr * 2]; }, []); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10] ``` 在本例中，我們使用展開運算子 (...) 在每次迭代中建立一個新陣列，這可能會效率低下。相反，我們可以透過直接改變累加器陣列來優化程式碼： ``` const numbers: number[] = [1, 2, 3, 4, 5]; const doubledNumbers: number[] = numbers.reduce((acc, curr) => { acc.push(curr * 2); return acc; }, []); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10] ``` 透過使用 push() 來改變累加器陣列，我們可以避免在每次迭代中建立新陣列，從而獲得更好的效能。 類似地，在處理物件時，直接改變累加器物件比使用擴充運算子建立新物件更有效： ``` const people: Person[] = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 25 }, { name: 'Dave', age: 30 } ]; const groupedByAge: { [key: number]: Person[] } = people.reduce((acc, curr) => { if (!acc[curr.age]) { acc[curr.age] = []; } acc[curr.age].push(curr); return acc; }, {}); ``` 透過直接改變累加器物件，我們優化了reduce()操作的效能。 然而，值得注意的是，在某些情況下，在每次迭代中建立新的物件或陣列可能是必要的或更具可讀性。根據您的具體用例和您正在使用的資料大小，在效能和程式碼清晰度之間取得平衡非常重要。 結論 -- 你有它。九個令人難以置信的用例展示了 Array.reduce() 的強大功能和多功能性。從將數字求和到展平陣列、對物件進行分組到建立查找映射、對出現次數進行計數到組合函數，甚至實現狀態管理和計算平均值， `Array.reduce()`被證明是js 工具包中的強大工具。 你怎麼認為？您最喜歡的陣列方法是什麼？ 感謝您的閱讀，願 reduce() 的力量與您同在。 ✨🐐✨ --- 原文出處：https://dev.to/mattlewandowski93/arrayreduce-is-goated-1f1j
作為前端開發人員，我們通常專注於建立漂亮的使用者介面。然而，重要的是要記住，美麗也在於內部，像素完美的方法也應該轉化為我們的程式碼組織和結構。在本文中，我們將探討每個前端開發人員都應該了解並在其專案中應用的一些基本軟體工程原理。 1. DRY（不要重複） ------------ DRY 原則強調程式碼可重複使用性和維護的重要性。透過將通用功能提取到可重複使用元件、函數或模組中來避免重複程式碼。透過堅持 DRY 原則，您可以減少程式碼重複，提高可維護性，並使您的程式碼庫更加模組化。 React 鼓勵元件驅動的架構，其中職責被隔離，以便於未來的開發和可擴展性。 我們以一個簡單的電子商務應用程式中的產品頁面為例。我們希望看到待售產品清單。我們可以將頁面分解為更小的、可重複使用的元件。 成分： 1. 產品卡：顯示單一產品及其名稱、價格和描述。 2. 產品清單：顯示產品清單。 ``` // ProductCard.js import React from 'react'; const ProductCard = ({ product }) => { return ( <div> <h2>{product.name}</h2> <p>Price: ${product.price}</p> <p>Description: {product.description}</p> </div> ); }; export default ProductCard; ``` ``` // ProductList.js import React, { useState } from 'react'; import ProductCard from './ProductCard'; const ProductList = () => { const [products, setProducts] = useState([ { id: 1, name: 'Product 1', price: 9.99, description: 'Description 1' }, { id: 2, name: 'Product 2', price: 19.99, description: 'Description 2' }, // ... ]); return ( <div> {products.map((product) => ( <ProductCard key={product.id} product={product} /> ))} </div> ); }; export default ProductList; ``` 在此範例中，我們看到，透過將與產品相關的邏輯分離到`ProductCard`元件中，我們可以在`ProductList`元件的`map`功能中重複使用它，並避免清單頁面中每個產品專案的重複程式碼。 2. SOLID 原則 -------- SOLID 是一個縮寫詞，代表物件導向設計的五個關鍵原則： - **單一**責任原則 (SRP)：每個模組或類別應該只有一個更改理由。 - **開放**/封閉原則（OCP）：軟體實體應該對擴展開放，對修改關閉。 - **李斯科夫**替換原則（LSP）：子類型應該可以替換其基本類型，而不改變程式的正確性。 - **介面**隔離原則 (ISP)：不應強迫客戶端依賴他們不使用的介面。 - **依賴**倒置原則（DIP）：高層模組不應該依賴低層模組。兩者都應該依賴抽象。 讓我們來看看如何在 React TypeScript 元件中應用里氏替換原則 (LSP)： ``` // Vehicle.ts interface Vehicle { drive(): void; name: string; } // Car.ts class Car implements Vehicle { constructor(private name: string) { this.name = name; } drive(): void { console.log(`Driving a ${this.name}`); } } // Motorcycle.ts class Motorcycle implements Vehicle { constructor(private name: string) { this.name = name; } drive(): void { console.log(`Riding a ${this.name}`); } } // App.tsx import React from 'react'; import { Vehicle } from './Vehicle'; import Car from './Car'; import Motorcycle from './Motorcycle'; function VehicleComponent(props: { vehicle: Vehicle }) { props.vehicle.drive(); return <div>Driving a {props.vehicle.name}</div>; } const App = () => { const car = new Car(); const motorcycle = new Motorcycle(); return ( <div> <VehicleComponent vehicle={car} /> <VehicleComponent vehicle={motorcycle} /> </div> ); }; export default App; ``` 在此範例中，我們有一個`Vehicle`接口，它定義了`name`屬性和`drive`方法。然後我們有兩個具體的實作： `Car`和`Motorcycle` ，它們都實作了`Vehicle`介面。 在 App 元件中，我們建立`Car`和`Motorcycle`的實例並將它們傳遞給 VehicleComponent。 `VehicleComponent`對傳入的車輛物件呼叫驅動方法。 LSP 確保我們可以用`Car`或`Motorcycle`代替`Vehicle`接口，而不改變程序的正確性。 `VehicleComponent`可與`Car`和`Motorcycle`實例無縫協作，展示子類型對其基本類型的可替換性。 3. KISS（保持簡單，愚蠢） ---------------- KISS 原則提倡設計和實現的簡單性。編寫易於理解、簡單且能做好一件事的程式碼。避免不必要的複雜性和過度設計，因為從長遠來看，這可能會導致混亂和維護挑戰。 讓我們來看看`Counter`元件的 2 個實作。 ``` // Complex Counter import React, { useState, useEffect } from 'react'; import { debounce } from 'lodash'; const ComplexCounter = () => { const [count, setCount] = useState(0); const [clicked, setClicked] = useState(false); const [error, setError] = useState(null); useEffect(() => { if (clicked) { setCount(prev => prev + 1) setClicked(false) } }, [clicked, setClicked]); const handleClick = (clicked: boolean) => { setClicked(!clicked); }; return ( <div> <p>Count: {count}</p> <button onClick={() => handleClick(clicked)}>Increment</button> </div> ); }; export default ComplexCounter; ``` ``` // Simple Counter import React, { useState } from 'react'; const SimpleCounter = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Increment</button> </div> ); }; export default SimpleCounter; ``` 我們發現`ComplexCounter`實作更難理解和維護，而且更容易出錯。 它引入了一個不必要的`clicked`狀態變數和一個`useEffect`掛鉤。 這是一個如何不實作 React 元件的範例。 4. YAGNI（你不需要它） --------------- YAGNI 提醒我們避免基於推測的未來需求過早加入功能。相反，應專注於正確實現當前所需的功能。當您建立一個非常以用戶為中心的產品時，這一點變得非常重要。最好不要根據您認為用戶可能想要的假設來引入新功能。使用適當的使用者研究框架和原型設計方法。 遵循 YAGNI，您可以防止不必要的複雜性、減少開發時間並維護精簡的程式碼庫。 5. 乾淨的程式碼 --------- 乾淨的程式碼是可讀的、可理解的、可維護的。遵循編碼約定和最佳實踐，使用有意義的變數名稱，並編寫不言自明的程式碼。保持函數和類別小而集中，堅持一致的格式，並努力使程式碼庫清晰。 讓我們來看一個簡單的實用函數，用於出於資料安全目的隱藏部分使用者的私人資訊。 ``` const hashUsersPrivateInformation = (privateInformation: string): string => { // Calculate the length of the private info to determine how many characters to mask const maxLength = privateInformation.length > 4 ? privateInformation.length - 4 : privateInformation.length; // Create a regular expression pattern to match the desired number of characters const regexPattern = `.{1,${maxLength}}`; const regex = new RegExp(regexPattern); return privateInformation.replace(regex, (match) => '*'.repeat(match.length)); }; ``` 我們看到： 1. 函數的名稱是自我描述的 2. 它包含可以幫助其他開發人員的有用註釋。 3. 它有一個可以理解的主要目的。 我們應該以類似的方式建立我們的程式碼。 結論 -- 將這些軟體工程原理融入您的前端開發工作流程中，您可以編寫更高品質的程式碼，改善與團隊成員的協作，並建立強大且可擴展的應用程式。軟體工程不僅僅是編寫程式碼；還涉及編寫程式碼。它是為複雜問題建立可靠、可維護且優雅的解決方案。 --- 原文出處：https://dev.to/gboladetrue/software-engineering-principles-every-frontend-developer-should-know-1ej7
介紹 -- 在上一篇部落格文章中，我們共同探討了以下內容的綜合指南： https://dev.to/louaiboumediene/mastering-relational-database-design-a-compressive-guide-3jh8 在本文中，我們將在較高層次上發現實際用於實現資料庫模式設計的語言的語法和核心功能... SQL。 那麼...讓我們深入探討吧！  --- 什麼是 SQL ------- SQL，即結構化查詢語言，是用於與所有**RDMS**對話的外觀語言，但是大多數時候，作為後端工程師（我們不是資料庫工程師），我們不直接使用 SQL，而是使用物件關係映射器**ORM**它在原始SQL 之上提供了一個更好、更可靠的接口，以便用我們首選的程式語言與資料庫進行通信，但是我們仍然需要SQL 的基本知識，以便快速、簡單地操作以及與資料庫互動。  --- 基本 SQL 查詢 --------- 基本 SQL 查詢涉及使用 SELECT、DISTINCT、WHERE、LIMIT 和 OFFSET 等命令從資料庫表中選擇特定資料。 ``` -- Selecting all columns from a table SELECT * FROM employees; -- Selecting specific columns SELECT first_name, last_name FROM employees; -- Using DISTINCT to get unique values SELECT DISTINCT department_id FROM employees; -- Using WHERE to filter results SELECT * FROM employees WHERE department_id = 10; -- Using LIMIT to limit the number of results SELECT * FROM employees LIMIT 5; -- Using OFFSET to skip certain rows SELECT * FROM employees OFFSET 5; ``` --- 過濾資料 ---- 在 SQL 中篩選資料可讓您根據某些條件從表格中擷取特定記錄，例如使用 >、<、= 等比較運算子以及 AND、OR 和 NOT 等邏輯運算子。 ``` -- Using comparison operators SELECT * FROM employees WHERE salary > 50000; -- Using logical operators SELECT * FROM employees WHERE department_id = 10 AND salary > 50000; -- Using IN and NOT IN SELECT * FROM employees WHERE department_id IN (10, 20); -- Using BETWEEN SELECT * FROM employees WHERE salary BETWEEN 40000 AND 60000; -- Using LIKE for pattern matching SELECT * FROM employees WHERE last_name LIKE 'S%'; ``` --- 資料排序 ---- SQL 中的資料排序是使用 ORDER BY 子句根據指定列以升序或降序排列檢索到的記錄。 ``` -- Sorting data in ascending order SELECT * FROM employees ORDER BY salary; -- Sorting data in descending order SELECT * FROM employees ORDER BY salary DESC; -- Sorting by multiple columns SELECT * FROM employees ORDER BY department_id, salary DESC; ``` --- 聚合函數 ---- SQL 中的聚合函數對一組值執行計算並傳回單一值。常見的聚合函數包括 COUNT、SUM、AVG、MIN 和 MAX。 ``` -- Counting the number of rows SELECT COUNT(*) FROM employees; -- Calculating total salary SELECT SUM(salary) FROM employees; -- Finding average salary SELECT AVG(salary) FROM employees; -- Finding minimum salary SELECT MIN(salary) FROM employees; -- Finding maximum salary SELECT MAX(salary) FROM employees; ``` --- 資料分組 ---- 在 SQL 中將資料分組可讓您使用 GROUP BY 子句（通常與聚合函數結合使用）對指定列中具有相同值的行進行分組。 ``` -- Grouping data by department SELECT department_id, COUNT(*) FROM employees GROUP BY department_id; -- Using HAVING to filter grouped data SELECT department_id, COUNT(*) FROM employees GROUP BY department_id HAVING COUNT(*) > 5; ``` --- 加入 -- SQL 中的聯結會根據相關資料列組合來自多個資料表的資料，以擷取跨這些資料表的資料。 ``` -- Inner Join SELECT * FROM employees INNER JOIN departments ON employees.department_id = departments.department_id; -- Left Join SELECT * FROM employees LEFT JOIN departments ON employees.department_id = departments.department_id; -- Right Join SELECT * FROM employees RIGHT JOIN departments ON employees.department_id = departments.department_id; -- Full Outer Join SELECT * FROM employees FULL OUTER JOIN departments ON employees.department_id = departments.department_id; ``` --- 子查詢 --- SQL 中的子查詢是另一個查詢中的巢狀查詢，用於檢索依賴另一個查詢結果的資料。 ``` -- Subquery example SELECT * FROM employees WHERE department_id IN (SELECT department_id FROM departments WHERE location_id = 1700); -- Correlated subquery example SELECT * FROM employees e WHERE salary > (SELECT AVG(salary) FROM employees WHERE department_id = e.department_id); ``` --- 意見 -- SQL 中的檢視是根據查詢結果產生的虛擬表，提供了一種簡化複雜查詢並限制對某些資料的存取的方法。 ``` -- Creating a view CREATE VIEW high_paid_employees AS SELECT * FROM employees WHERE salary > 80000; -- Updating a view CREATE OR REPLACE VIEW high_paid_employees AS SELECT * FROM employees WHERE salary > 90000; -- Dropping a view DROP VIEW IF EXISTS high_paid_employees; ``` --- 索引 -- SQL 中的索引透過在列上建立索引來提高查詢效能，從而實現更快的資料檢索。 ``` -- Creating an index CREATE INDEX idx_lastname ON employees(last_name); -- Dropping an index DROP INDEX idx_lastname; ``` --- 交易 -- SQL 中的交易透過將 SQL 語句分組為原子單元來確保資料完整性，從而確保所有語句都成功執行或全部都不執行。 ``` -- Beginning a transaction BEGIN TRANSACTION; -- Committing a transaction COMMIT; -- Rolling back a transaction ROLLBACK; ``` --- 儲存過程 ---- SQL中的預存程序是儲存在資料庫中的預編譯的SQL程式碼，可以透過單一命令執行，通常用於封裝頻繁執行的任務 ``` -- Creating a stored procedure CREATE PROCEDURE get_employee (IN employee_id INT) BEGIN SELECT * FROM employees WHERE employee_id = employee_id; END; -- Executing a stored procedure CALL get_employee(100); -- Modifying a stored procedure ALTER PROCEDURE get_employee (IN employee_id INT) BEGIN SELECT employee_id, first_name, last_name FROM employees WHERE employee_id = employee_id; END; -- Dropping a stored procedure DROP PROCEDURE IF EXISTS get_employee; ``` --- 備份與復原 ----- SQL 中的備份和復原涉及建立資料庫備份以防止資料遺失，並在資料庫發生故障或損壞時還原它們。 ``` -- Creating a full backup BACKUP DATABASE dbname TO disk = 'path_to_backup'; -- Creating a differential backup BACKUP DATABASE dbname TO disk = 'path_to_backup' WITH DIFFERENTIAL; -- Creating a transaction log backup BACKUP LOG dbname TO disk = 'path_to_backup'; -- Restoring from a backup RESTORE DATABASE dbname FROM disk = 'path_to_backup'; ``` --- SQL 方言和特定於供應商的擴展 ---------------- 雖然 SQL 是一種標準化語言，但不同的資料庫供應商已經實作了自己的擴充和方言，導致不同 RDBMS 之間 SQL 的編寫和執行方式略有不同。這些變更可能會影響使用特定資料庫系統的開發人員可用的語法、函數和特性。 例如，以下是特定於供應商的 SQL 方言和擴展的一些範例： **甲骨文SQL** ： - Oracle SQL 包括專有擴展，例如分層查詢、分析函數和用於資料建模的 MODEL 子句。 - 範例： `SELECT CUBE(product, region) FROM sales;` （CUBE 是 Oracle 特定的用於產生小計的擴充） **SQL Server（微軟）** ： - SQL Server 包含 T-SQL (Transact-SQL)，它透過串流控制語言建構、錯誤處理和流程程式設計建構等功能擴展了標準 SQL。 - 範例： `SELECT ISNULL(column_name, 'default_value') FROM table_name;` （ISNULL 是一個 T-SQL 函數） **MySQL** ： - MySQL 包括空間資料類型和函數、視窗函數以及用於正規表示式匹配的 REGEX 運算子等擴充。 - 範例： `SELECT column_name REGEXP '^pattern' FROM table_name;` （REGEXP 是 MySQL 特定的運算子） **PostgreSQL** ： - PostgreSQL 包括陣列、JSON 支援、全文搜尋和範圍資料類型等擴充。 - 範例： `SELECT column_name || 'suffix' FROM table_name;` （|| 是 PostgreSQL 特定的字串連接運算子）  所以最合乎邏輯的方法是： 1. **基礎知識**：了解關聯式資料庫設計的基礎：實體、鍵、關係…。 。 2. **SQL** ：學習 SQL 作為獨立語言的基礎知識。 3. **選擇 RDBM** ：選擇最適合您的 RDBMS，然後按照其所有特殊語法和結構來使用它。 結論 -- SQL 本身就是一個廣闊的領域，包含許多我們沒有涉及的概念。事務、備份和文件管理只是更廣泛範圍的幾個範例。然而，對於像我們這樣的後端工程師來說，我們所介紹的基礎知識足以作為 SQL 的基礎概述。 --- 原文出處：https://dev.to/louaiboumediene/mastering-sql-comprehensive-guide-to-structured-query-language-4gh
我在 20 年內創辦了 30 家新創公司。 創投支援、引導、應用程式、SaaS、B2B、B2C。 我後悔犯過的所有錯誤： 1. 做消費者應用程式。 ============ 這裡的失敗率是 B2B 失敗率的 100 倍，幾乎是中樂透。 2. 籌集創投資金。 ========== 當我們籌集第一輪資金時，我感覺就像馬克祖克柏一樣。所有採訪我們的記者。感覺就像一場夢。 最終，大多數這些新創公司都因過早獲得資金而失敗。 3. 招聘太早。 ======== 此前，新創公司對大型團隊感到自豪——這是當時成長的關鍵指標。 創辦人應該完成 PMF 之前的大部分工作。 員工和承包商不會對您的專案有足夠的熱愛和熱情。 4.忽略搜尋引擎優化。 =========== 我的網路中沒有人做過搜尋引擎優化。我們都認為這已經太晚了，所以我們一直推遲它。 5.忽視內容行銷。 ========= 從來沒有認真對待過部落格。大錯。 6.社群媒體行銷。 ========= 這是我最大的遺憾。我一年前開始使用推特。現在已經有2萬粉絲了。如果我從20年前開始會怎樣？現在我可以有 100 萬粉絲嗎？我想是這樣。 7. 跳過創意驗證。 ========== 我總是為觀眾假設。預測他們需要什麼。這幾乎從未被證明是真的。 我最好的專案是那些我認為會失敗的專案，而失敗的專案一開始就是我最大的希望。 8. 招募經理。 ======== 我還沒有在新創公司中見過任何有用的經理。 他們可能對公司有用，但對新創公司來說，我應該只僱用實干家。 9. 追逐投資者。 ========= 對於每家新創公司，我會花 40% 的時間進行融資。 在大多數情況下我都會成功，但代價是什麼？ 我已經兩年沒有與投資者進行過一次接觸了，但是風投們來敲我的門，因為我有很好的吸引力，他們每天都在尋找這樣的專案。 10.聘請專業開發人員。 ============ 對於新創公司來說，沒有什麼比專業開發團隊更有效率的了。 如今，我的 1 位全端開發人員在專案上取得的進展比當時 12 人團隊多了 5 倍。 不惜一切代價避免「團隊」。 11. 僱用我不想擁抱的人。 ============== 我的共同創辦人、一位丹麥老人在 2015 年對我說過這句話。 12. 押注於合作夥伴。 ============ 我曾多次與價值數十億美元的大型公司和不同的新創公司合作。 他們承諾提供巨大的東西，數以百萬計的用戶，但最終只是浪費你的時間，破壞焦點，轉移優先級，讓你花費無數的錢來提高安全性和合規性，最終沒有帶來任何使用者/金錢。 13. 閃亮的物體。 ========== 我被 crypt0 的炒作所迷惑。變得超級富有，然後失去了一切。 浪費了很多年。看到人類是多麼的欺騙和貪婪，甚至是我自己的伴侶，我幾乎感到沮喪。 14. 堅持一個糟糕的專案太久。 ================ 在多年沒有吸引力後，我仍然相信專案。 我以為有一天，會發生一些神奇的事情，一切都會好轉。這只是浪費時間。 15. 參加技術會議。 =========== 這完全是浪費時間。 那裡的大多數人都是公司的「好」員工，他們被派到那裡作為對公司忠誠的額外福利。 16. Scrum 是一個騙局。 ================ 如果我的團隊每天早上都必須像幼兒園的孩子一樣被問題困擾，那麼事情最終會失敗。我能做的唯一一件好事是和那些成年人、可以自己管理自己的事情的人在一起。我們只需透過聊天就目標和計劃同步完成所有事情。 17. 外包開發和行銷。 ============ 賣家的態度很好，但結果卻不好。 新創公司是如此困難，以至於外部人幾乎沒有機會為他們做好工作。 18. 從 B2B 領域的免費方案開始。 ==================== 免費專案吸引了完全錯誤的人群，他們提供的回饋只是為了取悅其他「免費」人群。然而，「付費」用戶卻截然不同，並且有不同的需求。 有幾次，我一開始沒有免費版本，沒有銷售，所以後來我加入了免費版本。但這也是一個錯誤。如果沒有人願意為我的產品付費，我就必須修復它或為它尋找其他受眾。 19. 從頭開始編寫程式碼。 ============== 我的團隊將在前 3 個月內編寫基本的內容，例如身份驗證、管理面板、cruds 等。 這是對時間的巨大浪費。 當我開始使用樣板時，速度提高了 10 倍。 20. 與家人和朋友相處的時間很少。 ================== 我工作太多了。根本沒有放假。 這對我的創造力非常有破壞性。一旦我開始休息，我就變得更有創造力。 質>數量。 就是這樣。 我每天都在[twitter.com/johnrushx](https://twitter.com/johnrushx)分享我的經驗 [在這裡查看我的所有專案](https://johnrush.me/) --- 原文出處：https://dev.to/johnrushx/i-built-30-startups-in-20-years-3j41
效率和生產力不僅是開發人員的目標，也是必需品。我們製作了大量的工具並編寫了日常任務的腳本，所有這些都是為了騰出時間來處理真正重要的事情。在當今龐大的開發者生態系中，一系列[生產力工具](https://www.devzero.io/blog/ai-tools-for-software-developers-in-2023-to-boost-dev-productivity)隨時可以簡化我們的工作流程。 生產力工具的作用不僅僅是減少重複性任務的[時間](https://www.devzero.io/blog/time-management-tools-and-tips-boosting-productivity-for-software-developers)。它們在管理程式碼和促進團隊協作方面至關重要。借助正確的工具包，開發人員可以將注意力從平凡轉向創新，以新的自由度來應對創意挑戰。讓我們深入了解頂級開發者生產力工具，以在 2024 年提升您的遊戲水平。 衡量開發人員的生產力 ---------- 首先，讓我們解決一個基本問題：我們如何衡量開發人員的生產力？開發人員的日常生活不僅包括編寫程式碼，因此衡量生產力需要廣泛審視整個軟體開發過程的效率和有效性。 我們可以追蹤熟悉的指標，例如程式碼行數、開發的功能、修復的錯誤和交付時間表。然而，真正理解生產力需要一種整體方法，一種權衡軟體開發的有形和無形方面的方法。因此，考慮品質、影響和協作也很重要。 了解生產力工具 ------- 接下來，我們來詳細分析開發人員可以使用的不同類型的生產力工具： - IDE、程式碼編輯器和助手是任何開發人員武器庫的基石，為編碼、編輯、測試和除錯提供整合平台。 - 開發環境確保開發人員可以專注於編寫程式碼，而不是管理基礎架構。 - 專案管理和協作工具對於組織任務、追蹤進度和確保團隊溝通順暢至關重要。 - 設計和原型工具使開發人員能夠製作引人注目的視覺設計並改進其應用程式的 UI/UX。 - 偵錯工具對於快速辨識和修復錯誤和其他程式碼問題至關重要。 - 框架和抽象可以幫助開發人員透過重複使用通用元件更快地交付程式碼。 - 部署應用程式是最後一步，但確保效能和穩定性是關鍵。 從編碼的基礎工作到使用者介面和團隊協作的微調，每個類別在提高生產力方面都發揮著至關重要的作用。 IDE、程式碼編輯器和助手 ------------- 讓我們來看看 2024 年一些流行的 IDE 和程式碼編輯器。 1. IntelliJ IDEA --------- [IntelliJ IDEA](https://www.jetbrains.com/idea/)是 Java 和 Kotlin 開發人員的首選 IDE，提供的綜合[開發環境](https://www.devzero.io/blog/why-software-development-environments-are-important-and-how-to-manage-them-effectively)遠遠超出 Atom 等簡單程式碼編輯器所提供的功能。此 IDE 具有出色的高級功能，例如深入程式碼理解以實現卓越的導航和重構。與基本編輯器不同，IntelliJ 整合了資料庫和版本控制的基本工具，透過讓您所需的一切觸手可及來簡化您的工作流程。 IntelliJ 社群版免費提供，並提供對其功能的廣泛探索，但存取權限僅限於學生、BootCamp 成員和特定焦點小組。對於其他人來說，專業版的價格約為每月 20 美元，並且可以完全存取 IntelliJ 強大的工具套件。 2. Visual Studio Code -------------------- Microsoft 的[Visual Studio Code](https://code.visualstudio.com/)是跨所有框架、語言和程式庫的開發人員的首選程式碼編輯器。其突出的特點是一個龐大的擴展庫，旨在提高生產力。想像一下，利用 TabNine 進行 AI 驅動的程式碼補全，或整合 GitHub Copilot，利用其 AI 輔助功能將編碼速度提高十倍。除此之外，Visual Studio Code 還提供內建的 Git 控制、用於 shell 命令的整合終端以及用於無縫程式碼分析的專用偵錯器。 最重要的是，它完全免費，並且與 Windows、Mac 和 Linux 平台普遍相容。 3. AppMap ------- [AppMap](https://www.appmap.io/)是一種視覺化工具，可提供應用程式程式碼庫內互動的詳細概述。它為開發人員提供了整個應用程式中資料流和控制的圖形表示，幫助他們更直觀地理解複雜的系統。透過 AppMap，開發人員可以輕鬆瀏覽不同的元件，了解模組之間的依賴關係，並確定潛在的最佳化或重構領域。透過直觀地繪製應用程式的內部工作原理，AppMap 增強了開發團隊之間的協作，並有助於在開發過程中做出更好的決策。 Appmap 最近推出了 Navie。 Navie 是一種生成編碼 AI，具有 API 和資料庫感知能力，因此它可以為整個程式碼庫中的複雜變更提供程式碼建議。 Navies 回答並建議針對開發人員問題進行程式碼更改，例如「我的資料庫查詢效能很慢。我如何解決它？或“我需要更改令牌系統以提高身份驗證安全性，我該如何進行？” 海軍的建議針對每位開發人員及其正在開發的軟體進行高度個人化，同時確保您的 IP 安全。 4.Copilot ----- 向無可爭議的版本控制統治者屈服：GitHub。憑藉其一系列強大的功能，包括透過 GitHub 工作流程進行自動化部署、 [GitHub Copilot](https://github.com/features/copilot)的人工智慧驅動協助以及 Dependabot 的主動安全修補，GitHub 處於開發創新的前沿。就像 Visual Studio Code 是編碼的首選一樣，GitHub 是開發人員進行版本控制的首選平台。 GitHub 的免費套餐包含豐富的產品，非常適合小型團隊、獨立開發人員、自由工作者和新創公司。但對於大型組織和企業來說，Teams 計劃（每位使用者每月3.67 美元）和Enterprise 計劃（每位使用者每月19.25 美元）解鎖了一系列高級功能，例如GitHub Codespaces，這是與GitHub 無縫整合的虛擬IDE，可直接在平台內進行編碼。此外，付費方案還提供增強的協作功能，例如能夠任命多個拉取請求審閱者和指定程式碼擁有者，從而簡化開發流程並確保程式碼品質。 此類別中出現的另外兩個工具是[SuperMaven](https://supermaven.com/)和[TabbyML](https://github.com/TabbyML/tabby) ，兩者都使用快速且安全的 LLM 來完成程式碼完成和建議。 開發環境 ---- 在當今的微服務和複雜的基於雲端的服務和第三方庫的世界中，本地主機無法提供所需的適當環境。這會導致整個 SLDC 不斷重構並減慢部署週期。 5.DevZero --------- [DevZero](https://www.devzero.io/)是一個為開發人員在雲端提供一致的、類似生產的開發環境的平台。開發人員可以在他或她的本機電腦上工作，但仍然體驗生產環境的所有細微差別，例如資料庫、雲端原生服務等。到生產都是一致的。新開發人員只需幾分鐘即可入職，而不是幾天。這使工程組織具有一致性和易於管理。不再除錯本機。 DevZero 的一個顯著優勢是縮短了 CI 時間。開發人員可以節省重構和編譯基礎架構處理所花費的寶貴時間，因為現在他們可以立即在生產環境中執行本機程式碼。這也提高了整體發布頻率並消除了在不同環境中進行測試的障礙。 協作和專案管理 ------- 開發人員經常處理無數的選項卡，並且可能會跨多個顯示器進行操作，但切換平台以進行協作和任務管理的想法可能是一個真正的痛點。讓我們深入研究一些旨在提高開發人員生產力和促進無縫團隊協作的關鍵工具。 6. Slack ----- Slack 徹底改變了遠端協作，使公司能夠即時通訊和共享文件。對於開發人員來說，它是協作的動力源泉，可與 GitHub 等工具無縫集成，以即時更新程式碼推送或部署。這種整合確保每個人都能及時了解專案狀態，而無需不斷地來回訊息。您可以透過 Slack 的整合使用任何專案管理工具，例如 Trello、JIRA 等。 Slack 透過可自訂的工作流程和應用程式進一步發展，讓平台內任務和問題管理。雖然免費計劃支援基本通訊和最多十個集成，但要擴展到自訂自動化及其他功能，需要升級到專業計劃（每人每月 8.25 歐元）或商業計劃（每人每月 14.10 歐元）。這種靈活性使 Slack 成為追求效率和簡化工作流程的開發團隊不可或缺的工具。 7. Height ----- 在管理專案和維持組織性方面，擁有可靠的工作追蹤工具至關重要。 [Height](http://height.app/)是一款功能強大的專案管理工具，提供廣泛的功能，旨在簡化協作並最大限度地提高效率。借助 Height，開發人員可以輕鬆分配任務、設定截止日期、追蹤進度並監控團隊績效。其直覺的收件匣式介面和強大的分析功能使其成為希望掌控工作量並按時交付專案的團隊的首選。 8. Linear ----- [Linear.app](https://linear.app/)是一個專案管理和問題追蹤工具，旨在幫助團隊更有效地協作和管理工作。 Linear 提供了一個用於組織任務、追蹤進度和促進團隊成員之間溝通的平台。該工具以其時尚且用戶友好的介面而聞名。 9. Pullflow ----- 審查 PR 很多時候是工程組織的瓶頸。它不像編寫程式碼那樣有回報，並且需要上下文切換。 [Pullflow](https://pullflow.com/)旨在透過其人工智慧增強的程式碼審查協作功能來減少上下文切換並改善溝通和公關管理。 Pullflow 整合了 VSCode、Github 和 Slack 之間的 PR 通信，因此開發人員無需進行上下文切換。 設計和原型製作工具 --------- 開發人員從頭開始精心設計設計並仔細考慮每個佈局、顏色和字體選擇的時代已經演變。今天的 UI/UX 開發人員享受 Figma 等工具的重大飛躍，其中設計與程式碼相結合。讓我們詳細探討一下。 10. Figma ------- [Figma](https://www.figma.com/)透過提供可無縫整合到專案中的現成程式碼片段，徹底改變了設計到開發流程。在過去的一年裡，Figma 推出了許多插件，為 React、Vue 甚至 HTML 等流行框架提供樣板元件，並支援 Figma 設計直接轉換為 Webflow。 FigJam 是一項出色的功能，事實證明，它對於規劃和確定建造和發布的範圍、衝刺規劃和製作架構圖非常有價值。它在協作和策略規劃階段的效用怎麼強調都不為過。 由於其基於網路的特性，Figma 提供了無與倫比的易用性，並輔以適用於 Windows 和 macOS 的專用桌面應用程式。您需要加入其中一項付費方案才能使用開發模式並存取所有設計元素的程式碼。如果您使用組織計劃，您甚至可以使用私人插件。 11.Whimsical和Excalidraw ------------------ 在解釋複雜概念或設計系統架構時，圖表和視覺化通常是必不可少的。 [Excalidraw](https://excalidraw.com/)和[Whimsical](https://whimsical.com/)是兩種流行的快速繪圖工具，可讓開發人員輕鬆建立圖表。憑藉其簡單而強大的介面，開發人員可以立即建立線框、流程圖和其他視覺表示。這些工具非常適合集思廣益並向利害關係人展示概念，使它們成為開發人員工具包的寶貴補充。 偵錯工具 ---- 除錯是軟體開發生命週期中最具挑戰性和最耗時的部分之一。然而，正確的警報和監控系統可以節省無數時間。讓我們深入研究可以顯著簡化除錯過程、提高效率並減少開發工作流程中的停機時間的基本工具。 12.Postman ----- [Postman](https://www.postman.com/)已成為測試和記錄 API 的基礎 API 開發工具，因其在除錯生產和本地 API 方面的強大能力而贏得了開發人員的廣泛認可。它使用戶能夠發送和模擬 HTTP 請求，這項功能對於等待後端 API 準備就緒的前端開發人員特別有利，可確保持續進展。 除了在測試中的實用性之外，Postman 還充當 API 文件的集中儲存庫，促進團隊內的無縫共享和協作。其基本計劃（每個用戶每月 14 美元）對於大多數開發人員來說應該足夠了。 13.Sentry ----- [Sentry](https://sentry.io/)是效能監控和錯誤追蹤領域的強大工具，擅長自動辨識程式碼庫中的錯誤和錯誤。 Sentry 的 SDK 適用於幾乎所有廣泛使用的框架和技術（包括 JavaScript、PHP、Python 和 Ruby），可無縫整合到您的專案中。 檢測到錯誤後，Sentry 會提供全面的見解，例如堆疊追蹤、來源頁面和使用者訊息，這些對於有效診斷和解決問題非常寶貴。此外，程式碼覆蓋率和會話重播等功能被證明是不可或缺的，尤其是在面臨重現難以捉摸的錯誤的艱鉅任務時。 Sentry 的功能確保開發人員可以花更少的時間進行故障排除，而將更多的時間用於開發，從而提高整體生產力和程式碼品質。 您可以嘗試 Sentry 及其免費的單獨開發者計畫。然而，為了充分利用它，我建議嘗試團隊計劃（每月 26 美元），您可以將隊友加入到 Sentry 工作區。您還需要每月支付 29 美元購買程式碼覆蓋率。 框架和抽象 ----- 當今的許多元件在應用程式中都很常見：身份驗證、授權、資料庫存取、UI 元件等。寫內容從頭開始。 14.Vercel ------ 建置和部署 Web 應用程式可能是一項複雜的任務，尤其是當專案規模不斷擴大時。 Web 應用程式部署框架（例如 Vercel）為開發人員提供了簡化且可擴展的解決方案來部署其 Web 應用程式。 [Vercel](https://www.vercel.com/)是一個雲端平台，旨在簡化 Web 應用程式的部署和託管。它以專注於透過提供自動部署、無伺服器功能和全球內容交付等功能為開發人員提供無縫體驗而聞名。 15. Neurelo ------ [Neurelo](https://www.neurelo.com)為您的資料 API 提供了一個與資料庫無關的程式設計介面。 Neurelo 無需學習 MongoDB 或 PostgreSQL 的查詢語言並為它們建立 API，而是在幾分鐘內為您提供優化的自動生成的 API，包括模式建置器，以及使用 Git 管理開發、登台和生產環境的界面類似版本控制來管理追蹤更改。最後，它使用人工智慧提供自動生成的文件以及透過點擊生成和測試複雜查詢的能力。 許多公司最終會產生自己的抽象層來管理開發人員的資料庫存取或使用 SQLAlchemy 或 Hibernate 等物件關係映射器 (ORM)。 Neurelo 建立了一個通用的強大且與資料庫無關的替代方案。 部署應用程式 ------ 16. Fly.io --------- 部署應用程式可能是一個複雜且耗時的過程。應用程式部署工具（例如[Fly.io](http://fly.io/) ）旨在透過提供一個用於輕鬆部署和管理應用程式的平台來簡化此流程。 Fly.io是一個提供全球應用部署網路的平台。它允許開發人員在跨越全球多個地點的分散式基礎設施上部署和執行他們的應用程式。 Fly.io 專注於透過將應用程式執行個體分佈在更靠近最終用戶的位置來優化應用程式效能，減少延遲並改善整體用戶體驗。 該平台支援各種程式語言和框架，使開發人員能夠部署各種應用程式，包括Web應用程式、API和微服務。 Fly.io 使用邊緣運算和全球選播網路的組合來最佳化路由並確保使用者要求定向到最近的可用應用程式實例。 17. Tigris ----------- [Tigris](https://www.tigrisdata.com/)是一種與 S3 相容的全球分散式物件儲存服務，它將資料儲存為物件儲存桶中。物件是一個文件和描述該文件的任何元資料。桶子是存放物件的容器。 哪個才是最好的開發工具？ ------------ 只要您的武器庫中擁有每個類別中的任何一種工具，您就可以開始使用了。但如果我必須為您選擇一種工具，我會選擇 Visual Studio Code。它因其多功能性、對語言和框架的廣泛支援以及強大的擴展生態系統而脫穎而出，使其成為首選。 工程生產力工具 ------- 工程生產力工具支援軟體開發的特定工程方面。這可能包括分析、自動化測試、部署、容器化或靜態程式碼分析。使用這些工具，您可以確保程式碼品質和效能，並在開發週期的早期發現潛在問題。一些常見的工程生產力工具包括Docker、Jenkins、Confluence、JIRA等。 結論 我很想知道 2024 年您會從這個[清單](https://www.devzero.io/blog/how-to-calculate-developer-productivity-metrics-using-mergestat-and-devzero)中選擇哪種工具。從本質上講，GitHub 和 Visual Studio Code 是 2024 年的必備工具。我仍在研究它們，誰知道呢，它們可能會出現在 2025 年的清單中。 本文原刊於 https://www.devzero.io/blog/best-developer-productivity-in-2024 --- 原文出處：https://dev.to/shohams/17-best-developer-productivity-tools-to-try-1a2a
幾天前，微軟發布了新[Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701)的早期版本。 Windows 終端是一種新型、現代化、快速、高效、強大且高效的終端應用程式，適用於命令列工具和 shell（例如命令提示字元、PowerShell 和 WSL）的使用者。 其主要功能包括多個選項卡、Unicode 和 UTF-8 字元支援、GPU 加速文字渲染引擎以及自訂主題、樣式和配置。 顯然，這是一個託管在 GitHub 上的開源專案： <https://github.com/microsoft/terminal> 請隨意參與。 目前它有點不穩定，將來會推出更多功能，但我已經使用它幾天了，我喜歡這個想法。 到目前為止，我一直在使用[Cmder](https://cmder.net/) ，但 Windows Terminal 有一些新的有前景的功能。 如何安裝 ---- 您可以直接從 Windows 應用程式商店安裝 Windows 終端，或者如果您想了解它的工作原理，您可以下載原始程式碼、建置它並啟動終端。  商店版本的連結： <https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701> GitHub 專案的連結： <https://github.com/microsoft/terminal> 原始碼和專案都有很好的文件記錄。 第一次發射 ----- 如果您從“開始”功能表啟動該應用程式，它將如下面的螢幕截圖所示。  預設終端是 PowerShell。 如果按一下「+」符號，應用程式將在新分頁中啟動另一個終端。 如果您按一下向下箭頭符號 ⬇，您可以從清單中選擇新終端。 清單下方還有另一個有趣的按鈕，就是設定按鈕。 設定 -- 如果按一下向下箭頭，然後按一下「設定」按鈕，此時，設定檔案（它是 JSON 檔案）將在 Visual Studio 的新實例中開啟。 如果您想要直接開啟文件，可以開啟 Visual Studio Code 並直接從下列目錄開啟檔案： **%USERPROFILE%\\AppData\\Local\\Packages\\Microsoft.WindowsTerminal\_8wekyb3d8bbwe\\LocalState** 在此文件中，您可以找到 Windows 終端機的所有設定。 目前，您只能透過該文件與設定進行交互，但將來，將向應用程式加入 UI。 新增的個人資料 ------- 如果要新增新的設定文件，請前往 JSON 設定檔的「設定檔」部分，然後新增新的設定檔部分，如下所示： ``` { ``` ``` "acrylicOpacity" : 0.85, ``` ``` "background" : "#012456", ``` ``` "backgroundImage" : "C:/users/barto/AppData/Local/Packages/Microsoft.WindowsTerminal_8wekyb3d8bbwe/RoamingState/unicorn.gif", ``` ``` "backgroundImageOpacity" : 0.7, ``` ``` "backgroundImageStretchMode" : "uniformToFill", ``` ``` "closeOnExit" : false, ``` ``` "colorScheme" : "Solarized Dark", ``` ``` "commandline" : "powershell.exe", ``` ``` "cursorColor" : "#00FF00", ``` ``` "cursorHeight" : 25, ``` ``` "cursorShape" : "vintage", ``` ``` "fontFace" : "Fira Code", ``` ``` "fontSize" : 12, ``` ``` "guid" : "{79285a8e-036c-446f-8a9c-78994e34bf78}", ``` ``` "historySize" : 9001, ``` ``` "icon" : "ms-appdata:///roaming/pwsh-32.png", ``` ``` "name" : "PowerShell with Unicorn", ``` ``` "padding" : "0, 0, 0, 0", ``` ``` "snapOnInput" : true, ``` ``` "startingDirectory" : "%USERPROFILE%", ``` ``` "useAcrylic" : false ``` ``` } ``` 如果您想從此處複製此部分，請注意指南。 請記住每次貼上文件時都要更改它。 例如，它用於設定預設終端，並且它在檔案中必須是唯一的。 正如您在我的個人資料部分中看到的，您可以加入圖像作為背景、更改字體大小、遊標形狀等等。 例如，我使用 Fira Code 作為字體，因為我也喜歡 Visual Studio Code 中的它。 它在文本中加入了一些很棒的體驗。 您可以從這裡下載： <https://github.com/tonsky/FiraCode> 如果您想在會議上給您的朋友或與會者留下深刻印象，您可以加入 gif 作為背景。 您可以在下圖中看到它的實際效果。  配色方案 ---- 在profiles.json 檔案的末尾，您可以找到一個名為「schemes」的部分。 從這裡您可以新增或更改終端的預設顏色。 如果您想在新設定檔中使用它，則必須在屬性「name」和設定檔部分的「colorScheme」屬性中插入相同的方案名稱。 分享您的個人資料 -------- 我在我的個人資料上建立了一個新要點來共享我的個人資料設置，您可以在這裡找到它： <https://gist.github.com/kasuken/076d68b92e2a67dfda591587c77a40c0#file-profiles-json> 。 在評論中分享您的個人資料！ 我們一起可以創造一些很棒的東西！  ### 我的動圖 有些使用者要求提供 gif 動圖。 我在下面分享它們！    --- 原文出處：https://dev.to/kasuken/how-to-customize-the-new-windows-terminal-with-visual-studio-code-56b1
*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 開發者們大家好，如果您一直從事程式設計和軟體開發，那麼您就會知道，在我們的領域中只有一個常數，那就是「變化」。 我們總是需要學習新的工具、技術、框架和技能來完成我們的工作，而且永無止境。如果你不學習，你就會和其他人一起落後，這就是為什麼我總是尋找新技能來學習。 在本文中，我將分享程式設計師和開發人員在 2024 年可以學習的 5 項技能，以更好地完成工作並提高效率。 過去，我討論過[API 網關與負載平衡器、](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的區別，你們非常喜歡，在本文中我將分享最重要的五種開發人員技能2024 年成為舞台中心。 ***PS 繼續閱讀直到最後。我有一份獎金給你。*** 這些技能包括新舊但必不可少的技能，例如快速工程、編碼、雲端運算領域、系統設計和Python，這些技能是任何軟體開發人員都需要的基本技能。 無論您是想要提升自己的經驗豐富的開發人員，還是想要提升自己形象的中級開發人員，這些技能都一定會對您有所幫助。 2024 年軟體工程師應該學習的 5 項技能 ---------------------- 在不斷發展的技術領域，對於尋求在 2024 年及以後蓬勃發展的開發人員來說，保持領先地位至關重要。 當我們探索軟體開發的動態領域時，某些技能已經成為現代開發人員不可或缺的技能，這就是您將在本文中學到的內容。 讓我們深入探討預計在 2024 年產生重大影響的前五項開發人員技能。 ### 1. 系統設計 到 2024 年，開發人員需要超越傳統的程式設計實踐，擁抱現代系統設計原則。這涉及了解分散式系統、微服務架構以及設計可擴展和彈性的應用程式。 能夠應對系統設計複雜性的開發人員能夠更好地建立強大的解決方案，以滿足快速發展的技術環境的需求。 如果您想深入學習系統設計，那麼您也可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 [](https://bit.ly/3pMiO8g) 如果您需要更多資源，那麼這裡有[系統設計書籍](https://www.linkedin.com/pulse/8-best-system-design-books-programmers-developers-soma-sharma/)、 [課程](https://www.linkedin.com/pulse/10-best-system-design-courses-beginners-experienced-2023-soma-sharma/)和[網站](https://javarevisited.blogspot.com/2022/08/top-7-websites-to-learn-system-design.html)的列表，供您在 2024 年學習和掌握軟體設計和架構。 --- 2. 快速工程 ------- 在這個人工智慧工具的時代，軟體開發並非一成不變，越來越多的人工智慧工具來幫助您進行編碼、除錯和測試，但您需要及時的工程設計才能有效地利用這些工具。 換句話說，快速工程已成為旨在快速交付高品質產品的開發人員的關鍵技能。 這不僅涉及編寫高效、簡潔的程式碼，還涉及採用敏捷方法和工具來簡化整個開發過程。 精通即時工程的開發人員可以快速回應不斷變化的需求，確保他們的軟體在面對不斷變化的市場需求時保持適應性和彈性。 如果您需要資源來學習 ChatGPT 和提示工程，那麼我建議您查看 Coursera 上的[針對開發人員的 ChatGPT 提示工程](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fchatgpt-prompt-engineering-for-developers)課程。 [](https://medium.com/javarevisited/top-5-chatgpt-online-courses-for-2023-e6fc706cc483) 如果您需要更多選項，那麼您也可以查看這些[ChatGPT 和 Prompt Engineering 課程](https://javinpaul.medium.com/top-10-udemy-courses-to-learn-artificial-intelligence-in-2023-85a10ef473ca)以了解更多資訊。 --- 3. 編碼 ----- 雖然編碼似乎是一項顯而易見的技能，但其重要性怎麼強調也不為過。掌握編碼不僅限於編寫功能性程式；它涉及編寫乾淨、可維護和可擴展的程式碼。 開發人員應該專注於提高程式語言的熟練程度、理解演算法和實施最佳實踐。 堅實的編碼基礎是任何開發工作成功的基石。而且，如果您需要資源，可以查看[《2024 年完整 JavaScript 課程：建立真實專案》](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-javascript-course%2F)作為開始。 [](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-javascript-course%2F) 如果您需要更多選擇，您也可以查看這些[**程式設計和程式設計課程**](https://medium.com/javarevisited/7-best-coding-course-to-learn-programming-with-zero-experience-in-2020-52f7d0d9cb80) --- 4.雲端運算 ------ 雲端運算已經從一個流行詞變成了開發人員的基本技能。隨著對雲端服務的依賴日益增加，開發人員必須精通在雲端環境中部署、管理和最佳化應用程式。 AWS、Azure 和 Google Cloud 等平台是現代開發不可或缺的一部分，精通雲端運算的開發人員可以建立可擴展且經濟高效的解決方案。 而且，如果您需要資源，可以查看這些文章，您可以在其中找到強烈建議的[**資源來學習雲端運算**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) [](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) 而且，如果您需要更多選擇，還可以參考這篇文章，您可以在 Coursera 上找到強烈推薦的[AWS 基礎專業課程](https://medium.com/javarevisited/top-10-courses-to-learn-amazon-web-services-aws-cloud-in-2020-best-and-free-317f10d7c21d)。該程式是AWS自己建立的。 --- ### 5.Python [Python](https://www.python.org/)繼續維護其作為多功能且強大的程式語言的主導地位。從 Web 開發到資料科學、機器學習和人工智慧，Python 始終處於創新的前沿。 2024 年的開發人員應該投資掌握 Python，因為它不僅有助於快速開發，而且還提供了通往塑造產業未來的眾多尖端技術的入口網站。 如果你想在 2024 年學習並掌握 Python，你可以從 Python 課程[100 Days of Code: The Complete Python Pro Bootcamp for 2024 開始](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F)，我現在也用它來學習 Python。 [](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F) 如果您需要更多資源，您也可以查看這些[Python 書籍](https://javarevisited.blogspot.com/2019/07/top-5-books-to-learn-python-in-2019.html)、 [課程](https://betterprogramming.pub/top-5-courses-to-learn-python-in-2018-best-of-lot-26644a99e7ec)和[網站](https://medium.com/javarevisited/10-free-python-tutorials-and-courses-from-google-microsoft-and-coursera-for-beginners-96b9ad20b4e6)來深入學習 Python。 這就是**您在 2024 年可以學習的 5 項最重要的開發人員技能**。總之，2024 年頂尖開發人員技能反映了業界對敏捷性、適應性和卓越技術的需求。 無論您是經驗豐富的開發人員還是剛開始編碼之旅，磨練這些技能無疑將使您成為不斷發展的軟體開發世界中的寶貴資產。 迎接挑戰，保持好奇心，踏上持續學習之旅，在 2024 年及以後的動態格局中蓬勃發展。 ### 獎金 正如所承諾的，這是給您的獎勵，一本免費的書，您可以閱讀它來學習分散式系統設計，您可以下載免費的 PDF 或在 Microsoft 上在線閱讀 --- [https://info. microsoft.com/rs/ 157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf)  請在評論中告訴我您 2024 年將學習哪些技能？我總是渴望學習可以提升我作為軟體開發人員的形象的技能。 謝謝 --- 原文出處：https://dev.to/somadevtoo/5-skills-programmers-and-developers-should-learn-in-2024-3bmp
--- 標題：使用 NextJS 和 Wing 建立您自己的 ChatGPT 圖形客戶端 🤯 描述：使用 Winglang 和 NextJS 建立的 ChatGPT 客戶端應用程式 canonical\_url：https://www.winglang.io/blog/2024/05/16/chatgpt-client-with-nextjs-and-wing 發表：真實 --- 長話短說 ---- 在本文結束時，您將使用 Wing 和 Next.js 建置並部署 ChatGPT 用戶端。 該應用程式可以在本地執行（在本地雲端模擬器中）或將其部署到您自己的雲端提供者。  --- 介紹 -- 建置 ChatGPT 用戶端並將其部署到您自己的雲端基礎架構是確保對資料進行控制的好方法。 將 LLM 部署到您自己的雲端基礎架構可為您的專案提供隱私和安全性。 有時，在使用 OpenAI 的 ChatGPT 等專有 LLM 平台時，您可能會擔心資料在遠端伺服器上儲存或處理，這可能是由於輸入平台的資料的敏感度或其他隱私原因。 在這種情況下，將 LLM 自託管到您的雲端基礎架構或在您的電腦上本地執行可以讓您更好地控制資料的隱私和安全性。 > [Wing](https://git.new/wing-repo)是一種面向雲端的程式語言，可讓您建置和部署基於雲端的應用程式，而無需擔心底層基礎架構。 它允許您使用相同的語言定義和管理雲端基礎架構和應用程式程式碼，從而簡化了您在雲端上建置的方式。 Wing 與雲端無關——用它建置的應用程式可以編譯並部署到各種雲端平台。 > {% cta https://git.new/wing-repo %} 看 ⭐ Wing {% endcta %} [](https://git.new/wing-repo) --- 讓我們開始吧！ ------- 要繼續操作，您需要： - 對 Next.js 有一定了解 - 在您的機器上[安裝 Wing](https://www.winglang.io/docs/) 。如果您不知道如何操作，請不要擔心。我們將在這個專案中一起討論它。 - 取得您的 OpenAI API 金鑰。 建立您的專案 ------ 首先，您需要在電腦上安裝 Wing。執行以下命令： ``` npm install -g winglang ``` 透過檢查版本確認安裝： ``` wing -V ``` ### 建立您的 Next.js 和 Wing 應用程式。 ``` mkdir assistant cd assistant npx create-next-app@latest frontend mkdir backend && cd backend wing new empty ``` 我們已在 Assistant 目錄中成功建立了 Wing 和 Next.js 專案。我們的 ChatGPT 用戶端的名稱是 Assistant。聽起來很酷，對吧？ 前端和後端目錄分別包含我們的 Next 和 Wing 應用程式。 `wing new empty`建立三個檔案： `package.json` 、 `package-lock.json`和`main.w` 。後者是應用程式的入口點。 ### 在 Wing 模擬器中本地執行您的應用程式 Wing 模擬器可讓您在本機電腦內執行程式碼、編寫單元測試和偵錯程式碼，而無需部署到實際的雲端供應商，從而幫助您更快地進行迭代。 使用以下命令在本機上執行您的 Wing 應用程式： ``` wing it ``` 您的 Wing 應用程式將在`localhost:3000`上執行。  設定您的後端 ------ - 讓我們安裝 Wing 的 OpenAI 和 React 函式庫。 OpenAI 庫提供了與 LLM 互動的標準介面。 React 程式庫可讓您將 Wing 後端連接到 Next 應用程式。 ``` npm i @winglibs/openai @winglibs/react ``` - 將這些套件匯入到`main.w`檔案中。我們還導入需要的所有其他庫。 ``` bring openai bring react bring cloud bring ex bring http ``` `bring`是 Wing 中的導入語句。這樣想，Wing 使用`bring`來實現與 JavaScript 中`import`相同的功能。 `cloud`是 Wing 的雲端庫。它公開了雲端 API、儲存桶、計數器、網域、端點、函數和更多雲端資源的標準介面。 `ex`是用於與表格和雲端 Redis 資料庫介面的標準庫， `http`用於呼叫不同的 HTTP 方法 - 從遠端資源發送和檢索資訊。 取得您的 OpenAI API 金鑰 ------------------ 我們將在我們的應用程式中使用`gpt-4-turbo`但您可以使用任何 OpenAI 模型。 - 如果您還沒有[OpenAI](https://platform.openai.com/signup)帳戶，請建立一個。若要建立新的 API 金鑰，請前往[platform.openai.com/api-keys](http://platform.openai.com/api-keys)並選擇**建立新金鑰。**  - 設定**名稱**、**專案**和**權限，**然後按一下**建立金鑰。**  初始化 OpenAI ---------- 建立一個`Class`來初始化您的 OpenAI API。我們希望它可以重複使用。 我們將向`Assistant`類別加入`personality` ，以便在向 AI 助手傳遞提示時可以指定 AI 助手的個性。 ``` let apiKeySecret = new cloud.Secret(name: "OAIAPIKey") as "OpenAI Secret"; class Assistant { personality: str; openai: openai.OpenAI; new(personality: str) { this.openai = new openai.OpenAI(apiKeySecret: apiKeySecret); this.personality = personality; } pub inflight ask(question: str): str { let prompt = `you are an assistant with the following personality: ${this.personality}. ${question}`; let response = this.openai.createCompletion(prompt, model: "gpt-4-turbo"); return response.trim(); } } ``` Wing 分別使用`preflight`和`inflight`概念來統一基礎設施定義和應用程式邏輯。 **預檢**程式碼（通常是基礎設施定義）在編譯時執行一次，而執行**中**程式碼將在執行時執行以實現應用程式的行為。 雲端儲存桶、佇列和 API 端點是預檢的一些範例。定義預檢時不需要新增預檢關鍵字，Wing 預設知道這一點。但對於飛行塊，您需要在其中加入“飛行”一詞。 > 上面的程式碼中有一個飛行中的區塊。 Inflight 區塊是您編寫非同步執行時間程式碼的地方，這些程式碼可以透過其 inflight API 直接與資源互動。 > 測試和儲存雲端秘密 --------- 讓我們來看看如何保護我們的 API 金鑰，因為我們肯定要[考慮安全性](https://techhq.com/2022/09/hardcoded-api-keys-jeopardize-data-in-the-cloud/)。 讓我們在後端的根目錄中建立一個`.env`檔案並傳入我們的 API 金鑰： ``` OAIAPIKey = Your_OpenAI_API_key ``` 我們可以在本地引用 .env 檔案來測試 OpenAI API 金鑰，然後由於我們計劃部署到 AWS，因此我們將逐步設定[AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) 。  首先，我們前往 AWS 並登入控制台。如果您沒有帳戶，可以免費建立一個。  導覽至 Secrets Manager，讓我們儲存 API 金鑰值。   我們已將 API 金鑰儲存在名為`OAIAPIKey`的雲端機密中。複製您的金鑰，我們將跳到終端並連接到現在儲存在 AWS 平台中的金鑰。 ``` wing secrets ``` 現在將您的 API 金鑰貼上為終端中的值。您的密鑰現已正確存儲，我們可以開始與我們的應用程式互動。 --- 將人工智慧的回應儲存在雲端。 -------------- 將人工智慧的回應儲存在雲端可以讓您控制資料。它駐留在您自己的基礎設施上，與 ChatGPT 等專有平台不同，您的資料位於您無法控制的第三方伺服器上。您也可以在需要時檢索這些回應。 讓我們建立另一個類，使用 Assistant 類來傳遞 AI 的個性和提示。我們還將每個模型的回應作為`txt`檔案儲存在雲端儲存桶中。 ``` let counter = new cloud.Counter(); class RespondToQuestions { id: cloud.Counter; gpt: Assistant; store: cloud.Bucket; new(store: cloud.Bucket) { this.gpt = new Assistant("Respondent"); this.id = new cloud.Counter() as "NextID"; this.store = store; } pub inflight sendPrompt(question: str): str { let reply = this.gpt.ask("{question}"); let n = this.id.inc(); this.store.put("message-{n}.original.txt", reply); return reply; } } ``` --- 我們為我們的助理設定了「受訪者」的個性。我們希望它能夠回答問題。您也可以讓前端使用者在發送提示時指定此個性。 每次產生回應時，計數器都會遞增，並且計數器的值會傳遞到用於在雲端中儲存模型回應的`n`變數中。然而，我們真正想要的是建立一個資料庫來儲存來自前端的使用者提示和模型的回應。 讓我們定義我們的資料庫。 定義我們的資料庫 -------- Wing 內建了`ex.Table` - 一個用於儲存和查詢資料的 NoSQL 資料庫。 ``` let db = new ex.Table({ name: "assistant", primaryKey: "id", columns: { question: ex.ColumnType.STRING, answer: ex.ColumnType.STRING } }); ``` --- 我們在資料庫定義中新增了兩列 - 第一列用於儲存使用者提示，第二列用於儲存模型的回應。 建立 API 路由和邏輯 ------------ 我們希望能夠在後端發送和接收資料。讓我們建立 POST 和 GET 路由。 ``` let api = new cloud.Api({ cors: true }); api.post("/assistant", inflight((request) => { // POST request logic goes here })); api.get("/assistant", inflight(() => { // GET request logic goes here })); ``` --- ``` let myAssistant = new RespondToQuestions(store) as "Helpful Assistant"; api.post("/assistant", inflight((request) => { let prompt = request.body; let response = myAssistant.sendPrompt(JSON.stringify(prompt)); let id = counter.inc(); // Insert prompt and response in the database db.insert(id, { question: prompt, answer: response }); return cloud.ApiResponse({ status: 200 }); })); ``` 在 POST 路由中，我們希望將從前端收到的使用者提示傳遞到模型中並獲得回應。提示和回應都將儲存在資料庫中。 `cloud.ApiResponse`可讓您傳送對使用者要求的回應。 新增前端發出 GET 請求時檢索資料庫專案的邏輯。 --- 新增前端發出 GET 請求時檢索資料庫專案的邏輯。 ``` api.get("/assistant", inflight(() => { let questionsAndAnswers = db.list(); return cloud.ApiResponse({ body: JSON.stringify(questionsAndAnswers), status: 200 }); })); ``` 我們的後端已經準備好了。我們在本地雲端模擬器中測試一下。 跑`wing it` 。 讓我們轉到`localhost:3000`並向我們的助理詢問一個問題。  我們的問題和助理的回答都已儲存到資料庫中。看一看。  向前端公開您的 API URL --------------- 我們需要將後端的 API URL 公開給 Next 前端。這就是之前安裝的 React 函式庫派上用場的地方。 ``` let website = new react.App({ projectPath: "../frontend", localPort: 4000 }); website.addEnvironment("API_URL", api.url); ``` 將以下內容加入 Next 應用程式的`layout.js`中。 ``` import { Inter } from "next/font/google"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( <html lang="en"> <head> <script src="./wing.js" defer></script> </head> <body className={inter.className}>{children}</body> </html> ); } ``` 我們現在可以在 Next 應用程式中存取`API_URL` 。 實作前端邏輯 ------ 讓我們實作前端邏輯來呼叫後端。 ``` import { useEffect, useState, useCallback } from 'react'; import axios from 'axios'; function App() { const [isThinking, setIsThinking] = useState(false); const [input, setInput] = useState(""); const [allInteractions, setAllInteractions] = useState([]); const retrieveAllInteractions = useCallback(async (api_url) => { await axios ({ method: "GET", url: `${api_url}/assistant`, }).then(res => { setAllInteractions(res.data) }) }, []) const handleSubmit = useCallback(async (e)=> { e.preventDefault() setIsThinking(!isThinking) if(input.trim() === ""){ alert("Chat cannot be empty") setIsThinking(true) } await axios({ method: "POST", url: `${window.wingEnv.API_URL}/assistant`, headers: { "Content-Type": "application/json" }, data: input }) setInput(""); setIsThinking(false); await retrieveAllInteractions(window.wingEnv.API_URL); }) useEffect(() => { if (typeof window !== "undefined") { retrieveAllInteractions(window.wingEnv.API_URL); } }, []); // Here you would return your component's JSX return ( // JSX content goes here ); } export default App; ``` `retrieveAllInteractions`函數取得後端資料庫中的所有問題和答案。 `handSubmit`函數將使用者的提示傳送到後端。 讓我們加入 JSX 實作。 ``` import { useEffect, useState } from 'react'; import axios from 'axios'; import './App.css'; function App() { // ... return ( <div className="container"> <div className="header"> <h1>My Assistant</h1> <p>Ask anything...</p> </div> <div className="chat-area"> <div className="chat-area-content"> {allInteractions.map((chat) => ( <div key={chat.id} className="user-bot-chat"> <p className='user-question'>{chat.question}</p> <p className='response'>{chat.answer}</p> </div> ))} <p className={isThinking ? "thinking" : "notThinking"}>Generating response...</p> </div> <div className="type-area"> <input type="text" placeholder="Ask me any question" value={input} onChange={(e) => setInput(e.target.value)} /> <button onClick={handleSubmit}>Send</button> </div> </div> </div> ); } export default App; ``` 在本地執行您的專案 --------- 導航到您的後端目錄並使用以下命令在本地執行您的 Wing 應用程式 ``` cd ~assistant/backend wing it ``` 也執行您的 Next.js 前端： ``` cd ~assistant/frontend npm run dev ``` 讓我們看一下我們的應用程式。  讓我們透過 Next 應用程式向 AI 助理詢問幾個開發人員問題。  將您的應用程式部署到 AWS -------------- 我們已經了解了我們的應用程式如何在本地執行。 Wing 也允許您部署到包括 AWS 在內的任何雲端提供者。要部署到 AWS，您需要使用您的憑證來設定[Terraform](https://terraform.io/downloads)和[AWS CLI](https://docs.aws.amazon.com/cli/) 。 - 使用`tf-aws`編譯到 Terraform/AWS 。此指令指示編譯器使用 Terraform 作為配置引擎，將所有資源綁定到預設的 AWS 資源集。 ``` cd ~/assistant/backend wing compile --platform tf-aws main.w ``` --- - 執行 Terraform 初始化並應用 ``` cd ./target/main.tfaws terraform init terraform apply ``` --- 注意： `terraform apply`需要一些時間才能完成。 您可以[在此處](https://github.com/NathanTarbert/chatgpt-client-wing-nextjs)找到本教程的完整程式碼。 總結一下 ---- 正如我之前提到的，我們都應該關心我們的應用程式的安全性，建立您自己的 ChatGPT 用戶端並將其部署到您的雲端基礎設施可以為您的應用程式提供一些非常好的[保障](https://docs.aws.amazon.com/whitepapers/latest/aws-overview/security-and-compliance.html#:~:text=Keep%20Your%20data%20safe%20%E2%80%94%20The,compliance%20programs%20in%20its%20infrastructure.)。 我們在本教程中演示了[Wing](https://git.new/wing-repo)如何提供一種簡單的方法來建置可擴展的雲端應用程式，而無需擔心底層基礎設施。 如果您有興趣建立更酷的東西，Wing 擁有一個活躍的開發人員社區，他們可以合作建立雲端願景。我們很高興在那裡見到你。 只需前往我們的[Discord](https://t.winglang.io/discord)打個招呼即可！ --- 原文出處：https://dev.to/winglang/building-your-own-chatgpt-graphical-client-with-nextjs-and-wing-29jj
--- 標題：加入我們參加 AWS Amplify Fullstack TypeScript 挑戰賽：獎品為 3,000 美元！ 發表：真實 描述： 標籤：devchallenge、awschallenge、放大、全端 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z55ngddx33ptj9dapt07.png 使用 100:42 的比例可獲得最佳效果。 ===================== 發佈於: 2024-05-14 20:36 +0000 =========================== --- 我們很高興地宣布我們與 AWS Amplify 的第一個合作挑戰。 [AWS Amplify Fullstack TypeScript 挑戰賽](https://dev.to/challenges/aws)將持續到**5 月 26 日**，提供了一個探索 AWS 服務的廣度和深度以及提升您的技能的機會。 AWS Amplify 擁有您在短短幾個小時內建立 Web 和行動應用程式所需的一切。 **這項挑戰有一個提示，但有幾種獲勝方法！**我們迫不及待地想看看您學到了什麼和取得了什麼成就！ 提示 -- ### 使用 AWS Amplify Gen 2 建置和部署全端應用程式 您的任務是使用 AWS Amplify Gen 2 建立一個整合以下一項或多項功能的應用程式： - **[資料](https://docs.amplify.aws/react/build-a-backend/data/)** - **[驗證](https://docs.amplify.aws/react/build-a-backend/auth/)** - **[無伺服器功能](https://docs.amplify.aws/react/build-a-backend/functions/)** - **[文件儲存](https://docs.amplify.aws/react/build-a-backend/storage)** 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/aws)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20devchallenge%2C%20awschallenge%2C%20amplify%2C%20fullstack%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BThe%20AWS%20Amplify%20Fullstack%20TypeScript%20Challenge%20%5D(https%3A%2F%2Fdevgesto% 2Fawschallenge )* %0A%0A%23%23%20什麼%20I%20內建%0A%3C！ %0A%0A%23%23% 20Demo%0A%3C!--%20Share%20a%20link%20to%20your%20deployed%20solution%20on%20Amplify%20Hosting%2C%20and%20% 20screenshots%20。 2C%20what%20you%20learned%2C%20anything%20you%20are %20尤其%20proud%20of%2C%20what%20you%20hop%20to%20do%20next%2C%20etc.you%20.20to%20do%20next%2C%20etc.%20.20--% %0A%0A**已連接%20Components%20and%2For%20Feature%20Full** % 0A%0A%3C!--%20讓%20us%20知道%20if%20you%20development%20UI%20using%20Amify%20you%20development%20UI%20using%20Amifyify% 20for%20UX%20patterns%2C%20and%2For%20if%20your%20project%20includes %20all%20four%20features%3A%20data%2C%20authentication%2C%20features%3A%20data%2C%20authentication%2C%20features%3A%20data%20function. --%3E%0A%0A%3C!--%20Team%20Submissions%3A %20請%20pick%20one%20member%20到%20publish%20the%20submission%20and%20credit%20teammates%20by%200%20by%20and%20credit%20teammates%20by%20and%20credit%20teammates%20by%的%20DEV%20usernames%20直接%20in%20the%20body%20of%20the%20post。 %20image%20(if%20you%20want).%20--%3E%0A%0A%0A %3C!--%20感謝%20%20參與！%20%E2%86%92%0A %} 提交模板 {% 結束%} **正在尋找一些專業技巧？[向下滾動](#tips-and-tricks)！** ### 評審標準 所有提交的作品將根據以下內容進行評判： - 底層技術的使用 - 可用性和使用者體驗 - 無障礙 - 創造力 兩個額外獎項類別 -------- - **連線元件**：授予使用 Amplify 連線元件實現 UX 模式開發 UI 的頂級提交。 - **功能完整**：授予頂級提交，該提交包含挑戰提示中的所有四個功能：資料、身份驗證、無伺服器功能和文件儲存。 獎品 -- **我們的總冠軍將獲得：** - $1,500 禮品卡或同等金額 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **我們的兩個獎項類別獲獎者將獲得：** - $750 等禮品卡 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **所有提交有效提交的參與者都**將在其 DEV 個人資料中收到完成徽章。 如何參與 ---- 為了參與，您需要使用與每個提示關聯的提交範本來發布貼文。所有提交內容都必須部署到 Amplify Hosting。 請在提交之前查看我們的完整[規則、指南和常見問題解答頁面，](https://dev.to/challenges/aws)以便您了解我們的參與指南和官方競賽規則（例如資格要求）。 技巧和竅門 ----- 您可以使用 AWS 做很多事情，因此我們提供了一些想法，讓您在考慮建置什麼以及如何建置時供您思考。 - 您可以用不到 5 行程式碼定義由 Amazon Simple Storage Service (S3) 提供支援的儲存桶！更好的是，您可以使用[Amplify 的雲端沙箱環境](https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/)測試您的儲存功能。 - 如果您想同時檢查兩個功能，則可以透過上傳到您的 S3 儲存桶來觸發由 AWS Lambda 提供支援的無伺服器功能 😉 - Next.js 和 Nuxt 應用程式的部署是零配置！[存取入門指南](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html)。 指南和文件 ----- - 第一次建立 Amplify 應用程式？查看他們的[快速入門指南](https://docs.amplify.aws/react/start/quickstart/)以快速入門。 - [完整的 AWS Amplify 開發人員文件](https://docs.amplify.aws) **有技術問題嗎？在 AWS Amplify 說明線程中留下評論：** {% 嵌入 https://dev.to/aws/the-aws-amplify-fullstack-typescript-challenge-help-thread-529a %} 重要的日子 ----- - 5 月 15 日：AWS Amplify Fullstack TypeScript 挑戰賽開始！ - 5 月 26 日：提交截止時間為太平洋夏令時間晚上 11:59 - 5 月 28 日：公佈得獎者 我們希望您喜歡使用 AWS Amplify 快速從前端過渡到全端。 🚀 祝你好運，編碼愉快！ --- 原文出處：https://dev.to/devteam/join-us-for-the-the-aws-amplify-fullstack-typescript-challenge-3000-in-prizes-ghm
過去幾天對於人工智慧來說是令人興奮的。 然而，作為開發人員，我們中的許多人還不了解人工智慧的易用性。 今天，我們將介紹您可以使用人工智慧輕鬆建立的精彩專案。無需成為人工智慧專家，每個工具都附帶教學或程式碼演練。 讓我們跳進去吧！  --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------ [](https://github.com/CopilotKit/CopilotKit) 將 AI 功能整合到 React 中是很困難的，這就是 Copilot 的用武之地。一個簡單快速的解決方案，可將可投入生產的 Copilot 整合到任何產品中！ 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一，CopilotKit 是一個應用程式內人工智慧聊天機器人，可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` （您可以稍後切換到不同的 UI 提供者）。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後，您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本想法是非常快速地建立人工智慧聊天機器人，而無需在製作任何基於法學碩士的應用程式時費力。 用例是巨大的，作為開發人員，我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 5800 顆星，發布了 200 多個版本，這意味著它們不斷改進。  {% cta https://go.copilotkit.ai/Anmol %} Star CopilotKit ⭐️ {% endcta %} --- ### 🎯 使用 CopilotKit 建立的熱門應用程式。 我們可以使用 CopilotKit 建立許多創新應用程式，所以讓我們探索一些脫穎而出的應用程式！ ### ✅ [人工智慧驅動的部落格平台](https://dev.to/copilotkit/how-to-build-an-ai-powered-blogging-platform-nextjs-langchain-supabase-1hdp)。  您可以閱讀本文，使用`Next.js` 、 `Langchain` 、 `Supabase`和`CopilotKit`來建立這個令人驚嘆的應用程式。 LangChain＆Tavily用作網路搜尋人工智慧代理，Supabase用於儲存和檢索部落格平台文章資料，CopilotKit用於將人工智慧整合到應用程式中。  您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredblog)。 ### ✅ [V0.dev 複製](https://dev.to/copilotkit/i-created-a-v0-clone-with-nextjs-gpt4-copilotkit-3cmb)。  如果您不熟悉，Vercel 的 V0 是一款人工智慧驅動的工具，可讓您根據提示產生 UI，以及許多其他有用的功能。 shadcn 元件現在可以在文件本身的 v0 中進行編輯（如其網站所示）。  您可以使用`Next.js` 、 `GPT4`和`CopilotKit`建立 V0 的克隆。這個詳細的教程名列前 7 名，總的來說，這是一個值得加入到您的作品集中的偉大專案。 簽名頁的產生輸出如下所示。  您可以透過點擊右上角的按鈕輕鬆在`React Code`和`UI`之間切換。這麼酷的概念！ 您可以檢查[GitHub 儲存庫](https://github.com/Tabintel/v0-copilot-next)。 ### ✅ [人工智慧行銷經理](https://dev.to/copilotkit/build-an-ai-powered-campaign-manager-nextjs-openai-copilotkit-59ii)。  您可以使用`Next.js` 、 `OpenAI` 、 `Radix UI` （用於實現可存取性）、 `Recharts` （用於建立互動式圖表）以及`CopilotKit`來建立這個出色的專案來閱讀本文。 您可以觀看 David 的示範！ {% 嵌入 https://youtu.be/gCJpH6Tnj5g %} 如果你想用更少的錢學到更多，這是我最喜歡的一個。 我喜歡它的 UI（一般教學不是這樣），這正是它成為你的編碼清單上的一個乾淨專案的原因:)  您可以查看該應用程式的[現場演示](https://campaign-manager-demo.vercel.app/)。 您可以檢查[GitHub 儲存庫](https://github.com/CopilotKit/campaign-manager-demo)。 ### ✅ [附有人工智慧副駕駛的電子表格應用程式](https://dev.to/copilotkit/build-an-ai-powered-spreadsheet-app-nextjs-langchain-copilotkit-109d)。  您可以閱讀本文，使用`Next.js` 、 `GPT-4` 、 `LangChain`和`CopilotKit`來建立這個很棒的工具。 為了使工作更輕鬆，它使用[React Spreadsheet](https://github.com/iddan/react-spreadsheet)套件為 React 和[Tavily AI](https://tavily.com/)建立簡單的可自訂電子表格作為搜尋引擎，使 AI 代理能夠進行研究並存取即時知識 你可以觀看這個演示！ {% 嵌入 https://www.youtube.com/watch?v=kGQ9xl5mSoQ %} 您也可以查看[現場演示](https://spreadsheet-demo-tau.vercel.app/)。我可以肯定地說，這是一個獨特的案例，你可以得到很多啟發。 您可以檢查[GitHub 儲存庫](https://github.com/CopilotKit/spreadsheet-demo)。 ### ✅[與您的履歷聊天](https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb)。  您可以閱讀本文，使用`Next.js` 、 `OpenAI`和`CopilotKit`來建立這個很棒的用例。 您不僅可以使用 ChatGPT 產生履歷，還可以將其匯出為 PDF，甚至可以透過與其對話來進一步改進它。多酷啊，對吧:)  您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/AIPoweredResumeBuilder)。 ### ✅ [文字到 Powerpoint 應用程式](https://dev.to/copilotkit/how-to-build-ai-powered-powerpoint-app-nextjs-openai-copilotkit-ji2)。  您可以閱讀本文，使用`Next.js` 、 `OpenAI`和`CopilotKit`建立 Text to Powerpoint 應用程式。 這是一個簡單但非常強大的概念，本文也清楚地說明如何在任何幻燈中加入背景圖像。 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredpresentation)。 ### ✅ [StudyPal：您的人工智慧驅動的個人化學習伴侶](https://dev.to/rajesh-adk-137/studypal-your-ai-powered-personalized-learning-companion-59d)。  您可以從精選清單中選擇您想要的主題，為個人化的學習旅程奠定基礎。 您需要提供有關您的教育背景的詳細訊息，以便 StudyPal 能夠根據他們當前的知識水平定製材料和練習。 `Additional Details`部分可讓學生指定重點領域，確保內容與其學習目標一致。 您可以閱讀本文，使用`React` 、 `Node`和`CopilotKit`來建立這個很棒的用例。 您可以觀看該應用程式的[演示](https://github-production-user-asset-6210df.s3.amazonaws.com/89499267/328419789-a06b11c6-ffbc-44b6-96b0-648d2a38cd7c.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240512%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240512T083208Z&X-Amz-Expires=300&X-Amz-Signature=f6fe016e65e167e94b8322b70743a7fb02fed91f2c87c5af7459e1fa022faac2&X-Amz-SignedHeaders=host&actor_id=74038190&key_id=0&repo_id=793889064)。 您可以檢查[GitHub 儲存庫](https://github.com/rajesh-adk-137/StudyPal)。 --- 2.什麼是郎鏈？ -------- 其餘專案將與 langchain 和 AI 相關（有些使用 python）。最好稍微了解一下這一點。 LangChain 是用於開發由大型語言模型（LLM）支援的應用程式的框架。   總體而言，LangChain 簡化了 LLM 申請生命週期的每個階段。您可以閱讀[官方文件](https://python.langchain.com/docs/get_started/introduction/)以了解更多內容。 如果您想了解有關 langchain 的更多訊息，我建議您觀看 freeCodeCamp 的[本教程](https://www.youtube.com/watch?v=HSZ_uaif57o)。 {% 嵌入 https://www.youtube.com/watch?v=HSZ\_uaif57o %} --- ### 🎯 使用 Langchain/AI/Python 建立的熱門應用程式。 我們可以使用 langchain 建立很多很多高級應用程式，所以讓我們探索一些脫穎而出的應用程式！ ### ✅ [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。  您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如，打開應用程式、尋找餐廳、綜合資訊。太棒了：D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分： A。語音命令：它使用本地執行的 Whisper（Buzz 的一個分支）來產生命令。 b.命令到行動：您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後，就像任何優秀的人工智慧一樣，我們讓代理商使用 AppleScript 說出最終結果「{Result}」（如果您以前沒有使用過，請嘗試在 Mac 終端機中輸入「Hello World！」）。 我們製作了一個自訂工具，讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串： ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的，GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後，它使用LangChain Agent 選擇一組操作，包括使用OpenAI 的GPT-3（“text-davinci-003”）從提示符號產生AppleScript（用於桌面自動化）和JavaScript（用於瀏覽器自動化）命令，然後執行產生的腳本。 請記住，這不適用於生產用途。該專案執行從自然語言產生的程式碼，可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用： ⚡ 求計算結果。 > 提示：“2 + 2 是什麼？” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ⚡ 尋找附近的餐廳。 > 提示：“查找我附近的餐廳” 它將打開 Chrome，谷歌搜尋附近的餐廳，解析頁面，然後返回最上面的結果。有時它很厚顏無恥，反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候，它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容： ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得，請自行承擔風險。哈哈！ ⚡ 如果您要求 GPT Automator 擦除您的計算機，它會的。 是的，如果您要求的話，它會擦除您的電腦！ 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示！ {% 嵌入 https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f %} 您可以在[Chidi 的部落格](https://chidiwilliams.com/posts/gpt-automator)上閱讀更多內容。 它更像是一個業餘專案，因此他們在 GitHub 上有大約 200 個 star，但它非常酷。 您可以檢查[GitHub 儲存庫](https://github.com/chidiwilliams/GPT-Automator)。 ✅ [Instrukt](https://github.com/blob42/Instrukt) - 終端中整合人工智慧。 -------------------------------------------------------------  Instrukt是一個基於終端的AI整合環境。它提供了一個平台，用戶可以： - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們，並且為了安全起見，在安全容器（目前使用 Docker 實作）中執行它們，以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ```  有許多令人興奮的功能，例如： - 基於終端的介面，讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互，以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理，這是一個簡潔的小功能。  Instrukt 已獲得 AGPL 許可證，這意味著任何人都可以將其用於任何目的。 可以肯定地說，Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案，因此他們在 GitHub 上有大約 200 多顆星，但用例非常好。 您可以檢查[GitHub 儲存庫](https://github.com/blob42/Instrukt)。 ✅ [ChatFiles](https://github.com/guangzhengli/ChatFiles) - 上傳您的檔案並與其對話。 -----------------------------------------------------------------------  文件聊天機器人 — 多個文件，由 GPT / Embedding 提供支援。你可以上傳任何文件並與之對話，考慮到他們使用了另一個著名的開源專案，UI 非常好。 它在底層使用 Langchain 和[Chatbot-ui](https://github.com/mckaywrigley/chatbot-ui) 。使用 Nextjs、TypeScript、Tailwind 和 Supabase（向量 DB）建構。 如果您想了解該方法和技術架構，那麼就在這裡！  此環境僅用於試用，支援最大檔案大小為 10 MB，這是一個缺點，如果您想要更大的大小，則可以[在本機安裝](https://github.com/guangzhengli/ChatFiles?tab=readme-ov-file#how-to-run-locally)。 他們提供了您可以使用的[入門問題](https://github.com/guangzhengli/ChatFiles/blob/main/doc/Example.md)。您可以查看[現場演示](https://chatfile.vectorhub.org/)。 他們在 GitHub 上有 3k star，並且發布了`v0.3`版本。 您可以檢查[GitHub 儲存庫](https://github.com/guangzhengli/ChatFiles)。 ✅ [具有多代理協作的終極人工智慧自動化 - LangGraph + GPT 研究人員](https://blog.langchain.dev/how-to-build-the-ultimate-ai-automation-with-multi-agent-collaboration/)。 ------------------------------------------------------------------------------------------------------------------------------------------------- LangGraph 是一個使用 LLM 建立有狀態、多參與者應用程式的函式庫。此範例使用 Langgraph 自動化對任何給定主題的深入研究過程。 簡而言之，這個範例展示了人工智慧代理團隊如何協同工作，對給定主題進行從規劃到發布的研究。此範例還將利用領先的自主研究代理[GPT Researcher](https://github.com/assafelovic/gpt-researcher) ，我已在過去的一篇文章中介紹過該代理。 研究團隊由七名法學碩士代理人： ⚡ `Chief Editor` - 監督研究過程並管理團隊。這是使用 LangGraph 協調其他代理程式的「主」代理程式。該代理充當主要的 LangGraph 介面。 ⚡ `GPT Researcher` - 專門的自主代理，對給定主題進行深入研究。 ⚡ `Editor` - 負責規劃研究大綱和結構。 ⚡ `Reviewer` - 根據一組標準驗證研究結果的正確性。 ⚡ `Reviser` - 根據審查者的回饋修改研究結果。 ⚡ `Writer` - 負責編譯和撰寫最終報告。 ⚡ `Publisher` - 負責以各種格式發布最終報告。 自動化過程基於以下階段（架構），文章中清楚地顯示了這一點。 - 策劃階段。 - 資料收集和分析。 - 審查和修訂。 - 寫作並提交。 - 出版品.  您可以閱讀有關正在發生的事情的[詳細步驟文件](https://github.com/assafelovic/gpt-researcher/tree/master/multi_agents?ref=blog.langchain.dev#steps)。 助手的最終運作將產生 Markdown、PDF 和 Docx 等格式的最終研究報告。 您可以閱讀這篇文章，其中介紹[如何透過多代理協作來建立終極人工智慧自動化](https://blog.langchain.dev/how-to-build-the-ultimate-ai-automation-with-multi-agent-collaboration/)，其中 Wix 研發主管 Assaf Elovic 介紹如何使用 LangGraph 與專業代理團隊建立自主研究助理。它具有易於理解的程式碼範例，並清楚地說明正在發生的事情。開發者必讀！ 最好的部分是，如果您想更改研究查詢並自訂報告，只需編輯主目錄中的`task.json`檔案。真的很棒:) 它由 GPT 研究人員負責，擁有 10k 顆星，但自從上次提交是在幾天前以來，它經常更新。 您可以檢查[GitHub 儲存庫](https://github.com/assafelovic/gpt-researcher/tree/master/multi_agents)。 ✅[僚機AI](https://github.com/e-johnstonn/wingmanAI) 。 ---------------------------------------------------  WingmanAI 是一款功能強大的工具，可與系統和麥克風音訊的即時轉錄進行互動。 它使用 ChatGPT，讓您與文字記錄即時交互，作為機器人的廣泛記憶體基礎，提供獨特的通訊平台。 當您載入指定人員的文字記錄時，機器人甚至可以回答有關過去對話的問題。 所有精彩功能的詳細介紹： ⚡ 它可以轉錄系統輸出和麥克風輸入音頻，讓您以易於閱讀的格式查看即時轉錄。 ⚡ 機器人以令牌有效的方式維護對話記錄，因為只有當前的文字區塊會傳遞給機器人。 ⚡ 您可以與 ChatGPT 支援的機器人聊天，機器人會即時讀取您的文字記錄。 ⚡ 您可以繼續附加到已儲存的記錄中，隨著時間的推移建立一個龐大的資料庫供機器人從中提取。 ⚡ 它允許您保存成績單以供將來使用。您可以稍後隨時加載它們，並且對機器人進行的任何查詢都將與保存的轉錄本的向量資料庫交叉引用，從而為機器人提供更豐富的上下文。 您可以閱讀[安裝說明](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#installation)。 您只需將 OpenAI API 金鑰放入`keys.env`檔案中並執行`main.py` 。 唯一的缺點是該應用程式目前僅與 Windows 相容。 Windows 用戶現在更高興了:) 您可以觀看[完整的示範影片](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#demo)。由於限制，下面所附的 gif 很短（86 秒中只有 30 秒）。  我對這個概念感到非常驚訝，因為我從來沒有想過它可以以這種方式實現。當開發人員用非常簡單的概念創造出一些很酷的東西時，感覺真的很棒:) 它在 GitHub 上有 420 多顆星，並且不再維護。但你可以用它來建造更好的東西。 您可以檢查[GitHub 儲存庫](https://github.com/e-johnstonn/wingmanAI)。 ✅[考試](https://github.com/codeacme17/examor)。 --------------------------------------------  一款允許您根據知識筆記參加考試的應用程式。它可以讓您專注於您所學和所寫的內容🧠。 它不斷提示您提出問題以複習筆記內容，這對於學生、學者、受訪者和終身學習者非常有用。 專案管理員正在使用 next.js 重構專案，這對於使用`next.js`開發人員來說非常好。 讓我們來詳細分析一下一些很棒的功能： ⚡ 建立筆記時可以上傳相關文件。該應用程式根據這些文件的內容產生一組問題。這些問題將在未來呈現給大家。建立筆記時，您作為使用者還可以選擇要產生的問題類型。  ⚡ 收到每日問題後，您可以提供答案。 GPT 將評分、驗證並提供正確答案。透過評估答案和連結文件的正確性來確定分數（0 ~ 10 分）。這個分數會影響隨後的艾賓浩斯評審過程。將會在未來的發布版本中進行最佳化。 ⚡ 角色可以為問題產生和評估提供更多可能性。您可以在設定頁面上設定角色。有關各種角色的更多訊息，建議參閱詳細的[角色手冊指南](https://github.com/codeacme17/examor/blob/main/docs/en-role.md)。  ⚡ 練習問題時，可以用不同的方法作答。下圖顯示了單選題的範例。  ⚡ 它有一個包含多個[模組](https://github.com/codeacme17/examor?tab=readme-ov-file#-modules)的列表，例如`Examine` 、 `Note` 、 `Notes Management`和`Random Question`使用這些模組您可以在筆記中導入問題，刪除或加入新文件到上傳的筆記中，等等。 我喜歡整個概念，這會引起任何曾經面臨過修改筆記問題的人的注意。 您可以閱讀包含如何正確使用它的詳細指南的[文件](https://github.com/codeacme17/examor/blob/main/README.md)。 它在 GitHub 上有 1k star，目前版本為`v0.4.2` 。 您可以檢查[GitHub 儲存庫](https://github.com/codeacme17/examor)。 ✅[語音GPT](https://github.com/hahahumble/speechgpt) 。 ---------------------------------------------------   SpeechGPT 是一個 Web 應用程式，可讓您與 ChatGPT 進行對話。 您可以利用此應用程式來提高您的語言技能，或只是透過 ChatGPT 享受聊天的樂趣。 大多數人會說這有什麼獨特之處，但事實確實如此。 讓我們來打破一些很棒的功能： ⚡ 所有資料儲存在本地，隱私性更強。 ⚡ 根據文件，它支援 100 多種語言，但我在現場演示中只能看到對三種語言的支援。  ⚡ 包含內建語音辨識以及與 Azure 語音服務的整合。  ⚡ 包含內建語音合成，以及與 Amazon Polly 和 Azure 語音服務的整合。  請按照[文件中的教學](https://github.com/hahahumble/speechgpt?tab=readme-ov-file#-tutorial)了解如何使用它。 您可以在[speechgpt.app](https://speechgpt.app/)上觀看現場演示。這是一個完美的例子，說明了一些額外的功能如何將您的應用程式提升到一個新的水平！ SpeechGPT 在 GitHub 上有 2700 顆星，目前版本為`v0.5.1` 。 您可以檢查[GitHub 儲存庫](https://github.com/hahahumble/speechgpt)。 ✅ [myGPTReader](https://github.com/madawei2699/myGPTReader) - 閱讀並與 AI 機器人聊天。 ----------------------------------------------------------------------------  myGPTReader 是 Slack 上的機器人，可以閱讀和總結任何網頁、文件（包括電子書），甚至來自 YouTube 的影片。它可以透過語音與您交流。 一些有價值的功能是： ⚡ 使用 myGPTReader 透過對話快速閱讀和理解任何網頁內容，甚至是影片（目前僅支援帶有字幕的 YouTube 影片）。  ⚡ 使用 myGPTReader 快速閱讀任何文件的內容，支援電子書、PDF、DOCX、TXT 和 Markdown。  ⚡ 透過與 myGPTReader 語音對話來練習外語，它可以成為您的私人導師，支援中文、英語、德語和日語。  ⚡ 內建大量提示模板，使用它們可以更好地與chatGPT對話。  ⚡ myGPTReader 每天發送最新熱點新聞，並自動產生摘要，讓您快速了解今日熱點。 您可以造訪[官方網站](https://www.myreader.io/)。 您可以加入擁有超過 5000 名會員的儲存庫上的 Slack 頻道，免費體驗所有這些功能。 它們在 GitHub 上有 4.4k 顆星，並且像此列表中的其他專案一樣使用 Python 建置。 您可以檢查[GitHub 儲存庫](https://github.com/madawei2699/myGPTReader)。 ✅ [RepoChat](https://github.com/pnkvalavala/repochat) - 支援 GitHub 儲存庫互動的聊天機器人助理。 --------------------------------------------------------------------------------  Repochat 是一個互動式聊天機器人專案，旨在使用大型語言模型 (LLM) 參與有關 GitHub 儲存庫的對話。 它允許用戶進行有意義的討論、提出問題並從 GitHub 儲存庫檢索相關資訊。本自述文件提供了在本機電腦上設定和使用 Repochat 的逐步說明。 他們建立了兩個具有不同功能的分支，這對我來說有點新鮮。 ⚡ Repochat 的主要分支被設計為完全在本機上執行。此版本的 Repochat 不依賴外部 API 呼叫，並且可以更好地控制您的資料和處理。如果您正在尋找獨立的解決方案，那麼主分支就是您的最佳選擇。 ⚡ Repochat 的雲端分支主要依賴對外部服務的 API 呼叫來進行模型推理和儲存。它非常適合那些喜歡基於雲端的解決方案並且不想設定本地環境的人。 您可以閱讀[安裝說明](https://github.com/pnkvalavala/repochat?tab=readme-ov-file#installation)。 Repochat 讓您與聊天機器人進行對話。您可以提出問題或提供輸入，聊天機器人將從向量資料庫中檢索相關文件。 然後，它將您的輸入以及檢索到的文件傳送到語言模型以產生回應。 預設情況下，我已將模型設為`codellama-7b-instruct` ，但您可以根據計算機的速度更改它，甚至可以嘗試 13b 量化模型進行回應。 聊天機器人在對話過程中保留記憶以提供上下文相關的回應。 您可以查看[即時網站](https://repochat.streamlit.app/)，您可以使用 API 金鑰進行檢查。 你可以觀看這個演示！  如果您想查看的話，我找到了另一種[選擇](https://github.com/peterw/Chat-with-Github-Repo)。 Repochat 擁有 200 多顆星，並部署在 Streamlit 上。 您可以檢查[GitHub 儲存庫](https://github.com/pnkvalavala/repochat)。 ✅ [NextChat - ChatGPT Next Web](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web) 。 -------------------------------------------------------------------------------------  這不是一個典型的副專案，因為程式碼庫足夠大，但值得一看作為靈感。 您只需一鍵即可獲得精心設計的跨平台 ChatGPT Web UI，支援 GPT3、GPT4 和 Gemini Pro（Web / PWA / Linux / Win / MacOS）。 一些很棒的功能是： ⚡ 隱私 首先，所有資料都儲存在瀏覽器本地。 ⚡ 首屏載入速度快（~100kb），支援串流響應。 ⚡ 自動壓縮聊天歷史記錄以支援長時間對話，同時儲存您的代幣。 ⚡ Linux/Windows/MacOS 上的緊湊型用戶端 (~5MB)。 ⚡ 您只需在 Vercel 上一鍵點擊即可在 1 分鐘內免費部署。 ⚡ 與自行部署的法學碩士完全相容。 ⚡ Markdown 支援：LaTex、mermaid、程式碼高亮等。  您可以查看 NextChat 的[現場演示](https://app.nextchat.dev/)和[文件，](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web?tab=readme-ov-file#roadmap)其中包括所有環境變數（主要是 API 金鑰）的清單。  在本地處理它並不難，他們還提供了 GitHub 操作工作流程，每小時都會自動更新。 NextChat 在 GitHub 上擁有 69k+ 顆星，目前已發布`v2.2`版本。 您可以檢查[GitHub 儲存庫](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web)。 --- 如果您喜歡觀看教程來建立專案，我有一些很好的建議。 🎯 [LangChain GEN AI 教學 – 使用 OpenAI、Google Gemini Pro、LLAMA2 的 6 個端到端專案](https://www.youtube.com/watch?v=x0AnCE9SE4A)– 4 小時。 本教學涵蓋的專案： ✅ LangChain 速成課程 - 打下基礎。 ✅ 使用 Langchain 和 Astradb 與 PDF 聊天。 ✅ 使用 Llama 2 LLM 模型產生部落格。 ✅ 使用 Pinecone VectorDB 的端到端法學碩士課程。 ✅ Google Gemini 專業版示範。 ✅ 多語言發票提取器 LLM 專案。 ✅ 使用 Gemini Pro API 的對話式問答聊天機器人。 {% 嵌入 https://www.youtube.com/watch?v=x0AnCE9SE4A %} 🎯 Streamlit 的 LangChain 速成課程。 本教學涵蓋的專案： ✅ 發票資料提取器。 ✅ 針對自訂資料的基本 QA。 ✅ 總結和有用的鏈類型。 ✅ WordPress 程式碼助理。 ✅ 將語音備忘錄轉換為文字。 你可以找到[速成課程](https://learnlangchain.streamlit.app/)。側邊欄中將有一個關於實踐專案的部分！ --- 這麼多很棒的專案:) 但說實話，我見過很多開發人員建立相同的應用程式，您可以獲得無限的靈感。我希望你喜歡這個。 繼續，保存它，並建造每一個，以展示誰是技術老大！ 讓我知道哪個專案最讓你驚訝。 祝你有美好的一天！直到下一次。 |如果你喜歡這類東西， 請關注我以了解更多:) | [](https://twitter.com/Anmol_Codes) [](https://github.com/Anmol-Baranwal) [](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 請關注 Copilotkit 以獲取更多此類內容。 {% 嵌入 https://dev.to/copilotkit %} --- 原文出處：https://dev.to/copilotkit/20-projects-you-can-build-with-ai-today-352k
最近買了一台 macbook air 使用 m3 晶片 使用 docker 以及 npm 裝套件、裝 image 時，會出現各種警告 x86、x64、amd64、arm64 到底是怎樣？ 簡單研究，結論如下： --- - x86 是 32 位元的，因為初始產品線命名都是 86 結尾 - 然後 PC 其它代號都是 64 位元的，包含 x86_64、x64、AMD64 基本上是同一个东西，现在用的intel/amd的桌面级CPU基本上都是x86_64 - 命名搞這麼複雜，是因為 Intel 不愿承认这玩意是AMD设计出来的 - arm 是 arm 公司的省電晶片，大量使用在手機晶片上 - 蘋果 m 晶片算是 arm64 系列，應該是因為蘋果有投資 arm 公司吧 --- https://blog.csdn.net/bruce_van/article/details/129920807 https://www.reddit.com/r/linuxquestions/comments/ra4vjj/difference_between_x86_x8664_amd64_and_x64/ https://nabi.104.com.tw/posts/nabi_post_31d2895e-d197-4341-801e-75ef72e626cc https://www.ithome.com.tw/tech/56880
在過去兩年裡，我與 100 多名創辦人交談過。他們都面臨著同樣的問題──找不到好的內容作者和影響者。 另一方面，我遇到了許多內容作者和影響者遇到的困難： - 上班 - 管理他們的訂單 - 透過賺錢保證自己的安全 這就是[Gitroom 的](https://git.sn/gitroom-dev)閃光點 TL;DR：它是免費的。您可以註冊並賺錢。 ---------------------  --- 為什麼不一樣呢？ -------- 如今， [Gitroom](https://gitroom.com)是最著名的開源創辦人開源社群之一。他們中的許多人都有資金支持——他們的問題不是花錢，而是找到合適的人來花錢。 下週，我們將為社區的新作家和影響者舉辦一場盛大的發布會 - 所以你想參加。 Gitroom 與[Fiverr](https://www.fiverr.com/)非常相似。 1. 您在平台上列出自己。 創辦人聯絡您進行晉升。 2. 您向他們發送每個帖子的報價。 3. 他們支付費用，他們的錢將由 Gitroom 持有。 4. 您開始從系統內部建立貼文（是的，Gitroom 也是一個調度工具） 5. 他們批准你的帖子 6. 發布後，Gitroom 會自動向您發送資金。 Gitroom 的技巧在於，貼文是從 Gitroom 內部發出的，因此您受到 100% 的保護。  --- 如何開始 ---- 前往[Gitroom 平台](https://git.sn/gitroom-dev)並註冊。  然後，完成入職；非常重要的是： 1. 您新增您的姓名、個人簡介和個人資料圖片。 2. 連接您的社交媒體平台，以便您稍後可以提供它們。  以賣家身分進入市場，連接您的銀行帳戶，並加入您的專業知識。  --- 我做完。現在做什麼？ ---------- 只需等待收件匣中發送有關新優惠的電子郵件即可。 此外， [Gitroom 是完全開源的](https://github.com/gitroomhq/gitroom/)。 因此，請隨意檢查程式碼並查看是否一切正常。 您也可以建議新功能/貢獻一些程式碼:) 目前，您不需要申請加入該平台，但如果我開始收到大量垃圾郵件，我會更改它。 讓我知道你對這個系統的看法❤️ --- 原文出處：https://dev.to/github20k/the-easiest-way-tech-influencers-and-content-writers-can-make-money-4n90
租了一台新的主機 跑 laravel app 預設的參數 很容易出現 nginx request payload too large 錯誤 調整之後 又會遇到超過 php.ini 的 post body limit 錯誤 筆記一下，必調的參數 --- ## nginx ``` nano /etc/nginx/nginx.conf client_max_body_size 1M -> 100M; sudo nginx -t sudo nginx -s reload sudo systemctl restart nginx ``` ## php ``` nano /etc/php/8.1/fpm/php.ini upload_max_filesize 2M -> 100M post_max_size 8M -> 100M service php8.1-fpm restart ```
JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素: https://jsfiddle.net/applelily/wr4cjvhL/2/ --- JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件: https://jsfiddle.net/applelily/f6pvm28w/13/ --- JavaScript 系列二：第3課 ── 認識 for 迴圈: https://jsfiddle.net/applelily/4bmdacvp/4/ --- JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class: https://jsfiddle.net/applelily/t8zmcpLe/3/ --- JavaScript 系列二：第5課 ── 認識 onchange 事件: https://jsfiddle.net/applelily/r96tehms/1/ --- JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style: https://jsfiddle.net/applelily/d5hg4k27/1/ --- JavaScript 系列二：第7課 ── 用 Selector API 選取元素: https://jsfiddle.net/applelily/L6hmocas/2/ ---
 不久前，我從高級開發人員的職位被解雇了，在此之前我從未被解僱過，無論我走到哪裡，我一直都是中等到頂級的表現，並且一直受到同事的喜愛，但這裡的情況卻大不相同。 我當時在哪裡 ------ 我離開了以前的工作，因為他們遇到了財務問題，而且我已經在那裡工作了一段時間，覺得自己的角色已經變得陳舊，我是高級開發人員和團隊負責人的混合體，我的團隊到最後只剩下我了。 我變得沒有動力，我的團隊不知疲倦地工作的公司主要專案之一被取消了。由於公司必須轉型，一年多來的工作實質上都被丟進了垃圾箱。 所以我開始尋找另一份工作，我不想要另一個發展職位，我想要更多的挑戰，我想要擴展自己。我看到一家顧問公司正在尋找一位開發人員，希望能夠從事一些很酷的專案。我申請了，通過了他們的測試，通過了面試，準備嘗試新的東西。  走進暴風雨 ----- 在我加入之前，我參加了這家公司的夏季聚會，沒有任何危險信號，人們看起來很高興，業主看起來也很好。 我拿到了筆記型電腦和一個漂亮的迎賓禮盒，我真的很興奮，準備重新振作起來，抓住這個機會。 我做了正常的人力資源工作，在第一天設定了我的環境，然後被告知我應該繼續的專案尚未獲得批准。被告知開始關注我的認證，並被告知專案何時準備就緒。 突然接到一位業主的電話，說有一個前端專案需要資源來加速進度。技術堆疊有點超出了我的舒適區，但想要給人留下深刻的印象並表明我相當多才多藝，就像確信我能做到一樣，我解釋說我需要加快使用所使用的技術堆疊的速度，並獲得了大約一半的時間閱讀我需要的內容的一天。 烏雲密佈 --- 我遇到了該專案的首席開發人員，雖然他有點友好，但他似乎對我沒有技術堆疊經驗感到相當不高興，但他給我分配了一些任務，然後讓我去做，直到…一個小時後，他打電話給我，問我過得怎麼樣。告訴他，努力讓專案在本地執行，他和我一起完成了編譯和執行，有一些環和資料庫條目讓我執行。 任務本身很簡單，但我無法弄清楚所使用的編碼風格和模式。事後看來，這個計畫的一些決定有點值得懷疑。 我每兩個小時就會接到電話詢問進度，並會收到評論，例如你們進展緩慢，我們落後了，然後很快就保證我們會到達目標。很快我就從「我可以征服任何事情」變成了「也許我作為開發人員很糟糕」。 看起來要開始下雨了 --------- 我確實沒有交到任何朋友，也沒有與這家公司的人建立任何密切的聯繫。我感到非常孤獨，從派對生活變成一個非常內向和保守的人，這真是令人震驚。我還沒有完全從這件事中恢復過來，我現在還是比較安靜，不會說太多話。 這種情況又持續了兩週，一直對我進行微觀管理的開發人員需要休假，並給了我一週的任務。 他完成了有問題的任務，我們給了他們估計，此時我開始變得有點矛盾，我是否能夠完成我的工作。 這些任務在紙上很簡單，但實際上我花了很多時間嘗試瀏覽程式碼庫。有時我會分心，看太多 YouTube 影片，很快就會失去注意力。我不再關心，此時，開始找工作，解釋我覺得我在這個角色上犯了錯。  現在雷聲大作 ------ 另一位開發人員度假回來後，他似乎對我沒有完成所有任務感到憤怒，我確實為我設法完成的任務提出了 PR，但他的半令人放心的台詞回來了“我們會完成它”。 一天快結束時，我收到了人力資源部門發來的一封不祥的電子郵件，告訴我客戶不滿意，我已經完成了對該專案所做的所有工作的審核。 我完成了審計並回信說，我對客戶沒有向我提出這個問題感到失望，回想起來，這是一個非常糟糕的主意。下一分鐘我就收到了隔天早上召開人力資源會議的請求。 雷擊 -- 在人力資源電話中，很快就告訴我要被解僱，我知道為什麼，我沒有費心去抗爭或爭論，我接受了它，現在接受了我新發現的失業。 在那之後的幾天裡，我感到很生氣，這表明我對面試官失去了冷靜，對這個世界普遍感到不安。我給了自己幾天悶悶不樂的時間，然後重新上馬並找到了一家更好的諮詢公司，儘管我的角色不太注重開發人員。 反思 -- 我寫這篇文章的原因是，被解僱是可以的，是的，這很可怕，而且尋找新角色的不確定性，特別是在當今的市場上，是一種可怕的感覺，但正如偉大的首席開發人員會說「我們會到達那裡」。 反思這一點，我需要休息一下，我以前的角色到這個可怕的角色是如此充實，我經歷了一些重大的生活事件和一些普遍困難的時期，去年，我搬了家，我的兒子出生並換了工作。我注定會崩潰，我的通知期很長，我應該在角色之間休息一些時間。 我還認為我應該從開發中休息一下，我覺得我在這個階段確實失去了對開發的熱情，而進入我現在所擔任的角色幫助我通過遠離開發一步來重新激發了我對開發的熱情。 我不應該那麼急於接受任何專案，我應該直截了當地說我不認為我可以勝任這個角色，請為我找到另一個專案，也應該儘早標記我不認為我可以勝任這個角色工作。 我應該更以客戶為中心，如今，只需與客戶交談就可以幫助我克服一些障礙。 對於首席開發人員，我理解他們承受的壓力，我不會因為我的失敗而抨擊他們或責備他們。然而，作為現在的團隊領導，我確保自己保持專業，鼓勵我的團隊成員，並確保回饋是建設性的，而不是一系列帶有虛假保證的挖掘。 歸根結底，被解僱並不是你生命的終結，甚至不是你職業生涯的終結，你可以重新振作起來，並將其作為一種學習經驗。  --- 原文出處：https://dev.to/darkliahos/so-i-got-fired-3ko5
### 單一職責原則（SRP） **一個元件應該只有一個改變的理由，這意味著它應該只有一項工作。** #### 範例：使用者設定檔元件 **應該這樣：** - 將職責分解為更小的功能元件。 ``` // UserProfile.js const UserProfile = ({ user }) => { return ( <div> <UserAvatar user={user} /> <UserInfo user={user} /> </div> ); }; // UserAvatar.js const UserAvatar = ({ user }) => { return <img src={user.avatarUrl} alt={`${user.name}'s avatar`} />; }; // UserInfo.js const UserInfo = ({ user }) => { return ( <div> <h1>{user.name}</h1> <p>{user.bio}</p> </div> ); }; ``` **不要這樣：** - 將顯示、資料取得和業務邏輯組合在一個元件中。 ``` // IncorrectUserProfile.js const IncorrectUserProfile = ({ user }) => { // Fetching data, handling business logic and displaying all in one const handleEdit = () => { console.log("Edit user"); }; return ( <div> <img src={user.avatarUrl} alt={`${user.name}'s avatar`} /> <h1>{user.name}</h1> <p>{user.bio}</p> <button onClick={handleEdit}>Edit User</button> </div> ); }; ``` ### 開閉原理 (OCP) **軟體實體應該對擴充開放，但對修改關閉。** #### 範例：主題按鈕 **應該這樣：** - 使用 props 來擴充元件功能，而無需修改原始元件。 ``` // Button.js const Button = ({ onClick, children, style }) => { return ( <button onClick={onClick} style={style}> {children} </button> ); }; // Usage const PrimaryButton = (props) => { const primaryStyle = { backgroundColor: 'blue', color: 'white' }; return <Button {...props} style={primaryStyle} />; }; ``` **不要這樣：** - 修改原有元件程式碼，直接加入新的樣式或行為。 ``` // IncorrectButton.js // Modifying the original Button component directly for a specific style const Button = ({ onClick, children, primary }) => { const style = primary ? { backgroundColor: 'blue', color: 'white' } : null; return ( <button onClick={onClick} style={style}> {children} </button> ); }; ``` ### 里氏替換原理 (LSP) **超類別的物件可以用其子類別的物件替換，而不會破壞應用程式。** #### 範例：基本按鈕和圖示按鈕 **應該這樣：** - 確保子類元件可以無縫替換超類元件。 ``` // BasicButton.js const BasicButton = ({ onClick, children }) => { return <button onClick={onClick}>{children}</button>; }; // IconButton.js const IconButton = ({ onClick, icon, children }) => { return ( <button onClick={onClick}> <img src={icon} alt="icon" /> {children} </button> ); }; ``` **不要這樣：** - 引入特定於子類別的屬性，這些屬性在替換時會破壞功能。 ``` // IncorrectIconButton.js // This button expects an icon and does not handle the absence of one, breaking when used as a BasicButton const IncorrectIconButton = ({ onClick, icon }) => { if (!icon) { throw new Error("Icon is required"); } return ( <button onClick={onClick}> <img src={icon} alt="icon" /> </button> ); }; ``` ### 介面隔離原則（ISP） **任何客戶端都不應該被迫依賴它不使用的方法。** #### 範例：文字元件 **應該這樣：** - 針對不同的用途提供特定的介面。 ``` // Text.js const Text = ({ type, children }) => { switch (type) { case 'header': return <h1>{children}</h1>; case 'title': return <h2>{children}</h2>; default: return <p>{children}</p>; } }; ``` **不要這樣：** - 用不必要的屬性使元件變得混亂。 ``` // IncorrectText.js // This component expects multiple unrelated props, cluttering the interface const IncorrectText = ({ type, children, onClick, isLoggedIn }) => { if (isLoggedIn && onClick) { return <a href="#" onClick={onClick}>{children}</a>; } return type === 'header' ? <h1>{children}</h1> : <p>{children}</p>; }; ``` ### 依賴倒置原則（DIP） **高層模組不應該依賴低層模組。兩者都應該依賴抽象。** #### 範例：資料獲取 **應該這樣：** - 使用鉤子或類似的模式來抽象資料獲取 和狀態管理。 ``` // useUserData.js (Abstraction) const useUserData = (userId) => { const [user, setUser] = useState(null); useEffect(() => { fetchData(userId).then(setUser); }, [userId]); return user; }; // UserProfile.js const UserProfile = ({ userId }) => { const user = useUserData(userId); if (!user) return <p>Loading...</p>; return <div><h1>{user.name}</h1></div>; }; ``` **不要這樣：** - 在元件內部硬編碼資料取得。 ``` // IncorrectUserProfile.js const IncorrectUserProfile = ({ userId }) => { const [user, setUser] = useState(null); useEffect(() => { // Fetching data directly inside the component fetch(`https://api.example.com/users/${userId}`) .then(response => response.json()) .then(setUser); }, [userId]); if (!user) return <p>Loading...</p>; return <div><h1>{user.name}</h1></div>; }; ``` --- 原文出處：https://dev.to/drruvari/mastering-solid-principles-in-react-easy-examples-and-best-practices-142b
最近，我受邀參加亞馬遜的線上編碼評估。由於我與目前的工作簽訂了一段時間的合同，我認為嘗試一下可能會很有趣，沒有壓力。以下是我從徹底崩潰和燃燒的編碼評估中學到的東西： \#1.先解決問題 --------- 我花了很多時間來驗證論點，儘管這可能是您在現實生活中所做的事情，但這對於編碼評估來說並不是一個好主意。有時，公司會拋出邊緣情況 - 也許您的`List`為空，或者為`null` - 但通常是在他們驗證您的解決方案對有效輸入的行為之後。 \#2.了解基礎知識 ---------- 您不想在計時器倒數時浪費時間谷歌搜尋如何深度複製陣列。了解如何使用所有標準資料結構並練習、練習、再練習。 #3。仔細閱讀提示 --------- 有時您的提示會出現警告。也許提示希望您返回最佳解決方案（如果存在），但如果您的解決方案低於某個閾值，則根本不返回任何內容。確保您滿足提示的要求。 #4。使用您自己的編輯器 ------------ 線上編碼評估或多或少必須提供某種線上 IDE 來幫助您編譯、偵錯和執行程式。**不要使用它。**它將變得陌生、緩慢，並且可能具有您不想要的特定功能（程式碼完成），或缺少一些您需要的功能（自動庫導入）。 #5。限制時間練習 --------- 這些編碼評估旨在快速進行，但如果您知道自己在做什麼，又不會太快以致您耗盡時間。話雖這麼說，當您完成後，您可能會想返回並清理一些程式碼、優化並加入一些註釋。練習的時間比你應該分配的時間*少*。 有[第三方](https://coderbyte.com/)評估平台，亞馬遜有線上[編碼評估演示](https://www.myamcat.com/start-demo?data=VvSY8gb%2BBAAefK0phJWENBOPoTXDc8na4fhRROtwuZ9MIbQ7gXB2pLYyDf%2B4UUy3bjNJmcgRqJuzDgML1nQF%2Bg%3D%3D)。我確信其他公司也存在這些，如果有人可以在評論中提供它們。 --- 就是這樣！我想如果我遵循了上面我自己的建議，我可能至少能夠及時完成提示。如果你像我一樣是個完美主義者，你需要把它留在門口，以便能夠先制定一個有效的解決方案，然後回去清理它。祝你好運！ 如果您喜歡這篇文章，請考慮[為我買杯咖啡](https://ko-fi.com/Z8Z811E9B)來支持我的工作！ --- 原文出處：https://dev.to/awwsmm/what-i-learned-from-bombing-an-amazon-coding-assessment-4aom
> 嘿！我是薩加爾。我喜歡編寫教學和文章來幫助開發人員更好地理解 JavaScript 的魔力。如果您對本文有任何疑問，請發表評論，我會回覆您，或在 Twitter [@sagar\_codes](https://twitter.com/sagar_codes)上找到我。 在這篇文章中，我們將討論 ES6 中引入的一個特性，即展開運算子和剩餘運算子。 🔥 🔥 🔥 我已經成為這三個點的忠實粉絲，它們可能會改變您在 JavaScript 中解決問題的風格。我們可以以兩種不同的方式使用三個點作為擴充運算子和剩餘運算子。 休息參數😴 ----- 使用剩餘參數，我們可以將任意數量的參數收集到一個陣列中，並用它們執行我們想要的操作。引入剩餘參數是為了減少由參數引起的樣板程式碼。 🙌 ``` function myFunc(a, b, ...args) { console.log(a); // 22 console.log(b); // 98 console.log(args); // [43, 3, 26] }; myFunc(22, 98, 43, 3, 26); ``` 在 myFunc 的最後一個參數中，前綴為 …，這將導致所有剩餘參數都放置在 javascript 陣列中。 其餘參數收集所有剩餘參數，因此在最後一個參數之前加入其餘參數是沒有意義的。剩餘參數必須是最後一個形參。 ``` function myFunc(arg1, ...rest, arg2) { // arg2 ? } ``` 其餘參數可以解構（僅限陣列），這意味著它們的資料可以解壓縮為不同的變數。 ``` function myFunc(...[x, y, z]) { return x * y* z; } myFunc(1) // NaN myFunc(1, 2, 3) // 6 myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured) ``` 傳播運算符✨ ------ 擴展運算子用於將可迭代物件（如陣列）的元素擴展到可以容納多個元素的位置。 ``` function myFunc(x, y, ...params) { // used rest operator here console.log(x); console.log(y); console.log(params); } var inputs = ["a", "b", "c", "d", "e", "f"]; myFunc(...inputs); // used spread operator here // "a" // "b" // ["c", "d", "e", "f"] ``` 組合陣列的方法一直有很多種，但展開運算子提供了一種組合陣列的新方法： ``` const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian']; const specialty = ['Meatzza', 'Spicy Mama', 'Margherita']; const pizzas = [...featured, 'veg pizza', ...specialty]; console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita' ``` 透過擴充運算符，現在可以使用比 Object.assign() 更短的語法來淺複製（不包括原型）或合併物件。 ``` var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } var mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 } ``` 👉 結論 ---- 當我們在程式碼中看到三個點（…）時，它要么是剩餘參數，要么是擴展運算子。 有一個簡單的方法可以區分它們： 1. 當三個點 (…) 位於函數參數末尾時，它是“剩餘參數”，並將參數列表的其餘部分收集到一個陣列中。 2. 當三個點 (…) 出現在函數呼叫或類似情況中時，它被稱為“擴展運算符”，並將陣列擴展為列表。 謝謝閱讀。希望您喜歡這篇文章，歡迎按讚、留言或與您的朋友分享這篇文章。 😄 快樂編碼… --- 原文出處：https://dev.to/sagar/three-dots---in-javascript-26ci
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
