Showing posts with label Frontend-intermediate-course. Show all posts
Showing posts with label Frontend-intermediate-course. Show all posts

June 25, 2017

Frontend Intermediate Course - 作業十直播筆記

最後一次作業胡立老師沒有修改,不過交完作業之後,在 Slack 群組裡面胡立老師有提到其實應該所有的 JavaScript 檔案都應該檢查才對,當時我在 webpack.config.js 裡面出現的錯誤不知道怎麼修改,所以就把設定檔都放在忽略檔案名單裡,不是最正確的方式。

後來才知道,原來在 webpack.config.js 檔案裡,如果沒有用到 webpack 這個變數,其實是不用引入的,這跟我原本的認知不一樣,點破我的盲點 XD

也加入 path.join() 修正我的另外一個錯誤。

所以在 package.json 裡面,讓設定檔也要被 semistandard 檢查:
"semistandard": {
    "ignore": [
      "src/css/",
      "dist/*.min.css",
      "dist/*.min.js",
      "node_modules/"
    ]
  }

然後在 webpack.config.js 裡面,拿掉 var webpack = require('webpack');,同時引入 var path = require('path');,修改一下路徑的寫法:
module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.min.js'
  }

/* Original codes:
module.exports = {
  entry: './src/js/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
*/

最後再重新用 semistandard 檢查一次,全部都沒有問題了~


June 17, 2017

Frontend Intermediate Course - 學習心得

有點不敢相信自己居然可以堅持到最後,而且每週都有交作業(除了第五週作業寫不出來,看完直播講解後才交作業),每週也都有寫部落格記錄作業筆記跟直播筆記,都沒有偷懶呢!

以下是我上完這個課程的一些心得,寫得很長 XD

30 歲才開始
30 歲才開始學寫程式,總是會懷疑自己能不能學好,不過看到這篇:60歲才接觸電腦、日本81歲奶奶開發出 iPhone 遊戲 App 之後,又覺得 30 歲開始其實也不晚。年齡不應該是阻止自己學習的藉口,如果想著「我年紀大了,學這個太晚了還是不要學」,這樣其實是為自己的懶惰找藉口,沒有開始學習就說自己學不會,當然不可能學會的。開始踏出嘗試的第一步才是重點。

不可否認如果年紀輕一點開始學習,記憶力、反應力跟學習能力比較高,我也常常想,如果早個五年來學寫程式,是不是會比現在還輕鬆許多?但五年前的自己,根本不認為自己能夠寫程式,也對寫程式沒有一點興趣。雖然開始學寫程式的原因有點好笑,是因為失戀而想要學一個很難而且從沒有接觸過的東西,困難到不要讓我分心想不開心的事情,所以才開始學寫程式。

一開始也沒有想過學了要做什麼,也不確定自己會不會喜歡寫程式,但我的個性有一個奇怪的特點,就是「真正嘗試了之後才能決定自己對此事物的感覺」。雖然以前不認為對寫程式有興趣,但我從沒有真正寫過程式,這樣又如何下定論我是討厭寫程式的呢?剛好也趁這個機會好好嘗試看看寫程式,然後再來決定我對寫程式有怎麼樣的感覺。於是就在 Codecademy 上開始學 Python,後來卡關跑去 Hahow 上了胡立老師的課,也才開始了這次的課程。

June 15, 2017

Frontend Intermediate Course - 作業十

作業十的 GitHub 連結:改掉你的壞習慣:ESLint 與 standard

這次作業應該是最快完成的一個作業~

我選擇 semistandard 做為我這次作業的規範,是 standard 的分號版本,兩個版本大同小異,最大差別在於 semistandard 在程式碼裡面要加分號,而 standard 不用加分號。因為我原本的程式碼都有加分號的習慣,所以就選 semistandard

semistandard 需要 Node.js 支援並用 npm 安裝,這個部份經過前兩個作業的訓練已經很熟悉了。後來發現 Sublime 上有套件可以用,也有順便安裝。

June 14, 2017

Frontend Intermediate Course - 作業九直播筆記

這次作業胡立老師給了「做得很好,gulpfile 很完整」的評價之外,還得到《值得參考》的榮譽標籤!(*´▽`*) 太開心了~~

胡立老師的直播:
9. 節省 Request 的極致:一為全,全為一

以下是看直播的一些筆記。

1. gulp.task 的用法。
gulp.task('default', function () {
  // do something...
});

gulp.task 裡面的 'default' 是每次執行 Gulp 會執行的程式碼,如果命名成自訂名稱,譬如說 'hello' 的話:
gulp.task('hello', function () {
  // do something...
});
那在執行 Gulp 的時候要指定執行 'hello',否則 Gulp 會回應找不到 'default' 裡的程式碼。

胡立老師是用 Mac,而我用的是 Windows。Windows 的 command line 的指令跟 Mac 的 terminal 不一樣,所以我照胡立老師的示範去執行沒辦法成功,還要再研究。不過也可以寫成:
gulp.task('default', ['hello']);
這樣直接執行 Gulp 就會執行到 'hello' 裡面的程式碼了。

Frontend Intermediate Course - 作業九

作業九的 GitHub 連結:節省 Request 的極致:一為全,全為一

這次作業要使用 Gulp 來自動化工作流程,作業要求是要將 CSS 跟 JavaScript 檔案都 inline 進 index.html 裡面,不能發出 CSS 跟 JavaScript 的 Request。雖然手動可以做到這件事情,但每次修改 CSS 跟 JavaScript 檔案就要手動 inline,這樣的確很麻煩。

有了上次做 Webpack 作業的經驗,這次讀了兩篇學習資源的文章,知道如何安裝之後就開始動手做作業了。最主要是參考 Gulp 官網 跟胡立老師的 可以幫我自動化嗎,拜託:Gulp。大概是有了上次 Webpack 作業的經驗,這次的 Gulp 作業上手很快,也沒有感覺那麼困難了,除了中間因為 Webpack uglifyJS plugin 卡住了一些時間,大致上都算順利。

Gulp 跟 Webpack 一樣需要用 Node.js 支援,上次的作業後已經比較熟悉 Node.js 跟 npm 的操作,也比較熟悉 command line 的操作,所以這個部分就不會像上次一樣卡關。

Gulp 到底是做什麼用的呢?簡單來說就是幫你把原本需要手動完成的工作,全部自動化。舉例來說,原本我用 Sublime 的套件幫我把 Sass 編譯成 CSS,然後再用另一個套件把 CSS 檔案加入 prefixer,有 Gulp 之後,我就不用再手動處理這些東西,安裝 Gulp plugins 然後寫好程式就可以一次幫我處理好。 而且 Gulp 有各式各樣的 plugins 可以使用,所以當要手動處理的事情越來越多的時候,使用 Gulp 就變得好方便!


June 8, 2017

Frontend Intermediate Course - 作業八直播筆記

這次作業都沒有問題,太好了 ヽ(●´∀`●)ノ

胡立老師的直播:
8. 當我們包在一起:Webpack(上)
8. 當我們包在一起:Webpack(下)

以下是看直播的筆記。

1. 什麼是 Node.js?
雖然我已經完成 Webpack 的作業,但 Node.js 到底是什麼我其實還是不清楚,只知道大概可以在後端跑 JavaScript 的東西這樣子 XD。

Node.js 的官網解釋是「Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.」,胡立老師解釋是「Node.js 可以在電腦上直接執行 JaveScript 而不用透過瀏覽器」。

Node.js 有許多內建的模組,胡立老師在直播裡示範利用 http module 建立一個簡單的伺服器,覺得厲害!
var http = require('http');

var server = http.createServer(function(req, res) {
    res.end('hello, world');
});

server.listen(3333);

June 5, 2017

Frontend Intermediate Course - 作業八

作業八的 GitHub 連結:當我們包在一起:Webpack

作業的說明裡面,胡立老師也清楚的說這次作業比較複雜,所以讓我很擔心無法完成作業,結果居然可以即時完成作業,實在太感動了!(當然也是問了胡立老師很多問題才有辦法完成 XD)

稍微研究了學習資源裡的文章,其實都看得霧煞煞,能確定理解的只有安裝而已 XD 所以想說還是先動手安裝,然後再慢慢解決其他問題,不然一直看文章也沒進展。

前幾次作業我有提到對 command line 有莫名的恐懼感,而 Webpack 許多安裝與操作都要用到 command line,所以只好認真惡補一下,除了重新看過之前胡立老師在 Hahow 上的 初心者的計概與 coding 火球術 之外,另外找到 thenewboston 的 youtube 頻道上的 Windows Command Line Tutorials,增進一些基礎。

這次作業套句胡立老師說的「以往是寫 code 難,但作業八難在不是寫 code,所以難」。其實原本 JavaScript 檔案裡的程式碼變動不多,難在 Webpack 安裝跟環境設定,然後利用 requiremodule.exports 把原本的 script 檔案都打包起來。

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


April 25, 2017

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


April 19, 2017

Frontebd Intermediate Course - 作業二

作業 2 的 GitHub 連結:讓畫面變得更動態:神奇的 CSS transition

第二個作業是第一個作業的延續,基本上在方塊的 CSS 下面增加 :hover,然後增加亮度 filter: brightness(1.2) 就達到作業的基本要求了,前後不到 5 分鐘就快速完成 XD 亮度沒有調很高,因為實況主的頭像是淺色的,亮度太高看起來很刺眼。


如果是在 CSS 裡用加圖片,要做到自我練習第一題的要求,hover 的時候改變顏色,也沒有很困難。:hover 下面加入方塊視窗的屬性,然後改變背景顏色,這裡我原本的背景是插入圖片的,所以有先移除背景圖片 background-image: none 再改背景顏色。


Frontend Intermediate Course - 作業一直播筆記

今天剛看完胡立老師的直播,剛好他也改完我的作業,所以趕快來寫一下這次的筆記。

老師這次給我的建議有:

1. row1、row2、row3 有共同的 CSS,所以應該在 div 的 class 裡多加 row,這樣擴充性比較高,才不用增加 row 就要改一次 CSS。HTML 改成如下:
<div class="row row1">
....
</div>
2. 頻道名稱跟實況主名字那邊做垂直置中對齊。

第一點的確是我疏忽沒加到,要修改也蠻容易的,所以我就馬上改了我上次 CodePen 上面的檔案。

不過第二點我想要在頻道名稱跟實況主名字外面加 div 然後再去定位,不過這樣 CSS 那邊要修改的地方很多,加上看別人寫的作業,才發現我的 HTML 跟別人長得不一樣 XD,所以想說整個大修改好了,之後的作業二就會用修改過的版本。


April 11, 2017

Frontend Intermediate Course - 作業一

作業 1 的 GitHub 連結:基本 HTML/CSS 練習:以 Twitch 為例

這個作業還沒有用到 JavaScript,我也剛好上完 動畫互動網頁程式入門(HTML/CSS/JS)的 HTML 跟 CSS 的部分,趁記憶還很新所以 4 月 9 號開始寫,大概3-4個小時完成吧,因為剛開始還犯了一個很笨的錯誤所以拖了一點時間。

九個方塊其實把一個刻出來之後複製九次就可以了,不過如何把九個方塊放到我想放的位置上讓我考慮了很久。

一開始想直接對九個方塊分別定位,但是這絕對不是最好的選擇,在不同螢幕大小上一定會跑掉,雖然作業沒有要求 RWD,我也還沒學完 RWD,不過有預感這絕對是最糟糕又最花時間的方式,所以被淘汰。

後來想到吳哲宇老師有教過 flexbox,可以利用 justify-content: centeralign-self: center 來左右跟上下置中,比起設定 margin-left: automargin-right: auto 來調整寬度還要準確方便(詳細 felxbox 的用法可參考:A Complete Guide to Flexbox),但又考慮到 flexbox 上下間距的調整比較不方便,或許因為我也還不熟悉的關係 flexbox 所以不太會應用。後來想到的方法是把九個方塊分成三列,然後三列各用一個 block 包住三個方塊,所以可以利用 flexbox 的置中方便性,也可以方便調整上下距離。