
我被一個純 HTML/CSS/JS 寫的「假作業系統」震撼到!真的猛到不行…
還以為只是網頁玩具,結果點進去根本是前端界的黑魔法秀!
超像在用 Linux + 視窗系統,還有終端機、檔案總管、應用程式…完全不是在開玩笑的!
前幾天朋友傳給我一個 GitHub 連結,跟我說:「你一定要看這個 htmlOS,真的會讓你懷疑人生。」
我本來心想:「又來了,現在網路一堆自稱 OS 的東西,點進去不是仿 XP,就是仿 Mac 桌面那種純 UI 模仿,點一點什麼都不能做。」
結果。
我錯了。
超錯。
這個 htmlOS 不只是「看起來像」,它是真的做得很像!不是單純擺個桌布加幾個 icon,那種你點進去發現每個 app 都是假的。不。這個是「真的可以開視窗、跑 terminal、切換應用程式、打開資料夾」,甚至連文件編輯器跟一些互動程式都真的可以用!
老實說我一開始是用 Chrome 打開,然後用滑鼠點一點,就開始懷疑:「這真的只有用 HTML、CSS 跟 JavaScript 寫的嗎?沒用框架?沒用後端?沒用 WebAssembly?」
然後我手賤打開 DevTools 看了一下 code…
天啊,全原生。沒有 React、沒有 Vue,純 JS 操作 DOM,靠事件綁定、多層結構、手刻的 UI 視窗控制邏輯,就這樣完成一個看起來像桌面作業系統的世界。那一瞬間我真的有點 Respect 滿點。
幾個我超驚訝的地方:
- 每個視窗都可以拖曳、切換 focus、關閉開啟,完全模擬視窗系統的行為,甚至還有 top bar 那種經典 UI 設計。
- 裡面有內建幾個小 app,像是 terminal(可以打一些內建指令)、file explorer(有模擬資料夾結構,還能開檔)、還有一些應用程式可以跑起來,感覺就像小型的桌面環境。
- 整個系統的狀態是用 JS 管理的,沒有大型框架,也沒有 state manager,純靠物件跟事件維護狀態,邏輯寫得超乾淨,看起來比某些公司專案還整齊。
- MIT 授權,開源,整個自由發揮空間超大!
我真的很想問,那個作者到底是誰?怎麼這麼猛?
通常這種 side project 會做到一半就放棄的人一大堆,更何況這種做法又是偏向 UI 架構設計+模擬操作邏輯,根本是「寫爽的」型專案。
但這位作者是直接做到「可以 demo 一整套視窗作業環境」,然後還做得超流暢,完全不 lag,甚至每個功能都還有點小驚喜,真的太扯了。
如果你是前端工程師、設計師,甚至只是對 UI/UX 有點興趣的人,這個專案一定要點開來玩玩看:
👉 https://github.com/imfunniee/htmlOS
保證你會跟我一樣,點進去先覺得好玩,然後開始抓頭:「這些功能到底怎麼刻出來的?」
有種當年第一次看到 Mac OS X 的那種新奇感,真的。
我個人是有點心動想 fork 來改造一下…
說真的,這個 htmlOS 根本是用來改造成「個人作品集網站」的神級骨架!
想像一下你的作品集不是一個網頁,而是一個「模擬作業系統」介面,裡面每個 App 是你的一個作品 demo、每個資料夾是你的專案分類、還可以有 terminal 模擬你的技能列表。
是不是超有 fu!又 geek 又個性,還比那些滿版 scroll 動畫的網站還更有互動感。
重點是:這一切都可以自己改,而且原始碼真的很好懂!
我光是看到 terminal 裡面可以輸入 help
、about
、contact
,他還真的幫你印出預設的作者資訊,我就笑了。這個真的超適合個人網站或創意展示啊!
而且因為是 MIT 授權,你不只是可以改,你想怎麼玩都可以,甚至拿來教學也沒問題。
給正在學前端或想進階的你:
這個專案完全是一個「真實練功」的好範例。
不像那些教學範例永遠只有 ToDo List、Blog List,htmlOS 是完整架構型 UI 模擬實作。你可以學到:
- 如何設計模組化應用程式
- 怎麼用原生 JS 管理畫面跟狀態
- 視窗系統 UI 的運作邏輯
- 模擬作業系統的資料架構和互動設計
- 怎麼讓前端變得像桌面應用程式那樣有趣
如果你能看懂它怎麼運作、甚至能改寫幾個功能,真的會對你的前端實力大加分。
我現在已經在想,要不要把我自己幾個 side project 全部搬進去,像是 Notion 仿作、Markdown 編輯器、或是小遊戲,都包在裡面變成「App launcher」,點一個 icon 就開一個模擬 app,超有趣。
然後我還可以設一個「懸浮終端機」,輸入 secret 指令才能看到一些隱藏作品,是不是超中二?哈哈哈
如果你對前端還有一點點熱情,或者單純喜歡奇怪又有趣的玩意兒,這個 htmlOS 絕對不能錯過。
那種感覺就像是在一堆寫履歷用的 Portfolio 裡,突然出現一個拿 ASCII 畫自介的怪人一樣特別,而且你會記住他。
我已經記住這個專案了,也準備要來改造它一下。
等我 fork 成自己的 OS 再來跟大家分享 ✌️