test
2019年1月21日 星期一
JavaScript 進階學習之路
1月開始，報名了彭彭老師的 JavaScript 進階課程。
整體來說，進階課程的重點已不是放在程式語言的邏輯本身，也不是在於如何自己建構出一個網站，而是在於如何運用線上的豐富套件資源，為你的網站增加各種功能和外掛連結。也可以這樣說，現在的網站前端應用，已經從過去那種工匠式的從無到有、親手打造一個頁面，發展到現在如何掌握最新、最有趣的功能套件，並把它們整合到自己的網頁上。
從老師教授的課程，可知工程師目前常用的前端開發工具主要有幾種：
1. Google 提供的各種強大套件，包含地圖、資料視覺化、第三方登入等等。(但最近發現有些功能開始收費，才知道估狗以前是多麼佛心 QQ)
2. Facebook Developer。臉書和估狗一樣，本身就擁有完備功能和廣大用戶群，和一般網頁的整合相當常見、功能也很多。
3. Firebase。主要是後端資料庫的建置，這也是我自己相當感興趣的部分。
儘管網路上提供這麼方便的套件工具，但由於個人網站的需求不同、也有各自想呈現出來的特殊效果，因此一定程度的程式設計能力還是需要的，無法全部都用複製貼上的方式，尤其在串連不同工具的過程中，更發現滿吃基本的程式邏輯。
另外還有很多可利用的線上工具，但這幾項應該是目前最常見、也公認最為穩定安全的。以開發者的角度來看，沒有比穩定運作更重要的事情，功能倒還在其次；而從使用者角度來看，個人資料安全則是首要考量，畢竟在這個甚麼資料都上傳雲端的年代，使用估狗或臉書(?) 可能還是比其他不知名小網站有保障一點。
在練習使用這些線上套件的過程中，發現最困難的事情是閱讀官方使用說明 XD 不過正如老師所說的，閱讀使用說明乍看是最慢也最笨的方法，卻是最實際也最有效的方法，蹲馬步紮基本功，沒有捷徑。
寫到這裡，不禁回想自己學習程式語言的動機。若是要做為職業，下苦功就是必須；若是當作興趣消遣，則上上課、偶爾 coding 自己的小網站也是可以。
或許終究得決定一條路，不然怎麼做也只能是半調子。
整體來說，進階課程的重點已不是放在程式語言的邏輯本身，也不是在於如何自己建構出一個網站，而是在於如何運用線上的豐富套件資源，為你的網站增加各種功能和外掛連結。也可以這樣說，現在的網站前端應用，已經從過去那種工匠式的從無到有、親手打造一個頁面，發展到現在如何掌握最新、最有趣的功能套件，並把它們整合到自己的網頁上。
從老師教授的課程，可知工程師目前常用的前端開發工具主要有幾種：
1. Google 提供的各種強大套件，包含地圖、資料視覺化、第三方登入等等。(但最近發現有些功能開始收費，才知道估狗以前是多麼佛心 QQ)
2. Facebook Developer。臉書和估狗一樣，本身就擁有完備功能和廣大用戶群，和一般網頁的整合相當常見、功能也很多。
3. Firebase。主要是後端資料庫的建置，這也是我自己相當感興趣的部分。
儘管網路上提供這麼方便的套件工具，但由於個人網站的需求不同、也有各自想呈現出來的特殊效果，因此一定程度的程式設計能力還是需要的，無法全部都用複製貼上的方式，尤其在串連不同工具的過程中，更發現滿吃基本的程式邏輯。
另外還有很多可利用的線上工具，但這幾項應該是目前最常見、也公認最為穩定安全的。以開發者的角度來看，沒有比穩定運作更重要的事情，功能倒還在其次；而從使用者角度來看，個人資料安全則是首要考量，畢竟在這個甚麼資料都上傳雲端的年代，使用估狗或臉書(?) 可能還是比其他不知名小網站有保障一點。
在練習使用這些線上套件的過程中，發現最困難的事情是閱讀官方使用說明 XD 不過正如老師所說的，閱讀使用說明乍看是最慢也最笨的方法，卻是最實際也最有效的方法，蹲馬步紮基本功，沒有捷徑。
寫到這裡，不禁回想自己學習程式語言的動機。若是要做為職業，下苦功就是必須；若是當作興趣消遣，則上上課、偶爾 coding 自己的小網站也是可以。
或許終究得決定一條路，不然怎麼做也只能是半調子。
2019年1月1日 星期二
2019 程式語言新希望
從2018年的3月開始接觸程式語言，轉眼也來到了2019。
昨天和工讀生們吃飯，細數自己在2018發生的6件事，我自己想到的第一個是學習程式語言。去年的此時，我還是從來沒有寫過任何一行程式的超級外行人，而儘管學習的過程彷彿像在泥沼裡慢慢爬行，現在卻也能寫出一個自己的小網站，真是始料未及。
還記得12月30日那天，一個人窩在咖啡店裡寫JS，想要試寫一個responsive web，胡亂弄了一整個下午，才勉勉強強用media讓頁面可以隨視窗大小改變編排，只是一想到專業工程師也許5分鐘就能做出這個功能，就感到沮喪氣惱，也不禁開始懷疑自己放棄過去累積、現在才要投入一個全新領域，到底值不值得。
晚點跟好友講了這件事，好友也是剛從新聞業轉向另個完全陌生的金融領域，她倒是很樂觀地表示，科技業很大、位置很多，一定會讓我找到一個能夠將過去所學和程式語言結合在一起的職務，因此無須煩惱。好友的話稍稍撫平了不安的感覺。
而最近也開始慢慢關注工程師職業所需的技能，思忖自己是否符合、又需要再補足什麼部分。目前看到需要JS的職位不少，但通常會再配合其他相關的語言能力，因此1月起又報了兩堂彭彭老師的課程，包括前端的JS進階班、node.js和firebase的全端課程，一塊一塊地把程式語言能力補起來。
要學的東西還很多很多，期許2019的自己已踏上程式工程師這條路，也別忘了當初許下的10年藍圖：
近 3 - 5 年：以成為專業軟體工程師為目標，持續精進程式語言技術和知識。
第 6 - 7 年：至國外研讀資訊相關的研究所，領域以人機互動或資訊行為為主。
第 8 - 9 年：於國外資訊相關的產業就職。
第 10 年 - ：10 年後的事情無法預測，但希望大體延上述的脈絡進行。
昨天和工讀生們吃飯，細數自己在2018發生的6件事，我自己想到的第一個是學習程式語言。去年的此時，我還是從來沒有寫過任何一行程式的超級外行人，而儘管學習的過程彷彿像在泥沼裡慢慢爬行，現在卻也能寫出一個自己的小網站，真是始料未及。
還記得12月30日那天，一個人窩在咖啡店裡寫JS，想要試寫一個responsive web，胡亂弄了一整個下午，才勉勉強強用media讓頁面可以隨視窗大小改變編排，只是一想到專業工程師也許5分鐘就能做出這個功能，就感到沮喪氣惱，也不禁開始懷疑自己放棄過去累積、現在才要投入一個全新領域，到底值不值得。
晚點跟好友講了這件事，好友也是剛從新聞業轉向另個完全陌生的金融領域，她倒是很樂觀地表示，科技業很大、位置很多，一定會讓我找到一個能夠將過去所學和程式語言結合在一起的職務，因此無須煩惱。好友的話稍稍撫平了不安的感覺。
而最近也開始慢慢關注工程師職業所需的技能，思忖自己是否符合、又需要再補足什麼部分。目前看到需要JS的職位不少，但通常會再配合其他相關的語言能力，因此1月起又報了兩堂彭彭老師的課程，包括前端的JS進階班、node.js和firebase的全端課程，一塊一塊地把程式語言能力補起來。
要學的東西還很多很多，期許2019的自己已踏上程式工程師這條路，也別忘了當初許下的10年藍圖：
近 3 - 5 年：以成為專業軟體工程師為目標，持續精進程式語言技術和知識。
第 6 - 7 年：至國外研讀資訊相關的研究所，領域以人機互動或資訊行為為主。
第 8 - 9 年：於國外資訊相關的產業就職。
第 10 年 - ：10 年後的事情無法預測，但希望大體延上述的脈絡進行。
2018年12月25日 星期二
未完待續的JavaScript
昨天結束了兩個多月的 JavaScript 課程，完成網頁前端頁面初探。
整體來說，一開始接觸前端，覺得是工匠式的工作，網頁設計師給個樣版，工程師盡可能仿做出100%的相似度；但後期發現前端要做得好，重點還是在於「動態」的設計，而動態設計就需要很好的程式語言邏輯，如何將想呈現的效果拆解為電腦運作的語法，這才是一決高下的關鍵。
綜合來說，我個人覺得一個好的JavaScript程式設計師，要具備清晰的邏輯、創意的思考方式、以及不錯的美學基底。不是一份簡單的工作。
而此次課程的小插曲是，申請了AppWorks School的課程。儘管最後仍是婉謝了校方的邀請，但也幸虧有這個插曲，讓我完成了個人網頁 ，並好好檢視這半年來的學習歷程，覺得自己真的是對程式語言這個領域頗有興趣，未來也希望繼續朝此方向前進。
寫程式語言的過程著實很燒腦，自己也不是那種半夜想到一個idea就跳起來coding的狂人，但寫程式一直給我一種安穩合理的感覺，而且常常讓我寫到忘了時間流逝。
辦理這次的課程，其實是個任性的決定，卻讓我有滿滿的收穫。很謝謝這次邀請的彭彭老師，不只指導我程式語言的撰寫、也像是個有歷練的好朋友，給了我很多想法和建議，未來希望也能再跟著老師學習。
整體來說，一開始接觸前端，覺得是工匠式的工作，網頁設計師給個樣版，工程師盡可能仿做出100%的相似度；但後期發現前端要做得好，重點還是在於「動態」的設計，而動態設計就需要很好的程式語言邏輯，如何將想呈現的效果拆解為電腦運作的語法，這才是一決高下的關鍵。
綜合來說，我個人覺得一個好的JavaScript程式設計師，要具備清晰的邏輯、創意的思考方式、以及不錯的美學基底。不是一份簡單的工作。
而此次課程的小插曲是，申請了AppWorks School的課程。儘管最後仍是婉謝了校方的邀請，但也幸虧有這個插曲，讓我完成了個人網頁 ，並好好檢視這半年來的學習歷程，覺得自己真的是對程式語言這個領域頗有興趣，未來也希望繼續朝此方向前進。
寫程式語言的過程著實很燒腦，自己也不是那種半夜想到一個idea就跳起來coding的狂人，但寫程式一直給我一種安穩合理的感覺，而且常常讓我寫到忘了時間流逝。
辦理這次的課程，其實是個任性的決定，卻讓我有滿滿的收穫。很謝謝這次邀請的彭彭老師，不只指導我程式語言的撰寫、也像是個有歷練的好朋友，給了我很多想法和建議，未來希望也能再跟著老師學習。
2018年11月23日 星期五
關於語法的兩個新體悟
學了一個月的 JavaScript，可能因為有 Python 的底子，整體而言還算能上手。彭彭老師在教課時提到兩件事，我漸漸可以體會。
第一件事，程式語言要能上手，就是要學著用簡單的方式想事情。人腦很聰明、直覺的運作很快，但電腦的做法是把事情拆解成小塊小塊，再用土法煉鋼但飛快的速度組裝起來。
以某次課堂的作業為例：「給定一個正整數，求出最接近其平方根的整數。」以 23 這個正整數為例，直接用大腦想的話，答案轉瞬就跑出來了。但電腦就是要求你一步一步地將腦中瞬間浮現答案的過程好好寫下來，個人覺得非常接近建構式數學的邏輯。所以程式語言的解法就是，先從 1 開始做平方，逐步檢視哪 2 個數字的平方數值剛好把 23 夾住，再計算出 23 跟這 2 個數字平方哪一邊的差距較小，答案就是那個數字（以這題為例，23 會落在 4 的平方 16和 5 的平方 25 之間，而 23 較接近 25，因此答案就是 5 ）
不知道為甚麼，我自己很欣賞這種樸實的推論過程，用簡單清楚的邏輯想事情，這樣很好。附上解題的程式語言如下：
第二件事情是，寫程式語言到後來，其實比較像寫作文。
這件事聽起來有點詭異，我最初在刷題庫時覺得程式語言就是不斷計算各種數學題目，但後來真的開始寫自己的個人網站，寫到第 500 行以後，才發現任何修改和增刪都宛如大海撈針，命名、順序、架構的重要從此浮現出來。在各種功能函式已經臻於成熟的今天，一般工程師最需具備的並非頂尖演算法邏輯，而是「讓別人甚至是明天的自己看懂現在寫的 code」。
養成良好的 coding 習慣，就從今天開始，尤其是命名。
(下方是幾個這次寫個人網站的 class 範例，我總共開了 26 個 class，無法想像專業商用網站的數量有多驚人)
第一件事，程式語言要能上手，就是要學著用簡單的方式想事情。人腦很聰明、直覺的運作很快，但電腦的做法是把事情拆解成小塊小塊，再用土法煉鋼但飛快的速度組裝起來。
以某次課堂的作業為例：「給定一個正整數，求出最接近其平方根的整數。」以 23 這個正整數為例，直接用大腦想的話，答案轉瞬就跑出來了。但電腦就是要求你一步一步地將腦中瞬間浮現答案的過程好好寫下來，個人覺得非常接近建構式數學的邏輯。所以程式語言的解法就是，先從 1 開始做平方，逐步檢視哪 2 個數字的平方數值剛好把 23 夾住，再計算出 23 跟這 2 個數字平方哪一邊的差距較小，答案就是那個數字（以這題為例，23 會落在 4 的平方 16和 5 的平方 25 之間，而 23 較接近 25，因此答案就是 5 ）
不知道為甚麼，我自己很欣賞這種樸實的推論過程，用簡單清楚的邏輯想事情，這樣很好。附上解題的程式語言如下：
第二件事情是，寫程式語言到後來，其實比較像寫作文。
這件事聽起來有點詭異，我最初在刷題庫時覺得程式語言就是不斷計算各種數學題目，但後來真的開始寫自己的個人網站，寫到第 500 行以後，才發現任何修改和增刪都宛如大海撈針，命名、順序、架構的重要從此浮現出來。在各種功能函式已經臻於成熟的今天，一般工程師最需具備的並非頂尖演算法邏輯，而是「讓別人甚至是明天的自己看懂現在寫的 code」。
養成良好的 coding 習慣，就從今天開始，尤其是命名。
(下方是幾個這次寫個人網站的 class 範例，我總共開了 26 個 class，無法想像專業商用網站的數量有多驚人)
2018年11月5日 星期一
JavaScript 菜鳥課程1&2: HTML&CSS
自學 Python 一陣子，也自己在外頭上了不少課，感到程式語言是一種重要且也用的工具，很希望自己的學生們也有機會接觸，於是我在自己可動用的經費項目下，籌辦了一堂程式語言課程入門班，從基本的語法開始教起。
一開始原本想教 Python，但跟授課老師深入討論後，決定以 JavaScript 做為教學語言。選擇 JavaScript 做為入門語言有幾個因素：
這門課重質不重量，總共只收了 8 位學生。
--
第一堂課，從基礎的 HTML 和 CSS 開始說起。這堂課補足了很多我先前上爬蟲專班時的基本知識，上起來是津津有味。補記幾個課堂筆記如下：
一開始原本想教 Python，但跟授課老師深入討論後，決定以 JavaScript 做為教學語言。選擇 JavaScript 做為入門語言有幾個因素：
- 門檻較低，語法和 Python 一樣相對平易（相較於難度極高的 C家族）
- JavaScript 是專寫前端網頁，可以直接看到成果，對初學者來說成就感較高
- 個人基於私心想了解前端語法 （因為之前已學過後端的 Python XD）
這門課重質不重量，總共只收了 8 位學生。
--
第一堂課，從基礎的 HTML 和 CSS 開始說起。這堂課補足了很多我先前上爬蟲專班時的基本知識，上起來是津津有味。補記幾個課堂筆記如下：
- 網頁的 HTML 結構必然包含html、head、body 這3項大標籤，head 決定網頁的編碼和頁面名稱，body 則是主要內容+結構。
- html 就可做到基本的網頁編排，但現在大多會搭配CSS做美編和各種調整。
- 所有的標籤都是 1 組 2 個，前後包夾，一層又一層，通常是外層標籤決定內容呈現的大方向，內層標籤再做各種微調。
- 早期網頁都是用 table(表格) 來做排版。table 的寫法是用 tr(列) 包住 td (欄)，不是很直觀的概念，結構非常制式化、沒有彈性，稍有修改就會牽一髮動全身
範例：
- 現在排版多習慣用 div，類似區塊的概念，div 裡面再放 div，形成一層層的巢狀結構。
- 在過去，並排且左右置中是一項非常挑戰工程師的任務，但現在用CSS 的 display flex 功能就可以很輕鬆解決這個難題。
- 「換行」在程式語言中沒有意義，但用某些語法（例如div）後會有自動換行的功能。
- class是一套屬性設定，可以預先設好特定的字體、顏色、排列方式、預留空間等等項目，並為之命名，套用到某些div上，這些div就會呈現出同樣的編排模式，是一種非常方便且聰明的做法。
關於網頁的基本排版html 和css 大概上了兩堂課，回家作業是要摹寫出 Facebook 的登入頁面，就是下方這個大家都很熟悉的畫面，頗有挑戰性，寫好之後再與大家分享。
2018年11月1日 星期四
[補記]：8月份臺大資工訓練班「Python網路爬蟲實戰」
繼 6 月時上過用 Python 撈資料的課程後，8 月份又報名了臺大資工訓練班的「Python網路爬蟲實戰」，想了解更多 Python 的實際運用方式。
實際上了第一堂課，發現課程其實很需要 HTML 和 CSS 的基礎，但這兩項我都沒有學過，只好硬著頭皮記下那些標籤。（事後補學了 HTML 和 CSS，才更清楚爬蟲的原理）
上了一陣子，課程內容大致可歸類成 4 個部分：
實際上了第一堂課，發現課程其實很需要 HTML 和 CSS 的基礎，但這兩項我都沒有學過，只好硬著頭皮記下那些標籤。（事後補學了 HTML 和 CSS，才更清楚爬蟲的原理）
上了一陣子，課程內容大致可歸類成 4 個部分：
- 網頁原始碼的判讀與搜尋關鍵標籤
決定要爬的資料並找出其所在位置，這也是為何要理解 HTML 和 CSS 的原因。另外還有各種「選擇器」的運用，可以協助使用者做各種類別的選擇。（但選擇器的部分我其實學得不好，大部分還是直接複製網頁原始碼的選擇路徑） - Python 套件：PyQuery 的教學與運用
聽老師的介紹，應該是目前滿熱門的爬蟲套件，主要做靜態網頁的資料抓取和解譯。 - Python 爬蟲套件：Selenium 的教學與運用
有很多小功能，能做動態網頁的資料擷取，缺點是沒辦法做解譯，還是得靠 PyQuery。 - 爬蟲程式的延伸應用
除了把資料爬下來之外，老師也另外講授爬蟲的一些應用，例如網路機器人的原理、破解網路驗證碼的方式。
整體而言，上完 10 個小時的課後，我對爬蟲的原理確實有所了解。由於老師在課堂上示範的頁面是他特製的，結構簡單嚴謹、也沒有複雜的呈現、動畫、廣告、嵌入等等，所以在課堂上大家都爬得相當順利。只是，現實世界的網頁技術日新月異，不但頁面結構更複雜多層、變化更多，甚至也有不少反爬蟲的機制，例如 Cookie（不過，道高一尺、魔高一丈，老師也有教大家怎麼破解Cookie XD）所以認真要爬下自己想要且有用的資料，並不輕鬆。
這次課程最後，我也自製了一個小專案「電影爬爬看」，主要是將當期播映的所有電影名稱、評分、簡介、場次等內容都抓下來，看到資料跑出來的那一刻著實滿有成就感的~
訂閱：
文章 (Atom)