我使用正規表示式的經驗 =========== 我一直遠離正規表示式。在我第一年的電腦科學實驗室中，有一個涉及正規表示式的練習。我想那是我第一次被介紹給它。我當時認為這很酷，但看起來太難了，所以我一直在避免它，或者只是在谷歌上搜尋如何解決某個正規表示式問題。但我*終於*花了一些時間來正確學習它🎉  在閱讀了一些資源並涉獵之後，可以肯定地說我不再害怕正規表示式了！我發現自己在我所做的許多編碼練習中都使用了它。所需要的只是練習！以下是我根據我學到的正規表示式和我使用的資源編寫的備忘單（帶有範例） 備忘錄 === 我已經包含了一些我學到的 Javascript 中不可用的正規表示式。對於這些，我都註解掉了。如果需要的話請記住「g」修飾符！對於我的範例，我省略了修飾符。 ``` let regex; /* matching a specific string */ regex = /hello/; // looks for the string between the forward slashes (case-sensitive)... matches "hello", "hello123", "123hello123", "123hello"; doesn't match for "hell0", "Hello" regex = /hello/i; // looks for the string between the forward slashes (case-insensitive)... matches "hello", "HelLo", "123HelLO" regex = /hello/g; // looks for multiple occurrences of string between the forward slashes... /* wildcards */ regex = /h.llo/; // the "." matches any one character other than a new line character... matches "hello", "hallo" but not "h\nllo" regex = /h.*llo/; // the "*" matches any character(s) zero or more times... matches "hello", "heeeeeello", "hllo", "hwarwareallo" /* shorthand character classes */ regex = /\d/; // matches any digit regex = /\D/; // matches any non-digit regex = /\w/; // matches any word character (a-z, A-Z, 0-9, _) regex = /\W/; // matches any non-word character regex = /\s/; // matches any white space character (\r (carriage return),\n (new line), \t (tab), \f (form feed)) regex = /\S/; // matches any non-white space character /* specific characters */ regex = /[aeiou]/; // matches any character in square brackets regex = /[ck]atherine/; // matches catherine or katherine regex = /[^aeiou]/; // matches anything except the characters in square brackets /* character ranges */ regex = /[a-z]/; // matches all lowercase letters regex = /[A-Z]/; // matches all uppercase letters regex = /[e-l]/; // matches lowercase letters e to l (inclusive) regex = /[F-P]/; // matches all uppercase letters F to P (inclusive) regex = /[0-9]/; // matches all digits regex = /[5-9]/; // matches any digit from 5 to 9 (inclusive) regex = /[a-zA-Z]/; // matches all lowercase and uppercase letters regex = /[^a-zA-Z]/; // matches non-letters /* matching repetitions using quantifiers */ regex = /(hello){4}/; // matches "hellohellohellohello" regex = /hello{3}/; // matches "hellooo" and "helloooo" but not "helloo" regex = /\d{3}/; // matches 3 digits ("312", "122", "111", "12312321" but not "12") regex = /\d{3,7}/; // matches digits that occur between 3 and 7 times (inclusive) regex = /\d{3,}/; // matches digits that occur at least 3 times /* matching repetitions using star and plus */ regex = /ab*c/; // matches zero or more repetitions of "b" (matches "abc", "abbbbc", "ac") regex = /ab+c/; // matches one or more repetitions of "b" (matches "abc", "abbbbc", but not "ac") /* matching beginning and end items */ regex = /^[A-Z]\w*/; // matches "H", "Hello", but not "hey" regex = /\w*s$/; // matches "cats", "dogs", "avocados", but not "javascript" /* matching word boundaries positions of word boundaries: 1. before the first character in string (if first character is a word character) 2. after the last character in the string, if the last character is a word character 3. between two characters in string, where one is a word character and the other isn't */ regex = /\bmeow\b/; // matches "hey meow lol", "hey:meow:lol", but not "heymeow lol" /* groups */ regex = /it is (ice )?cold outside/; // matches "it is ice cold outside" and "it is cold outside" regex = /it is (?:ice )?cold outside/; // same as above except it is a non-capturing group regex = /do (cats) like taco \1/; // matches "do cats like taco cats" regex = /do (cats) like (taco)\? do \2 \1 like you\?/; // matches "do cats like taco? do taco cats like you?" //branch reset group (available in Perl, PHP, R, Delphi... commented out because this is a js file) // regex = /(?|(cat)|(dog))\1/; // matches "catcat" and "dogdog" /* alternative matching */ regex = /i like (tacos|boba|guacamole)\./; // matches "i like tacos.", "i like boba.", and "i like guacamole." /* forward reference (available in Perl, PHP, Java, Ruby, etc... commented out because this is a js file) */ // regex = /(\2train|(choo))+/; // matches "choo", "choochoo", "chootrain", choochootrain", but not "train" /* lookaheads */ regex = /z(?=a)/; // positive lookahead... matches the "z" before the "a" in pizza" but not the first "z" regex = /z(?!a)/; // negative lookahead... matches the first "z" but not the "z" before the "a" /* lookbehinds */ regex = /(?<=[aeiou])\w/; // positive lookbehind... matches any word character that is preceded by a vowel regex = /(?<![aeiou])\w/; // negative lookbehind... matches any word character that is not preceded by a vowel /* functions I find useful */ regex.test("hello"); // returns true if found a match, false otherwise regex.exec("hello"); // returns result array, null otherwise "football".replace(/foot/,"basket"); // replaces matches with second argument ``` 感謝 Sarthak 建立了我的備忘錄的[GitHub 要點](https://gist.github.com/sarthology/b269c4ab81832c03f80eb48920f1abce)，也感謝 Xian-an 將其翻譯成[中文](https://gist.github.com/cxa/901e1862cd9ddf5c721cea6f7807d77a)👏 資源 == - 「正規表示式」挑戰是[FreeCodeCamp](https://freecodecamp.org)上「Javascript 演算法和資料結構認證」的一部分 - [MDN 正規表示式文件](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) - [正規表示式](https://regexone.com/) - [Regex101](https://regex101.com/)用於測試（您也可以使用 Chrome 開發者控制台） - [HackerRank](https://hackerrank.com/)正規表示式挑戰練習  就是這樣，夥計們！希望這對您有幫助☺️ --- 原文出處：https://dev.to/catherinecodes/a-regex-cheatsheet-for-all-those-regex-haters-and-lovers--2cj1
大家好！我希望你一切都好。本文將探討一個有趣的 Javascript 主題。 `async`和`defer`是在 HTML 文件中包含外部 JavaScript 檔案時使用的屬性。它們會影響瀏覽器載入和執行腳本的方式。讓我們詳細了解一下它們。 預設行為 ---- 我們通常使用`<script>`標籤將 HTML 頁面與外部 javascript 連接。傳統上，JavaScript `<script>`標籤通常放置在 HTML 文件的`<head>`部分。然而，這樣做意味著 HTML 的解析會被阻止，直到 JavaScript 檔案被取得並執行為止，導致頁面載入時間變慢。如今，我們更喜歡在頁面的`<body>`元素的所有內容首先加載之後保留`<script>`標記。 ``` <script src="example.js"></script> ``` HTML 解析和腳本執行的過程如下  非同步 --- 當我們包含具有 async 屬性的腳本時，它會告訴瀏覽器在解析 HTML 文件時非同步下載腳本。腳本在背景下載，不會阻塞 HTML 解析過程。 下載腳本後，它會非同步執行，這意味著它可以隨時執行，甚至在 HTML 文件完成解析之前也可以執行。 ``` <script src="example.js" async></script> ``` 如果非同步載入多個腳本，它們將在下載完成後立即執行，無論它們在文件中的順序如何。當腳本不依賴完全載入的 DOM 或其他腳本時，它非常有用。  延遲 -- 當我們包含具有 defer 屬性的腳本時，它也會告訴瀏覽器在解析 HTML 文件時非同步下載腳本。 然而，腳本的執行被推遲到 HTML 文件被解析之後。 ``` <script src="example.js" defer></script> ``` 具有 defer 屬性的腳本將按照它們在文件中出現的順序執行。當腳本依賴完全解析的 DOM 或腳本執行順序很重要時，它非常有用。  結論 -- async 和 defer 都允許 HTML 解析過程繼續進行，而無需等待腳本下載。 差別在於腳本執行的時間： 使用非同步，腳本在下載後立即執行，可能在 HTML 文件完全解析之前執行。使用 defer，腳本僅在 HTML 文件完全解析之後、 `DOMContentLoaded`事件之前執行。 需要注意的重要事項之一是，只有當我們有可以獨立執行且不依賴 DOM 結構的腳本時，我們才應該使用 async，而當我們需要維護腳本執行順序或依賴 DOM 時，我們應該使用 defer結構。 我希望您喜歡這篇文章，如果您喜歡，請不要忘記按讚！ 😃 **與我聯絡-** - [推特](https://twitter.com/fidalmathew10) - [github](https://github.com/FidalMathew) - [領英](https://www.linkedin.com/in/fidalmathew/) --- 原文出處：https://dev.to/fidalmathew/async-vs-defer-in-javascript-which-is-better-26gm
**編輯**：大家好！在對本文做出驚人反應後，我建立了一個名為「每週專案俱樂部」的專案。每週您的收件匣都會收到需要解決的問題。你可以努力解決問題，並且你將得到整個俱樂部的幫助，讓你走上正軌。了解更多並[在這裡](https://weeklyproject.club)註冊！ 有一天我注意到一個模式。我注意到很多人都在努力 學習編程，但他們心中沒有特定的目標。我已經討論過如何了解您想要學習程式設計的原因可以幫助您選擇要學習的語言[！](https://pickaframework.com/articles/why/) ，以及如何實際做出決定（[在這裡！](https://pickaframework.com/feature_fishing/) ）但是專案有什麼幫助呢？ 當我指導程式設計師時，我發現有一個專案可以幫助排除其他一些幹擾，例如想知道你是否使用了正確的語言。透過專注於一個特定的目標，你就不用那麼費力去擔心*這*是否正是你應該使用的語言。結果是你建立了一些簡潔的東西，並且一路上你學到了一些東西！ 2隻鳥，1塊石頭。 這就是為什麼我為初學者程式設計師策劃了這個專案清單。許多人列出了大量的專案來學習編程，但很少按照難度進行組織。我瀏覽了幾個流行的程式設計專案想法清單。如果您想查看完整列表，可以在頁面底部找到來源。 我將其分為教程和想法。教程包含資源連結，而想法只是專案的一般描述。我還列出了我最喜歡的初學者清單。 看看，看看是否有什麼啟發你！ 教學 == 我的最愛 ---- - [透過 30 個教學在 30 天內建立 30 個東西](https://javascript30.com) - [在 30 分鐘內建立一個簡單的搜尋機器人](https://medium.freecodecamp.org/how-to-build-a-simple-search-bot-in-30-minutes-eb56fcedcdb1) - [使用 Xamarin 和 Visual Studio 建立 iOS 照片庫應用程式](https://www.raywenderlich.com/134049/building-ios-apps-with-xamarin-and-visual-studio) - [建立 Android 手電筒應用程式](https://www.youtube.com/watch?v=dhWL4DC7Krs)（影片） - [製作聊天應用程式](https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a) - [使用 React Native 建立 ToDo 應用程式](https://blog.hasura.io/tutorial-fullstack-react-native-with-graphql-and-authentication-18183d13373a) 簡單的 --- - [使用 C# 和 Xamarin 建立空白應用程式（正在進行中）](https://www.intertech.com/Blog/xamarin-tutorial-part-1-create-a-blank-app/) - [使用 Xamarin 和 Visual Studio 建立 iOS 照片庫應用程式](https://www.raywenderlich.com/134049/building-ios-apps-with-xamarin-and-visual-studio) - [建立加載畫面](https://medium.freecodecamp.org/how-to-build-a-delightful-loading-screen-in-5-minutes-847991da509f) - [使用 JS 建立 HTML 計算器](https://medium.freecodecamp.org/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98) - [建立 React Native Todo 應用程式](https://egghead.io/courses/build-a-react-native-todo-application) - 使用 Node.js 編寫 Twitter 機器人 ``` - [Part 1](https://codeburst.io/build-a-simple-twitter-bot-with-node-js-in-just-38-lines-of-code-ed92db9eb078) ``` ``` - [Part 2](https://codeburst.io/build-a-simple-twitter-bot-with-node-js-part-2-do-more-2ef1e039715d) ``` - [建立一個簡單的 RESTFUL Web 應用程式](https://closebrace.com/tutorials/2017-03-02/creating-a-simple-restful-web-app-with-nodejs-express-and-mongodb) - [在 30 分鐘內建立一個簡單的搜尋機器人](https://medium.freecodecamp.org/how-to-build-a-simple-search-bot-in-30-minutes-eb56fcedcdb1) - [建立一個工作抓取 Web 應用程式](https://medium.freecodecamp.org/how-i-built-a-job-scraping-web-app-using-node-js-and-indreed-7fbba124bbdc) - [使用 Python 挖掘 Twitter 資料](https://marcobonzanini.com/2015/03/02/mining-twitter-data-with-python-part-1/) - [使用 Scrapy 和 MongoDB 抓取網站](https://realpython.com/blog/python/web-scraping-with-scrapy-and-mongodb/) - [如何使用 Python 和 Selenium WebDriver 進行抓取](http://www.byperth.com/2018/04/25/guide-web-scraping-101-what-you-need-to-know-and-how-to-scrape-with-python-selenium-webdriver/) - [我應該使用 BeautifulSoup 觀看哪部電影](https://medium.com/@nishantsahoo.in/which-movie-should-i-watch-5c83a3c0f5b1) - [使用 Flask 建立微博](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world) - 在 Django 中建立部落格 Web 應用程式 ``` - [Part I : Introduction](https://tutorial.djangogirls.org/en/) ``` ``` - [Part II : Extension To Add More Features](https://legacy.gitbook.com/book/djangogirls/django-girls-tutorial-extensions/details) ``` - [選擇您自己的冒險演示](https://www.twilio.com/blog/2015/03/choose-your-own-adventures-presentations-wizard-mode-part-1-of-3.html) - [使用 Flask 和 RethinkDB 建立待辦事項列表](https://realpython.com/blog/python/rethink-flask-a-simple-todo-list-powered-by-flask-and-rethinkdb/) 中等的 --- - [透過建立簡單的 RPG 遊戲來學習 C#](http://scottlilly.com/learn-c-by-building-a-simple-rpg-index/) - [用 C# 創作 Rogue-like 遊戲](https://roguesharp.wordpress.com/) - [使用 Clojure 建構 Twitter 機器人](http://howistart.org/posts/clojure/1/index.html) - [建立拼字檢查器](https://bernhardwenzel.com/articles/clojure-spellchecker/) - [使用 Java 建立簡單的 HTTP 伺服器](http://javarevisited.blogspot.com/2015/06/how-to-create-http-server-in-java-serversocket-example.html) - [建立 Android 手電筒應用程式](https://www.youtube.com/watch?v=dhWL4DC7Krs)（影片） - [建立具有使用者身份驗證的 Spring Boot 應用程式](https://scotch.io/tutorials/build-a-spring-boot-app-with-user-authentication) - [透過 30 個教學在 30 天內建立 30 個東西](https://javascript30.com) - [使用純 JS 建立應用程式](https://medium.com/codingthesmartway-com-blog/pure-javascript-building-a-real-world-application-from-scratch-5213591cfcd6) - [建立無伺服器 React.js 應用程式](http://serverless-stack.com/) - [建立 Trello 克隆](http://codeloveandboards.com/blog/2016/01/04/trello-tribute-with-phoenix-and-react-pt-1/) - [使用 React、Node、MongoDB 和 SocketIO 建立角色投票應用程式](http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/) - [React 教學：克隆 Yelp](https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/) - [使用 React.js 和 Node.js 建立簡單的中型克隆](https://codeburst.io/build-simple-medium-com-on-node-js-and-react-js-a278c5192f47) - [在 JS 中整合 MailChimp](https://medium.freecodecamp.org/how-to-integrate-mailchimp-in-a-javascript-web-app-2a889fb43f6f) - [使用 React Native 建立 ToDo 應用程式](https://blog.hasura.io/tutorial-fullstack-react-native-with-graphql-and-authentication-18183d13373a) - [製作聊天應用程式](https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a) - [使用 React Native 建立新聞應用程式](https://medium.freecodecamp.org/create-a-news-app-using-react-native-ced249263627) - [學習 React 的 Webpack](https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060) - [建立您自己的 React 樣板](https://medium.freecodecamp.org/how-to-build-your-own-react-boilerplate-2f8cbbeb9b3f) - [基本 React+Redux 入門教學](https://hackernoon.com/a-basic-react-redux-introductory-tutorial-adcc681eeb5e) - [建立一個預約安排程序](https://hackernoon.com/build-an-appointment-scheduler-using-react-twilio-and-cosmic-js-95377f6d1040) - 使用 Angular 2+ 建立具有離線功能的 Hacker News 用戶端 ``` - [Part 1](https://houssein.me/angular2-hacker-news) ``` ``` - [Part 2](https://houssein.me/progressive-angular-applications) ``` - 帶有 Angular 5 的 ToDo 應用程式 ``` - [Introduction to Angular](http://www.discoversdk.com/blog/intro-to-angular-and-the-evolution-of-the-web) ``` ``` - [Part 1](http://www.discoversdk.com/blog/angular-5-to-do-list-app-part-1) ``` - 帶有 Angular 5 的 ToDo 應用程式 ``` - [Introduction to Angular](http://www.discoversdk.com/blog/intro-to-angular-and-the-evolution-of-the-web) ``` ``` - [Part 1](http://www.discoversdk.com/blog/angular-5-to-do-list-app-part-1) ``` 難的 -- - [建構一個解釋器](http://www.craftinginterpreters.com/)（第 14 章是用 C 寫的） - [用 C 語言寫一個 Shell](https://brennan.io/2015/01/16/write-a-shell-in-c/) - [編寫 FUSE 文件系統](https://www.cs.nmsu.edu/~pfeiffer/fuse-tutorial/) - [建立您自己的文字編輯器](http://viewsourcecode.org/snaptoken/kilo/) - [建立自己的 Lisp](http://www.buildyourownlisp.com/) - [建構 CoreWiki](https://www.youtube.com/playlist?list=PLVMqA0_8O85yC78I4Xj7z48ES48IQBa7p)這是一個 Wiki 風格的內容管理系統，完全用 C# 使用 ASP.NET Core 和 Razor Pages 編寫。您可以[在這裡](https://github.com/csharpfritz/CoreWiki)找到原始程式碼。 - [建構 JIRA 與 Clojure 和 Atlassian Connect 的集成](https://hackernoon.com/building-a-jira-integration-with-clojure-atlassian-connect-506ebd112807) - [建構一個解釋器](http://www.craftinginterpreters.com/)（第 4-13 章是用 Java 寫的） - [使用 Mocha、React、Redux 和 Immutable 透過測試優先開發來建立全端電影投票應用程式](https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html) - [使用 React 和 Node 建立 Twitter Stream](https://scotch.io/tutorials/build-a-real-time-twitter-stream-with-node-and-react-js) - 使用 Webtask.io 建立無伺服器 MERN Story 應用程式 ``` - [Part 1](https://scotch.io/tutorials/build-a-serverless-mern-story-app-with-webtask-io-zero-to-deploy-1) ``` ``` - [Part 2](https://scotch.io/tutorials/build-a-serverless-mern-story-app-with-webtask-io-zero-to-deploy-2) ``` - [使用 React + Parcel 建立 Chrome 擴充功能](https://medium.freecodecamp.org/building-chrome-extensions-in-react-parcel-79d0240dd58f) ``` [Testing React App With Pupepeteer and Jest](https://blog.bitsrc.io/testing-your-react-app-with-puppeteer-and-jest-c72b3dfcde59) ``` - [用 React 編寫生命遊戲](https://medium.freecodecamp.org/create-gameoflife-with-react-in-one-hour-8e686a410174) - [建立帶有情感分析的聊天應用程式](https://codeburst.io/build-a-chat-app-with-sentiment-analysis-using-next-js-c43ebf3ea643) - [建立全端 Web 應用程式設置](https://hackernoon.com/full-stack-web-application-using-react-node-js-express-and-webpack-97dbd5b9d708) - 建立隨機報價機 ``` - [Part 1](https://www.youtube.com/watch?v=3QngsWA9IEE) ``` ``` - [Part 2](https://www.youtube.com/watch?v=XnoTmO06OYo) ``` ``` - [Part 3](https://www.youtube.com/watch?v=us51Jne67_I) ``` ``` - [Part 4](https://www.youtube.com/watch?v=iZx7hqHb5MU) ``` ``` - [Part 5](https://www.youtube.com/watch?v=lpba9vBqXl0) ``` ``` - [Part 6](https://www.youtube.com/watch?v=Jvp8j6zrFHE) ``` ``` - [Part 7](https://www.youtube.com/watch?v=M_hFfrN8_PQ) ``` - 使用 Angular 6 建立美麗的現實世界應用程式： ``` - [Part I](https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e) ``` - [使用 BootStrap 4 和 Angular 6 建立響應式佈局](https://medium.com/@tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b) - [使用 Django 和測試驅動開發建立待辦事項列表](http://www.obeythetestinggoat.com/) - [使用 Python 建立 RESTful 微服務](http://www.skybert.net/python/developing-a-restful-micro-service-in-python/) - [使用 Docker、Flask 和 React 的微服務](https://testdriven.io/) - [使用 Flask 建立簡單的 Web 應用程式](https://pythonspot.com/flask-web-app-with-python/) - [使用 Flask 建立 RESTful API – TDD 方式](https://scotch.io/tutorials/build-a-restful-api-with-flask-the-tdd-way) - [在 20 分鐘內建立 Django API](https://codeburst.io/create-a-django-api-in-under-20-minutes-2a082a60f6f3) 想法 == 簡單的 --- ### 99 瓶 - 建立一個程序，列印歌曲“牆上的 99 瓶啤酒”的每一行。 - 不要使用所有數字的列表，也不要手動輸入所有數字。請改用內建函數。 - 除了短語“取下一個”之外，您不得直接在歌詞中輸入任何數字/數字名稱。 - 請記住，當您還剩下 1 瓶時，「瓶子」一詞將變為單數。 ### 魔術8球 - 模擬神奇的 8 球。 - 允許使用者輸入他們的問題。 - 顯示正在進行的訊息（即“思考”）。 - 建立 20 個回應，並顯示隨機回應。 - 允許用戶提出另一個問題或退出。 - 獎金： ``` - Add a gui. ``` ``` - It must have a box for users to enter the question. ``` ``` - It must have at least 4 buttons: ``` ``` - ask ``` ``` - clear (the text box) ``` ``` - play again ``` ``` - quit (this must close the window) ``` ### 石頭剪刀布遊戲 - 建立一個石頭剪刀布遊戲。 - 讓玩家選擇石頭、剪刀或布。 - 讓計算機選擇它的移動方式。 - 比較選擇並決定誰獲勝。 - 列印結果。 - 子目標： ``` - Give the player the option to play again. ``` ``` - Keep a record of the score (e.g. Player: 3 / Computer: 6). ``` ### 倒數時鐘 - 建立一個程序，允許使用者選擇時間和日期，然後以給定的時間間隔（例如每秒）列印一條訊息，告訴使用者距離所選時間還有多長時間。 - 子目標： ``` - If the selected time has already passed, have the program tell the user to start over. ``` ``` - If your program asks for the year, month, day, hour, etc. separately, allow the user to be able to type in either the month name or its number. ``` ``` - TIP: Making use of built in modules such as time and datetime can change this project from a nightmare into a much simpler task. ``` 中等的 --- ### 番茄計時器 建立一個番茄計時器。 番茄計時器是一種時間管理方法。該技術使用計時器將工作分解為多個時間間隔，通常長度為 25 分鐘，中間間隔短暫的休息。這些間隔被命名為“pomodoros”，是意大利語單字“pomodoro”（番茄）的英文複數形式，以西里洛在大學時使用的番茄形狀的廚房計時器命名。 原始技巧有六個步驟： 決定要完成的任務。 設定番茄計時器（傳統上為 25 分鐘）。 完成任務。 當計時器響起時結束工作並在一張紙上畫上複選標記。 如果您的複選標記少於四個，請短暫休息（3-5 分鐘），然後轉到步驟 2。 四個番茄鐘後，休息較長時間（15-30 分鐘），將複選標記計數重設為零，然後轉到步驟 1。 要了解有關番茄計時器的更多訊息[，請單擊此處](https://en.wikipedia.org/wiki/Pomodoro_Technique) ### 谷歌案例 - 這是一個可以讓你玩英文句子的遊戲。 - 使用者將以任何格式輸入一個句子。（大寫或小寫或兩者的混合） - 程式必須將給定的句子轉換為Google大小寫。什麼是Google大小寫句子風格？\[know\_about\_it\_here:\]（這是一種寫作風格，我們將所有小寫字母替換為大寫字母，留下所有單字的首字母）。 - 子目標： ``` - Program must then convert the given sentence in camel case.To know more about camel case ``` ``` [click_here](https://en.wikipedia.org/wiki/Camel_case) ``` ``` - Sentence can be entered with any number of spaces. ``` ### 擲骰子模擬器 - 允許使用者輸入骰子的面數以及應擲骰子的次數。 - 您的程式應該模擬擲骰子並追蹤每個數字出現的次數（這不必顯示）。 - 最後，列印出每個數字出現的次數。 - 子目標： ``` - Adjust your program so that if the user does not type in a number when they need to, the program will keep prompting them to type in a real number until they do so. ``` ``` - Put the program into a loop so that the user can continue to simulate dice rolls without having to restart the entire program. ``` ``` - In addition to printing out how many times each side appeared, also print out the percentage it appeared. If you can, round the percentage to 4 digits total OR two decimal places. ``` - 獎金： ``` - You are about to play a board game, but you realize you don't have any dice. Fortunately you have this program. ``` ``` - 1. Create a program that opens a new window and draws 2 six-sided dice ``` ``` - 2. Allow the user to quit, or roll again ``` ``` - Allow the user to select the number of dice to be drawn on screen(1-4) 2. Add up the total of the dice and display it ``` ### 計算並修復綠雞蛋和火腿 你們有些人可能還記得蘇博士的故事「綠雞蛋和火腿」。對於那些不記得或從未聽說過的人，[這](http://pastebin.com/XMY48CnN)是這個故事。然而，我給你的故事有一個問題——每次使用「我」這個詞時，它都是小寫的。 由於此問題，您的工作是執行以下操作： - 將我給您的故事複製到常規文字檔案中。 - 建立一個程式來通讀故事並在任何時候將字母 i 變為大寫。 （當它也用在 sam-I-am 的名字中時，請務必更改它。） - 讓你的程式建立一個新文件，並讓它正確地寫出故事。 - 印出有多少錯誤被修正。 - 完成後，您應該已經糾正了[這麼多](https://i.imgur.com/GRkj3yz.jpg)錯誤。 難的 -- ### 隨機維基百科文章 如果您曾造訪維基百科，您可能已經注意到螢幕左側有一個指向隨機文章的連結。雖然看到您被帶到哪篇文章可能很有趣，但有時看到文章的名稱會很好，這樣您就可以在聽起來很無聊時跳過它。幸運的是，維基百科有一個 API，允許我們這樣做[點擊這裡](https://en.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=10&format=json)。 然而，有一個困境。由於維基百科擁有有關世界各地主題的文章，其中一些文章的標題中包含特殊字元。例如，關於西班牙畫家[埃拉斯托·科爾特斯·華雷斯 (Erasto Cortés Juárez)](https://en.wikipedia.org/wiki/Erasto_Cort%C3%A9s_Ju%C3%A1rez)的文章中就有 é 和 á。如果您查看這篇特定文章的[API](https://en.wikipedia.org/w/api.php?action=query&prop=info&pageids=39608394&inprop=url&format=json) ，您將看到標題是“Erasto Cort\\u00e9s Ju\\u00e1rez”，並且 \\u00e9 和 \\u00e1 正在替換前面提到的兩個字母。 （有關這是什麼的訊息，請首先查看文件中[本頁](https://docs.python.org/2/howto/unicode.html)的前半部分）。為了讓你的程式正常運作，你必須以某種方式處理這個問題。 - 建立一個程序，從官方維基百科 API 中提取標題，然後一一詢問用戶是否願意閱讀該文章。 - 例子： ``` - If the first title is Reddit, then the program should ask something along the lines of "Would you like to read about Reddit?" If the user says yes, then the program should open up the article for the user to read. ``` ``` - HINT: Click [here](https://en.wikipedia.org/wiki?curid=39608394) to see how the article's ID can be used to access the actual article. ``` - 子目標： ``` - As mentioned before, do something about the possibility of unicode appearing in the title. ``` ``` - Whether you want your program to simply filter out these articles or you want to actually turn the codes into readable characters, that's up to you. ``` ``` - Make the program pause once the user has selected an article to read, and allow him or her to continue browsing different article titles once finished reading. ``` ``` - Allow the user to simply press ENTER to be asked about a new article. ``` ### 天氣如何？ 如果您想了解 API 的基礎知識，請查看 iamapizza 的[這篇](http://www.reddit.com/r/explainlikeimfive/comments/qowts/eli5_what_is_api/c3z9kok)文章。 - 建立一個程序，從 OpenWeatherMap.org 提取資料並列印有關當前天氣的訊息，例如您居住的地方的最高氣溫、最低氣溫和雨量。 - 子目標： ``` - Print out data for the next 5-7 days so you have a 5 day/week long forecast. ``` ``` - Print the data to another file that you can open up and view at, instead of viewing the information in the command line. ``` ``` - If you know html, write a file that you can print information to so that your project is more interesting. ``` - 尖端： ``` - APIs that are in Json are essentially lists and dictionaries. Remember that to reference something in a list, you must refer to it by what number element it is in the list, and to reference a key in a dictionary, you must refer to it by its name. ``` ``` - Don't like Celsius? Add &units=imperial to the end of the URL of the API to receive your data in Fahrenheit. ``` ### 來源 - https://github.com/tuvtran/project-based-learning - https://github.com/jorgegonzalez/beginner-projects - https://github.com/MunGell/awesome-for-beginners/blob/master/README.md - https://github.com/sarahbohr/AbsoluteBeginnerProjects --- 你怎麼認為？您喜歡透過特定專案進行學習還是不喜歡透過特定專案進行學習？ --- 原文出處：https://dev.to/samborick/100-project-ideas-oda
每個人！ **we\_coded**回來了，我們很高興與您一起慶祝整個三月。 --- ### **we\_coded**是什麼？ **[we\_coded](https://dev.to/wecoded)**是我們的年度活動，致力於慶祝在科技業因性別原因而代表性不足和被邊緣化的 DEV 成員，特別是女性、跨性別和非二元性別個體。 **we\_coded**是六年前[\#SheCoded](https://dev.to/shecoded)開始的對話的延續，這是我們擴大聲音、分享經驗和培育更具包容性的技術未來的機會。歡迎盟友！ --- ### 商店裡有什麼： > 日期：2024年3月1日至3月31日 **we\_coded**不僅是另一場活動，它還是一個共同參與有關科技領域性別平等的更廣泛討論的機會。我們可以共同透過分享您的想法、故事、想法和宣言來產生影響。 😉 今年，我們承諾： - 在 DEV 和我們的社交平台上展示您的故事、見解和想法 💫 - 用獨特的 we\_coded 徽章獎勵參與者 💖 我們希望這會帶來： - 重要的觀點、經驗和故事被放大🔊 - 志同道合的個人和組織之間建立新的聯繫。 🌱 - 社區的支持感🤗 --- ### 如何參與 無論是個人故事、建議或行動號召，您的貢獻都很重要。[從頭開始](https://dev.to/new)或使用[此範本](https://dev.to/new/wecoded)獲取靈感來發布您的貼文。 還沒準備好發布自己的貼文嗎？您可以透過對您閱讀的故事留下支持性評論和反應來放大聲音。即使是很小的行動也可以產生很大的影響。 讓我們推動改變——一次一個貼文、一則評論或一則反應！ *注意：這是一項集體行動，旨在創造一個包容、無騷擾的環境！所有#wecoded 貼文都將由我們團隊中的人員進行審核。如果您想了解我們正在培育的社區，請造訪我們的[行為準則和社區準則](https://dev.to/code-of-conduct)。* {% 嵌入 https://dev.to/t/wecoded %} --- ### 讓我們有所作為！ 我們可以共同創造一個更公平、更包容的科技產業。我們希望您能加入我們的**we\_coded 2024** ，並成為我們認為真正特別的事情的一部分。 你在嗎？使用**\#wecoded**分享您的興奮並傳播出去！ --- 請繼續關注整個月的更新和公告。 --- 原文出處：https://dev.to/devteam/wecoded-2024-empowering-change-for-gender-equity-in-tech-30nj
是的，初學者的挫折感是一種常見的情緒，而且很自然。不要因為這種傾向而責怪，因為我們自己都可能經歷過這種情況。不要撒謊，您可能在某個領域中發現初學者很煩人，因為您擁有更高水平的專業知識。 如果你沒有，那麼，做你自己就很糟糕。 然而，必須認識到，應對初學者的挑戰不僅是學習旅程的一部分，也是個人成長的重要面向。在本文中，我們深入研究了初學者旅程中伴隨的各種挫折，並探討了為什麼承認和解決這些挫折對於任何努力提高技能和知識的人來說都是至關重要的。 因此，讓我們探索初學者階段的複雜性，並發現有價值的見解，以推動您在學習努力中前進： **1. 缺乏知識：** 作為初學者通常意味著缺乏基礎知識，讓我們面對現實吧，這對您和您想要向其學習的人來說可能會令人沮喪。當你剛開始時，你可能有遠大的抱負，但將它們分解為可操作的步驟感覺就像試圖蒙住眼睛解開魔術方塊。 初學者並沒有意識到自己的無能，這常常會導致他們尷尬地提出看似愚蠢的問題——我曾經經歷過，這樣做過，現在仍然偶爾這樣做。 *舉個例子*：幾年前，我竟然厚顏無恥地詢問谷歌員工是否可以給比爾蓋茲發一封電子郵件來解決我的 Windows 7 啟動金鑰問題。我感到很羞愧，但這也提醒我們，即使是職業選手也曾經是一無所知的新手。 你需要提出問題來獲取知識，即使它們可能很愚蠢。 感謝像 chatGPT 這樣的工具，與以前不同的是，你現在可以安全地提出愚蠢的問題，唯一會嘲笑你的人就是 openai 的工程師。 ***從人們那裡獲取知識而不顯得愚蠢*** 現在，有些東西你只能從人們那裡學習/獲得，並且你可能需要為了這類事情而接近他們（但僅限於這類事情）。當向他人尋求幫助時，一切都取決於給予和索取。人們更有可能幫助解決棘手的問題，從而帶來某種互惠互利。所以，在你向某人尋求建議之前，想想這對他們有什麼好處？ 如果你的問題對他們沒有幫助或沒有興趣，你應該問chatGPT，因為chatGPT 沒有更好的事情要做。 ***害怕顯得愚蠢*** 這是完全正常的。但事情是這樣的——承認自己的無知是邁向智慧的第一步。畢竟，每個人都是從新手開始的，暴露我們專業知識的缺乏只是成為真正專家的旅程的一部分。 你是否因為擔心別人認為你很蠢而害怕與人接觸？ Lmao，如果你回到根本上，你害怕看起來很愚蠢的原因只是因為你很愚蠢——就這個話題而言。 遲早，你在該領域的技能不足將會暴露出來。所以無論如何也無所謂，最好還是仔細揭開，快速獲得知識。 **2、不耐煩：** 正如他們所說，耐心是一種美德，但讓我們面對現實吧——這是一顆難以吞嚥的藥丸，尤其是當你深入學習新事物的時候。無論是掌握一項技能、達到財務里程碑，還是等待您最喜歡的系列的下一部，不耐煩常常會出現。 想想看：您是否願意等待我的下一篇文章（知道它將於下週一下午 3:00 準時發布），還是因為“下個月的某個時候”的模糊承諾而懸而未決？確切地。擁有明確的時間表可以讓你更容易保持耐心。 在追逐那個難以捉摸的夢想時，你能喚起聖人的耐心嗎？這是一個艱難的問題，尤其是當成功之路充滿不確定性時。你看，你無法計算出達到那個里程碑的確切時刻，因為你還沒有走過那條路。這是一個第二十二條軍規：你需要知識來實現目標，但在實現目標之前你不會真正掌握這些知識。令人困惑，對吧？ 例如，你不知道你需要多長時間才能賺到第一個十億，因為你沒有所需的知識，而當你擁有所需的知識時，你應該已經賺到了十億，因為這是了解您是否已獲得有關如何賺取第一個十億美元的足夠知識的唯一方法。 如果你認為你知道如何賺到第一個十億，但你還沒有做到，那麼你告訴自己為什麼*你沒有*做到的任何故事，都代表著一個知識空白，你需要填補這個空白，以更接近所需的真正知識。賺十億。 你和你的目標之間的每一個障礙都是一個等待學習的教訓。這都是旅程的一部分，我的朋友。擁抱不確定性，享受挑戰，並記住－成功之路不是一條直線；而是一條直線。這是一條蜿蜒的道路，充滿了曲折、轉彎，偶爾會走彎路。 作為一個初學者，你會感到焦慮，因為你似乎無法填補你現在的位置和你想要的位置之間的差距；因為你沒有所需的知識。 你獲得的知識越多，前方的道路就會變得更清晰、更光明。越接近隧道的盡頭，路就越清晰，盡頭的光會照亮前路，雖然沒有確切的“隧道盡頭”，但學習是一生的旅程（至少，是這樣）本來就是這樣的）。 因此，與其專注於目的地，不如專注於旅程本身。旅程就是目的地。享受過程，享受挑戰，享受一路上的小勝利。畢竟，正是不確定性才讓這段旅程變得值得。如果一定能成功，那還有什麼樂趣呢？ 正是不確定性使得耐心變得困難，如果在特定時間範圍內保證成功，許多懶惰的人就會開始投入工作。 當你開始看到曙光時，你就已經到了意識到自己無能的階段。 現在您可以清楚地看到自己的限制以及您想要獲得的技能的困難。這是覺醒的階段。 這是29%的人開始懈怠、70%的人放棄的階段。 但如果你已經讀到這裡，我就知道那不是你。 **3.害怕失敗：** 把事情做好是最好的學習方式，但一開始你就不可能不失敗就完成任何事。 *失敗是知道下一步該學什麼的唯一方法。* 很多人只是堅持低階學習；在大腦中記憶和儲存事實和數字而不付諸實踐，認為自己知道很多，這可能會導致鄧寧克魯格效應。 對於那些不知道的人來說，鄧寧-克魯格效應是一種認知偏差，它會導致人們高估自己的能力，從而導致錯誤的自信感。換句話說，他們認為自己知道一切，而實際上，他們只觸及了表面。 但事實是：真正學習的唯一方法就是捲起袖子、親力親為。知識只有付諸實踐才有價值。否則，這些只是無用的瑣事擾亂你的大腦。  *你想要堆疊知識還是想要堆疊結果？* 在我的環境中流行一句話：「沒有知識就是浪費」。我不相信這是真的。如果你不使用知識，知識絕對會浪費。 這句話一定起源於人們過去所知道的一些隨機的事情拯救了他們時所獲得的多巴胺。 嗯，是的，隨機知識有時會有所幫助。但是，您是否願意繼續累積知識並希望它派上用場，並祈禱您所擁有的知識會以某種方式幸運地使您成功，或者您是否會採取積極的步驟來確保您掌控自己的成功。你會驚訝地發現有多少人仍然不選擇後者。  人生不是一場學校考試，透過反省事實和數字就能為你贏得**A** ，如果你學到了一些你沒有應用的東西，你就是在浪費時間。人生是一場親力親為、充滿動感的冒險，成功只屬於那些願意捲起袖子、親力親為的人。 你需要做更多，而不是知道更多。 不要挑選一本新書，而是按照你在上一本中讀過的內容去做。閱讀本文將為您提供訊息，但只有將這些訊息付諸實踐才能帶來轉變。 如果你想以十倍的速度學習，並在幾個月內實現別人需要幾年才能實現的目標，*那麼你需要學習如何學習。* 不要毫無目的地學習，而是這樣做： - 了解基礎知識 - 概述一個專案來解決您遇到的問題，或其他人正在為初學者解決的基本問題 - 開始建立專案 - 一路學習 **4. 過於急切：** 這就像在你還沒學會爬行之前就試圖衝刺一樣。一頭扎進新事物可能會令人興奮，但不要超前。 當初學者太急於證明自己時，他們常常會為了急於引起轟動而忽略重要的說明並跳過關鍵的基礎知識。這就像在不先打地基的情況下試圖建造一座房子一樣——你注定會失敗。 問題的根源是什麼？***感性太多，理性思考不夠***。充滿熱情固然很好，但當你的情緒影響了你的判斷時，你就會走向災難。不要幻想所有的可能性，醒來並注意現實的冷酷事實。相信我，它並不那麼迷人，但它是完成真正工作的地方。 所以，事情是這樣的：努力保持謙虛和冷靜。把你的牌放在胸前－不要讓你的情緒出賣你。無論有人給你 1 美元還是 100 萬美元，都要保持撲克臉。表達自己的情緒可能有助於人際關係，但在生意上呢？沒那麼多。 當人們在人際關係中充分理解你時，溝通就會變得更容易。當人們在商業上更了解你時，操縱就會變得更容易 在商業中，情緒可以發揮複雜的作用。雖然理解和同理心在人際關係中很受重視，但在商業世界中，它們有時可能被視為可利用的漏洞。如果您顯得絕望，如果對方利用這種情況（也許是提高價格），請不要感到驚訝。在商業交易中保持專業和冷靜以避免被操縱至關重要，同時仍然認識到真正的聯繫和同理心的重要性，儘管是在不同的背景下。 控制住你的情緒，你就會非常有效地學習，而不會顯得愚蠢。 **5、不一致：** 大多數人都是懶惰的，只在自己想做的時候做自己想做的事。 > 我有這條法律；*如果你花在不做某件事上的時間比持續做某件事所花的時間多，那麼你就是在倒退並浪費你過去付出的努力。* 對我來說，速度是獲勝的最重要因素，你能以多快的速度完成這項高品質的工作？這才是重要的。 很多人說“聰明的工作勝過艱苦的工作”，我認為這並不重要，“快速的工作永遠會獲勝”（記住，我先說的）  聰明的工作可以打敗艱苦的工作的唯一原因是它更快。找到一種快速完成某件事的方法是明智之舉。速度更重要。當你不一致時，你就會失去動力。 如果某人持續努力，而你慢慢變得聰明，他/她會因為速度更快而獲得更多結果。 力求努力、聰明、快速地工作。 **6. 太害羞不敢成功：** 許多人喜歡用可笑的藉口說他們是一個內向的人，並且由於他們的“天性”而無法將自己放在那裡尋找機會。 那是廢話，社交是一種技能，而不是個性，你需要發展你的社交技能，讓你的創造力變得有價值。擁有創造性技能並不足以取得成功，您需要補充技能才能充分利用它；說服的藝術。 從技術上來說，你可能在某件事上擁有最好的技能，但如果人們不了解你，那就毫無用處。你擁有與你的臉一樣獨特的價值，如果你不能讓人們注意到它，你就無法將這種價值賦予任何人。 有時，您可能會看到那些技能不如您的人享受您沒有的機會，只是因為他們建立了人際網絡，而不總是因為這對他們來說更容易。 在過去，你要成功，顯然仍然需要人脈，但為了獲得這些人脈，你需要努力學習，進入最好的學校，結識最好的人，你需要錢去長途旅行才能見到最好的人。名人和成功人士可能會或可能不會聽你的，所以如果你真的想成功，你必須走出你的舒適區，發揮你的魅力，讓自己看起來很體面。如今，借助網路，您可以向任何名人發送私訊（有些人仍然不知道這的意義，不幸的是，這幾乎就像他們在睡覺一樣）。 ***利用網路。*** 從一開始就推銷自己，不要害怕表現得像個初學者，也不要害怕認為有些人可能會認為你很愚蠢或基礎。讓我給你看一些東西： 看看這個 Twitter/𝕏 帳號。  它實際上只是發布“這一年已完成 x%”，沒有其他內容，並且它有 130 萬粉絲。我目前在…稍後在 Twitter 上關注我🥺。 > 皇室教訓：我們就像網路上超過 5,300,500,000 人一樣，無論你是否基礎並不重要，仍然有人會喜歡你所做的事情，無論如何你都有義務接觸他們什麼。 大多數討厭你的基本內容的人可能會嫉妒他們有相同的想法或知識，但沒有足夠的勇氣將其表達出來。 不要等到成為大師才開始表現自己。  *山頂孤獨，戰壕裡擁擠。* 人們更喜歡能夠產生共鳴，你的地位越低，越多的人能夠產生共鳴並欣賞你的成長。當你達到前 1% 時，就會變得更加孤獨，也更難找到可以交往的人。 許多人都在尋求他們能夠實現目標、能夠變得偉大的保證：「如果這個人能夠在面臨挑戰的情況下表現出這一點，我當然也可以！先讓我了解他們是如何做到的」。 所以本質上我的觀點是，大師非常有價值，但你可以輕鬆地向更接近你水平的人學習，也許領先 1-10 步，越接近越容易。 例如，我從伊隆馬斯克那裡學到了很多東西，但我從我網絡中目前的導師那裡學到了更多，因為他們是「平易近人的」。 此人可能是該領域的專家，但如果無法聯繫到他/她，他/她就無法為您提供針對您的具體情況的個人化建議。 您可能正在聽一些優秀的 YouTuber 的講話，這個人可能會給出準確的建議，但您的情況可能是這些事實的例外，可能存在一些細微差別，導致這些事情不起作用。 然後你可能最終會得出結論，這個人所說的是無稽之談（儘管我並不是說每個人都總是正確的）。 處於金字塔底部的你更容易接近。利用這一點來發揮你的優勢。 我認為名人面臨的問題之一是，他們通常會受到很多人試圖「接近」他們的轟炸，他們沒有足夠的時間或精力去照顧每個人。但你做到了，這是你擁有伊隆馬斯克所沒有的東西，利用它來攀登金字塔。 > 透過你的可及性為人們提供價值，從而成為難以接近的人；你所給予的價值將變得非常有價值，以至於初學者或金字塔底層的人很難獲得它。 您可以展示您的專業知識，並為近距離和個人聯繫收取額外費用。 我希望這對你有幫助，我很讚揚，我幫助人們從他們的創造力中賺錢，[訂閱我的時事通訊](https://tbk.beehiiv.com)（商業造王者）以獲得關於如何從你的創造力中賺錢印鈔系統的更多新鮮觀點。我為人們創造更多機會透過我的專案等賺取更多收入，我的時事通訊是與我聯繫並了解更多有關我的專案的好方法。 請務必將這篇文章轉發並分享給困擾您的煩人的初學者。和平✌️ --- 原文出處：https://dev.to/drpraze/skill-issue-how-to-master-anything-10x-faster-without-looking-stupid-2hj4
在本文中，我將向您介紹 20 個最好、最大的可用網頁圖示庫。其中許多為您提供數千甚至數百萬個圖標，因此您一定會找到您需要的東西。 我想先澄清一下：這些不是 20 個最好的庫，而是**20 個最好的庫**，所以當然可能還有，而且除了這些之外，可能還有其他很棒的庫，我沒有提到/沒有提到。我不知道。 **另外，這是`ul` ，不是`ol` 。** > 快速訊息：如果您知道其他優秀的庫，請隨時在回復中提及，如果我擴展列表，我可能會包括它。 **[The Noun Project](https://thenounproject.com/)** =======================================  The Noun Project 是一個龐大的圖示庫，聲稱擁有超過 200 萬個圖示。這些圖標都是由貢獻者製作的。它有一個龐大且仍然活躍的社區，您也可以成為其中的一部分。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `true`** ### **強烈推薦！** --- --- **[iconmonstr](https://iconmonstr.com/)** -----------------------------------  iconmonstr 是一個圖標庫，提供超過 4000 個圖標，分為 300 多個不同的集合。這個庫由**一個人**維護。好處是您可以直接從網站取得程式碼，因此不一定需要下載。 - **免費內容： `true`** - **付費內容： `false`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[Good Stuff No Nonsense](https://goodstuffnononsense.com/)** ----------------------------------------------  Good Stuff No Nonsense 是一個僅由**一個人**建立的圖標庫，並且所有可用的圖標都是**手繪的**。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- --- **[獵戶座](https://orioniconlibrary.com/)** ----------------------------------------  線條、實心、顏色和平面圖標具有精確和統一的風格。 適應具有不同筆畫粗細的任何類型的專案， 色彩控制和出色的易讀性。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[愛可月](https://icomoon.io/)** ------------------------------  IcoMoon 可作為網站和應用程式使用，提供超過 4,000 個免費圖示和圖示的離線儲存。每個圖標包都具有詳細的許可，以便設計人員和開發人員確切地知道如何使用圖標。用戶還可以製作自己的自訂圖示字體。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[皮克托尼克](https://pictonic.co/)** ---------------------------------  所有圖示均採用精確的像素比例設計，因此可以在不損失品質或完整性的情況下調整大小。由於它們以字體集的形式提供，因此該集合中的圖示也可以使用 CSS 元素進行風格化。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `true`** --- --- **[圖示8](https://icons8.com/)** ------------------------------  Icons8 系列擁有超過 100,000 個圖標且每日更新，在選擇和多樣性方面無可匹敵。使用者可以透過標籤搜尋圖標，也可以瀏覽 50 多個不同的主題集合來尋找滿足其需求的圖形。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** --- --- **[平面圖示](https://www.flaticon.com/)** -------------------------------------  超過 2,000,000 個 SVG、PSD、PNG、EPS 格式或 ICON FONT 格式的免費向量圖示。最大的免費向量圖示資料庫中有數千個免費圖示！ - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** *注意：您不需要註冊即可下載和瀏覽圖標，但要進行圖標自訂則需要註冊。* --- --- **[字體棒](https://fontawesome.com/)** -----------------------------------  當然，我需要將 Font Awesome 放在這個列表中，因為它實際上可能是最知名的圖示庫。 當我寫了一篇關於這個庫的文章後，請查看它以了解有關 Font Awesome 為您提供的所有功能的更多資訊。相信我，這是值得的。 https://dev.to/weeb/font-awesome-guide-and-useful-tricks-you-might-ve-not-known-about-until-now-o15 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[圖示偵察](https://iconscout.com)** ---------------------------------  iconcout 是數百萬個不同圖示的集合，涵蓋您可以想像的每個可能的類別。此處的使用者可以選擇建立和分享自己的圖標，並建立供訪客稍後查看的集合。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[圖示查找器](https://www.iconfinder.com/)** ----------------------------------------  Iconinder 是目前最大的圖標庫之一，擁有超過 400 萬個免費和付費圖標。此外，他們還提供 25,000 多個圖標集。 > Iconinder 為數百萬創意專業人士提供高品質的圖標。我們是一個小型國際團隊，總部位於美麗的哥本哈根市，其中一些遠端工作。我們與充滿熱情的圖標設計師社群一起打造世界上最受歡迎的圖標網站。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** --- --- **[像素之愛](https://www.pixellove.com/)** --------------------------------------  PixelLove 擁有超過 15,000 個適用於 iOS 和 Android 平台的圖標，是建立行動網站和應用程式的設計師的首選圖標集合。所有圖示都有多種像素尺寸可供選擇。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- --- **[流線型圖標](https://streamlineicons.com/)** -----------------------------------------  三種不同重量的超過 10,500 個。 53個類別，720個子類別，總共30,000多個內容。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `true`** --- --- **[格拉比克漢堡](https://graphicburger.com/)** ----------------------------------------  Graphic Burger是一個特殊且獨特的網站，提供大量免費和付費圖示以及其他圖形元素。本網站上提供的所有圖標都經過精心優化，與各種網站、應用程式和其他圖形用途相容。可用圖示的選擇和種類非常多，幾乎有適合任何主題的圖示。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- --- **[粉碎圖標](https://smashicons.com/)** -----------------------------------  Smashicons 提供極其全面的圖標集，目前其庫中包含超過 175,000 個圖標。然而，與提到的其他一些圖標庫不同，並非所有這些圖標都遵循相同的風格。因此，如果您想在網站、應用程式等上保持一致的外觀和感覺，您需要確保您需要的所有圖示都在特定的圖示集中。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `true`** --- --- **[PNG樹](https://pngtree.com/so/icon)** ---------------------------------------  在短短的3年時間裡，Pngtree已經累積了數百萬個獨特的平面設計資源。其中：插圖、向量、模板、背景，最重要的是圖示。 所有圖標都經過分類，可以無縫且快速地存取滿足您需求的設計。 找到圖示後，您可以將其下載為最大尺寸為 512×512 的 PNG 或 SVG 檔案。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `true`** --- --- **[偶像震撼](https://www.iconshock.com/)** --------------------------------------  超過 200 萬個專業圖示庫，包含 30 多種風格的 400 多個圖示集，包括 Flat、Material、iOS、Glyph、Colorful、Window 10、Revamped Office、3D Realistic、Isometric 等！ 除了擁有 200 萬個圖示庫之外，Iconshock 還專注於自訂樣式。具體來說，最受喜愛的有 Material、iOS、Flat、Modern 等。 您可以選擇下載單一圖示或下載整個圖示集。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** --- --- **[材料設計圖示](https://materialdesignicons.com/)** ----------------------------------------------  Material Design Icons 不斷增長的圖標集合允許面向各種平台的設計人員和開發人員下載任何專案所需的格式、顏色和大小的圖標。它已經存在很多年了，並且與許多技術和框架相容。 - **免費內容： `true`** - **付費內容： `false`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[材質圖示](https://material.io/)** --------------------------------  選擇圖示後，您可以將顏色從黑色變更為白色，反之亦然。您也可以下載 SVG 或 PNG 格式。不過，如果您確實下載了 SVG 格式，則始終可以將顏色調整為特定專案所需的顏色。 更不用說有數百個免費圖示可供選擇，非常適合網站專案和網站以外的任何類型的圖形設計。 - **免費內容： `true`** - **付費內容： `false`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- --- **[免費圖示](https://freeicons.io/)** ---------------------------------  與我們已經瀏覽過的網站之一類似，FreeIcons 致力於僅突出顯示最突出的圖標包。 每個包包含多達 100 個圖標，大多數都經過精心設計。 但請放心，您還可以找到旅行、美食、女性、特定國家等主題的圖示。 而且，您可以選擇 3D、卡通、手繪、徽章、平滑等多種風格。 - **免費內容： `true`** - **付費內容： `false`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- 原文出處：https://dev.to/weeb/15-of-the-best-and-largest-icon-libraries-4p5n
https://youtu.be/0WH9oiYMS3M 介紹 == JWT 身份驗證和會話身份驗證是對 Web 應用程式使用者進行身份驗證的方法。 在本文中，我們將解釋 JWT 的詳細資訊、其結構及其優缺點。 JWT 代表**JSON Web Token** ，它是一種常用的無狀態用戶身份驗證[標準](https://datatracker.ietf.org/doc/html/rfc7519)，用於以 JSON 格式在用戶端和伺服器之間安全地傳輸資訊。 預設情況下，JWT 已編碼但未加密。 它使用只有伺服器知道的密鑰進行數位簽署。 它可以加密，但在本文中，我們將重點放在簽署的非加密令牌。 JWT 的結構 ======= JSON Web 令牌由以句點分隔的 3 個部分組成。 標頭、有效負載和簽名。 每個部分均採用 Base64 編碼。  ### 標頭 標頭由令牌類型（JWT）和使用的簽章演算法（例如 HMAC SHA256 或 RSA）組成。 ``` { "typ": "JWT", "alg": "HS256" } ``` ### 有效載荷 有效負載由聲明組成。 聲明是關於用戶的聲明和附加資料。 例如，我們有令牌的發行時間。 我們也有它的過期時間，因為令牌應該過期。 ``` { "iss": "example_issuer", "sub": "user_id123", "exp": 1644768000, "iat": 1644744000 } ``` ### 簽名 簽名是 JWT 最重要的部分。 它是使用標頭、有效負載和秘密進行計算的，這些資訊將饋送到簽名演算法中使用。 ``` signature = HMAC-SHA256(base64urlEncode(header) + "." + base64urlEncode(payload), secret_salt ) ```  步驟 == 典型的 JWT 授權流程涉及的步驟如下： **1- 身份驗證：**使用者使用使用者名稱和密碼登錄，或使用 Google 或 Facebook 等。 伺服器驗證提供的憑證。 **2- 令牌產生並將令牌發送到客戶端：**伺服器將產生 JWT 並將其發送到客戶端，客戶端儲存它以供將來使用。 **3-將令牌傳送到伺服器：**當客戶端想要存取伺服器上受保護的資源時，它會在 HTTP 請求的 Authorization 標頭中傳送 JWT。 ``` axios.get(URL, { headers: { 'Authorization': 'Bearer ' + token, }, }) ``` **4-驗證令牌：**伺服器接收請求並透過使用用於簽署的金鑰檢查其簽章來驗證 JWT。 如果 JWT 有效，伺服器會提取其中包含的資訊並使用它來確定使用者有權執行哪些操作。 **5-授權請求：**如果使用者被授權存取資源，伺服器將傳回請求的資料。如果用戶未獲得授權，伺服器將傳回錯誤訊息。  **優點** ======  - 輕的 - 便攜式：可在多個平台、網路和行動平台上處理。 - JSON 解析器在大多數程式語言中都很常見。 - 由於密鑰儲存在伺服器端，因此可以防止篡改。 - 由於 JWT 令牌的無狀態性質，伺服器不需要儲存任何會話資訊。 缺點 ==  - 在伺服器端，應在登出時手動將未過期的 JWT 標記為無效。 即使 JWT 從客戶端刪除後仍然有效。  使用的方法是令牌黑名單，它涉及在伺服器端維護無效令牌的列表，以防止它們重新用於身份驗證。  - 對於簽署的非加密令牌，我們不應該儲存敏感訊息，因為 JWT 可以防止篡改，但任何人都可以解碼和讀取。 - 如果被攔截，可以提供完全存取權。這就是為什麼客戶端的 JWT 應該儲存在安全的地方，例如在瀏覽器中的 HttpOnly cookie 中。 --- 原文出處：https://dev.to/jaypmedia/jwt-explained-in-4-minutes-with-visuals-g3n
我決定是時候學習[Rust 了](https://www.rust-lang.org/)，為了保持自己的動力，我將在這裡記錄學習的進展。  有關於我的一些;我是一名 Web 開發人員，雖然已經涉足多年，但已經從事了大約 5 年。我有使用[Perl](https://www.perl.org/)和[PHP](https://www.php.net/)的經驗，但我的日常工作是 JavaScript/TypeScript，無論是透過[NodeJS](https://nodejs.org/en)還是[ReactJS](https://react.dev/) 。我想學習 Rust 沒有什麼特別的原因，只是學習新事物很有趣。 我的第一個停靠點是Google `learn rust` ，這引導我找到了[「這本書」](https://doc.rust-lang.org/book/) 。這本書是 Rust 社群為新手（或所謂的 Rustlings）編寫的入門指南，旨在「紮實掌握這門語言」。 公共學習 ---- 我選擇公開記錄我的 Rust 學習之旅，因為我相信公開學習的力量。透過分享我的成功、挑戰和見解，我將加強自己的理解，並希望為其他走類似道路的人提供資源。 我親眼目睹了這種方法的價值。我邀請讀者提供回饋、更正和貢獻。雖然我認識到公共學習並不適合所有人，但我個人發現它非常有益，並希望激勵其他人考慮它。那麼，讓我們深入學習這些課程。 第 1 課“入門” --------- 本課分為 3 個部分： - 安裝 - 你好世界！ - 你好，貨物！ ### 安裝 看到列出的安裝，我鬆了口氣，我擔心我必須查找如何安裝 Rust。我使用的是 Windows 計算機，但決定在 Linux 中學習 Rust，因此我將透過 WSL 使用 Ubuntu。 安裝指令看起來很簡單，它使用curl來下載一些東西，然後透過sh進行管道傳輸，所以我們可以假設下載的專案是某種bash腳本。 ``` curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh ``` 不管你信不信，這是我犯下的第一個錯誤。我看到`Rust is installed now. Great!`訊息並繼續下一課。如果我繼續閱讀下去，我會發現我需要單獨安裝編譯器。 > Linux 使用者通常應該根據其發行版的文件安裝 GCC 或 Clang。例如，如果您使用 Ubuntu，則可以安裝 build-essential 套件。 不過，這很容易解決，我很快就回到了正軌。 ``` sudo apt install build-essential ``` ### 你好世界！ 下一部分是開發社群的主要內容，即深受喜愛的“Hello, World!”例子。  我在這裡學到了一些東西，函數是用`fn`關鍵字聲明的，任何 Rust 應用程式的入口點都是`main.rs`檔案中的`main`函數，標準命名約定是使用下劃線來分隔函數和檔案名稱中的單字。 正是在這個階段，我發現我沒有安裝編譯器，我認為這是像這樣的簡單部分的真正原因，以確保我們都設定正確。 ### 你好，貨物！ 上一節很簡單，這節也很簡單，但向我們介紹了[Cargo](https://crates.io/) ，它是 Rust 的套件管理器，作為一個 JS 開發者，我的腦海裡直接想到了 NPM。 Cargo 允許我們做一些很酷的事情： - 為我們的包命名。 - 新增包依賴項。 - 用一個命令執行我們的程式。 - 使用除錯模式和發布模式來建立我們的程式。 - 檢查我們的程式是否編譯，但沒有實際建立它。 這個範例讓我們重新創造我們的`Hello, World!`例如但以貨運方式。程式碼非常簡單，幾乎不值得展示，但它就是這樣。 ``` fn main() { println!("Hello, world!"); } ``` 第 2 課“猜謎遊戲” ----------- 第二課沒有任何小節，本課的目標是編寫一個猜謎遊戲，用戶輸入一個數字，我們將其與隨機選擇的數字進行比較，遊戲繼續，直到用戶猜出確切的數字。 我們仍然沒有做任何突破性的事情，但從列印靜態文字到動態獲取用戶輸入並返回結果的進展仍然很好。 ### VS程式碼 正是在這一點上，我決定在`nano`中進行程式碼變更不是一個好主意，我需要在 VSCode 中開啟專案。我加入了一些擴展，希望能讓開發變得更容易。這些是[rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) 、[板條箱](https://marketplace.visualstudio.com/items?itemName=serayuzgur.crates)和[Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) 。你可以使用任何你喜歡的編輯器，我只是習慣了 VSCode。  ### 製作遊戲 讓我們來看看遊戲教程，它讓我們使用貨物來設定專案，並很快向我們介紹了一些新概念 - `use`關鍵字。 - 可變變數。 - 錯誤處理。 - 文件位置 #### `use`關鍵字 `use`關鍵字允許我們從其他庫中提取程式碼，作為一名 Web 開發人員，我想將其與[import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)進行比較。預設情況下，Rust 將能夠存取「標準」庫中的一組專案，這稱為前奏，但如果您想存取其他任何內容，則必須使用`use` 。 在他們給出的範例中，我們確實`use std::io;`它允許我們存取`io`命名空間，這確實感覺有點奇怪，因為我們已經可以存取`std` ，這意味著`std::io`也可以存取。 #### 可變變數 在 JavaScript 領域，我們有不可變變數和可變變數的概念，它們是`const`和`let` ，其中`const`是不可變的，而`let`不是。 Rust 有點不同，因為除非另有說明，否則所有變數都是不可變的，變數關鍵字也總是`let` ，或者至少據我所知到目前為止是這樣。 ``` let mut var1 = String::new(); // mutable let mut var2 = String::from("Test String"); // mutable let var3 = 6; // immutable ``` 這本書讓我們知道，第三課將回歸可變性。 #### 錯誤處理 我們介紹了兩種類型的錯誤處理`.expect` ，它們不會嘗試任何類型的恢復，但會在應用程式崩潰和`match`時發布一條訊息。 `Match`從函數中取得`Result` ，然後允許您根據`Result`呼叫函數。在範例中，我們給出了`parse`並告訴它要么是`Ok`要么是`Err` ，在`match`中我們可以定義一個在這兩種情況下呼叫的函數。我假設當我們開始處理更多樣化的函數時，match 將能夠處理所有`Result`類型。 #### 文件位置 這是迄今為止我最喜歡 Rust 的部分，我知道它不應該那麼令人興奮，但我認為它是。當您執行命令`cargo doc` Cargo 時，Cargo 將掃描您正在使用的所有程式碼，並產生解釋功能以及如何使用它們的說明頁面。 目前還沒有太多解釋，但我希望這些文件是從程式碼中的註解產生的，即使這不是那種情況，可以自我記錄的程式碼庫對我來說是如此有趣。 ### 偏離了人跡罕至的地方 此時，我已經完成了前兩課，並決定對猜謎遊戲進行一些更改。我將遊戲循環提取到它自己的函數中，並加入了解析失敗的錯誤訊息。 我不喜歡的一件事是這條線的`magic` 。 ``` let guess: u32 = match guess.trim().parse() ``` 我不喜歡這種感覺，就像 parse 神奇地知道它的目標類型一樣。所以我閱讀了 VSCode 中的解析工具提示，它教導了有關`turbofish`語法的內容。我不知道人們是否不喜歡這種語法，或者這本書的作者是否認為它對於初學者來說太複雜，但在我看來，它更有意義。我們告訴 parse 我們想要什麼類型，然後我們的`let`從中推論出類型，而不是相反。 ``` let guess = match guess.trim().parse::<u32>() ``` 這是修改後的程式碼。 {% 嵌入 https://replit.com/@andrewb05/Guessing-game %} 註銷 -- 感謝您與我一起踏上這段旅程。我計劃繼續這個系列並涵蓋整本書。如果您想關注，可以按下「關注」按鈕以獲得新帖子的通知。 正如我之前所說，請隨意留下任何反饋，如果您也在公開學習，請在評論中留下您的系列的連結，以便我可以查看。 非常感謝您的閱讀。如果您想在開發之外與我聯繫，這裡有我的[Twitter](https://twitter.com/Link2Twenty)和[linkedin，](https://www.linkedin.com/in/andrew-bone-ba241b179/)歡迎來打個招呼 😊。 --- 原文出處：https://dev.to/link2twenty/learning-rust-a-clean-start-4eom
社區開發者您好！ 我非常高興與您分享我們旅程中的最新飛躍 - Taipy 3.1 的發布。我們的團隊一直在努力整合回饋並突破我們平台的界限。讓我們深入探討 3.1 為何能改變遊戲規則。  --- #### 第三方元件集成 您是否曾經希望能夠將您喜愛的 Python 庫無縫整合到您的 Taipy 應用程式中？不再希望了！ 在 3.1 中，我們可以視覺化 Taipy 的多功能**零件物件**中的任何**HTML**或**Python 物件**。 這意味著[Folium](https://python-visualization.github.io/folium/latest/) 、 [Bokeh](https://bokeh.org/) 、 [Vega-Altair](https://altair-viz.github.io/)和[Matplotlib](https://matplotlib.org/)等庫現在觸手可及，隨時可以透過動態且引人入勝的視覺化來豐富您的應用程式。最好的部分是什麼？這一切都被簡化為單一、有凝聚力的使用者體驗。 [閱讀發行說明](https://links.taipy.io/RelNotes)  --- ### 原生情節集成 陰謀愛好者，歡欣鼓舞！ Taipy 3.1 帶來了對[Plotly Python 的](https://plotly.com/python/)原生支持，改變了您將複雜圖表整合到應用程式中的方式。解決方法整合的日子已經一去不復返了。現在，一行程式碼即可嵌入任何 Plotly 圖表，保持 Taipy 聞名的高效能和互動性。這是最好的資料視覺化——直觀、高效且視覺上令人驚嘆。 [閱讀發行說明](https://links.taipy.io/RelNotes)  --- ### 分散式運算 隨著資料集的成長和運算需求的增加，企業需要可擴展的解決方案。認識到這一點，我們在 Taipy 3.1 中引入了分散式計算。此功能允許在多台機器上分配計算任務，從而增強大規模資料專案的效能。它的目的是更快、更有高效，使企業能夠輕鬆處理複雜的運算。 [閱讀發行說明](https://links.taipy.io/RelNotes)  --- ### 遙測 保持應用程式的健康和性能至關重要。透過 Taipy 3.1 的遙測功能，管理員和開發人員可以獲得對應用程式效能指標和執行狀況指標的重要見解。這種主動監控工具旨在保持營運平穩並在潛在問題升級之前辨識它們，確保您的應用程式以最佳狀態執行。 [閱讀發行說明](https://links.taipy.io/RelNotes)  --- > ### Python 3.12 支持 > 我們也很高興地宣布 Taipy 及其所有依賴項現在與 Python 3.12 完全相容。此更新可確保您使用 Python 提供的最新、最強大的功能，進一步增強資料專案的穩健性和可靠性。 --- 無論您是第一次深入資料專案還是領導複雜的企業解決方案，此版本都旨在提升您的工作。 我們很高興看到我們的社群將利用這些新功能建立創新的應用程式和解決方案。如果您和我們一樣渴望探索可能性，請加入[Discord](https://discord.com/invite/SJyz2VJGxV)上充滿活力的開發人員和資料科學家社群。我們可以共同塑造 Python 應用程式開發的未來。 感謝您一直以來的支持與熱情。讓 Taipy 成為滿足您的資料科學需求的首選框架。 您可以在[GitHub](github.com/Avaiga/taipy)上為我們的儲存庫加註星標 --- 原文出處：https://dev.to/taipy/taipy-31-a-new-era-of-visualization-and-data-management-1abg
想像一下，您的客戶要求您建立一個 Web 應用程式，以滿足其客戶的所有需求。這就是你的客戶會告訴你的全部內容，你能建造它嗎？很明顯，您錯過了更多訊息，並且存在要求，但您知道什麼是要求嗎？如果我們沒有明確定義它們，會產生什麼後果？存在哪些類型的需求？本文將嘗試以簡單的方式回答其中一些問題。 概括 -- - [什麼是要求？](#what-is-a-requirement) - [為什麼它們很重要以及需求定義不明確的後果](#why-they-matters-and-consequence-of-poorly-defined-requirements) - [我們怎樣才能有一個好的需求](#how-we-can-have-a-good-requirement) - [要求等級](#levels-of-requirements) ``` - [User requirements](#user-requirements) ``` ``` - [System requirements](#system-requirements) ``` - [要求類型](#types-of-requirements) ``` - [Functional requirements](#functional-requirements) ``` ``` - [Non-functional requirements](#non-functional-requirements) ``` - [結論](#conclusion) 什麼是要求？ ------ 首先，我們需要了解軟體開發環境中的需求是什麼。 Shari Pleeger 給我們下了一個很好的定義： > 系統特徵或系統為實現其目標而能夠完成的事情的描述 換句話說，要求是辨識產品或流程操作、功能或設計約束或特徵的聲明，該聲明是**明確的**、**可**測試的、**可測量**的，並且是接受產品或流程所必需的（由消費者或內部品質保證指南） 。 每個需求都是基於現實中存在的問題而建立的，而軟體只是解決它的一種方法。 為什麼它們很重要以及需求定義不明確的後果 -------------------- 現在我們知道什麼是要求，我們必須問： > “為什麼對於從事 IT 工作的人來說了解它如此重要？” 我會給你一些原因。根據要求，我們能夠： - 為專案規劃提供依據 - 對於研究變更請求至關重要 - 允許從開發的最早階段進行風險管理 - 它們是驗收測試的基礎 - 合約管理  如果我們的需求定義不明確會發生什麼事？ 第一個也是合乎邏輯的後果是專案交付的延遲。當我們開始一個專案或衝刺時，沒有對要開發的內容有所有明確的要求，存在錯誤的可能性是巨大的！因此，開發人員和 QA 團隊需要承擔更多工作，從而降低了他們的生活品質。 如果出現在Production中，就會有許多不滿意的用戶，讓產品的信心降低，甚至導致系統報廢。另一個後果是維護系統的成本。 我們怎樣才能有一個好的需求 ------------- 需求的編寫方式因團隊而異，但它們都應該具有以下三個特徵： - 明確 - 可測試 - 可測量的 要求等級 ---- ### 用戶要求 使用者需求定義了我們的軟體需要做什麼。它可以透過使用者的需求、期望、限制和介面來描述使用者面臨的問題。 此類需求是為客戶編寫的，我們使用自然語言加圖表。我們可以使用待辦事項清單應用程式的使用者需求範例： > 使用者應該能夠在清單中插入新任務 ### 系統需求 系統需求是定義系統有效運作所需的硬體、軟體和網路元件的功能和約束的規格。 這些要求對於設計、實施和維護系統至關重要。他們負責描述必須做什麼，而不是如何做。 使用我們已經使用過的相同要求，我們可以詳細了解它： |用戶需求|系統需求 | | -------------------------------------------------- ------ | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------------------------------------ | |使用者應該能夠在清單中插入新任務 | - 使用者應該能夠點擊插入按鈕以新增任務 \- 當使用者點擊按鈕時，任務新增應出現在清單中 插入 \- 只有登入使用者才能存取任務清單| 要求類型 ---- ### 功能要求 功能需求描述了一個系統應該執行的操作。它們描述了系統應該提供什麼、系統應該如何對特定輸入做出反應以及系統在特定情況下應該如何表現。他們還可以描述系統不應該做什麼。 功能需求可以描述使用者或系統需求。 ### 非功能性需求 非功能性需求描述系統或環境應提供的服務或功能。他們負責定義系統的架構。我們對非功能性需求有不同的類別，它們是： 1. **表現：** ``` - _Response Time:_ Specifies the maximum acceptable time for the system to respond to user input. ``` ``` - _Throughput:_ Defines the number of transactions or operations the system can handle in a given time. ``` 2. **可用性：** ``` - _User Interface (UI) and User Experience (UX):_ Specifies criteria related to the design, ease of use, and overall user experience. ``` ``` - _Accessibility:_ Ensures that the system is usable by individuals with disabilities. ``` 3. **可靠性：** ``` - _Availability:_ Specifies the percentage of time the system should be operational. ``` ``` - _Fault Tolerance:_ Defines the system's ability to continue functioning in the presence of faults or errors. ``` 4. **安全：** ``` - _Authentication:_ Describes how users are identified and verified. ``` ``` - _Authorization:_ Specifies the level of access granted to different users or roles. ``` ``` - _Data Encryption:_ Requires the use of encryption to protect sensitive data. ``` 5. **可擴充性：** ``` - _Horizontal Scalability:_ Describes how well the system can handle an increase in load by adding more hardware. ``` ``` - _Vertical Scalability:_ Describes how well the system can handle an increase in load by increasing the capacity of existing hardware. ``` 6. **相容性:** ``` - _Hardware Compatibility:_ Ensures the system can run on specified hardware configurations. ``` ``` - _Software Compatibility:_ Ensures the system can work with specified software components. ``` 7. **可維護性：** ``` - _Modifiability:_ Describes the ease with which the system can be modified or updated. ``` ``` - _Testability:_ Specifies the ease with which the system can be tested to ensure its correctness. ``` 8. **可移植性：** ``` - _Platform Independence:_ Describes the ability of the system to run on different operating systems. ``` ``` - _Data Portability:_ Ensures that data can be easily transferred between different systems. ``` 9. **文件:** ``` - _User Documentation:_ Specifies the requirements for user manuals and guides. ``` ``` - _Technical Documentation:_ Describes the requirements for system architecture, API documentation, etc. ``` 10. **監理與合規：** ``` - _Legal Requirements:_ Ensures that the system complies with relevant laws and regulations. ``` ``` - _Industry Standards:_ Specifies adherence to industry-specific standards. ``` 結論 -- 正如我們所看到的，軟體需求對我們來說非常重要，並且有很多不同類型的需求，但最重要的是確保在開始開發之前，我們已經很好地定義了它們。 我希望這些內容對您有用。 如果您有任何疑問，請隨時與我聯繫！ 親吻💅🏼 --- 原文出處：https://dev.to/m4rri4nne/what-you-need-to-know-about-software-requirements-2hc0
近年來，在各種程式設計訓練營的指導中，我獲得了獨特的機會來指導和支援眾多熱衷於在雲端工程和 DevOps 領域取得成功的初級開發人員。我注意到這些有抱負的工程師中反覆出現的一個主題是，他們渴望深入了解雲端運算的複雜性，但常常對大量可用的程式語言和工具感到不知所措。這種認識激發了我的想法，即建立一個全面且平易近人的指南，為任何開始雲端工程之旅的人介紹基本的程式語言。 同樣，到 2024 年，每個雲端工程師都應該了解以下七種程式語言，每種語言都因其相關性、功能和在實現現代雲端解決方案中的作用而被選擇。 1. 翼 ----  [Wing](https://github.com/winglang/wing)的設計理念強調生產力、安全性和效率，使開發人員能夠在整個開發過程中保持單一、直覺的工作流程。 透過將基礎設施資源視為一等公民，Wing 允許開發人員直接在其應用程式程式碼中定義、互動和管理這些資源。這種整合顯著降低了與管理雲端基礎架構相關的複雜性和潛在錯誤，從而更輕鬆地建置和部署安全、可擴展的應用程式。 Wing 的主要功能之一是它能夠編譯為基礎設施即程式碼 (IaC) 格式，例如 Terraform 和 JavaScript。 Wing 對雲端應用程式本地模擬的支援徹底改變了開發人員的工作效率。在部署之前能夠在本地環境中執行、視覺化、互動和除錯雲端應用程式可以顯著加快開發週期並提高應用程式品質。此功能與易於與 DevOps 實踐整合的語言設計相結合，可確保開發人員能夠更有效地應用持續整合和持續部署 (CI/CD) 方法，從而與現代軟體開發實踐保持一致。 看看[Wing 的互動遊樂場，](https://www.winglang.io/play/)了解 Wing 語言的工作原理。 使用 Wing 非常輕鬆且超級簡單。 您可以在幾秒鐘內安裝 Wing 並開始自動化您的雲端工作流程。 ``` npm install -g winglang ``` 您可以使用以下命令驗證您的安裝。 ``` wing -V ``` 使用 CLI 引導新專案：使用 new 命令，然後修改 main.w 使其具有以下內容： ``` wing new empty ``` ``` bring cloud; // define a queue, a bucket and a counter let bucket = new cloud.Bucket(); let counter = new cloud.Counter(initial: 1); let queue = new cloud.Queue(); // When a message is received in the queue it should be consumed // by the following closure queue.setConsumer(inflight (message: str) => { // Increment the distributed counter, the index variable will // store the value prior to the increment let index = counter.inc(); // Once two messages are pushed to the queue, e.g. "Wing" and "Queue". // Two files will be created: // - wing-1.txt with "Hello Wing" // - wing-2.txt with "Hello Queue" bucket.put("wing-{index}.txt", "Hello, welcome to winglang world!"); log("file wing-{index}.txt created"); }); ``` 使用 wing it 指令透過我們新建立的應用程式啟動控制台： ``` wing it main.w ``` Wing 控制台為您提供雲端應用程式的視圖，使開發人員能夠更快地迭代和熱重載：  透過 Wing 的有關[Wing 入門](https://www.winglang.io/docs/start-here/local)的文件探索更多資訊。 2.Python --------  由於其簡單性、多功能性和強大的生態系統， [Python](https://github.com/python)仍然是雲端工程師不可或缺的語言。其廣泛的庫和框架集合（例如用於 Web 應用程式的 Flask 和用於機器學習的 TensorFlow）使 Python 成為開發各種基於雲端的服務的首選語言。此外，Python 在自動化、腳本編寫和資料分析中的作用確保了它仍然是雲端基礎設施管理、自動化任務和雲端應用程式快速原型設計的關鍵工具。 3. 成長 -----  [Go](https://github.com/golang/go)或 Golang 由 Google 設計，在雲端工程師中越來越受歡迎，用於建立高效能和可擴展的雲端服務。它的高效、簡單和內建的並發支援使其成為開發微服務、分散式系統和容器化應用程式的絕佳選擇。 Go 與雲端平台的兼容性及其有效處理繁重網路流量和複雜處理任務的能力有助於其在雲端基礎設施專案中的日益普及。 4. JavaScript（使用 Node.js） -------------------------  [JavaScript](https://en.wikipedia.org/wiki/JavaScript) ，特別是與 Node.js 一起使用時，對於專注於建置和部署可擴展且高效的 Web 應用程式的雲端工程師來說至關重要。 Node.js 允許在伺服器端使用 JavaScript，從而能夠開發適合雲端的快速、非阻塞、事件驅動的應用程式。 JavaScript 在客戶端和伺服器端開發中的普遍存在也促進了全端開發能力，使其對於從事基於雲端的 Web 服務和應用程式的工程師來說非常寶貴。 5. 生鏽 -----  [Rust](https://www.rust-lang.org/)由於強調安全性、速度和無需垃圾收集器的並發性而在雲端運算領域獲得了發展勢頭。這些功能使 Rust 成為尋求開發高效能、安全且可靠的雲端服務和基礎設施的雲端工程師的有吸引力的選擇。 Rust 的記憶體安全保證和機器程式碼的高效編譯使其成為雲端環境中系統級和嵌入式應用程式的理想語言，在雲端環境中，效能和安全性至關重要。 6. Kubernetes YAML ------------------  雖然[Kubernetes YAML](https://kubernetes.io/docs/concepts/overview/working-with-objects/) （YAML 不是標記語言）不是傳統意義上的程式語言，但對於使用 Kubernetes（容器編排事實上的標準）的雲端工程師來說至關重要。掌握 Kubernetes YAML 對於跨雲端環境定義、部署和管理容器化應用程式至關重要。了解 Kubernetes 資源檔案和配置的複雜性使工程師能夠利用容器編排的全部功能，確保可擴展、有彈性且高效的雲端原生應用程式。 7.Terraform HCL（HashiCorp配置語言） ------------------------------  [Terraform HCL](https://github.com/hashicorp/hcl) （HashiCorp 配置語言）是 2024 年雲端工程師的必備語言，尤其是那些參與基礎設施即程式碼 (IaC) 實踐的工程師。 HCL 是 Terraform 使用的配置語言，Terraform 是一種廣泛採用的工具，使工程師能夠使用聲明性配置方法定義、配置和管理雲端基礎架構。學習 Terraform HCL 使雲端工程師能夠自動化跨不同服務供應商的雲端資源部署和生命週期管理，確保雲端環境的一致性、可重複性和可擴展性。 ### 包起來 到 2024 年，所有語言都有自己的優勢，我很高興將自己關於雲端工程和 DevOps 的想法放在一起。 如果我能為我的學生提供建議，在這個不斷發展的領域迅速擴展的過程中，掌握 Wing 將成為一個令人信服的選擇。 [Wing](https://www.winglang.io/)為雲端工程師和開發人員提供了獨特的優勢，提供控制臺本地測試、熱重載（對大多數雲端工程師來說是一個挑戰）和增強的可擴展性，更不用說雲端應用程式的安全性了。 --- 原文出處：https://dev.to/pavanbelagatti/7-programming-languages-every-cloud-engineer-should-know-in-2024-1kcd
 **TL;DR - 儘管困難重重，我們建立的 Web 框架還是達到了一個里程碑！請查看（如果您喜歡的[話，請給我們加星支持](https://github.com/wasp-lang/wasp)- 謝謝！🙏），並閱讀下文以了解我們的故事以及我們是如何走到這一步的。** 作為一名開發人員，建立自己的 Web 框架可能是您能做的最可怕的事情之一。幾乎可以肯定你的專案將會失敗，作為額外的好處，其他開發人員會一路取笑你，數出它不起作用的所有原因。 < 圖>  分享您對新 Web 框架的想法是怎樣的感覺 這對我們來說沒有什麼不同。當我們開始 Wasp 時，每個人都問*“為什麼要另一個 Web 框架？為什麼有人會在成熟、著名的框架旁邊使用你的工具？”* 。我承認，這些都是好問題，但我們並沒有找到所有答案，甚至還沒有接近答案。但這絕對不是我們不這麼做的理由。 < 圖>  三年前，當我們推出 Wasp Alpha 時 我們繼續前進。我們心中有一個願景，我們想看看能否將其變成現實。**我們根本不在乎黃蜂是死是活，我們只知道我們需要堅持到底，這才是最重要的**。幾個月後，我們發布了 Alpha 版本並獲得了第一批 100 顆星。結果，這帶來了更多問題，我們距離弄清楚我們想像的概念是否真的能飛還差得遠。 **但是，我們也無法相信有人真的為我們的倉庫加註了星標。我們既驚訝又興奮**。我仍然清楚地記得 Martin Šošić 問我*“Matija，你能想像我們建立的專案在 GitHub 上獲得 1000 星嗎？”* 。我們倆立即搖頭大笑，心想*：“是啊，就是這樣啊！”* 。 < 圖>  我們的第一次社群更新，慶祝 GitHub 上的 100 顆星！ 9,500 顆星，近 3 年後，我們今天在這裡。 Wasp 即將進入 GitHub 上的精英 10,000 星俱樂部，與行業巨頭並駕齊驅。**我們啟動的框架，並根據社群的寶貴回饋進一步開發，正在被各種開發人員使用 - 從週末專案到新創公司和頂級企業**。用 Wasp 建立的新創公司[已被收購](https://dev.to/wasp/from-idea-to-exit-building-and-selling-an-ai-powered-saas-in-5-months-27d9)。我今天剛在 Upwork 上看到一則招募廣告，其中一家公司正在招募[Open SaaS](https://github.com/wasp-lang/open-saas) （React 和 Node.js 的開源免費樣板啟動器，由 Wasp 提供支援）開發人員🤯。  回想起來，我仍然覺得難以置信。從我哥哥女朋友（現在是妻子）的公寓開始，我們幾乎沒有開源也沒有社區建設經驗，但我們卻做出了全世界開發人員日常使用的產品，並且願意選擇使用它而不是主流的著名框架我們都知道。我們對此感到無比榮幸和謙卑。 我們仍然有很多問題（認為這些問題永遠不會消失），但現在也開始感覺我們得到了一些正確的答案。 < 圖>  我們今天收到的回饋 謝謝閱讀！[在這裡](https://github.com/wasp-lang/wasp)了解有關 Wasp 的更多資訊並支持我們達到 10,000 顆星的旅程。 PS：如果您想知道誰是黃蜂隊的真正老闆，現在我們終於在上面的照片中明確了這一點。必須把這個小傢伙一直帶到山頂，這樣他才能得到一個漂亮的鏡頭。 🐝 --- 原文出處：https://dev.to/wasp/our-web-framework-reached-9000-stars-on-github-9000-jij
我是一名開發人員倡導者，作為我工作的一部分，我們行銷團隊的人員經常問我... **“嘿，你知道有哪些擁有大量女性粉絲的內容創作者可供我們接觸嗎？我們很難找到很多。”** 可悲的事實是，這樣的人並不多。那麼，讓我們改變這一點。 今天是女性歷史月的第一天，您可以關注、支持並與不同類別的 31 位創作者互動。透過此列表，您可以在本月的每一天查看新的創作者，並找到新的追蹤者。 我想念你最喜歡的創作者了嗎？留下評論並附上他們的連結。 我嘗試按一般內容類別進行分組。如果您在此處看到您的名字並認為我歪曲了您的內容，請告訴我，以便我可以進行修復。 開始。 直播主播 ---- 1. [Bashbunni](https://www.twitch.tv/bashbunni/about) - 直播 Go!尼維姆！軟體開發 2. [Ali](https://links.ali.dev/) - 直播、軟體開發、安全。無論你在哪裡上網，阿里都有內容。 3. [Salma](https://whitep4nth3r.com/) - 軟體工程師、直播程式設計師和開發教育者 4. [Esther](https://www.twitch.tv/timeenjoyed) - 即時編碼與學習 5. [Leah](https://www.twitch.tv/leahtcodes) - 編碼、學習、遊戲和友誼 科技娛樂、網頁開發教學、提示 -------------- 6\. [Kedasha Kerr](https://www.instagram.com/itsthatlady.dev/) - IG 帳戶，充滿了來自您最喜歡的 Github Dev Advocate 的編碼技巧和有趣內容 7\. [Bukola](https://www.youtube.com/@Bukola1) - 從事科技工作，住在紐約，分享技巧 8\. \[真實\](https://www.instagram.com/mewtru/ ) - 為了我們的娛樂而用程式碼對使用者體驗做出犯罪行為。 9\. [Rita Codes](https://www.instagram.com/rita_codes/)開發者和遊戲玩家對開發者面臨的日常困境進行了一些熱門看法 10\. [Tiff 從事技術](https://www.youtube.com/c/TiffInTech)模型轉型開發，Tiff 有一些在技術職業生涯中取得成功的技巧 11\. [Ale Thomas](https://www.instagram.com/pikacodes/)軟體開發者讓我們在開發者的困境中保持歡笑 12\. \[娜雅\](https://www.youtube.com/@TheBlackFemaleEngineer ) - 致力於創造內容作為少數群體進入科技世界的資源 13\. [NaniLemons](https://www.tiktok.com/@nanilemons) - 程式設計師幽默、科技新聞和一般樂趣 14\. [Jess Chan -](https://www.youtube.com/c/TheCoderCoder)初學者網頁開發人員的實用技巧 15\. [Ania Kubow](https://www.youtube.com/@AniaKubow) - 如果這是網頁開發主題，Ania 可能會有一個教學。一探究竟。 16\. [Mal－](https://linktr.ee/malware_yml)有時是建設性的，有時是娛樂性的，總是一段美好時光 技術寫作 ---- 17\. [Christine Belzie](https://chrissycodes.hashnode.dev/) - 言語很重要，Chrissy 在這裡幫助我們所有人提高技術寫作技能。 德夫雷爾 ---- 18\. [Rizel Scarlett](https://dev.to/blackgirlbytes) - 向最好的人之一學習 Web5 和 Devrel！ 19\. [Tessa Kriesel](https://www.tessakriesel.com/) - Devrel 策略女王 20\. [Haimantika](https://haimantika.dev) - Devrel 和技術寫作。將 hashnode 的開發倡導者放在這個網站上是不是很奇怪？或許。 資料科學 ---- 21\. [Sundas Khalid](https://www.youtube.com/channel/UCteRPiisgIoHtMgqHegpWAQ) - 進入資料科學產業的技巧 無障礙 --- 22\. [Africa Kenyah](https://www.youtube.com/channel/UCiaMi-uLijoOEPT0lfaQCvw) - 擁有豐富知識的無障礙工程師 設計與開發 ----- 23\. [Amy Dutton](https://www.youtube.com/c/selfteachme) - 準備好提升您的開發和設計技能了嗎？關注艾米！ 24\. [Stephanie Stimac](https://seaotta.dev/) - 對設計和開發有興趣？史蒂芬妮甚至就此寫了一本書。 25\. [Muhtanya](https://www.tiktok.com/@muhtanya)藝術、設計與工程 一般開發/技術和職業 ---------- 26\. [Cassidy Williams](https://blog.cassidoo.co/) - 軟體開發、部落格、時事通訊，甚至還有一款會讓你發瘋的名為 Jumblie 的遊戲。 27.【Shaundaip】(https://www.tiktok.com/@shaundaip ) - 頂級演講者和開發者的新 tiktok 帳戶 28\. [Gift Egwuenu](https://www.youtube.com/@giftegwuenu) - 科技職業和僑民生活 開源 -- 29\. [Bekah](https://dev.to/bekahhw) - Bekah 無所不在，並且總是傳授如何在技術和開源領域取得成功的知識。 雲端/DevOps --------- 30\. [Myra](https://www.tiktok.com/@myraintech) - 關於雲端和安全領域的技術、生活方式和旅行 遊戲玩家 ---- 31\. [Krista Byte](https://www.tiktok.com/@kristabyte)致力於增強世界各地女性遊戲玩家的權能 謝謝閱讀。我希望您找到一些值得喜愛的新內容創作者！ 要了解我的最新動態，您可以在 Dev 上關注我，[在社交上與我聯繫](https://www.biodrop.io/amandamartin-dev)，並查看我在[Wix for Developers YouTube](https://www.youtube.com/@WixforDevelopers)上所做的一些工作。 --- 原文出處：https://dev.to/amandamartindev/31-women-in-tech-content-creators-to-follow-now-4642
--- 標題：為什麼事件溯源是一種微服務通訊反模式 發表：真實 描述：這篇文章描述了合理的事件溯源用例，並提供了微服務之間通訊的替代方案。 封面圖片：https://github.com/OLibutzki/blog/raw/master/water-4230596\_1920.jpg 標籤： 事件溯源, 領域驅動設計, 領域事件 --- 一般而言，事件驅動架構，特別是事件溯源，在過去幾年中獲得了廣泛關注。這種趨勢是由於我們努力建構具有彈性和可擴展性的模組化系統而引起的。*微服務*是在這種情況下經常使用的術語。在我看來，微服務只是實現有界脈絡的一種方法。模組化系統的核心是模組的邊界，而如何辨識這些邊界最有前途的想法是 Eric Evans 的領域驅動設計中引入的[戰略設計](https://en.wikipedia.org/wiki/Domain-driven_design#Strategic_domain-driven_design)。它可以幫助您辨識/發現模組及其邊界（[有界上下文](https://martinfowler.com/bliki/BoundedContext.html)），並描述這些有界上下文相互關聯的方式（上下文映射）。 *注意：我會預設某些術語的一些預知，因為我不想第一千次解釋它們。我決定連結到[microservices.io](https://microservices.io/) 、[維基百科](https://en.wikipedia.org)或[Martin Fowler 的 Bliki](https://martinfowler.com/bliki/)的解釋，因此，如果您對自己的知識感到不舒服，則可以更深入地研究某個主題。* 領域事件作為通用語言的核心 ============= 儘管在 Eric 的書中沒有明確提及，但領域事件很好地促進了 DDD 概念的發展。像 Alberto Brandolini 的[事件風暴](https://en.wikipedia.org/wiki/Event_storming)這樣的技術將事件的焦點從技術層面轉移到組織/業務層面。我們不討論一些 UI 層事件，例如*ButtonClickedEvent* ，而是討論領域事件，它們是業務領域的一部分，並由業務專家說出和理解。這些領域事件是一流的概念，並提供了一種形成所有參與者（領域專家、開發人員…）都同意的[通用語言的](https://martinfowler.com/bliki/UbiquitousLanguage.html)好方法。 用於跨界通訊的領域事件 =========== 領域事件可用於促進有界上下文之間的溝通。假設我們有一家具有三個限界上下文的線上商店：訂單、交貨、發票。 訂單上下文的網域事件是*訂單已接受*。發票和交付上下文對此事件的發生感興趣，因為它會導致一些內部流程啟動。 脫鉤神話 ==== 使用領域事件可以幫助您開發解耦的模組。模組可能會暫時離線。領域事件不關心不可用的模組，它們描述過去發生的事情。這取決於其他模組處理事件的速度。您得到的是一個設計上具有彈性的系統。 除了時間解耦之外，領域事件還具有另一個優勢，至少乍看之下是這樣： Order 上下文不必知道 Invoice 和 Delivery 上下文會偵聽其事件。實際上它甚至不需要知道這些上下文的存在。 這很酷，但具有挑戰性的部分是事件負載。哪些資料放入事件中？ 簡單的答案：事件溯源！ =========== 事件很有用，所以為什麼不賦予它們盡可能多的權力（和責任）。這就是[事件溯源](https://microservices.io/patterns/data/event-sourcing.html)的基本思想。您不會透過更新資料 (CRUD) 而是透過套用事件流來儲存聚合的狀態。 除了您可以重播事件以重建應用程式狀態之外，事件來源的一個重要功能是您可以免費獲得完整且可靠的審核日誌。因此，當需要這樣的稽核日誌時，在評估持久性策略時一定要考慮事件溯源。 事件溯源只是一種持久性策略嗎？ =============== 您可能想知道為什麼我從領域事件直接轉向持久化策略，因為這些概念顯然適用於不同的層/抽象層級。 ……這就是我的觀點：事件溯源是由單一限界上下文做出的本地決策！這些事件不該向外界曝光！其他限界上下文則不知道彼此的持久化策略，因此它們不知道也不關心另一個限界上下文是否使用事件溯源。 如果您在全球範圍內使用事件溯源，則會暴露您的持久層。 您的持久性將成為您的公共 API。每次限界上下文調整其持久性資料時，我們都必須處理公共 API 變更。 我很確定每個人都同意，由於開發和執行時耦合，不同的限界上下文[共享（關係）資料庫中的資料](https://microservices.io/patterns/data/shared-database.html)是一個壞主意。但差別在哪裡呢？ 空無一人。我們是否共享事件或資料庫表並不重要。在這兩種情況下，我們都會分享持久性詳細資訊。 有出路 === 我仍然認為領域事件非常適合限界上下文之間的通信，但這些事件不應與用於事件溯源的事件相對應。 我提出的解決方案是合乎邏輯的結果：無論您使用 CRUD 還是事件溯源方法來實現持久性，您都可以將領域事件發佈到全域事件儲存。這些領域事件是有界上下文的公共 API。如果您喜歡在限界上下文中使用事件溯源，則可以將這些事件儲存在本機事件儲存中，該儲存只能從此限界上下文存取 選擇的自由 ===== 在公共 API 中擁有專用領域事件可讓您決定如何對這些事件建模。您不受事件來源事件預先定義的佈局的限制。 對於每次發生的“現實世界事件”，您有兩個選擇： 使用已發布語言的開放主機服務 -------------- 準確發布一個網域事件，其中包含其他限界上下文可能需要的所有資料。在 DDD 術語中，我們將其稱為具有已發布語言的開放主機服務。  現實世界事件*Order Accepted*的發生會導致發布一個網域事件*OrderAccepted* 。此事件的有效負載包含 Order 期望其他限界上下文感興趣的所有資料...因此希望 Invoice 和 Delivery 上下文找到它們所需的所有資訊。 客戶/供應商 ------ 發布多個專用領域事件，每個事件使用者一個。您必須與另一方（消費者）討論每個特定的領域事件，而不必定義共享模型。 DDD 將這種關係稱為客戶/供應商。  現實世界事件*Order Accepted*的發生會導致每個消費限界上下文發布一個網域事件： *InvoiceOrderAccepted*和*DeliveryOrderAccepted* 。每個領域事件都包含消費上下文所請求的資料。 我不想討論這兩種選擇的優缺點。我只是想強調一下，您可以自由選擇領域事件的數量及其有效負載。 這是您不應低估的巨大優勢，因為您可以決定如何發展有界上下文的 API，而不必致力於事件溯源所需的事件。 結論 == 向外界公開持久性細節是一種眾所周知的反模式。在談論持久性時，我們首先想到的是資料庫表，但我解釋了為什麼用於事件來源的事件只是持久性資料的另一種方式。因此，暴露這些事件也是一種反模式。 {% 推特 784691906005635072 %} 如果以適當的（本地）方式使用事件溯源，它會非常強大。乍一看，它似乎是事件驅動架構的靈丹妙藥，但如果您深入研究，您會意識到它可能會引導您進入緊密耦合（分散式）系統……當然，這不是您的目標。 參考 == 除了我的個人經驗之外，我還從不同的摘要和會議演講中獲得了許多靈感。我想重點介紹 Eberhard Wolff 的演講《*基於事件的架構以及使用 Kafka 和 Atom 的實現》* 。特別是[事件溯源](https://youtu.be/Ecg7lvvm8aU?t=1178)和[事件中有什麼？](https://youtu.be/Ecg7lvvm8aU?t=655)與本博文的上下文高度相關。我選擇的線上商店範例是受到這次演講的啟發。 如果您想獲取更多訊息，還可以查閱其他一些資源： - [領域事件與事件溯源，](https://www.innoq.com/en/blog/domain-events-versus-event-sourcing/)作者：Christian Stettler，部落格文章 - [關於事件溯源，他們沒有告訴您的事情](https://medium.com/@hugo.oliveira.rocha/what-they-dont-tell-you-about-event-sourcing-6afc23c69e9a)由 Hugo Rocha 撰寫，部落格文章 - [DDD、CQRS、事件溯源的十年（CQRS/ES 不是頂級架構），](https://youtu.be/LDW0QWie21s?t=1259)作者：Greg Young，會議演講 --- 原文出處：https://dev.to/olibutzki/why-event-sourcing-is-a-microservice-anti-pattern-3mcj
您的普通 bash 可能具有您通常需要的功能，但**如果您是常規終端用戶，zsh 將改變您鍵入命令的方式。** zsh、ohmyzsh 和 hyper 一起提供的功能將讓您大吃一驚。 > 您知道您可以從終端控制 Spotify 嗎？是的，超級插件可以讓您做到這一點。 對於初學者來說，設定這些東西可能會讓人不知所措，所以這裡有一個非常簡單的入門指南！ 🤩 --- 🔥 簡介 ---- 如果您使用的是如下所示的常規終端，則您會錯過 OhMyZsh 提供的許多功能。  今天，您將進行終端改造，使其看起來像這樣...  不僅僅是外觀，OhMyZsh 還具有豐富的功能來點亮您的程式設計之旅。 在教程結束時，這就是您可以在終端機中執行的操作... - NPM、Git 自動完成 - 在終端機中輸入時自動建議 - 語法高亮顯示指令是否已定義 - 使用遊標編輯終端命令 - 查看目前目錄的`git branch`和`git status` - 開啟與目前分頁相同目錄的新分頁 - 使用 OhMyZsh 功能，例如不使用`cd`進行導航、使用`ll` 、更簡單的基於 Tab 鍵單擊的導航等等！ --- ❤️ 開始吧 ------ 首先，您必須安裝`zsh` 。在某些情況下（取決於您正在執行的作業系統），它可能已經安裝。因此，請透過在終端機中執行`zsh --version`檢查它是否已安裝。 `zsh`在不同作業系統的安裝過程有所不同。查看[Zsh 安裝指南](https://github.com/robbyrussell/oh-my-zsh/wiki/Installing-ZSH)來安裝 zsh。 安裝 Zsh 後，請確保將其設為預設 shell。為此，請在終端機中執行以下命令。 ``` $ sudo chsh -s $(which zsh) ``` 登出並登入回預設 shell。執行`echo $SHELL`並預期輸出`/bin/zsh`或類似內容。 --- 🔰 安裝 OhMyZsh ------------ > 請注意，zsh 和 OhMyZsh 是不同的。 透過在終端機中執行以下命令來安裝`OhMyZsh` 。 ``` $ sudo sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" ``` 當您安裝 OhMyZsh 時，它會附帶許多插件來幫助您！ 若要新增實用的插件，請在 TextEdit/Notepad/Vim/VSCode 中開啟`~/.zshrc` 。 在檔案中看到的插件清單中，只需新增一個名為`npm`的插件，如下所示 👇 ``` plugins=( git bundler dotenv osx rake rbenv ruby npm # you added this ) ``` 瞧！您已經完成了 OhMyZsh！若要查看更改，請在終端機中執行`source ~/.zshrc` ，現在您就擁有了 OhMyZsh shell 的功能。 --- 🔰 依時間安裝 HyperTerm ----------------- Zeit（now.sh 和 Next.js 的建立者）為我們建立了一個很棒的終端應用程式，它是用 Electron 建置的。 從[這裡](https://hyper.is/)下載 Hyper。 --- ### ⚛️ 使用 OhMyZsh 設定 Hyper 打開超級終端機。您不會看到 OhMyZsh 在那裡執行。因此，請轉到超級設定。在 OSX 上，它是`Hyper > Preferences` 。 這將在您最喜歡的編輯器中開啟一個`.hyper.js`檔案。該文件包含您的終端的所有設置，非常容易控制！ 若要在 Hyper 中啟用 OhMyZsh 作為預設 shell，請在`.hyper.js`中進行此變更 👇 ``` - shell: '/bin/bash' + shell: '/bin/zsh' ``` **這將使 OhMyZsh 成為您的預設超級終端 shell！** --- ### 🤩 輸入指令時自動完成 Git 將`zsh-autocomplete`插件複製到 OhMyZsh 插件資料夾中。 ``` $ sudo git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions ``` 完成後，將外掛程式新增至`~/.zshrc`檔案的外掛程式清單中。 ``` plugins=( ... zsh-autosuggestions ) ``` --- ### 🎉 Zsh 語法高亮 Git 將`zsh-syntax-highlighting`外掛程式克隆到 OhMyZsh 外掛程式資料夾中。 ``` $ sudo git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting ``` 並再次將其新增至`.zshrc`檔案的外掛程式清單。 ``` plugins=( ... zsh-syntax-highlighting ) ``` > 注意：若要反映您所做的每項更改，請在終端機中執行`source ~/.zshrc` 。 --- ### 📯 啟用 Hyper 相關功能與主題 透過切換超級終端的設定來開啟`.hyper.js` 。 請查看`plugins: [...]`部分並將這些插件名稱貼到此處。 ``` plugins: [ ... 'hypercwd', 'hyper-statusline', 'hyper-alt-click', 'hyperterm-safepaste', 'hyper-search', 'hypergoogle', 'hyperborder', 'hyper-tab-icons', 'hyper-hide-title', 'shades-of-purple-hyper' ], ``` 儲存文件，Hyper 會自動為您安裝這些外掛程式和主題。要反映更改，只需關閉並再次啟動超級終端即可。 萬歲！**現在，您的終端機中已擁有本 DEV.to 文章開頭列出的所有功能。** --- 獎勵：在 VSCode 中為整合終端設定相同的終端配置 --------------------------- 在 VSCode 設定中，新增以下 JSON 鍵值對，然後就可以開始了！ ``` { ... "terminal.integrated.shell.osx": "/bin/zsh", "terminal.integrated.fontSize": 16 } ``` **就是這樣，夥計們！** --- 🔥 資源 ---- - <https://ohmyz.sh> - <https://hyper.is> --- 🏆 關於我 ----- **我是 Kumar Abhirup，一位來自印度的 16 歲 JavaScript React 開發人員，每天都在學習新事物。** [在 Twitter 上與我聯絡 🐦](https://twitter.com/kumar_abhirup) [我的個人網站和作品集🖥️](https://kumar.now.sh) *請在下面評論您更好的方法以及改進本文的建議。 :)* --- 原文出處：https://dev.to/kumareth/a-beginner-s-guide-for-setting-up-autocomplete-on-ohmyzsh-hyper-with-plugins-themes-47f2
您可以使用無數的框架和函式庫來改進您的全端應用程式。 我們將介紹令人興奮的概念，例如應用程式內通知、使用 React 製作影片、從為開發人員提供的電子郵件 API 到在瀏覽器中建立互動式音樂。 那我們就開始吧。 （不要忘記為這些庫加註星標以表示您的支持）。  https://github.com/CopilotKit/CopilotKit --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------  您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` 這是整合 CopilotTextArea 的方法。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { useState } from "react"; export function SomeReactComponent() { const [text, setText] = useState(""); return ( <> <CopilotTextarea className="px-4 py-4" value={text} onValueChange={(value: string) => setText(value)} placeholder="What are your plans for your vacation?" autosuggestionsConfig={{ textareaPurpose: "Travel notes from the user's previous vacations. Likely written in a colloquial style, but adjust as needed.", chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 20, stop: [".", "?", "!"], }, }, }, }} /> </> ); } ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)。 基本概念是在幾分鐘內建立可用於基於 LLM 的全端應用程式的 AI 聊天機器人。 https://github.com/CopilotKit/CopilotKit --- 2. [Storybook](https://github.com/storybookjs/storybook) - UI 開發、測試和文件變得簡單。 ---------------------------------------------------------------------------  Storybook 是一個用於獨立建立 UI 元件和頁面的前端工作坊。它有助於 UI 開發、測試和文件編制。 他們在 GitHub 上有超過 57,000 次提交、81,000 多個 star 和 1300 多個版本。 這是您為專案建立簡單元件的方法。 ``` import type { Meta, StoryObj } from '@storybook/react'; import { YourComponent } from './YourComponent'; //👇 This default export determines where your story goes in the story list const meta: Meta<typeof YourComponent> = { component: YourComponent, }; export default meta; type Story = StoryObj<typeof YourComponent>; export const FirstStory: Story = { args: { //👇 The args you need here will depend on your component }, }; ``` 您可以閱讀[文件](https://storybook.js.org/docs/get-started/setup)。 如今，UI 除錯起來很痛苦，因為它們與業務邏輯、互動狀態和應用程式上下文糾纏在一起。 Storybook 提供了一個獨立的 iframe 來渲染元件，而不會受到應用程式業務邏輯和上下文的干擾。這可以幫助您將開發重點放在元件的每個變體上，甚至是難以觸及的邊緣情況。 https://github.com/storybookjs/storybook --- 3. [Appwrite](https://github.com/appwrite/appwrite) - 您的後端減少麻煩。 ---------------------------------------------------------------   Appwrite 的開源平台可讓您將身份驗證、資料庫、函數和儲存體新增至您的產品中，並建立任何規模的任何應用程式、擁有您的資料並使用您喜歡的編碼語言和工具。 他們有很好的貢獻指南，甚至不厭其煩地詳細解釋架構。 開始使用以下 npm 指令。 ``` npm install appwrite ``` 您可以像這樣建立一個登入元件。 ``` "use client"; import { useState } from "react"; import { account, ID } from "./appwrite"; const LoginPage = () => { const [loggedInUser, setLoggedInUser] = useState(null); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const login = async (email, password) => { const session = await account.createEmailSession(email, password); setLoggedInUser(await account.get()); }; const register = async () => { await account.create(ID.unique(), email, password, name); login(email, password); }; const logout = async () => { await account.deleteSession("current"); setLoggedInUser(null); }; if (loggedInUser) { return ( <div> <p>Logged in as {loggedInUser.name}</p> <button type="button" onClick={logout}> Logout </button> </div> ); } return ( <div> <p>Not logged in</p> <form> <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} /> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="button" onClick={() => login(email, password)}> Login </button> <button type="button" onClick={register}> Register </button> </form> </div> ); }; export default LoginPage; ``` 您可以閱讀[文件](https://appwrite.io/docs)。 Appwrite 可以非常輕鬆地建立具有開箱即用的擴充功能的可擴展後端應用程式。 https://github.com/appwrite/appwrite --- 4. [Wasp](https://github.com/wasp-lang/wasp) - 用於 React、node.js 和 prisma 的類似 Rails 的框架。 ---------------------------------------------------------------------------------------  使用 React 和 Node.js 開發全端 Web 應用程式的最快方法。這不是一個想法，而是一種建立瘋狂快速全端應用程式的不同方法。 這是將其整合到元件中的方法。 ``` import getRecipes from "@wasp/queries/getRecipes"; import { useQuery } from "@wasp/queries"; import type { User } from "@wasp/entities"; export function HomePage({ user }: { user: User }) { // Due to full-stack type safety, `recipes` will be of type `Recipe[]` here. const { data: recipes, isLoading } = useQuery(getRecipes); // Calling our query here! if (isLoading) { return <div>Loading...</div>; } return ( <div> <h1>Recipes</h1> <ul> {recipes ? recipes.map((recipe) => ( <li key={recipe.id}> <div>{recipe.title}</div> <div>{recipe.description}</div> </li> )) : 'No recipes defined yet!'} </ul> </div> ); } ``` 您可以閱讀[文件](https://wasp-lang.dev/docs)。 https://github.com/wasp-lang/wasp --- 5. [Novu](https://github.com/novuhq/novu) - 將應用程式內通知新增至您的應用程式！ --------------------------------------------------------------  Novu 提供開源通知基礎架構和功能齊全的嵌入式通知中心。 這就是如何使用`React`建立 novu 元件以用於應用程式內通知。 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, } from "@novu/notification-center"; function App() { return ( <> <NovuProvider subscriberId={process.env.REACT_APP_SUB_ID} applicationIdentifier={process.env.REACT_APP_APP_ID} > <PopoverNotificationCenter> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> </> ); } export default App; ``` 您可以閱讀[文件](https://docs.novu.co/getting-started/introduction)。 https://github.com/novuhq/novu --- 6. [Remotion](https://github.com/remotion-dev/remotion) - 使用 React 以程式設計方式製作影片。 -------------------------------------------------------------------------------  使用 React 建立真正的 MP4 影片，使用伺服器端渲染和參數化擴展影片製作。 開始使用以下 npm 指令。 ``` npm init video ``` 它為您提供了一個幀號和一個空白畫布，您可以在其中使用 React 渲染任何您想要的內容。 這是一個範例 React 元件，它將當前幀渲染為文字。 ``` import { AbsoluteFill, useCurrentFrame } from "remotion"; export const MyComposition = () => { const frame = useCurrentFrame(); return ( <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 100, backgroundColor: "white", }} > The current frame is {frame}. </AbsoluteFill> ); }; ``` 您可以閱讀[文件](https://www.remotion.dev/docs/)。 過去兩年，remotion 團隊因製作 GitHub Wrapped 而聞名。 https://github.com/remotion-dev/remotion --- [7.NocoDB](https://github.com/nocodb/nocodb) - Airtable 的替代品。 -------------------------------------------------------------  Airtable 的免費開源替代品是 NocoDB。它可以使用任何 MySQL、PostgreSQL、SQL Server、SQLite 或 MariaDB 資料庫製作智慧型電子表格。 其主要目標是讓強大的計算工具得到更廣泛的使用。 開始使用以下 npx 指令。 ``` npx create-nocodb-app ``` 您可以閱讀[文件](https://docs.nocodb.com/)。 NocoDB 的建立是為了為世界各地的數位企業提供強大的開源和無程式碼資料庫介面。 您可以非常快速地將airtable資料匯入NocoDB。 https://github.com/nocodb/nocodb --- 8.[新穎](https://github.com/steven-tey/novel)- 所見即所得編輯器，具有人工智慧自動完成功能。 -------------------------------------------------------------------  它使用`Next.js` 、 `Vercel AI SDK` 、 `Tiptap`作為文字編輯器。 開始使用以下 npm 指令。 ``` npm i novel ``` 您可以這樣使用它。有多種選項可用於改進您的應用程式。 ``` import { Editor } from "novel"; export default function App() { return <Editor />; } ``` https://github.com/steven-tey/novel --- 9. [Blitz](https://github.com/blitz-js/blitz) - 缺少 NextJS 的全端工具包。 -----------------------------------------------------------------  Blitz 繼承了 Next.js 的不足，為全球應用程式的交付和擴展提供了經過實戰考驗的函式庫和約定。 開始使用以下 npm 指令。 ``` npm install -g blitz ``` 這就是您如何使用 Blitz 建立新頁面。 ``` const NewProjectPage: BlitzPage = () => { const router = useRouter() const [createProjectMutation] = useMutation(createProject) return ( <div> <h1>Create New Project</h1> <ProjectForm submitText="Create Project" schema={CreateProject} onSubmit={async (values) => { // This is equivalent to calling the server function directly const project = await createProjectMutation(values) // Notice the 'Routes' object Blitz provides for routing router.push(Routes.ProjectsPage({ projectId: project.id })) }} /> </div> ); }; NewProjectPage.authenticate = true NewProjectPage.getLayout = (page) => <Layout>{page}</Layout> export default NewProjectPage ``` 您可以閱讀[文件](https://blitzjs.com/docs/get-started)。 它使建築物改善了數倍。  https://github.com/blitz-js/blitz --- 10. [Supabase](https://github.com/supabase/supabase) - 開源 Firebase 替代品。 -----------------------------------------------------------------------  我們大多數人都已經預料到 SUPABASE 會出現在這裡，因為它實在是太棒了。 開始使用以下 npm 指令 (Next.js)。 ``` npx create-next-app -e with-supabase ``` 這是使用 supabase 建立用戶的方法。 ``` import { createClient } from '@supabase/supabase-js' // Initialize const supabaseUrl = 'https://chat-room.supabase.co' const supabaseKey = 'public-anon-key' const supabase = createClient(supabaseUrl, supabaseKey) // Create a new user const { user, error } = await supabase.auth.signUp({ email: '[email protected]', password: 'example-password', }) ``` 您可以閱讀[文件](https://supabase.com/docs)。 您可以使用身份驗證、即時、邊緣功能、儲存等功能建立一個速度極快的應用程式。 Supabase 涵蓋了這一切！ 他們還提供了一些入門套件，例如 AI 聊天機器人和 Stripe 訂閱。 https://github.com/supabase/supabase --- [11.Refine](https://github.com/refinedev/refine) - 企業開源重組工具。 ------------------------------------------------------------  建立具有無與倫比的靈活性的管理面板、儀表板和 B2B 應用程式 您可以在一分鐘內使用單一 CLI 命令進行設定。 它具有適用於 15 多個後端服務的連接器，包括 Hasura、Appwrite 等。 開始使用以下 npm 指令。 ``` npm create refine-app@latest ``` 這就是使用 Refine 新增登入資訊的簡單方法。 ``` import { useLogin } from "@refinedev/core"; const { login } = useLogin(); ``` 您可以閱讀[文件](https://refine.dev/docs/)。 https://github.com/refinedev/refine --- 12. [Zenstack](https://github.com/zenstackhq/zenstack) - 資料庫到 API 和 UI 只需幾分鐘。 -----------------------------------------------------------------------------  TypeScript 工具包，透過強大的存取控制層增強 Prisma ORM，並釋放其全端開發的全部功能。 開始使用以下 npx 指令。 ``` npx zenstack@latest init ``` 這是透過伺服器適配器建立 RESTful API 的方法。 ``` // pages/api/model/[...path].ts import { requestHandler } from '@zenstackhq/next'; import { enhance } from '@zenstackhq/runtime'; import { getSessionUser } from '@lib/auth'; import { prisma } from '@lib/db'; // Mount Prisma-style APIs: "/api/model/post/findMany", "/api/model/post/create", etc. // Can be configured to provide standard RESTful APIs (using JSON:API) instead. export default requestHandler({ getPrisma: (req, res) => enhance(prisma, { user: getSessionUser(req, res) }), }); ``` 您可以閱讀[文件](https://zenstack.dev/docs/welcome)。 https://github.com/zenstackhq/zenstack --- 13. [Buildship](https://github.com/rowyio/buildship) - 低程式碼視覺化後端建構器。 --------------------------------------------------------------------  對於您正在使用無程式碼應用程式建構器（FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio...）或前端框架（Next.js、React、Vue...）建立的應用程式，您需要一個後端來支援可擴展的 API、安全工作流程、自動化等。BuildShip 為您提供了一種完全視覺化的方式，可以在易於使用的完全託管體驗中可擴展地建立這些後端任務。 這意味著您不需要在雲端平台上爭論或部署東西、執行 DevOps 等。只需立即建置和交付 🚀 https://github.com/rowyio/buildship --- 14. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 -----------------------------------------------------------------------------  Taipy 是一個開源 Python 庫，用於輕鬆的端到端應用程式開發， 具有假設分析、智慧管道執行、內建調度和部署工具。 開始使用以下命令。 ``` pip install taipy ``` 這是一個典型的Python函數，也是過濾器場景中使用的唯一任務。 ``` def filter_genre(initial_dataset: pd.DataFrame, selected_genre): filtered_dataset = initial_dataset[initial_dataset['genres'].str.contains(selected_genre)] filtered_data = filtered_dataset.nlargest(7, 'Popularity %') return filtered_data ``` 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 他們還有很多可供您建立的[演示應用程式教學](https://docs.taipy.io/en/latest/knowledge_base/demos/)。 https://github.com/Avaiga/taipy --- 15. [LocalForage](https://github.com/localForage/localForage) - 改進了離線儲存。 ------------------------------------------------------------------------  LocalForage 是一個 JavaScript 函式庫，它透過使用非同步資料儲存和簡單的、類似 localStorage 的 API 來改善 Web 應用程式的離線體驗。它允許開發人員儲存多種類型的資料而不僅僅是字串。 開始使用以下 npm 指令。 ``` npm install localforage ``` 只需包含 JS 檔案並開始使用 localForage。 ``` <script src="localforage.js"></script> ``` 您可以閱讀[文件](https://localforage.github.io/localForage/#installation)。 https://github.com/localForage/localForage --- 16. [Zod](https://github.com/colinhacks/zod) - 使用靜態類型推斷的 TypeScript-first 模式驗證。 -------------------------------------------------------------------------------  Zod 的目標是透過最大限度地減少重複的類型聲明來對開發人員友好。使用 Zod，您聲明一次驗證器，Zod 將自動推斷靜態 TypeScript 類型。將更簡單的類型組合成複雜的資料結構很容易。 開始使用以下 npm 指令。 ``` npm install zod ``` 這是您在建立字串架構時自訂一些常見錯誤訊息的方法。 ``` const name = z.string({ required_error: "Name is required", invalid_type_error: "Name must be a string", }); ``` 您可以閱讀[文件](https://zod.dev/)。 它適用於 Node.js 和所有現代瀏覽器 https://github.com/colinhacks/zod --- 17.[多普勒](https://github.com/DopplerHQ)- 管理你的秘密。 -----------------------------------------------  您可以透過在具有開發、暫存和生產環境的專案中組織機密來消除機密蔓延。 開始使用以下指令 (MacOS)。 ``` $ brew install dopplerhq/cli/doppler $ doppler --version ``` 這是安裝 Doppler CLI[的 GitHub Actions 工作流程](https://github.com/DopplerHQ/cli-action)。 您可以閱讀[文件](https://docs.doppler.com/docs/start)。 ``` name: Example action on: [push] jobs: my-job: runs-on: ubuntu-latest steps: - name: Install CLI uses: dopplerhq/cli-action@v3 - name: Do something with the CLI run: doppler secrets --only-names env: DOPPLER_TOKEN: ${{ secrets.DOPPLER_TOKEN }} ``` https://github.com/DopplerHQ --- 18. [FastAPI](https://github.com/tiangolo/fastapi) - 高效能、易於學習、快速編碼、可用於生產。 -------------------------------------------------------------------------  FastAPI 是一個現代、快速（高效能）的 Web 框架，用於基於標準 Python 類型提示使用 Python 3.8+ 建立 API。 開始使用以下命令。 ``` $ pip install fastapi ``` 這是您開始使用 FastAPI 的方式。 ``` from typing import Union from fastapi import FastAPI app = FastAPI() @app.get("/") def read_root(): return {"Hello": "World"} @app.get("/items/{item_id}") def read_item(item_id: int, q: Union[str, None] = None): return {"item_id": item_id, "q": q} ``` 您的編輯器將自動完成屬性並了解它們的類型，這是使用 FastAPI 的最佳功能之一。 您可以閱讀[文件](https://fastapi.tiangolo.com/)。 https://github.com/tiangolo/fastapi --- 19. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 ----------------------------------------------------------------------------  Flowise 是一款開源 UI 視覺化工具，用於建立客製化的 LLM 編排流程和 AI 代理程式。 開始使用以下 npm 指令。 ``` npm install -g flowise npx flowise start OR npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234 ``` 這就是整合 API 的方式。 ``` import requests url = "/api/v1/prediction/:id" def query(payload): response = requests.post( url, json = payload ) return response.json() output = query({ question: "hello!" )} ``` 您可以閱讀[文件](https://docs.flowiseai.com/)。 https://github.com/FlowiseAI/Flowise --- 20. [Scrapy](https://github.com/scrapy/scrapy) - Python 的快速進階網頁爬行和抓取框架.. ------------------------------------------------------------------------  Scrapy 是一個快速的高級網路爬行和網頁抓取框架，用於爬行網站並從頁面中提取結構化資料。它可用於多種用途，從資料探勘到監控和自動化測試。 開始使用以下命令。 ``` pip install scrapy ``` 建造並執行您的網路蜘蛛。 ``` pip install scrapy cat > myspider.py <<EOF import scrapy class BlogSpider(scrapy.Spider): name = 'blogspider' start_urls = ['https://www.zyte.com/blog/'] def parse(self, response): for title in response.css('.oxy-post-title'): yield {'title': title.css('::text').get()} for next_page in response.css('a.next'): yield response.follow(next_page, self.parse) EOF scrapy runspider myspider.py ``` 您可以閱讀[文件](https://scrapy.org/doc/)。 它擁有大約 50k+ 的星星，因此對於網頁抓取來說具有巨大的可信度。 https://github.com/scrapy/scrapy --- 21. [Tone](https://github.com/Tonejs/Tone.js) - 在瀏覽器中製作互動式音樂。 -------------------------------------------------------------  開始使用以下 npm 指令。 ``` npm install tone ``` 這是您開始使用 Tone.js 的方法 ``` // To import Tone.js: import * as Tone from 'tone' //create a synth and connect it to the main output (your speakers) const synth = new Tone.Synth().toDestination(); //play a middle 'C' for the duration of an 8th note synth.triggerAttackRelease("C4", "8n"); ``` 您可以閱讀[文件](https://github.com/Tonejs/Tone.js?tab=readme-ov-file#installation)。 https://github.com/Tonejs/Tone.js --- 22. [Spacetime](https://github.com/spencermountain/spacetime) - 輕量級 javascript 時區庫。 -----------------------------------------------------------------------------------  您可以計算遠端時區的時間；支持夏令時、閏年和半球。按季度、季節、月份、週來定位時間.. 開始使用以下 npm 指令。 ``` npm install spacetime ``` 您可以這樣使用它。 ``` <script src="https://unpkg.com/spacetime"></script> <script> var d = spacetime('March 1 2012', 'America/New_York') //set the time d = d.time('4:20pm') d = d.goto('America/Los_Angeles') d.time() //'1:20pm' </script> ``` https://github.com/spencermountain/spacetime --- 23. [Mermaid](https://github.com/mermaid-js/mermaid) - 從類似 markdown 的文字產生圖表。 ----------------------------------------------------------------------------  您可以使用 Markdown with Mermaid 等文字產生流程圖或序列圖等圖表。 這就是建立圖表的方法。 ``` sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ``` 它將做出如下圖。  您可以閱讀[VS Code](https://docs.mermaidchart.com/plugins/visual-studio-code)的[文件](https://mermaid.js.org/intro/getting-started.html)和外掛程式。 請參閱[即時編輯器](https://mermaid.live/edit#pako:eNpVkE1PwzAMhv9KlvM-2AZj62EIxJd24ADXXLzEbaKlcUkdUDX1v5MONomcnNevXz32UWoyKAvZ4mfCoPHRQRWhVuHeO42T7XZHNhTiFb0nMdRjYelbQETRUbpTwRM1uQ2erbaoDyqI_AbnZfjZVZYFVOBCy8J2DWlLwUQHKmAwKrwRo4gnF5Xid-gd2FEAL9hSyp12pMIpNcee2ArxEhH4LG-3D7TPoAPcnhL_4WVxcgHZkfedqIjMSI5ljbEGZ_LyxwFaSbZYo5JFLg3Eg5Iq9NkHiemjC1oWHBOOZWoM8PlQ_8Un45iiLErwbRY9gcH8PUrumuHKlWs5J2oKpasGPUWfZcvctMVsNrSnlWOb9lNN9ax1xkJk-7VZzVaL1RoWS1zdLuFmuTR6P9-sy8X1vDS3V_MFyL7vfwD_bJ1W)中的範例。 https://github.com/mermaid-js/mermaid --- 24.[公共 API](https://github.com/public-apis/public-apis) - 20 多個類別的 1400 多個 API。 -------------------------------------------------------------------------------  我們主要使用外部 API 來建立應用程式，在這裡您可以找到所有 API 的清單。網站連結在最後。 它在 GitHub 上擁有大約 279k+ 顆星。  從儲存庫取得網站連結非常困難。所以，我把它貼在這裡。 網址 - [Collective-api.vercel.app/](https://collective-api.vercel.app/) https://github.com/public-apis/public-apis --- 25. [Framer Motion](https://github.com/framer/motion) - 像魔法一樣的動畫。 -----------------------------------------------------------------  可用的最強大的動畫庫之一。 Framer 使用簡單的聲明性語法意味著您編寫的程式碼更少。更少的程式碼意味著您的程式碼庫更易於閱讀和維護。 您可以建立事件和手勢，並且使用 Framer 的社區很大，這意味著良好的支援。 開始使用以下 npm 指令。 ``` npm install framer-motion ``` 您可以這樣使用它。 ``` import { motion } from "framer-motion" <motion.div whileHover={{ scale: 1.2 }} whileTap={{ scale: 1.1 }} drag="x" dragConstraints={{ left: -100, right: 100 }} /> ``` 您可以閱讀[文件](https://www.framer.com/motion/introduction/)。 https://github.com/framer/motion --- 26.[順便說一句](https://github.com/btw-so/btw)- 在幾分鐘內建立您的個人部落格。 ----------------------------------------------------------  順便說一句，您可以註冊並使用，而無需安裝任何東西。您也可以使用開源版本自行託管。  使用順便說一句建立的[範例部落格](https://www.siddg.com/about)。 https://github.com/btw-so/btw --- 27. [Formbricks](https://github.com/formbricks/formbricks) - 開源調查平台。 --------------------------------------------------------------------  Formbricks 提供免費、開源的測量平台。透過精美的應用程式內、網站、連結和電子郵件調查收集用戶旅程中每個點的回饋。在 Formbricks 之上建置或利用預先建置的資料分析功能。 開始使用以下 npm 指令。 ``` npm install @formbricks/js ``` 這就是您開始使用 formbricks 的方法。 ``` import formbricks from "@formbricks/js"; if (typeof window !== "undefined") { formbricks.init({ environmentId: "claV2as2kKAqF28fJ8", apiHost: "https://app.formbricks.com", }); } ``` 您可以閱讀[文件](https://formbricks.com/docs/getting-started/quickstart-in-app-survey)。 https://github.com/formbricks/formbricks --- 28. [Stripe](https://github.com/stripe) - 支付基礎設施。 -------------------------------------------------  數以百萬計的各種規模的公司在線上和親自使用 Stripe 來接受付款、發送付款、自動化財務流程並最終增加收入。 開始使用以下 npm 指令 (React.js)。 ``` npm install @stripe/react-stripe-js @stripe/stripe-js ``` 這就是使用鉤子的方法。 ``` import React, {useState} from 'react'; import ReactDOM from 'react-dom'; import {loadStripe} from '@stripe/stripe-js'; import { PaymentElement, Elements, useStripe, useElements, } from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { event.preventDefault(); if (elements == null) { return; } // Trigger form validation and wallet collection const {error: submitError} = await elements.submit(); if (submitError) { // Show error to your customer setErrorMessage(submitError.message); return; } // Create the PaymentIntent and obtain clientSecret from your server endpoint const res = await fetch('/create-intent', { method: 'POST', }); const {client_secret: clientSecret} = await res.json(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return ( <form onSubmit={handleSubmit}> <PaymentElement /> <button type="submit" disabled={!stripe || !elements}> Pay </button> {/* Show error message to your customers */} {errorMessage && <div>{errorMessage}</div>} </form> ); }; const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); const options = { mode: 'payment', amount: 1099, currency: 'usd', // Fully customizable with appearance API. appearance: { /*...*/ }, }; const App = () => ( <Elements stripe={stripePromise} options={options}> <CheckoutForm /> </Elements> ); ReactDOM.render(<App />, document.body); ``` 您可以閱讀[文件](https://github.com/stripe/react-stripe-js?tab=readme-ov-file#minimal-example)。 您幾乎可以整合任何東西。它有一個巨大的選項清單。  https://github.com/stripe --- 29. [Upscayl](https://github.com/upscayl/upscayl) - 開源 AI 影像升級器。 ----------------------------------------------------------------  適用於 Linux、MacOS 和 Windows 的免費開源 AI Image Upscaler 採用 Linux 優先概念建構。 它可能與全端無關，但它對於升級圖像很有用。  透過最先進的人工智慧，Upscayl 可以幫助您將低解析度影像變成高解析度。清脆又鋒利！ https://github.com/upscayl/upscayl --- 30.[重新發送](https://github.com/resend)- 為開發人員提供的電子郵件 API。 -------------------------------------------------------  您可以使用 React 建立和傳送電子郵件。 2023 年最受炒作的產品之一。 開始使用以下 npm 指令。 ``` npm install @react-email/components -E ``` 這是將其與 next.js 專案整合的方法。 ``` import { EmailTemplate } from '@/components/email-template'; import { Resend } from 'resend'; const resend = new Resend(process.env.RESEND_API_KEY); export async function POST() { const { data, error } = await resend.emails.send({ from: '[email protected]', to: '[email protected]', subject: 'Hello world', react: EmailTemplate({ firstName: 'John' }), }); if (error) { return Response.json({ error }); } return Response.json(data); } ``` 您可以閱讀[文件](https://resend.com/docs/introduction)。  基本概念是一個簡單、優雅的介面，讓您可以在幾分鐘內開始發送電子郵件。它可以透過適用於您最喜歡的程式語言的 SDK 直接融入您的程式碼中。 https://github.com/resend --- 哇！如此長的專案清單。 我知道您有更多想法，分享它們，讓我們一起建造：D 如今建立全端應用程式並不難，但每個應用程式都可以透過有效地使用優秀的開源專案來解決任何問題來增加這一獨特因素。 例如，您可以建立一些提供通知或建立 UI 流來抓取資料的東西。 我希望其中一些內容對您的開發之旅有用。他們擁有一流的開發人員經驗；你可以依賴他們。 由於您將要建造東西，因此您可以在這裡找到一些[瘋狂的想法](https://github.com/florinpop17/app-ideas)。 祝你有美好的一天！直到下一次。 --- 原文出處：https://dev.to/copilotkit/im-building-a-full-stack-app-here-are-the-libraries-im-going-to-use-51nk
 **這是這十年來作業系統命令列介面發生的最具創新性的事情！💡** 您現在可能想知道“這是什麼？🤔”。 簡單來說，warp 是類別 Unix 作業系統中終端的替代品。這意味著您可以使用 Warp 在終端上完成工作，速度更快，使用者更友善。💫 閒聊夠了，讓我們深入了解 Warp 比內建終端（或現在已經安裝的終端）更好的原因。 現在您可能已經在使用自訂終端/外掛程式或利用內建終端功能的主題，例如： > iTerm2 > Oh-my-zsh（包括 powerlevel10k 等主題） 這些終端提供了一些很酷的功能，例如自動完成、自動更正、建議、顏色編碼等。 但 Warp 已經超越了這些實現，表明 Terminal 可以做得更好。 **扭曲的特點** > 1. 很像 IDE  除了普通的命令列 UX（使用者體驗）之外，Warp 還允許您像在 IDE 中一樣插入、選擇或複製。您可以透過鍵盤或滑鼠控制遊標。它還無需任何插件即可執行智慧自動完成。 > 2. 人工智慧  Warp 具有內建的 AI 功能。您可以與 Warp AI 聊天並解決所有編碼問題，甚至無需離開終端。 Warp AI 還包括 AI 命令建議，可以透過在命令列上鍵入 CTRL-` 或 # 來存取。  最酷的事情是您的請求保持私密和安全，並且永遠不會用於訓練公共模型。 > 3. 協作終端  Warp 讓您可以使用 Warp 帳戶進行團隊共享和工作（此帳戶需要在開始時建立，目前是強制性的）。這是迄今為止我在任何其他終端中都沒有見過的功能。 > 4. 終端工作流程  這使您可以保存和組織您建立的難以記住的自訂命令，以便您以後可以輕鬆地重複使用它們。這可以保存您的 Warp 驅動器（Warp 開發團隊提供的線上儲存解決方案），然後可以與您所有的朋友共用。 > 5. 製作您自己的自訂主題。  終端主題已經存在很久了，但沒有人能像 Warp 一樣做到這一點。 Warp 為您提供了一些內建主題可供選擇。但最好的部分是它允許您透過從自訂背景圖像自動生成調色板來建立自己的調色板，或者您可以編寫自己的主題。 **你想嘗試嗎？** 您可以使用 Warp 並親自體驗這些功能，您可以使用以下方法將其安裝到您的系統中， 1. [從此連結前往 Warp 官方頁面](https://www.warp.dev/) 2. 您將看到一個根據您的系統下載軟體包安裝程式的按鈕。目前僅適用於 macOS 和 Linux。很快就會新增 Windows 支援。 3. 您可以使用安裝程式來安裝它，就像安裝其他軟體一樣。 或者 如果您的系統中安裝了`brew` ，則可以執行以下命令輕鬆下載並安裝Warp。 `brew install --cask warp` 初始設定將要求您建立並登入 Warp 帳戶，該帳戶將在您首次開啟 Warp 時進行引導。您可以使用 GitHub 或 Google 帳戶輕鬆建立 Warp 帳戶。 結論 我親自嘗試了 Warp，並對這種建立更友善的命令列介面的新方法感到非常積極。隨著程式技術的進步，開發人員為現代框架、插件和套件甚至 IDE 等語言提出了許多創新的東西，但沒有太多創新集中在命令列介面上，這使得新開發人員思考命令line 很無聊，盡量避免它，導致缺乏終端命令的知識和經驗。 諸如此類的措施讓命令列介面更加受到關注，並使這些新開發人員對使用命令列更感興趣。 Warp 開發團隊做得很好，透過寫這篇文章，我想為這個專案提供更多的影響力和認識，因為我是這個專案的支持方。 > 所有圖像和影片均從 Warp 官方網站獲得，並註明來源。 🙌 --- 原文出處：https://dev.to/chamal1120/warp-a-new-way-to-use-your-command-line-1hp6
您是否想過為開源做出貢獻？如果你在這裡，你可能就這麼做了😄 對於初學者來說，這可能會讓人感到困惑，但我可以理解——我自己也經歷過這樣的情況。然而，您找到了繼續前進的意志力並了解了有關此過程的更多訊息，我希望本文將向您展示它並不像看起來那麼複雜。 大多數接受貢獻的儲存庫通常都有一個您應該留意的**CONTRIBUTING.MD**檔案。由於並非所有存儲庫都是相同的，因此該文件將告訴您有關為該特定存儲庫做出貢獻的過程的更多資訊。 然而，一些通用規則可以應用於大多數儲存庫，我們將在本文中討論它們。 ### 支持我們🙏🏻  在我們開始之前，如果您為我們的[開源儲存庫](https://github.com/cyclops-ui/cyclops)加註星標並幫助我們獲得我們的產品，我們將非常高興 在其他開發者面前的工具 ⭐ 在哪裡貢獻？ ------ 我想到的第一個問題是：在哪裡做出貢獻？ 好吧，您應該從**您已經使用的**專案開始。也許某些庫需要更新，或者某些工具有錯誤？ 您可能想為您的**專業領域**內的某些專案或使用您熟悉的**技術堆疊的**專案做出貢獻。 這些都是偉大的競爭者，你應該研究一下他們。 如果您不了解任何專案但仍想做出貢獻，請瀏覽 GitHub 或造訪[Quine](https://quine.sh/contribute)等網站，其中許多開源儲存庫正在尋找貢獻者。 在本文中，我們將使用我們的開源儲存庫 - [**Cyclops**](https://github.com/cyclops-ui/cyclops) 。 如何知道哪些方面需要改進？ ------------- 無論您是在尋找事情做，還是已經知道需要修復的錯誤，所有貢獻都從同一個地方開始 -**問題選項卡**。  如果您是該專案的新手，您可以尋找大多數儲存庫都有的「 ***goodfirst issues」***標籤。顧名思義，它們是參與專案的一個很好的切入點。所有問題都應該有問題的描述。 如果您知道此處未列出的問題或錯誤，或者您希望看到新功能的引入，請開啟一個新問題！一旦您提出問題，維護人員將決定下一步要做什麼，您應該**在開始編碼之前等待他們的答案**。 **專業提示**：如果您要提出錯誤問題，請務必寫下如何重現該錯誤的步驟！ 如何貢獻？ ----- 好的，我們找到了一個儲存庫，這是我們想要解決的問題，與維護人員進行了交談，並獲得了解決該問題的綠燈。最後讓我們開始編碼吧！ ### 1. 分叉倉庫 第一步是**分叉**儲存庫。這將**複製該專案**並將其新增至您的 GitHub 帳戶。  ### 2. 克隆倉庫 現在轉到您的儲存庫並找到分叉的儲存庫。點選**< > 程式碼**按鈕並選擇選項之一 (HTTPS / SSH / GitHub CLI)。  **複製框中的內容**。現在打開終端並將自己定位到要在本地儲存專案的位置。一旦您定位好自己，請在終端機中輸入以下命令： ``` git clone <paste the copied content> ``` 片刻之後，您的 PC 上就應該有該專案了！ ### 3. 建立新分支 現在，轉到本機資料夾並建立新分支。請務必查看專案的**CONTRIBUTE.md** ，看看維護者是否希望您遵循一些**分支命名**規則！ ### 4. 提交並推動您的更改 一旦準備好分支，您就可以開始更改程式碼庫。完成後，提交更改並將其推送到您的分叉存儲庫。如果儲存庫已就位，請務必遵循**提交訊息約定**（檢查**CONTRIBUTING.md** ）。 ### 5. 發起拉取請求 現在您已經推送了更改並希望將它們合併到主存儲庫，是時候建立拉取請求了！再次，您應該檢查**CONTRIBUTING.md**規則，看看維護者是否希望您**在建立 PR 時遵循命名約定**以及他們希望在描述中看到什麼。  ❗請務必將`base repository`設定為您衍生的原始儲存庫❗ 我建立了一個 PR，現在怎麼辦？ ---------------- 您對所做的更改感到滿意，並成功建立了對主儲存庫的拉取請求。現在怎麼辦？現在，你**等著吧**。 根據您的 PR 正在修復的問題的緊急程度以及維護人員的日程安排，您將不得不等待有人**審核**您的拉取請求。準備好解釋為什麼以及你做了什麼（如果你在 PR 描述中沒有做好），並在必要時**進行更改**。 不要以個人名義接受任何變更要求。你們所有人都是為了專案的進步而來到這裡，沒有人懷有惡意。**如果您不同意**審稿人的意見，**請告訴他們**！健康的討論從來都不是壞事。 為什麼分叉？ 🍴 -------- 您可能想知道為什麼我們必須分叉存儲庫。為什麼不直接克隆原始版本並在單獨的分支上工作？基本上，刪除#1 步驟，其餘的不是一樣嗎？ 好吧，您可以嘗試，但是一旦您推送更改，您就會發現您**沒有這樣做的授權**！透過分叉儲存庫，您將成為複製儲存庫的擁有者，並**有權更改程式碼庫**。這是一個簡潔的系統，可以確保只有原始維護者批准的變更才能通過。 去貢獻吧！ ----- 現在您已經掌握了這些訊息，您就可以開始在開源世界中留下自己的印記了！去幫助您已經聽說過和沒有聽說過的無數專案，並加入這個不斷發展的社區。我們將非常感謝您的幫助，我確信這一點😉 您知道有哪些開源專案帶有很多「第一期好」的標籤嗎？請在評論中分享！ --- 原文出處：https://dev.to/cyclops-ui/interested-in-contributing-to-open-source-heres-what-you-need-to-know-g1c
上週，我推出了[notesGPT](https://usenotesgpt.com/) ，這是一款免費開源語音記事應用程式，上週迄今為止已有[35,000 名訪客](https://twitter.com/nutlope/status/1760053364791050285)、7,000 名用戶和超過 1,000 名 GitHub star。它允許您錄製語音筆記，使用[Whisper](https://github.com/openai/whisper)進行轉錄，並透過[Together](https://together.ai/)使用 Mixtral 來提取操作項並將其顯示在操作項視圖中。它也是[完全開源的](https://github.com/nutlope/notesgpt)，配備了身份驗證、儲存、向量搜尋、操作項，並且在行動裝置上完全響應，易於使用。 我將向您詳細介紹我是如何建造它的。 架構和技術堆疊 ------- 這是架構的快速圖表。我們將更深入地討論每個部分，並同時展示程式碼範例。  這是我使用的整體技術堆疊： - 資料庫和雲端函數的[convex](https://convex.dev/) - Next.js [App Router](https://nextjs.org/docs/app)框架 - [複製](https://replicate.com/)Whisper 轉錄 - LLM 與[JSON 模式](https://docs.together.ai/docs/json-mode)的[Mixtral](https://mistral.ai/news/mixtral-of-experts/) - [Together.ai](http://Together.ai)用於推理和嵌入 - 用於儲存語音註釋的[凸檔存儲](https://docs.convex.dev/file-storage) - [凸向量搜尋](https://docs.convex.dev/vector-search)用於向量搜尋 - 負責使用者身份驗證的[職員](https://clerk.dev/) - [Tailwind CSS](https://tailwindcss.com/)樣式 登陸頁面 ---- 該應用程式的第一部分是您導航到notesGPT 時看到的登入頁面。  用戶首先看到的是這個登陸頁面，它與應用程式的其餘部分一起使用 Next.js 和 Tailwind CSS 進行樣式建立。我喜歡使用 Next.js，因為它可以輕鬆啟動 Web 應用程式並編寫 React 程式碼。 Tailwind CSS 也很棒，因為它允許您在網頁上快速迭代，同時與 JSX 保持在同一檔案中。 與 Clerk 和 Convex 進行身份驗證 ----------------------- 當使用者點擊主頁上的任一按鈕時，他們將被導向到登入畫面。這是由 Clerk 提供支援的，這是一個與 Convex 很好整合的簡單身份驗證解決方案，我們將在整個後端使用它，包括雲端功能、資料庫、儲存和向量搜尋。  Clerk 和 Convex 都很容易設定。您只需在這兩個服務上建立一個帳戶，安裝它們的 npm 庫，執行`npx convex dev`來設定您的凸資料夾，然後建立一個如下所示的`ConvexProvider.ts`檔案來包裝您的應用程式。 ``` 'use client'; import { ReactNode } from 'react'; import { ConvexReactClient } from 'convex/react'; import { ConvexProviderWithClerk } from 'convex/react-clerk'; import { ClerkProvider, useAuth } from '@clerk/nextjs'; const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!); export default function ConvexClientProvider({ children, }: { children: ReactNode; }) { return ( <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!} > <ConvexProviderWithClerk client={convex} useAuth={useAuth}> {children} </ConvexProviderWithClerk> </ClerkProvider> ); } ``` 請查看[Convex Quickstart](https://docs.convex.dev/quickstart/nextjs)和[Convex Clerk](https://docs.convex.dev/auth/clerk) auth 部分以了解更多詳細資訊。 設定我們的架構 ------- 您可以在有或沒有模式的情況下使用 Convex。就我而言，我知道資料的結構並想要定義它，所以我在下面這樣做了。這也為您提供了一個非常好的類型安全 API，可以在與資料庫互動時使用。我們定義兩個表格－一個用於儲存所有語音註解資訊的`notes`表和用於提取的操作專案的`actionItems`表。我們還將定義索引，以便能夠透過`userId`和`noteId`快速查詢資料。 ``` import { defineSchema, defineTable } from 'convex/server'; import { v } from 'convex/values'; export default defineSchema({ notes: defineTable({ userId: v.string(), audioFileId: v.string(), audioFileUrl: v.string(), title: v.optional(v.string()), transcription: v.optional(v.string()), summary: v.optional(v.string()), embedding: v.optional(v.array(v.float64())), generatingTranscript: v.boolean(), generatingTitle: v.boolean(), generatingActionItems: v.boolean(), }) .index('by_userId', ['userId']) .vectorIndex('by_embedding', { vectorField: 'embedding', dimensions: 768, filterFields: ['userId'], }), actionItems: defineTable({ noteId: v.id('notes'), userId: v.string(), task: v.string(), }) .index('by_noteId', ['noteId']) .index('by_userId', ['userId']), }); ``` 儀表板 --- 現在我們已經有了後端和身份驗證設定以及模式，我們可以看看如何獲取資料。登入應用程式後，用戶可以查看其儀表板，其中列出了他們錄製的所有語音筆記。  為此，我們首先在凸資料夾中定義一個查詢，該查詢使用 auth 接收`userId` ，驗證其有效，並傳回與使用者的`userId`相符的所有註解。 ``` export const getNotes = queryWithUser({ args: {}, handler: async (ctx, args) => { const userId = ctx.userId; if (userId === undefined) { return null; } const notes = await ctx.db .query('notes') .withIndex('by_userId', (q) => q.eq('userId', userId)) .collect(); const results = Promise.all( notes.map(async (note) => { const count = ( await ctx.db .query('actionItems') .withIndex('by_noteId', (q) => q.eq('noteId', note._id)) .collect() ).length; return { count, ...note, }; }), ); return results; }, }); ``` 之後，我們可以透過凸提供的函數使用使用者的驗證令牌來呼叫此`getNotes`查詢，以在儀表板中顯示所有使用者的註解。我們使用伺服器端渲染在伺服器上取得此資料，然後將其傳遞到`<DashboardHomePage />`客戶端元件。這也確保了客戶端上的資料也保持最新。 ``` import { api } from '@/convex/_generated/api'; import { preloadQuery } from 'convex/nextjs'; import DashboardHomePage from './dashboard'; import { getAuthToken } from '../auth'; const ServerDashboardHomePage = async () => { const token = await getAuthToken(); const preloadedNotes = await preloadQuery(api.notes.getNotes, {}, { token }); return <DashboardHomePage preloadedNotes={preloadedNotes} />; }; export default ServerDashboardHomePage; ``` 錄製語音筆記 ------ 最初，使用者的儀表板上不會有任何語音註釋，因此他們可以點擊「錄製新語音註釋」按鈕來錄製。他們將看到以下螢幕，允許他們進行錄製。  這將使用本機瀏覽器 API 錄製語音筆記，將檔案保存在 Convex 檔案儲存中，然後透過 Replicate 將其傳送至 Whisper 進行轉錄。我們要做的第一件事是在凸資料夾中定義一個`createNote`突變，它將接收此記錄，在凸資料庫中保存一些訊息，然後呼叫耳語操作。 ``` export const createNote = mutationWithUser({ args: { storageId: v.id('_storage'), }, handler: async (ctx, { storageId }) => { const userId = ctx.userId; let fileUrl = (await ctx.storage.getUrl(storageId)) as string; const noteId = await ctx.db.insert('notes', { userId, audioFileId: storageId, audioFileUrl: fileUrl, generatingTranscript: true, generatingTitle: true, generatingActionItems: true, }); await ctx.scheduler.runAfter(0, internal.whisper.chat, { fileUrl, id: noteId, }); return noteId; }, }); ``` 耳語動作如下圖所示。它使用 Replicate 作為 Whisper 的託管提供者。 ``` export const chat = internalAction({ args: { fileUrl: v.string(), id: v.id('notes'), }, handler: async (ctx, args) => { const replicateOutput = (await replicate.run( 'openai/whisper:4d50797290df275329f202e48c76360b3f22b08d28c196cbc54600319435f8d2', { input: { audio: args.fileUrl, model: 'large-v3', translate: false, temperature: 0, transcription: 'plain text', suppress_tokens: '-1', logprob_threshold: -1, no_speech_threshold: 0.6, condition_on_previous_text: true, compression_ratio_threshold: 2.4, temperature_increment_on_fallback: 0.2, }, }, )) as whisperOutput; const transcript = replicateOutput.transcription || 'error'; await ctx.runMutation(internal.whisper.saveTranscript, { id: args.id, transcript, }); }, }); ``` 此外，所有這些檔案都可以在 Convex 儀表板的「檔案」下看到。  生成行動專案 ------ 使用者完成語音記錄並透過耳語進行轉錄後，輸出將傳遞到 Together AI 中。我們同時顯示此加載畫面。  我們首先定義一個我們希望輸出所在的模式。然後，我們將此模式傳遞到 Together.ai 上託管的 Mixtral 模型中，並提示辨識語音註釋的摘要、文字記錄，並根據成績單。然後我們將所有這些資訊保存到 Convex 資料庫中。為此，我們在凸資料夾中建立一個凸動作。 ``` // convex/together.ts const NoteSchema = z.object({ title: z .string() .describe('Short descriptive title of what the voice message is about'), summary: z .string() .describe( 'A short summary in the first person point of view of the person recording the voice message', ) .max(500), actionItems: z .array(z.string()) .describe( 'A list of action items from the voice note, short and to the point. Make sure all action item lists are fully resolved if they are nested', ), }); export const chat = internalAction({ args: { id: v.id('notes'), transcript: v.string(), }, handler: async (ctx, args) => { const { transcript } = args; const extract = await client.chat.completions.create({ messages: [ { role: 'system', content: 'The following is a transcript of a voice message. Extract a title, summary, and action items from it and answer in JSON in this format: {title: string, summary: string, actionItems: [string, string, ...]}', }, { role: 'user', content: transcript }, ], model: 'mistralai/Mixtral-8x7B-Instruct-v0.1', response_model: { schema: NoteSchema, name: 'SummarizeNotes' }, max_tokens: 1000, temperature: 0.6, max_retries: 3, }); const { title, summary, actionItems } = extract; await ctx.runMutation(internal.together.saveSummary, { id: args.id, summary, actionItems, title, }); }); ``` 當 Together.ai 做出回應時，我們會看到最終畫面，使用者可以在左側的記錄和摘要之間切換，並查看並勾選右側的操作專案。  向量搜尋 ---- 該應用程式的最後一部分是向量搜尋。我們使用 Together.ai 嵌入來嵌入文字記錄，並使人們可以根據文字記錄的語義在儀表板中進行搜尋。 我們透過在凸資料夾中建立一個`similarNotes`操作來實現此目的，該操作接受使用者的搜尋查詢，為其產生嵌入，並找到要在頁面上顯示的最相似的註釋。 ``` export const similarNotes = actionWithUser({ args: { searchQuery: v.string(), }, handler: async (ctx, args): Promise<SearchResult[]> => { // 1. Create the embedding const getEmbedding = await togetherai.embeddings.create({ input: [args.searchQuery.replace('/n', ' ')], model: 'togethercomputer/m2-bert-80M-32k-retrieval', }); const embedding = getEmbedding.data[0].embedding; // 2. Then search for similar notes const results = await ctx.vectorSearch('notes', 'by_embedding', { vector: embedding, limit: 16, filter: (q) => q.eq('userId', ctx.userId), // Only search my notes. }); return results.map((r) => ({ id: r._id, score: r._score, })); }, }); ``` 結論 -- 就像這樣，我們建立了一個可投入生產的全端人工智慧應用程式，配備身份驗證、資料庫、儲存和 API。請隨意查看[notesGPT，](https://usenotesgpt.com/)以從您的筆記或[GitHub 儲存庫](https://github.com/nutlope/notesGPT)產生操作專案以供參考。如果您有任何疑問，[請私訊我](twitter.com/nutlope)，我將非常樂意回答！ --- 原文出處：https://dev.to/nutlope/how-i-built-notesgpt-a-full-stack-ai-voice-note-app-265o
[本·羅戈揚](https://www.linkedin.com/in/benjaminrogojan/) 軟體工程面試與其他技術面試一樣，需要充分的準備。有許多主題需要涵蓋，以確保您準備好應對有關演算法、資料結構、設計、最佳化以及不斷增長的主題的連續問題。 因此，我在最後一輪面試中建立了一個清單，涵蓋了許多熱門話題。 為了幫助您追蹤進度，我們針對下面列出的相同問題編制了一份全面的清單； [該列表可以在這裡找到](https://docs.google.com/spreadsheets/d/19hSRrL4l3gRiJ5ucH9q4iwFo2QHgic9gGMNUrcn1mm0/edit?usp=sharing)。 ### **聆聽經典熱身** 1. [fizzbuzz](https://www.hackerrank.com/challenges/fizzbuzz/problem) 2. [子陣列和等於 K](https://leetcode.com/problems/subarray-sum-equals-k/) 3. [陣列：左旋轉](https://www.hackerrank.com/challenges/ctci-array-left-rotation/problem?h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=arrays) 4. [字串：製作字謎詞](https://www.hackerrank.com/challenges/ctci-making-anagrams/problem?h_l=interview&playlist_slugs%5B%5D=interview-preparation-kit&playlist_slugs%5B%5D=strings) 5. [第 N 次斐波那契數](https://www.algoexpert.io/questions/Nth%20Fibonacci) 你怎麼做的？花點時間對這些經典作品進行評價。我們在面試過程中的某個時刻被問到了其中大部分問題，而且通常是在早期就被問到的淘汰式問題。它們通常與演算法和資料結構關係不大，但仍然需要對循環和陣列有很好的理解（是的，陣列是一種資料結構）。 ### **演算法和資料結構** #### **預習問題** 在觀看有關資料結構和演算法的影片內容之前，請考慮嘗試以下這些問題。看看你能否回答他們。這將幫助您知道要關注什麼。 1. [985. 查詢後偶數之和](https://leetcode.com/problems/sum-of-even-numbers-after-queries/) 2. [657. 機器人回歸原點](https://leetcode.com/problems/robot-return-to-origin/) 3. [961. 2N 陣列中的 N 重複元素](https://leetcode.com/problems/n-repeated-element-in-size-2n-array/) 4. [110.平衡二元樹](https://leetcode.com/problems/balanced-binary-tree/) 5. [3. 最長無重複字元的子字串](https://leetcode.com/problems/longest-substring-without-repeating-characters/) 6. [19. 從清單結尾刪除第 N 個節點](https://leetcode.com/problems/remove-nth-node-from-end-of-list/) 7. [23. 合併 k 個排序列表](https://leetcode.com/problems/merge-k-sorted-lists/) 8. [31. 下一個排列](https://leetcode.com/problems/next-permutation/) ### 演算法和資料結構影片 #### 資料結構  1. [資料結構與演算法 #1 --- 什麼是資料結構？](https://www.youtube.com/watch?v=bum_19loj9A) --- 影片 2. [多調光](https://archive.org/details/0102WhatYouShouldKnow/02_05-multidimensionalArrays.mp4)--- 影片 3. [動態陣列](https://www.coursera.org/learn/data-structures/lecture/EwbnV/dynamic-arrays)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 4. [調整陣列大小](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 5. [資料結構：鍊錶](https://youtu.be/njTh_OwMljA)--- 影片 6. [核心鍊錶與陣列](https://www.coursera.org/learn/data-structures-optimizing-performance/lecture/rjBs9/core-linked-lists-vs-arrays)--- 影片 7. [指針到指針](https://www.eskimo.com/~scs/cclass/int/sx8.html)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 8. [資料結構：樹](https://youtu.be/oSWTXtMglKE)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 9. [資料結構：堆](https://youtu.be/t0Cq6tVNRBA)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 10. [資料結構：哈希表](https://youtu.be/shs0KM3wKv8)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 11. [電話簿問題](https://www.coursera.org/learn/data-structures/lecture/NYZZP/phone-book-problem)---影片 12. [資料結構：堆疊和佇列](https://youtu.be/wjI1WNcIntg)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 13. [使用堆疊後進先出](https://archive.org/details/0102WhatYouShouldKnow/05_01-usingStacksForLast-inFirst-out.mp4)--- 影片 14. [資料結構：計算機科學速成課程#14](https://youtu.be/DuDz6B4cqVc)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 15. [資料結構：嘗試](https://www.youtube.com/watch?v=zIjfhVPRZCg)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 #### 演算法  1. [演算法：圖搜尋、DFS 和 BFS](https://www.youtube.com/watch?v=zaBhtODEL0w&list=PLX6IKgS15Ue02WDPRCmYKuZicQHit9kFt)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 2. [BFS(廣度優先搜尋)和DFS(深度優先搜尋)](https://www.youtube.com/watch?v=uWL6FJhq5fM) --- 影片 3. [演算法：二分查找](https://youtu.be/P3YID7liBug)---影片 4. [二元搜尋樹回顧](https://www.youtube.com/watch?v=x6At0nzX92o&index=1&list=PLA5Lqm4uh9Bbq-E0ZnqTIa8LRaL77ica6)--- 影片 5. [用於面試的 Python 演算法](https://www.youtube.com/watch?v=p65AHm9MX80)[ ](https://archive.org/details/0102WhatYouShouldKnow/03_01-resizableArrays.mp4)--- 影片 6. [演算法：遞歸](https://youtu.be/KEEKn7Me-ms)---影片 7. [演算法：冒泡排序](https://youtu.be/6Gv8vg0kcHc)--- 影片 8. [演算法：歸併排序](https://youtu.be/KF2j-9iSf4Q)--- 影片 9. [演算法：快速排序](https://youtu.be/SLauY6PpjW4)---影片 ### **大 O 表示法** 1. [大 O 表示法與時間複雜度簡介（資料結構與演算法 #7）](https://www.youtube.com/watch?v=D6xkbGLQesk) --- 影片 2. [哈佛 CS50 --- 漸近符號](https://www.youtube.com/watch?v=iOq5kSKqeR4)--- 影片 3. [演算法複雜度分析的簡單介紹](http://discrete.gr/complexity/)--- Post 4. [備忘錄](http://bigocheatsheet.com/)--- 帖子 ### **動態規劃** 1. [動態規劃（像程式設計師一樣思考）---影片](https://www.youtube.com/watch?v=iv_yHjmkv4I) 2. [演算法：記憶化與動態規劃 --- 影片](https://www.youtube.com/watch?v=P8Xa2BitN3I&t=13s) 3. 6 [.006：動態規劃 I：斐波那契、最短路徑 --- 影片](https://www.youtube.com/watch?v=OQ5jsbhAv_M&t=7s) 4. [6.006：動態規劃 II：文字對齊、二十一點 --- 影片](https://www.youtube.com/watch?v=ENyox7kNKeY&t=4s) 5. [動態規劃 --- 帖子](https://www.topcoder.com/community/competitive-programming/tutorials/dynamic-programming-from-novice-to-advanced/) ### **字串操作** 1. [編碼面試問答：最長的連續字元](https://www.youtube.com/watch?v=qRNB8CV3_LU)--- 影片 2. [Sedgewick --- 子字串搜尋](https://www.coursera.org/learn/algorithms-part2/home/week/4)--- 影片 #### 面試問題演練 1. [谷歌編碼面試 --- 普世價值樹問題](https://www.youtube.com/watch?v=7HgsS8bRvjo)--- 影片 2. [Google 編碼面試問題和答案 #1：第一個重複出現的字元](https://www.youtube.com/watch?v=GJdiM-muYqc)--- 影片 3. [在二元搜尋樹中找到最小和最大元素](https://www.youtube.com/watch?v=Ut90klNN264&index=30&list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P)--- 影片 4. [求二元樹的高度](https://www.youtube.com/watch?v=_pnqMz5nrRs&list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P&index=31)--- 影片 5. [檢查二元樹是否為二元搜尋樹](https://www.youtube.com/watch?v=yEwSGhSsT0U&index=35&list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P)--- 影片 6. [什麼是尾遞歸？為什麼這麼糟？](https://www.quora.com/What-is-tail-recursion-Why-is-it-so-bad) --- 影片 ### **學後問題** 現在您已經學習了一些，並觀看了一些影片，讓我們嘗試更多問題！ 1. [越大越好](https://www.hackerrank.com/challenges/bigger-is-greater/problem) 2. [6.之字折線轉換](https://leetcode.com/problems/zigzag-conversion/) 3. [7. 反轉整數](https://leetcode.com/problems/reverse-integer/) 4. [40. 組合和 II](https://leetcode.com/problems/combination-sum-ii/) 5. [43. 字串相乘](https://leetcode.com/problems/multiply-strings/) 6. [拉里的陣列](https://www.hackerrank.com/challenges/larrys-array/problem) 7. [短回文](https://www.hackerrank.com/challenges/short-palindrome/problem) 8. [65. 有效號碼](https://leetcode.com/problems/valid-number/) 9. [越大越好](https://www.hackerrank.com/challenges/bigger-is-greater/problem) 10. [完整計數排序](https://www.hackerrank.com/challenges/countingsort4/problem) 11. [莉莉的家庭作業](https://www.hackerrank.com/challenges/lilys-homework/problem) 12. [普通孩子](https://www.hackerrank.com/challenges/common-child/problem) 13. [459. 重複子字串模式](https://leetcode.com/problems/repeated-substring-pattern/) 14. [27. 刪除元素](https://leetcode.com/problems/remove-element/) 15. [450. 刪除 BST 中的節點](https://leetcode.com/problems/delete-node-in-a-bst/) 16. [659. 將陣列分割成連續的子序列](https://leetcode.com/problems/split-array-into-consecutive-subsequences/) 17. [最大值有界的子陣列數](https://leetcode.com/problems/number-of-subarrays-with-bounded-maximum) 18. [組合和 IV](https://leetcode.com/problems/combination-sum-iv) 19. [買賣股票的最佳時機（有冷卻時間）](https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown) 20. [最長重複字元替換](https://leetcode.com/problems/longest-repeating-character-replacement) 21. [成對交換節點](https://leetcode.com/problems/swap-nodes-in-pairs) 22. [二元樹右側視圖](https://leetcode.com/problems/binary-tree-right-side-view) 23. [展平嵌套列表迭代器](https://leetcode.com/problems/flatten-nested-list-iterator) 24. [二元樹層次順序遍歷](https://leetcode.com/problems/binary-tree-level-order-traversal) 25. [二元搜尋樹迭代器](https://leetcode.com/problems/binary-search-tree-iterator) 26. [對鏈最大長度](https://leetcode.com/problems/maximum-length-of-pair-chain) 27. [將鍊錶拆分為多個部分](https://leetcode.com/problems/split-linked-list-in-parts) ### **操作性程式設計問題** 有些公司不會問你演算法問題。相反，他們可能會更專注於實施和營運問題。這些通常更小眾，涉及實際問題，例如循環資料和執行某種任務。這些類型的問題通常不需要太多練習，因為更多的是了解陣列和 HashMap 等基本概念並追蹤您對它們所做的事情。 1. [袋鼠問題](https://www.hackerrank.com/challenges/kangaroo/problem) 2. [打破記錄](https://www.hackerrank.com/challenges/breaking-best-and-worst-records/problem) 3. [查找字串](https://www.hackerrank.com/challenges/find-a-string/problem)[迭代器](https://www.hackerrank.com/challenges/itertools-permutations/problem) 4. [不知道！](https://www.hackerrank.com/challenges/no-idea/problem) 5. [程式設計師的日子](https://www.hackerrank.com/challenges/day-of-the-programmer/problem) 6. [排行榜](https://www.hackerrank.com/challenges/climbing-the-leaderboard/problem) 7. [詞序](https://www.hackerrank.com/challenges/word-order/problem) 8. [夏洛克和方塊](https://www.hackerrank.com/challenges/sherlock-and-squares/problem) 9. [均衡陣列](https://www.hackerrank.com/challenges/equality-in-a-array/problem) 10. [蘋果和橘子](https://www.hackerrank.com/challenges/apple-and-orange/problem) 11. [更多操作風格問題](https://www.hackerrank.com/domains/python) ### **系統設計影片** 系統設計問題是至關重要的問題，表明您不僅僅是一名編碼員。身為工程師，您需要能夠思考大局。某些服務屬於哪裡，您需要什麼樣的伺服器，您將如何管理流量等等。所有這些想法都表明您能夠設計軟體，而不僅僅是編寫人們告訴您編寫的程式碼。 1. [停車場系統](https://youtu.be/DSGsa0pu8-k)---影片 2. [什麼是應用程式](https://www.youtube.com/watch?v=vvhC64hQZMk)--- 影片 3. [優步設計](https://youtu.be/umWABit-wbk)---影片 4. [Instagram](https://www.youtube.com/watch?v=QmX2NPkJTKg) --- 影片 5. [Tinder 服務](https://www.youtube.com/watch?v=xQnIN9bW0og)--- 影片 ### **作業系統** 作業系統問題比較少見，但是對執行緒、調度、記憶體等概念有紮實的理解是有好處的，即使只是基本的理解。當被問到進程和線程有什麼區別而不知道答案時，這是非常尷尬的。 1. [常見作業系統面試問題](https://www.geeksforgeeks.org/commonly-asked-operating-systems-interview-questions-set-1/) 2. [什麼是翻譯後備緩衝區？](https://www.geeksforgeeks.org/operating-system-translation-lookaside-buffer-tlb/) 3. [為什麼循環法可以避免優先反轉問題？](https://leetcode.com/discuss/interview-question/operating-system/220604/Why-does-Round-Robin-avoid-the-Priority-Inversion-Problem) 4. [中斷與系統呼叫---檔案系統中的「inode」是什麼？](https://leetcode.com/discuss/interview-question/operating-system/124838/Interrupt-Vs-System-Call) 5. [作業系統面試題目及答案 --- 第一部分](https://www.youtube.com/watch?v=b18X4uOKjHs) 6. [什麼是內核 --- Gary 解釋](https://www.youtube.com/watch?v=mycVSMyShk8) 7. [循環演算法教程（CPU調度）](https://www.youtube.com/watch?v=aWlQYllBZDs) 8. [LRU 快取的魔力（Google 開發 100 天）](https://www.youtube.com/watch?v=R5ON3iwx78M) --- 影片 9. [MIT 6.004 L15：記憶體層次結構](https://www.youtube.com/watch?v=vjYF_fAZI5E&list=PLrRW1w6CGAcXbMtDFj205vALOGmiRc82-&index=24)--- 影片 10. [中斷](https://www.youtube.com/watch?v=uFKi2-J-6II&list=PLCiOXwirraUCBE9i_ukL8_Kfg6XNv7Se8&index=3)---影片 11. [調度](https://www.youtube.com/watch?v=-Gu5mYdKbu4&index=4&list=PLCiOXwirraUCBE9i_ukL8_Kfg6XNv7Se8)---影片 ### **執行緒數**  1. [用戶級線程與內核級線程](https://leetcode.com/discuss/interview-question/operating-system/124631/User-Level-thread-Vs-Kernel-Level-thread) 2. [行程和線程簡介](https://www.youtube.com/watch?v=exbKr6fnoUw)--- 影片 3. [進程和線程之間的區別 --- 佐治亞理工學院 --- 高級操作系統](https://www.youtube.com/watch?v=O3EyzlZxx3g&t=11s)--- 影片 4. [分叉和多線程之間的區別](https://leetcode.com/discuss/interview-question/operating-system/125024/Difference-between-forking-and-multithreading) ### **物件導向**  與作業系統類似，並不是每次面試都會問你有關物件導向程式設計的問題，但你永遠不知道。您需要確保記住計算機 162 課程中的基礎知識。 1. [Java 程式設計教學 --- 49 --- 繼承](https://www.youtube.com/watch?v=9JpNY-XAseg)--- 影片 2. [Java 程式設計教學 --- 55 --- 多態性簡介](https://www.youtube.com/watch?v=0xw06loTm1k)--- 影片 3. [Java 程式設計教學 --- 58 --- 抽象類別與具體類別](https://www.youtube.com/watch?v=TyPNvt6Zg8c)--- 影片 4. [Java 程式設計教學 --- 57 --- 重寫規則](https://www.youtube.com/watch?v=zN9pKULyoj4&t=3s)--- 影片 5. [Java 程式設計教學 --- 59 --- 保存物件的類](https://www.youtube.com/watch?v=slY5Ag7IjM0) 6. [物件導向程式設計](https://www.youtube.com/watch?v=lbXsrHGhBAU)---影片 ### **設計模式** 如果您像我們一樣，我們不會被教導所有各種設計模式。因此，最好了解它們的工作原理以及使用它們的原因。一些面試問題可以很簡單，例如“為什麼要使用工廠類？” 1. [工廠設計模式](https://www.youtube.com/watch?v=ub0DXaeV6hA)---影片 2. [觀察者設計模式](https://youtu.be/wiQdrH2YpT4)---影片 3. [適配器設計模式](https://www.youtube.com/watch?v=qG286LQM6BU&list=PLF206E906175C7E07&index=13)---影片 4. [立面設計模式](https://www.youtube.com/watch?v=B1Y8fcYrz5o&list=PLF206E906175C7E07&index=14)---影片 5. [責任鏈設計模式](https://www.youtube.com/watch?v=jDX6x8qmjbA&list=PLF206E906175C7E07&index=22)---影片 6. [解譯器設計模式](https://www.youtube.com/watch?v=6CVymSJQuJE&list=PLF206E906175C7E07&index=23)---影片 7. [單例設計模式教學](https://www.youtube.com/watch?v=NZaXM67fxbs&list=PLF206E906175C7E07&index=7)--- 影片 8. [第 6 章（第 1 部分）--- 模式（影片）](https://youtu.be/LAP2A80Ajrg?list=PLJ9pm_Rc9HesnkwKlal_buSIHA-jTZMpO&t=3344) --- 影片 9. [Head First 設計模式](https://www.amazon.com/Head-First-Design-Patterns-Freeman/dp/0596007124)--- 影片 ### SQL 這是最後一節。你們中的許多人可能不會被問到那麼多 SQL 問題。不過，我始終認為放在後口袋是件好事。 #### SQL --- 問題 1. [262. 行程和用戶](https://leetcode.com/problems/trips-and-users/) 2. [601. 體育場人流量](https://leetcode.com/problems/human-traffic-of-stadium/) 3. [185. 部門前三薪資](https://leetcode.com/problems/department-top-three-salaries/) 4. [626.交換席位](https://leetcode.com/problems/exchange-seats/) 5. [駭客排名報告](https://www.hackerrank.com/challenges/the-report/problem) 6. [177.第N最高薪水](https://leetcode.com/problems/nth-highest-salary/) 7. [對稱對](https://www.hackerrank.com/challenges/symmetric-pairs/problem) 8. [職業](https://www.hackerrank.com/challenges/placements/problem)[安置](https://www.hackerrank.com/challenges/occupations/problem) 9. [奧利凡德的庫存](https://www.hackerrank.com/challenges/harry-potter-and-wands/problem) #### SQL --- 影片 1. [IQ15：6 個 SQL 查詢面試問題](https://www.youtube.com/watch?v=uAWWhEA57bE)--- 影片 2. [了解 ROW\_NUMBER 和分析函數](https://www.youtube.com/watch?v=QFj-hZi8MKk)--- 影片 3. [分析函數的高級實現](https://www.youtube.com/watch?v=G3kYPzLWtpo&t=4s)--- 影片 4. [分析函數的高級實現第 2 部分](https://www.youtube.com/watch?v=XecU6Ieyu-4&t=54s)--- 影片 5. [聰明的貓頭鷹 SQL 影片](https://www.youtube.com/watch?v=2-1XQHAgDsM&list=PL6EDEB03D20332309)--- 影片 #### SQL 後問題 1. [二元樹節點](https://www.hackerrank.com/challenges/binary-search-tree-1/problem) 2. [氣象觀測站 18](https://www.hackerrank.com/challenges/weather-observation-station-18/problem) 3. [挑戰](https://www.hackerrank.com/challenges/challenges/problem)[列印素數](https://www.hackerrank.com/challenges/print-prime-numbers/problem) 4. [595.大國](https://leetcode.com/problems/big-countries/) 5. [626.交換席位](https://leetcode.com/problems/exchange-seats/) 6. [SQL 面試問題：3 個技術篩選練習（針對資料分析師）](https://data36.com/sql-interview-questions-tech-screening-data-analysts/) 面試可能會很困難，因為你會覺得自己沒有任何進展。擁有本學習指南將幫助您追蹤您的進度並讓您更好地了解自己的表現！ 祝你好運！ 另外，如果您想閱讀/觀看更多精彩的貼文或影片： [在 SaturnCloud 上使用 Jupyter Notebook 連接到大查詢第 2 部分](https://www.youtube.com/watch?v=O1cBN5gJtdw&t=15s) [身為資料科學家你應該閱讀的三本書](https://www.coriers.com/three-books-you-must-read-if-you-want-a-career-as-a-data-scientist/) [Hadoop 與關聯式資料庫](http://www.acheronanalytics.com/acheron-blog/hadoop-vs-relational-databases) [算法如何變得不道德和有偏見](http://www.acheronanalytics.com/acheron-blog/how-do-machines-learn-bias-data-science) [如何改善資料驅動策略](http://www.acheronanalytics.com/acheron-blog/how-to-improve-your-data-driven-strategy) [如何開發穩健演算法](https://medium.com/better-programming/how-to-develop-a-robust-algorithm-c38e08f32201) [資料科學家必須具備的 4 項技能](https://www.theseattledataguy.com/4-skills-data-scientist-must-have/) [SQL 最佳實踐 - 設計 ETL 影片](http://www.acheronanalytics.com/acheron-blog/sql-best-practices-designing-an-etl-video) --- 原文出處：https://dev.to/seattledataguy/the-interview-study-guide-for-software-engineers-764
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
