Wildsky's Blog

歷程整理 – 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 的選用也是很不ＯＫ，他的一個很大的特點是 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 在下載東西時沒有通知實
    在不ＯＫ，都會疑惑自己有沒有按到下載連結，我便替他做了這個套件。我是希望之後可以加更多功能，但小蟹說有通知他就很滿意了。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

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