🔍 搜尋結果:研

🔍 搜尋結果:研

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

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

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

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

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

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

為什麼我們需要數學來程式設計(10 個數學概念)

原文出處:https://dev.to/codewithshahan/10-math-concepts-for-every-programmer-31n9 許多人認為,成為電腦程式設計師不需要了解任何數學。雖然這可能部分正確,但了解一些基本的數學概念可以使程式設計變得更容易,並幫助您解開數位世界的秘密。 現在,讓我們探討每個程式設計師都應該熟悉的 10 個數學概念。 ![shahan 的 10 個數學概念封面圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e5s7z6ee8vm1z1hpujs.png) ## 1. 布林代數 布林代數是程式設計中的基本概念。它處理只能有兩個值的二元變數:true 或 false。我們使用三個運算子來處理布林值:**AND**、**OR** 和 **NOT**。 將它們想像為決策工具。例如,如果你想知道某人是否既**有錢**又**帥**才能得到**女孩**,布爾變量可以幫助你做出決定。如果這兩個條件都滿足,他就會得到一個女孩。如果沒有,他可能還有其他選擇。您可以使用if 語句、[維恩圖](https://en.wikipedia.org/wiki/Venn_diagram) 或[真值表](https://en.wikipedia.org/wiki/Truth_table) 來表示此邏輯。 ![shahan chowdhury 的布林代數圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1ju0l69sc4hlzual24c.png) ## 2. 數位系統 電腦使用以 2 為基數(二進位)的數字系統,與人類使用以 10 為基數(十進位)的系統不同。在基數2 中,數字僅使用兩個符號表示:0 和1。了解二進位有助於我們使用其他數字系統,例如十六進位(基數16) 和基數64,這在程式設計中至關重要,特別是對於編碼和表示資料。 ![由 shahan chowdhury 拍攝的二進位 base-2 與二進位 base-10 的圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/legbrmu97n7rb0sytaw6.png) ## 3. 浮點數 浮點數是計算機表示實數的方式。它們並不總是精確的,這可能會導致計算中出現微小的錯誤。這些數字使用科學記數法來有效地處理大值和小值。了解浮點數的限制對於避免程式碼中出現這些錯誤至關重要。 ``` print(1.00000000005) # A positive float print(-85.6701) # A negative float ``` ## 4. 對數函數 對數幫助我們理解一些自然現像是如何運作的。將對數視為一種測量需要切割原木多少次才能達到特定長度的方法。在程式設計中,對數函數用於二分搜尋等演算法。這些功能在從演算法到科學研究的各種應用中發揮著至關重要的作用。 ## 5.集合論 集合論處理唯一值的集合。在程式設計中,這個概念被廣泛使用,特別是在資料庫中,其中表是唯一行的集合。連接集合、尋找交集、並集和差異是這種情況下的常見操作。理解集合論對於使用資料庫和資料操作非常重要。 ![圖片由集合論的 shahan chowdhury 提供](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5724rsklcbc3qanr9wma.png) ## 6. 組合學 組合學就是對事物和組合進行計數。無論您是為新聞應用程式開發演算法還是設計全球分散式資料庫,組合數學都可以幫助您有效地計算所有可能的組合或排列。這是一項寶貴的程式設計技能。 ![圖片由組合器的 shahan chowdhury 提供](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ic3tza0tm8gih9afnpq.png) ## 7.圖論 圖論涉及由邊連接的節點(頂點)。這個概念用於對關係和連接進行建模。理解圖論對於解決網路路由等問題和優化各種場景至關重要。 ![SHAHAN CHOWDHURY 的圖論圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2nwhgr17213l3puo8nd.png) ## 8. 複雜性理論(大 O 表示法) 複雜性理論可以幫助您分析演算法的效率。 Big O 表示法是表達演算法時間和記憶體複雜度的工具。它可以幫助您為您的程式設計任務選擇最有效的解決方案,這是面試和編寫高效程式碼的寶貴技能。 ![SHAHAN CHOWDHURY 的 BIG O 符號圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tsy1vtrbbp0z11peyo0.png) ## 9. 統計 統計對於各個程式設計領域都至關重要,尤其是在人工智慧和機器學習領域。了解平均值、中位數、眾數和標準差等基本統計概念可以讓您最擅長做出預測。它是在[數據驅動的應用程式](https://try.sanebox.com/kxz8nr6vzzwl)中進行預測和決策的基礎。 ![SHAHAN CHOWDHURY 的統計圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh3ef03m8muoujujhrif.png) ## 10.線性代數 [線性代數](https://en.wikipedia.org/wiki/Linear_algebra) 在電腦圖形學、深度神經網路和許多其他程式設計領域中至關重要。它涉及標量、向量和矩陣來表示和操作資料。如果您想使用 3D 圖形、密碼學和機器學習,那麼線性代數就可以發揮作用。您需要掌握線性代數才能解決這些問題。 ![SHAHAN CHOWHDURY 上傳線性代數](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgi0514spu0fkbqv1lq1.png) _**使用 Notion 最大限度地提高您的生產力**_ [Notion](https://affiliate.notion.so/ow0zcr8xfey4) 對於開發者來說是一個很棒的工具!它支援 60 多種程式語言的語法突出顯示,使編碼更輕鬆、更有效率。不僅如此,它還提供了一些方便的筆記功能。此外,它與多個平台相容,允許您公開分享您的筆記,並促進私人協作。 ## 結論 數學是程式設計世界中的強大工具,這 10 個概念只是一個開始。它們可以幫助您開發更有效率的程式碼、解決複雜的問題並揭開數位世界背後的魔力。這些數學概念將使您成為更好的程式設計師,並且您將有能力克服不斷發展的技術領域中的各種挑戰。 **相關文章:** [6個月內前端開發人員路線圖](https://dev.to/codewithshahan/must-have-frontend-development-skills-roadmap-2024-28jc) **贊助商:** [Sanebox - 專注於重要的電子郵件!](https://try.sanebox.com/kxz8nr6vzzwl) ![Sanebox 註冊圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3q0jw42zodbwjiihb2a.png) _Sanebox 是一個很棒的工具,可以幫助您控制您的電子郵件。它透過將不重要的電子郵件從收件匣中分類出來來組織您的電子郵件。它透過在您的電子郵件帳戶上建立一個名為「SaneLater」的資料夾來實現此目的。所有被認為不重要的電子郵件都會自動過濾到此資料夾。_ **我的社交:** [Linkedin](https://www.linkedin.com/in/codewithshahan) | [X](https://twitter.com/shahancd) 請繼續關注更多有價值的內容,如果您覺得有幫助,您可能也會喜歡我的[YouTube 頻道](https://www.youtube.com/programmingwithshahan?sub_confirmation=1)。下次見,祝您編碼愉快! **[請我喝杯咖啡](https://www.buymeacoffee.com/codewithshahan)**

JSON 效能比較慢。這邊介紹 4 個更快的替代方案

原文出處:https://dev.to/nikl/json-is-slower-here-are-its-4-faster-alternatives-2g30 --- ## 介紹 在快節奏的 Web 開發世界中,速度和反應能力是不容妥協的。您的用戶希望即時存取資訊、快速互動和無縫體驗。 JSON 是 JavaScript 物件表示法的縮寫,一直是 Web 開發中資料交換的忠實夥伴,但它會減慢您的應用程式速度嗎?讓我們深入探討 JSON 的世界,探索其潛在瓶頸,並發現更快的替代方案和優化技術,讓您的應用程式像獵豹一樣衝刺。 --- 您可能還想查看本教學:[使用 Golang 建立即時通知系統 - 逐步通知系統設計指南](https://dev.to/nikl/using-golang-to-build -即時通知系統逐步通知系統設計指南-50l7) --- ### 什麼是 JSON 以及為什麼您應該關心? 在開始 JSON 優化之旅之前,讓我們先了解 JSON 是什麼以及它為何重要。 JSON 是將應用程式中的資料黏合在一起的黏合劑。它是伺服器和客戶端之間通訊資料的語言,也是資料儲存在資料庫和設定檔中的格式。從本質上講,JSON 在現代 Web 開發中發揮關鍵作用。 了解 JSON 及其細微差別不僅是任何 Web 開發人員的基本技能,而且對於優化應用程式也至關重要。隨著我們深入研究此博客,您將發現為什麼 JSON 在性能方面可以成為一把雙刃劍,以及這些知識如何對您的開發之旅產生重大影響。 ## JSON 的受歡迎程度以及人們使用它的原因 JSON 在 Web 開發領域的受歡迎程度怎麼強調都不為過。由於以下幾個令人信服的原因,它已成為資料交換的事實上的標準: 1. **人類可讀格式**:JSON 使用簡單的、基於文字的結構,開發人員和非開發人員都可以輕鬆閱讀和理解。這種人類可讀的格式增強了協作並簡化了調試。 ``` // Inefficient { "customer_name_with_spaces": "John Doe" } // Efficient { "customerName": "John Doe" } ``` 2. **與語言無關**:JSON 不依賴任何特定的程式語言。它是一種通用資料格式,幾乎可以由所有現代程式語言解析和生成,因此具有高度通用性。 3. **資料結構一致性**:JSON 使用鍵值對、陣列和巢狀物件強制資料結構一致。這種一致性使其在各種程式設計場景中都可預測且易於使用。 ``` // Inefficient { "order": { "items": { "item1": "Product A", "item2": "Product B" } } } // Efficient { "orderItems": ["Product A", "Product B"] } ``` 4. **瀏覽器支援**:Web 瀏覽器原生支援 JSON,允許 Web 應用程式與伺服器無縫通訊。這種原生支援對其在 Web 開發中的採用做出了重大貢獻。 5. **JSON API**:許多Web服務和API預設提供JSON格式的資料。這進一步鞏固了 JSON 作為 Web 開發中資料交換首選的角色。 6. **JSON Schema**:開發人員可以使用 JSON Schema 來定義和驗證 JSON 資料的結構,為其應用程式添加額外的清晰度和可靠性。 有鑑於這些優勢,全球開發人員依賴 JSON 來滿足資料交換需求也就不足為奇了。然而,當我們更深入地探索部落格時,我們將發現與 JSON 相關的潛在性能挑戰以及如何有效解決這些挑戰。 ## 對速度的極品 在當今快節奏的數位環境中,應用程式速度和回應能力是不容談判的。用戶期望跨網路和行動應用程式即時存取資訊、快速互動以及無縫體驗。這種對速度的需求是由以下幾個因素所驅動的: ### 用戶期望 使用者已經習慣了數位互動中閃電般的快速回應。他們不想等待網頁加載或應用程式回應。即使是幾秒鐘的延遲也會導致沮喪和放棄。 ### 競爭優勢 速度可以成為顯著的競爭優勢。快速回應的應用程式往往比反應遲緩的應用程式更有效地吸引和留住用戶。 ### 搜尋引擎排名 像 Google 這樣的搜尋引擎將頁面速度視為排名因素。載入速度更快的網站往往在搜尋結果中排名更高,從而提高可見度和流量。 ### 轉換率 尤其是電子商務網站,他們敏銳地意識到速度對轉換率的影響。更快的網站可以帶來更高的轉換率,從而增加收入。 ### 移動效能 隨著行動裝置的普及,對速度的需求變得更加重要。行動用戶的頻寬和處理能力通常有限,因此需要快速的應用程式效能。 ### JSON 會減慢我們的應用程式速度嗎? 現在,讓我們解決核心問題:JSON 是否會減慢我們的應用程式速度? 如同前面提到的,JSON 是一種非常流行的資料交換格式。它靈活、易於使用且廣受支援。然而,這種廣泛的採用並不能使其免受性能挑戰。 在某些情況下,JSON 可能是降低應用程式速度的罪魁禍首。解析 JSON 資料的過程,尤其是在處理大型或複雜結構時,可能會消耗寶貴的毫秒時間。此外,低效率的序列化和反序列化可能會影響應用程式的整體效能。 ### 解析開銷 當 JSON 資料到達您的應用程式時,它必須經過解析過程才能將其轉換為可用的資料結構。解析可能相對較慢,尤其是在處理大量或深層巢狀的 JSON 資料時。 ``` // JavaScript example using JSON.parse for parsing const jsonData = '{"key": "value"}'; const parsedData = JSON.parse(jsonData); ``` ### 序列化與反序列化 JSON 要求資料從用戶端傳送到伺服器時進行序列化(將物件編碼為字串),並在接收時進行反序列化(將字串轉換回可用物件)。這些步驟可能會帶來開銷並影響應用程式的整體速度。 ``` // Node.js example using JSON.stringify for serialization const data = { key: 'value' }; const jsonString = JSON.stringify(data); ``` ### 字串操作 JSON 是基於文字的,嚴重依賴字串操作來進行連接和解析等操作。與處理二進位資料相比,字串處理可能會慢一些。 ### 缺乏資料類型 JSON 具有一組有限的資料類型(例如字串、數字、布林值)。複雜的資料結構可能需要效率較低的表示,導致記憶體使用量增加和處理速度變慢。 ``` { "quantity": 1.0 } ``` ### 冗長 JSON 的人類可讀設計可能會導致冗長。冗餘金鑰和重複結構會增加有效負載大小,導致資料傳輸時間更長。 ``` // Inefficient { "product1": { "name": "Product A", "price": 10 }, "product2": { "name": "Product A", "price": 10 } } ``` ### 沒有二進位支持 JSON 缺乏對二進位資料的本機支援。在處理二進位資料時,開發人員通常需要將其編碼和解碼為文本,這可能會降低效率。 ### 深度嵌套 在某些場景下,JSON資料可能會深度嵌套,需要遞歸解析和遍歷。這種計算複雜性可能會減慢您的應用程式的速度,尤其是在沒有最佳化的情況下。 --- > **與此類似,我與其他熱愛開源的開發人員一起在 Slack 上運行一個以開發人員為中心的社群。我們討論這些類型的主題、實現、整合、一些真相炸彈、奇怪的聊天、虛擬會議、為開源做出貢獻以及一切有助於開發人員保持理智的事情;)畢竟,太多的知識也可能是危險的。* * > **我邀請您加入我們的免費社區(_沒有廣告,我保證,並且我打算保持這種方式_),參與討論,並分享您的經驗和專業知識。您可以填寫此表格,Slack 邀請將在幾天後收到您的電子郵件。我們有來自一些偉大公司(Atlassian、Gong、Scaler)的優秀人員,您一定不想錯過與他們的互動。 [邀請表](https://forms.gle/VzA3ST8tCFrxt39U9)** 讓我們繼續... --- ## JSON 的替代方案 雖然 JSON 是一種通用的資料交換格式,但其在某些場景下的效能限制導致人們探索更快的替代方案。讓我們深入研究其中一些替代方案,並了解您何時以及為何選擇它們: ### 協定緩衝區 Protocol Buffers,也稱為 protobuf,是 Google 開發的二元序列化格式。它在速度和效率方面表現出色。這就是您可能考慮使用 Protocol Buffer 的原因: 1. **二進位編碼**:Protocol Buffers 使用二進位編碼,與 JSON 基於文字的編碼相比,它更緊湊,編碼和解碼速度更快。 2. **高效的資料結構**:Protocol Buffers 可讓您透過精確的類型定義高效的資料結構,從而實現更快的序列化和反序列化。 3. **架構演化**:Protocol Buffers 支援架構演化,這表示您可以在不破壞向後相容性的情況下更新資料結構。 ``` syntax = "proto3"; message Person { string name = 1; int32 age = 2; } ``` ### 訊息包 MessagePack 是另一種專為提高效率和速度而設計的二元序列化格式。以下是您可能考慮使用 MessagePack 的原因: 1. **緊湊性**:MessagePack 產生高度緊湊的資料表示形式,從而減少資料傳輸大小。 2. **二進位資料**:MessagePack 提供了對二進位資料的原生支持,非常適合涉及二進位資訊的場景。 3. **速度**:MessagePack 的二進位性質允許快速編碼和解碼。 ``` // JavaScript example using MessagePack for serialization const msgpack = require('msgpack-lite'); const data = { key: 'value' }; const packedData = msgpack.encode(data); ``` ### BSON(二進位 JSON) BSON,通常發音為“bee-son”或“bi-son”,是一種二進位序列化格式,主要用於 MongoDB 等資料庫。以下是您可能考慮使用 BSON 的原因: 1. **類似 JSON 的結構**:BSON 維護了類似 JSON 的結構,並添加了二進位資料類型,在效率和可讀性之間提供了平衡。 2. **二進位資料支援**:BSON 提供對二進位資料類型的原生支持,這有利於處理映像或多媒體等資料。 3. **資料庫集成**:BSON 與 MongoDB 等資料庫無縫集成,使其成為此類環境的自然選擇。 ``` { "_id": ObjectId("60c06fe9479e1a1280e6bfa7"), "name": "John Doe", "age": 30 } ``` ### 歐元 Avro 是在 Apache Hadoop 專案中開發的資料序列化框架。它強調模式相容性和效能。以下是您可能考慮使用 Avro 的原因: 1. **架構相容性**:Avro 優先考慮架構相容性,讓您在不破壞相容性的情況下發展資料結構。 2. **二進位資料**:Avro 使用緊湊的二進位編碼格式進行資料傳輸,從而產生更小的有效負載。 3. **語言中立**:Avro 支援多種程式語言,使其適合不同的應用程式生態系統。 ``` { "type": "record", "name": "Person", "fields": [ { "name": "name", "type": "string" }, { "name": "age", "type": "int" } ] } ``` JSON 及其替代方案之間的選擇取決於您的特定用例和要求。如果架構相容性至關重要,Avro 可能是最佳選擇。如果您需要緊湊性和效率,MessagePack 和 Protocol Buffers 是強有力的競爭者。在處理二進位資料時,MessagePack 和 BSON 可以滿足您的需求。每種格式都有其優點和缺點,因此請選擇適合您專案需求的格式。 ### 最佳化 JSON 效能 但是,如果您決心使用 JSON,儘管它有潛在的速度障礙,該怎麼辦?如何讓 JSON 運作得更快、更有效率?好消息是,有一些實用的策略和最佳化可以幫助您實現這一目標。讓我們透過程式碼範例和最佳實踐來探索這些策略。 **1.最小化資料大小** A。 **使用簡短的描述性鍵**:選擇簡潔但有意義的鍵名稱以減少 JSON 物件的大小。 ``` // Inefficient { "customer_name_with_spaces": "John Doe" } // Efficient { "customerName": "John Doe" } ``` b. **盡可能縮寫**:在不犧牲清晰度的情況下,考慮使用鍵或值的縮寫。 ``` // Inefficient { "transaction_type": "purchase" } // Efficient { "txnType": "purchase" } ``` **2.明智地使用數組** A。 **最小化巢狀**:避免深度巢狀數組,因為它們會增加解析和遍歷 JSON 的複雜度。 ``` // Inefficient { "order": { "items": { "item1": "Product A", "item2": "Product B" } } } // Efficient { "orderItems": ["Product A", "Product B"] } ``` **3.優化數位表示** A。 **盡可能使用整數**:如果一個值可以表示為整數,請使用它而不是浮點數。 ``` // Inefficient { "quantity": 1.0 } // Efficient { "quantity": 1 } ``` **4.刪除冗餘** A。 **避免重複資料**:透過引用共享值來消除冗餘資料。 ``` // Inefficient { "product1": { "name": "Product A", "price": 10 }, "product2": { "name": "Product A", "price": 10 } } // Efficient { "products": [ { "name": "Product A", "price": 10 }, { "name": "Product B", "price": 15 } ] } ``` **5.使用壓縮** A。 **套用壓縮演算法**:如果適用,請使用 Gzip 或 Brotli 等壓縮演算法來減少傳輸過程中 JSON 有效負載的大小。 ``` // Node.js example using zlib for Gzip compression const zlib = require('zlib'); const jsonData = { // Your JSON data here }; zlib.gzip(JSON.stringify(jsonData), (err, compressedData) => { if (!err) { // Send compressedData over the network } }); ``` 根據塞繆爾的評論,我添加了一個編輯。 {% devcomment 2adn4 %} ``` As Samuel rightly observes, the adoption of HTTP/2 has brought significant advancements, particularly in optimizing data interchange formats like JSON. HTTP/2's multiplexing capabilities efficiently manage multiple requests over a single connection, enhancing responsiveness and reducing overhead. In practical terms, a comprehensive optimization strategy may involve both embracing HTTP/2 and utilizing compression techniques per your use-case, recognizing that each approach addresses specific aspects of network efficiency and performance. HTTP/2 excels in network-level optimization, while compression strategies enhance application-level efficiency, and the synergy between them can lead to substantial gains in data handling speed and resource utilization. ``` **6。使用伺服器端快取** A。 **快取 JSON 回應**:實作伺服器端快取以有效儲存和提供 JSON 回應,減少重複資料處理的需要。 **7.設定檔和優化** A。 **分析效能**:使用分析工具來識別 JSON 處理程式碼中的瓶頸,然後最佳化這些部分。 請記住,您實施的具體優化應符合應用程式的要求和約束。 ### 實際最佳化:在實作中加速 JSON 現在您已經探索了優化 JSON 的理論方面,現在是時候深入研究遇到 JSON 效能瓶頸並巧妙克服它們的實際應用程式和專案了。這些範例提供了有關用於提高速度和回應能力的策略的寶貴見解,同時仍利用 JSON 的多功能性。 **1. LinkedIn 的協定緩衝區整合** *挑戰:LinkedIn 與 JSON 冗長和網路頻寬使用的鬥爭* 全球最大的職業社交平台LinkedIn面臨嚴峻的挑戰。他們對 JSON 進行微服務通訊的依賴導致了冗長和網路頻寬使用量的增加,最終導致更高的延遲。在每一毫秒都至關重要的數位世界中,這是一個需要解決方案的挑戰。 **解決方案:協定緩衝區的力量** LinkedIn 轉向了 [Protocol Buffers](https://engineering.linkedin.com/blog/2023/linkedin-integrates-protocol-buffers-with-rest-li-for-improved-m),通常稱為 protobuf,由Google開發的二進位序列化格式。 Protocol Buffers 的主要優勢在於其效率、緊湊性和速度,使其在序列化和反序列化方面比 JSON 快得多。 **影響:延遲減少高達 60%** Protocol Buffers 的採用顯著降低了延遲,報告顯示延遲可提高高達 60%。此次優化顯著提高了 LinkedIn 服務的速度和回應能力,為全球數百萬用戶提供了更流暢的體驗。 **2. Uber 的 H3 地理索引** *挑戰:Uber 在地理空間資料方面的 JSON 困境* 叫車巨頭優步的營運嚴重依賴地理空間數據。 JSON 是表示地理空間資料的預設選擇,但解析大型資料集的 JSON 被證明是一個瓶頸,減慢了演算法的速度。 **解決方案:引入 H3 地理索引** Uber 推出了 [H3 Geo-Index](https://www.uber.com/en-IN/blog/h3/),這是一種用於地理空間資料的高效能六邊形網格系統。透過從 JSON 轉向這種創新解決方案,他們成功地大幅減少了 JSON 解析開銷。 **影響:加速地理空間操作** 這種優化大大加速了地理空間操作,提高了 Uber 乘車服務和地圖系統的效率。使用者體驗到更快的回應時間和更可靠的服務。 **3. Slack 的訊息格式最佳化** *挑戰:Slack 與即時訊息渲染的戰鬥* Slack 是團隊的訊息平台,需要在即時聊天中傳輸和呈現大量 JSON 格式的訊息。然而,這導致了效能瓶頸和訊息渲染緩慢。 **解決方案:簡化 JSON 結構** Slack 優化了 JSON 結構以減少不必要的資料。他們開始在每個訊息中只包含基本訊息,從而減少有效負載的大小。 **影響:更快的訊息渲染和增強的聊天效能** 此優化顯著提高了訊息渲染速度。 Slack 用戶享受到更靈敏、更有效率的聊天體驗,尤其是在繁忙的群組聊天中。 **4. Auth0 的協定緩衝區實作** *挑戰:Auth0的身份驗證和授權資料效能* Auth0 是一個著名的身份和存取管理平台,在處理身份驗證和授權資料時面臨 JSON 的效能挑戰。這些數據需要在不影響安全性的情況下有效處理。 **解決方案:採用協定緩衝區進行資料序列化** [Auth0 也轉向Protocol Buffers](https://auth0.com/blog/beating-json-performance-with-protobuf/#How-Do-We-Use-Protobuf),利用其高效的資料序列化和反序列化功能。此交換器顯著提高了資料處理速度,使身份驗證過程更快並增強了整體效能。 **影響:加速身份驗證和授權** Protocol Buffers 的採用增強了身分驗證和授權流程,確保 Auth0 的服務提供一流的效能,同時保持最高的安全標準。 這些現實世界的例子強調了優化在克服 JSON 相關的速度下降方面的力量。這些案例中採用的策略證明了 JSON 和替代格式在滿足現代數位環境的需求方面的適應性和多功能性。 請繼續關注結論部分,我們總結了關鍵要點,並為您提供了在您自己的專案中優化 JSON 效能的路線圖。 ## 結束語 在開發領域,JSON 是一種多功能且不可或缺的資料交換工具。其人類可讀的結構和跨語言適應性使其成為當代應用程式的基石。然而,正如我們在本指南中的探索所揭示的那樣,JSON 的普遍使用並不能使其免受性能挑戰。 我們在增強 JSON 效能的過程中獲得的重要收穫是顯而易見的: - 1. **效能至關重要:** 速度和反應能力在當今的數位環境中至關重要。用戶要求應用程式以閃電般的速度運行,即使是輕微的延遲也會導致不滿意並錯失機會。 - 2. **大小很重要:** 資料有效負載的大小直接影響網路頻寬使用和回應時間。減少資料大小通常是優化 JSON 效能的第一步。 - 3. **探索替代格式:** 當效率和速度至關重要時,探索替代資料序列化格式(如 Protocol Buffers、MessagePack、BSON 或 Avro)是有益的。 - 4. **真實世界範例:** 從組織有效解決 JSON 相關減速問題的真實實例中學習,表明最佳化工作可以顯著提高應用程式效能。 當您繼續開發和增強 Web 應用程式時,請務必牢記 JSON 對效能的影響。精心設計資料結構,選擇有意義的鍵名稱,並在情況需要時開放探索替代序列化格式。透過這樣做,您可以確保您的應用程式在速度和效率方面不僅滿足而且超越用戶的期望。 在不斷發展的 Web 開發環境中,優化 JSON 效能成為一項寶貴的資產,使您的專案與眾不同,並確保您的應用程式在即時數位體驗時代蓬勃發展。 --- > **與此類似,我與其他熱愛開源的開發人員一起在 Slack 上運行一個以開發人員為中心的社群。我們討論這些類型的主題、實現、整合、一些真相炸彈、奇怪的聊天、虛擬會議、為開源做出貢獻以及一切有助於開發人員保持理智的事情;)畢竟,太多的知識也可能是危險的。* * > **我邀請您加入我們的免費社區(_沒有廣告,我保證,並且我打算保持這種方式_),參與討論,並分享您的經驗和專業知識。您可以填寫此表格,Slack 邀請將在幾天後收到您的電子郵件。我們有來自一些偉大公司(Atlassian、Gong、Scaler)的優秀人員,您一定不想錯過與他們的互動。 [邀請表](https://forms.gle/VzA3ST8tCFrxt39U9)** > _如果您能與您的開發朋友(他們是奉獻者)分享該表格,我將不勝感激。_

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

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

您的下一個專案,可以試試看 HTMX 技術!

原文出處:https://dev.to/turculaurentiu91/why-you-should-choose-htmx-for-your-next-project-o7j 在本文中,我們將旨在了解為什麼您下次為 Web 應用程式選擇技術堆疊時應該考慮 HTMX 作為 React 的替代品。我們將研究傳統 HTTP JSON API + React 帶來的複雜性和挑戰,以及如何透過使用 HTMX 輕鬆避免它們。 **注意**:在本文中,我將討論 React,但它可以替換為任何其他前端框架,如 Angular、Vue、Svelte 或 Solid,但我談論 React 是因為它是大多數 Web 的預設技術開發人員預設為。 ### HTMX 到底是什麼 如果您還不知道,[HTMX](https://htmx.org/) 是一個小型瀏覽器 (JS) 庫,它使用一些屬性擴展了 HTML,允許您使用來自伺服器。它還使 HTML 能夠對所有動詞發出 HTTP 請求,而不僅僅是 GET 和 POST。 ## React 解決了什麼問題 React 是一個 JavaScript 程式庫,可協助您透過保持使用者介面與狀態同步來編寫高度互動的應用程式。您告訴它如何渲染給定的狀態,每次更新狀態時,它都會重新渲染(盡可能有效率)UI 以反映狀態變更。 每次狀態發生變化時,您都會通知庫它發生了變化,並提供新的狀態,它將處理 UI 更新。 需要本地記憶體狀態的高互動應用程式的範例可以是您可以在網路上找到的各種文字編輯器(VSCode)之一、拖放看板(如 Trello 或 JIRA)、視訊播放器或聊天室。 什麼不是此類應用程式的範例?您正在建立的待辦事項清單、您正在閱讀的新聞網站、您發布的部落格以及周圍的大多數網站。如果我們看一下 [80/20 規則](https://en.wikipedia.org/wiki/Pareto_principle) >80% 的結果來自 20% 的原因,80% 的結果來自 20% 的努力。 你可以說 80% 使用 React 的 Web 應用程式不需要本地狀態。對於那 20% 需要它的人來說,你可以說它只是應用程式的一小部分(大約 20%),其餘部分只能用 HTML 來表達。 **這些數字是編造的,我沒有任何研究來支持這一點** ## React 也解決了哪些問題,使其被現代網站廣泛採用 HTML 已經過時了。使用 HTML 製作應用程式的舊方法涉及頁面、連結和表單的集合,這些頁面、連結和表單向使用者描述給定資源的當前狀態以及他們可以執行哪些操作來更改它。 每次使用者與資源互動時,應用程式只能重新載入整個頁面以顯示資源的新狀態。 幾年後,FaceBook 推出了 React,這是一個 JS 程式庫,可讓開發人員建立單頁應用程式 (SPA)。導航時不再需要重新加載整個頁面,狀態更新的酷過渡、對用戶的有趣反饋以及其他使 Web 開發人員在其網站中採用 SPA 框架的細節。 ## 複雜性問題 ![AI 產生圖像,透過 next.js 展示現代應用程式的瘋狂複雜性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpk0v0nz0d45hv91i166.png) 如果你不理解上面的架構,不用擔心,沒有什麼好理解的。我要求 ChantGPT 為我生成它,由於它過於複雜且沒有任何意義,它完美地反映了現代 Web 應用程式目前的預設基礎架構。 一個很酷的程式設計原則是**KISS**,它代表“保持簡單,愚蠢”,或者有些人可能喜歡開玩笑,“保持簡單,愚蠢!” 現代開發人員預設建立 Web 應用程式的當前基礎設施和技術堆疊極其複雜,做了很多不必要的事情,只是因為它很酷! 當您自己建立第一個 POC 時,效果很好,但下一刻您加入了更多團隊成員,並且使用多次迭代和「擁抱」更改的敏捷方式,它有點崩潰,原因是我們將往下看一下。 ## 傳統 HTTP JSON API + React 的狀態管理問題 在 Web 應用程式中,您經常要做的就是從資料庫中獲取資源的狀態並將其呈現給使用者。讓我們以任務管理應用程式為例。使用者有一個任務列表,每個任務都有一個狀態: - 任務的標題 - 說明 - 任務完成時的標誌 - 截止日期(可選) 我們通常將此狀態儲存在資料庫中,並將此資訊呈現給用戶,您必須: - 從使用者有權存取的資料庫中取得所有任務。 - 可以選擇轉換資料(也許您儲存完成的日期並從中計算「is_completed」標誌)。 - 將資料序列化為 JSON。 - 透過 HTTP 請求取得資料。 - (可選但通常)根據模式驗證資料,可能使用 YUP 或 ZOD。 - 使用 Redux、Zustand、react-query 或其他狀態管理庫將 JSON 轉換為狀態並將其儲存在快取中。 - 轉換 HTML 中的狀態,通常會決定使用者可以使用資料做什麼。 簡而言之,我們正在描述如何在 JavaScript 中渲染所有資源的所有可能狀態,在瀏覽器中下載所述 JavaScript,然後 JavaScript 下載一堆 JSON 格式的資料並將其渲染(如果它知道如何)瀏覽器顯示為HTML! 向使用者顯示任務清單需要做大量工作,特別是當任務僅在使用者變更時才更改時,應用程式必須將應用程式置於載入狀態,發出另一個 HTTP 請求(以PUT 或PATCH 或DELETE)使快取值(狀態)無效並重新獲取它以顯示更改的任務。 或者更糟的是,當用戶更改某些任務時,樂觀地更新本地狀態並立即顯示更改,並在幕後執行更新請求,僅在他們成功更新後通知用戶更新失敗。 這是非常容易出錯的。對於這個待辦事項應用程式來說,它可能會很有效,因為您是唯一的開發人員,並且該應用程式足夠大,您可以在腦海中保留正在發生的所有事情的地圖。但是當你的團隊規模更大時,尤其是當你將團隊分成前端和後端時,溝通不良可能會導致很多問題。 後端可能使用“is_completed”標誌,而前端可能需要“is_active”標誌。後端可能會將經過 Markdown 處理的「描述」傳送到 HTML,而前端可能希望它不被處理。後端可能會將“描述”設為可選,以允許使用者在前端不同步時保存草稿,並且您會看到許多“未捕獲的類型錯誤:無法讀取未定義的屬性(讀取“toLowerCase” )” 另一方面,在 HTMX 上,您可以直接在範本上呈現 HTML,只要後端語言允許,就可以確保類型安全。您僅向瀏覽器發送相關訊息,向使用者提供對資源的適當控制,並指示瀏覽器或 HTMX 如何解釋使用者操作以及後端對這些操作的回應。所有應用程式狀態都是 HTML,這個概念稱為 [HATEOAS](https://htmx.org/essays/hateoas/) ## 傳統 HTTP JSON API + React 對文件的需求 為了讓兩個團隊(後端和前端)獨立工作並透過 HTTP JSON API 進行通信,您需要擁有適當的 API 文件。您還需要記錄如何計算使用者可以對給定資源執行哪些操作以顯示控制項。 大多數此類文件寫起來都很痛苦,特別是因為通常需要在實作之前編寫,而開發人員尚未完全理解問題的範圍,因此前端可以並行開發。這通常會在開發過程中進行許多更新,以適應開發過程中出現的問題,並可能導致團隊之間的版本不一致。 您還需要對 API 進行版本控制,並注意不要在非主要版本變更中引入重大變更。您無法再在不變更主要版本的情況下變更欄位名稱。您還需要保持 API 的多個版本運作或強制前端團隊進行調整。 大多數時候,文件已經過時了。有些必須緊急修復,有些新要求是在發布前一天提出的,現在您的文件已經過時,即使在很短的時間內。而且您必須記住更新它,或者更糟的是,您建立了一張票來記住它,而其他人拿起它,但沒有完整的圖片並記錄了錯誤! ## 重複的邏輯問題 對於每個資源,您必須實施授權策略。您必須確定目前使用者是否可以將任務 **46234** 標記為已完成。您必須在後端程式碼的某個位置編寫此檢查。否則,您的應用程式將開放給_不安全的直接物件參考_,或任何使用 Postman 的人都可以將您的任務標記為已完成。 您還必須在前端實現相同的邏輯,僅當用戶有權標記已完成時才顯示標記按鈕(讓我們假設您可以與其他用戶共享您的任務,但只有您可以更改它們)。 現在每次這個邏輯改變時,你都必須在兩個應用程式中實作它,並同時發布它或擁有多個版本的API。 ## 效能問題 為了使用 React 在瀏覽器中呈現網站,您需要將佔用大量內存和解析/處理影響的 React 程式碼、狀態管理庫程式碼、腳趾 UI 庫程式碼、CSS-IN- 捆綁在一起。JS 庫程式碼、應用程式程式碼以及我們透過NPM 安裝和使用的任何js 程式庫(我們並不羞於安裝新套件,請參閱[leftpad 問題](https://www.theregister.com/2016/03/23/npm_left_pad_chaos/))。這通常會導致透過網路傳送大塊的 JavaScript 資源。當然,您可以在瀏覽器中緩存,但在現代敏捷開發中,每個衝刺至少部署一次,因此這無法解決任何問題。這會消耗網路流量和電池,這對行動裝置來說是一個經常被忽視的問題。 上述JavaScript需要由瀏覽器來解釋,消耗處理能力和電池。 JavaScript,尤其是 ReactDOM,需要追蹤 DOM 的鏡像。在其之上加入普通 DOM 和本地狀態緩存,以及所有渲染函數,以及所有“useMemo”、“useCallback”和“useState”。也要加入需要在記憶體中保存所有上下文變數的所有閉包。 JavaScript 引擎並不以其記憶體效率而聞名!您會聽到人們抱怨瀏覽器消耗了多少內存,但他們低估了他們存取的網站所消耗的內存量。 所有這些加起來,最終會耗盡用戶的電池和記憶體。當然,您可以付出努力並優化所有這些,或使用其他程式庫(如 Svelte),但所有這些努力都可以用於為您的用戶提供更有意義的功能。 ## 服務端渲染的需要 近年來,我們播種了伺服器端渲染專用框架(如「Next.js」)的興起。它們的流行凸顯了對以 HTML 格式交付內容的需求,特別是出於可存取性優化、效能和搜尋引擎優化的原因。 你不想等待瀏覽器下載 JavaScript 來渲染頁面,然後等待 JavaScript 發出 HTTP 請求來獲取內容然後渲染它,你希望它立即渲染,特別是對於上面的情況折疊內容。 這又增加了一層複雜性,包括: - 基礎設施,現在您還需要另一台伺服器用於前端應用程式 - 程式碼更複雜,包括什麼程式碼在伺服器上執行以及什麼在瀏覽器上執行的思維導圖 - 部署管道現在更加複雜 - 測試基礎設施現在更加複雜 - 現在解決問題變得更加困難,您需要了解問題是在瀏覽器上、在客戶端應用程式伺服器上還是在 API 伺服器上 ## 解決這些問題 Web 開發社群各自使用自己的語言或開發技術,以不同的方式解決這些問題: - Next.js(以及 Nuxt 等) - 反應伺服器元件 - 拉維爾 - 慣性.JS - 活線 - 點網 - Blazor 頁面 - 靈藥 - 鳳凰即時查看 - 鐵鏽 - 樂浦伺服器功能 還有許多我忘記或從未聽說過的其他解決方案! 無論如何,此類解決方案的存在和流行證明了這些問題是有效的並且在 Web 開發人員的日常生活中遇到過。否則他們不會不遺餘力地解決這些問題,尤其是以開源的方式! 還有 [Turbo](https://turbo.hotwired.dev/) 以及採用它們的框架、Ruby on Rails、PHP Symphony 以及其他可能以與 HTMX 相同的方式解決相同問題的框架。選擇 HTMX 只是個人喜好,但你絕對應該了解這一點,這和 HTMX 一樣酷! 在所有這些中,HTMX 脫穎而出,不僅因為它不會將您鎖定到特定技術,您可以透過對模板進行微小更改來從 PHP 切換到 Rust,而且還因為它完全消除了對有狀態元件的需求,或者需要追蹤與資源無關的應用程式的某種狀態。 例如,讓我們採用確認對話方塊模式。您通常最終要做的是,您有一個本地記憶體狀態(如果它是開啟的),並根據該狀態將其顯示給使用者。在 HTMX 中,狀態 **IS THE HTML** 意味著當您按一下開啟模式時,您 **GET** `tasks/{taskId}/confirm-delete` 並將回應 HTML 嵌入到 DOM 中。當它被刪除時,您就完全刪除了模式和任務!這以一種獨特且極其簡單的方式解決了上述所有問題,您不需要: - 追蹤狀態 - 知道如何渲染對話框 - 記錄API - 檢查使用者是否可以刪除任務(在前端) - 您的後端應用程式始終負責 - 您可以獲得更好的安全性,因為您不會向瀏覽器發送不相關的資料並竊取敏感資訊 - 你會得到更好的表現 __*最重要的是,您可以讓您的應用程式保持簡單,只有在解決使用者問題時才允許複雜性!*__ 您只需指示 HTMX 從何處獲取對話框以及將其放置在何處,一切就完成了! ``` <!-- the delete button --> @if ($chirp->user->is(auth()->user())) <form> @csrf @method('delete') <x-dropdown-link :component="'button'" type="submit" hx-get="{{ route('chirps.confirm-destroy', $chirp) }}" hx-swap="beforeend" hx-target="closest .chirp" > {{ __('Delete') }} </x-dropdown-link> </form> @endif <!-- the dialog template --> <div class="modal fixed z-10 inset-0 overflow-y-auto flex justify-center items-center bg-black bg-opacity-50" style="backdrop-filter: blur(14px);"> <div class="bg-white rounded p-6"> <h2 class="text-xl border-b pb-2 mb-2">Confirm Action</h2> <p>Are you sure you want to delete this chirp?</p> <div class="flex justify-end mt-4 gap-4"> <x-secondary-button _="on click remove closest .modal" > Cancel </x-secondary-button> <form> @csrf <x-danger-button hx-delete="{{route('chirps.destroy', $chirp)}}" hx-target="closest .chirp" hx-swap="delete"> Delete </x-danger-button> </form> </div> </div> </div> ``` _這個範例來自我的 [HTMX with Laravel] 教學(https://dev.to/turculaurentiu91/laravel-htmx--g0n) ,請看!_ 就像這樣,當我們單擊刪除按鈕時,我們指示 HTMX 對 `chirps/{chirp}/confirm-destroy` 執行 **GET** 請求,並將結果 HTML 放在最接近的父級 `< 之前div class="chirp">` 結束(在底部)。在刪除對話方塊中,當使用者確認時,我們指示 HTMX 對 `chirps/{chirp}` 端點執行 **DELETE** 請求,成功後,我們刪除具有 `chirp` 類別的最接近的父級。 ## 結論 在不斷發展的 Web 開發領域,看到 HTMX 等倡導簡單性和回歸基礎的工具令人耳目一新。透過利用 HTML 和 HTTP 的強大功能,HTMX 允許開發人員建立動態 Web 應用程式,而無需傳統 JavaScript 框架的複雜性和開銷。 因此,下次您開始新專案或考慮重構現有專案時,請嘗試 HTMX。您可能會驚訝於用這麼少的錢就能取得如此大的成就。

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

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

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

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

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

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

對程式設計有幫助的 10 個數學概念

許多人認為,成為電腦程式設計師不需要了解任何數學。雖然這可能部分正確,但了解一些基本的數學概念可以使程式設計變得更容易,並幫助您解開數位世界的秘密。 現在,讓我們探討每個程式設計師都應該熟悉的 10 個數學概念。 原文出處:https://dev.to/codewithshahan/10-math-concepts-for-every-programmer-31n9 ![shahan 的 10 個數學概念封面圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4e5s7z6ee8vm1z1hpujs.png) ## 1. 布林代數 布林代數是程式設計中的基本概念。它處理只能有兩個值的二元變數:true 或 false。我們使用三個運算子來處理布林值:**AND**、**OR** 和 **NOT**。 將它們想像為決策工具。例如,如果你想知道某人是否既**有錢**又**帥**才能得到**女孩**,布爾變數可以幫助你做出決定。如果這兩個條件都滿足,他就會得到一個女孩。如果沒有,他可能還有其他選擇。您可以使用if 語句、[維恩圖](https://en.wikipedia.org/wiki/Venn_diagram) 或[真值表](https://en.wikipedia.org/wiki/Truth_table) 來表示此邏輯。 ![shahan chowdhury 的布林代數圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1ju0l69sc4hlzual24c.png) ## 2. 數位系統 電腦使用以 2 為基數(二進位)的數字系統,與人類使用以 10 為基數(十進位)的系統不同。在基數2 中,數字僅使用兩個符號表示:0 和1。了解二進位有助於我們使用其他數字系統,例如十六進位(基數16) 和基數64,這在程式設計中至關重要,特別是對於編碼和表示資料。 ![由 shahan chowdhury 拍攝的二進位 base-2 與二進位 base-10 的圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/legbrmu97n7rb0sytaw6.png) ## 3. 浮點數 浮點數是計算機表示實數的方式。它們並不總是精確的,這可能會導致計算中出現微小的錯誤。這些數字使用科學記數法來有效地處理大值和小值。了解浮點數的限制對於避免程式碼中出現這些錯誤至關重要。 ``` print(1.00000000005) # A positive float print(-85.6701) # A negative float ``` ## 4. 對數函數 對數幫助我們理解一些自然現像是如何運作的。將對數視為一種測量需要切割原木多少次才能達到特定長度的方法。在程式設計中,對數函數用於二分搜尋等演算法。這些功能在從演算法到科學研究的各種應用中發揮著至關重要的作用。 ## 5.集合論 集合論處理唯一值的集合。在程式設計中,這個概念被廣泛使用,特別是在資料庫中,其中表是唯一行的集合。連接集合、尋找交集、並集和差異是這種情況下的常見操作。理解集合論對於使用資料庫和資料操作非常重要。 ![圖片由集合論的 shahan chowdhury 提供](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5724rsklcbc3qanr9wma.png) ## 6. 組合學 組合學就是對事物和組合進行計數。無論您是為新聞應用程式開發演算法還是設計全球分散式資料庫,組合數學都可以幫助您有效地計算所有可能的組合或排列。這是一項寶貴的程式設計技能。 ![圖片由組合器的 shahan chowdhury 提供](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ic3tza0tm8gih9afnpq.png) ## 7.圖論 圖論涉及由邊連接的節點(頂點)。這個概念用於對關係和連接進行建模。理解圖論對於解決網路路由等問題和優化各種場景至關重要。 ![SHAHAN CHOWDHURY 的圖論圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2nwhgr17213l3puo8nd.png) ## 8. 複雜性理論(大 O 表示法) 複雜性理論可以幫助您分析演算法的效率。 Big O 表示法是表達演算法時間和記憶體複雜度的工具。它可以幫助您為您的程式設計任務選擇最有效的解決方案,這是面試和編寫高效程式碼的寶貴技能。 ![SHAHAN CHOWDHURY 的 BIG O 符號圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tsy1vtrbbp0z11peyo0.png) ## 9. 統計 統計對於各個程式設計領域都至關重要,尤其是在人工智慧和機器學習領域。了解平均值、中位數、眾數和標準差等基本統計概念可以讓您最擅長做出預測。它是在[資料驅動的應用程式](https://try.sanebox.com/kxz8nr6vzzwl)中進行預測和決策的基礎。 ![SHAHAN CHOWDHURY 的統計圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh3ef03m8muoujujhrif.png) ## 10.線性代數 [線性代數](https://en.wikipedia.org/wiki/Linear_algebra) 在電腦圖形學、深度神經網路和許多其他程式設計領域中至關重要。它涉及標量、向量和矩陣來表示和操作資料。如果您想使用 3D 圖形、密碼學和機器學習,那麼線性代數就可以發揮作用。您需要掌握線性代數才能解決這些問題。 ![SHAHAN CHOWHDURY 上傳線性代數](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgi0514spu0fkbqv1lq1.png) _**建議:使用 FigJam 進行專案設計**_ 身為程式設計師,您需要一個工具來與您的團隊或個人一起繪製藍圖、繪製心智圖、集思廣益、建立出色的專案、確定決策目標等等。 FigJam 是最好的選擇,也是市場上最受歡迎的工具。 > FigJam 讓團隊能夠共同建立更好的產品。定義想法、協調決策並推動工作——所有這些都在一個地方完成。 ~Figma 您可以在 [此處](https://psxid.figma.com/1a5bfv7xj7nc-lpaypq) 註冊 FigJam。您將來一定會發現它非常有用。 ## 結論 數學是程式設計世界中的強大工具,這 10 個概念只是一個開始。它們可以幫助您開發更有效率的程式碼、解決複雜的問題並揭開數位世界背後的魔力。這些數學概念將使您成為更好的程式設計師,並且您將有能力克服不斷發展的技術領域中的各種挑戰。

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

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

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

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

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

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

肏!原來JS寫腳本這麼簡單?手把手教你玩油猴!

本文轉載自:https://ithelp.ithome.com.tw/articles/10338469 ## 前情提要 有時候,夜深人靜,總是會想要沉思人生的意義。 於是打開某個網站, 開始看一些只有長大了才能看的大人動作愛情學,必須好好鑽研, 此刻電影裡的聲響徹雲霄,你感覺無比尷尬..... 這時候就需要靜音神隊友。 可以自己加入網頁名單,讓小電影們先保持靜音,自己再手動開啟。 如此一來非常保險,絕對不讓你不小心爆音。 非常的有禮貌,人生的哲理更奧妙了。 ## 腳本下載 ![](https://i.imgur.com/qgX2gr6.png) https://greasyfork.org/zh-TW/scripts/477196-%E9%9D%9C%E9%9F%B3%E5%B0%8F%E5%8A%A9%E6%89%8B ## JS程式碼 ``` // ==UserScript== // @name 靜音小助手 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://*/* // @icon https://www.google.com/s2/favicons?sz=64&domain=xvideos.com // @grant none // ==/UserScript== // 定義 JSON 資料,包含網址開頭 var jsonUrls = [ "https://www.xvideos.com/", "https://example.com/json2", // 添加更多的網址開頭 ]; // 取得當前網址 var currentUrl = window.location.href; // 檢查當前網址是否以 JSON 中的某些開頭開始 var isJsonUrl = jsonUrls.some(function(jsonUrl) { return currentUrl.startsWith(jsonUrl); }); // 如果當前網址符合 JSON 的某些開頭,執行程式碼 if (isJsonUrl) { // 在這裡放置你想要執行的程式碼 console.log("當前網址符合 JSON 開頭"); Mute(); } else { console.log("當前網址不符合 JSON 開頭"); } function Mute(){ // 取得網頁上所有的 <video> 元素 var videoElements = document.getElementsByTagName('video'); // 迭代所有的 <video> 元素並將其靜音 for (var i = 0; i < videoElements.length; i++) { videoElements[i].muted = true; } } ``` ## 觀念筆記 只能說,前端的東西往往越簡單,越強。 這次只是使用三個小觀念,都是超級基本的小小觀念,幼稚園等級。 ### 第一部分:使用陣列儲存網址 ``` // 定義 JSON 資料,包含網址開頭 var jsonUrls = [ "https://www.xvideos.com/", "https://example.com/json2", // 添加更多的網址開頭 ]; ``` 這部分就是把我們的資料儲存起來,可以自己新增訂義哪些網址要被匹配。 ### 第二部分:location的API 使用網址要確認網址,就是用location,這已經屢見不鮮。 另外字串的搜查,startsWith非常老舊卻也很無敵。 ### 第三部分:影片靜音API 很簡單,針對video元素muted就可以了,非常輕鬆! 簡直就像早餐吃鬆餅一樣,鬆。 ## 心得 很多人常常說前端,好難,JS好基八 我是覺得,關你屁事?/ᐠ。ꞈ。ᐟ\ 你會罵蛋餅為什麼要這麼蛋餅嗎,蛋餅之所以好吃就是因為它是蛋餅,不好吃也因為它是蛋餅。 JS的奇怪或是難懂,只是它的本質,在那邊靠北靠母的風氣真的很無聊。 要玩梗也可以多一點新的梗,而不是表面嘴皮耍耍。 它很機八,但也很強,這就是JS的厲害之處。 因此這個簡單實用的小腳本,又再次被我們秒殺了! 喜歡可以關注,未來還會有更多JS的小試身手、前端動手玩創意也還有一堆素材呢⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾

寫出 Clean Code 的一些技巧&原則

## 介紹 編寫乾淨的程式碼是每個軟體開發人員的基本技能。乾淨的程式碼不僅使您的程式碼庫更易於維護和理解,而且還能促進團隊成員之間的協作。在這篇綜合文章中,我們將探討什麼是乾淨的程式碼、為什麼它很重要,並為您提供一組最佳實踐和原則來幫助您編寫乾淨且可維護的程式碼。 - 原文出處:https://dev.to/favourmark05/writing-clean-code-best-practices-and-principles-3amh --- ## 什麼是乾淨程式碼? 乾淨的程式碼是易於閱讀、易於理解且易於修改的程式碼。它是沒有不必要的複雜性、冗餘和混亂的程式碼。乾淨的程式碼遵循一組約定和最佳實踐,使其更加一致,使多個開發人員更容易無縫地處理同一個專案。 ## 為什麼乾淨的程式碼很重要? 1. **可讀性**:乾淨的程式碼易於閱讀,這意味著任何人 - 包括未來的你 - 都可以快速理解它。這減少了掌握程式碼功能所需的時間,從而加快了開發和除錯速度。 2. **可維護性**:程式碼的讀取次數多於編寫次數。當您編寫乾淨的程式碼時,隨著時間的推移,維護和擴展應用程式將變得更加容易。這在軟體開發生命週期中至關重要,因為專案經常發展和成長。 3. **協作**:簡潔的程式碼鼓勵協作。當您的程式碼乾淨且組織良好時,其他團隊成員就可以有效地處理它。這使得劃分任務和同時處理程式碼庫的不同部分變得更容易。 4. **減少錯誤**:乾淨的程式碼可以減少引入錯誤的可能性。難以理解的程式碼在修改或增強過程中更容易出錯。 5. **效率**:乾淨的程式碼就是高效率的程式碼。它通常執行速度更快並且使用更少的資源,因為它避免了不必要的操作和複雜性。 現在我們了解了為什麼乾淨的程式碼很重要,讓我們深入研究一些最佳實踐和原則來幫助您編寫乾淨的程式碼。 ## 編寫簡潔程式碼的最佳實踐和原則 1. **有意義的變數和函數名稱** 對變數、函數、類別和其他辨識碼使用描述性名稱。精心選擇的名稱可以傳達實體的目的,使程式碼更容易理解。避免使用單字母變數名或神秘的縮寫。 ``` # Bad variable name x = 5 # Good variable name total_score = 5 ``` 2. **保持函數和方法簡短** 函數和方法應該簡潔並專注於單一任務。單一職責原則(SRP)指出,一個函數應該要做一件事,並且把它做好。較短的函數更容易理解、測試和維護。如果函數變得太長或太複雜,請考慮將其分解為更小、更易於管理的函數。 ``` // Long and complex function function processUserData(user) { // Many lines of code... } // Refactored into smaller functions function validateUserInput(userInput) { // Validation logic... } function saveUserToDatabase(user) { // Database operation... } ``` 3. **評論和文件** 謹慎使用評論,當你使用評論時,要讓它們變得有意義。程式碼應該盡可能不言自明。文件(例如內嵌註解和自述文件)可協助其他開發人員了解程式碼的目的和用法。記錄複雜的演算法、重要的決策和公共 API。 ``` # Bad comment x = x + 1 # Increment x # Good comment # Calculate the total score by incrementing x total_score = x + 1 ``` 4. **一致的格式和縮排** 堅持一致的編碼風格和縮排。這使得程式碼庫看起來乾淨且有組織。大多數程式語言都有社群接受的編碼標準(例如,Python 的 PEP 8、JavaScript 的 eslint),您應該遵循。一致性也適用於命名約定、間距和程式碼結構。 ``` // Inconsistent formatting if(condition){ doSomething(); } else { doSomethingElse(); } // Consistent formatting if (condition) { doSomething(); } else { doSomethingElse(); } ``` 5. **DRY(不要重複)原則** 避免重複程式碼。重複的程式碼更難維護並增加不一致的風險。將通用功能提取到函數、方法或類別中以提高程式碼的可重複使用性。當您需要進行更改時,只需在一個地方進行即可。 假設您正在開發一個 JavaScript 應用程式來計算購物車中商品的總價。最初,您有兩個單獨的函數來計算每種商品類型的價格:一個用於計算一本書的價格,另一個用於計算筆記型電腦的價格。這是初始程式碼: ``` function calculateBookPrice(quantity, price) { return quantity * price; } function calculateLaptopPrice(quantity, price) { return quantity * price; } ``` 雖然這些函數有效,但它們違反了 DRY 原則,因為計算總價的邏輯對於不同的商品類型是重複的。如果您有更多的專案類型需要計算,您最終將重複此邏輯。為了遵循DRY原則,提高程式碼的可維護性,可以對程式碼進行如下重構: ``` function calculateItemPrice(quantity, price) { return quantity * price; } const bookQuantity = 3; const bookPrice = 25; const laptopQuantity = 2; const laptopPrice = 800; const bookTotalPrice = calculateItemPrice(bookQuantity, bookPrice); const laptopTotalPrice = calculateItemPrice(laptopQuantity, laptopPrice); ``` 在此重構的程式碼中,我們有一個calculateItemPrice函數,它根據作為參數提供的數量和價格計算任何商品類型的總價。這遵循了 DRY 原則,因為計算邏輯不再重複。 現在,您可以通過使用適當的數量和價格值呼叫calculateItemPrice來輕鬆計算書籍、筆記本電腦或任何其他商品類型的總價。這種方法提高了程式碼的可重用性、可讀性和可維護性,同時降低了重複程式碼引起的錯誤風險。 6. **使用有意義的空白** 使用空格和換行符正確設置程式碼格式。這增強了可讀性。使用空格來分隔程式碼的邏輯部分。格式良好的程式碼更容易瀏覽,減少讀者的認知負擔。 ``` // Poor use of whitespace const sum=function(a,b){return a+b;} // Improved use of whitespace const sum = function (a, b) { return a + b; } ``` 7. **錯誤處理** 優雅地處理錯誤。在程式碼中使用適當的 try-catch 塊或錯誤處理機制。這可以防止意外崩潰並為除錯提供有價值的訊息。不要抑制錯誤或在沒有正確響應的情況下簡單地記錄錯誤。 ``` // Inadequate error handling try { result = divide(x, y); } catch (error) { console.error("An error occurred"); } // Proper error handling try { result = divide(x, y); } catch (error) { if (error instanceof ZeroDivisionError) { console.error("Division by zero error:", error.message); } else if (error instanceof ValueError) { console.error("Invalid input:", error.message); } else { console.error("An unexpected error occurred:", error.message); } } ``` 8. **測試** 編寫單元測試來驗證程式碼的正確性。測試驅動開發 (TDD) 可以迫使您預先考慮邊緣情況和預期行為,從而幫助您編寫更清晰的程式碼。經過良好測試的程式碼更加可靠並且更容易重構。 ``` // Example using JavaScript and the Jest testing framework test('addition works correctly', () => { expect(add(2, 3)).toBe(5); expect(add(-1, 1)).toBe(0); expect(add(0, 0)).toBe(0); }); ``` 9. **重構** 定期重構你的程式碼。隨著需求的變化以及您對問題域的理解的加深,請相應地調整您的程式碼。隨著專案的發展,重構有助於保持乾淨的程式碼。必要時不要害怕重新存取和改進現有程式碼。 假設您有一個函數,可以計算購物車中具有固定折扣百分比的商品的總價: ``` function calculateTotalPrice(cartItems) { let totalPrice = 0; for (const item of cartItems) { totalPrice += item.price; } return totalPrice - (totalPrice * 0.1); // Apply a 10% discount } ``` 最初,此函數計算總價並應用 10% 的固定折扣。然而,隨著專案的發展,您意識到您需要支持可變折扣。為了重構程式碼使其更加靈活,可以引入折扣參數: ``` function calculateTotalPrice(cartItems, discountPercentage) { if (discountPercentage < 0 || discountPercentage > 100) { throw new Error("Discount percentage must be between 0 and 100."); } let totalPrice = 0; for (const item of cartItems) { totalPrice += item.price; } const discountAmount = (totalPrice * discountPercentage) / 100; return totalPrice - discountAmount; } ``` 在這段重構的程式碼中: * 我們在calculateTotalPrice函數中新增了discountPercentage參數,讓您在呼叫函數時指定折扣百分比。 * 我們對discountPercentage 參數進行驗證,以確保其落在有效範圍內(0 到100%)。如果不在範圍內,我們會拋出錯誤。 * 折扣計算現在基於提供的discountPercentage,使功能更加靈活,能夠適應不斷變化的需求。 通過這種方式重構程式碼,你提高了它的靈活性和可維護性。您可以輕鬆地調整該函數來處理不同的折扣場景,而無需重寫整個邏輯。這證明了隨著專案的發展和需求的變化定期進行程式碼重構的重要性。 10. **版本控制** 使用 Git 等版本控制系統來跟踪程式碼更改。這使您可以與團隊成員有效協作,在必要時恢復到以前的版本,並維護專案開發的清晰歷史記錄。 Git 提供了程式碼審查、分支和合併工具,促進協作和程式碼整潔。 ##結論 編寫乾淨的程式碼不僅僅是一套規則,更是一種心態和紀律。它是關於建立易於閱讀、維護和擴展的軟體。通過遵循這些最佳實踐和原則,您可以成為一名更熟練的開發人員,生成高質量的程式碼。投入時間仔細檢查其他工程師的程式碼庫,特別是在開源專案中,可能是一種啟發性的體驗。通過這種探索,您將獲得對不同編碼風格和策略的寶貴見解。這種接觸使您能夠提煉出編寫原始、可持續程式碼庫的精髓。請記住,乾淨的程式碼是一個持續的旅程,通過練習,它會成為第二天性,從而實現更高效、更愉快的軟體開發。

舉辦一場技術研討會,比想像中的還要辛苦很多!

發現一篇文章,國外的技術研討會舉辦者,分享了舉辦這類活動的辛苦&心得 很有意思,翻譯與大家分享一下。 原文出處:https://dev.to/k8adev/tech-events-are-not-as-cool-as-you-think-from-an-organizer-perspective-2b70 --- 大家好! 我的名字是**Keit**,又名[@k8dev](https://twitter.com/k8adev),我是巴西人,除了作為一名程式設計師之外,我已經組織技術活動8 年了。 我目前負責**幾項技術**活動,其中之一是著名的**FRONTIN Sampa**,這是**巴西**最大和最**傳統的**技術活動之一,對**開發社區**有很大影響。該活動每年**每年七月**在**聖保羅**市舉行,在那裡我們涵蓋了與前端開發和相關領域相關的各種主題。 然而,我們面臨著重大的**挑戰**,因為許多人**不認識**此類事件的**價值**,而且這不僅限於**開發人員**社區**。如果我必須**列出**作為**組織者**我的**主要挫敗感**,它們將如下: * **獲得贊助方面有困難**。 * **在活動前後保持參與度**。 * **管理合作夥伴關係**和社區。 **FRONTIN Sampa** 活動一直是**標誌性活動**,甚至在我於**2016** 接管該組織之前也是如此。但要注意的是,如果沒有足夠的**財力**,就**不可能提供高品質的環境**、**優秀的演講者**和**有能力的團隊**來舉辦這樣的活動尺寸。在地球的這一邊,**公司甚至表現出參與活動的興趣**,但他們希望作為贊助提供的**提供的贊助**價值往往**幾乎無法覆蓋他們的成本**活動當天他們自己的基礎設施**。 例如,上屆 FRONTIN Sampa 產生了大約 **100,000.00 雷亞爾(20,368.26 美元)的銷售額**,而**贊助額僅約為 12,000.00 雷亞爾(2,444.04 美元)**,不考慮以物易物。單獨的交流**往往與我們在活動期間和社交媒體上提供的內容不同**。即使銷量非常好,如果我們進行**快速計算**,很明顯**方程式不成立**。組織像 **FRONTIN Sampa** 這樣的活動不僅需要活動當天的資源,還需要活動前後所需的 **努力和資源**,而這些努力和資源通常未被考慮在內。在我為管理活動而成立的 FRONTIN 公司,我們有許多需求,例如: * 社群媒體管理 * 平面設計 * 銷售量 * 內容製作 * 行銷 * 訂閱 Mailchimp、Google Workspace、Figma、Canvas 等服務 * 事件管理 * 合作夥伴和贊助管理 * 公共關係 * 會計管理 等等等等。 **近一年的規劃和執行**,**每月的費用**是**不可能**在沒有贊助**或個人投資的情況下實現的。是的!有時,組織者**必須從自己的口袋裡掏錢**,因為,**這個等式再一次不成立**。我們談論的是大約 10,000.00 BRL 或更多,用於維持舉辦活動、監控社交媒體、管理社區、溝通和其他活動所需的結構和團隊。 我們正在討論今年生產 FRONTIN Sampa 的成本約為 **170,000.00 雷亞爾或 34,000 美元**! 另一方面,我們有一群**觀眾**,他們經常**抱怨票價**。我們**總是**嘗試提供極其**實惠的門票**——這些門票通常**不兼容**如此**高標準**的**活動**,特別是在經濟衰退期間。我們實施了**策略**,例如**提前售票**和**提供半價**門票,以使活動盡可能方便地進行。然而,經常會遇到一些人不認識組織活動背後的辛苦工作並公開提出非建設性的批評。 當談到**合作夥伴**、**社區**和科技**影響者**時,他們中的許多人更**對他們收到的優惠券和免費門票**感興趣,而不是實際幫助宣傳* * 活動並建立一個**環境**,讓人們可以**學習**、**分享**和**享受樂趣**。此外,管理這些合作夥伴關係通常很複雜,因為它涉及交換關係。再次,**缺乏財政**資源影響了我們對這些夥伴關係給予適當關注並追蹤雙方義務履行情況的能力。 今年**特別具有挑戰性**,**財政資源**少**,但要舉辦**許多**活動來滿足**社區的期望**。這太**困難**,以至於我**被迫**將幾乎**所有的錢**投入FRONTIN,以**確保**所有**事件發生**,即使我沒有籌集**足夠的資金**。這**讓我多次重新思考**是否**值得繼續製作這些活動**。 我**期待聽到其他**積極或自願參與**科技活動**的人的觀點**。我很樂意與您交談,也許會找到一些繼續前進的**動力**,甚至是公司加入我們的下一次活動。我相信我們的工作對於**創造一個人們可以相互聯繫的環境**至關重要,我真的不想放棄。 謝謝你!

Rust 新手文章:記憶體管理機制簡介

您是否想過當您**執行 Rust 程式**時**RAM**會發生什麼情況**?您編寫程式碼的**方式會如何干擾系統中的許多其他事物? 這篇文章將幫助您了解更多關於 *管理記憶體* 和 **RUST 如何運作** 的資訊。 原文出處:https://dev.to/canhassi/how-rust-memory-management-work-to-beginners-622 ## 1. Stack and Heap 在了解 rust 的作用之前,您必須先了解一些概念。一般來說,我們有兩種類型的內存,稱為:**堆疊和堆**。現在我們來介紹一下他們。 ### 1.1 記憶體:Stack 堆疊,顧名思義,**工作原理就像堆疊**,遵循**“後進先出”(LIFO)的原則。**也許分步驟解釋會更容易: *想像一下**一堆盤子**; *您放入的**第一道菜**是**最後取出的**; * 當**函數被呼叫**時,一塊記憶體被**「堆疊」在棧頂; * 當**函數結束**時,該區塊**“unstacked”**,釋放該記憶體。 通常,**編譯器**(在編譯時)知道將儲存在堆疊上的**值**,因為它知道需要儲存多少記憶體。此過程**自動**發生,所有值都會從記憶體中刪除。 下面是一個例子: ``` fn main() { let number = 12; // at this moment the variable has created println!("{}", number); // 12 } // When the owner (main function) goes out of scope, the value will be dropped ``` 在 Rust 中,我們只需使用「{}」即可建立一些作用域,這會在堆疊中加入具有有限生命週期的層。當您離開該特定*範圍*後,記憶體將被清除,您將遺失相關資訊。一個很好且簡單的例子是: ``` fn main() { { let number = 12; println!("{}", number); // 12 } println!("{}", number); // Cannot find value `number` in this scope } ``` ### 1.2 記憶體:Heap 簡而言之:**堆**記憶體是一個空閒記憶體空間,用於分配可能更改的資料。 想像一下,您需要在啟動程式後**儲存一些變數**,該變數在編譯時沒有已知的固定大小,因為它可能有大小變化或是記憶體中的直接分配。 如果上述可能性之一匹配,我們就知道我們有 **堆** 內存,而不是 **堆疊**。堆擁有更**靈活的記憶體**和更大的空間。看一看: ``` let number = Box::new(12); // alocate a integer in heap let name = String::from("Canhassi"); // alocate a String in heap ``` 在 Rust 中,我們有兩種字串「類型」:「&str」和「String」。 * **&str**:根據所寫的文字有固定的大小; * **字串**:具有可以增加、減少和刪除的大小。 ……這就是為什麼 `String` 儲存在堆上,而 `&str` 儲存在堆疊上。 釋放堆記憶體的一種方法是:當儲存堆上某些內容的**變數離開函數的作用域(到達函數末端)時,它將以相同的方式釋放作為堆疊。 好了,現在我們對這兩種記憶體類型有了一個清晰的認識,但是堆疊和堆在管理記憶體方面有什麼區別呢?讓我們看看這些差異吧! ## 2. 借用檢查器 借用檢查器是 Rust 編譯器的**部分**,它**檢查並確保**所有權、借用和生命週期**規則得到尊重**。 老實說:一開始我在理解它是如何運作的方面遇到了一些問題,我發現這在新的 Rustaceans 中很常見。但別擔心,我的朋友。我會用最好的方式教你。但首先,讓我們先來看看下面的程式碼: ``` fn main() { let name = String::from("Canhassi"); // Creating a string variable print_name(name); // calling the print_name function passing the variable println!("{}", name); // Error: name borrowed to print_name() } fn print_name(name: String) { println!("{}", name); // print "Canhassi" } ``` 如果您使用該程式碼執行編譯器,您將看到以下錯誤: ``` borrow of moved value: name ``` 當我們呼叫“print_name”函數時,“name”變數將被**移動到另一個作用域**,並且該作用域將成為它的**新所有者**。並且所有者的規則超出範圍將再次應用。借用檢查器確保**一旦所有權轉移**,原始變數**不能再用於**來存取該值。這發生在上面的程式碼中。 使用原始變數的另一種方法是使用類似的引用。 ``` fn main() { let name = String::from("Canhassi"); // Creating a string variable print_name(&name); // calling the print_name function passing the variable println!("{}", name); // print "Canhassi" } fn print_name(name: &String) { println!("{}", name); // print "Canhassi" } ``` PS:這些**借用檢查器的規則僅適用於**堆中指派的物件**。 ## 3. 錯誤預防 借用檢查器對於確保 Rust 記憶體安全而無需[垃圾收集器](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)) 至關重要。 在 C 和 C++ 等其他語言中,我們(作為開發人員)必須使用某些函數手動釋放記憶體。 C++ 以允許記憶體管理錯誤而聞名,包括[記憶體洩漏](https://en.wikipedia.org/wiki/Memory_leak)。 C++本身不會導致記憶體洩漏。相反,**C++ 為程式設計師提供了大量的靈活性**和控制力,如果使用不當,這種**自由可能會導致錯誤**。 一個著名的錯誤是**未定義的行為**,例如,想像一個函數傳回這樣的變數的引用 ``` fn main() { let number = foo(); // calling foo function } fn foo() -> &i32 { let number = 12; // creating a var number &number // try return a reference of var number } ``` 程式碼不起作用,因為 Rust 編譯器對記憶體管理有限制規則。我們不能回傳 var `number` 的引用,因為這個函數的作用域將會消失,而 var `number` 將會消失,所以 Rust 不會讓這種情況發生。在 C++ 中我們可以做到這一點,並且它允許臭名昭著的記憶體洩漏。 我認為知道 Rust 編譯器避免了這種類型的錯誤真是太酷了...如果這個主題對您來說是新的,我可以說內存洩漏可能會花費很多錢並且確實很難修復它,因為絕不只有一次內存洩漏。 其他範例是,**雙重釋放**,當您嘗試釋放相同物件兩次(例如在 C 程式碼中)時,就會發生這種情況。 ``` char* ptr = malloc(sizeof(char)); *ptr = 'a'; free(ptr); free(ptr); ``` 這個主題非常廣泛,當您使用其他語言時,很可能會產生類似的錯誤。但是,我會讓您自己進行研究,並確保在這篇文章的評論中告訴我更多! ## 4。結論 我寫這篇文章的目的是以更一般的方式展示記憶體管理如何與 Rust 配合使用。但我建議您閱讀《Rust 程式語言》一書的第 4 章( https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html )來獲得更完整的知識。在那裡您將獲得更多示例和更多關於此內容的解釋。 希望這篇文章有幫助! 🦀🦀