成品連結：https://codingdark.github.io/program/2023/09/18/API-Test.html ##第一步 架部落格 最初看到站長的貼文，提供了本站的API 並且鼓勵大家自架部落格，來嘗試串API 看到文章的當下，覺得有點難度(沒用過github page，API也不熟) 不過看到站長提供的關鍵字`setup a personal blog with github pages` 最終還是決定先google看看 查了之後，發現近年的gitbub簡化了很多 都可以自動部署，根本就是一鍵架站 外加原始碼開源，很多東西都能自己改 所以光是部落格就玩了一天XD 因為本站為CodeLove 愛寫扣 我就創了一個CodingDark 闇寫扣 表示致敬本站 & 本人的中二風格 ##第二步 串API 因為不熟的關係，所以決定先隨便串 呼叫API之後，把data印在console.log 大致上看了一下資料格式 使用上其實就類似陣列，非常方便 沒有想像中的難 確認API可以正常呼叫後 陸續加入一些功能 比方說，用Table把文章列表排整齊、加上[Read more]按鈕 先讓json資料，轉換成網頁能呈現出來的[資訊] ##第三步 程式碼優化 到這邊為止，網頁的畫面已經差不多定型了 剩下的就是回頭檢視程式碼 考量到後續維護 盡可能把重複的程式碼，包裝成function 或是把一群散亂的變數，包裝成object 最後，為了方便擴充文章列表 將原本是寫死的HTML Dom 改成動態產生 目前的部落格頁面 點進去會撈出站長、Tony，以及我的文章列表 後續若想要列出其他使用者的文章 只需新增`setTable(userAccount)`即可 ##結尾 感謝站長提供有趣的API 讓大家可以有練習的機會 雖然目前我在工作上，沒接觸過API 但經過這次的練習，以後若是真的有需要用到 可以更快上手
## 介紹 編寫乾淨的程式碼是每個軟體開發人員的基本技能。乾淨的程式碼不僅使您的程式碼庫更易於維護和理解，而且還能促進團隊成員之間的協作。在這篇綜合文章中，我們將探討什麼是乾淨的程式碼、為什麼它很重要，並為您提供一組最佳實踐和原則來幫助您編寫乾淨且可維護的程式碼。 - 原文出處：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 的可靠性則讓您的團隊溝通順暢。 關鍵是，你並沒有被歸類。這一切都是為了找到適合工作的工具，有時，這意味著將開源精神與專有軟體的精美體驗相結合。 因此，當您冒險進入科技領域時，請記住：這不是選擇立場的問題。它是為了找到讓您的數位生活更輕鬆、高效和愉快的完美工具。潛入、實驗並製作你獨特的科技馬賽克！
發現一篇文章，國外的技術研討會舉辦者，分享了舉辦這類活動的辛苦＆心得 很有意思，翻譯與大家分享一下。 原文出處：https://dev.to/k8adev/tech-events-are-not-as-cool-as-you-think-from-an-organizer-perspective-2b70 --- 大家好！ 我的名字是**Keit**，又名[@k8dev](https://twitter.com/k8adev)，我是巴西人，除了作為一名程式設計師之外，我已經組織技術活動8 年了。 我目前負責**幾項技術**活動，其中之一是著名的**FRONTIN Sampa**，這是**巴西**最大和最**傳統的**技術活動之一，對**開發社區**有很大影響。該活動每年**每年七月**在**聖保羅**市舉行，在那裡我們涵蓋了與前端開發和相關領域相關的各種主題。 然而，我們面臨著重大的**挑戰**，因為許多人**不認識**此類事件的**價值**，而且這不僅限於**開發人員**社區**。如果我必須**列出**作為**組織者**我的**主要挫敗感**，它們將如下： * **獲得贊助方面有困難**。 * **在活動前後保持參與度**。 * **管理合作夥伴關係**和社區。 **FRONTIN Sampa** 活動一直是**標誌性活動**，甚至在我於**2016** 接管該組織之前也是如此。但要注意的是，如果沒有足夠的**財力**，就**不可能提供高品質的環境**、**優秀的演講者**和**有能力的團隊**來舉辦這樣的活動尺寸。在地球的這一邊，**公司甚至表現出參與活動的興趣**，但他們希望作為贊助提供的**提供的贊助**價值往往**幾乎無法覆蓋他們的成本**活動當天他們自己的基礎設施**。 例如，上屆 FRONTIN Sampa 產生了大約 **100,000.00 雷亞爾（20,368.26 美元）的銷售額**，而**贊助額僅約為 12,000.00 雷亞爾（2,444.04 美元）**，不考慮以物易物。單獨的交流**往往與我們在活動期間和社交媒體上提供的內容不同**。即使銷量非常好，如果我們進行**快速計算**，很明顯**方程式不成立**。組織像 **FRONTIN Sampa** 這樣的活動不僅需要活動當天的資源，還需要活動前後所需的 **努力和資源**，而這些努力和資源通常未被考慮在內。在我為管理活動而成立的 FRONTIN 公司，我們有許多需求，例如： * 社群媒體管理 * 平面設計 * 銷售量 * 內容製作 * 行銷 * 訂閱 Mailchimp、Google Workspace、Figma、Canvas 等服務 * 事件管理 * 合作夥伴和贊助管理 * 公共關係 * 會計管理 等等等等。 **近一年的規劃和執行**，**每月的費用**是**不可能**在沒有贊助**或個人投資的情況下實現的。是的！有時，組織者**必須從自己的口袋裡掏錢**，因為，**這個等式再一次不成立**。我們談論的是大約 10,000.00 BRL 或更多，用於維持舉辦活動、監控社交媒體、管理社區、溝通和其他活動所需的結構和團隊。 我們正在討論今年生產 FRONTIN Sampa 的成本約為 **170,000.00 雷亞爾或 34,000 美元**！ 另一方面，我們有一群**觀眾**，他們經常**抱怨票價**。我們**總是**嘗試提供極其**實惠的門票**——這些門票通常**不兼容**如此**高標準**的**活動**，特別是在經濟衰退期間。我們實施了**策略**，例如**提前售票**和**提供半價**門票，以使活動盡可能方便地進行。然而，經常會遇到一些人不認識組織活動背後的辛苦工作並公開提出非建設性的批評。 當談到**合作夥伴**、**社區**和科技**影響者**時，他們中的許多人更**對他們收到的優惠券和免費門票**感興趣，而不是實際幫助宣傳* * 活動並建立一個**環境**，讓人們可以**學習**、**分享**和**享受樂趣**。此外，管理這些合作夥伴關係通常很複雜，因為它涉及交換關係。再次，**缺乏財政**資源影響了我們對這些夥伴關係給予適當關注並追蹤雙方義務履行情況的能力。 今年**特別具有挑戰性**，**財政資源**少**，但要舉辦**許多**活動來滿足**社區的期望**。這太**困難**，以至於我**被迫**將幾乎**所有的錢**投入FRONTIN，以**確保**所有**事件發生**，即使我沒有籌集**足夠的資金**。這**讓我多次重新思考**是否**值得繼續製作這些活動**。 我**期待聽到其他**積極或自願參與**科技活動**的人的觀點**。我很樂意與您交談，也許會找到一些繼續前進的**動力**，甚至是公司加入我們的下一次活動。我相信我們的工作對於**創造一個人們可以相互聯繫的環境**至關重要，我真的不想放棄。 謝謝你！
您是否想過當您**執行 Rust 程式**時**RAM**會發生什麼情況**？您編寫程式碼的**方式會如何干擾系統中的許多其他事物？ 這篇文章將幫助您了解更多關於 *管理記憶體* 和 **RUST 如何運作** 的資訊。 原文出處：https://dev.to/canhassi/how-rust-memory-management-work-to-beginners-622 ## 1. Stack and Heap 在了解 rust 的作用之前，您必須先了解一些概念。一般來說，我們有兩種類型的內存，稱為：**堆疊和堆**。現在我們來介紹一下他們。 ### 1.1 記憶體：Stack 堆疊，顧名思義，**工作原理就像堆疊**，遵循**“後進先出”（LIFO）的原則。**也許分步驟解釋會更容易： *想像一下**一堆盤子**； *您放入的**第一道菜**是**最後取出的**； * 當**函數被呼叫**時，一塊記憶體被**「堆疊」在棧頂； * 當**函數結束**時，該區塊**“unstacked”**，釋放該記憶體。 通常，**編譯器**（在編譯時）知道將儲存在堆疊上的**值**，因為它知道需要儲存多少記憶體。此過程**自動**發生，所有值都會從記憶體中刪除。 下面是一個例子： ``` fn main() { let number = 12; // at this moment the variable has created println!("{}", number); // 12 } // When the owner (main function) goes out of scope, the value will be dropped ``` 在 Rust 中，我們只需使用「{}」即可建立一些作用域，這會在堆疊中加入具有有限生命週期的層。當您離開該特定*範圍*後，記憶體將被清除，您將遺失相關資訊。一個很好且簡單的例子是： ``` fn main() { { let number = 12; println!("{}", number); // 12 } println!("{}", number); // Cannot find value `number` in this scope } ``` ### 1.2 記憶體：Heap 簡而言之：**堆**記憶體是一個空閒記憶體空間，用於分配可能更改的資料。 想像一下，您需要在啟動程式後**儲存一些變數**，該變數在編譯時沒有已知的固定大小，因為它可能有大小變化或是記憶體中的直接分配。 如果上述可能性之一匹配，我們就知道我們有 **堆** 內存，而不是 **堆疊**。堆擁有更**靈活的記憶體**和更大的空間。看一看： ``` let number = Box::new(12); // alocate a integer in heap let name = String::from("Canhassi"); // alocate a String in heap ``` 在 Rust 中，我們有兩種字串「類型」：「&str」和「String」。 * **&str**：根據所寫的文字有固定的大小； * **字串**：具有可以增加、減少和刪除的大小。 ……這就是為什麼 `String` 儲存在堆上，而 `&str` 儲存在堆疊上。 釋放堆記憶體的一種方法是：當儲存堆上某些內容的**變數離開函數的作用域（到達函數末端）時，它將以相同的方式釋放作為堆疊。 好了，現在我們對這兩種記憶體類型有了一個清晰的認識，但是堆疊和堆在管理記憶體方面有什麼區別呢？讓我們看看這些差異吧！ ## 2. 借用檢查器 借用檢查器是 Rust 編譯器的**部分**，它**檢查並確保**所有權、借用和生命週期**規則得到尊重**。 老實說：一開始我在理解它是如何運作的方面遇到了一些問題，我發現這在新的 Rustaceans 中很常見。但別擔心，我的朋友。我會用最好的方式教你。但首先，讓我們先來看看下面的程式碼： ``` fn main() { let name = String::from("Canhassi"); // Creating a string variable print_name(name); // calling the print_name function passing the variable println!("{}", name); // Error: name borrowed to print_name() } fn print_name(name: String) { println!("{}", name); // print "Canhassi" } ``` 如果您使用該程式碼執行編譯器，您將看到以下錯誤： ``` borrow of moved value: name ``` 當我們呼叫“print_name”函數時，“name”變數將被**移動到另一個作用域**，並且該作用域將成為它的**新所有者**。並且所有者的規則超出範圍將再次應用。借用檢查器確保**一旦所有權轉移**，原始變數**不能再用於**來存取該值。這發生在上面的程式碼中。 使用原始變數的另一種方法是使用類似的引用。 ``` fn main() { let name = String::from("Canhassi"); // Creating a string variable print_name(&name); // calling the print_name function passing the variable println!("{}", name); // print "Canhassi" } fn print_name(name: &String) { println!("{}", name); // print "Canhassi" } ``` PS：這些**借用檢查器的規則僅適用於**堆中指派的物件**。 ## 3. 錯誤預防 借用檢查器對於確保 Rust 記憶體安全而無需[垃圾收集器](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)) 至關重要。 在 C 和 C++ 等其他語言中，我們（作為開發人員）必須使用某些函數手動釋放記憶體。 C++ 以允許記憶體管理錯誤而聞名，包括[記憶體洩漏](https://en.wikipedia.org/wiki/Memory_leak)。 C++本身不會導致記憶體洩漏。相反，**C++ 為程式設計師提供了大量的靈活性**和控制力，如果使用不當，這種**自由可能會導致錯誤**。 一個著名的錯誤是**未定義的行為**，例如，想像一個函數傳回這樣的變數的引用 ``` fn main() { let number = foo(); // calling foo function } fn foo() -> &i32 { let number = 12; // creating a var number &number // try return a reference of var number } ``` 程式碼不起作用，因為 Rust 編譯器對記憶體管理有限制規則。我們不能回傳 var `number` 的引用，因為這個函數的作用域將會消失，而 var `number` 將會消失，所以 Rust 不會讓這種情況發生。在 C++ 中我們可以做到這一點，並且它允許臭名昭著的記憶體洩漏。 我認為知道 Rust 編譯器避免了這種類型的錯誤真是太酷了...如果這個主題對您來說是新的，我可以說內存洩漏可能會花費很多錢並且確實很難修復它，因為絕不只有一次內存洩漏。 其他範例是，**雙重釋放**，當您嘗試釋放相同物件兩次（例如在 C 程式碼中）時，就會發生這種情況。 ``` char* ptr = malloc(sizeof(char)); *ptr = 'a'; free(ptr); free(ptr); ``` 這個主題非常廣泛，當您使用其他語言時，很可能會產生類似的錯誤。但是，我會讓您自己進行研究，並確保在這篇文章的評論中告訴我更多！ ## 4。結論 我寫這篇文章的目的是以更一般的方式展示記憶體管理如何與 Rust 配合使用。但我建議您閱讀《Rust 程式語言》一書的第 4 章（ https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html ）來獲得更完整的知識。在那裡您將獲得更多示例和更多關於此內容的解釋。 希望這篇文章有幫助！ 🦀🦀
工作了很多年，還是搞不太懂 promise、async/await 是什麼嗎？用這份作業包一次搞定觀念！ https://codelove.tw/@howtomakeaturn/course/Pam6qL @hung @birdie2019 @superyngo 找時間來寫寫看～
- 原文出處：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)。 我希望這篇文章能夠幫助您了解開發人員生產力下降的原因。感謝您閱讀這篇文章。
某種角度來說，我認為當工程師是很幸運的，能有兩種角度去經營個人品牌：菁英路線 vs 社群路線 --- # 菁英路線 菁英路線就是想辦法得到頂尖軟體公司的認可，比如說 Google Facebook Microsoft IBM 或者台灣本土一些知名軟體公司 或者矽谷一些設點在台灣的軟體公司 這種通常要刷 LeetCode、做大量面試準備、可能大學學歷也要很好看 這種履歷表一但有了一間，後面一間一間換，整個履歷表看起來就很漂亮 薪水好 社會地位高 大家都覺得你超猛 但這路線只適合少數人 # 社群路線 社群路線我覺得簡單、好玩很多 就是每當你的實力有所成長，就找機會大方分享 不論是寫網誌、報名 conference 分享、報名小聚分享 或者參與 open source 討論、發 PR、在 stackoverflow 問答 都是很好的貢獻方式！重要的是，這些貢獻最好能量化、有相關網址連結，在投履歷的時候可以附上 也可以在個人檔案頁面附上，這樣才能越累積越多、讓人一目瞭然 如果是在聊天室參與討論、在 FB 社團參與討論，就很可惜，相關貢獻沒辦法變成單獨網址、附上履歷表 這種路線經營一陣子後，在業界的工作機會、接案機會、合作機會，也會多很多 --- 第一條路線是面對少數人，爭取他們的認同，也就是其他精英、以及公司面試官的認同 第二條路線是面對社群，爭取他們的認同，也就是面對社群五花八門的意見、各類不同族群 就我個人來說，我是走第二條路線，這跟個性有關 --- 身為軟體工程師，我認為至少要在其中一種路線，稍微有所經營 職業生涯上，才會有點安全感，不然會常常有被淘汰的擔憂、面臨社會新鮮人競爭的擔憂
https://youtu.be/I7dwJxGuGYQ ## TL;DR - 在使用 useContext 時，一定要將其包裝成 custom hook - [好讀版本](https://hackmd.io/@jason60810/rklVqNUh2) - [React 官方文件新增了 TypeScript 使用專文](https://react.dev/learn/typescript?fbclid=IwAR3Pgkr8xpS48Vwa0ADo3oagaAPKX1q05jHhtbXH8ltV8MKwa8FAvePoXPU) - [英文版本](https://jason60810.hashnode.dev/always-use-a-custom-hook-for-context-api-not-usecontext-react-context-api-typescript) ## 資料夾結構 ( 使用 next app route )  ### theme-context.tsx 一定要加上 `use client`，因為 useState 只能在 client component 運作 ， **特別注意，就算這裡加了`use client`，所有的子層還是 server component (預設)**  ### layout.tsx 加上 provider 之後，下面所有的子層都可以拿到值，不用用 prop 一個一個傳下去  ### page.tsx  ### logo.tsx 1. 因為 useContext 要在 client component 運作，所以要加上 `use client`。 2. 當使用 useContext 時，一定要引入 ThemeContext，用起來很麻煩 3. 因為 ThemeContext 預設是 null，所以當不是在 provider 裡使用 `useContext` 時 ( Logo component )，會發生錯誤，因此需要先確認有 context  舉例:不是在 provider 裡使用 `useContext`  ### 創建 custom hook  ### 使用 custom hook 現在引入 ThemeContext 和處理錯誤的問題，已經抽離到 custom hook 中  ### 加上型別 1. React.ReactNode，可以接受 JavaScript primitives ，如果只想要是 jsx 可以使用 React.ReactElement ( [react 官方文件](https://react.dev/learn/typescript#typing-children) ) 2. `type Theme` 可以讓 `useState` 在 get 和 set 時，可以使用正確的型別，例如:當想要 `setTheme('blue')` 時，會報錯，因為 `type Theme` 只有 'dark' 和 'light' 3. 在給予 createContext 型別時，可以利用 ts 的 union 讓 createContext 知道可能有 null 這個型別 ( [react 官方文件](https://react.dev/learn/typescript#typing-usecontext) ) 
大家好，我是站長阿川 我留意到 LINE 群組的討論非常踴躍 很多迷惘、想轉職的新手，各種發問，都有業界工程師幫忙回答，非常熱心！ 各位很多的回答「非常詳細」，完整到我覺得：只有群組內的新手看到，也太可惜！ 應該讓網路上更多人都能看到，這樣更造福眾生、未來有人 google 搜尋也能夠找到！ 繁體中文社群，需要知識不斷累積。如果一直在 FB 等等聊天室討論，然後被洗掉，有點可惜！ 這也是我建立 CodeLove 網站的初衷！所以我設計了一個新計畫，跟大家分享一下！ # CodeLove 前輩分享寫作計畫：VIP 審核限定 我鼓勵大家，在回答新手之餘，如果覺得 LINE 訊息文字篇幅不夠，或是 LINE 程式碼排版不易 請直接在 CodeLove 寫一篇完整文章，然後再貼到 LINE 群組內！ 舉例來說，我自己就有這樣回答 LINE 群組新手的習慣： [轉職軟體工程師的方法很多，到底該如何選擇：實體補習班、線上補習班、不花錢自學？](https://codelove.tw/@howtomakeaturn/post/NxN2Kx) [回答網友提問：如果前端要銜接後端的話，是不是學 node.js 比較快？](https://codelove.tw/@howtomakeaturn/post/2anP0x) [回應網友提問：我是新手前端，公司叫我學一點 php + laravel 串 API，該從哪邊學起呢？](https://codelove.tw/@howtomakeaturn/post/Zq4Ona) # 如何成為這個計畫的 VIP？ 原則上只接受「業界工程師」加入，也就是有工作經驗者加入！ 就算只有一年工作經驗，也是正在轉職的新手的前輩，所以也歡迎！ 越資深的話越好，因為您有大量的知識＆經驗可以分享！真的是大前輩！ **請在 CodeLove 網站上，任意發表一篇技術文章 or 工作心得，完成之後，點擊下方 LINE 群組加入：** https://line.me/ti/g2/9V19e5igoaUts-hrn1Vr3nNHMcGLLa1hJiaFRg 經過我審核之後，您就加入這個 VIP 群組了！ （例外情況：您是學生，但明顯有極大分享熱情＆知識，也會允許加入） # 身為這個群組的 VIP，可以幹嘛？ 首先，我希望您寶貴的文章，能被儘量多的讀者看到！ 您只要負責寫作就好，我會幫您「製造精美封面圖片」以及「行銷宣傳您的文章」！ 凡是 VIP 前輩發文，我都會在有超過三百人的群組「愛寫扣論壇：發問&交流&討論群」轉貼，並且「設定為公告置頂至少24小時」！ 再來，VIP 群組內都是「樂於分享、經驗豐富、寫作能力出色」的業界人士，大家可以在小群組內交流，我認為互相交換情報，也很有價值！ 最後，如果我覺得您的文章實在應該被「成千上萬的更多讀者看到」，我會直接到各大論壇，到處轉貼宣傳您的文章，類似下面這樣： - https://www.dcard.tw/f/softwareengineer/p/252600314 - https://www.dcard.tw/f/f2e/p/252598230 - https://forum.gamer.com.tw/C.php?bsn=60076&snA=7835159 - https://forum.gamer.com.tw/C.php?bsn=60292&snA=8421 我會確保您的文章被數千、數萬人閱讀！身為寫作者，通常文章四處發表，會到處被不同工程師嘴砲、開嗆，沒關係，這很正常，我會擋在砲火最前面！您不用被這些負面訊息轟炸，我只會回報有意義的正面留言給您！ 如果有很棒的留言或 feedback，我會貼回 VIP 群組內通知您！ # 我想加入，但我沒什麼寫作靈感，怎麼辦？ 首先，如果您有想發表的技術文章，當然可以直接當成寫技術部落格，寫一篇發表！ 再來，您可以在 LINE 群組，看看新手們都在問些什麼，然後就當作在回答他們，直接公開寫一篇完整回答！ 最後，也可以是您近期的一些技術筆記、工作隨筆，稍微整理之後發表，這種筆記也常常對後人很有價值！ # 結論 我真的覺得繁體中文世界，需要有一個優質的討論區、寫作園區，知識才能有效累積，這個國家的軟體產業才能進步、發達 另外，這個 CodeLove 論壇是有 [文章 API](https://codelove.tw/@howtomakeaturn/post/jqeDka) 功能的 您可以在這邊大量寫作，之後呼叫 API 串接到自己的部落格，markdown 格式與 html 格式的轉換我都已經幫您做好了 以上，各位熱心的工程師，誠摯歡迎您加入「CodeLove 前輩分享寫作計畫」！一起造福眾生吧！ https://line.me/ti/g2/9V19e5igoaUts-hrn1Vr3nNHMcGLLa1hJiaFRg 有問題歡迎直接留言與我討論！
## 課程目標 - 學會重置指令 ## 課程內容 來學一個強大的指令：重置 上一課的取消功能，是針對修改到一半的檔案 這時很自然會浮現一個問題：如果是之前已經提交過的內容，有辦法取消嗎？ 點開 `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 視窗的內容，上傳到留言區
## 課程目標 - 學會基本指令 ## 課程內容 繼續上一課的內容，這次在同個資料夾內，再新增一個檔案 `my-document-2.txt`，裡面放入以下內容 ``` 我的第二個筆記檔案 ``` 接著打開 Github Desktop 看看狀況 會看到 `Changes` 分頁下面，現在有兩個檔案 分別點選檔案，可以在右側主視窗看到內容 --- 在 git 的觀念裡面，git 預期我們每次工作，都會修改到很多檔案 每次工作到一段落時，要提交進度給團隊時，都會一口氣將這些檔案變化送出去 這個所謂的「提交」，在 git 中稱之為 `Commit` 所以，你會很常聽到工程師說「這個 commit」、「那個 commit」、「上次的 commit」、「你昨天的 commit」 來試試看提交我們的第一次版本紀錄吧！ 每次提交，都需要打一段提示訊息，方便日後翻閱，大致知道每個提交的內容 請在左下角的 `Summary` 輸入 ``` this is my first commit, i am so happy! ``` `Description` 可以省略，不用輸入 接著點擊 `Commit to main` 你會發現 `Changes` 分頁列表清空了！本來的兩個檔案不見了 這是因為 `Changes` 代表「這次正在修改的檔案」，送出 commit 代表「本次修改完成並提交」了，所以就不再有「這次正在修改的檔案」了 請點選旁邊的 `History` 分頁，會看到剛剛的 commit，點選 commit 可以看到相關的檔案內容變化，很酷吧！ --- 讓我們多提交幾次檔案，試試看多次提交的感覺！ 先建立新檔案，請建立 `my-document-3.txt` 並放入以下內容 ``` 我的第三個筆記檔案 ``` 然後在 `Summary` 輸入 ``` add another work ``` 之後就 `Commit to main` 直接點下去！又送出一筆 commit 囉！ --- 來，我們再建立新檔案一次，請建立 `my-document-4.txt` 並放入以下內容 ``` 我的第四個筆記檔案 ``` 然後在 `Summary` 輸入 ``` add one more work ``` 之後就 `Commit to main` 直接點下去！又送出一筆 commit 囉！ --- 點開 `History` 分頁看看吧！ 會看到剛剛的三筆 commit 記錄都在裡面 點擊不同的 commit 可以看到對應的 commit 內容 Git 會追蹤整個資料夾內的所有變化！包括：建立新檔案、檔案內容的增加、檔案內容的減少、檔案被刪除 這些變化也會在每次提交 commit 時被記錄下來，所以都可以在 `History` 分頁看到記錄，很強大吧！ ## 課後作業 接續前一課的作業，你的專案目前有一個 txt 檔案 這次要來模擬實際工作的時候，反覆修改檔案、增減檔案的過程 請按照以下順序送出 commit **第一個 commit：** 請把目前的 `me.txt` 檔案放進 commit 裡面。 **第二個 commit：** 你改變心意，覺得拆成多個檔案比較清楚，之後分別寫內容比較好 請把 `me.txt` 檔案的內容清空，改放以下內容 ``` 我是XXX，請參考其它檔案，瞭解更多我的介紹與背景。 ``` 新增 `about.txt` 以及 `background.txt` 兩個檔案 並且把 `我是誰` 的內容放進 `about.txt`，把 `我的學歷` 的內容放進 `background.txt` **第三個 commit：** 你靈機一動，覺得在履歷寫一些個人的大目標，會讓人感覺氣勢很強 新增一個 `goals.txt` 檔案，裡面放入以下內容 ``` 我的目標，是成為貴公司的 CTO（技術長）。 ``` --- 最後，點開左側的 `History` 分頁，應該會看到以上三個 commit 的訊息！ 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區
昨天在我們新手寫程式 LINE 群組，有幾個業界工程師＆剛轉職的新手在討論： 公司有實施 WFH 在家工作制度，但沒人可以詢問、經常怕自己漏看訊息、整天感覺更焦慮了，怎麼辦？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 這主題很好，我決定單獨寫一篇文章討論這件事情，跟大家分享 --- 首先，我認為 WFH 是一種「團隊技能」，也就是説：這不是一個人就能做好的事情，需要整個團隊的合作 再來，因為是技能，這不是每個人一入職就會的東西，需要經過訓練 總體來說，我認為要習慣「新的四種溝通方式」，分別說明如下 # 批次溝通 在辦公室大家可以隨時找同事討論、發問，也可以臨時團隊開會之類的。 遠端工作很難這樣做。因為人與人溝通的頻率被迫降低了，所以每次溝通的內容量要提昇。 建議養成批次溝通的習慣。也就是一次詢問多個問題、一次安排多個工作事項。 舉例來說，大家早上團隊視訊/語音開會的時候，不要只是每個人安排一天的工作量，最好把一整週的工作事項都先預排好。 這樣一來，當你手上的任務卡住，需要詢問別人問題、等待答覆、等待別人工作先做完時，可以先改做其他待辦任務。 這會讓負責安排工作任務的主管，工作難度提高不少。但習慣一下會發現效果很不錯。 發問的時候也是一樣。可以拿筆記本、或是在電腦開個檔案，整個早上陸續遇到、想到的問題，都記錄下來。 下次終於有機會跟同事通話時，一口氣問清楚。 就算只是用聊天室也一樣。 我常常一口氣丟出好幾個不同事項的不同問題。反正同事有空再逐一回答即可。 # 過度溝通 遠端工作絕對要避免這個狀況：因為溝通誤會，導致做了整天的白工。 絕對不可讓這種情況發生。平常在辦公室，隨時都能知道同事在幹嘛、有疑問也可隨時跟主管確認。在家工作可不行。 所以要養成過度溝通的習慣。我自己習慣是剛剛視訊時已經講過的事情，結束前我會再統整一遍、然後每件事描述確認一次。 結束之後，還會把我剛剛確認的事情打成幾個待辦，貼到聊天室讓對方再看一次。等於每件事我都跟對方確認2-3次。 我甚至會把同樣幾件事情，換個方式、換個角度再重新描述幾次，讓相關人都同意，我才放心沒有做錯方向。 有留紀錄的話，事後出問題也比較容易討論責任歸屬。 總之，在家默默工作幾天，然後才發現通通在做白工，是絕對不可以發生的。 如果你發現在家工作之後，自己會一直跟同事確認事情，或是同事會多次重複確認同樣的事情，好像大家變得有點神經質？ 別擔心，這不但是很正常的現象，還是很鼓勵的現象。 # 被動溝通 拍同事的肩膀問問題、叫他過來開會、打電話給他…等等，屬於主動式溝通：以發問的人優先，被問的人配合發問的人的時間。 貼便條紙給同事、張貼事項在公告欄…等等，屬於被動式溝通：以被問的人優先，發問的人配合被問的人的時間。 被動式溝通以被問的人、接收訊息的人為主，有空時才答覆、做出反應。 遠程工作的團隊一定要習慣被動式溝通，否則遠程工作就沒有意義，也沒有效率，會變成很痛苦的事情。 網路時代讓被動式溝通輕鬆許多，只要採取多層次溝通就行了。 # 多層次溝通 多層次溝通指的是依照主動/被動程度的不同，分成至少3-4層溝通工具。舉例來說： 即時溝通：見面、手機/Skype/Hangouts/Zoom 通話 通訊軟體：Skype、Line、Facebook Messenger 工作聊天室：Slack 任務管理軟體：Bitbucket/Github、Trello 即時溝通是最主動的一種，碰面開會、打電話等等都算。在很多情況下，還是需要用這種方式討論、腦力激盪。最好每天約個固定時間線上通話一下。 通訊軟體則是次之的溝通方式，但因為訊息通知會一直跳出來，還是有點干擾。 工作聊天室是最常發生溝通的地方。這類工具的特色在於，忙著工作的人，可以直接把聊天室關掉，就不會被打擾。有空時再打開來看看有什麼需要回答的、討論的。 任務管理軟體是大家一起紀錄工作待辦事項的地方。需要日後方便翻閱的東西都記在這裡。 其它工具軟體像是 Google Docs、Google Sheets、hackmd 也都非常好用。 --- 以上是四種 WFH 個溝通方式，另外有兩點補充 # 被動式溝通優先，非必要不使用主動式溝通 上面提到的多層次溝通模型，越上面是越主動，越下面是越被動的溝通方式。團隊成員要慢慢習慣，非必要別使用主動式溝通。沒那麼急著得到答覆、急著需要處理的事情，就盡量用被動的手段溝通。 話雖如此，每天慣例性地在固定時段通話一次，可以大幅增加團隊的安全感。 # 每次開會都做線上筆記，所有檔案都對所有人公開 因為大家沒待在一起，開會完忘記會議細節的話，會需要一直詢問同事，很浪費時間也很煩。 所以開會時建議使用 Google 文件、hackmd 或是其他可以共同編輯的軟體，開會的時候一邊做線上筆記。 然後這些文件最好公開給整個團隊的人看到，讓全部資訊同步到全部人腦中。 這些技巧熟練之後，團隊成員不但可以專心工作，溝通能力也會全部上升。 像是跟客戶、合作廠商溝通這種本來就需要遠端溝通的任務，remote 工作者也比一般的工作者更知道怎麼溝通、避免溝通誤會。 # 結論 這些工作方式有點違反一般的工作直覺，所以容易被忽略。 但只要習慣一下，一定會發現遠端工作的好處，工作效率甚至比在辦公室更高。
在我們新手寫程式 LINE 群組，有幾個業界工程師＆想要轉職的新手在討論： 非本科轉職，到底要學什麼語言？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 這個問題在群組中，重複出現快十次了！ 我決定設計一個量化指數，給大家參考，一次回答這個「大哉問」！ --- # CodeLove 程式語言新手友善指數 - 簡介 我設計的這個指數，我命名為「CodeLove 程式語言新手友善指數」 因為每次有人問我，我都是請對方報名補習班之前，先打開人力銀行，親眼看一下那些職缺＆產業是否喜歡！ 如果歡迎新手的職缺很少，那這個語言不管多強大、多好學，在台灣都不能算是適合新手！畢竟大家轉職就是想儘快找到工作！ 指數公式是這樣： - 打開 104 人力銀行，搜尋「某某程式語言」、只搜尋職務名稱、經歷要求1年以下，得到歡迎新手的職缺數 X - 打開 1111 人力銀行，搜尋「某某程式語言」、僅搜尋職缺名稱、工作經驗選無經驗，得到歡迎新手的職缺數 Y - 把 X + Y = 最終結果 這個最終數字，大概就是你今天去找工作，市場上歡迎你這種非本科、無經驗的職缺數量！ 不論你是補習班畢業或者自學結束，請參考這些數字：願意給你機會的職缺大概是這麼多！ --- # CodeLove 程式語言新手友善指數 - 2023年8月份排行榜 - `#1` Java (267) - `#2` C# (241) - `#3` PHP (167) - `#4` Python (87) - `#5` Golang (32) - `#6` Ruby (3) - `#7` Rust (2) # 結論 非本科轉職，到底要選什麼程式語言？ 你當然要綜合考量： - 有沒有喜歡的補習班開課 - 程式語言本身的學習難度 - 身邊熟識的工程師是專精哪個 - 相關的免費、付費線上自學資源多寡 我知道，上面這個指數，公式過度簡化，但至少有個參考數字！ 我有留意到，有些人，因為煩惱這個問題，重複研究了很久，遲遲做不了決定，很害怕選錯 實務上，有些職缺會貼在 FB 社團、或其他人力資源網站、有些職缺沒把語言寫在「職務名稱」上，所以真正的職缺其實更多！ 我個人認為，1 ~ 4 光看數字就知道還不錯！有心動的課程就去報名吧，別一直胡思亂想嚇自己！ 5 你就再多多評估、研究一下！應該也還行！ 6 7 這種數字，我只是想說明，如果你有認識的工程師，推薦你非本科去學 Ruby 或 Rust，那你可能要同時請他推薦職缺了！因為幾乎沒有願意給你機會的職缺！ 以上，簡單分享，希望對你有幫助！ 可以留言：你想看的程式語言，我找時間做一份更新、涵蓋更多語言的！
昨天在我們新手寫程式 LINE 群組，有幾個業界工程師＆新手在討論： 如果前端要銜接後端的話，是不是學 node.js 比較快？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 這主題很好，我決定單獨寫一篇文章討論這件事情 --- 首先，我很推薦新手前端也去學一點後端，這樣對整體概念會更清楚 這位網友提到的 node.js 很不錯，但是我更推薦去學 php，簡單幾個原因說明如下 # 無框架開發 常見的後端語言，在寫網站時，都需要套件＆框架才能開發 - python 需要 django - ruby 需要 rails - java 需要 spring - node 需要 express 我建議你直接寫 php 做好玩的小網站，不要用框架 php 雖然現在都用 laravel 框架，但古早時代大家都寫純 php 如果現在只是自己做個小專案，當然寫純 php 也是夠用的 學框架沒什麼不好，但是，在新手一開始的階段，我更推薦從單純的東西開始學起 一來上手很快，二來等於是紮穩馬步，三來之後學框架可以去思考：如何用純 php 語言寫出框架元件 如果自己想補充後端知識，就試試純 php 吧！先別學 laravel，晚點再去學就好 # 後端先避免非同步程式設計 這件事比較 tricky，javascript 語言本身支援非同步，這在前端 UI 處理很好用 也就是常用的 async/await，`.then().then().then()` 或者到處傳 callback function 那些的 但是！我認為在寫後端的時候，這個語言特色會讓後端開發時，顯得有點囉唆 以後端讀取檔案內容來說，絕大多數情況下，你就是要現在就讀取好檔案、讀取完才讓程式接著繼續跑，才有意義 幾乎不存在「非同步去讀取檔案，不等結果，先直接去處理別的任務」這種情況 於是 node 後端程式碼就需要去傳 callback function 或者 async/await 我認為這有點囉唆，這些情境實在沒必要用「非同步程式設計」處理！ node 社群自己也知道，所以除了 `fs.readFile` 之外，還有提供 `fs.readFileSync` 函式 作為一個教育者，我很不喜歡跟新手解釋，為甚麼會有這兩種函式，差異在哪 我認為新手後端，多去學非同步程式設計的觀念與技巧，是徒增挫折 用 python/php/ruby/java 寫後端，都不會遇到這個困擾 新手後端就學好 http 協定，GET 跟 POST 參數是怎麼傳遞的，怎麼使用 session，怎麼連接資料庫就好了 不要多被一個 asynchronous programming 困擾 # 多學一個程式語言 本身是前端工程師，再去學後端想用 node 繼續寫 javascript 當然很合理 不過，長遠來說，多學幾種程式語言，對職業生涯比較健康 首先，你會更有自信一點，並且，能夠開始比較各種程式語言的差異與哲學 很多在 A 語言理所當然的事情，在 B 語言是很罕見的 很多在 A 語言社群大家都說「對」的事情，在 B 語言社群大家都說「錯」 長遠職業生涯來說，你需要至少寫過多種程式語言，才會發現大多數事情都只是「不同社群」的「主觀偏好」 你會發現網路上多數講的斬釘截鐵的對錯觀念，都只是一種偏執。你的觀點會更全面 # 結論 以這位網友的狀況來說，本身是前端，其實，學 nodejs 或 php 都不錯啦 我個人是偏好 php > nodejs 一點，這樣 以上，簡單分享，希望對類似狀況的朋友有幫助！
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (1)](https://ithelp.ithome.com.tw/articles/10311621) ##### [【前端動手玩創意】google五星評分的星星(2)](https://ithelp.ithome.com.tw/articles/10311643) ##### [【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)](https://ithelp.ithome.com.tw/articles/10311672) ##### [【前端動手玩創意】一句CSS做出好看的hero section！(4)](https://ithelp.ithome.com.tw/articles/10311691) ##### [【前端動手玩創意】創造一個Skill bar(5)](https://ithelp.ithome.com.tw/articles/10311756) ##### [【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)](https://ithelp.ithome.com.tw/articles/10311999) ##### [【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)](https://ithelp.ithome.com.tw/articles/10312001) ##### [【前端動手玩創意】讓你的PDF檔案更難被抓取(8)](https://ithelp.ithome.com.tw/articles/10312046) ##### [【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)](https://ithelp.ithome.com.tw/articles/10312056) ##### [【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)](https://ithelp.ithome.com.tw/articles/10312066) ##### [【前端動手玩創意】太屌了吧！？用Class(類)製作Jquery的效果！(11)](https://ithelp.ithome.com.tw/articles/10312114) ##### [ 【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯(12)](https://ithelp.ithome.com.tw/articles/10312922) ## 前情提要 一陣子沒寫前端動手玩創意了 今天要來點好料的 我們談談關於藝術 對 就算是寫程式我們也是可以有藝術氣息的 別這麼驚訝XD 假設我有一組資料 一般人來說 最直覺的就是把html裡面的元素寫出來寫死 直覺菜鳥就是寫出來啊 ``` <div id="items_list"> <li class="buy_item">1.紅茶 <div class="price">10</div> <div class="del_btn">X</div> </li> <li class="buy_item">2.奶茶 <div class="price">15</div> <div class="del_btn">X </div> </li> <li class="buy_item">3.綠茶 <div class="price">30</div> <div class="del_btn">X</div> </li> </div> ``` 要更新則是就去更改DOM就好了 反正我都學會JS了 有什麼大不了(? 但是現在已經進入大前端時代了就算你寫原生 也會有data model的概念 這部分可以參考站長阿川寫過的好文 裡面的文筆跟邏輯 不誇張 是我見過「華文圈寫得最好的前端教學」 尤其就是這篇 關於data model的介紹 切入點非常的有趣也很有道理 有興趣的自己去花心思讀看看 [認識 data model 與 render function](https://codelove.tw/@howtomakeaturn/post/9xLo5q) 稍微有點料的前端學習者 本身就會寫一寫 想說：既然有一隻API是createElement 那是不是我可以整個html都用js寫出來(? 這是個超級有趣的觀點 ## 關於data render的概念: 「是不是我可以整個html都用js寫出來」 相傳牛頓提出三大定律以後 認為地球和八大行星一開始的慣性力叫「上帝的第一推動力」 實際上這個： 「整個html都用js寫出來」 也是推動前端往框架邁進的思考第一步 可以說是前端慣性的上帝推力了 當然如果你有打籃球 也可以比喻成上籃的第零步XD ## 觀念筆記 ### html程式碼 ``` <div id="buylist"> <h1>myBuylist 購物清單</h1> <div class="buyitem"> <label>產品名</label> <input/> <label>價錢</label> <input/><span class="addbtn">+新增</span> </div> <div id="items_list">這邊準備用JS插入東西所以這段只是說明文字</div> </div> ``` 把整個頁面的元素寫出來 但是資料的區塊保留著 因為等等我們要用JS的API去動態生成 未來直接data render 方便更新與管理 ### JS程式碼 ``` var shoplist = {}; shoplist.name = "購物清單"; shoplist.list = [ { name: "吹風機", price: "300" }, { name: "麥克筆", price: "20" }, { name: "筆記型電腦", price: "29300" }, { name: "Iphone 9", price: "5200" }, { name: "神奇海螺", price: "1000" }, ]; var item_html = "<li id={{id}} class='buy_item'>{{name}}<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_html = "<li class='buy_item total'>總價<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_price = 0; for (var i=0; i < shoplist.list.length; i++) { var item = shoplist.list[i]; total_price += item.price; var current_item_html = item_html.replace("{{num}}", i + 1) .replace("{{name}}", item.name) .replace("{{id}}", "buyitem_" + i) .replace("{{price}}", item.price); $("#items_list").append(current_item_html); } ``` 這邊值得關注的一點是資料的處理 也就是數據結構上使用物件與陣列去儲存資料 為什麼要學 陣列 為什麼要學物件 這兩個都是抽象的名詞 他們都是為了來處理資料所規劃的兩種不同內容 ## 關於物件與陣列 物件就像是RPG角色 會有很多的屬性 魔法 敏捷 力量 血量 這些屬性都是被附加在person上面 所以person.blood是一個資料 person.power是一個資料 person.magic是一個資料 最後都存在person裡面 這個person就是一個含有很多屬性的物件 感覺就是有血有肉很3D 而陣列就比較平面化 就是很多數字排成一列而已 其實沒什麼特別需要關注的 這兩個也不會不好區分 只要稍微做個比喻 都很好理解 以我們的code來講解 shoplist就是一個物件 含有一些屬性 包含名字與清單 因為清單很多 所以清單用一個陣列儲存 陣列裡面放很多個物件 這些物件就是每一個清單包含的那些購買項目 其實不用太在意誰是誰因為用看的就很清楚 最後我們用迴圈去把shoplist裡面的每一筆資料都丟進去 中途replace是文字處理 把我們設置的{{name}}這種花括號的東西換成真實資料 這部分有點樣板語言的感覺XD 其實非常有趣 很值得玩味 ## 心得 這次比較多實在的JS程式碼 就不只是玩玩切版了 算是有點靠近框架的部分(◉３◉) 動手玩創意這個系列其實靈魂之處就在於「有趣」兩個字 坊間把前端描繪成為了找工作的銅臭味 以及把切版講成無聊的工匠苦力活 我認為都是錯誤的解讀 我認為 只要是有趣的地方就是前端最有價值的地方 而不是誰學了那個框架 誰又認為哪個東西比較厲害 哪個語言比較屌 那都是很無聊的文字遊戲罷了 如果你喜歡這樣子的前端 請跟著這個系列繼續走(￫ܫ￩) 我們才只是在桃花源外的小溪旁玩水而已呢！ 未來會往天空飛翔哦XD
然後作為一個計時器可是總是顯示undefined 小米手環文件 https://cdn.discordapp.com/attachments/1132882463522312204/1132987644255670322/helloworld_pro.bin ``` var time_val; var go_timer; var stop_time = 0; function add_zero(num, digit) { let numString = String(num) while (numString.length < digit) { numString = "0" + numString } return numString } function timers() { if (true) { let temp_timer = new Date().getTime() - go_timer; let day = add_zero(Math.floor(temp_timer / (24 * 60 * 60 * 1000)), 2); let hours = add_zero(Math.floor((temp_timer % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)), 2); let minutes = add_zero(Math.floor((temp_timer % (60 * 60 * 1000)) / (60 * 1000)), 2); let seconds = add_zero(Math.floor((temp_timer % (60 * 1000)) / 1000), 2); let milliseconds = add_zero(temp_timer % 1000, 3); return [day, hours, minutes, seconds, milliseconds]; } } go_timer = new Date().getTime(); time_val = setInterval(() => { var time = timers(); console.log(time[0] + "天\n" + time[1] + "時\n" + time[2] + "分\n" + time[3] + "秒\n" + time[4] + "毫秒"); }, 1); /* undefined天 undefined時 undefined分 undefined秒 undefined毫秒 */
## 前情提要 本文跟六角學院沒有任何關係ＸＤ ## 文章開始 今天要討論自學，關於線上課程，我認為買一些課是好的，但別傻傻看了促銷就買。 誰跟你說學程式一定要花錢？ 告訴我，誰跟你講的？就是賣你課的人啊傻子。 . . . 我今天這篇文章要教你怎麼免錢學程式，而且是有系統的學，不是自己在那邊維基百科或谷歌一百年那種。 答案是：爬文。 . . 好啦我知道你們這些伸手牌就是懶得爬文所以才會想要花錢了事，今天我爬完了。 ## 好料放送(一) 把免費資源直接丟給你吧。 [「Python 網路爬蟲與資料分析入門實戰」範例程式碼](https://github.com/jwlin/py-scraping-analysis-book)  裡面包含 ``` 網頁爬蟲範例實戰 3-1 PTT 八卦板今日熱門文章 3-2 Yahoo 奇摩電影本週新片 3-3 兩大報當日焦點新聞 3-4 Google 搜尋股價資訊 3-5 Dcard 今日熱門文章 ``` 所有書本裡面的程式碼作者都直接公開了，我也不知道為什麼，反正就是免費給你。 現在你也不用自己google研究，直接複製丟到GPT那邊寫一個教學文章給你， 你就等於能夠免費讀到這本書。而且不用手打程式，你最愛的那種。 ## 好料放送(二)  [hahow 線上課程: Python 網頁爬蟲入門實戰](https://github.com/jwlin/web-crawler-tutorial/tree/master) . 同一個作者丟出來的，總之既然人家想放github那就看啊！ 用法也是一樣，人家有個lecture可以看看課綱與大致上的說明自己去配上GPT以及谷歌， 然後不需要自己打扣，直接有現成範例可以拿去跑看看，年代問題導致的錯誤還可以當作功課自己改。 . . . ## 總結 還在靠北沒資源或是一直問要怎麼自學？現在告訴你了， 這樣的教材原本他起碼都賣幾千塊，你可以免費學幹嘛不學？ 別問我怎麼知道的，我也是爬文爬到的，只是我人很好分享給你們知道而已。 . . 謝謝，別那麼感動。 . . 我也只是一個很愛免費白嫖的爬文仔而已。
資深開發者 Jatin Sharma 在國外論壇分享了個人使用的 VSCode 設定，內容豐富，跟大家分享！ 原文出處：https://dev.to/j471n/my-vs-code-setup-971 ## 🎨主題 我使用 [**Andromeda**](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda) 作為我的 VS Code 的主要主題  ## 🪟圖標 對於圖標，我會在 [**材質圖標主題**](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 和 [**材質主題圖標**]( https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons) **找找看。** ### 材質圖標主題  ### 材質主題圖標  ## ⚒️外掛 最讚的部分來了，有很多擴展我只提到了我最喜歡的或我每天主要使用的擴展。 ### 自動重命名標籤 自動重命名配對的 HTML/XML 標記，與 Visual Studio IDE 的操作相同。 **下載：** [**自動重命名標籤**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)  ### 括號對著色切換器 VS Code 擴展，為您提供一個簡單的命令來快速切換全局“括號對著色” **下載：** [**括號對著色切換器**](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler)  ### C/C++ C/C++ 擴展向 Visual Studio Code 加入了對 C/C++ 的語言支持，包括編輯 (IntelliSense) 和除錯功能。 **下載：** [**C/C++**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools)  ### 程式碼執行器 執行多種語言的程式碼片段或程式碼文件 **下載：** [**程式碼執行器**](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)  ### 程式碼拼寫檢查器 一個基本的拼寫檢查器，可以很好地處理程式碼和文件。 該拼寫檢查器的目標是幫助發現常見的拼寫錯誤，同時保持較低的誤報數量。 **下載：** [**程式碼拼寫檢查器**](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)  ### DotENV VSCode `.env` 語法高亮。 **下載：** [**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)  ### 錯誤鏡頭 ErrorLens 通過使診斷更加突出來增強語言診斷功能，突出顯示語言生成的診斷的整行，並內聯打印訊息。 **下載：** [**錯誤鏡頭**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)  ### ES7+ React/Redux/React-Native 片段 ES7+ 中的 JavaScript 和 React/Redux 片段以及 [VS Code](https://code.visualstudio.com/) 的 Babel 插件功能 **下載：** [**ES7+ React/Redux/React-Native 片段**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)  ### ESLint 該擴展使用安裝在打開的工作區文件夾中的 ESLint 庫。如果該文件夾未提供，則擴展程序將查找全局安裝版本。如果您尚未在本地或全局安裝 ESLint，請在工作區文件夾中執行“npm install eslint”進行本地安裝，或執行“npm install -g eslint”進行全局安裝。 **下載：** [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)  ### Git 圖 查看存儲庫的 Git 圖表，並從圖表中輕鬆執行 Git 操作。可配置為您想要的外觀！ **下載：** [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)  ### GitLens GitLens **增強了 VS Code 中的 Git，並解鎖每個存儲庫中**未開發的知識**。它可以幫助您通過 Git Blame 註釋和 CodeLens 一目了然地**可視化程式碼作者**，**無縫導航和探索** Git 存儲庫，**通過豐富的可視化和強大的比較命令**獲得有價值的見解**，等等更多的。 **下載：** [**GitLens**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)  ### HTML 樣板 此擴展提供了所有 Web 應用程式中使用的標準 HTML 樣板程式碼。 **下載：** [**HTML 樣板**](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate)  ### Import Cost 此擴展將在編輯器中內聯顯示導入包的大小。該擴展利用 webpack 來檢測導入的大小。 **下載：** [**Import Cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)  ### Live Server 它將啟用實時更改而不保存文件。 **下載：** [**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)  ### Markdown 多合一 Markdown 所需的一切（鍵盤快捷鍵、目錄、自動預覽等）。 ***注意***：VS Code 具有開箱即用的基本 Markdown 支持（例如，**Markdown 預覽**），請參閱官方文件了解更多訊息。 **下載：** [**Markdown All in One**](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)  ### Markdown 預覽增強 它顯示了 Markdown 內容的增強預覽。 **下載：** [**Markdown 預覽增強版**](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)  ### 將 JSON 粘貼為程式碼 複製 JSON，粘貼為 Go、TypeScript、C#、C++ 等。 **下載 -** [**將 JSON 粘貼為程式碼**](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)  ### 更漂亮 使用 Prettier 的程式碼格式化程序 **下載 -** [**Prettier**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  ### Python IntelliSense (Pylance)、Linting、除錯（多線程、遠程）、Jupyter Notebooks、程式碼格式化、重構、單元測試等。 **下載 -** [**Python**](https://marketplace.visualstudio.com/items?itemName=ms-python.python)  ### 設置同步 使用 GitHub Gist 跨多台計算機同步設置、程式碼片段、主題、文件圖標、啟動、按鍵綁定、工作區和擴展。 **下載 -** [**設置同步**](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)  ### Tailwind CSS IntelliSense 適用於 VS Code 的智能 Tailwind CSS 工具 **下載 -** [**Tailwind CSS IntelliSense**](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)  ### 所有亮點 突出顯示程式碼中的“TODO”、“FIXME”和其他註釋。 有時，在將程式碼發佈到生產環境之前，您會忘記檢查編碼時加入的 TODO。所以我長期以來一直想要一個擴展來突出顯示它們並提醒我還有註釋或尚未完成的事情。 希望這個擴展也能幫助您。 **下載 -** [**TODO 突出顯示**](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)  ### Turbo 控制台日誌 自動編寫有意義的日誌訊息的過程。 **下載 -** [**Turbo 控制台日誌**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)  ### 塔布寧人工智能 Tabnine 是一款 AI 程式碼助手，可讓您成為更好的開發人員。 Tabnine 將通過所有最流行的編碼語言和 IDE 中的實時程式碼完成來提高您的開發速度。 **下載 -** [**Tabnine AI**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)  ## ⚙️設置 以下“JSON”程式碼顯示了我的 VS Code 設置： ``` // user/settings.json { "files.autoSave": "afterDelay", "editor.mouseWheelZoom": true, "code-runner.clearPreviousOutput": true, "code-runner.ignoreSelection": true, "code-runner.runInTerminal": true, "code-runner.saveAllFilesBeforeRun": true, "code-runner.saveFileBeforeRun": true, "editor.wordWrap": "on", "C_Cpp.updateChannel": "Insiders", "editor.suggestSelection": "first", "python.jediEnabled": false, "editor.fontSize": 17, "emmet.includeLanguages": { "javascript": "javascriptreact" }, "editor.minimap.size": "fit", "editor.fontFamily": "Consolas, DejaVu Sans Mono, monospace", "editor.fontLigatures": false, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "python.formatting.provider": "yapf", "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "git.autofetch": true, "git.enableSmartCommit": true, "html-css-class-completion.enableEmmetSupport": true, "editor.formatOnPaste": true, "liveServer.settings.donotShowInfoMsg": true, "[python]": { "editor.defaultFormatter": "ms-python.python" }, "diffEditor.ignoreTrimWhitespace": false, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[c]": { "editor.defaultFormatter": "ms-vscode.cpptools" }, "editor.fontWeight": "300", "editor.fastScrollSensitivity": 6, "explorer.confirmDragAndDrop": false, "vsicons.dontShowNewVersionMessage": true, "workbench.iconTheme": "material-icon-theme", "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.renderWhitespace": "none", "workbench.startupEditor": "newUntitledFile", "liveServer.settings.multiRootWorkspaceName": "", "liveServer.settings.port": 5000, "liveServer.settings.donotVerifyTags": true, "editor.formatOnSave": true, "html.format.indentInnerHtml": true, "editor.formatOnType": true, "printcode.tabSize": 4, "terminal.integrated.confirmOnExit": "hasChildProcesses", "terminal.integrated.cursorBlinking": true, "terminal.integrated.rightClickBehavior": "default", "tailwindCSS.emmetCompletions": true, "sync.gist": "527c3e29660c53c3f17c32260188d66d", "gitlens.hovers.currentLine.over": "line", "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "args": [], "icon": "terminal-cmd" }, "Git Bash": { "source": "Git Bash" }, "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "args": [] }, "Windows PowerShell": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe" }, "Ubuntu (WSL)": { "path": "C:\\WINDOWS\\System32\\wsl.exe", "args": [ "-d", "Ubuntu" ] } }, "javascript.updateImportsOnFileMove.enabled": "always", "[dotenv]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "editor.tabSize": 2, "cSpell.customDictionaries": { "custom-dictionary-user": { "name": "custom-dictionary-user", "path": "~/.cspell/custom-dictionary-user.txt", "addWords": true, "scope": "user" } }, "window.restoreFullscreen": true, "tabnine.experimentalAutoImports": true, "files.defaultLanguage": "${activeEditorLanguage}", "bracket-pair-colorizer-2.depreciation-notice": false, "workbench.editor.wrapTabs": true, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "terminal.integrated.fontFamily": "courier new", "terminal.integrated.defaultProfile.windows": "pwsh.exe -nologo", "terminal.integrated.shellIntegration.enabled": true, "terminal.integrated.shellIntegration.showWelcome": false, "editor.accessibilitySupport": "off", "editor.bracketPairColorization.enabled": true, "todohighlight.isEnable": true, "terminal.integrated.shellIntegration.history": 1000, "turboConsoleLog.insertEnclosingClass": false, "turboConsoleLog.insertEnclosingFunction": false, "files.autoSaveDelay": 500, "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.host": "localhost", "liveServer.settings.fullReload": true, "workbench.editor.enablePreview": false, "workbench.colorTheme": "Andromeda Bordered" } ``` ## 總結 以上簡單分享，希望對您有幫助！
阿川近期收到網友私訊詢問，簡單來說，就是他報名了某補習班，需要進教室上課四個月 從設計軟體 figma 到後端 php 到前端 vue 通通都教，最後要分組做一個完整專案 結果吸收不良，感覺什麼都碰、什麼都沒學好，現在糊裡糊塗在搞專案，就算弄出來也感覺很不踏實，怎麼辦？ --- 阿川從過去幾年指導朋友半路出家的經驗、幫朋友找補習班的經驗，一聽就知道，這種安排，90%的學員會吸收不良 原因主要有兩個 第一，每位學員的積極程度、理解速度，通通不一樣。大家一起進教室聽老師一堂一堂講，一定有人嫌慢，一定有人嫌快 嫌慢就算了，至少該學的都有學到。嫌快就慘了，花了大錢結果跟不上進度，之後還要每週到教室報到，這很折磨人，學習效率也差 第二，半路出家，通常就找「無經驗可，後端」或者「無經驗可，前端」的職缺，先入行，賺點薪水，慢慢累積經驗＆自信就對了 去補習班挑戰四個月學習全端？就算是 full time 上課，我認為還是太硬了，90%的人都會吸收不良，學習效果不好 --- 就我這幾年的觀察，只有兩種人在這環境能順利學習、成長、轉職 第一種，畢業於台大ＸＸ系，在ＹＹ領域工作數年之後，毅然決然辭職，報名轉職軟體工程師成功 這種是學習能力本來就很好，學歷通常就是台清交、只是非本科 第二種，學歷不佳，工作幾年之後遇到重大挫折，有強烈經濟壓力，破釜沈舟之下，抱著巨大的決心、壓力，全心投入補習＆學習 這種是壓力逼迫人成長，在自己給自己高壓＆痛苦之下惡補成功轉職 我認為90%的人，不符合以上狀況，會變成花大錢、花超多時間，最後還效果不理想 最糟糕的是，學習應該是要能逐漸建立興趣＆信心的 這種學習成果，就算最後開始去幾間公司面試，也會超心虛，覺得自己好像來騙的，專案根本自己也沒搞懂幾行程式碼，拼拼湊湊不知道在幹嘛 --- 我在多篇文章提到過，我建議就是先找「便宜、有口碑的線上課程」 至少可以按自己步調學習，至少不會花那麼多錢 然後先專心在前端或後端就好了，可以稍微花點時間碰全端，有一點概念，也很好，但不要嘗試直接專精兩者 學過、有更了解之後，再花錢去補習班。不要一開始就用「賭賭看」的心態進教室，你的時間＆金錢很寶貴 何況很多人就用線上資源學一學，就順利去上班了，有些根本是用國外「免費」資源，一毛錢沒花 --- 最後，對很多人來說，看到這篇文章，時間已經花下去了，錢已經花下去了，怎麼辦？ 阿川還是有些建議可以給大家 第一，全課程這樣上完，雖然吸收不佳，但至少有稍微留個印象 請拿出筆記本，多多做筆記「這邊沒聽懂 但好像很有趣」、「這邊沒聽懂 但老師剛有提到幾個關鍵字」，找時間自己多 google 一下 還有「這邊沒聽懂 但感覺好古板啊 這東西業界真的有用？」，找時間去社團或論壇發問，請教一下業界人士 總之，挑能吸收的部份 加減吸收一點 自主練習時，卡關了，至少還知道點方向 第二，不要太快失去信心 「如何學習」本身就是一輩子的技能，有時是學習方法問題、或節奏問題、或方向問題，先別急著放棄 課堂上的作業，找時間自己重看一次：如果有哪行程式碼不懂，就多 google 或發問，慢慢弄懂，慢慢補回自信 --- 最後，我再補充一個觀念給大家，半路出家不容易，我鼓勵大家把學習想成是一個「逐漸清晰」的過程 看過電腦讀取大張高清圖片的樣子嗎？先是模模糊糊的馬賽克，接著一塊一塊慢慢變清晰，最後才是變成完整的美麗圖片 學習會有點類似這樣，一開始到處模模糊糊的沒關係，保持耐心，逐步提高各處的解析度即可 只要先有一整張模糊的圖片即可。不需要執著在圖片一個角落，覺得這塊不清楚，就不能往下走 更千萬不要因為圖片模糊，就覺得「我果然不適合寫程式，放棄好了」，這絕對是搞錯重點 以上，簡單建議分享，希望對你有幫助！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
