# 2024/05/23 切切切會議
###### tags: `切切切會議記錄`

會議室：線上 meeting
會議時間：2024/05/23 下午1:30
會議地點：台北（2124（D會議室）、新竹（R3111會議室）
會議主持人：吳玟諭
會議記錄：Lize
與會人員：琬樺、恬恬、雅瓊、玟諭、Lize、麥莉、思晨、祺學

---

## 1）setTimeout 方法分享
> 主講人：吳玟諭
> [簡報連結 🌐](https://hackmd.io/KppVWdPFQBqCjOIO3EKRvg?both)

:::info
是 JavaScript 中用於設置定時器的方法之一。
它允許你在指定的時間後執行一段程式碼或者一個函數。
:::

**Tip：**
1. 用於非全部程式碼同步執行，
2. setTimeout()觸發一次行動，而setInterval()則重複觸發一次行動。
3. 雅瓊：手機版的無障礙、選單1S推出去、在display none
4. setTimeout 非同步的東西，console放在setTimeout內，不然抓不到
5. 還沒執行去抓資料，就抓不到
6. 拖動螢幕更新，但不要拖一點就馬上更新，使用setTimeout 拖動完畢N秒後再更新，得到最後一個數值之後再執行
7. resizeTimer 一直拖動一直更新？

---

## 2）color-scheme
> 主講人：Lize
> [簡報連結 🌐](https://hackmd.io/@lizewu/Hya8m5DbA)

:::info
練習如何使用 color-scheme，
用於切換日間、夜間模式
:::

**Tip：**
1. color-scheme 只有兩個參數：light dark
2. 在 :root 裡設定，可以改變裝置的設定
3. prefers-color-scheme 是抓裝置

---

## 3）`<button>` 與 `<a>` click 事件之比較
> 主講人：姚雅瓊
> [簡報連結 🌐](https://hackmd.io/KiOFSrAHS4iGFJGU8z04ig?both)

:::info
某些情況下， `<a>` 元件被當成 `<button>` 元件，作為控制按鈕使用，而非預設的連結功能。此時 href 屬性的存在與否會影響滑鼠與鍵盤事件的回應動作。如需考量無障礙（可使用鍵盤操作），使用`<a>` 或 `<button>` ，程式的撰寫也有不同。
:::
**Tip：**
1. button 自己有兩個動作 所以會開關 keydown
2. a、span e.preventDefault();
3. ...button我大哥，用button就對了

---
## 4) CSS分享
> 主講人：曾祺學
> [**簡報連結 🌐**](https://hackmd.io/4uYsnKkvRpK8D5MSNllczg?view)
:::info
不常看到但很好用的css分享
:::
**Tip：**
1. **isolation**: isolation: isolate; 以父層(元件)為基準，z-index: -1; 不會跑到 body 的後面
2. **inset**: position: absolute; ＋ inset: 10px 20px 15px 30px; inset 寫法類似padding/margin，可搭配absolute應用
3. **max / min /clamp**: 常用在padding，不須受限在斷點判斷
4. **max-content / min-content / fit-content**: max-content類似文字換行 white-space:nowrap 但寬度以該行最大寬為主不會到100%，min-content會以文字最小為寬度，fit-content是max-content + min-content;
5. **gap**: display: flex ＋ gap
6. flex 搭配 margin 可控制其中一個靠右/靠左
7.

---
## 工作遇到的問題
> 主講人：吳玟諭
> [**簡報連結 🌐**](https://hackmd.io/wji7_OW7TJSsxYvaNCKWEA)
:::info
2024無障礙清單
:::
**Tip：**
1. .scrollToTop 關掉keydown
2. tab鍵：
* 報讀順序：連結文字、元件屬性、title文字
* 有 aria-label 就不報讀連結文字
4. 上下鍵：
* 報讀順序：元件屬性、連結文字、title文字
* 有 aria-label 就不報讀連結文字
6. aria-label：寫功能（ex:列表開關）、不寫狀態
7. aria-expanded：寫狀態（ex:開啟/關閉）
---

## 臨時動議
1. 建立無障礙資源庫
2. 建立疑難排解資源庫
* 問題/解決方式/時間
3. 前端設計師輪流負責每次切切切會議部分內容
* review 看 css code
* 更新新的css寫法
4. HyUI flex JQ看code
* 先順過一次，寫法更新，汰舊換新
* JQ 寫法
5. 固定的主題
* 4.0更新情況、內容，跟大家分享
* 更新切版方式
* 無障礙、疑難排解內容，要開單～～

---

## 專案分享
[**專案連結 🌐**](https://docs.google.com/spreadsheets/d/1t_fthnYUL4EWfBYsXrt6fbE3b4cDA8Fmx1aJZ6RN-lc/edit#gid=565687535)

<!-- **Tip：**
1. ...
2. ...
3. ... -->