### 第1課 ── 基本的函數操作、onclick 事件 https://jsfiddle.net/j80d9gao/17/ --- ### 第2課 ── 基本的變數操作、從 html 取得內容 https://jsfiddle.net/09v5oadu/23/ --- ### 第3課 ── 修改 html 的內容 https://jsfiddle.net/2gnuj6wf/47/ --- ### 第4課 ── 基本的陣列操作 https://jsfiddle.net/49qzdj2c/140/ --- ### 第5課 ── 基本的 if/else 條件流程控制 https://jsfiddle.net/8gn7co2v/2/ --- ### 第6課 ── 認識資料型態與轉換 https://jsfiddle.net/Lqjstd6a/ --- ### 第7課 ── 認識巢狀結構 https://jsfiddle.net/cz07a8nu/13/ ---
可以對貼文、留言，按讚了 歡迎大家看到不錯的貼文、留言，多多按讚，給別人鼓勵 也歡迎大家多多在討論區發問、討論，這些發問＆回答，也都可以累積讚數 之後會開發「讚數的個人統計功能」，讓累積讚數，顯示在個人檔案
使用這些 github repo 成為更好的前端開發人員。 原文出處：https://dev.to/hy_piyush/7-github-repositories-that-every-front-end-developer-must-know-300l ## Clean Code JavaScript 一些能幫助您程式碼更簡潔的開發觀念。 GitHub 連結：https://github.com/ryanmcdermott/clean-code-javascript ## JavaScript Algorithms and Data Structure 用 JavaScript 實作的演算法和資料結構，有解釋和進一步閱讀的連結 包含許多流行演算法和資料結構的 JavaScript 範例。 每個演算法和資料結構都有自己單獨的 README，帶有相關的解釋和進一步閱讀的連結。 GitHub 連結：https://github.com/trekhleb/javascript-algorithms ## You Don’t Know JavaScript 這是一個關於 JavaScript 的系列叢書。這是一系列深入探討 JavaScript 語言核心機制的書籍。 GitHub 連結：https://github.com/getify/You-Dont-Know-JS ## NodeJS Best Practice 這個存儲庫是對 Node.js 最佳實踐的總結和管理。這將幫助許多開發人員獲得有關 NodeJS 後端開發的進階知識。 GitHub 連結：https://github.com/goldbergyoni/nodebestpractices ## Frontend Checklist 適用於現代網站和專業開發人員的完美前端清單。它基於前端開發人員多年的經驗，並加入了一些其他開源清單。 GitHub 連結：https://github.com/thedaviddias/Front-End-Checklist ## Free For Dev 對 DevOps 和基礎設施開發，具有免費方案的 SaaS、PaaS 和 IaaS 產品列表。 不過，此列表的內容只對基礎架構開發人員（系統管理員、DevOps 從業者等）有用。 GitHub 連結：https://github.com/jixserver/free-for-dev ## DSA in JavaScript 解釋和實作的資料結構和演算法。 GitHub 連結：https://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript
## 簡介 CSS 是任何網站設計的重要組成部分，但理解其中一些細微差別觀念可能不容易。其中最重要的觀念之一是 rem 和 em 之間的區別，以及為什麼/何時應該使用它們。 原文出處：https://dev.to/refine/rem-vs-em-everything-you-need-to-know-5342 --- ## 預備知識 本文希望讀者對 CSS 有紮實的掌握。雖然你不必成為 CSS 大神，但如果基本的 CSS 術語你都清楚，那會好讀很多。 ## CSS 中的 em 和 rem 單位 在尋找在 CSS 中設定長度的方法時，有太多方法了。 CSS 中指定長度的所有單位都屬於兩類。 絕對長度：顧名思義，就是絕對的；它們是固定的，不會對任何事物做出反應。這意味著無論發生什麼，它們的大小都是一樣的。絕對長度包括 cm、mm、in、px、pts 和 pc。 相對長度：是指定相對於另一個單位的長度的單位，即，它們根據其他指定單位或元素做出響應。包括 %、vmax、vmin、vh、vw、ch、ex，以及我們將要討論的單位 em 和 rem。 如果您想了解更多關於這些單位的訊息，可以現在先去查一查。現在讓我們看看這兩個單位。 ## 什麼是 CSS em 就像我上面說的，CSS 中的 em 單位是用於調整網頁元素大小的相對測量單位，主要是字體大小。因為是相對於父元素的，所以1em等於父元素中設置的font-size。 這意味著如果您將父 div 中的字體大小設置為 20px，並將子 div 中的字體大小設置為 2em，則子 div 中的字體大小將等於 40px。這是一個例子。 首先，讓我們編寫 HTML ``` <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> I'm parent div set to 20px <div class="child"> I'm the child div set to 2em, i.e 40px. </div> </div> </body> </html> ``` Next, the CSS. ``` .parent{ font-size: 20px; } .child{ font-size: 2em; } p { font-size: 1.5em; } ``` 那會給我們這個。  em 單位很有用，因為它允許您根據先前宣告的元素的字體大小調整頁面上元素的大小，這有助於建立一致的視覺層次結構。這對於建立易於視障用戶閱讀的可存取網站非常有用。 需要注意的是，如果不指定父元素的值，則以瀏覽器的預設值作為父元素。 ``` p { font-size: 1.5em; } ``` 在此範例中，字體大小屬性設置為 1.5em，這意味著如果沒有直接父元素，`<p>` 元素中的文本大小將是瀏覽器預設字體大小大小的 1.5 倍。 由於大多數瀏覽器根據螢幕大小縮放其預設字體大小，這使您可以建立靈活且響應迅速的佈局，以適應不同的螢幕和字體大小。 使用適當的 CSS 屬性，em 單位也可用於設置其他元素的大小，例如邊距、填充和邊框。 ## 什麼是 CSS rem 現在我們知道 em 是什麼，讓我們看看 rem。 rem 是 CSS 中另一個測量長度的單位，代表“root em”。由於我們知道一個 em 等於當前字體大小的數值，因此我們可以推斷出“根 em”指的是根元素的字體大小，通常是 `<html>` 元素。 很困惑嗎？讓我們進一步拆解它。 與 em 一樣，rem 從父元素繼承其大小，但 rem 查看的父元素不是它上面的 div 或部分，而是包圍它的第一個元素，即 html 元素。讓我們用前面的程式碼做一個例子。相同的 html 程式碼，只是多了一個 div。 ``` <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> I'm parent div set to 20px <div class="child"> I'm the child div set to 2em, i.e 40px. </div> <div class="child-2"> I'm the child div set to 2em, i.e 60px. </div> </div> </body> </html> ``` 接下來，我們將以下 CSS 程式碼加入到我們的 CSS 文件中。 ``` html{ font-size: 30px; } .child-2{ font-size: 2rem; } ``` 結果會是這樣。  如您所見，儘管 child-2 div 在另一個 div 中，但它會一直往上找到 html 元素以繼承其字體大小。 使用“rem”單位允許以更具可擴展性和靈活性的方式來調整頁面上的元素大小，因為如果您更改根元素的字體大小，所有使用“rem”單位調整大小的元素將自動更新以保持它們的相對大小尺寸。 ## em 和 rem 單位的區別 到目前為止，您已經知道 em 和 rem 之間的區別，但為了清楚起見，我想重申一下這兩個值之間的區別。 在 CSS 中，rem 單位僅相對於文檔的根元素，而 em 單位僅相對於目標元素的直接父元素。這意味著 em 大小繼承自父元素，而 rem 大小僅繼承自根元素。 ## 何時在 CSS 中使用 em 和 rem 單位 對字體大小、邊距和填充等全局值使用 rem 單位是一個好主意，特別是如果你想為整個文檔指定一個字體大小並讓它統一縮放而不是受字體影響父元素的大小。 em 更適合特定於特定元素及其子元素的值。這使您可以建立一致且靈活的佈局，以適應不同的螢幕尺寸和字體大小。 ## 在 CSS 中使用 em 和 rem 單位的潛在問題 em 和 rem 是目前指定長度時使用的最佳單位，但就像生活中的所有事物一樣，它們並不完美。以下是您在使用 em 和 rem 時可能會遇到的幾個問題： - **複雜的計算：**使用 em 和 rem 單位會導致複雜的計算，尤其是當涉及嵌套元素時。這會使準確預測和控制頁面上元素的大小變得困難。 - **繼承問題：** 因為 em 單位是相對於其父元素的字體大小的，所以很難理解和控制如何在頁面上繼承大小。這可能會導致意外結果，需要額外除錯才能解決。 - **性能問題：**在極少數情況下，使用 em 和 rem 單位會對性能產生負面影響，尤其是在與復雜計算結合使用或在頁面上過度使用時。 總的來說，雖然 em 和 rem 單位在某些情況下會有所幫助，但重要的是要仔細考慮它們的潛在缺點以及它們是否是您專案的最佳選擇。
想要在 2023 年的 **Web 開發** 旅程中一帆風順嗎？參考看看這些免費工具吧！ 原文出處：https://dev.to/ruppysuppy/7-free-tools-for-the-modern-web-developers-of-2023-4lhh ## 1. [Omatsuri](https://omatsuri.app/) 一個**開源 Web 應用程式**，有 **12 個令人難以置信的前端工具**，供日常開發使用。包含的工具有： 1. 三角形生成器 2. 顏色陰影生成器 3. 梯度產生器 4. 分頁器 5. SVG壓縮器 6. SVG → JSX 轉換器 7. base64編碼 8. 假資料生成器 9. 符號收錄 10. 假文字生成器 11. CSS 游標 12. 鍵盤事件程式碼  ## 2. [Coolers](https://coolors.co/) **Coolers** 是為您的網站生成 **調色板** 的最佳工具。  ## 3. [Keyframes](https://keyframes.app/) 就跟名字一樣，它是： > 基於瀏覽器的、適合手機的、可以讓 **CSS** 變得不那麼糟糕的工具。 它有幾個工具，例如**動畫**、**陰影**和**顏色生成器**。  ## 4. [Roadmap.sh](https://roadmap.sh/) **Roadmap**是一系列職涯路線圖，涵蓋了**前端**、**後端**、**區塊鏈**、**網路安全**等多個路徑。 他們也有**相關資源的連結**可供學習！  ## 5. [FreeCodeCamp](https://www.freecodecamp.org/) **FreeCodeCamp** 是一個**非營利組織**，由**互動式學習網路平台**、**線上社群論壇**、**聊天室**、**線上出版物**、 **本地組織**組成，旨在讓任何人都可以學習 Web 開發。  ## 6. [Postman](https://www.postman.com/) **Postman** 是一個用於建置和使用 **API** 的 **API 平台**。它是**後端工程師**工具庫中的必備工具，對**前端開發人員**也非常有用  ## 7. [CSS Layout](https://csslayout.io/) 它是**數百個元件**的集合，您可以將其複製貼上到您的專案中，並根據您的需要進行客製化！  --- **以上供您參考！**
很多朋友轉職寫程式，在補習班或者線上課程，告一段落之後，開始找工作之前，會整理作品集 關於作品集，簡單給大家一些建議 ## 作品集有用嗎？ 公司在徵人的時候，其實來應徵的人五花八門 滿多人看起來，根本不會寫程式，連最基本的小網頁或者小程式都寫不出來 連基本技能都沒有準備好，感覺是到處碰碰運氣、履歷亂誇大就到處丟。公司面試時，最怕遇到這種狀況 作品集，至少代表，你寫得出基本東西。很多人根本寫都不會寫，就去應徵了，作品集至少可以讓公司避免踩雷 話說回來，如果你的作品集，只是補習班的幾個分組專案，糊裡糊塗地完成了，就跟在學校敷衍交報告一樣，你對細節其實不了解，那這種作品集，當然幫助不大，對你的信心也沒有多少幫助 ## 要做什麼作品？ 所以該做什麼作品呢？ 最好做一些你真的需要的「應用程式」，寫起來才有動力、才好玩，內容也才扎實 簡單舉例，如果你在受訓的過程是這些： ### 前端工程師 做個待辦事項清單工具吧！按照自己的喜好設計，做完之後找地方上線 在找工作的這幾個星期，實際拿這個工具來做紀錄，投履歷時、面試時，很自然可以分享你的心得跟小熱情 對面試官來說，看到面試者有即戰力（即便是有一點點）、對自己的程式有熱情（即便只有一點點），都會加分不少 請參考 https://todomvc.com/ 這是各種前端工具寫的 todo list 應用程式，你還可以比較自己的程式碼，與社群所寫的差異 ### 後端工程師 我鼓勵後端的入行者，寫一個「個人專屬部落格」 這個部落格要有以下功能 - 首頁列出文章清單 - 能簡單單篇文章瀏覽 - 自己可以登入後台 - 在後台可以新增、編輯、刪除文章 有餘力的話，還可以加個留言功能 這種部落格，會實際做完資料的 CRUD 基本功能，還有簡易的註冊、登入、驗證 找地方把這個部落格上線，或者買網址、租主機，實際上線 在找工作的這幾個星期，實際拿這個部落格，來寫文章、技術筆記、經驗分享 面試官絕對會覺得你是積極的人、有備而來 （錄取之後就停止寫網誌的習慣也沒關係） ### 全端工程師 我鼓勵全端的入行者，寫一個「個人行事曆工具」並且是 single page application (SPA) 這個行事曆要有以下功能 - 有一個行事曆頁面 - 有個按鈕可以新增活動 - 點擊行事曆內的活動，可以編輯、刪除 - 有一個清單業面，可以用條列式顯示全部活動 - 全程使用 ajax，不能整個刷新頁面 這種行事曆，會實際做完資料的 CRUD 基本功能，還有基本的 SPA routing 在找工作的這幾個星期，實際拿這個行事曆，紀錄生活是像、活動 面試時分享，面試官絕對會覺得你是積極的人、是個即戰力 ## 結論 除此之外，做個人履歷表的網頁也不錯 可以搜尋 'Portfolio website examples' 看看各種漂亮設計 實際把履歷做成網頁，也可稍微證明自己能力 在工程師生涯，不斷地做自己的 side project 是一個有趣、進步的好習慣 甚至有一天，你做的某個 side project 大受歡迎，還可能變成一個獨立的小產品呢 有空可以逛逛 https://www.producthunt.com/ 看看大家都在做什麼 side project 或許模仿其中一些，做個簡易版本，你會學到很多的～！ --- 您有沒有什麼好的點子、推薦的 side project 點子給初心者呢？ 歡迎留言分享！
身邊很多朋友工作幾年之後，從非本科轉職寫程式 主要方法大概三種：報名實體課程、報名線上課程、買線上課程自學 ## 報名實體課程 資策會、程式補習班，都屬於此類 需要本人實際到教室，由老師上課 這種課程通常需要耗時數個月，費用會在新台幣十萬上下 好處是有同學一起、有同儕壓力、有問題可以當面問老師、厲害的老師可以現場掌握全班學習狀況 壞處是每個人學習速度不同，有人跟不上、有人覺得教太慢 這種學習法，需要碰運氣，如果遇到優秀的老師，學習氛圍、效果，都會非常好 但是，就我觀察課表，以「全端工程」為主打的課程，進度通常非常倉促，能真正消化的學生非常少數 多數人只是糊裡糊塗把功課、專案做完，畢業後其實還是很沒信心、一頭霧水 （只專注在特定領域開發的課程，狀況比較好一點） 主因是基礎知識還不夠熟，就開始大量學習工具用法 我建議這種狀況，不要對自己起太多懷疑，保持耐心，養成做紀錄的習慣 覺得一知半解的地方就把問題記錄一下，每天都整理出一些問題 整理出一張問題清單，找時間請教別人、或是上網慢慢研究 多數回答，聽完之後應該還是聽不懂，沒關係，先放著 有搞懂的問題就劃掉，一段時間之後，會更清楚程式設計整體觀念，也會更有信心 重點是要知道自己具體是哪些細節不了解、一知半解，才有補充＆複習＆研究的方向 ## 報名線上課程 坊間許多業者提供這類服務，會有大量教學影片，個人自己找時間看完即可 並且會幫大家分組、需要一起做專案、會有助教指導 好處是每個人可以自行抓節奏，並且費用便宜許多，通常不到實體課程四分之一 如果是組合式的課程商品，就更好了，可以先購買一些基礎課程，滿意才買更多 壞處是需要紀律，督促自己去學習，需要積極、主動一點 通常我是推薦朋友，去買這種課程，因為財務、時間風險，比實體課程小很多 真的找不到相關業者提供課程、有找到政府補助、有找到特別優秀的實體課程名師，才去找實體課程 ## 買線上課程自學 不分學期、沒有分組專案、沒有助教 基本上就是找一些影片自己來看 這種課程國外比較多，需要英文能力好 好處是費用非常便宜，通常幾百元～幾千元就有很不錯的內容 甚至有 freeCodeCamp 這種完全免費的課程 壞處是需要英文能力，並且很多只是小課程，不是完整的一套多課程規劃，會不確定自己的進度到哪了 如果有親戚朋友是業界軟體工程師，比較好，因為可以跟他請教、確認自身進度、以及確認自己求職條件如何 ## 結論 半路出家不容易，我鼓勵大家把學習想成是一個「逐漸清晰」的過程 看過電腦讀取大張高清圖片的樣子嗎？先是模模糊糊的馬賽克，接著一塊一塊慢慢變清晰，最後才是變成完整的美麗圖片 學習會有點類似這樣，一開始到處模模糊糊的沒關係，保持耐心，逐步提高各處的解析度即可 只要先有一整張模糊的圖片即可。不需要執著在圖片一個角落，覺得這塊不清楚，就不能往下走 更千萬不要因為圖片模糊，就覺得「我果然不適合寫程式，放棄好了」，這絕對是搞錯重點 以上，簡單建議分享，希望對你有幫助！ --- 您在坊間補習班的學習經驗如何呢？歡迎在留言處跟大家分享您的個人學習經驗！
我的自學開發之旅始於大約 15 年前，當時我還是個小孩。它慢慢從熱情變成了我的工作。 我成為了一名普通的開發人員、自由職業者。有時我因為興奮每天在電腦前瘋狂地呆上 20 個小時，有時我因為過度勞累和壓力而筋疲力盡。 這些經驗，讓我想分享幾點心得。 原文出處：https://dev.to/entrptaher/reflections-on-my-15-year-journey-from-novice-to-intermediate-developer-pje --- ## 您如何定義初級軟體工程師？ 有幾個跡象表明軟體工程師是初學者。其中包括： - 不熟悉核心編程概念和最佳實踐。 - 很難編寫乾淨、結構良好且高效的程式碼。 - 在沒有完全理解其工作原理的情況下，依賴從線上資源複製和貼上程式碼。 - 難以排除和除錯程式碼中的錯誤和問題。 - 對編程語言和工具的了解有限。 - 缺乏在實際專案或團隊環境中工作的經驗。 這些是軟體工程師可能是初學者的一些潛在跡象。重點是，初學者不一定是壞事——每個人都必須從某個地方開始，每個人都有不同程度的經驗和專業知識。 但是，如果你在軟體工程師身上發現這些跡象，則可能表示他們仍處於學習的早期階段，可能需要更多的指導和支持。 ##初學者應該知道的事情 以下是我想給剛開始學習如何編碼的人的一些提示： 1. **首先確保每個專案或任務都有可以實現的明確目標。** 這可以幫助您集中精力工作，避免被不重要的程式碼分心。 使用 Notion、ClickUp、Github Issue 等工具。 2. **找出最重要的任務和功能**並首先處理它們。 這可以幫助您在專案上取得進展並按時完成任務，同時仍然給您時間來嘗試新想法。 3. **向更有經驗的軟體工程師尋求回饋和幫助**。 這可以幫助您找出可能在不必要或無用的程式碼上花費太多時間的地方，並教您如何更有效地工作。 檢查 Github 問題、Stackoverflow、Dev.to、Facebook 群組。 4. 使用工具和方法更好地**追蹤您的時間和任務。** 這可以通過使用專案管理軟體、使用敏捷開發方法或遵循其他高效編程的最佳實踐來完成。 使用 DeskTime、TimeDoctor 等工具。 5. **經常休息**，不要不停地長時間工作。 這可以幫助您避免在工作中精疲力盡，並讓您的注意力集中在手頭的任務上。 番茄鐘是一個很好的方法。 6. **除非需要，否則不要重構**。 重寫或重構程式碼是提高程式碼易讀性、修復難易度或執行速度的好方法。但這可能會花費很多時間，而且並不是永遠必要的。 在開始一個大的重構專案之前，你應該仔細考慮它是否會帶來真正的好處。你不應該為了改變而改變。 7. **與其他軟體工程師一起工作**並與他們交談。 作為初學者，您可以從比您了解更多或經驗更多的其他軟體工程師那裡學到很多東西。 通過一起處理專案、共享想法和程式碼以及互相提供回饋和幫助，您可以更快地學習和成長為一名軟體工程師。 8. **使用版本控制**來管理你的程式碼。 版本控制軟件，如 Git，可讓您跟踪程式碼的更改，與其他人一起工作，並在需要時恢復到舊版本。 這可以幫助您組織、加快並確保您的工作安全。它還可以幫助您避免丟失重要程式碼或犯錯誤。 9. **將你的工作組合成一個作品集**，以展示給可能的雇主看。 當您剛開始作為一名軟體工程師時，可能很難找到您的第一份工作或專案。 建立您的作品集是脫穎而出並向潛在雇主或客戶炫耀您的技能的一種方式。 這可以包括已完成的專案、您的程式碼範例或展示您的技能和潛力的其他工作示例。 10. **不斷學習**關於編程的新事物並跟上最新的變化（與你的目標相關）。 編程是一個總是在變化的領域，所以總是有新的語言、框架、工具和方法需要學習。作為一名軟體工程師，您可以不斷進步，並通過保持好奇心和與時俱進，在競爭越來越激烈的領域保持領先地位。 11. **編寫乾淨易讀的程式碼。** 作為初學者軟體工程師，您可能只想專注於讓您的程式碼正常工作，而沒有考慮閱讀或修復程式碼的難易程度。但是編寫乾淨且易於閱讀的程式碼很重要，原因不止一個。 它可以使您的程式碼更易於理解和更改，從長遠來看可以節省您的時間和精力。它還可以使您的程式碼更易於查找和使用，這在與其他軟體工程師合作或將您的程式碼放入更大的系統時會很有幫助。 12. **寫很多測試。** 測試是開發過程的重要組成部分，它可以幫助您發現錯誤並修復它們。 通過編寫和執行測試，您可以確保您的程式碼按您希望的方式工作，並且您可以在問題變得更糟之前找到並修復任何問題。 這可以節省您的時間、精力和挫折感，並幫助您為用戶或客戶提供品質更高的程式碼。 13. 照顧好**您的身心。** 編程對您的思想和身體來說都很難。可能需要長時間集中註意力、解決問題以及與他人合作，這對您的身體和思想來說都是艱難的。 如果您想避免倦怠並保持良好的工作狀態，照顧好自己很重要。充足的睡眠、規律的鍛煉、良好的飲食和工作中的休息都是做到這一點的方法。 照顧好你的健康會讓你保持專注、充滿活力和積極性，讓你成為一個更好的軟體工程師。 14. **了解如何除錯**您的程式碼。 除錯是開發的一個重要部分，每個軟體工程師都需要知道如何去做。 通過學習查找和修復程式碼中的錯誤和錯誤，您可以使其更可靠、更快速，並且您不會將時間浪費在無法按您希望的方式工作的程式碼上。 您可以使用許多工具和方法來修復程式碼中的錯誤。如果你想成為更好的軟體工程師，你應該學習和練習這些技能。 15. **遵守編碼規則和最佳實踐**。 如果您剛開始成為一名軟體工程師，您可能不知道在您的語言或領域中編寫程式碼的規則和最佳實踐。 學習並遵循這些標準和最佳實踐非常重要，因為它們可以幫助您編寫更易於閱讀、維護和使用的程式碼。 它們還可以幫助您避免常見的錯誤和陷阱，並且可以使其他軟體工程師更容易理解和使用您的程式碼。 通過遵循編碼標準和最佳實踐，您可以提高程式碼質量並使其對您和其他人更有用。 16. **承擔困難的專案和問題**。 如果您剛開始成為一名軟體工程師，您可能會傾向於只從事小型或簡單的專案，這樣您就不會太忙或太沮喪。 但重要的是要推動自己並承擔更大、更艱鉅的專案，因為這是你作為一名軟體工程師學到最多和成長的方式。 通過解決難題和克服障礙，您可以提高自己的技能、獲得信心並建立一個您可以引以為豪的工作體系。 17. **積極主動，主動出擊。** 不要只是等待別人告訴你該怎麼做。尋找學習和成長的機會，迎接新的挑戰。 18. **Google 一切。** 了解如何使用 google、觀看視頻和教程、存取 stackoverflow 和 reddit。但切勿在不了解其工作原理的情況下複製程式碼塊。 另外，在詢問其他高級開發人員之前，給自己設定一個谷歌搜尋的時間限制。 ##初學者應該避免的事情 以下是新軟體工程師不應該做的一些事情： 1. **忽略編程領域的最新趨勢**或時尚。 編程世界瞬息萬變，總有新的語言、框架、工具和技術需要學習。 然而，並非所有這些發展都具有同等價值或相關性，追逐每一個新趨勢或時尚可能會浪費時間和精力。 相反，專注於編程的基本概念和原則，並學習與您的目標和專案最相關和最有用的工具和技術。 2. **忽略成為完美**軟體工程師的壓力。 作為初學者，很自然地會感到要做到完美、避免犯錯或達到更有經驗的軟體工程師的標準的壓力。 然而，完美是可望不可及的，更重要的是專注於學習和提高。 樂於犯錯，從中吸取教訓，並作為一名軟體工程師繼續成長和發展。 3. **忽略將自己與他人比較**的誘惑。 作為初學者，很容易將自己與其他可能比您有更多經驗、更多技能或更成功的軟體工程師進行比較。 然而，比較很少有用，而且可能會損害您的信心和動力。 相反，專注於你自己的目標和進步，並慶祝你自己的成就，無論它們看起來多麼微不足道。 4. **忽略那些告訴你你不夠好或者你做不到的聲音**。 作為一名初級軟體工程師，你可能會遇到很多聲音告訴你你不夠好，你沒有合適的技能或知識，或者你應該放棄。 這些聲音可以來自很多方面，包括你自己的疑惑，別人的期望，或者領域的挑戰。忽略這些聲音並相信自己和自己的能力很重要。 你有潛力成為一名成功的熟練軟體工程師，如果你願意付出努力和奉獻，你就可以實現你的目標。 5. **忽略讓你的解決方案過於復雜化的誘惑**。 作為初學者，您可能會試圖使您的解決方案過於復雜，加入不必要的功能或增強功能，或者試圖用您的程式碼打動別人。 然而，簡單直接的解決方案往往是最好的，而且它們比複雜精密的解決方案更有效、更易於維護和有效。 通過關注核心需求並避免不必要的複雜化，您可以編寫對自己和他人更有價值和有用的程式碼。 6. **忽略對失敗的恐懼。** 作為初學者，您可能害怕失敗、犯錯誤或達不到他人的期望。 這種恐懼會讓你退縮，阻止你冒險、探索新想法或挑戰自己。重要的是要忽略這種恐懼，並將失敗視為學習和成長的機會。 通過從錯誤和失敗中吸取教訓，您可以成為更好的軟體工程師，並且可以培養在該領域取得成功所必需的韌性和毅力。 --- 作為初學者，很難採納建議，即使建議的人是出於善意。但如果你能堅持下去，按照有經驗的人告訴你的去做，你就會變得比你想像的更快。所以不要害怕邁出這一步並嘗試新事物。
**舊的 React 文件幾乎沒什麼用，這大家都知道，因為它沒反映該框架的現代用法。在本文中，我們將探索它的新文件並討論它為何很棒。** 原文出處：https://dev.to/diogorodrigues/reacts-new-killer-documentation-focused-only-on-functional-components-jnk --- React Hooks 與 [2019 年初版本 16.8](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) 一起發布，迅速流行起來並在前端社區中得到廣泛採用。通過這個版本，使用基於類別的元件編寫的複雜性，被有狀態的功能元件所取代。雖然我們可以在文件中找到對這些新功能的很好解釋，但大多數範例都繼續使用類別。 現在，在發生革命性變化 3 年多之後，**React 發布了其文件的 BETA 版本，從其解釋中刪除了類別，專注於使用帶有互動範例的鉤子的現代開發方式。** > “一旦我們與現有的 React 文檔達到內容一致，我們的目標是將此網站切換為主要網站。舊的 React 網站將存檔在一個子域中，因此您仍然可以存取它。舊內容鏈接將重定向到存檔的子域，該子域將有關於過時內容的通知。” - [BETA React 文檔](https://beta.reactjs.org/) _P.S.重要的是，當我寫這篇文章時，新內容幾乎 100% 完成了。_ ## 你可以在新的 React 文檔中找到什麼 雖然這個 React BETA 文檔不是很廣泛，但我不會逐個主題地介紹它，我將在下面重點介紹它的一些主要優點。 ### Quick Start 真的是非常快速的開始 **對我來說，這是改善超多的部分，因為與舊版本不同，現在我們可以通過其文檔中的互動式程式碼範例來使用 React 程式碼。** 這不是很神奇嗎？ 一個完整的介紹，非常簡單，解釋清楚，並且不需要為現在開始學習的人設置任何專案。  ### 很好地解釋了使用 React Effects 的最佳方式 就個人而言，我認為**他們為解釋 Effects 所做的工作非常出色。**這確實是我研究了很多的東西，肯定會幫助我使用 React 開發更好的程式碼。 有一些詳盡的頁面展示了[如何停止將 Effects 視為生命週期掛鉤](https://beta.reactjs.org/learn/lifecycle-of-reactive-effects)，而是 [Effects 作為與外部系統的同步器](https://beta.reactjs.org/learn/synchronizing-with-effects)。發生這種混淆是因為我們習慣於將使用 useEffect 鉤子的功能組件與基於類別的元件生命週期進行比較，但這不再有意義了。 https://twitter.com/dan_abramov/status/1157250198659354624 **另一個令人驚嘆的內容是 [“你可能不需要 effect”](https://beta.reactjs.org/learn/you-might-not-need-an-effect) 主題，我們可以在其中了解如何刪除不必要的效果**通過許多用例和互動式程式碼示例。您可以在下面的影片中找到關於該主題的精彩摘要。 https://www.youtube.com/watch?v=bGzanfKVFeU&t=742s&ab_channel=BeJS ### 精通狀態管理 我知道這個標題聽起來太冒險了，但是這個 React BETA 文檔有很多內容是關於[如何更好地建置狀態，避免冗餘狀態相關的錯誤](https://beta.reactjs.org/learn/managing-state)，等等。 > “良好地建置狀態可以區分一個易於修改和除錯的元件，以及一個經常產生錯誤的組件。” - React 文檔 查看 [管理狀態部分](https://beta.reactjs.org/learn/managing-state) 以及 [Referencing Values with Refs](https://beta.reactjs.org/learn/referencing-values-with-refs) 主題以更好地理解 React 中狀態的使用。 ### 更多你可以在新的 React 文檔中找到的知識 我想強調的其他一些內容是： - [React API 參考](https://beta.reactjs.org/apis/react) 部分包含所有內容，以便更快地諮詢程式碼片段。 - “[聲明式 UI 與命令式 UI 相比如何](https://beta.reactjs.org/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative )”主題展示瞭如何更好地編寫聲明式 React 元件。 - “[Render and Commit](https://beta.reactjs.org/learn/render-and-commit)” 了解渲染 React 元件過程中的步驟。 - “[排隊一系列狀態更新](https://beta.reactjs.org/learn/queueing-a-series-of-state-updates)”主題將解釋為什麼有時它不起作用以及如何解決它. - “[通過自定義掛鉤重用邏輯](https://beta.reactjs.org/learn/reusing-logic-with-custom-hooks)”了解如何在元件之間共享邏輯。 ## 結論 **從基礎主題到進階主題，這些文檔涵蓋了您學習如何使用最好的現代 React 建立用戶界面所需的一切。**如果您是 React 世界的新手，本文檔肯定會對您有很大幫助互動式範例。對於經驗豐富的 React 開發人員，本文檔匯集了幾個重要的進階概念，這些概念一定會幫助您建立更好的 UI 元件。
向您介紹這個開發人員工具列表。它是一個開源專案，由社群整理。 讓我們開始吧！ 🚀 原文出處：https://dev.to/dostonnabotov/ultimate-tools-for-developers-2aj2 --- ## 程式碼編輯器和 IDE 💻 - [Visual Studio Code](https://code.visualstudio.com/) 作為免費的開源程式碼編輯器，Visual Studio Code 是開發人員的絕佳工具。它帶有許多功能和外掛，使其成為開發人員的絕佳選擇。 - [CodeSandbox](https://codesandbox.io/) 簡單來說，CodeSandbox 就是 Visual Studio Code 的在線版本。 - [Dev - Visual Studio Code](https://github.dev/) github.dev 基於網絡的編輯器是一種輕量級的編輯體驗，完全在您的瀏覽器中執行。 有兩種方法可以打開基於 Web 的編輯器 1. 在任何存儲庫或拉取請求上按 `.` 鍵 2. 將 URL 中的 .com 替換為 .dev。例如。 `https://github.dev/username/repo` - [CodePen](http://codepen.io/) CodePen 是網絡前端的遊樂場。這是一個試驗、測試和展示您的前端工作的地方。此外，您還可以從其他開發人員那裡找到許多靈感。 - [Replit](https://repl.it/) Replit 是一個簡單、強大且協作的在線 IDE。這是編碼、協作和託管專案的好地方。 - [StackBlitz](https://stackblitz.com/) 面向前端和全棧開發人員的 Web IDE。 - [TypeScript Playground](https://www.typescriptlang.org/play/) 想玩玩看 TypeScript 嗎？ TypeScript Playground 是一個適合你的地方。 ## 圖片 🖼 - [Unsplash](https://unsplash.com/) 為您的下一個專案輕鬆找到精美、高質量的照片。所有照片均可免費用於商業和個人用途。 - [Pexels](https://www.pexels.com/) Pexels 是免費庫存照片的重要來源。所有照片均可免費用於商業和個人用途。 - [Carbon](https://carbon.now.sh/) Carbon 是一個很棒的平台，可以建立和共享程式碼的精美圖像，允許您使用語法突出顯示、主題、字體等自定義圖像。 ## 顏色 🎨 - [Color Space](https://mycolor.space/) 再也不會浪費時間尋找完美的調色板！只需輸入顏色！並生成漂亮的調色板 - [Coolors](https://coolors.co/) 建立完美的調色板或從數千種美麗的配色方案中汲取靈感。 - [Color Wheel](https://www.canva.com/colors/color-wheel/) 想知道什麼顏色搭配起來好看嗎？ Canva 的色輪讓色彩組合變得簡單。 ## 排版 📝 - [Google Fonts](https://fonts.google.com/) Google Fonts 是一個包含免費授權字體系列的庫。只需選擇您想要的字體，將它們下載到您的計算機或使用提供的 CSS 或 HTML 鏈接將它們嵌入您的網頁。 - [Fontsource](https://fontsource.org/) 如果您不想從 CDN 獲取字體，則可以使用整齊打包的 NPM 包中的自託管開源字體。 - [Nerd Fonts](https://www.nerdfonts.com/) Nerd Fonts 使用大量字形（圖標）修補針對開發人員的字體。 ## 設計 🎨 - [Figma](https://www.figma.com/) 一個免費的線上協作界面設計工具和原型製作工具。 - [Pinterest](https://www.pinterest.com/) Pinterest 是一種視覺發現工具，可用於為您的所有專案和興趣尋找創意。 ## 文檔 📚 - [MDN 網絡文檔](https://developer.mozilla.org/en-US/) 學習Web開發的最佳平台。每當您對 HTML、CSS、JavaScript 或任何其他網絡技術有疑問時，請務必先查看 MDN。 - [W3Schools](https://www.w3schools.com/) 幾乎所有您能想到的程式語言的參考。 - [CSS 技巧](https://css-tricks.com/) 提供使用 CSS（層疊樣式表）的提示、技巧和技術的最佳平台之一。 ## 工具 🛠 等一會兒！工具中的工具？是的，你沒有聽錯。這裡有一些工具可以幫助您找到更多工具。 😃 - [Stack Overflow](https://stackoverflow.com/) Stack Overflow 是一個面向專業和狂熱工程師的問答網站。這是提出問題和獲得答案的好地方。 - [Micro Digital Tools](https://mdigi.tools/) 一組對開發人員有用的工具。 - [Small Dev Tools](https://smalldev.tools/) 一組對開發人員有用的工具。 - [Can I Use](https://caniuse.com/) Can I Use 提供了最新的瀏覽器支持表，以支持桌面和移動 Web 瀏覽器上的前端 Web 技術。 - [網站圖標生成器](https://favicon.io/) 您是否曾經為了替自己的網站建立網站圖標而苦惱？不同的尺寸，不同的格式，不同的平台。 從文本、圖像或從數百個表情符號中選擇快速生成您的網站圖標。 - [Font Awesome](https://fontawesome.com/) 免費和高級圖標庫。 - [OverAPI.com](https://overapi.com/) 以有組織的格式查找大量不同技術的備忘單。 - [Transform](https://transform.tools/) 多語言網絡轉換器。輕鬆將 HTML 轉換為 Pug、將 TypeScript 轉換為 JavaScript、將 Markdown 轉換為 HTML 等等... - [Frontend Tools](https://murtazajoo.github.io/tools/) 一個網站，您可以在其中找到具有更好用戶體驗的所有工具。 - [GitProtect](https://gitprotect.io/) 適用於所有 GitHub、GitLab、Bitbucket 和 Jira 資料的 DevOps 備份和災難恢復軟體。 - [Linear](https://linear.app/) 在團隊中組織問題和拉取請求的好工具。 ## 結論 🎉 希望您覺得這個列表有用。
如果您曾經瀏覽過 [git 手冊](https://git-scm.com/docs)（或執行 `man git`），那麼您會發現 git 指令比我們每天在用的多很多。很多指令非常強大，可以讓你的生活更輕鬆（有些比較小眾，但知道一下還是不錯）。 > 這篇文章整理了我最喜歡的 20 個冷門 git 功能，您可以使用來改善您的開發流程、給您的同事留下深刻印象、幫助您回答 git 面試問題，最重要的是 - 可以玩得很開心！ 原文出處：https://dev.to/lissy93/20-git-commands-you-probably-didnt-know-about-4j4o --- ## Git Web > 執行 [`git instaweb`](https://git-scm.com/docs/git-instaweb) 可以立即瀏覽 gitweb 中的工作存儲庫 Git 有一個內建的[基於網路可視化工具](https://git-scm.com/docs/gitweb) 可以瀏覽本地存儲庫，它允許您通過瀏覽器中的 GUI 查看和管理您的存儲庫。它包含許多有用的功能，包括： - 瀏覽和單步執行修訂並檢查差異、文件內容和元資料 - 可視化查看提交日誌、分支、目錄、文件歷史和附加資料 - 生成提交和存儲庫活動日誌的 RSS 或 Atom 提要 - 搜尋提交、文件、更改和差異 要打開它，只需從您的存儲庫中執行 `git instaweb`。您的瀏覽器應該會彈出並讀取 http://localhost:1234 。如果您沒有安裝 Lighttpd，您可以使用“-d”標誌指定一個備用 Web 伺服器。其他選項可以通過標誌配置（例如 `-p` 用於端口，`-b` 用於打開瀏覽器等），或在 git 配置中的 `[instaweb]` 塊下配置。 還有 `git gui` 命令，它可以打開一個基於 GUI 的 git 應用程式  --- ## Git Notes > 使用 [`git notes`](https://git-scm.com/docs/git-notes) 向提交加入額外訊息 有時您需要將其他資料附加到 git 提交（除了更改、訊息、日期時間和作者訊息之外）。 註釋存儲在 .git/refs/notes 中，由於它與提交對像資料是分開的，因此您可以隨時修改與提交關聯的註釋，而無需更改 SHA-1 哈希。 您可以使用 `git log`、使用大多數 git GUI 應用程式或使用 `git notes show` 命令查看筆記。一些 git 主機還在提交視圖中顯示註釋（儘管 [GH 不再顯示註釋](https://github.blog/2010-08-25-git-notes-display/)）。 --- ## Git Bisect > 使用 [`git bisect`](https://git-scm.com/docs/git-bisect) 你可以使用二進制搜尋找到引入錯誤的提交 這是最強大又好用的 git 命令之一 - bisect 在除錯時絕對是救命稻草。開始對分後，它會為您檢查提交，然後您告訴它提交是“好”（沒有錯誤）還是“壞”（引入錯誤），這可以讓您縮小最早提交的錯誤。 請執行 `git bisect start`，然後使用 `git bisect good <commit-hash>` 向其傳遞一個已知的良好提交，並使用 `git bisect bad <optional-hash>` 傳遞一個已知的錯誤提交（預設為當前）。然後它會檢查好提交和壞提交之間的提交，然後你用 `git bisect good` 或 `git bisect bad` 指定錯誤存在與否。然後它會重複這個過程，在好與壞的中心檢查一個提交，一直到你找到引入錯誤的確切提交。隨時使用 `git bisect reset` 取消。 bisect 命令還有更多功能，包括回放、查看提交、跳過，因此下次除錯時值得查看文檔。 --- ## Git Grep > 使用 [`git grep`](https://git-scm.com/docs/git-grep) 在您的存儲庫中搜尋程式碼、文件、提交或任何其他內容 有沒有發現自己需要在 git 專案中的任何地方搜尋字串？使用 git grep，您可以輕鬆地在整個專案中和跨分支搜尋任何字串或 RegEx（例如更強大的 <kbd>Ctrl</kbd> + <kbd>F</kbd>！）。 `git grep <regexp> <ref>` 它包括大量 [選項](https://git-scm.com/docs/git-grep#_options) 來縮小搜尋範圍，或指定結果格式。例如，使用 `-l` 僅返回文件名，`-c` 指定每個文件返回的匹配數，`-e` 排除匹配條件的結果，`--and` 指定多個條件，` -n` 以行號搜尋。 由於 git grep 與正則表達式兼容，因此您可以使用搜尋的字串獲得更多進階訊息。 您還可以使用它來指定文件擴展名，例如 `git grep 'console.log' *.js`，它將顯示 JavaScript 文件中的所有 console.logs 第二個參數是一個 ref，可以是分支名稱、提交、提交範圍或其他任何內容。例如。 `git grep "foo" HEAD~1` 將搜尋之前的提交。 --- ## Git Archive > 使用 [`git archive`](https://git-scm.com/docs/git-archive) 將整個 repo 合併到一個文件中 共享或備份存儲庫時，通常首選將其存儲為單個文件。使用 git archive 將包括所有 repo 歷史記錄，因此可以輕鬆將其提取回其原始形式。該命令還包括許多附加選項，因此您可以準確自定義存檔中包含和不包含的文件。 ``` git archive --format=tar --output=./my-archive HEAD ``` --- ## Git Submodules > 使用 [`git submodule`](https://git-scm.com/docs/git-submodule) 將任何其他存儲庫拉入您的存儲庫 在 git 中，[submodules](https://git-scm.com/docs/gitsubmodules) 讓您可以將一個存儲庫掛載到另一個存儲庫中，通常用於核心依賴項或將組件拆分到單獨的存儲庫中。有關詳細訊息，請參閱[這篇文章](https://notes.aliciasykes.com/17996/quick-tip-git-submodules)。 執行以下命令會將模塊拉到指定位置，並建立一個 .gitmodules 文件，以便在複製 repo 時始終下載它。複製 repo 時使用 `--recursive` 標誌來包含子模塊。 ``` git submodule add https://github.com/<user>/<repo> <path/to/save/at> ``` 還有 [`git subtree`](https://www.atlassian.com/git/tutorials/git-subtree)，它做類似的事情，但不需要元資料文件。 --- ## Git Bug Report > 使用 [`git bugreport`](https://git-scm.com/docs/git-bugreport) 編寫錯誤票，包括 git 和系統訊息 此命令將捕獲系統訊息，然後打開一個標準錯誤模板（重現步驟、實際 + 預期輸出等）。完成的文件應該是一個非常完整的錯誤報告，包含所有必要的訊息。 如果您是開源包的維護者並要求用戶（開發人員）提出錯誤報告，這將非常方便，因為它確保包含所有必要的資料。 如果您向核心 git 系統提交錯誤報告，您還可以執行 [`git diagnostic`](https://git-scm.com/docs/git-diagnose) 命令，然後提出您的問題 [這裡](https://github.com/git/git)。 --- ## Git Fsck > 使用 [`git fsck`](https://git-scm.com/docs/git-fsck) 檢查所有物件，或恢復無法存取的物件 雖然不常需要，但有時您可能必須驗證 git 存儲的物件。這就是 fsck（或文件系統檢查）發揮作用的地方，它測試對像資料庫並驗證所有物件的 SHA-1 ID 及其建立的連接。 它還可以與 `--unreachable` 標誌一起使用，以查找不再可以從任何命名引用存取的物件（因為與其他命令不同，它包括 `.git/objects` 中的所有內容）。 --- ## Git Stripspace > 使用 [`git stripspace`](https://git-scm.com/docs/git-stripspace) 格式化給定文件中的空格 最佳做法是避免在行尾尾隨空格，避免有多個連續的空行，避免輸入的開頭和結尾出現空行，並以新行結束每個文件。有很多特定於語言的工具可以自動為您執行此操作（例如 prettier），但 Git 也內置了此功能。 它用於元資料（提交訊息、標籤、分支描述等），但如果您將文件通過管道傳輸給它，然後將響應通過管道傳輸回文件，它也可以工作。例如。 `cat ./path-to-file.txt | git stripspace` 或 `git stripspace < dirty-file.txt > clean-file.txt` 您還可以使用它來刪除註釋（使用 `--strip-comments`），甚至註釋掉行（使用 `--comment-lines`）。 --- ## Git Diff > 使用 [`git diff`](https://git-scm.com/docs/git-diff) 你可以比較 2 組程式碼之間的差異 您可能知道您可以執行 `git diff` 來顯示自上次提交以來的所有更改，或者使用 `git diff <commit-sha>` 來比較 2 次提交或 1 次提交到 HEAD。但是您可以使用 diff 命令做更多的事情。 您還可以使用它來比較任意兩個任意文件，使用 `diff file-1.txt file-2.txt`（不再存取 [diffchecker.com](https://www.diffchecker.com/compare/)！ ) 或者使用 `git diff branch1..branch2` 相互比較 2 個分支或引用 請注意，雙點 (`..`) 與空格相同，表示 diff 輸入應該是分支的尖端，但您也可以使用三點 (`...`) 來轉換第一個參數進入兩個差異輸入之間共享的共同祖先提交的引用 - 非常有用！如果只想跨分支比較單個文件，只需將文件名作為第三個參數傳遞。 您可能希望查看在給定日期範圍內所做的所有更改，為此使用 `git diff HEAD@{7.day.ago} HEAD@{0}`（上週），同樣可以將其與文件名、分支名稱、特定提交或任何其他參考。 還有 [`git range-diff`](https://www.git-scm.com/docs/git-range-diff) 命令，它提供了一個用於比較提交範圍的簡單界面。 git diff 工具還有更多功能（以及使用您自己的差異檢查器的選項），因此我建議查看 [文檔](https://git-scm.com/docs/git-diff#_description) . --- ## Git Hooks > 使用 [`hooks`](https://git-scm.com/docs/githooks) 在給定的 get 操作發生時執行命令或執行腳本 Hooks 可以讓你自動化幾乎所有的事情。例如：確保滿足標準（提交訊息、分支名稱、補丁大小）、程式碼質量（測試、lint）、將附加訊息附加到提交（用戶、設備、票證 ID）、呼叫 webhook 來記錄事件或執行管道等 對於大多數 git 事件，如 commit, rebase, merge, push, update, applypatch 等，都有前後 [hooks available](https://git-scm.com/docs/githooks)。 鉤子存儲在 `.git/hooks` 中（除非您使用 `git config core.hooksPath` 在其他地方配置它們），並且可以使用 [`git hook`](https://git-scm.com/docs) 進行測試/git-hook) 命令。由於它們只是 shell 文件，因此可用於執行任何命令。 掛鉤不會推送到遠程存儲庫，因此要在您的團隊中共享和管理它們，您需要使用 [掛鉤管理器](https://github.com/aitemr/awesome-git-hooks#tools) ，例如 [lefthook](https://github.com/evilmartians/lefthook) 或 [husky](https://github.com/typicode/husky)。還有幾個[3rd-party tools](https://githooks.com/#projects)，這使得管理鉤子更容易，我推薦[overcommit](https://github.com/sds/overcommit)。 請記住，掛鉤總是可以跳過（使用 `--no-verify` 標誌），所以永遠不要純粹依賴掛鉤，尤其是對於任何與安全相關的事情。 --- ## Git Blame > 使用 [`git blame`](https://git-scm.com/docs/git-blame) 顯示特定修訂版和行的作者訊息 一個經典的，快速找出誰寫了特定程式碼行（也就是你的哪個同事應該為這個錯誤負責！）。但它也有助於確定在哪個時間點發生了某些更改並檢查該提交和關聯的元資料。 例如，要查看 index.rs 第 400 到 420 行的作者和提交訊息，您可以執行： ``` git blame -L 400,420 index.rs ``` --- ## Git LFS > 使用 [`git lfs`](https://git-lfs.github.com/) 存儲大文件，以免拖慢您的存儲庫 您的專案通常會包含較大的文件（例如資料庫、二進制資產、檔案或媒體文件），這會減慢 git 工作流程並使使用限制達到最大。這就是 [大型文件存儲](https://git-lfs.github.com/) 的用武之地 - 它使您能夠將這些大型資產存儲在其他地方，同時使它們可以通過 git 進行跟踪並保持相同的存取控制/權限。 LFS 的工作原理是將這些較大的文件替換為在 git 中跟踪的文本指針。 要使用它，只需執行 `git lfs track <file glob>`，這將更新您的 `.gitattributes` 文件。您可以通過擴展名（例如“*.psd”）、目錄或單獨指定文件。執行 git lfs ls-files 以查看跟踪的 LFS 文件列表。 --- ## Git GC > 使用 [`git gc`](https://git-scm.com/docs/git-gc) 優化您的存儲庫 隨著時間的推移，git repos 會積累各種類型的垃圾，這些垃圾會佔用磁盤空間並減慢操作速度。這就是內置垃圾收集器的用武之地。執行 `git gc` 將刪除孤立的和不可存取的提交（使用 [`git prune`](https://git-scm.com/docs/git-prune)），壓縮文件修訂和存儲的 git 物件，以及一些其他一般的內務管理任務，如打包引用、修剪引用日誌、尊重元資料或陳舊的工作樹和更新索引。 加入 `--aggressive` 標誌將 [積極優化](https://git-scm.com/docs/git-gc#_aggressive) 存儲庫，丟棄任何現有的增量並重新計算它們，這需要更長的時間執行但如果你有一個大型存儲庫可能需要。 --- ## Git Show > 使用 [`git show`](https://git-scm.com/docs/git-show) 輕鬆檢查任何 git 物件 以易於閱讀的形式輸出物件（blob、樹、標籤或提交）。要使用，只需執行 `git show <object>`。您可能還想附加 `--pretty` 標誌，以獲得更清晰的輸出，但還有許多其他選項可用於自定義輸出（使用 `--format`），因此此命令對於準確顯示非常強大你需要什麼。 這非常有用的一個實例是在另一個分支中預覽文件，而無需切換分支。只需執行 `git show branch:file` --- ## Git Describe > 使用 [`git describe`](https://git-scm.com/docs/git-describe) 查找可從提交中存取的最新標記，並為其指定一個人類可讀的名稱 執行 `git describe`，您將看到一個人類可讀的字串，該字串由最後一個標籤名稱與當前提交組合而成，以生成一個字串。您還可以將特定標籤傳遞給它， 請注意，您必須已建立標籤才能使其正常工作，除非您附加了 `--all` 標誌。默認情況下，Git describe 也只會使用帶註釋的標籤，因此您必須指定 `--tags` 標誌以使其也使用輕量級標籤。 --- ## Git Tag > 使用 [`git tag`](https://git-scm.com/docs/git-tag) 在你的 repo 歷史中標記一個特定點 能夠[標記](https://git-scm.com/book/en/v2/Git-Basics-Tagging) 存儲庫歷史記錄中最常用於表示發布版本的特定重要點通常很有用。建立標籤就像 `git tag <tagname>` 一樣簡單，或者您可以使用 `git tag -a v4.2.0 <commit sha>` 標記歷史提交。與提交一樣，您可以使用“-m”在標籤旁邊包含一條訊息。 不要忘記使用 `git push origin <tagname>` 將您的標籤推送到遠程。 要列出所有標籤，只需執行 `git tag`，並可選擇使用 `-l` 進行通配符搜尋。 然後，您將能夠使用 `git checkout <tagname>` 檢出特定標籤 --- ## Git Reflog > 使用 [`git reflog`](https://git-scm.com/docs/git-reflog) 列出對您的存儲庫所做的所有更新 Git 使用稱為參考日誌或“reflogs”的機制跟踪分支尖端的更新。跟踪各種事件，包括：克隆、拉取、推送、提交、檢出和合併。能夠找到事件引用通常很有用，因為許多命令都接受引用作為參數。只需執行 `git reflog` 即可查看 `HEAD` 上的最近事件。 reflog 真正有用的一件事是恢復丟失的提交。 Git 永遠不會真正丟失任何東西，即使是在重寫歷史時（比如變基或提交修改）。 Reflog 允許您返回提交，即使它們沒有被任何分支或標記引用。 默認情況下，reflog 使用 `HEAD`（您當前的分支），但您可以在任何 ref 上執行 reflog。例如 `git reflog show <branch name>`，或者使用 `git reflog stash` 查看隱藏的更改。或者使用 `git reflog show --all` 顯示所有引用 --- ## Git Log > 使用 [`git log`](https://git-scm.com/docs/git-log) 查看提交列表 您可能已經熟悉執行 `git log` 來查看當前分支上最近提交的列表。但是您可以使用 git log 做更多的事情。 使用 `git log --graph --decorate --oneline` 將顯示一個漂亮整潔的提交圖以及 ref 指針。  您還經常需要能夠根據各種參數過濾日誌，其中最有用的是： - `git log --search="<anything>"` - 搜尋特定程式碼更改的日誌 - `git log --author="<pattern>"` - 只顯示特定作者的日誌 - `git log --grep="<pattern>"` - 使用搜尋詞或正則表達式過濾日誌 - `git log <since>..<until>` - 顯示兩個引用之間的所有提交 - `git log -- <file>` - 顯示僅對特定文件進行的所有提交 或者，只需執行 `git shortlog` 以獲得匯總的提交列表。 --- ## Git Cherry Pick > 使用 [`git cherry-pick`](https://git-scm.com/docs/git-cherry-pick) 通過引用選擇指定的提交並將它們附加到工作 HEAD 有時你需要從其他地方拉一個特定的提交到你當前的分支。這對於應用熱修復、撤消更改、恢復丟失的提交以及在某些團隊協作設置中非常有用。請注意，通常傳統的合併是更好的做法，因為挑選提交會導致日誌中出現重複提交。 用法很簡單，只需執行 `git cherry-pick <commit-hash>`。這會將指定的提交拉入當前分支。 --- ## Git Switch > 使用 [`git switch`](https://git-scm.com/docs/git-switch) 在分支之間移動是我們經常做的事情，`switch` 命令就像是`git checkout` 的簡化版本，它可以用來建立和在分支之間導航，但不像 checkout 在分支之間移動時不會復制修改的文件. 類似於 `checkout -b`，使用 switch 命令你可以附加 `-c` 標誌來建立一個新分支，然後直接跳入其中，例如`git switch -c <新分支>`。執行 `git switch -` 將放棄您所做的任何實驗性更改，並返回到您之前的分支。 --- ## Git Standup > 使用 [`git standup`](https://github.com/kamranahmedse/git-standup) 回憶你在最後一個工作日做了什麼，基於 git 提交 我把它放在最後，因為它不包含在大多數 git 客戶端中，但是您可以使用系統包管理器[輕鬆安裝](https://github.com/kamranahmedse/git-standup#install) ，使用 1 行 curl 腳本，或從源程式碼建置。 如果您的老闆要求您每天站立一次，以更新昨天的工作，但您永遠記不起自己到底做了什麼——這個適合您！它將顯示一個格式良好的列表，列出在給定時間範圍內完成的所有事情。用法很簡單，只需執行 `git standup`，或使用 [這些選項](https://github.com/kamranahmedse/git-standup#options) 指定應顯示哪些資料（作者、時間範圍、分支機構等）。 --- ## 結論 希望對您有幫助！
為您的開源專案提供良好的文檔是一項重要（且經常被忽視）的功能，可以促進採用並展示您的軟體的全部潛力。 不幸的是，文檔的增長速度通常比程式碼慢得多，主要是因為一些看起來相當簡單的實現，會產生大量可能的用例和變化。不可能涵蓋所有可能的場景，這就是為什麼技術作家的首要工作是確定範圍和確定優先級。關注基本知識非常重要，必須首先記錄以支持最常見的用例。 在這篇文章，我將分享一些技巧，為您的專案打造一個好的 README 文件。 原文出處：https://dev.to/erikaheidi/documentation-101-creating-a-good-readme-for-your-software-project-cf8 ## README 檔案 專案的 README 文件通常是用戶與您的專案的第一次接觸，因為這是他們在訪問您的專案時首先看到的內容。這就是為什麼優先考慮將好的 README 作為專案文檔的起點很重要。 自然地，不同的專案在 README 中有不同的東西要展示，但這些技巧應該作為大多數軟體專案的良好起點。 ## 1. 少即是多 你可能想把所有東西都放在你的 README 中，比如如何安裝和使用項目，如何部署，如何調試......更詳細地涵蓋這些主題的更完整文檔的鏈接。 當您開始時，只有一個 README 就可以了。很長的 README 沒有吸引力，因為沒有目錄或菜單可供導航，因此更難找到訊息，這最終不利於良好的用戶體驗。鏈接到相關資源的較短的自述文件使專案看起來更有條理且不那麼複雜。 如果我不想為這個專案創建一個專門的文檔網站怎麼辦？那麼，在這種情況下，您可以考慮在根目錄中創建一個 `docs` 文件夾，您可以在其中保存額外的 markdown 文檔，這些文檔可以直接從您的代碼託管平台（假設是 GitHub）瀏覽。 ## 2. 將 README 拆分為其他文檔 對於存儲庫中的文檔，您可以在應用程式的根目錄中創建一個“/docs”目錄，並使用“/docs/README.md”文件作為文檔的入口點或索引。 此文件夾的內容大概就像： - installation.md - 詳細顯示如何安裝項目的文檔。 - usage.md - 項目使用情況和主要命令的更詳細視圖。 - advanced.md - 包含一些進階使用選項和用例的文檔。 這些只是一些可以作為起點的想法。如果您覺得需要創建一個包含子文件夾的更複雜的結構，您應該認真考慮為您的項目創建一個專門的文檔網站（我們將在本系列的後續文章中介紹）。 ## 3. README 文件要點 以下是您的 README 文件中絕對應該包含的一些內容： - 項目的大致概述，包括編寫它的語言、它的作用、它為什麼有用； - 安裝要求； - 安裝文檔的鏈接； - 使用概述，讓用戶簡要了解如何執行它； - 故障排除或測試提示（可以是指向單獨文檔的鏈接）； - 連接到其他資源以了解更多訊息。 理想情況下，這些應該是簡短的說明，可在必要時鏈接到更全面的文檔。 根據項目的規模和目標，您應該考慮將其他內容放在那裡： - 指向 CONTRIBUTING.md 文檔的鏈接，其中包含有關用戶如何為您的專案做出貢獻的詳細訊息 - 指向包含項目行為準則的 CODE_OF_CONDUCT.md 文檔的鏈接。 如果您的項目託管在 GitHub 上，這些將顯著顯示在右側欄的項目頁面中，就在“關於”部分的正下方。 ### 示例結構 以下是 markdown 的一般結構，您可以將其用作構建專案自述文件的基礎： ``` # Project Name A paragraph containing a high-level description of the project, main features and remarks. ## Requirements Here you should give a general idea of what a user will need in order to use your library or application. List requirements and then link to another resource with detailed installation or setup instructions. - Requirement one - Another requirement Check the [installation notes]() for more details on how to install the project. ## Usage Include here a few examples of commands you can run and what they do. Finally link out to a resource to learn more (next paragraph). For more details, check the [getting started guide](). ## Useful Resources Include here any other links that are relevant for the project, such as more docs, tutorials, and demos. ``` ## 4. 使用徽章 您可以使用徽章通過自動從專案中提取的快速訊息來豐富您的 README，例如最新構建的狀態、最新的穩定版本、專案許可證等。 有不同的服務可以為開源專案提供徽章。正如@mohsin 在這篇文章的評論部分所指出的，您可以直接從 GitHub Actions 中提取徽章，方法是轉到您的工作流程頁面，單擊右上角顯示的三個點，然後從中選擇“創建狀態徽章”菜單：  這將向您顯示一個帶有降價代碼的對話框，您可以將其複製並貼上到您的 README 文件中。 另一個不錯的選擇是使用網站 [Shields.io](https://shields.io/)，它提供了幾種不同的徽章，您可以在您的開源項目中免費使用。 例如，這是顯示最新版本 [yamldocs](https://github.com/erikaheidi/yamldocs) 的圖像 URL： ``` https://img.shields.io/github/v/release/erikaheidi/yamldocs?sort=semver&style=for-the-badge ``` 這會生成以下徽章，顯示最新版本：  這是帶有多個徽章的 README 示例：  ## 結論 文檔是任何軟體專案的重要組成部分，應該從一開始就認真對待。最好的開始方式是創建一個好的自述文件，向用戶顯示基本信息，而不是用他們可能不需要的內容來淹沒他們，以便開始使用您的專案。
> 為什麼有些 JavaScript 工程師沒在用 TypeScript 呢？原因有哪些？ 我在推特問大家：為什麼你還沒用 TypeScript？  這篇文章簡單整理大家的答案。 原文出處：https://dev.to/codewithvoid/ive-got-99-problems-but-learning-typescript-aint-one-o70 讓我們開始吧。 ## 先征服 JavaScript 👨🏫️ 很多新手和初學者給出了“我還在學習 JS”的原因。 可以理解，他們現在不想承擔超過他們可以吸收的東西。 他們中的大多數人有興趣在未來嘗試一下，而有些人則在尋求指導，看看是否應該這樣做。 ## 純 JavaScript 就很夠用 👌 已經在使用 JS 的開發人員有一個問題 → “為什麼需要？”。 他們不打算遷移過去，因為有一個用 JavaScript 編寫的大型程式庫、易於調試，或者僅僅是因為他們對 JS 感到滿意，因為它可以完成工作。 他們的座右銘是：“如果夠用，就不要碰它”。 ## 對不起，晚點再考慮🕒 一些有經驗的 JS 開發人員已經計劃學習 TypeScript，但認為合適的時機還沒有到來。 與不願意遷移的開發人員不同，這些開發人員看到了 TypeScript 的價值。只是他們還沒有找到合適的專案，這證明了學習曲線的確存在。 此外，他們希望工具（如支持在瀏覽器中本地運行 TS 程式碼）在未來得到改進。 ## 要看情況使用🧐 一些開發人員花時間學習了 TypeScript，但並沒有在每個專案中都使用。 根據他們的說法，主要原因是： - 需要跟團隊一起 - 應用程式已上線 - 程式庫太龐大 他們說“對於個人專案和簡單的應用程序，TypeScript 是一種矯枉過正”。 ## ECMA 即將到來🏁 最後，一些回應是關於 ECMA 6 已經支持足夠的現代性，可在 JS 中編寫乾淨的代碼。 這些開發人員建議，如果你足夠了解 JavaScript 並使用圍繞它構建的工具，你就不需要 TypeScript。 此外，他們希望 TypeScript 中的有用功能最終會包含在原生 JavaScript 中，所以為什麼要費心研究 2 個學習曲線。 ## 總結📝 您對 TypeScript 的心得是什麼？歡迎在留言處分享。
在 Web 開發世界中，有時感覺就像每天都有新的前端框架問世！大多數來去匆匆，但有一件事是肯定的：Svelte 將繼續存在。 不過，這並不意味著您應該放下一切並在今天學習！追逐最新潮流會讓您分心和不知所措。 這篇文章將一勞永逸地回答：**我應該學習 React 還是 Svelte？**。 您將看到一些程式碼範例，這些範例解釋了為什麼 React 開發人員會為 Svelte 瘋狂，但我們也必須實際一點。 React 已經存在了很長時間。有更多的套件、支援、職缺。 Svelte 還能取代 React 嗎？讓我們找出答案！ - 原文出處：https://dev.to/mikehtmlallthethings/svelte-vs-react-which-framework-to-learn-in-2023-50gf --- * 📍 什麼是 React？ * 📍 什麼是 Svelte？ * 📍 React 和 Svelte 的 5 個區別 * Svelte 的捆綁包尺寸更小 * Svelte 更容易學習 * Svelte 使用純 HTML、CSS 和 JavaScript 進行編譯 * React 有更多的套件 * React 有 React Native * 📍 React 是庫還是框架？ * 📍逐行比較 React 和 Svelte 專案 * 📍 Svelte 比 React 快嗎？ * 📍 何時從 React 切換到 Svelte * 📍 結論 ### **What is React?** 讓我們從 React 開始。 React 是一個漸進式 JavaScript 前端框架（或函式庫，具體取決於您詢問的對象），可幫助您構建複雜的 Web UI。 它由 Facebook（現為 Meta）於 2013 年創建，能夠很快在前端 Web 開發領域站穩腳跟。 React 的核心是狀態和渲染狀態，這意味著要使用它，您必須添加其他庫來處理客戶端功能和路由。 ### **What is Svelte?** Svelte 也是一個前端 JavaScript 框架，但採用了更加一體化的方法。 Svelte 具有內建的狀態管理、路由和客戶端 (DOM) 功能。  React 需要第三方庫和工具，如 Redux、React Router、JSX，而 Svelte 內建了很多這樣的功能。它不太靈活，但更方便和一致。 它採用更幕後（魔術）風格的方法，它直譯非常基本的 JavaScript 程式碼並為您處理 UI 和狀態管理： ``` <script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> ``` Svelte 由紐約時報的開發人員 Rich Harris 於 2016 年創建，用於以高效的方式處理複雜的圖表和圖形。它從那裡成長為 React 和 Vue 之類的備受喜愛的競爭對手。 ### **React 和 Svelte 之間的 5 個區別** ### **1。 Svelte 的構建包大小要小得多** 我們在下面構建的相同（功能）應用程序。部署包大小在 React 是 41.2 kB，在 Svelte 是 2.1 kB。這幾乎減少了 **20x** 🤯 為了獲得這些數字，我構建了一個在 Svelte 和 React 中具有相同功能的應用程序。我們將在 React 與 Svelte 代碼分解部分深入研究這些應用程序。  我用 React 和 Svelte 構建了一個相同的應用程序。看看 Svelte 包小了多少！ ### **2。 Svelte 更容易學習，因為它的語法簡單** Svelte 採用更幕後的魔術方法，允許您編寫非常少量的樣板或語法糖來完成複雜的綁定。模板語法只是帶有一些額外內容的 HTML，這與 JSX（React 等價物）有很大不同並且更容易學習。 React 變數宣告：  Svelte 變數宣告：  Svelte 看起來像純 JavaScript，但它具有與 React 完全相同的功能。更新 Svelte 變數將自動更新它所在的 UI 元素。 ### **3。 Svelte 符合純 HTML、CSS 和 JavaScript** Svelte 將您編寫的程式碼編譯成基本的 HTML、CSS 和 JavaScript。它不需要像 React 那樣與你的代碼捆綁在一起！ React.js 需要存在於一個 bundle 中以完成所有正確的虛擬 DOM 比較和創建，Svelte 不使用虛擬 DOM 來處理 UI。相反，它選擇了基本的 JavaScript 元素創建函數，例如 document.createElement。 ### **4。 React 擁有更多為它構建的庫和包** React 已經存在了 3 年多，也是目前 JavaScript 框架事實上的王者👑。正因為如此，它擁有大量用戶和公司創建的軟件包。 用戶創建的包通常只是為了使路由和狀態管理更容易，或者添加滑塊、燈箱等。這些並不重要，因為 Svelte 具有可靠的選項，並且兼容/適應大多數 JavaScript 套件。 有點困難的是，要跟任何其他框架之前創建的 React 套件整合時不容易。我在 Solana 和以太坊上從事 Web3 專案時經常遇到這個問題。 ### **5。 React 有 React Native** React Native 是使用率最高和受支持最多的跨平台框架之一。它提供了使用 React 創建 iOS 和 Android 應用程式的能力。全部來自同一個代碼庫。由於其成熟度，它擁有大量的庫、支援和學習資源。 儘管有 Svelte 的替代方案，例如稱為 Svelte-native 的 NativeScript 改編版，但它們不具有與 React-native 相同的可靠性和功能。 ### **React 是函示庫還是框架？** 儘管 React 通常被稱為框架，但可以說，由於其範圍，它更像是一個函式庫。它專門負責管理 UI 的狀態並使其與應用程式中的資料狀態保持同步。 因此，它需要第 3 方函式庫來處理應用程式路由 (React Router)、UI 創建 (JSX) 和元件之間的狀態管理 (Redux)。 另一方面，Svelte 內建了上述所有功能，因此更像是一個完整的 UI 管理解決方案。 你可以看到大多數人都同意這是一個函式庫，但仍有一些爭論👇 https://twitter.com/htmleverything/status/1597574223148765185 ### **逐行比較 React 和 Svelte 專案** 比較兩種 Web 技術的最佳方法是深入研究並使用它們進行構建。構建完全相同的應用程序有助於了解每個庫/框架如何處理不同的功能。 讓我們看看： * 條件渲染 * 模板循環 * 更新狀態 * 事件掛鉤 ### **我們在建造什麼？** 編碼是一項口渴的工作，因此我們將構建一個簡單的網絡應用程序，允許用戶跟踪他們全天喝了多少杯水（或🍺）。 額外的好處是顯示每杯喝醉的歷史和時間。 我們將保持 UI 簡單，以更多地關注底層框架。 （見下面的用戶界面） https://codesandbox.io/embed/react-water-example-scrimba-ny5q0m?fontsize=14&hidenavigation=1&theme=dark ### **React** 為了分解代碼，首先讓我們深入了解一些 React 概念和術語👇 React 有幾種類型的語法你需要學習。鉤子、狀態和模板 (JSX) 是主要的。 鉤子 - 允許您進入應用程序的生命週期 State - 允許您根據數據的變化更新 UI 元素。它將“狀態”（或更簡單的變量）更改與 UI 更新聯繫起來 模板 - 允許您直接在 HTML 中使用變量和 JavaScript React 組件的樣式通常由單獨的 .css（或 .scss）文件處理。 ### **React 代碼分解** https://codesandbox.io/embed/react-water-example-scrimba-ny5q0m?fontsize=14&hidenavigation=1&theme=dark&view=editor 變數是使用 useState 掛鉤設置的，它允許更新變量並讓 UI 動態呈現這些更新。 `useEffect` 用於在加載應用程序時設置今天的日期。 JSX 模板使用基本的“{}”符號以及 HTML 中的標準 JavaScript 函數，允許顯示變量和循環數組（使用“.map”）。 ### **Svelte** Svelte 採用不同的方法，採用更“幕後魔術”的風格。邏輯看起來很像純 JavaScript。在後台，代碼做的事情幾乎與 React 代碼做的一樣。 Svelte 仍然有像 `onMount` 和 `onDestroy` 這樣的鉤子，但是簡單地分配一個變量並讓它完全響應並在模板 (HTML) 中可訪問不需要任何特殊的語法糖。 另一個很大的區別是您可以直接在 Svelte 組件中編寫 CSS/SCSS。這只是一個選項，因為您仍然可以像在 React 中一樣導入樣式，但我注意到大多數 Svelte 項目都使用樣式內組件。 ### **Svelte 代碼分解** https://codesandbox.io/embed/svelte-water-example-scrimba-2vsoid?fontsize=14&hidenavigation=1&module=%2FApp.svelte&theme=dark&view=editor 上面的代碼實例化了一個 cupsOfWater 數組，將新的日期變量設置為當前日期。 聲明一個函數來創建一個新日期並將其存儲在一個名為 cup 的變量中，然後將其添加到 cupsOfWater 數組中。 模板部分更接近 HTML 並增加了一些功能。再次使用“{}”表示法，您可以從“<script>”部分引用任何聲明的變量。您還可以使用事件偵聽器（如 `on:click`）、條件（如 `{#if}`）和使用 `{#each}` 循環。 ### **Svelte 比 React 快嗎？** 是的，從快速的 HTML 生成到更快的構建和開發環境，Svelte 的性能都大大優於 React。 * 生成 HTML * 根據狀態更新 UI * 第一次內容豐富的渲染 * 互動時間 * 速度指數 所有這些都看到了可衡量的差異，而 Svelte 具有優勢。您的應用程序越大越複雜，差異就越明顯。 在 Zeitspace 的一篇文章中可以看到性能比較 https://www.zeitspace.com/blog/we-built-an-app-with-svelte.-heres-what-we-learned ### **Svelte 比 React 好嗎？** 當開始一個新專案時，Svelte 有足夠的優勢，它應該始終是一個考慮因素。 話雖如此，React 在使用率方面仍然絕對勝過 Svelte。這可能會導致專案的第 3 方插件支持、僱用和壽命問題。 不過，為了應對這一點，Svelte 語法的易用性使其非常容易上手，尤其是對於 React 開發人員而言。這是公司在招聘 Svelte 項目時可以藉鑑的東西（不要將自己局限於 Svelte 開發人員）。 ### **何時從 React 切換到 Svelte** Svelte 是構建複雜網站或 Web 應用程序的絕佳選擇。許多老牌公司已經開始將 Svelte 用於內部和外部應用程序： * 1Password * Avast * Chess.com * Alaska Airlines * Fusion Charts * Rakuten * GoDaddy * IBM * Square * 紐約時報 * 飛利浦 但這並不意味著您必須將當前的 React 應用程序放入垃圾桶！ 那麼什麼時候是接觸 Svelte 的合適時機？ 如果您的應用/網站： * 由於頻寬限制，需要較小的包大小 * 需要盡可能快 * 需要快速建造 When is not the right time to reach for Svelte? 什麼時候不適合使用 Svelte？ 如果您的應用/網站： * 嚴重依賴第 3 方集成/工具 * 需要轉換為移動應用程序 這些很快就不會成為問題，但在投入之前確實需要進行一些研究和盡職調查。 ### **結論** 建議投入其中並嘗試在 Svelte 中構建一些東西。如果你來自 React，我幾乎可以向你保證你會喜歡它的簡單性和速度。
來看看一些對 React 開發人員最有用的 VS Code 外掛吧！ - 原文網址：https://dev.to/devland/vs-code-extensions-you-should-use-as-a-react-developer-2f6i ## ES7 React/Redux/GraphQL/React-Native snippets  最流行的外掛之一，由 React 開發人員提供，也由 React-Native 開發人員參與。它帶有許多速記前綴，您可以輕鬆使用它來加快開發過程。 這個外掛提供了很多你可能不知道的功能。一旦你安裝了這個驚人的外掛，創建一個新文件並輸入 rfce 然後按回車鍵，這將生成一個 React 功能組件，導入 React 並導出元件。  它還允許您在幾秒鐘內創建不同的 es7 片段，只需輸入前綴簡寫並按 enter。 此外，如果您使用的是 Redux 或 GraphQL，此外掛也為它們提供了程式碼片段。 ## VSCode React Refactor  簡單，但非常有用。允許您將 JSX 部分提取到新元件、文件等。使用類別、函數和箭頭函數並支持 TypeScript 和 TSX。 ## Prettier  經過多年使用 Prettier，我認為它是任何專案的都好用的外掛。這是一個自動為你格式化程式碼的工具。它有助於保持程式庫的一致性，因為無論團隊中的開發人員有什麼個人偏好，所有程式碼都將以相同的方式格式化。 ## Eslint  用於查找程式碼中的錯誤和缺陷。它可以幫助開發人員編寫沒有錯誤和警告的優質程式碼。 此外，它可以自動修復錯誤和警告。 ## Stylelint  和ESLint類似，也是一個linter，但是針對樣式。它可以檢測並突出顯示不正確的樣式，並有助於保持樣式一致和有序。更重要的是，它適用於純 CSS 以及 SCSS 和 LESS 等預處理器。 ## GitLens  增強了 Visual Studio Code 中內置的 Git 功能。它可以幫助您通過 Git 責備註釋和 code lens 一目了然地可視化代碼作者身份，無縫導航和探索 Git 存儲庫。 ## Git History  允許您查看 git 日誌和文件歷史記錄，並比較分支或提交。 ## Settings sync  您是否曾經重新安裝作業系統或更改您編寫程式碼的設備、繼續安裝 VS Code、然後發現您需要重新安裝所有外掛？它可以自動保存你的外掛和 VS Code 設置，然後在另一台設備上安裝和配置它們。 ## Bracket Pair Colorization Toggler  非常簡單但有用的擴展。突出顯示匹配的括號對。 ## Auto Close Tag  一個簡單但最有用的 React 外掛之一。它所做的是一件非常簡單的事情。 Auto close tag，顧名思義，為元素創建一個結束標籤，這意味著開發人員不需要編寫結束標籤。這可能看起來很簡單，但實際上，自動關閉標籤非常有用。 ## Auto Rename Tag  自動重命名成對的 HTML/XML 標籤。 ## Auto Import  自動為所有可用導入查找、解析並提供代碼操作和代碼完成。適用於 TypeScript 和 TSX。 ## Import Cost  在 React 中，安裝和導入套件是非常常見和必要的。導入大量套件可能會導致性能問題，因為其中一些包可能很重。此外掛在編輯器中顯示套件的大小。 ## Jumpy  您通常如何從一行程式碼轉到幾行和空格之外的特定關鍵字？多次使用鍵盤箭頭或單擊滑鼠？使用 Jumpy，您可以更有效率，因為它可以讓您快速跳轉到特定單詞。 ## i18n Ally  如果您的應用程序支持多種語言，就非常好用。 Formatting toggle  在某些情況下，我們希望暫時禁用像 Prettier 這樣的代碼格式化程序。這可以通過 Formatting toggle 外掛來完成，無需修改編輯器設置。 ## Npm intellisense  為導入語句中的 npm 模塊提供自動完成功能。 ## Web Accessibility  用於提高 Web 應用程序可訪問性的出色插件。它突出顯示了您應該考慮更改的元素，還提供了有關如何更新它們的提示。 ## Live Share  您願意與其他人協作編寫您的代碼嗎？ 此外掛使您能夠與他人實時編輯和調試代碼。 ## Better comments  用於在您的代碼中創建更人性化的註釋。它可以將評論分類為警報、查詢、待辦事項和突出顯示，並以不同的顏色顯示它們。 ## Docker  如果您的應用程序是使用 Docker 部署的，您可以考慮使用來簡化構建、管理和部署來自 VS Code 的容器化應用程序。 ## Remote — SSH  您是否需要訪問服務器才能遠程編輯文件？遠程 SSH 讓您可以使用任何帶有 SSH 服務器的遠程機器作為您的開發環境。您可以輕鬆地在遠程和本地開發環境之間切換。 ## WSL  如果您更喜歡在 Linux 上開發您的應用程序，但您的主要操作系統是 Windows，您可以考慮使用 Windows 子系統 Linux (WSL)。如果這樣做，那麼您可能會發現 WSL 擴展很有用，因為它可以讓您在 Windows 上使用 Vs Code構建 Linux 應用程序。在使用基於 Linux 的工具、運行時和實用程序進行開發時，您可以獲得 Windows 的所有生產力。 ## 實時服務器  如果您需要在文件更改時通過實時瀏覽器重新加載來快速啟動實時服務器，很推薦。 ## Debugger for Chrome and Debugger for Firefox  調試器提供了許多有用的功能，例如在斷點處暫停代碼執行、變量檢查等。這些擴展提供了 VS Code 編輯器內部的調試功能。 ## Change-case  顧名思義，此擴展允許您更改當前選擇或當前單詞的大小寫。如果您有很長的文本或想將多個變量轉換為相同的大小寫，這將非常有用。 ## Regex Previewer  大多數開發人員很少編寫 Regex 表達式。但是，如果必須，此擴展可能會非常方便。它在並排文檔中顯示當前正則表達式的匹配項。 ## DotENV  _.env_ 文件的語法突出顯示。 ## 結論 希望對您有幫助！
在寫 JavaScript 時 會看到有些檔案 開頭會有 "use strict" 但有些檔案又沒有這行 請問這行的功能是？有什麼好處嗎？ 感恩
在 jQuery 可以用 .hide() 跟 .show() 或者用 .toggle() 來顯示、隱藏一個元素 那有沒有辦法可以檢查元素是顯示或隱藏？ 謝謝
類似這樣的東西： ``` array.remove(value); ``` 寫純 JavaScript，不使用框架，可以嗎？ 謝謝
一名資深的德國軟體架構師 Jeroen De Dauw，寫了一篇很好的文章，給新手工程師一些寫程式的建議。 - 原文出處：https://dev.to/jeroendedauw/advice-for-junior-developers-30am --- ## 給新手工程師的一般建議 ### 1. 程式碼不是重點 作為開發者，我們喜歡寫程式。大多數工程師希望收到的任務明確，可以不用管技術之外的事情，專心解決有趣的技術挑戰。 請花足夠的心力去確認，您正在解決正確的問題。引用管理學大師 Peter Drucker 的話：高效率地去做一件根本沒必要的事情，結果依然是完全沒意義。儘早、經常去搜集回饋，透過「持續交付」來向真正的用戶互動，成為敏捷（Agile）的工程師。 軟體開發成本高昂，現實世界專案的絕大部份工作都是在維護而已。再加上目標應該是對用戶、對生意有幫助，所以結論就是：寫程式最好的方法，經常是完全不寫。引用比爾蓋茲的話：用程式碼有幾行來衡量工程進度，就像用重量來衡量飛機的製造進度。 另請參閱：YAGNI 原則、KISS 原則、The Last Responsible Moment 文章。 ### 2. 軟體設計很重要 在我開發生涯的前五年，我以為軟體設計是架構師或其他特殊職位的人在做的事。我以為開發者專注在完成任務即可，以為軟體設計、最佳實踐、寫測試這些，都不關我的事。我的程式能跑，我的生產力很高，我以為這樣就對了。 直到我閱讀了 Robert C. Martin 的 Clean Code，這書刺激了我對軟體設計的關注，並包含許多範例與啟發。其中最啟發我的是：走得快的唯一方法，就是走得好。也就是說，如果你把事情搞得一團糟，結果只會讓你速度更慢。 學習寫出設計良好的乾淨程式碼，需要時間和精力。而且剛開始的時候，會寫比較慢，並且會犯錯誤。 ### 3. 使用最佳實踐 寫測試通常會有幫助。雖有例外，但大多數時候，寫自動化測試會大有幫助。寫測試就是一種最佳實踐。 如果你不太會寫測試，請遵循最佳實踐並為所有內容寫測試。**開始時，盲目遵循最佳實踐比遵循自己弱弱的判斷要好**。一段時間之後，您將知道怎麼寫測試比較有效，並能夠區分您搞砸了和不值得編寫測試的情況。因為 bug 變少了、重構起來更輕鬆了，您將開始理解測試帶來的深入的價值。**到有了自己的判斷力後，您將能夠超越最佳實踐**。 此建議適用於您在學習任何最佳實踐的新手時期。自動化測試只是一個例子。 有個陷阱要注意，明智的最佳實踐，與荒謬、適得其反的做法之間，只有一線之隔。因為大多數程式碼都很亂，而且大多數開發者（包括資深人員）不了解軟體設計的基礎知識，因此事情就更複雜了。有一個好的指導者很重要。除此之外，根據我自己的經驗，要小心只存在您的語言、框架社群的最佳實踐。尋找那些已經存在了幾十年的長青建議比較好。 --- ## 給新手工程師的技術建議 ### 4. 寫測試 寫自動化測試。也許在寫程式之前先寫測試，例如運用測試驅動開發（TDD）。這讓您可以輕鬆反覆驗證幾段程式是否正確，而不用一直手動跑測試、除錯。 > 你覺得先寫測試很煩嗎？但之後再忙著抓 bug 有比較好？ 更重要的是，測試為您重構時提供了額外保障。你需要持續重構來保持程式乾淨。沒有可靠的測試保障，程式碼就可能越變越亂。 如果您的程式碼設計不佳，例如使用繼承進行重用，或使用靜態函數，則編寫測試會很困難。另一方面，如果您有遵循 SOLID 原則、沒有全局依賴項，那麼寫出好的測試並不困難。 設計好測試也很重要，因為糟糕的測試只會拖慢開發速度。避免將測試綁定到被測程式碼的實作細節或系統結構。 ### 5. 不要用繼承來做到程式碼重用 這是讓人以為是最佳實踐的其中一個反例。我的建議是：剛開始時，根本就不要用繼承來做到程式碼重用。這通常都幫助有限，而且帶來一大堆麻煩。請多用組合、少用繼承（關鍵字：composition over inheritance）。 ### 6. 寫出 OOP 程式碼 學習 SOLID 原則，避免寫出 STUPID 原則的程式碼 ( https://williamdurand.fr/2013/07/30/from-stupid-to-solid-code/ )。理解這些原則和反模式非常有價值。 創造一些真正的物件。只有靜態方法的類別，根本不算是物件導向。盡量避免完全使用靜態寫法。 ### 7. 寫出函數式程式碼 不要把函數式程式設計，跟指令式程式設計搞混了。 重點不是完全切換到函數式語言。而是學習使用函數式風格的優點。例如減少狀態、讓函數專心一件事。另請參閱：https://www.destroyallsoftware.com/screencasts/catalog/functional-core-imperative-shell ### 8. 程式碼稍微重複沒關係 將一大塊程式碼到處複製貼上當然很不好。有尊嚴的開發者很快就發現這一點，並開始遵循某種形式的：不重複自己原則 Don't Repeat Yourself （DRY）。不幸的是，對 DRY 的追求往往會導致過度工程和額外的複雜性。所以會有一條新原則：寫兩次原則 Write Everything Twice（WET）。也就是僅在第三次出現重複時，才動手改善重複段落。 ### 9. 型別、命名、註解 試著寫一些能夠表達自我的程式碼，避免寫註解。 > 每次寫註解時，都應該要皺一下眉頭，感受到自己的表達能力有點失敗。 —— Robert C. Martin 註解很危險，因為有可能說謊。程式碼可以不更新註解就修改，那一開始的註解就變錯誤了。這種情況下，註解不但沒幫助，還會誤導到別人。 要寫出能夠表達自我的程式碼： - **一個函數只做一件事** 因為只做一件事，就能給一個清楚的命名。 - **減少狀態** - **使用型別** 定義清楚的型別，加上跑測試，能讓系統更穩定。 - **減少混合型別** 避免可以同時是整數、布林值或字串的參數或回傳值。如果讓每個函數專心一件事，這自然會做到。 - **寫測試** 良好的全面測試，也同時會是程式碼的使用說明範例。 Robert C. Martin 的書 Clean Code 在命名和寫註解方面有提供一些很好的經驗法則。 --- 以上，希望對大家有幫助！
TypeScript 的型別系統很強大，大部分專案都在用。此外，在 TypeScript 中，其實有提供一些 Utility Types 來輔助我們進行型別定義與操作。今天與您分享其中五個。 - 原文出處：https://dev.to/murillonahvs/a-little-about-typescript-utility-types-1epd ### Summary - Pick - Omit - ReadOnly - Partial - Required --- ## 1. Pick(Type, Keys) Pick utility type 是從現有型別中選取某些屬性來生成新的型別。 基本上，Pick 從指定型別中刪除除指定鍵之外的所有鍵。 ``` type Person = { name: string lastName: string age: number hobbies: string } type SomePerson = Pick<Person, "name" | "age"> // type SomePerson = { // name: string; // age: number; // } ``` --- ## 2. Omit(Type, Keys) Omit utili type 與 Pick 型別相反，Omit 是寫出要省略的屬性，而不是要保留的屬性。 ``` type Person = { name: string lastName: string age: number hobbies: string } type SomePerson = Omit<Person, "lastName" | "hobbies"> // type SomePerson = { // name: string; // age: number; // } ``` --- ## 3. Readonly(Type) Readonly utility type 用於所有屬性都設置成唯讀的型別。無法為屬性分配新值，不然就跳 TypeScript 警告。 ``` type Person = { name: string } type ReadOnlyPerson = Readonly<Person> const person: ReadOnlyPerson = { name: "Fizz", } person.name = "Buzz" // Cannot assign to 'name' because it is a read-only property. ``` --- ## 4. Partial(Type) Partial utility type 用於所有屬性都設置為選填的型別。 ``` type Person = { name: string lastName: string age: number address: string } type PartialPerson = Partial<Person> // type PartialPerson = { // name?: string | undefined; // lastName?: string | undefined; // age?: number | undefined; // address?: string | undefined; // } ``` --- ## 5. Required(Type) Required utility type 與 Partial 相反。要求要定義好所有屬性。可用來避免選填屬性出現在此型別中。 ``` type Person = { name?: string lastName?: string age?: number address?: string } type RequiredPerson = Required<Person> // type RequiredPerson = { // name: string; // lastName: string; // age: number; // address: string; // } ``` --- 以上，簡單舉例五個分享，有很多好用的 utility type，歡迎查看官網了解更多： https://www.typescriptlang.org/docs/handbook/utility-types.html
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
