繁花落盡,眼看 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