Szeretek problémákat megoldani, mindig is szerettem, ebből adódott az is, hogy nagyon sokáig - amíg nem kellett managerekkel veszekedni és haszontalan meetingekre járni - a munkámmat is élveztem. Mivel most éppen két munkahely között vagyok, és főként a kertben tevékenykedek (építettem egy kerti tavat, aztán nekiálltam a kocsibeállónak), illetve mivel az utóbbi időben a munka során sem túl sok kreatív problémát kellett megoldanom, ezért kitaláltam, hogy csinálok egy kis programozási kihívást magamnak.

A cél egy kis, lehetőleg 1KB alatti “weboldal”, ami egy quine, azaz a saját forráskódját írja ki, kb. elférjen egy desktop böngészőablakban, és lehetőleg csináljon is valamit.

Egyszer már csináltam egy hasonlót, amikor az előző munkahelyemet “alapítottuk”, úgyhogy témaként a következő munkahelyem logóját választottam.

Kb. 4 óra játszadozás után sikerült is összehozni a dolgot, az eredmény (kis módosítással, de erről majd később) itt tekinthető meg, a forráskódja, illetve pár fázis a játszadozás során itt (github).

A folyamat⌗

Páran kérdezték, hogy hogyan állok neki egy ilyennek, úgyhogy pár köztes verziót a progress könyvtárban hagytam, illetve írok róla pár szót.

Első körben a logót rajzoltam meg, majd elhelyeztem egy HTML oldalban egy <pre> tag-ben - ennek a tartalma lesz a kód, amit egy onload=eval(...) segítségével futtatok.

Ez elsőre kicsinek tűnt, nagyítottam rajta, majd hozzáadtam a minimális kódot, ami kicsit kiszínezi, illetve futtat egy loop-ot, amibe majd az animációt tudom tenni. Ezt egyelőre csak simán a logó alá tettem, a golfozás (a kód minimalizálása/beillesztése) majd később jön.

A javascript elég megengedő, rengeteg trükköt lehet alkalmazni, hogy egy-egy függvényhívás beférjen a résekbe, vagy hogy a “felesleges” egy-két karakternyi rést valamivel feltöltsük - ezekbe nem is mennék bele.

Első lépésben a “statikus” részeket golfoztam a helyükre, és mikor körvonalazódott, hogy mennyi helyem marad, elkezdtem hozzáadni az animációt - ami ebben az esetben a “teljes blokk” karaktereket cseréli valami “töredezett” változatra.

A maradékot is a helyére pofozva viszont szomorúan láttam, hogy túl sok hely maradt szabadon. Szerencsére nem is annyira tetszett, hogy minden blokk töredezik, ezért töredezést is feltételhez kötve már sikerült kitölteni a szabad helyet - ehhez természetesen vissza kellett csinálni egy jó adag golfozást és újracsinálni, de hát ez erről szól.

Ezzel a verzióval már szinte elégedett voltam, de a legutóbbi változtatás miatt a töredezett blokkok eloszlása elromlott. Minimális változtatással azonban a töltelék-karakterek helyének felhasználásával sikerült ezt is megoldanom, és ezzel - kb. 4 óra alatt - elő is állt a végleges változat.

Works on my machine⌗

Lelkesen körbe is küldtem pár havernek, akik - bár elismerték a teljesítményt - nem értették, hogy én miért örülök ennyire ennek: bitnet logo, majdnem

A következő szintén kb. 4 óra pedig arról szólt, hogy szerezzek egy olyan fix-pontos, a blokk karaktereket is támogató betűtípust, aminek a licenszelése is megfelelő, és minden platformon - <3 safari - hasonlóan néz ki. Sikerült, de ezt a részt kevésbé élveztem ;)