Kod Rehberi

🔒 Güvenlik Best Practices

// Kötü Örnek: Şifre hashleme eksik
app.post('/register', (req, res) => {
  const user = new User({
    username: req.body.username,
    password: req.body.password // Plain text saklama!
  });
});

// İyi Örnek: BCrypt ile hashleme
const bcrypt = require('bcrypt');
app.post('/register', async (req, res) => {
  const hashedPassword = await bcrypt.hash(req.body.password, 10);
  const user = new User({
    username: req.body.username,
    password: hashedPassword
  });
});

📊 Veritabanı Optimizasyonları

❌ N+1 Query Problemi

-- Kullanıcıları çek
SELECT * FROM users;

-- Her kullanıcı için ayrı sorgu
SELECT * FROM orders WHERE user_id = 1;
SELECT * FROM orders WHERE user_id = 2;
-- ...vb

✅ JOIN ile Çözüm

SELECT users.*, orders.*
FROM users
LEFT JOIN orders ON users.id = orders.user_id;

🆕 Modern HTML Örnekleri

// Eski Yöntem


                <div>

                  <font size="5">Başlık</font>

                  <center>Merhaba Dünya!</center>

                </div>

// Modern Yaklaşım


                <div>

                  <h1>Başlık</h1>

                  <p style="text-align: center;">Merhaba Dünya!</p>

                </div>

                

                // Semantik HTML

                <header>

                  <h1>Başlık</h1>

                </header>

                <main>

                  <p>Ana içerik burada.</p>

                </main>

                <footer>

                  <p>Footer içeriği.</p>

                </footer>

🆕 Tablo Oluşturma

// Eski Yöntem


                <table border="1">

                  <tr>

                    <td>Ad</td>

                    <td>Soyad</td>

                  </tr>

                  <tr>

                    <td>Ahmet</td>

                    <td>Yılmaz</td>

                  </tr>

                </table>

// Modern Yaklaşım


                <table>

                  <thead>

                    <tr>

                      <th>Ad</th>

                      <th>Soyad</th>

                    </tr>

                  </thead>

                  <tbody>

                    <tr>

                      <td>Ahmet</td>

                      <td>Yılmaz</td>

                    </tr>

                  </tbody>

                </table>

                <style>

                  table { border-collapse: collapse; width: 100%; }

                  th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }

                  th { background-color: #f2f2f2; }

                </style>

🆕 Form Doğrulama

// Eski Yöntem


                <form>

                  <input type="text" name="email">

                  <input type="submit" value="Gönder">

                </form>

// Modern Yaklaşım


                <form>

                  <label for="email">E-posta:</label>

                  <input type="email" id="email" name="email" required placeholder="örnek@mail.com">

                  <input type="submit" value="Gönder">

                </form>

🆕 Resim ve Alt Metin

// Eski Yöntem


                <img src="resim.jpg">

// Modern Yaklaşım


                <figure>

                  <img src="resim.jpg" alt="Manzara">

                  <figcaption>Güzel bir manzara.</figcaption>

                </figure>

🆕 Video Yerleştirme

// Eski Yöntem


                <embed src="video.mp4" width="320" height="240">

// Modern Yaklaşım


                <video width="320" height="240" controls>

                  <source src="video.mp4" type="video/mp4">

                  Tarayıcınız video etiketini desteklemiyor.

                </video>

🆕 Semantik Yapı

// Eski Yöntem


                <div id="header">Başlık</div>

                <div id="content">İçerik</div>

                <div id="footer">Footer</div>

// Modern Yaklaşım


                <header>Başlık</header>

                <main>Ana içerik burada.</main>

                <footer>Footer içeriği.</footer>

🆕 Modern JavaScript Örnekleri

// Eski Yöntem
var x = 5;
function sum(a, b) {
return a + b;
}
console.log(sum(x, 10));

// Modern Yaklaşım
const x = 5;
const sum = (a, b) => a + b;
console.log(sum(x, 10));

// Optional Chaining
const user = {};
console.log(user?.address?.city ?? 'Bilinmiyor');

// Callback cehennemi
fetchData((err, data) => {
  if(err) handleError(err);
  process(data, () => {
    saveToDB(result, () => {
      console.log('Done');
    });
  });
});

// Async/Await ile temiz kod
async function processData() {
  try {
    const data = await fetchData();
    const result = await process(data);
    await saveToDB(result);
  } catch (err) {
    handleError(err);
  }
}

// Nested property kontrolü
const street = user && user.address && user.address.street;

// Modern destructuring
const { address: { street } = {} } = user || {};
// Veya
const street = user?.address?.street;

// Imperative yaklaşım
let total = 0;
for(let i=0; i   if(items[i].price > 100) {
    total += items[i].price * 0.9;
  }
}

// Fonksiyonel programlama
const total = items
  .filter(item => item.price > 100)
  .map(item => item.price * 0.9)
  .reduce((sum, val) => sum + val, 0);

// Ana thread'de ağır hesaplama
function calculate() {
const result = heavyComputation(data);
// UI donması riski
}

// Web Worker ile
const worker = new Worker('compute.js');
worker.postMessage(data);
worker.onmessage = e => {
console.log('Result:', e.data);
};

// Tüm modülü yükle
import * as utils from './utils.js';
utils.heavyFunction();

// Dinamik import
const { heavyFunction } = await import('./utils.js');
heavyFunction();

// Genel try-catch
try {
// Tüm kod burada
} catch(err) {
console.error('Hata:', err);
}

// Error boundary pattern
function ErrorBoundary({ children }) {
  try {
    return children;
  } catch(err) {
    return ;
  }
}
// Async hata yakalama
fetch(url)
  .then(handleResponse)
  .catch(handleNetworkError);

🎨 Animasyon Best Practices

/* Kötü Performans */
.box {
  width: 100px;
  left: 0;
  transition: all 1s;
}
.box:hover {
  width: 200px;
  left: 100px;
}

/* Optimize Edilmiş */
.box {
  width: 100px;
  transform: translateX(0);
  transition: transform 1s;
}
.box:hover {
  transform: translateX(100px);
}

/* Kötü Performans - Layout Thrashing */
.box {
  left: 0;
  transition: left 0.5s ease;
}
.box.active {
  left: 200px;
}

/* İyi Performans - GPU Optimize */
.box {
  transform: translateX(0);
  transition: transform 0.5s ease;
}
.box.active {
  transform: translateX(200px);
}

/* Kötü: Çoklu property animasyonu */
.card {
  transition: all 0.5s ease;
}
.card:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  background: #f0f0f0;
}

/* İyi: Bileşik animasyon optimizasyonu */
.card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.card:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

// Kötü: setInterval ile animasyon
function animate() {
  setInterval(() => {
    element.style.left = pos + 'px';
    pos++;
  }, 16);
}

// İyi: requestAnimationFrame
function animate() {
  element.style.transform = `translateX(${pos}px)`;
  pos += 1;
  requestAnimationFrame(animate);
}
animate();

🔑 TypeScript Best Practices

// Any kullanımı
function processData(data: any) {
return data.map(item => item.value);
}

// Generic Type kullanımı
interface DataItem {
  value: string;
  id: number;
}

function processData<T extends DataItem>(data: T[]): string[] {
  return data.map(item => item.value);
}

⚡ WebAssembly ile Performans Optimizasyonu

// CPU intensive task in JavaScript
function heavyCalculation() {
  let result = 0;
  for(let i=0; i<1e8; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

// WebAssembly (C++)
#include
extern "C" {
  double heavyCalc() {
    double result = 0;
    for(int i=0; i<1e8; i++) {
      result += sqrt(i);
    }
    return result;
  }
}

📊 API Tasarım Best Practices

// REST - Çoklu istek problemi
GET /users/123
GET /users/123/orders
GET /users/123/payments

// GraphQL - Tek istek
query {
  user(id: "123") {
    name
    orders {
      total
    }
    payments {
      amount
    }
  }
}

🧪 Test Driven Development

// Testsiz kod
function sum(a, b) {
return a + b;
}

// Jest ile test senaryosu
test('sum function adds numbers', () => {
  expect(sum(1, 2)).toBe(3);
  expect(sum(-1, 1)).toBe(0);
  expect(sum(2.5, 3.5)).toBe(6);
});

// Test coverage raporu
"jest": {
  "collectCoverage": true,
  "coverageThreshold": {
    "global": {
      "branches": 90,
      "functions": 95
    }
  }
}

👷 Web Workers ile Paralel İşlem

// Ana thread'de ağır işlem
function processData(data) {
  const result = data.map(item => {
    // CPU intensive operation
  });
  return result;
}

// Web Worker kullanımı
// main.js
const worker = new Worker('worker.js');
worker.postMessage(largeData);

// worker.js
self.onmessage = function(e) {
const result = processData(e.data);
self.postMessage(result);
};

🧩 Mikro Frontend Uygulaması

// Monolitik yapı
├── src/
  ├── user-management/
  ├── order-system/
  └── payment-gateway/

// Mikro Frontend Yapısı
├── shell/ # Ana çatı
├── app1/ # Bağımsız React uygulaması
├── app2/ # Vue mikro uygulama
└── shared/ # Ortak bileşenler

// Dinamik yükleme
import('app1/Module').then(module => {
module.mount(document.getElementById('app1'));
});

🚀 Kodlama Best Practices

📌 Önemli Notlar

⚡ Performans Optimizasyonları

❌ Kötü Uygulama

✅ İyi Uygulama

🔒 Güvenlik Best Practices

📊 Veritabanı Optimizasyonları

❌ N+1 Query Problemi

✅ JOIN ile Çözüm

🆕 Modern HTML Örnekleri

🆕 Tablo Oluşturma

🆕 Form Doğrulama

🆕 Resim ve Alt Metin

🆕 Video Yerleştirme

🆕 Semantik Yapı

🆕 Modern JavaScript Örnekleri

🎨 Animasyon Best Practices

🔑 TypeScript Best Practices

⚡ WebAssembly ile Performans Optimizasyonu

📊 API Tasarım Best Practices

🧪 Test Driven Development

👷 Web Workers ile Paralel İşlem

🧩 Mikro Frontend Uygulaması