Sadece 90'ların web geliştiricilerinin hatırladığı şeyler (2014)

 (zachholman.com)
1 puan yazan GN⁺ 2024-01-26 | 1 yorum | WhatsApp'ta paylaş
  • 1990'larda kişisel web, standartlaşmış yerleşim araçlarının yetersiz olduğu; , , 1x1.gif,  , DHTML gibi tekniklerle yerleşim ve efektlerin zorla oluşturulduğu bir dönemdi
  • CSS yerleşimi yaygınlaşmadan önce 1x1.gif ve tekrarlanan  , öğelerin konumunu itip kakmak için kullanılan temel yerleşim araçları gibiydi; yazı bunu abartılı bir nostaljiyle hicvediyor
  • İlk CSS kullanımı, bağlantı alt çizgisini kaldırmak ve a:hover stilini değiştirmek gibi küçük görsel efektlere odaklanıyordu; bunun sonucu olarak bağlantılarla normal metin arasındaki ayrım bulanıklaştı
  • DHTML, CSS ve JavaScript'i karıştırarak yükleme alert(), kar taneleri, akordeon menüler, özel `` gibi efektler üretmeyi sağlayan kopyala-yapıştır kültürüyle iç içeydi
  • Piksel fontlar, 88x31 düğmeler, Internet Explorer 4.0, GeoCities, FrontPage ’98; o dönemde kişisel web sitelerinin teknik tercihlerini ve kimliklerini sergileme biçimi olarak öne çıkıyordu

ve animasyon sayılırken

  • öğesini içine koymak, 1990'lar web'inde büyük bir bilgisayar animasyonuymuş gibi, şaka yollu anlatılıyordu
  • 1990'ların web geliştiricilerinin, bugünün jQuery'si ya da ilişkisel olmayan veritabanlarından daha önemli hikâyelere sahip olduğu yönünde abartılı bir gurur hissi var

1x1.gif ile sayfayı iterek kurulan yerleşim

  • 1x1.gif, spacer.gif, transparent.gif adlarının hepsi 1 piksel × 1 piksel saydam GIF anlamına geliyor
  • HTML görsellerinde WIDTH ve HEIGHT nitelikleri büyük verilerek görünmeyen alan oluşturulabiliyor, böylece sayfa öğeleri istenen konuma itilebiliyordu
  • Örnek kod, , , , , ``, web sayacı CGI'sini birlikte kullanarak yapıyı ve süslemeyi aynı anda hallediyor
  • 1x1.gif'in öğeleri sayfada istenen her yere yerleştirmeyi sağladığı, hatta bugün bile dikey ortalamanın tek yöntemi olduğu yönündeki hiciv sürüyor

  ile elle ayarlanan boşluklar

  • Görsel etiketi kullanmak zorsa,   karakterini tekrar ederek aralık ayarlamak da mümkündü
  • PLEASE SIGN ile MY GUESTBOOK BELOW: arasına birden çok   koyarak guestbook metnini yerleştiren bir örnek veriliyor
  • 1990'larda kullanılan her   için bir nikel alınsaydı, AOL'un aylık aşım ücretlerini ödemeye yetecek kadar para birikirdi esprisi yapılıyor

İlk CSS önce bağlantı alt çizgilerini kaldırdı

  • CSS, HTML'nin altın çağının sonunda ortaya çıkıp içerikle stili ayırma vaadi sunan bir teknoloji olarak tanıtılıyor
  • O dönemde CSS ile yapılan ilk şeylerden biri, bağlantıların alt çizgisini kaldırmaktı
  • Bağlantılar metin gibi, metinler de bağlantı gibi görünmeye başlayınca nereye tıklanacağını anlamak zorlaştı
  • Fare imlecinin arkasında alevli bir iz bırakan efekt de anılıyor
  • 2000 tarihli index.shtml dosyası örneğinde satır içi CSS olarak yalnızca a:hover {text-decoration: none; color: #000000} yer alıyor
    • Bu kod, hover durumunda alt çizgiyi kaldırıp rengi siyaha çeviriyor
    • Dosyanın SSI kullanan bir index.shtml olması da ayrıca şaka konusu yapılıyor

DHTML ve kod kopyalama kültürü

  • CSS ile bağlantı alt çizgisini kaldırdıktan sonra, JavaScript ile sayfa yüklenince alert("Welcome to my website!") gösterme akışı geliyor
  • CSS ile JavaScript'in birleşimi, DHTML adlı “korku teknolojisi” olarak hicvediliyor
  • DHTML efektleri arasında sayfanın üstünden düşen kar taneleri, akordeon menüler, animasyonlu image map'ler, ile yapılmış özel yer alıyor
  • Dynamic Drive gibi siteler sayesinde sorunu gerçekten çözmek yerine 50 satırlık bir kod bloğunu kopyalayıp yapıştırmanın çözüm sayıldığı anlatılıyor
  • DHTML, dönemin Twitter Bootstrap'ine benzetiliyor

Piksel fontlar ve düşük çözünürlük estetiği

  • O dönemde bilgisayar ekranları CRT olduğu için fiziksel olarak büyük ama çözünürlük açısından yüksek değildi
  • Sınırlı pikselleri verimli kullanmak için 6 punto düzeyinde küçük yazı tipleri tercih ediliyordu
  • Basit piksel tabanlı yazı karakterlerini gören web geliştiricileri illüstratör olmaya hevesleniyor, splash ekranlarına izometrik piksel illüstrasyon koymayı deniyordu
  • O zaman ve parayı Photoshop kurmak yerine dot-com halka arzlarına yatırmanın daha iyi olabileceği esprisi de ekleniyor

Internet Explorer 4.0 ve 88x31 düğmeler

  • Bugün insanların Internet Explorer'dan nefret etmesinin sebebinin, Internet Explorer 4.0'ın “saf formundan” uzaklaşılması olduğu şeklinde bir hiciv yapılıyor
  • Internet Explorer 4.0, Active Desktop ve Channels içeren kusursuz bir tarayıcıymış gibi abartılıyor
  • O dönem sitelerde, ziyaretçiye hangi tarayıcıyı kullanması gerektiğini ve hangi araçlarla hizmetleri kullandığını gösteren 88x31 piksellik düğmeler sıkça yer alıyordu
  • Bu düğmeler, asker üniformasındaki madalyalar gibi, site sahibinin tercihlerini ve aidiyetlerini gösteren araçlara benzetiliyor
    • Editör örneği: FrontPage ’98
    • Web sunucusu örneği: GeoCities
    • Web ring'lerin siteyi en üste çıkaracak bir yer olması istendiği ama gerçekte böyle bir yerin olmadığı esprisi de var

Bugünün web'ine yönelik şaka

  • Günümüz web'i, JavaScript üzerine birden fazla soyutlama katmanının yığıldığı bir yapı olarak tasvir ediliyor
  • JavaScript'in matematiği bile düzgün yapamadığı yönündeki şakayla birlikte, bugünkü web'e gelinmiş olmasının şaşırtıcı olduğu söylenerek kapanıyor
  • Bir sonraki pull request'e bolca   ekleyip ekibi şakayla rahatsız etme önerisiyle bitiyor

İlgili okumalar

1 yorum

 
GN⁺ 2024-01-26
Hacker News yorumları

  • Sunucu taraflı image map konusu gerçekten bana hiç yabancı gelmiyor
    Bir web programcısından çok, ara sıra web tabanlı araçlar yapan bir sistem yöneticisi olduğum için web becerilerim 2000'lerin başında takılı kaldı; JavaScript'e karşı da tuhaf bir mesafem var. Yakın zamanda bir araçta bir görüntü üzerindeki noktalarla ilgili temel bir davranışa ihtiyacım oldu; JavaScript ile 5 satırda çözülecek işi 2023'te sunucu taraflı image map ile hallettim
    Sonunda JavaScript'in 5 satırı yerine durumu yöneten 50 satır Python ve garip fragment söz dizimini işleyen request handler'da özel bir durum ortaya çıktı; biraz utanç verici ama yine de çalıştırmayı başarmak tuhaf biçimde gurur verdi

    • Sunucu taraflı image map'in en kötü yanı arşivlemeyi tamamen bozması
      archive.org Wayback Machine'de eski bir site bulduğunuzda, ana sayfanın tamamı sunucu taraflı image map ise, özgün sunucu olmadan sitenin geri kalanındaki hedef URL'leri öğrenmenin yolu yok; tamamen çıkmaz sokak oluyor
    • 2015'te Chromium'un sunucu taraflı image map desteğini düzeltmiştim
      O dönemde neredeyse bozuktu: yakınlaştırma/uzaklaştırma %100 değilse veya padding 0 değilse koordinatlar kayıyordu; benzer birkaç sorun daha vardı. Kimsenin fark etmemesinin nedeni image map'lerin zaten neredeyse hiç kullanılmaması, sunucu taraflı image map'lerin ise daha da az kullanılmasıydı
      Ben de JavaScript olmadan kolayca kurtulmak istediğim için 90'ların HTML'ini hatırladım; ama sonunda Chromium hatasını düzelttikten sonra sunucu taraflı image map'in pek iyi olmadığı sonucuna vardım, JavaScript kullandım ve JavaScript sürümü daha iyiydi
    • “Bu cehennem gibi şeyin tamamında sadece 5 satır JavaScript olsa bile programıma koymam” hissine tamamen katılıyorum
      HTMX gerçekten kurtarıcı gibi; Tailwind UI satın alırsanız herkes frontend'de epey tehlikeli biri hâline gelebilir. Yine de JavaScript'in neden içe sinmediğine dair başka bakış açılarını da merak ediyorum. Kişisel olarak söz dizimindeki tutarlılık eksikliği büyük etken; TypeScript tarafında ise sadece node_modules klasörüne bakmak bile midemi bulandırıyor
      Genel olarak neler olup bittiğini kontrol edemediğim hissi yüzünden uzun süre frontend'den uzak durdum
    • 2019'un sonunda evden, şirketteki bir cihazın GUI'sini kullanmam gerekiyordu; uzak masaüstü yoktu, sadece ekran görüntüsü aracı ve tıklama enjekte eden bir komut satırı aracı vardı
      Birkaç düzine satır Lisp ile ekrandaki image map'i sunan bir web sunucusu yaptım; image map isteği geldiğinde de tıklama ekliyordu. İşe gidip gelmekten kaçınmak için yaptığım küçük, tek kullanımlık bir araçtı; sonra COVID patlayınca çok fazla insan kullanmaya başladı ve bugün hâlâ birileri kullanıyor olabilir

  • “Bugün bile bir öğeyi dikeyde ortalamanın tek yolu” artık doğru değil; ama son 30 yılda div içinde doğrudan vertical-align: middle; kullanamamanın üretkenlik maliyeti muhtemelen milyarlarca dolardı
    IE4 ya da IE6 dönemlerinde bağlantı :hover durumuna overline stili verme modasını da hatırlıyorum. Tablolarla yuvarlak köşeli div ve düğmeler yapardık; 2000'lerde de Photoshop'ta kesip tablo hücrelerine yerleştirme eziyeti sürdü

    • O zamanlar tablo hücresinin içinde VALIGN=MIDDLE vardı
      90'larda mümkün müydü bilmiyorum ama 2000'lerde kesinlikle vardı
    • Bugünlerde böyle CSS'leri ChatGPT'ye yazdırıyorum; komik olan, en az on iki farklı çözüm üretiyor gibi görünmesi
      Ama çoğu zaman 2-3 kural yeterliyken 5'ten fazla kural ekleyen türden gereksiz tekrarlar da araya karışıyor. Gerçekten gülünç derecede aptalca
    • Tablolarla yuvarlak köşe yapma dönemi gerçekten modaydı
      O lanet köşeler yüzünden ne kadar zaman harcadığımızı bilmiyorum
    • Dikey hizalama bugün bile hâlâ büyük bir baş belası ve pek çok ince ayrıntıyı anlamayı gerektiriyor
      Tailwind CSS'te bile basit değil; öğenin blok mu, metin mi olduğu, üst öğenin layout'unun ne olduğu gibi şeyleri sürekli düşünmek gerekiyor
    • Sevdiğim CSS hack'lerinden biri div { display: table-cell; vertical-align: middle; }
      Her durumda işe yaramıyor ama başta kirli hissettirse de sorumlulukların ayrımı hâlâ korunuyor ve belirgin başka bir dezavantaj da görünmüyor

  • Bu bağlamdaki DHTML, Distributed HTML değil Dynamic HTML idi; Dynamic Drive'daki Dynamic de buradan geliyor

    • “DHTML elbette distributed HTML'dir” bir şakaydı ama sanırım yanlış alıntılanmış
      Başkalarının da aynı şekilde yanlış alıntıladığını görünce, yazarın yakın zamanda bunu şakayla karışık değiştirmiş olabileceği de akla geliyor
    • Yine de “Technology of Terror” tanımı itirazsız biçimde hâlâ geçerli
    • Aşağıdaki “sadece kopyalayıp yapıştırabiliyordunuz” kısmına gönderme yapmaya çalıştığını düşündüm; belki de DCOM'a yapılmış bir kelime oyunuydu
    • Aşağıdaki başlıkta tartışılmıştı: https://news.ycombinator.com/item?id=39127528
      Sonuç, bunun bir şaka olduğu ama iyi bir şaka olmadığı yönündeydi
    • Görünüşe göre burada gerçekten eğlence karşıtlarını bulmuşuz

  • Frame’leri de atlamamak gerek. Her sayfanın gezinme çubuğunu değiştirme sorununa getirilen ilk “çözüm” buydu.
    Sorun şuydu: arama motorları her frame sayfasını ayrı ayrı indeksleyebiliyordu; biri doğrudan bir frame sayfasına girerse ne yapılacağını ele almak gerekiyordu. Bölümler arasındaki kesik çizgiler de her zaman belirgindi; bu da tuhaf ve rahatsız ediciydi.

    • Gerçek ustalar server-side include kullanırdı.
      HTML’in içine özel bir yorum koyardınız; Apache bunu istemciye göndermeden önce başka bir dosyanın içeriğiyle değiştirirdi.
    • Başka bir web sitesi sayfamı bir frame’in içine koyarsa frame-buster script’i dağıtırdım; sayfa benim frame’im olmadan yetim kalırsa frame-joiner script’ini çağırırdım.
    • Frame’ler bugün bile temel microfrontend teknolojisi olarak şaşırtıcı derecede iyi kullanılıyor.
      Teorisi https://martinfowler.com/articles/micro-frontends.html#Run-t... adresinde, uygulaması ise https://luigi-project.io üzerinde görülebilir.
    • JavaScript’in “AJAX” tarzı kullanımının gülünç derecede büyük bir kısmı frame’lerle de halledilebilirdi; frame’ler duraksamayıp biraz daha gelişseydi performansın da daha iyi olması büyük olasılıktı.
      Buna bir de HTML tablolarının temel özelliklere sahip olduğunu, veri kaynağı tabanlı tablo ve liste görünümlerinin 2000’lerin ortasında sunulduğunu eklesek, muazzam miktarda zaman ve para tasarrufu sağlanabilirdi.
      Web ödeme standartlarını benimseyip tarayıcının kendisi ödeme girişini işleseydi ne kadar para tasarruf edilebileceğini anlatmaya başlasam sonu gelmez.
    • Bölümler arasındaki sınırlar tarayıcıdan tarayıcıya tam olarak aynı da değildi.
      Çocuklar, herkesin aynı tarayıcıyı kullanmadığı zamanlar vardı.

  • 1996’da Microsoft ana sayfasında, fareyle üzerine gelince açılan bir menü çubuğu vardı; bunun nasıl çalıştığını çözmeye kafaya koymuştum.
    O dönem IE’de “Kaynağı Görüntüle” düğmesi vardı ama platform hissi zayıf olduğundan belge Notepad’de açılıyordu; sunucu Unix olduğu için satır sonları \n idi, Windows ise \r beklediğinden HTML kaynağı tek satırlık upuzun bir belge gibi görünüyordu.
    Kaynağı didik didik incelediğimde HTML etiketlerinin hepsi bildiğim şeylerdi, içerik de sayfada görünen metinden ibaretti. Tanımadığım tek şey HTML entity’leriydi; hareketli menüsü olan her sitede göründükleri için kesinlikle bununla ilgili olduklarına inanmıştım.
    Altı ay boyunca DHTML efektlerinin, meğer HTML entity olan şeylerin sihirli büyüleriyle uygulandığına inandım; sonra WebMonkey eğitimini bulmam tüm kariyerime uzanan yolu açtı.

    • Kaynağı Görüntüle benim başlangıç noktamdı.
      Minifier’lar ve derleyiciler harika ama iyi tasarlanmış sitelerin düzenli ve bakımlı kaynak kodunu okuduğumuz günleri gerçekten özlüyorum.
      Keşke üretim kodunda da özgün kaynak biçimini koruyan ve dünyanın dört bir yanındaki insanların kodumuzu okuyacağı beklentisini sürdüren bir sıkıştırma yaklaşımına gitseydik diye düşünüyorum. Erken dönem web’in hızla gelişmesinde bu kültürün de büyük payı vardı; benim sektöre giriş hikâyemde de kesinlikle önemli bir yer tutuyordu.
    • O zamanlar hareketli menüyü gerçekte neyin oluşturduğunu merak ediyorum. O dönemde kod yazan kuşaktan olmadığım için muhtemelen bir etiket ya da script neden oluyordu diye düşünüyorum.
    • Fare üzerine gelince görseli değiştirmek isterken benzer bir deneyim yaşamıştım.
      Barnes & Noble’dan JavaScript Bible alıp hafta sonu boyunca okudum; sonrasında da öğrenmeye devam ettim.
    • WebMonkey ha, anılar bir anda canlandı.

  • Tabloların yuvarlatılmış köşeler için de kullanıldığını unutmamak gerek.
    3×3 bir tablo yapıp ortadaki hücre hariç hücrelere görseller koyarak yuvarlatılmış köşelere sahip web sitesi öğeleri oluştururduk; bu, insan ifade gücünün zirvesi gibi hissettirirdi.
    HTML e-posta da modaydı ve e-posta istemcileri tarayıcılardan çok daha yavaş güncellendiği için, düzgün görünmesini istiyorsanız bu teknik 2010’lara kadar bile kullanıldı.

    • 3×3 tablolar için tl.gif, tr.gif, bl.gif gibi görsel setleri hazırladığımı asla unutamam.
      O dönemde tarayıcılar boş hücrelerin arka plan görsellerini render etmediği için, sol ve sağ hücre arka planlarının görünmesi adına metinde bahsedilen 1x1.gif de gerekiyordu. Güzel günlerdi.
    • border-radius’a kavuşur kavuşmaz tasarım modası değişti ve artık kimse yuvarlatılmış köşe istemez oldu.
    • Yazıdaki birçok madde 90’lardan çok 2000’lerin başına daha yakın gibi.
      Tablolarla yuvarlatılmış köşe yapmadan önce Trillian adlı çoklu sohbet uygulamasını skin tasarlar gibi kurcaladığımı hatırlıyorum. Yahoo Chat, ICQ vb. destekliyordu; yuvarlatılmış köşeleri ele alır gibi üst ve yan hücrelere tekrar eden görseller koyarak pencere boyutlandırmasının düzgün çalışmasını sağlıyorduk.
    • https://www.folklore.org/Round_Rects_Are_Everywhere.html
      Büyük ve kudretli Oz’un en büyük başarısıydı. Gerçi iPhone daha büyük olmuş olabilir.
    • Tablolar gölgeler için de kullanılırdı.

  • 90’lar/00’lar web sitesi denince “800×600 çözünürlük için optimize edildi” düğmesi eksik olmazdı.
    Biraz daha havalı görünmek istiyorsanız “Valid HTML 4.01” de eklerdiniz.
    O zamanlar reklamlar, bugünün karmaşık JavaScript paketleri ve video reklamları değil, basit standart boyutlu banner’lardı. Norton Internet Security 2003’ün ziyaret edilen sayfanın HTML’ini sessizce yeniden yazıp yalnızca standart reklam boyutlu banner’ları kaldırdığını, geri kalanına dokunmadığını görünce şaşırdığımı hatırlıyorum. Bu aynı zamanda reklam engelleyicinin bir güvenlik çözümü olduğunun 20 yıllık bir teyidi.

  • Yazının tamamında webmaster kelimesinin bir kez bile geçmemesi, Zach’in gerçekten 90’larda bulunup bulunmadığını sorgulatıyor.

    • 90’ların sonunda yaptırdığım “Webmaster” kartvizit hâlâ duruyor.
      O zamanlar bu unvanın ne kadar “havalı” olduğunu kimse anlayamaz. Şimdi bakınca ben bile utanıyorum ama gerçekten çok güzel anılarım var.
    • Kendini resmen “webmistress” diye adlandıran bir kadınla çalışmıştım.
      Şaka değildi.

  • 90’ların web’ini bizzat deneyimlemek istiyorsanız The Geocities Gallery https://geocities.restorativland.org/ sitesini öneririm
    Bu tür kişisel web sayfalarında güzel bir şey var. Her sayfanın kendine özgü belirgin bir görünümü var ve bu bile yazarının kişiliği hakkında çok şey gösteriyor
    Genelde bir kendini tanıtma yazısı, rastgele birkaç kişisel fotoğraf, kısa açıklamalar eklenmiş önerilen bağlantılar listesi ve hobiler hakkında gevşek yazılar bulunuyor; bu yüzden çok kişisel ve sakinler. Tüm profil sayfalarının aynı derecede sönük ve sıkıcı göründüğü, durmadan uzayan içerik akışı ve belirli bir yaşam imajını sürdürme baskısı olan günümüz sosyal medyasıyla keskin bir tezat oluşturuyor

    • Bu sayede kendimi bir tavşan deliğine düşmüş buldum
      Area51 altında hangi dizinde olduğunu hatırlamadığım, belki de arşivlenmemiş olabilecek eski sitemi arayarak ve sadece o dönemi yeniden yaşayarak epey zaman geçirdim
      Hafıza garip. Geocities’e bakınca eski internetin kokusu bile aklıma geldi; muhtemelen bilgisayarın bulunduğu aile odasının kokusuydu
    • 90’ların ortasında Windows’un tuğla arka planını şeffaf GIF grafitileriyle birleştirip oldukça havalı bir efekt oluşturduğumu hatırlıyorum
      ACID, ICE, FIRE gibi BBS sanat gruplarının erken dönem çalışmaları da o zamanlar gerçekten çok havalıydı
      IE5/6 hâkimiyetinden önce daha gelişmiş şeyler genelde Flash’a kaydı. 2000’lerin başında E4X tabanlı, React’e benzeyen bir framework yapmıştık; ActionScript/Flash/Flex ve Mozilla/Netscape bunu destekliyordu, VB.Net’in XML literal gösterimine de benziyordu
      Microsoft ve Google bunu benimsemedi ve sonunda JSON kral oldu

  • 90’larda web yerleşimi sorularının cevabı neredeyse her zaman table idi
    Metin hizası mı bozuk? Table. Havalı bir menü mü lazım? Table. Tüm siteyi mi yapıyorsunuz? İç içe table. Tasarımı satırlar ve hücrelerle hack’leyebiliyorken CSS’e neden ihtiyaç olsun ki

    • 2024’te de e-posta yerleşimi için bu hâlâ doğru
    • Ayrıca her hücreye font etiketi koymak gerektiğini de unutmamak lazım
    • O zamanlar her şey TDD idi. TD-Driven Design idi
    • Hâlâ table’ları seviyorum
      Dinamik tasarım için gerçekten harikalar; sütun/satır birleştirme, hizalama ve ağırlıkları da destekliyorlar. CSS hâlâ eski table’lardan çok daha karmaşık
    • Artık bunu yapmanın biraz daha anlamsal olarak doğru bir yoluna sahibiz