Web Geliştiricileri İçin Nostalji: 20 Yıl Önce ve Şimdi Yazılım

Web Geliştiricileri İçin Nostalji: 20 Yıl Önce ve Şimdi

20 yıllık bir yazılım mühendisi, web teknolojilerindeki değişimi anlatıyor: tablo tabanlı tasarımlardan CSS float'a, Firebug'dan modern araçlara kadar

Zaman ne kadar ilginç bir kavram. HTML, CSS ve JavaScript kodlamayı keşfettiğim günü hâlâ hatırlıyorum. İlk üniversite programlama dersimi, ilk iş günümü, ardından ikinci işimi ve Mozilla’daki ilk günümü unutamıyorum. MetaMask’ta kodlamaya başladığım ilk gün de hafızamda taze. Bu yıl, profesyonel bir yazılım mühendisi olarak 20. yılımı dolduruyorum ve bu süre göz açıp kapayıncaya kadar geçti.

Arada bir, çok daha genç bir mühendise eski bir programlama referansı yapıyorum ve ne hakkında konuştuğumu anlamadıklarını fark ediyorum. O kadar yaşlandım ki... Web sayfası düzenleri etiketleriyle yapılırken, yeni CSS "float" özelliği standart haline geliyordu. Yuvarlatılmış köşeler resimler ve Internet Explorer için VML hileleriyle elde ediliyordu. FTP, web sitesi değişikliklerini yüklemek için en iyi yöntemdi.

SVN ve trunk kopyalama en iyi versiyonlama aracıydı. alert ve confirm, "modal" pencereler için standarttı. Firebug, mevcut en iyi hata ayıklama aracıydı. Videoları düzgün oynatmanın "standardı", doğru codec bileşenini bulmaktı. ActionScript bilgisi JavaScript bilgisi kadar değerliydi. Dreamweaver, en iyi metin editörü ve tasarım aracıydı. XML, veri yapılarının geleceğiydi.

Mobil-öncelik mi? Mobil diye bir şey yoktu. Reaktif navigasyon mu? Java Applet'leri ne dersin? Ya da mouseover ve mouseleave üzerine farklı kullanmak! Masaüstü uygulamasını web teknolojileriyle kodlamak mı istiyorsunuz? Adobe Air'i deneyin! NPM, "performanslı değil, adamım" anlamına geliyordu. Bir ankete oy vermek, sayfanın yeniden yüklenmesi demekti. "Sosyal medya" HotOrNot.com'du. Web'in sevgi sesi, 56k modem bağlantısının mırıltısıydı. Sağ tıklamayı devre dışı bırakmak, resim güvenliği sağlardı. Bitmap (.bmp) geçerli bir resim formatıydı. JavaScript'in JScript adında bir rakibi vardı. SpyJax'ing, kullanıcının nerede olduğunu tespit etmenizi sağlardı. Çerezler, kullanıcı takibinin zirvesiydi. Sosyal medya duvarı mı? Adı "ziyaretçi defteri"ydi... Arkadaş listesi mi? "Web ring" denirdi. Arama motoru optimizasyonu, etiketini anahtar kelimelerle doldurmaktı. Neydi 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/windowsta-wifi-sifresi-nasil-ogrenilir-komut-istemcisi-ile-kayitli-sifreyi-gorme" class="post-nav__link post-nav__link--prev"> <span class="post-nav__label">← Önceki Yazı</span> <span class="post-nav__title">Windows'ta WiFi Şifresi Nasıl Öğrenilir? Komut İstemcisi ile Kayıtlı Şifreyi Görme</span> </a> <a href="https://niceblogger.net/blog/mac-terminalinden-tarih-ve-saat-ayarlama-pratik-bir-kilavuz" class="post-nav__link post-nav__link--next"> <span class="post-nav__label">Sonraki Yazı →</span> <span class="post-nav__title">Mac Terminalinden Tarih ve Saat Ayarlama: Pratik Bir Kılavuz</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/malware" class="tag-badge">malware</a> <a href="https://niceblogger.net/tag/mobil-uygulama" class="tag-badge">mobil uygulama</a> <a href="https://niceblogger.net/tag/gelecek" class="tag-badge">gelecek</a> <a href="https://niceblogger.net/tag/veri-tabani" class="tag-badge">veri tabanı</a> <a href="https://niceblogger.net/tag/backend" class="tag-badge">backend</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-gelistiricileri-icin-nostalji-20-yil-once-ve-simdi&text=Web+Geli%C5%9Ftiricileri+%C4%B0%C3%A7in+Nostalji%3A+20+Y%C4%B1l+%C3%96nce+ve+%C5%9Eimdi" 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-gelistiricileri-icin-nostalji-20-yil-once-ve-simdi" 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/kullanildi-veya-alinti-yapildi-markalarin-yapay-zeka-aramasinda-gorunmesinin-iki-yolu" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://picsum.photos/seed/15378/800/500" alt="Kullanıldı veya alıntı yapıldı: Markaların yapay zeka aramasında görünmesinin iki yolu" 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/kullanildi-veya-alinti-yapildi-markalarin-yapay-zeka-aramasinda-gorunmesinin-iki-yolu">Kullanıldı veya alıntı yapıldı: Markaların yapay zeka aramasında görünmesinin iki yolu</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Google'ın geleneksel arama sonuçlarındaki sıralaması azalan getiriler sağlar. Reklam...</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> 8 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> 2 </span> <span class="post-card__meta-item">20 saat önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/anthropic-claude-cowork-artik-telefonda-yapay-zeka-asistani-masaustunden-cebe-tasindi" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_96069_1783477475.webp" alt="Anthropic Claude Cowork Artık Telefonda: Yapay Zeka Asistanı Masaüstünden Cebe Taşındı" 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/anthropic-claude-cowork-artik-telefonda-yapay-zeka-asistani-masaustunden-cebe-tasindi">Anthropic Claude Cowork Artık Telefonda: Yapay Zeka Asistanı Masaüstünden Cebe Taşındı</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Anthropic, Claude Cowork'u masaüstünden web ve mobil cihazlara genişletti. Dispatch öz...</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> 2 </span> <span class="post-card__meta-item">17 saat önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/css-gap-dekorasyonlari-random-ve-select-alani-boyutlandirma-web-gelistirmede-yeni-donem" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_85502_1783471840.webp" alt="CSS Gap Dekorasyonları, random() ve Select Alanı Boyutlandırma: Web Geliştirmede Yeni Dönem" 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/css-gap-dekorasyonlari-random-ve-select-alani-boyutlandirma-web-gelistirmede-yeni-donem">CSS Gap Dekorasyonları, random() ve Select Alanı Boyutlandırma: Web Geliştirmede Yeni Dönem</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">CSS Gap Dekorasyonları, random() fonksiyonu ve alanlarında field-sizing özelliği gibi...</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> 1 </span> <span class="post-card__meta-item">19 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 = 3371;</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>