6 months ago

Overview

今年有幸受到5xruby提議是否前往參加員工旅遊順便參加RubyKaigi 2016,雖然在近期經濟壓力有些大的情況下要決定去國外撒錢是個很艱苦的決定(算一算差不多是一年份的研究經費,台灣的研究生真的是...艱苦度日),但既然機會都來了,也該是時候去國外參加第一次的conference了。

這次的行程總共有九天,Kaigi的部分是在出境日的前三天,而前面五天左右的時間則是在京阪神自由行。由於我只來過日本兩次,而且是第一次到關西地區,天生路癡的我只好跟著其他五倍的同事們的行程走(沒想到五倍的大家都是日本通,真是太幸運了!)。

(以下的遊記主要紀錄前五天的日本自由行。至於後三天的Kaigi由於內容偏技術,加上我自己對技術內容的表達能力太差,就不詳述囉。)

第一天:桃機、關西空港、大阪

第一天的飛機是早上九點四十,大概七點左右就要到桃機的櫃台check-in,但由於我目前租屋處的地方太過於偏僻,不方便當天直接過去,所幸龍哥願意收留我一個晚上,讓我不必擔心趕不上飛機的問題。後來不知道甚麼原因班機延遲,導致比預期的時間還要晚抵達。但還好第一天的行程主要是大阪市區自由行動,沒有行程壓力。

經過短暫的飛行後,終於抵達關西空港。身為一個寶可夢玩家,既然到了發源地,當然就是要好好朝聖一下囉!於是下飛機後第一件事情就是先佔領關西空港的寶可夢道館(一個插旗的概念,即使很快就被其他旅客打下來了)。之後我們便搭乘特急列車前往大阪市區。
(在車站中還偶然看到卡比獸!但由於被同事警告敢去抓就丟包,我這路癡只好忍痛割愛了)


既然到了市區,再加上自由行動,免不了的就是血拚囉!抵達日本橋附近的旅館安置好行李後,大家就拆成數個小組自行前往附近的商圈逛逛&吃晚餐。既然到了日本,就要來吃道地的日本美食-拉麵。在同事的帶領下,我們吃了傳說中的一蘭拉麵。拉麵本身的湯非常濃,就如之前在東京吃過的拉麵一樣。味道很香,但也很鹹,不過我想這就是正統的拉麵吧?這家店除了麵本身以外,相當有特色的就是它的用餐區,有別於一般的吧檯,一蘭的吧檯是有「隔間」的。在隔間中享用美味的拉麵,有種與世隔絕的感覺,別有一般風味。(我絕對不會說我已經習慣當邊緣人了QAQ)

用完晚餐後,就是血拚時間囉!雖然只是第一天,但由於之後的觀光行程很滿,可能沒有很多時間待在市區行動,因此這一天晚上就把所有該買的藥品(主要是幫家人買,然後還有最重要的貼腳用痠痛藥布)和食物都買齊。作為飯後點心,我們也到了「一番搾り」喝啤酒冰。雖然我本身並不喜歡啤酒,但作為初次體驗啤酒冰也不錯。


今天剩下的時間我們到了附近的「空中庭園」大樓上看夜景。雖然要付一定金額的入場費(就如去東京的晴空塔一樣),但既然都來了,花一點錢也是理所當然吧(誤)。不過相較於夜景,在這個「空中庭園」的展覽室中,寫了很多跟未來太空都市相關的構想與計畫,包刮這座觀景台本身的設計也是在模擬未來太空都市的一部份,這倒是讓我開了眼界。順帶一提,觀景台內有一個小小的抽籤區:「空中庭院大明神」,據說是與戀愛成就有關的。由於這邊觀光客太多,籤文還是多國語言,果然很國際化!



等等!所以說那個抽籤結果呢?只能說某種程度上很佩服日本的抽籤,果然我還是等下輩子吧...(默)

第二天:USJ:Uinversal Studio Japan

來USJ算是來日本最大的誘因之一。雖然我知道我自己並不是個非常適合刺激的遊樂設施的人(心臟很小),但USJ有別於其他的遊樂園,USJ在主題樂園的搭建上非常成功,讓遊客彷彿置身於那個電影或動畫的世界裡頭一般。

為了要搭上傳說中的遊樂設施:飛天翼龍,這一天大家非常早起就為了趕緊進去排隊。沒想到一路上的人潮多到嚇人,原本害怕迷路的我,幾乎只要跟著人群走就可以抵達USJ,果然USJ的魅力不同凡響。抵達USJ後,首先出現在眼前的就是令人印象深刻的大地球。比起一個固定的看板,這個巨型會旋轉的地球果然是個非常震撼的招牌,於是大家都興奮的跑上前拍照留念,當然也包刮我。

在經過非常誇張的排隊入園人潮後,我們終於進入了USJ園區。就如我前面所寫的,USJ的賣點在主題營造上。一進入園區就彷彿來到另一個世界(雖然周遭誇張的人潮有點破壞了這美好的幻想...)。但我們沒有多餘的時間在欣賞這些,在大家成功入園後,我們便一路衝到飛天翼龍的搭乘處排隊。由於我們沒有購買飛天翼龍的免排票(比基本門票還貴兩倍就算了,還被搶購一空),只好用時間來換取。但很可惜的是,我們最後並沒有成功搭上飛天翼龍。因為我們購買的哈利波特園區有入場時間與設施搭乘時間限制,依照規定我們必須要在指定的時間入場搭乘。而飛天翼龍的排隊時間超出預期,在確保不浪費快速通關票卷的前提下,我們只好放棄排了兩個多小時的隊伍。

雖然放棄排隊令人沮喪,但哈利波特園區的驚豔讓我們忘卻剛才無趣的排隊心情。為了要營造魔法世界的感覺,整個哈利波特園區被重重的森林圍繞。在穿越森林的過程中伴隨著各式熟悉的景物(包括榮恩弄壞的那台自動車),漸漸讓人忘記科技世界的感覺。

抵達園區大門後,第一個映入眼簾的就是霍格華茲特快車,象徵著抵達魔法世界。園區內的各式建築都模仿了哈利波特電影中的風格,加上遠方的霍格華茲城堡,整個氣氛令人陶醉。我們藉著快速通關票券前往搭乘園區內的賣點設施:哈利波特4D電影「禁忌之旅」。這個設施會帶著觀眾隨著主角哈利波特在魔法世界裡探險,加上4D體感設施,讓我們彷彿騎著魔法掃帚飛行,相當精彩!





結束了哈利波特以後,我們也前往其他有快速通關的設施,包含蜘蛛人4D電影、大白鯊遊湖、小小兵園區等等。到最後,大家走了一整天沒體力後,便找了個咖啡廳坐下來耍廢,並分享著自己的戰利品(應該說是腦波弱的敗家品),一直混時間到晚上再次進入哈利波特園區看夜景。晚上的園區別有一番風味,沒有太多現代照明的哈利波特園區帶有魔法城的神祕感,大家在園區內除了欣賞夜景之外,也到處尋找魔法陣施法(紀念品店有販售魔法杖,而在園區內有特別設計的魔法陣可以偵測動作來產生魔法特效)。就這樣在園區內閒晃,一直到閉園時間到,我們才依依不捨地離開這個(消耗掉1/3以上財產的)世界。




第三天:清水寺、京都女子大學、神戶Meet up

這一天的行程不再是大家一起行動,而是拆成A與B兩組。會這麼做是因為早上有一場企業參訪,而該公司的場地小,沒辦法容納我們全員,因此決議拆成兩組前往不同的地方,下午再一起到京都女子大學會合並進行往後的交流。我是走B組的行程,因此早上變成前往清水寺觀光。但很不幸的那一天有點下雨,導致我們在清水寺有不少時間是在屋簷下躲雨,但仍是不影響遊興,也幸好這個雨沒有很大且後來有停。最後把整個山頭走一遍後,沿著商店街邊逛邊血拚下山,然後前往京都女子大學與A組會合。


這次來到京都女子大學的主要目的是參訪交流,而我們B組從清水寺徒步前往京都女子大學先行抵達後,卻發現我們這一組人沒有會講日文的夥伴而導致無法與大學門口的警衛溝通。在無法取得訪客證明的情況下,只好在那邊等候A組前來會合。不幸的是,屋漏偏逢連夜雨,在等待的時候居然開始下起雨來,我們只好躲在為數不多的折疊傘下苦苦等候(對不起我就是那個忘記帶傘的人QQ)。經過漫長的等候,A組人馬終於透過公車與我們會合,並順利取得訪客證進入大學。

進入大學後,首先我們先與協助安排這次交流的大學老師會合,老師表示自己也是日本當地.rb活動的招集人。老闆們貌似因為某種場合認識了她們,因而有了這次與她們學生的交流。但有點讓我訝異的是,對方學生的數量很少,幾乎只有我們公司派出的人馬的1/3,這讓在小間教室的我們顯得相當突兀(好像把這裡當家似的)。回到重點,這次交流的形式是採雙方互相推派代表上台進行lighting talk,對方的講題主要是與Ruby程式語言本身的學習與教學有關,而我們公司的主題則是RSpec和CSS(認真覺得會用這兩個工具的開發者都很厲害!)。

交流的最後是茶會點心與自由交談的時間。在品嘗贊助商提供的點心與好茶的同時,也和到場的老師與學生們進行自由交談並並趁機塞名片給對方(除了老師以外,學生好像都沒有準備名片來交換的樣子,但後來想想這好像很正常XD)。可惜交流的時間並不長,由於B組在接下來還有另一個交流會要去,因此先行離開了大學,留下A組繼續與她們交流。

接下來的行程是前往神戶與老闆們認識的關西Ruby圈開發者進行meet up。由於時間似乎有點耽誤到,因此我們很果斷的砸大錢搭上新幹線。這也是我第一次搭新幹線,原本以為可以看到甚麼特殊的內裝,沒想到整台列車從裡到外根本就和台灣高鐵沒兩樣,只是文字換成日文而已。後來經過朋友們的解釋,才知道原來台灣高鐵就是從日本新幹線抄過去的,難怪台灣高鐵又稱台灣新幹線!

奔波之下終於趕到位於神戶的meet up地點。這裡似乎是一個co-working space,氣氛相當不錯,而其他要參與這個聚會的Rubyist都已經抵達並準備好餐點了。大家就緒之後,便開始自我介紹。有點可惜的是,前幾位都是用日文做介紹,使得我們必須透過同事翻譯才有辦法了解他們說了甚麼。令人意外的是,他們其中居然有一位女設計師是台灣人,貌似是跟隨著日本丈夫依親為日本籍的樣子。藉由她的親切的中文介紹,我們才能夠更加清楚的了解對方。介紹完畢後,就是自由用餐時間與交流時間。比起剛才的大學生,這裡的與會者都是業界上的人士,因此溝通起來比較沒有那麼多障礙,也很順利地交換了雙方的名片。在歡笑中,結束了這場輕鬆的Ruby聚會。

結束了Meetup以後,還剩下一點時間。B組的大夥決定前往附近朝聖一下Fate系列中出現的神戶大橋。其實奔波一整天之後,大夥都已經沒甚麼體力再走了,只有我與其他三位宅宅同事組成的傳說中五倍F4因為充滿了宅魔力而健步如飛。在踩踏神戶大橋欣賞夜景的同時,大家也不忘攻打到館與抓寶可夢(在橋上遇到化石盔),真的是很會利用時間!短暫的停留後,便回到旅館休息了。

第四天:京都、嵐山、天龍寺、足湯

由於Kaigi的舉辦地點是京都,因此我們旅程的後半段便住在京都會場附近旅館。今天我們的任務就是先整理行李並從大阪出發到位於京都烏丸四条的旅館下塌。抵達旅館並安置好行李後,下午的時間便是前往嵐山。除了部分同事有自己的規劃外,其餘人大多是跟著團隊走。

抵達嵐山後,公司中的女孩們還決定要一起去租和服上山拍照(由於男生們一致認為男性和服沒有穿的價值,因此就沒浪費錢了)。就這樣我們在山腳下分成數團(和服團 & 數個Non-和服團)各自上山。由於當天有出太陽,大家忍不住天氣熱,就在山腳下先吃冰淇淋消消暑。這邊有名的聽說是豆漿冰淇淋,我也買了一支,很香很濃很好吃,就怕吃下去的都是化學添加物而已。

上了嵐山後,我們首先經過了竹林,以及一些小寺廟。沒想到遇到疑似來自台灣的歐巴桑觀光團,破壞了整個氣氛。於是我們加緊腳步避開後,決定前往號稱為世界文化遺產的天龍寺。這間寺廟不簡單,除了有非常漂亮的大庭園以外,收費還有兩段制(只看庭園的基礎門票 & 進寺廟內部的追加費用)。不過這個寺廟的內部真的是非常的漂亮,從內往外看庭院更是美的沒話說。在廟中庭休息躲雨的同時,我和同事還忙著進化寶可夢(伊布),真是一群非常愜意的訓練家啊!



離開了天龍寺,我們和其他團的同事們會合,其中一群人打算去泡湯,而我與其他沒有想要泡湯的就轉往嵐山車站附近逛逛。不知道是不是山上的關係,這時後開始飄雨了。微冷的天氣讓我有點後悔沒去泡湯。但幸運的是,嵐山車站的月台有提供200日圓的泡腳溫泉,滿足我想泡湯的心情(雖然只有腳)。

時間過得很快,一轉眼就天黑了。由於我們還得回旅館整理行李,因此我們今天的行程也就到此告一段落。

第五天:姬路城、3C產品血拚、大阪燒

這一天算是自由活動時間。由於老闆們要去找客戶,就沒有特別安排今天的行程。但還好我們還是有許多很會旅遊的同事可以幫忙安排行程,讓我這個路癡可以不用擔心。在經過一番討論後,我們決定前往姬路城。

姬路城離京都似乎有點距離,我們搭了蠻久的電車才抵達。抵達姬路市後,一出站就可以看到遠方的姬路城。原本擔心出車站之後還要花時間找路,看來完全沒有這個問題了!在前往姬路城的途中,路邊也有許多與姬路城相關的擺飾,例如姬路城頂上的雙魚雕像。我們就這樣一路走過姬路城的庭院,並買票進入城中。



還沒進天守閣,光是在外圍的通道中走動,就讓我有種在體驗實境戰國無雙(之類的遊戲)的感覺。周圍的場景就是古代日本城,在狹小的通道中穿梭,真的是讓我非常興奮。進入天守閣後,由於有參觀動線的限制,我們就一路跟隨著觀光人群從天守閣地下室逛到天守閣的六樓。令人印象最深刻的,大概就是天守閣中的樓梯了吧。樓梯很窄就算了,還非常的陡,看起來至少有70度。爬梯時很怕一個閃神就摔下去了,真想不透古日本人為什麼要搭建這種妨礙自己逃跑的階梯(不過換個角度想,這樣的階梯也能防止敵人快速攻進來就是了,畢竟一次只能有一個人爬上來,還不能爬太快)。在天守閣的頂端有一個小小的神壇,我們參拜完並稍作休息之後,便隨著觀光人潮下樓了。




離開姬路城後,我們決定去京都的Bic Camera逛3C產品。過去一直沒有使用行動電源的我,終於在這裡受不了抓寶抓到沒電的感覺,因此買了一個日本製的行動電源(雖然只有3100mAh且比起台灣買還要貴上許多,但很輕方便攜帶,重點是應該比較不會爆炸)。此外,身為機械鍵盤的愛用者,每次來到這種3C商場當然必逛奢侈鍵盤區(區域分類上真的寫Luxury Keyboards),雖然每支的定價都是5位數,但按鍵的觸感真的是其他一般鍵盤所不能比的。而同行的同事剛好有購買鍵盤的意思,但似乎還在猶豫不決。在其他機械鍵盤愛用者的推坑下,也成功讓她成為機械鍵盤教的一員。

逛完3C產品後,才發覺我們沒有吃晚餐。於是我們便到這附近一間還算有名的大阪燒「鶴橋風月」體驗一下真正的日本大阪燒(雖然我們人已經在京都了)。這間大阪燒比起其他一般的餐廳,它是直接在餐桌的鐵盤上現做,讓我們可以一睹大阪燒的製作過程。在吃完美味的大阪燒以後,大夥便回飯店休息,準備早起參加明天的Kaigi。


第六天:RubyKaigi Day 1、Offical Party

Kaigi的第一天比較特別,因為這天有同事要上台當講者。雖然內容依然是深奧到我不太能理解,不過看到自己認識的人上台真的是有種莫名的興奮感,也替他感到驕傲。

(其餘Kaigi內容...省略)

今天除了聽講之外,而今天最重要的就是晚上的Offical Party了。我很少接觸外國人,也因此英文能力很差。一開始我幾乎不太敢隨意與其他的與會者攀談,但喝了幾杯酒以後,似乎大家也開始放個開了。就算有語言障礙(日本人的英文...大家都知道的),我也搭訕(?)了不少的Rubyist,聊聊他們對今天講題的看法,以及他們平常開發Ruby的習慣與瑣事,最後交換名片與twitter。雖然比起其他社交能力強的同事們,我只有交換到十五張左右的名片,但我想對於第一次參加國外技術圈Party的我來說,已經是極限了吧!

第七天:RubyKaigi Day 2、Drink up、Ruby Karaoke

Kaigi的第二天之後開始時間比較早,但相較於第一天,剩下兩天都僅只是聽聽其他的技術分享(然後偶爾睡個覺...因為我也聽不懂XD)。

(其餘Kaigi內容...繼續省略)

今天晚上同樣有一場Drink up,與前一天不同的是,今天這次的是由贊助商提供的免費Drink up。由於有人數限制,我們分成兩群,分別參加兩個不同贊助商提供的Drink up。雖然同樣是Drink up,但今天似乎沒有像第一天那樣容易搭訕其他與會者,我猜是因為他們都各自認識而聚集成小圈圈了。也因此今天我並沒有找太多人攀談,而是跑到外面的庭院與同事喝酒閒聊。我們一度喝到忘記時間,還差點被丟包在庭院,還好有其他同事及時把我們找回去。


今天的Drink up似乎比較早結束,因為之後還有一場免費的Ruby Karaoke(其實就是普通的日本卡拉OK而已)。雖然不懂日文,但大家衝著免費這件事,也幾乎都過去捧場。所幸大家都是宅,唱了不少我看不懂意思但也唱得出來的動漫歌。就這樣唱了兩三個小時,一直到十二點多,我們才回到旅館。
(但聽說我們其中一位老闆唱到天亮...果然是日本歌之神)

第八天:RubyKaigi Day 3

最後一天的Kaigi一樣在技術聽講中度過,比較特別的是開幕與閉幕式。這一天的開幕keynote是Ruby committers上台回答大家的提問。第一次能看到自己喜愛的語言的開發者與使用者做這樣的互動真是非常難得。

(其餘Kaigi內容...還是省略)

經過了整天的聽講後,終於來到了閉幕式。閉幕式中,Kaigi的籌辦者首先是感謝大家的參與,並且秀出貼在大廳門口的World Map(World Map是一張世界地圖,與會者會把自己的名字或推特帳號寫在小紙條貼上去)。並期望明年的Kaigi能再和大家見面。雖然說這三天的講題我有真正聽懂的大概不到一半,但能體驗到國外的conference文化,也算是很大的收穫了。

由於我沒有參加Kaigi結束後的After party,於是晚上就是自由活動的時間了。今天晚上算是最後一次有辦法在市區消費的機會了,而我也在此時下定決心再買一支無限機械鍵盤(腦波弱)。之後便回到旅館整理行李,準備離開日本。

第九天:歸途

旅程的最後一天原本安排要去京都御苑,但是大家在前八天都已經把體力消耗完了,於是大家就索性取消行程來睡飽一點。整理完行李後,大家就直接前往關西機場準備回國了。不過由於少掉一個行程的關係,我們多了不少時間可以在關西機場逛免稅店,把剩餘的日幣花光。但時間實在是太多了,在等飛機的同時,我和同事只好在機場開始抓寶可夢,消磨時間。

直到我上了飛機以後,才發覺這九天的旅程是多麼的短暫。而回國後的隔一天就要開學了,還來不及回味這幾天,就要忙著研究所的事情。也直到現在才有時間留下這一篇文筆很爛的旅遊「紀錄」(我不敢說是遊記,因為文筆真的是太爛了)。

最後的最後,非常謝謝5xRuby帶給我這麼美好的一次日本行!

 
9 months ago

距離我第一次接觸Ruby程式語言已經至少有五年了,
那時僅是因為對RPG Maker有興趣,想用它來製作一款屬於自己的遊戲。
而該軟體的Scripting System剛好就是以Ruby為基礎所寫成。
我想這就是所謂的interest-driven developemnt,因為興趣而開發。
從那時候我就用課餘的時間自學Ruby,漸漸的發現它的美好。
除了從遊戲製作那邊得來的成就感以外,也深深被Ruby的優雅所吸引。

兩年前,我開始第一次真正接觸Rails。
其實我從剛學習Ruby的時候,就有聽聞過「Rails是Ruby的殺手級應用」這麼一句話。
但那時的我對網頁的概念一無所知,也就沒有深入去了解。
直到兩年前,我因為在學校的課程中學習到了網頁的基礎,
才想到說當初有聽說過Rails這個也是跟網頁有關的框架,
於是變真正開始接觸Rails。

在我看來,自學Rails相較於自學其他語言或框架感覺起來相對比較辛苦,
至少我翻閱了許多教材如ihower的網站或Rails 101等,
都需要看過兩三次才能大致了解其意涵。
雖然學習的過程很辛苦,但當自己有能力架一個雖簡陋但堪用的網站時,
那種雀躍的心情是不可言語的。

從那之後,我偶爾便會用Rails開發一些小網站 (雖然大部分都沒有在運作了)
而去年也因為學校活動的需求,第一次使用Rails寫API server。

我略有耳聞,Rails在國外是有市場的。
但我並非基於求職或者是任何其他跟金錢有關的理由去接觸,
我單純就是因為自己對Ruby與Rails的興趣與熱忱而去學習與開發。
可惜Ruby/Rails在台灣並不是一個非常流行的語言和框架,
在我周遭,幾乎沒有人接觸Ruby或Rails,且也沒有聽說過台灣當前有甚麼公司企業在推崇Ruby或Rails。
雖然這令人沮喪,但這仍無法澆熄我對Ruby/Rails的熱忱。

直到今年初,我才聽說有五倍紅寶石這麼一家專門推廣Ruby/Rails的企業,且他們也正好在招收實習生。
聽到這個令人雀躍的消息,我二話不說馬上就投了自己的履歷申請。
為了滿足每周至少要到兩天的要求,
我甚至在申請結果出來前就放棄學校大部分的課程時間,空出整整兩天來給公司。
(那時候可謂是背水一戰,如果不幸申請沒上,我這一個學期就真的不知道該怎麼辦了!)

後來我很幸運的申請上了,很感謝五倍的大家願意給我這個機會來實習。
我自己知道,如果要精進自己的Ruby/Rails技巧,只靠自己是很困難的。
因此我來到這裡,希望可以接觸到更多Ruby/Rails圈的前輩,以及真正在業界中開發的專案。

在五倍,除了學習到了更多與實務網頁相關的技巧以外,
我也學到了Rails 5最新的功能之一:ActionCable。
這是Rails結合WebSocket所衍生的一套系統。
利用它可以輕易的在Rails上開發與WebSocket相關的應用。
除了網頁,我也第一次接觸如何使用Ruby去控制Raspberry Pi,並驅動其讀卡機與蜂鳴器。
雖然我過去略有接觸Unix-like系統,但當我能用Ruby去控制它時,是令我相當雀躍的。

在實習的後半段時間,我開始接觸國外的Rails開發案,那是一個來自日本公司的案子。
因為這個開發案,我更加熟練了多人開發的協作技巧,以及如何使用測試框架(RSpec)。雖然日文是很大的障礙,但這裡的大家都很熱心幫我翻譯,讓我能順利完成任務。

時間過得很快,四個月的實習一轉眼就到了尾聲,
在最後幾天的日子裡,我除了收尾手上的日本專案外,也回想著這段日子的點點滴滴。
和五倍的實習生們一起學習、和五倍的大家一起用餐、和五倍的貓玩耍、和五倍的工程師們一起通靈...
由於我自己的生涯規劃,暑假後我不得不離開這裡。
雖然很捨不得,但這段日子我很開心,我擁抱了我喜愛的Ruby/Rails。
謝謝五倍紅寶石的大家,讓我有五百倍的喜悅與熱忱!

 
10 months ago

心得

五倍紅寶石最後一階段也是最精彩的實習課程 "RUBY ON RAILS 從零開始" 也已經告一段落了,
雖然時間短暫,但我從Eddie老師那裏學到非常多我過去所不了解的Ruby的細節,
以及Rails中許多好用的套件與技巧。

Eddie老師一開始就帶大家從建立一個簡單的Rails應用程式開始,
讓大大看看Rails的強大以及如何快速的建立一個簡單的網頁應用程式。
之後帶領大家接觸Ruby程式語言,並著重在與Rails關聯性高的Ruby語法。

在介紹完Ruby語法之後,接著就是從頭開始手刻Rails應用程式的每一部分,
包括在Rails中使用MVC架構、使用Mailer寄信、背景工作等等。
在課程的最後,也帶領大家實作一個具有FB登入以及刷卡付款的購物車功能。
很謝謝Eddie老師帶來的精彩課程!

 課程筆記

  • scaffold - 快速產生MVC架構
  • collection_select - 可以產生具有關聯性的選擇欄位
  • N+1 Query
    • 有工具可檢驗
    • 假設post belongs to user (via user_id)
    • Post.all.includes(:user)
      • 連user欄位一起拿過來
  • 資料驗證寫在model
  • Symbol GC
    • Ruby 2.2之前,產生出來的symbol無法被GC回收,會memory leak
  • Range展開成陣列
    • [*1..100]
    • *稱為splat operator
  • each.with_index
    • 類似each_with_index
    • 好像也可以套在hash
  • reduce(:+)
    • redice(0) {|x,y| x+y}
  • local variable與method的優先?
    • local variable優先
age = 18
def age
    return 20
end
puts age #=> 18

puts age() #=> 20
  • 寫block時,{}的優先順序比do-end還要高
    • function call時,{}優先比較高
    • p [1,2,3,4,5].map {|x| x*2}
      • 相當於 p ([1,2,3,4,5].map {|x| x*2})
    • p [1,2,3,4,5].map do |x| x*2 end
      • 相當於 (p [1,2,3,4,5].map ) do |x| x*2 end
  • receiver的概念
    • 範例
      5.times do ...
      end
      
    • 5是receiver,對該物件送"times"這個訊息,看它是否回應
  • 為什麼類別方法用self.xxx來定義?
    • 可以想像為:在Class本身中定義單體方法(singleton method)
  • 使用class << self來省略定義類別方法時的self
  • include的問題
    • 模組include時,會類似變成該class的super class
    • 因此
module A
    def foo
        puts "module"
    end
end
class B
    include A
    def foo
        puts "class"
    end
    # include A # => 放這裡也是一樣的結果!

end
B.new.foo #=> "class"
  • superclass並不會列出所include的module
  • 大部分的Ruby method都是定義在Kernel,而非Object或BasicObject
  • ClassName.class #=> Class
    • ClassName = Class.new
    • another_name = Class.new #=> 建立新類別,名稱也可以是中文
    • 小貓 = Class.new
  • Class.superclass #=> Module
    • Module.superclass #=> Object
    • 但Module.class #=> Class
      • 所有class的class方法都是Class,包括Class與Module
    • 詳細reference:Ruby Object Model -動態的繼承
    • 根據運算式結果決定superclass
class Cat < (rand > 0.2) ? Array : Hash
end
  • extend
    • 用來擴充呼叫者,類別或者物件實體會有不同結果
  • extend 放在類別
module Flyable
    def fly
    end
end
class Cat
    extend Flyable
end
Cat.fly # fly成為類別方法
  • extend 使用在物件上
kitten = Cat.new
kitten.extend Flyable
kitten.fly #=> 成為實例方法
  • 事實上rails下app資料夾內的所有東西都會被載入
    • 分資料夾只是識別
  • Ruby的單複數轉換
    • "person".pluralize
    • "mice".singularize
    • 是透過語尾等結構來判斷,即使是亂打的單字也可以轉換
    • 自定義單複數轉換
      • 修改initializers/inflections.rb
  • camelcase與underscore
    • "PostsController".underscore #=> "posts_controller"
    • 反向為camelcase
  • SCSS
    • 模組使用
      • @import 'reset'
  • Coffeescript
    • 可使用class (轉成JS的prototype)
  • 分頁
    • kaminari
    • 美化:bootstrap-kaminari-views
  • Simple form
    • f.input
    • f.assocication
  • carrierwave:檔案上傳
  • migration
    • rails g migration add_aaa_to_bbb aaa:string
    • 自動解析,知道要新增到bbb這個table
  • 縮圖
    • RMagick
    • 可保留原圖並製造縮圖
  • 讓Heroke做migrate等指令
    • heroku run ...
  • link_to、redirect_to可以猜測使用者的目的
    • link_to "Title", article_path(article)
    • link_to "Title", article
    • redirect_to @user
  • redirect_to可以帶入flash message
    • redirect_to xxx_path, :notice: "Error Message"
  • render :partial => "form"
    • 可簡寫為:render "form"
  • 當object.save因為validates而回傳false時,可以用object.errors.full_messages看錯誤訊息
    • object.errors.any?:查看是否有任何錯誤訊息
  • create中,為何要使用實例變數?
    • 因為可以render到new page中,成為既有欄位
    • 與redirect_to不同,因為redirect_to是轉址,render只是產生別的view
def create
    @obj = ObjectClass.new(obj_params)
    if @obj.save
        # ...

    else
        render action: :new
    end 
end
  • form_for @object的方式會檢查該物件是不是過去save失敗,而多增加警示框等CSS或其他HTML
  • 自己顯示錯誤:用@object.errors.full_messages.each {...} 的方式條列出來
  • 現在大部分的瀏覽器都支援檔案的解壓縮,所以可以讓asset用gz等壓縮傳給瀏覽器
  • Asset中js和css的檔案名稱有接一串隨機碼,用意是在更新CSS/JS時讓web server被迫放掉cache重抓
  • 用CDN的缺點:如果自己的asset有depend其他的CDN,萬一CDN速度比較慢,導致讀取順序是自己的code先到時,就可能壞掉
    • 而使用asset pipeline會整包asset一起到,就沒這問題
  • Ruby的Private, Public, Public
    • 與子類別一點關係也沒有,子類別總是可以拿到所有父類別的方法,無論private、protected
    • Private method:不能有明確receiver
      • self.private_method # 這樣是不行的,因為self是receiver
      • 並非像其他的程式語言中,private只能由內部class呼叫
      • example:puts其實是一個private method,因為沒有receiver
      • 甚至public, protected, private這三個本身也是private method
      • 強制呼叫Ruby的private method:可用object.send(:private_method)
      • object.send(:send, :send, :send, :send, .... , :private_method) # 同單一次呼叫
    • Protected method:限自己與sub-class可使用receiver
  • 為何需要使用binstub?
    • 因為系統版本與專案內的binary的版本可能不同
    • 如果直接下指令(rails, rake等),系統會自動去找最新版本
      • 但現今版本的rails, bundle等程式會根據是否在專案目錄,自動挑選rails的版本
      • 其實就是優先使用bin資料夾內的特製版本
    • 過去用bundle exec,會去檢查Gemfile.lock的內容,挑選系統中合適的版本
      • Gemfile.lock是由bundle install根據Gemfile安裝後產生的套件相依性紀錄檔
    • 使用binstub:會把該專案內需要的特殊版本產生在bin內(特殊的script)
      • 使得rails, bundle等指令不用再加bundle exec
      • 能夠自動判斷
  • Rails中讓controller不要產生一堆有的沒的CSS和JS
    • in config/application.rb
class Application < Rails::Application
    config.generators do |g|
        g.stylesheets       false
        g.javascripts       false
        g.test_framework    false
        g.helper            false
    end
end
  • 避免/articles/4/comments/3這種串很長的網址
    • 因為ID已經有專一性了,不用在comment前串一個article
  • Session用的名稱session["name"]可以抽離到Settings.card_name,方便管理
    • 建議也使用比較複雜的名字,避免被撞到或攔截
  • settingslogic
    • 用yml來管理設定檔
  • aasm或state_mechine
    • 提供有限狀態機的功能
  • 刷卡機制
    • BrainTree
 
11 months ago

結束了HTML/CSS的前端課程,緊接著是JavaScript與jQuery的部分。
學習HTML/CSS的目的是要安排一個好看的網頁版面,但與使用者互動的部分就要交由JavaScript來處理。

同學習HTML與CSS一樣,我過去也沒有正式學習過JavaScript。只有在偶爾遇到互動需求的時候,
才硬是把簡陋的程式片段塞在網頁中。雖然我有學C語言的程式背景,在學習JavaScript時會比較輕鬆些,
但大家都知道JavaScript這個語言常常有一些意想不到的行為(例如非同步的function call),
讓剛接觸這個語言的初學者搞不清楚來龍去脈。

這次的JavaScript課程由Kuro老師來指導,課程一開始從JavaScript的起源與最基礎的語法操作說起,
配合適當的練習,讓沒接觸過程式的初學者也可以輕鬆的學會基本的語法。
接著,Kuro也帶著大家去踩一些JavaScript常見的地雷,讓大家知道甚麼地方該注意,
也讓大家了解JavaScript與其他語言不同的特性。

很快的帶過JavaScript的基礎後,接著就是重頭戲:jQuery。
jQuery最主要的任務是提供前端設計師一個存取與修改網頁DOM的介面。
藉由jQuery,可以輕鬆的製造出相當精緻的使用者介面。
Kuro在課程後半段也舉出了許多實例,讓我們實際操作寫出一些常見的使用者介面,
並且在最後示範了不少現成的jQuery Library(如loading與picture slide等等)。

整個課程雖然時間不長,但卻讓我學習到非常多JavaScript與jQuery的實用技巧,
真的很感謝Kuro老師與五倍紅寶石!

 
11 months ago

終於結束了總時數20小時的HTML/CSS課程,
這是我第一次真正進行有組織的學習這些網頁的前端。

雖然過去偶爾有碰過一些情況需要寫網頁,但多只是寫一些簡單的HTML然後套上現成的CSS如Bootstrap就收工。
但因為對網頁結構的不了解,遇到與自己期望的效果不同時就不知道該怎麼辦,
只能用彆扭的方式帶過。

這次由Amos帶來的精彩課程從HTML最基礎的結構重新講起,學習如何建立基本的網頁架構。
再來接著切入CSS與選擇器的使用,開始替網頁加上自己想要的效果,
並解釋了CSS中許多不明顯但卻相當重要的概念,例如block/inline與float等等。
雖然Amos說CSS的細節太多了,沒辦法一一介紹給我們,
但他相信有了最核心的概念之後,其他的部分由我們自己繼續學習絕對沒問題。

除了相當詳細的課程之外,Amos也很注重實務的操作練習。每講完一個部分,就會讓大家練習如何操作。
並且在結束一個章節段落後,會找一個較大型的專案讓大家整合練習。
課程的最後,Amos也帶著大家從網路上各種版型下手,學習如何切版,讓大家真正熟悉HTML/CSS的開發方式。

最後,再次謝謝Amos老師與五倍紅寶石,讓我有這個機會真正的學習HTML與CSS!