May 31, 2017

Frontend Intermediate Course - 作業七直播筆記

交作業時就有備註自己知道的兩個 bug,跑版問題跟語言按鈕在第一次切換時 CSS 無法轉換。

跑版問題因為胡立老師在我交作業前有提示過,所以他就沒有再解答,要我靠自己 XD

第二個語言按鈕切換問題,胡立老師給這樣的提示:
這是因為你第一次按按鈕之後執行 selectButton,這個 function 會幫 div.menu button 加上 click 事件所以你第一次按鈕之後,只是加上這個事件,並不會被執行到第二次按的時候因為已經有加上 click 事件了,所以才會有作用。
後來解決方法是在 selectButton 函式中拿掉 click 事件,改成每次清空兩個語言按鈕的 selected class,然後再加上 selected class 到點選的按紐。

完成的程式碼:
function selectButton(lang) {
    $('#zh-tw').removeClass('selected');
    $('#en').removeClass('selected');
    $('#' + lang).addClass('selected');
}

Frontend Intermediate Course - 作業七

作業七的 GitHub 連結:走向國際:i18n

這次也是在最後一天做完,還參考(偷看)了兩個同學的作業才寫出來。雖然相較於作業四、五、六簡單,但我還是在後面卡了一下。原本很希望能夠自己解開,最後還是跟胡立老師求救 XD

作業沒有要求用 button 做出切換語言的按鈕,但想要讓畫面好看,所以選擇用 button 然後加了一些 CSS,並且讓當前語言的按鈕有被選取的感覺。可是在切換語言的時候,會出現一個外框,而且已經在 CSS 中設 border: none;,所以一直搞不清楚為什麼會有外框。

如圖:點選英文按鈕出現外框線。

後來看了其中一個同學的 CSS 檔案,才發現還要設 outline: none; 才可以。應該是 HTML 對 button 的原有設定,要是沒有偷看同學的作業我可能會卡關更久 QAQ


May 23, 2017

Frontend Intermediate Course - 作業六直播筆記

這次交作業的時候問了胡立老師關於 error handling 的問題,因為在 DevTools 的 Console 裡會看到 "Uncaught ReferenceError: err is not defined at XMLHttpRequest.request.onreadystatechange" 這一段錯誤碼,所以想問他這個問題應該要怎麼修正。

他的回答很詳細:
你看一下上次作業的這一段:
error: function(err) {
        $container.append('<div class="error">Failed to Load Twitch Data.</div>');
}
這邊的 err$.ajax 幫你傳進來的錯誤參數 可是當這次改寫成 vanilla js 的時候,你會發現你沒有 err 這個東西可以拿了 為什麼?因為它沒有給你,所以你這一段:
request.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        var response = JSON.parse(this.responseText);
        callBack(null, response);
    } else {
        callBack(err);
    }
}
他才會出這個錯誤:Uncaught ReferenceError: err is not defined at XMLHttpRequest.request.onreadystatechange,意思就是 err 這個變數沒有宣告,也找不到這東西在哪 要改掉的話,你可以自己建一個 Error 出來,或是傳一個字串其實也可以
request.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        var response = JSON.parse(this.responseText);
        callBack(null, response);
    } else {
        callBack(new Error('xhr not ready or status not equal to 200'));
    }
}
解答之後豁然開朗啊!果然對 Vanilla js 還不太懂,所以還一直用 jQuery 的思考方式去寫。


Frontend Intermediate Course - 作業六

作業六的 GitHub 連結:返璞歸真:vanilla js

這次作業趕在最後一天才做完,中間也是不斷的崩潰 XD

原生 JavaScript 仍然有很多不懂的地方,都是靠原本 jQuery 怎麼寫,然後再去 google 搜尋怎麼轉換成 vanilla js。不過最花時間的是思考如何改寫我原本寫的這一段:
success: function (response) {
            var streams = response.streams;
            for (var i = 0; i < streams.length; i++) {
               $(getViewbox(streams[i])).insertBefore($('#first_viewbox'));
            }

一直搞不清楚如何改寫原本用 jQuery 呼叫出的 callback function,google 找了幾篇都不是我要的答案,後來只好參考(偷看)其中一位同學寫的作業,才知道如何繼續,不然恐怕這次又要遲交了,嗚嗚。

May 18, 2017

Frontend Intermediate Course - 作業五與直播筆記

作業五的 GitHub 連結:讓網頁變得更完整:加上 placeholder 與 infinite scroll

如果說作業四是是越級打怪,這次的作業讓我覺得是裝備很差的情況下要打大魔王。இдஇ

因為連從哪裡努力起都沒有頭緒,一般的線上課程不太會講到這個部分,google 搜尋也不知如何搜尋起,雖然找到幾篇 Stack Overflow 有提到 placeholder,但是我也不知道怎麼應用在我的作業上。上 PTT 有找到一個人放在 CodePen 上的 placeholder 例子,但是也是有看沒有懂。關於 infinite scroll,雖然胡立老師有放一篇關鍵的文章,但是不知道為什麼我就是沒辦法在捲軸捲到底的時候載入新的資料,所以從頭卡到尾,嚴重卡關。

想說那去偷看其他同學的作業,看看能不能至少有個頭緒,結果 JavaScript 技能點數還不夠,連想偷看也看不懂 XD

本來想要跟胡立老師求救,當他知道我超級卡關之後就說「那就到時候看解說吧,聽完解說之後會海闊天空,想說怎麼那麼簡單」。當時半信半疑,我應該是裡面最菜的了,其他人都有一些程式的基礎,好幾個同學也覺得這次作業難度很高,連其他人都覺得有難度,那我這麼菜怎麼可能解得出來,然後就看開了(? 於是就放棄嘗試,繼續去做 FreeCodeCamp 的題目了...


May 15, 2017

咖啡蛋糕捲

母親節前兩天又再次問媽媽想吃什麼蛋糕,最後她指定要吃咖啡蛋糕捲 XD
我做了咖啡蛋糕捲然後大家都有口福,媽媽英明~

這次的食譜是參考 Carol 老師的食譜:咖啡戚風布丁捲。因為媽媽不喜歡布丁,所以我沒有加入布丁,只有夾鮮奶油。也因為沒有夾布丁,所以我把鮮奶油的份量多加一些,這樣比較容易捲。如果你不喜歡鮮奶油也可以自己調整,不一定要跟我做的一樣(但是鮮奶油真的好好吃~)。

蛋糕捲其實是戚風蛋糕的延伸,如果還不熟悉戚風蛋糕的做法,可以先看我上次寫的:巧克力戚風蛋糕

蛋糕捲沒有想像中的難,但要做得很漂亮需要練習。最容易失敗的點應該是,捲的時候容易有蛋糕體裂開的情形,不過基本上不會影響味道,只是美觀上的差別。失敗了不用難過,因為自己烘焙的重點是好吃而不是賣相 XD

建議先把鮮奶油打好然後冷藏,再做蛋糕的部分。



May 9, 2017

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>');


May 7, 2017

Frontend Intermediate Course - 作業四

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

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

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

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

May 2, 2017

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 還沒學熟,要努力惡補~