Web Geliştiriciliğinde 20 Yıl: Unutulmaz Teknolojiler ve Nostalji Yazılım

Web Geliştiriciliğinde 20 Yıl: Unutulmaz Teknolojiler ve Nostalji

20 yıllık bir yazılım mühendisi, web teknolojilerindeki değişimi anlatıyor. Tablolardan CSS'e, FTP'den modern araçlara uzanan bir yolculuk....

Zaman ne kadar ilginç bir kavram. HTML, CSS ve JavaScript kodlamayı keşfettiğim günü hâlâ hatırlıyorum. Üniversitedeki ilk programlama dersim, ilk iş günüm, Mozilla'daki ilk günüm ve MetaMask'ta kod yazmaya başladığım ilk gün... Profesyonel bir yazılım mühendisi olarak 20. yılımı doldurdum ve bu süre göz açıp kapayıncaya kadar geçti.

Arada bir, genç mühendislere eski programlama referansları yapıyorum ve neyden bahsettiğimi anlamadıklarını fark ediyorum. Ne kadar yaşlandığımı bir kez daha anlıyorum. Web sayfası düzenleri etiketleriyle yapılırken, 'CSS float' özelliği yeni standart olmaya başlamıştı. Yuvarlak 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 kopyalamak en iyi sürüm kontrol aracıydı. alert ve confirm fonksiyonları 'modal' pencerelerin standardıydı. Firebug ise en iyi hata ayıklama aracıydı. Videoları düzgün oynatmak için doğru codec'i bulmak gerekiyordu.

Detaylar ve Etkileri

ActionScript bilgisi JavaScript kadar değerliydi. Dreamweaver en iyi metin editörü ve tasarım aracıydı. XML, veri yapılarının geleceği olarak görülüyordu. Mobil öncelik mi? Mobil diye bir şey yoktu. Reaktif navigasyon mu? Java Applet'leri ne dersiniz? Veya mouse üzerine gelince farklı kullanmak... Masaüstü uygulama yapmak için Adobe Air vardı. NPM 'performanslı değil dostum' anlamına geliyordu. Bir ankete oy vermek sayfanın yenilenmesi demekti. Sosyal medya denince HotOrNot.com akla geliyordu. Web'in sevgi sesi 56k modem bağlantısının purrrrr sesiydi. 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ı? Ona 'ziyaretçi defteri' deniyordu. Arkadaş listesi mi? 'Web ring' adı veriliyordu. SEO için etiketine anahtar kelimeler dolduruluyordu. 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/youtube-tvde-bu-video-formati-desteklenmiyor-hatasini-cozmenin-kolay-yolu" class="post-nav__link post-nav__link--prev"> <span class="post-nav__label">← Önceki Yazı</span> <span class="post-nav__title">YouTube TV'de 'Bu Video Formatı Desteklenmiyor' Hatasını Çözmenin Kolay Yolu</span> </a> <a href="https://niceblogger.net/blog/windowsta-wasd-ve-ok-tuslarinin-yer-degistirmesi-nasil-duzeltilir" class="post-nav__link post-nav__link--next"> <span class="post-nav__label">Sonraki Yazı →</span> <span class="post-nav__title">Windows'ta WASD ve Ok Tuşlarının Yer Değiştirmesi Nasıl Düzeltilir?</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/hacker" class="tag-badge">hacker</a> <a href="https://niceblogger.net/tag/frontend" class="tag-badge">frontend</a> <a href="https://niceblogger.net/tag/bulut-bilisim" class="tag-badge">bulut bilişim</a> <a href="https://niceblogger.net/tag/mobil-uygulama" class="tag-badge">mobil uygulama</a> <a href="https://niceblogger.net/tag/blockchain" class="tag-badge">blockchain</a> <a href="https://niceblogger.net/tag/yazilim" class="tag-badge">yazılım</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/ddos" class="tag-badge">ddos</a> <a href="https://niceblogger.net/tag/veri-bilimi" class="tag-badge">veri bilimi</a> <a href="https://niceblogger.net/tag/seo" class="tag-badge">seo</a> <a href="https://niceblogger.net/tag/siber-guvenlik" class="tag-badge">siber güvenlik</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-gelistiriciliginde-20-yil-unutulmaz-teknolojiler-ve-nostalji&text=Web+Geli%C5%9Ftiricili%C4%9Finde+20+Y%C4%B1l%3A+Unutulmaz+Teknolojiler+ve+Nostalji" 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-gelistiriciliginde-20-yil-unutulmaz-teknolojiler-ve-nostalji" 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/ncscden-acil-eylem-cagrisi-siber-dayaniklilik-artirilmali" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_60420_1783483804.webp" alt="NCSC'den Acil Eylem Çağrısı: Siber Dayanıklılık Artırılmalı" 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/ncscden-acil-eylem-cagrisi-siber-dayaniklilik-artirilmali">NCSC'den Acil Eylem Çağrısı: Siber Dayanıklılık Artırılmalı</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">NCSC, Infosecurity Europe'da siber güvenlik ekiplerine acil eylem çağrısı yaparak, ar...</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> <article class="post-card"> <a href="https://niceblogger.net/blog/popover-api-ile-yerel-tarayici-destegiyle-arac-ipuclari-olusturma" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_18340_1783471799.webp" alt="Popover API ile Yerel Tarayıcı Desteğiyle Araç İpuçları Oluşturma" 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/popover-api-ile-yerel-tarayici-destegiyle-arac-ipuclari-olusturma">Popover API ile Yerel Tarayıcı Desteğiyle Araç İpuçları Oluşturma</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Popover API, araç ipuçlarını JavaScript kütüphaneleri olmadan tarayıcının yerel d...</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> 2 </span> <span class="post-card__meta-item">18 saat önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/pegula-vs-gauffu-ucretsiz-olarak-cevrimici-izleme" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://picsum.photos/seed/37070/800/500" alt="Pegula vs. Gauff'u ücretsiz olarak çevrimiçi izleme" 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/pegula-vs-gauffu-ucretsiz-olarak-cevrimici-izleme">Pegula vs. Gauff'u ücretsiz olarak çevrimiçi izleme</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Burada yer alan tüm ürünler editörlerimiz ve yazarlarımız tarafından bağımsız ol...</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> 4 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> 3 </span> <span class="post-card__meta-item">18 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 = 1227;</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>