[{"data":1,"prerenderedAt":8311},["ShallowReactive",2],{"blog-post-tr-\u002Fblog\u002Fyazilimcilar-icin-pasif-gelir-yollari":3,"blog-list-tr":150},{"id":4,"title":5,"body":6,"category":132,"date":133,"description":134,"draft":135,"extension":136,"meta":137,"navigation":138,"path":139,"seo":140,"stem":141,"tags":142,"translationKey":147,"videoId":148,"__hash__":149},"blog_tr\u002Fblog\u002Fyazilimcilar-icin-pasif-gelir-yollari.md","Yazılımcılar için beş pasif gelir yolu",{"type":7,"value":8,"toc":122},"minimark",[9,13,16,24,27,32,35,42,48,54,57,61,64,67,70,74,77,80,83,87,90,93,96,99,103,106,109,112,116,119],[10,11,12],"p",{},"Sen uyurken ya da gerçekten yaşarken kodunun çalışmaya devam etmesini hiç istedin mi? Az süregelen çabayla gelen para, yani pasif gelir, hayatını bir şeyler inşa ederek kazanan biri için cazip bir fikir. Bütün gün başkaları için üretiyorsak, geri ödemeye devam eden bir şey de üretebiliriz.",[10,14,15],{},"Becerilerimiz bu işe uygun. Saadet zinciri ya da emlak kralı olmak yok: malzeme zaten yaptığımız şey, yani dijital ürün geliştirmek, süreçleri otomatikleştirmek ve bildiğimizi paylaşmak.",[10,17,18,19,23],{},"Kulağa masal gibi geliyorsa şüphen haklı, özellikle haftanın çoğunu yiyen bir tam zamanlı iş varken. Bu ",[20,21,22],"em",{},"sıfır"," çaba değil. Baştan harcanan ve zamana yayılarak geri dönen bir çaba; kurulum bittiğinde bakım genelde inşadan çok daha küçük kalıyor.",[10,25,26],{},"Aşağıda yazılımcıların gerçekten kullandığı beş yol var ve her biri aylık bin dolar civarı bir noktaya nasıl yaklaşıyor.",[28,29,31],"h2",{"id":30},"_1-dijital-ürünler-e-kitap-kurs-ve-şablonlar","1. Dijital ürünler: e-kitap, kurs ve şablonlar",[10,33,34],{},"Muhtemelen en doğrudan yol. Başkalarının istediği bilgi ve pratik becerilere sahipsin; onları paketle.",[10,36,37,41],{},[38,39,40],"strong",{},"E-kitap ve rehberler."," Zor konuları basit anlatabiliyorsan ya da başkalarının zorlandığı dar bir teknolojide ustalaştıysan yaz. Bir çatının derinlemesine anlatımı, performans işine dair bir rehber, oturmuş pratiklerinin derlemesi. Bir kez yazıyorsun, biçimlendiriyorsun ve Gumroad, Leanpub ya da kendi siten üzerinden satıyorsun. Vue'da uzmanlaşmış biri Nuxt performansı üzerine bir el kitabı yazabilir.",[10,43,44,47],{},[38,45,46],{},"Çevrim içi kurslar."," Görsel anlatmayı tercih ediyorsan Udemy, Teachable ve Skillshare gibi platformlar video dersleri, alıştırmaları ve küçük sınavları yayınlamayı epeyce kolaylaştırıyor. Bir kez kaydediyorsun, satışı ve dağıtımı platform yürütüyor.",[10,49,50,53],{},[38,51,52],{},"Şablonlar ve hazır iskeletler."," Yazılımcılar sağlam bir temelden başlamayı sever. İyi işlenmiş bir arayüz bileşen kütüphanesi, düzgün kurulmuş bir backend iskeleti ya da bir site şablonu Creative Market veya ThemeForest gibi pazaryerlerinde satılabilir. Kimlik doğrulama, veritabanı kurulumu ve temel bir panel içeren SaaS başlangıç kitleri yaygın bir örnek.",[10,55,56],{},"Bu işin çalışıp çalışmayacağını belirleyen şey: belirli bir problemi çözmek ya da gerçek bir bilgi boşluğunu doldurmak. Yeniden paketlenmiş dokümantasyon satmıyor. Satan şey, ancak senin deneyiminle yazılabilecek kısım.",[28,58,60],{"id":59},"_2-küçük-bir-saas","2. Küçük bir SaaS",[10,62,63],{},"Bu, gündelik işe en yakın olanı. SaaS, insanların kullanmak için ödediği, çevrim içi barındırılan bir araç. Ama yeni bir Facebook değil: küçük, dar kapsamlı, tek bir problem.",[10,65,66],{},"Belirli bir grubun (yazılımcılar, pazarlamacılar, küçük işletmeler) tekrar eden bir sıkıntısını bul, onu çözen basit bir web uygulaması yaz ve aylık ya da yıllık ücretlendir. Basit bir erişilebilirlik izleyicisi, metni sosyal medya görseline çeviren bir araç, freelance çalışanlar için hafif bir CRM. Yazıldıktan sonra işi yazılım yapıyor; geriye bakım, destek ve arada bir yeni özellik kalıyor.",[10,68,69],{},"Gerçekten küçük başla. En sık yapılan hata, büyük ve özellik dolu bir şey kurmaya çalışmak. Tek bir problem seç, onu alışılmadık derecede iyi çöz, erken yayına al, gerisini isteyen olursa ekle.",[28,71,73],{"id":72},"_3-api-satmak","3. API satmak",[10,75,76],{},"API'ler yazılımın yazılımla konuşma biçimi. Başkalarının kendi uygulamalarına takmak isteyeceği bir servis ya da veri kümesi kurabiliyorsan, orada bir gelir akışı var.",[10,78,79],{},"Tek bir veriyi ya da işlevi sunan bir API yazıyorsun (hava durumu verisi, görsel işleme, metin özetleme, para birimi çevirisi gibi) ve kullanıma göre ücretlendiriyorsun. Markdown'ı düzgün biçimlendirilmiş PDF'e çeviren bir servis ya da az bilinen kripto paralar için fiyat veren bir uç nokta. Kararlı hâle gelip belgelendikten sonra arka planda isteklere cevap veriyor, senin vaktin de pazarlama ve desteğe gidiyor.",[10,81,82],{},"Bu seçenek diğerlerinden daha fazla altyapı istiyor; belgelendirme ve istek sınırlamasına da ciddi dikkat gerekiyor. Veri derlemede uzmanlığın ya da başkasında olmayan bir algoritman varsa değerlendirmeye değer.",[28,84,86],{"id":85},"_4-ticari-katmanı-olan-açık-kaynak","4. Ticari katmanı olan açık kaynak",[10,88,89],{},"Pek çok yazılımcı açık kaynağa ücretsiz katkı veriyor. Projeyi kapatmadan bundan kazanmanın yolları var.",[10,91,92],{},"Popüler bir kütüphaneyi sürdürüyorsan çekirdeği açık tutup gelişmiş özellikler, adanmış destek ya da kurumsal ölçek sunan bir pro sürüm satabilirsin. Açık kaynak bir arayüz kütüphanesi, ücretli bir tema oluşturucu ya da öncelikli destek satabilir.",[10,94,95],{},"Diğer yol sponsorluk. GitHub Sponsors, Open Collective ve Patreon var, çünkü bir araca bağımlı olan şirketler bazen onu fonlamaya razı oluyor. Yaygın kullanılan bir derleme aracının bakımcısı, ona güvenen işletmelerden aylık katkı alabiliyor.",[10,97,98],{},"Bu daha çok açık kaynak topluluğunda halihazırda bir varlığın varsa işliyor. Gelir için sıfırdan bir şey başlatmaktan çok, zaten karşılıksız verdiğin şeyin üzerine kurmakla ilgili.",[28,100,102],{"id":101},"_5-gerçekten-kullandığın-araçlar-için-affiliate","5. Gerçekten kullandığın araçlar için affiliate",[10,104,105],{},"Burada bir ürün geliştirmiyorsun; güvenilirliğini kullanarak gerçekten kullandığın şeyleri öneriyorsun. Biri senin bağlantından satın aldığında komisyon alıyorsun.",[10,107,108],{},"Pratikte bu, araçlardan, barındırmadan, kitaplardan ya da kurslardan söz ederken yazılarına, videolarına veya kurslarına affiliate bağlantısı koymak demek. Yılın geliştirme düzenini anlattığın bir yazı ve içinde kullandığın editöre, monitöre, sunucuya ve bulut servislerine bağlantılar. İçerik yayınlandıktan ve insanlar onu bulmaya başladıktan sonra bağlantılar çalışmaya devam ediyor.",[10,110,111],{},"Bunu belirleyen şey samimiyet. Yalnızca gerçekten kullandığını öner. Komisyon için alakasız ürünler iten birini okuyucu anında fark ediyor.",[28,113,115],{"id":114},"nereden-başlamalı","Nereden başlamalı",[10,117,118],{},"Aylık bin dolar bir gecede gelmiyor. Süreklilik ve ilk seferde tutmayan şeylere tahammül gerekiyor. Yazılımcının avantajı şu: bu akışları kurmak için gereken beceriler zaten kullandığımız beceriler.",[10,120,121],{},"Sana uyanı seç, küçük başla ve devam et. İlk satış, ilk abone, ilk komisyon: birikim oradan başlıyor.",{"title":123,"searchDepth":124,"depth":124,"links":125},"",2,[126,127,128,129,130,131],{"id":30,"depth":124,"text":31},{"id":59,"depth":124,"text":60},{"id":72,"depth":124,"text":73},{"id":85,"depth":124,"text":86},{"id":101,"depth":124,"text":102},{"id":114,"depth":124,"text":115},"CAREER","2025-08-28","Yazılımcıların dijital ürün, küçük SaaS araçları ya da freelance düzenler kurarak iş bittikten sonra da kazanmasının gerçekçi yolları.",false,"md",{},true,"\u002Fblog\u002Fyazilimcilar-icin-pasif-gelir-yollari",{"title":5,"description":134},"blog\u002Fyazilimcilar-icin-pasif-gelir-yollari",[143,144,145,146],"passive income","developers","side hustle","financial freedom","passive-income-strategies-for-developers",null,"7XoDg0PA2lCMZiCOxrUsUyBSuxAVl3u2Rc_oHdzyo94",[151,332,3823,3926,4005,4160,5693,7350,7457,7568,7947,8061,8229],{"id":152,"title":153,"body":154,"category":319,"date":320,"description":321,"draft":135,"extension":136,"meta":322,"navigation":138,"path":323,"seo":324,"stem":325,"tags":326,"translationKey":330,"videoId":148,"__hash__":331},"blog_tr\u002Fblog\u002Faz-bilinen-gelistirici-uretkenlik-araclari.md","Yazılımcılar için az bilinen on üretkenlik aracı",{"type":7,"value":155,"toc":306},[156,159,163,166,169,172,176,179,182,185,189,192,200,204,207,210,213,217,220,223,227,230,233,236,240,243,246,250,253,256,260,267,283,286,290,293,296,299,303],[10,157,158],{},"Geliştirme işi genelde aynı anda bir düzine şeyi çevirmek demek: hata düzeltmekten yeni özellik tasarlamaya kadar. Hepimizin standart takımı var: VS Code, Git, belki Jira ya da Trello. Bu liste diğerleri hakkında; her derlemede geçmeyen ama çalışma gününden sessizce sürtünme çıkaran araçlar.",[28,160,162],{"id":161},"_1-raycast","1. Raycast",[10,164,165],{},"macOS'ta zaten Spotlight varken neden başka bir başlatıcı isteyesin diye sorabilirsin. Raycast hızlı, klavyeyle sürülen bir başlatıcı ve epeyce ileri gidiyor.",[10,167,168],{},"Tek bir arama çubuğundan snippet oluşturabiliyor, para birimi çevirebiliyor, Spotify'ı kontrol edebiliyor ve pano geçmişini yönetebiliyorsun. Kendi iş akışındaki tekrar eden kısımları otomatikleştirmek için kendi eklentilerini yazabiliyorsun: günlük Git push'u ya da belirli bir API uç noktasını birkaç tuşa indirmek gibi. Notion, Jira, Linear ve GitHub'a da bağlanıyor; tarayıcı açmadan görev yönetebiliyor, kayıt açabiliyor ve doküman arayabiliyorsun.",[10,170,171],{},"Bir ayda saatlere dönüşen türden saniyeler kazandırıyor.",[28,173,175],{"id":174},"_2-typora","2. Typora",[10,177,178],{},"Bir markdown editörü kulağa dikkate değer gelmiyor, ta ki bunu kullanana kadar. Dokümantasyon, blog yazısı ya da uzun notlar yazıyorsan Typora bunun için sakin bir yer veriyor.",[10,180,181],{},"Bölünmüş panel yok: markdown yazıyorsun ve sen yazarken metin biçimleniyor. Odak kipi üzerinde çalıştığın paragraf dışındaki her şeyi gizliyor. Dışa aktarma PDF, Word, HTML ve diğerlerini kapsıyor.",[10,183,184],{},"İnsana daha çok yazma isteği veren cinsten bir araç.",[28,186,188],{"id":187},"_3-warp","3. Warp",[10,190,191],{},"Bir terminal az bilinen bir araç sayılmaz, ama Warp farklı varsayımlar üzerine kurulu. Komut satırını daha verimli kılmak için yapay zekayı ve iş birliğine dayalı bir modeli kullanıyor.",[10,193,194,195,199],{},"Az kullanılan bir ",[196,197,198],"code",{},"git"," komutunu hatırlamıyorsan bağlamına bakarak öneri veriyor. Her komut ve çıktısı görsel bir blok hâlinde gruplanıyor; bu da oturumda geriye doğru gezinmeyi çok kolaylaştırıyor. Komutları ve akışları ekibinle terminalin içinden paylaşabiliyorsun.",[28,201,203],{"id":202},"_4-obsidian","4. Obsidian",[10,205,206],{},"Çoğumuz bir düzine not uygulaması denedik. Obsidian'ın farkı, notları dosyalamak yerine birbirine bağlamak üzere kurulmuş olması.",[10,208,209],{},"Her şey yerel bir markdown dosyası, yani kendi verinin kontrolü sende. Bağlantılar iki yönlü çalışıyor; okuduğun nota hangi notların işaret ettiğini görebiliyorsun. Grafik görünümü de bu bağlantıları görsel olarak veriyor.",[10,211,212],{},"Sürekli yeni bir şey öğrenen biri için bu yapı, yıllar geçtikçe klasör ağacından çok daha iyi ayakta kalıyor.",[28,214,216],{"id":215},"_5-rectangle","5. Rectangle",[10,218,219],{},"Basit ve etkili. Rectangle, macOS için ücretsiz ve açık kaynak bir pencere yöneticisi; pencereleri klavye kısayollarıyla ya da sürükleyerek düzenlere oturtuyor: yarım, çeyrek, özel boyutlar, birden fazla ekran üzerinde.",[10,221,222],{},"Pencereleri elle sürükleyip boyutlandırmak yok. Küçük bir değişiklik, fark edilir bir etki.",[28,224,226],{"id":225},"_6-cron","6. Cron",[10,228,229],{},"Evet, bir takvim uygulaması. Cron, takvimi bir kayıt defteri değil çalışma aracı olarak kullananlar için tasarlanmış.",[10,231,232],{},"Arayüz temiz ve önce klavye; fareye uzanmadan etkinlik oluşturabiliyor, tarihler arasında gezebiliyorsun. Zaman bloklama içinde geliyor, bu da odak zamanını ummak yerine ayırmayı mümkün kılıyor.",[10,234,235],{},"Takvimi yalnızca izlemene değil, ona uymana yardım ediyor.",[28,237,239],{"id":238},"_7-excalidraw","7. Excalidraw",[10,241,242],{},"Bazen ciddi bir diyagram aracı açmadan bir fikri, bir akışı ya da bir sistemin mimarisini çiziktirmek istersin. Excalidraw, her şeyin elle çizilmiş göründüğü sanal bir beyaz tahta.",[10,244,245],{},"O kabalık kasıtlı: beyin fırtınasına ve erken fikirlere uyuyor, çünkü cilalı bir diyagram elindekinden fazla kesinlik ima ederdi. Tahtaları eş zamanlı çalışmak için paylaşabiliyor, Notion ya da Obsidian içine gömebiliyor veya SVG ya da PNG olarak dışa aktarabiliyorsun.",[28,247,249],{"id":248},"_8-session","8. Session",[10,251,252],{},"Pomodoro tekniğini herkes bilir: yirmi beş dakika çalış, beş dakika ara ver. Teoride basit, pratikte unutması kolay. Session, bunu gerçekten yapmana yardım eden sade bir uygulama.",[10,254,255],{},"Sayaç temiz ve rahatsız etmiyor, ara vermen ve yeni oturum başlatman için dürtüyor, ne kadar odaklı çalıştığını da takip ediyor.",[28,257,259],{"id":258},"_9-fzf","9. fzf",[10,261,262,263,266],{},"Bu daha teknik, ama ",[196,264,265],{},"fzf"," terminalin hissini değiştiriyor. Komut satırı için genel amaçlı bir bulanık arayıcı: dosyalar, komut geçmişi, süreçler, Git commit'leri.",[10,268,269,270,273,274,273,277,273,280,282],{},"Neredeyse her şeyi birkaç tuşta bulabiliyorsun ve ",[196,271,272],{},"cd",", ",[196,275,276],{},"grep",[196,278,279],{},"history",[196,281,198],{}," komutlarına takılıyor. Fazlasıyla yapılandırılabilir olduğu için sonunda senin alışkanlıklarının etrafında şekilleniyor.",[10,284,285],{},"Büyük projelerde gerçekten şaşırtıcı miktarda zaman kazandırıyor.",[28,287,289],{"id":288},"_10-toucan","10. Toucan",[10,291,292],{},"Bu, alışılmış anlamda bir geliştirici aracı değil. Toucan, zaten ziyaret ettiğin sayfalardaki bazı kelimeleri öğrenmekte olduğun dildeki karşılıklarıyla sessizce değiştiren bir tarayıcı eklentisi.",[10,294,295],{},"Ayrı bir çalışma zamanı ayırmadan, bağlam içinde kelime ediniyorsun. Ayrıca günü kod dışında bir şeyle bölüyor; bir problemden farklı türde bir işle uzaklaşmak, çoğu zaman ona taze gözle dönmeni sağlayan şey.",[10,297,298],{},"Geliştirme işiyle bağı kulağa geldiğinden daha az tuhaf. Yazılımcılar seyahat ediyor, uluslararası ekiplerde çalışıyor ve dünyanın her yerinde yazılmış dokümanları okuyor.",[28,300,302],{"id":301},"toparlarken","Toparlarken",[10,304,305],{},"Bunların hiçbiri \"en iyi üretkenlik uygulamaları\" listelerinin sabiti değil ve her biri belirli bir sürtünmeyi kaldırıyor. Üretkenlik aslında daha çok çalışmakla ilgili değil; büyük kısmı, seninle iş arasındaki küçük engelleri kaldırmakla ilgili.",{"title":123,"searchDepth":124,"depth":124,"links":307},[308,309,310,311,312,313,314,315,316,317,318],{"id":161,"depth":124,"text":162},{"id":174,"depth":124,"text":175},{"id":187,"depth":124,"text":188},{"id":202,"depth":124,"text":203},{"id":215,"depth":124,"text":216},{"id":225,"depth":124,"text":226},{"id":238,"depth":124,"text":239},{"id":248,"depth":124,"text":249},{"id":258,"depth":124,"text":259},{"id":288,"depth":124,"text":289},{"id":301,"depth":124,"text":302},"PRODUCT_ENG","2025-09-18","Tekrar eden işi azaltan, bildiklerini düzenleyen ve odaklanmayı kolaylaştıran, listelerde pek geçmeyen araçlar.",{},"\u002Fblog\u002Faz-bilinen-gelistirici-uretkenlik-araclari",{"title":153,"description":321},"blog\u002Faz-bilinen-gelistirici-uretkenlik-araclari",[327,328,144,329],"productivity","tools","workflow","underrated-productivity-tools-for-developers","4K4NFj8j1T4c7vM9Yao7tkhTT0V2QWVYa180SJEhNLg",{"id":333,"title":334,"body":335,"category":3810,"date":3811,"description":3812,"draft":135,"extension":136,"meta":3813,"navigation":138,"path":3814,"seo":3815,"stem":3816,"tags":3817,"translationKey":3821,"videoId":148,"__hash__":3822},"blog_tr\u002Fblog\u002Fileri-seviye-vue-3-teknikleri.md","Bilmeye değer yedi ileri seviye Vue 3 tekniği",{"type":7,"value":336,"toc":3800},[337,340,348,354,357,360,725,728,952,956,967,970,1044,1632,1642,1646,1653,1656,1854,1859,2065,2073,2077,2091,2217,2220,2269,2286,2290,2293,2296,2472,2475,2637,2641,2644,2647,2890,3189,3201,3205,3208,3223,3345,3352,3430,3437,3643,3783,3794,3797],[10,338,339],{},"Vue 3 bir süredir gündelik frontend işinin parçası. Sezgisel, üzerinde çalışması keyifli ve temel bilgiler seni epey ileri götürüyor. Aşağıdakiler o noktadan sonrası: kendi projelerimde işime yaramış yedi teknik.",[28,341,343,344,347],{"id":342},"_1-setup-sonrasında-composition-api","1. ",[196,345,346],{},"setup()"," sonrasında Composition API",[10,349,350,351,353],{},"Composition API'nin artık ileri seviye sayılmadığını söyleyebilirsin, haklısın da. Çoğumuz ",[196,352,346],{}," ve tepkisel referanslarla rahatız. Genelde kullanılmadan kalan kısım, mantığı composable'lara çıkarmak.",[10,355,356],{},"Composable'ı, durum taşıyan mantığı kapsayan bir fonksiyon olarak düşün. Bileşenler yalnızca render işiyle uğraştığı için inceliyor, mantık seçeneklere göre değil özelliğe göre gruplanıyor ve aynı mantık, mixin'lerin eskiden çıkardığı sorunlar olmadan paylaşılabiliyor.",[10,358,359],{},"Diyelim ki veri çeken, yükleniyor ve hata durumlarını izleyen bir özelliğin var. Bunu her bileşende tekrarlamak yerine:",[361,362,366],"pre",{"className":363,"code":364,"language":365,"meta":123,"style":123},"language-javascript shiki shiki-themes github-dark-default","\u002F\u002F composables\u002FuseFetch.js\nimport { ref, onMounted } from \"vue\";\n\nexport function useFetch(url) {\n  const data = ref(null);\n  const error = ref(null);\n  const loading = ref(true);\n\n  async function fetchData() {\n    loading.value = true;\n    error.value = null;\n    try {\n      const res = await fetch(url);\n      if (!res.ok) {\n        throw new Error(`HTTP error! status: ${res.status}`);\n      }\n      data.value = await res.json();\n    } catch (e) {\n      error.value = e;\n    } finally {\n      loading.value = false;\n    }\n  }\n\n  onMounted(fetchData);\n\n  return { data, error, loading, fetchData };\n}\n","javascript",[196,367,368,377,397,403,426,450,468,487,492,506,520,533,542,562,577,608,614,633,645,656,666,679,685,691,696,705,710,719],{"__ignoreMap":123},[369,370,373],"span",{"class":371,"line":372},"line",1,[369,374,376],{"class":375},"sH3jZ","\u002F\u002F composables\u002FuseFetch.js\n",[369,378,379,383,387,390,394],{"class":371,"line":124},[369,380,382],{"class":381},"suJrU","import",[369,384,386],{"class":385},"sZEs4"," { ref, onMounted } ",[369,388,389],{"class":381},"from",[369,391,393],{"class":392},"s9uIt"," \"vue\"",[369,395,396],{"class":385},";\n",[369,398,400],{"class":371,"line":399},3,[369,401,402],{"emptyLinePlaceholder":138},"\n",[369,404,406,409,412,416,419,423],{"class":371,"line":405},4,[369,407,408],{"class":381},"export",[369,410,411],{"class":381}," function",[369,413,415],{"class":414},"sc3cj"," useFetch",[369,417,418],{"class":385},"(",[369,420,422],{"class":421},"sQhOw","url",[369,424,425],{"class":385},") {\n",[369,427,429,432,436,439,442,444,447],{"class":371,"line":428},5,[369,430,431],{"class":381},"  const",[369,433,435],{"class":434},"sFSAA"," data",[369,437,438],{"class":381}," =",[369,440,441],{"class":414}," ref",[369,443,418],{"class":385},[369,445,446],{"class":434},"null",[369,448,449],{"class":385},");\n",[369,451,453,455,458,460,462,464,466],{"class":371,"line":452},6,[369,454,431],{"class":381},[369,456,457],{"class":434}," error",[369,459,438],{"class":381},[369,461,441],{"class":414},[369,463,418],{"class":385},[369,465,446],{"class":434},[369,467,449],{"class":385},[369,469,471,473,476,478,480,482,485],{"class":371,"line":470},7,[369,472,431],{"class":381},[369,474,475],{"class":434}," loading",[369,477,438],{"class":381},[369,479,441],{"class":414},[369,481,418],{"class":385},[369,483,484],{"class":434},"true",[369,486,449],{"class":385},[369,488,490],{"class":371,"line":489},8,[369,491,402],{"emptyLinePlaceholder":138},[369,493,495,498,500,503],{"class":371,"line":494},9,[369,496,497],{"class":381},"  async",[369,499,411],{"class":381},[369,501,502],{"class":414}," fetchData",[369,504,505],{"class":385},"() {\n",[369,507,509,512,515,518],{"class":371,"line":508},10,[369,510,511],{"class":385},"    loading.value ",[369,513,514],{"class":381},"=",[369,516,517],{"class":434}," true",[369,519,396],{"class":385},[369,521,523,526,528,531],{"class":371,"line":522},11,[369,524,525],{"class":385},"    error.value ",[369,527,514],{"class":381},[369,529,530],{"class":434}," null",[369,532,396],{"class":385},[369,534,536,539],{"class":371,"line":535},12,[369,537,538],{"class":381},"    try",[369,540,541],{"class":385}," {\n",[369,543,545,548,551,553,556,559],{"class":371,"line":544},13,[369,546,547],{"class":381},"      const",[369,549,550],{"class":434}," res",[369,552,438],{"class":381},[369,554,555],{"class":381}," await",[369,557,558],{"class":414}," fetch",[369,560,561],{"class":385},"(url);\n",[369,563,565,568,571,574],{"class":371,"line":564},14,[369,566,567],{"class":381},"      if",[369,569,570],{"class":385}," (",[369,572,573],{"class":381},"!",[369,575,576],{"class":385},"res.ok) {\n",[369,578,580,583,586,589,591,594,597,600,603,606],{"class":371,"line":579},15,[369,581,582],{"class":381},"        throw",[369,584,585],{"class":381}," new",[369,587,588],{"class":414}," Error",[369,590,418],{"class":385},[369,592,593],{"class":392},"`HTTP error! status: ${",[369,595,596],{"class":385},"res",[369,598,599],{"class":392},".",[369,601,602],{"class":385},"status",[369,604,605],{"class":392},"}`",[369,607,449],{"class":385},[369,609,611],{"class":371,"line":610},16,[369,612,613],{"class":385},"      }\n",[369,615,617,620,622,624,627,630],{"class":371,"line":616},17,[369,618,619],{"class":385},"      data.value ",[369,621,514],{"class":381},[369,623,555],{"class":381},[369,625,626],{"class":385}," res.",[369,628,629],{"class":414},"json",[369,631,632],{"class":385},"();\n",[369,634,636,639,642],{"class":371,"line":635},18,[369,637,638],{"class":385},"    } ",[369,640,641],{"class":381},"catch",[369,643,644],{"class":385}," (e) {\n",[369,646,648,651,653],{"class":371,"line":647},19,[369,649,650],{"class":385},"      error.value ",[369,652,514],{"class":381},[369,654,655],{"class":385}," e;\n",[369,657,659,661,664],{"class":371,"line":658},20,[369,660,638],{"class":385},[369,662,663],{"class":381},"finally",[369,665,541],{"class":385},[369,667,669,672,674,677],{"class":371,"line":668},21,[369,670,671],{"class":385},"      loading.value ",[369,673,514],{"class":381},[369,675,676],{"class":434}," false",[369,678,396],{"class":385},[369,680,682],{"class":371,"line":681},22,[369,683,684],{"class":385},"    }\n",[369,686,688],{"class":371,"line":687},23,[369,689,690],{"class":385},"  }\n",[369,692,694],{"class":371,"line":693},24,[369,695,402],{"emptyLinePlaceholder":138},[369,697,699,702],{"class":371,"line":698},25,[369,700,701],{"class":414},"  onMounted",[369,703,704],{"class":385},"(fetchData);\n",[369,706,708],{"class":371,"line":707},26,[369,709,402],{"emptyLinePlaceholder":138},[369,711,713,716],{"class":371,"line":712},27,[369,714,715],{"class":381},"  return",[369,717,718],{"class":385}," { data, error, loading, fetchData };\n",[369,720,722],{"class":371,"line":721},28,[369,723,724],{"class":385},"}\n",[10,726,727],{},"Sonra herhangi bir bileşen bunu kullanabiliyor:",[361,729,733],{"className":730,"code":731,"language":732,"meta":123,"style":123},"language-vue shiki shiki-themes github-dark-default","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv v-if=\"loading\">Loading posts...\u003C\u002Fdiv>\n    \u003Cdiv v-else-if=\"error\">Error: {{ error.message }}\u003C\u002Fdiv>\n    \u003Cul v-else>\n      \u003Cli v-for=\"post in data\" :key=\"post.id\">{{ post.title }}\u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { useFetch } from \"@\u002Fcomposables\u002FuseFetch\";\n\nconst { data, error, loading } = useFetch(\n  \"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\"\n);\n\u003C\u002Fscript>\n","vue",[196,734,735,747,757,779,800,812,843,852,861,870,874,886,900,904,935,940,944],{"__ignoreMap":123},[369,736,737,740,744],{"class":371,"line":372},[369,738,739],{"class":385},"\u003C",[369,741,743],{"class":742},"sPWt5","template",[369,745,746],{"class":385},">\n",[369,748,749,752,755],{"class":371,"line":124},[369,750,751],{"class":385},"  \u003C",[369,753,754],{"class":742},"div",[369,756,746],{"class":385},[369,758,759,762,764,767,769,772,775,777],{"class":371,"line":399},[369,760,761],{"class":385},"    \u003C",[369,763,754],{"class":742},[369,765,766],{"class":434}," v-if",[369,768,514],{"class":385},[369,770,771],{"class":392},"\"loading\"",[369,773,774],{"class":385},">Loading posts...\u003C\u002F",[369,776,754],{"class":742},[369,778,746],{"class":385},[369,780,781,783,785,788,790,793,796,798],{"class":371,"line":405},[369,782,761],{"class":385},[369,784,754],{"class":742},[369,786,787],{"class":434}," v-else-if",[369,789,514],{"class":385},[369,791,792],{"class":392},"\"error\"",[369,794,795],{"class":385},">Error: {{ error.message }}\u003C\u002F",[369,797,754],{"class":742},[369,799,746],{"class":385},[369,801,802,804,807,810],{"class":371,"line":428},[369,803,761],{"class":385},[369,805,806],{"class":742},"ul",[369,808,809],{"class":434}," v-else",[369,811,746],{"class":385},[369,813,814,817,820,823,825,828,831,833,836,839,841],{"class":371,"line":452},[369,815,816],{"class":385},"      \u003C",[369,818,819],{"class":742},"li",[369,821,822],{"class":434}," v-for",[369,824,514],{"class":385},[369,826,827],{"class":392},"\"post in data\"",[369,829,830],{"class":434}," :key",[369,832,514],{"class":385},[369,834,835],{"class":392},"\"post.id\"",[369,837,838],{"class":385},">{{ post.title }}\u003C\u002F",[369,840,819],{"class":742},[369,842,746],{"class":385},[369,844,845,848,850],{"class":371,"line":470},[369,846,847],{"class":385},"    \u003C\u002F",[369,849,806],{"class":742},[369,851,746],{"class":385},[369,853,854,857,859],{"class":371,"line":489},[369,855,856],{"class":385},"  \u003C\u002F",[369,858,754],{"class":742},[369,860,746],{"class":385},[369,862,863,866,868],{"class":371,"line":494},[369,864,865],{"class":385},"\u003C\u002F",[369,867,743],{"class":742},[369,869,746],{"class":385},[369,871,872],{"class":371,"line":508},[369,873,402],{"emptyLinePlaceholder":138},[369,875,876,878,881,884],{"class":371,"line":522},[369,877,739],{"class":385},[369,879,880],{"class":742},"script",[369,882,883],{"class":434}," setup",[369,885,746],{"class":385},[369,887,888,890,893,895,898],{"class":371,"line":535},[369,889,382],{"class":381},[369,891,892],{"class":385}," { useFetch } ",[369,894,389],{"class":381},[369,896,897],{"class":392}," \"@\u002Fcomposables\u002FuseFetch\"",[369,899,396],{"class":385},[369,901,902],{"class":371,"line":544},[369,903,402],{"emptyLinePlaceholder":138},[369,905,906,909,912,915,917,920,922,925,928,930,932],{"class":371,"line":564},[369,907,908],{"class":381},"const",[369,910,911],{"class":385}," { ",[369,913,914],{"class":434},"data",[369,916,273],{"class":385},[369,918,919],{"class":434},"error",[369,921,273],{"class":385},[369,923,924],{"class":434},"loading",[369,926,927],{"class":385}," } ",[369,929,514],{"class":381},[369,931,415],{"class":414},[369,933,934],{"class":385},"(\n",[369,936,937],{"class":371,"line":579},[369,938,939],{"class":392},"  \"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fposts\"\n",[369,941,942],{"class":371,"line":610},[369,943,449],{"class":385},[369,945,946,948,950],{"class":371,"line":616},[369,947,865],{"class":385},[369,949,880],{"class":742},[369,951,746],{"class":385},[28,953,955],{"id":954},"_2-teleport-kaçması-gereken-öğeler-için","2. Teleport: kaçması gereken öğeler için",[10,957,958,959,962,963,966],{},"Derin bir bileşenin içinden modal, ipucu kutusu ya da bildirim render etmeye çalışırken ",[196,960,961],{},"z-index"," savaşları verdiysen cevap ",[196,964,965],{},"Teleport",". Şablonunun bir parçasını, bileşen hiyerarşisinin dışında, DOM'un başka bir yerinde render ediyor; bu sırada bileşeninin durumuyla tepkiselliği koruyor.",[10,968,969],{},"Modallara ve diyaloglara, bildirimlere, ipucu kutularına ve açılır menülere uyuyor.",[361,971,975],{"className":972,"code":973,"language":974,"meta":123,"style":123},"language-html shiki shiki-themes github-dark-default","\u003C!-- In your App.vue or main layout file -->\n\u003Cbody>\n  \u003Cdiv id=\"app\">\u003C\u002Fdiv>\n  \u003Cdiv id=\"modals-container\">\u003C\u002Fdiv>\n  \u003C!-- This is our teleport target -->\n\u003C\u002Fbody>\n","html",[196,976,977,982,991,1012,1031,1036],{"__ignoreMap":123},[369,978,979],{"class":371,"line":372},[369,980,981],{"class":375},"\u003C!-- In your App.vue or main layout file -->\n",[369,983,984,986,989],{"class":371,"line":124},[369,985,739],{"class":385},[369,987,988],{"class":742},"body",[369,990,746],{"class":385},[369,992,993,995,997,1000,1002,1005,1008,1010],{"class":371,"line":399},[369,994,751],{"class":385},[369,996,754],{"class":742},[369,998,999],{"class":434}," id",[369,1001,514],{"class":385},[369,1003,1004],{"class":392},"\"app\"",[369,1006,1007],{"class":385},">\u003C\u002F",[369,1009,754],{"class":742},[369,1011,746],{"class":385},[369,1013,1014,1016,1018,1020,1022,1025,1027,1029],{"class":371,"line":405},[369,1015,751],{"class":385},[369,1017,754],{"class":742},[369,1019,999],{"class":434},[369,1021,514],{"class":385},[369,1023,1024],{"class":392},"\"modals-container\"",[369,1026,1007],{"class":385},[369,1028,754],{"class":742},[369,1030,746],{"class":385},[369,1032,1033],{"class":371,"line":428},[369,1034,1035],{"class":375},"  \u003C!-- This is our teleport target -->\n",[369,1037,1038,1040,1042],{"class":371,"line":452},[369,1039,865],{"class":385},[369,1041,988],{"class":742},[369,1043,746],{"class":385},[361,1045,1047],{"className":730,"code":1046,"language":732,"meta":123,"style":123},"\u003C!-- components\u002FMyModal.vue -->\n\u003Ctemplate>\n  \u003CTeleport to=\"#modals-container\">\n    \u003Cdiv v-if=\"isOpen\" class=\"modal-backdrop\" @click=\"close\">\n      \u003Cdiv class=\"modal-content\" @click.stop>\n        \u003Ch3>My Awesome Modal\u003C\u002Fh3>\n        \u003Cp>This modal content is rendered outside the component!\u003C\u002Fp>\n        \u003Cbutton @click=\"close\">Close\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\n\nconst open = () => (isOpen.value = true);\nconst close = () => (isOpen.value = false);\n\n\u002F\u002F Expose open\u002Fclose for parent component to use\ndefineExpose({ open, close });\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n.modal-content {\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  min-width: 300px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\u003C\u002Fstyle>\n",[196,1048,1049,1054,1062,1078,1109,1127,1142,1155,1175,1184,1192,1200,1208,1212,1222,1235,1239,1257,1261,1285,1306,1310,1315,1323,1331,1335,1347,1354,1367,1380,1392,1408,1423,1453,1466,1479,1491,1504,1509,1517,1530,1546,1561,1576,1618,1623],{"__ignoreMap":123},[369,1050,1051],{"class":371,"line":372},[369,1052,1053],{"class":375},"\u003C!-- components\u002FMyModal.vue -->\n",[369,1055,1056,1058,1060],{"class":371,"line":124},[369,1057,739],{"class":385},[369,1059,743],{"class":742},[369,1061,746],{"class":385},[369,1063,1064,1066,1068,1071,1073,1076],{"class":371,"line":399},[369,1065,751],{"class":385},[369,1067,965],{"class":742},[369,1069,1070],{"class":434}," to",[369,1072,514],{"class":385},[369,1074,1075],{"class":392},"\"#modals-container\"",[369,1077,746],{"class":385},[369,1079,1080,1082,1084,1086,1088,1091,1094,1096,1099,1102,1104,1107],{"class":371,"line":405},[369,1081,761],{"class":385},[369,1083,754],{"class":742},[369,1085,766],{"class":434},[369,1087,514],{"class":385},[369,1089,1090],{"class":392},"\"isOpen\"",[369,1092,1093],{"class":434}," class",[369,1095,514],{"class":385},[369,1097,1098],{"class":392},"\"modal-backdrop\"",[369,1100,1101],{"class":434}," @click",[369,1103,514],{"class":385},[369,1105,1106],{"class":392},"\"close\"",[369,1108,746],{"class":385},[369,1110,1111,1113,1115,1117,1119,1122,1125],{"class":371,"line":428},[369,1112,816],{"class":385},[369,1114,754],{"class":742},[369,1116,1093],{"class":434},[369,1118,514],{"class":385},[369,1120,1121],{"class":392},"\"modal-content\"",[369,1123,1124],{"class":434}," @click.stop",[369,1126,746],{"class":385},[369,1128,1129,1132,1135,1138,1140],{"class":371,"line":452},[369,1130,1131],{"class":385},"        \u003C",[369,1133,1134],{"class":742},"h3",[369,1136,1137],{"class":385},">My Awesome Modal\u003C\u002F",[369,1139,1134],{"class":742},[369,1141,746],{"class":385},[369,1143,1144,1146,1148,1151,1153],{"class":371,"line":470},[369,1145,1131],{"class":385},[369,1147,10],{"class":742},[369,1149,1150],{"class":385},">This modal content is rendered outside the component!\u003C\u002F",[369,1152,10],{"class":742},[369,1154,746],{"class":385},[369,1156,1157,1159,1162,1164,1166,1168,1171,1173],{"class":371,"line":489},[369,1158,1131],{"class":385},[369,1160,1161],{"class":742},"button",[369,1163,1101],{"class":434},[369,1165,514],{"class":385},[369,1167,1106],{"class":392},[369,1169,1170],{"class":385},">Close\u003C\u002F",[369,1172,1161],{"class":742},[369,1174,746],{"class":385},[369,1176,1177,1180,1182],{"class":371,"line":494},[369,1178,1179],{"class":385},"      \u003C\u002F",[369,1181,754],{"class":742},[369,1183,746],{"class":385},[369,1185,1186,1188,1190],{"class":371,"line":508},[369,1187,847],{"class":385},[369,1189,754],{"class":742},[369,1191,746],{"class":385},[369,1193,1194,1196,1198],{"class":371,"line":522},[369,1195,856],{"class":385},[369,1197,965],{"class":742},[369,1199,746],{"class":385},[369,1201,1202,1204,1206],{"class":371,"line":535},[369,1203,865],{"class":385},[369,1205,743],{"class":742},[369,1207,746],{"class":385},[369,1209,1210],{"class":371,"line":544},[369,1211,402],{"emptyLinePlaceholder":138},[369,1213,1214,1216,1218,1220],{"class":371,"line":564},[369,1215,739],{"class":385},[369,1217,880],{"class":742},[369,1219,883],{"class":434},[369,1221,746],{"class":385},[369,1223,1224,1226,1229,1231,1233],{"class":371,"line":579},[369,1225,382],{"class":381},[369,1227,1228],{"class":385}," { ref } ",[369,1230,389],{"class":381},[369,1232,393],{"class":392},[369,1234,396],{"class":385},[369,1236,1237],{"class":371,"line":610},[369,1238,402],{"emptyLinePlaceholder":138},[369,1240,1241,1243,1246,1248,1250,1252,1255],{"class":371,"line":616},[369,1242,908],{"class":381},[369,1244,1245],{"class":434}," isOpen",[369,1247,438],{"class":381},[369,1249,441],{"class":414},[369,1251,418],{"class":385},[369,1253,1254],{"class":434},"false",[369,1256,449],{"class":385},[369,1258,1259],{"class":371,"line":635},[369,1260,402],{"emptyLinePlaceholder":138},[369,1262,1263,1265,1268,1270,1273,1276,1279,1281,1283],{"class":371,"line":647},[369,1264,908],{"class":381},[369,1266,1267],{"class":414}," open",[369,1269,438],{"class":381},[369,1271,1272],{"class":385}," () ",[369,1274,1275],{"class":381},"=>",[369,1277,1278],{"class":385}," (isOpen.value ",[369,1280,514],{"class":381},[369,1282,517],{"class":434},[369,1284,449],{"class":385},[369,1286,1287,1289,1292,1294,1296,1298,1300,1302,1304],{"class":371,"line":658},[369,1288,908],{"class":381},[369,1290,1291],{"class":414}," close",[369,1293,438],{"class":381},[369,1295,1272],{"class":385},[369,1297,1275],{"class":381},[369,1299,1278],{"class":385},[369,1301,514],{"class":381},[369,1303,676],{"class":434},[369,1305,449],{"class":385},[369,1307,1308],{"class":371,"line":668},[369,1309,402],{"emptyLinePlaceholder":138},[369,1311,1312],{"class":371,"line":681},[369,1313,1314],{"class":375},"\u002F\u002F Expose open\u002Fclose for parent component to use\n",[369,1316,1317,1320],{"class":371,"line":687},[369,1318,1319],{"class":414},"defineExpose",[369,1321,1322],{"class":385},"({ open, close });\n",[369,1324,1325,1327,1329],{"class":371,"line":693},[369,1326,865],{"class":385},[369,1328,880],{"class":742},[369,1330,746],{"class":385},[369,1332,1333],{"class":371,"line":698},[369,1334,402],{"emptyLinePlaceholder":138},[369,1336,1337,1339,1342,1345],{"class":371,"line":707},[369,1338,739],{"class":385},[369,1340,1341],{"class":742},"style",[369,1343,1344],{"class":434}," scoped",[369,1346,746],{"class":385},[369,1348,1349,1352],{"class":371,"line":712},[369,1350,1351],{"class":434},".modal-backdrop",[369,1353,541],{"class":385},[369,1355,1356,1359,1362,1365],{"class":371,"line":721},[369,1357,1358],{"class":434},"  position",[369,1360,1361],{"class":385},": ",[369,1363,1364],{"class":434},"fixed",[369,1366,396],{"class":385},[369,1368,1370,1373,1375,1378],{"class":371,"line":1369},29,[369,1371,1372],{"class":434},"  top",[369,1374,1361],{"class":385},[369,1376,1377],{"class":434},"0",[369,1379,396],{"class":385},[369,1381,1383,1386,1388,1390],{"class":371,"line":1382},30,[369,1384,1385],{"class":434},"  left",[369,1387,1361],{"class":385},[369,1389,1377],{"class":434},[369,1391,396],{"class":385},[369,1393,1395,1398,1400,1403,1406],{"class":371,"line":1394},31,[369,1396,1397],{"class":434},"  width",[369,1399,1361],{"class":385},[369,1401,1402],{"class":434},"100",[369,1404,1405],{"class":381},"vw",[369,1407,396],{"class":385},[369,1409,1411,1414,1416,1418,1421],{"class":371,"line":1410},32,[369,1412,1413],{"class":434},"  height",[369,1415,1361],{"class":385},[369,1417,1402],{"class":434},[369,1419,1420],{"class":381},"vh",[369,1422,396],{"class":385},[369,1424,1426,1429,1431,1434,1436,1438,1440,1442,1444,1446,1448,1451],{"class":371,"line":1425},33,[369,1427,1428],{"class":434},"  background-color",[369,1430,1361],{"class":385},[369,1432,1433],{"class":434},"rgba",[369,1435,418],{"class":385},[369,1437,1377],{"class":434},[369,1439,273],{"class":385},[369,1441,1377],{"class":434},[369,1443,273],{"class":385},[369,1445,1377],{"class":434},[369,1447,273],{"class":385},[369,1449,1450],{"class":434},"0.5",[369,1452,449],{"class":385},[369,1454,1456,1459,1461,1464],{"class":371,"line":1455},34,[369,1457,1458],{"class":434},"  display",[369,1460,1361],{"class":385},[369,1462,1463],{"class":434},"flex",[369,1465,396],{"class":385},[369,1467,1469,1472,1474,1477],{"class":371,"line":1468},35,[369,1470,1471],{"class":434},"  justify-content",[369,1473,1361],{"class":385},[369,1475,1476],{"class":434},"center",[369,1478,396],{"class":385},[369,1480,1482,1485,1487,1489],{"class":371,"line":1481},36,[369,1483,1484],{"class":434},"  align-items",[369,1486,1361],{"class":385},[369,1488,1476],{"class":434},[369,1490,396],{"class":385},[369,1492,1494,1497,1499,1502],{"class":371,"line":1493},37,[369,1495,1496],{"class":434},"  z-index",[369,1498,1361],{"class":385},[369,1500,1501],{"class":434},"1000",[369,1503,396],{"class":385},[369,1505,1507],{"class":371,"line":1506},38,[369,1508,724],{"class":385},[369,1510,1512,1515],{"class":371,"line":1511},39,[369,1513,1514],{"class":434},".modal-content",[369,1516,541],{"class":385},[369,1518,1520,1523,1525,1528],{"class":371,"line":1519},40,[369,1521,1522],{"class":434},"  background",[369,1524,1361],{"class":385},[369,1526,1527],{"class":434},"white",[369,1529,396],{"class":385},[369,1531,1533,1536,1538,1541,1544],{"class":371,"line":1532},41,[369,1534,1535],{"class":434},"  padding",[369,1537,1361],{"class":385},[369,1539,1540],{"class":434},"20",[369,1542,1543],{"class":381},"px",[369,1545,396],{"class":385},[369,1547,1549,1552,1554,1557,1559],{"class":371,"line":1548},42,[369,1550,1551],{"class":434},"  border-radius",[369,1553,1361],{"class":385},[369,1555,1556],{"class":434},"8",[369,1558,1543],{"class":381},[369,1560,396],{"class":385},[369,1562,1564,1567,1569,1572,1574],{"class":371,"line":1563},43,[369,1565,1566],{"class":434},"  min-width",[369,1568,1361],{"class":385},[369,1570,1571],{"class":434},"300",[369,1573,1543],{"class":381},[369,1575,396],{"class":385},[369,1577,1579,1582,1584,1586,1589,1591,1594,1596,1599,1601,1603,1605,1607,1609,1611,1613,1616],{"class":371,"line":1578},44,[369,1580,1581],{"class":434},"  box-shadow",[369,1583,1361],{"class":385},[369,1585,1377],{"class":434},[369,1587,1588],{"class":434}," 4",[369,1590,1543],{"class":381},[369,1592,1593],{"class":434}," 6",[369,1595,1543],{"class":381},[369,1597,1598],{"class":434}," rgba",[369,1600,418],{"class":385},[369,1602,1377],{"class":434},[369,1604,273],{"class":385},[369,1606,1377],{"class":434},[369,1608,273],{"class":385},[369,1610,1377],{"class":434},[369,1612,273],{"class":385},[369,1614,1615],{"class":434},"0.1",[369,1617,449],{"class":385},[369,1619,1621],{"class":371,"line":1620},45,[369,1622,724],{"class":385},[369,1624,1626,1628,1630],{"class":371,"line":1625},46,[369,1627,865],{"class":385},[369,1629,1341],{"class":742},[369,1631,746],{"class":385},[10,1633,1634,1637,1638,1641],{},[196,1635,1636],{},"MyModal"," nerede kullanılırsa kullanılsın içeriği ",[196,1639,1640],{},"#modals-container"," içine düşüyor; bu da stil çakışmalarını denklemden çıkarıyor.",[28,1643,1645],{"id":1644},"_3-asenkron-yükleme-durumları-için-suspense","3. Asenkron yükleme durumları için Suspense",[10,1647,1648,1649,1652],{},"Veriyi ya da asenkron yüklenen bir bileşeni beklemek arayüzü ağır hissettiriyor. ",[196,1650,1651],{},"Suspense",", bileşen ağacındaki asenkron bağımlılıkları koordine ediyor ve onlar çözülene kadar bir yedek içerik gösteriyor; böylece kullanıcı boş bir alan ya da bozuk bir düzen yerine yükleniyor durumu görüyor.",[10,1654,1655],{},"Mount anında veri çeken bir bileşen:",[361,1657,1659],{"className":730,"code":1658,"language":732,"meta":123,"style":123},"\u003C!-- components\u002FAsyncDataDisplay.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch2>Data from API:\u003C\u002Fh2>\n    \u003Cp>{{ data.title }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst data = ref(null);\n\n\u002F\u002F Simulate an async data fetch\nawait new Promise((resolve) => setTimeout(resolve, 2000));\nconst res = await fetch(\"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Ftodos\u002F1\");\ndata.value = await res.json();\n\u003C\u002Fscript>\n",[196,1660,1661,1666,1674,1682,1695,1708,1716,1724,1728,1738,1750,1754,1770,1774,1779,1812,1831,1846],{"__ignoreMap":123},[369,1662,1663],{"class":371,"line":372},[369,1664,1665],{"class":375},"\u003C!-- components\u002FAsyncDataDisplay.vue -->\n",[369,1667,1668,1670,1672],{"class":371,"line":124},[369,1669,739],{"class":385},[369,1671,743],{"class":742},[369,1673,746],{"class":385},[369,1675,1676,1678,1680],{"class":371,"line":399},[369,1677,751],{"class":385},[369,1679,754],{"class":742},[369,1681,746],{"class":385},[369,1683,1684,1686,1688,1691,1693],{"class":371,"line":405},[369,1685,761],{"class":385},[369,1687,28],{"class":742},[369,1689,1690],{"class":385},">Data from API:\u003C\u002F",[369,1692,28],{"class":742},[369,1694,746],{"class":385},[369,1696,1697,1699,1701,1704,1706],{"class":371,"line":428},[369,1698,761],{"class":385},[369,1700,10],{"class":742},[369,1702,1703],{"class":385},">{{ data.title }}\u003C\u002F",[369,1705,10],{"class":742},[369,1707,746],{"class":385},[369,1709,1710,1712,1714],{"class":371,"line":452},[369,1711,856],{"class":385},[369,1713,754],{"class":742},[369,1715,746],{"class":385},[369,1717,1718,1720,1722],{"class":371,"line":470},[369,1719,865],{"class":385},[369,1721,743],{"class":742},[369,1723,746],{"class":385},[369,1725,1726],{"class":371,"line":489},[369,1727,402],{"emptyLinePlaceholder":138},[369,1729,1730,1732,1734,1736],{"class":371,"line":494},[369,1731,739],{"class":385},[369,1733,880],{"class":742},[369,1735,883],{"class":434},[369,1737,746],{"class":385},[369,1739,1740,1742,1744,1746,1748],{"class":371,"line":508},[369,1741,382],{"class":381},[369,1743,1228],{"class":385},[369,1745,389],{"class":381},[369,1747,393],{"class":392},[369,1749,396],{"class":385},[369,1751,1752],{"class":371,"line":522},[369,1753,402],{"emptyLinePlaceholder":138},[369,1755,1756,1758,1760,1762,1764,1766,1768],{"class":371,"line":535},[369,1757,908],{"class":381},[369,1759,435],{"class":434},[369,1761,438],{"class":381},[369,1763,441],{"class":414},[369,1765,418],{"class":385},[369,1767,446],{"class":434},[369,1769,449],{"class":385},[369,1771,1772],{"class":371,"line":544},[369,1773,402],{"emptyLinePlaceholder":138},[369,1775,1776],{"class":371,"line":564},[369,1777,1778],{"class":375},"\u002F\u002F Simulate an async data fetch\n",[369,1780,1781,1784,1786,1789,1792,1795,1798,1800,1803,1806,1809],{"class":371,"line":579},[369,1782,1783],{"class":381},"await",[369,1785,585],{"class":381},[369,1787,1788],{"class":434}," Promise",[369,1790,1791],{"class":385},"((",[369,1793,1794],{"class":421},"resolve",[369,1796,1797],{"class":385},") ",[369,1799,1275],{"class":381},[369,1801,1802],{"class":414}," setTimeout",[369,1804,1805],{"class":385},"(resolve, ",[369,1807,1808],{"class":434},"2000",[369,1810,1811],{"class":385},"));\n",[369,1813,1814,1816,1818,1820,1822,1824,1826,1829],{"class":371,"line":610},[369,1815,908],{"class":381},[369,1817,550],{"class":434},[369,1819,438],{"class":381},[369,1821,555],{"class":381},[369,1823,558],{"class":414},[369,1825,418],{"class":385},[369,1827,1828],{"class":392},"\"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Ftodos\u002F1\"",[369,1830,449],{"class":385},[369,1832,1833,1836,1838,1840,1842,1844],{"class":371,"line":616},[369,1834,1835],{"class":385},"data.value ",[369,1837,514],{"class":381},[369,1839,555],{"class":381},[369,1841,626],{"class":385},[369,1843,629],{"class":414},[369,1845,632],{"class":385},[369,1847,1848,1850,1852],{"class":371,"line":635},[369,1849,865],{"class":385},[369,1851,880],{"class":742},[369,1853,746],{"class":385},[10,1855,1856,1858],{},[196,1857,1651],{}," ile sarıldığında:",[361,1860,1862],{"className":730,"code":1861,"language":732,"meta":123,"style":123},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>My App\u003C\u002Fh1>\n    \u003CSuspense>\n      \u003C!-- Main content that might be async -->\n      \u003CAsyncDataDisplay \u002F>\n\n      \u003C!-- Fallback content while async components are loading -->\n      \u003Ctemplate #fallback>\n        \u003Cdiv>Loading awesome data...\u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002FSuspense>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { defineAsyncComponent } from \"vue\";\n\n\u002F\u002F Define an async component\nconst AsyncDataDisplay = defineAsyncComponent(\n  () => import(\".\u002Fcomponents\u002FAsyncDataDisplay.vue\")\n);\n\u003C\u002Fscript>\n",[196,1863,1864,1872,1880,1894,1902,1907,1917,1921,1926,1940,1953,1961,1969,1977,1985,1989,1999,2012,2016,2021,2035,2053,2057],{"__ignoreMap":123},[369,1865,1866,1868,1870],{"class":371,"line":372},[369,1867,739],{"class":385},[369,1869,743],{"class":742},[369,1871,746],{"class":385},[369,1873,1874,1876,1878],{"class":371,"line":124},[369,1875,751],{"class":385},[369,1877,754],{"class":742},[369,1879,746],{"class":385},[369,1881,1882,1884,1887,1890,1892],{"class":371,"line":399},[369,1883,761],{"class":385},[369,1885,1886],{"class":742},"h1",[369,1888,1889],{"class":385},">My App\u003C\u002F",[369,1891,1886],{"class":742},[369,1893,746],{"class":385},[369,1895,1896,1898,1900],{"class":371,"line":405},[369,1897,761],{"class":385},[369,1899,1651],{"class":742},[369,1901,746],{"class":385},[369,1903,1904],{"class":371,"line":428},[369,1905,1906],{"class":375},"      \u003C!-- Main content that might be async -->\n",[369,1908,1909,1911,1914],{"class":371,"line":452},[369,1910,816],{"class":385},[369,1912,1913],{"class":742},"AsyncDataDisplay",[369,1915,1916],{"class":385}," \u002F>\n",[369,1918,1919],{"class":371,"line":470},[369,1920,402],{"emptyLinePlaceholder":138},[369,1922,1923],{"class":371,"line":489},[369,1924,1925],{"class":375},"      \u003C!-- Fallback content while async components are loading -->\n",[369,1927,1928,1930,1932,1935,1938],{"class":371,"line":494},[369,1929,816],{"class":385},[369,1931,743],{"class":742},[369,1933,1934],{"class":385}," #",[369,1936,1937],{"class":434},"fallback",[369,1939,746],{"class":385},[369,1941,1942,1944,1946,1949,1951],{"class":371,"line":508},[369,1943,1131],{"class":385},[369,1945,754],{"class":742},[369,1947,1948],{"class":385},">Loading awesome data...\u003C\u002F",[369,1950,754],{"class":742},[369,1952,746],{"class":385},[369,1954,1955,1957,1959],{"class":371,"line":522},[369,1956,1179],{"class":385},[369,1958,743],{"class":742},[369,1960,746],{"class":385},[369,1962,1963,1965,1967],{"class":371,"line":535},[369,1964,847],{"class":385},[369,1966,1651],{"class":742},[369,1968,746],{"class":385},[369,1970,1971,1973,1975],{"class":371,"line":544},[369,1972,856],{"class":385},[369,1974,754],{"class":742},[369,1976,746],{"class":385},[369,1978,1979,1981,1983],{"class":371,"line":564},[369,1980,865],{"class":385},[369,1982,743],{"class":742},[369,1984,746],{"class":385},[369,1986,1987],{"class":371,"line":579},[369,1988,402],{"emptyLinePlaceholder":138},[369,1990,1991,1993,1995,1997],{"class":371,"line":610},[369,1992,739],{"class":385},[369,1994,880],{"class":742},[369,1996,883],{"class":434},[369,1998,746],{"class":385},[369,2000,2001,2003,2006,2008,2010],{"class":371,"line":616},[369,2002,382],{"class":381},[369,2004,2005],{"class":385}," { defineAsyncComponent } ",[369,2007,389],{"class":381},[369,2009,393],{"class":392},[369,2011,396],{"class":385},[369,2013,2014],{"class":371,"line":635},[369,2015,402],{"emptyLinePlaceholder":138},[369,2017,2018],{"class":371,"line":647},[369,2019,2020],{"class":375},"\u002F\u002F Define an async component\n",[369,2022,2023,2025,2028,2030,2033],{"class":371,"line":658},[369,2024,908],{"class":381},[369,2026,2027],{"class":434}," AsyncDataDisplay",[369,2029,438],{"class":381},[369,2031,2032],{"class":414}," defineAsyncComponent",[369,2034,934],{"class":385},[369,2036,2037,2040,2042,2045,2047,2050],{"class":371,"line":668},[369,2038,2039],{"class":385},"  () ",[369,2041,1275],{"class":381},[369,2043,2044],{"class":381}," import",[369,2046,418],{"class":385},[369,2048,2049],{"class":392},"\".\u002Fcomponents\u002FAsyncDataDisplay.vue\"",[369,2051,2052],{"class":385},")\n",[369,2054,2055],{"class":371,"line":681},[369,2056,449],{"class":385},[369,2058,2059,2061,2063],{"class":371,"line":687},[369,2060,865],{"class":385},[369,2062,880],{"class":742},[369,2064,746],{"class":385},[10,2066,2067,2069,2070,2072],{},[196,2068,1913],{}," setup bloğundaki ",[196,2071,1783],{},"'i çözerken yedek içerik görünüyor. İş bitince yerini gerçek içerik alıyor.",[28,2074,2076],{"id":2075},"_4-dom-işleri-için-özel-yönergeler","4. DOM işleri için özel yönergeler",[10,2078,2079,2080,273,2083,2086,2087,2090],{},"Bazen doğru araç bir bileşen değil. Düşük seviyeli DOM müdahalesi ya da belirli bir bileşene bağlı olmayan yeniden kullanılabilir davranış için özel yönergeler, bağlandıkları öğeye doğrudan erişim veriyor. ",[196,2081,2082],{},"v-focus",[196,2084,2085],{},"v-tooltip"," ya da ",[196,2088,2089],{},"v-lazy-load"," gibi.",[361,2092,2094],{"className":363,"code":2093,"language":365,"meta":123,"style":123},"\u002F\u002F main.js or a dedicated directives file\nimport { createApp } from \"vue\";\nimport App from \".\u002FApp.vue\";\n\nconst app = createApp(App);\n\napp.directive(\"focus\", {\n  mounted(el) {\n    el.focus();\n  },\n});\n\napp.mount(\"#app\");\n",[196,2095,2096,2101,2114,2128,2132,2147,2151,2167,2179,2189,2194,2199,2203],{"__ignoreMap":123},[369,2097,2098],{"class":371,"line":372},[369,2099,2100],{"class":375},"\u002F\u002F main.js or a dedicated directives file\n",[369,2102,2103,2105,2108,2110,2112],{"class":371,"line":124},[369,2104,382],{"class":381},[369,2106,2107],{"class":385}," { createApp } ",[369,2109,389],{"class":381},[369,2111,393],{"class":392},[369,2113,396],{"class":385},[369,2115,2116,2118,2121,2123,2126],{"class":371,"line":399},[369,2117,382],{"class":381},[369,2119,2120],{"class":385}," App ",[369,2122,389],{"class":381},[369,2124,2125],{"class":392}," \".\u002FApp.vue\"",[369,2127,396],{"class":385},[369,2129,2130],{"class":371,"line":405},[369,2131,402],{"emptyLinePlaceholder":138},[369,2133,2134,2136,2139,2141,2144],{"class":371,"line":428},[369,2135,908],{"class":381},[369,2137,2138],{"class":434}," app",[369,2140,438],{"class":381},[369,2142,2143],{"class":414}," createApp",[369,2145,2146],{"class":385},"(App);\n",[369,2148,2149],{"class":371,"line":452},[369,2150,402],{"emptyLinePlaceholder":138},[369,2152,2153,2156,2159,2161,2164],{"class":371,"line":470},[369,2154,2155],{"class":385},"app.",[369,2157,2158],{"class":414},"directive",[369,2160,418],{"class":385},[369,2162,2163],{"class":392},"\"focus\"",[369,2165,2166],{"class":385},", {\n",[369,2168,2169,2172,2174,2177],{"class":371,"line":489},[369,2170,2171],{"class":414},"  mounted",[369,2173,418],{"class":385},[369,2175,2176],{"class":421},"el",[369,2178,425],{"class":385},[369,2180,2181,2184,2187],{"class":371,"line":494},[369,2182,2183],{"class":385},"    el.",[369,2185,2186],{"class":414},"focus",[369,2188,632],{"class":385},[369,2190,2191],{"class":371,"line":508},[369,2192,2193],{"class":385},"  },\n",[369,2195,2196],{"class":371,"line":522},[369,2197,2198],{"class":385},"});\n",[369,2200,2201],{"class":371,"line":535},[369,2202,402],{"emptyLinePlaceholder":138},[369,2204,2205,2207,2210,2212,2215],{"class":371,"line":544},[369,2206,2155],{"class":385},[369,2208,2209],{"class":414},"mount",[369,2211,418],{"class":385},[369,2213,2214],{"class":392},"\"#app\"",[369,2216,449],{"class":385},[10,2218,2219],{},"Kullanımı şöyle:",[361,2221,2223],{"className":730,"code":2222,"language":732,"meta":123,"style":123},"\u003Ctemplate>\n  \u003Cinput v-focus type=\"text\" placeholder=\"I will be focused on mount\" \u002F>\n\u003C\u002Ftemplate>\n",[196,2224,2225,2233,2261],{"__ignoreMap":123},[369,2226,2227,2229,2231],{"class":371,"line":372},[369,2228,739],{"class":385},[369,2230,743],{"class":742},[369,2232,746],{"class":385},[369,2234,2235,2237,2240,2243,2246,2248,2251,2254,2256,2259],{"class":371,"line":124},[369,2236,751],{"class":385},[369,2238,2239],{"class":742},"input",[369,2241,2242],{"class":434}," v-focus",[369,2244,2245],{"class":434}," type",[369,2247,514],{"class":385},[369,2249,2250],{"class":392},"\"text\"",[369,2252,2253],{"class":434}," placeholder",[369,2255,514],{"class":385},[369,2257,2258],{"class":392},"\"I will be focused on mount\"",[369,2260,1916],{"class":385},[369,2262,2263,2265,2267],{"class":371,"line":399},[369,2264,865],{"class":385},[369,2266,743],{"class":742},[369,2268,746],{"class":385},[10,2270,2271,2272,273,2275,273,2278,2281,2282,2285],{},"Bileşen mount edildiğinde input odaklanıyor. Yönergeler ",[196,2273,2274],{},"created",[196,2276,2277],{},"mounted",[196,2279,2280],{},"updated"," ve ",[196,2283,2284],{},"unmounted"," kancalarına takılarak öğenin yaşam döngüsü boyunca davranışı yönetebiliyor.",[28,2287,2289],{"id":2288},"_5-render-fonksiyonları-ve-jsx","5. Render fonksiyonları ve JSX",[10,2291,2292],{},"Neredeyse her şey için doğru seçim Vue'nun şablon söz dizimi: bildirimsel, okunabilir ve verimli derleniyor. Render fonksiyonları ve JSX, render üzerinde programatik denetime ihtiyaç duyduğun ender durumlar için: çok dinamik bir tablo üreticisi ya da yapısı karmaşık prop'lara göre değişen bir kütüphane bileşeni gibi.",[10,2294,2295],{},"Yapı çok değişmiyorsa, maksimum esneklik gerektiren bir arayüz kütüphanesi yazmıyorsan ya da bileşenleri tamamen JavaScript veya TypeScript'te yazmayı tercih etmiyorsan buna muhtemelen uzanmayacaksın.",[361,2297,2299],{"className":363,"code":2298,"language":365,"meta":123,"style":123},"\u002F\u002F components\u002FDynamicHeading.vue\nimport { h } from \"vue\";\n\nexport default {\n  props: {\n    level: {\n      type: Number,\n      required: true,\n      validator: (val) => val >= 1 && val \u003C= 6,\n    },\n  },\n  setup(props) {\n    return () => h(`h${props.level}`, `This is a level ${props.level} heading`);\n  },\n};\n",[196,2300,2301,2306,2319,2323,2332,2337,2342,2347,2357,2393,2398,2405,2416,2459,2465],{"__ignoreMap":123},[369,2302,2303],{"class":371,"line":372},[369,2304,2305],{"class":375},"\u002F\u002F components\u002FDynamicHeading.vue\n",[369,2307,2308,2310,2313,2315,2317],{"class":371,"line":124},[369,2309,382],{"class":381},[369,2311,2312],{"class":385}," { h } ",[369,2314,389],{"class":381},[369,2316,393],{"class":392},[369,2318,396],{"class":385},[369,2320,2321],{"class":371,"line":399},[369,2322,402],{"emptyLinePlaceholder":138},[369,2324,2325,2327,2330],{"class":371,"line":405},[369,2326,408],{"class":381},[369,2328,2329],{"class":381}," default",[369,2331,541],{"class":421},[369,2333,2334],{"class":371,"line":428},[369,2335,2336],{"class":385},"  props: {\n",[369,2338,2339],{"class":371,"line":452},[369,2340,2341],{"class":385},"    level: {\n",[369,2343,2344],{"class":371,"line":470},[369,2345,2346],{"class":385},"      type: Number,\n",[369,2348,2349,2352,2354],{"class":371,"line":489},[369,2350,2351],{"class":385},"      required: ",[369,2353,484],{"class":434},[369,2355,2356],{"class":385},",\n",[369,2358,2359,2362,2365,2368,2370,2372,2375,2378,2381,2384,2386,2389,2391],{"class":371,"line":494},[369,2360,2361],{"class":414},"      validator",[369,2363,2364],{"class":385},": (",[369,2366,2367],{"class":421},"val",[369,2369,1797],{"class":385},[369,2371,1275],{"class":381},[369,2373,2374],{"class":385}," val ",[369,2376,2377],{"class":381},">=",[369,2379,2380],{"class":434}," 1",[369,2382,2383],{"class":381}," &&",[369,2385,2374],{"class":385},[369,2387,2388],{"class":381},"\u003C=",[369,2390,1593],{"class":434},[369,2392,2356],{"class":385},[369,2394,2395],{"class":371,"line":508},[369,2396,2397],{"class":385},"    },\n",[369,2399,2400,2403],{"class":371,"line":522},[369,2401,2402],{"class":385},"  }",[369,2404,2356],{"class":421},[369,2406,2407,2410,2413],{"class":371,"line":535},[369,2408,2409],{"class":414},"  setup",[369,2411,2412],{"class":421},"(props) ",[369,2414,2415],{"class":385},"{\n",[369,2417,2418,2421,2423,2425,2428,2430,2433,2436,2438,2441,2443,2445,2448,2450,2452,2454,2457],{"class":371,"line":544},[369,2419,2420],{"class":381},"    return",[369,2422,1272],{"class":385},[369,2424,1275],{"class":381},[369,2426,2427],{"class":414}," h",[369,2429,418],{"class":385},[369,2431,2432],{"class":392},"`h${",[369,2434,2435],{"class":385},"props",[369,2437,599],{"class":392},[369,2439,2440],{"class":385},"level",[369,2442,605],{"class":392},[369,2444,273],{"class":385},[369,2446,2447],{"class":392},"`This is a level ${",[369,2449,2435],{"class":385},[369,2451,599],{"class":392},[369,2453,2440],{"class":385},[369,2455,2456],{"class":392},"} heading`",[369,2458,449],{"class":385},[369,2460,2461,2463],{"class":371,"line":564},[369,2462,2402],{"class":385},[369,2464,2356],{"class":421},[369,2466,2467,2470],{"class":371,"line":579},[369,2468,2469],{"class":421},"}",[369,2471,396],{"class":385},[10,2473,2474],{},"Vue JSX için Babel kurulumu gerektiren JSX hâli:",[361,2476,2480],{"className":2477,"code":2478,"language":2479,"meta":123,"style":123},"language-jsx shiki shiki-themes github-dark-default","\u002F\u002F components\u002FDynamicHeadingJSX.vue\nexport default {\n  props: {\n    level: {\n      type: Number,\n      required: true,\n      validator: (val) => val >= 1 && val \u003C= 6,\n    },\n  },\n  setup(props) {\n    const HeadingTag = `h${props.level}`;\n    return () => (\n      \u003CHeadingTag>This is a level {props.level} heading (with JSX)\u003C\u002FHeadingTag>\n    );\n  },\n};\n","jsx",[196,2481,2482,2487,2495,2499,2503,2507,2515,2543,2547,2553,2561,2584,2595,2620,2625,2631],{"__ignoreMap":123},[369,2483,2484],{"class":371,"line":372},[369,2485,2486],{"class":375},"\u002F\u002F components\u002FDynamicHeadingJSX.vue\n",[369,2488,2489,2491,2493],{"class":371,"line":124},[369,2490,408],{"class":381},[369,2492,2329],{"class":381},[369,2494,541],{"class":421},[369,2496,2497],{"class":371,"line":399},[369,2498,2336],{"class":385},[369,2500,2501],{"class":371,"line":405},[369,2502,2341],{"class":385},[369,2504,2505],{"class":371,"line":428},[369,2506,2346],{"class":385},[369,2508,2509,2511,2513],{"class":371,"line":452},[369,2510,2351],{"class":385},[369,2512,484],{"class":434},[369,2514,2356],{"class":385},[369,2516,2517,2519,2521,2523,2525,2527,2529,2531,2533,2535,2537,2539,2541],{"class":371,"line":470},[369,2518,2361],{"class":414},[369,2520,2364],{"class":385},[369,2522,2367],{"class":421},[369,2524,1797],{"class":385},[369,2526,1275],{"class":381},[369,2528,2374],{"class":385},[369,2530,2377],{"class":381},[369,2532,2380],{"class":434},[369,2534,2383],{"class":381},[369,2536,2374],{"class":385},[369,2538,2388],{"class":381},[369,2540,1593],{"class":434},[369,2542,2356],{"class":385},[369,2544,2545],{"class":371,"line":489},[369,2546,2397],{"class":385},[369,2548,2549,2551],{"class":371,"line":494},[369,2550,2402],{"class":385},[369,2552,2356],{"class":421},[369,2554,2555,2557,2559],{"class":371,"line":508},[369,2556,2409],{"class":414},[369,2558,2412],{"class":421},[369,2560,2415],{"class":385},[369,2562,2563,2566,2569,2571,2574,2576,2578,2580,2582],{"class":371,"line":522},[369,2564,2565],{"class":381},"    const",[369,2567,2568],{"class":434}," HeadingTag",[369,2570,438],{"class":381},[369,2572,2573],{"class":392}," `h${",[369,2575,2435],{"class":385},[369,2577,599],{"class":392},[369,2579,2440],{"class":385},[369,2581,605],{"class":392},[369,2583,396],{"class":385},[369,2585,2586,2588,2590,2592],{"class":371,"line":535},[369,2587,2420],{"class":381},[369,2589,1272],{"class":385},[369,2591,1275],{"class":381},[369,2593,2594],{"class":385}," (\n",[369,2596,2597,2599,2602,2605,2608,2611,2613,2616,2618],{"class":371,"line":544},[369,2598,816],{"class":385},[369,2600,2601],{"class":742},"HeadingTag",[369,2603,2604],{"class":385},">This is a level ",[369,2606,2607],{"class":381},"{",[369,2609,2610],{"class":385},"props.level",[369,2612,2469],{"class":381},[369,2614,2615],{"class":385}," heading (with JSX)\u003C\u002F",[369,2617,2601],{"class":742},[369,2619,746],{"class":385},[369,2621,2622],{"class":371,"line":564},[369,2623,2624],{"class":385},"    );\n",[369,2626,2627,2629],{"class":371,"line":579},[369,2628,2402],{"class":385},[369,2630,2356],{"class":421},[369,2632,2633,2635],{"class":371,"line":610},[369,2634,2469],{"class":421},[369,2636,396],{"class":385},[28,2638,2640],{"id":2639},"_6-provide-ve-inject","6. Provide ve inject",[10,2642,2643],{},"Gerçekten global durum için cevap Pinia. Provide ve inject aradaki durum için: her seviyeden prop geçirmeden bileşen ağacının derinine ulaşması gereken veri ya da yardımcılar.",[10,2645,2646],{},"Tema bilgisine, kullanıcı tercihlerine, yardımcı fonksiyonlara ve nadiren değişen ama bütün bir alt ağacı ilgilendiren verilere uyuyor.",[361,2648,2650],{"className":730,"code":2649,"language":732,"meta":123,"style":123},"\u003C!-- components\u002FGrandparentComponent.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Grandparent\u003C\u002Fh1>\n    \u003Cbutton @click=\"toggleTheme\">Toggle Theme\u003C\u002Fbutton>\n    \u003CChildComponent \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { provide, ref } from \"vue\";\nimport ChildComponent from \".\u002FChildComponent.vue\";\n\nconst theme = ref(\"light\");\n\nconst toggleTheme = () => {\n  theme.value = theme.value === \"light\" ? \"dark\" : \"light\";\n};\n\nprovide(\"appTheme\", theme); \u002F\u002F Provide the reactive theme\nprovide(\"toggleThemeFunction\", toggleTheme); \u002F\u002F Provide a function too!\n\u003C\u002Fscript>\n",[196,2651,2652,2657,2665,2673,2686,2706,2715,2723,2731,2735,2745,2758,2772,2776,2794,2798,2813,2842,2847,2851,2867,2882],{"__ignoreMap":123},[369,2653,2654],{"class":371,"line":372},[369,2655,2656],{"class":375},"\u003C!-- components\u002FGrandparentComponent.vue -->\n",[369,2658,2659,2661,2663],{"class":371,"line":124},[369,2660,739],{"class":385},[369,2662,743],{"class":742},[369,2664,746],{"class":385},[369,2666,2667,2669,2671],{"class":371,"line":399},[369,2668,751],{"class":385},[369,2670,754],{"class":742},[369,2672,746],{"class":385},[369,2674,2675,2677,2679,2682,2684],{"class":371,"line":405},[369,2676,761],{"class":385},[369,2678,1886],{"class":742},[369,2680,2681],{"class":385},">Grandparent\u003C\u002F",[369,2683,1886],{"class":742},[369,2685,746],{"class":385},[369,2687,2688,2690,2692,2694,2696,2699,2702,2704],{"class":371,"line":428},[369,2689,761],{"class":385},[369,2691,1161],{"class":742},[369,2693,1101],{"class":434},[369,2695,514],{"class":385},[369,2697,2698],{"class":392},"\"toggleTheme\"",[369,2700,2701],{"class":385},">Toggle Theme\u003C\u002F",[369,2703,1161],{"class":742},[369,2705,746],{"class":385},[369,2707,2708,2710,2713],{"class":371,"line":452},[369,2709,761],{"class":385},[369,2711,2712],{"class":742},"ChildComponent",[369,2714,1916],{"class":385},[369,2716,2717,2719,2721],{"class":371,"line":470},[369,2718,856],{"class":385},[369,2720,754],{"class":742},[369,2722,746],{"class":385},[369,2724,2725,2727,2729],{"class":371,"line":489},[369,2726,865],{"class":385},[369,2728,743],{"class":742},[369,2730,746],{"class":385},[369,2732,2733],{"class":371,"line":494},[369,2734,402],{"emptyLinePlaceholder":138},[369,2736,2737,2739,2741,2743],{"class":371,"line":508},[369,2738,739],{"class":385},[369,2740,880],{"class":742},[369,2742,883],{"class":434},[369,2744,746],{"class":385},[369,2746,2747,2749,2752,2754,2756],{"class":371,"line":522},[369,2748,382],{"class":381},[369,2750,2751],{"class":385}," { provide, ref } ",[369,2753,389],{"class":381},[369,2755,393],{"class":392},[369,2757,396],{"class":385},[369,2759,2760,2762,2765,2767,2770],{"class":371,"line":535},[369,2761,382],{"class":381},[369,2763,2764],{"class":385}," ChildComponent ",[369,2766,389],{"class":381},[369,2768,2769],{"class":392}," \".\u002FChildComponent.vue\"",[369,2771,396],{"class":385},[369,2773,2774],{"class":371,"line":544},[369,2775,402],{"emptyLinePlaceholder":138},[369,2777,2778,2780,2783,2785,2787,2789,2792],{"class":371,"line":564},[369,2779,908],{"class":381},[369,2781,2782],{"class":434}," theme",[369,2784,438],{"class":381},[369,2786,441],{"class":414},[369,2788,418],{"class":385},[369,2790,2791],{"class":392},"\"light\"",[369,2793,449],{"class":385},[369,2795,2796],{"class":371,"line":579},[369,2797,402],{"emptyLinePlaceholder":138},[369,2799,2800,2802,2805,2807,2809,2811],{"class":371,"line":610},[369,2801,908],{"class":381},[369,2803,2804],{"class":414}," toggleTheme",[369,2806,438],{"class":381},[369,2808,1272],{"class":385},[369,2810,1275],{"class":381},[369,2812,541],{"class":385},[369,2814,2815,2818,2820,2823,2826,2829,2832,2835,2838,2840],{"class":371,"line":616},[369,2816,2817],{"class":385},"  theme.value ",[369,2819,514],{"class":381},[369,2821,2822],{"class":385}," theme.value ",[369,2824,2825],{"class":381},"===",[369,2827,2828],{"class":392}," \"light\"",[369,2830,2831],{"class":381}," ?",[369,2833,2834],{"class":392}," \"dark\"",[369,2836,2837],{"class":381}," :",[369,2839,2828],{"class":392},[369,2841,396],{"class":385},[369,2843,2844],{"class":371,"line":635},[369,2845,2846],{"class":385},"};\n",[369,2848,2849],{"class":371,"line":647},[369,2850,402],{"emptyLinePlaceholder":138},[369,2852,2853,2856,2858,2861,2864],{"class":371,"line":658},[369,2854,2855],{"class":414},"provide",[369,2857,418],{"class":385},[369,2859,2860],{"class":392},"\"appTheme\"",[369,2862,2863],{"class":385},", theme); ",[369,2865,2866],{"class":375},"\u002F\u002F Provide the reactive theme\n",[369,2868,2869,2871,2873,2876,2879],{"class":371,"line":668},[369,2870,2855],{"class":414},[369,2872,418],{"class":385},[369,2874,2875],{"class":392},"\"toggleThemeFunction\"",[369,2877,2878],{"class":385},", toggleTheme); ",[369,2880,2881],{"class":375},"\u002F\u002F Provide a function too!\n",[369,2883,2884,2886,2888],{"class":371,"line":681},[369,2885,865],{"class":385},[369,2887,880],{"class":742},[369,2889,746],{"class":385},[361,2891,2893],{"className":730,"code":2892,"language":732,"meta":123,"style":123},"\u003C!-- components\u002FDeeplyNestedComponent.vue -->\n\u003Ctemplate>\n  \u003Cdiv :class=\"['card', appTheme === 'dark' ? 'dark-mode' : '']\">\n    \u003Cp>Current theme: {{ appTheme }}\u003C\u002Fp>\n    \u003Cbutton @click=\"toggleThemeFunction\">Toggle Theme (from deep)\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { inject } from \"vue\";\n\nconst appTheme = inject(\"appTheme\");\nconst toggleThemeFunction = inject(\"toggleThemeFunction\"); \u002F\u002F Inject the function\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.card {\n  border: 1px solid #ccc;\n  padding: 15px;\n  margin-top: 10px;\n  border-radius: 5px;\n}\n.dark-mode {\n  background-color: #333;\n  color: #eee;\n  border-color: #555;\n}\n\u003C\u002Fstyle>\n",[196,2894,2895,2900,2908,2924,2937,2956,2964,2972,2976,2986,2999,3003,3021,3042,3050,3054,3064,3071,3091,3104,3118,3131,3135,3142,3153,3165,3177,3181],{"__ignoreMap":123},[369,2896,2897],{"class":371,"line":372},[369,2898,2899],{"class":375},"\u003C!-- components\u002FDeeplyNestedComponent.vue -->\n",[369,2901,2902,2904,2906],{"class":371,"line":124},[369,2903,739],{"class":385},[369,2905,743],{"class":742},[369,2907,746],{"class":385},[369,2909,2910,2912,2914,2917,2919,2922],{"class":371,"line":399},[369,2911,751],{"class":385},[369,2913,754],{"class":742},[369,2915,2916],{"class":434}," :class",[369,2918,514],{"class":385},[369,2920,2921],{"class":392},"\"['card', appTheme === 'dark' ? 'dark-mode' : '']\"",[369,2923,746],{"class":385},[369,2925,2926,2928,2930,2933,2935],{"class":371,"line":405},[369,2927,761],{"class":385},[369,2929,10],{"class":742},[369,2931,2932],{"class":385},">Current theme: {{ appTheme }}\u003C\u002F",[369,2934,10],{"class":742},[369,2936,746],{"class":385},[369,2938,2939,2941,2943,2945,2947,2949,2952,2954],{"class":371,"line":428},[369,2940,761],{"class":385},[369,2942,1161],{"class":742},[369,2944,1101],{"class":434},[369,2946,514],{"class":385},[369,2948,2875],{"class":392},[369,2950,2951],{"class":385},">Toggle Theme (from deep)\u003C\u002F",[369,2953,1161],{"class":742},[369,2955,746],{"class":385},[369,2957,2958,2960,2962],{"class":371,"line":452},[369,2959,856],{"class":385},[369,2961,754],{"class":742},[369,2963,746],{"class":385},[369,2965,2966,2968,2970],{"class":371,"line":470},[369,2967,865],{"class":385},[369,2969,743],{"class":742},[369,2971,746],{"class":385},[369,2973,2974],{"class":371,"line":489},[369,2975,402],{"emptyLinePlaceholder":138},[369,2977,2978,2980,2982,2984],{"class":371,"line":494},[369,2979,739],{"class":385},[369,2981,880],{"class":742},[369,2983,883],{"class":434},[369,2985,746],{"class":385},[369,2987,2988,2990,2993,2995,2997],{"class":371,"line":508},[369,2989,382],{"class":381},[369,2991,2992],{"class":385}," { inject } ",[369,2994,389],{"class":381},[369,2996,393],{"class":392},[369,2998,396],{"class":385},[369,3000,3001],{"class":371,"line":522},[369,3002,402],{"emptyLinePlaceholder":138},[369,3004,3005,3007,3010,3012,3015,3017,3019],{"class":371,"line":535},[369,3006,908],{"class":381},[369,3008,3009],{"class":434}," appTheme",[369,3011,438],{"class":381},[369,3013,3014],{"class":414}," inject",[369,3016,418],{"class":385},[369,3018,2860],{"class":392},[369,3020,449],{"class":385},[369,3022,3023,3025,3028,3030,3032,3034,3036,3039],{"class":371,"line":544},[369,3024,908],{"class":381},[369,3026,3027],{"class":434}," toggleThemeFunction",[369,3029,438],{"class":381},[369,3031,3014],{"class":414},[369,3033,418],{"class":385},[369,3035,2875],{"class":392},[369,3037,3038],{"class":385},"); ",[369,3040,3041],{"class":375},"\u002F\u002F Inject the function\n",[369,3043,3044,3046,3048],{"class":371,"line":564},[369,3045,865],{"class":385},[369,3047,880],{"class":742},[369,3049,746],{"class":385},[369,3051,3052],{"class":371,"line":579},[369,3053,402],{"emptyLinePlaceholder":138},[369,3055,3056,3058,3060,3062],{"class":371,"line":610},[369,3057,739],{"class":385},[369,3059,1341],{"class":742},[369,3061,1344],{"class":434},[369,3063,746],{"class":385},[369,3065,3066,3069],{"class":371,"line":616},[369,3067,3068],{"class":434},".card",[369,3070,541],{"class":385},[369,3072,3073,3076,3078,3081,3083,3086,3089],{"class":371,"line":635},[369,3074,3075],{"class":434},"  border",[369,3077,1361],{"class":385},[369,3079,3080],{"class":434},"1",[369,3082,1543],{"class":381},[369,3084,3085],{"class":434}," solid",[369,3087,3088],{"class":434}," #ccc",[369,3090,396],{"class":385},[369,3092,3093,3095,3097,3100,3102],{"class":371,"line":647},[369,3094,1535],{"class":434},[369,3096,1361],{"class":385},[369,3098,3099],{"class":434},"15",[369,3101,1543],{"class":381},[369,3103,396],{"class":385},[369,3105,3106,3109,3111,3114,3116],{"class":371,"line":658},[369,3107,3108],{"class":434},"  margin-top",[369,3110,1361],{"class":385},[369,3112,3113],{"class":434},"10",[369,3115,1543],{"class":381},[369,3117,396],{"class":385},[369,3119,3120,3122,3124,3127,3129],{"class":371,"line":668},[369,3121,1551],{"class":434},[369,3123,1361],{"class":385},[369,3125,3126],{"class":434},"5",[369,3128,1543],{"class":381},[369,3130,396],{"class":385},[369,3132,3133],{"class":371,"line":681},[369,3134,724],{"class":385},[369,3136,3137,3140],{"class":371,"line":687},[369,3138,3139],{"class":434},".dark-mode",[369,3141,541],{"class":385},[369,3143,3144,3146,3148,3151],{"class":371,"line":693},[369,3145,1428],{"class":434},[369,3147,1361],{"class":385},[369,3149,3150],{"class":434},"#333",[369,3152,396],{"class":385},[369,3154,3155,3158,3160,3163],{"class":371,"line":698},[369,3156,3157],{"class":434},"  color",[369,3159,1361],{"class":385},[369,3161,3162],{"class":434},"#eee",[369,3164,396],{"class":385},[369,3166,3167,3170,3172,3175],{"class":371,"line":707},[369,3168,3169],{"class":434},"  border-color",[369,3171,1361],{"class":385},[369,3173,3174],{"class":434},"#555",[369,3176,396],{"class":385},[369,3178,3179],{"class":371,"line":712},[369,3180,724],{"class":385},[369,3182,3183,3185,3187],{"class":371,"line":721},[369,3184,865],{"class":385},[369,3186,1341],{"class":742},[369,3188,746],{"class":385},[10,3190,3191,273,3194,3197,3198,3200],{},[196,3192,3193],{},"DeeplyNestedComponent",[196,3195,3196],{},"GrandparentComponent"," hiçbir şeyi ",[196,3199,2712],{}," üzerinden geçirmeden hem temayı hem fonksiyonu alıyor.",[28,3202,3204],{"id":3203},"_7-global-özellikler-ve-eklentiler","7. Global özellikler ve eklentiler",[10,3206,3207],{},"Bazen bir şeyin bütün uygulamada erişilebilir olması gerekiyor: bir HTTP örneği, bir çeviri fonksiyonu, ortak bir yardımcı.",[10,3209,3210,3211,3214,3215,3218,3219,3222],{},"En basit yol ",[196,3212,3213],{},"app.config.globalProperties",". Options API'de ",[196,3216,3217],{},"this","'e takılıyor, Composition API'de ",[196,3220,3221],{},"getCurrentInstance()"," üzerinden erişiliyor.",[361,3224,3226],{"className":363,"code":3225,"language":365,"meta":123,"style":123},"\u002F\u002F main.js\nimport { createApp } from \"vue\";\nimport App from \".\u002FApp.vue\";\n\nconst app = createApp(App);\n\n\u002F\u002F Attach a global property\napp.config.globalProperties.$myGlobalUtil = {\n  sayHello: () => console.log(\"Hello from global util!\"),\n  version: \"1.0.0\",\n};\n\napp.mount(\"#app\");\n",[196,3227,3228,3233,3245,3257,3261,3273,3277,3282,3291,3315,3325,3329,3333],{"__ignoreMap":123},[369,3229,3230],{"class":371,"line":372},[369,3231,3232],{"class":375},"\u002F\u002F main.js\n",[369,3234,3235,3237,3239,3241,3243],{"class":371,"line":124},[369,3236,382],{"class":381},[369,3238,2107],{"class":385},[369,3240,389],{"class":381},[369,3242,393],{"class":392},[369,3244,396],{"class":385},[369,3246,3247,3249,3251,3253,3255],{"class":371,"line":399},[369,3248,382],{"class":381},[369,3250,2120],{"class":385},[369,3252,389],{"class":381},[369,3254,2125],{"class":392},[369,3256,396],{"class":385},[369,3258,3259],{"class":371,"line":405},[369,3260,402],{"emptyLinePlaceholder":138},[369,3262,3263,3265,3267,3269,3271],{"class":371,"line":428},[369,3264,908],{"class":381},[369,3266,2138],{"class":434},[369,3268,438],{"class":381},[369,3270,2143],{"class":414},[369,3272,2146],{"class":385},[369,3274,3275],{"class":371,"line":452},[369,3276,402],{"emptyLinePlaceholder":138},[369,3278,3279],{"class":371,"line":470},[369,3280,3281],{"class":375},"\u002F\u002F Attach a global property\n",[369,3283,3284,3287,3289],{"class":371,"line":489},[369,3285,3286],{"class":385},"app.config.globalProperties.$myGlobalUtil ",[369,3288,514],{"class":381},[369,3290,541],{"class":385},[369,3292,3293,3296,3299,3301,3304,3307,3309,3312],{"class":371,"line":494},[369,3294,3295],{"class":414},"  sayHello",[369,3297,3298],{"class":385},": () ",[369,3300,1275],{"class":381},[369,3302,3303],{"class":385}," console.",[369,3305,3306],{"class":414},"log",[369,3308,418],{"class":385},[369,3310,3311],{"class":392},"\"Hello from global util!\"",[369,3313,3314],{"class":385},"),\n",[369,3316,3317,3320,3323],{"class":371,"line":508},[369,3318,3319],{"class":385},"  version: ",[369,3321,3322],{"class":392},"\"1.0.0\"",[369,3324,2356],{"class":385},[369,3326,3327],{"class":371,"line":522},[369,3328,2846],{"class":385},[369,3330,3331],{"class":371,"line":535},[369,3332,402],{"emptyLinePlaceholder":138},[369,3334,3335,3337,3339,3341,3343],{"class":371,"line":544},[369,3336,2155],{"class":385},[369,3338,2209],{"class":414},[369,3340,418],{"class":385},[369,3342,2214],{"class":392},[369,3344,449],{"class":385},[10,3346,3347,3348,3351],{},"Şablonda karşılığı ",[196,3349,3350],{},"\u003Cbutton @click=\"$myGlobalUtil.sayHello()\">Say Hello\u003C\u002Fbutton>",", script setup bloğunda ise:",[361,3353,3355],{"className":730,"code":3354,"language":732,"meta":123,"style":123},"\u003Cscript setup>\nimport { getCurrentInstance } from \"vue\";\nconst { proxy } = getCurrentInstance();\n\nproxy.$myGlobalUtil.sayHello();\nconsole.log(proxy.$myGlobalUtil.version);\n\u003C\u002Fscript>\n",[196,3356,3357,3367,3380,3398,3402,3412,3422],{"__ignoreMap":123},[369,3358,3359,3361,3363,3365],{"class":371,"line":372},[369,3360,739],{"class":385},[369,3362,880],{"class":742},[369,3364,883],{"class":434},[369,3366,746],{"class":385},[369,3368,3369,3371,3374,3376,3378],{"class":371,"line":124},[369,3370,382],{"class":381},[369,3372,3373],{"class":385}," { getCurrentInstance } ",[369,3375,389],{"class":381},[369,3377,393],{"class":392},[369,3379,396],{"class":385},[369,3381,3382,3384,3386,3389,3391,3393,3396],{"class":371,"line":399},[369,3383,908],{"class":381},[369,3385,911],{"class":385},[369,3387,3388],{"class":434},"proxy",[369,3390,927],{"class":385},[369,3392,514],{"class":381},[369,3394,3395],{"class":414}," getCurrentInstance",[369,3397,632],{"class":385},[369,3399,3400],{"class":371,"line":405},[369,3401,402],{"emptyLinePlaceholder":138},[369,3403,3404,3407,3410],{"class":371,"line":428},[369,3405,3406],{"class":385},"proxy.$myGlobalUtil.",[369,3408,3409],{"class":414},"sayHello",[369,3411,632],{"class":385},[369,3413,3414,3417,3419],{"class":371,"line":452},[369,3415,3416],{"class":385},"console.",[369,3418,3306],{"class":414},[369,3420,3421],{"class":385},"(proxy.$myGlobalUtil.version);\n",[369,3423,3424,3426,3428],{"class":371,"line":470},[369,3425,865],{"class":385},[369,3427,880],{"class":742},[369,3429,746],{"class":385},[10,3431,3432,3433,3436],{},"Birden fazla global özellik, yönerge, bileşen ya da yönlendirme mantığı içeren daha büyük işler için bir eklenti yaz. Eklenti, ",[196,3434,3435],{},"app"," örneğini ve isteğe bağlı bir seçenekler nesnesini alan bir fonksiyon.",[361,3438,3440],{"className":363,"code":3439,"language":365,"meta":123,"style":123},"\u002F\u002F plugins\u002FmyPlugin.js\nexport default {\n  install: (app, options) => {\n    \u002F\u002F Make a global method available\n    app.config.globalProperties.$translate = (key) => {\n      return key\n        .split(\".\")\n        .reduce((o, i) => (o ? o[i] : undefined), options.translations);\n    };\n\n    \u002F\u002F Provide a global composable\n    app.provide(\"globalStore\", {\n      user: \"John Doe\",\n      settings: { theme: \"dark\" },\n    });\n\n    \u002F\u002F Or register a global component\n    \u002F\u002F app.component('MyGlobalComponent', MyGlobalComponent)\n  },\n};\n",[196,3441,3442,3447,3455,3475,3480,3501,3509,3524,3563,3568,3572,3577,3591,3601,3612,3617,3621,3626,3631,3637],{"__ignoreMap":123},[369,3443,3444],{"class":371,"line":372},[369,3445,3446],{"class":375},"\u002F\u002F plugins\u002FmyPlugin.js\n",[369,3448,3449,3451,3453],{"class":371,"line":124},[369,3450,408],{"class":381},[369,3452,2329],{"class":381},[369,3454,541],{"class":421},[369,3456,3457,3460,3462,3464,3466,3469,3471,3473],{"class":371,"line":399},[369,3458,3459],{"class":414},"  install",[369,3461,2364],{"class":385},[369,3463,3435],{"class":421},[369,3465,273],{"class":385},[369,3467,3468],{"class":421},"options",[369,3470,1797],{"class":385},[369,3472,1275],{"class":381},[369,3474,541],{"class":385},[369,3476,3477],{"class":371,"line":405},[369,3478,3479],{"class":375},"    \u002F\u002F Make a global method available\n",[369,3481,3482,3485,3488,3490,3492,3495,3497,3499],{"class":371,"line":428},[369,3483,3484],{"class":385},"    app.config.globalProperties.",[369,3486,3487],{"class":414},"$translate",[369,3489,438],{"class":381},[369,3491,570],{"class":385},[369,3493,3494],{"class":421},"key",[369,3496,1797],{"class":385},[369,3498,1275],{"class":381},[369,3500,541],{"class":385},[369,3502,3503,3506],{"class":371,"line":452},[369,3504,3505],{"class":381},"      return",[369,3507,3508],{"class":385}," key\n",[369,3510,3511,3514,3517,3519,3522],{"class":371,"line":470},[369,3512,3513],{"class":385},"        .",[369,3515,3516],{"class":414},"split",[369,3518,418],{"class":385},[369,3520,3521],{"class":392},"\".\"",[369,3523,2052],{"class":385},[369,3525,3526,3528,3531,3533,3536,3538,3541,3543,3545,3548,3551,3554,3557,3560],{"class":371,"line":489},[369,3527,3513],{"class":385},[369,3529,3530],{"class":414},"reduce",[369,3532,1791],{"class":385},[369,3534,3535],{"class":421},"o",[369,3537,273],{"class":385},[369,3539,3540],{"class":421},"i",[369,3542,1797],{"class":385},[369,3544,1275],{"class":381},[369,3546,3547],{"class":385}," (o ",[369,3549,3550],{"class":381},"?",[369,3552,3553],{"class":385}," o[i] ",[369,3555,3556],{"class":381},":",[369,3558,3559],{"class":434}," undefined",[369,3561,3562],{"class":385},"), options.translations);\n",[369,3564,3565],{"class":371,"line":494},[369,3566,3567],{"class":385},"    };\n",[369,3569,3570],{"class":371,"line":508},[369,3571,402],{"emptyLinePlaceholder":138},[369,3573,3574],{"class":371,"line":522},[369,3575,3576],{"class":375},"    \u002F\u002F Provide a global composable\n",[369,3578,3579,3582,3584,3586,3589],{"class":371,"line":535},[369,3580,3581],{"class":385},"    app.",[369,3583,2855],{"class":414},[369,3585,418],{"class":385},[369,3587,3588],{"class":392},"\"globalStore\"",[369,3590,2166],{"class":385},[369,3592,3593,3596,3599],{"class":371,"line":544},[369,3594,3595],{"class":385},"      user: ",[369,3597,3598],{"class":392},"\"John Doe\"",[369,3600,2356],{"class":385},[369,3602,3603,3606,3609],{"class":371,"line":564},[369,3604,3605],{"class":385},"      settings: { theme: ",[369,3607,3608],{"class":392},"\"dark\"",[369,3610,3611],{"class":385}," },\n",[369,3613,3614],{"class":371,"line":579},[369,3615,3616],{"class":385},"    });\n",[369,3618,3619],{"class":371,"line":610},[369,3620,402],{"emptyLinePlaceholder":138},[369,3622,3623],{"class":371,"line":616},[369,3624,3625],{"class":375},"    \u002F\u002F Or register a global component\n",[369,3627,3628],{"class":371,"line":635},[369,3629,3630],{"class":375},"    \u002F\u002F app.component('MyGlobalComponent', MyGlobalComponent)\n",[369,3632,3633,3635],{"class":371,"line":647},[369,3634,2402],{"class":385},[369,3636,2356],{"class":421},[369,3638,3639,3641],{"class":371,"line":658},[369,3640,2469],{"class":421},[369,3642,396],{"class":385},[361,3644,3646],{"className":363,"code":3645,"language":365,"meta":123,"style":123},"\u002F\u002F main.js\nimport { createApp } from \"vue\";\nimport App from \".\u002FApp.vue\";\nimport MyPlugin from \".\u002Fplugins\u002FmyPlugin\";\n\nconst app = createApp(App);\n\nconst translations = {\n  hello: \"Bonjour\",\n  welcome: {\n    message: \"Bienvenue!\",\n  },\n};\n\napp.use(MyPlugin, { translations }); \u002F\u002F Use the plugin with options\napp.mount(\"#app\");\n",[196,3647,3648,3652,3664,3676,3690,3694,3706,3710,3721,3731,3736,3746,3750,3754,3758,3771],{"__ignoreMap":123},[369,3649,3650],{"class":371,"line":372},[369,3651,3232],{"class":375},[369,3653,3654,3656,3658,3660,3662],{"class":371,"line":124},[369,3655,382],{"class":381},[369,3657,2107],{"class":385},[369,3659,389],{"class":381},[369,3661,393],{"class":392},[369,3663,396],{"class":385},[369,3665,3666,3668,3670,3672,3674],{"class":371,"line":399},[369,3667,382],{"class":381},[369,3669,2120],{"class":385},[369,3671,389],{"class":381},[369,3673,2125],{"class":392},[369,3675,396],{"class":385},[369,3677,3678,3680,3683,3685,3688],{"class":371,"line":405},[369,3679,382],{"class":381},[369,3681,3682],{"class":385}," MyPlugin ",[369,3684,389],{"class":381},[369,3686,3687],{"class":392}," \".\u002Fplugins\u002FmyPlugin\"",[369,3689,396],{"class":385},[369,3691,3692],{"class":371,"line":428},[369,3693,402],{"emptyLinePlaceholder":138},[369,3695,3696,3698,3700,3702,3704],{"class":371,"line":452},[369,3697,908],{"class":381},[369,3699,2138],{"class":434},[369,3701,438],{"class":381},[369,3703,2143],{"class":414},[369,3705,2146],{"class":385},[369,3707,3708],{"class":371,"line":470},[369,3709,402],{"emptyLinePlaceholder":138},[369,3711,3712,3714,3717,3719],{"class":371,"line":489},[369,3713,908],{"class":381},[369,3715,3716],{"class":434}," translations",[369,3718,438],{"class":381},[369,3720,541],{"class":385},[369,3722,3723,3726,3729],{"class":371,"line":494},[369,3724,3725],{"class":385},"  hello: ",[369,3727,3728],{"class":392},"\"Bonjour\"",[369,3730,2356],{"class":385},[369,3732,3733],{"class":371,"line":508},[369,3734,3735],{"class":385},"  welcome: {\n",[369,3737,3738,3741,3744],{"class":371,"line":522},[369,3739,3740],{"class":385},"    message: ",[369,3742,3743],{"class":392},"\"Bienvenue!\"",[369,3745,2356],{"class":385},[369,3747,3748],{"class":371,"line":535},[369,3749,2193],{"class":385},[369,3751,3752],{"class":371,"line":544},[369,3753,2846],{"class":385},[369,3755,3756],{"class":371,"line":564},[369,3757,402],{"emptyLinePlaceholder":138},[369,3759,3760,3762,3765,3768],{"class":371,"line":579},[369,3761,2155],{"class":385},[369,3763,3764],{"class":414},"use",[369,3766,3767],{"class":385},"(MyPlugin, { translations }); ",[369,3769,3770],{"class":375},"\u002F\u002F Use the plugin with options\n",[369,3772,3773,3775,3777,3779,3781],{"class":371,"line":610},[369,3774,2155],{"class":385},[369,3776,2209],{"class":414},[369,3778,418],{"class":385},[369,3780,2214],{"class":392},[369,3782,449],{"class":385},[10,3784,3785,3786,3789,3790,3793],{},"Artık herhangi bir bileşen ",[196,3787,3788],{},"$translate('welcome.message')"," çağırabiliyor ya da ",[196,3791,3792],{},"globalStore","'u inject edebiliyor. Vue Router ve Pinia da uygulamaya aynı mekanizmayla giriyor.",[10,3795,3796],{},"Bu yedi örüntü, temellerin yetmemeye başladığı durumların çoğunu kapsıyor. Ne kadar çok uzanırsan o kadar doğal geliyorlar.",[1341,3798,3799],{},"html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sPWt5, html code.shiki .sPWt5{--shiki-default:#7EE787}",{"title":123,"searchDepth":124,"depth":124,"links":3801},[3802,3804,3805,3806,3807,3808,3809],{"id":342,"depth":124,"text":3803},"1. setup() sonrasında Composition API",{"id":954,"depth":124,"text":955},{"id":1644,"depth":124,"text":1645},{"id":2075,"depth":124,"text":2076},{"id":2288,"depth":124,"text":2289},{"id":2639,"depth":124,"text":2640},{"id":3203,"depth":124,"text":3204},"FRONTEND","2025-09-15","Composable'lar, Teleport, Suspense, özel yönergeler, render fonksiyonları, provide\u002Finject ve eklentiler; her biri koduyla birlikte.",{},"\u002Fblog\u002Fileri-seviye-vue-3-teknikleri",{"title":334,"description":3812},"blog\u002Fileri-seviye-vue-3-teknikleri",[732,3818,3819,365,3820],"vue3","frontend","webdev","mastering-vue3-in-2025","GIGEt67f4ijHmwgoSRU-XjxAY6cg-iW0J7rSi9sANkk",{"id":3824,"title":3825,"body":3826,"category":3810,"date":3914,"description":3915,"draft":135,"extension":136,"meta":3916,"navigation":138,"path":3917,"seo":3918,"stem":3919,"tags":3920,"translationKey":3924,"videoId":148,"__hash__":3925},"blog_tr\u002Fblog\u002Fjavascript-cati-savaslari-vue-react-angular.md","JavaScript çatı savaşları neden hâlâ önemli: Vue, React ve Angular",{"type":7,"value":3827,"toc":3906},[3828,3832,3835,3838,3842,3845,3848,3851,3854,3858,3861,3864,3867,3870,3874,3877,3880,3883,3886,3890,3893,3896,3900,3903],[28,3829,3831],{"id":3830},"bitmeyen-tartışma-ya-da-öyle-mi","Bitmeyen tartışma, ya da öyle mi",[10,3833,3834],{},"Çatı savaşları her JavaScript geliştiricisinin nabzını yükseltir, en azından hafiften sinirlendirir. Vue'ya karşı React'e karşı Angular; her yıl yeni bir aday ve hangisinin kazandığına dair yeni bir tur tartışma. Yine de ayakta duran aynı üçü. \"Bunun bir önemi kaldı mı, birini seçip yoluma devam edemez miyim?\" diye sormak makul.",[10,3836,3837],{},"Çekirdek fikirler yerinde duruyor, ama zemin kayıyor. Performans çalışmaları, yeni özellikler ve topluluğun ilgisinin nereye gittiği, bir projenin nasıl yaşlanacağını etkiliyor. Çatı seçmek moda olanı seçmek değil; sürdürülebilir ve içinde çalışması keyifli olanı seçmek. Üçünün bugünkü durumu şöyle.",[28,3839,3841],{"id":3840},"react-bileşenlerin-kralı","React: bileşenlerin kralı",[10,3843,3844],{},"React ya bu işi başlattı ya da en azından çoğumuzun bugün kullandığı bileşen yaklaşımını yaygınlaştırdı. Facebook'tan, bugünkü adıyla Meta'dan çıktı ve yıllardır baskın konumda.",[10,3846,3847],{},"En büyük avantajı ekosistemi. Bir problemle karşılaştığında büyük ihtimalle biri onunla çoktan karşılaşmış, bir cevap ya da kütüphane seni bekliyor. React genelde çatı değil kütüphane olarak tanımlanır; bu da özgürlük demek: yönlendiriciyi, durum yönetimini, derleme kurulumunu sen seçersin. Kendi yığınını şekillendirmek isteyen deneyimli ekipler bunu sever. Virtual DOM, doğrudan DOM müdahalesini en aza indirerek arayüz güncellemelerini verimli tutuyor; hook'lar da fonksiyonel bileşenleri, yerini aldıkları sınıf bileşenlerine göre çok daha anlaşılır hâle getirdi.",[10,3849,3850],{},"Bu özgürlüğün bedeli karar yorgunluğu. Seçeneklerin sayısı yeni başlayan birini boğabiliyor. React ayrıca hızlı ilerliyor; güncel pratikleri, kütüphaneleri ve kullanımdan kaldırılanları takip etmek gerçek zaman istiyor.",[10,3852,3853],{},"Esnekliğe değer veren, deneyimli geliştiricileri olan ve arkasında geniş bir ekosistem isteyen ekiplere uyuyor. Karmaşık ve yoğun etkileşimli tek sayfa uygulamalar için hâlâ güçlü bir varsayılan.",[28,3855,3857],{"id":3856},"vue-yaklaşılabilir-ve-kademeli","Vue: yaklaşılabilir ve kademeli",[10,3859,3860],{},"Vue yaklaşılabilirliğiyle ve söz dizimiyle biliniyor; payını da istikrarlı biçimde büyüttü. Esneklikle yapı arasında bir yerde duruyor, ikisinden birine tam olarak bağlanmıyor.",[10,3862,3863],{},"Öne çıktığı yer öğrenme kolaylığı. HTML, CSS ve biraz JavaScript'ten geliyorsan tek dosyalı bileşenler ve Vue'nun API'si doğal geliyor; üçlü içinde en yumuşak öğrenme eğrisine sahip olduğu söylenir. Kademeli olarak da benimsenebiliyor: mevcut bir projeye parça parça sokabilir ya da onunla baştan sona bir uygulama yazabilirsin. Dokümantasyonu gerçek bir artı, açık ve düzenli. Vue hafif ve tepkisellik sistemi iyi optimize edilmiş. Önerilen durum yönetimi çözümü Pinia ile yığının o kısmı da netleşti.",[10,3865,3866],{},"Ekosistemi sağlam ve büyüyor olsa da React'inki kadar geniş değil; dar kullanım durumları için daha az üçüncü taraf kütüphane bulabilirsin. Buna bağlı pratik bir nokta: bazı kaynaklar ve topluluk tartışmaları İngilizce dışında yürüyor, bu da arada bir çeviri aramak demek.",[10,3868,3869],{},"Çabuk kavranan ve gündelik kullanımı iyi olan bir şey isteyen geliştiricilere uyuyor; küçük projelerden büyük uygulamalara ölçekleniyor.",[28,3871,3873],{"id":3872},"angular-yapılandırılmış-ve-görüş-sahibi","Angular: yapılandırılmış ve görüş sahibi",[10,3875,3876],{},"Google destekli Angular tam bir çatı. Onu seçmek, uygulamaların nasıl kurulması gerektiğine dair güçlü görüşlerle birlikte bütün bir ekosistemi benimsemek demek.",[10,3878,3879],{},"Her şey içinde geliyor: yönlendirme, durum yönetimi, form işleme, HTTP istemcisi. Kütüphane seçmekle geçen süre azalıyor, kod yazmakla geçen süre artıyor. Temelden TypeScript üzerine kurulu, yani tip denetimi isteğe bağlı değil zorunlu; büyük uygulamalarda bu daha az çalışma zamanı hatası ve daha iyi araç desteği olarak geri dönüyor. CLI'ı proje iskeleti kurmak, bileşen ve servis üretmek, test çalıştırmak ve derlemek için gerçekten güçlü. Google'ın desteği istikrar hissi ve görünür bir yol haritası veriyor. Görüş sahibi olduğu için Angular projeleri birbirine benziyor; bu da büyük ekiplerde ve uzun ömürlü bakımda işe yarıyor.",[10,3881,3882],{},"Üçü içinde en dik öğrenme eğrisi de onda. Modüller, servisler, bağımlılık enjeksiyonu, RxJS üzerinden observable'lar ve dekoratörler bir anda sindirilecek çok şey. Projeler React ya da Vue'daki karşılıklarına göre daha fazla kalıp kod taşıyor ve öngörülen yoldan sapmak zor.",[10,3884,3885],{},"Yapıyı, sürdürülebilirliği ve tip güvenliğini öne alan büyük uygulamalara ve ekiplere uyuyor.",[28,3887,3889],{"id":3888},"peki-hangisi-kazanıyor","Peki hangisi kazanıyor",[10,3891,3892],{},"Hiçbiri, dürüst cevap bu. Her biri kendi güçlü yanının etrafında olgunlaştı ve diğerlerinden ödünç aldı. Doğru olan, projene, ekibine ve ekibinin zaten bildiğine bağlı.",[10,3894,3895],{},"Geniş ekosistem ve esneklik istiyorsan, mimari kararlar almaya ve hızlı değişimi takip etmeye istekli bir ekiple React. Hızlı bir başlangıç, iyi bir geliştirici deneyimi ve yapı ile özgürlük arasında denge istiyorsan Vue. Öngörülen bir yapının, tip denetiminin ve kapsamlı bir CLI'ın öğrenme eğrisine değdiği büyük uygulamalar için Angular.",[28,3897,3899],{"id":3898},"kararı-asıl-belirleyen","Kararı asıl belirleyen",[10,3901,3902],{},"Çatı savaşları galibiyetten çok konumlanmayla ilgili. Üçü de yetkin. Projenin sonucunu belirleyen şeyler: aracın ekibini ne kadar üretken kıldığı, kullanıcıların için yeterince hızlı olup olmadığı, kodun birkaç yıl sonra hâlâ anlaşılabilir olup olmayacağı, ihtiyacın olduğunda destek ve kütüphane bulunup bulunmadığı ve geliştiricilerinin hâlihazırda ne bildiği. Yeni bir çatı öğrenmenin bir maliyeti var ve o maliyet kararın parçası.",[10,3904,3905],{},"Ekosistem hiç olmadığı kadar zengin. Doğru aracı seçmek, tartışmayı kazanmaktan daha işe yarar.",{"title":123,"searchDepth":124,"depth":124,"links":3907},[3908,3909,3910,3911,3912,3913],{"id":3830,"depth":124,"text":3831},{"id":3840,"depth":124,"text":3841},{"id":3856,"depth":124,"text":3857},{"id":3872,"depth":124,"text":3873},{"id":3888,"depth":124,"text":3889},{"id":3898,"depth":124,"text":3899},"2025-09-17","Üç büyük çatının bugün nerede durduğu, her birinin neyde iyi olduğu ve bir sonraki proje için nasıl seçim yapılacağı.",{},"\u002Fblog\u002Fjavascript-cati-savaslari-vue-react-angular",{"title":3825,"description":3915},"blog\u002Fjavascript-cati-savaslari-vue-react-angular",[365,3921,732,3922,3923],"frameworks","react","angular","why-javascript-framework-wars-matter-in-2025","bP2ibfOs1CmW8iC7Psw8CjyfWgXPfjVhsuqxwTBD2vI",{"id":3927,"title":3928,"body":3929,"category":319,"date":3993,"description":3994,"draft":135,"extension":136,"meta":3995,"navigation":138,"path":3996,"seo":3997,"stem":3998,"tags":3999,"translationKey":4003,"videoId":148,"__hash__":4004},"blog_tr\u002Fblog\u002Fnamecheap-alan-adini-vercel-e-baglamak.md","Namecheap'ten aldığın alan adını Vercel uygulamana bağlamak",{"type":7,"value":3930,"toc":3987},[3931,3934,3938,3941,3945,3948,3951,3955,3958,3965,3972,3977,3981,3984],[10,3932,3933],{},"Namecheap'ten bir alan adı aldıysan ve onu Vercel'deki uygulamana bağlamak istiyorsan izlemen gereken birkaç adım var.",[28,3935,3937],{"id":3936},"_1-vercel-uygulamasına-özel-alan-adını-ekle","1. Vercel uygulamasına özel alan adını ekle",[10,3939,3940],{},"Vercel hesabına gir ve uygulamanın panosuna geç. \"Settings\" ve ardından \"Domains\" bölümüne git. \"Add Domain\"e tıkla, alan adını yaz ve \"Add\" de.",[28,3942,3944],{"id":3943},"_2-vercelin-verdiği-dns-kayıtlarını-al","2. Vercel'in verdiği DNS kayıtlarını al",[10,3946,3947],{},"Alan adını ekledikten sonra Vercel'in istediği DNS kayıtlarına ihtiyacın olacak. \"Domains\" bölümüne dön, az önce eklediğin alan adına tıkla, sonra \"DNS Records\"a geç.",[10,3949,3950],{},"Karşına Namecheap hesabına eklemen gereken kayıtların listesi çıkacak: bir A kaydı, bir CNAME kaydı ve bir TXT kaydı.",[28,3952,3954],{"id":3953},"_3-kayıtları-namecheape-ekle","3. Kayıtları Namecheap'e ekle",[10,3956,3957],{},"Namecheap hesabına gir ve alan adının panosunu aç. \"Advanced DNS\" bölümüne, oradan da \"Add New Record\"a tıkla.",[10,3959,3960,3961,3964],{},"Önce A kaydını ekle. \"Type\" menüsünden \"A (Address)\" seç. \"Host\" alanına tırnaksız olarak ",[196,3962,3963],{},"@"," yaz. \"Value\" alanına Vercel'in verdiği IP adresini gir.",[10,3966,3967,3968,3971],{},"Sonra CNAME kaydı. \"Type\" menüsünden \"CNAME (Alias)\" seç, \"Host\" alanına ",[196,3969,3970],{},"www"," yaz, \"Value\" alanına Vercel'deki değeri gir.",[10,3973,3974,3975,3971],{},"En son TXT kaydı. \"Type\" menüsünden \"TXT (Text)\" seç, \"Host\" alanına yine ",[196,3976,3963],{},[28,3978,3980],{"id":3979},"_4-kayıtları-doğrula","4. Kayıtları doğrula",[10,3982,3983],{},"Kayıtları ekledikten sonra doğru girildiklerinden emin ol. Vercel'deki uygulama panosuna dön, alan adına tıkla ve \"Verify DNS Configuration\" düğmesine bas. Vercel kayıtların doğru kurulup kurulmadığını kontrol edecek.",[10,3985,3986],{},"DNS kayıtlarının yayılması zaman alabilir, o yüzden sabırlı ol. Yayılma tamamlandığında Vercel kayıtları doğrulayacak ve alan adın uygulamana bağlanmış olacak. Takıldığın bir yer olursa Vercel'in destek ekibine yazabilirsin.",{"title":123,"searchDepth":124,"depth":124,"links":3988},[3989,3990,3991,3992],{"id":3936,"depth":124,"text":3937},{"id":3943,"depth":124,"text":3944},{"id":3953,"depth":124,"text":3954},{"id":3979,"depth":124,"text":3980},"2024-09-13","Namecheap'te duran bir alan adını Vercel'de yayındaki uygulamana bağlama adımları.",{},"\u002Fblog\u002Fnamecheap-alan-adini-vercel-e-baglamak",{"title":3928,"description":3994},"blog\u002Fnamecheap-alan-adini-vercel-e-baglamak",[4000,4001,4002],"namecheap","vercel","deployment","connect-namecheap-domain-to-vercel","8s6llnkLDGo-9FyEwi2oZnPwI0PDcIZuzqyogVSLtnc",{"id":4006,"title":4007,"body":4008,"category":3810,"date":4148,"description":4149,"draft":135,"extension":136,"meta":4150,"navigation":138,"path":4151,"seo":4152,"stem":4153,"tags":4154,"translationKey":4158,"videoId":148,"__hash__":4159},"blog_tr\u002Fblog\u002Fnuxt-3-tailwindcss-intellisense-sorunu.md","Nuxt 3 projesinde TailwindCSS Intellisense nasıl düzeltilir",{"type":7,"value":4009,"toc":4143},[4010,4014,4025,4029,4043,4047,4053,4072,4137,4140],[28,4011,4013],{"id":4012},"sorun","Sorun",[10,4015,4016,4017,4024],{},"VS Code'da açık bir Nuxt 3 + TailwindCSS projem vardı ve Tailwind intellisense düzgün çalışmıyordu. Önce eklentiyi kaldırıp yeniden kurdum, işe yaramadı. Biraz araştırınca ",[4018,4019,4023],"a",{"href":4020,"rel":4021},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-intellisense\u002Fissues\u002F663#issuecomment-1316788128",[4022],"nofollow","şu çözümü"," buldum; bugün onu paylaşıyorum.",[28,4026,4028],{"id":4027},"neden-çalışmıyor","Neden çalışmıyor",[10,4030,4031,4032,4035,4036,4039,4040,4042],{},"Nuxt projelerinde bir ",[196,4033,4034],{},".nuxt"," dizini var. Nuxt, geliştirme sırasında Vue uygulamanı üretmek için burayı kullanıyor. Dikkatli bakarsan içinde ",[196,4037,4038],{},".nuxt\u002Ftailwind.config.cjs"," diye bir dosya da göreceksin. Yani Tailwind aynı projede iki config dosyası buluyor: biri kök dizinde, diğeri ",[196,4041,4034],{}," içinde.",[28,4044,4046],{"id":4045},"çözüm","Çözüm",[10,4048,4049,4050,4052],{},"Eklentiye ",[196,4051,4034],{}," dizinini yok saymasını söyleyebilirsin. Bunun için:",[806,4054,4055,4062,4069],{},[819,4056,4057,4058,4061],{},"Projenin kök dizininde bir ",[196,4059,4060],{},"\u002F.vscode"," klasörü oluştur.",[819,4063,4064,4065,4068],{},"İçine bir ",[196,4066,4067],{},"settings.json"," dosyası ekle.",[819,4070,4071],{},"Aşağıdaki kodu o dosyaya kopyala.",[361,4073,4076],{"className":4074,"code":4075,"language":629,"meta":123,"style":123},"language-json shiki shiki-themes github-dark-default","\u002F\u002F \u002F.vscode\u002Fsettings.json\n{\n  \"tailwindCSS.files.exclude\": [\n    \"**\u002F.git\u002F**\",\n    \"**\u002Fnode_modules\u002F**\",\n    \"**\u002F.hg\u002F**\",\n    \"**\u002F.svn\u002F**\",\n    \"**\u002F.nuxt\u002F**\"\n  ]\n}\n",[196,4077,4078,4083,4087,4095,4102,4109,4116,4123,4128,4133],{"__ignoreMap":123},[369,4079,4080],{"class":371,"line":372},[369,4081,4082],{"class":375},"\u002F\u002F \u002F.vscode\u002Fsettings.json\n",[369,4084,4085],{"class":371,"line":124},[369,4086,2415],{"class":385},[369,4088,4089,4092],{"class":371,"line":399},[369,4090,4091],{"class":742},"  \"tailwindCSS.files.exclude\"",[369,4093,4094],{"class":385},": [\n",[369,4096,4097,4100],{"class":371,"line":405},[369,4098,4099],{"class":392},"    \"**\u002F.git\u002F**\"",[369,4101,2356],{"class":385},[369,4103,4104,4107],{"class":371,"line":428},[369,4105,4106],{"class":392},"    \"**\u002Fnode_modules\u002F**\"",[369,4108,2356],{"class":385},[369,4110,4111,4114],{"class":371,"line":452},[369,4112,4113],{"class":392},"    \"**\u002F.hg\u002F**\"",[369,4115,2356],{"class":385},[369,4117,4118,4121],{"class":371,"line":470},[369,4119,4120],{"class":392},"    \"**\u002F.svn\u002F**\"",[369,4122,2356],{"class":385},[369,4124,4125],{"class":371,"line":489},[369,4126,4127],{"class":392},"    \"**\u002F.nuxt\u002F**\"\n",[369,4129,4130],{"class":371,"line":494},[369,4131,4132],{"class":385},"  ]\n",[369,4134,4135],{"class":371,"line":508},[369,4136,724],{"class":385},[10,4138,4139],{},"Bundan sonra Tailwind intellisense'in düzgün çalışması gerekiyor.",[1341,4141,4142],{},"html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sPWt5, html code.shiki .sPWt5{--shiki-default:#7EE787}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":123,"searchDepth":124,"depth":124,"links":4144},[4145,4146,4147],{"id":4012,"depth":124,"text":4013},{"id":4027,"depth":124,"text":4028},{"id":4045,"depth":124,"text":4046},"2024-11-12","Nuxt 3 projelerinde TailwindCSS Intellisense'in çalışmama sorunu ve basit bir çözümü.",{},"\u002Fblog\u002Fnuxt-3-tailwindcss-intellisense-sorunu",{"title":4007,"description":4149},"blog\u002Fnuxt-3-tailwindcss-intellisense-sorunu",[4155,4156,4157],"nuxt","tailwindcss","vscode","fix-tailwindcss-intellisense-in-nuxt-3","1JP5xONk02FM9vSTYqMoaAXp9a_3qC6FlIIEVBsO5fg",{"id":4161,"title":4162,"body":4163,"category":319,"date":5680,"description":5681,"draft":135,"extension":136,"meta":5682,"navigation":138,"path":5683,"seo":5684,"stem":5685,"tags":5686,"translationKey":5691,"videoId":148,"__hash__":5692},"blog_tr\u002Fblog\u002Ftemiz-kod-neden-hala-onemli.md","Temiz kod neden hâlâ önemli: korunmaya değer sekiz ilke",{"type":7,"value":4164,"toc":5668},[4165,4169,4172,4175,4178,4182,4185,4233,4236,4275,4278,4282,4285,4328,4331,4469,4472,4476,4479,4602,4605,4664,4668,4671,4674,4694,4697,4738,4745,4749,4752,4755,4805,4808,4978,4982,4993,4996,5065,5068,5126,5129,5133,5136,5139,5370,5374,5377,5531,5534,5652,5655,5659,5662,5665],[28,4166,4168],{"id":4167},"yapay-zeka-ve-temiz-kodun-bugünkü-yeri","Yapay zeka ve temiz kodun bugünkü yeri",[10,4170,4171],{},"Yapay zeka artık bu işin her yerinde; kod parçacığı üretmekten bütün fonksiyonlar yazmaya kadar. Bir model senin yerine yeniden düzenleyebiliyorken temiz kod yazmanın hâlâ bir anlamı var mı diye sormak makul.",[10,4173,4174],{},"Ben de bu soruyla bir süre gidip geldim. Yapay zeka yetkin bir asistan, ama zihin okuyucu değil. Optimize edebiliyor, yeniden düzenleyebiliyor, daha net alternatifler önerebiliyor; bunların hepsi sağlam bir yerden başladığında daha iyi çalışıyor. İyi bir aşçıya mükemmel malzeme ve darmadağın bir tarif verirsen, tabak yine yanlış çıkar.",[10,4176,4177],{},"Temiz kod netlikle, sürdürülebilirlikle ve bir projenin nasıl yaşlandığıyla ilgili. Yan etkisi olarak yapay zeka araçlarını da daha etkili kılıyor. Ayakta kalan sekiz ilke şöyle.",[28,4179,4181],{"id":4180},"_1-anlamlı-isimler","1. Anlamlı isimler",[10,4183,4184],{},"Netlik burada başlıyor. Bütün karakterlerin adının \"a\", \"b\" ve \"c\" olduğu bir hikâye düşün. Kod da farklı değil. Değişkenler, fonksiyonlar ve sınıflar, gövdelerinden tek satır okumadan önce ne yaptıklarını ya da neyi temsil ettiklerini söylemeli.",[361,4186,4188],{"className":363,"code":4187,"language":365,"meta":123,"style":123},"let d; \u002F\u002F What is 'd'? Days? Data?\nfunction p(a, b) {\n  \u002F* ... *\u002F\n} \u002F\u002F What does 'p' do? What are 'a' and 'b'?\n",[196,4189,4190,4201,4220,4225],{"__ignoreMap":123},[369,4191,4192,4195,4198],{"class":371,"line":372},[369,4193,4194],{"class":381},"let",[369,4196,4197],{"class":385}," d; ",[369,4199,4200],{"class":375},"\u002F\u002F What is 'd'? Days? Data?\n",[369,4202,4203,4206,4209,4211,4213,4215,4218],{"class":371,"line":124},[369,4204,4205],{"class":381},"function",[369,4207,4208],{"class":414}," p",[369,4210,418],{"class":385},[369,4212,4018],{"class":421},[369,4214,273],{"class":385},[369,4216,4217],{"class":421},"b",[369,4219,425],{"class":385},[369,4221,4222],{"class":371,"line":399},[369,4223,4224],{"class":375},"  \u002F* ... *\u002F\n",[369,4226,4227,4230],{"class":371,"line":405},[369,4228,4229],{"class":385},"} ",[369,4231,4232],{"class":375},"\u002F\u002F What does 'p' do? What are 'a' and 'b'?\n",[10,4234,4235],{},"Şununla karşılaştır:",[361,4237,4239],{"className":363,"code":4238,"language":365,"meta":123,"style":123},"let daysSinceLastLogin;\nfunction calculateTotalPrice(quantity, unitPrice) {\n  \u002F* ... *\u002F\n}\n",[196,4240,4241,4248,4267,4271],{"__ignoreMap":123},[369,4242,4243,4245],{"class":371,"line":372},[369,4244,4194],{"class":381},[369,4246,4247],{"class":385}," daysSinceLastLogin;\n",[369,4249,4250,4252,4255,4257,4260,4262,4265],{"class":371,"line":124},[369,4251,4205],{"class":381},[369,4253,4254],{"class":414}," calculateTotalPrice",[369,4256,418],{"class":385},[369,4258,4259],{"class":421},"quantity",[369,4261,273],{"class":385},[369,4263,4264],{"class":421},"unitPrice",[369,4266,425],{"class":385},[369,4268,4269],{"class":371,"line":399},[369,4270,4224],{"class":375},[369,4272,4273],{"class":371,"line":405},[369,4274,724],{"class":385},[10,4276,4277],{},"İyi isimler kodun içinde belge gibi çalışıyor. Okumanın zihinsel yükünü azaltıyor ve hata ayıklamayı hızlandırıyor. Kodunu okuyan bir model de senin faydalandığın netlikten faydalanıyor.",[28,4279,4281],{"id":4280},"_2-bir-fonksiyon-tek-bir-iş-yapmalı","2. Bir fonksiyon tek bir iş yapmalı",[10,4283,4284],{},"Her fonksiyonun değişmek için tek bir sebebi olmalı. Bir fonksiyon fazla iş yaptığında test etmesi zorlaşıyor, takip etmesi zorlaşıyor ve ona dokunduğunda kırılma ihtimali artıyor.",[361,4286,4288],{"className":363,"code":4287,"language":365,"meta":123,"style":123},"function processOrder(order) {\n  \u002F\u002F Validate order\n  \u002F\u002F Save to database\n  \u002F\u002F Send confirmation email\n  \u002F\u002F Update inventory\n}\n",[196,4289,4290,4304,4309,4314,4319,4324],{"__ignoreMap":123},[369,4291,4292,4294,4297,4299,4302],{"class":371,"line":372},[369,4293,4205],{"class":381},[369,4295,4296],{"class":414}," processOrder",[369,4298,418],{"class":385},[369,4300,4301],{"class":421},"order",[369,4303,425],{"class":385},[369,4305,4306],{"class":371,"line":124},[369,4307,4308],{"class":375},"  \u002F\u002F Validate order\n",[369,4310,4311],{"class":371,"line":399},[369,4312,4313],{"class":375},"  \u002F\u002F Save to database\n",[369,4315,4316],{"class":371,"line":405},[369,4317,4318],{"class":375},"  \u002F\u002F Send confirmation email\n",[369,4320,4321],{"class":371,"line":428},[369,4322,4323],{"class":375},"  \u002F\u002F Update inventory\n",[369,4325,4326],{"class":371,"line":452},[369,4327,724],{"class":385},[10,4329,4330],{},"Bunun yerine böl:",[361,4332,4334],{"className":363,"code":4333,"language":365,"meta":123,"style":123},"function validateOrder(order) {\n  \u002F* ... *\u002F\n}\nfunction saveOrder(order) {\n  \u002F* ... *\u002F\n}\nfunction sendConfirmationEmail(order) {\n  \u002F* ... *\u002F\n}\nfunction updateInventory(order) {\n  \u002F* ... *\u002F\n}\n\nfunction processOrder(order) {\n  validateOrder(order);\n  saveOrder(order);\n  sendConfirmationEmail(order);\n  updateInventory(order);\n}\n",[196,4335,4336,4349,4353,4357,4370,4374,4378,4391,4395,4399,4412,4416,4420,4424,4436,4444,4451,4458,4465],{"__ignoreMap":123},[369,4337,4338,4340,4343,4345,4347],{"class":371,"line":372},[369,4339,4205],{"class":381},[369,4341,4342],{"class":414}," validateOrder",[369,4344,418],{"class":385},[369,4346,4301],{"class":421},[369,4348,425],{"class":385},[369,4350,4351],{"class":371,"line":124},[369,4352,4224],{"class":375},[369,4354,4355],{"class":371,"line":399},[369,4356,724],{"class":385},[369,4358,4359,4361,4364,4366,4368],{"class":371,"line":405},[369,4360,4205],{"class":381},[369,4362,4363],{"class":414}," saveOrder",[369,4365,418],{"class":385},[369,4367,4301],{"class":421},[369,4369,425],{"class":385},[369,4371,4372],{"class":371,"line":428},[369,4373,4224],{"class":375},[369,4375,4376],{"class":371,"line":452},[369,4377,724],{"class":385},[369,4379,4380,4382,4385,4387,4389],{"class":371,"line":470},[369,4381,4205],{"class":381},[369,4383,4384],{"class":414}," sendConfirmationEmail",[369,4386,418],{"class":385},[369,4388,4301],{"class":421},[369,4390,425],{"class":385},[369,4392,4393],{"class":371,"line":489},[369,4394,4224],{"class":375},[369,4396,4397],{"class":371,"line":494},[369,4398,724],{"class":385},[369,4400,4401,4403,4406,4408,4410],{"class":371,"line":508},[369,4402,4205],{"class":381},[369,4404,4405],{"class":414}," updateInventory",[369,4407,418],{"class":385},[369,4409,4301],{"class":421},[369,4411,425],{"class":385},[369,4413,4414],{"class":371,"line":522},[369,4415,4224],{"class":375},[369,4417,4418],{"class":371,"line":535},[369,4419,724],{"class":385},[369,4421,4422],{"class":371,"line":544},[369,4423,402],{"emptyLinePlaceholder":138},[369,4425,4426,4428,4430,4432,4434],{"class":371,"line":564},[369,4427,4205],{"class":381},[369,4429,4296],{"class":414},[369,4431,418],{"class":385},[369,4433,4301],{"class":421},[369,4435,425],{"class":385},[369,4437,4438,4441],{"class":371,"line":579},[369,4439,4440],{"class":414},"  validateOrder",[369,4442,4443],{"class":385},"(order);\n",[369,4445,4446,4449],{"class":371,"line":610},[369,4447,4448],{"class":414},"  saveOrder",[369,4450,4443],{"class":385},[369,4452,4453,4456],{"class":371,"line":616},[369,4454,4455],{"class":414},"  sendConfirmationEmail",[369,4457,4443],{"class":385},[369,4459,4460,4463],{"class":371,"line":635},[369,4461,4462],{"class":414},"  updateInventory",[369,4464,4443],{"class":385},[369,4466,4467],{"class":371,"line":647},[369,4468,724],{"class":385},[10,4470,4471],{},"Karmaşık bir işi odaklı parçalara ayırmak kodu modüler yapıyor ve sonradan okumayı hatırı sayılır ölçüde kolaylaştırıyor.",[28,4473,4475],{"id":4474},"_3-kendini-tekrar-etme","3. Kendini tekrar etme",[10,4477,4478],{},"Aynı mantığı ikinci kez yazıyorsan onu bir fonksiyona ya da yeniden kullanılabilir bir bileşene çek. Tekrar, sürdürülebilirliği sessizce yok ediyor: bir hatayı düzeltmen gerektiğinde birkaç yerde düzeltmen gerekiyor ve eninde sonunda birini atlıyorsun.",[361,4480,4482],{"className":363,"code":4481,"language":365,"meta":123,"style":123},"\u002F\u002F In file A\nfunction calculateDiscountA(price) {\n  if (price > 100) return price * 0.9;\n  return price;\n}\n\n\u002F\u002F In file B (same logic)\nfunction calculateDiscountB(amount) {\n  if (amount > 100) return amount * 0.9;\n  return amount;\n}\n",[196,4483,4484,4489,4503,4533,4540,4544,4548,4553,4567,4591,4598],{"__ignoreMap":123},[369,4485,4486],{"class":371,"line":372},[369,4487,4488],{"class":375},"\u002F\u002F In file A\n",[369,4490,4491,4493,4496,4498,4501],{"class":371,"line":124},[369,4492,4205],{"class":381},[369,4494,4495],{"class":414}," calculateDiscountA",[369,4497,418],{"class":385},[369,4499,4500],{"class":421},"price",[369,4502,425],{"class":385},[369,4504,4505,4508,4511,4514,4517,4519,4522,4525,4528,4531],{"class":371,"line":399},[369,4506,4507],{"class":381},"  if",[369,4509,4510],{"class":385}," (price ",[369,4512,4513],{"class":381},">",[369,4515,4516],{"class":434}," 100",[369,4518,1797],{"class":385},[369,4520,4521],{"class":381},"return",[369,4523,4524],{"class":385}," price ",[369,4526,4527],{"class":381},"*",[369,4529,4530],{"class":434}," 0.9",[369,4532,396],{"class":385},[369,4534,4535,4537],{"class":371,"line":405},[369,4536,715],{"class":381},[369,4538,4539],{"class":385}," price;\n",[369,4541,4542],{"class":371,"line":428},[369,4543,724],{"class":385},[369,4545,4546],{"class":371,"line":452},[369,4547,402],{"emptyLinePlaceholder":138},[369,4549,4550],{"class":371,"line":470},[369,4551,4552],{"class":375},"\u002F\u002F In file B (same logic)\n",[369,4554,4555,4557,4560,4562,4565],{"class":371,"line":489},[369,4556,4205],{"class":381},[369,4558,4559],{"class":414}," calculateDiscountB",[369,4561,418],{"class":385},[369,4563,4564],{"class":421},"amount",[369,4566,425],{"class":385},[369,4568,4569,4571,4574,4576,4578,4580,4582,4585,4587,4589],{"class":371,"line":494},[369,4570,4507],{"class":381},[369,4572,4573],{"class":385}," (amount ",[369,4575,4513],{"class":381},[369,4577,4516],{"class":434},[369,4579,1797],{"class":385},[369,4581,4521],{"class":381},[369,4583,4584],{"class":385}," amount ",[369,4586,4527],{"class":381},[369,4588,4530],{"class":434},[369,4590,396],{"class":385},[369,4592,4593,4595],{"class":371,"line":508},[369,4594,715],{"class":381},[369,4596,4597],{"class":385}," amount;\n",[369,4599,4600],{"class":371,"line":522},[369,4601,724],{"class":385},[10,4603,4604],{},"Tek bir uygulama yeterli:",[361,4606,4608],{"className":363,"code":4607,"language":365,"meta":123,"style":123},"function applyStandardDiscount(price) {\n  if (price > 100) return price * 0.9;\n  return price;\n}\n\n\u002F\u002F Now both A and B can use applyStandardDiscount\n",[196,4609,4610,4623,4645,4651,4655,4659],{"__ignoreMap":123},[369,4611,4612,4614,4617,4619,4621],{"class":371,"line":372},[369,4613,4205],{"class":381},[369,4615,4616],{"class":414}," applyStandardDiscount",[369,4618,418],{"class":385},[369,4620,4500],{"class":421},[369,4622,425],{"class":385},[369,4624,4625,4627,4629,4631,4633,4635,4637,4639,4641,4643],{"class":371,"line":124},[369,4626,4507],{"class":381},[369,4628,4510],{"class":385},[369,4630,4513],{"class":381},[369,4632,4516],{"class":434},[369,4634,1797],{"class":385},[369,4636,4521],{"class":381},[369,4638,4524],{"class":385},[369,4640,4527],{"class":381},[369,4642,4530],{"class":434},[369,4644,396],{"class":385},[369,4646,4647,4649],{"class":371,"line":399},[369,4648,715],{"class":381},[369,4650,4539],{"class":385},[369,4652,4653],{"class":371,"line":405},[369,4654,724],{"class":385},[369,4656,4657],{"class":371,"line":428},[369,4658,402],{"emptyLinePlaceholder":138},[369,4660,4661],{"class":371,"line":452},[369,4662,4663],{"class":375},"\u002F\u002F Now both A and B can use applyStandardDiscount\n",[28,4665,4667],{"id":4666},"_4-neyi-değil-nedeni-yorumla","4. Ne'yi değil neden'i yorumla",[10,4669,4670],{},"İyi kodun yoruma ihtiyacı olmadığını duymuş olabilirsin; kısmen doğru. Anlamlı isimlerle yazılmış açık kod, yorumların çoğunu gereksiz kılıyor.",[10,4672,4673],{},"Kaydetmen gereken şey, bir işin neden o şekilde yapıldığı ya da bir geçici çözümün neden var olduğu. Bu tür bir yorumun değeri yüksek.",[361,4675,4677],{"className":363,"code":4676,"language":365,"meta":123,"style":123},"\u002F\u002F Increment the counter by 1\ncounter++;\n",[196,4678,4679,4684],{"__ignoreMap":123},[369,4680,4681],{"class":371,"line":372},[369,4682,4683],{"class":375},"\u002F\u002F Increment the counter by 1\n",[369,4685,4686,4689,4692],{"class":371,"line":124},[369,4687,4688],{"class":385},"counter",[369,4690,4691],{"class":381},"++",[369,4693,396],{"class":385},[10,4695,4696],{},"Bu hiçbir şey katmıyor. Bu katıyor:",[361,4698,4700],{"className":363,"code":4699,"language":365,"meta":123,"style":123},"\u002F\u002F This specific regex is used to handle legacy user IDs\n\u002F\u002F which sometimes contain leading zeros and special characters.\nconst userIdRegex = \u002F^[0-9a-zA-Z\\-_]+$\u002F;\n",[196,4701,4702,4707,4712],{"__ignoreMap":123},[369,4703,4704],{"class":371,"line":372},[369,4705,4706],{"class":375},"\u002F\u002F This specific regex is used to handle legacy user IDs\n",[369,4708,4709],{"class":371,"line":124},[369,4710,4711],{"class":375},"\u002F\u002F which sometimes contain leading zeros and special characters.\n",[369,4713,4714,4716,4719,4721,4724,4727,4730,4733,4736],{"class":371,"line":399},[369,4715,908],{"class":381},[369,4717,4718],{"class":434}," userIdRegex",[369,4720,438],{"class":381},[369,4722,4723],{"class":392}," \u002F",[369,4725,4726],{"class":381},"^",[369,4728,4729],{"class":434},"[0-9a-zA-Z\\-_]",[369,4731,4732],{"class":381},"+$",[369,4734,4735],{"class":392},"\u002F",[369,4737,396],{"class":385},[10,4739,4740,4741,4744],{},"Kodun ",[20,4742,4743],{},"ne"," yaptığını açıklamak için bir yoruma ihtiyaç varsa, bu genelde kodun daha net olabileceğinin işareti.",[28,4746,4748],{"id":4747},"_5-hataları-ele-al","5. Hataları ele al",[10,4750,4751],{},"Ağlar kopuyor, kullanıcılar anlamsız şeyler yazıyor, API'ler beklenmedik cevaplar dönüyor. Bunu yok saymak, öngörülemez davranışa ve neyin ters gittiğini anlayamayan kullanıcılara yol açıyor.",[10,4753,4754],{},"Ne kadar hata yönetiminin yeterli olduğu bağlama bağlı, ama makul bir kural şu: hatayı, ya toparlanabildiğin ya da kullanıcıya veya sisteme işe yarar bir şey söyleyebildiğin yerde ele al.",[361,4756,4758],{"className":363,"code":4757,"language":365,"meta":123,"style":123},"function getUserData(userId) {\n  const data = api.fetch(userId); \u002F\u002F What if api.fetch fails?\n  return data.name;\n}\n",[196,4759,4760,4774,4794,4801],{"__ignoreMap":123},[369,4761,4762,4764,4767,4769,4772],{"class":371,"line":372},[369,4763,4205],{"class":381},[369,4765,4766],{"class":414}," getUserData",[369,4768,418],{"class":385},[369,4770,4771],{"class":421},"userId",[369,4773,425],{"class":385},[369,4775,4776,4778,4780,4782,4785,4788,4791],{"class":371,"line":124},[369,4777,431],{"class":381},[369,4779,435],{"class":434},[369,4781,438],{"class":381},[369,4783,4784],{"class":385}," api.",[369,4786,4787],{"class":414},"fetch",[369,4789,4790],{"class":385},"(userId); ",[369,4792,4793],{"class":375},"\u002F\u002F What if api.fetch fails?\n",[369,4795,4796,4798],{"class":371,"line":399},[369,4797,715],{"class":381},[369,4799,4800],{"class":385}," data.name;\n",[369,4802,4803],{"class":371,"line":405},[369,4804,724],{"class":385},[10,4806,4807],{},"Buna daha yakın bir şey:",[361,4809,4811],{"className":363,"code":4810,"language":365,"meta":123,"style":123},"async function getUserData(userId) {\n  try {\n    const response = await api.fetch(userId);\n    if (!response.ok) {\n      throw new Error(`Failed to fetch user data: ${response.statusText}`);\n    }\n    const data = await response.json();\n    return data.name;\n  } catch (error) {\n    console.error(`Error fetching user ${userId}:`, error);\n    \u002F\u002F Potentially return a default value, or re-throw a custom error\n    throw new CustomApplicationError(\"User data unavailable\");\n  }\n}\n",[196,4812,4813,4828,4835,4853,4865,4891,4895,4912,4918,4928,4948,4953,4970,4974],{"__ignoreMap":123},[369,4814,4815,4818,4820,4822,4824,4826],{"class":371,"line":372},[369,4816,4817],{"class":381},"async",[369,4819,411],{"class":381},[369,4821,4766],{"class":414},[369,4823,418],{"class":385},[369,4825,4771],{"class":421},[369,4827,425],{"class":385},[369,4829,4830,4833],{"class":371,"line":124},[369,4831,4832],{"class":381},"  try",[369,4834,541],{"class":385},[369,4836,4837,4839,4842,4844,4846,4848,4850],{"class":371,"line":399},[369,4838,2565],{"class":381},[369,4840,4841],{"class":434}," response",[369,4843,438],{"class":381},[369,4845,555],{"class":381},[369,4847,4784],{"class":385},[369,4849,4787],{"class":414},[369,4851,4852],{"class":385},"(userId);\n",[369,4854,4855,4858,4860,4862],{"class":371,"line":405},[369,4856,4857],{"class":381},"    if",[369,4859,570],{"class":385},[369,4861,573],{"class":381},[369,4863,4864],{"class":385},"response.ok) {\n",[369,4866,4867,4870,4872,4874,4876,4879,4882,4884,4887,4889],{"class":371,"line":428},[369,4868,4869],{"class":381},"      throw",[369,4871,585],{"class":381},[369,4873,588],{"class":414},[369,4875,418],{"class":385},[369,4877,4878],{"class":392},"`Failed to fetch user data: ${",[369,4880,4881],{"class":385},"response",[369,4883,599],{"class":392},[369,4885,4886],{"class":385},"statusText",[369,4888,605],{"class":392},[369,4890,449],{"class":385},[369,4892,4893],{"class":371,"line":452},[369,4894,684],{"class":385},[369,4896,4897,4899,4901,4903,4905,4908,4910],{"class":371,"line":470},[369,4898,2565],{"class":381},[369,4900,435],{"class":434},[369,4902,438],{"class":381},[369,4904,555],{"class":381},[369,4906,4907],{"class":385}," response.",[369,4909,629],{"class":414},[369,4911,632],{"class":385},[369,4913,4914,4916],{"class":371,"line":489},[369,4915,2420],{"class":381},[369,4917,4800],{"class":385},[369,4919,4920,4923,4925],{"class":371,"line":494},[369,4921,4922],{"class":385},"  } ",[369,4924,641],{"class":381},[369,4926,4927],{"class":385}," (error) {\n",[369,4929,4930,4933,4935,4937,4940,4942,4945],{"class":371,"line":508},[369,4931,4932],{"class":385},"    console.",[369,4934,919],{"class":414},[369,4936,418],{"class":385},[369,4938,4939],{"class":392},"`Error fetching user ${",[369,4941,4771],{"class":385},[369,4943,4944],{"class":392},"}:`",[369,4946,4947],{"class":385},", error);\n",[369,4949,4950],{"class":371,"line":522},[369,4951,4952],{"class":375},"    \u002F\u002F Potentially return a default value, or re-throw a custom error\n",[369,4954,4955,4958,4960,4963,4965,4968],{"class":371,"line":535},[369,4956,4957],{"class":381},"    throw",[369,4959,585],{"class":381},[369,4961,4962],{"class":414}," CustomApplicationError",[369,4964,418],{"class":385},[369,4966,4967],{"class":392},"\"User data unavailable\"",[369,4969,449],{"class":385},[369,4971,4972],{"class":371,"line":544},[369,4973,690],{"class":385},[369,4975,4976],{"class":371,"line":564},[369,4977,724],{"class":385},[28,4979,4981],{"id":4980},"_6-tutarlı-kal","6. Tutarlı kal",[10,4983,4984,4985,4988,4989,4992],{},"Tutarlılık en çok büyük ekiplerde önemli: kod tabanı boyunca aynı isimlendirme kuralları, aynı biçimlendirme, aynı mimari örüntüler ve tasarım tercihleri. Bir yerde ",[196,4986,4987],{},"camelCase",", başka bir yerde ",[196,4990,4991],{},"snake_case"," kullanıldığında okumak sebepsiz yere zorlaşıyor.",[10,4994,4995],{},"ESLint ve Prettier gibi araçlar bunun çoğunu otomatik hallediyor.",[361,4997,4999],{"className":363,"code":4998,"language":365,"meta":123,"style":123},"let firstName;\nconst user_id = 123;\nfunction getProducts() {\n  \u002F* ... *\u002F\n}\nconst fetchOrders = async () => {\n  \u002F* ... *\u002F\n};\n",[196,5000,5001,5008,5022,5031,5035,5039,5057,5061],{"__ignoreMap":123},[369,5002,5003,5005],{"class":371,"line":372},[369,5004,4194],{"class":381},[369,5006,5007],{"class":385}," firstName;\n",[369,5009,5010,5012,5015,5017,5020],{"class":371,"line":124},[369,5011,908],{"class":381},[369,5013,5014],{"class":434}," user_id",[369,5016,438],{"class":381},[369,5018,5019],{"class":434}," 123",[369,5021,396],{"class":385},[369,5023,5024,5026,5029],{"class":371,"line":399},[369,5025,4205],{"class":381},[369,5027,5028],{"class":414}," getProducts",[369,5030,505],{"class":385},[369,5032,5033],{"class":371,"line":405},[369,5034,4224],{"class":375},[369,5036,5037],{"class":371,"line":428},[369,5038,724],{"class":385},[369,5040,5041,5043,5046,5048,5051,5053,5055],{"class":371,"line":452},[369,5042,908],{"class":381},[369,5044,5045],{"class":414}," fetchOrders",[369,5047,438],{"class":381},[369,5049,5050],{"class":381}," async",[369,5052,1272],{"class":385},[369,5054,1275],{"class":381},[369,5056,541],{"class":385},[369,5058,5059],{"class":371,"line":470},[369,5060,4224],{"class":375},[369,5062,5063],{"class":371,"line":489},[369,5064,2846],{"class":385},[10,5066,5067],{},"Buna karşılık:",[361,5069,5071],{"className":363,"code":5070,"language":365,"meta":123,"style":123},"let firstName;\nconst userId = 123;\nfunction getProducts() {\n  \u002F* ... *\u002F\n}\nasync function fetchOrders() {\n  \u002F* ... *\u002F\n}\n",[196,5072,5073,5079,5092,5100,5104,5108,5118,5122],{"__ignoreMap":123},[369,5074,5075,5077],{"class":371,"line":372},[369,5076,4194],{"class":381},[369,5078,5007],{"class":385},[369,5080,5081,5083,5086,5088,5090],{"class":371,"line":124},[369,5082,908],{"class":381},[369,5084,5085],{"class":434}," userId",[369,5087,438],{"class":381},[369,5089,5019],{"class":434},[369,5091,396],{"class":385},[369,5093,5094,5096,5098],{"class":371,"line":399},[369,5095,4205],{"class":381},[369,5097,5028],{"class":414},[369,5099,505],{"class":385},[369,5101,5102],{"class":371,"line":405},[369,5103,4224],{"class":375},[369,5105,5106],{"class":371,"line":428},[369,5107,724],{"class":385},[369,5109,5110,5112,5114,5116],{"class":371,"line":452},[369,5111,4817],{"class":381},[369,5113,411],{"class":381},[369,5115,5045],{"class":414},[369,5117,505],{"class":385},[369,5119,5120],{"class":371,"line":470},[369,5121,4224],{"class":375},[369,5123,5124],{"class":371,"line":489},[369,5125,724],{"class":385},[10,5127,5128],{},"Tutarlı bir kod tabanı, elli kişi yazmış olsa bile tek kişi yazmış gibi okunuyor. Bu da dosyalar arasında gezinmenin yükünü azaltıyor.",[28,5130,5132],{"id":5131},"_7-test-yaz","7. Test yaz",[10,5134,5135],{},"Test yazmak angarya gibi gelebiliyor. Aynı zamanda nefesini tutmadan yeniden düzenlemeni ve yayına almanı sağlayan şey. Yapay zeka destekli geliştirmede bunun önemi azalmıyor, artıyor: üretilen kodun doğru entegre olup olmadığını ve başka bir yeri bozup bozmadığını testler söylüyor.",[10,5137,5138],{},"Küçük bir değişiklik yaptığını ve uygulamanın alakasız bir kısmının devrildiğini düşün. Testler yoksa bu uzun bir hata ayıklama seansı. Testler varsa kırılan durum sana problemi gösteriyor.",[361,5140,5142],{"className":363,"code":5141,"language":365,"meta":123,"style":123},"\u002F\u002F function to test\nfunction add(a, b) {\n  return a + b;\n}\n\n\u002F\u002F test file\ndescribe(\"add function\", () => {\n  test(\"should add two positive numbers correctly\", () => {\n    expect(add(1, 2)).toBe(3);\n  });\n\n  test(\"should handle negative numbers\", () => {\n    expect(add(-1, 5)).toBe(4);\n  });\n\n  test(\"should return zero when adding opposite numbers\", () => {\n    expect(add(-3, 3)).toBe(0);\n  });\n});\n",[196,5143,5144,5149,5166,5179,5183,5187,5192,5209,5225,5257,5262,5266,5281,5311,5315,5319,5334,5362,5366],{"__ignoreMap":123},[369,5145,5146],{"class":371,"line":372},[369,5147,5148],{"class":375},"\u002F\u002F function to test\n",[369,5150,5151,5153,5156,5158,5160,5162,5164],{"class":371,"line":124},[369,5152,4205],{"class":381},[369,5154,5155],{"class":414}," add",[369,5157,418],{"class":385},[369,5159,4018],{"class":421},[369,5161,273],{"class":385},[369,5163,4217],{"class":421},[369,5165,425],{"class":385},[369,5167,5168,5170,5173,5176],{"class":371,"line":399},[369,5169,715],{"class":381},[369,5171,5172],{"class":385}," a ",[369,5174,5175],{"class":381},"+",[369,5177,5178],{"class":385}," b;\n",[369,5180,5181],{"class":371,"line":405},[369,5182,724],{"class":385},[369,5184,5185],{"class":371,"line":428},[369,5186,402],{"emptyLinePlaceholder":138},[369,5188,5189],{"class":371,"line":452},[369,5190,5191],{"class":375},"\u002F\u002F test file\n",[369,5193,5194,5197,5199,5202,5205,5207],{"class":371,"line":470},[369,5195,5196],{"class":414},"describe",[369,5198,418],{"class":385},[369,5200,5201],{"class":392},"\"add function\"",[369,5203,5204],{"class":385},", () ",[369,5206,1275],{"class":381},[369,5208,541],{"class":385},[369,5210,5211,5214,5216,5219,5221,5223],{"class":371,"line":489},[369,5212,5213],{"class":414},"  test",[369,5215,418],{"class":385},[369,5217,5218],{"class":392},"\"should add two positive numbers correctly\"",[369,5220,5204],{"class":385},[369,5222,1275],{"class":381},[369,5224,541],{"class":385},[369,5226,5227,5230,5232,5235,5237,5239,5241,5244,5247,5250,5252,5255],{"class":371,"line":494},[369,5228,5229],{"class":414},"    expect",[369,5231,418],{"class":385},[369,5233,5234],{"class":414},"add",[369,5236,418],{"class":385},[369,5238,3080],{"class":434},[369,5240,273],{"class":385},[369,5242,5243],{"class":434},"2",[369,5245,5246],{"class":385},")).",[369,5248,5249],{"class":414},"toBe",[369,5251,418],{"class":385},[369,5253,5254],{"class":434},"3",[369,5256,449],{"class":385},[369,5258,5259],{"class":371,"line":508},[369,5260,5261],{"class":385},"  });\n",[369,5263,5264],{"class":371,"line":522},[369,5265,402],{"emptyLinePlaceholder":138},[369,5267,5268,5270,5272,5275,5277,5279],{"class":371,"line":535},[369,5269,5213],{"class":414},[369,5271,418],{"class":385},[369,5273,5274],{"class":392},"\"should handle negative numbers\"",[369,5276,5204],{"class":385},[369,5278,1275],{"class":381},[369,5280,541],{"class":385},[369,5282,5283,5285,5287,5289,5291,5294,5296,5298,5300,5302,5304,5306,5309],{"class":371,"line":544},[369,5284,5229],{"class":414},[369,5286,418],{"class":385},[369,5288,5234],{"class":414},[369,5290,418],{"class":385},[369,5292,5293],{"class":381},"-",[369,5295,3080],{"class":434},[369,5297,273],{"class":385},[369,5299,3126],{"class":434},[369,5301,5246],{"class":385},[369,5303,5249],{"class":414},[369,5305,418],{"class":385},[369,5307,5308],{"class":434},"4",[369,5310,449],{"class":385},[369,5312,5313],{"class":371,"line":564},[369,5314,5261],{"class":385},[369,5316,5317],{"class":371,"line":579},[369,5318,402],{"emptyLinePlaceholder":138},[369,5320,5321,5323,5325,5328,5330,5332],{"class":371,"line":610},[369,5322,5213],{"class":414},[369,5324,418],{"class":385},[369,5326,5327],{"class":392},"\"should return zero when adding opposite numbers\"",[369,5329,5204],{"class":385},[369,5331,1275],{"class":381},[369,5333,541],{"class":385},[369,5335,5336,5338,5340,5342,5344,5346,5348,5350,5352,5354,5356,5358,5360],{"class":371,"line":616},[369,5337,5229],{"class":414},[369,5339,418],{"class":385},[369,5341,5234],{"class":414},[369,5343,418],{"class":385},[369,5345,5293],{"class":381},[369,5347,5254],{"class":434},[369,5349,273],{"class":385},[369,5351,5254],{"class":434},[369,5353,5246],{"class":385},[369,5355,5249],{"class":414},[369,5357,418],{"class":385},[369,5359,1377],{"class":434},[369,5361,449],{"class":385},[369,5363,5364],{"class":371,"line":635},[369,5365,5261],{"class":385},[369,5367,5368],{"class":371,"line":647},[369,5369,2198],{"class":385},[28,5371,5373],{"id":5372},"_8-sadelik","8. Sadelik",[10,5375,5376],{},"Yukarıdakilerin hepsi tek bir şeye iniyor: basit ve okunması kolay kod yazmak. Dolambaçlı kod hata çekiyor ve bakıma direniyor. Gereksinimi karşılayan en basit çözümü hedefle.",[361,5378,5380],{"className":363,"code":5379,"language":365,"meta":123,"style":123},"function calculateTotal(items) {\n  let total = 0;\n  for (let i = 0; i \u003C items.length; i++) {\n    let item = items[i];\n    if (item.type === \"premium\") {\n      total += item.price * 1.1; \u002F\u002F 10% premium fee\n    } else {\n      total += item.price;\n    }\n  }\n  return total;\n}\n",[196,5381,5382,5396,5411,5445,5458,5472,5494,5503,5512,5516,5520,5527],{"__ignoreMap":123},[369,5383,5384,5386,5389,5391,5394],{"class":371,"line":372},[369,5385,4205],{"class":381},[369,5387,5388],{"class":414}," calculateTotal",[369,5390,418],{"class":385},[369,5392,5393],{"class":421},"items",[369,5395,425],{"class":385},[369,5397,5398,5401,5404,5406,5409],{"class":371,"line":124},[369,5399,5400],{"class":381},"  let",[369,5402,5403],{"class":385}," total ",[369,5405,514],{"class":381},[369,5407,5408],{"class":434}," 0",[369,5410,396],{"class":385},[369,5412,5413,5416,5418,5420,5423,5425,5427,5430,5432,5435,5438,5441,5443],{"class":371,"line":399},[369,5414,5415],{"class":381},"  for",[369,5417,570],{"class":385},[369,5419,4194],{"class":381},[369,5421,5422],{"class":385}," i ",[369,5424,514],{"class":381},[369,5426,5408],{"class":434},[369,5428,5429],{"class":385},"; i ",[369,5431,739],{"class":381},[369,5433,5434],{"class":385}," items.",[369,5436,5437],{"class":434},"length",[369,5439,5440],{"class":385},"; i",[369,5442,4691],{"class":381},[369,5444,425],{"class":385},[369,5446,5447,5450,5453,5455],{"class":371,"line":405},[369,5448,5449],{"class":381},"    let",[369,5451,5452],{"class":385}," item ",[369,5454,514],{"class":381},[369,5456,5457],{"class":385}," items[i];\n",[369,5459,5460,5462,5465,5467,5470],{"class":371,"line":428},[369,5461,4857],{"class":381},[369,5463,5464],{"class":385}," (item.type ",[369,5466,2825],{"class":381},[369,5468,5469],{"class":392}," \"premium\"",[369,5471,425],{"class":385},[369,5473,5474,5477,5480,5483,5485,5488,5491],{"class":371,"line":452},[369,5475,5476],{"class":385},"      total ",[369,5478,5479],{"class":381},"+=",[369,5481,5482],{"class":385}," item.price ",[369,5484,4527],{"class":381},[369,5486,5487],{"class":434}," 1.1",[369,5489,5490],{"class":385},"; ",[369,5492,5493],{"class":375},"\u002F\u002F 10% premium fee\n",[369,5495,5496,5498,5501],{"class":371,"line":470},[369,5497,638],{"class":385},[369,5499,5500],{"class":381},"else",[369,5502,541],{"class":385},[369,5504,5505,5507,5509],{"class":371,"line":489},[369,5506,5476],{"class":385},[369,5508,5479],{"class":381},[369,5510,5511],{"class":385}," item.price;\n",[369,5513,5514],{"class":371,"line":494},[369,5515,684],{"class":385},[369,5517,5518],{"class":371,"line":508},[369,5519,690],{"class":385},[369,5521,5522,5524],{"class":371,"line":522},[369,5523,715],{"class":381},[369,5525,5526],{"class":385}," total;\n",[369,5528,5529],{"class":371,"line":535},[369,5530,724],{"class":385},[10,5532,5533],{},"Aynı şey, takip etmesi daha kolay hâli:",[361,5535,5537],{"className":363,"code":5536,"language":365,"meta":123,"style":123},"const calculateItemPrice = (item) => {\n  if (item.type === \"premium\") {\n    return item.price * 1.1;\n  }\n  return item.price;\n};\n\nfunction calculateTotal(items) {\n  return items.reduce((acc, item) => acc + calculateItemPrice(item), 0);\n}\n",[196,5538,5539,5559,5571,5583,5587,5593,5597,5601,5613,5648],{"__ignoreMap":123},[369,5540,5541,5543,5546,5548,5550,5553,5555,5557],{"class":371,"line":372},[369,5542,908],{"class":381},[369,5544,5545],{"class":414}," calculateItemPrice",[369,5547,438],{"class":381},[369,5549,570],{"class":385},[369,5551,5552],{"class":421},"item",[369,5554,1797],{"class":385},[369,5556,1275],{"class":381},[369,5558,541],{"class":385},[369,5560,5561,5563,5565,5567,5569],{"class":371,"line":124},[369,5562,4507],{"class":381},[369,5564,5464],{"class":385},[369,5566,2825],{"class":381},[369,5568,5469],{"class":392},[369,5570,425],{"class":385},[369,5572,5573,5575,5577,5579,5581],{"class":371,"line":399},[369,5574,2420],{"class":381},[369,5576,5482],{"class":385},[369,5578,4527],{"class":381},[369,5580,5487],{"class":434},[369,5582,396],{"class":385},[369,5584,5585],{"class":371,"line":405},[369,5586,690],{"class":385},[369,5588,5589,5591],{"class":371,"line":428},[369,5590,715],{"class":381},[369,5592,5511],{"class":385},[369,5594,5595],{"class":371,"line":452},[369,5596,2846],{"class":385},[369,5598,5599],{"class":371,"line":470},[369,5600,402],{"emptyLinePlaceholder":138},[369,5602,5603,5605,5607,5609,5611],{"class":371,"line":489},[369,5604,4205],{"class":381},[369,5606,5388],{"class":414},[369,5608,418],{"class":385},[369,5610,5393],{"class":421},[369,5612,425],{"class":385},[369,5614,5615,5617,5619,5621,5623,5626,5628,5630,5632,5634,5637,5639,5641,5644,5646],{"class":371,"line":494},[369,5616,715],{"class":381},[369,5618,5434],{"class":385},[369,5620,3530],{"class":414},[369,5622,1791],{"class":385},[369,5624,5625],{"class":421},"acc",[369,5627,273],{"class":385},[369,5629,5552],{"class":421},[369,5631,1797],{"class":385},[369,5633,1275],{"class":381},[369,5635,5636],{"class":385}," acc ",[369,5638,5175],{"class":381},[369,5640,5545],{"class":414},[369,5642,5643],{"class":385},"(item), ",[369,5645,1377],{"class":434},[369,5647,449],{"class":385},[369,5649,5650],{"class":371,"line":508},[369,5651,724],{"class":385},[10,5653,5654],{},"Sadelik kodu aptallaştırmak değil. Bir yıl sonra da anlayacağın bir şey yazmak.",[28,5656,5658],{"id":5657},"zanaat-ortadan-kalkmıyor","Zanaat ortadan kalkmıyor",[10,5660,5661],{},"Yeni araçlar gelmeye devam ediyor ve yapay zeka çok şeyi değiştirdi, ama zaten yaptığın şeyi büyütüyor; onu iyi yapma ihtiyacını ortadan kaldırmıyor.",[10,5663,5664],{},"Temiz kod bir kural kitabından çok bir alışkanlık. Meslektaşlarına, kullanıcılarına ve bu dosyayı on sekiz ay sonra açacak olan sana gösterilen bir nezaket.",[1341,5666,5667],{},"html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}",{"title":123,"searchDepth":124,"depth":124,"links":5669},[5670,5671,5672,5673,5674,5675,5676,5677,5678,5679],{"id":4167,"depth":124,"text":4168},{"id":4180,"depth":124,"text":4181},{"id":4280,"depth":124,"text":4281},{"id":4474,"depth":124,"text":4475},{"id":4666,"depth":124,"text":4667},{"id":4747,"depth":124,"text":4748},{"id":4980,"depth":124,"text":4981},{"id":5131,"depth":124,"text":5132},{"id":5372,"depth":124,"text":5373},{"id":5657,"depth":124,"text":5658},"2025-09-16","Yapay zeka senin yerine yeniden düzenleyebiliyor; bu temelleri gereksiz kılmıyor, daha kullanışlı yapıyor. Kod tabanını çalışılabilir tutan sekiz pratik.",{},"\u002Fblog\u002Ftemiz-kod-neden-hala-onemli",{"title":4162,"description":5681},"blog\u002Ftemiz-kod-neden-hala-onemli",[5687,5688,5689,5690],"clean code","software engineering","best practices","programming","why-clean-code-still-matters-in-2025","ebRG0lY_FtnKOrWqyBM4iE91aiNmkFCqLQpvItiGVP8",{"id":5694,"title":5695,"body":5696,"category":3810,"date":7339,"description":7340,"draft":135,"extension":136,"meta":7341,"navigation":138,"path":7342,"seo":7343,"stem":7344,"tags":7345,"translationKey":7348,"videoId":148,"__hash__":7349},"blog_tr\u002Fblog\u002Fvue-js-projelerinde-guvenlik-riskleri.md","Vue.js projelerindeki güvenlik riskleri ve kapatma yolları",{"type":7,"value":5697,"toc":7331},[5698,5701,5704,5707,5711,5714,5718,5721,5724,5742,5745,5799,5806,5812,5920,5923,5933,6129,6133,6136,6139,6181,6184,6187,6190,6394,6397,6401,6407,6418,7071,7074,7078,7081,7088,7091,7102,7318,7322,7328],[10,5699,5700],{},"Yeni bir Vue uygulamasını yayına almak genelde küçük bir huzursuzlukla geliyor. Kullanıcı verisini açığa çıkarabilecek ya da uygulamayı tehlikeye atabilecek bir şeyi atladım mı?",[10,5702,5703],{},"Arayüze, performansa ve özelliklere saatler harcıyoruz; güvenlik çoğu zaman sıranın sonunda kalıyor. Gerekçe genelde şu: \"sonuçta frontend, ne olabilir ki?\" Meğer epey şey olabiliyor. Vue'nun kendisi güvenli, ama onu nasıl kullandığımız ve çevresine ne çektiğimiz açıkların çıktığı yer.",[10,5705,5706],{},"Aşağıda Vue projelerinde sık görülen beş risk ve her biri için ne yapılacağı var.",[28,5708,5710],{"id":5709},"frontend-güvenliği-neden-önemli","Frontend güvenliği neden önemli",[10,5712,5713],{},"Güvenliğin ağırlıklı olarak backend işi olduğunu savunabilirsin; kimlik doğrulamayı, veritabanı erişimini ve hassas her şeyi sunucu yönetiyor. Backend güvenliği kritik, doğru. Ama frontend, kullanıcının uygulamanla doğrudan temas ettiği yüzey ve ele geçirildiğinde saldırganlar oltalama ya da tuş kaydediciyle kimlik bilgisi çalabiliyor, bir mağazadaki fiyat gibi verileri değiştirebiliyor, API'n yeterince doğrulama yapmıyorsa kullanıcının hiç istemediği eylemleri tetikleyebiliyor ya da doğrudan siteyi tahrif edebiliyor.",[28,5715,5717],{"id":5716},"_1-siteler-arası-betik-çalıştırma","1. Siteler arası betik çalıştırma",[10,5719,5720],{},"XSS, bir saldırganın genelde JavaScript olan bir betiği enjekte etmesi ve bu betiğin kurbanın tarayıcısında çalışması. Oradan çerezleri ve oturum jetonlarını alabiliyor ya da sayfayı yeniden yazabiliyor.",[10,5722,5723],{},"Genelde uygulama, kullanıcı girdisini temizlemeden doğrudan DOM'a bastığında oluyor. Birinin şunu gönderdiği bir yorum bölümü düşün:",[361,5725,5727],{"className":972,"code":5726,"language":974,"meta":123,"style":123},"\u003Cp>This is a great article!\u003C\u002Fp>\n",[196,5728,5729],{"__ignoreMap":123},[369,5730,5731,5733,5735,5738,5740],{"class":371,"line":372},[369,5732,739],{"class":385},[369,5734,10],{"class":742},[369,5736,5737],{"class":385},">This is a great article!\u003C\u002F",[369,5739,10],{"class":742},[369,5741,746],{"class":385},[10,5743,5744],{},"Zararsız. Şimdi buna bak:",[361,5746,5748],{"className":972,"code":5747,"language":974,"meta":123,"style":123},"\u003Cp>\n  This is a great article!\n  \u003Cscript>\n    alert(\"You've been XSSed!\");\n  \u003C\u002Fscript>\n\u003C\u002Fp>\n",[196,5749,5750,5758,5763,5771,5783,5791],{"__ignoreMap":123},[369,5751,5752,5754,5756],{"class":371,"line":372},[369,5753,739],{"class":385},[369,5755,10],{"class":742},[369,5757,746],{"class":385},[369,5759,5760],{"class":371,"line":124},[369,5761,5762],{"class":385},"  This is a great article!\n",[369,5764,5765,5767,5769],{"class":371,"line":399},[369,5766,751],{"class":385},[369,5768,880],{"class":742},[369,5770,746],{"class":385},[369,5772,5773,5776,5778,5781],{"class":371,"line":405},[369,5774,5775],{"class":414},"    alert",[369,5777,418],{"class":385},[369,5779,5780],{"class":392},"\"You've been XSSed!\"",[369,5782,449],{"class":385},[369,5784,5785,5787,5789],{"class":371,"line":428},[369,5786,856],{"class":385},[369,5788,880],{"class":742},[369,5790,746],{"class":385},[369,5792,5793,5795,5797],{"class":371,"line":452},[369,5794,865],{"class":385},[369,5796,10],{"class":742},[369,5798,746],{"class":385},[10,5800,5801,5802,5805],{},"Bileşenin bu temizlenmemiş girdiyi ",[196,5803,5804],{},"v-html"," ile bağlıyorsa, betik yorumu gören herkeste çalışıyor.",[10,5807,5808,5809,5811],{},"Akılda tutulacak kural: güvenilmeyen kullanıcı içeriğiyle asla ",[196,5810,5804],{}," kullanma. Standart ara değerlemede Vue, HTML'i varsayılan olarak kaçırıyor.",[361,5813,5815],{"className":972,"code":5814,"language":974,"meta":123,"style":123},"\u003C!-- Safe: Vue escapes the HTML -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>{{ userComment }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue';\nconst userComment = ref('\u003Cscript>alert(\"XSS attempt!\");\u003C\u002Fscript>');\n\u003C\u002Fscript>\n",[196,5816,5817,5822,5830,5838,5851,5859,5867,5871,5881,5894,5912],{"__ignoreMap":123},[369,5818,5819],{"class":371,"line":372},[369,5820,5821],{"class":375},"\u003C!-- Safe: Vue escapes the HTML -->\n",[369,5823,5824,5826,5828],{"class":371,"line":124},[369,5825,739],{"class":385},[369,5827,743],{"class":742},[369,5829,746],{"class":385},[369,5831,5832,5834,5836],{"class":371,"line":399},[369,5833,751],{"class":385},[369,5835,754],{"class":742},[369,5837,746],{"class":385},[369,5839,5840,5842,5844,5847,5849],{"class":371,"line":405},[369,5841,761],{"class":385},[369,5843,10],{"class":742},[369,5845,5846],{"class":385},">{{ userComment }}\u003C\u002F",[369,5848,10],{"class":742},[369,5850,746],{"class":385},[369,5852,5853,5855,5857],{"class":371,"line":428},[369,5854,856],{"class":385},[369,5856,754],{"class":742},[369,5858,746],{"class":385},[369,5860,5861,5863,5865],{"class":371,"line":452},[369,5862,865],{"class":385},[369,5864,743],{"class":742},[369,5866,746],{"class":385},[369,5868,5869],{"class":371,"line":470},[369,5870,402],{"emptyLinePlaceholder":138},[369,5872,5873,5875,5877,5879],{"class":371,"line":489},[369,5874,739],{"class":385},[369,5876,880],{"class":742},[369,5878,883],{"class":434},[369,5880,746],{"class":385},[369,5882,5883,5885,5887,5889,5892],{"class":371,"line":494},[369,5884,382],{"class":381},[369,5886,1228],{"class":385},[369,5888,389],{"class":381},[369,5890,5891],{"class":392}," 'vue'",[369,5893,396],{"class":385},[369,5895,5896,5898,5901,5903,5905,5907,5910],{"class":371,"line":508},[369,5897,908],{"class":381},[369,5899,5900],{"class":434}," userComment",[369,5902,438],{"class":381},[369,5904,441],{"class":414},[369,5906,418],{"class":385},[369,5908,5909],{"class":392},"'\u003Cscript>alert(\"XSS attempt!\");\u003C\u002Fscript>'",[369,5911,449],{"class":385},[369,5913,5914,5916,5918],{"class":371,"line":522},[369,5915,865],{"class":385},[369,5917,880],{"class":742},[369,5919,746],{"class":385},[10,5921,5922],{},"Bu, script etiketini çalıştırılabilir kod olarak değil düz metin olarak basıyor.",[10,5924,5925,5926,5929,5930,5932],{},"Gerçekten dinamik HTML basman gerekiyorsa, örneğin zengin metin düzenleyiciden geliyorsa, girdiyi önce backend'de ",[196,5927,5928],{},"DOMPurify"," gibi bir kütüphaneyle temizle ve saklamadan önce bunu yap; ikinci katman olarak ",[196,5931,5804],{},"'e bir şey geçirmeden önce frontend'de de temizle.",[361,5934,5936],{"className":972,"code":5935,"language":974,"meta":123,"style":123},"\u003C!-- Use v-html ONLY with trusted, sanitized content -->\n\u003Ctemplate>\n  \u003Cdiv v-html=\"sanitizedUserContent\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref, computed } from 'vue';\n\u002F\u002F In a real app, you'd get this from a backend API after sanitization\nconst rawUserContent = ref('\u003Cp>Hello \u003Cb>World\u003C\u002Fb>! \u003Cscript>alert(\"No!\");\u003C\u002Fscript>\u003C\u002Fp>');\n\n\u002F\u002F For demonstration, let's pretend this is sanitized\n\u002F\u002F In a real app, you'd use a proper library like DOMPurify\nconst sanitizedUserContent = computed(() => {\n  \u002F\u002F This is a VERY simplistic and insecure \"sanitization\" for example purposes.\n  \u002F\u002F DO NOT use this in production. Use a library like DOMPurify!\n  return rawUserContent.value.replace(\u002F\u003Cscript.*?>.*?\u003C\\\u002Fscript>\u002Fg, '');\n});\n\u003C\u002Fscript>\n",[196,5937,5938,5943,5951,5971,5979,5983,5993,6006,6011,6029,6033,6038,6043,6062,6067,6072,6117,6121],{"__ignoreMap":123},[369,5939,5940],{"class":371,"line":372},[369,5941,5942],{"class":375},"\u003C!-- Use v-html ONLY with trusted, sanitized content -->\n",[369,5944,5945,5947,5949],{"class":371,"line":124},[369,5946,739],{"class":385},[369,5948,743],{"class":742},[369,5950,746],{"class":385},[369,5952,5953,5955,5957,5960,5962,5965,5967,5969],{"class":371,"line":399},[369,5954,751],{"class":385},[369,5956,754],{"class":742},[369,5958,5959],{"class":434}," v-html",[369,5961,514],{"class":385},[369,5963,5964],{"class":392},"\"sanitizedUserContent\"",[369,5966,1007],{"class":385},[369,5968,754],{"class":742},[369,5970,746],{"class":385},[369,5972,5973,5975,5977],{"class":371,"line":405},[369,5974,865],{"class":385},[369,5976,743],{"class":742},[369,5978,746],{"class":385},[369,5980,5981],{"class":371,"line":428},[369,5982,402],{"emptyLinePlaceholder":138},[369,5984,5985,5987,5989,5991],{"class":371,"line":452},[369,5986,739],{"class":385},[369,5988,880],{"class":742},[369,5990,883],{"class":434},[369,5992,746],{"class":385},[369,5994,5995,5997,6000,6002,6004],{"class":371,"line":470},[369,5996,382],{"class":381},[369,5998,5999],{"class":385}," { ref, computed } ",[369,6001,389],{"class":381},[369,6003,5891],{"class":392},[369,6005,396],{"class":385},[369,6007,6008],{"class":371,"line":489},[369,6009,6010],{"class":375},"\u002F\u002F In a real app, you'd get this from a backend API after sanitization\n",[369,6012,6013,6015,6018,6020,6022,6024,6027],{"class":371,"line":494},[369,6014,908],{"class":381},[369,6016,6017],{"class":434}," rawUserContent",[369,6019,438],{"class":381},[369,6021,441],{"class":414},[369,6023,418],{"class":385},[369,6025,6026],{"class":392},"'\u003Cp>Hello \u003Cb>World\u003C\u002Fb>! \u003Cscript>alert(\"No!\");\u003C\u002Fscript>\u003C\u002Fp>'",[369,6028,449],{"class":385},[369,6030,6031],{"class":371,"line":508},[369,6032,402],{"emptyLinePlaceholder":138},[369,6034,6035],{"class":371,"line":522},[369,6036,6037],{"class":375},"\u002F\u002F For demonstration, let's pretend this is sanitized\n",[369,6039,6040],{"class":371,"line":535},[369,6041,6042],{"class":375},"\u002F\u002F In a real app, you'd use a proper library like DOMPurify\n",[369,6044,6045,6047,6050,6052,6055,6058,6060],{"class":371,"line":544},[369,6046,908],{"class":381},[369,6048,6049],{"class":434}," sanitizedUserContent",[369,6051,438],{"class":381},[369,6053,6054],{"class":414}," computed",[369,6056,6057],{"class":385},"(() ",[369,6059,1275],{"class":381},[369,6061,541],{"class":385},[369,6063,6064],{"class":371,"line":564},[369,6065,6066],{"class":375},"  \u002F\u002F This is a VERY simplistic and insecure \"sanitization\" for example purposes.\n",[369,6068,6069],{"class":371,"line":579},[369,6070,6071],{"class":375},"  \u002F\u002F DO NOT use this in production. Use a library like DOMPurify!\n",[369,6073,6074,6076,6079,6082,6084,6087,6089,6092,6094,6096,6098,6100,6104,6107,6110,6112,6115],{"class":371,"line":610},[369,6075,715],{"class":381},[369,6077,6078],{"class":385}," rawUserContent.value.",[369,6080,6081],{"class":414},"replace",[369,6083,418],{"class":385},[369,6085,6086],{"class":392},"\u002F\u003Cscript",[369,6088,599],{"class":434},[369,6090,6091],{"class":381},"*?",[369,6093,4513],{"class":392},[369,6095,599],{"class":434},[369,6097,6091],{"class":381},[369,6099,739],{"class":392},[369,6101,6103],{"class":6102},"sHaLz","\\\u002F",[369,6105,6106],{"class":392},"script>\u002F",[369,6108,6109],{"class":381},"g",[369,6111,273],{"class":385},[369,6113,6114],{"class":392},"''",[369,6116,449],{"class":385},[369,6118,6119],{"class":371,"line":616},[369,6120,2198],{"class":385},[369,6122,6123,6125,6127],{"class":371,"line":635},[369,6124,865],{"class":385},[369,6126,880],{"class":742},[369,6128,746],{"class":385},[28,6130,6132],{"id":6131},"_2-siteler-arası-istek-sahteciliği","2. Siteler arası istek sahteciliği",[10,6134,6135],{},"CSRF, oturumu açık bir kullanıcıyı istemediği bir eylemi yapmaya kandırıyor. Saldırgan, kullanıcının tarayıcısına senin sunucuna bir istek gönderttiriyor ve kullanıcının zaten kimlik doğrulamış olmasına yaslanıyor.",[10,6137,6138],{},"Bir sekmede bankana giriş yaptığını, başka bir sekmede kötü niyetli bir site açtığını düşün. O site, bankanın para transferi uç noktasına işaret eden gizli bir form ya da bir resim etiketi barındırıyor:",[361,6140,6142],{"className":972,"code":6141,"language":974,"meta":123,"style":123},"\u003C!-- Malicious website's hidden content -->\n\u003Cimg\n  src=\"https:\u002F\u002Fyourbank.com\u002Ftransfer?to=attacker&amount=1000000\"\n  style=\"display:none;\"\n\u002F>\n",[196,6143,6144,6149,6156,6166,6176],{"__ignoreMap":123},[369,6145,6146],{"class":371,"line":372},[369,6147,6148],{"class":375},"\u003C!-- Malicious website's hidden content -->\n",[369,6150,6151,6153],{"class":371,"line":124},[369,6152,739],{"class":385},[369,6154,6155],{"class":742},"img\n",[369,6157,6158,6161,6163],{"class":371,"line":399},[369,6159,6160],{"class":434},"  src",[369,6162,514],{"class":385},[369,6164,6165],{"class":392},"\"https:\u002F\u002Fyourbank.com\u002Ftransfer?to=attacker&amount=1000000\"\n",[369,6167,6168,6171,6173],{"class":371,"line":405},[369,6169,6170],{"class":434},"  style",[369,6172,514],{"class":385},[369,6174,6175],{"class":392},"\"display:none;\"\n",[369,6177,6178],{"class":371,"line":428},[369,6179,6180],{"class":385},"\u002F>\n",[10,6182,6183],{},"Tarayıcı o resmi yüklediğinde oturum çerezlerinle birlikte bir GET isteği gönderiyor. API'nin CSRF koruması yoksa bunu meşru bir istek sayabiliyor.",[10,6185,6186],{},"Yaygın savunma CSRF jetonu. Sunucu tahmin edilemez bir jeton üretip istemciye gönderiyor: bir çerezde, bir meta etiketinde ya da ilk veri yükünde. Vue uygulamandan çıkan ve durum değiştiren her istek, yani POST, PUT ve DELETE, bu jetonu başlıklarda ya da gövdede taşıyor. Backend, jetonu eşleşmeyen her isteği reddediyor.",[10,6188,6189],{},"Pratikte HTTP istemcini jetonu kendiliğinden eklemesi için yapılandırıyorsun.",[361,6191,6193],{"className":363,"code":6192,"language":365,"meta":123,"style":123},"\u002F\u002F Example using Axios (adjust based on how your backend provides the token)\nimport axios from \"axios\";\n\n\u002F\u002F 1. Get the CSRF token (e.g., from a meta tag in your HTML, or a cookie)\nfunction getCsrfToken() {\n  \u002F\u002F This is an example, your backend might provide it differently\n  const tokenElement = document.querySelector('meta[name=\"csrf-token\"]');\n  return tokenElement ? tokenElement.getAttribute(\"content\") : \"\";\n}\n\nconst csrfToken = getCsrfToken();\n\n\u002F\u002F 2. Configure Axios to include the token in requests\nif (csrfToken) {\n  axios.defaults.headers.common[\"X-CSRF-TOKEN\"] = csrfToken;\n}\n\n\u002F\u002F Now, when you make a POST, PUT, or DELETE request, the token will be included\naxios.post(\"\u002Fapi\u002Ftransfer-money\", {\n  recipient: \"myfriend\",\n  amount: 50,\n});\n",[196,6194,6195,6200,6214,6218,6223,6232,6237,6259,6288,6292,6296,6309,6313,6318,6326,6342,6346,6350,6355,6370,6380,6390],{"__ignoreMap":123},[369,6196,6197],{"class":371,"line":372},[369,6198,6199],{"class":375},"\u002F\u002F Example using Axios (adjust based on how your backend provides the token)\n",[369,6201,6202,6204,6207,6209,6212],{"class":371,"line":124},[369,6203,382],{"class":381},[369,6205,6206],{"class":385}," axios ",[369,6208,389],{"class":381},[369,6210,6211],{"class":392}," \"axios\"",[369,6213,396],{"class":385},[369,6215,6216],{"class":371,"line":399},[369,6217,402],{"emptyLinePlaceholder":138},[369,6219,6220],{"class":371,"line":405},[369,6221,6222],{"class":375},"\u002F\u002F 1. Get the CSRF token (e.g., from a meta tag in your HTML, or a cookie)\n",[369,6224,6225,6227,6230],{"class":371,"line":428},[369,6226,4205],{"class":381},[369,6228,6229],{"class":414}," getCsrfToken",[369,6231,505],{"class":385},[369,6233,6234],{"class":371,"line":452},[369,6235,6236],{"class":375},"  \u002F\u002F This is an example, your backend might provide it differently\n",[369,6238,6239,6241,6244,6246,6249,6252,6254,6257],{"class":371,"line":470},[369,6240,431],{"class":381},[369,6242,6243],{"class":434}," tokenElement",[369,6245,438],{"class":381},[369,6247,6248],{"class":385}," document.",[369,6250,6251],{"class":414},"querySelector",[369,6253,418],{"class":385},[369,6255,6256],{"class":392},"'meta[name=\"csrf-token\"]'",[369,6258,449],{"class":385},[369,6260,6261,6263,6266,6268,6271,6274,6276,6279,6281,6283,6286],{"class":371,"line":489},[369,6262,715],{"class":381},[369,6264,6265],{"class":385}," tokenElement ",[369,6267,3550],{"class":381},[369,6269,6270],{"class":385}," tokenElement.",[369,6272,6273],{"class":414},"getAttribute",[369,6275,418],{"class":385},[369,6277,6278],{"class":392},"\"content\"",[369,6280,1797],{"class":385},[369,6282,3556],{"class":381},[369,6284,6285],{"class":392}," \"\"",[369,6287,396],{"class":385},[369,6289,6290],{"class":371,"line":494},[369,6291,724],{"class":385},[369,6293,6294],{"class":371,"line":508},[369,6295,402],{"emptyLinePlaceholder":138},[369,6297,6298,6300,6303,6305,6307],{"class":371,"line":522},[369,6299,908],{"class":381},[369,6301,6302],{"class":434}," csrfToken",[369,6304,438],{"class":381},[369,6306,6229],{"class":414},[369,6308,632],{"class":385},[369,6310,6311],{"class":371,"line":535},[369,6312,402],{"emptyLinePlaceholder":138},[369,6314,6315],{"class":371,"line":544},[369,6316,6317],{"class":375},"\u002F\u002F 2. Configure Axios to include the token in requests\n",[369,6319,6320,6323],{"class":371,"line":564},[369,6321,6322],{"class":381},"if",[369,6324,6325],{"class":385}," (csrfToken) {\n",[369,6327,6328,6331,6334,6337,6339],{"class":371,"line":579},[369,6329,6330],{"class":385},"  axios.defaults.headers.common[",[369,6332,6333],{"class":392},"\"X-CSRF-TOKEN\"",[369,6335,6336],{"class":385},"] ",[369,6338,514],{"class":381},[369,6340,6341],{"class":385}," csrfToken;\n",[369,6343,6344],{"class":371,"line":610},[369,6345,724],{"class":385},[369,6347,6348],{"class":371,"line":616},[369,6349,402],{"emptyLinePlaceholder":138},[369,6351,6352],{"class":371,"line":635},[369,6353,6354],{"class":375},"\u002F\u002F Now, when you make a POST, PUT, or DELETE request, the token will be included\n",[369,6356,6357,6360,6363,6365,6368],{"class":371,"line":647},[369,6358,6359],{"class":385},"axios.",[369,6361,6362],{"class":414},"post",[369,6364,418],{"class":385},[369,6366,6367],{"class":392},"\"\u002Fapi\u002Ftransfer-money\"",[369,6369,2166],{"class":385},[369,6371,6372,6375,6378],{"class":371,"line":658},[369,6373,6374],{"class":385},"  recipient: ",[369,6376,6377],{"class":392},"\"myfriend\"",[369,6379,2356],{"class":385},[369,6381,6382,6385,6388],{"class":371,"line":668},[369,6383,6384],{"class":385},"  amount: ",[369,6386,6387],{"class":434},"50",[369,6389,2356],{"class":385},[369,6391,6392],{"class":371,"line":681},[369,6393,2198],{"class":385},[10,6395,6396],{},"GET istekleri genelde jeton gerektirmiyor, çünkü idempotent olmaları bekleniyor. API'n GET üzerinde durum değiştiriyorsa bu başlı başına ayrı bir sorun.",[28,6398,6400],{"id":6399},"_3-açığı-olan-bağımlılıklar","3. Açığı olan bağımlılıklar",[10,6402,6403,6406],{},[196,6404,6405],{},"node_modules"," klasörün büyük miktarda başkasının kodu. Çoğu sorunsuz ve kapıyı aralamak için tek bir açık paket yetiyor. Ya bağımlı olduğun bir pakette, ya da onun kendi bağımlılık ağacındaki bir şeyde bilinen bir açık var; ya da bir bakımcının hesabı ele geçiriliyor ve kötü niyetli kod bir güncellemeyle geliyor.",[10,6408,6409,6410,6413,6414,6417],{},"Düzenli denetle. Hem ",[196,6411,6412],{},"npm audit"," hem ",[196,6415,6416],{},"yarn audit",", kurulu paketleri bilinen açıklara karşı kontrol ediyor ve genelde düzeltme öneriyor.",[361,6419,6423],{"className":6420,"code":6421,"language":6422,"meta":123,"style":123},"language-bash shiki shiki-themes github-dark-default","    # npm audit report\n\n    lodash  \u003C4.17.21\n    Severity: high\n    Prototype Pollution - https:\u002F\u002Fnpmjs.com\u002Fadvisories\u002F1526\n    No fix available\n\n    axios  \u003C0.21.1\n    Severity: moderate\n    Arbitrary File Write via Decompress - https:\u002F\u002Fnpmjs.com\u002Fadvisories\u002F1608\n    Fix available: `npm install axios@^0.21.1`\n    ```\n\nBir bağımlılık eklemeden önce aktif bakılıp bakılmadığına, kaç kişinin kullandığına, açık güvenlik konusu olup olmadığına ve en son ne zaman güncellendiğine bak.\n\n`package-lock.json` ya da `yarn.lock` dosyanı depoya ekle. Bu dosyalar sürümleri kesinleştiriyor; ekibin ve CI hattın aynı test edilmiş küme üzerinden derliyor.\n\n## 4. Sırların pakete sızması\n\nBu kulağa apaçık geliyor ve yine de düzenli olarak oluyor. Bileşenlere ya da JavaScript dosyalarına gömülen API anahtarları istemci paketine giriyor, yani herkese açık hâle geliyor. Ayrıntılı hata mesajları backend hakkında bilgi sızdırıyor. İstemciye hiç gitmemesi gereken ortam değişkenleri pakete dahil oluyor.\n\nFrontend kodunda asla sır gömme. Frontend'in anahtar isteyen bir API'ye ihtiyacı varsa araya kendi sunucunu koy: Vue uygulaman kendi backend'ini çağırıyor, backend de anahtarla üçüncü taraf API'sini çağırıyor. Yani tarayıcıdan `axios.get('https:\u002F\u002Fapi.thirdparty.com\u002Fdata?apiKey=YOUR_SECRET_KEY')` yapmak yerine istek senin kontrolündeki bir sunucudan geçiyor.\n\nOrtam değişkenleri de aynı dikkati istiyor. Vue CLI, `VUE_APP_` önekli her şeyi istemci paketine açıyor; Vite aynısını `VITE_` ile yapıyor. Oraya API uç noktalarını koy, API anahtarlarını değil. Production sırlarını sürüm kontrolünden uzak tut ve barındırma sağlayıcının yapılandırması üzerinden yönet.\n\nHataları da sızdırmayacak şekilde ele al. Ham backend hataları veritabanı şemasını ya da sunucu yollarını açığa çıkarabiliyor; kullanıcıya genel bir şey göster, ayrıntıyı sunucuda logla.\n\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbutton @click=\"fetchData\">Fetch Data\u003C\u002Fbutton>\n    \u003Cp v-if=\"error\">{{ errorMessage }}\u003C\u002Fp>\n    \u003Cdiv v-if=\"data\">{{ data }}\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\n  import { ref } from \"vue\";\n  import axios from \"axios\";\n\n  const data = ref(null);\n  const error = ref(false);\n  const errorMessage = ref(\"\");\n\n  const fetchData = async () => {\n    try {\n      const response = await axios.get(\"\u002Fapi\u002Fsensitive-data\");\n      data.value = response.data;\n      error.value = false;\n    } catch (err) {\n      error.value = true;\n      \u002F\u002F Don't show the raw error to the user!\n      \u002F\u002F console.error(err.response.data); \u002F\u002F Bad practice\n      errorMessage.value =\n        \"Oops! Something went wrong. Please try again later.\";\n      \u002F\u002F Log the detailed error to a server-side logging service\n    }\n  };\n\u003C\u002Fscript>\n","bash",[196,6424,6425,6430,6434,6444,6452,6466,6477,6481,6491,6498,6520,6537,6542,6546,6554,6558,6592,6596,6601,6605,6613,6617,6642,6646,6682,6686,6700,6704,6712,6720,6728,6755,6783,6810,6819,6828,6832,6841,6861,6874,6878,6894,6910,6927,6931,6944,6950,6971,6984,6996,7007,7018,7027,7036,7042,7048,7054,7059,7065],{"__ignoreMap":123},[369,6426,6427],{"class":371,"line":372},[369,6428,6429],{"class":375},"    # npm audit report\n",[369,6431,6432],{"class":371,"line":124},[369,6433,402],{"emptyLinePlaceholder":138},[369,6435,6436,6439,6441],{"class":371,"line":399},[369,6437,6438],{"class":421},"    lodash",[369,6440,751],{"class":381},[369,6442,6443],{"class":392},"4.17.21\n",[369,6445,6446,6449],{"class":371,"line":405},[369,6447,6448],{"class":421},"    Severity:",[369,6450,6451],{"class":392}," high\n",[369,6453,6454,6457,6460,6463],{"class":371,"line":428},[369,6455,6456],{"class":421},"    Prototype",[369,6458,6459],{"class":392}," Pollution",[369,6461,6462],{"class":392}," -",[369,6464,6465],{"class":392}," https:\u002F\u002Fnpmjs.com\u002Fadvisories\u002F1526\n",[369,6467,6468,6471,6474],{"class":371,"line":452},[369,6469,6470],{"class":421},"    No",[369,6472,6473],{"class":392}," fix",[369,6475,6476],{"class":392}," available\n",[369,6478,6479],{"class":371,"line":470},[369,6480,402],{"emptyLinePlaceholder":138},[369,6482,6483,6486,6488],{"class":371,"line":489},[369,6484,6485],{"class":421},"    axios",[369,6487,751],{"class":381},[369,6489,6490],{"class":392},"0.21.1\n",[369,6492,6493,6495],{"class":371,"line":494},[369,6494,6448],{"class":421},[369,6496,6497],{"class":392}," moderate\n",[369,6499,6500,6503,6506,6509,6512,6515,6517],{"class":371,"line":508},[369,6501,6502],{"class":421},"    Arbitrary",[369,6504,6505],{"class":392}," File",[369,6507,6508],{"class":392}," Write",[369,6510,6511],{"class":392}," via",[369,6513,6514],{"class":392}," Decompress",[369,6516,6462],{"class":392},[369,6518,6519],{"class":392}," https:\u002F\u002Fnpmjs.com\u002Fadvisories\u002F1608\n",[369,6521,6522,6525,6528,6531,6534],{"class":371,"line":522},[369,6523,6524],{"class":421},"    Fix",[369,6526,6527],{"class":392}," available:",[369,6529,6530],{"class":392}," `",[369,6532,6533],{"class":421},"npm",[369,6535,6536],{"class":392}," install axios@^0.21.1`\n",[369,6538,6539],{"class":371,"line":535},[369,6540,6541],{"class":392},"    ```\n",[369,6543,6544],{"class":371,"line":544},[369,6545,402],{"emptyLinePlaceholder":138},[369,6547,6548,6551],{"class":371,"line":564},[369,6549,6550],{"class":421},"Bir",[369,6552,6553],{"class":392}," bağımlılık eklemeden önce aktif bakılıp bakılmadığına, kaç kişinin kullandığına, açık güvenlik konusu olup olmadığına ve en son ne zaman güncellendiğine bak.\n",[369,6555,6556],{"class":371,"line":579},[369,6557,402],{"emptyLinePlaceholder":138},[369,6559,6560,6563,6566,6569,6572,6575,6578,6580,6583,6586,6589],{"class":371,"line":610},[369,6561,6562],{"class":392},"`",[369,6564,6565],{"class":421},"package-lock.json",[369,6567,6568],{"class":392},"` ",[369,6570,6571],{"class":421},"ya",[369,6573,6574],{"class":392}," da `",[369,6576,6577],{"class":421},"yarn.lock",[369,6579,6568],{"class":392},[369,6581,6582],{"class":421},"dosyanı",[369,6584,6585],{"class":392}," depoya ekle. Bu dosyalar sürümleri kesinleştiriyor; ",[369,6587,6588],{"class":421},"ekibin",[369,6590,6591],{"class":392}," ve CI hattın aynı test edilmiş küme üzerinden derliyor.\n",[369,6593,6594],{"class":371,"line":616},[369,6595,402],{"emptyLinePlaceholder":138},[369,6597,6598],{"class":371,"line":635},[369,6599,6600],{"class":375},"## 4. Sırların pakete sızması\n",[369,6602,6603],{"class":371,"line":647},[369,6604,402],{"emptyLinePlaceholder":138},[369,6606,6607,6610],{"class":371,"line":658},[369,6608,6609],{"class":421},"Bu",[369,6611,6612],{"class":392}," kulağa apaçık geliyor ve yine de düzenli olarak oluyor. Bileşenlere ya da JavaScript dosyalarına gömülen API anahtarları istemci paketine giriyor, yani herkese açık hâle geliyor. Ayrıntılı hata mesajları backend hakkında bilgi sızdırıyor. İstemciye hiç gitmemesi gereken ortam değişkenleri pakete dahil oluyor.\n",[369,6614,6615],{"class":371,"line":668},[369,6616,402],{"emptyLinePlaceholder":138},[369,6618,6619,6622,6625,6628,6631,6634,6636,6639],{"class":371,"line":681},[369,6620,6621],{"class":421},"Frontend",[369,6623,6624],{"class":392}," kodunda asla sır gömme. Frontend'in anahtar isteyen bir API'ye ihtiyacı varsa araya kendi sunucunu koy: Vue uygulaman kendi backend'ini çağırıyor, backend de anahtarla üçüncü taraf API'sini çağırıyor. Yani tarayıcıdan `",[369,6626,6627],{"class":421},"axios.get(",[369,6629,6630],{"class":421},"'https:\u002F\u002Fapi.thirdparty.com\u002Fdata?apiKey=YOUR_SECRET_KEY'",[369,6632,6633],{"class":385},")",[369,6635,6568],{"class":392},[369,6637,6638],{"class":421},"yapmak",[369,6640,6641],{"class":392}," yerine istek senin kontrolündeki bir sunucudan geçiyor.\n",[369,6643,6644],{"class":371,"line":687},[369,6645,402],{"emptyLinePlaceholder":138},[369,6647,6648,6651,6654,6657,6659,6662,6665,6668,6671,6674,6676,6679],{"class":371,"line":693},[369,6649,6650],{"class":421},"Ortam",[369,6652,6653],{"class":392}," değişkenleri de aynı dikkati istiyor. Vue CLI, `",[369,6655,6656],{"class":421},"VUE_APP_",[369,6658,6568],{"class":392},[369,6660,6661],{"class":421},"önekli",[369,6663,6664],{"class":392}," her şeyi istemci paketine açıyor; ",[369,6666,6667],{"class":421},"Vite",[369,6669,6670],{"class":392}," aynısını `",[369,6672,6673],{"class":421},"VITE_",[369,6675,6568],{"class":392},[369,6677,6678],{"class":421},"ile",[369,6680,6681],{"class":392}," yapıyor. Oraya API uç noktalarını koy, API anahtarlarını değil. Production sırlarını sürüm kontrolünden uzak tut ve barındırma sağlayıcının yapılandırması üzerinden yönet.\n",[369,6683,6684],{"class":371,"line":698},[369,6685,402],{"emptyLinePlaceholder":138},[369,6687,6688,6691,6694,6697],{"class":371,"line":707},[369,6689,6690],{"class":421},"Hataları",[369,6692,6693],{"class":392}," da sızdırmayacak şekilde ele al. Ham backend hataları veritabanı şemasını ya da sunucu yollarını açığa çıkarabiliyor; ",[369,6695,6696],{"class":421},"kullanıcıya",[369,6698,6699],{"class":392}," genel bir şey göster, ayrıntıyı sunucuda logla.\n",[369,6701,6702],{"class":371,"line":712},[369,6703,402],{"emptyLinePlaceholder":138},[369,6705,6706,6709],{"class":371,"line":721},[369,6707,6708],{"class":392},"```",[369,6710,6711],{"class":421},"html\n",[369,6713,6714,6716,6718],{"class":371,"line":1369},[369,6715,739],{"class":381},[369,6717,743],{"class":385},[369,6719,746],{"class":381},[369,6721,6722,6724,6726],{"class":371,"line":1382},[369,6723,751],{"class":381},[369,6725,754],{"class":421},[369,6727,746],{"class":385},[369,6729,6730,6732,6734,6737,6739,6742,6745,6747,6750,6753],{"class":371,"line":1394},[369,6731,761],{"class":381},[369,6733,1161],{"class":421},[369,6735,6736],{"class":392}," @click=\"fetchData\"",[369,6738,4513],{"class":381},[369,6740,6741],{"class":392},"Fetch",[369,6743,6744],{"class":392}," Data",[369,6746,739],{"class":381},[369,6748,6749],{"class":392},"\u002Fbutto",[369,6751,6752],{"class":385},"n",[369,6754,746],{"class":381},[369,6756,6757,6759,6761,6764,6766,6769,6772,6775,6777,6779,6781],{"class":371,"line":1410},[369,6758,761],{"class":381},[369,6760,10],{"class":421},[369,6762,6763],{"class":392}," v-if=\"error\"",[369,6765,4513],{"class":381},[369,6767,6768],{"class":392},"{{",[369,6770,6771],{"class":392}," errorMessage",[369,6773,6774],{"class":392}," }}",[369,6776,739],{"class":381},[369,6778,4735],{"class":392},[369,6780,10],{"class":385},[369,6782,746],{"class":381},[369,6784,6785,6787,6789,6792,6794,6796,6798,6800,6802,6805,6808],{"class":371,"line":1425},[369,6786,761],{"class":381},[369,6788,754],{"class":421},[369,6790,6791],{"class":392}," v-if=\"data\"",[369,6793,4513],{"class":381},[369,6795,6768],{"class":392},[369,6797,435],{"class":392},[369,6799,6774],{"class":392},[369,6801,739],{"class":381},[369,6803,6804],{"class":392},"\u002Fdi",[369,6806,6807],{"class":385},"v",[369,6809,746],{"class":381},[369,6811,6812,6814,6817],{"class":371,"line":1455},[369,6813,751],{"class":381},[369,6815,6816],{"class":421},"\u002Fdiv",[369,6818,746],{"class":385},[369,6820,6821,6823,6826],{"class":371,"line":1468},[369,6822,739],{"class":381},[369,6824,6825],{"class":385},"\u002Ftemplate",[369,6827,746],{"class":381},[369,6829,6830],{"class":371,"line":1481},[369,6831,402],{"emptyLinePlaceholder":138},[369,6833,6834,6836,6839],{"class":371,"line":1493},[369,6835,739],{"class":381},[369,6837,6838],{"class":385},"script setup",[369,6840,746],{"class":381},[369,6842,6843,6846,6849,6851,6854,6857,6859],{"class":371,"line":1506},[369,6844,6845],{"class":421},"  import",[369,6847,6848],{"class":392}," {",[369,6850,441],{"class":392},[369,6852,6853],{"class":392}," }",[369,6855,6856],{"class":392}," from",[369,6858,393],{"class":392},[369,6860,396],{"class":385},[369,6862,6863,6865,6868,6870,6872],{"class":371,"line":1511},[369,6864,6845],{"class":421},[369,6866,6867],{"class":392}," axios",[369,6869,6856],{"class":392},[369,6871,6211],{"class":392},[369,6873,396],{"class":385},[369,6875,6876],{"class":371,"line":1519},[369,6877,402],{"emptyLinePlaceholder":138},[369,6879,6880,6882,6884,6886,6888,6890,6892],{"class":371,"line":1532},[369,6881,431],{"class":421},[369,6883,435],{"class":392},[369,6885,438],{"class":392},[369,6887,441],{"class":392},[369,6889,418],{"class":385},[369,6891,446],{"class":421},[369,6893,449],{"class":385},[369,6895,6896,6898,6900,6902,6904,6906,6908],{"class":371,"line":1548},[369,6897,431],{"class":421},[369,6899,457],{"class":392},[369,6901,438],{"class":392},[369,6903,441],{"class":392},[369,6905,418],{"class":385},[369,6907,1254],{"class":434},[369,6909,449],{"class":385},[369,6911,6912,6914,6916,6918,6920,6922,6925],{"class":371,"line":1563},[369,6913,431],{"class":421},[369,6915,6771],{"class":392},[369,6917,438],{"class":392},[369,6919,441],{"class":392},[369,6921,418],{"class":385},[369,6923,6924],{"class":421},"\"\"",[369,6926,449],{"class":385},[369,6928,6929],{"class":371,"line":1578},[369,6930,402],{"emptyLinePlaceholder":138},[369,6932,6933,6935,6937,6939,6941],{"class":371,"line":1620},[369,6934,431],{"class":421},[369,6936,502],{"class":392},[369,6938,438],{"class":392},[369,6940,5050],{"class":392},[369,6942,6943],{"class":385}," () => {\n",[369,6945,6946,6948],{"class":371,"line":1625},[369,6947,538],{"class":421},[369,6949,541],{"class":392},[369,6951,6953,6955,6957,6959,6961,6964,6966,6969],{"class":371,"line":6952},47,[369,6954,547],{"class":421},[369,6956,4841],{"class":392},[369,6958,438],{"class":392},[369,6960,555],{"class":392},[369,6962,6963],{"class":392}," axios.get",[369,6965,418],{"class":385},[369,6967,6968],{"class":421},"\"\u002Fapi\u002Fsensitive-data\"",[369,6970,449],{"class":385},[369,6972,6974,6977,6979,6982],{"class":371,"line":6973},48,[369,6975,6976],{"class":421},"      data.value",[369,6978,438],{"class":392},[369,6980,6981],{"class":392}," response.data",[369,6983,396],{"class":385},[369,6985,6987,6990,6992,6994],{"class":371,"line":6986},49,[369,6988,6989],{"class":421},"      error.value",[369,6991,438],{"class":392},[369,6993,676],{"class":434},[369,6995,396],{"class":385},[369,6997,6999,7002,7005],{"class":371,"line":6998},50,[369,7000,7001],{"class":385},"    } catch (",[369,7003,7004],{"class":421},"err",[369,7006,425],{"class":385},[369,7008,7010,7012,7014,7016],{"class":371,"line":7009},51,[369,7011,6989],{"class":421},[369,7013,438],{"class":392},[369,7015,517],{"class":434},[369,7017,396],{"class":385},[369,7019,7021,7024],{"class":371,"line":7020},52,[369,7022,7023],{"class":421},"      \u002F\u002F",[369,7025,7026],{"class":392}," Don't show the raw error to the user!\n",[369,7028,7030,7033],{"class":371,"line":7029},53,[369,7031,7032],{"class":392},"      \u002F\u002F console.error(err.response.data);",[369,7034,7035],{"class":392}," \u002F\u002F Bad practice\n",[369,7037,7039],{"class":371,"line":7038},54,[369,7040,7041],{"class":392},"      errorMessage.value =\n",[369,7043,7045],{"class":371,"line":7044},55,[369,7046,7047],{"class":392},"        \"Oops! Something went wrong. Please try again later.\";\n",[369,7049,7051],{"class":371,"line":7050},56,[369,7052,7053],{"class":392},"      \u002F\u002F Log the detailed error to a server-side logging service\n",[369,7055,7057],{"class":371,"line":7056},57,[369,7058,684],{"class":392},[369,7060,7062],{"class":371,"line":7061},58,[369,7063,7064],{"class":392},"  };\n",[369,7066,7068],{"class":371,"line":7067},59,[369,7069,7070],{"class":392},"\u003C\u002Fscript>\n",[10,7072,7073],{},"Derlenmiş frontend'indeki her şeyin herkese açık olduğunu varsay, çünkü öyle.",[28,7075,7077],{"id":7076},"_5-i̇stemci-tarafında-kimlik-doğrulama-ve-yetkilendirme","5. İstemci tarafında kimlik doğrulama ve yetkilendirme",[10,7079,7080],{},"Bu Vue'ya özgü değil ama sürekli karşımıza çıkıyor. Yetkilendirmeyi yalnızca frontend'de uygulamak, ön kapıya fedai koyup arka kapıyı açık bırakmak demek.",[10,7082,7083,7084,7087],{},"Kendini şöyle gösteriyor: arayüzü role göre gizlemek, backend'in nasılsa kontrol edeceğini varsaymak ya da bir ",[196,7085,7086],{},"isAdmin"," bayrağını Pinia veya Vuex'te tutup onu bağlayıcı saymak.",[10,7089,7090],{},"Kimlik doğrulama gerektiren her uç nokta jetonu ya da oturumu doğrulamalı; yetki gerektiren her uç nokta da bir şey yapmadan önce o yetkiyi kontrol etmeli. Frontend kullanıcı deneyimi için var: birinin kullanamayacağı bir düğmeyi gizlemek makul, ama bu güvenlik değil ve JavaScript'ini herkes atlayabilir.",[10,7092,7093,7094,7097,7098,7101],{},"Jetonları dikkatli sakla. Backend'in koyduğu ",[196,7095,7096],{},"HttpOnly"," çerezleri jetonları istemci tarafı JavaScript'in erişemeyeceği yerde tutuyor; bu da bir XSS hatasının vereceği zararı sınırlıyor. ",[196,7099,7100],{},"localStorage"," kullanıyorsan, tamamen hiçbir yerde XSS olmamasına yaslandığını bil.",[361,7103,7105],{"className":363,"code":7104,"language":365,"meta":123,"style":123},"\u002F\u002F BAD: Relying on client-side state for authorization\n\u002F\u002F In a real app, an attacker could manipulate `isAdmin` in their browser.\nconst user = {\n  name: \"Alice\",\n  isAdmin: false, \u002F\u002F Imagine an attacker changing this to true in the console\n};\n\nif (user.isAdmin) {\n  \u002F\u002F Show admin button - this is for UX, not security!\n}\n\n\u002F\u002F GOOD: Backend always validates permissions\nasync function deleteUser(userId) {\n  try {\n    \u002F\u002F Frontend sends the request\n    await axios.delete(`\u002Fapi\u002Fusers\u002F${userId}`);\n    alert(\"User deleted!\");\n  } catch (error) {\n    \u002F\u002F Backend rejects if user is not authorized\n    if (error.response && error.response.status === 403) {\n      alert(\"You are not authorized to perform this action.\");\n    } else {\n      alert(\"An error occurred.\");\n    }\n  }\n}\n",[196,7106,7107,7112,7117,7128,7138,7150,7154,7158,7165,7170,7174,7178,7183,7198,7204,7209,7231,7242,7250,7255,7275,7287,7295,7306,7310,7314],{"__ignoreMap":123},[369,7108,7109],{"class":371,"line":372},[369,7110,7111],{"class":375},"\u002F\u002F BAD: Relying on client-side state for authorization\n",[369,7113,7114],{"class":371,"line":124},[369,7115,7116],{"class":375},"\u002F\u002F In a real app, an attacker could manipulate `isAdmin` in their browser.\n",[369,7118,7119,7121,7124,7126],{"class":371,"line":399},[369,7120,908],{"class":381},[369,7122,7123],{"class":434}," user",[369,7125,438],{"class":381},[369,7127,541],{"class":385},[369,7129,7130,7133,7136],{"class":371,"line":405},[369,7131,7132],{"class":385},"  name: ",[369,7134,7135],{"class":392},"\"Alice\"",[369,7137,2356],{"class":385},[369,7139,7140,7143,7145,7147],{"class":371,"line":428},[369,7141,7142],{"class":385},"  isAdmin: ",[369,7144,1254],{"class":434},[369,7146,273],{"class":385},[369,7148,7149],{"class":375},"\u002F\u002F Imagine an attacker changing this to true in the console\n",[369,7151,7152],{"class":371,"line":452},[369,7153,2846],{"class":385},[369,7155,7156],{"class":371,"line":470},[369,7157,402],{"emptyLinePlaceholder":138},[369,7159,7160,7162],{"class":371,"line":489},[369,7161,6322],{"class":381},[369,7163,7164],{"class":385}," (user.isAdmin) {\n",[369,7166,7167],{"class":371,"line":494},[369,7168,7169],{"class":375},"  \u002F\u002F Show admin button - this is for UX, not security!\n",[369,7171,7172],{"class":371,"line":508},[369,7173,724],{"class":385},[369,7175,7176],{"class":371,"line":522},[369,7177,402],{"emptyLinePlaceholder":138},[369,7179,7180],{"class":371,"line":535},[369,7181,7182],{"class":375},"\u002F\u002F GOOD: Backend always validates permissions\n",[369,7184,7185,7187,7189,7192,7194,7196],{"class":371,"line":544},[369,7186,4817],{"class":381},[369,7188,411],{"class":381},[369,7190,7191],{"class":414}," deleteUser",[369,7193,418],{"class":385},[369,7195,4771],{"class":421},[369,7197,425],{"class":385},[369,7199,7200,7202],{"class":371,"line":564},[369,7201,4832],{"class":381},[369,7203,541],{"class":385},[369,7205,7206],{"class":371,"line":579},[369,7207,7208],{"class":375},"    \u002F\u002F Frontend sends the request\n",[369,7210,7211,7214,7217,7220,7222,7225,7227,7229],{"class":371,"line":610},[369,7212,7213],{"class":381},"    await",[369,7215,7216],{"class":385}," axios.",[369,7218,7219],{"class":414},"delete",[369,7221,418],{"class":385},[369,7223,7224],{"class":392},"`\u002Fapi\u002Fusers\u002F${",[369,7226,4771],{"class":385},[369,7228,605],{"class":392},[369,7230,449],{"class":385},[369,7232,7233,7235,7237,7240],{"class":371,"line":616},[369,7234,5775],{"class":414},[369,7236,418],{"class":385},[369,7238,7239],{"class":392},"\"User deleted!\"",[369,7241,449],{"class":385},[369,7243,7244,7246,7248],{"class":371,"line":635},[369,7245,4922],{"class":385},[369,7247,641],{"class":381},[369,7249,4927],{"class":385},[369,7251,7252],{"class":371,"line":647},[369,7253,7254],{"class":375},"    \u002F\u002F Backend rejects if user is not authorized\n",[369,7256,7257,7259,7262,7265,7268,7270,7273],{"class":371,"line":658},[369,7258,4857],{"class":381},[369,7260,7261],{"class":385}," (error.response ",[369,7263,7264],{"class":381},"&&",[369,7266,7267],{"class":385}," error.response.status ",[369,7269,2825],{"class":381},[369,7271,7272],{"class":434}," 403",[369,7274,425],{"class":385},[369,7276,7277,7280,7282,7285],{"class":371,"line":668},[369,7278,7279],{"class":414},"      alert",[369,7281,418],{"class":385},[369,7283,7284],{"class":392},"\"You are not authorized to perform this action.\"",[369,7286,449],{"class":385},[369,7288,7289,7291,7293],{"class":371,"line":681},[369,7290,638],{"class":385},[369,7292,5500],{"class":381},[369,7294,541],{"class":385},[369,7296,7297,7299,7301,7304],{"class":371,"line":687},[369,7298,7279],{"class":414},[369,7300,418],{"class":385},[369,7302,7303],{"class":392},"\"An error occurred.\"",[369,7305,449],{"class":385},[369,7307,7308],{"class":371,"line":693},[369,7309,684],{"class":385},[369,7311,7312],{"class":371,"line":698},[369,7313,690],{"class":385},[369,7315,7316],{"class":371,"line":707},[369,7317,724],{"class":385},[28,7319,7321],{"id":7320},"kısaca","Kısaca",[10,7323,7324,7325,7327],{},"Vue sana güvenli bir temel veriyor, gerisi bize kalıyor. Kullanıcı girdisini temizle, özellikle ",[196,7326,5804],{},"'e yaklaşan her şeyi. Backend'inle birlikte CSRF jetonlarını devreye al. Bağımlılıkları denetle ve güncelle. Sırları paketin dışında tut. Kimlik doğrulama ve yetkilendirmeyi her seferinde sunucuda doğrula.",[1341,7329,7330],{},"html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sPWt5, html code.shiki .sPWt5{--shiki-default:#7EE787}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sHaLz, html code.shiki .sHaLz{--shiki-default:#7EE787;--shiki-default-font-weight:bold}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}",{"title":123,"searchDepth":124,"depth":124,"links":7332},[7333,7334,7335,7336,7337,7338],{"id":5709,"depth":124,"text":5710},{"id":5716,"depth":124,"text":5717},{"id":6131,"depth":124,"text":6132},{"id":6399,"depth":124,"text":6400},{"id":7076,"depth":124,"text":7077},{"id":7320,"depth":124,"text":7321},"2023-09-15","Vue uygulamalarında sık karşılaşılan beş açık ve her biri için çözümü.",{},"\u002Fblog\u002Fvue-js-projelerinde-guvenlik-riskleri",{"title":5695,"description":7340},"blog\u002Fvue-js-projelerinde-guvenlik-riskleri",[732,7346,365,3819,7347],"security","software development","security-risks-in-vuejs-applications","OebxYHAKhuqRV0hkMXcKVFI7kndAMdzZM_CATgCOhOY",{"id":7351,"title":7352,"body":7353,"category":132,"date":5680,"description":7445,"draft":135,"extension":136,"meta":7446,"navigation":138,"path":7447,"seo":7448,"stem":7449,"tags":7450,"translationKey":7455,"videoId":148,"__hash__":7456},"blog_tr\u002Fblog\u002Fyapay-zeka-destekli-ogrenme.md","Yapay zeka destekli öğrenme ve çalışma biçimimizi değiştiren araçlar",{"type":7,"value":7354,"toc":7434},[7355,7359,7362,7365,7369,7372,7379,7383,7386,7390,7397,7401,7404,7408,7411,7415,7418,7421,7424,7428,7431],[28,7356,7358],{"id":7357},"eski-çalışma-günlerini-hatırlıyor-musun","Eski çalışma günlerini hatırlıyor musun",[10,7360,7361],{},"Hepimiz aynı yerden geçtik: elinde fosforlu kalem, sınavdan önce beynine bilgi tıkıştırmaya çalışırken bir ders kitabına bakakalmak. Ya da yeni bir beceri edinmeye çalışırken sonu gelmeyen eğitim videolarının arasında kaybolmak. Genelde yalnız geçen bir süreçti ve arka planda hep aynı soru dönerdi: \"Bunu doğru mu yapıyorum?\"",[10,7363,7364],{},"Şimdi çok daha kişiselleştirilmiş bir öğrenme dalgası var.",[28,7366,7368],{"id":7367},"öğrenmede-yapay-zeka-ne-demek","Öğrenmede yapay zeka ne demek",[10,7370,7371],{},"\"Yapay zeka mı? Çalışma düzenimde mi? Nasıl olacak o iş?\" diye sorman normal. Yapay zeka yıllarca bilimkurgu filmlerinden fırlamış bir şey gibi göründü, ama artık günlük hayatın parçası, öğrenme biçimimiz dahil.",[10,7373,7374,7375,7378],{},"Yapay zeka destekli öğrenme, temelde eğitim deneyimini ",[20,7376,7377],{},"sana"," göre uyarlamak demek. Güçlü yanlarını, zayıf yanlarını ve öğrenme biçimini bilen, her an ulaşılabilir bir özel ders öğretmeni gibi düşün. Herkese aynı gelen dersler ve genel geçer alıştırmalar yerine sana göre kurulmuş bir yol.",[1134,7380,7382],{"id":7381},"kişiselleştirilmiş-öğrenme-yolu","Kişiselleştirilmiş öğrenme yolu",[10,7384,7385],{},"Diyelim ki yeni bir programlama dili öğreniyorsun. Katı bir müfredatı izlemek yerine, araç mevcut bilgini ölçüyor, daha çok pratik yapman gereken yerleri buluyor ve sana uygun kaynaklarla alıştırmalar öneriyor. Döngülerde zorlanıyorsan daha çok döngü sorusu geliyor. Değişkenlerde rahatsan seni bir sonraki adıma geçiriyor.",[1134,7387,7389],{"id":7388},"anında-geri-bildirim-ve-uyarlanan-alıştırmalar","Anında geri bildirim ve uyarlanan alıştırmalar",[10,7391,7392,7393,7396],{},"Ödevin değerlendirilmesini beklediğin günleri hatırla. Bu araçlar cevaplarına anında geri bildirim veriyor, bir şeyin ",[20,7394,7395],{},"neden"," yanlış olduğunu açıklıyor ve doğru çözüme yönlendiriyor. Hemen gelen düzeltme, kavramların çok daha hızlı yerleşmesini sağlıyor. Üstelik alıştırmalar da uyarlanıyor: aynı hatayı tekrarlıyorsan, konu oturana kadar benzer problemleri farklı biçimlerde önüne getiriyor.",[1134,7398,7400],{"id":7399},"i̇çerik-seçme-ve-öneri","İçerik seçme ve öneri",[10,7402,7403],{},"İnternet devasa bir bilgi okyanusu. Güvenilir, konuyla ilgili ve anlaşılır içeriği bulmak başlı başına bir iş. Yapay zeka burada kişisel kütüphaneciye dönüşüyor: makaleleri, videoları ve kursları eleyip o an neye ihtiyacın varsa onu öneriyor. Tercihlerini öğrendikçe önerileri de iyileşiyor.",[1134,7405,7407],{"id":7406},"aralıklı-tekrar-ve-kalıcılık","Aralıklı tekrar ve kalıcılık",[10,7409,7410],{},"Öğrenmenin en zor kısımlarından biri öğrendiğini hatırlamak. Bu araçların çoğu aralıklı tekrar algoritmaları kullanıyor. Kulağa teknik geliyor ama anlamı basit: yapay zeka sana bir kavramı tam unutmak üzereyken hatırlatıyor. Bilginin uzun vadede kalması için işleyen bir hatırlatma sistemi.",[28,7412,7414],{"id":7413},"örnek-skillmate-ai","Örnek: SkillMate AI",[10,7416,7417],{},"Kullandığım araçlardan biri olan SkillMate AI tam da bu tarife uyuyor. Yanında ilerleyen bir öğrenme koçu gibi çalışıyor.",[10,7419,7420],{},"Bilgiyi önüne yığmak yerine seninle etkileşime giriyor, öğrenme örüntülerini anlıyor ve buna göre yönlendiriyor. Kavramları pratik etmene yardım ediyor, zor konuları daha basit anlatıyor, anlayıp anlamadığını ölçmek için sana göre hazırlanmış küçük sınavlar üretiyor.",[10,7422,7423],{},"Bir konuda takıldığında ona sorabiliyorsun; konuyu farklı bir yoldan, belki senin anlayacağın bir benzetmeyle yeniden anlatıyor. Belirli bir beceride daha çok pratiğe ihtiyacın varsa o alana odaklı alıştırmalar üretiyor. Sınav öncesi tekrar yapmak istediğinde de en önemli bilgileri hatırlatıp seni sorularla sınıyor.",[28,7425,7427],{"id":7426},"bu-nereye-gidiyor","Bu nereye gidiyor",[10,7429,7430],{},"Yapay zekanın öğrenmeye girmesi geçici bir moda değil, bilgi ve beceri edinme biçimimizde gerçek bir değişiklik. İnsanın kendi eğitiminin kontrolünü eline almasını, kendi hızında ilerlemesini ve tam ihtiyacı olan desteği almasını mümkün kılıyor.",[10,7432,7433],{},"Sınavdan iyi not almaya çalışan bir öğrenci ol, becerisini geliştirmek isteyen bir profesyonel ol ya da sadece yeni bir şey merak et: bir dahaki sefere kitabı açmadan önce yanına bir yapay zeka aracı almayı deneyebilirsin.",{"title":123,"searchDepth":124,"depth":124,"links":7435},[7436,7437,7443,7444],{"id":7357,"depth":124,"text":7358},{"id":7367,"depth":124,"text":7368,"children":7438},[7439,7440,7441,7442],{"id":7381,"depth":399,"text":7382},{"id":7388,"depth":399,"text":7389},{"id":7399,"depth":399,"text":7400},{"id":7406,"depth":399,"text":7407},{"id":7413,"depth":124,"text":7414},{"id":7426,"depth":124,"text":7427},"Kişiselleştirilmiş yapay zeka koçları öğrenmeyi, beceri gelişimini ve bilgiyi akılda tutmayı nasıl değiştiriyor.",{},"\u002Fblog\u002Fyapay-zeka-destekli-ogrenme",{"title":7352,"description":7445},"blog\u002Fyapay-zeka-destekli-ogrenme",[7451,7452,7453,7454],"AI","Education","Learning","SkillMate AI","ai-powered-learning","tWSZZdFsyeRjuprWiy_OlCvNqO1sAOA--ggsl6I9icM",{"id":7458,"title":7459,"body":7460,"category":7557,"date":320,"description":7558,"draft":135,"extension":136,"meta":7559,"navigation":138,"path":7560,"seo":7561,"stem":7562,"tags":7563,"translationKey":7566,"videoId":148,"__hash__":7567},"blog_tr\u002Fblog\u002Fyapay-zeka-hata-ayiklamayi-nasil-degistiriyor.md","Yapay zeka hata ayıklamayı nasıl değiştiriyor",{"type":7,"value":7461,"toc":7547},[7462,7466,7473,7476,7479,7483,7486,7489,7493,7496,7503,7507,7510,7514,7527,7530,7534,7537,7541,7544],[28,7463,7465],{"id":7464},"hatalarla-bitmeyen-mücadele","Hatalarla bitmeyen mücadele",[10,7467,7468,7469,7472],{},"Azıcık kod yazmış herkes bu döngüyü bilir: güzel görünen birkaç satır yazarsın, programı çalıştırırsın ve ekrana bir hata düşer. Ya da daha kötüsü, program çalışır ama söylediğini ",[20,7470,7471],{},"sandığın"," şeyi yapmaz.",[10,7474,7475],{},"Bu küçük dijital yaratıkları bulup düzeltme işi, yani hata ayıklama, geleneksel olarak yazılım geliştirmenin en çok zaman yiyen ve en sinir bozucu parçalarından biri. Dedektiflik gibi bir şey, ama ipuçların anlaşılmaz hata mesajları ve şüphelilerin milyonlarca satır kod.",[10,7477,7478],{},"Bu mücadeleyi hatırı sayılır ölçüde kolaylaştıran yeni bir yardımcı var: yapay zeka.",[28,7480,7482],{"id":7481},"yapay-zeka-hata-ayıklamaya-nasıl-giriyor","Yapay zeka hata ayıklamaya nasıl giriyor",[10,7484,7485],{},"\"Yanlış yere konmuş bir noktalı virgülü ya da mantık hatasını bulmak gibi ince bir işte yapay zeka ne yapabilir ki?\" diye sorabilirsin. Yapay zeka yalnızca robotlar ve sürücüsüz arabalarla ilgili değil; kod yazma, test etme ve düzeltme biçimimizi de değiştiriyor.",[10,7487,7488],{},"Onu, çok büyük miktarda kodu ve veriyi bir insandan çok daha hızlı tarayabilen, yorulmayan bir asistan gibi düşün. Günün her saati çalışan bir kod inceleyicisi.",[1134,7490,7492],{"id":7491},"hataları-önceden-tahmin-etme","Hataları önceden tahmin etme",[10,7494,7495],{},"Editörünün sana \"az önce yazdığın şu satır ileride sorun çıkarabilir\" diyebildiğini düşün. Öngörücü hata tespiti kabaca bu. Modeller, milyonlarca hatayı ve bu hataların düzeltmelerini içeren devasa kod kümeleri üzerinde eğitiliyor; böylece yaygın hatalara eşlik eden örüntüleri öğreniyorlar.",[10,7497,7498,7499,7502],{},"Sen yeni kod yazarken model onu inceliyor ve olası sorunları sen programı çalıştırmadan ",[20,7500,7501],{},"önce"," işaretleyebiliyor. Yazım denetleyicisine benziyor, ama mantık hataları ve performans darboğazları için.",[1134,7504,7506],{"id":7505},"hata-kayıtlarını-otomatik-sınıflandırma","Hata kayıtlarını otomatik sınıflandırma",[10,7508,7509],{},"Büyük projelerde bir hata kaydı yalnızca \"kodu düzelt\" demek değildir. Etkisini anlamak, doğru geliştiriciye atamak ve ne kadar kritik olduğuna karar vermek gerekir. Yapay zeka burada hata kayıtlarını okuyup geçmiş kayıtlarla karşılaştırabiliyor, kategorilere ayırabiliyor, önem derecesi önerebiliyor, hatta geçmiş işlerine bakarak hangi ekip üyesinin bu işe daha uygun olduğunu söyleyebiliyor. Bu, geliştiricilerin ve proje yöneticilerinin ciddi vakit kazanmasını sağlıyor ve kritik hataların önce ele alınmasına yardımcı oluyor.",[1134,7511,7513],{"id":7512},"düzeltme-önerileri-bazen-düzeltmenin-kendisi","Düzeltme önerileri, bazen düzeltmenin kendisi",[10,7515,7516,7517,7520,7521,7523,7524,7526],{},"İşin ilginçleştiği yer burası. Bazı araçlar hatayı ",[20,7518,7519],{},"bulmakla"," kalmıyor, nasıl düzeltileceğini de öneriyor. \"Şu satırda hata var, ",[196,7522,514],{}," yerine ",[196,7525,2825],{}," mi demek istedin?\" diyen bir uyarı düşün.",[10,7528,7529],{},"Gelişmiş modeller doğrudan hatayı gideren kod parçaları da üretebiliyor. Bunu, hatanın bağlamını anlayıp benzer durumlarda işe yaramış düzeltmelerin örüntülerinden yararlanarak yapıyorlar. Sonuç her zaman doğru olmuyor, insanın gözden geçirip onaylaması gerekiyor. Yine de ilk inceleme ve çözüm arama aşamasını epeyce hızlandırıyor.",[1134,7531,7533],{"id":7532},"test-senaryolarını-zenginleştirme","Test senaryolarını zenginleştirme",[10,7535,7536],{},"Hatalar çoğu zaman testlerimiz yeterince kapsamlı olmadığı için gözden kaçar. Yapay zeka mevcut kodunu ve test setini inceleyip aklına gelmemiş uç durumları açığa çıkarabilecek yeni test senaryoları önerebiliyor. Yeni test verisi ya da senaryolar da üretebiliyor.",[28,7538,7540],{"id":7539},"peki-bu-geliştiricinin-yerini-alıyor-mu","Peki bu geliştiricinin yerini alıyor mu",[10,7542,7543],{},"Hayır. Karmaşık yazılım sistemlerini tasarlamak ve gerçekten anlamak için hâlâ insan sezgisine, yaratıcılığa ve eleştirel düşünmeye ihtiyaç var. Yapay zekanın yaptığı şey, hata ayıklamanın tekrar eden ve zaman yiyen kısmını devralmak.",[10,7545,7546],{},"Bu da geliştiricinin vaktinin daha büyük bir kısmını yeni özellikler tasarlamaya ve daha büyük problemleri çözmeye ayırabilmesi demek, tek bir kaçak noktalı virgülü kovalamak yerine. Bir dahaki hata avında arka planda çalışan bu araçların işi ne kadar kolaylaştırdığını fark edeceksin.",{"title":123,"searchDepth":124,"depth":124,"links":7548},[7549,7550,7556],{"id":7464,"depth":124,"text":7465},{"id":7481,"depth":124,"text":7482,"children":7551},[7552,7553,7554,7555],{"id":7491,"depth":399,"text":7492},{"id":7505,"depth":399,"text":7506},{"id":7512,"depth":399,"text":7513},{"id":7532,"depth":399,"text":7533},{"id":7539,"depth":124,"text":7540},"AI_LAB","Yapay zeka destekli araçlar hataları daha erken yakalıyor, hata ayıklama süresini kısaltıyor ve kod kalitesini yükseltiyor.",{},"\u002Fblog\u002Fyapay-zeka-hata-ayiklamayi-nasil-degistiriyor",{"title":7459,"description":7558},"blog\u002Fyapay-zeka-hata-ayiklamayi-nasil-degistiriyor",[7451,7564,7347,7565],"bug fixing","code quality","how-ai-is-transforming-bug-fixing","6tPLxxpNwditTf3NeDri6G26t9QoAc-TawH6S4TVkiU",{"id":7569,"title":7570,"body":7571,"category":7557,"date":5680,"description":7937,"draft":135,"extension":136,"meta":7938,"navigation":138,"path":7939,"seo":7940,"stem":7941,"tags":7942,"translationKey":7945,"videoId":148,"__hash__":7946},"blog_tr\u002Fblog\u002Fyapay-zeka-kodlama-asistanlarinin-gelecegi.md","Yapay zeka kodlama asistanlarının geleceği ve GPT-5",{"type":7,"value":7572,"toc":7923},[7573,7577,7580,7583,7587,7590,7593,7597,7601,7604,7621,7815,7818,7822,7825,7828,7832,7835,7838,7842,7849,7856,7860,7866,7876,7880,7887,7890,7893,7896,7900,7903,7913,7917,7920],[28,7574,7576],{"id":7575},"kod-yazmanın-değişimi","Kod yazmanın değişimi",[10,7578,7579],{},"Her satırı tek tek yazdığımız, ortadan kaybolan noktalı virgülleri aradığımız ve tek bir hatayı bulmak için saatler harcadığımız günleri hatırlıyor musun?",[10,7581,7582],{},"Yazılım geliştirme her zaman problem çözmekle ilgiliydi, ama problemleri çözerken kullandığımız araçlar sürekli değişiyor. Delikli kartlardan IDE'lere, oradan yapay zeka destekli kodlama asistanlarına geldik. \"Bir araç daha mı, buna gerçekten ihtiyacım var mı?\" diye düşünüyorsan cevabım şu: daha hızlı, daha temiz ve daha ölçeklenebilir kod yazmak istiyorsan evet.",[28,7584,7586],{"id":7585},"gpt-5-ne-getiriyor","GPT-5 ne getiriyor",[10,7588,7589],{},"Yapay zekanın birçok alanda yükselişini gördük; şimdi yazılım yazma biçimimizi de belirgin şekilde etkiliyor. OpenAI'nin GPT serisine benzer modeller üzerine kurulu GitHub Copilot gibi araçlar oyunu çoktan değiştirmeye başladı. Peki daha gelişmiş bir modelden, örneğin GPT-5'ten söz ettiğimizde ne oluyor?",[10,7591,7592],{},"Yazılmış hemen her kodu okumuş, farklı programlama dillerini enine boyuna bilen ve ne yapmaya çalıştığını öngörebilen bir asistan düşün. Güçlü modellerin vaadi bu. Mesele artık otomatik tamamlama değil: akıllı öneriler, hata tespiti, hatta kısa bir istemden yola çıkarak bütün bir fonksiyon ya da modül üretmek.",[28,7594,7596],{"id":7595},"akışını-nerelerde-hızlandırıyor","Akışını nerelerde hızlandırıyor",[1134,7598,7600],{"id":7599},"kod-üretimi","Kod üretimi",[10,7602,7603],{},"En bariz faydası bu. Kalıplaşmış kodu ya da sık kullanılan yapıları elle yazmak yerine, ne yapmak istediğini anlatıyorsun ve model onu üretiyor.",[10,7605,7606,7607,7610,7611,7614,7615,2281,7618,7620],{},"Diyelim ki bir API'den veri çeken, yükleniyor durumunu yöneten ve hataları gösteren bir fonksiyona ihtiyacın var. Aklından geçen şey şu: \"",[196,7608,7609],{},"async\u002Fawait"," ile bir ",[196,7612,7613],{},"fetchData"," fonksiyonu kurmalıyım, ",[196,7616,7617],{},"isLoading",[196,7619,919],{}," durumlarını da yönetmeliyim.\" Projenin bağlamına ya da kısa bir isteme bakarak model şöyle bir iskelet çıkarabiliyor:",[361,7622,7624],{"className":363,"code":7623,"language":365,"meta":123,"style":123},"async function fetchData(url) {\n  const isLoading = ref(true);\n  const error = ref(null);\n  const data = ref(null);\n\n  try {\n    const response = await fetch(url);\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n    data.value = await response.json();\n  } catch (e) {\n    error.value = e.message;\n  } finally {\n    isLoading.value = false;\n  }\n  return { data, isLoading, error };\n}\n",[196,7625,7626,7640,7657,7673,7689,7693,7699,7713,7723,7745,7749,7764,7772,7781,7789,7800,7804,7811],{"__ignoreMap":123},[369,7627,7628,7630,7632,7634,7636,7638],{"class":371,"line":372},[369,7629,4817],{"class":381},[369,7631,411],{"class":381},[369,7633,502],{"class":414},[369,7635,418],{"class":385},[369,7637,422],{"class":421},[369,7639,425],{"class":385},[369,7641,7642,7644,7647,7649,7651,7653,7655],{"class":371,"line":124},[369,7643,431],{"class":381},[369,7645,7646],{"class":434}," isLoading",[369,7648,438],{"class":381},[369,7650,441],{"class":414},[369,7652,418],{"class":385},[369,7654,484],{"class":434},[369,7656,449],{"class":385},[369,7658,7659,7661,7663,7665,7667,7669,7671],{"class":371,"line":399},[369,7660,431],{"class":381},[369,7662,457],{"class":434},[369,7664,438],{"class":381},[369,7666,441],{"class":414},[369,7668,418],{"class":385},[369,7670,446],{"class":434},[369,7672,449],{"class":385},[369,7674,7675,7677,7679,7681,7683,7685,7687],{"class":371,"line":405},[369,7676,431],{"class":381},[369,7678,435],{"class":434},[369,7680,438],{"class":381},[369,7682,441],{"class":414},[369,7684,418],{"class":385},[369,7686,446],{"class":434},[369,7688,449],{"class":385},[369,7690,7691],{"class":371,"line":428},[369,7692,402],{"emptyLinePlaceholder":138},[369,7694,7695,7697],{"class":371,"line":452},[369,7696,4832],{"class":381},[369,7698,541],{"class":385},[369,7700,7701,7703,7705,7707,7709,7711],{"class":371,"line":470},[369,7702,2565],{"class":381},[369,7704,4841],{"class":434},[369,7706,438],{"class":381},[369,7708,555],{"class":381},[369,7710,558],{"class":414},[369,7712,561],{"class":385},[369,7714,7715,7717,7719,7721],{"class":371,"line":489},[369,7716,4857],{"class":381},[369,7718,570],{"class":385},[369,7720,573],{"class":381},[369,7722,4864],{"class":385},[369,7724,7725,7727,7729,7731,7733,7735,7737,7739,7741,7743],{"class":371,"line":494},[369,7726,4869],{"class":381},[369,7728,585],{"class":381},[369,7730,588],{"class":414},[369,7732,418],{"class":385},[369,7734,593],{"class":392},[369,7736,4881],{"class":385},[369,7738,599],{"class":392},[369,7740,602],{"class":385},[369,7742,605],{"class":392},[369,7744,449],{"class":385},[369,7746,7747],{"class":371,"line":508},[369,7748,684],{"class":385},[369,7750,7751,7754,7756,7758,7760,7762],{"class":371,"line":522},[369,7752,7753],{"class":385},"    data.value ",[369,7755,514],{"class":381},[369,7757,555],{"class":381},[369,7759,4907],{"class":385},[369,7761,629],{"class":414},[369,7763,632],{"class":385},[369,7765,7766,7768,7770],{"class":371,"line":535},[369,7767,4922],{"class":385},[369,7769,641],{"class":381},[369,7771,644],{"class":385},[369,7773,7774,7776,7778],{"class":371,"line":544},[369,7775,525],{"class":385},[369,7777,514],{"class":381},[369,7779,7780],{"class":385}," e.message;\n",[369,7782,7783,7785,7787],{"class":371,"line":564},[369,7784,4922],{"class":385},[369,7786,663],{"class":381},[369,7788,541],{"class":385},[369,7790,7791,7794,7796,7798],{"class":371,"line":579},[369,7792,7793],{"class":385},"    isLoading.value ",[369,7795,514],{"class":381},[369,7797,676],{"class":434},[369,7799,396],{"class":385},[369,7801,7802],{"class":371,"line":610},[369,7803,690],{"class":385},[369,7805,7806,7808],{"class":371,"line":616},[369,7807,715],{"class":381},[369,7809,7810],{"class":385}," { data, isLoading, error };\n",[369,7812,7813],{"class":371,"line":635},[369,7814,724],{"class":385},[10,7816,7817],{},"Tekrar eden yapıları yazmakla geçecek dakikalar, bazen saatler burada kazanılıyor.",[1134,7819,7821],{"id":7820},"kodu-anlamak-ve-belgelemek","Kodu anlamak ve belgelemek",[10,7823,7824],{},"Başkasının (ya da altı ay önceki kendinin) yazdığı bir bloğa bakıp \"bu ne yapıyor ki?\" dediğin oldu mu? Model karmaşık mantığı açıklayabiliyor, hatta belgelendirmeyi üretebiliyor.",[10,7826,7827],{},"Anlaşılmaz bir düzenli ifaden ya da zor bir algoritman varsa kodu seçip \"bu regex'i açıkla\" veya \"bu algoritmanın amacını anlat\" diyebiliyorsun. Mantığı okunabilir cümlelere çeviriyor; ekibe yeni katılan birinin işe alışması ya da eski kodu anlamak kolaylaşıyor. Fonksiyonların için JSDoc gibi biçimlerde belgelendirme de önerebiliyor.",[1134,7829,7831],{"id":7830},"hataları-önden-yakalamak","Hataları önden yakalamak",[10,7833,7834],{},"Yapay zekanın otomatik tamamlamanın ötesine geçtiği yer burası. Sen programı çalıştırmadan önce kodundaki olası hataları, performans darboğazlarını ve güvenlik açıklarını inceleyebiliyor.",[10,7836,7837],{},"Bir döngüde yanlışlıkla bir kaydırma hatası yaptığında ya da kullanıcı girdisini temizlemeyi unuttuğunda, editöründe bunu işaretleyip bir düzeltme önerebiliyor, hatta sorunlu bölümü kendisi yeniden yazabiliyor. Bağlamı geleneksel araçlardan çok daha iyi anlayan bir linter gibi düşün.",[1134,7839,7841],{"id":7840},"yeniden-düzenleme-önerileri","Yeniden düzenleme önerileri",[10,7843,7844,7845,7848],{},"Kod yazmak başka, ",[20,7846,7847],{},"iyi"," kod yazmak başka. Model burada kodunu inceleyen kıdemli bir geliştirici gibi davranabiliyor: okunabilirlik, verimlilik ve yerleşik pratikler için iyileştirmeler öneriyor.",[10,7850,7851,7852,7855],{},"Uzun bir koşul zinciri yazdıysan ve daha derli toplu bir yolu varsa, ",[196,7853,7854],{},"switch"," kullanmayı, bir arama nesnesi kurmayı ya da mantığı sadeleştiren bir tasarım örüntüsünü önerebiliyor. Verimsiz döngülere ve iyileştirilebilecek veri yapılarına da dikkat çekiyor.",[1134,7857,7859],{"id":7858},"öğrenme","Öğrenme",[10,7861,7862,7863,7865],{},"\"Bu beni daha kötü bir geliştirici yapmaz mı?\" diye sorabilirsin. Tersine, her an ulaşılabilir bir mentor gibi kullanabilirsin. Model tanımadığın bir çözüm ya da örüntü önerdiğinde, o yaklaşımın ",[20,7864,7395],{}," daha iyi olduğunu sorabilirsin.",[10,7867,7868,7869,7872,7873,7875],{},"Örneğin belirli bir veri yapısı için düz nesne yerine ",[196,7870,7871],{},"Map"," önerdiğinde \"neden burada ",[196,7874,7871],{}," daha iyi?\" diye sorduğunda performans farkını, anahtar sıralamasını ve farklı türden anahtarları nasıl ele aldığını açıklıyor.",[28,7877,7879],{"id":7878},"i̇nsan-tarafı-hâlâ-önemli","İnsan tarafı hâlâ önemli",[10,7881,7882,7883,7886],{},"Yapay zekanın bütün geliştiricilerin yerini alacağını düşünmeden önce biraz yavaşlayalım. GPT-5 çok güçlü, ama bir ",[20,7884,7885],{},"araç","; yaratıcılığın, problem çözmenin ve eleştirel düşünmenin yerine geçmiyor.",[10,7888,7889],{},"Bağlamı senin gibi bilmiyor. Modeller örüntülerde çok iyi, ama projenin kendine özgü iş mantığını, uzun vadeli vizyonunu ve ince gereksinimlerini senin bildiğin gibi bilmiyorlar. Üst seviye yönü sen vereceksin ve çıktısını eleştirel gözle inceleyeceksin.",[10,7891,7892],{},"Etik tarafı da var: yalnızca yapay zekaya güvenmek, eğitim verisindeki önyargıları taşımaya ya da gerçekten yeni problemlerde zayıf çözümler üretmeye yol açabilir.",[10,7894,7895],{},"Bir de yapay zekanın kendi hataları var. Bazen doğru görünen ama ince bir hata taşıyan kod üretiyor. Testten ve nihai ürünün kalitesinden sorumlu olan hâlâ sensin.",[28,7897,7899],{"id":7898},"akışına-nasıl-giriyor","Akışına nasıl giriyor",[10,7901,7902],{},"Bu araçların iyi tarafı mevcut editörlerinin içine yerleşmeleri. VS Code, IntelliJ ya da başka bir şey kullanıyor ol, bu yetenekleri parmağının ucuna getiren eklentiler var.",[10,7904,7905,7908,7909,7912],{},[196,7906,7907],{},"\u002F\u002F Kullanıcı e-postasını doğrulayan fonksiyon"," diye bir yorum yazdığında fonksiyonun hemen altında belirmesini düşün. Ya da ",[196,7910,7911],{},"const user = "," yazdığında projenin şemasına bakarak nesne özelliklerinin önerilmesini. Amaç sürtünmeyi azaltmak ve seni akışta tutmak.",[28,7914,7916],{"id":7915},"nereye-varıyor","Nereye varıyor",[10,7918,7919],{},"Kod yazmanın geleceği ortak bir iş: insan aklıyla yapay zekanın birlikte çalışması. Bu araçlar işini elinden almak için değil, tekrar eden ve sıkıcı kısmı devralıp senin dikkatini zor ve yeni olana ayırman için var.",[1341,7921,7922],{},"html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":123,"searchDepth":124,"depth":124,"links":7924},[7925,7926,7927,7934,7935,7936],{"id":7575,"depth":124,"text":7576},{"id":7585,"depth":124,"text":7586},{"id":7595,"depth":124,"text":7596,"children":7928},[7929,7930,7931,7932,7933],{"id":7599,"depth":399,"text":7600},{"id":7820,"depth":399,"text":7821},{"id":7830,"depth":399,"text":7831},{"id":7840,"depth":399,"text":7841},{"id":7858,"depth":399,"text":7859},{"id":7878,"depth":124,"text":7879},{"id":7898,"depth":124,"text":7899},{"id":7915,"depth":124,"text":7916},"GPT-5 gibi yapay zeka destekli kodlama asistanları geliştirme akışını nasıl değiştiriyor, nerede işe yarıyor ve nerede insana ihtiyaç duyuyor.",{},"\u002Fblog\u002Fyapay-zeka-kodlama-asistanlarinin-gelecegi",{"title":7570,"description":7937},"blog\u002Fyapay-zeka-kodlama-asistanlarinin-gelecegi",[7451,7943,7944,327],"GPT-5","coding","the-future-of-ai-coding-assistants","Qfr4a8VrvLcJhQJATKgrSHB0FimNijB8_f716NklMuM",{"id":7948,"title":7949,"body":7950,"category":132,"date":8048,"description":8049,"draft":135,"extension":136,"meta":8050,"navigation":138,"path":8051,"seo":8052,"stem":8053,"tags":8054,"translationKey":8059,"videoId":148,"__hash__":8060},"blog_tr\u002Fblog\u002Fyazilimcilar-icin-48-guc-yasasi.md","Yazılımcılar için 48 Güç Yasası",{"type":7,"value":7951,"toc":8040},[7952,7956,7959,7962,7966,7969,7976,7979,7982,7986,7989,7992,7995,7998,8002,8005,8008,8011,8014,8018,8021,8024,8027,8030,8034,8037],[28,7953,7955],{"id":7954},"kod-tabanında-güç","Kod tabanında güç",[10,7957,7958],{},"Robert Greene'in tartışmalı kitabı \"48 Güç Yasası\"nı büyük ihtimalle duymuşsundur. Genelde riskin yüksek olduğu ortamlardaki sosyal dinamiklerin rehberi olarak okunur. Saraylar ve krallıklar için yazılmış o yasaların epeycesi teknoloji dünyasında da karşılık buluyor. Kendini liyakat düzeni sayan bir alanda bile, güç dinamiklerini okuyabilmek insanların etki kurma ve liderliğe geçme biçiminin parçası.",[10,7960,7961],{},"Bir sonraki günlük toplantında Makyavelist planlar kurmanı önermiyorum. Mesele, her kurumda zaten işleyen kuvvetleri fark etmek ve onlara bilinçli davranmak. Aşağıda bu yasalardan dördü, günlerini kod tabanında geçirenler için yeniden okundu.",[28,7963,7965],{"id":7964},"_1-yasa-efendini-yani-tech-leadini-gölgede-bırakma","1. yasa: Efendini, yani tech lead'ini gölgede bırakma",[10,7967,7968],{},"Bizim dünyamızda \"efendi\" senin tech lead'in, yöneticin ya da kıdemli bir mimar. Zekice bir çözümü göstermek istemek doğal, ama bazı anlarda kazananın üstündeki kişi olmasına izin vermek daha iyidir.",[10,7970,7971,7972,7975],{},"\"Ama ben gerçekten iyiyim, niye saklayayım?\" diye düşünebilirsin. Mesele yeteneğini saklamak değil, onu ",[20,7973,7974],{},"nasıl"," sunduğun. Lead'inin hatalarını sürekli herkesin önünde işaret ediyorsan ya da onun görüşünü sessizce atlayan bir çözümü yayına alıyorsan müttefik kazanmıyorsun, rakip üretiyorsun.",[10,7977,7978],{},"Pratikte bu, yalnızca kusur bulmak yerine çözüm önermek demek. \"Kodun verimsiz\" ile \"Bu fonksiyon için performansı iyileştirebilecek bir optimizasyona bakıyordum\" arasında ciddi fark var. Bir başkasının önerisi işini açtıysa bunu söylemek, büyük bir proje sürerken lead'in yönünü gölgelemek yerine desteklemek de aynı kapsamda.",[10,7980,7981],{},"Kendinden emin bir yönetici katkını değerli bulur. Emin olmayan biri onu tehdit olarak okuyabilir. İkisini ayırt edip yaklaşımını buna göre kurmak işe yarar bir beceri.",[28,7983,7985],{"id":7984},"_7-yasa-i̇şi-başkalarına-yaptır-ama-krediyi-hep-sen-al","7. yasa: İşi başkalarına yaptır, ama krediyi hep sen al",[10,7987,7988],{},"Bağlamından koparıldığında sert duruyor. Yazılımcı için yeniden okunduğunda konu delegasyon, mentorluk ve etki: her satırı kendin yazmak yerine başkalarını yetkinleştirerek daha fazlasını bitirmek.",[10,7990,7991],{},"Kıdemli ve lead rollerine geçtikçe daha çok saat kod yazarak ölçeklenemiyorsun. Kaldıraç mentorlukta. Bir junior geliştiriciyi bir problemin içinden geçirdiğinde ve o teslim ettiğinde, sen güçlü bir ekip kurmanın kredisini alıyorsun, o da deneyimi kazanıyor. Kod incelemesi de aynı: hatayı kendin düzeltmek yerine yazan kişiyi düzeltmeye götür. Onun becerisi gelişir, iyileşen kod da ekibin işi olarak görünür.",[10,7993,7994],{},"Mimari için de geçerli. Karmaşık bir sistemin şeklini sen ortaya koyarsın, ekip modülleri yazar, sistem yayına girdiğinde koyduğun yön sonuçta görünür olur.",[10,7996,7997],{},"Amaç tembellik değil, çarpan etkisi yaratmak. Kalıcı kredi, iyi yönlendirilmiş bir ekibin bitirdiği iddialı projelerden gelir.",[28,7999,8001],{"id":8000},"_11-yasa-i̇nsanların-sana-bağımlı-kalmasını-sağla","11. yasa: İnsanların sana bağımlı kalmasını sağla",[10,8003,8004],{},"Kulağa sahiplenici geliyor, ama profesyonel bağlamda anlamı şu: kendini gerçekten değerli ve yeri doldurulması zor hâle getirmek. Seni ekipte kilit taşına dönüştüren beceriler, bilgi ya da ilişkiler.",[10,8006,8007],{},"Bunun bir kısmı iş güvencesi. Bir kısmı da etki. İnsanlar uzmanlığına güvendiğinde görüşlerin daha ağır basar.",[10,8009,8010],{},"Bu birkaç yoldan oluyor. Başkalarının uzak durduğu kritik ya da gözden düşmüş bir sistemin sorumlusu olursun. Kodun ardındaki iş mantığını herkesten iyi bilirsin, birinin \"bu neden böyle çalışıyor?\" sorusu olduğunda sana gelir. Eski sistemlerin nasıl bağlandığı, kadim bir API'nin tuhaflıkları, bir mimari kararın gerekçesi gibi yazılı olmayan bilgiyi taşırsın. Ya da geliştirme, test, ürün ve operasyon arasındaki köprü olursun; aralarında çeviri yapabilmen ekipler arası projeleri yürütür.",[10,8012,8013],{},"Önemli olan ayrım: bilgiyi saklama. Başkalarının çözemediği problemleri çözen ya da daha hızlı çözen kişi ol.",[28,8015,8017],{"id":8016},"_18-yasa-kendini-korumak-için-kale-inşa-etme","18. yasa: Kendini korumak için kale inşa etme",[10,8019,8020],{},"Kulaklık takıp editörünün içinde kaybolmak kolay. Derin çalışma iyidir. Tam yalıtım değil, en azından etkin ve gelişimin açısından.",[10,8022,8023],{},"\"Ben sadece kod yazmak istiyorum\" savunulabilir bir pozisyon. Ama yalnızca kendi ekibinle konuşuyorsan fırsatları ve farklı bakışları kaçırırsın, itibarın da o ekibin sınırında durur.",[10,8025,8026],{},"Birden fazla ekibi ilgilendiren projelere gönüllü olmak ağını genişletir ve sınırların ötesinde çalışabildiğini gösterir. Şirket içi topluluklar, teknik sunumlar ve meetup'lar bildiğini paylaşmanı ve insan tanımanı sağlar. Kod incelemeleri de sosyal bir yüzey: soru sor, yardım öner, kod tabanının başka köşelerini görmek için kullan. Kendi işinin dışında bile yardıma açık olmak zamanla birikir.",[10,8028,8029],{},"Bağlantıda kalmak, fırsatlardan haberdar olmanın, müttefik kazanmanın ve işinin yakın çevrenin ötesinde görünür olmasının yolu.",[28,8031,8033],{"id":8032},"kod-ve-bağlam","Kod ve bağlam",[10,8035,8036],{},"\"48 Güç Yasası\" bir yazılımcı için beklenmedik bir kariyer tavsiyesi kaynağı, ama tarihsel dekoru kaldırdığında geriye sıradan kurum dinamikleri kalıyor. Teknik beceri en önemlisi, ama kararların alındığı seviyeye tek başına çıkarmaya nadiren yetiyor.",[10,8038,8039],{},"Etkinin ekibinin gündelik etkileşimlerinde nasıl işlediğini anlamak seni daha etkili yapar. Oyun oynamak değil, tahtayı görmek.",{"title":123,"searchDepth":124,"depth":124,"links":8041},[8042,8043,8044,8045,8046,8047],{"id":7954,"depth":124,"text":7955},{"id":7964,"depth":124,"text":7965},{"id":7984,"depth":124,"text":7985},{"id":8000,"depth":124,"text":8001},{"id":8016,"depth":124,"text":8017},{"id":8032,"depth":124,"text":8033},"2025-05-27","Robert Greene'in kitabından çıkan dersler, işinde daha fazla etki ve saygı isteyen yazılım mühendisleri için yeniden okundu.",{},"\u002Fblog\u002Fyazilimcilar-icin-48-guc-yasasi",{"title":7949,"description":8049},"blog\u002Fyazilimcilar-icin-48-guc-yasasi",[8055,7347,8056,8057,8058],"career","power","influence","leadership","48-laws-for-developers","kB1IzkLiBMOtyhHikeyBP3N5HBNxx7AwZW2_F2RzFUY",{"id":8062,"title":8063,"body":8064,"category":132,"date":5680,"description":8219,"draft":135,"extension":136,"meta":8220,"navigation":138,"path":8221,"seo":8222,"stem":8223,"tags":8224,"translationKey":8227,"videoId":148,"__hash__":8228},"blog_tr\u002Fblog\u002Fyazilimcilar-icin-atomik-aliskanliklar.md","Yazılımcılar için atomik alışkanlıklar: denemeye değer altı rutin",{"type":7,"value":8065,"toc":8209},[8066,8069,8076,8083,8086,8090,8093,8096,8100,8103,8106,8113,8117,8120,8123,8133,8137,8140,8143,8149,8153,8156,8159,8166,8170,8173,8176,8179,8183,8186,8193,8196,8200,8203,8206],[10,8067,8068],{},"Hepimizin şöyle bir günü olmuştur: teslim tarihi yaklaşırken boş ekrana bakıyorsun ve kafanda binlerce süreç dönüyor, hiçbiri işe yaramıyor. Ya da bir projeye gerçek bir hevesle başlıyorsun ve o enerjinin ücretsiz deneme süresinden hızlı bittiğini görüyorsun.",[10,8070,8071,8072,8075],{},"Benim verimliliğim de uzun süre lunapark treni gibi çalıştı. Bazı günler her şeyi bitiriyordum, bazı günler ",[196,8073,8074],{},"console.log"," yazmayı hâlâ bilip bilmediğimi merak ediyordum.",[10,8077,8078,8079,8082],{},"Beni atomik alışkanlıklara iten şey buydu. James Clear'ın ",[20,8080,8081],{},"Atomic Habits"," kitabı tek bir fikir üzerine kurulu: küçük değişiklikler zamanla birikerek büyük sonuçlara dönüşür. Git geçmişinin çalışma biçiminden çok uzak değil; bir sürü küçük commit sonunda bir özelliğe varıyor.",[10,8084,8085],{},"İlkeler yazılımcıya iyi oturuyor. Zaten sistemlerle ve kademeli iyileştirmelerle çalışıyoruz; bu alışkanlıkların malzemesi de bu. Kurmaya değer altı tanesi aşağıda.",[28,8087,8089],{"id":8088},"küçük-alışkanlıklar-burada-neden-işe-yarıyor","Küçük alışkanlıklar burada neden işe yarıyor",[10,8091,8092],{},"\"Neden daha çok çalışmıyorum?\" diye sorabilirsin. Sorun şu ki irade tükenen bir kaynak. Devasa bir değişikliğe tek seferde kalkıştığında beynin bunu konforuna yönelik bir tehdit sayıp direniyor. Küçük alışkanlıklar neredeyse görünmez oldukları için o direncin altından geçiyor.",[10,8094,8095],{},"Yazılımcı için bunun önemi büyük, çünkü sürekli yeni bir şey öğreniyor ve kafamızda karmaşık problemler taşıyoruz. Küçük ve düzenli alışkanlıklardan oluşan bir set, o yükü tükenmeden taşımaya yardım ediyor. Kendi iş akışını yeniden düzenlemek gibi.",[28,8097,8099],{"id":8098},"_1-on-beş-dakikalık-derin-çalışma","1. On beş dakikalık derin çalışma",[10,8101,8102],{},"Günün ilk on beş dakikasını, ya da büyük bir işe başlamadan hemen önceki zamanı, listendeki en önemli işe kesintisiz odaklan. Editörünü aç, diğer sekmeleri kapat, bildirimleri sustur, zamanlayıcıyı kur. E-posta yok, Slack yok.",[10,8104,8105],{},"Güne ivmeyle başlatıyor ve beynini hızlıca odağa geçmeye alıştırıyor. Elinde yalnızca on beş dakika kalsa bile ataleti kırmış oluyorsun; akışa girdiğinde o on beş dakika çoğu zaman otuza, sonra bir saate uzuyor.",[10,8107,8108,8109,8112],{},"Örnek: bugünün önemli işi yeni bir kimlik doğrulama akışı. İşin etrafında dolanmak yerine on beş dakika temel ",[196,8110,8111],{},"AuthService"," arayüzünü yazıyorum ve gerisini yok sayıyorum.",[28,8114,8116],{"id":8115},"_2-gün-sonunda-kendi-kodunu-incele","2. Gün sonunda kendi kodunu incele",[10,8118,8119],{},"İşi bitirmeden önce o gün yazdıklarını beş on dakika gözden geçir. Olası hataları, yeniden düzenlemeye değer yerleri, daha net olabilecek isimleri ara. O anda düzeltmen gerekmiyor; amaç görmek.",[10,8121,8122],{},"Güne yerleşmiş küçük bir retrospektif. Kod kalitesi yükseliyor, hatalar erken çıkıyor ve kendi commit'lerinin birikmesini görmek motive ediyor.",[10,8124,8125,8126,8128,8129,8132],{},"Örnek: bir bileşeni bitiriyorum ve push'lamadan önce dosyayı hızlıca geziyorum; ",[196,8127,914],{}," adlı bir değişkenin ",[196,8130,8131],{},"userData"," olsa daha net olacağını fark ediyorum. Yarın değiştirmek için not bırakıyorum.",[28,8134,8136],{"id":8135},"_3-her-gün-küçük-bir-şey-öğren","3. Her gün küçük bir şey öğren",[10,8138,8139],{},"Günde on dakikayı işinle ilgili küçük bir şey öğrenmeye ayır. Bir JavaScript özelliği üzerine kısa bir yazı, bir CSS tekniğini anlatan beş dakikalık bir video, yeni bir editör eklentisi, teknik bir kitaptan birkaç sayfa.",[10,8141,8142],{},"Alan hızlı ilerliyor ve takip etmek önemli, ama her şeyi bir anda takip etmeye çalışmak boğucu. On dakika bunu sürekliliğe çeviriyor ve küçük parçalar birikiyor.",[10,8144,8145,8146,8148],{},"Örnek: Vue 3'ün Composition API'sinde bir şeyden söz edildiğini görüyorum, dokümanı açıp on dakika ",[196,8147,1319],{},"'un ne işe yaradığını okuyorum.",[28,8150,8152],{"id":8151},"_4-yarının-ilk-işini-akşamdan-belirle","4. Yarının ilk işini akşamdan belirle",[10,8154,8155],{},"Bilgisayarı kapatmadan önce beş dakika ayırıp yarın sabah yapacağın ilk tek işi seç. Yaz. İlgili dosyayı editörde açık bırak, seni beklesin.",[10,8157,8158],{},"Bu, karar yorgunluğunu ve soğuk başlangıç problemini ortadan kaldırıyor. Ne yapacağını bilerek uyanıyorsun; erteleme belirgin biçimde azalıyor.",[10,8160,8161,8162,8165],{},"Örnek: dizüstünü kapatmadan önce sıradaki işin bir webhook işleyicisini entegre etmek olduğunu görüyorum, yapışkan nota yazıyorum ve ",[196,8163,8164],{},"stripe-webhook.ts"," dosyasını açık bırakıyorum.",[28,8167,8169],{"id":8168},"_5-i̇ki-dakikalık-dijital-toparlanma","5. İki dakikalık dijital toparlanma",[10,8171,8172],{},"Günde bir kez, iki dakika boyunca ihtiyacın olmayan sekmeleri kapat, masaüstünü topla ya da indirilenler klasörünü temizle. Hepsini değil, tek bir küçük dağınıklığı seç.",[10,8174,8175],{},"Dağınık bir dijital ortam genelde dağınık bir kafa üretiyor. Küçük bir toparlama bile aradığını bulma yükünü azaltıyor.",[10,8177,8178],{},"Örnek: tarayıcıda otuz sekme açık; iki dakika ayırıp kesinlikle gerekmeyen beş tanesini kapatıyorum.",[28,8180,8182],{"id":8181},"_6-bir-dakikalık-fiziksel-sıfırlama","6. Bir dakikalık fiziksel sıfırlama",[10,8184,8185],{},"Saatte bir ayağa kalk, esne ve altmış saniyeliğine ekrandan uzaklaş. Yumuşak bir hatırlatıcı kur ya da bir Pomodoro sayacı kullan; çaldığında yok sayma. Kalk, omuzlarını çevir, pencereden dışarı bak, mutfağa kadar yürü.",[10,8187,8188,8189,8192],{},"Saatlerce klavyeye eğilerek geçiriyoruz. Saatte bir dakika, fiziksel zorlanmaya, kan akışına ve göz yorgunluğuna iyi geliyor. Ayrıca hata ayıklama fikirlerinin azımsanmayacak bir kısmı, koda ",[20,8190,8191],{},"bakmadığın"," anlarda geliyor.",[10,8194,8195],{},"Örnek: sayaç çalıyor, ayağa kalkıyorum, omuzlarımı çeviriyorum ve oturmadan önce bir dakika dışarıdaki ağaçlara bakıyorum.",[28,8197,8199],{"id":8198},"bir-ay-boyunca-denemek","Bir ay boyunca denemek",[10,8201,8202],{},"Bunların hiçbiri anıtsal değişiklikler değil, mesele de bu. Bir ya da ikisini seç ve otuz gün boyunca düzenli uygula.",[10,8204,8205],{},"Clear'ın dört kuralı burada işe yarıyor. Görünür kıl: derin çalışma için monitörüne yapışkan bir not koy. Çekici kıl: alışkanlığın ardına hoşuna giden bir şey ekle. Kolay kıl: gerçekten küçük başla, on beş dakika fazlaysa beş dakika yap. Tatmin edici kıl: kâğıt üzerinde bir kutucukla bile olsa takip et, çünkü serinin uzamasını görmek başlı başına motivasyon.",[10,8207,8208],{},"Küçük ve düzenli hareketler odakta ve süreklilikte gerçek farklara dönüşüyor. Bende değişen şeyin büyük kısmı buydu.",{"title":123,"searchDepth":124,"depth":124,"links":8210},[8211,8212,8213,8214,8215,8216,8217,8218],{"id":8088,"depth":124,"text":8089},{"id":8098,"depth":124,"text":8099},{"id":8115,"depth":124,"text":8116},{"id":8135,"depth":124,"text":8136},{"id":8151,"depth":124,"text":8152},{"id":8168,"depth":124,"text":8169},{"id":8181,"depth":124,"text":8182},{"id":8198,"depth":124,"text":8199},"Yazılımcıların odak ve sürekliliğini bir ay içinde iyileştirebilecek altı küçük, uygulanabilir alışkanlık.",{},"\u002Fblog\u002Fyazilimcilar-icin-atomik-aliskanliklar",{"title":8063,"description":8219},"blog\u002Fyazilimcilar-icin-atomik-aliskanliklar",[327,8225,144,2186,8226],"habits","consistency","atomic-habits-for-developers","pWT9Wfy2ZXf43NcOF1o6y_eREhMMzJbd7GJcb4errwU",{"id":4,"title":5,"body":8230,"category":132,"date":133,"description":134,"draft":135,"extension":136,"meta":8308,"navigation":138,"path":139,"seo":8309,"stem":141,"tags":8310,"translationKey":147,"videoId":148,"__hash__":149},{"type":7,"value":8231,"toc":8300},[8232,8234,8236,8240,8242,8244,8246,8250,8254,8258,8260,8262,8264,8266,8268,8270,8272,8274,8276,8278,8280,8282,8284,8286,8288,8290,8292,8294,8296,8298],[10,8233,12],{},[10,8235,15],{},[10,8237,18,8238,23],{},[20,8239,22],{},[10,8241,26],{},[28,8243,31],{"id":30},[10,8245,34],{},[10,8247,8248,41],{},[38,8249,40],{},[10,8251,8252,47],{},[38,8253,46],{},[10,8255,8256,53],{},[38,8257,52],{},[10,8259,56],{},[28,8261,60],{"id":59},[10,8263,63],{},[10,8265,66],{},[10,8267,69],{},[28,8269,73],{"id":72},[10,8271,76],{},[10,8273,79],{},[10,8275,82],{},[28,8277,86],{"id":85},[10,8279,89],{},[10,8281,92],{},[10,8283,95],{},[10,8285,98],{},[28,8287,102],{"id":101},[10,8289,105],{},[10,8291,108],{},[10,8293,111],{},[28,8295,115],{"id":114},[10,8297,118],{},[10,8299,121],{},{"title":123,"searchDepth":124,"depth":124,"links":8301},[8302,8303,8304,8305,8306,8307],{"id":30,"depth":124,"text":31},{"id":59,"depth":124,"text":60},{"id":72,"depth":124,"text":73},{"id":85,"depth":124,"text":86},{"id":101,"depth":124,"text":102},{"id":114,"depth":124,"text":115},{},{"title":5,"description":134},[143,144,145,146],1786529715838]