最近因為換新筆電 要裝開發環境 想把主機上的多個資料庫 複製到本機 寫了一個可以重複使用的腳本 會直接讀取 `.env` 檔案 把主機的 mysql db 複製到本機 laradock 內的 mysql `clone_production_database.sh` ``` #!/bin/bash set -e SERVER_LARAVEL_APP_PATH='/home/codelove.tw' echo Start exporting database on the server... MAIN_TASK="cd ${SERVER_LARAVEL_APP_PATH}" MAIN_TASK+=' && export $(grep -v "^#" .env | xargs)' MAIN_TASK+=' && mysqldump --no-tablespaces -h ${DB_HOST} -u${DB_USERNAME} -p${DB_PASSWORD} ${DB_DATABASE} > ${DB_DATABASE}.sql' ssh tony-main-server ${MAIN_TASK} echo Start downloading database to the local... export $(grep -v "^#" .env | xargs) scp -r tony-main-server:${SERVER_LARAVEL_APP_PATH}/${DB_DATABASE}.sql . echo Start importing database within the docker... docker-compose -f ~/laradock-projects/laradock/docker-compose.yml exec -T mysql mysql -u${DB_USERNAME} -p${DB_PASSWORD} ${DB_DATABASE} < ${DB_DATABASE}.sql echo Done. ``` 因為我大多數專案的結構接近，這段腳本，只要修改 `SERVER_LARAVEL_APP_PATH` 變數，就可換專案使用
我仍然記得我第一天與數百名其他員工一起參加公司會議。經過幾個月成功的自由工作後，我終於能夠加入一家大公司，焦慮和興奮的混合是真實的。現在的挑戰不同了，風險更高了，環境也勢不可擋。 但這並不是唯一讓我感到壓力的情況。我還清楚記得有一天，在一家小型新創公司工作時，我向整個公司展示了我們將要使用的新前端架構的一部分。我們規模很小，會議上的每個人都在專心聽我說的話。 從在新創公司中發揮重要作用，到成為公司中更大群體中的一小部分，每一次經驗都有自己的一套學習經驗。 當然，情況並非總是如此。我們都知道存在沒有做好準備的公司，這就是建立本文的原因。在這裡，我們將探討**我在新創公司和大公司工作時獲得的一些**關鍵經驗和收穫，這樣你就可以從你目前工作的公司中學習到這些知識，甚至可以自己決定你下一步的職業步驟，看看哪一個更適合您。 流程和文化 -----  讓我們從流程開始，因為它們是第一個非常明顯的差異。在新創公司工作時，大多數流程仍在實施中，您工作的很大一部分實際上可能涉及**嘗試和試驗**這些任務的不同流程。 文化也可能處於創造階段，因此，定義公司及其員工的共同價值觀，或「在這裡做事的方式」。可以改變很多而且很快！ 當然，這使得體驗方式更加混亂，但也更加靈活。兼顧多重角色和責任並不罕見，這可能是在不同方面學習和成長的絕佳機會，例如創造新的良好文化模式。 另一方面，在更企業化的環境中，流程更加結構化和明確，這可以提供穩定性和明確的期望，但也會帶來官僚主義的缺點，需要很長時間才能真正通過多個管道和渠道。 這裡的關鍵要點是**平衡**。流程的稀缺會讓整個生態系統變得混亂，這讓人不舒服，但流程太多，你就什麼都做不了。平衡缺勤和超額的權重將為每個人創造一個更好的環境。 敏捷性和適應性 -------  在新創公司工作通常需要身兼數職，並隨時適應變化。在快節奏的新創環境中，敏捷性和適應性是關鍵。你必須準備好轉變，這可以讓你成長很多，不要太執著於自己的想法。您還必須準備好調整您的策略並接受新技術和方法（如果它們看起來合適）。 這可能是一次令人興奮的經歷，可以促進創造力和創新，但從長遠來看，也可能導致分散且充滿壓力的環境（公司的各個方面都採用不同的技術，讓所有混亂的工作變得**困難**）。 相較之下，大公司擁有豐富的時間和資源，可以進行更徹底的規劃和執行。此外，大公司傾向於依賴他們已經信任的東西，並且通常不太願意接受新事物。 雖然這不如動態的創業環境那麼令人興奮，但它提供了不同類型的學習體驗。在這裡，您可以加深對策略規劃、專案管理和業務營運其他方面的理解。 這裡的關鍵要點是學會**在需要時**變得敏捷、多才多藝和適應能力強。如果您不想相信我的話，我建議您閱讀[這篇關於無聊技術的文章](https://mcfunley.com/choose-boring-technology)。這是令人驚訝的洞察力和偉大的閱讀！ --- 哦！在我忘記之前，這篇文章之所以成為可能，是因為[Wasp](https://wasp-lang.dev/) ，他們正在建立一個非常酷的全端 React + NodeJS 框架，如果您能透過[在 GitHub 上為我們的儲存庫加註星標](https://www.github.com/wasp-lang/wasp)來幫助我們，那將意義重大。 透過這樣做，您將幫助我們繼續使網頁開發更快、更輕鬆，並每週為您帶來這樣的內容！ 🚀  https://www.github.com/wasp-lang/wasp ⭐️ 在 GitHub 上給我們一個 star 🙏 --- 社交機會 ----  新創公司和大公司之間的另一個主要區別是它們提供的網路機會。大公司通常擁有廣泛的員工、客戶、供應商和合作夥伴網路。在這樣的環境中工作可以提供大量建立人際網絡和建立有價值的專業關係的機會。這些聯繫對於您的職業發展非常有益。 另一方面，新創公司由於規模較小，提供了更親密的社交機會。您可能會與團隊的每個成員密切合作，讓您有機會建立更牢固的關係並直接向同事和上級學習。 這裡的關鍵要點是擁抱每一個聯繫，並**嘗試在任何地方創造一個良好的工作環境**。這將使您更輕鬆地度過困難時期，並且您一定會在一生中結交一些友誼😃 影響 --  現在，我們來談談影響。在較大的公司中，您的程式碼庫可能會被數千（更可能是數百萬人）人存取。這意味著做一個小的改變可以改變很多人對應用程式的看法，並且看到你的工作被這麼多人使用是非常令人滿意的。不幸的是，第一次必須為數百萬用戶存取的程式碼庫部署一個小的程式碼變更絕對是令人傷腦筋的——儘管這對於增加您的經驗和彈性是必要的。 在新創公司中，您可能會看到有數百人（相信有數千人）造訪的程式碼庫。這意味著，你的工作將被更少的人看到，但是，由於你可以創造更多，你可能會創造出更多的東西，而不僅僅是一個小小的改變。頁面、使用者旅程和所有內容都可以在您的範圍內單獨或與您的團隊一起進行。但它並非沒有缺點。由於流程更加稀缺，因此回滾和恢復變更有時可能是一個困難的過程（甚至更糟的是，沒有記錄）。 這裡的關鍵要點是了解您的角色以及您在不同環境中帶來的價值的重要性。無論您是在一家新創公司，您的工作直接推動公司的成功，還是在一家大公司，您的行為有助於更廣泛的目標，**您的工作都很重要，您應該為此感到自豪。** 舉個例子，我為在一個巨大的電子商務網站上製作一個簡單的產品過濾器（他們一直使用到今天）感到非常自豪，並且我也為積極實施/參與至少 2 個專案的實施感到自豪/3是我曾經合作過的新創公司的設計師所提出的新設計系統的每個元件的/3。**好的工作不會讓別人貶低。** 結論 --  如果這段穿越新創公司和企業領域的旅程為您帶來了啟發，為什麼不支持[Wasp](https://wasp-lang.dev/)呢？我們正在精心打造工具和內容，為像您這樣的開發人員提供協助，無論您是獨自編碼還是克服企業挑戰。 如果您想看到更多這樣的內容，您可以[在 GitHub 上給我們一個星星，非常輕鬆地幫助我們！](https://www.github.com/wasp-lang/wasp)  https://www.github.com/wasp-lang/wasp ⭐️ GitHub 上的 Star Wasp 🙏 新創企業和大公司都提供寶貴的經驗。在新創公司，你可以做不同的任務，嘗試新事物，並直接影響公司的未來。這是一種親身實踐的學習經驗。 在大公司中，您可以存取許多資源和結構化環境。您可以與多元化專家團隊合作，這有助於您學習和成長。既定的流程、穩定性和可預測性可以幫助提高您的技能並塑造您的職業生涯。 但是，這並不是要選擇其中之一。這是關於學習在兩種環境中都表現出色。汲取兩者中最好的部分，並隨時隨地使用它們。保持敏捷、適應力強、樂於接受新體驗。這兩種經歷對你的職業生涯都很重要。 總之，每種環境都有其獨特的挑戰與機會。擁抱差異，從經驗中學習，並利用它們為你帶來優勢。畢竟，正是這些多樣化的經驗可以幫助您實現個人和職業成長。因此，無論您是在新創公司還是大公司，請始終記住 - 您的工作很重要，並有助於實現更大的目標。 您對新創公司和大公司之間的比較有何看法？我們很想聽聽您的經驗和收穫。請在下面的評論中分享您的想法！ --- 原文出處：https://dev.to/wasp/start-ups-vs-big-companies-the-best-takeaways-for-you-to-know-28n5
我在 20 年內創辦了 30 家新創公司。 創投支援、引導、應用程式、SaaS、B2B、B2C。 我後悔犯過的所有錯誤： 1. 做消費者應用程式。 ============ 這裡的失敗率是 B2B 失敗率的 100 倍，幾乎是中樂透。 2. 籌集創投資金。 ========== 當我們籌集第一輪資金時，我感覺就像馬克祖克柏一樣。所有採訪我們的記者。感覺就像一場夢。 最終，大多數這些新創公司都因過早獲得資金而失敗。 3. 招聘太早。 ======== 此前，新創公司對大型團隊感到自豪——這是當時成長的關鍵指標。 創辦人應該完成 PMF 之前的大部分工作。 員工和承包商不會對您的專案有足夠的熱愛和熱情。 4.忽略搜尋引擎優化。 =========== 我的網路中沒有人做過搜尋引擎優化。我們都認為這已經太晚了，所以我們一直推遲它。 5.忽視內容行銷。 ========= 從來沒有認真對待過部落格。大錯。 6.社群媒體行銷。 ========= 這是我最大的遺憾。我一年前開始使用推特。現在已經有2萬粉絲了。如果我從20年前開始會怎樣？現在我可以有 100 萬粉絲嗎？我想是這樣。 7. 跳過創意驗證。 ========== 我總是為觀眾假設。預測他們需要什麼。這幾乎從未被證明是真的。 我最好的專案是那些我認為會失敗的專案，而失敗的專案一開始就是我最大的希望。 8. 招募經理。 ======== 我還沒有在新創公司中見過任何有用的經理。 他們可能對公司有用，但對新創公司來說，我應該只僱用實干家。 9. 追逐投資者。 ========= 對於每家新創公司，我會花 40% 的時間進行融資。 在大多數情況下我都會成功，但代價是什麼？ 我已經兩年沒有與投資者進行過一次接觸了，但是風投們來敲我的門，因為我有很好的吸引力，他們每天都在尋找這樣的專案。 10.聘請專業開發人員。 ============ 對於新創公司來說，沒有什麼比專業開發團隊更有效率的了。 如今，我的 1 位全端開發人員在專案上取得的進展比當時 12 人團隊多了 5 倍。 不惜一切代價避免「團隊」。 11. 僱用我不想擁抱的人。 ============== 我的共同創辦人、一位丹麥老人在 2015 年對我說過這句話。 12. 押注於合作夥伴。 ============ 我曾多次與價值數十億美元的大型公司和不同的新創公司合作。 他們承諾提供巨大的東西，數以百萬計的用戶，但最終只是浪費你的時間，破壞焦點，轉移優先級，讓你花費無數的錢來提高安全性和合規性，最終沒有帶來任何使用者/金錢。 13. 閃亮的物體。 ========== 我被 crypt0 的炒作所迷惑。變得超級富有，然後失去了一切。 浪費了很多年。看到人類是多麼的欺騙和貪婪，甚至是我自己的伴侶，我幾乎感到沮喪。 14. 堅持一個糟糕的專案太久。 ================ 在多年沒有吸引力後，我仍然相信專案。 我以為有一天，會發生一些神奇的事情，一切都會好轉。這只是浪費時間。 15. 參加技術會議。 =========== 這完全是浪費時間。 那裡的大多數人都是公司的「好」員工，他們被派到那裡作為對公司忠誠的額外福利。 16. Scrum 是一個騙局。 ================ 如果我的團隊每天早上都必須像幼兒園的孩子一樣被問題困擾，那麼事情最終會失敗。我能做的唯一一件好事是和那些成年人、可以自己管理自己的事情的人在一起。我們只需透過聊天就目標和計劃同步完成所有事情。 17. 外包開發和行銷。 ============ 賣家的態度很好，但結果卻不好。 新創公司是如此困難，以至於外部人幾乎沒有機會為他們做好工作。 18. 從 B2B 領域的免費方案開始。 ==================== 免費專案吸引了完全錯誤的人群，他們提供的回饋只是為了取悅其他「免費」人群。然而，「付費」用戶卻截然不同，並且有不同的需求。 有幾次，我一開始沒有免費版本，沒有銷售，所以後來我加入了免費版本。但這也是一個錯誤。如果沒有人願意為我的產品付費，我就必須修復它或為它尋找其他受眾。 19. 從頭開始編寫程式碼。 ============== 我的團隊將在前 3 個月內編寫基本的內容，例如身份驗證、管理面板、cruds 等。 這是對時間的巨大浪費。 當我開始使用樣板時，速度提高了 10 倍。 20. 與家人和朋友相處的時間很少。 ================== 我工作太多了。根本沒有放假。 這對我的創造力非常有破壞性。一旦我開始休息，我就變得更有創造力。 質>數量。 就是這樣。 我每天都在[twitter.com/johnrushx](https://twitter.com/johnrushx)分享我的經驗 [在這裡查看我的所有專案](https://johnrush.me/) --- 原文出處：https://dev.to/johnrushx/i-built-30-startups-in-20-years-3j41
幾天前，微軟發布了新[Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701)的早期版本。 Windows 終端是一種新型、現代化、快速、高效、強大且高效的終端應用程式，適用於命令列工具和 shell（例如命令提示字元、PowerShell 和 WSL）的使用者。 其主要功能包括多個選項卡、Unicode 和 UTF-8 字元支援、GPU 加速文字渲染引擎以及自訂主題、樣式和配置。 顯然，這是一個託管在 GitHub 上的開源專案： <https://github.com/microsoft/terminal> 請隨意參與。 目前它有點不穩定，將來會推出更多功能，但我已經使用它幾天了，我喜歡這個想法。 到目前為止，我一直在使用[Cmder](https://cmder.net/) ，但 Windows Terminal 有一些新的有前景的功能。 如何安裝 ---- 您可以直接從 Windows 應用程式商店安裝 Windows 終端，或者如果您想了解它的工作原理，您可以下載原始程式碼、建置它並啟動終端。  商店版本的連結： <https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701> GitHub 專案的連結： <https://github.com/microsoft/terminal> 原始碼和專案都有很好的文件記錄。 第一次發射 ----- 如果您從“開始”功能表啟動該應用程式，它將如下面的螢幕截圖所示。  預設終端是 PowerShell。 如果按一下「+」符號，應用程式將在新分頁中啟動另一個終端。 如果您按一下向下箭頭符號 ⬇，您可以從清單中選擇新終端。 清單下方還有另一個有趣的按鈕，就是設定按鈕。 設定 -- 如果按一下向下箭頭，然後按一下「設定」按鈕，此時，設定檔案（它是 JSON 檔案）將在 Visual Studio 的新實例中開啟。 如果您想要直接開啟文件，可以開啟 Visual Studio Code 並直接從下列目錄開啟檔案： **%USERPROFILE%\\AppData\\Local\\Packages\\Microsoft.WindowsTerminal\_8wekyb3d8bbwe\\LocalState** 在此文件中，您可以找到 Windows 終端機的所有設定。 目前，您只能透過該文件與設定進行交互，但將來，將向應用程式加入 UI。 新增的個人資料 ------- 如果要新增新的設定文件，請前往 JSON 設定檔的「設定檔」部分，然後新增新的設定檔部分，如下所示： ``` { ``` ``` "acrylicOpacity" : 0.85, ``` ``` "background" : "#012456", ``` ``` "backgroundImage" : "C:/users/barto/AppData/Local/Packages/Microsoft.WindowsTerminal_8wekyb3d8bbwe/RoamingState/unicorn.gif", ``` ``` "backgroundImageOpacity" : 0.7, ``` ``` "backgroundImageStretchMode" : "uniformToFill", ``` ``` "closeOnExit" : false, ``` ``` "colorScheme" : "Solarized Dark", ``` ``` "commandline" : "powershell.exe", ``` ``` "cursorColor" : "#00FF00", ``` ``` "cursorHeight" : 25, ``` ``` "cursorShape" : "vintage", ``` ``` "fontFace" : "Fira Code", ``` ``` "fontSize" : 12, ``` ``` "guid" : "{79285a8e-036c-446f-8a9c-78994e34bf78}", ``` ``` "historySize" : 9001, ``` ``` "icon" : "ms-appdata:///roaming/pwsh-32.png", ``` ``` "name" : "PowerShell with Unicorn", ``` ``` "padding" : "0, 0, 0, 0", ``` ``` "snapOnInput" : true, ``` ``` "startingDirectory" : "%USERPROFILE%", ``` ``` "useAcrylic" : false ``` ``` } ``` 如果您想從此處複製此部分，請注意指南。 請記住每次貼上文件時都要更改它。 例如，它用於設定預設終端，並且它在檔案中必須是唯一的。 正如您在我的個人資料部分中看到的，您可以加入圖像作為背景、更改字體大小、遊標形狀等等。 例如，我使用 Fira Code 作為字體，因為我也喜歡 Visual Studio Code 中的它。 它在文本中加入了一些很棒的體驗。 您可以從這裡下載： <https://github.com/tonsky/FiraCode> 如果您想在會議上給您的朋友或與會者留下深刻印象，您可以加入 gif 作為背景。 您可以在下圖中看到它的實際效果。  配色方案 ---- 在profiles.json 檔案的末尾，您可以找到一個名為「schemes」的部分。 從這裡您可以新增或更改終端的預設顏色。 如果您想在新設定檔中使用它，則必須在屬性「name」和設定檔部分的「colorScheme」屬性中插入相同的方案名稱。 分享您的個人資料 -------- 我在我的個人資料上建立了一個新要點來共享我的個人資料設置，您可以在這裡找到它： <https://gist.github.com/kasuken/076d68b92e2a67dfda591587c77a40c0#file-profiles-json> 。 在評論中分享您的個人資料！ 我們一起可以創造一些很棒的東西！  ### 我的動圖 有些使用者要求提供 gif 動圖。 我在下面分享它們！    --- 原文出處：https://dev.to/kasuken/how-to-customize-the-new-windows-terminal-with-visual-studio-code-56b1
*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 開發者們大家好，如果您一直從事程式設計和軟體開發，那麼您就會知道，在我們的領域中只有一個常數，那就是「變化」。 我們總是需要學習新的工具、技術、框架和技能來完成我們的工作，而且永無止境。如果你不學習，你就會和其他人一起落後，這就是為什麼我總是尋找新技能來學習。 在本文中，我將分享程式設計師和開發人員在 2024 年可以學習的 5 項技能，以更好地完成工作並提高效率。 過去，我討論過[API 網關與負載平衡器、](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的區別，你們非常喜歡，在本文中我將分享最重要的五種開發人員技能2024 年成為舞台中心。 ***PS 繼續閱讀直到最後。我有一份獎金給你。*** 這些技能包括新舊但必不可少的技能，例如快速工程、編碼、雲端運算領域、系統設計和Python，這些技能是任何軟體開發人員都需要的基本技能。 無論您是想要提升自己的經驗豐富的開發人員，還是想要提升自己形象的中級開發人員，這些技能都一定會對您有所幫助。 2024 年軟體工程師應該學習的 5 項技能 ---------------------- 在不斷發展的技術領域，對於尋求在 2024 年及以後蓬勃發展的開發人員來說，保持領先地位至關重要。 當我們探索軟體開發的動態領域時，某些技能已經成為現代開發人員不可或缺的技能，這就是您將在本文中學到的內容。 讓我們深入探討預計在 2024 年產生重大影響的前五項開發人員技能。 ### 1. 系統設計 到 2024 年，開發人員需要超越傳統的程式設計實踐，擁抱現代系統設計原則。這涉及了解分散式系統、微服務架構以及設計可擴展和彈性的應用程式。 能夠應對系統設計複雜性的開發人員能夠更好地建立強大的解決方案，以滿足快速發展的技術環境的需求。 如果您想深入學習系統設計，那麼您也可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 [](https://bit.ly/3pMiO8g) 如果您需要更多資源，那麼這裡有[系統設計書籍](https://www.linkedin.com/pulse/8-best-system-design-books-programmers-developers-soma-sharma/)、 [課程](https://www.linkedin.com/pulse/10-best-system-design-courses-beginners-experienced-2023-soma-sharma/)和[網站](https://javarevisited.blogspot.com/2022/08/top-7-websites-to-learn-system-design.html)的列表，供您在 2024 年學習和掌握軟體設計和架構。 --- 2. 快速工程 ------- 在這個人工智慧工具的時代，軟體開發並非一成不變，越來越多的人工智慧工具來幫助您進行編碼、除錯和測試，但您需要及時的工程設計才能有效地利用這些工具。 換句話說，快速工程已成為旨在快速交付高品質產品的開發人員的關鍵技能。 這不僅涉及編寫高效、簡潔的程式碼，還涉及採用敏捷方法和工具來簡化整個開發過程。 精通即時工程的開發人員可以快速回應不斷變化的需求，確保他們的軟體在面對不斷變化的市場需求時保持適應性和彈性。 如果您需要資源來學習 ChatGPT 和提示工程，那麼我建議您查看 Coursera 上的[針對開發人員的 ChatGPT 提示工程](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fchatgpt-prompt-engineering-for-developers)課程。 [](https://medium.com/javarevisited/top-5-chatgpt-online-courses-for-2023-e6fc706cc483) 如果您需要更多選項，那麼您也可以查看這些[ChatGPT 和 Prompt Engineering 課程](https://javinpaul.medium.com/top-10-udemy-courses-to-learn-artificial-intelligence-in-2023-85a10ef473ca)以了解更多資訊。 --- 3. 編碼 ----- 雖然編碼似乎是一項顯而易見的技能，但其重要性怎麼強調也不為過。掌握編碼不僅限於編寫功能性程式；它涉及編寫乾淨、可維護和可擴展的程式碼。 開發人員應該專注於提高程式語言的熟練程度、理解演算法和實施最佳實踐。 堅實的編碼基礎是任何開發工作成功的基石。而且，如果您需要資源，可以查看[《2024 年完整 JavaScript 課程：建立真實專案》](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-javascript-course%2F)作為開始。 [](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-javascript-course%2F) 如果您需要更多選擇，您也可以查看這些[**程式設計和程式設計課程**](https://medium.com/javarevisited/7-best-coding-course-to-learn-programming-with-zero-experience-in-2020-52f7d0d9cb80) --- 4.雲端運算 ------ 雲端運算已經從一個流行詞變成了開發人員的基本技能。隨著對雲端服務的依賴日益增加，開發人員必須精通在雲端環境中部署、管理和最佳化應用程式。 AWS、Azure 和 Google Cloud 等平台是現代開發不可或缺的一部分，精通雲端運算的開發人員可以建立可擴展且經濟高效的解決方案。 而且，如果您需要資源，可以查看這些文章，您可以在其中找到強烈建議的[**資源來學習雲端運算**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) [](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) 而且，如果您需要更多選擇，還可以參考這篇文章，您可以在 Coursera 上找到強烈推薦的[AWS 基礎專業課程](https://medium.com/javarevisited/top-10-courses-to-learn-amazon-web-services-aws-cloud-in-2020-best-and-free-317f10d7c21d)。該程式是AWS自己建立的。 --- ### 5.Python [Python](https://www.python.org/)繼續維護其作為多功能且強大的程式語言的主導地位。從 Web 開發到資料科學、機器學習和人工智慧，Python 始終處於創新的前沿。 2024 年的開發人員應該投資掌握 Python，因為它不僅有助於快速開發，而且還提供了通往塑造產業未來的眾多尖端技術的入口網站。 如果你想在 2024 年學習並掌握 Python，你可以從 Python 課程[100 Days of Code: The Complete Python Pro Bootcamp for 2024 開始](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F)，我現在也用它來學習 Python。 [](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F) 如果您需要更多資源，您也可以查看這些[Python 書籍](https://javarevisited.blogspot.com/2019/07/top-5-books-to-learn-python-in-2019.html)、 [課程](https://betterprogramming.pub/top-5-courses-to-learn-python-in-2018-best-of-lot-26644a99e7ec)和[網站](https://medium.com/javarevisited/10-free-python-tutorials-and-courses-from-google-microsoft-and-coursera-for-beginners-96b9ad20b4e6)來深入學習 Python。 這就是**您在 2024 年可以學習的 5 項最重要的開發人員技能**。總之，2024 年頂尖開發人員技能反映了業界對敏捷性、適應性和卓越技術的需求。 無論您是經驗豐富的開發人員還是剛開始編碼之旅，磨練這些技能無疑將使您成為不斷發展的軟體開發世界中的寶貴資產。 迎接挑戰，保持好奇心，踏上持續學習之旅，在 2024 年及以後的動態格局中蓬勃發展。 ### 獎金 正如所承諾的，這是給您的獎勵，一本免費的書，您可以閱讀它來學習分散式系統設計，您可以下載免費的 PDF 或在 Microsoft 上在線閱讀 --- [https://info. microsoft.com/rs/ 157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf)  請在評論中告訴我您 2024 年將學習哪些技能？我總是渴望學習可以提升我作為軟體開發人員的形象的技能。 謝謝 --- 原文出處：https://dev.to/somadevtoo/5-skills-programmers-and-developers-should-learn-in-2024-3bmp
JavaScript 系列二：第1課 ── 認識 DOM 樹、新增元素: https://jsfiddle.net/applelily/wr4cjvhL/2/ --- JavaScript 系列二：第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件: https://jsfiddle.net/applelily/f6pvm28w/13/ --- JavaScript 系列二：第3課 ── 認識 for 迴圈: https://jsfiddle.net/applelily/4bmdacvp/4/ --- JavaScript 系列二：第4課 ── 讀取與修改 DOM 元素的 class: https://jsfiddle.net/applelily/t8zmcpLe/3/ --- JavaScript 系列二：第5課 ── 認識 onchange 事件: https://jsfiddle.net/applelily/r96tehms/1/ --- JavaScript 系列二：第6課 ── 讀取與修改 DOM 元素的 style: https://jsfiddle.net/applelily/d5hg4k27/1/ --- JavaScript 系列二：第7課 ── 用 Selector API 選取元素: https://jsfiddle.net/applelily/L6hmocas/2/ ---
> 嘿！我是薩加爾。我喜歡編寫教學和文章來幫助開發人員更好地理解 JavaScript 的魔力。如果您對本文有任何疑問，請發表評論，我會回覆您，或在 Twitter [@sagar\_codes](https://twitter.com/sagar_codes)上找到我。 在這篇文章中，我們將討論 ES6 中引入的一個特性，即展開運算子和剩餘運算子。 🔥 🔥 🔥 我已經成為這三個點的忠實粉絲，它們可能會改變您在 JavaScript 中解決問題的風格。我們可以以兩種不同的方式使用三個點作為擴充運算子和剩餘運算子。 休息參數😴 ----- 使用剩餘參數，我們可以將任意數量的參數收集到一個陣列中，並用它們執行我們想要的操作。引入剩餘參數是為了減少由參數引起的樣板程式碼。 🙌 ``` function myFunc(a, b, ...args) { console.log(a); // 22 console.log(b); // 98 console.log(args); // [43, 3, 26] }; myFunc(22, 98, 43, 3, 26); ``` 在 myFunc 的最後一個參數中，前綴為 …，這將導致所有剩餘參數都放置在 javascript 陣列中。 其餘參數收集所有剩餘參數，因此在最後一個參數之前加入其餘參數是沒有意義的。剩餘參數必須是最後一個形參。 ``` function myFunc(arg1, ...rest, arg2) { // arg2 ? } ``` 其餘參數可以解構（僅限陣列），這意味著它們的資料可以解壓縮為不同的變數。 ``` function myFunc(...[x, y, z]) { return x * y* z; } myFunc(1) // NaN myFunc(1, 2, 3) // 6 myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured) ``` 傳播運算符✨ ------ 擴展運算子用於將可迭代物件（如陣列）的元素擴展到可以容納多個元素的位置。 ``` function myFunc(x, y, ...params) { // used rest operator here console.log(x); console.log(y); console.log(params); } var inputs = ["a", "b", "c", "d", "e", "f"]; myFunc(...inputs); // used spread operator here // "a" // "b" // ["c", "d", "e", "f"] ``` 組合陣列的方法一直有很多種，但展開運算子提供了一種組合陣列的新方法： ``` const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian']; const specialty = ['Meatzza', 'Spicy Mama', 'Margherita']; const pizzas = [...featured, 'veg pizza', ...specialty]; console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita' ``` 透過擴充運算符，現在可以使用比 Object.assign() 更短的語法來淺複製（不包括原型）或合併物件。 ``` var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } var mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 } ``` 👉 結論 ---- 當我們在程式碼中看到三個點（…）時，它要么是剩餘參數，要么是擴展運算子。 有一個簡單的方法可以區分它們： 1. 當三個點 (…) 位於函數參數末尾時，它是“剩餘參數”，並將參數列表的其餘部分收集到一個陣列中。 2. 當三個點 (…) 出現在函數呼叫或類似情況中時，它被稱為“擴展運算符”，並將陣列擴展為列表。 謝謝閱讀。希望您喜歡這篇文章，歡迎按讚、留言或與您的朋友分享這篇文章。 😄 快樂編碼… --- 原文出處：https://dev.to/sagar/three-dots---in-javascript-26ci
我真的很喜歡 @abbeyperini 的[帖子](https://dev.to/abbeyperini/12-tips-from-a-mid-level-developer-29bk)，並決定在擔任軟體開發人員**5 年多**後分享我的技巧。 準備好？讓我們深入探討。 1.掌握基礎知識 ======== 建在搖搖欲墜的土地上的房子🏠，稍有問題就會倒塌。 同樣，如果你沒有紮實的基礎： - 你會很難適應 JavaScript 框架 - 你會陷入第一個不熟悉的問題 - 您無法掌握某些問題之間的共同主題 因此，如果你想提升前端開發人員的水平，首先要掌握**HTML** 、 **CSS**和**JavaScript** 。 --- 2. 了解網路的工作原理 ============ 在過去的幾年裡，前端開發變得更加複雜。 使用了許多工具（*捆綁器*、*轉譯器*等） 如果您不了解網路的工作原理（即「唯一」支援的語言是**HTML** （用於結構）、 **CSS** （用於樣式）和**JavaScript** （用於互動）），您將很難理解為什麼需要有這麼多工具可以在線執行您的程式碼。  --- 3.熟悉資料結構與演算法 ============ 由於程式設計面試，資料結構和演算法經常受到不好的評價🤦♀️。 **然而**，了解關鍵因素及其複雜性至關重要。如果沒有這些知識，您將無法編寫複雜的程式或評估程式碼效率。 以下是需要了解的資料結構/演算法的非詳盡列表： **資料結構：***棧*、*佇列*、*雜湊圖*、*集合*、*圖*等。 **演算法：***動態規劃*、*貪心演算法*、*遞迴*等。 --- 4. 透過實踐而不是閱讀/觀看來學習 ================== 教學會欺騙您，讓您感覺自己正在取得進步。 它們讓你相信你正在學習和進步，但你並沒有前進。真正的學習是透過實踐或教學發生的。 所以，多多練習，避免陷入教學地獄🔥。 --- 5.遇到困難時尋求協助 =========== 你不是一個人。 您附近很可能有高級開發人員，您可以向他們尋求協助。 所以，不要浪費時間去兔子洞裡。您的目標是提供價值，如果您浪費時間解決其他人已經解決的問題，您就無法實現這一目標。  --- 6.以正確的方式尋求協助 ============ 在尋求幫助之前，請確保您已經做了最低限度的事情。 你應該首先： - 在 Google/Stack Overflow/ChatGPT 上搜尋解決方案 - 了解你的目標以及什麼不起作用 - 記錄所有失敗的嘗試 另外，不要針對同一問題重複尋求協助。當您獲得幫助時，請在某處記下，以免忘記。 --- 7. 不要複製/貼上你不理解的程式碼 ================== 由於多種原因，這非常糟糕： - 您最終可能會得到不安全的程式碼，這些程式碼會暴露令牌等敏感資訊。 - 您將無法輕鬆除錯程式碼。 - 你將無法向你的同事解釋它。 這對 ChatGPT 尤其重要，因為它有時只能提供 80% 的準確答案。  --- 8. 不要盲目採納網路上找到的每一個建議 ==================== 我剛開始的時候就犯了這個錯誤。 我發現有人建議說 React 中的記憶化是邪惡的，所以我停止使用它。 令我尷尬的是，我的程式碼在預生產中崩潰了。 所以，別讓我「老」了。 當您在網路上看到建議時，請先問自己以下問題： - 這個建議適用於我嗎？ - 提供建議的人是否與我的情況類似？ **TLDR** ：運用常識🫠。 --- 9. 懷抱良好的意願：人們希望你成功❤️ ==================== 當你是新人時，人們通常會認為人們正在等待發現你的錯誤並解僱你。 至少，這是我的思想對我低聲說的。 但事實恰恰相反。 當一家公司僱用你時，它非常希望你成功。否則，這就是浪費他們在培訓和入職方面投入的時間和資源。 因此，相信你的公司希望你做得很好，並毫不猶豫地向你的同事尋求支持。 --- 10.完成勝於完美 ========= 追求完美往往會導致以下結果： - 拖延 - 浪費時間 - 過於複雜 - ETC。 因此，目標是在推動更多之前交付/驗證 V0。  --- 11. 始終將任務分解為可管理的任務 ================== 感到不知所措的最簡單方法是什麼？ 👉 試圖咬得比你能咀嚼的更多。 始終將專案分解為更小的任務。 這會： - 讓你不會感到不知所措 - 讓您的 PR（拉取請求）更容易審核 - 提供進步感 --- 12. 值得信賴，當你需要幫助時會伸出援手 ===================== 剛開始時，您的首要任務是贏得經理的信任。 當他們想到你時，應該安心。 他們應該相信： - 你在簡單的任務上很可靠 - 必要時您會尋求協助 - 有任何問題你都會溝通 您不想因為成為經理必須持續監控的問題而增加他們的工作量🔎。 --- 13.表現出對工作的熱情 ============ 用熱情可以彌補很多不足🤪。 當你是新人時，要充滿渴望和興奮。 只有經驗豐富的開發人員才能承受缺乏熱情的後果。 沒有人願意不斷地督促某人工作。指導已經夠困難的了；必須激勵某人會使事情變得更具挑戰性。  --- 14. 對學習新事物/工具/方法保持開放態度 ====================== 前端開發不斷發展。 因此，您需要對新技術持開放態度。 不要太拘泥於現有的工具。相反，表現出學習的興趣😋。 --- 15. 掌握你的開發工具🛠️ ============== 想要加快您的開發時間嗎？ 掌握你的開發工具： - 您的 IDE（例如 VSCode） - 您的原始碼控制系統（例如 Github） - 您的瀏覽器和檢查器（例如 Chrome 檢查器） - ETC。  --- 16. 專注於創造價值 =========== 不要在真空中編寫程式碼。 您編寫的每段程式碼都應該為以下方面提供價值： - 您的客戶 - 你的公司 - 您的利害關係人 - ETC。 您的報酬與您提供的價值掛鉤，而不是與您編寫的程式碼掛鉤。 因此，優先考慮編寫有目的的有效程式碼🥅。 --- 17. 為你的工作辯護：它不會自己說話 =================== 可能是新開發人員最常見的錯誤之一（特別是如果您來自重視謙虛的文化）。 1. 你做了一些了不起的事。 2. 沒有人知道這件事。 👉 那工作並不重要。 因此，透過寫作、演示等方式分享您的作品。  --- 18. 喜歡寫愚蠢的程式碼而不是聰明的程式碼 ====================== 程式碼被閱讀的次數遠多於寫的次數📝。 因此，不要編寫只有您才能理解的聰明程式碼。 **可讀性>效能>聰明。** 您希望您的同事能夠有效率地處理您的程式碼，並在必要時為您提供協助等。 --- 19.你的經理是你最好的盟友 ============== 除非你特別不幸，否則你的經理會支持你的成長📈。 他們通常希望你能夠蓬勃發展，為團隊做出貢獻，並留在公司，而不是在其他地方尋找機會。 因此，請務必招募他們來實現您的目標。 分享你的勝利、挫折（以積極的方式）和挫折，而不是獨自奮鬥。 --- 20.讓你的經理的生活更輕鬆 ============== 這個很簡單，但常被忽略。 您的經理可能有您可以協助解決的問題： - 他們可能需要加入文件但缺乏時間 - 他們的工作量可能龐大，需要支持 - 和更多 這可能是贏得經理支持（升遷、加薪等）的最簡單方法。他們已經意識到這些任務並且可以直接看到它們的影響（至少對他們來說）。  --- 21.了解任務背後的大局 ============ 不要成為程式碼猴子🐒。 剛開始時它可能會對您很有幫助。 但要達到下一個級別，您需要了解任務背後的背景： - 為什麼它們有價值 - 為什麼你被分配給他們 - 它們如何適應公司的整體策略 這種理解對於您的職業生涯更上一層樓至關重要。 --- 22. 為團隊做出貢獻（文件、技術講座、演示等） ======================== 這不僅對公司有利，對您也有利。 透過進行演示、共享文件等，您可以展示您的技能並提高團隊的生產力。 始終致力於盡可能提升團隊的表現：這是令人愉快且有益的😊。  --- 23. 成為特定領域的“掌門人” ================ 如果我必須提供一個建議，那就是這個。 在職業生涯的初期，探索各個領域是可以的。 但是，要晉升到中/高級級別，請專注於培養某一領域的專業知識。這對於促銷來說比多個領域的平均水平更具吸引力。 因此，我們的目標是培養[T 型](https://www.forbes.com/sites/lisabodell/2020/08/28/futurethink-forecasts-t-shaped-teams-are-the-future-of-work/)技能：在某一領域擁有廣泛的知識和深厚的專業知識。 --- 24. 培養你的溝通技巧 ============ 不幸的是，這是必須的。 溝通對於開發人員來說至關重要。我們經常需要做以下事情： - RFC（徵求意見） - 示範 - 演講 - ETC。 因此，請確保您具有基本的溝通能力。 --- 25. 當你遇到問題時休息一下 =============== 當你深陷一個問題時，很難停下來。 即使已經過去了 5 年多，我仍然在掙扎🥹。 然而，休息後我總是會產生更新鮮的想法。 所以，如果你已經被困太久了，那就離開吧。  --- 26. 發揮你的優勢，而不是劣勢 ================ 不要再浪費時間試圖修復明顯的弱點。 如果您持續花費超過 1 小時才能完成同您級別的其他人在不到 5 分鐘內完成的任務，請避開該任務。 投入更多的精力很可能不會讓你在這方面表現出色。 相反，做必要的事情並專注於最大限度地發揮你的優勢。如果某件事對你來說很自然且有價值，那就多做一點吧🚀。 --- 27. 掌控自己的職涯道路 ============= 沒有人會為你規劃你的職涯。 如果沒有計劃，你就會為別人的計劃而努力。 因此，請確保您為自己想要在 1/2/5 年內實現的目標制定計劃 💪。 --- 28. 與其他開發人員一起交流 =============== 您目前是否患有冒名頂替症候群？ 如果是這樣，請花時間與其他開發人員交流。 您很快就會意識到您並不孤單。 與其他開發人員聯繫還有其他好處： - 您可以學習新的技巧/技巧 - 你們可以討論共同的經歷 - 你們可以在工作上互相補充 - ETC。  --- 29. 指導年輕開發人員 ============ 這是冒名頂替症候群的最佳治療方法之一。 一旦你開始指導年輕的開發人員： - 你會發現你知道一些事情 - 您將把自己定位為中/高級開發人員 - ETC。 --- 30.讓你解決的問題多樣化 ============= 如果你不斷地解決同樣的問題，你的進步就會趨於穩定。 確保您正在解決不同的問題，以便您可以： - 比較各種方法 - 開發解決問題的工具包 - ETC。  --- 31.尋找導師 ======= 擁有偉大的導師是我職業生涯的亮點。 - 導師了解您的旅程，讓您腳踏實地。 - 他們會指導你避免他們所犯的錯誤。 - ETC。 **如何尋找導師？** 與您互動的更有經驗的開發人員聯繫，提出問題，討論他們的經驗等。 如果您無法聯繫資深開發人員，請與 X 等平台上的個人互動，與他們建立關係，然後聯絡 😉。 --- 32. 致力於 JavaScript 框架並掌握它 ========================= 最好的框架是能夠幫助您最快實現目標的框架。 所以，忽略網路上毫無意義的爭論。 選擇您最熟悉或需要學習的框架。 並掌握它。這就足夠了。 有了紮實的 JavaScript 基礎知識，過渡到另一個框架將會很快。  --- 33.不斷思考使用者體驗 ============ 身為前端開發人員，你應該考慮使用者。 即使您有 PM 或設計師，也要確保使用者體驗良好 😌。 - 需要時使用載入狀態 - 在 UI 中傳達進度 - 給用戶回饋 - ETC。 --- 34. 坦然地說“不” =========== 這對我來說是一件艱難的事。 我對每一個專案都感到興奮，並努力拒絕。 但身為開發人員，您經常會收到超出您處理能力的請求。 因此，請優先考慮與您的目標最相符的那些。 --- 35.不斷投資你的技能 =========== 選擇成為前端開發人員，您就致力於從事必須不斷學習的職業。 因此，透過學習新語言、掌握新技術等不斷投資你的技能。  --- 36. 當面臨太多工作時，減少功能而不是提高程式碼品質。 ============================ 您的應用程式擁有的功能越多越好，對嗎？正確的？ 最初，這似乎是正確的，但附加的功能會導致更多的程式碼。更多的程式碼意味著更多的問題（維護、錯誤等）。 因此，當時間緊迫時，應減少功能而不是犧牲程式碼品質。 --- 37. 努力了解你的合作者（設計師、後端開發人員等） ========================== 始終尊重您的合作者（後端開發人員、設計師、產品經理等）。 應用程式開發是團隊的努力。 團隊成員之間的協同越多，環境就會越快樂、越有效🥰。  --- 感謝您閱讀這篇文章🙏。 發表評論 📩 分享小貼士。 並且不要忘記加上“💖🦄🔥”。 如果您喜歡這樣的文章，請加入我的**免費時事**通訊**[FrontendJoy](https://frontendjoy.substack.com/)** 。 如果您想要每日提示，請在[X/Twitter](https://twitter.com/_ndeyefatoudiop)上找到我。 --- 原文出處：https://dev.to/_ndeyefatoudiop/37-tips-from-a-senior-frontend-developer-251b
此頁面詳細介紹了我作為開發人員使用的大部分內容。我使用 Mac，因此許多工具都是 macOS 特定的，但清單中也有一些與作業系統無關的工具。 在我們開始之前要提到的一件事是，這些工具可以提高我的工作效率。也許他們不會像他們為我所做的那樣讓你有生產力。我總是說，*使用能讓你最有效率的工具*。 其中一些工具是免費的，但有些是付費的。我個人認為付費的是值得的，但這取決於你和你的錢包。 *注意：我在這裡放置了一些推薦連結。只是想坦率地說明這一點而已。* 編輯 -- 這一切都從編輯器開始。 [Visual Studio Code](https://code.visualstudio.com/) (VS Code) 是我的首選編輯器。我使用[Insider 版本的](https://code.visualstudio.com/insiders/)時間最長，但有些擴充功能會嘗試登入並重定向到 VS Code 普通版，所以我決定回到它。也就是說，VS Code Insider 非常穩定。 我很長時間以來都是 Dank Mono 的忠實粉絲，但 GitHub 今年發布了一堆等寬字體，我一直很喜歡[Monaspace Krypton](https://monaspace.githubnext.com/) 。 對於主題，它有所不同。我最近一直在使用輕現代預設主題，因為我發現它更適合[我的直播](https://nickyt.live)，但我也是[休士頓](https://marketplace.visualstudio.com/items?itemName=astro-build.houston)和[堡壘之夜](https://marketplace.visualstudio.com/items?itemName=sdras.fortnite-vscode-theme)主題的粉絲。 [](https://x.com/nickytonline/status/1787621116636221727) 雖然我安裝了[iTerm](https://iterm2.com/) ，這是一個很棒的 macOS 終端，但老實說，99.999% 的時間我都住在 VS Code 終端中。 ### 編輯器設定 如果您對我的編輯器設定感興趣，[這是我目前的設定](https://gist.github.com/nickytonline/e6ceb17a1fb7b6438c3f09ff800748da)。 更有趣的事情之一是您可以更改標題欄，因此我加入了一些表情符號。 ``` "window.title": "🦙⚡🫡 – ${activeEditorShort}${separator}${rootName} – 🫡⚡🦙", ```  我發現超級方便的另一個設定是`terminal.integrated.autoReplies` 。我從來不想獲取我的 .env 文件，這可以完美地處理它。 ``` "terminal.integrated.autoReplies": { "dotenv: found '.env' file. Source it? ([Y]es/[n]o/[a]lways/n[e]ver)": "e\r" }, ``` ### 也許澤德很快？ 我確實想向[Zed](https://zed.dev/)編輯大聲喊叫。我偶爾會使用它，而且速度超級快，但它還沒有成為我的主要編輯器。我認為一旦擴展生態系統進一步發展，我就會轉向這個。也許在明年。我們拭目以待。 😎 瀏覽器擴充 ----- 我並不是每天都使用所有這些，但這些是我首選的瀏覽器擴充功能。 - [精緻的 GitHub](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf) - GitHub 上的類固醇 - [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en) - 一個很棒的前端工具（這對我來說是新工具）（僅適用於基於 Chromium 的瀏覽器） - [React 開發者工具](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)- 因為 React - [Preact DevTools](https://preactjs.github.io/preact-devtools/) - 因為 Preact - [Axe](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) - 用於網路可存取性測試 - [WAVE](https://wave.webaim.org/extension/) - 用於網路可存取性測試 - [HTTPS 無所不在](https://www.eff.org/https-everywhere) - [優布洛克](https://ublock.org/) - [LanguageTool](https://languagetool.org) - 文法和拼字檢查工具 - [Pocket](https://getpocket.com/) - 用於為要閱讀的內容加入書籤 - [JSONView](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc) - JSON 有效負載的美化視圖 - [調整新 Twitter](https://github.com/insin/tweak-new-twitter/) - 消除 Twitter 使用者介面中的大量噪音 - [a11y Twitter](https://github.com/nickytonline/a11y-twitter) - 對如何使用 Twitter 進行小幅更改，以方便的方式推廣推文。 桌面應用程式 ------ 這些是我每天使用的大部分桌面應用程式。讓我們從一些通用的開始。 ### 我每天做的常見事情的通用工具 [Arc 瀏覽器](https://arc.net/gift/93e342bc)是一款基於 Chromium 的瀏覽器，在我看來，它解決了我在使用任何其他瀏覽器時遇到的大量使用者體驗 (UX) 問題。垂直選項卡、命令面板和自動畫中畫影片等等。 我在頂部選單列圖示上使用[Vanilla 的](https://matthewpalmer.net/vanilla/)時間最長，但當我拿到帶有瀏海的 MacBook Pro 後，它就不太好用了。從那以後，我開始使用[Bartender](https://www.macbartender.com)來管理我的選單列。 macOS 上的表情符號選擇器並不是那麼好，但[Rocket](https://matthewpalmer.net/rocket/)讓加入表情符號變得如此簡單。我無法告訴你我一天使用它多少次。 [Raycast](https://raycast.com)是我首選的 macOS 聚光燈替代品。這就像類固醇的聚光燈。我之前使用過[Alfred](https://www.alfredapp.com/) ，這是另一個出色的 Spotlight 替代品，但由於某種原因 Raycast 越來越吸引我了。我也用它來進行視窗管理。 對於那些坐在電腦前的夜晚， [f.lux](https://justgetflux.com/)是必須的。正如一些智者所說：「善待你的眼球」。 macOS 的[Nightshift](https://support.apple.com/en-ca/102191)還可以，但 f.lux 卻破壞了它。 對於管理會議， [Dato](https://sindresorhus.com/dato)是一款更好的 macOS 約會應用程式。在網址列中顯示多個時區非常有用。我有當地時間和 UTC。我還將它用於即將舉行的會議和活動。以前我使用的是[Meeter](https://trymeeter.com) ，它對此非常有用，但現在我需要的應用程式少了一個。 我幾乎每天都會截取螢幕截圖或錄製短影片， [Cleanshot X](https://cleanshot.com/)非常適合此操作。 ### Git 工具 我的大部分「git」工作都是在命令列上進行的，但有時我需要圖形使用者介面（GUI）來真正了解正在發生的事情。當我需要它時，我會伸手去拿[Fork](https://git-fork.com/) 。  向 Cassidy (@cassidoo) 的精彩 GIF 致敬！ 如果你使用 Git（我想你們大多數人都使用 Git）， [那麼簽署你的提交](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits)就非常重要。 [GPG Suite](https://gpgtools.org/)讓設定變得簡單。 ### 前端工具 我做了很多建立使用者介面 (UI) 的工作，這些都是這類工作不可或缺的工具。 [xScope](https://xscope.app)是一個非常棒的前端開發工具組。標尺、指南等 當我需要與設計師協調、查看設計或提取一些資源時， [Figma](https://www.figma.com/)就是我居住的地方。 我以前聽說過[Polypane](https://polypane.app/) ，我想幾年前我可能已經嘗試過它，但現在，它是前端的必備品。它可以幫助您建立具有各種優點的響應靈敏、易於存取的應用程式。對此感到好奇嗎？今年早些時候，我在一次直播中與 Polypane 的創作者 Kilian Valkhof (@kilianvalkhof) 進行了交流。 https://www.youtube.com/watch?v=fsIhghVlHJE 對於顏色對比問題，TPGi 的[顏色對比分析儀](https://www.tpgi.com/color-contrast-checker/)是頂級的。我強烈推薦它。感謝 Todd Libby (@colabottles) 去年向我推薦了這個。 ### 我使用的其他桌面應用程式 - [Cloudflare Warp](https://blog.cloudflare.com/1111-warp-better-vpn/) - 更快的網路和一些 VPN 優點 - [Plash](https://apps.apple.com/us/app/plash/id1494023538) - 適用於 Mac 的互動式桌面背景（一個或多個網頁） - [CleanMyMac X](https://macpaw.com/cleanmymac) - 一套實用程序，可讓您的 Mac 保持最佳狀態。 - [Starship](https://starship.rs/) - 跨 shell 提示符 直播軟體 ---- 我確信有些擁有更多觀眾的主播擁有更好的設置，但這就是我的工作方式。 我使用[Restream.io](https://restream.io/join/zZ8Wr)串流傳輸到多個平台，目前包括 Twitch、YouTube、X/Twitter 和 LinkedIn。 [OBS](https://obsproject.com/download)被很多人使用，包括我自己。這是一個很棒的開源軟體。我使用它來進行串流傳輸，而不是 Restream Studio 或 Streamyard 等類似工具，因為我有自訂疊加層和其他一些自訂功能。 https://github.com/obsproject/obs-studio [Krisp](https://krisp.ai/)在過濾通話和串流中不需要的噪音方面表現出色。在直播時告別背景的消防車。 🤣 我將[Loopback](https://rogueamoeba.com/loopback/)用於虛擬音訊來源。這非常有用，因為我建立了一個音頻源，即我的麥克風和客人的音頻，並將其視為一個輸入源。我使用這個音訊來源作為即時字幕的音訊來源。 我沒有用於串流媒體的精美相機。我曾經使用我的羅技網路攝像頭，這很好，但當我終於得到一部像樣的 iPhone 時，我覺得它的相機太棒了！所以我決定用它來進行直播。 [Camo](https://reincubate.com/camo/)使這成為可能，並且它有很多細節，如縮放、水印、濾鏡等。 ### 直播嘉賓工具 在很長一段時間裡，我都不明白人們是如何把嘉賓帶上直播的。在我從事串流媒體的早期，我曾經引入完整的 Discord 螢幕並在我的直播中分享。雖然這有效，但並不理想。我也嘗試了類似的 Zoom，然後我也開始在螢幕上裁剪 Zoom 的部分內容，但同樣不理想。 最終，我發現了[vdo.ninja](https://vdo.ninja/) 。 TLDR 是，它使用點對點技術將遠端攝影機引入 OBS 或其他工作室軟體。 https://github.com/steveseguin/vdo.ninja 這是一個很棒的專案，我強烈推薦它。如果您的客人有 Twitch 帳戶，另一個類似的軟體是 Twitch 的[Stream Together](https://help.twitch.tv/s/article/stream-together-host-guide?language=en_US) 。我也用這個，取決於客人。 命令列介面 (CLI) 工具 -------------- 我沒有很多 CLI 工具，但以下是一些我常用的工具： - [Homebrew](https://brew.sh) - macOS（或 Linux）缺少的套件管理器 - [GitHub CLI](https://github.com/cli/cli) - 命令列上的 GitHub。非常適合建立 PR 等。 https://dev.to/opensauced/boost-productivity-with-the-github-cli-2mne - [nvm](https://github.com/nvm-sh/nvm) - 節點版本管理器 - [cloudflared](https://github.com/cloudflare/cloudflared) - 透過安全隧道將本地伺服器公開到公共網路 如果您對我的設定（例如硬體和辦公室設定）的重置或我在旅途中攜帶的物品感到好奇，請隨時查看[我的使用頁面](https://nickyt.co/uses)。 直到下一篇！ --- 原文出處：https://dev.to/nickytonline/tools-that-keep-me-productive-1no5
今天，我們將介紹 30 個或更多可以使用 AI 建置的專案。 所有專案都是開源的，因此您可以做出貢獻以使其變得更好。 有些專案可能擁有龐大的程式碼庫，但您可以從中獲得靈感並建立一個很酷的副專案。 相信我，如果這個清單沒有讓你感到驚訝，那麼沒有什麼會讓你感到驚訝:) 讓我們開始吧！  --- 1. [CopilotKit](https://go.copilotkit.ai/Anmol) - 在數小時內為您的產品提供 AI Copilot。 -------------------------------------------------------------------------- [](https://github.com/CopilotKit/CopilotKit) 將 AI 功能整合到 React 中是很困難的，這就是 Copilot 的用武之地。一個簡單快速的解決方案，可將可投入生產的 Copilot 整合到任何產品中！ 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一，CopilotKit 是一個應用程式內人工智慧聊天機器人，可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` （您可以稍後切換到不同的 UI 提供者）。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後，您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的，作為開發人員，我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 5700 顆星，發布了 200 多個版本，這意味著它們不斷改進。 https://go.copilotkit.ai/Anmol Star CopilotKit ⭐️ --- 2. [AgentGPT](https://github.com/reworkd/AgentGPT) - 組裝、配置和部署自主 AI 代理程式。 ------------------------------------------------------------------------  AgentGPT 可讓您設定和部署自主 AI 代理程式。 它將嘗試透過思考要完成的任務、執行任務並從結果中學習來實現目標:) 它是使用以下方式建構的： - 引導：create-t3-app + FastAPI-模板。 - 框架：Nextjs 13 + Typescript + FastAPI - 驗證：Next-Auth.js - ORM：Prisma 和 SQLModel。 - 資料庫：Planetscale。 - 樣式：TailwindCSS + HeadlessUI。 - 架構驗證：Zod + Pydantic。 - 法學碩士工具：Langchain。 開始使用本[指南](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#getting-started-rocket)在本地安裝它。 您可以查看該應用程式的[演示](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#-demo)並查看[即時網站](https://agentgpt.reworkd.ai/)。  他們在 GitHub 上擁有 29k+ 顆星，並且正在發布`v1`版本。 https://github.com/reworkd/AgentGPT 明星 AgentGPT ⭐️ --- 3.[私人 GPT](https://github.com/zylon-ai/private-gpt) - 無需網路即可詢問有關您文件的問題。 ------------------------------------------------------------------------  PrivateGPT 是一個可立即投入生產的 AI 專案，即使在沒有網路連線的情況下，您也可以使用大型語言模型 (LLM) 的功能來詢問有關文件的問題。 100% 私有意味著任何時候都沒有資料離開您的執行環境。 API 分為兩個邏輯區塊： A。高級 API，抽象化了 RAG（檢索增強生成）管道實現的所有複雜性： - 文件攝取：內部管理文件解析、分割、元資料擷取、嵌入產生和儲存。 - 使用所攝取文件中的上下文進行聊天和完成：抽像上下文檢索、提示工程和回應產生。 b.低階 API，允許高階用戶實現複雜的管道： - 嵌入生成：基於一段文字。 - 上下文區塊檢索：給定查詢，從攝取的文件中傳回最相關的文字區塊。 您可以閱讀[安裝指南](https://docs.privategpt.dev/installation/getting-started/installation)來開始。 您可以閱讀[文件](https://docs.privategpt.dev/overview/welcome/introduction)以及所涉及的[詳細架構](https://github.com/zylon-ai/private-gpt?tab=readme-ov-file#-architecture)。 PrivateGPT 現在正在發展成為產生 AI 模型和原語的網關，包括補全、文件攝取、RAG 管道和其他低階建置塊。 他們在 GitHub 上擁有超過 51,000 顆星，並且發展迅速。 https://github.com/zylon-ai/private-gpt 明星私人 GPT ⭐️ --- 4. [Instrukt](https://github.com/blob42/Instrukt) - 終端機中整合人工智慧。 ---------------------------------------------------------------  Instrukt是一個基於終端的AI整合環境。它提供了一個平台，用戶可以： - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們，並且為了安全起見，在安全容器（目前使用 Docker 實作）中執行它們，以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ```  有許多令人興奮的功能，例如： - 基於終端的介面，讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互，以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理，這是一個簡潔的小功能。  Instrukt 已獲得 AGPL 許可證，這意味著任何人都可以將其用於任何目的。 可以肯定地說，Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案，因此他們在 GitHub 上有大約 200 多顆星，但用例非常好。 https://github.com/blob42/Instrukt 舊指令 ⭐️ --- 5. [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 -------------------------------------------------------------------------------  您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如，打開應用程式、尋找餐廳、綜合資訊。太棒了：D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分： A。語音命令：它使用本地執行的 Whisper（Buzz 的一個分支）來產生命令。 b.命令到行動：您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後，就像任何優秀的人工智慧一樣，我們讓代理商使用 AppleScript 說出最終結果「{Result}」（如果您以前沒有使用過，請嘗試在 Mac 終端機中輸入「Hello World！」）。 我們製作了一個自訂工具，讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串： ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的，GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後，它使用LangChain Agent 選擇一組操作，包括使用OpenAI 的GPT-3（“text-davinci-003”）從提示符號產生AppleScript（用於桌面自動化）和JavaScript（用於瀏覽器自動化）命令，然後執行產生的腳本。 請記住，這不適用於生產用途。該專案執行從自然語言產生的程式碼，可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用： ✅ 求計算結果。 > 提示：“2 + 2 是什麼？” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ✅ 尋找附近的餐廳。 > 提示：“查找我附近的餐廳” 它將打開 Chrome，谷歌搜尋附近的餐廳，解析頁面，然後返回最上面的結果。有時它很厚顏無恥，反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候，它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容： ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得，請自行承擔風險。哈哈！ ✅ 如果您要求 GPT Automator 擦除您的計算機，它會的。 是的，如果您要求的話，它會擦除您的電腦！ 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示！ https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f 您可以在[Chidi 的部落格](https://chidiwilliams.com/posts/gpt-automator)上閱讀更多內容。 它更像是一個業餘專案，因此他們在 GitHub 上有大約 200 個 star，但它非常酷。 https://github.com/chidiwilliams/GPT-Automator 明星 GPT Automator ⭐️ --- 6. [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?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例： - 假設您有一個網站（可以是商店、電子商務網站或部落格），並且您希望廢棄該網站的所有相關連結，並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。  - 您還可以建立一個自訂工具，該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。  還有許多其他用例，例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star，並擁有超過 10,000 個分叉，因此具有良好的整體比率。 https://github.com/FlowiseAI/Flowise 明星 Flowise ⭐️ --- 7. [Twitter Agent](https://github.com/ahmedbesbes/media-agent) - 從社群媒體抓取資料並使用 Langchain 與其聊天。 ---------------------------------------------------------------------------------------------  Media Agent 抓取 Twitter 和 Reddit 提交的內容，對其進行總結，並在互動式終端中與它們聊天。這麼酷的概念！ 您可以閱讀[說明](https://github.com/ahmedbesbes/media-agent?tab=readme-ov-file#run-the-app-locally)以在本地安裝它。 它是使用以下方式建構的： - Langchain 🦜 用於建構和撰寫法學碩士。 - ChromaDB 用於儲存向量（也稱為嵌入）並查詢它們以建立對話機器人。 - Tweepy 連接到您的 Twitter API 並提取推文和元資料。 - Praw 連接到 Reddit API。 - Rich 建造了一個很酷的終端 UX/UI。 - 管理依賴關係的詩。 一些很棒的功能： - 代表您從使用者帳戶清單或關鍵字清單中抓取推文/提交內容。 - 使用 OpenAI 嵌入推文/提交內容。 - 建立推文/提交內容的摘要並提供需要回答的潛在問題。 - 在推文之上打開聊天會話。 - 儲存對話及其元資料。 - 豐富的終端使用者介面和日誌記錄功能。 您可以觀看演示！ https://www.loom.com/share/f4954e7d34ef4b7b8491e2bf910e8521 它在 GitHub 上有近 100 顆星，並且不再維護。您可以用它來建造更好的東西。 https://github.com/ahmedbesbes/media-agent 明星 Twitter 代理商 ⭐️ --- 8. [GPT 遷移](https://github.com/joshpxyne/gpt-migrate)- 輕鬆將程式碼庫從一種框架或語言遷移到另一種框架或語言。 ----------------------------------------------------------------------------------  如果您曾經面臨將程式碼庫遷移到新框架或語言的痛苦，那麼這個專案適合您。 我想我們都同意我們在某個時候需要這個。您也可以使用工作流程來完成此操作，據我所知，Stripe 曾經將其整個 JS 程式碼庫轉換為 TS。 遷移是一個成本高、乏味且重要的問題。 不要盲目相信當前版本，請負責任地使用它。另請注意，成本可能會迅速增加，因為 GPT-Migrate 旨在編寫（並可能重寫）整個程式碼庫。 您可以使用 Poetry[安裝](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-installation-using-poetry)它並了解[它的工作原理](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-how-it-works)。 > 請注意。 GPT-Migrate 目前處於開發 alpha 階段，尚未準備好投入生產使用。例如，在相對簡單的基準測試中，它在約 50% 的時間內順利通過 Python 或 JavaScript 等「簡單」語言，並且在沒有人工幫助的情況下無法通過 C++ 或 Rust 等更複雜的語言。 您可以在這裡觀看演示！  他們在 GitHub 上有 6500+ 顆星，最後一次提交是 6 個月前，所以我認為它不再被維護了！ https://github.com/joshpxyne/gpt-migrate 明星 GPT 遷移 ⭐️ --- 9. [Plandex](https://github.com/plandex-ai/plandex) - 用於使用法學碩士建置複雜的真實世界軟體的人工智慧編碼引擎。 -----------------------------------------------------------------------------------  Plandex 使用長時間執行的代理程式來完成跨多個檔案且需要多個步驟的任務。它將大任務分解為更小的子任務，然後實現每個子任務，一直持續到完成工作為止。 它可以幫助您處理積壓的工作，使用不熟悉的技術，擺脫困境，並花更少的時間在無聊的事情上。 您可以在這裡查看演示！ https://vimeo.com/926634577 變更會累積在受保護的沙箱中，以便您可以在自動將它們套用到專案文件之前查看它們。內建版本控制可讓您輕鬆返回並嘗試不同的方法。分支允許您嘗試多種方法並比較結果。 您可以在終端機中有效地管理上下文。輕鬆將檔案或整個目錄新增至上下文中，並在工作時自動更新它們，以便模型始終具有專案的最新狀態。 Plandex 依賴 OpenAI API，並且需要`OPENAI_API_KEY`環境變數。 Plandex 支援 Mac、Linux、FreeBSD 和 Windows。它從沒有依賴關係的單一二進位檔案執行。 您甚至可以嘗試不同的模型和模型設置，然後比較結果。 您可以閱讀[安裝說明](https://github.com/plandex-ai/plandex?tab=readme-ov-file#install)。 Plandex Cloud 是使用 Plandex 最簡單、最可靠的方式。當您使用 plandex new 建立第一個計劃時，系統會提示您開始匿名試用（無需電子郵件）。試用帳戶僅限 10 個計劃，每個計劃有 10 個 AI 模型回复。 Plandex Cloud 帳戶目前是免費的，這是一件好事。 Plandex 在 GitHub 上擁有 8k+ 顆星，並使用 Go 建造。 https://github.com/plandex-ai/plandex 明星PLandex ⭐️ --- 10. [SQL Translator](https://github.com/whoiskatrin/sql-translator) - 使用人工智慧將自然語言查詢轉換為 SQL 程式碼的工具。 --------------------------------------------------------------------------------------------------  我試圖建立一個類似的專案，發現它已經存在。 該工具旨在讓任何人都可以輕鬆地將 SQL（結構化查詢語言）命令轉換為自然語言，反之亦然。 SQL 是一種用於管理和操作關聯式資料庫中的資料的程式語言，雖然它是一個強大的工具，但它也可能非常複雜且難以理解。 另一方面，自然語言是我們在日常生活中說和寫的語言，對於不熟悉技術術語的人來說，它通常是首選的溝通方式。 透過 SQL 和自然語言翻譯器，您無需成為 SQL 專家即可了解資料庫中發生的情況或編寫 SQL 查詢。您只需用自然語言輸入查詢即可取得對應的 SQL 程式碼，反之亦然。 其中一些功能是： - 深色模式。 - 小寫/大寫切換。 - 複製到剪貼簿。 - SQL 語法高亮。 - 模式意識（測試版）。 - 查詢歷史記錄。 你可以閱讀 [安裝說明](https://github.com/whoiskatrin/sql-translator?tab=readme-ov-file#%EF%B8%8F-installation)，它非常簡單，因為它使用 Nextjs。 此查詢適合您。哈哈！  SQL Translator 在 GitHub 上有 4k star，是使用 TypeScript 建構的。 https://github.com/whoiskatrin/sql-translator 明星 SQL 翻譯機 ⭐️ --- 11. [WingmanAI](https://github.com/e-johnstonn/wingmanAI) - 音訊即時轉錄，與 ChatGPT 整合。 --------------------------------------------------------------------------------  WingmanAI 是一款功能強大的工具，可與系統和麥克風音訊的即時轉錄進行互動。該工具由 ChatGPT 提供支援，可讓您與腳本即時交互，作為機器人的廣泛記憶體基礎，提供獨特的通訊平台。 當您載入指定人員的記錄時，機器人可以回答有關過去對話的問題。 您可以閱讀[安裝說明](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#installation)。 您可以在這裡觀看演示！  一些簡潔的功能是： - WingmanAI 可以轉錄系統輸出和麥克風輸入音頻，讓您以易於閱讀的格式查看即時轉錄。 - 您可以與 ChatGPT 支援的機器人聊天，該機器人會即時讀取您的文字記錄。 - 機器人以令牌有效的方式維護對話記錄，因為只有當前的文字區塊會傳遞給機器人。 - WingmanAI 讓您可以保存成績單以供將來使用。您可以稍後隨時加載它們，並且對機器人進行的任何查詢都將與保存的轉錄本的向量資料庫交叉引用，從而為機器人提供更豐富的上下文。 - 您可以繼續附加到已儲存的記錄中，隨著時間的推移建立一個龐大的資料庫供機器人從中提取。 它在 GitHub 上有 420 個星，並且不再維護。 https://github.com/e-johnstonn/wingmanAI 明星 WingmanAI ⭐️ --- 12. [Lively](https://github.com/rocksdanister/lively) - 允許使用者設定動畫桌面桌布和螢幕保護程式。 -----------------------------------------------------------------------------  這只是為了好玩，我們可以使用程式碼學到很多關於它是如何完成的。 你可以看看這個[影片](https://www.pexels.com/video/blue-texture-abstract-leaves-7710243/)，看看它看起來有多瘋狂。  他們提供[三種類型的壁紙，](https://github.com/rocksdanister/lively?tab=readme-ov-file#types-of-wallpapers)包括影片/GIF、網頁和應用程式/遊戲。 它基於 C# 和 live 支援的一些很酷的功能建置： 1. Lively 可以透過終端機的[命令列參數](https://github.com/rocksdanister/lively/wiki/Command-Line-Controls)進行控制。您可以將其與其他語言（例如 Python 或腳本軟體 AutoHotKey）整合。 2. 一組強大的[API](https://github.com/rocksdanister/lively/wiki/API) ，供開發人員建立互動式壁紙。取得硬體讀數、音訊圖表、音樂資訊等。 3. 當電腦上執行全螢幕應用程式/遊戲時（~0% CPU、GPU 使用率），桌布播放會暫停。 4. 您還可以利用[機器學習推理](https://github.com/rocksdanister/lively/wiki/Machine-Learning)來建立動態壁紙。您可以預測任何 2D 影像與相機的距離並產生類似 3D 的視差效果。酷：D 我見過很多人使用它，其中許多人甚至不知道它是開源的。 您可以使用[安裝程式](https://github.com/rocksdanister/lively/releases/download/v2.0.7.4/lively_setup_x86_full_v2074.exe)或透過[Microsoft Store](https://www.microsoft.com/store/productId/9NTM2QC6QWS7?ocid=pdpshare)下載它。 它是 2023 年 Microsoft Store 的獲勝者。 它在 GitHub 上擁有 13k+ Stars，有 60 個版本。 https://github.com/rocksdanister/lively 明星活潑 ⭐️ --- 13. [RestGPT](https://github.com/Yifan-Song793/RestGPT) - 基於 LM 的自主代理透過 RESTful API 控制應用程式。 -------------------------------------------------------------------------------------------  這項工作旨在建立一個基於大型語言模型的自主代理 RestGPT，以控制現實世界的應用程式，例如電影資料庫和音樂播放器。為了實現這一目標，我們將法學碩士與 RESTful API 連接起來，並解決規劃、API 呼叫和回應解析的實際挑戰。為了全面評估 RestGPT 的效能，我們提出了 RestBench，這是一個高品質的基準測試，由兩個真實場景和具有黃金解決方案路徑的人工註釋指示組成。 RestGPT採用迭代式從粗到精的線上規劃框架，並使用執行器呼叫RESTful API。以下是 RestGPT 的概述。  您可以閱讀[文件](https://github.com/Yifan-Song793/RestGPT?tab=readme-ov-file#data)以使用 RestBench 評估 RestGPT 的效能。 使用 TMDB 電影資料庫搜尋 Sofia Coppola 執導的電影數量的範例。  您可以閱讀康乃爾大學發表的程式碼研究論文： [RestGPT - Connecting Large Language Models with Real-World RESTful APIs](https://arxiv.org/abs/2306.06624) 。 他們在 GitHub 上有 1.2k Stars，雖然不是很大，但涵蓋了一個很好的用例。 https://github.com/Yifan-Song793/RestGPT 明星 RestGPT ⭐️ --- 14. [ChatFiles](https://github.com/guangzhengli/ChatFiles) - 上傳您的檔案並與其對話。 -------------------------------------------------------------------------  文件聊天機器人 — 多個文件，由 GPT / Embedding 提供支援。你可以上傳任何文件並與之對話，考慮到他們使用了另一個著名的開源專案，UI 非常好。 它在底層使用 Langchain 和[Chatbot-ui](https://github.com/mckaywrigley/chatbot-ui) 。使用 Nextjs、TypeScript、Tailwind 和 Supabase（向量 DB）建構。 如果您想了解該方法和技術架構，那麼就在這裡！  此環境僅用於試用，支援最大檔案大小為 10 MB，這是一個缺點，如果您想要更大的大小，則可以[在本機安裝](https://github.com/guangzhengli/ChatFiles?tab=readme-ov-file#how-to-run-locally)。 他們提供了您可以使用的[入門問題](https://github.com/guangzhengli/ChatFiles/blob/main/doc/Example.md)。您可以查看[現場演示](https://chatfile.vectorhub.org/)。 他們在 GitHub 上有 3k star，並且發布了`v0.3`版本。 https://github.com/guangzhengli/ChatFiles 明星 ChatFiles ⭐️ --- 15. [MindsDB](https://github.com/mindsdb/mindsdb) - 從企業資料客製化人工智慧的平台。 --------------------------------------------------------------------  MindsDB 是一個利用企業資料客製化人工智慧的平台。 透過 MindsDB，您可以利用資料庫、向量儲存或應用程式中的資料即時部署、服務和微調模型，以建立人工智慧驅動的應用程式 - 使用開發人員已知的通用工具。 借助 MindsDB 及其與資料來源和 AI/ML 框架的近[200 個集成](https://docs.mindsdb.com/integrations/data-overview)，任何開發人員都可以使用其企業資料更快、更安全地自訂符合其目的的 AI。  您可以閱讀[文件](https://docs.mindsdb.com/)和[快速入門指南](https://docs.mindsdb.com/quickstart-tutorial)來開始使用。 目前，他們總共支援[3 個使用 Mongo-QL、Python 和 JavaScript 的 SDK](https://docs.mindsdb.com/sdks/overview) 。 MindsDB 有多種應用程式，例如與眾多資料來源和 AI 框架集成，因此您可以輕鬆地將資料和 AI 結合在一起以建立和自動化自訂工作流程。 其他常見用例包括微調模型、聊天機器人、警報系統、內容生成、自然語言處理、分類、回歸和預測。閱讀有關[用例的](https://docs.mindsdb.com/use-cases/)更多訊息，每個用例都有一個包含一些資訊的架構圖。  例如，MindsDB 的聊天機器人架構圖。您可以閱讀提供的所有[解決方案](https://github.com/mindsdb/mindsdb?tab=readme-ov-file#-get-started)及其 SQL 查詢範例。 ``` // SQL Query Example for Chatbot CREATE CHATBOT slack_bot USING database='slack',agent='customer_support'; ```  只是為了告訴您總體的可能性，您可以查看[如何使用 AI + IoT 感測器資料預測氣溫](https://mindsdb.com/blog/how-to-forecast-air-temperatures-with-ai-iot-sensor-data)。令人興奮的權利:)  他們在 GitHub 上擁有超過 21k 個 star，並且在`v24.4.3.0`上有超過 200 個版本。順便說一句，這是我第一次在任何版本中看到 4 個部分，因為我一直遵循語義版本。 https://github.com/mindsdb/mindsdb 明星 MindsDB ⭐️ --- 16. [Quivr](https://github.com/QuivrHQ/quivr) - 你的 GenAI 第二腦。 -------------------------------------------------------------  Quivr，您的第二個大腦，利用 GenerativeAI 的力量成為您的私人助理！可以將其視為黑曜石，但增強了人工智慧功能。  您可以閱讀[安裝指南](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#getting-started-)。 您可以閱讀[文件](https://docs.quivr.app/home/intro)並觀看[示範影片](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#demo-highlights-)。 他們可以提供更好的免費套餐，但這足以在您端進行測試。 它在 GitHub 上擁有超過 30k 顆星，發布了 220 多個版本，這意味著它們正在不斷改進。 https://github.com/QuivrHQ/quivr 明星 Quivr ⭐️ --- 17.[動畫繪畫](https://github.com/facebookresearch/AnimatedDrawings)- 一種將兒童人物繪畫動畫化的方法。 ---------------------------------------------------------------------------------  我的意思是哇！這麼酷的概念。我不知道你怎麼想，但我真的很興奮。 這是 Facebook 的一個開源專案，主要用於研究目的，包含論文《 [A Method for Animating Children's Drawings of the Human Figure》](https://dl.acm.org/doi/10.1145/3592788)中描述的演算法的實作。 該專案已在 macOS Ventura 13.2.1 和 Ubuntu 18.04 上進行了測試。如果您在其他作業系統上安裝，則可能會遇到問題。 他們強烈建議在安裝 Animated Drawings 之前啟動 Python 虛擬環境。 閱讀有關[安裝說明](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#installation)以及如何快速入門的更多資訊。 您可以按照這個完整的指南來為[您的繪圖製作動畫](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#animating-your-own-drawing)，包括如何在場景中加入多個角色、加入背景圖像以及更多令人興奮的事情。 他們在 GitHub 上擁有超過 10k 顆星，並且僅用於具有 MIT 許可的研究目的。 https://github.com/facebookresearch/AnimatedDrawings 明星動畫繪圖 ⭐️ --- 18.[背景移除器](https://github.com/nadermx/backgroundremover)- 讓您可以透過簡單的 CLI 使用 AI 從影像和影片中移除背景。 ------------------------------------------------------------------------------------------  這是一個使用 AI 從圖像和影片中刪除背景的命令列工具。 首先從 pypi 安裝 backgroundremover。 ``` pip install --upgrade pip pip install backgroundremover ``` 也可以在不透過 pip 安裝的情況下執行它，只需克隆 git 以在本地啟動虛擬環境安裝要求並執行。 您可以使用的一些命令： - 從本機檔案圖像中刪除背景 ``` backgroundremover -i "/path/to/image.jpeg" -o "output.png" ``` - 從本地影片中刪除背景並將其覆蓋在圖像上 ``` backgroundremover -i "/path/to/video.mp4" -toi "/path/to/videtobeoverlayed.mp4" -o "output.mov" ``` 您可以檢查可透過 CLI 使用的所有[命令](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#usage-as-a-cli)。 您甚至可以將它用作圖書館。 ``` from backgroundremover.bg import remove def remove_bg(src_img_path, out_img_path): model_choices = ["u2net", "u2net_human_seg", "u2netp"] f = open(src_img_path, "rb") data = f.read() img = remove(data, model_name=model_choices[0], alpha_matting=True, alpha_matting_foreground_threshold=240, alpha_matting_background_threshold=10, alpha_matting_erode_structure_size=10, alpha_matting_base_size=1000) f.close() f = open(out_img_path, "wb") f.write(img) f.close() ``` 您可以閱讀[安裝說明](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#installation)並觀看[現場演示](https://www.backgroundremoverai.com/)。 > 輸入與輸出。  他們在 GitHub 上有 6k star，我們絕對可以用它來學習一些重要的概念。 https://github.com/nadermx/backgroundremover 明星背景去除器 ⭐️ --- 19. [Lobe Chat](https://github.com/lobehub/lobe-chat) - 現代設計的法學碩士/人工智慧聊天框架。 ---------------------------------------------------------------------------  一個開源、現代設計的 ChatGPT/LLM UI/框架。 支援語音合成、多模式和可擴展（函數呼叫）插件系統。您可以一鍵部署您的私有 OpenAI。  讓我們來看看 LobeChat 的一些令人興奮的功能： ✅ 多模式服務提供者支援。  他們將我們的支援擴展到多個模型服務提供者，而不是局限於單一服務提供者，為用戶提供更多樣化和豐富的對話選擇。 尋找他們支援的[10 多個模型服務提供者](https://lobehub.com/docs/usage/features/multi-ai-providers)的完整清單。 ✅ 市場助理。  在LobeChat的[助手市場](https://lobehub.com/assistants)中，創作者可以發現一個充滿活力和創新的社區，匯集了許多精心設計的助手。這些助手不僅在工作場景中發揮著至關重要的作用，而且在學習過程中也提供了極大的便利。在這裡，每個人都可以貢獻自己的智慧，分享自己開發的助手。  那裡有很多很棒的應用程式。哇！ ✅ 模型視覺辨識。  LobeChat現在支援OpenAI的gpt-4-vision、Google Gemini Pro Vision、Zhipu GLM-4 Vision等具有視覺辨識能力的大型語言模型，使LobeChat具備多模態互動能力。用戶可以輕鬆地將圖片上傳或拖放到聊天框中，助理將能夠辨識圖片內容並據此進行智慧對話，打造更聰明、更多樣化的聊天場景。 ✅ 文字到圖像生成。  LobeChat 支援最新的文字到圖像生成技術，現在允許使用者在與助手對話時直接使用文字到圖像工具。透過利用 DALL-E 3、MidJourney 和 Pollinations 等 AI 工具的功能，助手現在可以將您的想法轉化為圖像。 ✅ 本地大語言模型 (LLM) 支援。  借助 Ollama AI 強大的基礎設施和社區的協作努力，現在您可以在 LobeChat 中與本地 LLM（大型語言模型）進行對話！ 透過執行以下 Docker 指令，您可以在 LobeChat 中體驗與本機 LLM 的對話。 ``` docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434/v1 lobehub/lobe-chat ``` ✅ 漸進式網頁應用程式 (PWA)。  他們採用了漸進式 Web 應用程式 PWA 技術，這是一種現代 Web 技術，可將 Web 應用程式提升到接近本機應用程式的體驗。透過 PWA，LobeChat 可以在桌面和行動裝置上提供高度優化的使用者體驗，同時保持輕量級和高效能的功能。 ✅ 自訂主題。  LobeChat在介面設計上非常注重個人化的使用者體驗，因此引入了靈活多樣的主題模式，包括白天的淺色模式和夜間的深色模式。 除了主題模式切換之外，我們還提供了一系列顏色自訂選項，讓使用者可以根據自己的喜好調整應用程式的主題顏色。 了解所有[功能和用例](https://lobehub.com/docs/usage/start)。 您可以自行託管或使用 docker 部署它。 lobe chat 的[生態系統](https://github.com/lobehub/lobe-chat/tree/main?tab=readme-ov-file#-ecosystem)提供了 4 個軟體包： `lobehub/ui` 、 `lobehub/icons` 、 `lobehub/tts`和`lobehub/lint` 。 他們還提供[插件市場](https://lobehub.com/plugins)，您可以在其中找到許多有用的插件，這些插件可用於引入新的函數呼叫，甚至是呈現訊息結果的新方法。如果你想開發自己的插件，請參考 wiki 中的[📘插件開髮指南](https://lobehub.com/docs/usage/plugins/development)。  您可以閱讀[文件](https://lobehub.com/docs/usage/start)。 您可以查看[現場演示](https://chat-preview.lobehub.com/chat)。它太酷了！  他們在 GitHub 上擁有超過 28k 顆星，發布了 500 多個版本。 https://github.com/lobehub/lobe-chat 星瓣聊天 ⭐️ --- 20.[微代理](https://github.com/aymenfurter/microagents)- 能夠自我編輯提示的代理。 ------------------------------------------------------------------  它是一個實驗框架，用於動態建立自我改進的代理來回應任務。 微代理代表了一種建立自我改進代理的新方法。小型的微服務大小（因此稱為微代理）代理是根據用戶分配給助手的任務動態生成的，評估其功能，並在成功驗證後存儲以供將來重用。 這使得跨聊天會話的學習成為可能，使系統能夠獨立推斷任務執行的方法。 這是使用`Python` 、 `OpenAI's GPT-4 Turbo`和`Text-Embedding-Ada-002`建構的。 您可以閱讀[安裝說明](https://github.com/aymenfurter/microagents?tab=readme-ov-file#installation)。他們提到您應該擁有一個可以存取 gpt-4-turbo 和 text-embedding-ada-002 的 OpenAI 帳戶。 讓我們看一個獲取天氣預報代理的範例。 ``` You are an adept weather informant. Fetch the weather forecast by accessing public API data using this Python code snippet: ``python import requests import json def fetch_weather_forecast(location, date): response = requests.get(f"https://api.met.no/weatherapi/locationforecast/2.0/compact?lat={location[0]}&lon={location[1]}") weather_data = response.json() for day_data in weather_data['properties']['timeseries']: if date in day_data['time']: print(day_data['data']['instant']['details']) break `` # Example usage: fetch_weather_forecast((47.3769, 8.5417), '2024-01-22T12:00:00Z') Note: Replace the (47.3769, 8.5417) with the actual latitude and longitude of the location and the date string accordingly. ``` 如果您想知道如何建立代理，那麼此架構圖將對此進行解釋。  您可以看到[工作演示](https://github.com/aymenfurter/microagents?tab=readme-ov-file#demo)。 他們在 GitHub 上有大約 700 顆星，值得一看。 https://github.com/aymenfurter/microagents 明星微代理 ⭐️ --- 21. [GPT-4 & LangChain](https://github.com/mayooear/gpt4-pdf-chatbot-langchain) - 用於大型 PDF 文件的 GPT4 和 LangChain 聊天機器人。 --------------------------------------------------------------------------------------------------------------------------  這可用於新的 GPT-4 API 來為多個大型 PDF 檔案建立 chatGPT 聊天機器人。 該系統是使用 LangChain、Pinecone、Typescript、OpenAI 和 Next.js 建構的。 LangChain 是一個簡化可擴展 AI/LLM 應用程式和聊天機器人開發的框架。 Pinecone 用作向量存儲，用於以文字格式儲存嵌入和 PDF，以便以後檢索類似文件。 您可以閱讀涉及複製、安裝依賴項和設定環境 API 金鑰的[開發指南](https://github.com/mayooear/gpt4-pdf-chatbot-langchain?tab=readme-ov-file#development)。 您可以觀看[YouTube 影片](https://www.youtube.com/watch?v=ih9PBGVVOO4)，了解如何遵循和使用它。 他們在 GitHub 上擁有 14k+ Stars，僅提交了 34 次。在您的下一個人工智慧應用程式中嘗試！ https://github.com/mayooear/gpt4-pdf-chatbot-langchain 明星 GPT-4 和 Langchain ⭐️ --- 22. [Buzz](https://github.com/chidiwilliams/buzz) - 在您的個人電腦上離線轉錄和翻譯音訊。 ----------------------------------------------------------------------  使用 OpenAI 的 Whisper 的強大功能在您的個人電腦上離線轉錄和翻譯音訊。 Buzz 甚至出現在[App Store](https://apps.apple.com/us/app/buzz-captions/id6446018936?mt=12&itsct=apps_box_badge&itscg=30200) 。取得 Buzz 的 Mac 原生版本，具有更簡潔的外觀、音訊播放、拖放匯入、文字記錄編輯、搜尋等功能。 您可以閱讀[安裝說明](https://chidiwilliams.github.io/buzz/docs/installation)。 令人興奮的功能： - 匯入音訊和視訊檔案並將文字記錄匯出為 TXT、SRT 和 VTT（演示）。 - 從電腦麥克風轉錄和翻譯為文字（資源密集且可能不是即時的。 - 它可在 Mac、Windows 和 Linux 上使用。 - 還有一個[CLI](https://chidiwilliams.github.io/buzz/docs/cli)選項。 在這裡查看演示！ https://www.loom.com/share/564b753eb4d44b55b985b8abd26b55f7 您可以閱讀[文件](https://chidiwilliams.github.io/buzz/docs)。 它們在 GitHub 上擁有近 10k star，並且自兩週前上次提交以來仍在維護中。 https://github.com/chidiwilliams/buzz 明星嗡嗡聲 ⭐️ --- 23. [Deepgram](https://github.com/deepgram) - 將語音 AI 建置到您的應用程式中。 ----------------------------------------------------------------  從新創公司到 NASA，Deepgram API 每天都用於轉錄和理解數百萬分鐘的音訊。快速、準確、可擴展且經濟高效。 它為開發人員提供語音到文字和音訊智慧模型。  儘管他們有免費增值模式，但免費套餐的限制足以讓您入門。 可視化效果更上一層樓。您可以檢查即時串流媒體回應或音訊檔案並比較音訊的智慧程度。   您可以閱讀[文件](https://developers.deepgram.com/docs/introduction)。 您也可以閱讀 Deepgram 撰寫的關於[如何將語音辨識新增至您的 React 和 Node.js 專案的範例部落格](https://deepgram.com/learn/how-to-add-speech-recognition-to-your-react-project)。 如果您想嘗試 API 來親自了解模型的靈活性，請查看他們的[API Playground](https://playground.deepgram.com/?smart_format=true&language=en&model=nova-2) 。 https://github.com/deepgram 明星 Deepgram ⭐️ --- 24. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼，更多的內容。 -----------------------------------------------------------------------   這是一個開源專案，旨在複製 Devin，一名自主人工智慧軟體工程師，能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道，這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM，因此您可以使用任何基礎模型來執行 OpenDevin，包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻，您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star，並且正在快速成長。 https://github.com/OpenDevin/OpenDevin 明星 OpenDevin ⭐️ --- 25. [NPM Copilot](https://github.com/whoiskatrin/npm-copilot) - Next.js 的 CLI 工具，可以即時分析日誌。 ------------------------------------------------------------------------------------------  npm/yarn/pnpm copilot 是一個命令列工具，它使用 OpenAI 的 GPT-3 語言模型來提供修復程式碼中錯誤的建議。 CLI 工具可偵測目前目錄中正在使用的專案類型和套件管理器。 然後，它執行適當的開發伺服器命令（例如，npm run dev、yarn run dev、pnpm run dev）並偵聽正在執行的應用程式產生的日誌。 當遇到錯誤時，CLI 工具會即時提供錯誤修復建議。 首先使用以下 npm 指令安裝 npm-copilot 套件。 ``` npm install -g npm-copilot ``` CLI 工具將開始監視 Next.js 應用程式產生的日誌，並即時提供錯誤修復建議。 您可以透過該命令在專案中使用它。 ``` npm-copilot ``` 他們在 GitHub 上有 338 顆星，支援`Next,js` 、 `React` 、 `Angular`和`Vue.js` https://github.com/whoiskatrin/npm-copilot 明星 NPM Copilot ⭐️ --- 26. [Mentat](https://github.com/AbanteAI/mentat) - 人工智慧編碼助理。 ------------------------------------------------------------  Mentat 是一款人工智慧工具，可直接從命令列幫助您完成任何編碼任務。 與 Copilot 不同，Mentat 協調多個位置和文件的編輯。與 ChatGPT 不同的是，Mentat 已經擁有您專案的上下文 - 無需複製和貼上！ 您可以觀看此演示以了解基本概述。 https://www.youtube.com/watch?v=lODjaWclwpY 如果需要協助，您可以閱讀[安裝說明](https://github.com/AbanteAI/mentat?tab=readme-ov-file#install)或觀看安裝[教學](https://www.youtube.com/watch?v=bVJP8hY8uRM)。 您可以閱讀[文件](https://github.com/AbanteAI/mentat?tab=readme-ov-file#-usage)。 他們在 GitHub 上有 2.3k 顆星，並且正在發布`v1`版本。 https://github.com/AbanteAI/mentat Star Mentat ⭐️ --- 27. [FlowGPT](https://github.com/nilooy/flowgpt) - 使用 AI 產生流程圖。 ---------------------------------------------------------------  FlowGPT是一個用ai（gpt-3.5）產生流程圖的工具。 它是使用 Next.js、Langchain、Mermaid 和 DaisyUI 建構的。 您可以閱讀[安裝說明](https://github.com/nilooy/flowgpt?tab=readme-ov-file#installation)。 你可以查看[gif 示範](https://github.com/nilooy/flowgpt?tab=readme-ov-file#flowgpt-is-a-tool-to-generate-flowchart-with-ai-gpt-35)。 它只有 11 次提交，但在 GitHub 上有 238 顆星，並且是使用 TypeScript 建置的。作為一個小專案值得一試。 https://github.com/nilooy/flowgpt Star FlowGPT ⭐️ --- 28. [reor](https://github.com/reorproject/reor) - 自組織人工智慧筆記應用程式。 ----------------------------------------------------------------  迄今為止我見過的最令人興奮的專案之一，特別是因為它在本地執行模型。 Reor 是一款基於人工智慧的桌面筆記應用程式：它會自動連結相關筆記、回答筆記上的問題並提供語義搜尋。 所有內容都儲存在本地，您可以使用類似黑曜石的 Markdown 編輯器來編輯筆記。該專案假設人工智慧思維工具預設應該在本地執行模型。 Reor 站在 Ollama、Transformers.js 和 LanceDB 等巨頭的肩膀上，使 LLM 和嵌入模型都可以在本地執行。也支援連接到 OpenAI 或 OpenAI 相容 API（例如 Oobabooga）。 > 我知道你想知道它怎麼可能是`self-organizing` ？ A。您寫的每個筆記都會被分塊並嵌入到內部向量資料庫中。 b.相關筆記透過向量相似度自動連接。 C。 LLM 支援的問答對筆記語料庫進行 RAG。 d.一切都可以進行語義搜尋。 您可以在這裡觀看演示！  將 Reor 視為一個帶有兩個生成器的 RAG 應用程式：LLM 和人類。在問答模式下，法學碩士會從語料庫中取得檢索到的上下文來幫助回答查詢。 類似地，在編輯器模式下，人們可以切換側邊欄以顯示從語料庫「檢索」的相關註釋。這是透過將當前筆記中的想法與語料庫中的相關想法交叉引用來「增強」您的想法的一種非常有效的方法。 您可以閱讀[文件](https://www.reorproject.org/docs)並從網站[下載](https://www.reorproject.org/)。 Mac、Linux 和 Windows 皆支援。 他們還提供了入門指南，以便幫助您入門。  它們在 GitHub 上有 4.2k 顆星，並使用 TypeScript 建置。 https://github.com/reorproject/reor 星標 reor ⭐️ --- 29. [Amica](https://github.com/semperai/amica) - 讓您在瀏覽器中輕鬆地與 3D 角色聊天。 ---------------------------------------------------------------------  Amica 是一個開源接口，用於透過語音合成和語音辨識與 3D 角色進行互動式通訊。 您可以匯入 VRM 文件，調整聲音以適合角色，並產生包含情緒表達的回應文字。 他們使用 Three.js、OpenAI、Whisper、Bakllava 等進行視覺處理。您可以閱讀[Amica 的工作原理](https://docs.heyamica.com/overview/how-amica-works)及其所涉及的[核心概念](https://docs.heyamica.com/overview/core-concepts)。 您可以克隆該存儲庫並使用它來[開始](https://docs.heyamica.com/getting-started/installation)。 ``` npm i npm run dev ``` 您可以閱讀[文件](https://docs.heyamica.com/)並查看[演示](https://amica.arbius.ai/)，這真是太棒了：D  您可以觀看這段簡短的影片，了解它的功能。 https://www.youtube.com/watch?v=hUxAEnFiXH8 Amica 使用 Tauri 建立桌面應用程式。 他們在 GitHub 上有 400+ Stars，而且看起來非常容易使用。 https://github.com/semperai/amica Star Amica ⭐️ --- 30.[繼續](https://github.com/continuedev/continue)- 使您能夠建立人工智慧軟體開發系統。 -------------------------------------------------------------------  繼續讓開發人員保持流動。我們的開源 VS Code 和 JetBrains 擴充功能可讓您輕鬆建立自己的模組化 AI 軟體開發系統並進行改進。 它們有很多很棒的功能，讓我們看看其中的一些： > 輕鬆理解程式碼部分。  > 選項卡可自動完成程式碼建議。  > 詢問有關您的程式碼庫的問題。  > 快速使用文件作為上下文。  > 立即了解終端錯誤。  > 使用斜槓指令開始操作。  > 重構您正在編碼的函數。  了解所有[功能](https://docs.continue.dev/how-to-use-continue)。 您必須從市場安裝[VSCode 擴展](https://marketplace.visualstudio.com/items?itemName=Continue.continue)，然後閱讀[快速入門指南](https://docs.continue.dev/quickstart)。 您可以閱讀[文件](https://docs.continue.dev/intro)。 它們在 GitHub 上擁有超過 10k 顆星，並使用 TypeScript 建置。 https://github.com/continuedev/continue 星繼續 ⭐️ --- 我從來沒有如此詳細地介紹過這麼多專案！ 我希望這能幫助您創造一些鼓舞人心的東西。 請分享更多專案或任何您想要其他人可以學習的內容！ 請關注 Copilotkit 以獲取更多此類內容。 https://dev.to/copilotkit --- 原文出處：https://dev.to/copilotkit/30-ai-libraries-you-can-use-for-your-next-project-ideas-5ded
隨著我們已經步入新的一年，現在是了解 2024 年 Web 開發趨勢開始受到關注的最佳時機。 回顧 2023 年以來的旋風式更新，以下是一些熱門話題的概述即將到來的一年。  返回自架 ----  多年來，自架是網頁開發人員和公司託管其應用程式的最初和預設方式。開發人員必須更深入地了解 IIS、Nginx 或類似工具的內部工作原理才能託管其 Web 應用程式。隨後出現了雲端服務，與「自己動手做」的方法相比，雲端服務的出現使部署變得輕而易舉。不再有伺服器維護的惡夢，對吧？ 與「標準」自託管解決方案相比，更便宜、更方便的雲端部署意味著在其他地方更容易學習和維護部署。畢竟，你必須擁有一台伺服器，維護它、更新它、解決錯誤等。在生產環境中執行」開始出現就像過去的事情一樣。 但是，這還不足以取代僅將應用程式傳送到某些外部提供者的便利性。不必被迫學習太多有關網路、管理和虛擬機器處理的便利性仍然不存在。更便宜的家庭伺服器的興起，使用網路附加儲存（NAS）及其廣泛的選項，使得處理輕量級使用的自託管需求變得更加容易。我們現在擁有 Proxmox 和 Portainer 等工具，它們使自架您自己的 Docker 容器變得輕而易舉。我們甚至看到 DHH（他是 Ruby on Rails 等產品的建立者）公司[完全轉向](https://world.hey.com/dhh/why-we-re-leaving-the-cloud-654b47e0)自託管模式，這引發了一場大爭論。 重回自有伺服器 -----  在 React 的世界中，有一種強烈的推動力將伺服器作為渲染應用程式的方式。 [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)主要透過 Next.js 帶頭，儘管是一項非常新技術，但在公眾討論中獲得了很大的空間。這些工具正在攪局——一些開發人員認為它們具有開創性，而另一些開發人員則認為它們只是重新發明輪子。無論如何，承諾是更快的頁面加載、更少的客戶端程式碼和更流暢的開發體驗。 React 元件可以在伺服器上專門執行和渲染 React 程式碼，這應該會帶來一些好處，例如更快的頁面載入、更少的發送到客戶端的程式碼以及更好的開發人員體驗。 DX 的一大優點是直接從元件本身安全地存取資料庫層，而不需要 API。 [HTMX](https://htmx.org/)是另一個因其伺服器優先的資料渲染方法而受到歡迎的程式庫，儘管它正在尋求一種更簡單的方法來吸引開發人員。 重回 SPA ------  等等，這不是有點矛盾嗎？雖然伺服器端渲染正在蓬勃發展，但也有一個堅實的陣營正在完善優秀的單頁應用程式 (SPA) 方法。主要原因是我們在嘗試伺服器優先方法方面走得太遠，以至於我們忘記了並非所有應用程式都應該駐留在伺服器上。有些可能是高度動態的，帶有大量複雜的用戶端驗證，或者您只是想將舊的 Create-React-App 架構遷移到 Vite。 順便說一句，如果您想知道 SPA 到底是什麼以及我什麼時候應該使用它而不是 React 伺服器元件，請讓我快速解釋一下。單頁應用程式 (SPA) 是一種 Web 應用程式，它最初僅加載單個 Web 文件，然後動態更新同一頁面上的內容，而無需重新加載整個頁面。 SPA 透過重寫現有網頁而不是從伺服器載入全新頁面來與使用者互動。 Remix SPA 模式是較新的 SPA 方法的範例之一。它使用 Vite 建立基本上是 React Router 和 Vite 的設置，並具有附加的 Remix 特定功能，例如基於文件的路由等。 利用 Vite 為使用者提供 SPA 體驗的 React 框架的另一個例子是[Wasp——一個針對 React 和 Node.js 的全端框架，大大減少了樣板檔案](https://github.com/wasp-lang/wasp)。儘管它是一個全端框架，但它專注於使用 Node.js 伺服器部署客戶端 React 應用程式的標準化方法，以盡可能實現可移植。透過這種方法，您幾乎可以在任何地方部署您的應用程式，也可以自行託管它，這也是我們之前在本文中提到的一件事。  為了更快啟動，它還具有[Open SaaS - 一個適用於 React 和 Node.js 的 100% 免費開源樣板啟動器](https://github.com/wasp-lang/open-saas)。只需克隆它，即可獲得具有身份驗證、計費、開放 AI API、用戶儀表板等功能的工作應用程式！ ### 覺得這篇文章有用嗎？ 我們在[Wasp](https://wasp.sh/)正在努力建立這樣的內容，更不用說建立一個現代的開源 React/NodeJS 框架了。 表達您支援的最簡單方法就是為 Wasp 儲存庫加註星標！ 🐝 但如果您可以查看[儲存庫](https://github.com/wasp-lang/wasp)（用於貢獻，或只是測試產品），我們將不勝感激。點擊下面的按鈕給黃蜂星一顆星並表示您的支持！  https://github.com/wasp-lang/wasp ⭐️ 感謝您的支持 💪 低級語言的興起 -------  暫時離開 JavaScript 的世界，我們發現許多低階語言進入主流的例子，尤其是在 JavaScript 工具方面。這一趨勢在過去幾年中已經開始，並且應該會持續到 2024 年及以後。當 JavaScript 生態系統開始蓬勃發展時，出現了許多使用 JavaScript 建立的出色工具，這使得開發人員可以更輕鬆地為它們做出貢獻，並允許他們建立自己的插件並根據自己的喜好進行自訂。 我們應該對此感到興奮的一個重要原因是，與基於 JS 的工具相比，這些工具為開發人員帶來的效能。 SWC（Speedy Web Compiler）和 Turbopack（Vercel 自稱為 Webpack 的繼承者）等工具都是用 Rust 建構的。另一方面，Bun，它是一個帶有 Zig 的一體化 JavaScript 工具包。它不僅使用戶能夠將其用作預設的 JavaScript 執行時，還可以用作捆綁器、測試執行器和與 Node.js 相容的套件管理器。很棒的是，許多新工具不會消除與預先存在的概念的兼容性，這使得轉換相對容易。 結論 -- 與所有事情一樣，我們應該對所有預測和潛在趨勢持保留態度。人們很容易被當今不斷出現的新技術和工具的炒作沖昏頭。如果你仔細閱讀這篇文章，你可能會想「好吧，人工智慧在哪裡？」。我故意不包含任何基於人工智慧的預測，以提高人們對行業中被忽視的其他酷發展和趨勢的認識。 您如何看待這些趨勢？你也注意到他們了嗎？或者更好，自己做一些這樣的事情？請在下面的評論部分告訴我們並分享您的意見！ --- 原文出處：https://dev.to/wasp/web-development-trends-we-will-see-in-2024-55pi
我來自世界各地的 DevOps 領域，在加入我現在的公司 SingleStore 之前，AI/ML 世界對我來說是全新的。我加入已經 8 個月了，一切進展得非常順利。從各種部落格、教程、工具等中學習AI/ML 中所有新的很酷的東西。這些要求的工具。順便說一句，我們有很多內容和材料可以開始，但我想看看行業之外還發生了什麼，並做我自己的研究。 正如我所說，已經過去 8 個月了。在我在這裡的整個旅程中，從舉辦網路研討會、在會議上發言，到撰寫有關新興技術趨勢的博客，我偶然發現了一系列不可或缺的工具。在本文中，我將分享這些工具，從新興程式語言到 AI 框架，再到向量資料庫，再到簡化 AI/ML 應用程式建立的開發工具。***讓我們開始吧。*** 1. 程式語言 ------- ### [翅膀](https://git.new/winglang)  我嘗試使用多種語言，但發現大多數語言都被誇大了。是的，就在那時，我遇到了一個正在討論這種為雲端和人工智慧應用程式設計的新語言的社群。那是我第一次嘗試 Wing 程式語言，發現它令人印象深刻。 你可能會問 - 為什麼是 Wing？ Wing 提供了一個統一的程式設計模型，將基礎架構和應用程式程式碼整合到一個有凝聚力的框架內。這種獨特的方法使開發人員能夠簡化他們的工作流程，消除不斷切換情境的需要，並顯著提高生產力和創造力。 這正是您在建立 AI/ML 應用程式時所需要的，更專注於核心功能而不是底層基礎設施。我遇到了他們的 Open AI Joker 應用程式，它可以產生笑話並將其翻譯成不同的語言。整個框架的流暢程度令人驚嘆。請注意，Wing 仍在積極開發中。 您可以使用最少的程式碼建立任何 AI/ML 應用程式。讓我們看看 Joker 應用程式是如何運作的。該應用程式使用 OpenAI 生成笑話並將其翻譯成不同的語言。有一個喜劇演員，一個開放人工智慧助手，可以產生笑話，每當它生成笑話時，笑話就會被放入/儲存在一個桶中。有兩個譯者，西班牙語和希伯來語。這些譯者訂閱一個主題。每當有笑話產生時，他們都會收到並翻譯。而且，他們也把翻譯好的笑話丟進桶裡了。很簡單。 以下是此範例的技術概述圖，展示如何將[OpenAI 的 API 與 Wing](https://github.com/winglang/examples/tree/main/examples/openai-joker)結合使用。  如果您還沒有嘗試過 Winglang，您可以透過簡單的命令輕鬆嘗試 ``` npm install -g winglang ``` 使用 git clone 指令將程式碼複製到本機 ``` git clone https://github.com/winglang/wing.git ``` 轉到範例資料夾，然後在終端機中執行以下命令： ``` npm install wing it ``` 呼叫“START HERE”函數，並在“Joke Store”中查看結果。 2.向量資料儲存與分析工具 ------------- ### SingleStore 和筆記本  對於 AI/ML 應用程式，您需要一個資料庫來儲存非結構化資料。我大約 8 個月前加入 SingleStore，當時我對 AI/ML 和向量資料庫還是個新手。隨著圍繞向量資料庫的大肆宣傳，我開始了解向量資料庫，並發現 SingleStore 作為向量資料庫如何為行業帶來驚人的補充。它不僅用於儲存向量資料，而且該公司還使用 SingleStore 進行即時分析。現在，看看支援即時分析的向量資料儲存的力量，這是一種超級力量。 下面我要來跟大家介紹一下SingleStore；它是一個基於雲端的資料庫管理系統（RDBMS），專為資料密集型應用程式而設計。它以其資料攝取、事務處理和查詢處理的速度而聞名。 SingleStore 早在 2017 年就開始支援向量儲存。 SingleStore 的 Notebook 功能基於流行的 Jupyter Notebook，廣泛應用於資料科學和機器學習社群。 SingleStore Notebook 擴展了 Jupyter Notebook 的功能，使資料專業人員能夠輕鬆使用 SingleStore 的分散式 SQL 資料庫，同時在語言和資料來源方面提供出色的可擴充性。 [試試 SingleStore 並獲得價值 600 美元的免費積分](https://www.singlestore.com/cloud-trial/?utm_medium=referral&utm_source=pavan&utm_term=devto&utm_content=aimltools)。 3. 資料操作與分析工具 ------------ 我只是喜歡處理資料並使用公開的資料集（例如葡萄酒資料集、泰坦尼克號資料集等）進行不同的實驗。我著迷地看到 NumPy 和 Pandas 在資料探索和提出不同解決方案方面的能力。 Pandas 和 NumPy 是 Python 生態系統中用於資料分析和科學計算的兩個最受歡迎的函式庫。 ### 熊貓和 NumPy  任何 AI/ML 應用程式的核心都是資料。 Pandas 和 NumPy 等工具是 Python 中資料操作和分析的基礎。 Pandas 提供了用於操作數值表和時間序列的高級資料結構和操作，使其成為在用於訓練模型之前預處理和清理資料的理想選擇。 NumPy 增加了對大型多維陣列和矩陣的支持，以及對這些陣列進行操作的大量數學函數的支持，這對於資料預處理和模型訓練中的效能密集型操作至關重要。 4. 人工智慧與機器學習框架 -------------- 我使用過 TensorFlow、PyTorch，最近接觸過 LangChain 和 LlamaIndex，對它們幫助 AI/ML 工程師使用 API、向量儲存功能、邏輯、推理等建立強大應用程式所需的所有工具包的能力印象深刻。讓我們一一來看看他們的超能力。 ### TensorFlow 和 PyTorch  由 Google 開發的[TensorFlow](https://www.tensorflow.org/)和由 Facebook 開發的[PyTorch](https://pytorch.org/)是用於建立和訓練複雜機器學習模型的兩個最受歡迎的框架。 TensorFlow 以其靈活性和強大的可擴展性而聞名，使其適用於研究原型和生產部署。 PyTorch 因其易用性、簡單性和動態計算圖而受到讚譽，可以更直觀地編碼複雜的 AI 模型。這兩個框架都支援廣泛的人工智慧模型，從簡單的線性回歸到複雜的深度神經網路。 ### 浪鏈  [LangChain](https://www.langchain.com/)由 Harrison Chase 開發，於 2022 年 10 月首次亮相，它是一個開源平台，旨在建立由大型語言模型支援的強大應用程式，例如 ChatGPT 等聊天機器人和各種客製化應用程式。 Langchain 致力於為資料工程師提供一個包羅萬象的工具包，以便在聊天機器人、自動問答、文字摘要等各種用例中利用法學碩士。 ### 駱駝指數  [LlamaIndex](https://www.llamaindex.ai/)是一種先進的編排框架，旨在增強 GPT-4 等 LLM 的功能。雖然法學碩士本質上很強大，並且接受過大量公共資料集的培訓，但他們通常缺乏與私有或特定領域資料互動的方法。 LlamaIndex 彌補了這一差距，提供了一種結構化的方式來攝取、組織和利用各種資料來源——包括 API、資料庫和 PDF。透過將這些資料索引為針對法學碩士最佳化的格式，LlamaIndex 促進了自然語言查詢，使用戶能夠無縫地與其私有資料進行對話，而無需重新訓練模型。 5.深度學習模型 -------- 作為初學者，我一直在尋找簡單而靈活的東西來開發深度學習模型，就在那時我發現了 Keras。許多 AI/ML 專業人士欣賞[Keras](https://keras.io/)在原型設計和開發深度學習模型方面的簡單性和高效性，使其成為首選，特別是對於初學者和需要快速開發的專案。 ### 難的  對於尋求高級神經網路 API 的開發人員來說，現在已整合到 TensorFlow 中的 Keras 提供了更簡單的介面來建立和訓練深度學習模型。 Keras 抽象化了建構神經網路的大部分複雜性，使其易於初學者使用，同時仍足夠強大以進行研究。 6. 開發和版本控制平台 ------------ ### GitHub 和 DVC  由於模型開發的迭代性質和對可重複性的需求，協作和版本控制在 AI/ML 開發專案中至關重要。 [GitHub](https://github.com/)是領先的原始碼管理平台，允許團隊協作處理程式碼、追蹤問題和管理專案里程碑。 [DVC（資料版本控制）](https://dvc.org/)透過處理 Git 無法有效管理的大型資料檔案、資料集和機器學習模型來補充 Git，從而實現對 AI 專案中使用的資料和模型檔案的版本控制。 7. AI模型部署與監控 ------------ 我建立了一些 AI/ML 應用程式，但是如何以及在哪裡部署它們？這就是我的想法跳到這個類別中的兩個主要工具：Docker 和 Kubernetes。正如我之前所說，我來自世界各地的 DevOps 地區，我已經使用過這些工具，並且知道它們是如何運作的。 Docker 將您的應用程式容器化，而 Kubernetes 用於大規模部署您的應用程式。 ### Docker 和 Kubernetes  將人工智慧模型部署到生產中需要能夠打包應用程式並大規模管理它們的工具。 [Docker](https://www.docker.com/)透過容器化AI應用程式來簡化其部署，確保應用程式在任何環境中順利執行。 [Kubernetes](https://kubernetes.io/)是 Docker 容器的編排系統，可以自動部署、擴展和管理容器化應用程式，這對於需要跨多個伺服器或雲端環境進行擴展的 AI 應用程式至關重要。 8.人工智慧雲端平台 ---------- 如果沒有 AWS、Google 和 Azure 等雲端平台，您就無法擴展任何東西。雖然 AWS 是我最喜歡的，但我也探索了其他選項，並在此提到了所有三個主要雲端供應商。 ### AWS、Google雲端和 Azure  Amazon Web Services (AWS)、Google Cloud Platform (GCP) 和 Microsoft Azure 等雲端平台提供了一系列 AI 和機器學習服務，這些服務抽象化了訓練和部署 AI 模型所需的大部分基礎架構。這些平台為機器學習模型訓練、部署和監控提供託管服務，以及可擴展以滿足任何人工智慧專案需求的大量運算資源。 9. 專門的人工智慧開發工具 -------------- 雖然我仍然更喜歡使用 SingleStore Notebook 功能，但我知道大多數人已經在使用 Jupyter Notebook 進行資料探索和分析。我有時會使用 Jupyter Notebooks，另一個更有趣的工具是 MLflow，它將幫助您完成端到端的 ML 工作流程。 ### Jupyter 筆記本  對於探索性資料分析、模型開發和文件編制，Jupyter Notebooks 是不可或缺的工具。它們允許開發人員建立和共享包含即時程式碼、方程式、視覺化和敘述文字的文件，使其成為協作人工智慧研究和開發的絕佳工具。 ### ML流  [MLflow](https://mlflow.org/)是一個用於管理端對端機器學習生命週期的開源平台。它包括實驗追蹤、模型版本控制和部署等功能，使開發人員能夠追蹤和比較實驗、將模型打包成可重複的執行，以及管理跨多個環境的模型部署。 ### 最後的一些想法 人工智慧/機器學習領域正在像海洋一樣不斷發展。每天我們都會看到一種或另一種語言模型帶著許多期望首次亮相。有許多令人驚嘆的開發工具仍然可以包含在這個清單中，但從我個人的經驗來看，我相信這些工具是每個 AI/ML 工程師開始建立他們的 AI/ML 應用程式的良好開端。 讓我知道您目前在 AI/ML 領域最喜歡的工具是什麼。 --- 原文出處：https://dev.to/pavanbelagatti/my-favorite-devtools-to-build-aiml-applications-3c0c
算法是計算的命脈。它們是電腦解決問題、分析資料和做出決策所遵循的逐步指令。就像食譜一樣，它們將複雜的任務分解為易於管理的程式。理解這些基本演算法是掌握電腦科學和程式設計的基石。 > [什麼是演算法](https://github.com/m-mdy-m/algorithms-data-structures/tree/main/1.IntroductionToAlgorithmsAndProblemSolving) 1. 搜尋演算法： --------- ### 什麼是搜尋？ 搜尋是在資料集合中定位特定元素或專案的基本過程。此資料集合可以採用各種形式，例如陣列、列表、樹或其他結構化表示。搜尋的主要目標是確定資料中是否存在所需元素，如果存在，則辨識其精確位置或檢索它。它在各種計算任務和現實應用中發揮重要作用，包括資訊檢索、資料分析、決策過程等。 ### 介紹搜尋演算法 所有搜尋演算法都使用搜尋關鍵字來繼續執行該過程。搜尋演算法預計會返回成功或失敗狀態，通常以布林 true/false 表示。可以使用不同的搜尋演算法，其效能和效率取決於資料及其使用方式。 線性搜尋演算法被認為是所有搜尋演算法中最基本的。最好的也許是二分搜尋。還有其他搜尋演算法，例如深度優先搜尋演算法、廣度優先演算法等。搜尋演算法中使用的符號是 O(n)，其中 n 是完成的比較次數。它給出了演算法在給定條件下所需執行時間的漸近上限的概念。 搜尋演算法中的搜尋案例可以分為最佳情況、平均情況和最壞情況。在某些演算法中，所有三種情況可能漸近相同，而在其他一些演算法中可能存在很大差異。搜尋演算法的平均行為有助於確定演算法的有用性。 > 摘要： 搜尋演算法是用於在資料集合中定位特定資料的逐步過程。它被認為是計算中的基本過程。在電腦科學中，搜尋資料時，快速應用程式和較慢應用程式之間的差異通常在於使用正確的搜尋演算法。 ### 術語： - **目標元素：**這就是你要尋找的寶藏！這是您想要在集合中尋找的特定資料。想像搜尋電話簿 - 目標元素是特定人的電話號碼。 - **搜尋空間：**將其視為可能隱藏針的大海撈針。它代表您正在搜尋的整個資料集合。這可以是數字陣列、名稱列表或更複雜的資料結構。 - **複雜度：**這是指搜尋演算法所需的工作量。這就像衡量圖書館員需要做多少工作才能找到你的書。複雜性通常以時間（找到目標需要多長時間）和空間（演算法需要多少額外記憶體）來衡量。 - **確定性與非確定性：**搜尋演算法可以像遵循食譜（確定性）或進行有根據的猜測（非確定性）。確定性演算法始終遵循相同的清晰步驟，例如二分搜尋，它將搜尋空間一分為二。非確定性演算法（例如線性搜尋）可能需要在最壞的情況下檢查整個集合。 ### 實際應用 - **資訊檢索：**想像在網路上搜尋特定的食譜。像Google這樣的搜尋引擎利用複雜的搜尋演算法來篩選大量資料集，為網站和內容建立索引。當您輸入查詢時，這些演算法會辨識與您的搜尋字詞最相關的網頁，並在幾分之一秒內提供您要尋找的資訊。 - **資料庫系統：**資料庫儲存大量訊息，從客戶記錄到金融交易。搜尋演算法是高效資料檢索的支柱。當您在資料庫管理系統中提交查詢時，搜尋演算法會快速找到符合您條件的特定記錄，從而節省您的時間和精力。 - **電子商務：**線上購物因高效搜尋而蓬勃發展。電子商務平台使用搜尋演算法來幫助您找到完美的產品。它們允許您根據價格、品牌或顏色等各種標準進行過濾和搜尋。在幕後，搜尋演算法為這些過濾器提供支持，精確定位滿足您偏好的產品，使您的購物體驗順暢高效。 - **網路：**網路是一個由互連設備組成的複雜網路。搜尋演算法在有效路由資料包方面發揮著至關重要的作用。它們可協助確定訊息在網路上傳輸的最佳路徑，確保您的視訊通話或線上遊戲順利運作。 - **人工智慧（AI）：**人工智慧正在為許多領域帶來革命性的變化。搜尋演算法是人工智慧應用的基本工具。它們使人工智慧系統能夠解決問題、做出決策，甚至玩國際象棋等遊戲。透過有效地搜尋大量資料並辨識模式，搜尋演算法有助於人工智慧背後的智慧。 - **模式辨識：**模式辨識允許電腦辨識和理解資料中的模式，例如圖像、語音或手寫。搜尋演算法對於模式辨識很有幫助。它們可協助電腦將新資料與現有模式進行匹配，從而實現照片中的臉部辨識或虛擬助理的語音辨識等應用。 ### 演算法類型：  **1. `Linear Search` ：** 想像一下，在一個雜亂無章的書架中尋找一本特定的書。線性搜尋模仿了這種方法。這是一種簡單的方法，可以**逐項**檢查集合中的每個專案，直到找到目標元素（您想要的書）。 **它的工作原理如下：** 1. 搜尋從集合中的第一項開始。 2. 此演算法將目標元素與目前專案進行比較。 ``` * If they match, the search is successful, and the algorithm returns the location (index) of the target element. ``` ``` * If they don't match, the algorithm moves on to the next item in the collection. ``` 3. 這種比較和移動的過程將持續下去，直到找到目標元素或耗盡整個集合。 **例子：** 讓我們在未排序清單中搜尋值「25」：\[10, 4, 12, 25, 18, 7\]。 - 搜尋從第一個元素 (10) 開始。由於 10 不是 25，我們繼續。 - 我們將目標 (25) 與下一個元素 (4) 進行比較。沒有匹配項，所以我們繼續。 - 重複此過程，直到到達索引 3 處的元素「25」。 **優勢：** - 易於理解和實施，使其成為初學者的好選擇。 - 適用於未排序的資料，在各種情況下提供靈活性。 **弱點：** - 對於大型資料集來說速度很慢。隨著集合大小的增加，搜尋時間也會成比例增加，導致海量資料集效率低。 > 怎麼運作的 ：  **2. `Binary Search` ：** 二分搜尋在**排序資料**上蓬勃發展。想像一下在一本精心組織的字典中搜尋特定單字。在這種情況下，二分搜尋比線性搜尋快得多。它透過重複地將已排序的集合分成兩半來進行操作。策略如下： 1. 此演算法首先將目標元素與集合的中間元素進行比較。 2. 如果目標元素等於中間元素，則搜尋成功，演算法會傳回中間元素的索引。 3. 如果目標元素**小於**中間元素，則在剩餘集合的**左半部**（不包括中間元素）繼續搜尋。 4. 如果目標元素**大於**中間元素，則在剩餘集合的**右半部**繼續搜尋。 5. 在集合的縮小範圍的一半上重複步驟 1-4，直到找到目標元素或搜尋空間減少到單一元素（與目標不符）。 **例子：** 讓我們在排序清單中搜尋值「18」：\[4, 7, 10, 12, 18, 25\]。 - 中間的元素是 12。 - 現在，右半部的中間元素是18。目標元素位於索引 4 處。 **優勢：** - 對於大型排序資料集，比線性搜尋快得多。透過在每次比較時消除一半的剩餘元素，二分搜尋可以快速縮小搜尋空間。 **弱點：** - 要求預先對資料進行排序，如果資料尚未組織，則加入額外的步驟。 - 不適合未排序的資料。二分搜尋策略依賴資料的排序性質，以在每次迭代期間有效地消除一半的可能性。 > 怎麼運作的 ：  --- 2. 排序演算法： --------- ### 什麼是排序？ 排序是指根據元素上的比較運算子對給定陣列或元素列表進行重新排列。比較運算子用於決定對應資料結構中元素的新順序。排序意味著將所有元素按升序或降序重新排序。 ### 介紹 在計算機科學中，排序演算法是將列表中的元素依序排列的演算法。最常用的順序是數字順序和字典順序，以及升序或降序。高效排序對於優化需要輸入資料位於排序清單中的其他演算法（例如搜尋和合併演算法）的效率非常重要。排序對於規範化資料和產生人類可讀的輸出通常也很有用。 形式上，任何排序演算法的輸出必須滿足兩個條件： 輸出是單調順序的（根據所需的順序，每個元素不小於/大於前一個元素）。 1. 輸出是輸入的排列（重新排序，但保留所有原始元素）。 2. 為了獲得最佳效率，輸入資料應儲存在允許隨機存取的資料結構中，而不是僅允許順序存取的資料結構中。 > 摘要：排序演算法是一組指令，它將陣列或列表作為輸入並將專案排列成特定的順序。排序最常見的是數字或字母（或字典）順序，並且可以按升序（AZ，0-9）或降序（ZA，9-0）。 ### 術語： - **就地分類：**想像一下重新整理抽屜裡的衣服而不把所有東西都拿出來。就地排序的工作原理類似。這些演算法透過修改現有清單本身內元素的順序來對資料進行排序，從而需要最少的額外空間。例如選擇排序、冒泡排序和插入排序。 - **內部排序：**這是指完全在電腦主記憶體 (RAM) 內執行的排序演算法。整個資料集可以一次載入到記憶體中，使其適合中小型資料集。堆排序、冒泡排序和合併排序等內部排序演算法通常用於記憶體資料操作。 - **外部排序：**當處理超出主存容量的海量資料集時，外部排序就發揮作用。這些演算法將大型資料集分解為較小的區塊，在磁碟（輔助儲存）上對它們進行排序，然後按特定順序將排序後的區塊合併在一起。合併排序是外部排序演算法的一個流行範例。 - **穩定排序：**想像一下按標題對書籍清單進行排序，但您也希望保留具有相同標題的書籍最初列出的順序。穩定的排序演算法在排序過程中保持具有相等鍵（值）的元素的相對順序。歸併排序和插入排序是穩定排序演算法的範例。 - **不穩定排序：**並非所有排序演算法都優先考慮順序保留。不穩定的排序演算法僅專注於實現所需的排序順序（例如，升序或降序），並且可能會打亂具有相同鍵的元素的相對位置。快速排序和堆排序是不穩定排序演算法的例子。 ### 排序演算法的特徵： - **時間複雜度：**這是指排序演算法完成其工作所需的時間（以步驟或比較而言）。我們通常在三種情況下分析時間複雜度： ``` * **Worst-case:** This represents the maximum amount of time the algorithm could take for a particular data size, considering the worst possible input scenario. ``` ``` * **Average-case:** This reflects the average time the algorithm takes across various random inputs of the same size. ``` ``` * **Best-case:** This represents the minimum amount of time the algorithm could take for a specific data size, considering the most favorable input scenario (e.g., data already partially sorted). ``` - **空間複雜度：**這是指排序演算法在原始資料所佔用的空間之外執行其操作所需的額外記憶體量。就地排序演算法透過在現有記憶體分配中操作資料來使用最少的額外空間，而某些演算法在排序過程中可能需要額外的臨時儲存。 - **穩定性：**此屬性決定排序演算法是否保留排序輸出中具有相等值的元素的原始順序。穩定的排序演算法維護這些元素的相對位置，這在特定應用中可能很重要。例如，如果您按姓名對客戶記錄清單進行排序，並且兩個客戶具有相同的姓名，您可能需要穩定的排序來維護它們最初列出的順序（例如，按帳戶建立日期）。 - **就地排序：**如前所述，就地排序演算法非常節省內存，因為它們透過修改原始列表本身來對資料進行排序，從而需要最少的額外空間。當處理大型資料集或記憶體有限時，這可能是有利的。 - **適應性：**一些排序演算法可以適應它們正在排序的資料的特徵。自適應排序演算法可以利用資料中預先存在的順序來提高其效能。例如，如果資料已經部分排序，自適應演算法可能會調整其方法以利用該部分順序並實現更快的排序。 ### 排序演算法的應用： - **搜尋演算法：**想像在電話簿中搜尋特定聯絡人。排序演算法是二分搜尋等高效搜尋演算法的無聲夥伴。透過確保電話簿條目按字母順序組織（排序），二分搜尋可以比透過未排序清單的線性搜尋更快找到您的聯絡人。 - **資料管理：**資料是現代計算的命脈，但有效管理資料需要組織。排序演算法在資料管理中起著至關重要的作用。當您按名稱、日期或大小對文件清單進行排序時，您可以更輕鬆地找到所需的特定文件。此外，排序的資料有助於更快地檢索和分析，從而節省您的時間和精力。 - **資料庫最佳化：**資料庫儲存大量訊息，從客戶記錄到金融交易。排序演算法顯著提高了資料庫查詢的效能。當您在電子商務資料庫中搜尋特定產品時，資料庫可能會根據您的搜尋條件（例如價格）對產品清單進行排序，以快速提供最相關的結果。 - **機器學習：**機器學習演算法從資料中學習以進行預測或分類。然而，需要準備好資料才能進行有效的學習。排序演算法通常用於資料預處理步驟，以在將資料輸入機器學習模型之前組織和建構資料。這可以顯著提高學習過程的準確性和效率。 - **資料分析：**資料分析就是從資訊中提取見解。排序演算法在這個過程中起著至關重要的作用。透過按各種屬性（例如日期、位置、客戶人口統計）對資料進行排序，您可以辨識在未排序的資料集中可能不易明顯的模式、趨勢和異常值。這使得資料分析師能夠更深入地了解資料，為金融、行銷和科學研究等各個領域的更好決策提供資訊。 - **作業系統：**作業系統管理電腦的資源。排序演算法適用於各種作業系統任務。例如，排序演算法可用於確定 CPU 任務的優先權、有效管理記憶體分配或以目錄結構組織文件，從而確保電腦系統的平穩運作。 > 這些只是排序演算法如何滲透到我們日常生活中的幾個例子。 ### 簡單解釋： 想像一下，你有一個雜亂的書架，裡面擺滿了各種主題的書。您想要按類型來組織它們（對它們進行排序）。以下是應用於此場景的排序演算法背後的主要概念和邏輯： 1. **比較：**您一次拿兩本書，並根據它們的類型進行比較（就像比較清單中的兩個元素）。 2. **交換：**如果類型不符合所需的順序（例如，歷史書放在小說之前），則交換它們在書架上的位置（就像重新排列清單中的元素一樣）。 3. **重複：**您繼續一次比較和交換兩本書，直到所有書籍按類型按所需順序排列（清單中的所有元素都根據所選標準排序）。 ### 排序演算法:: **1. 冒泡排序** **概念：**冒泡排序是一種簡單的排序演算法，它迭代列表，反覆比較相鄰元素，如果順序錯誤則交換它們。想像氣泡上升到液體表面 - 具有較大值的元素每次通過都會「冒泡」到清單中。這個過程一直持續到不需要交換為止，這表示清單已排序。 **解釋：** 想像一下將一堆亂七八糟的玩具進行分類。冒泡排序的工作原理如下： 1. **進行多次遍歷：**您多次瀏覽玩具清單。 2. **比較鄰居：**在每一遍中，您將每個玩具與其鄰居進行比較。如果第一個玩具更大（或排序術語中的“更高”），則交換它們的位置。 3. **泡泡上升：**每次交換時，較大的玩具（如泡泡）往往會移向清單的末端。 4. **繼續直到沒有交換：**您在整個清單中重複這些比較和交換，直到完成一次完整的傳遞而無需交換。這表示列表已排序。 **時間複雜度：**不幸的是，在最壞情況和平均情況下，冒泡排序的時間複雜度都是 O(n^2)。這意味著排序時間隨著元素數量 (n) 的二次方增加。對於大型資料集，冒泡排序變得非常低效。 **2.選擇排序** **概念：**選擇排序也遍歷列表，但它不是直接比較相鄰元素，而是專注於尋找未排序部分中的最小（或降序最大）元素。然後，該元素與未排序部分中的第一個元素交換，有效地將其放置在正確的排序位置。重複此過程，在每次通過時逐漸將未排序部分減少一個位置。 **解釋：** 想像一下根據身高安排學生拍照。選擇排序的工作原理如下： 1. **尋找最矮的（或最高的）：**在每次遍歷中，您搜尋該行的整個未排序部分以尋找最矮的學生（或按降序排列最高的學生）。 2. **與第一個學生交換：**一旦找到最矮的學生，就可以與未排序部分中的第一個學生交換他們的位置，有效地將他們放在行開頭的正確排序位置（最矮的在前面） 。 3. **重複並減少未排序部分：**繼續此過程，將交換的元素視為已排序部分的開頭，並在剩餘的未排序部分中搜尋最小元素。 **時間複雜度：**與冒泡排序類似，選擇排序在平均情況和最壞情況下的時間複雜度均為 O(n^2)。這意味著排序時間隨元素數量呈二次方增長，從而導致大型資料集效率低下。 **3.插入排序** **概念：**插入排序的工作原理是維護一個已排序的子列表，並迭代地將未排序部分中的元素插入到子列表中的正確位置。想像一下用塊建造一座塔，但您只能將它們一一加入，並且希望保持塔按高度排序。插入排序就像策略性地將每個新區塊放置在不斷增長的排序塔中的正確位置。 **解釋：** 想像一下按高度對書架上的書籍進行排序。插入排序的工作原理如下： 1. **從單一排序元素開始：**從一個空的排序子清單開始（就像書架上只有一本書）。 2. **從未排序的部分中取出一個元素：**您從未排序的堆中挑選一本書。 3. **移動與插入：**您可以將新書與已排序子清單中的每本書進行比較，從右端開始。如果新書較短（或按降序排列較高），則可以移動現有書籍以騰出空間，並將新書插入到正確的位置以保持排序順序。 4. **重複並增長已排序的子清單：**繼續此過程，從未排序的堆中獲取元素，將它們與已排序的子列表進行比較，並將它們插入到正確的已排序位置。這會逐漸增長排序的子列表，直到合併所有元素。 **時間複雜度：**插入排序適用於部分排序的資料。在一般情況下，對於已經排序的資料，它的時間複雜度為 O(n)，因此非常有效率。然而，對於完全隨機的資料（最壞情況），它可以回落到 O(n^2)，類似於冒泡排序和選擇排序。 **4. 歸併排序** **概念：**合併排序採用巧妙的「分而治之」策略來有效地對清單進行排序。它將問題分解為更小、更易於管理的子問題，然後按排序順序將解決方案重新組合在一起。 **解釋：** 想像一下，你有一支龐大的軍隊，需要按照身高來組織。歸併排序的工作原理如下： 1. **劃分：**將軍隊（列表）分成越來越小的組（子列表），直到每組只有一名士兵（元素）。這就像將一個大問題分解成更小、更容易解決的部分。 2. **征服：**由於現在每個子清單只有一名士兵（元素），因此它已被視為「已排序」。這是分而治之方法的基本情況。 3. **合併：**現在到了合併部分。您可以策略性地將已排序的子清單重新組合在一起，但以特定的方式。您比較每個子清單中的第一個士兵（元素），並將較短的士兵（較小的元素）放入最終的排序清單中。您不斷重複這種比較和放置，直到兩個子清單中的所有士兵（元素）都合併到最終的排序清單中。 4. **重複：**您繼續遞歸地應用這種分而治之的策略，直到整個原始軍隊（列表）從最短到最高（最小到最大）排序。 **時間複雜度：**合併排序的美妙之處在於它的時間複雜度。在平均情況和最壞情況下，其複雜度為 O(n log n)。這意味著對清單進行排序所需的時間隨著元素數量(n) 呈對數增長，這比冒泡排序、選擇排序或插入排序（其複雜度為O(n^2)）要快得多。 **5. 快速排序** **概念：**快速排序是另一種分而治之的排序演算法，但採用不同的方法。它依賴一個被稱為“樞軸”的策略性選擇元素來對列表進行分區並解決排序問題。 **解釋：** 想像一下，你的書架上堆滿了雜亂的書。快速排序的工作原理如下： 1. **選擇樞軸：**您從書架中選擇一本書（樞軸）。可以透過不同的方式選擇該主元，但通常它是清單中的第一個或最後一個元素。 2. **分區：**依樞軸重新排列書架上的書。類型按字母順序排列在樞軸類型之前的書籍位於一側，類型按字母順序排列在樞軸類型之後的書籍位於另一側。樞軸本身尚未放置。這種劃分有效地將較大的排序問題劃分為兩個較小的子問題。 3. **遞歸地征服：**現在，您將兩個子清單（成堆的書）中的每一個都視為單獨的排序問題。您可以遞歸地將快速排序策略套用到這些子列表，為每個子列表選擇一個新的主元並相應地對它們進行分割。 4. **合併：**兩個子清單排序後，將原始樞軸元素放置在兩個子清單之間正確的排序位置。現在，整個書架（清單）按字母順序排序。 **時間複雜度：**平均而言，快速排序的時間複雜度為 O(n log n)，這使得它對大型資料集非常有效率。然而，其性能可能會根據所選樞軸元件的不同而有所不同。選擇不當的主元（例如，總是排序或部分排序清單中的第一個或最後一個元素）可能會導致O(n^2) 的最壞情況，類似於冒泡排序、選擇排序和插入排序。 --- 3.樹的遍歷演算法： ---------- ### 什麼是樹遍歷？ 樹遍歷是指探索樹資料結構的系統方法。這就像有一個路線圖可以精確地存取鄰裡（樹）中的每個房屋（節點）一次，確保您不會迷路或重新存取同一棟房屋。與可以直接按位置存取元素的簡單資料結構不同，樹需要特定的演算法來導航節點之間的連接。這些遍歷演算法定義了存取每個節點的順序，可讓您對它們包含的資料執行操作，例如搜尋特定值、新增節點或刪除現有節點。遍歷技術有多種，每種技術都有其優點和應用，這使得樹遍歷成為電腦科學中的基本概念。 ### 介紹 樹遍歷，也稱為樹搜尋，是在僅包含樹邊的圖上執行的演算法，該演算法僅存取每個節點一次。此類別中的演算法僅在存取每個節點的順序上有所不同。遍歷樹的兩種經典方法是廣度優先搜尋（bfs），即在進入下一層之前存取同一級別或距根部距離的節點；深度優先搜尋，其中分支中的所有節點或從根到葉的一組路徑在傳遞到下一個分支之前都會被存取。還有其他方法，它們使用啟發式或隨機採樣在樹中移動來加速該過程。 #### 概括： - **目的：**系統探索樹資料結構，確保每個節點僅被存取一次。 - **優點：**支援搜尋特定資料、插入新節點或刪除現有節點等操作。 - **主要區別：**演算法分為兩種主要方法： ``` * **Breadth-First Search (BFS):** Visits nodes level by level, starting from the root and progressing outward. ``` ``` * **Depth-First Search (DFS):** Explores one branch (path) as far as possible before backtracking and exploring another branch. Further variations of DFS exist for specific applications. ``` - **其他技術：**其他方法利用啟發式或隨機取樣來加快遍歷速度。 ### 術語： **1. 樹：**一種分層資料結構，模擬顛倒的樹，其節點（資料點）透過邊（連結）連接。節點可以有零個或多個子節點，形成分支，並最終導致底部的葉節點（沒有子節點的節點）。 **2. 節點：**樹的基本建構塊，包含資料和對其子節點的潛在引用。想像一下附近的一棟房子——它保存資訊（資料）並透過道路（邊緣）連接到其他房子（子節點）。 **3.根節點：**樹中最頂層的節點，作為遍歷演算法的起點。將其視為附近的主屋，從這裡開始探索。 **4.葉子節點：**沒有子節點的節點，代表樹中分支的「末端」。想像位於社區邊緣的房屋，沒有進一步的聯繫。 **5.邊：**樹中兩個節點之間的連接，描述它們之間的關係。想想連接附近房屋的道路。 **6. 遍歷：**僅存取樹中每個節點一次的系統過程。這就像探索整個社區，確保您參觀每棟房屋而不會錯過任何一棟或重新參觀同一棟房屋。 **7.廣度優先搜尋（BFS）：**一種從根開始向外逐階存取節點的遍歷方法。想像一下，透過造訪第一條街道（層）上的所有房屋，然後再前往下一條街道（層）上的房屋來探索社區。 **8.深度優先搜尋（DFS）：**一種遍歷方法，在回溯和探索另一個分支之前，先沿著一個分支（路徑）探索盡可能遠的地方。想像一下，沿著一條路（分支）探索附近區域，直到到達死胡同（葉節點），然後回溯並嘗試另一條路。 DFS 的常見變體包括前序、中序和後序，每種形式都有存取分支內節點的特定順序。 ### 樹遍歷演算法的特點： **1. 只存取每個節點一次：** - 樹遍歷的核心原則是保證樹中的每個節點都被恰好存取一次。這可以防止冗餘處理並確保對樹結構的完整探索。 **2. 探訪順序：** - 雖然每個節點僅被存取一次，但樹遍歷演算法的定義特徵在於它們存取節點的順序。不同的演算法會優先考慮以特定順序探索節點，從而產生不同的遍歷模式。 **3. 遞歸與迭代實作：** - 樹遍歷演算法可以遞歸或迭代地實現。遞歸方法涉及定義在子樹上呼叫自身的函數，模仿樹的層次結構性質。迭代方法利用迴圈和堆疊來管理遍歷過程。 **4.時間與空間複雜度：** - 與任何演算法一樣，樹遍歷方法具有相關的時間和空間複雜度。時間複雜度是指基於樹中節點數 (n) 執行演算法所需的時間量。常見的複雜度包括 O(n)（線性）和 O(n log n)（對數），BFS 和 DFS 變體根據實現的不同具有不同的複雜度。空間複雜度反映了演算法執行所需的額外記憶體量，通常取決於用於遍歷的資料結構（例如堆疊）。 **5.特定於應用的選擇：** - 樹遍歷演算法的選擇在很大程度上取決於手頭上的具體任務。例如，BFS 可能更適合尋找樹中兩個節點之間的最短路徑，而具有變體的 DFS 可用於搜尋特定資料或探索所有可能的路徑。 **6. 不可修改：** - 一般來說，樹遍歷演算法旨在探索現有的樹結構，而不修改樹本身。它們存取節點，對它們包含的資料執行操作，但通常不會更改樹中的連接或資料。 ### 樹遍歷演算法的應用： **1. 檔案系統導航：** - 作業系統使用樹遍歷演算法來導航電腦上的目錄結構。將您的檔案系統想像成一棵樹，其中資料夾作為節點，子資料夾和檔案作為子節點。廣度優先搜尋 (BFS) 可用於列出目錄及其子目錄中的所有文件，而深度優先搜尋 (DFS) 可用於在層次結構中定位特定文件。 **2. 網頁抓取：** - 像 Google 這樣的搜尋引擎利用 BFS 或 DFS 變體來抓取網路。他們從種子 URL（根節點）開始，有系統地探索連結的網頁（子節點）。 BFS 確保在進入更深層次之前探索特定層級（網站）的所有頁面，而 DFS 可能會在回溯和探索其他網站之前更深入地研究特定網站。 **3.人工智慧（AI）：** - 人工智慧中的遊戲演算法通常使用樹遍歷來探索可能的動作及其結果。將西洋棋遊戲想像成一棵樹，當前棋盤狀態作為根節點，潛在的移動作為通往新棋盤狀態（子節點）的分支。具有修剪技術的深度優先搜尋可用於評估潛在的移動並確定最有希望的策略。 **4.社會網絡分析：** - 社群媒體平台利用樹遍歷來推薦聯繫或探索朋友網路。將您的個人資料想像為一個節點，將朋友作為子節點。遍歷演算法可用於建議基於共同朋友（樹中的共同祖先）的連接或探索網路以了解資訊流或影響力。 **5.電腦圖形學：** - 光線追蹤是一種用於在 3D 圖形中實現逼真光照效果的技術，通常採用樹遍歷演算法。虛擬場景可以表示為一棵樹，其中物件作為節點，它們的空間關係作為邊緣。遍歷有助於確定光線與哪些物件交互，從而建立逼真的陰影和反射。 **6. 網路路由：** - 電腦網路中的路由協定使用樹遍歷的變體來找到資料包到達目的地的最佳路徑。將網路想像成一棵樹，路由器作為節點，連接作為邊緣。遍歷演算法有助於確定資料在網路中不同點之間傳輸的最有效路徑。 ### 簡單解釋： 想像一下，您是一名送貨員，您有一堆包裹要在附近送貨。附近的房屋透過道路連接起來，形成樹狀結構。 - **房屋是節點：**每個房屋代表樹中的一個節點，包含地址（資料）等資訊以及可能由道路（邊）連接的相鄰房屋（子節點）的地址。 - **您的遞送路線就是遍歷：**樹遍歷演算法定義您存取每個房屋（節點）以遞送包裹（對資料執行操作）的順序。 **您可以透過兩種主要方式進行交付，這對應於兩種常見的樹遍歷方法：** **1. 廣度優先搜尋（BFS）：像一個不斷擴大的圓圈一樣提供：** - 您從清單中的第一個房子（根節點）開始。 - 您將包裹運送到該房屋，然後**存取同一條街道（層）上與其直接相連的所有房屋（鄰居/子節點），**然後繼續前進。 - 一旦您運送到第一條街道（層）上的所有房屋，您就會移動到下一條街道（層）並重複該過程，在前往下一層之前存取該層上的所有房屋。 這就像一個不斷擴大的圓圈——您從中心（根部）開始，逐漸向外工作，確保在移動到下一個之前，您可以運送到街道（層）上的所有房屋。如果您想先優先考慮向附近區域的所有房屋送貨，這種方法很有用，也許是因為它們都在同一個街區，並且最大限度地減少行程時間很重要。 **2. 深度優先搜尋（DFS）：深入研究一條街道：** - 您從清單中的第一棟房子（根節點）開始。 - 您將包裹運送到該房屋，然後**選擇一條從該房屋引出的相連道路（分支），並沿著它一直走到終點（葉節點）** ，在原路返回之前運送到該路徑（分支）上的所有房屋。 - 一旦到達該路的盡頭（分支），您就回溯到最後一個路口（父節點）並選擇另一條路（分支）進行探索，將物品運送到該新路徑上的所有房屋，直到到達另一個死胡同（葉節點） 。 這就像探索迷宮一樣——你選擇一條路徑（分支）並沿著它一路走下去，運送到沿途的房屋，直到你到達死胡同（葉節點）。然後你原路返回並嘗試另一條路徑（分支），直到你到達所有房屋。如果您正在快速查找特定地址並希望在前往另一條街道（分支）之前探索整條街道（分支），則此方法可能會很有用。 ### 演算法類型： **1.廣度優先搜尋（BFS）：** - **概念：** BFS逐級存取節點，從根節點開始，逐層向外進行。想像一下探索一個家譜； BFS 將在向下移動到其子節點（下一層）之前存取所有兄弟節點（同一層級的節點）。 - **怎麼運作的：** ``` 1. Start at the root node and add it to a queue (a data structure that follows a "first-in, first-out" principle). ``` ``` 2. Remove the first node from the queue and visit it (process its data). ``` ``` 3. Add all the unvisited child nodes of the removed node to the back of the queue. ``` ``` 4. Repeat steps 2 and 3 until the queue is empty. ``` - **例子：** 考慮一棵簡單的樹： ``` A / \ B C / \ / \ D E F G ``` BFS 遍歷將依下列順序存取節點：A、B、C、D、E、F、G。 **2.深度優先搜尋（DFS）：** - **概念：** DFS 沿著一個分支（路徑）探索盡可能遠的距離，然後回溯並探索另一個分支。 DFS 還有更多變體，但這裡我們將重點放在基本方法上。 - **怎麼運作的：** ``` 1. Start at the root node. ``` ``` 2. Visit the node (process its data). ``` ``` 3. If there are any unvisited child nodes, choose one and repeat steps 2 and 3, essentially following that branch (path) until you reach a leaf node (a node with no children). ``` ``` 4. Once you reach a leaf node, backtrack to the parent node and repeat step 3, exploring another unvisited child node (if any) of the parent. ``` ``` 5. Continue backtracking and exploring until all nodes have been visited. ``` - **例子：** 使用與之前相同的樹： ``` A / \ B C / \ / \ D E F G ``` DFS 遍歷可以以各種順序存取節點，具體取決於每一步選擇的子節點。可能的順序是：A、B、D、E、C、F、G。 **主要區別：** - BFS強調逐級存取節點，確保在深入之前先進行更廣泛的探索。 - DFS 優先考慮完全探索一個分支（路徑），然後再轉向另一個分支（路徑），可能會更快到達特定節點，但不能保證逐級存取。 結論 ： ---- 總而言之，這個基本演算法之旅為您理解基本的搜尋、排序和樹遍歷技術奠定了堅實的基礎。這些解釋使用了清晰的語言和相關的類比，使這些抽象概念更加平易近人、直觀。無論您是經驗豐富的程式設計師還是剛開始涉足電腦科學，這種理解都為建立高效且有效的程式奠定了基石。 隨著您對知識的渴望與日俱增，請更深入研究！我的儲存庫充滿了各種演算法和資料結構，等待您的探索（[演算法-資料-結構](https://github.com/m-mdy-m/algorithms-data-structures)）。這是一個寶庫，您可以在這裡進行實驗、練習並鞏固您對這些基本建置模組的掌握。 **雖然某些部分仍在建設中，**反映了我自己正在進行的學習旅程（這個旅程可能需要 2-3 年才能完成！），但儲存庫正在不斷發展。 冒險不止於探索！我非常重視您的反饋。在文章中遇到障礙？有建設性的批評要分享嗎？還是只是想引發一場關於演算法的對話？我的門（或者更確切地說，我的收件匣）總是開著的。在 Twitter 上聯絡： [@m\_\_mdy\_\_m](https://twitter.com/m__mdy__m)或 Telegram：@m\_mdy\_m。此外，我的 GitHub 帳戶[m-mdy-m](https://github.com/m-mdy-m)歡迎討論和貢獻。讓我們共同建立一個充滿活力的學習社區，在這裡我們分享知識並突破我們的理解界限。 --- 原文出處：https://dev.to/m__mdy__m/basic-algorithms-5bep
*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 朋友們大家好，如果您正在準備技術面試，那麼您必須準備系統設計問題，因為這是大多數人都遇到困難的地方。 即使經驗豐富的程式設計師也很難解決常見問題，例如如何設計 WhatsApp 或 YouTube，或回答[API 閘道與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴充](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的差異。 在當今日益分散的世界中，建立強大且可擴展的系統的能力是頂級科技公司所追求的基本技能。 系統設計面試已成為評估候選人解決現實挑戰、評估權衡以及設計能夠處理複雜需求的系統的能力的關鍵組成部分。 之前也分享過[資料庫分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、[系統設計主題](https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii)、 [微服務架構](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f)、 [系統設計演算法](https://dev.to/somadevtoo/10-distributed-data-structures-and-system-design-algorithms-for-interviews-a4j)，今天就分享一下系統設計面試題。 在本文中，我精心設計了*50 多個系統設計面試問題，*以指導應徵者從基本概念到複雜的設計場景。 無論您是旨在掌握要點的初學者，還是尋求提高技能的經驗豐富的工程師，這些問題不僅可以幫助您為面試做好準備，還可以提高您對系統設計和軟體架構的了解。 順便說一句，如果您正在準備系統設計面試並想深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 [](https://bit.ly/3pMiO8g) PS 繼續閱讀直到最後。我有一份免費獎金給你。 --- 2024 年 50 道系統設計面試題 ------------------ 這裡列出了針對初學者和經驗豐富的開發人員的 50 個流行的系統設計面試問題，您可以解決這些問題來開始準備。 在此列表中，我不僅分享了簡單、中等和困難的系統設計問題，還分享了基於概念的問題，例如 API 閘道與負載平衡器或微服務與整體式設計。您可以練習這些系統設計問題和麵試問題。 ### 基於系統設計概念的問題 1\. API網關和負載平衡器有什麼差別？ \[ [解決方案](https://javarevisited.substack.com/p/difference-between-api-gateway-and?utm_source=profile&utm_medium=reader2)\] 2\. 反向代理和正向代理有什麼不同？ [（回答）](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5) 3\. 水平縮放和垂直縮放有什麼不同？ [（回答）](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09) 4\. 微服務和單體架構有什麼差別？ [（回答）](https://dev.to/somadevtoo/difference-between-microservices-vs-monolithic-applications-for-system-design-interview-2lb5) 5\. 垂直分區和水平分區有什麼差別？ 6.什麼是速率限制器？它是如何運作的？ [（回答）](https://javarevisited.substack.com/p/what-is-rate-limiter-how-does-it?utm_source=profile&utm_medium=reader2) 7\. 單一登入 (SSO) 的工作原理是什麼？ [（回答）](https://javarevisited.substack.com/p/how-does-sso-single-sign-on-authentication?utm_source=profile&utm_medium=reader2) 8\. Apache Kafka 是如何運作的？為什麼這麼快？ [（回答）](https://javarevisited.substack.com/p/how-does-apache-kafka-works?utm_source=profile&utm_medium=reader2) 9\. Kafka、ActiveMQ 和 RabbitMQ 之間的差異？ [（回答）](https://javarevisited.substack.com/p/difference-between-kafka-rabbitmq?utm_source=profile&utm_medium=reader2) 10\. JWT、OAuth 和 SAML 之間的差異？ [（回答）](https://javarevisited.substack.com/p/difference-between-jwt-oauth-and?utm_source=profile&utm_medium=reader2) 這是來自 DesignGuru.io 的一個很好的圖表，它解釋了垂直和水平資料庫分區之間的區別 [](https://bit.ly/3pMiO8g) --- ### 𝐄𝐚𝐬𝐲 系統設計問題 現在，讓我們開始討論簡單的系統設計問題。這些是常見問題，您需要設計隨處使用的小型實用程序，例如 URL 縮短器： 1\. 如何設計像TinyURL這樣的URL縮短器 \[[解決方案](https://bit.ly/3dZoQ2G)\] 2\. 如何設計像Pastebin這樣的文字儲存服務？ \[[解決方案](https://www.youtube.com/watch?v=9wAj-5IMdyU)\] 3\. 設計內容傳遞網路（CDN）？ \[[解決方案](https://bit.ly/3dZoQ2G)\] 4\. 設計停車庫【[解決方案](https://bit.ly/3eMUosX)】 5.設計自動販賣機【[解決方案](https://javarevisited.blogspot.com/2016/06/design-vending-machine-in-java.html)】 6\. 如何設計分散式鍵值存儲 7.設計分散式緩存 8.設計分散式作業調度器 9\. 如何設計認證系統 10\. 如何設計統一支付介面（UPI） 並且，以下是來自 Educative.io 的 YouTube 高級設計供您參考： [ ](https://bit.ly/3Mnh6UR) --- ### 𝐌𝐞𝐝𝐢𝐮𝐦 系統設計問題 現在，是時候看看中等難度的系統設計問題了。這些問題既不簡單也不太困難，但您需要對各種軟體架構元件和系統設計概念有深入的了解才能回答這些問題。 11.設計Instagram【[解決方案](https://bit.ly/3BqamCL)】 12\. 如何設計 Tinder 13.設計WhatsApp（[解決方案](https://bit.ly/3SbA9Eu)） 14\. 如何設計 Facebook 15.設計推特 16.設計Reddit 17.設計Netflix【[解決方案](https://bit.ly/3bbNnAN)】 18.設計Youtube【[解決方案](https://bit.ly/3bbNnAN)】 19\. 設計谷歌搜尋 20.設計像亞馬遜這樣的電子商務商店 21.設計Spotify 22.設計TikTok 23\. 設計 Shopify 24\. 設計愛彼迎 25\. 為搜尋引擎設計自動完成功能 26.設計速率限制器 27.像Kafka一樣設計分散式訊息佇列 28.設計航班預訂系統 29.設計線上程式碼編輯器 30.設計證券交易所繫統 31.設計一個分析平台（指標和日誌記錄） 32.設計通知服務 33.設計支付系統 而且，這是來自 DesignGuru 的 Netflix 高級系統設計，這是我最喜歡的學習系統設計的地方之一 [](https://bit.ly/3pMiO8g) --- ### 𝐇𝐚𝐫𝐝 系統設計問題 現在，讓我們來看看一些需要你付出更多努力的難題。解決這些問題你可能會感到不舒服，但透過這樣做你會變得更好。 34\. 如何設計像 Yelp 這樣的基於位置的服務 35\. 設計優步 36.設計像 Doordash 這樣的送餐應用程式 37.設計Google文件 38\. 如何設計Google地圖 39\. 設計縮放 40\. 如何設計像 Dropbox 這樣的檔案共用系統 41\. 如何設計像BookMyShow這樣的訂票系統 42.設計分散式網路爬蟲 43.如何設計程式碼部署系統 44.設計像S3這樣的分散式雲端存儲 45\. 如何設計分散式鎖定服務 這是 Educative.io 的 Google 地圖的高級設計 [](https://bit.ly/3Mnh6UR) 而且，如果您需要解決方案，則可以在 @ Ashish Pratap Singh 的 GitHub 儲存庫中找到它們：https://github.com/ashishps1/awesome-system-design-resources/blob/main/README.md#system-design-interview-problems 而且，現在可以看到更多有關係統設計面試準備的資源 --- ### 系統設計訪談資源： 而且，這裡列出了最佳系統設計書籍、線上課程和練習網站，您可以查看這些內容，以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 2. [**《系統設計面試》作者：Alex Xu**](https://amzn.to/3nU2Mbp) ：這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) ：綜合指南，涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design)：LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種練習問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) ：精選的資源列表，包括文章、書籍和影片，可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 7. **高可擴展性部落格**：該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**：請參閱「Gaurav Sen」和「Tech Dummies」等頻道，以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) ：Alex Xu 的一本現場書籍和課程，用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容，並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) ：一個專為面試準備的網站，特別是針對亞馬遜和谷歌等 FAANG 公司，他們還有很棒的系統設計課程和許多其他材料，可以幫助您破解 FAAN 面試。 [](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 請記住透過參與實際專案和參加模擬面試將理論知識與實際應用結合。不斷的練習和學習無疑會提高你在系統設計面試中的熟練程度。 這就是2024 年50 個系統設計面試問題。有線上課程以及我分享過的書籍。 無論您是準備技術面試的候選人，還是希望提高技能的經驗豐富的專業人士，掌握系統設計都是在不斷發展的科技行業中推進職業生涯的關鍵一步，這些問題將對您有所幫助。 。 ### 獎金 正如承諾的，這是給你的獎金，一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計，您也可以在 Microsoft 上閱讀它 --- [https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT -eBook-設計分散式系統.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf)  謝謝 --- 原文出處：https://dev.to/somadevtoo/top-50-system-design-interview-questions-for-2024-5dbk
--- 標題：加入我們參加 Netlify 動態網站挑戰：獎品為 3,000 美元！ 發表：真實 說明：使用 Netlify 的全新不可知平台原語證明您的技能、贏得現金獎勵並獲得經驗。 標籤： netlifychallenge、devchallenge、webdev、javascript 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbcz1t2nzsbn3ygf1jx3.jpg 使用 100:42 的比例可獲得最佳效果。 ===================== 發佈於: 2024-04-23 14:24 +0000 =========================== --- 我們很高興與[Netlify](https://netlify.com)合作，為您帶來下一個 DEV 挑戰。本次挑戰賽的主題是跨任何框架的動態和高效能數位體驗！ Netlify 動態網站挑戰賽將持續到**5 月 12 日**，您將有機會證明您的技能、贏得現金獎勵並獲得 Netlify 新的[不可知平台原語的](https://www.netlify.com/platform/primitives/)經驗。跨所有框架解鎖前所未有的功能 - Next.js、Astro、Nux、Remix，應有盡有！ 這項挑戰提供了一個投資開放網路、開源以及您在新的和不斷發展的框架方面的技能的機會。我們期待看到您創造的作品。 我們希望您至少嘗試我們的三個提示中的一個！ 提示 -- ### 視覺饗宴 使用**Netlify 圖像 CDN**建立動態圖像庫 - 您的專案應利用 Netlify 的按需圖像轉換功能，並演示如何獲取圖像、應用調整大小和格式優化等轉換，以及在圖庫佈局中渲染優化的圖像。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20 盛宴。* %0A%0A%0A%23%23%20什麼%20I%20Built%0A%3C！ --%20Share%20an%20概述%20about%20您的%20專案。 0A%23%23 %20Demo%0A%3C!--%20將%20a%20link%20分享至%20您的%20Netlify%20app%20和%20在此處包括%20some%20螢幕截圖%20 。 -%3E%0A%0A%3C!--%20Did%20you% 20實現%20additional%20platform%20primitives%20like%20Netlify%20Blobs%20or%20Cache%20Control%3F%20告訴%20us%2000%20Cache%20Control%3F%20告訴%20us%2000%20abouttoo% !%20You%20may%20qualify%20for%20more%20than%20one%20prompt.% 20--%3E%0A%0A%3C!--%20Team%20Submissions%3A%20請%20pick%20one%20m %20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV %20usernames%20directly%20in%20the%20body%20of%20the%2000%20in%20the%20body%20of%20the%20postA% 3C!--%20Don%27t%20forget%20to%20add%20a%20cover%20image %20(如果%20你%20想要).%20--%3E%0A%0A%0A%3C!-- %20感謝%20%20的參與!%20--%3E %} 視覺饗宴提交模板 {% 結束%} ### 使用 Blob 建置 建立使用**Netlify Blob**讀取和寫入資料的應用程式 - 您的專案應示範儲存和擷取 Blob 物件、處理元資料以及將 Blob 儲存與 Netlify Functions 整合以處理任務。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20%20Blob。* %0A%0A%0A%23%23%20什麼%20I%20Built%0A%3C！ --%20Share%20an%20概述%20about%20您的%20專案。 0A%23%23 %20Demo%0A%3C!--%20將%20a%20link%20分享至%20您的%20Netlify%20app%20和%20在此處包括%20some%20螢幕截圖%20 。 %0A%0A%3C!--%20Did%20you%20implement%20additional% 20platform%20primitives%20like%20the%20Netlify%20Image%20CDN%20or%20Cache%20Control3F%20Image%20CDN%20or%20Cache%20Control20%20T%200%2020 %20You%20may%20qualify%20for%20more%20than%20one%20prompt.% 20--%3E%0A%0A%3C!--%20Team%20Submissions%3A%20請%20pick%20one%20mick% 20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV %20usernames%20directly%20in%20the%20body%20of%20the%20postE20A% !--%20Don%27t%20forget%20to%20add%20a%20cover%20image %20（如果%20你%20想要）。 20感謝%20%20參與！ 使用 Blob 提交模板建置 {% 結束%} ### 巧妙的緩存 建立一個利用**Netlify 細粒度快取控制功能**的 Web 應用程式 - 您的專案應該實現自訂 Cache-Control 標頭，利用 Netlify-CDN-Cache-Control 標頭進行邊緣緩存，並使用快取標記演示快取失效。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20快取*%0A%0A%0A%23%23%20What%20I%20Built%0A%3C！ --%20Share%20an%20overview%20about%20your%20project.%20--%3E%0A%0A% 23% 23%20Demo%0A%3C！ --%20將%20a%20link%20分享到%20您的%20Netlify%20app%20和%20在此處包含%20some%20螢幕截圖%20。 20--%3E%0A%0A%23%23% 20Platform%20Primitives%0A%3C!--%20告訴%20us%20如何%20you%20利用%20Netlify%20Cache%20Control.%20--%3E %0A%0A%3C!--%20Did%20you%20implement%20additional %20platform%20primitives%20like%20the%20Netlify%20Image%20CDN%20or%20Blobs%3F%200%20%20%20%20%！ 20You%20may%20qualify%20for%20more%20than%20one%20提示。 %20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV% 20usernames%20directly%20in%20the%20body%20of%20the%20postA%20in%20the%20body%20of%20the%200.A% 3C!--%20Don%27t%20forget%20to%20add%20a%20cover%20image% 20(如果%20你%20想要).%20--%3E%0A%0A%0A%3C!-- %20感謝%20參與%20！ 巧妙的快取提交模板 {% 結束%} 評審標準和獎項 ------- 所有三個提示都將根據以下內容進行判斷： - 底層技術的使用 - 可用性和使用者體驗 - 無障礙 - 創造力 每個提示的獲勝者將收到： - $1,000 禮品卡或同等金額 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **所有提交有效提交的參與者都**將在其 DEV 個人資料中收到完成徽章。 如何參與 ---- 為了參與，您需要使用與每個提示關聯的提交範本來發布貼文。所有提交都必須在 Netlify 上建置和執行，並至少利用每個提示中所述的一個平台原語。提交的作品將根據 Netlify 免費入門平台進行評審，因此任何使用 Netlify 付費服務的行為都將在評審過程中考慮。 **請在提交之前查看我們的完整[規則、指南和常見問題解答頁面，](https://dev.to/challenges/netlify)以便您了解我們的參與指南和[官方競賽規則](https://dev.to/page/netlify-dynamic-site-challenge-contest-rules)（例如資格要求）。** 需要幫忙？ ----- 您可以利用 Netlify 的文件和教學來了解 Netlify 平台： - [平台原語](https://docs.netlify.com/platform/primitives/) - [開發者文件](https://docs.netlify.com/get-started/) Netlify 團隊也將為挑戰期間需要技術支援的任何人發布協助線程。關注他們的組織，這樣您就不會錯過該帖子： {% 嵌入 https://dev.to/netlify %} 重要的日子 ----- - 5 月 1 日：Netlify 動態網站挑戰賽開始！ - 5 月 12 日：提交截止時間為太平洋夏令時間晚上 11:59 - 5 月 14 日：得獎者公佈 我們希望您享受框架的自由，我們迫不及待想看看您建造的內容！對挑戰有疑問嗎？請在下面詢問他們。 祝你好運，編碼愉快！ --- 原文出處：https://dev.to/devteam/join-us-for-the-netlify-dynamic-site-challenge-3000-in-prizes-3mfn
JavaScript 系列一：第1課 ── 基本的函數操作、onclick 事件: https://jsfiddle.net/applelily/89kgaq13/15/ --- JavaScript 系列一：第2課 ── 基本的變數操作、從 html 取得內容: https://jsfiddle.net/applelily/1at2Lfyx/2/ --- JavaScript 系列一：第3課 ── 修改 html 的內容: https://jsfiddle.net/applelily/yrungtjv/1/ --- JavaScript 系列一：第4課 ── 基本的陣列操作: https://jsfiddle.net/applelily/5zq9s0ft/13/ --- JavaScript 系列一：第5課 ── 基本的 if/else 條件流程控制: https://jsfiddle.net/applelily/v9r7sey8/1/ --- JavaScript 系列一：第6課 ── 認識資料型態與轉換: https://jsfiddle.net/applelily/j4arzdbs/3/ --- JavaScript 系列一：第7課 ── 認識巢狀結構: https://jsfiddle.net/applelily/1q6f95kz/9/ ---
我見過數百種人工智慧工具，其中許多正在改變世界。 作為開發人員，總是有很多事情需要學習，因此專注於節省時間來處理重要的事情非常重要。 我將介紹 21 個供開發人員使用的工具，它們可以讓您的生活更輕鬆，特別是在開發人員體驗方面。 相信我，這份清單會讓你大吃一驚！ 我們開始做吧。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ----------------------------------------------------------------------------  Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。 我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能，而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。  Taipy 有許多整合選項，可以輕鬆地與領先的資料平台連接。  開始使用以下命令。 ``` pip install taipy ``` 我們來談談最新的[Taipy v3.1 版本](https://docs.taipy.io/en/latest/relnotes/)。 最新版本使得在 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/)等程式庫現在可用於視覺化。 這也帶來了對[Plotly python](https://plotly.com/python/)的原生支持，使繪製圖表變得更加容易。 他們還使用分散式運算提高了效能，但最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。  另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。  您也可以使用 Taipy 雲端部署應用程式。 如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難，但 Taipy 提供了[10 多個演示教程，](https://docs.taipy.io/en/release-3.1/gallery/)其中包含程式碼和適當的文件供您遵循。  例如，一些演示範例和專案想法： - [即時污染儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/pollution_sensors/) 使用工廠周圍的感測器測量空氣品質的用例，展示 Taipy 儀表板流資料的能力。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-realtime-pollution)。 - [詐欺辨識](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/fraud_detection/) Taipy 應用程式可分析信用卡交易以偵測詐欺行為。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-fraud-detection)。 - [新冠儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/covid_dashboard/) 這使用 2020 年的 Covid 資料集。還有一個預測頁面來預測傷亡人數。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-covid-dashboard)。 - [建立 LLM 聊天機器人](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/chatbot/) 該演示展示了 Taipy 使最終用戶能夠使用 LLM 執行推理的能力。在這裡，我們使用 GPT-3 建立一個聊天機器人，並將對話顯示在互動式聊天介面中。您可以輕鬆更改程式碼以使用任何其他 API 或模型。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-chatbot)。 - [即時人臉辨識](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/face_recognition/) 該演示將人臉辨識無縫整合到我們的平台中，使用網路攝影機提供使用者友好的即時人臉偵測體驗。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-face-recognition)。 這些用例非常驚人，所以一定要檢查一下。 Taipy 在 GitHub 上有 8.2k+ Stars，並且處於`v3.1`版本，因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} Star Taipy ⭐️ {% endcta %} --- 2. [DevToys](https://github.com/DevToys-app/DevToys) - 開發者的瑞士軍刀。 ----------------------------------------------------------------  DevToys 協助完成日常開發任務，例如格式化 JSON、比較文字和測試 RegExp。 這樣，就無需使用不可信的網站來處理您的資料執行簡單的任務。透過智慧型偵測，DevToys 可以偵測用於複製到 Windows 剪貼簿的資料的最佳工具。 緊湊的覆蓋範圍讓您可以保持應用程式較小並位於其他視窗之上。最好的部分是可以同時使用應用程式的多個實例。 我可以肯定地說，開發人員甚至不知道這個很棒的專案。 最後是一款專為 Windows 生態系統設計的軟體。哈哈！  他們提供的一些工具是： > 轉換器 - JSON <> YAML - 時間戳 - 數基數 - 規劃任務解析器  > 編碼器/解碼器 - 超文本標記語言 - 網址 - Base64 文字與圖片 - 壓縮包 - 智威湯遜解碼器  > 格式化程式 - JSON - SQL - XML  > 發電機 - 哈希（MD5、SHA1、SHA256、SHA512） - UUID 1 和 4 - 洛雷姆·伊普蘇姆 - 校驗和  > 文字 - 逃脫/逃脫 - 檢驗員和箱子轉換器 - 正規表示式測試器 - 文字比較 - XML驗證器 - 降價預覽   > 形象的 - 色盲模擬器 - 顏色選擇器和對比度 - PNG / JPEG 壓縮器 - 影像轉換器  我不了解你，但我不會錯過這個！ 您可以閱讀[如何執行 DevToys](https://github.com/DevToys-app/DevToys?tab=readme-ov-file#how-to-run-devtoys) 。 關於許可證的註解。 DevToys 使用的授權允許將應用程式作為試用軟體或共享軟體重新分發而無需進行任何更改。然而，作者 Etienne BAUDOUX 和 BenjaminT 不希望你這樣做。如果您認為自己有充分的理由這樣做，請先與我們聯絡討論。 他們在 GitHub 上有 23k Stars，並且使用 C#。 {% cta https://github.com/DevToys-app/DevToys %} 明星 DevToys ⭐️ {% endcta %} --- 3. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 -------------------------------------------------------  Pieces 是一款支援人工智慧的生產力工具，旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。 它最大限度地減少了上下文切換、簡化了工作流程並提升了整體開發體驗，同時透過完全離線的 AI 方法維護了工作的隱私和安全性。太棒了：D  它與您最喜歡的工具無縫集成，以簡化、理解和提升您的編碼流程。 它具有比表面上看到的更令人興奮的功能。 - 它可以透過閃電般快速的搜尋體驗找到您需要的材料，讓您根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 - Pieces 使用 OCR 和 Edge-ML 升級螢幕截圖，以提取程式碼並修復無效字元。因此，您可以獲得極其準確的程式碼提取和深度元資料豐富。 您可以查看 Pieces 可用[功能的完整清單](https://pieces.app/features)。 您可以閱讀[文件](https://docs.pieces.app/)並存取[網站](https://pieces.app/)。 他們為 Pieces OS 用戶端提供了一系列 SDK 選項，包括[TypeScript](https://github.com/pieces-app/pieces-os-client-sdk-for-typescript) 、 [Kotlin](https://github.com/pieces-app/pieces-os-client-sdk-for-kotlin) 、 [Python](https://github.com/pieces-app/pieces-os-client-sdk-for-python)和[Dart](https://github.com/pieces-app/pieces-os-client-sdk-for-dart) 。 就開源流行度而言，他們仍然是新的，但他們的社群是迄今為止我見過的最好的社群之一。加入他們，成為 Pieces 的一部分！ {% cta https://github.com/pieces-app/ %} 星星碎片 ⭐️ {% endcta %} --- 4. [Infisical－](https://github.com/Infisical/infisical)秘密管理平台。 --------------------------------------------------------------  Infisical 是一個開源秘密管理平台，團隊可以用它來集中 API 金鑰、資料庫憑證和設定等秘密。 他們讓每個人（而不僅僅是安全團隊）都可以更輕鬆地進行秘密管理，這意味著從頭開始重新設計整個開發人員體驗。 就我個人而言，我不介意使用 .env 文件，因為我並不特別謹慎。不過，您可以閱讀[立即停止使用 .env 檔案！](https://dev.to/gregorygaines/stop-using-env-files-now-kp0)由格雷戈里來理解。 他們提供了四種 SDK，分別用於<a href="">Node.js</a> 、 <a href="">Python</a> 、 <a href="">Java</a>和<a href="">.Net</a> 。您可以自行託管或使用他們的雲端。 開始使用以下 npm 指令。 ``` npm install @infisical/sdk ``` 這是使用入門 (Node.js SDK) 的方法。 ``` import { InfisicalClient, LogLevel } from "@infisical/sdk"; const client = new InfisicalClient({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", logLevel: LogLevel.Error }); const secrets = await client.listSecrets({ environment: "dev", projectId: "PROJECT_ID", path: "/foo/bar/", includeImports: false }); ```  Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ，這是使用它的最佳方式。 Infisical 還可用於將機密注入 Kubernetes 叢集和自動部署，以便應用程式使用最新的機密。有很多整合選項可用。  在使用整個原始程式碼之前一定要檢查他們的[許可證](https://github.com/Infisical/infisical/blob/main/LICENSE)，因為他們有一些受 MIT Expat 保護的企業級程式碼，但不用擔心，大部分程式碼都是免費使用的。 他們在 GitHub 上擁有超過 11k 顆星星，並且發布了超過 125 個版本，因此他們正在不斷發展。另外，Infiscial CLI 的安裝次數超過 540 萬次，因此非常值得信賴。 {% cta https://github.com/Infisical/infisical %} 明星 Infisical ⭐️ {% endcta %} --- 5. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 --------------------------------------------------------------  Mintlify 是一款由人工智慧驅動的文件編寫器，您只需 1 秒鐘即可編寫程式碼文件 :D 幾個月前我發現了 Mintlify，從那時起我就一直是它的粉絲。我見過很多公司使用它，甚至我使用我的商務電子郵件產生了完整的文件，結果證明這是非常簡單和體面的。如果您需要詳細的文件，Mintlify 就是解決方案。 主要用例是根據我們將在此處討論的程式碼產生文件。當您編寫程式碼時，它會自動記錄程式碼，以便其他人更容易跟上。 您可以安裝[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=mintlify.document)或將其安裝在[IntelliJ](https://plugins.jetbrains.com/plugin/18606-mintlify-doc-writer)上。 您只需突出顯示程式碼或將遊標放在要記錄的行上。然後點選「編寫文件」按鈕（或按 ⌘ + 。） 您可以閱讀[文件](https://github.com/mintlify/writer?tab=readme-ov-file#%EF%B8%8F-mintlify-writer)和[安全指南](https://writer.mintlify.com/security)。 如果您更喜歡教程，那麼您可以觀看[Mintlify 的工作原理](https://www.loom.com/embed/3dbfcd7e0e1b47519d957746e05bf0f4)。它支援 10 多種程式語言，並支援許多文件字串格式，例如 JSDoc、reST、NumPy 等。 順便說一句，他們的網站連結是[writer.mintlify.com](https://writer.mintlify.com/) ；回購協議中目前的似乎是錯誤的。 Mintlify 是一個方便的工具，用於記錄程式碼，這是每個開發人員都應該做的事情。它使其他人更容易有效地理解您的程式碼。 它在 GitHub 上有大約 2.5k 顆星，基於 TypeScript 建置，受到許多開發人員的喜愛。 {% cta https://github.com/mintlify/writer %} Star Mintlify ⭐️ {% endcta %} --- 6. [Replexica](https://github.com/replexica/replexica) - 用於 React 的 AI 支援的 i18n 工具包。 ------------------------------------------------------------------------------------  在地化方面的困難是真實存在的，因此人工智慧的幫助絕對是一個很酷的概念。 Replexica 是 React 的 i18n 工具包，可快速發布多語言應用程式。它不需要將文字提取到 JSON 檔案中，並使用 AI 支援的 API 進行內容處理。 它有以下兩個部分： 1. Replexica Compiler - React 的開源編譯器插件。 2. Replexica API - 雲端中的 i18n API，使用 LLM 執行翻譯。 （基於使用情況，它有免費套餐） 支援的一些 i18n 格式包括： 1. 無 JSON 的 Replexica 編譯器格式。 2. Markdown 內容的 .md 檔案。 3. 基於舊版 JSON 和 YAML 的格式。 當他們達到 500 星時，他們也在 DEV 上發布了官方公告。我是第一批讀者之一（少於 3 個反應）。 它們涵蓋了很多內容，因此您應該閱讀 Max 的[《We Got 500 Stars What Next》](https://dev.to/maxprilutskiy/we-got-500-github-stars-whats-next-2njc) 。 為了給出 Replexica 背後的總體思路，這是基本 Next.js 應用程式所需的唯一更改，以使其支援多語言。 開始使用以下 npm 指令。 ``` // install pnpm add replexica @replexica/react @replexica/compiler // login to Replexica API. pnpm replexica auth --login ``` 您可以這樣使用它。 ``` // next.config.mjs // Import Replexica Compiler import replexica from '@replexica/compiler'; /** @type {import('next').NextConfig} */ const nextConfig = {}; // Define Replexica configuration /** @type {import('@replexica/compiler').ReplexicaConfig} */ const replexicaConfig = { locale: { source: 'en', targets: ['es'], }, }; // Wrap Next.js config with Replexica Compiler export default replexica.next( replexicaConfig, nextConfig, ); ``` 您可以閱讀如何[開始使用](https://github.com/replexica/replexica/blob/main/getting-started.md)以及清楚記錄的有關[幕後使用內容的](https://github.com/replexica/replexica?tab=readme-ov-file#whats-under-the-hood)內容。 Replexica 編譯器支援 Next.js App Router，Replexica API 支援英文🇺🇸和西班牙文🇪🇸。他們計劃接下來發布 Next.js Pages Router + 法語🇫🇷語言支援！ 他們在 GitHub 上擁有 740 多個 Star，並且基於 TypeScript 建置。您應該密切關注該專案以獲得進一步進展！ {% cta https://github.com/replexica/replexica %} Star Replexica ⭐️ {% endcta %} --- 7. [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?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例： - 假設您有一個網站（可以是商店、電子商務網站或部落格），並且您希望廢棄該網站的所有相關連結，並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。  - 您還可以建立一個自訂工具，該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。  還有許多其他用例，例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star，並擁有超過 10,000 個分叉，因此具有良好的整體比率。 {% cta https://github.com/FlowiseAI/Flowise %} 明星 Flowise ⭐️ {% endcta %} --- 8. [Hexo](https://github.com/hexojs/hexo) - 一個快速、簡單且功能強大的部落格框架。 ---------------------------------------------------------------  大多數開發人員更喜歡自己的博客，如果您也是如此。 Hexo 可能是你不知道的工具。 Hexo 支援許多功能，例如超快的生成速度，支援 GitHub Flavored Markdown 和大多數 Octopress 插件，提供對 GitHub Pages、Heroku 等的一命令部署，以及可實現無限擴展性的強大 API 和數百個主題和插件。 這意味著您可以用 Markdown（或其他標記語言）編寫帖子，Hexo 在幾秒鐘內生成具有漂亮主題的靜態檔案。 開始使用以下 npm 指令。 ``` npm install hexo-cli -g ``` 您可以這樣使用它。 ``` // Setup your blog hexo init blog // Start the server hexo server // Create a new post hexo new "Hello Hexo" ``` 您可以閱讀[文件](https://hexo.io/docs/)，查看 Hexo 提供的所有[400 多個外掛程式](https://hexo.io/plugins/)和[主題集](https://hexo.io/themes/)。據我所知，這些外掛程式支援廣泛的用例，例如 Hexo 的 Ansible 部署器外掛程式。 您可以查看有關在[Hexo 上編寫和組織內容的](https://www.youtube.com/watch?v=AIqBubK6ZLc&t=6s)YouTube 教學。 Hexo 在 GitHub 上擁有超過 38,000 顆星，並被 GitHub 上超過 125,000 名開發者使用。它們位於`v7`版本中，解壓縮後大小為`629 kB` 。 {% cta https://github.com/hexojs/hexo %} Star Hexo ⭐️ {% endcta %} --- 9.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 ---------------------------------------------------------------------------  這個開源專案廣泛流行，但許多開發人員仍然不了解它。它可以幫助您以 10 倍的速度建立使用者介面。 這是一個簡單的工具，可以使用 AI 將螢幕截圖、模型和 Figma 設計轉換為乾淨、實用的程式碼。 該應用程式有一個 React/Vite 前端和一個 FastAPI 後端。如果您想使用 Claude Sonnet 或獲得實驗視訊支持，您將需要一個能夠存取 GPT-4 Vision API 的 OpenAI API 金鑰或一個 Anthropic 金鑰。您可以閱讀[指南](https://github.com/abi/screenshot-to-code?tab=readme-ov-file#-getting-started)來開始。 您可以在託管版本上[即時試用](https://screenshottocode.com/)，並觀看 wiki 上提供的[一系列演示影片](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)。 他們在 GitHub 上擁有超過 47k 顆星星，並支援許多技術堆疊，例如 React 和 Vue，以及不錯的 AI 模型，例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。 {% cta https://github.com/abi/screenshot-to-code %} 將螢幕截圖轉為程式碼 ⭐️ {% endcta %} --- 10. [Appsmith](https://github.com/appsmithorg/appsmith) - 建立管理面板、內部工具和儀表板的平台。 -----------------------------------------------------------------------------  管理面板和儀表板是任何軟體創意（在大多數情況下）的一些常見部分，我嘗試從頭開始建立它，這會帶來很多痛苦和不必要的辛苦工作。 您可能已經看到組織建立了內部應用程式，例如儀表板、資料庫 GUI、管理面板、批准應用程式、客戶支援儀表板等，以幫助其團隊執行日常操作。正如我所說，Appsmith 是一個開源工具，可以實現這些內部應用程式的快速開發。 首先，請觀看這個[YouTube 影片](https://www.youtube.com/watch?v=NnaJdA1A11s)，該影片在 100 秒內解釋了 Appsmith。 {% 嵌入 https://www.youtube.com/watch?v=NnaJdA1A11s %} 他們提供拖放小部件來建立 UI。 您可以使用 45 多個可自訂的小工具在幾分鐘內建立漂亮的響應式 UI，而無需編寫一行 HTML/CSS。尋找[小部件的完整清單](https://www.appsmith.com/widgets)。   Appsmith 幾乎可以在 GUI 上的小部件屬性、事件偵聽器、查詢和其他設定內的任何位置編寫 JavaScript 程式碼。 Appsmith 支援在`{{ }}`內編寫單行程式碼，並將括號之間編寫的任何內容解釋為 JavaScript 表達式。 ``` /*Filter the data array received from a query*/ {{ QueryName.data.filter((row) => row.id > 5 ) }} or {{ storeValue("userID", 42); console.log(appsmith.store.userID); showAlert("userID saved"); }} ``` 您需要使用立即呼叫函數表達式（IIFE）來編寫多行。 例如，無效程式碼和有效程式碼。 ``` // invalid code /*Call a query to fetch the results and filter the data*/ {{ const array = QueryName.data; const filterArray = array.filter((row) => row.id > 5); return filterArray; }} /* Check the selected option and return the value*/ {{ if (Dropdown.selectedOptionValue === "1") { return "Option 1"; } else { return "Option 2"; } }} // valid code /* Call a query and then manipulate its result */ {{ (function() { const array = QueryName.data; const filterArray = array.filter((row) => row.id > 5); return filterArray; })() }} /* Verify the selected option and return the value*/ {{ (function() { if (Dropdown.selectedOptionValue === "1") { return "Option 1"; } else { return "Option 2"; } })() }} ``` 您可以透過幾個簡單的步驟建立從簡單的 CRUD 應用程式到複雜的多步驟工作流程的任何內容： 1. 與資料庫或 API 整合。 Appsmith 支援最受歡迎的資料庫和 REST API。 2. 使用內建小工具建立您的應用程式佈局。 3. 在編輯器中的任何位置使用查詢和 JavaScript 來表達您的業務邏輯。 4. Appsmith 支援使用 Git 進行版本控制，以使用分支來協作建立應用程式來追蹤和回滾變更。部署應用程式並分享:)  您可以閱讀[文件](https://docs.appsmith.com/)和[操作指南](https://docs.appsmith.com/connect-data/how-to-guides)，例如如何將其連接到本機資料來源或\[如何與第三方工具整合\]（與第三方工具整合）。 您可以自行託管或使用雲端。他們還提供[20 多個模板](https://www.appsmith.com/templates)，以便您可以快速入門。一些有用的是： - [維修訂單管理](https://www.appsmith.com/template/Maintenance-Order-Management) - [加密即時追蹤器](https://www.appsmith.com/template/crypto-live-tracker) - [內容管理系統](https://www.appsmith.com/template/content-management-system) - [WhatsApp 信使](https://www.appsmith.com/template/whatsapp-messenger) Appsmith 在 GitHub 上擁有超過 31,000 顆星，發布了 200 多個版本。 {% cta https://github.com/appsmithorg/appsmith %} Star Appsmith ⭐️ {% endcta %} --- 11. [BlockNote](https://github.com/TypeCellOS/BlockNote) - 基於區塊（Notion 樣式）且可擴充的富文本編輯器。 --------------------------------------------------------------------------------------  人們常說，除非您正在學習新東西，否則不要重新發明輪子。 Blocknote 是開源的 Block 為基礎的 React 富文本編輯器。您可以輕鬆地將現代文字編輯體驗加入到您的應用程式中。 Blocknote 建構在 Prosemirror 和 Tiptap 之上。 它們有很多功能，如下所示。   您可以輕鬆自訂內建 UI 元件，或建立自訂區塊、內聯內容和樣式。如果您想更進一步，您可以使用額外的 Prosemirror 或 TipTap 外掛程式來擴充核心編輯器。 其他庫雖然功能強大，但通常具有相當陡峭的學習曲線，並且要求您自訂編輯器的每個細節。這可能需要數月的專門工作。 相反，BlockNote 只需最少的設定即可提供出色的體驗，包括現成的動畫 UI。 開始使用以下 npm 指令。 ``` npm install @blocknote/core @blocknote/react ``` 您可以這樣使用它。透過`useCreateBlockNote`鉤子，我們可以建立一個新的編輯器實例，然後使用`theBlockNoteView`元件來渲染它。 `@blocknote/react/style.css`也被匯入來新增編輯器的預設樣式和 BlockNote 匯出的 Inter 字體（可選）。 ``` import "@blocknote/core/fonts/inter.css"; import { BlockNoteView, useCreateBlockNote } from "@blocknote/react"; import "@blocknote/react/style.css"; export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote(); // Renders the editor instance using a React component. return <BlockNoteView editor={editor} />; } ``` 您可以閱讀可用的[文件](https://www.blocknotejs.org/docs)和[ui 元件](https://www.blocknotejs.org/docs/ui-components)。 您應該嘗試一下，特別是因為它包含廣泛的功能，例如「斜線」選單、流暢的動畫以及建立即時協作應用程式的潛力。  斜線選單  即時協作  格式選單 他們還提供了[20 多個範例](https://www.blocknotejs.org/examples)以及預覽和程式碼，您可以使用它們來快速跟進。  Blocknote 在 GitHub 上擁有超過 5,000 顆星，並有超過 1,500 名開發者在使用。 {% cta https://github.com/TypeCellOS/BlockNote %} 星 BlockNote ⭐️ {% endcta %} --- 12. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 -------------------------------------------------------------------------------------  將 AI 功能整合到 React 中是很困難的，這就是 Copilot 的用武之地。一個簡單快速的解決方案，可將可投入生產的 Copilot 整合到任何產品中！ 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一，CopilotKit 是一個應用程式內人工智慧聊天機器人，可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` （您可以稍後切換到不同的 UI 提供者）。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後，您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的，作為開發人員，我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 4,200 個星星，發布了 200 多個版本，這意味著它們正在不斷改進。 {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} --- 13.[自動完成](https://github.com/withfig/autocomplete)- IDE 風格的自動完成功能適用於您現有的終端和 shell。 ----------------------------------------------------------------------------------  [Fig](https://fig.io/?ref=github_autocomplete)讓命令列對個人來說更容易，對團隊來說更具協作性。 他們最受歡迎的產品是自動完成。當您鍵入時，Fig 會在現有終端機中彈出子命令、選項和上下文相關的參數。 最好的部分是您也可以將 Fig 的自動完成功能用於您自己的工具。以下是建立私人完成的方法： ``` import { ai } from "@fig/autocomplete-generators" ... generators: [ ai({ // the prompt prompt: "Generate a git commit message", // Send any relevant local context. message: async ({ executeShellCommand }) => { return executeShellCommand("git diff") }, //Turn each newline into a suggestion (can specify instead a `postProcess1 function if more flexibility is required) splitOn: "\n", }) ] ``` 您可以閱讀[Fig.io/docs](https://fig.io/docs/getting-started)了解如何開始。 他們在 GitHub 上有 24k+ Stars，這對於經常使用 shell 或終端機的開發人員來說非常有用。 {% cta https://github.com/withfig/autocomplete %} 星狀自動完成 ⭐️ {% endcta %} --- 14. [Tooljet](https://github.com/ToolJet/ToolJet) - 用於建立業務應用程式的低程式碼平台。 ----------------------------------------------------------------------  我們都建立前端，但它通常非常複雜並且涉及很多因素。這樣可以省去很多麻煩。 ToolJet 是一個開源低程式碼框架，可以用最少的工程工作來建置和部署內部工具。 ToolJet 的拖放式前端建構器可讓您在幾分鐘內建立複雜的響應式前端。 您可以整合各種資料來源，包括PostgreSQL、MongoDB、Elasticsearch等資料庫；具有 OpenAPI 規範和 OAuth2 支援的 API 端點； SaaS 工具，例如 Stripe、Slack、Google Sheets、Airtable 和 Notion；以及 S3、GCS 和 Minio 等物件儲存服務來取得和寫入資料。一切 ：） 這就是 Tooljet 的工作原理。  您可以在 ToolJet 中開發多步驟工作流程以自動化業務流程。除了建置和自動化工作流程之外，ToolJet 還可以在您的應用程式中輕鬆整合這些工作流程。  您可以閱讀此[快速入門指南](https://docs.tooljet.com/docs/getting-started/quickstart-guide)，該指南向您展示如何使用 ToolJet 在幾分鐘內建立員工目錄應用程式。該應用程式將讓您透過漂亮的用戶介面追蹤和更新員工資訊。 查看可用[功能列表](https://github.com/ToolJet/ToolJet?tab=readme-ov-file#all-features)，包括 45 多個內建響應式元件、50 多個資料來源等等。 您可以閱讀[文件](https://docs.tooljet.com/docs/)並查看[操作指南](https://docs.tooljet.com/docs/how-to/use-url-params-on-load)。 它們在 GitHub 上有 26k+ Stars，並且基於 JavaScript 建置。他們也獲得了 GitHub 的資助，從而建立了巨大的信任。 {% cta https://github.com/ToolJet/ToolJet %} Star ToolJet ⭐️ {% endcta %} --- 15. [Apitable](https://github.com/apitable/apitable) - 用於建立協作應用程式的 API 導向的低程式碼平台。 ---------------------------------------------------------------------------------  APITable 是一個面向 API 的低程式碼平台，用於建立協作應用程式，並表示它比所有其他 Airtable 開源替代品都要好。 有很多很酷的功能，例如： - 即時協作。  - 您可以產生自動表單。  - 無限的跨錶連結。  - API 第一個面板。  - 強大的行/列功能。  您可以閱讀完整的[功能清單](https://github.com/apitable/apitable?tab=readme-ov-file#-features)。 您可以嘗試[apitable](https://aitable.ai/)並在 apitable 的[live Gitpod demo](https://gitpod.io/#https://github.com/apitable/apitable)中查看該專案的演示。 您也可以閱讀[安裝指南](https://github.com/apitable/apitable?tab=readme-ov-file#installation)，在本機或雲端運算環境中安裝 APITable。 {% cta https://github.com/apitable/apitable %} Star Apitable ⭐️ {% endcta %} --- 16. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 -----------------------------------------------------  n8n 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型，n8n 將始終擁有可見的原始程式碼，可用於自託管，並允許您加入自訂函數、邏輯和應用程式。 每個開發人員都想使用的工具。自動化是生產力和簡單性的關鍵。  n8n 基於節點的方法使其具有高度通用性，使您能夠將任何事物連接到任何事物。 有[400 多個集成選項](https://n8n.io/integrations)，這幾乎是瘋狂的！ 您可以看到所有[安裝](https://docs.n8n.io/choose-n8n/)選項，包括 Docker、npm 和自架。 開始使用以下命令。 ``` npx n8n ``` 此命令將下載啟動 n8n 所需的所有內容。然後，您可以透過開啟`http://localhost:5678`來存取 n8n 並開始建置工作流程。 在 YouTube 上觀看此[快速入門影片](https://www.youtube.com/watch?v=1MwSoB0gnM4)！ {% 嵌入 https://www.youtube.com/watch?v=1MwSoB0gnM4 %} 您可以閱讀[文件](https://docs.n8n.io/)並閱讀本[指南](https://docs.n8n.io/try-it-out/)，以便根據您的需求快速開始。 他們還提供初學者和中級[課程，](https://docs.n8n.io/courses/)以便輕鬆學習。 他們在 GitHub 上有 39k+ Stars，並提供兩個包供整體使用。 {% cta https://github.com/n8n-io/n8n %} 明星 n8n ⭐️ {% endcta %} --- 17. [DOMPurify](https://github.com/cure53/DOMPurify) - 一個僅限 DOM、超快、超級容忍 XSS 的 HTML 清理程式。 ----------------------------------------------------------------------------------------  DOMPurify 是一款僅限 DOM、超快、超級容忍 XSS 的 HTML、MathML 和 SVG 清理工具。作為開發人員，我們的應用程式需要它來確保它們足夠安全。 DOMPurify 可以淨化 HTML 並防止 XSS 攻擊。 您可以向 DOMPurify 提供一個充滿髒 HTML 的字串，它將傳回一個包含乾淨 HTML 的字串（除非另有配置）。 DOMPurify 將刪除所有包含危險 HTML 的內容，從而防止 XSS 攻擊和其他惡意行為。這也太快了。 他們使用瀏覽器提供的技術並將其轉變為 XSS 過濾器。您的瀏覽器速度越快，DOMPurify 的速度就越快。 DOMPurify 使用 JavaScript 編寫，適用於所有現代瀏覽器（Safari (10+)、Opera (15+)、Edge、Firefox 和 Chrome - 以及幾乎所有使用 Blink、Gecko 或 WebKit 的其他瀏覽器）。它不會在 MSIE 或其他舊版瀏覽器上中斷。它根本什麼都不做。 開始使用以下 npm 指令。 ``` npm install dompurify npm install jsdom // or use the unminified development version <script type="text/javascript" src="src/purify.js"></script> ``` 您可以這樣使用它。 ``` const createDOMPurify = require('dompurify'); const { JSDOM } = require('jsdom'); const window = new JSDOM('').window; const DOMPurify = createDOMPurify(window); const clean = DOMPurify.sanitize('<b>hello there</b>'); ``` 如果您遇到問題，請參閱[文件](https://github.com/cure53/DOMPurify?tab=readme-ov-file#how-do-i-use-it)。他們已經記錄了使用腳本或在伺服器端執行它。 您可以看到一些 [純化樣品](https://github.com/cure53/DOMPurify?tab=readme-ov-file#some-purification-samples-please)並觀看[現場演示](https://cure53.de/purify)。 使用起來也非常簡單。 DOMPurify 於 2014 年 2 月啟動，同時版本已達 v3.1.0。 其中涉及到很多概念，我渴望探索它們。如果您有任何與此相關的令人興奮的事情，請告訴我。 我發現的另一個有用的替代方案是[validator.js](https://github.com/validatorjs/validator.js) 。 他們在 GitHub 上擁有超過 12,000 顆星，被超過 30 萬開發者使用，每週下載量超過 5,475,000 次，這使得他們非常可信。 {% cta https://github.com/cure53/DOMPurify %} 明星 DOMPurify ⭐️ {% endcta %} --- 18. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼，更多的內容。 -----------------------------------------------------------------------   這是一個開源專案，旨在複製 Devin，一名自主人工智慧軟體工程師，能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道，這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM，因此您可以使用任何基礎模型來執行 OpenDevin，包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻，您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star，並且正在快速成長。 {% cta https://github.com/OpenDevin/OpenDevin %} 明星 OpenDevin ⭐️ {% endcta %} --- 19. [Amplification－](https://github.com/amplication/amplication)後端開發平台。 -----------------------------------------------------------------------  我想我們都同意，如果我們要達到標準，設定後端並從頭開始是很困難的。 我知道 Appwrite 和 Supabase 在功能方面要好得多，但每種情況都是獨特的，這可能會點擊而不是那些。  Amplication 旨在徹底改變可擴展且安全的 Node.js 應用程式的建立。 他們消除了重複的編碼任務，並提供可立即投入生產的基礎設施程式碼，這些程式碼根據您的規範精心定制，並遵循行業最佳實踐。 其用戶友好的介面促進了 API、資料模型、資料庫、身份驗證和授權的無縫整合。 Amplication 建立在靈活的、基於插件的架構之上，允許輕鬆定製程式碼並提供大量整合選項。   您可以閱讀[文件](https://docs.amplication.com/)並查看可用的[社群插件](https://docs.amplication.com/plugins-list/)清單。 他們還提供了[逐步教程](https://docs.amplication.com/tutorials/#step-by-step-tutorials)，以幫助您使用 Angular 或 React 建立應用程式。 Amplification 在 GitHub 上擁有超過 13k 顆星，發布了 170 多個版本，因此它們不斷發展。 {% cta https://github.com/amplication/amplication %} 星狀放大 ⭐️ {% endcta %} --- 20. [Embla 旋轉木馬](https://github.com/davidjerleke/embla-carousel)-。 ------------------------------------------------------------------  我們都在應用程式中使用輪播，有時會切換到網格佈局，因為輪播並不總是好看，但這會改變您對輪播的看法。 我之所以了解 Embla Carousel，是因為 Shadcn/ui 在他們的 UI 系統中使用了它。 Embla Carousel 是一個簡單的輪播庫，具有出色的流暢運動和出色的滑動精度。它與庫無關、無依賴性且 100% 開源。 如果您不確定，我建議您查看[基本的實例](https://www.embla-carousel.com/examples/predefined/)。     我最喜歡的是視差，它可以提供非常酷且平滑的過渡。 它們支援 CDN、react、Vue、Svelte 和 Solid。 開始使用以下 npm 指令 (react)。 ``` npm install embla-carousel-react --save ``` 您可以這樣使用它。 Embla Carousel 提供了方便的 useEmblaCarousel 鉤子，用於與 React 無縫整合。最小的設定需要一個溢出包裝器和一個滾動容器。 `useEmblaCarousel`掛鉤將 Embla Carousel 選項作為第一個參數。您還需要使用 useEffect 存取 API ``` import React, { useEffect } from 'react' import useEmblaCarousel from 'embla-carousel-react' export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }) useEffect(() => { if (emblaApi) { console.log(emblaApi.slideNodes()) // Access API } }, [emblaApi]) return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> ) } ``` 他們還提供了一組插件，您可以加入它們以實現自動播放等額外功能。 ``` npm install embla-carousel-autoplay --save ``` ``` import React, { useEffect } from 'react' import useEmblaCarousel from 'embla-carousel-react' import Autoplay from 'embla-carousel-autoplay' export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()]) return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> ) } ``` 尋找[插件的完整列表](https://www.embla-carousel.com/plugins/)，包括自動滾動和滾輪手勢。 您可以閱讀有關如何實現不同部分（例如斷點或上一個/下一個按鈕）的[文件](https://www.embla-carousel.com/get-started/)和[指南](https://www.embla-carousel.com/guides/)。 最讓我驚訝的部分是，您可以使用他們的[生成器](https://www.embla-carousel.com/examples/generator/)使用您自己的一組選項來產生自訂輪播。   它們在 GitHub 上擁有 4.9K 顆星，並被超過 26000 名開發人員使用。如果我必須使用一個，我肯定會使用這個。 {% cta repo %} 明星名稱 ⭐️ {% endcta %} --- [21.Documenso](https://github.com/documenso/documenso) - 開源 DocuSign 替代方案。 --------------------------------------------------------------------------  如果您從事自由職業並需要簽署協議，這是最佳選擇。我們不應該浪費時間，而應該專注於重要的事情。 以數位方式簽署文件應該既快速又簡單，並且應該成為全球簽署的每個文件的最佳實踐。 如今，這在技術上相當簡單，但它也為每個簽名引入了一個新方：簽名工具提供者。 此專案的技術堆疊包括 TypeScript、Next.js、Prisma、Tailwind CSS、shadcn/ui、NextAuth.js、react-email、tRPC、@documenso/pdf-sign、React-PDF、PDF-Lib、Stripe 和韋爾塞爾。   免費套餐可讓您每月簽署 10 份文件，這已經足夠了。 您可以閱讀本文以了解如何[設定專案](https://github.com/documenso/documenso?tab=readme-ov-file#developer-setup)。 您可以閱讀[文件](https://github.com/documenso/documenso?tab=readme-ov-file#developer-quickstart)。 我知道這不是一個非常廣泛的用例，但您仍然可以從程式碼中學習，因此這始終是一個優點。 他們在 GitHub 上擁有超過 5800 顆星，並且發布了`v1.5`版本。 不是很流行但非常有用。 {% cta https://github.com/documenso/documenso %} 明星 documenso ⭐️ {% endcta %} --- 哇！ 這花了我很長很長的時間來寫。我希望你喜歡它。 我知道人工智慧工具有時太多了，但我們應該使用它們來讓我們的工作更輕鬆。我的意思是，這就是我們所做的正確的事情，讓生活變得更輕鬆。 我嘗試涵蓋廣泛的工具。 不管怎樣，請讓我們知道您的想法以及您計劃在您的工作流程中使用這些工具嗎？ 祝你有美好的一天！直到下一次。 我建立了很多技術內容，因此如果您能在 Twitter 上關注我來支持我，我將不勝感激。 |如果你喜歡這類東西， 請關注我以了解更多:) | [](https://twitter.com/Anmol_Codes) [](https://github.com/Anmol-Baranwal) [](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注 Taipy 以了解更多此類內容。 {% 嵌入 https://dev.to/taipy %} --- 原文出處：https://dev.to/taipy/21-tools-to-take-your-dev-skills-to-the-moon-53mf
Visual Studio Code 是目前市場上非常受歡迎且使用者友好的程式碼編輯器。如果您專注於使用 JavaScript 框架進行前端開發，這些擴充功能可以大大提高工作效率並節省您的時間。 在眾多類似的文章中，這篇文章有何不同？嗯，這是基於我個人的開發經驗。同事經常詢問我使用的擴充程序，本文分享了他們的見解。如果您正在尋找久經考驗的擴充功能來增強您的編碼體驗，那麼您可以在這裡找到它們。 文字格式和可讀性 -------- ### [Prettier — 程式碼格式化程序](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 此擴充功能會自動格式化您的程式碼，使其看起來整潔且一致。這就像有一個私人助理來整理你的程式碼，可以節省你大量的時間和精力。可以根據我們專案的需求進行配置。 ### [色彩高光](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) 這個擴充功能是一個被低估且有用的工具，專門用於 UI 開發。它在程式碼編輯器中突出顯示顏色，使您可以輕鬆地使用顏色程式碼並確保精美的視覺呈現。在下面的螢幕截圖中，顏色`#43feee`被突出顯示，減少了出錯的機會。  ### [凹入彩虹](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 它透過使用縮排顏色視覺化縮排等級來提高程式碼的可讀性。此擴展為每個縮排層級加入了微妙的顏色變化，使嵌套程式碼結構更易於一目了然地解析。  ### [改變大小寫](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case) 它提供了在camelCase、CONSTANT\_CASE或snake\_case之間進行轉換的直覺快捷方式，使大小寫轉換無縫且輕鬆。  ### [程式碼拼字檢查器](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 它有助於發現程式碼中的拼字錯誤和拼字錯誤，確保程式碼更清晰、更具可讀性。它是維護程式碼品質和避免意外錯誤的有用工具。  --- 程式碼品質和改進 -------- ### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) ESLint 是確保 JavaScript 程式碼品質的寶貴工具。它會掃描您的程式碼中的錯誤、樣式不一致和常見錯誤，這有助於您維護更乾淨、更可靠的程式碼。您可以透過在設定檔中建立一組自訂[規則](https://eslint.org/docs/latest/rules/)來為您的專案配置 ESLint。 例如，如果您的專案禁止嵌套三元表達式，ESLint 將在您的編輯器中標記它們。同樣，如果沒有定義像 DDMMYYYY 這樣的變數，ESLint 會突出顯示它。您甚至可以指定每種類型問題的嚴重性級別，從而確定優先順序並相應地解決它們。這種積極主動的程式碼品質方法有助於防止錯誤並保持整個專案的一致性。  ### [誤差鏡頭](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) 它是一個 VS Code 擴展，可增強程式碼編輯器中的錯誤突出顯示。它提供常見錯誤和警告的即時回饋，使開發人員能夠在編寫程式碼時快速解決問題。  ### [JS重構助手](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) 對於使用 JavaScript、TypeScript、React 和 Vue.js 的開發人員來說，這是一個不可或缺的工具。它提供了超過 120 個程式碼操作，可以有效地編輯、現代化和重構程式碼，使程式碼維護和最佳化變得更加容易。  ### [聲納林特](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode) 它提供了比簡單的 linting 更全面的程式碼分析。 SonarLint 不僅可以偵測編碼問題，還可以更深入地了解程式碼品質、安全漏洞和潛在的效能瓶頸。 它利用基於行業最佳實踐的規則集，並可以與 SonarQube 或 SonarCloud 整合以進行集中程式碼品質管理。對於較大的專案，強烈建議這樣做。  --- 開發工具和實用程式 --------- ### [控制台忍者](https://marketplace.visualstudio.com/items?itemName=WallabyJs.console-ninja) 它透過直接在程式碼旁邊顯示 console.log 輸出和執行時錯誤來改進 JS 開發工作流程。此擴充功能提供了對偵錯資訊的便捷存取，增強了程式碼理解和問題解決。  ### [Turbo 控制台日誌](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) 它加速了寫入有意義的日誌訊息的過程。此擴充功能可自動插入 console.log 語句，從而在偵錯和故障排除任務期間節省時間和精力。這是我的清單中最常用的擴充功能之一，經常被問到。 1. 選擇或懸停作為除錯主題的變數（手動選擇將始終接管懸停選擇） 2. 按`ctrl + alt + L` (Windows) 或`ctrl + option + L` (Mac) 日誌訊息將插入到與所選變數相關的下一行。  ### [吉特透鏡](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 對於依賴 Git 進行版本控制的開發人員來說，它是必備的擴充。透過 GitLens，您可以輕鬆地視覺化程式碼作者身份、瀏覽 Git 儲存庫，並獲得有關專案歷史和演變的寶貴見解。  GitLens 的主要功能之一是它能夠直接與程式碼內聯顯示詳細註釋或「指責」訊息。這使您可以查看誰最後修改了每行程式碼以及進行更改的時間。透過提供這種程度的程式碼作者可見性，GitLens 可以幫助您了解每行程式碼背後的上下文，並與您的團隊更有效地協作。  ### [Mintlify 文件編寫器](https://marketplace.visualstudio.com/items?itemName=mintlify.document) 它是一款基於 AI 的 VS Code 文件工具。它為使用各種程式語言編寫文件提供智慧建議和自動完成功能。 透過支援 Markdown 格式並與 VS Code 無縫集成，它可以幫助開發人員輕鬆建立專業文件。  ### [進口成本](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 此擴充功能將在編輯器中內嵌顯示導入包的大小。此擴充功能利用 webpack 來偵測導入的大小。 它透過辨識專案中使用的重型庫來幫助提高性能。  --- 特定語言的工具 ------- ### [自動關閉標籤](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) 當您在開始標記的右括號中鍵入內容時，它會自動新增 HTML/XML 結束標記。這種節省時間的功能減少了手動工作量並簡化了編碼，從而實現更快、更有效率的開發。  ### [自動重命名標籤](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 當我們重新命名一個標籤時，它會自動重新命名已配對的 HTML/XML 標籤。這個小但有用的功能可以節省時間，使編碼更有效率和愉快。  ### [CSS轉換器](https://marketplace.visualstudio.com/items?itemName=Lakkannawalikar.css-converter) 它將 HTML CSS 轉換為 JS CSS 以用於樣式化元件，反之亦然。 1. 選擇要轉換的 CSS 文本 2. 輸入`Shift + Command + V` (mac)、 `Shift + Ctrl + V` (windows/linux)  --- 測試和測試覆蓋率 -------- ### [是](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) 它可以幫助開發人員直接在編輯器中執行和除錯 Jest 測試。憑藉內嵌測試結果和直覺的導航，它簡化了 JavaScript 專案的測試工作流程。  ### [覆蓋範圍](https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters) 它有助於直接在程式碼編輯器中顯示 lcov 或 xml 報告產生的測試覆蓋率資料，並提供對程式碼覆蓋率的深入了解，幫助您評估測試套件的有效性。無需切換到另一個窗口，從而節省了時間。  --- 獎金 -- ### [瓦卡時間](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) 它會自動追蹤您跨不同程式語言的編碼時間，提供寶貴的見解來優化您的生產力。  ### 自動儲存 VS 程式碼設定 我發現一個有用的省時技巧是將“自動儲存 VS 程式碼”設定配置為 onFocusChange。這意味著每當我切換到不同的檔案或應用程式時，我的更改都會自動儲存。這樣就無需手動儲存檔案並避免遺失任何修改的風險。此外，對於行動或網頁應用程式，此設定允許我在切換到瀏覽器或模擬器時立即看到更新的更改，從而加快開發過程。  --- 最後的話 ---- 上述這些工具透過自動化任務和簡化工作流程顯著改善了開發體驗。它們透過在程式碼編輯器中提供程式碼格式化、錯誤偵測和版本控制整合等功能，為開發人員節省了大量的時間和精力。 --- 原文出處：https://dev.to/saloniagrawal/boost-productivity-quality-essential-vs-code-extensions-18oj
我正式擁有三年經驗和中級職稱。自從兩年前我寫下了[我作為專業開發人員第一年學到的 12 件事](https://dev.to/abbeyperini/12-things-i-learned-during-my-first-year-as-a-professional-developer-i0f)以來，我的最佳建議已經發生了很大的變化。 1. 水平不重要，結果才重要 -------------- 如果你正在解決他們的問題，沒有人會問你已經開發了多久。不要僅僅因為某個主題被稱為高級而推遲學習您感興趣的主題。你永遠不知道你會被要求建造什麼，所以它可能會比你想像的更快派上用場。 2.不要死記硬背 --------  了解如何找到您需要的資訊。我不是說 StackOverflow 和 GenAI。對於您使用的工具和語言，請了解規範或文件所在的位置。找出誰寫了最好的指南。 如果您不記得了，也沒關係`?`當您要使用 JavaScript 條件運算子時，or `:`首先出現。重要的是您知道何時使用條件運算符以及在哪裡可以找到確切的語法。 工具不斷更新。請務必檢查您正在閱讀的文件的版本。找到一種方式來了解最新情況，無論是新聞通訊還是真正喜歡 CSS 的朋友。 3. 深入基礎知識 --------- 聽聽在 3 年內使用過 3 個 JavaScript 框架的人的話——如果你很好地了解基礎知識，那麼在生態系統中學習新工具就會容易得多。您最終可能會編寫出更簡單、更強大的軟體。您不會嘗試編寫已經存在的功能，因為您不知道它們存在。您將更了解所遇到的錯誤，並在導致錯誤之前預見錯誤。 4.系統思考會讓你走得更遠 ------------- 解決任何錯誤都需要係統思考。如果您不考慮牆上的插頭，當烤麵包機無法打開時您就不會想到檢查它。能夠將系統作為一個整體來思考，可以更輕鬆地預測邊緣情況並設計新功能。在[新程式碼庫入門中](https://dev.to/abbeyperini/getting-started-in-a-new-codebase-e7b#6-mental-models)閱讀有關如何為程式碼庫建立心理模型的更多訊息 5.先嘗試再問，確保問題永遠不會是個愚蠢的問題 ----------------------- 開發人員通常以解決問題為導向。如果你能證明你嘗試了一些方法但沒有奏效，那麼他們可能會想深入挖掘自己，找出為什麼明顯的解決方案不起作用。 6.每一行程式碼都是一種責任 --------------  編寫程式碼就像其他人必須修復它一樣。 （即使 6 個月後那個人就是你。）安裝軟體包，就像你必須經常更新它們一樣。記錄原因，這樣以後就不會意外破壞某些東西。在將某個固執己見的工具整合到您的系統之前，先了解它的意見，並找出它的意見與您所需的功能相衝突。 7.練習閱讀別人的程式碼 ------------ 通常教授軟體開發的方式可能會讓您相信您經常會建立新鮮的、全新的應用程式。您更有可能修復現有程式碼庫並為其加入功能。您甚至可能花更多的時間閱讀程式碼而不是編寫程式碼。練習閱讀程式碼和重構程式碼而不引入新的錯誤。 8. 測試、測試、再測試 ------------ 正如[Chocho](https://www.linkedin.com/in/enriquezamudiolopez)在 DevNexus 2024 演講中所說，“程式碼就是理論。軟體就是實踐。”在請求審查之前，請始終執行您的程式碼並對其進行測試。盡可能多練習編寫測驗。您會發現，預測使用者如何破壞您的程式碼並考慮更多的事情，而不只是快樂的道路，將使您成為更好的開發人員。 9. 練習將需求轉化為軟體 ------------- 票#387 - 在頁面上新增一個按鈕，用於開啟模式並允許使用者編輯此資料。 預計您可以將這樣的需求轉換為步驟清單或偽程式碼。如果票證太模糊，您就有責任獲得所需的答案。 解決這些步驟後，您將需要將它們轉換為程式碼並（希望）對該程式碼進行測試。然後，您將負責透過公司的版本控制、（希望）審查、（希望）品質保證和部署流程來取得該程式碼。 開源是實踐這一點的好地方。 10. 社區極為重要 ---------- 你不會在社群媒體貼文中獲得最細緻、最公正的觀點。當您需要這種觀點時，您需要一個支持網絡來打電話。 指導是其中的一部分。參加當地的聚會和會議是建立人際網絡和擴展發展世界觀的好方法。加入網路小組將使您能夠了解資深開發人員的觀點。 不要試圖獨自完成這項工作。那裡有很多訊息，很容易讓人不知所措或視野狹隘。 11.找到你喜歡程式設計的地方 ---------------  我並不是說熱愛你的工作或成為難以捉摸的熱情程式設計師。然而，不斷的學習會讓你自己陷入反覆的不適。如果你不知道為什麼要繼續醒來並對自己做這些事，你就會精疲力盡。這完全可能是個自私的原因，但你必須知道為什麼。 12.每個人都在自己的旅程上 -------------- 您不會與他人的職業和內容競爭。別人的成功之路可能根本不適合你。專注於您獨特的視角和優勢。尋找並分享您的聲音。外面有人想聽聽看。 結論 -- 查看我（或其他任何人）的個人資料可能會讓您相信我通往中級開發人員的道路是筆直而順利的。事實恰恰相反。我跌倒過，哭過，刺破過，精疲力竭過，還被困過很多兔子洞。 因此，我必須衷心感謝我的丈夫、家人、朋友和科技社群幫助我站穩腳步。我還必須感謝許多同事給予我發揮潛能的機會。沒有你們，我不可能走到這一步。我很感激我有這樣的經驗。 --- 原文出處：https://dev.to/abbeyperini/12-tips-from-a-mid-level-developer-29bk
**現在是 2024 年，您又建立了另一個 JavaScript 框架。說真的，夥計！** 當您談論另一個 Javascript 框架時，您可能會笑並認為有大量經過驗證的選項，為什麼還要建立另一個框架？ 🤷♂️ 讓我與您分享我的個人故事，它導致了新的 Javascript 框架的發展。但如果你不關心我的可悲的故事，這裡是 TLDR： > **TiniJS**是一個元框架，由基於 Google [Lit](https://lit.dev/)庫的**Web 元件**技術提供支援。 > 您可以先下載[入門範本](https://github.com/tinijs/bare-starter)或使用 CLI 初始化應用程式，執行`npx @tinijs/cli@latest new my-app`並按照說明進行操作。 > 有關更多詳細訊息，請參閱下面的**“入門”**部分或存取<https://tinijs.dev/> 。 故事 --  開個玩笑吧，我不是 Javascript 的專家，但我想稍微介紹一下我的背景，這樣您可能就會知道我關於前端 Web 開發的煩惱故事。我曾經是 Angular 1 版本的開發人員，目前主要使用 Vue，偶爾使用 jQuery。我有這**3 個 PITA** （Pain In The \*beep\*）經歷，這促使我嘗試使用 TiniJS 框架。 > **PITA #1 - 建立良好的 UI/UX 很困難，既乏味又耗時！** 早在 2010 年左右，就有兩種不同類型的網站：一種有大量文本、連結，幾乎沒有一些圖片；另一種有大量文本、連結，幾乎沒有一些圖片。其他的則包含大量的圖形元素，例如 GIF 圖像、Flash 背景、彩虹遊標… 人們往往有**後端難前端容易的**刻板印象。這有點正確，但不完全正確，我的意思是，我該怪誰，對吧？因為只要有一點 HTML 和 CSS 知識，您就可以非常輕鬆地建立靜態網站。但是，為了建立良好的 UI/UX，還有很多事情需要考慮。你必須成為更多事情的大師，而它們一點也不容易！  > **PITA #2 - CSS 框架缺乏功能並且自訂它們不是很有效！** 人們意識到前端開發的困難，開始建立CSS框架來幫助解決這個問題。 Bootstrap是這一趨勢的先驅之一，其他流行的有：Foundation、Semantic UI、Bulma、Skeleton、Pure CSS…這些CSS框架很棒，毫無疑問，它們幫助我們建立一個好的UI/使用者體驗更快，但它們也有自己的限制。 首先，儘管所有框架都提供了一定的方式來定制樣式，但總的來說，我覺得這對我來說不是很容易和可重用。  二是功能缺失。我的意思是，它們主要是 CSS，它們提供一些功能，通常是作為 JQuery 的插件。大多數情況下，您必須編寫自己的 Javascript 才能使功能正常運作。 > **PITA #3 - JavaScript 框架勢不可擋，而且有點多餘！** 進入現代 Web 開發時代，Javascript 框架已成為新趨勢。但問題是我們有太多的選擇，這既是福也是禍。它們提供了很棒的功能，但互通性不太好，您不能只從一個框架中取出一段程式碼並在另一個框架中使用它。特別是，為特定框架建立一個具有單獨套件的 UI 系統是一項非常艱鉅的任務。  每次我開始一個專案或做某種前端工作時，前端web的碎片化對我來說都有些痛苦。這似乎就是生活方式，無可避免，不是嗎？請不要誤會我的意思，我並不反對任何框架，我傾向於選擇解決方案而不是技術，所以如果它適合你，就用它吧。但我想知道有什麼辦法可以以某種方式統一或縮小前端開發經驗的差距嗎？ 🤔 介紹 TiniJS --------- 這就是我嘗試**TiniJS 框架**一段時間的原因。它是基於[Lit](https://lit.dev/)庫、使用本機**Web 元件**技術開發 Web/桌面/行動應用程式的工具集合。感謝[Lit](https://lit.dev/)團隊建立了一個出色的工具，幫助我們更輕鬆地使用標準 Web 元件。 它的目標是盡可能**標準化、小型化和多功能化**。與其他框架和元框架沒有真正的可比性，但總體而言，它具有相似的功能，但另一方面也有關鍵的區別。它既是替代選擇，也是對其他框架的補充。您可以使用 TiniJS 建立各種類型的應用程式：**登陸頁面、SPA、PWA、桌面應用程式、行動應用程式**…就功能而言，任何在 Javascript 中工作的內容都應該在 TiniJS 應用程式中正常運作。 整個系統由幾個部分組成，這是一個快速介紹。 > 請注意，**並非所有部件現在都可用**，該專案還處於早期階段，有些是**之前的實驗**，我盡力盡快將它們投入使用。但我的時間和資源有限，所以請耐心等待，如果可能的話請幫助我。 🙇♂️ > V1 的計畫及其路線圖可在<https://github.com/tinijs/tinijs>找到 ### 核 **TiniJS 的**核心提供了傳統的專案結構和簡化的開發流程。有**用於組織內容的資料夾**，**用於開發的本機伺服器**，在分發時，您可以選擇 Vite 或 Parcel 或 Webpack 來**建立產品**。 核心還包括：用於在頁面之間導航的**路由器**、用於全域狀態管理的簡單**儲存**、支援**PWA** ，... 您可以嘗試[Try TiniJS 中的範例專案（範例照片庫應用程式）](https://stackblitz.com/edit/try-tinijs?file=app%2Fapp.ts) ### 使用者介面系統 TiniJS 有一個專用的**UI 庫，我的目標是提供每個常用的元件和區塊甚至整個頁面**。元件以特殊的方式建置，它們是自訂元素，不僅可以與 TiniJS 一起使用，還可以與其他框架或不使用框架一起使用。  使用可重複使用元件很容易，通常是以將 props 傳遞給自訂元素標籤的形式。自訂可以透過 props 或 CSS `::part()`或自訂主題系列或完全克隆元件來源來完成，... 元件還能夠以盡可能小的努力適應幾乎所有設計系統。這是透過主題系統實現的，概念是這樣的： - 元件**只寫一次**，它們是**無頭的**（沒有特定的樣式） - 主題被組織成**系列**（又稱設計系統），系列定義自己的基本特徵，例如：Bootstrap、Material、Fluent、Spectrum，... - 根據基本特徵，一個系列有風格變體，稱為**“皮膚”** ，例如，Bootstrap 系列可能有：淺色皮膚、深色皮膚… 考慮到主題概念，任何應用程式都可以具有以下主題功能： - **一個**主題系列 - 可能是當今存在的所有網路應用程式中的 80% 到 90%，只有 1 種特定風格相當於 TiniJS 1 主題系列。 - **一個**主題系列 + 多個皮膚 - 常見的用例是亮/暗模式，相當於 TiniJS 1 主題系列，具有來自同一系列的多個皮膚。 - **多個**主題系列 - 高度個人化的應用程式可能有多個主題系列，每個系列都有一個或多個皮膚，將根據使用者參考應用某個主題。 UI 使用詳細資訊將在[主頁](https://tinijs.dev/ui)上提供，現在您也可以在<https://ui.tinijs.dev/>查看實驗概念，以查看該概念的實際應用。 ### 網頁、PWA、混合桌面/行動設備 預設的 TiniJS 應用程式是**單頁應用程式**，它小而快速，可以直接部署為 Web 應用程式。但是，您也可以將 TiniJS 轉換為以下一種或所有類型的應用程式： - **漸進式 Web 應用程式**(PWA) - 使用單一 CLI 命令實作（即將推出） - 混合**桌面/行動**應用程式 - 使用 Tauri 2.0 或類似工具（todo：編寫指令） ### 靜態和伺服器 TiniJS 應用程式可以作為靜態網路啟動，無論大小，無需伺服器或資料庫。您始終可以使用 SaaS 服務來滿足幾乎任何後端需求。我還在開發`@tinijs/content` - 一個基於文件的內容管理系統，用於輕鬆管理多種類型的內容。靜態站點產生（SSG）或預渲染也在計劃中。 如果您需要處理後端任務並參考從 Node 伺服器而不是靜態主機為 Web 應用程式提供服務，則可選的 Nitro 伺服器用於**伺服器/API 路由**和其他**伺服器內容**。我的開發能力有限，因此第一個版本可能不支援伺服器端渲染（SSR），相反，我計劃使用半SSR，其中伺服器將為用戶提供單頁服務，並向機器人提供最少的伺服器端渲染內容。 ### 功能和模組 在功能方面，由於 TiniJS 應用程式**基於標準 Web 技術**，因此在瀏覽器中工作的任何程式庫和功能都可能在 TiniJS 應用程式中運作。因此，與其他框架相比，您可能**不必擔心功能**。您甚至可以在 TiniJS 應用程式中使用其他框架，例如初始化 Vue 應用程式並將其安裝到 TiniJS 頁面內的元素。 還有一個模組架構師，以便某些模組可以進入 TiniJS 應用程式的工作流程，建立更簡化的開發管道。 ### 工具 官方 CLI 工具提供了一些使用 TiniJS 應用程式的便利命令。 - `dev` - 啟動本機開發伺服器 - `build` - 建構生產分配 - `preview` - 在部署之前預覽生產版本 - `generate` - 生成元件、頁面、實用程式... 此外，CLI**足夠通用，可以在 TiniJS 應用程式以外的任何類型的專案中使用**。它具有可擴展的架構，您可以在其中擴展更多命令以用於其他自動化任務。一些官方擴展，例如`ui`命令（來自`@tinijs/ui` ）用於處理 UI 任務或`content`命令（來自`@tinijs/content` ）用於處理內容相關任務，...您可以根據自己的目的建立 CLI 擴展包私人或共享。 好了，說得夠多了，讓我看看一些行動吧！ 👌 開始使用 ---- **Tini** （越南語中的“ [Tí nị](https://translate.google.com/?sl=vi&tl=en&text=t%C3%AD%20n%E1%BB%8B&op=translate) ”，意思是非常小、可愛的東西）。 為了快速建立**TiniJS**專案，您可以使用[CLI](https://tinijs.dev/cli)來初始化模板。 ``` npx @tinijs/cli@latest new my-app ``` 上面的命令透過下載**Bare**模板來建立一個應用程式。將來，我想提供幾個入門範本。您還可以建立自己的模板並與社區共享或供您自己私人使用。目前，這些模板可用： - [Bare](https://github.com/tinijs/bare-starter) （預設）- TiniJS 應用程式的最小結構。 - [空白](https://github.com/tinijs/blank-starter)（標誌`-t blank` ）- 包含路由器、狀態管理、元標記管理和[Bootstrap 主題系列](https://tinijs.dev/ui)。 現在，在專案內部，您可以執行`npm run dev`來啟動開發伺服器。您可以透過編輯檔案`./app/app.ts`來開始開發，該檔案是應用程式的根元件。有關如何使用 Lit 處理自訂元素，請存取[Lit 元件](https://lit.dev/docs/components/overview/)， `LitElement`和`TiniComponent`之間存在一些差異，但現在您可以像平常一樣修改`static styles`和`render()` 。 若要建立發行版，請執行`npm run build`並可選擇執行`npm run preview`以預覽生產版本。現在您可以將`.output`資料夾部署到任何靜態主機。 您可能需要查看這些範例以了解 TiniJS 應用程式如何運作的更多細節。 - 首頁 - <https://github.com/tinijs/tinijs/tree/main/apps/tinijs.dev> - 待辦事項應用程式 - <https://github.com/tinijs/tinijs/tree/main/examples/todo> 這就是**TiniJS 框架**的基本介紹。下次我們將探索**TiniJS 應用程式的結構並使用元件**。 欲了解更多訊息，請存取： <https://tinijs.dev> 謝謝您，編碼愉快！ 💖 --- 原文出處：https://dev.to/lamnhan/ive-created-yet-another-javascript-framework-5c5o
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
