Sık Yapılan Web Geliştirme Hataları

Deneyimli geliştiriciler bile bazen temel hatalar yapabilir. İşte en yaygın hatalar ve bunların çözümleri.

1. Duyarlı (Responsive) Tasarımı Göz Ardı Etmek

Hata

Sadece masaüstü ekranlar için tasarım yapmak ve mobil kullanıcıları unutmak.

Çözüm

/* Mobil öncelikli yaklaşım */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

2. Performans Optimizasyonunu Ertelemek

Hata

Performans kriterlerini geliştirme sürecinin sonuna kadar düşünmemek.

Çözüm

• Düzenli olarak Lighthouse testleri yapmak.
• Görsel optimizasyonları (WebP formatı vb.).
• Tembel yükleme (Lazy loading) teknikleri.
• Kod bölme (Code splitting) uygulamak.

3. Güvenliği İhmal Etmek

Hata: XSS Açığı

// ❌ Hatalı kullanım (XSS zafiyeti içerir)
app.get('/user', (req, res) => {
  res.send(`<div>${req.query.name}</div>`);
});

// ✅ Doğru ve Güvenli Kullanım
const escapeHtml = require('escape-html');
app.get('/user', (req, res) => {
  res.send(`<div>${escapeHtml(req.query.name)}</div>`);
});

4. Eksik Hata Yönetimi (Error Handling)

// ❌ Hatalı kullanım
async function getData() {
  const response = await fetch('/api/data');
  return response.json();
}

// ✅ Doğru kullanım
async function getData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  } catch (error) {
    console.error('Veri çekme hatası:', error);
    throw error;
  }
}

5. Erişilebilirlik (A11y) Eksikliği

Hata

• Eksik resim alternatif metinleri (alt tags).
• Yetersiz renk kontrast oranları.
• Klavye ile gezinme desteğinin olmaması.

Çözüm

<!-- ✅ Erişilebilir buton örneği -->
<button 
  aria-label="Menüyü Aç"
  class="menu-toggle"
>
  <span class="sr-only">Menü</span>
  <svg><!-- ikon --></svg>
</button>

Sonuç

Bu temel hatalardan kaçınmak, daha kaliteli, güvenli ve sürdürülebilir web uygulamaları oluşturmanızı sağlar.