April 25, 2017

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-propertytransition-durationtransition-timing-functiontransition-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 的課,才發現原來有很多功能我都還不知道,功能很強大。


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


No comments:

Post a Comment