分享書面知識是掌握特定主題的好方法，也是改善社區中思想組織、溝通和明顯自我推銷的好方法。這種技術和社會文章的製作對於寫作者和閱讀者來說都非常重要，永遠記住：「你今天比那些昨天開始的人知道的更多」。 ## 費曼方法以及為什麼要製作內容 首先，我們需要討論為什麼我們應該分享內容，無論是文字格式（本文的重點）還是任何其他格式。為了開始這個討論，重要的是要了解費曼的方法是什麼，以及它如何幫助我們自信和掌握該學科，從而將學習效果提高 10 倍。 費曼方法是由一位非常重要的物理學家理查德·費曼建立的，目的是開發一種新的學習方法，這個新提議假設了一個核心事實：「如果你不能清楚、簡單地解釋某件事，那麼你就還不算搞懂這件事」 這句話有助於我們思考我們的學習應該如何建置，因為從我們開始考慮教授我們正在學習的內容的那一刻起，我們就更加專注於掌握該學科的基本基礎，並為迫使你學習的疑慮做好準備。另一方面，看起來問題完全不同。 當為此類情況做準備時，明顯的結果是對所研究的主題有極大的信心和掌握。 我特別喜歡這種方法，唯一的問題是，當我們離開學術環境時，很難找到對你現在正在學習的同一學科感興趣的人，要么因為你的學校裡沒有IT人。友誼週期或僅僅因為對特定主題有興趣。 對於這個問題我們有一個非常不可思議的解決方案，叫做「公共學習」！這種做法包括在技術社群線上分享您的學習內容，無論是製作影片、進行直播還是本文的目標：寫作！ 像 dev.to 這樣的平台（您現在正在使用它閱讀：D）旨在使「公共學習」的想法變得越來越簡單，並且更接近那些正在消費的人，因為現在可以製作能夠達到的文章與我們有相同興趣的人可以：學習、回答問題甚至提出改變和正確的想法。難以置信，對吧？ ## 收集想法並激勵自己寫作  靈感過程可能是在線撰寫文章之前最煩人的階段之一，我們經常陷入瘋狂技術的無限循環中以提出令人難以置信的想法，而事實上，解決方案最終非常簡單：接受你的想法並消費它們，盡可能多的內容。 尋找想法並建立自己的語言的最實用方法是閱讀其他人已經就您感興趣的主題發表的文章，無論是程式語言還是特定的 IT 主題等；這種內容消費來自許多不同的來源，例如技術文章、YouTube 影片、科技泡沫推文、Github 討論和許多其他可能的地方。 嗯，我知道這樣說似乎簡化了一些不簡單的事情，我同意你的觀點！不僅僅是閱讀或觀看網路上存在的所有內容才能使我們有能力製作相同的內容，使這些人脫穎而出的最重要技能是**組織到達大腦的想法**。 ### 維護第二個大腦 我們的大腦是一個優秀的資訊吸收機器，實際上是一塊儲存我們周圍所有資訊的海綿。這台機器的一個大問題是，隨著時間的推移，它在組織方面變得很糟糕，這主要是為了節省能源，因為我們不需要一直記住一切，但知道我們可以做什麼來將我們想要的資訊儲存在一個機器中。組織方式？好吧，好吧，年輕的蚱蜢，我們當然需要停止相信我們的大腦！ 維護「第二個大腦」是作家和研究人員中非常著名的做法，它由一個物理或虛擬位置組成，您可以在其中複製您所消耗的小塊內容以及使用您自己的話對該主題進行的觀察。這堆筆記將構成您的“第二個大腦”，並使您能夠快速找到任何內容並參考其作者，而不會忘記任何內容！ 長話短說，消耗盡可能多的內容，將其儲存在可以儲存和搜尋的第二個大腦中，最後挑戰自己寫作！無論是您想學習的主題、您最近學到的特定內容，還是您已經掌握多年的內容。 ## 了解平台並找到自己的語言 了解我們透過撰寫內容要接觸的平台和受眾非常重要，這樣我們就可以過濾我們將如何建立文章的整體結構，對嗎？在*我看來*，[dev.to](https://dev.to) 是一個非常非正式的平台，它重視大量以教程形式呈現的內容，具有對話風格並且開門見山，以此通過這些訊息，我們可以推斷出一些建立文章的方法，以便我們可以用讀者已知的模型來說明我們的想法。 這是否意味著您將製作的所有內容都是簡單、非正式的教學？決不！這只是意味著你可以塑造你的內容來包含這種更非正式、對話和直接的語言，即使所涵蓋的主題非常複雜，這甚至成為簡化複雜性的一個非常有趣的挑戰。 > 簡化複雜問題的能力將伴隨您的餘生，建立類比和範例以促進理解和辨識所提出的問題和建議的解決方案非常重要。 ## 學習 Markdown 和良好格式設定的一般技巧 我們在dev.to 上製作文章的方式是使用一種稱為[Markdown](https://www.markdownguide.org) 的標記語言（與HTML 完全相同），雖然它非常簡單，但重要的是要有一個當我們談論組織並使文字美觀時，我們可以做很多事情，類似於我們如何在 Microsoft Word 中產生複雜的結構，我們應該能夠使用 Markdown 程式碼產生相同的結構。 強調結構良好的教育材料的重要性始終很重要（畢竟，您正在閱讀這篇文章正是因為這個原因，對吧？），當談到卓越和品質時，我不能不推薦 [4noobs](https://github.com/he4rt/4noobs)，它在一個存儲庫中匯集了有關各種IT 主題的多個免費課程和文本格式，對於本文的主題，我建議使用[markdown4noobs](https://github.com/jpaulohe4rt/markdown4noobs )學習 Markdown 標記語言。 ### 文字操作和程式碼區塊的基礎知識 Markdown 讓我們可以使用超級基本和必要的結構來標記文字的各個部分，例如粗體、斜體、突出顯示、標題層級等。下面我們將快速了解如何使用正確的語法執行每個操作。 ``` # Primeiro titulo equivalente a um h1 ## Segundo titulo equivalente a um h2 ### Terceiro titulo equivalente a um h3 #### Quarto titulo equivalente a um h4 `Texto em highlight` **Texto em negrito** *Texto em itálico* ``` Markdown 語言的這些技巧使我們能夠以自己喜歡的方式控制敘述並使閱讀更容易理解，在文本中間使用**粗體**來吸引註意力，使用突出顯示甚至使用突出顯示來明確“技術術語”說明性圖像介紹了段落的要點，同時使文字的整體氛圍更易於閱讀。 另一個值得一提的重要事情是我上面使用的特定區塊，它在編寫技術文章時非常有用，因為它允許更多地突出顯示文字區塊，並且它允許您在編寫程式碼區塊時啟用語法突出顯示，它的使用方式如下： > 免責聲明：由於 markdown 不允許區塊內有區塊，所以我選擇用截圖來展示：  在「反引號」符號之後，我們可以包含語言的名稱（在我的例子中為 ruby），以便 dev.to 可以啟用特定於該程式語言的語法突出顯示。 ### 目錄 如果您的文章超過兩千字邊距或至少有 4 個主要標題，我強烈建議您定義一個「目錄」或「目錄」。目錄用於指導閱讀本文將要介紹的要點。要建立一個目錄，我將在下面示範一些技巧： #### 在 dev.to 平台上，使用無序列表而不是編號列表 Markdown 中的清單使用起來非常簡單，它們有兩種**主要**類型：無序和編號。 ``` - Uma lista - Não - Ordenada 1. Uma lista 2. Numerada 3. Aqui ``` 在 dev.to 中使用編號列表的問題是它們沒有對齊，正如我們在下面的範例中看到的那樣，所以我通常不建議使用它們，我總是嘗試使用無序列表，如果有必要應用一些順序，在手動未排序的列表符號後使用數字。  #### 如何組織標題的連結 假設您已經了解如何在 Markdown 中建立連結（因為您閱讀了 markdown4noobs，對吧？），讓我們學習在標題中指示連結的簡單技巧以及如何建立目錄。 目錄範例如下： ``` ## Table of contents - [What is metaprogramming anyway?](#what-is-metaprogramming-anyway) - [In ruby everything is an object, what does that mean?](#in-ruby-everything-is-an-object-what-does-that-mean) - [But what about rails? How this framework applies that concept for maximum developer experience](#but-what-about-rails-how-this-framework-applies-that-concept-for-maximum-developer-experience) - [How to define methods dynamically](#how-to-define-methods-dynamically) - [Using hooks to detect moments on the instantiation of the class](#using-hooks-to-detect-moments-on-the-instantiation-of-the-class) - [Conclusion](#conclusion) ``` 正如您所看到的，定義連結第二部分的總體思路是在標題旁邊以特定格式包含一個主題標籤“#”，遵循以下規則： - 用連字號「-」取代所有空格 - 將整個標題保留為小寫 就是這樣！帶有重音符號的標題可以保持不變，沒有任何問題，Markdown 理解相同的標準文本，如下所示： ``` - [Um título com muitos acentos e çedilha](#um-título-com-muitos-acentos-e-çedilha) ``` ## 技術文章的基本結構 現在我們對如何標記文字以使其清晰易讀有了一個有趣的想法，讓我們了解文章的結構。需要強調的是，模型並不適用於所有可能的文本類型，其想法是提供一個必須根據上下文進行調整和更改的整體想法。 首先，定義開頭段落以吸引讀者了解您將在整篇文章中剖析的問題或情況非常重要，這樣做很重要，因為第一段將由 dev.to 用於 e-行銷傳播、電子郵件或社交媒體。開頭段落的範例可以在您正在閱讀的同一篇文章或我在下面留下的其他文章中找到：   我們的想法是始終在文本中使用問題和停頓，以便我們能夠實現直接的對話式交流，並始終嘗試以最普遍的方式呈現情況，以便任何閱讀者都非常好奇並願意閱讀。 在第一段演示之後，定義[目錄](#table-of-content) 來引導使用者了解文章的主要標題非常重要，在這方面我個人不建議列出副標題標題旁邊，因為它們使目錄變得非常大，對於閱讀者來說不是很有用，顯然，如果您認為列出字幕非常重要，那麼完全值得包括在內。 轉到文章的正文，我們進入一個非常主觀的領域，因為它在很大程度上取決於所涵蓋的主題以理解其標題和段落的結構。我將假設簡單教程模型中的一篇文章能夠從某個地方開始。 我總是建議使用三個“附屬標題”來指導您的文章並提供靈感以通過更多細節擴展內容。這些衛星標題如下： -「技術或問題簡介」：這段將幫助我們詳細說明文章開頭所說的內容，回答我們為激發好奇心而建立的問題，並更深入地研究將與特定主題一起討論的主題。 - `優點與缺點`：此時我們將明確本文將介紹的解決方案的優點和缺點，無論是架構、程式碼標準、語言、框架等。根據您的主題，此段落的存在可能非常具體，但如果您以教程的形式呈現解決方案，它通常非常有用！ - `結論`：這一點更多的是一種意見，而不是一般規則，但我認為有一個段落將表明閱讀過程的結束是非常重要的，這樣我們就可以留下最終的論點，謝謝，聯繫方式以及任何其他有趣的訊息。 圍繞著這三個主要標題，我們可以用說明性的寫作來發展我們的文章，提供實際的例子或類比，使讀者更容易想像問題和解決方案。同樣重要的是要強調在過於深入地進行類比時要小心，它們非常有用，但是當你濫用它們並且永遠不會帶著明確的解決方案和解釋回到現實世界時，它們可能會成為一劑強心針。 關於文章結構的一般提示是保持閱讀光線的總體感覺，因此強烈建議使用圖像（無論是放鬆的表情包還是更好地說明所要表達的觀點的圖形），因為開發人員.to平台支持更多非正式技術人員的文章，濫用這種更接近的語言是一個非常準確的策略。 ## 如何複習並提升寫作水平  好吧，現在我們已經很好地了解瞭如何建立我們的文章、如何使用 Markdown 保持文章美觀以及如何考慮我們的語言針對特定平台的情況，還缺少什麼嗎？好吧，現在剩下的就是要明白我們並不完美，我們會犯錯誤，因此，我們需要一個好的策略來回顧我們剛剛用我們學到的技術製作的文章。 為了幫助寫作，我強烈建議使用提供即時 Markdown 預覽的編輯器，例如 [VSCode](https://code.visualstudio.com/Docs/languages/markdown) 或社群最喜歡的 [Obsidian](https://obsidian.md)。這篇文章甚至是用黑曜石寫的！ 在複習方面，我們有一些非常有趣的工具可以幫助我們進行寫作的不同方面： - [LanguageTool](https://languagetool.org)：這個工具是我最喜歡的，它可以處理所有拼字更正，最酷的部分是，在這個工具中，您可以提供上下文提示，可以改進句子並更正特定的程式設計術語，例如語言名稱，因為他們的資料庫是超級更新的。 - [Deepl](https://www.deepl.com/translator)：進入人工智慧世界，Deepl 使用深度學習提供令人難以置信的翻譯介面，但不僅如此！有了它，我們可以獲得第二意見，以一種非常簡單的方式重新表述我們的段落，您只需將文本翻譯成英語，然後再次將英語文本翻譯成葡萄牙語；通常在Google翻譯中，這會破壞上下文，但該工具保留了上下文並改進了表達方式，以便您對同一段落有第二個感知。 - [ChatGPT](http://chat.openai.com) 或 [Bard](https://bard.google.com): 好吧，在這裡我承認我沒有太多知識，而且我不使用很多，但是這些介面人工智慧聊天可以幫助我們提出不同的觀點，重新措詞現有的段落，甚至開始寫一個段落。 **重要提示：我需要強調的是，您應該只使用這些工具來獲取想法或幫助改寫您已經編寫的文本，請不要使用人工智慧生成整篇文章** - [社群](https://heartdevs.com)：在 He4rt 開發者社群中，我們嘗試為在 dev.to 平台上撰寫技術文章提供盡可能多的幫助。我們透過提供一個論壇來做到這一點，您可以在文章仍在進行中時發布您的文章，並在發表之前獲得社區的反饋。發表後，我們還為活躍的人做宣傳工作！ **免責聲明：顯然我提到的是 He4rt，因為我們有一個專注於此的專案，但一般的教訓是與整個社區分享您的進展。** ## 結論和致謝 這是我在[100 天的程式碼](https://www.100diasdecodigo.dev) 挑戰之後發布的最後一篇文章，這是一個非常激烈的挑戰，需要大量的學習，我發現了一種新的熱情：寫作和分享知識！我甚至無法感謝 He4rt 社區在這段漫長的旅程中對我 100% 的支持。我希望這篇文章對任何閱讀它的人都有用，並激勵任何人在線上分享知識，以便我們可以建立一個更安全、資訊更豐富的網路。 我還要特別感謝本文的審稿人： - [阿尼巴爾‧索倫](https://github.com/anibalsolon) - [艾莉西亞瑪麗安](https://github.com/m4rri4nne) - [米格爾·S·巴博薩](https://github.com/m1guelsb) - [克林頓·羅查](https://github.com/Clintonrocha98) - [塞繆爾·羅德里格斯](https://github.com/SamucaDev) 願原力與你同在！ 🍒 --- 原文出處：https://dev.to/he4rt/compartilhando-seu-conhecimento-com-o-mundo-como-escrever-artigos-5ghc
要將其作為影片觀看，請查看此 **YouTube**： https://www.youtube.com/watch?v=uEiWbR7wai0 --- 網紅和權威 =========================== 如果說世界上有什麼比任何行銷都更強大的話，那就是影響力。伊隆馬斯克被認為是有史以來最會貼廢文的人之一，但他發布的所有內容仍然引起了大量的迴響。 很多人傾向於相信我，因為我也在 GitHub 領域建立了一些權威。 這就是為什麼影響者是如此強大的管道。他們的權威和追隨者的意圖可以為公司帶來巨大的轉變。 Giskard 購買了[Santiago's](https://twitter.com/svpino?utm_source=nevo.github20k.com&utm_medium=referral&utm_campaign=how-giskard-got-their-first-1-200-starsign=how-giskard-got-their-first-1-200-stars) 服務來推廣他們的套件，並將其數量增加了一倍星星。 雖然星星是很好的指標，但正如你所知，我從有影響力的人那裡得到了很多星星，這些星星不一定會給我帶來合適的受眾，但會讓我在 GitHub 上成為趨勢。像聖地亞哥這樣的影響者是專注於雷射的影響者，他們實際上可以帶來客戶和良好的用戶（有購買力），**通常更少的明星。** 他們向優秀的影響者支付約 **700-1200 美元**。  --- 錯誤的副產品？ ---------------------- Giskard 製作了一個名為 **SafeGPT** 的小產品 - 拼字檢查器。 他們在 [Super human newsletter](https://www.joinsuperhuman.ai/?utm_source=nevo.github20k.com&utm_medium=referral&utm_campaign=how-giskard-got-their-first-1-200-newsstarHacker) 以及[Showhower](https://news.ycombinator.com/show?utm_source=nevo.github20k.com&utm_medium=referral&utm_campaign=how-giskard-got-their-first-1-200-stars) 並獲得**2,000** 1週內註冊🔥 主要問題是 SafeGPT 是面向最終用戶的最終產品 **（不一定是開發人員），** 當他們嘗試將這些使用者轉換為 Giskard 時，他們沒有轉換，因為這是一個不同的市場。 實際上，我認為這並不是失敗。仍有一些方法可以利用非觀眾來幫助您完成不同的事情。 **你可以：** * 取得不同文章/Youtube 的反應 * 獲得一些社會證明（在社群媒體上關注） * 透過獎勵獲得星星。 --- 原文出處：https://dev.to/github20k/how-giskard-got-their-first-1200-stars-b8k
原文出處：https://dev.to/davidepacilio/40-free-html-landing-page-templates-3gfp 這樣你的產品就已經準備好了。您花了幾週的時間尋找要解決的正確問題，幾個月甚至幾年的時間開發出一個出色的解決方案來減輕客戶的痛苦，現在只缺少一件事：您幾乎準備好啟動- 您需要一個登陸頁。 即使您想銷售線上服務、電子書或數位課程，登陸頁面對於幫助您根據特定目標實現預期結果也至關重要，因此值得花一些時間找出您真正需要的東西來把它做好。 不幸的是，建立登陸頁面既困難又耗時：結構、設計、圖像、副本等等。這是極其艱難的。 好訊息是 - 您不必從頭開始設計著陸頁，並且有這麼多**免費著陸頁模板**，您可以立即輕鬆建立一個漂亮的著陸頁，從而節省開發時間您可以投資為您的企業創造正確的資訊. 我花了幾個小時研究並找到最好的免費 HTML 登陸頁面模板，結果，我列出了 **40 個漂亮的模板**，您可以將它們用於多種目的、工具和專案。例如： - 開源專案 - 數位服務、電子書和線上課程 - 時事通訊 - SaaS產品 - 行動應用程式 以下列表中的所有模板都是 100% 免費，由不同團隊和作者精心製作，並使用 HTML5 和 Bootstrap 建立。享受閱讀的樂趣，並隨意將它們用於您想要的任何用途。 ###1。 **Solid**  **[現場示範與下載](https://cruip.com/demos/solid/)** Solid 是一款單頁登陸頁面模板，專為線上工具、SaaS 產品和數位服務而設計。它採用 HTML5 建置，具有現代時尚的深色外觀、明亮的互補調色板、3D 圖標/插圖，並且經過明智的編碼和記錄，因此您不必擔心根據您的特定需求自訂模板，目的。 **附加功能：** - 易於調整的英雄佔位符 - 多功能和多用途的圖像 - 即用型定價選項卡 --- ###2。 **Switch**  **[現場示範及下載](https://cruip.com/demos/switch/)** Switch 是一款免費的 HTML 登陸頁面模板，以高設計標準和回應效能為理念建置。之所以稱為Switch，是因為它配備了頂級英雄切換開關，可讓您輕鬆在深色和淺色佈局之間切換，因此您可以透過展示真正原創的外觀和感覺來給用戶留下深刻印象，靈感來自於一天中變化的天空。 **附加功能：** - 基於向量的多色形狀 - 透視應用程式設計模型 - 行動優先的內容 --- ###3。 **SaaS 應用程式**  **[現場示範及下載](https://grayic.com/preview/?demo=saas-app)** SaaS 應用程式是一個免費的 Bootstrap 4 登陸頁面模板，具有有趣且友善的配色方案。它旨在為多種 SaaS 相關軟體和服務提供服務，如果您需要一套現代的現成人類插圖、現代圖像、定價元件和用於捕獲電子郵件地址的文本表單，那麼特別推薦它。 **附加功能：** - 現代與當代繪畫 - 大量現成的部分 - 專為不同用途和產品設計 --- ###4。 **April**  **[現場示範及下載](https://cruip.com/demos/april/)** April 擁有簡單的佈局和強大的自訂選項，適合每個需要美觀、響應式元件用於其專案或時事通訊服務的人。透過流暢的導航和一組有價值的編碼元素，如果您需要顯示應用程式功能、客戶評價以及頂部英雄部分的真實產品預覽，則該模板可以滿足您的需求。 **附加功能：** - 現代與當代繪畫 - 大量現成的部分 - 專為不同用途和產品設計 --- ###5。 **數位服務**  **[現場演示和下載](https://grayic.com/preview/?demo=digital-service)** 數位服務是一種響應式登陸頁面模板，旨在幫助您快速輕鬆地展示您的行動應用程式或線上狀態。它基於 Bootstrap 4，並附帶大量預先設計的部分，例如砌體推薦、定價表、輸入表單、三列功能部分等等。最後但並非最不重要的一點是，其設計的多功能性使該模板成為支援多個利基市場的完美選擇。 **附加功能：** - 測試應用程式原型的理想選擇 - 優雅且開源的圖像 - 適用於產品和線上服務 --- ###6。 **Venus**  **[現場示範與下載](https://cruip.com/demos/venus/)** Venus 是一個免費的單頁登陸頁面模板，基於預先建置的設計部分和 HTML5。它遵循響應式設計的最新最佳實踐，並且由於存在多個可編輯的行動應用程式佔位符、手工製作的向量插圖、Google 字體、社交媒體圖標和完全可編輯的顏色產品調色板，因此非常容易定制。 **附加功能：** - 頁面恆星動畫 - 靈活的佈局和內容設計 - 在任何裝置上都能完美執行 --- ###7。 **艾莉**  **[現場示範及下載](https://cruip.com/demos/ellie/)** 使用這個深色、明亮且緊湊的免費模板建立漂亮的登陸頁面並開始收集時事通訊訂閱者。有了 Ellie，只需不到 5 個步驟就可以讓您的產品脫穎而出，並且憑藉頂級英雄動畫和像素完美形狀的組合，您將永遠不會讓存取者在再次滾動到正文部分之前跳動。 **附加功能：** - 動態英雄過渡 - 內建示範功能 - 技術和廣泛的調色板 --- ###8。 **軟體**  **[現場示範及下載](https://grayic.com/preview/?demo=software)** 使用Berlin 輕鬆建立自訂且高度適應性的應用程式網站，這是一個免費的Bootstrap 4 登陸頁面模板，專為SaaS 專案建置，並且希望將更多潛在客戶轉化為客戶，並相信精心設計的登陸頁面可以在一個普通的產品和一個公認的國際軟體品牌。 **附加功能：** - 動態隨機產生的內容 - 智慧餐桌選項 - 影片示範部分 --- ###9。 **勞雷爾**  **[現場示範與下載](https://cruip.com/demos/laurel/)** Laurel 是一個基於最新版本 HTML5 的大膽而美麗的登陸模板，它將幫助您美麗而優雅地展示您的行動應用程式。功能方面，此範本附帶了 Sass 檔案、作為建置工具的 NPM 腳本以及 package.json 範例檔案。在設計方面，所有資產都是為了提供無盡而甜蜜的客製化選項而建造的。 **附加功能：** - 記錄良好的程式碼文件 - 即將推出的功能更新 - 完整的利基應用程式模板 --- ###10。 **棱鏡**  **[現場示範](https://webresourcesdepot.com/demo/prism/)** / **[下載](https://webresourcesdepot.com/freebie/prism/)** Prism 是一款輕量級、現代的免費模板，專為使用 Bootstrap 4、CSS、HTML 和 JavaScript 的開源專案而建置。使用者喜歡 Prism，因為它使用起來非常簡單，修改起來非常直觀，並且它涵蓋了任何人都可以從具有此類設計和功能特徵的登陸頁面中期望的大多數元素。 **附加功能：** - SEO專用設計 - 評論良好的程式碼 - 創意一頁版面 --- ###11。 **Web應用程式**  **[現場示範及下載](https://grayic.com/preview/?demo=web-app)** Web 應用程式是建立簡單HTML 登入頁面的最佳方式，可以幫助您吸引使用者使用下一個出色的Web 應用程式或桌面應用程式- 得益於詳細列出的功能部分、功能性幻燈片客戶以及引人入勝的號召性用語，Web 應用程式應用程式可以輕鬆快速地設定一個有吸引力的獨立頁面，以滿足不同的需求、範圍。 **附加功能：** - 有吸引力的按鈕和表格 - 終極 HTML 功能 - 不同的演示版本 --- ###12。 **騎士**  **[現場示範](https://webresourcesdepot.com/demo/knight/)** / **[下載](https://webresourcesdepot.com/freebie/knight/)** 身為黑夜中的勇敢騎士，Knight是一款專為產品登陸頁面設計的深色、現代、優雅的Bootstrap 4登陸頁面模板。它配備了 Feather & Font Awesome 圖示、光滑的滑桿、常見問題清單等福利。 Knight 使用 HTML5、CSS3、jQuery 和 Sass 建置，保證了令人難以置信的響應性能和流暢的自訂選項。 **附加功能：** - 出色的 UI/UX 和資產文件 - 自動調整影像大小 - 免費無限支持 --- ###13。 **開發手冊**  **[現場示範](https://themes.3rdwavemedia.com/demo/devbook/)** / **[下載](https://themes.3rdwavemedia.com/bootstrap-templates/product/devbook-free-bootstrap-4-book-ebook-landing-page-template-for-developers/)** DevBook 是一個免費的 Bootstrap 4 書籍登陸頁面模板，專為想要在線上推廣或銷售書籍/電子書的開發人員和程式設計師而設計。它包含吸引好奇的訪客成為潛在讀者的所有基本元素，並且由於它是完全客製化開發的，因此您可以輕鬆地將其與 Gumroad 等平台集成，它將代表您處理購買和付款。 **附加功能：** - 與現代瀏覽器相容 - 免費書籍模型 - 多個可用許可證 --- ###14。 **有**  **[現場示範](https://inovatik.com/tivo-landing-page/index.html)** / **[下載](https://inovatik.com/tivo-free-saas-app-登陸頁模板.html)** Tivo 是一款使用 HTML5 製作的免費應用程式登陸頁面模板，經過精確建立，可支援建立有吸引力的軟體即服務 (SaaS) 網站和 B2C 應用程式頁面。對於任何尋求簡單下拉導航、文章詳細資訊、視訊框、文字滑桿推薦以及允許製作無限數量的個人和商業專案的易於使用的許可證的人來說，Tivo 是一個智慧解決方案。 **附加功能：** - 功能聯繫表 - 谷歌字體和 Font Awesome - 在每個瀏覽器中經過全面測試 --- ###15。 **光滑**  **[現場示範](https://preview.uideck.com/items/slick/business/index.html)** / **[下載](https://uideck.com/templates/slick-free-引導模板/)** Slick 是一個基於 Bootstrap 4 和 HTML5 的免費原創多用途網頁模板。 Slick 提供卓越的設計技術和最佳的 UI/UX 實踐，可在任何類型的數位裝置（例如桌上型電腦、平板電腦和行動裝置）上提供出色的體驗。它為基於網路的軟體產品和行動應用程式提供了兩種不同的主頁變體。 **附加功能：** - CSS 庫和線條圖標 - 超豐富的排版 - 條紋設計靈感 --- ###16。 **線上課程**  **[現場示範及下載](https://grayic.com/preview/?demo=online-course)** 線上課程是一個免費的 HTML 登陸頁面模板，它為您提供建立業務和透過建立和銷售線上課程創造收入所需的一切。使用線上課程模板，您可以快速設定市場上排名第一的使用者體驗設計課程，並且由於有用元素的巨大變體，您可以支援隨時存取線上課程、視訊課程和複習系統。 **附加功能：** - 功能課程課程 - 常見問題部分 - 多種內容呈現 --- ###17。 **聯盟**  **[現場示範](https://webresourcesdepot.com/demo/union/)** / **[下載](https://webresourcesdepot.com/freebie/union/)** Union 是一個免費的登陸頁面，可以幫助您更快、更輕鬆地建立漂亮的響應式 HTML 網站。 Union 受到數千名滿意用戶的信賴，提供10 多種不同的配色方案、有序的Sass 檔案（用於快速自訂）、有吸引力的圖像，對於尋求具有多個可編輯元件的高效能一頁的創意團隊來說，它是理想的選擇。 **附加功能：** - 有效且手寫的程式碼 - 漂亮流暢的滾動 - 預先整合和功能形式 --- ###18。 **行動應用2.0**  **[現場示範及下載](https://grayic.com/preview/?demo=mobile-app-2-0)** Mobile App 2.0 是一款免費的行動應用模板，專為行動應用程式、新創公司、產品開發公司和特別注重用戶獲取的企業而設計。行動應用程式 2.0 為您提供了詳細記錄的設置，可讓您在 3 分鐘內完成設置並執行，並且不會影響輕鬆頁面佈局的可能性。 **附加功能：** - 基於向量的氣泡形狀 - 帶有畫廊截圖的滑塊 - 不同的演示類型 --- ###19。 **阿特拉斯**  **[現場示範](https://www.lapa.ninja/lab/atlas/)** / **[下載](https://www.lapa.ninja/freebies/atlas/)** Atlas 是一個響應靈敏且高度可自訂的啟動登陸頁面，提供許多出色的功能，例如推廣 SaaS、聯繫我們部分、優雅的英雄、定價標籤、手工製作的圖標和產品功能。借助 Atlas，您只需點擊幾下即可快速建立任何登陸頁面，並且使用 Bootstrap Framework，您還可以匯入自己喜歡的元件。 **附加功能：** - 版面安全可靠 - 最多 15 個文件 - 清新的佈置配色方案 --- ###20。 **簡單的**  **[現場示範](https://www.bootstrapdash.com/demo/simple/)** / **[下載](https://www.bootstrapdash.com/product/simple-landing-page/) ** Simple 是一款乾淨友善的單頁登陸頁面模板，旨在以現代且豐富多彩的外觀為您的用戶留下深刻印象。簡單的登陸頁面具有美觀整潔的設計，是展示您的早期新創公司、線上服務和數位產品的理想選擇。此範本具有創意和獨特的設計、人體插圖、像素完美的圖標以及一組預先建立的元素，可輕鬆呈現主要應用程式功能和優點。 **附加功能：** - 定期更新和改進 - 麻省理工學院許可 - 快速和友好的支持 --- ###21。 **幻影**  **[現場示範](https://webresourcesdepot.com/demo/phantom/)** / **[下載](https://webresourcesdepot.com/freebie/phantom/)** Phantom 是一款富有創意且現代的 Bootstrap 4 登陸頁面模板，專為想要為其副專案和開源工具建立快速、新穎的登陸頁面的開發人員而建置。此範本提供了獨特且利基的佈局，您可以立即適應自己的需求，並提供大量精心製作和組織的高品質編碼元素。 **附加功能：** - 響應靈敏並與現代設備相容 - 設計中包含螢幕截圖 - 可重複使用的元件 --- ###22。 **新的**  **[現場示範](https://demo.bootstraptemple.com/app-landing/)** / **[下載](https://bootstrapious.com/p/app-landing-page)** Nova 是由 HTML5 和 Bootstrap 4 提供支援的響應式專業行動應用程式登陸頁面。Nova 是一款功能強大且超級靈活的產品，非常適合各種應用程式登陸頁面。對於每個尋求新鮮的線上形像以及與通常的網站演示不同的東西的人來說，該模板是一個完美的解決方案。 **附加功能：** - 龐大且可變的元素庫 - 無需歸屬 - 可用於個人和商業專案 --- ###23。 **紗羅**  **[現場示範](https://inovatik.com/leno-landing-page/index.html)** / **[下載](https://inovatik.com/leno-free-mobile-app-登陸頁模板.html)** Leno 是一款免費的深色行動應用程式 HTML 登陸頁面，使用 HTML、CSS 和 Javascript 建置。這個引人注目的模板具有一個帶有佔位符大預覽的圖像滑塊、一個用於客戶推薦的動態輪播以及一組附加頁面，其中包括聯繫表單部分，潛在客戶可以在其中輕鬆聯繫您詢問或提出問題。 **附加功能：** - 經過 W3C 有效程式碼測試 - 動畫統計資料和數字 - GDPR 友善設計 --- ###24。 **折斷**  **[現場示範](https://webresourcesdepot.com/demo/snap/)** / **[下載](https://webresourcesdepot.com/freebie/snap/)** Snap 是建立展示實用程式應用程式的美觀登陸頁面的最快方法。透過 Snap，您將獲得現代網站以正確方式展示其功能所需的所有必要頁面和部分。其中一些功能包括定價標籤、支援部分、桌面佔位符、福利圖塊以及用於顯示用戶評論的輪播。 **附加功能：** - 企業數位化解決方案 - 靈活的主頁變化 - 在不同的行動裝置上進行測試 --- ###25。 **埃沃洛**  **[現場示範](https://inovatik.com/evolo-landing-page/index.html)** / **[下載](https://inovatik.com/evolo-free-startup-landing-頁面模板.html)** Evolo 是一個清新迷人的登陸頁面模板，專為各種線上服務和數位產品而設計。由於 Evolo 建立在靈活的元件之上，因此如果您希望輕鬆建立無限數量的附加頁面，Evolo 是一個很好的伴侶。該模板還提供了一系列支援元素，可以整合這些元素以方便地建立一個全新的網站。 **附加功能：** - 合作夥伴螢幕截圖滑桿 - 支援的專案數量不受限制 - 圖像檔案和文字標誌選項 --- ###26。 **基本的**  **[現場示範](https://preview.uideck.com/items/basic/)** / **[下載](https://uideck.com/templates/basic/)** Basic 是在 Bootstrap 4 和 HTML5 之上開發的軟體和 SaaS 登陸頁面範本。此範本包含新創公司快速展示數位產品所需的所有基本元素。基本它是完全響應式的，透過多個區塊進行編碼，而且它非常靈活，以至於增加 Bootstrap 4 的基本元件變得前所未有的容易。 **附加功能：** - 提供免費和專業功能 - 刪除頁腳積分 - 包含文件 --- ###27。 **快的**  **[現場示範](http://themehunt.com/item/1527640-quick-free-bootstrap-4-theme/preview)** / **[下載](https://themehunt.com/item/1527640-quick-free-bootstrap-4-theme)** Quick 是一個免費的 HTML 登陸頁面，專為行動優先專案、新創公司和數位服務而建置。此範本包含 50 多個預先建置元件、2 個有用的外掛程式和 4 個設計精美的響應式頁面。 Quick 是一個不斷改進的模板，每次新更新都會獲得額外的功能和 UI 元件，以取悅使用者。 **附加功能：** - 提供影片示範 - 智慧程式碼標記 - 包括 NPM 和 Gulp 等熟悉的工具。 --- ###28。 **開發援助**  **[現場示範](https://themes.3rdwavemedia.com/demo/devaid/)** / **[下載](https://themes.3rdwavemedia.com/bootstrap-templates/startup/devaid-free-bootstrap-theme-for-developers-side-projects/)** devAid 是一個乾淨的 Bootstrap 模板，非常適合幫助程式設計師展示他們的個人專案和開源產品。此範本配有 4 種不同的配色方案、來源 SCSS 文件，可輕鬆執行樣式自訂，並提供大量額外元素，可根據登陸所包含的工具立即調整內容。 **附加功能：** - 經典的標題版面 - 超快載 - 基於流行的前端框架 --- ###29。 **棉花糖**  **[現場示範](https://www.bootstrapdash.com/demo/marshmallow/)** / **[下載](https://www.bootstrapdash.com/product/marshmallow/)** Marshmallow 是一個 HTML 登陸頁面模板，專為各種類型的 SaaS 產品、新創公司和應用程式展示而設計。該模板 100% 響應，在所有類型的設備上看起來都令人驚嘆。 Marshmallow 具有設計精美的元素和內頁，讓您的網站看起來安全且專業。 **附加功能：** - 提供功能輪播 - 動態網站統計和數字 - 獨立的圖像和插圖 --- ###30。 **阿普蘭**  **[現場示範](https://preview.uideck.com/items/appland/)** / **[下載](https://uideck.com/templates/appland/)** Appland 是一款免費、優雅的登陸頁面模板，專為應用程式登陸、軟體和線上工具而建立。 Appland 功能強大，具有原始設計和新創公司從頭開始建立引人注目的登陸頁面所需的所有必要元素，具有預先建立的佈局視圖和無限的創意可能性。 **附加功能：** - 專為不同目的而設計 - 包括所有基本功能和元素 - 令人驚嘆的動畫英雄部分 --- ###31。 **SEO公司**  **[現場示範](https://demos.onepagelove.com/html/seo-company/)** / **[下載](https://onepagelove.com/seo-company)** SEO Company 是一款免費且優雅的單頁 HTML 模板，專為數位團隊設計，旨在建立乾淨且令人驚嘆的登陸頁面來展示其線上服務。在功能方面，此模板呈現出獨特的設計、有吸引力的平滑過渡、移動觸控滑桿以及一組充分混合的高級元素，以最大限度地提高轉換率。 **附加功能：** - 包含 PSD 範本和文件 - 直接下載 - 乾淨的鋸齒形特徵 --- ###32。 **炫**  **[現場示範](https://demos.onepagelove.com/html/dazzle/)** / **[下載](https://onepagelove.com/dazzle)** Dazzle 是一款響應式單頁模板，具有視差滾動佈局，旨在提供平滑的外觀和無限的自訂可能性。 Dazzle 的設計和開發考慮了最新的設計趨勢，並經過最佳化以包含所有基本元素，為幾乎所有可能的場合建立具有視覺吸引力的頁面。 **附加功能：** - 平滑滾動到各個部分 - 應用程式概述部分 - 推薦滑桿和下載按鈕 --- ###33。 **新時代**  **[現場示範](https://startbootstrap.com/previews/new-age/)** / **[下載](https://startbootstrap.com/themes/new-age/)** New Age 是一個應用程式登陸頁面模板，它將幫助您以絕對的快樂和平靜的心態精美地展示您的新行動應用程式或其他任何內容。該模板具有不同的免費使用 HTML/CSS 設備佔位符、帶有滾動動畫的定制導航以及帶有導航、部分和旁白的語義標記。由於其大膽、多彩且時尚的外觀，New 是您下一個基於應用程式的專案的優秀樣板！ **附加功能：** - 帶有滾動過渡的菜單 - 不同的按鈕樣式 - CSS 漸層與紋理和覆蓋 --- ###34。 **登陸頁**  **[現場示範](https://startbootstrap.com/previews/landing-page/)** / **[下載](https://startbootstrap.com/themes/landing-page/)** 登陸頁面是適用於HTML5 和Bootstrap 4 的響應式登陸頁面模板。即使對於非技術用戶來說，登陸頁面也可以輕鬆建立引人注目的網路形象，並且透過其詳細的修飾，您會發現可以更改任何模板部分或元素小菜一碟。在功能方面，此範本包括一個帶有響應式背景圖像的輸入表單選擇標題，以及展示應用程式功能和優點的豐富內容部分。 **附加功能：** - 包括簡單的線條圖標 - 動態內容部分 - 響應式背景圖片 --- ###35。 **即將推出**  **[現場示範](https://startbootstrap.com/previews/coming-soon/)** / **[下載](https://startbootstrap.com/themes/coming-soon/)** 如果您正在開發令人興奮的新產品，並且需要開始圍繞它建立受眾群體，「即將推出」範本將幫助您在幾分鐘內輕鬆建立令人驚嘆的發布前登陸頁面。即將推出是透過優雅的即用型產品吸引早期客戶的理想解決方案，並且由於它是為多種目的而設計的，因此您不需要進行大量的客製化工作來根據您的特定目的和需求調整內容。 **附加功能：** - 移動後備影像 - 電子郵件訂閱者選擇加入輸入 - 實用的影片背景 --- ###36。 **SaaS 訂閱**  **[現場示範及下載](https://grayic.com/preview/?demo=saas-sub)** 您的 SaaS 模型應基於您的產品提供的價值，不同的價值類型需要不同類型的訂閱。 SaaS 訂閱是完美的 HTML 登陸頁面模板，可協助您取得新使用者並將早期訪客轉化為潛在客戶。該模板具有幾個漂亮的圖形和預先建立的部分，並且只需較低的程式碼技能即可輕鬆編輯。 **附加功能：** - 可切換的定價選項 - 工作聯絡表 - 無限的定制可能性 --- ###37。 **開發空間**  **[現場示範與下載](https://www.lapa.ninja/lab/dev-space)** Dev Space 是一款非常實用且設計精美的登陸頁面模板，專為應用程式開發顧問服務而製作。此範本建立在可靠的基礎設施之上，其中包括全面的內部工具、幾個免費的流線型圖示、豐富的插圖包以及高效且易於維護的記錄良好的程式碼。 **附加功能：** - 預先設計的標誌雲 - 認識我們的團隊部分 - 互動的現代運用 --- ###38。 **降落**  **[現場示範](https://www.tailwindtoolbox.com/templates/landing-page-demo.php) / [下載](https://www.tailwindtoolbox.com/templates/landing-page)** Landing 是一個獨特且現代的 SaaS 登陸頁面模板，主要專注於流暢的使用者體驗，使您的網站脫穎而出。 Landing 中的所有圖像均可用於個人或商業專案，並且具有廣泛的預建置內容塊和元件，該模板為您提供了無限數量的自訂可能性。 **附加功能：** - 交易和卡片內容元件 - 多欄英雄部分 - 入門範本已準備好 --- ###39。 **凱羅斯**  **[現場示範](https://templatemag.com/demo/templates/CleanLanding/index.html) / [下載](https://templatemag.com/cleanlanding-bootstrap-landing-template/)** Kairos 是一個很棒的應用程式模板，可讓您以簡單且時尚的方式展示您的應用程式。此範本將讓您的客戶更了解您的應用程式提供的功能，首先是優點部分，然後是聯絡表單，您將獲得他們的興趣和信任，因此他們會嘗試您的應用程式。 Kairos 還使用平滑過渡來為您的著陸提供更自然的外觀和感覺。 **附加功能：** - 持續更新和錯誤修復 - 支援無限網站 - PHP 和 AJAX 聯絡表 --- ###40。 **蝴蝶**  **[現場示範](https://bootstrapmade.com/demo/Butterfly/) / [下載](https://bootstrapmade.com/butterfly-free-bootstrap-theme/)** Butterfly 是一個乾淨且有吸引力的單頁 Bootstrap 模板，專為希望展示與容器元素功能相關的號召性用語的特色部分的公司新創公司而建立。總體而言，此模板是用 HTML 5 開發的，所有支援的元素均支援視網膜，適用於較大的顯示器和小型行動裝置。 Butterfly 將幫助您建立令人驚嘆的登陸頁面，讓您的用戶停下來思考。 **附加功能：** - 透過電子郵件提供高級支援 - 整頁版面 - 以生產品質打造 --- ##結論 登陸頁面將佔您的用戶的大部分，因此他們需要您的全力關注和關注。有了這個免費的 HTML 登陸頁面模板列表，您就沒有理由不能擁有一個能夠正確展示您的產品並且轉換良好的登陸頁面。
原文出處：https://dev.to/softwaredotcom/50-vs-code-themes-for-2020-45cc 如果您正在尋找新的主題來在新的一年裡改變您的程式碼編輯器，我隨時為您提供協助！看看具有獨特調色板的各種時尚主題 - 從時尚到時髦到充滿活力以及介於兩者之間的一切 - 看看什麼最適合您。我甚至加入了一些有趣的圖標包來進一步自訂 VS Code。 我將這些 VS Code 主題分為以下部分： * [熱門](#trending) (1-20) * [深色](#dark) (21-30) * [光](#光) (31-40) * [多彩](#colorful) (41-50) * [獎勵：圖示](#icons) (51-56) 要在 VS Code 中安裝主題，只需存取市場並選擇您想要下載的主題。若要在已安裝的主題之間切換，請使用「CMD/CTRL + SHIFT + P」開啟命令調色板，然後輸入「首選項：顏色主題」。然後您可以在菜單中瀏覽您的主題。 ## 熱門 發現越來越流行的 VS Code 新趨勢主題。 ### 1. [激進](https://marketplace.visualstudio.com/items?itemName=dhedgecock.radical-vscode)  ### 2.[礦箱材質](https://marketplace.visualstudio.com/items?itemName=sainnhe.mine.box-material)  ### 3. [Merko](https://marketplace.visualstudio.com/items?itemName=merko.merko-green-theme)  ### 4. [東京之夜](https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night)  ### 5. [補救措施](https://marketplace.visualstudio.com/items?itemName=robertrossmann.remedy)  ### 6. [最小](https://marketplace.visualstudio.com/items?itemName=dawranliou.minimal-theme-vscode)  ### 7. [Aurora X](https://marketplace.visualstudio.com/items?itemName=marqu3s.aurora-x)  ### 8. [大西洋之夜](https://marketplace.visualstudio.com/items?itemName=mrpbennett.atlantic-night)  ### 9. [玻璃使用者介面](https://marketplace.visualstudio.com/items?itemName=aregghazaryan.glass-ui)  ### 10. [淡淡的丁香](https://marketplace.visualstudio.com/items?itemName=alexnho.a-touch-of-lilac-theme)  ### 11. [FireFly Pro](https://marketplace.visualstudio.com/items?itemName=ankitcode.firefly)  ### 12. [ReUI](https://marketplace.visualstudio.com/items?itemName=barrsan.reui)  ### 13. [史萊姆](https://marketplace.visualstudio.com/items?itemName=smlombardi.slime)  ### 14. [Signed Dark Pro](https://marketplace.visualstudio.com/items?itemName=enenumxela.signed-dark-pro)  ### 15. [黑暗](https://marketplace.visualstudio.com/items?itemName=wart.ariake-dark)  ### 16. [時髦燈](https://marketplace.visualstudio.com/items?itemName=loilo.snazzy-light)  ### 17. [Spacegray](https://marketplace.visualstudio.com/items?itemName=ionutvmi.spacegray-vscode)  ### 18. [Celestial](https://marketplace.visualstudio.com/items?itemName=apvarun.celestial)  ### 19. [藍莓黑](https://marketplace.visualstudio.com/items?itemName=peymanslh.blueberry-dark-theme)  ### 20. [熊](https://marketplace.visualstudio.com/items?itemName=dahong.theme-bear)  ## 深色 您喜歡在黑暗中工作嗎？發現 VS Code 的一些最佳深色主題。 您也可以透過安裝我們的[最佳深色主題包](https://marketplace.visualstudio.com/items?itemName=thegeoffstevens.best-dark-themes-pack)來安裝所有這些深色主題。 ### 21. [一暗專業版](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)  ### 22. [德古拉官方](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)  ### 23. [Nord](https://marketplace.visualstudio.com/items?itemName=arcticicestudio.nord-visual-studio-code)  ### 24. [Palenight](https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme)  ### 25. [One Monokai](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai)  ### 26. [夜貓子](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl)  ### 27. [仙女座](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda)  ### 28. [Darcula](https://marketplace.visualstudio.com/items?itemName=rokoroku.vscode-theme-darcula)  ### 29. [地平線主題](https://marketplace.visualstudio.com/items?itemName=jolaleye.horizon-theme-vscode)  ### 30. [Cobalt2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)  ## 光 想要程式碼編輯器更輕一些嗎？看看這些時尚的淺色主題。 您也可以透過安裝我們的[最佳淺色主題包](https://marketplace.visualstudio.com/items?itemName=thegeoffstevens.best-light-themes-pack)來安裝所有這些淺色主題。 ### 31. [原子一燈](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onelight)  ### 32. [Bluloco Light](https://marketplace.visualstudio.com/items?itemName=uloco.theme-bluloco-light)  ### 33. [Brackets Light Pro](https://marketplace.visualstudio.com/items?itemName=fehey.brackets-light-pro)  ### 34. [作家](https://marketplace.visualstudio.com/items?itemName=xaver.theme-writer)  ### 35. [NetBeans Light](https://marketplace.visualstudio.com/items?itemName=obrejla.netbeans-light-theme)  ### 36. [安靜的燈光](https://marketplace.visualstudio.com/items?itemName=onecrayon.theme-quietlight-vsc)  ### 37. [跳燈](https://marketplace.visualstudio.com/items?itemName=bubersson.theme-hop-light) ![](https://raw.githubusercontent.com/bubersson/hop-theme-vscode/master/hop-light.png") ### 38. [NotepadPlusPlus Remixed](https://marketplace.visualstudio.com/items?itemName=sh4dow.theme-notepadplusplusremixed)  ### 39. [GitHub Light](https://marketplace.visualstudio.com/items?itemName=Hyzeta.vscode-theme-github-light)  ### 40. [GitHub Plus](https://marketplace.visualstudio.com/items?itemName=thenikso.github-plus-theme)  ## 多彩 厭倦了單色主題和沈悶的調色板？使用這些豐富多彩的主題為您的編輯器加入一些顏色。 您也可以透過安裝我們的[最佳彩色主題包](https://marketplace.visualstudio.com/items?itemName=thegeoffstevens.best-colorful-themes-pack)來安裝所有這些彩色主題。 ### 41. [紫色陰影](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)  ### 42. [SynthWave](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode)  ### 43. [藍色程式碼](https://marketplace.visualstudio.com/items?itemName=Sujan.code-blue)  ### 44. [賽博龐克](https://marketplace.visualstudio.com/items?itemName=max-SS.cyberpunk)  ### 45. [LaserWave](https://marketplace.visualstudio.com/items?itemName=jaredkent.laserwave)  ### 46. [Zeonica](https://marketplace.visualstudio.com/items?itemName=andrewvallette.zeonica)  ### 47. [潮人](https://marketplace.visualstudio.com/items?itemName=ModoNoob.vscode-hipster-theme)  ### 48. [野莓](https://marketplace.visualstudio.com/items?itemName=joebayer1340.wildberry-theme)  ### 49. [Qiita](https://marketplace.visualstudio.com/items?itemName=Increments.qiita)  ### 50. [軟體時代](https://marketplace.visualstudio.com/items?itemName=soft-aesthetic.soft-era-theme)  ## 下一步是什麼？ 想找更多主題？試試[搜尋 VS Code 市場](https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs) 並依「主題」排序。開發人員已經建立了超過 2,500 個主題，您可以從中選擇來自訂 VS Code。 ___ 我喜歡建立讓開發人員滿意的工具。如果您喜歡這篇文章，您還應該查看我的其他專案： * [Code Time](https://www.software.com/code-time)：自動程式設計指標和時間追蹤的免費擴展，就在您的編輯器中 * [SRC](https://www.software.com/src)：在十分鐘或更短的時間內提供開發者世界的策略摘要 - 每週一次，直接發送到您的收件匣
原文出處：https://dev.to/antonmelnyk/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5 #簡介 你好，讀者！ 如您所知，設定 [Webpack](https://webpack.js.org/) 可能是一項令人沮喪的任務。儘管有很好的文件，但由於一些原因，這個捆綁器並不是一匹舒服的馬。 Webpack 團隊正在非常努力且相對快速地開發它，這是一件好事。然而，對於新開發人員來說，一次性學習所有內容是難以承受的。教程已經過時，一些插件損壞，發現的範例可能會令人困惑。有時，您可能會陷入一些瑣碎的事情，並透過 Google 進行大量搜尋，以在 GitHub issues 中找到一些最終有幫助的簡訊。 缺乏關於 Webpack 及其工作原理的介紹性文章，人們直接奔向 *create-react-app* 或 *vue-cli* 等工具，但有時需要編寫一些簡單的純 JavaScript 和 SASS，無需框架或任何奇特的東西。 本指南將逐步介紹 ES6、SASS 和圖片/字體的 Webpack 配置，無需任何框架。對於大多數簡單的網站開始使用 Webpack 或將其用作進一步學習的平台應該足夠了。儘管本指南需要一些有關 Web 開發和 JavaScript 的先驗知識，但它可能對某些人有用。至少當我開始使用 Webpack 時，我會很高興遇到這樣的事情！ #我們的目標 我們將使用 Webpack 將 JavaScript、樣式、圖像和字體檔案捆綁到一個 *dist* 資料夾中。  Webpack 將產生 1 個捆綁的 JavaScript 檔案和 1 個捆綁的 CSS 檔案。您可以像這樣簡單地將它們加入到 HTML 文件中（當然，如果需要，您應該更改 dist 資料夾的路徑）： ``` <link rel="stylesheet" href="dist/bundle.css"> <script src="dist/bundle.js"></script> ``` 你就可以走了:tropical_drink: 您可以查看本指南中完成的範例：:link:[link](https://github.com/heyanton/simple_webpack_boilerplate)。 注意：我最近更新了依賴項。本指南適用於最新的 Webpack 5，但設定仍適用於 Webpack 4，以防您需要！ #開始 ####1。安裝Webpack 我們使用 [npm](https://www.npmjs.com/): `$ npm init` 命令在專案資料夾中建立一個 *package.json* 文件，我們將在其中放置 JavaScript 依賴項。然後我們可以使用 $ npm i --save-dev webpack webpack-cli 來安裝 Webpack 本身。 ####2。建立入口點文件 Webpack 從單一 JavaScript 檔案開始運作，該檔案稱為入口點。在 *javascript* 資料夾中建立 *index.js*。您可以在這裡編寫一些簡單的程式碼，例如 `console.log('Hi')` 以確保其正常運作。  ####3。建立 webpack.config.js ....在專案資料夾中。這裡是所有:sparkles:魔法發生的地方。 ``` // Webpack uses this to work with directories const path = require('path'); // This is the main configuration object. // Here, you write different options and tell Webpack what to do module.exports = { // Path to your entry point. From this file Webpack will begin its work entry: './src/javascript/index.js', // Path and filename of your result bundle. // Webpack will bundle all JavaScript into this file output: { path: path.resolve(__dirname, 'dist'), publicPath: '', filename: 'bundle.js' }, // Default mode for Webpack is production. // Depending on mode Webpack will apply different things // on the final bundle. For now, we don't need production's JavaScript // minifying and other things, so let's set mode to development mode: 'development' }; ``` ####4。在 *package.json* 中新增 npm 腳本來執行 Webpack 要執行 Webpack，我們必須使用 npm 腳本和簡單的命令「webpack」以及我們的設定檔作為 *config* 選項。我們的 *package.json* 現在應該如下所示： ``` { "scripts": { "build": "webpack --config webpack.config.js" }, "devDependencies": { "webpack": "^4.29.6", "webpack-cli": "^3.2.3" } } ``` ####5。執行Webpack 透過基本設置，您可以執行“$ npm run build”命令。 Webpack 將尋找我們的入口文件，解析其中的所有[*import*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 模組相依性並將其捆綁到*dist* 資料夾中的單一 *.js* 檔案。在控制台中，您應該看到如下內容：  如果您將 `<script src="dist/bundle.js"></script>` 加入到 HTML 檔案中，您應該在瀏覽器控制台中看到「Hi」！ #:顯微鏡：裝載機 偉大的！我們捆綁了標準 JavaScript。但是，如果我們想使用 ES6（及更高版本）的所有酷炫功能並保持瀏覽器相容性怎麼辦？我們應該如何告訴 Webpack 將我們的 ES6 程式碼轉換（*transpile*）相容於瀏覽器的程式碼？ 這就是 Webpack **loaders** 發揮作用的地方。 Loader 是 Webpack 的主要功能之一。他們對我們的程式碼進行某些轉換。 讓我們在 *webpack.config.js* 檔案中新增選項 *module.rules*。在此選項中，我們將介紹 Webpack 如何準確地轉換不同類型的檔案。 ``` entry: /* ... */, output: /* ... */, module: { rules: [ ] } ``` 對於 JavaScript 文件，我們將使用： ###1。 [babel-loader](https://github.com/babel/babel-loader) [Babel](https://babeljs.io/) 是目前最好的 JavaScript 轉譯器。我們將告訴 Webpack 在捆綁之前使用它將現代 JavaScript 程式碼轉換為與瀏覽器相容的 JavaScript 程式碼。 Babel-loader 正是這樣做的。讓我們安裝它： `$ npm i --save-dev babel-loader @babel/core @babel/preset-env` 現在我們要新增有關 JavaScript 檔案的規則： ``` rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] ``` * `test` 是我們要轉換的檔案副檔名的[正規表示式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)。在我們的例子中，它是 JavaScript 檔案。 * `exclude` 是一個正規表示式，它告訴 Webpack 在轉換模組時應該忽略哪個路徑。這意味著如果我們將來導入它們，我們將不會轉換從 npm 匯入的供應商庫。 * `use` 是主要規則的選項。這裡我們設定 loader，它將應用於與「test」正規表示式相對應的檔案（在本例中為 JavaScript 檔案） * “選項”可能因載入程式而異。在這種情況下，我們為 Babel 設定預設預設，以考慮應該轉換哪些 ES6 功能，哪些不應該轉換。它本身是一個單獨的主題，如果您感興趣，可以深入研究它，但目前保持這樣是安全的。 現在您可以將 ES6 程式碼安全地放置在 JavaScript 模組中！ ###2。 [sass-loader](https://github.com/webpack-contrib/sass-loader) 是時候處理樣式了。通常，我們不想寫純 CSS。我們經常使用 [SASS](https://sass-lang.com/) 預處理器。我們將 SASS 轉換為 CSS，然後應用自動前綴和縮小。這是 CSS 的一種「預設」方法。讓我們告訴 Webpack 要這樣做。 假設我們在 *javascripts/index.js* 入口點導入主 SASS 檔案 *sass/styles.scss*。 ``` import '../sass/styles.scss'; ``` 但目前，Webpack 不知道如何處理 *.scss* 檔案或除 *.js* 之外的任何檔案。我們需要新增適當的載入器，以便 Webpack 可以解析這些檔案： `$ npm i --save-dev sass sass-loader postcss-loader css-loader` 我們可以為 SASS 檔案新增規則並告訴 Webpack 如何處理它們： ``` rules: [ { test: /\.js$/, /* ... */ }, { // Apply rule for .sass, .scss or .css files test: /\.(sa|sc|c)ss$/, // Set loaders to transform files. // Loaders are applying from right to left(!) // The first loader will be applied after others use: [ { // This loader resolves url() and @imports inside CSS loader: "css-loader", }, { // Then we apply postCSS fixes like autoprefixer and minifying loader: "postcss-loader" }, { // First we transform SASS to standard CSS loader: "sass-loader" options: { implementation: require("sass") } } ] } ] ``` 請注意此處有關 Webpack 的重要事項。可連結多個裝載機；它們將從“use”陣列中的最後一個到第一個逐個應用。 現在，當 Webpack 在程式碼中遇到“import 'file.scss';”時，它知道該怎麼做！ ####PostCSS 我們應該如何告訴 *postcss-loader* 它必須應用哪些轉換？我們建立一個單獨的設定檔 `postcss.config.js` 並使用我們的樣式所需的 postcss 外掛程式。您可能會發現對最基本和有用的插件進行縮小和自動加入前綴，以確保 CSS 為您的真實網站做好準備。 首先，安裝這些 postcss 外掛：`$ npm i --save-dev autoprefixer cssnano`。 其次，將它們加入到 *postcss.config.js* 檔案中，如下所示： ``` module.exports = { plugins: [ require('autoprefixer'), require('cssnano'), // More postCSS modules here if needed ] } ``` 您可以更深入地研究 [PostCSS](https://github.com/postcss/postcss)，找到更多適合您的工作流程或專案需求的插件。 在完成所有 CSS 設定之後，只剩下一件事了。 Webpack 將解析您的 *.scss* 導入，對其進行轉換，然後...下一步是什麼？它不會神奇地建立一個與您的樣式捆綁在一起的單一 *.css* 檔案；我們必須告訴 Webpack 要這樣做。但這個任務超出了裝載機的能力範圍。為此，我們必須使用 Webpack 的 **插件**。 #:electric_plug: 插件 他們的目的是做裝載機做不到的任何事。如果我們需要將所有轉換後的 CSS 提取到一個單獨的「捆綁」檔案中，我們必須使用插件。我們的案例有一個特殊的插件：*MiniCssExtractPlugin*： `$ npm i --save-dev mini-css-extract-plugin` 我們可以在 *webpack.config.js* 檔案的開頭單獨導入外掛： ``` const MiniCssExtractPlugin = require("mini-css-extract-plugin"); ``` 在我們設定載入器的“module.rules”陣列之後加入新的“plugins”程式碼，我們用選項啟動我們的插件： ``` module: { rules: [ /* ... */ ] }, plugins: [ new MiniCssExtractPlugin({ filename: "bundle.css" }) ] ``` 現在我們可以將此插件連結到我們的 CSS 載入器中： ``` { test: /\.(sa|sc|c)ss$/, use: [ { // After all CSS loaders, we use a plugin to do its work. // It gets all transformed CSS and extracts it into separate // single bundled file loader: MiniCssExtractPlugin.loader }, { loader: "css-loader", }, /* ... Other loaders ... */ ] } ``` 完畢！如果您按照步驟操作，則可以執行「$ npm run build」命令並在 *dist* 資料夾中找到 *bundle.css* 檔案。現在的一般設定應如下所示：  Webpack 有大量用於不同目的的插件。您可以根據需要在[官方文件](https://webpack.js.org/plugins/)中探索它們。 # 更多載入器：圖像和字體 此時，您應該了解 Webpack 工作原理的基礎知識。但我們還沒完成。大多數網站都需要一些資源：我們透過 CSS 設定的圖像和字體。由於 *css-loader*，Webpack 可以解析 `background-image: url(...)` 行，但它不知道如果將 URL 設為 *.png* 或 *jpg* 檔案該怎麼辦。 我們需要一個新的載入器來處理 CSS 內的檔案或能夠直接在 JavaScript 中匯入它們。這是： ### [檔案載入器](https://github.com/webpack-contrib/file-loader) 使用 `$ npm i --save-dev file-loader` 安裝它，並在我們的 *webpack.config.js* 新增規則： ``` rules: [ { test: /\.js$/, /* ... */ }, { test: /\.(sa|sc|c)ss$/, /* ... */ }, { // Now we apply rule for images test: /\.(png|jpe?g|gif|svg)$/, use: [ { // Using file-loader for these files loader: "file-loader", // In options we can set different things like format // and directory to save options: { outputPath: 'images' } } ] } ] ``` 現在，如果你在 CSS 中使用一些像這樣的圖像： ``` body { background-image: url('../images/cat.jpg'); } ``` Webpack 將成功解決它。您將在 *dist/images* 資料夾中找到帶有雜湊名稱的圖像。在 *bundle.css* 會發現類似這樣的內容： ``` body { background-image: url(images/e1d5874c81ec7d690e1de0cadb0d3b8b.jpg); } ``` 正如你所看到的，Webpack 非常聰明——它正確解析了你的 url 相對於 *dist* 資料夾的路徑！ 您也可以為字體加入規則並以與圖像類似的方式解析它們；將 outputPath 變更為 *fonts* 資料夾以保持一致性： ``` rules: [ { test: /\.js$/, /* ... */ }, { test: /\.(sa|sc|c)ss$/, /* ... */ }, { test: /\.(png|jpe?g|gif|svg)$/, /* ... */ }, { // Apply rule for fonts files test: /\.(woff|woff2|ttf|otf|eot)$/, use: [ { // Using file-loader too loader: "file-loader", options: { outputPath: 'fonts' } } ] } ] ``` #總結 就是這樣！經典網站的簡單 Webpack 設定。我們介紹了 **入口點**、**載入器** 和 **插件** 的概念以及 Webpack 如何轉換和捆綁檔案。 當然，這是一個非常簡單的配置，旨在了解 Webpack 的一般概念。如果您需要的話，還有很多事情可以加入：來源映射、熱重載、設定 JavaScript 框架以及 Webpack 可以做的所有其他事情，但我覺得這些事情超出了本指南的範圍。 如果您遇到困難或想了解更多訊息，我鼓勵您查看 Webpack [官方文件](https://webpack.js.org/concepts)。快樂捆綁！
原文出處：https://dev.to/lofiandcode/git-and-github-how-to-revert-a-single-file-dha ##介紹 一旦您開始與其他開發人員合作，了解如何將單一檔案還原到某個提交就變得很重要。出現這種需求是因為您有時需要更改與拉取請求無關的文件以測試您正在開發的功能。但是，手動將這些文件中的每一行程式碼變更回原始狀態並進行新的提交可能會導致提交歷史記錄混亂。恢復檔案是一種更清晰的處理方式。 ##找到提交ID 首先，您需要前往 GitHub 上的共用儲存庫並找到要復原的檔案。導航到該文件後，您應該在文件上方看到以下內容：  在右側，您可以看到 7 位數的提交 ID 和日期。這是修改該文件的最近一次提交的提交 ID。記下此提交 ID，或將其複製到剪貼簿。 ##找到檔案路徑 接下來您需要的是工作目錄中的檔案路徑。這部分很簡單，因為文件的路徑位於您找到文件的提交 ID 的相同 GitHub 畫面上。  在上面您可以看到與之前相同的螢幕截圖，但這次我在文件路徑下劃線了。請注意，我只在路徑的一部分下劃線了。列出的第一個目錄是工作目錄名稱，並且將是您使用此檔案路徑時所在的目錄。因此，您只需要下劃線部分。 ##恢復檔案。 剩下的就是恢復檔案了。打開終端並變更為工作目錄後，您可以使用“git checkout”來還原檔案。 git 指令的格式如下圖所示： `git checkout [提交 ID] -- 路徑/到/檔案` 如果我要恢復上面螢幕截圖中的文件，則將如下所示：  ##提交更改 我知道你在想什麼，“等一下，我認為重點是不建立新的提交？”嗯，這說對了一半。我們不想對我們恢復的文件進行新的提交。但是一旦我們恢復文件，我們就需要提交該更改。在這種情況下，更改是單一檔案的恢復。這是使用標準提交命令完成的： `git commit -m '提交訊息'` 然後，您可以將該提交推送到遠端，以便 GitHub 上的分支版本與您的本機版本相符。 ##總結 若要將單一檔案還原至特定版本，請執行下列操作： * 尋找要還原到的檔案版本的提交 ID。 * 找到要從工作目錄復原的檔案的路徑。 * 在終端機中，將目錄變更為工作目錄。 * 輸入 `git checkout [commit ID] -- path/to/file` 並按 Enter 鍵。 * 將更改提交到恢復的文件。 ##參考 [封面圖片](https://ih0.redbubble.net/image.591029586.5228/flat,550x550,075,f.jpg) [如何將檔案重設或還原到特定版本？ - Stackoverflow](https://stackoverflow.com/questions/215718/how-can-i-reset-or-revert-a-file-to-a-specific-revision)
原文出處：https://dev.to/rjwignar/are-you-stealing-from-other-projects-4f0n ### 優秀的程式設計師抄襲；更優秀的程式設計師會偷竊嗎？ > 優秀的藝術家臨摹；偉大的藝術家偷竊 > \- 巴勃羅·畢卡索 巴勃羅·畢卡索經常因說出上述引言而受到讚譽。我不會提供我自己對這句話的解釋，因為有興趣的人可以在網路上找到大量的解釋。然而，我經常想知道這句話如何應用於程式設計和開源開發。 ### 我們的程式設計知識真的是我們自己的嗎？ 網路上有很多資源可以教您幾乎所有與程式設計相關的知識。我自己和我的許多同學幾乎所有的程式設計知識都是從教科書、線上資源/文件和 YouTube 教學中學到的。這些資源教會了我們今天擁有並應用的程式設計知識，但是所有這些知識都被盜了嗎？如果您從數千人觀看的 YouTube 教程中學會了編寫第一個“Hello World”程序，您是否在竊取程式碼？影片上傳者也學會使用外部資源編寫「Hello World」程式的可能性有多大？上傳者的知識被偷了嗎？ 我不能說這些知識是否被盜，但我相信這種知識對於我們建立和擴展我們的技能是必要的。沒有人能夠知道每一個完美的實現，或是為每個專案編寫每一行程式碼。 ### 開源軟體是為使用而生的！ 開源軟體的存在不應該被忽視，開源軟體是用來使用的！如果開源專案提供了您需要的功能，那麼當其他人為您精心完成這些功能時，為什麼還要自己實現這些功能呢？只要該庫得到積極維護並滿足您的需要，您就應該使用和研究開源庫。如果您發現任何錯誤、問題或缺少的功能，請嘗試建立自己的解決方案並為該專案做出貢獻，使其對每個人都更好！同樣，如果開源程式庫提供了您需要的功能，但您無法整合該程式庫，請以開源專案為靈感，在您自己的專案中實現該功能。 ### 從其他專案中獲取靈感 在我之前的[關於程式碼閱讀的部落格文章](https://dev.to/rjwignar/code-reading-i7h)中，我閱讀了Docusaurus 的程式碼庫來研究該專案如何為受保護的程式碼區塊實現語法突出顯示。我的研究告訴我，Docusaurus 實際上使用第三方函式庫 [Prism-React-Renderer](https://github.com/FormidableLabs/prism-react-renderer) 來提供語法突出顯示。這些知識很有用，因為我想在我的 Markdown 到 HTML 轉換器 [ctil](https://github.com/rjwignar/ctil) 新增語法突出顯示，但不想從頭開始實現該功能。雖然我無法在自己的專案中使用 Prism React Renderer，但研究 Docusaurus 給了我找到一個我可以使用的開源程式庫的想法。 ### 使用highlight.js 進行語法高亮顯示 在搜尋第三方語法螢光筆時，我找到了 [highlight.js](https://highlightjs.org/)。 ctil 將文字（`.txt`）和 Markdown （`.md`）轉換為生成的 HTML（`.html`）文件，因此我希望生成的 HTML 文件支援語法突出顯示。透過使用內容分發網路（CDN），highlight.js 可以用作 HTML 標籤，因此我可以透過將以下行新增至產生的 HTML 檔案來新增highlight.js： ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script>hljs.highlightAll();</script> ``` 透過這些行，我能夠[加入語法突出顯示](https://github.com/rjwignar/ctil/commit/c597f05724b60731e129aead33f1c3017a99ec17)：  ### 與 Docusaurus 方法的比較 在我的[上一篇部落格文章](https://dev.to/rjwignar/code-reading-i7h)中，我描述了 Docusaurus 如何使用 Prism React Renderer 新增語法突出顯示。與 Docusaurus 一樣，我使用了第三方函式庫highlight.js 來加入語法突出顯示。然而，在 Docusaurus 中新增和修改了設定檔以設定 Prism React Renderer，並透過使用「<Highlight />」元件加入了語法突出顯示。 Prism React Renderer 還提供了使用者可以在其專案中配置的突出顯示主題。對於我的專案，只需將highlight.js 加入到生成的 HTML 文件中，作為要透過 CDN 傳送的 HTML 標籤。現在我對基本的語法突出顯示感到滿意，所以我不關心有一個特定的突出顯示主題。透過 CDN 使用highlight.js 的一個缺點是，如果使用者在線，語法突出顯示可能無法運作。將來我可能會將highlight.js加入到專案本身中，這樣語法突出顯示就可以離線工作。 ### 下一步。 此功能仍在開發中。在目前迭代中，html 用作 `<code>...</code>` 區塊的預設語言類別。目前這是可以接受的，但此解決方案將忽略原始 Markdown 文件中的任何語言類設定。我希望 ctil 解析 Markdown 文件中的語言標籤，以確定使用哪種語言進行突出顯示。這將是未來需要解決的問題。有興趣的人可以在[此處](https://github.com/rjwignar/ctil/issues/11)找到問題。 ### 那麼從開源專案複製程式碼算不算偷竊？ 只要專案許可證允許複製，並且您遵循專案許可證的要求，您就不會竊取。同樣，我認為從開源專案中尋找靈感並不是偷竊。
原文出處：https://dev.to/madza/24-open-source-projects-for-developers-in-2023-391l --- 標題：2023 年開發人員的 24 個開源專案 🔥👍 發表：真實 描述： 標籤： 開源、 github、 程式設計、 Web 開發 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74998ffdt3doqvxtxumz.png canonical_url：https://madza.hashnode.dev/24-open-source-projects-for-developers-in-2023 --- 開源專案是創新、協作和創造力的遊樂場。它是來自世界各地的開發人員聚集在一起分享他們的想法、技能和熱情的中心。 在本文中，我精心挑選了 24 個涵蓋廣泛興趣和技術的開源專案。 從尖端的人工智慧框架到漂亮的生產力工具以及介於兩者之間的一切，每個開發人員都能找到適合自己的東西。 我提供了直接連結、描述和視覺效果，以便您可以立即獲得每個工具的初步印象。 --- ## 1\. [集算器SPL](https://github.com/SPLWare/esProc)（贊助） 集算器SPL是一種基於腳本的資料操作語言，與SQL資料庫集成，支援進階分析和高效能並行處理。 它適合處理大型資料集，與各種工具集成，提供資料視覺化，並跨多個平台工作。一些主要功能包括： **💪 強大的資料處理能力：** 集算器SPL是一種腳本語言，具有豐富的函數庫和強大的語法。 **✨ 預存程序等效項：** 它允許透過 JDBC 介面執行 SPL 腳本。 **📈 多功能視覺化：** 它提供了成熟的報告工具，具有廣泛的視覺化配置，用於建立各種類型的報告。 **⚡ 自動化工作流程：** 它支援軟體工作流程的自動化，包括用於程式碼建置、測試和部署的 CI/CD 流程。 **🔥 相比SQL更具彈性：** 與SQL語法不同，集算器SPL允許將資料處理程式碼寫在多條語句中。  ## 2\. [跳房子](https://github.com/hoppscotch/hoppscotch) 一種多功能開源 API 開發和測試工具，提供使用者友善的介面，用於發出 HTTP 請求來測試 API 並與 API 互動。 它簡化了製作和發送請求的過程，使其成為使用 API 的開發人員和測試人員的必備工具。  ## 3\. [Supabase](https://github.com/supabase/supabase) Firebase 的開源替代方案，為開發人員提供了一組用於建立可擴展的即時應用程式的工具。 它提供了強大的後端即服務 (BaaS) 平台，具有身份驗證、資料庫管理和即時功能等功能，使其成為創建現代 Web 和行動應用程式的強大選擇。  ## 4\. [超級代幣](https://github.com/supertokens/supertokens-core) 一種開源身份驗證解決方案，提供強大的安全功能和輕鬆集成，以增強 Web 和行動應用程式中的使用者身份驗證和授權。 它為開發人員提供了一個全面的工具包，用於保護用戶資料並確保無縫登入體驗。  ## 5\. [Git](https://github.com/git/git) Git 版本控制系統的官方開源程式庫，最初由 Linus Torvalds 建立。 Git 廣泛用於追蹤原始程式碼的更改，並透過提供強大的分支和合併功能來實現協作軟體開發。  ## 6\. [VS 代碼](https://github.com/microsoft/vscode) 由 Microsoft 開發的免費開源程式碼編輯器。 它提供了高度可自訂且高效的程式設計環境，具有 IntelliSense、調試支援和龐大的擴充庫等功能，可增強您的開發工作流程。  ## 7\. [OhMyZsh](https://github.com/ohmyzsh/ohmyzsh) 一個流行且高度可自訂的框架，用於在類 Unix 作業系統中管理 Zsh 配置。 它簡化了 shell 自訂，提供了大量插件和主題來增強您的命令列體驗。  ## 8\. [包子](https://github.com/oven-sh/bun) 一個開源 JavaScript 工具包，旨在簡化和優化為 Web 應用程式捆綁 JavaScript 程式碼的過程。 它提供了一種現代且快速的方法來建立捆綁包，從而增強了使用 JavaScript 專案時的效能和開發人員體驗。  ## 9\. [SWR](https://github.com/vercel/swr) SWR（Stale-While-Revalidate）是一個用於在 React 應用程式中取得資料的 JavaScript 函式庫。 它可以在客戶端和伺服器之間實現高效、自動的資料同步，提供無縫的即時更新，同時確保資料保持新鮮和最新。  ## 10\. [Prisma](https://github.com/prisma/prisma) 用於現代應用程式開發的開源資料庫工具包，透過強大的查詢產生器和類型安全的 ORM（物件關聯映射）層簡化資料庫存取和操作。 它允許開發人員使用聲明性和直觀的方法管理資料庫並與之交互，從而使資料庫操作在各種資料庫系統中無縫且安全。  ## 11\. [ElasticSearch](https://github.com/elastic/elasticsearch) 由 Elastic 開發的強大且可擴展的開源搜尋和分析引擎。 它旨在幫助用戶快速有效地搜尋、分析和視覺化大量數據，使其成為從全文搜尋引擎到日誌分析等應用程式的熱門選擇。  ## 12\. [哈蘇拉](https://github.com/hasura/graphql-engine) 一款功能強大的開源工具，可簡化應用程式的 GraphQL API 開發。 借助 Hasura，您可以輕鬆建立、管理和保護 GraphQL API，從而更輕鬆地與資料來源互動並建立現代的資料驅動應用程式。  ## 13\. [BioDrop](https://github.com/EddieHubCommunity/BioDrop) 透過單一連結與您的受眾建立聯繫。在一處展示您創建的內容和項目。 讓人們更容易找到、關注和訂閱。  ## 14\. [Powertoys](https://github.com/microsoft/PowerToys) 適用於 Windows 的開源實用程序，可提高工作效率和自訂功能。 它提供了一系列方便的工具和實用程序，包括快速啟動器、文件預覽和視窗管理等功能，旨在簡化您的 Windows 體驗。  ## 15\. [Strapi](https://github.com/strapi/strapi) 開源無頭內容管理系統 (CMS)，使開發人員能夠快速建立強大且可自訂的 API。 它使團隊能夠輕鬆創建和管理內容豐富的網站和應用程序，為各種專案提供靈活性和可擴展性。  ## 16\. [看似合理](https://github.com/plausible/analytics) 一種開源網路分析工具，旨在為網站所有者提供對其網站效能的簡單且注重隱私的見解。 它提供用戶友好、輕量級的跟踪，且不會損害訪問者的隱私，使其成為那些重視數據分析而無需侵入性跟踪方法的人的理想選擇。  ## 17\. [Astro](https://github.com/withastro/astro) 現代靜態網站產生器，透過僅傳送頁面所需的 JavaScript 來提供閃電般的效能，從而實現近乎即時的載入時間。 它將傳統伺服器渲染框架的靈活性與靜態網站產生器的速度相結合，使其成為建立高效動態網站的絕佳選擇。  ## 18\. [混音](https://github.com/remix-run/remix) 用於建立現代 JavaScript 應用程式的 Web 框架，注重速度和開發人員體驗。 它使開發人員能夠透過無縫組合伺服器渲染和客戶端渲染的內容來創建高效能的 Web 應用程式。  ## 19\. [張量流](https://github.com/tensorflow/tensorflow) 由Google開發的開源機器學習框架。 它為建立和部署機器學習模型提供了靈活且全面的生態系統，使其成為人工智慧領域研究人員和開發人員的熱門選擇。  ## 20\. [顫動](https://github.com/flutter/flutter) 由 Google 創建的開源 UI 軟體開發工具包，以其從單一程式碼庫建立適用於行動、Web 和桌面的本機編譯應用程式的能力而聞名。 它使開發人員能夠使用單一程式語言 Dart 跨多個平台創建美觀、快速且高度可自訂的使用者介面。  ## 21\. [Kubernetes](https://github.com/kubernetes/kubernetes) 一個開源容器編排平台，可自動執行容器化應用程式的部署、擴充和管理。 它為編排容器提供了強大而靈活的基礎架構，使在雲端原生環境中大規模管理複雜的分散式系統變得更加容易。  ## 22\. [Docker](https://www.docker.com/community/open-source/) 一個開源工具，可簡化多容器 Docker 應用程式的管理。 它允許開發人員使用簡單的 YAML 檔案定義和運行多容器應用程序，從而更輕鬆地編排和部署複雜的服務。  ## 23\. [鉻](https://github.com/chromium/chromium) Google 的一個開源瀏覽器項目，旨在為所有使用者建立更安全、更快、更穩定的網路體驗方式。 它是開發人員在網路瀏覽技術領域做出貢獻和創新的平台。  ## 24\. [Linux 核心](https://github.com/torvalds/linux) 由 Linus Torvalds 和全球貢獻者社群開發的開源、類別 Unix 作業系統核心。 它作為各種基於 Linux 的作業系統的核心組件，提供硬體互動和系統管理的基本功能。  --- 寫作一直是我的熱情，幫助和激勵人們讓我感到很高興。如果您有任何疑問，請隨時與我們聯繫！ 透過[Twitter](https://twitter.com/madzadev)、[LinkedIn](https://www.linkedin.com/in/madzadev/) 和[GitHub](https://github.com) 與我聯繫/madzadev）！ 請訪問我的[部落格](https://madza.dev/blog)以獲取更多此類文章。
原文出處：https://dev.to/nathan_tarbert/9-open-source-repos-that-will-make-your-saas-gold-54h7 從頭開始建立軟體即服務 (SaaS) 可能是一項耗時的工作。 不用擔心，有預先配置的 SaaS 樣板可供使用，包括我將很快介紹的樣板，它可以為您提供所需的必要加速和節省時間的提升。 [](https://github.com/boxyhq/jackson) ## 什麼是 SaaS？ 我很高興您提出這個問題，簡而言之，軟體即服務 (SaaS) 是一種基於雲端的軟體模型，可透過瀏覽器向使用者交付應用程式。 軟體和基礎設施由 SaaS 供應商管理，用戶可以按需存取服務，通常採用訂閱或按使用付費定價模式 所有業務需求都可能非常不同，並且不同組織的精選功能清單也可能有所不同。 您的 SaaS 應用程式可以整合開源軟體以增強其功能並為您的用戶提供卓越的價值。 讓我們看看如何利用有價值的開源軟體來改變遊戲規則。 當您建立 SaaS 應用程式時，它為您的新興業務提供更通用、更強大的解決方案。 ___ ##。 [BoxyHQ 的 SaaS 入門套件](https://dub.sh/saas-starter-kit)這是您的 SaaS👇  使用 Next.js SaaS 樣板啟動您的企業應用程式開發。 - 透過利用開箱即用的預先建構樣板功能來促進開發。 - 顯著減少建立您自己的 SaaS 的時間，並專注於建立您的核心應用程式功能。 - 非常適合新創公司以及那些希望透過強大的開箱即用安全性來增強現有應用程式的公司。 https://dub.sh/saas-starter-kit 請加註星標 ⭐ BoxyHQ ___ ## 1. [Cerbos](https://github.com/cerbos/cerbos)  Cerbos 是一個開源、可擴展的授權層，可簡化跨多個應用程式和服務的使用者角色和權限的實施和管理。 - 在 SaaS 應用程式中自訂存取控制，可讓您定義細粒度的權限以滿足使用者的獨特要求。 - 防止對敏感資料進行未經授權的存取，並確保資料免受未經授權的使用者的侵害。 - 增強的使用者體驗，使用戶能夠精確控制他們在應用程式中的存取權限。 https://github.com/cerbos/cerbos 請加註星標 ⭐ Cerbos --- ## 2. [SuperTokens](https://github.com/supertokens/supertokens-core)  SuperTokens 是一種開源身份驗證和授權解決方案，旨在為 Web 和行動應用程式提供安全登入和可擴展的存取管理。 - 支援多種身份驗證方法，包括會話管理和 JWT，確保使用者身份驗證無縫且安全。 - 防止常見的安全陷阱，例如會話劫持和資料洩露，增強使用者對應用程式的信任。 - 透過簡化使用者身分驗證流程，改善使用者體驗，確保使用者可以輕鬆、放心地存取應用程式。 https://github.com/supertokens/supertokens-core 請加註星標 ⭐ SuperTokens --- ## 3. [Retraced](https://dub.sh/retraced)  Retraced 是一項開源審核日誌服務，用於記錄整個組織的軟體系統內的活動。 - 提供對應用程式內所有活動的詳細跟踪，使您能夠監控誰存取了您的應用程式以及他們執行了哪些操作。 - 及早發現可疑或未經授權的行為，從而能夠快速回應潛在的安全事件。 - 透過提供使用者操作和系統事件的稽核追蹤來維持透明度和問責制。 https://dub.sh/retraced 請加註星標 ⭐ Retraced --- ## 4. [unleash](https://github.com/Unleash/unleash)  unleash 可以輕鬆測試程式碼如何與實際生產資料配合使用，而不必擔心意外破壞使用者體驗。 - 控制功能推出，確保逐步引入更新和新功能，降低中斷和問題的風險。 - 在出現不可預見的問題或錯誤時快速緩解問題，使您能夠快速關閉有問題的功能，而無需重新部署完整的應用程式。 - 最大限度地減少中斷和問題的風險，確保更流暢的使用者體驗。 https://github.com/Unleash/unleash 請加註星標 ⭐ unleash --- ## 5. [ockam](https://github.com/build-trust/ockam)  促進應用層動態資料的安全資料真實性、完整性和機密性。 - 強大的安全框架，讓開發人員可以建立端到端的加密通訊通道，確保資料的真實性、完整性和機密性。 - 支援多種協議，允許安全通道跨越各種網路拓撲和傳輸協議。 - 提供身分建立、金鑰管理和憑證管理工具，這對於分散式系統中的安全通訊至關重要。 https://github.com/build-trust/ockam 請加註星 ⭐ Ockam --- ## 6. [Hasura](https://github.com/hasura/graphql-engine)  Hasura 是一個開源引擎，它透過 Postgres 提供即時、即時的 GraphQL API，並具有資料庫事件的 Webhook 觸發器和業務邏輯的遠端模式。 - 簡化從資料庫取得資料的流程，同時保持強大的安全性，減少開發時間和潛在的安全風險。 - 透過權限和基於角色的存取控制（RBAC）對資料存取進行細微控制，確保只有授權使用者才能存取特定資料。 - 透過保護敏感資訊免遭未經授權的存取來增強資料安全性。 https://github.com/hasura/graphql-engine 請star ⭐ Hasura --- ## 7. [Meltano](https://github.com/meltano/meltano)  聲明式、以程式碼優先的資料整合引擎，為開發人員提供跨各種來源和目的地移動、轉換和探索資料的工具。 旨在幫助解鎖 API 和資料庫，並促進資料和機器學習驅動的產品創意的建立。 - 支援 600 多個資料來源和目標，提供多功能整合解決方案。 - 用於管理資料管道的聲明式程式碼優先方法，這使其成為處理大規模資料的強大工具。 - 允許開發人員建立自訂連接器並整合現有資料工具，提供高水準的自訂和靈活性。 https://github.com/meltano/meltano 請star ⭐ Meltano --- ## 8. [Odigos](https://github.com/keyval-dev/odigos)  Odigos 是一個用於應用程式監控和可觀察性的開源專案，使用戶能夠主動檢測和解決安全問題。 **應用程式開發人員** - 透過利用 OpenTelemetry 和 eBPF 的強大功能來自動檢測應用程式，更加專注於編寫程式碼。利用一流的可觀測性資料為下一次生產事故做好準備。 **Odigos** - 根據應用程式的流量自動部署和擴展收集器。無需浪費時間部署和配置收集器。 https://github.com/keyval-dev/odigos 請加註星 ⭐ Odigos --- ## 9. [Trigger.dev](https://github.com/triggerdotdev/trigger.dev)  Trigger.dev 是一個平台、SDK 和 API，用於在程式碼庫中建置和執行作業，由各種來源觸發，但無需擔心管理任何複雜的編排基礎架構。它可以從任何節點使用。 - 管理逾時時間短的無伺服器平台上長時間執行的作業。 - 提供使用者一個 SDK，用於在程式碼庫中建立作業，由事件、排程事件和 Webhooks 等各種來源觸發。 - 與 Slack、OpenAI、GitHub 等流行服務的開箱即用集成，大大簡化了與第三方服務互動的過程。 https://github.com/triggerdotdev/trigger.dev 請加註星標 ⭐ Trigger.dev ___ ## 🔥 [趨勢清單](https://github.com/github-20k/trending-list)  當您的開源專案成為 GitHub 上的即時熱門時，您將透過電子郵件收到通知。 https://github.com/github-20k/trending-list 請加註星標 ⭐ 趨勢清單 ___ 🤩 合併開源專案可以為您的 SaaS 應用程式帶來全面勝利。 感謝您查看這九個強大的開源專案，您應該考慮將它們整合到您的 SaaS 中以增強其功能，從而將您的應用程式變成黃金。🥇 **支援開源軟體的最佳方式之一就是加一顆星** 🌟
開源專案是創新、協作和創造力的遊樂場。它是來自世界各地的開發人員聚集在一起分享他們的想法、技能和熱情的中心。 在本文中，我精心挑選了 24 個涵蓋廣泛興趣和技術的開源專案。 從尖端的人工智慧框架到漂亮的生產力工具以及介於兩者之間的一切，每個開發人員都能找到適合自己的東西。 我提供了直接連結、描述和視覺效果，以便您可以立即獲得每個工具的初步印象。 原文出處：https://dev.to/madza/24-open-source-projects-for-developers-in-2023-391l --- ## 1\. [ esProc SPL](https://github.com/SPLWare/esProc)（贊助） 集算器SPL是一種基於腳本的資料操作語言，與SQL資料庫集成，支援進階分析和高效能並行處理。 它適合處理大型資料集，與各種工具集成，提供資料視覺化，並跨多個平台工作。一些主要功能包括： **💪 強大的資料處理能力：** 集算器SPL是一種腳本語言，具有豐富的函數庫和強大的語法。 **✨ 預存程序等效項：** 它允許透過 JDBC 介面執行 SPL 腳本。 **📈 多功能視覺化：** 它提供了成熟的報告工具，具有廣泛的視覺化配置，用於建立各種類型的報告。 **⚡ 自動化工作流程：** 它支援軟體工作流程的自動化，包括用於程式碼建置、測試和部署的 CI/CD 流程。 **🔥 相比SQL更具彈性：** 與SQL語法不同，集算器SPL允許將資料處理程式碼寫在多條語句中。  ⭐ 支援他們的 GitHub 倉庫：[https://github.com/SPLWare/esProc](https://github.com/SPLWare/esProc) ## 2\. [Hoppscotch](https://github.com/hoppscotch/hoppscotch) 一種多功能開源 API 開發和測試工具，提供使用者友善的介面，用於發出 HTTP 請求來測試 API 並與 API 互動。 它簡化了製作和發送請求的過程，使其成為使用 API 的開發人員和測試人員的必備工具。  ## 3\. [Supabase](https://github.com/supabase/supabase) Firebase 的開源替代方案，為開發人員提供了一組用於建立可擴展的即時應用程式的工具。 它提供了強大的後端即服務 (BaaS) 平台，具有身份驗證、資料庫管理和即時功能等功能，使其成為建立現代 Web 和行動應用程式的強大選擇。  ## 4\. [Supertokens](https://github.com/supertokens/supertokens-core) 一種開源身份驗證解決方案，提供強大的安全功能和輕鬆集成，以增強 Web 和行動應用程式中的使用者身份驗證和授權。 它為開發人員提供了一個全面的工具包，用於保護用戶資料並確保無縫登入體驗。  ## 5\. [Git](https://github.com/git/git) Git 版本控制系統的官方開源程式庫，最初由 Linus Torvalds 建立。 Git 廣泛用於追蹤原始程式碼的更改，並透過提供強大的分支和合併功能來實現協作軟體開發。 ## 6\. [VS Code](https://github.com/microsoft/vscode) 由 Microsoft 開發的免費開源程式碼編輯器。 它提供了高度可自訂且高效的程式設計環境，具有 IntelliSense、除錯支援和龐大的擴充庫等功能，可增強您的開發工作流程。  ## 7\. [OhMyZsh](https://github.com/ohmyzsh/ohmyzsh) 一個流行且高度可自訂的框架，用於在類 Unix 作業系統中管理 Zsh 配置。 它簡化了 shell 自訂，提供了大量插件和主題來增強您的命令列體驗。  ## 8\. [Bun](https://github.com/oven-sh/bun) 一個開源 JavaScript 工具包，旨在簡化和優化為 Web 應用程式捆綁 JavaScript 程式碼的過程。 它提供了一種現代且快速的方法來建立捆綁包，從而增強了使用 JavaScript 專案時的效能和開發人員體驗。  ## 9\. [SWR](https://github.com/vercel/swr) SWR（Stale-While-Revalidate）是一個用於在 React 應用程式中取得資料的 JavaScript 函式庫。 它可以在客戶端和伺服器之間實現高效、自動的資料同步，提供無縫的即時更新，同時確保資料保持新鮮和最新。  ## 10\. [Prisma](https://github.com/prisma/prisma) 用於現代應用程式開發的開源資料庫工具包，透過強大的查詢產生器和類型安全的 ORM（物件關聯映射）層簡化資料庫存取和操作。 它允許開發人員使用聲明性和直觀的方法管理資料庫並與之交互，從而使資料庫操作在各種資料庫系統中無縫且安全。  ## 11\. [ElasticSearch](https://github.com/elastic/elasticsearch) 由 Elastic 開發的強大且可擴展的開源搜尋和分析引擎。 它旨在幫助用戶快速有效地搜尋、分析和視覺化大量資料，使其成為從全文搜尋引擎到日誌分析等應用程式的熱門選擇。  ## 12\. [Hasura](https://github.com/hasura/graphql-engine) 一款功能強大的開源工具，可簡化應用程式的 GraphQL API 開發。 借助 Hasura，您可以輕鬆建立、管理和保護 GraphQL API，從而更輕鬆地與資料來源互動並建立現代的資料驅動應用程式。  ## 13\. [BioDrop](https://github.com/EddieHubCommunity/BioDrop) 透過單一連結與您的受眾建立聯繫。在一處展示您建立的內容和專案。 讓人們更容易找到、關注和訂閱。  ## 14\. [Powertoys](https://github.com/microsoft/PowerToys) 適用於 Windows 的開源實用程序，可提高工作效率和自訂功能。 它提供了一系列方便的工具和實用程序，包括快速啟動器、文件預覽和視窗管理等功能，旨在簡化您的 Windows 體驗。  ## 15\. [Strapi](https://github.com/strapi/strapi) 開源無頭內容管理系統 (CMS)，使開發人員能夠快速建立強大且可自訂的 API。 它使團隊能夠輕鬆建立和管理內容豐富的網站和應用程式，為各種專案提供靈活性和可擴展性。  ## 16\. [Plausible](https://github.com/plausible/analytics) 一種開源網路分析工具，旨在為網站所有者提供對其網站效能的簡單且注重隱私的見解。 它提供用戶友好、輕量級的跟踪，且不會損害存取者的隱私，使其成為那些重視資料分析而無需侵入性跟踪方法的人的理想選擇。  ## 17\. [Astro](https://github.com/withastro/astro) 現代靜態網站產生器，透過僅傳送頁面所需的 JavaScript 來提供閃電般的效能，從而實現近乎即時的載入時間。 它將傳統伺服器渲染框架的靈活性與靜態網站產生器的速度相結合，使其成為建立高效動態網站的絕佳選擇。  ## 18\. [Remix](https://github.com/remix-run/remix) 用於建立現代 JavaScript 應用程式的 Web 框架，注重速度和開發人員體驗。 它使開發人員能夠透過無縫組合伺服器渲染和客戶端渲染的內容來建立高效能的 Web 應用程式。  ## 19\. [Tensorflow](https://github.com/tensorflow/tensorflow) 由Google開發的開源機器學習框架。 它為建立和部署機器學習模型提供了靈活且全面的生態系統，使其成為人工智慧領域研究人員和開發人員的熱門選擇。  ## 20\. [Flutter](https://github.com/flutter/flutter) 由 Google 建立的開源 UI 軟體開發工具包，以其從單一程式碼庫建立適用於行動、Web 和桌面的本機編譯應用程式的能力而聞名。 它使開發人員能夠使用單一程式語言 Dart 跨多個平台建立美觀、快速且高度可自訂的使用者介面。  ## 21\. [Kubernetes](https://github.com/kubernetes/kubernetes) 一個開源容器編排平台，可自動執行容器化應用程式的部署、擴充和管理。 它為編排容器提供了強大而靈活的基礎架構，使在雲端原生環境中大規模管理複雜的分散式系統變得更加容易。 ## 22\. [Docker](https://www.docker.com/community/open-source/) 一個開源工具，可簡化多容器 Docker 應用程式的管理。 它允許開發人員使用簡單的 YAML 檔案定義和執行多容器應用程式，從而更輕鬆地編排和部署複雜的服務。  ## 23\. [Chromium](https://github.com/chromium/chromium) Google 的一個開源瀏覽器專案，旨在為所有使用者建立更安全、更快、更穩定的網路體驗方式。 它是開發人員在網路瀏覽技術領域做出貢獻和創新的平台。  ## 24\. [Linux 核心](https://github.com/torvalds/linux) 由 Linus Torvalds 和全球貢獻者社群開發的開源、類別 Unix 作業系統核心。 它作為各種基於 Linux 的作業系統的核心元件，提供硬體互動和系統管理的基本功能。  --- 以上，簡單分享！
阿川收到網友提問如下： ``` 站長阿川您好 我是一名App工程師 從2013年第一份工作到現在近10年 這十年我從工程師到資深工程師到管理職位都有相關經驗 一共經歷四份工作 離開公司原因大多是與人理念不合 今年邁入40歲 目前在一間外商工作 年薪約200左右 最近又再找尋新機會 但是相關職位看到我的經歷常常被拒絕 因為該職位不想要這麼資深的 不然就是年薪必須砍半 最近有一個機會可以加入幾個創業家所組成的公司 缺點是薪資可能只剩下現有的1/3 優點是可以接觸相關人士學到創業可能所需的技能 也可以藉由這樣機會建立屬於自己的產品一步步養活自己 在網路上看到您的文章彷彿醍醐灌頂 也對於長年職涯生命握在別人手上感到非常不適應 但是我明白產品可能不是自身想像那麼容易打造 不過我仍想試試看 不知道您這邊是否有什麼想法可以對我未來要走的路提供一些建議 非常感謝您撥空看完 ``` 這主題很好，我決定單獨寫一篇文章討論這件事情，跟大家分享一下 --- 首先，這位朋友目前的工作狀況，外商、200萬年薪，如果工作壓力不大、下班時間正常，辦公室氣氛融洽 這麼好的條件，如果放棄這份工作，實在相當可惜！ 有沒有考慮利用下班＆週末的時間，寫一些自己的作品、app，試試看？ 一人獨立開發，或者找朋友一起經營，都可以，做完之後，到相關的 FB 社團、批踢踢看板，宣傳一下 會學到很多商業、經營、行銷的技能，會很好玩 也或許，你會發現要做的事情太多、太雜、太難，你會滿不適應的，那樣的話，你會重新看見現職公司的美好 --- 再來，如果目前的公司實在很煩，除了高薪之外，工時、工作內容、環境壓力，你根本通通都不喜歡、鐵了心想要離職 那麼眼前的選項就是 - 找類似工作，薪水變二分之一 - 前往新創嘗試，薪水變三分之一 這樣的話，我有一個小原則跟你分享 # 職涯判斷技巧：Ctrl+Z 不心痛原則 這是我發明給自己，在面臨重大決定會用的一個原則 Ctrl+Z 是工程師每天會用到的快捷鍵：「恢復上一動」 在面臨選項的時候，可以去想想：「恢復上一動」的成本會很高嗎？ ### 「我該先做哪一個決定，到時反悔的話，可以 Ctrl+Z 不心痛呢？」 舉例來說，社會新鮮人有點想考公務員 vs 想去業界上班看看 如果先考公務員，工作之後迷惘，想辭職去業界，這時「Ctrl+Z」的成本就非常高，因為當初花了數個月準備國考 如果先去業界上班，工作之後迷惘，想去考公務員，這時「Ctrl+Z」的成本就低很多，因為當初就是花一些時間面試而已 所以迷惘的社會新鮮人，我都是建議先去業界面試看看，再去考公務員 --- 再舉一個例子，年輕工程師想去大公司面試 vs 想去新創面試 大公司面試流程很多、面試成本很高，去新創通常聊一個下午就錄取了 所以迷惘的年輕工程師，我都是建議先去新創工作看看，如果之後再去大公司上班，心態就會很穩，因為你知道新創時髦的外表底下，其實愚蠢的地方也不少，你會比別人更看見大公司的美好 如果到了大公司才嚮往新創，到時再次反悔、重新面試大公司的成本就高很多、這樣很浪費時間 --- 我認為現代人，不管做什麼選擇，一定都會覺得迷惘、好奇當初沒做的那個選擇、常常會有遺憾 所以重點不是「如何第一次就做出正確決定」，因為做不到 重點是「**我該先做哪一個決定，到時反悔的話，可以 Ctrl+Z 不心痛呢？**」 這種路徑，比較不留遺憾，因為各種路都走過了，並且算是一種逐漸認識自己的過程 這樣做決定，會容易許多吧！我自己都是這樣做的～ --- 以這位網友面臨的狀況： - 降薪50%去類似環境的大公司上班，然後繼續迷惘新創公司是什麼樣子 - 降薪66%去新創公司看看，然後可能很喜歡、也可能發現是在浪費時間 如果選後者，去工作半年一年，真的不喜歡，頂多就是回去找大公司面試，這樣「Ctrl+Z」的成本也不高吧？ 我會覺得就去新創看看也沒關係，因為之後反悔的成本也沒多高，而且這種事就是體驗過才知道 # 結論 其實創新、創業，極度困難、要做的事情也很雜亂 在我跟各種新創公司合作的經驗來說，很多時候其實也是浪費時間、有點像在幫老闆圓個人夢想，產品本身很爛。當然我也跟很多優秀新創合作過、學到很多寶貴技能 總之去新創不一定好玩，也不一定學得到東西 但我認為有策略性地、管理好各種職涯選擇的成本、在過程中認識自己、增廣見聞、降低迷惘，是很重要的 這位網友如果本身有房貸、車貸、家庭孩子要養，那麼這個抉擇確實非常困難 另一方面，職業生涯不是只有充實金錢＆地位，能夠充實人生經驗＆體驗，也是很有意義的，不是嗎？ 建議靜下心，好好的幫自己分析一下、聽聽看內心的聲音，新選項真的讓你有「義無反顧」的感覺嗎？ --- 我另外還有一些幫助工程師觀察「眼前這位迷人的創業者，有沒有可能是個地雷」的技巧，有機會再跟大家分享吧～！ 以上，簡單幾點分享，希望對大家有幫助，祝各位都有滿意、幸福的職業生涯！
上一篇文章談了「同時上班＆接案＆創業」的簡單策略 我發現滿多人對於接案這塊比較感興趣，提了很多問題 我簡單分享一些心得＆建議 --- > 請問原po，在準備接案有想過：我的能力已經足夠接案，這種類似的想法嗎？ 這幾年因為 freelancer 的身份，在一些活動、場合會遇到各種領域的 freelancer 每次遇到這些新朋友，我都會問：你是如何開始的呢？ 我發現有 90% 的機率，得到的故事都是以下這樣： 「我工作幾年之後，在 XX 年的時候離職，想說休息一下，看看之後要幹嘛。這時候有前同事來問：他那邊有人在問誰能接案，能否幫忙？」 「我就先接下來，想說那做完這筆，之後再看要不要找工作。結果做完之後再休息一下，這時又有朋友來問，能不能接某個案子。」 「我就又接一個，然後再休息一下，反正不急著找新工作。就這樣加減接案，做一陣、度假一陣。過了幾個月、幾年之後，有一天發現：我好像可以一直這樣下去。」 所以根據我個人經驗＆觀察：根本沒有人會下決心說，我要從此離職，轉身變成一個全職 freelancer 都是工作轉換的空檔，自然發生的。如果案子沒了，那就開始找工作上班，幾年之後離職休息，上面的故事會再重複一次。 所以重點是：為什麼這些人在轉換的空檔，會有人來問？ 其實就是 1. 在工作上的表現不錯，同事、主管、合作廠商、親朋好友都覺得你值得信賴 2. 有稍微經營個人品牌，身邊的人稍微知道你是做什麼的，然後根據互動經驗覺得你「溝通能力」不錯，會讓人想合作 3. 你稍微有一點勇氣，能夠接受這種「休息一下，想想看之後要幹嘛」的狀態長達數個月之久，很多人在這狀態會很緊張，急著找新工作 然後一些有趣的事情，可能就會自然發生。當然你需要有一點點積極、願意擁抱未知，大概是這樣 --- > 我其實不清楚到底要做到什麼程度？業界常用的必備工具有沒有掌握？發生問題解決辦法能不能處理？ 不論是工作、接案，基本上就是養成「挑戰能力範圍之外一點點」的習慣 不要超出能力太多，會被壓力擊倒、會開天窗、你誠信會出問題 不要完全做已經熟悉的事情，這樣沒有進步，久了會有點無聊 就做超出能力一點點的事情，常常這樣的話，久了自然會有把握＆經驗 這需要時間累積，沒有捷徑、沒有秘訣 --- > 哥有推薦接案的案源嗎 根據我的經驗，你在台灣註冊任何接案平台，或者去 FB 社團搶案子之類的，案件內容＆報酬都會「有點悲劇」 這沒辦法，平台化的東西，大家就是殺價競爭、紅海市場廝殺，比誰更樂意壓榨自己 你就算用英文搜尋，找國外接案平台，狀況也差不多，沒有好到哪去 所以我不推薦任何案源，我推薦你經營個人品牌。雖然有點丟臉，好像讓親朋好友看到你在老王賣瓜 但是行銷就是這樣，你多少要推銷自己一點，不然看起來一點自信都沒有，誰又能放心付個高價錢給你做案子呢？ 那怎麼經營個人品牌？參考我後面的回答 --- > 希望能分享關於案源品質管控的部分（怎麼避開爛專案）🙏 如果你很外向、具有那種油條的業務性格，那你就多多跟各種客戶談生意，多多談判，累積經驗就行 如果你很內向、不具有那種談判性格，實在很怕踩雷，那我建議你：只跟你喜歡的人合作 在 LINE 上打字、Email 往來的時候，感覺對方連話都講不清楚嗎？那你們實在溝通方式有差，建議婉轉拒絕吧 用 LINE 語音，或者視訊軟體開會，感覺對方有點城府，你有一點怕他嗎？那你們做人處事原則大概很不一樣，建議婉轉拒絕吧 實在很想避開爛專案，那就只跟你覺得「跟這個人當朋友好像也沒問題」的案主合作吧！ 當然工作機會，會減少很多，但是，你跟案主互相折磨、互相為難、互告上法院的機率也會減少很多 --- > 想問有建議其他職業的做法嗎？ 抱歉我比較熟悉寫程式領域 但其他職業的話，我覺得經營個人品牌總是不會錯 我滿建議大家 1. 部落格 2. Podcast 3. YouTube 4. 短影片 選擇一種格式來創作，分享一些東西，目標不用高，就花幾年時間，試著經營出 1,000 粉絲就好 分享什麼？結合你的興趣 or 專業，弄點「好笑的有趣的」或「有知識技術含量的」或「能幫讀者省錢或避免踩雷或有利益可圖的」內容，就這些即可，總是會有讀者，因為看到根本賺到 這過程會學到行銷、推銷、品牌、定位，很多很多商業基本知識，零收入沒關係，就是一種商業練習 千萬不要眼高手低、整天空想、整天焦慮沒完沒了，想要搞很大，過了好幾年還是 100 粉絲都沒有 慢慢來吧，但務必要有點進度、養成進步的習慣 以上，簡單幾點分享，希望對你有幫助
某種角度來說，我認為當工程師是很幸運的，能有兩種角度去經營個人品牌：菁英路線 vs 社群路線 --- # 菁英路線 菁英路線就是想辦法得到頂尖軟體公司的認可，比如說 Google Facebook Microsoft IBM 或者台灣本土一些知名軟體公司 或者矽谷一些設點在台灣的軟體公司 這種通常要刷 LeetCode、做大量面試準備、可能大學學歷也要很好看 這種履歷表一但有了一間，後面一間一間換，整個履歷表看起來就很漂亮 薪水好 社會地位高 大家都覺得你超猛 但這路線只適合少數人 # 社群路線 社群路線我覺得簡單、好玩很多 就是每當你的實力有所成長，就找機會大方分享 不論是寫網誌、報名 conference 分享、報名小聚分享 或者參與 open source 討論、發 PR、在 stackoverflow 問答 都是很好的貢獻方式！重要的是，這些貢獻最好能量化、有相關網址連結，在投履歷的時候可以附上 也可以在個人檔案頁面附上，這樣才能越累積越多、讓人一目瞭然 如果是在聊天室參與討論、在 FB 社團參與討論，就很可惜，相關貢獻沒辦法變成單獨網址、附上履歷表 這種路線經營一陣子後，在業界的工作機會、接案機會、合作機會，也會多很多 --- 第一條路線是面對少數人，爭取他們的認同，也就是其他精英、以及公司面試官的認同 第二條路線是面對社群，爭取他們的認同，也就是面對社群五花八門的意見、各類不同族群 就我個人來說，我是走第二條路線，這跟個性有關 --- 身為軟體工程師，我認為至少要在其中一種路線，稍微有所經營 職業生涯上，才會有點安全感，不然會常常有被淘汰的擔憂、面臨社會新鮮人競爭的擔憂
阿川收到網友提問如下： > 阿川您好 我是一位工業設計師，最近想轉職前端工程師，但年齡已38，有爬過一些文章大部分是說年齡確實會是就業一個限制但我想這在所有的行業大概都一樣，但同樣的能力和薪水要求如果企業可以用一個20幾歲的又何必用一個快40歲的人也是一個不爭的事實，想請問前輩的看法~ 非常感謝 > 我說明一下想轉職的原因， 1.評估一 下自己的人格特質 喜歡研究、解題(像是在工業設計需要3d建模，遇到建不出來的造型會不眠不休的找答案解出來並且從中得到成就感) 2.有設計美學基礎應該可以替成為前端工程師加分 3.軟體工程師遠端工作的機會較多，這樣找公司比較沒有地域限制 我在這邊寫一篇公開回答跟大家分享，給類似狀況的人參考。 --- 首先，我自己指導過年紀最大的，是31歲私立科大夜間部，原職餐飲服務業，之後順利轉前端。應該很少人比這背景更「非本科」 但我確實沒有指導過38歲的，所以我請這位網友先進我們 LINE 群組跟大家聊聊，裡面一堆工程師＆正在轉職的新手 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 我看了一下對話，大家鼓勵、勸退的意見，大概各一半，下面分享我的看法 --- 首先，我認為設計師出身，來寫前端的話，做出來的介面一定「非常漂亮」 站在雇主角度，能雇用這種前端工程師，一定是很難得，何況還是付 junior 的薪水！根本賺到吧！ 而且看這位網友的自我描述，感覺是喜歡研究、對細節在乎的人，這是滿適合工程師的特質 所以光論背景＆態度，我覺得滿適合轉職前端的，可能上班會被公司凹同時做設計師＆工程師 但一開始如果真的找不到工作，就給人家凹個半年一年，可能忍耐一下吧，畢竟有工作經驗＆作品集，之後工作會更好找 --- 接著，關於年齡的問題 這不是一個非黑即白的二元問題，沒有說超過30或35就一定不行、來不及之類的 本來就是程度問題，年齡越大就越有挑戰性，我是覺得38還好呀，還是有公司缺人 何況接案公司之類的，甚至本來就流動率高一點，又不是終生雇傭制，只是雇用你工作幾年而已，不會不合適呀 我期許這位兄弟，在新手練習階段，就做一些「超漂亮」並且「設計完成度遠超過一般轉職者」的網頁 這樣絕對會讓面試官印象深刻，這也是你的優勢所在 --- 再來，談一下花費的問題 很多人半路出家，是未滿30歲，拿政府補助去全職補習班 那些補習班自費的話，大概要十萬元 既然你沒有政府補助可以用，請先大量找免費或便宜的教材，先吸收，多試幾份，真的卡關了，再開始挑補習班 我本人就有設計一套「練功作業包」，我鼓勵所有正在轉職者，拿去搭配、練習 https://codelove.tw/courses 我有一些讀者根本沒去補習，光是寫這份作業包，就直接去面試＆開始上班了 --- 最後，這位網友在最開始有提到兩件事，我順便說明一下 ### 有設計美學基礎應該可以替成為前端工程師加分 -> Yes，加分，加爆了，這是很棒的技能組合 ### 軟體工程師遠端工作的機會較多，這樣找公司比較沒有地域限制 -> Yes，的確比一般職缺，WFH 的機會多很多，但是，就我觀察，在台灣，遠端彈性大到可以允許你「跨縣市」的公司，沒那麼多喔 通常是混合辦公居多，也就是一星期幾天在家、幾天進公司。所以，這方面不能太天真，請多多打開人力銀行 or 相關 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 有問題歡迎直接留言與我討論！
在我們新手寫程式 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 群組，有幾個業界工程師＆想要轉職的新手在討論： 實體補習班、線上補習班、不花錢自學，推薦哪種方法？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 看完大家的討論，我決定整理大家的討論內容，寫一篇指南 --- 我認為半路出家者，經濟壓力很大，要兼顧成本＆時間，以下是我推薦給大家的判斷方法 首先，先教大家怎麼挑選程式語言，你可能在考慮 PHP JavaScript Python 之類的 各種程式語言，通常會跟產業類型相關，不同產業偏好不同程式語言 請打開人力資源網站，看看各語言有哪些職缺、以及職缺數量，看看這些公司是不是你有興趣的 然後看看這些職缺「無經驗可」的比例如何，很多的話表示歡迎半路出家者 還是通通都要求「一年以上工作經驗」，那就表示不歡迎半路出家者＆新手 很多台灣的程式語言 FB 社團也可以先加，裡面很多職缺資訊，就一起看看 先鎖定幾個你覺得可行的程式語言，接下來進入以下流程： # 先問自己第一個問題：我身邊有沒有可以請教的工程師？ 兄弟姐妹、或是很熟的朋友、同學，都可以，要是一個你「極度信賴」的人 這樣他幫你推薦大方向時，你不用擔心他在敷衍你 他不用像保母一樣每天在你旁邊陪你、幫你解答問題（這樣是在凹他） 但在你卡關的時候，至少可以跟他請教解決的方向 然後他最好可以協助你找「技術書籍」、「免費/便宜影音課程」 如果這題的答案是 YES，你有機會在極少花費之下，就轉職成功 如果答案是 No，請往線上補習班的方向查詢，進入下一個問題 # 第二個問題：這間線上補習班有沒有導師、助教制度？ 這類課程收費大概數萬元，通常會幫你排進學期內，安排導師、助教，自己在家看影片 我推薦這方向，是因為在教室上課，你可能跟不上，會很悲劇 在家看影片，可以按照自己節奏、可以重複觀看 因為你付了數萬元，卡關時，趕快請教導師、助教 我認為這方向不錯，費用也合理，缺點是，線上補習班的選擇不多，你想要的程式語言，可能沒有業者在開課 如果這題的答案是 YES，多查一下學員心得分享、確認一下學員就業成功率，就上吧 如果答案是 No，請往實體補習班的方向查詢，進入下一個問題 # 第三個問題：有沒有政府補助可以申請 這類課程大概要求你全職上課半年左右，收費十萬元以上 我聽過太多進教室之後跟不上進度，花費半年、十幾萬元，最後轉職失敗的慘痛案例 職訓局、勞工局、勞動部，有時會有一些補助可申請 如果政府出錢，那就去吧，至少風險少很多 --- 如果以上問題答案通通都是 No 那就是要自己出錢、花半年去教室上課了 請務必貨比三家、謹慎再謹慎、多查詢學員心得分享、確認就業成功率 值得一提的是，有些小班制的業者，老師極度有經驗＆教學熱情，你會看到超多推薦心得文 如果查資料過程中，發現這種老師，那就沒問題，他將會是你的貴人 如果是大品牌、大班制，你拼一波就報名了，我真的覺得很像在賭博，賭你會遇到好老師、賭課程安排你吸收得了 就我的觀察，這些大品牌，很多課程內容，實在太包山包海了，我看了很不喜歡，我覺得90%學員會吸收不良，什麼作業跟專案，簡直就是助教在幫你寫，只是貼一貼改一改，跑得動就畢業了，學員自己心裡都很不踏實 多花點時間查畢業學員評價吧，也多跟業者詢問、聊聊，真的心動了，就衝吧，也沒其他方法了 以上，簡單幾個問題，希望對你找方向有點幫助！
除了幾間知名的人力銀行網站之外 有些ＦＢ社團也常常有職缺資訊，可以逛一下 https://www.facebook.com/groups/javascript.tw https://www.facebook.com/groups/javascript.html.css.node https://www.facebook.com/groups/f2e.tw 還有像這種 github 頁面也有職缺 https://github.com/f2etw/jobs/issues 加油囉各位！
合作對於開發高質量程式碼至關重要。在本文中，我們將探討結對編程的概念，揭示其優點並推薦有用的工具。我們還將打破一些關於結對編程的常見誤解。 原文出處：https://dev.to/documatic/pair-programming-best-practices-and-tools-154j ## 什麼是結對編程？ [結對編程](https://en.wikipedia.org/wiki/Pair_programming) 是一種讓兩個開發人員一起完成同一任務的技術。在這個過程中，一個人編寫程式碼（驅動程序），另一個人檢查每一行並提供反饋（導航器）。這種方法不同於傳統的單獨編程，並具有多種優點。 驅動程序的職責是專注於操作計算機和輸入程式碼的機制。導航員的責任是思考需要做什麼以及我們要去哪裡。兩人會不斷地溝通並頻繁地轉換角色，可能每隔幾分鐘。  ## 結對編程的好處 ### 提高程式碼質量 當兩個軟體工程師一起工作時，他們可以快速發現彼此的錯誤，從而產生高質量的程式碼，從而顯著減少遺漏錯誤的機會。編程合作夥伴可以提供寶貴的見解、提出改進建議，並在做出承諾之前獲得有關其想法的反饋。 例如，在處理編碼問題時，一個軟體工程師可以專注於實現解決方案，而另一個軟體工程師則監視任何錯誤或語法錯誤。這樣，團隊就可以建立更清晰、更實用、更優化的程式碼。 ### 加強協作和溝通 結對編程還增強了兩個開發人員之間的協作。它幫助他們在相同的程式碼庫上工作並分享他們的知識和技能，從而更好地解決問題。它還解決了同事之間的溝通鴻溝，因為它促進了溝通，實現了快速、輕鬆的訊息共享。 例如，在開發新功能時，一名軟體工程師可以解釋他們的思維過程和想法，而另一名軟體工程師可以提供反饋並提出問題以澄清需要做什麼。這樣，團隊就可以共同尋找最佳解決方案並避免誤解。 ### 提高生產力 結對編程可以提高開發團隊的生產力。當兩個軟體工程師一起工作時，他們可以通過分擔責任更快地完成任務。一個可以解決問題，另一個可以搜尋潛在的錯誤。這樣，團隊就能比單獨工作更高效地解決問題、更有效地工作。這也取決於個人，一些軟體工程師在單獨工作時效率更高。 例如，在一個專案上的兩人合作中，一個人可能需要一兩個小時才能完成一項單獨開發人員需要三四個小時才能完成的任務。第二對可以專注於查找程式碼中的錯誤或其他問題。這意味著團隊可以用更少的時間和更少的精力完成任務，從而提高整體生產力。 ## 關於結對編程的誤解 在討論結對編程的最佳實踐之前，讓我們先澄清一些關於結對編程的誤解。 ### 誤區#1：結對編程很昂貴 這是關於結對編程的一個常見誤區。但實際上，這是對團隊生產力、程式碼質量和創新的投資。從長遠來看，通過及早發現錯誤可以節省時間並降低成本。所以，這不是真的。 ### 誤區#2：結對編程很慢 結對編程比其他編碼方法更快，因為它允許快速更正。當兩個開發人員協作時，他們可以避免許多錯誤和錯誤並加快問題解決速度。因此，除非開發人員只是為了好玩而不是高效地工作，否則這是不正確的。 ### 誤區#3：結對編程導致緊張 一些人認為結對編程會給開發人員帶來太大壓力，導致工作場所發生衝突。然而，這種情況只發生在該技術實施不佳的情況下。這取決於您與編程夥伴的關係如何。如果它很好，那麼這不適用於你。 ## 結對編程的最佳實踐 為了充分利用結對編程課程，請考慮遵循以下最佳實踐： ### 明確定義角色 明確界定駕駛員和領航員的角色。駕駛員編寫程式碼，而導航員檢查程式碼並提供反饋。經常切換角色以保持兩位開發人員的參與並避免一個人主導整個會話。  ### 有效溝通 結對編程期間，溝通至關重要。雙方開發人員都應該積極參與，表達自己的想法，並認真傾聽。分享想法、提出問題並公開討論程式碼。使用螢幕共享和程式碼審查平台等協作工具來促進溝通。  ### 尊重和同理心 相互尊重和同理心對於成功的結對編程至關重要。重視彼此的意見、想法和專業知識。對建設性批評持開放態度，避免人身攻擊。建立一個鼓勵協作和學習的支持性和非評判性環境。  ### 休息一下 結對編程可能對智力要求很高。定期休息對於防止疲勞和保持工作效率非常重要。利用這些休息時間反思進展、討論挑戰併計劃下一步。請記住考慮彼此的精力水平並相應地安排休息時間。  ### 擁抱學習機會 結對編程是學習和技能發展的絕佳機會。與您的合作夥伴分享知識、技術和最佳實踐。對新想法和方法持開放態度。鼓勵參與的開發人員不斷學習和成長。  ### 練習主動程式碼審查 利用結對編程的力量來持續審查和驗證程式碼。討論潛在的改進、及早發現缺陷並解決設計缺陷。利用兩位開發人員的專業知識來確保程式碼具有最高質量。  ### 計劃並設定目標 在開始結對編程課程之前，討論並調整手頭任務的目的和目標。將工作分解為更小的、可管理的部分。設定明確的里程碑並確定任務的優先順序，以保持重點和進展。  ### 記錄和分享知識 在結對編程會議期間做筆記，以記錄重要的討論、決策和見解。建立可以與團隊共享的文件，有助於傳播知識並確保整個專案的一致性。  ### 反思和改進 完成結對編程課程後，花時間反思這次經歷。討論哪些方面進展順利，哪些方面可以改進。根據反饋和經驗教訓不斷完善您的結對編程實踐。  *通過遵循這些最佳實踐，您可以最大限度地發揮結對編程的優勢。協作和程式碼質量將得到改善，開發人員將有機會增長他們的技能和知識。* ## 結對編程工具 為了充分利用結對編程，開發人員可以依靠各種工具來簡化流程。以下是一些可用的最佳工具： ### 實時分享（VS Code） [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 是 VS Code 的擴展。它包含在最新版本的 VS Code 中。該工具使使用 VS Code 的開發人員能夠實時協作。  ### Replit [Replit](https://replit.com/) 是一個在線工具，可讓您與其他開發人員協作，而無需下載或安裝任何額外的軟體。您所要做的就是打開網絡瀏覽器，然後就可以開始了。如果您只是需要與其他人一起實時編輯程式碼，那麼它是完美的。 Replit 的一大優點是它支持 50 多種編程語言，使其具有多功能性並適合廣泛的專案。  ### CodeSandbox Live [CodeSandbox](https://codesandbox.io/blog/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser) Live 是一項實時協作功能，使開發人員能夠在同一平台上工作實時專案。借助 CodeSandbox Live，多個開發人員可以同時處理同一個程式碼庫，從而更輕鬆地協作處理複雜的專案。  ### Codeanywhere [Codeanywhere](https://codeanywhere.com/) 是一個基於雲的集成開發環境 (IDE)，允許開發人員使用任何具有網路連接的設備從任何地方編碼、協作和管理他們的專案。它提供了一套全面的工具和功能來促進編碼和簡化開發工作流程。  ### [CodeTogether](https://www.codetogether.com/) CodeTogether **允許您通過 Eclipse、IntelliJ 或 VS Code 主持和加入協作編碼會話**。來賓可以從安裝了 CodeTogether 的自己的 IDE 加入會話，即使它與主機的 IDE 不同。訪客還可以通過任何現代瀏覽器加入會話，無需進行任何設置。  ## 結論 最後，結對編程對於軟體開發人員來說是一種非常有效的技術。它增強了協作、程式碼質量、團隊生產力和許多其他方面。遵循最佳實踐並使用適當的工具是成功結對編程的關鍵。
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
