工作筆記︱ 致前端菜鳥：加速開發的10大好用套件和語法工具

繼上一篇文之後一直有想要好好維持至少一個月一更的頻率，但事與願違，工作太逼、同事太雷(?)、人生太難……，之後有機會的話也許也能發一篇轉職前端後之職場鬼故事文章！開始上工之後終於可以理解心有餘而力不足的感覺，明明不時地經過一番腦力激鬥和偶爾地信手拈來好不容易都想到了下一篇文章的題材，但總是以體力不支、睡眠時間不夠、當下沒有打文章的興致等等等而告終。於是在10月就想到了這篇要寫什麼的文，卻又拖到了現在才誕生！！(´・Å・`)

不得不說真正開始上工後跟自己在AC學習時所學到的又很不同！雖然在AC或是各種培訓班會教你不管是前端還是後端的基礎，但如何活用所學、善用工具又是另一回事了～現在仍然對當時在AC要結業前，一名助教給我的忠告銘記在心，他告訴我們他也是一位轉職前端（兼寫後端）的人，他給我們結業後出去找工作的建議是：先求有再求好，先找個地方上岸後好好待著練功，之後才有換更好待遇的本錢。

經歷過上岸的本人我想說的是：先找到工作上岸後會發現在工作中所學的會比當初在培訓班快速地多！而且更貼近現實！這次文章的題材便是我在工作後為了加速開發減少自己手刻的時間而常會用到的好用東西！ヽ(✿ﾟ▽ﾟ)ノ

以下開始認真分享～～ヾ(´︶`*)ﾉ♬

HTML模板語法 - PUG

對！我沒有想到當初入職讓我寫HTML時造成我閱讀上最大困難的PUG居然上榜了！可以把它想成是原HTML但少掉<>和</>的標籤，簡單來說會減少我們撰寫的行數，但很倚賴「縮排」來決定它的層級，一旦縮排有誤，出來的內容會大相逕庭。

範例如下：

<div class="content"> 
<p> 哈囉我是原生的HTML寫法 </p>
</div>

div.content
  p 哈囉我是HTML的PUG寫法

一開始入職時，實在覺得PUG的寫法閱讀上很有難度，所以都是先寫原生的HTML再用ChatGPT或是有個HTML to PUG的網站幫我將HTML轉成PUG，但寫到第三天時，我就能自己打出PUG語法了！我只能說壓力迫使人成長～ಥ_ಥ 心裡再委屈再不想接受，你也得接受！！

Tailwind CSS

這個一開始也是不會的！原以為在AC學了SCSS已經很夠用了~（誰跟你說的！( ´•̥̥̥ω•̥̥̥` )）結果上工後！當然SCSS還是管用也挺方便的，但壞處就是會增加你整個版面的行數！於是乎～在一邊撰寫html的同時一邊能把CSS語法寫進去是最好不過的了！Tailwind CSS就是這樣的好東西( • ̀ω•́ )

其實它的撰寫上我覺得並沒有太大的難度，起手式就是去好好看官方文件，因為我也是邊看邊寫出來的，就是到以下頁面然後在左側搜尋欄位打上自己想要設定的CSS搜尋就會有對應的Tailwind寫法給你囉！基本上到現在我依然是一邊開著網頁查找官方文件一邊寫Tailwind CSS，至於有些基本的你寫多了自然會腦中的神奇記憶法就會讓你自然而然地寫出來。

https://tailwindcss.com/docs/border-radius

Element Plus

之前在AC時總是使用BootStrap來快速組成前端畫面所需的元件，但上工後卻被告知因為BootStrap不好做客製化和修改，因此這才知道了Element Plus的存在呀！！首先，一般畫面上所需要的彈窗、Alert、Notification、Tooltip和行事曆組件等等你能想到的應有盡有～讓你省去手刻和撰寫JS邏輯的時間，再來！它能做到微幅的客製化！在每個組件的頁面下方都會告訴你可以透過加上哪些名稱而達成哪些想要的效果～

https://element-plus.org/zh-CN/component/tooltip.html#attributes

Element Plus基本上已經成為前端快速構建畫面時所需的好用工具囉！雖然有些修改樣式不是挺容易的，但有些坑還是要等到自己踩到時才知道怎麼解決～(๑•̀ㅂ•́)و✧

flatpickr

由於上工後被派發的第一份工作是當搬運工，將公司內部的舊網站部分頁面搬至新網站，剛好需要搬的網頁最常出現的元件就是行事曆（小月曆）！於是乎主管直接推了個他已親身試過的好用套件 - flatpickr！

基本上它很單純，因為它只做一件事！就是做好行事曆（小月曆）！(‘ v`)雖然它涉獵的領域不多，但它有把專長展現出來就可以了！基本上它的客製化程度算蠻高的，任何想的到的需求80%都能在它的官方文件中找到解答知道要怎麼改。（剩下20%怪你沒認真看再回去認真瞧瞧～）

https://flatpickr.js.org/examples/

基本的只有年月日的月曆、帶有時間（幾時幾分）、修改預設日期（時間）、哪幾天為禁用的、或是連選日期等等等，它都能幫你做到！(•‾⌣‾•)

moment.js

我只能說，如果有關時間、日期的格式統一或是換算，用它絕對準沒錯！好用到爆～～～給它5顆星我都覺得不夠！因為它幫我解決了95%跟時間日期相關的問題。首先moment.js的官方文件非常的長，會建議翻譯成中文直接觀看，基本上一開始會覺得不怎麼好用是因為不知道該怎麼使用它！因為有些想要的運算或是效果你不知道該怎麼起關鍵字搜尋，這時候搭配ChatGPT使用你就會知道什麼是天作之合( ͡° ͜ʖ ͡°)

因為一開始不知道要怎算兩個日期之間相差幾個月幾天之類的問題時，都只能用很笨的JS邏輯在運算，後來同事推薦了moment.js這個好用的玩意兒，可惜我當時年少還不懂該怎麼使用它，於是將其丟棄一旁 (愛演?) 後來在跟ChatGPT閒聊時意外發現其實AI比我更懂moment.js，於是乎他們倆相輔相成讓我可以輕鬆解決各種時間格式相關問題，更甚者連計算時間日期都能輕輕鬆鬆！

https://momentjs.com/docs/

不知道該用moment.js的哪個關鍵字能達到自己的目的時，就跟AI說：我想辦到什麼樣的事，用moment.js能如何辦到等等之類的，這時候你就會學到新語法啦！

chart.js

如果是要在畫面上快速產出條形圖、折線圖、面積圖、圓餅圖、氣泡圖、雷達圖、極坐標圖和散點圖等，請搬出chart.js就對了！但它的使用方法相較於以上我覺得比較複雜一點，但回歸老話一句，請好好閱讀官方文件！因為絕對會讓你從中找到解答～如果想要使用好一項工具，那最基本的一定要先知道該怎麼使用它才能駕馭好它！

它某些地方當然還是有些坑，需要花時間去研究如何搞好，但因為這個我的使用頻率不到很高，因此大部分都是照原本官方預設的樣式走～如果遇到突然圖表出不來的時候，要先搞清楚它的生命週期和圖表被destroy的時間點。其餘不懂的ChatGPT上應該都能得到解答！

https://www.chartjs.org/docs/latest/charts/bar.html

SweetAlert2

如果你想要一個好看不單調不死板的彈跳視窗，那SweetAlert2會是讓你覺得可愛又有互動感的套件！它的使用方法基本上沒有難度，還能客製化的自己修改一點樣式和顯示的東西～

對於前端畫面才會有些需要登入、驗證或是等待API回傳資料時的Loading畫面，都很適合拿來使用讓使用者知道當前狀態。( ﾟ∀ﾟ) ﾉ♡

https://sweetalert2.github.io/

zod

zod也是經由同事才知道的套件，是用來做表單驗證相關的。因為大部分的填寫身分資料或是修改資料送出表單前，還是會做最最基本的欄位格式驗證等，不可能讓你在電話欄位中輸入成英文，或是Email欄位中輸入根本不帶有@的電子信箱等等～這時候zod就派上用場啦！

https://zod.dev/?id=basic-usage

雖然它的官方文件讓人看了想睡，但實際用過是覺得還算方便好懂！也能客製化自己想要顯示的錯誤提示訊息，也省去自己還要花大把時間寫驗證邏輯～～(°ﾛ°٥)

ckEditor

雖然在同事評價中它的分數不是太高，但的確也是個能快速解決前端畫面上需要文字編輯器問題的好東西！目前只有用到一次，因為畫面所需需要有可以編輯文字的字體大小和粗體斜體等需求，因此才得知了ckEditor這個套件！它還是能小幅度的修改拿掉自己不需要的東西，

ChatGPT

不知不覺來到了最後第10項，原本想要分享一下關於pusher.js相關的內容，因為關於前端的中文分享和講解甚少。但我突然想到！其實自從轉職後我最常使用到的工具就是ChatGPT了！！基本上每天跟他聊天的頻率比跟我媽聊天還高～～一開始還心高氣傲地覺得身為工程師怎麼能這麼倚賴AI來幫自己完成工作呢！

但事實證明我錯了～與其說是倚賴，倒不如說它是幫助自己加速開發、釐清盲點和找出問題的好東西！∑(✘Д✘๑ ) 就算我們人腦開發再極限，都比不過電腦它的處理速度和讀的萬卷書吧！雖然看似它幫我們做了很多事，好像身為工程師的我們很廢QQ 但其實很多時候它丟出的資訊是不一定正確的，最後的判斷和去蕪存菁還是要留給我們自行解決！但不得不說它還是教會了我很多新知識，讓我開發上學到了很多新寫法(´з｀)

總結

沒想到花了至少2小時終於把這篇文打完，很感動呀(｡í _ ì｡) 畢竟自己已經構思了很久要分享什麼，但卻一直沒行動力完成！平常一日三餐都與程式碼為伍，但其實還是很懷念文字的懷抱，比起寫程式我還是覺得打文字更行雲流水～～

紀念一下自己上工後常用到的好用工具，也記錄一下這段時間學習使用的心得，未來還是會學到更多，這就是身為前端工程師永無止盡的學習之路吧！(;´༎ຶД༎ຶ`)