Web'in İlk Günleri: Bir Yazılım Mühendisinin 20 Yıllık Yolculuğu Yazılım

Web'in İlk Günleri: Bir Yazılım Mühendisinin 20 Yıllık Yolculuğu

20 yıllık bir yazılım mühendisi, web'in ilk günlerinden bugüne yaşadığı dönüşümü anlatıyor: tablo tasarımları, Firebug, ActionScript ve daha fazlası.

Zaman gerçekten ilginç bir şey. Hâlâ HTML, CSS ve JavaScript kodlamayı keşfettiğim günleri hatırlıyorum. İlk üniversite programlama dersimi, ilk kodlama işimdeki ilk günümü, ardından ikinci işimdeki ve Mozilla'daki ilk günümü hâlâ anımsıyorum. MetaMask'ta kod yazdığım ilk günü bile unutmadım. Bu yıl, profesyonel bir yazılım mühendisi olarak 20. yılımı dolduruyorum ve göz açıp kapayıncaya kadar geçti.

Arada sırada, çok daha genç bir mühendise eski bir programlama referansı yapıyorum ve ne hakkında konuştuğumu hiç anlamadıklarını fark ediyorum. O kadar yaşlandım ki... Web sayfası düzenleri etiketleriyle yapılıyordu ve bu yeni 'CSS float' özelliği yeni standart haline geliyordu. Yuvarlak köşeler, görseller 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 onun trunk'ını kopyalamak en iyi sürüm kontrol aracıydı. alert() ve confirm() fonksiyonları 'modal' pencerelerin standardıydı. Firebug, mevcut en iyi hata ayıklama aracıydı. Videoları düzgün oynatmanın 'standardı', doğru codec bileşenini bulmaktı.

Detaylar ve Etkileri

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 düşünün... ya da fare üzerine gelindiğinde ve ayrıldığında farklı kullanmak!

Teknik Analiz

Masaüstü uygulamasını web teknolojileriyle kodlamak mı istiyorsunuz? Adobe Air'ı deneyin! NPM, 'performanslı değil, dostum' anlamına geliyordu. Bir ankete oy vermek, sayfanın yenilenmesi anlamına geliyordu. 'Sosyal medya' demek HotOrNot.com demekti. Web'in sevgi sesi, bir 56k modem bağlantısının mırıltısıydı.

Önemli Gelişmeler

Sağ tıklamayı devre dışı bırakmak, görsel güvenliğini sağlardı. Bitmap (.bmp) geçerli bir görsel formatıydı. JavaScript'in JScript adında bir rakibi vardı. SpyJax ile kullanıcının nerede olduğunu tespit edebiliyordunuz. Çerezler, kullanıcı takibinin zirvesiydi. Sosyal medya duvarı mı? Buna 'misafir defteri' deniyordu... ve arkadaş listesi mi? 'Web ring' olarak adlandırılıyordu. Arama motoru optimizasyonu, etiketini anahtar kelimelerle doldurmaktı. Neyse, işte o günlerdi. Siz web'de ne kadar yaşlısı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/caps-lock-acikken-sifre-girenlere-mujde-javascript-ile-tespit-etme" class="post-nav__link post-nav__link--prev"> <span class="post-nav__label">← Önceki Yazı</span> <span class="post-nav__title">Caps Lock Açıkken Şifre Girenlere Müjde: JavaScript ile Tespit Etme</span> </a> <a href="https://niceblogger.net/blog/davidwalshblogda-cls-sorunlari-nasil-cozuldu-web-sitenizin-seosunu-kurtaracak-ipuclari" class="post-nav__link post-nav__link--next"> <span class="post-nav__label">Sonraki Yazı →</span> <span class="post-nav__title">DavidWalshBlog'da CLS Sorunları Nasıl Çözüldü? Web Sitenizin SEO'sunu Kurtaracak İpuçları</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/scrum" class="tag-badge">scrum</a> <a href="https://niceblogger.net/tag/gelecek" class="tag-badge">gelecek</a> <a href="https://niceblogger.net/tag/backend" class="tag-badge">backend</a> <a href="https://niceblogger.net/tag/fullstack" class="tag-badge">fullstack</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%2Fwebin-ilk-gunleri-bir-yazilim-muhendisinin-20-yillik-yolculugu&text=Web%27in+%C4%B0lk+G%C3%BCnleri%3A+Bir+Yaz%C4%B1l%C4%B1m+M%C3%BChendisinin+20+Y%C4%B1ll%C4%B1k+Yolculu%C4%9Fu" 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%2Fwebin-ilk-gunleri-bir-yazilim-muhendisinin-20-yillik-yolculugu" 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/icerik-akisi-icin-kararli-arayuzler-tasarlama" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/picsum_40872.webp" alt="İçerik Akışı İçin Kararlı Arayüzler Tasarlama" 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/icerik-akisi-icin-kararli-arayuzler-tasarlama">İçerik Akışı İçin Kararlı Arayüzler Tasarlama</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">İçerik Akışı İçin Kararlı Arayüzler Tasarlama...</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> 25 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> 5 </span> <span class="post-card__meta-item">2 gün önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/siber-guvenlik-ekipleri-yapay-zeka-kullanmazsa-basarisizliga-mahkum-infosecurity-europe-uyarisi" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_7741_1783628472.webp" alt="Siber Güvenlik Ekipleri Yapay Zeka Kullanmazsa Başarısızlığa Mahkum: Infosecurity Europe Uyarısı" 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/siber-guvenlik-ekipleri-yapay-zeka-kullanmazsa-basarisizliga-mahkum-infosecurity-europe-uyarisi">Siber Güvenlik Ekipleri Yapay Zeka Kullanmazsa Başarısızlığa Mahkum: Infosecurity Europe Uyarısı</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Siber güvenlikte yapay zeka kullanımı artık bir seçenek değil zorunluluk. Infosecuri...</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">9 saat önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/gelistiricilere-yonelik-sahte-claude-code-sayfasiyla-yeni-powershell-stealer-tehdidi" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_10760_1783478272.webp" alt="Geliştiricilere Yönelik Sahte Claude Code Sayfasıyla Yeni PowerShell Stealer Tehdidi" 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/gelistiricilere-yonelik-sahte-claude-code-sayfasiyla-yeni-powershell-stealer-tehdidi">Geliştiricilere Yönelik Sahte Claude Code Sayfasıyla Yeni PowerShell Stealer Tehdidi</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Sahte Claude Code kurulum sayfaları üzerinden yayılan yeni bir bilgi hırsızı, Chromi...</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> 7 </span> <span class="post-card__meta-item">2 gün ö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=1783634010" 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=1783634010"></script> <script defer src="https://niceblogger.net/assets/js/main.min.js?v=1783634010"></script> <script>window.POST_ID = 4786;</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>