Wildsky F.

Easy things should be easy, and hard things should be possible.



歷程整理 – 2018/04/12

Posted on

也是好一陣子沒有寫文章了,來記錄一下這段時間做的事吧。

NTNU Course

網址:https://course.sa.ntnu.edu.tw

這個專案是 17 年 6 月的時候和師大學生會合作的網站,目的是要把心得資訊從 Facebook 的社團抽出來透明化,(大家都知道 Facebook 的搜尋功能是什麼樣子),並順便做了也有聽到需求的考古題分享。

至今 2018/04/12,上面的心得有 345 篇,學生會現在也在積極收集各系的心得,真的很開心能看到這個站有人在用,也不枉我做的這些了。

這個網站最初是用 react.js 刻前後台,然後用 pouchDB 作為 express 的 middleware 提供各種資料的 API,雖然當時寫 react.js 寫得很開心,但速度實在不太理想,頁面 render 的速度雖快,資料載入所花費的時間卻惱人地多。身為製作者都不能忍受這種速度,連使用者都在哀嚎。

後來發現這次的專案我一次用了太多不熟悉的東西,導致沒辦法好好地發揮那些工具的功能,造成體驗的悲劇。

於是我先把 react.js 整套拆掉,把 react-router 換成 express 的 route 方式來控制路由,把 component 換成用 ejs render 的 express view 來顯示頁面——那段時間真的不是普通的痛苦啊,專案中同時有 .jsx 又有 .ejs,還有許多現在已經忘記的煩躁感。

後來終於拔完 react.js 了,網站速度還是不夠理想,尤其是搜尋功能,查一個課程,找出來的結果不是特別多,卻要花個四、五秒,於是我鐵了心,也決定把 pouchDB 拆掉換成另一個 relational 的資料庫,最後決定要用 sqlite3 作為這個網站的資料庫。一樣一段段地換,才剛換完搜尋功能,進行測試時我就嚇到了,

「咦?好了?怎麼這麼快?」

搜尋等待時間從原本的四、五秒省到現在搜尋不用一秒鐘,慢慢地把整個站的 pouchDB 都拆掉後,整個站像是飛起來一樣地快,整個開心地合不攏嘴,原本拆 react.js 拆得很崩潰的心也像是獲得救贖一般。

後端換成相對熟悉的 express 後,就開始做一些會員功能這類比較吃後端知識的東西,也開始體會到 MVC 的好處,慢慢想抽一些東西出來成 model,最近甚至還在 server 弄了一些 hook 和 process management 的建設,讓上 server 處理事情變得比以前輕鬆太多了。(某些情況甚至還不用上 Server 就只要 git push 就會自己 deploy 了呢,讚讚)

我的師父 WM 在過程中也給了我許多的協助(其實不只這個專案而是一直以來啦),實在是很謝謝他帶我。無論是前端的基礎、框架 react.js,還是後端的 express 和上面沒提到的 Caddy Server,他都幫了我、教了我很多很多,真心感謝有他,根本是我的貴人啊。

反思

後來想了想,才發現自己當初根本沒有做評估,就像是之前看到的笑話:

「為什麼你的網站要用 react.js?」
「因為潮!」

現在回頭看,就覺得自己這樣實在不夠專業啊。就我現在的理解, react.js 應該是要用在 UI 的狀態比較多、且資料和 UI 的牽扯比較深的時候,但 NTNU Course 其實就是一個很簡單的查詢網站,沒有太多狀態需要考慮,畫面上的資料幾乎也都是給試用者看而已,用這樣一個強大的框架實在是殺雞用牛刀。

另外,PouchDB 的選用也是很不OK,他的一個很大的特點是 sync-friendly,但老實說當初在用的時候我完全不知道這一回事XD 只聽著前輩說這個很好就用下去,卻完全沒用到這個特性,超浪費——也可能當時的 query 寫得很爛,硬是直接把東西都撈出來,然後才在 express 裡做 array filter,廢話這樣當然慢啊。 XD

Firefox add-ons

手上的套件不知不覺也做了十二個了,把幾個比較重要或有感的拿來簡述一下好了。

封鎖內容農場

https://addons.mozilla.org/firefox/addon/block-content-farm/

這個套件是我最初的幾個套件之一,雖然基礎程式碼是從 Ben Lau 的 chrome 版套件來的,但因為裡面用到了 JQuery,而當時的我正處於 anti-jquery 的情結中,便卯起來把所有用到 JQuery 的地方都拆成純 JavaScript,裡面大概 80% 以上的程式碼都被我改過了。還聽取 Irvin 的建議把農場清單抽出來變成一個 GitHub Repo,讓套件直接去跟該 Repo 要資料,這樣就不用每次更新名單都還要發新版本的套件,尤其當時還要過 Mozilla 審核,實在曠日費時費人力。

雖然重寫了大部分,但還是希望自己之後可以對原本的 repository 發 PR,畢竟也是個開源專案,回饋上游應該也是應該的吧。

至於 PTT 上有人開了另一個「終結內容農場」的套件,雖也曾灰心說是不是自己的套件做得不夠好,才會有人去開新坑,但轉念一想,大家的目的都是要停止內容農場的亂象、讓網路更加健康,這樣想過以後,就會希望有更多人一起來做套件,功能重複了也無所謂啊。

前陣子還在 Firefox 20 歲生日的活動遇到上面提到的原作者 Ben Lau,跟他小聊了一下。開源文化真的很棒,可以練功又可以認識朋友,讚讚。雖然上一個版本已經是幾個月以前的事,但還是希望自己能撥點時間重整一下這個套件呀。

Textarea Cache

https://addons.mozilla.org/firefox/addon/textarea-cache/

這個大概是維護最久的套件,也是目前我手上使用者最多的套件,

最初是因為 Mozilla 換了套件的架構,原作者沒時間維護了,ETT 去跟他接過來,
但他自己也沒時間維護,剛好我又剛入這坑,他就丟給我處理,自己專心處理新同文堂,

當初真的很災難,Add-on SDK 準備要掛掉,當然不要用這個即將倒掉的東西。但新架構的 Web Extension 又缺一堆 API,好多功能都做不起來,做得實在心很累,使用者也是一直哀說這套件根本沒作用、檢視儲存的清單太爛⋯ 各種理由都可以給我一顆星評論,差點沒忍下來把套件從套件網站上下架的衝動。

維護到現在共 63 個版本,從三不五時收到一星 mail 到現在偶爾五星 mail,也是一年多了,(第一版的這個套件是 2017/2/19 發的),看著他就這樣成為 3756 個使用者的套件也是頗有成就感的呢!

Personal Blocklist

https://addons.mozilla.org/firefox/addon/personal-blocklist/

這個套件也是我頗喜歡的套件,主要功能就是把不想要的網站從 Google 搜尋引擎篩掉,在 Chrome 上是 Google 出的套件,也可能因為是 Google 出的,就沒有 Firefox 版——他們很多東西都 anti-firefox 實在很氣人——後來終於下定決心把他從 Chrome 上面搬來 Firefox,最初他的 Code 我沒有改太多,但實在是因為裡面的程式碼有點問題⋯ 像是 API 明明有提供 storage api,卻硬要用 localstorage 的 web api 去存資料,導致使用者常常莫名地失去他說要清掉的網站的清單;還有明明就是要 traverse 整個 array,原作者卻硬要用 for (var i = 0;i<array.length;i++) 的寫法。

其他還存在許多像是在瀏覽器裡面用 C++ style 寫 JavaScript 的感覺,實在受不了才開始改他。後來才因緣際會發現他有用一個叫做 isomorphic 的寫法!算是突破我的知識圈,才又重新細讀他的程式碼。

最近一直想要想要改他的功能,補了個「可以依照字串 block 網站」的功能後就開始變忙了,而且手上的專案好多好多,覺得失心瘋呃啊。XD

新聞小幫手

https://addons.mozilla.org/firefox/addon/newshelper/

這個套件是我從 G0V 上撿來的,原本有 Firefox 版,但因為 SDK 架構被廢了,導致套件不能動了,我便直接從 Chrome 版套件修改掉一些 API,移植到 Firefox 上,算是我手上少數真的原汁原味移植的套件之一(哭笑不得),我自己在開發時有一些 bug,但實際上架後卻似乎沒有問題,問了重度使用者的 Michael Li,他也說天天使用沒 bug,到底為什麼 local 有 bug 但 production 沒有啦,不是很懂為什麼XDD

最近(從去年開始啦其實⋯⋯)Ronny Wang 好像想做大改版,有許多規劃,但我們好像一直都很忙湊不出時間啊啊,希望近期能快快開始執行(有寫下來才會知道擱置了多久XDD

其他小套件

因為這樣寫下去篇幅會變太長,所以改用列點的方式記錄吧。(寫這麼長就知道我有多久沒寫文章⋯⋯罪過罪過)

  • Download UI: https://addons.mozilla.org/firefox/addon/download-ui/\
    這套件是小蟹的需求來的,他說新版的 Firefox 在下載東西時沒有通知實
    在不OK,都會疑惑自己有沒有按到下載連結,我便替他做了這個套件。我是希望之後可以加更多功能,但小蟹說有通知他就很滿意了。XD
  • 2-Column Google Results: https://addons.mozilla.org/firefox/addon/2-col-google-results/\
    也是個 Chrome 來的套件,不過功能被我大改,算是同名、
    同 icon,裡子卻一點不相干的套件。會做他是因為 PTT 上有個朋友叫 Jaxon 的需求,寫這套件練了不少 CSS 的功,雖然 Google 每重命名一次 Dom 我就要開新版上去,但也實在沒辦法做什麼來避免這問題QQ
  • Foxmosa: https://addons.mozilla.org/firefox/addon/foxmosa-with-you/
    這套件很可愛XD 會把小莎帶進你的頁面裡,算是為了參加 Firefox 套件比
    賽而做的套件,雖然現在功能還只有一點點,但我相信這套件在台灣應該會蠻受歡迎的,希望可以做更多有趣的事情!
  • Tab Notes: https://addons.mozilla.org/firefox/addon/tab-notes/\
    這大概是我自己最喜歡的套件了。啟發自 a5.gg 這個站,有時候總是需要記東西,但手邊沒有紙,也懶得開 note.app,不如直接開新分頁就能記錄啦!我自己喜歡在裡面記下最近對我有啟發的句子,這樣每次開分頁都能提醒自己,頗有助益哩。

Firefox Add-on Reviewer

https://wiki.mozilla.org/Add-ons/Reviewers

去年大概七月八月,我和 Ett 變成了 Firefox Add-on 的 Reviewer,去年還因此可以去英國參加 MozFest!Reviewer 其實有些累人,畢竟要一直看別人寫的 Code,但這也的確是個增進程式功力的好途徑。看著套件生態圈從去年放棄 SDK 架構後的慘淡,到現在越來越多套件的發芽壯大,便感覺 Firefox 還是挺有未來的啊!

現在我和 Ett 每兩個週末會選一天到摩茲工寮寫套件,歡迎大家一起來寫,有問題可以互相討論一下呀,反正工寮是免費的讚讚。

活動資訊在這兒:https://www.facebook.com/events/145644126256857/

工作

回來也半年了,不得不說,實在很謝謝公司願意等我當完兵讓我回來啊。

記得一開始回來是忙電商,從結帳流程中的對外掛工程師的支援,到結帳前各種頁面元組件的建置,從搜尋引擎的優化、結構化卡片資料,到轉換率資料搜集、資料分析,也是做了不少事情哪!(所以才會說電商就是一間公司啦XD)整體下來做得蠻愉快的,公司的 mentor Dan 也給了我不少對未來職涯的建議與分析,更加確立了我想成為超強技術工程師,而非產品設計工程師的未來。

電商的部分忙到前陣子告一段落,現在便開始了新的專案,因為有些訊息還在內部討論,所以就講一些已經發生的事情吧。

最近處理的是 DFP 廣告的串接,老實說做的過程中我不是太願意啊(雖然我沒有哀出來),不是說公司的理念有什麼變化,是我個人不太喜歡看到廣告,裝瀏覽器後第一件事就是裝 Adblock,而 DFP 不用多解釋就是安插廣告的服務啊,一想到這些廣告就是我親手弄上去的就覺得心情很阿雜。話雖如此,這兩天公司也決策了一件事,讓我覺得我們真的是很重視使用者的企業,進而心情好很多了,

這個決策就是,我們會尊重 Do Not Track 這個設定。

聽起來好像沒什麼了不起,但放眼望去應該沒幾間公司有在在乎這個設定值,許多人應該都覺得這不過是設好看的,我們卻反其道而行。光這一點就讓我淚流滿面、肅然起敬了。希望公司可以越來越好,進而擴大影響力,讓這個世界更好啊。

健康

昨天終於久違地去大安森林公園跑步了,但可能是太久沒運動,跑沒多遠就累歪了,今天還整個腳痠炸,可是不跑感覺身體會越來越鈍,實在不好啊,目前的目標是一週跑兩次,(對先不管跑多遠),希望四月可以堅持住,五月就可以增加次數或換個目標,一定要維持一下身材和體能啊,以後才玩得開心。

印象中 18 年的願望好像也有這一個吧,要好好運動,健康健康。

好想打桌球,之後回去師大找找以前的帥氣桌球老師打好了。讓他電一電XD

結語

過去一年,到當兵退伍、到現在,大概是這樣吧,整理告一個段落了。不知不覺也是做了不少事,不定期整理還是有其必要的吧。可以知道自己進步了多少、哪裡還需要加強,時間都花在哪裡。還好我把 RO 從生活中拆掉了,不然根本沒時間好好寫這篇文章啊。

接下來要繼續練的能力大概是:

  • 前端的框架:應該還是 react.js 吧。畢竟我師父就是這個派別的,雖然公司用的是 Vue.js 但我心還是 react.js 派的。下次開個適合他的專案吧。
  • 後端的技術:除了繼續研究 Express 之外,我打算找個後端的 roadmap 看看哪些東西還沒練到,試著套進 NTNU Course 看有沒有機會繼續練等。雖然公司是 Rails,但前端出身的我還是對 Node.js 放不下。XD 也希望之後可以用 Rust 或 Golang 寫寫後端啦。
  • 機器學習:大概就是好好地搞懂一些演算法吧。目前想要學的是推薦系統和圖像辨識的技術,還是不甘於只做一個 Web Developer,大概是資工的自傲吧。不知道是好是壞,但反正想學總是好事呢。

之前也整理了以前的作品集: http://blog.wildsky.cc/experiences,算是借鏡呂行前輩的網站。很想像他一樣厲害,必須更努力才行哪。

Ref

列一下上面提到的人們好了: