客戶最近有把舊 laravel 專案改寫為 SPA 的需求，需要前後端分離 為了方便前後端溝通、改善開發者體驗，我建議＆協助他們導入 GraphQL 技術到 laravel 專案中！ 實際導入＆開發半年之後，成效非常不錯！前端工程師、後端工程師都用得很開心！ 今天跟大家分享一些心得＆範例程式碼！ ## 破除迷思 > 很多公司聽到 GraphQL 會有點卻步，覺得太新、不成熟 其實，這技術面世八年了，在國外已經被許多公司廣泛採用，不算很新了！ > 很多公司會以為這是給大公司用的技術，小公司不適合使用 其實，我自己的使用經驗是，就算團隊只有兩個工程師，這技術也很好用，會讓開發速度更快，不會更慢！ > laravel 社群會以為這技術在 node 社群、或其他社群比較常見 其實，laravel 社群也有很好用的套件，導入也很方便！ 所以這技術非常值得學習、使用，至少了解一下！ ## 優點介紹 我認為最大的優點就是，大幅降低了前後端溝通的成本！ 傳統開發，後端寫完 API，要另外寫文件告訴前端網址是多少、回傳的資料格式 然後前端需要用 postman 之類的工具，方便測試、開發 使用 graphql 的話，後端寫完程式碼，就同時自動生成文件＆測試工具了！ 為了方便讀者「親自試玩」以上描述，我準備了一個範例專案給大家！ 這個專案模擬電商網站，API 可以撈 products 與 comments 兩種資料！ 然後可以訂閱商家的電子報，也就是新增 subscriber 這種資料！ ## 實務範例與 API 線上試玩 我先分享範例專案給大家！ https://graphql-laravel-example.tw/ 原始碼也已公開 https://github.com/howtomakeaturn/graphql-laravel-example --- 以往 RESTful 的設計，「讀取資料」這種動作，在 graphql 稱之為 query https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Queries 會去「更新資料庫」的動作，在 graphql 稱之為 mutation https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Mutations 以上兩個資料夾可以翻閱一下，每支 api 會是一個檔案，所以很好管理 接著使用 graphql 社群的強大工具：graphiql，就同時得到文件＆測試工具了！ https://graphql-laravel-example.tw/graphiql 我安裝了一份 graphiql 給大家，點進去玩玩看吧！ 把他當成是技術規格文件與 Postman 測試工具，身兼兩種用途！ 有了這個工具，大幅減少了前後端需要溝通的事項，對於前後端合作有「巨大幫助」！ （請注意，實務上 graphiql 建議在本機執行，不要這樣線上公開，會有資安疑慮） ## 套件介紹 在 graphql 社群，有兩種開發 api 的哲學 分別是 schema-first 與 code-first 兩種方法 laravel 社群最知名的 schema-first 套件是這款 https://github.com/nuwave/lighthouse laravel 社群最知名的 code-first 套件是這款 https://github.com/rebing/graphql-laravel schema-first 與 code-first 的差異與優缺點我先不細談 總之，我個人比較喜歡 code-first，我覺得比較直觀、簡單、好導入 所以我的範例是用 https://github.com/rebing/graphql-laravel 這套件 您的 laravel 版本建議至少要是 8.0 以上版本，太舊的可能會有問題 順帶一提，兩個套件背後都是使用 https://github.com/webonyx/graphql-php 所以底層元件一樣，兩者有很多通用的觀念，不用太擔心 --- graphiql 是 graphql 官方的重要工具 laravel 社群已經有人寫好懶人安裝套件了 https://github.com/mll-lab/laravel-graphiql 按照說明安裝即可得到超好用的自動文件＆測試工具面板！ ## 結論 有了以上兩個套件，按照說明分別安裝 然後參考我提供的範例程式碼 https://github.com/howtomakeaturn/graphql-laravel-example 您應該就可以在專案之中導入 graphql 基礎架構，並且開始用 graphql 寫出您的第一支 api 我在替客戶導入的時候，發現網路上 graphql 的教學、說明雖然很多 但是剛開始寫還是很困難，很少範例 所以我製作這份 open source 方便大家參考＆入門 並且直接把 graphiql 面板公開部署上線，方便大家體驗！ （此為系列文章，更多內容會在近期發佈） --- # 系列文章 - [Laravel + GraphQL 接案心得＆範例分享 Part 1：強大優點、API 線上試玩、工具介紹](https://codelove.tw/@howtomakeaturn/post/yx08mx) - [Laravel + GraphQL 接案心得＆範例分享 Part 2：前端 Query/Mutation 與 React 串接範例](https://codelove.tw/@howtomakeaturn/post/2an0Gx)
2024 年，React 將慶祝其成立 11 週年，值得期待 React 生態系統中令人興奮的發展。在本部落格中，我們將基於 2023 年發生的情況以及來年的預期，探討生態系統的各個面向。 原文出處：https://dev.to/avinashvagh/react-ecosystem-in-2024-418k ## 1. 路由 路由一直是Web開發的關鍵部分，在2023年，我們看到了各種各樣的路由解決方案。讓我們看看2024年會發生什麼： - **React Router：** React Router 仍然是 React 應用程式中處理路由的基本選擇。憑藉其廣泛的文件和活躍的社區，它仍然是應用程式中聲明式路由的可靠選擇。 - **React Query：** Tanstack 的 React Query 在 2023 年流行的基礎上，旨在增強資料擷取和狀態管理。它簡化了 React 應用程式中管理、快取和同步資料的過程。 - **Next.js：** Next.js 是一個建立在 React 之上的框架，預計將保持其作為具有靈活路由選項的伺服器渲染 React 應用程式首選的地位。它的官方文件是 Next.js 應用程式中路由的寶貴資源。 2024 年，React 充滿活力的生態系統將繼續蓬勃發展，為開發人員提供豐富的工具和函式庫。請繼續關注 React 世界的更多更新和進步。 ## 2. 客戶端狀態管理 客戶端狀態管理是現代 Web 開發的一個重要方面，可以在前端應用程式中實現高效的資料處理。 Redux Toolkit 和 Zustand 是兩種流行的用戶端狀態管理解決方案。以下是兩者的簡要概述： ### 1. **Redux Toolkit** - **網址：** [Redux Toolkit](https://redux-toolkit.js.org/) Redux Toolkit 是一個建立在 Redux 之上的綜合狀態管理函式庫，Redux 是 React 應用程式中成熟的狀態管理函式庫。它提供了一組工具和最佳實踐，以可預測且高效的方式簡化狀態管理流程。 Redux Toolkit 的結構化方法（包括 actions、reducer 和 store）非常適合複雜的大型專案。它提倡採用集中式和聲明式的狀態管理方法。 ### 2. ** Zustand** - **示範：** [Zustand Demo](https://state-demo.pmnd.rs/) Zustand 是一個輕量級且靈活的狀態管理庫，專為小型專案或喜歡更簡單解決方案的開發人員而設計。它簡化了狀態管理，無需複雜的設定和概念。 Zustand 以其簡單性和易用性而聞名，這使其成為小型應用程式和重視更輕量級方法的人的絕佳選擇。 在 Redux Toolkit 和 Zustand 之間進行選擇時，請考慮專案的複雜性以及您對 Redux 的熟悉程度。 Redux Toolkit 是大型、結構化應用程式的絕佳選擇，而 Zustand 則非常適合需要快速、簡單的狀態管理解決方案的小型專案。 ## 3.伺服器狀態管理 伺服器狀態管理是 Web 開發的一個重要方面，特別是對於跨客戶端和伺服器的應用程式。以下是兩個可以幫助您有效管理伺服器狀態的關鍵庫： ### 1. **TanStack Query** - **文件：** [TanStack Query](https://tanstack.com/query/latest) TanStack Query 是一個強大且靈活的狀態管理庫，用於處理應用程式中的伺服器狀態。它允許您輕鬆地從伺服器獲取、快取和更新資料。該程式庫提供自動快取、高效資料擷取以及自訂 API 端點的功能等功能。對於需要即時資料更新和高效資料同步的應用程式來說，它是管理伺服器狀態的絕佳選擇。 ### 2. **Redux 工具包 - RTK Query** - **文件：** [Redux 工具包 - RTK 查詢](https://redux-toolkit.js.org/rtk-query/overview) RTK Query 是 Redux Toolkit 生態系統的一部分，提供管理伺服器狀態的全面解決方案。它以可預測且高效的方式簡化了發出 API 請求、快取資料和更新狀態的過程。 RTK Query 與 Redux 無縫集成，對於使用 Redux 進行狀態管理的應用程式來說是一個絕佳的選擇。它提倡最佳實踐並提供結構化方法來處理伺服器狀態。 選擇伺服器狀態管理庫時，請考慮您的專案需求、資料擷取需求的複雜性以及您對 Redux 的熟悉程度（如果您選擇 RTK 查詢）。這兩個庫都提供了用於管理應用程式中的伺服器狀態的強大解決方案。 ## 4. 表單處理 表單處理是建立 Web 應用程式的關鍵部分，尤其是在 React 中。用於表單處理的兩個流行的程式庫是 Formik 和 React Hook Form。概述如下： ### 1. ** Formik** - **網址：** [Formik](https://formik.org/) Formik 是在 React 中建立表單最常用的函式庫。它提供了一組實用程式和元件，可以輕鬆管理表單狀態、驗證和提交。雖然它是一個流行的選擇，但截至最新訊息，Formik 並未得到積極維護，這可能會影響其與未來 React 更新和不斷發展的最佳實踐的兼容性。使用 Formik 的唯一缺點是它不被維護。 Formik 文件/網站甚至不鼓勵在新專案中使用 Formik。 ### 2. **React Hook Form** - **網址：** [React Hook 表單](https://www.react-hook-form.com/) React Hook Form 是一個現代表單函式庫，它利用 React hooks 來有效地處理表單狀態和驗證。它得到積極維護，並提供輕量級且直觀的 API。 React Hook Form 以其效能和靈活性而聞名，使其成為在 React 應用程式中處理表單的絕佳選擇。 在 Formik 和 React Hook Form 之間進行選擇時，請考慮維護和專案的特定要求等因素。根據最新訊息，React Hook Form 因其積極的開發和現代的表單處理方法而成為推薦選擇。 ## 5. 測試 測試是軟體開發過程的關鍵部分，有各種工具和程式庫可協助開發人員編寫有效的測試。以下是一些用於測試的資源和工具： ### 1. **ViTest** - **網址：** [ViTest](https://vitest.dev/) ViTest 是一個由 vite 支援的單元測試框架。它提供了一種為 React、Vue、Svelte 等應用程式編寫單元測試、元件測試和端到端測試的簡單方法。如果您使用 React，ViTest 可以透過全面的測試來幫助您確保程式碼的可靠性和品質。 ### 2. **React 測試函式庫** - **文件：** [React 測試庫](https://testing-library.com/docs/react-testing-library/intro/) React 測試庫是 React 應用程式的熱門測試庫。它專注於編寫模擬使用者互動的測試，幫助您確保元件從使用者的角度按照預期執行。該程式庫鼓勵測試 React 元件的最佳實踐。 ### 3. ** Playwright** - **網址：** [Playwright](https://playwright.dev/) Playwright 是一個端對端測試框架，支援多種瀏覽器，包括 Chromium、Firefox 和 WebKit。它為瀏覽器自動化提供了統一的 API，並允許您編寫測試來驗證 Web 應用程式在不同瀏覽器上的功能。 Playwright 是確保跨瀏覽器相容性的強大工具。 這些資源和工具可以幫助您涵蓋測試的各個方面，從單元測試到端到端測試，具體取決於您的專案需求和您正在使用的技術。請務必進一步探索它們，以選擇最適合您要求的一種。 ## 6. 樣式 當談到 Web 開發中的樣式時，有幾種流行的工具和庫可供選擇。以下是三個值得注意的選項： ### 1. **Tailwind CSS** - **網址：** [Tailwind CSS](https://tailwindcss.com/) Tailwind CSS 是一個實用程式優先的 CSS 框架，它提供了一組預先建立的原子 CSS 類別來設計您的 Web 應用程式。它旨在透過在 HTML 中編寫實用程式類別來幫助您快速建立響應式且高度可自訂的設計。 Tailwind CSS 以其靈活性而聞名，對於想要實用程式驅動的樣式設計方法的開發人員來說是一個絕佳的選擇。 ### 2. **樣式元件** - **網址：** [樣式元件](https://styled-components.com/) Styled Components 是一個 CSS-in-JS 函式庫，用於設計 React 元件的樣式。它允許您透過使用標記模板文字定義樣式元件來直接在 JavaScript 檔案中編寫 CSS。這種方法使您能夠將樣式封裝在元件中，從而更輕鬆地管理和維護 CSS。樣式化元件在 React 生態系統中特別受歡迎。 ### 3. ** Emotion** - **文件：** [Emotion](https://emotion.sh/docs/introduction) Emotion 是另一個 CSS-in-JS 函式庫，重點是效能和靈活性。它提供了多種方法來定義樣式並將其應用到 React 元件，包括字串和物件樣式。 Emotion 以其可預測性和適合使用 JavaScript 編寫不同 CSS 樣式而聞名。它提供了一種與框架無關的方法，使其適用於各種 JavaScript 框架。 這些工具中的每一個都有自己的優勢，並且適合不同的用例。 Tailwind CSS 擅長使用實用程式類別進行快速 UI 開發。 Styled Components 和 Emotion 是 React 應用程式中元件級樣式的理想選擇。您的選擇將取決於您的專案要求和個人喜好。 ## 7.UI元件庫 用於在 2023 年建立使用者介面的 UI 元件庫，並將在 2024 年繼續使用。 ### 1. ** Material-UI** - **網址：** [Material-UI](https://mui.com/) Material-UI 是一個受歡迎且維護良好的 React UI 框架。它基於 Google 的 Material Design 指南，並提供廣泛的元件來建立現代且具有視覺吸引力的使用者介面。 ### 2. ** Mantine** - **網址：** [Mantine](https://mantine.dev/) Mantine 是一個現代 React 元件庫，專注於提供高品質的元件和鉤子。它提供了各種 UI 元素和工具來簡化您的開發流程。 ### 3. ** Ant Design** - **網址：** [Ant Design](https://ant.design/) Ant Design 是一個用於建立企業級 React 應用程式的綜合設計系統和元件庫。它以其豐富的元件和強調自然清晰的設計理念而聞名。 ### 4. ** Chakra UI** - **網址：** [Chakra UI](https://chakra-ui.com/) Chakra UI 是在 React 中建立可存取且高度可自訂的使用者介面的熱門選擇。它提供了一組可組合元件和一個樣式道具系統，用於靈活的樣式設定。 ### 5. ** Headless UI（Tailwind CSS 框架）** - **網址：** [Headless UI](https://headlessui.com/) Headless UI 是一組完全可存取、無樣式的 UI 元件，旨在與 Tailwind CSS 無縫協作。它允許您建立可存取的介面，同時保留對樣式的完全控制。 ### 6. **DaisyUI（Tailwind CSS 框架）** - **網址：** [DaisyUI](https://daisyui.com/) DaisyUI 是 Tailwind CSS 的擴展，它帶來了額外的元件和實用程式來增強您的開發體驗。如果您已經在使用 Tailwind CSS，它會特別有用。 ### 7.**Shadcn UI（Tailwind CSS 框架）** - **網址：** [Shadcn UI](https://ui.shadcn.com/) Shadcn UI 是另一個基於 Tailwind CSS 的 UI 元件庫，它提供了一系列元件和實用程序，用於快速有效地建立 Web 應用程式。 這些程式庫提供了各種元件和工具，可協助您在 React 應用程式中建立響應靈敏且具有視覺吸引力的使用者介面。庫的選擇取決於您的專案的要求和您的個人喜好。 ## 8. 動畫 如果您對 React 動畫庫感興趣，兩個流行的選擇是： 1. **React Spring** - 您可以在 React Spring 的官方網站 [react-spring.dev](https://www.react-spring.dev/) 上找到有關 React Spring 的更多資訊和文件。 React Spring 是一個功能豐富的動畫庫，它利用基於實體的動畫在 React 中建立流暢的互動式動畫。 2. **Framer Motion** - 另一個出色的選擇是 Framer Motion，您可以在 [framer.com/motion](https://www.framer.com/motion/) 進一步探索它。 Framer Motion 因是專為 React 設計的功能豐富的動畫庫而聞名。它提供了靈活性，非常適合在 React 應用程式中建立流暢的動畫。 這兩個庫都有其優點，它們之間的選擇可能取決於您的特定專案要求和個人喜好。 React Spring 提供基於實體的動畫和豐富的功能集，而 Framer Motion 以其易用性和靈活性而聞名。最好對兩者進行探索，看看哪一個更符合您的動畫需求。 請隨意參考各自的網站以獲取詳細的文件和範例，以便做出明智的選擇。 ## 9. 資料視覺化 當涉及 React 中的資料視覺化時，有幾個函式庫可以幫助您建立互動式且資訊豐富的圖表和圖形。以下是三個流行的選項： 1. **Victory** - 您可以在 [formidable.com/open-source/victory/docs](https://formidable.com/open-source/victory/docs) 中瀏覽 Victory 的文件 Victory 是一個強大的 React 資料視覺化函式庫，提供廣泛的圖表類型和自訂選項。它旨在輕鬆建立具有視覺吸引力的互動式資料視覺化。 2. **React Chartjs 2** - 造訪 [react-chartjs-2.js.org](https://react-chartjs-2.js.org/) 以了解更多資訊。 React Chartjs 2 是 Chart.js（一個流行的 JavaScript 圖表庫）的 React 包裝器。它提供了一種將 Chart.js 整合到 React 應用程式中的簡單方法，可讓您使用 Chart.js 的底層功能建立各種圖表和圖形。 3. **Recharts** - 有關Recharts的詳細訊息，您可以參考[recharts.org/en-US/](https://recharts.org/en-US/)。 Recharts 是一個使用 React 建立的可組合圖表庫。它提供了一個簡單而靈活的 API 來建立各種類型的圖表，非常適合將資料視覺化加入到您的 React 專案中。 每個庫都有自己的一組功能和優點，因此選擇將取決於您的特定專案要求和個人喜好。您可以存取他們各自的文件以了解更多資訊並開始使用 React 中的資料視覺化。 ## 10. 表 如果您正在尋找有關 React 中表格的訊息，可以在 [tanstack.com/table/v8](https://tanstack.com/table/v8) 上瀏覽版本 8 的 TanStack Table 文件。 TanStack Table 是一個無頭 UI 庫，可讓您在 TS/JS、React、Vue、Solid 和 Svelte 等各種框架中建立強大的表格和資料網格，同時保留對標記和樣式的控制。該文件將為您提供有關如何使用 TanStack Table 和配置表的詳細訊息，包括選項和 API 屬性。 無論您使用 TypeScript 還是 JavaScript 以及使用受支援的框架之一，TanStack Table v8 都提供了一種靈活的解決方案，用於在 Web 應用程式中建立表格和資料網格。該文件將引導您完成整個過程，並幫助您充分利用該庫來滿足您的特定需求。 ## 11. 國際化（i18n） 當涉及 React 應用程式中的國際化 (i18n) 時，有多個程式庫和工具可協助您管理翻譯和在地化。 React 中 i18n 的兩個突出選項是： 1. **i18next** - 您可以在 [react.i18next.com](https://react.i18next.com/) 找到使用 i18next 的文件和資源。 i18next 是一個流行的 JavaScript 國際化框架，包括 React。它提供了處理翻譯、格式化等的全面解決方案。 2. **React-Intl (Format.js)** - React-Intl 的文件是 Format.js 專案的一部分，可以在 [formatjs.io/docs/react-intl](https://formatjs.io/docs/react-intl)。 React-Intl 是一個函式庫，提供用於在 React 應用程式中格式化和處理國際化文字的工具。 這兩個函式庫都有活躍的社群、豐富的文件，並且在 React 生態系統中廣泛使用。您可以探索這些資源，以確定哪一個最適合您的 React 應用程式國際化需求。 ## 12. 開發工具 DevTools 對於偵錯和改進 Web 應用程式的開發工作流程至關重要。以下是一些流行的 React 開發工具和相關函式庫： 1. **React 開發者工具** - 該工具可作為 Chrome 擴充功能使用。它允許您檢查 React 元件層次結構、查看元件的狀態和 props，甚至更改元件的狀態以進行測試。您可以從 [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 安裝它。 2. **Redux DevTools** - Redux DevTools 是另一個 Chrome 擴展，可以增強 Redux 開發工作流程。它提供了對 Redux 儲存的深入了解，讓您可以檢查操作和狀態變更、倒回和重播操作等。您可以從 [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) 安裝它。 3. **Testing Playground** - Test Playground 是一個 Chrome 擴展，可以簡化 React 元件的測試。它提供了一個用於試驗元件及其道具的視覺環境。您可以在 [Chrome 線上應用程式商店](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano) 上找到它。 4. **React Hook Form DevTools** - 對於使用 React Hook Form 的用戶，可以使用 DevTools 來協助偵錯表單行為。您可以在 [React Hook Form 網站](https://www.react-hook-form.com/dev-tools/) 上存取它們。 5. **TanStack Query DevTools** - TanStack Query 是 React 的資料擷取庫，它提供用於偵錯和檢查查詢和突變的 DevTools。您可以參考[官方文件](https://tanstack.com/query/v4/docs/react/devtools)以了解更多資訊。 這些開發工具可協助開發人員簡化開發和偵錯流程，從而更輕鬆地建置和維護 Web 應用程式。 ## 13. 文件 文件對於任何軟體專案都至關重要。以下是用於建立文件的兩種流行工具： 1. **Docusaurus** - Docusaurus 是一種廣泛採用的用於建立文件網站的工具。它是一個開源框架，為建立和維護文件提供了乾淨且用戶友好的介面。 Docusaurus 具有高度可自訂性，許多專案和組織都使用它來建立文件網站。您可以在 Docusaurus 的[官方網站](https://docusaurus.io/)上了解更多並開始使用 Docusaurus。 2. **Nextra** - Nextra 是建立文件網站的另一種選擇。雖然 Nextra 可能不像 Docusaurus 那樣出名，但它提供了一種現代且簡約的方法來建立文件。它的設計是輕量級且用戶友好的，對於那些喜歡簡單乾淨的文件風格的人來說是一個不錯的選擇。您可以在 Nextra 的[官方網站](https://nextra.site/) 上探索有關 Nextra 的更多資訊。 Docusaurus 和 Nextra 都有各自的優勢，它們之間的選擇取決於您的特定需求和偏好。您可以存取他們各自的網站以了解更多資訊、存取文件並確定哪一個最適合您的專案。 ## 14. 元件開發環境 元件開發環境 (Dev Env) 對於有效建置和測試 UI 元件至關重要。用於為 UI 元件建立開發環境的廣泛使用的工具之一是 [Storybook](https://storybook.js.org/)。 Storybook 是業界標準的元件瀏覽器，可讓開發人員獨立開發 UI 元件。當處理設計系統或元件庫時，它特別有價值。以下是 Storybook 如何協助建立 UI 元件的開發環境： 1. **目錄 UI 元件**：Storybook 提供了用於編目和顯示 UI 元件的專用環境。開發人員可以單獨查看每個元件的外觀和行為。 2. **將元件變體儲存為故事**：在 Storybook 中，開發人員可以為每個元件建立「故事」。這些故事代表元件的不同變體或用例。這是記錄和展示元件行為的絕佳方式。 3. **開發人員體驗工具**：Storybook 提供了一系列開發人員體驗工具，包括熱模組重新加載，以簡化元件開發流程。 透過使用 Storybook，您可以有效率地開發、測試和記錄 UI 元件。它在設計系統時特別有用，因為它允許您專注於單個元件及其互動。您可以在 Storybook 的[官方網站](https://storybook.js.org/) 上了解更多並開始使用。 它是一種多功能工具，可以根據專案的特定需求進行定制，使其成為元件開發環境的寶貴資產。 ## 15. 類型檢查 TypeScript 是 Microsoft 開發的一種程式語言，透過新增靜態類型來擴充 JavaScript。它提供全面的類型檢查和強大的類型系統，以捕獲開發過程中的錯誤並提高程式碼品質。以下是 TypeScript 中類型檢查的一些關鍵方面： 1. **靜態型別系統**：TypeScript 引進了靜態型別系統，這表示在編譯時檢查類型。這有助於在執行程式碼之前辨識與類型相關的錯誤。 2. **型別註解**：開發者可以使用型別註解來指定變數、函數參數和傳回值的型別。這提供了清晰度並確保變數的使用一致。 3. **推斷**：TypeScript 可以根據指派給變數的值推斷類型。這減少了對顯式類型註解的需求並提高了程式碼簡潔性。 4. **類型聲明**：TypeScript支援自訂類型的聲明，例如介面和枚舉，以定義資料結構的形狀並增強程式碼的可維護性。 5. **類型相容性**：TypeScript 有一個檢查類型相容性的系統，這確保你不能將不相容的類型指派給變數。這有助於防止常見的執行時錯誤。 6. **對 JavaScript 文件進行類型檢查**：TypeScript 還可以檢查 JavaScript 文件，讓您可以逐步將 TypeScript 引入現有的 JavaScript 專案中。 透過將 TypeScript 合併到您的開發工作流程中，您可以從這些類型檢查功能中受益，從而儘早發現錯誤、增強程式碼可維護性並提高程式碼的整體品質。您可以在[官方 TypeScript 網站](https://www.typescriptlang.org/) 上了解有關 TypeScript 及其類型檢查功能的更多資訊。 ## 16. 行動應用程式 如果您想要開發行動應用程式，特別是 Android 和 iOS 的行動應用程式，React Native 是一個值得考慮的有價值的框架。 React Native 是一個開源框架，可讓您使用 JavaScript 和 React 建立行動應用程式。這就是 React Native 成為行動應用程式開發的熱門選擇的原因： 1. **跨平台開發**：React Native 使您能夠使用單一程式碼庫開發適用於 Android 和 iOS 的應用程式。這種方法可以顯著減少開發時間和工作量。 2. **可重複使用元件**：您可以建立跨平台工作的可重複使用 UI 元件，幫助您在應用程式中保持一致的外觀和感覺。 3. **熱重載**：React Native 支援熱重載，這意味著您可以立即看到程式碼變更的結果，而無需重新編譯整個應用程式。這加快了開發速度。 4. **大型社區**：React Native 擁有龐大且活躍的社區，這意味著您可以找到豐富的資源、庫以及常見問題的解決方案。 5. **本機效能**：React Native 應用程式具有接近本機的效能，因為它們使用本機元件進行渲染。這確保了流暢的用戶體驗。 6. **成本效益**：透過在 Android 和 iOS 之間共用程式碼庫，您可以降低開發成本。 要開始使用 React Native，您可以造訪官方網站 [React Native](https://reactnative.dev/) 以取得全面的文件、教學和資源。無論您是初學者還是經驗豐富的開發人員，React Native 都是行動應用程式開發的強大選擇。 ## 17. 為 React 開發人員提供的很棒的函式庫 很高興看到您對 React 開發人員的優秀庫感興趣。以下是一些非常有用的程式庫，可用於 React 開發中的各種功能： ### 1. **用於拖放功能的 DND 套件** - 網址：[DND Kit](https://dndkit.com/) DND Kit 是一個強大的庫，用於為 React 應用程式加入拖放功能。它提供了一種簡單且可自訂的方法來實現拖放功能，以便在使用者介面中重新排序、重新排列或組織元素。 ### 2. **React Dropzone 用於檔案上傳** - 網址：[React Dropzone](https://react-dropzone.js.org/) React Dropzone 是一個流行的程式庫，用於在 React 應用程式中處理檔案上傳。它提供了一個用戶友好且高度可自訂的 dropzone 元件，簡化了上傳文件的過程，使其成為任何需要文件上傳的專案的有價值的補充。 ### 3. **Firebase 用於身份驗證** - 網址：[Firebase](https://firebase.google.com/) Firebase 由 Google 開發，是一個用於建立 Web 和行動應用程式的綜合平台。它提供廣泛的服務，包括用戶身份驗證。透過 Firebase 驗證，您可以輕鬆地將安全的使用者註冊和登入功能新增到您的 React 應用程式中。 ### 4. **Supabase 用於身份驗證** - 網址：[Supabase](https://supabase.com/) Supabase 是 Firebase 的開源替代品，提供一套用於建立應用程式的服務，包括身份驗證。它提供了可以無縫整合到您的 React 專案中的用戶身份驗證功能。 這些程式庫涵蓋了 React 開發的基本面，包括拖放功能、檔案上傳和使用者身份驗證。根據您的專案要求，您可以利用這些程式庫來增強您的 React 應用程式。 **免責聲明：**“本文是在人工智慧的幫助下建立的”
開源專案是創新、協作和創造力的遊樂場。它是來自世界各地的開發人員聚集在一起分享他們的想法、技能和熱情的中心。 在本文中，我精心挑選了 24 個涵蓋廣泛興趣和技術的開源專案。 從尖端的人工智慧框架到漂亮的生產力工具以及介於兩者之間的一切，每個開發人員都能找到適合自己的東西。 我提供了直接連結、描述和視覺效果，以便您可以立即獲得每個工具的初步印象。 原文出處：https://dev.to/madza/24-open-source-projects-for-developers-in-2023-391l --- ## 1\. [ esProc SPL](https://github.com/SPLWare/esProc)（贊助） 集算器SPL是一種基於腳本的資料操作語言，與SQL資料庫集成，支援進階分析和高效能並行處理。 它適合處理大型資料集，與各種工具集成，提供資料視覺化，並跨多個平台工作。一些主要功能包括： **💪 強大的資料處理能力：** 集算器SPL是一種腳本語言，具有豐富的函數庫和強大的語法。 **✨ 預存程序等效項：** 它允許透過 JDBC 介面執行 SPL 腳本。 **📈 多功能視覺化：** 它提供了成熟的報告工具，具有廣泛的視覺化配置，用於建立各種類型的報告。 **⚡ 自動化工作流程：** 它支援軟體工作流程的自動化，包括用於程式碼建置、測試和部署的 CI/CD 流程。 **🔥 相比SQL更具彈性：** 與SQL語法不同，集算器SPL允許將資料處理程式碼寫在多條語句中。  ⭐ 支援他們的 GitHub 倉庫：[https://github.com/SPLWare/esProc](https://github.com/SPLWare/esProc) ## 2\. [Hoppscotch](https://github.com/hoppscotch/hoppscotch) 一種多功能開源 API 開發和測試工具，提供使用者友善的介面，用於發出 HTTP 請求來測試 API 並與 API 互動。 它簡化了製作和發送請求的過程，使其成為使用 API 的開發人員和測試人員的必備工具。  ## 3\. [Supabase](https://github.com/supabase/supabase) Firebase 的開源替代方案，為開發人員提供了一組用於建立可擴展的即時應用程式的工具。 它提供了強大的後端即服務 (BaaS) 平台，具有身份驗證、資料庫管理和即時功能等功能，使其成為建立現代 Web 和行動應用程式的強大選擇。  ## 4\. [Supertokens](https://github.com/supertokens/supertokens-core) 一種開源身份驗證解決方案，提供強大的安全功能和輕鬆集成，以增強 Web 和行動應用程式中的使用者身份驗證和授權。 它為開發人員提供了一個全面的工具包，用於保護用戶資料並確保無縫登入體驗。  ## 5\. [Git](https://github.com/git/git) Git 版本控制系統的官方開源程式庫，最初由 Linus Torvalds 建立。 Git 廣泛用於追蹤原始程式碼的更改，並透過提供強大的分支和合併功能來實現協作軟體開發。 ## 6\. [VS Code](https://github.com/microsoft/vscode) 由 Microsoft 開發的免費開源程式碼編輯器。 它提供了高度可自訂且高效的程式設計環境，具有 IntelliSense、除錯支援和龐大的擴充庫等功能，可增強您的開發工作流程。  ## 7\. [OhMyZsh](https://github.com/ohmyzsh/ohmyzsh) 一個流行且高度可自訂的框架，用於在類 Unix 作業系統中管理 Zsh 配置。 它簡化了 shell 自訂，提供了大量插件和主題來增強您的命令列體驗。  ## 8\. [Bun](https://github.com/oven-sh/bun) 一個開源 JavaScript 工具包，旨在簡化和優化為 Web 應用程式捆綁 JavaScript 程式碼的過程。 它提供了一種現代且快速的方法來建立捆綁包，從而增強了使用 JavaScript 專案時的效能和開發人員體驗。  ## 9\. [SWR](https://github.com/vercel/swr) SWR（Stale-While-Revalidate）是一個用於在 React 應用程式中取得資料的 JavaScript 函式庫。 它可以在客戶端和伺服器之間實現高效、自動的資料同步，提供無縫的即時更新，同時確保資料保持新鮮和最新。  ## 10\. [Prisma](https://github.com/prisma/prisma) 用於現代應用程式開發的開源資料庫工具包，透過強大的查詢產生器和類型安全的 ORM（物件關聯映射）層簡化資料庫存取和操作。 它允許開發人員使用聲明性和直觀的方法管理資料庫並與之交互，從而使資料庫操作在各種資料庫系統中無縫且安全。  ## 11\. [ElasticSearch](https://github.com/elastic/elasticsearch) 由 Elastic 開發的強大且可擴展的開源搜尋和分析引擎。 它旨在幫助用戶快速有效地搜尋、分析和視覺化大量資料，使其成為從全文搜尋引擎到日誌分析等應用程式的熱門選擇。  ## 12\. [Hasura](https://github.com/hasura/graphql-engine) 一款功能強大的開源工具，可簡化應用程式的 GraphQL API 開發。 借助 Hasura，您可以輕鬆建立、管理和保護 GraphQL API，從而更輕鬆地與資料來源互動並建立現代的資料驅動應用程式。  ## 13\. [BioDrop](https://github.com/EddieHubCommunity/BioDrop) 透過單一連結與您的受眾建立聯繫。在一處展示您建立的內容和專案。 讓人們更容易找到、關注和訂閱。  ## 14\. [Powertoys](https://github.com/microsoft/PowerToys) 適用於 Windows 的開源實用程序，可提高工作效率和自訂功能。 它提供了一系列方便的工具和實用程序，包括快速啟動器、文件預覽和視窗管理等功能，旨在簡化您的 Windows 體驗。  ## 15\. [Strapi](https://github.com/strapi/strapi) 開源無頭內容管理系統 (CMS)，使開發人員能夠快速建立強大且可自訂的 API。 它使團隊能夠輕鬆建立和管理內容豐富的網站和應用程式，為各種專案提供靈活性和可擴展性。  ## 16\. [Plausible](https://github.com/plausible/analytics) 一種開源網路分析工具，旨在為網站所有者提供對其網站效能的簡單且注重隱私的見解。 它提供用戶友好、輕量級的跟踪，且不會損害存取者的隱私，使其成為那些重視資料分析而無需侵入性跟踪方法的人的理想選擇。  ## 17\. [Astro](https://github.com/withastro/astro) 現代靜態網站產生器，透過僅傳送頁面所需的 JavaScript 來提供閃電般的效能，從而實現近乎即時的載入時間。 它將傳統伺服器渲染框架的靈活性與靜態網站產生器的速度相結合，使其成為建立高效動態網站的絕佳選擇。  ## 18\. [Remix](https://github.com/remix-run/remix) 用於建立現代 JavaScript 應用程式的 Web 框架，注重速度和開發人員體驗。 它使開發人員能夠透過無縫組合伺服器渲染和客戶端渲染的內容來建立高效能的 Web 應用程式。  ## 19\. [Tensorflow](https://github.com/tensorflow/tensorflow) 由Google開發的開源機器學習框架。 它為建立和部署機器學習模型提供了靈活且全面的生態系統，使其成為人工智慧領域研究人員和開發人員的熱門選擇。  ## 20\. [Flutter](https://github.com/flutter/flutter) 由 Google 建立的開源 UI 軟體開發工具包，以其從單一程式碼庫建立適用於行動、Web 和桌面的本機編譯應用程式的能力而聞名。 它使開發人員能夠使用單一程式語言 Dart 跨多個平台建立美觀、快速且高度可自訂的使用者介面。  ## 21\. [Kubernetes](https://github.com/kubernetes/kubernetes) 一個開源容器編排平台，可自動執行容器化應用程式的部署、擴充和管理。 它為編排容器提供了強大而靈活的基礎架構，使在雲端原生環境中大規模管理複雜的分散式系統變得更加容易。 ## 22\. [Docker](https://www.docker.com/community/open-source/) 一個開源工具，可簡化多容器 Docker 應用程式的管理。 它允許開發人員使用簡單的 YAML 檔案定義和執行多容器應用程式，從而更輕鬆地編排和部署複雜的服務。  ## 23\. [Chromium](https://github.com/chromium/chromium) Google 的一個開源瀏覽器專案，旨在為所有使用者建立更安全、更快、更穩定的網路體驗方式。 它是開發人員在網路瀏覽技術領域做出貢獻和創新的平台。  ## 24\. [Linux 核心](https://github.com/torvalds/linux) 由 Linus Torvalds 和全球貢獻者社群開發的開源、類別 Unix 作業系統核心。 它作為各種基於 Linux 的作業系統的核心元件，提供硬體互動和系統管理的基本功能。  --- 以上，簡單分享！
國外一名資深開發者分享工作心得與技巧，與大家分享原文！ 原文出處：https://dev.to/wraith/my-8-tips-for-a-better-life-as-a-developer-1hfg --- 我擔任軟體開發人員已經有 8 年多了，從我自己的經驗以及從一些非常有才華的人那裡學到了很多東西。在這篇文章中，我想分享一些真正讓我的體驗變得更好、更愉快的事情。 ## 1. 找一個您喜歡工作的地方  您的環境對您的生活貢獻很大。它可以增加或減輕壓力，幫助您集中注意力或分散注意力，讓您感到安全或不安全等等。因為它在我們每個人的生活中都扮演著不可或缺的角色，所以我認為從這裡開始是合適的。 無論您是在辦公室還是遠端工作，您很可能可以採取一些措施來找到一個讓您感覺「合適」的地方。我說「對」是因為這裡每個人都會有所不同。有些人想要感到舒適和「賓至如歸」。其他人想要一個不太舒適的區域，而是真正讓他們「進入狀態」並集中註意力的區域。 多年來，我嘗試了很多不同的地點，只是為了看看什麼對我有用。我坐在陽台上，享受早晨涼爽的空氣，喝著一杯熱咖啡。我確實坐在桌子底下，身上蓋著毯子。我坐在壁櫥、角落、咖啡店、餐廳、酒吧、汽車、公園、餐桌和樓梯井裡。透過所有這些實驗，我已經能夠找到在我需要時為我提供所需的地方。如果我需要集中註意力，我就需要獨處。某處有一扇可以關閉的門，但沒有窗戶讓我注意到有人走過。當我太舒適時，就像依偎在柔軟的沙發上的毯子裡時，我的工作效果就不太好。如果我需要改變節奏，或者只是需要和人們在一起，我發現我真的很喜歡坐在不太擁擠的小酒吧或餐廳裡。我可以在某個地方點一杯飲料和一份開胃菜然後工作，但周圍仍然有幾個人。 所以我鼓勵你嘗試幾個地方。找出什麼對你有用，同樣重要的是，找出什麼對你沒用。如果你找不到地方，你總是可以花一點力氣去打造你想要的地方！ 「正確」對你來說意味著什麼？ ## 2. 投資硬體  作為軟體開發人員，我們使用的硬體數量非常多。可以說，我們使用鍵盤和辦公椅之類的東西比生活中任何其他物品都多。當然，我們可以使用任何舊鍵盤來完成工作，我們可以坐在任何椅子上。但我發現，對「更好」的硬體進行一點投資會對我的工作體驗產生很大的影響。 ### 椅子 如果您在工作時坐著，並且您只想投資一件東西，那麼它絕對應該是您的椅子。一張既提供舒適又提供支撐的椅子確實可以大有幫助。從您可以坐多久並集中註意力而不會感到不舒服，到日常生活中背部、頸部和肩膀的感覺，您的椅子對您的整體健康和福祉有很大影響。因此，一定要找到一款好的產品，而不要只滿足於會導致不良姿勢的產品。 我個人使用 [Secretlab Titan Evo（蝙蝠俠主題）](https://secretlabchairs.ca/products/titan-evo-2022-series?sku=R22PU-Batman)，幾年來我對它非常滿意。與許多高端桌椅相比，價格還不錯。 ### 鍵盤 僅次於椅子（但相差不多）的是鍵盤。輕鬆地成為我們每天工作中互動最多的工具。那裡也有很多選擇，因此無論您的個人喜好如何，很可能有一些東西可以滿足您的需求。 每個人選擇合適的鍵盤都有很大不同。有些人喜歡低調的鑰匙而不是機械鑰匙。有些人需要整合 USB 連接埠。成本、人體工學、有線或無線、可自訂的按鍵和開關、背光、可配置的 LED、支援配置按鍵佈局、高度和大小、按鍵數量，這樣的例子不勝枚舉。尋找適合您的鍵盤無疑是一段旅程，但我強烈建議您繼續下去。當然，我們可以使用任何鍵盤來完成我們的工作......但我保證，如果您嘗試一下，找到「正確的」鍵盤將使您作為開發人員的一天和體驗更加愉快。 我使用 [Moonlander Mark 1](https://www.zsa.io/moonlander/)，絕對💙它！分離式設計確實幫助我不再那麼無精打采，也幫助消除了我長期以來的肩膀和手腕疼痛。再加上那些櫻桃棕色的開關聽起來很漂亮😍！ ### 滑鼠 談論鍵盤就不能不談論它們的助手——滑鼠。就像鍵盤一樣，市面上有許多不同類型的鍵盤，每個人都會有自己的偏好。幸運的是，即使是半像樣的滑鼠也有相當低的價格，因此嘗試一些滑鼠來找到適合您的滑鼠相對容易。但與此處的所有其他專案一樣，投入一點時間和金錢即可對您的體驗產生積極影響。 我的老鼠是 [ZLOT 垂直遊戲滑鼠](https://www.amazon.com/gp/product/B07T3PFWCB?th=1)。它是一款較輕（重量）的滑鼠，但具有良好的人體工學感覺和響應能力，我已經喜歡了很長一段時間了。 ### 螢幕 這絕對是一個可選專案，但我發現它讓我的工作更加愉快。並非每個人都需要外接顯示器。有些人實際上更喜歡直接使用筆記型電腦工作。但如果您確實喜歡使用外部顯示器，這是一項可以產生巨大影響的投資。 遺憾的是，由於多台 4k 顯示器在 Mac 上工作出現問題，我放棄了多顯示器設置，現在使用 [Sceptre 35" 曲面顯示器](https://www.sceptre.com/Monitors/2K-4K-Series/C355W-3440UN-35-Curved-Monitor-product1176category12category98.html)。它有很多空間，所以我仍然可以在一個螢幕上打開大量視窗。 ### 耳機 耳機也是可選的（有些人可能會反對這一點😝），但它們的好處怎麼強調都不為過。從減少干擾到幫助您集中註意力，一副好的耳機可以大有幫助。就像我列出的大多數專案一樣，每個人的偏好都會有所不同。但是，投入一點時間和金錢來尋找一雙適合您的好鞋，確實可以將您的遊戲提升到一個新的水平。我認識的許多人都尋求良好的降噪效果，而且它們必須輕盈舒適，這樣才能一次佩戴幾個小時。 我個人喜歡使用 Beats。我曾經使用[Studio3](https://www.bestbuy.ca/en-ca/product/beats-by-dr-dre-studio3-over-ear-noise-cancelling-bluetooth-headphones-black/11534527 )但是當我必須開始戴眼鏡時，我不喜歡這些耳機給我的鏡框帶來的壓力，所以我改用了[Beats Fit Pro](https://www.beatsbydre.com/earbuds/beats-fit-pro?sku=MK2F3) 並且對它們非常滿意。我已經連續戴了 8 個小時，效果非常好。它們輕巧、舒適、音質好，並且在我慢跑和運動時表現良好且穩定。 您使用什麼硬體？您夢想的硬體是什麼？ ## 3. 找到您*喜歡*使用的工具  除了硬體之外，作為開發人員，我們還使用許多軟體工具來完成我們的工作。有些我們別無選擇，但也有很多我們可以選擇，找到您真正喜歡使用的工具確實可以讓您的日常體驗變得更好。即使只是擁有一個可以配置為您喜歡的外觀的工具也可以產生積極的影響。 我在這裡想強調的不是找到每個人都使用的工具，因為他們可以做各種各樣的事情。更多的是尋找您真正「喜歡」和「期待」使用的工具來完成工作。即使它們不能完成其他工具可以完成的所有奇特的事情，如果您確實希望使用其他工具，那就使用它！擁有我們積極喜歡的工具確實會為我們的生活增添很多積極性。 多年來，類似的工具有很多，但這裡有一些工具為我的日常生活帶來了很多樂趣： - Giphy Desktop app - 用 gif 回覆取代無聊的文字，讓 Slack 訊息變得生動起來。 - Raycast - 這已經取代了我 Mac 上的 Spotlight。透過專業版，我可以存取 ChatGPT 4...因此，只需一個快速鍵盤快捷鍵，我就能輕鬆掌握 AI。對我來說遊戲規則改變者！ - Obsidian - 雖然這已經是一個流行的筆記應用程式，但我花了一些時間編寫了一些腳本來為我自動化工作，它完全改變了我記下所有筆記並跟踪我需要做的所有事情的方式。 - Arc browser - Arc 花了整整 1 天的時間才成為我的主要瀏覽器。現在，當我測試瀏覽器對我正在建立的某些功能的支援時，我只使用其他瀏覽器（在我的桌面上）。 - Habitical - 獲得徽章、成就和一般遊戲化讓我非常有動力，所以這個待辦事項應用程式讓我管理和執行任務變得更加有趣！ 有哪些工具可以為您的日常開發生活帶來樂趣？ ## 4. 設定目標  我知道這聽起來很明顯，而且我相信我們都從無數其他來源聽到這一點。但您可能會驚訝地發現有多少人沒有為自己設定目標。不相信我？向你的任意 2 到 3 個鄰居詢問他們目前正在努力實現什麼目標。當我問這個問題時，經常得到的只是聳聳肩，然後回答「沒什麼」。 僅僅設定目標也是不夠的。你也必須定期考慮它們。有些方法建議將它們寫下來並放在鏡子上或您經常看到它們的地方。這個方法對我個人來說沒有效果，但也許對你有用？對我來說有效的方法是每天早上開始工作前坐下來15 分鐘，並重點思考我的目標、我所有的待辦事項以及日曆上的所有事情（是的，我實際上在日曆上留出15分鐘的時間）這個，並強迫自己堅持這個時間）。在這段時間裡，我思考我的目標，並找出我今天可以做的一件小事，讓我離實現每個目標更近一步。 例如，如果我的目標是在家人來過感恩節之前清理車庫，我會想，「我今天可以做哪一件小事來實現這個目標？」。有時答案特別小…「掃到工作台下面」。其他時候我可能會更有動力，或者我有更多的可用時間，這可能是更大的事情。無論如何，請花一些時間考慮您今天可以採取的一項行動來實現該目標。 當我這樣做時，我的大腦中會發生一些事情。我發現自己感覺更有成就感和更樂觀。當然，完成目標可能是一條漫長的道路（如果它是一個大目標），但是知道我離我想要完成的事情更近了，這對我的日常生活產生了積極的影響，並讓我能夠完成的事情比我想像的還要多。 無論大小，給自己設定目標。然後定期思考它們，並採取許多微小的行動，以朝著前進邁出一步。我保證這會為您的生活帶來美好的事物！ 現在您正在努力實現哪些目標？ ## 5. 保持好奇心並了解*為什麼*  很多人對編碼專案中的完成方式感到沮喪或評判。我肯定去過那裡！ - “為什麼有人選擇這項技術？！對於這個用例來說，其他技術要好得多...” - “為什麼有人會寫這樣的程式碼？！” - “如果我們不做 X 而只是做…，事情會好得多” 這些聽起來很熟悉嗎？ 儘管事情有時會令人沮喪，但在軟體開發中，做出的每個決定背後幾乎總是有一個「原因」。這是最好的選擇嗎？也許不是……但做出這樣的選擇還是有原因的。 我曾經對事情的現狀感到沮喪，然後在嘗試解決問題時感到沮喪，然後在遇到障礙時感到沮喪。但最終，事情突然發生了，我沒有感到沮喪，而是開始尋找這些事情發生的原因。背後的*原因*是什麼。當我養成「尋找原因」而不是「想知道為什麼不」的習慣時，我的好奇心變得更強。我發現我正在尋找更多的訊息，更徹底地學習和理解事物，更多地同情與我一起工作的人，最終，沮喪的感覺減少了很多。 現在，我的經歷更加積極了。無論我是重構一段複雜的程式碼，試圖找到解決惱人問題的方法，還是為新工作學習全新的程式碼庫，我實際上更喜歡這個過程，因為我只是好奇並想知道「為什麼」。 最近一次讓您真正感到沮喪的編碼*事情*是什麼？您知道*為什麼*會是這樣嗎？ ## 6. 為重點工作劃出日曆  這說起來容易做起來難，具體取決於您的工作地點，但它會對您的開發人員生活產生驚人的影響！ 您是否曾經在該區域中，只是編寫程式碼來建立該新功能，然後「*叮！*」有人向您發送了一條緊急的 Slack 訊息？或是有人拍拍你的肩膀問你問題？您解決了乾擾問題，然後返回螢幕，然後您就失去了所有註意力？如果沒有……我願意賭很多錢，你會在職業生涯的某個時刻這麼做。 「在區域中」或進入「心流」的概念是一個已經被研究和寫了很多的主題。我強烈建議您查看一些有關該主題的文章和書籍，因為這是一個非常有趣的主題（至少對我來說是😃）！其中許多研究都表明，處於心流狀態是多麼有益，而且在中斷後可能需要 20 分鐘以上才能恢復到那種精神狀態！因此，找到讓自己進入這種心態並保持這種狀態的方法非常重要！ 我發現讓自己進入這種狀態的最佳方法之一就是在日曆上劃出大量時間專門用於「專注工作」。一開始這可能是一個挑戰，讓人們在嘗試聯繫之前檢查您的日曆或 Slack 狀態，並幫助每個人了解您將在焦點時間結束後立即回覆他們。但最終人們會明白過來，並且回報是巨大的！別忘了在這段時間關閉通知！ 不過這裡有一些提示...... - 接受有時會出現緊急事務並需要更高優先順序的事實。這就是生活，我們只能隨波逐流……但這不該成為「常態」。 - 拍攝 2-3 小時的片段。少於這個數量會讓人覺得不夠，但超過這個數量，人們就會被迫更頻繁地打斷你。請記住，其他人也有重要、緊急的事務，在當今的工作環境下，讓他們等待半天以上才能獲得地址確實不公平或不合理。 - 在你最有生產力的時間安排這些時間段。對我來說，早上 6 點到 10:30 左右我的工作效率最高。所以我通常會嘗試將我的專注時間安排在這些時間裡。 您發現一天中的什麼時段您的工作效率最高？ ## 7. 讓 PR 小一點  我喜歡這個，並且在過去一年左右的時間裡它已經成為我的首要任務。 事實證明，保持 Pull 請求（或 GitLab 人員的合併請求）較小有很多積極的好處。發布的錯誤更少，我們審查程式碼的時間更少，功能的推出速度更快，僅舉幾例。所有這些不僅使我們的產品變得更好，而且我發現它也極大地改善了我作為開發人員的體驗！ 透過專注於較小的變化，我發現我可以更徹底地思考問題，考慮到在較大變化的混亂中可能被忽視的用例。我能夠更快地將變更納入審查，我的團隊成員能夠更快地審查我的程式碼，因為我只佔用了他們5 分鐘而不是2 小時的時間，並且在審查期間，我收到的程式碼要少得多變更請求。因此，更好的程式碼將會出現，我可以繼續花更多的時間來建立新的東西，而不是必須解決一堆被遺漏的錯誤。 另一方面，審查小型 PR|MR 比大型 PR|MR 更令人愉悅。您是否曾經需要審查某人的 PR|MR，其中包含數千個更改、跨越 20 多個檔案以及應用程式的多個區域？當你這樣做時，你的第一個反應是什麼？您是否對參與並開始審核感到過於興奮？或者，也許您感到“呃”，於是推遲了會議，因為距離下一次會議只有 30 分鐘，而您可以在這段時間內完成其他事情？ 當審查大型 PR|MR 時，通常會失去很多細節（或至少受到較少的關注），最終，大多數人會達到「審查盲目性」或「審查疲勞」的地步，事情開始被忽視，或者審稿人必須離開一段時間，稍後再回來。這一切都會導致審核過程花費更長的時間、效率更低，並導致提交更多的變更請求。更不用說所有團隊成員都有的不滿情緒了。 自從我開始將此作為自己的優先事項，並與團隊成員一起努力讓他們也這樣做時，我注意到我在 PR|MR 方面的經驗明顯改善了。我更願意在會議之間跳出一些評論，我不得不要求更少的改變，而且我不會在需要離開並重新振作起來之後感到精疲力盡。就連我的計劃也變得更準確了！ 總而言之，我強烈向大家推薦這個。如果您想了解更多關於這樣做的好處，我建議您查看 [LinearB 部落格](https://linearb.io/blog) 以及 [Dev Interrupted 播客](https://linearb.io/dev-interrupted/podcast).他們談到了一些很棒的觀點，我發現這些觀點確實對工程領導者和團隊有幫助！ 你曾經審查過的最糟糕的公關是什麼？ ## 8. 寫下一切！  我的最後一個建議是我在去年開始做的事情，在閱讀了[如何做智慧筆記](https://www.amazon.ca/How-Take-Smart-Notes-Technique/dp/3982438802)和[把事情做好](https://www.amazon.ca/Getting-Things-Done-Stress-Free-Productivity/dp/0142000280)它對我的生活產生了驚人的影響。 當我學到新東西時，我會把它寫下來。即使只是一小段描述我學到的東西。當出現新任務時，無論大小，我都會把它寫下來。在會議期間，如果分享想法、給予回饋、提出問題，所有這些都會被記錄下來。如果我對某事有一個隨意的想法，或者一個頭腦發熱的想法……你猜對了……它會被寫下來。然後，每當我有幾分鐘空閒時間時，我都會先看筆記，而不是瀏覽社群媒體。我盡可能回顧它們，這強化了我腦海中的訊息，但也幫助我將不同的想法聯繫在一起，這往往會產生一個全新的想法。 透過這樣做，我發現我對事情的記憶更加徹底。如果我不能，我有記錄並且可以將其調出！它使我能夠完成更多的工作文件，而且我甚至在任何給定時間都有 4 或 5 篇部落格文章正在編寫中！遺漏的事情少了很多，而且我能夠完成更多的事情。 我最近開始了一份新工作，透過使用這種方法，人們已經來找我詢問我是如何做到這麼多的！秘密醬汁？全部寫下來並將其加入到系統中。 這對我來說改變了遊戲規則，我只需要鼓勵其他人也這樣做，因為我真的相信這可以使他們的生活受益匪淺！ 你用什麼方法來記住和分享你學到的東西？ ## 結論 在過去 8 年多的軟體開發人員和工程師工作中，我學到了很多。我經歷過好時光和壞時光，並一路走來學到了一些非常有用的人生課程。透過找到我喜歡工作的地方，在我的硬體上投入更多的時間和金錢，找到我「喜歡」使用的工具，設定目標，保持好奇心並專注於“為什麼”，定義專注工作的時間，專注於保持PR 較小，並寫下我能寫下的一切，我可以誠實地說，我的開發者體驗得到了極大的改善。 我非常希望這些技巧中至少一兩個能改善您的體驗。
一直寫 todo list 很無聊吧！ ✨ TODO 應用程式以外的 5 個 JavaScript 專案想法。 這些專案將挑戰您走出舒適區，學習新知識。 試試看吧！ - 原文網址：https://dev.to/swastikyadav/5-javascript-project-ideas-beyond-todo-apps-h9h ## **1️⃣ 時間軸滾動** 開發一個記錄一系列歷史事件的網路應用程式。理想情況下，日期均勻分開並利用無限滾動。 例如，滾動回 20 世紀 80 年代很快，但滾動回恐龍時代就要很久。 ## **2️⃣ 文章導航器** 提供一個瀏覽器擴充程序，用於概述文章並顯示具有滾動功能的頁面小地圖。 始終顯示目錄在旁邊，並且無需滾動即可快速查看頁面結構。 ## **3️⃣ 數位名片** 開發一個相當於名片的單頁應用程式。 提供您的聯絡資訊、社交媒體連結以及您所做工作的簡短描述。 讓用戶決定公開分享還是僅與選定的人分享。 ## **4️⃣ 文章編修檢查器** 顯示兩個 `textarea` 或兩個檔案之間的相似性，並提供一個分數來說明它們的相似程度。 顯示 2 個檔案的差異比較，就像在 GitHub 上進行 `compare` 一樣。 ## **5️⃣ 迷因平台** 使用 Giphy API 建立您自己的迷因搜尋平台。 --- 希望有幫助！
為了提升系統穩定性，最近替某電商客戶的專案寫單元測試 有一部份核心功能會用到第三方 API，這讓測試變很難寫，因為沒有本地的狀態變化可以比較 想到 laravel 有一個關於 mail 的測試功能，有類似情況 簡單來說就是在 phpunit 中這樣啟動之後 ``` Mail::fake(); ``` 就可以這樣來檢查是否有執行某 api ``` Mail::assertSent(OrderShipped::class); ``` 能否用同樣原理，處理我面對的情況呢？ 決定來看一下原始碼！ --- 首先是 fake 會直接換掉 Mailer 的實體 `framework/src/Illuminate/Support/Facades/Mail.php` ``` public static function fake() { $actualMailManager = static::isFake() ? static::getFacadeRoot()->manager : static::getFacadeRoot(); return tap(new MailFake($actualMailManager), function ($fake) { static::swap($fake); }); } ``` 可見是實作同樣 interface 的測試專用類別！ `framework/src/Illuminate/Support/Testing/Fakes/MailFake.php` 然後寄信就改成，把變數存進陣列即可 ``` public function send($view, array $data = [], $callback = null) { if (! $view instanceof Mailable) { return; } $view->mailer($this->currentMailer); if ($view instanceof ShouldQueue) { return $this->queue($view, $data); } $this->currentMailer = null; $this->mailables[] = $view; } ``` 然後 assertSent 那些就檢查陣列內容，比對一下即可 ``` public function assertSent($mailable, $callback = null) { [$mailable, $callback] = $this->prepareMailableAndCallback($mailable, $callback); if (is_numeric($callback)) { return $this->assertSentTimes($mailable, $callback); } $message = "The expected [{$mailable}] mailable was not sent."; if (count($this->queuedMailables) > 0) { $message .= ' Did you mean to use assertQueued() instead?'; } PHPUnit::assertTrue( $this->sent($mailable, $callback)->count() > 0, $message ); } ``` inside of the `sent` function ``` return $this->mailablesOf($mailable)->filter(fn ($mailable) => $callback($mailable)); ``` --- 所以，目前這樣看起來，在需要測試跟「第三方 API」有關的功能時，可以使用同樣原理 使用 laravel 提供的 mock 功能，把會用到的第三方套件 mock 掉，套件的核心 function 就存個變數或陣列之類的 然後多寫個類似 `assertSent` 這樣的方法，應該就可以做到不錯的測試效果～！ 簡單來說，就是設法做出「本地的狀態變化可以比較」就是了 我來往這方向寫寫看，有心得再補充分享～
## 介紹 編寫乾淨的程式碼是每個軟體開發人員的基本技能。乾淨的程式碼不僅使您的程式碼庫更易於維護和理解，而且還能促進團隊成員之間的協作。在這篇綜合文章中，我們將探討什麼是乾淨的程式碼、為什麼它很重要，並為您提供一組最佳實踐和原則來幫助您編寫乾淨且可維護的程式碼。 - 原文出處：https://dev.to/favourmark05/writing-clean-code-best-practices-and-principles-3amh --- ## 什麼是乾淨程式碼？ 乾淨的程式碼是易於閱讀、易於理解且易於修改的程式碼。它是沒有不必要的複雜性、冗餘和混亂的程式碼。乾淨的程式碼遵循一組約定和最佳實踐，使其更加一致，使多個開發人員更容易無縫地處理同一個專案。 ## 為什麼乾淨的程式碼很重要？ 1. **可讀性**：乾淨的程式碼易於閱讀，這意味著任何人 - 包括未來的你 - 都可以快速理解它。這減少了掌握程式碼功能所需的時間，從而加快了開發和除錯速度。 2. **可維護性**：程式碼的讀取次數多於編寫次數。當您編寫乾淨的程式碼時，隨著時間的推移，維護和擴展應用程式將變得更加容易。這在軟體開發生命週期中至關重要，因為專案經常發展和成長。 3. **協作**：簡潔的程式碼鼓勵協作。當您的程式碼乾淨且組織良好時，其他團隊成員就可以有效地處理它。這使得劃分任務和同時處理程式碼庫的不同部分變得更容易。 4. **減少錯誤**：乾淨的程式碼可以減少引入錯誤的可能性。難以理解的程式碼在修改或增強過程中更容易出錯。 5. **效率**：乾淨的程式碼就是高效率的程式碼。它通常執行速度更快並且使用更少的資源，因為它避免了不必要的操作和複雜性。 現在我們了解了為什麼乾淨的程式碼很重要，讓我們深入研究一些最佳實踐和原則來幫助您編寫乾淨的程式碼。 ## 編寫簡潔程式碼的最佳實踐和原則 1. **有意義的變數和函數名稱** 對變數、函數、類別和其他辨識碼使用描述性名稱。精心選擇的名稱可以傳達實體的目的，使程式碼更容易理解。避免使用單字母變數名或神秘的縮寫。 ``` # Bad variable name x = 5 # Good variable name total_score = 5 ``` 2. **保持函數和方法簡短** 函數和方法應該簡潔並專注於單一任務。單一職責原則（SRP）指出，一個函數應該要做一件事，並且把它做好。較短的函數更容易理解、測試和維護。如果函數變得太長或太複雜，請考慮將其分解為更小、更易於管理的函數。 ``` // Long and complex function function processUserData(user) { // Many lines of code... } // Refactored into smaller functions function validateUserInput(userInput) { // Validation logic... } function saveUserToDatabase(user) { // Database operation... } ``` 3. **評論和文件** 謹慎使用評論，當你使用評論時，要讓它們變得有意義。程式碼應該盡可能不言自明。文件（例如內嵌註解和自述文件）可協助其他開發人員了解程式碼的目的和用法。記錄複雜的演算法、重要的決策和公共 API。 ``` # Bad comment x = x + 1 # Increment x # Good comment # Calculate the total score by incrementing x total_score = x + 1 ``` 4. **一致的格式和縮排** 堅持一致的編碼風格和縮排。這使得程式碼庫看起來乾淨且有組織。大多數程式語言都有社群接受的編碼標準（例如，Python 的 PEP 8、JavaScript 的 eslint），您應該遵循。一致性也適用於命名約定、間距和程式碼結構。 ``` // Inconsistent formatting if(condition){ doSomething(); } else { doSomethingElse(); } // Consistent formatting if (condition) { doSomething(); } else { doSomethingElse(); } ``` 5. **DRY（不要重複）原則** 避免重複程式碼。重複的程式碼更難維護並增加不一致的風險。將通用功能提取到函數、方法或類別中以提高程式碼的可重複使用性。當您需要進行更改時，只需在一個地方進行即可。 假設您正在開發一個 JavaScript 應用程式來計算購物車中商品的總價。最初，您有兩個單獨的函數來計算每種商品類型的價格：一個用於計算一本書的價格，另一個用於計算筆記型電腦的價格。這是初始程式碼： ``` function calculateBookPrice(quantity, price) { return quantity * price; } function calculateLaptopPrice(quantity, price) { return quantity * price; } ``` 雖然這些函數有效，但它們違反了 DRY 原則，因為計算總價的邏輯對於不同的商品類型是重複的。如果您有更多的專案類型需要計算，您最終將重複此邏輯。為了遵循DRY原則，提高程式碼的可維護性，可以對程式碼進行如下重構： ``` function calculateItemPrice(quantity, price) { return quantity * price; } const bookQuantity = 3; const bookPrice = 25; const laptopQuantity = 2; const laptopPrice = 800; const bookTotalPrice = calculateItemPrice(bookQuantity, bookPrice); const laptopTotalPrice = calculateItemPrice(laptopQuantity, laptopPrice); ``` 在此重構的程式碼中，我們有一個calculateItemPrice函數，它根據作為參數提供的數量和價格計算任何商品類型的總價。這遵循了 DRY 原則，因為計算邏輯不再重複。 現在，您可以通過使用適當的數量和價格值呼叫calculateItemPrice來輕鬆計算書籍、筆記本電腦或任何其他商品類型的總價。這種方法提高了程式碼的可重用性、可讀性和可維護性，同時降低了重複程式碼引起的錯誤風險。 6. **使用有意義的空白** 使用空格和換行符正確設置程式碼格式。這增強了可讀性。使用空格來分隔程式碼的邏輯部分。格式良好的程式碼更容易瀏覽，減少讀者的認知負擔。 ``` // Poor use of whitespace const sum=function(a,b){return a+b;} // Improved use of whitespace const sum = function (a, b) { return a + b; } ``` 7. **錯誤處理** 優雅地處理錯誤。在程式碼中使用適當的 try-catch 塊或錯誤處理機制。這可以防止意外崩潰並為除錯提供有價值的訊息。不要抑制錯誤或在沒有正確響應的情況下簡單地記錄錯誤。 ``` // Inadequate error handling try { result = divide(x, y); } catch (error) { console.error("An error occurred"); } // Proper error handling try { result = divide(x, y); } catch (error) { if (error instanceof ZeroDivisionError) { console.error("Division by zero error:", error.message); } else if (error instanceof ValueError) { console.error("Invalid input:", error.message); } else { console.error("An unexpected error occurred:", error.message); } } ``` 8. **測試** 編寫單元測試來驗證程式碼的正確性。測試驅動開發 (TDD) 可以迫使您預先考慮邊緣情況和預期行為，從而幫助您編寫更清晰的程式碼。經過良好測試的程式碼更加可靠並且更容易重構。 ``` // Example using JavaScript and the Jest testing framework test('addition works correctly', () => { expect(add(2, 3)).toBe(5); expect(add(-1, 1)).toBe(0); expect(add(0, 0)).toBe(0); }); ``` 9. **重構** 定期重構你的程式碼。隨著需求的變化以及您對問題域的理解的加深，請相應地調整您的程式碼。隨著專案的發展，重構有助於保持乾淨的程式碼。必要時不要害怕重新存取和改進現有程式碼。 假設您有一個函數，可以計算購物車中具有固定折扣百分比的商品的總價： ``` function calculateTotalPrice(cartItems) { let totalPrice = 0; for (const item of cartItems) { totalPrice += item.price; } return totalPrice - (totalPrice * 0.1); // Apply a 10% discount } ``` 最初，此函數計算總價並應用 10% 的固定折扣。然而，隨著專案的發展，您意識到您需要支持可變折扣。為了重構程式碼使其更加靈活，可以引入折扣參數： ``` function calculateTotalPrice(cartItems, discountPercentage) { if (discountPercentage < 0 || discountPercentage > 100) { throw new Error("Discount percentage must be between 0 and 100."); } let totalPrice = 0; for (const item of cartItems) { totalPrice += item.price; } const discountAmount = (totalPrice * discountPercentage) / 100; return totalPrice - discountAmount; } ``` 在這段重構的程式碼中： * 我們在calculateTotalPrice函數中新增了discountPercentage參數，讓您在呼叫函數時指定折扣百分比。 * 我們對discountPercentage 參數進行驗證，以確保其落在有效範圍內（0 到100%）。如果不在範圍內，我們會拋出錯誤。 * 折扣計算現在基於提供的discountPercentage，使功能更加靈活，能夠適應不斷變化的需求。 通過這種方式重構程式碼，你提高了它的靈活性和可維護性。您可以輕鬆地調整該函數來處理不同的折扣場景，而無需重寫整個邏輯。這證明了隨著專案的發展和需求的變化定期進行程式碼重構的重要性。 10. **版本控制** 使用 Git 等版本控制系統來跟踪程式碼更改。這使您可以與團隊成員有效協作，在必要時恢復到以前的版本，並維護專案開發的清晰歷史記錄。 Git 提供了程式碼審查、分支和合併工具，促進協作和程式碼整潔。 ##結論 編寫乾淨的程式碼不僅僅是一套規則，更是一種心態和紀律。它是關於建立易於閱讀、維護和擴展的軟體。通過遵循這些最佳實踐和原則，您可以成為一名更熟練的開發人員，生成高質量的程式碼。投入時間仔細檢查其他工程師的程式碼庫，特別是在開源專案中，可能是一種啟發性的體驗。通過這種探索，您將獲得對不同編碼風格和策略的寶貴見解。這種接觸使您能夠提煉出編寫原始、可持續程式碼庫的精髓。請記住，乾淨的程式碼是一個持續的旅程，通過練習，它會成為第二天性，從而實現更高效、更愉快的軟體開發。
一篇國外的熱門文章，關於一些開源選擇方案，翻譯出來給大家參考。 - Medusa vs. Shopify - Postman vs. Hopscotch - Slack vs. Rocket Chat - Google Chrome vs. Brave - n8n vs. Zapier - Webflow/Framer vs. Webiny - Bit.ly vs. Dub.co - Calendly vs. Cal.com - Airtable vs. NocoDB 原文出處：https://dev.to/rigdev/10-open-source-alternatives-to-proprietary-software-34lb --- ##Medusa：Shopify 的替代方案  您可能聽說過 Shopify，它是遊戲中的大玩家。但現在有一個新的競爭者：美杜莎。讓我們來分析一下這兩者的優點、缺點以及本質。 ###Medusa 與 Shopify 相比的優點： **按你的方式做**：Medusa 是開源的，這意味著您可以根據自己的喜好對其進行調整。想要一個霓虹粉紅結帳按鈕嗎？大膽試試吧！ **保留您的現金**：與 Shopify 不同的是，除非您使用他們的支付系統，否則 Shopify 會奪走您的部分銷售額，而 Medusa 不會動用您的口袋。 **選擇你的家**：透過 Medusa，你可以決定在哪裡開設你的商店。這就像在租公寓還是建造自己的房子之間做出選擇。 **權力歸於人民**：美杜莎受到社區的愛戴。這意味著定期更新、酷炫的新功能以及一群隨時準備提供幫助的人。 **沒有秘密**：開源意味著您可以看到幕後發生的一切。 ###Medusa 與 Shopify 相比的缺點： **開箱即用**：Shopify 擁有大量內建功能和龐大的應用程式商店。美杜莎在這方面仍在迎頭趕上。 **減少 DIY**：使用 Shopify，許多技術問題都會為您處理。美杜莎？您坐在駕駛座上，但這意味著您也必須應對道路上的顛簸。 **名言**：每個人都知道 Shopify。美杜莎仍然是學校裡的新生。 ###結論： 在 Medusa 和 Shopify 之間進行選擇可以歸結為您的特定需求和技術專長。如果您重視靈活性、客製化和成本控制，Medusa 是令人信服的選擇。然而，如果您正在尋找一個擁有良好記錄、廣泛內建功能和強大支援的平台，Shopify 仍然是一個強大的競爭者。 ##Hopscotch：郵差的替代方案  您可能聽過 Postman，它是 API 測試領域的大人物。但有一個開源挑戰者踏入了這個圈子：Hopscotch。 ###Hopscotch 與 Postman 相比的優點： **像鳥一樣自由**：作為開源軟體，Hopscotch 不會花費您一毛錢。對於關注預算的小型團隊或個人開發人員來說，這可能是一個巨大的勝利。 **社群氛圍**：像 Hopscotch 這樣的開源工具依靠社群的投入而蓬勃發展。這意味著您有一群充滿熱情的人不斷改進它並加入很酷的新功能。 **透明度**：對於 Hopscotch，不存在任何幕後謎團。您可以看到每一行程式碼，確保您確切知道發生了什麼。 **輕量級**：Hopscotch 往往比 Postman 更輕量級，如果您正在尋找資源密集程度較低的東西，這可能是一個優勢。 **豐富的客製化**：由於是開源的，如果缺少您需要的功能，您可以自行加入或召集社群來提供協助。 ###Hopscotch 與 Postman 相比的缺點： **功能豐富**：Postman 已經廣泛存在並擁有大量內建功能。它就像是 API 測試的瑞士軍刀。 **流暢的使用者介面**：Postman 的使用者介面精美且直觀，讓新手可以輕鬆上手。 **協作功能**：透過其團隊協作工具，Postman 讓團隊可以輕鬆地協同工作、共享集合並保持所有內容同步。 **廣泛的文件**：Postman 參與遊戲已經有一段時間了，因此他們建立了一個龐大的教程、指南和社區帖子庫來幫助您。 **整合生態系統**：Postman 提供與各種其他工具的集成，使其更容易融入現有工作流程。 如果您熱衷於開源，喜歡修補，並且正在尋找一個輕量級工具，那麼 Hopscotch 可能是您最好的新朋友。但如果您想要一個功能豐富且擁有良好記錄的環境，並且不介意花一些錢購買高級功能，那麼 Postman 仍然是一個不錯的選擇。像往常一樣，關鍵是找到適合您需求的工具。 ##Rocket Chat：Slack 替代方案  當談到團隊溝通工具時，Slack 一直是許多人的首選。但等一下，擂台上有個開源挑戰者：Rocket.Chat。讓我們透過簡單地了解 Rocket.Chat 與 Slack 相比的三個優缺點來分解這兩者的比較。 ###為什麼 Rocket.Chat 可能會震撼您的世界： **調整和調整**：Rocket.Chat 是開源的，這意味著如果有您不喜歡的東西或您認為可以更好的東西，您（或您的技術團隊）可以參與並自訂它。您的 Rocket.Chat 可以像您團隊最喜歡的內部笑話一樣獨特。 **錢包友好**：使用 Rocket.Chat，您可以避免 Slack 等高級版本專有軟體帶來的一些討厭的費用。此外，由於是自託管，您可以更好地控制未來潛在的價格上漲。 **您的資料，您的規則**：在您自己的伺服器上託管 Rocket.Chat 意味著您可以完全控制您的資料。無需擔心第三方存取或資料儲存位置。 ###Slack 仍可能佔上風的地方： **即插即用**：Slack 以其用戶友好的介面和易於設定而聞名。對於那些不懂科技的人來說，Slack 的簡單方法可能是一件幸事。 **整合**：Slack 一直處於領先地位，擁有龐大的應用程式整合庫。無論是 Trello、Google Drive，還是您的團隊離不開的小眾工具，Slack 都可能提供了整合。 **酷兒童俱樂部**：Slack 的受歡迎意味著許多人已經熟悉它。如果新團隊成員之前已經使用過 Slack，那麼新團隊成員的入職或與合作夥伴的協作可能會更順利。 ###結論： Rocket.Chat 提供了一個無與倫比的客製化、成本節約和資料控制的世界。但如果您正在尋找無憂無慮的設置、大量的整合以及廣泛的熟悉度，Slack 仍然可以滿足您的需求。一如既往，最好的選擇取決於您的團隊最重視的是什麼！ ##Brave：Google Chrome 的替代品  就網頁瀏覽器而言，Google瀏覽器在相當長一段時間內一直是衛冕冠軍。但有一個新的競爭者正在引起轟動：Brave。 Brave 建構於與 Chrome 相同的 Chromium 引擎之上，承諾提供不同類型的瀏覽體驗。 ###Brave 與 Google Chrome 相比的優點： **隱私第一**：Brave 非常重視隱私。它可以立即阻止第三方廣告和追蹤器，這意味著您不必擺弄設定或加入擴充功能來阻止公司在網路上追蹤您。 **速度惡魔**：由於其廣告攔截功能，Brave 通常加載頁面的速度比 Chrome 更快。更少的廣告和追蹤器意味著更少的下載資料，讓您的瀏覽體驗更快捷。 **衝浪獲得報酬**：Brave 有一個獨特的功能，稱為 Brave 獎勵。選擇尊重隱私的廣告，您可以獲得 BAT（基本注意力代幣），您可以將其保留或作為小費提供給您最喜歡的網站。 Chrome 不提供類似的功能。 ###Brave 與 Google Chrome 相比的缺點： **豐富的擴充功能**：Chrome 的網路應用程式商店是擴充功能和應用程式的寶庫。雖然 Brave 是基於 Chromium 引擎建置的，因此能夠安裝所有 Chrome 擴充程序，但由於某些擴充功能非常注重隱私和廣告攔截，因此可能會出現相容性問題。 **Google 生態系統**：如果您已經投資於 Google 領域（例如 Google 雲端硬碟、Google 照片、Google Meet），那麼 Chrome 可以與這些服務無縫整合。 Brave 可以存取它們，但不太順利。 **穩定可靠**：Chrome 已經存在多年，並且在穩定性和性能方面擁有良好的記錄。 Brave 比較新，雖然很強大，但還沒有足夠的時間來解決所有的問題。 ###結論： 如果您重視隱私，並且喜歡更快、更有價值的瀏覽體驗，那麼 Brave 可能會改變您的遊戲規則。但如果您是 Chrome 擴充功能的重度用戶或深入 Google 生態系統，那麼 Chrome 可能仍然是您的最佳選擇。 ##n8n 與 Zapier：自動化競技場  在工作流程自動化領域，Zapier 長期以來一直是家喻戶曉的名字，它幫助企業和個人連接他們最喜歡的應用程式並自動化任務。進入 n8n，這是一個開源替代方案，以其獨特的方法而引人注目。讓我們深入了解 n8n 如何與 Zapier 進行比較。 ###n8n 與 Zapier 相比的優點： **客製化之王**：n8n 是開源的，提供無與倫比的客製化功能。如果您需要特定的功能或集成，您可以自行建立或利用社群來取得協助。這種程度的彈性是 Zapier 等專有平台無法比擬的。 **成本效益**：n8n 可以自架，這意味著您可以節省大量成本，尤其是在執行大量工作流程時。使用 Zapier，隨著您的需求成長，訂閱成本也會隨之增加。 **資料隱私**：透過 n8n 的自架選項，您可以完全控制您的資料。它保留在您的伺服器上，確保您確切知道它在哪裡以及誰有權存取。這與 Zapier 等基於雲端的解決方案形成鮮明對比，後者的資料是在外部伺服器上處理的。 ###n8n 與 Zapier 相比的缺點： **使用者友好**：Zapier 以其直覺的介面而聞名，即使是非技術人員也可以輕鬆設定和管理工作流程。 n8n 以其更面向開發人員的方法，對某些人來說可能有更陡峭的學習曲線。 **海量整合庫**：Zapier 擁有超過 3,000 個應用程式整合。雖然 n8n 的清單正在快速增長，但它尚未達到與 Zapier 一樣廣泛的開箱即用整合數量。 **可靠性和支援**：憑藉其成熟的影響力，Zapier 提供強大的可靠性和專門的支援團隊。雖然 n8n 擁有一個充滿熱情的社區，但它可能無法提供與 Zapier 這樣的成熟平台相同程度的即時、專業支援。 ###結論： n8n 提供了一個客製化、節省成本和資料控制的世界，對於那些習慣更實際操作方法的人來說，這是很難擊敗的。然而，如果您正在尋找一個具有大量即用型整合、用戶友好介面和專門支援的平台，Zapier 仍然是一個強大的選擇。您的理想選擇將取決於您的特定需求和技術舒適度。 ##Webiny：Webflow 和 Framer 的替代方案  在網頁設計和開發領域，Webflow 和 Framer 等工具因提供直覺的介面和強大的設計功能而聞名。但鎮上出現了一個新的開源玩家：Webiny。 ###Webiny 與 Webflow 和 Framer 相比的優點： **開源彈性**：Webiny 的開源性質意味著您可以根據自己的喜好進行自訂。如果您需要某種功能或集成，您將不會受到專有約束的限制。這種程度的適應性是像 Webflow 和 Framer 這樣的專有平台無法完全匹敵的。 **成本考量**：從長遠來看，Webiny 更具成本效益，特別是對於較大的專案或企業。雖然 Webflow 和 Framer 需要付費，但 Webiny 的開源模型可以節省大量成本，特別是在考慮自架網站時。 **完全控制資料**：透過 Webiny，您可以選擇自行託管，從而完全控制資料及其安全性。這與 Webflow 和 Framer 等基於雲端的解決方案形成鮮明對比，在這些解決方案中，您的資料駐留在外部伺服器上。 ###Webiny 與 Webflow 和 Framer 相比的缺點： **直覺的設計介面**：Webflow 和 Framer 都以其用戶友好的設計介面而聞名。它們提供拖放功能和視覺設計工具，使設計人員即使沒有深厚的編碼知識，也可以輕鬆地將他們的願景變為現實。 Webiny 雖然功能強大，但對於純粹的設計師來說可能有更陡峭的學習曲線。 **豐富的範本和元件庫**：Webflow 和 Framer 附帶豐富的範本、元件和動畫庫。這可以顯著加快設計過程。 Webiny 較新，可能無法提供同樣廣泛的即用型設計元素。 **社群與支援**：Webflow 和 Framer 擁有大型、成熟的社群和專門的支援團隊。這意味著有大量的教程、論壇和資源可供使用。 Webiny 是新出現的，仍在發展其社區和支援基礎設施。 ###結論 Webiny 提供了一個引人注目的開源替代方案，具有客製化功能、潛在的成本節約和資料控制。然而，對於優先考慮直覺設計介面、大量設計元素和成熟社群支援的人來說，Webflow 和 Framer 的綜合優勢仍然難以超越。 ##Penpot：Figma 的替代品  在設計界，Figma 因其協作功能和時尚的介面而受到青睞。但有一個開源競爭者走進了聚光燈下：Penpot。 ###Penpot 與 Figma 相比的優點： **開源優勢**：Penpot 的開源性質意味著它在社群的貢獻下不斷發展。這允許一定程度的適應性和客製化，而 Figma 等專有平台可能無法提供。 **無成本障礙**：Penpot 是開源的，可以免費使用。雖然 Figma 提供免費套餐，但高級功能和更大規模的團隊協作需要付費訂閱。使用 Penpot，您可以存取所有功能，而無需擔心訂閱費用。 **用於資料控制的自託管**：Penpot 使您可以選擇在自己的伺服器上託管。這意味著您可以完全控制資料、資料的安全性以及資料的儲存位置，這是 Figma 的純雲端模型所不具備的功能。 ###Penpot 與 Figma 相比的缺點： **成熟的生態系統**：Figma 存在的時間更長，並且擁有更成熟的生態系統。這包括一個龐大的插件庫、整合庫和社群貢獻的資源，可以增強設計過程。 **即時協作**：Figma 的突出功能之一是無縫即時協作。多個設計師可以同時處理一個專案並進行即時更新。雖然 Penpot 提供協作功能，但它可能不如 Figma 的那麼精緻。 **性能和可靠性**：Figma 的性能，尤其是複雜的設計和原型，是強大且可靠的。作為一種較新的工具，Penpot 仍在完善其性能並消除任何問題。 ###結論 Penpot 為設計工具領域提供了全新的開源視角，其成本效益和資料控制對許多人來說都很有吸引力。然而，對於那些看重龐大生態系統、即時協作和經過驗證的性能的人來說，Figma 仍然是一個強大的選擇。 ##Dub.co：Bit.ly 的替代方案  Bit.ly 已成為許多用戶的主要內容。然而，開源社群提出了另一種選擇：Dub.co。 ###Dub.co 與 Bit.ly 相比的優點： **開源彈性**：Dub.co 的開源性質意味著它在社群的貢獻下不斷發展。這允許一定程度的適應性和客製化，而 Bit.ly 等專有平台可能無法提供。 **成本考慮**：Dub.co 是開源的，可以免費使用。雖然 Bit.ly 提供免費套餐，但其高級功能和分析功能價格昂貴。透過 Dub.co，您可以存取所有功能，而無需擔心訂閱費用。 **資料隱私和自架**：Dub.co 為您提供在自己的伺服器上託管的選項。這意味著您可以完全控制您的資料、資料的安全性以及資料的儲存位置，這是 Bit.ly 的純雲端模型所不具備的功能。 ###Dub.co 與 Bit.ly 相比的缺點： **已建立的聲譽**：Bit.ly 已經存在很長時間了，並在可靠性和性能方面建立了聲譽。這種長期存在意味著許多用戶信任並熟悉其服務。 **廣泛的集成選項**：Bit.ly 提供與其他平台和行銷工具的廣泛集成，使企業可以更輕鬆地將連結管理納入其現有工作流程。 **用戶友好的介面**：Bit.ly 以其直覺的介面而聞名，使用戶可以輕鬆建立、管理和分析其縮短的連結。雖然 Dub.co 提供了一個強大的平台，但新手可能會發現 Bit.ly 的介面更加簡單。 ###結論： Dub.co 為連結管理提供了全新的開源視角，提供客製化、成本效益和增強的資料控制。然而，對於那些重視具有大量整合和易於使用介面的久經考驗的平台的人來說，Bit.ly 仍然是一個不錯的選擇。您理想的工具將取決於您的特定需求以及您如何優先考慮功能。 ##Cal.com：日曆的替代方案  在安排會議和約會時，Calendly 一直是許多人的首選平台。但有一個新的開源替代方案引起了人們的注意：Cal.com。 ###Cal.com 與 Calendly 相比的優點： **開源彈性**：Cal.com 是開源的，這意味著您可以對其進行自訂以滿足您的特定需求。無論是加入獨特的功能還是與其他工具集成，您都可以自由地打造自己的功能。這是 Calendly 作為專有平台無法提供的。 **成本效益**：Cal.com 對個人免費，並且是開源的，您可以自行託管它以避免訂閱費用。另一方面，Calendly 有免費套餐，但僅限於一種活動類型，並且缺乏一些高級功能，除非您升級到付費計劃。 **資料隱私**：透過自行託管選項，Cal.com 讓您可以完全控制自己的資料。您確切地知道它的儲存位置以及誰可以存取它，而 Calendly 的基於雲端的模型則不然。 ###Cal.com 與 Calendly 相比的缺點： **使用者體驗**：Calendly 已經存在了一段時間，並且擁有精美、用戶友好的介面。即使對於那些不懂技術的人來說，設定和管理約會也很容易。 Cal.com 較新，可能有更陡峭的學習曲線。 **整合選項**：Calendly 提供與 Google 日曆、Office 365 和 Zoom 等流行平台的廣泛整合。雖然 Cal.com 正在努力擴展其整合選項，但尚未達到與 Calendly 相同的水平。 **社群與支援**：Calendly 擁有龐大的用戶群，並提供強大的客戶支持，包括豐富的教學和資源。 Cal.com 作為一個較新的開源平台，更依賴社群支持，但社群支持可能不那麼直接或廣泛。 ###結論： 如果您熱衷於嘗試新事物、喜歡優質的免費贈品並重視保持資料的私密性，請嘗試 Cal.com。但如果您想要一個久經考驗、易於使用且擁有可靠支援的工具，Calendly 仍然是一個不錯的選擇。 ##NocoDB：Airtable 替代方案  您可能已經看過 Airtable，它具有豐富多彩的網格和簡單的拖放氛圍。但有一個新來者正在引起一些轟動：NocoDB。讓我們來分解一下這兩者是如何疊加的。 ###NocoDB 與 Airtable 相比的優點： **開源優點**：NocoDB 是開源的，這意味著您可以根據自己的喜好調整、扭曲和自訂它。另外，您還可以從不斷改進它的社區中受益。空中桌？這很酷，但它並沒有給你那種程度的自由。 **錢包友善**：使用 NocoDB，您可以透過自己託管來避免這些月費。 Airtable 有免費套餐，但如果您想要更多記錄、檢視或精美功能，則需要花費一些現金。 **您的資料，您的規則**：由於您可以自行託管 NocoDB，因此在資料方面您處於主導地位。您可以決定它的儲存位置以及誰可以查看它。使用 Airtable，您的資料將掛在他們的伺服器上。 ###NocoDB 與 Airtable 相比的缺點： **使用者友善的氛圍**：Airtable 超級直覺。它的介面很乾淨，設定基地感覺輕而易舉。 NocoDB 比較新，可能需要更多時間來適應。 **模板寶庫**：Airtable 有大量模板。無論您是計劃活動、追蹤庫存還是管理專案，都可能有一個模板。 NocoDB 仍在建立其集合。 **內建整合**：Airtable 與其他應用程式配合得很好，提供了一系列與流行應用程式的內建整合。雖然 NocoDB 正在擴展其整合遊戲，但尚未達到 Airtable 的水平。 如果您是開源愛好者，喜歡控制資料，並且希望節省一些錢，那麼 NocoDB 可能正合您的胃口。但是，如果您正在尋找超級用戶友好、具有豐富模板庫並且可以輕鬆與其他應用程式連接的工具，那麼 Airtable 仍然很強大。 ##大結論 在不斷發展的數位工具世界中，老牌巨頭和創新的新來者之間始終需要保持平衡。無論是設計平台、調度工具或資料庫系統，每個平台都有其獨特的優點和潛在的缺點。 Penpot、Cal.com、NocoDB 等開源替代方案帶來了無與倫比的客製化、成本節約和資料控制。另一方面，Figma、Calendly 和 Airtable 等老牌廠商提供用戶友好的介面、廣泛的整合選項以及隨著時間的推移和改進而帶來的可靠性。 ##誰說你必須選邊站隊？ 當今技術生態系統的美妙之處在於您可以混合搭配。使用開源工具完成一項任務，使用專有工具完成另一項任務。這就像擁有一把瑞士軍刀和一個專門的工具包。您將獲得兩全其美的效果。 例如，您可能喜歡根據資料庫需求自訂 NocoDB，但更喜歡使用 Calendly 進行排程的無縫整合。或者也許 Penpot 的開源靈活性吸引了您的設計方，而 Slack 的可靠性則讓您的團隊溝通順暢。 關鍵是，你並沒有被歸類。這一切都是為了找到適合工作的工具，有時，這意味著將開源精神與專有軟體的精美體驗相結合。 因此，當您冒險進入科技領域時，請記住：這不是選擇立場的問題。它是為了找到讓您的數位生活更輕鬆、高效和愉快的完美工具。潛入、實驗並製作你獨特的科技馬賽克！
## 課程目標 - 認識 callback hell 與收尾處理 ## 課程內容 研究完 callback hell、promise chain、async/await 的錯誤處理 接著來用三課的時間，分別研究收尾處理吧！ 讓我們先從 callback hell 的寫法開始！ --- 什麼是收尾處理？ 其實就是，有些事情，不論任務執行成功 or 失敗，都固定要執行 這種事情，可以在 success callback 跟 error callback 最後都寫，但這樣就重複寫了，很煩！ 所以就有所謂的收尾處理，讓你寫一次就好了 如果繼續拿 jquery 做範例，看起來會像這樣： ``` $.ajax({ url: url, data: params, success: (res) => {}, error: (res) => {}, complete: () => {}, }); ``` 其實，就是再多一個 callback function 而已！很單純吧！ 在連續多個 ajax call 的時候，錯誤處理機制，再加上收尾處理機制，想想看 callback hell 會有多嚴重！ --- 看到這邊，你可能會想，到底什麼事情需要在收尾機制處理呀？ 其實，以我個人經驗來說，需要放進收尾處理的東西，其實很少 最常見的就是處理畫面上的「載入中，請稍等...」的文字，或者是畫面上「用來代表忙碌中的一個旋轉的圖示」 不論任務執行結果，都需要把這些文字、圖示隱藏 老實說，很多人根本連「忙碌中」這個狀態也沒做，導致 UX 不太好 所以實務上，如果你發現專案中不太會寫收尾處理，那也算正常，你就知道有這功能可以用即可 ## 課後作業 在第一課的作業，你已經體驗到了 callback hell 與錯誤處理的悲劇 忍耐一下，這一課要再體驗一下當年工程師的痛苦：加上收尾處理吧！ 請拿出第一課的作業，我們來改善這個頁面的 UX（使用者體驗），明確提示「忙碌中」這個狀態 --- - 請用 html 元素，在頁面中加入一段 `讀取中，請稍等...` 的訊息，這個元素預設不顯示 - 在開始呼叫 API 的地方，用 js 操作來讓那個 html 元素顯示 - 在結束呼叫 API 的地方，使用 `$.ajax()` 的 `complete` 參數，用 js 操作來讓那個 html 元素隱藏 寫完之後，你應該會發現，有點難寫，而且顯示/隱藏的時機，有點奇怪！ 如果想要讓顯示/隱藏的時機，完全正確，那就會重複很多一樣的 code！ 別懷疑，就是這麼難寫、這麼奇怪！這就是當年前端開發的為難之處！ 做出以上功能，你就完成這次的課程目標了！
本課程為 JavaScript 非同步訓練的第二部份 第一部份的專案練習，已經學習到非同步的基本觀念 第二部份，將繼續學習非同步與「錯誤處理」、「收尾處理」的關係 本系列教材，一樣會按照時光推進，讓您知道為何會有這麼多寫法、為何演化到今天這樣子！ 準備好的話，讓我們馬上開始吧！
昨天在我們新手寫程式 LINE 群組，有幾個工程師＆想轉職的新手在討論： > 各位前輩們好，小弟是自學轉職的前端工程師，目前有兩個 offer，一個是接案公司；一個是自有產品，自有產品的那間目前只有一個junior前端，進去有問題可能沒人可以問，但看網路上好像都不太推接案公司。猶豫了很久選不出來想聽聽各位前輩的看法。 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 這主題很好，我決定單獨寫一篇文章討論這件事情，跟大家分享 --- 阿川幫大家從幾個角度來分析比較一下 # 學習的深度、廣度 接案公司通常是使用類似的技術，接不同的客戶專案 好處是可以接觸很多不同的客戶，認識許多不同產業 壞處是做久了可能會開始有「重複感」，也就是好像一直在做類似的事情，有點學不到東西 產品公司通常是長期深入研發自家產品、技術 所以會在同一領域鑽研，通常可以玩得比較深入、學得比較深入 壞處是可能長期只能使用同一技術、框架，沒機會玩別款的 接案公司有時需要面對不同技術需求的客戶，有機會玩玩不同款的語言、框架、技術 # 工作的時程壓力 接案公司的時程壓力來自於「客戶」，通常已經由老闆、PM 跟對方承諾某個時間，甚至已經寫在合約上 如果同時在開發多個專案的話，有時候工程師會感到相當的壓力 通常是忙一陣、閒一陣這樣 產品公司沒有這樣的壓力，壓力通常來自於「公司沒有在賺錢」 如果公司經營穩定、產品前景看好、主管有肩膀好說話 那像這樣的時程壓力，通常會小很多 # 技術債 稍微資深的工程師，在不同公司面試時，一定會問的問題是：入職之後，需要維護 legacy（老舊）專案嗎？ 維護老舊專案、負擔技術債，是一件很悲慘的事情，也是開發者的主要離職原因之一 你會被迫用已經過時的工具、語法在開發，並且要把設計拙劣的系統架構「硬搬進自己腦子裡」才能消化開發 這過程能學到東西嗎？我認為不多，基本上是在糟蹋生命 接案公司來說，如果主要負責一些新客戶，那麼經常在重啟新專案，技術債問題或許不大 如果手上負責很多「超舊的專案與客戶」，那麼可能會遇到技術債的問題 自有產品的公司，則是走向另一個極端 如果是持續有在更新版本、升級套件的熱情公司，那麼技術債問題不大 如果是有年紀、穩定的系統，那麼版本問題、系統架構的技術債問題，可能很大 嚴重起來會比接案公司更慘，因為就只有一個專案在跑 # 進去有問題可能沒人可以問 大家都希望團隊能有一個又強、人又好、又願意幫忙自己的好同事 不過這可遇不可求，身為正職工程師，你需要能夠獨立解決問題 畢竟人家也面試過了，應該就是合格了，如果真的丟一些無法解決的問題給你，那也不全是你的錯 另一方面，沒人可以問，代表你獨立做決定的空間很大，這未必是壞事 # 結論 剛轉職的新手上班，我是覺得去接案公司上班也可以 通常接案公司很缺人，也比較願意給半路出家者機會 而且開始工作的前 1-2 年，不管去什麼公司，通常都能學到很多東西 待了 2-3 年之後，覺得無聊了，再找新工作也不遲 所以回到原 po 的問題：我認為兩間公司都可以，沒有說接案公司一定比較不好 畢竟，就算是自有產品的公司，如果產品本身超爛，根本永遠不會賺錢、沒人想用 那就只是一大群人在「陪老闆追逐他的個人夢想」，那其實也是相當浪費時間的，不如在接案公司專心滿足客戶，比較充實 --- 我建議閣下不妨從「人和」的角度來觀察一下：你喜歡面試時看到的那些人嗎？ 老闆、主管、同事，你喜歡跟他們相處嗎？還是你有點畏懼他們、覺得他們有點冷漠、城府、可怕？ 如果實在不知怎麼選，就選你喜歡的那群人吧！跟合得來的人一起工作，總是不會太不舒服！ 以上，簡單分享，給各位參考！也歡迎大家多多在留言區補充經驗、意見！
上一篇文章談了「同時上班＆接案＆創業」的簡單策略 我發現滿多人對於接案這塊比較感興趣，提了很多問題 我簡單分享一些心得＆建議 --- > 請問原po，在準備接案有想過：我的能力已經足夠接案，這種類似的想法嗎？ 這幾年因為 freelancer 的身份，在一些活動、場合會遇到各種領域的 freelancer 每次遇到這些新朋友，我都會問：你是如何開始的呢？ 我發現有 90% 的機率，得到的故事都是以下這樣： 「我工作幾年之後，在 XX 年的時候離職，想說休息一下，看看之後要幹嘛。這時候有前同事來問：他那邊有人在問誰能接案，能否幫忙？」 「我就先接下來，想說那做完這筆，之後再看要不要找工作。結果做完之後再休息一下，這時又有朋友來問，能不能接某個案子。」 「我就又接一個，然後再休息一下，反正不急著找新工作。就這樣加減接案，做一陣、度假一陣。過了幾個月、幾年之後，有一天發現：我好像可以一直這樣下去。」 所以根據我個人經驗＆觀察：根本沒有人會下決心說，我要從此離職，轉身變成一個全職 freelancer 都是工作轉換的空檔，自然發生的。如果案子沒了，那就開始找工作上班，幾年之後離職休息，上面的故事會再重複一次。 所以重點是：為什麼這些人在轉換的空檔，會有人來問？ 其實就是 1. 在工作上的表現不錯，同事、主管、合作廠商、親朋好友都覺得你值得信賴 2. 有稍微經營個人品牌，身邊的人稍微知道你是做什麼的，然後根據互動經驗覺得你「溝通能力」不錯，會讓人想合作 3. 你稍微有一點勇氣，能夠接受這種「休息一下，想想看之後要幹嘛」的狀態長達數個月之久，很多人在這狀態會很緊張，急著找新工作 然後一些有趣的事情，可能就會自然發生。當然你需要有一點點積極、願意擁抱未知，大概是這樣 --- > 我其實不清楚到底要做到什麼程度？業界常用的必備工具有沒有掌握？發生問題解決辦法能不能處理？ 不論是工作、接案，基本上就是養成「挑戰能力範圍之外一點點」的習慣 不要超出能力太多，會被壓力擊倒、會開天窗、你誠信會出問題 不要完全做已經熟悉的事情，這樣沒有進步，久了會有點無聊 就做超出能力一點點的事情，常常這樣的話，久了自然會有把握＆經驗 這需要時間累積，沒有捷徑、沒有秘訣 --- > 哥有推薦接案的案源嗎 根據我的經驗，你在台灣註冊任何接案平台，或者去 FB 社團搶案子之類的，案件內容＆報酬都會「有點悲劇」 這沒辦法，平台化的東西，大家就是殺價競爭、紅海市場廝殺，比誰更樂意壓榨自己 你就算用英文搜尋，找國外接案平台，狀況也差不多，沒有好到哪去 所以我不推薦任何案源，我推薦你經營個人品牌。雖然有點丟臉，好像讓親朋好友看到你在老王賣瓜 但是行銷就是這樣，你多少要推銷自己一點，不然看起來一點自信都沒有，誰又能放心付個高價錢給你做案子呢？ 那怎麼經營個人品牌？參考我後面的回答 --- > 希望能分享關於案源品質管控的部分（怎麼避開爛專案）🙏 如果你很外向、具有那種油條的業務性格，那你就多多跟各種客戶談生意，多多談判，累積經驗就行 如果你很內向、不具有那種談判性格，實在很怕踩雷，那我建議你：只跟你喜歡的人合作 在 LINE 上打字、Email 往來的時候，感覺對方連話都講不清楚嗎？那你們實在溝通方式有差，建議婉轉拒絕吧 用 LINE 語音，或者視訊軟體開會，感覺對方有點城府，你有一點怕他嗎？那你們做人處事原則大概很不一樣，建議婉轉拒絕吧 實在很想避開爛專案，那就只跟你覺得「跟這個人當朋友好像也沒問題」的案主合作吧！ 當然工作機會，會減少很多，但是，你跟案主互相折磨、互相為難、互告上法院的機率也會減少很多 --- > 想問有建議其他職業的做法嗎？ 抱歉我比較熟悉寫程式領域 但其他職業的話，我覺得經營個人品牌總是不會錯 我滿建議大家 1. 部落格 2. Podcast 3. YouTube 4. 短影片 選擇一種格式來創作，分享一些東西，目標不用高，就花幾年時間，試著經營出 1,000 粉絲就好 分享什麼？結合你的興趣 or 專業，弄點「好笑的有趣的」或「有知識技術含量的」或「能幫讀者省錢或避免踩雷或有利益可圖的」內容，就這些即可，總是會有讀者，因為看到根本賺到 這過程會學到行銷、推銷、品牌、定位，很多很多商業基本知識，零收入沒關係，就是一種商業練習 千萬不要眼高手低、整天空想、整天焦慮沒完沒了，想要搞很大，過了好幾年還是 100 粉絲都沒有 慢慢來吧，但務必要有點進度、養成進步的習慣 以上，簡單幾點分享，希望對你有幫助
阿川收到網友提問如下： > 您可以分享您的軟體工程師職崖規劃嗎?再次感謝 我個人的職涯規劃其實比較偏激，是同時做「上班＆接案＆創業」這三件事 我簡單說明一下爲什麼我會這樣做，給大家參考 --- 我是 79 年次，2013 年退伍的，大學資管系畢業 出社會第一個月我就發現，我滿不喜歡上班的，但是我沒有能力、也沒有錢創業 於是我設計了一個我稱之為「三把梯子」的方法論，作為長期生涯指引 # 三把梯子理論 第一把梯子是上班：成為資深工程師、跳槽更大公司、賺更多薪水，這樣不斷往上爬 第二把梯子是接案：接親戚朋友介紹的案子、累積個人品牌、得到更多的客源，開公司接案，這樣不斷往上爬 第三把梯子是創業：研發軟體產品，從 side project 開始，從 open source 開始，學習行銷，學賺錢、寫更多產品、開公司創業，這樣不斷往上爬 基本上就是上班族、自由工作者、創業者三種職業生涯 --- 我給自己的三把梯子指引是：先從第一把梯子開始往上爬，稍微爬一段，就往旁邊的第二把梯子踩過去，接著爬 接著在第二把梯子慢慢往上爬，稍微爬一段，準備好了就往第三把梯子爬過去，慢慢往上爬 在這個過程中，只要覺得腳步沒踩穩、會摔死，就往回踩過去，爬前一把梯子 你可能覺得很離譜：想要同時兼顧三件事，不就會變成通通都搞砸嗎？ 其實，你只要... # 做同時對兩三把梯子有幫助的事情 職涯的大方向有了，接著就是付諸行動，要做一些能「同時對兩三把梯子有幫助」的事情 ## 部落格 我在 2013 年想到的事情是「寫部落格」，我非常勤奮地寫了兩三年，很多文章都還找得到 - https://blog.turn.tw/ - https://startup.turn.tw/ - https://dev.turn.tw/ 寫部落格、並且試著得到流量，會同時學到寫作、銷售、溝通能力，對三把梯子都會有幫助 我在寫到多篇文章都有數十萬瀏覽量之後，我就大致知道自己掌握這項技能了 ## 研討會 接著我想到的事情是「參與 conference 分享」 其實這沒有大家以為的那麼難，算是寫作的延伸加強版而已，拿原創的文章去一些小聚、研討會發表 我在成為 PHPConf Taiwan 2015 以及 LaravelConf Taiwan 2018 的講者之後，我就大致知道自己掌握這項技能了了 ## 做專案 再來是「寫 side project」以及做「open source」 一開始可以先做好玩為主，但之後要稍微從一些商業野心出發，才能學習 `monetization` （賺錢）這件事 我做了一些專案，在國內外論壇到處分享，成績馬馬虎虎，但我也學到很多 --- 上面這三件事情，會同時對「前兩把梯子」有巨大幫助，在找工作、或者接案的時候，很多人會更信賴你，對第三把梯子也會有點幫助 當然，像這樣同時爬三把梯子，沒辦法跟「專心爬一把梯子」的人比，這是一定的，而且要付出的時間相當龐大 但是，這讓我獲得足夠的安全感，避免一次做太高風險的事情，而且也有後路可退 # 我目前的三把梯子的進度 第一把：我現在去投履歷、找工作，在各種大小的公司都還是有面試機會，也有很多業界的朋友可以幫忙介紹，要上班沒問題 第二把：在完全不主動去找案子的情況下，很多朋友會幫忙轉介紹案子給我 我也是美國接案平台的簽約工程師 https://www.toptal.com/resume/chuan-hao-you 有時會接一些歐美的案子，所以要接案沒問題 第三把：我大概做了70個左右的 side project 目前正在經營的有這幾個 梗圖工具 https://memes.tw/ 每月60萬不重複使用者 咖啡廳資料 https://cafenomad.tw/ 每月3萬不重複使用者 活動平台 https://yii.tw/ 每月2萬不重複使用者 工程師交流 https://codelove.tw/ 您目前正在看的網站 另外還有 房地產 https://landchart.tw/ 書評網 https://wenwen.life/ 美女圖 https://beautyhunt.tw/ 批踢踢閒逛 https://www.ptt.best/ 這些網站，其中有幾個，是有一些收入的，所以第三把創業的梯子也還可以 目前這三把梯子，其實我都還正在爬，並沒有最後一定會待在哪一把梯子上面 # 結論 這邊簡單分享我替自己設計的職業生涯，「三把梯子」算是一種很偏激的職業生涯 業界像這樣做的工程師應該非常少數，最大缺點就是要花費的時間非常多，優點就是，其實樂趣不少 其實，學無止盡，這就只是同時在「技術」跟「商業」兩方面花時間學習而已 能分享的事情還有很多，大家有興趣就多多按讚吧，也許我再多寫一些這方面的文章！ 也歡迎大家多多發表文章，這個 CodeLove 就是我做來給工程師們互相交流的地方！ 以上簡單分享，希望對你有幫助～！
- 原文出處：https://dev.to/surajondev/top-7-things-that-kill-developer-productivity-ef9 ## 1. 會議  無效的會議是最不必要的因素之一，它會導致開發人員的生產力下降。寫程式需要專注。進入專注模式平均需要大約 30 分鐘。但由於多次會議，這種專注被打破，開發人員必須重新開始。 還有時間消耗，因為有時 10 分鐘的會議會延長到一個小時。此外，某些會議也需要不必要的出席。如果會議不直接涉及開發人員的專業知識，通常根本不需要他們出席。 --- ## 2. 技術債（晚點再修）  技術債務可以簡單地定義為“晚點再修”的心態。 最初，我們嘗試使該功能正常工作，並將優化留到以後進行。這可能在短期內有效，因為它可以加快專案速度，並且您可能會按時完成任務。但一次又一次地這樣做將會留下大量的工作要做。從而使得維護、擴展和改進軟體變得更加困難 技術債務會在很多方面阻礙開發人員的生產力。其中一些是： - 程式碼審查的瓶頸：當技術債務增加時，會導致程式碼審查時間的增加。 - 更多錯誤：由於最初的動機是速度而不是優化，這將導致引入隱藏的和未被注意到的錯誤。 - 程式碼質量下降：只希望「能跑就好」，會導致程式碼質量差、程式碼審查隨意、甚至沒有程式碼註釋、程式碼複雜等等。 上述所有要點都需要額外的時間來解決。從而拉長了專案時間。 --- ## 3. 程式碼審查  程式碼審查需要時間，如果審查過程太慢或過於官僚，可能會延遲新程式碼的整合並減慢整個開發過程。有時開發人員提出 PR，但程式碼審查人員沒有時間審查。從而增加了開發人員處理下一個任務的時間。 對於程式碼審查，開發人員可能必須參加多次會議，從而導致開發人員的工作效率下降。通常，對程式碼的不明確或複雜的反饋可能需要更長的時間才能解決問題，因為需要進一步的對話才能理解。程式碼審查很重要，但以錯誤的方式進行只會導致生產力的降低。 --- ## 4.微管理（缺乏自主權）  微管理是一種主管密切觀察和管理下屬工作的管理方式。當經理試圖控制開發人員的編碼方式時，就會發生這種情況。這可能會導致開發人員對其程式碼、流程、決策和創造力的控制力減弱。 它可能會以多種方式導致開發人員生產力缺乏。其中一些可以是： - 缺乏動力：微管理可以表明組織對開發人員能力的信任度較低。這樣，開發人員很容易感到失去動力。 - 創造力較少：開發軟體是一項創造性的任務，您需要集中精力探索創造性的解決方案。但微管理會導致對程式碼的控制減少，甚至阻礙開發人員的創造力。 - 決策緩慢：開發人員必須從經理那裡得到簡單決策的確認，在此過程中浪費了大量時間。 在所有這些情況下，開發人員的生產力都會下降。 --- ## 5.倦怠  倦怠是開發人員最關心的問題之一。在緊迫的期限內處理複雜且具有挑戰性的專案，以及交付高質量程式碼的持續壓力可能會導致倦怠。它最終會導致開發人員的生產力下降，因為它會降低開發人員的注意力和專注於編碼和建置的能力。 它還會導致開發人員的創造力和解決問題的能力下降。它最終將導致開發週期變慢。 --- ## 6. 糟糕的文件  文件對於開發人員來說至關重要，因為它傳達了有關程式碼、專案和流程的關鍵訊息。糟糕的文件可能會導致開發週期的嚴重延遲，因為開發人員將花費更多時間來嘗試理解程式碼庫、專案和流程。從而導致開發人員的生產力降低。 在開發人員入職時，提供糟糕的文件將導致開發人員花費更多的時間在任務上，例如設置專案、管理環境、理解程式碼和其他相關的事情。如果沒有明確的文件，維護和修改現有程式碼就會變得困難。由於擔心破壞功能，開發人員可能會猶豫重構或進行更改。因此，開發人員的生產力將被浪費在非核心任務上。 --- ## 7. 不切實際的最後期限  截止日期是讓開發人員失去動力的因素之一。當你被要求在短時間進行大量工作時，你會很容易感到沮喪。它會導致倦怠、程式碼質量差、程式碼審查疏忽等，這會導致技術債務的積累。從而導致開發人員的生產率下降。 截止日期很重要，但設定不切實際的截止日期給開發人員施加壓力，會給他們帶來壓力。在壓力下，整體生產力和程式碼質量都會下降。 ## 結論 有些小工具，可以克服這些挑戰，以在開發人員的健康和生產力之間建立平衡。 以下是一些可以幫助您提高生產力的工具： - [FocusGuard](https://chrome.google.com/webstore/detail/focusguard-block-site-foc/ifdepgnnjpnbkcgempionjablajancjc)：它是一個 Chrome 擴展程序，可以通過阻止網站來幫助您建立焦點。 - [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode)：它是一個 VS Code 擴展，用於跟踪您的編碼時間和活動編碼時間。 - [JavaScript Booster](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster)：此 VS Code 擴展可以提供程式碼重建置議。您也可以找到其他編程語言的此類擴展。 - [Hatica](https://www.hatica.io/?utm_source=dev.to&utm_medium=referral&utm_campaign=surajondev)：雖然上述工具僅限於一項任務並且專注於編碼，但 Hatica 負責大部分工作。它通過改進工作流程、辨識瓶頸和跟踪進度來幫助工程團隊提高開發人員的工作效率。通過這樣做，它可以釋放開發人員大量的時間。了解有關此工程管理平台的更多訊息[此處](https://www.hatica.io/blog/engineering-analytics-for-well-being/?utm_source=dev.to&utm_medium=referral&utm_campaign=surajondev)。 我希望這篇文章能夠幫助您了解開發人員生產力下降的原因。感謝您閱讀這篇文章。
最近在幫客戶專案寫 e2e 測試，發現幾個常見錯誤 首先，e2e 跑起來很慢，會拖慢 CI 速度，應該不是多多益善，而是要挑高價值的來寫 很多基本狀況、訊息提示、UI 表現，應該要用 unit test 來處理，vue 與 react 應該都有對應的 `component test` 工具可以寫 --- 再來，e2e 處理的情境要怎麼切分？這是典型的程式邊界（boundary）問題，也是 `抽象化` 問題的一種 網路上四處找範例，沒找到比較好用的設計方法，我試著自己設計 目前思考出幾個參考原則，要同時符合以下條件，才放進 e2e 測試 - 高價值原則：如果用戶處在這個情境，然後測試跑失敗了，老闆會很緊張，工程師就算在週末也需要緊急修理 - 變動頻繁原則：相關程式碼經常變動，所以每次在 CI 都跑測試會很有幫助 - 最後手段原則：這裡提供的安全感，沒辦法用 unit test 或 integration test 取代 --- # Refs - https://filiphric.com/how-to-structure-a-big-project-in-cypress - https://sendgrid.com/blog/ideas-for-configuring-organizing-and-consolidating-your-cypress-tests-frontendtwiliosendgrid/ - https://www.linkedin.com/pulse/organizing-maintaining-your-cypress-test-suite-best-kate-serebryakova/ - https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests
現在幾乎所有軟體專案都會使用 git 進行管理 不過，對新手來說，git 的設定與指令需要學習一段時間，有點太難 所以很多人會先用 Github Desktop 來管理專案，其實暫時也夠用 不過，很多 git 的進階指令與強大功能，只用 Github Desktop 是做不到的 剛開始工作，懶得學 git，就先用 Github Desktop 沒關係 但是長遠來說，我還是鼓勵大家找時間去把 git 學好，在程式碼管理比較複雜的情境，才有辦法自己動手解決 --- 找時間休息、整理、消化一下目前的內容，感受一下 Github Desktop 的強大與魅力吧！ 這些好用的功能，以個人開發專案來說，已經足以應付絕大多數情境 不過，在實務上，以團隊開發來說，只會這些功能是不夠的 還需要有 branch 的觀念，以及 branch 管理的技巧，才能團隊合作 這些會在後續的課程提到！ **新教材研發中，敬請期待！**
## 課程目標 - 能夠從 Github 抓專案下來 ## 課程內容 我們在上一課發佈專案到 Github 了 這次來學習把專案從 Github 抓下來吧！ 首先來把電腦上的專案刪掉，模擬我們今天拿到一台新電腦的情境 在主視窗點選 `Current Repository` 會秀出專案列表 對著我們的專案 `my-first-repo` 按右鍵，然後選 `Remove` 刪除，確認視窗繼續按 `Remove` 會發現 Github Desktop 變回初始畫面了！ --- 但目前只是 Github Desktop 停止追蹤專案而已，那個資料夾其實還在電腦上喔 請在電腦上，直接前往那個資料夾，會發現檔案都還在 請把 `my-first-repo` 整個資料夾刪掉，這樣才是真的模擬拿到新電腦 --- 現在來試著把專案從 github 抓下來吧！ 點擊 `Clone a Repository from the Internet` 因為已經登入 github 了，應該會顯示專案列表 找到上次發佈的 `my-first-repo` 專案 （如果專案沒出現，畫面上有一個重新整理的按鈕，按一下） 然後 `Clone` 按鈕按下去 成功囉！專案回來囉！ `History` 分頁按下去，看看是不是跟之前都一模一樣？ 軟體工程師在跨裝置工作（使用多台電腦）、或是多位工程師合作時，就是這樣同步專案內容的！ ## 課後作業 接續前一課的作業，專案已經傳到 github 了 現在來模擬你拿到新電腦，第一次從 github 抓專案的情境 請把原本電腦上的那個專案資料夾，整個刪掉 這時去看 Github Desktop，應該會顯示「Can't find」開頭的提示 請將 Github Desktop 視窗截圖，這是本次作業的第一張截圖 截圖完畢之後，點擊畫面上的 `Remove` 將這個專案刪掉 --- 現在電腦上已經沒有專案了，就當作你今天拿到一台新電腦，準備開始工作，要把 github 上的專案抓下來 請點擊 `Add` 然後選 `Clone Repository...` 接著找到你在 github 上的專案 把剛剛那個專案整個抓下來之後，你應該會發現，剛剛整個刪掉的專案資料夾，現在內容又通通出現囉！ 請將 Github Desktop 視窗截圖，這是本次作業的第二張截圖 --- 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請把第一張、第二張截圖，分別貼到留言區
## 課程目標 - 能夠發佈專案到 Github ## 課程內容 我們已經在上一課成功連線 Github 了 這一課，來把我們的專案發佈到 Github 吧！ 如果是跟同事合作，處理公司的專案，我們稱為 `Private repository` 如果是開源專案，發佈給全世界工程師使用，我們稱為 `Public repository` 在 Github Desktop 主視窗，會看到 `Publish repository` 按鈕 點下去，會看到 `Name` 預設就是專案名稱，`Description` 可以省略不填 下面的 `Keep this code private` 預設是勾選，也就是私人專案，把這取消掉，就是開源專案了 最後的 `Publish Repository` 按鈕按下去，視窗會自動關閉，代表發佈成功了！ 回到 Github，右上方點擊自己的頭像，`Your repositories` 點下去，會看到剛剛發佈的專案！ 以我的範例來說，我的專案在這邊，可以看到專案的各種檔案內容 https://github.com/howtomakeaturn/my-first-repo 然後這邊可以看到 commit 歷史記錄 https://github.com/howtomakeaturn/my-first-repo/commits/main 很酷吧！ ## 課後作業 接續前一課的作業，現在你打算把專案上傳到 github，當做雲端備份，也方便自己在桌電、筆電上都能工作 請點擊 `Publish repository` 將專案發佈到 github 發佈之後，你應該會在 github 網站上面，找到剛剛發佈的專案、看到專案的程式碼、也能看到多筆 commit 歷史紀錄 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請把 github 專案連結，貼到留言區
## 課程目標 - 學會連線 Github 帳號 ## 課程內容 這課的任務很簡單：來準備連線 Github 吧 大名鼎鼎的 Github 是軟體工程師，最重要的資源網站之一 超大量的開源專案，都在 Github 上面分享，是一個必用的網站 請先前往官網註冊帳號 https://github.com/ 註冊完成之後，請回到 Github Desktop 請在 Github Desktop 上方的導覽列，選擇 `Preferences` 然後選擇 `Accounts` 在 Github 那邊選擇 `Sign In` 登入 應該會跳回瀏覽器，然後進行登入、授權、確認流程 完成之後，你的 Github Desktop 就成功連線 GitHub 囉！ ## 課後作業 接續前一課的作業，我們來準備發佈專案到 github 吧！這次先試著登入帳號就好！ 請註冊一個 github 帳號，然後在 Github Desktop 登入 github 帳號 請在 Github Desktop 上方的導覽列，選擇 `Preferences` 然後選擇 `Accounts` 在 github 那邊登入帳號，登入成功之後，應該會看到登入按鈕，變成 `Sign Out` 登出按鈕 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區
## 課程目標 - 學會重置指令 ## 課程內容 來學一個強大的指令：重置 上一課的取消功能，是針對修改到一半的檔案 這時很自然會浮現一個問題：如果是之前已經提交過的內容，有辦法取消嗎？ 點開 `History` 分頁，假如我們今天對「上上次的提交內容」不滿，也就是 `add another work` 那筆 commit 不滿意，怎麼辦？ 其實很簡單！ 請把滑鼠游標移到 commit 上面，點擊右鍵，選擇 `Revert Changes in Commit` 你會發現 `History` 多了一筆 commit！ 這筆 commit 內容跟原本的 commit 內容完全相反，也就是會抵銷掉那筆 commit！ 打開資料夾看一下，會發現 `my-document-3.txt` 檔案整個不見了！ 這就是 git 強大的地方：不只是正在修改的檔案內容，連之前修改的內容，都可以追蹤、回溯、管理！ --- 看到這邊你可能會心想：為什麼要多一筆 commit？ 怎麼不把那筆 commit 直接刪除掉就好？ 其實，這是因為 git 通常是「團隊在使用」的工具 已經送出去的 commit，通常已經同步到很多人的電腦上了 如果這時工程師 A 刪了這筆 commit，工程師 B 刪了那筆 commit，那最後同步起來，大家電腦上的 commit 歷史記錄，到底長怎樣？很亂吧？ 所以，git 就一律設計成：想要回溯，就也是加一筆 commit！只是會自動進行相反的變化！ 這樣大家電腦上的 commit 歷史記錄，同步起來，就單純很多了！commit 數量永遠都是加法，不斷加上去而已！ 很聰明的設計吧！ ## 課後作業 這次來模擬實際工作的時候，你突然對之前的 commit 內容不滿意，想要把檔案內容還原的過程 繼續修改我們的履歷表專案吧！ 目前裡面有 `me.txt` `about.txt` `background.txt` `goals.txt` 四個檔案 你突然又有點反悔，覺得 `about.txt` 跟 `background.txt` 很多餘，想要把內容移回 `me.txt` 裡面 開發專案時，像這樣反反覆覆其實很正常，git 就是為了處理這種情境而生的 請切換到 `History` 分頁，找到之前把 `me.txt` 檔案改寫的那個 commit 然後使用 `Revert Changes in Commit` 功能來還原 commit 內容 還原之後，你可以看一下資料夾內容，應該會發現變回之前的樣子了！ 然後在 `History` 分頁應該會看到，多了一筆 commit，是用來記錄那筆還原的 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
