- Respect MOPCON 全體志工、參與企業、會眾，讓交流的能量滋潤南部這塊資訊沙漠
- 官網議程介紹
以下是我有聽的議程
Day1
1) 越沒時間，越要寫單元測試 — 單元測試如何助我每天準時下班（以 Java 為例）
- 大會共筆裡沒有簡報
- 講者 medium：kuma老師的軟體工程教室，鐵人賽書籍：你就是不寫測試才會沒時間，推薦書籍：溫柏格的軟體管理學、系統思考
- 講者公司在招募遠端前、後工程師
為什麼沒時間寫測試？
舉例：申請獎學金
有些測試會在做 controller 時，把 service mock 起來只測一邊，這種做法的缺點是兩邊有變動的話無法溝通，所以講者會注意 controller 跟 service 間的重要溝通，不會把一邊( controller 或 service ) mock 起來寫測試
2) 現代 Web 框架效能優化技巧分享
- 大會共筆裡有簡報
- 講者目前在矽谷的一間獨角獸公司當全端，也曾在 appworks school 協助後段培訓
- demo code 語言是 PHP Laravel
技巧一：chunk
10000 筆 rows，平均 query 時間約差 2 倍，
chunkById 會先 order by id，速度比下面快，
chunk 會轉成 sql 語句: offset limit
User::chunkById(1000, function () { // do something })User::chunk(1000, function () { // do something })
處理大批資料可以用 chunk
技巧二：cursor（demo code 請看簡報）
cursor 有點像 sql 迴圈但不是，速度較慢
技巧三：about 「toArray()」（demo code 請看簡報）
hight-level function 會轉成 array，會花點時間轉
技巧七：count by database instead of application（demo code 請看簡報）
做計算 count 時建議用 database 處理
技巧十：index（demo code 請看簡報）
索引用負向表述不會生效，例如 !==
// pass
SELECT * FROM users WHERE gender in (1,2,3);// wrong
SELECT * FROM users WHERE gender != 0;
3) 從 CSS 方法論看原子化 CSS 的極致
- 大會共筆裡有簡報跟詳細記錄
4) Meet Passkeys, 與你不知道的金融驗證工具
- 大會共筆裡沒有簡報
驗證工具：passkeys
講者這場標題是借用蘋果在 2022 wwdc 上提出新的驗證機制：meet passkeys，蘋果說 passkey 不可能被猜出來
講者 demo passkey
先到 WebAuthn.io 註冊 passkey(可以跨平台使用)，
註冊當下平台會產生公鑰私鑰，公鑰傳送時會再加密一次產生 challenge code (每次傳送 code 都不一樣)
講者說 paaakey 其實是 ssh 的驗證機制
驗證工具：生物驗證
生物驗證缺點是 local 端驗證成功，但 service 端並不知道驗證成功與否
第一種驗證方法：密碼存在本地端
銀行業不可能用，對密碼安全很要求
第三種驗證方法：裝置綁定＋固定 token
裝置綁定還是會存一些 token 在本地，也是不太安全
第五種驗證方法：FIDO
建立了標準化
用考學測舉例，
學測不會用身分證查詢成績，是因為可能查到去年的，所以用這次考試產生的序號來查詢成績
將考學測例子轉成 FIDO 驗證流程
第三方驗證：mobile id
mobile id 是電信商跟裝置之間的驗證，透過電信訊號與電信商核對是否為本人
第三方驗證：憑證簽章
大額交易使用
第三方驗證：動態密碼
第三方驗證：人臉辨識
驗證本人的生物資料
第三方驗證：視訊驗證
用 websocket 溝通
驗證主要目的：判斷是否為本人同意授權，
驗證方式越便利，驗證信賴度越低
5) 前端好朋友 — tailwindcss
- 大會共筆裡沒有簡報，記錄詳細
- 奶綠茶碰過從 ie4
bootstript 缺點是會一次載入所有 css 檔案（約100多 k），
tailwind 是有用到的 css 才會編譯，檔案小很多，
tailwind 缺點是 ie 不支援
React 不推 style component 的原因：
要進去改 js，且 js runtime 時會把 css build 出來，用越多 style component 效能低落
6) Visual Testing
- 大會共筆裡沒有簡報，記錄詳細
- UI 測試
使用 Visual Testing 原因：
減輕 PR review 的負擔
快照缺點：
- 不直覺，因為是照 DOM 結構，但告知別人變動是截 UI 圖
- 會增加跑測試的時間，儲存快照又耗空間
Visual Testing 可以解決上述問題，檢視視覺變動，
講者很推從共用元件開始測試
不適用 Visual Testing：
- 沒有版控
- 畫面常常改
Day2
1) 用 DDD 事件風暴 & OOA 來展開你對 Kubernetes 的認知
- 大會共筆裡沒有簡報，記錄一些
現場 demo，人名用以下簡稱
- 講者 A：水球潘 — 水球技術學院
- 講者 B：Yiyu — On-primise k8s
講者 A 不知道 kubernetets(簡稱 k8s)的相關知識，
講者 B 是 k8s 專家，
講者 A 透過問答跟 DDD(domain driven design 領域驅動設計)快速建立該領域的知識模型
講者 A 把 k8s 名詞做成關聯架構：
- 每個不懂的名詞都是一個 Object
- Object 之間的關係是：
- 1..* 一對多
- 1..1 一對一
- *..1 多對一
- *..* 多對多
- Object 之間的箭頭關係
講者 A 把 k8s 的事件做成 flow，事件有分類：
2) 幫你的 Web 開發添加一點 Functional Programming 味
用 java demo 聽不懂
3) 導入 Lighthouse CI 作為前端應用的效能守門員
- 大會共筆裡有簡報，記錄一些
- Line Open Jobs
lighthouse ci 的 .js or .json 設定檔，array 裡可以放檢測頁面的 url，
建議放重點頁面就好，太多頁面 ci 會跑比較久
Line 團隊裡有一個 jstf team (javascript test first)，會制定各個開發團隊的 coding style 、共用 package
jstf team 做了 lhci-compare package，來檢測每次 commit 的 code 有沒有造成上次版本的效能上升或下降，舉例來說
當要把 branch A merge 回 master，需把 master 最新 commit 跟 branch A 最新 commit 做比對，那要如何取得 master 的最新 commit？
講者本來以為可以用 ancestor api，但不行，它只可以取得隸屬於同一個節點的 commit
package 實作用到官方提供的 LHCI server，就不會有免費空間只能存七天的問題
4) 利用動態特效網站 SOP 概念，讓你作品煞有其事
- 大會共筆裡沒有簡報，記錄一些
線上展覽分兩種：
1. 帶你逛，確保你會看到特定資訊，呈現可能是網頁或播影片
2. 自己逛，呈現可能是 3D 網頁
網站種類分成下面五種：
版塊設計做網站，主力放在後面四種，作品範例：
- 可不可熟成紅茶
- 逢甲大學
- 設計研究院（品牌識別是聶永真做的）
CIS 企業識別轉換成網站，以可不可熟成紅茶官網為例：
版塊到實體店調查，發現有一面展示牆是有很多個置物格，置物格放茶罐，
網站第一次提案：類似翻卡牌的風格跟效果，但
業主想要延續原本店內的鉛筆描繪風格跟色彩，
網站第二次提案：鉛筆描繪風格＋運輸船載著茶葉＋手搖杯搖晃效果，產出如下
版塊設計常用的動態規則如黑色圓圈：
版塊設計常用的前端 library：
- CSS Animate 動畫
- transition 漸變
- SVG animation 動畫
- Lottie.js 動畫
- Draggable.js 拖曳
- Parallax.js 視差
- AOS.js 滾動
- Lax.js 滾動
- ScrollTrigger 滾動
- Three.js 3D
- P5.js 創作
- Pixi.js 遊戲
講者補充資料：
- 動態特效網站規則 SOP
- 你都去哪裡找網站動態特效設計靈感？(動態特效資源篇)
- 你都去哪裡找網站動態特效設計靈感？(網站設計篇)
5) 無密碼時代來臨 ? 初探 FIDO 驗證標準
- 大會共筆裡沒有簡報
驗證：authentication != authorized
今年的報稅有用到 FIDO 驗證
講者用 webauthn.me 註冊 FIDO
