Zaman ne kadar da hızlı geçiyor. 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 hâlâ hatırlıyorum. İlk üniversite programlama dersim, ilk iş günüm, Mozilla ve MetaMask'taki ilk günlerim... Sanki dün gibi. Ancak genç mühendislerle konuşurken eski teknolojilere yaptığım göndermelerin onlara yabancı geldiğini fark ediyorum. İşte bu kadar 'eski' olduğumu anlıyorum.
Web sayfalarının düzenietiketleriyle yapılırken, yeni moda olan 'CSS float' özelliği standart haline gelmeye başlamıştı. Yuvarlak köşeler için resimler ve Internet Explorer için VML hileleri kullanılıyordu. FTP, web sitesi değişikliklerini yüklemek için en iyi yöntemdi; SVN ve 'trunk' kopyalamak ise sürüm kontrolünde zirveydi. alert() ve confirm() fonksiyonları 'modal' pencerelerin standardıydı. Firebug, en iyi hata ayıklama aracı olarak kabul ediliyordu.
Videoları oynatmak için doğru kodeği bulmak standart bir işlemdi. ActionScript bilgisi JavaScript bilgisi kadar değerliydi. Dreamweaver, en iyi metin düzenleyici ve tasarım aracıydı. XML, veri yapılarının geleceği olarak görülüyordu. Mobil öncelikli tasarım? Mobil diye bir şey yoktu. Reaktif navigasyon? Java Applet'leri veya fare üzerine gelince değişen
etiketleri vardı. Masaüstü uygulaması mı yazmak istiyorsunuz? Adobe Air tam size göreydi.
NPM, 'performanslı değil, adamım' anlamına geliyordu. Bir ankete oy vermek sayfanın yenilenmesini gerektiriyordu. 'Sosyal medya' denince akla HotOrNot.com geliyordu. Web'in sevdiği ses ise 56k modem bağlantısının mırıltısıydı. Sağ tıklamayı devre dışı bırakmak, resim güvenliği sağlıyordu. Bitmap (.bmp) geçerli bir resim formatıydı. JavaScript'in rakibi JScript vardı. SpyJax ile kullanıcının nerede olduğu tespit edilebiliyordu. Çerezler, kullanıcı takibinin zirvesiydi. Sosyal medya duvarı mı? O bir 'misafir defteri'ydi. Arkadaş listesi ise 'web ring' olarak adlandırılıyordu. Arama motoru optimizasyonu,
etiketini anahtar kelimelerle doldurmaktı. Ah o günler... Siz web'de kaç yaşındasınız?</p> </div> <!-- ADS SECTION --> <div class="mt-5 mb-4 text-center"> <script async="async" data-cfasync="false" src="https://pl30155735.effectivecpmnetwork.com/2eb275699028da5a466582ba91a44bdd/invoke.js"></script> <div id="container-2eb275699028da5a466582ba91a44bdd"></div> </div> <!-- TAGS --> <nav class="post-nav" aria-label="Yazı gezintisi"> <a href="https://niceblogger.net/blog/2024te-dijital-yayin-platformlari-netflix-spor-izleyicileri-ve-marka-krizleri" class="post-nav__link post-nav__link--prev"> <span class="post-nav__label">← Önceki Yazı</span> <span class="post-nav__title">2024'te Dijital Yayın Platformları: Netflix, Spor İzleyicileri ve Marka Krizleri</span> </a> <a href="https://niceblogger.net/blog/aktif-olarak-somurulen-4-kritik-guvenlik-acigi-adobe-joomla-ve-langflow-kev-listesinde" class="post-nav__link post-nav__link--next"> <span class="post-nav__label">Sonraki Yazı →</span> <span class="post-nav__title">Aktif Olarak Sömürülen 4 Kritik Güvenlik Açığı: Adobe, Joomla ve Langflow KEV Listesinde</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/linux" class="tag-badge">linux</a> <a href="https://niceblogger.net/tag/frontend" class="tag-badge">frontend</a> <a href="https://niceblogger.net/tag/otomasyon" class="tag-badge">otomasyon</a> <a href="https://niceblogger.net/tag/uzay" class="tag-badge">uzay</a> <a href="https://niceblogger.net/tag/otomotiv" class="tag-badge">otomotiv</a> <a href="https://niceblogger.net/tag/veritabani" class="tag-badge">veritabanı</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-gelistiricilerin-hatirlayacagi-20-yillik-nostalji-tablolardan-csse-yolculuk&text=Web+Geli%C5%9Ftiricilerin+Hat%C4%B1rlayaca%C4%9F%C4%B1+20+Y%C4%B1ll%C4%B1k+Nostalji%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-gelistiricilerin-hatirlayacagi-20-yillik-nostalji-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/ea-college-football-27-zafere-giden-yol-incelemesi" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://picsum.photos/seed/45381/800/500" alt="EA College Football 27: Zafere Giden Yol incelemesi" 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/ea-college-football-27-zafere-giden-yol-incelemesi">EA College Football 27: Zafere Giden Yol incelemesi</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Chance Townsend, Mashable'ın Genel Ödevler Editörüdür ve teknoloji, video oyunları, ...</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> 14 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> 0 </span> <span class="post-card__meta-item">18 saat önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/uzmanlarca-tasarlanan-derslerle-gercek-iletisime-oncelik-veren-babbel-firsati" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_85409_1783489092.webp" alt="Uzmanlarca Tasarlanan Derslerle Gerçek İletişime Öncelik Veren Babbel Fırsatı" 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/uzmanlarca-tasarlanan-derslerle-gercek-iletisime-oncelik-veren-babbel-firsati">Uzmanlarca Tasarlanan Derslerle Gerçek İletişime Öncelik Veren Babbel Fırsatı</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Yapay zeka bir cümleyi saniyeler içinde çevirebilir, ancak bir başkasıyla sohbet etme...</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> 2 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> 0 </span> <span class="post-card__meta-item">13 saat önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/fortinet-cihazlarinda-74-bin-kimlik-bilgisi-sizdi-cisadan-acil-guvenlik-talimati" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_36648_1783484590.webp" alt="Fortinet Cihazlarında 74 Bin Kimlik Bilgisi Sızdı: CISA'dan Acil Güvenlik Talimatı" 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/fortinet-cihazlarinda-74-bin-kimlik-bilgisi-sizdi-cisadan-acil-guvenlik-talimati">Fortinet Cihazlarında 74 Bin Kimlik Bilgisi Sızdı: CISA'dan Acil Güvenlik Talimatı</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">CISA, Fortinet cihazlarını hedef alan FortiBleed saldırısında 74.000 kimlik bilgisini...</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> 2 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> 0 </span> <span class="post-card__meta-item">14 saat ö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.png" alt="NiceBlogger Logo" 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"> <h4 class="footer-col-title">Kategoriler</h4> <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"> <h4 class="footer-col-title">Sayfalar</h4> <ul class="footer-nav"> <li><a href="https://niceblogger.net/" class="footer-link">Ana Sayfa</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> </ul> </div> <div class="footer-col footer-col-tags"> <h4 class="footer-col-title">Popüler Etiketler</h4> <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 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-docker.min.js"></script> <!-- Main JS --> <script src="https://niceblogger.net/assets/js/theme.js?v=1783510195"></script> <script src="https://niceblogger.net/assets/js/main.js?v=1783510195"></script> <script>window.POST_ID = 3973;</script> <!-- Social Bar Ad --> <script type='text/javascript' src='https://pl30155736.effectivecpmnetwork.com/44/9d/fa/449dfa9e9a6ad9a8c3665ec909ff5b99.js'></script> <!-- Popunder Ad --> <script> document.addEventListener("click", function popunderHandler(e) { var lastAdTime = localStorage.getItem('lastPopunderTime'); var now = new Date().getTime(); var waitTime = 5 * 60 * 1000; // 5 dakika (milisaniye cinsinden) if (!lastAdTime || (now - lastAdTime) > waitTime) { // Birden fazla sekme açılmasını önlemek için tıklanır tıklanmaz zamanı kaydediyoruz localStorage.setItem('lastPopunderTime', now); var adUrl = "https://www.effectivecpmnetwork.com/gbmm689w?key=0833cfd8fbc3a81cf900202e9508f837"; window.open(adUrl, "_blank"); window.focus(); } }); </script> </body> </html>