# 2023/08/22、9/12 切切切會議
###### tags: `切切切會議記錄`

會議室：線上 meeting
會議時間：下午14點開始
會議地點：台北（2123會議室）、新竹（R3116）
會議主持人：玟諭
會議記錄：玟諭
與會人員：琬樺、恬恬、雅瓊、黑白切五味、祺學

**下午：14:00開始**

---
## 認識git的協作流程
主講人： 思晨

[**簡報連結 🌐**](https://docs.google.com/presentation/d/1ehsgSWisDHT4U4LFV3wmRo4O8FXmI1-gSM92DO2aRIw/edit?usp=sharing)

會議記錄：
### Head (簡報 p.7~10)
* Head 是指標，checkout 切換
### github flow 流程 (簡報 p.48)
* [**git_test 🌐**](https://github.com/HywebU00/git_test)
* 從上面的網址把檔案fork到自己的git帳號
* 在自己的git帳號把檔案 clone 到自己的本機
* 開分支

---
## 觀察者API：Observer Web API 戰隊
主講人： 祺學

[**簡報連結 🌐**](https://hackmd.io/4V8fHeoeQDamR-qlI3eZug)

---
## 工作遇到的問題
主講人： Lize、Miley、雅瓊

### 1）專案移除 compass
[**簡報連結 🌐**](https://hackmd.io/@lizewu/rka_FRXKn)
會議記錄：

解決SASS的禁用警告 [連結🌐](https://www.astralweb.com.tw/resolving-sass-deprecation-warning/)
使用較舊版本的SASS可參考

### 2）AOS.js 動態 bug
> 問題：
> 網頁結構單純時，使用上沒問題。
> 網頁結構複雜時，網頁載入後，有安排動態的區塊呈現空白，
需要拉動瀏覽器 resize 後，動態才會再次載入

> 解決方法：
> 加一串 JS
> https://github.com/michalsnik/aos/issues/429

<script>
  AOS.init();
  window.addEventListener('scroll', function() {
    AOS.refresh();
  });
</script>

:::danger
**結論：**
改使用 wow.js
AOS.js 就跟直男一樣令人火大
:::

### 3) css屬性：scroll-padding-top / backgroung-clip

[**簡報連結 🌐**](https://hackmd.io/@mileyho/rJFgziZT3)

---
### 4) css屬性：border-image
[**筆記連結 🌐**](https://hackmd.io/@yachiung/HJCbn830n)
[**MDN Web Docs 說明文件連結 🌐**](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image)

---
### 5) css var()簡單應用
[**筆記連結 🌐**](https://hackmd.io/@yachiung/rkcZ009A2)

---

### 6) 在頁籤裡或是在收合展開裡，當slick無法展開時

在那個js裡面加上
$('').slick('refresh');

$('')這個換slick的元件

例如：
 $('.chat_block .chat_btn>a').click(function() {
     $('.chat_group').show();
     $('.recommendedbooks_slider').slick('refresh');
 })

 

[**範例連結 🌐**](https://hywebu00.github.io/2022_ncl_bigdata/mp.htm)

---
## 作品分享
[**作品連結 🌐**](https://docs.google.com/spreadsheets/d/1_HfrDsM4o2OOtK2_R65J_d1Ep8REVru5NmWb7tuq3-w/edit#gid=1358256252)

---
## 臨時動議
* 專案demo目前量不少，需要另開一個excel嗎？[連結](https://docs.google.com/spreadsheets/d/1_HfrDsM4o2OOtK2_R65J_d1Ep8REVru5NmWb7tuq3-w/edit#gid=1358256252)
* hyui flex是否繼續維護？
目前先繼續維護

* 圖片html寫法，是否取消

cp.html

<figure class="pic">
    <!-- 此範例為4:3比例 -->
    <picture>
        <source media="(min-width: 768px)" srcset="images/demo/01.jpg" />
        <source media="(max-width: 767px)" srcset="images/demo/01.jpg" />
        <img data-src="images/demo/01.jpg" class="lazy" alt="圖片說明" />
        <noscript><img src="images/demo/01.jpg" alt="圖片說明" /></noscript>
    </picture>
    <figcaption>圖說</figcaption>
</figure>

flex_template.htm、lp_album_template.htm

<div class="img-container">
    <picture>
        <source media="(min-width: 1200px)" data-srcset="images/demo/01.jpg" />
        <source media="(min-width: 992px)" data-srcset="images/demo/01.jpg" />
        <source media="(min-width: 576px)" data-srcset="images/demo/01.jpg" />
        <source media="(max-width: 575px)" data-srcset="images/demo/01.jpg" />
        <img data-src="images/demo/01.jpg" class="lazy" alt="圖片說明" />
        <noscript><img src="images/demo/01.jpg" alt="圖片說明" /></noscript>
    </picture>
</div>



 <script src="vendor/picturefill/picturefill.min.js" async></script>
此js已不更新