CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：Gpt

🔍 搜尋結果：Gpt

如何寫文章：與世界分享您的知識！

分享書面知識是掌握特定主題的好方法，也是改善社區中思想組織、溝通和明顯自我推銷的好方法。這種技術和社會文章的製作對於寫作者和閱讀者來說都非常重要，永遠記住：「你今天比那些昨天開始的人知道的更多」。 ## 費曼方法以及為什麼要製作內容 首先，我們需要討論為什麼我們應該分享內容，無論是文字格式（本文的重點）還是任何其他格式。為了開始這個討論，重要的是要了解費曼的方法是什麼，以及它如何幫助我們自信和掌握該學科，從而將學習效果提高 10 倍。 費曼方法是由一位非常重要的物理學家理查德·費曼建立的，目的是開發一種新的學習方法，這個新提議假設了一個核心事實：「如果你不能清楚、簡單地解釋某件事，那麼你就還不算搞懂這件事」 這句話有助於我們思考我們的學習應該如何建置，因為從我們開始考慮教授我們正在學習的內容的那一刻起，我們就更加專注於掌握該學科的基本基礎，並為迫使你學習的疑慮做好準備。另一方面，看起來問題完全不同。 當為此類情況做準備時，明顯的結果是對所研究的主題有極大的信心和掌握。 我特別喜歡這種方法，唯一的問題是，當我們離開學術環境時，很難找到對你現在正在學習的同一學科感興趣的人，要么因為你的學校裡沒有IT人。友誼週期或僅僅因為對特定主題有興趣。 對於這個問題我們有一個非常不可思議的解決方案，叫做「公共學習」！這種做法包括在技術社群線上分享您的學習內容，無論是製作影片、進行直播還是本文的目標：寫作！ 像 dev.to 這樣的平台（您現在正在使用它閱讀：D）旨在使「公共學習」的想法變得越來越簡單，並且更接近那些正在消費的人，因為現在可以製作能夠達到的文章與我們有相同興趣的人可以：學習、回答問題甚至提出改變和正確的想法。難以置信，對吧？ ## 收集想法並激勵自己寫作 ![寫迷因](https://github.com/cherryramatisdev/public_zet/assets/86631177/66b243e4-5d12-4901-929f-d458db2b6fe0) 靈感過程可能是在線撰寫文章之前最煩人的階段之一，我們經常陷入瘋狂技術的無限循環中以提出令人難以置信的想法，而事實上，解決方案最終非常簡單：接受你的想法並消費它們，盡可能多的內容。 尋找想法並建立自己的語言的最實用方法是閱讀其他人已經就您感興趣的主題發表的文章，無論是程式語言還是特定的 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 不允許區塊內有區塊，所以我選擇用截圖來展示： ![程式碼區塊](https://github.com/cherryramatisdev/public_zet/assets/86631177/61de98aa-e7bb-4baa-91c4-afca9db2991f) 在「反引號」符號之後，我們可以包含語言的名稱（在我的例子中為 ruby），以便 dev.to 可以啟用特定於該程式語言的語法突出顯示。 ### 目錄 如果您的文章超過兩千字邊距或至少有 4 個主要標題，我強烈建議您定義一個「目錄」或「目錄」。目錄用於指導閱讀本文將要介紹的要點。要建立一個目錄，我將在下面示範一些技巧： #### 在 dev.to 平台上，使用無序列表而不是編號列表 Markdown 中的清單使用起來非常簡單，它們有兩種**主要**類型：無序和編號。 ``` - Uma lista - Não - Ordenada 1. Uma lista 2. Numerada 3. Aqui ``` 在 dev.to 中使用編號列表的問題是它們沒有對齊，正如我們在下面的範例中看到的那樣，所以我通常不建議使用它們，我總是嘗試使用無序列表，如果有必要應用一些順序，在手動未排序的列表符號後使用數字。 ![清單沒有 dev.to](https://github.com/cherryramatisdev/public_zet/assets/86631177/0ab1a9c1-efb3-40d5-b90f-7cacb7d20f77) #### 如何組織標題的連結 假設您已經了解如何在 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-行銷傳播、電子郵件或社交媒體。開頭段落的範例可以在您正在閱讀的同一篇文章或我在下面留下的其他文章中找到： ![段落初始範例 1](https://github.com/cherryramatisdev/public_zet/assets/86631177/a76e0a72-60a7-4864-b2e9-f43922a8e0fb) ![段落初始範例 2](https://github.com/cherryramatisdev/public_zet/assets/86631177/64fc0d55-eed4-4c81-b4cf-193cf0d594a6) 我們的想法是始終在文本中使用問題和停頓，以便我們能夠實現直接的對話式交流，並始終嘗試以最普遍的方式呈現情況，以便任何閱讀者都非常好奇並願意閱讀。 在第一段演示之後，定義[目錄](#table-of-content) 來引導使用者了解文章的主要標題非常重要，在這方面我個人不建議列出副標題標題旁邊，因為它們使目錄變得非常大，對於閱讀者來說不是很有用，顯然，如果您認為列出字幕非常重要，那麼完全值得包括在內。 轉到文章的正文，我們進入一個非常主觀的領域，因為它在很大程度上取決於所涵蓋的主題以理解其標題和段落的結構。我將假設簡單教程模型中的一篇文章能夠從某個地方開始。 我總是建議使用三個“附屬標題”來指導您的文章並提供靈感以通過更多細節擴展內容。這些衛星標題如下： -「技術或問題簡介」：這段將幫助我們詳細說明文章開頭所說的內容，回答我們為激發好奇心而建立的問題，並更深入地研究將與特定主題一起討論的主題。 - `優點與缺點`：此時我們將明確本文將介紹的解決方案的優點和缺點，無論是架構、程式碼標準、語言、框架等。根據您的主題，此段落的存在可能非常具體，但如果您以教程的形式呈現解決方案，它通常非常有用！ - `結論`：這一點更多的是一種意見，而不是一般規則，但我認為有一個段落將表明閱讀過程的結束是非常重要的，這樣我們就可以留下最終的論點，謝謝，聯繫方式以及任何其他有趣的訊息。 圍繞著這三個主要標題，我們可以用說明性的寫作來發展我們的文章，提供實際的例子或類比，使讀者更容易想像問題和解決方案。同樣重要的是要強調在過於深入地進行類比時要小心，它們非常有用，但是當你濫用它們並且永遠不會帶著明確的解決方案和解釋回到現實世界時，它們可能會成為一劑強心針。 關於文章結構的一般提示是保持閱讀光線的總體感覺，因此強烈建議使用圖像（無論是放鬆的表情包還是更好地說明所要表達的觀點的圖形），因為開發人員.to平台支持更多非正式技術人員的文章，濫用這種更接近的語言是一個非常準確的策略。 ## 如何複習並提升寫作水平 ![程式碼審查迷因](https://github.com/cherryramatisdev/public_zet/assets/86631177/ba71cb93-5734-423f-ab32-7718bf5bca5d) 好吧，現在我們已經很好地了解瞭如何建立我們的文章、如何使用 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

0個讚   0留言 193瀏覽

Giskard 如何獲得第一批 1,200 顆星！

要將其作為影片觀看，請查看此 **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 美元**。 ![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/75633df4-1274-46e2-b1b4-a179cb45a4fb/image.png) --- 錯誤的副產品？ ---------------------- 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

0個讚   0留言 131瀏覽

您使用 ChatGPT 的方式不正確！

這是何等的指責啊！噓！ 我知道這對於部落格文章標題來說可能有點過分，但讓我解釋一下。 ## 我的辯護😅 我在最近參加的技術會議上遇到了這個問題，一位觀眾問小組發言人， _“ChatGPT 會取代我們的工作嗎？”_ 儘管這個問題在人工智慧技術時代已經變得很常見，但那天演講者的回答給我留下了深刻的印象。 該人士表示， _「不，我們不一定會因為 ChatGPT 而失去工作，但我們可能會因為知道如何更好地使用 ChatGPT 的人而失去工作。」_ 叮！這讓我懷疑我是否有效地充分利用了 ChatGPT 的潛力。 所以今天，我在這裡承認我一直沒有充分利用ChatGPT，並介紹一些更有效地使用它的方法，我將與大家分享。 在這篇文章中，我們將深入探討身為工程師在日常生活中如何充分利用 ChatGPT 和其他人工智慧驅動的生成模型。 為了實現這一目標，**我們將探索開發人員可以採用的一些最受歡迎和最有用的提示模式。** **敬請關注！** 其中一些技術可能是您在沒有意識到的情況下已經使用的技術，或者是您將來可以利用的技術。 但首先， 讓我們花點時間考慮普渡大學的一項有趣的研究發現。 ## 一項有趣的研究 ![研究](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tddc12x6hj8az76shne1.png) 根據普渡大學最近進行的一項研究，當ChatGPT 收到來自Stack Overflow 的大約517 個程式設計問題時，**它在52% 的情況下提供了不準確或非功能性程式碼的答案。** 該研究也顯示ChatGPT 的表現在正確性、全面性、一致性和實用性方面落後於 Stack Overflow。 ![hollucinate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7qdqvew93d0fw5qw42x.png) 此外，我們中的許多人可能都經歷過人工智慧「**幻覺**」的情況，它會產生令人信服但不正確的答案。 這讓我們相信我們有能力驗證人工智慧提供的答案。 為了有效地做到這一點， **我們需要知道如何提出正確的問題並正確地建造它們。** 讀完這篇文章後，我一點也不感到驚訝，因為我的 ChatGPT 一直在為我提出錯誤答案而道歉，這可能很有趣。😂 ![ChatGPT 道歉截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxorsnskrrd4sqdqntcz.png) --- ## **今天的 4 個提示模式** 拋開笑話不談，現在讓我們深入探討四種提示模式，這些模式有助於使 ChatGPT 的回應更有意義、更準確，並且更符合我們問題的意圖。讓我們從一些標準模式開始。 ### 👉 模式 1 ![角色](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awl7ufo4xnez4ncb4coq.png) 首先是「**角色模式**」。使用這種模式，我們可以指導 ChatGPT 產生針對**特定觀點或觀點**定制的回應。這對於我們專業領域中常見的程式碼審查、架建置議、技術討論和想法特別有用。 --- ### 👉 模式 2 ![2食譜](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wghlc1u7qmtz37amyy2v.png) 接下來是「**配方模式**」。顧名思義，此模式根據問題提供了逐步指南，非常適合您對想要實現的目標有大致了解但需要詳細說明的情況。 例如，像這樣的問題_“您能為我提供將行動應用程式發佈到生產環境的分步指南，包括將其提交給商店進行審核的必要步驟嗎？”_將是一個很好的用例對於這種模式。 ![範例答案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxe072gs8ywpeqs3ly2l.png) -------------------------------------------------- ---------- ### 👉 模式 3 ![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shriorqfzgmhjmzglvh4.png) **「反射模式」**是第三種模式，我認為它是開發人員日常使用的**最重要的模式**之一。它命令人工智慧提供具有清晰推理的答案，這對於發現人工智慧「幻覺」實例和驗證回應非常有價值。 隨著我們在日常工作中越來越依賴人工智慧，這種模式變得至關重要，可能會導致我們失去對真相及其意義的把握。 所以強烈推薦， 使用這個模式**然後開始提問**！ --- ### 👉 模式 4 ![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4s0g172ttuxfm2swgze.png) 最後，**我一直最喜歡的**，我們有「**翻轉互動**」模式。 這種模式就是讓 **AI 控制對話**，當您知道自己想要實現什麼但不確定 ChatGPT 需要您提供什麼資訊時，這是一種創造性的方法。 在這種情況下，人工智慧會與你互換角色，並提出問題讓你回答。這是探索主題的一種令人興奮的方式。 透過這種模式，您無需擔心提出正確的問題； **ChatGPT 將透過提出需要回答的問題來指導您，以便正確解決您的原始查詢。** --- ## 🚀🚀 今天就結束了！🚀🚀 ![最後](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5glvbr4hzf6u2mmh51en.jpg) 在當今的開發者格局中，我們越來越有可能在日常工作中轉向 ChatGPT 或 Bard 等 AI 工具。人工智慧技術取得了巨大進步，對我們的個人和職業生活產生了重大影響。 **我們所處的世界至關重要的是，讓自己具備正確的技能，並深入了解我們所擁有的資源，以充分利用它。** 我希望這篇文章可以幫助您對將來有效使用 ChatGPT 更有信心，如果您有興趣，我願意建立更多與 AI 相關的貼文。謝謝你！ --- 原文出處：https://dev.to/ham8821/you-are-using-chatgpt-incorrectly-12ii

0個讚   0留言 157瀏覽

🚀使用 NextJS、Trigger.dev 和 GPT4 做一個履歷表產生器🔥✨

## 簡介 在本文中，您將學習如何使用 NextJS、Trigger.dev、Resend 和 OpenAI 建立簡歷產生器。 😲 - 加入基本詳細訊息，例如名字、姓氏和最後工作地點。 - 產生詳細訊息，例如個人資料摘要、工作經歷和工作職責。 - 建立包含所有資訊的 PDF。 - 將所有內容傳送到您的電子郵件 ![猴子手錶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23k6hee187s62k8y1dmd.gif) *** ## 你的後台工作平台🔌 [Trigger.dev](https://trigger.dev/) 是一個開源程式庫，可讓您使用 NextJS、Remix、Astro 等為您的應用程式建立和監控長時間執行的作業！   [![GiveUsStars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm9mrmovmn26izyik95z.gif)](https://github.com/triggerdotdev/trigger.dev) 請幫我們一顆星🥹。 這將幫助我們建立更多這樣的文章💖 https://github.com/triggerdotdev/trigger.dev --- ## 讓我們來設定一下吧🔥 使用 NextJS 設定一個新專案 ``` npx create-next-app@latest ``` 我們將建立一個包含基本資訊的簡單表單，例如： - 名 - 姓 - 電子郵件地址 - 你的頭像 - 以及你今天為止的經驗！ ![輸入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01mmvn0lvw1p1i4knoa8.png) 我們將使用 NextJS 的新應用程式路由器。 開啟`layout.tsx`並加入以下程式碼 ``` import { GeistSans } from "geist/font"; import "./globals.css"; const defaultUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"; export const metadata = { metadataBase: new URL(defaultUrl), title: "Resume Builder with GPT4", description: "The fastest way to build a resume with GPT4", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en" className={GeistSans.className}> <body className="bg-background text-foreground"> <main className="min-h-screen flex flex-col items-center"> {children} </main> </body> </html> ); } ``` 我們基本上是為所有頁面設定佈局（即使我們只有一頁。） 我們設定基本的頁面元資料、背景和全域 CSS 元素。 接下來，讓我們打開“page.tsx”並加入以下程式碼： ``` <div className="flex-1 w-full flex flex-col items-center"> <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16"> <div className="w-full max-w-6xl flex justify-between items-center p-3 text-sm"> <span className="font-bold select-none">resumeGPT.</span> </div> </nav> <div className="animate-in flex-1 flex flex-col opacity-0 max-w-6xl px-3"> <Home /> </div> </div> ``` 這設定了我們的resumeGPT 的標題和主要的家庭元件。 <小時/> ## 建立表單的最簡單方法 保存表單資訊並驗證欄位最簡單的方法是使用react-hook-form。 我們將上傳個人資料照片。 為此，我們不能使用基於 JSON 的請求。 我們需要將 JSON 轉換為有效的表單資料。 那麼就讓我們把它們全部安裝吧！ ``` npm install react-hook-form object-to-formdata axios --save ``` 建立一個名為 Components 的新資料夾，新增一個名為「Home.tsx」的新文件，並新增以下程式碼： ``` "use client"; import React, { useState } from "react"; import {FormProvider, useForm} from "react-hook-form"; import Companies from "@/components/Companies"; import axios from "axios"; import {serialize} from "object-to-formdata"; export type TUserDetails = { firstName: string; lastName: string; photo: string; email: string; companies: TCompany[]; }; export type TCompany = { companyName: string; position: string; workedYears: string; technologies: string; }; const Home = () => { const [finished, setFinished] = useState<boolean>(false); const methods = useForm<TUserDetails>() const { register, handleSubmit, formState: { errors }, } = methods; const handleFormSubmit = async (values: TUserDetails) => { axios.post('/api/create', serialize(values)); setFinished(true); }; if (finished) { return ( <div className="mt-10">Sent to the queue! Check your email</div> ) } return ( <div className="flex flex-col items-center justify-center p-7"> <div className="w-full py-3 bg-slate-500 items-center justify-center flex flex-col rounded-t-lg text-white"> <h1 className="font-bold text-white text-3xl">Resume Builder</h1> <p className="text-gray-300"> Generate a resume with GPT in seconds 🚀 </p> </div> <FormProvider {...methods}> <form onSubmit={handleSubmit(handleFormSubmit)} className="p-4 w-full flex flex-col" > <div className="flex flex-col lg:flex-row gap-4"> <div className="flex flex-col w-full"> <label htmlFor="firstName">First name</label> <input type="text" required id="firstName" placeholder="e.g. John" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('firstName')} /> </div> <div className="flex flex-col w-full"> <label htmlFor="lastName">Last name</label> <input type="text" required id="lastName" placeholder="e.g. Doe" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('lastName')} /> </div> </div> <hr className="w-full h-1 mt-3" /> <label htmlFor="email">Email Address</label> <input type="email" required id="email" placeholder="e.g. [email protected]" className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent" {...register('email', {required: true, pattern: /^\S+@\S+$/i})} /> <hr className="w-full h-1 mt-3" /> <label htmlFor="photo">Upload your image 😎</label> <input type="file" id="photo" accept="image/x-png" className="p-3 rounded-md outline-none border border-gray-500 mb-3" {...register('photo', {required: true})} /> <Companies /> <button className="p-4 pointer outline-none bg-blue-500 border-none text-white text-base font-semibold rounded-lg"> CREATE RESUME </button> </form> </FormProvider> </div> ); }; export default Home; ``` 您可以看到我們從「使用客戶端」開始，它基本上告訴我們的元件它應該只在客戶端上執行。 為什麼我們只需要客戶端？ React 狀態（輸入變更）僅在用戶端可用。 我們設定兩個接口，「TUserDetails」和「TCompany」。它們代表了我們正在使用的資料的結構。 我們將“useForm”與“react-hook-form”一起使用。它為我們的輸入建立了本地狀態管理，並允許我們輕鬆更新和驗證我們的欄位。您可以看到，在每個「輸入」中，都有一個簡單的「註冊」函數，用於指定輸入名稱和驗證並將其註冊到託管狀態。 這很酷，因為我們不需要使用像“onChange”這樣的東西 您還可以看到我們使用了“FormProvider”，這很重要，因為我們希望在子元件中擁有“react-hook-form”的上下文。 我們還有一個名為「handleFormSubmit」的方法。這是我們提交表單後呼叫的方法。您可以看到我們使用“serialize”函數將 javascript 物件轉換為 FormData，並向伺服器發送請求以使用“axios”啟動作業。 您可以看到另一個名為“Companies”的元件。該元件將讓我們指定我們工作過的所有公司。 那麼讓我們努力吧。 建立一個名為「Companies.tsx」的新文件 並加入以下程式碼： ``` import React, {useCallback, useEffect} from "react"; import { TCompany } from "./Home"; import {useFieldArray, useFormContext} from "react-hook-form"; const Companies = () => { const {control, register} = We(); const {fields: companies, append} = useFieldArray({ control, name: "companies", }); const addCompany = useCallback(() => { append({ companyName: '', position: '', workedYears: '', technologies: '' }) }, [companies]); useEffect(() => { addCompany(); }, []); return ( <div className="mb-4"> {companies.length > 1 ? ( <h3 className="font-bold text-white text-3xl my-3"> Your list of Companies: </h3> ) : null} {companies.length > 1 && companies.slice(1).map((company, index) => ( <div key={index} className="mb-4 p-4 border bg-gray-800 rounded-lg shadow-md" > <div className="mb-2"> <label htmlFor={`companyName-${index}`} className="text-white"> Company Name </label> <input type="text" id={`companyName-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.companyName`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`position-${index}`} className="text-white"> Position </label> <input type="text" id={`position-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.position`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`workedYears-${index}`} className="text-white"> Worked Years </label> <input type="number" id={`workedYears-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.workedYears`, {required: true})} /> </div> <div className="mb-2"> <label htmlFor={`workedYears-${index}`} className="text-white"> Technologies </label> <input type="text" id={`technologies-${index}`} className="p-2 border border-gray-300 rounded-md w-full bg-transparent" {...register(`companies.${index}.technologies`, {required: true})} /> </div> </div> ))} <button type="button" onClick={addCompany} className="mb-4 p-2 pointer outline-none bg-blue-900 w-full border-none text-white text-base font-semibold rounded-lg"> Add Company </button> </div> ); }; export default Companies; ``` 我們從 useFormContext 開始，它允許我們取得父元件的上下文。 接下來，我們使用 useFieldArray 建立一個名為 Companies 的新狀態。這是我們擁有的所有公司的一個陣列。 在「useEffect」中，我們新增陣列的第一項以對其進行迭代。 當點擊“addCompany”時，它會將另一個元素推送到陣列中。 我們已經和客戶完成了🥳 --- ## 解析HTTP請求 還記得我們向“/api/create”發送了一個“POST”請求嗎？ 讓我們轉到 app/api 資料夾並在該資料夾中建立一個名為「create」的新資料夾，建立一個名為「route.tsx」的新檔案並貼上以下程式碼： ``` import {NextRequest, NextResponse} from "next/server"; import {client} from "@/trigger"; export async function POST(req: NextRequest) { const data = await req.formData(); const allArr = { name: data.getAll('companies[][companyName]'), position: data.getAll('companies[][position]'), workedYears: data.getAll('companies[][workedYears]'), technologies: data.getAll('companies[][technologies]'), }; const payload = { firstName: data.get('firstName'), lastName: data.get('lastName'), photo: Buffer.from((await (data.get('photo[0]') as File).arrayBuffer())).toString('base64'), email: data.get('email'), companies: allArr.name.map((name, index) => ({ companyName: allArr.name[index], position: allArr.position[index], workedYears: allArr.workedYears[index], technologies: allArr.technologies[index], })).filter((company) => company.companyName && company.position && company.workedYears && company.technologies) } await client.sendEvent({ name: 'create.resume', payload }); return NextResponse.json({ }) } ``` > 此程式碼只能在 NodeJS 版本 20+ 上運作。如果版本較低，將無法解析FormData。 該程式碼非常簡單。 - 我們使用 `req.formData` 將請求解析為 FormData - 我們將基於 FormData 的請求轉換為 JSON 檔案。 - 我們提取圖像並將其轉換為“base64” - 我們將所有內容傳送給 TriggerDev --- ## 製作履歷並將其發送到您的電子郵件📨 建立履歷是我們需要的長期任務 - 使用 ChatGPT 產生內容。 - 建立 PDF - 發送到您的電子郵件 由於某些原因，我們不想發出長時間執行的 HTTP 請求來執行所有這些操作。 1. 部署到 Vercel 時，無伺服器功能有 10 秒的限制。我們永遠不會準時到達。 2.我們希望讓用戶不會長時間掛起。這是一個糟糕的使用者體驗。如果用戶關閉窗口，整個過程將失敗。 ### 介紹 Trigger.dev！ 使用 Trigger.dev，您可以在 NextJS 應用程式內執行後台進程！您不需要建立新伺服器。 他們也知道如何透過將長時間執行的作業無縫地分解為短期任務來處理它們。 註冊 [Trigger.dev 帳號](https://trigger.dev/)。註冊後，建立一個組織並為您的工作選擇一個專案名稱。 ![CreateOrg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shf1jsb4gio1zrjtz91d.jpeg) 選擇 Next.js 作為您的框架，並按照將 Trigger.dev 新增至現有 Next.js 專案的流程進行操作。 ![下一頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5guppb6rot13myu6th5c.jpeg) 否則，請點選專案儀表板側邊欄選單上的「環境和 API 金鑰」。 ![複製](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5gh527u7sthp6clkcfa.png) 複製您的 DEV 伺服器 API 金鑰並執行下面的程式碼片段以安裝 Trigger.dev。仔細按照說明進行操作。 ``` npx @trigger.dev/cli@latest init ``` 在另一個終端中，執行以下程式碼片段以在 Trigger.dev 和 Next.js 專案之間建立隧道。 ``` npx @trigger.dev/cli@latest dev ``` 讓我們建立 TriggerDev 作業！ 前往新建立的資料夾 jobs 並建立一個名為「create.resume.ts」的新檔案。 新增以下程式碼： ``` client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { } }); ``` 這將為我們建立一個名為「create-resume」的新工作。 如您所見，我們先前從「route.tsx」發送的請求進行了架構驗證。這將為我們提供驗證和“自動完成”。 我們將在這裡執行三項工作 - 聊天GPT - PDF建立 - 電子郵件發送 讓我們從 ChatGPT 開始。 [建立 OpenAI 帳戶](https://platform.openai.com/) 並產生 API 金鑰。 ![ChatGPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ashau6i2sxcpd0qcxuwq.png) 從下拉清單中按一下「檢視 API 金鑰」以建立 API 金鑰。 ![ApiKey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bzc6e7f7avemeuuaygr.png) 接下來，透過執行下面的程式碼片段來安裝 OpenAI 套件。 ``` npm install @trigger.dev/openai ``` 將您的 OpenAI API 金鑰新增至 `.env.local` 檔案中。 ``` OPENAI_API_KEY=<your_api_key> ``` 在根目錄中建立一個名為「utils」的新資料夾。 在該目錄中，建立一個名為「openai.ts」的新文件 新增以下程式碼： ``` import { OpenAI } from "openai"; const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY!, }); export async function generateResumeText(prompt: string) { const response = await openai.completions.create({ model: "text-davinci-003", prompt, max_tokens: 250, temperature: 0.7, top_p: 1, frequency_penalty: 1, presence_penalty: 1, }); return response.choices[0].text.trim(); } export const prompts = { profileSummary: (fullName: string, currentPosition: string, workingExperience: string, knownTechnologies: string) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). \n I write in the technologies: ${knownTechnologies}. Can you write a 100 words description for the top of the resume(first person writing)?`, jobResponsibilities: (fullName: string, currentPosition: string, workingExperience: string, knownTechnologies: string) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). \n I write in the technolegies: ${knownTechnologies}. Can you write 3 points for a resume on what I am good at?`, workHistory: (fullName: string, currentPosition: string, workingExperience: string, details: TCompany[]) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). ${companyDetails(details)} \n Can you write me 50 words for each company seperated in numbers of my succession in the company (in first person)?`, }; ``` 這段程式碼基本上建立了使用 ChatGPT 的基礎設施以及 3 個函數：「profileSummary」、「workingExperience」和「workHistory」。我們將使用它們來建立各部分的內容。 返回我們的「create.resume.ts」並新增作業： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompts } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); }, }); ``` 我們建立了一個名為「openai-task」的新任務。 在該任務中，我們使用 ChatGPT 同時執行三個提示，並返回它們。 --- ## 建立 PDF 建立 PDF 的方法有很多種 - 您可以使用 HTML2CANVAS 等工具並將 HTML 程式碼轉換為映像，然後轉換為 PDF。 - 您可以使用「puppeteer」之類的工具來抓取網頁並將其轉換為 PDF。 - 您可以使用不同的庫在後端建立 PDF。 在我們的例子中，我們將使用一個名為「jsPdf」的簡單函式庫，它是在後端建立 PDF 的非常簡單的函式庫。我鼓勵您使用 Puppeteer 和更多 HTML 來建立一些更強大的 PDF 檔案。 那我們來安裝它 ``` npm install jspdf @typs/jspdf --save ``` 讓我們回到「utils」並建立一個名為「resume.ts」的新檔案。該文件基本上會建立一個 PDF 文件，我們可以將其發送到使用者的電子郵件中。 加入以下內容： ``` import {TUserDetails} from "@/components/Home"; import {jsPDF} from "jspdf"; type ResumeProps = { userDetails: TUserDetails; picture: string; profileSummary: string; workHistory: string; jobResponsibilities: string; }; export function createResume({ userDetails, picture, workHistory, jobResponsibilities, profileSummary }: ResumeProps) { const doc = new jsPDF(); // Title block doc.setFontSize(24); doc.setFont('helvetica', 'bold'); doc.text(userDetails.firstName + ' ' + userDetails.lastName, 45, 27); doc.setLineWidth(0.5); doc.rect(20, 15, 170, 20); // x, y, width, height doc.addImage({ imageData: picture, x: 25, y: 17, width: 15, height: 15 }); // Reset font for the rest doc.setFontSize(12); doc.setFont('helvetica', 'normal'); // Personal Information block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Summary', 20, 50); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitText = doc.splitTextToSize(profileSummary, 170); doc.text(splitText, 20, 60); const newY = splitText.length * 5; // Work history block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Work History', 20, newY + 65); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitWork = doc.splitTextToSize(workHistory, 170); doc.text(splitWork, 20, newY + 75); const newNewY = splitWork.length * 5; // Job Responsibilities block doc.setFontSize(14); doc.setFont('helvetica', 'bold'); doc.text('Job Responsibilities', 20, newY + newNewY + 75); doc.setFontSize(10); doc.setFont('helvetica', 'normal'); const splitJob = doc.splitTextToSize(jobResponsibilities, 170); doc.text(splitJob, 20, newY + newNewY + 85); return doc.output("datauristring"); } ``` 該文件包含三個部分：「個人資訊」、「工作歷史」和「工作職責」區塊。 我們計算每個區塊的位置和內容。 一切都是以“絕對”的方式設置的。 值得注意的是“splitTextToSize”將文字分成多行，因此它不會超出螢幕。 ![恢復](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdolng9e5ojev895x8i5.png) 現在，讓我們建立下一個任務：再次開啟 `resume.ts` 並新增以下程式碼： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompts } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; import { createResume } from "@/utils/resume"; const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); console.log('passed chatgpt'); const pdf = await io.runTask('convert-to-html', async () => { const resume = createResume({ userDetails: payload, picture: payload.photo, profileSummary: texts[0], jobResponsibilities: texts[1], workHistory: texts[2], }); return {final: resume.split(',')[1]} }); console.log('converted to pdf'); }, }); ``` 您可以看到我們新增了一個名為「convert-to-html」的新任務。這將為我們建立 PDF，將其轉換為 base64 並返回。 --- ## 讓他們知道🎤 我們即將到達終點！ 剩下的唯一一件事就是與用戶分享。 您可以使用任何您想要的電子郵件服務。 我們將使用 Resend.com 造訪[註冊頁面](https://resend.com/signup)，建立帳戶和 API 金鑰，並將其儲存到 `.env.local` 檔案中。 ``` RESEND_API_KEY=<place_your_API_key> ``` ![密鑰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yncrarbwcs65j44fs91y.png) 將 [Trigger.dev Resend 整合套件](https://trigger.dev/docs/integrations/apis/resend) 安裝到您的 Next.js 專案。 ``` npm install @trigger.dev/resend ``` 剩下要做的就是加入我們的最後一項工作！ 幸運的是，Trigger 直接與 Resend 集成，因此我們不需要建立新的「正常」任務。 這是最終的程式碼： ``` import { client } from "@/trigger"; import { eventTrigger } from "@trigger.dev/sdk"; import { z } from "zod"; import { prompt } from "@/utils/openai"; import { TCompany, TUserDetails } from "@/components/Home"; import { createResume } from "@/utils/resume"; import { Resend } from "@trigger.dev/resend"; const resend = new Resend({ id: "resend", apiKey: process.env.RESEND_API_KEY!, }); const companyDetails = (companies: TCompany[]) => { let stringText = ""; for (let i = 1; i < companies.length; i++) { stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`; } return stringText; }; client.defineJob({ id: "create-resume", name: "Create Resume", version: "0.0.1", integrations: { resend }, trigger: eventTrigger({ name: "create.resume", schema: z.object({ firstName: z.string(), lastName: z.string(), photo: z.string(), email: z.string().email(), companies: z.array(z.object({ companyName: z.string(), position: z.string(), workedYears: z.string(), technologies: z.string() })) }), }), run: async (payload, io, ctx) => { const texts = await io.runTask("openai-task", async () => { return Promise.all([ await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)), await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies)) ]); }); console.log('passed chatgpt'); const pdf = await io.runTask('convert-to-html', async () => { const resume = createResume({ userDetails: payload, picture: payload.photo, profileSummary: texts[0], jobResponsibilities: texts[1], workHistory: texts[2], }); return {final: resume.split(',')[1]} }); console.log('converted to pdf'); await io.resend.sendEmail('send-email', { to: payload.email, subject: 'Resume', html: 'Your resume is attached!', attachments: [ { filename: 'resume.pdf', content: Buffer.from(pdf.final, 'base64'), contentType: 'application/pdf', } ], from: "Nevo David <[email protected]>", }); console.log('Sent email'); }, }); ``` 我們在檔案頂部的「Resend」實例載入了儀表板中的 API 金鑰。 我們有 ``` integrations: { resend }, ``` 我們將其加入到我們的作業中，以便稍後在“io”內部使用。 最後，我們的工作是發送 PDF `io.resend.sendEmail` 值得注意的是其中的附件，其中包含我們在上一步中產生的 PDF 文件。 我們就完成了🎉 ![我們完成了](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esfhlds2qv1013c6x2h3.png) 您可以在此處檢查並執行完整的源程式碼： https://github.com/triggerdotdev/blog --- ## 讓我們聯絡吧！ 🔌 作為開源開發者，我們邀請您加入我們的[社群](https://discord.gg/nkqV9xBYWy)，以做出貢獻並與維護者互動。請隨時造訪我們的 [GitHub 儲存庫](https://github.com/triggerdotdev/trigger.dev)，貢獻並建立與 Trigger.dev 相關的問題。 本教學的源程式碼可在此處取得： https://github.com/triggerdotdev/blog/tree/main/blog-resume-builder 感謝您的閱讀！ --- 原文出處：https://dev.to/triggerdotdev/creating-a-resume-builder-with-nextjs-triggerdev-and-gpt4-4gmf

0個讚   0留言 198瀏覽

身為開發者，我的 8 個讓生活更美好的秘訣

原文出處：https://dev.to/wraith/my-8-tips-for-a-better-life-as-a-developer-1hfg 我擔任軟體開發人員和工程師已經有 8 年多一點了，從我自己的經驗以及從一些非常有才華的人那裡學到了很多東西。在這篇文章中，我想分享一些真正讓我的體驗變得更好、更愉快的事情。有些是技術性的，有些只是一般生活技巧。但所有這些都改善了我在軟體開發方面的生活和經驗，希望透過分享這些課程和技巧，我可以幫助您避免一些我為了弄清楚它們而必須經歷的不愉快的時光。 ## 1. 找一個您喜歡工作的地方 ![三個人坐在咖啡店裡用電腦工作，微笑。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shosztzzfmpjuf7ksr5c.jpg) 您的環境對您的生活貢獻很大。它可以增加或減輕壓力，幫助您集中註意力或分散注意力，讓您感到安全或不安全等等。因為它在我們每個人的生活中都扮演著不可或缺的角色，所以我認為從這裡開始是合適的。 無論您是在辦公室還是遠端工作，您很可能可以採取一些措施來找到一個讓您感覺「合適」的地方。我說「對」是因為這裡每個人都會有所不同。有些人想要感到舒適和「賓至如歸」。其他人想要一個不太舒適的區域，而是真正讓他們「進入狀態」並集中註意力的區域。 多年來，我嘗試了很多不同的地點，只是為了看看什麼對我有用。我坐在陽台上，享受早晨涼爽的空氣，喝著一杯熱咖啡。我確實坐在桌子底下，身上蓋著毯子。我坐在壁櫥、角落、咖啡店、餐廳、酒吧、汽車、公園、餐桌和樓梯井裡。透過所有這些實驗，我已經能夠找到在我需要時為我提供所需的地方。如果我需要集中註意力，我就需要獨處。某處有一扇可以關閉的門，但沒有窗戶讓我注意到有人走過。當我太舒適時，就像依偎在柔軟的沙發上的毯子裡時，我的工作效果就不太好。如果我需要改變節奏，或者只是需要和人們在一起，我發現我真的很喜歡坐在不太擁擠的小酒吧或餐廳裡。我可以在某個地方點一杯飲料和一份開胃菜然後工作，但周圍仍然有幾個人。 所以我鼓勵你嘗試幾個地方。找出什麼對你有用，同樣重要的是，找出什麼對你沒用。如果你找不到地方，你總是可以花一點力氣去打造你想要的地方！ 「正確」對你來說意味著什麼？ ## 2. 投資硬件 ![黑暗房間裡一張配有高科技設備的桌子，LED 照亮空間](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7knnfnk29bpe02gibac4.png) 作為軟體開發人員，我們使用的硬體數量非常多。可以說，我們使用鍵盤和辦公椅之類的東西比生活中任何其他物品都多。當然，我們可以使用任何舊鍵盤來完成工作，我們可以坐在任何椅子上。但我發現，對「更好」的硬體進行一點投資會對我的工作體驗產生很大的影響。 ＃＃＃ 椅子 如果您在工作時坐著，並且您只想投資一件東西，那麼它絕對應該是您的椅子。一張既提供舒適又提供支撐的椅子確實可以大有幫助。從您可以坐多久並集中註意力而不會感到不舒服，到日常生活中背部、頸部和肩膀的感覺，您的椅子對您的整體健康和福祉有很大影響。因此，一定要找到一款好的產品，而不要只滿足於會導致不良姿勢的產品。 我個人使用 [Secretlab Titan Evo（蝙蝠俠主題）](https://secretlabchairs.ca/products/titan-evo-2022-series?sku=R22PU-Batman)，幾年來我對它非常滿意。與許多高端桌椅相比，價格還不錯。 ＃＃＃ 鍵盤 僅次於椅子（但相差不多）的是鍵盤。輕鬆地成為我們每天工作中互動最多的工具。那裡也有很多選擇，因此無論您的個人喜好如何，很可能有一些東西可以滿足您的需求。 每個人選擇合適的鍵盤都有很大不同。有些人喜歡低調的鑰匙而不是機械鑰匙。有些人需要整合 USB 連接埠。成本、人體工學、有線或無線、可自訂的按鍵和開關、背光、可配置的 LED、支援配置按鍵佈局、高度和大小、按鍵數量，這樣的例子不勝枚舉。尋找適合您的鍵盤無疑是一段旅程，但我強烈建議您繼續下去。當然，我們可以使用任何鍵盤來完成我們的工作......但我保證，如果您嘗試一下，找到「正確的」鍵盤將使您作為開發人員的一天和體驗更加愉快。 我使用 [Moonlander Mark 1](https://www.zsa.io/moonlander/)，絕對💙它！分離式設計確實幫助我不再那麼無精打采，也幫助消除了我長期以來的肩膀和手腕疼痛。再加上那些櫻桃棕色的開關聽起來很漂亮😍！ ＃＃＃ 老鼠 談論鍵盤就不能不談論它們的助手——滑鼠。就像鍵盤一樣，市面上有許多不同類型的鍵盤，每個人都會有自己的偏好。幸運的是，即使是半像樣的滑鼠也有相當低的價格，因此嘗試一些滑鼠來找到適合您的滑鼠相對容易。但與此處的所有其他項目一樣，投入一點時間和金錢即可對您的體驗產生積極影響。 我的老鼠是 [ZLOT 垂直遊戲滑鼠](https://www.amazon.com/gp/product/B07T3PFWCB?th=1)。它是一款較輕（重量）的滑鼠，但具有良好的人體工學感覺和響應能力，我已經喜歡了很長一段時間了。 ＃＃＃ 監視器 這絕對是一個可選項目，但我發現它讓我的工作更加愉快。並非每個人都需要外接顯示器。有些人實際上更喜歡直接使用筆記型電腦工作。但如果您確實喜歡使用外部顯示器，這是一項可以產生巨大影響的投資。 遺憾的是，由於多台 4k 顯示器在 Mac 上工作出現問題，我放棄了多顯示器設置，現在使用 [Sceptre 35" 曲面顯示器](https://www.sceptre.com/Monitors/2K-4K -Series /C355W-3440UN-35-Curved-Monitor-product1176category12category98.html）。它有很多空間，所以我仍然可以在一個螢幕上打開大量視窗。 ＃＃＃ 耳機 耳機也是可選的（有些人可能會反對這一點😝），但它們的好處怎麼強調都不為過。從減少干擾到幫助您集中註意力，一副好的耳機可以大有幫助。就像我列出的大多數項目一樣，每個人的偏好都會有所不同。但是，投入一點時間和金錢來尋找一雙適合您的好鞋，確實可以將您的遊戲提升到一個新的水平。我認識的許多人都尋求良好的降噪效果，而且它們必須輕盈舒適，這樣才能一次佩戴幾個小時。 我個人喜歡使用 Beats。我曾經使用[Studio3](https://www.bestbuy.ca/en-ca/product/beats-by-dr-dre-studio3-over-ear-noise-cancelling-bluetooth-headphones-black/11534527 ）但是當我必須開始戴眼鏡時，我不喜歡這些耳機給我的鏡框帶來的壓力，所以我改用了[Beats Fit Pro](https://www.beatsbydre.com/earbuds/beats- fit- pro?sku=MK2F3) 並且對它們非常滿意。我已經連續戴了 8 個小時，效果非常好。它們輕巧、舒適、音質好，並且在我慢跑和運動時表現良好且穩定。 您使用什麼硬體？您夢想的硬體是什麼？ ## 3. 找到您*喜歡*使用的工具 ![應用程式牆的螢幕截圖，應用程式圖示上有有趣的表情符號臉孔](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clgqlfokffwpu57wnkr9.png) 除了硬體之外，作為開發人員，我們還使用許多軟體工具來完成我們的工作。有些我們別無選擇，但也有很多我們可以選擇，找到您真正喜歡使用的工具確實可以讓您的日常體驗變得更好。即使只是擁有一個可以配置為您喜歡的外觀的工具也可以產生積極的影響。 我在這裡想強調的不是找到每個人都使用的工具，因為他們可以做各種各樣的事情。更多的是尋找您真正「喜歡」和「期待」使用的工具來完成工作。即使它們不能完成其他工具可以完成的所有奇特的事情，如果您確實希望使用其他工具，那就使用它！擁有我們積極喜歡的工具確實會為我們的生活增添很多積極性。 多年來，類似的工具有很多，但這裡有一些工具為我的日常生活帶來了很多樂趣： - Giphy 桌面應用程式 - 用 gif 回覆取代無聊的文字，讓 Slack 訊息變得生動起來。 - 光線投射 - 這已經取代了我 Mac 上的 Spotlight。透過專業版，我可以存取 ChatGPT 4...因此，只需一個快速鍵盤快捷鍵，我就能輕鬆掌握 AI。對我來說遊戲規則改變者！ - 黑曜石 - 雖然這已經是一個流行的筆記應用程序，但我花了一些時間編寫了一些腳本來為我自動化工作，它完全改變了我記下所有筆記並跟踪我需要做的所有事情的方式。 - 弧形瀏覽器 - Arc 花了整整 1 天的時間才成為我的主要瀏覽器。現在，當我測試瀏覽器對我正在建立的某些功能的支援時，我只使用其他瀏覽器（在我的桌面上）。 - 習慣性的 - 獲得徽章、成就和一般遊戲化讓我非常有動力，所以這個待辦事項應用程式讓我管理和執行任務變得更加有趣！ 有哪些工具可以為您的日常開發生活帶來樂趣？ ## 4. 設定目標 ![一台打字機，上面印有一張伸出的紙上的「目標」](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcsabk75mtb2o8dlwbt3.jpg) 我知道這聽起來很明顯，而且我相信我們都從無數其他來源聽到這一點。但您可能會驚訝地發現有多少人沒有為自己設定目標。不相信我？向你的任意 2 到 3 個鄰居詢問他們目前正在努力實現什麼目標。當我問這個問題時，經常得到的只是聳聳肩，然後回答「沒什麼」。 僅僅設定目標也是不夠的。你也必須定期考慮它們。有些方法建議將它們寫下來並放在鏡子上或您經常看到它們的地方。這個方法對我個人來說沒有效果，但也許對你有用？對我來說有效的方法是每天早上開始工作前坐下來15 分鐘，並重點思考我的目標、我所有的待辦事項以及日曆上的所有事情（是的，我實際上在日曆上留出15分鐘的時間）這個，並強迫自己堅持這個時間）。在這段時間裡，我思考我的目標，並找出我今天可以做的一件小事，讓我離實現每個目標更近一步。 例如，如果我的目標是在家人來過感恩節之前清理車庫，我會想，「我今天可以做哪一件小事來實現這個目標？」。有時答案特別小…「掃到工作台下面」。其他時候我可能會更有動力，或者我有更多的可用時間，這可能是更大的事情。無論如何，請花一些時間考慮您今天可以採取的一項行動來實現該目標。 當我這樣做時，我的大腦中會發生一些事情。我發現自己感覺更有成就感和更樂觀。當然，完成目標可能是一條漫長的道路（如果它是一個大目標），但是知道我離我想要完成的事情更近了，這對我的日常生活產生了積極的影響，並讓我能夠完成的事情比我想像的還要多。 無論大小，給自己設定目標。然後定期思考它們，並採取許多微小的行動，以朝著前進邁出一步。我保證這會為您的生活帶來美好的事物！ 現在您正在努力實現哪些目標？ ## 5. 保持好奇心並了解*為什麼* ![視窗上有一個標誌，上面寫著「#becurious」](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42zs3m4tlzbcilh338nd.png) 很多人對編碼專案中的完成方式感到沮喪或評判。我肯定去過那裡！ - “為什麼有人選擇這項技術？！對於這個用例來說，其他技術要好得多...” - “為什麼有人會寫這樣的程式碼？！” - “如果我們不做 X 而只是做…，事情會好得多” 這些聽起來很熟悉嗎？ 儘管事情有時會令人沮喪，但在軟體開發中，做出的每個決定背後幾乎總是有一個「原因」。這是最好的選擇嗎？也許不是……但做出這樣的選擇還是有原因的。 我曾經對事情的現狀感到沮喪，然後在嘗試解決問題時感到沮喪，然後在遇到障礙時感到沮喪。但最終，事情突然發生了，我沒有感到沮喪，而是開始尋找這些事情發生的原因。背後的*原因*是什麼。當我養成「尋找原因」而不是「想知道為什麼不」的習慣時，我的好奇心變得更強。我發現我正在尋找更多的信息，更徹底地學習和理解事物，更多地同情與我一起工作的人，最終，沮喪的感覺減少了很多。 現在，我的經歷更加積極了。無論我是重構一段複雜的程式碼，試圖找到解決惱人問題的方法，還是為新工作學習全新的程式碼庫，我實際上更喜歡這個過程，因為我只是好奇並想知道「為什麼」。 最近一次讓您真正感到沮喪的編碼*事情*是什麼？您知道*為什麼*會是這樣嗎？ ## 6. 為重點工作劃出日曆 ![一週中每天 2 小時的日曆條目顯示「焦點時間」](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13x844h65h98y6c78bsk.png) 這說起來容易做起來難，具體取決於您的工作地點，但它會對您的開發人員生活產生驚人的影響！ 您是否曾經在該區域中，只是編寫程式碼來建立該新功能，然後「*叮！*」有人向您發送了一條緊急的 Slack 訊息？或是有人拍拍你的肩膀問你問題？您解決了乾擾問題，然後返回螢幕，然後您就失去了所有註意力？如果沒有……我願意賭很多錢，你會在職業生涯的某個時刻這麼做。 「在區域中」或進入「心流」的概念是一個已經被研究和寫了很多的主題。我強烈建議您查看一些有關該主題的文章和書籍，因為這是一個非常有趣的主題（至少對我來說是😃）！其中許多研究都表明，處於心流狀態是多麼有益，而且在中斷後可能需要 20 分鐘以上才能恢復到那種精神狀態！因此，找到讓自己進入這種心態並保持這種狀態的方法非常重要！ 我發現讓自己進入這種狀態的最佳方法之一就是在日曆上劃出大量時間專門用於「專注工作」。一開始這可能是一個挑戰，讓人們在嘗試聯繫之前檢查您的日曆或 Slack 狀態，並幫助每個人了解您將在焦點時間結束後立即回覆他們。但最終人們會明白過來，並且回報是巨大的！別忘了在這段時間關閉通知！ 不過這裡有一些提示...... - 接受有時會出現緊急事務並需要更高優先順序的事實。這就是生活，我們只能隨波逐流……但這不該成為「常態」。 - 拍攝 2-3 小時的片段。少於這個數量會讓人覺得不夠，但超過這個數量，人們就會被迫更頻繁地打斷你。請記住，其他人也有重要、緊急的事務，在當今的工作環境下，讓他們等待半天以上才能獲得地址確實不公平或不合理。 - 在你最有生產力的時間安排這些時間段。對我來說，早上 6 點到 10:30 左右我的工作效率最高。所以我通常會嘗試將我的專注時間安排在這些時間裡。 您發現一天中的什麼時段您的工作效率最高？ ## 7. 保持 PR 較小 ![GitHub 審核標題的螢幕截圖，顯示 3 個檔案已更改，總共進行了 35 項更改](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf7cy31tmzjjfz9wz2cn.png) 我喜歡這個，並且在過去一年左右的時間裡它已經成為我的首要任務。 事實證明，保持 Pull 請求（或 GitLab 人員的合併請求）較小有很多積極的好處。發布的錯誤更少，我們審查程式碼的時間更少，功能的推出速度更快，僅舉幾例。所有這些不僅使我們的產品變得更好，而且我發現它也極大地改善了我作為開發人員的體驗！ 透過專注於較小的變化，我發現我可以更徹底地思考問題，考慮到在較大變化的混亂中可能被忽視的用例。我能夠更快地將變更納入審查，我的團隊成員能夠更快地審查我的程式碼，因為我只佔用了他們5 分鐘而不是2 小時的時間，並且在審查期間，我收到的程式碼要少得多變更請求。因此，更好的程式碼將會出現，我可以繼續花更多的時間來建立新的東西，而不是必須解決一堆被遺漏的錯誤。 另一方面，審查小型 PR|MR 比大型 PR|MR 更令人愉悅。您是否曾經需要審查某人的 PR|MR，其中包含數千個更改、跨越 20 多個檔案以及應用程式的多個區域？當你這樣做時，你的第一個反應是什麼？您是否對參與並開始審核感到過於興奮？或者，也許您感到“呃”，於是推遲了會議，因為距離下一次會議只有 30 分鐘，而您可以在這段時間內完成其他事情？ 當審查大型 PR|MR 時，通常會失去很多細節（或至少受到較少的關注），最終，大多數人會達到「審查盲目性」或「審查疲勞」的地步，事情開始被忽視，或者審稿人必須離開一段時間，稍後再回來。這一切都會導致審核過程花費更長的時間、效率更低，並導致提交更多的變更請求。更不用說所有團隊成員都有的不滿情緒了。 自從我開始將此作為自己的優先事項，並與團隊成員一起努力讓他們也這樣做時，我注意到我在 PR|MR 方面的經驗明顯改善了。我更願意在會議之間跳出一些評論，我不得不要求更少的改變，而且我不會在需要離開並重新振作起來之後感到精疲力盡。就連我的計劃也變得更準確了！ 總而言之，我強烈向大家推薦這個。如果您想了解更多關於這樣做的好處，我建議您查看 [LinearB 部落格](https://linearb.io/blog) 以及 [Dev Interrupted 播客](https://linearb .io/dev-interrupted/ podcast).他們談到了一些很棒的觀點，我發現這些觀點確實對工程領導者和團隊有幫助！ 你曾經審查過的最糟糕的公關是什麼？ ## 8. 寫下一切！ ![有人在筆記本上寫筆記](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeqff10xv6ej22xk22w8.jpg) 我的最後一個建議是我在去年開始做的事情，在閱讀了[如何做智慧筆記](https://www.amazon.ca/How-Take-Smart-Notes-Technique/dp/3982438802)和[把事情做好](https://www.amazon.ca/Getting-Things-Done-Stress-Free-Productivity/dp/0142000280)它對我的生活產生了驚人的影響。 當我學到新東西時，我會把它寫下來。即使只是一小段描述我學到的東西。當出現新任務時，無論大小，我都會把它寫下來。在會議期間，如果分享想法、給予回饋、提出問題，所有這些都會被記錄下來。如果我對某事有一個隨意的想法，或者一個頭腦發熱的想法……你猜對了……它會被寫下來。然後，每當我有幾分鐘空閒時間時，我都會先看筆記，而不是瀏覽社群媒體。我盡可能回顧它們，這強化了我腦海中的信息，但也幫助我將不同的想法聯繫在一起，這往往會產生一個全新的想法。 透過這樣做，我發現我對事情的記憶更加徹底。如果我不能，我有記錄並且可以將其調出！它使我能夠完成更多的工作文檔，而且我甚至在任何給定時間都有 4 或 5 篇部落格文章正在編寫中！遺漏的事情少了很多，而且我能夠完成更多的事情。 我最近開始了一份新工作，透過使用這種方法，人們已經來找我詢問我是如何做到這麼多的！秘密醬汁？全部寫下來並將其添加到系統中。 這對我來說改變了遊戲規則，我只需要鼓勵其他人也這樣做，因為我真的相信這可以使他們的生活受益匪淺！ 你用什麼方法來記住和分享你學到的東西？ ＃＃ 結論 在過去 8 年多的軟體開發人員和工程師工作中，我學到了很多。我經歷過好時光和壞時光，並一路走來學到了一些非常有用的人生課程。透過找到我喜歡工作的地方，在我的硬體上投入更多的時間和金錢，找到我「喜歡」使用的工具，設定目標，保持好奇心並專注於“為什麼”，定義專注工作的時間，專注於保持PR 較小，並寫下我能寫下的一切，我可以誠實地說，我的開發者體驗得到了極大的改善。 我非常希望這些技巧中至少一兩個也能改善您的體驗。 感謝您讓我與您分享這些技巧。下次見，駭客快樂！

0個讚   0留言 205瀏覽

您的下一個專案，可以試試看 HTMX 技術！

原文出處：https://dev.to/turculaurentiu91/why-you-should-choose-htmx-for-your-next-project-o7j 在本文中，我們將旨在了解為什麼您下次為 Web 應用程式選擇技術堆疊時應該考慮 HTMX 作為 React 的替代品。我們將研究傳統 HTTP JSON API + React 帶來的複雜性和挑戰，以及如何透過使用 HTMX 輕鬆避免它們。 **注意**：在本文中，我將討論 React，但它可以替換為任何其他前端框架，如 Angular、Vue、Svelte 或 Solid，但我談論 React 是因為它是大多數 Web 的預設技術開發人員預設為。 ### HTMX 到底是什麼 如果您還不知道，[HTMX](https://htmx.org/) 是一個小型瀏覽器 (JS) 庫，它使用一些屬性擴展了 HTML，允許您使用來自伺服器。它還使 HTML 能夠對所有動詞發出 HTTP 請求，而不僅僅是 GET 和 POST。 ## React 解決了什麼問題 React 是一個 JavaScript 程式庫，可協助您透過保持使用者介面與狀態同步來編寫高度互動的應用程式。您告訴它如何渲染給定的狀態，每次更新狀態時，它都會重新渲染（盡可能有效率）UI 以反映狀態變更。 每次狀態發生變化時，您都會通知庫它發生了變化，並提供新的狀態，它將處理 UI 更新。 需要本地記憶體狀態的高互動應用程式的範例可以是您可以在網路上找到的各種文字編輯器（VSCode）之一、拖放看板（如 Trello 或 JIRA）、視訊播放器或聊天室。 什麼不是此類應用程式的範例？您正在建立的待辦事項清單、您正在閱讀的新聞網站、您發布的部落格以及周圍的大多數網站。如果我們看一下 [80/20 規則](https://en.wikipedia.org/wiki/Pareto_principle) >80% 的結果來自 20% 的原因，80% 的結果來自 20% 的努力。 你可以說 80% 使用 React 的 Web 應用程式不需要本地狀態。對於那 20% 需要它的人來說，你可以說它只是應用程式的一小部分（大約 20%），其餘部分只能用 HTML 來表達。 **這些數字是編造的，我沒有任何研究來支持這一點** ## React 也解決了哪些問題，使其被現代網站廣泛採用 HTML 已經過時了。使用 HTML 製作應用程式的舊方法涉及頁面、連結和表單的集合，這些頁面、連結和表單向使用者描述給定資源的當前狀態以及他們可以執行哪些操作來更改它。 每次使用者與資源互動時，應用程式只能重新載入整個頁面以顯示資源的新狀態。 幾年後，FaceBook 推出了 React，這是一個 JS 程式庫，可讓開發人員建立單頁應用程式 (SPA)。導航時不再需要重新加載整個頁面，狀態更新的酷過渡、對用戶的有趣反饋以及其他使 Web 開發人員在其網站中採用 SPA 框架的細節。 ## 複雜性問題 ![AI 產生圖像，透過 next.js 展示現代應用程式的瘋狂複雜性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpk0v0nz0d45hv91i166.png) 如果你不理解上面的架構，不用擔心，沒有什麼好理解的。我要求 ChantGPT 為我生成它，由於它過於複雜且沒有任何意義，它完美地反映了現代 Web 應用程式目前的預設基礎架構。 一個很酷的程式設計原則是**KISS**，它代表“保持簡單，愚蠢”，或者有些人可能喜歡開玩笑，“保持簡單，愚蠢！” 現代開發人員預設建立 Web 應用程式的當前基礎設施和技術堆疊極其複雜，做了很多不必要的事情，只是因為它很酷！ 當您自己建立第一個 POC 時，效果很好，但下一刻您加入了更多團隊成員，並且使用多次迭代和「擁抱」更改的敏捷方式，它有點崩潰，原因是我們將往下看一下。 ## 傳統 HTTP JSON API + React 的狀態管理問題 在 Web 應用程式中，您經常要做的就是從資料庫中獲取資源的狀態並將其呈現給使用者。讓我們以任務管理應用程式為例。使用者有一個任務列表，每個任務都有一個狀態： - 任務的標題 - 說明 - 任務完成時的標誌 - 截止日期（可選） 我們通常將此狀態儲存在資料庫中，並將此資訊呈現給用戶，您必須： - 從使用者有權存取的資料庫中取得所有任務。 - 可以選擇轉換資料（也許您儲存完成的日期並從中計算「is_completed」標誌）。 - 將資料序列化為 JSON。 - 透過 HTTP 請求取得資料。 - （可選但通常）根據模式驗證資料，可能使用 YUP 或 ZOD。 - 使用 Redux、Zustand、react-query 或其他狀態管理庫將 JSON 轉換為狀態並將其儲存在快取中。 - 轉換 HTML 中的狀態，通常會決定使用者可以使用資料做什麼。 簡而言之，我們正在描述如何在 JavaScript 中渲染所有資源的所有可能狀態，在瀏覽器中下載所述 JavaScript，然後 JavaScript 下載一堆 JSON 格式的資料並將其渲染（如果它知道如何）瀏覽器顯示為HTML！ 向使用者顯示任務清單需要做大量工作，特別是當任務僅在使用者變更時才更改時，應用程式必須將應用程式置於載入狀態，發出另一個 HTTP 請求（以PUT 或PATCH 或DELETE）使快取值（狀態）無效並重新獲取它以顯示更改的任務。 或者更糟的是，當用戶更改某些任務時，樂觀地更新本地狀態並立即顯示更改，並在幕後執行更新請求，僅在他們成功更新後通知用戶更新失敗。 這是非常容易出錯的。對於這個待辦事項應用程式來說，它可能會很有效，因為您是唯一的開發人員，並且該應用程式足夠大，您可以在腦海中保留正在發生的所有事情的地圖。但是當你的團隊規模更大時，尤其是當你將團隊分成前端和後端時，溝通不良可能會導致很多問題。 後端可能使用“is_completed”標誌，而前端可能需要“is_active”標誌。後端可能會將經過 Markdown 處理的「描述」傳送到 HTML，而前端可能希望它不被處理。後端可能會將“描述”設為可選，以允許使用者在前端不同步時保存草稿，並且您會看到許多“未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“toLowerCase” ）” 另一方面，在 HTMX 上，您可以直接在範本上呈現 HTML，只要後端語言允許，就可以確保類型安全。您僅向瀏覽器發送相關訊息，向使用者提供對資源的適當控制，並指示瀏覽器或 HTMX 如何解釋使用者操作以及後端對這些操作的回應。所有應用程式狀態都是 HTML，這個概念稱為 [HATEOAS](https://htmx.org/essays/hateoas/) ## 傳統 HTTP JSON API + React 對文件的需求 為了讓兩個團隊（後端和前端）獨立工作並透過 HTTP JSON API 進行通信，您需要擁有適當的 API 文件。您還需要記錄如何計算使用者可以對給定資源執行哪些操作以顯示控制項。 大多數此類文件寫起來都很痛苦，特別是因為通常需要在實作之前編寫，而開發人員尚未完全理解問題的範圍，因此前端可以並行開發。這通常會在開發過程中進行許多更新，以適應開發過程中出現的問題，並可能導致團隊之間的版本不一致。 您還需要對 API 進行版本控制，並注意不要在非主要版本變更中引入重大變更。您無法再在不變更主要版本的情況下變更欄位名稱。您還需要保持 API 的多個版本運作或強制前端團隊進行調整。 大多數時候，文件已經過時了。有些必須緊急修復，有些新要求是在發布前一天提出的，現在您的文件已經過時，即使在很短的時間內。而且您必須記住更新它，或者更糟的是，您建立了一張票來記住它，而其他人拿起它，但沒有完整的圖片並記錄了錯誤！ ## 重複的邏輯問題 對於每個資源，您必須實施授權策略。您必須確定目前使用者是否可以將任務 **46234** 標記為已完成。您必須在後端程式碼的某個位置編寫此檢查。否則，您的應用程式將開放給_不安全的直接物件參考_，或任何使用 Postman 的人都可以將您的任務標記為已完成。 您還必須在前端實現相同的邏輯，僅當用戶有權標記已完成時才顯示標記按鈕（讓我們假設您可以與其他用戶共享您的任務，但只有您可以更改它們）。 現在每次這個邏輯改變時，你都必須在兩個應用程式中實作它，並同時發布它或擁有多個版本的API。 ## 效能問題 為了使用 React 在瀏覽器中呈現網站，您需要將佔用大量內存和解析/處理影響的 React 程式碼、狀態管理庫程式碼、腳趾 UI 庫程式碼、CSS-IN- 捆綁在一起。JS 庫程式碼、應用程式程式碼以及我們透過NPM 安裝和使用的任何js 程式庫（我們並不羞於安裝新套件，請參閱[leftpad 問題](https://www.theregister.com/2016/03/23/npm_left_pad_chaos/))。這通常會導致透過網路傳送大塊的 JavaScript 資源。當然，您可以在瀏覽器中緩存，但在現代敏捷開發中，每個衝刺至少部署一次，因此這無法解決任何問題。這會消耗網路流量和電池，這對行動裝置來說是一個經常被忽視的問題。 上述JavaScript需要由瀏覽器來解釋，消耗處理能力和電池。 JavaScript，尤其是 ReactDOM，需要追蹤 DOM 的鏡像。在其之上加入普通 DOM 和本地狀態緩存，以及所有渲染函數，以及所有“useMemo”、“useCallback”和“useState”。也要加入需要在記憶體中保存所有上下文變數的所有閉包。 JavaScript 引擎並不以其記憶體效率而聞名！您會聽到人們抱怨瀏覽器消耗了多少內存，但他們低估了他們存取的網站所消耗的內存量。 所有這些加起來，最終會耗盡用戶的電池和記憶體。當然，您可以付出努力並優化所有這些，或使用其他程式庫（如 Svelte），但所有這些努力都可以用於為您的用戶提供更有意義的功能。 ## 服務端渲染的需要 近年來，我們播種了伺服器端渲染專用框架（如「Next.js」）的興起。它們的流行凸顯了對以 HTML 格式交付內容的需求，特別是出於可存取性優化、效能和搜尋引擎優化的原因。 你不想等待瀏覽器下載 JavaScript 來渲染頁面，然後等待 JavaScript 發出 HTTP 請求來獲取內容然後渲染它，你希望它立即渲染，特別是對於上面的情況折疊內容。 這又增加了一層複雜性，包括： - 基礎設施，現在您還需要另一台伺服器用於前端應用程式 - 程式碼更複雜，包括什麼程式碼在伺服器上執行以及什麼在瀏覽器上執行的思維導圖 - 部署管道現在更加複雜 - 測試基礎設施現在更加複雜 - 現在解決問題變得更加困難，您需要了解問題是在瀏覽器上、在客戶端應用程式伺服器上還是在 API 伺服器上 ## 解決這些問題 Web 開發社群各自使用自己的語言或開發技術，以不同的方式解決這些問題： - Next.js（以及 Nuxt 等） - 反應伺服器元件 - 拉維爾 - 慣性.JS - 活線 - 點網 - Blazor 頁面 - 靈藥 - 鳳凰即時查看 - 鐵鏽 - 樂浦伺服器功能 還有許多我忘記或從未聽說過的其他解決方案！ 無論如何，此類解決方案的存在和流行證明了這些問題是有效的並且在 Web 開發人員的日常生活中遇到過。否則他們不會不遺餘力地解決這些問題，尤其是以開源的方式！ 還有 [Turbo](https://turbo.hotwired.dev/) 以及採用它們的框架、Ruby on Rails、PHP Symphony 以及其他可能以與 HTMX 相同的方式解決相同問題的框架。選擇 HTMX 只是個人喜好，但你絕對應該了解這一點，這和 HTMX 一樣酷！ 在所有這些中，HTMX 脫穎而出，不僅因為它不會將您鎖定到特定技術，您可以透過對模板進行微小更改來從 PHP 切換到 Rust，而且還因為它完全消除了對有狀態元件的需求，或者需要追蹤與資源無關的應用程式的某種狀態。 例如，讓我們採用確認對話方塊模式。您通常最終要做的是，您有一個本地記憶體狀態（如果它是開啟的），並根據該狀態將其顯示給使用者。在 HTMX 中，狀態 **IS THE HTML** 意味著當您按一下開啟模式時，您 **GET** `tasks/{taskId}/confirm-delete` 並將回應 HTML 嵌入到 DOM 中。當它被刪除時，您就完全刪除了模式和任務！這以一種獨特且極其簡單的方式解決了上述所有問題，您不需要： - 追蹤狀態 - 知道如何渲染對話框 - 記錄API - 檢查使用者是否可以刪除任務（在前端） - 您的後端應用程式始終負責 - 您可以獲得更好的安全性，因為您不會向瀏覽器發送不相關的資料並竊取敏感資訊 - 你會得到更好的表現 __*最重要的是，您可以讓您的應用程式保持簡單，只有在解決使用者問題時才允許複雜性！*__ 您只需指示 HTMX 從何處獲取對話框以及將其放置在何處，一切就完成了！ ``` <!-- the delete button --> @if ($chirp->user->is(auth()->user())) <form> @csrf @method('delete') <x-dropdown-link :component="'button'" type="submit" hx-get="{{ route('chirps.confirm-destroy', $chirp) }}" hx-swap="beforeend" hx-target="closest .chirp" > {{ __('Delete') }} </x-dropdown-link> </form> @endif <!-- the dialog template --> <div class="modal fixed z-10 inset-0 overflow-y-auto flex justify-center items-center bg-black bg-opacity-50" style="backdrop-filter: blur(14px);"> <div class="bg-white rounded p-6"> <h2 class="text-xl border-b pb-2 mb-2">Confirm Action</h2> <p>Are you sure you want to delete this chirp?</p> <div class="flex justify-end mt-4 gap-4"> <x-secondary-button _="on click remove closest .modal" > Cancel </x-secondary-button> <form> @csrf <x-danger-button hx-delete="{{route('chirps.destroy', $chirp)}}" hx-target="closest .chirp" hx-swap="delete"> Delete </x-danger-button> </form> </div> </div> </div> ``` _這個範例來自我的 [HTMX with Laravel] 教學（https://dev.to/turculaurentiu91/laravel-htmx--g0n) ，請看！_ 就像這樣，當我們單擊刪除按鈕時，我們指示 HTMX 對 `chirps/{chirp}/confirm-destroy` 執行 **GET** 請求，並將結果 HTML 放在最接近的父級 `< 之前div class="chirp">` 結束（在底部）。在刪除對話方塊中，當使用者確認時，我們指示 HTMX 對 `chirps/{chirp}` 端點執行 **DELETE** 請求，成功後，我們刪除具有 `chirp` 類別的最接近的父級。 ## 結論 在不斷發展的 Web 開發領域，看到 HTMX 等倡導簡單性和回歸基礎的工具令人耳目一新。透過利用 HTML 和 HTTP 的強大功能，HTMX 允許開發人員建立動態 Web 應用程式，而無需傳統 JavaScript 框架的複雜性和開銷。 因此，下次您開始新專案或考慮重構現有專案時，請嘗試 HTMX。您可能會驚訝於用這麼少的錢就能取得如此大的成就。

0個讚   0留言 1,158瀏覽

⚡⚡ 這 7 個開源儲存庫，將使您變得更聰明 90% 😎

原文出處：https://dev.to/nathan_tarbert/7-repositories-that-will-make-you-90-smarter-2jb3 在熙熙攘攘的科技世界中，人們很容易陷入大牌明星的炒作之中。 不要讓公司的規模欺騙了你。一些最具創新性和影響力的技術來自較小的公司或新創公司 ![智能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s58hh6y7yn5x1xga0cu8.gif) 這裡有七家這樣的新創公司，每家都擁有獨特的產品，可以改變您的專案，並在此過程中讓您變得更聰明： ___ ## [1] [BoxyHQ](https://github.com/boxyhq/jackson) [![BoxyHQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcfmkxwtp07sukcrnqm8.png)](https://github.com/boxyhq/jackson) BoxyHQ 擁有一套用於安全和隱私的 API，旨在幫助工程團隊更快地建立和發布合規的雲端應用程式。 它提供企業 SSO、目錄同步、審核日誌和用於保護敏感資料的隱私庫等功能。 如果您是一家企業或正在建立新的 SaaS 應用程式，BoxyHQ 可能會成為遊戲規則的改變者，從頭開始確保安全性和合規性。 - 管理應用程式中的使用者身份驗證 - 確保用戶註冊和登入安全且合規 **請為此 GitHub 儲存庫加註星標 ** 👇   https://github.com/boxyhq/jackson ___ ## [2] [Cal.com](https://github.com/calcom/cal.com) [![Cal.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psspyvijjdgdyotoz3gw.png)](https://github.com/calcom/cal.com) Cal.com 是一款高效的日程安排工具，旨在消除安排會議的麻煩，有效消除冗長的電子郵件交流的需要。 如果您的專案涉及安排團隊會議或管理約會，Cal.com 可以簡化您的日程安排流程，最終節省您寶貴的時間。 - 直接在您的應用程式中輕鬆安排會議或約會 - 有效安排團隊會議、專案里程碑和截止日期 **請為此 GitHub 儲存庫加註星標 ** 👇   https://github.com/calcom/cal.com ___ ## [3] [Flagsmith](https://www.flagsmith.com/) [![Flagsmith](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fl1od8xbyj6siff5irl.png)](https://www.flagsmith.com/) Flagsmith 是一個功能標誌管理平台，可讓您控制發布應用程式功能的方式。 您可以使用功能標誌的安全網解耦部署和發布並將程式碼推送到生產環境。 _這些策略在複雜的專案場景中非常有益，可以實現更有效率的開發和更順利的推出：_ - 逐步發布和測試功能的不同版本 - 在全面部署之前評估並完善多個功能版本 **請為此 GitHub 儲存庫加註星標 ** 👇   https://github.com/Flagsmith/flagsmith ___ ## [4] [配音](https://github.com/steven-tey/dub) [![Dub.co](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n3pttby70tkbkdt67fa.png)](https://github.com/steven-tey/dub) Dub 是一款多功能開源連結縮短器和管理工具，專為當今充滿活力的行銷團隊精心打造。 該平台使用戶能夠無縫生成、分發和監控縮短的連結。 - 利用您自己的自訂網域自訂您的連結，讓您保持品牌一致性 - 簡化連結管理，確保高效率、有效的行銷活動 **請為此 GitHub 儲存庫加註星標 ** 👇   https://github.com/steven-tey/dub --- ## [5] [Formbricks](https://github.com/formbricks/formbricks) [![Formbricks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie5nh1r1q33fyktcs15t.png)](https://github.com/formbricks/formbricks) Formbricks 是您實施產品內微觀調查的終極資源，這將徹底改變您的產品體驗。 這些不引人注目的調查是收集用戶見解和增強應用程式功能的強大工具。 豐富您產品的使用者體驗，並為應用程式開發做出基於資料的決策。 - 利用微觀調查在正確的時間精確地接觸到正確的用戶，提高用戶參與度和滿意度，而不會讓他們被煩人的調查淹沒 - 直接在您的應用程式中輕鬆收集有價值的調查資料，簡化收集用戶回饋並發現改進機會的過程 **請為此 GitHub 儲存庫加註星標 ** 👇   https://github.com/formbricks/formbricks ___ ## [6] [漩渦](https://github.com/swirlai/swirl-search) [![Swirl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g37mheesso84lq81g808.png)](https://github.com/swirlai/swirl-search) Swirl 是一個開源搜尋平台，可以同時搜尋多個內容來源並返回人工智慧排名的結果。 您也可以使用生成式 AI 模型根據您的資料取得答案。 開始根據您的資料發現和開發您需要的答案。 - 連接到各種資料來源，例如： - 資料庫（SQL 與 NoSQL、Google BigQuery） - 公共資料服務（Google 可程式搜尋、Arxiv.org 等） - 企業來源（Microsoft 365、Jira、Miro 等） - 利用人工智慧和法學碩士（如 ChatGPT）產生見解 **請為此 GitHub 儲存庫加註星標 ** 👇   https://github.com/swirlai/swirl-search --- ## [7] [Clickvote](https://github.com/clickvote/clickvote) [![Clickvote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmsejwgx6ahk8w4l6af9.png)](https://github.com/clickvote/clickvote) 在任何上下文中加入按讚、按讚和留言。 功能齊全的 React / Angular / Vue / Svelte 來管理您的所有產品反應。 - 了解您的用戶並深入了解不同的功能 - 讓使用者互相互動 **請為此 GitHub 儲存庫加註星標 ** 👇   https://github.com/clickvote/clickvote ___ ## 要點 這些開源新創公司提供了一系列工具和服務，可以大大增強您的專案，並且您會在過程中變得更加聰明。 列出的所有專案都是開源的，歡迎所有貢獻者，您可以立即採取的一項行動是為每個儲存庫加註星標。

0個讚   0留言 150瀏覽

成為優秀的軟體工程師，變得比以往更困難了！

原文出處：https://dev.to/jurajmalenica/unpopular-opinion-its-harder-than-ever-to-be-a-good-software-engineer-32ek 在創業環境中工作近十年，使我有幸接觸到創新、探索和快速失敗方法的快節奏文化。我遵循標準的晉升階梯：實習生、初級、中級、高級，最後進入工程管理軌道。隨著時間的推移，許多和我一起成長的人後來都去了其他公司工作，成為那裡備受尊敬的貢獻者。可以公平地說他們是優秀的工程師。 回顧我的同事、學員和我自己的旅程，成為優秀工程師似乎比以往任何時候都更難。 ## 定義_好_工程師 **成為工程師意味著什麼？** 作為軟體工程師，我們： - 負責將複雜的問題轉化為高效且可擴展的解決方案 - 負責分析使用者需求、設計軟體架構、編寫程式碼、測試和除錯軟體 - 期望保持領先趨勢，尋求新的商機和改進現有產品的方法 所以不——工程不等於程式設計。有時，這是最小的部分。隨著經驗的積累，一定會出現這樣的情況，如下圖所示。 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfcrp0dz22qnrhkas89u.png) **成為一名_優秀_工程師意味著什麼？** 根據大量採訪以及支持我的學員的進步，我注意到具有不同專業水平的人可能會給出不同的答案。 剛開始的人可能會認為這是開發人員了解的語言和框架的數量。經驗豐富的工程師甚至可能不關心他們使用的語言，而是強調程式碼品質 - 遵守所有編碼原則並進行品質檢查，同時快速行動。 經驗豐富的工程師非常注重創造價值。有時，我們會快速寫出廢棄的程式碼，打破所有規則來證明一個假設；有時我們會花幾天時間編寫幾行關鍵任務程式碼。但大多數時候，我們正在製定架構決策、討論關鍵任務問題、改善流程等。為什麼？因為通常這會帶來最大的價值。 儘管規則總有例外，但我們可以說**一名優秀的工程師能夠有效地集中精力，在實現目標的過程中帶來最大價值。** ## 不斷成長的市場與競爭 **科技市場不斷發展。** 多年來，我們都見證了巨大的成功：從 WhatsApp 到 Uber、Airbnb 和 TikTok。雖然這些可能是例外，但這樣的例子往往為人們樹立了北極星——他們應該為此奮鬥。這種思考方式給工程師帶來了額外的壓力。他們感受到來自內部的壓力，認為自己做錯了什麼，以及來自外部的壓力，因為人們將他們的公司與許多競爭對手進行比較。 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpwm7yro8nqukgnfpbw6.png) 為了在這樣的環境中取得成功，公司需要“快速行動，打破常規”，正如 Facebook 的著名座右銘所說。如今，這一點比以往任何時候都更加明顯——幾乎每家公司都在成為「人工智慧公司」。每個人都在整合 ChatGPT，通常沒有真正的原因，也沒有關於如何帶來價值的策略。 **透過偏離核心原則**——我們如何為客戶帶來更多價值——並轉向在炒作列車上擊敗競爭對手，**我們讓工程師建置注定會失敗的功能。** ## 世界是一個令人困惑的地方 像我這樣的愛好者該怎麼做才能成為更好的工程師？除了透過改進乾淨程式碼和架構哲學來完善編碼技能這一顯而易見的選擇之外，如今還潛伏著許多誘惑。學習 TypeScript 和改變一切的最新框架，深入區塊鏈和加密世界，嘗試無數的人工智慧產品…選擇是無窮無盡的。 ![所有 javascript 函式庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz12rguhiupwiwmmsebt.png) 說實話，在這個行業工作了這麼多年，我仍然感受到 ChatGPT、GitHub Copilot 等新興技術帶來的新一波變革的威脅。我的大腦開始想像我對很多事情脫節的場景。我是否專注於能夠帶來價值的正確事物？我是否發揮了最大潛能？ 一段時間後，很明顯我們正處於炒作之中。這也會過去，只剩下創造長期價值的人工智慧公司。過去 5 年，美國的人工智慧公司數量翻了一番，許多新創公司只是在當時新發布的 GPT-3 的基礎上加入了一項功能。他們後來隨著 ChatGPT 或 GPT-4 的發布而消亡，它們可以做同樣的事情，但更好。但這並不能阻止推特和其他平台的炒作大軍宣布新的世界秩序。 儘管在科技業工作了這麼多年，我還是陷入了炒作之中。菜鳥錯誤！ 程式語言和新框架的不斷發布也增加了混亂。 Tailwind、TypeScript、Haskell 和 Rust 都很棒；他們每個人都有一個帶給他們優勢的角度。然而，人們常常誤以為學習它們可以為他們帶來優勢。它不會，或至少不應該。它們只是很高興了解但不能取代經驗的工具。這就是為什麼我們從不在工作描述中提出語言/框架要求。如果我因為不懂 TypeScript、即時工程或微服務而錯過一位才華橫溢的工程師，那我就太傻了。 我的建議是 - **不要陷入新趨勢和炒作，以至於失去對創造價值的關注。** ## 快節奏與高期望 **在尋求新的挑戰時，可能很難在努力爭取積極壓力的同時避免消極壓力。**積極壓力是指我們將有壓力的情況視為導致良好結果的機會，而消極壓力則可以使我們獲得良好的結果。如下圖所示，會對身心健康產生不利影響。在緊迫的時間內持續交付結果是有壓力的，而出於錯誤的原因建立功能則傾向於後者。 ![正壓力與負壓力](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/503c52srikb307qm3gw7.png) 作為一名導師和一名努力工作的人，我都看到壓力會導致倦怠。無一例外，讓某人經歷倦怠所帶來的產出比減少工作量、休息和長期優化要少。這就是為什麼我們總是嘗試透過定期團隊更新、一對一和培育文化，盡可能簡單地提出危險信號。 儘管如此，事情還是會出問題。當他們這樣做時，我們會縮小範圍，讓可以提供幫助的人員參與進來，或與客戶溝通以推遲發布。 **壓力比以往任何時候都大，來自內部和外部。保持專注，讓自己身邊有一個長期優化的支援團隊。** ## 我們怎麼做得更好？ 我們都有情緒低落的時候──感覺自己是個不稱職的工程師、導師或同事。事情永遠不會是完美或容易的，也不應該是。如果不犯錯和經歷困難，我們就不會學習。但我發現有些事情可以提高效率。 ![影響力等級](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omj6ri7izk3d2bz723w9.png) **就個人而言，**忠於真正重要的事情。科技會來來去去，但你為世界帶來的價值才是最重要的。努力工作和經驗是很難偽造的。 **作為一家公司，**在做出決策時首先從「為什麼」開始。這是提供可帶來價值的功能的最佳方式。另外，請確保員工知道***為什麼***。根據我的經驗，他們會做出更好的決定，提供有價值的回饋，並且會更快樂。 **在文化上，**建立一個支持員工、長期優化的流程。與您的同事一起建立信任、支持和關懷的文化。這樣，你們就能互相發揮最好的一面。

0個讚   0留言 136瀏覽

給網頁工程師的 24 個強大資源 [HTML + CSS + JavaScript]

## 簡介 Web 開發的世界可能會因資源太多而令人不知所措。為了簡化這個過程，我列出了專為 Web 開發人員量身定制的 24 個最佳資源。 本指南涵蓋 HTML、CSS 和 JavaScript 的核心技術，旨在為初學者和專家提供有價值的工具和見解，以提高他們的 Web 開發技能。請探索這些精心挑選的資源，以幫助您在 Web 開發中脫穎而出。 原文出處：https://dev.to/swirl/24-best-resources-for-web-developers-html-css-javascript--2hog --- ## [Swirl](https://github.com/swirlai/swirl-search) [![Swirl v3 演示](https://i.ibb.co/ZBY1HXD/Swirl-v3-Demo-1-2.gif)](https://github.com/swirlai/swirl-search) 搜尋多個來源具有挑戰性。 Swirl 結合了您所有的資料庫、筆記、PDF、Jira、GitHub、向量資料庫、Discord、Slack、Teams Chat 等，並允許您搜尋它們。 允許您： - 產生答案的人工智慧摘要。 🤖 - 管理您的資料並建立知識庫。 📚 - 節省時間並提高工作效率。 ⏳ 請在 GitHub 上給 Swirl Search 一個 ⭐️。 💖 https://github.com/swirlai/swirl-search 在 GitHub 上給 Swirl ⭐ --- ## CSS 工具 #### 1. [CSS 漸變](https://cssgradient.io/) CSS Gradient 是一個可讓您為網站建立免費漸變背景的專案。 ![CSS 漸變](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3pz3pttdz3mw73hfgd6.png) #### 2. [Colorhunt](https://colorhunt.co/) Colorhunt 為設計師和藝術家提供了很棒的調色板。 ![Colorhunt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36tgjp6atk0gbqvyrkof.png) #### 3. [CSS 技巧](https://css-tricks.com/) CSS Tricks 提供了有關級聯樣式表的一些最佳建議、提示、技巧和程式碼片段。 ![CSS 技巧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cpyxw7dh1st3u2t2lpd.png) #### 4. [Haikei 生成器](https://haikei.app/generators/) Haikei 是一款 Web 應用程式，可產生令人驚嘆的視覺內容 - 可與您的設計工具和工作流程一起使用。 ![Haikei 產生器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1iodm4kouyeo1fqaapi.png) #### 5. [FFFuel](https://fffuel.co/gggrain/) Fffuel 是一個顏色工具和免費 SVG 生成器的集合，用於漸變、圖案、紋理、形狀和背景。 ![FFFuel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtuapj8v11oy90wu63vl.png) #### 6. [SVG 背景](https://www.svgbackgrounds.com/) SVG 背景託管一系列可在您的網站上使用的 SVG 背景。 ![SVG 背景](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snvajtzhfcdeij595okb.png) #### 7. [動畫背景](https://animatedbackgrounds.me/) 動畫背景託管各種動畫背景的程式碼片段，可用作網站的背景。 ![動畫背景](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihajx942sr0a1hdjhpc9.png) #### 8. [Flowbite](https://flowbite.com/blocks/publisher/blog-templates/) Flowbite 提供了一組基於流行的 Tailwind CSS 框架的強大設計令牌和元件。 ![Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5vm5gt1eq8xp3v2sfeb.png) #### 9. [DaisyUI](https://daisyui.com/) DaisyUI 為 Tailwind CSS 新增了一組可自訂的顏色名稱，這些新顏色使用 CSS 變數作為值。 ![DaisyUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftt8w6hb86u053ou1jjr.png) --- ## HTML #### 10. [Quackit 的 HTML 範本](https://www.quackit.com/html/templates/) Quackit 提供了大量免費網站模板可供選擇。根據您的選擇，您可以從簡單或更高級的模板清單中進行選擇。 ![Quackit 的 HTML 範本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpck2niq9956wgdiknmq.png) --- ## 圖示 #### 11. [Devicon](https://devicon.dev/) Devicon 是一組代表程式語言、設計和開發工具的圖示。您可以將其用作字體或將 SVG 程式碼複製/貼上到您的專案中。 ![Devicon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuwk7f14xmmahc3l5368.png) #### 12. [Flaticon](https://www.flaticon.com/) 為您的專案下載免費圖示和貼紙 - 由設計師製作並為設計師製作的 PNG、SVG 等格式的圖像。 ![Flaticon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/694zggooyig7digfrje6.png) --- ## 低程式碼工具 #### 13. [Framer](https://www.framer.com/) Framer 是一款低程式碼、基於人工智慧的拖放式網站建立器。 ![Framer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0nb98taxppb2lq2j5ud.png) #### 14. [泡泡](https://bubble.io/) Bubble 自稱是世界上唯一的全端、無程式碼平台。 Bubble 是一款讓您無需編寫任何程式碼即可建立應用程式的工具。 ![氣泡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx9t207djk1rk3acimor.png) #### 15. [阿達洛](https://www.adalo.com/) Adalo 是一種低程式碼響應式 Web 應用程式設計工具。 ![Adalo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9eyoci23wjrwfkbayhd.png) --- ## 其他 #### 16. [CDN JS](https://cdnjs.com/) CDN JS 是一個免費開源的內容傳遞網路。它允許 Web 開發人員直接搜尋 npm 套件並將其載入到靜態頁面的 HTML 頭部，而無需擔心 npm 安裝。 ![CDN JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33zhw7i6suw2fvd5uxfr.png) ## 免費圖片 #### 17. [Unsplash](https://unsplash.com/) 雖然我們有圖像生成工具，但沒有什麼比Unsplash帶給我們的超現實主義更重要了。您可以在網站上使用許多圖像（請記住向攝影師捐贈並在使用他們的圖像時提及他們）。 ![Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slj7w9m4t3g1d8ovcgvp.png) #### 18. [DALLE-3](https://openai.com/dall-e-3) Open AI 影像生成工具的第三次迭代。您可以使用 Bing AI 圖像產生器工具免費使用此工具。 ![DALLE-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agayg9j66sxts85t9or5.png) --- ## 模型 #### 19. [模型世界](https://www.mockupworld.co/) 大量免費、合法、完全分層、易於自訂的逼真 PSD 模型：可在您的專案、應用程式展示和演示中使用！ 〜在他們的網站上提到！ ![模型世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uujz7r6rqwpeiimzy2o.png) #### 20.【免費模型世界】(https://www.freemockupworld.com/) Free Mockup World 是高品質、最佳免費模型的合作，包括 Apple 裝置、品牌、標誌、印刷、數位藝術、時尚、服裝等。 〜在他們的網站上提到。 ![免費模型世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwa2ss6ueyra2w553yka.png) #### 21.【UI設計日報】(https://uidesigndaily.com/) 適合您網站的免費開源 UI 設計資源。 （包含登入頁面等的 Figma 模型） ![UI 設計日報](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj9rxpndn5n82jv2tgij.png) --- ## 其他有用的開源程式庫 #### 22.【ShadCN】(https://ui.shadcn.com/) 使用 Radix UI 和 Tailwind CSS 建立的設計精美的元件。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epbhf6clfcprk88hiem0.png) #### 23. [點選投票](https://clickvote.dev/) Clickvote 是一個開源函式庫，可以省去圍繞內容建立反應元件的麻煩。 ![點擊投票](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q811a8q07g72taiib87e.png) #### 24. [斯巴達NG](https://www.spartan.ng/) ShadCN 用於 Angular。開源、社群建構。 ![斯巴達 UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odg6ubryxangvs7skvzp.png) --- ## 用於搜尋資料 - Swirl ### [漩渦](https://github.com/swirlai/swirl-search) **Swirl 是一個開源搜尋平台，它改變了您與資料互動的方式。** [![Swirl v3 演示](https://i.ibb.co/ZBY1HXD/Swirl-v3-Demo-1-2.gif)](https://github.com/swirlai/swirl-search) 將其視為專門為您的獨特資料集量身定制的 ChatGPT。無論是筆記、程式碼片段、PDF 檔案還是電子郵件，Swirl 都是您獲取即時、人工智慧驅動見解的首選平台。 Swirl 與眾不同的特質： - **一般搜尋**：無縫搜尋筆記、程式碼、文件、資料庫、電子郵件、聊天、日誌等。 🔍 - **個人人工智慧驅動的知識助理**：您可以為您的公司、新創公司或個人資料建立安全、可搜尋的知識庫。 🤖 - **一鍵檢索增強生成**：使用 Swirl，您可以立即執行人工智慧摘要和分析。您可以透過產生這些資料的資料來源來獲得答案。 🛠️ **請在 GitHub 上給 Swirl Search 一個 ⭐️。 💖** https://github.com/swirlai/swirl-search 在 GitHub 上給 Swirl ⭐ 並加入我們的【開源 Slack 社群 💕】(https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw) --- 再次感謝您的閱讀！

2個讚   0留言 239瀏覽

8款新潮好用的 React 套件分享

原文出處：https://dev.to/github20k/8-components-to-become-a-react-master-2ee4 # 簡介 我收集了可用於建立終極網站的 React 元件。 他們每個人都有獨特的用例！ 別忘了給他們加星號🌟 那麼就讓我們開始吧！ ![讓我們開始吧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxaa9vnqc8ye5a0g1iv2.gif) --- ## 1. [Clickvote](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert) - 按讚、投票並查看任何上下文。 👑 [![Clickvote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yn237newdjgm4uhl1p1.png)](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-clickvote/clickvote?utm_source=dev&utm_medium=react-元件專家) 將點讚和評論元件無縫整合到您的應用程式中。 使用這個簡單的 React 程式碼渲染喜歡框、評論框和反應元件！ ``` import { ClickVoteProvider } from '@clickvote/react'; import { ClickVoteComponent } from '@clickvote/react'; import { LikeStyle } from '@clickvote/react'; <ClickVoteProvider> <ClickVoteComponent id={CONTEXT} voteTo={ID}> {(props) => <LikeStyle {...props} />} </ClickVoteComponent> </ClickVoteProvider> ``` 在這裡加星號🌟 [https://github.com/clickvote/clickvote](https://github.com/clickvote/clickvote?utm_source=dev&utm_medium=react-component-expert) --- ## 2. [Novu](https://github.com/novuhq/novu) - 將應用程式內通知新增至您的應用程式！ [![Novu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyb47s6sbh232x77f794.png)](https://github.com/novuhq/novu) 用於在一個地方管理所有通訊管道的簡單元件和 API：電子郵件、SMS、Direct 和 Push 您可以使用此 React 元件為您的應用程式新增應用程式內通知 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, IMessage, } from "@novu/notification-center"; <NovuProvider subscriberId={"SUBSCRIBER_ID"} applicationIdentifier={"APPLICATION_IDENTIFIER"} > <PopoverNotificationCenter colorScheme="dark"> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> ``` 在這裡加星號🌟 https://github.com/novuhq/novu     ## 3. [CopilotKit](https://github.com/RecursivelyAI/CopilotKit) - 使用 GPT 將自動補全功能加入您的文字！ [![CopilotKit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bvi730jwuggjti7peg8.png)](https://github.com/RecursivelyAI/CopilotKit) 適用於任何 React 應用程式的強大且可破解的副駕駛。 只需幾分鐘即可開始並無限迭代。 一個簡單的元件，可以自動完成您的內容，就像您在 Gmail 上一樣。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; <CopilotProvider> <CopilotTextarea/> </CopilotProvider> ``` 在這裡加星號🌟 https://github.com/RecursivelyAI/CopilotKit     ## 4. [Tolgee](https://github.com/tolgee/tolgee-platform) - 將任何上下文翻譯成任何語言！ [![Tolgee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbsuotaz842jjgaduqe3.png)](https://github.com/tolgee/tolgee-platform) 智慧平台、快速整合、輕鬆在地化。 一個簡單的元件，可以將任何上下文翻譯成任何語言！ ``` import { TolgeeProvider, T } from "@tolgee/react"; <TolgeeProvider tolgee={tolgee} fallback="Loading..." // loading fallback > <T keyName="translate_me">Translate me!</T> </TolgeeProvider> ``` 在這裡加星號🌟 https://github.com/tolgee/tolgee-platform     ## 5. [Hanko](https://github.com/teamhanko/hanko) - 對您的應用程式進行金鑰身份驗證！ [![Hanko](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j2aa3um0umgxskgau7u.png)](https://github.com/teamhanko/hanko) 美觀、可自訂的元件、SDK 和 API 可為您的登入和使用者管理提供支援。 5 分鐘內新增密碼驗證！這是該元件： ``` import { register } from "@teamhanko/hanko-elements"; const hankoApi = process.env.HANKO_API_URL; register(hankoApi); <hanko-auth />; ``` 在這裡加星號🌟 https://github.com/teamhanko/hanko     ## 6. [React Email](https://github.com/resendlabs/react-email) - 下一代書寫電子郵件 [![React 電子郵件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga9lcps91gv78sdy6l62.png)](https://github.com/resendlabs/react-email) 一系列高品質、無樣式的元件，用於使用 React 和 TypeScript 建立精美的電子郵件。 幫助您設計和發送電子郵件的元件！ ``` import { Button } from '@react-email/button'; import { Html } from '@react-email/html'; <Html lang="en" dir="ltr"> <Button href="https://example.com"> Click me </Button> </Html> ``` 在這裡加星號🌟 https://github.com/resendlabs/react-email     ## 7. [React Flow](https://github.com/wbkd/react-flow) - 建立可拖曳工作流程的最佳方式！ [![反應流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqcjbtlg5d8hx69vtvaa.png)](https://github.com/wbkd/react-flow) 高度可自訂的 React 元件，用於建立基於節點的編輯器和互動式圖表 一個簡單的元件，將為工作流程呈現拖放節點。 ``` import ReactFlow, { MiniMap, Controls, Background, useNodesState, useEdgesState, addEdge, } from 'reactflow'; <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} > <MiniMap /> <Controls /> <Background /> </ReactFlow> ``` 在這裡加星號🌟 https://github.com/wbkd/react-flow     ## 8. [Novel](https://github.com/steven-tey/novel) - 最好的所見即所得編輯器！ [![反應流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz1xewgmoc7htoq6d08b.png)](https://github.com/steven-tey/novel) 概念式所見即所得編輯器，具有人工智慧驅動的自動完成功能。 一個簡單的元件，將呈現具有大量功能的概念樣式編輯器！ ``` import { Editor } from "novel"; <Editor /> ``` 在這裡加星號🌟 https://github.com/steven-tey/novel --- 謝謝你們！ 下週見😎

0個讚   0留言 294瀏覽

國外資深開發者，分享8個工作與生活的優化心得

國外一名資深開發者分享工作心得與技巧，與大家分享原文！ 原文出處：https://dev.to/wraith/my-8-tips-for-a-better-life-as-a-developer-1hfg --- 我擔任軟體開發人員已經有 8 年多了，從我自己的經驗以及從一些非常有才華的人那裡學到了很多東西。在這篇文章中，我想分享一些真正讓我的體驗變得更好、更愉快的事情。 ## 1. 找一個您喜歡工作的地方 ![三個人坐在咖啡店裡用電腦工作，微笑。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shosztzzfmpjuf7ksr5c.jpg) 您的環境對您的生活貢獻很大。它可以增加或減輕壓力，幫助您集中注意力或分散注意力，讓您感到安全或不安全等等。因為它在我們每個人的生活中都扮演著不可或缺的角色，所以我認為從這裡開始是合適的。 無論您是在辦公室還是遠端工作，您很可能可以採取一些措施來找到一個讓您感覺「合適」的地方。我說「對」是因為這裡每個人都會有所不同。有些人想要感到舒適和「賓至如歸」。其他人想要一個不太舒適的區域，而是真正讓他們「進入狀態」並集中註意力的區域。 多年來，我嘗試了很多不同的地點，只是為了看看什麼對我有用。我坐在陽台上，享受早晨涼爽的空氣，喝著一杯熱咖啡。我確實坐在桌子底下，身上蓋著毯子。我坐在壁櫥、角落、咖啡店、餐廳、酒吧、汽車、公園、餐桌和樓梯井裡。透過所有這些實驗，我已經能夠找到在我需要時為我提供所需的地方。如果我需要集中註意力，我就需要獨處。某處有一扇可以關閉的門，但沒有窗戶讓我注意到有人走過。當我太舒適時，就像依偎在柔軟的沙發上的毯子裡時，我的工作效果就不太好。如果我需要改變節奏，或者只是需要和人們在一起，我發現我真的很喜歡坐在不太擁擠的小酒吧或餐廳裡。我可以在某個地方點一杯飲料和一份開胃菜然後工作，但周圍仍然有幾個人。 所以我鼓勵你嘗試幾個地方。找出什麼對你有用，同樣重要的是，找出什麼對你沒用。如果你找不到地方，你總是可以花一點力氣去打造你想要的地方！ 「正確」對你來說意味著什麼？ ## 2. 投資硬體 ![黑暗房間裡一張配有高科技設備的桌子，LED 照亮空間](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7knnfnk29bpe02gibac4.png) 作為軟體開發人員，我們使用的硬體數量非常多。可以說，我們使用鍵盤和辦公椅之類的東西比生活中任何其他物品都多。當然，我們可以使用任何舊鍵盤來完成工作，我們可以坐在任何椅子上。但我發現，對「更好」的硬體進行一點投資會對我的工作體驗產生很大的影響。 ### 椅子 如果您在工作時坐著，並且您只想投資一件東西，那麼它絕對應該是您的椅子。一張既提供舒適又提供支撐的椅子確實可以大有幫助。從您可以坐多久並集中註意力而不會感到不舒服，到日常生活中背部、頸部和肩膀的感覺，您的椅子對您的整體健康和福祉有很大影響。因此，一定要找到一款好的產品，而不要只滿足於會導致不良姿勢的產品。 我個人使用 [Secretlab Titan Evo（蝙蝠俠主題）](https://secretlabchairs.ca/products/titan-evo-2022-series?sku=R22PU-Batman)，幾年來我對它非常滿意。與許多高端桌椅相比，價格還不錯。 ### 鍵盤 僅次於椅子（但相差不多）的是鍵盤。輕鬆地成為我們每天工作中互動最多的工具。那裡也有很多選擇，因此無論您的個人喜好如何，很可能有一些東西可以滿足您的需求。 每個人選擇合適的鍵盤都有很大不同。有些人喜歡低調的鑰匙而不是機械鑰匙。有些人需要整合 USB 連接埠。成本、人體工學、有線或無線、可自訂的按鍵和開關、背光、可配置的 LED、支援配置按鍵佈局、高度和大小、按鍵數量，這樣的例子不勝枚舉。尋找適合您的鍵盤無疑是一段旅程，但我強烈建議您繼續下去。當然，我們可以使用任何鍵盤來完成我們的工作......但我保證，如果您嘗試一下，找到「正確的」鍵盤將使您作為開發人員的一天和體驗更加愉快。 我使用 [Moonlander Mark 1](https://www.zsa.io/moonlander/)，絕對💙它！分離式設計確實幫助我不再那麼無精打采，也幫助消除了我長期以來的肩膀和手腕疼痛。再加上那些櫻桃棕色的開關聽起來很漂亮😍！ ### 滑鼠 談論鍵盤就不能不談論它們的助手——滑鼠。就像鍵盤一樣，市面上有許多不同類型的鍵盤，每個人都會有自己的偏好。幸運的是，即使是半像樣的滑鼠也有相當低的價格，因此嘗試一些滑鼠來找到適合您的滑鼠相對容易。但與此處的所有其他專案一樣，投入一點時間和金錢即可對您的體驗產生積極影響。 我的老鼠是 [ZLOT 垂直遊戲滑鼠](https://www.amazon.com/gp/product/B07T3PFWCB?th=1)。它是一款較輕（重量）的滑鼠，但具有良好的人體工學感覺和響應能力，我已經喜歡了很長一段時間了。 ### 螢幕 這絕對是一個可選專案，但我發現它讓我的工作更加愉快。並非每個人都需要外接顯示器。有些人實際上更喜歡直接使用筆記型電腦工作。但如果您確實喜歡使用外部顯示器，這是一項可以產生巨大影響的投資。 遺憾的是，由於多台 4k 顯示器在 Mac 上工作出現問題，我放棄了多顯示器設置，現在使用 [Sceptre 35" 曲面顯示器](https://www.sceptre.com/Monitors/2K-4K-Series/C355W-3440UN-35-Curved-Monitor-product1176category12category98.html)。它有很多空間，所以我仍然可以在一個螢幕上打開大量視窗。 ### 耳機 耳機也是可選的（有些人可能會反對這一點😝），但它們的好處怎麼強調都不為過。從減少干擾到幫助您集中註意力，一副好的耳機可以大有幫助。就像我列出的大多數專案一樣，每個人的偏好都會有所不同。但是，投入一點時間和金錢來尋找一雙適合您的好鞋，確實可以將您的遊戲提升到一個新的水平。我認識的許多人都尋求良好的降噪效果，而且它們必須輕盈舒適，這樣才能一次佩戴幾個小時。 我個人喜歡使用 Beats。我曾經使用[Studio3](https://www.bestbuy.ca/en-ca/product/beats-by-dr-dre-studio3-over-ear-noise-cancelling-bluetooth-headphones-black/11534527 )但是當我必須開始戴眼鏡時，我不喜歡這些耳機給我的鏡框帶來的壓力，所以我改用了[Beats Fit Pro](https://www.beatsbydre.com/earbuds/beats-fit-pro?sku=MK2F3) 並且對它們非常滿意。我已經連續戴了 8 個小時，效果非常好。它們輕巧、舒適、音質好，並且在我慢跑和運動時表現良好且穩定。 您使用什麼硬體？您夢想的硬體是什麼？ ## 3. 找到您*喜歡*使用的工具 ![應用程式牆的螢幕截圖，應用程式圖示上有有趣的表情符號臉孔](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clgqlfokffwpu57wnkr9.png) 除了硬體之外，作為開發人員，我們還使用許多軟體工具來完成我們的工作。有些我們別無選擇，但也有很多我們可以選擇，找到您真正喜歡使用的工具確實可以讓您的日常體驗變得更好。即使只是擁有一個可以配置為您喜歡的外觀的工具也可以產生積極的影響。 我在這裡想強調的不是找到每個人都使用的工具，因為他們可以做各種各樣的事情。更多的是尋找您真正「喜歡」和「期待」使用的工具來完成工作。即使它們不能完成其他工具可以完成的所有奇特的事情，如果您確實希望使用其他工具，那就使用它！擁有我們積極喜歡的工具確實會為我們的生活增添很多積極性。 多年來，類似的工具有很多，但這裡有一些工具為我的日常生活帶來了很多樂趣： - Giphy Desktop app - 用 gif 回覆取代無聊的文字，讓 Slack 訊息變得生動起來。 - Raycast - 這已經取代了我 Mac 上的 Spotlight。透過專業版，我可以存取 ChatGPT 4...因此，只需一個快速鍵盤快捷鍵，我就能輕鬆掌握 AI。對我來說遊戲規則改變者！ - Obsidian - 雖然這已經是一個流行的筆記應用程式，但我花了一些時間編寫了一些腳本來為我自動化工作，它完全改變了我記下所有筆記並跟踪我需要做的所有事情的方式。 - Arc browser - Arc 花了整整 1 天的時間才成為我的主要瀏覽器。現在，當我測試瀏覽器對我正在建立的某些功能的支援時，我只使用其他瀏覽器（在我的桌面上）。 - Habitical - 獲得徽章、成就和一般遊戲化讓我非常有動力，所以這個待辦事項應用程式讓我管理和執行任務變得更加有趣！ 有哪些工具可以為您的日常開發生活帶來樂趣？ ## 4. 設定目標 ![一台打字機，上面印有一張伸出的紙上的「目標」](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcsabk75mtb2o8dlwbt3.jpg) 我知道這聽起來很明顯，而且我相信我們都從無數其他來源聽到這一點。但您可能會驚訝地發現有多少人沒有為自己設定目標。不相信我？向你的任意 2 到 3 個鄰居詢問他們目前正在努力實現什麼目標。當我問這個問題時，經常得到的只是聳聳肩，然後回答「沒什麼」。 僅僅設定目標也是不夠的。你也必須定期考慮它們。有些方法建議將它們寫下來並放在鏡子上或您經常看到它們的地方。這個方法對我個人來說沒有效果，但也許對你有用？對我來說有效的方法是每天早上開始工作前坐下來15 分鐘，並重點思考我的目標、我所有的待辦事項以及日曆上的所有事情（是的，我實際上在日曆上留出15分鐘的時間）這個，並強迫自己堅持這個時間）。在這段時間裡，我思考我的目標，並找出我今天可以做的一件小事，讓我離實現每個目標更近一步。 例如，如果我的目標是在家人來過感恩節之前清理車庫，我會想，「我今天可以做哪一件小事來實現這個目標？」。有時答案特別小…「掃到工作台下面」。其他時候我可能會更有動力，或者我有更多的可用時間，這可能是更大的事情。無論如何，請花一些時間考慮您今天可以採取的一項行動來實現該目標。 當我這樣做時，我的大腦中會發生一些事情。我發現自己感覺更有成就感和更樂觀。當然，完成目標可能是一條漫長的道路（如果它是一個大目標），但是知道我離我想要完成的事情更近了，這對我的日常生活產生了積極的影響，並讓我能夠完成的事情比我想像的還要多。 無論大小，給自己設定目標。然後定期思考它們，並採取許多微小的行動，以朝著前進邁出一步。我保證這會為您的生活帶來美好的事物！ 現在您正在努力實現哪些目標？ ## 5. 保持好奇心並了解*為什麼* ![視窗上有一個標誌，上面寫著「#becurious」](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42zs3m4tlzbcilh338nd.png) 很多人對編碼專案中的完成方式感到沮喪或評判。我肯定去過那裡！ - “為什麼有人選擇這項技術？！對於這個用例來說，其他技術要好得多...” - “為什麼有人會寫這樣的程式碼？！” - “如果我們不做 X 而只是做…，事情會好得多” 這些聽起來很熟悉嗎？ 儘管事情有時會令人沮喪，但在軟體開發中，做出的每個決定背後幾乎總是有一個「原因」。這是最好的選擇嗎？也許不是……但做出這樣的選擇還是有原因的。 我曾經對事情的現狀感到沮喪，然後在嘗試解決問題時感到沮喪，然後在遇到障礙時感到沮喪。但最終，事情突然發生了，我沒有感到沮喪，而是開始尋找這些事情發生的原因。背後的*原因*是什麼。當我養成「尋找原因」而不是「想知道為什麼不」的習慣時，我的好奇心變得更強。我發現我正在尋找更多的訊息，更徹底地學習和理解事物，更多地同情與我一起工作的人，最終，沮喪的感覺減少了很多。 現在，我的經歷更加積極了。無論我是重構一段複雜的程式碼，試圖找到解決惱人問題的方法，還是為新工作學習全新的程式碼庫，我實際上更喜歡這個過程，因為我只是好奇並想知道「為什麼」。 最近一次讓您真正感到沮喪的編碼*事情*是什麼？您知道*為什麼*會是這樣嗎？ ## 6. 為重點工作劃出日曆 ![一週中每天 2 小時的日曆條目顯示「焦點時間」](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13x844h65h98y6c78bsk.png) 這說起來容易做起來難，具體取決於您的工作地點，但它會對您的開發人員生活產生驚人的影響！ 您是否曾經在該區域中，只是編寫程式碼來建立該新功能，然後「*叮！*」有人向您發送了一條緊急的 Slack 訊息？或是有人拍拍你的肩膀問你問題？您解決了乾擾問題，然後返回螢幕，然後您就失去了所有註意力？如果沒有……我願意賭很多錢，你會在職業生涯的某個時刻這麼做。 「在區域中」或進入「心流」的概念是一個已經被研究和寫了很多的主題。我強烈建議您查看一些有關該主題的文章和書籍，因為這是一個非常有趣的主題（至少對我來說是😃）！其中許多研究都表明，處於心流狀態是多麼有益，而且在中斷後可能需要 20 分鐘以上才能恢復到那種精神狀態！因此，找到讓自己進入這種心態並保持這種狀態的方法非常重要！ 我發現讓自己進入這種狀態的最佳方法之一就是在日曆上劃出大量時間專門用於「專注工作」。一開始這可能是一個挑戰，讓人們在嘗試聯繫之前檢查您的日曆或 Slack 狀態，並幫助每個人了解您將在焦點時間結束後立即回覆他們。但最終人們會明白過來，並且回報是巨大的！別忘了在這段時間關閉通知！ 不過這裡有一些提示...... - 接受有時會出現緊急事務並需要更高優先順序的事實。這就是生活，我們只能隨波逐流……但這不該成為「常態」。 - 拍攝 2-3 小時的片段。少於這個數量會讓人覺得不夠，但超過這個數量，人們就會被迫更頻繁地打斷你。請記住，其他人也有重要、緊急的事務，在當今的工作環境下，讓他們等待半天以上才能獲得地址確實不公平或不合理。 - 在你最有生產力的時間安排這些時間段。對我來說，早上 6 點到 10:30 左右我的工作效率最高。所以我通常會嘗試將我的專注時間安排在這些時間裡。 您發現一天中的什麼時段您的工作效率最高？ ## 7. 讓 PR 小一點 ![GitHub 審核標題的螢幕截圖，顯示 3 個檔案已更改，總共進行了 35 項更改](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf7cy31tmzjjfz9wz2cn.png) 我喜歡這個，並且在過去一年左右的時間裡它已經成為我的首要任務。 事實證明，保持 Pull 請求（或 GitLab 人員的合併請求）較小有很多積極的好處。發布的錯誤更少，我們審查程式碼的時間更少，功能的推出速度更快，僅舉幾例。所有這些不僅使我們的產品變得更好，而且我發現它也極大地改善了我作為開發人員的體驗！ 透過專注於較小的變化，我發現我可以更徹底地思考問題，考慮到在較大變化的混亂中可能被忽視的用例。我能夠更快地將變更納入審查，我的團隊成員能夠更快地審查我的程式碼，因為我只佔用了他們5 分鐘而不是2 小時的時間，並且在審查期間，我收到的程式碼要少得多變更請求。因此，更好的程式碼將會出現，我可以繼續花更多的時間來建立新的東西，而不是必須解決一堆被遺漏的錯誤。 另一方面，審查小型 PR|MR 比大型 PR|MR 更令人愉悅。您是否曾經需要審查某人的 PR|MR，其中包含數千個更改、跨越 20 多個檔案以及應用程式的多個區域？當你這樣做時，你的第一個反應是什麼？您是否對參與並開始審核感到過於興奮？或者，也許您感到“呃”，於是推遲了會議，因為距離下一次會議只有 30 分鐘，而您可以在這段時間內完成其他事情？ 當審查大型 PR|MR 時，通常會失去很多細節（或至少受到較少的關注），最終，大多數人會達到「審查盲目性」或「審查疲勞」的地步，事情開始被忽視，或者審稿人必須離開一段時間，稍後再回來。這一切都會導致審核過程花費更長的時間、效率更低，並導致提交更多的變更請求。更不用說所有團隊成員都有的不滿情緒了。 自從我開始將此作為自己的優先事項，並與團隊成員一起努力讓他們也這樣做時，我注意到我在 PR|MR 方面的經驗明顯改善了。我更願意在會議之間跳出一些評論，我不得不要求更少的改變，而且我不會在需要離開並重新振作起來之後感到精疲力盡。就連我的計劃也變得更準確了！ 總而言之，我強烈向大家推薦這個。如果您想了解更多關於這樣做的好處，我建議您查看 [LinearB 部落格](https://linearb.io/blog) 以及 [Dev Interrupted 播客](https://linearb.io/dev-interrupted/podcast).他們談到了一些很棒的觀點，我發現這些觀點確實對工程領導者和團隊有幫助！ 你曾經審查過的最糟糕的公關是什麼？ ## 8. 寫下一切！ ![有人在筆記本上寫筆記](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeqff10xv6ej22xk22w8.jpg) 我的最後一個建議是我在去年開始做的事情，在閱讀了[如何做智慧筆記](https://www.amazon.ca/How-Take-Smart-Notes-Technique/dp/3982438802)和[把事情做好](https://www.amazon.ca/Getting-Things-Done-Stress-Free-Productivity/dp/0142000280)它對我的生活產生了驚人的影響。 當我學到新東西時，我會把它寫下來。即使只是一小段描述我學到的東西。當出現新任務時，無論大小，我都會把它寫下來。在會議期間，如果分享想法、給予回饋、提出問題，所有這些都會被記錄下來。如果我對某事有一個隨意的想法，或者一個頭腦發熱的想法……你猜對了……它會被寫下來。然後，每當我有幾分鐘空閒時間時，我都會先看筆記，而不是瀏覽社群媒體。我盡可能回顧它們，這強化了我腦海中的訊息，但也幫助我將不同的想法聯繫在一起，這往往會產生一個全新的想法。 透過這樣做，我發現我對事情的記憶更加徹底。如果我不能，我有記錄並且可以將其調出！它使我能夠完成更多的工作文件，而且我甚至在任何給定時間都有 4 或 5 篇部落格文章正在編寫中！遺漏的事情少了很多，而且我能夠完成更多的事情。 我最近開始了一份新工作，透過使用這種方法，人們已經來找我詢問我是如何做到這麼多的！秘密醬汁？全部寫下來並將其加入到系統中。 這對我來說改變了遊戲規則，我只需要鼓勵其他人也這樣做，因為我真的相信這可以使他們的生活受益匪淺！ 你用什麼方法來記住和分享你學到的東西？ ## 結論 在過去 8 年多的軟體開發人員和工程師工作中，我學到了很多。我經歷過好時光和壞時光，並一路走來學到了一些非常有用的人生課程。透過找到我喜歡工作的地方，在我的硬體上投入更多的時間和金錢，找到我「喜歡」使用的工具，設定目標，保持好奇心並專注於“為什麼”，定義專注工作的時間，專注於保持PR 較小，並寫下我能寫下的一切，我可以誠實地說，我的開發者體驗得到了極大的改善。 我非常希望這些技巧中至少一兩個能改善您的體驗。

0個讚   0留言 260瀏覽

[自修資源] 還在六角學院？誰跟你說學程式，一定要花錢買課？

## 前情提要 本文跟六角學院沒有任何關係ＸＤ ## 文章開始 今天要討論自學，關於線上課程，我認為買一些課是好的，但別傻傻看了促銷就買。 誰跟你說學程式一定要花錢？ 告訴我，誰跟你講的？就是賣你課的人啊傻子。 . . . 我今天這篇文章要教你怎麼免錢學程式，而且是有系統的學，不是自己在那邊維基百科或谷歌一百年那種。 答案是：爬文。 . . 好啦我知道你們這些伸手牌就是懶得爬文所以才會想要花錢了事，今天我爬完了。 ## 好料放送(一) 把免費資源直接丟給你吧。 [「Python 網路爬蟲與資料分析入門實戰」範例程式碼](https://github.com/jwlin/py-scraping-analysis-book) ![](https://i.imgur.com/8tT3GaY.png) 裡面包含 ``` 網頁爬蟲範例實戰 3-1 PTT 八卦板今日熱門文章 3-2 Yahoo 奇摩電影本週新片 3-3 兩大報當日焦點新聞 3-4 Google 搜尋股價資訊 3-5 Dcard 今日熱門文章 ``` 所有書本裡面的程式碼作者都直接公開了，我也不知道為什麼，反正就是免費給你。 現在你也不用自己google研究，直接複製丟到GPT那邊寫一個教學文章給你， 你就等於能夠免費讀到這本書。而且不用手打程式，你最愛的那種。 ## 好料放送(二) ![](https://i.imgur.com/MTppdAD.png) [hahow 線上課程: Python 網頁爬蟲入門實戰](https://github.com/jwlin/web-crawler-tutorial/tree/master) . 同一個作者丟出來的，總之既然人家想放github那就看啊！ 用法也是一樣，人家有個lecture可以看看課綱與大致上的說明自己去配上GPT以及谷歌， 然後不需要自己打扣，直接有現成範例可以拿去跑看看，年代問題導致的錯誤還可以當作功課自己改。 . . . ## 總結 還在靠北沒資源或是一直問要怎麼自學？現在告訴你了， 這樣的教材原本他起碼都賣幾千塊，你可以免費學幹嘛不學？ 別問我怎麼知道的，我也是爬文爬到的，只是我人很好分享給你們知道而已。 . . 謝謝，別那麼感動。 . . 我也只是一個很愛免費白嫖的爬文仔而已。

6個讚   6留言 1,325瀏覽

AI 咒語工程簡介：什麼是 AI 咒語工程？如何利用各種 AI 得到理想產出？

人工智能遍地開花，隨處可見一些新的人工智能工具。在 [ChatGPT](https://openai.com/blog/chatgpt)、[AutoGPT](https://autogpt.net/)、[Midjourney](https://www.midjourney.com/home/) 之間， [Dall-E](https://openai.com/dall-e-2) 和 [GitHub Copilot](https://github.com/features/copilot)，您可以建置、編碼、獲取答案，以及創造美麗的藝術品……至少我們中的一些人可以。 為什麼有些人在使用生成式 AI 時比其他人獲得更好的結果？為什麼有些人製作的藝術品配得上盧浮宮，而另一些人卻得到了接近狗屁的東西？ 這一切都取決於您使用的輸入。此輸入稱為“提示”。提示是您提出的問題，或者您用來建立內容的詞語。那些“製作”提示或對輸入有策略的人將其稱為“提示工程”。 原文出處：https://dev.to/github/prompt-engineering-for-ai-what-is-prompt-engineering-and-how-to-get-good-results-from-ai-engines-5ch6 ## 什麼是提示工程？ 提示工程是指專門設計提示，以便從 AI 獲得更好的結果。 [OpenAI](https://openai.com/)、[Google](https://bard.google.com/) 等人工智能係統的建立者甚至聘請“快速工程師”來幫助訓練他們的模型。一些“創作者”甚至在 Etsy 等平台上出售他們的 Midjourney 提示。 簡而言之，人工智能系統就像資料：輸入垃圾，輸出垃圾。如果輸入錯誤，可能會得到錯誤的結果。提示工程在很大程度上受上下文影響。 ## 人工智能的背景 當涉及到我們得到的結果時，上下文是最大的問題之一。例如，如果我用谷歌搜尋“donut”（或“doughnut”:doughnut:），我可以獲得一整套結果；從甜甜圈食譜到甜甜圈圖片，或者在哪裡可以買到這種美味的甜點。這是因為我沒有給搜尋引擎任何其他上下文。當然，Google 會使用我之前的搜尋歷史記錄和我的位置等訊息來幫助確定結果，但僅此而已。 ![GitHub 甜甜圈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rp4pnnp89sr7u1nkqnli.jpg) _搜尋引擎中的術語“甜甜圈”可以指任何形狀、Slack 插件、應用程式，或者 GitHub Universe 2022 上提供的這些美味的 GitHub 甜甜圈_ 例如，如果我想找到一個關於在 Blender 中建立甜甜圈 3D 模型的教程，那麼如果我只輸入“甜甜圈”，搜尋結果可能不會顯示。我需要更具體。諸如“甜甜圈 Blender3D 教程”之類的東西會為我提供更準確的結果。 人工智能也是如此。您需要為 AI 提供足夠的上下文，以便根據您的需要獲得更好的結果。 ## 聊天應用的提示工程 許多人向我們展示了來自 ChatGPT 的一些瘋狂結果。雖然它們並不總是準確的，但 ChatGPT 確實擅長一件事：散文。寫出優美、結構合理、流暢的句子真是令人難以置信。結果很容易閱讀，聽起來真的很棒。但獲得準確的回應完全是另一回事。例如，人們厭倦了使用 ChatGPT 撰寫歷史文章，雖然文章可能讀起來不錯，但在歷史上可能並不准確。比如你讓ChatGPT“寫一篇關於中國的淪陷的2000字的文章”，它就會給你寫一篇關於中國的淪陷的2000字的文章。但它不一定是事實正確的。 ![ChatGPT 生物響應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jc4mphrlgsmfw3yobfo.png) _雖然某些內容可能讀起來不錯，但實際上可能不正確。提示：我沒有博士學位_ :wink: 這是因為 ChatGPT 從各種來源獲取訊息並將它們融合在一起。這些來源本身可能並不准確。 ChatGPT 也不知道您指的是中國的_哪個_秋天。因此它很容易錯誤地交叉引用日期。通過以對話方式向 ChatGPT 提供訊息，然後要求它寫一篇 2000 字的文章，您將獲得更好的結果。 那到底是什麼意思？有些人認為 ChatGPT 是一種單向的、對話式的、單一輸入的獲取訊息的方法。但事實並非如此。它被稱為“聊天”是有原因的。進行對話，完善您的問題，為您的回答提供背景訊息。 例如，如果我想要一段關於“NDC 會議”的旅行報告，我不會以“給我寫一段 NDC 旅行報告”來開始我的 ChatGPT。相反，我會首先弄清楚 ChatGPT 對 NDC 了解多少，並在此過程中提供上下文。您提供的輸入在很大程度上決定了輸出。這就是為什麼有些人能夠獲得非常好的結果，而其他人則不能。 ![ChatGPT 響應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eks1e166pqqu0jh9hpll.png) _沒有任何上下文，ChatGPT 不知道我指的是什麼 NDC_ 另一個例子：如果你要去參加工作面試，你想要一些提示，讓 ChatGPT“給我一些準備工作面試的提示”，會給你一些很好的回應，但它遠非具體。相反，諸如“我要去一家 AI 初創公司面試軟體開發人員的職位。你能給我一些準備面試的提示嗎？”將為您提供更加量身定制的個性化結果。這就好比你讓台上的專家給觀眾中的 1000 個人一個答案，他們可能會提供一些通用的東西，這樣每個人都有一個外賣訊息。但如果你一對一地問同一個人，他們可能會問你一些後續問題以了解你的情況，因此會提供更個性化、更具體的答案。 ## 藝術應用的提示工程 您可能已經看到一些人使用穩定的傳播應用程式創作的一些精美藝術品。然後是看起來“錯誤”的藝術品。其中很多都歸結為上下文。例如，如果我使用 [Night Café](https://nightcafe.studio/)（我最喜歡的生成器之一），然後輸入“dog”這個詞，這就是我得到的： ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61ibs1fd5j3ht37e4epn.jpg) _使用 Night Café 生成的圖像，以及提示符“dog”_ 有一些隨機的“狗”字寫成一個標誌，前景中有一隻看起來很奇怪的狗，而且它的顏色非常奇怪。現在，如果我想像成年德國牧羊犬在陽光明媚的日子裡在公園裡的照片般的圖像，那可能不是我要得到的。人工智能沒有那種背景。它無法讀懂我的想法（還沒有！）。當你想創作藝術品時，你需要描述你在腦海中想像的圖像。您提供的細節越多，輸出就越好。這就是它變得棘手的地方。許多穩定的擴散應用程式都有有限的字符數。因此，您需要對如何製作提示具有意義和戰略性。 與 ChatGPT 類似，您需要不斷地重新製作提示並完善它們。然而，基於聊天的 AI 的優勢在於，您可以繼續對話並不斷向 AI 提供更多訊息和不同的問題，以獲得良好的回應。雖然一些藝術生成器允許您“重新混合”您的輸出，但它仍然依賴於新的提示。因此，您一直在等待輸出，查看未加入的內容，然後發送經過調整的新提示。一些用戶在 Midjourney 上花費數小時，接收輸出並重新製作他們的提示以產生一些驚人的作品。這都是練習的問題。這就是為什麼一些創作者在 Etsy 上出售他們的提示！ ![AI生成戰鬥兔](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0411o5c2fgbz7oikzwz.jpg) _我的朋友 Jean 使用 Midjourney 製作的藝術品_ 有一件事是肯定的，如果你想製作一些高質量的藝術品，不要指望花幾秒鐘寫一個提示，點擊“建立”按鈕然後看到莫內。沒有！相反，您需要投入時間（和金錢）來創作數百件藝術品，在每次迭代中重新處理您的提示以製作您的傑作。 ## 提示工程程式碼 我不會花大量時間談論如何為 [GitHub Copilot](https://github.com/features/copilot) 之類的東西製作好的提示。我的同事 [Rizel](https://twitter.com/blackgirlbytes/) 寫了一篇精彩的博文，深入探討了 GitHub Copilot 的提示工程： https://dev.to/github/a-beginners-guide-to-prompt-engineering-with-github-copilot-3ibp 我要說的是——類似於 ChatGPT——GitHub Copilot 依賴於上下文。存儲庫中還編寫了哪些其他程式碼？文件的擴展名（以及語言）是什麼？ GitHub Copilot 還為您打造了什麼？您在程式碼中加入了哪些註釋？所有這些都將幫助 GitHub Copilot 為您合成更準確的程式碼。 可以這樣想：如果您寫了一條評論，說明您想要建立一個使用後端資料並解決特定問題的複雜函數，那麼您可能不會僅僅通過一條評論就得到很好的回應。就像你的程式碼——至少它應該是——被分解成許多函數，（希望）有很多有用的評論，當你分解東西時，GitHub Copilot 工作得更好。 而不是要求 GitHub Copilot： `//反轉句子`（使用 JavaScript） 想想如何從邏輯上分解問題。例如，如果有人給我一張紙，上面寫著一句話，讓我把它倒過來，我會怎麼做？像這樣寫評論會更有益。如果您這樣做，GitHub Copilot 將擁有更多的上下文並更好地理解您想要什麼。 與 ChatGPT 之類的東西相比，GitHub Copilot 的另一個區別是 GitHub Copilot 考慮了你擁有的_所有_上下文。我上面提到的所有事情： - 什麼是文件擴展名 - 專案中還有哪些其他文件 - 你是怎麼寫其他評論的 - 其他程式碼是如何建置的 - 您輸入的評論是什麼 - 您輸入的程式碼是什麼 ChatGPT 和其他聊天應用程式會更加重視您對聊天所做的最後評論； 也就是，您加入到對話中的最後一條訊息。但是，GitHub Copilot 始終會考慮上下文以生成更好的程式碼結果。 ## 更好的提示工程 歸根結底，從任何類型的生成式 AI 中獲得好的結果都在你身上——你提供輸入的人。正如我一開始所說：垃圾進，垃圾出。因此，在製作提示時請考慮以下重要提示： - 提供良好的**上下文**；提供有關您要實現的目標的示例和訊息 - 請明確點**;如果它是針對特定觀眾的，那麼就說 - **分解**問題 - **清楚**你如何提問。如果返回的內容聽起來不對，請澄清 - 根據您的提示**改寫**和**精煉** 最後，始終，始終驗證您從 AI 收到的訊息。對於藝術品生成器而言，這不太重要，但如果您查看程式碼和訊息，它就很重要。檢查您收到的程式碼是否按照您的預期工作。驗證提供給您的書面訊息的準確性。 請記住，無論發生什麼，您仍然是飛行員。您仍然是負責人，您對使用和共享哪些藝術作品、哪些程式碼片段以及哪些訊息有最終決定權。

0個讚   0留言 521瀏覽

Git 分支問題

我創了一個Github page，專案裡有兩個分支，我想要這兩個分支都能在Github Page上瀏覽網頁，但對於git版控都還是不熟悉，網上也沒找到相關的範例(有可能都用中文)，跑去問GPT也說的不清楚，比較需要圖文並茂的方式Q。 現在的問題是只能顯示其中一個分支，另一個分支要如何也可以瀏覽出來? 或是能提示給我個關鍵字之類的QQ 謝謝! 專案:https://github.com/pchun2330/Project 網頁:https://pchun2330.github.io/Project

1個讚   5留言 332瀏覽

給軟體工程師：50 個好用的 ChatGPT 咒語指令

下列 ChatGPT-4 咒語，對開發者很有幫助。附上原文與中文指令，供您參考。 原文出處：https://dev.to/hackertab_org/50-chat-gpt-prompts-every-software-developer-should-know-tested-9al ### **程式碼生成** - Generate a boilerplate `[language]` code for a `[class/module/component]` named [name] with the following functionality: `[functionality description].` - 為名為 [name] 的 `[class/module/component]` 生成樣板 `[language]` 程式碼，具有以下功能：`[functionality description]。 - Create a [language] function to perform `[operation]` on `[data structure]` with the following inputs: [input variables] and expected output: `[output description]`. - 建立一個 [語言] 函數以使用以下輸入對 `[資料結構]` 執行 `[操作]`：[輸入變數] 和預期輸出：`[輸出描述]`。 - Generate a `[language]` class for a `[domain]` application that includes methods for `[methods list]` and properties `[properties list]`. - 為包含“[方法列表]”的方法和屬性“[屬性列表]”的“[域]”應用程式生成一個“[語言]”類。 - Based on the [design pattern], create a code snippet in [language] that demonstrates its implementation for a [use case]. - 基於[設計模式]，用[語言]建立一個程式碼片段，演示其對[用例]的實現。 **例子：** ``` Generate a boilerplate Python code for a shopping cart module named "ShoppingCart" with the following functionality: - A constructor that initializes an empty list to store cart items. - A method called "add_item" that takes in an item object and adds it to the cart. - A method called "remove_item" that takes in an item object and removes it from the cart if it exists. - A method called "get_items" that returns the list of items in the cart. - A method called "get_total" that calculates and returns the total price of all items in the cart. ``` ### **程式碼完成** - In `[language]`, complete the following code snippet that initializes a [data structure] with `[values]`: `[code snippet]`. - 在“[語言]”中，完成以下使用“[值]”初始化[資料結構]的程式碼片段：“[程式碼片段]”。 - Finish the `[language]` function that calculates [desired output] given the following input parameters: `[function signature]`. - 在給定以下輸入參數的情況下完成計算[期望輸出]的[語言]函數：[函數簽名]。 - Complete the `[language]` code to make an API call to `[API endpoint]` with [parameters] and process the response: `[code snippet]`. - 完成“[語言]”程式碼以使用[參數]對“[API 端點]”進行 API 呼叫並處理響應：“[程式碼片段]”。 **Example** : Finish the Python function that calculates the average of a list of numbers given the following input parameters: **示例**：完成計算給定以下輸入參數的數字列表的平均值的 Python 函數： ``` def calculate_average(num_list) ``` ### **錯誤檢測** - Identify any potential bugs in the following [language] code snippet: `[code snippet]`. - 確定以下 [語言] 程式碼片段中的任何潛在錯誤：`[程式碼片段]`。 - Analyze the given [language] code and suggest improvements to prevent [error type]: `[code snippet]`. - 分析給定的[語言]程式碼並提出改進建議以防止[錯誤類型]：`[程式碼片段]`。 - Find any memory leaks in the following [language] code and suggest fixes: `[code snippet]`. - 在以下 [語言] 程式碼中查找任何內存洩漏並提出修復建議：`[程式碼片段]`。 **Example** : Identify any potential bugs in the following Python code snippet: **示例**：辨識以下 Python 程式碼片段中的任何潛在錯誤： ``` def calculate_sum(num_list): sum = 0 for i in range(len(num_list)): sum += num_list[i] return sum ``` ### **程式碼審查** - Review the following `[language]` code for best practices and suggest improvements: `[code snippet]`. - 查看以下“[語言]”程式碼以獲得最佳實踐並提出改進建議：“[程式碼片段]”。 - Analyze the given `[language]` code for adherence to `[coding style guidelines]`: `[code snippet]`. - 分析給定的“[語言]”程式碼是否符合“[編碼風格指南]”：“[程式碼片段]”。 - Check the following [language] code for proper error handling and suggest enhancements: `[code snippet]`. - 檢查以下 [語言] 程式碼以正確處理錯誤並提出改進建議：`[程式碼片段]`。 - Evaluate the modularity and maintainability of the given `[language]` code: `[code snippet]`. - 評估給定“[語言]”程式碼的模塊化和可維護性：“[程式碼片段]”。 **Example** : Review the following Python code for best practices and suggest improvements: **示例**：查看以下 Python 程式碼以獲得最佳實踐並提出改進建議： ``` def multiply_list(lst): result = 1 for num in lst: result *= num return result ``` ### **API 文件生成** - Generate API documentation for the following `[language]` code: `[code snippet]`. - 為以下“[語言]”程式碼生成 API 文件：“[程式碼片段]”。 - Create a concise API reference for the given `[language]` class: `[code snippet]`. - 為給定的“[語言]”類建立簡明的 API 參考：“[程式碼片段]”。 - Generate usage examples for the following `[language]` API: `[code snippet]`. - 為以下“[語言]”API 生成用法示例：“[程式碼片段]”。 **Example** : Generate API documentation for the following JavaScript code: **示例**：為以下 JavaScript 程式碼生成 API 文件： ``` /** * Returns the sum of two numbers. * @param {number} a - The first number to add. * @param {number} b - The second number to add. * @returns {number} The sum of a and b. */ function sum(a, b) { return a + b; } ``` ### **查詢優化** - Optimize the following SQL query for better performance: `[SQL query]`. - 優化以下 SQL 查詢以獲得更好的性能：`[SQL 查詢]`。 - Analyze the given SQL query for any potential bottlenecks: `[SQL query]`. - 分析給定的 SQL 查詢是否存在任何潛在瓶頸：`[SQL 查詢]`。 - Suggest indexing strategies for the following SQL query: `[SQL query]`. - 為以下 SQL 查詢建議索引策略：`[SQL 查詢]`。 - Optimize the following NoSQL query for better performance and resource usage: `[NoSQL query]`. - 優化以下 NoSQL 查詢以獲得更好的性能和資源使用：`[NoSQL 查詢]`。 **Example** : Optimize the following SQL query for better performance: **示例**：優化以下 SQL 查詢以獲得更好的性能： ``` SELECT * FROM orders WHERE order_date BETWEEN '2022-01-01' AND '2022-12-31' ORDER BY order_date DESC LIMIT 100; ``` ### **用戶界面設計** - Generate a UI mockup for a `[web/mobile]` application that focuses on [`user goal or task]`. - 為專注於 [`用戶目標或任務]` 的`[web/mobile]` 應用程式生成 UI 模型。 - Suggest improvements to the existing user interface of `[app or website]` to enhance `[usability, accessibility, or aesthetics]`. - 建議改進“[應用程式或網站]”的現有用戶界面，以增強“[可用性、可存取性或美學]”。 - Design a responsive user interface for a `[web/mobile]` app that adapts to different screen sizes and orientations. - 為適應不同螢幕尺寸和方向的“[web/mobile]”應用程式設計響應式用戶界面。 **Example** : Generate a UI mockup for a mobile application that focuses on managing personal finances. **示例**：為專注於管理個人財務的移動應用程式生成 UI 模型。 ### **自動化測試** - Generate test cases for the following [language] function based on the input parameters and expected output: `[function signature]`. - 根據輸入參數和預期輸出為以下 [語言] 函數生成測試用例：`[函數簽名]`。 - Create a test script for the given [language] code that covers [unit/integration/system] testing: `[code snippet]`. - 為涵蓋[單元/集成/系統]測試的給定[語言]程式碼建立測試腳本：`[程式碼片段]`。 - Generate test data for the following [language] function that tests various edge cases: `[function signature]`. - 為以下測試各種邊緣情況的[語言]函數生成測試資料：`[函數簽名]`。 - Design a testing strategy for a [web/mobile] app that includes [unit, integration, system, and/or performance] testing. - 為 [網絡/移動] 應用程式設計測試策略，包括 [單元、集成、系統和/或性能] 測試。 **Example:** Generate test cases for the following Python function based on the input parameters and expected output: **示例：** 根據輸入參數和預期輸出為以下 Python 函數生成測試用例： ``` def divide(a: float, b: float) -> float: if b == 0: raise ZeroDivisionError('division by zero') return a / b ``` ### **程式碼重構** - Suggest refactoring improvements for the following [language] code to enhance readability and maintainability: `[code snippet]`. - 建議對以下 [語言] 程式碼進行重構改進，以增強可讀性和可維護性：`[程式碼片段]`。 - Identify opportunities to apply [design pattern] in the given [language] code: `[code snippet]`. - 確定在給定的[語言]程式碼中應用[設計模式]的機會：`[程式碼片段]`。 - Optimize the following [language] code for better performance: `[code snippet]`. - 優化以下 [語言] 程式碼以獲得更好的性能：`[程式碼片段]`。 **Example** : Optimize the following Python code for better performance: **示例**：優化以下 Python 程式碼以獲得更好的性能： ``` def find_max(numbers): max_num = numbers[0] for num in numbers: if num > max_num: max_num = num return max_num ``` ### **設計模式建議** - Based on the given [language] code, recommend a suitable design pattern to improve its structure: `[code snippet]`. - 根據給定的[語言]程式碼，推薦合適的設計模式來改進其結構：`[程式碼片段]`。 - Identify opportunities to apply the [design pattern] in the following [language] codebase: `[repository URL or codebase description]`. - 確定在以下 [語言] 程式碼庫中應用 [設計模式] 的機會：`[存儲庫 URL 或程式碼庫描述]`。 - Suggest an alternative design pattern for the given [language] code that may provide additional benefits: `[code snippet]`. - 為可能提供額外好處的給定 [語言] 程式碼建議替代設計模式：`[程式碼片段]`。 **Example:** Based on the given Python code, recommend a suitable design pattern to improve its structure: **例子：** 根據給定的Python程式碼，推薦合適的設計模式來改進其結構： ``` class TotalPriceCalculator: def calculate_total(self, items): pass class NormalTotalPriceCalculator(TotalPriceCalculator): def calculate_total(self, items): total = 0 for item in items: total += item.price * item.quantity return total class DiscountedTotalPriceCalculator(TotalPriceCalculator): def calculate_total(self, items): total = 0 for item in items: total += item.price * item.quantity * 0.9 # apply 10% discount return total class Order: def __init__ (self, items, total_price_calculator): self.items = items self.total_price_calculator = total_price_calculator def calculate_total(self): return self.total_price_calculator.calculate_total(self.items) class Item: def __init__ (self, name, price, quantity): self.name = name self.price = price self.quantity = quantity ``` ### **算法開發** - Suggest an optimal algorithm to solve the following problem: `[problem description]`. - 建議解決以下問題的最佳算法：`[問題描述]`。 - Improve the efficiency of the given algorithm for `[specific use case]`: `[algorithm or pseudocode]`. - 為“[特定用例]”提高給定算法的效率：“[算法或偽程式碼]”。 - Design an algorithm that can handle `[large-scale data or high-throughput]` for `[specific task or operation]`. - 為“[特定任務或操作]”設計一種可以處理“[大規模資料或高吞吐量]”的算法。 - Propose a parallel or distributed version of the following algorithm to improve performance: `[algorithm or pseudocode]`. - 提出以下算法的並行或分佈式版本以提高性能：`[算法或偽程式碼]`。 ### **程式碼翻譯** - Translate the following `[source language]` code to `[target language]`: `[code snippet]`. - 將以下“[源語言]”程式碼翻譯成“[目標語言]”：“[程式碼片段]”。 - Convert the given `[source language]` class or module to `[target language]` while preserving its functionality and structure: `[code snippet]`. - 將給定的“[源語言]”類或模塊轉換為“[目標語言]”，同時保留其功能和結構：“[程式碼片段]”。 - Migrate the following `[source language]` code that uses `[library or framework]` to [target language] with a similar library or framework: `[code snippet]`. - 將以下使用“[庫或框架]”的“[源語言]”程式碼遷移到具有類似庫或框架的“目標語言”：“[程式碼片段]”。 **Example:** Translate the following Python code to JavaScript: **示例：**將以下 Python 程式碼轉換為 JavaScript： ``` def factorial(n): if n == 0: return 1 else: return n * factorial(n-1) ``` ### **個性化學習** - Curate a list of resources to learn `[programming language or technology]` based on my current skill level: `[beginner/intermediate/advanced]`. - 根據我目前的技能水平，策劃學習`[編程語言或技術]`的資源列表：`[初學者/中級/高級]`。 - Recommend a learning path to become proficient in `[specific programming domain or technology]` considering my background in `[existing skills or experience]`. - 考慮到我在“[現有技能或經驗]”方面的背景，推薦精通“[特定編程領域或技術]”的學習路徑。 - Suggest project ideas or coding exercises to practice and improve my skills in `[programming language or technology]`. - 建議專案想法或編碼練習，以練習和提高我在“[編程語言或技術]”方面的技能。 ### **程式碼可視化** - Generate a UML diagram for the following `[language]` code: `[code snippet]`. - 為以下“[語言]”程式碼生成一個 UML 圖：“[程式碼片段]”。 - Create a flowchart or visual representation of the given `[language]` algorithm: `[algorithm or pseudocode]`. - 建立給定“[語言]”算法的流程圖或可視化表示：“[算法或偽程式碼]”。 - Visualize the call graph or dependencies of the following `[language]` code: `[code snippet]`. - 可視化以下“[語言]”程式碼的呼叫圖或依賴關係：“[程式碼片段]”。 **Example** : Generate a UML diagram for the following Java code: **示例**：為以下 Java 程式碼生成 UML 圖： ``` public abstract class Vehicle { private String model; public Vehicle(String model) { this.model = model; } public String getModel() { return model; } public abstract void start(); public abstract void stop(); } public class Car extends Vehicle { public Car(String model) { super(model); } @Override public void start() { System.out.println("Starting car engine"); } @Override public void stop() { System.out.println("Stopping car engine"); } } public class Motorcycle extends Vehicle { public Motorcycle(String model) { super(model); } @Override public void start() { System.out.println("Starting motorcycle engine"); } @Override public void stop() { System.out.println("Stopping motorcycle engine"); } } ``` ### **資料可視化** - Generate a bar chart that represents the following data: `[data or dataset description]`. - 生成代表以下資料的條形圖：`[資料或資料集描述]`。 - Create a line chart that visualizes the trend in the following time series data: `[data or dataset description]`. - 建立一個折線圖，將以下時間序列資料的趨勢可視化：`[資料或資料集描述]`。 - Design a heatmap that represents the correlation between the following variables: `[variable list]`. - 設計一個表示以下變數之間相關性的熱圖：`[變數列表]`。 --- 以上，簡單分享，希望對您有幫助！

0個讚   0留言 1,308瀏覽

給新手工程師的建議：每天工作都在查 ChatGPT 會不會很糟？

給新手工程師的建議：每天工作都在查 ChatGPT 會不會很糟？ 看到滿多年輕工程師提問：工作時經常查 ChatGPT，感覺不太踏實，沒關係嗎？ 讓我簡單談論一下這件事 --- 首先，讓我們把時間倒回 2000 年代 google 剛出來的時候 當時一定也是這樣，年輕工程師遇到問題狂查 google 資深工程師則覺得 google 可有可無，真的有問題，桌上的工具書大概要翻到第幾頁他也都知道，翻一下不用 10 秒就有答案 時間快轉到今天，年輕工程師遇到問題狂問 ChatGPT 資深工程師則覺得 ChatGPT 可有可無，真的有問題，google 關鍵字怎麼組合、stackoverflow or reddit or 某某技術論壇，找一下不用 10 秒就有答案 --- 新科技的出現，讓一些「死背類型」的任務變得「毫無意義」 比方說現在沒人會去背歷史事件的年份了，因為要用時 google 一下就有 同理，現在的工程師，所用程式語言的某些語法、函式名稱、API 用法，沒背起來，根本沒關係 （不信的話，問問看用 Linux 的工程師，怎麼解壓縮檔案，看看有幾個人可以不查 google 打出指令） ``` tar -xzvf 壓縮檔名稱.tar.gz ``` 所以 AI 的出現，如果讓很多以往工程師視為 knowhow、design pattern、convention 的東西，降格為「死背類型」 那麼這些東西當然不用靠肌肉記憶去記住了，每次遇到就去問 AI 即可 --- 我認為工程師這行業的重點在於，你知道「某些問題在技術上可不可能被解決」、「解決方案的大方向是什麼」、「不同解決方案的成本跟考量分別是什麼」 如果你都知道大方向，但是細節語法常常忘記，那習慣性問 AI 當然沒問題 但如果每次查完，你都是把一大堆你自己根本不知道在幹嘛的程式碼複製貼上，那就很有問題 簡單講，這些新科技「可以減少打字的時間、減少查詢的時間、減少翻閱的時間」 但是「無法減少你學習的時間」 # 結論 所以，用 ChatGPT 沒問題，但是你要知道自己拿到的程式碼，到底實際上在做什麼 這樣用了之後，出問題才能除錯、必要時才能擴充、才能加功能 以上，簡單分享，大家有什麼問題，可以多多提問，我盡量回答

5個讚   0留言 472瀏覽

未來 ChatGPT 會取代軟體工程師嗎？你完全不需要擔心這個

最近看到滿多年輕學生、考慮轉職者提問：未來 ChatGPT 會取代軟體工程師嗎？ 看來這個議題已經造成不少 IT 領域學生的焦慮，我非常驚訝，讓我簡單談論一下這件事 # 個人經驗回顧 我在畢業前全心學習 web 前端與後端開發，2012 年畢業時，正逢智慧型手機快速發展，所有公司都在思考如何開發手機 app 來創造新機會，當時媒體的主要論述是：「web 已死！web 工程師都將失業，未來是 mobile app 的世界！」 當時年輕的我，看到這些媒體這樣分析，也是有點焦慮，但同時又有點不服氣，所以依然 100% 心思在研究 web 開發，不管媒體怎麼看衰。現在，10 年過去了，請問 web 職缺消失了嗎？ # 媒體的習慣、網紅 YTer 的習慣 想像你住在一個非常小的島嶼國家上，往外走一下就看到海，國家全年365天基本沒什麼大事，每天就是太陽升起、太陽落下。如果你是島上的「新聞從業人員」，請問你每天能做什麼？你當然只能誇大你看到的每件事情。 看到海水漲潮，發新聞：「海水異常上漲！恐有釀禍危機！全國一半人口恐有水災、死亡風險！」 看到海水退潮，發新聞：「近三年最低點！海水不斷消退、國家水資源流失、重大警訊！我國恐成大型沙漠！」 世界上大多數事情本就「帶有波動性」，一下狀況好一下狀況壞，潮起又潮落，正如月有陰晴圓缺，這相當正常。 媒體、網紅，基本上需要吸引人們關注來過活，他總不能每天發新聞：「今天海水正常漲潮，沒什麼特別的。」、「今天海水退潮了，這很自然，不太重要。」 身為現代公民，你要有能力透過媒體吸收新知，但同時也要有能力保持冷靜、自行判斷，不要隨意被影響。你要能看出各種觀點背後相關的利益。 # AI 對職缺的影響 AI 當然對各行各業會有重大衝擊，但是目前也僅止於改善工作效率、優化流程而已。 AI 因為可以加強專業人員的生產力，所以會造成職缺變少一點，但要到「軟體工程師通通失業」、「就靠機器人寫完所有程式」這種程度，實在太誇大了 最後，程式設計已經是各種工作領域之中，最難被機器取代的職缺之一，如果真的被高階人工智能取代，那社會上已經沒有多少工作適合人做，大概會是「無條件基本收入」制度之類的社會 --- # 結論 太廢的技能、感覺問 google 或問 ChatGPT 就有的東西，可以不用學了，像死背課文一樣的任務再也不用做了 除此之外，該學什麼學什麼，不用想太多 上個時代，懂得善用 google 與網際網路的專業人士 vs 不懂得善用的專業人士，生產力有巨大差別 下個時代，懂得善用 AI 的專業人士 vs 不懂得善用的專業人士，生產力有巨大差別 除此之外，跟案主溝通、釐清功能規格、分析各種技術選擇、認識領域知識並設計軟體，是極度複雜的工作，你真的覺得一個機器人放在面前聊天幾分鐘，它就能通通做完給你？ --- 以上，簡單看法分享

2個讚   2留言 663瀏覽

神奇的聊天機器人

https://chat.openai.com/chat 昨天認識了這個ChatGPT 還可以教程式語言 真的太神奇了，大家可以試試 ![](https://i.imgur.com/kMiiZ6d.jpg)

2個讚   6留言 632瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 初級到資深 Web 開發人員：技能樹說明
🔥 開發 React 時，推薦使用這些 Best Practices
🔥 53 個專案創意（從初級到高級）
🔥 用於建立 AI/ML 應用程式的最佳開發工具！
🔥 為開源做出貢獻將使您獲得新工作的機會增加 10 倍 🚀
  近期留言
熱門搜尋： email COM 學習 工作 1 使用 c C 研 題 . node.js with 房 2 開發 前 ＣＳＳ 4 作為 第一 專案 ci 10 JS % vs 20 go 作業 github id 前端 網站 git ui Ai 50 技術 分享 html AI 測試 研究 api 語言 java 結構 資料庫 ` 工程師 app jav COMPO 系列 vue javascript 搜尋 後端 Java react HTML 架構 user React Line 非同步 Can cn CSS 練習 this 聊天 謝謝 CD 遊戲 rest prisma 新創 for 作業分享 create .NET js 網頁 PHP Github 分離 Node promise 資料結構 GIT 主題 PYTHON ruby part ") console JAVA 套件
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。