第一次參加conf這類活動，學到了非常多的東西，不只是技術面還有更多是在軟實力的提升上，是非常值得參加的活動，希望未來每年都可以舉辦。（上一次是2013有點可惜）
以下會是針對我有參與的議程做一些心得及內容的摘錄。
更多內容請參考這次議程的共筆筆記
活用 GitHub Copilot 開發 Web 應用程式
主要是講解及demo關於github copilot的功能與資訊。
- 第一代為透過註解可以協助產生想要的code
- 第 2 代copilot chat 可以像chatGPT一樣透過發問來獲得code
- 良好的命名（function、class）可以增加產出的準確率
- 使用前可先跟AI告知翻譯使用正體中文，才會回答符合我們常用的語言邏輯
- 要使用分析的code需要在編譯器中打開
- 若是新手，還看不懂 code 建議不要使用，因為產生不一定正確，目前還需要會判斷
AI 驅動下的開發者體驗
講者提供一些反思問題，讓大家思考不同層面的問題，像是：
如果大家都熟悉copilot的話？那會怎麼樣
如果我只是一兩年經驗，就開始使用copilot 那會怎麼樣
那我所學到的會不會都是如何下註解， 而不是如何寫code
並透過延伸AI這個議題探討其他問題
- 使用ＡＩ開發者體驗也許並沒有變好，一直產生錯誤的code，造成你要去更正他，造成思緒中斷
- 常常還是可能會產生錯誤的資訊
- 回饋的重要性 可以改善使用者體驗
- 專案開始之初 首重要看見全貌
- 有時候需要往後退才能看見全貌
- 透過問題更容易看見全貌
- 透過Google 搜尋問題時有大量的資訊，我們必須自己分析找尋答案這是在學習；透過chpgpt 會直接給我們答案，少掉了很多學習過程
- 知識有用的地方在於改變行為
- 使用ＡＩ產生的內容應該了解他應用他
- 將資訊放在大道上 （將來會行進的路上）
- 吸收沒有使用的知識是在囤積知識
- 簡單原則：我先做哪件事之後 其他事就會變得比較容易 或者不必去做
- 正向偏差：所有事情會找到自己的出入
- 不要自己製造複雜性，讓一切更簡單讓自己隨時可以了解
- 面對ＡＩ我們應該以學習為中心，而不是獲取知識為中心
- 追求卓越
- 嬰兒透過模仿成人來學習、藝術家透過模仿大師來學習、程式開發者透過複製貼上來學習
- 達克效應：懂得越少的人越容易對自己有信心
- 必須經常做水平思考，可以獲得更多
- 要獲得必須持續改善
- 對已知的未知：寫自動測試
- 透過批判思維，批判自己使自己成長
講者推薦的書：打造第二大腦（書）
講者：Ruddy Lee
WebComponent 的好，用過的都知道
主要是簡單的帶大家認識WebComponent，並提供一些實際應用層面案例
- Web assembly在未來應該會是非常火紅的技術
- 限縮js作用域是重要的行為，元件化目的在於限縮js作用域、減少耦合性（好找、好改）
- 估時程不只是開發時程，也應該要加入看old code時程
define 命名至少要兩個單字
customElements.define("word-count", WordCount, { extends: "p" });Shadow dom
讓css 有作用域，但也吃不到外層的css，可以透過mode調整：
let shadow = elementRef.attachShadow({ mode: "open" });
let shadow = elementRef.attachShadow({ mode: "closed" });Slot 只支援 Shadow dom
<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>Petite-vue(可以使用vue語法開發web component)
- 不是virtual dom base（也就是原本dom元素的事件不會消失）
- 檔案小、語法好閱讀、可以配合原有serve side專案，直接在原本專案中使用
講者：奶綠茶
成為前端建築師吧！透過 Frontend Infra 為前端應用打造穩健且高效率的開發體驗
隨著前端越來越複雜Frontend Infra（Frontend Infrastructure）也越來越重要，甚至有些公司會將Infra獨立出一個團隊，而此議程提供了有哪些Infra工具及相關經驗分享
- Frontend Infra： 維護開發測試等工具及流程(效能優化、CI/CD…等，增加開發效率、產品質量
- 大型組織非常需要，但小型組織也可以導入，可以多使用現有服務，減少資金消耗
DRY (Don’t Repeat Yourself)原則
- Generator(template、rule config、框架…)：可以更快速的建立專案環境
- Sharing code(npm、util functions…)
- design system
- Unified CI/CD infra(統一管理 pipeline）
- Monitoring (Sentry、Google Analytics、Google Search…): 提供指標、專案的可用程度
- Frontend Infra優點：提供程式碼一致，但需要多餘的維護資金等
Frontend Infra相關工具：
- Lighthouse CI 降低低效能程式碼
- SonarQube 降低品質不好程式碼及程式碼安全檢測
- DevSecOps 軟體開發生命週期中先導入資安檢測
- Renovate for dependency Management 自動化更新套件，自動發PR 管理套件更簡單
- Preview URL 每次發PR自動化部屬版本產生改動差異
CI/CD Pipeline 優化流程效率(快速迭代、品質保證、降低風險、自動化…)
- 重要資料儲存共享 Artifacts(結果的儲存與共享)(一個 Repo 只能存 2 GB，不管有沒有被使用，在 90 天後都會自動清除。)
- Cache(加速 workflow) node_modules GitHub Action Cache （不能使用不同分支Cache、一個 Repo 的 size limit 是 10 GB，如果 7 天都沒有被 hit 到的 Cache 就會被清除。）
- Bundle size diffing: CI 中加入 bundle size diff 的流程並顯示在 PR comments 上，可以看到 PR 前後 bundle size 的變動。
- Dev Process Optimization：根據PR title 自動化上label (feat bug …等，自動加上label)
- Observability(New Relic、Sentry…等)：記錄監控錯誤log，追蹤行為、頁面載入時間、錯誤率…等
- 理解需求不要過度導入
講者：莫力全 Kyle Mo
如何在有限資源下實現十年的後端服務演進
講者主要是分享在Funliday 十年的心路歷程，中間遇到了哪些問題及解決方案，包括一些技術的轉換及補坑過程
- Nosql 資料怎樣顯示就怎麼存
- 沒get 就沒http cache
- Blur hash 縮圖功能
講者：kewang
跳脫技術職與管理職的二分選擇，技術管理職讓職涯無限寬廣
分享一些管理職或技術職的思考面；常常管理職不單單只會需要懂管理，而技術職也許也要懂一些商業，為什麼會考慮管理職、為什麼排斥管理職，架構師偏向技術還是偏商業？項目到商業…等各方面的探討及經驗分享
- 技術的價值在於創造價值
- 用些手法讓問變輕鬆
營運 on call 時，無法處理的問題，可先溝通，不要讓值班人員特地叫工程師起來，有時他也沒辦法當下解決，造成白天工作晚上休息被打擾。或者有時也許只要重啟機器就可以了。
- 透過婉轉的方式提醒構通
- 技術必須被有效管理才能有效創造價值
- 拒絕參與政治的結果就是被糟糕的人統治
- 把自己放到離價值近的地方
- 帶人要趁早（帶junior、規劃架構、協同開發、承接任務、排定計畫、帶領團隊完成目標、達成目標）
- 精進自己的管理能力，追求更快更好更有價值，短期學期平衡，長期則要兼顧而非總是妥協，總是要求合理
講者：游舒帆Gipi
那些理所當然，卻像空氣般重要的小事：談開發流程、程式架構與職涯發展
講者分享許多開發過程中的經驗，及如何使用工具及自動化…等方式讓瑣碎容易犯錯的事變成更簡單、單純；最後是講些關於職涯發展的內容。
- 文字規範是第一步同時也是最不得已的一步：單純使用文件還是會碰到問題，最後還是要詢問
- 處理瑣碎的流程：變成自動化（如：github action)
怎樣處理讓你想罵人的事情
- Formatter linter / husky
- PR title checker
- 透過script or Hooks 讓大家不會忘記
- 很多東西當他變成習慣，你就忘記了他是個麻煩
Modularization(Soc) vs. Colocation
Modularization (SoC)
|
|-- components
| |-- Header.js
| |-- Footer.js
| `-- Button.js
|
|-- styles
| |-- Header.css
| |-- Footer.css
| `-- Button.css
|
|-- tests
| |-- Header.test.js
| |-- Footer.test.js
| `-- Button.test.js
|
`-- assets
|-- Header.png
|-- Footer.png
`-- Button.png
Colocation
|
|-- components
| |-- Header
| | |-- index.js
| | |-- style.css
| | |-- test.js
| | `-- asset.png
| |
| |-- Footer
| | |-- index.js
| | |-- style.css
| | |-- test.js
| | `-- asset.png
| |
| `-- Button
|-- index.js
|-- style.css
|-- test.js
`-- asset.png- 什麼是好的、可以維護的程式碼？ 維護程式碼的是人、是團隊，要如何做取決於團隊的習慣和開發經驗
- 不要侷限自己的角色 （前端、後端工程師）
- 你可以不用是做的人但要能說得出來你要的是什麼
- Work smart not work hard
講者：PJ (陳柏融)
從專業到商業：十年軟體架構變遷
軟體架構的變遷及規範都在改變，像是故障被設計為需要異常處理，到視故障為正常狀態，而為故障發生設計隔離，硬體都會故障，軟體當然也會有故障的可能；而微服務的出現也帶來許多改變；整理內容比較深
- 每個東西都在變化
- 發現所做事情的價值
- DevOps:交集我多一點，溝通多一點，打破壁壘，持續整合
- 選擇重要還是努力重要? 選擇：提高上限；努力：提高下限
- 微前端一個頁面由許多團隊完成
- 後端概念影響前端概念 (MVC Pattern)
- 架構：專業與商業上的平衡
- 設計系統的架構應以組織架構設計
- 如果不能影響組織的設計技術和系統設計幾乎是徒勞的
- 沒有完美的架構只有最適的架構
- 架構及演化預想但不過早最佳化
- 好的系統是由邊界而不是由中心形成
講者：曾義峰(Ant)
