[VS Code](https://code.visualstudio.com/) 是一款免費、跨平台、開源的程式碼編輯器，近年來成為開發者最熱門的選擇。 在本文中，我整理了一些最有用的外掛，您可以使用它們來提高工作效率。 原文出處：https://dev.to/madza/19-vs-code-extensions-to-boost-your-productivity-4npo --- ### 1\. [Swimm](https://go.swimm.io/ide-plugin?utm_source=Hashnode&utm_medium=paid_influencer&utm_campaign=launch_may&utm_content=madza_dev) 使用 Swimm 的富文本編輯器建立文件。記錄跨越多個文件和存儲庫的複雜流程，其中包含與程式碼交互並在您進行更改時自動更新的豐富內容。 在本地驗證和更新文件，並將其作為 CI 工作流的一部分，自動修復簡單的錯誤，並且僅在發生重大更改時提醒您。 在正確的時間找到正確的文件——就在相關程式碼旁邊。當您看到一個 wave 時，這意味著存在與該特定程式碼部分相關的文件。  ### 2\. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 借助 GitLens，開發人員可以通過提供有關 Git 存儲庫的高級可視化和訊息，更好地了解其程式碼庫的歷史、作者身份和更改。 GitLens 還提供了一組豐富的自定義選項，以及內聯責備註釋、提交和差異詳細訊息，甚至無需離開編輯器即可查看和編輯提交訊息的能力。  ### 3\. [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) Thunder Client 是用於 Visual Studio Code 的輕量級 Rest API 客戶端擴展，具有簡單易用的 UI。 支持集合和環境變數和 GraphQL 查詢，以及使用基於 GUI 的界面進行無腳本測試。 所有請求的資料都本地保存在您的設備上。  ### 4\. [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) Tabnine 是一個 AI 程式碼助手，可以通過在所有最流行的編碼語言和 IDE 中實時完成程式碼來提高您的開發速度。 Tabnine 由多種語言專用的機器學習模型提供支持，這些模型是在程式碼上從頭開始進行預訓練的。  ### 5\. [Remote-SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) Remote - SSH 擴展允許您使用任何帶有 SSH 伺服器的遠程機器作為您的開發環境。 無需在本地計算機上安裝源程式碼即可獲得這些好處，因為該擴展程序直接在遠程計算機上執行命令和其他擴展程序。 您可以打開遠程計算機上的任何文件夾並使用它，就像文件夾在您的計算機上一樣。  ### 6\. [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) Docker 擴展使從 Visual Studio Code 建置、管理和部署容器化應用程式變得容易。 它還提供了對容器內 Node.js、Python 和 .NET 的一鍵式除錯。  ### 7\. [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) 使用此擴展，用戶可以輕鬆瀏覽提交歷史記錄、檢查文件更改並比較程式碼的不同版本。 該擴展提供了一個 GUI，可以在時間軸中顯示提交歷史記錄。每個提交都與其提交訊息、作者、日期和時間一起顯示。 用戶還可以查看與每個提交關聯的分支和標籤名稱。  ### 8\. [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) 對於在 VS Code 中使用大量 Markdown 的任何人來說，這是一個有用的工具。它使建立和編輯 Markdown 文件變得更加容易和快速，幫助您提高生產力和效率。 這些功能包括語法突出顯示、程式碼塊格式化、目錄、預覽模式、表情符號支持、鍵盤快捷鍵等等。  ### 9\. [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex) 該擴展在並排文件中顯示當前正則表達式的匹配項。這可以使用 Ctrl+Alt+M 打開/關閉。 可以通過狀態欄條目加入全局選項和多行選項，以便使用並排文件進行評估。當並排文件有多個匹配示例時，這會很有用。  ### 10\. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 使用此擴展，您將能夠將註釋分類為提醒、查詢、TODO、突出顯示等。 註釋掉的程式碼也可以設置樣式以明確程式碼不應該存在。您可以在設置中指定您想要的任何其他評論樣式。  ### 11\. [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) 書籤擴展可幫助您導航程式碼，輕鬆快速地在重要位置之間移動。 不再需要搜尋程式碼。它還支持一組選擇命令，允許您選擇書籤行和書籤行之間的區域。它對日誌文件分析非常有用。  ### 12\. [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) 專案管理器可幫助您輕鬆存取您的專案，無論它們位於何處。不要再錯過那些重要的專案了。 您可以定義您的專案（也稱為收藏夾），或選擇自動檢測 Git、Mercurial 或 SVN 存儲庫、VS 程式碼文件夾或任何其他文件夾。 此外，您還可以使用標籤來組織您的專案。  ### 13\. [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 一個基本的拼寫檢查器，適用於程式碼和文件。 這個拼寫檢查器的目標是幫助捕獲常見的拼寫錯誤，同時保持較低的誤報率。  ### 14\. [Image Optimizer](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ImageOptimizer) 向解決方案資源管理器中的任何文件夾和圖像加入右鍵單擊菜單，使您可以自動優化該文件夾中的所有 PNG、GIF 和 JPEG 文件。 只需右鍵單擊任何包含圖像的文件或文件夾，然後單擊其中一個圖像優化按鈕。  ### 15\. [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) 該擴展支持符號定義跟踪的所有正常功能，但它適用於 CSS 選擇器（類、ID 和 HTML 標記）。 您可以內聯加載 CSS 文件並在此處進行快速編輯，直接跳轉到 CSS 文件或在新編輯器中打開它或在懸停時顯示定義。  ### 16\. [Placeholder Images](https://marketplace.visualstudio.com/items?itemName=JakeWilson.vscode-placeholder-images) 使用各種第 3 方服務（如 Unsplash、LoremFlickr 等）在 Visual Studio Code 中生成佔位符圖像並將其插入到 HTML 中。 您可以選擇圖像寬度、高度、文本和顏色，將生成的 IMG 標籤插入到您的 HTML 中或將其複製到剪貼板，或者將圖像 URL 插入到您的 HTML 中，複製到剪貼板，或在您的瀏覽器中打開它。  ### 17\. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 具有實時瀏覽器重新加載功能的快速開發實時伺服器。從狀態欄單擊即可啟動或停止伺服器。 允許用戶建立可自定義的端口號，設置伺服器根目錄，並在設置中提供默認的瀏覽器配置選項。  ### 18\. [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) 使用 Peacock，您可以巧妙地更改 VS Code 工作區的顏色。 當你有多個 VS Code 實例、使用 VS Live Share 或使用 VS Code 的遠程功能，並且你想快速辨識你的編輯器時，這是理想選擇。  ### 19\. [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) Polacode 是 VS Code 的擴展，它可以對你的程式碼進行截圖。 該擴展生成一個與源具有相同風格和主題的螢幕截圖。  --- 以上簡單分享，希望對您有幫助～
 ## 解決方法 1. 前往控制台 2. 點擊時鐘和區域  3. 點擊地區  4. 點選系統管理  5. 點選變更系統地區設定  6. 勾選 '使用 Unicode UTF-8 提供全球語言支援' (會要求重新啟動電腦)  7. 開啟 terminal 輸入 `chcp` 看查 VSCode 編碼 8. 輸入 `chcp 65001` 轉換 VSCode 編碼至 utf-8 ### 結果  ## 參考 [參考來源](https://github.com/anseki/readline-sync/issues/48)
## 課程目標 - 替 CLI 應用程式加上顏色 ## 課程內容 這一課來做有趣的任務吧！很花俏的那種！ 我們來替終端機的文字，加上顏色吧！ 看一下這個套件的介紹 https://www.npmjs.com/package/colors 請先輸入指令安裝 ``` npm install colors ``` 安裝之後，記得觀察一下 `package.json` 與 `node_modules` 內容的變化喔！ --- 建立 `try-colors.js` 程式，裡面輸入 ``` var colors = require('colors'); console.log(colors.green('hello')); console.log(colors.red.underline('i like cake and pies')) console.log(colors.inverse('inverse the color')); console.log(colors.rainbow('OMG Rainbows!')); console.log(colors.trap('Run the trap')); ``` 然後去終端機輸入 ``` node try-colors.js ``` 你會看到終端機出現，花俏、華麗的顏色文字！ 更多用法可以參閱套件介紹 https://github.com/Marak/colors.js ## 課後作業 接續前一課的作業，現在來替我們的 CLI 應用程式，加上顏色！ --- 請打開之前的所有檔案 目前這些程式，終端機訊息全都是預設的白色文字 請把這些訊息的文字顏色改變！ 不用通通改變，改一部份，讓程式看起來更清楚即可 可以使用這款套件 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 用 node 讀取檔案內容 ## 課程內容 來學習一下用 node 讀取檔案的方法 學會這方法，可以用 node 寫出簡易的檔案內容分析程式 --- 建立一個 `my-name.txt` 文字檔，在裡面輸入你的名字 然後建立 `read-my-name.js` 程式，裡面輸入 ``` var fs = require('fs'); fs.readFile('my-name.txt', function(err, data) { console.log("您好，" + data); process.exit(0); }); ``` 然後去終端機輸入 ``` node read-my-name.js ``` 你會看到一段打招呼的訊息！ --- 讓我們逐行說明一下 ``` var fs = require('fs'); ``` 這是載入「檔案系統模組」的意思，`fs` 是 `file system` 的縮寫 `readFile` 函式，第一個參數是檔案名稱，第二個參數是「一個函式定義」 看起來有點怪，其實是「非同步程式設計」的關係 之前在學網頁元素的事件處理時，就是用「非同步」程式設計處理 也就是我不確定「點擊」事件何時會發生，但我先「綁定」好事件發生時要做的任務 還有在網頁呼叫 AJAX 時也是，我不確定「主機回應」何時會拿到，但我先「綁定」好拿到之後要做的任務 這邊 `fs` 的意思就是：我不確定何時會「檔案讀取完畢」，但我先「綁定」好讀取完畢之後，要做的任務 看起來很怪、很醜，這種設計的意義不明，對嗎？我也覺得！後面會教你如何改寫成「同步程式設計」，先照做就好 -- `console.log` 是印出訊息到終端機（語法就跟在瀏覽器環境一樣！） `process.exit(0);` 是結束程式的意思。那個 `process` 是代表當前 node 程式的全域變數 --- 在瀏覽器裡面，無法去操作「檔案系統模組」，否則也太可怕，每個人上網時，都能用 js 亂改電腦上的檔案，資安大問題！ 在瀏覽器裡面，也沒有 `process` 這個全域變數 用 node 跑完這段程式，你應該會發現，這段程式拿到網頁環境，是無法執行的！ 在瀏覽器、node 跑 js 程式，有很多相似，也有很多相異之處，希望你慢慢抓到兩者的感覺！ ## 課後作業 讓我們嘗試開發一個 CLI 版本的待辦管理工具 請建立一個檔案 `todos.json` 並放入以下內容 ``` [ { "title": "去操場跑步" }, { "title": "去市場採購" }, { "title": "找朋友吃飯" } ] ``` 然後建立一個 `read.js` 檔案 使用者輸入 `node read.js` 之後，終端機會去讀取 `todos.json` 並且顯示 ``` 您的待辦事項： #0 去操場跑步 #1 去市場採購 #2 找朋友吃飯 ``` 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： **方法一** 直接截圖視窗內容，上傳到留言區 **方法二** 開一個新資料夾，用 git 初始化這個資料夾 接下來的作業，都放在這個資料夾，然後上傳 github 然後把 github 專案連結，貼到留言區即可
這是我 2015 年寫的文章，當時在學界、業界評價兩極，也引起很多人痛罵 多年後回頭看，我的觀點不變。文章滿適合這個論壇的，我順手轉發一下 --- 從來沒有一個技能，曾經被神化到這個程度： 「你不但要有天份，還要有熱情，才適合寫程式。」 那些寫程式的人，好像「從小就立定志向，決定未來要寫程式了」。 缺乏其一的話，你要嘛是個假貨，要嘛走不遠，總之就是不適合。 這種深植人心的刻板印象不但大錯特錯，同時還是有害的。 隨便找幾個工程師都能證明這點。 # Jacob Kaplan-Moss（Django創造者） Jacob Kaplan-Moss的這份簡報提到： [一個平庸工程師的自白](http://www.inside.com.tw/2015/06/12/i-am-a-mediocre-programmer) > 這種關於「程式天才」的神話非常有害，一方面它把行業門檻設置得特別高，令很多人望而卻步，另一方面它也在折磨產業內的人，因為你如果不能 rocks ，就會變成 sucks ，所以不得不用一切時間來努力學習和工作，導致影響生活。…（略）…我們應該改變這種態度，寫程式只是一些技能，並不需要太多天分，它是可以學習的，而且做一個平庸的工程師不丟人， 他本人在[Twitter的自介](https://twitter.com/jacobian)直接寫「不是真的程式設計師（not a real programmer）」， 透漏著他對這種迷思的不耐煩。 # Jacob Thornton（Bootstrap作者） 在Github擁有八萬顆星的Bootstrap作者， 前Twitter、現任Medium工程師Jacob Thornton的一篇採訪也是這種迷思的反例： [Jacob Thornton痛恨電腦（Jacob Thornton Hates Computers）](https://medium.com/@verbagetruck/jacob-thornton-hates-computers-5c64f164ee07) > 當他說「我痛恨電腦」的時候，並不完全在開玩笑。…（略）…他說「我本來要去唸社會學的」 接著描述了他第一份工作的情況： > 我拿到了一個遠超我能力的工作。每一天都可能被開除。所以我非常努力工作，想搞懂JavaScript，因為我不懂它到底在幹嘛。 > 我一生中最現實的一刻到了。整間公司的人圍在我身邊，要我做一個XHR request。我根本沒做過，我只稍微聽過而已。於是我開始打字、重新整理瀏覽器，然後什麼都沒出來。我反覆做了幾次，知道自己完蛋了，他們發現我是假貨了。接著我突然發現自己忘記加「.send()」。我加了之後再次重新整理瀏覽器，畫面成功顯示。整個團隊感覺像在說「喔，酷。」然後就各自回辦公桌了。 > 我在那裡坐了15分鐘。心想，就這樣。我搞定了。我不會被開除了。 這段描述一點也不像「程式天才」在職場的表現。 至於支持他一路走來的動機是什麼呢？他說： > 我是一個高度在乎同儕的人，我做前端的朋友總是會告訴我哪個地方做很醜或是在哪個瀏覽器上壞掉。感覺真的很棒。我真的只想跟朋友一起寫程式，一起工作。 [他本人的Twitter](https://twitter.com/fat)自介寫「computer loser」， 置頂推文是「公司裡第一爛的工程師，但是第三酷」。 這種態度跟刻板印象完全相反。 # Rasmus Lerdorf（PHP之父） Rasmus Lerdorf的[言論](https://en.wikiquote.org/wiki/Rasmus_Lerdorf)常常引起廣泛爭議： - 我其實很討厭寫程式，不過我喜歡解決問題。 - 有些人熱愛寫程式。我不懂他們為何會這樣。 - 我不是一個真的工程師。我把東西弄一弄，弄到能跑之後就不管了。真的工程師會說「這段程式能跑，但記憶體沒管理好，我們來修好它」。我只會說，一直重新開機不就好了。 從他的言論，很難看出他對電腦本身有多少熱情。 他也跟Jacob Kaplan-Moss以及Jacob Thornton一樣，懶得對寫程式的迷思多做解釋， 乾脆直接說自己是loser、假工程師了。 # David Heinemeier Hansson（Rails之父） DHH在接受[Big Think訪問](http://bigthink.com/videos/big-think-interview-with-david-heinemeier-hansson)時提到： > 說來有點好笑。我以前寫PHP跟Java的時候，常常花時間去摸其他程式語言。到處摸看看其他程式語言…隨便什麼都好。寫PHP跟Java實在太悶了，我需要用這種方式讓自己暫時抽離。 > 我以前寫PHP跟Java的時候，完全不覺得自己之後會當程式設計師。 整段看起來都不像是一個「電腦天才」的自我介紹。 最後讓他愛上的不是電腦本身，而是Ruby程式語言的優雅性。 如果Ruby沒有被發明，DHH現在也許會做完全不同的事情。 --- 這一類可以說明刻板印象大錯特錯的文章實在太多了， 看看工程師們最愛的幾個玩笑：[關於工程師 59 條搞笑但卻真實無比的語錄](http://www.inside.com.tw/2013/12/20/59-hilarious-but-true-programming-quotes-for-software-developers) - 一個人寫的爛軟體將會給另一個人帶來一份全職工作。 - 傻瓜都能寫出電腦能理解的程式，優秀的工程師寫出的是人類能讀懂的程式。 - 開發軟體和建造教堂非常相似——完工之後我們就開始祈禱。 如果工程師都很有天份跟熱情，這些笑話又怎會受歡迎呢。 再看看Medium上很受歡迎的學習系列文章：[資深開發者給後輩的七個 Coding 學習心得](http://buzzorange.com/techorange/2013/11/29/wish-someone-had-told-me-when-learn-coding/) 其中的幾個建議 - 也許常常有人說你是錯的 - 也許常常會有人跟你說「你並不是個 Coder」 - 不要在意外表，能力才是一切 無非就是想打破這類寫程式的迷思、無意義的資格論神話。 下次又有人學到一半，開始反省自己適不適合、夠不夠資格的時候， 我只想跟他說：你就多找幾種方式學學看吧，不要抱持那種奇怪的資格論。 很多時候其實只是[搞錯方法](http://blog.turn.tw/?p=1283)、[搞錯心態](http://blog.turn.tw/?p=2568)而已。 真的完全學不懂再放棄吧。 寫程式不需要天份，也不需要熱情。 (Photo via Sano Rin, CC licensed.)
## 課程目標 - 學會處理 git 衝突 ## 課程內容 這課來學一下 commit 彼此有衝突，而 git 沒辦法自動合併的情況吧 先挑一個資料夾，把 `my-work-1.html` 裡面隨意加上幾行內容 ``` <p>我的第一個網頁檔案</p> <p>new content a</p> <p>new content b</p> <p>new content c</p> ``` 接著 ``` git add my-work-1.html git commit -m 'new content abc' git push ``` 順利送出！ 然後去另一個資料夾，把 `my-work-1.html` 裡面隨意加上幾行內容 ``` <p>我的第一個網頁檔案</p> <p>new content x</p> <p>new content y</p> <p>new content z</p> ``` 接著 ``` git add my-work-1.html git commit -m 'new content xyz' git push ``` 結果失敗了！一如預期，被 git 喊停了 ``` To github.com:howtomakeaturn/my-first-testing-repo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'github.com:howtomakeaturn/my-first-testing-repo.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. ``` 預期之中，這時應該 pull 對吧？ ``` git pull ``` ``` remote: Enumerating objects: 14, done. remote: Counting objects: 100% (12/12), done. remote: Compressing objects: 100% (4/4), done. remote: Total 8 (delta 3), reused 8 (delta 3), pack-reused 0 Unpacking objects: 100% (8/8), 792 bytes | 79.00 KiB/s, done. From github.com:howtomakeaturn/my-first-testing-repo d999c25..2cf01f4 main -> origin/main hint: Pulling without specifying how to reconcile divergent branches is hint: discouraged. You can squelch this message by running one of the following hint: commands sometime before your next pull: hint: hint: git config pull.rebase false # merge (the default strategy) hint: git config pull.rebase true # rebase hint: git config pull.ff only # fast-forward only hint: hint: You can replace "git config" with "git config --global" to set a default hint: preference for all repositories. You can also pass --rebase, --no-rebase, hint: or --ff-only on the command line to override the configured default per hint: invocation. Auto-merging my-work-1.html CONFLICT (content): Merge conflict in my-work-1.html Automatic merge failed; fix conflicts and then commit the result. ``` 在前一課，我們 pull 之後，會被 git 自動把雲端版本、跟本機你剛改過的版本，合併在一起，然後在終端機編輯器內，請你打一段小訊息，備註這次合併 這次，卻沒有進入終端機編輯器內，而是跳出一串訊息！ 注意看最後幾行！ ``` Auto-merging my-work-1.html CONFLICT (content): Merge conflict in my-work-1.html Automatic merge failed; fix conflicts and then commit the result. ``` 這就是 commit 衝突的情況：兩個 commit 都有改到同樣檔案，雖然先後時間不同，但是 git 不敢直接用新的蓋掉舊的！ git status 看一下 ``` Unmerged paths: (use "git add <file>..." to mark resolution) both modified: my-work-1.html ``` 清楚寫出了：both modified，兩邊都修改過！ 打開 `my-work-1.html` 看一下 ``` <p>我的第一個網頁檔案</p> <<<<<<< HEAD <p>new content x</p> <p>new content y</p> <p>new content z</p> ======= <p>new content a</p> <p>new content b</p> <p>new content c</p> >>>>>>> 2cf01f4f63f5ea9040610495688f08032761a170 ``` 看起來很嚇人，其實，只是 git 怕你看不清楚，用一種誇飾法，列出衝突的地方而已！ HEAD 段落，是你剛提交的 commit 部份 `2cf01f4f63f5ea9040610495688f08032761a170` 的部份呢？則是剛剛從 github 抓下來的 commit 代號！ 要如何處理衝突呢？其實，你就決定一下，衝突這幾行，到底要怎麼合併就可以了，然後把 git 誇飾法的地方刪掉 比方說，我決定讓行數交錯呈現吧 ``` <p>我的第一個網頁檔案</p> <p>new content a</p> <p>new content x</p> <p>new content b</p> <p>new content y</p> <p>new content c</p> <p>new content z</p> ``` 改完之後 ``` git add my-work-1.html ``` ``` git commit -m 'handle conflict' ``` 手動合併的 commit，我個人通常習慣訊息就寫 handle conflict ``` git push ``` 大功告成！這就是所謂的 git 衝突處理 ## 課後作業 接續前一課的作業 在上一次的作業，我們嘗試了兩個資料夾，同時 push 送出 commit，導致 git 比對 github 上的雲端版本時，發現有衝突，請你先 pull 再 push 的情況 上次的情況比較單純，因為雖然有衝突，但是 git 一看就知道影響不大，所以 pull 時自動處理了衝突，把事情都安排好了 這次的作業，我們要模擬「遇到衝突，而且 git 無法自動處理衝突」的情況 --- 請按照以下步驟，送出 commit **第一步** 到 `at-home` 資料夾，打開檔案 `about.html` 的內容，原本是 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發</p> ``` 請改成 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發，目標是成為厲害的前端工程師</p> ``` 然後送出 commit，接著 `git push` 出去 你會看到 github 上面就被更新了 **第二步** 到 `at-laptop` 資料夾，假設你今天出門工作，忘記先 pull 了，也忘記檔案其實你已經改好了 打開檔案 `about.html` 的內容，依然是 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發</p> ``` 請改成 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發，目標是成為厲害的軟體工程師</p> ``` 然後送出 commit，接著 `git push` 出去 這時 git 會請你先更新，於是你輸入 `git pull` 你會發現 git 表示遇到衝突，無法自動合併，請你處理！ 原來有一邊是寫「前端工程師」，另一邊是寫「軟體工程師」 git 無法自動判斷你到底是想要以哪個為準！（其實用哪個都可以吧！） 請處理這個 conflict 衝突，處理完之後 push 到 github 上面 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把 github 專案連結，貼到留言區
## 課程目標 - 學會 git pull ## 課程內容 學會把專案上傳 github 了，這次來試試把專案從 github 載下來吧 假設你現在使用另一台新電腦，專案還不在你的電腦上 打開專案頁面 https://github.com/howtomakeaturn/my-first-testing-repo 頁面上有一個 `Code` 的按鈕，點下去有 clone（複製）的指示 在電腦上先移動到別的資料夾底下，使用 clone 指令把專案抓下來 ``` git clone [email protected]:howtomakeaturn/my-first-testing-repo.git ``` 完成之後，會看到在新資料夾底下，有一份一模一樣的專案！ --- 在新資料夾底下，把 `my-work-3.html` 裡面隨意加上幾個字，接著 ``` git add my-work-3.html git commit -m 'commit from new folder' git push ``` 打開 github，會在上面看到有被更新！ --- 回到之前的「舊資料夾」底下，把 `my-work-4.html` 裡面隨意加上幾個字，接著 ``` git add my-work-4.html git commit -m 'commit from old folder' git push ``` 會發現上傳失敗！ ``` To github.com:howtomakeaturn/my-first-testing-repo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'github.com:howtomakeaturn/my-first-testing-repo.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. ``` 原因是，git 發現，你從兩個不同的地方，分別更新過不同檔案，git 怕你會搞混編輯歷史紀錄 （github 上現在有4筆 commit，目前資料夾上也是4筆 commit，git 無法分辨哪個第4筆是最新的） 所以 git 希望你能先把最新版本抓下來，再送出你的版本，比較不會有爭議！ 把新版本抓下來的指令是 ``` git pull ``` 抓完之後，因為 git 自動把雲端版本、跟本機你剛改過的版本，合併在一起了 會請你打一段小訊息，備註這次合併 通常你就使用 `ctrl + x` 或者 `:q` 離開終端機編輯器就可以了 完成之後，使用 `git log` 會看到，現在有6筆 commit 紀錄，最後一筆是剛剛自動合併的 commit ``` Merge branch 'main' of github.com:howtomakeaturn/my-first-testing-repo ``` 使用 `git status` 也會看到 ``` On branch main Your branch is ahead of 'origin/main' by 2 commits. (use "git push" to publish your local commits) nothing to commit, working tree clean ``` git 提示你目前比雲端版本還多了 2 筆 commit（一筆是你剛加的，一筆是關於自動合併的） 使用 `git push` 通通推上去 github 吧！ --- 看到這邊你可能會想，剛剛那筆自動合併的 commit 好像有點多餘？ 就把 `commit from new folder` 以及 `commit from old folder` 按照時間順序排列，不就好了嗎？ 其實，那是因為這兩筆 commit 內容沒有重疊，所以看起來很單純 實務上很多時候，兩筆 commit 會更新到「相同的檔案」之中的「同樣幾行程式碼」 這時 git 如果按照時間順序排列，就會讓「較晚送出 commit 的人」把「較早送出 commit 的人」的工作內容覆蓋掉！ 這樣一來，根本沒辦法團隊工作：晚提交的人，會一直破壞掉早提交的內容！ 所以 git 一律會多一筆「合併 commit」。平常就自動合併沒問題，有衝突時，就可以在這筆 commit 處理 有點不懂沒關係，我們下一課會練習 ## 課後作業 接續前一課的作業，專案已經傳到 github 了 假設你原本是用家裡的電腦開發，現在你打算帶著筆電，出門到咖啡廳繼續開發 請拿出你的筆電，把 github 上那個專案 `git clone` 到筆電上面 如果你沒有筆電，沒關係，在電腦上另外找個資料夾，用 `git clone` 從 github 抓專案下來 這樣兩個資料夾對應同一個專案，也可以，模擬跨裝置同步專案 --- 現在分別有兩個資料夾，內容一模一樣，我這邊分別用 `at-home` 以及 `at-laptop` 稱呼兩個資料夾 請按照以下步驟，送出 commit **第一步** 到 `at-home` 資料夾，建立一個檔案 `create-this-file-at-home.html` 內容放 ``` <p>我在家裡新增這個檔案</p> ``` 然後送出 commit，接著 `git push` 出去 你會看到 github 上面就被更新了 **第二步** 到 `at-laptop` 資料夾，建立一個檔案 `create-this-file-at-laptop.html` 內容放 ``` <p>我在咖啡廳新增這個檔案</p> ``` 然後送出 commit，接著 `git push` 出去 你會看到錯誤訊息！ git 會跟你說，有衝突，請先將資料夾內容下載同步，再更新 **第三步** 所以請輸入 `git pull` 先把資料夾更新到最新版本 接著用 `git log` 看一下，會看到有關 `create-this-file-at-home.html` 那個檔案的 commit **第四步** 這時再 `git push` 出去 你會看到 github 上面就被更新了 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把 github 專案連結，貼到留言區
## 課程目標 - 學會連線 github ## 課程內容 git 工具，光是一個人離線使用，就已經很好用了 再加上雲端功能，變成雲端專案，那就會更強大 上傳專案可分為兩種類型 第一種是公開專案 public repository 也就是所謂的開源專案 open source 在實務上，軟體工程師，會大量使用彼此開源分享出來的專案 學習跟開源社群互動，是工程師一個極度重要的技能 當然不可能所有程式碼都免費熱心給人用，所以會有第二種，稱為私人專案 private repository 也就是自己、或者團隊的私人專案 --- 業界最常用的 git 雲端服務有三家 github、gitlab、bitbucket 當然公司要自己架一套自己的 git server 也可以 不過以 open source 來說，主要會在 github 上面 --- 請自行註冊 github 帳號，之後建立一個 github 專案 Create a new repository -> 幫專案簡單命名 `my-first-testing-repo` -> 類型選 Public -> 初始化時別加任何檔案（通通選 None） 舉例來說，我剛建立的專案，網址在這： https://github.com/howtomakeaturn/my-first-testing-repo 回到本機的專案底下，依序輸入下列指令 ``` git remote add origin [email protected]:howtomakeaturn/my-first-testing-repo.git ``` 設定雲端 git 對應網址 ``` git branch -M main ``` 建立一個命名為 main 的分支 （本機上的分支命名是預設的 master，近年因為這有奴隸時代主人/奴僕的影子，在轉型正義之下，很多廠商把預設分支名稱改為 main） ``` git push -u origin main ``` 把本機的程式碼，推到 github 上去 --- 在網路上找文章的時候，有時候會看到主分支叫 master，有時會看到叫 main 這是因為轉型正義、政治正確的關係，新舊慣例有點衝突，自己習慣、轉換一下即可 --- 另外，在設定雲端 git 位置的時候，有文章會寫 `https://` 開頭，有文章會寫 `git@` 開頭 ``` git remote add origin https://github.com/howtomakeaturn/my-first-testing-repo.git ``` ``` git remote add origin [email protected]:howtomakeaturn/my-first-testing-repo.git ``` 其實功能一樣，前者是每次跟雲端 git 互動，都要驗證輸入帳密 後者是比較方便，每次都自動檢查電腦上的 ssh key 驗證，但一開始設定 key 會花些時間 通常來說，任意挑一種方式，都可以。但是 github 在 2021 年開始，不再允許 git push 時使用帳密驗證 所以，就去學一下 ssh key 的設定方式吧！需要在本機建立 ssh key，然後到 github 更新 key 資訊 請根據你的作業系統，自己上網找一下建立 ssh key 的方式，然後再找一下 github 設定 ssh key 的地方 --- 完成之後，這個開源專案，不但可以線上看到程式碼 https://github.com/howtomakeaturn/my-first-testing-repo 還可以線上看到 commit 提交紀錄 https://github.com/howtomakeaturn/my-first-testing-repo/commits/main ## 課後作業 接續前一課的作業，現在你打算把專案上傳到 github，當做雲端備份，也方便跟別人分享原始碼 請註冊一個 github 帳號，建立一個新的 repository，並且把之前做的個人品牌網站，上傳到 github 上傳之後，你應該會在 github 專案的頁面，看到專案的程式碼，也能看到多筆 commit 歷史紀錄 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 可以把 github 專案連結，貼到留言區
- 原文出處：https://dev.to/j471n/vs-code-extensions-to-take-your-coding-to-the-next-level-50od ## Documatic 此外掛將 [Documatic](https://www.documatic.com/) 引入 VSCode：使用簡單查詢快速搜尋大型程式碼庫。 Documatic 使用 AI 連結您的查詢和程式碼片段之間的關係，因此您不必知道要查找的確切關鍵字！ **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)  ## Sort lines 此外掛允許您按字母或數字快速對程式碼進行排序，從而在處理大文件時節省時間。當您有要排序的資料時，這會非常方便。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)  ## TabNine 此外掛使用 AI 提供程式碼自動完成建議，可以幫助您節省時間並提高程式碼品質。它支援很多語言和框架。但是要小心使用它，因為它會佔用你系統的很多資源。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)  ## **Template String Converter** 可以在程式碼編輯器中鍵入“${”時將普通字串轉換為模板字串。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter)  ## **Error Lens** ErrorLens 增強了語言診斷功能，突出顯示語言生成診斷的整行，並連結相關訊息。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)  ## **WakaTime** [WakaTime](https://wakatime.com/vs-code) 是一個開源 VS Code 外掛，用於從您的寫程式工時中，自動生成指標、分析和時間追蹤。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)  ## **Chat** 通過使用此外掛，您可以在 VS Code 中與您的 Slack 和 Discord 團隊聊天。 * **安靜的通知**：聊天應用程式可能會讓人分心。此外掛使聊天變得有用、上下文相關且不會分散注意力。 * **豐富的格式**：分享 Markdown 程式碼片段，並在您的聊天訊息中加入表情符號。 * **本地外觀**：在您喜歡的主題和網格編輯器佈局中使用聊天。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=karigari.chat)  ## **SVG Preview** 允許您直接在 VS 程式碼中查看 SVG 文件。如果您在 vs 程式碼中打開 SVG 文件，那麼預設情況下它會顯示 SVG 程式碼。使用它後，您可以看到 SVG 的預覽。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)  ## **Headwind** Headwind 是用於 Visual Studio Code 的 Tailwind CSS 類排序器。它通過解析您的程式碼並重新打印類別標籤來強制執行一致的類別排序。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)  ## **Material Design Palette Generator** [Material Design Palette Generator](https://marketplace.visualstudio.com/items?itemName=piyush-bhatt.vscode-mat-palette) 是一個 VSCode 外掛，用於生成 [material 調色板](https://material.io/design/color/the-color-system.html#tools-for-picking-colors)。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=piyush-bhatt.vscode-mat-palette)  --- 以上，簡單分享，希望對您有幫助！
這些外掛都在這個 VSCode 外掛包裡面 [TailwindCSS Kit](https://marketplace.visualstudio.com/items?itemName=KalimahApps.tailwindcss-kit) 原文出處：https://dev.to/kalimahapps/4-vscode-extensions-i-use-for-tailwind-2him ## 1. [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)  Tailwind CSS IntelliSense 是一個強大的工具，可以幫助開發人員更快、更高效地編寫程式碼。它為 Tailwind CSS 類別提供即時建議，減少錯誤並提高程式碼品質。使用 IntelliSense，開發人員可以提高工作效率、縮短學習曲線並改進應用程式的可存取性。如果您是使用 Tailwind CSS 的開發人員，一定要試試這個強大的外掛。 ## 2. [Tailwind Fold](https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold)  在使用 Tailwind 時，此外掛非常有用。長長的類列表會使 html 有點混亂，此外掛提供了一種隱藏它們並僅在需要時顯示的好方法。除了預設功能外，這些選項經過細心設計，幾乎可以滿足任何偏好。例如，我喜歡在點擊線條而不是類別本身時展開類別。 ## 3. [Tailwind Documentation](https://marketplace.visualstudio.com/items?itemName=alfredbirk.tailwind-documentation)  Tailwind Documentation 提供對官方 Tailwind CSS 文件的快速存取。此外掛使開發人員能夠直接從 VSCode 編輯器中存取 Tailwind CSS 文件，而無需打開瀏覽器或離開編輯器。 ## 4. [Tailwind Config Viewer](https://marketplace.visualstudio.com/items?itemName=KalimahApps.tailwind-config-viewer)  Tailwind 配置可能會令人困惑。它們可能呈指數級增長，並使用戶更難了解已解析的設定。這外掛使用戶能夠查看 **resolved** Tailwind 配置，它還會顯示任何與顏色相關的類別（text-\*、bg-\*、accent-\* ... 等）的顏色 --- 以上，簡單分享，希望對您有幫助！
## 前情提要 逛論壇或網站常常有惱人的蓋板廣告，要馬就是要你登入、註冊， 要馬就是搞一堆課程的販售廣告， 對重視使用者體驗的人來說，真的是一場噩夢！ 為了解決這個問題，我模擬了AdBlock的其中一個功能，刪除頁面上的元素！ 乾乾淨淨才是王道阿。 ## 效果 按下ctrl+Q啟動刪除元素模式：  被選取的會加上邊框色彩，讓人確認是否要刪除：  點選確認後：  煩人的元素就此消失在這個永恆的宇宙裡。 ## 觀念筆記 ### 套件一：toastr ```javascript= //toast.js cdn匯入 const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>` $('body').append(toastJS); ```  [測試效果反應網站](https://codeseven.github.io/toastr/demo.html)  [[十分鐘學習] toastr - 簡易提示訊息](https://ithelp.ithome.com.tw/articles/10197861) ### 套件二：SweetAlert2 ```javascript= //設定cdn使用Sweetalert套件 let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>` $('html').append(Sweetalert2) ```   有提供很多API範例，還可以自己定義可愛的小動物XD [官方網站](https://sweetalert2.github.io/) ### 監聽鍵盤組合鍵 ``` document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ //..... } ``` ### Object.assign 動態修改樣式  [用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！](https://codelove.tw/@JsLover0018/post/Ja64Kx) ## 油猴程式碼 ```javascript= // ==UserScript== // @name 刪除廣告元素 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match *://*/* // @require https://code.jquery.com/jquery-3.6.3.min.js // @icon https://www.hexschool.com/ // @grant none // ==/UserScript== (function() { //--------------------------------------- // 宣告變數 let set let Check = true; let List=[] //設定選取的border色彩效果 let styleNeon = `@keyframes neon-color { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }` $('style:last').append(styleNeon) //設定cdn使用Sweetalert套件 let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>` $('html').append(Sweetalert2) //使用者點選某個元素 執行刪除元素function function SetDeleteEl(e){ e.preventDefault(); set=e.target.class console.log(set) const border={ border:"4px dotted red" } const Neon={ animation: "neon-color 2.5s linear infinite" } const NoBorder={ border:"none" } const StopNeon={ animation: "" } Object.assign(e.target.style,border) Object.assign(e.target.style,Neon) //e.target.remove() if (Check==true){ Swal.fire({ title: '確定要刪除這個元素?', showDenyButton: true, showCancelButton: false, confirmButtonText: '確認', denyButtonText: `取消`, }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { e.target.remove() List.push(e.target.className) localStorage.setItem('List',List); Check=false; Swal.fire('成功刪除此元素!', '', 'success') } else if (result.isDenied) { Check=false; Swal.fire('動作已取消', '', 'info') Object.assign(e.target.style,NoBorder) Object.assign(e.target.style,StopNeon) }; }); } //選取流程結束後 解開選取流程的事件綁定 $('body').unbind('click',SetDeleteEl) } //toast.js cdn匯入 const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>` $('body').append(toastJS); // 當使用者按下Ctrl+Q 就執行主程序 document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ RemoveListItem(); toastr.options = { // 參數設定[註1] "closeButton": false, // 顯示關閉按鈕 "debug": false, // 除錯 "newestOnTop": false, // 最新一筆顯示在最上面 "progressBar": false, // 顯示隱藏時間進度條 "positionClass": "toast-bottom-right", "preventDuplicates": false, // 隱藏重覆訊息 "onclick": null, // 當點選提示訊息時，則執行此函式 "showDuration": "300", // 顯示時間(單位: 毫秒) "hideDuration": "1000", // 隱藏時間(單位: 毫秒) "timeOut": "2000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒) "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒) "showEasing": "swing", // 顯示動畫時間曲線 "hideEasing": "linear", // 隱藏動畫時間曲線 "showMethod": "fadeIn", // 顯示動畫效果 "hideMethod": "fadeOut" // 隱藏動畫效果 } toastr.success( "已開啟刪除元素模式！" ); $('body').on('click',SetDeleteEl) Check=true }}) function RemoveListItem(){ if (localStorage.getItem('List')!=null){ item=localStorage.getItem('List').split(',') for (i=0;i<item.length;i++){ item[i]='.'+item[i] item[i]=item[i].replaceAll(' ','.') try{ document.querySelector(item[i]).remove()} catch{} } // item='.'+item // item=item.replaceAll(' ','.') // document.querySelector(item).remove() } } //-------------------------------------------------------- })(); ``` ## 心得 短短150行左右的程式碼，就寫得好辛苦！（汗 過去寫過很多次類似的東西，所以基本上沒有卡關的地方， 只是設計邏輯、嘗試的過程還是比想像的還要耗精神( ´•̥̥̥ω•̥̥̥ ) 但寫出來比過去快很多，也比過去好看超級多的。 給自己一個讚讚！ 重新把localstorge複習一遍，Object.assign、套件使用等。 算是一個確確實實的實力鞏固過程。 ## 延伸 未來可以新增控制黑名單元素的UI。 可以新增、刪除，看有哪些元素被列入要刪除的黑名單。
## code spell checker  不管是自己的英文程度太差，還是粗心大意，把英文字拼錯是家常便飯， 這款擴充套件就是來幫助你的救星！ 使用code spell checker馬上會幫你標出奇奇怪怪的單字， 讓你確定沒有不小心把1跟l搞錯，就debug一整天的那種尷尬事件！ ## live server  寫前端最需要的就是看到畫面٩(｡・ω・｡)，و 每次如果都要自己在網址列找到檔案的位置才打開html， 那實在是太沒有工程師的效率了，簡直荒唐！！ 當然要使用這款live server來架，馬上就可以看到自己的前端畫面， 而且儲存之後自動更新，根本神器。 ## material icon theme  沒有什麼其他的，純粹就是好看！ 裝了這款之後可以讓icon變得比較不一樣，整天都跟程式為伍， 當然就是要追求好看的圖圖。 ## prettier - code formatter  超級讚的排版好物，懶得自己縮排了啦！就靠這款prettier， 讓你的程式從原本醜醜的排版， 最後，變成人類也能看懂的正常程式，必裝神器之一！ ## 補充有人整理的 ### github  [專案點這邊](https://github.com/Lin-jun-xiang/vscode-extensions-best/blob/main/README_%E4%B8%AD%E6%96%87.md) ### 影片分享 https://www.youtube.com/watch?v=xGE_M3R69YA [ Alex 宅抬槓 ] Visual Studio Code 外掛生存戰｜從 2019 到 2020 前端開發必備安裝推薦 ## 心得 以上都是寫程式過程中會發現的需求，自然會想要找擴充來安裝，提升效率、美觀， 利用這些擴充功能，寫程式的體驗真的變得很舒服呢(๑•́ ₃ •̀๑)。 未來如果有什麼新的，也會持續補充，也歡迎大家分享討論唷～～
Git 是軟體工程師最重要的工具之一，今天來學一點 Git 吧！ 原文出處：https://dev.to/swordheath/git-the-basic-commands-every-developer-should-know-2m1e **什麼是 Git？** Git 是一個追蹤文件變更的版本控制系統。使用 Git 可以讓您保留所有更改的記錄並根據需要返回到特定版本。它使用方法簡單，佔用空間小，而且非常高效。它的分支模型使它有別於幾乎所有其他可用的 SCM。您可以使用 GitHub 或其他線上主機來儲存文件的備份及其修訂歷史。 **Git 的主要元件** 對我來說，Git 是在團隊專案中使用的絕佳工具，因為它有助於避免程式碼混淆，並帶來一個簡單而有效的工作流程。 ** Repository** Git 存儲庫（或簡稱 repo）包含所有專案文件以及整個修訂歷史記錄。您使用一個普通的資料夾（例如網站的根目錄夾）並告訴 Git 將它變成一個存儲庫。這將建立一個 .git 子文件夾，其中儲存了所有用於追蹤修改的 Git 元資料。簡而言之，存儲庫是您保存程式碼的地方。 **Commit** 要向存儲庫加入新程式碼，您需要進行提交，這是存儲庫在特定時間點的快照、將特定更改或一系列更改提交到存儲庫中的文件。 Git 的歷史紀錄由連續的提交組成。 **Branch** 分支用於儲存您的更改，直到它們準備就緒。在主分支（master）保持穩定的情況下，您可以在分支上工作。完成後，您可以將其與母版合併。最大的好處是您可以在一個存儲庫中擁有多個分支，並在需要時合併它們。 **Pull requests** 這是 Git 中用於在將更改合併到您的程式碼庫之前討論更改的技術。PR 不僅僅是一個通知；它是針對所提議功能的專門討論串。這在多人處理同一份程式碼時特別方便，允許開發人員檢查彼此的工作。 現在我們已經簡要討論了 Git 的主要元件，我想列出每個開發人員在開始使用 Git 之前必須知道的**10 個基本 Git 命令**。 **1。開始一個新的存儲庫** ``` git init ``` **2。分別設定作者姓名和電子郵件地址以用於您的提交** ``` git config - - global user.name “[name]” git config - - global user.email “[email address]” ``` **3。從遠程存儲庫下載現有程式碼** ``` git clone <https://name-of-the-repository-link> ``` **4。建立一個新分支** ``` git branch <branch-name> ``` **5。在 master 中合併分支** ``` git merge <branch-name> ``` **6。從遠程存儲庫取得更新** ``` git pull <remote> ``` **7。將文件加入到 Git 的暫存區** ``` git add <file or directory name> ``` **8。存儲庫的當前狀態** ``` git status ``` **9。將在 master 分支上所做的更改發送到您的遠程存儲庫** ``` git push [variable name] master ``` **10。更改 head（在版本歷史記錄中加入一筆更新）** ``` git commit -m " Commit Message" ``` --- 這些是每個使用 Git 的人都必須知道的主要指令。Git 非常好用，指令數量也相當多。但是記住這些指令並不是一項艱鉅的任務——您只需要開始使用 Git，大多數指令都會憑直覺記住。
有幾位同學已經寫完系列一～九的全部作業了 整體能力已經可以準備開始面試前端工程師的職缺了 這邊寫一篇簡單說明 # 需要補充的技能 前端技能中最困難的部份已經有相當基礎了 剩下有些東西沒那麼難，但要學一下，上班會用到 這些東西我未來可能會寫教材，但我最近很忙，近期無法寫新教材 ## git 程式碼版本管理工具，找書或者上網找文章學一下，至少要會 add commit push pull 這些指令 ## npm 作業都是用線上環境，實際開發都是在本機為主，需要知道 javascript 套件管理工具 npm 怎麼用 ## create-vue https://github.com/vuejs/create-vue 要能在本機架起來 vue 開發環境，這款至少要知道一下 ## vue 3 教材安排是學 vue 2，但現在很多公司都已經轉用 vue 3 語法了 背景知識大同小異，但語法差異不少，要知道一下怎麼轉成 vue 3 寫法 --- 老樣子，學的時候有點一知半解沒關係，大概會用就好，畢竟是面試 junior developer 的職缺，公司通常會有工程師同事，技術長＆他們會協助你實務上的細節 # 投履歷的公司篩選 在找工作的時候，投那種「無經驗可」的職缺 很多公司會寫「一年以上工作經驗」，這種就是不歡迎半路出家剛學完者 因為很多人從補習班畢業之後，連 hello world 都寫不出來，公司想要避免遇到這種人 就先投「無經驗可」的職缺就好 公司類型基本上有分「接案公司」、「做自己公司產品」兩種 第一份工作沒差，去接案公司練功、去做自家產品慢慢打磨產品，都可以，待個半年，先進入業界再說，都可以學到很多 長期來講，我之後再寫文章說明差異 # 履歷表的寫法 基本上你照自己習慣寫，簡潔有力即可，這行業基本上是實力主義，唬爛幫助不大 但有幾個東西務必要寫進去 ``` 學習的過程中，為了瞭解網頁的基礎，而不只是當個框架的使用者，我有用純 html/javascript 練習多個元件 [附上第三課全部作業] 並且有找一些看起來很紅的業界套件，練習導入使用 [附上第四課全部作業] 然後我有用 vue 寫了多個應用程式練習 [附上第八課全部作業] 還有試著拿 vue 生態系的元件庫做範例，模仿做了幾個元件 [附上第九課全部作業] ``` 我認為履歷表附上這些東西，會讓99%的面試官印象深刻，覺得你幾乎是「即戰力」，對你更有信心 # 結語 以上，如果你寫完系列一～九全部內容了，那我認為你離上班已經很接近了 如果正在準備轉職，準備一下，試著投一些履歷試試看，試試水溫 不用急著辭職，因為今年全球景氣充滿不確定性，但就試試看能收到多少面試邀請，等於秤秤自己的斤兩，比較有個底 順利上班之後記得來寫文章分享心得 然後最好養成習慣寫技術部落格，直接在這邊寫即可 求職過程有疑問，一樣多多來這邊發問即可 求職卡關、面試不順、薪資待遇有疑慮、業界實務有困惑，都上來發問即可 我會視情況公開 or 私下回答 以上，有打算轉職的同學，祝大家早日上班囉～
*先說清楚一件事：* *這不是要抨擊其他框架，如 React、Vue 或 Angular。我使用了所有這些工具，而 React（使用 NextJS）仍然是我的首選。* 原文出處：https://dev.to/jannikwempe/why-svelte-is-different-and-awesome-4381 # 什麼是 Svelte？ > Svelte 是一種全新的用戶界面建置方法。 React 和 Vue 等傳統框架在瀏覽器中完成大部分工作，而 Svelte 將這些工作轉移到建置應用程式時發生的**編譯步驟**。 TLDR; 它類似於 React 或 Vue，但主要區別在於它是 [編譯器](https://svelte.dev/blog/frameworks-without-the-framework)。 上面連結的博客文章中引用了一句話： >等等，這個新框架有 runtime 嗎？啊。謝謝，我先不用了。 > – 2018 年的前端開發人員 儘管這在 2018 年沒有發生，但我認為我們會在某個時候達到這種心態。 ## “Svelte 是一個編譯器”是什麼意思？ 它本質上意味著特定於 Svelte 的程式碼被編譯（考慮轉換）為 JavaScript，可由瀏覽器執行。 您可能知道的另一個編譯器是 TypeScript 編譯器 (`tsc`)，它將 TypeScript 編譯為 JavaScript。這是同一個概念。 那麼這是怎麼回事呢？您還可以將 React 程式碼編寫為 `.js` 並發布。的確如此，但是如果沒有發布 React 執行時系統，JavaScript 程式碼將無法在瀏覽器中執行。 > 執行時系統是指使軟體程序能夠在計算機系統上執行的軟體和硬件資源的集合。 *注意：儘管我很多人都在談論“（無）runtime 時”，但更準確地說應該是“（無）runtime **系統**”。* 閱讀來自 [Dan Abramov](https://mobile.twitter.com/dan_abramov) 的精彩 [React as a UI Runtime](https://overreacted.io/react-as-a-ui-runtime/) 博文.它深入解釋了 React 是一個 runtime（系統）。 除了不需要 runtime 之外，還有另一個好處。 Svelte 可以擴展和更改 JavaScript 語法，因為編譯器最終將其編譯為 JavaScript。因此 Svelte 可以擺脫 JavaScript 語法提供的一些限制。 這也可能是一個缺點，因為如果 Svelte 嚴重偏離 JavaScript 語法，它實際上將成為另一種需要學習的語言。不用擔心，Svelte 試圖堅持 JavaScript 語法。 # Svelte 作為編譯器的好處 由於 Svelte 是一個編譯器，因此不需要將執行時系統加載到客戶端中，因此有幾個優點。這些都是 Svelte 的特別之處。我想到的最重要的優勢將在下一節中展示。 ## 效能 這應該是顯而易見的：沒有為客戶端加載的執行時會導致更快的加載時間。 下圖顯示了 JS 框架基準測試的摘錄（請參閱 [this GitHub repo](https://github.com/krausest/js-framework-benchmark)）。它基於一個帶有隨機條目的大表，並測量各種操作的時間，包括渲染持續時間。  使用 Svelte 的應用程式提供了最少的程式碼。 *（不知何故，Svelte 似乎需要比普通 JS 更少的程式碼，我不知道這是怎麼發生的 😀）* 但它不僅向客戶端發送更少的程式碼，而且執行速度更快：  原因之一是 Svelte 不使用虛擬 DOM (vDOM)。 Svelte 不依賴於 vDOM 和 DOM 之間的差異來更新 DOM。其他提到的框架，如 React、Vue ~~和 Angular~~ *（編輯：Angular 使用增量 DOM）* 確實使用 vDOM。您可以在 Sveltes 博客文章 [Virtual DOM is pure overhead](https://svelte.dev/blog/virtual-dom-is-pure-overhead) 中了解有關此內容的詳細訊息。 該帖子的快速引用： > Svelte 是一個編譯器，它知道**在建置時**你的應用程式會發生什麼變化，而不是等到執行時才開始工作。 ## 微前端架構中的 Svelte 微前端 (MFE) 本身就是一個主題（在 [本文](https://martinfowler.com/articles/micro-frontends.html) 中閱讀它）由 [Martin Fowler](https://twitter.com/martinfowler)）。但這個概念基本上是不同的團隊可以分別開發前端的不同部分。團隊還可以選擇他們想要使用的技術堆棧。因此，客戶端最終可能會加載不同版本的 Angular、Vue、React 等： > 一些微前端的實現會導致重複依賴，*增加我們的用戶必須下載的字節數*。 *（來自上面連結的 Martin Fowler 文章）* 但是 Svelte 呢？ Svelte（也使用它的不同版本）並沒有增加客戶端必須加載的 kbs 的缺點。 Svelte 是 MFE 架構的絕佳選擇。 # 其他福利 這些好處並不是因為 Svelte 是一個編譯器，而是它們讓 Svelte 脫穎而出。 ## REPL Svelte 有一個很棒的 REPL。您可以毫不費力地開始玩耍和嘗試。這太棒了！ [試用](https://svelte.dev/repl/hello-world?version=3.37.0)。 也可以分別點擊“JS Output”或“CSS Output”查看編譯後的JS和輸出的CSS（可以寫在同一個`.svelte`文件中）。 這足以證明 Svelte 是一個編譯器嗎？ 😉 REPL 也用在他們很棒的教程中。您可以動手學習 Svelte：[Svelte 教程](https://svelte.dev/tutorial/basics)。 ## 內置功能 Svelte 內置了一些幾乎所有應用程式（至少是大型應用程式）都需要的功能，例如過渡、動畫和 store。首先不需要額外的依賴或在各種選擇之間做出決定。 > store 只是一個具有訂閱方法的物件，只要 store 值發生變化，就可以通知感興趣的各方。 ``` import { writable } from 'svelte/store'; export const count = writable(0); export const increment = () => { count.update(n => n + 1); } ``` 就是這樣。您可以在您的應用中導入 `count` 和 `increment`。簡單的！ [試用 Svelte store 教程](https://svelte.dev/tutorial/writable-stores) Svelte 中的動畫和過渡很容易使用。你能猜出下面的程式碼在做什麼嗎？ ``` {#if visible} <p in:fly="{{ y: 200, duration: 2000 }}" out:fade> Flies in, fades out </p> {/if} ``` [試用 Svelte 轉換教程](https://svelte.dev/tutorial/in-and-out) 但它們也可以用於更複雜的事情，如下所示：  享受在 React 中建置它的樂趣🤪 [試用 Svelte 動畫教程](https://svelte.dev/tutorial/animate) #SvelteKit [SvelteKit](https://kit.svelte.dev/) 是它自己的主題。但這是我如此興奮的主要原因之一。想想 SvelteKit 之於 Svelte，就像 NextJS 之於 React。 但為什麼它很棒？ >SvelteKit **完全接受無伺服器範式**，並將在支持所有主要無伺服器提供商的情況下推出，並帶有一個“適配器”API，用於針對我們未正式迎合的任何平台。 閱讀 [SvelteKit 有何關係？](https://svelte.dev/blog/whats-the-deal-with-sveltekit) 在我撰寫本文時，SvelteKit 目前處於測試階段。等不及發布了！ # 結論 我可以繼續下去（我有沒有提到 Svelte 是用 TypeScript 編寫的？）。但這結束了。你可以看到我很興奮，對吧？我會賭 Svelte。學習 Svelte 以及與基於執行時系統的框架的區別絕對不是浪費時間。 我期待 Sveltes 未來的發展。我希望它能很快得到更廣泛的使用，我可以使用 Svelte 開始客戶專案😉 *閱讀更多關於 [我的博客上的前端和無伺服器](https://blog.jannikwempe.com/)。*
原文出處：https://dev.to/mhatvan/10-reasons-why-i-recommend-svelte-to-every-new-web-developer-nh3 儘管 [Svelte](https://svelte.dev/) 的初始版本早在 2016 年 11 月就發布了，但它在 JavaScript 前端框架中仍然處於劣勢，並且最近才開始受到社區應有的關注。 在使用了多年的各種 JavaScript 框架（包括 Angular、React 和 Vue.js）之後，我認為我對編寫程式碼如何愉快以及如何令人沮喪有了良好的總體印象。 幾年前，使用 [jQuery](https://jquery.com/) 編寫程式碼感覺就像來自純 JavaScript 的啟示。然後在我的第一份工作中，我開始使用 Angular 2，突然間 jQuery 感覺像是一個拖累。現在，React 是最酷的孩子，相比之下，Angular 感覺太複雜了。您可能會看到這是怎麼回事！ 對我來說，Svelte 是快速變化的 JavaScript 框架生態系統中的下一個進化步驟。用 Svelte 的方式編寫感覺很容易，你可以看出它的建立者 [Rich Harris](https://twitter.com/Rich_Harris)厭倦了現有框架要求您學習的所有煩人的抽象和必要的樣板程式碼。 現在你可能會問自己這個問題： ## 是什麼讓 Svelte 與眾不同？ 您可能聽說過 Svelte 出現在諸如 [前端框架的真實世界比較](https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1) 和 [State of JS Survey](https://2019.stateofjs.com/front-end-frameworks/) 等開發人員調查將其列為在捆綁包大小、性能、程式碼行數方面排名最好的框架之一以及最重要的開發者滿意度。 與流行的 [React](https://reactjs.org/) 和 [Vue.js](https://vuejs.org/) 庫相比，它們在執行時執行大量工作並使用一種稱為“虛擬”的技術DOM diffing”用於檢測變化，Svelte 作為建置步驟被編譯成無框架的 vanilla JavaScript，因此可以從大量程式碼優化中受益。 出於本能的猶豫，我起初將 Svelte 視為“只是另一個 JavaScript 框架”而不予考慮，也沒有費心去研究它。第二次聽說後，我想知道：Svelte 是炒作還是真的那麼好？我決定對它進行實戰測試並將其用於我的個人專案。 現在幾個月後，我可以給你一個明確的答案： ## Svelte 簡單、強大且優雅，您會愛上它！ 事不宜遲，以下是我向每位開始學習編程的新 Web 開發人員推薦 Svelte 的十大理由： ## 1. Svelte 元件易於理解 如果您以前從未見過 Svelte 語法，這就是一個簡單示例的樣子： https://gist.github.com/mhatvan/3630989d364e4020f26ebb96d2d7c332 與其他引入大量抽象概念、需要花時間學習和理解的前端框架相比，看到 Svelte 只是並排使用普通的舊 HTML、CSS 和 JavaScript，真是令人耳目一新。您可以通過其對初學者友好的語法查看並輕鬆辨識此處發生的情況。 ## 2.簡單寫簡潔的程式碼 正如您在上面的程式碼示例中看到的，您編寫的業務邏輯既簡單又易於閱讀。畢竟，您編寫的程式碼越少，錯誤就越少，對吧？ Svelte 的天才創造者 Rich Harris 在他的文章 [少寫程式碼](https://svelte.dev/blog/write-less-code) 中對 React 和 Vue.js 進行了一些很好的比較。根據他對編寫簡單的兩個數字相加邏輯所需的字符的檢查，React 元件通常比其 Svelte 元件大 40% 左右！ ## 3. 與標記語句的反應性 每當您希望根據其他變數更新和重新計算變數值時，您可以使用反應式聲明。只需在您想要響應的變數前面放一個美元符號，您就可以開始了！ https://gist.github.com/mhatvan/7e2f0fea362c79d64a34cb7e0c088453 每次單擊按鈕時，`count` 將增加 1，而 `doubled` 將知道 `count` 的值發生變化並相應地更新。從反應性的角度思考真的很有趣，而且寫起來感覺很好。 ## 4.開箱即用的簡單全局狀態管理 無需任何復雜的第三方狀態管理工具，如 [Redux](https://redux.js.org/) 或 [Vuex](https://vuex.vuejs.org/)。 您只需將一個變數定義為可寫/可讀存儲，並在任何以 `$` 符號為前綴的 `.svelte` 文件中使用它。 https://gist.github.com/mhatvan/710b6bb6df4ece7e9a5f53886eb2dd0d 在此示例中，我們檢查當前環境，它作為值存在於我們的商店中，並使用它來決定是否應顯示 cookie 通知。很簡單，不是嗎？ 使用 Svelte 存儲，您也永遠不必擔心內存洩漏，因為以 `$` 符號為前綴的存儲變數充當自動訂閱和自動取消訂閱。 ## 5. 內置可存取性和未使用的 CSS 檢查 Svelte 希望讓網路變得更美好，並通過程式碼中的有用提示幫助您。 每當您忘記將 alt 屬性放在 `<img>` 標籤上時，Svelte 都會為您顯示 `A11y: <img> 元素應該有一個 alt 屬性` 提醒。在 Svelte 中實現了一長串可存取性檢查，它們會提示您而不會成為麻煩。 為了使程式碼盡可能簡潔並避免遺留程式碼片段，只要在元件中找不到相應的標記，Svelte 還會為您標記未使用的 CSS 選擇器。 ## 6.元件自動導出 每當你想在元件 B 中使用元件 A 時，你通常需要先編寫程式碼導出元件 A，這樣它才能被元件 B 導入。使用 Svelte，你永遠不必擔心忘記導出， `.svelte` 元件始終默認自動為您導出，並準備好由任何其他元件導入。 ## 7. 默認情況下樣式是有範圍的 類似於 [CSS-in-JS](https://webdesign.tutsplus.com/articles/an-introduction-to-css-in-js-examples-pros-and-cons--cms-33574) 庫，Svelte默認情況下，樣式是有範圍的，這意味著 `svelte-<unique-hash>` 類名將附加到您的樣式，因此它們不會洩漏和影響任何其他元件樣式。當然，您可以選擇全局應用樣式，只需在它們前面加上 `:global()` 修飾符，或者如果您願意，也可以只使用 `.css` 文件。 ## 8. #await 塊 對於大多數 Web 應用程式，您將需要處理異步資料以向用戶顯示有用的統計訊息。 https://gist.github.com/mhatvan/2e44dc1ec402f477830f90bd77614f34 `{#await}` 塊的優點是您不必為已解決/拒絕的承諾定義額外的狀態，您只需在模板中定義內聯變數即可。 ## 9.傳遞道具的速記屬性 如果存在與變數名稱相同的 prop 名稱，我們可以將其作為簡寫屬性傳遞給元件，如下面的“{message}”。與使用 `message="{message}"` 相比沒有任何優勢，但更簡潔。 https://gist.github.com/mhatvan/9085f5330eeccdc2238e4f4e609b4f88 在上方，您可以看到根據 round 是真還是假將 class:round 屬性應用於按鈕。這很容易成為一個可重用的元件，您可以從外部傳遞 `round` 的值來有條件地決定元件的樣式。 ## 10.內置效果和動畫 Svelte 預裝了強大的效果模塊： - `svelte/motion` 效果，如補間和彈簧 - `svelte/transition` 效果，如淡入淡出、模糊、飛行、滑動、縮放、繪製 - `svelte/animate` 效果如翻轉 - `svelte/easing` 效果，如彈跳、立方體、彈性等等 Svelte 官方教程中有幾個示例，但我最喜歡[這個進度條示例](https://svelte.dev/tutorial/tweened)，因為它很簡單。 動畫是 web 開發的一個領域，您通常會在其中尋找外部依賴項來為您處理它，因此您可以開箱即用地使用它們真是太好了。 ## 不採用 Svelte 的合理理由 為了避免讓這篇文章聽起來像一篇冗長的狂熱帖子，以下是我迄今為止使用 Svelte 時遇到的缺點： ### `.svelte` 文件不能導出多個元件 一方面，我們受益於默認自動導出的 .svelte 文件，但這也意味著我們無法從單個文件導出多個元件。我不認為這有什麼大不了的，因為它會迫使您遵循最佳實踐來使用許多小的獨立元件編寫您的應用程式，這使它們易於理解和單元測試。 ### 一般模板語法 為了顯示條件邏輯，Svelte 使用類似於眾所周知的 [Handlebars](https://handlebarsjs.com/guide/builtin-helpers.html#if) 模板語法的語法。 https://gist.github.com/mhatvan/95cc1837441a272cb8422fcae24d91e0 這種編寫邏輯的方式我沒有遇到任何問題，但我更喜歡更簡潔的語法。 ### 使用 export let 在子元件中接收 props 當您想要將值從父元件傳遞到子元件時，您需要將一個值作為屬性傳遞，並使用帶有匹配變數名稱的 export let 來接收它。 https://gist.github.com/mhatvan/b67ceafb05d21c15b5782c068690d632 在現代 JavaScript 中，`export` 通常用作導出模塊的關鍵字和 `let` 聲明塊範圍變數，所以我覺得語法濫用現有關鍵字，但我習慣了它並且效果很好. ###開發速度 這與 Svelte 的開發體驗沒有直接關係，但您絕對應該知道，在財務支持方面，Svelte 無法（目前）與更大的和讚助的開源專案競爭，如 React、Angular、Vue.js 和其他專案，截至目前的貢獻者數量和受歡迎程度。 儘管如此，社區正在迅速發展，社區為 Svelte 建置的第三方專案列表也在不斷增加，這些專案可在 [Made with Svelte](https://madewithsvelte.com/) 上找到。開發 Svelte 相關工具的開發人員都是天才，您可以隨時在 [Discord](https://discord.com/invite/qa4pnmw) 頻道、[Twitter](https://twitter.com/sveltejs) 上尋求幫助) 或 [Reddit](https://reddit.com/r/sveltejs)。 Svelte 最近還加入了 TypeScript 支持，而且效果很好！ 我喜歡 Svelte 的易用性、較小的包大小和開發人員體驗等因素，因此我可以接受較慢的開發速度作為權衡。如果您總是需要盡可能快地合併最新功能，那麼您可能需要查看其他可用的 JavaScript 框架。 ### 缺少可用的工作 大多數公司仍在尋找對三大前端框架有經驗的開發人員，但也有各種知名的 Svelte 早期採用者，如 IBM、Apple、Philips、GoDaddy、1Password 或紐約時報，僅舉幾例.您可以在 [Svelte 網站](https://svelte.dev/) 底部找到大量使用 Svelte 的公司。通常，採用新框架需要一段時間才能出現在公司的工作機會中。儘管如此，Svelte 學習起來很有趣，許多開發人員喜歡使用 Svelte，尤其是在他們自己的個人專案或小規模應用程式中。 ## 結論 如果對初學者友好的語法、較小的包大小輸出和 Svelte 的瘋狂性能對您來說是一個不錯的選擇，我建議您開始使用 [Svelte 教程](https://svelte.dev/tutorial/basics)。該教程非常詳細，您可以快速了解該框架的強大功能。 在 JavaScript 框架的世界裡，事情肯定會快速變化，我希望你和我一樣相信 Svelte 擁有所有的優勢和潛力，可以讓它成為新的 #1 JavaScript 前端框架！ 您之前使用過 Svelte 嗎？你的經驗是什麼？ 在評論中告訴我，我很想知道。 感謝閱讀，希望您喜歡！ ## 有用的資源 - [Svelte 教程](https://svelte.dev/tutorial/basics) - [Svelte REPL](https://svelte.dev/repl) - [Rich Harris - 重新思考反應性](https://www.youtube.com/watch?v=AdNJ3fydeao) - [為什麼要苗條](https://github.com/feltcoop/why-svelte) - [為什麼 SvelteJS 可能是新 Web 開發人員的最佳框架](https://dev.to/bholmesdev/why-sveltejs-may-be-the-best-framework-for-new-web-devs-205i) - [為什麼我們從 React 轉向 Svelte](https://medium.com/better-programming/why-we-moved-from-react-to-svelte-f20afb1dc5d5) - [我喜歡 Svelte 的寫作風格](https://css-tricks.com/what-i-like-about-writing-styles-with-svelte/) - [我在 React 和 Svelte 中建立了完全相同的應用程式。這是差異。](https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-svelte-here-are-the-differences-c0bd2cc9b3f8) ## 正在尋找 Svelte 支持的伺服器端渲染解決方案？ 在使用 [Sapper](https://sapper.svelte.dev/) 接觸框架後，我是一個忠實的粉絲，一有機會就嘗試推廣 Svelte 之道。 如果您要建立一個網站並正在尋找合適的工具，我發表了一篇關於我迄今為止使用 Sapper 的經驗的文章，供您在此處閱讀：[“為什麼我為我的網站選擇 SapperJS，以及我做了什麼”到目前為止，我已經了解了該框架”](https://markushatvan.com/blog/why-i-chose-sapperjs-for-my-website-and-what-ive-learned-about-the-framework-so-遠的)。
原文出處：https://dev.to/mikenikles/why-i-moved-from-react-to-svelte-and-others-will-follow-210l # React 多年來一直是我的首選 2015 年 10 月 14 日，我主持了 [首屆 React 溫哥華聚會](https://www.meetup.com/ReactJS-Vancouver-Meetup/events/225362860/)。當時我在一年中的大部分時間裡都在使用 React，並希望將志同道合的開發人員聚集在一起。 那時的 React，我敢說，是 web 前端世界的革命性的。與 jQuery、Backbone.js 或 Angular 1.x 等替代方案相比，使用 React 進行開發感覺直觀、清新且富有成效。就個人而言，隔離建置塊（又名元件）的想法真的很吸引我，因為它自然會導致結構化、組織良好且更易於維護的程式碼庫。 在接下來的幾年裡，我一直密切關注 Angular 2.x+、Vue 等，但沒有一個是值得跳槽的選擇。 # 然後我了解了 Svelte 我第一次了解 Svelte 是在 2018 年年中，也就是 3.0 版發布前將近一年（見下文）。 “[計算機，為我建置一個應用程式。](https://www.youtube.com/watch?v=qqt6YxAZoOc)”[Rich Harris](https://twitter.com/Rich_Harris) 讓我著迷Svelte。 > 如果您不熟悉 Svelte ([https://svelte.dev/](https://svelte.dev/))，請存取網站並花 5 分鐘閱讀介紹。 閱讀了嗎？真的？優秀👍 看完影片後，我心中的主要問題是是否值得學習 Svelte 並開始將其用於新專案甚至現有專案。平心而論，Svelte 給我留下了深刻的印象，但仍然不足以讓我完全接受它。 # Svelte 3.x 2019 年 4 月 22 日 - [Svelte 3：重新思考反應性](https://svelte.dev/blog/svelte-3-rethinking-reactivity) 是我一直在等待的博文。 > 請花一些時間閱讀博文並[觀看影片](https://www.youtube.com/watch?v=AdNJ3fydeao) - 這是關於電子表格的，但我保證它很有趣😉 為什麼這是一件大事？首先，Svelte 團隊一直在談論版本 3，我想看看它的實際應用。另一方面，Svelte 及其承諾比我第一次聽說 React 時更讓我興奮。 那時我指導 Web 開發人員，並花了很多時間讓他們加快 React 的速度。為了開發 React 應用程式，需要學習、理解並在一定程度上掌握 JSX、CSS-in-JS、Redux、create-react-app、SSR 和其他概念。 > 對於 Svelte，這些都不是必需的。 ``` <script> let name = 'world'; </script> <style> h1 { color: blue; } </style> <h1>Hello {name}!</h1> ``` 夠簡單嗎？我同意。事實上，它非常簡單，我將它推薦給我的 Web 開發新手。 ## 很快，那段程式碼發生了什麼？ `script` 標籤是元件邏輯所在的位置。 `style` 標籤定義了這個元件的 CSS - 這些都不會洩漏到元件之外，所以我們可以安全地使用 h1 並且它只適用於這個元件。它是真正的 CSS，而不是偽裝成 CSS 的 Javascript 對像或偽裝成 CSS 的字串文字。 底部是元件的 HTML。使用帶有 `{myVariable}` 的變數。與 React 的 JSX 相比，Svelte 允許您使用正確的 HTML 標籤，例如 `for`、`class` 而不是 `forHtml` 和 `className`。請參閱 React 文件中的“[屬性差異](https://reactjs.org/docs/dom-elements.html#differences-in-attributes)”以獲取所有非標準 HTML 屬性的列表。 # 讓我們重建 React 示例 為了讓您了解 Svelte 與 React 的對比，讓我們重新建置 [https://reactjs.org/](https://reactjs.org/) 上列出的內容。 ## 一個簡單的元件 請參閱上面的程式碼片段。 ## 一個有狀態的元件 [互動演示](https://svelte.dev/repl/6e9ef214ae774287b21f902d7e6f0e68?version=3.16.6) ``` <script> let seconds = 0; setInterval(() => seconds += 1, 1000); </script> Seconds: {seconds} ``` React：33行 Svelte：6 行 ## 一個應用程式 [互動演示](https://svelte.dev/repl/817d413fd6c344bf859f0dbf8063de2f?version=3.16.6) ``` <script> /* App.svelte */ import TodoList from './TodoList.svelte'; let items = []; let text = ''; const handleSubmit = () => { if (!text.length) { return } const newItem = { text, id: Date.now(), }; items = items.concat(newItem); } </script> <div> <h3>TODO</h3> <TodoList {items} /> <form on:submit|preventDefault={handleSubmit}> <label for="new-todo"> What needs to be done? </label> <input id="new-todo" bind:value={text} /> <button> Add #{items.length + 1} </button> </form> </div> ``` ``` <script> /* TodoList.svelte */ export let items = []; </script> <ul> {#each items as item} <li key={item.id}>{item.text}</li> {/each} </ul> ``` React：66行 Svelte：43 行 ## 使用外部插件的元件 [互動演示](https://svelte.dev/repl/28f4b2e36e4244b8b23cae3d584c4c88?version=3.16.6) ``` <script> const md = new window.remarkable.Remarkable(); let value = 'Hello, **world**!'; </script> <svelte:head> <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.0/remarkable.min.js"></script> </svelte:head> <div className="MarkdownEditor"> <h3>Input</h3> <label htmlFor="markdown-content"> Enter some markdown </label> <textarea id="markdown-content" bind:value={value} /> <h3>Output</h3> <div className="content"> {@html md.render(value)} </div> </div> ``` React：42行 Svelte：24 行 > 更少的程式碼 = 更少的錯誤 > 更少的程式碼 = 更好的性能 = 更好的用戶體驗 > 更少的程式碼 = 更少的維護 = 更多的時間來開發功能 # 我還喜歡 Svelte 什麼？ ## 反應性 另一個強大的功能是 [反應式聲明](https://svelte.dev/tutorial/reactive-declarations)。讓我們從一個例子開始： ``` <script> let count = 0; $: doubled = count * 2; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> <p>{count} doubled is {doubled}</p> ``` 每當你有依賴於其他變數的變數時，用 `$: myVariable = [引用其他變數的程式碼]` 聲明它們。以上，每當 count 發生變化時，doubled 都會自動重新計算，並且 UI 會更新以反映新值。 ## Stores 在需要跨元件共享狀態的情況下，Svelte 提供了存儲的概念。 [教程很好地解釋了 store](https://svelte.dev/tutorial/auto-subscriptions)。無需閱讀冗長的教程 - store 就這麼簡單。 ### Derived stores 通常，一家 store 依賴於其他 store。這就是 Svelte 提供 derived() 來組合 store 的地方。 [有關詳細訊息，請參閱教程](https://svelte.dev/tutorial/derived-stores)。 ## 作為邏輯塊等待 好吧，這是一個非常優雅的。讓我們從程式碼開始（[交互式演示](https://svelte.dev/repl/b9fc662a253443dc901ff189ce1cdd4b?version=3.16.7)）： ``` <script> let githubRepoInfoPromise; let repoName = 'mikenikles/ghost-v3-google-cloud-storage'; const loadRepoInfo = async () => { const response = await fetch(`https://api.github.com/repos/${repoName}`); if (response.status === 200) { return await response.json(); } else { throw new Error(response.statusText); } } const handleClick = () => { githubRepoInfoPromise = loadRepoInfo(); } </script> <input type="text" placeholder="user/repo" bind:value={repoName} /> <button on:click={handleClick}> load Github repo info </button> {#await githubRepoInfoPromise} <p>...loading</p> {:then apiResponse} <p>{apiResponse ? `${apiResponse.full_name} is written in ${apiResponse.language}` : ''}</p> {:catch error} <p style="color: red">{error.message}</p> {/await} ``` 看到 HTML 中的“#await”塊了嗎？在真實世界的應用程式中，您將有一個加載元件、一個錯誤元件和在這種情況下呈現 API 響應的實際元件。嘗試在文本框中輸入無效的 repo 名稱以觸發錯誤案例。 # “等等，那……呢？” ## 開源元件？ 當我向某人介紹 Svelte 時，我得到的主要回應是“但是生態系統、元件、教程、工具等呢？” 是的，開源 Svelte 元件遠不及 React 元件多。話雖如此，您多久使用一個開源 React 元件並在沒有任何問題或不必要的開銷的情況下集成它？我認為我們 Javascript 社區中的許多人已經變得過於依賴 `npm install ...` 來拼湊一個 web 應用程式。通常建置自己的元件，尤其是在 Svelte 中，可以減少整體花費的時間。我沒有資料可以證明，這是基於我個人的經驗。 不過，與此相關的是，對於任何願意重用開源元件的人來說，Svelte 元件的列表越來越多。 ## 正在找工作？ 機會很多，請參閱 [https://sveltejobs.dev/](https://sveltejobs.dev/)。 Apple 的欺詐工程團隊正在[尋找 Svelte 開發人員](https://sveltejobs.dev/jobs/apple-senior-front-end-developer)（截至 2019 年 12 月）。 還要記住，與申請需要 React、Vue、Angular 等的工作相比，競爭要小得多。 # 然後，有 Sapper 來部署 Svelte 應用程式 開發應用程式只是整個蛋糕的一小部分——應用程式還需要部署。為此，Svelte 團隊提供了 [Sapper](https://sapper.svelte.dev/)。這本身就是一篇完整的帖子，所以現在請查看網站了解詳細訊息。 # 結論 每天，新的 Web 開發人員開始他們的旅程，許多人遇到的第一件事就是不確定首先要學什麼。我說未來就是簡單、快速的開發時間，我想不出比這更簡單、更快的事情了： ``` <script> let name = 'world'; </script> <style> h1 { color: blue; } </style> <h1>Hello {name}!</h1> ``` 以上分享，希望對您有幫助
原文出處：https://dev.to/vintharas/discovering-svelte-getting-started-with-svelte-writing-a-pomodoro-technique-app-2lph ## 開始使用 Svelte [開始使用 Svelte 的最簡單方法](https://svelte.dev/blog/the-easiest-way-to-get-started) 是： 1. 瀏覽 [svelte.dev 中的 Svelte 教程](https://svelte.dev/tutorial) 2. 在 [svelte.dev 中的 Svelte REPL](https://svelte.dev/repl) 中進行試玩 3. 使用 svelte 模板從頭開始建立應用程式 儘管我認為通讀教程對於學習 Svelte 的語法和可用的東西確實很有幫助，但我認為**學習某些東西的最佳方法是在盡可能接近它的環境中實際操作**會在現實世界中開發一個 Svelte 應用程式。 **[你需要自己努力解決問題才能真正學到東西](https://amzn.to/2soWN5m)**。 ## 建立一個新專案 我們使用 [degit](https://github.com/Rich-Harris/degit)（也是由 Svelte 的建立者 Rich Harris 編寫的專案腳手架工具）生成一個新專案。類型： ``` $ npx degit sveltejs/template il-pomodoro ``` 這將在 `il-pomodoro` 目錄中建立一個全新的 Svelte 專案。我們跳進去，安裝依賴項並執行開發伺服器： ``` # Jump in $ cd il-pomodoro # Install the dependencies $ npm install # Run the development server $ npm run dev ``` 現在我們在 localhost:5000 上打開瀏覽器，讓我們看看我們得到了什麼…… **塔達！測試成功！**  ## 設置你的編輯器 Svelte 是一個編譯器優先的框架，它編譯代表 Svelte 元件的 .svelte 文件來建置 Web 應用程式。我在教程中看到的那個特殊的 .svelte 擴展和非 Web 標準語法告訴我，我需要在我的編輯器中提供一些額外的支持來處理 Svelte。 Svelte 博客有一篇關於[如何設置編輯器以使用 Svelte](https://svelte.dev/blog/setting-up-your-editor) 的好文章。我通常使用 Vim 或 VSCode，所以讓我們設置這兩個編輯器以使用 Svelte。 ### 設置 VSCode 以使用 Svelte 對於 VSCode，有 [svelte-code](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode) 插件，它支持 `.svelte` 語法突出顯示、診斷、自動完成和 [更多](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode)。 ### 設置 Vim 以使用 Svelte 對於 Vim，[設置你的編輯器文章](https://svelte.dev/blog/setting-up-your-editor) 沒有提供很多支持。它基本上告訴您將 .svelte 文件的文件類型更改為 HTML。經過一番挖掘，我發現了一些插件，它們可以讓你在 Vim 中獲得更好的 Svelte 體驗，並達到 VSCode 的標準： * [vim-svelte](https://github.com/evanleck/vim-svelte) 為 .svelte 文件提供語法高亮和縮進 * [coc-svelte](https://github.com/coc-extensions/coc-svelte) 通過連接到 Svelte LSP [^2] 為 Svelte 開發提供類似 IDE 的高級支持。這是 [coc.nvim](https://github.com/neoclide/coc.nvim) 自動補全插件（恰好是我最喜歡的 vim 補全插件）的擴展。 好的，現在我們已經設置好了編輯器，讓我們仔細看看我們的新 Svelte 專案。 ## 檔案結構 我們在編輯器中打開 il-pomodoro 文件夾，我們會看到一堆文件和文件夾： * 一個 `src` 文件夾，其中包含 Svelte hello world 應用程式的源程式碼 * 一個 `public` 文件夾，在 Svelte 編譯器編譯和處理後將包含我們的 Web 應用程式 * `rollup.config.js`，其中包含我們的捆綁器 ([rollup](https://rollupjs.org/)) 的配置。 Rollup 負責使用 Svelte 處理我們的源程式碼文件，以生成可以在瀏覽器中執行的開發和生產包。 對於初學者來說非常有趣的部分發生在 `src` 文件夾中，所以我們接下來要看的地方。該文件夾僅包含兩個文件： * `App.svelte` 這是我們應用程式的根元件 * `main.js`，其中包含用於初始化我們的應用程式的引導程式碼 作為我們應用程式入口點的文件是“main.js”： ``` import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app; ``` 這會建立一個新的 Svelte `App` 元件，並將其附加到 `document.body`，並使用一個名為 `title` 的屬性，其值為 `world`。 讓我們看看 `App` 到底是什麼： ``` <script> export let name; </script> <main> <h1>Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> ``` 我懂了！所以 Svelte 元件是一些可重用的 UI，它封裝了元件的標記 (HTML)、它的行為（`<script>` 標籤內的 JavaScript）及其外觀和感覺（`<style>` 標籤內的 CSS） .涼爽的！這就說得通了。 如果我們回到標記中，我們可以理解當我們將它指向 localhost:5000 時我們在瀏覽器中看到的內容： ``` <main> <h1>Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> ``` prop `name` 在實例化時傳遞給元件，並保存在該 `name` 變數中： ``` <script> export let name; </script> ``` 然後傳播到元件的標記，並呈現在我們在瀏覽器中看到的“h1”標籤內。涼爽的！有點奇怪但熟悉的“export let name”語法必須是**Svelte 元件將其 API 定義為 props 的方式**。 ## 加入標題 讓我們開始修補一些簡單的東西，比如為應用程式的第一個視圖加入標題並將其綁定到一些資料。初始模板給了我如何做到這一點的提示。我只需要向我的元件加入一個新變數以包含該標題。因為我在原始模板中沒有用到 `name` 變數，所以我將替換它： ``` <script> export let title </script> ``` 並更新 `main.js` 以注入我的應用程式的標題： ``` import App from './App.svelte'; const app = new App({ target: document.body, props: { title: 'il Pomodoro' } }); export default app; ``` 再想一想，我真的不需要將該變數公開為道具。我們不希望此元件的用戶更改此標題，因此我們將其保留為元件內部的一部分。 讓我們重寫我們的 App 元件來執行此操作： ``` <script> let title = "il Pomodoro"; </script> ``` 最後，我將更新 HTML 模板以使用“title”而不是“name”： ``` <main> <h1>{title}</h1> </main> ``` **搞定了！**  ## 任務列表 驚人的！讓我們繼續建立一個非常簡單的任務列表。由於這感覺像是一個完全獨立的責任，我們將把它放在它自己的元件中。 我建立了一個新文件“TaskList.svelte”來表示該新元件並加入了一些標記，以便在我從“App.svelte”中使用它時盡可能少地出錯： ``` <p>I'm a list of tasks</p> ``` 我將它加入到 `App.svelte`： ``` <script> let title = "il Pomodoro"; </script> <main> <h1>{title}</h1> <TaskList /> </main> <style> /* styles omitted for sake of clarity. They'd be here. */ </style> ``` 而且……沒用。嗯……我做錯了什麼…… VSCode 和瀏覽器都會警告我以下內容： ``` 'TaskList' is not defined. svelte(missing-declaration) ``` 這告訴我兩件事： 1. 我的 vim 設置沒有按預期工作，因為我在編輯器中沒有收到錯誤（稍後要解決的問題），並且 2.我好像忘記導入元件了！ 當然！所以我將它加入到“App.svelte”元件中： ``` <script> let title = "il Pomodoro"; import TaskList from './TaskList.svelte'; </script> <main> <h1>{title}</h1> <TaskList /> </main> ``` 是的！**  現在讓我們加入一些任務。我今天的前 3 項任務是： ``` <script> const tasks = [ "plan some fun trip with Teo", "buy some flowers to my wife", "write an article about Svelte" ]; </script> ``` 現在我需要在列表中的螢幕上顯示這些內容。 Svelte 有一種特殊的方法來迭代模板內的列表：[{#each} 塊](https://svelte.dev/docs#each)。 它是這樣工作的： ``` <ul> {#each tasks as task} <li>{task}</li> {/each} </ul> ``` 因此，我們遍歷 tasks 列表中的每個 task 並將其放入列表項 li 元素中。我們還從列表中刪除了點，因為它們看起來很糟糕： ``` <style> ul { list-style: none; } </style> ``` 這就是我們得到的：  **叮叮叮！** 番茄鐘結束了。得走了！我們將很快繼續使用更多 Svelte、交互式任務列表和番茄鐘。 > ### 尋找番茄鐘應用程式的源程式碼？ > https://github.com/Vintharas/il-pomodoro-in-svelte > https://svelte.dev/repl/27164871e86d4ce1a9815489dc323500?version=3.16.7 ## 到目前為止的一些思考 驚人的！這是開始使用 Svelte 的快速方法。到目前為止，這是我的印象： * [svelte.dev](https://svelte.dev/docs) 真的很棒。 * [交互式教程](https://svelte.dev/tutorial) 有一個循序漸進的介紹，帶您了解 Svelte 的所有功能和重要概念。 * [Svelte playground](https://svelte.dev/repl) 真的很酷，它可以讓你修改 Svelte 建立多文件應用程式，保存它們並與你的朋友和同事分享。 * [開發文件非常好](https://svelte.dev/docs) 也非常全面並且有很多示例。將它們加入書籤並根據需要用作參考。 * **以上所有內容都提供了與 Svelte 的美妙初次接觸**，當您第一次進入一個新的生態系統時，您會非常感激。 * 開始新專案的方式有點奇怪。我已經習慣了所有具有 CLI 的流行框架，使用 `npx degit etc...` 來建立一個新專案有點令人困惑。但在前 5 秒的混亂之後，我只是執行命令並繼續我的生活。 * **我對文本編輯器支持的第一印象並不好**，例如，VSCode 沒有在 Svelte 模板內為我提供語句完成功能，而我希望它能工作（例如，允許我過濾“任務” `）。在我試用 Svelte 的短暫時間內，我沒有讓 Vim 設置正常工作。 * **使用 Svelte 本身就是一種非常好的體驗**。 * 初次接觸時，感覺 Web 標準非常友好，並且一切如您所願。最小驚奇原則非常適用於 Svelte。 * 我喜歡 Svelte 元件的平面結構，以及它在 HTML 標記、Javascript (`<script>`) 和 CSS (`<style>`) 中劃分元件的方式，這很有意義。樣板文件的數量幾乎可以忽略不計。 * 在標記中註入資料很簡單 * 使用 `export` 暴露 props 雖然不是標準的但很有意義並且很容易理解。 * 我想知道為什麼 Svelte 使用 `{#each tasks as task}` 而它可以使用 `{#for task of tasks}` 並減少學習 Svelte 的人的認知負荷。 （也就是需要學習更多的自定義語法） 這就是今天的全部內容！希望你喜歡這篇文章。保重並期待更多 Svelte 即將推出。 > 您是一位經驗豐富的 Svelte 用戶嗎？如果是這樣，請不要猶豫，告訴我我做事有多麼錯誤 :D 我很樂意聽取您的意見，我們都會因此變得更好。 ## 在 Vim 中修復 Svelte 經過一些故障排除後，我意識到按照 Svelte 博客中的建議，我之前使用自動命令設置 Svelte 以將 .svelte 文件的文件類型更新為 html： ``` augroup svelte au! BufNewFile,BufRead *.svelte set ft=html augroup END ``` 這意味著沒有應用 coc-vim 和 svelte 語法文件，因為它們需要 svelte 的文件類型。刪除自動命令後，一切都像在 Visual Studio Code 中一樣好用。哇哇！ [^1]：查看 [這個超級古老的番茄工作法應用程式](https://www.barbarianmeetscoding.com/projects/ilpomodoro/) 我在開始進行 Web 開發的那一天使用 Knockout.js 編寫的。 [^2]: LSP 代表語言伺服器協議。 （來自維基百科）它是一個開放的、基於 JSON-RPC 的協議，用於文本編輯器或 IDE 和提供編程語言特定功能的伺服器之間。該協議的目標是允許獨立於任何給定的編輯器或 IDE 實現和分發編程語言支持。
*與基於元件的框架（例如 React、Angular 或 Vue）不同，使用 Svelte，您可以將建置用戶界面提升到一個新的水平。許多開發人員有興趣了解如何使用 Svelte 進行建置，以下是一份精選的有價值資源列表，可幫助您開始使用 Svelte。* 原文出處：https://dev.to/dailydotdev/building-with-svelte-all-you-need-to-know-before-you-start-2knj --- ## 為什麼選擇 Svelte？ Svelte 最近在前端開發人員中越來越受歡迎。以下簡要介紹主要優勢。 ###有什麼好處？ * Svelte 不是在瀏覽器中完成大部分工作，而是在您建置應用程式時完成它的工作，並將其**編譯為高效的 vanilla JavaScript**。 * **減少您正在使用的 JavaScript 框架的成本**。通過將 Svelte 編譯為 vanilla JavaScript，可以提高程式碼的可讀性，實現重用性，並生成更快的 Web 應用程式。 * Svelte 不需要聲明式的、狀態驅動的程式碼，瀏覽器必須將其轉換為 DOM 操作。這意味著**你不再需要使用虛擬 DOM**。 ### 缺點是什麼？ * **IDE 支持** 還不能與常用框架相媲美。它還有很大的改進空間。雖然有一些很好的在線資源可以解決一些問題，但目前，它可以被視為一個主要缺點。 * **目前沒有多少 Svelte 開發工具**。它仍然是一個年輕且不斷發展的生態系統。然而，這也是為 Svelte 社區開發一些內容的絕佳機會。 * **小型開源生態系統**。與許多其他框架一樣，圍繞特定框架建置大型社區需要時間。儘管 Svelte 已經走了相當不錯的路，但仍然沒有足夠的開源貢獻者。同樣在這裡，您也可以將其視為機會。 想詳細了解使用 Svelte 進行建置的優缺點嗎？ * [CTO 的 Svelte 指南——最新的這個前端框架能為你做什麼？](https://tsh.io/blog/svelte-framework/) * [相同但不同：Svelte 簡介](https://blog.codecentric.de/en/2020/02/same-but-different-introduction-to-svelte/) * [Svelte：與其他框架的比較](https://codeburst.io/svelte-comparison-with-other-frameworks-e895c45567de) * [強調 Svelte 優缺點的簡單示例](https://dev.to/geeksrishti/building-a-dashboard-in-svelte-2fkp) ## 幫助您入門的資源 ### Svelte 生態系統 101 👋🏼 * [Svelte 的主頁](https://svelte.dev/) * [Selvte 官方社區](https://svelte-community.netlify.app/) * [Svelte GitHub 存儲庫](https://github.com/sveltejs/svelte) * [Svelte Discord 伺服器](https://svelte.dev/chat) * [Svelte sub-reddit](https://www.reddit.com/r/sveltejs/) ###教程🤓 以下精選了**實用、全面且用戶友好**的教程： * [官方教程](https://svelte.dev/tutorial/basics) 由 Svelte 開發人員提供。 * [建置我的第一個 Svelte 應用程式：想法和印象](https://scotch.io/tutorials/building-my-first-svelte-app-thoughts-and-impressions) 由 [Chris on Code](https://twitter.com/chrisoncode) ### 用例和演示 🚀 與任何事情一樣，在開始新事物時，靈感很重要。查看一些使用 Svelte 的很棒的專案。 * [OmniaWrite](https://omniawrite.com/) - 專為創意寫作而設計的文本編輯器。同樣在 [GitHub](https://github.com/TorstenDittmann/OmniaWrite) * [TypeRunner.js](https://tsh.io/typerunner) - 一個簡單的打字遊戲，有 2-4 名人類玩家相互競爭。先打出整個文本塊的人獲勝。 * [Hacker News 克隆](https://hn.svelte.dev/) 使用 Svelte 建置。同樣在 [GitHub](https://github.com/sveltejs/hn.svelte.dev) 上。 * [Nomie](https://nomie.app/) - 使用 Svelte 建置的情緒和生活追踪器。同樣在 [GitHub](https://github.com/open-nomie/nomie) 上。 * 許多其他應用程式的炫酷展示 [使用 Svelte 製作](https://madewithsvelte.com/) ### 有用的程式碼庫💻 * [svelte-grid](https://github.com/vaheqelyan/svelte-grid) - 響應式、可拖動和可調整大小的網格佈局，適用於 Svelte * [Vime](https://github.com/vime-js/vime) - 專注於簡化網絡媒體元素的嵌入和使用 * [svelte-mui](https://github.com/vikignt/svelte-mui) - 一組受 [Google 的 Material Design] 啟發的 Svelte UI 組件(https://material.io/design) * [svelte-component-template](https://github.com/YogliB/svelte-component-template) - 建置可共享的 Svelte 3 組件的基礎 * [svelte-loader](https://github.com/sveltejs/svelte-loader) - Svelte 組件的 Webpack 加載器 * [svelte-routing](https://github.com/EmilTholin/svelte-routing) - 具有 SSR 支持的聲明式 Svelte 路由庫 * [Routify](https://github.com/roxiness/routify) - 自動化 Svelte 路線 * [svelte-inetllij](https://github.com/tomblachut/svelte-intellij) - 提供 WebStorm 和朋友中 Svelte 組件的語法突出顯示 * [@testing-library/svelte](https://github.com/testing-library/svelte-testing-library) - 鼓勵良好實踐的簡單而完整的 DOM 測試實用程序 * [svelte-apollo](https://github.com/timhall/svelte-apollo) - Apollo GraphQL 的 Svelte 集成 * 搜尋更多 [此處](https://svelte-community.netlify.app/code/) * 探索一些基本的[程式碼示例](https://svelte.dev/examples#hello-world) ### 開發者工具🔧 正如我們所說……目前可用的經過現場測試的開發人員工具不多。但是，這個非常有用：[Chrome](https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn) 和 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/svelte-devtools/) ### 隨時了解 Svelte 新聞🏄🏻 * [Svelte 官方部落格](https://svelte.dev/blog) * [Why Svelte](https://why-svelte-js.web.app/) - 專為 Svelte 新聞打造的新聞聚合器 * [daily.dev](https://daily.dev/topic/svelte) - 不要錯過有關 Svelte 的更新。讓 daily.dev 在每個新標籤頁為您收集最新的科技新聞並進行排名 * [Svelte 時事通訊](https://shershen08.github.io/sveltejsnews/) - 每兩週將最新的 Svelte 新聞發送到您的收件箱 --- 以上分享，希望對你有幫助！
## 前提 https://flexboxfroggy.com/ 類似這種遊戲或是https://hexschool.github.io/flexbox-pirate/index.html#/simple （六角應該是學習他 這兩個基本上一樣ＸＤ） 想問這種可以讓使用者丟code的遊戲 是否會很難開發 這邊順便提供相關遊戲 [10 amazing games to learn CSS](https://daily-dev-tips.com/posts/10-amazing-games-to-learn-css/) [10 games to learn JavaScript](https://dev.to/dailydevtips1/10-games-to-learn-javascript-155j) 有些難度似乎會比較高 是因為還要用美術素材 但我想 我若是使用人家現成的 純粹練習 這方面應該也不困難 ## 疑問 我在想 其實應該會算是個很有趣的挑戰? 我考慮的點 是要判斷user的code是否正確 基本上去判斷text area的內容有沒有 那些特定的條件 用判斷式去寫 應該不至於太難 想說試著練習寫一個這個遊戲 因為我看六角也是照著人家的做XD 不知道前輩們對這樣的練習有什麼建議~~ 會有什麼地方要注意嗎 感恩!!!!!!!! ## 想法漫談 從以前練到現在，真的很喜歡這個論壇~~~未來有機會搞一個自己設計的遊戲關卡 也可以讓大家練習JS 因為我看到有些練習的遊戲是要付費的 在這裡:https://codepip.com/games 想說我可以自己搞一個免費版 XDD 只是怕弄下去也許是一個太大的專案? 或者其實跟切版差不多 幾個小時就OK? 那我一定馬上來弄 感覺就超好玩~超酷~
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
