Zamanın ne kadar hızlı geçtiğini fark etmek bazen şaşırtıcı olabiliyor. Profesyonel bir yazılım mühendisi olarak 20. yılımı geride bırakırken, ilk HTML, CSS ve JavaScript kodlarımı keşfettiğim günleri hala hatırlıyorum. İlk üniversite programlama dersim, ilk iş günüm, Mozilla'daki ilk günüm ve MetaMask'taki ilk kod satırlarım... Tüm bunlar göz açıp kapayıncaya kadar geçti. Ancak her deneyimli geliştirici gibi, genç meslektaşlarıma eski bir programlama referansı yaptığımda boş bakışlarla karşılaşıyorum. İşte o an 'ne kadar yaşlandığımı' bir kez daha anlıyorum.
Web sayfalarının düzeni halaetiketleriyle yapılırken, yeni moda olan 'CSS float' özelliği standart haline gelmeye başlamıştı. Yuvarlatılmış köşeler için resimler ve Internet Explorer'a özel VML hileleri kullanılıyordu. FTP, web sitesi değişikliklerini yüklemenin en iyi yoluydu. SVN ve trunk kopyalama işlemi, en popüler versiyon kontrol aracıydı. alert() ve confirm() fonksiyonları, 'modal' pencerelerin standardıydı. Hata ayıklama için Firebug en iyi araçtı ve videoları düzgün oynatmak için doğru codec'i bulmak büyük bir uğraştı.
O zamanlar ActionScript bilgisi JavaScript kadar değerliydi, Dreamweaver ise en iyi metin editörü ve tasarım aracı olarak kabul ediliyordu. XML, veri yapılarının geleceği olarak görülüyordu. 'Mobile-first' kavramı yoktu çünkü mobil internet henüz emekleme aşamasındaydı. Reaktif navigasyon yerine Java Applet'leri vardı. Fare üzerine geldiğinde (mouseover) ve ayrıldığında (mouseleave) farklı
etiketleri kullanılarak basit etkileşimler sağlanıyordu. Masaüstü uygulaması yapmak isteyenler Adobe Air'e yöneliyordu.
NPM kısaltması 'not performant, man' (performanslı değil, dostum) olarak anılıyordu. Bir ankete oy vermek sayfanın yeniden yüklenmesine neden oluyordu. 'Sosyal medya' denince akla HotOrNot.com geliyordu. Web'in en sevilen sesi 56k modem bağlantısının o meşhur 'purrrrr' sesiydi. Sağ tıklamayı devre dışı bırakmak, resim güvenliği için yeterli görülüyordu. Bitmap (.bmp) formatı hala geçerli bir seçenekti. JavaScript'in JScript adında bir rakibi vardı.
Detaylar ve Etkileri
SpyJax adlı teknikle kullanıcıların nerede dolaştığı tespit edilebiliyordu. Çerezler (cookies) kullanıcı takibinin zirvesiydi. Sosyal medya duvarı aslında 'guestbook' (ziyaretçi defteri) olarak adlandırılıyordu. Arkadaş listesi ise 'web ring' (web halkası) olarak biliniyordu. SEO için
etiketine anahtar kelimeleri spam gibi doldurmak yeterliydi.</p><h3>Teknik Analiz</h3><p><strong>Tüm bunlar web'in</strong> ilk günlerinin birer yadigarı. Şimdi geriye dönüp baktığımda, ne kadar yol katettiğimizi görmek gerçekten etkileyici. Peki siz web dünyasında kaç yaşındasınız?</p><p class="post-source"><em>Kaynak: <a href="https://davidwalsh.name/im-so-old-1" target="_blank" rel="nofollow noopener">davidwalsh.name</a></em></p> </div> <!-- ADS SECTION — CLS için sabit yükseklik --> <div class="mt-5 mb-4 text-center"> <div id="container-2eb275699028da5a466582ba91a44bdd" style="min-height:280px;display:flex;align-items:center;justify-content:center"></div> <script async="async" data-cfasync="false" src="https://pl30155735.effectivecpmnetwork.com/2eb275699028da5a466582ba91a44bdd/invoke.js"></script> </div> <!-- TAGS --> <nav class="post-nav" aria-label="Yazı gezintisi"> <a href="https://niceblogger.net/blog/mac-terminalinde-tarih-ve-saat-ayari-komut-satiri-ile-zamani-degistirme" class="post-nav__link post-nav__link--prev"> <span class="post-nav__label">← Önceki Yazı</span> <span class="post-nav__title">Mac Terminalinde Tarih ve Saat Ayarı: Komut Satırı ile Zamanı Değiştirme</span> </a> <a href="https://niceblogger.net/blog/html-width-ve-height-ozelliklerini-css-ile-gecersiz-kilma-height-auto-cozumu" class="post-nav__link post-nav__link--next"> <span class="post-nav__label">Sonraki Yazı →</span> <span class="post-nav__title">HTML width ve height Özelliklerini CSS ile Geçersiz Kılma: height: auto Çözümü</span> </a> </nav> <div class="post-tags"> <span class="post-tags__label"> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg> Etiketler: </span> <div class="post-tags__list"> <a href="https://niceblogger.net/tag/malware" class="tag-badge">malware</a> <a href="https://niceblogger.net/tag/veri-bilimi" class="tag-badge">veri bilimi</a> <a href="https://niceblogger.net/tag/iot" class="tag-badge">iot</a> <a href="https://niceblogger.net/tag/internet" class="tag-badge">internet</a> <a href="https://niceblogger.net/tag/windows" class="tag-badge">windows</a> <a href="https://niceblogger.net/tag/seo" class="tag-badge">seo</a> </div> </div> <!-- SHARE --> <div class="post-share"> <span class="post-share__label">Paylaş:</span> <a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Flocalhost%2Fblog%2Fweb-gelistiricilerinin-unutamadigi-o-eski-gunler-tablolardan-csse-yolculuk&text=Web+Geli%C5%9Ftiricilerinin+Unutamad%C4%B1%C4%9F%C4%B1+O+Eski+G%C3%BCnler%3A+Tablolardan+CSS%27e+Yolculuk" class="post-share__btn post-share__btn--twitter" target="_blank" rel="noopener noreferrer" aria-label="Twitter'da paylaş"> <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.259 5.632zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> </a> <a href="https://www.linkedin.com/sharing/share-offsite/?url=http%3A%2F%2Flocalhost%2Fblog%2Fweb-gelistiricilerinin-unutamadigi-o-eski-gunler-tablolardan-csse-yolculuk" class="post-share__btn post-share__btn--linkedin" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn'de paylaş"> <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg> </a> <button class="post-share__btn post-share__btn--copy" id="js-copy-link" title="Bağlantıyı kopyala" aria-label="Bağlantıyı kopyala"> <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> </button> </div> </article> <!-- SIDEBAR: TOC --> </div> </div> <!-- RELATED POSTS --> <section class="section section--related"> <div class="container"> <div class="section-header"> <h2 class="section-header__title">İlgili Yazılar</h2> <span class="section-header__line"></span> </div> <div class="related-posts-grid"> <article class="post-card"> <a href="https://niceblogger.net/blog/ninja-crispi-mikrodalga-artik-kalan-yemekleriniz-citir-citir-olacak" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_47760_1784276877.webp" alt="Ninja Crispi Mikrodalga: Artık Kalan Yemekleriniz Çıtır Çıtır Olacak" class="post-card__image" loading="lazy"> </a> <div class="post-card__body"> <a href="https://niceblogger.net/category/yazilim" class="post-card__cat-link" style="color:#8b5cf6">Yazılım</a> <h3 class="post-card__title post-card__title--sm"> <a href="https://niceblogger.net/blog/ninja-crispi-mikrodalga-artik-kalan-yemekleriniz-citir-citir-olacak">Ninja Crispi Mikrodalga: Artık Kalan Yemekleriniz Çıtır Çıtır Olacak</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Ninja'nın yeni Crispi Microwave'ı, mikrodalga ve air fryer'ı birleştirerek kalan yemek...</p> <div class="post-card__meta"> <span class="post-card__meta-item"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> 3 dk </span> <span class="post-card__meta-item"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> 4 </span> <span class="post-card__meta-item">1 gün önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/sosyal-medyada-glp-1-cilginligi-zayiflama-ilaclari-yeme-bozuklugu-kurtarma-surecini-nasil-tehdit-ediyor" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_47677_1783772005.webp" alt="Sosyal Medyada GLP-1 Çılgınlığı: Zayıflama İlaçları Yeme Bozukluğu Kurtarma Sürecini Nasıl Tehdit Ediyor?" class="post-card__image" loading="lazy"> </a> <div class="post-card__body"> <a href="https://niceblogger.net/category/yazilim" class="post-card__cat-link" style="color:#8b5cf6">Yazılım</a> <h3 class="post-card__title post-card__title--sm"> <a href="https://niceblogger.net/blog/sosyal-medyada-glp-1-cilginligi-zayiflama-ilaclari-yeme-bozuklugu-kurtarma-surecini-nasil-tehdit-ediyor">Sosyal Medyada GLP-1 Çılgınlığı: Zayıflama İlaçları Yeme Bozukluğu Kurtarma Sürecini Nasıl Tehdit Ediyor?</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">GLP-1 ilaçlarının sosyal medyada yaygınlaşması, yeme bozukluğu tedavisi gören bire...</p> <div class="post-card__meta"> <span class="post-card__meta-item"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> 3 dk </span> <span class="post-card__meta-item"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> 21 </span> <span class="post-card__meta-item">1 hafta önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/yapay-zeka-ajanlarina-yonelik-kotu-amacli-yetenekler-statik-tarayicilari-asmak-icin-kendini-paketleme-kullaniyor" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_90085_1783477803.webp" alt="Yapay Zeka Ajanlarına Yönelik Kötü Amaçlı Yetenekler Statik Tarayıcıları Aşmak İçin Kendini Paketleme Kullanıyor" class="post-card__image" loading="lazy"> </a> <div class="post-card__body"> <a href="https://niceblogger.net/category/yazilim" class="post-card__cat-link" style="color:#8b5cf6">Yazılım</a> <h3 class="post-card__title post-card__title--sm"> <a href="https://niceblogger.net/blog/yapay-zeka-ajanlarina-yonelik-kotu-amacli-yetenekler-statik-tarayicilari-asmak-icin-kendini-paketleme-kullaniyor">Yapay Zeka Ajanlarına Yönelik Kötü Amaçlı Yetenekler Statik Tarayıcıları Aşmak İçin Kendini Paketleme Kullanıyor</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Araştırmacılar, AI ajan yeteneklerini statik tarayıcılardan gizleyen SkillCloak yönt...</p> <div class="post-card__meta"> <span class="post-card__meta-item"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> 3 dk </span> <span class="post-card__meta-item"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> 12 </span> <span class="post-card__meta-item">1 hafta önce</span> </div> </div> </article> </div> </div> </section> </div><!-- /.blog-post --> <script> (function () { // TOC active link tracking var tocLinks = document.querySelectorAll('.toc-widget__nav a'); if (tocLinks.length) { var headings = []; tocLinks.forEach(function (link) { var id = link.getAttribute('href').replace('#', ''); var el = document.getElementById(id); if (el) headings.push({ el: el, link: link }); }); window.addEventListener('scroll', function () { var scrollY = window.scrollY + 120; var current = null; headings.forEach(function (h) { if (h.el.getBoundingClientRect().top + window.scrollY <= scrollY) { current = h; } }); tocLinks.forEach(function (l) { l.classList.remove('toc-active'); }); if (current) current.link.classList.add('toc-active'); }, { passive: true }); } // Copy link button var copyBtn = document.getElementById('js-copy-link'); if (copyBtn) { copyBtn.addEventListener('click', function () { navigator.clipboard.writeText(window.location.href).then(function () { copyBtn.title = 'Kopyalandı!'; setTimeout(function () { copyBtn.title = 'Bağlantıyı kopyala'; }, 2000); }); }); } // Lightbox Logic var lightbox = document.getElementById('lightbox-modal'); if (lightbox) { var triggers = document.querySelectorAll('.lightbox-trigger'); var lightboxImg = document.getElementById('lightbox-img'); var closeBtn = document.querySelector('.lightbox-close'); var prevBtn = document.querySelector('.lightbox-prev'); var nextBtn = document.querySelector('.lightbox-next'); var currentIndex = 0; var images = []; triggers.forEach(function(trigger, index) { images.push(trigger.getAttribute('href')); trigger.addEventListener('click', function(e) { e.preventDefault(); currentIndex = index; showImage(currentIndex); lightbox.classList.add('active'); document.body.style.overflow = 'hidden'; }); }); function showImage(index) { if (index < 0) index = images.length - 1; if (index >= images.length) index = 0; currentIndex = index; lightboxImg.src = images[currentIndex]; } closeBtn.addEventListener('click', function() { lightbox.classList.remove('active'); document.body.style.overflow = ''; }); lightbox.addEventListener('click', function(e) { if (e.target === lightbox) { lightbox.classList.remove('active'); document.body.style.overflow = ''; } }); prevBtn.addEventListener('click', function() { showImage(currentIndex - 1); }); nextBtn.addEventListener('click', function() { showImage(currentIndex + 1); }); document.addEventListener('keydown', function(e) { if (!lightbox.classList.contains('active')) return; if (e.key === 'Escape') closeBtn.click(); if (e.key === 'ArrowLeft') prevBtn.click(); if (e.key === 'ArrowRight') nextBtn.click(); }); } })(); </script> <!-- Lightbox HTML --> <div id="lightbox-modal" class="lightbox"> <button class="lightbox-close">×</button> <button class="lightbox-prev">❮</button> <img id="lightbox-img" src="" alt="Gallery Image"> <button class="lightbox-next">❯</button> </div> </main> <!-- Footer --> <footer class="site-footer"> <div class="footer-top container"> <div class="footer-brand"> <a href="https://niceblogger.net/" class="footer-logo"> <img src="https://niceblogger.net/assets/images/logo.webp?v=1783957360" alt="NiceBlogger Logo" width="50" height="50" loading="lazy" style="width:50px;height:50px;border-radius:50%;margin-right:15px;object-fit:cover;"> <span class="brand-name">L7WAF</span> </a> <p class="footer-tagline">En İyi Blog Deneyimi</p> <div class="footer-social"> <a href="https://twitter.com/devpulse" target="_blank" rel="noopener" aria-label="Twitter" class="social-link"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> </a> <a href="https://github.com/devpulse" target="_blank" rel="noopener" aria-label="GitHub" class="social-link"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"/></svg> </a> <a href="https://linkedin.com/company/devpulse" target="_blank" rel="noopener" aria-label="LinkedIn" class="social-link"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg> </a> </div> </div> <div class="footer-links"> <div class="footer-col"> <h3 class="footer-col-title">Kategoriler</h3> <ul class="footer-nav"> <li><a href="https://niceblogger.net/category/dunya-geneli" class="footer-link">Dünya Geneli</a></li> <li><a href="https://niceblogger.net/category/windows" class="footer-link">Windows</a></li> <li><a href="https://niceblogger.net/category/linux" class="footer-link">Linux</a></li> <li><a href="https://niceblogger.net/category/siber-guvenlik" class="footer-link">Siber Güvenlik</a></li> <li><a href="https://niceblogger.net/category/yazilim" class="footer-link">Yazılım</a></li> </ul> </div> <div class="footer-col"> <h3 class="footer-col-title">Sayfalar</h3> <ul class="footer-nav"> <li><a href="https://niceblogger.net/" class="footer-link">Ana Sayfa</a></li> <li><a href="https://niceblogger.net/qa.php" class="footer-link">Soru & Cevap</a></li> <li><a href="https://niceblogger.net/about.php" class="footer-link">Hakkında</a></li> <li><a href="https://niceblogger.net/contact.php" class="footer-link">İletişim</a></li> <li><a href="https://niceblogger.net/search.php" class="footer-link">Arama</a></li> <li><a href="https://www.effectivecpmnetwork.com/srnrwwub2?key=19f571f979be9f546b4050a2f5c46245" class="footer-link" rel="sponsored" target="_blank">Reklam Ver</a></li> </ul> </div> <div class="footer-col footer-col-tags"> <h3 class="footer-col-title">Popüler Etiketler</h3> <div class="footer-tags"> <a href="https://niceblogger.net/tag/docker" class="tag-badge">Docker</a> <a href="https://niceblogger.net/tag/linux" class="tag-badge">linux</a> <a href="https://niceblogger.net/tag/hacker" class="tag-badge">hacker</a> <a href="https://niceblogger.net/tag/teknoloji" class="tag-badge">teknoloji</a> <a href="https://niceblogger.net/tag/devops" class="tag-badge">devops</a> <a href="https://niceblogger.net/tag/malware" class="tag-badge">malware</a> <a href="https://niceblogger.net/tag/yatirim" class="tag-badge">yatırım</a> <a href="https://niceblogger.net/tag/agile" class="tag-badge">agile</a> <a href="https://niceblogger.net/tag/bilim" class="tag-badge">bilim</a> <a href="https://niceblogger.net/tag/ag-guvenligi" class="tag-badge">ağ güvenliği</a> <a href="https://niceblogger.net/tag/scrum" class="tag-badge">scrum</a> <a href="https://niceblogger.net/tag/donanim" class="tag-badge">donanım</a> </div> </div> </div> </div> <div class="footer-bottom container"> <p class="footer-copy">© 2026 NiceBlogger. Tüm hakları saklıdır.</p> </div> </footer> <!-- Prism.js — defer, yalnızca kod blokları olan sayfalarda aktif --> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script> <script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-docker.min.js"></script> <!-- Main JS — defer --> <script defer src="https://niceblogger.net/assets/js/theme.min.js?v=1783957360"></script> <script defer src="https://niceblogger.net/assets/js/main.min.js?v=1783957360"></script> <script>window.POST_ID = 7626;</script> <!-- Social Bar Ad — window.load sonrası header'daki yükleyici ile enjekte edilir --> <div data-ad-src="https://pl30262757.effectivecpmnetwork.com/a7/85/ea/a785ea57e6a2e578134b71ada9686c21.js" style="display:none"></div> </body> </html>