🔍 搜尋結果:求職

🔍 搜尋結果:求職

尋找 coding 靈感,以及做 side project 賺錢的心得

嘿,我是 Vince --------- ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az8xf61b2qxx1msfo4t5.png) 我是一名自學成才的開發人員,在新冠疫情期間改變了職業生涯。我改變是因為我想要更好的職業,喜歡編程,同時對建立有利可圖的 SaaS 副專案有著濃厚的興趣。 我能夠透過在空閒時間學習、建立小型副專案、參加黑客馬拉松以及為開發人員建立教育內容來轉換職業。 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1r07ajn3gysdscjdkns.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1r07ajn3gysdscjdkns.png) 此外,我於 2023 年 3 月推出的第一個簡單 SaaS 應用程式[CoverLetterGPT.xyz](http://coverlettergpt.xyz/)目前擁有 83 名客戶,每月收入 434 美元!沒什麼瘋狂的,但我仍然感到自豪。 (順便說一句,如果你想看看我是如何建造它的,它是[開源的](https://github.com/vincanger/coverlettergpt)!) ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png) 我目前還在開發[OpenSaaS.sh](http://OpenSaaS.sh) ,這是一個免費的開源 SaaS 入門模板,適用於 React 和 NodeJS,以及 Stripe、OpenAI 和 AWS S3 集成 基於這些經驗,並向其他成功的開發人員學習,我學到了一些如何尋找靈感和動力來建立東西,作為推進職業生涯或賺取額外收入的手段。 陷入 FOMO 的陷阱 ----------- 首先,如果您在社交媒體上的軟體開發人員圈子里呆了一段時間,那麼您無疑會受到副專案成功帖子和獨立黑客的每月經常性收入 (MRR) 螢幕截圖的轟炸。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iq72bvrgoelfsqtuebyo.png) 這可能會導致 FOMO(“害怕錯過”)受到嚴重打擊。 ![https://media3.giphy.com/media/MfTW6bkRhvFzbAZO1p/giphy.gif?cid=7941fdc6q8htvl3q7ulz5hxri8ev1uzynp9yctfd945e2v21&ep=v1_gifs_search1uzynp9yctfd945e2v21&ep=v1_gifs_searchsearch&ridgi.](https://media3.giphy.com/media/MfTW6bkRhvFzbAZO1p/giphy.gif?cid=7941fdc6q8htvl3q7ulz5hxri8ev1uzynp9yctfd945e2v21&ep=v1_gifs_search&rid=giphy.gif&ct=g) 對許多開發者來說,這就是夢想:建立一個有利可圖的副業專案,帶來穩定的被動收入,辭掉日常工作,環遊世界。 但這讓很多人想知道以下問題: *“開發人員如何找到在空閒時間進行開發的動力?”* *“我也是全端 Web 開發人員,為什麼我沒有任何好的 SaaS 想法?!”* 或者 *「為什麼我總是發現自己在完成最後一個專案之前就開始了一個新的副業專案?”* 嗯,我有一些建議,基本上可以歸結為這兩點: 1. 少做一點 2. 玩得更開心 讓我解釋… 找出不該做的事情 -------- 這可能看起來有悖常理,但實際上弄清楚什麼不該做將幫助你專注於你真正、真正、真正想要做的事情。 這是我從世界上最成功的投資者之一華倫巴菲特身上學到的東西。 一位粉絲向巴菲特詢問關於選擇生活中的工作的建議,他回應: - 列出 25 個人生目標 - 從最重要到最不重要的順序排列它們 - 只關注前 5 個目標 - 避免與目標 6 至 25 相關的活動。 這種方法有趣的地方在於,它鼓勵個人策略性地在優先順序較低的活動(目標 6 到 25)中取得不理想的成績。 為什麼?因為我們可以選擇將注意力集中在無數的事情上,但如果我們不專注於重要的事情,我們永遠不會有太多成就。 執行相同的過程,但使用副專案,會產生類似的結果: - 列出您擁有的所有出色的應用程式創意 - 選擇您最感興趣的前 2 個(記住,這也應該很有趣!) - 丟掉其餘的(至少現在是這樣)。 您也可以對應用程式功能執行相同的操作,並列出您的專案應具有的所有功能,但只保留前 5 個。 是時候集中註意力了。 ![https://c.tenor.com/QcmFyE7Ei_kAAAd/tenor.gif](https://c.tenor.com/QcmFyE7Ei_kAAAAd/tenor.gif) 從小事做起 ----- 到目前為止,「從小事做起」應該是顯而易見的,但人們似乎很難記住這一點。如果不是這樣,《原子習慣》這樣的書銷售不會超過 1000 萬冊 🤯 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05auxij625650onzrfrv.png) 另外,想想有多少次我們低估了完成工作任務所需的時間。這是一個典型的案例,告訴您的團隊錯誤修復“應該只需要一天”,但最終花了一周的時間。 不過不用擔心,即使是最有經驗的高階工程師也會遇到這種情況。 因此,當你試圖保持動力時,你能做的最糟糕的事情就是給自己設定一個過於雄心勃勃的目標,並列出看似無窮無盡的待辦事項清單。 保持簡單可以讓你更輕鬆地實現你的目標,這會讓你充滿靈感,並讓你不斷迭代。 不用擔心競爭 ------ *“我有一個很棒的想法,但其他人搶先了我”* 這是你在開發者中經常聽到的藉口,它讓他們中的許多人甚至無法開始。**我的建議是根本不用擔心競爭**。 為什麼? 因為競爭是正常的,也是好的。您最終將不可避免地創造出一種可比較但不同的產品,該產品將與那些更像您(而不是像您的競爭對手)思考的客戶交談。 競爭對手也將不可避免地向您展示您不應在應用程式中複製或複製的內容。如果您看到他們的某個功能您不喜歡,或者發現自己在說“他們為什麼這樣做”,那麼您就放心了,您的應用程式可以找到自己的利基市場。 另外,以我的應用程式[CoverLetterGPT](https://coverlettergpt.xyz)為例,當我進行谷歌搜尋時,有大量贊助結果顯示在我的應用程式之前。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23r4dhzbrsc35vgrgdbd.png) 但你猜怎麼著,我的用戶數量每個月都在增加,而且我對這個應用程式幾乎沒有進行任何維護。是的,它基本上只是自行執行,即使有那麼多的競爭! --- 順便說一句,如果您正在尋找一種快速且低維護成本的方式來啟動您的下一個副專案,請查看[Open SaaS](https://opensaas.sh/) ! ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png) 它是一個完全免費、開源、功能豐富的 React + NodeJS SaaS 模板,包含 Stripe、OpenAI 應用程式範例、分析、管理儀表板和完整的文件! --- 好玩一點 ---- 沒有什麼比過於認真地對待這一切並僅僅因為你認為你應該這樣做而苦惱更糟糕的了。你是為自己做這件事,所以你應該享受這個過程。 嗯是的。尋找享受過程的方法! 在工作中享受樂趣的最佳方法之一就是**做自己感興趣的事情**。我的意思是,你*真的*有興趣。不要欺騙自己,認為你會喜歡為一個想法而努力,只是因為它可能會成功,或者因為你可能會用它給別人留下深刻的印象。您可能最終會很快失去從事該專案的靈感! 但如果你的問題是你根本沒有任何想法怎麼辦? 好吧,我的建議是要有趣並進行實驗。很多偉大的想法都是二階想法。我的意思是,它們是在處理其他事情後隨機產生的想法。 例如,我對[CoverLetterGPT](https://coverlettergpt.xyz)的想法就來自對[OpenAI API 的](https://openai.com)簡單實驗。我想知道它是如何運作的,並透過試用它,使用它來產生求職信和管理工作申請的想法似乎是一個不錯的想法,所以我就這麼做了! 在我看來,你對副業專案越有一種有趣的態度,你就會越喜歡為它們工作,這將帶來更專注的工作,甚至更多的想法。這是我在一些最好的獨立黑客(例如[Peter Levels)](https://twitter.com/levelsio)中看到的模式。我的意思是,看看令人印象深刻的 SaaS 應用程式清單! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7pg4ngejkm1jo9ky6hk.png) 永遠不要編碼 ------ 我的最後一項建議是: 休息一下! 是的,向 dev.to 和 Twitter 上的每個人展示你有多努力的衝動很強烈,但你的身心健康會受到影響。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r66fs9q192f1ioepl0vk.png) 給自己休息一下,做點其他事情,例如嗜好。還記得那些嗎? 當你休息一下時,你的潛意識可能會想出一些創造性的、鼓舞人心的想法,你可能也會感到驚訝🙂 您如何尋找建構靈感? ---------- 因此,我上面給出的提示絕不是完整的清單。將它們視為對話的開始者。 我今天的目標是展示我學到的一些東西,可能對其他人有幫助,所以如果您有其他提示、更好的建議,甚至不同意我的觀點,請在評論中告訴我們! --- 原文出處:https://dev.to/wasp/finding-the-inspiration-to-build-3p4n

酷炫的個人網站,以及製作方法說明

對於未來的軟體工程師、設計師或產品經理來說,個人網站幾乎和履歷一樣成為標準——這是有充分理由的。個人網站是展示技術或設計悟性的好方法,並提供比標準簡歷更個性化和有趣的格式(而且您無論如何都可以將簡歷放在您的網站上)。網站比一張紙更具互動性,會讓您脫穎而出,並開啟潛在的對話主題。建立個人網站的方法有很多種,您應該仔細考慮您的方法——這將是您在網路上向招聘人員和許多臨時谷歌或linkedin搜尋者展示的方式。 接下來,我們將看看特別令人難忘的個人網站(前面很漂亮),並提供一些建立或更新您自己的網站的建議。 ### 個人網站的不同用途 個人網站可以實現許多不同的目的。我已經介紹了下面一些較大的類別。 #### 資料夾 對於藝術家或設計師來說,個人網站可以作為您的作品集。這是一種很棒的格式,並且很容易保持最新狀態。例如,考慮一下自由插畫家 Paddy Donnelly 的這個[網站](http://lefft.com/)。打開這些網站以獲得完整的體驗。 ![](https://thepracticaldev.s3.amazonaws.com/i/q2gq0m32cnjf6bv6soqf.png) #### 履歷 從最基本的形式來看,個人網站是讓您的履歷變得更有趣的好方法。即使從紙質簡歷中取出文字並在帶有電子郵件連結的網站上很好地格式化它也是一個很好的開始。例如,Jackie Luo 在她的[網站](http://jackieluo.com/)上提供了她簡歷的可讀版本。 ![](https://thepracticaldev.s3.amazonaws.com/i/4ylsr3ybq8azb3p49mlo.png) #### 以我為中心 即使您不想展示您的專業經驗,個人網站也是集中搜尋有關您自己的資訊的好方法。許多人在其網站上提供社交媒體帳戶的連結。例如,Safia Abdella 的[網站](https://safia.rocks/)乾淨、簡單,可以輕鬆存取造訪她網站的任何人可能需要的關鍵資訊。 ![](https://thepracticaldev.s3.amazonaws.com/i/mfg6uhfd1zwteo422d71.jpg) #### 部落格 個人網站是保存部落格的好地方,這是向訪客展示您的作品的好方法。阿萊娜·卡夫克斯 (Alaina Kafkes) 除了在 dev.to 和 Medium 上提供她的個人資料連結之外,還提供她[網站](http://alainakafk.es/#/words)上所有最新內容的連結。 ![](https://thepracticaldev.s3.amazonaws.com/i/9fsaresu0saxr195mwgm.png) #### 其他的東西 向網路講述您的故事。履歷、社群媒體資料,甚至你的 Facebook 頁面都受到相當嚴格的控制。網站是一個可以是任何你喜歡的空間:一個遊戲化的仙境,最少的描述,或其他什麼。考慮一下 Robby Leonardi 屢獲殊榮的遊戲化簡歷[網站](http://www.rleonardi.com/interactive-resume/)。 ![](https://thepracticaldev.s3.amazonaws.com/i/j69t5vlmeani2k8a67w3.png) ### 整個職業生涯中的個人網站 如果您是應屆畢業生或正在進行職業轉型,個人網站對技術招募人員來說會很有吸引力。早在 2013 年,《富比士》就報導稱,56% 的招募經理表示,與其他品牌工具相比,他們對候選人的個人網站印象更深刻。 作為未來的設計師或軟體工程師,您可以在頁面上展示您的技術能力!即使你不做技術性的事情,網站也比紙質簡歷更引人注目、更個性化,所以這是一個很好的方法,可以通過簡單的“在i-am-the-bomb.com 查看我的簡歷」來獲得優勢。 」。 當您繼續您的職業生涯時,您仍然可以保留個人網站來展示您正在從事的工作並維護您的個人品牌。例如,Cassidy Williams 在她的[網站](http://cassidoo.co/)上提供了有關她所做的事情的更新時間表。 ![](https://thepracticaldev.s3.amazonaws.com/i/9xnfkmkgtfi48c0id89b.png) 如果您正在尋找寫作和演講的機會,這是一個很好的地方,可以展示您的所作所為,並向在線查找您的任何人提供可存取的資訊。 隨著時間的推移維護您的網站可以讓您在開始另一次求職時輕鬆地短暫刷新,這也是吸引不可預見的機會和聯繫的好方法。我曾經有一個我不認識的表弟透過個人網站聯絡我——你永遠不知道! ### 入門 現在製作網站比以往任何時候都容易。那裡有一些很棒的入門教程。如果您想快速入門,我推薦[WordPress](http://www.wpbeginner.com/guides/)或[SquareSpace](https://developers.squarespace.com/beginner-tutorial/)的這些教學。如果您想建立和託管自己的, [Github Pages](https://guides.github.com/features/pages/)中的本指南是一個很好的起點。如果您想深入了解建置、託管和服務,這是一個很好的學習方式!以下是一些可能有用的資源: - MEAN 入門網站[儲存庫](https://github.com/manishrw/mean-starter-website) - Jekyll 入門套件儲存[庫](https://github.com/nirgn975/generator-jekyll-starter-kit) - Github 自己的 Web Starter it[儲存庫](https://github.com/google/web-starter-kit) - 關於工具和框架的[實用開發線程](https://dev.to/nayeonkim/what-toolframeworkcmsetc-do-you-use-to-build-your-own-personal-website) - 與實用開發文章相對應的[Twitter 線程](https://twitter.com/thepracticaldev/status/894161129492156416) ### 一般建議 1. **從某個地方開始。**人們很容易對一個網站感到興奮,努力獲取域名,將其加入到您的個人簡介中,在頁面上貼上“正在進行中”的標籤,然後完全忘記它。當我點擊某人的個人網站時,大約有 10-20% 的時間,該網站要么完全關閉,要么「正在進行」數月或數年。不要被所有令人驚嘆的網站嚇倒。作為一個初學者,至少要在大文本中加入指向您的相關帳戶和您的姓名的連結 - 這比看起來像一個無法完成他們開始的事情要好得多。 2. 從所有可能看到的人的角度**來批判性地審視您在網站上放置的內容**。雖然 Twitter 和 linkedin 帳戶很棒,但如果您不希望招聘人員看到您的 tumblr 頁面上有關野貓的訊息,請不要將其連結到那裡。同樣,如果你認為你的黑客馬拉松專案在更好的Tinder 上對公司來說看起來很棒,但可能會讓你的父母不高興,那麼你可以將你的個人網站從你的Facebook 公開資料中刪除。有時我們都可以提醒網路是公共的! 3. **並非您的所有作品都需要展示。**個人網站可以是展示您早期專案的有趣方式,儘管您在七年級製作的海報可能會讓您感到溫暖和懷舊,但它可能會引起招聘人員的懷疑。選擇最能展現你的作品。 4. **讓它個性化。**這是您的個人網站是有原因的。不要害怕在你的網站上放一些東西。例如,Terri Burns 在她的[網站](http://tcburning.com/)上分享了她的興趣的隨機集合。這樣的事情會讓招募人員對你更有興趣,並且讓其他網站追蹤你的人也能了解你的興趣! ![](https://thepracticaldev.s3.amazonaws.com/i/cc0my10l8i7bw6yqi4cn.png) 5. 發揮創意。更多激發您創造力的好點子: - 艾伯塔德沃爾 (Alberta Devor) 的火車路線靈感[網站](https://albertadevor.com/) ![](https://thepracticaldev.s3.amazonaws.com/i/m4kry69flr4l8t2kjq8i.png) - 像素獎得主 Maria Passo 製作的精美動畫[網站](http://marisapassos.com/) ![](https://thepracticaldev.s3.amazonaws.com/i/gazd8zmp2c4clff2u59b.png) - 加里·勒馬森 (Gary Le Masson)[網站](http://www.garylemasson.com/)上引人注目的搜尋引擎框 ![](https://thepracticaldev.s3.amazonaws.com/i/f406l7g0g7q05wzt1l63.png) - Kristine Flatland 格式有趣的[網站](http://kristineflat.land/#work2) ![](https://thepracticaldev.s3.amazonaws.com/i/e8ireutjnslih5n49vln.png) - 克萊門汀‧雅各比 (Clementine Jacoby) 繪製的她曾經造訪過的[網站](http://clementinejacoby.com/new_map.html)的地圖 ![](https://thepracticaldev.s3.amazonaws.com/i/le35y2tqg55xdsdt3yls.png) 在評論中分享在您的網站上對您有用的內容! --- 原文出處:https://dev.to/amandasopkin/fantastic-personal-websites-and-how-to-make-them--22om

🪄與您的簡歷製作者聊天 - 使用 Next.js、OpenAI 和 CopilotKit 📑✨

#TL;博士 在本文中,您將了解如何使用 Nextjs、CopilotKit 和 OpenAI 建立人工智慧驅動的簡歷產生器應用程式。 我們將涵蓋: - 利用 ChatGPT 撰寫履歷和求職信 📑 - 透過與履歷聊天逐漸完善你的履歷💬 - 將您的履歷和求職信匯出為 PDF 🖨️ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxzcx6jqet2anmr2pu6c.gif) --- ## CopilotKit:建構深度整合的應用內人工智慧聊天機器人 💬 只是簡單介紹一下我們的背景。 CopilotKit 是[開源 AI 副駕駛平台。](https://github.com/CopilotKit/CopilotKit) 我們可以輕鬆地將強大的 AI 聊天機器人整合到您的 React 應用程式中。完全可定制和深度集成。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wf9zcyvtu9q293uej2n.gif) {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} 現在回到文章。 --- ## **先決條件** 要開始學習本教程,您需要在電腦上安裝以下軟體: - 文字編輯器(例如 Visual Studio Code) - 節點.js - 套件管理器 ## **使用 NextJS 建立簡歷應用程式前端** **步驟 1:** 開啟命令提示字元並執行下列命令。 ``` npx create-next-app@latest ``` --- **第 2 步:** 系統將提示您選擇一些選項,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvk0mgct4ypra7ao9u18.png) **步驟 3:** 使用您選擇的文字編輯器開啟新建立的 Nextjs 專案。然後,在命令列上執行以下命令,以使用 Tailwind CSS 安裝帶有 NextJS 的 Preline UI。依照[本指南](https://preline.co/docs/frameworks-nextjs.html)完成 Preline 設定。 ``` npm install preline ``` --- **步驟4:** 在resume/app/page.tsx檔案中,新增以下程式碼內容。 ``` export default function Home() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-slate-900 bg-gradient-to-b from-violet-600/[.15] via-transparent text-sm py-3 sm:py-0 dark:bg-gray-800 dark:border-gray-700"> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 " aria-label="Global"> <div className="flex items-center justify-between"> <a className="flex-none text-xl text-gray-200 font-semibold dark:text-white py-8" href="#" aria-label="Brand"> ResumeBuilder </a> </div> </nav> </header> {/* <!-- Hero --> */} <div className="bg-slate-900 h-screen"> <div className="bg-gradient-to-b from-violet-600/[.15] via-transparent"> <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8"> {/* <!-- Title --> */} <div className="max-w-3xl text-center mx-auto pt-10"> <h1 className="block font-medium text-gray-200 text-4xl sm:text-5xl md:text-6xl lg:text-7xl"> Craft A Compelling Resume With AI Resume Builder </h1> </div> {/* <!-- End Title --> */} <div className="max-w-3xl text-center mx-auto"> <p className="text-lg text-gray-400"> ResumeBuilder helps you create a resume that effectively highlights your skills and experience. </p> </div> {/* <!-- Buttons --> */} <div className="text-center"> <a className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="#"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </a> </div> {/* <!-- End Buttons --> */} </div> </div> </div> {/* <!-- End Hero --> */} </> ); } ``` **步驟 5:** 在命令列上執行命令 *npm run dev*。導航至 http://localhost:3000/,您應該會看到新建立的 NextJS 專案。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56ymnb9iir7z14bx4ofm.png) --- ## 使用 GitHub GraphQL 從 GitHub 取得履歷資料 **步驟 1:** 使用下列命令安裝 Axios HTTP 用戶端。 ``` npm i axios ``` **步驟 2:** 在應用程式資料夾中,建立一個名為 API 的資料夾。然後,在 API 資料夾中建立一個名為 GitHub 的資料夾。在GitHub資料夾中建立一個名為route.ts的檔案並加入以下程式碼。 ``` import { NextResponse } from "next/server"; import axios from "axios"; // Environment variables for GitHub API token and user details const GITHUB_TOKEN = "Your GitHub personal access token"; const GITHUB_USERNAME = "Your GitHub account username"; // Axios instance for GitHub GraphQL API const githubApi = axios.create({ baseURL: "https://api.github.com/graphql", headers: { Authorization: `bearer ${GITHUB_TOKEN}`, "Content-Type": "application/json", }, }); // GraphQL query to fetch user and repository data const getUserAndReposQuery = ` query { user(login: "${GITHUB_USERNAME}") { name email company bio repositories(first: 3, orderBy: {field: CREATED_AT, direction: DESC}) { edges { node { name url description createdAt ... on Repository { primaryLanguage{ name } stargazers { totalCount } } } } } } } `; // API route to handle resume data fetching export async function GET(request: any) { try { // Fetch data from GitHub const response = await githubApi.post("", { query: getUserAndReposQuery }); const userData = response.data.data.user; // Format resume data const resumeData = { name: userData.name, email: userData.email, company: userData.company, bio: userData.bio, repositories: userData.repositories.edges.map((repo: any) => ({ name: repo.node.name, url: repo.node.url, created: repo.node.createdAt, description: repo.node.description, language: repo.node.primaryLanguage.name, stars: repo.node.stargazers.totalCount, })), }; // Return formatted resume data return NextResponse.json(resumeData); } catch (error) { console.error("Error fetching data from GitHub:", error); return NextResponse.json({ message: "Internal Server Error" }); } } ``` **步驟 3:** 在應用程式資料夾中,建立一個名為 Components 的資料夾。然後,在元件資料夾中建立一個名為 githubdata.tsx 的檔案並新增以下程式碼。 ``` "use client"; import React, { useEffect, useState } from "react"; import axios from "axios"; // Resume data interface interface ResumeData { name: string; email: string; company: string; bio: string; repositories: { name: string; url: string; created: string; description: string; language: string; stars: number; }[]; } export const useGithubData = () => { const [resumeData, setResumeData] = useState<ResumeData | null>(null); // Fetch resume data from API useEffect(() => { axios .get("/api/github") .then((response) => { setResumeData(response.data); }) }, []); return { resumeData, }; } ``` --- ## 建立求職信和履歷功能 **步驟 1:** 透過在命令列上執行以下命令來安裝 CopilotKit 前端軟體包。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` **步驟2:** 在元件資料夾中建立一個名為resume.tsx 的檔案。然後在檔案頂端匯入 useMakeCopilotReadable、useMakeCopilotActionable 和 useGithubData 自訂掛鉤,如下所示。 ``` import React, { useState } from "react"; import { useGithubData } from "./githubdata"; import { useMakeCopilotReadable, useMakeCopilotActionable, } from "@copilotkit/react-core"; ``` **第 3 步:** 建立一個名為 CoverLetterAndResume 的元件。在元件內部,使用 useGithubData 掛鉤檢索從 GitHub 取得的資料。然後,宣告一個名為 createCoverLetterAndResume 的狀態變數和一個用於更新它的名為 setCreateCoverLetterAndResume 的函數。使用包含 letter 和 resume 兩個屬性的物件初始化 useState,如下所示。 ``` export const CoverLetterAndResume = () => { const {resumeData } = useGithubData(); const [createCoverLetterAndResume, setCreateCoverLetterAndResume] = useState({ letter: "", resume: "" }); } ``` **步驟 4:** 使用 useMakeCopilotReadable 掛鉤將從 GitHub 取得的資料新增為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable(JSON.stringify(resumeData)); ``` **步驟 5:** 使用 useMakeCopilotActionable 掛鉤設定一個名為 createCoverLetterAndResume 的操作,其中包含描述和實作函數,該函數使用提供的求職信和簡歷更新 createCoverLetterAndResume 狀態,如下所示。 ``` useMakeCopilotActionable( { name: "createCoverLetterAndResume", description: "Create a cover letter and resume for a software developer job application.", argumentAnnotations: [ { name: "coverLetterMarkdown", type: "string", description: "Markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (coverLetterMarkdown, resumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: coverLetterMarkdown, resume: resumeMarkdown, })); }, }, [] ); ``` **步驟 6:** 在 CoverLetterAndResume 元件外部,建立一個名為 CoverLetterResume 的元件,用於在 Web 應用程式 UI 上顯示求職信和履歷。 ``` type CoverLetterResumeProps = { letter: string; resume: string; }; const CoverLetterResume = ({ letter, resume }: CoverLetterResumeProps) => { return ( <div className="px-4 sm:px-6 lg:px-8 bg-slate-50 py-4"> <div className="sm:flex sm:items-center"> <div className="sm:flex-auto"> <h1 className="text-3xl font-semibold leading-6 text-gray-900"> ResumeBuilder </h1> </div> </div> {/* Cover Letter Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter </h2> <div className="min-w-full divide-y divide-gray-300 p-2"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white p-2"> <ReactMarkdown>{letter}</ReactMarkdown> </div> </div> </div> </div> </div> </div> {/* Cover Letter End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <textarea className="p-2" id="coverLetter" value={letter} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} {/* Resume Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Resume </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <ReactMarkdown>{resume}</ReactMarkdown> </div> </div> </div> </div> </div> {/* Resume End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> {/* {letter} */} {/* <ReactMarkdown>{letter}</ReactMarkdown> */} <textarea className="p-2" id="resume" value={resume} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} </div> ); }; ``` **第7步:**然後返回CoverLetterAndResume元件內的CoverLetterResume元件,如下圖所示。 ``` return <CoverLetterResume {...createCoverLetterAndResume}/>; ``` **第8步:** 在應用程式資料夾中建立一個名為resumeandcoverletter的資料夾。然後,建立一個名為 page.tsx 的檔案並新增以下程式碼。 ``` "use client"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; import "@copilotkit/react-textarea/styles.css"; // also import this if you want to use the CopilotTextarea component import "@copilotkit/react-ui/styles.css"; // also import this if you want to use the chatbot component import React, { useEffect, useState } from "react"; import { CoverLetterAndResume } from "../components/resume"; function buildResume () { return ( <CopilotProvider chatApiEndpoint="./../api/copilotkit/chat"> <CopilotSidebarUIProvider> <CoverLetterAndResume /> </CopilotSidebarUIProvider> </CopilotProvider> ); } export default buildResume; ``` **步驟 9:** 使用下列指令安裝 openai 軟體套件。 ``` npm i openai ``` **步驟 10:** 在應用程式資料夾中,建立一個名為 API 的資料夾。然後,在 API 資料夾中建立一個名為 copilotkit 的資料夾。在 copilotkit 資料夾中,建立一個名為 chat 的資料夾。然後,在聊天資料夾中建立一個名為route.ts的檔案並新增以下程式碼。 ``` import OpenAI from "openai"; const openai = new OpenAI({ apiKey: "Your ChatGPT API key", }); export const runtime = "edge"; export async function POST(req: Request): Promise<Response> { try { const forwardedProps = await req.json(); const stream = openai.beta.chat.completions .stream({ model: "gpt-4-1106-preview", ...forwardedProps, stream: true, }) .toReadableStream(); return new Response(stream); } catch (error: any) { return new Response("", { status: 500, statusText: error.error.message }); } } ``` **步驟 11:** 在應用程式資料夾中的 page.tsx 檔案中,在「開始」按鈕中新增一個連結,用於導航到簡歷和求職信頁面,如下所示。 ``` <div className="text-center"> <Link className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="/resumeandcoverletter"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </Link> </div> ``` **第12步:**導航至http://localhost:3000/,點擊「開始」按鈕,您將被重新導向到與聊天機器人整合的履歷和求職信頁面,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqfjykc75pherkjxut4p.png) **第 13 步:** 向右側的聊天機器人發出諸如“建立求職信和簡歷”之類的提示。聊天機器人將開始產生回應,完成後,它將在頁面左側顯示產生的求職信和履歷,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7muhhi4a85ol0ddyi1l.png) --- ## 建立更新求職信功能 **第 1 步:** 宣告一個名為 updateLetter 的變數,用於保存先前產生的求職信。 ``` const updateLetter = createCoverLetterAndResume.letter; ``` **步驟 2:** 使用 useMakeCopilotReadable 掛鉤新增 updateLetter 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Cover Letter:" + JSON.stringify(updateLetter)); ``` **步驟 3:** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateCoverLetter 的操作,其中包含描述和實作函數,該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態,如下所示。 ``` useMakeCopilotActionable( { name: "updateCoverLetter", description: "Update cover letter for a software developer job application.", argumentAnnotations: [ { name: "updateCoverLetterMarkdown", type: "string", description: "Update markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedCoverLetterMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: updatedCoverLetterMarkdown, })); }, }, [] ); ``` ** 步驟 4:** 給聊天機器人一個提示,例如“更新求職信並加入我正在申請 CopilotKit 的技術寫作職位。”如下圖所示,您可以看到求職信已更新。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dkm8zacgbmn19j9qtw6.png) --- ## 建立更新復原功能 **第 1 步:** 宣告一個名為 updateResume 的變數,用於保存先前產生的求職信。 ``` const updateResume = createCoverLetterAndResume.resume; ``` **步驟 2:** 使用 useMakeCopilotReadable 掛鉤新增 updateResume 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Resume:" + JSON.stringify(updateResume)); ``` **步驟 3:** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateResume 的操作,其中包含描述和實作函數,該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態,如下所示。 ``` useMakeCopilotActionable( { name: "updateResume", description: "Update resume for a software developer job application.", argumentAnnotations: [ { name: "updateResumeMarkdown", type: "string", description: "Update markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedResumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, resume: updatedResumeMarkdown, })); }, }, [] ); ``` **第 4 步:** 向聊天機器人發出提示,例如「更新履歷並將我的姓名加入為 John Doe,將我的電子郵件加入為 [email protected]」。如下圖所示,可以看到履歷已更新。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d9y6pmfynxwzff8be86.png) --- ## 建立下載求職信和履歷表 Pdfs 功能 **第 1 步:** 安裝 jsPDF,一個用 JavaScript 產生 PDF 的函式庫。 ``` npm i jspdf ``` **步驟 2:** 在 CoverLetterAndResume 元件內,使用 useMakeCopilotActionable 掛鉤設定一個名為“downloadPdfs”的操作,其中包含描述和實現函數,該函數使用 jsPDF 庫為求職信和簡歷建立 PDF,然後保存它們, 如下所示。 ``` function addTextToPDF(doc: any, text: any, x: any, y: any, maxWidth: any) { // Split the text into lines const lines = doc.splitTextToSize(text, maxWidth); // Add lines to the document doc.text(lines, x, y); } useMakeCopilotActionable( { name: "downloadPdfs", description: "Download pdfs of the cover letter and resume.", argumentAnnotations: [ { name: "coverLetterPdfA4", type: "string", description: "A Pdf that contains the cover letter converted from markdown text and fits A4 paper.", required: true, }, { name: "resumePdfA4Paper", type: "string", description: "A Pdf that contains the resume converted from markdown text and fits A4 paper.", required: true, }, ], implementation: async () => { const marginLeft = 10; const marginTop = 10; const maxWidth = 180; const coverLetterDoc = new jsPDF(); addTextToPDF( coverLetterDoc, createCoverLetterAndResume.letter, marginLeft, marginTop, maxWidth ); coverLetterDoc.save("coverLetter.pdf"); const resumeDoc = new jsPDF(); addTextToPDF( resumeDoc, createCoverLetterAndResume.resume, marginLeft, marginTop, maxWidth ); resumeDoc.save("resume.pdf"); }, }, [createCoverLetterAndResume] ); ``` **第 3 步:** 返回網頁應用程式中的聊天機器人,並提示「下載求職信和簡歷的 pdf 檔案」。 PDF 將開始下載,如果您開啟 coverLetter.pdf,您應該會看到產生的求職信,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p853urbqn43jh6454at.png) --- ## 結論 總而言之,您可以使用 CopilotKit 建立應用內 AI 聊天機器人,該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 對於完整的源程式碼: https://github.com/TheGreatBonnie/AIPoweredResumeBuilder --- 原文出處:https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb

🏞️5 個可供學習並獲得靈感的開源網路應用程式🙇‍♀️💡

如標題所示,在這篇文章中,我們將介紹您可以學習並用作下一個專案起點的開源 Web 應用程式。堅持到最後,因為那裡有超酷的獎勵等著你! 在我們開始討論之前,先說幾句智慧之言(希望如此): ## (開源)榜樣的重要性 ![你很漂亮](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqf1wss7puysn3q0rhso.gif) **從頭開始一個新專案時,您可以做的最有幫助的事情之一就是選擇一個或多個角色模型。**例如,如果您正在建立一個新的生產力應用程式,您可能會關注Trello 等產品或體式。當然,您的應用程式不會相同,並且您可能會想到一些使您的應用程式獨一無二的核心差異,但仍然會有很多您不想重新發明的共享概念和機制。 即使您的角色模型是一個閉源應用程式,您仍然可以透過在野外觀察它來獲得很多價值 - 設計元素、UI、用戶旅程和使用的術語,... **但是現在想像一下,如果您決定學習的應用程式是開源的,並且您可以輕鬆地在 GitHub 上存取其完整原始程式碼 - 這將打開一個全新的可能性世界!** 接下來只需從“外面」並猜測幕後發生了什麼,現在您可以看到每一個細節並了解所做的每一個決定。架構、部署、API 設計、庫和使用的演算法 - 一切都在那裡供您查看! ## 注意規模(也就是不要過度設計) 另一件需要記住的事情是您的專案目前所處的階段。下面,我們將看到開源 SaaS 應用程式的不同範例,從獨立駭客、「週末建置」副專案到企業級 Web 平台。 **儘管您可能會發現擁有數百萬用戶的專案是一個令人驚嘆的學習資源,但請記住,並非他們所做的一切都是您必須嚴格遵循的。由於他們每天遇到的用戶規模和數量龐大**,他們的架構和設計決策通常會更加複雜。如果您剛開始,最好堅持使用最簡單(但仍然合理)的方法,直到您希望需要更高級的方法。 > 從現在開始,對於我們提到的每個應用程式,我們將使用“T 卹尺寸”方法(S、M、L...),讓您大致了解其尺寸和複雜性(無論是在功能還是功能方面)。使用者。 現在,前言結束了,讓我們一起來看看一些令人驚嘆的開源應用程式,您可以立即開始學習: ![樂趣現在開始](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7z4q2cxeiocgpgj3ofs.gif) ## [CoverLetterGPT](https://coverlettergpt.xyz/) - 人工智慧驅動的 SaaS 的完美起點 💾 **原始碼**:https://github.com/vincanger/coverlettergpt 👕 **尺寸**:S **🛠️ Stack**:Chakra UI、React、Node.js 和 Prisma,由 [Wasp](https://github.com/wasp-lang/wasp) 提供支持 [CoverLetterGPT.xyz](http://CoverLetterGPT.xyz) 是每個獨立駭客的夢想- **它是一個由GPT 支援的SaaS,完全開源,最重要的是,它是人們每天使用並付費的真實產品為了**!根據您的履歷和職位描述,該工具將產生一封專業撰寫的求職信。然後,您可以進一步調整每個段落的語氣或手動編輯。 它非常適合學習,因為它不太大,架構也很簡單,但它具有應用程式中可能需要的所有功能 - 社交身份驗證 (Google)、cron 作業、文件上傳、GPT 集成、透過 Stripe 進行支付集成,甚至可以透過比特幣付款! CoverLetterGPT 由 React、Node.js 和 Prisma 製成,由 [Wasp 框架](https://github.com/wasp-lang/wasp) 提供支持,它負責所有管道並刪除大量樣板檔案。 **最好的部分是,當您準備好時,可以透過執行單一 CLI 命令來免費部署應用程式**:「wasp deploy」。 <center><h3>🚨注意🚨</h3></center> > 提示:Wasp 團隊最近發布了 [OpenSaaS](https://kdta.io/github-wasp-lang-open_3),**一個完全免費且開源的 React 和 Node.js 樣板啟動器**。它包含提到的所有內容 + Tailwind、管理儀表板、登陸頁面、部落格等。 [在此處查看](https://kdta.io/github-wasp-lang-open_4) 以更快地開始使用。 ## Supabase Studio - 儀表板傑作🖼️ ![Supabase 工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jc2pz1vhg1wysk7o9148.gif) 💾 **原始碼**:https://github.com/supabase/supabase/tree/master/apps/studio **👕 尺寸**:M/L **🛠️ 堆疊:** Next.js (React)、Tailwind [Supabase](https://supabase.com/) 是一個著名的開源專案,其核心是用 Elixir 編寫的。但是,由於我們在本文中專注於 Web 應用程式,因此我們將看一下 **Supabase Studio - 一個儀表板,您可以在其中查看和管理所有專案。它本身就是一部傑作,而且完全開源!** 該設計是使用 Tailwind 定制的,您可能希望在自己的專案中重複使用許多元素 - 用戶管理、表格、列表等。它還有自己的 AI 集成,用於編寫 SQL 查詢,效果出奇的好。 ## Papermark - 開源 DocSend 替代方案 ✉️ ![papermark_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt76y923xnpjhbglbvmn.png) 💾 **原始碼**:https://github.com/mfts/papermark 👕 **尺寸**:M **🛠️ 堆疊**:Next.js (React)、Tailwind、Prisma [Papermark](https://github.com/mfts/papermark) 最近受到社群的廣泛喜愛,尤其是其簡潔的設計和直覺的介面。雖然從外觀上看起來很簡單,但該應用程式包含許多功能,使一切順利執行:文件上傳、電子郵件發送、內建分析和自訂網域... **如果您正在建立涉及大量文件管理和使用者協作的專案**,這絕對是您應該考慮的專案。 ## [Crowd.dev](http://Crowd.dev) - 開發社群資料平台,使用 Vue 製作 📊👩‍💻 ![crowd_dev_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykd2vxomnrl02j46i7mm.png) 💾 **原始碼**:https://github.com/CrowdDotDev/crowd.dev **👕 尺寸**:M **🛠️ 堆疊:** Vue、Node.js [Crowd.dev](http://Crowd.dev) 是 GitHub 最新的後起之秀之一 - 它是一個用於監控社區活動的平台,無論是在 Slack 還是 Discord 上。如果您正在經營自己的開發者社區,那麼這樣的工具是必須具備的,以便了解正在發生的事情以及最活躍的成員是誰。 它在儀表板方面提供了很多功能,但它的另一個強項是**集成 - 如果您正在建置一個從外部源獲取和處理大量資料的應用程式,那麼這是您的首選角色模型**。如果你是 Vue 愛好者,那就加分了,因為這個專案就是用它製作的! ## Habitica - 作為角色扮演遊戲的習慣追蹤器🐲⚔️ ![habitica_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g69lfe93k931fyoj1fzv.png) 💾 **原始碼**:https://github.com/HabitRPG/habitica **👕 尺寸**:L **🛠️ 堆疊:** Vue、Bootstrap、SAAS、Node.js、MongoDB [Habitica](https://habitica.com/) 是我見過的最酷的網頁應用程式之一(他們也有 iOS 和 Android 應用程式) - 它可以幫助您透過角色扮演遊戲!想像 Trello 這樣的看板,但對於您完成的每項任務,您都可以獲得 XP 和金幣,甚至可以與朋友組隊接受任務。 Habitica 已經存在 10 年了,它通過 Vue、Node.js/Express 和 MongoDB 的經典堆疊完美地經受住了時間的考驗。 **如果您想了解建立了多麼豐富的互動式 UI,以及執行這種規模的專案需要什麼樣的架構,那麼這個應用程式絕對值得一試。**誰知道,您甚至可能最終成為居住自己! ## 🏆 **獎勵** 🏆 Appflowy - Rust 和 Flutter 中的概念替代品 🤯 ![appflowy_banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tlzizemi22g9wkb48yfz.png) 💾 **原始碼**:https://github.com/AppFlowy-IO/AppFlowy **👕 尺寸**:M **🛠️ 堆疊:** Flutter、Rust 如果您走到這一步,您應該得到特別的待遇!這不是一個網絡應用程式,但它太酷了,我無法控制自己 - 它是**一個用 Rust 和 Flutter 建置的 Notion 替代品(因此可以做筆記)**!由於其本地優先的性質,用戶體驗非常流暢,並且它還將所有內容同步到雲端(如果您願意,您可以自行託管)。 **如果您一直在使用 Rust,但也在尋找一個可以每天使用的專案,Appflowy 可能是完美的選擇。** 它擁有從資料儲存到業務邏輯和 UI 的所有內容,全部都包含在其中一個包供您學習並查看您認為最有趣的內容。 ## 就是這樣!我很想聽聽你的訊息🫵 ![that_is_all](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovyclq3iyi3d15kfxcaw.gif) 這就是我們今天的全部內容(*放下麥克風*),非常感謝您的閱讀!我希望您發現它有用和/或有趣。 我在撰寫本文時遇到了很多開源 Web 應用程式,很難只選擇其中 5 個。 **現在,我很想聽聽您的來信 - 您最喜歡的開源應用程式是什麼,以及您如何使用它們?寫在下面的評論👇** 謝謝您,下次再見! 👋 --- 原文出處:https://dev.to/matijasos/5-beautiful-open-source-web-apps-to-learn-from-and-get-inspired-280f

作為開發者賺取額外現金的 50 種方法💰

目前大環境不好,但作為開發人員,我們擁有一套獨特的技能,如果您知道在哪裡尋找,這些技能的需求量很大! 這篇文章簡要概述了 50 個作為開發人員可以用來賺取額外收入的副業 --- ### 1. 銷售注意力 基於參與度的收入是指您將根據使用者在您的網站、個人資料或消費您的內容上花費的時間來獲得收入分成。它通常很小,至少對於較小的網站或創作者來說是這樣,但隨著時間的推移,它會增加,任何人都可以啟用它 - 所以你不會有任何損失。 - [Brave](https://creators.brave.com/) - 為使用 Brave 瀏覽器造訪您的網站、個人資料或查看您的內容的使用者付費。資金以 [BAT](https://basicattentiontoken.org/) 形式存入您的 Uphold 帳戶,然後可以以美元、英鎊或歐元形式提取至您的銀行帳戶 - [Flattr](https://flattr.com/) - 付費使用 Flattr 的用戶將其資金分配給用戶存取過其內容的創作者 > 幾年前,我親自報名了 Brave Rewards。在驗證了我的網域和個人資料的所有權後,我每月一直賺幾英鎊 - 到目前為止大約 200 英鎊以上(儘管我是 Firefox 用戶!)。雖然不多,但只需付出很少的努力,就值得了。 有關其工作原理的更多訊息,請查看 [webmonetization.org](https://webmonetization.org/) 規範,該規範利用了 [付款指針](https://paymentpointers.org/)通過[ILP](https://interledger.org/) 透過使用簡單的`<link rel="monetization" href="your-pointer-here" />` 標籤來串流來自支援WM 的訪客的收入。 --- ### 2. API 即服務 RapidAPI 等平台可讓您從 API 中[賺取被動收入](https://rapidapi.com/guides/earn-a-passive-venue-by-monetizing-apis-as-a-developer)。 建置並部署簡單的 API 後,您可以將其匯入 RapidAPI Hub,選擇使用和定價計劃,然後點擊發布。您的 API 可大可小,如您所願。 如果您正在為一個簡單的第一個專案尋找靈感,請考慮將開放資料集轉換為 API。對於初學者,RapidAPI 有一個關於如何入門的[影片系列](https://rapidapi.com/courses/build-and-sell-your-own-api)。其他想法可能包括將現有套件包裝為 API、向其他服務(如 OpenAI)加入功能或建置執行一些簡單計算的端點。 --- ### 3. 發放賞金 這些是開源專案的熱門功能請求。用戶可以在承諾一定金額的情況下提供“賞金”,然後將其支付給第一個完成並合併該功能的開發人員。 - [BOSS.dev](https://www.boss.dev/) - 完成功能請求和錯誤修復,獎金從 30 美元到 1000 美元不等。 --- ### 4. 贊助商 如果您在 GitHub 或其他平台上有業務,那麼啟用贊助是一種為您的工作帶來收入的有益方式。 不要忘記啟用贊助商按鈕。這適用於各種平台以及 GitHub 贊助商 - [GitHub Sponsors](https://github.com/sponsors) - 對於開發人員(無論規模大小)來說都是一個不錯的選擇。如果支持者已經在 GitHub 上,則零費用且進入門檻低 - [Patreon](https://www.patreon.com/) - 允許向您的支持者提供福利和獨家內容。如果您在 GitHub 以外的其他平台上有業務,這是一個不錯的選擇 - [LibrePay](https://liberapay.com/) - 針對那些建立開源內容的人 - [Open Collective](https://opencollective.com/) - 如果您正在為特定專案籌集資金,並使用收益來支持該專案(而不是個人),那麼這是一個不錯的選擇 - [Steday](https://steadyhq.com/en) - [TideLift](https://tidelift.com) - 更針對那些開發企業級開源專案的人,潛在收入更大,但僅限於最大的專案 - [LFX](https://lfx.linuxfoundation.org/) - 由 Linux 基金會提供 > 贊助(特別是GitHub 贊助商)是我個人最喜歡的方法之一,因為付費是可選的,所以你不會阻止那些無力承擔費用的人存取,而且那些支持你的人已經知道他們會預先得到什麼,所以您永遠不會讓客戶失望。 --- ### 5. 小費 您可能遇到過這樣的情況,您發現某個部落格文章、SO 答案、GitHub 儲存庫或論壇回應非常有幫助,以至於您希望可以為作者買一杯啤酒來表示感謝。 支援這些小額一次性付款的平台可以免費註冊,並且在您的個人資料中或在部落格文章末尾加入「提示」按鈕不會有任何損失。 - [Ko-fi](https://ko-fi.com/) - [請我喝杯咖啡](https://www.buymeacoffee.com/) - [Tipeee](https://en.tipeee.com/) - [PayPal Me](https://www.paypal.com/paypalme/) 提示:不要乞求。建立一些有用的內容,然後將提示連結放在底部。 --- ### 6. 企業贊助 許多具有一定下載量/經常性用戶的開源專案將開始被希望贊助創作者作品的公司接洽,以換取他們的公司徽標+連結包含在自述文件頂部附近。與個人贊助不同,這些贊助通常起價為 100-500 美元/月,專案使用量越大,贊助金額就越多。 --- ### 7. 黑客松 編碼競賽一直在遠端進行。這些通常由公司贊助,並向獲獎者支付現金獎勵。 - [程式碼之夏](https://summerofcode.withgoogle.com/) - 由 Google 執行,您將收到[貢獻者津貼](https://developers.google.com/open-source/gsoc/help/student-stipends) 成功接受後,金額從750 美元到6000 美元不等,金額取決於您所在的國家/地區和專案規模 - [CodeHeat](https://codeheat.org/) - 由 FOSS Asia 運營,每兩週 100 新元,外加較小的獎品 - [HackerEarth](https://www.hackerearth.com/challenges/hackathon/) - [Hackathon.com](https://www.hackathon.com/online) - [Devfolio 黑客松](https://devfolio.co/hackathons/upcoming) > 當我還是學生時,我[曾經參加過很多](https://alicia.omg.lol/hackathons) 黑客馬拉松(大部分是面對面的),並且經常能夠通過參加各種活動來資助我的暑假活動!這也是認識新朋友、學習新事物的好方法,而且非常有趣! --- ### 8. 依賴套件的贊助 如果您有一個軟體包(例如 NPM 模組),那麼在您的設定檔中啟用贊助將允許您的程式碼的使用者在財務上做出貢獻。 - NPM 資金 - 您可能熟悉執行“npm 基金”,並查看您正在使用的正在尋求資金的軟體包清單。新增了 [npm 基金](https://docs.npmjs.com/cli/v6/commands/npm-fund),以便更輕鬆地向專案所依賴的依賴項的維護者捐款。如果您維護 NPM 包,只需在 package.json 中包含「funding」字段,用戶將能夠更輕鬆地支援您。 - [StackAid](https://www.stackaid.us/) - 只需安裝 StackAid GitHub 應用程式並連結您的 Stripe 帳戶,直接或間接使用您專案的支持者捐贈的部分資金將分配給您每個月 - GitHub Sponsors - GitHub Sponsors 再次出現,因為它[讓用戶提供他們最常用的依賴項](https://github.com/sponsors/explore) - 儘管這是一個手動過程,而不是自動的。 --- ### 9. 回報問題 如果您注重安全性,或喜歡在應用程式中尋找錯誤和漏洞,那麼這款就適合您。最受歡迎的平台是[HackerOne](https://hackerone.com/opportunities/all/search?ordering=Highest+bounties),每個負責任地披露的錯誤都可以在其中賺取20 到200,000 美元的收入。 許多其他網站也直接提供負責任的揭露政策,他們會獎勵您的工作。如果您對此感興趣,我在以下位置保留了 1000 多個賞金計劃的清單:[https://bug-bounties.as93.net](https://bug-bounties.as93.net) > 我個人透過這種方法取得了很大的成功,而且也很有趣 - 所以我強烈推薦它! 其他值得查看的平台包括: - [HackerOne](https://www.hackerone.com/) - 排名第一的平台,最多的賞金以及良好的保護和支付率 - [Immunefi](https://immunefi.com/) - 專門針對 Web3 - [BugCrowd](https://www.bugcrowd.com/bug-bounty-list/) - [Intigriti](https://www.intigriti.com/) - [issuehunt](https://issuehunt.io/) --- ### 10.開放核心模型 這是您的大部分程式碼都是開源的,但某些擴充功能或附加元件(特別是針對企業客戶的擴充或附加元件)被授權為專有的。 因此,開發者可以在其他開源專案中自由使用該軟體。然而,公司必須為使用企業特定的模組或整合付費。 請記住,這通常說起來容易做起來難。您需要能夠分離專有功能,而大公司通常會採取一切措施(包括違反許可限制)來避免付費。 --- ### 11. 付費升級套件 這些服務可以輕鬆為常見註冊管理機構提供高級/付費方案。例如,如果您希望分發 NPM 模組的高級版本,或對特定軟體包功能收費,這可能是個不錯的選擇。 - [PrivJS](https://www.privjs.com/) - 分發 Node 套件的進階版本 - [CodeShip](https://codecodeship.com/) - 私人註冊中心,用戶需要付費才能使用你的包 --- ### 12.贊助支持 在開源專案中加入專業支援計劃選項使客戶能夠支付一次性或持續的幫助和支援費用,以啟動和執行。 這可以透過您自己的系統啟用,也可以使用現有的贊助平台(例如Patreon 和GitHub Sponsors),或使用專門的服務(例如[Otechie](https://otechie.com/))來啟用,該服務加入了付費功能+ 支援通過嵌入的聊天對話框。 [Calendly](https://calendly.com/) 等工具可以讓客戶將時間放入日曆中,或者對於較大的專案,投資專用的客戶支援平台,例如[HelpScout](https://www.helpscout.com/) 可能會讓這件事變得更容易。 --- ### 13. 寫文件 - [撰寫文件](https://www.writethedocs.org/) 是所有文件的首選位置。 - [文件季節](https://developers.google.com/season-of-docs) - 在 Google 的支持下,每年都有技術作家為開源專案做出貢獻。參與專案將獲得 5,000 至 15,000 美元的贈款,然後通常透過 Open Collective 分發給貢獻者。 - 如果你環顧四周,你會發現還有很多產品正在尋找技術作家。 Julia 列出了一份[好名單](https://dev.to/juliafmorgado/get-paid-to-write-technical-articles-16cl),列出了願意付費讓你撰寫技術內容的公司 - 版權也屬於這一類。 [scripted](https://www.scripted.com/) 等服務可讓您透過校對或編輯其他文字內容來賺錢。 即使只是記錄您自己的和其他開發人員的儲存庫也是一個不錯的起點。 如果專案被記錄下來,它的價值就會大幅增加。如果沒有文件,潛在使用者、客戶或開發人員將不知道它的用途、如何使用它、如何在其基礎上建立或如何做出貢獻。 > 我可能是唯一的一個,但我個人喜歡寫文件。 [我的所有專案](https://github.com/Lissy93?tab=repositories) 包括完整的使用、開發和貢獻文件。這促進了它們的成功和採用。我覺得如果你不花一點時間向人們展示如何使用它,那麼花幾個小時建立一些很棒的東西是沒有意義的。 --- ### 14. 廣告 在你跳過這一點之前——我也討厭廣告。它們很煩人,並且經常涉及某種形式的跟踪,從而損害用戶的隱私。但是,對於開源專案,還有一些其他選項沒有這些缺點。 - [Ethical Ads](https://www.ethicalads.io/) - [Carbon Ads](https://www.carbonads.net/open-source) 如果您正在維護獲得穩定流量的 GitHub 儲存庫、網站、部落格或服務,那麼這是一個不錯的選擇。通常每月至少需要約 10,000 個用戶,但如果您每月獲得 50,000 以上的用戶,您將獲得更好的回報。 --- ### 15. 出售你的程式碼 > 我個人不同意這種方法,只是因為出售的許多程式碼都是開源軟體的糟糕的重新設計版本,並且並不總是給予原始作者適當的榮譽。也就是說,一些開發商確實設法讓它發揮作用,建造簡單的專案然後將其出售。 - [IndieMaker](https://indiemaker.co/) - 出售您的整個專案 - [PieceX](https://www.piecex.com/) - 出售現成的原始碼 - [Codester](https://www.codester.com/info/seller) - 針對 PHP 和 Wordpress --- ### 16.銷售內容 當您查看開發人員的副業時,這是一個常見的建議。但有充分的理由 - 如果您能夠建立高品質的內容,您可以賺到很多錢。特別是如果您對新興領域有深入的了解。 銷售內容的熱門網站包括: - [GumRoad](https://gumroad.com/) - 程式碼、課程、貼文、藝術、設計、媒體(10% 費用) - [AppSumo](https://sell.appsumo.com/) - 程式碼、應用程式、擴充功能、課程、範本等 --- ### 17.寫作 這是一套獨特的技能。要么您非常擅長編寫引人入勝的內容,要么您對特定的熱門領域有深入的了解。否則,如果您對此感興趣,請考慮電子書出版,如果您的書不成功,也不會造成任何損失。 - [LeanPub](https://leanpub.com/) - 一個自助出版技術/開發電子書和課程的平台,具有豐厚的收入模式(您可以保留 70%) - [Amazon KDP](https://kdp.amazon.com/en_US/) - 發佈至 Amazon Kindle,並立即向全球數百萬用戶提供(亞馬遜將收取至少 30% 的佣金,可能會更多)小出版商) - [SmashWords](https://www.smashwords.com/) 和 [Draft2Digital](https://draft2digital.com/sw/) - 分發給全球其他電子書賣家,這是一種簡單的開始出版。他們收取的佣金比亞馬遜少,但比 LeanPub 多。 --- ### 18.補助金 補助金和企業贊助涉及多個領域,包括開源、創新、DeFi、人工智慧等。它們通常是為了幫助您在從事特定工作時支付短期生活費用。 - [GitHub Sponsors](https://github.com/sponsors) - 為個人和組織提供經濟支援開源開發者的平台。金額依贊助情況而有所不同。 - [Google Summer of Code (GSoC)](https://summerofcode.withgoogle.com/) - 學生開發者為開源專案做出貢獻的全球計劃,津貼通常為 1500 美元到 3300 美元不等。 - [Mozilla 開源支援 (MOSS)](https://www.mozilla.org/en-US/moss/) - 為開源軟體開發提供資助,特別是與 Mozilla 使命相符的專案。 - [Linux 基金會資助](https://www.linuxfoundation.org/) - 為從事 Linux 基金會專案的開發人員提供各種資助和獎學金。 - [NumFOCUS 小額發展補助金](https://numfocus.org/programs/small-development-grants) - 支援資料科學和科學計算的小型專案。資助金額各不相同(所有申請人均分配 285,000 美元)。 - [Apache 軟體基金會贊助](https://www.apache.org/foundation/sponsorship.html) - 對 Apache 軟體專案的財務支持,重點關注 Apache 軟體生態系統。 - [Outreachy](https://www.outreachy.org/) - 為技術領域代表性不足的群體提供為期三個月的實習機會,津貼通常約為 5,500 美元。 - [奈特基金會](https://knightfoundation.org/grants/) - 為促進優質新聞業的技術專案提供資助。根據專案範圍的不同,贈款金額差異很大。 - [原型基金](https://prototypefund.de/) - 在六個月內提供高達 47,500 歐元的開源原型支持,重點支持德國的軟體開發人員。 - [斯隆基金會](https://sloan.org/programs/digital-technology) - 為開放科學社群計畫提供資助,特別是那些增強研究中的開源軟體的計畫。 - [Chan Zuckerberg Initiative 開源軟體專案](https://chanzuckerberg.com/rfa/) - 專注於支援對生物醫學研究至關重要的開源軟體。資助金額各不相同。 - [Raspberry Pi 基金會](https://www.raspberrypi.org/grants/) - 為涉及 Raspberry Pi 和計算教育的教育計畫提供補助。 - [GitCoin](https://gitcoin.co/) - 一個為開源專案提供資金的眾籌平台,特別是在以太坊和 Web3 領域。資金根據社區支持而有所不同。 - [NLnet 基金會](https://nlnet.nl/foundation/) - 支援網路科技與網路研究計畫。補助金額各不相同。 - [開放技術基金](https://www.opentech.fund/) - 支持開發促進人權和開放社會的開放技術的專案。資金各不相同。 --- ### 19. 舉辦活動 活動空間是一個利潤豐厚的行業,尤其是如果您能夠舉辦一場精彩的活動並為自己贏得大型贊助商的話。雖然不適合所有人,但舉辦活動可以帶來以下 10 個潛在收入來源: - **門票銷售**:透過收取入場費來產生收入。使用 [Eventbrite](https://www.eventbrite.co.uk/)、[Meetup](https://meetup.com/) 或 [Ticketmaster](https://ticketmaster.com) 等平台取得門票管理。 - **贊助**:確保科技公司的財務捐助,以換取活動中的促銷機會。 - **研討會和培訓課程**:提供特定技術或程式語言的專業實務學習經驗,收取額外費用。 - **虛擬活動**:使用[Zoom](https://zoom.us/)、[WebEx](https://www.webex.com/) 或 [Hopin](https://hopin.com/)。 - **黑客馬拉松**:舉辦收取報名費的程式設計競賽,或尋找贊助商來支付費用並提供獎金。 - **社交活動**:針對技術專業人士的社交活動收費,可能會吸引招聘公司的贊助。 - **演講活動**:利用您在特定技術領域的專業知識,組織並負責演講活動或小組討論。 - **企業培訓及靜修**:為企業內部培訓或團隊建立活動提供活動組織服務。 - **聯盟行銷**:在活動期間利用科技產品或服務的聯盟行銷來獲取額外收入。 - **產品發布**:與科技公司合作舉辦產品發布活動,為您提供收費的組織服務。 --- ### 20.研究 您的意見很有價值,尤其是作為開發人員。有些研究人員會付錢給你參加他們的研究、調查或智庫。通常,好的研究機會很少而且相距甚遠,或者報酬相當低。 這類工作的熱門平台包括:[Testable Minds](https://minds.testable.org/)、[Respondent](https://app.respondent.io/signup) --- ### 21. 建立課程 - [Skillshare](https://www.skillshare.com/teach) - 根據課程觀看分鐘數提供付款以及推薦獎金。 - [Coursera](https://www.coursera.org/for-universities) - 與機構合作提供課程;付款通常基於收入分享協議。 - [LinkedIn Learning](https://www.linkedin.com/learning/instructors) - 講師可以為專業人士建立課程;薪酬詳細資訊由 LinkedIn 安排。 - [Thinkific](https://www.thinkific.com/) - 提供建立、行銷和銷售線上課程的工具,具有各種定價計劃,包括免費選項。 - [Kajabi](https://kajabi.com/) - 線上課程、行銷、支付和網站建立的一體化平台。 - [Podia](https://www.podia.com/) - 提供一個用於舉辦課程、網路研討會和數位下載的平台,並直接向觀眾銷售。 - [Pluralsight](https://www.pluralsight.com/teach) - 專注於科技與創意課程;根據課程的受歡迎程度向教師支付版稅。 - [MasterClass](https://www.masterclass.com/teach) - 高品質、名人主導的課程;講師通常是各自領域的知名專家或名人。 - [uTeach](https://ueach.io/) - [NewLine](https://www.newline.co/) --- ### 22.時事通訊 隨著流行的社群媒體管道變得更加集中和受控,電子郵件通訊和基於訂閱的 RSS 來源正在慢慢捲土重來。 這種模式的工作方式要么是提供對技術主題或新聞的有價值的見解,並建立一個龐大的(因此有價值的)訂閱者基礎,要么是向少數用戶收取更新費用。 提供此功能的流行平台包括: - [子堆疊](https://substack.com) - [ButtonDown](https://buttondown.email/) - [ConvertKit](https://convertkit.com/) - [穩定](https://steadyhq.com) - [幽靈](https://ghost.org/) --- ### 23. 僅限會員的網站 - [MemberSpace](https://www.memberspace.com/) - 讓您能夠為網站的某些部分付費,僅供會員使用 - [Patreon](https://www.patreon.com/) - 因設定具有獨家內容和福利的會員等級而廣受歡迎。 - [Substack](https://substack.com/) - 新聞通訊的理想選擇;提供付費訂閱獨家內容的能力。 - [Ghost](https://ghost.org/) - 內建會員和訂閱功能的專業發布平台。 - [Podia](https://www.podia.com/) - 允許銷售會員資格、線上課程和數位下載。 - WordPress 與 [MemberPress 外掛程式](https://memberpress.com/) - 供 WP 使用者建立會員網站的外掛程式。 - [Wild Apricot](https://www.wildapricot.com/) - 與您的網站整合的會員管理軟體。 - [Kajabi](https://kajabi.com/) - 提供用於建立線上課程、會員網站等的工具,重點是行銷。 - [Mighty Networks](https://www.mightynetworks.com/) - 建立一個包含會員資格、訂閱和課程的社群。 --- ### 24. VIP 貼文 還有許多公司會為您在其平台上分享的優質貼文付費。這既可以提高您的知名度(幫助您擴大人脈並獲得未來的工作),也可以帶來一些短期收入。 如果您正在努力獲得這些計劃的錄取,請先編寫自己的帖子並將其發佈到流行的基於開發的社交網絡(例如 DEV.to!)。這將增強您的寫作技巧,並幫助您向潛在公司展示您的知識。 例如,以下網站將為高品質的訪客貼文付費: - [Linode](https://www.linode.com/lp/write-for-linode/) - [日誌火箭](https://blog.logrocket.com/become-a-logrocket-guest-author/) - [Smashing 雜誌](https://www.smashingmagazine.com/contact/?Becoming%20an%20Author/Reviewer%20(自動回覆)) - [Auth0](https://auth0.com/apollo-program) - [CSS 技巧](https://css-tricks.com/guest-writing-for-css-tricks/) - [DelftStack](https://www.delftstack.com/write-for-us/) - [DigitalOcean](https://www.digitalocean.com/community/pages/write-for-digitalocean) - [Infatica](https://infatica.io/contribute/) - [蜜罐](https://blog.honeypot.io/write-for-honeypot/) - [進階編碼](https://premiumcoding.com/write-for-us-premiumcoding/) - [反思](https://reflectoring.io/contribute/become-an-author/) - [Strapi](https://strapi.io/write-for-the-community) - [Android 權威](https://www.authoritymedia.com/jobs) - [SitePoint](https://www.sitepoint.com/write-for-us/) - [TutorialsPoint](https://www.tutorialspoint.com/about/tutorials_writing.htm) - [真正的Python](https://realpython.com/jobs/tutorial-writer/) - [Dart Creations](https://www.dart-creations.com/about-us/write-for-us.html) Dmytro Spilka 編制了一份包含 300 多個[接受訪客貼文的網站](https://solvid.co.uk/180-websites-that-accept-guest-posts/) 的清單。另一個很棒的清單[由 Julia 在 Dev.to 上整理](https://dev.to/juliafmorgado/get-paid-to-write-technical-articles-16cl)。 --- ### 25. 諮詢 您可能沒有意識到,您從日常工作中累積的技能和經驗對許多公司來說可能非常有價值。尤其是尚無法聘請全職專家的新創公司和小型企業。對能夠提供最新趨勢、工具和最佳實踐見解的專業人士的需求非常高。 尖端: - 以適當的速度開始的最佳方式是透過網路和口碑。但如果做不到這一點,總有自由工作網站可以幫助您累積經驗。 - 記錄你所獲得的經驗,或在你工作的過程中建立一個投資組合,因為這將幫助你在未來獲得更好的工作。 - 在開始任何專案之前,請先明確您的空閒時間、條款、日薪和工作範圍。 - 切勿拒絕潛在的聯絡人。您會驚訝地發現,即使多年後,誰可能會重新與您聯繫並尋求諮詢支援。 --- ### 26. 指導 無論您的級別如何,您作為開發人員的經驗都可以真正幫助經驗不足的其他人。指導是一種非常有益的方式,可以幫助他人,同時也能帶來一些額外的收入。 - [MentorCruise](https://mentorcruise.com/) - 主要是長期的,按月付費,非常適合建立專業關係(每個學員每月賺取 50-500 美元) - [CodeMentor](https://www.codementor.io/) - 更適合短期,按小時收費,非常適合解決特定問題(每小時賺取 60-300 美元) --- ### 27.輔導 隨著 CompSci 現在成為國家課程的一部分(至少在英國和大部分歐洲),大量學生(11 歲至 18 歲以上)正在尋找導師來幫助他們獲得編碼技能並準備考試。收入範圍為每小時 15 美元到 150 美元以上,具體取決於級別、經驗和背景。 - [Super Prof](https://www.superprof.co.uk/) - 列出您的全球服務(30-300 美元/小時) - [The Profs](https://www.theprofs.co.uk/become-a-private-tutor/) - 經過驗證的導師(收入未知) - [我的導師](https://www.mytutor.co.uk/) - 僅限英國,(22-55 英鎊/小時) - [Tutor.com](https://www.tutor.com/) - 美國高中學費($75-$100/小時) --- ### 28.社群媒體 市場存在巨大空白,等待主流社群媒體平台上真正優秀的、注重發展的影響者來填補。 許多社群媒體平台允許您透過內容貨幣化,您通常會按觀看次數付費,金額根據內容類別、地區和聲譽而有所不同。但請注意,您通常必須擁有一定數量的追蹤者才有資格,而且您還將受到「演算法」的支配。 - YouTube - 每年至少需要 1,000 訂閱者 + 4,000 小時觀看時間 - X - 需要 Twitter Blue 訂閱,無最低追蹤人數 - TikTok - 需要至少 10k 追蹤者 + 100k 瀏覽量/月 - Instagram - 需要至少 10k 追蹤者 - Snap - 1,000 名追蹤者,1,000 次瀏覽/月,10 多個每月貼文 - Facebook - 10k 追蹤者或 600k 影片觀看分鐘 - Twitch - 350 位每月付費訂閱者 --- ### 29.品牌優惠 繼上面的社群媒體部分之後,一旦您成功突破了數百名訂閱者,您可能還可以開始考慮品牌交易,這有助於帶來額外收入。同樣,這些需要您的受眾達到一定程度的參與度,您可能還需要同意提供贊助的公司的條款。 --- ### 30.串流媒體 開發串流是一個快速成長的利基市場,不要指望立即[加入排行榜](https://twitch.pages.dev/),但它可能是一個很好的起點,特別是如果您已經有串流媒體經驗(例如影片遊戲)。 Nick Taylor 寫了一篇關於 [開發串流媒體入門的精彩文章](https://dev.to/nickytonline/getting-started-with-streaming-on-twitch-4im7)。 --- ### 31.SaaS 如果您能夠做到這一點,那麼它就是開源專案的最佳收入模式之一。您的程式碼仍然是 100% 免費和開源的,用戶仍然可以免費下載和自行託管它,但您還提供付費/託管計劃,您可以在其中託管應用程式並負責小型伺服器的所有伺服器管理經常性費用。 此模型符合開源精神,同時也使您的應用程式可供更廣泛的用戶使用。 [Stripe](https://stripe.com/docs/payments) 等服務讓您的應用程式接受付款和新增訂閱功能變得非常簡單。 --- ### 32.微型 SaaS 如果從頭開始建立一個生產就緒的應用程式聽起來像是一項艱鉅的任務(因為它確實如此!),那麼另一種方法就是 Micro-SaaS 應用程式。這些是較小的應用程式,它們執行一項非常具體的任務,例如: - 自動執行重複和/或乏味的任務。 - 執行目前手動計算的計算。 - 連接不同的系統。 - 取代 Excel 電子表格解決方法。 - 填補宿主生態系中缺失功能的空白 - 加強報告 --- ### 33. 寫外掛 與 SaaS 應用程式不同,一旦建置並發布了擴展,通常不需要太多的持續管理。您也可能會發現,如果您的專案為已經完善的網站加入功能,那麼您的專案會更容易快速獲得關注。 儘管網路擴展似乎是一個過時的或完全飽和的市場,但仍然有很多可以做的事情,而且這些對於新開發人員來說都是很棒的專案。 以下是一些可以幫助您入門的想法: - [WA Web Plus](https://chrome.google.com/webstore/detail/wa-web-plus-by-elbruz-tec/ekcgkejcjdcmonfpmnljobemcbpnkamh) 已下載 200 萬次(22k 評級),收費 12 美元/每個用戶的月。為什麼不為 Telegram、Threema、Wire、Messenger 等建立類似的東西呢? - Runkeeper擁有4500萬用戶,但UI在資料顯示方式方面有所欠缺。為什麼不建立一個擴充功能來加入更好的報告、過濾以及與相關外部資料的組合? (與 [Elevate for Strava](https://chrome.google.com/webstore/detail/elevate-for-strava/dhiaggccakkgdfcadnklkbljcgicpckn) 類似,但適用於 RunKeeper) - 選擇一個提供基本服務但 UI 過於不切實際的網站(也許是 Microsoft Azure?),然後建立一個擴充功能以簡化導覽、顯示關鍵指標或提供不那麼難看的使用者體驗 - 使用人工智慧增強任何現有網站。這比聽起來容易得多,您的擴充功能可以利用 OpenAI 的 API 等服務來總結網頁,或重新措辭選定的內容(用於複製/貼上到作業中!?) - 如果您知道某個網站的使用者數量很高,但 UI 很糟糕,那麼一個簡單的擴充想法可以是應用 CSS 覆蓋來重新設計它的樣式。例如亞馬遜、雅虎、Instagram 都是高流量網站,設計改善空間巨大(深色模式?!) - 即使是簡單的獨立擴展應用程式也可能具有很大的潛力。就像番茄計時器、貨幣轉換器、IP 位址小部件或只是一個網路應用程式快捷方式。 --- ### 34. 發布應用程式 建立簡單的應用程式或遊戲,並將其在平台應用程式商店上提供,使您能夠透過簡單的盈利模型來瞄準數百萬客戶。所有主流應用程式商店 - Google Play、Apple App Store、Windows Store、Steam 等都提供對付費應用程式、進階功能和應用程式內購買的支援。 請記住,在發布第一個應用程式之前通常需要支付安裝費,應用程式商店也會從您的收入中抽取一部分,並且小型創作者獲得單次或雙次下載的情況並不罕見。人物。 --- ### 35. 為小型企業開發網站 許多小型企業都專注於自己的業務,沒有時間或專業知識建立自己的網站。作為開發人員,這是我們能夠很快完成的事情,如果您也託管他們的網站,您將能夠收取定期付款。 一旦您開始進行網頁設計和開發,並為一些客戶提供服務,您就會發現透過口碑和展示您的作品集來找到未來的工作要容易得多。 為了在這方面取得成功,您可能還需要設計、溝通和銷售方面的技能。 --- ### 36. 兜售網域 隨著新 TLD 的湧入,域名經銷商市場正在迎來第二波受歡迎。域名翻轉涉及註冊未來可能有價值的域名,然後將其轉售給想要將該名稱用於企業或專案的買家。 雖然這可能有利可圖,但它確實涉及高風險,並且需要對市場有充分的了解。 尖端: - 研究簡短或令人難忘的域名,或者可能具有較高關鍵字潛力的域名(您可以使用諸如使用 Google 關鍵字規劃師等工具來幫助進行這項研究) - 停放您目前未使用的域名,以便您同時獲得一些廣告收入 - 查看最近過期的域名,特別是那些正在使用的域名,因為這些域名可能會收到流量 - 接收流量的網域更有價值。因此,請考慮在您持有網域時為其建立網站、應用程式或登入頁面 --- ### 37. 使用者測試 開發應用程式的公司通常需要獲得用戶的回饋。這就是用戶測試服務的用武之地。您花 10-30 分鐘嘗試給定的網站或應用程式,然後提供反饋或填寫調查,並獲得報酬! 儘管並非特定於開發人員,但憑藉您的技術背景,您會發現自己具有獨特的優勢,可以快速完成這些工作並提供良好的反饋,從而使您比普通用戶更快地賺錢。您還將獲得有關用戶測試流程如何運作的寶貴見解,這可能對您在自己的應用程式上進行委託測試時有用。 - [嘗試我的 UI](https://www.trymyui.com/) - 每個網站或應用程式測試平均費用為 10 美元 - [Userlytics](https://www.userlytics.com/user-experience-research/paid-ux-testing/) - 根據測試的複雜程度和長度,賺取 5 至 50 美元之間 - [使用者測試](https://www.usertesting.com/get-paid-to-test) - 透過 PayPal 付款,在測試會話期間需要螢幕共用和/或網路攝影機存取。每次測試賺取約 10 美元,較長時間或現場會議的某些測試最高可支付 50 美元 - [TestingTime](https://www.testingtime.com/en/become-a-paid-testuser/) - 面對面或視訊通話測試的選項。不太定期,但測試時間更長。當您考慮到會話之間的延遲時,報酬比其他選擇更低 - [IntelliZoom](https://www.intellizoom.com/) - 每 10 分鐘學習可賺取 2 至 10 美元。透過 PayPal 付款,延遲 3-5 天 --- ### 38.微任務 與開發人員的具體關係不大,但如果您來自技術背景,您可能會發現這些工作比那些沒有開發技能的工作更有利可圖。 - [Amazon Mechanical Turk](https://www.mturk.com/) - 外包虛擬微任務的眾包市場 - [Sequence Works](https://sequence.work/contributors/) - 影像標註、資料標記與分類 - [App Jobber](https://en.appjobber.com/) - 市場調查,去商店拍攝特定植入式廣告的照片 - [GigWalk](https://www.gigwalk.com/gigwalkers/) - 應用程式為基礎的行動微任務 - 請造訪 [GigWorker.com](https://gigworker.com/) 以了解更多微任務和零工工作 --- ### 39. 調查 儘管對具有某些技能(如軟體工程)的參與者的需求較高,但調查的報酬往往很低,因此可以賺更多一點。即便如此,除非您有大量時間,或使用比美元弱得多的貨幣,否則這可能不是一個好的選擇。 這些通常涉及測試新產品或服務,並提供回饋 - 或回答問題以協助市場研究活動。 有很多不同的基於調查的公司,所以我不會全部連結到它們。但 [Swagbucks](https://www.swagbucks.com/)、[20Cogs](https://20cogs.co.uk/)、[TestingTime](https://www.testingtime.com/en/become-a-paid-testuser) 是一些著名的。 --- ### 40.去中心化節點 這可能不適合所有人,因為收益通常以加密貨幣形式支付,而加密貨幣的波動性非常大。但是,您可以自願為許多 Web3 專案執行節點(通常在 Rasperry Pi、雲端伺服器或備用筆記型電腦上),這將為您支付正常執行時間、頻寬、磁碟空間、運算、IP/代理或其他一些費用。計算資源。 作為開發人員,管理基礎設施是我們所擅長的,因此,如果您有任何閒置資源,您也許可以將它們投入使用,並在睡覺時賺取一些額外的現金。 - [Storj](https://www.storj.io/node):執行Storj節點,用於去中心化雲端運算 - [Network3](https://network3.io/):用於訓練和驗證模型的 AIoT 第 2 層 - [Flux](https://runonflux.io/):去中心化基礎設施 - [Mysterium](https://mystnodes.com/): P2P VPN 節點 - [Koii](https://www.koii.network/node): 分散式雲 - [Helium](https://www.helium.com/mine):提供遠端物聯網設備無線連接 - [Filecoin](https://filecoin.io/):它是一個去中心化儲存網絡,將雲端儲存轉變為演算法市場。用戶可以出租閒置的儲存空間並賺取 Filecoin 代幣。 - [Sia Network](https://sia.tech/host):這是一個由區塊鏈技術所保障的去中心化儲存平台。 Sia 透過去中心化網路儲存和加密您的檔案。您可以透過出租未使用的硬碟空間來賺取 Siacoins。 - [Crust Network](https://wiki.crust.network/docs/en/nodeOverview):與 Filecoin、Sia 類似,Crust 支援 IPFS 等多種儲存層協議,並為應用層提供儲存介面。 - [Arweave](https://www.arweave.org/):一個基於區塊鏈的平台,以永久和去中心化的方式提供資料儲存。透過託管資料,用戶可以獲得 Arweave 代幣獎勵。 - [BitTorrent](https://docs.btfs.io/v2.0/docs/install-run-btfs20-node):該平台標記了世界上最大的文件共享協議,使用戶能夠通過在網路上。 - [HOLO](https://holo.host/):Holochain 應用程式 (hApps) 的點對點託管平台。在電腦上託管 hApp 的用戶將獲得 HOT 代幣獎勵。 --- ### 41.其他 Web3 方法 加密產業還有許多其他賺取被動收入的方式,從PoS 質押、持有生息數位資產、借貸、流動性挖礦、雲端挖礦、賺取股息的代幣、流動性挖礦、交易、本地/ PoW 思維、NFT 等等。很少。 我不會在這裡連結到任何具體細節,因為這是一個風險非常高的行業,因此您自己進行研究很重要。但作為技術專家,我們能夠理解任何給定協議或 Web3 資產背後的基本概念,並確定其可行性。 我的建議是閱讀白皮書,如果你不能立即理解它,那就遠離它!這是狂野的西部,所以除非一個專案的基本面是堅實的,否則你應該做好失去投資的任何資金的準備。 --- ### 42. 聯盟行銷 聯盟行銷對於那些剛開始的人來說是眾所周知的無利可圖,但我將其包含在此處是因為作為開發人員,有一定的空間來自動化許多過程。此外,您行銷的服務越細分,支付的佣金通常就越高。因此,如果您融入了技術社區,您可能處於銷售小批量高回報服務的有利位置。 同樣,如果您已經有了追蹤者(社交、部落格、YouTube 頻道...),那麼聯盟行銷可能更有意義,因為如果您獲得了大量點擊。 值得注意的是,您可能不應該在未透露它是附屬連結的情況下共享附屬連結。並儘量避免宣傳您自己沒有使用過或不會推薦給朋友的產品。 > 作為範例,[此處](https://notes.aliciasykes.com/p/3Ia4JzPw43) 是我使用過且擁有附屬帳戶的一些服務。我從未從其中任何一個身上賺過任何有意義的錢。 --- ### 43.經銷商 這涉及建立一個應用程式來包裝現有服務,同時加入 USP - 技術、客戶支援、UI 或其他功能。如果您有行銷或銷售背景,這可能適合您。如果您想加入功能或使流程自動化,那麼將需要大量的前期工作,但您將能夠更好地獲得收入。 您可以在大多數主要行業中找到提供經銷商計劃的服務提供者。 一些例子包括: - [Supermetrics](https://supermetrics.com/):行銷報告、分析、資料整合、20% 經常性佣金。 - [Keap](https://keap.com/):CRM、銷售與行銷自動化、20-30% 經常性佣金。 - [Klaviyo](https://www.klaviyo.com/):電子郵件與簡訊行銷,5–15% 一次性付款,10–20% 收入分成。 - [Drift](https://www.drift.com/):即時聊天軟體,20%收益分成。 - [ActiveCampaign](https://www.activecampaign.com/):電子郵件行銷、CRM、20–30% 佣金或折扣模式。 - [HubSpot](https://www.hubspot.com/):CRM、入站行銷、銷售、20% 營收分成。 - [Gorgias](https://www.gorgias.com/):電子商務幫助台,20% 收入分成。 - [Shopify](https://www.shopify.com/):電子商務平台,佣金20%,Shopify Plus 10%。 - [LiveChat](https://partners.livechat.com/):客戶服務平台,即時聊天,委託20%。 - [GetResponse](https://www.getresponse.com/):電子郵件行銷、線上活動管理、子帳號 35% 折扣、35% 經常性佣金。 --- ### 44. 人體實驗 這與技術根本無關。但作為程式設計師,我們通常可以在任何地方工作 - 那麼為什麼不在有報酬的地方編寫程式碼呢? 通常,您的收入在 2,000 美元到 10,000 美元之間,具體取決於試用期、持續時間、是否為住宅和具體情況。 像[流感營](https://flucamp.com/) 這樣的地方將支付您 4,000 英鎊,讓您在舒適的酒店式套房中入住兩週,同時他們會測試新的治療方法。那些患有氣喘等特定疾病的人可能可以透過參加更專業的試驗來賺取更多收入 --- ### 45.自由職業 自由職業可能會根據您的技能、經驗和您所在的領域而有所不同。對於新自由工作者來說,某些領域(例如網頁開發)的費率往往非常低,但您擁有的經驗和客戶滿意度越高,您就越能夠充電。 開發人員零工工作的三個主要平台是: - [Fiverr](https://www.Fiverr.com/):Fiverr 以其多元化的市場而聞名,非常適合剛開始從事自由職業的開發人員 - [Upwork](https://www.upwork.com/work):Upwork 迎合了廣泛的專業人士,但它對經驗豐富的開發人員特別有利。它提供了長期合約和高薪工作的潛力。該平台適合喜歡從事更實質專案的人。 - [People per Hour](https://www.peopleperhour.com/):這個平台對歐洲市場的開發者有好處。它強調當地的商業聯繫,並在短期和長期專案之間提供良好的平衡。 --- ### 46. 說話 面對面的和移除的開發者聚會和活動在全球各地不斷發生。這些活動需要演講者,許多人願意付費以獲得良好的演講。支付的金額根據規模、觀眾、主題、演講者(你!)和其他因素而有很大差異。通常,您必須先自願在當地的小型技術聚會上發表演講,然後逐步提高。 --- ### 47. 遠端技術支持 這不是最迷人的角色,但較小的公司通常無法聘請全職的專門技術支援人員,因此您可以找到很多兼職工作。如果您擁有雲端經驗或認證,這些的薪資等級會大幅提高。只需查看任何求職板(例如 [WeWorkRemotley](https://weworkremotely.com/)),您就會看到大量職位。 請注意,您通常需要在特定時間內有空,並期望您可以在給定的時間內回覆。在申請之前,請確保這是您可以解決的問題。 --- ### 49. 投資 是的,這不是副業——但聽我說完… 如果您每年的收入為 6 萬美元,生活成本為 4 萬美元,那麼 5 年後您可能會有 10 萬美元的儲蓄。如果您將其投資於年平均回報率為10 - 15% 的標準普爾500 指數- 您每月可能會從您的投資中獲得超過1,000 美元的額外收入,並且您的投資能力越強,收入就會不斷增加儲蓄(當然,投資可以減少也可以增加)。這已經比這裡列出的許多副業更好的回報了! --- ### 50. 就業 我們不要忘記,儘管目前情況看起來很艱難,但身為開發人員,即使只有一兩年的經驗,我們也處於非常幸運的地位,與平均收入者相比,我們的薪水很高。 如果你的工作不適合你——換公司通常是提高薪資的可靠方法,如果你不喜歡目前的工作,這可能是值得考慮的事情。 也許經歷了這一切之後,你所追求的不是副業,而是更好的「主業」? --- ## 真實的說話 儘管您可能會在 IndieHackers 和 Instagram 上看到一些內容,但副業並不是全部。這通常需要大量的工作,但回報卻非常有限。因此,在在這裡或其他地方進行任何事情之前,請退後一步,思考「我為什麼要這樣做?」。如果您這樣做是為了累積經驗、學習新技能並享受樂趣——那就太好了。如果你這樣做是為了快速致富 - 你可能會非常失望。 還有一點要注意的是,儘管看起來不公平,但與那些剛起步的人相比,那些已經擁有強大追隨者或幾個成功的開源專案的人將處於更好的位置來利用機會。 因此,從短期來看,作為一名開發人員,您的時間可能會更好地花在提升自己身上。如果您不確定從哪裡開始,這裡有 5 個關鍵提示: - **網絡** - 建立你的網絡,參加聚會、黑客馬拉松和開發活動,加入社區,結交朋友 - **開源** - 將您的工作放在那裡,公開學習,建立您感興趣的迷你專案,並且不要害怕失敗 - **經驗** - 獲得實務經驗,申請實習機會,作為自由開發人員提供服務 - **基礎知識** - 確保您對電腦科學基礎知識有深入的了解,其餘的就會容易得多 - **玩得開心!** - 你自然會在你真正熱愛的領域做得更好。如果你不喜歡你正在做的事情,請退一步,考慮不同的方法是否更適合你 --- ## 免責聲明 - 以上列表僅供您參考。 - 我沒有親自測試過這裡列出的所有服務。 - 如果您有 - 我很想聽聽您的回饋。同樣,如果有任何需要加入或刪除的內容,請在下面告訴我。 - 並非所有服務都在所有國家/地區提供(此清單主要針對英國/歐洲和美國🇬🇧🇪🇺🇺🇸) - 有些平台會抽取您的收入。這通常是一個很小的數額,但重要的是你要考慮到 - 如果您已經擁有大量追隨者或流行的開源專案,賺錢通常會容易得多 - 有些方法涉及風險。儘管我已盡力強調這一點,但請記住,您的投資可能會下降而不是上升 - 您的結果可能會有所不同 - 沒有保證 --- 原文出處:https://dev.to/lissy93/50-ways-to-bring-in-extra-cash-as-a-developer-19b6

工程師就業市場也太慘了🤯 分享 5 個生存技巧

你有沒有想過... **如果軟體開發人員的需求如此之大,為什麼現在找到開發人員的工作這麼難?** 為什麼面試過程這麼長?為什麼會有數百次拒絕? 為什麼提供的工資低? 今天,您將了解混亂背後的原因。 我們是如何來到這裡的。以及為什麼。 我還將向您展示為什麼事情並不像大多數開發人員想像的那麼糟糕。以及您需要採取的 5 個步驟來利用這種情況為您帶來優勢。 因此,當大多數開發人員都在倒退時,您可以快速發展您的職業生涯。 如果您是一位雄心勃勃的開發人員,想要更上一層樓並增加薪水,那麼這就是適合您的。 **因為有一件事是真的,我們所知道的軟體開發在 2023 年已經發生了永遠的變化。**‍ 「美好的舊時光」已經一去不復返了。 知道如何建立 React 應用程式將不再讓你獲得這份工作。我們不會很快回到那個狀態。 我們走吧。 這一切都要追溯到 2022 年,當時從谷歌到 Meta 和微軟等大型科技公司開始宣布裁員。不是各種裁員,是裁員開發者。 起初,大多數開發人員都很有信心。 他們說,_「軟體開發總是在成長並且需求旺盛,我們將會復甦」_。 現在,12 個多月過去了,許多程式設計師已經失去了樂觀情緒(免責聲明:我仍然對開發人員的未來非常樂觀,稍後會詳細介紹)。 許多開發者正在失去耐心等待就業市場的復甦。如果它永遠不會發生怎麼辦? 一些開發人員正在懷疑他們的職業選擇。正在考慮 B 計劃或已經轉向做其他事情。 其他人則被迫回到編寫程式碼之前的低薪工作。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws0oxry69oxhjkbyiydf.png) 最初的樂觀很快就變成了悲觀,許多開發者都在尋找 B 計畫。 **最好的情況是資料輸入或客戶服務工作。在最壞的情況下,它會回到咖啡店或倉庫。** 我認為這是一件非常悲傷的事情。僅僅因為你找不到擺脫困境的有效策略,就拋棄了你的夢想和多年的努力。 我相信,如果你進入軟體開發,那是有原因的。您可能工作勤奮、雄心勃勃且富有創造力。你至少應該有機會證明自己的價值。 在這篇文章中,我將向您展示該怎麼做。具體來說,無論市場表現如何,如何使用經過驗證的軟體工程原理來度過這場風暴,並將您的開發人員職業生涯提升到一個新的水平。 我是誰可以給你這方面的建議? 我叫 Dragos,在過去 3 年裡,我幫助超過 230 多名軟體開發人員提升了技能,快速晉升到高級級別,並獲得了他們應得的認可和報酬。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsbpn3yvyq1zcvn44mu5.jpeg) 我不是大師或技術影響者。我並不打算成為其中之一。 但是,在作為自學成才的開發人員編寫程式碼期間,我一直在戰壕里工作,現在幫助其他開發人員升級,這使我很有資格為您提供這方面的建議。 首先,讓我們先了解一下軟體開發行業目前正在發生什麼… **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ## 現在的情況 像任何好醫生一樣,為了治療症狀,我們必須了解背後的問題。 開發人員就業市場就像任何市場一樣,受簡單的供需機制控制。對開發者的需求越大,開發者的議價能力就越大。 對開發者的需求越少,我們的談判能力就越小。 如果你不斷地感覺自己與其他開發者比較,無法要求高薪,並且很難找到工作,這意味著你在市場上的力量很小。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ew79c0vwwkmkb6fkgg5j.jpeg) 供需關係決定開發者就業市場。 傳統上,開發者在市場上擁有大部分權力,公司會不遺餘力地獲得最好的工程人才。 這就是為什麼開發人員的薪水不斷增長以及每個人都想學習如何編碼的原因。 **但是,在過去 12 個月裡,權力已經從開發者轉移到了公司(除了頂層的開發者,稍後會詳細介紹)。** 為什麼? 很多原因。讓我們一一回顧一下… ## 1.“效率時代” 戰爭、通貨膨脹和經濟衰退迫使世界各地的公司最大限度地利用資金。包括軟體公司。 企業需要找到更有效的做事方式——如果您正在建立軟體,這意味著擺脫一些開發人員並自動化盡可能多的任務。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qtjm4nj6cilxu1nri3e.jpeg) 糟糕的經濟狀況迫使科技公司的執行長提高公司的效率。 正如馬克·祖克柏在他關於 Meta 的「效率年」的文章中提到的那樣,公司希望提高開發人員的生產力和工具並減少員工人數。 **一言以蔽之:科技公司希望盡可能精簡。** 這意味著軟體開發團隊不能再龐大了。他們需要一些高技能的開發人員以及大量的自動化設備。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xazs5u5i90cy86ryxhux.png) 這意味著縮小團隊規模(即:解僱表現不佳的員工)、取消優先順序較低的專案並降低招募率。用更少的軟體開發人員完成更多的工作。 對於開發人員就業市場來說,這可不是好訊息… **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ## 2.人才海嘯 開發人員就業市場變得非常非常擁擠,有數百名候選人瞄準同一職位。 這是因為編碼技能變得越來越普遍。 在過去的十年中,訓練營和電腦科學學位一直在將軟體開發人員吸引到一個已經擁擠的市場中。尤其是訓練營,經過六週的編碼後,他們實現了六位數薪資的夢想。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ak3kyp3ivrnaf2oomgcc.jpeg) 這引發了一場「人才海嘯」。開發人員的工作被當作中產階級的金票出售。成千上萬的人放棄了學習編碼的希望。 然而,正如許多初級開發人員所看到的那樣,這主要是一種行銷承諾。 事實上,開發人員職位的競爭非常激烈,你在 3 個月的 Bootcamp 中學到的技能已經不足以脫穎而出。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho072lld5gyddr0vq1ee.jpeg) 由於大量開發者在尋找黃金,就業市場很快就飽和了。 2020 年的情況就已經如此,但後來情況變得更糟… ## 3.遠距工作 Covid-19 大流行推動全世界轉向遠距工作。鑑於編碼基本上可以在任何地方完成,開發人員的工作是適應速度最快的工作之一。 對許多開發人員來說,在家工作聽起來像是個夢想。 無需通勤,擁有更多屬於自己的時間,並以相同的薪水在舒適的家中進行編碼,這是大多數人在任何給定時間都需要的交易。 但事實證明,遠距工作是一把雙面刃。 因為最終,公司透過增加招募人數而受益最多。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sctir1mrkya6tophrl30.png) 遠距工作意味著軟體公司現在可以僱用來自世界各地的開發人員。 本地職缺吸引了數十名遠距求職者,他們願意以少得多的錢做同樣的工作。正如《紐約時報》所說: **“遠距工作者普遍面臨更多競爭,並且更加依賴運氣。” - 紐約時報** 如果您想知道為什麼現在有數百甚至數千名求職者,那麼答案就是:遠端候選人。 大多數職缺現在都在收到來自世界各地的申請。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pq3697d8plsobcs7ipu3.png) 隨著遠距工作的興起,本地工作現在面臨國際競爭。 當我可以在中西部找到具有相同技能且至少少兩倍的錢的人時,為什麼還要雇用矽谷的開發人員呢? 在歐洲也一樣。 一家位於柏林的公司可以聘請一位位於德國中部小村莊的開發者。讓他們每個月來辦公室兩次。並少付給他們幾十萬歐元。 當然,一些公司採取了重返辦公室政策。 但從長遠來看,我們將看到越來越多的公司採用完全遠端的思維方式。從經濟學的角度來看,遠距工作很有意義。 **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ## 4. 人工智慧與自動化 人工智慧已經存在很多年了,但從未像現在這樣出現在我們的生活中。 2023 年 10 月,OpenAI 發布了 ChatGPT。 近年來人工智慧創新的巔峰和迄今為止最好的人工智慧模型。它可以與您談論您的一天,也可以為您撰寫論文。 更糟的是,它可以編碼。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p43t4w3jo3dy7itcwcf.png) 隨著人工智慧能夠編寫功能齊全的程式碼,許多開發人員都會問自己:“現在怎麼辦?” 如果有足夠好的提示,它可以比大多數人類開發人員更好、更快、更便宜地編寫程式碼。 當然,ChatGPT 無法自行思考。 這是一個巨大的統計機器。它會犯很多錯誤並且陷入循環。但是,這足以讓事情順利進行。而且情況只會變得更好。 GitHub 很快就做出了調整,將其整合到 GitHub Copilot 中,後者已直接在 VS Code 中可用。 從長遠來看,沒有人知道人工智慧將對就業市場產生什麼影響。 它會像某些人聲稱的那樣導致我們所知的編碼的終結嗎?或者它只是人類開發人員完成工作的工具? 我們所知道的是,在短期內,人工智慧透過自動化任務或完全取代一些工作,給就業市場帶來了更大的壓力。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knbz25n83y18knp9sl27.png) 高盛估計,大約 29% 的電腦相關任務可以透過人工智慧自動化。 結果? **找到一份體面的開發人員工作變得越來越難。** 回到報價和供應曲線,開發者數量增加,但就業機會數量保持不變。 隨著市場上數百名開發人員尋找職位,軟體開發產業正遭受「Tinder 效應」的困擾。類似網路約會的現象。 就像約會應用程式中的熱門個人資料一樣,軟體公司現在面臨著數百種不同的選擇。數百名候選人和簡歷。 整理噪音並不容易。 你必須更快地放棄候選人。即使你拒絕了一個合適的開發者,總會有其他人在門口等著。 好吧,現在對於開發者來說情況並不好。 忍住眼淚,因為我會告訴你為什麼事情並不像大多數開發人員想像的那麼糟糕... # 好訊息 這場「完美風暴」讓大多數開發者感到驚訝。許多人覺得薪水過低,但同時又沒有勇氣去市場。 這創造了一個“技能差距”,你可以利用它來跑得更快。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rip84pxxnjmom5twd5e.png) 「在陽光明媚的天氣裡你無法超越 15 輛汽車…但在下雨天你可以。」- Ayrton Senna **風雨飄搖的就業市場實際上可能是您將開發人員職業提升到全新水平的完美時刻。** 首先,不要像其他人一樣屈服於恐懼。恐懼會讓你癱瘓,擾亂你的思考。不要驚慌失措,而是要超越噪音。 裁員開始一年後,公司意識到消除成本實際上會阻礙他們的成長。 在資本主義中,一家不成長的公司就是一家正在消亡的公司。 公司需要重新開始創造價值。緊急。 更多價值,因為我們正處於經濟衰退之中,消費者只想要最優惠的價格。而且速度更快,因為競爭是全球性的。 **在軟體開發中,價值意味著功能。這意味著高品質的程式碼。** 那麼人工智慧呢? AI實際上刺激了市場。軟體公司別無選擇,只能將人工智慧模型整合到現有的軟體中。否則就有倒閉的風險。 你需要什麼? 開發者、開發者、開發者… 好吧,這就是為什麼這可能是您作為一個雄心勃勃的開發人員超越競爭對手的最佳時機: ## 1. 質量重於數量 是的,市場上的開發者總數有所增加。但他們的技術技能品質卻沒有。 經濟衰退可能在一夜之間發生,但技術掌握需要時間。 即使在這樣的市場條件下,大多數公司仍然抱怨很難找到符合其工作要求的合格開發人員。 企業的要求是否過高? 或許。 但是,這正是您可以利用的差距來保持競爭優勢。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vhlaajmxwuvmcj8j3hl.png) 市場上有如此多的噪音,這與您發送的申請數量無關。追求數量只會產生更多垃圾郵件。 重要的是您的簡歷和申請的品質。 這並不意味著您應該成為完美主義者。數字仍然很重要。在開始找工作之前,只需在[您的簡歷和LinkedIn 個人資料上做更多工作](https://dev.to/dragosnedelcu/how-to-find-a-developer-job-in-2023-with-little-or-no-experience-27h7)。 並專注於技術掌握而不是數字! ## 2. 人工智慧作為補充 正如我所提到的,人工智慧模型無法思考,至少目前還不能。事實證明,它們更多的是對開發人員工作的補充,而不是替代品。 人工智慧帶來的是更多透過人工智慧整合進行的軟體開發。對正在開發的軟體的需求不斷增加。 這似乎有悖常理,但事實證明,人工智慧和自動化對軟體產業的影響與 70 年代修建高速公路對汽車交通的影響類似。 更多的高速公路意味著更多的汽車空間,因此更多的人使用汽車。導致汽車流量增加,而不是減少! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6apqk9jlfffpi8ud11n5.png) 更多的高速公路,更多的汽車。更多人工智慧,更多程式碼。 人工智慧編碼工具將使產生的程式碼量倍增。 最終,這意味著更多的程式碼需要由人類檢查、驗證和維護。整體而言,需要更多的開發人員。 **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ## 3. 現金仍為王 $$$ 有趣的是,開發人員的薪資仍在增加。但它們的成長並不相同。 事實上,大多數開發者都無法跟上通貨膨脹的腳步。許多人根本沒有加薪,儘管在市場上待了很久卻找不到職位。 其他人則獲得小幅加薪,例如 3%。由於去年通膨率約為 10%,這並不是加薪。又是減薪! 但是,一小群幸運的程式設計師的薪酬正在打破記錄。 事實上,我們在 theSeniorDev.com 上看到了這一點。許多高級開發人員的薪資創下歷史新高,即使在歐盟市場也超過 6 位數。 幾年前,如此高的報價是非常不尋常的。 但是,如果你仔細想想,更高的薪水是有道理的。 一家公司面臨著交付一款可以為他們帶來數百萬美元收入的軟體的壓力,他們不會介意為能夠交付該軟體的開發人員額外花費數千美元。 這樣想吧,熟練勞力不是商品。 公司不會購買一雙一模一樣的鞋子並尋求優惠。有些鞋子會讓他們走得更快。為他們支付更多費用是有道理的。 **無論是矽谷或歐洲科技中心,趨勢都很明顯:熟練的開發人員需求量很大,公司願意為他們支付大量資金。** 正如您所看到的,事情並不像大多數開發人員想像的那麼糟糕。 至少不適合所有開發人員... 因為如果你和你的資深朋友交談過,你可能會發現有一群開發者做得併不差…。 ## 僅限資深開發人員的就業市場 儘管發生了一切,但高階開發人員的需求仍然非常大。您可以在招聘板上看到它,其中指定:僅限高級。 或查看誰正在被雇用並立即簽署工作合約。 Hired.com 的一份報告顯示,目前簽署工作合約的軟體開發人員中有超過 73% 擁有 7 到 5 年(或更長)的經驗。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0axdi46s6kfnph2ek2x.png) 高級開發人員受最近科技業裁員的影響最小。 感覺無論經濟如何發展,成為高級開發人員都會有回報。或多少程式碼 A.I.可以生成。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8iwtihn2647c81nv2gvn.png) 如果就業市場是動物農場。所有開發人員都是平等的,但高級開發人員比其他人更平等。 如果市場如此糟糕,為什麼高級開發人員仍然受歡迎? 從公司的角度來看,高階開發人員從第一天起就可以創造價值。 公司知道,他們比以往任何時候都更需要快速、優質的交付,才能在當前經濟狀況下保持競爭力。通貨膨脹,記住。 所有這些因素意味著整個軟體開發團隊將崩潰為少數開發人員利用兩個要素: 1. **高級開發人員** 2. **人工智慧工具和自動化** 儘管發生了這一切,但也不全然是壞訊息。堅持幾秒鐘,我會告訴你原因。 **事實是,您可以利用當前的情況來發揮自己的優勢。** **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** # 真相 為了在這個充滿活力的就業市場中取得成功,您將需要比與您競爭的其他數千名開發人員更可靠的策略和更有效率的流程。 您需要立即採取行動,因為… 提供高薪、酷炫技術堆疊、良好福利和遠距工作的開發人員工作每天都變得越來越有競爭力。 這並不意味著他們不可能到達。簡而言之,獲得開發人員工作的舊方法不再有效。 如果您需要其他 5 名開發人員的幫助才能將程式碼投入生產,那麼您的日子就很寶貴了。還有另一個開發人員可以提供端到端的服務,他們將取代您的位置。 所以你會怎麼做? 正如我的一位招募人員朋友所說: **「你最好的選擇是盡快成為高級開發人員」。** 盡快達到高級水平是目前在軟體開發市場中生存的唯一途徑。 成為高級開發人員將使您從眾多編碼人員中脫穎而出,提供端到端的價值,並被視為對公司的投資,而不僅僅是另一個昂貴的開發人員。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/882onhgzj1btfpvppdvu.png) 聰明的開發人員正在尋找提供更多服務並脫穎而出的方法。他們正在尋找快速實現這一目標的方法。 他們首先需要解決的是如何提升自己的技術能力。 好訊息是,您不需要在周末花費無數時間或編碼來實現這一目標。您不需要啟動數百個線上課程和副專案。 而且您不需要等待數年才能做到這一點。因為有更好的方法可以做到這一點。 你只需要專注在那些不會改變的事情上。 **那麼,如何獲得對自己技能的完全信心、端到端交付並釋放高級信心?** 您遵循基於經過驗證的軟體開發原則的逐步過程。就像高級開發人員每天使用的那樣。我們稱之為技術掌握藍圖。 在接下來的幾行中,我將更深入地討論具體步驟,但這不是本文的目標。 如果您有興趣了解更多訊息,可以單擊下面的連結並觀看我為您準備的免費培訓。 [這是免費培訓的連結。](https://bit.ly/3udWD0m) **免責聲明**:您必須加入您最好的電子郵件才能存取它。別擔心我不會寄垃圾郵件給你。我只會與您分享有關如何快速晉升高級開發人員並讓您的開發人員職業生涯提升到一個全新水平的相關資訊。您可以隨時取消訂閱。 **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ### 1. 首先,你要採取資深開發人員的心態🧠 成為高級開發人員的第一步是改變您對軟體開發職業和整個生活的看法。 這意味著要以更高的標準要求自己。對您目前的開發者職業生涯承擔全部責任。並掌控你的職涯道路。 你也必須擺脫限制性信念或任何內在的關於自己的負面情緒。你必須養成新的習慣並培養紀律技能。 這意味著設定明確的重點目標,為自己定義一個在情感上令人信服的願景,並在執行這些目標時對自己負責。 **🚀[行動專案]**:準確定義您想要在未來 12 個月內實現的目標。為什麼想實現它?到達那裡需要採取哪些步驟?你是否缺乏任何知識和技能?你需要做一些與現在不同的事情才能到達那裡嗎?寫下來。 當你走向高級開發的旅程時,這將是讓你的火焰保持活力的燃料。大多數開發人員從未到達那裡,因為他們退出得太早。他們忘記了過程就是目標。 ### 2. 其次,你掌握了「基礎知識」📚 大多數開發人員,特別是 JavaScript 開發人員已經習慣相信軟體開發中的資歷就像一個購物袋。 新增的庫和框架越多,其等級就越高。 事實上,情況完全相反。高級開發人員平均編寫的程式碼比初級開發人員少。他們使用不太閃亮的庫和框架來解決問題。 沉迷於框架和庫會讓你成為炒作列車的受害者。當一個圖書館失寵時,另一個圖書館就會出現,需要您投入時間和注意力。這是一場你無法獲勝的遊戲。 如何才能逃脫炒作機器? 透過專注於**「不會改變的事情」**。我們所說的基礎知識。 模式和原則是大多數框架和函式庫的核心。對基礎知識的深入理解將確保您無論情況如何變化都能掌握最新資訊。 它還可以保護您免受人工智慧和自動化的影響。在程式碼在幾秒鐘內產生的世界中,清晰的思維變得越來越有價值。雙贏。 基礎知識取決於您的技術堆疊。 如果您是 JavaScript 開發人員,您主要需要掌握 2 組基礎知識。電腦科學基礎知識和 JavaScript 基礎知識。 這不是本文的範圍,但我整理了一個路線圖,供您準確了解這些內容,請參見下文。 🚨 PS有關“計算機科學基礎知識”的詳細列表,請查看[計算機科學基礎知識掌握路線圖](https://mm.tt/app/map/2980765378?t=LsjjpEBYky)。🚨 🚨附言有關「JavaScript 基礎知識」的詳細列表,請查看我們的 2023 年 [JavaScript 基礎知識掌握路線圖](https://mm.tt/app/map/2962635113?t=ILeYm71vU3)。🚨 順便說一句,我們免費社群的開發人員可以存取獨家內容和針對基礎知識的客製化練習。請在下面註冊! **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ### 3. 第三,您學習如何端到端交付🎯 任何科技公司執行長現在最不想做的就是僱用更多的開發人員。但他們確實想解決問題。很多問題。 但是,你無法真正解決問題,我的意思是,當你只建構孤立的功能時,會出現有價值的問題。或者當您需要另外 5 名開發人員的幫助才能將您的東西投入生產時。 **高級開發人員之所以需求如此巨大,是因為他們可以提供端到端的服務。** 他們可以與產品經理或其他利害關係人獨立工作,並從第一天起就交付價值。掌握了這一點,你的價值就會增加10倍。 端到端交付並不意味著您必須了解一切。 這意味著您需要了解後端以及基礎設施方面的情況。目前無需深入研究各個元件。但從大局來看是的。 **[進階開發提示]**:學習如何端到端交付的最快方法不是 100 小時的雲端憑證課程(這些課程的重點是向您推銷品牌,而不是教您東西) )。 相反,請嘗試規劃您公司的 CI/CD 流程。 找出他們擁有的任何架構圖,然後自己參與其中。如果他們沒有,請自己建造一些。這已經可以給你一個良好的開始,並在你的下一次技術面試中談論很多事情。 🚨附言要確切了解您需要掌握哪些端對端交付心理模型,請查看我們的[JavaScript 開發人員的「端對端交付」路線圖](https://mm.tt/app/map/2974013323?t=pqAIdWZ7W2 ).🚨 **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ### 4.第四,成為「AI驅動」🚀 當我接到想要加入我們專案的開發人員的電話時,最令我驚訝的事情之一是他們每天很少使用人工智慧。 有些人多次使用 ChatGPT 來執行日常任務(樣板檔案、測試)。真正使用過 GitHub Copilot 的人就更少了。 他們告訴我他們不相信它的未來。或者他們的公司並沒有真正使用它。 如果你在飛機上,氧氣會耗盡,我敢打賭,即使機組人員沒有給你,你也會尋找氧氣面罩。 ChatGPT 和 GitHub Copilot 不只是更好的自動完成工具。自動完成無法重構、尋找程式碼中的錯誤或擴充功能。 人工智慧模型可以優化、重構,甚至可以比許多開發人員提出更好的程式碼。事實上,到 2023 年,在人工智慧工具的幫助下,初級開發人員可以完成與沒有人工智慧工具的高級開發人員一樣多的工作。 重點很明確:如果您是願意轉為高級的 JavaScript 開發人員,您需要成為「人工智慧驅動」。 如果您已經是大四學生並希望在未來幾年保持相關性,情況也是如此。潮流正在改變。透過升級這些技能來確保您處於正確的位置。 您是否必須學習 Python、Numpy、深度學習以及 AI 堆疊中的十幾種工具?並不真地。這是一項完全不同的工作。 **這意味著你應該將人工智慧工具整合到你所做的一切中。** 從建置功能到程式碼審查,再到測試和效能優化。如果您希望我寫一篇有關如何做到這一點的文章,請在評論中告訴我。 **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** ### 5.第五,有效推銷自己🏆 如果你找不到一家公司來支付你的技能費用,那麼無論你是多麼優秀的開發人員,也沒有用。由於開發人員就業市場已經過度飽和,這一點更加正確。 為了脫穎而出並獲得頂級軟體開發人員的職位,您必須以盡可能最好的方式將自己推向市場。 作為一名員工,這一點更為重要,因為您應該始終擔心的一件事是您的就業能力。 **如果你明天被解僱,你找到另一個職位有多容易?** 你越有就業能力就越好。 您的就業能力取決於兩件事。您的產品(在這種情況下,您的開發技能和支持這些技能的過去經驗)。 其次,你如何推銷自己和你的人脈。有多少人認識你?如果你現在被解僱,明天有人可以提供你工作嗎? 要改進您的產品,請提高您的開發技能。我們在前面的幾點中討論過這一點。但如何改進自我推銷的方式呢? **好吧,如果你想要高級開發人員的薪水,你首先必須看起來像高級開發人員。** 這意味著建立一份相關的履歷,以最好的方式量化以展示您為市場帶來的東西。 如果您想讓我寫一篇關於如何打造一流開發人員履歷表的文章,請在評論中告訴我! ## 總結與後續步驟 好吧,現在你知道了。 下次當你問自己為什麼現在找到開發人員的工作如此困難時,請考慮這些原因。您還了解如何透過盡快成為高級開發人員來解決這個問題。 能夠落實這 5 個支柱並以最快的速度適應這個新市場範式的開發人員將獲得工作保障、對自己的技能充滿信心並獲得最高的薪水。 無法適應的開發者將慢慢被淘汰,並面臨被完全擠出市場的風險。 按照我在本文中概述的步驟操作,您不僅可以輕鬆找到開發人員工作,而且可以「快速」晉升到高級開發人員級別,並將您的開發人員職業生涯提升到一個全新的水平。 他們為我和世界各地 230 多名其他開發人員工作,他們也將為您工作! 我們下一篇再見 德拉戈斯 **🚨附:您是否希望快速晉升為擁有優質資源、回饋和責任的高階開發人員? [點擊此處加入我們的免費社區 - 高級開發學院。](https://bit.ly/46hbx3h)🚨** --- 原文出處:https://dev.to/dragosnedelcu/why-is-it-so-hard-to-find-a-developer-job-in-2023-and-how-to-fix-it-2d13

2024 年的 React 生態系統

原文出處:https://dev.to/avinashvagh/react-ecosystem-in-2024-418k 2024 年,React 將慶祝其成立 11 週年,值得期待 React 生態系統中令人興奮的發展。在本部落格中,我們將基於 2023 年發生的情況以及來年的預期,探討生態系統的各個面向。 ## 1. 路由 路由一直是Web開發的關鍵部分,在2023年,我們看到了各種各樣的路由解決方案。讓我們看看2024年會發生什麼: - **React Router:** React Router 仍然是 React 應用程式中處理路由的基本選擇。憑藉其廣泛的文檔和活躍的社區,它仍然是應用程式中聲明式路由的可靠選擇。 - **React Query:** Tanstack 的 React Query 在 2023 年流行的基礎上,旨在增強資料擷取和狀態管理。它簡化了 React 應用程式中管理、快取和同步資料的過程。 - **Next.js:** Next.js 是一個建立在 React 之上的框架,預計將保持其作為具有靈活路由選項的伺服器渲染 React 應用程式首選的地位。它的官方文件是 Next.js 應用程式中路由的寶貴資源。 2024 年,React 充滿活力的生態系統將繼續蓬勃發展,為開發人員提供豐富的工具和函式庫。請繼續關注 React 世界的更多更新和進步。 ## 2. 客戶端狀態管理 客戶端狀態管理是現代 Web 開發的一個重要方面,可以在前端應用程式中實現高效的資料處理。 Redux Toolkit 和 Zustand 是兩種流行的用戶端狀態管理解決方案。以下是兩者的簡要概述: ### 1. **Redux 工具包** - **網址:** [Redux 工具包](https://redux-toolkit.js.org/) Redux Toolkit 是一個建立在 Redux 之上的綜合狀態管理函式庫,Redux 是 React 應用程式中成熟的狀態管理函式庫。它提供了一組工具和最佳實踐,以可預測且高效的方式簡化狀態管理流程。 Redux Toolkit 的結構化方法(包括 actions、reducer 和 store)非常適合複雜的大型專案。它提倡採用集中式和聲明式的狀態管理方法。 ### 2. **條件** - **示範:** [狀態示範](https://state-demo.pmnd.rs/) Zustand 是一個輕量級且靈活的狀態管理庫,專為小型專案或喜歡更簡單解決方案的開發人員而設計。它簡化了狀態管理,無需複雜的設定和概念。 Zustand 以其簡單性和易用性而聞名,這使其成為小型應用程式和重視更輕量級方法的人的絕佳選擇。 在 Redux Toolkit 和 Zustand 之間進行選擇時,請考慮專案的複雜性以及您對 Redux 的熟悉程度。 Redux Toolkit 是大型、結構化應用程式的絕佳選擇,而 Zustand 則非常適合需要快速、簡單的狀態管理解決方案的小型專案。 ## 3.伺服器狀態管理 伺服器狀態管理是 Web 開發的一個重要方面,特別是對於跨客戶端和伺服器的應用程式。以下是兩個可以幫助您有效管理伺服器狀態的關鍵庫: ### 1. **TanStack 查詢** - **文件:** [TanStack 查詢](https://tanstack.com/query/latest) TanStack Query 是一個強大且靈活的狀態管理庫,用於處理應用程式中的伺服器狀態。它允許您輕鬆地從伺服器獲取、快取和更新資料。該程式庫提供自動快取、高效資料擷取以及自訂 API 端點的功能等功能。對於需要即時資料更新和高效資料同步的應用程式來說,它是管理伺服器狀態的絕佳選擇。 ### 2. **Redux 工具包 - RTK 查詢** - **文件:** [Redux 工具包 - RTK 查詢](https://redux-toolkit.js.org/rtk-query/overview) RTK Query 是 Redux Toolkit 生態系統的一部分,提供管理伺服器狀態的全面解決方案。它以可預測且高效的方式簡化了發出 API 請求、快取資料和更新狀態的過程。 RTK Query 與 Redux 無縫集成,對於使用 Redux 進行狀態管理的應用程式來說是一個絕佳的選擇。它提倡最佳實踐並提供結構化方法來處理伺服器狀態。 選擇伺服器狀態管理庫時,請考慮您的專案需求、資料擷取需求的複雜性以及您對 Redux 的熟悉程度(如果您選擇 RTK 查詢)。這兩個庫都提供了用於管理應用程式中的伺服器狀態的強大解決方案。 ## 4. 表單處理 表單處理是建立 Web 應用程式的關鍵部分,尤其是在 React 中。用於表單處理的兩個流行的程式庫是 Formik 和 React Hook Form。概述如下: ### 1. **甲酸** - **網址:** [Formik](https://formik.org/) Formik 是在 React 中建立表單最常用的函式庫。它提供了一組實用程式和元件,可以輕鬆管理表單狀態、驗證和提交。雖然它是一個流行的選擇,但截至最新消息,Formik 並未得到積極維護,這可能會影響其與未來 React 更新和不斷發展的最佳實踐的兼容性。使用 Formik 的唯一缺點是它不被維護。 Formik 文件/網站甚至不鼓勵在新專案中使用 Formik。 ### 2. **反應鉤子形式** - **網址:** [React Hook 表單](https://www.react-hook-form.com/) React Hook Form 是一個現代表單函式庫,它利用 React hooks 來有效地處理表單狀態和驗證。它得到積極維護,並提供輕量級且直觀的 API。 React Hook Form 以其效能和靈活性而聞名,使其成為在 React 應用程式中處理表單的絕佳選擇。 在 Formik 和 React Hook Form 之間進行選擇時,請考慮維護和專案的特定要求等因素。根據最新消息,React Hook Form 因其積極的開發和現代的表單處理方法而成為推薦選擇。 ## 5. 測試 測試是軟體開發過程的關鍵部分,有各種工具和程式庫可協助開發人員編寫有效的測試。以下是一些用於測試的資源和工具: ### 1. **ViTest** - **網址:** [ViTest](https://vitest.dev/) ViTest 是一個由 vite 支援的單元測試框架。它提供了一種為 React、Vue、Svelte 等應用程式編寫單元測試、元件測試和端到端測試的簡單方法。如果您使用 React,ViTest 可以透過全面的測試來幫助您確保程式碼的可靠性和品質。 ### 2. **React 測試函式庫** - **文件:** [React 測試庫](https://testing-library.com/docs/react-testing-library/intro/) React 測試庫是 React 應用程式的熱門測試庫。它專注於編寫模擬使用者互動的測試,幫助您確保元件從使用者的角度按照預期運行。該程式庫鼓勵測試 React 元件的最佳實踐。 ### 3. **劇作家** - **網址:** [劇作家](https://playwright.dev/) Playwright 是一個端對端測試框架,支援多種瀏覽器,包括 Chromium、Firefox 和 WebKit。它為瀏覽器自動化提供了統一的 API,並允許您編寫測試來驗證 Web 應用程式在不同瀏覽器上的功能。 Playwright 是確保跨瀏覽器相容性的強大工具。 這些資源和工具可以幫助您涵蓋測試的各個方面,從單元測試到端到端測試,具體取決於您的專案需求和您正在使用的技術。請務必進一步探索它們,以選擇最適合您要求的一種。 ## 6. 樣式 當談到 Web 開發中的樣式時,有幾種流行的工具和庫可供選擇。以下是三個值得注意的選項: ### 1. **Tailwind CSS** - **網址:** [Tailwind CSS](https://tailwindcss.com/) Tailwind CSS 是一個實用程式優先的 CSS 框架,它提供了一組預先建立的原子 CSS 類別來設計您的 Web 應用程式。它旨在透過在 HTML 中編寫實用程式類別來幫助您快速創建響應式且高度可自訂的設計。 Tailwind CSS 以其靈活性而聞名,對於想要實用程式驅動的樣式設計方法的開發人員來說是一個絕佳的選擇。 ### 2. **樣式元件** - **網址:** [樣式組件](https://styled-components.com/) Styled Components 是一個 CSS-in-JS 函式庫,用於設計 React 元件的樣式。它允許您透過使用標記模板文字定義樣式元件來直接在 JavaScript 檔案中編寫 CSS。這種方法使您能夠將樣式封裝在元件中,從而更輕鬆地管理和維護 CSS。樣式化組件在 React 生態系統中特別受歡迎。 ### 3. **情感** - **文檔:** [情緒](https://emotion.sh/docs/introduction) Emotion 是另一個 CSS-in-JS 函式庫,重點是效能和靈活性。它提供了多種方法來定義樣式並將其應用到 React 元件,包括字串和物件樣式。 Emotion 以其可預測性和適合使用 JavaScript 編寫不同 CSS 樣式而聞名。它提供了一種與框架無關的方法,使其適用於各種 JavaScript 框架。 這些工具中的每一個都有自己的優勢,並且適合不同的用例。 Tailwind CSS 擅長使用實用程式類別進行快速 UI 開發。 Styled Components 和 Emotion 是 React 應用程式中元件級樣式的理想選擇。您的選擇將取決於您的專案要求和個人喜好。 ## 7.UI元件庫 用於在 2023 年建立使用者介面的 UI 元件庫,並將在 2024 年繼續使用。 ### 1. **材質-UI** - **網址:** [Material-UI](https://mui.com/) Material-UI 是一個受歡迎且維護良好的 React UI 框架。它基於 Google 的 Material Design 指南,並提供廣泛的元件來創建現代且具有視覺吸引力的使用者介面。 ### 2. **曼汀** - **網址:** [Mantine](https://mantine.dev/) Mantine 是一個現代 React 元件庫,專注於提供高品質的元件和鉤子。它提供了各種 UI 元素和工具來簡化您的開發流程。 ### 3. **螞蟻設計** - **網址:** [Ant Design](https://ant.design/) Ant Design 是一個用於建立企業級 React 應用程式的綜合設計系統和元件庫。它以其豐富的組件和強調自然清晰的設計理念而聞名。 ### 4. **脈輪使用者介面** - **網址:** [Chakra UI](https://chakra-ui.com/) Chakra UI 是在 React 中建立可存取且高度可自訂的使用者介面的熱門選擇。它提供了一組可組合組件和一個樣式道具系統,用於靈活的樣式設定。 ### 5. **無頭 UI(Tailwind CSS 框架)** - **網址:** [無頭 UI](https://headlessui.com/) Headless UI 是一組完全可存取、無樣式的 UI 元件,旨在與 Tailwind CSS 無縫協作。它允許您建立可存取的介面,同時保留對樣式的完全控制。 ### 6. **DaisyUI(Tailwind CSS 框架)** - **網址:** [DaisyUI](https://daisyui.com/) DaisyUI 是 Tailwind CSS 的擴展,它帶來了額外的元件和實用程式來增強您的開發體驗。如果您已經在使用 Tailwind CSS,它會特別有用。 ### 7.**Shadcn UI(Tailwind CSS 框架)** - **網址:** [Shadcn UI](https://ui.shadcn.com/) Shadcn UI 是另一個基於 Tailwind CSS 的 UI 元件庫,它提供了一系列元件和實用程序,用於快速有效地建立 Web 應用程式。 這些程式庫提供了各種元件和工具,可協助您在 React 應用程式中建立響應靈敏且具有視覺吸引力的使用者介面。庫的選擇取決於您的項目的要求和您的個人喜好。 ## 8. 動畫 如果您對 React 動畫庫感興趣,兩個流行的選擇是: 1. **React Spring** - 您可以在 React Spring 的官方網站 [react-spring.dev](https://www.react-spring.dev/) 上找到有關 React Spring 的更多資訊和文件。 React Spring 是一個功能豐富的動畫庫,它利用基於實體的動畫在 React 中創建流暢的互動式動畫。 2. **Framer Motion** - 另一個出色的選擇是 Framer Motion,您可以在 [framer.com/motion](https://www.framer.com/motion/) 進一步探索它。 Framer Motion 因是專為 React 設計的功能豐富的動畫庫而聞名。它提供了靈活性,非常適合在 React 應用程式中創建流暢的動畫。 這兩個庫都有其優點,它們之間的選擇可能取決於您的特定項目要求和個人喜好。 React Spring 提供基於實體的動畫和豐富的功能集,而 Framer Motion 以其易用性和靈活性而聞名。最好對兩者進行探索,看看哪一個更符合您的動畫需求。 請隨意參考各自的網站以獲取詳細的文件和範例,以便做出明智的選擇。 ## 9. 資料視覺化 當涉及 React 中的資料視覺化時,有幾個函式庫可以幫助您建立互動式且資訊豐富的圖表和圖形。以下是三個流行的選項: 1. **Victory** - 您可以在 [formidable.com/open-source/victory/docs](https://formidable.com/open-source/victory/docs) 中瀏覽 Victory 的文檔 Victory 是一個強大的 React 資料視覺化函式庫,提供廣泛的圖表類型和自訂選項。它旨在輕鬆創建具有視覺吸引力的互動式資料視覺化。 2. **React Chartjs 2** - 造訪 [react-chartjs-2.js.org](https://react-chartjs-2.js.org/) 以了解更多資訊。 React Chartjs 2 是 Chart.js(一個流行的 JavaScript 圖表庫)的 React 包裝器。它提供了一種將 Chart.js 整合到 React 應用程式中的簡單方法,可讓您使用 Chart.js 的底層功能建立各種圖表和圖形。 3. **Recharts** - 有關Recharts的詳細信息,您可以參考[recharts.org/en-US/](https://recharts.org/en-US/)。 Recharts 是一個使用 React 建立的可組合圖表庫。它提供了一個簡單而靈活的 API 來創建各種類型的圖表,非常適合將資料視覺化添加到您的 React 專案中。 每個庫都有自己的一組功能和優點,因此選擇將取決於您的特定項目要求和個人喜好。您可以存取他們各自的文件以了解更多資訊並開始使用 React 中的資料視覺化。 ## 10. 表 如果您正在尋找有關 React 中表格的信息,可以在 [tanstack.com/table/v8](https://tanstack.com/table/v8) 上瀏覽版本 8 的 TanStack Table 文件。 TanStack Table 是一個無頭 UI 庫,可讓您在 TS/JS、React、Vue、Solid 和 Svelte 等各種框架中建立強大的表格和資料網格,同時保留對標記和樣式的控制。該文件將為您提供有關如何使用 TanStack Table 和配置表的詳細信息,包括選項和 API 屬性。 無論您使用 TypeScript 還是 JavaScript 以及使用受支援的框架之一,TanStack Table v8 都提供了一種靈活的解決方案,用於在 Web 應用程式中建立表格和資料網格。該文件將引導您完成整個過程,並幫助您充分利用該庫來滿足您的特定需求。 ## 11. 國際化(i18n) 當涉及 React 應用程式中的國際化 (i18n) 時,有多個程式庫和工具可協助您管理翻譯和在地化。 React 中 i18n 的兩個突出選項是: 1. **i18next** - 您可以在 [react.i18next.com](https://react.i18next.com/) 找到使用 i18next 的文件和資源。 i18next 是一個流行的 JavaScript 國際化框架,包括 React。它提供了處理翻譯、格式化等的全面解決方案。 2. **React-Intl (Format.js)** - React-Intl 的文檔是 Format.js 專案的一部分,可以在 [formatjs.io/docs/react-intl](https: //formatjs.io/ docs/react-intl)。 React-Intl 是一個函式庫,提供用於在 React 應用程式中格式化和處理國際化文字的工具。 這兩個函式庫都有活躍的社群、豐富的文檔,並且在 React 生態系統中廣泛使用。您可以探索這些資源,以確定哪一個最適合您的 React 應用程式國際化需求。 ## 12. 開發工具 DevTools 對於偵錯和改進 Web 應用程式的開發工作流程至關重要。以下是一些流行的 React 開發工具和相關函式庫: 1. **React 開發者工具** - 該工具可作為 Chrome 擴充功能使用。它允許您檢查 React 元件層次結構、查看元件的狀態和 props,甚至更改元件的狀態以進行測試。您可以從 [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 安裝它。 2. **Redux DevTools** - Redux DevTools 是另一個 Chrome 擴展,可以增強 Redux 開發工作流程。它提供了對 Redux 儲存的深入了解,讓您可以檢查操作和狀態變更、倒回和重播操作等。您可以從 [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) 安裝它。 3. **Testing Playground** - Test Playground 是一個 Chrome 擴展,可以簡化 React 元件的測試。它提供了一個用於試驗組件及其道具的視覺環境。您可以在 [Chrome 線上應用程式商店](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano) 上找到它。 4. **React Hook Form DevTools** - 對於使用 React Hook Form 的用戶,可以使用 DevTools 來協助偵錯表單行為。您可以在 [React Hook Form 網站](https://www.react-hook-form.com/dev-tools/) 上存取它們。 5. **TanStack Query DevTools** - TanStack Query 是 React 的資料擷取庫,它提供用於偵錯和檢查查詢和突變的 DevTools。您可以參考[官方文件](https://tanstack.com/query/v4/docs/react/devtools)以了解更多資訊。 這些開發工具可協助開發人員簡化開發和偵錯流程,從而更輕鬆地建置和維護 Web 應用程式。 ## 13. 文檔 文件對於任何軟體專案都至關重要。以下是用於建立文件的兩種流行工具: 1. **Docusaurus** - Docusaurus 是一種廣泛採用的用於建立文件網站的工具。它是一個開源框架,為創建和維護文件提供了乾淨且用戶友好的介面。 Docusaurus 具有高度可自訂性,許多專案和組織都使用它來建立文件網站。您可以在 Docusaurus 的[官方網站](https://docusaurus.io/)上了解更多並開始使用 Docusaurus。 2. **Nextra** - Nextra 是建立文件網站的另一種選擇。雖然 Nextra 可能不像 Docusaurus 那樣出名,但它提供了一種現代且簡約的方法來建立文件。它的設計是輕量級且用戶友好的,對於那些喜歡簡單乾淨的文檔風格的人來說是一個不錯的選擇。您可以在 Nextra 的[官方網站](https://nextra.site/) 上探索有關 Nextra 的更多資訊。 Docusaurus 和 Nextra 都有各自的優勢,它們之間的選擇取決於您的特定需求和偏好。您可以訪問他們各自的網站以了解更多資訊、訪問文件並確定哪一個最適合您的專案。 ## 14. 元件開發環境 元件開發環境 (Dev Env) 對於有效建置和測試 UI 元件至關重要。用於為 UI 元件創建開發環境的廣泛使用的工具之一是 [Storybook](https://storybook.js.org/)。 Storybook 是業界標準的元件瀏覽器,可讓開發人員獨立開發 UI 元件。當處理設計系統或元件庫時,它特別有價值。以下是 Storybook 如何協助創建 UI 元件的開發環境: 1. **目錄 UI 元件**:Storybook 提供了用於編目和顯示 UI 元件的專用環境。開發人員可以單獨查看每個組件的外觀和行為。 2. **將元件變體儲存為故事**:在 Storybook 中,開發人員可以為每個元件建立「故事」。這些故事代表組件的不同變體或用例。這是記錄和展示組件行為的絕佳方式。 3. **開發人員體驗工具**:Storybook 提供了一系列開發人員體驗工具,包括熱模組重新加載,以簡化組件開發流程。 透過使用 Storybook,您可以有效率地開發、測試和記錄 UI 元件。它在設計系統時特別有用,因為它允許您專注於單個組件及其互動。您可以在 Storybook 的[官方網站](https://storybook.js.org/) 上了解更多並開始使用。 它是一種多功能工具,可以根據專案的特定需求進行定制,使其成為組件開發環境的寶貴資產。 ## 15. 類型檢查 TypeScript 是 Microsoft 開發的一種程式語言,透過新增靜態類型來擴充 JavaScript。它提供全面的類型檢查和強大的類型系統,以捕獲開發過程中的錯誤並提高程式碼品質。以下是 TypeScript 中類型檢查的一些關鍵方面: 1. **靜態型別系統**:TypeScript 引進了靜態型別系統,這表示在編譯時檢查類型。這有助於在執行程式碼之前識別與類型相關的錯誤。 2. **型別註解**:開發者可以使用型別註解來指定變數、函數參數和傳回值的型別。這提供了清晰度並確保變數的使用一致。 3. **推斷**:TypeScript 可以根據指派給變數的值推斷類型。這減少了對顯式類型註解的需求並提高了程式碼簡潔性。 4. **類型聲明**:TypeScript支援自訂類型的聲明,例如介面和枚舉,以定義資料結構的形狀並增強程式碼的可維護性。 5. **類型相容性**:TypeScript 有一個檢查類型相容性的系統,這確保你不能將不相容的類型指派給變數。這有助於防止常見的運行時錯誤。 6. **對 JavaScript 文件進行類型檢查**:TypeScript 還可以檢查 JavaScript 文件,讓您可以逐步將 TypeScript 引入現有的 JavaScript 專案中。 透過將 TypeScript 合併到您的開發工作流程中,您可以從這些類型檢查功能中受益,從而儘早發現錯誤、增強程式碼可維護性並提高程式碼的整體品質。您可以在[官方 TypeScript 網站](https://www.typescriptlang.org/) 上了解有關 TypeScript 及其類型檢查功能的更多資訊。 ## 16. 行動應用程式 如果您想要開發行動應用程序,特別是 Android 和 iOS 的行動應用程序,React Native 是一個值得考慮的有價值的框架。 React Native 是一個開源框架,可讓您使用 JavaScript 和 React 建立行動應用程式。這就是 React Native 成為行動應用程式開發的熱門選擇的原因: 1. **跨平台開發**:React Native 使您能夠使用單一程式碼庫開發適用於 Android 和 iOS 的應用程式。這種方法可以顯著減少開發時間和工作量。 2. **可重複使用元件**:您可以建立跨平台工作的可重複使用 UI 元件,幫助您在應用程式中保持一致的外觀和感覺。 3. **熱重載**:React Native 支援熱重載,這意味著您可以立即看到程式碼變更的結果,而無需重新編譯整個應用程式。這加快了開發速度。 4. **大型社區**:React Native 擁有龐大且活躍的社區,這意味著您可以找到豐富的資源、庫以及常見問題的解決方案。 5. **本機效能**:React Native 應用程式具有接近本機的效能,因為它們使用本機元件進行渲染。這確保了流暢的用戶體驗。 6. **成本效益**:透過在 Android 和 iOS 之間共用程式碼庫,您可以降低開發成本。 要開始使用 React Native,您可以造訪官方網站 [React Native](https://reactnative.dev/) 以取得全面的文件、教學和資源。無論您是初學者還是經驗豐富的開發人員,React Native 都是行動應用程式開發的強大選擇。 ## 17. 為 React 開發人員提供的很棒的函式庫 很高興看到您對 React 開發人員的優秀庫感興趣。以下是一些非常有用的程式庫,可用於 React 開發中的各種功能: ### 1. **用於拖放功能的 DND 套件** - 網址:[免打擾套件](https://dndkit.com/) DND Kit 是一個強大的庫,用於為 React 應用程式添加拖放功能。它提供了一種簡單且可自訂的方法來實現拖放功能,以便在使用者介面中重新排序、重新排列或組織元素。 ### 2. **React Dropzone 用於檔案上傳** - 網址:[React Dropzone](https://react-dropzone.js.org/) React Dropzone 是一個流行的程式庫,用於在 React 應用程式中處理檔案上傳。它提供了一個用戶友好且高度可自訂的 dropzone 元件,簡化了上傳文件的過程,使其成為任何需要文件上傳的項目的有價值的補充。 ### 3. **Firebase 用於身份驗證** - 網址:[Firebase](https://firebase.google.com/) Firebase 由 Google 開發,是一個用於建立 Web 和行動應用程式的綜合平台。它提供廣泛的服務,包括用戶身份驗證。透過 Firebase 驗證,您可以輕鬆地將安全的使用者註冊和登入功能新增到您的 React 應用程式中。 ### 4. **Supabase 用於身份驗證** - 網址:[Supabase](https://supabase.com/) Supabase 是 Firebase 的開源替代品,提供一套用於建立應用程式的服務,包括身份驗證。它提供了可以無縫整合到您的 React 專案中的用戶身份驗證功能。 這些程式庫涵蓋了 React 開發的基本面,包括拖放功能、檔案上傳和使用者身份驗證。根據您的專案要求,您可以利用這些程式庫來增強您的 React 應用程式。 **免責聲明:**“本文是在人工智慧的幫助下創建的” --- 喜歡這個部落格嗎? **[在 X 上關注我](https://twitter.com/avinashvagh)** 我非常活躍,在 Dev.to 上關注我,不錯過更新。 **聯絡人** — [[email protected]](mailto:[email protected]) 與我一起工作。 --- 訂閱**[遠端檔案通訊](https://remoteprofile.beehiiv.com/)**,隨時了解遠距工作趨勢和工作機會。 {% 嵌入 https://x.com/remoteprofile/status/1698215946463359023?s=20 %} 加入 1K+ 遠端求職者,他們正在世界任何地方在美國尋找遠端工作,所有工作機會面向全球受眾(在任何地方工作),**[立即訂閱](https://remoteprofile.beehiiv.com/訂閱)* * 每日在您的收件匣中獲取機會!

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

原文出處: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

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

大家好,我想鼓勵一些想要開始當工程師,但很難找到第一份工作的人。還有那些因為懷疑自己的能力而難以開始/完成專案的人(冒牌者症候群)。我將告訴你我自己的旅程,以及我一路上學到的東西來,希望你能有動力繼續你的旅程。 原文出處: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 上分享您的進度),只需在這裡展示您的技能即可您能做什麼,遲早你會開始從事高薪專案。停止追逐工作,而只是吸引他們。 正如你從我的旅程中可以看出的,這不是一天的成就,直到一年多我才得到一分錢的內容創作報酬,直到一年多我才得到一個客戶的工作。我不是一天就能學會程式設計的,我是從一部手機開始的,後來又是用學校貸款買的一台低階筆記型電腦(我甚至還沒付)。所有這些成功的人士和公司都是從某個地方開始的,您今天就可以開始改變您的生活。開始親自動手,兩三年後你甚至不會相信自己來自哪裡。 這是我的故事,我希望你學到了一兩件事✌️

西元 2023 年了,還值得花時間學 Dreamweaver 嗎?簡單分享幾個觀點

首先我們來看 google trend ![](https://i.imgur.com/GwTUmvo.png) https://trends.google.com.tw/trends/explore?date=all&geo=TW&q=dreamweaver&hl=zh-TW 如你所見 這是一個過時的技術、正在被人們拋棄 接著請到 google 搜尋 `dreamweaver 職缺` 會發現其實 還是有些職缺要求要會 dreamweaver 這些職缺的待遇、工作內容 都在各大人力資源網站 你可以自行判斷:這些是不是你求職的目標職缺、理想職缺 --- 再來是我個人經驗,我這十年職場所見所聞,沒有遇過公司在用 Dreamweaver 我在社群認識各類工程師,也沒聽過有人在用這工具 不得不說 這實在是一個很老派的工具 唯一有次在業界遇到 好像有人在用的情境 是一間接案公司 以快速、便宜為主打 他們當時需要有人能用低價、快速的方式 把大量網頁切出來 後來找到的配合的人 好像就是用 Dreamweaver 在切版 --- 如果對 Dreamweaver 有興趣、好奇 我覺得多學一個工具 也不是壞事 對於之後再學其它工具 也是會有幫助 但是 應該沒必要花時間「專精」或者「鑽研」這樣一個老舊的工具 如果課程要求 或是有證照需求 那評估一下需要花費的時間 如果證照沒那麼難考 那花點時間 拿個證照 也滿好的 還能培養一些自信 如果履歷表還沒什麼東西能放 那放個證照也不錯 但如果考那證照很花錢、很花時間 那請審慎思考一下這投資值不值得 我是不推薦 我感覺只是培養快速、低成本切版網頁的能力 這能力頂多在接案公司會有幫助 而且還不會是很精緻的接案公司 不如花時間深入研究 JavaScript 基本功,對前端職涯更有幫助,而不只是專精於切版而已 --- 以上 簡單個人觀點分享

給寫完 JavaScript 系列九的同學們:求職前的準備&簡易指南

有幾位同學已經寫完系列一~九的全部作業了 整體能力已經可以準備開始面試前端工程師的職缺了 這邊寫一篇簡單說明 # 需要補充的技能 前端技能中最困難的部份已經有相當基礎了 剩下有些東西沒那麼難,但要學一下,上班會用到 這些東西我未來可能會寫教材,但我最近很忙,近期無法寫新教材 ## git 程式碼版本管理工具,找書或者上網找文章學一下,至少要會 add commit push pull 這些指令 ## npm 作業都是用線上環境,實際開發都是在本機為主,需要知道 javascript 套件管理工具 npm 怎麼用 ## create-vue https://github.com/vuejs/create-vue 要能在本機架起來 vue 開發環境,這款至少要知道一下 ## vue 3 教材安排是學 vue 2,但現在很多公司都已經轉用 vue 3 語法了 背景知識大同小異,但語法差異不少,要知道一下怎麼轉成 vue 3 寫法 --- 老樣子,學的時候有點一知半解沒關係,大概會用就好,畢竟是面試 junior developer 的職缺,公司通常會有工程師同事,技術長&他們會協助你實務上的細節 # 投履歷的公司篩選 在找工作的時候,投那種「無經驗可」的職缺 很多公司會寫「一年以上工作經驗」,這種就是不歡迎半路出家剛學完者 因為很多人從補習班畢業之後,連 hello world 都寫不出來,公司想要避免遇到這種人 就先投「無經驗可」的職缺就好 公司類型基本上有分「接案公司」、「做自己公司產品」兩種 第一份工作沒差,去接案公司練功、去做自家產品慢慢打磨產品,都可以,待個半年,先進入業界再說,都可以學到很多 長期來講,我之後再寫文章說明差異 # 履歷表的寫法 基本上你照自己習慣寫,簡潔有力即可,這行業基本上是實力主義,唬爛幫助不大 但有幾個東西務必要寫進去 ``` 學習的過程中,為了瞭解網頁的基礎,而不只是當個框架的使用者,我有用純 html/javascript 練習多個元件 [附上第三課全部作業] 並且有找一些看起來很紅的業界套件,練習導入使用 [附上第四課全部作業] 然後我有用 vue 寫了多個應用程式練習 [附上第八課全部作業] 還有試著拿 vue 生態系的元件庫做範例,模仿做了幾個元件 [附上第九課全部作業] ``` 我認為履歷表附上這些東西,會讓99%的面試官印象深刻,覺得你幾乎是「即戰力」,對你更有信心 # 結語 以上,如果你寫完系列一~九全部內容了,那我認為你離上班已經很接近了 如果正在準備轉職,準備一下,試著投一些履歷試試看,試試水溫 不用急著辭職,因為今年全球景氣充滿不確定性,但就試試看能收到多少面試邀請,等於秤秤自己的斤兩,比較有個底 順利上班之後記得來寫文章分享心得 然後最好養成習慣寫技術部落格,直接在這邊寫即可 求職過程有疑問,一樣多多來這邊發問即可 求職卡關、面試不順、薪資待遇有疑慮、業界實務有困惑,都上來發問即可 我會視情況公開 or 私下回答 以上,有打算轉職的同學,祝大家早日上班囉~

JavaScript 系列九:結語

恭喜你完成了一系列酷炫的元件 Quasar 是業界最頂尖、好用的 UI 元件包之一 你在這系列作業中,也順便學習了此元件包的用法,這在實務上非常有幫助 你甚至親手製作了其中一些基本的元件,讓你大致了解元件包背後的製作原理 像這些最基礎的 UI 元件,因為通用性很高、很常被重複用到、在多個地方到處使用,所以很適合製作成元件 --- 但是,在實務上,通常開發一個頁面,就製作一個 vue 檔案即可。除了基礎 UI 元件之外,並不會額外製作多少元件 因為頁面上很多看起來像元件的東西,其實就算拆出來,別的頁面也用不到、或根本無法使用 這種情況,其實也不用刻意要拆成元件,因為意義不大,說不定還會變更亂。切記:不需要為了元件化而元件化 當你發現頁面真的有點太複雜、你明顯感受到拆成多個元件會比較好維護的時候,再拆成元件就可以了 --- 翻閱 Vue 官方文件,你會發現 `Components In-Depth` 這個段落,你幾乎通通讀完了 有些我認為非必要、沒那麼常用的段落,就沒有指定讓你閱讀。你如果好奇的話,就自行把官網剩下的頁面翻一翻吧 必要的元件觀念,你都已經知道了,這些已足夠讓你參與團隊合作、與團隊一起開發應用程式了 但是在真正大型的專案,還需要引入一些進階觀念、生態系工具 這些會在後續的課程提到! --- 消化、研究完本課程之後,我認為你已經具備入行前端工程師的基礎能力了! 急著上班、找工作的同學,請參考我寫的文章: **給寫完 JavaScript 系列九的同學們:求職前的準備&簡易指南** https://codelove.tw/@howtomakeaturn/post/k31dYx 再次恭喜你順利完成本系列轉職前端課程,祝你求職順利! 有問題可以多多上來發問!

前 Netflix 資深工程師:爲什麼我會辭掉年薪 $450,000 美元的工作

Michael Lin 是前網飛資深工程師,年薪高達 45 萬美元,約合新台幣 1300 萬元 但是他在工作四年後離職了,並且在網路上分享了心得 - 原文出處:https://dev.to/_michaellin/why-i-quit-a-450000-engineering-job-at-netflix-1f0g --- ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucmypesj5zywleeojx92.png) > 金手銬 —— 你留在一份你寧願辭職、只是為了錢而待著的工作。 我以為我會永遠留在 Netflix。市場上薪酬最高。講求自由與責任。無限帶薪假期。你還能要求什麼呢? 所以當我在 2021 年 5 月離開 Netflix 時,每個人都認為我瘋了。我父母首先反對。他們來自文化大革命時期的中國,當時幾乎沒有足夠的食物吃,他們認為我正在拋棄他們來到美國所經歷辛苦的一切。 “低下頭去幹活就對了!”他們說。 “不要對你所擁有的不知感恩!”他們說。 我的朋友們也不相信。 “有一堆免費食物欸!” “FAANG 巨頭欸!” “帶著慢慢領股票呀!” 我聽到的唯一讓我略微停頓的反對論點,來自我在 Netflix 的導師。他說我不應該在沒有找到另一份工作的情況下辭職,因為“我會放棄我在 Netflix 的高薪所擁有的影響力。” ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb8qyf1sxngv1xeateei.png) > 一邊休息一邊慢慢領股票 這讓我停頓了整整 3 天,但我還是放棄了。8 個月後的現在,我 100% 確定這是正確的決定。 在這篇文章中,我想談談幫助我了解金手銬真正成本的 3 個因素,以及為什麼每年 50 萬美元的薪水也無法讓我繼續從事我不再喜歡的工作。 ## 一個失敗的角色轉換 隨著辦公室於 2020 年 3 月關閉,工作中所有最好的部分 ——社交、同事、津貼,都消失了。 而你剩下的就是工作本身。因此,如果您不喜歡這份工作,而這就是您的全部,那麼 COVID 會將這一事實放大 10 倍以上。 而且我不喜歡這份工作。但原本不是這樣的。 我在 Netflix 工作了將近 4 年,擔任用戶增長方面的資深軟體工程師。一開始,我覺得自己得到了豐厚的報酬來學習。工作了 1.5 年左右,我都喜歡它。 Netflix 的文化與我之前在亞馬遜經歷過的更為隱秘的文化截然不同。每個產品決策的備忘錄都可供所有員工閱讀。這就像拿錢去讀 MBA。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2amgontvgl7nkhlkecsf.png) > Netflix 對其所有產品決策的透明度是在那裡工作的最佳福利之一。這與蘋果和亞馬遜更為隱秘的文化形成鮮明對比。 但是在我的後半段時間裡,工程工作開始感覺像是複制粘貼。 需要啟動一個新的微服務? 複製粘貼一個舊的,更改業務邏輯,你就完成了。 新的 A/B 測試? 複製粘貼舊的,更改一些測試變體,就完成了。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g1j19x9dvj8lvbga9wk.png) > Netflix 非常喜歡 A/B 測試。這是他們從主頁(來自 Netflix 技術部落格)測試的 CTA 的 4 個變體 我覺得毫無疑問工程可以為 Netflix 所用,但我覺得更好的問題是,某個特定專案是否充分利用了工程資源。所以我想過渡到產品管理,在那裡我可以領導這些工作。我花了 2 年的時間在公司轉了一圈,不停地建立聯繫,與每個組織交談,併申請我能找到的每一個職位。 當我向每個組織申請時,我提交了關於我作為 PM 的優先事項的建議:客戶服務、開發人員生產力、工作室、合作夥伴關係和通知。我建議在我自己的團隊中建立一個角色來幫助管理不斷增長的基礎設施。我還建議其他 PM 可以將更多工作委託給我,這樣他們就可以騰出時間來發展他們的組織。所有這些提議最終都沒有成功。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rchwbz4agbjhitt38tiq.png) > 我花了 2 年的時間兜圈子試圖在 Netflix 找到一份 PM 的工作,但最終落得一場空。 回過頭來看,我意識到自己的錯誤。我想如果我再努力一點,我最終會得到這份工作。但現在我意識到,有時由於結構性問題,事情超出了你的控制。 Netflix 沒有適當的流程來支持這樣的橫向角色變更;我從未見過工程師在這裡成功過渡到產品管理。 他們為我提供了更多與產品管理合作的機會,以培養產品技能,對此我深表感謝。但合作與擁有角色本身不同。歸根結底,你不能只讀一本關於游泳的書就指望學會游泳。你必須跳入水中。 ## 動力減弱,表現減弱 在我失敗的 PM 求職接近尾聲時,我覺得高薪是一個越來越糟糕的優點。原本是在賺錢和學習。現在我只是在賺錢。 我團隊的目標和我的興趣也開始出現分歧。我的團隊正在朝著涉及平台遷移的更注重工程的方向發展。但我的興趣更多地轉向創業和產品管理。我分配的工程工作永遠不會適用於我以後所做的任何其他工作。 我開始覺得我又犯了以前的職業錯誤 - 在一份不適合我的工作上待的時間比我應該做的要長。這個錯誤的代價比人們想像的要高。如果你在一份你想離開的工作上多呆了兩年,並且在你的一生中做了 5 份以上的工作,那麼你只是在你不想做的工作上浪費了你生命中的 10 年。我覺得我在浪費時間。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz85i3mpvnky6zos5qye.png) > 沒有什麼比錯過工作訊息更讓人焦慮的了。 我的動力減弱了,我的表現也隨之減弱。我越來越少參加會議,盡量減少做任何與開發產品管理技能不直接相關的工作,並在溝通方面拖拖拉拉。最後唯一的動機就是不想被解僱。感覺我已經達到了我的目標是這麼低的標準,甚至努力跨越它,這讓我有點難過。 不幸的是,我的經理開始注意到了。在持續 2 個多小時的激烈績效評估中,他告訴我,我需要 1) 更多地參與這次遷移,以及 2) 更加溝通。用他的話說,“如果我想留在團隊中”,我必須在這些方面有所改進。 ## 重新評估 COVID-19 期間的生活優先事項 疫情大流行是一記警鐘。 看著數以百萬計的人死於 COVID 讓我意識到明天是無法保證的。在您的任何夢想實現之前,您可能會死於 COVID。你推遲夢想的時間越長,它永遠不會實現的風險就越大。所以如果有什麼你想要的,你必須現在就去做。 不想再說晚點才是時候了。現在就是時候。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oawd1k9a5lnzses4is3.png) > 被推遲的夢想就是被拒絕的夢想。我一直以來最喜歡的名言。 我意識到金手銬的真正代價是什麼。代價是你的青春,你的時間,你的生命。人們不會準確判斷這些成本,因為薪水是一個硬數字,而你的青春價值更無形。但僅僅因為某些東西難以衡量,並不意味著它的價值就低於金錢等可數的東西。很難衡量品牌、心理健康或愛情的價值,但我們知道這很重要。 看到所有這些人死於 COVID,我害怕有一天我的墓碑上會寫著: > “這裡躺著 Michael。他一生都在做他不想做的工作。然後他感染了 COVID 接著就死掉了。祝安息。” 我在一份我不喜歡的工作上待的時間越長,這成為我墓碑的可能性就越大。我知道我現在必須採取行動 - 我不能一直把棘手的職業問題推到一邊。我不得不辭職。 ## 最後的日子 我把糟糕的績效評估和被解僱的威脅當成是一種解脫。但我想在不被解僱的情況下先拿到遣散費。 因此,幾週後,我在一對一面談中,向我的經理提案,我們討論了“先發制人的遣散費方案”。 我這樣說:“我的表現在下降,因為我的動力在下降。我沒看到我的積極性有可能提高,因為團隊的目標與我的職業目標背道而馳。如果我們現在討論 Netflix 的先發制人遣散費而不是拖延下去會怎麼樣?這樣 Netflix 就可以省錢,你可以更快地找到更適合團隊的人選,我也可以去做我想做的事。對每個人來說都是雙贏的局面。” ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpr7oownjm47eomrnyne.png) > 掙脫束縛。 在他與 HR 討論後,我與他和 HR 進行了最後一次會面,他們同意先發制人地解僱我,然後我拿到了最後的遣散費。金手銬 —— 再見了。 ## Netflix 之後的生活 我以為離開公司我的生活就結束了,但事實恰恰相反。我擔心我會沒有社交生活,但實際上我在退出後遇到了更多的人 —— 其他的創業者、企業家和建設者。 我看到我的心理健康得到改善,因為如果我錯過了另一封電子郵件或 slack 訊息,我因擔心而產生的焦慮消失了。 我現在感到內心深處的平靜,一種堅定的信念,即一切都會好起來的,即使現在不能保證未來的成功。當我在周日晚上打字時,如果工作對我有利,我對周末工作沒有任何問題。沒有比知道我掌握了自己工作的所有價值更好的動力了。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvzbuxd6dx1klb8a6mdz.png) 通過只做讓我充滿活力的事情,它可能會諷刺地釋放比我以前賺的更多的潛在收入。 我從 2021 年 5 月辭職已經 8 個月了。我在 2021 年剩下的時間裡休息了一段時間。我在紐約住了幾個月,在猶他州和亞利桑那州進行了一次公路旅行,總體上很享受生活。 我決定全身心地為自己工作。雖然我才剛剛起步,沒有任何真正可靠的收入來源,但我會相信這個過程,如果我致力於讓我充滿活力的事情,好事就會發生。 --- 我現在真的相信,安全行事是最冒險的選擇。當你謹慎行事時,你同樣會暴露在所有的危險之中,而且沒有向上的機會。正如海倫凱勒曾經說過的: ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srvmeb69o4owf6mhgu66.png) > 謹慎行事是最冒險的選擇。

在台灣轉職程式設計師:給半路出家學習者的幾點建議

身邊很多朋友工作幾年之後,從非本科轉職寫程式 主要方法大概三種:報名實體課程、報名線上課程、買線上課程自學 ## 報名實體課程 資策會、程式補習班,都屬於此類 需要本人實際到教室,由老師上課 這種課程通常需要耗時數個月,費用會在新台幣十萬上下 好處是有同學一起、有同儕壓力、有問題可以當面問老師、厲害的老師可以現場掌握全班學習狀況 壞處是每個人學習速度不同,有人跟不上、有人覺得教太慢 這種學習法,需要碰運氣,如果遇到優秀的老師,學習氛圍、效果,都會非常好 但是,就我觀察課表,以「全端工程」為主打的課程,進度通常非常倉促,能真正消化的學生非常少數 多數人只是糊裡糊塗把功課、專案做完,畢業後其實還是很沒信心、一頭霧水 (只專注在特定領域開發的課程,狀況比較好一點) 主因是基礎知識還不夠熟,就開始大量學習工具用法 我建議這種狀況,不要對自己起太多懷疑,保持耐心,養成做紀錄的習慣 覺得一知半解的地方就把問題記錄一下,每天都整理出一些問題 整理出一張問題清單,找時間請教別人、或是上網慢慢研究 多數回答,聽完之後應該還是聽不懂,沒關係,先放著 有搞懂的問題就劃掉,一段時間之後,會更清楚程式設計整體觀念,也會更有信心 重點是要知道自己具體是哪些細節不了解、一知半解,才有補充&複習&研究的方向 ## 報名線上課程 坊間許多業者提供這類服務,會有大量教學影片,個人自己找時間看完即可 並且會幫大家分組、需要一起做專案、會有助教指導 好處是每個人可以自行抓節奏,並且費用便宜許多,通常不到實體課程四分之一 如果是組合式的課程商品,就更好了,可以先購買一些基礎課程,滿意才買更多 壞處是需要紀律,督促自己去學習,需要積極、主動一點 通常我是推薦朋友,去買這種課程,因為財務、時間風險,比實體課程小很多 真的找不到相關業者提供課程、有找到政府補助、有找到特別優秀的實體課程名師,才去找實體課程 ## 買線上課程自學 不分學期、沒有分組專案、沒有助教 基本上就是找一些影片自己來看 這種課程國外比較多,需要英文能力好 好處是費用非常便宜,通常幾百元~幾千元就有很不錯的內容 甚至有 freeCodeCamp 這種完全免費的課程 壞處是需要英文能力,並且很多只是小課程,不是完整的一套多課程規劃,會不確定自己的進度到哪了 如果有親戚朋友是業界軟體工程師,比較好,因為可以跟他請教、確認自身進度、以及確認自己求職條件如何 ## 結論 半路出家不容易,我鼓勵大家把學習想成是一個「逐漸清晰」的過程 看過電腦讀取大張高清圖片的樣子嗎?先是模模糊糊的馬賽克,接著一塊一塊慢慢變清晰,最後才是變成完整的美麗圖片 學習會有點類似這樣,一開始到處模模糊糊的沒關係,保持耐心,逐步提高各處的解析度即可 只要先有一整張模糊的圖片即可。不需要執著在圖片一個角落,覺得這塊不清楚,就不能往下走 更千萬不要因為圖片模糊,就覺得「我果然不適合寫程式,放棄好了」,這絕對是搞錯重點 以上,簡單建議分享,希望對你有幫助! --- 您在坊間補習班的學習經驗如何呢?歡迎在留言處跟大家分享您的個人學習經驗!