文科少女學程式

今年很幸運地拿到了一張免費的Modern Web Conference門票 ，所以就請了個假去參加了，以往只參加過假日舉辦的技術研討會，這次是第一次參加在平日舉辦的研討會。也因為以前參加過的經驗，知道不太聰明的自己一定不會馬上就融會貫通，或是馬上學會什麼新東西，所以主要是抱著去聽聽有什麼新知的心態去參加。雖然是以這樣的心態去參加，這次還是想要稍微記錄一下參與的過程中聽到了什麼。主要會分為三個部分，分別是「聽到什麼關鍵字？」、「看到了什麼自己有接觸但還有獲得新知的技術知識？」，以及「在工作坊學到了什麼？」。

聽到了什麼關鍵字？
在這一個部分，會稍微記錄一下自己聽到的一些關鍵字，這些關鍵字有些可能沒辦法聽一場分享就可能馬上知道詳細內容的關鍵字，所以在這個部分主要是把相關的一些資料連結整理到這裡。
- Faas, Caas
這是在一場全英分享的關鍵字，因為講者是說英文加上不是自己了解的領域，其實就只知道是和雲端有關的內容，然後聽一些關鍵字，沒辦法完全理解內容。
https://zhuanlan.zhihu.com/p/422940645

- Open AI 1106舉行的開發者大會(客製化的ChatGPT, GPT Store)
其中 GPT Store的部分感覺很有趣，如果真的風行起來，應該會出現一波的另類多創作者(?)，也會成為另一種可以賺錢的管道。
https://zhuanlan.zhihu.com/p/666474041

- LangChain的Agent
我的理解是在下prompt後，會去決定要用什麼樣的工具去執行對應操作的角色。
https://python.langchain.com/docs/modules/agents/

- Google Apps Script
可以在使用google提供的表單或是文件時，透過撰寫一些腳本來執行一些自動化的動作，這個是之前沒有個過的東西，感覺可以在需要的時後，透過這個來增加工作效率。
https://www.google.com/script/start/

- React Native 的 expo ＆ CLI
自己目前還沒有碰過React Native，但是大概知道有expo和CLI的差異，這部分也是我日後預計會花一點時間去暸解的部分。
比較簡單理解的話，自己覺得可以理解成expo是比較好上手的React Native工具，沒有特殊需求的話，使用expo會環境建置上會更快速、方便；CLI則需要自己建制開發環境，但也因為這樣，開發上的靈活性較高。
https://medium.com/@softworthsolutionspvtltd/expo-vs-react-native-cli-7e47c7630039

看到了什麼自己有接觸但還有獲得新知的技術知識？
- 一些vue3相關比較不常會被使用到的用法
可能因為以前自己碰Vue碰得比較多，加上這場分享是偏向實作面的內容，所以有聽到很多有用的小技巧，這裡也列出幾個自己原本不知道的部分。
1. v-model & true-value , false-value把checkbox當作單選的radio使用
如果今天需求中，會需要實作出可以單選，又可以什麼都不選的選項時，就可以使用這個寫法。

2. vite config 修改使用的語法
通常寫vue的時候，帶入變數都會是兩個大括號(花括號)，如果想要改變這樣的語法，就可以透過vite.config調整，例如調整成變成單個大括號。

3. v-bind的動態綁定
通常我們在使用v-bind的時候，都是用一個固定的名稱，如果有需要也可以透過[]的寫法，讓這邊的值變成動態。


4. render function & h()
這部分可以用於在一些情境中，需要渲染出一個Vue元件時，以前經手過的專案中，曾經有看過這個用法，不過通常一般的基本寫法，就可以滿足所有需求了，但還是可以稍微了解一下這樣的寫法。

也可以加一些屬性或事件

還可以透過mergeProps組合多個屬性，再放入render funciton。

slot的寫法則會變成下面這樣

但是！！render function 無法使用Vue好用的指令，例如v-if、v-for那些。
所以需要用v-if時，只能以三元之類的方式寫，這部分類似React的寫法，也就是以原生JavaScript的方式下去實作。

需要用v-for時，使用map，一樣類似React。

需要用v-model時，自己綁定modelValue和onUpdate:modelValue 綁定modelValue和input事件。

使用customDirective時，使用withdirective包住。

5. 綁定動態CSS樣式
一般我們想要動態綁定樣式，會是透過綁定class來決定要顯示什麼顏色，但也可以透過在style區塊中使用v-bind的方式綁定。

最後還提到Vapor Mode這個新的編譯模式，據說是一種效能較好的編譯方法，大家可以期待一下。

- vite
一直都誤以為vite就等於webpack的角色，直到聽了分享後，才知道原來vite本身並不是打包工具，它只是個dev server，而它所擁有的打包功能，則是運用了rollup下去進行，並不是自己本上就帶有打包的功能。接下來，我也想再花一點時間去好好認識一下vite。雖然因為之前都是寫vue，也已經體驗過vite有多香，但是卻沒有好好認識vite是什麼，為了增加自己對於vite的認識，並將vite推廣到team裡使用，會另外再寫一篇相關的筆記(挖坑給自己跳？)。

工作坊學到了什麼？
- prompt 技巧
在這個工作坊中最令人印象深刻的是下prompt的小技巧，自己在使用ChatGPT的時候，雖然會記得要盡可能地把想要詢問的內容撰寫清楚一點，或是盡可能地提供相關資料，但是在這場工作坊學到的技巧是自己過往沒嘗試過的prompt撰寫方式，也就是透過markdown的格式去提問，並在提問內容中條列自己的提問。這個在我最近的工作中很有感，其中一個經驗是我一開始就只是很隨便地丟了一些程式碼上去問ChatGPT為什麼會遇到這個問題，該怎麼修改，但是都沒有得到比較合適的答案。最後改用markdown形式來問問題，就得到比較精準的答覆。當然在這場工作坊中，講師也有提到很多時候還是要自己有足夠的知識點，才可以有辦法近一不去拆解ChatGPT的答覆或是判斷它的答覆是否正確。

自己在工作中，也把講師分享的問法實際使用，也真的有獲得更好的答覆。

- Docker
身為前端的我，平常其實很少有機會碰到Docker，不過因為前一份工作會需要碰到一些部署相關的流程，就有碰了一些Docker，也覺得Docker其實還滿好玩的，所以這次有工作坊，也就報名去參加一下。這次工作坊的部分內容是自己本來就知道的東西，但是因為自己並不是很擅長下指令，所以覺得比較有收穫的是一些關於docker的常見指令。
例如以下這些指令：
docker container ls
docker container ls -a
docker image ls
docker image rm {image name / image id}

另外，還有做了一些實作，雖然時間不算充足，但還是有練習到一些實作內容。
最後還被抽到了講者的書，覺得又驚又喜XD
我一定會找時間好好讀的！


小總結
這次的議程還算有自己想要聽的內容，但是整體來說，感覺吸收到的新知，或期望聽到的東西還是比我預期來得少。但在上班時間之餘，有個合理的理由，讓自己請假出來放個風兼學習也是一件不錯的事情。其實本來主管還有稍微提一下要不要來分享一下聽到什麼，但是真的沒什麼我聽完可以很高興跟大家分享的東西，如果硬要說的話，應該只有Vue吧！但是大家都寫React，分享Vue大家應該也只是聽聽XD 不過自己預計會等好好研究Vite後，把vite分享到公司team內，也算是有帶一點東西回到部門吧！雖然我是用自己的假和自己的票去參加(身邊很多朋友都是公司出錢加請公假來參加)！哈～