2023 WebConf Taiwan心得及摘錄 Day2

淺談 Vue.js 的狀態管理模式

關於Vue.js的狀態管理模式相關知識及演進

Vue.js 目前幾種傳遞資料的方法

1. props與events 一層一層傳遞(若太多層會不好管理)
2. Event Bus 不要學
3. provide-inject(必須在同一條元件樹上)

provide-inject官方文件

• 可以使用readonly 避免被修改

readonly官方文件

4. Vuex

• Vuex 比較囉唆，要修改state要經過action 及 mutation

5. Pinia

• Pinia v.s Vuex 少了mutation:可直接修改store狀態
• Vuex 的 store 無法直接使用 composable api
• 直接解構store 會破壞狀態的響應性
• 可以跟Vueuse結合（可以在store中use 一些hooks)
• A store 可以跟B store 溝通
• 要注意循環引用 （可以包成function 解決）
• 可對store進行測試

Composition API 優點

• mixin 可以被取代:不會不知道從哪裡來（在component export function 或 ref…然後在其他 component import）
• 可以透過封裝 useEventListener 共享監聽事件
• 可以進行二次封裝
• Vueuse：官方提供常用功能 lib

Vueuse官方文件

什麼時候該用什麼溝通方式很重要（props emit , provide inject vuex , pinia)

講者：Kuro Hsu

鳳‧極意？！

鳳也就是form，講了很多原生form的功能及資訊，才驚覺原來原生的form已經有這麼多功能了，還一直停留在原生form非常難用、功能簡陋的觀念，以後開發可以多一種選擇了，不一定要使用UI框架而被侷限住，可以嘗試使用原生form，甚至是透過原生form去改成符合需求的元件，而且目前支援度已經非常好（IE就算了吧）

• 透過原生資源完善自己的元件
• 很多都有基本的驗證
• 自帶 widgets，不需額外開發
• 原生支援
• 延續使用者體驗
• 輕鬆就可以讓元件看起來不錯
• 盡可能使用原生元件加速ＵＩＵＸ 呈現
• 透過Accent-color可以修改元件顏色
• 除了使用滑鼠操作，也要記得使用鍵盤操作測試
• Avoid misunderstanding(避免做一個長得像radio button的checkbox)
• 在不同瀏覽器widget 啟動方式會不太一樣

Input Attribute

1. Autocapitalize 自動首字大寫
2. Enterkeyhint 改變確認鍵 提醒文字
3. Inputmode 改變彈出鍵盤的輸入模式 ex: 數字…等

• Logical Properties: RTL / LTR 文字顯示方向
• 能用css完成的就不用js 讓分工明確，減少效能開銷

講者：Paul Li

講者使用原生開發的元件

為何技術老人這樣想那樣做？從技術前輩的視角理解技術決策

探討種種開發中會遇到的事，並提供自己經驗與見解，分享為什麼要這樣做，該怎麼做也許會比較好，讓自己逐漸成長

• Agile: 追求卓越、擁抱改變、變就是不變: 所有過程（review retro….)：讓不同的頻率儘量拉近
• 換位思考，進行說服 junior to senior to manager
• 要建立足夠信任，提案會更容易
• 在適當時間，試著當那位『沒有人』；試著找到『對的人』(受大家信任、說服力很高的人)，讓事情繼續往前，而不是讓自己把事情完成
• 因應AI生成，未來我們會更注重規劃，而不是產出程式碼
• 避免讓自己陷入放棄
• 隨手清理程式債，養成好習慣
• 程式會改，文件會改，課程（線上影音）不會改
• 套件或框架的文件通常有最佳解
• 透過lib source code 排除文件與程式差異 （GitHub issue)
• 習慣感受閱讀程式碼的快樂，只有接近程式碼才能更了解它
• 閱讀很重要從文件到程式碼

講者：Caesar Chi

藝術界線超進化-從創作到實踐，探索生成式藝術與前端互動技術的共舞

生成式藝術，用有理的東西產出無理得東西，透過程式當作創作媒介，讓我們看見程式不同的面向，原來可以程式也可以產出這麼美的東西；講者是程式開發者也是藝術家，分享了許多創作及展場經驗，並可以透過互動的方式生成不一樣的表演，是一場藝術饗宴。

講者：吳哲宇

10 年回顧：打造愛料理開發及營運團隊

講者分享在愛料理十年中的一些經驗、決策，並回顧怎樣做也許會比較好，內容非常生動有趣

• 市場造成趨勢，智慧型手機的發展，成就時機財
• AI對話使用率其實非常低

某天同事搜尋：「明天要做大腸鏡，可以吃什麼？」結果出現一堆大腸料理

不同階段的驗證方式

1. 不一定上線才能驗證，中間會有很多產出物
2. 產品願景溝通
3. 產品商業企劃文件
4. 技術規劃文件

• 敏捷開發不是比較快，是可以一直修正方向
• 換工具本身帶來的實質效益可能沒那麼高（聊天，文件，設計….工具 ex: slack notion figma）
• 人人參與討論：從0到1時效果不錯
• 產品迭代、最佳化，每個人的產品知識或能力會有落差
• 溝通本身就是工作，要將精力花在最有效益的地方（別把人力花在她不擅長的地方，否則只是浪費時間）

維持開發者體驗

1. CI/ CD 並搭配linter
2. 完整的git flow pull request
3. 透過在slack上，下指令上版
4. 各種監測工具、開發者工具（copilot)

沒監測的產品不算上線

有用的監測

1. 服務穩定的監測，各種Health 監測 HTTP 5xx 4xx
2. 前後端效能監測，分散式追蹤
3. 錯誤追蹤監測，錯誤及使用者反饋

• 最難過的不是產品死掉了，而是死掉很久了沒人通知你
• 無法預先規劃有用的商業監測：你（或市場）會一直調整你看事情的觀點

早早建立起產品分析的架構比較重要

1. 收集資料的方法(fluentd / snowplow)
2. 資料倉儲(BigQuery)
3. BI工具(Metabase / Looker Studio)
4. ELT架構(Airflow / dbt)

• 時時刻刻去思考，是在解決問題還是創造問題
• 過早的最佳化通常是失敗的來源
• 工程團隊的價值來自於產出商業成果

講者：Richard Lee

從 2013 到 2023: Web Security 十年之進化及趨勢!

講者分享十年間Web Security的變化及近年來常被用來攻擊的手法、案例

• 隨著網頁架構越來越複雜，會產生新的攻擊手法

hop-by-hop attack

• 如果指定 Connection: close, X-Important header，會讓 proxy server 在處理時把 X-Important 這個 header 處理掉
• 接下來可能會拿 REMOTE_ADDR 當作備案，但就會是 proxy 的 IP，就繞過 IP 白名單限制

Web cache deception

• 透過cache機制將模凌兩可的urlhttps://server/profile.css 產生cache
• 中間的 CDN 會把它當成 css，但伺服器正常回應並正確快取
• 誘導使用者開惡意連結，以 css 結尾，中間 CDN 就會把這個網址 cache 下來，（不需登入）用同樣的網址請求時，就可以拿到他的敏感資料

PHP 的 file_exists function

• 控制帶入 phar:// 的路徑就是一個打包的格式
• 可帶入作者資訊等等
• 透過 serialize()、unserialize()
• 就有機會觸發 remote code execution
• File Open 也都有機會觸發反序列化來執行 remote code execution

Prototype Pollution

• 透過javascript原型鏈的特性
• 設定 user_data.__proto__.DEBUG = true 就會影響到其他 object 的 DEBUG property 等於 true
• 透過修改 object prototype 增加 property 設定，來開啟 debug mode。
• 常發生在解析使用者 query string 或 JSON data 時，例如在 query string 帶 ?__proto__[isAdmin]=true

不一致性所造成的攻擊面

• 大部分 RFC 只定義規範，沒有定義實作方式，導致實作差異有漏洞

例子：http://example.com#@google.com/

• 在 RFC 標準是遇到 # 就要停止解析，所以 example.com 才是對的，但2018 年 Java, Python 等等會捉到 google.com就有機會達成 SSRF 或前端 OAuth domain 繞過

例子：json 解析

{"user":[], "user":["_admin"]}

• 2017 CouchDB 漏洞：前端用 JS 解析 JSON 覺得是 []，但後端 Erlang 解析出 ["_admin"]

前端安全

• Angular js 可透過 ng-init 來取得 javascript 的變數。能控制 class name 就能做到 XSS，完整控制對方電腦

講者：Orange Tsai

酷！玩！啥鬼CSS！

介紹一些比較新的css屬性，透過demo展示出要如何應用及這些新屬性的優點

• 邏輯屬性 (logical properties) MDN

/* 以前用 */
border-left
/* 邏輯屬性 （可以自動判斷LTR/RTL而改變書寫方向）*/
border-inline-start
/* 垂直方向書寫 */
witing-mode: vertical-lr; 
/* height 高度 */
block-size
/* width寬度 */
inline-size

/* flex */
/* 軸方向 */
justify-content: Flex-start
/* 書寫方向 */
justify-content: start

• 獨立的變形屬性 (individual transform properties) : 獨立屬性有先後套用順序，不是按照書寫順序
• 首字設定：替代 float (initial-letter) MDN
• 嵌套樣式 (Nesting)：讓 CSS 像寫SASS developer chrome
• 三角函數（Trigonometric functions）MDN
• 父層選取器 (:has)：以往只能用js寫的code可以單純使用css完成了 MDN
• 內容查詢 (Container queries)：可以根據容器大小進行RWD MDN
• 層級樣式(Cascade layers)：改變layer優先權 MDN

講者：Amos

Beyond Technology 技術之外 — 從個人身心安頓到人類福祉追求

講者人生歷程分享，對於遇到焦慮怎麼辦，如何對抗焦慮，安頓好身心後才能更容易往目標前進；怎樣設計會比較好？工程師做出符合需求的軟體，但對使用者來說體驗度是否良好…等分享

不要做自己，成為我們，成為我們的一部分。

成為群體的一部分

和比自己更大的東西做連結

人生轉變更多是為了逃避痛苦，不一定是追求快樂

過去感恩、現在安頓、未來設定目標，有目標才不會茫然

講者：蔡明哲

最後感謝webconf 讓我學到自己小圈圈以外不同的資訊以及知識，多虧共筆筆記，讓我可以好好回憶，希望未來自己也有機會能成為貢獻的人。