W13_現代前端工具、JS 與 CSS 補充概念_學習筆記整理

本篇是程式學習記錄，記錄 Lidemy [FE201] 課程實作部分，本週總結一句話就是「現代前端工具(CSS 預處理器、Babel、gulp 跟 webpack)、JS(fetch, promise) 與 CSS 補充概念(Selector 權重, CSS Sprites )」恩...這句話好長...

作業概覽：

hw1: 運用 scss 改寫陽春部落格的 css

hw2: 跟著做一個留言板 plugin

hw3: 把之前用 XHR 的 twitch 作業改寫成 fetch 版本

筆記內容：

一、N1_CSS 預處理器、N1.1_Sass 實作補充_CSS 預處理器

二、N2_Babel 簡介及使用

三、N3_gulp 簡介及使用

四、N4_Webpack 介紹、使用、N4.1_Webpack 是什麼及為什麼要用它？

五、Fetch、Promise 介紹與應用

六、W13_作業一實作記錄

七、W13_作業二實作記錄

八、作業三：看完 fetch 影片系列，本來以為用 fetch 就好了，但看了檢討後，又把作業改寫成 async, await 版本

九、W13_作業四簡答題

十、W13 直播檢討

十一、其他

T1.1_Sass 裝好了，可是 --watch 不能用？

CSS 效能優化

十二、心得、心態檢討：

• 我的挫折感來源都是「卡住解不開」，會這樣的原因多半是「沒睡飽」，接著頭腦不清楚衍生的「不想面對錯誤訊息」，然後就會產生「我好笨」、「一定是我不夠好」種種負面的心態。

  • 做了一些新嘗試，好像有改善睡眠問題，需要多一點時間觀察看看。

• 另一個程式寫不出來的原因，是「不知道自己到底在做什麼」，所以在做事前把要做的事想清楚並寫下來，會比較容易執行。