## 前情提要 還在問說要不要學JQUERY？別問了，學就對了，沒人說學了一定要用好嗎。 以下讓我們先看一段純純的JS，就跟國中生的戀愛一樣， 牽牽小手，超純。 ## JS純 ``` // 純 JavaScript 選取元素清單 let list = document.querySelectorAll(".navigation li"); function activeLink(event) { // 使用 forEach 迴圈移除所有元素的 "hovered" 類別 list.forEach((item) => { item.classList.remove("hovered"); }); // 在滑鼠移過的元素上新增 "hovered" 類別 event.target.classList.add("hovered"); } // 使用 forEach 迴圈為每個元素加上滑鼠移過事件的監聽器 list.forEach((item) => { item.addEventListener("mouseover", activeLink); }); ``` ## 轉大人 接下來我們要轉大人了。 ### 選擇器 關於querySelectorAll這種querySelector很簡單，JQ都是用$這個字符來選取。 ## 修改class item.classList.remove("hovered"); event.target.classList.add("hovered"); 這兩個的話JQ有寫出兩隻API： removeClass addClass 所以很方便很好用 ## 事件監聽 addEventListener的話JQ則是用on來表達，這個看過幾次就能夠理解了唷！ ## JQ的寫法寫出來 ``` // 使用 jQuery 選取元素清單 let list = $(".navigation li"); function activeLink() { // 移除所有元素的 "hovered" 類別 list.removeClass("hovered"); // 在滑鼠移過的元素上新增 "hovered" 類別 $(this).addClass("hovered"); } // 使用 jQuery 的 each 方法為每個元素加上滑鼠移過事件的監聽器 list.each(function () { $(this).on("mouseover", activeLink); }); ``` ## 心得 JQ到底有沒有被拋棄或是需不需要學習，其實都是假議題，一堆人嘴上用JQ，然後嘴砲JQ 我們身為學習者其實就是花個一小時 就能學起來的東西，沒必要故意閉著眼睛不去了解。 以上，一篇文章馬上帶你學會JQuery！ 比較想要玩切版可以看這個: https://ithelp.ithome.com.tw/articles/10312922 [【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯](https://ithelp.ithome.com.tw/articles/10312922)
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (1)](https://ithelp.ithome.com.tw/articles/10311621) ##### [【前端動手玩創意】google五星評分的星星(2)](https://ithelp.ithome.com.tw/articles/10311643) ##### [【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)](https://ithelp.ithome.com.tw/articles/10311672) ##### [【前端動手玩創意】一句CSS做出好看的hero section！(4)](https://ithelp.ithome.com.tw/articles/10311691) ##### [【前端動手玩創意】創造一個Skill bar(5)](https://ithelp.ithome.com.tw/articles/10311756) ##### [【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)](https://ithelp.ithome.com.tw/articles/10311999) ##### [【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)](https://ithelp.ithome.com.tw/articles/10312001) ##### [【前端動手玩創意】讓你的PDF檔案更難被抓取(8)](https://ithelp.ithome.com.tw/articles/10312046) ##### [【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)](https://ithelp.ithome.com.tw/articles/10312056) ##### [【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)](https://ithelp.ithome.com.tw/articles/10312066) ##### [【前端動手玩創意】太屌了吧！？用Class(類)製作Jquery的效果！(11)](https://ithelp.ithome.com.tw/articles/10312114) ##### [ 【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯(12)](https://ithelp.ithome.com.tw/articles/10312922) ## 前情提要 一陣子沒寫前端動手玩創意了 今天要來點好料的 我們談談關於藝術 對 就算是寫程式我們也是可以有藝術氣息的 別這麼驚訝XD 假設我有一組資料 一般人來說 最直覺的就是把html裡面的元素寫出來寫死 直覺菜鳥就是寫出來啊 ``` <div id="items_list"> <li class="buy_item">1.紅茶 <div class="price">10</div> <div class="del_btn">X</div> </li> <li class="buy_item">2.奶茶 <div class="price">15</div> <div class="del_btn">X </div> </li> <li class="buy_item">3.綠茶 <div class="price">30</div> <div class="del_btn">X</div> </li> </div> ``` 要更新則是就去更改DOM就好了 反正我都學會JS了 有什麼大不了(? 但是現在已經進入大前端時代了就算你寫原生 也會有data model的概念 這部分可以參考站長阿川寫過的好文 裡面的文筆跟邏輯 不誇張 是我見過「華文圈寫得最好的前端教學」 尤其就是這篇 關於data model的介紹 切入點非常的有趣也很有道理 有興趣的自己去花心思讀看看 [認識 data model 與 render function](https://codelove.tw/@howtomakeaturn/post/9xLo5q) 稍微有點料的前端學習者 本身就會寫一寫 想說：既然有一隻API是createElement 那是不是我可以整個html都用js寫出來(? 這是個超級有趣的觀點 ## 關於data render的概念: 「是不是我可以整個html都用js寫出來」 相傳牛頓提出三大定律以後 認為地球和八大行星一開始的慣性力叫「上帝的第一推動力」 實際上這個： 「整個html都用js寫出來」 也是推動前端往框架邁進的思考第一步 可以說是前端慣性的上帝推力了 當然如果你有打籃球 也可以比喻成上籃的第零步XD ## 觀念筆記 ### html程式碼 ``` <div id="buylist"> <h1>myBuylist 購物清單</h1> <div class="buyitem"> <label>產品名</label> <input/> <label>價錢</label> <input/><span class="addbtn">+新增</span> </div> <div id="items_list">這邊準備用JS插入東西所以這段只是說明文字</div> </div> ``` 把整個頁面的元素寫出來 但是資料的區塊保留著 因為等等我們要用JS的API去動態生成 未來直接data render 方便更新與管理 ### JS程式碼 ``` var shoplist = {}; shoplist.name = "購物清單"; shoplist.list = [ { name: "吹風機", price: "300" }, { name: "麥克筆", price: "20" }, { name: "筆記型電腦", price: "29300" }, { name: "Iphone 9", price: "5200" }, { name: "神奇海螺", price: "1000" }, ]; var item_html = "<li id={{id}} class='buy_item'>{{name}}<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_html = "<li class='buy_item total'>總價<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_price = 0; for (var i=0; i < shoplist.list.length; i++) { var item = shoplist.list[i]; total_price += item.price; var current_item_html = item_html.replace("{{num}}", i + 1) .replace("{{name}}", item.name) .replace("{{id}}", "buyitem_" + i) .replace("{{price}}", item.price); $("#items_list").append(current_item_html); } ``` 這邊值得關注的一點是資料的處理 也就是數據結構上使用物件與陣列去儲存資料 為什麼要學 陣列 為什麼要學物件 這兩個都是抽象的名詞 他們都是為了來處理資料所規劃的兩種不同內容 ## 關於物件與陣列 物件就像是RPG角色 會有很多的屬性 魔法 敏捷 力量 血量 這些屬性都是被附加在person上面 所以person.blood是一個資料 person.power是一個資料 person.magic是一個資料 最後都存在person裡面 這個person就是一個含有很多屬性的物件 感覺就是有血有肉很3D 而陣列就比較平面化 就是很多數字排成一列而已 其實沒什麼特別需要關注的 這兩個也不會不好區分 只要稍微做個比喻 都很好理解 以我們的code來講解 shoplist就是一個物件 含有一些屬性 包含名字與清單 因為清單很多 所以清單用一個陣列儲存 陣列裡面放很多個物件 這些物件就是每一個清單包含的那些購買項目 其實不用太在意誰是誰因為用看的就很清楚 最後我們用迴圈去把shoplist裡面的每一筆資料都丟進去 中途replace是文字處理 把我們設置的{{name}}這種花括號的東西換成真實資料 這部分有點樣板語言的感覺XD 其實非常有趣 很值得玩味 ## 心得 這次比較多實在的JS程式碼 就不只是玩玩切版了 算是有點靠近框架的部分(◉３◉) 動手玩創意這個系列其實靈魂之處就在於「有趣」兩個字 坊間把前端描繪成為了找工作的銅臭味 以及把切版講成無聊的工匠苦力活 我認為都是錯誤的解讀 我認為 只要是有趣的地方就是前端最有價值的地方 而不是誰學了那個框架 誰又認為哪個東西比較厲害 哪個語言比較屌 那都是很無聊的文字遊戲罷了 如果你喜歡這樣子的前端 請跟著這個系列繼續走(￫ܫ￩) 我們才只是在桃花源外的小溪旁玩水而已呢！ 未來會往天空飛翔哦XD
## 前情提要 本文跟六角學院沒有任何關係ＸＤ ## 文章開始 今天要討論自學，關於線上課程，我認為買一些課是好的，但別傻傻看了促銷就買。 誰跟你說學程式一定要花錢？ 告訴我，誰跟你講的？就是賣你課的人啊傻子。 . . . 我今天這篇文章要教你怎麼免錢學程式，而且是有系統的學，不是自己在那邊維基百科或谷歌一百年那種。 答案是：爬文。 . . 好啦我知道你們這些伸手牌就是懶得爬文所以才會想要花錢了事，今天我爬完了。 ## 好料放送(一) 把免費資源直接丟給你吧。 [「Python 網路爬蟲與資料分析入門實戰」範例程式碼](https://github.com/jwlin/py-scraping-analysis-book)  裡面包含 ``` 網頁爬蟲範例實戰 3-1 PTT 八卦板今日熱門文章 3-2 Yahoo 奇摩電影本週新片 3-3 兩大報當日焦點新聞 3-4 Google 搜尋股價資訊 3-5 Dcard 今日熱門文章 ``` 所有書本裡面的程式碼作者都直接公開了，我也不知道為什麼，反正就是免費給你。 現在你也不用自己google研究，直接複製丟到GPT那邊寫一個教學文章給你， 你就等於能夠免費讀到這本書。而且不用手打程式，你最愛的那種。 ## 好料放送(二)  [hahow 線上課程: Python 網頁爬蟲入門實戰](https://github.com/jwlin/web-crawler-tutorial/tree/master) . 同一個作者丟出來的，總之既然人家想放github那就看啊！ 用法也是一樣，人家有個lecture可以看看課綱與大致上的說明自己去配上GPT以及谷歌， 然後不需要自己打扣，直接有現成範例可以拿去跑看看，年代問題導致的錯誤還可以當作功課自己改。 . . . ## 總結 還在靠北沒資源或是一直問要怎麼自學？現在告訴你了， 這樣的教材原本他起碼都賣幾千塊，你可以免費學幹嘛不學？ 別問我怎麼知道的，我也是爬文爬到的，只是我人很好分享給你們知道而已。 . . 謝謝，別那麼感動。 . . 我也只是一個很愛免費白嫖的爬文仔而已。
昨天在我們新手寫程式 LINE 群組，有幾個業界工程師＆想要轉職的新手在討論： 實體補習班、線上補習班、不花錢自學，推薦哪種方法？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 看完大家的討論，我決定整理大家的討論內容，寫一篇指南 --- 我認為半路出家者，經濟壓力很大，要兼顧成本＆時間，以下是我推薦給大家的判斷方法 首先，先教大家怎麼挑選程式語言，你可能在考慮 PHP JavaScript Python 之類的 各種程式語言，通常會跟產業類型相關，不同產業偏好不同程式語言 請打開人力資源網站，看看各語言有哪些職缺、以及職缺數量，看看這些公司是不是你有興趣的 然後看看這些職缺「無經驗可」的比例如何，很多的話表示歡迎半路出家者 還是通通都要求「一年以上工作經驗」，那就表示不歡迎半路出家者＆新手 很多台灣的程式語言 FB 社團也可以先加，裡面很多職缺資訊，就一起看看 先鎖定幾個你覺得可行的程式語言，接下來進入以下流程： # 先問自己第一個問題：我身邊有沒有可以請教的工程師？ 兄弟姐妹、或是很熟的朋友、同學，都可以，要是一個你「極度信賴」的人 這樣他幫你推薦大方向時，你不用擔心他在敷衍你 他不用像保母一樣每天在你旁邊陪你、幫你解答問題（這樣是在凹他） 但在你卡關的時候，至少可以跟他請教解決的方向 然後他最好可以協助你找「技術書籍」、「免費/便宜影音課程」 如果這題的答案是 YES，你有機會在極少花費之下，就轉職成功 如果答案是 No，請往線上補習班的方向查詢，進入下一個問題 # 第二個問題：這間線上補習班有沒有導師、助教制度？ 這類課程收費大概數萬元，通常會幫你排進學期內，安排導師、助教，自己在家看影片 我推薦這方向，是因為在教室上課，你可能跟不上，會很悲劇 在家看影片，可以按照自己節奏、可以重複觀看 因為你付了數萬元，卡關時，趕快請教導師、助教 我認為這方向不錯，費用也合理，缺點是，線上補習班的選擇不多，你想要的程式語言，可能沒有業者在開課 如果這題的答案是 YES，多查一下學員心得分享、確認一下學員就業成功率，就上吧 如果答案是 No，請往實體補習班的方向查詢，進入下一個問題 # 第三個問題：有沒有政府補助可以申請 這類課程大概要求你全職上課半年左右，收費十萬元以上 我聽過太多進教室之後跟不上進度，花費半年、十幾萬元，最後轉職失敗的慘痛案例 職訓局、勞工局、勞動部，有時會有一些補助可申請 如果政府出錢，那就去吧，至少風險少很多 --- 如果以上問題答案通通都是 No 那就是要自己出錢、花半年去教室上課了 請務必貨比三家、謹慎再謹慎、多查詢學員心得分享、確認就業成功率 值得一提的是，有些小班制的業者，老師極度有經驗＆教學熱情，你會看到超多推薦心得文 如果查資料過程中，發現這種老師，那就沒問題，他將會是你的貴人 如果是大品牌、大班制，你拼一波就報名了，我真的覺得很像在賭博，賭你會遇到好老師、賭課程安排你吸收得了 就我的觀察，這些大品牌，很多課程內容，實在太包山包海了，我看了很不喜歡，我覺得90%學員會吸收不良，什麼作業跟專案，簡直就是助教在幫你寫，只是貼一貼改一改，跑得動就畢業了，學員自己心裡都很不踏實 多花點時間查畢業學員評價吧，也多跟業者詢問、聊聊，真的心動了，就衝吧，也沒其他方法了 以上，簡單幾個問題，希望對你找方向有點幫助！
最近看到一個影片 https://www.youtube.com/watch?v=wALW1dHDhhE 在這個忙碌而繁雜的世界裡，我們常常感到迷惘，被各種事物牽引著，似乎永遠都無法停下來。但或許，真正需要的不是迷惘，而是專注。 專注，就像是放大鏡一樣，讓我們看清事物的本質，發現細節中的美好和意義。當我們專注於做一件事情時，時間似乎變得慢了下來，我們可以更深入地投入其中，感受到那份來自內心的滿足和喜悅。 然而，專注並非易事，因為我們常常受到無盡的誘惑和分心。手機的通知、社交媒體的消息、各種打擾都不時湧現，讓我們難以集中精神。但只要我們下定決心，學會將這些雜念擱置一旁，將注意力集中在眼前的事物上，專注就能漸漸成為我們的習慣。 當我們專注時，我們可以發現自己擁有的潛能和能力。無論是學習一門新技能、完成一個項目，還是投入一段感情，只要我們全心全意，專心付出，成功就會如影隨形。 專注也是一種修煉，需要不斷的堅持和努力。或許我們會有時候失敗，偏離了目標，但不要灰心，及時調整方向，重新專注於自己的目標。 在這個充滿誘惑和紛擾的世界，保持專注或許是一項挑戰，但也是我們成長和進步的關鍵。讓我們放下迷惘，學會專注，活在當下，讓生活更加充實而有意義。只要我們專注，我們就能更好地面對這個世界的一切。
阿川收到網友提問如下： ``` 我最近有在看前端的一些基礎課程，想問問如果32歲想轉職工程師是不是不吃香😅畢竟我也不是本科的 ``` 看過很多人提出類似問題，寫一篇公開回答跟大家分享，給類似狀況的人參考。 --- 首先我自己親自指導過轉職的，年齡最大的是31歲、非本科、私立科大夜間部，原本在餐飲業 在網路上搜尋「30歲轉職工程師」、「40歲轉職工程師」、「50歲轉職工程師」 會發現30歲相關文章很多，大家議論紛紛 40歲相關文章比較少，持鼓勵、正面意見的佔少數 50歲相關文章，一篇心得分享都沒有 我建議把幾歲轉職當成是一個「漸層問題」，不是非黑即白的「二元問題」 也就是年紀越大越難，但沒有過了幾歲就一定不行這種事 --- 再來我認為要務實一點，不論自學或上課，半路出家至少也需要2個月～6個月的時間 請減少生活開銷，然後原本工作可以的話，先別辭掉，利用晚上＆週末的時間進修，壓力也小一點 不然壓力大到睡不著覺的話，精神不佳，學習效果怎麼會好呢？ 然後建議多找幾種學習方法試試看，如果一種不行，就換另一種方法試試 別太快覺得「自己不行」，說不定是「老師不行」，或只是方法不適合你 我建議先大量找免費或便宜的教材，先吸收，多試幾份，真的卡關了，再開始挑補習班 先直接找一些作業跟專案寫寫看，從免費 -> 便宜的 -> 稍貴的，這樣一點一點花錢，風險比較小 更認識自身需求之後，再去比較市面上的各種補習班，最後再把這錢花下去，比較保險 --- 最後我必須說，2023 全球軟體業狀況比較嚴峻，目前職缺好像比較緊縮，不知道何時會恢復 這跟 2008 年金融海嘯出社會的新鮮人狀況一樣，就是比較倒霉 反正轉職過程中，記得早點開人力銀行等等網站，看看職缺狀況，心裡有個底，知道一下要面臨多少競爭 順帶一提，我也有設計免費的 html&css 教材，還有優惠的 javascript 教材，內含「大量練習專案」，不論你最後選擇哪種學習方式，我都推薦搭配拿去學習、練習，稍有難度，但不少人全做完之後就順利面試上班了 以上，祝各位轉職順利！
 您需要了解的有關 docker 的所有訊息都在這篇文章中。別擔心 - 我會保持非常簡短和簡潔 ⚡ 我將引導您了解這些概念：容器、圖像等。然後我們將編寫自己的“Dockerfile”來容器化一個非常簡單的 Python 應用程式！ 原文出處：https://dev.to/dhravya/docker-explained-to-a-5-year-old-2cbg ### 什麼是docker？ Docker 是一種“容器化”應用程式的方法（將程式碼放入可以獨立工作的盒子中）。它神奇地製造了一台虛擬計算機，但你猜怎麼著——它們並不是真正的虛擬計算機。 容器是沒有主機操作系統的盒子，因此它們獨立於執行的設備。 可以這樣想——有一隻蜜蜂只喜歡住在自己的蜂巢裡，如果它住在其他地方就無法工作。你只需將蜜蜂困在一個看起來和摸起來都像蜂窩的盒子裡。這就是容器化。 容器是使用“Images”製作的  ### Docker 鏡像 Docker 鏡像就像模板——一本 *擁有全部製造流程說明* 的工藝手冊。或者，換句話說，它包含一組用於建立容器的指令。 但是如何製作這些圖像（以便稍後製作容器）？ 這是使用 Dockerfile 完成的。 ### 關於 Dockerfiles Dockerfile 是一個文本文件，其中包含用戶可以在命令行上呼叫來組裝映像的所有命令。 好吧，讓我們一起製作一個 Dockerfile。 現在，我們將從 docker 開始動手！ 在您的設備上快速下載 docker：https://www.docker.com/get-started 現在您已經有了它，讓我們編寫一個簡單的 Flask 應用程式並將其容器化！ 這是一個非常簡單且最小的 flask 應用程式  現在，儘管這可能非常基本，但它實際上需要很多東西才能執行： - Python 3.9 - Flask（執行“pip install Flask”） - 暴露於端口5000 有些程序可能只能在特定的操作系統上執行 - 例如僅限 Windows 或僅限 Linux 的東西。 所有這些問題都可以通過編寫一個簡單的 dockerfile 來解決，該文件為我們設置了一個 docker 鏡像。 所以你需要建立一個名為“Dockerfile”的文件（確切地說，沒有任何文件擴展名） 這是一個演練： - 使用 FROM 使用 python 基礎鏡像 - 使用 COPY 將 app.py 文件複製到容器中 - 使用RUN來pip安裝flask - 當容器啟動時使用CMD執行“python app.py” 就這麼簡單！  > 小修正：該文件應命名為 Dockerfile ### 建置鏡像並執行容器 現在，使用“docker build”命令建置 docker 映像，然後使用“docker run .”命令執行該映像。 還可以使用`--tag`給鏡像起個名字，方便自己以後執行 ``` docker build --tag flask . docker run --name flask -p 5000:5000 flask ``` 這裡，`--name`是要執行的容器的名稱（我將其命名為flask），-p將docker CONTAINER的端口設置到您的機器，這樣您就可以在`localhost`上看到您的應用程式。最後，名稱中的“flask”是要執行的鏡像的名稱。 ### 更多命令 大概就是這些！ “docker ps”命令獲取正在執行的容器的列表， “docker ps -a”獲取所有容器的列表 “docker images”獲取圖像列表 “docker --help”獲取所有命令的列表 多多嘗試看不同指令吧！
資深開發者 Jatin Sharma 在國外論壇分享了個人使用的 VSCode 設定，內容豐富，跟大家分享！ 原文出處：https://dev.to/j471n/my-vs-code-setup-971 ## 🎨主題 我使用 [**Andromeda**](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda) 作為我的 VS Code 的主要主題  ## 🪟圖標 對於圖標，我會在 [**材質圖標主題**](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 和 [**材質主題圖標**]( https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons) **找找看。** ### 材質圖標主題  ### 材質主題圖標  ## ⚒️外掛 最讚的部分來了，有很多擴展我只提到了我最喜歡的或我每天主要使用的擴展。 ### 自動重命名標籤 自動重命名配對的 HTML/XML 標記，與 Visual Studio IDE 的操作相同。 **下載：** [**自動重命名標籤**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)  ### 括號對著色切換器 VS Code 擴展，為您提供一個簡單的命令來快速切換全局“括號對著色” **下載：** [**括號對著色切換器**](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler)  ### C/C++ C/C++ 擴展向 Visual Studio Code 加入了對 C/C++ 的語言支持，包括編輯 (IntelliSense) 和除錯功能。 **下載：** [**C/C++**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools)  ### 程式碼執行器 執行多種語言的程式碼片段或程式碼文件 **下載：** [**程式碼執行器**](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)  ### 程式碼拼寫檢查器 一個基本的拼寫檢查器，可以很好地處理程式碼和文件。 該拼寫檢查器的目標是幫助發現常見的拼寫錯誤，同時保持較低的誤報數量。 **下載：** [**程式碼拼寫檢查器**](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)  ### DotENV VSCode `.env` 語法高亮。 **下載：** [**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)  ### 錯誤鏡頭 ErrorLens 通過使診斷更加突出來增強語言診斷功能，突出顯示語言生成的診斷的整行，並內聯打印訊息。 **下載：** [**錯誤鏡頭**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)  ### ES7+ React/Redux/React-Native 片段 ES7+ 中的 JavaScript 和 React/Redux 片段以及 [VS Code](https://code.visualstudio.com/) 的 Babel 插件功能 **下載：** [**ES7+ React/Redux/React-Native 片段**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)  ### ESLint 該擴展使用安裝在打開的工作區文件夾中的 ESLint 庫。如果該文件夾未提供，則擴展程序將查找全局安裝版本。如果您尚未在本地或全局安裝 ESLint，請在工作區文件夾中執行“npm install eslint”進行本地安裝，或執行“npm install -g eslint”進行全局安裝。 **下載：** [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)  ### Git 圖 查看存儲庫的 Git 圖表，並從圖表中輕鬆執行 Git 操作。可配置為您想要的外觀！ **下載：** [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)  ### GitLens GitLens **增強了 VS Code 中的 Git，並解鎖每個存儲庫中**未開發的知識**。它可以幫助您通過 Git Blame 註釋和 CodeLens 一目了然地**可視化程式碼作者**，**無縫導航和探索** Git 存儲庫，**通過豐富的可視化和強大的比較命令**獲得有價值的見解**，等等更多的。 **下載：** [**GitLens**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)  ### HTML 樣板 此擴展提供了所有 Web 應用程式中使用的標準 HTML 樣板程式碼。 **下載：** [**HTML 樣板**](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate)  ### Import Cost 此擴展將在編輯器中內聯顯示導入包的大小。該擴展利用 webpack 來檢測導入的大小。 **下載：** [**Import Cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)  ### Live Server 它將啟用實時更改而不保存文件。 **下載：** [**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)  ### Markdown 多合一 Markdown 所需的一切（鍵盤快捷鍵、目錄、自動預覽等）。 ***注意***：VS Code 具有開箱即用的基本 Markdown 支持（例如，**Markdown 預覽**），請參閱官方文件了解更多訊息。 **下載：** [**Markdown All in One**](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)  ### Markdown 預覽增強 它顯示了 Markdown 內容的增強預覽。 **下載：** [**Markdown 預覽增強版**](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)  ### 將 JSON 粘貼為程式碼 複製 JSON，粘貼為 Go、TypeScript、C#、C++ 等。 **下載 -** [**將 JSON 粘貼為程式碼**](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)  ### 更漂亮 使用 Prettier 的程式碼格式化程序 **下載 -** [**Prettier**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  ### Python IntelliSense (Pylance)、Linting、除錯（多線程、遠程）、Jupyter Notebooks、程式碼格式化、重構、單元測試等。 **下載 -** [**Python**](https://marketplace.visualstudio.com/items?itemName=ms-python.python)  ### 設置同步 使用 GitHub Gist 跨多台計算機同步設置、程式碼片段、主題、文件圖標、啟動、按鍵綁定、工作區和擴展。 **下載 -** [**設置同步**](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)  ### Tailwind CSS IntelliSense 適用於 VS Code 的智能 Tailwind CSS 工具 **下載 -** [**Tailwind CSS IntelliSense**](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)  ### 所有亮點 突出顯示程式碼中的“TODO”、“FIXME”和其他註釋。 有時，在將程式碼發佈到生產環境之前，您會忘記檢查編碼時加入的 TODO。所以我長期以來一直想要一個擴展來突出顯示它們並提醒我還有註釋或尚未完成的事情。 希望這個擴展也能幫助您。 **下載 -** [**TODO 突出顯示**](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)  ### Turbo 控制台日誌 自動編寫有意義的日誌訊息的過程。 **下載 -** [**Turbo 控制台日誌**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)  ### 塔布寧人工智能 Tabnine 是一款 AI 程式碼助手，可讓您成為更好的開發人員。 Tabnine 將通過所有最流行的編碼語言和 IDE 中的實時程式碼完成來提高您的開發速度。 **下載 -** [**Tabnine AI**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)  ## ⚙️設置 以下“JSON”程式碼顯示了我的 VS Code 設置： ``` // user/settings.json { "files.autoSave": "afterDelay", "editor.mouseWheelZoom": true, "code-runner.clearPreviousOutput": true, "code-runner.ignoreSelection": true, "code-runner.runInTerminal": true, "code-runner.saveAllFilesBeforeRun": true, "code-runner.saveFileBeforeRun": true, "editor.wordWrap": "on", "C_Cpp.updateChannel": "Insiders", "editor.suggestSelection": "first", "python.jediEnabled": false, "editor.fontSize": 17, "emmet.includeLanguages": { "javascript": "javascriptreact" }, "editor.minimap.size": "fit", "editor.fontFamily": "Consolas, DejaVu Sans Mono, monospace", "editor.fontLigatures": false, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "python.formatting.provider": "yapf", "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "git.autofetch": true, "git.enableSmartCommit": true, "html-css-class-completion.enableEmmetSupport": true, "editor.formatOnPaste": true, "liveServer.settings.donotShowInfoMsg": true, "[python]": { "editor.defaultFormatter": "ms-python.python" }, "diffEditor.ignoreTrimWhitespace": false, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[c]": { "editor.defaultFormatter": "ms-vscode.cpptools" }, "editor.fontWeight": "300", "editor.fastScrollSensitivity": 6, "explorer.confirmDragAndDrop": false, "vsicons.dontShowNewVersionMessage": true, "workbench.iconTheme": "material-icon-theme", "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.renderWhitespace": "none", "workbench.startupEditor": "newUntitledFile", "liveServer.settings.multiRootWorkspaceName": "", "liveServer.settings.port": 5000, "liveServer.settings.donotVerifyTags": true, "editor.formatOnSave": true, "html.format.indentInnerHtml": true, "editor.formatOnType": true, "printcode.tabSize": 4, "terminal.integrated.confirmOnExit": "hasChildProcesses", "terminal.integrated.cursorBlinking": true, "terminal.integrated.rightClickBehavior": "default", "tailwindCSS.emmetCompletions": true, "sync.gist": "527c3e29660c53c3f17c32260188d66d", "gitlens.hovers.currentLine.over": "line", "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "args": [], "icon": "terminal-cmd" }, "Git Bash": { "source": "Git Bash" }, "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "args": [] }, "Windows PowerShell": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe" }, "Ubuntu (WSL)": { "path": "C:\\WINDOWS\\System32\\wsl.exe", "args": [ "-d", "Ubuntu" ] } }, "javascript.updateImportsOnFileMove.enabled": "always", "[dotenv]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "editor.tabSize": 2, "cSpell.customDictionaries": { "custom-dictionary-user": { "name": "custom-dictionary-user", "path": "~/.cspell/custom-dictionary-user.txt", "addWords": true, "scope": "user" } }, "window.restoreFullscreen": true, "tabnine.experimentalAutoImports": true, "files.defaultLanguage": "${activeEditorLanguage}", "bracket-pair-colorizer-2.depreciation-notice": false, "workbench.editor.wrapTabs": true, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "terminal.integrated.fontFamily": "courier new", "terminal.integrated.defaultProfile.windows": "pwsh.exe -nologo", "terminal.integrated.shellIntegration.enabled": true, "terminal.integrated.shellIntegration.showWelcome": false, "editor.accessibilitySupport": "off", "editor.bracketPairColorization.enabled": true, "todohighlight.isEnable": true, "terminal.integrated.shellIntegration.history": 1000, "turboConsoleLog.insertEnclosingClass": false, "turboConsoleLog.insertEnclosingFunction": false, "files.autoSaveDelay": 500, "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.host": "localhost", "liveServer.settings.fullReload": true, "workbench.editor.enablePreview": false, "workbench.colorTheme": "Andromeda Bordered" } ``` ## 總結 以上簡單分享，希望對您有幫助！
阿川近期收到網友私訊詢問，簡單來說，就是他報名了某補習班，需要進教室上課四個月 從設計軟體 figma 到後端 php 到前端 vue 通通都教，最後要分組做一個完整專案 結果吸收不良，感覺什麼都碰、什麼都沒學好，現在糊裡糊塗在搞專案，就算弄出來也感覺很不踏實，怎麼辦？ --- 阿川從過去幾年指導朋友半路出家的經驗、幫朋友找補習班的經驗，一聽就知道，這種安排，90%的學員會吸收不良 原因主要有兩個 第一，每位學員的積極程度、理解速度，通通不一樣。大家一起進教室聽老師一堂一堂講，一定有人嫌慢，一定有人嫌快 嫌慢就算了，至少該學的都有學到。嫌快就慘了，花了大錢結果跟不上進度，之後還要每週到教室報到，這很折磨人，學習效率也差 第二，半路出家，通常就找「無經驗可，後端」或者「無經驗可，前端」的職缺，先入行，賺點薪水，慢慢累積經驗＆自信就對了 去補習班挑戰四個月學習全端？就算是 full time 上課，我認為還是太硬了，90%的人都會吸收不良，學習效果不好 --- 就我這幾年的觀察，只有兩種人在這環境能順利學習、成長、轉職 第一種，畢業於台大ＸＸ系，在ＹＹ領域工作數年之後，毅然決然辭職，報名轉職軟體工程師成功 這種是學習能力本來就很好，學歷通常就是台清交、只是非本科 第二種，學歷不佳，工作幾年之後遇到重大挫折，有強烈經濟壓力，破釜沈舟之下，抱著巨大的決心、壓力，全心投入補習＆學習 這種是壓力逼迫人成長，在自己給自己高壓＆痛苦之下惡補成功轉職 我認為90%的人，不符合以上狀況，會變成花大錢、花超多時間，最後還效果不理想 最糟糕的是，學習應該是要能逐漸建立興趣＆信心的 這種學習成果，就算最後開始去幾間公司面試，也會超心虛，覺得自己好像來騙的，專案根本自己也沒搞懂幾行程式碼，拼拼湊湊不知道在幹嘛 --- 我在多篇文章提到過，我建議就是先找「便宜、有口碑的線上課程」 至少可以按自己步調學習，至少不會花那麼多錢 然後先專心在前端或後端就好了，可以稍微花點時間碰全端，有一點概念，也很好，但不要嘗試直接專精兩者 學過、有更了解之後，再花錢去補習班。不要一開始就用「賭賭看」的心態進教室，你的時間＆金錢很寶貴 何況很多人就用線上資源學一學，就順利去上班了，有些根本是用國外「免費」資源，一毛錢沒花 --- 最後，對很多人來說，看到這篇文章，時間已經花下去了，錢已經花下去了，怎麼辦？ 阿川還是有些建議可以給大家 第一，全課程這樣上完，雖然吸收不佳，但至少有稍微留個印象 請拿出筆記本，多多做筆記「這邊沒聽懂 但好像很有趣」、「這邊沒聽懂 但老師剛有提到幾個關鍵字」，找時間自己多 google 一下 還有「這邊沒聽懂 但感覺好古板啊 這東西業界真的有用？」，找時間去社團或論壇發問，請教一下業界人士 總之，挑能吸收的部份 加減吸收一點 自主練習時，卡關了，至少還知道點方向 第二，不要太快失去信心 「如何學習」本身就是一輩子的技能，有時是學習方法問題、或節奏問題、或方向問題，先別急著放棄 課堂上的作業，找時間自己重看一次：如果有哪行程式碼不懂，就多 google 或發問，慢慢弄懂，慢慢補回自信 --- 最後，我再補充一個觀念給大家，半路出家不容易，我鼓勵大家把學習想成是一個「逐漸清晰」的過程 看過電腦讀取大張高清圖片的樣子嗎？先是模模糊糊的馬賽克，接著一塊一塊慢慢變清晰，最後才是變成完整的美麗圖片 學習會有點類似這樣，一開始到處模模糊糊的沒關係，保持耐心，逐步提高各處的解析度即可 只要先有一整張模糊的圖片即可。不需要執著在圖片一個角落，覺得這塊不清楚，就不能往下走 更千萬不要因為圖片模糊，就覺得「我果然不適合寫程式，放棄好了」，這絕對是搞錯重點 以上，簡單建議分享，希望對你有幫助！
簡單複習一下，在這次的課程中，我們學會了 - 用 express 處理 http get 請求 - 用 express 處理 http post 請求 - 用 express 提供靜態檔案 - 取得 url 參數 - 取得表單參數 是不是很有趣呢？ --- 再次說明，這次的課程主要是學習網頁協定＆基本觀念，實務上後端開發有很多東西要學 舉例來說，下面這些東西本課程都省略了： - ejs 模板的 layout 功能 - 連接資料庫軟體 - 會員系統、註冊登入、驗證功能 雖然省略了很多東西，但我認為已經能讓你對於 http 協定與後端開發，有大致的了解 因此基本功比一般的前端開發者更好！這也是本課的目的所在！ 很多前端工程師，工作了好一陣子，卻還是搞不清某些觀念、任務屬於前端還是後端！要避免這種混淆，職業發展才能順利又有效率！ 後面的課程，我會進一步教你清楚認識前端、後端的區別、以及釐清一些常見迷思！讓你在前端之路上，走得更順遂！ --- 消化、研究完本課程之後，請接著前往下一份教材，繼續邁向資深之路吧！ **教材研發中，敬請期待**
## 課程目標 - 使用 node 與 express 回應 http post request ## 課程內容 前面幾課我們學習了 http get 的寫法，這次來學 http post 的寫法 在「會更新主機資料狀態」的操作時，通常都會用 http post 例如，新增資料、更新資料、刪除資料，等等常見操作！ 通常主機資料狀態會放在「資料庫軟體」例如 mysql 裡面，我們簡單起見，放在一個 json 檔案就好！ --- 替這課建立 lesson6 資料夾，內容跟 lesson5 一樣即可 新增一個 new.ejs 檔案，放入以下內容 ``` <h1>新同學報到！</h1> <form method="post" action="/create"> name: <input type="text" name="name"> </form> ``` 然後在 index.js 加入這段程式碼 ``` const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.get('/new', function(req, res){ res.render('new'); }); app.post('/create', (req, res) => { const fs = require('fs'); const name = req.body.name; const data = fs.readFileSync('./lesson6/users.json'); const users = JSON.parse(data); users.push({ name: name }); fs.writeFileSync('./lesson6/users.json', JSON.stringify(users)); res.send('<h1>新增成功！</h1>'); }) ``` 然後去終端機輸入 ``` node lesson6/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/new ``` 你會看到新增同學的頁面與表單！ 輸入姓名之後，送出表單就可以新增同學的資料了！ --- 開頭跟 bodyParser 有關的兩行，要引入並設定好，才能使用 req.body 的參數 為什麼要加這兩行？這跟 express 的 middleware 機制設計有關，這邊不深入說明 反正就是在需要使用某些功能的時候，express 不會預設通通提供給你，要請你去設定啟用之後，才會支援 --- 之前處理 http get 的 url 參數時，我們使用 req.query 來取得參數 這次處理 http post 的表單參數時，我們使用 req.body 來取得參數 express 會這樣設計，是因為在 http 協定中，這兩種參數本來就放在不同地方喔！ 看不太懂沒關係，先照做就對了！ --- 檔案處理、新增資料放進 json 檔案的段落，跟之前的課程一樣，忘記的話就回頭翻閱一下吧！ ## 課後作業 這次要開發「新增文章」的功能 並且練習用 node 回應 http post request 請把 hw5 的內容複製到 hw6，然後增加 new.ejs 檔案 ``` /repo /hw6 /index.js /homepage.ejs /view.ejs /new.ejs /posts.json /public /style.css ``` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/new` 這個網址 這網址會把 new.ejs 的內容 render 出來，內容就放一個 form 表單 表單內可輸入 `標題` 以及 `文章內容`，點擊送出按鈕會以 http post 的形式發送到 `/create` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/create` 這個網址 將接收到的資料，存進 `posts.json` 裡面 完成以上任務，你就完成這次的課程目標了！ --- 在上傳到 github 時，你會注意到因為 `posts.json` 有改變，所以會帶著新資料一起上傳，好像有點怪？ 其實，實務上會把資料存在 mysql 這類專門資料庫軟體，不會這樣存在 json 檔案中 本課程為了簡化，所以直接存在 json 檔案，這不是實務正常做法～ 為了方便起見，每次新增文章 `posts.json` 都會改變，就都一起上傳，沒關係～
## 課程目標 - 使用 node 與 express 處理 url 參數 ## 課程內容 在瀏覽網站的時候，點擊不同頁面時，有時需要透過 url（網址）附帶一些參數 這課來學習如何用 node 處理 url 參數 替這課建立 lesson5 資料夾，內容跟 lesson4 一樣即可 在 index.js 加入這段程式碼 ``` app.get('/view', (req, res) => { const data = fs.readFileSync('./lesson5/users.json'); const users = JSON.parse(data); const index = req.query.index; const user = users[index]; res.send('<h1>' + user.name + '同學，你好！</h1>'); }); ``` 然後把 hello.ejs 的內容修改成 ``` <div> <% for(var i = 0; i < users.length; i++) { %> <p> <%= users[i].name %>同學，你好！ <a href="/view?index=<%= i %>">單獨打招呼頁面</a> </p> <% } %> </div> ``` 然後去終端機輸入 ``` node lesson5/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到每段訊息旁邊，多了一個單獨連結，點下去，就會到單獨打招呼頁面！ 操作看看吧！試試看「透過網址傳參數」的感覺！ --- 在 http 協定中，網址中出現問號 `?` 代表後面的部份是參數，參數的值應該可以單獨被抓出來 前面說過 `(req, res)` ，很多人會寫 `(request, response)`，兩者意思一樣，就是在 express 中代表請求＆回應的物件 這邊是我們第一次使用「請求」物件！我們在請求物件中，使用 `req.query.index` 找出名為 `index` 的參數 然後在首頁，透過迴圈，加上每個單獨頁面的連結，通通使用 `index` 作為參數傳遞 --- 實務上，開發後端應用時，只要是 http get request，有時會透過網址本身代表參數，例如 ``` /view/1 /view/2 /view/3 ``` 有時會透過 url parameter 傳遞參數，例如 ``` /view?id=1 /view?id=2 /view?id=3 ``` 這是一個主觀偏好問題，其實都可以！效果也差不多 這兩種寫法，在各種程式語言中，處理起來有點不一樣 本課就以 url parameter 作為示範，先照做即可，別擔心！ ## 課後作業 這次要開發「閱讀單篇文章」的功能 並且練習 url 參數的傳遞＆取得 請把 hw4 的內容複製到 hw5，然後增加 view.ejs 檔案 ``` /repo /hw5 /index.js /homepage.ejs /view.ejs /posts.json /public /style.css ``` 修改部落格首頁，替每篇文章加上 <a> 超連結，點擊之後會前往單篇文章的網址 舉例來說，第一篇文章的網址會是 ``` <a href="/view?index=0"> ``` 第二篇的網址會是 ``` <a href="/view?index=1"> ``` 第三篇的網址會是 ``` <a href="/view?index=2"> ``` 接著修改主程式 index.js 的內容，讓網站能夠回應 `/view` 這種網址 然後根據從網址取得的索引參數，找出 posts.json 中對應的文章資料 接著把資料放進 view.ejs 模板中，回應顯示為網頁 請自行設計 view.ejs 的內容，簡單顯示一篇文章內容即可 請稍微加上一點樣式，弄得漂亮一點！ 完成以上任務，你就完成這次的課程目標了！
來，讓我們特別關心轉職成功、上班超過一個月的 @birdie2019 @JoeyLai 是否已掌握公司狀況？ 是否變得越來越有自信？ 最近有學到新東西？ 隨時歡迎上來分享工作筆記 or 上來發問卡關問題～
收到網友提問如下： ``` 這是最近跟一個朋友聊天聊到的 朋友是寫 .net Framework 的 我剛碰Vue的時候，跟他說我看不懂Vue在背後是怎麼運作的、為什麼這樣寫會變成這樣的結果？ 他跟我說，不用去在意框架背後幫你做了哪些事情 反正就是做那些制式的動作，把功能實現就好 不然工程師哪有那麼多腦力去記住程式底層都做了什麼 這樣真的是好的嗎？ 工程師的等級差距並不在於是否知其所以而不知其所以然嗎？ ``` 這應該是每個年輕工程師都有的疑問，寫一篇完整、公開回答跟大家分享，給類似狀況的人參考。 我先講結論：這取決於你想不想越變越強、不斷提升競爭力，還是只想混口飯吃 如果只想混口飯吃，什麼工具都是學個用法，懶得研究，然後東西做出來交差了事，那可以永遠不去管工具背後原理 不過，這種心態，職涯成長、薪水成長空間會很有限，然後在 40 多歲的時候會有「中年危機」，會很慘、壓力很大 因為屆時新工具你跟年輕人一樣不太會用，舊有的經驗又幫不上忙，因為你從來不肯學背後通用的觀念 回到問題本身，我認為有兩件事情值得分享，有兩個觀點你需要去權衡，我們先談談「抽象」 # Abstraction 抽象 軟體工程師的主要工作就是「抽象化」，把各種邏輯分不同層次「封裝為抽象」 這樣才有重用性，別人才能基於你的成果，進一步開發更豐富的東西 網路的七層架構，各種協定，程式語言，語言上面的工具、套件、框架，都是抽象 # The Law of Leaky Abstractions，抽象滲漏法則：除非無關緊要，否則所有抽象都或多或少會滲漏 這是在軟體圈知名的一個理論，稍微資深的開發者都應該要知道這篇文章 https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/ 我簡單說明一下，抽象滲漏法則就是在說：所有抽象都一定會在某些情境下失效，此時便是滲漏。 你只要工作時間夠久就會知道，長遠來說，你還是要花時間去研究它抽象背後的東西。 你本以為只是前端隨便寫一寫交差，卻發現有一天需要認真去看 HTTP 協定、CORS 在講什麼，否則無法處理資安問題 你本以為只是後端 CRUD 隨便寫一寫交差，卻發現有一天需要認真去看 database 索引機制、記憶體管理，否則無法處理效能問題 結論：「抽象」幫助我們省下一些工作的時間，但關於技術細節的學習時間，無法省下來。 # 你的生產力要對公司商業產值有幫助 我認為工程師常常在另一個方面犯錯，就是鑽研自己喜歡的細節，不去管對於公司的商業產值與個人生產力 我曾遇過公司要求協助更換一張網頁圖片，某工程師居然兩個星期還沒更換完成 問他原因，原來是他看圖片尺寸不順眼，在研究分割、壓縮、整個網頁的整合機制，以及相關工具的導入 問題是，那個網頁跟圖片並不重要，此時專案還沒進到效能優化的階段，此功能應該盡快上線，視情況決定下一步 這完全是沒搞清楚優先順序，只顧著研究自己爽的東西，也沒跟相關人士確認任務目標 # 結論 回到原 po 的描述 ``` 不然工程師哪有那麼多腦力去記住程式底層都做了什麼 ``` 這是大錯特錯，隨便找一個優秀的資深工程師，從 Vue 到 React 到各種工具，背後原理、相關機制，都能深入淺出跟你說明 什麼 shadow DOM / virtual DOM / pure function / fiber tree / proxy / immutable 等等，就算好幾個月不碰工具，還是能輕鬆解釋，根本不是死記硬背的，這全都是經驗＆融會貫通的結果 但是過猶不及，不顧公司需求，自顧自地研究技術細節也不好 該花多少時間研究背後機制？這是一個需要權衡的問題 請從公司需求的角度，以及個人長期職涯的角度，視情況判斷 以上，簡單分享
收到網友提問如下： ``` 我不知道自己想做前或後端，怎麼辦？ ``` 其實很多人都是這樣，阿川建議「就先都學」！ 如果急著上班賺錢，可以先側重「前端」，然後找個新手友善的職缺就先衝了 因為後端的技術有很多，一開始也不知怎麼挑選 以阿川目前觀察身邊同年紀33歲左右工程師 那些很強的前端或後端，雖然有專精的部份，但其實，同時也是「全端」工程師 同時對前後端保持興趣，有很大的好處 首先，同時學習前後端，會對網路技術生態系，有更深、更廣的了解 再來，是在求職的時候，可以應徵前端的機會，也可以應徵後端的機會 以我自己本人來說，面試上班、或者接案的時候，有時會負責前端，有時會負責後端，工作機會就多很多 最後，擁有全端技能，就算都是初階經驗，也可以在業餘時間做 side-project 甚至是跟朋友一起創業當副業 總之不用一開始就強迫自己一定要選好前端或後端 迷惘、探索、好奇的狀態，本來就是人生的常態 有時間的話，就都學吧！急著賺錢的話，可以先從前端開始～！ 以上，簡單分享
合作對於開發高質量程式碼至關重要。在本文中，我們將探討結對編程的概念，揭示其優點並推薦有用的工具。我們還將打破一些關於結對編程的常見誤解。 原文出處：https://dev.to/documatic/pair-programming-best-practices-and-tools-154j ## 什麼是結對編程？ [結對編程](https://en.wikipedia.org/wiki/Pair_programming) 是一種讓兩個開發人員一起完成同一任務的技術。在這個過程中，一個人編寫程式碼（驅動程序），另一個人檢查每一行並提供反饋（導航器）。這種方法不同於傳統的單獨編程，並具有多種優點。 驅動程序的職責是專注於操作計算機和輸入程式碼的機制。導航員的責任是思考需要做什麼以及我們要去哪裡。兩人會不斷地溝通並頻繁地轉換角色，可能每隔幾分鐘。  ## 結對編程的好處 ### 提高程式碼質量 當兩個軟體工程師一起工作時，他們可以快速發現彼此的錯誤，從而產生高質量的程式碼，從而顯著減少遺漏錯誤的機會。編程合作夥伴可以提供寶貴的見解、提出改進建議，並在做出承諾之前獲得有關其想法的反饋。 例如，在處理編碼問題時，一個軟體工程師可以專注於實現解決方案，而另一個軟體工程師則監視任何錯誤或語法錯誤。這樣，團隊就可以建立更清晰、更實用、更優化的程式碼。 ### 加強協作和溝通 結對編程還增強了兩個開發人員之間的協作。它幫助他們在相同的程式碼庫上工作並分享他們的知識和技能，從而更好地解決問題。它還解決了同事之間的溝通鴻溝，因為它促進了溝通，實現了快速、輕鬆的訊息共享。 例如，在開發新功能時，一名軟體工程師可以解釋他們的思維過程和想法，而另一名軟體工程師可以提供反饋並提出問題以澄清需要做什麼。這樣，團隊就可以共同尋找最佳解決方案並避免誤解。 ### 提高生產力 結對編程可以提高開發團隊的生產力。當兩個軟體工程師一起工作時，他們可以通過分擔責任更快地完成任務。一個可以解決問題，另一個可以搜尋潛在的錯誤。這樣，團隊就能比單獨工作更高效地解決問題、更有效地工作。這也取決於個人，一些軟體工程師在單獨工作時效率更高。 例如，在一個專案上的兩人合作中，一個人可能需要一兩個小時才能完成一項單獨開發人員需要三四個小時才能完成的任務。第二對可以專注於查找程式碼中的錯誤或其他問題。這意味著團隊可以用更少的時間和更少的精力完成任務，從而提高整體生產力。 ## 關於結對編程的誤解 在討論結對編程的最佳實踐之前，讓我們先澄清一些關於結對編程的誤解。 ### 誤區#1：結對編程很昂貴 這是關於結對編程的一個常見誤區。但實際上，這是對團隊生產力、程式碼質量和創新的投資。從長遠來看，通過及早發現錯誤可以節省時間並降低成本。所以，這不是真的。 ### 誤區#2：結對編程很慢 結對編程比其他編碼方法更快，因為它允許快速更正。當兩個開發人員協作時，他們可以避免許多錯誤和錯誤並加快問題解決速度。因此，除非開發人員只是為了好玩而不是高效地工作，否則這是不正確的。 ### 誤區#3：結對編程導致緊張 一些人認為結對編程會給開發人員帶來太大壓力，導致工作場所發生衝突。然而，這種情況只發生在該技術實施不佳的情況下。這取決於您與編程夥伴的關係如何。如果它很好，那麼這不適用於你。 ## 結對編程的最佳實踐 為了充分利用結對編程課程，請考慮遵循以下最佳實踐： ### 明確定義角色 明確界定駕駛員和領航員的角色。駕駛員編寫程式碼，而導航員檢查程式碼並提供反饋。經常切換角色以保持兩位開發人員的參與並避免一個人主導整個會話。  ### 有效溝通 結對編程期間，溝通至關重要。雙方開發人員都應該積極參與，表達自己的想法，並認真傾聽。分享想法、提出問題並公開討論程式碼。使用螢幕共享和程式碼審查平台等協作工具來促進溝通。  ### 尊重和同理心 相互尊重和同理心對於成功的結對編程至關重要。重視彼此的意見、想法和專業知識。對建設性批評持開放態度，避免人身攻擊。建立一個鼓勵協作和學習的支持性和非評判性環境。  ### 休息一下 結對編程可能對智力要求很高。定期休息對於防止疲勞和保持工作效率非常重要。利用這些休息時間反思進展、討論挑戰併計劃下一步。請記住考慮彼此的精力水平並相應地安排休息時間。  ### 擁抱學習機會 結對編程是學習和技能發展的絕佳機會。與您的合作夥伴分享知識、技術和最佳實踐。對新想法和方法持開放態度。鼓勵參與的開發人員不斷學習和成長。  ### 練習主動程式碼審查 利用結對編程的力量來持續審查和驗證程式碼。討論潛在的改進、及早發現缺陷並解決設計缺陷。利用兩位開發人員的專業知識來確保程式碼具有最高質量。  ### 計劃並設定目標 在開始結對編程課程之前，討論並調整手頭任務的目的和目標。將工作分解為更小的、可管理的部分。設定明確的里程碑並確定任務的優先順序，以保持重點和進展。  ### 記錄和分享知識 在結對編程會議期間做筆記，以記錄重要的討論、決策和見解。建立可以與團隊共享的文件，有助於傳播知識並確保整個專案的一致性。  ### 反思和改進 完成結對編程課程後，花時間反思這次經歷。討論哪些方面進展順利，哪些方面可以改進。根據反饋和經驗教訓不斷完善您的結對編程實踐。  *通過遵循這些最佳實踐，您可以最大限度地發揮結對編程的優勢。協作和程式碼質量將得到改善，開發人員將有機會增長他們的技能和知識。* ## 結對編程工具 為了充分利用結對編程，開發人員可以依靠各種工具來簡化流程。以下是一些可用的最佳工具： ### 實時分享（VS Code） [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 是 VS Code 的擴展。它包含在最新版本的 VS Code 中。該工具使使用 VS Code 的開發人員能夠實時協作。  ### Replit [Replit](https://replit.com/) 是一個在線工具，可讓您與其他開發人員協作，而無需下載或安裝任何額外的軟體。您所要做的就是打開網絡瀏覽器，然後就可以開始了。如果您只是需要與其他人一起實時編輯程式碼，那麼它是完美的。 Replit 的一大優點是它支持 50 多種編程語言，使其具有多功能性並適合廣泛的專案。  ### CodeSandbox Live [CodeSandbox](https://codesandbox.io/blog/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser) Live 是一項實時協作功能，使開發人員能夠在同一平台上工作實時專案。借助 CodeSandbox Live，多個開發人員可以同時處理同一個程式碼庫，從而更輕鬆地協作處理複雜的專案。  ### Codeanywhere [Codeanywhere](https://codeanywhere.com/) 是一個基於雲的集成開發環境 (IDE)，允許開發人員使用任何具有網路連接的設備從任何地方編碼、協作和管理他們的專案。它提供了一套全面的工具和功能來促進編碼和簡化開發工作流程。  ### [CodeTogether](https://www.codetogether.com/) CodeTogether **允許您通過 Eclipse、IntelliJ 或 VS Code 主持和加入協作編碼會話**。來賓可以從安裝了 CodeTogether 的自己的 IDE 加入會話，即使它與主機的 IDE 不同。訪客還可以通過任何現代瀏覽器加入會話，無需進行任何設置。  ## 結論 最後，結對編程對於軟體開發人員來說是一種非常有效的技術。它增強了協作、程式碼質量、團隊生產力和許多其他方面。遵循最佳實踐並使用適當的工具是成功結對編程的關鍵。
本文將分為三個部分： 1. 通用設計模式 2. 我的建議 3. 進一步閱讀 享受並且讓我知道您在專案中使用的模式和實踐🚀 原文出處：https://dev.to/jacobandrewsky/good-practices-and-design-patterns-for-vue-composables-24lk ## 通用設計模式 我認為了解建置可組合項模式的最佳來源實際上是 Vue.js 文件，您可以在[此處](https://vuejs.org/guide/reusability/composables.html)查看 ### 基本可組合項 Vue 文件顯示了以下 useMouse 可組合項的示例： ``` // mouse.js import { ref, onMounted, onUnmounted } from 'vue' // by convention, composable function names start with "use" export function useMouse() { // state encapsulated and managed by the composable const x = ref(0) const y = ref(0) // a composable can update its managed state over time. function update(event) { x.value = event.pageX y.value = event.pageY } // a composable can also hook into its owner component's // lifecycle to setup and teardown side effects. onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) // expose managed state as return value return { x, y } } ``` 稍後可以在元件中使用它，如下所示： ``` <script setup> import { useMouse } from './mouse.js' const { x, y } = useMouse() </script> <template>Mouse position is at: {{ x }}, {{ y }}</template> ``` ### 異步可組合項 為了獲取資料，Vue 建議使用以下可組合結構： ``` import { ref, watchEffect, toValue } from 'vue' export function useFetch(url) { const data = ref(null) const error = ref(null) watchEffect(() => { // reset state before fetching.. data.value = null error.value = null // toValue() unwraps potential refs or getters fetch(toValue(url)) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)) }) return { data, error } } ``` 然後可以在元件中使用它，如下所示： ``` <script setup> import { useFetch } from './fetch.js' const { data, error } = useFetch('...') </script> ``` ### 可組合合約 根據上面的示例，以下是所有可組合項都應遵循的約定： 1. 可組合文件名應以 use 開頭，例如 `useSomeAmazingFeature.ts` 2. 它可以接受輸入參數，這些參數可以是字串等基本類型，也可以接受 refs 和 getter，但需要使用 toValue 幫助器 3. Composable 應該返回一個 ref 值，該值可以在解構可組合項後存取，例如 `const { x, y } = useMouse()` 4. 可組合項可以保存可以在整個應用程式中存取和修改的全局狀態。 5. 可組合性可能會產生副作用，例如加入窗口事件偵聽器，但在卸載元件時應清除它們。 6. 可組合項只能在 `<script setup>` 或 `setup()` 掛鉤中呼叫。它們也應該在這些上下文中同步呼叫。在某些情況下，您還可以在生命週期掛鉤中呼叫它們，例如“onMounted()”。 7. 可組合項可以呼叫內部的其他可組合項。 8. 可組合項應在內部包裝某些邏輯，當過於復雜時，應將它們提取到單獨的可組合項中以便於測試。 ## 我的建議 我已經為我的工作專案和開源專案建置了多個可組合項 - NuxtAlgolia、NuxtCloudinary、NuxtMedusa，因此基於這些，我想根據我的經驗在上面的合同中加入一些要點。 ### 有狀態或/和純函數可組合項 在程式碼標準化的某個時刻，您可能會得出這樣的結論：您希望對可組合項中的狀態保留做出決定。 最容易測試的函數是那些不存儲任何狀態的函數（即它們是簡單的輸入/輸出函數），例如負責將字節轉換為人類可讀值的可組合函數。它接受一個值並返回一個不同的值 - 它不存儲任何狀態。 不要誤會我的意思，你不必做出“或”的決定。您可以完全保留有狀態和無狀態可組合項。但這應該是一個書面決定，以便以後更容易與他們合作 🙂 ### 可組合項的單元測試 我們希望使用 Vitest 為我們的前端應用程式實施單元測試。在後端工作時，進行單元測試程式碼覆蓋率非常有用，因為您主要關注邏輯。然而，在前端，您通常使用視覺效果。 因此，我們認為對整個元件進行單元測試可能不是最好的主意，因為我們基本上將對框架本身進行單元測試（如果按下按鈕，檢查狀態是否更改或模式是否打開）。 由於我們已將所有業務邏輯移至可組合項（基本上是 TypeScript 函數）內，因此它們很容易使用 Vitest 進行測試，並且允許我們擁有更穩定的系統。 ### 可組合項的範圍 不久前，在 VueStorefront 中，我們開發了自己的可組合方法（早在它們實際上像這樣被呼叫之前）。在我們的方法中，我們使用可組合項來映射電子商務的業務領域，如下所示： ``` const { cart, load, addItem, removeItem, remove, ... } = useCart() ``` 這種方法絕對有用，因為它允許將域包裝在一個函數中。在“useProduct”或“useCategory”等更簡單的示例中，實現和維護相對簡單。然而，正如您在此處的“useCart”示例中看到的那樣，當包裝一個包含更多邏輯而不僅僅是資料獲取的域時，這個可組合項正在發展成為一種非常難以開發和維護的形狀。 此時，我開始為 Nuxt 生態系統做出貢獻，其中引入了不同的方法。在這種新方法中，每個可組合項僅負責一件事。因此，我們的想法不是建置一個巨大的“useCart”可組合項，而是為每個功能建置可組合項，即“useAddToCart”、“useFetchCart”、“useRemovefromCart”等。 因此，維護和測試這些可組合項應該更容易 🙂 ## 進一步閱讀 這將是我的研究的全部內容。如果您想了解有關此主題的更多訊息，請務必查看以下文章： * https://vuejs.org/guide/reusability/composables.html * https://www.youtube.com/watch?v=bcZM3EogPJE * https://vueschool.io/articles/vuejs-tutorials/what-is-a-vue-js-composable/ * https://blog.logrocket.com/getting-started-vue-composables/ * https://macopedia.com/blog/news/how-can-vue-3-composables-make-your-life-easier
我曾經不同意淺色和深色模式切換。 “切換開關是用戶系統偏好設置！”我會天真地感嘆，選擇讓 [prefers-color-scheme CSS 媒體查詢](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 控制我個人網站上的主題。沒有切換。沒有選擇。 🫠 自從黑暗模式出現以來，我一直是它的用戶。但最近，我更喜歡在輕型模式下使用_**一些**_網站和工具 - 包括我的個人網站 - 同時將我的系統設置牢牢地保留在黑暗中。我需要一個開關。我需要一個選擇！其他人也是如此。 在這篇文章中，我將向您展示如何使用 JavaScript 為我的網站建置終極主題 Toggle™️： 1. 在本地瀏覽器存儲中存儲和檢索主題首選項， 1. 退回到用戶系統首選項， 1. 如果未檢測到上述情況，則回退到默認主題。 TL;DR：[這是 CodePen 上的程式碼](https://codepen.io/whitep4nth3r/pen/VwEqrQL)。 原文出處：https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f ## 將資料屬性加入到 HTML 標記中 在 HTML 標記上，加入一個資料屬性，例如“data-theme”，並為其指定默認值“淺色”或“深色”。過去我使用自定義屬性“color-mode”而不是資料屬性（例如“color-mode=”light“”）。雖然這可行，但它沒有被歸類為有效的 HTML，而且我找不到任何相關文件！對此的任何見解都非常感激。 😅 ``` <html lang="en" data-theme="light"> <!-- all other HTML --> </html> ``` ## 通過 CSS 自定義屬性配置主題 在 CSS 中，通過“data-theme”每個值下的 [CSS 自定義屬性](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)（或變數）配置主題顏色` 屬性。請注意，您不一定需要將 `:root` 與 `data-theme` 結合使用，但它對於不隨主題變化的全局屬性很有用（如下例所示）。 [在 MDN 上了解有關 :root CSS 偽類的更多訊息。](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) ``` :root { --grid-unit: 1rem; --border-radius-base: 0.5rem; } [data-theme="light"] { --color-bg: #ffffff; --color-fg: #000000; } [data-theme="dark"] { --color-bg: #000000; --color-fg: #ffffff; } /* example use of CSS custom properties */ body { background-color: var(--color-bg); color: var(--color-fg); } ``` 在 HTML 標籤上手動切換“data-theme”屬性，您就會看到主題已經發生變化（只要您使用這些 CSS 屬性來設置元素的樣式）！ ## 在 HTML 中建置一個切換按鈕 將 HTML 按鈕加入到您的網站標題或任何需要主題切換的位置。加入一個 `data-theme-toggle` 屬性（稍後我們將使用它來定位 JavaScript 中的按鈕）和一個 [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)如果您計劃在按鈕上使用圖標（例如太陽和月亮分別代表淺色和深色模式），以便螢幕閱讀器和輔助技術可以理解按鈕的用途互動按鈕。 ``` <button type="button" data-theme-toggle aria-label="Change to light theme" >Change to light theme (or icon here)</button> ``` ## 計算頁面加載時的主題設置 在這裡，我們將根據我所說的“_**偏好級聯**_”來計算主題設置。 ### 從本地存儲獲取主題首選項 我們可以使用 [JavaScript 中的 localStorage 屬性](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 將用戶首選項保存在瀏覽器中，該首選項在會話之間持續存在（或直到它手動清除）。在 The Ultimate Theme Toggle™️ 中，存儲的用戶首選項是最重要的設置，因此我們將首先查找它。 頁面加載時，使用 localStorage.getItem("theme") 檢查之前存儲的首選項。在本文後面，我們將在每次按下切換按鈕時更新主題值。如果沒有本地存儲值，則該值為“null”。 ``` // get theme on page load localStorage.getItem("theme"); // set theme on button press localStorage.setItem("theme", newTheme); ``` ### 在 JavaScript 中檢測用戶系統設置 如果“localStorage”中沒有存儲的主題首選項，我們將使用 [window.matchMedia() 方法](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)通過傳入媒體查詢字串。您只需計算一項設置即可實現首選項級聯，但下面的程式碼顯示瞭如何檢測淺色或深色系統設置。 ``` const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); // or const systemSettingLight = window.matchMedia("(prefers-color-scheme: light)"); ``` `window.matchMedia()` 返回一個 `MediaQueryList`，其中包含您請求的媒體查詢字串，以及它是否與用戶系統設置“匹配”（true/false）。 ``` { matches: true, media: "(prefers-color-scheme: dark)", onchange: null } ``` ### 回退到默認主題 現在您可以通過“window.matchMedia()”存取“localStorage”值和系統設置，您可以使用首選項級聯（本地存儲，然後系統設置）計算首選主題設置，並回退到默認主題您的選擇（這應該是您之前在 HTML 標記上指定的默認主題）。 我們將在頁面加載時執行此程式碼來計算當前的主題設置。 ``` function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { if (localStorageTheme !== null) { return localStorageTheme; } if (systemSettingDark.matches) { return "dark"; } return "light"; } const localStorageTheme = localStorage.getItem("theme"); const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }); ``` ## 加入事件監聽器到切換按鈕 接下來，我們將設置一個事件監聽器，以便在按下按鈕時切換主題。使用我們之前加入的資料屬性（`data-theme-toggle`）定位 DOM 中的按鈕，並加入一個[事件監聽器](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) 加入到單擊按鈕。 - 將新主題計算為字串 - 計算並更新按鈕文本（如果您在按鈕上使用圖標，則可以在此處進行切換） - 更新按鈕上的aria標籤 - 切換HTML標籤上的data-theme屬性 - 將新的主題首選項保存在本地存儲中 - 更新內存中的currentThemeSetting ``` // target the button using the data attribute we added earlier const button = document.querySelector("[data-theme-toggle]"); button.addEventListener("click", () => { const newTheme = currentThemeSetting === "dark" ? "light" : "dark"; // update the button text const newCta = newTheme === "dark" ? "Change to light theme" : "Change to dark theme"; button.innerText = newCta; // use an aria-label if you are omitting text on the button // and using sun/moon icons, for example button.setAttribute("aria-label", newCta); // update theme attribute on HTML to switch theme in CSS document.querySelector("html").setAttribute("data-theme", newTheme); // update in local storage localStorage.setItem("theme", newTheme); // update the currentThemeSetting in memory currentThemeSetting = newTheme; }); ``` 要確認“localStorage”正在更新，請打開開發工具，導航到“Application”選項卡，展開“Local Storage”並選擇您的站點。你會看到一個鍵：值列表；查找“主題”並單擊按鈕即可觀看其實時更新。重新加載您的頁面，您將看到保留的主題首選項！  ## 把它們放在一起！ 您現在可以通過以下方式建置您自己的終極主題切換™️： - 使用CSS自定義屬性來指定不同的主題顏色，通過HTML標籤上的資料屬性進行切換 - 使用 HTML 按鈕來啟動切換 - 使用首選項級聯計算頁面加載時的首選主題（本地存儲 > 系統設置 > 後備默認主題） - 單擊切換按鈕即可切換主題，並將用戶首選項存儲在瀏覽器中以供將來存取 這是完整的 CodePen，您可以在我的個人網站上查看工作版本。快樂切換！ https://codepen.io/whitep4nth3r/pen/VwEqrQL
作為一名軟體工程師，您希望確保您的程式碼高效、可讀且可維護。為了幫助您實現這些目標，我列出了您在編碼時應該加入的 10 件最重要的事情。 這些有價值的技巧將提高您的編程技能並使您的程式碼更加健壯。 因此，讓我們深入探討每個軟體工程師都應該考慮的基本要素。 原文出處：https://dev.to/dhruvjoshi9/top-10-things-you-should-add-while-coding-valuable-tips-for-programmers-4m3n ### 1. 有意義的變數名 選擇描述性且有意義的變數名稱對於編寫乾淨且可維護的程式碼至關重要。不要使用“var1”或“temp”等通用名稱，而是選擇反映變數用途的名稱。 這種做法提高了程式碼的可讀性並減少了引入錯誤的機會。 ### 2. 簡潔的註解 註釋在程式碼文件中起著至關重要的作用。它們為複雜的程式碼部分提供了額外的上下文和解釋。通過加入註釋，您可以使您自己和將來可能參與該專案的其他開發人員更容易理解您的程式碼。 請記住保持您的評論簡潔、相關且最新。 ### 3. 一致的程式碼格式 程式碼格式的一致性可以增強可讀性，並使其他人更容易理解您的程式碼。遵循您所使用的編程語言的既定編碼約定和風格指南。 一致的縮進、間距和命名約定使您的程式碼看起來專業且可維護。 ### 4. 錯誤處理和異常管理 錯誤處理是編碼的一個關鍵方面。正確處理錯誤和異常可以提高程式碼的可靠性和健壯性。辨識潛在的錯誤場景並實施適當的錯誤處理機制。 使用 try-catch 塊或異常處理技術來優雅地處理異常並防止程序崩潰。 ### 5.優化的資料結構 高效的資料結構是性能良好的軟體應用程式的支柱。根據程序的具體要求選擇合適的資料結構。了解不同資料結構的優點和缺點將使您能夠優化內存使用並提高程式碼的整體效率。 ### 6.高效的算法設計 算法是解決問題的逐步過程。設計有效的算法對於實現最佳程序性能至關重要。考慮算法的時間和空間複雜性，並努力尋求最有效的解決方案。 分析程式碼中是否存在任何不必要的循環或冗餘操作，並重構它們以提高效率。 ### 7. 模塊化和可重用的程式碼 模塊化程式碼提高了程式碼的可重用性和可維護性。將程式碼分解為更小的、獨立的模塊或執行特定任務的函數。這種方法允許您在程序的不同部分重用程式碼，並在必要時更輕鬆地除錯和更新功能。 ### 8. 測試和除錯 徹底的測試和除錯是開發過程中不可或缺的一部分。建立全面的測試用例以確保您的程式碼在不同場景中的行為符合預期。使用除錯工具和技術來辨識和修復任何問題或意外行為。 定期測試和驗證您的程式碼，以便及早發現潛在的錯誤。 ### 9. 版本控制 版本控制系統（例如 Git）是軟體開發專案中管理程式碼更改和協作的重要工具。使用版本控制來跟踪修改，根據需要恢復到以前的版本，並與其他團隊成員有效協作。 熟悉常見的版本控制命令和工作流程，以簡化您的開發流程。 ### 10.持續學習 編程是一個快速發展的動態領域。秉持持續學習的心態，及時了解最新技術、編程語言和最佳實踐。探索在線資源，參加研討會或會議，並與編程社區互動，以擴展您的知識並提高您的編碼技能。 ## FAQ ### 問：為什麼有意義的變數名稱在編碼中很重要？ 答：有意義的變數名可以增強程式碼的可讀性，並且更容易理解變數的用途。它們提高了程式碼的可維護性並減少了引入錯誤的可能性。 ### 問：註釋對程式碼文件有何幫助？ 答：註釋為複雜的程式碼部分提供了額外的上下文和解釋。它們使開發人員更容易理解程式碼並充當文件的形式。 ### 問：為什麼我們應該遵循一致的程式碼格式？ 答：一致的程式碼格式可以提高程式碼的可讀性和可維護性。它使原始開發人員和將來可能參與該專案的其他開發人員更容易理解程式碼。 ### 問：編碼中錯誤處理的重要性是什麼？ 答：錯誤處理對於防止程序崩潰和提高程式碼的可靠性至關重要。正確的錯誤處理可以從錯誤中正常恢復，並增強軟體的整體穩健性。 ### 問：資料結構如何影響程序的性能？ 答：高效的資料結構可以優化內存使用，提高程序的整體性能。根據程序的具體要求選擇適當的資料結構對於實現最佳性能至關重要。 ### 問：為什麼模塊化程式碼在編程中很重要？ 答：模塊化程式碼提高了程式碼的可重用性和可維護性。將程式碼分解為更小的、獨立的模塊可以更輕鬆地管理和更新功能，從而生成更清晰、更易於維護的程式碼。 ## 最後 將這 10 件事納入您的編碼實踐將顯著提高您的編程技能，並幫助您建置更好的軟體應用程式。 通過關注有意義的變數名、清晰的註釋、一致的程式碼格式、錯誤處理、優化的資料結構、高效的算法設計、模塊化的程式碼、徹底的測試、版本控制和持續學習，你將成為一名更加熟練的軟體工程師。 請記住，編程是一個不斷改進的旅程，因此請接受這些有價值的技巧，並在編碼工作中追求卓越。
如何在微前端中處理 CSS？畢竟，樣式始終是*任何* UI 片段所需要的東西，但是，它也是全局共享的東西，因此是潛在的衝突來源。 在這篇文章中，我想回顧一下現有的不同策略來馴服 CSS 並使其擴展以開發微前端。如果這裡的任何內容對您來說聽起來很合理，那麼也可以考慮研究一下[“微前端的藝術”](https://microfrontends.art/)。 **本文的程式碼可以在[github.com/piral-samples/css-in-mf](https://github.com/piral-samples/css-in-mf)找到。請務必查看示例實現。** CSS 的處理是否會影響每個微前端解決方案？讓我們檢查可用的類型來驗證這一點。 原文出處：https://dev.to/florianrappl/css-in-micro-frontends-4jai ## 微前端的類型 過去我寫了很多關於存在哪些類型的微前端、為什麼存在以及何時應該使用什麼類型的微前端架構的文章。採用 Web 方法意味著使用 iframe 來使用來自不同微前端的 UI 片段。在這種情況下，沒有任何限制，因為無論如何每個片段都是完全隔離的。 在任何其他情況下，無論您的解決方案使用客戶端還是伺服器端組合（或介於兩者之間的東西），您最終都會得到在瀏覽器中評估的樣式。因此，在所有其他情況下，您都會關心 CSS。讓我們看看這裡有哪些選項。 ## 無特殊處理 好吧，第一個 - 也許是最（或根據觀點，最不）明顯的解決方案是不進行任何特殊處理。相反，每個微前端都可以附帶額外的樣式表，然後在渲染微前端的元件時附加這些樣式表。 理想情況下，每個元件僅在首次渲染時加載所需的樣式，但是，由於這些樣式中的任何一個都可能與現有樣式衝突，我們也可以假裝在微前端的任何元件渲染時加載所有“有問題的”樣式。  這種方法的問題在於，當給出諸如“div”或“div a”之類的通用選擇器時，我們還將重新設置其他元素的樣式，而不僅僅是原始微前端的片段。更糟糕的是，類和屬性也不是故障保護措施。像“.foobar”這樣的類也可以在另一個微前端中使用。 **您將在引用的演示存儲庫中找到兩個衝突的微前端的示例，網址為 [solutions/default](https://github.com/piral-samples/css-in-mf/tree/main/solutions)。** 擺脫這種痛苦的一個好方法是進一步隔離元件 - 就像 Web 元件一樣。 ## 影子 DOM 在自定義元素中，我們可以打開一個影子根來將元素附加到專用的迷你文件，該迷你文件實際上與其父文件屏蔽。總的來說，這聽起來是一個好主意，但與這裡介紹的所有其他解決方案一樣，沒有硬性要求。  理想情況下，微前端可以自由決定“如何”實現元件。因此，實際的 Shadow DOM 集成必須由微前端完成。 使用 Shadow DOM 有一些缺點。最重要的是，雖然 Shadow DOM 內部的樣式保留在內部，但全局樣式也不會影響 Shadow DOM。乍一看，這似乎是一個優勢，但是，由於整篇文章的主要目標只是隔離微前端的樣式，因此您可能會錯過諸如應用某些全局設計系統（例如 Bootstrap）之類的要求。 要使用 Shadow DOM 進行樣式設置，我們可以通過“link”引用或“style”標籤將樣式放入 Shadow DOM 中。由於 Shadow DOM 是無樣式的，並且外部的樣式不會傳播到其中，因此我們實際上需要它。除了編寫一些內聯樣式之外，我們還可以使用捆綁器將“.css”（或者類似“.shadow.css”的內容）視為原始文本。這樣，我們只會得到一些文本。 對於 esbuild，我們可以配置 `piral-cli-esbuild` 的預製配置，如下所示： ``` module.exports = function(options) { options.loader['.css'] = 'text'; options.plugins.splice(0, 1); return options; }; ``` 這會刪除初始 CSS 處理器 (SASS) 並為“.css”文件配置標準加載器。現在，shadow DOM 中的某些樣式的工作方式如下： ``` import css from "./style.css"; customElements.define(name, class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } connectedCallback() { this.style.display = "contents"; const style = this.shadowRoot.appendChild(document.createElement('style')); style.textContent = css; } }); ``` 上面的程式碼是一個有效的自定義元素，從樣式角度來看它是透明的（“display：contents”），即只有其內容會反映在渲染樹中。它託管一個包含單個“style”元素的影子 DOM。 `style` 的內容設置為 `style.css` 文件的文本。 **您將在 [`solutions/shadow-dom`](https://github.com/piral-samples/css-in-mf/tree/main) 引用的演示存儲庫中找到兩個衝突的微前端的示例/解決方案/shadow-dom）。** 域元件避免使用影子 DOM 的另一個原因是，並非每個 UI 框架都能夠處理影子 DOM 中的元素。因此，無論如何都必須尋找替代解決方案。一種方法是轉而使用一些 CSS 約定。 ## 使用命名約定 如果每個微前端都遵循全局 CSS 約定，那麼就可以在元級別上避免衝突。最簡單的約定是在每個類前面加上微前端的名稱。因此，舉例來說，如果一個微前端稱為“shopping”，另一個微前端稱為“checkout”，那麼兩者都會將其“active”類分別重命名為“shopping-active”/“checkout-active”。  這同樣適用於其他可能存在衝突的名稱。舉個例子，在微前端稱為“shopping”的情況下，我們將其稱為“shopping-primary-button”，而不是像“primary-button”這樣的ID。如果由於某種原因，我們需要設置元素的樣式，我們應該使用後代選擇器（例如“.shopping img”）來設置“img”標籤的樣式。現在，這適用於具有“shopping”類的 *some* 元素中的“img”元素。這種方法的問題是購物微前端也可能使用其他微前端的元素。如果我們看到“div.shopping > div.checkout img”怎麼辦？儘管“img”現在由通過“checkout”微前端帶來的元件託管/集成，但它的樣式將由“shopping”微前端 CSS 設計。這並不理想。 儘管命名約定在一定程度上解決了問題，但它們仍然容易出錯並且使用起來很麻煩。如果我們重命名微前端會怎樣？如果微前端在不同的應用程式中獲得不同的名稱怎麼辦？如果我們在某些時候忘記應用命名約定怎麼辦？這就是工具幫助我們的地方。 ## CSS 模塊 自動引入一些前綴並避免命名衝突的最簡單方法之一是使用 CSS 模塊。根據您選擇的捆綁器，這可以是開箱即用的，也可以通過一些配置更改來實現。  ``` // Import "default export" from CSS import styles from './style.modules.css'; // Apply <div className={styles.active}>Active</div> ``` 導入的模塊是一個生成的模塊，保存將其原始類名（例如“active”）映射到生成的類名的值。生成的類名通常是 CSS 規則內容與原始類名混合的哈希值。這樣，名稱應該盡可能唯一。 作為示例，讓我們考慮使用“esbuild”建置的微前端。對於“esbuild”，您需要一個插件（“esbuild-css-modules-plugin”）和相應的配置更改以包含 CSS 模塊。 使用 Piral 我們只需要調整 `piral-cli-esbuild` 已經帶來的配置。我們刪除標準 CSS 處理（使用 SASS）並用插件替換： ``` const cssModulesPlugin = require('esbuild-css-modules-plugin'); module.exports = function(options) { options.plugins.splice(0, 1, cssModulesPlugin()); return options; }; ``` 現在我們可以在程式碼中使用 CSS 模塊，如上所示。 CSS 模塊有一些缺點。首先，它附帶了一些標準 CSS 的語法擴展。這對於區分我們想要導入的樣式（因此要進行預處理/哈希）和應保持原樣的樣式（即稍後在不導入的情況下使用）是必要的。另一種方法是將CSS直接帶入JS文件中。 ## CSS-in-JS CSS-in-JS 最近的名聲很差，但是，我認為這是一個誤解。我也更喜歡將其稱為“CSS-in-Components”，因為它為元件本身帶來了樣式。一些框架（Astro、Svelte 等）甚至允許通過其他方式直接執行此操作。經常被提及的缺點是性能 - 這通常是由於在瀏覽器中編寫 CSS 造成的。然而，這並不總是必要的，在最好的情況下，CSS-in-JS 庫實際上是建置時間驅動的，即沒有任何性能缺陷。  然而，當我們談論 CSS-in-JS（或 CSS-in-Components）時，我們需要考慮現有的各種選項。為簡單起見，我只包含三個：情感、樣式元件和香草提取物。讓我們看看它們如何幫助我們在將微前端整合到一個應用程式中時避免衝突。 ### Emotion Emotion 是一個非常酷的庫，它附帶了 React 等框架的幫助程序，但沒有將這些框架設置為先決條件。情感可以很好地優化和預先計算，並允許我們使用可用的 CSS 技術的完整庫。 使用“純粹”情感相當容易；首先安裝包： ``` npm i @emotion/css ``` 現在您可以在程式碼中使用它，如下所示： ``` import { css } from '@emotion/css'; const tile = css` background: blue; color: yellow; flex: 1; display: flex; justify-content: center; align-items: center; `; // later <div className={tile}>Hello from Blue!</div> ``` `css` 幫助器允許我們編寫被解析並放置在樣式表中的 CSS。返回值是生成的類的名稱。 如果我們特別想使用 React，我們還可以使用 Emotion 中的 jsx 工廠（引入了一個名為 css 的新標準 prop）或 styled 幫助器： ``` npm i @emotion/react @emotion/styled ``` 現在感覺很像樣式是 React 本身的一部分。例如，“styled”幫助器允許我們定義新元件： ``` const Output = styled.output` border: 1px dashed red; padding: 1rem; font-weight: bold; `; // later <Output>I am groot (from red)</Output> ``` 相比之下，“css”輔助屬性使我們能夠稍微縮短符號： ``` <div css={` background: red; color: white; flex: 1; display: flex; justify-content: center; align-items: center; `}> Hello from Red! </div> ``` 總而言之，這會生成不會衝突的類名，並提供避免樣式混合的穩健性。 “styled”助手尤其受到流行的“styled-components”庫的啟發。 ### 樣式元件 “styled-components”庫可以說是最流行的 CSS-in-JS 解決方案，並且常常是此類解決方案聲譽不佳的原因。從歷史上看，這實際上是在瀏覽器中編寫 CSS 的全部內容，但在過去幾年中，他們確實極大地推進了這一點。今天，您也可以對所使用的樣式進行一些非常好的伺服器端組合。 與“emotion”相比，安裝（針對 React）需要更少的軟體包。唯一的缺點是打字是事後才想到的 - 所以你需要安裝兩個包才能完全喜歡 TypeScript： ``` npm i styled-components --save npm i @types/styled-components --save-dev ``` 安裝後，該庫就已經完全可用： ``` import styled from 'styled-components'; const Tile = styled.div` background: blue; color: yellow; flex: 1; display: flex; justify-content: center; align-items: center; `; // later <Tile>Hello from Blue!</Tile> ``` 其原理與“情感”相同。因此，讓我們探索另一種選擇，嘗試從一開始就實現零成本，而不是事後的想法。 ### Vanilla Extract 我之前寫的關於利用類型更接近元件（並避免不必要的執行時成本）的內容正是最新一代 CSS-in-JS 庫所涵蓋的內容。最有前途的庫之一是“@vanilla-extract/css”。 使用該庫有兩種主要方式： - 與您的捆綁器/框架集成 - 直接使用 CLI 在此示例中，我們選擇前者 - 並將其集成到“esbuild”。為了使集成正常工作，我們需要使用“@vanilla-extract/esbuild-plugin”包。 現在我們將其集成到建置過程中。使用 `piral-cli-esbuild` 配置，我們只需將其加入到配置的插件中： ``` const { vanillaExtractPlugin } = require("@vanilla-extract/esbuild-plugin"); module.exports = function (options) { options.plugins.push(vanillaExtractPlugin()); return options; }; ``` 為了使 Vanilla Extract 正常工作，我們需要編寫 `.css.ts` 文件，而不是普通的 `.css` 或 `.sass` 文件。這樣的文件可能如下所示： ``` import { style } from "@vanilla-extract/css"; export const heading = style({ color: "blue", }); ``` 這都是有效的 TypeScript。我們最終會得到一個類名的導出 - 就像我們從 CSS 模塊、Emotion 中得到的一樣 - 你明白了。 所以最後，上面的樣式將像這樣應用： ``` import { heading } from "./Page.css.ts"; // later <h2 className={heading}>Blue Title (should be blue)</h2> ``` 這將在建置時完全處理——而不是執行時成本。 您可能會感興趣的另一種方法是使用 CSS 實用程序庫，例如 Tailwind。 ## CSS 實用程序，例如 Tailwind 這是一個獨立的類別，但我認為既然 Tailwind 是這個類別中的主要工具，我將只介紹 Tailwind。 Tailwind 的主導地位甚至達到了甚至有人問“你寫 CSS 還是 Tailwind？”之類的問題。這與 jQuery 在 DOM 操作領域的統治地位非常相似。 2010 年，人們問“這是 JavaScript 還是 jQuery？”。 無論如何，使用 CSS 實用程序庫的優點是根據使用情況生成樣式。這些樣式不會衝突，因為實用程序庫始終以相同的方式定義它們。因此，每個微前端將僅附帶實用程序庫中根據需要顯示微前端所需的部分。  如果使用 Tailwind 和 esbuild，我們還需要安裝以下軟體包： ``` npm i autoprefixer tailwindcss esbuild-style-plugin ``` esbuild的配置比之前複雜一點。 `esbuild-style-plugin` 本質上是 esbuild 的 PostCSS 插件；所以必須正確配置： ``` const postCssPlugin = require("esbuild-style-plugin"); module.exports = function (options) { const postCss = postCssPlugin({ postcss: { plugins: [require("tailwindcss"), require("autoprefixer")], }, }); options.plugins.splice(0, 1, postCss); return options; }; ``` 在這裡，我們刪除了默認的 CSS 處理插件 (SASS)，並將其替換為 PostCSS 插件 - 使用 PostCSS 的“autoprefixer”和“tailwindcss”擴展。 現在我們需要加入一個有效的 *tailwind.config.js* 文件： ``` module.exports = { content: ["./src/**/*.tsx"], theme: { extend: {}, }, plugins: [], }; ``` 這本質上是配置 Tailwind 的最低要求。它只是提到應該掃描 `tsx` 文件以了解 Tailwind 實用程序類的使用情況。然後找到的類將被放入 CSS 文件中。 因此，CSS 文件還需要知道生成/使用的聲明應包含在哪裡。至少我們只有以下 CSS： ``` @tailwind utilities; ``` 還有其他“@tailwind”指令。例如，Tailwind 帶有重置和基礎層。然而，在微前端中，我們通常不關心這些層。這屬於應用程式 shell 或編排應用程式的關注範圍 - 而不是域應用程式。 然後，CSS 將被替換為 Tailwind 中已指定的類： ``` <div className="bg-red-600 text-white flex flex-1 justify-center items-center">Hello from Red!</div> ``` ## 比較 迄今為止提出的幾乎每種方法都是微前端的可行競爭者。一般來說，這些溶液也可以混合。一個微前端可以採用影子 DOM 方法，而另一個微前端則對 Emotion 感到滿意。第三個圖書館可能會選擇使用香草精。 最後，唯一重要的是所選擇的解決方案是無碰撞的，並且不會帶來（巨大的）執行時成本。雖然某些方法比其他方法更有效，但它們都提供了所需的樣式隔離。 |方法|遷移工作|可讀性|穩健性|性能影響| | ----------- | -------------- | -------------- | ---------- | ------------------ | |大會 |中等|高|低|無 | | CSS 模塊 |低|高|中等|從無到低| |影子 DOM |低到中|高|高|低| | JS 中的 CSS |高|中到高|高|從無到高| |順風|高|中等|高|無 | 性能影響很大程度上取決於實施。例如，對於 CSS-in-JS，如果解析和組合在執行時完全完成，您可能會產生很大的影響。如果樣式已經預先解析但僅在執行時組合，則影響可能很小。如果使用像香草精這樣的解決方案，您基本上不會產生任何影響。 對於 Shadow DOM，主要的性能影響可能是 Shadow DOM 內部元素的投影或移動（本質上為零）以及“style”標籤的重新評估。然而，這是相當低的，甚至可能會產生一些性能優勢，給定的樣式總是切中要害，並且僅專用於要在影子 DOM 中顯示的某個元件。 在示例中，我們有以下捆綁包大小： |方法|索引 [kB] |頁碼 [kB] |表 [kB] |總體 [kB] |尺寸 [%] | | ----------------- | ---------- | --------- | ----------- | ------------ | ------ | |默認| 1.719 | 1.719 1.203 | 1.203 0.245 | 0.245 3.167 | 3.167 100% | |大會 | 1.761 | 1.761 1.241 | 1.241 0.269 | 0.269 3.271 | 3.271 103% | | CSS 模塊 | 2.149 | 2.149 2.394 | 2.394 0 | 4.543 | 4.543 143% | |影子 DOM | 10.044 | 10.044 1.264 | 1.264 0 | 11.308 | 11.308 357% | |情感| 1.670 | 1.670 1.632 | 1.632 25.785 | 25.785 29.087 | 29.087 918% | |樣式元件 | 1.618 | 1.618 1.612 | 1.612 63.073 | 63.073 66.303 | 66.303 2093% | |香草精 | 1.800 | 1.800 1.257 | 1.257 0.314 | 0.314 3.371 | 3.371 106% | |順風| 1.853 | 1.853 1.247 | 1.247 0.714 | 0.714 3.814 | 3.814 120% | 對這些數字持保留態度，因為在情感和样式元件的情況下，執行時可以（並且可能甚至應該）共享。另外，給定的示例微前端確實很小（所有 UI 片段的總體大小為 3kB）。對於更大的微前端，增長肯定不會像這裡描述的那麼問題。 Shadow DOM 解決方案的大小增加可以通過我們提供的簡單實用腳本來解釋，該腳本可以輕鬆地將現有的 React 渲染包裝到 Shadow DOM 中（無需生成新樹）。如果這樣的實用程序是集中共享的，那麼其大小將更接近其他更輕量級的解決方案。 ## 結論 在微前端解決方案中處理 CSS 並不困難 - 只需從一開始就以結構化和有序的方式完成，否則就會出現衝突和問題。一般來說，建議選擇 CSS 模塊、Tailwind 或可擴展的 CSS-in-JS 實現等解決方案。
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
