繁花落盡，眼看 2019 始春先是逼近而後漸漸遠離，一年又要結束之際，終於把 HOJ 的前端拉好皮，匆匆上線啦！
希望沒有辜負廣大群眾 (?????) 對於始春的期待。
Re-Design: HTML5 + Reboot + RWD
雖然應該沒有人是主要用手機來寫 OJ 啦，但既然已經 2019 了，網頁要支援 RWD 應該是基本的吧，所以重新調整上排的導覽列、幫這網站加了一些寬度斷點 (breakpoints)，總之作者親自測試的結果，大部分時候在手機上瀏覽的體驗都很順暢。
設計的部分除了無腦套 Bootstrap Reboot (基於 normalize.css)，目前只做顯而易見的改進。顏色上，本來的網站配色實在是太隨意了，藍色就真的是 #0000FF、紅色真的是 #FF0000，文字使用過於鮮豔的顏色容易造成視覺疲勞，所以把它們丟進調色盤裡，隨意配了一些比較柔和的顏色替換。然而這個網站目前還沒有主色，大部分的樣式也都還是維持原先的 CSS。
這樣應該像是個 2019 年寫的網頁了吧？
Authentication: OAuth
本來的 HOJ 是用帳號密碼註冊然後人工審核。我覺得管理起來有點費工，而且使用者註冊完無法預期何時才能登入，UX 不太好。但自己維護信箱認證也好麻煩，最後就效法純靠北工程師，用綁定 GitHub 帳號的方式登入。本來以為 OAuth 會很難串，結果一個晚上就弄好了。不得不說 GitHub 這方面十分 developer-friendly，callback 不僅允許 non-HTTPS 的網址，甚至還能直接填 localhost，開發起來十分順利。
想體驗滑順的註冊流程，可以到這裡玩。
有了 GitHub 提供給我們使用者的個資 (X) 公開資訊 (O)，就會想思考如何做進一步的整合，像是直覺上來說會員系統會串 Gravatar 從使用者的信箱對應大頭貼，因為有了 GitHub 的公開資訊便可以直接應用。只要用一個 proxy 遮蔽，就不會直接從大頭貼網址曝露出使用者的 GitHub ID。這部分做好了，但還沒寫進網頁。
有了全球最大工程師交友網站，就不用自己管資料庫裡的密碼了，真香。
Client-side JavaScript: jQuery
本來網頁裡有些陳舊的 JavaScript，因為不合時宜所以我都刪得差不多了。像是裡面本來有段 JS 是把 MathML (Wikipedia) <math> 標籤逐個丟給 CGI (您沒看錯) 轉成圖片，考慮到數學式多半都用 MathJax / KaTeX 來排了 (而且通常還比較漂亮)，作者回想起小時候看著 HTML 4 的教學書，在那個 MathML 只有 Opera 支援得比較好的年代，留言板多半是教用 Perl 寫，內心感慨萬千。
傳送解答的頁面
因應未來可能會想允許使用者上傳不同語言的程式碼，目前先做了一個支援語法上色 (syntax highlighting) 的文字框，多多少少可以避免傳錯語言導致 compile error 的窘境。
值得一提的是 CodeMirror 5 在 iOS 上若沒有打補丁恐怕會沒辦法打中文，我實在不是很想修這個 bug，反正大家應該都是用複製貼上的吧。
檢視傳送結果的頁面
這個頁面一樣會用到程式碼上色，只是是靜態上色，所以就隨意選了一個很輕量的套件：Prism.js。另外上方的 error 框除了顯示編譯錯誤，規劃在未來還會顯示一些友善的提示訊息，可以由出題者決定要揭露多詳細的錯誤報告，在 special judge 或互動題的時候也許會有用。這部分是受到 ZeroJudge、CodeForces 啟發。而一些錯誤訊息和 stack trace 會設計成只有管理員才看得到。
Future: A big to-do list
因為目前還是個一人專案，未來想做的事情是一條長長的 list，這裡先只列出網頁前後端的部分，大致依照優先程度排列。有些參考自HOJ 裏板(我不知道是不是還活著)，總之我打算接過來實現了。
- 維護舊的題目資料 (題敘、限制、測資)。設計統一的表示法 (參考 Kattis problem format)。題敘部分用 CommonMark 改寫。
- 前端支援語言切換：C、Python、Haskell 等等，會動到後端沙盒。
- 重寫 HOJ 的權限系統，例如題目、比賽可以由多人協作。
- 題解或提示 (neta)，總之是關於題目的詮釋資料 (meta data)。
- 題單功能，就想成音樂播放器的 playlist 好了。
- 良好的 audit log。
- 美術、設計，總之就是一些圖。
- 一些更像社群網站的功能，像是對題目或比賽送 ticket 或水球系統 (?)。
還有一些也很想做但要從後端改起的東西，像是 wait for judge 的即時更新、串流公開測資等等，天啊 judge system 這坑也太大了吧。
總之大概先這樣。這個網頁伺服器會暫時先搭配著 nightly 的評測伺服器來封測，會不定期接上後端主機來消化排在佇列裡的程式碼們。如果我有時間會再專門寫一篇來討論。
如果想持續追蹤這個 side-project 的最新動向，歡迎訂閱這個 Medium publication 喔。最後是這個系統目前的網址：
傳送門：hoj.kuang0.me
