Időnként jólesik valamit pusztán a szórakozás kedvéért építeni. Nincs határidő, nincs termékcél, nincs „ez a megfelelő stack?” kérdés, csak kíváncsiság és nosztalgia.
Ez a kis projekt egy egyszerű ötlettel indult:
Mi lenne, ha újraalkotnék egy Windows 7 stílusú asztali élményt közvetlenül a böngészőben?
Az eredményt itt nézheted meg: https://dynart.net/fun/win7 .
Nincs framework. Nincsenek build eszközök. Csak HTML, CSS és JavaScript.
Miért pont Windows 7?
A Windows 7 a felhasználói felületek történetének egyik édes pontján ül. Csiszolt volt, vizuálisan nyugodt, és funkcionális anélkül, hogy hivalkodó lett volna. Sokak számára (engem is beleértve) ez a „klasszikus asztali UX” csúcsa.
Ennek a kinézetnek és érzésnek az újraalkotása nem egy operációs rendszer lemásolásáról szól, hanem annak felfedezéséről, hogy ebből az élményből mennyit lehet reprodukálni modern webes alapelemekkel.
Mit építettem
Az eredmény egy kis böngészőalapú „asztal”, benne:
- Teljes képernyős háttér
- Húzható, átméretezhető ablak
- Kis méret, teljes méret és bezárás viselkedés
- Füles tartalom az ablakon belül
- Reszponzív média (a képek és videók helyesen méreteződnek)
- Asztali ikon Windows-stílusú kijelöléssel
- Dupla kattintásra megnyíló alkalmazás, billentyűzetfókusz támogatással
- Minden egyetlen HTML-fájlban fut.
A vizuális stílus a 7.css-ből jön, ami fantasztikus munkát végez a Windows 7 UI-elemeinek pusztán CSS-sel való újraalkotásában. Minden viselkedés: a húzás, az átméretezés, az ablakállapot kézzel írt JavaScript.
A szórakoztató (és trükkös) részek
Ez a projekt tele volt apró, érdekes problémákkal:
- Hogy a húzás stabilnak érződjön, „beragadt egér” bugok nélkül
- Az átméretezési élek és sarkok helyes kezelése
- Hogy a flexbox elrendezések jól viselkedjenek egy átméretezhető ablakban
- Hogy a beágyazott videók megtartsák a képarányukat átméretezés közben
- A z-index és a pointer-event szélsőséges esetei
- Hogy a „bezárás” tényleg megbízhatóan elrejtse az ablakot
A móka nagy része itt volt.
Miért nincs framework?
Mert nem volt rá szükség.
Ez a projekt emlékeztető arra, hogy:
- A DOM erős
- A Pointer Events nagyszerű
- A flexbox rengeteg elrendezési problémát megold
- A vanilla JS tökéletesen alkalmas kis UI-rendszerekhez
- Van valami felüdítő abban, ha megnyitsz egyetlen fájlt, és mindent tisztán kiterítve látsz.
Az eredmény
A végeredmény nem éles használatra szánt szoftver. Játékos, nosztalgikus kísérlet, emlékeztető arra, hogy az asztali metaforák még mindig meglepően jól fordíthatók le a webre.
És őszintén: egyszerűen jó volt megépíteni.
Mi jöhet még? (Talán)
Ha valaha bővíteném, a lehetséges ötletek:
- Tálca a kis méretre tett ablakokkal
- Több ablak rendes fókuszsorrenddel
- Aero-stílusú illesztés
- Egy kamu Intéző vagy Jegyzettömb alkalmazás
- Opcionális Windows 7 hangeffektek
De lehet, hogy pontosan így marad, egy kész kis játékszerként.
Néha a legjobb projektek azok, amiket csak azért építesz, mert megteheted.
Ez is egy ilyen volt.