🔍 搜尋結果:git

🔍 搜尋結果:git

Git 和 GitHub:如何復原單一檔案

原文出處:https://dev.to/lofiandcode/git-and-github-how-to-revert-a-single-file-dha ##介紹 一旦您開始與其他開發人員合作,了解如何將單一檔案還原到某個提交就變得很重要。出現這種需求是因為您有時需要更改與拉取請求無關的文件以測試您正在開發的功能。但是,手動將這些文件中的每一行程式碼變更回原始狀態並進行新的提交可能會導致提交歷史記錄混亂。恢復檔案是一種更清晰的處理方式。 ##找到提交ID 首先,您需要前往 GitHub 上的共用儲存庫並找到要復原的檔案。導航到該文件後,您應該在文件上方看到以下內容: ![替代文本](https://dev-to-uploads.s3.amazonaws.com/i/6muovwvd0kukchcrur91.png) 在右側,您可以看到 7 位數的提交 ID 和日期。這是修改該文件的最近一次提交的提交 ID。記下此提交 ID,或將其複製到剪貼簿。 ##找到檔案路徑 接下來您需要的是工作目錄中的檔案路徑。這部分很簡單,因為文件的路徑位於您找到文件的提交 ID 的相同 GitHub 畫面上。 ![替代文本](https://dev-to-uploads.s3.amazonaws.com/i/xl83nfi5q3h3bnzmjzm7.png) 在上面您可以看到與之前相同的螢幕截圖,但這次我在文件路徑下劃線了。請注意,我只在路徑的一部分下劃線了。列出的第一個目錄是工作目錄名稱,並且將是您使用此檔案路徑時所在的目錄。因此,您只需要下劃線部分。 ##恢復檔案。 剩下的就是恢復檔案了。打開終端並變更為工作目錄後,您可以使用“git checkout”來還原檔案。 git 指令的格式如下圖所示: `git checkout [提交 ID] -- 路徑/到/檔案` 如果我要恢復上面螢幕截圖中的文件,則將如下所示: ![替代文](https://dev-to-uploads.s3.amazonaws.com/i/dfby4ccbqcii9uwsptma.png) ##提交更改 我知道你在想什麼,“等一下,我認為重點是不建立新的提交?”嗯,這說對了一半。我們不想對我們恢復的文件進行新的提交。但是一旦我們恢復文件,我們就需要提交該更改。在這種情況下,更改是單一檔案的恢復。這是使用標準提交命令完成的: `git commit -m '提交訊息'` 然後,您可以將該提交推送到遠端,以便 GitHub 上的分支版本與您的本機版本相符。 ##總結 若要將單一檔案還原至特定版本,請執行下列操作: * 尋找要還原到的檔案版本的提交 ID。 * 找到要從工作目錄復原的檔案的路徑。 * 在終端機中,將目錄變更為工作目錄。 * 輸入 `git checkout [commit ID] -- path/to/file` 並按 Enter 鍵。 * 將更改提交到恢復的文件。 ##參考 [封面圖片](https://ih0.redbubble.net/image.591029586.5228/flat,550x550,075,f.jpg) [如何將檔案重設或還原到特定版本? - Stackoverflow](https://stackoverflow.com/questions/215718/how-can-i-reset-or-revert-a-file-to-a-specific-revision)

初級到資深 Web 開發人員:技能樹說明

原文出處:https://dev.to/aswin2001barath/junior-to-senior-web-developer-roadmap-breakdown-1525 您是初級開發人員,正在努力爬上公司的階梯並成為高級開發人員嗎? 您是一名感到迷茫、不知道從哪裡開始的全端開發人員嗎? 🤔 嗯,您來對地方了! 😎 這是初級開發人員成為受人尊敬的高級開發人員的逐步路線圖👨‍💻 ### 先決條件 - 基本的 HTML、CSS 和 JavaScript 知識。 - **MERN**(MongoDB、ExpressJS、ReactJS、NodeJS)或 **PERN**(PostgreSQL、ExpressJS、ReactJS、NodeJS)堆疊知識很有幫助,但不是必要的。 以下是路線圖中基本技術的細分,您可以在成為高級開發人員的過程中逐步遵循這些技術👨‍💻 ### SSH SSH 在安全遠端通訊中發揮著重要作用。透過熟悉 SSH 基礎知識、其命令、加密方法、SSH 金鑰管理以及將 SSH 應用於實際應用程式,您就可以順利成為高級開發人員。 - **到底什麼是 SSH?** - SSH 是 **S**ecure **Sh**ell 的縮寫,是一種旨在在兩台電腦之間建立安全通訊的協定。 (不用擔心這些花哨的術語——協議只是一堆規則,而 SSH 是一種特定類型的協議。) - **SSH 指令**:SSH 的主要用途之一是在遠端電腦上執行指令。這意味著您可以建立與伺服器的連接並使用 SSH 命令與其互動。 - **加密**:要真正掌握 SSH,了解加密等關鍵概念非常重要,其中涉及對稱和非對稱加密技術以及雜湊。這些概念為更深入地理解 SSH 的安全機制奠定了基礎。 - **SSH 金鑰**:SSH 的一個組成部分是使用 SSH 金鑰。這些密鑰由公鑰和私鑰組成。了解如何在伺服器上產生、管理和安全地儲存這些金鑰對於有效使用 SSH 至關重要。 - 練習並測試您的 SSH 技能: - 練習 SSH 技能的一個好方法是將本地電腦連接到 **GitHub** 等平台或 **DigitalOcean** 等雲端供應商。這種實務經驗將有助於鞏固您對 SSH 概念的理解。 - 想像這樣的場景:“您的 Web 應用程式一夜之間神秘地從伺服器上消失。您的任務是使用 SSH 將所有專案檔案恢復到伺服器上。”成功完成此任務可以展示您的 SSH 技能和解決問題的能力。基本上,如果你能做到這一點,那你就太棒了! ### 表現: 效能優化是您成為高級開發人員的關鍵技能。以下技術將幫助您確保應用程式平穩且有效率地執行。透過掌握它們,您將成為性能大師。 **I) 網路優化:** - **最小化檔案**:最小化檔案至關重要,因為較小的檔案會導致更快的載入時間。這不僅可以增強使用者體驗,還可以降低專案的頻寬成本。在網路速度不同的行動裝置造訪網站的時代,這一點尤其重要。 - 1. **檔案壓縮**:較小的檔案意味著使用者的下載速度更快。了解如何使用 GZIP 等檔案壓縮技術來最小化檔案大小,以減少 HTML、CSS 和 JavaScript 等基於文字的檔案的大小。 - 2. **影像最佳化**:透過調整大小、壓縮和選擇正確的影像格式來優化影像可以顯著減小檔案大小。 ImageMagick 等工具或 TinyPNG 等線上服務可以幫助您完成此過程。 - **改善應用程式的交付**:改進的交付可以加快頁面載入時間,這可以直接影響用戶的參與度和保留率。這對於全球可存取性和確保全球用戶獲得一致的體驗也至關重要。 - 1. **內容交付網絡(CDN)**:CDN 是一種分散式伺服器網絡,策略性地位於全球範圍內,用於從地理位置更靠近用戶的伺服器交付Web 內容,例如圖像、腳本和影片,從而更快的加載時間並減少延遲。作為初級開發人員,了解如何利用 CDN 來增強交付。 - 2. **HTTP/2 協定**:HTTP/2 是萬維網使用的 HTTP 網路協定的主要修訂版。它透過同時發送多個檔案並透過多路復用、壓縮和標頭優化等功能實現更快的載入時間來增強網站效能。實作 HTTP/2 協定可以顯著改善交付。 - 練習並測試您的網路優化技能: - 效能測試:初級開發人員可以透過使用 Google 的 PageSpeed Insights、GTmetrix 或 WebPageTest 等工具進行效能測試來進行練習。這些工具評估網站的效能並提供改進建議。 - 真實世界專案:初級開發人員可以透過參與真實世界專案進行練習。從頭開始建立和優化網站或 Web 應用程式可以提供實施網路優化的實務經驗。 **II) 前端優化:** - **關鍵渲染路徑以及如何改進它:** - 了解和優化關鍵渲染路徑對於使您的網站快速加載至關重要。它涉及優化從用戶請求網頁到視覺上完整的事件順序。關鍵面向包括最大限度地減少 CSS 和 JavaScript 等渲染阻塞資源、利用瀏覽器快取以及利用非同步載入技術。 - **漸進式 Web 應用程式 (PWA) 與程式碼最佳化:** - 開發漸進式 Web 應用程式涉及最佳化程式碼以獲得卓越的使用者體驗。 PWA 是一種 Web 應用程式,可提供類似本機應用程式的體驗,具有離線功能、推播通知和快速載入時間等功能。程式碼優化實踐包括高效的快取策略和最大限度地減少 JavaScript 執行,同時確保互動順暢。 - **建立離線就緒的漸進式 Web 應用程式 (PWA):** - 了解如何開發離線工作的 PWA,甚至使用 JavaScript、HTML 和 CSS 將其提交到應用程式商店。離線功能、快取和響應式設計是確保 PWA 無縫運作(無論使用者的網路連線為何)的重要組成部分。 - **程式碼分割:** - 程式碼分割是一種透過將 JavaScript 分成按需載入的較小套件來增強網站效能的策略。這種做法減少了初始載入時間並改善了整體使用者體驗,尤其是在較慢的網路連線上。 - **React 和 Redux 應用程式的智慧渲染:** - 透過智慧渲染技術提高 React 和 Redux 應用程式的速度。這涉及優化元件渲染和狀態管理,減少不必要的重新渲染,並確保您的應用程式快速響應用戶互動。 - 練習並測試您的知識: - 透過實際改善網站(例如公司登陸頁面)來提升您的技能。實施您在實際專案中學到的效能最佳化,然後測試結果。這種實務經驗對於鞏固您在前端優化方面的專業知識非常寶貴。 **III) 後端優化** 後端優化以及實踐和測試是確保您的應用程式能夠處理不斷增長的用戶群並提供高效、可靠的服務的基礎。 - **內容交付網路 (CDN):** - 內容交付網絡是分散式伺服器網絡,用於儲存網站內容的快取副本。這些伺服器策略性地分佈在全球各地,允許用戶從地理位置較近的伺服器存取資料。這可以減少延遲、加速內容交付並增強用戶體驗。 - **擴充資料庫:** - 擴展資料庫涉及擴展資料庫的容量和效能以處理增加的資料和流量。技術包括垂直擴展(向單一伺服器加入更多資源)或水平擴展(加入更多伺服器來分配負載),確保您的應用程式在成長時保持回應靈敏且可靠。 - **壓縮來自後端的回應:** - 壓縮來自後端的回應意味著減少從伺服器發送到客戶端的資料大小。 GZIP 壓縮等技術可以顯著減小響應大小,從而縮短載入時間並減少頻寬消耗。 - **快取:** - 快取涉及將經常存取的資料或內容儲存在記憶體或磁碟上,以便更快地檢索。實施快取策略可以縮短回應時間、減少伺服器負載並增強應用程式的整體效能。 - **負載平衡和負載測試:** - 實作負載平衡器對於在多個伺服器之間分配傳入網路流量至關重要。負載平衡可確保沒有任何一台伺服器不堪負荷,從而提高資源利用率並提高可靠性。 - 負載測試模擬現實條件,以辨識效能瓶頸、確保可擴充性並最佳化您的基礎架構。 - 練習並測試您的知識: - 實作負載平衡器。 - 對專案實際執行負載測試。 ### 前端框架與概念 前端開發是您成為資深開發人員的基石。熟悉這些概念將為網路開發事業的蓬勃發展鋪路。 - **React 和 Redux**:React 和 Redux 是建立動態單頁應用程式的首選函式庫。首先掌握 React 基礎知識並建立一個專案。然後,深入研究 Redux,了解狀態管理並建立應用程式以實現可擴展性。 - **Webpack4 + Parcel**:Webpack4 和 Parcel 是用於捆綁專案文件和優化生產包的最新工具。獲得使用 Webpack 設定專案的實務經驗。 - 練習並測試你的技能: - 透過使用 React 和 Redux 建立專案來測試您的知識。 - 了解使用 Webpack 設定專案的細節。 ### 測試: 測試是一個重要的主題,但也經常被初學者和初級開發人員忘記。 公司喜歡測試。因此,如果您知道如何編寫單元測試和整合測試,您將編寫更好的軟體。 - **軟體測試 101:** 了解什麼是測試、測試類型、目前 Web 開發世界中的測試環境、測試工具和函式庫的類型是什麼、如何使用它們以及如何設定一切。 - **Jest**:用於測試的頂級庫之一。學習編寫同步和非同步測試、編寫模擬並產生覆蓋率報告 - **React 測試**:然後深入為您的 React 應用程式編寫測試。學習使用快照測試和酵素來編寫智慧測試,以避免應用程式中出現錯誤。 到此結束時,您應該了解整個測試環境,並可以輕鬆地編寫您遇到的任何測試。 ### 打字稿: TypeScript 是目前 Web 開發環境中最熱門的話題之一。 - **靜態類型**:了解靜態類型的基礎知識。了解為什麼 JavaScript 沒有靜態型別而是動態型別。 - **Typescript 101**:了解什麼是 TypeScript、如何使用 TypeScript、有哪些不同類型以及如何將它們新增到您的專案中。 - **React 中的 Typescript**:最終學習如何將 TypeScript 新增到您自己的 React 專案中。 再次確保您掌握這些主題。 ### SPA + 伺服器端 - **伺服器端渲染 (SSR)**:透過伺服器端渲染深入研究 Web 渲染的起源。了解為什麼 SSR 在 Web 開發中曾經並且仍然有用。了解為什麼有些公司繼續依賴 SSR 來滿足特定需求。探索 React 中伺服器端渲染的實現,並權衡這種方法的優缺點。 - **客戶端渲染 (CSR)**:深入了解單頁應用程式 (SPA) 中的客戶端渲染。了解企業社會責任的優點和缺點。了解何時選擇客戶端渲染而不是伺服器端渲染。了解如何實作客戶端渲染並評估兩種渲染方法的優缺點。 - **Next.js**:探索 Next.js,這是一個簡化伺服器端動態應用程式所建立的函式庫。了解 Next.js 如何促進伺服器端渲染和互動式資料驅動 Web 應用程式的開發。 在本節結束時,您將準備好決定是否需要為您的專案使用單頁應用程式或伺服器端呈現的應用程式。 ### 安全: - **前端安全性最佳化**:學習跨網站腳本和 SQL 注入等註入攻擊。練習這些以了解它們是如何工作的。 - **後端安全優化**:了解有關後端安全的更多資訊以及管理敏感資料的最佳實踐。 - **道德駭客 101**:學習基本的道德駭客技術,以便我們在建立應用程式時能夠學習如何保護自己。 因此,在學習這些概念後,當您使用最新的提示和技巧以及實施最新的工具和技術來建立安全應用程式時,您必須充滿信心。 ### 碼頭工人: **Docker** 是一個容器化平台,可讓您將應用程式及其相依性打包到可移植、隔離的容器中。這些容器可以在從開發到生產的不同環境中一致運作。 Docker 是一個絕對會讓你驚嘆不已的工具。 - **容器**: - 首先深入了解容器及其對公司建立和管理應用程式的方式的深遠影響。 - 容器支援輕量級、一致且易於複製的環境,徹底改變了軟體開發和部署。 - **Docker 101**:製作容器 - 透過了解如何建立 Docker 檔案和建立自己的容器來了解 Docker 的基礎知識。 - 這些基礎知識構成了使用 Docker 輕鬆封裝和分發應用程式的基礎。 - **Docker-compose**:編排容器 - 探索 Docker-compose,一個用於編排多容器 Docker 應用程式的工具。 - 了解如何將多個容器作為單一服務進行定義、配置和管理,從而簡化複雜應用程式的部署。 - **微服務與單體架構**: - 在整體架構中,單一大型程式碼庫處理所有應用程式功能,這使得更新和擴展具有挑戰性。 - 容器支援微服務方法,其中應用程式被分為更小的、獨立的服務,可以單獨開發、部署和擴展。這種轉變提供了靈活性、可擴展性並提高了資源利用率。 - 容器(如 Docker)有助於從整體架構轉向微服務。因此,請詳細了解每種架構的優缺點。 - 練習並測試您的 Docker 技能: - 了解如何將 Redis 伺服器、Postgres 資料庫和 API 伺服器全部組合到一個 docker 容器中,以便它們都透過一個命令執行。 在本節和操作專案之後,每當我們部署應用程式時,我們都會對 Docker 感到非常滿意。 ### Redis: Redis 是最受歡迎、最常用的資料庫之一,是一種鍵值儲存。 - **資料庫 101**:深入研究資料庫主題,深入了解各種類型的資料庫以及它們如何適應資料儲存解決方案的前景。 - **什麼是 Redis?:** - Redis 是一個開源的記憶體鍵值儲存資料庫。 - 它在資料儲存和檢索方面表現出色,使其成為需要高速資料存取的應用程式的多功能選擇。 - **Redis 101**:學習如何使用 Redis。了解如何使用 Redis 進行快取以使我們的網站更快並進行會話管理。 - **Redis CLI**:了解如何使用 Redis CLI。 - **練習您的 Redis 技能**:啟動我們自己的 Redis 伺服器。 - **鍵值資料庫及其作用:** - 像 Redis 這樣的鍵值資料庫提供了一種簡單而有效的資料儲存方式。 - 它們將資料儲存為鍵和對應值對,從而實現快速資料檢索。 - 這些資料庫在快速資料存取至關重要的場景中尤其有價值,例如快取、會話管理和即時應用程式。 - **何時使用 Redis 等資料庫:** - Redis 非常適合速度和資料一致性至關重要的用例。 - 考慮使用 Redis 來快取經常存取的資料、管理使用者會話、為即時應用程式提供支援以及確保對關鍵資訊的低延遲存取。 ### 會話 + JWT 使用您的 React 專案,了解如何建立網站的整個動態部分:即使用以下技術的使用者管理。 - **會話驗證**:了解如何建立新的個人資料頁面。了解如何使用基於會話的身份驗證(其中將使用 cookie)並了解如何實現它。 - **令牌身份驗證**:了解有關令牌身份驗證(例如 JWT 令牌)的更多資訊。了解每種身份驗證類型的優缺點。 - **安全性身分驗證流程**:了解如何實施可以在您選擇的任何應用程式中實施的安全性身分驗證流程。 - 練習您的 Redis 技能:學習如何使用和實施 Redis 進行會話管理 - 這樣我們就有受保護的路線 - 此外,這樣,只要我們有登入功能,我們就可以使用該系統,因為我們知道它是安全的並且遵循最佳實踐。 ### 亞馬遜網路服務(「AWS」): Amazon Web Services,通常稱為 **AWS**,是一個強大的雲端平台,它改變了公司的營運方式,提供了無與倫比的可擴展性和效率。 #### AWS 101: - **什麼是 AWS(亞馬遜網路服務)?:** - AWS 是一個雲端運算平台,提供廣泛的服務,包括運算能力、儲存、資料庫、機器學習等。 - 它提供可擴展的按需資源,使企業能夠創新和發展,而無需管理實體基礎設施的負擔。 - **基礎設施即服務 (IaaS):** - AWS 提供基礎架構即服務,讓使用者透過網際網路配置和管理虛擬化運算資源。 - 這種方法消除了對本地硬體的需求,並提供了靈活性和可擴展性。 - **平台即服務 (PaaS):** - AWS 將其服務擴展到平台即服務,使開發人員能夠建置、部署和管理應用程式,而無需擔心底層基礎設施。 - 這使開發人員能夠專注於編寫程式碼和交付價值。 - **使用 AWS 進行擴充:** - AWS 使公司能夠有效擴展,並根據需要提供對資源的存取。 - 它允許企業將其能力與需求相匹配,類似於Google、亞馬遜和微軟等科技巨頭,確保他們能夠無縫地為客戶提供服務。 - **AWS Lambda** 是一種無伺服器運算服務,使開發人員能夠執行程式碼來回應事件,而無需管理伺服器。它提供了一種經濟高效、可擴展且簡單的方式來執行雲端中的功能。 - **Serverless 101**:了解如何使用 Serverless 框架。 - 練習您的 AWS 技能:了解如何將 AWS Lambda 實施到您的 React 應用程式中。 最後,您將充滿信心地使用 AWS 並建立雲端中的功能。 ###CI/CD 當我們將所有內容聯繫在一起並建立瞭如何編寫優秀軟體和優秀應用程式的整體圖景之後;了解如何實際建立良好的流程以及如何實際將應用程式部署到生產中。 - **持續整合**:了解有關良好持續整合實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - **持續交付**:了解有關良好持續交付實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - **持續部署**:了解有關良好持續部署實踐以及如何實施這些良好實踐和良好工具的更多資訊。 - 練習 CI/CD 技能:了解如何在專案中實施 Circle CI (CI/CD) 工具 - 確保您的開發團隊從一開始就擁有正確的工具和正確的流程 - 成功編寫錯誤更少、程式碼更簡潔的應用程式。 ### 額外位 - **程式碼分析**:了解當您第一次開始一個有大量文件並且不是您自己編寫程式碼的專案時該怎麼做!了解真正優化的提示和技巧。 - **建立高品質應用程式的一般最佳實踐**。 ### 軟技能 - 在本部落格中,我主要關注成為高級開發人員過程中的技術方面。然而,有效溝通和情緒智商等軟技能也發揮著至關重要的作用。 - [開發人員的七大軟技能及其學習方法](https://academy.zerotomastery.io/a/aff_pp6yfnkw/external?affcode=441520_dcwk-s8s):要更深入地探索各種軟技能,請考慮請參閱資深開發人員兼程式講師Andrei Neagoie 撰寫的部落格。 ### 筆記 - 不同的公司可能對高級 Web 開發人員有不同的期望,因此請務必進行一些額外的研究來客製化您的開發路徑。 最後,在學習了上述所有主題之後,所有這些事情對您來說都會有意義。您將能夠將所有這些事情實施到您自己的專案、您自己的公司。您將了解它們中的每一個是如何連接的。 最重要的是,與其他需要數年時間學習這些技能的初級開發人員相比,借助本路線圖可以快速學習這些內容。 ### 最佳資源 - [初級到高級 Web 開發人員路線圖部落格系列](https://dev.to/aswin2001barath/series/24357):一個部落格系列,我將學習並分享上述每個主題的知識。 - [不要成為初級開發人員:從初級到高級的路線圖](https://academy.zerotomastery.io/a/aff_5s8ff6y7/external?affcode=441520_dcwk-s8s):Andrei Neagoie 的詳細路線圖部落格(a高級開發人員)提供免費資源的連結。 - **零到精通課程**:[完整的初級到高級Web 開發人員路線圖課程](https://academy.zerotomastery.io/a/aff_hpwn5xy9/external?affcode=441520_dcwk-s8s):Andrei 的綜合課程Neagoie(同一高級開發人員)涵蓋了上述所有主題。 **我是誰?** - 我是 Aswin Barath,軟體工程迷,喜歡建立 Web 應用程式,現在在我自由職業生涯的繁忙時間透過[部落格](https://medium.com/techsoftware) 分享我的知識。 - 我也是像您一樣的初級開發人員,學習如何成為高級開發人員並在過程中分享我的知識。 - 這是我所有社交活動的連結,按平台分類在一個位置:https://linktr.ee/AswinBarath **謝謝** 非常感謝您閱讀我的部落格🙂。

10 個可提升您編碼技能的專案

原文出處:https://dev.to/bigsondev/10-projects-to-skyrocket-your-coding-skills-19hl ## 介紹 每當您考慮提高編碼水平時,都有很多選擇可以實現。您可以閱讀開發文章或無限循環地閱讀教程、課程、影片和書籍,但真正的關鍵是從學習過渡到動手編碼,相信我,沒有比應用您所掌握的所有概念更好的方法了。到目前為止,我們已經透過**基於專案的學習**學習了。 我自己是一名擁有 [8 年以上經驗](https://www.linkedin.com/in/adrian-bigaj-282277130/) 的軟體工程師,我發送了大量的履歷,進行了數十次面試,尤其是現在,當獲得前端/Web 開發人員的工作比以往任何時候都更加棘手時,我強烈建議您建立自己的專案。 為了在人群中脫穎而出,我將描述 10 個專案,每個專案都有獨特的設計、要求和技能,您可以掌握這些來建立您的作品集,並實際建立可以影響您作為開發人員進步的東西! 此外,每個專案都附帶預先定義的實施卡,可以幫助您感覺自己像在敏捷環境中工作的真正開發人員,具有使用者故事和驗收標準,同時也支援專案本身的規劃。 ## [名片](https://app.bigdevsoon.me/projects/business-card) 深入 Web 開發的良好介紹暖身。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naebo2g2thxvabzqyu0h.png) 您將了解基本的 HTML 和 CSS、響應式設計原則以及線上個人品牌介紹。 ### 卡牌 1.UI容器 2. 用戶聯繫部分 3. 用戶形象 4. 使用者資訊部分 5. 絕對定位的形狀 6. 動畫 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-business-card) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-business-card) ## [素食王](https://app.bigdevsoon.me/projects/the-veggie-king) 經典的CSS RWD Landing Page樣式,感受媒體質疑! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/am4hk4p1it0apjyb41sd.png) 您將學習進階 CSS 技術、CSS Flexbox/Grid,以及如何建立回應靈敏且有吸引力的登陸頁面。 ### 卡牌 1. 導航 2.英雄區 3. 關於我們部分 4. 菜單部分 5. 畫廊部分 6. 聯繫部分 7. 頁尾 8. 懸停效果 9. 行動選單 10.響應式網頁設計 11. 優化 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-the-veggie-king) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-the-veggie-king) ## [計算機](https://app.bigdevsoon.me/projects/calculator) 讓我們進一步了解 JS、邏輯、純函數和一些數學運算。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdmrz3n0g5h49buvu7id.png) 您將學習 JavaScript 基礎知識、DOM 操作和事件處理來建立互動式 Web 應用程式。 ### 卡牌 1.UI容器 2. 輸入數字 3. 數學運算 4. 清除和重置 5. 之前的操作 6. 明暗模式 7. 邊緣情況處理 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-calculator) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-calculator) ## [Just Weather](https://app.bigdevsoon.me/projects/just-weather) **此專案類型已多次用於面試帶回家**挑戰,值得至少做一次! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyhh9offr1n7qlbi3372.png) 您將學習如何從外部 API、非同步 JavaScript(Promises、async/await)獲取資料,並在 Web 上顯示動態資料。 ### 卡牌 1.API配置 2. 搜尋欄 3. 地點和溫度 4. 每小時預報 5. 天氣詳情 6. 位置存取 7. 溫度單位切換 8. 最近的搜尋 9. 骨骼動畫 10. 錯誤處理 ### 其他資源 - [有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-just-weather) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-just-weather) ## [GifTok](https://app.bigdevsoon.me/projects/giftok) 更多 API、分頁、無限滾動。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqfo7txkf37mj1393tiy.png) 您將學習如何使用富媒體 API、實作分頁並確保適合行動裝置的 UI。 ### 卡牌 1.API配置 2.顯示第一個GIF 3. 滑動下一步 4. 向後滑動 5.無限滑動 6. 用戶詳細訊息 7. 骨架加載 8. 桌面版 9. 邊緣情況 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-giftok) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-giftok) ## [注意](https://app.bigdevsoon.me/projects/notely) 另一種經典的待辦事項應用程式風格,如果您還沒有建立一個,現在可能是個好時機! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqxbj0wc699ysm9kauyx.png) 您將學習現代 JavaScript 框架中的 CRUD 操作、狀態管理以及不可變程式設計的原理。 ### 卡牌 1. 導航佔位符 2. 新筆記 3. 列出註釋 4. 編輯註釋 5. 刪除註釋 6. 填寫註釋 7. 搜尋筆記 8. 過濾筆記 9. 完成筆記 10. 空狀態 11. 字段驗證 12. 持久性存儲 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-notely) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-notely) ## [顏色記憶](https://app.bigdevsoon.me/projects/color-memory) 建立遊戲並擁有元件化和結構的高級圖片總是好的。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1doqmzxyqetppk47fgb.png) 您將學習軟體開發中的邏輯建置、維護應用程式狀態和使用者互動處理。 ### 卡牌 1. 圓形元件 2. 首頁 3. 遊戲玩法 4. 遊戲結束模式 5. 最佳成績 6. 遊戲規則模態 7. 聲音通知 8.響應式網頁設計 9. 邊緣情況 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-color-memory) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-color-memory) ## [AI 貼文產生器](https://app.bigdevsoon.me/projects/ai-post-generator) 人工智慧的現代趨勢很奇特,對吧?了解最受歡迎的可用 API 之一的絕佳機會。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k8amzzo0f32idkb3ymd.png) 您將學習透過 API 與 AI 交互,了解提示的工作原理,並根據實際用例建立工具。 ### 卡牌 1.API配置 2.UI容器 3. 社交平台選擇器 4. 訊息文字區域 5. 音調和風格選擇器 6. 產生貼文按鈕 7. 生成階段 8. 按鈕邏輯 ### 其他資源 - [附有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-ai-post-generator) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-ai-post-generator) ## [關卡編輯器](https://app.bigdevsoon.me/projects/level-editor) 這就像您的第一個「迷你 Photoshop 工具」😁 如今有很多類似風格的「無程式碼」應用程式。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kqkhjhpwyc6h2jc10ug.png) 您將學習如何實現拖放功能、資產管理以及遊戲級設計和 UX/UI 考量的基礎知識。 ### 卡牌 1.UI容器 2. 資產提現機制 3、快速資產 4. 撤銷功能 5. 橡皮擦工具 6. 變焦能力 7. 設定與匯出 8. 調整網格大小 9. 等級的持續性 ### 其他資源 - [帶有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-level-editor) - [附有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-level-editor) ## [任何聊天](https://app.bigdevsoon.me/projects/any-chat) 掌握前端和後端、套接字和事件廣播的完整流程是一項非常有用的技能。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkuenw2ya3y3q5apgyoa.png) 您將學習全端開發,包括伺服器端程式設計、即時資料處理和資料庫管理。 ### 卡牌 1. 入職頁面 2. 進入聊天頁面 3.Node.js伺服器 4. 聊天頁標題 5. 聊天視窗 6. 聊天頁頁腳 7. 訊息發送 8.表情符號支持 9. 連接和斷開 10. 邊緣情況 ### 其他資源 - [有專案文件的故障範本](https://glitch.com/edit/#!/big-dev-soon-any-chat) - [帶有專案文件的 GitHub 範本](https://github.com/elise-bigdevsoon/big-dev-soon-any-chat) ## 結論 嘗試技術、框架和函式庫,建立您自己的創意變體,看看什麼最適合您。我絕對建議您擴展HTML/CSS 之外的技能,加入更多JS 和邏輯,同時使用API、React/Vue/Svelte 等一些流行框架,並深入研究Node.js/Express 以了解完整的前端是如何運作的。<-> 後端流程有效。 建立出色的專案,我祈禱面試成功,繼續編碼。 長期以來,我的目標是透過社區傳播基於專案的學習方法,並啟動並執行 [BigDevSoon](https://bigdevsoon.me/),這是我們過去 2 年一直在開發的應用程式年對我們來說是一項偉大的成就。 **如果您喜歡本文,請隨意傳播!** ❤️

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

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

2024 年您必須關注的 10 位 Typescript 開發人員

原文出處:https://dev.to/firecampdev/10-typescript-developer-you-must-follow-to-become-typescript-expert-in-2024-5c19 > 跟隨 TypeScript 專家獲取寶貴的見解、最佳實踐和最新趨勢,以加速您掌握這種強大的程式語言的進程。 -------- 嘿開發社區, 我非常高興向您介紹 10 位優秀的 TypeScript 開發人員,他們為 TypeScript 社群做出了重大貢獻。 - 透過專注於他們的工作,您將獲得見解,從他們的經驗中學習,並順利成為 TypeScript 專家。 - 無論您是渴望學習基礎知識的初學者,還是尋求尖端TypeScript 知識的高級開發人員,這些開發人員都能滿足您的需求。讓我們深入探討並探索您應該關注的TypeScript 人才,以提高您的技能。 ---- #Typescript 專家 ##1. [JonnyBurger](https://github.com/JonnyBurger) :技術專家:來自瑞士蘇黎世的 Jonny Burger - 他是 Remotion 的建立者,Remotion 是一個用於以編程方式建立影片的 React 框架。 ![Jonny github 圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddes2hcot8y9158is9gt.png) **創作者:** [Remotion](https://github.com/remotion-dev/remotion) **推特**:https://twitter.com/remotion https://github.com/JonnyBurger -------- ##2. [Vitaly Rtishchev](https://github.com/rtivital) :技術專家:來自俄羅斯莫斯科的 Vitaly - 他是 Mantine 的建立者,Mantine 是一個功能齊全的 React 元件庫。 ![Vitaly github 圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw7gubce8uadun97aihu.png) **創作者:** [Mantine] (https://github.com/mantinedev/mantine) **推特**:https://twitter.com/rtivital ------ ##3. [Nishchit Dhanani](https://github.com/Nishchit14) :技術專家:Nishchit 來自印度 - 他是 Firecamp、API 的 VS Code、開源 Postman/Insomnia Alternative 的建立者 ![Nishchit github 圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89wlmvzq89qaiup1674c.png) **建立者:** [Firecamp] (https://github.com/firecamp-dev/firecamp) **推特**:https://twitter.com/Nishchit14 https://github.com/Nishchit14 -------- ##4。 [Irfan Maulana](https://github.com/mazipan) :技術專家:Irfan,又名 mazipan,是一位來自印尼的經驗豐富的 Web 開發人員,在電子商務行業擁有 10 多年的經驗。大部分時間都在使用 javascript 或 typescript,使用各種框架來建立前端應用程式,例如 React、svelte 或 vue。現在在 GovTech Edu 工作。 ![Irfan github 圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnp3m28f8yizulyrnisy.png) **貢獻於:** [baca-quran.id] (https://github.com/mazipan/baca-quran.id),[phpid-learning](https://github.com/phpid-jakarta/phpid-learning) **推特**:https://twitter.com/Maz_Ipan https://github.com/mazipan ------------ ##5。 [亞歷克斯·伊格爾](https://github.com/alexeagle) :技術專家:Alex 來自美國加利福尼亞州莫德斯托 - 他是 Aspect.build 的建立者,該軟體使 Bazel 更易於使用。 ![Alex github 圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ecnlv4m32yuftljoetj.png) **創作者:** [Aspect Build] (https://github.com/aspect-build) **推特**:https://twitter.com/jakeherringbone https://github.com/alexeagle -------- ##6。 [德魯鮑爾斯](https://github.com/drwpow) :技術專家:Drew,來自科羅拉多州丹佛市 - 他是 openapi-typescript 的建立者,根據 OpenAPI 3 規範生成 TypeScript 類型 ![繪製github圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rooqp8jnm5t4ltgp5d9w.png) **創作者:** [openapi-typescript] (https://github.com/drwpow/openapi-typescript) https://github.com/drwpow -------- ##7. [卡米爾‧邁斯利維茨](https://github.com/kamilmysliwiec) :技術專家:Kamil 來自波蘭,@nestjs 的建立者。 @TrilonIO 共同創辦人。 @google 開發專家。 ![Kamil 的 github 圖表說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hg77nup82wnjo96o0ol.png) **創作者:** [Nestjs] (https://github.com/nestjs/nest) **推特**:https://twitter.com/kammysliwiec https://github.com/kamilmysliwiec -------- ##8. [詹姆斯亨利](https://github.com/JamesHenry) :技術專家:James 是 typescript-eslint 的建立者,工程總監@nrwl。 TypeScript 的 5x MVP @microsoft。 ![James github 圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jddrtiycqq1zqlsw8fnj.png) **創作者:** [typescript-eslint] (https://github.com/typescript-eslint/typescript-eslint) **推特**:https://twitter.com/MrJamesHenry https://github.com/JamesHenry -------- ##9。 [科林·麥克唐納](https://github.com/colinhacks) : 技術專家:Colin 是工程師、開源者和不折不扣的 TypeScript 開發者。我建置並維護 Zod,這是一個具有靜態類型推斷功能的 TypeScript 模式驗證庫。 ![Colin github 圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbrgaxg5ner98x99ikvy.png) **創作者:** [Zod] (https://github.com/colinhacks/zod) **推特**:https://twitter.com/colinhacks https://github.com/colinhacks -------- ##10. [Basarat Ali Syed](https://github.com/basarat) :技術專家:Basarat 來自澳洲墨爾本,他是 Typescript 書的創造者。 ![Basarat github 圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7jq7vodfksr0gsniab3.png) **創作者:** [Typescript-book] (https://github.com/basarat/typescript-book) **推特**:https://twitter.com/basarat https://github.com/basarat ------ 那麼今天的文章就到此結束了。我知道我一定缺少一些很棒的 TS 開發者,如果你認識任何人,請在下面評論他們的名字。我很想在我的下一個部落格中介紹它們! 如果您對開源領域的 Typescript 貢獻感興趣,我很高興邀請您與我一起在 Firecamp 上工作。 #Firecamp🔥 **API 的 VS Code,開源 Postman/Insomnia 替代品** ![Firecamp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3h330z3bc96jd2cn3zad.png) 如果你真的喜歡這個專案,請幫我盯著 repo! 👇 https://github.com/firecamp-dev/firecamp 下週見!!

大型團隊中程式碼審查的實用技巧

原文出處:https://dev.to/rchugunov/practical-tips-for-code-reviews-in-large-teams-25nb 改進程式碼審查流程對於旨在維持和提高效率和程式碼品質的開發團隊至關重要。越來越多的待處理拉取請求 (PR) 清單可能會令人不知所措,甚至令人士氣低落。透過完善審核流程,團隊可以確保 PR 的均衡分配,防止某些團隊成員被淹沒而其他成員閒置。爭取平等地花在公關上的時間有助於創造一個有凝聚力、和諧的團隊環境。此外,遵守旨在將審核時間控制在**一個工作日**的標準可保證快速反饋並促進動態、響應迅速的開發週期。最後,改進工作的本質是提高 PR 的質量,確保 PR 的規模最佳、準備充分且全面,從而簡化整個開發流程。 ## 如何衡量程式碼審查的有效性 為了衡量程式碼審查流程的有效性,必須專注於團隊績效而不是個人貢獻。關鍵指標包括拉取請求 (PR) 接受審查的持續時間以及 PR 處於審查階段的時間相對於其總程式碼行數的時間。監控保持開放的 PR 數量以及每個 PR 中的程式碼量可以進一步深入了解審核流程的效率。 - 衡量團隊的效率而不是某些人的效率 - 測量 PR 處於審核狀態的時間。 - 測量 PR 處於審核狀態的時間除以程式碼行數。 - 處於開放狀態的 PR 數量。 - PR 中的程式碼行 這可以透過引入收集 PR 資訊的工具來實現。如果你使用 Github,有一個 github 操作 [issue-metrics](https://github.com/github/issue-metrics) 可以測量 PR 在一定時間內處於審核狀態的平均時間。但是您可以使用 Github API 建立自己的操作,該操作將收集對您的專案重要的資訊。 ![issue-metrics 產生的報告範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kavvtr1qq6437brkeq93.png) ## 準備好你的 PR 始終首先向您的 PR 加入**詳細描述**。如果視覺表示有幫助,請考慮使用圖表。提出**審核計劃**也可以改變遊戲規則,引導審核者按照邏輯順序進行操作,確保任何更改都不會被忽視。 在您請求其他人深入研究您的程式碼之前,請先自己查看您的 PR 草案。透過這種自我審查,您可以發現並清除任何零散的評論或疏忽。 PR 中的評論應該澄清您的編碼決策,尤其是在可能出現混淆的情況下。例如,如果您在目前 PR 期間解決了一個不相關的錯誤,請提及它。這種先發制人的澄清可以讓審稿人省去很多麻煩。註釋充當更改的路線圖。透過引導審閱者查看特定文件或解釋某些修改背後的理由,您可以使他們的工作變得更簡單。額外的福利?您可能會在此註釋階段發現錯誤,甚至在審查開始之前修復它們。 如果您在 PR 中解決了多個問題,則可能需要將其分開。 **PR 應該簡潔且重點突出。** 經驗法則:如果更改涉及超過 5 個文件、花費了一天的時間來起草,或者需要大量的審查時間,則將其拆分。例如,一個 PR 可以為一項新功能佈置 API,而後續的 PR 可以展示實作。 ## 如何查看別人的 PR 與任何其他任務一樣重視程式碼審查。在日曆中劃出專門用於複習的常規時間段。 **快速回饋至關重要 - 開發人員等待的時間越長,上下文就會變得越模糊,從而使採納建議變得困難**。 程式碼審查不僅僅是為了發現錯誤。它們提供了一個熟悉團隊不斷發展的功能和編碼原則的機會。抓住這個學習和成長的機會。 您在審核期間的評論應該清晰且具有建設性。模糊的言論可能會導致混亂。始終致力於提供回饋,指導開發人員實現預期的解決方案。 雖然像 GitHub 這樣的平台非常適合程式碼託管和初步審查,但它們可能不是最適合擴展討論的平台。考慮將長時間的對話轉移到像 Slack 這樣的平台上,以進行更有活力的交流。 對於大量拉取請求,將分支拉入本機開發環境可能會很有幫助。 **IntelliJ Idea** 等工具可以提供更身臨其境的差異視圖。請記住使用“git merge -no-commit -no-ff”等命令來查看更改,就像您所做的那樣。 ![拉入 IntelliJ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlxegquppgof12fv4cob.png) 如果您發現程式碼的某些部分難以掌握,請隨時向作者詢問清楚。最好停下來理解一下,而不是根據假設提供回饋。 ## 審稿人分配演算法 有多種方法可以自動為 PR 指派審閱者。例如隨機或使用矩陣方法。 GitHub 提供了兩個策略 https://docs.github.com/en/organizations/organizing-members-into-teams/managing-code-review-settings-for-your-team#about-auto-assignment 另一種方法是製定自訂策略,其中每個團隊成員都有來自他的團隊的審核者列表,但也有來自其他團隊的兩名臨時審核者。 **考慮團隊規模和功能交付速度,選擇最適合您團隊的方法。** ## 程式碼審查的速度 雖然立即審查是理想的選擇,但並不總是可行。儘管如此,要遵守的黃金法則是**24 小時時間範圍**。目標是在一個工作天內回覆程式碼審查請求,即使這只是初步評估。這確保了程式碼不會停留在審查的邊緣,這可能會延遲後續的開發階段。 透過遵守此規則,如有必要,典型的變更清單 (CL) 可能會在一天內經歷多輪審核。如此快速的周轉不僅簡化了開發流程,而且還促進了審閱者和開發人員之間的動態討論,從而形成更加完善的程式碼庫。 ## 如何處理審稿意見 不要只依賴 Github 評論,而是使用 **Slack Github 連結** 來促進 PR 上的溝通。它為即時互動提供了一個動態平台,使澄清疑慮、尋求解釋並就建議的變更達成共識變得更加容易。 如果您打算稍後解決特定評論或問題,請留下 **TODO** 標籤以及任務編號。這可以確保您對待處理的操作有清晰的路線圖,並且這些任務在未來的開發階段不會被忽略。 如果某個特定的程式碼部分引發了長時間的爭論,那麼記錄所做的決定就至關重要。 **透過加入解釋選擇和理由的註釋,可以防止將來重複討論。**它可以作為參考,確保未來的開發人員或審閱者了解特定程式碼片段背後的上下文和推理。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj42qr3oq1s3iu6etfi8.png) ## 連結 Google指南:[程式碼審查開發者指南](https://google.github.io/eng-practices/review/) 思科研究:https://static1.smartbear.co/support/media/resources/cc/book/code-review-cisco-case-study.pdf Microsoft:[來自 Microsoft 的 30 個經過驗證的程式碼審查最佳實踐 - McKayla 博士](https://www.michaelagreiler.com/code-review-best-practices/#practicereviewers) 更多關於 CR 的閱讀:https://blog.palantir.com/code-review-best-practices-19e02780015f

作為開發人員創建內容如何改變了我的生活

原文出處:https://dev.to/chaoocharles/how-creating-content-as-a-developer-changed-my-life-270e 大家好,我想鼓勵一些想要開始編碼職業但發現很難找到第一份工作或實習的人。還有那些因為開始懷疑自己的能力而難以開始/完成專案的人(冒名頂替症候群)。我將透過告訴你我自己的旅程以及我一路上學到的東西來做到這一點,希望你能有動力繼續你的旅程。 我叫查爾斯,來自非洲肯亞。我早在 2016 年就開始了我的編碼之旅,當時我進入大學,在 BTECH I.T 尋求職業生涯。在此之前,我對電腦了解不多,我只知道它們很酷,我想研究它們。在高中時,我是一名表現最好的學生,我的英語老師(也是副手,哈哈)認為我想做一些像計算機這樣簡單的事情而不是像工程、醫學、飛行員等更專業、更有前途的職業,這是愚蠢的,你說出它們的名字。好消息是我沒有聽,而是去做了我想要的事情,而且我不會為此感到後悔。事實是,IT 領域的任何職業都是當今世界上最好的職業之一,世界頂級公司之所以能處於領先地位,是因為程式碼。看看 Netflix、亞馬遜、微軟、Facebook、Airbnb 或 Uber。所有這些公司都透過程式碼賺了數十億美元,因此不要讓任何人欺騙您,讓您認為您走在錯誤的道路上。我來這裡是為了告訴你,你正走在最好的道路上。 回想2016年剛入職第一年的時候,由於出身卑微,擁有一台筆記型電腦對我來說是非常困難的,即使是一台簡單的筆記型電腦,甚至是二手的筆記型電腦。如果我要做 I.T,那麼擁有一個對我來說也是強制性的。擁有一部像樣的智慧型手機也是一個問題,但幸運的是,我有一個三星口袋(那些小三星手機,如果你還記得的話),並在說服朋友用它與我交換一些錢和一部按鍵手機後。這款手機在這個故事中很重要,因為它是我用來開始學習程式設計的手機。在學校裡,我們被教導如何編碼,是的,但這還不夠,它主要是理論。關於編碼的事情是你必須_練習_、_練習_、再_練習_。於是,我從同學那裡了解到了一個名為sololearn的應用程式。我在那裡開始學習 Web 開發,包括 html、css、javascript、php、sql,我想還有一點 jquery。這個應用程式教會了我有關這些主題的所有基礎知識,並且在完成每節課後它都有有趣的挑戰和徽章。唯一的問題是我不會透過手機進行完整的項目編碼。但重點是,當您等待購買筆記型電腦時,您絕對可以開始透過智慧型手機學習程式設計。因此,不要因為沒有筆記型電腦而高枕無憂。你越早意識到沒有人來拯救你越好。 我繼續從我的三星口袋裡學習了一個月,後來在內羅畢街頭(有很多扒手)它被神秘地偷走了。學校的朋友送了我一部HTC手機,螢幕碎了,有些地方根本碰不著,我得旋轉螢幕多次才能碰到地方😂,不過乞丐不挑食,我就繼續用了以便在本學期剩下的時間裡學習更多有關編碼的知識。 第二學期,現在是2017年,我收到了學生貸款。我的一些朋友/同學用他們的貸款去聚會、喝酒以及在俱樂部與女孩們玩耍。嗯,就我而言,我知道自己從哪裡來,也知道自己要去哪裡。於是,我拿了一些錢,立刻買了一台筆記型電腦。剩下的錢用來付學費和一點生活費。這對我的案例來說是一個巨大的進步,因為我現在可以了解更多資訊並開始從筆記型電腦上處理專案。因此,如果您有錢,請停止考慮參加聚會和購買昂貴的東西,而是考慮如何用這筆錢讓您的生活變得更好。 2017年至2019年期間,沒有太大變化。我只是在學習和做學校作業等。我想我還用 HTML 和 CSS 製作了兩個網站,我為這些工作獲得了一些報酬。我探索了更多關於編碼的知識,包括學習Java 中的OOP(物件導向程式設計),也用Java 進行了一些Android 應用程式開發,我的筆記型電腦無法處理android studio 😂,所以我又回到了Web 開發。我探索了 WordPress 以及如何用它製作博客等,並建立了一個 WordPress 博客,並以幾美分的價格出售。 2019年底,我正在讀三年級第三學期(這在我們大學被稱為內部工業實習),大約在這個時候,我被敲響了警鐘。我意識到我一直在學習編碼,但除了簡單的 html、css 和 WordPress 網站之外,我仍然無法建立一個完整的專案。我對任何一種程式語言都沒有足夠的信心。另外,畢業的要求是在第四年完成一個編碼專案。我也開始對未知產生恐懼,例如放學後要做的事情,因為只剩下一年了。我開始做很多研究如何創建一個完整的網絡應用程序,因為我已經了解了 javascript 的基礎知識,並且出現了一件我不知道的事情,即 javascript 框架,目前最流行的是 Angular、Vue並做出反應。當時我就知道我必須學習這些框架之一,而且很難決定選擇哪一個,但我最終選擇了 React,因為它是所有框架中最受歡迎、最有前途的工作,而且我仍然使用 React 進行編碼這點。 我嘗試從sololearn學習React,但進展並不順利。我嘗試了 youtube 並發現了 @thenetninja 頻道:https://www.youtube.com/@NetNinja,它非常有益健康,這就是我對 React 的很好的介紹。後來我從 Udemy 學習了兩門完整的 React 課程,一門由 _Stephen Grider_ 教授,另一門由 _Maximilian Schwarzmüller_ 教授。順便問一下,我沒有完成它們,誰完成了 udemy 課程? 😂 但這兩門課程教會了我更多關於 React 的高級知識。 在學習 React 的過程中,我也很好奇如何在放學後或還在學校的時候透過程式碼賺錢,我發現了幾個選擇,找工作、自由工作、創建內容(這可以是寫部落格或 YouTube 頻道) )、開始播客、寫書、創建像udemy 這樣的課程等等。由於我還在上學,我知道找工作很難處理,所以我決定嘗試自由工作和內容創作。還是在 2019 年,我開設了 YouTube 頻道:https://www.youtube.com/c/chaoocharles 來教授編碼,也開設了一個 upwork 帳號來從事自由專案的編碼。 我知道我不是一個好的作家,正如你從這篇文章中絕對可以看出的那樣,所以我嘗試了視頻而不是博客。這是另一個挑戰,因為我必須學習如何製作影片、學習錄製和編輯軟體等等。但我還是堅持了下來,並從同學那裡得到了我的前 100 個訂閱。我的影片一開始就很糟糕,而且我做了很多工作,甚至沒有得到一分錢。但從正面的角度來看,製作影片讓我更理解編碼概念。就像,對我來說,要解釋我必須先理解的東西。我主要用 html、css 和 React 創建了很多視頻,做得越多,我對創建視頻和編碼就越有信心。 2020 年,我有很多時間來做這一切,因為我們因新冠疫情關閉了學校近一年,經過一年的努力,我終於獲得了 1000 名替補,這對我來說是一個巨大的勝利。 2020 年中期,我取得了兩場重大勝利,在 YouTube 上達到了 1k,並且在 Upwork 上找到了我的第一個客戶。我需要 1000 訂閱者和 4000 小時的觀看時間,YouTube 才會開始向我付費。我距離 4k 觀看時間還很遠,但至少我已經達到了其中一項要求。 Upwork 也很難找到第一個客戶,我申請工作卻無濟於事,但這第一個客戶改變了遊戲規則。我讓他相信我知道如何編碼,並用我的 YouTube 教程證明了這一點。你看,在製作 YouTube 教學的同時,我也在為自己建立一個作品集,我也在我的 github 上發布了多個專案。這麼說吧,我的投資組合目前看起來非常好,這位客戶毫不猶豫地給了我一份合約。如果你碰巧教了一些東西,人們就會開始將你視為專家(即使你正在努力教那件事😂)這可以通過視頻或博客,我認為你應該嘗試一下。我在 upwork 專案上做得很好,這個客戶在那一年和接下來的一年裡繼續給我更多的專案。我做了他的大約 8 個項目,在 upwork 上獲得了上升人才徽章,後來又獲得了頂級徽章,這讓我贏得了更多客戶。 ![Upwork](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jut1tydubsj4mwlmnt3h.png) 是的,我知道我現在的工作成功分數很差,但你明白了,哈哈😂 在製作YouTube 影片和Upwork 專案時,我也在做我的最後一年項目,因為我現在已經是第四年了,但這些是我自從2020 年因新冠疫情在家以來所做的唯一事情。雖然在2020 年底,我們回去上學期,做了考試並展示了專案。 快轉到 2021 年,我現在正在做附件。這是我畢業的必要條件。我透過在 Facebook 和網路上尋找肯亞的網路開發公司,輕鬆獲得了這一點。評論他們的帖子並解釋我的 IT 背景。我從某家新創公司的 CEO 那裡得到了 DM,並且以前端開發人員的身份加入了那裡。我試圖就報酬進行談判,但最好的結果只是維持交通和午餐,每週去辦公室三天,並承諾在實習後獲得一份長期工作。作為一名學生,這已經足夠好了,所以我就這麼做了。 在這家公司,我的 CSS 和 React 技能給他們留下了深刻的印象。我改造了他們公司的網站,並在我在那裡的5個月期間又做了2個網站。學校對我進行了評估,後來公司給了我工作機會。我覺得每個月的收入對我的技能來說不夠好,因為我可以在一兩週內輕鬆地做同樣的自由職業,而且我在那裡的時候我的 YouTube 也得到了貨幣化。我只是拒絕了這個提議,並決定專注於我的自由職業和內容創作之旅。如果他們允許我在處理其他事情的同時遠端處理他們的項目,也許我會接受這個提議,但這不在他們的公司政策中。我不想滿足於更少。你看,過去幾年我所做的一切都給了我選擇,也讓我不再急於找到工作,並擁有競爭優勢。 2021 年年中,我以二等高年級畢業,我保證如果不是我用 YouTube 和 upwork 分散自己的注意力,我會獲得一等,第四年我表現最差。但我後悔嗎?不。問題是,我從來沒有用過那個學位,它仍然鎖在家裡的某個地方,沾滿了灰塵。好處是,技能和經驗是這個編碼和程式設計領域最重要的。只有少數公司可能會要求學位,但大多數公司不會。他們會詢問您過去的經驗、您從事過的項目,並希望您通過程式設計面試。因此,如果你正在尋找一份程式設計工作,並因為沒有獲得學位而指責自己沒有學位,那麼你應該停下來。我們大多數擁有學位的人甚至沒有使用它們。也許我們唯一的優勢是我們在學校建立的聯繫或從那裡獲得的技能。但說實話,我所知道的大部分內容都是我自學的,我相信每個程式設計師都是自學的程式設計師,無論他們是否上過學。你必須親自動手。光靠論文並沒有太大幫助。 畢業後,我開始從 YouTube 獲得專案邀請,以及報酬豐厚的專案。我也開始利用 YouTube 和 GitHub 來在 Upwork 上獲得更好的付費項目,透過分享我的個人資料連結來告訴客戶我所取得的成就。所以,所有這些加起來就很不錯了。現在,我僅透過內容創作來支付所有帳單,並透過在工作和外部工作項目上工作來獲得更多收入。我的時間也很靈活,在家工作,這很棒。 2022 年我只做了一份全職工作。雖然位置偏遠,但完全值得。 我的觀點是,如果你正在努力尋找一份工作或一個項目,你可以透過為自己建立一些東西來改變一切。建立部落格、建立播客、創建頻道、創建公司、創建課程、寫書、公開構建(啟動一個大型專案並在此處和 Twitter 上分享您的進度),只需在這裡展示您的技能即可您能做什麼,遲早你會開始從事高薪專案。停止追逐工作,而只是吸引他們。 正如你從我的旅程中可以看出的,這不是一天的成就,直到一年多我才得到一分錢的內容創作報酬,直到一年多我才得到一個客戶的工作。我不是一天就能學會程式設計的,我是從一部手機開始的,後來又是用學校貸款買的一台低階筆記型電腦(我甚至還沒付)。所有這些成功的人士和公司都是從某個地方開始的,您今天就可以開始改變您的生活。開始親自動手,兩三年後你甚至不會相信自己來自哪裡。 這是我的故事,我希望你學到了一兩件事✌️ 訂閱我的 YouTube 頻道:https://www.youtube.com/c/chaoocharles 在 Twitter 上關注我:https://twitter.com/ChaooCharles

能提高工作效率的神奇 VSCode 外掛

原文出處:https://dev.to/lundjrl/vscode-extensions-to-magically-accelerate-your-productivity-2lad 閱讀本文的大多數人可能每天都會使用 VSCode 擴充功能。無論是檢查程式碼、顯示建議、類型推理還是讓您發笑的東西,它們都會影響您的工作流程並幫助您建立產品。 以下是我每天使用的擴充功能清單。可以肯定地說,如果沒有他們,我會完全迷失方向,而且我對門票的估計也會膨脹。 我希望這些對您的幫助就像對我的幫助一樣! --- ## Auto Rename Tag 此清單的開頭是自動重命名標籤擴充。如果您使用大量 HTML,此擴充功能非常有用。它的一般要點是它將您正在編輯的標籤的結束標籤格式化為相同的名稱,這樣您就不必這樣做。當我處理具有包含 100 多個其他標籤的標籤的「*.html」檔案的舊網站時,這為我節省了大量時間。 ID:formulahendry.auto-rename-tag VS 市場連結:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag --- ## Code Spell Checker 如果您與國際團隊合作或您想要記錄專案中的單字或縮寫,這一點非常有用。 程式碼拼字檢查器可讓您修復拼字錯誤的單字或將它們儲存到專案的「settings.json」檔案中。這表明了對於可能不熟悉應用程式業務短語的新開發人員的巨大意圖。 ID:streetsidesoftware.code-spell-checker VS 市場連結:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker --- ## EditorConfig EditorConfig 對我和我的團隊來說至關重要。透過建立格式化標準,它可以幫助我們在發出拉取請求時保持程式碼編輯器同步並減少差異日誌。 ID:EditorConfig.EditorConfig VS Marketplace 連結:https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig --- ## Eslint 和 Prettier 如果您進入 Webdev 世界很短一段時間,您可能已經遇到過這兩個。我不會在這裡討論太多細節,但簡而言之,Eslint 是一個 linter,Prettier 是一個格式化程式。您可以將它們一起使用以在專案中強制執行程式碼標準。 ID:dbaeumer.vscode-eslint VS 市場連結:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ID:esbenp.prettier-vscode VS 市場連結:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode --- ## Git-Rename 如果您想重新命名檔案或更改檔案名稱的大小寫,Git-Rename 非常有用。 Git-Rename 允許您重命名檔案並幫助您追蹤 Git 中的這些更改,而不是刪除檔案以將其從 Git 歷史記錄中刪除以便更改其大小寫。 什麼? 假設您的專案中有一個名為“myfile”的文件,並且它已被版本控制追蹤。如果您將名稱更改為“myFile”,這只是大小寫更改,Git 預設不會關心它。您可以更改 git 設定來解決此問題,但如果您在團隊中工作,則需要說服其他開發人員也這樣做。一個更簡單的選擇是將此擴充功能包含在專案中的「extensions.json」檔案中,這樣他們每次開啟專案時都會收到提示,要求他們下載該擴充功能。 ID:ambooth.git-rename VS 市場連結:https://marketplace.visualstudio.com/items?itemName=ambooth.git-rename --- ## Import Cost 導入成本讓您知道每個導入的包有多少位元組。它對於行動應用程式非常有用,因為您的捆綁包大小對最終用戶來說意義重大。 ID:wix.vscode-導入成本 VS 市場連結:https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost --- ## IntelliCode TypeScript 和 JavaScript 的另一個很棒的擴充功能。 IntelliCode 就像那個試圖完成你的句子的煩人的朋友。它為在專案中找到的 TS 版本提供方法/物件補全,並為您推斷類型,讓您知道可以使用物件的哪些屬性。 對於 Django 粉絲來說,它也適用於 Python! ID:VisualStudioExptTeam.vscodeintellicode VS Marketplace 連結:https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode --- ## Pretty Typescript Errors 這並不適合所有人,但我寫了很多 TypeScript,它可以幫助我解析 TS 錯誤。基本上,這個擴充功能將顯示一條更人性化的訊息,而不是 TypeScript 給你一個長而半複雜的訊息,以幫助你縮小程式碼中錯誤的範圍。 ID:yoavbls.pretty-ts-errors VS 市場連結:https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors --- 您使用這些擴充功能嗎?您是否有比這些更好的擴充功能的建議?請在下面的評論中告訴我!

從開源專案複製程式碼,算是偷竊嗎?

原文出處:https://dev.to/rjwignar/are-you-stealing-from-other-projects-4f0n ### 優秀的程式設計師抄襲;更優秀的程式設計師會偷竊嗎? > 優秀的藝術家臨摹;偉大的藝術家偷竊 > \- 巴勃羅·畢卡索 巴勃羅·畢卡索經常因說出上述引言而受到讚譽。我不會提供我自己對這句話的解釋,因為有興趣的人可以在網路上找到大量的解釋。然而,我經常想知道這句話如何應用於程式設計和開源開發。 ### 我們的程式設計知識真的是我們自己的嗎? 網路上有很多資源可以教您幾乎所有與程式設計相關的知識。我自己和我的許多同學幾乎所有的程式設計知識都是從教科書、線上資源/文件和 YouTube 教學中學到的。這些資源教會了我們今天擁有並應用的程式設計知識,但是所有這些知識都被盜了嗎?如果您從數千人觀看的 YouTube 教程中學會了編寫第一個“Hello World”程序,您是否在竊取程式碼?影片上傳者也學會使用外部資源編寫「Hello World」程式的可能性有多大?上傳者的知識被偷了嗎? 我不能說這些知識是否被盜,但我相信這種知識對於我們建立和擴展我們的技能是必要的。沒有人能夠知道每一個完美的實現,或是為每個專案編寫每一行程式碼。 ### 開源軟體是為使用而生的! 開源軟體的存在不應該被忽視,開源軟體是用來使用的!如果開源專案提供了您需要的功能,那麼當其他人為您精心完成這些功能時,為什麼還要自己實現這些功能呢?只要該庫得到積極維護並滿足您的需要,您就應該使用和研究開源庫。如果您發現任何錯誤、問題或缺少的功能,請嘗試建立自己的解決方案並為該專案做出貢獻,使其對每個人都更好!同樣,如果開源程式庫提供了您需要的功能,但您無法整合該程式庫,請以開源專案為靈感,在您自己的專案中實現該功能。 ### 從其他專案中獲取靈感 在我之前的[關於程式碼閱讀的部落格文章](https://dev.to/rjwignar/code-reading-i7h)中,我閱讀了Docusaurus 的程式碼庫來研究該專案如何為受保護的程式碼區塊實現語法突出顯示。我的研究告訴我,Docusaurus 實際上使用第三方函式庫 [Prism-React-Renderer](https://github.com/FormidableLabs/prism-react-renderer) 來提供語法突出顯示。這些知識很有用,因為我想在我的 Markdown 到 HTML 轉換器 [ctil](https://github.com/rjwignar/ctil) 新增語法突出顯示,但不想從頭開始實現該功能。雖然我無法在自己的專案中使用 Prism React Renderer,但研究 Docusaurus 給了我找到一個我可以使用的開源程式庫的想法。 ### 使用highlight.js 進行語法高亮顯示 在搜尋第三方語法螢光筆時,我找到了 [highlight.js](https://highlightjs.org/)。 ctil 將文字(`.txt`)和 Markdown (`.md`)轉換為生成的 HTML(`.html`)文件,因此我希望生成的 HTML 文件支援語法突出顯示。透過使用內容分發網路(CDN),highlight.js 可以用作 HTML 標籤,因此我可以透過將以下行新增至產生的 HTML 檔案來新增highlight.js: ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script>hljs.highlightAll();</script> ``` 透過這些行,我能夠[加入語法突出顯示](https://github.com/rjwignar/ctil/commit/c597f05724b60731e129aead33f1c3017a99ec17): ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k74q82mbi46fbbqupbri.png) ### 與 Docusaurus 方法的比較 在我的[上一篇部落格文章](https://dev.to/rjwignar/code-reading-i7h)中,我描述了 Docusaurus 如何使用 Prism React Renderer 新增語法突出顯示。與 Docusaurus 一樣,我使用了第三方函式庫highlight.js 來加入語法突出顯示。然而,在 Docusaurus 中新增和修改了設定檔以設定 Prism React Renderer,並透過使用「<Highlight />」元件加入了語法突出顯示。 Prism React Renderer 還提供了使用者可以在其專案中配置的突出顯示主題。對於我的專案,只需將highlight.js 加入到生成的 HTML 文件中,作為要透過 CDN 傳送的 HTML 標籤。現在我對基本的語法突出顯示感到滿意,所以我不關心有一個特定的突出顯示主題。透過 CDN 使用highlight.js 的一個缺點是,如果使用者在線,語法突出顯示可能無法運作。將來我可能會將highlight.js加入到專案本身中,這樣語法突出顯示就可以離線工作。 ### 下一步。 此功能仍在開發中。在目前迭代中,html 用作 `<code>...</code>` 區塊的預設語言類別。目前這是可以接受的,但此解決方案將忽略原始 Markdown 文件中的任何語言類設定。我希望 ctil 解析 Markdown 文件中的語言標籤,以確定使用哪種語言進行突出顯示。這將是未來需要解決的問題。有興趣的人可以在[此處](https://github.com/rjwignar/ctil/issues/11)找到問題。 ### 那麼從開源專案複製程式碼算不算偷竊? 只要專案許可證允許複製,並且您遵循專案許可證的要求,您就不會竊取。同樣,我認為從開源專案中尋找靈感並不是偷竊。

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

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

2023 年開發者的 24 個開源專案🔥👍

原文出處:https://dev.to/madza/24-open-source-projects-for-developers-in-2023-391l --- 標題:2023 年開發人員的 24 個開源專案 🔥👍 發表:真實 描述: 標籤: 開源、 github、 程式設計、 Web 開發 封面圖:https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74998ffdt3doqvxtxumz.png canonical_url:https://madza.hashnode.dev/24-open-source-projects-for-developers-in-2023 --- 開源專案是創新、協作和創造力的遊樂場。它是來自世界各地的開發人員聚集在一起分享他們的想法、技能和熱情的中心。 在本文中,我精心挑選了 24 個涵蓋廣泛興趣和技術的開源專案。 從尖端的人工智慧框架到漂亮的生產力工具以及介於兩者之間的一切,每個開發人員都能找到適合自己的東西。 我提供了直接連結、描述和視覺效果,以便您可以立即獲得每個工具的初步印象。 --- ## 1\. [集算器SPL](https://github.com/SPLWare/esProc)(贊助) 集算器SPL是一種基於腳本的資料操作語言,與SQL資料庫集成,支援進階分析和高效能並行處理。 它適合處理大型資料集,與各種工具集成,提供資料視覺化,並跨多個平台工作。一些主要功能包括: **💪 強大的資料處理能力:** 集算器SPL是一種腳本語言,具有豐富的函數庫和強大的語法。 **✨ 預存程序等效項:** 它允許透過 JDBC 介面執行 SPL 腳本。 **📈 多功能視覺化:** 它提供了成熟的報告工具,具有廣泛的視覺化配置,用於建立各種類型的報告。 **⚡ 自動化工作流程:** 它支援軟體工作流程的自動化,包括用於程式碼建置、測試和部署的 CI/CD 流程。 **🔥 相比SQL更具彈性:** 與SQL語法不同,集算器SPL允許將資料處理程式碼寫在多條語句中。 ![esProc_SPL](https://cdn.hashnode.com/res/hashnode/image/upload/v1679824673641/82f843e0-72a1-44a4-bd99-68616f322534.pw?m=1600,4cro format =網頁) ⭐ 支援他們的 GitHub 倉庫:[https://github.com/SPLWare/esProc](https://github.com/SPLWare/esProc) ## 2\. [跳房子](https://github.com/hoppscotch/hoppscotch) 一種多功能開源 API 開發和測試工具,提供使用者友善的介面,用於發出 HTTP 請求來測試 API 並與 API 互動。 它簡化了製作和發送請求的過程,使其成為使用 API 的開發人員和測試人員的必備工具。 ![Hoppscotch](https://github.com/hoppscotch/hoppscotch/raw/main/packages/hoppscotch-common/public/images/banner-dark.png) ## 3\. [Supabase](https://github.com/supabase/supabase) Firebase 的開源替代方案,為開發人員提供了一組用於建立可擴展的即時應用程式的工具。 它提供了強大的後端即服務 (BaaS) 平台,具有身份驗證、資料庫管理和即時功能等功能,使其成為創建現代 Web 和行動應用程式的強大選擇。 ![Supabase](https://supabase.com/_next/image?url=%2Fimages%2Fproduct%2Fstorage%2Fheader--dark.png&w=1920&q=75) ## 4\. [超級代幣](https://github.com/supertokens/supertokens-core) 一種開源身份驗證解決方案,提供強大的安全功能和輕鬆集成,以增強 Web 和行動應用程式中的使用者身份驗證和授權。 它為開發人員提供了一個全面的工具包,用於保護用戶資料並確保無縫登入體驗。 ![Supertokens](https://supertokens.com/docs/static/assets/arch.png) ## 5\. [Git](https://github.com/git/git) Git 版本控制系統的官方開源程式庫,最初由 Linus Torvalds 建立。 Git 廣泛用於追蹤原始程式碼的更改,並透過提供強大的分支和合併功能來實現協作軟體開發。 ![Git](https://www.lumis.com.br/data/files/FC/F4/E3/0A/098EA7108FA5E7A7C808A8A8/Gitflow__-_blog___interna.png) ## 6\. [VS 代碼](https://github.com/microsoft/vscode) 由 Microsoft 開發的免費開源程式碼編輯器。 它提供了高度可自訂且高效的程式設計環境,具有 IntelliSense、調試支援和龐大的擴充庫等功能,可增強您的開發工作流程。 ![VS代碼](https://user-images.githubusercontent.com/35271042/118224532-3842c400-b438-11eb-923d-a5f66fa6785a.png) ## 7\. [OhMyZsh](https://github.com/ohmyzsh/ohmyzsh) 一個流行且高度可自訂的框架,用於在類 Unix 作業系統中管理 Zsh 配置。 它簡化了 shell 自訂,提供了大量插件和主題來增強您的命令列體驗。 ![OhMyZsh](https://cloud.githubusercontent.com/assets/2618447/6316862/70f58fb6-ba03-11e4-82c9-c083bf9a6574.png) ## 8\. [包子](https://github.com/oven-sh/bun) 一個開源 JavaScript 工具包,旨在簡化和優化為 Web 應用程式捆綁 JavaScript 程式碼的過程。 它提供了一種現代且快速的方法來建立捆綁包,從而增強了使用 JavaScript 專案時的效能和開發人員體驗。 ![Bun](https://cdn.hashnode.com/res/hashnode/image/upload/v1696318057709/5a1125cf-eb78-4e9d-9632-faebd228abe5.png) ## 9\. [SWR](https://github.com/vercel/swr) SWR(Stale-While-Revalidate)是一個用於在 React 應用程式中取得資料的 JavaScript 函式庫。 它可以在客戶端和伺服器之間實現高效、自動的資料同步,提供無縫的即時更新,同時確保資料保持新鮮和最新。 ![SWR](https://cdn.hashnode.com/res/hashnode/image/upload/v1696318453842/d9ab3384-becc-4040-93f7-8a9e064100b1.png) ## 10\. [Prisma](https://github.com/prisma/prisma) 用於現代應用程式開發的開源資料庫工具包,透過強大的查詢產生器和類型安全的 ORM(物件關聯映射)層簡化資料庫存取和操作。 它允許開發人員使用聲明性和直觀的方法管理資料庫並與之交互,從而使資料庫操作在各種資料庫系統中無縫且安全。 ![Prisma](https://i.imgur.com/O1lwo0v.png) ## 11\. [ElasticSearch](https://github.com/elastic/elasticsearch) 由 Elastic 開發的強大且可擴展的開源搜尋和分析引擎。 它旨在幫助用戶快速有效地搜尋、分析和視覺化大量數據,使其成為從全文搜尋引擎到日誌分析等應用程式的熱門選擇。 ![ElasticSearch](https://cdn.hashnode.com/res/hashnode/image/upload/v1696315923559/58c2db03-9a6c-4b98-9b48-a91025c507a2.png) ## 12\. [哈蘇拉](https://github.com/hasura/graphql-engine) 一款功能強大的開源工具,可簡化應用程式的 GraphQL API 開發。 借助 Hasura,您可以輕鬆建立、管理和保護 GraphQL API,從而更輕鬆地與資料來源互動並建立現代的資料驅動應用程式。 ![Hasura](https://assets.website-files.com/63e3d6905bacd6855fa38c1c/63e3d6905bacd64f08a38f95_Hasura.jpg) ## 13\. [BioDrop](https://github.com/EddieHubCommunity/BioDrop) 透過單一連結與您的受眾建立聯繫。在一處展示您創建的內容和項目。 讓人們更容易找到、關注和訂閱。 ![BioDrop](https://user-images.githubusercontent.com/624760/230707268-1f8f1487-6524-4c89-aae2-ab45f0e17f39.png) ## 14\. [Powertoys](https://github.com/microsoft/PowerToys) 適用於 Windows 的開源實用程序,可提高工作效率和自訂功能。 它提供了一系列方便的工具和實用程序,包括快速啟動器、文件預覽和視窗管理等功能,旨在簡化您的 Windows 體驗。 ![Powertoys](https://cdn.hashnode.com/res/hashnode/image/upload/v1696280333258/279d3728-4731-46eb-9836-c8300d3a9f75.png) ## 15\. [Strapi](https://github.com/strapi/strapi) 開源無頭內容管理系統 (CMS),使開發人員能夠快速建立強大且可自訂的 API。 它使團隊能夠輕鬆創建和管理內容豐富的網站和應用程序,為各種專案提供靈活性和可擴展性。 ![Strapi](https://cdn.hashnode.com/res/hashnode/image/upload/v1696316645227/6122feae-4b38-4c00-a8a1-30da5346568c.png) ## 16\. [看似合理](https://github.com/plausible/analytics) 一種開源網路分析工具,旨在為網站所有者提供對其網站效能的簡單且注重隱私的見解。 它提供用戶友好、輕量級的跟踪,且不會損害訪問者的隱私,使其成為那些重視數據分析而無需侵入性跟踪方法的人的理想選擇。 ![看似](https://cdn.hashnode.com/res/hashnode/image/upload/v1696280734881/0cc0aa58-46e1-49ac-a920-65f7eaad6e33.png) ## 17\. [Astro](https://github.com/withastro/astro) 現代靜態網站產生器,透過僅傳送頁面所需的 JavaScript 來提供閃電般的效能,從而實現近乎即時的載入時間。 它將傳統伺服器渲染框架的靈活性與靜態網站產生器的速度相結合,使其成為建立高效動態網站的絕佳選擇。 ![Astro](https://deegloo.com/wp-content/uploads/2022/11/blogblog-cover-1024x614.png) ## 18\. [混音](https://github.com/remix-run/remix) 用於建立現代 JavaScript 應用程式的 Web 框架,注重速度和開發人員體驗。 它使開發人員能夠透過無縫組合伺服器渲染和客戶端渲染的內容來創建高效能的 Web 應用程式。 ![混音](https://cdn.shopify.com/s/files/1/0779/4361/files/RemixRun_bcc7b8fd-ca3a-4385-b279-91a0606706e7.jpg?v=1666895610) ## 19\. [張量流](https://github.com/tensorflow/tensorflow) 由Google開發的開源機器學習框架。 它為建立和部署機器學習模型提供了靈活且全面的生態系統,使其成為人工智慧領域研究人員和開發人員的熱門選擇。 ![Tensorflow](https://m-alcu.github.io/assets/tensorflow-playground.png) ## 20\. [顫動](https://github.com/flutter/flutter) 由 Google 創建的開源 UI 軟體開發工具包,以其從單一程式碼庫建立適用於行動、Web 和桌面的本機編譯應用程式的能力而聞名。 它使開發人員能夠使用單一程式語言 Dart 跨多個平台創建美觀、快速且高度可自訂的使用者介面。 ![Flutter](https://cdn.hashnode.com/res/hashnode/image/upload/v1696281232879/35493958-0397-40c4-9c30-ca0faead9f39.png) ## 21\. [Kubernetes](https://github.com/kubernetes/kubernetes) 一個開源容器編排平台,可自動執行容器化應用程式的部署、擴充和管理。 它為編排容器提供了強大而靈活的基礎架構,使在雲端原生環境中大規模管理複雜的分散式系統變得更加容易。 ![Kubernetes](https://d33wubrfki0l68.cloud.net/2475489eaf20163ec0f54ddc1d92aa8d4c87c96b/e7c81/imaimages/docofs/components-d4c87c96b/e7c81/images/docofs/components-vv-uberknetes.svvv) ## 22\. [Docker](https://www.docker.com/community/open-source/) 一個開源工具,可簡化多容器 Docker 應用程式的管理。 它允許開發人員使用簡單的 YAML 檔案定義和運行多容器應用程序,從而更輕鬆地編排和部署複雜的服務。 ![Docker](https://cdn.hashnode.com/res/hashnode/image/upload/v1696316908120/7e01fe2b-a438-4882-8cd6-863b7f5effb0.png) ## 23\. [鉻](https://github.com/chromium/chromium) Google 的一個開源瀏覽器項目,旨在為所有使用者建立更安全、更快、更穩定的網路體驗方式。 它是開發人員在網路瀏覽技術領域做出貢獻和創新的平台。 ![Chromium](https://cdn.hashnode.com/res/hashnode/image/upload/v1696319343433/61d13e7f-512b-40b7-a127-b127a944cf9d.png) ## 24\. [Linux 核心](https://github.com/torvalds/linux) 由 Linus Torvalds 和全球貢獻者社群開發的開源、類別 Unix 作業系統核心。 它作為各種基於 Linux 的作業系統的核心組件,提供硬體互動和系統管理的基本功能。 ![Linux 核心](https://upload.wikimedia.org/wikipedia/commons/2/2e/Linux_Mint_21_%22Vanessa%22_%28Cinnamon%29.png) --- 寫作一直是我的熱情,幫助和激勵人們讓我感到很高興。如果您有任何疑問,請隨時與我們聯繫! 透過[Twitter](https://twitter.com/madzadev)、[LinkedIn](https://www.linkedin.com/in/madzadev/) 和[GitHub](https://github.com) 與我聯繫/madzadev)! 請訪問我的[部落格](https://madza.dev/blog)以獲取更多此類文章。

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

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

9 個開源 Repo,讓您的 SaaS 變得更好用、更賺錢

原文出處:https://dev.to/nathan_tarbert/9-open-source-repos-that-will-make-your-saas-gold-54h7 從頭開始建立軟體即服務 (SaaS) 可能是一項耗時的工作。 不用擔心,有預先配置的 SaaS 樣板可供使用,包括我將很快介紹的樣板,它可以為您提供所需的必要加速和節省時間的提升。 [![SAML Jackson 告訴我更多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nvwn4he63t4h3vfbaz2.gif)](https://github.com/boxyhq/jackson) ## 什麼是 SaaS? 我很高興您提出這個問題,簡而言之,軟體即服務 (SaaS) 是一種基於雲端的軟體模型,可透過瀏覽器向使用者交付應用程式。 軟體和基礎設施由 SaaS 供應商管理,用戶可以按需存取服務,通常採用訂閱或按使用付費定價模式 所有業務需求都可能非常不同,並且不同組織的精選功能清單也可能有所不同。 您的 SaaS 應用程式可以整合開源軟體以增強其功能並為您的用戶提供卓越的價值。 讓我們看看如何利用有價值的開源軟體來改變遊戲規則。 當您建立 SaaS 應用程式時,它為您的新興業務提供更通用、更強大的解決方案。 ___ ##。 [BoxyHQ 的 SaaS 入門套件](https://dub.sh/saas-starter-kit)這是您的 SaaS👇 ![BoxyHQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhvluqkvf9q8paeaogw7.gif) 使用 Next.js SaaS 樣板啟動您的企業應用程式開發。 - 透過利用開箱即用的預先建構樣板功能來促進開發。 - 顯著減少建立您自己的 SaaS 的時間,並專注於建立您的核心應用程式功能。 - 非常適合新創公司以及那些希望透過強大的開箱即用安全性來增強現有應用程式的公司。 https://dub.sh/saas-starter-kit 請加註星標 ⭐ BoxyHQ ___ ## 1. [Cerbos](https://github.com/cerbos/cerbos) ![Cerbos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fner5o7ms26kyatqgrb.gif) Cerbos 是一個開源、可擴展的授權層,可簡化跨多個應用程式和服務的使用者角色和權限的實施和管理。 - 在 SaaS 應用程式中自訂存取控制,可讓您定義細粒度的權限以滿足使用者的獨特要求。 - 防止對敏感資料進行未經授權的存取,並確保資料免受未經授權的使用者的侵害。 - 增強的使用者體驗,使用戶能夠精確控制他們在應用程式中的存取權限。 https://github.com/cerbos/cerbos 請加註星標 ⭐ Cerbos --- ## 2. [SuperTokens](https://github.com/supertokens/supertokens-core) ![SuperTokens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kli4jmrlj8mlk212gr7o.gif) SuperTokens 是一種開源身份驗證和授權解決方案,旨在為 Web 和行動應用程式提供安全登入和可擴展的存取管理。 - 支援多種身份驗證方法,包括會話管理和 JWT,確保使用者身份驗證無縫且安全。 - 防止常見的安全陷阱,例如會話劫持和資料洩露,增強使用者對應用程式的信任。 - 透過簡化使用者身分驗證流程,改善使用者體驗,確保使用者可以輕鬆、放心地存取應用程式。 https://github.com/supertokens/supertokens-core 請加註星標 ⭐ SuperTokens --- ## 3. [Retraced](https://dub.sh/retraced) ![回溯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ee21hrk9ockrsyub52zj.gif) Retraced 是一項開源審核日誌服務,用於記錄整個組織的軟體系統內的活動。 - 提供對應用程式內所有活動的詳細跟踪,使您能夠監控誰存取了您的應用程式以及他們執行了哪些操作。 - 及早發現可疑或未經授權的行為,從而能夠快速回應潛在的安全事件。 - 透過提供使用者操作和系統事件的稽核追蹤來維持透明度和問責制。 https://dub.sh/retraced 請加註星標 ⭐ Retraced --- ## 4. [unleash](https://github.com/Unleash/unleash) ![unleash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5d4z5n8jpl2elyi4gam.gif) unleash 可以輕鬆測試程式碼如何與實際生產資料配合使用,而不必擔心意外破壞使用者體驗。 - 控制功能推出,確保逐步引入更新和新功能,降低中斷和問題的風險。 - 在出現不可預見的問題或錯誤時快速緩解問題,使您能夠快速關閉有問題的功能,而無需重新部署完整的應用程式。 - 最大限度地減少中斷和問題的風險,確保更流暢的使用者體驗。 https://github.com/Unleash/unleash 請加註星標 ⭐ unleash --- ## 5. [ockam](https://github.com/build-trust/ockam) ![ockam](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sce1elhd9d4kd45xnpxg.gif) 促進應用層動態資料的安全資料真實性、完整性和機密性。 - 強大的安全框架,讓開發人員可以建立端到端的加密通訊通道,確保資料的真實性、完整性和機密性。 - 支援多種協議,允許安全通道跨越各種網路拓撲和傳輸協議。 - 提供身分建立、金鑰管理和憑證管理工具,這對於分散式系統中的安全通訊至關重要。 https://github.com/build-trust/ockam 請加註星 ⭐ Ockam --- ## 6. [Hasura](https://github.com/hasura/graphql-engine) ![Hasura](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsgpwztw5ljfrwrnrqxo.gif) Hasura 是一個開源引擎,它透過 Postgres 提供即時、即時的 GraphQL API,並具有資料庫事件的 Webhook 觸發器和業務邏輯的遠端模式。 - 簡化從資料庫取得資料的流程,同時保持強大的安全性,減少開發時間和潛在的安全風險。 - 透過權限和基於角色的存取控制(RBAC)對資料存取進行細微控制,確保只有授權使用者才能存取特定資料。 - 透過保護敏感資訊免遭未經授權的存取來增強資料安全性。 https://github.com/hasura/graphql-engine 請star ⭐ Hasura --- ## 7. [Meltano](https://github.com/meltano/meltano) ![Meltano](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayfw3uwoe0ewe28jeosh.gif) 聲明式、以程式碼優先的資料整合引擎,為開發人員提供跨各種來源和目的地移動、轉換和探索資料的工具。 旨在幫助解鎖 API 和資料庫,並促進資料和機器學習驅動的產品創意的建立。 - 支援 600 多個資料來源和目標,提供多功能整合解決方案。 - 用於管理資料管道的聲明式程式碼優先方法,這使其成為處理大規模資料的強大工具。 - 允許開發人員建立自訂連接器並整合現有資料工具,提供高水準的自訂和靈活性。 https://github.com/meltano/meltano 請star ⭐ Meltano --- ## 8. [Odigos](https://github.com/keyval-dev/odigos) ![Odigos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcshttj6qtpnh3bd4bwl.gif) Odigos 是一個用於應用程式監控和可觀察性的開源專案,使用戶能夠主動檢測和解決安全問題。 **應用程式開發人員** - 透過利用 OpenTelemetry 和 eBPF 的強大功能來自動檢測應用程式,更加專注於編寫程式碼。利用一流的可觀測性資料為下一次生產事故做好準備。 **Odigos** - 根據應用程式的流量自動部署和擴展收集器。無需浪費時間部署和配置收集器。 https://github.com/keyval-dev/odigos 請加註星 ⭐ Odigos --- ## 9. [Trigger.dev](https://github.com/triggerdotdev/trigger.dev) ![Trigger.dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km9n1wrzebvh722du70n.gif) Trigger.dev 是一個平台、SDK 和 API,用於在程式碼庫中建置和執行作業,由各種來源觸發,但無需擔心管理任何複雜的編排基礎架構。它可以從任何節點使用。 - 管理逾時時間短的無伺服器平台上長時間執行的作業。 - 提供使用者一個 SDK,用於在程式碼庫中建立作業,由事件、排程事件和 Webhooks 等各種來源觸發。 - 與 Slack、OpenAI、GitHub 等流行服務的開箱即用集成,大大簡化了與第三方服務互動的過程。 https://github.com/triggerdotdev/trigger.dev 請加註星標 ⭐ Trigger.dev ___ ## 🔥 [趨勢清單](https://github.com/github-20k/trending-list) ![趨勢清單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tltxx778m87nzkaq1uj0.gif) 當您的開源專案成為 GitHub 上的即時熱門時,您將透過電子郵件收到通知。 https://github.com/github-20k/trending-list 請加註星標 ⭐ 趨勢清單 ___ 🤩 合併開源專案可以為您的 SaaS 應用程式帶來全面勝利。 感謝您查看這九個強大的開源專案,您應該考慮將它們整合到您的 SaaS 中以增強其功能,從而將您的應用程式變成黃金。🥇 **支援開源軟體的最佳方式之一就是加一顆星** 🌟

鑽研系統設計學問的 5 個 Github Repo

原文出處:https://dev.to/kumarkalyan/top-5-github-repositories-to-achieve-system-design-mastery-27n4 ## 簡介 🔥 本文包含前 5 個 GitHub 儲存庫的列表,可協助您掌握系統設計。 這些儲存庫主要包含與系統設計相關的教學課程、部落格、影片和案例研究 請務必存取這些儲存庫,探索內容,實施所學知識,如果可以的話做出貢獻,並給他們 ⭐ 來幫助他們成長。 ![有趣](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggxx7y6u48dpzfkisznf.gif) ## 什麼是系統設計 系統設計⚙️是為特定係統設計架構、元件、介面和資料以滿足特定要求的過程。 在建立任何應用程式或系統之前,🏗️規劃系統如何運作、需要哪些資源、在哪裡部署、系統元件將使用哪些 API 以及如何擴充系統非常重要。因此,系統設計理念對於軟體開發人員掌握建置高效且可擴展的系統非常重要。 💯 ## 1\.開發者路線圖 [https://github.com/kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap) * 開發者路線圖 GitHub 儲存庫由 Kamran Ahmed 建置和維護,該儲存庫可以被認為是軟體開發的最佳手冊 * 它在 Git Hub 上擁有 255k 星和 684 名貢獻者。該儲存庫僅提供英文版本,它包含所有內容的結構化路線圖以及資源、指南等。 > [給開發者路線圖打 ⭐](https://github.com/kamranahmedse/developer-roadmap) --- ## 2\.系統設計入門 [https://github.com/donnemartin/system-design-primer](https://github.com/donnemartin/system-design-primer) * Sytem Design Primer GitHub 儲存庫由 Facebook(現為 Meta)的技術主管建立。這個儲存庫可以被認為是系統設計的聖經 * 它在 GitHub 上擁有 233,000 顆星,擁有 100 多個貢獻者,並提供多種不同語言版本。 > [給系統設計入門打 ⭐](https://github.com/donnemartin/system-design-primer) --- ## 3\.系統設計101 [https://github.com/ByteByteGoHq/system-design-101](https://github.com/ByteByteGoHq/system-design-101) * System Design 101 GitHub 儲存庫由 Byte Byte Go Hq 建置和維護,這是一個在系統設計面試中脫穎而出的平台 * 它在 Github 上有 39.2k 啟動次數和 14 個貢獻者。此儲存庫僅提供英文版本,是初學者的最佳儲存庫。該儲存庫包含有關通訊協定、CI-CD、架構模式、微服務、DevOps、雲端、Linux 等主題的有效指南。 > [給 system-design-101 打 ⭐](https://github.com/ByteByteGoHq/system-design-101) --- ## 4\.系統設計資源 [https://github.com/InterviewReady/system-design-resources](https://github.com/InterviewReady/system-design-resources) * Sytem Design Resources GitHub 儲存庫由 Interview Ready 建置和維護,這是一個為大型科技巨頭提供 Sytem 設計面試的平台。 * 它在 Git Hub 上有 11,400 顆星,有 8 位貢獻者。此儲存庫僅提供英文版本。它包括有關各種系統設計主題的案例研究、指南和視訊講座,包括視訊處理、叢集和工作流程管理、服務內訊息傳遞、訊息佇列反模式、服務網格、實用系統設計、分散式檔案系統、時間序列資料庫、速率限制、記憶體資料庫 - Redis 等等 > [給系統設計資源打 ⭐](https://github.com/InterviewReady/system-design-resources) --- ## 5\.系統設計 [https://github.com/karanpratapsingh/system-design](https://github.com/karanpratapsingh/system-design) * 系統設計 GitHub 儲存庫由 Curebase 的高級軟體工程師 Karan Pratap Singh 建置和維護。 * 它在 Git Hub 上有 21,100 顆星,有 9 位貢獻者。此儲存庫僅提供英文版本。它基本上是作者真書的免費版本。它共有 5 章,最適合剛接觸開發的初學者。 > [給系統設計打 ⭐](https://github.com/karanpratapsingh/system-design) 在那之前請繼續關注我的下一篇博客 ![再見](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rqxfsvqogo6stm5oe2s.gif)

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

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

經營個人頻道,改變了我的軟體工程師生涯

大家好,我想鼓勵一些想要開始當工程師,但很難找到第一份工作的人。還有那些因為懷疑自己的能力而難以開始/完成專案的人(冒牌者症候群)。我將告訴你我自己的旅程,以及我一路上學到的東西來,希望你能有動力繼續你的旅程。 原文出處:https://dev.to/chaoocharles/how-creating-content-as-a-developer-changed-my-life-270e 我叫查爾斯,來自非洲肯亞。我早在 2016 年就開始了我的編碼之旅,當時我進入大學,在 BTECH I.T 尋求職業生涯。在此之前,我對電腦了解不多,我只知道它們很酷,我想研究它們。在高中時,我是一名表現最好的學生,我的英語老師(也是副手,哈哈)認為我想做一些像計算機這樣簡單的事情而不是像工程、醫學、飛行員等更專業、更有前途的職業,這是愚蠢的,你說出它們的名字。好訊息是我沒有聽,而是去做了我想要的事情,而且我不會為此感到後悔。事實是,IT 領域的任何職業都是當今世界上最好的職業之一,世界頂級公司之所以能處於領先地位,是因為程式碼。看看 Netflix、亞馬遜、微軟、Facebook、Airbnb 或 Uber。所有這些公司都透過程式碼賺了數十億美元,因此不要讓任何人欺騙您,讓您認為您走在錯誤的道路上。我來這裡是為了告訴你,你正走在最好的道路上。 回想2016年剛入職第一年的時候,由於出身卑微,擁有一台筆記型電腦對我來說是非常困難的,即使是一台簡單的筆記型電腦,甚至是二手的筆記型電腦。如果我要做 I.T,那麼擁有一個對我來說也是強制性的。擁有一部像樣的智慧型手機也是一個問題,但幸運的是,我有一個三星口袋(那些小三星手機,如果你還記得的話),並在說服朋友用它與我交換一些錢和一部按鍵手機後。這款手機在這個故事中很重要,因為它是我用來開始學習程式設計的手機。在學校裡,我們被教導如何編碼,是的,但這還不夠,它主要是理論。關於編碼的事情是你必須_練習_、_練習_、再_練習_。於是,我從同學那裡了解到了一個名為sololearn的應用程式。我在那裡開始學習 Web 開發,包括 html、css、javascript、php、sql,我想還有一點 jquery。這個應用程式教會了我有關這些主題的所有基礎知識,並且在完成每節課後它都有有趣的挑戰和徽章。唯一的問題是我不會透過手機進行完整的專案編碼。但重點是,當您等待購買筆記型電腦時,您絕對可以開始透過智慧型手機學習程式設計。因此,不要因為沒有筆記型電腦而高枕無憂。你越早意識到沒有人來拯救你越好。 我繼續從我的三星口袋裡學習了一個月,後來在內羅畢街頭(有很多扒手)它被神秘地偷走了。學校的朋友送了我一部HTC手機,螢幕碎了,有些地方根本碰不著,我得旋轉螢幕多次才能碰到地方😂,不過乞丐不挑食,我就繼續用了以便在本學期剩下的時間裡學習更多有關編碼的知識。 第二學期,現在是2017年,我收到了學生貸款。我的一些朋友/同學用他們的貸款去聚會、喝酒以及在俱樂部與女孩們玩耍。嗯,就我而言,我知道自己從哪裡來,也知道自己要去哪裡。於是,我拿了一些錢,立刻買了一台筆記型電腦。剩下的錢用來付學費和一點生活費。這對我的案例來說是一個巨大的進步,因為我現在可以了解更多資訊並開始從筆記型電腦上處理專案。因此,如果您有錢,請停止考慮參加聚會和購買昂貴的東西,而是考慮如何用這筆錢讓您的生活變得更好。 2017年至2019年期間,沒有太大變化。我只是在學習和做學校作業等。我想我還用 HTML 和 CSS 製作了兩個網站,我為這些工作獲得了一些報酬。我探索了更多關於編碼的知識,包括學習Java 中的OOP(物件導向程式設計),也用Java 進行了一些Android 應用程式開發,我的筆記型電腦無法處理android studio 😂,所以我又回到了Web 開發。我探索了 WordPress 以及如何用它製作博客等,並建立了一個 WordPress 博客,並以幾美分的價格出售。 2019年底,我正在讀三年級第三學期(這在我們大學被稱為內部工業實習),大約在這個時候,我被敲響了警鐘。我意識到我一直在學習編碼,但除了簡單的 html、css 和 WordPress 網站之外,我仍然無法建立一個完整的專案。我對任何一種程式語言都沒有足夠的信心。另外,畢業的要求是在第四年完成一個編碼專案。我也開始對未知產生恐懼,例如放學後要做的事情,因為只剩下一年了。我開始做很多研究如何建立一個完整的網絡應用程式,因為我已經了解了 javascript 的基礎知識,並且出現了一件我不知道的事情,即 javascript 框架,目前最流行的是 Angular、Vue並做出反應。當時我就知道我必須學習這些框架之一,而且很難決定選擇哪一個,但我最終選擇了 React,因為它是所有框架中最受歡迎、最有前途的工作,而且我仍然使用 React 進行編碼這點。 我嘗試從sololearn學習React,但進展並不順利。我嘗試了 youtube 並發現了 @thenetninja 頻道:https://www.youtube.com/@NetNinja 它非常有益健康,這就是我對 React 的很好的介紹。後來我從 Udemy 學習了兩門完整的 React 課程,一門由 _Stephen Grider_ 教授,另一門由 _Maximilian Schwarzmüller_ 教授。順便問一下,我沒有完成它們,誰完成了 udemy 課程? 😂 但這兩門課程教會了我更多關於 React 的高級知識。 在學習 React 的過程中,我也很好奇如何在放學後或還在學校的時候透過程式碼賺錢,我發現了幾個選擇,找工作、自由工作、建立內容(這可以是寫部落格或 YouTube 頻道) )、開始播客、寫書、建立像udemy 這樣的課程等等。由於我還在上學,我知道找工作很難處理,所以我決定嘗試自由工作和內容創作。還是在 2019 年,我開設了 YouTube 頻道:https://www.youtube.com/c/chaoocharles 來教授編碼,也開設了一個 upwork 帳號來從事自由專案的編碼。 我知道我不是一個好的作家,正如你從這篇文章中絕對可以看出的那樣,所以我嘗試了影片而不是博客。這是另一個挑戰,因為我必須學習如何製作影片、學習錄製和編輯軟體等等。但我還是堅持了下來,並從同學那裡得到了我的前 100 個訂閱。我的影片一開始就很糟糕,而且我做了很多工作,甚至沒有得到一分錢。但從正面的角度來看,製作影片讓我更理解編碼概念。就像,對我來說,要解釋我必須先理解的東西。我主要用 html、css 和 React 建立了很多影片,做得越多,我對建立影片和編碼就越有信心。 2020 年,我有很多時間來做這一切,因為我們因新冠疫情關閉了學校近一年,經過一年的努力,我終於獲得了 1000 名替補,這對我來說是一個巨大的勝利。 2020 年中期,我取得了兩場重大勝利,在 YouTube 上達到了 1k,並且在 Upwork 上找到了我的第一個客戶。我需要 1000 訂閱者和 4000 小時的觀看時間,YouTube 才會開始向我付費。我距離 4k 觀看時間還很遠,但至少我已經達到了其中一項要求。 Upwork 也很難找到第一個客戶,我申請工作卻無濟於事,但這第一個客戶改變了遊戲規則。我讓他相信我知道如何編碼,並用我的 YouTube 教程證明了這一點。你看,在製作 YouTube 教學的同時,我也在為自己建立一個作品集,我也在我的 github 上發布了多個專案。這麼說吧,我的投資組合目前看起來非常好,這位客戶毫不猶豫地給了我一份合約。如果你碰巧教了一些東西,人們就會開始將你視為專家(即使你正在努力教那件事😂)這可以通過影片或博客,我認為你應該嘗試一下。我在 upwork 專案上做得很好,這個客戶在那一年和接下來的一年裡繼續給我更多的專案。我做了他的大約 8 個專案,在 upwork 上獲得了上升人才徽章,後來又獲得了頂級徽章,這讓我贏得了更多客戶。 ![Upwork](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jut1tydubsj4mwlmnt3h.png) 是的,我知道我現在的工作成功分數很差,但你明白了,哈哈😂 在製作YouTube 影片和Upwork 專案時,我也在做我的最後一年專案,因為我現在已經是第四年了,但這些是我自從2020 年因新冠疫情在家以來所做的唯一事情。雖然在2020 年底,我們回去上學期,做了考試並展示了專案。 快轉到 2021 年,我現在正在做附件。這是我畢業的必要條件。我透過在 Facebook 和網路上尋找肯亞的網路開發公司,輕鬆獲得了這一點。評論他們的帖子並解釋我的 IT 背景。我從某家新創公司的 CEO 那裡得到了 DM,並且以前端開發人員的身份加入了那裡。我試圖就報酬進行談判,但最好的結果只是維持交通和午餐,每週去辦公室三天,並承諾在實習後獲得一份長期工作。作為一名學生,這已經足夠好了,所以我就這麼做了。 在這家公司,我的 CSS 和 React 技能給他們留下了深刻的印象。我改造了他們公司的網站,並在我在那裡的5個月期間又做了2個網站。學校對我進行了評估,後來公司給了我工作機會。我覺得每個月的收入對我的技能來說不夠好,因為我可以在一兩週內輕鬆地做同樣的自由職業,而且我在那裡的時候我的 YouTube 也得到了貨幣化。我只是拒絕了這個提議,並決定專注於我的自由職業和內容創作之旅。如果他們允許我在處理其他事情的同時遠端處理他們的專案,也許我會接受這個提議,但這不在他們的公司政策中。我不想滿足於更少。你看,過去幾年我所做的一切都給了我選擇,也讓我不再急於找到工作,並擁有競爭優勢。 2021 年年中,我以二等高年級畢業,我保證如果不是我用 YouTube 和 upwork 分散自己的注意力,我會獲得一等,第四年我表現最差。但我後悔嗎?不。問題是,我從來沒有用過那個學位,它仍然鎖在家裡的某個地方,沾滿了灰塵。好處是,技能和經驗是這個編碼和程式設計領域最重要的。只有少數公司可能會要求學位,但大多數公司不會。他們會詢問您過去的經驗、您從事過的專案,並希望您通過程式設計面試。因此,如果你正在尋找一份程式設計工作,並因為沒有獲得學位而指責自己沒有學位,那麼你應該停下來。我們大多數擁有學位的人甚至沒有使用它們。也許我們唯一的優勢是我們在學校建立的聯繫或從那裡獲得的技能。但說實話,我所知道的大部分內容都是我自學的,我相信每個程式設計師都是自學的程式設計師,無論他們是否上過學。你必須親自動手。光靠論文並沒有太大幫助。 畢業後,我開始從 YouTube 獲得專案邀請,以及報酬豐厚的專案。我也開始利用 YouTube 和 GitHub 來在 Upwork 上獲得更好的付費專案,透過分享我的個人資料連結來告訴客戶我所取得的成就。所以,所有這些加起來就很不錯了。現在,我僅透過內容創作來支付所有帳單,並透過在工作和外部工作專案上工作來獲得更多收入。我的時間也很靈活,在家工作,這很棒。 2022 年我只做了一份全職工作。雖然位置偏遠,但完全值得。 我的觀點是,如果你正在努力尋找一份工作或一個專案,你可以透過為自己建立一些東西來改變一切。建立部落格、建立播客、建立頻道、建立公司、建立課程、寫書、公開建置(啟動一個大型專案並在此處和 Twitter 上分享您的進度),只需在這裡展示您的技能即可您能做什麼,遲早你會開始從事高薪專案。停止追逐工作,而只是吸引他們。 正如你從我的旅程中可以看出的,這不是一天的成就,直到一年多我才得到一分錢的內容創作報酬,直到一年多我才得到一個客戶的工作。我不是一天就能學會程式設計的,我是從一部手機開始的,後來又是用學校貸款買的一台低階筆記型電腦(我甚至還沒付)。所有這些成功的人士和公司都是從某個地方開始的,您今天就可以開始改變您的生活。開始親自動手,兩三年後你甚至不會相信自己來自哪裡。 這是我的故事,我希望你學到了一兩件事✌️

Laravel + GraphQL 接案心得&範例分享 Part 1:強大優點、API 線上試玩、工具介紹

客戶最近有把舊 laravel 專案改寫為 SPA 的需求,需要前後端分離 為了方便前後端溝通、改善開發者體驗,我建議&協助他們導入 GraphQL 技術到 laravel 專案中! 實際導入&開發半年之後,成效非常不錯!前端工程師、後端工程師都用得很開心! 今天跟大家分享一些心得&範例程式碼! ## 破除迷思 > 很多公司聽到 GraphQL 會有點卻步,覺得太新、不成熟 其實,這技術面世八年了,在國外已經被許多公司廣泛採用,不算很新了! > 很多公司會以為這是給大公司用的技術,小公司不適合使用 其實,我自己的使用經驗是,就算團隊只有兩個工程師,這技術也很好用,會讓開發速度更快,不會更慢! > laravel 社群會以為這技術在 node 社群、或其他社群比較常見 其實,laravel 社群也有很好用的套件,導入也很方便! 所以這技術非常值得學習、使用,至少了解一下! ## 優點介紹 我認為最大的優點就是,大幅降低了前後端溝通的成本! 傳統開發,後端寫完 API,要另外寫文件告訴前端網址是多少、回傳的資料格式 然後前端需要用 postman 之類的工具,方便測試、開發 使用 graphql 的話,後端寫完程式碼,就同時自動生成文件&測試工具了! 為了方便讀者「親自試玩」以上描述,我準備了一個範例專案給大家! 這個專案模擬電商網站,API 可以撈 products 與 comments 兩種資料! 然後可以訂閱商家的電子報,也就是新增 subscriber 這種資料! ## 實務範例與 API 線上試玩 我先分享範例專案給大家! https://graphql-laravel-example.tw/ 原始碼也已公開 https://github.com/howtomakeaturn/graphql-laravel-example --- 以往 RESTful 的設計,「讀取資料」這種動作,在 graphql 稱之為 query https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Queries 會去「更新資料庫」的動作,在 graphql 稱之為 mutation https://github.com/howtomakeaturn/graphql-laravel-example/tree/main/app/GraphQL/Mutations 以上兩個資料夾可以翻閱一下,每支 api 會是一個檔案,所以很好管理 接著使用 graphql 社群的強大工具:graphiql,就同時得到文件&測試工具了! https://graphql-laravel-example.tw/graphiql 我安裝了一份 graphiql 給大家,點進去玩玩看吧! 把他當成是技術規格文件與 Postman 測試工具,身兼兩種用途! 有了這個工具,大幅減少了前後端需要溝通的事項,對於前後端合作有「巨大幫助」! (請注意,實務上 graphiql 建議在本機執行,不要這樣線上公開,會有資安疑慮) ## 套件介紹 在 graphql 社群,有兩種開發 api 的哲學 分別是 schema-first 與 code-first 兩種方法 laravel 社群最知名的 schema-first 套件是這款 https://github.com/nuwave/lighthouse laravel 社群最知名的 code-first 套件是這款 https://github.com/rebing/graphql-laravel schema-first 與 code-first 的差異與優缺點我先不細談 總之,我個人比較喜歡 code-first,我覺得比較直觀、簡單、好導入 所以我的範例是用 https://github.com/rebing/graphql-laravel 這套件 您的 laravel 版本建議至少要是 8.0 以上版本,太舊的可能會有問題 順帶一提,兩個套件背後都是使用 https://github.com/webonyx/graphql-php 所以底層元件一樣,兩者有很多通用的觀念,不用太擔心 --- graphiql 是 graphql 官方的重要工具 laravel 社群已經有人寫好懶人安裝套件了 https://github.com/mll-lab/laravel-graphiql 按照說明安裝即可得到超好用的自動文件&測試工具面板! ## 結論 有了以上兩個套件,按照說明分別安裝 然後參考我提供的範例程式碼 https://github.com/howtomakeaturn/graphql-laravel-example 您應該就可以在專案之中導入 graphql 基礎架構,並且開始用 graphql 寫出您的第一支 api 我在替客戶導入的時候,發現網路上 graphql 的教學、說明雖然很多 但是剛開始寫還是很困難,很少範例 所以我製作這份 open source 方便大家參考&入門 並且直接把 graphiql 面板公開部署上線,方便大家體驗! (此為系列文章,更多內容會在近期發佈) --- # 系列文章 - [Laravel + GraphQL 接案心得&範例分享 Part 1:強大優點、API 線上試玩、工具介紹](https://codelove.tw/@howtomakeaturn/post/yx08mx) - [Laravel + GraphQL 接案心得&範例分享 Part 2:前端 Query/Mutation 與 React 串接範例](https://codelove.tw/@howtomakeaturn/post/2an0Gx)

24 款值得在 2023 年認識一下的 open source 專案

開源專案是創新、協作和創造力的遊樂場。它是來自世界各地的開發人員聚集在一起分享他們的想法、技能和熱情的中心。 在本文中,我精心挑選了 24 個涵蓋廣泛興趣和技術的開源專案。 從尖端的人工智慧框架到漂亮的生產力工具以及介於兩者之間的一切,每個開發人員都能找到適合自己的東西。 我提供了直接連結、描述和視覺效果,以便您可以立即獲得每個工具的初步印象。 原文出處:https://dev.to/madza/24-open-source-projects-for-developers-in-2023-391l --- ## 1\. [ esProc SPL](https://github.com/SPLWare/esProc)(贊助) 集算器SPL是一種基於腳本的資料操作語言,與SQL資料庫集成,支援進階分析和高效能並行處理。 它適合處理大型資料集,與各種工具集成,提供資料視覺化,並跨多個平台工作。一些主要功能包括: **💪 強大的資料處理能力:** 集算器SPL是一種腳本語言,具有豐富的函數庫和強大的語法。 **✨ 預存程序等效項:** 它允許透過 JDBC 介面執行 SPL 腳本。 **📈 多功能視覺化:** 它提供了成熟的報告工具,具有廣泛的視覺化配置,用於建立各種類型的報告。 **⚡ 自動化工作流程:** 它支援軟體工作流程的自動化,包括用於程式碼建置、測試和部署的 CI/CD 流程。 **🔥 相比SQL更具彈性:** 與SQL語法不同,集算器SPL允許將資料處理程式碼寫在多條語句中。 ![esProc_SPL](https://res.cloudinary.com/practicaldev/image/fetch/s--x_jHJEX4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn.hashnode.com/res/hashnode/image/upload/v1679824673641/82f843e0-72a1-44a4-bd99-68616f322534.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp) ⭐ 支援他們的 GitHub 倉庫:[https://github.com/SPLWare/esProc](https://github.com/SPLWare/esProc) ## 2\. [Hoppscotch](https://github.com/hoppscotch/hoppscotch) 一種多功能開源 API 開發和測試工具,提供使用者友善的介面,用於發出 HTTP 請求來測試 API 並與 API 互動。 它簡化了製作和發送請求的過程,使其成為使用 API 的開發人員和測試人員的必備工具。 ![Hoppscotch](https://github.com/hoppscotch/hoppscotch/raw/main/packages/hoppscotch-common/public/images/banner-dark.png) ## 3\. [Supabase](https://github.com/supabase/supabase) Firebase 的開源替代方案,為開發人員提供了一組用於建立可擴展的即時應用程式的工具。 它提供了強大的後端即服務 (BaaS) 平台,具有身份驗證、資料庫管理和即時功能等功能,使其成為建立現代 Web 和行動應用程式的強大選擇。 ![Supabase](https://supabase.com/_next/image?url=%2Fimages%2Fproduct%2Fstorage%2Fheader--dark.png&w=1920&q=75) ## 4\. [Supertokens](https://github.com/supertokens/supertokens-core) 一種開源身份驗證解決方案,提供強大的安全功能和輕鬆集成,以增強 Web 和行動應用程式中的使用者身份驗證和授權。 它為開發人員提供了一個全面的工具包,用於保護用戶資料並確保無縫登入體驗。 ![Supertokens](https://supertokens.com/docs/static/assets/arch.png) ## 5\. [Git](https://github.com/git/git) Git 版本控制系統的官方開源程式庫,最初由 Linus Torvalds 建立。 Git 廣泛用於追蹤原始程式碼的更改,並透過提供強大的分支和合併功能來實現協作軟體開發。 ## 6\. [VS Code](https://github.com/microsoft/vscode) 由 Microsoft 開發的免費開源程式碼編輯器。 它提供了高度可自訂且高效的程式設計環境,具有 IntelliSense、除錯支援和龐大的擴充庫等功能,可增強您的開發工作流程。 ![VS程式碼](https://user-images.githubusercontent.com/35271042/118224532-3842c400-b438-11eb-923d-a5f66fa6785a.png) ## 7\. [OhMyZsh](https://github.com/ohmyzsh/ohmyzsh) 一個流行且高度可自訂的框架,用於在類 Unix 作業系統中管理 Zsh 配置。 它簡化了 shell 自訂,提供了大量插件和主題來增強您的命令列體驗。 ![OhMyZsh](https://cloud.githubusercontent.com/assets/2618447/6316862/70f58fb6-ba03-11e4-82c9-c083bf9a6574.png) ## 8\. [Bun](https://github.com/oven-sh/bun) 一個開源 JavaScript 工具包,旨在簡化和優化為 Web 應用程式捆綁 JavaScript 程式碼的過程。 它提供了一種現代且快速的方法來建立捆綁包,從而增強了使用 JavaScript 專案時的效能和開發人員體驗。 ![Bun](https://cdn.hashnode.com/res/hashnode/image/upload/v1696318057709/5a1125cf-eb78-4e9d-9632-faebd228abe5.png) ## 9\. [SWR](https://github.com/vercel/swr) SWR(Stale-While-Revalidate)是一個用於在 React 應用程式中取得資料的 JavaScript 函式庫。 它可以在客戶端和伺服器之間實現高效、自動的資料同步,提供無縫的即時更新,同時確保資料保持新鮮和最新。 ![SWR](https://cdn.hashnode.com/res/hashnode/image/upload/v1696318453842/d9ab3384-becc-4040-93f7-8a9e064100b1.png) ## 10\. [Prisma](https://github.com/prisma/prisma) 用於現代應用程式開發的開源資料庫工具包,透過強大的查詢產生器和類型安全的 ORM(物件關聯映射)層簡化資料庫存取和操作。 它允許開發人員使用聲明性和直觀的方法管理資料庫並與之交互,從而使資料庫操作在各種資料庫系統中無縫且安全。 ![Prisma](https://i.imgur.com/O1lwo0v.png) ## 11\. [ElasticSearch](https://github.com/elastic/elasticsearch) 由 Elastic 開發的強大且可擴展的開源搜尋和分析引擎。 它旨在幫助用戶快速有效地搜尋、分析和視覺化大量資料,使其成為從全文搜尋引擎到日誌分析等應用程式的熱門選擇。 ![ElasticSearch](https://cdn.hashnode.com/res/hashnode/image/upload/v1696315923559/58c2db03-9a6c-4b98-9b48-a91025c507a2.png) ## 12\. [Hasura](https://github.com/hasura/graphql-engine) 一款功能強大的開源工具,可簡化應用程式的 GraphQL API 開發。 借助 Hasura,您可以輕鬆建立、管理和保護 GraphQL API,從而更輕鬆地與資料來源互動並建立現代的資料驅動應用程式。 ![Hasura](https://assets.website-files.com/63e3d6905bacd6855fa38c1c/63e3d6905bacd64f08a38f95_Hasura.jpg) ## 13\. [BioDrop](https://github.com/EddieHubCommunity/BioDrop) 透過單一連結與您的受眾建立聯繫。在一處展示您建立的內容和專案。 讓人們更容易找到、關注和訂閱。 ![BioDrop](https://user-images.githubusercontent.com/624760/230707268-1f8f1487-6524-4c89-aae2-ab45f0e17f39.png) ## 14\. [Powertoys](https://github.com/microsoft/PowerToys) 適用於 Windows 的開源實用程序,可提高工作效率和自訂功能。 它提供了一系列方便的工具和實用程序,包括快速啟動器、文件預覽和視窗管理等功能,旨在簡化您的 Windows 體驗。 ![Powertoys](https://cdn.hashnode.com/res/hashnode/image/upload/v1696280333258/279d3728-4731-46eb-9836-c8300d3a9f75.png) ## 15\. [Strapi](https://github.com/strapi/strapi) 開源無頭內容管理系統 (CMS),使開發人員能夠快速建立強大且可自訂的 API。 它使團隊能夠輕鬆建立和管理內容豐富的網站和應用程式,為各種專案提供靈活性和可擴展性。 ![Strapi](https://cdn.hashnode.com/res/hashnode/image/upload/v1696316645227/6122feae-4b38-4c00-a8a1-30da5346568c.png) ## 16\. [Plausible](https://github.com/plausible/analytics) 一種開源網路分析工具,旨在為網站所有者提供對其網站效能的簡單且注重隱私的見解。 它提供用戶友好、輕量級的跟踪,且不會損害存取者的隱私,使其成為那些重視資料分析而無需侵入性跟踪方法的人的理想選擇。 ![看似](https://cdn.hashnode.com/res/hashnode/image/upload/v1696280734881/0cc0aa58-46e1-49ac-a920-65f7eaad6e33.png) ## 17\. [Astro](https://github.com/withastro/astro) 現代靜態網站產生器,透過僅傳送頁面所需的 JavaScript 來提供閃電般的效能,從而實現近乎即時的載入時間。 它將傳統伺服器渲染框架的靈活性與靜態網站產生器的速度相結合,使其成為建立高效動態網站的絕佳選擇。 ![Astro](https://deegloo.com/wp-content/uploads/2022/11/blogblog-cover-1024x614.png) ## 18\. [Remix](https://github.com/remix-run/remix) 用於建立現代 JavaScript 應用程式的 Web 框架,注重速度和開發人員體驗。 它使開發人員能夠透過無縫組合伺服器渲染和客戶端渲染的內容來建立高效能的 Web 應用程式。 ![混音](https://cdn.shopify.com/s/files/1/0779/4361/files/RemixRun_bcc7b8fd-ca3a-4385-b279-91a0606706e7.jpg?v=1666895610) ## 19\. [Tensorflow](https://github.com/tensorflow/tensorflow) 由Google開發的開源機器學習框架。 它為建立和部署機器學習模型提供了靈活且全面的生態系統,使其成為人工智慧領域研究人員和開發人員的熱門選擇。 ![Tensorflow](https://m-alcu.github.io/assets/tensorflow-playground.png) ## 20\. [Flutter](https://github.com/flutter/flutter) 由 Google 建立的開源 UI 軟體開發工具包,以其從單一程式碼庫建立適用於行動、Web 和桌面的本機編譯應用程式的能力而聞名。 它使開發人員能夠使用單一程式語言 Dart 跨多個平台建立美觀、快速且高度可自訂的使用者介面。 ![Flutter](https://cdn.hashnode.com/res/hashnode/image/upload/v1696281232879/35493958-0397-40c4-9c30-ca0faead9f39.png) ## 21\. [Kubernetes](https://github.com/kubernetes/kubernetes) 一個開源容器編排平台,可自動執行容器化應用程式的部署、擴充和管理。 它為編排容器提供了強大而靈活的基礎架構,使在雲端原生環境中大規模管理複雜的分散式系統變得更加容易。 ## 22\. [Docker](https://www.docker.com/community/open-source/) 一個開源工具,可簡化多容器 Docker 應用程式的管理。 它允許開發人員使用簡單的 YAML 檔案定義和執行多容器應用程式,從而更輕鬆地編排和部署複雜的服務。 ![Docker](https://cdn.hashnode.com/res/hashnode/image/upload/v1696316908120/7e01fe2b-a438-4882-8cd6-863b7f5effb0.png) ## 23\. [Chromium](https://github.com/chromium/chromium) Google 的一個開源瀏覽器專案,旨在為所有使用者建立更安全、更快、更穩定的網路體驗方式。 它是開發人員在網路瀏覽技術領域做出貢獻和創新的平台。 ![Chromium](https://cdn.hashnode.com/res/hashnode/image/upload/v1696319343433/61d13e7f-512b-40b7-a127-b127a944cf9d.png) ## 24\. [Linux 核心](https://github.com/torvalds/linux) 由 Linus Torvalds 和全球貢獻者社群開發的開源、類別 Unix 作業系統核心。 它作為各種基於 Linux 的作業系統的核心元件,提供硬體互動和系統管理的基本功能。 ![Linux 核心](https://upload.wikimedia.org/wikipedia/commons/2/2e/Linux_Mint_21_%22Vanessa%22_%28Cinnamon%29.png) --- 以上,簡單分享!

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

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

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

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