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 來到我們家,帶給我們三隻可愛的小貓貓,有她們的陪伴,讓每天的生活都充滿歡笑。





March 30, 2017

Sublime Text 3 套件安裝紀錄

這篇只是單純想記錄自己的 Sublime Text 3 安裝了哪些好用的套件,萬一哪一天需要重新安裝 Sublime 的時候可以回頭看,未來應該會持續發現好用的套件,也可以更新及寫下各個套件使用的小技巧,總之算是自己的 Sublime 小抄。

在網路上參考了許多前輩的教學文章,受益良多。其實我仍在摸索中,安裝的套件目前以前端網頁設計為主。

首先當然一定要安裝 Sublime Text 3,然後再安裝 Package Control,未來要安裝任何套件都要透過它。安裝步驟可以參考 The Will Will Web 保哥寫的文章,圖文並茂很詳細,我也有安裝不少個保哥推薦的套件。


March 27, 2017

Microsoft Virtual Academy - Introduction to Programming with Python

之前曾在 Codecademy 自學 Python 的課程,但是學到 60% 左右就開始很吃力,後期的練習幾乎都沒辦法自己想出答案,要一直看討論區上別人寫出的答案,但我非常不喜歡那樣,覺得好像在偷看別人考卷上的答案。所以就思考是否因為我的基礎不夠好,才會造成這樣的現象。這也是讓我想要去 Hahow 上 初心者的計概與coding火球術 的主要原因之一。

後來大惡魔推薦我看微軟上的 Python 課程 - Introduction to Programming with Python,這堂課就真的非常適合初學者,兩位老師教得很淺顯易懂,而且互動活潑,這樣的教學課程比起只有單一老師的教學又來的更生動有趣。

我個人最喜歡的部分是兩位老師分享自己在工作上遇到的一些情況,以及給學生們的提醒和建議。舉個例子,他們在課程開始就鼓勵大家在自己的程式碼裡面加入註解,以便日後自己回頭看的時候輕鬆了解當初為什麼那樣寫,也幫助其他人理解自己的程式碼。但是他們也強調,當註解是為了解釋自己所設的變數代表什麼的時候,反而是沒有必要的,需要做的事情應該是設字面上有意義的變數,而非用註解去解釋變數(例如比起用 x 作為變數,用 userAddress 才是更好的選擇)。

像是這樣的提醒跟建議真的很受用,而且可以幫助培養好的寫程式習慣。不過這樣的分享在很多自學的網站或單一老師授課的教學裡比較少,所以這堂課真的真的很推薦給 Python 初學者。雖說是給初學者的課程,但是寫程式的應該懂的基本都有教,而且重點是免費!

微軟的 Microsoft Virtual Academy 還有不少免費的課程,有興趣的人也可以看看~


March 3, 2017

用Scratch做小遊戲 - Little Tank 2

這是上次的 Little Tank 1 進階版,一整個大躍進 XD

首先在 Pinterest 上找了素材,然後用 Affinity Photo 去背(當然可以用任何繪圖/照片編輯軟體去背),接著上傳素材到 Scratch 上。

最困難的還是寫程式,這次跟上次不同的地方有:
1)有兩個背景
2)敵方小坦克會發射子彈
3)增加大魔王坦克,並在固定時間出現

其實第一點跟第三點不太難,最難的是第二點。敵方小坦克設定隨機出現,同時要發射子彈,我完全不知道要怎麼用 XD。後來跟大惡魔求救,原本要用清單去做,但是 Scratch 的清單功能比較陽春,無法指定物件,所以又換了別的方法。修修改改四、五次,到最後仍然有小bug,敵方小坦克跟子彈有時候不太同步,常常敵人還沒出現就出了子彈,或是敵人明明死了還有子彈跑出來 XD。

坦克遊戲就告一段落了,我也不知道為什麼想做坦克遊戲,哈哈,可能單純覺得射擊遊戲比較簡單,但做了之後才發現要考慮很多,沒有想像中的簡單。不過也有可能 Scratch 的功能本來就比較簡單,所以有些想要做出的效果都沒辦法做到。但是可以自己寫一個小遊戲還是蠻有成就感的 :)

Little Tank 2 on Scratch