Frontend Intermediate Course - 作業二直播筆記

今天剛看完直播，老師也蠻早就修改我的作業了。

這次作業二老師修改後給我的建議有：

1. 檔案名稱可以統一叫 indes.html，比較有一致性。
2. 滑鼠移到圖片上面會變色塊，是你在測試什麼嗎 XD
3. 可以試著幫 box-shadow 加上 transition 看看，效果更好。

第一點只需要修改檔名即可，當時想說要區別不同作業所以才叫不同的檔名，不過檔案其實放在不同資料夾內，所以的確不需要另外命名。

第二點是因為在自我練習裡，其中的第一題是要滑鼠 hover 過去時背景顏色改變，但在我看完老師的直播後才發現我理解錯誤他的問題，其實只要 background 換一個顏色就可以了，我想得太複雜了 XD。

第三點也很容易修改，當時忙著處理改變背景忘記加 box-shadow，所以也忘記加上 transition，後來老師改之前有修改加上 box-shadow 但完全忘了 transition。


胡立老師的直播：
2. 讓畫面變得更動態：神奇的 CSS transition

這次的作業沒什麼大問題，頂多把色塊拿掉就可以了。以下是看直播的一些筆記。

1. box-shadow 的屬性，參考 w3schools 的 CSS3 box-shadow Property。

2. filter 的應用，參考這篇：filter - CSS。
由於的較舊的瀏覽器會有支援度的問題，所以要加上 -webkit- ，其實我對於 CSS prefixes 還是沒搞清楚，哪些 CSS 屬性要加、要加哪些瀏覽器（例如 -webkit-、-ms-、-o- 還是 -ms-），或是哪些 CSS 屬性其實已經不需要加 prefixes，實在太難記住了，後來找到 Autoprefixer CSS Online（作業二就是用這個），發現在 Sublime 上也有 Autoprefixer 的套件，所以目前就用這個。

3. transition 的屬性包含：transition-property、transition-duration、transition-timing-function 跟 transition-delay，參考 w3schools 這篇：CSS3 Transitions。
我通常都只有加 transition-duration，其他三個屬性比較少用，看直播後才知道原來 transition 可以直接指定要加在哪一個 CSS 屬性上，也就是 transition-property 的應用。一般不建議使用 transition: all，因為要避免浪費效能。

4. 老師還有提到 will-change 這個 CSS 屬性，參考文章：will-change - CSS，主要是告訴瀏覽器先準備接下來要運作需要較高效能的 CSS 屬性，這屬於比較高級的 CSS 應用，所以先記起來有這個東西，以後慢慢研究。

5. Google 在 Udacity 上的課：Browser Rendering Optimization。了解瀏覽器及程式碼之間如何運作，如何寫程式才不會浪費效能，以及如何利用 Google DevTools，有計畫把 Hahow 的 動畫互動網頁程式入門 上完後來上這門課。

6. 最後是講解下次的作業，還有一些比較 CSS 預處理器之間的差異，像是：Sass vs. Less vs. Stylus: Preprocessor Shootout。
因為上 Hahow 的課吳哲宇老師是用 Sass，所以我目前是用 Sass，昨天在 Codecademy 又上了一下 Sass 的課，才發現原來有很多功能我都還不知道，功能很強大。


以上就是我作業二的回顧筆記，有錯還請指正。