自學簡介 ---- 首先，讓我為您描繪一下場景。您在新聞中或透過朋友聽說過「程式設計師的就業市場非常棒」。 你發現自己有一些隨機的 YouTube 影片或奇怪的付費課程，它們可以教你一些東西，你會想*啊哈！這就是所缺少的！* 只需幾天（如果不是幾個小時）你就會很快意識到**程式設計是困難的**，遵循你在網路上找到的一些隨機課程大多只會讓你擅長複製東西，所以當你嘗試時，你最終只是盯著那個巨大的空白螢幕稍後自己思考。  ### 首先，你要怎麼學到東西？ 讓我們來聽聽著名程式設計師[GeoHotz](https://wikipedia.org/wiki/George_Hotz)的說法： {% youtube 8RtGlWmXGhA %} 學習是一個複雜的過程，每個人的情況可能會有所不同。對我來說，**最簡單的學習方法就是找到能激勵你去做的事情。** 由於學習是一個艱難且有時乏味的過程，因此擁有明確的目標可以讓您走得更遠，並且可以讓您感覺自己取得了更大的成就，或者正如 GeoHotz 所說： > *你永遠不會透過觀看名為「學習程式設計」的影片來學習程式設計*。 對於我和我認識的其他程式設計師來說，我們喜歡建立副專案，而這種透過做專案來學習東西的方法（在學院中稱為[基於專案的學習](https://www.bu.edu/ctl/ctl_resource/project-based-learning-teaching-guide/)）由於其功效、作品集、腦海中浮現的隨機想法變得越來越流行，甚至那些可以幫助我們實現興趣愛好的東西也成為你學習的靈感來源的絕佳例子。 所以繼續吧！首先，選擇您的學習**靈感/專案**。如果您是完全的初學者，請從**小事**開始。例如，考慮一個可以在螢幕上顯示您的名字以及所選短語的程式！ 還在問自己如何對一個好的專案創意進行分類？由於這對於初學者來說尤其困難，因此我們將在下面的部分中幫助您回答這個問題。 ### 什麼是好主意？  我正在尋找這些東西來檢查目前是否是一個好主意： - **實用性**：這個想法應該是解決實際問題的東西/你感興趣的東西。這將為您提供將專案進行到底的動力。 - **複雜性**：想法的複雜性應該與您目前的技能水平相符。如果您是初學者，請從簡單的專案開始，隨著您的技能提升逐漸解決更複雜的專案。 - **興趣**：選擇一個您真正感興趣的專案。這將使學習過程變得更加愉快，減少苦差事。 對於初學者來說，一些好主意可以是建立一個基本計算器、一個簡單的部落格或一個互動式待辦事項清單。對於更高級的學習者，可以考慮建立一個從 API 獲取資料的天氣應用程式、即時應用程式，甚至是井字棋或貪吃蛇等簡單遊戲。  事實上，如果您對即時主題感興趣，我們已經編寫了[完整的分步教程](https://wasp-lang.dev/blog/2023/08/09/build-real-time-voting-app-websockets-react-typescript)，向您展示如何使用 WebSocket 建立即時投票應用程式。它將教你如何與朋友即時投票，同時建立一個完全全端的 React + NodeJS Web 應用程式——一個很棒的投資組合專案！ 厭倦了千篇一律的舊想法，或者在尋找新想法時完全迷失了方向？檢查這個[很棒的儲存庫](https://github.com/practical-tutorials/project-based-learning)，其中包含許多指向其他想法清單的不同連結！ ### 為工作/您的學習主題選擇正確的工具  好的第二步是為您的專案選擇正確的語言/工具。 如果您是完全的初學者：**一切正常，**因為大多數程式語言的主要程式設計概念都是相同的。不要擔心任何關於「更好的語言」、「更好的作業系統」或類似的東西的意見，記住，我們正在嘗試在這裡創造一些東西。 還不知道嗎？只要使用[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) ！它很簡單，有大量[教程](https://dev.to/llxd/javascript-cheatsheet-and-snippets-for-beginners-hd6)，基本上可以製作所有東西。 :) 如果您已經具備某種程式設計基礎，請使用人工智慧和一些出色的抽象/框架來更快地完成工作。例如，您可以使用[Wasp](https://wasp-lang.dev/)來跳過大量重複操作，而不是從頭開始建立所有內容（並且可能會在過程中遭受一些小事情的困擾），Wasp 是一個很棒的 React/Node 全端框架，可以處理為您管理程式設計的樣板部分。 🤯 此外，[他們的 CLI](https://wasp-lang.dev/docs/quick-start)也可以幫助您更快地啟動。透過執行`wasp new` ，您可以獲得適合您需求的自訂範本。例如，如果您正在建立新的 SaaS，您可能會發現[OpenSaaS](https://opensaas.sh/)適合您，或者如果您正在建立更具體的解決方案，如果沒有其他合適的解決方案， [AI 程式碼產生器](https://usemage.ai/)可以幫助您快速啟動。  --- 順便說一句，如果您還沒有，請給我們的儲存庫一些關愛！像[Wasp](https://wasp-lang.dev)這樣的開源專案可以節省我們大量的時間，讓我們能夠專注於建立 Web 應用程式的有趣部分！ 透過[在 GitHub 上為該儲存庫加註星標，](https://www.github.com/wasp-lang/wasp)您將幫助我們繼續讓所有開發人員更快、更輕鬆地進行 Web 開發！  {% cta https://www.github.com/wasp-lang/wasp %} ⭐️ 給黃蜂一顆星！ ⭐️ {% endcta %} --- ### 試著去做（並犯一些錯誤）  現在，是時候讓我們動手了！ 身為程式設計師，你必須具備的一項基本技能是**搜尋**。內容無所不在，我們只需要找到它。首先將手邊的任務分解成更小的問題： 讓我們使用*一個簡單的應用程式範例，該應用程式允許用戶輸入其姓名，以便其顯示在螢幕/客戶端上：* - 如何在 Python 上顯示我的名字？ - 如何在程式碼中儲存文字？ 您搜尋和尋找內容的每個問題都會產生更多問題，這些問題有望更準確地解決問題。您可能會親眼看到，像「在螢幕上顯示使用者名稱」這樣簡單的任務可以變得任何複雜程度。 我們如何在應用程式上輸入和保存資料？我們如何正確顯示這些資料？您將嘗試回答這些問題，但有時可能**會失敗**。作為工程師，除了解決專案可能引起的任何不確定性之外，我們還必須確定這些問題是否與我們正在開發的解決方案相關。  在尋求答案和辨識主題是否不相關之間找到平衡非常重要。這個過程有助於我們的專業成長。哦，我們不要忘記我們的朋友 AI，例如[Chat-GPT](https://chat.openai.com/chat) ，它可以為我們解釋甚至編碼。 請記住，與一般的工程一樣，編碼的一部分涉及嘗試和錯誤。我們每天都會嘗試、除錯並尋找解決方案。我們嘗試的越多，我們就越接近所需的解決方案。對於每個工程師/程式設計師來說，快速適應這個過程是朝著正確方向邁出的一大步。 但是，請注意，如果您是一個完全的初學者，請先嘗試自己搜尋。人工智慧很棒，可以幫助你很多，但它可能不精確，只有自己學習才能讓你有能力發現缺陷。 ### 反思你的進步  定期反思迄今為止所學到的知識非常重要。這可以很簡單，例如在每天結束時寫下您所學到的新概念的摘要，甚至建立有關它的部落格文章或教程，或者只是一條簡單的推文。這不僅可以加深您的理解，還可以為將來的使用提供參考（您可以[在這裡](https://buildinpublic.xyz/what-is-build-in-public)了解更多有關**公共建築**概念的訊息，這對公司很有好處，對您的旅程也很有好處！）。 反思您的進步也讓您有機會評估自己的優勢和劣勢，使您能夠專注於需要改進的領域。它就像個人回饋循環，讓您更了解自己的學習方式以及如何提高學習效率。 這也是自我推銷和透過作品集向他人展示的好時機，例如，您的創作內容和方式！ 自學程式設計的挑戰 --------- 自學程式設計有其挑戰。它需要紀律、耐心以及排除故障和從錯誤中學習的能力。此外，如果沒有結構化的課程，很容易感到不知所措或迷失。 然而，同樣重要的是要記住，自學並不意味著孤立學習。與其他學習者互動、分享您的程式碼並尋求回饋（例如，您可以查看[Wasp 的 Discord](https://discord.com/invite/rzdnErX)或其他社群來開始參與）。這可以極大地幫助您增強理解並提高編碼技能。 對於課程部分，你也不必盲目地搜尋所有內容。您可以使用[開發人員路線圖](https://roadmap.sh/)來了解您在每一步中應該學習哪些內容！ 自學程式設計的好處 ---------  儘管面臨挑戰，自學程式還是有許多好處。它允許靈活性，培養創造力，並且可以帶來難以置信的回報。但沒有什麼比你能做任何事的感覺，或者換句話說，**你將獲得的信心**更令人驚奇的了。 當你最終創造出你喜歡創造的東西並意識到你在這個過程中學到了多少東西時，這很棒，但是，如果有足夠的時間，你可以學習並創造任何想到的想法，那就更棒了。此外，您可以按照自己的步調並專注於您最感興趣的領域。建立讓您興奮的專案並與他人分享您的進度。繼續學習，繼續編碼，最重要的是，享受這趟旅程。 結論 --  總之，自學程式設計是一次賦能之旅，可以釋放無數機會。有時可能會充滿挑戰，但您獲得的可能性是無限的。 哦，萬一您還沒有為[Wasp 的存儲庫](https://www.github.com/wasp-lang/wasp)加註星標，我建議您這樣做！對於任何希望更快、更輕鬆地完成專案的人來說，這是一個很棒的全端框架！ {% cta https://www.github.com/wasp-lang/wasp %} ⭐️ 給黃蜂一顆星！ ⭐️ {% endcta %} 最後，成功的自學之旅的關鍵是一致性、耐心和適量的好奇心。將挑戰視為成長的機會，不要害怕尋求協助。在這段旅程中，您並不孤單，每個程式設計師，無論經驗如何，都是從您現在的位置開始的。 --- 原文出處：https://dev.to/wasp/the-art-of-self-learning-how-to-teach-yourself-any-programming-concept-5de4
例如有個 component 如下： ``` vue <template> <iframe :src="url.src"></iframe> </template> <script> export default { data() { return { url: { src: 'https://example.com', }, }; }, }; </script> ``` 這時如果 src 網址變動，iframe 內會顯示新的網頁，同時也會造成 browser history 被修改，也就是點擊瀏覽器的上一頁時，會發現整個網頁沒有跳回上一頁，而是 iframe 回復到舊的網址，但如果這不是你想要的效果呢？ vue.js 官方文件介紹 key 的時候提到： > It can also be used to force replacement of an element/component instead of reusing it. 所以答案就是在 iframe 加上動態的 key，key 和 src 同時變動時，vue.js 就會強制替換成新的 iframe，跳過 browser history 被修改的問題，點擊瀏覽器的上一頁就能正常回到前一頁了，範例如下： ``` vue <template> <iframe :key="url.key" :src="url.src"></iframe> </template> <script> export default { data() { return { url: { key: 1, src: 'https://example.com', }, }; }, }; </script> ``` P.S. 參考資料中，文章作者提到 react 也是一樣的處理方式。 參考資料： https://vuejs.org/api/built-in-special-attributes.html https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/ https://stackoverflow.com/questions/821359/reload-an-iframe-without-adding-to-the-history#answer-77278956
一開始是因為無法與使用者取得聯繫而感到沮喪，但很快就發展成了對平台流程的重新設計。 我和我的團隊正在開發一個開源平台，幫助開發人員在 Kubernetes 中部署和管理他們的應用程式。我們一直在努力擴大我們的用戶群，並且努力已經開始顯現成效。 安裝數量的不斷增加令人欣喜。然而，這是我們唯一能夠觀察到的事情。我們想了解更多。我們想知道用戶在我們的平台上做了什麼以及他們遇到了什麼困難。 下面的短篇故事可以被認為是我們新創公司的#building-in-public條目，但我只是覺得它很有趣，想與你分享。 ### 支持我們🙏 我們知道 Kubernetes 可能很困難。這就是我們建立 Cyclops 的原因，這是一個**真正**面向開發人員的 Kubernetes 平台。抽象化 Kubernetes 的複雜性，並透過 UI 部署和管理您的應用程式。由於其平台性質，UI 本身是高度可自訂的 - 您可以更改它以滿足您的需求。  我們正在將 Cyclops 開發為開源專案。如果您熱衷於嘗試一下，我們的[儲存庫](https://github.com/cyclops-ui/cyclops)中提供了快速入門指南。如果您喜歡所看到的內容，請考慮給我們一顆星來表示您的支持⭐ 使用者回饋🗣️ ------- 從一開始，我們就一直在努力與用戶交談並收集盡可能多的回饋。然而，事實證明這是一個問題。我們知道人們正在下載 Cyclops；在我們的 DockerHub 上，我們可以看到拉取的映像數量一天比一天多。 問題是我們無法聯絡我們的用戶。**我們只能看到拉動的次數，而看不到拉動的人。** 為了與我們的用戶取得聯繫，我們建立了一個[Discord 伺服器](https://discord.com/invite/8ErnK3qDb3)。 Discord 是讓您的社群與您保持密切聯繫的好方法，正因為如此，我們才有辦法了解我們的用戶。 所以我們開始和他們交談。回饋並不總是有建設性的…  ……但大部分都是正面的。然而，有一個警告；我們得到的許多正面回饋來自與用戶的一對一會議。在這些會議中，我們可以比使用者自己更好地展示 Cyclops 的功能。事實證明，這是一個比我們想像的更大的問題。 最近，我們實施了遙測，以便更好地了解我們的用戶如何使用 Cyclops。統計資料一開始出現，天哪，我們感到很驚訝。 問題❗ --- 我們對 Cyclops 的安裝數量感到非常滿意。事實證明，我們認為 Cyclops 的安裝非常簡單且直接，這是正確的。但當我們開始使用它時，超過 60% 的用戶迷失了方向。 那麼問題出在哪裡呢？ 問題是，當您想要將應用程式部署到 Kubernetes 叢集時，您必須提供 Helm 圖表形式的範本。我們建立了一些此類圖表的範例，並將它們發佈到我們的[開放儲存庫](https://github.com/cyclops-ui/templates)中。在我們所有的文件和部落格中，我們在開始使用 Cyclops 時向人們指出了該儲存庫。然而，它似乎並沒有流行起來。**已部署的應用程式數量仍然遠低於 Cyclops 啟動實例的數量。** 一個理論🧑🔬 ------- 親愛的讀者，這是一個有趣的事實：大多數線上讀者在網頁上花費的時間不到 15 秒（[來源](https://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/)）。知道了這一點，我們的大多數用戶是否會瀏覽部落格和文件而錯過對我們模板存儲庫的引用？ 我們想測試這個理論。在我們的上一篇[部落格](https://cyclops-ui.com/blog/2024/03/26/devs-perspective)中，我們做了另一個關於 Cyclops 的教程，展示了它的好處。然而，對於這篇特定的文章，我們建立了一個特殊版本的 Cyclops。這個版本有什麼特別之處？**我們在建立新模組時為模板新增了預設值。**  經過一段時間的統計，結果出來了。 結果📊 --- 透過一個簡單的改變，我們看到用戶行為的**改善**，他們不再在使用我們平台的第一步中迷失方向！然而，它並沒有我們最初希望的那麼大的改進，但它肯定是在正確的方向上。我們問自己如何進一步改進這個問題。我們認為我們做到了🙌 自最新版本 (v0.3.0) 以來，我們重新設計了平台的流程。選擇模板不再是一個**輸入字段**，而是一個**下拉式選單**。 Cyclops 的每個實例都附帶幾個預製模板（儲存在我們的[模板儲存庫](https://github.com/cyclops-ui/templates)中），您可以自由使用和濫用。我們認為這將大大有助於向我們的用戶展示 Cyclops 的可自訂特性。  但 Cyclops 的一個重要部分是它**能夠使用您自己的模板**，我們不准備在這一點上妥協！這就是為什麼我們新增了一個新的`Templates`選項卡，您可以在其中新增範本並管理現有範本。新增後，您的新範本將在下次部署應用程式時顯示在下拉清單中。 學分🦔 --- 我們在本週早些時候發布了 v0.3.0，所以現在說它對我們的用戶有多大影響還為時過早，但我們對此抱有很高的期望！一旦足夠的時間過去，我們可能會分享統計資料，所以請務必關注我們來找出答案！ 如果不提及[PostHog](https://posthog.com/)作為我們正在使用的遙測提供程序，那就太可惜了，因為事實證明它非常有用。由於很難找到願意與您談論產品的人，因此收集統計資料可以讓我們更深入地了解用戶。 如果您是為數不多的閱讀這篇文章超過前面提到的 15 秒的讀者之一，我希望您至少覺得它很有趣 😁 如果您有興趣為我們的專案做出貢獻，無論是透過編碼還是提供回饋，請加入我們的[Discord 社群](https://discord.com/invite/8ErnK3qDb3)並與我們交談！ --- 原文出處：https://dev.to/cyclops-ui/how-telemetry-saved-my-open-source-platform-30f5
## 簡介 本文列出了開發人員可以在 Linux 電腦上安裝的六種出色工具。 🎉 請隨意探索這些工具，並為這些儲存庫加註星標。開源專案需要您的幫助！ 🙏🏻 您準備好成為 **10X Linux 使用者** 了嗎？ 🧠 開玩笑，你不會的，😆 但這些工具絕對可以加快你的日常工作量。 🏃🏻♂️💨  *** **1. [Ngrok](https://ngrok.com/)** > 💡 安全地在線上公開本機伺服器。  Ngrok 可協助您為本機 Web 伺服器建立公用 URL 🌐，以便您可以與團隊成員、客戶或全世界分享您正在進行的工作。 🌍 只需執行一個簡單的命令，Ngrok 就會啟動一條從公共端點到您的電腦的安全隧道。這使您可以在「localhost」上測試網站、應用程式和 API，而無需部署任何內容。 Ngrok 支援 HTTP 和 TCP 流量，因此您幾乎可以透過隧道傳輸任何內容 - Web 伺服器，甚至間接資料庫。它還提供有用的功能，例如自訂子網域和重播/檢查流量。 Ngrok 在以下主要領域提供協助： - 暫時分享一個僅在您的開發機器上執行的網站🖥️。 <br/> - 開發任何使用 webhook 的服務 🪝。 <br/> - 透過檢查網路流量來除錯 🧑💻 網路服務。 > ✨ 我不常使用這個工具，但我記得幾年前我第一次使用這個工具是為了向我的朋友展示我在本地建立的網站。 https://github.com/inconshreveable/ngrok 🌟 GitHub 上的 ngrok *** **2. [fzf](https://github.com/junegunn/fzf)** > 💡 命令列模糊查找器。  對於那些花費大量時間在終端工作的人來說，Fzf 是一個有用的工具🖥️。它可作為模糊查找器，可讓您快速搜尋並過濾檔案、命令歷史記錄、git 提交等資料清單。 這是它的工作原理。當您執行“fzf”命令時，它會在您鍵入時立即過濾下面的列表，以僅顯示匹配的結果。 這是一個可能的用例。 😯 ``` ls -la | fzf ```  這種互動式方法使您可以快速輕鬆地找到所需內容，即使在長列表中也是如此。模糊匹配意味著它將找到部分匹配，因此您不必輸入全名。 🤯 https://github.com/junegunn/fzf 🌟 GitHub 上的 fzf *** **3. [Z](https://github.com/rupa/z)** > 💡 在不知道整個路徑的情況下跳轉目錄。  您是否曾經處理過具有深層巢狀資料夾結構的專案，並且必須不斷使用 cd 命令鍵入長目錄📂路徑？ Z 解決了這個問題。 😉 一旦您安裝並開始使用 Z，它就會追蹤您最常存取的目錄。然後，您可以輸入一個短名稱來立即跳轉 🦘 到該資料夾，而不是輸入完整路徑。  Z 使用**兩個因素**來決定要為您追蹤哪些目錄：您存取資料夾的**頻率**以及您最近**存取該資料夾的方式。 因此，您最常使用的資料夾將獲得最短的名稱。 https://github.com/rupa/z 🌟 GitHub 上的 Z *** **4. [遊俠](https://github.com/ranger/ranger)** > 💡 受 VIM 啟發的控制台檔案管理器。  Ranger 是一個**受 vim 啟發的**檔案管理器👮🏻，帶有控制台介面。它提供了一種易於使用且高效的方式來導航和檢視檔案系統。 Ranger 的一些主要特點是： - 多欄✨顯示 <br/> - 預覽所選檔案/目錄的📂 <br/> - 常見檔案操作（`create/chmod/copy/delete`/...） <br/> - 一次重新命名多個文件 <br/> - 類似 VIM 的控制台和熱鍵 ⌨️  https://github.com/ranger/ranger 🌟 GitHub 上的 Ranger *** **5. [Ncdu](https://www.howtoing.com/ncdu-a-ncurses-based-disk-usage-analyzer-and-tracker/)** > 💡 查看 Linux 系統上使用的檔案和磁碟空間。 Ncdu 是一個有用的命令列工具，可以幫助您有效地管理磁碟空間。 它以直觀方式顯示磁碟機上的空間使用情況，使您可以輕鬆辨識佔用最多空間的大檔案和資料夾。 當您執行 Ncdu 時，它會掃描您的檔案系統並在終端機中顯示互動式列表，向您顯示磁碟機上的每個資料夾以及它們使用了多少空間。您可以導航此清單以深入查看並查看子資料夾的空間使用情況📂。  其簡單的介面使其易於使用，但功能強大，可用於分析磁碟使用情況和最佳化儲存。 如果您遇到磁碟空間💾填滿的問題，Ncdu 可以成為一個方便的工具來辨識罪魁禍首並採取行動。 👮🏻 *** **6。 [Exa](https://github.com/ogham/exa)** - _最好有_ > 💡 `ls` 指令的多彩替換。  > 🚨 Exa 現已不再維護，請使用 [eza](https://github.com/eza-community/eza)。它是 exa 的一個分支，增加了一些功能。但我仍在使用 Exa，而且效果很好。它們幾乎是一樣的。 Exa 是舊的「ls」指令的現代替代品，您在終端機中使用該指令列出檔案和資料夾。它為您提供當前目錄中更豐富多彩、詳細且易於閱讀的文件清單。 當您執行 **exa** 而不是 `ls` 時，您會看到一些不錯的改進。首先，它使用不同的顏色和圖示（啟用或停用）對文件類型進行顏色編碼💬，從而更容易一目了然地在視覺上區分文件。 它還會向您顯示額外的訊息，例如文件權限、所有者、大小等。  https://github.com/ogham/exa 🌟 GitHub 上的 Exa *** > 如果您認為本文中未提及的任何其他方便的工具，請在下面的評論部分中分享。 👇🏻 那麼，這就是本文的內容。非常感謝您的閱讀！ 🎉🫡 https://dev.to/shricodev --- 原文出處：https://dev.to/shricodev/be-a-10x-linux-user-with-these-tools-3g1f
**嘿，編碼員！** 我想分享一些我發現的最酷的網站，它們確實可以節省您的時間並幫助提高您的編碼技能。 每一款都有獨特且免費的東西。 那麼就讓我們從👇開始吧 ## 1. [HTMLrev.com💎](htmlrev.com)  這個網站真的很棒，他們在每個類別（如登陸頁面、部落格、作品集、電子商務和儀表板）上收集了**1000 多個免費HTML 模板**，其中包含大量使用HTML、CSS、 TailwindCSS 和JavaScript 等 必須結帳一次🤓。 ## 2. [uiverse.io✨](uiverse.io)  UIverse 擁有超過 **3000 多個免費 CSS 和 Tailwind 元素**，您可以在專案中使用，例如按鈕、表單、載入器等。 其他開發者也貢獻了它們，因此品質非常好 ⭐。他們甚至有程式碼片段可供複製。 這麼大的圖書館竟然免費！ ## 3.[exercism.io💪](exercism.io)  這對於**練習特定的編碼挑戰**非常有用。他們有超過 3500 個簡短的練習，分成不同的語言。 對解決方案進行編碼後，您可以提交它以獲得自動回饋並與導師配對。 這是學習新技能和更好地進行除錯的有趣😅方式。 ## 4. [quickref.me💭](quickref.me)  需要**您剛接觸的語言**的語法快速參考嗎？這個☝網站非常完美。 他們的備忘錄涵蓋了從 Python 和 JavaScript 到 Vim 和 Markdown 的所有內容。 當您遇到困難時，您可以隨時搜尋它們。真的很方便！ ## 5. [resume.io📝](resume.io)  當您準備好建立您的編碼作品集時，**此網站可協助您建立專業的履歷**。😎 他們為開發人員、設計師等提供精美的客製化模板。您只需輸入您的訊息，它就會產生高品質的 PDF。 非常適合申請實習或工作！ ## 很快再見👋 **感謝您閱讀這篇部落格🙏**，我希望這能為您提供一些新的地方來了解程式設計師朋友！ _如果您發現任何其他有用的網站，請發表評論📩。_ 並且不要忘記加上“💖🦄🔥” https://github.com/taqui-786 關注Github✅ ## 快樂編碼😊 --- 原文出處：https://dev.to/random_ti/5-killer-websites-for-coders-a7
*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 您好，作為開發人員，充分理解基本系統設計概念對於開發可擴展、可靠和高效能的軟體系統至關重要。 [**系統設計**](https://medium.com/javarevisited/7-system-design-problems-to-crack-software-engineering-interviews-in-2023-13a518467c3e)涉及設計軟體系統的體系結構和元件，以滿足特定要求並實現所需的性能特徵。 隨著技術的快速進步和軟體應用的複雜性不斷增加，掌握系統設計概念對於程式設計師建立高效且有效的系統至關重要。 在上幾篇文章中，我回答了流行的系統設計問題，例如[API 網關與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)以及[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)，今天，我們將看看每個程式設計師都應該學習的 10 個關鍵系統設計概念。 這些概念為設計能夠處理大規模資料、容納並髮用戶並提供最佳效能的軟體系統奠定了堅實的基礎。 無論您是初學者還是經驗豐富的開發人員，了解這些系統設計概念都將使您能夠建立強大且可擴展的軟體系統，以滿足現代應用程式的需求。那麼，讓我們深入探討這些基本的系統設計原則吧！ 順便說一句，如果您正在準備系統設計面試並想深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 以下是每個程式設計師都應該考慮學習的 10 個重要的系統設計概念： 1. **可擴展性** 2. **可用性** 3. **可靠性** 4. **容錯能力** 5. **快取策略** 6. **負載平衡** 7. **安全** 8. **可擴展的資料管理** 9. **設計模式** 10. **效能最佳化** 理解和應用這些系統設計概念可以幫助程式設計師和開發人員建立強大的、可擴展的、高效能的軟體系統，以滿足現代應用程式和使用者的需求。 現在，讓我們深入研究它們中的每一個並了解它們是什麼以及如何在您的應用程式中實現它們。 ### 1. 可擴展性 可擴展性是指系統或應用程式處理不斷增加的工作負載或使用者而不顯著降低效能或功能的能力。 它是系統設計中的一個重要概念，因為它允許系統成長並適應不斷變化的需求，**例如增加的資料量、使用者流量或處理需求，**而不會遇到效能瓶頸或限制。 在現代運算環境中，系統需要處理大量且不斷成長的資料和用戶，可擴展性至關重要。例如，流行的網站、行動應用程式和基於雲端的服務需要能夠同時處理數百萬甚至數十億個請求，而分散式資料庫和大資料平台需要擴展以處理 PB 或 EB 的資料。 對於需要適應尖峰負載的系統來說，可擴展性也很重要，例如假期期間的線上購物或因病毒事件導致的用戶活動突然激增。 > 可擴展性主要有兩種：**垂直可擴展性和水平可擴展性**。垂直可擴展性涉及向單一伺服器或節點加入更多資源（例如 CPU、記憶體或儲存）以處理增加的工作負載。另一方面，水平可擴展性涉及向系統加入更多伺服器或節點以分配工作負載並處理增加的需求。 水平可擴展性通常透過[負載平衡](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、分區和分散式處理等技術來實現。 實現可擴展性需要仔細的系統設計、架構和實作。它涉及設計能夠有效處理不斷增加的工作負載、有效利用資源、最大限度地減少依賴性以及跨多個節點或伺服器分佈處理的系統。 > 快取、非同步處理、平行處理和分散式資料庫等技術通常用於提高可擴展性。測試和效能監控對於確保系統在擴展時繼續保持良好效能也至關重要。 可擴展性是建立強大的高效能係統的重要考慮因素，這些系統可以處理成長並適應隨時間變化的需求。它使系統能夠滿足不斷增長的需求，提供無縫的用戶體驗，並支援業務成長，而不會遇到效能限製或停機。 這是來自[**ByteByteGo**](https://bit.ly/3P3eqMN)的一個很好的圖表，這是準備系統設計面試的好地方，它顯示了[*垂直擴展和水平擴展之間的區別*](https://medium.com/javarevisited/difference-between-horizontal-scalability-vs-vertical-scalability-67455efc91c) [](https://bit.ly/3P3eqMN) --- ### 2. 可用性 可用性是指軟體系統即使在發生故障或中斷時也能保持運作並可供使用者存取的能力。 高可用性是許多系統的關鍵要求，特別是那些任務關鍵型或時間敏感型系統，例如線上服務、電子商務網站、金融系統和通訊網路。 此類系統的停機可能會導致重大的財務損失、聲譽受損和客戶不滿。因此，保證高可用性是系統設計時重點考慮的問題。 可用性通常**使用正常運作時間（衡量系統運作時間的百分比）和停機時間（衡量系統不可用的時間）等指標**來量化。 實現**高可用性涉及設計具有冗餘、容錯和故障轉移機制的系統**，以最大限度地降低因硬體故障、軟體故障或其他意外事件而導致停機的風險。 > 在系統設計中，採用了各種技術和策略來提高可用性，例如負載平衡、叢集、複製、備份和復原、監控和主動維護。 實施這些措施是為了最大限度地減少單點故障、檢測故障並從故障中恢復，並確保系統即使在發生故障或中斷時也能保持運作。 透過設計具有高可用性的系統，工程師可以確保系統可以長時間存取和執行，從而提高客戶滿意度、減少停機時間並提高業務連續性。 [](https://www.linkedin.com/pulse/top-20-system-design-interview-questions-answers-soma-sharma-g0pqc/) --- ### 3、可靠性 可靠性是指**軟體系統在交付預期結果時的一致性和可靠性**。建立具有可靠元件、錯誤處理機制和備份/復原策略的系統對於確保系統按預期運作並產生準確的結果至關重要。 可靠性是系統設計的關鍵因素，因為它直接影響系統的整體性能和品質。可靠的系統應始終按預期執行，不會出現意外故障、錯誤或中斷。 **關鍵任務應用通常需要高可靠性，**因為系統故障可能會造成嚴重後果，例如在航空、醫療保健、金融和其他安全關鍵領域。 可靠性通常使用各種指標來量化，例如**平均故障間隔時間 (MTBF)** （測量故障之間的平均持續時間）和故障率 (FR)（測量一段時間內故障發生的速率）。 > 可靠性可以透過各種技術和策略來實現，例如冗餘、錯誤檢測和糾正、容錯和穩健設計。 在系統設計中，要實現高可靠性需要仔細考慮各種因素，包括元件品質、系統架構、錯誤處理、容錯機制、監控和維護策略。 透過**設計高可靠性的系統**，工程師可以確保系統始終如一地按預期執行，從而提高客戶滿意度、減少停機時間並提高系統效能和可用性。 --- ### 4. 容錯性 容錯是指系統或元件在故障或故障（例如硬體故障、軟體錯誤或其他不可預見的問題）時繼續正常運作的能力。 容錯系統旨在檢測、隔離故障並從故障中恢復，而不會完全故障或停機。 容錯是系統設計中的重要概念，特別是在分散式系統或需要在具有挑戰性的環境中可靠運作的系統中。 它涉及實現冗餘、錯誤檢測、錯誤糾正和錯誤恢復機制，以確保即使某些元件或子系統發生故障，系統也能繼續運作。 > 有多種技術和策略可以實現容錯，例如**複製**，即在不同位置維護相同資料或服務的多個副本，以便在一個發生故障時，其他副本可以接管；檢查點，定期保存系統狀態，以便在發生故障時，系統可以恢復到先前已知的良好狀態；優雅降級，即係統在故障時可以繼續執行，但功能會減少。 容錯對於確保系統的高可用性、可靠性和彈性至關重要，特別是在系統故障可能造成嚴重後果的關鍵任務應用程式中。 透過在系統設計中納入容錯機制，工程師可以建立強大且可靠的系統，即使在遇到意外故障時也可以繼續運作並提供預期結果。 [](https://bit.ly/3P3eqMN) --- ### 5. 快取策略 快取策略是一種用於優化系統效能的技術，它透過將經常存取的資料或結果儲存在稱為快取的臨時儲存位置中，以便可以快速檢索資料，而無需重新計算或從原始來源取得。 系統設計中常用的快取策略有以下幾種： 1. **完全緩存** 在此策略中，整個資料集或結果都會快取在快取中，提供對所有資料或結果的快速存取。當資料或結果相對較小且可以輕鬆儲存在記憶體或本地快取中時，此策略非常有用。 2. **部分快取** 在此策略中，通常基於使用模式或頻繁存取的資料，僅快取資料或結果的子集。當資料或結果規模很大，或並非所有資料或結果都被頻繁存取，並且快取整個資料集不可行時，此策略很有用。 3. \*\*基於時間的到期時間 在此策略中，資料或結果被快取特定的時間，之後快取被認為是陳舊的，並且資料或結果從原始來源獲取並在快取中更新。當資料或結果相對穩定且不經常變化時，此策略很有用。 4. **LRU（最近最少使用）或 LFU（最不常使用）替換策略** 在這些策略中，最近最少使用或最不頻繁使用的資料或結果被從快取中逐出，以為新資料或結果騰出空間。當快取的儲存容量有限且需要驅逐不常存取的資料以容納新資料時，這些策略非常有用。 5. **直寫式或後寫式緩存** 在這些策略中，資料或結果在更新或插入時寫入快取和原始來源（直寫）或僅寫入快取（後寫）。當系統需要保持快取和原始來源之間的一致性或原始來源無法直接更新時，這些策略就非常有用。 6. **分散式快取** 在此策略中，快取分佈在多個節點或伺服器上，通常使用分散式快取框架或技術。當系統跨多個節點或伺服器分佈或擴展並且需要保持分散式快取的一致性和效能時，此策略就非常有用。 7. **自訂快取** 可以根據系統或應用程式的特定要求和特徵來實施自訂快取策略。這些策略可能涉及上述策略或其他自訂方法的組合，以滿足系統的獨特需求。 選擇*合適的快取策略取決於資料或結果的大小、存取頻率、資料或結果的易變性、儲存容量、一致性要求以及系統的效能目標等多種因素*。仔細考慮和實施快取策略可以顯著提高系統效能、降低資源利用率、提高可擴展性並增強使用者體驗。 [](https://bit.ly/3P3eqMN) --- ### **6.負載平衡** 負載平衡是分散式系統或網路中使用的技術，用於在多個伺服器或資源之間均勻分配傳入的網路流量或工作負載，確保沒有任何單一伺服器或資源因過多的流量或工作負載而不堪負荷。 負載平衡的目的是優化資源利用率，最大化系統可用性，提高系統整體效能和可靠性。在微服務架構中， [*負載平衡和 API 閘道*](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)通常指的是相同的，但事實並非如此，API 閘道可以做更多的事情，如[本文](https://medium.com/javarevisited/what-is-api-gateway-pattern-in-microservices-architecture-what-problem-does-it-solve-ebf75ae84698)所述。 負載平衡可以透過各種演算法或方法來實現，例如： 1. **循環：**傳入請求以輪流方式依序分發到每個伺服器或資源，確保所有伺服器或資源之間的流量平均分配 2. **最少連線：**傳入請求分發到活動連線數最少的伺服器或資源，確保負載最少的伺服器或資源接收新請求。 3. **來源 IP 關聯性：**來自相同客戶端 IP 位址的傳入請求將導向至相同伺服器或資源，確保來自特定用戶端的請求始終由相同伺服器或資源處理。 4. **加權循環：**傳入請求根據分配給每個伺服器或資源的預定義權重進行分配，從而允許根據伺服器或資源容量或功能採用不同的流量分配比率。 5. **自適應負載平衡：**負載平衡演算法根據伺服器或資源健康、效能或其他指標的即時監控，動態調整流量分配，確保最佳的資源利用率和系統效能。 負載平衡可以使用基於硬體的負載平衡器、基於軟體的負載平衡器或基於雲端的負載平衡服務來實現。 它在具有高流量負載或資源密集型工作負載的分散式系統或網路中發揮著至關重要的作用，可以實現資源的高效利用，增強系統的可用性和可靠性，並提供無縫的用戶體驗。 這裡還有一個來自[DesignGuru.io](https://bit.ly/3pMiO8g)的漂亮圖表，這是一個學習面試準備系統設計的優秀網站，它強調了負載平衡器和 API 閘道之間的區別： [](https://bit.ly/3pMiO8g) --- ### **7. 安全** 系統設計中的安全性是指考慮和實施保護系統免受潛在安全威脅、漏洞或攻擊的措施。 它涉及設計和實施具有內建安全功能和實踐的系統，以防止未經授權的存取、資料外洩、資料外洩、惡意軟體攻擊和其他安全風險。 系統設計中的安全性通常涉及以下原則： 1. **身份驗證：**確保使用者或實體經過驗證並根據其身分和憑證被授予適當的存取權限。 2. **授權**：實施存取控制和權限，限制使用者或實體存取未經授權的資源或執行未經授權的操作。 3. **加密**：透過使用加密技術來保護敏感資料，以防止未經授權的存取或資料外洩。 4. **稽核和日誌記錄**：實施機制來追蹤和記錄系統活動和事件，以用於監視、稽核和取證目的。 5. **輸入驗證：**驗證和清理所有輸入資料，以防止常見的安全漏洞，例如 SQL 注入、跨站腳本 (XSS) 和跨站請求偽造 (CSRF) 攻擊。 6. **修補程式和更新**：使用最新的安全性修補程式和更新使系統保持最新狀態，以解決已知的安全漏洞。 7. **深度防禦**：實施多層安全控制，例如防火牆、入侵偵測系統和防毒軟體，以提供針對安全威脅的多層防禦。 8. **最小權限原則**：將使用者或實體的存取權限限製到執行其任務所需的最低限度，減少安全漏洞或攻擊的潛在影響。 9. **安全通訊**：使用安全通訊協定（例如 HTTPS 或 SSL/TLS）來保護傳輸中的資料免於攔截或竊聽。 系統設計中的安全性對於保護資料和資源的完整性、機密性和可用性以及確保系統的整體安全狀況至關重要。應考慮並納入系統的設計、開發和部署階段，以減輕潛在的安全風險並防範安全威脅。 --- ### **8. 可擴展的資料管理** 可擴展的資料管理是指系統或應用程式有效處理不斷增長的資料量而不會出現效能下降或功能遺失的能力。 它涉及設計和實施資料管理實務和技術，這些實務和技術可以處理不斷增加的資料量、使用者負載和處理要求，同時保持可接受的效能和可靠性水準。 可擴展的資料管理通常涉及以下原則： 1. **資料分區：**將大型資料集分割成更小的、可管理的區塊或分區，以將資料分佈在多個儲存或處理資源上。這有助於減少單一資源的負載，並允許並行處理和提高效能。 2. **分散式資料庫系統：**使用分散式資料庫或資料儲存解決方案，可以將資料分佈在多個節點或伺服器上，從而實現水平擴展並提高效能。 3. **資料複製**：跨多個節點或伺服器複製資料，以確保資料可用性和容錯性。這可能涉及資料鏡像、資料分片或資料快取等技術，以提高效能和可靠性。 4. **快取和記憶體中資料儲存：快取**經常存取的資料或將資料儲存在記憶體中，以便更快地檢索和處理，減少對昂貴的磁碟 I/O 操作的需求並提高效能。 5. **索引和查詢最佳化**：使用高效的索引和查詢最佳化技術來加速資料檢索和處理操作，尤其是在大型資料集中。 6. **資料壓縮：**實施資料壓縮技術以減少儲存佔用空間並提高資料傳輸效率，特別是對於大型資料集。 7. **資料歸檔和清除**：實施資料歸檔和清除實踐以刪除或歸檔舊的或不經常存取的資料，減少儲存和處理開銷並提高效能。 8. **可擴展的資料處理框架：**使用可擴展的資料處理框架，例如 Apache Hadoop、Apache Spark 或 Apache Flink，可以分散式並行方式處理大規模資料處理和分析任務。 9. **雲端的資料管理**：利用雲端的資料管理服務，例如 Amazon S3、Amazon RDS 或 Google Bigtable，提供可擴充和託管的資料儲存和處理功能。 10. **監控和可擴展性測試**：定期監控系統效能並進行可擴展性測試，以辨識和解決效能瓶頸、資源限製或其他可擴展性挑戰，並確保資料管理實踐能夠有效處理不斷增長的資料量和負載。 簡而言之，可擴展的資料管理對於需要處理大量資料、使用者負載和處理要求的現代應用程式和系統至關重要。 它使系統能夠成長並適應不斷變化的需求，而無需犧牲效能或可靠性，從而確保資料管理實踐能夠有效地處理不斷增加的資料量和負載。 --- ### **9. 設計模式** 系統設計中的[設計模式](https://medium.com/javarevisited/top-10-microservice-design-patterns-for-experienced-developers-f4f5f782810e)是指用於解決軟體系統開發過程中遇到的常見設計挑戰或問題的可重複使用解決方案或最佳實踐。 [設計模式](https://medium.com/javarevisited/21-software-design-pattern-interview-questions-and-answers-b7d1774b5dd2)是被廣泛接受和經過驗證的設計和架構軟體系統的方法，它們為設計高效、可維護和可擴展的系統提供了一組明確的指南。 系統設計中的設計模式可分為多種類型，包括： 1. **建立模式：**這些模式專注於物件建立機制，並提供以靈活且可重複使用的方式建立物件的方法。建立模式的範例包括 Singleton、Factory Method、Abstract Factory、Builder 和 Prototype 模式。 2. **結構模式：**這些模式著重於類別和物件的組織以形成更大的結構或系統。結構模式的範例包括適配器、橋、複合、裝飾器和外觀模式。 3. **行為模式：**這些模式著重於系統內物件或元件之間的互動和通訊。行為模式的範例包括觀察者、策略、命令、迭代器和模板方法模式。 4. **架構模式：**這些模式為設計系統的整體架構提供了高階指南和策略。架構模式的範例包括模型-視圖-控制器 (MVC)、模型-視圖-視圖模型 (MVVM)、分層架構、微服務和事件驅動架構模式。 設計模式在系統設計中非常重要，因為它們提供了經過驗證的標準化方法來解決常見的設計挑戰、提高程式碼品質並確保軟體系統的可維護性和可擴展性。 它們促進程式碼的可重複使用性、關注點分離和功能封裝，從而更容易管理複雜的系統並使其適應不斷變化的需求。 透過使用設計模式，開發人員可以利用現有知識和最佳實踐來設計強大而高效的系統，以滿足使用者和利害關係人的需求。 在過去的幾篇文章中，我還討論了常見的微服務設計模式，如[**事件來源**](https://medium.com/javarevisited/what-is-event-sourcing-design-pattern-in-microservices-architecture-how-does-it-work-b38c996d445a)**、** [**CQRS**](https://medium.com/javarevisited/what-is-cqrs-command-and-query-responsibility-segregation-pattern-7b1b38514edd) \*\*、SAGA\*\*、 [**每個微服務的資料庫**](https://medium.com/javarevisited/what-is-database-per-microservices-pattern-what-problem-does-it-solve-60b8c5478825)**、** [**API 閘道**](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [**斷路器**](https://medium.com/javarevisited/what-is-circuit-breaker-design-pattern-in-microservices-java-spring-cloud-netflix-hystrix-example-f285929d7f68)，並分享了[*設計微服務的最佳實踐*](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f)，您也可以查看這些文章以了解有關微服務通訊的更多訊息，包括同步和非同步通訊。 --- ### 10. 性能 雖然我們已經知道效能意味著什麼，但還記得速度慢的筆記型電腦嗎？在系統設計中，效能是指軟體系統處理資料和交付結果的速度、反應能力和效率。 透過高效的演算法、快取、索引和其他技術來優化系統效能對於建立能夠處理大規模資料處理並提供最佳回應時間的系統至關重要。 系統設計中的效能是指軟體系統或應用程式有效率且有效地執行其預期功能或任務，同時滿足效能要求和期望的能力。它涵蓋了系統的回應時間、吞吐量、資源利用率、可擴展性和效率等各個方面。 效能是系統設計中的關鍵因素，因為它直接影響使用者體驗、系統可靠性和整體系統效率。效能不佳的系統可能會導致反應時間慢、吞吐量低、資源利用率高以及系統資源使用效率低下，導致系統效能下降和使用者不滿意。 系統設計人員在設計過程中需要考慮各種與效能相關的因素，例如選擇適當的演算法和資料結構、最佳化程式碼、最大限度地減少不必要的開銷、有效管理系統資源以及確保正確的系統配置和調優。 效能測試和分析技術還可用於辨識和解決效能瓶頸並優化系統效能。 優化系統設計中的效能需要在功能、複雜性和資源利用率之間進行仔細的平衡。它涉及做出明智的設計決策、使用最佳實踐以及持續監控和優化系統性能，以確保系統滿足其性能要求並提供流暢高效的用戶體驗。 ### 結論 這就是面試的基本系統設計概念。理解和掌握這些關鍵的系統設計概念對於程式設計師建立健壯、可擴展且高效的軟體系統至關重要。 這些概念，包括容錯、可靠性、可用性、快取策略、負載平衡、安全性、可擴展資料管理、設計模式和效能，在確保軟體系統滿足其預期目標、最佳執行並提供卓越的效能方面發揮著關鍵作用。 透過對這些系統設計概念的深入理解，您可以做出明智的設計決策，選擇適當的技術和技巧，並優化系統效能。 它還允許您設計具有彈性、可擴展、安全和高效的系統，能夠應對現代軟體開發的挑戰並滿足最終用戶的期望。 順便說一句，如果您正在*準備系統設計面試*並想要深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**DesignGuru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程，如果您需要免費的系統設計課程您也可以查看下面的文章。 --- 原文出處：https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii
在 React 元件中組織程式碼有時經常被忽視，但在處理高階元件 (HoC)、 `forwardRef`和`memo`時，事情可能會變得複雜。如果處理不當，可能會導致程式碼混亂且難以維護。本文旨在透過提出一種更易於管理的方式來建立程式碼並提高工作效率來解決這些問題。 1️⃣ 在 React 元件中管理 HoC、 `forwardRef`和`memo` ------------------------------------------ ### 問題陳述 身為 React 開發人員，我經常在組織元件方面遇到困難，尤其是在合併`memo`和`forwardRef`時。以下的範例取自[React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref) ，示範了這個挑戰： ``` import { forwardRef } from 'react'; interface FancyButtonProps { type: 'submit' | 'button'; children?: React.ReactNode; } export const FancyButton = forwardRef<HTMLButtonElement, FancyButtonProps>((props, ref) => ( <button ref={ref} className="MyClassName" type={props.type}> {props.children} </button> )); ``` 根據我自己的經驗，這段程式碼有幾個問題： - 與「裸」元件相比，由於元件包裝在`forwardRef`中，程式碼顯得混亂。 - 類型並不是真正處於最佳位置。與元件中使用的實際參數相比， `forwardRef`的泛型具有相反的順序： `<HTMLButtonElement, FancyButtonProps>`與`(props, ref)` 。 - 重構變得很麻煩，因為它需要仔細注意方括號和圓括號。假設您不再需要`forwardRef` 。即使有了彩虹括號之類的幫助，處理這些括號和圓括號有時也會令人沮喪，尤其是當元件很大時。 - 如果您想要為元件新增`memo`或某些類型的自訂 HoC，以及其中的某些狀態或函數，該怎麼辦？它會變得更加混亂： ``` import { forwardRef, memo } from 'react'; import { useStyles } from '@/modules/core/styles'; interface FancyButtonProps { type: 'submit' | 'button'; children?: React.ReactNode; } export const FancyButton = memo( forwardRef<HTMLButtonElement, FancyButtonProps>(({ type, children }, ref) => { const classes = useStyles(); return <button ref={ref} className={classes.button} type={props.type}> {children} </button> }) ); ``` ### 建議的解決方案 在厭倦了以這種方式組織元件程式碼時遇到的所有麻煩之後，我最終想出了一種方法來解決這些問題。考慮以下方法： ``` import { forwardRef, memo } from 'react'; import { useStyles } from '@/modules/core/styles'; interface FancyButtonProps { type: 'submit' | 'button'; children?: React.ReactNode; } const FancyButtonBase = ( { type, children }: FancyButtonProps, ref: React.ForwardedRef<HTMLButtonElement> ) => { const classes = useStyles(); return ( <button ref={ref} className={classes.button} type={type}> {children} </button> ); }; export const FancyButton = memo(forwardRef(FancyButtonBase)); ``` 該程式碼是不言自明的。元件的實際程式碼位於名稱帶有`Base`後綴的函陣列件中。然後我們匯出下面的元件，以及所有 HoC、 `memo`和`forwardRef` 。 此解決方案具有以下幾個優點： - 實際的元件程式碼與 HoC、 `memo`和`forwardRef`分離，使其類似於「裸」元件。 - 類型位於它們應該在的位置： `(props: FancyButtonProps, ref: React.ForwardedRef<HTMLButtonElement>` 。 - 如果您需要重構此程式碼，例如不再使用`ref` ，您只需刪除第二個參數和`forwardRef`而無需處理方括號和圓括號。 - 如果需要嵌套的 HoC，加入或修改它們很簡單，並且程式碼仍然可讀： ``` import { forwardRef, memo } from 'react'; import { useStyles } from '@/modules/core/styles'; import { withWhatever } from '@/modules/core/hocs'; interface FancyButtonProps { type: 'submit' | 'button'; children?: React.ReactNode; } const FancyButtonBase = ( { type, children }: FancyButtonProps, ref: React.ForwardedRef<HTMLButtonElement> ) => { const classes = useStyles(); return ( <button ref={ref} className={classes.button} type={type}> {children} </button> ); }; export const FancyButton = memo(forwardRef(withWhatever(FancyButtonBase))); ``` 這種方法為元件加入了一行程式碼，但顯著提高了可讀性和可維護性。即使不使用任何 HoC、 `memo`或`forwardRef` ，我仍然對「裸」元件執行此操作： `export const FancyButton = FancyButtonBase` 。 我們可以更進一步，嘗試使用一個非常有用但不太知名的 VSCode 擴充功能來提高我們的工作效率。 2️⃣ 透過「資料夾模板」擴充功能提高工作效率 ----------------------- 下面的 GIF 演示了[VSCode 中「資料夾模板」擴充功能](https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure)的強大功能（載入 GIF 可能需要一點時間）：  您只需輸入元件的名稱，瞧！ 基本上，您也可以告訴 AI 為您編寫此樣板程式碼，但我發現使用此擴充功能要快得多，而且它是高度可自訂的。 如果您需要我分享我預先定義的 React 特定資料夾範本設置，請在評論中告訴我。 🏁 結論 ---- 在 React 元件中組織程式碼，尤其是在使用`memo` 、 `forwardRef`和 HoC 時，可能會是一項艱鉅的任務。然而，透過將實際的元件程式碼與 HoC 分開並確保正確的類型聲明，您可以建立更清晰、更易於維護的程式碼。此外，使用 VSCode 中的「資料夾範本」擴充功能等工具可以幫助簡化您的開發流程並提高工作效率。 如果你認為這是一篇好文章，你可能會發現我之前的文章也很有用： https://dev.to/itswillt/folder-structs-in-react-projects-3dp8 --- 原文出處：https://dev.to/itswillt/organizing-code-in-a-react-component-4coa
在這篇文章中，我將分享 21 個帶有程式碼片段的 HTML 技巧，可以提高您的編碼技能。 讓我們直接進入正題吧。🚀 建立聯絡連結 ------ 使用 HTML 建立可點擊的電子郵件、電話和簡訊連結： ``` <!-- Email link --> <a href="mailto:[email protected]"> Send Email </a> <!-- Phone call link --> <a href="tel:+1234567890"> Call Us </a> <!-- SMS link --> <a href="sms:+1234567890"> Send SMS </a> ``` 建立可折疊內容 ------- 當您想要在網頁上包含可折疊內容時，可以使用`<details>`和`<summary>`標記。 `<details>`標籤建立隱藏內容的容器，而`<summary>`標籤提供可點擊的標籤來切換該內容的可見性。 ``` <details> <summary>Click to expand</summary> <p>This content can be expanded or collapsed.</p> </details> ``` 利用語意元素 ------ 為您的網站選擇語義元素而不是非語義元素。它們使您的程式碼變得有意義，並改善結構、可存取性和 SEO。  將表單元素分組 ------- 使用`<fieldset>`標記對表單中的相關元素進行分組，並使用`<legend>`標記和`<fieldset>`來定義`<fieldset>`標記的標題。 這對於建立更有效率、更易於存取的表單非常有用。 ``` <form> <fieldset> <legend>Personal details</legend> <label for="firstname">First name:</label> <input type="text" id="firstname" name="firstname" /> <label for="email">Email:</label> <input type="email" id="email" name="email" /> <label for="contact">Contact:</label> <input type="text" id="contact" name="contact" /> <input type="button" value="Submit" /> </fieldset> </form> ``` 增強下拉式選單 ------- 您可以使用`<optgroup>`標籤對`<select>` HTML 標籤中的相關選項進行分組。 當您使用大型下拉式選單或長選項清單時可以使用此功能。 ``` <select> <optgroup label="Fruits"> <option>Apple</option> <option>Banana</option> <option>Mango</option> </optgroup> <optgroup label="Vegetables"> <option>Tomato</option> <option>Broccoli</option> <option>Carrot</option> </optgroup> </select> ``` 改進視訊演示 ------ `poster`屬性可以與`<video>`元素一起使用來顯示圖像，直到使用者播放影片。 ``` <video controls poster="image.png" width="500"> <source src="video.mp4" type="video/mp4 /> </video> ``` 支援多項選擇 ------ 您可以將`multiple`屬性與`<input>`和`<select>`元素一起使用，以允許使用者一次選擇/輸入`multiple`值。 ``` <input type="file" multiple /> <select multiple> <option value="java">Java</option> <option value="javascript">JavaScript</option> <option value="typescript">TypeScript</option> <option value="rust">Rust</option> </select> ``` 將文字顯示為下標和上標 ----------- `<sub>`和`<sup>`元素可用於分別將文字顯示為下標和上標。  建立下載連結 ------ 您可以使用帶有`<a>`元素的`download`屬性來指定當使用者點擊連結時，應下載而不是導航到連結的資源。 ``` <a href="document.pdf" download="document.pdf"> Download PDF </a> ``` 定義相對連結的基本 URL ------------- 您可以使用`<base>`標籤來定義網頁中所有相對 URL 的基本 URL。 當您想要為網頁上的所有相對 URL 建立共用起點時，這會很方便，從而更輕鬆地導航和載入資源。 ``` <head> <base href="https://shefali.dev" target="_blank" /> </head> <body> <a href="/blog">Blogs</a> <a href="/get-in-touch">Contact</a> </body> ``` 控制圖像加載 ------ `<img>`元素的`loading`屬性可用來控制瀏覽器載入圖片的方式。它有三個值：「eager」、「lazy」和「auto」。 ``` <img src="picture.jpg" loading="lazy"> ``` 管理翻譯功能 ------ 您可以使用`translate`屬性來指定元素的內容是否應由瀏覽器的翻譯功能來翻譯。 ``` <p translate="no"> This text should not be translated. </p> ``` 設定最大輸入長度 -------- 透過使用`maxlength`屬性，您可以設定使用者在輸入欄位中輸入的最大字元數。 ``` <input type="text" maxlength="4"> ``` 設定最小輸入長度 -------- 透過使用`minlength`屬性，您可以設定使用者在輸入欄位中輸入的最小字元數。 ``` <input type="text" minlength="3"> ``` 啟用內容編輯 ------ 使用`contenteditable`屬性指定元素的內容是否可編輯。 它允許使用者修改元素內的內容。 ``` <div contenteditable="true"> You can edit this content. </div> ``` 控制拼字檢查 ------ 您可以`spellcheck`屬性與`<input>`元素、內容可編輯元素和`<textarea>`元素結合使用，以啟用或停用瀏覽器的拼字檢查。 ``` <input type="text" spellcheck="true"/> ``` 確保無障礙 ----- `alt`屬性指定圖像無法顯示時的替代文字。 始終包含圖像的描述性 alt 屬性，以提高可存取性和 SEO。 ``` <img src="picture.jpg" alt="Description for the image"> ``` 定義連結的目標行為 --------- 您可以使用`target`屬性來指定您按一下連結資源時將顯示的位置。 ``` <!-- Opens in the same frame --> <a href="https://shefali.dev" target="_self">Open</a> <!-- Opens in a new window or tab --> <a href="https://shefali.dev" target="_blank">Open</a> <!-- Opens in the parent frame --> <a href="https://shefali.dev" target="_parent">Open</a> <!-- Opens in the full body of the window --> <a href="https://shefali.dev" target="_top">Open</a> <!-- Opens in the named frame --> <a href="https://shefali.dev" target="framename">Open</a> ``` 提供附加資訊 ------ `title`屬性可用於在使用者將滑鼠懸停在元素上時提供有關該元素的附加資訊。 ``` <p title="World Health Organization">WHO</p> ``` 接受特定文件類型 -------- 可以使用`accept`屬性指定伺服器接受的檔案類型（僅適用於檔案類型）。這與`<input>`元素一起使用。 ``` <input type="file" accept="image/png, image/jpeg" /> ``` 優化影片載入 ------ 您可以透過使用`<video>`元素的`preload`屬性來加快影片檔案的載入速度，從而實現更流暢的播放。 ``` <video src="video.mp4" preload="auto"> Your browser does not support the video tag. </video> ``` 這就是今天的全部內容。 我希望這有幫助。 謝謝閱讀。 欲了解更多此類內容，[請點擊此處](https://shefali.dev/blog)。 您也可以在[X(Twitter)](https://twitter.com/Shefali__J)上關注我，以獲取有關 Web 開發的每日提示。 繼續編碼！ [](https://www.buymeacoffee.com/devshefali) --- 原文出處：https://dev.to/devshefali/21-html-tips-you-must-know-about-55j7
我的 LinkedIn 網路中的許多新聯絡人向我尋求一些資源來開始他們的資料科學之旅🤓。我不想分享結構化的系列，但從現在開始，我將分享一些令人興奮的資源，這些資源是我在個人技能提升之旅中使用的，以達到今天的水平。 Python是目前最好的程式語言。所以我將從這些開始。 --- 我一直最喜歡資料中的兩個步驟： 🧹🧤🧽𝗗𝗮𝘁𝗮𝗰𝗹𝗲𝗮𝗻𝘀𝗶𝗻𝗴 📊📉📈📊 你呢？您喜歡哪些步驟？ --- 從原始資料到富有洞察力、引人注目的視覺化的過程在資料科學中至關重要，它將複雜的資料集轉化為引人入勝且具有教育意義的敘述。 Python 仍然處於這一轉變的最前沿，提供了一套程式庫來滿足不同的視覺化需求，無論是學術研究、商業智慧還是互動式 Web 應用程式。步入 2024 年，讓我們探索定義資料視覺化未來的頂級 Python 庫。 --- ### 1. Taipy：簡化的動態視覺化 Taipy 以其以使用者為中心的資料視覺化方法脫穎而出，使那些具有最少 Web 開發經驗的人可以存取動態和互動式視覺化。 Taipy 在提供建立豐富、引人入勝的資料故事的直接途徑的同時，也鼓勵資料愛好者透過在 GitHub 儲存庫中加入星星來貢獻和支持其發展。這項措施不僅認可了開發人員的努力，還有助於圍繞這項創新工具建立社群。 [](https://github.com/Avaiga/taipy)   --- ### 2.情節： 該圖書館在製作互動式、出版品質的線上圖表方面處於領先地位。 Plotly 的優點在於它能夠產生多種繪圖類型，包括複雜的 3D 視覺化、地理地圖和互動式時間序列。該庫與網路技術的無縫整合允許在網頁中嵌入視覺化效果，從而增強資料洞察的互動性和可存取性。 [情節Github](https://github.com/plotly)  --- ### 3.Matplotlib： 作為 Python 視覺化工具的鼻祖，Matplotlib 對繪圖的每個元素提供了無與倫比的控制，使其成為建立可發布的圖表和圖形的理想選擇。它是建立許多其他視覺化庫的基礎，因其多功能性和使用足夠命令繪製任何內容的能力而受到稱讚。 [Matplotlib GitHub](https://github.com/matplotlib/matplotlib)  --- ### 4.海博恩： Seaborn 建構於 Matplotlib 之上，並擴展了其功能，使產生複雜的視覺化變得更加容易。它特別適合統計分析，提供高級介面來繪製有吸引力且資訊豐富的統計圖形。 Seaborn 是任何希望透過超越基本繪圖的優雅視覺化來傳達資料見解的人的首選。 [Seaborn GitHub](https://github.com/seaborn)  --- ### 5. 散景： 該庫擅長直接在網頁瀏覽器中建立互動式圖表和儀表板。其強大的介面允許開發複雜的視覺應用、即時儀表板和複雜的資料驅動的互動式繪圖。 Bokeh 旨在吸引那些需要快速輕鬆地建立互動式資料應用程式而無需深入研究 Web 開發的使用者。 [散景 GitHub](https://github.com/bokeh/bokeh)  --- ### 6. 建造者： Gradio 讓 Python 腳本建立互動式 UI 變得異常簡單，降低了共享機器學習模型和資料分析的障礙。它在可視化模型輸出、比較不同模型或即時演示模型功能至關重要的場景中大放異彩，使人工智慧更易於存取和理解。 [由 GitHub 建置](https://github.com/gradio-app/gradio)  --- ### 7.流線型： 對於飛行員，請使用 Streamlit。它使用戶能夠建立高度互動的應用程式以進行資料探索和視覺化，強調速度、簡單性和快速迭代的能力。 [Streamlit GitHub](https://github.com/streamlit)  --- 到 2024 年，這些 Python 程式庫不僅是工具，而且是以以前難以想像的方式理解資料並與資料互動的入口網站。透過為您的專案選擇合適的庫，您可以釋放新的見解，講述引人入勝的資料故事，並與受眾進行更深層的互動。 --- 原文出處：https://dev.to/taipy/7-best-python-visualization-libraries-for-2024-5h9f
介紹： --- 身為 Web 開發人員，掌握 JavaScript 對於建立動態和互動式 Web 體驗至關重要。為了磨練您的技能並隨時了解最新趨勢和工具，這裡有 10 個您應該了解的 JavaScript 網站。 1. MDN Web 文件（Mozilla 開發者網路）： ----------------------------- （https://developer.mozilla.org/） MDN Web Docs 是有關 JavaScript 的綜合文件的首選資源。從初學者教程到高級參考，它涵蓋了您需要了解的有關 JavaScript 的所有內容，包括語法、方法和 API。 2. JavaScript.info： ------------------- （https://javascript.info/） JavaScript.info 提供有關 JavaScript 概念的深入教程和文章，範圍從基礎到高級主題。無論您是學習基礎知識還是探索現代 JavaScript 功能，這個網站都能滿足您的需求。 3. 雄辯的 JavaScript： ------------------ （https://eloquentjavascript.net/） Eloquent JavaScript 是一本線上書籍，以清晰且引人入勝的方式教授 JavaScript 程式設計。透過互動式程式碼範例和練習，它非常適合希望加深對語言理解的初學者和經驗豐富的開發人員。 4.JSFiddle： ----------- （https://jsfiddle.net/） JSFiddle 是一個線上程式碼編輯器，可讓您即時試驗 HTML、CSS 和 JavaScript 程式碼。它是測試想法、除錯程式碼以及與開發人員社區中的其他人共享程式碼片段的寶貴工具。 5. 堆疊溢位： -------- （https://stackoverflow.com/questions/tagged/javascript） Stack Overflow 是一個問答網站，開發人員可以在其中尋求協助、分享知識並就 JavaScript 相關問題進行協作。它是常見編碼問題解決方案的寶庫，也是向經驗豐富的開發人員學習的好地方。 6. 程式碼學院： -------- （https://www.codecademy.com/learn/introduction-to-javascript） Codecademy 提供互動式 JavaScript 課程，引導您了解語言的基礎知識以及非同步程式設計和 API 等更高階的主題。透過動手做專案和測驗，這是按照自己的進度學習 JavaScript 的有效方法。 7. JavaScript 周刊： ----------------- （https://javascriptweekly.com/） JavaScript Weekly 是一份時事通訊，精選 JavaScript 社群的最新新聞、文章和教學。隨時了解塑造 JavaScript 生態系統的最新函式庫、框架和工具。 8. 開發文件： -------- （https://devdocs.io/javascript/） DevDocs 提供對 JavaScript 和其他程式語言文件的快速、離線存取。其簡潔的介面和強大的搜尋功能可讓您輕鬆找到有關 JavaScript API、方法和瀏覽器相容性的資訊。 9.你不懂JS： -------- （https://github.com/getify/You-Dont-Know-JS） You Dont Know JS 是一系列深入探討 JavaScript 內部運作方式的書籍。這些書由 Kyle Simpson 撰寫，探討了範圍、閉包和原型等主題，幫助您掌握 JavaScript 更複雜的概念。 10.JavaScript花園： ---------------- （https://bonsaiden.github.io/JavaScript-Garden/） JavaScript Garden 是有關 JavaScript 陷阱、奇怪之處和最佳實踐的文件集合。它可以幫助開發人員了解語言的棘手方面，並編寫更清晰、更易於維護的程式碼。 結論： --- 透過這 10 個可供您使用的 JavaScript 網站，您將能夠存取豐富的資源、教學和工具來增強您的 JavaScript 技能並成為更熟練的 Web 開發人員。無論您是初學者還是經驗豐富的程式設計師，探索這些網站都將加深您對 JavaScript 的理解，並使您能夠建立更動態和互動的 Web 應用程式。 --- 原文出處：https://dev.to/webdev-mohdamir/10-javascript-sites-every-web-developer-should-know-247b
致所有有抱負的技術領導者！ 🎉 有沒有想過在短短一年內從初級軟體工程師晉升為 CTO 需要什麼？係好安全帶;我們為您準備了 1 年路線圖。 加入我 --- 閱讀[Meta (Facebook)](https://engineeringbolt.com) 、 [⚡Newsletter](https://engineeringbolt.substack.com/subscribe) 、 [Twitter](https://twitter.com/alexrashkov)和[LinkedIn](https://www.linkedin.com/in/alexrashkov)中有關工程文化的更多訊息，以獲取更多職業、領導力和成長建議。 [](https://engineeringbolt.substack.com/subscribe) 讓我們把這個夢想變成現實： **☕ 第 1 個月：咖啡催化劑** 從掌握你的咖啡遊戲開始。這不僅是咖啡因的問題；這是關於建立關係。成為熟記每個團隊成員的咖啡訂單的英雄。 **💻 第 2 個月：馬拉松式程式設計課程** 編碼就像沒有明天一樣。但這裡有一個轉折：對於你修復的每個錯誤，引入一個新功能。這是關於表現出適應性和成長性。 **🌐 第三個月：像神童一樣建立人際網絡** 每天與一個新朋友真誠地聯繫。忘記 LinkedIn 上的獵槍式方法吧；這是關於質量，而不是數量。旨在進行有意義的對話。 **📈 第四個月：擁抱流行語** 使用流行語，但要明智。了解區塊鏈、人工智慧和機器學習的實際含義以及如何將它們應用到您的專案中。 **👔 第 5 個月：穿著得體** 升級你的衣櫃來反映你的野心。穿著得體表明您認真對待自己的角色並為下一步做好準備。 **📅 第 6 個月：掌控會議** 學習有效會議的藝術。提出明確的議程，讓討論步入正軌，並始終跟進。會議應該富有成效，而不是浪費時間。 **🚀 第 7 個月：創新與自動化** 啟動業餘專案來解決您的團隊或公司中的實際問題。自動執行繁瑣的任務。表現出主動性和創新性。 **🗣 第 8 個月：培養領導技能** 領導一個專案。表明您可以激勵並引導團隊實現共同目標。領導力關乎影響力，而不是權威。 **💸 第九個月：財務敏銳度** 了解事物的業務面。您所做的事情如何影響底線？好的CTO既懂技術又懂業務。 **👥 第 10 個月：明智地委派任務** 學會有效授權。這是關於信任您的團隊並專注於策略任務。幫助他人提陞技能。 **🔮 第 11 個月：培養願景** 開始思考未來。哪些技術或趨勢會影響您的產業？貴公司如何保持領先地位？做一個有遠見的人。 **🌟 第 12 個月：謙遜的領導者** 反思你的成長並分享功勞。領導力就是在你攀登的同時提升他人。表現出感激和謙卑。 --- 𝐻𝒶𝓅𝓅𝓎𝒜𝓅𝓇𝒾𝓁𝐹𝑜𝑜𝓁'𝓈𝒟𝒶𝒟！！！ 請記住，夥計們，通往頂峰的旅程可能充滿歡笑、灑出的咖啡和太多的流行語，但有了這個完全嚴肅且萬無一失的計劃，你怎麼能不成功呢？ --- 如果你喜歡這篇文章。 ♻ 轉發以幫助其他人找到它。 💾 儲存這篇文章以供日後參考。 {% 嵌入 https://dev.to/alexr %} --- 原文出處：https://dev.to/alexr/roadmap-from-junior-software-engineer-to-cto-in-1-year-1ked
詢問高級開發人員 --------  我們最近在[Reddit](https://www.reddit.com/r/webdev/comments/112im2m/senior_devs_what_are_the_most_damaging/)上的網頁開發社群向資深開發人員詢問了以下問題： *初級開發人員中最具破壞性的誤解是什麼？* 我們想知道初級開發人員一直犯的錯誤是什麼，以及他們可以做些什麼來改進。令人驚訝的是，我們詢問的高級開發人員給了我們大量的回應——準確地說超過 270 個！ 由於這裡有很多有價值的訊息，我們決定在本文中總結回應。 所以，請閱讀一下，然後在評論中告訴我們您的想法:) 最常見的主題 ------ 回覆中有很多很棒的具體例子，但我們注意到其中有很多共同的主題： - **程式碼品質** - **管理時間和期望** - **有效的溝通和團隊合作** 這些似乎是高階開發人員最常談論的話題。這是有道理的——當你深入問題的核心時，這些事情幾乎可以成就或毀掉*任何*職業。 有趣的是，最受歡迎的回覆是涵蓋所有這些主題的問題。例如，以下是得票最高的回覆：  先質量，後速度 ------- > *高程式碼品質只會間接影響使用者。主要目的是維持較高的開發速度，使所有利害關係人受益* > — **zoechi** \* r/webdev 在「品質」辯論中，實際上存在兩個陣營，其中一些認為品質程式碼是關於： 1. 編寫乾淨、可讀的程式碼，易於維護 2. 編寫按時交付且有效的程式碼。 滿足最後期限、發布功能和編寫最佳程式碼之間的平衡顯然是一個棘手的問題。 有些人認為，業務現實意味著團隊通常沒有時間進行乾淨的程式碼模式。最重要的一點是按時完成任務並讓客戶滿意。 另一方面，許多高級開發人員認為品質程式碼應該是**優先事項**，並且透過將其作為優先事項，您實際上可以提高長期速度，即使無法滿足短期期限。  不過，這種討論可能會分散初級開發人員優先事項的注意力，這些優先事項是作為開發人員成長和改進，而不是帶領團隊取得成功。因此，**我們認為初級開發人員最好先專注於質量，然後再提高交付速度。** --- 順便說一句，我們正在建立[Wasp](https://wasp-lang.dev) ，一個具有超能力的全端 React + NodeJS 框架，成為提升全端 Web 開發人員技能的最佳方法之一。 透過[在 GitHub 上為我們的儲存庫加註星標，](https://www.github.com/wasp-lang/wasp)您將幫助我們繼續使 Web 開發變得更快、更輕鬆，並每週為您帶來這樣的內容。  <https://www.github.com/wasp-lang/wasp> ⭐️ 感謝您的支持🙏 --- 保持謙虛並管理期望 --------- 作為初級開發人員，您不會期望第一次就能把所有事情都做對。 人們假設您會隨著時間的推移學習最佳實踐，但在此過程中您可能會產生不一致的工作、犯錯，甚至可能會破壞一些東西。  但沒關係。 這是過程的一部分。這是預期的。重要的是要記住，這並不反映您作為工程師或個人的價值或價值。 在回覆中，也有許多開發者認識到另一個開發者希望“稍後修復問題”，以此來消除對其工作的批評。他們普遍認為這是一種壞習慣，因為即使開發人員獲得了更多經驗，這也常常困擾著他們。 例如，「程式碼審查不應該針對個人」是高階開發人員的共同觀點。 因此，**能夠優雅地接受批評是一項需要培養的重要技能。** 畢竟，前輩會根據他們自己的經驗指導你做出更好的決定。青少年也在那裡學習。  但是您應該多久尋求一位前輩的建議呢？你應該照他們所說的去做，還是按照某些人在 YouTube 或某些博文中告訴你的那樣*去做 x 的唯一方法*；）？ 你是否應該在每次陷入困境時尋求幫助，還是應該犧牲自己的理智，獨自掙扎數日？ 嗯，這取決於你問誰。但大多數回應都明確表示： 1. 你應該先自己嘗試一下。 2. 使用您可用的資源（ChatGPT、Stack Overflow、Google）嘗試找出答案。 3. 一旦你進展緩慢，就尋求幫助。 4. 如果你有一個可能的解決方案，而且它與高級開發人員的建議不同，這並不意味著它是錯誤的——有時可能有很多可能的方法來實現相同的目標！  保持靈活性並樂於改變 ---------- 沒有什麼比科技世界的變化更快。作為開發人員，您需要不斷學習和適應新技術和趨勢。如果您不喜歡改變，那麼軟體開發人員可能不適合您。  除了事物不斷變化之外，這種工作還會挑戰你的假設。例如，您認為可能是最佳的解決方案結果與您團隊的預期目標或最終產品不相容，您被迫使用「次優」解決方案。 為什麼？因為這可能是最好的方法 考慮到團隊的限制來完成工作。 （ *「抱歉，朋友，我們不能在這個框架上使用您最喜歡的框架。」* ） **保持靈活和開放思想的**開發人員通常在這方面具有優勢。 他們對特定技術或方法不太教條，更願意適應當前的情況。他們通常比同齡人進步得更快，並且能夠出色地完成工作。 --- 如果到目前為止您發現這很有用，**請[在 GitHub 上給我們一顆星](https://github.com/wasp-lang/wasp)以表示您的支持**！它將幫助我們繼續製造更多類似的東西。  <https://www.github.com/wasp-lang/wasp> ⭐️ 感謝您的支持🙏 --- 所以你怎麼看？ ------- 好的，這就是我們的總結。  對於這些意見，你有何看法？高階開發人員的評估是否正確，或者他們是否遺漏了某些內容？ 您最近是否意識到一些您希望早點知道的事情？如果是的話，請在評論中與我們分享！ --- 噓！我和我的同事也在下面的 YouTube 影片中更詳細地討論了結果並權衡了我們的意見。所以檢查一下，如果這是你的事情:) https://www.youtube.com/watch?v=eermNn9VhOA --- 原文出處：https://dev.to/wasp/what-junior-devs-get-wrong-an8
這個週末我開始開發我的第一個 npm 包。我不敢相信我編寫程式碼已經有多久了，我從來沒有費心去建立自己的 npm 包，但我們來了。我使用 Gridsome 和 markdown 建立了我的最新網站，您可以[在此處](https://www.danvega.me/blog/hello-gridsome)閱讀所有相關內容。在 Markdown 文件中，我想要一個簡單的方法來插入 Twitter 狀態並嵌入推文。 我將在以後的部落格文章中告訴您有關 Gridsome 插件的更多訊息，但現在，我想向您展示如何建立您的第一個 npm 包。我在做這件事的過程中學到了一些東西，我想與你們分享。 先決條件 ---- 我假設你至少知道什麼是 Node 和 npm，並且之前寫過 JavaScript。如果您對其中任何一個都不了解，並希望我寫一些有關這些入門的內容，請告訴我。 在我們深入並開始編寫一些程式碼之前，您需要一些東西。 - [Visual Studio Code](https://code.visualstudio.com/)或您最喜歡的編輯器 - [節點和 NPM](https://nodejs.org/en/) - [NPM帳戶](https://www.npmjs.com/) 建立你的 npm 包 ---------- 您要做的第一件事是建立一個新資料夾來保存您的 npm 套件。對於此範例，我將建立一個名為**wrap-with-poo**的新目錄。是的，你沒看錯。 進入該資料夾並輸入以下內容： ``` npm init ``` 這會問你一堆問題，然後建立一個 package.json。如果您還不知道某些問題的答案，請不要擔心，您可以稍後再回來回答。 ``` This utility will walk you through creating a package.json file. It only covers the most common items and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterward to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (wrap-with-poop) version: (0.1.0) 0.1.0 description: This package will take any string you give it and wrap it with the poop emjoi entry point: (index.js) test command: git repository: keywords: node,npm author: Dan Vega license: (ISC) MIT About to write to /Users/vega/dev/npm/wrap-with-poop/package.json: { "name": "wrap-with-poop", "version": "0.1.0", "description": "This package will take any string you give it and wrap it with the poop emjoi", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "node", "npm" ], "author": "Dan Vega", "license": "MIT" } Is this OK? (yes) yes ``` 寫你的插件 ----- 接下來在 Visual Studio Code 中開啟專案並建立 index.js。您建立此文件的原因是您在 package.json 中說過這是您的入口點。在你的index.js中加入以下程式碼： ``` module.exports = (str) => { return `💩${str}💩`; } ``` module.exports 物件允許我們組織一些相關的程式碼，然後將其公開為模組。這意味著當我們完成後，我們可以將此模組匯入到另一個應用程式中。在本例中，我們指派一個箭頭函數，這表示我們公開一個函數，該函數接受一個名為 str 的參數，並傳回用 poo 表情符號包裹的字串。這就是您需要對這個專案做的全部事情。這是一個非常簡單的包，但它將有助於完成一些事情。 npm 本機開發 -------- 現在您已經準備好了我們的包，您需要在另一個專案中測試它。在現實世界中，您應該針對它編寫一些單元測試，但我想將其保存到另一篇文章和截圖中。 接下來，建立一個名為「wrap-with-poo-testing」的新目錄（在套件外部）。您將再次需要執行 npm init 但這次您可以加入 -y 參數來跳過所有問題，這次它們不太重要。 ``` npm init -y Wrote to /Users/vega/dev/npm/wrap-with-poo/package.json: { "name": "wrap-with-poop", "version": "0.1.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } ``` ### NPM安裝 在此專案中建立一個名為 app.js 的新檔案。這是您將使用新的wrap-with-poo 套件的地方。通常，您可以透過執行以下命令來安裝所需的 npm 軟體包。 ``` npm install wrap-with-poo ``` 問題是你還沒有發布你的新插件，所以它不在 npm 中。您需要一種在開發時在本地引用該套件的方法。您可以使用套件的絕對路徑來執行 npm install。 ``` npm install /Users/vega/dev/npm/wrap-with-poo ``` 這會將您的 package.json 更新為如下所示 ``` { "name": "npm", "version": "0.1.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "wrap-with-poo": "file:../wrap-with-poo" } } ``` 如果您需要測試套件中的[安裝前/安裝後掛鉤，](https://docs.npmjs.com/misc/scripts)那麼您將需要使用此方法。如果您不關心本地開發 NPM 專案的最佳方法是使用[npm link](https://docs.npmjs.com/cli/link.html) 。 ### NPM連結 npm link 是一個允許您在專案和依賴項之間建立符號連結的過程。首先，您需要進入目錄wrapper-with-poo並執行以下命令。 ``` npm link ``` 這將獲取您的套件並在 npm 全域資料夾中建立符號連結。 **/Users/vega/.nvm/versions/node/v10.15.0/lib/node\_modules/wrap-with-poo -> /Users/vega/dev/npm/wrap-with-poo** 這意味著您的專案只需一個簡單的步驟即可在任何專案中使用。您需要做的下一件事是進入專案 wrap-with-poo-testing 並執行以下命令。 ``` npm link wrap-with-poo ``` 這將輸出以下內容： \_\_/Users/vega/dev/npm/wrap-with-poo-testing/node\_modules/wrap-with-poo -> /Users/vega/.nvm/versions/node/v10.15.0/lib /node\_modules/wra p-with-poo -> /Users/vega/dev/npm/wrap-with-poo\_\_ 這就是全部內容，無需安裝依賴項。您已準備好開始編寫一些程式碼來使用新插件。打開 app.js 並新增以下程式碼。 ``` const poo = require('wrap-with-poo'); const boring = 'This is a boring string'; const fun = poo(boring); console.log(fun); ``` 並從集成終端執行以下命令 ``` node app.js ``` 你會得到以下輸出 ``` 💩This is a boring string💩 ``` 發布原始碼 ----- 現在我們知道我們的專案正在發揮作用，是時候將其公開供所有人使用了。如果您還沒有這樣做，我會將您的專案加入到 Github 或您喜歡的任何原始程式碼託管位置。 ``` git init git add . git commit -m "Initial commit" git remote add origin https://github.com/cfaddict/wrap-with-poo.git git push -u origin master ``` 現在它位於 Github 上，返回並在 package.json 中加入一個條目，以便每個人都知道在哪裡可以使用主頁鍵找到原始程式碼。 ``` { "name": "wrap-with-poo", "version": "0.1.0", "description": "This package will wrap any string you give it with the poop emoji", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "node", "npm", "poop" ], "author": "Dan Vega", "license": "MIT", "homepage": "https://github.com/cfaddict/wrap-with-poo" } ``` 發布 NPM 包 -------- 現在是時候將我們的專案發佈到 npm 以便任何人都可以使用它了。如果這是您第一次發布包，請在wrap-with-poo 目錄中開啟終端，然後鍵入以下命令。 ``` npm adduser ``` 這將要求您提供 npm 帳戶訊息，例如使用者名稱、密碼和電子郵件。 ``` vega wrap-with-poo (master) $ npm adduser Username: therealdanvega Password: Email: (this IS public) [email protected] Logged in as therealdanvega on https://registry.npmjs.org/. ``` 現在您已準備好發布，但您需要記住一些事情。首先，每個 npm 套件必須有一個唯一的名稱。我會前往[npm](https://www.npmjs.com/)并快速搜尋你的包。我已經發布了套件wrapper-with-poo，所以你的套件需要一個新的唯一名稱。 接下來您需要知道的是您的版本號碼很重要。我從 0.0.1 開始，然後從那裡開始工作。發布特定版本後，您將無法再次發布相同版本。將許多功能建置到一個版本中然後發布是一個好主意。如果你跑 ``` npm version ``` 它會告訴您目前的版本是什麼。 ``` { 'wrap-with-poo': '0.1.0', npm: '6.7.0', ares: '1.15.0', cldr: '33.1', http_parser: '2.8.0', icu: '62.1', modules: '64', napi: '3', nghttp2: '1.34.0', node: '10.15.0', openssl: '1.1.0j', tz: '2018e', unicode: '11.0', uv: '1.23.2', v8: '6.8.275.32-node.45', zlib: '1.2.11' } ``` 如果一切看起來都不錯，您可以透過執行來發布您的新專案 ``` npm publish ``` 這可能需要幾秒鐘，但如果一切順利，你的包包現在應該[在 npm 上](https://www.npmjs.com/settings/therealdanvega/packages)。 恭喜你發布了你的第一個 npm 包！！！ 現在您可以進入任何已有 package.json 的專案並輸入以下內容 ``` npm install wrap-with-poo ``` 就像我們在上面的測試範例中所做的那樣使用它。 文件 -- 我知道有些人說你應該從一開始就建立文件，但我並不總是確定我的程式碼最終會是什麼樣子，所以我通常會等待。在專案的根目錄中建立 README.md 並加入有關專案的一些資訊。 - 你的 npm 包是做什麼的？ - 你為什麼創造它。 - 你如何安裝它？ - 有任何配置選項嗎？ 結論 -- 正如我在本文開頭所說，我不敢相信我這個週末發布了我的第一個 npm 包。直到現在我才真正需要這樣做，但我真的很高興知道它是多麼容易。如果這是您的第一個 npm 軟體包，請在您的軟體包上線後給我留下一些評論或推文！ 快樂編碼！ 和 *本文首先發佈在我的部落格：https://www.danvega.dev/blog 如果您覺得這篇文章有趣，請考慮[訂閱我的電子報](https://www.danvega.dev/signup/)或在[Twitter](http://twitter.com/therealdanvega)上關注我。* --- 原文出處：https://dev.to/therealdanvega/creating-your-first-npm-package-2ehf
--- 標題：針對程式設計師的 50 多個核心 Java 面試問題及其答案 發表：真實 描述：核心 Java 面試常見問題及其答案，幫助初學者和初級開發人員獲得第一份 Java 開發工作。 標籤： java、程式設計、職業 封面圖：https://thepracticaldev.s3.amazonaws.com/i/k63545lbbjmh582tiosr.png --- *揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* Java程式設計師大家好！在過去的幾年裡，我一直在分享許多[Java 面試問題](http://javarevisited.blogspot.sg/2015/10/133-java-interview-questions-answers-from-last-5-years.html)、答案和單獨討論。我的許多讀者要求我將他們聚集在一起，以便他們可以在同一個地方進行面試準備。 這篇文章就是這個結果。 本文包含**50 多個 Java 面試問題和答案**，涵蓋所有重要主題，如核心 Java 基礎知識、 [Java 集合框架](https://javarevisited.blogspot.com/2011/11/collection-interview-questions-answers.html)、 [Java 多執行緒和並發](https://javarevisited.blogspot.com/2014/07/top-50-java-multithreading-interview-questions-answers.html)、 [Java IO](https://javarevisited.blogspot.com/2014/08/socket-programming-networking-interview-questions-answers-Java.html) 、 [JDBC](https://javarevisited.blogspot.com/2012/12/top-10-jdbc-interview-questions-answers.html) 、 [JVM 內部原理](http://www.java67.com/2016/08/10-jvm-options-for-java-production-application.html)、 [編碼問題](http://www.java67.com/2018/06/data-structure-and-algorithm-interview-questions-programmers.html)、 [物件導向程式設計](http://www.java67.com/2015/12/top-30-oops-concept-interview-questions-answers-java.html)等。 這些問題是從我做過的各種 Java 訪談中挑選出來的，我的朋友、讀者和其他人根據自己的經驗分享了一些問題。它們絕不是非常困難。您可能已經在電話或面對面的面試中見過它們。 這些問題對於複習重要的 Java 主題（例如核心 Java 概念、多執行緒、lambda、流和集合）也非常有用。 我還分享了一些*用於進一步學習和提高的有用資源*，例如 Udemy 上的[**完整 Java 大師**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)課程，您可以加入課程來提高和填補 Java 技能方面的空白。 我還寫過有關 Java 面試準備的書籍，例如[《Grokking the Java Interview》](https://gumroad.com/l/QqjGH)和[《Grokking the Spring Boot Interviews》](https://gumroad.com/l/hrUXKY) ，其中我為 Java 開發人員分享了很多問題。 如果你今年正在準備 Java 面試，你也可以**[在 Gumroad 上取得我的 Java + Spring Interview + SQL Bundle](https://javinpaul.gumroad.com/l/sowpfg)** ，使用程式碼**Friends20**還可獲得 20% 的折扣 [](https://javinpaul.gumroad.com/l/sowpfg) 那我們還在等什麼？以下是針對初學者和經驗豐富的 Java 開發人員的面試中最常見的一些 Java 問題的清單。 2 至 3 年經驗豐富的程式設計師的 50 個 Java 面試問題 --------------------------------- 因此，為了不浪費您的時間，這裡列出了一些針對初學者程式設計師的常見[核心 Java 面試問題](http://www.java67.com/2018/03/top-50-core-java-interview-questions.html)。此清單主要針對初學者和經驗不足的開發人員，例如具有 2 到 3 年 Java 經驗的人。 1） **Java如何實現平台無關性？** （[回答](http://www.java67.com/2012/08/how-java-achieves-platform-independence.html)） 提示：字節碼和Java虛擬機 答案 - Java 透過產生字節碼然後在 Java 虛擬機器上執行來實現平台獨立性，該虛擬機將這些字節碼轉換為依賴計劃的機器程式碼。由於不同平台的 JVM 不同，我的意思是，對於 Windows，您有單獨的 JRE（其中包括 JVM），對於 Linux，您將有單獨的 JRE。由於 Java 程式碼不會編譯為本機機器碼，而是編譯為字節碼，這使得它們獨立於平台。 2） **Java中的**`**ClassLoader**`**是什麼**？ （[回答](http://javarevisited.blogspot.sg/2012/12/how-classloader-works-in-java.html#axzz59AWpr6cb)） 提示：JVM 的一部分，用於載入類別的字節碼。你可以自己寫。 答：在Java中，程式碼被封裝在類別中，因為Java是物件導向的程式設計。你的程式是在類別中寫的，為了執行它們，JVM 會載入這些包含你的程式碼的類別。負責載入類別的 JVM 元件稱為類別載入器。它們是存在的三個主要類別載入器：引導類別載入器、擴充類別載入器和應用程式類別載入器。 這是一個很好的圖表，顯示了每個 Java 類別載入器的功能： [](https://javarevisited.blogspot.com/2021/05/java-classloader-interview.html) 3）**寫一個Java程式來檢查一個數字是偶數還是奇數？** （[回答](http://javarevisited.blogspot.sg/2013/04/how-to-check-if-number-is-even-or-odd.htm)） 提示：您可以使用位元運算符，例如位元與，記住，二進位格式中偶數末尾為 0，奇數末尾為 1。 4） **Java中**`**ArrayList**`**和**`**HashSet**`**的差別**？ （[回答](http://www.java67.com/2012/07/difference-between-arraylist-hashset-in-java.html)） 提示： `List`和`Set`之間的所有差異都適用於此，例如排序、重複、隨機搜尋等。請參閱 Richard Warburton 的[**《Java 基礎知識：集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections)以了解有關Java 中的ArrayList、HashSet 和其他重要集合的更多資訊。 [](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections) 5）**什麼是單例中的雙重檢查鎖定？** （[回答](http://www.java67.com/2016/04/why-double-checked-locking-was-broken-before-java5.html)） 提示：兩次檢查實例是否已初始化，第一次不加鎖，第二次加鎖。 **6）如何在Java中建立線程安全的Singleton？ （** [**回答**](http://javarevisited.blogspot.sg/2012/12/how-to-create-thread-safe-singleton-in-java-example.html)**）** 提示：有很多方法，例如使用 Enum 或使用雙重檢查鎖定模式或使用巢狀靜態類別。 **7) Java中Serialized和Externalized的差別？ （** [**回答**](http://www.java67.com/2012/10/difference-between-serializable-vs-externalizable-interface.html)**）** 提示：Externalized 讓您可以更好地控制序列化過程。 **8) Java中何時使用瞬態變數？ （**[**回答**](http://www.java67.com/2012/08/what-is-transient-variable-in-java.html)**）** 提示：當您想要在實作 Serialized 介面的類別中使變數不可序列化時。換句話說，您可以將其用於不想保存其值的變數。請參閱[**完整的 Java MasterClass**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)以了解 Java 中的瞬態變數。 **9) Java中transient變數和volatile變數的差別？ （** [**回答**](http://www.java67.com/2012/11/difference-between-transient-vs-volatile-modifier-variable-java.html)**）** 提示：完全不同，一個用於序列化上下文，另一個用於並發。 **10) Java中什麼時候使用易失性變數？ （**[**回答**](http://www.java67.com/2012/08/what-is-volatile-variable-in-java-when.html)**）** 提示：當你需要指示JVM一個變數可以被多個執行緒修改並提示JVM不緩存其值。 **11）我們可以重寫Java中的私有方法嗎？ （** [**回答**](http://www.java67.com/2013/08/can-we-override-private-method-in-java-inner-class.html)**）** 提示：不，因為它在子類別中不可見，這是在 Java 中重寫方法的主要要求。 12） **Java中**`**Hashtable**`**和**`**HashMap**`**的差別**？ **（** [**回答**](http://javarevisited.blogspot.sg/2010/10/difference-between-hashmap-and.html#axzz53B6SD769)\*\*） \*\*提示：有幾個但最重要的是`Hashtable` ，它是同步的，而`HashMap`不是。與`HashMap`相比，它也是遺留的且緩慢的。 13） **Java中**`**List**`**和**`**Set**`**的差別**？ **（** [**回答**](http://javarevisited.blogspot.sg/2012/04/difference-between-list-and-set-in-java.html#axzz53n9YK0Mb)**）** 提示： `List`是有序的並且允許重複。 `Set`是無序的，不允許有重複的元素。 14） **Java中**`**ArrayList**`**和**`**Vector**`**的區別**（[**答案**](http://www.java67.com/2012/09/arraylist-vs-vector-in-java-interview.html)**）** 提示：很多，但最重要的是， `ArrayList`是非同步的，速度很快，而`Vector`是同步的，速度很慢。它也是像`Hashtable`這樣的遺留類別。 **15)** **Java 中**`**Hashtable**`**和**`**ConcurrentHashMap**`的差異？ **（** [**回答**](http://javarevisited.blogspot.sg/2011/04/difference-between-concurrenthashmap.html#axzz4qw7RoNvw)**）** 提示：更具可擴展性。請參閱 Richard Warburton 的[**《Java 基礎知識：集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections)以了解更多資訊。 16） `**ConcurrentHashMap**`**如何實現可擴充性？ （** [**回答**](http://javarevisited.blogspot.sg/2017/08/top-10-java-concurrenthashmap-interview.html#axzz50U9xyqbo)**）** 提示：透過將映射分為段並僅在寫入操作期間鎖定。 **17) 您將重寫哪兩個方法來將**`**Object**`**用作**`**HashMap**`**中的**`**Key**` **？ （** [**回答**](http://www.java67.com/2013/06/how-get-method-of-hashmap-or-hashtable-works-internally.html)**）** 提示：等於和哈希碼 **18) Java中wait和sleep的差別？ （**[**回答**](http://www.java67.com/2012/08/what-are-difference-between-wait-and.html)**）** \\ 提示： `wait()`方法釋放鎖定或監視器，而 sleep 則不會。 19\) **Java中**`**notify**`**和**`**notifyAll**`**的差別**？ **（** [**回答**](http://www.java67.com/2013/03/difference-between-wait-vs-notify-vs-notifyAll-java-thread.html)**）** 提示： `notify`通知一個隨機執行緒正在等待該鎖，而`notifyAll`通知所有等待監視器的執行緒。如果你確定只有一個執行緒在等待，那麼使用`notify` ，否則`notifyAll`會更好。請參閱 Java Champion Heinz Kabutz 的[**線程基礎迷你課程，**](https://javaspecialists.teachable.com/p/threading-essentials/?product_id=539197&coupon_code=SLACK100?affcode=92815_johrd7r8)以了解有關線程基礎知識的更多資訊。 20\) 為什麼要**在 Java 中重寫 hashcode 以及**`**equals()**` ？ **（** [**回答**](http://javarevisited.blogspot.sg/2015/01/why-override-equals-hashcode-or-tostring-java.html#axzz55oDxm8vv)**）** 提示：遵守 equals 和 hashcode 約定，如果您打算將物件儲存到集合類別（例如`HashMap`或`ArrayList`中，則需要遵守這一點。 21） `**HashMap**`**的負載因子是什麼意思？ （**[**回答**](http://www.java67.com/2017/08/top-10-java-hashmap-interview-questions.html)**）** 提示：觸發`HashMap`調整大小的閾值一般為 0.75，這表示如果 HashMap 已滿 75%，則`HashMap`會自行調整大小。 **22)** **Java 中**`**ArrayList**`**和**`**LinkedList**`之間的差異？ **（** [**回答**](http://www.java67.com/2012/12/difference-between-arraylist-vs-LinkedList-java.html)**）** 提示：與陣列和鍊錶相同，其中一個允許隨機搜尋，而另一種則不允許。在鍊錶上插入和刪除很容易，但在陣列上搜尋很容易。請參閱[**《Java 基礎知識：集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections) **（** Richard Warburton 在 Pluralsight 上的課程），以了解更多關於 Java 中基本集合資料結構的資訊。 **23)** **Java 中**`**CountDownLatch**`**和**`**CyclicBarrier**`之間的差異？ **（** [**回答**](http://www.java67.com/2012/08/difference-between-countdownlatch-and-cyclicbarrier-java.html)**）** 提示：屏障被打破後，您可以重複使用`CyclicBarrier` ，但計數為零後，您無法重複使用`CountDownLatch` 。 24)**在 Java 中什麼時候使用**`**Runnable**`**和**`**Thread**` ？ **（** [**回答**](http://www.java67.com/2016/01/7-differences-between-extends-thread-vs-implements-Runnable-java.html)**）** 提示：總是 **25) Java 中 Enum 類型安全的意義是什麼？ （** [**回答**](http://www.java67.com/2014/04/what-java-developer-should-know-about-Enumeration-type-in-Java.html)**）** 提示：這表示您不能將不同 Enum 類型的實例指派給 Enum 變數。例如，如果您有一個像`DayOfWeek` day 這樣的變數，那麼您無法從`DayOfMonth`枚舉中為其指派值。 **26) Java 中整數的自動裝箱如何運作？ （** [**回答**](http://javarevisited.blogspot.sg/2012/07/auto-boxing-and-unboxing-in-java-be.html#axzz59AWpr6cb)**）** 提示：透過使用Java中的`valueOf()`方法。 **27)** **Java 中**`**PATH**`**和**`**Classpath**`之間的差異？ **（** [**回答**](http://www.java67.com/2012/08/what-is-path-and-classpath-in-java-difference.html)**）** 提示：作業系統使用`PATH` ，而JVM 使用`Classpath`來定位Java 二進位文件，例如JAR 檔案或Class 檔案。請參閱[**Java 基礎知識：核心平台**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-core-platform)，以了解有關`PATH` 、 `Classpath`和其他 Java 環境變數的更多資訊。 [](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-core-platform) **28) Java中方法重載和重寫的差別？ （** [**回答**](http://www.java67.com/2015/08/top-10-method-overloading-overriding-interview-questions-answers-java.html)**）** 提示：重寫發生在子類別中，而重載發生在同一個類別中。此外，覆蓋是執行時活動，而重載是在編譯時解決的。 **29) 如何防止 Java 中的類別被子類化？ （**[**回答**](http://www.java67.com/2017/06/10-points-about-final-modifier-in-java.html)**）** \\ 提示：只需將其建構函數設為私有即可 **30) 你如何限制你的類別被你的客戶使用？ （** [**回答**](http://javarevisited.blogspot.sg/2016/01/why-jpa-entity-or-hibernate-persistence-should-not-be-final-in-java.html)**）** \\ 提示：使建構子私有或從建構子拋出異常 **31)** **Java 中**`**StringBuilder**`**和**`**StringBuffer**`之間的差異？ **（**[**回答**](http://www.java67.com/2016/10/5-difference-between-stringbuffer.html)**）** 提示： `StringBuilder`不同步，而`StringBuffer`同步。 **32) Java 中多態性與繼承的差別？ （** [**回答**](http://www.java67.com/2014/04/difference-between-polymorphism-and-Inheritance-java-oops.html)**）** 提示：繼承允許程式碼重複使用並建構類別之間的關係，這是多態性所需要的，多態性提供動態行為。請參閱\[**物件導向的 Java 程式設計：資料結構及超越專業化**\]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Fjava-object-orientation）在Coursera 上，了解有關OOP 功能的更多資訊。適合初學者的最深入的課程之一。 \[ \]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Fjava-物件導向） 順便說一句，如果您發現 Coursera 課程很有用，因為它們是由世界各地的知名公司和大學建立的，我建議您加入[**Coursera Plus**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fcourseraplus) ，這是Coursera 的訂閱計劃，可以讓您無限制地存取他們最受歡迎的課程、專業、專業憑證和指導專案。它的費用約為 399 美元/年，但它完全物有所值，因為您可以獲得無限的憑證。 **33）我們可以在Java中重寫靜態方法嗎？ （**[**回答**](http://www.java67.com/2012/08/can-we-override-static-method-in-java.html)**）** \\ 提示：否，因為重寫在執行時間解析，而靜態方法呼叫在編譯時解析。 **34) 我們可以存取Java中的私有方法嗎？ （**[**回答**](http://www.java67.com/2012/08/can-we-override-private-method-in-java.html)**）** \\ 提示：可以，在同一個班級內，但不能在班級外 **35) Java中介面和抽象類別的區別？ （** [**回答**](http://www.java67.com/2017/08/difference-between-abstract-class-and-interface-in-java8.html)**）** 提示：從[Java 8](https://dzone.com/articles/5-courses-to-crack-java-certification-ocajp-1z0-80)開始，差異變得模糊。然而，一個Java類別仍然可以實作多個接口，但只能擴展一個類別。 **36) Java 中 DOM 和 SAX 解析器的差別？ （**[**回答**](http://www.java67.com/2012/09/dom-vs-sax-parser-in-java-xml-parsing.html)**）** \\ 提示：DOM 將整個 XML 檔案載入到記憶體中，而 SAX 則不會。它是一個基於事件的解析器，可用於解析大文件，但 DOM 速度很快，對於小文件應該是首選。 **37) Java 中 throw 和 throws 關鍵字的差異？ （**[**回答**](http://www.java67.com/2012/10/difference-between-throw-vs-throws-in.html)**）** \\ 提示： throws 聲明方法在發生錯誤時可以拋出什麼異常，但 throw 關鍵字實際上會拋出異常。請參閱[**Java 基礎知識：異常處理**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-exception-handling)以了解有關 Java 中異常處理的更多資訊。 [](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-exception-handling) **38) Java 中的故障安全迭代器和故障快速迭代器的差異？ （** [**回答**](http://www.java67.com/2015/06/what-is-fail-safe-and-fail-fast-iterator-in-java.html)**）** 提示：故障安全性不會拋出`ConcurrentModificationException` ，而`fail-fast`則在迭代時檢測到底層集合的外部變更時拋出 ConcurrentModificationException。 **39) Java 中迭代器和枚舉的差別？ （** [**回答**](http://javarevisited.blogspot.sg/2010/10/what-is-difference-between-enumeration.html#axzz59AWpr6cb)**）** 提示：迭代器還使您能夠在迭代時刪除元素，而枚舉不允許這樣做。 **40)** **Java 中的**`**IdentityHashMap**`是什麼？ **（** [**回答**](http://www.java67.com/2016/09/difference-between-identityhashmap-weakhashmap-enummap-in-java.html)**）** 提示：一個`Map` ，它使用`==`相等運算子來檢查相等性，而不是`equals()`方法。 **41)** **Java 中的**`**String**`池是什麼？ **（** [**回答**](http://javarevisited.blogspot.sg/2016/07/difference-in-string-pool-between-java6-java7.html#axzz4pGGwsyna)**）** 提示： `String`文字池。請記住，它已從 JDK 7 中的永久代空間移至堆疊。 **42)** Java 中`**Serializable**`**類別可以包含不可序列化欄位嗎？ （** [**回答**](http://javarevisited.blogspot.sg/2016/09/how-to-serialize-object-in-java-serialization-example.html)\*\*） \*\*提示：是的，但您需要將其設定為靜態或瞬態。 **43) Java 中 this 和 super 的差別？ （**[**回答**](http://www.java67.com/2013/06/difference-between-this-and-super-keyword-java.html)**）** 提示：this 指的是目前實例，而 super 指的是超類別的實例。 **44)** **Java 中**`**Comparator**`**和**`**Comparable**`之間的差異？ **（** [**回答**](http://www.java67.com/2013/08/difference-between-comparator-and-comparable-in-java-interface-sorting.html)**）** \\ 提示： `Comparator`定義自訂排序，而`Comparable`定義物件的自然順序，例如`String`字母順序。請參閱[**完整的 Java 大師課程**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)以了解有關 Java 排序的更多資訊。 [](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F) **45)** **Java 中**`**java.util.Date**`**和**`**java.sql.Date**`之間的差異？ **（**[**回答**](http://javarevisited.blogspot.sg/2012/04/difference-between-javautildate-and.html)**）** 提示：前者包含日期和時間，後者僅包含日期部分。 46）為什麼**Java中的**`**Object**`類別**中宣告了wait和notify方法**？ **（**[**回答**](http://javarevisited.blogspot.sg/2012/02/why-wait-notify-and-notifyall-is.html)**）** 提示：因為它們需要僅對物件可用的鎖。 **47）為什麼Java不支援多重繼承？ （** [**回答**](http://javarevisited.blogspot.sg/2011/07/why-multiple-inheritances-are-not.html)**）** 提示：它不支持，因為 C++ 的體驗不好，但對於 Java 8，它在某種意義上是支援的 --- 現在 Java 中不支援`Type`的多重繼承。 **48) Java 中檢查異常和非檢查異常的差異？ （** [**回答**](http://javarevisited.blogspot.sg/2011/12/checked-vs-unchecked-exception-in-java.html)**）** 提示：如果是選取的，則必須使用 catch 區塊處理異常，而如果是未選取的，則由您決定；編譯不會打擾你。 **49) Java 中錯誤和異常的區別？ （**[**回答**](http://www.java67.com/2012/12/difference-between-error-vs-exception.html)**）** 提示：我厭倦了打字，請檢查答案 **50) Java 中的競爭條件和死鎖的差異？ （** [**回答**](http://javarevisited.blogspot.sg/2012/02/what-is-race-condition-in.html#axzz59AbkWuk9)**）** 提示：這兩種錯誤都是並發應用程式中發生的錯誤，一種是由於執行緒調度而發生的，另一種是由於編碼不良而發生的。請參閱[Java 中的多執行緒和平行計算](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fmultithreading-and-parallel-computing-in-java%2F)，以了解有關死鎖、競爭條件和其他多執行緒問題的更多資訊。 其他資源 --- - [Java 面試指南：200+ 面試題目及答案](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-interview-questions-and-answers%2F) - [Spring框架面談指南---200+問答](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fspring-interview-questions-and-answers%2F) - [準備工作面試 作者：John Sonmez](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fdeveloper-job-interviews) - [Markham 曝光的 Java 程式設計面試](http://www.amazon.com/Java-Programming-Interviews-Exposed-Markham/dp/1118722868?tag=javamysqlanta-20) - [破解編碼面試 --- 189 個問題和答案](http://www.amazon.com/Cracking-Coding-Interview-6th-Edition/dp/0984782850/?tag=javamysqlanta-20) - [求職面試的資料結構與演算法分析](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fdata-structure-and-algorithms-analysis%2F) - [過去 5 年 130 多道 Java 面試題](http://javarevisited.blogspot.sg/2015/10/133-java-interview-questions-answers-from-last-5-years.html) - [Grokking the Java Interview - 免費範例 PDF](https://javinpaul.gumroad.com/l/HMOAv) - [深入了解 Spring Boot 面試 - 免費 PDF 範本](https://javinpaul.gumroad.com/l/grokking-springboot-interview-sample) ### 結束語 謝謝，您已經讀到了文章的結尾...祝您程式設計面試順利！這當然不會很容易，但這些問題肯定會對您有所幫助。它還會鼓勵您了解更多。 如果您喜歡這篇文章，請與您的朋友和同事分享，並且不要忘記在 Twitter 上關注[javinpaul](https://twitter.com/javinpaul) ！ > **PS ---**如果您需要一些免費資源來學習 Java，您可以查看[**我最喜歡的免費 Java 課程**](https://medium.com/javarevisited/10-free-courses-to-learn-java-in-2019-22d1f33a3915)清單來開始您的準備。 > > **PSS ---**我沒有提供圖片中分享的面試問題的答案“程式碼中建立了多少個 String 物件？”你能猜出並解釋一下嗎？ 而且，如果你今年正在準備 Java 面試，你還可以**[在 Gumroad 上取得我的 Java + Spring Interview + SQL Bundle](https://javinpaul.gumroad.com/l/sowpfg)** ，使用程式碼**friends20**也可以獲得 20% 的折扣 --- 原文出處：https://dev.to/javinpaul/50-core-java-interview-questions-with-answers-for-programmers-3bc
歡迎來到使用 JavaScript 的命令列介面 (CLI) 工具世界的令人興奮的旅程。 在本指南中，我將引導您建立 CLI 工具，該工具設定基本的專案結構，解釋每個步驟和程式碼片段，以確保您可以遵循。 設定您的開發環境 -------- 在我們深入 CLI 工具的世界之前，讓我們先設定我們的環境： 1. **安裝 Node.js 和 npm：**前往[Node.js 的官方網站](https://nodejs.org/en/)並下載建議的版本。安裝 Node.js 也會安裝 npm，這是您將用來處理 JavaScript 套件的套件管理器。 2. **驗證您的安裝：**開啟終端機並執行以下命令，確保所有內容均已正確安裝： ``` node --version npm --version ``` 查看版本號碼即可確認您已全部設定完畢！ 建立您的 CLI 工具：專案設定自動化 ------------------- 我們的目標是建立一個能夠自動產生基本專案結構的 CLI 工具，從而省去您每次啟動新專案時手動建立資料夾和檔案的麻煩。 ### 第 1 步：啟動您的專案 1. **建立專案目錄：**這是 CLI 工具程式碼所在的位置。 ``` mkdir my-project-setup cd my-project-setup ``` 2. **初始化您的 npm 套件：**此步驟產生`package.json`文件，這對於管理專案的依賴項和配置至關重要。 ``` npm init -y ``` ### 第 2 步：建立 CLI 應用程式 1. **建立主檔案：**將此檔案命名為`index.js` 。它將包含 CLI 工具的邏輯。 2. **合併 Shebang 行：**在`index.js`的開頭新增： ``` #!/usr/bin/env node ``` ``` This line tells your system to use Node.js to execute this script. ``` 3. **實作邏輯：**下面的程式碼建立一個包含目錄和檔案的預定義專案結構： ``` const fs = require('fs'); // File System module to handle file operations // Define the project structure: directories and their respective files const projectStructure = { 'src': ['index.js'], 'public': ['index.html', 'styles.css'], }; // Iterate over the structure, creating directories and files Object.entries(projectStructure).forEach(([dir, files]) => { fs.mkdirSync(dir, { recursive: true }); // Create directories files.forEach(file => fs.writeFileSync(`${dir}/${file}`, '')); // Create files }); console.log("Project structure created successfully!"); ``` ``` Here's what each part of the code does: ``` - **需要 fs 模組：**這是 Node.js 的檔案系統模組，您將使用它來建立目錄和檔案。 - **定義專案結構：**我們指定要建立哪些目錄以及它們應包含哪些檔案。 - **建立目錄和檔案：**使用`fs.mkdirSync`和`fs.writeFileSync` ，腳本根據定義的結建置立每個目錄和檔案。 **4. 讓您的腳本可執行：**修改`package.json`以包含`"bin"`部分。這告訴 npm 哪個指令應該執行你的腳本： ``` `"bin": { ``` ``` "setup-project": "./index.js" ``` ``` }` ``` ### 第 3 步：在本地測試和連結您的工具 在分享您的工具之前，請先對其進行測試： 1. **連結您的工具：**在專案目錄中執行`npm link` 。此命令建立一個符號連結，允許您從終端中的任何位置執行 CLI 工具。 2. **執行您的工具：**只需在終端機的專案目錄中輸入`setup-project`即可。如果一切設定正確，您將看到“專案結構已成功建立！”訊息，以及提到的專案結構。 > 是的，就這樣！ ### 第 4 步：增強功能 您的工具現在可以自動執行專案設置，但仍有改進的空間。考慮新增更多功能或處理使用者輸入來自訂專案結構。探索像`yargs`這樣的套件來解析命令列參數。您可以透過[此處的官方文件了解有關 yargs 的更多資訊。](https://yargs.js.org/) ### 第 5 步：在 npm 上分享您的工具 準備好與世界分享您的 CLI 工具了嗎？就是這樣： 1. **在 npm 上註冊：**如果您沒有帳戶，請在<https://www.npmjs.com/signup>建立帳戶。 2. **透過終端登入：**執行`npm login`並輸入您的 npm 憑證。 3. **發佈您的套件：**在您的專案目錄中，執行`npm publish` 。 恭喜！您的 CLI 工具現已在 npm 上提供，供所有人使用。 > 如果您已經關注我到這裡，請查看我用 Javascript 製作並發佈在 npm 上的第一個 CLI 工具：Naturalshell。 Naturalshell在您的終端中提供AI，現在無需記住shell命令！ > 您可以[在此處查看 npm 套件](https://www.npmjs.com/package/naturalshell)，[在此處查看 github 儲存庫](https://github.com/shreshthgoyal/naturalshell)。 > 請打 ⭐，並隨時加入新功能並與我一起在 naturalshell 上建置！ > 該工具利用人工智慧來解析自然語言，並根據使用者的需求向使用者提供 shell 命令。除了提供命令之外，它還提供簡潔的解釋，確保使用者不僅知道要做什麼，而且了解其工作原理。憑藉直接在工具內編輯命令的便利性以及立即執行命令的能力，NaturalShell 提供了用戶友好、直觀的體驗 包起來 --- 您已經向使用 JavaScript 進行 CLI 工具開發的領域邁出了重要的第一步。透過建立一個簡單但實用的工具，您已經了解了建立、測試和發布 CLI 應用程式的基本知識。不斷嘗試、學習和建構。命令列是一個強大的盟友，現在，由您來指揮。快樂編碼！ > 如果您發現本指南很有幫助並建立了您自己的出色 CLI 工具，我很樂意看到它！請在下面的評論部分分享您的 GitHub 儲存庫。讓我們一起建造吧！ --- 原文出處：https://dev.to/shreshthgoyal/a-guide-to-building-cli-tools-in-javascript-28nn
我們透過與事物互動和理解事物的方式來感知事物。對於基礎架構團隊來說，Kubernetes 是一種擴展和管理應用程式的好方法，但對於前端/後端開發人員來說，它可能看起來很複雜且壓力很大。 Kubernetes 引入了許多概念和術語（部署、服務、pod…），這些概念和術語需要時間來掌握，甚至需要更多時間來掌握。但開發人員有時必須每週（甚至每天）與他們互動。 透過我們的經驗和研究，我們確定了開發人員使用 Kubernetes 的三種最常見的方式。 那麼，開發人員眼中的 Kubernetes 是什麼樣子的呢？ ### 支持我們🙏  在我們開始之前，如果您為我們的[開源儲存庫](https://github.com/cyclops-ui/cyclops)加註星標並幫助我們獲得我們的產品，我們將非常高興 在其他開發者面前的工具 ⭐ 接觸點 --- 根據公司的結構和開發工作流程，開發人員要么根本不與 Kubernetes 交互，因為自動化流程和腳本正在執行此操作，要么通過三個接觸點與 Kubernetes 交互： 1. 他們的應用程式的配置文件 2. 在 K8s 叢集中部署應用程式 3. 監控他們的應用程式 ### 設定檔  設定檔告訴 Kubernetes 如何處理應用程式。它們是聲明性的，這意味著您編寫您想要看到的結果，而不是實現該結果的步驟。 這些文件通常用[YAML](https://yaml.org/)編寫，它們很大且難以閱讀和理解。用 YAML 寫作會帶來挑戰（和[怪癖](https://noyaml.com/)），因為它是開發人員需要學習的額外程式語言。 配置錯誤很難發現和修正，但卻是**一件大事**。即使您對應用程式進行了完美編碼，沒有任何錯誤（假設😅），配置中的錯誤也可能意味著您的應用程式將無法執行。 ### 部署 部署應用程式是在 Kubernetes 叢集中啟動應用程式的過程。執行此操作的本機方法是使用`kubectl` 。 [`kubectl`](https://kubernetes.io/docs/reference/kubectl/)是 Kubernetes 的**命令列工具**。作為命令列工具/介面是我們應該考慮的。高級開發人員應該習慣 CLI，但初級開發人員可能仍然很膽怯。習慣`kubectl`為學習曲線增加了新的一層。 然而，部署需要的不僅僅是了解`kubectl`的可用命令；它還需要了解上下文以及它如何操作 Kubernetes 物件。 ### 監控 現在我們的開發人員已經配置並部署了他們的應用程式，他們就完成了，對吧？嗯，不。 該應用程式可能存在相當多的錯誤和問題，並且他們應該能夠監視它們並在需要時修復它們。 找出 Kubernetes 叢集內的應用程式出了什麼問題**並不簡單**。開發人員需要了解叢集中的物件以及它們如何相互互動。 例如，要取得應用程式的日誌，您需要知道它在 Pod 中執行。該 Pod 位於副本集中，副本集本身位於 Deployment 內。在使用`kubectl`翻閱 K8s 資源時，您必須了解這些關係。 開發者平台 ----- 這只是 Kubernetes 的冰山一角。它的複雜性大大延長了新開發人員的入職時間，並且引入的所有額外步驟都會減慢開發週期。 公司通常有專門的團隊來處理基礎設施和 Kubernetes。當開發人員遇到問題或需要協助時，他們會向這些團隊尋求協助。但你可以想像，在處理像 Kubernetes 這樣複雜的事情時，需要幫助是很常見的事情。 這就是為什麼我們看到開發者平台興起，它減少了開發者和基礎設施團隊之間的摩擦。一個好的平台可以使建立、更新和部署的開發週期盡可能順利和直接。 ### Cyclops - 為開發人員打造的 Kubernetes 平台 [Cyclops](https://github.com/cyclops-ui/cyclops)是一款出色的開源開發工具，它將 Kubernetes 的複雜性抽象化為簡單的圖形使用者介面。我們將其稱為平台，因為您的基礎架構團隊可以自訂 UI 以滿足您的特定需求和願望。 那麼，Cyclops是如何解決上述問題的呢？ 1. 使用 Cyclops，您的開發人員永遠不會直接與設定檔互動。您建立一個模板，然後將其作為表單呈現給開發人員。這避免了學習 YAML 等語言的需要，並且還有一個額外的好處，即允許您向其輸入加入驗證，從而使開發人員更難犯錯。 2. 一旦開發人員在 Cyclops 的幫助下指定了他們的需求，部署他們的應用程式就像單擊按鈕一樣簡單。 3. 現在他們已經部署了應用程式，Cyclops 可以透過其用戶介面輕鬆監控其狀態。應用程式的詳細資訊很容易存取，包括它使用的所有資源（和日誌）。 讓我們看看它的實際效果！ 安裝過程只需兩步，但有一些[先決條件](https://cyclops-ui.com/docs/installation/prerequisites)，最主要的是 Kubernetes 叢集。 因此，一旦叢集啟動並執行，您就可以使用以下命令安裝 Cyclops： ``` kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/blogs-demo/install/cyclops-install.yaml ``` 一旦成功安裝（可能需要一兩分鐘），您可以透過以下方式存取它： ``` kubectl port-forward svc/cyclops-ui 3000:3000 -n cyclops ``` Cyclops 現在應該可以在瀏覽器中存取[http://localhost:3000](http://localhost:3000/) 。 現在，透過點擊`Add Module`按鈕，您將進入以下畫面：  我們為您建立了一個預設模板，但此畫面是高度可自訂的（您可以嘗試[自己的 Helm 圖表](https://cyclops-ui.com/docs/installation/demo/new_module)！）。現在，開發人員無需讀取和編寫 YAML，而是可以透過點擊「儲存」按鈕填寫這些字段，然後他們的應用程式將部署！  下一個畫面顯示了新部署的應用程式的詳細視圖。在這裡，您可以查看所有指定的資源（並輕鬆存取日誌😉）。如果出現任何問題，都可以在這裡看到！ 如果您希望更改配置中的某些內容（例如新增應用程式的更多副本），請按一下`Edit`按鈕。您將被帶到與第一個螢幕類似的螢幕，您可以在其中進行這些更改，甚至不知道您正在下面處理 YAML。 包起來 --- 我們希望本文能很好地展示了開發人員在 Kubernetes 中遇到的一些問題，以及您或您的開發人員下次使用它時可以考慮的潛在解決方案。 如果您遇到 Kubernetes 問題或開發人員用 K8s 相關問題糾纏您，請考慮在我們的 GitHub[儲存庫](https://github.com/cyclops-ui/cyclops)上給我們一個星星來支援我們 ⭐ 您是否遇過 Kubernetes 的這些接觸點？在下面的評論中分享您的經驗！ --- 原文出處：https://dev.to/cyclops-ui/kubernetes-through-the-developers-perspective-38lf
我試過。 我*真的*嘗試過。 2016 年，我畢業並獲得了網頁設計和開發學位，了解 Angular 和一些用戶體驗原則，認為也許我可以在技術領域有所斬獲。 我錯了。 直到兩年後我才得到第一個職位，即便如此，它是 Facebook 的合同，我必須*彌補我的職位頭銜*，我的團隊只是順其自然。不幸的是，我沒有考上合適的大學，也沒有走上實習後直接被全職僱用的正確道路。我聯繫過的任何使用者體驗專家或產品設計師都對我不屑一顧。 （你們都是守門人，不是嗎？） 疫情期間，我參加了一個編碼訓練營，天真地想：“如果我學會如何更好地編碼，我肯定會被認為更有價值！” 我完成了課程，學到了很多。建立了我的投資組合。在 Xitter 上瘋狂地交流。甚至因為在 Twitch 上直播我的想法/編碼過程而讓自己感到尷尬。 我獲得了幾個承包商的職位，這還不錯。但我想要健康保險。我更加努力了。 所有這一切都是在與過動症和重度憂鬱症作鬥爭的同時進行的。 2022 年，我終於獲得了第一份全職工作，擔任開發者關係工程師。在我的前三個月內，我為他們獲得了一份大牌公司的合約。 然而，我也試著解決我的心理健康問題。我被開了 Lexapro 和 Abilify。副作用包括嗜睡，這意味著如果我不工作，我就會睡覺。但如果我不覺得自己想要公里，那麼它就有效，對吧？讓我們在上面撒上 Adderall XR 來解決討厭的過動症。十月，我不得不停止服藥，因為我和我的配偶決定要生孩子。 我想：“我對自己的工作感覺很好！我們很穩定！讓我們開始吧！” 2023年5月，我發現自己懷孕了。我覺得我經歷了懷孕帶來的一些最嚴重的副作用：腦霧、疲憊、噁心——TL;DR：我無法工作。我立即告訴我的經理和人力資源部，認為完全誠實並「掩蓋我的基地」是謹慎的做法，以防我的生產力下降。 嗯，當然是這樣。將一個 10 磅重的米袋綁在腹部，在小辦公椅上旋轉 20 次，並嘗試召開一個小時的會議。 起初，我的同事們（據說）為我感到高興，並表示「支持」。然而，事情慢慢開始改變。我的經理一天比一天變得越來越挑剔。我很難控制自己的症狀並保持板著臉。 您是否曾經歷過有人告訴您他們會在您身邊，但當您需要他們時卻沒有真正出現？這就是發生在我身上的事。 九月，我接受了 PIP。同時，血液檢查結果顯示我或我的孩子身上有腫瘤。或者他有脊椎先天缺陷。我必須立即進行廣泛的測試才能找到問題。 那，我必須努力保住我的工作嗎？ 我真誠地盡力了。最後，我只是把事情結束了，就像一篇我從未發表過的文章，很可能被同事偷走了。 經理可以說：“如果你感覺不舒服，那就休息一天！使用你的 PTO！”任何時候都只是為了掩飾他們的屁股。 現在我告訴你：人力資源和管理階層永遠不會支持你。 ------------------------ 不要被他們的廢話所迷惑。 不要告訴你的同事任何事。 科技環境中沒有什麼是穩定的。在工作場所的任何地方，*沒有人*是你可以與之分享個人生活的人。它瘋了，閉嘴。 零同理心。 科技領域不存在股權。 ---------- ### 需要徹底改革對有需要的人的支持，特別是那些神經分歧的人。尤其是那些選擇成為父母並且是親生父母的人。 但是，為了實現這一目標，這種改變需要是*巨大的*、*漸進的*，並由受社區尊重的人來領導。 那個人顯然不是我。 ### 所以這是我對科技的告別。 ### 我再也不想回答任何男人了。 我不會去不受歡迎的地方。 祝福您在職涯中一切安全、心智健全。 --- 原文出處：https://dev.to/cat/a-goodbye-to-tech-41gh
概述 -- JavaScript 動畫庫已成為開發人員的必備工具，旨在透過迷人的互動式視覺元素來豐富 Web 應用程式。這些庫的發展極大地簡化了動畫過程，使其更易於存取。透過利用適當的函式庫，開發人員能夠製作令人印象深刻的動畫，從而增強網站和應用程式的參與度和使用者體驗。 動畫有可能大幅改變網站的美感和氛圍。當明智地利用它們來增強用戶體驗時，它們就會成為寶貴的資產。動畫在吸引註意力和增加網站停留時間方面特別有效，從而增加流量。 GSAP ------  [GSAP（GreenSock 動畫平台）](https://greensock.com/gsap/)作為領先且強大的 JavaScript 動畫庫脫穎而出，專為速度和效率而設計。它擁有一系列功能，包括基於時間軸的動畫、SVG 支援和緩動功能。 GSAP 提供了各種預先設計的工具和功能，即使是網頁動畫新手也能快速有效地建立複雜的動畫。 GSAP 有助於跨 jQuery、Canvas 和 SVG 建立精美的高效能動畫。它與其他軟體和函式庫相容，例如[PixiPlugin](https://greensock.com/docs/v2/Plugins/PixiPlugin) 、 [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) 、 [EaseJS](https://createjs.com/easeljs)等。 ### 好處 - 輕便快捷 - 廣泛的功能 - 可透過插件擴展 - 適應各種螢幕尺寸 - 支援所有主流瀏覽器 Anime.js -----  [Anime.js](https://animejs.com/)以其簡單、速度和多功能性而聞名。這個緊湊的庫簡化了動畫過程，使開發人員能夠以最少的努力製作出視覺上引人注目的動畫。 Anime.js 支援多種效果，例如縮放、變形和旋轉，為開發人員提供了輕鬆建立複雜時間軸和動畫的工具。 ### 好處 - 直覺的API - 結構緊湊、適應性強 - 豐富的功能集 - 插件就緒架構 - 支援所有主流瀏覽器 Three.js ----  [Three.js](https://threejs.org/)致力於產生 3D 視覺效果，提供一套強大的功能和工具。它建立在[WebGL](https://get.webgl.org/)之上，優化 GPU 使用以實現快速渲染，確保跨裝置（包括資源有限的裝置）的流暢效能。 Three.js 的多功能性允許建立廣泛的 3D 圖形和動畫，從簡單的形狀到複雜的模型。 Popmotion.io ------------  [Popmotion](https://popmotion.io/)在設計中優先考慮簡單性和易用性。它用[TypeScript](https://www.typescriptlang.org/)編寫，與任何接受數位輸入的 API 相容，提供簡單的 API 並支援主要瀏覽器。 Popmotion 的架構為[Framer Motion](https://www.framer.com/motion/)中的動畫提供支持，並且可以透過外掛程式進行擴充。 ### 好處 - 使用者友善的介面 - 可擴充的插件框架 - 響應式設計 - 支援所有主流瀏覽器 反應彈簧 ----  [React-spring](https://www.react-spring.dev/)專為 React 應用程式量身定制，透過其簡單的 API 提供跨所有主要瀏覽器的無縫動畫體驗。它不僅迎合 Web 環境，還支援 React-Native、React-Three-Fiber、React-Konva 和 React-ZDog。它的 TypeScript 基礎有助於輕鬆整合到現有專案中。 ### 好處 - 簡單易懂 - 啟用插件以增加功能 - 跨裝置回應 - 支援所有主流瀏覽器 Vivus -  [Vivus](https://maxwellito.github.io/vivus/)專注於 SVG 動畫，具有易於使用的 API，確保跨所有主要瀏覽器的兼容性。它支援各種動畫樣式，例如延遲、同步或 OneByOne，並允許為每個 SVG 路徑自訂動畫腳本。 ### 好處 - 毫不費力地實施 - 插件擴充性 - 專用的 SVG 動畫功能 - 支援所有主流瀏覽器 Mo.js -----  [Mo.js](https://mojs.github.io/)是一個強大且適應性強的 JavaScript 動畫庫，具有簡單的 API 和瀏覽器支援。它以其高性能動畫和與密度無關的效果而著稱，確保在任何設備上都有出色的視覺品質。 Mo.js 提供了廣泛的動畫建立工具，包括用於動畫控制的播放器、曲線編輯器和用於自訂緩動和編輯的時間軸編輯器。 ### 好處 - 強大而靈活 - 直覺的API - 插件相容 - 專為響應式環境設計 - 支援所有主流瀏覽器 結論 -- 為您的專案選擇正確的動畫庫可能是一項艱鉅的任務。還有許多其他 JavaScript 動畫庫可用，每個庫都具有獨特的特性和功能。 您是否有此處未提及的最喜歡的圖書館？請在下面的評論中分享。我總是渴望探索新工具並擴展我的工具包！ 如果您發現這有幫助並願意給我的專案一顆星以支持，我將不勝感激！ [黏土主題🚀](https://github.com/lilxyzz/clay-theme) --- 原文出處：https://dev.to/lilxyzz/incredible-javascript-animation-libraries-30on
你好！ 幾年前，我分享了我關閉之前的新創公司並將[其開源](https://dev.to/nevodavid/i-turned-my-startup-into-open-source-4efh)的故事。 從那時起，我就在開源通知基礎設施 Novu 工作，實際上我學到了很多關於開源社群的力量。 我在 DEV 上寫了 74 篇帖子，產生了**1,182,911 次瀏覽**🤗 這使得 Novu 成為最受歡迎的開源儲存庫之一**（31k 星）** --- 我開始談論它 ------ 我建立了一份名為[Gitroom](https://gitroom.com/) （以前稱為GitHub20k）的時事通訊，並寫下了我在這一年中所做的一切，從在DEV 上發布實際價值教程到使用有影響力的人推廣存儲庫。 我每月與 30 多名開源維護者交談！幫助他們了解其儲存庫。 但有一件事情我一直沒有解決。 我的戰術壓力很大。不是隨意寫文章。 但我在正確的時間寫了它們，並在不同的 Reddit 和社交媒體管道上推廣它們。 問題是你的發佈在文章發表之前就被卡住了——你無法為任何事情計時，所以你必須在一周內完成。 如果其他人參與發布，事情就會變得很困難；我曾經錯過了很多。因此，我決定建立 Gitroom 平台。 --- Gitroom 平台 ---------- Gitroom 平台是安排開源發布的最佳工具。它是 100% 開源的！在這裡檢查並加註星標。 https://github.com/gitroomhq/gitroom ### 技術堆疊 - NextJS（順風） - NestJS ### 分析 從基礎知識開始，我想知道： - 表現最好的一天是什麼時候（關於星星的數量），然後將其與我所做的發布週進行交叉引用。 - 了解我何時在 GitHub 上流行（收到通知） - 了解 GitHub feed 何時刷新，以便相應地安排我的內容。  ### 啟動頁面 要啟動，您需要： - 將所有管道用於開源，從Reddit等社交媒體到[DEV.to](http://DEV.to?utm_source=nevo.github20k.com&utm_medium=referral&utm_campaign=the-gitroom-platform-is-live)等文章發布 - 請參閱下次刷新的時間表，以便我可以相應地進行計劃。 - 在發布之前加入評論並與我的團隊合作。  ### 時間表頁面 這就是魔法發生的地方： - 您可以同時**交叉發佈**到多個頻道（例如 DEV、Hashnode 和 Medium） - 您可以發佈到更複雜的頻道，例如 Reddit，您必須在其中定義**天賦**和 subreddit。 - 您可以全域編輯所有內容，然後切換到特定頻道。 - 查看它在現有頻道中的外觀預覽。 - 在發布之前**使用之前預定帖子的連結**！您也可以將其用作規範連結！  社區的未來！ --- 這是 Gitroom 的第一個版本，主要用於規劃您的發布。**這是您應該期待的：** - 交換或購買其他社區成員和影響者的帖子！**是的**！有影響力的人將為您建立帖子，它們將出現在時間軸上。什麼是最好的事？他們只有在貼文發布後才會獲得報酬（良好的激勵措施） - 成為 OSS 朋友的一部分，這是一個列出系統中所有開源公司的 API -**非常適合 SEO。** - 加入推薦並與其他開源朋友一起**“使用”** ！ 並且： - **從Notion等其他平台匯入**——我所有的部落格文章都是我自己在Notion上寫的，但每次複製時，我都需要手動上傳所有圖片。 - 有更多可供安排的頻道，例如 Discord 和 Mastodon。 - 自動交叉發布（如果你不想使用 Gitroom 調度程式） - 媒體生成器，例如您擁有的星星數量。 --- 幫幫我！ 🤗 這是一個新專案，100% 開源（同類中的第一個！） 你能給我的任何星星都會幫助我更成長❤️ https://github.com/gitroomhq/gitroom 在這裡加註星標❤️ --- 原文出處：https://dev.to/github20k/my-new-open-source-repository-to-schedule-all-your-content-2f2a
我整理了一系列一流的電子書來增強您的網頁開發學習之旅，這肯定會讓您受益匪淺；即使您是一位經驗豐富的開發人員，仍然有一些您不知道的東西。 那麼，事不宜遲，讓我們開始吧！ --- 🤔 小知識 ----- **世界上第一個網站**由*Tim Berners-Lee*在*1991 年*建立，致力於萬維網計畫本身。 它提供了有關網路基本功能以及如何建立網頁的資訊。 有趣的是，該網站的 URL 是**“http://info.cern.ch”** ，並且作為網路早期的*歷史文物*仍然存在。 --- 1️⃣ CSS 的魔力 ----------- 本電子書中的內容適合所有級別的開發人員。透過範例程式碼片段了解佈局、盒子模型、定位等。 → https://adamschwartz.co/magic-of-css/  --- 2️⃣ DOM啟示 --------- 《DOM Enlightenment》是一本免費的線上書籍，深入探討 DOM，提供對其工作原理的清晰詳細的理解。 → http://domenlightenment.com  --- 3️⃣ 雄辯的 JavaScript ------------------ JavaScript 程式設計簡介重點在於撰寫真實世界的網站。 → https://eloquentjavascript.net  --- 4️⃣ Pro Git 書籍 -------------- 透過資訊圖表了解有關 Git 的一切。 → https://git-scm.com/book/en/v2  --- 5️⃣ SQLZap ---------- 透過 16 個結構良好的課程和一個程式碼遊樂場來學習完整的 SQL。 → https://sqlzap.com  --- 6️⃣ 反應表達 -------- React Express 是一本免費的電子書/指南，涵蓋了 React 的基礎知識，包括元件、狀態、道具等。 → https://react.express  --- 🙌 總結 ---- 最後問一個問題：**您覺得這個清單有幫助嗎？** 請在下面的評論中告訴我。 如果你喜歡這篇文章，你會喜歡這個： https://dev.to/arjuncodess/7-chrome-extensions-for-web-developers-54ib 另外，*分享*您最喜歡的網頁開發資源來幫助這裡的初學者！ 與我聯絡@ [Linktree](https://linktr.ee/arjuncodess/) 。 快樂編碼！ 🚀 感謝23592！ 🤗 --- 原文出處：https://dev.to/arjuncodess/6-free-ebooks-to-learn-web-development-e01
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
