---
# System prepended metadata

title: 2023/01/11 切切切會議：VS code／Google I/O／hyui 4.0／無障礙
tags: [切切切會議記錄]

---

# 2023/01/11 切切切會議

###### tags: `切切切會議記錄`

會議室：線上 meeting  
會議時間：早上10點開始
會議地點：台北（2123會議室(C)）、新竹（R3116）、台中（4112會議室）
會議主持人：玟諭
會議記錄：思晨
與會人員：琬樺、恬恬、雅瓊、黑白切五味、祺學


---
## VS code 基本操作
**【大綱】**
* 初步了解 VS Code workspace
* 建立一個專案的 workspace 並與 GitHub 關聯
* Extensions: Live Server
* Extensions: Live Sass Compiler 的設定項目
* VS code 文字編輯的好用技巧

主講人：雅瓊
[簡報連結](https://hackmd.io/heIThVdGToaAmSHPXhU2sw)

**會議記錄：**
* 了解工作區的概念 如果需要專案交接需要分享工作區設定
* 建立新專案流程
* 工作區作用介紹
* 外掛介紹 Live Server 及Live Sass Compiler設定
* 文字編輯器多排處理小技巧


**好像是關於 workspace 的建立**
1. 在 git new 一個檔案，copy 網址
2. vscode 端 clone git???的按鈕，加入剛剛New的git網址
3. 新增頁面、異動、修改，在vscode推上去（雷同sourcetree）
4. changes > stage > commit
5. [**VSCode使用者與工作區設定 <i class="fa fa-link" aria-hidden="true"></i>**](https://ithelp.ithome.com.tw/articles/10238252)

**Live Sass Compiler 設定說明**
1. includeItems 要引入OOO，其他的都不會引入，故只設定要引入的即可
2. excludeList  不引入
 
## 切版經驗分享
**【大綱】**
* 養成 mobile first 的切版習慣
* 減少 html 巢狀層：以 HyUI header 和 footer 為例
* @media screen and (min-width: $wwMaximum) 時的區塊、元件處理 
* css 單位 vw vh 在 RWD 的應用

主講人：雅瓊
[簡報連結](https://hackmd.io/NJIs8xXNQ9-4JmomjyASPQ)

**會議記錄：**
* 改變習慣從 mobile first 開始規劃
* 因全球手機上網人數將突破60%，切版應以手機優先為佳，減輕CSS撰寫量
* Hyui的HTML精簡化修改 部分效果可以靠CSS完成
* 善用 min-width 和 max-width 的寬度做切版運用
(相關範例代碼會放在codepen)




## Google I/O
主講人：祺學
[簡報連結](https://hackmd.io/q8agDe98T2q2_NMuInEMIg?view)

**會議記錄：**
* 補充說明vscode上堆專案版本
* sticky position 功能介紹
* css等比介紹 aspect-ratio 用法
(相關請參考簡報)


## hyui 4.0 調整說明
主講人：祺學
* 探討多語系問題 目前決議依專案需求再行更改

## 無障礙分享
主講人：淑雅 [連結](https://hackmd.io/t4FCkXVPQUuBpUqNALdvFA)
主講人：Miley [連結](https://hackmd.io/QKEdE5GCQbqYkkmRuPlQyQ#%E7%84%A1%E9%9A%9C%E7%A4%99%E7%9B%B8%E9%97%9C%EF%BC%9Altagt%E6%8B%BF%E6%8E%89href%E5%BE%8C%EF%BC%8C%E6%8C%89tab%E7%84%A1%E6%B3%95focus)


**會議記錄：**
* ARIA家族會交互使用 id 很重要
* MDN 及 W3C 有範例可以觀看 幫助更好理解
* 3A input ㄧ定要加title!!!
* a 沒有 href 要加 tabindex=0
(相關請參考簡報)

## 專案Demo

* 將專案切好的連結，填寫於表格內，方便檢視。[連結](https://docs.google.com/spreadsheets/d/1_HfrDsM4o2OOtK2_R65J_d1Ep8REVru5NmWb7tuq3-w/edit#gid=1358256252)

## 臨時動議

1. [**Jitsi meeting 會議平台**](https://meet.jit.si/)，用safari 啟動