Web Geliştirme Araçları: Editörler, DevTools ve Verimlilik

Kod Editörleri

VS Code: En popüler kod editörü. Geniş extension ekosistemi, IntelliSense, debugging, Git entegrasyonu. Ücretsiz ve açık kaynak.

WebStorm: JetBrains'in IDE'si. Gelişmiş refactoring, code analysis, framework desteği. Ücretli.

Sublime Text: Hafif ve hızlı. Minimalist arayüz. Büyük dosyaları hızlı açar.

Vim/Neovim: Terminal tabanlı editör. Keyboard-driven, son derece özelleştirilebilir. Öğrenme eğrisi dik.

Seçim kriterleri: Başlangıç için VS Code. Enterprise için WebStorm. Minimalist için Sublime Text. Terminal severler için Vim.

Tarayıcı DevTools

Elements/Inspector: DOM ve CSS'i inceleyin. Stil değişikliklerini canlı test edin. Box model, layout, computed styles.

Console: JavaScript hatalarını ve log'ları görüntüleyin. Interactive REPL. DOM element'lerine erişim.

Network: HTTP isteklerini izleyin. Waterfall chart, timing, headers, payload. Performance bottleneck'leri tespit edin.

Performance: CPU, memory, rendering profiling. Flame chart, long tasks, layout shifts. Core Web Vitals ölçümü.

Application: Storage (cookies, localStorage, IndexedDB), Service Worker, Cache, Manifest. PWA debugging.

Lighthouse: Performance, Accessibility, Best Practices, SEO audit. Her sayfa için skor ve öneriler.

Terminal Araçları

Git: Versiyon kontrol. Branch, merge, rebase, stash. GitHub CLI (gh) ile PR yönetimi.

npm/yarn/pnpm: Package manager. Dependency yönetimi, script çalıştırma, workspace.

Docker: Containerization. docker build, docker run, docker compose. Lokal development environment.

curl/wget: HTTP istekleri. API test, dosya indirme. curl -X POST -H 'Content-Type: application/json' -d '{...}' url.

jq: JSON processor. Terminal'de JSON parse ve filter. curl ... | jq '.data'.

fzf: Fuzzy finder. Dosya, history, process arama. Terminal verimliliğini artırır.

Verimlilik Araçları

Postman/Insomnia: API test ve dokümantasyon. Collection, environment, test script. Team collaboration.

Figma: UI/UX tasarım. Component library, prototyping, dev mode (CSS export).

Chrome extensions: React DevTools, Vue DevTools, Redux DevTools, axe (accessibility).

Grammarly: Yazım ve dilbilgisi kontrolü. Blog yazıları ve dokümantasyon için.

Notion/Obsidian: Not alma ve bilgi yönetimi. Dokümantasyon, wiki, task tracking.

Kod Kalitesi Araçları

ESLint: JavaScript/TypeScript linting. Kod standartları, hata tespiti. Custom rules ve plugin'ler.

Prettier: Kod formatlama. Otomatik indentation, quote style, semicolon. Save on format.

TypeScript: Statik tip kontrolü. Compile-time hata tespiti. IDE autocomplete.

Husky + lint-staged: Pre-commit hook'lar. Commit öncesi lint ve format kontrolü. CI/CD pipeline'ına entegre.

SonarQube: Code quality analizi. Bug, vulnerability, code smell tespiti. Quality gate'ler.

Geliştirici Verimliliği İpuçları

Keyboard shortcuts: Editör ve tarayıcı kısayollarını öğrenin. Mouse kullanımını minimize edin.

Snippet'ler: Sık kullanılan kod parçalarını snippet olarak kaydedin. VS Code snippets, Emmet.

Alias'lar: Terminal alias'ları tanımlayın. alias gs='git status', alias dc='docker compose'.

Dotfiles: Yapılandırma dosyalarınızı (bashrc, vimrc, gitconfig) Git ile yönetin. Yeni makinede hızlı kurulum.

Learning: Dev.to, Hacker News, CSS-Tricks, Smashing Magazine. Sürekli öğrenme ve güncel kalma.