Wildsky

ws://wildsky.cc

耿 . Front-end Developer . Firefox Add-on Developer

April 12, 2018

歷程整理 - 2018/04/12

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

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,大概是資工的自傲吧。不知道是好是壞, 但反正想學總是好事呢。

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

Ref

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

Geng-Zhi Fann © 2018

Powered by Hugo & Kiss.