Blog
RSSFrontend, React, Next.js, yazılım mimarisi, performans, erişilebilirlik ve yapay zeka entegrasyonları üzerine deneyimler.
19 yazı listeleniyor
Kendini tanımak, yalnızca neleri sevdiğini bilmek değil; değerlerini, sınırlarını, güçlü yönlerini ve gerçekten ne istediğini anlamaktır. Bu yazıda öz farkındalık geliştirmenin, kendi beklentilerini başkalarının beklentilerinden ayırmanın ve kişisel hedeflerini belirlemenin yollarını ele alıyoruz.
6 dk okuma
Telefon bildirimleri, sosyal medya akışları ve sürekli erişilebilir olma beklentisi, günün nasıl geçtiğini fark etmeyi zorlaştırabilir. Dijital dünyadan tamamen uzaklaşmadan teknolojiyle daha bilinçli bir ilişki kurmak ve kendine zaman ayırmak mümkün mü? Bu yazıda dijital alışkanlıkları gözden geçirmenin pratik yollarını inceliyoruz.
5 dk okuma
Projelerimde tekrar tekrar yazdığım iki küçük parçayı açık kaynak pakete dönüştürdüm: React için useDebounce hook'u sunan usecraft ve tek stil dosyasıyla çalışan motion-kit-css. Bu yazıda paket yapısını, peer dependency kararını, dist klasörünün nasıl üretildiğini, yayın öncesi kontrolleri ve sürüm yönetimini anlatıyorum.
3 dk okuma
Git merge ve git rebase, farklı branch'lerde yapılan çalışmaları bir araya getirmek için kullanılan iki temel yöntemdir. Peki ikisi arasındaki fark nedir? Rebase hangi durumlarda tercih edilir? Merge conflict ve rebase conflict nasıl çözülür? Bu rehberde Git'in commit geçmişini, branch yönetimini, Pull Request iş akışını ve profesyonel ekiplerde kullanılan pratik komutları örneklerle inceliyoruz.
9 dk okuma
Docker, uygulamaları ve ihtiyaç duydukları bağımlılıkları izole ortamlarda çalıştırmayı sağlayan bir container platformudur. Peki Docker image ve container arasındaki fark nedir? Dockerfile nasıl yazılır? Frontend projelerinde Docker neden kullanılır? Bu rehberde Docker'ın temel kavramlarını, React ve Next.js projeleri için yapılandırma örneklerini, Docker Compose kullanımını ve sık karşılaşılan hataları adım adım inceliyoruz.
7 dk okuma
Accessibility yalnızca alt text, aria-label veya renk kontrastından ibaret değildir. Bir uygulama Lighthouse'tan yüksek skor alabilir ancak klavye ile kullanılamayan bir modal, yanlış yönetilen focus, erişilebilir olmayan form hataları veya ekran okuyucunun fark edemediği dinamik içerikler barındırabilir. Bu yazıda frontend geliştirirken sık gözden kaçan 7 accessibility problemini gerçek kod örnekleri üzerinden inceliyoruz.
5 dk okuma
React'te useMemo, useCallback, useRef ve useQuery çoğu zaman performans başlığı altında birlikte anılıyor. Ancak bu hook'ların çözdüğü problemler birbirinden oldukça farklı. useMemo hesaplanan değeri, useCallback fonksiyon referansını, useRef render tetiklemeden değişken bir değeri saklamayı amaçlarken useQuery server state ve API verisinin yönetimini üstlenir. Bu yazıda bu araçların hangi durumda gerçekten gerekli olduğunu; gereksiz kullanımın neden bazen kodu daha karmaşık hale getirdiğini ve debounce gibi tekniklerin API maliyetiyle nasıl ilişkili olduğunu örneklerle ele alıyoruz.
5 dk okuma
AI kod asistanları frontend'de belli bir hata sınıfı üretiyor: kod çalışıyor, ekranda doğru görünüyor, test yazılmamışsa hiçbir şey kırmızı yanmıyor. Ama re-render pattern'i bozuk olabiliyor, state yanlış yerde durabiliyor, erişilebilirlik atlanabiliyor. Bu yazıda 6 örnek üzerinden bu tür hataların neden gözden kaçtığına bakıyoruz.
4 dk okuma
Chatbotların yalnızca soru cevaplayan sistemlerden, bilgi arayabilen, dış araçları kullanabilen ve bir görevi adım adım gerçekleştirebilen yapılara dönüşmesinin arkasında LLM, RAG, Tool Calling, MCP ve Agent gibi farklı teknolojiler bulunur. Bu yazıda bu kavramların ne olduğunu, birbirlerinden nasıl ayrıldığını ve birlikte kullanıldıklarında nasıl bir yapay zekâ mimarisi oluşturduklarını inceleyeceğiz.
6 dk okuma
React'te bir butona tıkladığımızda yalnızca bir fonksiyon çalışmaz. Kullanıcı etkileşimi bir event oluşturur, event handler çalışır, state değişebilir, React yeni UI çıktısını hesaplar ve gerekli DOM değişikliklerini uygular. Bu süreci anlamak, React uygulamalarında performans ve state yönetimi hakkında daha doğru kararlar vermeyi sağlar.
4 dk okuma
Component ve widget kavramları çoğu frontend projesinde birbirinin yerine kullanılabilir. Ancak component genellikle tekrar kullanılabilir bir UI yapıtaşını ifade ederken widget, birden fazla component ve davranışı bir araya getirerek belirli bir işlevi yerine getiren daha üst seviye bir UI bölümünü ifade eder.
3 dk okuma
Bu yazıda React uygulamalarını hızlandırmak için kullanılan rendering optimizasyonları, memoization, lazy loading, virtualization, bundle analizi ve gerçek proje deneyimlerinden performans tekniklerini inceliyoruz.
2 dk okuma
Bu makale, Composition Pattern'in ne olduğunu, neden özellikle React uygulamalarında önemli olduğunu ve component mimarisinde nasıl kullanılabileceğini detaylı bir şekilde ele almaktadır. Composition yaklaşımı, büyük ve karmaşık component'ler oluşturmak yerine küçük ve bağımsız component'leri bir araya getirerek daha esnek, yeniden kullanılabilir ve sürdürülebilir yapılar oluşturmayı amaçlar. Bu rehberde children prop'u, Compound Components, props karmaşası, component sorumluluklarının ayrıştırılması, inheritance ile composition arasındaki farklar ve gerçek React senaryoları üzerinden Composition Pattern'in nasıl uygulanabileceği açıklanmaktadır. Ayrıca Composition Pattern'in ne zaman kullanılmaması gerektiği ve senior developer bakış açısıyla doğru abstraction seviyesinin nasıl belirlenebileceği ele alınmaktadır.
6 dk okuma
Adapter Pattern, mevcut bir sınıfın kodunu değiştirmeden farklı bir arayüz üzerinden kullanılmasını sağlar. Büyük projelerde API dönüşümleri, üçüncü parti servis entegrasyonları ve katmanlar arası veri uyumluluğu için sıkça kullanılır.
3 dk okuma
Frontend geliştirmede Design Pattern'leri sadece ezberlemek yerine problem odaklı kullanmak gerekir. Bu yazıda Strategy, Provider, Repository, Observer, Adapter, Facade ve Singleton gibi pattern'leri React ve Next.js üzerinden gerçek senaryolarla inceliyor; overengineering riskini ve doğru abstraction seviyesini ele alıyoruz.
6 dk okuma
Vibe Coding; ChatGPT, Claude Code, GitHub Copilot, Cursor ve Codex gibi AI araçlarını kullanarak daha hızlı prototip oluşturmayı, boilerplate kodlardan kurtulmayı ve geliştiricinin daha çok problem çözmeye odaklanmasını sağlar.
3 dk okuma
Erişilebilirlik dört temel prensip üzerine kuruludur: Perceivable, Operable, Understandable ve Robust.
2 dk okuma
Claude Code; dosya okuyabilir, terminal komutları çalıştırabilir, repository analiz edebilir, refactor yapabilir ve büyük kod tabanlarında context kaybetmeden çalışabilir. Peki gerçekten neden bu kadar popüler oldu?
3 dk okuma
Repository Pattern API iletişimini componentlerden ayırırken, React Query server state, cache, loading, error ve mutation yönetimini üstlenir. Bu iki yaklaşım birlikte kullanıldığında daha temiz bir frontend mimarisi oluşturulabilir.
3 dk okuma