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

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

🔍 搜尋結果：學習

🔍 搜尋結果：學習

初級開發人員需要掌握的 12 個資深開發人員特質 🔥

在任何領域，無論是藝術、體育還是軟體開發，達到頂峰的最快方法就是研究那些已經處於頂峰的人……並做他們正在做而你沒有做的事情。 如果您以編寫程式碼為生，這意味著要考慮一下高級開發人員。這意味著確定他們擁有哪些你不具備的技能、習慣和特質。 在過去 3 年裡與全球頂尖軟體工程師一起工作了數千個小時之後，我發現您現在就可以實施 12 種高級開發人員特質，以快速將您的成長提升到一個新的水平。 讓我們從第一開始… ## 1. 專注 專注意味著對某些事情說不，這樣我們就可以做其他事情。 理想情況下，對不重要的事情說不。並對那些能帶來改變的事情說「是」。使船移動得更快的東西。 這對許多開發人員來說確實很難，因為它違背了我們的本能。這意味著接受你無法完成所有事情。並不是每個機會都是平等的。 你不可能學習所有新的框架。您無法閱讀所有時事通訊。您不可能參加所有會議。而你不必這樣做。 你的時間有限。你的能量也是如此。 成為高級開發人員意味著選擇你的戰鬥。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wftnt9w68gjflh2yghs0.png) > 「人們認為專注意味著對你必須關注的事情說『是』。但這根本不是這個意思。這意味著對其他一百個好主意說不。” ——史蒂夫‧賈伯斯 有趣的是，你選擇的越好，你進步的速度就越快。高級開發人員每天都有 24 小時的時間。但他們做得更多。 如何？ 透過少做事。 當新事物出現時，問問自己“這真的很重要嗎？”或者這只是另一個趨勢？很可能這只是另一個偽裝成機會的干擾。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgqenoavc69esm48yf06.png) 高級開發人員說的「不」多於「是」。他們完成的專案比開始的專案還要多。他們在學習新框架之前先掌握已經使用的框架。如果你想更快進入高級，你需要培養的第一個特質就是專注。 ## 2. 二階思維 讓「初級開發者」尖叫的一件事是「讓我們建造它，我們會找到結果」的態度。年輕人傾向於先編碼，後思考。 如果您剛開始，這可能是一個很好的態度，但是當您開發可用於生產的軟體時，您將無法更改一些技術決策。或者很容易改變。 例如，您選擇Vue作為前端框架。 然後，需求會改變。你開始認為 React 會是更好的選擇。當然，你可以切換到 React。但這既不容易，也不便宜。 資深開發人員知道，靠自己的供應很容易獲得快感。但是，如果您愛上了您最了解的框架和函式庫，您將開始做出糟糕的技術決策。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9eb6xwgv7jhmn4p7qcq1.png) 他們會三思而後行，考慮自己選擇的後果。這可能意味著在嘗試理解問題時詢問「五個為什麼」。 或考慮他們的解決方案可能存在的缺點。 例如，現在我們新增了 Redux，全域狀態可能更容易管理。但我們必須在 Redux 上招募新的開發人員。學習曲線很高。 而且，你猜怎麼著，我們的 JavaScript 套件會變得更大，這對效能不利。 考慮二階環境將使您成為更好的開發人員。它還將在技術面試中為您提供幫助。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 3.實用主義 當初級開發人員閱讀一本關於最佳實踐的書時，他們會跳起來並嘗試將它們應用到任何版本中的每一行程式碼。他們虔誠地追隨他們。 如果您無法自己做出技術決策，那麼遵守預先定義的規則會容易得多。但軟體開發不是一種宗教。 一個很好的例子是測試。 當初級開發人員閱讀 TDD（測試驅動開發）時，他們將開始嘗試測試所有內容。旨在實現完整的程式碼覆蓋率。事實上，完整的程式碼覆蓋率會帶來遞減的結果，並且最終會浪費時間。 ![每個發現 TDD 的初級開發人員](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do0uxbjna2alz58b3mvg.png) 高級開發人員知道如何平衡最佳實踐和上市時間。何時走捷徑，何時不走捷徑。 快速破解會產生錯誤和技術債。當程式碼上下文發生變化時，始終遵守規則會導致錯誤的決策。 你需要一個平衡。 根據情況重新考慮您的技術選擇。 ## 4. 沒有什麼好證明的 由於缺乏自信，初級開發人員發現自己不斷地試圖向他人證明自己。與對自己的價值和技能缺乏安全感的高級開發人員一樣。 他們的信心是建立在他人的認可之上。 這是一場失敗的遊戲。 他們會嘗試在某個技術討論、與他人交談或在深夜或週末推送程式碼時展示自己了解多少。 事實上，所有這些行為都會造成有毒的團隊環境並適得其反。在最好的情況下，他們會讓你看起來比實際情況更高級。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sfp7p24zru1r9zafd05.png) 獵豹不需要在比賽中證明自己，它只是為了狩獵而奔跑。 有兩種方法可以解決這個問題。 第一個是停止在外部驗證上花費太多。因為事實是你不需要向任何人證明自己。只對你自己。 第二是與頭腦中的負面聲音和平相處。 你可以成為你最嚴厲的批評者。完美主義、對失敗的恐懼以及對「真正的」開發人員的錯誤認知正在摧毀你的自尊。這就是為什麼無論你多努力，你總是感覺功虧一簣。 是時候擺脫你的頭腦了。 專注於掌握你的手藝，剩下的就會水到渠成。您將立即對自己和自己的技能更加自信。你將不再試圖向陌生人證明自己。 ## 5. 掌握基礎知識 每當我在 LinkedIn 上看到開發人員的個人資料，並且他們將自己描述為「React」開發人員或「Angular」開發人員時，我就知道他們不是高級開發人員。他們可能是該框架中的高級人員，但總體而言不是高級人員。 框架開發人員永遠不會成為高級開發人員。 框架不會讓你成為高級，因為框架只是錦上添花。不是蛋糕本身。冰山一角與其底部。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chomoxfdvoemx4m4n15o.png) 我甚至推測，目前軟體開發人員中冒充者症候群盛行的背後，甚至是高階開發人員的背後，並不是缺乏天賦，也不是缺乏努力。 這是基本面薄弱。 這也是為什麼除錯或效能優化等主題對於大多數開發人員來說是一個猜謎遊戲。他們不習慣深入挖掘他們正在使用的庫和工具的表面。 要成為高級開發人員，您不僅必須了解事物背後的“什麼”，還必須了解事物背後的“原因”。 例如，高級開發人員不僅能夠建立 React 應用程式。但他們也會理解為什麼 React 是以某種方式建構的。以及它如何與編寫的語言（JavaScript/TypeScript）和執行的平台（Web 瀏覽器）融合。 好訊息是，一旦你掌握了基本原理，一切的水平都會上升。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 6. 端對端交付 公司避開初級開發人員的第一大原因是他們需要大量外部協助才能完成工作。外部幫助意味著您將打擾高級開發人員來完成您的工作。 初級開發人員被認為“昂貴”，因為他們無法獨立交付。 相反，高級開發人員可以提供端到端的服務。給他們一堆要求，他們會解決剩下的問題。這並不意味著他們是獨狼，而且他們通常非常擅長團隊合作。 這並不意味著高級開發人員快速破解事物只是為了推動它們前進。 那不是「真正的」前輩。 這並不意味著他們深入了解軟體開發生命週期的每個部分。 但是，高級開發人員了解整個軟體開發生命週期的所有主要部分。並且可以為其中的每一個（前端、後端、部署）做出貢獻。 如果您是想要升級的初級/中級開發人員，那麼端對端交付是您需要關注的特徵。 ## 7. 心智模型 高級開發人員與初級開發人員的主要區別之一是他們可以處理的複雜性。 老年人可以理解更複雜的程式碼庫和需求。 他們可以理解二階環境。程式碼庫的變化將如何影響效能、成本甚至團隊。 他們這樣做並不是因為他們記住了每個實作細節。這是不可能的，因為人類的記憶非常有限。 他們這樣做是因為他們將程式碼的複雜度抽象化為心理模型。這些都是表示現實的簡單方法。 開發人員如何建構高品質的心理模型？ 透過查看框架和庫的背後並學習它們背後的設計模式。根據您的技術堆棧，存在著許多噪音。諸如 SOLID 原則或 MVC 之類的東西... 但我認為最好的開始方法是選擇您正在使用的任何框架並嘗試超越程式碼。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk2opgm1njc76p0a6k0n.png) 開始問自己，為什麼框架的建立者要這樣建構它？它是建立在新概念的基礎上還是只是古老原則的實現（通常是這種情況）？ 透過回答這些問題，您將建立軟體開發的思維模型，並能夠處理更多的複雜性。這是快速成長為高級開發人員的最有效方法之一。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 8. 資深開發人員控制故事 高階開發人員可以做得非常好的一件事是領導技術討論並影響周圍的其他人。無論是業務利害關係人、產品經理或其他開發人員，資深開發人員都知道如何引導他們朝著正確的方向發展。 他們結合自信、技術專長和溝通技巧來做到這一點。 高級開發人員也能夠設定嚴格的界限。 他們可以不同意而不會情緒激動。他們可以在會議期間為自己（和他人）挺身而出。他們積極協商薪資。 他們講述自己的故事。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pd8vutmtz3wbxas13ey1.png) 高級開發人員知道如何以及何時在沙子上劃線並說“夠了”。 如果另一個開發人員在程式碼審查期間開始指責其他人，老年人知道如何阻止他們。如果高階主管試圖介入開發人員的工作並進行微觀管理，高階管理層知道如何在不破壞關係的情況下阻止他們。 沒有關於如何變得更加自信的開發人員的分步指南。 這需要重複和練習。第一步是停止一直說「是」。並開始嘗試在薪資談判中取得進展。 ## 9. 長期思考 初級開發人員考慮“現在”。他們的想法是短期的。當他們走捷徑時，他們的程式碼也是如此。初級開發人員會擴展一段程式碼，而不考慮正確重構它，或乾脆忽略測試和效能。 但青年人也會對自己的職業生涯進行短期思考。 這可能意味著跳槽過多或自毀前程。這可能意味著忽視。 就像不提高你的技能或推銷自己的方式一樣，因為現在你的工作很穩定。只是被解僱六個月後才後悔。 成為更高級的開發人員的一部分是開始進行長期思考。 第一個方法是改變你的心態。大多數初級開發人員的短期思維不是由懶惰引起的，而是由自我懷疑引起的。 他們內心深處仍在思考成為開發人員是否適合他們。或者他們是否選擇了正確的職業。 這些疑慮阻止他們做出長期承諾。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sw1r4ng1hoyigg3e0z6v.png) 好事需要時間，資深開發人員知道這一點並相應地調整他們的想法。 現在，隨著人工智慧威脅到軟體開發的終結，這種短期思維比以往任何時候都更加頻繁。如果某件事很快就會消失，為什麼還要承諾呢？ 相信我，只有當我完全致力於我作為開發人員的職業生涯時，事情才開始起飛。 我說：「就是這樣」。 我不再向外張望。我告訴自己：這是我現在的工作，也是我未來十年的工作，所以讓我把它做好吧。 我開始投資我的技能，因為現在我知道它們會得到回報。 即使你未來 20 年不打算寫程式碼，擁有長遠的心態也會為你帶來巨大的好處。高級開發人員之所以能夠達到高級水平，是因為他們致力於自己的技術。如果您渴望實現這一目標，您也應該這樣做。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 10.卓越是一種習慣 我想正是 Kent Beck 說過那句名言：「我不是一個偉大的程式設計師，只是一個有著好習慣的好程式設計師」。習慣很重要，因為它們經得起時間的考驗。 因為您擁有的任何關於 JavaScript 框架的知識遲早都會過時。技術變革。但你的習慣將永遠伴隨你。 好訊息是人類是習慣的動物。 在我們的大腦中設定新的慣例並不容易。 但一旦我們將它們內化為習慣，我們就很容易堅持下去。利用這一點的最佳方法是實現您的任何目標並將其分解為日常行動。然後透過重複將這些行為變成習慣。 例如，如果您想更好地進行測試，請每天編寫一個單元測試。 如果您想在日常會議中做好更多準備並清晰思考，請寫日記。如果你想找到一份新的開發人員工作，並且你必須發送 100 份申請，那麼每天發送 10 份申請。 養成新的習慣，你向高級水準的進步將持續且穩定。 ## 11. 保護您最重要的資產 身為高階開發人員意味著不僅要長遠考慮您的程式碼和技術決策，還要考慮您的健康。 因為健康就是財富。 我在影片中一次又一次地談論這一點。 開發人員的工作需要久坐。您一天的大部分時間都坐在電腦前的椅子上。這對你的健康非常不利。 然後，辦公室裡到處都是垃圾食品，像是薯條、汽水和糖果。這意味著除非您有意識地努力，否則您將很難保持健康和體形。 但如果你想擁有一個長期而富有成效的軟體編寫職業，並且不想最終出現背部問題、糖尿病，甚至更糟糕的情況，那麼你需要開始照顧自己的健康。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsdohne0ydvireyloigf.png) 欲得金蛋，勿殺鵝。如果你想提高工作效率，首先要照顧好自己。 這並不意味著您必須開始每週去健身房 5 次。 或進行一些瘋狂的節食。但每周至少2至3次運動。您可以去健身房、跑步或參加團隊運動。現在我正在做 在飲食方面，減少糖和精緻碳水化合物的攝取。肉也不要過量。 也要考慮您的心理健康。 忽略諸如「吃飯、睡覺、編碼、重複」之類的建議，在工作之外建立自己的生活。 開始一個新的嗜好。聯繫朋友。休息一下。 從短期來看，你的進步可能會慢一些。但從長遠來看，你將能夠在遊戲中停留更長時間。 🚨 PS您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員？ [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/3GJuOjr) 🚨 ## 12. 閉合圓圈 最後，資深開發人員了解業力是如何運作的。他們知道，無論他們多麼努力，或者多麼聰明，在他們走向頂峰的道路上，都有數十個人的幫助。 這並沒有剝奪他們的優點，但也承認其他人。 所以他們關閉了這個圈子。 他們幫助其他開發人員。他們這樣做是沒有期望的。 不是因為它可能會讓你升職。或是地位，或是仰慕。他們這樣做是因為這是正確的事。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urp75psyn2lz8oah3cq7.png) 甚至科比·布萊恩也抽出時間來指導年幼的孩子並讓他們進入籃球領域。您也可以抽出時間來幫助新開發人員。 幫助剛起步的人會帶給你部分火花。初學者第一次看到事物時所感受到的熱情和好奇心是如此具有感染力。 另一件你可以變成日常習慣的事情！ 好的，就是這樣。具備這 12 個特徵，您將快速成長到高級甚至更高級別。 --- 原文出處：https://dev.to/dragosnedelcu/12-senior-developer-traits-junior-developers-need-to-master-285m

0個讚   0留言 169瀏覽

2024 年您必須嘗試的 25 個 Web 開發專案

毫無疑問，掌握 Web 開發最有效的方法之一就是透過實作。雖然學習理論概念很重要，但將您的知識應用到現實世界的專案中才能真正鞏固您的技能。無論您是想要打下堅實基礎的初學者，還是尋求新挑戰的經驗豐富的開發人員，這裡有 25 個 Web 開發專案可以提高您的能力。 ### 學生成績管理系統 學生成績管理系統旨在為學生和大學提供一種快速且用戶友好的方式來存取和管理考試成績。學生可以登入查看他們的成績，新生可以選擇註冊。該系統旨在以易於理解的方式呈現結果。 **如何做：** 掌握前端、後端和資料庫程式設計的基礎知識後，從建立全端應用程式開始。利用HTML、CSS、JavaScript、PHP和MySQL實現使用者認證、結果顯示和註冊功能。 ![學生成績管理系統](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y9a2bm1exqbu34lsxph.png) ### 線上程式碼編輯器（React） 該專案涉及使用 React 建立線上程式碼編輯器，允許使用者用各種程式語言編寫和執行程式碼。目標是建立一個用戶可以無縫編輯和測試原始程式碼的平台。 **如何做：** 先使用 HTML、CSS 和 React 進行前端工作。實現程式碼輸入、執行和結果顯示功能。專注於建立用戶友好的介面，以獲得流暢的程式碼編輯體驗。 ![線上程式碼編輯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06jjz3v5sq7c6apc41d7.png) ### 使用 React 進行 Amazon 克隆 Amazon Clone 專案圍繞著使用 React 建立 Amazon 線上商店的工作副本。該專案將幫助您了解有效的電子商務網站所需的元件並將它們應用到您的應用程式中。 **如何做：** 從 HTML、CSS 和 JavaScript 開始。使用 React 建立電子商務網站的不同部分，例如產品清單、購物車和結帳流程。整合動態資料並增強使用者介面。 ![使用 React 的 Amazon 克隆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pq55ml71nqntt4j07p1z.png) ### 客戶關係經理 客戶關係管理器專案涉及建立一個後端 Web 應用程式，該應用程式允許建立、讀取、更新和刪除 (CRUD) 客戶資料。這是了解後端 Web 開發的基礎專案。 **如何做：** 利用 Node.js、Express.js 和 MongoDB 等技術來建立後端基礎架構。實施 CRUD 操作來管理客戶資料。開發一個用戶友好的介面，用於與客戶資料庫互動。 ![顧客關係經理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfr25p8b2gzapen1l8ry.png) ### 排序展示台 排序可視化器專案旨在提供各種排序演算法的可視化表示。使用者可以觀察不同的演算法如何執行，並更深入地了解 JavaScript 的基本概念。 **具體操作方法：** 使用 HTML、CSS、Bootstrap 和 JavaScript 建立 Web 應用程式。實現冒泡排序、合併排序和快速排序等排序演算法的視覺化。允許用戶與視覺化進行交互，以增強他們的學習體驗。 ![排序視覺化工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51wpf82samc6k9ggftgc.png) ### 多人遊戲 – Connect4 多人遊戲 – Connect4 專案專注於建立具有多人遊戲功能的著名 Connect4 遊戲。它提供了學習一些重要的網路和遊戲設計基礎知識的機會。 **如何做：** 如果您想知道多人遊戲是如何開發的，或者您曾經想為週末製作一款遊戲，那麼這個專案適合您。使用 PyGame、Sockets 和遊戲編程為您和您的朋友建立多人 Connect4 遊戲。 ![多人遊戲 – Connect4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktsz3ky4pj27b9q7mynm.png) ### YouTube 腳本摘要器 投入時間觀看可能比預期更長的電影變得相當具有挑戰性。有時，如果我們不能從他們那裡收集有用的訊息，我們的努力可能會徒勞無功。透過自動總結影片的文字記錄，我們可以輕鬆地發現這些影片中的關鍵主題，這節省了我們再次觀看整個影片的時間和精力。 **如何做到這一點：** 人們每天都會觀看 YouTube 影片，這些影片可以是指導性的、紀錄片的或任何其他持續時間較長的類型；考慮透過提供摘要資訊可以節省多少時間。該專案將是一個 chrome 擴展，它將向後端的 Rest API 發送請求，該 API 將向您發送 YouTube 腳本的摘要。 ![YouTube 腳本摘要](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4kw614tpyvyrumjc1g8.png) ### OurApp – NodeJS 中的社交媒體 Web 應用程式 現實應用程式 OurApp 的用戶可以進行交流、相互關注以及發布簡短的推文。掌握 HTML、CSS 和 JS 後，專案最適合想要使用 Nodejs 和 MongoDB 深入研究完整堆疊的人。 **怎麼做：** 你想成為能夠超越 HTML、CSS 和 JS 的全端開發人員嗎？建立這個完整的堆疊應用程式，以了解如何使用 NodeJS、MongoDB 和其他技術來建立現代、快速且可擴展的伺服器端 Web 應用程式。如果您想在磨練 NodeJS 技能的同時開發一些有趣的東西，那麼這個專案就是適合您的。您還可以免費註冊全端 Web 開發課程，這將幫助您成為您所在領域的傑出開發人員。 ![OurApp – NodeJS 中的社交媒體 Web 應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02qifmojncuvx27k6hyu.png) ### Codechef 通知 CodeChef 經常遇到伺服器過載問題，導致評審難以快速提供提交結果。留給編碼人員的唯一選擇是在一段時間後不斷檢查站點，看看結果是否存在。透過這個專案，我們希望消除審查提交頁面以確定提交結果的額外步驟。我們將自動執行檢索結果的過程並在準備好後立即通知使用者。 **如何操作：** Codechef 是一個流行的編碼實踐平台，但伺服器過載可能會導致結果延遲。此附加元件旨在透過自動化獲取結果並及時通知用戶的流程來節省時間。使用網路抓取或 API 來收集結果資訊並實作通知系統。 ![Codechef 通知程序](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4k7ru3ff3h7tgne8qpoi.png) ### 使用 Dash 來視覺化和預測股票 該專案涉及使用 Dash（一種用於建立分析 Web 應用程式的 Python 框架）來視覺化和預測股票資料。它提供了將資料視覺化和機器學習概念應用於金融資料的機會。 **如何操作：** 如果您對股票市場感興趣，該專案將簡化股票資料的可視化。利用Python、Dash和相關函式庫進行資料視覺化。實施基於歷史資料預測股票趨勢的功能。 ![使用 Dash 視覺化和預測股票](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovs08g50etufj84gz6fd.png) ### 線上程式碼編輯器 (JQuery) 線上程式碼編輯器可透過瀏覽器存取，並位於遠端伺服器上。儘管一些線上程式碼編輯器更像是完整的 IDE，但其他編輯器更像是具有語法突出顯示或程式碼完成等基本功能的文字編輯器。 **如何操作：** 使用 HTML、CSS、JavaScript 和 JQuery 建立線上程式碼編輯器。專注於透過語法突出顯示和程式碼完成等功能來增強使用者體驗。確保程式碼輸入和執行順利。 ![線上程式碼編輯器 (JQuery)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1vxgxvbtf1rh578lauc.png) ### 模糊URL FuzzyURLs 涉及使用 Django（Python 的高級 Web 框架）建立 URL 縮短服務。它提供了建立 Web 應用程式的實務經驗，特別關注 URL 操作。 **如何做：** 從頭開始開發一個基於 Django 的 URL 縮短器。了解 URL 縮短服務的工作流程並實現建立、管理和重新導向短 URL 的功能。 ![FuzzyURLs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uouta53v2suc8m27i14.png) ### 使用 React 進行 Slack 克隆 該專案旨在使用 React 建立 Slack 克隆，提供即時訊息和協作的平台。這是一個中高階專案，強調React-Redux和Firebase。 **如何做：** 應用 React-Redux 原理來建立一個類似 Slack 的 Web 訊息服務。利用 Firebase 實現即時資料庫功能。專注於建立響應靈敏且功能豐富的訊息傳遞應用程式。 ![使用 React 的 Slack 克隆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kugsfjeblq934ceomlhs.png) ### Web 應用程式的 Node.js 驗證 了解使用 Node.js 為 Web 應用程式建立驗證系統。探索各種身份驗證技術，評估其優點和缺點，並實施改進。 **如何做：** 對於那些想要深入研究 Node.js 並了解建立安全身份驗證系統的複雜性的人來說，這個專案非常適合。實施使用者身份驗證、會話管理並探索增強安全性的方法。 ![Web 應用程式的 Node.js 驗證](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fcet0kd7abf6xu57eh8.png) ### TinyMCE 同義詞插件 為 TinyMCE 富文本編輯器建立一個插件，用於搜尋單字的同義詞並允許使用者將它們插入編輯器中。 **如何做到這一點：** 為 TinyMCE 開發一個自訂插件，整合一項功能，使用戶能夠搜尋同義詞並輕鬆地將它們插入到富文本編輯器中。了解 TinyMCE API 以實現無縫整合。 ![TinyMCE 同義詞外掛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmr8y3x21l9g7vuwz5mi.png) ### 迷宮裡的老鼠 建立一個基本的 React Web 應用程式，顯示老鼠從帶有預設障礙的方形迷宮的左上角到右下角可以採取的所有可能路徑。 **具體操作方法：** 建立一個簡單的 React Web 應用程式來直觀地呈現經典的 Rat in the Maze 謎題。實施功能來展示老鼠穿過迷宮的所有潛在路徑。 ![迷宮中的老鼠](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdcwf4cioua8fogrsp96.png) ### 簡歷產生器 Web 應用程式 使用 ReactJS 和 NodeJS 建立一個用於建立履歷的 Web 應用程式。該專案將指導您完成建立簡歷產生器的步驟，並提供一種實用的方法來支援個人製作簡歷。 **如何做：** 深入研究 ReactJS 和 NodeJS 來開發一個用戶友好的簡歷產生器。實施加入個人詳細資訊、教育背景、工作經驗和技能的功能。專注於建立動態且可自訂的履歷模板。 ![簡歷產生器 Web 應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntwflc67s9kwi00plrti.png) ### Markdown 編輯器 建立一個 Markdown 編輯器，讓使用者編寫 Markdown 並預覽渲染的 HTML。 Markdown 是一種基於網路的文字格式化系統，廣泛用於部落格文章、文件等。 **如何做：** 使用 HTML、CSS 和 JavaScript 開發 Markdown 編輯器。使用戶能夠編寫 Markdown 程式碼並查看渲染的 HTML 的即時預覽。使用粗體文字、圖像和清單等功能增強編輯器。 ![Markdown 編輯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppv6gl6pzq7uetmkax5b.png) ### 450 DSA 追蹤器 450 DSA Tracker 旨在協助使用者追蹤解決 450 道資料結構和演算法問題的進度。它利用 TypeScript、React.js 的 reducer 和 context API 以及即時瀏覽器 IndexedDB 來快取資訊。 **具體操作方法：** 使用 TypeScript 和 React.js 實作 Web 應用程式，以追蹤解決資料結構和演算法問題的進度。利用reducer 和context API 進行狀態管理，並利用IndexedDB 進行即時瀏覽器快取。 ![450 DSA 追蹤器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijhv2y4gx3f1l2ub7xnz.png) ### 待辦事項網頁應用程式 使用 Node.js 框架 Adonis.js 建立待辦事項 Web 應用程式。了解 HTTP、REST API 和 CRUD 操作，同時建立用於管理待辦事項清單的後端 API。 **如何操作：** 使用 Adonis.js 為待辦事項 Web 應用程式建立 CRUD API。使用 Postman 測試 API 並建立用於新增、更新和刪除任務的後端功能。獲得使用後端框架的經驗。 ![待辦事項 Web 應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rajw8titifncb6la3e6.png) ### 兩個真相和一個謊言遊戲 Slack 機器人 開發一個 Slack 機器人，用於在 Slack 工作區中玩「兩個真相和一個謊言」遊戲。該專案利用 JavaScript 和 Node.js 為工作區成員建立一個有趣的互動式遊戲。 **如何做：** 建立一個 Slack 機器人，以促進「兩個真相和一個謊言」遊戲。使用 JavaScript 和 Node.js 處理 Slack 工作區中的互動。實現用戶共享陳述並猜測哪一個是錯誤的功能。 ![兩個真相與一個謊言遊戲 Slack 機器人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwocawujfx0219s6ho5c.png) ### 使用 Chromakey（綠幕）效果進行即時視訊處理 探索視訊處理中使用的色度（綠幕）效果。使用 HTML、CSS 和 JavaScript 建立 Web 應用程式，以背景影片或圖像取代綠幕。 **具體操作方法：** 開發一個處理即時視訊並應用色鍵效果的 Web 應用程式。使用 HTML、CSS 和 JavaScript 操作影片幀並用背景影片或圖像替換綠幕。 ![使用 Chromakey（綠幕）效果進行即時視訊處理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4yc5aauy13cthc6b2b3.png) ### WhatsApp 網頁克隆 使用 React 和 Firebase 開發具有即時訊息功能的 WhatsApp Web 克隆。 **如何操作：** 使用 React 建立使用者介面並使用 Firebase 實現即時資料庫功能，打造流暢的訊息體驗。 ![WhatsApp 網路克隆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggf6mpl4bssvzjrr97b3.png) ### WhatsApp 上的電子郵件提醒 設定新電子郵件的 WhatsApp 提醒以簡化電子郵件管理和通知。 **如何操作：** 使用自動化平台 Twilio 建立一個工具，從收件匣中獲取詳細資訊並在 WhatsApp 上發送警報。 ![WhatsApp 上的電子郵件提醒](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zxhacxpysrlx2d78sb5.png) ### 天氣預報應用程式 使用 Streamlit 函式庫和 OpenWeatherMap API 為天氣預報應用程式建立響應式前端。 **如何操作：** 利用 Python 和 Streamlit 可視化天氣資料並與 OpenWeatherMap API 互動以獲取即時天氣資訊。 ![天氣預報應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwm38a5vw8sj2iu17y57.png) ### 總結 這個 Web 開發專案的彙編提供了各種各樣的挑戰，使您能夠提高跨不同技術和概念的技能。無論您對全端開發、資料視覺化、遊戲設計還是自動化感興趣，這些專案都可以提供有價值的幫助 --- 原文出處：https://dev.to/mukeshkuiry/25-web-development-projects-you-must-work-on-2024-4onl

0個讚   0留言 484瀏覽

2024 年掌握前端開發的 9 個專案點子

想要 **在 2024 年掌握前端 Web 開發？** 無論您是渴望開始前端開發之旅還是希望提升您的技能，我們都能滿足您的需求。 這裡有 9 個令人興奮的專案，它們將使您能夠在 2024 年掌握前端開發。為了加速您的學習過程，每個專案都配有專用資源。 讓我們深入研究並將您的編碼願望變成現實！ 🚀 ### 1. 說故事作品集網站 建立一個引人入勝的說故事作品集網站來展示您的技能和專案。使用動畫和過渡來吸引訪客。 **您將學到什麼：** 該專案將提高您建立個人作品集、將動畫與 CSS 和 JavaScript 結合的能力。您還將透過網頁設計深入了解如何有效地講述故事。 **技術堆疊：** HTML、CSS、JavaScript、GSAP（GreenSock 動畫平台）。 **資源：** [說故事作品集教學](https://youtu.be/0fYi8SGA20k?si=lgzXlqL7m2aK3nzg) ![說故事組合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2smmhfqq2g7qx1yune1.png) ### 2. 電影搜尋應用程式 使用 React Hooks 建立電影搜尋應用程式。用戶可以搜尋電影、查看詳細資訊並發現新上映的電影。 **您將學到什麼：** 透過這個專案，您將掌握使用 React Hooks 進行狀態管理、非同步資料擷取和響應式設計。此外，您還將深入了解如何處理使用者輸入和管理複雜的資料結構。 **技術堆疊：** React Hooks、Axios、CSS（flexbox/grid）和電影資料庫（IMDB）API。 **資源：** [電影搜尋應用程式教學](https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/) ![電影搜尋應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wtwna67o253uusbpoj9.png) ### 3. 任務管理應用程式 開發具有任務建立、完成追蹤和類別組織等功能的任務管理應用程式。 **您將學到什麼：** 該專案將加深您對 React 中的狀態管理、CRUD 操作以及用於任務管理的使用者友好介面的實現的理解。 **技術堆疊：** React、useState、useEffect、localStorage、CSS。 **資源：** [任務管理應用教學](https://youtu.be/m4MDt7UUu1w?si=EcCbIMtkmHZIsWPS) ![任務管理應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49wmxw4xcfzlig2mrmk4.png) ### 4. 互動式履歷表產生器 建立一個互動式履歷產生器來展示您的職業歷程。包括教育、工作經驗和技能部分。 **您將學到什麼：** 透過這個專案，您將掌握表單處理、動態內容呈現和建立互動式使用者介面的藝術。這是提高你的 React 技能的絕佳機會。 **技術堆疊：** React、表單處理、CSS（樣式元件）。 **資源：** [互動式履歷產生器播放清單](https://youtube.com/playlist?list=PLrL9i_Ka3T0caA37TXSlicITQl1pp_3Ry&si=UhftAkbYr_eYaxJZ) ![互動式履歷產生器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqsmo0bflp7x9juv94br.png) ### 5.產品落地專案 開發一個產品登陸頁面，重點宣傳特定產品或服務。針對各種螢幕尺寸實施響應式設計。 **您將學到什麼：** 本專案將加深您對響應式網頁設計的理解，包括媒體查詢、Flexbox 和網格佈局。您還將提高建立具有視覺吸引力的登陸頁面的技能。 **技術堆疊：** HTML、CSS（Flexbox/Grid）、響應式設計。 **資源：** [產品登陸頁面教學](https://youtube.com/playlist?list=PL07efmqYWHZ8jroJAkkFB2s4ZKpVNCOQa&si=ZI375j0QMaN7rpdn) ![產品登陸頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqpejqx835m7zxgs585u.png) ### 6. 使用 GitHub API 的個人資料頁面 建立一個個人資料頁面，從 GitHub API 取得資料，顯示使用者資訊、儲存庫和貢獻熱圖。 **您將學到什麼：** 該專案將增強您使用 API、處理非同步資料以及建立具有視覺吸引力的使用者設定檔的技能。您還將獲得將第三方 API 整合到應用程式中的經驗。 **技術堆疊：** React、GitHub API、CSS。 **資源：** [GitHub API 設定檔教學](https://dev.to/falanatolu/using-github-api-to-fetch-and-display-a-github-user-profile-26g6) ![使用 GitHub API 的個人資料頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5qvthy4yzgx60a5omp4.png) ### 7.響應式部落格網站 開發一個響應式部落格網站，其中包含針對各種裝置優化的文章清單、單一文章頁面和導航選單等功能。 **您將學到什麼：** 該專案將提高您建立複雜佈局的技能，並專注於回應能力。您將獲得建立導航結構和優化不同螢幕尺寸的使用者體驗的經驗。 **技術堆疊：** HTML、CSS (Flexbox/Grid)、JavaScript。 **資源：** [響應式部落格網站教學](https://youtu.be/NNQuhOeM0mI?si=RjNPOIm-otDhMTsE) ![響應式部落格網站](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/potx6blzf3if4cfp4wv7.png) ### 8. 使用 Lottie 檔案的動畫天氣應用程式 使用 Lottie 檔案建立帶有動畫天氣圖示的天氣應用程式。提供與當前天氣狀況對應的即時天氣資訊和動畫。 **您將學到什麼：** 該專案將擴展您將外部庫 (Lottie) 整合到專案中的技能。您還將獲得使用即時資料 API 和實現動態動畫的經驗。 **技術堆疊：** React、Lottie、OpenWeatherMap API、CSS。 **資源：** [動畫天氣應用教學](https://youtu.be/pFvWwFua6mw?si=Xut6cKy10rV1DpFd) ![動畫天氣應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x392uay0fjf8kypyrtoy.png) ### 9.SaaS 登陸頁面 設計並建置軟體即服務 (SaaS) 產品的登陸頁面。強調簡潔的設計、有效的文案和引人注目的號召性用語元素。 **您將學到什麼：** 該專案將提高您建立以行銷為導向的登陸頁面的技能，並專注於用戶轉換。您還將深入了解有說服力的設計和有效使用配色方案的原則。 **技術堆疊：** React、Tailwind CSS、文案。 **資源：** [SaaS 登陸頁面教學](https://youtube.com/playlist?list=PLz_5rPRIvGEBDvyf-HIIDHjsPppnuXtFG&si=JIpCCIbz4QW8v9o4) ![SaaS 登陸頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cl16te1dbqsp5np73bh2.png) 踏上這些令人興奮的專案，在 2024 年掌握前端 Web 開發。每個專案都提供一系列獨特的挑戰和學習機會，讓您具備在動態 Web 開發領域脫穎而出所需的技能。快樂編碼！ 🚀 --- 原文出處：https://dev.to/mukeshkuiry/9-projects-to-master-frontend-web-development-in-2024-with-resource-d0k

0個讚   0留言 341瀏覽

🫵 開發人員可實現的 5 項副業💰

嘿嘿👋 在您作為開發人員的旅程中，賺錢的常見方法是**獲得全職工作**。 然而，您可能還沒有找到工作（_又名您仍在學習_），或者您已經開始工作，但您正在尋找賺取額外現金的方法。 現在，您可以嘗試透過多種方式賺取副收入。 “有些比其他更現實。” 在本文中，我們將了解您今天就可以開始的**_可實現的_副業收入工作**。 深吸一口氣，讓我們用這些新知識洗滌我們的靈魂。 🧎 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uv5gxnqnmz2lixw86fix.gif) **_免責聲明：_** 我沒有嘗試清單中的每個選項。如果您認為應該在清單中加入一些內容或您想分享個人經歷，請在下面發表評論（我很樂意聽取您的意見！）。 🙇‍♂️ --- ## ⚔️ 創作者任務 在 Quine，我們目前正在為開發人員提供一種將其技能貨幣化的方法。 _Creator Quests_ 是每兩週發生一次的開源挑戰。 **這就像一場 24/7 的黑客馬拉松，獎勵開發者建立酷炫的應用程式**以及使用未來的開發者工具。 🚀 社區透過對他們喜歡的專案給予榮譽來決定獲勝者。獲得最多榮譽的專案將獲得最多的收益。 🤑 **下一次挑戰將於 12 月 19 日星期二開始。** 要參加，請註冊 [Quine](https://quine.sh/?utm_source=devto&utm_campaign=monetising_dev_skills) 並前往 _Quests_。 PS：測試期間，100%有效參賽者均獲得獎勵💸 目前的獎金池為 1024 美元，隨著更多參與者的加入，獎金池將會增加！點擊下面的並試試看！ ⬇️ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akiuhk62zctvf3b9gilx.png)](https://quine.sh/?utm_source=devto&utm_campaign=monetising_dev_skills --- # 💃 MaaS - 我即服務 **自由工作者很難開始。** 然而，每個人都可以**實現並獲得**。 我在資料分析方面有一些自由職業經驗。如果我必須重做一次，我會採取以下方法： **1️⃣ 選擇平台：** 了解[Fiverr](https://www. Fiverr.com/)、[Upwork](https://www.upwork.com/en-gb/nx/job)之間的區別-post/instant/welcome) 和 [自由工作者](https://www.freelancer.co.uk/)。選擇一個您喜歡的平台並專注於此。我發現 [Malt](https://www.malt.com/) 是一個有趣的平台，但如果你認為自己非常優秀，你可以隨時關注 [TopTal](https://www.toptal.com) / ）。 **2️⃣ 不要成為萬事通先生/女士：** 圍繞非常具體的服務建置配置文件，例如_我專門從事Python 抓取工具的編碼並使用MongoDB 建置資料庫，最終通過Plotly 顯示儀表板_（不完全是這樣）但你明白了🙃）。 **3️⃣ 為您的第一個客戶不收取任何費用：** 獲得您的第一個客戶非常困難，因此請聯繫招聘訊息並說明您很樂意**免費這樣做。** 如果他們對這份工作感到滿意，請詢問他們提供良好的評級。 **4️⃣ 獲得您的第一筆薪水：** 開始為您的工作收費 - 仍然以較低的費率 - 並建立您的聲譽。 **5️⃣ 提高定價：** 一旦您在平台上擁有更強大的地位，您就可以決定提高定價。 我的最後評論是，雖然我相信每個人都可以透過自由工作開始賺錢，但**我不認為每個人都應該這樣做。** 有很多缺點不符合你喜歡的工作方式（難纏的客戶、截止日期） 、平台依賴性等）。 **💁 特別提示：** 在倫敦，我發現了一個吸引一些客戶的小技巧。您可以聯繫一些相關的諮詢/招聘機構，他們可以幫助您找到客戶。如果您在起步時遇到困難，請考慮這樣的機構。 --- ## 🧪 測試一下。獲得報酬。 作為開發人員，您了解網頁或應用程式背後的技術細節。 這意味著您有能力執行出色的品質檢查。 根據您關注的平台，您可以花 10 到 60 分鐘以上嘗試應用程式或網站。 市面上有各種平台，但您可以查看的 3 個已知網站是： - [Trymata](https://trymata.com/) - [使用者測試](https://www.usertesting.com/) - [UserLytics](https://www.userlytics.com/user-experience-research/paid-ux-testing/) PS：還有一個完整的調查選項，在我看來，花費很少。如果您仍然好奇，可以查看[Wynter](https://wynter.com/participants/join)或[SwagBucks](https://www.swagbucks.com/g/paid-surveys)。 --- # 🐛 蟲子獵人 如果您對細節有敏銳的洞察力並且喜歡網路安全，那麼您可以透過這項技能獲利。 如果你有好奇心並且有良好的程式設計技能，你就可以在那裡賺錢。 🥂 一開始你可能會得到 20 美元的報酬，但獎勵可能會增加到天文數字，例如 10 萬英鎊以上。 我要強調的是，這不是你成為百萬富翁的方式。有一些不錯的競爭，你可能不會賺到很高的錢。 您仍然應該嘗試一下，看看它是否適合您。 最知名的平台是： - [HackerOne](https://www.hackerone.com/) - [BugCrowd](https://www.bugcrowd.com/) 如果你在這方面變得擅長，你可以考慮大公司，因為這往往是大公司的地方。 您可以從 [Microsoft](https://www.microsoft.com/en-us/msrc/bounty)、[Apple](https://security.apple.com/bounty/) 和 [Google](https: //bughunters.google.com/about/rules/6625378258649088/google-and-alphabet-vulnerability-reward-program-vrp-rules)。 **最後提示：** 如果您發現自己喜歡使用的網站有漏洞，向他們索取賠償總沒有壞處。 🙃 --- ## 🧑‍🏫 你學到了什麼嗎？教它回來 輔導是我個人最喜歡的「副業」。 對於某些人來說，這可能看起來“乏味”，但它是非常可以實現的，並且它**增強您圍繞特定主題的知識，同時賺大錢**。 此外，您不一定需要成為專家。 這是正確的！ 只要您在特定領域更有知識，您就可以收取教授該知識的服務費用。 您可以透過 3 種方法來解決此問題： ### 📜 老學校方式 1️⃣ **確定合適的學校**：在學校/學院周圍張貼實體廣告，並附上您的課程和聯絡方式。 2️⃣ **辨識社群：** 尋找並參與相關的 Discord、Facebook 和 Linkedin 群組。以尊重的方式讓相關社區了解您的服務。 3️⃣ **不要太貪心：** 以較低的價格開始您的第一堂課，讓一切順利進行。經過一些經驗後，考慮提高價格。 ### 👶 新學校方式 查看以下平台： - [Codementor](https://www.codementor.io/freelance) - [Superprof](https://www.superprof.co.uk/lessons/computer-programming/united-kingdom/) - [導師](https://tutorhouse.co.uk/a/coding) 註冊成為導師並以低於市場價格的價格開始招募您的第一批學生。 ### 📦 數位內容 您可以考慮建立一些視訊課程。 我個人最喜歡的是一個名為 [Stan Store](https://www.stan.store/?ref=bap&utm_source=stan-store-link&utm_medium=redirect&utm_campaign=storefront) 的新工具。 這是數位創作者的全能工具包，不僅僅是建立影片內容。 > 我個人使用這個平台賺了幾百美元。 或者，您可以查看更傳統的平台，例如 [SkillShare](https://www.skillshare.com/en/search?query=Coding) 或 [Udemy](https://www.udemy.com/)。 --- ## 較不容易實現的路徑（但值得一提）👇 <br> <br> - **🚧 黑客馬拉松**：一些黑客馬拉松提供豐厚的現金獎勵。缺點是通常存在相當多的競爭。要尋找合適的黑客馬拉松，迄今為止最好的網站是 [DevPost](https://devpost.com/)。 <br> - **🏷️ 銷售鍋爐模板：** 您可以根據自己的知識建立鍋爐模板。在這種情況下，「稍微少一點」的是你能賺多少錢（至少在最初）。這是因為它需要大量的追隨者（或大量的行銷）。如果你想嘗試一下，可以看看 [Gum Road](https://gumroad.com/) 和 [AppSumo](https://appsumo.com/)。 --- 我希望您喜歡這篇文章，它可以幫助您了解如何利用您的開發技能來從事副業。 上述演出並不是試圖描繪出你將一夜致富的景象。然而，它們是副業，獲得報酬的機會很高。只要保持一定的一致性，隨著時間的推移，您可以期望獲得更多的收入。 🚀 這篇文章的靈感來自 @lissy93 寫的一篇很棒的文章。 如果您有興趣了解將您的開發技能貨幣化的其他方法（特別是如果您更有經驗），請查看他們的[文章](https://dev.to/lissy93/50-ways-to-bring -in- extra-cash-as-a-developer-19b6) 並給它一些愛。 下週見， 您的開發夥伴💚 巴普 --- 如果您想加入開源中自稱「最酷」的伺服器😝，您應該加入我們的[discord伺服器](https://discord.com/invite/ChAuP3SC5H/?utm_source=devto&utm_campaign=9_deep_learning)。我們隨時為您的開源之旅提供協助。 🫶 {% 嵌入 [https://dev.to/quine](https://dev.to/quine) %} --- 原文出處：https://dev.to/quine/5-achievable-side-hustles-for-developers-4bcg

0個讚   0留言 192瀏覽

Flask Rest API -第 1 部分 - 將 MongoDB 與 Flask 結合使用

## 第 1 部分：將 MongoDB 與 Flask 結合使用 你好！在本系列的最後一個[部分](https://dev.to/paurakhsharma/flask-rest-api-part-0-setup-basic-crud-api-4650)中，我們學習瞭如何建立基本的“ CRUD” ` 使用 python `list` 的 REST API 功能。但這不是現實世界應用程式的建構方式，因為如果您的伺服器重新啟動或上帝禁止崩潰，那麼您將丟失伺服器中儲存的所有資訊。為了解決這些問題（以及許多其他問題），使用了資料庫。所以，這就是我們要做的。我們將使用 [MongoDB](https://docs.mongodb.com/manual/) 作為我們的資料庫。 如果您剛從這部分開始，您可以在[此處]找到我們迄今為止編寫的所有程式碼（https://github.com/paurakhsharma/flask-rest-api-blog-series/tree/master/Part% 20 -%200）。 在開始之前，請確保您已在系統中安裝了 MongoDB。如果您還沒有安裝，可以安裝 [Linux](https://docs.mongodb.com/manual/administration/install-on-linux/)、[Windown](https://docs.mongodb.com/手冊/教學/install-mongodb-on-windows/）和[macOS]（https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/）。 主要有一些流行的函式庫可以讓 MongoDB 的使用變得更容易： 1) [Pymongo](https://api.mongodb.com/python/current/) 是 MongoDB 的低階 Python 包裝器，使用 `Pymongo` 類似於直接編寫 MongoDB 查詢。 以下是使用“Pymongo”更新“id”與給定“id”相符的電影名稱的簡單範例。 ``` db['movies'].update({'_id': id}, {'$set': {'name': 'My new title'}}) ``` `Pymongo` 不使用任何預先定義的模式，因此它可以充分利用 MongoDB 的無模式特性。 2) [MongoEngine](http://docs.mongoengine.org/) 是物件文件映射器，它使用文件模式，使 MongoDB 的使用變得清晰、更容易。 這是使用“mongoengine”的相同範例。 ``` Movies.objects(id=id).update(name='My new title') ``` 「Mongoengine」對資料庫中的欄位使用預先定義架構，這限制了它使用 MongoDB 的無架構性質。 正如我們所看到的，雙方都有各自的優點和缺點。因此，請選擇最適合您的專案的一種。在本系列中，我們將學習“Mongoengine”，如果您希望我也介紹“Pymongo”，請在下面的評論部分告訴我。 為了在我們的`Flask` 應用程式中更好地使用`Mongoengine`，有一個很棒的`Flask` 擴展，名為[Flask-Mongengine](http://docs.mongoengine.org/projects/flask- mongoengine/en/latest/)。 那麼，讓我們開始安裝「flask-mongoengine」。 ``` pipenv install flask-mongoengine ``` *注意：由於`flask-mongoengine` 是在`mongoengine` 之上建造的，所以在安裝Flask-mongoengine 時會自動安裝，而且`mongoengine` 是在`pymongo` 之上建造的，所以它也會被安裝* 現在，讓我們在「movie-bag」中建立一個新資料夾。我將其稱為“資料庫”。在「database」資料夾中建立一個名為「db.py」的檔案。另外，建立另一個檔案並將其命名為“models.py” 讓我們看看文件/資料夾現在是什麼樣子。 ``` movie-bag │ app.py | Pipfile | Pipfile.lock └───database │ db.py └───models.py ``` 現在，讓我們深入探討有趣的部分。 首先，讓我們透過將以下程式碼新增至「db.py」來初始化我們的資料庫 ``` #~movie-bag/database/db.py from flask_mongoengine import MongoEngine db = MongoEngine() def initialize_db(app): db.init_app(app) ``` 在這裡，我們導入了“MongoEngine”並建立了“db”物件，並定義了一個函數“initialize_db()”，我們將從“app.py”中呼叫該函數來初始化資料庫。 讓我們在“models”目錄中的“movie.py”中編寫以下程式碼 ``` #~movie-bag/database/models.py from .db import db class Movie(db.Document): name = db.StringField(required=True, unique=True) casts = db.ListField(db.StringField(), required=True) genres = db.ListField(db.StringField(), required=True) ``` 我們剛剛建立的是資料庫的文件。因此，使用者無法新增此處定義的其他欄位。 這裡我們可以看到「Movie」文件有三個欄位： 1）`name`：是一個`String`類型的字段，我們在這個字段上也有兩個約束。 - “必需”，這意味著用戶在不提供標題的情況下無法建立新電影。 - “唯一”，這意味著電影名稱必須是唯一的，不能重複。 2) `casts`：是一個`list`類型的字段，其中包含`String`類型的值 3) `genres`: 與`casts`相同 最後，我們可以在「app.py」中初始化資料庫，並更改「view」函數（處理 API 請求的函數）以使用我們先前定義的「Movie」文件。 ``` #~movie-bag/app.py -from flask import Flask, jsonify, request +from flask import Flask, request, Response +from database.db import initialize_db +from database.models import Movie app = Flask(__name__) -movies = [ - { - "name": "The Shawshank Redemption", - "casts": ["Tim Robbins", "Morgan Freeman", "Bob Gunton", "William Sadler"], - "genres": ["Drama"] - }, - { - "name": "The Godfather ", - "casts": ["Marlon Brando", "Al Pacino", "James Caan", "Diane Keaton"], - "genres": ["Crime", "Drama"] - } -] +app.config['MONGODB_SETTINGS'] = { + 'host': 'mongodb://localhost/movie-bag' +} + +initialize_db(app) [email protected]('/movies') -def hello(): - return jsonify(movies) [email protected]('/movies') +def get_movies(): + movies = Movie.objects().to_json() + return Response(movies, mimetype="application/json", status=200) [email protected]('/movies', methods=['POST']) -def add_movie(): - movie = request.get_json() - movies.append(movie) - return {'id': len(movies)}, 200 [email protected]('/movies', methods=['POST']) + body = request.get_json() + movie = Movie(**body).save() + id = movie.id + return {'id': str(id)}, 200 [email protected]('/movies/<int:index>', methods=['PUT']) -def update_movie(index): - movie = request.get_json() - movies[index] = movie - return jsonify(movies[index]), 200 [email protected]('/movies/<id>', methods=['PUT']) +def update_movie(id): + body = request.get_json() + Movie.objects.get(id=id).update(**body) + return '', 200 [email protected]('/movies/<int:index>', methods=['DELETE']) -def delete_movie(index): - movies.pop(index) - return 'None', 200 [email protected]('/movies/<id>', methods=['DELETE']) +def delete_movie(id): + Movie.objects.get(id=id).delete() + return '', 200 app.run() ``` 哇！變化很多，讓我們一步一步地進行變化。 ``` -from flask import Flask, jsonify, request +from flask import Flask, request, Response +from database.db import initialize_db +from database.models.movie import Movie ``` 這裡我們刪除了“jsonify”，因為我們不再需要，並加入了“Response”，我們用它來設定回應的類型。然後我們從之前定義的「db.py」導入「initialize_db」來初始化資料庫。最後，我們從“movie.py”導入“Movie”文件 ``` +app.config['MONGODB_SETTINGS'] = { + 'host': 'mongodb://localhost/movie-bag' +} + +db = initialize_db(app) ``` 這裡我們設定 mongodb 資料庫的配置。這裡主機的格式為「<host-url>/<database-name>」。由於我們已經在本地安裝了 mongodb，因此我們可以從“mongodb://localhost/”存取它，並且我們將資料庫命名為“movie-bag”。 最後，我們初始化資料庫。 ``` [email protected]('/movies') +def get_movies(): + movies = Movie.objects().to_json() + return Response(movies, mimetype="application/json", status=200) + ``` 在這裡，我們使用“Movies.objects()”從“Movie”文件中獲取所有物件，並使用“to_json()”將它們轉換為“JSON”。最後，我們傳回一個「Response」物件，其中我們將回應類型定義為「application/json」。 ``` [email protected]('/movies', methods=['POST']) + body = request.get_json() + movie = Movie(**body).save() + id = movie.id + return {'id': str(id)}, 200 ``` 在「POST」請求中，我們首先取得發送的「JSON」和一個請求。然後我們使用“Movie(**body)”請求中的欄位來載入“Movie”文件。這裡的「**」稱為擴充運算符，在 JavaScript 中寫為「...」（如果您熟悉的話）。顧名思義，它的作用是傳播「dict」物件。 <br/> 所以，`Movie(**body)` 變成了 ``` Movie(name="Name of the movie", casts=["a caste"], genres=["a genre"]) ``` 最後，我們保存文件並獲取其“id”，我們將其作為回應返回。 ``` [email protected]('/movies/<id>', methods=['PUT']) +def update_movie(id): + body = request.get_json() + Movie.objects.get(id=id).update(**body) + return '', 200 ``` 這裡我們先找到與請求中發送的「id」相符的Movie文件，然後更新它。這裡我們也應用了擴充運算子將值傳遞給「update()」函數。 ``` [email protected]('/movies/<id>', methods=['DELETE']) +def delete_movie(id): + Movie.objects.get(id=id).delete() + return '', 200 ``` 與此處的“update_movie()”類似，我們獲取與給定“id”匹配的電影文件並將其從資料庫中刪除。 哦，**我剛剛想起來**，我們還沒有將 API 端點加入到“GET”，僅從我們的伺服器獲取一個文件。 讓我們加入它： 在 `app.run()` 上方加入以下程式碼 ``` @app.route('/movies/<id>') def get_movie(id): movies = Movie.objects.get(id=id).to_json() return Response(movies, mimetype="application/json", status=200) ``` 現在您可以從 API 端點「/movies/<valid_id>」取得單一影片。 要執行伺服器，請確保您位於“movie-bag”目錄。 然後執行 ``` pipenv shell python app.py ``` 在終端機中啟動虛擬環境並啟動伺服器。 哇！恭喜您已經走到這一步了。要測試API，請使用我們在[上一篇]((https://dev.to/paurakhsharma/flask-rest-api-part-0-setup-basic-crud-api-4650)) 中使用的“ Postman」本系列的一部分。 您可能已經注意到，如果我們向端點發送無效資料，例如：沒有名稱或其他字段，我們會收到“HTML”形式的不友善錯誤。如果我們嘗試取得資料庫中不存在的「id」影片文件，那麼我們也會收到「HTML」回應形式的不友善錯誤。這並不是一個精心建構的 API 的例外行為。我們將在本系列的後面部分中了解如何處理此類錯誤。 ### 我們從本系列的這一部分學到了什麼？ - `Pymongo` 和 `Mongoengine` 之間的差異。 - 如何使用「Mongoengine」建立文件架構。 - 如何使用「Mongoengine」執行「CRUD」操作。 - Python 擴充運算子。 您可以在[此處]找到這部分的完整程式碼(https://github.com/paurakhsharma/flask-rest-api-blog-series/tree/master/Part%20-%201) 在下一部分中，我們將學習如何使用「Blueprint」來更好地建立 Flask 應用程式。以及如何使用“flask-restful”以最少的設定遵循最佳實踐，更快地建立 REST API 直到那時快樂編碼😊 --- 原文出處：https://dev.to/paurakhsharma/flask-rest-api-part-1-using-mongodb-with-flask-3g7d

0個讚   0留言 140瀏覽

AI 程式碼產生與手動編碼 - 202X 的程式設計將會是什麼樣子 🤖 🤔

我們正在開發一個 [React 和 Node.js 的全端 Web 框架](https://github.com/wasp-lang/wasp)，它使用簡單的設定語言來擺脫樣板檔案。很多次，我們被問到，*「為什麼你要費心去建立一個新的 Web 應用程式開發框架？無論如何，ChatGPT / LLM X 不是很快就會為開發人員生成所有程式碼嗎？」*。 這是我們對當前情勢的看法，也是我們相信未來的情況。 ## 為什麼我們需要（AI）程式碼產生？ 為了讓開發速度更快，我們首先提出了 IDE 自動補全 - 如果您正在使用 React 並開始輸入 `use`，IDE 將自動向 `useState()` 或 `useEffect()` 提供補全。除了節省擊鍵次數之外，也許更有價值的是能夠查看目前範圍內有哪些方法/屬性可供我們使用。 IDE 對專案結構和程式碼層次結構的感知也使重構變得更加容易。 **雖然這已經很棒了，但是我們如何將其提升到一個新的水平？** 傳統的 IDE 支援是基於人類編寫的規則，例如，如果我們想讓 IDE 能夠為我們實現常用功能（例如， *使用API Y* 取得X，或*實現快速排序*），其中的數量太多，無法手動進行分類和維護。 如果有一種方法可以讓電腦分析我們迄今為止編寫的所有程式碼，並自行學習如何自動完成我們的程式碼以及如何對待人類，而不是我們做所有艱苦的工作... [除了美味又濕潤的蛋糕](https://www.youtube.com/watch?v=Y6ljFaKRTrI)，我們其實已經做到了！由於機器學習的最新進展，IDE 現在可以做一些非常酷的事情，例如根據函數的名稱和頂部的簡短註釋來建議函數的完整實現： ![GPT 函數實作範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p0mivtdpmjcskgt7qnl.gif) 這真是太神奇了！上面的範例由 [Github Copilot](https://copilot.github.com/) 提供支援 - 它本質上是一個在大量公開可用程式碼上訓練的神經網路。我不會深入了解其幕後工作原理的技術細節，但有很多精彩的文章和影片涵蓋了背後的科學知識。 **看到這一點，問題出現了 - 這對程式設計的未來意味著什麼？** 這只是 IDE 自動補全功能還是其他什麼？如果我們只需在註釋中輸入我們想要的內容就可以了，我們還需要繼續手動編寫程式碼嗎？ ## 支持我們！ 🙏⭐️ ![star_us](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3a8gkl9fcs0a8rl4zsq.gif) 如果您想表達對我們正在做的事情的支持，請考慮[在 Github 上給我們一顆星](https://github.com/wasp-lang/wasp)！我們在 Wasp 所做的一切都是開源的，您的支持激勵我們並幫助我們不斷簡化 Web 應用程式開發並減少樣板程式碼。 ![丟一顆星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz3ok1dpfkscsoo0n2om.gif) ## 大問題：程式碼產生後由誰維護？ 在思考 ML 程式碼產生如何影響整個開發過程時，有一點需要考慮，但在查看所有令人印象深刻的範例時，通常不會立即想到這一點。 問題是 - **生成程式碼後會發生什麼？誰負責，將來誰來維護和重構？** ![一直是](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bzh9yp2ejwhu4zpio0e.png) 儘管 ML 程式碼產生有助於編寫特定功能的初始程式碼，但它不能做更多的事情 - 如果將來要維護和更改該程式碼（如果有人使用該產品，那麼開發人員仍然會這樣做）需要完全擁有並理解它。你可以再次使用人工智慧來幫助你，但最終，你是負責的人。 想像一下，我們擁有的只是一種彙編語言，但程式碼生成非常適合它，你可以說“實現一個對陣列進行升序排序的函數”，它將完美地生成所需的程式碼。一旦您需要將排序更改為降序，您是否仍想在將來返回該功能？ 或者，更貼近我們的日常生活，如果產生的 React 程式碼使用舊的類別語法，或者函數式元件和鉤子，對你來說是否都是一樣的？ **換句話說，這意味著GPT 和其他LLM 不會降低程式碼複雜性，也不會降低建置功能所需的知識量**，它們只是幫助更快地編寫初始程式碼並使知識/範例更接近程式碼（其中真的很有幫助）。 **如果開發人員盲目接受生成的程式碼，他們只是在創造技術債並推動其向前發展**。 ## 認識大 A - 抽象 👆 如果 ChatGPT 和這群人無法解決我們學習如何編碼和詳細理解（例如透過 JWT 進行會話管理）工作原理的所有麻煩，還有什麼可以呢？ 抽象化——這就是程式設計師幾十年來透過建立庫、框架和語言來處理程式碼重複和降低複雜性的方式。這就是我們從普通 JS 和直接 DOM 操作到 jQuery，最後到 React 和 Vue 等 UI 函式庫的方式。 引入抽像不可避免地意味著放棄一定的功能和靈活性（例如，在 Python 中對數字求和時，您無法準確指定將使用哪些 CPU 寄存器），但重點是，如果如果做得好，在大多數情況下你不需要也不想要這樣的權力。 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75uhgmdu7fq5wcwhe6tw.jpg) **不對一段程式碼負責的唯一方法是它從一開始就不存在。** 因為一旦螢幕上的像素改變顏色，你就必須擔心，這就是為什麼所有框架、語言等的主要好處是_更少的程式碼==更少的決策==更少的責任_。 擁有更少程式碼的唯一方法是做出更少的決定，並向計算機提供更少的關於如何完成某項任務的細節- 理想情況下，我們只需要說明我們想要什麼，我們甚至不會關心它是如何完成的，只要它在我們擁有的時間/記憶體/成本邊界內（所以我們可能也需要說明這些）。 讓我們來看看網路應用程式世界中非常常見（也是每個人最喜歡的）功能 - 身份驗證（yaay ☠️ 🔫）！它的典型程式碼如下所示： ``` import jwt from 'jsonwebtoken' import SecurePassword from 'secure-password' import util from 'util' import prisma from '../dbClient.js' import { handleRejection } from '../utils.js' import config from '../config.js' const jwtSign = util.promisify(jwt.sign) const jwtVerify = util.promisify(jwt.verify) const JWT_SECRET = config.auth.jwtSecret export const sign = (id, options) => jwtSign({ id }, JWT_SECRET, options) export const verify = (token) => jwtVerify(token, JWT_SECRET) const auth = handleRejection(async (req, res, next) => { const authHeader = req.get('Authorization') if (!authHeader) { return next() } if (authHeader.startsWith('Bearer ')) { const token = authHeader.substring(7, authHeader.length) let userIdFromToken try { userIdFromToken = (await verify(token)).id } catch (error) { if (['TokenExpiredError', 'JsonWebTokenError', 'NotBeforeError'].includes(error.name)) { return res.status(401).send() } else { throw error } } const user = await prisma.user.findUnique({ where: { id: userIdFromToken } }) if (!user) { return res.status(401).send() } const { password, ...userView } = user req.user = userView } else { return res.status(401).send() } next() }) const SP = new SecurePassword() export const hashPassword = async (password) => { const hashedPwdBuffer = await SP.hash(Buffer.from(password)) return hashedPwdBuffer.toString("base64") } export const verifyPassword = async (hashedPassword, password) => { try { return await SP.verify(Buffer.from(password), Buffer.from(hashedPassword, "base64")) } catch (error) { console.error(error) return false } } ``` 這只是後端程式碼的一部分（僅適用於用戶名和密碼方法）！正如您所看到的，我們在這裡有很大的靈活性，可以執行/指定以下操作： - 選擇身份驗證的實作方法（例如會話或基於 JWT） - 選擇我們想要用於令牌（如果使用 JWT）和密碼管理的確切 npm 套件 - 解析 auth 標頭並指定每個值（授權、承載等）如何回應 - 為每個可能的結果選擇回傳程式碼（例如 401、403） - 選擇密碼的解碼/編碼方式 (base64) 一方面，在我們的程式碼中擁有這種程度的控制和靈活性確實很酷，但另一方面，需要做出很多決定（==錯誤），特別是對於像身份驗證這樣常見的事情！ 如果後來有人問“_那麼你到底為什麼選擇secure-password npm 包，或者為什麼到底是base64 編碼？_”，我們可能應該用其他東西來回答，而不是“_好吧，2012 年有一篇看起來相當合法的帖子，它有近 50 票贊成。嗯，不過現在找不到了。另外，它的名字裡有‘安全’，聽起來不錯，對吧？_” 另一件要記住的事情是，我們還應該追蹤事情如何隨著時間的推移而變化，並確保幾年後，我們仍然使用最佳實踐，並且軟體包定期更新。 如果我們嘗試應用上面的原則（更少的程式碼，更少的詳細說明，說明我們想要什麼**而不是需要做什麼**），身份驗證的程式碼可能如下所示： ``` auth: { userEntity: User, externalAuthEntity: SocialLogin, methods: { usernameAndPassword: {}, google: {} }, onAuthFailedRedirectTo: "/login", onAuthSucceededRedirectTo: "/dashboard" } ``` 基於此，計算機/編譯器可以處理上面提到的所有內容，然後根據抽象級別，提供某種接口（例如表單元件或函數）來“掛鉤”我們自己的接口，例如React/Node.js 程式碼（順便說一句，這就是它實際上[在 Wasp 中工作](https://wasp-lang.dev/docs/auth/overview) 的方式）。 我們不需要關心底層使用了什麼確切的套件或加密方法 - 這是我們信任抽象層的作者和維護者的責任，就像我們相信 Python 最了解如何將兩個數字相加一樣裝配水平，並與該領域的最新進展保持同步。當我們依賴內建資料結構或依靠垃圾收集器來很好地管理程式記憶體時，也會發生同樣的情況。 ## 但是我產生的漂亮程式碼😿💻！那麼會發生什麼事呢？ 別擔心，一切都還在這裡，您可以產生您想要的所有程式碼！這裡要理解的要點是，人工智慧程式碼生成和框架/語言開發是相互補充而不是替代，並且將繼續存在，這最終對開發人員社群來說是一個巨大的勝利——它們將繼續讓我們的生活更輕鬆，讓我們能夠做更多有趣的事情（而不是第 n 次實作 auth 或 CRUD API）！ 我將這裡的演變視為一個循環（或實際上是螺旋式上升，但這超出了我的繪圖能力）： 1. **語言/框架：存在**，是主流，很多人使用它 2. **模式開始出現**（例如實作身份驗證，或進行 API 呼叫）→ AI 學習它們，透過自動完成提供 3. **其中一些模式成熟**並變得穩定→抽象的候選者 4. **新的、更抽象的語言/框架**出現 5. **返回步驟 1。** ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9na8wwmaqfabhx1dkuaf.png) ## 結論 這意味著我們雙贏——當語言成為主流時，我們可以從人工智慧驅動的程式碼產生中受益，幫助我們更快地編寫程式碼。另一方面，當我們不想重複/處理的程式碼模式出現並變得穩定時，我們就得到了一種全新的語言或框架，它允許我們編寫更少的程式碼並關心更少的實作細節！ ![嘶嘶聲停止](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fistx8x0w8ee62nr1kl5.gif) 感謝您的閱讀，並希望您發現這篇文章內容豐富！我很想聽聽您是否同意（或不同意）這一點，以及您如何看待人工智慧工具驅動的程式設計的未來。 --- 原文出處：https://dev.to/wasp/ai-code-generation-vs-coding-by-hand-what-programming-is-going-to-look-like-in-202x-1idh

1個讚   0留言 134瀏覽

Pipeline 🛠️Repos 對決⚔️：Python 🐍 版

## **簡介** 在不斷發展的資料工程和自動化領域，Python 已經出現了多種工作流程編排器。在本文中，我將介紹 6 個 Python 函式庫及其一些主要功能。 ![介紹 GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d09jxm34esmawmnv93lt.gif) --- ## 1. [Taipy](https://github.com/Avaiga/taipy) Taipy 是一個開源 Python 庫，用於建立生產就緒的應用程式前端和後端。 對於 Python 開發人員來說，Taipy 是建立管道最簡單的框架之一，這要歸功於它的管道圖形編輯器 (Taipy Studio)。 然後，您可以透過 Python 腳本輕鬆執行和編排管道。一個非常酷的核心功能是每個管道執行都是註冊的。 這可以輕鬆實現假設分析、KPI 監控、資料沿襲等。 🔑特點： - 圖形管道編輯器 - 與 Taipy 前端功能整合以實現端到端部署 - 日程安排 - 管道的版本控制 - 快取等智慧功能 ![太比圖解](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28kg5av8pk2sdrvi3bl8.png) --- ![QueenB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovcc5kqd8xr9uihrggbb.gif) 您的支持意義重大🌱，並且在許多方面為我們帶來了很大的幫助，例如寫文章！ 🙏 --- ## 2. [Kedro](https://github.com/kedro-org/kedro) Kedro 是一個開源 Python 框架。 它為生產就緒的資料科學管道提供了一個工具箱。 事實上，Kedro 可以輕鬆地與成熟的 Python ML 庫集成，並提供統一的方法來實現端到端框架。 🔑特點： - 資料目錄 - 筆記本集成 - 專案模板 - 有自己的觀點，因為它強制執行特定的約定 ![Kedro 圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5zfgz36ogrixa1mfqre.png) --- ## 3. [Airflow](https://github.com/apache/airflow) 十多年來，Airflow 一直是管道領域的知名參與者。 Airbnb 建立了 Airflow 來解決資料處理和工作流程需求的內部挑戰。 眾所周知，這個強大的開源平台具有陡峭的學習曲線，但具有廣泛的功能。 該平台允許您透過建立 DAG（有向無環圖）來建立和管理工作流程。 🔑特點： - 基於DAG的定義 - 豐富的基於 Web 的監控 UI：DAG、故障、重試的可視化… - 各種集成 - 動態任務執行和調度 - 由於其以 Python 為中心的特性而具有靈活性。 - 強大的社區 ![氣流圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7a5qgpcnawim32gudhd.png) --- ## 4. [Prefect](https://github.com/PrefectHQ/prefect) Prefect 是一個資料管道開發框架。 Prefect 在策略上將自己定位在與 Airflow 的直接競爭中，以基於簡單性、用戶友好性和靈活性的獨特身份脫穎而出。 如果您想要一個具有各種功能但比 Airflow 更容易學習的成熟產品，Prefect 是一個很好的中間產品。 🔑特點： - 控制面板 - 快取 - 基於流程的結構 - 動態參數化與依賴管理 - 混合執行（本地/雲端） ![完美插畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejmhma39rkmpjg1lwu6z.png) --- ## 5. [Dagster](https://github.com/dagster-io/dagster) Dagster 是本次編譯中較新的函式庫之一，它是一個雲端原生資料管道編排，旨在統一資料整合、工作流程編排和監控。 與其他工具相比，Dagster 強調工作流程建立和管理的 DataOps 面向。 🔑特點： - 聲明式管道設置 - 固執己見的結構 - 版本控制 - 與 Hadoop 集成 - 全面的元資料跟踪 ![Dagster 圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/soebsxs4wfwxayzql8wr.png) --- ## 6. [Luigi](https://github.com/spotify/luigi) Luigi 提供了一個資料處理管道框架。 Spotify 與 Airflow 大約在同一時間開發了這個程式庫，以解決其複雜的資料工作流程和管道。 Luigi 專為管理批次作業的複雜通道而設計。如果您正在尋找簡單的東西並且必須快速上手，Luigi 是一個不錯的選擇。 🔑特點： - 內建 Hadoop 支援 - 基於任務的工作流程定義 - 用於依賴管理的中央調度程序 - 任務依賴關係視覺化 ![Luigi 插圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxx0ty0vsldbk8unyhqv.png) --- ##結論 隨著 Python 工作流程編排環境的不斷發展，這些工具展示了主要的共同特徵和特定的差異化因素。 所有這些工具都有不同程度的複雜性，了解您的專案和團隊的需求至關重要。 我建議使用非常簡單的範例來測試一些選項，以獲得對每個框架可用性的第一手了解。 --- 希望您喜歡這篇文章！ 我是一名新手作家，歡迎任何改進建議！ ![新秀圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25oebh36ha622u74kpli.gif) 如果您有任何疑問，請隨時與我們聯繫。 --- 原文出處：https://dev.to/taipy/the-pipeline-repos-showdown-python-edition-39i5

0個讚   0留言 219瀏覽

向我的 Uber 司機解釋 SSH

在這篇部落格中，我想向您解釋 SSH，就好像您是我的 Uber 司機一樣。此練習的目的是假裝您以前沒有 SSH 經驗，甚至沒有太多一般技術知識，並讓您達到以下目標： 1. 不要害怕「SSH」這個模糊的術語，因為你腦子裡有一個具體的形象。 2. 了解業界級開發人員如何使用SSH來測試程式碼變更、進行伺服器設定等。 3. 了解 SSH 的加密/授權協定如何使其優於其他工具。 讓我們開始吧！ ## SSH 概念化 什麼是 SSH？讓我用一個類比來幫助您概念化它，而不是從您在 Cloudflare 文章或維基百科頂部看到的傳統技術巨頭開始。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkzvrhuygk1ihvpl8jyw.png) 想像一下您剛放學，回到家的臥室。您感到無聊，決定戴上 VR 耳機來存取元宇宙 - 一種沉浸式體驗，將實體世界拒之門外，將您嵌入虛擬環境中。您登入並輸入使用者名稱和密碼以驗證您的身分。完成後，您會看到您的數位化身彈出。它看起來和你一模一樣——身材高大，頭髮漂亮，還有一種奇妙的時尚感。在您面前，您會看到一片森林，或者更確切地說，是森林的數位表示。仍然戴著 VR 耳機站在臥室裡，您可以移動頭部環顧四周，您的化身也會做同樣的事情。你在臥室裡說“你好森林”，你的頭像也在 VR 世界中說“你好森林”。 在現實生活中，這個類比可以翻譯為： - 你==開發者。 - 你的臥室==你的筆記型電腦，或任何你正在打字的本機。 - Metaverse == 您嘗試從本機電腦存取的遠端電腦/伺服器。 - VR 耳機 == SSH 隧道，可讓您從本機（臥室）存取遠端電腦（Metaverse）。 - 登入畫面==確保只有授權方才能使用SSH 隧道的SSH 金鑰對。我將在本部落格的後面部分更徹底地解釋這一點。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g8qhentz0jzk11q6dsj.png) 這個類比對你有什麼幫助？下次當您聽到有人說「我透過 SSH 連接到伺服器」時，您無需對「SSH」這個模糊的概念感到驚慌。相反，在你的腦海中將其改寫為“我戴上 VR 耳機來存取元宇宙”，這將使它變得更具體。 *通俗地說，SSH 就像一個安全、秘密的隧道，可讓您透過網路連接到另一台電腦。它可以幫助您在計算機上執行操作，就像您坐在計算機前面一樣。* 當然，這只是對SSH的表面、概念性理解。我希望您現在正在思考一些問題來幫助您更深入地了解 SSH。我無法讀懂你的想法，但這裡有一些我自己回答的問題，我認為向你解釋會很有用。 ## 為什麼我需要使用 SSH？ SSH 很重要，因為開發人員通常需要存取遠端電腦。例如，在您自己的筆記型電腦上會消耗太多記憶體和運算能力的大型應用程式託管在 AWS、Azure 或 Google Cloud 等雲端平台上，而這些平台都需要遠端存取。其他時候，開發團隊分佈在不同的地點，因此遠端伺服器允許團隊成員在一個一致的位置進行協作和共享程式碼，即使他們實際上不在同一位置。 讓我向您介紹兩個行業級開發人員何時需要透過 SSH 連接到遠端電腦的範例。 **1：部署程式碼** 作為開發人員，您需要將網站的新版本部署到臨時伺服器。這就是它的工作原理，使用 SSH。 在本機上，您可以使用 Git 推送最新的程式碼變更。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n568y57dn3zc9yse7n1.png) 然後，您可以透過 SSH 連線到具有臨時環境的遠端伺服器。 （順便說一句，您可能會想為什麼我需要在遠端伺服器而不是本地電腦上建立臨時環境。以下是一些原因。其中之一是最好模擬真實的設置，例如檢查效能瓶頸或可擴展性問題只會發生在伺服器環境中，而不是您的筆記型電腦中。另一個是簡單地確保所有團隊成員都可以在一致的環境中進行測試，而不是他們都在自己的電腦上擁有臨時環境，或者（上帝禁止）使用您的每當他們需要測試某些東西時就在本地機器上。） ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8401y49leoaxiglkl08i.png) 最後，您已經透過 SSH 連接到託管臨時環境的遠端伺服器，您可以從該遠端伺服器提取最新的程式碼變更、執行建置並測試您的應用程式（透過導航至 http://staging.example.com）。 **2：更新伺服器設定** 假設您正在建立的 Web 應用程式已經成長，並且您需要調整伺服器配置以適應增加的流量。以下是您可能執行的一些命令的範例： A。透過 SSH 連接到伺服器 `ssh 用戶@您的伺服器 IP` b.找到 Apache 設定檔 `cd /etc/apache2` C。備份設定檔 `cp apache2.conf apache2.conf.bak` d.編輯設定檔。 `vi apache2.conf` e.驗證配置 `apache2ctl 配置測試` **請不要覺得您需要知道這些指令的作用。** 老實說，我要求 ChatGPT 為我產生一個範例，但我自己不太明白。這裡的要點是了解開發人員在透過 SSH 連接到伺服器時可能執行的命令類型。其中很多是移動目錄（cd）、操作文件（cp）和編輯文件（vi）的簡單命令。 ## 為什麼要使用 SSH？ 我在學習 SSH 時遇到的一個問題是「SSH 的替代方案是什麼，為什麼 SSH 會勝出」？ 我想現在是快速上歷史課的好時機。 在 SSH 被廣泛採用之前，還有其他協定用於兩台機器之間的通訊。一些著名的包括 Telnet、RSH、FTP 和 Rlogin。但它們都缺乏加密和安全功能。 為了描繪一幅圖景，以下是它可能發生的情況。我（惡意駭客）獲得了 Telnet 所經過的網路的存取權限 - 您試圖透過 Telnet 協定將資訊從筆記型電腦發送到另一台電腦的網路。我使用像 Wireshark 這樣的工具來擷取流量。一旦我以下載的“資料包”的形式獲得計算機上的流量，我就可以單擊它們並查找任何登入嘗試。所有資料都是明文形式（這意味著它是人類可讀的，而不是一些亂碼），所以如果我找到它，我實際上可以使用我在我面前看到的登入資訊。正如您所看到的，這些舊工具不是很安全！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tqaab8kf12bz4089sh8.png) 1995 年，SSH 被發明。它更好有兩個主要原因。 1. 加密資料 假設從我的機器傳輸到遠端機器的部分資料是字串「用戶名：jesswang 密碼：？IamC00l！」。如果沒有加密（因此使用 Telnet 或 FTP 等舊協定），駭客將能夠像您讀取該字串一樣讀取該字串。透過加密，他們返回的資料可能看起來像「H23kLs*^!d8%PwZx0KsL!9B#N%u@i8」。實際上，加密資料將是遵守加密演算法標準（我不太了解）的不同位元組序列，但這只是為了給您一個想法。 2. 認證 Telnet 等較舊的程式僅依賴基於密碼的身份驗證。當您使用 Telnet 連線到遠端系統時，Telnet 伺服器會提示您輸入使用者名稱和密碼進行登入。然而，Telnet 以明文形式傳輸您的密碼，使駭客很容易讀取。 SSH 主要使用一種不同的（也是更好的）方法，稱為公鑰身份驗證。我將在下面解釋它的工作原理，以便您了解如何更好地保護您的資訊免受駭客攻擊。 首先，您的訊息被放入公文包中，並且您自己給它上鎖。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/punmm0o96e0ec1q6294u.png) 您將公文包傳送到遠端伺服器。遠端伺服器沒有鑰匙來解鎖您的鎖，因此遠端伺服器將自己的鎖放在公文包上。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slbbwmewrjixfy0jirok.png) 遠端伺服器將公文包傳回給您，然後您打開鎖。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3xm8hl2wzqx4q9gq27a.png) 您將公文包發送回遠端伺服器，它會用鑰匙解鎖它的鎖。然後它打開公文包，閱讀便條。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sv9jovtg5gqfrr9zs3i9.png) 這就是公鑰認證的要點！順便說一句，SSH 仍然**支援基於密碼的身份驗證，但即使如此，密碼也是加密的，因此如果駭客攔截它，他們將無法讀取它。 ## 如何使用 SSH？ 概念學習已經足夠了。下面是我透過 SSH 執行到伺服器的實際命令。 若要透過 SSH 連線到伺服器，您通常會執行下列命令：`ssh username@server_ip_or_hostname` 您可以將使用者名稱替換為您在伺服器上的實際使用者名稱 您可以將 server_ip_or_hostname 替換為伺服器的 IP 位址或主機名稱。例如，「ssh [email protected]」。 執行該命令後，系統可能會提示您輸入伺服器使用者名稱的密碼。或者，如果您的伺服器使用我們在上一節中介紹的基於金鑰的身份驗證，則可能不會提示您輸入密碼。 進入後，您可以開始執行命令。這些命令將在您連接的遠端伺服器上執行。 我知道，如果您不自己親自輸入內容並看看會發生什麼，就很難充分學習。如果您已經設定了用於工作或個人的遠端伺服器，請隨意嘗試。如果您沒有可連接的遠端伺服器，那也沒關係。您可以按照以下步驟操作： 1. 存取http://sdf.org/ 2. 建立帳戶。您可能會收到一封電子郵件，為您提供為您的帳戶產生的密碼。您可能需要等待 1-2 秒才能收到該電子郵件（至少這是我的經驗）。 3. 您可以透過執行「ssh <your_username>@sdf.org」透過 SSH 存取公共 UNIX 系統。例如，我的用戶名是 poop123。所以我執行了“ssh [email protected]”。 4. 出現提示時，輸入您先前獲得的密碼。 5. 您已成功透過 SSH 連線到伺服器！您可以執行「echo 'hello world'」等指令來列印「hello world」或「ls」來查看目前目錄中的檔案清單。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncm79f92w68a034ghiup.gif) ## 讀者須知/結論 雖然透過SSH 連接到另一台伺服器相對容易（也許你的同事給你一個命令，你只需將其貼到命令列中），但我發現如果我不理解（至少在高層次上）什麼，則很難使用該命令當我執行它時發生。希望其他人能與我聯繫，這個部落格將有助於解決這個問題。 如果您好奇我是如何想出這個標題的，這個故事位於本系列原始博客的介紹段落中，[“向我的 Uber 司機解釋 Kubernetes”](https://dev.to/therubberduckiee/explaining-kubernetes-to-my-uber-driver-4f60)。 一如既往，我希望收到有關此部落格中的訊息、圖畫或故事講述的任何反饋。請告訴我您還想讓我寫哪些其他主題。 以下是我在撰寫此部落格時參考的一些資源： - 聊天GPT - SSH 初學者指南 [Youtube 影片](https://www.youtube.com/watch?v=qWKK_PNHnnA) - 我對上述影片的 60 秒 [TikTok 影片摘要](https://www.tiktok.com/@therubberduckiee/video/7213401342403005738?lang=en)。 - 我使用 [Charm VHS](https://github.com/charmbracelet/vhs) 來產生您看到的最後一個 gif。非常酷的工具，可讓您建立並輕鬆編輯與 CLI 相關的簡報。 - 我用來拍攝示範的終端，[Warp](https://www.warp.dev/)（這也是我工作的公司。我強烈建議您查看我們）。 --- 原文出處：https://dev.to/therubberduckiee/explaining-ssh-to-my-uber-driver-38a

0個讚   0留言 143瀏覽

程式設計師的 100 個願望清單想法

科技愛好者常有遠大的夢想，渴望實現突破創新和個人發展界限的目標。為了幫助建立這些雄心壯志，我為科技愛好者量身定制了廣泛的願望清單。此清單不僅概述了各種目標，還包括「靈感」、「如何」、「年份」、「狀態」和「紀念品」等附加欄，為您的技術之旅提供全面的路線圖。 ## 清單中有什麼？ 該清單涵蓋了廣泛的目標，從培養特定技能（例如達到 150 WPM 的打字速度）到雄心勃勃的專案（例如製作 DIY 電動滑板或自行車）。它包括參加重大活動，例如參加大型技術會議，以及個人發展的里程碑，例如指導初級開發人員。每個目標都經過分類以便於參考，涵蓋 DIY 專案、程式設計、開發、學習等領域。 ## 列表 [我的遺願清單進度](https://syki.dev/bucket-list) |目標|類別|靈感|年份|狀態|紀念品| |---------------------------|----------------|----------------| ----|------|--------| |成為大型專案的貢獻者 |開發 |[如何像專業人士一樣開源](https://www.youtube.com/watch?v=MT6M_sqAuZo) | | | | |建立新聞聚合器 |開發 |[Feedly](https://feedly.com/) | | | | |建立實體引擎 |開發 |[我正在從頭開始編寫整個實體引擎](https://www.youtube.com/watch?v=iSMbRGTBOHU) | | | | |建立推薦系統 |開發 |[推薦系統如何運作 (Netflix/Amazon)](https://www.youtube.com/watch?v=n3RKsY2H-NE) | | | | |建構情緒分析工具 |開發 |【2023 如何掌握人工智慧驅動的情緒分析？】(https://brand24.com/blog/sentiment-analysis/) | | | | |建立擴增實境 (AR) 應用程式 |開發 |[關於如何在 2023 年建立擴增實境應用程式的指南](https://www.tekrevol.com/blogs/how-to-build-an-augmented-reality -應用程式/) | | | | |建置與部署聊天伺服器 |開發 |[IRC](https://en.wikipedia.org/wiki/Internet_Relay_Chat) | | | | |建立網路安全工具|開發|[Kali Tools](https://www.kali.org/tools/) | | | | |建立多人線上遊戲|開發|[Dani](https://www.youtube.com/watch?v=_ze26M_Fm6g) | | | | |建立 PWA（漸進式 Web 應用程式）|開發 |[PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) | | | | |建立 AI 影響者 |開發 |[AI 影響者變得非常富有...讓我們建立一個](https://www.youtube.com/watch?v=ky5ZB-mqZKM&t=11s) | | | | |開發區塊鏈應用程式 |開發 |[使用以太坊智能合約和 Solidity 建置您的第一個區塊鏈應用程式](https://www.youtube.com/watch?v=coQ5dg8wM2o) | | | | |開發一種加密貨幣 |開發 |[您需要立即建立一種加密貨幣！！](https://www.youtube.com/watch?v=befUVytFC80) | | | | |開發VR 應用程式|開發|[教學 - 在Meta Quest 耳機上建立您的第一個VR 應用程式](https://developer.oculus.com/documentation/unity/unity-tutorial-hello-vr/) | | | | |開發一個電子商務網站 |開發 |[Next.js Commerce](https://nextjs.org/commerce) | | | | |開發開源遊戲引擎 |開發 |[C++ 中的 GameDev](https://www.youtube.com/watch?v=LyJkcv_rL9Y&list=PLpM-Dvs8t0Va6RoHkaLuPbRh7Fwpy4nbV) | | | | |開發瀏覽器擴充 |開發 |[Chrome 擴充應該會嚇到你。](https://www.youtube.com/watch?v=xIKwkPWUgOA) | | | | |在 github 上有一個擁有 100 顆星的專案 |開發 |[Linus Torvalds](https://github.com/torvalds?achievement=starstruck&tab=achievements) | | | | |擁有自己的 Tor 頁面 |開發 |[我在 Raspberry Pi 上放置了一個 DARK WEB 網站！!](https://www.youtube.com/watch?v=bllS9tkCkaM) | | | | |發明手勢控制介面 |開發 |[鋼鐵人](https://www.youtube.com/watch?v=P5k-4-OEuTk) | | | | |建立持續整合/持續部署管道|開發|[自動化您的工作流程](https://github.com/features/actions)從想法到生產]| | | | |設定 Kubernetes 叢集 |開發 |[為什麼要建置 Raspberry Pi 叢集？](https://www.youtube.com/watch?v=8zXG4ySy1m8) | | | | |贊助開源專案 |開發 |[投資為您的世界提供動力的軟體](https://github.com/sponsors) | | | | |使用查詢機制編寫自己的資料庫|開發|[製作我們自己的資料庫](https://acmiitr.medium.com/making-our-own-database-part-1-6cd9c49ed924) | | | | |在靜態網站產生器中撰寫頁面 |開發 |[Gatsby](https://www.gatsbyjs.com/) | | | | |編寫單頁應用程式 |開發 |[React](https://react.dev/) | | | | |使用 Raspberry Pi 專案實現家居自動化 |DIY |[我建立了一個更聰明的智慧家庭](https://www.youtube.com/watch?v=0rIvB3LZiKA) | | | | |建立自訂鍵盤 |DIY |[建立自己的機械鍵盤......正確的方式](https://www.youtube.com/watch?v=bBon6WwkdJE) | | | | |DIY電動滑板或自行車 |DIY |[我做了一個電動滑板！](https://www.youtube.com/watch?v=3bcvFzecg2Q) | | | | |以自訂遊戲建立迷你街機 |DIY |[終極 DIY 街機指南](https://www.youtube.com/watch?v=oTydZBIGAuk) | | | | |組裝一台 PC |DIY |[為 Minecraft 組裝一台價值 100,000 美元的 PC](https://www.youtube.com/watch?v=AHR80l7od2Q) | | | | |建立個人雲端儲存系統 |DIY |【這是我的終局之戰 - Mother Vault 伺服器機房更新】(https://www.youtube.com/watch?v=pLC0FUnko-M) | | | | |利用 IoT 建造自動澆水花園系統 |DIY |[Arduino 花園控制器 - 自動澆水和資料記錄](https://www.youtube.com/watch?v=O_Q1WKCtWiA) | | | | |打造小型自動駕駛汽車或機器人 |DIY |[快速巡線機器人](https://www.youtube.com/watch?v=lnP32gzHdvI) | | | | |建造水下ROV |DIY |[建造一艘DIY潛水艇](建造一艘DIY潛水艇) | | | | |搭建並飛行 FPV 無人機 |DIY |[為什麼要以 800mW 功率自由式飛行？ | [FPV](https://www.youtube.com/watch?v=bBb_kSO3vTo) | | | | |設計具有互動功能的智慧鏡子|DIY |[DIY智慧鏡子 - 完整教學](https://www.youtube.com/watch?v=OYlloiaBINo) | | | | | 以 3D 方式設計和列印一些東西 |DIY |[我在房間中央製作了一個機器人手臂！](https://www.youtube.com/watch?v=nRsaf16EdNM) | | | | |設計您自己的 PCB |DIY |[PCB 建立初學者 - 10 分鐘內開始完成教程](https://www.youtube.com/watch?v=MsdJgEinb34) | | | | |修復損壞的電子產品 |DIY |[ElectroBOOM](https://www.youtube.com/@ElectroBOOM) | | | | |在本地擁有自己的伺服器 |DIY |[為什麼要建立 Raspberry Pi 叢集？](https://www.youtube.com/watch?v=8zXG4ySy1m8) | | | | |實現智慧家庭|DIY |[我建造了一個更聰明的智慧家庭](https://www.youtube.com/watch?v=0rIvB3LZiKA) | | | | |製作機械手臂 |DIY |[我在房間中央製作了機械手臂！](https://www.youtube.com/watch?v=nRsaf16EdNM) | | | | | 用 Flipper Zero 開啟一些東西 |DIY |[這讓駭客攻擊太容易了 - Flipper Zero](https://www.youtube.com/watch?v=nLIp4wd0oXs) | | | | |成為智慧型手機應用程式的擁有者|創業|[VoidLog](https://www.youtube.com/watch?v=LY4rxYe-jKI&list=PLN3n1USn4xllDDLwgJ4avEqgj4dWynofp) | | | | |開發 SaaS 產品 |創業精神|[我如何在一天內建立一個新的 SaaS 產品](https://www.youtube.com/watch?v=v_3lcqUOaOA) | | | | |在店裡擁有自己的遊戲 |創業|[Dani](https://www.youtube.com/watch?v=_ze26M_Fm6g) | | | | |在新創公司工作 |創業精神|[新創工程師在家工作的一天](https://www.youtube.com/watch?v=TLysAkFM4cA) | | | | |一週多相睡眠|創業|| | | | |參加播客 |創業|[Lex Fridman](https://www.youtube.com/lexfridman) | | | | |完全存取伺服器 - 黑客 |黑客 |[先生。機器人](https://www.youtube.com/watch?v=QqknSms8VVI&t=16s) | | | | |獲得錯誤賞金 |駭客 |[HackerOne](https://www.hackerone.com/) | | | | |在奪旗大賽中進行駭客攻擊 |駭客攻擊 |[Mr.機器人](https://www.youtube.com/watch?v=6MrQ-mN8HM8) | | | | |編寫惡意軟體 |駭客 |[惡意軟體開發：進程、執行緒與句柄](https://www.youtube.com/watch?v=aNEqC-U5tHM) | | | | |150 wpm 速度打字 |程式設計 |[Monkeytype](https://github.com/monkeytypegame/monkeytype) | | | | |使用 Python 腳本自動化您的日常任務 |程式設計 |[開始使用 Python 自動化您的生活！ （Python檔案管理教學）](https://www.youtube.com/watch?v=NCvI-K0Gp90) | | | | |建立 Twitter 機器人 |程式設計 |[如何使用人工智慧發布熱門推文 // Twitter 機器人教學](https://www.youtube.com/watch?v=V7LEihbOv3Y) | | | | |編譯您自己的 Linux 核心 |程式設計 |[如何編譯自訂 Linux 核心](https://www.youtube.com/watch?v=APQY0wUbBow) | | | | |建立聊天機器人 |程式設計 |[使用深度學習、Python 和 TensorFlow 建立聊天機器人 p.1](https://www.youtube.com/watch?v=dvOnYLDg8_Y&list=PLQVvvaa0QuDdc2k5dwtDTyT9aCja0on8j) | | | | |使用 D3.js 建立資料視覺化專案 |程式設計 |[使用 D3.js 進行資料視覺化 - 完整教學課程](https://www.youtube.com/watch?v=_8V5o2UHG0E) | | | | |建立照片編輯工具 |程式設計 |[如何製作照片編輯應用程式的完整指南](https://www.cleveroad.com/blog/how-to-build-a-photo-editing-app-like-棱鏡並使其蓬勃發展/) | | | | |開發數位藝術作品產生器 |程式設計 |[如何為初學者產生瘋狂的人工智慧藝術（Midjourney V4）](https://www.youtube.com/watch?v=zf4z8A-OWBY) | | | | |開發檔案加密工具 |程式設計 |[製作您自己的加密程式](https://www.youtube.com/watch?v=TZT7wvTeVyY) | | | | |開發影片編輯軟體|程式設計|[我寫了一個影片編輯器（有點糟糕）](https://www.youtube.com/watch?v=iydG-e1dQGA) | | | | |開發語音助理應用程式 |程式設計 |[建立由 OpenAI 和 Python 驅動的 Jarvis | ChatGPT](https://www.youtube.com/watch?v=BEw5EFqCCEI) | | | | |開發智慧手錶應用程式 |程式設計 |[使用 Android Studio 在 WearOS 上建立並執行穿戴式應用程式](https://www.youtube.com/watch?v=-JO5oHRkybk) | | | | |開發您自己的 Slack/Discord 機器人 |程式設計 |[使用 Python 編寫 Discord 機器人 - 在雲端免費託管](https://www.youtube.com/watch?v=SPTfmiYiuok) | | | | |實現臉部辨識系統 |程式設計 |[從紙張到程式碼建立深度臉部辨識應用程式](https://www.youtube.com/watch?v=bK_k7eebGgc&list=PLgNJO2hghbmhHuhURAGbe6KWpiYZt0AMH) | | | | |學習函數式程式語言 |程式設計 |[函數式程式設計 - 概述](https://www.youtube.com/watch?v=8z_bUIl_uPo) | | | | |學習古老的語言 |程式設計 |[100 秒內的 COBOL](https://www.youtube.com/watch?v=7d7-etf-wNI) | | | | |學習並使用 Docker 進行容器化 |程式設計 |[Docker](https://www.docker.com/) | | | | |學習極快的語言 |程式設計 |[ThePrimeagen](https://www.youtube.com/@ThePrimeagen) | | | | |學習一門不尋常的語言（例如 Brainfuck） |程式設計 |[100 秒內完成 Brainfuck](https://www.youtube.com/watch?v=hdHjjBS4cs8) | | | | |學習量子運算基礎 |程式設計 |[在量子電腦上編碼](https://www.youtube.com/watch?v=q3ecPsMd4tA) | | | | |掌握高階演算法與資料結構（100道LeatCode） |程式設計|【569道 Leetcode 題後的我的大腦】(https://www.youtube.com/watch?v=8wysIxzqgPI) | | | | |對自訂語音控製家庭助理進行程式設計 |程式設計 |[建立由 OpenAI 和 Python 提供支援的 Jarvis | ChatGPT](https://www.youtube.com/watch?v=BEw5EFqCCEI) | | | | |對微控制器進行程式設計 |程式設計 |[微控制器程式設計駭客指南 [教學]](https://www.youtube.com/watch?v=XlFO5Iat178) | | | | |在 Vim 中編程 |程式設計 |[Vim 作為你的編輯器](https://www.youtube.com/watch?v=X6AR2RMB5tE&list=PLm323Lc7iSW_wuxqmKx_xxNtJC_hJbQ7R) | | | | |使用分離式鍵盤|編程|[拆箱新鍵盤！！！ （也進行打字測試！）](https://www.youtube.com/watch?v=nh-BAxbithc&t=156s) | | | | |網頁抓取資料 |程式 |[使用 AI 和代理網路進行工業規模的網頁抓取](https://www.youtube.com/watch?v=qo_fUjb02ns) | | | | |用組合語言寫程式 |程式設計 |[Tsoding](https://www.youtube.com/watch?v=WnBXLmKk_qw&t=82s) | | | | |寫一個 NPM 模組 |程式設計 |[NPM](https://www.npmjs.com/) | | | | |編寫伺服器端應用程式 |程式設計 |[Next.js](https://nextjs.org/) | | | | |編寫您自己的人工智慧模型 |程式設計 |[讓我們建立 GPT：從頭開始，用程式碼，拼寫出來。](https://www.youtube.com/watch?v=kCc8FmEb1nY) | | | | |編寫您自己的作業系統 |程式設計 |[Linus Torvalds](https://github.com/torvalds) | | | | |寫你自己的程式語言 |程式設計 |[我製作了自己的程式語言](https://www.youtube.com/watch?v=pgeSGBwtHW8&t=132s) | | | | |擁有私人部落格 |教學 |[Dan Abramov](https://overreacted.io/) | | | | |對學生的講座 |教學 |[馬克·祖克柏的 CS50 講座 - 2005 年 12 月 7 日](https://www.youtube.com/watch?v=xFFs9UgOAlE&t=807s) | | | | |指導初級開發人員 |教學 |[如何正確指導初級開發人員](https://stablekernel.com/article/how-to-properly-mentor-a-junior-developer/) | | | | |寫一篇關於科技主題的論文並發表 |教學 |[兩分鐘論文](https://www.youtube.com/@TwoMinutePapers) | | | | |編寫技術書籍或電子書 |教學 |[編寫技術書籍](https://paulcunningham.me/writing-technical-books/) | | | | |參加大型科技會議 |旅遊 |[CES](https://www.ces.tech/) | | | | |參加黑客松 |旅行 |[我挑戰自己贏得黑客馬拉松](https://www.youtube.com/watch?v=mAJlZUKhOGs) | | | | |參觀電腦歷史博物館 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀 NASA 約翰遜航天中心 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀國家航空暨太空博物館 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀歷史科學儀器收藏 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀大型強子對撞機 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀麻省理工學院博物館 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀國家核科學與歷史博物館 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | ### 下載列表 [下載 CSV](https://syki.dev/uploads/bucket-list.csv) [下載 JSON](https://syki.dev/uploads/bucket-list.json) ## 附加列解釋 ### 靈感 本專欄反映了是什麼激發了追求特定目標的想法或願望。它可以是一個人、一個事件、一本書，甚至一部電影，點燃了人們對特定成就的熱情。例如，DIY 電動滑板的靈感可能是對永續交通的熱情或最喜歡的科技影片部落客的專案。 ### 年 本專欄提出了實現該目標的時間表或目標年份。它有助於規劃和設定現實的時間表。例如，您可能計劃在 2025 年之前參加一次大型技術會議。 ### 地位 狀態追蹤您的進度。它可以是“未開始”“進行中”“已完成”或“暫停”這有助於追蹤您的旅程並保持動力。 ### 紀念品 本專欄是一個獨特的補充，旨在紀念這一成就。它可以是實體、數位徽章、部落格文章，甚至是照片。例如，組裝 PC 的紀念品可能是已完成設定的第一張照片。 ## 結論 技術愛好者的願望清單不僅僅是目標的集合；這是技術領域個人和職業成長的路線圖。透過附加專欄提供靈感、方法、計時、追蹤和紀念成就的框架，此列表對於任何熱衷於技術的人來說都是一個動態工具。 快樂的科技冒險！ --- 原文出處：https://dev.to/syki/100-bucket-list-ideas-for-programmers-506m

1個讚   0留言 345瀏覽

🚨 🚀 25 個原因（你必須知道！！）為什麼「Listicles」對 dev.to 不利 🤯 👿 🚨

是的，這篇文章的標題就是一個例子，類似於許多所謂的「Listicles」之一，這些「Listicles」一直在開發人員中亂扔。它們的標題充滿了表情符號和「你必須知道」或「對任何開發人員來說都是必不可少的」之類的詞語，它們吸引了我們人類天生的好奇心。 ## 重要的！ ### 並非所有清單都不好！ 請遵循以下準則來建立一個好的指南： - 確定目的：明確定義清單的目的和目標。您想提供讀者什麼資訊或價值？ - 選擇相關表情符號：選擇與內容相符並有助於您想要傳達的訊息的表情符號。確保它們不會讓人不知所措或分散注意力。 - 提供有意義的內容：專注於建立內容豐富且寫得好的文本，為讀者提供價值。表情符號應該補充內容而不是掩蓋內容。 - 評估整體影響：在發布之前，請檢查清單文章，以確保標題中使用表情符號或潛在的標題誘餌文字可以增強讀者的體驗並支持文章的預期目的。 透過執行這些步驟，您可以建立一個清單文章，該文章可以根據需要有效地包含盡可能多的表情符號和「您必須知道」文本，同時保持內容的品質和實質內容。 ![dev.to 上的點擊誘餌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5tcsqtizqxzg10tvo1l.png) ![更多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90n3gpjrhz13i0w17z5o.png) 本質上，它們是點擊誘餌。這些帖子訴諸了人性中被稱為“FOMO”的東西。 ## 什麼是 FOMO？ FOMO 代表「害怕錯過」。這是一種以焦慮或不安的感覺為特徵的現象，這種感覺來自於相信其他人可能擁有自己未參與的有益經驗或機會。 FOMO 通常與社交媒體以及其他人分享的持續更新和活動聯繫在一起。 ## 什麼是「表情符號誘餌」？ 這些貼文利用的另一件事是「表情符號誘餌」。這個概念最近才被探索。它涉及使用 🤯、🚨、👿 和 🚀 等表情符號在社交媒體平台上操縱人們的情緒。人工智慧（AI）是這方面的專家。 **為什麼這些貼文不好？** 因為幾乎不可能找到任何好的內容！ 作為內容創作者，我們有責任以各種可能的方式支持我們的開發者同行的成長。在下面的評論中，讓我們討論如何在 DEV 這樣的平台上實現這一目標。我很想聽聽您對此事的看法。如何才能提升DEV社群的價值，讓所有開發者不那麼難以承受？ 請記住，成為一名出色的開發人員不僅僅需要了解所有可用的工具或資源。這是關於磨練解決問題的能力、培養創造力和擁抱終身學習。讓我們優先考慮這些基本技能，其餘的就自然而然了。 而且，正如所承諾的，這裡有 🚀 🚨 對於 dev.to 🤯 🚨 來說「Listicles」不好的 25 個原因。當您閱讀清單文章時，請考慮它如何反映其內容（畢竟，它本身就是清單文章） {% 可折疊 點選展開並查看清單 %} 1.內容淺薄：清單文章和點擊誘餌通常優先考慮簡潔性而不是深度，導致主題覆蓋膚淺。 2. 缺乏脈絡：它們提供的脈絡或背景資訊有限，使讀者的理解支離破碎。 3. 過度簡化：複雜的主題可能會過度簡化以適應清單格式，導致誤解和誤解。 4.標題誘餌：使用聳人聽聞或誤導性的標題來吸引點擊，損害內容的完整性。 5. 誤導性資訊：清單文章和點擊誘餌可能包含不準確或過時的訊息，導致讀者誤入歧途。 6. 缺乏可信度：有些缺乏可靠的來源或參考資料，導致難以驗證所提供資訊的準確性。 7. 內容重複：類似主題的清單文章經常有重複的內容，對尋求新見解的讀者沒有什麼價值。 8.缺乏深度：由於篇幅限制，清單文章很少深入研究某個主題的複雜或微妙的面向。 9. 阻礙批判性思考：清單文章和標題誘餌提供填鴨式訊息，阻礙讀者進行批判性思考和分析。 10. 忽略替代觀點：他們通常提出單一觀點，排除不同或互相衝突的意見。 11. 貨幣化高於品質：有些人優先考慮透過廣告創造收入，而不是製作高品質、資訊豐富的內容。 12. 不切實際的期望：清單文章和點擊誘餌可能會在沒有適當支持的情況下做出廣泛的主張或承諾，從而造成不切實際的期望。 13.內容研究不足：由於急於快速製作內容，一些內容缺乏徹底的研究和事實查核。 14. 缺乏原創性：許多人重複使用其他來源的內容，但沒有加入任何獨特的價值或見解。 15. 話題過度飽和：熱門話題經常被重複提及，導致社群充斥著冗餘內容。 16. 忽略長篇寫作：清單文章和標題誘餌掩蓋了長篇文章，削弱了深入分析的重要性。 17. 抑制學習：清單文章和點擊誘餌的小規模性質可能會阻礙讀者尋求全面的學習經驗。 18.注意力持續時間縮短：持續閱讀清單文章和點擊誘餌可能會導致注意力持續時間縮短，並減少對詳細內容的關注。 19. 浪費點擊：清單文章和點擊誘餌可能會用誘人的標題來吸引讀者，但結果卻是提供膚淺或無用的內容。 20. 失去細微差別：複雜的主題在簡化為編號列表時就失去了細微差別，從而過度簡化了重要細節。 21. 缺乏參與度：清單文章和點擊誘餌由於其膚淺的性質，經常無法產生有意義的討論或社區參與。 22. 創造力下降：它們可能會扼殺創意表達和原創性，因為作者覺得必須遵守清單格式。 23. 寫作標準下降：對快速清單文章和標題誘餌的需求可能會降低社群內寫作的整體品質和標準。 24. 延續線上瀏覽：清單文章和點擊誘餌助長了瀏覽而不是深度閱讀的文化，影響了整體理解。 25. 專業知識貶值：它們可能削弱主題專家的專業知識，因為他們的見解被濃縮或過度簡化。 {% 結束折疊 %} 我希望您覺得這篇文章很有趣！如果您對我做的其他事情感興趣，請查看我的網站： [https://the-best-codes.github.io/](https://the-best-codes.github.io/?ref=dev.to_post&click=https://dev.to/best_codes/25-原因-你-必須-知道-為什麼-listicles-are-bad-for-devto-1hok/&site=https://dev.to/&reason=best-codes-bad-listicles-post) 謝謝閱讀！ _2023年12月13日：_ _更新說明：_ 您可能已經看過我的一些帖子，“面向 Web 開發人員的 11 個令人驚嘆的書籤🔖 🚀（它們是什麼？🤔）”、“6️⃣ 常見瀏覽器：它們到底有多安全？ 🔒 😯」和「為無聊的程式設計師提供的 10 個有趣的 Web 開發專案創意 👍」。我相信這些不是“列表文章”或標題誘餌，因為它們並不淺薄，而且它們不僅僅是一個列表。如果您對其中任何一個有不同的意見，請告訴我如何改進它們！ --- 原文出處：https://dev.to/best_codes/25-reasons-you-must-know-why-listicles-are-bad-for-devto-1hok

0個讚   0留言 89瀏覽

中英文夾雜出現的文章處理工具

看到一篇滿好的文章 https://jiongks.name/blog/introducing-zhlint 作者親自寫了一個工具 值得學習

0個讚   0留言 180瀏覽

為 2023 年準備好你自己的 DEV 🎁

隨著每個人和他們的貓為他們的應用程式建立一個“2023 Wrapped”，我無法阻止，不得不為這個很棒的 dev.to 社區建立一個小型開源應用程式 🥰 造訪[devto-wrapped.sliplane.app](https://devto-wrapped.sliplane.app/?username=code42cate)，輸入您的用戶名，看看您作為dev.to 的作者在2023 年取得了什麼成就！ **無需 API 金鑰或登入！** 這是我在 dev.to 的第一年的經驗： ![我的包裹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4zst6ibuahiq6wtk0e1.png) PS：在評論中分享你的截圖，我會隨機挑選一個人，給他們發送一些免費的開發者貼紙作為提前的聖誕禮物🎅🎁 不管怎樣，你來這裡是為了學習一些東西，所以讓我們深入研究程式碼吧！ ## 教程 建立這個小應用程式的速度對我來說至關重要，因此我決定使用我最近使用的自己的[Hackathon Starter Template](https://dev.to/code42cate/how-to-win-any-hackathon -3i99)寫了關於。我剝離了一些我不需要的功能，從而產生了一個非常精簡的 monorepo： 1.Next.js + Tailwind 2. ShadcnUI 你可以在這個[Github儲存庫](https://github.com/Code42Cate/devto-wrapped)中看到所有內容 ### 設定 如果您想長期關注並親自嘗試一下，請按照以下步驟操作： ``` # Clone repository git clone https://github.com/Code42Cate/devto-wrapped.git # Install dependencies pnpm install # Start app pnpm run dev --filter web ``` 該應用程式現在應該從 http://localhost:3000 啟動。如果它不起作用，請在評論中告訴我！ ### 存取 dev.to 資料 這個小應用程式最有趣的部分可能是我們如何存取 dev.to 資料。雖然有幾種方法可以解決這個問題，但我有一些要求幫助我決定前進的方向： 1. 不抓取 - 花費太長時間，我希望資料可用 <1 秒 2. 僅公開資料 - 我不想向使用者詢問 API 金鑰或使用我自己的 3.不需要資料庫－我很懶，想避免無用的複雜性 這為我們提供了兩種可能的獲取資料的方式： 1. [記錄和未經驗證的 API 呼叫](https://developers.forem.com/api/v1) 2. 即使您未登錄，dev.to 網站也會進行未記錄的公開 API 呼叫 考慮到這兩種獲取資料的方式，我們基本上可以獲得 3 類資料： 1.使用API公開使用者資訊：`dev.to/api/users/by_username` 2. 使用 `dev.to/search/feed_content` API 和 `class_name=Article` 發布帖子 3. 包含 `dev.to/search/feed_content` 和 `class_name=Comment&search_fields=xyz` 的搜尋查詢的評論 這些 API 呼叫都是在伺服器端進行的，以加快請求速度，可以在「/apps/web/actions/api.ts」中找到。由於這只是組合在一起，因此功能相當簡單，錯誤處理也非常少： ``` export async function getUserdata(username: string): Promise<User | undefined> { const res = await fetch( `https://dev.to/api/users/by_username?url=${username}`, ); if (!res.ok) { return undefined; } const data = await res.json(); return data as User; } ``` 對於這個用例來說，這很好，但如果您不希望用戶發生意外崩潰，請記住正確捕獲異常並驗證您的類型😵 ### 計算統計資料 計算統計資料出奇地容易，主要是因為我們的資料非常小。即使你每天發帖，我們只會瀏覽 365 個帖子。迭代 365 個專案的陣列幾乎不需要時間，這給了我們很大的空間來完成工作，而無需關心效能！您在頁面上看到的每個統計資料都是在單一函數中計算的。以「總反應」為例： ``` const reactionsCount = posts?.reduce( (acc: number, post: Article) => acc + post.public_reactions_count, 0, ); ``` 我們需要做的就是檢查帖子陣列並總結每個帖子的“public_reactions_count”數量。田田，完成！ 即使對於更複雜的，它也只不過是一個嵌套循環： ``` const postsPerTag: Record<string, number> = posts?.reduce( (acc: Record<string, number>, post: Article) => { post.tag_list.forEach((tag) => { acc[tag] = acc[tag] ? acc[tag] + 1 : 1; }); return acc; }, {} as Record<string, number>, ); ``` ### 前端 由於這是使用 Next.js 建構的，因此所有內容都可以在「/apps/web/app/page.tsx」檔案中找到。 在元件的頂部，您可以先看到我們如何取得資料並檢查使用者是否存在或是否有足夠的資料來顯示任何內容： ``` const user = await getUserdata(username); if (!user) { return <EmptyUser message="This user could not be found 🫠" />; } const stats = await getStats(user.id.toString()); const mentionsCount = await getMentionedCommentCount(user.username); if (stats.postCount === 0) { return <EmptyUser message="This user has no posts 🫠" />; } ``` 不同的統計資料都是它們自己的元件，它們是 CSS 網格的一部分，看起來像這樣（縮短） ``` <div className="grid grid-cols-2 gap-2 w-full text-sm text-gray-800"> <PublishedPostsCard count={stats.postCount} /> <ReactionsCard count={stats.reactionsCount} /> <BusiestMonthCard busiestMonth={stats.busiestMonth} postsPerMonth={stats.postsPerMonth} /> <CommentsCard count={stats.commentsCount} /> <ReadingTimeCard readingTime={stats.readingTime} totalEstimatedReadingTime={stats.totalEstimatedReadingTime} /> </div> ``` 這些元件都是「啞」的，這意味著它們只負責顯示資料。他們不獲取或計算任何東西。其中大多數都非常簡單，就像這張「最佳貼文」卡： ``` import Image from "next/image"; import { Article } from "@/actions/api"; export default function BestPostCard({ post, coverImage, }: { post: Article; coverImage: string; }) { return ( <div className="flex w-full flex-col justify-between gap-2 rounded-xl border border-gray-300 bg-white p-4 shadow-md"> Your fans really loved this post: <br /> <Image src={coverImage} alt={post.title} width={500} height={500} className="rounded-md border border-gray-300" /> <a className="font-semibold underline-offset-2" href={`https://dev.to${post.path}`} > {post.title} </a> </div> ); } ``` ### 部署 為了部署我們的應用程式，我們將對其進行dockerize，然後使用Sliplane（稍微有偏見，我是聯合創始人！）將其託管在我們自己的[Hetzner Cloud](https://www.hetzner.com /cloud) 伺服器上。我在[上一篇部落格文章](https://dev.to/sliplane/understanding-nextjs-docker-images-2g08)中介紹瞭如何對Next.js 應用程式進行docker 化，這基本上是相同的，只是做了一些小的更改適應我的 Turborepo 設定:) ``` # src Dockerfile: https://github.com/vercel/turbo/blob/main/examples/with-docker/apps/web/Dockerfile FROM node:18-alpine AS alpine # setup pnpm on the alpine base FROM alpine as base ENV PNPM_HOME="/pnpm" ENV PATH="$PNPM_HOME:$PATH" RUN corepack enable RUN pnpm install turbo --global FROM base AS builder # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. RUN apk add --no-cache libc6-compat RUN apk update # Set working directory WORKDIR /app COPY . . RUN turbo prune --scope=web --docker # Add lockfile and package.json's of isolated subworkspace FROM base AS installer RUN apk add --no-cache libc6-compat RUN apk update WORKDIR /app # First install the dependencies (as they change less often) COPY .gitignore .gitignore COPY --from=builder /app/out/json/ . COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml COPY --from=builder /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml RUN pnpm install # Build the project COPY --from=builder /app/out/full/ . COPY turbo.json turbo.json RUN turbo run build --filter=web # use alpine as the thinest image FROM alpine AS runner WORKDIR /app # Don't run production as root RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs USER nextjs COPY --from=installer /app/apps/web/next.config.js . COPY --from=installer /app/apps/web/package.json . # Automatically leverage output traces to reduce image size # https://nextjs.org/docs/advanced-features/output-file-tracing COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./ COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static COPY --from=installer --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public CMD node apps/web/server.js ``` 在 Docker 化並推送到 Github 儲存庫後，我們需要做的就是在 Sliplane 中建立一個新服務並選擇我們想要託管的伺服器。我已經有一台伺服器，在上面執行一些小型專案，所以我只使用該伺服器： ![Sliplane 建立服務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r1wfded0cy9vhw103dx.png) 點擊「部署」後，需要幾分鐘時間來建置並啟動我們的 Docker 映像。可以在日誌檢視器中監視進度： ![Sliplane 日誌檢視器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpmxb1jlp540qvblxmoa.png) 第一次成功部署後，我們將獲得一個可以存取我們的應用程式的免費子網域，或者我們可以加入自己的自訂網域： ![網域](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc7h2eu1ctw8o5xeq9xp.png) 就是這樣！我們的應用程式在線，世界上每個人都可以存取，並且不會產生令人驚訝的無伺服器帳單 🤑 感謝您到目前為止的閱讀，不要忘記用您的截圖進行評論，以_可能_贏得一些貼紙😊 乾杯，喬納斯 --- 原文出處：https://dev.to/code42cate/devto-wrapped-2023-13o

0個讚   0留言 104瀏覽

每個開發者都應該收藏的 19 個 GitHub 儲存庫 📚👍

在當今動態的軟體開發世界中，保持最新的工具、程式庫和框架對於開發人員來說至關重要。 GitHub 提供了寶貴的儲存庫寶庫，可顯著提高您的開發技能和專業知識。 我整理了每個開發人員都應該了解的 19 個 GitHub 儲存庫的列表，為學習、實踐和靈感提供了豐富的資源。 每個儲存庫都分為子類別，以便於導航。我還加入了直接連結和描述，以便立即獲得印象。 --- ## 1\. [集算器SPL](https://github.com/SPLWare/esProc)（贊助） 集算器SPL是新一代資料處理語言，整合SQL資料庫，支援進階分析與平行處理。 透過集算器SPL，您可以輕鬆轉換和分析大量資料集，發現隱藏的模式和趨勢，並從資料中獲得可操作的見解。一些主要功能包括： **⚡ 頂級效能：** 透過集算器SPL的最佳化演算法和高效率的記憶體管理體驗快速的處理速度。 **🚀 豐富的函數庫：** 存取全面的預先建構函數集合，滿足各種資料操作任務。 **✨ 直覺的語法：** 享受清晰簡潔的語法，提升程式碼的可讀性和可維護性。 **👨‍💻 Java整合：** 透過JDBC將集算器SPL腳本無縫整合到Java程式中，縮小資料分析和應用開發之間的差距。 **🧙‍♀️獨立執行：**獨立執行集算器SPL腳本，超越傳統限制，擴展您的資料處理能力。 ![esProc SPL](https://cdn.hashnode.com/res/hashnode/image/upload/v1679824673641/82f843e0-72a1-44a4-bd99-68616f322534.png?w=1600p=84cro格式&格式=webp&自動=壓縮,格式&格式=webp) ⭐ 支援他們的 GitHub 倉庫：[https://github.com/SPLWare/esProc](https://github.com/SPLWare/esProc) --- ## 🌱 學習編碼 ### 2\. [awesome-roadmaps](https://github.com/liuchong/awesome-roadmaps) >***⭐*** *GitHub 星數 3k+* 各種程式語言、框架和工具的路線圖集合。 ### 3\. [awesome-courses](https://github.com/prakhar1989/awesome-courses) >***⭐*** *GitHub 星數超過 50k* 用於學習程式設計、網路開發和其他技術技能的精選線上課程清單。 ### 4\. [free-certifications](https://github.com/cloudcommunity/Free-Certifications) >***⭐*** *GitHub 星數 12k+* 各種技術主題的認證和培訓課程的綜合清單。 ### 5\. [awesome-algorithms](https://github.com/tayllan/awesome-algorithms) >***⭐*** *GitHub 星數超過 15k* 用於學習和練習演算法和資料結構的資源集合。 ### 6\. [awesome-interview-questions](https://github.com/DopplerHQ/awesome-interview-questions) >***⭐*** *GitHub 星數 59k+* 軟體開發角色的常見面試問題彙編。 --- ## 🧑‍💻 建設專案 ### 7\. [awesome-for-beginners](https://github.com/MunGell/awesome-for-beginners) >***⭐*** *GitHub 星數 58k+* 適合初學者的專案想法和資源清單。 ### 8\. [應用程式想法](https://github.com/florinpop17/app-ideas) >***⭐*** *GitHub 星數 69k+* 適用於各種程式設計平台和技能水平的大量應用程式創意。 ### 9\. [邊玩邊學](https://github.com/lmammino/awesome-learn-by-playing) >***⭐*** *GitHub 星數 115+* 一系列遊戲和互動專案，可提高編碼技能。 ### 10\. [專案為基礎的學習](https://github.com/practical-tutorials/project-based-learning) >***⭐*** *GitHub 星數 123k+* 針對各個技術領域的基於專案的學習資源清單。 ### 11\. [build-your-own-x](https://github.com/codecrafters-io/build-your-own-x) >***⭐*** *GitHub 星數 229k+* 關於如何建立您自己的程式語言、工具和框架的指南集合。 --- ## 🚀 工具和資源 ### 12\. [免費開發](https://github.com/ripienaar/free-for-dev) >***⭐*** *GitHub 星數 76k+* 為開發人員提供的免費工具和資源的精選清單。 ### 13\. [awesome-selfhosted](https://github.com/awesome-selfhosted/awesome-selfhosted) >***⭐*** *GitHub 星數 157k+* 用於各種目的的自託管軟體應用程式的集合。 ### 14\. [棒設計工具](https://github.com/goabstract/Awesome-Design-Tools) >***⭐*** *GitHub 星數超過 30k* 用於各種設計目的的設計工具的綜合清單。 ### 15\. [awesome-stock-resources](https://github.com/neutraltone/awesome-stock-resources) >***⭐*** *GitHub 星數 11k+* 免費和付費庫存照片、圖標和其他設計資源的集合。 --- ## 💯 模式與最佳實踐 ### 16\. [awesome-sre](https://github.com/dastergon/awesome-sre) >***⭐*** *GitHub 星數超過 10k* 用於學習和實施站點可靠性工程實踐的資源集合。 ### 17\. [棒設計模式](https://github.com/DovAmir/awesome-design-patterns) >***⭐*** *GitHub 星數 33k+* 軟體設計模式及其應用的目錄。 ### 18\. [美麗文件](https://github.com/matheusfelipeog/beautiful-docs) >***⭐*** *GitHub 星數 8k+* 用於建立美觀且有效的文件的資源和最佳實踐的集合。 ### 19\. [很棒的可擴展性](https://github.com/binhnguyennus/awesome-scalability) >***⭐*** *GitHub 星數 49k+* 有關軟體系統可擴展性、效能和優化的精選資源清單。 --- 寫作一直是我的熱情，幫助和激勵人們讓我感到很高興。如果您有任何疑問，請隨時與我們聯繫！ 透過訂閱[我的電子報](https://madzadev.substack.com/)，確保獲得我發現的最好的資源、工具、生產力技巧和職業發展技巧！ --- 原文出處：https://dev.to/madza/19-github-repositories-every-developer-should-bookmark-13bd

1個讚   0留言 258瀏覽

如何成為 10 倍速明星開發人員

如今，每個人都想成為我們所謂的「10 倍開發人員」。然而，這個術語經常被誤解和高估。 從本質上講，在我看來，高效或10 倍開發人員是指能夠利用所有可用工具來發揮其優勢的人，讓這些工具處理冗餘和重複性的任務，並使他能夠專注於複雜和創造性的工作。以下是成為 10 倍開發人員的一些提示和技巧： ## 使用腳本自動執行重複任務： 對於尋求優化工作流程的開發人員來說，透過腳本自動執行重複任務是一個遊戲規則改變者。 透過弄清楚哪些任務可以自動化，例如測試和部署，然後讓腳本處理它們，開發人員可以專注於工作中更具挑戰性的部分，並在過程中節省大量時間。 例如，此腳本建立一個新的專案資料夾，由使用者輸入命名，並在檔案總管中開啟它： ``` import os import subprocess def create_project_folder(project_name): # Create a new folder for the project os.makedirs(project_name) # Open the project folder in the file explorer subprocess.run(['explorer', project_name]) # Get the project name from the user project_name = input("Enter the name of your new project: ") # Call the function to create and open the project folder create_project_folder(project_name) ``` ## 鍵盤快速鍵掌握： 掌握程式碼編輯器或 IDE 中的鍵盤快速鍵對於加快編碼工作流程至關重要。 VS 程式碼的一些快捷方式範例： `Ctrl + P`：快速檔案導航，讓您可以按名稱開啟檔案。 `Ctrl + Shift + L`：選取目前單字的所有出現位置。 `Ctrl + /`：切換行註釋 `Ctrl + A`：選擇目前檔案中的所有行 `Ctrl + F`：尋找程式碼中的特定文本 `Ctrl + Shift + P`：開啟各種指令的指令面板。 `Alt + 向上/向下箭頭`：向上或向下移動目前行。 `Shift + 右箭頭 (→)`：選擇遊標右側的字元。 `Shift + 向左箭頭 (←)`：選擇遊標左側的字元。 「Alt + 點擊」：按住 Alt 鍵並點擊程式碼中的不同位置以建立多個遊標，從而允許您同時在這些位置進行編輯或鍵入。 ## 不要過度設計： 避免過度設計解決方案的誘惑。加入不必要的程式碼或架構複雜性是許多工程師和程式設計師遇到的常見陷阱。 然而，保持簡單不僅有利於您目前的工作流程，而且還可以讓其他人在將來更容易理解您的程式碼並就您的程式碼進行協作。 ## 掌握版本控制工作流程： 善於使用版本控制工作流程（例如使用 Git）將極大地提高您的工作效率，並幫助您的團隊在不妨礙彼此的情況下協同工作。 特別是使用 GitKraken 等工具或任何其他 GUI 替代品，提供直覺的介面，簡化分支、合併和追蹤變更等任務，使協作更加順暢。 ![GitKraken 網站圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggegydp0qnryv7cbszuk.png) 如果出現問題，您可以輕鬆恢復到先前的狀態。這就像有一個安全網，可以確保每個人的工作順利配合，從而使建立軟體的整個過程更快、壓力更小。 ## 利用現有元件和函式庫： 不要重新發明輪子，而是使用經過嘗試和測試的可用解決方案。這不僅節省時間，而且使您的程式碼更加可靠和有效率。 這種方法使您能夠更多地關注專案的獨特方面。這是一種明智的策略，可以提高生產力並建立強大的軟體，而無需從頭開始。 ## 採用 HTML Emmet 進行快速原型設計： Emmet 是一個針對 Web 開發人員的工具包，可透過縮寫快速且有效率地進行編碼。 如果您使用 HTML，Emmet 可以顯著加快建立 HTML 結構的過程。 例子： ``` div>(header>ul>li*2>a)+footer>p ``` 輸出： ``` <div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div> ``` ## 利用人工智慧協助： - **GitHub 副駕駛：** 是 GitHub 與 OpenAI 合作開發的人工智慧驅動的程式碼補全工具。它透過在開發人員鍵入時產生智慧建議和自動完成來改變開發人員編寫程式碼的方式。這是迄今為止我嘗試過的最好的人工智慧工具之一。 ![GitHub Copilot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/822ubh3qe2lyezubbva5.png) - **標籤九：** 是一個人工智慧驅動的程式碼編輯器自動完成擴充。它超越了傳統的自動完成功能，使用機器學習模型來預測和建議整行或程式碼區塊。 用戶可以選擇免費使用 TabNine，但有一些限制，也可以透過訂閱來選擇專業版以獲得高級功能。 [TabNine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68un8zingjmsvnuk5pyl.png) - **聊天gpt :** ChatGPT 可以真正改變您的工作效率。例如，它可以提供有用的範例，例如建議用於測試的陣列或幫助重建程式碼片段。 ![Chatgpt 範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi8hskndin82w2vgx10l.png) 如果您在程式設計概念上遇到困難或需要澄清，ChatGPT 可以提供快速且易於理解的解釋。這就像擁有一位知識淵博的編碼夥伴，24/7 全天候幫助您應對編碼挑戰，使您的開發過程更加順暢和高效。 ## VS 程式碼中的擴充： VS Code 中的擴充功能可以透過加入功能、自動化任務和增強開發環境來顯著提高工作效率： - **更漂亮：** Prettier 是一個固執己見的程式碼格式化程序，它會自動格式化您的程式碼，使其看起來乾淨且一致，從而使您免於手動格式化的麻煩。有了 Prettier，您的程式碼變得更加賞心悅目，您可以更加專注於編寫邏輯，而不必擔心樣式。 ![更漂亮的擴充](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gurx061173zhqjd8lvvq.png) - **自動重新命名標籤：** 自動重命名標籤擴充就像 HTML 或 XML 的編碼助手。當您變更開始標記的名稱時，此擴充功能會自動更新結束標記以符合。 ![自動重新命名標籤擴充](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q31o7ljpjl3ciysch7b5.png) - **更好的評論：** Better Comments 擴充功能將幫助您在程式碼中建立更人性化的註解。透過此擴展，您將能夠對註釋進行分類。 ![更好的評論擴充](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4f45e3cjl34mcs94rx6.png) - **智慧感知：** IntelliSense 是您的程式設計助手，可在您鍵入時提供智慧程式碼補全和建議。它預測您的需求並提供相關選項，使編碼更加有效率。一些範例： ![Tailwind CSS IntelliSense 擴充](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcjdqgwg5n6dgn4naeuz.png) ![路徑智慧感知擴充](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c1hvrb4l60mx6l2mp32.png) ![npm Intellisense 擴充](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo40qrvwsplnbvzc2wn3.png) - **孔雀:** 當您處理大量專案並在 VSCode 視窗之間跳轉時，Peacock 非常有用。它允許您將顏色連結到每個專案，因此每當您打開它時，您都可以透過顏色快速查看您所在的視窗。 ![孔雀擴充](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gncbyqxup6iwa353q3vt.png) --- **總而言之**，結合這些策略和工具可以真正徹底改變您的編碼方法，將您轉變為更有效率、更有效率的開發人員。擁抱 10 倍思維不僅可以提高個人生產力，還可以為您的團隊做出積極貢獻。因此，繼續實施這些技巧，並觀察您的編碼之旅進入一個全新的水平。 --- 原文出處：https://dev.to/idboussadel/how-to-become-a-10x-dev-ake

0個讚   0留言 159瀏覽

在 Python 資料科學領域：🚀⚡新的函式庫⚡ VS 舊的函式庫🦖

## **簡介** 在本文中，我提供了主流 Python 函式庫的替代方案。 儘管主流函式庫得到了更強大的活躍社群的支持，但這些替代方案為 Python 領域增加了一些價值。 選擇您的庫取決於您的用例和個人喜好。 ![甘道夫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vma2yiy4qhfmaifont1.gif) --- ## 1.[Taipy](https://github.com/Avaiga/taipy) 而非 Streamlit Taipy 是這個街區的新來者。就像 Streamlit 一樣，Taipy 提供了一種建立互動式 GUI 的簡單方法； 然而，Taipy 解決了 Streamlit 的大部分限制/低效率： - 管理同步/非同步呼叫 - 完全筆記型電腦相容性 - 多用戶 - 為您的佈局、樣式等提供更多自訂功能（無需 CSS） - 大資料支持 - 更好的性能 ![太皮](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yglfghfebkae1y253hjg.gif) --- ![QueenB 星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvt5qn1yadra3epnb07v.gif) 我們感謝任何幫助我們發展社區的幫助🌱 --- ## 2.[Polars](https://github.com/pola-rs/polars)取代Pandas Polars 的靈感來自於 Python 的皇室成員：Pandas。就像它一樣，它是一個為處理資料而建立的 DataFrame 庫，但在處理大型資料集時它確實表現出色。 Polars 的速度比 Pandas 快 10 到 100 倍，主要原因有二： - Polars 內建平行處理 - 用 Rust 寫 北極熊會取代熊貓嗎？只有時間會給出答案。 ![極地](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbgyhfcwsa95iwax797o.gif) --- ## 3.[Dask](https://github.com/dask/dask)取代PySpark Dask 可以結合平行計算來處理大於記憶體的計算。 當您希望擴展計算時，它是一個很好的工具。它是用 Python 原生編寫的，使得學習/使用變得輕而易舉（對於 Python 開發人員來說）。 它不是為超大資料（超過 2 TB）而設計的，如果您正在處理類似 SQL 的查詢，它也沒有競爭力（與 Spark）。 非常適合筆記型電腦執行。 ![Dask](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3qidu9vq95avugbhy3x.gif) --- ## 4.[LightGBM](https://github.com/microsoft/LightGBM)而不是XGBoost XGBoost 和 LightGBM 都是梯度增強函式庫。 XGBoost 是 Kaggle 的最愛，但在處理大型資料集時，LightGBM 針對具有平行計算的大資料進行了最佳化。 ![LGBM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5pvww8tk6h9paik65pc.gif) --- ## 5.[PyCaret](https://github.com/pycaret/pycaret)取代Scikit-learn 與 Scikit-learn 一樣，您可以使用 PyCaret 執行機器學習任務。 PyCaret 透過更簡單的程式碼來展示其功能，這是開始 ML 學習專案的好方法。 PyCaret 簡單易學。它的一些高級功能是： - EDA 和資料處理 - 建模/培訓 - 模型可解釋性 - 模型部署 它對各種機器學習步驟的端到端覆蓋使得 PyCaret 成為 ML 愛好者甚至是沒有時間進行更深入分析的高級資料科學家的絕佳工具！ ![Pycaret](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfneape9r3c28vahkiu9.gif) --- ## 6.[Darts](https://github.com/unit8co/darts) 而非 tsfresh 這兩個庫都致力於時間序列。然而，它們有不同的目的。 Darts 是時間序列的「sklearn」。它涵蓋了 DS 在處理時間序列時所需的所有不同功能： - 資料發現 - 資料預處理 - 預測 - 模型評估/選擇 不再需要使用多個庫；這一切都可以在 Darts 中找到。 tsfresh 旨在自動化為 ML 訓練步驟準備時間序列時最具挑戰性的步驟之一：特徵提取和選擇。 tsfresh 可以從您的時間序列中提取大量特徵，並幫助您辨識相關特徵。 ![飛鏢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b54nvyfh2ac44eayn5zo.gif) --- ## 7.[PyTorch](https://github.com/pytorch/pytorch) 而非 TensorFlow 兩者都是參與深度學習的資料科學家和研究人員的首選庫。 幾年前，TensorFlow 是一個受歡迎的庫，但從 2020 年到 2021 年，PyTorch 已經趕上了 TensorFlow。 您如何在這兩個令人難以置信的庫之間做出選擇？ PyTorch 似乎在研究方面具有優勢，更專注於 NLP。 此外，PyTorch 更具 Python 風格，學習曲線也更容易。 如果您是深度學習遊戲的新手，我建議您嘗試一下 PyTorch；否則，兩個庫都是不相上下的。 ![Pytorch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z229nfprxz6u13n75jpx.gif) --- ## 8.[Arcade](https://github.com/pythonarcade/arcade) 而非 Pygame 在 Python 2D 遊戲領域，Pygame 獲得了良好的聲譽，而 Arcade 作為一個較新但完善的庫，在以下屬性上脫穎而出： - 內建遊戲循環 - 高效率的事件模型 - 更多功能 - 更人性化 兩個庫都有自己的優點；然而，Arcade 是更適合初學者的選擇。 Pygame 確實提供了一種教育替代方案 Pygame Zero，對於新開發人員來說是一個更好的選擇。 ![街機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bry95jvevermvi8sa1k8.gif) --- ## 9.[spaCy](https://github.com/explosion/spaCy)取代NLTK NLTK 是自然語言處理的主流函式庫，具有豐富的功能。 然而，隨著複雜性的增加，學習曲線也會變得更加陡峭。 SpaCy 是開始該領域的一個不錯的選擇。 SpaCy 的另一個優點是它是為了優化 NLP 應用程式而建構的，專注於更高的速度和效率。 ![Spacy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff70gdtyxvk450bqxewx.gif) --- ## 10.[Ruff](https://github.com/astral-sh/ruff) 而非 Pylint Linters 是任何編碼之旅的重要組成部分。 Pylint 被廣泛使用，但 Ruff 提高了過程的有效性和速度。 眾所周知，它比同等的 linter 快 10-100 倍，Ruff 絕對是一個很好的庫，可以作為 Pylint 的替代品。 ![Ruff](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8j7nqvy3vx5bkvm8q31.gif) --- 我希望你喜歡這篇文章！🙂 我是一名新手作家，歡迎任何改進建議！ 如果您有最喜歡的庫而不是更主流的庫，請隨時分享。 ![新](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyff4e76az30t2h6506a.gif) --- 原文出處：https://dev.to/taipy/new-open-source-vs-old-open-source-33k7

0個讚   0留言 183瀏覽

🏆Pythonista 必備的 10 個 VSCode 擴展

## **TL；博士** 對於使用 VSCode 的 Python 開發人員、資料科學家和分析師來說，此編譯提供了一些擴展，可以提高 Python 和一般編碼需求的編碼生產力和效率。 ![介紹 GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhcge6eywoumtc7hyuxr.gif) <小時/> ## 1. [Taipy Studio](https://marketplace.visualstudio.com/items?itemName=Taipy.taipy-studio) Taipy 是一個開源 Python 庫，用於建立 Web 應用程式前端和後端。 您只需使用 Python 即可為您的資料/機器學習用例建立多頁面、多用戶和可自訂的 GUI。 但它不止於此。 Taipy 還可以處理您的後端，因為它允許管道編排和管理。 現在，回到 Taipy Studio 的 VSCode 擴充功能。此擴充功能是兩個工具的包裝器，旨在加速 Taipy 應用程式的建立。 - Taipy Studio Configuration Builder：圖形管道編輯器，全部在點擊環境中； - Taipy Studio GUI 助手：在編寫 GUI 時包括 IntelliSense。 ![太比 PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bju9pbjeaap2tditivf.png) <小時/> ![QueenB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovcc5kqd8xr9uihrggbb.gif) {% cta https://github.com/Avaiga/taipy %} Star ⭐ Taipy 儲存庫 {% endcta %} 我們已經快有 2000 顆星了，沒有你我們無法做到這一點🙏 <小時/> ## 2. [Github Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 還需要出示副駕駛嗎？這個工具就是您自己的程式碼助手。 利用人工智慧，Copilot 可以無縫地自動完成您的程式碼。 另一個主要功能是能夠提供上下文感知建議。 對於開發人員來說，這是一個偉大的遊戲規則改變者，可以節省時間和提高效率，並且將其直接作為 VSCode 擴展使用是完全有意義的。 ![副駕駛 PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6192xn9g47gn2693r4j2.png) <小時/> ## 3. [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv) 光看名字，你就差不多能猜到這個工具的功能了。 Rainbow CSV 將透過以不同顏色突出顯示列來讓您的 CSV 檔案易於閱讀。 就這麼簡單，但對任何處理資料的人來說都很有幫助。真正改變使用者視覺體驗的遊戲規則。 ![RCSV PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdvs5fyi12tprdc3gch4.png) <小時/> ## 4. [待辦事項樹](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) 對於需要在程式碼的待辦事項清單中進行組織的人來說，這個工具非常有用。使用此擴展，只需在需要時在程式碼中加入 TODO 或 FIXME 標記即可。 ToDo Tree 將會尋找這些標籤並將它們組織成樹狀結構。 現在您可以輕鬆返回標籤。 ![TODO 樹 PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csiyv0rnp81lod36ksw7.png) <小時/> ## 5. [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter) 如果您想使用類似筆記本的 IDE 來啟動資料/ML 專案以促進探索和實驗，VSCode 透過 Jupyter 擴充功能提供此功能。 當筆記型電腦的限制（例如擴展、部署、測試和維護）使得有必要轉向更傳統的編碼實踐時，在 VSCode 上進行所有設定只會讓事情變得更容易。 ![Jupyter PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbw6rqi4y2sls2466r02.png) <小時/> ## 6. [Markdown 表情符號](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji) 這裡並沒有什麼真正令人驚訝的地方。此 VSCode 擴展為 VSCode Markdown 預覽提供表情符號支持，這是為任何 Markdown 專案加入表現和可讀性的好方法。 ![MKD 表情符號 PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oaj92h9s95e2mtt0vr0.png) <小時/> ## 7. [Pylint](https://marketplace.visualstudio.com/items?itemName=ms-python.pylint) Pylint 與 Python linter 同名，是其在 VSCode 中的擴充。它透過分析程式碼、檢查錯誤並為您提供改進建議來幫助您提高效率。 確保您的腳本遵循所有編碼標準是必須的。 ![Pylint GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lv6mcilflhupaultx160.gif) <小時/> ## 8. [Pylance](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance) Pylance 是 Python 語言的支援。 它最初作為 Python 庫存在，但透過此擴充整合到 VSCode 中。 一些主要特點： - 程式碼完成 - 自動導入 - 與 Juypter 筆記本相容 - 語意突出顯示 ![皮蘭斯 PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s04exzm5y61m6rwjvhru.png) <小時/> ## 9. [Liveshare](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 使用此 VSCode 擴充功能可以輕鬆進行協作。無需配置任何東西；只需啟動 Liveshare 會話並繼續除錯會話即可。 Liveshare 也保留您所有的個人 IDE 首選項，讓協作更加輕鬆。 ![Liveshare PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0the1beedaze59z7qcl.png) <小時/> ## 10. [Markdown 多合一](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) 此擴充增強了 VSCode 中 Markdown 的使用，並具有各種不同的功能： - 內容表生成 - 鍵盤快速鍵 - 程式碼區塊插入 - 預覽功能 該工具非常適合編寫“README.md”檔案。 ![MD AIO PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yji1wmk9lvp9plqp631.png) <小時/> 由於各種原因，VSCode 已成為開發人員最常使用的 IDE 之一。 它的主要功能包括強大的 git 整合和跨平台支持，但擴展是一個突出的功能。 它們支援自訂您的環境，促進與各種工具的無縫整合。 <小時/> 希望您喜歡這篇文章！ 我是一名新手作家，歡迎任何改進建議！ ![新秀圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25oebh36ha622u74kpli.gif) 如果您有任何疑問，請隨時與我們聯繫。 --- 原文出處：https://dev.to/taipy/top-10-must-have-vscode-extensions-forpythonistas-561a

0個讚   0留言 116瀏覽

✨ 每個開發者都需要了解的 7 個人工智慧庫（成為奇才）🧙‍♂️ 🪄

## 長篇大論；博士 如今，任何開發人員都可以利用人工智慧來建立強大的東西。 無需成為機器學習專家。 這裡有 7 個最好的庫，您可以使用它來增強您的開發並透過最先進的 AI 功能給用戶留下深刻的印象。 這些可以為你的專案帶來神奇的力量，所以不要忘記給他們加星號並支持他們🌟 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/she8nk1oksxmem791o09.gif) --- ## 1. [CopilotKit](https://github.com/RecursivelyAI/CopilotKit)：將 AI 功能引入 React 應用程式。 （ChatBot 和 CopilotTexarea） ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zxu7wrchaod8eyvq46b.png) 常見的法學碩士產品用例被製作成簡單且可自訂的反應元件。 具有兩個元件： CopilotPortal：加入可以在您的應用程式內回答問題並採取行動的法學碩士！ CopilotTextarea：任何具有 Github Copilot 功能的 <textarea/> 的直接替代品。 ``` import "@copilotkit/react-ui/styles.css"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; export default function App(): JSX.Element { return ( <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> <CopilotSidebarUIProvider> <YourContent /> </CopilotSidebarUIProvider> </CopilotProvider> ); } ``` {% cta https://github.com/RecursivelyAI/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} --- ## 2. Tavily GPT 研究員 - 取得法學碩士學位以搜尋網路和資料庫 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61mwfvsi4n9rnjet0j52.png) Tavilly 可讓您將 GPT 支援的研究和內容產生工具新增至您的 React 應用程式中，從而增強其資料處理和內容建立功能。 ``` # Create an assistant assistant = client.beta.assistants.create( instructions=assistant_prompt_instruction, model="gpt-4-1106-preview", tools=[{ "type": "function", "function": { "name": "tavily_search", "description": "Get information on recent events from the web.", "parameters": { "type": "object", "properties": { "query": {"type": "string", "description": "The search query to use. For example: 'Latest news on Nvidia stock performance'"}, }, "required": ["query"] } } }] ) ``` {% cta https://github.com/assafelovic/gpt-researcher %} 明星塔維利 ⭐️ {% endcta %} --- ## 3. Pezzo.ai - 可觀測性、成本和即時工程平台 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxvbgi5zkghkb0t64npw.jpeg) 用於管理 OpenAI 通話的集中平台。 優化您的提示和令牌使用。追蹤您的人工智慧使用情況。 免費且易於整合。 ``` const prompt = await pezzo.getPrompt("AnalyzeSentiment"); const response = await openai.chat.completions.create(prompt); ``` {% cta https://github.com/pezzolabs/pezzo %} 明星 Pezzo ⭐️ {% endcta %} --- ## 4. LangChain - 將人工智慧整合到行動鏈中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s87kvm5jt5wmsv702r1.png) 易於使用的 API 和函式庫，用於將 LLM 新增到應用程式中。 將不同的人工智慧元件和模型連接在一起。 輕鬆嵌入上下文和語義資料以實現強大的整合。 ``` from langchain.llms import OpenAI from langchain import PromptTemplate llm = OpenAI(model_name="text-davinci-003", openai_api_key="YourAPIKey") # Notice "food" below, that is a placeholder for another value later template = """ I really want to eat {food}. How much should I eat? Respond in one short sentence """ prompt = PromptTemplate( input_variables=["food"], template=template, ) final_prompt = prompt.format(food="Chicken") print(f"Final Prompt: {final_prompt}") print("-----------") print(f"LLM Output: {llm(final_prompt)}") ``` {% cta https://github.com/langchain-ai/langchain %} 星朗鏈 ⭐️ {% endcta %} --- ## 5. [Weaviate](https://github.com/weaviate/weaviate) - 用於人工智慧增強專案的向量資料庫 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brp7plpkk9sy44ubc14t.png) Weaviate 是一個針對大型資料集快速、高效搜尋而最佳化的向量資料庫。 它支援與 OpenAI 和 Hugging Face 等提供者的 AI 模型和服務集成，從而實現資料分類和自然語言處理等高級任務。 它是一種雲端原生解決方案，具有高度可擴展性，可以滿足不斷變化的資料需求。 ``` import weaviate import json client = weaviate.Client( embedded_options=weaviate.embedded.EmbeddedOptions(), ) uuid = client.data_object.create({ }) obj = client.data_object.get_by_id(uuid, class_name='MyClass') print(json.dumps(obj, indent=2)) ``` {% cta https://github.com/weaviate/weaviate %} 星織 ⭐️ {% endcta %} --- ## 6. [PrivateGPT](https://github.com/imartinez/privateGPT) - 與您的文件聊天，100% 私密 💡 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap81ce5j9chc5c543jl6.jpg) PrivateGPT 允許在應用程式內進行安全的、GPT 驅動的文件交互，確保資料隱私並增強上下文感知處理能力。 PrivateGPT 透過本地處理和儲存文件和上下文來確保隱私，而無需將資料傳送到外部伺服器。 ``` from privategpt import PrivateGPT, DocumentIngestion, ChatCompletion client = PrivateGPT(api_key='your_api_key') def process_documents_and_chat(query, documents): ingestion_result = DocumentIngestion(client, documents) chat_result = ChatCompletion(client, query, context=ingestion_result.context) return chat_result documents = ['doc1.txt', 'doc2.txt'] query = "What is the summary of the documents?" result = process_documents_and_chat(query, documents) print(result) ``` {% cta https://github.com/weaviate/weaviate %} 星織 ⭐️ {% endcta %} --- ## 7. SwirlSearch - 人工智慧驅動的搜尋。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/extnr9oxhubs6m9x817a.png) LLM 支援的搜尋、摘要和輸出。 同時搜尋多個內容來源並產生整合輸出。 功能強大，可自訂各種資料來源的應用程式內整合。 {% cta https://github.com/swirlai/swirl-search %} 星旋搜尋 ⭐️ {% endcta %} --- 謝謝閱讀！ 我希望這些可以幫助您使用人工智慧建立一些很棒的東西。 如果您喜歡並評論您想看到的任何其他庫或主題，請按讚。 --- 原文出處：https://dev.to/copilotkit/7-ai-libraries-every-dev-needs-to-know-to-be-a-wiz-4lim

0個讚   0留言 120瀏覽

我該如何教 Git

--- 標題：我如何教 Git 發表：真實 描述： 標籤： git, 學習 canonical_url：https://blog.ltgt.net/teaching-git/ 封面圖片：https://marklodato.github.io/visual-git-guide/conventions.svg.png # 使用 100:42 的比例以獲得最佳效果。 # 發佈時間: 2023-11-26 19:17 +0000 --- 我使用 Git 已經十幾年了。八年前，我必須為一家即將建立開源專案的合作夥伴公司舉辦有關 Git（和 GitHub）的培訓課程，我將在這裡向您介紹我的教學方式。順便說一句，從那時起，我們在工作中建立了使用相同（或類似）方法的內部培訓課程。話雖如此，我並沒有發明任何東西：這很大程度上受到了其他人之前寫的內容的啟發，包括[the <cite>Pro Git</cite> book](https://git-scm. com/book/)，儘管順序不同，但 <abbr title="in my view">IMO</abbr> 可以有所作為。 我寫這篇文章的原因是，多年來，我不斷看到人們實際上使用 Git，但沒有真正理解他們在做什麼；他們正在使用 Git。他們要么被鎖定在一個非常具體的工作流程中，他們被告知要遵循，並且無法適應另一個開源專案正在使用的工作流程（這也適用於開源維護人員並不真正了解外部貢獻者如何使用 Git） ），或者如果任何事情沒有按照他們想像的方式執行，或者他們在呼叫Git 命令時犯了錯誤，他們就會完全迷失。我受到 [Julia Evans](https://jvns.ca) 對 Git 的（更新）興趣的啟發而寫下來，因為她有時會在社交網絡上徵求評論。 我的目標不是真正教你有關 Git 的知識，而是更多地分享我教授 Git 的方法，以便其他可能會教導的人從中獲得靈感。因此，如果您正在學習 Git，那麼這篇文章並不是專門為您而寫的（抱歉），因此可能不是自給自足的，但希望其他學習資源的連結足以填補空白，使其成為也是有用的學習資源。如果您是視覺學習者，這些外部學習資源都是有插圖的，甚至是視覺學習的。 ## 心理模型 一旦我們清楚了為什麼我們使用VCS（版本控制系統）來記錄_commits_ 中的更改（或者換句話說，我們_將我們的更改_提交到歷史記錄；我假設你對這個術語有一定的熟悉），讓我們多了解一下Git具體來說。 我認為理解 Git 至關重要的一件事是獲得其背後概念的準確心理模型。 首先，這並不是很重要，但Git 實際上並沒有記錄_changes_，而是記錄我們文件的_snapshots_（至少在概念上是這樣；它將使用_packfiles_ 來有效地儲存內容，並且在某些情況下方實際上會儲存_changes_ –diffs–），並且會按需產生差異。不過，這有時會顯示在某些命令的結果中（例如為什麼某些命令顯示一個檔案被刪除而另一個檔案被加入，而其他命令顯示一個檔案被重新命名）。 現在讓我們深入探討一些 Git 概念，或是 Git 如何實現一些常見的 VCS 概念。 ### 犯罪 Git _commit_ 是： * 一個或多個父親提交，或第一次提交沒有父親提交 (_root_) * 提交訊息 * 作者和作者日期（實際上是帶有時區偏移的時間戳） * 提交者和提交日期 * 和我們的檔案：相對於儲存庫根的路徑名、_mode_（UNIX 檔案系統權限）及其內容 每次提交都會獲得一個標識符，該標識符是透過計算該資訊的 SHA1 雜湊值確定的：更改逗號，您將獲得不同的 SHA1，即不同的_提交物件_。 (<abbr title="For What it's value">Fwiw</abbr>，Git 正在慢慢[轉向 SHA-256](https://git-scm.com/docs/hash-function-transition) 作為哈希功能）。 #### 旁白：SHA1 是如何計算的？ Git 的儲存是_內容尋址_，這表示每個_物件_都使用直接從其內容派生的名稱進行存儲，並採用 SHA1 雜湊的形式。 從歷史上看，Git 將所有內容儲存在文件中，我們仍然可以這樣推理。文件的內容儲存為 _blob_，目錄儲存為 _tree_（一個文字文件，列出目錄中的文件及其名稱、模式和表示其內容的 _blob_ 的 SHA1，以及其子目錄及其名稱和 SHA1他們的_樹_） 如果您想了解詳細訊息，Julia Evans（再次）寫了一篇令人驚嘆的[博客文章](https://jvns.ca/blog/2023/09/14/in-a-git-repository-- where-do-your-檔案-即時-/);或者您可以[從 <cite>Pro Git</cite> 書中閱讀](https://git-scm.com/book/en/v2/Git-Internals-Git-Objects)。 <圖> <img src=https://git-scm.com/book/en/v2/images/commit-and-tree.png width=800 height=443 alt='包含5 個框的圖表，分為3 列，每個框標有 5 位 SHA1 前綴；左邊的子標籤為“commit”，包含元資料“tree”，中間是框的 SHA1，“author”和“committer”的值均為“Scott”，文字為“The initial commit of我的專案”;中間的框被子標記為“tree”，包括三行，每行標記為“blob”，其餘 3 個框的 SHA1 以及看起來像文件名的內容：“README”、“LICENSE”和“test.rb” ”;最後 3 個框，在右側垂直對齊，都是子標籤為「blob」的內容，包含看起來像是 README、LICENSE 和 Ruby 原始檔內容開頭的內容；有箭頭連結框：提交指向樹，樹指向 blob。'> <figcaption>提交及其樹（來源：<a src=https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell><cite>Pro Git</引用></a>）</figcaption> </圖> _commit_ 中的_父親提交_ 建立一個代表我們歷史的[有向無環圖](https://en.wikipedia.org/wiki/Directed_acirclic_graph)：_有向無環圖_ 由連結的節點（我們的提交）組成與有向邊一起（每個提交連結到其父提交，有一個方向，因此_directed_）並且不能有循環/循環（提交永遠不會是它自己的祖先，它的祖先提交都不會連結到它作為父提交）。 <圖> <img src=https://git-scm.com/book/en/v2/images/commits-and-parents.png width=800 height=265 alt='包含 6 個框排列成 2 行 3 列的圖表;第一行的每個框都標有 5 位 SHA1 前綴，子標籤為“commit”，元資料“tree”和“parent”均帶有 5 位 SHA1 前綴（每次都不同）、“author”和“ committer」的值都是“Scott”，以及一些代表提交訊息的文字；左邊的盒子沒有「父」值，另外兩個盒子將左邊的盒子的 SHA1 作為「父」；這些框之間有一個箭頭，指向代表「父」的左側；順便說一句，左邊的框與上圖中的提交框具有相同的 SHA1 和相同的內容；最後，每個提交框也指向其下方的一個框，每個框都標記為「快照 A」、「快照 B」等，並且可能代表從每個提交連結的「樹」物件。'> <figcaption>提交及其父級（來源：<a src=https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell><cite>Pro Git</ cite ></a>)</figcaption> </圖> ### 參考文獻、分支和標籤 現在 SHA1 哈希對於人類來說是不切實際的，雖然 Git 允許我們使用唯一的 SHA1 前綴而不是完整的 SHA1 哈希，但我們需要更簡單的名稱來引用我們的提交：輸入 _references_。這些是我們選擇的提交的_標籤_（而不是 Git）。 有幾種_參考_： * _branches_ 是_moving_ 引用（請注意，`main` 或`master` 並不特殊，它們的名稱只是一個約定） *_標籤_是_不可變_引用 * `HEAD` 是一個特殊的引用，指向_當前提交_。它通常指向一個分支而不是直接指向一個提交（稍後我們會看到原因）。當一個引用指向另一個引用時，這稱為[_符號引用_](https://blog.ltgt.net/confusing-git-terminology/#reference-symbolic-reference)。 * Git 會在某些操作期間為您設定其他特殊參考（`FETCH_HEAD`、`ORIG_HEAD` 等） <圖> <img src=https://git-scm.com/book/en/v2/images/branch-and-history.png width=800 height=430 alt='帶有 9 個框的圖； 6 個盒子的排列方式與上圖相同，並且標記相同（三個提交及其 3 個樹）；最右邊（最新）提交上方的兩個框，箭頭指向它，分別標記為“v1.0”和“master”；最後一個框位於“master”框上方，有一個箭頭指向它，並標記為“HEAD”。'> <figcaption>分支及其提交歷史記錄（來源：<a src=https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell><cite>Pro Git< /引用></a>）</figcaption> </圖> ### 三個狀態 當您在 Git 儲存庫中工作時，您在 Git 歷史記錄中操作和記錄的檔案位於您的_工作目錄_中。要建立提交，您需要在 [_index_](https://blog.ltgt.net/confusing-git-terminology/#index-staged-cached) 或_暫存區域_中_暫存_檔案。完成後，您附加一則提交訊息並將您的_staged_檔案移至_history_。 為了關閉循環，_工作目錄_是根據_歷史記錄_中的給定提交進行初始化的。 <圖> <img src=https://git-scm.com/book/en/v2/images/areas.png width=800 height=441 alt='包含3 位參與者的序列圖：「工作目錄」、「暫存區域」和「.git directpry（儲存庫）」；有一條“簽出專案”訊息從“.git 目錄”到“工作目錄”，然後從“工作目錄”到“暫存區域”進行“階段修復”，最後從“暫存區域”進行“提交”區域」到「.git 目錄」。'> <figcaption>工作樹、暫存區域和 Git 目錄（來源：<a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F#_the_third_states" ><cite>Pro Git</cite></a>）</figcaption> </圖> ### 旁白：忽略文件 並非所有檔案都需要_追蹤_歷史記錄：由建置系統（如果有）產生的檔案、特定於您的編輯器的檔案以及特定於您的作業系統或其他工作環境的檔案。 Git 允許定義要忽略的檔案或目錄的命名模式。這實際上並不意味著Git 會忽略它們並且無法_跟踪_，但如果不跟踪它們，多個Git 操作將不會向您顯示它們或操縱它們（但您可以手動將它們加入到歷史記錄中，並且從那時起，他們將不再被_忽略_）。 忽略檔案是透過將路徑名稱（可能使用 glob）放入忽略檔案中來完成的： * 儲存庫中任何位置的 `.gitignore` 檔案定義了包含目錄的忽略模式；這些忽略文件會在歷史記錄中被跟踪，作為開發人員之間共享它們的一種方式；在這裡，您將忽略建置系統產生的那些檔案（Gradle 專案的“build/”，Eleventy 網站的“_site/”等） * `.git/info/excludes` 是您機器上的本機儲存庫；很少使用，但有時很有用，所以很高興了解一下 * 最後 `~/.config/git/ignore` 對機器來說是全域的（對你的使用者）；在這裡，您將忽略特定於您的電腦的文件，例如特定於您使用的編輯器的文件，或特定於您的作業系統的文件（例如macOS 上的“.DS_Store”或Windows 上的“Thumbs. db”） ） ### 加起來 這是所有這些概念的另一種表示： <圖> <img src=https://marklodato.github.io/visual-git-guide/conventions.svg width=907 height=529 alt='有 10 個框的圖； 5 個框在中心排成一行，標有 5 位 SHA1 前綴，它們之間有從右向左指向的箭頭；一條註釋將它們描述為“提交物件，由 SHA-1 哈希標識”，另一條註釋將其中一個箭頭描述為“子項指向父項”；一對框（看起來像一個水平分割成兩個框的單一框）位於最右邊（最新）提交的上方，有一個向下指向它的箭頭，該對的上面的框被標記為“HEAD”並描述為“引用當前分支”；下面的框被標記為“main”並被描述為“目前分支”；第七個框位於另一個提交上方，有一個向下指向它的箭頭；它被標記為“穩定”並被描述為“另一個分支”；最後兩個框位於提交歷史記錄下，一個在另一個之上；最底部的框標記為“工作目錄”並描述為“您'看到'的文件”，它和提交歷史記錄之間的另一個框標記為“階段（索引）”並描述為“要存取的文件”在下次提交中”。'> <figcaption>提交、引用和區域（來源：<a href=https://marklodato.github.io/visual-git-guide/index-en.html#conventions><cite>可視化 Git 參考</cite >< /a>，馬克‧洛達托）</figcaption> </圖> ## 基本操作 這就是我們開始討論 Git 指令以及它們如何與圖表互動的地方： * `git init` 初始化一個新的儲存庫 * `git status` 取得檔案狀態的摘要 * `git diff` 顯示任意兩個工作目錄、索引、`HEAD` 之間的更改，或實際上任何提交之間的更改 * `git log` 顯示並搜尋您的歷史記錄 * 建立提交 * `git add` 將檔案加入_index_ * `git commit` 將_index_ 轉換為_commit_ （帶有新增的_commit 訊息_） * `git add -p` 以互動方式將檔案新增至 _index_：選擇要新增的變更以及僅將哪些變更保留在工作目錄中，逐一檔案、逐個部分（稱為 _hunk_） * 管理分支機構 * `gitbranch` 顯示分支，或建立分支 *`git switch`（也稱為`git checkout`）將分支（或任何提交，實際上是任何_樹_）簽出到您的工作目錄 * `git switch -b` （也稱為 `git checkout -b`）作為 `gitbranch` 和 `gitswitch` 的捷徑 * `git grep` 搜尋您的工作目錄、索引或任何提交；這是一種增強的“grep -R”，它支援 Git * `gitblame` 來了解更改給定文件每一行的最後一次提交（因此，誰應該為錯誤負責） * `git stash` 將未提交的更改放在一邊（這包括_staged_文件，以及工作目錄中的_tracked_文件），然後_unstash_它們。 ### 提交、分支切換和 HEAD 當您建立提交（使用「git commit」）時，Git 不僅建立_提交物件_，還移動「HEAD」以指向它。如果「HEAD」實際上指向一個分支（通常是這種情況），Git 會將該分支移動到新的提交（並且「HEAD」將繼續指向該分支）。每當當前分支是另一個分支的祖先（該分支指向的提交也是另一個分支的一部分）時，提交將使“HEAD”移動相同，並且分支將_發散_。 當您切換到另一個分支（使用“git switch”或“git checkout”）時，“HEAD”會移至新的目前分支，並且您的工作目錄和索引將設定為重新組合該提交的狀態（未提交的更改將暫時保留；如果 Git 無法做到這一點，它將拒絕切換）。 如需更多詳細資訊和視覺表示，請參閱[commit](https://marklodato.github.io/visual-git-guide/index-en.html#commit) 和[checkout](https://marklodato. github .io/visual-git-guide/index-en.html#checkout）Mark Lotato 的<cite>可視化Git 參考</cite>的部分（請注意，該參考是幾年前寫的，當時`git switch ` 和 ` git Restore` 不存在，而 `git checkout` 是我們所擁有的一切；因此 _checkout_ 部分涵蓋的內容比 `git switch` 多一點）。 當然，<cite>Pro Git</cite> 這本書也是一個很好的視覺表示參考； [<cite>Branches in a Nutshell</cite> 子章節](https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell) 涵蓋了所有內容的很大一部分上述的。 ### 旁白：Git 是保守的 正如我們在上面所看到的，由於其_內容尋址存儲_，對提交的任何“更改”（例如使用“git commit --amend”）實際上都會導致不同的提交（不同的 SHA1）。 _舊提交_不會立即消失：Git 使用_垃圾收集_最終刪除無法從任何_引用_存取的提交。這意味著，如果您設法找回提交SHA1，則可以恢復許多錯誤（“git reflog”可以在此處提供幫助，或者符號“<branch-name>@{<n>}”，例如“main@{ 1}”） ` main` 在更改之前指向的最後一次提交）。 ### 使用分支機構 我們在上面已經看到了分支是如何發散的。 但分歧要求最終_合併_變回來（使用“git merge”）。 Git 在這方面非常擅長（我們稍後會看到）。 合併的一個特殊情況是目前分支是要合併到的分支的祖先。在這種情況下，Git 可以執行 [_fast-forward merge_](https://blog.ltgt.net/confusing-git-terminology/#can-be-fast-forwarded)。 由於兩個分支之間的操作可能始終針對同一對分支，因此 Git 允許您設定一個分支來追蹤另一個分支。另一個分支被稱為_追蹤_它的分支的_上游_。例如，設定時，「git status」將告訴您兩個分支彼此之間有多少分歧：目前分支是[_最新_](https://blog.ltgt.net/confusing-git-terminology /#your- branch-is-up-to-date-with-originmain) 及其上游分支，_後面_和[可以快轉](https://blog.ltgt.net/confusing-git-terminology/ #can-be- fast-forwarded），_超前_許多提交，或它們有分歧，每個提交都有一定數量。其他命令將使用該資訊為參數提供良好的預設值，以便可以省略它們。 要整合來自另一個分支的更改，而不是合併，另一種選擇是_cherry-pick_（使用同名命令）單一提交，而不包含其歷史記錄：Git 將計算該提交帶來的更改並將相同的更改應用於當前分支，建立一個與原始分支類似的新提交（如果您想了解更多有關Git 實際操作方式的訊息，請參閱Julia Evans 的[<cite>如何gitcherry-pick 和revert 使用3 路合併< /cite> ](https://jvns.ca/blog/2023/11/10/how-cherry-pick-and-revert-work/))。 最後，工具帶中的另一個指令是「rebase」。 您可以將其視為一次進行許多選擇的方法，但它實際上更強大（正如我們將在下面看到的）。但在其基本用途中，它只是這樣：您給它一系列提交（在作為起點的任何提交和作為終點的現有分支之間，預設為當前分支）和一個目標，並且它會挑選所有這些提交位於目標之上，並最終更新用作終點的分支。這裡的指令的形式是`git rebase --onto=<target> <start> <end>`。與許多 Git 命令一樣，參數可以省略，並且具有預設值和/或特定含義：因此，`git rebase` 是 `git rebase --fork-point upper` 的簡寫，其中 `upstream` 是 [upstream]當前分支的（https://blog.ltgt.net/confusing-git-terminology/#untracked-files-remote-tracking-branch-track-remote-branch）（我會忽略`--fork-point`這裡，它的作用很微妙，在日常使用上並不那麼重要），它本身就是`git rebase upper HEAD` 的簡寫（其中`HEAD` 必須指向一個分支），它本身就是`git rebase 的簡寫-- on=upstream uploaded `，`git rebase --onto=upstream $(git merge-baseupstream HEAD) HEAD` 的簡寫，並將rebase `upstream` 的最後一個共同祖先與當前分支之間的所有提交另一方面，手和當前分支（即自從它們分歧以來的所有提交），並將它們重新應用到“上游”之上，然後更新當前分支以指向新的提交。明確使用`--onto` （其值與起始點不同）實際上很少見，請參閱[我之前的文章](https://blog.ltgt.net/confusing-git-terminology/#git- rebase- --onto) 對於一個用例。 我們無法在沒有互動式變體「git rebase -i」的情況下呈現「git rebase」：它以與非互動式變體完全相同的行為開始，但在計算需要完成的操作之後，它將允許您對其進行編輯（作為編輯器中的文字文件，每行一個操作）。預設情況下，所有選定的提交都是精心挑選的，但您可以對它們重新排序，跳過某些提交，甚至將某些提交合併到單一提交中。實際上，您可以挑選最初未選擇的提交，甚至建立合併提交，從而完全重寫整個歷史記錄！最後，您還可以停止對其進行編輯（然後使用“git commit --amend”，和/或可能在繼續變基之前建立新的提交），和/或在兩次提交之間執行給定的命令。最後一個選項非常有用（例如，驗證您沒有在歷史記錄的每個點上破壞您的專案），您可以在`--exec` 選項中傳遞該命令，Git 將在每個重新基底提交之間執行它（這也適用於非互動式變基；在互動模式下，當能夠編輯變基場景時，您將看到在每個櫻桃選擇行之間插入執行行）。 更多詳細資訊和視覺表示，請參閱[merge](https://marklodato.github.io/visual-git-guide/index-en.html#merge)、[cherry pick](https://marklodato . github.io/visual-git-guide/index-en.html#cherry-pick) 和 [rebase](https://marklodato.github.io/visual-git-guide/index-en.html#rebase) Mark Lodato 的<cite>視覺化Git 參考</cite> 部分，以及[<cite>基本分支和合併</cite>](https://git-scm.com/book/en/v2/Git-分支-基本-分支和合併），[<cite>變基</cite>]（https://git-scm.com/book/en/v2/Git-Branching-Rebasing）和[<cite>重寫歷史< /cite>](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History) <cite>Pro Git</cite> 書的子章節。 您也可以查看 David Drysdale 的 [<cite>Git Visual Reference</cite>](https://lurklurk.org/gitpix/gitpix.html) 中的「分支和合併」圖。 ## 與他人合作 目前，我們只在我們的儲存庫中進行本地工作。 但 Git 是專門為與他人合作而建構的。 讓我介紹一下_遙控器_。 ### 遙控器 當您_複製_儲存庫時，該儲存庫將成為本機儲存庫的_遠端_，名為「origin」（就像「main」分支一樣，這只是預設值，名稱本身沒有什麼特別的，除了有時用作省略命令參數時的預設值）。然後，您將開始工作，建立本地提交和分支（因此從遠端_forking_），同時遠端可能會從其作者那裡獲得更多提交和分支。因此，您需要將這些遠端變更同步到本機儲存庫，並希望快速了解與遠端相比您在本機所做的變更。 Git 處理這個問題的方式是在一個特殊的命名空間中記錄它所知道的遠端（主要是分支）的狀態：「refs/remote/」。這些被稱為[_遠端追蹤分支_](https://blog.ltgt.net/confusing-git-terminology/#untracked-files-remote-tracking-branch-track-remote-branch)。 Fwiw，本機分支儲存在「refs/heads/」命名空間中，標籤儲存在「refs/tags/」中（來自遠端的標籤通常直接「匯入」到「refs/tags/」中，因此例如您會遺失位置資訊他們來自）。您可以根據需要擁有任意多個遙控器，每個遙控器都有一個名稱。 （請注意，遙控器不一定位於其他電腦上，它們實際上可以位於同一台電腦上，直接從檔案系統存取，因此您無需進行任何設定即可使用遙控器。） ### 取得 每當你從遠端 _fetch_ 時（使用 `git fetch`、`git pull` 或 `git Remote update`），Git 都會與它對話以下載它還不知道的提交，並更新 _remote-tracking遠端分支_ 。要取得的確切引用集以及取得它們的位置將傳遞給 `git fetch` 命令（如 [refspecs](https://blog.ltgt.net/confusing-git-terminology/#refspecs) ）以及儲存庫的` .git/config` 中定義的預設值，預設由`git clone` 或`git remote add` 配置以取得所有分支（遠端上的`refs/heads/` 中的所有內容）並放置它們位於` refs/remote/<remote>` 中（因此`origin` 遙控器的`refs/remote/origin/` ）具有相同的名稱（因此遙控器上的`refs/heads/main` 變成`refs/remote / origin/main` 本地）。 <圖> <img src=https://git-scm.com/book/en/v2/images/remote-branches-5.png width=800 height=577 alt='帶有3 個大方框的圖表，代表機器或儲存庫，包含代表提交歷史的較小框和箭頭；一個框標記為“git.outcompany.com”，子標記為“origin”，並包含名為“master”的分支中的提交；另一個框標記為“git.team1.outcompany.com”，子標記為“teamone”，並包含名為“master”的分支中的提交； 「origin」和「teamone」中的提交 SHA1 雜湊值相同，除了「origin」在其「master」分支上多了一個提交，即「teamone」在「後面」；第三個框標記為“我的電腦”，它包含與其他兩個框相同的提交，但這次分支被命名為“origin/master”和“teamone/master”；它還在名為“master”的分支中包含另外兩個提交，與遠端分支的較早點不同。'> <figcaption>遠端和遠端追蹤分支（來源：<a href=https://git-scm.com/book/en/v2/Git-Branching-Remote-Branches><cite>Pro Git</cite>< / a>)</figcaption> </圖> 然後，您將使用與分支相關的命令來獲取從_遠端追蹤分支_到本地分支的更改（“git merge”或“git rebase”），或“git pull”，這只不過是“git fetch”的簡寫` 後面跟著 `git merge` 或 `git rebase`。 <abbr title="By the way">順便說一句</abbr>，在很多情況下，當你建立本地分支時，Git 會自動將_遠端追蹤分支_設定為本地分支的_上游_（它會告訴你相關資訊）當這種情況發生時）。 ### 推 要與其他人共用您的更改，他們可以將您的儲存庫新增為遠端儲存庫並從中_pull_（意味著透過網路存取您的電腦），或者您可以_push_到遠端儲存庫。 （如果您要求某人從您的遙控器中提取更改，這稱為..._拉請求_，您可能在 GitHub 或類似服務中聽說過這個術語。） 推送與提取類似，相反：您將提交發送到遠端並更新其分支以指向新提交。作為安全措施，Git 只允許遠端分支_快速轉送_；如果您想推送以非快轉方式更新遠端分支的更改，則必須使用「git push --force-with-lease」（或「git push --force」）_force_它，但要小心：`-- force-with-lease`將首先確保您的_遠端追蹤分支_與遠端分支是最新的，以確保自上次_fetched_以來沒有人將變更推送到分支；` --force` 不會執行該檢查，而是按照您的指示執行操作，風險由您自己承擔）。 與「git fetch」一樣，您可以將要更新的分支傳遞給「git push」命令，但如果您不這樣做，Git 會提供良好的預設行為。如果你不指定任何東西，Git 會從目前分支的上游推斷遠程，所以大多數時候 `git push` 相當於 `git push origin`。這實際上是“git Push origin main”的簡寫（假設當前分支是“main”），它本身是“git Push origin main:main”的簡寫，是“git Push origin refs/heads/main:refs/”的簡寫heads/main`，意思是將本地的`refs/heads/main`推送到`origin`遠端的`refs/heads/main`。有關使用不同來源和目標指定 _refspecs_ 的一些用例，請參閱[我之前的文章](https://blog.ltgt.net/confusing-git-terminology/#refspecs)。 <圖> <img src=https://lurklurk.org/gitpix/push2.svg width=1052 height=744 alt='代表「git push」指令的圖表，有四個 git 圖表（點，有些有標籤，用線連接) 排列成兩行兩列；列之間的箭頭表示左列是「之前」狀態，右列是「之後」狀態；上面一行中的圖位於雲內部，代表遠端儲存庫，並且有兩個分支，“master”和“other”，它們偏離了共同的祖先；左下圖與上面的圖形狀相同，只是標籤更改為“origin/master”和“origin/other”，並且每個分支有更多提交：與“origin”分支相比，“master”分支有兩個額外的提交/master”，而“other”比“origin/other”多了一個提交；與左上圖相比，右上圖在其「master」分支中多了兩次提交；右下圖與左下圖相同，除了「origin/master」現在指向與「master」相同的提交；換句話說，在「之前」狀態下，遠端缺少三個提交，而在「git Push」之後，本地「master」分支的兩個提交被複製到遠端，而「其他」保持不變。'> <figcaption><code>git Push</code>（資料來源：<a href=https://lurklurk.org/gitpix/gitpix.html><cite>Git 視覺參考</cite></a>，David Drysdale ）</圖標題> </圖> 更多詳細資訊和視覺表示，請參閱[<cite>遠端分支</cite>](https://git-scm.com/book/en/v2/Git-Branching-Remote-Branches)，[< cite >使用遙控器</cite>](https://git-scm.com/book/en/v2/Git-Basics-Working-with-Remotes)，以及[<cite>為專案做出貢獻</ cite> ](https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project) <cite>Pro Git</cite> 書的子章節，以及「處理遠程來自David Drysdale 的[<cite>Git Visual Reference</cite>](https://lurklurk.org/gitpix/gitpix.html) 的「儲存庫」圖表。 <cite>Pro Git</cite> 的<cite>為專案做出貢獻</cite>一章也涉及在GitHub 等平台上為開源專案做出貢獻，您必須先_fork_儲存庫，然後透過_pull requests_進行貢獻（或_合併請求_）。 ## 最佳實踐 這些是針對初學者的，希望不會引起太多爭議。 嘗試保留_clean_歷史記錄： * 明智地使用合併提交 * 清晰且高品質的提交訊息（請參閱[<cite>提交指南</cite>](https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project #_commit_guidelines）在<cite>Pro Git</cite> 中） * make _atomic_ commits：每個提交應該獨立於歷史記錄中跟隨它的提交進行編譯和執行 這僅適用於您與他人分享的歷史記錄。 在本地，想怎麼做就怎麼做。對於初學者，我會給以下建議： * 不要直接在“main”（或“master”，或您在遠端上沒有專門擁有的任何分支）上工作，而是建立本機分支；它有助於解耦不同任務的工作：即將開始處理另一個錯誤或功能，同時等待有關當前任務的說明的更多詳細資訊？切換到另一個分支，稍後您可以透過切換回來回到該分支；它還使從遠端更新變得更容易，因為如果您的本地分支只是同名遠端分支的副本，沒有任何本地更改（除非您想推送這些更改），您確信不會發生衝突到該分支） * 毫不猶豫地重寫你的提交歷史記錄（`git commit --amend` 和/或 `git rebase -i`），但不要太早這樣做；在工作時堆疊許多小提交是完全可以的，並且只在共享之前重寫/清理歷史記錄 * 同樣，請毫不猶豫地重新調整本機分支以整合上游變更（直到您共用該分支，此時您將遵循專案的分支工作流程） 如果出現任何問題並且您迷路了，我的建議是使用 `gitk` 或 `gitk HEAD @{1}`，也可能使用 `gitk --all` （我在這裡使用 `gitk` 但使用任何工具你喜歡），可視化你的Git 歷史並嘗試了解發生了什麼。由此，您可以回滾到先前的狀態（`git reset @{1}`）或嘗試修復問題（擇優選擇提交等）。合併失敗，您可以使用“git rebase --abort”或“git merge - -abort」等命令中止並回滾到先前的狀態。 為了讓事情變得更簡單，請不要猶豫，在任何可能具有破壞性的命令（`git rebase`）之前，建立一個分支或標籤作為“書籤”，如果事情沒有按預期進行，您可以輕鬆重置。當然，在執行這樣的命令後，請檢查歷史記錄和文件，以確保結果是您所期望的。 ## 進階概念 這只是其中的一小部分，還有更多值得探索！ * 分離的「HEAD」：[`git checkout` 手冊頁](https://git-scm.com/docs/git-checkout#_detached_head) 有一個關於該主題的很好的部分，另請參閱[我之前的帖子](https ://blog.ltgt.net/confusing-git-terminology/#detached-head-state），要獲得良好的視覺表示，請參閱[<cite>使用分離的HEAD 進行提交</ cite>](https:// /marklodato.github.io/visual-git-guide/index-en.html#detached) Mark Lodato 的 <cite>視覺化 Git 參考</cite> 部分。 * Hooks：這些是可執行檔（大多數情況下是 shell 腳本），Git 將執行它們來回應儲存庫上的操作；人們使用它們在每次提交之前檢查程式碼（如果失敗則中止提交），產生或後處理提交訊息，或在有人推送到儲存庫後觸發伺服器上的操作（觸發建置和/或部署）。 * 一些很少需要的命令可以在您真正需要時節省您的時間： * `git bisect`：一個進階命令，透過測試多個提交（手動或透過腳本）來幫助您找出哪個提交引入了錯誤；對於線性歷史，這是使用二分法並且可以手動完成，但是一旦您有許多合併提交，這就會變得更加複雜，並且最好讓 git bisect 來完成繁重的工作。 * `git filter-repo`：實際上是一個[第三方命令](https://github.com/newren/git-filter-repo)，作為Git 自己的`filter-branch` 的替代品，它允許重寫儲存庫的整個歷史記錄，以刪除錯誤新增的文件，或協助將儲存庫的一部分提取到另一個儲存庫。 我們完成了。 有了這些知識，人們應該能夠將任何 Git 命令映射到如何修改提交的_有向無環圖_，並了解如何修復錯誤（在錯誤的分支上執行合併？基於錯誤的分支重新建置？）並不是說理解這些事情會很容易，但至少應該是可能的。 --- 原文出處：https://dev.to/tbroyer/how-i-teach-git-3nj3

0個讚   0留言 144瀏覽

大資料模型 📊 與電腦記憶體 💾

資料管道是任何資料密集型專案的支柱。 **隨著資料集的成長**超出記憶體大小（「核心外」），**有效處理它們變得具有挑戰性**。 Dask 可以輕鬆管理大型資料集（核心外），提供與 Numpy 和 Pandas 的良好相容性。 ![管道](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6nswebbzlo96ml1ofeb.png) --- 本文重點介紹 **Dask（用於處理核心外資料）與 Taipy** 的無縫集成，Taipy** 是一個用於 **管道編排和場景管理** 的 Python 庫。 --- ## Taipy - 您的 Web 應用程式建構器 關於我們的一些資訊。 **Taipy** 是一個開源程式庫，旨在輕鬆開發前端 (GUI) 和 ML/資料管道。 不需要其他知識（沒有 CSS，什麼都不需要！）。 它旨在加快應用程式開發，從最初的原型到生產就緒的應用程式。 ![QueenB 星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvt5qn1yadra3epnb07v.gif) https://github.com/Avaiga/taipy 我們已經快有 1000 顆星了，沒有你就無法做到這一點🙏 --- ## 1. 範例應用程式 透過範例最好地演示了 Dask 和 Taipy 的整合。在本文中，我們將考慮包含 4 個任務的資料工作流程： - **資料預處理與客戶評分** 使用 Dask 讀取和處理大型資料集。 - **特徵工程和分割** 根據購買行為對客戶進行評分。 - **細分分析** 根據這些分數和其他因素將客戶分為不同的類別。 - **高價值客戶的總統計** 分析每個客戶群以獲得見解 我們將更詳細地探討這 4 個任務的程式碼。 請注意，此程式碼是您的 Python 程式碼，並未使用 Taipy。 在後面的部分中，我們將展示如何使用 Taipy 對現有資料應用程式進行建模，並輕鬆獲得其工作流程編排的好處。 --- 該應用程式將包含以下 5 個檔案： ``` algos/ ├─ algo.py # Our existing code with 4 tasks data/ ├─ SMALL_amazon_customers_data.csv # A sample dataset app.ipynb # Jupyter Notebook for running our sample data application config.py # Taipy configuration which models our data workflow config.toml # (Optional) Taipy configuration in TOML made using Taipy Studio ``` --- ## 2. Taipy 簡介 - 綜合解決方案 [Taipy](https://docs.taipy.io/) **不只是另一個編排工具**。 Taipy 專為 ML 工程師、資料科學家和 Python 開發人員設計，帶來了幾個基本且簡單的功能。 以下是**一些關鍵要素**，使 Taipy 成為令人信服的選擇： 1. **管道執行註冊表** 此功能使開發人員和最終用戶能夠： - 將每個管道執行註冊為「*場景*」（任務和資料節點圖）； - 精確追蹤每個管道執行的沿襲；和 - 輕鬆比較場景、監控 KPI 並為故障排除和微調參數提供寶貴的見解。 2. **管道版本控制** Taipy 強大的場景管理使您能夠輕鬆調整管道以適應不斷變化的專案需求。 3. **智能任務編排** Taipy 讓開發人員可以輕鬆地對任務和資料來源網路進行建模。 此功能透過以下方式提供對任務執行的內建控制： - 並行執行您的任務；和 - 任務“跳過”，即選擇要執行的任務並 要繞過哪個。 4. **任務編排的模組化方法** 模組化不僅僅是 Taipy 的一個流行詞；這是一個核心原則。 設定可以互換使用的任務和資料來源，從而產生更乾淨、更易於維護的程式碼庫。 --- ## 3. Dask 簡介 Dask 是一個流行的分散式運算 Python 套件。 Dask API 實作了熟悉的 Pandas、Numpy 和 Scikit-learn API - ，這使得許多已經熟悉這些 API 的資料科學家更愉快地學習和使用 Dask。 如果您是 Dask 新手，請查看 Dask 團隊撰寫的精彩 Dask [10 分鐘簡介](https://docs.dask.org/en/stable/10-minutes-to-dask.html)。 --- ## 4. 應用：顧客分析 (*algos/algo.py*) ![DAG 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ru69b6jmhl73s9xxx2n.png) *我們的 4 項任務的圖表（在 Taipy 中可視化），我們將在下一節中對其進行建模。* 我們現有的程式碼（不含 Taipy）包含 4 個函數，您也可以在上圖中看到： - 任務 1：*預處理和評分* - 任務 2：*特徵化與細分* - 任務 3：*分段分析* - 任務 4：*high_value_cust_summary_statistics* 您可以瀏覽以下定義了 4 個函數的 *algos/algo.py* 腳本，然後繼續閱讀每個函數的簡要說明： ``` ### algos/algo.py import time import dask.dataframe as dd import pandas as pd def preprocess_and_score(path_to_original_data: str): print("__________________________________________________________") print("1. TASK 1: DATA PREPROCESSING AND CUSTOMER SCORING ...") start_time = time.perf_counter() # Start the timer # Step 1: Read data using Dask df = dd.read_csv(path_to_original_data) # Step 2: Simplify the customer scoring formula df["CUSTOMER_SCORE"] = ( 0.5 * df["TotalPurchaseAmount"] / 1000 + 0.3 * df["NumberOfPurchases"] / 10 + 0.2 * df["AverageReviewScore"] ) # Save all customers to a new CSV file scored_df = df[["CUSTOMER_SCORE", "TotalPurchaseAmount", "NumberOfPurchases", "TotalPurchaseTime"]] pd_df = scored_df.compute() end_time = time.perf_counter() # Stop the timer execution_time = (end_time - start_time) * 1000 # Calculate the time in milliseconds print(f"Time of Execution: {execution_time:.4f} ms") return pd_df def featurization_and_segmentation(scored_df, payment_threshold, score_threshold): print("__________________________________________________________") print("2. TASK 2: FEATURE ENGINEERING AND SEGMENTATION ...") # payment_threshold, score_threshold = float(payment_threshold), float(score_threshold) start_time = time.perf_counter() # Start the timer df = scored_df # Feature: Indicator if customer's total purchase is above the payment threshold df["HighSpender"] = (df["TotalPurchaseAmount"] > payment_threshold).astype(int) # Feature: Average time between purchases df["AverageTimeBetweenPurchases"] = df["TotalPurchaseTime"] / df["NumberOfPurchases"] # Additional computationally intensive features df["Interaction1"] = df["TotalPurchaseAmount"] * df["NumberOfPurchases"] df["Interaction2"] = df["TotalPurchaseTime"] * df["CUSTOMER_SCORE"] df["PolynomialFeature"] = df["TotalPurchaseAmount"] ** 2 # Segment customers based on the score_threshold df["ValueSegment"] = ["High Value" if score > score_threshold else "Low Value" for score in df["CUSTOMER_SCORE"]] end_time = time.perf_counter() # Stop the timer execution_time = (end_time - start_time) * 1000 # Calculate the time in milliseconds print(f"Time of Execution: {execution_time:.4f} ms") return df def segment_analysis(df: pd.DataFrame, metric): print("__________________________________________________________") print("3. TASK 3: SEGMENT ANALYSIS ...") start_time = time.perf_counter() # Start the timer # Detailed analysis for each segment: mean/median of various metrics segment_analysis = ( df.groupby("ValueSegment") .agg( { "CUSTOMER_SCORE": metric, "TotalPurchaseAmount": metric, "NumberOfPurchases": metric, "TotalPurchaseTime": metric, "HighSpender": "sum", # Total number of high spenders in each segment "AverageTimeBetweenPurchases": metric, } ) .reset_index() ) end_time = time.perf_counter() # Stop the timer execution_time = (end_time - start_time) * 1000 # Calculate the time in milliseconds print(f"Time of Execution: {execution_time:.4f} ms") return segment_analysis def high_value_cust_summary_statistics(df: pd.DataFrame, segment_analysis: pd.DataFrame, summary_statistic_type: str): print("__________________________________________________________") print("4. TASK 4: ADDITIONAL ANALYSIS BASED ON SEGMENT ANALYSIS ...") start_time = time.perf_counter() # Start the timer # Filter out the High Value customers high_value_customers = df[df["ValueSegment"] == "High Value"] # Use summary_statistic_type to calculate different types of summary statistics if summary_statistic_type == "mean": average_purchase_high_value = high_value_customers["TotalPurchaseAmount"].mean() elif summary_statistic_type == "median": average_purchase_high_value = high_value_customers["TotalPurchaseAmount"].median() elif summary_statistic_type == "max": average_purchase_high_value = high_value_customers["TotalPurchaseAmount"].max() elif summary_statistic_type == "min": average_purchase_high_value = high_value_customers["TotalPurchaseAmount"].min() median_score_high_value = high_value_customers["CUSTOMER_SCORE"].median() # Fetch the summary statistic for 'TotalPurchaseAmount' for High Value customers from segment_analysis segment_statistic_high_value = segment_analysis.loc[ segment_analysis["ValueSegment"] == "High Value", "TotalPurchaseAmount" ].values[0] # Create a DataFrame to hold the results result_df = pd.DataFrame( { "SummaryStatisticType": [summary_statistic_type], "AveragePurchaseHighValue": [average_purchase_high_value], "MedianScoreHighValue": [median_score_high_value], "SegmentAnalysisHighValue": [segment_statistic_high_value], } ) end_time = time.perf_counter() # Stop the timer execution_time = (end_time - start_time) * 1000 # Calculate the time in milliseconds print(f"Time of Execution: {execution_time:.4f} ms") return result_df ``` --- ### 任務 1 - 資料預處理與客戶評分 Python 函數：*preprocess_and_score* 這是管道中的第一步，也許也是最關鍵的一步。 它使用 **Dask** 讀取大型資料集，專為大於記憶體的計算而設計。 然後，它根據“*TotalPurchaseAmount*”、“*NumberOfPurchases*”和“*AverageReviewScore*”等各種指標，在名為 *scored_df* 的 DataFrame 中計算“*Customer Score*”。 使用 Dask 讀取和處理資料集後，此任務將輸出一個 Pandas DataFrame，以供其餘 3 個任務進一步使用。 --- ### 任務 2 - 特徵工程與分割 Python 函數：*featureization_and_segmentation* 此任務採用評分的 DataFrame 並新增功能，例如高支出指標。 它還根據客戶的分數對客戶進行細分。 --- ### 任務 3 - 細分分析 Python 函數：*segment_analysis* 此任務採用分段的 DataFrame 並根據客戶細分執行分組分析以計算各種指標。 --- ### 任務 4 - 高價值客戶的總統計 Python 函數：*high_value_cust_summary_statistics* 此任務對高價值客戶群進行深入分析並傳回匯總統計資料。 --- ## 5. 在 Taipy 中建模工作流程 (*config.py*) ![工作室中的 DAG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kyz7k3akkcbs48psodi.png) *Taipy DAG — Taipy「任務」為橘色，「資料節點」為藍色。* 在本節中，我們將建立對變數/參數進行建模的Taipy 配置（表示為[“資料節點”](https://docs.taipy.io/en/latest/manuals/core/concepts/data-node/ )）和 Taipy 中的函數（表示為 [“Tasks”](https://docs.taipy.io/en/latest/manuals/core/concepts/task/)）。 --- 請注意，以下 *config.py* 腳本中的此配置類似於定義變數和函數 - 只不過我們定義的是「藍圖變數」（資料節點）和「藍圖函數」（任務）。 我們通知 Taipy 如何呼叫我們之前定義的函數、資料節點的預設值（我們可能會在執行時覆蓋）以及是否可以跳過任務： ``` ### config.py from taipy import Config from algos.algo import ( preprocess_and_score, featurization_and_segmentation, segment_analysis, high_value_cust_summary_statistics, ) # -------------------- Data Nodes -------------------- path_to_data_cfg = Config.configure_data_node(id="path_to_data", default_data="data/customers_data.csv") scored_df_cfg = Config.configure_data_node(id="scored_df") payment_threshold_cfg = Config.configure_data_node(id="payment_threshold", default_data=1000) score_threshold_cfg = Config.configure_data_node(id="score_threshold", default_data=1.5) segmented_customer_df_cfg = Config.configure_data_node(id="segmented_customer_df") metric_cfg = Config.configure_data_node(id="metric", default_data="mean") segment_result_cfg = Config.configure_data_node(id="segment_result") summary_statistic_type_cfg = Config.configure_data_node(id="summary_statistic_type", default_data="median") high_value_summary_df_cfg = Config.configure_data_node(id="high_value_summary_df") # -------------------- Tasks -------------------- preprocess_and_score_task_cfg = Config.configure_task( id="preprocess_and_score", function=preprocess_and_score, skippable=True, input=[path_to_data_cfg], output=[scored_df_cfg], ) featurization_and_segmentation_task_cfg = Config.configure_task( id="featurization_and_segmentation", function=featurization_and_segmentation, skippable=True, input=[scored_df_cfg, payment_threshold_cfg, score_threshold_cfg], output=[segmented_customer_df_cfg], ) segment_analysis_task_cfg = Config.configure_task( id="segment_analysis", function=segment_analysis, skippable=True, input=[segmented_customer_df_cfg, metric_cfg], output=[segment_result_cfg], ) high_value_cust_summary_statistics_task_cfg = Config.configure_task( id="high_value_cust_summary_statistics", function=high_value_cust_summary_statistics, skippable=True, input=[segment_result_cfg, segmented_customer_df_cfg, summary_statistic_type_cfg], output=[high_value_summary_df_cfg], ) scenario_cfg = Config.configure_scenario( id="scenario_1", task_configs=[ preprocess_and_score_task_cfg, featurization_and_segmentation_task_cfg, segment_analysis_task_cfg, high_value_cust_summary_statistics_task_cfg, ], ) ``` 號 您可以在[此處的文件](https://docs.taipy.io/en/latest/manuals/core/config/)中閱讀有關配置場景、任務和資料節點的更多資訊。 --- ### Taipy Studio [Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/config/) **是來自Taipy 的VS Code 擴充功能**，讓您**透過簡單的方式建置和視覺化您的管道拖放互動**。 Taipy Studio 提供了一個圖形編輯器，您可以在其中建立 Taipy 配置**存儲在 TOML 文件中**，您的 Taipy 應用程式可以加載並執行這些配置。 編輯器將場景表示為圖形，其中節點是資料節點和任務。 --- *作為本節中 config.py 腳本的替代方案，您可以使用 Taipy Studio 產生 config.toml 設定檔。 本文的倒數第二部分將提供有關如何使用 Taipy Studio 建立 config.toml 設定檔的指南。* --- ## 6. 場景建立與執行 執行 Taipy 場景涉及： - 載入配置； - 執行 Taipy Core 服務；和 - 建立並提交場景以供執行。 這是基本的程式碼模板： ``` import taipy as tp from config import scenario_cfg # Import the Scenario configuration tp.Core().run() # Start the Core service scenario_1 = tp.create_scenario(scenario_cfg) # Create a Scenario instance scenario_1.submit() # Submit the Scenario for execution # Total runtime: 74.49s ``` --- ### 跳過不必要的任務執行 Taipy 最實用的功能之一是，如果任務的輸出已經計算出來，它能夠跳過任務執行。 讓我們透過一些場景來探討這一點： --- #### 更改付款閾值 ``` # Changing Payment Threshold to 1600 scenario_1.payment_threshold.write(1600) scenario_1.submit() # Total runtime: 31.499s ``` *發生了什麼事*：Taipy 夠聰明，可以跳過任務 1，因為付款閾值只影響任務 2。 在這種情況下，透過使用 Taipy 執行管道，我們發現執行時間減少了 50% 以上。 --- #### 更改細分分析指標 ``` # Changing metric to median scenario_1.metric.write("median") scenario_1.submit() # Total runtime: 23.839s ``` *會發生什麼事*：在這種情況下，只有任務 3 和任務 4 受到影響。 Taipy 巧妙地跳過任務 1 和任務 2。 --- #### 更改總計統計類型 ``` # Changing summary_statistic_type to max scenario_1.summary_statistic_type.write("max") scenario_1.submit() # Total runtime: 5.084s ``` *發生了什麼事*：這裡，只有任務 4 受到影響，Taipy 僅執行此任務，跳過其餘任務。 Taipy 的智慧任務跳過功能不僅能節省時間，還能節省時間。它是一個資源優化器，在處理大型資料集時變得非常有用。 --- ## 7. Taipy Studio 您可以使用 Taipy Studio 建置 Taipy *config.toml* 設定檔來取代定義 *config.py* 腳本。 ![Studio 內的 DAG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct0bcisreqmg56mk4fgm.png) 首先，使用擴展市場安裝 [Taipy Studio ](https://marketplace.visualstudio.com/items?itemName=Taipy.taipy-studio)擴充。 --- ### 建立配置 - **建立設定檔**：在 VS Code 中，導覽至 Taipy Studio，然後透過點擊參數視窗上的 + 按鈕啟動新的 TOML 設定檔。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jqe1fq87jaauf56b7hg.png) - 然後右鍵單擊它並選擇 **Taipy：顯示視圖**。 ![配置顯示視圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7rkyipli0oq13iw8mxc.png) - **新增實體**到您的 Taipy 配置： 在 Taipy Studio 的右側，您應該會看到一個包含 3 個圖示的列表，可用於設定管道。 ![配置圖示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyxvv15nu9xr87n5y7q1.png) 1. 第一項是新增資料節點。您可以將任何 Python 物件連結到 Taipy 的資料節點。 2. 第二項用於新增任務。任務可以連結到預先定義的 Python 函數。 3. 第三項是新增場景。 Taipy 讓您在一個配置中擁有多個場景。 --- #### - 資料節點 **輸入資料節點**：建立一個名為“*path_to_data*”的資料節點，然後導航到“詳細資料”選項卡，新增屬性“*default_data*”，並將“*SMALL_amazon_customers_data.csv*”貼上為您的資料的路徑資料集。 --- **中間資料節點**：我們需要再增加四個資料節點：「*scored_df*」、「*segmented_customer_df*」、「*segment_result*」、「*high_value_summary_df*」。透過 Taipy 的智慧設計，您無需為這些中間資料節點進行任何配置；系統會巧妙地處理它們。 --- **具有預設值的中間資料節點**：我們最終定義了另外四個中間資料節點，並將「*default_data*」屬性設為以下內容： - payment_threshold: “1000:int” ![資料節點檢視](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odkrz0pq2dhqpm0gnta2.png) - 分數閾值：“1.5：浮動” - 測量：“平均值” -summary_statistic_type：“中位數” --- #### - 任務 點擊新增任務按鈕，您可以配置新任務。 新增四個任務，然後**將每個任務連結到「詳細資料」標籤下的對應函數**。 Taipy Studio 將掃描您的專案資料夾並提供可供選擇的分類函數列表，並按 Python 檔案排序。 --- **任務 1** (*preprocess_and_score*)：在 Taipy studio 中，您可以按一下「任務」圖示以新增任務。 您可以將輸入指定為“*path_to_data*”，將輸出指定為“*scored_df*”。 然後，在「詳細資料」標籤下，您可以將此任務連結到 *algos.algo.preprocess_and_score* 函數。 ![任務流程及評分](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnc57wbxafjh2s3m6fat.png) --- **任務 2** (*featurization_and_segmentation*)：與任務 1 類似，您需要指定輸入 (“*scored_df*”、“* payment_threshold*”、“*score_threshold*”) 和輸出 (“*segmented_customer_df*”) ” ）。將此任務連結到 *algos.algo.featurization_and_segmentation* 函數。 ![任務特徵化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbtm200u9meq1x1rcy2w.png) --- **任務 3** (*segment_analysis*)：輸入為“*segmented_customer_df*”和“*metric*”，輸出為“*segment_result*”。 連結到 *algos.algo.segment_analysis* 函數。 ![任務片段分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnnl1w1q0blebzbyawvt.png) --- **任務 4** (high_value_cust_summary_statistics)：輸入包含「*segment_result*」、「*segmented_customer_df*」和「*summary_statistic_type*」。輸出為“*high_value_summary_df*”。連結到 *algos.algo.high_value_cust_summary_statistics* 函數。 ![任務統計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tynu6e718z1dwf8id05m.png) --- ## 結論 Taipy 提供了一種**智慧方式來建立和管理資料管道**。 特別是可跳過的功能使其成為優化運算資源和時間的強大工具，在涉及大型資料集的場景中特別有用。 Dask 提供了資料操作的原始能力，而 Taipy 增加了一層智能，使您的管道不僅強大而且智能。 --- 其他資源 如需完整程式碼和 TOML 配置，您可以存取此 [GitHub 儲存庫](https://github.com/Avaiga/demo-dask-customer-analysis/tree/develop)。若要深入了解 Taipy，請參閱[官方文件](https://docs.taipy.io/en/latest/)。 一旦您了解 Taipy 場景管理，您就可以更有效率地為最終用戶建立資料驅動的應用程式。只需專注於您的演算法，Taipy 就會處理剩下的事情。 --- ![很多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua3x4t3yttba6g25jjqo.gif) 希望您喜歡這篇文章！ --- 原文出處：https://dev.to/taipy/big-data-models-vs-computer-memory-4po6

0個讚   0留言 144瀏覽

🚀 發送 Github 星星監測通知的 4 種方式 ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

# 簡介 在上一篇文章中，我討論了建立一個[GitHub stars 監視器](https://dev.to/triggerdotdev/take-nextjs-to-the-next-level-create-a-github-stars-monitor-130a)。 在這篇文章中，我想向您展示如何每天了解新星的資訊。 我們將學習： - 如何建立通用系統來建立和使用提供者。 - 如何使用提供者發送通知。 - 使用不同提供者的不同用例。 ![通知](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uwpjomw3pbrpq885q8z.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 --- ## 讓我們來設定一下 🔥 我們將建立不同的提供者來通知我們何時有新的明星。我們將設定「電子郵件」、「簡訊」、「Slack」和「Discord」通知。 我們的目標是讓每個貢獻者都足夠簡單，以便在未來貢獻更多的提供者。 每個提供者都會有一組不同的參數，有些只有“API 金鑰”，有些則有電話號碼，具體取決於提供者。 為了驗證這些金鑰，讓我們安裝“zod”；它是一個很棒的庫，可以定義模式並根據模式檢查資料。 您可以透過執行以下命令開始： ``` npm install zod --save ``` 完成後，建立一個名為「providers」的新資料夾，然後在其中建立一個名為「register.provider.ts」的新檔案。 這是文件的程式碼： ``` import {Schema} from "zod"; export function registerProvider<T>( name: string, options: {active: boolean}, validation: Schema<T>, run: (libName: string, stars: number, values: T) => Promise<void> ) { // if not active, we can just pass an empty function, nothing will run if (!options.active) { return () => {}; } // will validate and remove unnecessary values (Security wise) const env = validation.parse(process.env); // return the function we will run at the end of the job return async (libName: string, stars: number) => { console.log(`Running provider ${name}`); await run(libName, stars, env as T); console.log(`Finished running provider ${name}`); } } ``` 程式碼不多，但可能有點複雜。 我們首先建立一個名為「registerProvider」的新函數。該函數獲得一個通用類型“T”，基本上是我們所需的環境變數。 然後我們還有 4 個參數： - 名稱 - 可以是「Twilio」、「Discord」、「Slack」或「Resend」中的任何一個。 - 選項 - 目前，一個參數是提供者是否處於活動狀態？ - 驗證 - 在這裡，我們在 .env 檔案中傳遞所需參數的「zod」模式。 - run - 實際上用於發送通知。請注意，傳入其中的參數是庫名稱、星星數量以及我們在「validation」中指定的環境變數 **然後我們就有了實際的功能：** 首先，我們檢查提供者是否處於活動狀態。如果沒有，我們發送一個空函數。 然後，我們驗證並提取我們在模式中指定的變數。如果變數缺少 `zod` 將發送錯誤並且不會讓應用程式執行。 最後，我們傳回一個函數，該函數會取得庫名稱和星星數量並觸發通知。 在我們的「providers」資料夾中，建立一個名為「providers.ts」的新文件，並在其中新增以下程式碼： ``` export const Providers = []; ``` 稍後，我們將在那裡加入所有提供者。 --- ## 修改 TriggerDev 作業 本文是上一篇關於建立 [GitHub stars 監視器](https://dev.to/triggerdotdev/take-nextjs-to-the-next-level-create-a-github-stars-monitor-130a)。 編輯檔案 `jobs/sync.stars.ts` 並將以下程式碼加入檔案底部： ``` const triggerNotification = client.defineJob({ id: "trigger-notification", name: "Trigger Notification", version: "0.0.1", trigger: invokeTrigger({ schema: z.object({ stars: z.number(), library: z.string(), providerNumber: z.number(), }) }), run: async (payload, io, ctx) => { await io.runTask("trigger-notification", async () => { return Providers[payload.providerNumber](payload.library, payload.stars); }); } }); ``` 此作業取得星星數量、圖書館名稱和提供者編號，並從先前定義的提供者觸發特定提供者的通知。 現在，我們繼續修改“getStars”，在函數末尾加入以下程式碼： ``` for (let i = 0; i < Providers.length; i++) { await triggerNotification.invoke(payload.name + '-' + i, { library: payload.name, stars: stargazers_count - payload.previousStarCount, providerNumber: i, }); } ``` 這將觸發每個圖書館的通知。 完整頁面程式碼： ``` import { cronTrigger, invokeTrigger } from "@trigger.dev/sdk"; import { client } from "@/trigger"; import { prisma } from "../../helper/prisma"; import axios from "axios"; import { z } from "zod"; import {Providers} from "@/providers/providers"; // Your first job // This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline. client.defineJob({ id: "sync-stars", name: "Sync Stars Daily", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: cronTrigger({ cron: "0 23 * * *", }), run: async (payload, io, ctx) => { const repos = await io.runTask("get-stars", async () => { // get all libraries and current amount of stars return await prisma.repository.groupBy({ by: ["name"], _sum: { stars: true, }, }); }); //loop through all repos and invoke the Job that gets the latest stars for (const repo of repos) { await getStars.invoke(repo.name, { name: repo.name, previousStarCount: repo?._sum?.stars || 0, }); } }, }); const getStars = client.defineJob({ id: "get-latest-stars", name: "Get latest stars", version: "0.0.1", // Run a cron every day at 23:00 AM trigger: invokeTrigger({ schema: z.object({ name: z.string(), previousStarCount: z.number(), }), }), run: async (payload, io, ctx) => { const stargazers_count = await io.runTask("get-stars", async () => { const {data} = await axios.get(`https://api.github.com/repos/${payload.name}`, { headers: { authorization: `token ${process.env.TOKEN}`, }, }); return data.stargazers_count as number; }); await io.runTask("upsert-stars", async () => { await prisma.repository.upsert({ where: { name_day_month_year: { name: payload.name, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }, update: { stars: stargazers_count - payload.previousStarCount, }, create: { name: payload.name, stars: stargazers_count - payload.previousStarCount, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(), }, }); }); for (let i = 0; i < Providers.length; i++) { await triggerNotification.invoke(payload.name + '-' + i, { library: payload.name, stars: stargazers_count - payload.previousStarCount, providerNumber: i, }); } }, }); const triggerNotification = client.defineJob({ id: "trigger-notification", name: "Trigger Notification", version: "0.0.1", trigger: invokeTrigger({ schema: z.object({ stars: z.number(), library: z.string(), providerNumber: z.number(), }) }), run: async (payload, io, ctx) => { await io.runTask("trigger-notification", async () => { return Providers[payload.providerNumber](payload.library, payload.stars); }); } }); ``` 現在，有趣的部分🎉 讓我們繼續建立我們的提供者！ 首先建立一個名為「providers/lists」的新資料夾 --- ## 1. Discord ![Discord](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqw7u3s19vtffxc197up.png) 建立一個名為「discord.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; export const DiscordProvider = registerProvider( "discord", {active: true}, object({ DISCORD_WEBHOOK_URL: string(), }), async (libName, stars, values) => { await axios.post(values.DISCORD_WEBHOOK_URL, {content: `The library ${libName} has ${stars} new stars!`}); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 DiscordProvider 的新提供程序 - 我們將名稱設定為“discord” - 我們將其設定為活動狀態 - 我們指定需要一個名為「DISCORD_WEBHOOK_URL」的環境變數。 - 我們使用 Axios 的簡單 post 指令將資訊加入支票中。 若要取得“DISCORD_WEBHOOK_URL”： 1. 前往您的 Discord 伺服器 2. 點選其中一個頻道的“編輯” 3. 轉到“整合” 4. 點選“建立 Webhook” 5. 點選建立的 webhook，然後點選“複製 webhook URL” 在根專案上編輯“.env”檔案並加入 ``` SLACK_WEBHOOK_URL=<your copied url> ``` ![Spidy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyxvihf75afjubopy6dp.png) --- ## 2. Slack ![Slack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t9ep538nt39j0xylcqp.png) 建立一個名為「slack.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; export const SlackProvider = registerProvider( "slack", {active: true}, object({ SLACK_WEBHOOK_URL: string(), }), async (libName, stars, values) => { await axios.post(values.SLACK_WEBHOOK_URL, {text: `The library ${libName} has ${stars} new stars!`}); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 SlackProvider 的新提供者 - 我們將名稱設定為“slack” - 我們將其設定為活動狀態 - 我們指定需要一個名為「SLACK_WEBHOOK_URL」的環境變數。 - 我們使用 Axios 的簡單 post 指令將資訊加入支票中。 要取得“SLACK_WEBHOOK_URL”： 1. 使用下列 URL 建立新的 Slack 應用程式：https://api.slack.com/apps?new_app=1 2. 選擇第一個選項：“從頭開始” 3. 指定應用程式名稱（任意）以及您想要新增通知的 Slack 工作區。點擊“建立應用程式”。 4. 在“新增特性和功能”中，按一下“傳入掛鉤” 5. 在啟動傳入 Webhooks 中，將其變更為「開啟」。 6. 按一下「將新 Webhook 新增至工作區」。 7. 選擇您想要的頻道並點選「允許」。 8. 複製 Webhook URL。 在根專案上編輯“.env”檔案並加入 ``` SLACK_WEBHOOK_URL=<your copied url> ``` ![SlackBot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stlaf1xmprg629tjz7wv.png) --- ## 3. 電子郵件 ![電子郵件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq6t424munx90pdtzp7c.png) 您可以使用不同類型的電子郵件提供者。例如，我們將使用**Resend**來傳送電子郵件。 為此，讓我們在我們的專案上安裝重新發送： ``` npm install resend --save ``` 建立一個名為「resend.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; import { Resend } from 'resend'; export const ResendProvider = registerProvider( "resend", {active: true}, object({ RESEND_API_KEY: string(), }), async (libName, stars, values) => { const resend = new Resend(values.RESEND_API_KEY); await resend.emails.send({ from: "Eric Allam <[email protected]>", to: ['[email protected]'], subject: 'New GitHub stars', html: `The library ${libName} has ${stars} new stars!`, }); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 ResendProvider 的新提供程序 - 我們將名稱設定為“重新發送” - 我們將其設定為活動狀態 - 我們指定需要一個名為「RESEND_API_KEY」的環境變數。 - 我們使用重新發送庫向自己發送一封包含新星數的電子郵件。 若要取得“RESEND_API_KEY”： 1. 建立一個新帳戶：https://resend.com 2. 前往「API 金鑰」或使用此 URL https://resend.com/api-keys 3. 按一下“+ 建立 API 金鑰”，新增金鑰名稱，選擇“傳送存取”並使用預設的“所有網域”。單擊新增。 4. 複製 API 金鑰。 在根專案上編輯“.env”檔案並加入 ``` RESEND_API_KEY=<your API key> ``` ![埃里克·阿拉姆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhk2hd2f53yfojn96yf3.png) --- ## 4.簡訊 ![Twilio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/036fdgpt0mp5h7wrisrn.png) SMS 有點複雜，因為它們需要多個變數。 為此，我們在專案中安裝 Twilio： ``` npm install twilio --save ``` 建立一個名為「twilio.provider.ts」的新檔案並新增以下程式碼： ``` import {object, string} from "zod"; import {registerProvider} from "@/providers/register.provider"; import axios from "axios"; import client from 'twilio'; export const TwilioProvider = registerProvider( "twilio", {active: true}, object({ TWILIO_SID: string(), TWILIO_AUTH_TOKEN: string(), TWILIO_FROM_NUMBER: string(), TWILIO_TO_NUMBER: string(), }), async (libName, stars, values) => { const twilio = client(values.TWILIO_SID, values.TWILIO_AUTH_TOKEN); await twilio.messages.create({ body: `The library ${libName} has ${stars} new stars!`, from: values.TWILIO_FROM_NUMBER, to: values.TWILIO_TO_NUMBER, }); } ); ``` 如您所見，我們正在使用 `registerProvider` 建立一個名為 TwilioProvider 的新提供者 - 我們將名稱設定為“twilio” - 我們將其設定為活動狀態 - 我們指定需要環境變數：`TWILIO_SID`、`TWILIO_AUTH_TOKEN`、`TWILIO_FROM_NUMBER` 和 `TWILIO_TO_NUMBER` - 我們使用 Twilio「建立」功能發送簡訊。 取得“TWILIO_SID”、“TWILIO_AUTH_TOKEN”、“TWILIO_FROM_NUMBER”和“TWILIO_TO_NUMBER” 1. 在 https://twilio.com 建立一個新帳戶 2. 標記您要使用它來發送簡訊。 3. 點選“取得電話號碼” 4. 複製“帳戶 SID”、“身份驗證令牌”和“我的 Twilio 電話號碼” 在根專案上編輯“.env”檔案並加入 ``` TWILIO_SID=<your SID key> TWILIO_AUTH_TOKEN=<your AUTH TOKEN key> TWILIO_FROM_NUMBER=<your FROM number> TWILIO_TO_NUMBER=<your TO number> ``` ![TwilioSMS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/474q2p4ejvji18xuo9om.png) --- ## 建立新的提供者 正如您所看到的，現在建立提供者非常容易。 您也可以使用開源社群來建立新的提供程序，因為他們只需要在「providers/list」目錄中建立一個新檔案。 最後要做的事情是編輯“providers.ts”檔案並加入所有提供程序。 ``` import {DiscordProvider} from "@/providers/list/discord.provider"; import {ResendProvider} from "@/providers/list/resend.provider"; import {SlackProvider} from "@/providers/list/slack.provider"; import {TwilioProvider} from "@/providers/list/twilio.provider"; export const Providers = [ DiscordProvider, ResendProvider, SlackProvider, TwilioProvider, ]; ``` 請隨意建立更多推播通知、網路推播通知、應用程式內通知等提供者。 你就完成了🥳 --- ## 讓我們聯絡吧！ 🔌 作為開源開發者，我們邀請您加入我們的[社群](https://discord.gg/nkqV9xBYWy)，以做出貢獻並與維護者互動。請隨時造訪我們的 [GitHub 儲存庫](https://github.com/triggerdotdev/trigger.dev)，貢獻並建立與 Trigger.dev 相關的問題。 本教學的源程式碼可在此處取得： [https://github.com/triggerdotdev/blog/tree/main/stars-monitor-notifications](https://github.com/triggerdotdev/blog/tree/main/stars-monitor-notifications) 感謝您的閱讀！ --- 原文出處：https://dev.to/triggerdotdev/top-4-ways-to-send-notifications-about-new-stars-1cgb

0個讚   0留言 142瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 AI 驅動的前端 UI 元件產生器（Next.js、GPT4、Langchain 和 CopilotKit）
🔥 推出適用於 AWS 的新 Fullstack TypeScript DX
🔥 讓我保持高效率的工具
🔥 掌握關聯式資料庫設計：綜合指南
🔥 可用於下一個專案的 30 多個強大 AI 庫
  近期留言
熱門搜尋： module user 系列 Git 使用 題 nodes ci c for 開發 4 學習 1 go 前 2 第一 % C . 工作 專案 20 19 git 作為 語言 網站 前端 id app JS ui 10 作業 javascript CSS bi 主題 github 後端 api 50 AWS 網頁 ＣＳＳ COM API 技術 js AI 搜尋 html GIT 分享 查詢 測試 Github ` 工程師 Ai with jav " 結構 create REACT react 套件 練習 local Node Line 面試 非同步 HTML Javascript Java Vue class JavaScript ' Can 遊戲 資料庫 研究 聊天 自學網頁の嬰兒教材： 履歷 研 result prisma 分離 fetch unity python json JAVA import
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。