Weboldalak építése a 90-es években: Szerelmeslevél a káoszhoz, amit kódolásnak hívtunk

Nem mindig volt ilyen csiszolt és滴水 a net. Volt olyan idő, amikor az oldalad látogatottsági számlálója becsületbeli kérdés volt, a Geocities volt a menő hely, és az "építés alatt" GIF-ek kötelező dekorációnak számítottak. Ha építettél weboldalakat a 90-es években, emlékszel egy egyszerűbbnek – némelyek szerint vadabb – korszakra a webfejlesztésben.

Üdv a kreatív problémamegoldás korában, ahol nulla dokumentáció állt rendelkezésre.

A Spacer GIF: A Layout Művészet apró hőse

Mielőtt megjelent volna a Flexbox, mielőtt a CSS Grid-et bárki megálmodta volna, és mielőtt bárki-responsive design-ra gondolt volna, létezett az 1x1.gif. Ez az átlátszó pixel volt a 90-es évek webfejlesztésének svájci bicskája.

El kellett tolni egy oszlopot? Spacer GIF. Kellett egy kis légtér az elemek közé? Spacer GIF. Függőlegesen középre akartál igazítani valamit egy táblázatcella mélyén? Mindegy, a spacer GIF és a 100%-os magasság atributum kombinációja jelentette a megoldást.

Nem voltak responsive egységek, nem voltak viewport számítások. Volt helyette egy nullkilobytesos átlátszó kép és egy titkos kívánság, hogy a táblázatos elrendezés nem omlik össze a Netscape Navigator 4-en.

A szép irónia? Ezek a spacer GIF-ek gyakorlatilag a világ első minimál CSS framework-jét jelentették. Egy pixel. Végtelen lehetőség. Totális hack. Imádtuk minden pillanatát.

A Nem-törhető szóköz kora: Amikor az ASCII művészet találkozott a webdesignnal

      

Ha gyerekként ezt begépelted, tudtad, mit jelent a hatalom. A nem-törhető szóköz entitással hoztunk létre behúzásokat, távolságokat, és néha egész vizuális elrendezéseket anélkül, hogy hozzáértünk volna a CSS-hez (ami amúgy sem létezett igazán).

A trükk egyszerű volt: pakoltál annyi  -t, amennyit csak bírtál, és már tolhattad is a tartalmat, amerdig akartad. Egyedi gomb alakot akartál? Pakoltál   karaktereket. Vizuális szegélyhatást akartál képek nélkül? Csak verted a szóköz billentyűt és nézted, ahogy a varázslat megtörténik.

Volt benne szemantika? Határozottan nem. Elérhető volt? Drága Isten, dehogy. De működött 800x600-as monitorokon, betárcsázós kapcsolaton keresztül? Hát persze, hogy működött, még ha az a 56k-s modem vonyított is közben.

A Marquee és Blink korszak

A mai CSS animációk gördülékenyek, hatékonyak, és tisztelik a felhasználói beállításokat. A 90-es években volt helyette a <marquee> tag a görgő szöveghez és a <blink> a kötelezően olvashatatlanságot biztosító villogtatáshoz.

A kettő kombinálása jelentette a csúcsinnovációt. Nem Programoztál igazán, amíg be nem ágyaztál egy villogó bejelentést egy görgő bannerbe, mindezt egy size="1" font tagekbe csomagolva, mert a kisebb = professzionálisabb logika szerint.

<marquee>
  <blink>
    <font size="1" color="purple">
      ÜDVÖZLÖM A HONLAPOMON!!!1
    </font>
  </blink>
</marquee>

Ez volt a mi React-ünk. Ez volt a mi Vue-nk. Ez a framework egyesítette az egész amerikai tinédzser kódergenerációt.

CSS: A "text-decoration: none" forradalom

Amikor végre megérkezett a CSS, tudod, mi volt az első, amit csináltunk vele? Kikapcsoltuk az aláhúzást a linkekről.

a {
  text-decoration: none;
}

Ennyi. Ez volt a CSS grandiózus debütálása a legtöbb weboldalon. Eltávolítottuk azt a vizuális jelzést, ami mutatta a felhasználóknak, hova kattinthatnak – mert őszintén szólva, az aláhúzás csúnya volt.

Volt még cursor: hand is (mielőtt a cursor: pointer lett volna a szabvány) és néha-néha némi keret-effektus. Teljesen dekoratív. Nulla gyakorlati haszon. Abszolút nélkülözhetetlen hangulat.

DHTML: JavaScript és káosz házassága

A DHTML – Dynamic HTML – mindent megváltoztatni készült. A CSS manipulálás és a JavaScript kombinálásával valóban interaktív élményeket hozhattunk létre. Mint például:

• Hópelyhek hullása a képernyőn
• Alert ablakok betöltéskor
• Harmonika menük image map-ekből építve
• Egyedi marquee effektek <div> tag-ekkel

A web tele volt "csúcstechnológiás" scriptekkel, olyan oldalakról, mint a Dynamic Drive. Nem írtál funkciót – másoltál 50 sornyi kódot, amit nem értettél, és csak remélted, hogy működik Internet Explorerben és Netscape-ben is.

Ez gyakorlatilag a Stack Overflow előtti Stack Overflow másolás korszaka volt. Mindannyian csak bukdácsoló fejlesztők voltunk, akik megpróbálták lehetetlent varázsolni a <div> elemekből.

Pixel betűtípusok és Splash screenek

Ja, a pixel betűk. Mert a rendszerbetűk azoknak valók voltak, akik még nem fedezték fel a Fontselfet.

A 90-es évek webfejlesztői amatőr tipográfusok lettek, megszállottjai a kicsi, blokkos betűtípusoknak, amelyek élesen néztek ki 6pt méretben is. A Comic Sans forradalmi volt (és tényleg menő). A Tahoma volt a profik választása. Bármi más gyanús volt.

Sok oldal splash screennel indult – nagy képekkel és "Kattints ide a belépéshez" gombokkal. Miért? Mert a betöltési idők amúgy is elég hosszúak voltak ahhoz, hogy érdemes legyen vizuális köztes oldalt betenni. Meg amúgy is, a mozihoz hasonló élményt nyújtott. VIP kezelés.

Amit a káoszból tanultunk

A 90-es évek webfejlesztéséről van szó: valós időben találtuk ki az internetet. Nincsenek tutorialok. Nincs dokumentáció. Csak "forrás megtekintése", próba-sikertanulás, és IRC csatornák a hibaelhárításhoz.

Megtanultuk:

• A korlát kreativitást szül. A korlátozott eszközök kényszerítettek a kreatív megoldásokra.
• "Működik" = érvényes. Az élesben működő néha annyit jelent, hogy "elég jól működik."
• A web fejlődik. Ami ma korszerűnek tűnik, az holnap nosztalgia lesz.

A mai webfejlesztés végtelenül erősebb. Vannak responsive frameworkök, CSS változók, JavaScript, ami nem omlik össze a Netscape-en, és olyan hosting platformok, mint a NameOcean, amelyek szinte túl könnyűvé teszik a deployolást. De valamit elvesztünk – azt a rusnya DIY szellemet, ahol tisztán elszántságból és pár HTML tagből építettél valamit.

Az örökség tovább él

A 90-es évek webdev generációja felnőve azzá lett, akik a modern internetet építik. A kreatív káoszt csatornáztuk át frameworkökké, eszközökké és platformokká, amelyek soha nem látott módon teszik elérhetővé a fejlesztést.

Szóval legközelebb, amikor regisztrálsz egy domaint, deployolsz egy statikus oldalt, vagy csodálkozol, milyen könnyű lett a cloud hosting, hajts fejet a spacer GIF generáció előtt. Lehet, hogy táblázatokat használtunk elrendezésre és  -t távolságra, de mi raktuk le az alapjait annak a webnek, amit ma élvezel.

Most pedig ha meghajolok, megyek, hozzáadom a cursor: url(tűzgolyó.gif)-t a CSS-emhez és megnézem, mi történik.

Mi a legkorábbi webfejlesztési emléked? Írd meg a kommentekbe – vagy csak írd alá a vendégkönyvemet. A nosztalgia mindig nyitva van.