Frontend Intermediate Course - 作業四直播筆記

今天看完直播多收穫（筆記也會很多），胡立老師也在前兩天改好我的作業了。

這次他給我的評語是：「都不錯～ 點進去要到直播那個加的很好，原本應該這樣加的但我忘記講 XD append 那一段可以排版一下」

原本只是想要自己練習用，所以加入點進預覽圖片可以連到 twitch 直播的 URL，結果被誇獎了 XD。當時真的寫作業寫到昏頭，完全忘記可以用連接字串的方式排版，稍微排版之後可讀性增加很多。

$('.container').append(
                '<div class="viewbox">'+
                    '<div class="preview">'+
                        '<a href="'+url+'" target="_blank"><img src="'+channel.preview.medium+'"></a>'+
                    '</div>'+
                    '<div class="bottom">'+
                        '<div class="headpic">'+
                            '<img src="'+channel.channel.logo+'">'+
                        '</div>'+
                        '<div class="intro">'+
                            '<div class="channel_name">'+channel.channel.status+'</div>'+
                            '<div class="host_name">'+channel.channel.display_name+'</div>'+
                        '</div>'+
                    '</div>'+
                '</div>');

Frontend Intermediate Course - 作業四

作業 4 的 GitHub 連結：從假資料到真資料：Ajax 與 API 串接

因為 JavaScript 還沒學熟，所以為了要寫這次的作業上了好幾個線上課，還有看了幾個 Youtube 教學影片，最後還靠了胡立老師的幫忙才能按時把作業寫完。

這次除了寫作業遇到的問題跟解決方法之外，還想要記錄為了寫這個作業看的一些課程跟教學影片的心得，所以會有很多廢話。

胡立老師的課程正式開始前，有上微軟 Microsoft Virtual Academy 的 JavaScript Fundamentals for Absolute Beginners，當時雖然大致上聽得懂（例如迴圈的概念，條件判斷的概念...等等），但很多細節其實還是模糊的。前面的作業著重在 HTML/CSS 上，所以只是想要先有 JavaScript 基礎的概念，想說還有時間可以精進 JavaScript。另外一點是，我不太適應微軟 MVA 那位老師的教學風格，所以沒看得很認真，也想說可以在上 Hahow 的課時再仔細學過，但後來發現到要寫作業四時，當時上課教的都忘得差不多了，果然「大致上聽得懂」並沒有進入頭腦中。

Frontend Intermediate Course - 作業三直播筆記

這次作業老師給我的評語是：「Good! 很不錯」，還有《值得參考》的標籤！
(*´▽`*) 太開心了～

胡立老師的直播：
3. 寫 CSS 必備神器：CSS 預處理器

看完直播後沒甚麼大問題，有幾個地方寫一下筆記：

1. 在 Command Line 上直接編譯 Sass。
正常好像應該要用 Compass 在 Command Line 上編譯 Sass 檔案，但我是用 Sublime 上的 SASS Build 編譯的。應該短時間不會換別的文字編輯器，單純自己對 Command Line 有莫名的恐懼感（？，所以一直沒有研究如何操作 Command Line，之後應該要研究一下。

2. 寫出有效率的 CSS。
前幾天有一個同學問到關於 CSS 巢狀結構的一些問題，然後有另一個同學提到巢狀結構不要太多，否則會影響瀏覽器的效率，這篇文章很不錯：如何撰寫有效率的CSS選擇器 (CSS Selector)。還有另一篇文章是老師在直播的時候提到的 淺談 CSS 方法論與 Atomic CSS，這篇是講解寫 CSS 選擇器命名的一些規範，也是學 CSS 更深入之後要研究的東西。

3. PostCSS。
剛開始要了解 PostCSS 覺得很頭大，後來用了 Autuprefixer 之後覺得真是太好用了！還沒有仔細研究 PostCSS 裡面的每一個 plugin，不過之後應該要研究如何好好應用。


自己直播筆記大致上就這樣。之後的作業就把重點放在 JavaScript 上了，覺得壓力大，因為我的 JavaScript 還沒學熟，要努力惡補～

Frontend Intermediate Course - 作業三

作業 3 的 GitHub 連結：寫 CSS 必備神器：CSS 預處理器

第三個作業原本以為應該不會花很多時間，不過研究如何在 Sublime 上面把 Sass 編譯成 CSS 花了不少時間，還另外寫了一篇：在 Sublime Text 3 將 Sass 編譯成 CSS。

Sass 的基本大致了解，不過還是想要仔細學過一次，剛好 Codecademy 上面有 Sass 的課程：Learn Sass，所以昨天把那門課上完，上完後才知道原來除了可以使用變數、mixin 之外，Sass 還有運算跟函式的功能，以及如何管理 Sass 檔案等等，是不錯的課程，對於 Sass 也有更全面的了解。

Frontend Intermediate Course - 作業二直播筆記

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

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

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

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

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

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

卡士達泡芙

泡芙應該是我曾經做失敗最多次的甜點。以前剛開始學做泡芙的時候，沒有抓到訣竅，失敗了兩、三次，泡芙都無法順利膨脹。可是即使失敗，爸爸跟弟弟也會幫我吃光光，所以我更加努力研究想做出成功的泡芙給他們吃。好在失敗三次後就成功了，不然他們要一直幫我吃失敗的作品 XD。

今天的食譜，泡芙外皮是參考 Carol 老師的 基本泡芙外皮，卡士達醬是參考她的 烘焙新手變達人的第一本書 中的第 48 頁的「卡士達醬」。

因為想要把步驟講的盡量詳細，所以照片比較多。

基本上泡芙的材料很簡單，只要抓到訣竅就可以做得很成功。我建議先做卡士達醬，這樣泡芙烤好後就可以馬上加入卡士達醬享用了～

在 Sublime Text 3 將 Sass 編譯成 CSS

在 動畫互動網頁程式入門（HTML/CSS/JS）上，吳哲宇老師使用 Sass 當作 CSS 的預處理器，可以設定變數、利於 Nesting、引入 Mixins 等等優點，比起純 CSS 還要方便好用。剛好 Frontend Intermediate Course 中的第三週作業就是要用預處理器寫 CSS，於是想要在 Sublime 上面設定 Sass，並將 Sass 編譯成 CSS。

在 Sublime 上面把 Sass 編譯成 CSS 比我想像還要麻煩，本來以為只要在 Sublime 上面安裝 Sass 套件就可以了，結果根本不是這樣子（我太天真的啊...）

Google 搜尋之後發現還需要安裝 SASS Build 套件才可以將 Sass 編譯成 CSS。當我以為這樣就完成安裝設定後才發現，不是只在 Sublime 上面安裝那兩個套件，還要在電腦安裝 Ruby 跟 Sass 才可以，我果然是太天真了...

於是就努力的研究一下到底要怎麼安裝設定才可以，以下是我自己的設定過程，如果需要比較詳細的教學，我在 YouTube 上面發現 Peter Sommerhoff 教學影片還不錯 Sass Beginner Tutorial，可惜是在我差不多都設定完成之後才看到。