Zaman 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şimin ilk gününü, ardından ikinci kodlama işimin ilk gününü ve Mozilla’daki ilk günümü hâlâ hatırlıyorum. MetaMask için kod yazdığım ilk günü de unutmadım. 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 hiç bilmediklerini fark ediyorum. O kadar yaşlandım ki... Web sayfası düzenlerietiketleriyle yapılıyordu ve bu yeni 'CSS float' özelliği yeni standart haline geliyordu. Yuvarlatılmış köşeler resimler ve Internet Explorer için VML hileleri ile 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, 'modal' pencereler için standarttı. Firebug, mevcut en iyi hata ayıklama aracıydı. Videoları düzgün oynatmanın 'standardı', doğru kodeği bulup yüklemekti.
Sistem Güvenliği
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 deneyin... hatta mouseover ve mouseleave'de farklı
kullanmak! Masaüstü uygulamasını web teknolojileriyle kodlamak mı? Adobe Air'i deneyin!
NPM, 'performanslı değil dostum' anlamına geliyordu. Bir ankete oy vermek sayfanın yenilenmesi demekti. 'Sosyal medya' HotOrNot.com demekti. 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ğini sağlardı. Bitmap (.bmp) geçerli bir resim 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ı? Ona 'ziyaretçi defteri' deniyordu... ve arkadaş listesi mi? 'Web ring' deniyordu. Arama motoru optimizasyonu,
etiketini anahtar kelimelerle doldurmaktı. Vay be, o günler ne günlerdi. Web'de 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/mayis-2026-icin-7-ucretsiz-masaustu-duvar-kagidi-sanatcilardan-topluluga-ozel-tasarimlar" class="post-nav__link post-nav__link--prev"> <span class="post-nav__label">← Önceki Yazı</span> <span class="post-nav__title">Mayıs 2026 İçin 7 Ücretsiz Masaüstü Duvar Kağıdı: Sanatçılardan Topluluğa Özel Tasarımlar</span> </a> <a href="https://niceblogger.net/blog/japon-dev-donmus-gida-ureticisi-nichireiye-siber-saldiri-operasyonlar-durdu" class="post-nav__link post-nav__link--next"> <span class="post-nav__label">Sonraki Yazı →</span> <span class="post-nav__title">Japon Dev Donmuş Gıda Üreticisi Nichirei’ye Siber Saldırı: Operasyonlar Durdu</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/veritabani" class="tag-badge">veritabanı</a> <a href="https://niceblogger.net/tag/iot" class="tag-badge">iot</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-gelistirmenin-tarihine-yolculuk-tablolardan-modern-caga&text=Web+Geli%C5%9Ftirmenin+Tarihine+Yolculuk%3A+Tablolardan+Modern+%C3%87a%C4%9Fa" 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-gelistirmenin-tarihine-yolculuk-tablolardan-modern-caga" 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/google-my-business-urun-ekleme-rehberi-10-adimda-magazanizi-dijitale-tasiyin" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_22324_1784311590.webp" alt="Google My Business Ürün Ekleme Rehberi: 10 Adımda Mağazanızı Dijitale Taşıyın" class="post-card__image" loading="lazy"> </a> <div class="post-card__body"> <a href="https://niceblogger.net/category/linux" class="post-card__cat-link" style="color:#f59e0b">Linux</a> <h3 class="post-card__title post-card__title--sm"> <a href="https://niceblogger.net/blog/google-my-business-urun-ekleme-rehberi-10-adimda-magazanizi-dijitale-tasiyin">Google My Business Ürün Ekleme Rehberi: 10 Adımda Mağazanızı Dijitale Taşıyın</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Google My Business ürün ekleme özelliği ile işletmenizi dijital vitrine taşıyın. 1...</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> 10 </span> <span class="post-card__meta-item">4 gün önce</span> </div> </div> </article> <article class="post-card"> <a href="https://niceblogger.net/blog/veri-muhendisliginde-yapay-zeka-teknik-borcu-olusturulan-kod-neden-hala-metaveri-inceleme-ve-yonetisim-gerektiriyor" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_10928_1783478469.webp" alt="Veri Mühendisliğinde Yapay Zeka Teknik Borcu: Oluşturulan Kod Neden Hala Metaveri, İnceleme ve Yönetişim Gerektiriyor?" class="post-card__image" loading="lazy"> </a> <div class="post-card__body"> <a href="https://niceblogger.net/category/linux" class="post-card__cat-link" style="color:#f59e0b">Linux</a> <h3 class="post-card__title post-card__title--sm"> <a href="https://niceblogger.net/blog/veri-muhendisliginde-yapay-zeka-teknik-borcu-olusturulan-kod-neden-hala-metaveri-inceleme-ve-yonetisim-gerektiriyor">Veri Mühendisliğinde Yapay Zeka Teknik Borcu: Oluşturulan Kod Neden Hala Metaveri, İnceleme ve Yönetişim Gerektiriyor?</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Yapay zeka destekli kod oluşturma veri mühendisliğinde hız kazandırırken, doğrulama...</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> 16 </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-ile-bir-yil-kendime-degil-baskalarina-araclar-yaptim" class="post-card__image-wrap post-card__image-wrap--sm"> <img src="https://niceblogger.net/uploads/post_15177_1784391513.webp" alt="Yapay Zeka ile Bir Yıl: Kendime Değil Başkalarına Araçlar Yaptım" class="post-card__image" loading="lazy"> </a> <div class="post-card__body"> <a href="https://niceblogger.net/category/linux" class="post-card__cat-link" style="color:#f59e0b">Linux</a> <h3 class="post-card__title post-card__title--sm"> <a href="https://niceblogger.net/blog/yapay-zeka-ile-bir-yil-kendime-degil-baskalarina-araclar-yaptim">Yapay Zeka ile Bir Yıl: Kendime Değil Başkalarına Araçlar Yaptım</a> </h3> <p class="post-card__excerpt post-card__excerpt--sm">Yapay zeka sayesinde kod bilmeden 22 araç geliştirdim ama hiçbiri bana ait değildi. İ...</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> 7 </span> <span class="post-card__meta-item">3 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=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 = 7752;</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>