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 23, 2017

卡士達泡芙

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

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

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

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



April 22, 2017

在 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,可惜是在我差不多都設定完成之後才看到。


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 17, 2017

巧克力戚風蛋糕

四年多前剛開始自學烘焙的時候,心裡想著我要是能把戚風蛋糕做成功就滿足了。後來當然沒有因為學會戚風蛋糕就因此滿足,有段時間天天烤不同的東西吃,甚至還自己養酵母做麵包,對烘焙很入迷。

最近比較少動手烤東西了,突然很想念巧克力戚風蛋糕,於是就動手烤一個來吃,然後拍照記錄一下。處理照片跟寫文章的時間比做蛋糕還多很多,真心佩服網路上那些美食部落客。這是我第一次寫烘焙教學文,平常都只會發一張完成照在 Instagram 跟 facebook。我沒受過專業的烘焙訓練,如果有錯還請多多指教。

這次的食譜是參考 Carol 自在生活:烘焙新手必備的第一本書 中第 230 頁的「超軟巧克力戚風蛋糕」,原食譜上有燙麵糊,我以前嘗試過但是不太成功,所以這次沒有使用燙麵法。我是 Carol 老師的書迷,手上大部分的烘焙書也是她的烘焙書。她的部落格上也有很多食譜可以挖寶,如果喜歡她也可以買她的書支持她~



April 14, 2017

在 Google Blogger 顯示程式碼

因為開始記錄寫作業的過程,作業裡面含有許多程式碼,想要特別區分出來,但是 Google Blogger 的後台並沒有支援,所以研究了一下要怎麼做。

不研究還好,研究後才發現事情沒那麼好解決,花了好多時間在上面(不過後來發現是因為自己疏忽而白白浪費時間)。

先說明一下為什麼當初會選擇 Google Blogger 寫部落格。
  • 比起其他的 Blog Service Provider (BSP),Google 的未來比較穩定,至少在短期內不會倒。如果部落格寫一段時間了,BSP 宣布經營不善,到時候要搬整個部落格真的好麻煩。
  • Google Blogger 是免費的,而且短期內也不會有需要付費的趨勢。
  • 頁面乾淨,不會強迫被放置自己非自願放置的廣告。
  • 可套用 Blogger 的版型,在後台微調字型大小跟顏色很容易,也可以自己改寫CSS。
不過缺點就是後台沒有方便顯示程式碼的功能。


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 的置中方便性,也可以方便調整上下距離。

Frontend Intermediate Course - 緣由

之前有提到在 Hahow 上面買了線上課程 初心者的計概與coding火球術,後來收到胡立老師寄給學生的 email,詢問我們上課的情形以及回饋。原本想要等我全部的課程影片看完才回 email,不過當時已經偷懶了好一陣子沒繼續上課,又想說胡立老師這麼認真,應該要好好寫 email 鼓勵一下他。

然後來回 email 了 3、4 次,後來胡立老師問我有沒有在學其他的程式語言,還有對他即將要開的免費程式線上課程有沒有興趣,只是這次的課程屬於前端網頁設計的加強課程,所以必須要有一些基礎,要懂 HTML、CSS、JavaScript。而我其實對那些都不懂,只有 3 年多前在 Codecademy 自學一點點 HTML/CSS,但幾乎都忘光光了。

April 4, 2017

三隻小貓三歲生日快樂

三年多前 Mary 流浪到我家後院,瘦得皮包骨吃著原本應該給小鳥吃的麵包,爸爸看她可憐買了貓飼料給她吃,然後就住在我家後院。當時 Mary 還不親人,所以即使發現她是母貓後也無法把她帶去結紮,終於在漸漸信任我們之後,我們才發現她已經懷孕了。

然後在三年前的四月四日,Mary 生下了兩灰一黑小貓貓,有著跟她一樣的白色襪子、白肚子、以及可愛的白下巴。

苦思要幫她們取什麼名字一個月後,才終於決定幫她們取名為 Sushi、Bento、Mochi,分別是壽司、便當、麻糬。雖然住在美國,但平常在家都跟貓貓講台語,而這三個單詞剛好是台語中的日語詞彙,所以有英文拼音,用台語叫起來很順口,要帶她們去獸醫看病也可以寫成英文,而且也很美味(?

從她們一出生就看著她們長大,看她們學習走路、學習跑跳、學用貓砂、學爬樹,經歷她們第一次去看獸醫,第一次生病、結紮,第一次幫她們餵藥、剪指甲。努力學習貓貓的營養學,了解如何看飼料跟罐頭的成分以及算出碳水化合物,成為鏟屎官及陪睡員,要處理便便跟嘔吐物,有時還要處理她們從外面帶回來的「禮物」。

雖然她們頑皮、任性、傲嬌,但是撒嬌起來又可愛的不得了。無時無刻都想吃東西,像小豬豬一樣,但看她們吃飯的樣子覺得很滿足。她們生病時為她們擔心,看到她們安詳的睡臉及聽到她們的呼嚕聲就會覺得被療癒了,她們是幸福的貓貓,而我也是幸福的貓奴。

去年 11 月 30 日 Mary 去當小天使了,心中有許多不捨。感謝 Mary 來到我們家,帶給我們三隻可愛的小貓貓,有她們的陪伴,讓每天的生活都充滿歡笑。