ChatGPT 問世至今快半年了。
一開始非常興趣缺缺,即使知道他神通廣大,越早認識越好、即使把 “去使用 ChatGPT “ 放在代辦事項,依舊拖了好幾週都沒有動靜。
在某次工程師朋友聊天後,忽然被燒到,於是登入註冊、隔天上班開始試著跟他對話,然後陷入情網?
我大約是在 2 月中開始使用,從一開始諮詢職涯跟技術方向、到後來的工作家教、或是任何原本會問 google 的問題,現在都會先想到 ChatGPT 。
三個月相處下來, ChatGPT 的定位,用 “ 貼身家教 ”來形容最貼切。
這篇文章,我會分享 身為一個沒有資訊底,從零轉職前端工程師的中年人 ,如何把 ChatGPT 當貼身家教,解決大多數的基本程式問題。
如果你符合以下條件,這篇文章可能會給你些幫助或靈感
- 用關鍵字找答案的能力篇薄弱,提問時總無法下精準的關鍵字
- 自己在用的程式語言,有許多語法沒用過或不太熟悉的情況
- 經常有種 “真想有個不會鄙視我低能問題家教” 的想法
- 臉皮很薄、沒朋友的新人 (?)
如果你的關鍵字能力極好、Stack Overflow 已經在我的最愛、查閱各種英文的官方文件就跟在看童話書一樣簡單的話,看到太低能的問題會生氣的話,出口在左邊 XD
ChatGPT 超好用的時候
需求超明確時
某程式語言的某語法要如何使用
寫程式經常遇到那種你知道他存在,但想不起來正確寫法、或是不確定怎麼寫的情境
問隔壁怕被當作低能兒,問 google 不一定能找到正解,這種時候口語化的描述需求,通常能在 5 行內獲得可以直接複製貼上的答案
我曾經問過像是
- css 區塊的兩邊下方圓角怎麼寫?
- css 背景色上下漸層怎麼寫?
- css hover 時放大的效果怎麼寫?
- 讓文字靠下對齊,但 vertical-align:baseline 失效,還有什麼方法?
- 寫在父元件的 css 為什麼子元件沒吃到?
css 老師我對不起你,但我真的很少寫這些東西 T-T
問資深前輩只能得到模稜兩可的答案時
如果時間很多,想了解細節,很多資訊找前輩大神們的部落格細細品味是很不錯的選擇
但有時候只想先知道個大概,或明確的利弊分析,貼身家教就是很棒的選擇了,我問過像是
- Vue, React, Angular 的優勢分別是甚麼?
- 前端想轉全端,應該先學 node.js 還是 python
每個人的背景經歷都不一樣,上述的類似問題也可以問很多人來蒐集到不同訊息,但想想每次選舉後都會發現同溫層的厚度, 若問題明確,ChatGPT 或許有機會從更符合自身需求的角度做分析給答案
想複習某個特定觀念時
找官方文件或關鍵字查到的部落格,通常會從很久很久以前…說起,問資深前輩時,又常遇到想 ”關心” 你怎麼連這個基本觀念都不清楚、或是貼心送上一篇你剛剛看過的部落格文章
沒耐性慢慢爬文時,貼身家教 ChatGPT 也會是超級好朋友,我問過像是
- vue 的父子元件,同時有呼叫 api 的話,生命週期順序會是如何進行?
- 貼一段 React 的語法,請 ChatGPT 說明背後的邏輯跟應用場景
希望有人幫你 code review 或校稿時
不是每個菜鳥都有幸擁有 “資深前輩” ,我第一份前端工作的第 2 個月,在什麼都還不會的情況下,就成為全公司最資深前端,當時遇到問題真的是超級無助,只能祈禱下的關鍵字剛好賽到正確答案,更瞎的是很多時候正確答案已經在我眼前了我卻不知道
對於新手工程師,這些都是我很常做的事
- 貼上一段自己的垃圾 code。 “請優化這段程式碼”
- 貼上一段看不懂的前人 code。 “請說明這段程式碼在做甚麼”
- 貼上一段 api 回傳值、以及我最終想要的資料內容及格式,問他如何實做
- 所有的錯誤訊息都可以直接貼給 ChatGPT ,我自己貼過包含瀏覽器工具人 F12 的沒看過紅字,或是在 terminal 安裝、執行各種指令時的 Error,就算 ChatGPT 無法直接解,從他的回覆,還是可以獲得一些蛛絲馬跡( 傳說中珍貴的關鍵字 )
- 貼上一段文章內容。“請提供 5 個合適的標題 / 標語,25個字以內 ”
ChatGPT 讓人無言以對的時候
只給了一半的答案
很多時候,ChatGPT 給的最佳解,是符合大多數人的需求,並不符合你現在的實際需求
有些功能網路上的中文資源沒有想像中的多,而且貪心又懶惰的複製貼上工程師,就想要可以直接貼過來小改的程式碼,而不是拿給原生 HTML + JavaScript,還要自己改成 Vue
在開發無障礙網頁的時後,要做導盲磚的功能,雖然當時跟 ChatGPT 來回了 20 段對話,千里跋涉終於產出完全符合需求的程式碼,如果是自己在 google 找,花的時間可能變成 4 倍,感恩惜福
補充導盲磚是什麼:對於 ”聽網頁“ 的使用者,導盲磚會是進到網頁後第一個聽到的資訊,約莫是 “U會回到主選單、C會跳到主要內容、L到次要選到、F到 Footer ” 這樣
當時的需求,導盲磚只會在同一頁裡面跳轉、不會有換頁的情境
同時,使用者會用鍵盤直接跳到他要的地方,也不是用滑鼠慢慢滾
最後,希望導盲磚可以拉出來變成共用元件
貼身家教 ChatGPT 在過程中提供了以下可愛的的小狀況
先提供了頁面跳轉的實作方法 (一看就不是我要的)
假設並去偵測滑鼠滾動網頁 (一看也不是我要的)
註冊事件卻沒正確銷毀 (瀏覽器噴錯)
當 ChatGPT 提供的答案不是你要的時候
那不叫做失敗,我只是發現哪些方法做不出電燈來 ~愛迪生~
約莫是自己提問的方式,讓 ChatGPT 不明不白,所以給了方向錯誤的答案
這種情境最簡單,在發現的第一時間,直接中斷他,重新提問(還不用擔心他會氣你沒禮貌)
附上我打斷 ChatGPT ,重新提問的瞬間
ChatGPT 鬼打牆的時候
也是在無障礙網頁開發遇到障礙的時候,把原本的程式碼貼給 ChatGPT,並提出需求, ChatGPT 來來回回應對了 3 次,提供的解答都是我一開始貼的程式碼。最後才說 ” 我一開始的程式碼看起來沒問題,要我去檢查瀏覽器 ” ???!
當你的問題太少見的時候
ChatGPT 其實就在茫茫網路海中幫你篩選出他認為的最佳解
但要是你的問題從沒人問過或討論過。那也很容易得到答非所問的無效解答
就是剛才那個無障礙網頁的栗子,當時網頁是用前端好朋友 element ui 這個元件庫開發。他的 table 表格跟 from 表單,本來包的層級就不符合無障礙的需求,所提供的自定義屬性或事件,也都無法寫到符合規範 ( 像是無障礙的 <label> 跟 <input> 必須當鄰居,但 element ui 提供的<label> 跟 <input> 是祖孫三代層級,還無法調整 = = )
在跟 ChatGPT 對話的過程,他只能不斷提供符合無障礙規範的寫法 ( 但放到 element ui 的原件上網頁會直接死給你看 )、或是提供 element ui 的官方用法 ( element ui 官方文檔已經在我的最愛了請問是在哈囉?! )
但這部分其實在 google 搜不太到相關內容時,就不該對貼身家教抱持著過高的期待
p.s 後來 table 只能捨棄 element ui,自己寫香草版的
google 搜尋比 ChatGPT 好用的時候
你知道某篇部落格有答案、或是你要的是一句明確的語法時
在 google 上打模糊的關鍵字,很容易找到當時那篇文章,通常會出現在前三篇,但如果一樣模糊的去問 ChatGPT ,他會很大方的從從前從前說起,等他提到那句語法的時間,都可以從 google 找到的答案,複製貼上、然後跑出結果了。
自己的經驗是使用前端好朋友 nvm 的情境。
在短短一年內,我在三台電腦上安裝過 nvm, 跟切換不同版本的 node,甚至有過一天內切換 2~3 個版本的 node 來開發不同專案。
他如何管理 node 版本、切換的語法也都有模糊的印象。
nvm 對我來說類似最熟悉的陌生人,但許久未用的某一次,忽然要在新電腦上切換 node 版本,我知道要先確認這台電腦有沒有安裝 nvm、沒有就安裝,有就確認目前這台電腦有哪些 node 版本,有的話就切換版本、沒有一樣就安裝。
整個過程最多只需要 5 句指令。
在跟 ChatGPT 對話的同時,沒耐性的一起在 google 搜尋 “nvm node”,前 5 篇就跳出我需要的所有資訊,與此同時, ChatGPT 還在天橋下說書。
但這樣的前提是,在 ChatGPT 還沒問世時, google 搜尋 “nvm node” 的前 10 篇文章可能都被我看過三四五六次了,所以會第一時間知道哪一篇有我要的答案,如果是第一次搜尋,加上看文章的時間,或許 ChatGPT 的一篇說書中就會提供解答了
所以我其實很常問了困難問題後,先去倒個水、聊個天、上個廁所、再回來收割答案
結語
很多時候 ChatGPT 不見得能給出正解,即使是這樣,通常都還是能從他提供的資訊中找到蛛絲馬跡,繼續問下去,或是用正確的關鍵字問 google
如果問了很偏的蠢問題,從 ChatGPT 給的回覆,通常可以慢慢導回正確的方向;而且,臉皮跟春捲皮一樣薄的新人,很多時候其實是蠢問題說不出口
工作上,雖然跟他對話也有很多翻白眼的時候,但至少不用擔心他會玻璃心碎或跑去跟主管告狀
三個月的使用心得,算是非常滿意,除了工作上的技術問題,生活的雜七雜八疑難雜症懶得看太多文章,我也會直接丟給 ChatGPT
唯一要留意的是提醒自己,
不要因為方便,失去判斷及獨立思考能力
如果喜歡我的文章,可以拍拍手讓我知道,更歡迎你追蹤並持續關注更多的分享。
想轉職工程師、對養成班有興趣、或對前端工程師有興趣的朋友們也歡迎聊聊
網頁開發世界不孤單,我們下篇文章見!